/* Hamrah design system, after alvana.me: deep sapphire night, frosted glass panels, ice-silver primary buttons,
   a neon-green accent kept for live/success states. Vazirmatn (text), Estedad (display), Chakra Petch (latin labels),
   all bundled (public/fonts, SIL OFL). Light theme uses the same tokens. */
@font-face{font-family:Vazirmatn;src:url(/fonts/vazirmatn-arabic.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EEFF}
@font-face{font-family:Vazirmatn;src:url(/fonts/vazirmatn-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;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:Estedad;src:url(/fonts/Estedad-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Estedad;src:url(/fonts/Estedad-ExtraBold.woff2) format("woff2");font-weight:800 900;font-display:swap}
@font-face{font-family:Chakra;src:url(/fonts/chakra-petch-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Chakra;src:url(/fonts/chakra-petch-600.woff2) format("woff2");font-weight:600 700;font-display:swap}
:root{
  --bg:#eef2f7;--bg-glow:radial-gradient(1200px 600px at 85% -10%,#cfe3f7 0,transparent 60%),radial-gradient(900px 500px at 0% 0%,#e3ecf6 0,transparent 60%);
  --panel:#ffffff;--panel-2:#f1f4f8;--glass:#ffffffcc;--line:#dde3eb;--line-hi:#ffffff;--text:#0b1622;--muted:#5d6b7c;--heading:linear-gradient(180deg,#0b1622,#2a3f57);
  --accent:#1d5f9e;--accent-2:#3a86c8;--accent-soft:#1d5f9e14;--on-accent:#ffffff;--neon:#0b9e6a;--glow:0 0 0 transparent;
  --btn-bg:linear-gradient(180deg,#1c2d42,#0b1622);--btn-fg:#f2f7fc;--btn-ring:0 1px 0 #ffffff24 inset,0 8px 22px #0b162233;
  --good:#0a7a4c;--good-soft:#e5f6ee;--warn:#975600;--warn-soft:#fff4e2;--bad:#c42b32;--bad-soft:#fdecec;--red:#e0393f;
  --radius:20px;--radius-sm:12px;--ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);--t-fast:.15s;--t:.24s;--t-slow:.32s;
  --shadow:0 1px 2px #0b16220a,0 10px 30px #0b16220f;--hi:0 1px 0 #ffffffb3 inset;
  --font:Vazirmatn,"Segoe UI",Tahoma,system-ui,sans-serif;--display:Estedad,Vazirmatn,Tahoma,sans-serif;--latin:Chakra,Vazirmatn,sans-serif;
  --c1:#0fa572;--c2:#0e8fc7;--c3:#3b6fd8;--c4:#7c5ce0;--c5:#c98a06;--c6:#d64593;--c7:#e04a5a;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#05080d;--bg-glow:radial-gradient(1100px 620px at 85% -12%,#0a2e4480 0,transparent 62%),radial-gradient(800px 500px at 5% 0%,#0d1a2b99 0,transparent 60%);
  --panel:#0b111a;--panel-2:#111a26;--glass:#0b111acc;--line:#ffffff12;--line-hi:#ffffff1f;--text:#e9eef5;--muted:#8b97a7;--heading:linear-gradient(180deg,#ffffff,#b9c7d8);
  --accent:#a7d5ff;--accent-2:#6fb2f0;--accent-soft:#a7d5ff17;--on-accent:#07111c;--neon:#3ef2a0;--glow:0 0 26px #a7d5ff2e;
  --btn-bg:linear-gradient(180deg,#f5f9fd,#c3d6ea);--btn-fg:#08121d;--btn-ring:0 1px 0 #ffffff inset,0 0 0 1px #ffffff40,0 10px 30px #a7d5ff2e;
  --good:#3ef2a0;--good-soft:#3ef2a01a;--warn:#fbbf24;--warn-soft:#fbbf241a;--bad:#ff5a62;--bad-soft:#ff5a621a;
  --shadow:0 18px 40px #00000059;--hi:0 1px 0 #ffffff0f inset;
  --c1:#3ef2a0;--c2:#38bdf8;--c3:#7aa7ff;--c4:#a78bfa;--c5:#fbbf24;--c6:#f472b6;--c7:#fb7185;
  color-scheme:dark;}}
:root[data-theme=dark]{
  --bg:#05080d;--bg-glow:radial-gradient(1100px 620px at 85% -12%,#0a2e4480 0,transparent 62%),radial-gradient(800px 500px at 5% 0%,#0d1a2b99 0,transparent 60%);
  --panel:#0b111a;--panel-2:#111a26;--glass:#0b111acc;--line:#ffffff12;--line-hi:#ffffff1f;--text:#e9eef5;--muted:#8b97a7;--heading:linear-gradient(180deg,#ffffff,#b9c7d8);
  --accent:#a7d5ff;--accent-2:#6fb2f0;--accent-soft:#a7d5ff17;--on-accent:#07111c;--neon:#3ef2a0;--glow:0 0 26px #a7d5ff2e;
  --btn-bg:linear-gradient(180deg,#f5f9fd,#c3d6ea);--btn-fg:#08121d;--btn-ring:0 1px 0 #ffffff inset,0 0 0 1px #ffffff40,0 10px 30px #a7d5ff2e;
  --good:#3ef2a0;--good-soft:#3ef2a01a;--warn:#fbbf24;--warn-soft:#fbbf241a;--bad:#ff5a62;--bad-soft:#ff5a621a;
  --shadow:0 18px 40px #00000059;--hi:0 1px 0 #ffffff0f inset;
  --c1:#3ef2a0;--c2:#38bdf8;--c3:#7aa7ff;--c4:#a78bfa;--c5:#fbbf24;--c6:#f472b6;--c7:#fb7185;
  color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.75;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
body{background:var(--bg-glow),var(--bg);background-attachment:fixed;min-height:100vh}
::selection{background:color-mix(in srgb,var(--accent) 35%,transparent)}
a{color:var(--accent);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.45;font-family:var(--display);font-weight:800;letter-spacing:-.2px}h1{font-size:24px}h2{font-size:18px}h3{font-size:15.5px;font-weight:700}
.muted{color:var(--muted)}.small{font-size:12.5px}.ltr{direction:ltr;text-align:left;unicode-bidi:plaintext}
.en{font-family:var(--latin)}
.hidden{display:none!important}
.ico{width:20px;height:20px;flex-shrink:0;display:inline-block;vertical-align:middle}
/* inline icons sit with the text they label: buttons, chips, tabs, badges, labels, headings, notes */
:where(.btn,.chip,.badge,.tag,.tabs button,.hubtabs a,label,summary,h1,h2,h3,b,p,li,td,th,.guide,.hint,.small,.muted,.item,.toast,.subbar,.update-bar,.empty-act,.mfile)>.ico{width:1.15em;height:1.15em;vertical-align:-.22em}
:where(.badge,.chip,.small,.hint)>.ico{width:1.1em;height:1.1em}
/* write an icon and its text with a normal space between them: flex rows use their gap, inline text uses the space */
.ico.fill{fill:currentColor}.ico.good{color:var(--good)}.ico.bad{color:var(--bad)}.ico.warn{color:var(--warn)}.ico.accent{color:var(--accent)}
.ico.spin{animation:spin 1s linear infinite}
.ico.th-sun{display:none}
:root[data-theme=dark] .ico.th-sun{display:inline-block}:root[data-theme=dark] .ico.th-moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .ico.th-sun{display:inline-block}:root:not([data-theme=light]) .ico.th-moon{display:none}}
/* silver heading text, as on alvana.me */
.shine{background:var(--heading);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* latin eyebrow with a leading rule: "—— SELL · POST · REPLY" */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--latin);font-weight:500;letter-spacing:3.5px;font-size:11.5px;color:var(--muted);text-transform:uppercase;direction:ltr}
.eyebrow:before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
/* small tag pill with alvana's slanted red marker */
.tag{display:inline-flex;align-items:center;gap:8px;padding:5px 13px;border:1px solid var(--line-hi);border-radius:999px;background:color-mix(in srgb,var(--panel) 70%,transparent);font-size:12.5px;font-weight:600;box-shadow:var(--hi)}
.tag:before{content:"";width:7px;height:11px;background:var(--red);transform:skewX(-18deg);border-radius:1.5px;box-shadow:0 0 10px var(--red)}
/* section monogram: icon on a frosted square tinted with the section's own color */
.mono{--m:var(--accent);width:34px;height:34px;border-radius:11px;display:inline-grid;place-items:center;flex-shrink:0;color:var(--m);background:linear-gradient(180deg,color-mix(in srgb,var(--m) 18%,transparent),color-mix(in srgb,var(--m) 7%,transparent));border:1px solid color-mix(in srgb,var(--m) 26%,transparent);box-shadow:var(--hi)}
.mono .ico{width:18px;height:18px}
.mono.lg{width:46px;height:46px;border-radius:15px}.mono.lg .ico{width:23px;height:23px}
/* motion: one easing (var(--ease)), short durations (--t-fast .15s, --t .24s, --t-slow .32s), transform + opacity only */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes enter-sm{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes fade-out{to{opacity:0}}
@keyframes sink{to{opacity:0;transform:translateY(8px) scale(.985)}}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheet-down{to{transform:translateY(100%)}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px) scale(.96)}}
@keyframes pill{from{background:transparent;box-shadow:none}}
@keyframes shimmer{to{transform:translateX(-100%)}}
@keyframes recpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 55%,transparent)}100%{box-shadow:0 0 0 7px transparent}}
/* page content enters once per route render; core marks .main.settled afterwards so later updates stay still */
.main:not(.settled)>*{animation:enter var(--t-slow) var(--ease) both}
.main:not(.settled)>*:nth-child(2){animation-delay:30ms}.main:not(.settled)>*:nth-child(3){animation-delay:60ms}.main:not(.settled)>*:nth-child(4){animation-delay:90ms}.main:not(.settled)>*:nth-child(n+5){animation-delay:120ms}
.main:not(.settled) :is(.list>.item,.grid>.card,.pgrid>*):nth-child(-n+10){animation:enter-sm var(--t) var(--ease) both}
.main:not(.settled) :is(.list>.item,.grid>.card,.pgrid>*):nth-child(2){animation-delay:40ms}.main:not(.settled) :is(.list>.item,.grid>.card,.pgrid>*):nth-child(3){animation-delay:70ms}
.main:not(.settled) :is(.list>.item,.grid>.card,.pgrid>*):nth-child(4){animation-delay:100ms}.main:not(.settled) :is(.list>.item,.grid>.card,.pgrid>*):nth-child(5){animation-delay:130ms}
.main:not(.settled) :is(.list>.item,.grid>.card,.pgrid>*):nth-child(n+6){animation-delay:160ms}
/* one newly added row (a sent message, a new rule): add .enter-item when inserting it */
.enter-item{animation:enter var(--t) var(--ease) both}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* layout: a floating frosted sidebar on desktop, an icon rail on tablets and small laptops, top bar + bottom bar on phones */
.app{display:flex;min-height:100vh}
.app>.body{flex:1;min-width:0}
.side{width:264px;flex-shrink:0;position:sticky;top:12px;height:calc(100vh - 24px);margin:12px 12px 12px 0;padding:16px 12px 12px;display:flex;flex-direction:column;
  background:var(--glass);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--line);border-radius:24px;box-shadow:var(--hi),var(--shadow)}
.side .nav{flex:1;overflow:auto;margin:0 -6px;padding:0 6px;scrollbar-width:thin}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 16px;font-weight:800;font-size:20px;font-family:var(--display)}
/* the brand tile: the app icon in small, on its own dark ground in both themes (the mark is public/logo-mark.svg) */
.logo{width:36px;height:36px;border-radius:12px;background:radial-gradient(120% 120% at 50% 18%,#133d5e 0,#091726 58%,#05080d 100%);display:grid;place-items:center;color:#e9f4ff;box-shadow:0 1px 0 #ffffff2e inset,0 0 0 1px #ffffff14 inset,0 6px 16px #05080d33;flex-shrink:0}
.logo svg{width:22px;height:22px}
.logo .logo-mark{width:27px;height:27px;display:block}
.projchip{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:9px 12px;border:1px solid var(--line);border-radius:14px;color:inherit;text-decoration:none;background:color-mix(in srgb,var(--panel-2) 70%,transparent);transition:border-color .2s}
.projchip:hover{border-color:var(--line-hi)}
.projchip b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.projects{max-width:1080px;margin:0 auto;padding:28px 18px 40px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:14px}
.pgrid .card{margin:0}
.pnew{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:84px;border:1.5px dashed var(--line-hi);border-radius:var(--radius);background:transparent;cursor:pointer;color:var(--text);transition:border-color .2s,background .2s}
.pnew:hover{border-color:var(--accent);background:var(--accent-soft)}.pnew .ico{color:var(--accent)}
.pcard{display:flex;align-items:center;gap:12px;padding:14px;cursor:pointer;transition:transform .2s var(--ease),border-color .2s}
.pcard:hover{border-color:var(--line-hi);transform:translateY(-2px)}
.pcard:active{transform:scale(.99)}
.pcard .plogo{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px;flex:none;overflow:hidden;box-shadow:var(--hi)}
.pcard .plogo img{width:100%;height:100%;object-fit:cover}
.nav a{display:flex;align-items:center;gap:11px;padding:6px 8px;border-radius:13px;color:var(--muted);font-weight:600;margin:1px 0;transition:background .2s var(--ease),color .2s;position:relative}
.nav-sec{font-size:11px;font-weight:700;color:var(--muted);opacity:.65;padding:12px 10px 3px;letter-spacing:.3px}
.nav a:hover{background:color-mix(in srgb,var(--panel-2) 80%,transparent);color:var(--text)}
.nav a.on{background:var(--panel-2);color:var(--text);box-shadow:var(--hi),0 0 0 1px var(--line)}
.nav a.on:after{content:"";position:absolute;right:-12px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.nav a .mono{width:30px;height:30px;border-radius:10px}.nav a:not(.on) .mono{background:transparent;border-color:transparent;box-shadow:none;color:var(--muted)}
.nav .badge{margin-right:auto}
/* menu groups that open like drawers */
.side-acts{display:flex;gap:6px;margin:0 0 10px}
.side-acts .btn{flex:1;padding:9px 12px;border-radius:14px}
.side-acts .btn:last-child:not(:first-child){flex:0 0 auto}
.side-acts .btn.on{border-color:var(--accent);color:var(--accent)}
.nav-group{margin:1px 0}
.nav-head{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:11px;width:100%;padding:6px 8px;border-radius:13px;color:var(--muted);font-weight:600;cursor:pointer;transition:background .2s var(--ease),color .2s;-webkit-touch-callout:none;user-select:none}
.nav-head:hover{background:color-mix(in srgb,var(--panel-2) 80%,transparent);color:var(--text)}
.nav-head .mono{width:30px;height:30px;border-radius:10px}
.nav-group:not(.cur) .nav-head .mono{background:transparent;border-color:transparent;box-shadow:none;color:var(--muted)}
.nav-group.cur>.nav-head{color:var(--text)}
.nav-head .chev{margin-right:auto;display:inline-flex;transition:transform .25s var(--ease);opacity:.6}
.nav-head .badge+.chev{margin-right:6px}
.nav-head .chev .ico{width:16px;height:16px}
.nav-group.open .nav-head .chev{transform:rotate(-90deg)}
.nav-sub{display:none;padding-right:22px;animation:rise .3s var(--ease)}
.nav-group.open .nav-sub{display:block}
.nav-sub a{padding:5px 12px;font-size:14px;margin:1px 0;border-right:1px solid var(--line);border-radius:0 10px 10px 0}
.nav-sub a.on{background:var(--panel-2);color:var(--text);box-shadow:none;border-right-color:var(--accent)}
.nav-sub a.on:after{display:none}
/* the pages of one group as tabs above the page */
.hubtabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:16px 28px 0;padding:4px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--panel) 70%,transparent);max-width:1304px}
.hubtabs::-webkit-scrollbar{display:none}
.hubtabs a{flex:0 0 auto;padding:7px 14px;border-radius:12px;color:var(--muted);font-weight:600;font-size:14px;white-space:nowrap;transition:background .2s,color .2s}
.hubtabs a:hover{color:var(--text)}
.hubtabs a.on{background:var(--panel-2);color:var(--text);box-shadow:var(--hi),0 0 0 1px var(--line);animation:pill var(--t) var(--ease)}
.hubtabs .count{position:static;display:inline-block;margin-right:4px}
@media (min-width:1401px){.hubtabs{margin-left:auto;margin-right:auto;width:calc(100% - 56px)}}
@media (max-width:860px){.hubtabs{margin:10px 10px 0;border-radius:14px}.hubtabs a{padding:6px 12px;font-size:13.5px}}
.side-foot{margin-top:10px;padding:10px 6px 2px;border-top:1px solid var(--line);font-size:12.5px}
.side-foot .who{display:flex;align-items:center;gap:10px}
.side-help{display:flex;gap:6px;margin-bottom:10px}.side-help .btn{flex:1;padding:6px 10px}.side-help .btn.on{border-color:var(--accent);color:var(--accent)}
.support-list .item{padding:10px 4px;border-radius:12px;transition:background var(--t-fast)}.support-list .item:hover{background:var(--panel-2)}
.offline-card{min-height:100vh;display:grid;place-items:center;padding:16px}.offline-card .card{max-width:420px;width:100%}
.side-foot .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--panel-2);border:1px solid var(--line);flex-shrink:0}
.main{padding:22px 28px 100px;max-width:1360px;margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.top h1{background:var(--heading);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.top .actions{display:flex;gap:8px;flex-wrap:wrap}
.mtop{display:none}
.bnav{display:none}
.stickybar{position:sticky;bottom:16px;z-index:5;background:var(--glass)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
/* icon rail between phone and wide desktop */
@media (min-width:861px) and (max-width:1180px){
  .side{width:78px;padding:14px 10px 10px;align-items:center}
  .side .lbl,.side .nav-sec,.side .projchip b,.side .projchip .swap,.side-foot .who>div,.side-foot .ver{display:none}
  .side .brand{padding:2px 0 14px}
  .side .projchip{padding:9px;justify-content:center;width:46px;height:40px}
  .side .nav{margin:0;padding:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:2px}
  .side .nav-gap{height:1px;width:28px;background:var(--line);margin:8px 0}
  .side .nav a,.side .nav-head{padding:7px;justify-content:center;width:auto}
  .side .nav-sub,.side .nav-group.open .nav-sub{display:none}
  .side .side-acts{flex-direction:column;align-items:center;width:100%}
  .side .side-acts .btn{padding:9px;flex:0 0 auto;width:46px}
  .side .nav a .badge{position:absolute;top:0;left:0;margin:0}
  .side .nav a.on:after{right:-10px}
  .side-foot{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0 0}
  .side-foot .row{flex-direction:column;gap:6px;margin:0!important}
  .side-foot .btn{padding:7px;font-size:0;gap:0}.side-foot .btn .ico{width:18px;height:18px}
  .side-help{flex-direction:column;margin-bottom:6px}.side-help .btn{flex:none}
  .side-foot .who{display:none}
  .main{padding:20px 22px 100px}
}
.nav-gap{display:none}
@media (min-width:861px) and (max-width:1180px){.nav-gap{display:block}}
@media (max-width:860px){
  .side{display:none}
  .main{padding:12px 14px 112px}
  .mhead{position:sticky;top:8px;z-index:20}
  .mtop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 10px 0;padding:7px 8px 7px 12px;border-radius:18px;
    background:var(--glass);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border:1px solid var(--line);box-shadow:var(--hi),var(--shadow)}
  .mtop .brand{font-size:16.5px;min-width:0}
  .mtop .logo{width:32px;height:32px;border-radius:10px}.mtop .logo .logo-mark{width:24px;height:24px}
  .bnav{display:flex;position:fixed;bottom:calc(10px + env(safe-area-inset-bottom));left:10px;right:10px;z-index:30;padding:6px 4px;justify-content:space-around;border-radius:22px;
    background:var(--glass);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--line);box-shadow:var(--hi),0 12px 34px #00000040}
  .bnav a{display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--muted);font-size:11px;font-weight:600;padding:4px 8px;border-radius:14px;position:relative;min-width:58px;transition:color .2s}
  .bnav a.on{color:var(--text)}
  .bnav a.on .ico{color:var(--accent);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 60%,transparent))}
  .bnav .fab{background:var(--btn-bg);color:var(--btn-fg)!important;border-radius:18px;margin-top:-20px;padding:9px 12px;box-shadow:var(--btn-ring)}
  .bnav a .ico{width:22px;height:22px}
  .top{margin-bottom:14px}
  .top h1{font-size:20px}
  .stickybar{bottom:calc(98px + env(safe-area-inset-bottom))} /* clear of the bottom bar and its raised button */
}
.drawer{position:fixed;inset:0;z-index:60;background:#02050980;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;justify-content:flex-start;animation:fade .2s}
.drawer .side{display:flex;width:288px;max-width:86vw;height:calc(100% - 20px);margin:10px;top:0;background:var(--panel);animation:slidein .3s var(--ease)}
@media (max-width:1180px){.drawer .side .lbl,.drawer .side .nav-sec,.drawer .side .projchip b,.drawer .side .projchip .swap,.drawer .side-foot .who>div,.drawer .side-foot .ver{display:revert}
  .drawer .side{align-items:stretch;padding:16px 12px 12px}.drawer .side .projchip{width:auto;height:auto;padding:9px 12px;justify-content:flex-start}.drawer .side .nav{display:block;margin:0 -6px;padding:0 6px}.drawer .side .nav a,.drawer .side .nav-head{padding:6px 8px;justify-content:flex-start;width:100%}.drawer .side .nav-sub a{padding:5px 12px}.drawer .side .nav-group.open .nav-sub{display:block}.drawer .side .side-acts{flex-direction:row}.drawer .side .side-acts .btn{width:auto;flex:1}.drawer .nav-gap{display:none}
  .drawer .side-foot{display:block;padding:10px 6px 2px}.drawer .side-foot .row{flex-direction:row;gap:10px}.drawer .side-help{flex-direction:row}.drawer .side-help .btn{flex:1}.drawer .side-foot .btn{padding:5px 12px;font-size:13px;gap:7px}.drawer .side .nav a .badge{position:static;margin-right:auto}}
@keyframes slidein{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes slideout{to{transform:translateX(48px);opacity:0}}
.drawer.closing{animation:fade-out .22s ease forwards}.drawer.closing .side{animation:slideout .22s var(--ease) forwards}

/* subscription banner */
.subbar{display:flex;align-items:center;gap:8px;margin:12px 28px 0;padding:9px 16px;border-radius:14px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));color:var(--text);font-size:13.5px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.subbar.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 35%,var(--line))}.subbar.warn b{color:var(--warn)}.subbar a{color:inherit}.subbar .iconbtn{padding:4px;margin:-4px -6px -4px 0}
.subbar span{flex:1}.subbar b{color:var(--accent);white-space:nowrap;display:inline-flex;align-items:center;gap:2px}.subbar>.ico{width:18px;height:18px}.subbar.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 30%,var(--line))}.subbar.bad b{color:var(--bad)}
@media (max-width:860px){.subbar{margin:6px 10px 0;padding:8px 12px;box-shadow:var(--shadow)}.subbar.bad{background:color-mix(in srgb,var(--bad) 14%,var(--panel))}.subbar.warn{background:color-mix(in srgb,var(--warn) 14%,var(--panel))}}
/* read-only workspace: write actions look locked (a tap opens the renewal sheet) */
body.readonly :is(.main:not([data-view-page=billing]),.modal-foot,.side-acts,.bnav) :is(.btn.primary,.btn.danger,.fab,.switch):not([data-ro-ok]):not(a[href]:not([href="#"]):not([href^="#/compose"])){opacity:.5;filter:saturate(.2)}
.nav a[data-settings-nav]{-webkit-touch-callout:none;user-select:none}

/* components */
.card{background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 92%,var(--line-hi)),var(--panel) 40%);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--hi),var(--shadow)}
.card+.card{margin-top:14px}
.grid>.card,.composer>.card,.row>.card{margin-top:0}
.card h2,.card h3{margin-bottom:10px}
.grid{display:grid;gap:14px}
.grid>*,.composer>*{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3{grid-template-columns:1fr}}
.stat{display:flex;flex-direction:column;gap:2px;transition:transform .3s var(--ease),border-color .3s}
a.stat:hover{transform:translateY(-3px);border-color:var(--line-hi)}
.stat .mono{margin-bottom:6px;color:var(--m)}
.stat b{font-size:28px;font-weight:800;font-family:var(--display);line-height:1.3;background:var(--heading);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat span{color:var(--muted);font-size:13px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.between{justify-content:space-between}
.stack>*+*{margin-top:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel-2) 85%,transparent);padding:9px 18px;border-radius:999px;font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:var(--hi);transition:transform .2s var(--ease),background .2s,box-shadow .2s,border-color .2s,filter .2s}
.btn:active{transform:scale(.97);transition-duration:.08s}
:is(.btn,.iconbtn,.chip,.tabs button,.hubtabs a,.nav a,.nav-head,.bnav a,.pnew):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:is(.conv,.item,.mthumb,.pcard,.card,.help-card>summary)[role=button]:focus-visible,[data-post]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* icon-only button, same height as a text button: <button class="btn sm sq" aria-label="حذف">${icon('trash')}</button> */
.btn.sq{padding:0;gap:0;flex:none;width:calc(1.75em + 20px);height:calc(1.75em + 20px)}.btn.sm.sq{width:calc(1.75em + 12px);height:calc(1.75em + 12px)}
.btn:hover{background:var(--panel-2);border-color:var(--line-hi)}
.btn.primary{background:var(--btn-bg);color:var(--btn-fg);border-color:transparent;box-shadow:var(--btn-ring)}
.btn.primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.btn.ghost{border-color:transparent;background:transparent}
.btn.sm{padding:5px 12px;font-size:13px}
.btn[disabled]{opacity:.55;pointer-events:none}
.iconbtn{border:0;background:transparent;font-size:19px;line-height:1;cursor:pointer;padding:6px;border-radius:10px;display:inline-grid;place-items:center;color:inherit;min-width:40px;min-height:40px;transition:background var(--t-fast),transform var(--t-fast) var(--ease)}
.iconbtn:hover{background:var(--panel-2)}.iconbtn:active{transform:scale(.9)}
.iconbtn .ico{width:20px;height:20px}
/* an input with a leading icon (search fields): <div class="input-ico">${icon('search')}<input class="input"></div> */
.input-ico{position:relative}.input-ico>.ico{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.input-ico>.input{padding-right:38px}
label{display:block;font-weight:600;font-size:13.5px;margin-bottom:5px}
.field{margin-bottom:14px}
.input,select,textarea{width:100%;border:1px solid var(--line);background:var(--panel-2);border-radius:12px;padding:10px 12px;outline:none;transition:border .15s,box-shadow .15s}
input[type=color]{border:1px solid var(--line);background:var(--panel-2);border-radius:12px;padding:4px;cursor:pointer;-webkit-appearance:none;appearance:none}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:0;border-radius:8px}
input[type=color]::-moz-color-swatch{border:0;border-radius:8px}
.input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea{min-height:110px;resize:vertical;line-height:1.8}
.hint{font-size:12.5px;color:var(--muted);margin-top:4px}
.field-err{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--bad);margin-top:5px;font-weight:600;animation:enter-sm var(--t) var(--ease)}.field-err .ico{width:15px;height:15px}
.input.invalid,textarea.invalid,select.invalid{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
.form-err{display:flex;align-items:flex-start;gap:8px;margin:4px 0 2px;padding:10px 12px;border-radius:12px;background:var(--bad-soft);color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 30%,var(--line));font-size:13.5px;font-weight:600;animation:enter-sm var(--t) var(--ease)}.form-err .ico{flex:none;margin-top:3px}
.num-hint{font-size:12.5px;color:var(--accent);margin-top:4px;min-height:1px;font-weight:600}.num-hint:empty{display:none}
.check{display:flex;align-items:center;gap:8px;font-weight:500;cursor:pointer;margin:0}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.switch{position:relative;width:42px;height:24px;flex-shrink:0}.switch:after{content:"";position:absolute;inset:-9px -4px}
.switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:var(--line);border-radius:99px;cursor:pointer;transition:.2s}
.switch span:before{content:"";position:absolute;width:18px;height:18px;right:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span:before{transform:translateX(-18px)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:99px;padding:5px 12px;font-size:13px;font-weight:600;cursor:pointer;user-select:none;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease)}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}
.badge{display:inline-flex;align-items:center;gap:4px;padding:1px 9px;border-radius:99px;font-size:12px;font-weight:700;background:var(--panel-2);color:var(--muted);white-space:nowrap}
.badge.good{background:var(--good-soft);color:var(--good)}.badge.warn{background:var(--warn-soft);color:var(--warn)}.badge.bad{background:var(--bad-soft);color:var(--bad)}.badge.accent{background:var(--accent-soft);color:var(--accent)}
.count{background:#d0303a;color:#fff;border-radius:99px;font-size:11px;padding:0 6px;font-weight:700;min-width:18px;text-align:center}
.bnav .count{position:absolute;top:0;left:8px}
.tabs{display:flex;gap:4px;background:var(--panel-2);border:1px solid var(--line);padding:4px;border-radius:999px;overflow-x:auto;scrollbar-width:none;margin-bottom:14px}
.tabs button{border:0;background:transparent;padding:7px 15px;border-radius:999px;transition:background .2s var(--ease),color .2s;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs button.on{background:var(--panel);color:var(--text);box-shadow:var(--hi),0 0 0 1px var(--line),0 4px 14px #0000001f;animation:pill var(--t) var(--ease)}
.tabs button{display:inline-flex;align-items:center;gap:6px}.tabs button:active,.hubtabs a:active{transform:scale(.96)}
.tabs::-webkit-scrollbar{display:none}
.tabs.more-l,.hubtabs.more-l{-webkit-mask-image:linear-gradient(to right,transparent,#000 44px);mask-image:linear-gradient(to right,transparent,#000 44px)}
.tabs.more-r,.hubtabs.more-r{-webkit-mask-image:linear-gradient(to left,transparent,#000 44px);mask-image:linear-gradient(to left,transparent,#000 44px)}
.tabs.more-l.more-r,.hubtabs.more-l.more-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,transparent,#000 44px,#000 calc(100% - 44px),transparent)}
@media (max-width:480px){.tabs button{padding:7px 11px;font-size:13.5px}}
.main>.tabs{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0;gap:2px}
.main>.tabs button{border-radius:0;padding:9px 14px;position:relative;box-shadow:none}
.main>.tabs button.on{background:transparent;box-shadow:none;color:var(--text);animation:none}
.main>.tabs button.on:after{content:"";position:absolute;right:10px;left:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:enter-sm var(--t) var(--ease)}
.list{display:flex;flex-direction:column}
.item{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item .grow{flex:1;min-width:0}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty{text-align:center;padding:34px 12px;color:var(--muted)}
.empty .big{width:58px;height:58px;margin:0 auto 12px;border-radius:18px;display:grid;place-items:center;color:var(--accent);font-size:28px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent) 5%,transparent));border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));box-shadow:var(--hi),var(--glow)}
.empty .big .ico{width:26px;height:26px}
.empty-act{margin-top:14px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.netic{width:34px;height:34px;border-radius:10px;display:inline-grid;place-items:center;vertical-align:middle;color:#fff;font-weight:800;font-size:14px;flex-shrink:0}
.netic .ico{width:56%;height:56%}
.guide{background:linear-gradient(135deg,var(--accent-soft),color-mix(in srgb,var(--accent-soft) 40%,var(--panel)));border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));border-radius:var(--radius);padding:14px 16px;margin-bottom:14px;font-size:14px}
.guide b{color:var(--accent)}
.guide ol{margin:6px 0 0;padding-right:20px}
ol{list-style-type:persian}
.guide-x{display:inline-block;padding:8px 4px;margin:-8px 0}
/* small header links («همه», «مدیریت») get a finger-sized hit area */
.card>.row.between>a.small{padding:8px 6px;margin:-8px -6px}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:right;color:var(--muted);font-weight:600;font-size:12.5px;padding:8px;border-bottom:1px solid var(--line)}
.table td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.scroll-x{overflow-x:auto}

/* modal & toast */
.modal-bg{position:fixed;inset:0;z-index:80;background:#020509a6;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .15s}
.modal-bg.closing{animation:fade-out .2s ease forwards}.modal-bg.closing .modal{animation:sink .2s var(--ease) forwards}
.modal-head h2{display:flex;align-items:center;gap:8px;min-width:0}.modal-head h2>.ico{margin:0;color:var(--accent)}
.modal{background:var(--panel);border:1px solid var(--line-hi);border-radius:24px;animation:rise var(--t-slow) var(--ease);width:100%;max-width:560px;max-height:92vh;overflow:auto;box-shadow:var(--hi),0 30px 80px #00000066;padding:20px}
.modal.wide{max-width:860px}
.modal:focus,.drawer .side:focus{outline:none}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.modal-foot{display:flex;gap:8px;justify-content:flex-start;margin:18px -20px -20px;flex-wrap:wrap;position:sticky;bottom:-20px;z-index:3;background:var(--panel);padding:12px 20px 20px;border-top:1px solid var(--line)}
@media (max-width:620px){.modal-bg{align-items:flex-end;padding:0}.modal{animation:sheet-up var(--t-slow) var(--ease)}.modal-bg.closing .modal{animation:sheet-down .2s var(--ease-io) forwards}.modal{border-radius:22px 22px 0 0;max-height:94vh;padding-bottom:calc(20px + env(safe-area-inset-bottom))}.modal-foot{bottom:calc(-20px - env(safe-area-inset-bottom));margin-bottom:calc(-20px - env(safe-area-inset-bottom));padding-bottom:calc(20px + env(safe-area-inset-bottom))}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.toasts{position:fixed;z-index:99;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
@media (max-width:860px){.toasts{bottom:calc(104px + env(safe-area-inset-bottom))}}
.toast{display:flex;align-items:center;gap:9px;background:#0d1520f2;color:#eef3f9;border:1px solid #ffffff1f;padding:10px 18px;border-radius:14px;font-weight:600;box-shadow:0 12px 34px #00000059;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:rise var(--t-slow) var(--ease);max-width:90vw}
.toast>.ico{width:19px;height:19px;flex:none}.toast.out{animation:toast-out .24s var(--ease) forwards}
.toast{pointer-events:auto;cursor:pointer;line-height:1.7}.toast.bad{border-inline-start:3px solid #ff6b72}.toast.good{border-inline-start:3px solid #3ef2a0}
.update-bar{position:fixed;z-index:98;top:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:var(--panel);color:var(--text);border:1px solid var(--accent);padding:8px 14px;border-radius:14px;box-shadow:var(--shadow);font-weight:600;width:min(420px,calc(100vw - 32px));justify-content:space-between;box-sizing:border-box;animation:fade .2s}
/* toasts stay dark glass in both themes; the kind shows in the icon and a tinted hairline */
.toast.good{border-color:#3ef2a059}.toast.good>.ico{color:#3ef2a0;filter:drop-shadow(0 0 6px #3ef2a066)}
.toast.bad{border-color:#ff5a6273}.toast.bad>.ico{color:#ff6b72}
.spinner{width:18px;height:18px;border:2.5px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:flex;justify-content:center;padding:40px;color:var(--muted)}
/* skeleton placeholders (App.skeleton()): a soft shimmer that runs right to left */
.skel{display:block;position:relative;overflow:hidden;border-radius:8px;background:color-mix(in srgb,var(--text) 7%,transparent)}
.skel+.skel{margin-top:8px}
.skel:after{content:"";position:absolute;inset:0;transform:translateX(100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 9%,transparent),transparent);animation:shimmer 1.4s var(--ease-io) infinite}
.skel-wrap{animation:fade var(--t) ease .12s both}
.main:not(.settled)>.skel-wrap{animation:fade var(--t) ease .12s both}
.skel-top{display:flex;align-items:center;gap:12px;margin-bottom:20px}.skel-top .grow{flex:1;min-width:0}
.skel-mono{width:34px;height:34px;border-radius:11px;flex:none;margin-bottom:10px}.skel-mono.lg{width:46px;height:46px;border-radius:15px;margin:0}
.skel-av{width:40px;height:40px;border-radius:50%;flex:none}
.skel-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line)}.skel-row:last-child{border-bottom:0}.skel-row .grow{flex:1;min-width:0}
.skel-card{min-height:118px}
.mthumb.skel{cursor:default;border-color:transparent}
.rec-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--bad);animation:recpulse 1.2s ease-out infinite;flex:none}

/* auth */
.center{text-align:center}
.auth2{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.auth-side{position:relative;overflow:hidden;margin:12px 0 12px 12px;border-radius:28px;padding:30px 34px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  background:radial-gradient(700px 420px at 30% 20%,#0a2e4499,transparent 70%),linear-gradient(180deg,#070c14,#04070b);color:#e9eef5;border:1px solid #ffffff14;box-shadow:0 1px 0 #ffffff12 inset}
.auth-side .globe{position:absolute;left:-9%;top:52%;width:min(470px,54%);aspect-ratio:1;transform:translateY(-50%);opacity:.9;pointer-events:none}
.auth-side>*{position:relative}
.auth-side .brand{color:#e9eef5}
.auth-copy{max-width:440px}
.auth-copy .eyebrow{color:#8b97a7}
.auth-copy h1{font-size:clamp(28px,3.4vw,44px);line-height:1.4;margin:14px 0 20px;background:linear-gradient(180deg,#fff,#b9c7d8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.auth-copy em{font-style:normal;background:linear-gradient(90deg,#d9ecff,#7fb8ec);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.auth-copy ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;max-width:360px}
.auth-copy li{display:flex;align-items:center;gap:10px;font-weight:600;padding:8px 10px;border-radius:14px;background:#ffffff08;border:1px solid #ffffff12;backdrop-filter:blur(8px)}
.auth-copy .mono{--m:#a7d5ff}
.auth-side .muted{color:#8b97a7}
.auth-form{display:grid;place-items:center;padding:24px 16px}
.auth-form .card{width:100%;max-width:430px;padding:28px;animation:rise .5s var(--ease)}
@media (max-width:860px){.auth2{grid-template-columns:1fr;align-content:start}.auth-side{margin:10px 10px 0;padding:20px 18px;gap:12px;border-radius:22px;min-height:200px}.auth-side .globe{width:230px;left:-40px}
  .auth-copy ul,.auth-side>.muted{display:none}.auth-copy h1{font-size:25px;margin:8px 0 2px}.auth-form{padding:16px 10px 24px}.auth-form .card{padding:22px 18px}}

/* composer */
.composer{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
@media (max-width:980px){.composer{grid-template-columns:1fr}}
.preview{position:sticky;top:16px}
.phone{background:#e6ebee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='1' fill='%23c9d3d8'/%3E%3C/svg%3E");border-radius:22px;padding:14px;min-height:260px}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .phone{background-color:#0f1a22}}
.bubble{background:#fff;color:#111;border-radius:14px 14px 4px 14px;padding:8px 10px;max-width:92%;box-shadow:0 1px 1px rgba(0,0,0,.1);white-space:pre-wrap;word-wrap:break-word;font-size:14px}
.bubble img,.bubble video{width:100%;border-radius:10px;margin-bottom:6px;display:block;max-height:280px;object-fit:cover}
.bubble .meta{font-size:11px;color:#8a96a3;text-align:left;margin-top:2px}
.ibtns{display:flex;flex-direction:column;gap:4px;margin-top:4px;max-width:92%}
.ibtns span{background:rgba(255,255,255,.75);color:#2a7ab0;text-align:center;border-radius:10px;padding:6px;font-size:13px;font-weight:600}
.mediagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.mediagrid>.empty{grid-column:1/-1}
.mthumb{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--panel-2);border:2px solid transparent;cursor:pointer;display:grid;place-items:center;font-size:12px;color:var(--muted);text-align:center}
.mthumb img,.mthumb video{width:100%;height:100%;object-fit:cover}
.mthumb.sel{border-color:var(--accent)}
.mthumb .x{position:absolute;top:4px;left:4px;background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:8px;width:24px;height:24px;cursor:pointer}
.mthumb .n{position:absolute;top:4px;right:4px;background:var(--accent);color:var(--on-accent);border-radius:8px;min-width:22px;height:22px;font-size:12px;display:grid;place-items:center;font-weight:700}
.mthumb .k{position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.55);color:#fff;border-radius:6px;padding:0 6px;font-size:11px}
.drop{border:2px dashed var(--line);border-radius:14px;padding:18px;text-align:center;color:var(--muted);cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.drop>.ico{display:block;width:26px;height:26px;margin:0 auto 6px}
.mfile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;word-break:break-all;line-height:1.4}.mfile>.ico{width:26px;height:26px;vertical-align:0}
.drop:hover,.drop.over{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.counter{font-size:12px;color:var(--muted);text-align:left}
.counter.over{color:var(--bad);font-weight:700}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .dh{text-align:center;font-size:12px;color:var(--muted);font-weight:700;padding:4px 0}
.cal .day{min-height:96px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;font-size:12px;cursor:pointer;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.cal .day.out{opacity:.35}
.cal .day.today{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.cal .day .num{font-weight:800;font-size:13px}
.cal .day.holiday .num{color:var(--bad)}
.cal .occ{color:var(--warn);font-size:10.5px;line-height:1.4}
.cal .pill{background:var(--accent-soft);color:var(--accent);border-radius:6px;padding:0 5px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .pill.sent{background:var(--good-soft);color:var(--good)}.cal .pill.failed,.cal .pill.partial{background:var(--bad-soft);color:var(--bad)}.cal .pill.draft{background:var(--panel-2);color:var(--muted)}
@media (max-width:620px){.cal{gap:3px}.cal .day{min-height:58px;padding:4px;border-radius:9px}.cal .pill{font-size:0;height:6px;padding:0}.cal .occ{display:none}}
.jp .cal .day{min-height:44px;align-items:center;justify-content:center}
.jp .cal .day.sel{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* inbox */
.inbox{display:grid;grid-template-columns:330px minmax(0,1fr);height:calc(100dvh - 210px);min-height:440px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.inbox .convs{border-left:1px solid var(--line);overflow:auto;display:flex;flex-direction:column}
.inbox .conv{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.inbox .conv:hover,.inbox .conv.on{background:var(--panel-2)}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 55%,#fff),color-mix(in srgb,var(--accent-2) 60%,#fff));display:grid;place-items:center;font-weight:800;color:#0e0f14;flex-shrink:0;position:relative}
.avatar .nb{position:absolute;bottom:-2px;left:-2px;width:18px;height:18px;border-radius:50%;border:2px solid var(--panel)}
.chat{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.chat-load{padding:12px}
.formbar{padding:6px 14px;background:var(--warn-soft);color:var(--warn)}
@media (min-width:861px){.chat-head [data-back]{display:none}}
.newmsg{position:absolute;left:50%;transform:translateX(-50%);bottom:78px;z-index:3;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-hi);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text);border-radius:99px;padding:5px 14px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:var(--shadow);animation:enter-sm var(--t) var(--ease)}
.newmsg .ico{width:16px;height:16px}
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.msgs{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:6px;background:var(--panel-2)}
.msg{max-width:78%;padding:8px 12px;border-radius:14px;white-space:pre-wrap;word-wrap:break-word;font-size:14px}
.msg.in{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-right-radius:4px}
.msg.out{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-bottom-left-radius:4px}
.msg.out.auto{background:var(--accent-2)}
.msg.out.pending{opacity:.7}
.msg .ico{width:1.1em;height:1.1em;vertical-align:-.18em}
.msg .t{font-size:10.5px;opacity:.7;margin-top:2px}
.msg img{max-width:220px;border-radius:10px;display:block}
.composebar{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);align-items:flex-end;background:var(--panel)}
.composebar textarea{min-height:44px;max-height:140px;flex:1;padding:10px 12px;resize:none;overflow-y:auto}
.composebar .btn.sq{width:44px;height:44px}.composebar .iconbtn{width:44px;height:44px}
.msgs{overscroll-behavior:contain}
/* phones: the list flows with the page; an open chat is a full-screen layer above the bottom bar (like Telegram),
   sized to the visible area so the keyboard never covers the reply box */
@media (max-width:860px){
  .inbox{grid-template-columns:minmax(0,1fr);height:auto;min-height:0}
  .inbox .convs{overflow:visible;border-left:0}
  .inbox:not(.open) .chat{display:none}
  .inbox.open .chat{position:fixed;left:0;right:0;top:var(--vvt,0px);height:var(--vvh,100dvh);z-index:45;background:var(--panel);animation:sheet-in var(--t-slow) var(--ease)}
  .inbox.open .chat-head{padding-top:calc(10px + env(safe-area-inset-top))}
  .inbox.open .composebar{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  body.chat-open .bnav,body.chat-open .ai-fab{display:none}
  .hide-xs{display:none}
}
@keyframes sheet-in{from{transform:translateX(-24px);opacity:.6}to{transform:none;opacity:1}}

/* bars */
.bars{display:flex;align-items:flex-end;gap:3px;height:150px;padding-top:10px}
.bars .b{flex:1;display:flex;flex-direction:column-reverse;min-width:4px;align-self:stretch;justify-content:flex-start;border:0;padding:0;margin:0;background:transparent;cursor:pointer;border-radius:4px 4px 0 0}
.bars .b:hover span,.bars .b.on span{filter:brightness(1.18)}.bars .b.on{box-shadow:0 0 0 1.5px var(--accent) inset}
.bars-x{display:flex;gap:3px;margin-top:6px;font-size:10.5px;color:var(--muted);line-height:1.3}.bars-x span{flex:1;min-width:4px;text-align:center;white-space:nowrap;overflow:visible}
.chart-tip{min-height:1.8em;text-align:center;margin-top:6px}
.bars .b span{display:block;border-radius:4px 4px 0 0}
.bars .b span+span{border-radius:4px 4px 0 0;margin-bottom:1px}
.hbar{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:13px}
.hbar .track{flex:1;height:10px;background:var(--panel-2);border-radius:99px;overflow:hidden}
.hbar .fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:99px;transition:width var(--t-slow) var(--ease)}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-top:8px}

/* help center */
.help-search{max-width:640px}
.help-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.help-card{padding:0;margin:0!important;overflow:hidden;scroll-margin-top:96px}#support{scroll-margin-top:96px}
.help-card>summary{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;list-style:none}
.help-card>summary::-webkit-details-marker{display:none}.help-card>summary>.grow{flex:1;min-width:0}
.help-card>summary>.ico{transition:transform var(--t) var(--ease)}.help-card[open]>summary>.ico{transform:rotate(180deg)}
.help-card>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--radius)}
.help-body{padding:0 16px 16px;line-height:1.95;animation:enter-sm var(--t) var(--ease)}.help-body ol{margin:0 0 10px;padding-right:20px}.help-body p{margin:8px 0}
/* composer without a channel: one clear next step */
.first-post{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}.first-post .grow{flex:1;min-width:200px}
/* connect wizard */
.wsteps{list-style:none;display:flex;gap:6px;padding:0;margin:0 0 14px;counter-reset:none}
.wsteps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--muted);font-weight:600;text-align:center;position:relative}
.wsteps li span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--line);font-size:13px;transition:background var(--t),border-color var(--t),color var(--t)}
.wsteps li span .ico{width:15px;height:15px}
.wsteps li.on{color:var(--text)}.wsteps li.on span{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.wsteps li.done span{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 40%,var(--line));color:var(--good)}
.wsteps li+li:before{content:"";position:absolute;top:14px;inset-inline-start:calc(-50% + 18px);inset-inline-end:calc(50% + 18px);height:1px;background:var(--line)}.wsteps li.done+li:before{background:color-mix(in srgb,var(--good) 45%,var(--line))}
.okline{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--good-soft);border:1px solid color-mix(in srgb,var(--good) 30%,var(--line))}
.big-ok .ico{width:52px;height:52px}
.wide-btn{width:100%;padding:11px 16px}
.netpick-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 10px;margin:0;cursor:pointer;color:inherit;font:inherit;text-align:center;transition:border-color var(--t-fast),transform var(--t-fast) var(--ease)}
.netpick-tile:hover{border-color:var(--accent)}.netpick-tile:active{transform:scale(.98)}
.step.done{opacity:.6}
.blk.invalid{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}

/* blocks editor */
.blk{display:flex;gap:10px;align-items:flex-start;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:8px}
.blk .grow{flex:1;min-width:0}
.blk .ord{display:flex;flex-direction:column}
.lp-frame{width:100%;height:620px;border:1px solid var(--line);border-radius:22px;background:#fff}

/* assistant shortcut on every page */
.ai-fab{position:fixed;left:16px;bottom:calc(92px + env(safe-area-inset-bottom));width:52px;height:52px;border-radius:18px;display:grid;place-items:center;text-decoration:none;color:var(--btn-fg);
  background:var(--btn-bg);box-shadow:var(--btn-ring);z-index:40;transition:transform .25s var(--ease)}
.ai-fab:hover{transform:translateY(-2px) rotate(-4deg)}.ai-fab:active{transform:scale(.94)}.ai-fab .ico{width:25px;height:25px}
@media (min-width:861px){.ai-fab{bottom:24px;left:24px}}

/* phones and tablets: touch that feels like an app (core.js adds html.kb while the keyboard is open, html.scroll-lock
   under a window or the menu, and keeps --vvh / --vvt = the visible area's height and top) */
/* no double-tap zoom or tap delay on controls and scroll areas (pinch zoom stays) */
:where(html,a,button,input,select,textarea,label,summary,[role=button],[role=tab],[role=checkbox],.chip,.modal,.drawer,.msgs,.convs,.tabs,.hubtabs,.scroll-x,.nav){touch-action:manipulation}
/* a scroll inside a window, the menu or a chat stops at its end: no pull-to-refresh, no page moving behind it */
html{overscroll-behavior-y:contain}
.modal,.drawer .side,.side .nav,.inbox .convs,.scroll-x,.tabs,.hubtabs{overscroll-behavior:contain}
/* the visible height, not the tallest one (iPhone toolbars, the keyboard): a sheet's header never leaves the screen */
@supports (height:100dvh){.modal-bg>.modal{max-height:92dvh}@media (max-width:620px){.modal-bg>.modal{max-height:calc(94dvh - env(safe-area-inset-top))}}}
.modal{scroll-padding-bottom:88px}
@media (pointer:coarse){html.scroll-lock{overflow:hidden}}
/* the keyboard is open: the window sits in the part of the screen above it, the bottom bar steps aside */
html.kb .modal-bg{top:var(--vvt,0px);bottom:auto;height:var(--vvh,100%)}
html.kb .modal-bg>.modal{max-height:calc(var(--vvh,100dvh) - 8px)}
html.kb .bnav,html.kb .ai-fab{display:none}
html.kb .toasts{bottom:auto;top:calc(var(--vvt,0px) + 12px + env(safe-area-inset-top))}
@media (max-width:860px){html{scroll-padding:calc(76px + env(safe-area-inset-top)) 0 calc(104px + env(safe-area-inset-bottom))}html:has(body.chat-open){overflow:hidden}}
/* a bottom action bar on a phone is one slim row (its note above the buttons), not a third of the screen */
@media (max-width:620px){
  .stickybar{padding:10px 12px}
  .stickybar>.row.between{gap:6px 8px}
  .stickybar>.row.between>.muted.small{flex:1 1 100%;line-height:1.5}
  .stickybar>.row.between>.row{flex:1 1 auto;flex-wrap:nowrap;gap:6px;justify-content:flex-end}
  .stickybar>.row.between>.row>.btn{flex:1 1 auto;min-width:0;padding:9px 10px;font-size:14px;gap:5px}
}
@media (pointer:coarse),(max-width:860px){
  /* 16px text in every box: iPhone Safari zooms the whole page into a smaller one when it gets the focus */
  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]),select,textarea):not(.otp-box):not(.otp-in){font-size:16px}
}
@media (pointer:coarse){
  /* small controls keep their look; an invisible edge around them takes the tap, so each is at least 44px tall */
  .btn.sm,.chip,.tabs button,.hubtabs a{position:relative}
  .btn.sm:before,.chip:before,.tabs button:before{content:"";position:absolute;inset:-5px -3px}
  .btn.sm.sq:before{inset:-5px}
  .hubtabs a:before{content:"";position:absolute;inset:-4px -2px}
  :is(.btn.sm,.chip)>:is(button,a,input,select,label){position:relative;z-index:1}
  .hubtabs a{padding-top:8px;padding-bottom:8px}
  /* (a checkbox row with its own margin in the markup keeps it: the edge would add to that spacing) */
  .check:not(.auth-terms):not([style*="margin"]),.guide-x{padding-top:9px;padding-bottom:9px;margin-top:-9px;margin-bottom:-9px}
  :where(details:not(.help-card))>summary{padding-top:9px;padding-bottom:9px;margin-top:-9px;margin-bottom:-9px}
  .card>.row.between>a.small{padding:11px 8px;margin:-11px -8px}
  .mthumb .x{width:32px;height:32px}
  /* a long press on a button or tab does not select its label */
  :where(.btn,.chip,.tabs button,.hubtabs a,.bnav a,.nav a,.nav-head,.iconbtn){-webkit-user-select:none;user-select:none}
  /* nor opens the iPhone's link preview on the menu and tabs (they are the app's own buttons) */
  :where(.bnav a,.hubtabs a,.nav a,.mtop a){-webkit-touch-callout:none}
  /* a hover look stays stuck after a tap on touch screens: only the pressed look shows */
  .btn.primary:hover,.pcard:hover,a.stat:hover,.ai-fab:hover,.sp-wallet:hover{transform:none;filter:none}
}
/* a request is taking a moment (core.js netBusy): a thin line runs along the top of the screen */
.netbar{position:fixed;z-index:120;top:env(safe-area-inset-top,0px);left:0;right:0;height:3px;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .25s ease}
.netbar.on{opacity:1}
.netbar:after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;border-radius:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 10px var(--accent);animation:netbar 1.15s var(--ease-io) infinite}
@keyframes netbar{from{transform:translateX(260%)}to{transform:translateX(-110%)}}
@media (prefers-reduced-motion:reduce){.netbar:after{width:100%;opacity:.55}}
/* pressed: an instant answer to every tap (transform and color only) */
:is(.item[role=button],.item[data-open],.conv,.pick-row,.support-list .item):active{background:color-mix(in srgb,var(--text) 6%,transparent)}
:is(.nav a,.nav-head,.drawer .side-foot .btn):active{background:var(--panel-2)}
.bnav a .ico{transition:transform var(--t-fast) var(--ease)}.bnav a:active .ico{transform:scale(.86)}
.bnav .fab:active{transform:scale(.95)}
:is(a.card,a.stat,.card[role=button],[data-post].card,.mthumb,.netpick-tile,a.subbar,.projchip):active{transform:scale(.985);transition:transform .08s}
.cal .day:active{background:var(--panel-2)}
a.small:active,.guide-x:active,.auth-link:active{opacity:.6}

/* auth + seller panel */
/* sign-in / sign-up steps (core.js renderAuth): one card, steps slide in from the side they come from */
.auth-card{position:relative;overflow:hidden}
.auth-step.fwd{animation:auth-fwd var(--t-slow) var(--ease) both}.auth-step.back{animation:auth-back var(--t-slow) var(--ease) both}.auth-step.fade{animation:fade var(--t) ease both}
@keyframes auth-fwd{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes auth-back{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes auth-shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.auth-head{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.auth-head h2{font-size:21px;margin:0}
.auth-head p{margin:2px 0 0;line-height:1.75}.auth-head p b{color:var(--text);font-weight:700}
.auth-tabs{display:flex;margin:0 0 20px}.auth-tabs button{flex:1;justify-content:center;padding:8px 10px}
.auth-prog{display:flex;gap:6px;margin:0 0 18px}
.auth-prog i{flex:1;height:4px;border-radius:4px;background:var(--line);transition:background var(--t) var(--ease)}
.auth-prog i.on{background:linear-gradient(90deg,var(--accent-2),var(--accent));box-shadow:0 0 10px color-mix(in srgb,var(--accent) 35%,transparent)}
.auth-lrow{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.auth-in{position:relative}
.auth-in .input{height:48px;font-size:16px}
.auth-in.has-eye .input{padding-left:46px}
.auth-in .input[aria-invalid]{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
.auth-eye{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;background:transparent;border-radius:10px;display:grid;place-items:center;color:var(--muted);cursor:pointer;transition:color var(--t-fast),background var(--t-fast)}
.auth-eye:hover{color:var(--text);background:var(--panel)}.auth-eye:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.auth-eye .ico{width:19px;height:19px}
.auth-go{width:100%;padding:13px;font-size:15.5px;margin-top:2px}
.auth-go>.ico{width:18px;height:18px}
.auth-go.busy{opacity:.82}.auth-go .spinner{width:17px;height:17px;border-width:2px}
.auth-err{display:flex;align-items:center;gap:8px;padding:10px 12px;margin:0 0 12px;border-radius:12px;background:var(--bad-soft);color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);font-size:13.5px;font-weight:600;line-height:1.7}
.auth-err[hidden]{display:none}
.auth-err>.ico{width:18px;height:18px;flex:none}.auth-err .grow{flex:1;min-width:0}
.auth-err .btn{flex:none;color:var(--text)}
.auth-err.shake{animation:auth-shake .4s var(--ease)}
.auth-link{all:unset;box-sizing:border-box;cursor:pointer;color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:6px;font-size:13.5px}
.auth-link:hover{text-decoration:underline}.auth-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.auth-link .ico{width:16px;height:16px}
.auth-edit{margin:-8px 0 16px}
.auth-alt{text-align:center;margin-top:16px;font-size:13.5px;color:var(--muted)}.auth-alt a{font-weight:700}
/* «ادامه با گوگل»: a quiet glass button with Google's mark under the form */
.auth-or{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:var(--muted);font-size:12.5px}
.auth-or:before,.auth-or:after{content:"";flex:1;height:1px;background:var(--line)}
.btn.auth-google{width:100%;justify-content:center;gap:10px;padding:12px;font-size:15px;background:var(--glass);border:1px solid var(--line);color:var(--text);box-shadow:var(--hi)}
.btn.auth-google:hover{border-color:var(--accent-2)}
.g-logo{width:18px;height:18px;flex:none;display:inline-block}
.auth-home{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted)}
.auth-home:hover{color:var(--text)}.auth-home .ico{width:16px;height:16px}
.auth-resend{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;min-height:28px;font-size:13.5px;color:var(--muted)}
.auth-resend>.ico{width:17px;height:17px}.auth-resend b{color:var(--text);font-variant-numeric:tabular-nums}
.auth-test{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 12px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--warn) 65%,transparent);background:var(--warn-soft);line-height:1.7}
.auth-test>.ico{color:var(--warn);width:22px;height:22px;flex:none}.auth-test .grow{flex:1;min-width:0}
.auth-test>.grow>b{color:var(--warn)}.auth-test .ltr{font-size:15px;letter-spacing:2px}
.auth-note{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin:0 0 12px;border-radius:12px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));font-size:13.5px;line-height:1.8}
.auth-note>.ico{color:var(--accent);flex:none;margin-top:3px}.auth-note .grow{flex:1;min-width:0}
.auth-terms{align-items:flex-start;margin:2px 0 14px;font-size:13.5px;line-height:1.8}
.auth-terms input{margin-top:3px;flex:none}.auth-terms a{font-weight:700}
.otp{position:relative;direction:ltr;margin:4px 0 16px}
.otp-cells{display:flex;justify-content:center;gap:8px;pointer-events:none}
.otp-box{flex:1 1 0;min-width:0;max-width:54px;height:58px;display:grid;place-items:center;font-family:var(--display);font-size:24px;font-weight:800;line-height:1;color:var(--text);border:1px solid var(--line);background:var(--panel-2);border-radius:14px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease)}
/* the real field lies over the boxes: transparent text and caret, 16px+ so iOS does not zoom, no autofill paint */
.otp-in{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:14px;outline:0;box-shadow:none;background:transparent;
  color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;font-size:24px;letter-spacing:.6em;text-align:center;cursor:text;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.otp-in::selection{background:transparent;color:transparent}
.otp-in:-webkit-autofill,.otp-in:autofill{-webkit-text-fill-color:transparent;-webkit-box-shadow:0 0 0 60px transparent inset;transition:background-color 99999s}
.otp:focus-within .otp-box.cur{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);transform:translateY(-2px)}
.otp:focus-within .otp-box.cur:empty::after{content:'';width:2px;height:26px;border-radius:2px;background:var(--accent);animation:otp-caret 1.1s steps(1) infinite}
@keyframes otp-caret{50%{opacity:0}}
.otp-box.full{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--panel-2))}
.otp.busy .otp-box{animation:otp-wave 1s var(--ease) infinite;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes otp-wave{40%{transform:translateY(-4px);border-color:var(--accent)}}
.otp.ok .otp-box{border-color:var(--good);color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--panel-2))}
.otp.bad{animation:auth-shake .4s var(--ease)}.otp.bad .otp-box{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)}
.otp-in[aria-invalid]~.otp-cells .otp-box:not(.full):not(.cur){border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.otp-tip{display:flex;align-items:center;justify-content:center;gap:6px;margin:-6px 0 14px;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.7}
.otp-tip>.ico{width:15px;height:15px;flex:none;color:var(--accent)}
@media (max-width:380px){.otp-cells{gap:6px}.otp-box{height:52px;font-size:21px}}
/* phones, after the number: a slim brand bar, so the code field sits well above the keyboard */
@media (max-width:860px){
  .auth-side{transition:min-height var(--t-slow) var(--ease),padding var(--t-slow) var(--ease)}
  .auth2[data-compact] .auth-side{min-height:0;padding:12px 16px;gap:0}
  .auth2[data-compact] .auth-copy{display:none}
  .auth2[data-compact] .auth-side .globe{width:120px;left:-28px;opacity:.5}
}
/* installed web app (home screen): no link out to the public site, room for the notch and the home bar */
@media (display-mode:standalone){
  .auth-home{display:none}
  .auth2{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
}
/* admin «پیامک»: the recommended code template */
.sms-tpl-card{margin:14px 0 0}
.sms-tpl{margin:0;padding:14px 16px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line);font-family:var(--font);font-size:15px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext;text-align:start;-webkit-user-select:all;user-select:all}
.sms-tpl-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin-top:8px}

/* seller panel (/sales, salespanel.js) */
.sp .projchip b{font-size:13.5px}
.sp-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:800;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel-2));border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))}
.sp-phone{font-variant-numeric:tabular-nums;letter-spacing:.3px}
.sp-link{position:relative;overflow:hidden;background:radial-gradient(520px 220px at 12% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--panel) 92%,var(--line-hi)),var(--panel) 40%)}
.sp-link h2{margin:8px 0 4px;font-size:19px}.sp-link p{margin:0 0 12px}
.sp-linkbox{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line);font-family:var(--latin);font-size:15px;box-shadow:var(--hi)}
.sp-linkbox span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-linkbox .ico{color:var(--accent)}
.sp-linkacts{margin-top:12px;gap:8px}.sp-linkacts .muted{margin-right:auto}
.sp-sec{margin:18px 2px 10px}.sp-sec h3{display:flex;align-items:center;gap:8px;margin:0}.sp-sec h3 .ico{color:var(--accent)}
.sp-tile b{font-size:24px}.sp-tile b .small{-webkit-text-fill-color:var(--muted);font-family:var(--font);font-weight:500}
.sp-sub{color:var(--muted);font-size:12px;margin-top:2px}
.sp-pair{margin-top:14px}.sp-pair+.card{margin-top:14px}
.sp-wallet{display:block;color:inherit;transition:transform .3s var(--ease),border-color .3s}.sp-wallet:hover{transform:translateY(-2px);border-color:var(--line-hi)}
.sp-wallet>.row .ico{color:var(--muted)}
.sp-big{font-family:var(--display);font-size:30px;font-weight:800;margin:12px 0 0;line-height:1.3}
.sp-kv{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}.sp-kv:first-of-type{margin-top:10px}.sp-kv span{color:var(--muted)}
.sp-todo{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:6px 0 4px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);font-weight:600;font-size:14px}
.sp-todo>.ico{color:var(--accent)}.sp-todo>.ico:last-child{color:var(--muted)}.sp-todo .grow{flex:1;min-width:0}
.sp-end{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;text-align:left}
.sp-neg{color:var(--bad)}
.sp-acct{margin-top:14px}
.sp-filters{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.sp-chips .chip{font-family:inherit}.sp-n{opacity:.7;font-weight:700}
.sp-tools{gap:8px;flex-wrap:nowrap}.sp-search{flex:1;min-width:0}.sp-search .input{height:40px}
select.sp-mini{width:auto;max-width:100%;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600}
.sp-item{align-items:flex-start}.sp-item .grow>.row{flex-wrap:nowrap;min-width:0}.sp-item .grow .muted .ico{width:1em;height:1em;vertical-align:-.12em;margin-left:2px}
.sp-acts{display:flex;align-items:center;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.sp-note{display:flex;gap:6px;align-items:flex-start;margin-top:6px;padding:6px 10px;border-radius:10px;background:var(--panel-2);color:var(--text)}.sp-note .ico{width:15px;height:15px;color:var(--muted);margin-top:4px;flex:none}
.sp-sum{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:center}
.sp-sum-main{display:flex;align-items:center;gap:12px}.sp-sum-main .sp-big{margin:0;font-size:28px}
.sp-sum>div:not(.sp-sum-main){padding-right:16px;border-right:1px solid var(--line)}.sp-sum b{font-size:17px}
.sp-period{display:inline-flex}
.sp-members .card{margin:0}
.sp-member.off{opacity:.65}
.sp-mstats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0 4px;text-align:center}
.sp-mstats div{padding:8px 4px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line)}.sp-mstats b{display:block;font-family:var(--display);font-size:18px;line-height:1.3}.sp-mstats span{font-size:11.5px;color:var(--muted)}
@media (max-width:620px){.sp-sum{grid-template-columns:1fr 1fr;gap:12px}.sp-sum-main{grid-column:1/-1;padding-bottom:12px;border-bottom:1px solid var(--line)}.sp-sum>div:not(.sp-sum-main){padding-right:0;border-right:0}.sp-sum>div:last-child{padding-right:12px;border-right:1px solid var(--line)}.sp-lead{flex-wrap:wrap}.sp-lead .sp-acts{width:100%;justify-content:flex-start;padding-right:50px}.sp-tools{flex-wrap:wrap}.sp-tools select.sp-mini{flex:0 1 auto;max-width:48%}.sp-search{flex:1 1 150px}.sp-big{font-size:26px}}
/* product picker (App.productPicker): searched on the server, one tap sends or toggles */
.pick-row{gap:10px;flex-wrap:nowrap}
.pick-row[role=checkbox]{cursor:pointer;border-radius:12px;transition:background var(--t-fast)}
.pick-row[role=checkbox]:hover{background:var(--panel-2)}
.pick-th{width:40px;height:40px;flex:none;border-radius:10px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted)}
.pick-th img{width:100%;height:100%;object-fit:cover}.pick-th .ico{width:18px;height:18px}
.pick-ck{width:24px;height:24px;flex:none;border-radius:8px;border:2px solid var(--line);display:grid;place-items:center;color:transparent;transition:background var(--t-fast),border-color var(--t-fast)}
.pick-ck .ico{width:14px;height:14px}
.pick-row.on .pick-ck{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pick-chips .chip{cursor:default;gap:6px}.pick-chips .chip button{background:none;border:0;padding:0;margin:0;color:inherit;cursor:pointer;display:inline-grid;place-items:center;opacity:.7}.pick-chips .chip button:hover{opacity:1}.pick-chips .chip .ico{width:14px;height:14px}
/* storage bar on the subscription page */
.store-note{font-size:12px;color:var(--muted);margin-top:2px}
.auth-nosms{display:flex;justify-content:center;align-items:center;gap:2px 6px;flex-wrap:wrap}