/* Design tokens.
   Derived from the live marketing site (styles.css), which decision D-22 makes
   canonical. Do not invent values here - if a colour is needed, it comes from
   the brand or it does not exist.

   These values came from the Iranian product's site, because this portal was
   forked from its repository. They are the palette the portal renders today
   and changing them is a design decision, not part of separating the two. */
:root {
  /* ground */
  --ink:        #090B1A;
  --ink-2:      #10122B;
  --ink-3:      #141636;

  /* brand - the Mini App's palette, so the two surfaces are one product */
  --accent:       #C34CFE;
  --accent-dim:   rgba(195,76,254,.14);
  --accent-glow:  rgba(122,51,252,.35);
  --accent-2:     #7A33FC;
  --accent-2-dim: rgba(122,51,252,.12);

  /* text - contrast measured against --ink: paper 17.2:1, mist 8.1:1, muted 5.9:1 */
  --paper:  #F1EFFF;
  --mist:   #A6A2CC;
  --muted:  #8C88B4;

  /* state */
  --success: #43D08A;
  --danger:  #F47067;

  /* structure */
  --line:       rgba(166,162,204,.14);
  --glass-bg:   rgba(16,18,43,.55);
  --glass-line: rgba(166,162,204,.16);

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 99px;

  --shadow-card: 0 20px 60px rgba(0,0,0,.35);
  --shadow-glow: 0 8px 40px rgba(122,51,252,.35), inset 0 1px 0 rgba(255,255,255,.18);

  --ease: cubic-bezier(.2,.8,.2,1);

  --font-ui:    "Inter", system-ui, sans-serif;
  --font-display: "Manrope", "Inter", sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, monospace;
}

/* Self-hosted, split by unicode-range so a Persian reader never downloads Latin
   glyphs they will not use. Matters on constrained Iranian connections. */
@font-face { font-family: "Manrope"; font-weight: 400 800; font-display: swap;
  src: url("/portal/static/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-weight: 400 800; font-display: swap;
  src: url("/portal/static/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:"Inter"; font-weight:100 900; font-display:swap;
  src:url("/portal/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Inter"; font-weight:100 900; font-display:swap;
  src:url("/portal/static/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-ui);
  font-size:15px; line-height:1.6;
  min-height:100vh;
  /* the ambient glow from the marketing site, kept subtle behind data */
  background-image:
    radial-gradient(ellipse 90% 55% at 50% 0%,   rgba(195,76,254,.07), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 110%, rgba(122,51,252,.05), transparent 60%);
  background-attachment:fixed;
}
a { color:var(--accent); text-decoration:none; }
a:hover { color:#5DF0DC; text-decoration:underline; }

.wrap { max-width:900px; margin:0 auto; padding:20px 16px 56px; }

header.top {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 0; margin-bottom:20px; border-bottom:1px solid var(--line);
}
.brand { font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:.2px; }
.brand span { color:var(--accent); }
.top nav { display:flex; gap:14px; align-items:center; font-size:14px; }
.muted { color:var(--muted); }
.mist  { color:var(--mist); }

.card {
  background:var(--ink-3); border:1px solid var(--card-border,var(--glass-line));
  border-radius:var(--radius-md); padding:18px;
  box-shadow:var(--shadow-card);
}
.card-teal { border-color:rgba(195,76,254,.26); box-shadow:0 0 30px rgba(195,76,254,.06); }
.card h2 { margin:0 0 4px; font-size:16px; font-weight:800; }
.card .sub { color:var(--muted); font-size:13px; margin-bottom:12px; }

.grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }

.stat { background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; }
.stat .label { color:var(--muted); font-size:12px; margin-bottom:6px; }
.stat .value { font-size:22px; font-weight:800; font-family:var(--font-display); }
.stat .value.accent { color:var(--accent); }
.stat .value.accent-2 { color:var(--accent-2); }

.badge { display:inline-block; padding:3px 10px; border-radius:var(--radius-pill); font-size:12px; font-weight:700; }
.badge.active    { background:rgba(67,208,138,.14); color:var(--success); }
.badge.pending   { background:var(--accent-2-dim);   color:var(--accent-2); }
.badge.expired,
.badge.terminated{ background:rgba(244,112,103,.12); color:var(--danger); }
.badge.suspended { background:rgba(166,162,204,.12); color:var(--mist); }

table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { text-align:start; padding:10px 8px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:700; font-size:11px; letter-spacing:.5px; }
.num { font-family:var(--font-display); }
.scroll { overflow-x:auto; }

.meter { height:6px; background:var(--ink-2); border:1px solid var(--line);
         border-radius:var(--radius-pill); overflow:hidden; margin-top:10px; }
.meter > i { display:block; height:100%; background:var(--accent); border-radius:var(--radius-pill); }
.meter > i.warn { background:var(--accent-2); }
.meter > i.over { background:var(--danger); }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 20px;
  border:0; border-radius:var(--radius-sm); font-weight:700; font-size:14px;
  font-family:inherit; cursor:pointer; color:var(--ink);
  background:linear-gradient(135deg,#D98BFF,var(--accent) 55%,#9B3AF0);
  box-shadow:var(--shadow-glow);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform:translateY(-1px); text-decoration:none; }
.btn.ghost { background:transparent; border:1px solid var(--glass-line); color:var(--paper); box-shadow:none; }

input[type=text],input[type=password],input[type=url],input[type=email],
input[type=search],input[type=number] {
  width:100%; padding:12px 14px;
  background:var(--ink-2); border:1px solid var(--glass-line);
  border-radius:var(--radius-sm); color:var(--paper); font-family:inherit; font-size:15px;
}
input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(195,76,254,.10); }
label { display:block; margin-bottom:6px; color:var(--mist); font-size:13px; }

.notice { padding:11px 14px; border-radius:var(--radius-sm); font-size:14px; margin-bottom:14px; }
.notice.err  { background:rgba(244,112,103,.10); border:1px solid rgba(244,112,103,.3); color:var(--danger); }
.notice.info { background:var(--accent-dim); border:1px solid rgba(195,76,254,.25); color:var(--accent); }

footer { margin-top:26px; padding-top:14px; border-top:1px solid var(--line);
         color:var(--muted); font-size:12px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }

/* directional icons mirror in RTL; brand marks must not */
[dir=rtl] .flip { transform:scaleX(-1); }
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }


/* ---------------------------------------------------------------------------
   The client-area shell. Sidebar on the right in RTL, one page per service.
   --------------------------------------------------------------------------- */
.app{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
.side{background:var(--ink-2);border-inline-end:1px solid var(--line);
  padding:22px 16px;display:flex;flex-direction:column;gap:26px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);
  font-weight:900;font-size:21px;letter-spacing:-.01em;padding:0 4px;
  /* one word, isolated: RTL reorders a split wordmark into "ghooz Chal" */
  direction:ltr;unicode-bidi:isolate;color:var(--paper)}
.brand:hover{text-decoration:none}
.brand img{width:38px;height:38px;border-radius:50%;flex:none;
  box-shadow:0 0 22px rgba(195,76,254,.25);border:1px solid rgba(195,76,254,.26);
  background:rgba(195,76,254,.06)}
.navgroup{display:flex;flex-direction:column;gap:4px}
.navlabel{color:var(--muted);font-size:11px;letter-spacing:.8px;padding:0 10px 6px;font-weight:700}
.nav{display:flex;align-items:center;gap:11px;min-height:44px;padding:0 12px;
  border-radius:var(--radius-sm);color:var(--mist);font-size:14px;font-weight:500}
.nav:hover{background:rgba(166,162,204,.06);text-decoration:none;color:var(--paper)}
.nav svg{flex:none;opacity:.85}
.nav.on{background:var(--accent-dim);color:var(--accent);font-weight:700}
.nav .chip{margin-inline-start:auto;font-size:10px;font-weight:700;letter-spacing:.3px;padding:2px 8px;
  border-radius:var(--radius-pill);background:rgba(166,162,204,.10);color:var(--muted)}
.main{padding:20px 28px 40px;display:flex;flex-direction:column;gap:18px;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.topbar h1{font-size:20px;font-weight:800;margin:0}
.topbar .crumb{color:var(--muted);font-size:13px;margin:0}
.topright{display:flex;align-items:center;gap:12px}
.wallet{background:var(--ink-3);border:1px solid var(--glass-line);
  border-radius:var(--radius-pill);padding:7px 8px 7px 16px}
/* one line: the label and the amount are one fact, and stacked they read as
   two and push the topbar taller than the page title beside them */
.wallet{display:flex;align-items:center;gap:10px;white-space:nowrap}
.wallet .lbl{color:var(--muted);font-size:11px;letter-spacing:.5px}
.wallet .amt{font-family:var(--font-display);font-weight:700;font-size:15px}
.wallet .cur{color:var(--muted);font-size:12px;font-family:var(--font-ui);margin-inline-start:4px}
.lang{display:flex;gap:2px;background:var(--ink-3);border:1px solid var(--glass-line);
  border-radius:var(--radius-pill);padding:3px;direction:ltr}
.lang a{min-width:34px;text-align:center;font-size:12px;font-weight:700;padding:5px 0;
  border-radius:var(--radius-pill);color:var(--muted);font-family:var(--font-display)}
.lang a:hover{text-decoration:none;color:var(--paper)}
.lang a.on{background:var(--accent-dim);color:var(--accent)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.plain{max-width:440px;margin:48px auto;padding:0 16px}
/* the sign-in page is two columns and needs the room the design gives it */
.plain.wide{max-width:1000px}

/* Straight from the artboard's shell.css. These were missing, which is why
   .accent/.accent-2 coloured nothing and .sub only worked inside a card. Kept above
   the responsive blocks below so those still override. */
.brand.lg{font-size:25px}
.brand.lg img{width:46px;height:46px}
.brand b{color:var(--accent);font-weight:700}
.nav.soon{color:var(--muted)}
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.h1{font-size:20px;font-weight:800;margin:0}
.crumb{color:var(--muted);font-size:13px;margin:0}
.avatar{width:38px;height:38px;border-radius:var(--radius-pill);display:grid;place-items:center;
  background:linear-gradient(135deg,#D98BFF,var(--accent) 55%,#9B3AF0);
  color:var(--ink);font-weight:800;font-family:var(--font-display);font-size:14px}
.sub{color:var(--muted);font-size:13px}
.accent{color:var(--accent)}
.accent-2{color:var(--accent-2)}
.badge.off{background:rgba(166,162,204,.12);color:var(--mist)}
.admin .stat .value.accent{color:var(--accent-2)}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{flex-direction:row;flex-wrap:wrap;gap:12px;border-inline-end:0;
    border-bottom:1px solid var(--line);padding:14px 16px}
  .side .navlabel{display:none}
  .side .navgroup{flex-direction:row;flex-wrap:wrap;gap:6px}
  .nav{min-height:40px;padding:0 12px}
  .main{padding:16px}
  .grid2,.grid3,.grid4{grid-template-columns:1fr}
}

/* Admin is the same system in the secondary accent, so a glance tells you which
   side you are on. Nothing else changes - same cards, same density. */
.admin .nav.on{background:var(--accent-2-dim);color:var(--accent-2)}
.admin .card-teal{border-color:rgba(122,51,252,.26);box-shadow:0 0 30px rgba(122,51,252,.06)}
/* The colour is needed because .admin a below is more specific than .btn, so a
   button that happens to be a link took the accent link colour - accent text on
   the accent gradient, which is a button with nothing written on it. The design
   never hit this: there the button is a <div>, and only a real page needs it to
   navigate. */
.admin .btn{background:linear-gradient(135deg,#A87BFF,var(--accent-2) 55%,#5B22C9);
  box-shadow:0 8px 40px rgba(122,51,252,.26);color:var(--ink)}
.admin .btn.ghost{background:transparent;box-shadow:none;
  border:1px solid var(--glass-line);color:var(--paper)}
.admin .meter>i{background:var(--accent-2)}
.admin a{color:var(--accent-2)}
.admin .brand{color:var(--paper)}

/* --- admin radio ---------------------------------------------------------- */
.flash { padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:16px; font-weight:600; }
.flash.good { background:rgba(67,208,138,.12); color:var(--success); border:1px solid rgba(67,208,138,.28); }
.flash.bad  { background:rgba(244,112,103,.10); color:var(--danger);  border:1px solid rgba(244,112,103,.28); }

.cardhead { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:4px; }

.drop { border:1px dashed var(--glass-line); border-radius:var(--radius-md); padding:22px;
        text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; }
.drop .upic { color:var(--accent-2); }

input[type=file] { width:100%; color:var(--mist); font-size:13px; font-family:inherit; }
input[type=file]::file-selector-button {
  margin-inline-end:10px; padding:7px 14px; border-radius:var(--radius-pill); cursor:pointer;
  border:1px solid var(--glass-line); background:var(--ink-2); color:var(--paper);
  font-family:inherit; font-size:13px; font-weight:600; }
input[type=file]::file-selector-button:hover { border-color:var(--accent); }

select { width:100%; padding:11px 13px; border-radius:var(--radius-sm); background:var(--ink-2);
         border:1px solid var(--glass-line); color:var(--paper); font-family:inherit; font-size:14px; }
select:focus { outline:none; border-color:var(--accent); }

label.inline { display:flex; align-items:center; gap:8px; margin:14px 0; }
label.inline input { width:auto; }

.pl-new { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.pl-new .pl-cover { width:120px; flex:none; }
.coverbox { height:104px; border-radius:var(--radius-md); border:1px dashed var(--glass-line);
            display:grid; place-items:center; text-align:center; color:var(--accent-2);
            background:linear-gradient(135deg,rgba(122,51,252,.14),rgba(16,18,43,.6)); margin-bottom:8px; }

.thumb { width:46px; height:46px; border-radius:10px; border:1px solid var(--glass-line);
         background:linear-gradient(135deg,rgba(195,76,254,.28),rgba(16,18,43,.7));
         background-size:cover; background-position:center; margin-bottom:6px; }
.coverform input[type=file] { width:120px; font-size:11px; }
.coverform input[type=file]::file-selector-button { padding:3px 8px; font-size:11px; }

tr.open > td { background:rgba(195,76,254,.05); }

.rowacts { display:flex; gap:10px; align-items:center; justify-content:flex-end; }
.rowacts form { display:inline; }
.linkish { background:none; border:none; padding:0; cursor:pointer; font:inherit;
           color:var(--accent); font-size:13px; }
.linkish:hover { text-decoration:underline; }
.linkish.danger { color:var(--danger); }
.btn.small { min-height:38px; padding:0 16px; font-size:13px; }

input.cell { padding:8px 11px; font-size:14px; background:var(--ink-2);
             border:1px solid var(--glass-line); border-radius:10px; min-width:130px; }

/* --- admin bot ------------------------------------------------------------ */
.funnel-row { display:grid; grid-template-columns:150px 1fr 56px 52px; gap:12px;
              align-items:center; margin-bottom:10px; }
.funnel-name { font-size:14px; }
.funnel-track { background:var(--ink-2); border:1px solid var(--line);
                border-radius:var(--radius-pill); height:22px; overflow:hidden; }
.funnel-fill { height:100%; border-radius:var(--radius-pill);
               background:linear-gradient(90deg,var(--accent),rgba(195,76,254,.35)); }
.funnel-fill.thin { min-width:2px; background:var(--line); }
.funnel-n { text-align:end; font-weight:800; }
.funnel-drop { text-align:end; color:var(--accent-2); }

.daybars { display:flex; align-items:flex-end; gap:5px; height:110px; }
.daybar { flex:1; height:100%; display:flex; align-items:flex-end;
          background:var(--ink-2); border-radius:6px; overflow:hidden; }
.daybar-fill { width:100%; min-height:3px; border-radius:6px;
               background:linear-gradient(180deg,var(--accent),rgba(195,76,254,.25)); }

.mono { font-family:var(--font-display); font-size:13px; }

@media (max-width:640px) { .funnel-row { grid-template-columns:110px 1fr 44px 44px; } }

/* --- downloader tab ------------------------------------------------------- */
.bar{height:6px;border-radius:var(--radius-pill);background:var(--ink-2);
     border:1px solid var(--line);overflow:hidden;margin-top:10px}
.bar .fill{height:100%;width:4%;border-radius:var(--radius-pill);
           background:linear-gradient(90deg,var(--accent),rgba(195,76,254,.4));
           transition:width .4s var(--ease)}

/* --- inbox ---------------------------------------------------------------- */
table.mail tr{cursor:pointer}
table.mail tr:hover td{background:rgba(195,76,254,.05)}
pre.letter{white-space:pre-wrap;word-break:break-word;font-family:var(--font-ui);
           font-size:14px;line-height:1.9;color:var(--paper);margin:18px 0 0;
           padding-top:16px;border-top:1px solid var(--line)}

/* --- usage chart ---------------------------------------------------------- */
.chart-axis{display:flex;flex-direction:column;justify-content:space-between;
            height:132px;text-align:end;font-size:11px;color:var(--muted)}
.chart-plot{position:relative;height:132px}
.chart-lines{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between}
.chart-lines div{height:1px;background:var(--line)}
.chart-bars{position:relative;display:flex;align-items:flex-end;gap:7px;height:100%}
.chart-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.chart-bar{background:rgba(195,76,254,.42);border-radius:5px 5px 0 0;min-height:2px}
.chart-bar.tall{background:var(--accent)}
.chart-dates{display:flex;gap:7px;margin-top:9px;font-size:11px;color:var(--muted)}
.chart-dates span{flex:1;text-align:center}
.sublink{word-break:break-all;background:var(--ink-2);border:1px solid var(--line);
         border-radius:var(--radius-sm);padding:11px 13px;font-size:13px}

/* --- downloader: quality picker ------------------------------------------- */
.badge.rate{background:rgba(166,162,204,.12);color:var(--mist);border:0;
            cursor:pointer;font:inherit;font-size:12px;font-weight:700;
            font-family:var(--font-display);padding:3px 11px;border-radius:var(--radius-pill)}
.badge.rate.on{background:var(--accent-dim);color:var(--accent)}

/* --- profile rows --------------------------------------------------------- */
.prow{display:flex;align-items:center;gap:14px;padding:14px 0;
      border-bottom:1px solid var(--line);flex-wrap:wrap}

/* --- sign in: form beside the reason to sign in --------------------------- */
.signin{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:32px;
        align-items:center;min-height:70vh;max-width:1000px;margin:0 auto}
.signin-side{position:relative;padding:32px;border-radius:var(--radius-lg);overflow:hidden}
/* The sign-in form is a plain column in the design, not a card: the panel
   behind it is the page itself. */
.signin-form{width:100%;max-width:400px;justify-self:center}
.segbar{display:flex;gap:6px;background:var(--ink-2);border:1px solid var(--line);
        border-radius:var(--radius-sm);padding:5px;margin-bottom:22px}
.segbar .seg{flex:1;text-align:center;min-height:40px;line-height:40px;border-radius:8px;
             color:var(--mist);font-size:14px}
.segbar .seg:hover{text-decoration:none}
.segbar .seg.on{background:var(--accent-dim);color:var(--accent);font-weight:700}
.orbar{display:flex;align-items:center;gap:12px;margin:22px 0}
.orbar i{flex:1;height:1px;background:var(--line)}
.signin-side .glow{position:absolute;inset:0;background:
  radial-gradient(ellipse 70% 50% at 70% 20%,rgba(195,76,254,.13),transparent 60%),
  radial-gradient(ellipse 60% 45% at 30% 90%,rgba(122,51,252,.09),transparent 60%)}
.stat.iconrow{display:flex;gap:14px;align-items:flex-start}
.stat.soonrow{display:flex;gap:14px;align-items:flex-start;opacity:.72}
@media (max-width:820px){ .signin{grid-template-columns:1fr} .signin-side{display:none} }

/* --- overview ------------------------------------------------------------- */
.secthead{display:flex;align-items:baseline;justify-content:space-between;
          gap:12px;margin-bottom:12px;flex-wrap:wrap}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.newservice{border-style:dashed;display:flex;flex-direction:column;justify-content:center;
            align-items:center;text-align:center;gap:12px;min-height:210px}
.sidecard{display:flex;gap:14px;align-items:flex-start}
@media (max-width:900px){ .grid4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .grid4{grid-template-columns:1fr} }

/* --- the accent action, for the upgrade the design leads with ---------------- */
.btn.accent-2{background:linear-gradient(135deg,#A87BFF,var(--accent-2) 55%,#5B22C9);
          color:#2B1D02;box-shadow:0 8px 40px rgba(122,51,252,.28)}

/* an address is one long unbreakable word; without this it pushes the card
   wider than its column and the row falls apart on a narrow screen */
.sidecard{min-width:0}
.sidecard > div{min-width:0}
.sidecard .sub{overflow-wrap:anywhere;word-break:break-word}

/* --- the subscription QR -------------------------------------------------- */
.qrbox{margin-top:14px;text-align:center}
.qrbox img{width:190px;height:190px;background:#fff;border-radius:var(--radius-sm);padding:8px}
.qrbox .sub{margin-top:8px}

/* --- admin customers: the active filter reads as chosen ------------------- */
.btn.ghost.on{border-color:var(--accent);color:var(--accent);
              background:var(--accent-dim)}

textarea{width:100%;padding:11px 13px;border-radius:var(--radius-sm);
         background:var(--ink-2);border:1px solid var(--glass-line);color:var(--paper);
         font-family:inherit;font-size:14px;line-height:1.9;resize:vertical}
textarea:focus{outline:none;border-color:var(--accent)}

/* --- radio player --------------------------------------------------------- */
.np-art{width:104px;height:104px;border-radius:var(--radius-md);flex:none;
        border:1px solid var(--glass-line);background-size:cover;background-position:center;
        background-color:var(--ink-2);
        background-image:linear-gradient(135deg,rgba(195,76,254,.22),rgba(122,51,252,.14))}
.playbtn{width:56px;height:56px;padding:0;border-radius:99px;flex:none;
         display:grid;place-items:center}
.pick-list .pl-cover{height:74px;border-radius:var(--radius-sm);background-size:cover;
          background-position:center;
          background-image:linear-gradient(135deg,rgba(195,76,254,.2),rgba(16,18,43,.6))}
.pick-list{display:flex;flex-direction:column;gap:8px;text-align:start;cursor:pointer;
           font:inherit;color:inherit;border:1px solid var(--line)}
.pick-list.on{border-color:var(--accent)}
.meter{cursor:pointer}

/* a file input that reads as the button the design draws */
.pickfile{position:relative;overflow:hidden;display:inline-flex;cursor:pointer}
.pickfile input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}

/* The play button shows one icon, never both. This used to be toggled with
   element.hidden, which is defined on HTMLElement and NOT on SVGElement - so
   assigning it to an <svg> set a harmless expando and changed nothing on the
   page. A class on the button and plain CSS cannot fail that way. */
.playbtn .ic-pause { display:none; }
.playbtn.playing .ic-play { display:none; }
.playbtn.playing .ic-pause { display:block; }

/* The artwork falls back to the radio mark the design draws, and hides it as
   soon as a real cover is behind it. */
.np-art { display:grid; place-items:center; color:var(--accent); }
.np-art.has-cover .np-icon { display:none; }