/* 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. Estedad is subset to the characters below
   (scripts/subset-fonts.sh: keep its UNICODES equal to this unicode-range); everything else falls back to Vazirmatn. */
@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;unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AB,U+00AE,U+00B7,U+00BB,U+00D7,U+00F7,U+060C,U+061B,U+061F,U+0621-063A,U+0640-0655,U+0660-066D,U+0670,U+067E,U+0686,U+0698,U+06A9,U+06AF,U+06BE,U+06C0-06C3,U+06CC,U+06D0,U+06F0-06F9,U+200C-200F,U+2010-2027,U+2030,U+2039-203A,U+20AC,U+2122,U+2190-2193,U+2212,U+2264-2265,U+FD3E-FD3F}
@font-face{font-family:Estedad;src:url(/fonts/Estedad-ExtraBold.woff2) format("woff2");font-weight:800 900;font-display:swap;unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AB,U+00AE,U+00B7,U+00BB,U+00D7,U+00F7,U+060C,U+061B,U+061F,U+0621-063A,U+0640-0655,U+0660-066D,U+0670,U+067E,U+0686,U+0698,U+06A9,U+06AF,U+06BE,U+06C0-06C3,U+06CC,U+06D0,U+06F0-06F9,U+200C-200F,U+2010-2027,U+2030,U+2039-203A,U+20AC,U+2122,U+2190-2193,U+2212,U+2264-2265,U+FD3E-FD3F}
@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:none;min-height:100vh}
body::before{content:'';position:fixed;inset:0;z-index:-1;background:var(--bg-glow);pointer-events:none}
::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)}
/* the composer's fourth action («ارسال برای تأیید در ربات») comes last, so when the four do not fit one row it is the
   one that moves down (filling that row) and «انتشار فوری» stays beside the other two */
.stickybar>.row.between>.row.acts4>[data-approval]{order:3;flex-grow:1}
/* 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)}
/* card to card (billing.js checkout, admin card editor and receipt viewer): steps, the amount, one box per card, the receipt picker */
/* a thin rule between details in one line (a dot next to Persian digits reads as a zero); admin.html has the same */
.sep{display:inline-block;width:1px;height:.95em;background:currentColor;opacity:.35;margin:0 7px;vertical-align:-.12em}
.cp-steps{display:flex;list-style:none;margin:0 0 16px;padding:0}
.cp-steps .st{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;font-size:12.5px;color:var(--muted);text-align:center;min-width:0}
.cp-steps .st+.st::before{content:"";position:absolute;top:15px;left:50%;right:-50%;height:2px;background:var(--line)}
.cp-steps .st.done+.st::before{background:var(--good)}
.cp-steps i{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;background:var(--panel-2);border:1px solid var(--line);color:var(--muted)}
.cp-steps i .ico{width:16px;height:16px;margin:0}
.cp-steps .on i{background:color-mix(in srgb,var(--accent) 12%,var(--panel));border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}.cp-steps .on{color:var(--text);font-weight:700}
.cp-steps .done i{background:var(--good);border-color:var(--good);color:var(--panel)}
.cp-amount{text-align:center;padding:14px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2);margin-bottom:12px}
.cp-amount .big{font-family:var(--display);font-size:30px;line-height:1.35;margin-top:2px}
.cp-copies{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.cp-card{border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:var(--radius);padding:12px 14px;margin-bottom:10px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,var(--panel)),var(--panel))}
.cp-card .bank{display:flex;align-items:center;gap:6px;font-weight:700}.cp-card .bank .ico{color:var(--accent)}
.cp-card .num{font-family:var(--latin);font-size:clamp(17px,5.6vw,23px);letter-spacing:1px;text-align:center;margin:10px 0 6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cp-card .who{text-align:center;font-size:13.5px;margin-bottom:8px}
.cp-card .acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.cp-iban{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:13px}
.cp-iban .ltr{font-family:var(--latin);overflow-wrap:anywhere}
.cp-owner{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 10px;font-size:14px}
.cp-hints{margin:4px 0 10px;padding-right:20px;font-size:13.5px;line-height:1.9}
.btn.copied{border-color:var(--good);color:var(--good)}
.cp-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;padding:16px;border:2px dashed color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:var(--radius);background:var(--panel-2);text-align:center;cursor:pointer;overflow:hidden}
.cp-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.cp-drop:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.cp-drop>.ico{width:30px;height:30px;color:var(--accent)}
.cp-drop img{max-width:100%;max-height:230px;border-radius:12px;object-fit:contain}
.cp-done{text-align:center;padding:4px 0 6px}.cp-done>.ico{width:58px;height:58px;color:var(--good);margin-bottom:4px}.cp-done h3{margin:4px 0 6px;font-size:20px}
.cp-done img{display:block;max-width:180px;max-height:180px;margin:12px auto 0;border-radius:12px;border:1px solid var(--line)}
.cp-methods{display:grid;gap:8px}
.modal-foot.cp-foot .btn{flex:1 1 auto}
.cp-method{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:14px;cursor:pointer;background:var(--panel-2)}
.cp-method:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.cp-method input{margin-top:4px;accent-color:var(--accent);width:18px;height:18px;flex:none}.cp-method small{display:block;color:var(--muted);font-size:12.5px}
.cp-edit{border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:10px;background:var(--panel-2)}
.cp-receipt img{display:block;max-width:100%;max-height:62vh;margin:0 auto;border-radius:12px;background:#fff}
.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)}
/* waiting for approval in the bot: amber (the warn token of each theme) with a dashed ring, apart from «در حال انتشار» */
.badge.wait{background:var(--warn-soft);color:var(--warn);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 45%,transparent)}
.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)}
/* links in guides, hints and help articles (places named in the text, public/js/places.js): underlined, so they read as links in both themes */
:is(.guide,.hint,.hc-art) a:not(.btn):not(.guide-x):not(.hc-card){color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:color-mix(in srgb,currentColor 50%,transparent);-webkit-tap-highlight-color:color-mix(in srgb,var(--accent) 18%,transparent)}
:is(.guide,.hint,.hc-art) a:not(.btn):not(.guide-x):not(.hc-card):hover{text-decoration-color:currentColor}
.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)}
.cal .pill.approval{background:var(--warn-soft);color:var(--warn);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 40%,transparent)}
/* ready-made series (public/js/packs.js): one card per post, skipped ones greyed */
.pk-item{padding:14px}.pk-item.off{opacity:.55}.pk-item.off .pk-thumb{filter:grayscale(1)}
.pk-thumb{width:76px;height:76px;flex-shrink:0;border-radius:12px;object-fit:cover;background:var(--panel-2);border:1px solid var(--line)}
.pk-thumb.txt{display:grid;place-items:center;color:var(--muted)}.pk-thumb.txt .ico{width:26px;height:26px}
.pk-title{display:block;margin-top:6px;overflow-wrap:anywhere}
.pk-cap{margin-top:4px;color:var(--muted);font-size:13.5px;line-height:1.85;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pk-mode{padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}.pk-mode:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
@media (max-width:480px){.pk-thumb{width:62px;height:62px}}
@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:0;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:0;text-align:center;white-space:nowrap;overflow:visible}
/* many days (90): thinner gaps so every bar fits a phone screen */
.bars.dense,.bars-x.dense{gap:1px}
.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)}
/* each colour stays with its word; whole items move to a second line when the row is full */
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);margin-top:8px}
.legend>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}

/* 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}
  /* on a phone the fourth action always gets its own line under the other three */
  .stickybar>.row.between>.row.acts4{flex-wrap:wrap}
  .stickybar>.row.between>.row.acts4>[data-approval]{flex:1 1 100%}
}
@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}
/* the «سایت» hub: SEO score ring, score history bars, checklist rows, blog editor preview */
.seo-ring{position:relative;flex:none}.seo-ring svg{display:block}.seo-ring-v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.seo-ring-v b{font-family:var(--display);font-weight:800}
.seo-hist{display:flex;gap:4px;align-items:flex-end;height:34px;margin-top:12px}.seo-hist i{flex:1;max-width:18px;border-radius:4px 4px 0 0;min-height:3px;opacity:.85}
.seo-issue{border-top:1px solid var(--line);padding:8px 0}.seo-issue:first-of-type{border-top:0}.seo-issue summary{cursor:pointer;list-style:none;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.seo-issue summary::-webkit-details-marker{display:none}.seo-issue[open] summary{margin-bottom:4px}
.blog-prev{font-size:15px;line-height:1.9}.blog-prev h2{font-size:19px;margin:18px 0 6px}.blog-prev h3{font-size:16px;margin:14px 0 4px}.blog-prev ul,.blog-prev ol{padding-inline-start:22px}.blog-prev a{color:var(--accent);text-decoration:underline}
.blog-prev blockquote{border-inline-start:3px solid var(--line-hi);margin:10px 0;padding:4px 12px;color:var(--muted)}
.blog-cover{width:100%;max-height:220px;object-fit:cover;border-radius:12px;display:block;background:var(--panel-2)}
.seo-counter{font-size:11.5px;color:var(--muted);text-align:left;direction:ltr}.seo-counter.over{color:var(--bad)}
/* subscription plans: a card per plan (the featured or picked one lit), the businesses stepper, locked menu items and
   the upgrade card of a page the plan lacks */
.plan-c{margin:0;display:flex;flex-direction:column;gap:8px}
.plan-c.hot{border-color:var(--accent);box-shadow:var(--glow)}
.plan-price{font-family:var(--display);font-size:24px;line-height:1.4}
.plan-diff{font-size:12.5px;font-weight:700;color:var(--good);background:color-mix(in srgb,var(--good) 10%,transparent);border:1px solid color-mix(in srgb,var(--good) 30%,transparent);border-radius:10px;padding:5px 9px}
.plan-list{list-style:none;margin:2px 0 6px;padding:0;display:grid;gap:7px;font-size:13.5px;color:var(--muted)}
.plan-list li{display:flex;gap:7px;align-items:flex-start}.plan-list li .ico{flex:none;width:16px;height:16px;margin-top:3px}
.plan-list li.h{color:var(--text);font-weight:700;margin-top:2px}
.plan-list li.lim{color:var(--text)}
.plan-list li.no{opacity:.55}.plan-list li.no span{text-decoration:line-through;text-decoration-thickness:1px}
.bizpick{display:flex;gap:12px;align-items:center;padding:12px 14px;margin:0 0 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}
.stepper{display:flex;align-items:center;gap:10px;flex:none}.stepper b{min-width:2ch;text-align:center;font-family:var(--display);font-size:20px}
.navlock{margin-inline-start:auto;display:inline-flex;opacity:.55}.navlock .ico{width:14px;height:14px}
.hubtabs a .navlock{margin-inline-start:6px}
.upsell-list{list-style:none;padding:0;margin:14px 0;display:grid;gap:9px}
.upsell-list li{display:flex;gap:8px;align-items:flex-start}.upsell-list .ico{flex:none;margin-top:3px}
@media (max-width:420px){.bizpick{flex-wrap:wrap}.bizpick .stepper{margin-inline-start:auto}}
/* the full plan comparison on the subscription page: every item with what it is for, the plans' marks beside it
   (under it on phones, with the plan's name) */
.pcmp{margin-top:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}
.pcmp summary{cursor:pointer;padding:12px 14px;font-weight:700;display:flex;align-items:center;gap:8px;list-style:none}
.pcmp summary::-webkit-details-marker{display:none}
.pcmp-t{padding:0 14px 12px}
.pcmp h4{margin:14px 0 2px;font-size:14px;color:var(--accent)}
.pcmp-row{display:grid;grid-template-columns:minmax(0,1fr) repeat(var(--cols),76px);gap:8px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.pcmp-row.head{border-top:0;padding-bottom:4px}.pcmp-row.head b{text-align:center;font-size:13px}
.pcmp-row .it b{display:block;font-size:13.5px}.pcmp-row .it .small{display:block;line-height:1.8}
.pcmp-row>span{display:flex;justify-content:center;align-items:center;font-size:12.5px;font-weight:700}
.pcmp-row .y .ico{color:var(--good)}.pcmp-row .n .ico,.pcmp-row>span>.ico{color:var(--muted);opacity:.6}
@media (max-width:700px){
  .pcmp-row{grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:6px}.pcmp-row.head{display:none}
  .pcmp-row .it{grid-column:1/-1}
  .pcmp-row>span{flex-direction:column;gap:2px;padding:5px 2px;border-radius:10px;background:var(--panel)}
  .pcmp-row>span:before{content:attr(data-p);font-size:11px;font-weight:600;color:var(--muted)}
}