/* Font Awesome @import removed: no fa-* icons are used (all icons are inline SVG).
   It was render-blocking and an external dependency the project does not need. */

/* Arrawaj → May Cash — public form + auth, built on the May Cash design system */

.arw-body { background: var(--gray-50); min-height: 100vh; display: flex; flex-direction: column; }

/* Topbar */
.arw-topbar { background: #fff; border-bottom: 1px solid var(--ink-100); position: sticky; top: 0; z-index: 20; }
.arw-topbar__in { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.arw-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); }
.arw-brand__mark { font-weight: 800; color: var(--mc-red); font-size: 18px; letter-spacing: -0.3px; }
.arw-brand__sep { color: var(--ink-300); font-weight: 600; }
.arw-brand__sub { font-weight: 700; color: var(--gray-700); font-size: 14px; }

.arw-main { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 28px 24px 56px; }
.req { color: var(--mc-red); font-weight: 800; }

/* Hero band — bold, branded, with mascot + motif */
.arw-hero { position: relative; overflow: hidden; background: linear-gradient(130deg, #E8211F 0%, #AE1519 100%); border-radius: 22px; padding: 0; margin-bottom: 24px; display: flex; align-items: stretch; box-shadow: 0 22px 46px -22px rgba(217,23,27,.7); }
.arw-hero::before { content: ""; position: absolute; inset: 0; background: url('../images/motif.png') center / 220px repeat; opacity: .1; pointer-events: none; }
.arw-hero__txt { position: relative; z-index: 1; flex: 1; padding: 30px 34px; display: flex; flex-direction: column; justify-content: center; }
.arw-hero__eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #FFD38A; }
.arw-hero__txt h1 { color: #fff; font-size: clamp(22px, 3vw, 30px); line-height: 1.12; margin-top: 10px; letter-spacing: -.02em; }
.arw-hero__txt p { color: rgba(255,255,255,.92); font-size: 14.5px; line-height: 1.55; margin-top: 9px; max-width: 540px; }
/* Mascot sits on its own light panel — it's drawn for a white background, so
   placing it directly on red camouflaged its red accents and ground shadow. */
.arw-hero__fig { position: relative; z-index: 1; flex-shrink: 0; width: 258px; margin: 16px 16px 16px 0; border-radius: 16px; background: radial-gradient(circle at 50% 42%, #ffffff 0%, #FFF0EF 100%); display: flex; align-items: flex-end; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.arw-hero__mascot { height: 206px; width: auto; margin-bottom: -6px; filter: drop-shadow(0 10px 16px rgba(0,0,0,.16)); }
@media (max-width: 680px) { .arw-hero__fig { display: none; } .arw-hero__txt { padding: 24px; } }

/* Form sections */
.arw-form { display: flex; flex-direction: column; gap: 20px; }
.arw-section { background: #fff; border: 1px solid var(--ink-200); border-radius: 18px; box-shadow: 0 14px 36px -24px rgba(15,23,42,.35); padding: 26px 28px; }
.arw-section__head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--ink-100); }
.arw-section__kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-red); }
.arw-section__head h2 { font-size: 18px; }
.arw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Upload */
.arw-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed #F2B0B2; border-radius: 16px; padding: 28px 18px; text-align: center; background: var(--mc-red-lightest); cursor: pointer; transition: all .2s ease; }
.arw-upload:hover { border-color: var(--mc-red); background: #FDE4E4; }
.arw-upload:focus-within { border-color: var(--mc-red); outline: 2px solid var(--mc-red); outline-offset: 2px; }
.arw-upload__ico { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--mc-red); display: grid; place-items: center; box-shadow: 0 6px 14px -5px rgba(217,23,27,.45); }
.arw-upload__ico svg { width: 24px; height: 24px; }
.arw-upload__txt { font-weight: 700; color: var(--mc-red-dark); font-size: 14px; }
.arw-upload__hint { font-size: 12px; color: var(--mc-red); opacity: .8; }
.arw-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.arw-thumb { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid var(--ink-200); }
.arw-thumb img { width: 100%; height: 100%; object-fit: cover; }
.arw-thumb__x {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; border: none; cursor: pointer; font-size: 13px; line-height: 1; display: grid; place-items: center;
}

.arw-actions { margin-top: 24px; }

/* Inputs without a leading icon sit flush left (the design system reserves 40px for icons). */
.arw-form .field-input input,
.arw-detailcard .field-input input { padding-left: 14px; }

/* Success */
.arw-success { max-width: 560px; margin: 40px auto; padding: 40px 32px; text-align: center; }
.arw-success__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--success-light); color: var(--success); display: grid; place-items: center; margin: 0 auto 18px; }
.arw-success__icon svg { width: 32px; height: 32px; }
.arw-success h1 { font-size: 24px; margin-bottom: 10px; }
.arw-ref { margin: 22px auto; padding: 14px 18px; background: var(--ink-50); border: 1px dashed var(--ink-300); border-radius: 12px; font-size: 15px; }
.arw-ref strong { font-family: var(--font-mono); color: var(--mc-red-dark); letter-spacing: .5px; }

/* Footer */
.arw-footer { background: #fff; border-top: 1px solid var(--ink-100); padding: 20px 0; text-align: center; color: var(--ink-500); font-size: 13px; }

/* Brand logo */
.arw-logo { height: 38px; width: auto; display: block; }
.arw-topbar .arw-logo, .arw-dashbar .arw-logo { height: 34px; }

/* Global loader overlay — clean branded spinner */
.arw-loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.86); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transition: opacity .3s ease, visibility 0s .3s; }
.arw-loader__spin { width: 132px; height: 105px; border: none; border-radius: 0; animation: none; background: url('../images/load.gif') center / contain no-repeat; }
@keyframes arwSpin { to { transform: rotate(360deg); } }
.arw-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* ============================================================
   Page chrome — mirrors maycash.ma (red top strip + floating
   white rounded nav card over a light-gray page).
   ============================================================ */
.arw-page { background: #f7f7f7; min-height: 100vh; display: flex; flex-direction: column; }
.arw-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; width: 100%; }

.arw-topstrip { background: var(--mc-red); color: rgba(255,255,255,.92); font-size: 13px; }
.arw-topstrip__in { max-width: 1240px; margin: 0 auto; padding: 0 24px; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.arw-topstrip__seg { display: flex; align-items: center; gap: 0; }
.arw-topstrip__seg span { position: relative; padding: 0 16px; font-weight: 600; color: rgba(255,255,255,.85); }
.arw-topstrip__seg span:first-child { padding-left: 0; }
.arw-topstrip__seg span + span::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.5); }
.arw-topstrip__contact { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: #fff; }
.arw-topstrip__contact svg { width: 15px; height: 15px; }

.arw-nav { position: sticky; top: 0; z-index: 40; padding: 14px 0; background: #f7f7f7; }
.arw-nav__shell { max-width: 1240px; margin: 0 auto; }
.arw-navshell { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 68px; padding: 10px 14px 10px 22px; margin: 0 24px; background: #fff; border: 1px solid rgba(15,23,42,.06); border-radius: 22px; box-shadow: 0 12px 28px -18px rgba(15,23,42,.18); }
.arw-navshell .arw-logo { height: 40px; }
.arw-navlinks { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.arw-navlinks a { padding: 10px 16px; font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--gray-900); border-radius: 11px; transition: color .2s ease, background .2s ease; }
.arw-navlinks a:hover { color: var(--mc-red); }
.arw-navlinks a.is-active { color: var(--mc-red); background: var(--mc-red-lightest); }
.arw-navactions { display: inline-flex; align-items: center; gap: 12px; margin-left: 6px; padding-left: 16px; border-left: 1px solid rgba(15,23,42,.1); }
.arw-navuser { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--gray-700); }
.arw-iconbtn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--mc-red-lightest); color: var(--mc-red); border: 0; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
.arw-iconbtn:hover { background: var(--mc-red); color: #fff; transform: translateY(-1px); }
.arw-iconbtn svg { width: 18px; height: 18px; }

/* Right-hand nav cluster: language switch + MSF button */
.arw-navright { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.arw-lang { display: inline-flex; background: #fff; border: 1px solid var(--mc-hair); border-radius: 999px; padding: 3px; gap: 2px; }
.arw-lang__opt { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 6px 11px; font-size: 13px; font-weight: 600; line-height: 1; color: var(--mc-muted); border-radius: 999px; text-decoration: none; transition: color .15s ease, background .15s ease; }
.arw-lang__opt:hover { color: var(--mc-ink); }
.arw-lang__opt.is-active { background: var(--mc-red-lightest); color: var(--mc-red); }
html[dir="rtl"] .arw-navright { margin-left: 0; margin-right: auto; }

@media (max-width: 860px) {
  .arw-navshell { margin: 0 14px; padding: 10px 14px; min-height: 58px; flex-wrap: wrap; gap: 10px; border-radius: 18px; }
  .arw-navshell .arw-logo { height: 32px; }
  .arw-navlinks { order: 3; width: 100%; overflow-x: auto; gap: 0; border-top: 1px solid var(--ink-100); padding-top: 4px; margin-top: 2px; -webkit-overflow-scrolling: touch; }
  .arw-navlinks a { padding: 9px 12px; font-size: 13.5px; white-space: nowrap; }
  .arw-navactions { margin-left: auto; padding-left: 14px; }
  .arw-navuser__name { display: none; }
  .arw-topstrip__seg span:not(:first-child) { display: none; }
}
@media (max-width: 520px) {
  .arw-topstrip__contact span { display: none; }
}

/* Auth — portal-style red-header card with mascot + motif background */
.arw-auth { min-height: 100vh; display: grid; place-items: center; background: var(--gray-50); padding: 24px; position: relative; overflow: hidden; }
/* Login motif removed per request — clean background. */
.arw-login { position: relative; z-index: 1; width: 100%; max-width: 420px; background: #fff; border-radius: 20px; box-shadow: var(--shadow-xl); overflow: visible; }
.arw-login__logo { position: relative; z-index: 1; height: 68px; width: auto; max-width: 82%; display: block; margin-left: -6px; }
.arw-login__head { position: relative; background: var(--mc-red); border-radius: 20px 20px 0 0; padding: 26px 26px 20px; min-height: 120px; display: flex; align-items: flex-end; }
.arw-login__brand { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: .01em; line-height: 1; }
.arw-login__brand .b1 { color: #fff; }
.arw-login__brand .b2 { color: #f6c86b; }
.arw-login__mascot { position: absolute; z-index: 1; bottom: -28px; right: 6px; width: min(56%, 240px); height: auto; pointer-events: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.18)); animation: arwPop .4s var(--ease); }
@keyframes arwPop { from { transform: translateY(14px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.arw-login__body { position: relative; padding: 28px; border-radius: 0 0 20px 20px; background: #fff; }
.arw-login__title { font-size: 20px; margin-bottom: 2px; }
.arw-login__sub { color: var(--ink-500); font-size: 13.5px; margin-bottom: 20px; }
.arw-login__demo { margin-top: 18px; text-align: center; font-size: 12.5px; color: var(--ink-500); }
.arw-login__demo strong { color: var(--gray-800); }

@media (max-width: 640px) {
  .arw-grid { grid-template-columns: 1fr; }
  .arw-section { padding: 18px; }
}

/* ============================================================
   Award-level polish — motion tokens + tasteful micro-interactions.
   Every non-essential animation respects prefers-reduced-motion.
   ============================================================ */
:root { --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 440ms; --ease-out: cubic-bezier(.2,.8,.2,1); }

/* Button press feedback */
.btn { transition: all .22s var(--ease-out); }
.btn:active { transform: translateY(0) scale(.975); }

/* Cards lift on hover (signals the surface is alive) */
.arw-stat, .arw-trend, .arw-tablecard, .arw-detailcard, .arw-section {
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .arw-stat:hover { transform: translateY(-3px); }

  /* One-time intro rise (body.arw-intro added by JS once per session) */
  @keyframes arwRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  body.arw-intro .arw-summary,
  body.arw-intro .arw-stat,
  body.arw-intro .arw-trend,
  body.arw-intro .arw-tablecard,
  body.arw-intro .arw-detailcard,
  body.arw-intro .arw-section { animation: arwRise var(--dur-slow) var(--ease-out) both; }
  body.arw-intro .arw-summary { animation-delay: 0ms; }
  body.arw-intro .arw-stats .arw-stat:nth-child(1) { animation-delay: 60ms; }
  body.arw-intro .arw-stats .arw-stat:nth-child(2) { animation-delay: 110ms; }
  body.arw-intro .arw-stats .arw-stat:nth-child(3) { animation-delay: 160ms; }
  body.arw-intro .arw-stats .arw-stat:nth-child(4) { animation-delay: 210ms; }
  body.arw-intro .arw-trend { animation-delay: 260ms; }
  body.arw-intro .arw-tablecard { animation-delay: 320ms; }
  /* Bars grow from the baseline */
  @keyframes arwBarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  body.arw-intro .arw-trend__bar { transform-origin: bottom; animation: arwBarGrow var(--dur-slow) var(--ease-out) both; animation-delay: 300ms; }
  body.arw-intro .arw-trend__val { animation: arwRise var(--dur-base) var(--ease-out) both; animation-delay: 560ms; }
}

/* ============================================================
   Interactive layer — toasts, lightbox, quick actions
   ============================================================ */
/* Toasts */
.arw-toasts { position: fixed; bottom: 22px; right: 22px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.arw-toast { pointer-events: auto; min-width: 220px; max-width: 360px; display: flex; align-items: center; gap: 10px; background: var(--gray-900); color: #fff; font-size: 13.5px; font-weight: 600; padding: 12px 16px; border-radius: 12px; box-shadow: 0 14px 34px -10px rgba(0,0,0,.45); opacity: 0; transform: translateY(12px); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.arw-toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.arw-toast.is-ok::before { background: #34D399; }
.arw-toast.is-err::before { background: #F87171; }
.arw-toast.is-show { opacity: 1; transform: none; }
@media (max-width: 520px) { .arw-toasts { left: 16px; right: 16px; bottom: 16px; } .arw-toast { max-width: none; } }

/* Photo lightbox */
.arw-lightbox { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(9,14,26,.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s ease; }
.arw-lightbox.is-show { opacity: 1; }
.arw-lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 12px; background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.5); transform: scale(.96); transition: transform .22s var(--ease-out); }
.arw-lightbox.is-show img { transform: none; }
.arw-lightbox__x { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background .18s ease; }
.arw-lightbox__x:hover { background: rgba(255,255,255,.28); }

/* Quick actions */
.arw-quick { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.arw-quickbtn { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--gray-900); background: #fff; border: 1px solid var(--ink-200); border-radius: 11px; padding: 9px 15px; cursor: pointer; transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), color .18s var(--ease-out); text-decoration: none; }
.arw-quickbtn svg { width: 16px; height: 16px; color: var(--mc-red); }
.arw-quickbtn:hover { border-color: var(--mc-red); color: var(--mc-red); transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(217,23,27,.4); }
.arw-quickbtn:active { transform: translateY(0) scale(.98); }
.arw-photo { cursor: zoom-in; }

/* ============================================================
   MERCURY-CALM LAYER — refined, border-defined, light-weight.
   Keeps May Cash red as the single restrained accent.
   ============================================================ */
:root {
  --font-display: 'Inter', system-ui, sans-serif;
  --mc-ink: #1E1E2A;
  --mc-muted: #5B5C66;   /* darkened from #70707D for WCAG AA contrast on white */
  --mc-hair: rgba(60,62,86,.10);
  --mc-hair-2: rgba(60,62,86,.16);
  --mc-page: #FAFAFA;
}
body { color: var(--mc-ink); font-weight: 400; }
h1, h2, h3, h4, h5 { font-weight: 560; letter-spacing: -.012em; color: var(--mc-ink); }
.arw-page, .arw-dash { background: var(--mc-page); }

/* Buttons — pill, quiet weight */
.btn { border-radius: 999px; font-weight: 500; letter-spacing: 0; font-family: var(--font-display); box-shadow: none; }
.btn-primary { background: var(--mc-red); box-shadow: none; }
.btn-primary:hover { background: var(--mc-red-dark); box-shadow: none; transform: none; }
.btn-outline { border-color: var(--mc-hair-2); background: #fff; color: var(--mc-ink); }
.btn-outline:hover { border-color: var(--mc-ink); color: var(--mc-ink); background: #fff; }
.btn-ghost { color: var(--mc-muted); }
.btn-ghost:hover { color: var(--mc-ink); background: rgba(60,62,86,.05); }

/* Cards & nav — hairline border, (almost) no shadow */
.card { border: 1px solid var(--mc-hair); box-shadow: none; border-radius: 12px; }
.arw-navshell { border: 1px solid var(--mc-hair); box-shadow: 0 1px 2px rgba(16,18,40,.04); border-radius: 16px; }
.arw-navlinks a { font-weight: 500; }
.arw-navlinks a.is-active { background: var(--mc-red-lightest); color: var(--mc-red); }
.arw-iconbtn { background: rgba(60,62,86,.05); color: var(--mc-muted); }
.arw-iconbtn:hover { background: var(--mc-red); color: #fff; }

/* No shouty uppercase anywhere */
.arw-stat__label, .arw-chips__lbl, .arw-detailcard h2, .arw-detailcard h3,
.arw-fields .k, .arw-section__kicker, .arw-statuspanel .cur, .arw-statusform label,
.arw-trend__head h2, .field-label {
  text-transform: none !important; letter-spacing: 0 !important;
}
.field-label { color: var(--mc-muted); font-weight: 500; }

/* ---- Form page → Mercury-calm (hero light card, calm sections) ---- */
.arw-hero { background: #fff; border: 1px solid var(--mc-hair); box-shadow: none; border-radius: 16px; overflow: hidden; }
.arw-hero::before { display: none; }
.arw-hero__eyebrow { color: var(--mc-red); text-transform: none !important; letter-spacing: 0 !important; font-weight: 600; font-size: 12.5px; }
.arw-hero__txt h1 { color: var(--mc-ink); font-weight: 560; letter-spacing: -.018em; }
.arw-hero__txt p { color: var(--mc-muted); }
.arw-hero__txt p span { color: var(--mc-red) !important; font-weight: 600 !important; }
.arw-hero__fig { background: transparent; box-shadow: none; }

.arw-section { border: 1px solid var(--mc-hair) !important; box-shadow: none !important; border-radius: 12px; }
.arw-section__head { border-bottom: 1px solid var(--mc-hair); }
.arw-section__kicker { color: var(--mc-red); text-transform: none !important; letter-spacing: 0 !important; font-weight: 600; }
.arw-section__head h2 { font-weight: 560; }
.arw-upload { background: rgba(60,62,86,.025); border: 1.5px dashed var(--mc-hair-2); }
.arw-upload:hover { border-color: var(--mc-red); background: rgba(217,23,27,.03); }
.arw-upload__ico { box-shadow: none; color: var(--mc-red); }
.arw-upload__txt { color: var(--mc-ink); }
.arw-upload__hint { color: var(--mc-muted); }
.radio-card.is-checked { background: var(--mc-red-lightest); border-color: var(--mc-red); color: var(--mc-red); }
.field input, .field select, .field textarea { border-color: var(--mc-hair-2); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--mc-red); box-shadow: 0 0 0 3px rgba(217,23,27,.1); }

/* Login card → calm (keep the red header for brand, soften the rest) */
.arw-login { box-shadow: 0 1px 2px rgba(16,18,40,.05), 0 12px 30px -18px rgba(16,18,40,.2); }
.arw-login__title { font-weight: 560; }
.arw-login__sub { color: var(--mc-muted); }

/* ---- French-styled file picker (hides the browser's English default) ---- */
.arw-filepick { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.arw-filepick__btn { flex: 0 0 auto; font-family: var(--font-display); font-size: 13px; font-weight: 500; color: var(--mc-ink); background: #fff; border: 1px solid var(--mc-hair-2); border-radius: 999px; padding: 8px 14px; white-space: nowrap; transition: border-color .2s ease, color .2s ease; }
.arw-filepick:hover .arw-filepick__btn { border-color: var(--mc-red); color: var(--mc-red); }
.arw-filepick:focus-within .arw-filepick__btn { border-color: var(--mc-red); outline: 2px solid var(--mc-red); outline-offset: 2px; }
.arw-filepick__name { font-size: 12.5px; color: var(--mc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }