:root {
  /* Safe areas. iOS/Safari fill env() in for us; an Android WebView always reports 0, so the
     native layer overwrites these with the real window insets on every insets change. Read these
     variables, never env() directly, or the layout is correct on one platform and wrong on the other. */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}
/* ---------- fonts (bundled locally — works with no internet) ---------- */
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* ============================================================================
   WIX CHAT DESIGN SYSTEM — single source of truth (see DESIGN-SYSTEM.md)
   Telegram-style. Every screen MUST consume these tokens, not literal values.
   ============================================================================ */
:root {
  /* === LIGHT THEME — "Soft Lavender" (pastel lavender + mint, gentle on the eyes) === */
  --bg: #F4F5FC;          /* app background — very soft lavender-white */
  --panel: #ffffff;       /* surface: header, composer, cards, sheets */
  --panel-2: #EEF0F9;     /* sunken surface: inputs, chips, pressed */
  --text: #2D3242;        /* primary text — soft slate (not harsh black) */
  --text-2: #838AA0;      /* secondary text / labels */
  --accent: #7C6CF0;      /* soft lavender primary */
  --accent-soft: #ECEAFD; /* tinted accent (focus ring, soft fills) */
  --accent-contrast: #ffffff; /* text/icon on accent */
  --accent-grad: linear-gradient(135deg, #8B7CF0, #6FA8E5); /* lavender → soft blue (white-text safe) */
  --accent-2: #4FB6AE;    /* soft mint — calm highlight */
  --glow: 0 8px 22px rgba(124,108,240,.20); /* soft accent lift */
  --dock-bg: rgba(255,255,255,.72); --dock-border: rgba(124,134,170,.20); /* floating nav dock */
  --bubble-me: #ECEAFD;   /* outgoing bubble — soft lavender tint */
  --bubble-me-text: #2D3242;   /* readable text on the sent bubble */
  --bubble-me-tick: #7C6CF0;   /* read-tick color on the sent bubble */
  --tick-read: #7C6CF0;        /* read-tick (theme primary) */
  --bubble-other: #ffffff;/* incoming message bubble (neutral surface) */
  --border: #E7E9F3;      /* dividers, input borders */
  --danger: #ED8190;      /* soft rose */
  --online: #5FC189;      /* soft green */
  --shadow: 0 10px 30px rgba(40,44,90,.08);
  --overlay: rgba(24,28,52,.42);   /* modal/sheet backdrop */
  --on-dark: #ffffff;           /* text on media/call/story overlays */
  --on-dark-2: rgba(255,255,255,.72);
  /* status chips — soft pastel */
  --chip-warn-bg: #FBF1DC; --chip-warn-text: #BE8C2E;
  --chip-ok-bg: #E2F4EA;   --chip-ok-text: #3E9D6B;
  --chip-danger-bg: #FCE7EB; --chip-danger-text: #D87384;
  --story-grad: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); /* Instagram unseen ring */

  /* --- radius scale --- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;
  /* --- spacing scale (4px base) --- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  /* --- type scale --- */
  --fs-xs: 11px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px;
  --lh: 1.6;
  /* --- avatar sizes --- */
  --av-sm: 40px; --av-md: 50px; --av-lg: 92px; --av-xl: 120px;
  /* --- components --- */
  --btn-h: 48px; --field-h: 48px;
  /* --- motion --- */
  --ease: cubic-bezier(.22,.61,.36,1); --dur: .22s;
}
[data-theme="dark"] {
  /* === DARK THEME — "Soft Dusk" (pastel lavender + mint on soft charcoal, easy on the eyes) === */
  --bg: #171A23;              /* soft charcoal — not pure black */
  --panel: #1F2330;
  --panel-2: #282D3D;
  --text: #E7E9F1;            /* soft white (not pure) */
  --text-2: #939AAE;
  --accent: #A593F5;          /* soft pastel lavender */
  --accent-soft: #2A2740;     /* muted lavender tint */
  --accent-contrast: #ffffff;
  --accent-grad: linear-gradient(135deg, #A593F5, #7CB8EC); /* soft lavender → soft blue (white-text safe) */
  --accent-2: #84DBD0;        /* soft mint — calm highlight */
  --glow: 0 8px 26px rgba(165,147,245,.26);
  --dock-bg: rgba(255,255,255,.06); --dock-border: rgba(255,255,255,.10);
  --bubble-me: #2C2A46;        /* soft deep lavender outgoing bubble */
  --bubble-me-text: #E7E9F1;
  --bubble-me-tick: #84DBD0;
  --tick-read: #84DBD0;
  --bubble-other: #282D3D;
  --border: #2C3245;
  --shadow: 0 12px 34px rgba(0,0,0,.42);
  --overlay: rgba(8,10,18,.62);
  --chip-warn-bg: #34301A; --chip-warn-text: #E0BE6A;
  --chip-ok-bg: #1A302A;   --chip-ok-text: #6FD9A8;
  --chip-danger-bg: #34222A; --chip-danger-text: #F0A0AC;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  /* KBD fix: lock the page so iOS can't scroll the document on input focus. The app
     shell (#app) is a fixed element that JS keeps exactly aligned to window.visualViewport
     (height + offsetTop), so when the keyboard pans the viewport the chat header stays
     pinned to the top and the composer sits flush on the keyboard (no gap). */
  position: fixed; inset: 0; width: 100%; overflow: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--accent); }
img { display: block; }
.hidden { display: none !important; }

/* height: 100vh (NOT 100dvh/inset:0) — on iOS standalone PWAs the dynamic/small
   viewport is screen-minus-notch (e.g. 797 of 844), which left a dead strip at the
   bottom; 100vh = the large viewport = the full screen. Safe areas are handled by
   .side padding-top + the bottom-nav margin.
   Height: in a BROWSER use 100dvh (shrinks for the URL bar + keyboard, so the bottom
   nav/composer stay visible). In an INSTALLED PWA use 100vh (the dynamic viewport
   under-reports by the notch height in iOS standalone, leaving a dead strip). */
#app { position: fixed; top: 0; left: 0; right: 0; height: 100dvh; max-width: 560px; margin: 0 auto; background: var(--panel); display: flex; flex-direction: column; box-shadow: var(--shadow); overflow: hidden; }
/* 100vh ONLY on iOS standalone (its dvh under-reports by the notch → dead strip). Android
   standalone/PWA + browser + native stay on 100dvh — 100vh there runs under the system nav
   bar and pushes the chat composer off-screen. */
html[data-standalone="ios"] #app { height: 100vh; }
/* --connbar-h is set to the bar's height while the offline/reconnect strip is on screen, so
   the app content moves DOWN instead of the strip covering the header (which is what it did
   on Android: the text landed on top of the balance row and the status bar). */
:root { --connbar-h: 0px; }
/* max(), not a sum: --connbar-h is the MEASURED offsetHeight of .conn-bar, and that element's
   own padding already contains var(--sat). Adding them reserved the notch twice
   and pushed the whole column — header, messages and composer — down by that much. */
.side { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--bg);
  padding-top: max(var(--sat), var(--connbar-h)); transition: padding-top .2s ease; }

/* keyboard accessibility */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-contrast: more) {
  :root { --border: #9aa3ad; --text-2: #404a55; }
  [data-theme="dark"] { --border: #6b7685; --text-2: #c3ccd6; }
}

/* two-pane desktop layout */
@media (min-width: 900px) {
  /* premium desktop backdrop behind the pinned app column */
  body { background:
    radial-gradient(1100px 620px at 8% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(900px 520px at 108% 112%, rgba(79,182,174,.12), transparent 56%),
    var(--bg); }
  /* DESKTOP MODEL: the whole app is a fixed phone-width column PINNED to the RIGHT
     edge (RTL: first child sits right). It never moves between tabs — home, shop,
     wallet, settings, chat all live in this column with the original mobile card
     design intact. The empty space to the LEFT is a detail pane: it shows the open
     conversation in chat, and a calm branded backdrop everywhere else. */
  #app { max-width: none; left: 0; right: 0; flex-direction: row; background: transparent; box-shadow: none; }
  .side { flex: 0 0 480px; max-width: 480px; border-left: 1px solid var(--border);
    background: var(--bg); box-shadow: -24px 0 60px -30px rgba(40,44,90,.28); }
  html[dir="ltr"] .side { border-left: none; border-right: 1px solid var(--border); box-shadow: 24px 0 60px -30px rgba(40,44,90,.28); }
  /* the left detail pane — always present, fills the rest, holds the chat conversation */
  #app > #chatView { position: static; flex: 1; min-width: 0; transform: none !important; transition: none; display: flex; }
  /* branded empty state for the detail pane (chat prompt in chat area, logo elsewhere) */
  #app > #chatView:empty::after {
    content: '💬  یک گفتگو را انتخاب کنید';
    margin: auto; color: var(--text-2); font-size: 15px; opacity: .8;
  }
  #app:not(.area-chat) > #chatView:empty::after { content: 'WIX'; font-size: 46px; font-weight: 800; letter-spacing: 3px; color: color-mix(in srgb, var(--text-2) 32%, transparent); opacity: .5; }
  html[lang="en"] #app.area-chat > #chatView:empty::after { content: 'Select a chat 💬'; }
  #chatView .chat-head #chBack { display: none; }
}

/* ---------- auth ---------- */
/* AUTH-UI-01: scroll container + margin:auto card → centers when it fits,
   scrolls when it doesn't (submit button always reachable); safe-area aware */
.auth-wrap { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; padding: max(var(--sp-5), var(--sat)) var(--sp-4) max(var(--sp-6), var(--sab)); }
.auth-card { width: 100%; max-width: 380px; margin: auto; display: flex; flex-direction: column; }
.auth-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-form .field { margin-bottom: 0; gap: var(--sp-2); }
.auth-form .field input { padding: 13px var(--sp-4); font-size: var(--fs-md); transition: border-color .15s, box-shadow .15s; }
.auth-form .field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-form .field input.invalid { border-color: var(--danger); box-shadow: none; }
.field-err { color: var(--danger); font-size: var(--fs-sm); line-height: 1.5; max-height: 0; overflow: hidden; transition: max-height .15s; }
.field-err.show { max-height: 48px; }
.pw-wrap { position: relative; }
.pw-wrap .pw { padding-left: 46px; }
.pw-eye { position: absolute; left: var(--sp-2); top: 50%; transform: translateY(-50%); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-lg); color: var(--text-2); line-height: 1; }
.otp-row { display: flex; gap: var(--sp-2); }
.otp-row input { flex: 1; }
/* registration: country dial-code picker + local number */
.phone-row { display: flex; gap: var(--sp-2); }
.phone-row input { flex: 1; min-width: 0; }
/* higher specificity than `.field select { width:100% }` so it stays a compact chip */
.phone-row select.cc-select { flex: 0 0 128px; width: 128px; padding: 13px 8px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--panel); color: var(--text); font-family: inherit; font-size: var(--fs-sm); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.phone-row select.cc-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.phone-row input { flex: 1 1 auto; width: auto; }
.auth-submit { margin-top: var(--sp-3); position: relative; min-height: 54px; font-size: var(--fs-lg); font-weight: 700; letter-spacing: .3px; border-radius: var(--r-lg); box-shadow: 0 10px 24px -6px var(--accent-soft); }
.auth-submit:active { transform: translateY(1px); }
.auth-submit.loading .btn-label { visibility: hidden; }
.auth-submit.loading::after { content: ''; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,.45); border-top-color: var(--accent-contrast); border-radius: var(--r-pill); animation: authspin .6s linear infinite; }
@keyframes authspin { to { transform: rotate(360deg); } }
.auth-links { text-align: center; margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); }
.auth-links button { color: var(--accent); font-weight: 600; }
@media (max-height: 640px) {
  .auth-logo { width: 58px; height: 58px; font-size: 30px; margin-bottom: var(--sp-2); }
  .auth-wrap h1 { font-size: var(--fs-lg); }
  .auth-wrap .sub { margin-bottom: var(--sp-3); }
  .auth-form { gap: var(--sp-3); }
}
.auth-logo { width: 84px; height: 84px; border-radius: var(--r-xl); background: var(--accent); color: var(--accent-contrast); display: flex; align-items: center; justify-content: center; font-size: 40px; margin: 0 auto var(--sp-2); }
.auth-wrap h1 { text-align: center; font-size: var(--fs-2xl); margin-bottom: var(--sp-1); }
.auth-wrap .sub { text-align: center; color: var(--text-2); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }

/* ---------- standard form controls (design-system components) ---------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--sp-3); }
.field label { font-size: 12px; font-weight: 500; color: var(--text-2); padding-inline-start: 2px; }
.field input, .field textarea, .field select {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 11px 13px; outline: none; width: 100%; font-family: inherit; font-size: 14px; color: var(--text);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* masked password: a plain text input visually masked — avoids macOS secure-input
   issues in embedded webviews where type=password receives no keystrokes */
input.pw { -webkit-text-security: disc; font-family: -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: 1px; }
input.pw.show { -webkit-text-security: none; letter-spacing: normal; }
/* ---------- standard button (design-system component) ---------- */
.btn { background: var(--accent-grad); color: var(--accent-contrast); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-5); font-weight: 500; width: 100%; box-shadow: var(--glow); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur); }
.btn:active { transform: scale(.975); }
.btn:disabled { opacity: .6; box-shadow: none; }
.btn.ghost { background: var(--panel-2); color: var(--text); box-shadow: none; }
.btn.danger { background: var(--danger); box-shadow: none; }
.btn.small { width: auto; padding: 7px var(--sp-4); border-radius: var(--r-sm); font-size: var(--fs-sm); box-shadow: none; }
.auth-switch { text-align: center; font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--sp-2); }
.auth-switch button { color: var(--accent); font-weight: 500; }
.form-error { color: var(--danger); font-size: var(--fs-sm); text-align: center; min-height: 18px; }
.form-ok { color: var(--online); font-size: var(--fs-sm); text-align: center; }

/* ---------- main layout (GEN-02: chat list — design-system tokens) ---------- */
.view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.topbar { padding: var(--sp-3) var(--sp-4) var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); }
.topbar h2 { font-size: var(--fs-lg); font-weight: 700; flex: 1; }
.searchbox { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); display: flex; align-items: center; padding: 0 var(--sp-3); margin: 0 var(--sp-4) var(--sp-2); }
.searchbox input { background: none; border: none; outline: none; padding: var(--sp-2) var(--sp-2); flex: 1; font-size: var(--fs-base); }
.searchbox svg { opacity: .5; }

/* FEAT-07: 5 filter tabs → horizontally scrollable like Telegram (no wrap/overlap) */
.tabs { display: flex; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-2); margin-top: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { padding: var(--sp-1) var(--sp-4); border-radius: var(--r-pill); background: var(--panel-2); color: var(--text-2); font-size: var(--fs-sm); flex-shrink: 0; white-space: nowrap; }
.tabs button.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }

.list { flex: 1; overflow-y: auto; min-height: 0; padding-bottom: var(--sp-2); }
.list-section { padding: var(--sp-4) var(--sp-4) var(--sp-1); font-size: 12px; font-weight: 500; color: var(--text-2); }

.chat-item, .user-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); cursor: pointer; }
.chat-item:active, .user-item:active { background: var(--panel-2); }
.avatar { width: var(--av-md); height: var(--av-md); border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-lg); flex-shrink: 0; position: relative; overflow: visible; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* online dot sits ON the bottom-end corner, fully visible (not clipped) + prominent ring */
.avatar .dot { position: absolute; bottom: -1px; inset-inline-end: -1px; width: 14px; height: 14px; border-radius: 50%; background: var(--online); border: 2.5px solid var(--panel); box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.chat-head .avatar .dot { width: 16px; height: 16px; border-width: 3px; }
@media (prefers-reduced-motion: no-preference) { .avatar .dot { animation: presence 2.2s ease-in-out infinite; } }
.avatar.sm { width: var(--av-sm); height: var(--av-sm); font-size: var(--fs-md); }
.chat-item .meta { flex: 1; min-width: 0; }
.chat-item .row1 { display: flex; align-items: center; gap: var(--sp-1); }
.chat-item .name { font-weight: 500; font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.chat-item .time { font-size: var(--fs-xs); color: var(--text-2); flex-shrink: 0; }
.chat-item .row2 { display: flex; align-items: center; gap: var(--sp-1); margin-top: 2px; }
.chat-item .preview { font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
  unicode-bidi: plaintext; text-align: start; }  /* as .bubble .mtext: an English preview takes its own direction — «ok?» not «?ok», and a long one is cut at its end, not its start */
.badge { background: var(--accent); color: var(--accent-contrast); font-size: var(--fs-xs); min-width: 20px; height: 20px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; padding: 0 var(--sp-1); flex-shrink: 0; font-weight: 500; }
.pin-ico { color: var(--text-2); flex-shrink: 0; font-size: var(--fs-sm); }
.type-ico { font-size: var(--fs-sm); color: var(--text-2); }

.empty { text-align: center; color: var(--text-2); padding: var(--sp-8) var(--sp-6); font-size: var(--fs-base); }

/* ---------- bottom nav ---------- */
/* Floating glass dock (redesign) */
.bottomnav { display: flex; gap: 2px; margin: 0 12px calc(8px + var(--sab)); padding: 8px 8px; background: var(--dock-bg); border: 1px solid var(--dock-border); border-radius: var(--r-xl); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow); }
.bottomnav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; color: var(--text-2); font-size: 10.5px; transition: color var(--dur) var(--ease); }
.bottomnav .nav-ic { position: relative; width: 42px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.bottomnav button.active { color: var(--accent); }
.bottomnav button.active .nav-ic { background: var(--accent-grad); color: var(--accent-contrast); box-shadow: var(--glow); transform: translateY(-1px); }
.bottomnav button.active .nav-lb { font-weight: 500; }
.bottomnav button:active .nav-ic { transform: scale(.9); }
@media (prefers-reduced-motion: no-preference) {
  .bottomnav button.active .nav-ic { animation: nav-pop .42s var(--ease); }
  .bottomnav button.active .nav-lb { animation: nav-lb-in .42s var(--ease); }
}
@keyframes nav-pop { 0% { transform: translateY(-1px) scale(.8); } 55% { transform: translateY(-3px) scale(1.14); } 100% { transform: translateY(-1px) scale(1); } }
@keyframes nav-lb-in { 0% { opacity: .4; transform: translateY(2px); } 100% { opacity: 1; transform: none; } }
/* center HOME button — raised, bigger, always-prominent FAB */
.bottomnav { overflow: visible; }
.bottomnav button.home-fab { color: var(--accent); }
.bottomnav button.home-fab .nav-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-grad); color: #fff; box-shadow: var(--glow); transform: translateY(-16px); border: 4px solid var(--panel); }
.bottomnav button.home-fab .nav-ic svg { width: 26px; height: 26px; }
.bottomnav button.home-fab .nav-lb { margin-top: -12px; font-weight: 600; }
/* The raised home button only reads as deliberate when it sits in the true middle, which needs an
   odd number of items. When the admin hides a section the count goes even and the raised circle
   lands off-centre, looking like a layout bug — so it flattens into an ordinary highlighted item. */
.bottomnav.even button.home-fab .nav-ic { width: 42px; height: 42px; border-radius: var(--r-md); transform: none; }
.bottomnav.even button.home-fab .nav-ic svg { width: 22px; height: 22px; }
.bottomnav.even button.home-fab .nav-lb { margin-top: 0; }
.bottomnav button.home-fab:active .nav-ic { transform: translateY(-16px) scale(.92); }
@media (prefers-reduced-motion: no-preference) {
  .bottomnav button.home-fab.active .nav-ic { animation: fab-pop .45s var(--ease); }
}
@keyframes fab-pop { 0% { transform: translateY(-16px) scale(.85); } 55% { transform: translateY(-19px) scale(1.1); } 100% { transform: translateY(-16px) scale(1); } }
.bottomnav .navbadge { position: absolute; top: -2px; right: 2px; background: var(--danger); color: #fff; font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

/* ---------- chat screen ---------- */
/* ---------- chat view (GEN-03: header + bubbles — design-system tokens) ---------- */
#chatView { position: absolute; inset: 0; background: var(--bg); display: flex; flex-direction: column; z-index: 20; transform: translateX(-100%); transition: transform .22s ease; }
#chatView.open { transform: translateX(0); }
[data-theme="dark"] #chatView { background: var(--chat-bg); }   /* (was Telegram's #18222d: a blue-grey seam against the header and composer) */
.chat-head { display: flex; align-items: center; gap: var(--sp-2); padding: max(var(--sp-2), var(--sat)) var(--sp-3) var(--sp-2); background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; flex-shrink: 0; }
.chat-head .titles { flex: 1; min-width: 0; cursor: pointer; }
.chat-head .t-name { font-weight: 600; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .t-status { font-size: var(--fs-sm); color: var(--text-2); }
.chat-head .t-status.on { color: var(--accent); }
.icon-btn { width: 38px; height: 38px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; color: var(--text-2); flex-shrink: 0; }
.icon-btn:active { background: var(--panel-2); }

/* CHAT-07: pinned bar — 40px, 3px accent line, tap to cycle/jump, unpin button */
.pinbar { background: var(--panel); border-bottom: 1px solid var(--border); height: 40px; flex-shrink: 0; padding: 0 var(--sp-3); font-size: var(--fs-sm); display: flex; gap: var(--sp-2); align-items: center; }
.pinbar .pb-line { width: 3px; height: 26px; background: var(--accent); border-radius: var(--r-xs); flex-shrink: 0; }
.pinbar .pb-body { display: flex; flex-direction: column; justify-content: center; cursor: pointer; overflow: hidden; }
.pinbar .pb-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.pinbar .pb-title { color: var(--accent); font-weight: 600; font-size: var(--fs-xs); }
.pinbar .pb-list { flex-shrink: 0; color: var(--text-2); font-size: 18px; }
.pinbar .pb-unpin { flex-shrink: 0; color: var(--text-2); }
.pinbar .pb-body { flex: 1; min-width: 0; }

/* ACHAT-03: now-playing bar (voice/audio) */
#nowPlaying { display: flex; align-items: center; gap: 8px; padding: 7px 11px; background: var(--panel); border-bottom: 1px solid var(--border); flex-shrink: 0; animation: ds-fade .2s ease; }
#nowPlaying .np-toggle { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#nowPlaying .np-toggle svg { width: 15px; height: 15px; }
#nowPlaying .np-body { flex: 1; min-width: 0; cursor: pointer; }
#nowPlaying .np-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#nowPlaying .np-track { height: 3px; background: rgba(127,127,127,.3); border-radius: 2px; margin-top: 4px; }
#nowPlaying .np-fill { height: 100%; width: 0; background: var(--accent); border-radius: 2px; }
#nowPlaying .np-close { flex-shrink: 0; color: var(--text-2); }

/* ACHAT-04: selection mode */
#selectBar { position: absolute; top: 0; left: 0; right: 0; height: 56px; z-index: 8; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); animation: ds-fade .15s ease; }
#selectBar .sel-count { flex: 1; font-weight: 600; }
#selectBar .sel-acts { display: flex; gap: var(--sp-1); }
#chatView.selecting .msg { cursor: pointer; }
#chatView.selecting .msg.selected .bubble { box-shadow: 0 0 0 2px var(--accent); }
#chatView.selecting .msg.selected::after { content: '✓'; position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; }
#chatView.selecting .hover-acts { display: none !important; }

/* runs: no flat gap — 2px inside a run of one sender, 8px between runs (.grp-* in the chat bubbles section) */
#messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--sp-3) var(--chat-gutter, var(--sp-3)) var(--sp-2); display: flex; flex-direction: column; gap: 0; min-height: 0; }
.day-sep { align-self: center; color: var(--text-2); font-size: var(--fs-meta, var(--fs-xs)); font-weight: 600; margin: var(--sp-3) 0 var(--sp-1); line-height: 1; }
.day-sep > span { display: inline-block; padding: 5px var(--sp-3); border-radius: var(--r-chip, var(--r-pill)); background: color-mix(in srgb, var(--panel) 86%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.msg { max-width: 80%; display: flex; flex-direction: column; position: relative; }
.msg.me { align-self: flex-start; }   /* RTL: my messages on the right (inline start) like Telegram fa */
.msg.other { align-self: flex-end; }
.bubble { border-radius: var(--r-bubble, var(--r-lg)); padding: var(--bubble-pad-y, 6px) var(--bubble-pad-x, 10px); position: relative; word-break: break-word; box-shadow: var(--elev-1, 0 1px 1px rgba(0,0,0,.05)); font-size: var(--fs-msg, var(--fs-md)); line-height: 1.55; }
.bubble .mtext { white-space: pre-wrap; unicode-bidi: plaintext; text-align: start; }  /* plaintext bidi: each line flows by its own first strong char (fixes mixed FA/EN layouts) */
/* the tail is the bottom corner on the bubble's own side of the screen — mine always sit on the right */
.msg.me .bubble { background: var(--bubble-me); color: var(--bubble-me-text); border-bottom-right-radius: var(--r-bubble-sm, var(--r-xs)); }
.msg.other .bubble { background: var(--bubble-other); border-bottom-left-radius: var(--r-bubble-sm, var(--r-xs)); }
.msg .sender { font-size: var(--fs-sm); font-weight: 700; color: var(--nc, var(--accent)); margin-bottom: 2px; }
.msg .stamp { display: flex; align-items: center; gap: 3px; justify-content: flex-end; font-size: var(--fs-meta, var(--fs-xs)); line-height: 1; color: var(--text-2); margin-top: 3px; direction: ltr; white-space: nowrap; }
/* APP-01: ticks — drawn icons (I.tick / I.ticks): sent ✓ and delivered ✓✓ muted, READ in the theme's read colour */
.msg .ticks { display: inline-flex; align-items: center; color: var(--text-2); }
.msg .ticks svg { display: block; height: 11px; width: auto; }
.msg .ticks.st-sent svg { width: 14px; }
.msg .ticks.st-delivered svg, .msg .ticks.st-read svg { width: 18px; }
.msg .ticks.st-pending svg, .msg .ticks.st-failed svg { width: 13px; height: 13px; }
.msg.me .ticks { color: color-mix(in srgb, var(--bubble-me-text) 58%, transparent); }
.msg .ticks.st-read, .msg.me .ticks.st-read { color: var(--bubble-me-tick, var(--tick-read)); }
.msg .ticks.st-failed, .msg.me .ticks.st-failed { color: var(--danger); }
.msg .ticks.st-pending .ck-m { transform-box: view-box; transform-origin: 50% 50%; animation: ui-spin calc(var(--dur-spin, .9s) * 2) linear infinite; }
/* CHAT-03: quoted reply inside a bubble — accent bar on the leading (RTL right)
   edge, author in accent, snippet in secondary, tap to jump. Same look as the
   composer reply preview. */
.replyq { display: flex; align-items: center; gap: var(--sp-2); max-width: 100%; border-inline-start: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: var(--r-inset, var(--r-xs)); padding: 3px var(--sp-2); margin-bottom: var(--sp-1); font-size: var(--fs-sm); cursor: pointer; }
.replyq:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.replyq:active { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.replyq .rq-body { min-width: 0; flex: 1; }
.replyq .rq-thumb { width: 32px; height: 32px; border-radius: var(--r-inset, var(--r-xs)); object-fit: cover; flex-shrink: 0; background: var(--skel-base, rgba(127,127,127,.15)); }
.replyq .rq-name { color: var(--accent); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.replyq .rq-text { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* never wider than its bubble, never taller than a screenful (a phone screenshot was 530px of one bubble) */
.msg img.photo { max-width: min(320px, 64vw, 100%); max-height: 360px; border-radius: var(--r-md); margin: 2px 0; cursor: pointer; }
.msg video { max-width: min(320px, 64vw, 100%); max-height: 360px; border-radius: var(--r-md); }
.filebox { display: flex; align-items: center; gap: 10px; padding: 4px 2px; }
.filebox .f-ico { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.filebox .f-name { font-size: 13.5px; font-weight: 500; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filebox .f-size { font-size: 11.5px; color: var(--text-2); }
/* ---------- voice message bubble (Telegram-style) ---------- */
.voicebox { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 290px; padding: 4px 2px; position: relative; }
.voicebox .v-play { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.voicebox .v-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.voicebox .v-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.voicebox .v-time { font-size: 11.5px; color: var(--text-2); direction: ltr; font-variant-numeric: tabular-nums; }
.voicebox .v-speed { font-size: 10.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 10px; padding: 1px 8px; direction: ltr; flex-shrink: 0; }
.voicebox .v-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; align-self: flex-start; margin-top: 4px; }
.voicebox.heard .v-dot { visibility: hidden; }
.voicebox .v-track { width: 100%; height: 4px; background: rgba(127,127,127,.3); border-radius: 2px; position: relative; cursor: pointer; margin: 12px 0; }
.voicebox .v-fill { position: absolute; right: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 2px; width: 0; }
/* CHAT-04: reaction chips — full-radius pills, emoji + count, own = accent fill */
.reacts { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: 4px; }
.reacts .rx { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; padding: 2px 9px; cursor: pointer; animation: rx-in .18s ease; transition: transform .12s; }
.reacts .rx:hover { filter: brightness(.97); }
.reacts .rx:active { transform: scale(1.15); }
.reacts .rx.mine { background: var(--accent-fill, var(--accent)); color: var(--accent-contrast); }
@keyframes rx-in { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bubble.react-pop { animation: bub-pop .25s ease; }
@keyframes bub-pop { 35% { transform: scale(1.04); } }

/* CHAT-01: desktop hover affordance — a compact pill anchored to the bubble's
   top center-facing corner. It is a CHILD of the bubble (so hovering it keeps
   .bubble:hover) and overlaps the bubble top, so there is NO dead gap to cross →
   no flicker / no jumping. */
.hover-acts { display: none; position: absolute; top: -15px; gap: 1px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 2px 3px; box-shadow: var(--shadow); z-index: 4; }
.msg.me .bubble .hover-acts { left: 2px; }        /* center-facing corner (RTL: my bubble sits on the right) */
.msg.other .bubble .hover-acts { right: 2px; }    /* incoming sits on the left → pill on its right */
.hover-acts button { font-size: 14px; line-height: 1; padding: 4px 5px; border-radius: 50%; }
.hover-acts button:hover { background: var(--panel-2); }
@media (hover: hover) and (pointer: fine) {
  .bubble:hover .hover-acts { display: flex; }
}
.edited-tag { font-size: 10px; color: var(--text-2); }

/* KBD-02: scroll-to-bottom floats just ABOVE the composer (trailing/left side in RTL),
   anchored to the composer-wrap so it tracks composer height + keyboard, never overlaps
   the messages or the input; carries an unread-count badge. */
.scroll-down { position: absolute; bottom: 100%; left: 12px; margin-bottom: 10px; width: 44px; height: 44px; border-radius: 50%; background: var(--panel); color: var(--text-2); box-shadow: var(--shadow); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; z-index: 6; }
.scroll-down .sd-badge { position: absolute; top: -5px; left: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; direction: ltr; }

/* composer */
.composer-wrap { position: relative; background: var(--panel); border-top: 1px solid var(--border); padding-bottom: var(--sab); flex-shrink: 0; }
/* COMP-02: when the keyboard is open there is no home-indicator gap to reserve */
body.kb-open .composer-wrap { padding-bottom: 0; }
/* CHAT-03/05: reply / edit bar above the field — accent icon, a tappable quote (accent edge,
   thumbnail or type icon, name + snippet) that jumps to the message, and a 44px close. */
.reply-preview { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1-5) var(--sp-1) 0; font-size: var(--fs-sm); }
.reply-preview .rp-ico { color: var(--accent); flex-shrink: 0; display: grid; place-items: center; width: 36px; }
.reply-preview .rp-ico svg { width: var(--ic-sm); height: var(--ic-sm); }
.reply-preview .rp-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); padding: 2px var(--sp-2); text-align: start;
  border-inline-start: 3px solid var(--accent); border-radius: var(--r-inset); cursor: pointer; transition: background-color var(--dur-sm) var(--ease-out); }
.reply-preview .rp-body:active { background-color: var(--press-tint); }
.rp-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; }
.rp-name { color: var(--accent); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-text { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; text-align: start; }
.rp-thumb { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--r-xs); object-fit: cover; background: var(--panel-2); }
.rp-thumb-ic { display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); }
.rp-thumb-ic svg { width: var(--ic-sm); height: var(--ic-sm); }
.reply-preview .rp-x { color: var(--text-2); }
/* The composer row: ONE pill holding emoji · text · attach, and the round send / mic button beside
   it (four loose controls under 44px read as crowded). Pill and button share their bottom edge. */
.composer { position: relative; display: flex; align-items: flex-end; gap: var(--sp-1-5); padding: var(--sp-1-5) var(--sp-2); }
.composer-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-input); transition: border-color var(--dur-sm) var(--ease-out); }
.composer-field:focus-within { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.composer textarea {
  flex: 1; min-width: 0; min-height: 44px; max-height: 120px; margin: 0; padding: 10px 2px;
  background: transparent; border: 0; outline: none; resize: none; overflow-y: hidden;
  font-size: var(--fs-msg); line-height: 24px; color: var(--text);
  /* each line takes its own direction (no dir=auto: that flipped the WHOLE field, caret included, to
     LTR when it began with an English word — and put the empty field's placeholder on the wrong side) */
  unicode-bidi: plaintext; text-align: start;
}
.composer textarea::placeholder { color: var(--text-2); opacity: .8; }
#capInput, #sdText { unicode-bidi: plaintext; text-align: start; }   /* captions too: per-line direction */
@supports (-webkit-touch-callout: none) { .composer textarea { font-size: 16px; } }   /* iOS zooms into any field under 16px */
.cf-btn { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--text-2);
  transition: color var(--dur-sm) var(--ease-out), scale var(--dur-sm) var(--ease-spring); }
.cf-btn svg { width: var(--ic-lg); height: var(--ic-lg); }
.cf-btn:active { scale: var(--press-scale); transition-duration: var(--dur-xs); }
.cf-btn.active { color: var(--accent); }
.composer-wrap.editing #attachBtn { display: none; }   /* an edit changes words, it cannot add a file */
.send-btn { position: relative; width: 48px; height: 48px; margin-bottom: -2px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-fill); color: var(--accent-contrast); box-shadow: var(--elev-1);
  /* the button keeps the touch for the hold gesture: no pan, no text selection, no long-press menu */
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: scale var(--dur-sm) var(--ease-spring), background-color var(--dur-sm) var(--ease-out), color var(--dur-sm) var(--ease-out); }
.send-btn svg { width: var(--ic-lg); height: var(--ic-lg); pointer-events: none; }
.send-btn.pressing[data-mode="mic"] { scale: 1.12; }
.send-btn.pressing:not([data-mode="mic"]) { scale: var(--press-scale); transition-duration: var(--dur-xs); }
.cf-btn.swap > svg, .send-btn.swap > svg { animation: cf-swap var(--dur-sm) var(--ease-spring) backwards; }
@keyframes cf-swap { from { opacity: 0; scale: .5; } }
@keyframes pulse { 50% { transform: scale(1.12); } }
/* hint bubble above the button («hold to record…»): inverted colours, an arrow onto the button */
.rec-hint { position: absolute; bottom: calc(100% + 4px); inset-inline-end: var(--sp-2); z-index: var(--z-float); max-width: min(300px, calc(100% - 16px));
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--text); color: var(--panel); font-size: var(--fs-sm); line-height: 1.6;
  box-shadow: var(--elev-2); pointer-events: none; }
[dir="rtl"] .rec-hint { --fx-origin: 24px 100%; }
[dir="ltr"] .rec-hint { --fx-origin: calc(100% - 24px) 100%; }
.rec-hint::after { content: ""; position: absolute; top: 100%; inset-inline-end: 18px; border: 6px solid transparent; border-top-color: var(--text); }
/* read-only states in place of the composer: a channel's mute switch, a locked group, a blocked peer */
.composer-locked { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: var(--sp-1) var(--sp-3); }
.composer-locked .cl-btn { flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border-radius: var(--r-btn); color: var(--accent); font-weight: 600; font-size: var(--fs-base); transition: background-color var(--dur-sm) var(--ease-out); }
.composer-locked .cl-btn:active { background-color: var(--press-tint); }
.composer-locked .cl-btn:disabled { opacity: .5; }
.composer-locked .cl-btn svg { width: var(--ic-md); height: var(--ic-md); }
.composer-locked .cl-note { display: inline-flex; align-items: center; gap: var(--sp-1-5); color: var(--text-2); font-size: var(--fs-sm); text-align: center; }
.composer-locked .cl-note svg { width: var(--ic-sm); height: var(--ic-sm); flex-shrink: 0; }

/* ---- hold-to-record voice, in place: the row stays, the button under the finger grows red, the
   field becomes the recording strip, a lock pill floats above the button ---- */
body.recording { -webkit-user-select: none; user-select: none; }
body.recording .scroll-down { visibility: hidden; }   /* the ⌄ button sits where the lock pill rises */
.composer.recording .send-btn { scale: 1.42; z-index: 3; background: var(--danger-fill); color: var(--on-dark); }
/* it grows up and inward, never past the screen's bottom or side edge */
[dir="rtl"] .composer.recording .send-btn { transform-origin: 30% 85%; }
[dir="ltr"] .composer.recording .send-btn { transform-origin: 70% 85%; }
.composer.recording.locked .send-btn { scale: 1; background: var(--accent-fill); color: var(--accent-contrast); }
@media (prefers-reduced-motion: no-preference) {
  .composer.recording:not(.locked) .send-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
    background: var(--danger-fill); animation: rec-halo 1.4s var(--ease-out) infinite; }
}
@keyframes rec-halo { from { scale: 1; opacity: .4; } to { scale: 1.55; opacity: 0; } }
.rec-strip { position: absolute; inset: -1px; z-index: 2; display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-input);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; animation: ui-fade-in var(--dur-sm) var(--ease-out) backwards; }
.rs-dot { width: 10px; height: 10px; flex-shrink: 0; margin-inline-start: var(--sp-1); border-radius: 50%; background: var(--danger-fill); }
@media (prefers-reduced-motion: no-preference) { .rs-dot { animation: rs-blink 1.2s var(--ease-in-out) infinite; } }
@keyframes rs-blink { 50% { opacity: .25; } }
.composer.paused .rs-dot { display: none; }
.rs-time { flex-shrink: 0; min-width: 38px; font-size: var(--fs-base); color: var(--text); }
.rs-cancel { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 2px;
  color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; }
.rs-cancel svg { width: var(--ic-sm); height: var(--ic-sm); flex-shrink: 0; }
html[dir="ltr"] .rs-cancel svg { scale: -1 1; }
@media (prefers-reduced-motion: no-preference) { .rs-cancel svg { animation: rs-nudge 1.4s var(--ease-in-out) infinite; } }
@keyframes rs-nudge { 50% { translate: calc(var(--dir-x) * -3px) 0; } }   /* toward the inline start: where the slide cancels */
.composer.locked .rec-strip { gap: var(--sp-1); padding: 0 2px; }
.rs-btn { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--text-2);
  transition: scale var(--dur-sm) var(--ease-spring); }
.rs-btn:active { scale: var(--press-scale); transition-duration: var(--dur-xs); }
.rs-btn[hidden] { display: none; }
.rs-btn svg { width: var(--ic-md); height: var(--ic-md); }
.rs-del { color: var(--danger); }
.rs-play, .rs-pause { color: var(--accent); }
.rs-play svg, .rs-pause svg { width: var(--ic-sm); height: var(--ic-sm); }
.rs-wave { flex: 1; min-width: 0; height: 24px; display: flex; align-items: center; justify-content: flex-end; gap: 2px; overflow: hidden; direction: ltr; }
.rs-wave i { width: 3px; min-height: 3px; flex-shrink: 0; border-radius: 2px; background: var(--accent); }
.composer.paused .rs-wave i { background: var(--text-2); opacity: .6; }
.rec-lockpill { position: absolute; bottom: calc(100% + 18px); inset-inline-end: var(--sp-2); z-index: var(--z-float);
  width: 48px; padding: 10px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-pill); box-shadow: var(--elev-2);
  color: var(--text-2); color: color-mix(in srgb, var(--accent) calc(var(--lock-p, 0) * 100%), var(--text-2));
  translate: 0 calc(var(--lock-p, 0) * -14px); }
.rec-lockpill .rl-lock svg { display: block; width: 20px; height: 20px; }
.rec-lockpill .rl-up { display: flex; }
.rec-lockpill .rl-up svg { display: block; width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) { .rec-lockpill .rl-up { animation: rl-bounce 1.4s var(--ease-in-out) infinite; } }
.upload-bar { height: 3px; background: var(--accent); width: 0; transition: width .15s; }

/* emoji + sticker picker (COMP-03/05) — fixed-height flex: tab bar + scroll body */
/* No safe-area padding here: .emoji-panel is a CHILD of .composer-wrap, which already reserves
   var(--sab). Having both reserved ~34px twice whenever the picker was open.
   (The old `body.kb-open .emoji-panel{padding-bottom:0}` never fired anyway — openPicker()
   blurs the input first, so kb-open is false exactly when the panel is visible.) */
/* As tall as the keyboard was (--kb-h, measured in setupKeyboardInset), so switching keyboard ⇄ panel
   does not make the chat jump; never more than about half the screen. */
.emoji-panel { background: var(--panel); border-top: 1px solid var(--border); height: 300px; height: clamp(240px, var(--kb-h, 300px), 52dvh); display: flex; flex-direction: column; flex-shrink: 0; }
/* the search field raises the keyboard: then only the field and one row of results */
.emoji-panel.searching { height: auto; }
.emoji-panel.searching .ep-tabs { display: none; }
.emoji-panel.searching .ep-body { flex: none; max-height: 104px; }
/* no stickers or GIFs while an edit is open: they would go out as new messages */
.composer-wrap.editing .ep-tab[data-tab="stickers"], .composer-wrap.editing .ep-tab[data-tab="gifs"],
.composer-wrap.editing #sec-stickers, .composer-wrap.editing #sec-gifs { display: none; }
.ep-tabs { display: flex; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.ep-tabs::-webkit-scrollbar { display: none; }
.ep-tab { font-size: 19px; padding: 6px 9px; border-radius: 8px; flex-shrink: 0; opacity: .7; line-height: 1; }
.ep-tab:active, .ep-tab.active { background: var(--panel-2); opacity: 1; }
.ep-tab.active { box-shadow: inset 0 -2px var(--accent); }
.ep-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 6px 6px; }
.ep-h { font-size: 11.5px; color: var(--text-2); padding: 8px 4px 4px; position: sticky; top: 0; background: var(--panel); z-index: 1; }
.ep-grid { display: grid; grid-template-columns: repeat(8, 1fr); }
.ep-grid.stickers { grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ep-e { font-size: 25px; padding: 3px 0; border-radius: 8px; line-height: 1.25; background: none; }
.ep-e:active { background: var(--panel-2); }
.ep-st { padding: 4px; border-radius: 8px; background: none; }
.ep-st img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }

/* context menu */
/* ---------- context menu (GEN-05: design-system tokens) ---------- */
#ctxOverlay { position: fixed; inset: 0; z-index: 50; background: var(--overlay); display: flex; align-items: center; justify-content: center; animation: ds-fade .15s ease; }
/* CHAT-02: when opened from a message the menu is ANCHORED near the trigger */
#ctxOverlay.anchored { display: block; background: transparent; }
#ctxOverlay.anchored .ctx { position: absolute; }
.ctx { background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--shadow); min-width: 232px; max-width: calc(100vw - 2 * var(--sp-5)); overflow: hidden; animation: ds-pop .16s ease; }
/* CHAT-04: Telegram quick-reaction row across the top of the menu */
.ctx .rxrow { display: flex; gap: 2px; padding: var(--sp-2) var(--sp-2) var(--sp-1); justify-content: space-between; border-bottom: 1px solid var(--border); }
.ctx .rxrow button { font-size: var(--fs-2xl); padding: var(--sp-1) var(--sp-1); border-radius: var(--r-sm); transition: transform .1s ease; }
.ctx .rxrow button:hover { background: var(--panel-2); }
.ctx .rxrow button:active { transform: scale(1.25); }
.ctx .rxrow button.mine { background: var(--accent-soft); }
.ctx .item { display: flex; width: 100%; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-base); border-top: 1px solid var(--border); }
.ctx .rxrow + .item { border-top: none; }   /* avoid a double divider under the reaction row */
.ctx .item:hover { background: var(--panel-2); }
.ctx .item:active { background: var(--panel-2); }
.ctx .item.danger { color: var(--danger); }

/* ---------- sheets / modals (GEN-05) ---------- */
.sheet-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 60; display: flex; align-items: flex-end; justify-content: center; animation: ds-fade .18s ease; }
.sheet { background: var(--panel); width: 100%; max-width: 560px; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + var(--sab)); max-height: 86dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; animation: ds-sheet-up .26s cubic-bezier(.2,.8,.2,1); }
.sheet h3 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-4); }
.sheet .grab { width: 40px; height: 4px; border-radius: var(--r-xs); background: var(--border); margin: calc(-1 * var(--sp-2)) auto var(--sp-3); }
@keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ds-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

.media-prev { display: flex; justify-content: center; position: relative; }
.media-prev img, .media-prev video { max-width: 100%; max-height: 48dvh; border-radius: var(--r-lg); object-fit: contain; }
/* STORY-08: circular upload progress ring (Instagram/Telegram-style) */
.up-ring { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); border-radius: var(--r-lg); }
.up-ring svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.up-ring svg circle { fill: none; stroke-width: 6; }
.up-ring .ur-bg { stroke: rgba(255,255,255,.25); }
.up-ring .ur-fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 276.46; stroke-dashoffset: 276.46; transition: stroke-dashoffset .2s linear; }
.up-ring .ur-pct { position: absolute; color: #fff; font-size: 16px; font-weight: 700; direction: ltr; }

.profile-head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-5) 0 var(--sp-2); }
.profile-head .avatar { width: var(--av-lg); height: var(--av-lg); font-size: 34px; }
.profile-head .p-name { font-weight: 700; font-size: var(--fs-xl); }
.profile-head .p-user { color: var(--text-2); font-size: var(--fs-sm); direction: ltr; }
.menu-list { padding: var(--sp-1) 0; }
.menu-row { display: flex; width: 100%; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); font-size: var(--fs-base); text-align: right; color: var(--text); }
.menu-row:active { background: var(--panel-2); }
.menu-row .mr-ico { width: 24px; text-align: center; color: var(--text-2); }
.menu-row .mr-label { flex: 1; }
.menu-row .mr-val { color: var(--text-2); font-size: var(--fs-sm); }
.switch { width: 42px; height: 24px; border-radius: var(--r-pill); background: var(--border); position: relative; transition: .2s; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--accent-contrast); transition: .2s; }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(-18px); }

/* ---------- admin (GEN-05/06 + ADMIN-01/02/03 fixes) ---------- */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); padding: var(--sp-1) var(--sp-4) var(--sp-3); }
.stat { background: var(--panel-2); border-radius: var(--r-lg); padding: var(--sp-4); text-align: center; min-width: 0; }
.stat .s-num { font-size: var(--fs-2xl); font-weight: 700; color: var(--accent); }
.stat .s-label { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
/* ADMIN-01: action buttons wrap instead of overflowing and breaking the layout */
.admin-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-3); }
.admin-user { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); }
.admin-user .au-meta { flex: 1; min-width: 0; }   /* ADMIN-02: allow children to clamp */
.admin-user .au-name { font-size: var(--fs-base); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-user .au-sub { font-size: var(--fs-sm); color: var(--text-2); direction: ltr; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------- chips / badges (GEN-06: --chip-* tokens, both themes) ---------- */
.chip { font-size: var(--fs-xs); padding: 2px var(--sp-2); border-radius: var(--r-pill); background: var(--panel-2); color: var(--text-2); flex-shrink: 0; white-space: nowrap; }  /* ADMIN-03: never detaches/wraps from its row */
.chip.pending { background: var(--chip-warn-bg); color: var(--chip-warn-text); }
.chip.banned { background: var(--chip-danger-bg); color: var(--chip-danger-text); }
.chip.active { background: var(--chip-ok-bg); color: var(--chip-ok-text); }

.toast { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); background: rgba(20,20,25,.92); color: var(--on-dark); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); z-index: 100; max-width: 86%; text-align: center; box-shadow: var(--shadow); backdrop-filter: blur(10px); animation: ds-toast-in .26s var(--ease); }
@keyframes ds-toast-in { 0% { transform: translate(-50%, 16px) scale(.92); opacity: 0; } 60% { transform: translate(-50%, -3px) scale(1.03); } 100% { transform: translate(-50%, 0) scale(1); opacity: 1; } }
.toast.out { animation: ds-toast-out .26s var(--ease) forwards; }
@keyframes ds-toast-out { to { transform: translate(-50%, 10px) scale(.96); opacity: 0; } }
/* success toast — prominent accent pill with an animated check */
.toast.ok { display: flex; align-items: center; gap: 9px; background: linear-gradient(135deg, #2FBF71, #38D17A); color: #fff; font-weight: 600; font-size: 13.5px; box-shadow: 0 10px 26px rgba(47,191,113,.4); padding: 12px 20px; }
.toast.ok .t-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.25); font-size: 13px; animation: toast-check .4s var(--ease) .08s both; }
@keyframes toast-check { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

.typing-dots::after { content: '…'; animation: dots 1.2s infinite; }
@keyframes dots { 0% { content: '.'; } 33% { content: '..'; } 66% { content: '...'; } }

/* ---------- stories ---------- */
/* ---------- stories rail (Instagram-style) ---------- */
/* STORY-16: deterministic height + clipped vertical overflow so story labels can
   never spill under the filter tabs (the old max-height:96 was ~3px too short). */
.stories-bar { display: flex; align-items: flex-start; gap: 14px; padding: 8px 16px 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; box-sizing: border-box; height: 102px; transition: height .26s ease, opacity .22s ease, padding .26s ease; }
/* STORY-15: smoothly tucks away as the chat list scrolls up, reveals on scroll to top */
.stories-bar:empty { height: 0; padding: 0; }
.tabs.hide { display: none; }
.chats-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 28px; text-align: center; }
.chats-empty .ce-ic { width: 62px; height: 62px; border-radius: 20px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.chats-empty .ce-ic svg { width: 28px; height: 28px; }
.chats-empty .ce-t { font-size: 15.5px; font-weight: 700; }
.chats-empty .ce-s { font-size: 12.5px; color: var(--text-2); line-height: 1.9; max-width: 300px; }
.chats-empty .btn { margin-top: 6px; width: auto; padding-inline: 22px; }
.stories-bar.collapsed { height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; }
.stories-bar::-webkit-scrollbar { display: none; }
.story-pill { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; flex-shrink: 0; width: 66px; }
.story-pill .ring { width: 62px; height: 62px; border-radius: 50%; padding: 2.5px; background: var(--border); position: relative; }
.story-pill.unseen .ring { background: var(--story-grad); }   /* unseen = colorful gradient */
.story-pill .ring .avatar { width: 100%; height: 100%; border: 2px solid var(--panel); font-size: 22px; }
.story-pill .sp-name { font-size: 11.5px; color: var(--text-2); max-width: 66px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-pill.mine .sp-name { color: var(--text); }
.story-pill .add-badge { position: absolute; right: -1px; bottom: -1px; width: 21px; height: 21px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; border: 2px solid var(--panel); }

/* ---------- STORY-10: text-on-photo editor ---------- */
.st-stage { position: relative; display: flex; justify-content: center; background: #000; border-radius: var(--r-lg); overflow: hidden; }
.st-stage img { max-width: 100%; max-height: 46dvh; object-fit: contain; }
.st-overlay { position: absolute; transform: translate(-50%, -50%); font-weight: 700; text-align: center; max-width: 90%; word-break: break-word; line-height: 1.4; cursor: move; touch-action: none; text-shadow: 0 1px 6px rgba(0,0,0,.45); padding: 2px 6px; }
.st-txt-in { width: 100%; margin-top: 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 12px; color: var(--text); outline: none; }
.st-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.st-colors, .st-sizes { display: flex; gap: 6px; }
.st-colors button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); }
.st-colors button.on { border-color: var(--accent); transform: scale(1.12); }
.st-sizes button { width: 30px; height: 30px; border-radius: 50%; background: var(--panel-2); color: var(--text-2); font-weight: 700; }
.st-sizes button.on { background: var(--accent); color: #fff; }

/* ---------- story viewer (Instagram-style) ---------- */
/* chrome positioned LTR so author sits top-left & X top-right regardless of RTL */
#storyViewer { position: fixed; inset: 0; background: #000; z-index: 90; display: flex; flex-direction: column; direction: ltr; user-select: none; -webkit-user-select: none; touch-action: none; }
#storyViewer .sv-chrome { transition: opacity .2s ease; }
#storyViewer.paused .sv-chrome { opacity: 0; pointer-events: none; }
#storyViewer .sv-progress { display: flex; gap: 4px; padding: calc(8px + var(--sat)) 10px 6px; }
#storyViewer .sv-progress span { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; position: relative; }
#storyViewer .sv-progress span i { position: absolute; inset: 0; width: 0; background: #fff; display: block; border-radius: 2px; }
#storyViewer .sv-head { display: flex; align-items: center; gap: 10px; padding: 4px 14px 10px; color: #fff; }
#storyViewer .sv-head .avatar.sm { width: 34px; height: 34px; border: 1.5px solid rgba(255,255,255,.5); }
#storyViewer .sv-head .sv-meta { flex: 1; min-width: 0; }
#storyViewer .sv-head .sv-uname { font-size: 14px; font-weight: 600; }
#storyViewer .sv-head .sv-time { font-size: 11.5px; opacity: .75; }
#storyViewer .sv-icon { color: #fff; font-size: 21px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#storyViewer .sv-media { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; position: relative; overflow: hidden; }
#storyViewer .sv-media img, #storyViewer .sv-media video { max-width: 100%; max-height: 100%; object-fit: contain; }
#storyViewer .sv-media > img, #storyViewer .sv-media > video, #storyViewer .sv-text { animation: sv-in .25s ease; }
@keyframes sv-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
#storyViewer .sv-caption { color: #fff; text-align: center; padding: 10px 18px; font-size: 14px; background: linear-gradient(to top, rgba(0,0,0,.55), transparent); }
#storyViewer .sv-bottom { display: flex; flex-direction: column; gap: 10px; padding: 8px 12px calc(14px + var(--sab)); }
#storyViewer .sv-reacts { display: flex; gap: 4px; justify-content: center; }
#storyViewer .sv-reacts button { font-size: 27px; padding: 3px 6px; transition: transform .12s ease; }
#storyViewer .sv-reacts button:active { transform: scale(1.45); }
#storyViewer .sv-reacts button.on { transform: scale(1.25); }
#storyViewer .sv-replybar { display: flex; align-items: center; gap: 10px; }
#storyViewer .sv-replybar input { flex: 1; min-width: 0; background: transparent; border: 1.5px solid rgba(255,255,255,.55); border-radius: 999px; padding: 11px 16px; color: #fff; outline: none; font-size: 14px; }
#storyViewer .sv-replybar input::placeholder { color: rgba(255,255,255,.7); }
#storyViewer .sv-heart-btn { font-size: 26px; color: #fff; flex-shrink: 0; transition: transform .12s; background: none; }
#storyViewer .sv-heart-btn:active { transform: scale(1.35); }
#storyViewer .sv-send { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; flex-shrink: 0; font-size: 16px; }
#storyViewer .sv-seen { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 13.5px; opacity: .95; padding: 6px 4px; align-self: flex-start; background: none; }
/* double-tap heart burst */
#storyViewer .sv-burst { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0); font-size: 96px; pointer-events: none; opacity: 0; filter: drop-shadow(0 4px 12px rgba(0,0,0,.45)); }
#storyViewer .sv-burst.go { animation: sv-burst .8s ease forwards; }
@keyframes sv-burst { 0%{transform:translate(-50%,-50%) scale(0);opacity:0} 18%{transform:translate(-50%,-50%) scale(1.25);opacity:1} 42%{transform:translate(-50%,-50%) scale(1);opacity:1} 100%{transform:translate(-50%,-62%) scale(1);opacity:0} }
/* in-viewer seen-by sheet (slides up, above the media) */
#storyViewer .sv-seen-backdrop { position: absolute; inset: 0; z-index: 6; background: rgba(0,0,0,.45); animation: ds-fade .2s ease; }
#storyViewer .sv-seen-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; max-height: 72%; overflow-y: auto; background: var(--panel); color: var(--text); border-radius: 18px 18px 0 0; padding: 8px 16px calc(16px + var(--sab)); direction: rtl; animation: sv-sheet-up .26s ease; }
@keyframes sv-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
#storyViewer .ss-grab { width: 36px; height: 4px; border-radius: 2px; background: var(--border); margin: 4px auto 12px; }
#storyViewer .ss-title { font-weight: 600; font-size: 15px; margin-bottom: 10px; }

/* ---------- polls ---------- */
.poll { min-width: 220px; }
.poll .p-q { font-weight: 600; margin-bottom: 6px; }
.poll .p-opt { position: relative; border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; margin: 5px 0; cursor: pointer; overflow: hidden; font-size: 13.5px; }
.poll .p-opt .p-bar { position: absolute; inset: 0; background: var(--accent); opacity: .16; width: 0; transition: width .25s; }
.poll .p-opt.mine { border-color: var(--accent); }
.poll .p-opt .p-row { position: relative; display: flex; justify-content: space-between; gap: 8px; }
.poll .p-total { font-size: 11.5px; color: var(--text-2); margin-top: 4px; }

.bubble.sticker { background: none !important; box-shadow: none; padding: 2px; }

/* ---------- calls ---------- */
/* CALL-03: Telegram-style call screen (voice + video) */
/* ---- CALL UI (premium redesign): aurora backdrop, double ripple ring, glass controls ---- */
#callUI { position: fixed; inset: 0; z-index: 95; color: #fff; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
/* only the first mount enters (renderCallUI adds .enter) — a re-render is not a new screen */
#callUI.enter { animation: call-in .35s cubic-bezier(.2,.9,.3,1); }
@keyframes call-in { from { opacity: 0; transform: scale(1.05); } }
#callUI .call-bg { position: absolute; inset: 0; z-index: 0; }
#callUI.voice-only .call-bg, #callUI.video:not(.rv) .call-bg {
  background:
    radial-gradient(95% 65% at 50% 0%, #453e8f 0%, transparent 62%),
    radial-gradient(85% 60% at 12% 92%, #14425f 0%, transparent 62%),
    linear-gradient(180deg, #191b2e 0%, #0e101c 100%);
}
/* two soft color blobs drifting slowly behind everything (GPU-cheap aurora) */
#callUI.voice-only .call-bg::before, #callUI.voice-only .call-bg::after,
#callUI.video:not(.rv) .call-bg::before, #callUI.video:not(.rv) .call-bg::after {
  content: ''; position: absolute; width: 58vmax; height: 58vmax; border-radius: 50%;
  filter: blur(64px); opacity: .38; pointer-events: none;
}
#callUI .call-bg::before { background: radial-gradient(circle, #7C6CF0, transparent 62%); top: -22vmax; left: -12vmax; animation: cbg-drift1 14s ease-in-out infinite alternate; }
#callUI .call-bg::after { background: radial-gradient(circle, #2dd4bf, transparent 62%); bottom: -26vmax; right: -14vmax; animation: cbg-drift2 18s ease-in-out infinite alternate; }
@keyframes cbg-drift1 { to { transform: translate(11vmax, 8vmax) scale(1.18); } }
@keyframes cbg-drift2 { to { transform: translate(-9vmax, -7vmax) scale(1.12); } }
#callUI.video.rv .call-bg { background: #000; }
#callUI #remoteMedia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; background: #000; }
#callUI.video::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, transparent 24% 68%, rgba(0,0,0,.6) 100%); }
#callUI .call-min { position: absolute; top: calc(12px + var(--sat)); right: 14px; z-index: 6;
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); color: #fff; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#callUI .call-min svg { width: 22px; height: 22px; }
#callUI .call-info { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 13px; text-align: center; padding: 0 20px; }
#callUI.enter .call-info { animation: call-fade .55s ease both; }
@keyframes call-fade { from { opacity: 0; transform: translateY(10px); } }
#callUI.voice-only .call-info { margin: auto; }
#callUI.video .call-info { margin-top: calc(54px + var(--sat)); text-shadow: 0 1px 8px rgba(0,0,0,.7); }
#callUI .call-avatar { width: 132px; height: 132px; font-size: 50px; box-shadow: 0 16px 50px rgba(0,0,0,.5); border: 3px solid rgba(255,255,255,.22); }
#callUI.video.rv .call-avatar { display: none; }
#callUI .call-name { font-size: 26px; font-weight: 800; letter-spacing: .2px; }
#callUI .call-status { font-size: 15px; color: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; gap: 8px; }
#callUI #callTimer { direction: ltr; unicode-bidi: isolate; }
#callUI #callStatusText { font-variant-numeric: tabular-nums; }
/* ringing → the status line breathes */
#callUI .call-avatar.pulse ~ .call-status #callStatusText { animation: st-breathe 1.8s ease-in-out infinite; }
@keyframes st-breathe { 50% { opacity: .55; } }
/* CALL-11: connection-quality signal bars */
#callUI .call-signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
#callUI .call-signal i { width: 3px; border-radius: 1px; background: rgba(255,255,255,.3); transition: background .3s; }
#callUI .call-signal i.on { background: #fff; }
/* CALL-13: ringing — DOUBLE ripple (inner white + outer accent) like Telegram */
#callUI .call-avatar.pulse { animation: call-pulse 1.7s cubic-bezier(.3,.7,.4,1) infinite; }
@keyframes call-pulse {
  0%   { box-shadow: 0 16px 50px rgba(0,0,0,.5), 0 0 0 0 rgba(255,255,255,.35), 0 0 0 0 rgba(124,108,240,.45); }
  70%  { box-shadow: 0 16px 50px rgba(0,0,0,.5), 0 0 0 20px rgba(255,255,255,0), 0 0 0 38px rgba(124,108,240,0); }
  100% { box-shadow: 0 16px 50px rgba(0,0,0,.5), 0 0 0 20px rgba(255,255,255,0), 0 0 0 38px rgba(124,108,240,0); }
}
#callUI #localMedia { position: absolute; bottom: calc(156px + var(--sab)); right: 14px; width: 106px; height: 154px;
  object-fit: cover; border-radius: 18px; border: 2px solid rgba(255,255,255,.5); z-index: 5; background: #000; box-shadow: 0 10px 28px rgba(0,0,0,.55); transform: scaleX(-1); cursor: pointer; transition: width .2s, height .2s; }
/* CALL-10: swapped — self-view goes full-bleed, remote becomes the small corner */
#callUI.swapped #remoteMedia { position: absolute; top: auto; right: 14px; left: auto; bottom: calc(156px + var(--sab)); width: 106px; height: 154px; border-radius: 18px; border: 2px solid rgba(255,255,255,.5); z-index: 5; box-shadow: 0 10px 28px rgba(0,0,0,.55); cursor: pointer; }
#callUI.swapped #localMedia { position: absolute; inset: 0; top: 0; right: 0; width: 100%; height: 100%; border: none; border-radius: 0; box-shadow: none; z-index: 0; }
/* The front camera is mirrored because people expect their own reflection; the REAR camera shows
   a real scene and mirroring it makes signs and text unreadable. The JS toggles .rear on flip —
   the class it used to toggle («mirror») had no rule at all, so nothing ever changed. */
#callUI #localMedia.rear { transform: none; }
#callUI .call-controls { position: relative; z-index: 4; margin-top: auto; display: flex; justify-content: center; gap: 16px;
  padding: 22px 18px calc(30px + var(--sab)); }
#callUI.enter .call-controls { animation: call-rise .5s cubic-bezier(.2,.9,.3,1) both; }
@keyframes call-rise { from { opacity: 0; transform: translateY(28px); } }
/* incoming screen: spread decline ⟷ accept apart like the OS phone UI */
#callUI.incoming .call-controls { gap: 72px; }
#callUI .cbtn-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#callUI .cbtn-wrap span { font-size: 11.5px; color: rgba(255,255,255,.8); }
#callUI .cbtn { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16); color: #fff;
  display: flex; align-items: center; justify-content: center; transition: background .15s, transform .12s; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
#callUI .cbtn:active { transform: scale(.86); }
#callUI .cbtn svg { width: 26px; height: 26px; }
#callUI .cbtn.on { background: #fff; border-color: #fff; color: #1c2733; }   /* active (muted / cam-off / speaker-on) */
#callUI .cbtn.end { background: linear-gradient(150deg, #ff5b6e, #dd2f44); border-color: transparent; box-shadow: 0 12px 28px -8px rgba(221,47,68,.65); }
#callUI .cbtn.accept { background: linear-gradient(150deg, #3ee08a, #16a34a); border-color: transparent; box-shadow: 0 12px 28px -8px rgba(22,163,74,.65); animation: call-pulse-btn 1.4s ease-out infinite; }
@keyframes call-pulse-btn { 0% { box-shadow: 0 12px 28px -8px rgba(22,163,74,.65), 0 0 0 0 rgba(34,197,94,.5); } 70% { box-shadow: 0 12px 28px -8px rgba(22,163,74,.65), 0 0 0 18px rgba(34,197,94,0); } 100% { box-shadow: 0 12px 28px -8px rgba(22,163,74,.65), 0 0 0 0 rgba(34,197,94,0); } }

/* CALL-09: floating draggable call PiP (shown when you leave the chat mid-call) */
/* add-a-person button (top-left, mirrors the minimise button) — only once the call is live */
#callUI .call-add { position: absolute; top: calc(12px + var(--sat)); left: 14px; z-index: 6; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16); color: #fff; display: none; align-items: center; justify-content: center; }
#callUI.live .call-add { display: flex; }
#callUI .call-add svg { width: 22px; height: 22px; }
#callUI .call-add:active { transform: scale(.9); }
#callUI .call-sub { font-size: 13.5px; color: rgba(255,255,255,.82); max-width: 300px; line-height: 1.6; }
#callUI .call-note { font-size: 12.5px; color: #ffd166; min-height: 1.2em; }
#callUI .call-note.tap { cursor: pointer; min-height: 36px; padding: 6px 14px; border-radius: var(--r-pill); background: rgba(255,209,102,.16); border: 1px solid rgba(255,209,102,.32); display: inline-flex; align-items: center; justify-content: center; }
#callUI .call-note.tap:active { scale: var(--press-scale-soft); }
/* group call: a grid of people */
#callUI.group .call-ghead { position: relative; z-index: 2; margin-top: calc(14px + var(--sat)); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 0 64px; }
#callUI.group .call-gtitle { font-size: 18px; font-weight: 800; }
#callUI.group .call-grid { position: relative; z-index: 2; flex: 1; width: 100%; min-height: 0; display: grid; gap: 8px; padding: 12px 12px 0;
  grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); }
#callUI.group .call-grid.n1, #callUI.group .call-grid.n2 { grid-template-columns: 1fr; }
#callUI.group .call-grid.n3 > :first-child { grid-column: 1 / -1; }
#callUI .ctile { position: relative; min-height: 0; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; transition: outline-color .2s; }
#callUI .ctile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #000; }
#callUI .ctile audio { display: none; }
#callUI .ctile.has-video video { display: block; }
#callUI .ctile.has-video .ct-av { display: none; }
#callUI .ctile .ct-av { width: 72px; height: 72px; font-size: 28px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
#callUI .ctile .ct-name { position: relative; z-index: 1; font-size: 14px; font-weight: 700; display: flex; gap: 4px; align-items: center; max-width: 92%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
#callUI .ctile.has-video .ct-name { position: absolute; bottom: 8px; right: 10px; }
#callUI .ctile .ct-mic svg { width: 14px; height: 14px; color: #ff8a8a; }
#callUI .ctile .ct-st { position: relative; z-index: 1; font-size: 12px; color: rgba(255,255,255,.75); min-height: 1em; }
#callUI .ctile.has-video .ct-st { position: absolute; top: 8px; right: 10px; }
#callUI .ctile.ringing .ct-av { animation: call-pulse 1.7s cubic-bezier(.3,.7,.4,1) infinite; }
#callUI .ctile.ringing, #callUI .ctile.wait { opacity: .78; }
#callUI .ctile.weak { outline: 2px solid #ffd166; outline-offset: -2px; }
#callUI.group #localMedia { top: auto; bottom: calc(132px + var(--sab)); right: 18px; width: 92px; height: 132px; }
#callUI.group .call-controls { padding-top: 14px; }
/* the people picker opens ABOVE the call screen (a normal sheet would sit underneath it) */
.call-add-ov { position: fixed; inset: 0; z-index: 98; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; animation: ds-fade .18s ease; }
.call-add-ov .cao-sheet { width: 100%; max-width: 560px; max-height: 78dvh; background: var(--panel); color: var(--text); display: flex; flex-direction: column; gap: 10px;
  border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 16px 16px calc(16px + var(--sab)); animation: ds-sheet-up .26s cubic-bezier(.2,.8,.2,1); }
.call-add-ov .cao-head { display: flex; align-items: center; justify-content: space-between; font-size: 16px; }
.call-add-ov .cao-x { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-soft, rgba(127,127,127,.12)); color: inherit; font-size: 15px; }
.call-add-ov .cao-q { width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: inherit; font: inherit; }
.call-add-ov .cao-list { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 120px; }
.call-add-ov .user-item { cursor: pointer; border-radius: 12px; }
.call-add-ov .user-item:active { background: rgba(127,127,127,.12); }
#callPip { position: fixed; bottom: calc(80px + var(--sab)); right: 14px; z-index: 96; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,.45); cursor: pointer; touch-action: none; background: var(--panel); color: var(--on-dark); }
#callPip.video { width: 120px; height: 168px; background: #000; }
#callPip.video #pipVid { width: 100%; height: 100%; object-fit: cover; }
#callPip.voice { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; background: radial-gradient(120% 120% at 30% 20%, #3a6ea5, #244463); min-width: 180px; }
#callPip .pip-av { width: 40px; height: 40px; font-size: 17px; flex-shrink: 0; }
#callPip .pip-meta { display: flex; flex-direction: column; min-width: 0; }
#callPip .pip-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
#callPip .pip-timer { font-size: 12px; color: rgba(255,255,255,.8); direction: ltr; font-variant-numeric: tabular-nums; }
#callPip.video .pip-timer { position: absolute; bottom: 6px; left: 8px; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
#callPip .pip-end { width: 34px; height: 34px; border-radius: 50%; background: #e0455a; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#callPip.video .pip-end { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; }
#callPip .pip-end svg { width: 18px; height: 18px; }

/* ---------- app lock ---------- */
#lockScreen { position: fixed; inset: 0; z-index: 120; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
#lockScreen .lock-ico { font-size: 44px; }
/* A call goes on above the lock: the incoming screen opened from a call push, or a live call after the
   phone was locked a while, sat UNDER the PIN screen — no answering, no hanging up without the PIN.
   Only the call itself rises; minimised, the app behind it is still locked. The add-person list
   (contact names) stays behind the lock, so its button goes. */
body.app-locked #callUI { z-index: 121; }
body.app-locked #callPip { z-index: 122; }
body.app-locked #callUI .call-add { display: none; }
/* …and every prompt that opens on its own waits until the call is over (renderCallUI adds call-up,
   cleanupCall removes it): the forced update dialog (z 400, no «بعداً») covered Accept and Decline. */
body.call-up .upd-modal, body.call-up .notif-ask, body.call-up .onboard-overlay,
body.call-up .tour-ov, body.call-up .intro-ov, body.call-up .gift-burst { display: none !important; }
#lockScreen input { max-width: 200px; text-align: center; letter-spacing: 8px; font-size: 22px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px; direction: ltr; -webkit-text-security: disc; }

.sched-bar { background: var(--panel); border-bottom: 1px solid var(--border); padding: 6px 14px; font-size: 12.5px; color: var(--accent); cursor: pointer; }

/* image lightbox */
/* CHAT-08: media gallery viewer */
#lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.94); z-index: 80; display: flex; align-items: center; justify-content: center; }
#lightbox .lb-stage { max-width: 96vw; max-height: calc(100% - var(--sat) - var(--sab) - 24px); display: flex; align-items: center; justify-content: center; }
#lightbox img, #lightbox video { max-width: 96vw; max-height: 100%; object-fit: contain; }
#lightbox .lb-close { position: absolute; top: max(calc(16px + var(--sat)), 44px); right: 16px; color: #fff; font-size: 26px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); }
#lightbox .lb-goto { position: absolute; top: max(calc(18px + var(--sat)), 46px); left: 16px; color: #fff; font-size: 13px; z-index: 2; display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.12); border-radius: 999px; padding: 7px 14px; }
#lightbox .lb-count { position: absolute; bottom: calc(18px + var(--sab)); left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; direction: ltr; opacity: .85; }
#lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 2; }
#lightbox .lb-prev { left: 14px; }                    /* physical-left arrow = previous */
#lightbox .lb-next { right: 14px; transform: translateY(-50%) scaleX(-1); }
@media (hover: none) { #lightbox .lb-nav { display: none; } }   /* touch uses swipe */

/* video bubble thumbnail with a play overlay (taps open the gallery) */
.videowrap { position: relative; display: inline-block; cursor: pointer; line-height: 0; }
.videowrap video { max-width: min(320px, 64vw); border-radius: var(--r-md); pointer-events: none; background: #000; min-height: 80px; object-fit: cover; }
.videowrap .vw-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: flex; align-items: center; justify-content: center; }

/* MEDIA-01: circular transfer-progress overlay on a media bubble (upload/download) */
.media-wrap { position: relative; display: inline-block; line-height: 0; }
/* MEDIA-05: lazy-download placeholder — blurred thumb bg + a centered progress ring
   sized like a media bubble, until the real file arrives and reveals (hy-done). */
.media-wrap.mload { display: flex; align-items: center; justify-content: center; width: min(260px, 64vw); height: min(260px, 64vw); border-radius: var(--r-md); background-size: cover; background-position: center; background-color: var(--panel-2); overflow: hidden; }
.videowrap.mload { background-color: #0c0d10; }
.media-wrap.mload img.photo, .videowrap.mload video { visibility: hidden; }
.media-wrap.mload.hy-done { display: inline-block; width: auto; height: auto; background: none; }
.media-wrap.mload.hy-done img.photo, .videowrap.mload.hy-done video { visibility: visible; }
/* Telegram-style circular transfer control: blurred dark disc + crisp progress ring + icon */
.xfer { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 52px; height: 52px; aspect-ratio: 1; z-index: 2; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.xfer svg { width: 52px; height: 52px; transform: rotate(-90deg); display: block; }
.xfer svg circle { fill: none; stroke-width: 4; }
.xfer .xf-bg { stroke: rgba(255,255,255,.35); }
.xfer .xf-fg { stroke: #fff; stroke-linecap: round; stroke-dasharray: 144.5; stroke-dashoffset: 144.5; transition: stroke-dashoffset .2s linear; }
.xfer .xf-btn { position: absolute; inset: 6px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(18,20,26,.66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border-radius: 50%; }
/* FIX-01: failed-upload state (retry) */
.msg.upfailed .xfer .xf-btn { background: var(--danger); }
.msg.upfailed .filebox { opacity: .85; }
.xfer .xf-btn svg { width: 22px; height: 22px; transform: none; }
.filebox .xfer { position: relative; left: auto; top: auto; transform: none; width: 42px; height: 42px; flex-shrink: 0; filter: none; }
/* MEDIA-06: thin download ring drawn around a voice/music play button */
.v-play, .mb-play { position: relative; }
.dlring { position: absolute; inset: -3px; pointer-events: none; z-index: 2; }
.dlring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.dlring circle { fill: none; stroke-width: 3; }
.dlring .xf-bg { stroke: rgba(127,127,127,.28); }
.dlring .xf-fg { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 144.5; stroke-dashoffset: 144.5; transition: stroke-dashoffset .2s linear; }
.filebox .xfer svg { width: 42px; height: 42px; }
.filebox .xfer .xf-btn { background: var(--accent); inset: 4px; }

/* MEDIA-04: file/document bubble — type-coloured icon with extension + size */
.filebox .f-ext { font-size: 11px; font-weight: 700; letter-spacing: .5px; direction: ltr; }
.filebox .f-meta { min-width: 0; }

/* MEDIA-02/03/06: viewer save button + zoomable stage */
#lightbox .lb-save { position: absolute; top: max(calc(18px + var(--sat)), 46px); left: 150px; color: #fff; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; }
#lightbox.photo-only .lb-save { left: 16px; }
#lightbox .lb-stage img { transition: transform .25s ease; transform-origin: center center; touch-action: none; will-change: transform; }
#lightbox .lb-stage img.zoomed { transition: none; cursor: grab; }
#lightbox .lb-stage { animation: lb-in .22s ease; }
@keyframes lb-in { from { transform: scale(.92); opacity: .4; } to { transform: none; opacity: 1; } }

/* ---------- production polish (2026-06) ---------- */
.v-bars { display: flex; gap: 2px; align-items: center; height: 28px; width: 100%; direction: ltr; cursor: pointer; min-width: 140px; }
.v-bars i { flex: 1; min-width: 2px; background: rgba(127,127,127,.45); border-radius: 2px; transition: background .12s; }
.v-bars i.on { background: var(--accent); }

/* ---------- round video note (Telegram-style) ---------- */
.bubble.vnbubble { background: none !important; box-shadow: none; padding: 2px; }
.vnote-wrap { position: relative; width: 200px; height: 200px; }
.msg .vnote { width: 200px; height: 200px; max-width: 200px; border-radius: 50%; object-fit: cover; background: #000; cursor: pointer; display: block; }
.vn-ring { position: absolute; inset: 0; width: 200px; height: 200px; transform: rotate(-90deg); pointer-events: none; }
.vn-ring circle { fill: none; stroke-width: 2.5; }
.vn-ring .vn-ring-bg { stroke: rgba(255,255,255,.25); }
.vn-ring .vn-ring-fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 301.6; stroke-dashoffset: 301.6; transition: stroke-dashoffset .12s linear; }
.vn-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(0,0,0,.42); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: opacity .2s; }
.vnote-wrap.playing .vn-play { opacity: 0; }
.vn-dur { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.55); color: #fff; font-size: 11px; border-radius: 99px; padding: 2px 9px; direction: ltr; }

/* a pending upload still at 0% (the file being sealed, nothing out yet): the ring turns as a quarter
   arc — a still, empty ring with ✕ in it read as "failed" */
.xf-wait .xfer svg, .xf-wait .dlring svg, .xf-wait .vn-ring { animation: ui-spin var(--dur-spin) linear infinite; }
.xf-wait .xfer .xf-fg, .xf-wait .dlring .xf-fg { stroke-dashoffset: 108.4 !important; }   /* ¾ of 144.5 hidden */
.xf-wait .vn-ring .vn-ring-fg { stroke-dashoffset: 226.2 !important; }                    /* ¾ of 301.6 hidden */
/* a voice note being sent: the ring around its play button, in the accent (white vanished on the bubble) */
.dlring.up-ring .xf-fg { stroke: var(--accent); }
.dlring.up-ring .xf-bg { stroke: color-mix(in srgb, var(--accent) 22%, transparent); }
/* a round note being sent: its own ring is the progress, a small ✕ chip in the middle cancels */
.vnote-wrap .xfer-chip { width: 40px; height: 40px; filter: none; }
.vnote-wrap .xfer-chip .xf-btn { inset: 0; background: var(--scrim-media-strong); }
.vnote-wrap .xfer-chip .xf-btn::before { content: ""; position: absolute; inset: -4px; }   /* 48px to hit */
.vnote-wrap .xfer-chip .xf-btn svg { width: var(--ic-sm); height: var(--ic-sm); }
@keyframes rl-bounce { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }

/* ---------- round video recorder (Telegram-style) ----------
   top: flip · middle: timer pill, the round preview with its ring, one line of hint ·
   bottom: «لغو» (ghost, inline start) and «ارسال» (filled, inline end), each labelled */
#vnRecorder { position: fixed; inset: 0; z-index: 92; display: flex; flex-direction: column; justify-content: space-between;
  background: rgba(8,10,16,.97); color: var(--on-dark); padding-top: max(var(--sp-3), var(--sat));
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* a sheet opened over it (Back → «لغو ضبط»?) is above it, not hidden behind it (sheets are z 60) */
#vnRecorder ~ .sheet-overlay { z-index: 93; }
#vnRecorder .vnr-top { display: flex; justify-content: flex-end; direction: ltr; min-height: 44px; padding: 0 var(--sp-4); }
#vnRecorder .vnr-flip[hidden] { display: none; }
#vnRecorder .vnr-mid { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); }
#vnRecorder .vnr-timer { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-chip);
  background: rgba(255,255,255,.1); font-size: var(--fs-base); font-weight: 600; pointer-events: none; }
#vnRecorder .vnr-dot { width: 8px; height: 8px; border-radius: 50%; background: #FF4D5E; }
@media (prefers-reduced-motion: no-preference) { #vnRecorder .vnr-dot { animation: rs-blink 1.2s var(--ease-in-out) infinite; } }
#vnRecorder.previewing .vnr-dot { display: none; }
#vnRecorder .vnr-stage { position: relative; width: min(280px, 72vw); aspect-ratio: 1; }
#vnRecorder video { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #000; }
#vnRecorder video[hidden] { display: none; }
#vnRecorder #vnrPrev { transform: scaleX(-1); }   /* front camera: a mirror, like every camera app */
#vnRecorder.rear #vnrPrev { transform: none; }
#vnRecorder .vnr-ring { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); rotate: -90deg; pointer-events: none; }
#vnRecorder .vnr-ring circle { fill: none; stroke-width: 2.2; }
#vnRecorder .vnr-ring .bg { stroke: var(--track-on-media); }
#vnRecorder .vnr-ring .fg { stroke: #FF4D5E; stroke-linecap: round; stroke-dasharray: 301.6; stroke-dashoffset: 301.6;
  transition: stroke-dashoffset .12s linear, stroke var(--dur-md) var(--ease-out); }
#vnRecorder.ending .vnr-ring .fg { stroke: var(--chip-warn-text); }   /* the last ten seconds */
#vnRecorder.previewing .vnr-ring .fg { stroke: var(--on-dark); }
#vnRecorder .vnr-playic { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; background: var(--scrim-media-strong); color: var(--on-media); pointer-events: none; }
#vnRecorder .vnr-playic[hidden] { display: none; }
#vnRecorder .vnr-playic svg { width: 28px; height: 28px; }
#vnRecorder.previewing .vnr-stage { cursor: pointer; }
#vnRecorder .vnr-hint { min-height: 1.7em; padding: 0 var(--sp-5); font-size: var(--fs-sm); line-height: 1.7; color: var(--on-dark-2); text-align: center; }
#vnRecorder .vnr-bar { display: flex; align-items: flex-end; justify-content: space-between; padding: var(--sp-4) var(--sp-8) calc(var(--sab) + 24px); }
#vnRecorder .vnr-act { min-width: 64px; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1-5); font-size: var(--fs-sm); color: var(--on-dark-2); }
#vnRecorder .vnr-cancel, #vnRecorder .vnr-send { display: grid; place-items: center; border-radius: 50%;
  transition: scale var(--dur-sm) var(--ease-spring), opacity var(--dur-sm) var(--ease-out); }
#vnRecorder .vnr-cancel { width: 48px; height: 48px; margin-bottom: 8px; background: rgba(255,255,255,.14); color: var(--on-dark); }
#vnRecorder .vnr-send { width: 64px; height: 64px; background: var(--accent-fill); color: var(--accent-contrast); box-shadow: 0 10px 24px -10px var(--accent); }
#vnRecorder .vnr-cancel svg { width: var(--ic-lg); height: var(--ic-lg); }
#vnRecorder .vnr-send svg { width: 26px; height: 26px; }
#vnRecorder .vnr-send:disabled { opacity: .4; }
#vnRecorder .vnr-cancel:active, #vnRecorder .vnr-send:not(:disabled):active { scale: var(--press-scale); transition-duration: var(--dur-xs); }
#vnRecorder button:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 3px; }

/* ---------- attach sheet: one grid of round, colour-coded actions (white icon ≥3:1 on each) ---------- */
.att-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4) var(--sp-1); padding: var(--sp-1) 0 var(--sp-2); }
.att-tile { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1-5); padding: var(--sp-1) 0; border-radius: var(--r-md);
  color: var(--text); font-size: var(--fs-sm); transition: scale var(--dur-sm) var(--ease-spring); }
.att-tile:active { scale: var(--press-scale); transition-duration: var(--dur-xs); }
.att-tile .att-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: var(--att, var(--accent-fill)); box-shadow: 0 8px 18px -10px var(--att, var(--accent)); }
.att-tile .att-ic svg { width: 26px; height: 26px; }
.att-tile.off { opacity: .4; }
.att-gallery { --att: #3E7BF0; } .att-camera { --att: #5E5CE6; } .att-music { --att: #E0663A; } .att-file { --att: #0E8FA3; } .att-vnote { --att: #D9467C; } .att-poll { --att: #C7841A; }
.att-sched { --att: #7A5CF0; } .att-loc { --att: #1F9D63; } .att-contact { --att: #E06A2B; } .att-burn { --att: #E04848; }
/* several picked from the gallery: thumbnails, each removable */
.mb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1-5); max-height: 46dvh; overflow-y: auto; }
.mb-cell { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--panel-2); }
.mb-cell img, .mb-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-cell .mb-vid { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--scrim-media); color: var(--on-media); pointer-events: none; }
.mb-cell .mb-vid svg { width: 14px; height: 14px; }
.mb-cell .mb-x { position: absolute; top: 4px; inset-inline-end: 4px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--scrim-media-strong); color: var(--on-media); }
.mb-cell .mb-x::before { content: ""; position: absolute; inset: -8px; }   /* 44px to hit */
.mb-cell .mb-x svg { width: 14px; height: 14px; }
/* mic / camera refused: what to do, and the button that opens the app's settings */
.perm-sheet { display: flex; flex-direction: column; gap: var(--sp-3); text-align: center; }
.perm-sheet h3 { margin-bottom: 0; }
.perm-hero { width: 64px; height: 64px; margin: 0 auto; border-radius: 20px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.perm-hero svg { width: 30px; height: 30px; }
.perm-s { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.8; }
.perm-acts { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-1); }

.sv-text { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 32px; color: #fff; font-size: 26px; font-weight: 700; text-align: center; word-break: break-word; line-height: 1.8; }

#callBanner { position: fixed; top: 0; left: 0; right: 0; z-index: 94; background: #16a34a; color: #fff; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px 14px; font-size: 13.5px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
#callBanner button { background: rgba(255,255,255,.22); color: #fff; border-radius: 999px; padding: 3px 14px; font-size: 12.5px; }

#chatView.dropping::after { content: '📎 فایل را اینجا رها کنید'; position: absolute; inset: 8px; border: 3px dashed var(--accent); border-radius: 18px; background: color-mix(in srgb, var(--accent) 12%, transparent); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; color: var(--accent); z-index: 30; pointer-events: none; }

.msg-link { color: var(--accent); text-decoration: underline; word-break: break-all; unicode-bidi: isolate; direction: ltr; }
/* ACHAT-07: text formatting */
.mtext .mention { color: var(--accent); font-weight: 600; cursor: pointer; unicode-bidi: isolate; direction: ltr; }
.mtext .mention:active { opacity: .7; }
.mtext b { font-weight: 700; }
.mtext i { font-style: italic; }
.mtext s { text-decoration: line-through; }
.mtext .fmt-code { font-family: ui-monospace, Menlo, Consolas, monospace; background: rgba(127,127,127,.18); border-radius: 4px; padding: 1px 5px; font-size: .92em; cursor: pointer; direction: ltr; unicode-bidi: plaintext; }
.mtext .fmt-pre { font-family: ui-monospace, Menlo, Consolas, monospace; background: rgba(127,127,127,.18); border-radius: var(--r-sm); padding: 8px 10px; margin: 4px 0; font-size: .9em; white-space: pre-wrap; overflow-x: auto; cursor: pointer; direction: ltr; unicode-bidi: plaintext; }
.mtext .fmt-quote { display: block; border-right: 3px solid var(--accent); padding: 1px 8px; margin: 2px 0; background: color-mix(in srgb, var(--accent) 9%, transparent); border-radius: var(--r-xs); }
.mtext .fmt-spoiler { background: var(--text-2); color: transparent; border-radius: 3px; cursor: pointer; transition: color .2s, background .2s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mtext .fmt-spoiler.revealed { background: transparent; color: inherit; }

/* ===== PROF-01..08: Telegram-style profile screen ===== */
.profile-screen { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column;
  opacity: 0; transform: translateX(8%); transition: opacity .2s ease, transform .22s ease; overflow: hidden; }
html[dir="ltr"] .profile-screen { transform: translateX(-8%); }
.profile-screen.open { opacity: 1; transform: translateX(0); }
@media (min-width: 900px) { .profile-screen { max-width: 1200px; margin: 0 auto; } }
.pf-top { display: flex; align-items: center; gap: var(--sp-2); padding: calc(var(--sat) + 6px) var(--sp-3) 6px; background: var(--panel); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.pf-top-t { font-weight: 600; font-size: var(--fs-lg); }
.pf-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--sab) + 24px); }

/* large cover photo with overlaid name/status (Telegram) */
.pf-cover { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 56vh; background: var(--panel-2); overflow: hidden; }
.pf-photo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pf-photo img { width: 100%; height: 100%; object-fit: cover; }
.pf-photo .pf-letter { font-size: 96px; font-weight: 700; color: var(--accent-contrast); background: var(--accent); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pf-cover-shade { position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(0,0,0,.66), transparent); pointer-events: none; }
.pf-cover-meta { position: absolute; inset: auto 0 0 0; padding: 14px 18px; color: #fff; pointer-events: none; }
.pf-cover-meta .pf-name { font-size: 23px; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.pf-cover-meta .pf-status { font-size: 13.5px; opacity: .92; margin-top: 2px; text-shadow: 0 1px 5px rgba(0,0,0,.5); }
.pf-cover-meta .pf-status span { color: #6fd0ff !important; }
.pf-segs { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3; display: flex; gap: 4px; }
.pf-segs span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.34); }
.pf-segs span.on { background: #fff; }
.pf-photo-nav { position: absolute; top: 0; bottom: 0; width: 34%; z-index: 2; background: transparent; border: 0; cursor: pointer; }
.pf-photo-nav.prev { right: 0; } .pf-photo-nav.next { left: 0; }
html[dir="ltr"] .pf-photo-nav.prev { right: auto; left: 0; } html[dir="ltr"] .pf-photo-nav.next { left: auto; right: 0; }

/* round action buttons row */
.pf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 14px 12px 6px; background: var(--panel); }
.pf-action { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 60px; color: var(--accent); background: transparent; border: 0; cursor: pointer; }
.pf-action-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 21px; transition: filter .15s; }
.pf-action:active .pf-action-ic { filter: brightness(.92); }
.pf-action-lb { font-size: 11.5px; color: var(--text-2); }

/* info card */
.pf-card { background: var(--panel); margin: 8px 0; }
.pf-row { display: flex; align-items: center; gap: 14px; padding: 11px 18px; border-bottom: 1px solid var(--border); }
.pf-row:last-child { border-bottom: 0; }
.pf-row-ic { width: 22px; text-align: center; color: var(--text-2); font-size: 17px; flex-shrink: 0; }
.pf-row-main { flex: 1; min-width: 0; }
.pf-row-val { font-size: 15px; color: var(--text); word-break: break-word; }
.pf-row-lb { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.pf-row-qr { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); background: transparent; border: 0; cursor: pointer; flex-shrink: 0; }
.pf-row-qr:active { background: var(--accent-soft); }
.pf-menu { background: var(--panel); margin: 8px 0; }
.pf-members { background: var(--panel); margin-top: 8px; }
.pf-members .user-item { padding: 9px 14px; cursor: pointer; }
.pf-members .ci-mname { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-members .ci-muser { font-size: 12px; color: var(--text-2); }

/* shared media tabs */
.pf-shared { margin-top: 8px; }
.pf-tabs { display: flex; gap: 4px; overflow-x: auto; background: var(--panel); border-bottom: 1px solid var(--border); padding: 0 6px; position: sticky; top: 0; z-index: 2; }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tab { white-space: nowrap; padding: 12px 12px; font-size: 13.5px; color: var(--text-2); background: transparent; border: 0; border-bottom: 2.5px solid transparent; cursor: pointer; }
.pf-tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.pf-tab-n { font-size: 11.5px; opacity: .7; }
.pf-tab-body { background: var(--panel); min-height: 80px; }
.pf-tab-body.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; }
.pf-loading { padding: 28px; text-align: center; color: var(--text-2); }
.sh-cell { position: relative; aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; background: var(--panel-2); }
.sh-cell img, .sh-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-cell .sh-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; text-shadow: 0 1px 6px rgba(0,0,0,.6); pointer-events: none; }
.sh-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.sh-row:active { background: var(--panel-2); }
.sh-ic { width: 42px; height: 42px; border-radius: 10px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.sh-meta { flex: 1; min-width: 0; }
.sh-name { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-sub { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.sh-dl { color: var(--text-2); flex-shrink: 0; }

/* ===== PROFILE-REDESIGN: dark-luxury cover + floating avatar card (user profile) ===== */
.pfx { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pfx-cover { position: relative; height: 134px; background: linear-gradient(135deg, #2B3346, #4A5571); overflow: hidden; }
.pfx-cover::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 82% 8%, rgba(255,255,255,.16), transparent 46%); }
.pfx-topbar { position: absolute; inset: 0 0 auto 0; display: flex; align-items: center; gap: 8px; padding: calc(var(--sat) + 8px) 12px 0; z-index: 2; }
.pfx-topbar .icon-btn, .pfx-topbar .pf-back { color: #fff; }
.pfx-top-t { color: #fff; font-weight: 600; font-size: 16px; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.pfx-body { padding-bottom: calc(var(--sab) + 28px); }
.pfx-head { margin: -52px 12px 0; border-radius: 20px; padding: 56px 16px 14px; text-align: center; position: relative; box-shadow: var(--shadow); animation: pfx-up .42s cubic-bezier(.22,1,.36,1) both; }
.pfx-ava-wrap { position: absolute; top: -48px; left: 50%; transform: translateX(-50%); width: 96px; height: 96px; }
.pfx-ava { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 700; overflow: hidden; cursor: pointer; background: var(--panel-2); border: 3px solid var(--panel); box-shadow: 0 0 0 2px #7C8DF0, 0 8px 22px rgba(0,0,0,.28); animation: pfx-ava-in .5s cubic-bezier(.22,1,.36,1) both; }
.pfx-ava img { width: 100%; height: 100%; object-fit: cover; }
.pfx-ava:active { filter: brightness(.95); }
.pfx-dot { position: absolute; right: 6px; bottom: 6px; width: 18px; height: 18px; border-radius: 50%; background: #22C55E; border: 3px solid var(--panel); }
.pfx-name { font-size: 21px; font-weight: 700; color: var(--text); display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pfx-chip { font-size: 11.5px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 3px 10px; border-radius: 999px; }
.pfx-status { font-size: 13.5px; color: var(--text-2); margin-top: 4px; }
.pfx-status span { color: #22C55E !important; }
.pfx-acts { background: transparent; padding: 18px 4px 2px; }
.pfx-acts #pfMsg .pf-action-ic { background: var(--accent); color: #fff; box-shadow: 0 7px 18px var(--accent-soft); }
.pfx-info { margin: 10px 12px; border-radius: 16px; overflow: hidden; animation: pfx-up .42s .06s cubic-bezier(.22,1,.36,1) both; }
.pfx-danger, .pfx-clear { display: flex; align-items: center; justify-content: center; gap: 10px; width: calc(100% - 24px); margin: 8px 12px 0; padding: 14px; border: 0; border-radius: 14px; font-size: 14.5px; font-weight: 600; cursor: pointer; background: var(--panel); }
.pfx-danger { color: #EF4444; }
.pfx-clear { color: var(--text-2); }
.pfx-danger span, .pfx-clear span { display: inline-flex; }
.pfx-danger span svg, .pfx-clear span svg { width: 19px; height: 19px; }
.pfx-danger:active, .pfx-clear:active { background: var(--panel-2); }
@keyframes pfx-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pfx-ava-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

/* QR sheet */
.qr-wrap { display: flex; justify-content: center; padding: 8px 0 4px; }
.qr-wrap canvas { width: 240px; height: 240px; border-radius: 14px; background: #fff; padding: 12px; box-shadow: var(--shadow); }
.qr-handle { text-align: center; font-size: 16px; font-weight: 600; margin-top: 12px; color: var(--accent); }

/* edit-profile photo manager */
.ep-photos { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 12px; }
.ep-photo { position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--panel-2); }
.ep-photo img { width: 100%; height: 100%; object-fit: cover; }
.ep-del { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; }
.ep-add { width: 72px; height: 72px; border-radius: 12px; border: 1.5px dashed var(--border); background: transparent; color: var(--accent); font-size: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* forwarded-source becomes tappable (PROF-04) */
.fwd-src.tappable { cursor: pointer; }
.fwd-src.tappable:active { text-decoration: underline; }
.lb-del { position: absolute; top: 18px; left: 64px; color: #fff; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* ===== APP-02: English / LTR correctness ===== */
/* directional chevrons point the other way in LTR (back arrows, gallery nav) */
html[dir="ltr"] #chBack svg,
html[dir="ltr"] .pf-back svg { transform: scaleX(-1); }
html[dir="ltr"] #lightbox .lb-prev { transform: translateY(-50%) scaleX(-1); }
html[dir="ltr"] #lightbox .lb-next { transform: translateY(-50%); }
/* slide-to-cancel hint arrow (.rs-cancel) + RTL-anchored profile nav zones already flip via [dir=ltr] rules above */
/* list-section + menu rows are flex/auto so they reflow; keep numeric/handle fields LTR */
html[dir="ltr"] .pf-row-val[dir="ltr"], html[dir="ltr"] .qr-handle { text-align: left; }

/* APP-02: chat bubbles must sit on the correct side in LTR (me → right, like Telegram en) */
html[dir="ltr"] .msg.me { align-self: flex-end; }
html[dir="ltr"] .msg.other { align-self: flex-start; }
/* (the bubble tails are physical — mine on the right in both directions — so they need no LTR copy) */
html[dir="ltr"] .msg.me .bubble .hover-acts { left: auto; right: 2px; }
html[dir="ltr"] .msg.other .bubble .hover-acts { right: auto; left: 2px; }

/* ===== STORY-14: full-screen story creator ===== */
.story-creator { position: fixed; inset: 0; z-index: 130; background: #000; display: flex; flex-direction: column;
  opacity: 0; transition: opacity .2s ease; }
.story-creator.open { opacity: 1; }
.story-creator .sc-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.story-creator .sc-media { max-width: 100%; max-height: 100%; object-fit: contain; }
.story-creator .sc-textedit { position: absolute; inset: 12% 8%; background: transparent; border: 0; outline: none; resize: none;
  color: #fff; font-size: 30px; font-weight: 700; text-align: center; line-height: 1.4; text-shadow: 0 2px 12px rgba(0,0,0,.45);
  display: flex; align-items: center; }
.story-creator .sc-textedit::placeholder { color: rgba(255,255,255,.7); }
.story-creator .sc-ov { position: absolute; transform: translate(-50%, -50%); max-width: 88%; font-weight: 800; line-height: 1.3;
  text-shadow: 0 2px 10px rgba(0,0,0,.5); word-break: break-word; cursor: move; touch-action: none; padding: 4px 8px; }
.story-creator .sc-ov.hidden { display: none; }
.story-creator .sc-top { position: absolute; top: calc(var(--sat) + 10px); left: 12px; right: 12px; display: flex; align-items: center; justify-content: space-between; z-index: 3; }
.story-creator .sc-toptools { display: flex; gap: 8px; }
.story-creator .sc-icon { width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,.42); color: #fff; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.story-creator .sc-bgs, .story-creator .sc-colors { position: absolute; bottom: 92px; left: 0; right: 0; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 0 16px; z-index: 3; }
.story-creator .sc-bgs button, .story-creator .sc-colors button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); }
.story-creator .sc-bgs button.on, .story-creator .sc-colors button.on { border-color: #fff; transform: scale(1.18); box-shadow: 0 0 0 2px rgba(0,0,0,.3); }
.story-creator .sc-txt-in { position: absolute; bottom: 92px; left: 16px; right: 16px; z-index: 3; background: rgba(0,0,0,.5); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-pill); padding: 11px 16px; outline: none; backdrop-filter: blur(6px); }
.story-creator .sc-txt-in::placeholder { color: rgba(255,255,255,.65); }
.story-creator .sc-bottom { padding: 14px 16px calc(var(--sab) + 16px); }
.story-creator .sc-publish { width: 100%; height: 50px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; }
.story-creator .sc-publish:disabled { opacity: .6; }
.story-creator .up-ring { z-index: 4; }

/* STORY-17: Telegram-style red "Draft:" indicator in the chat list */
.draft-pre { color: var(--danger); font-weight: 500; }
/* belt-and-braces separation so the stories row can never visually touch the tabs */
.tabs { margin-top: 2px; }

/* ===== FEAT-01/03/04: emoji search + GIF tab in the unified picker ===== */
.ep-search-wrap { padding: 6px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ep-search { width: 100%; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 7px 14px; font-size: 13.5px; outline: none; color: var(--text); }
.ep-grid.gifs { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 2px; }
.ep-gif { padding: 0; border-radius: 10px; overflow: hidden; background: var(--panel-2); aspect-ratio: 1; }
.ep-gif img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ===== FEAT-05: named theme token overrides (layer over base light/dark) ===== */
/* "day" = default :root (light), "night" = default [data-theme="dark"] — no overrides needed */
[data-theme-name="nightblue"] {
  --bg: #0e1621; --panel: #17212b; --panel-2: #232e3c; --border: #2b3543;
  --text: #e9eef2; --text-2: #8a98a8;
  --accent: #4ea4f6; --accent-soft: rgba(78,164,246,.16); --accent-contrast: #fff;
  --bubble-me: #2b5278; --bubble-me-text: #ffffff; --bubble-me-tick: #cfe6ff; --bubble-other: #182533;
  --tick-read: #6fd0ff;
}
[data-theme-name="nightblue"] #chatView { background: #0e1621; }
[data-theme-name="ocean"] {
  --accent: #0ea5a4; --accent-soft: rgba(14,165,164,.14); --accent-contrast: #fff;
  --accent-grad: linear-gradient(135deg,#0ea5a4,#22d3ee); --accent-2: #22d3ee; --glow: 0 8px 22px rgba(14,165,164,.26);
  --bubble-me: #d3f3ec; --bubble-me-text: #0b3b37; --bubble-me-tick: #1aa39a; --tick-read: #0e9488;
}
/* P15: new premium themes */
[data-theme-name="carbon"] { /* OLED pure-black + cyan */
  --bg: #000000; --panel: #0c0c0e; --panel-2: #161618; --border: #232327; --text: #f4f4f6; --text-2: #8b8b92;
  --accent: #22d3ee; --accent-soft: rgba(34,211,238,.15); --accent-contrast: #001016;
  --accent-grad: linear-gradient(135deg,#22d3ee,#3b82f6); --accent-2: #3b82f6; --glow: 0 0 24px rgba(34,211,238,.35);
  --bubble-me: #10303a; --bubble-me-text: #eafcff; --bubble-other: #161618; --tick-read: #22d3ee; --bubble-me-tick: #22d3ee;
  --dock-bg: rgba(255,255,255,.05); --dock-border: rgba(255,255,255,.1); --shadow: 0 12px 34px rgba(0,0,0,.7);
}
[data-theme-name="sunset"] { /* warm dark — coral→amber */
  --bg: #1a1014; --panel: #241820; --panel-2: #2e2029; --border: #3a2a33; --text: #fbeef0; --text-2: #b79aa4;
  --accent: #ff6b6b; --accent-soft: rgba(255,107,107,.16); --accent-contrast: #fff;
  --accent-grad: linear-gradient(135deg,#ff6b6b,#ffa94d); --accent-2: #ffa94d; --glow: 0 0 26px rgba(255,107,107,.34);
  --bubble-me: #4a2330; --bubble-me-text: #fbeef0; --bubble-other: #2e2029; --tick-read: #ffa94d; --bubble-me-tick: #ffa94d;
  --dock-bg: rgba(255,255,255,.06); --dock-border: rgba(255,255,255,.12);
}
[data-theme-name="rose"] { /* soft light — rose/pink */
  --bg: #fbf1f4; --panel: #ffffff; --panel-2: #fae6ec; --border: #f3d9e1; --text: #3a2230; --text-2: #9a7682;
  --accent: #e0457b; --accent-soft: #fde4ee; --accent-contrast: #fff;
  --accent-grad: linear-gradient(135deg,#e0457b,#ff7eb3); --accent-2: #ff7eb3; --glow: 0 8px 22px rgba(224,69,123,.24);
  --bubble-me: #ffe0ec; --bubble-me-text: #3a2230; --bubble-other: #ffffff; --tick-read: #e0457b; --bubble-me-tick: #e0457b;
  --dock-bg: rgba(255,255,255,.72); --dock-border: rgba(224,69,123,.2);
}
/* round 3 — soft pastel themes (gentle, eye-friendly) */
[data-theme-name="emerald"] { /* soft dark — mint/emerald */
  --bg: #121b18; --panel: #1a2622; --panel-2: #233129; --border: #2c3b34; --text: #e8f1ec; --text-2: #93a89e;
  --accent: #57C99A; --accent-soft: rgba(87,201,154,.16); --accent-contrast: #04130d;
  --accent-grad: linear-gradient(135deg,#57C99A,#7AD7C9); --accent-2: #7AD7C9; --glow: 0 8px 24px rgba(87,201,154,.26);
  --bubble-me: #1f3a30; --bubble-me-text: #e8f1ec; --bubble-other: #233129; --tick-read: #7AD7C9; --bubble-me-tick: #7AD7C9;
}
[data-theme-name="amethyst"] { /* soft dark — orchid/violet */
  --bg: #19151f; --panel: #221d2c; --panel-2: #2c2538; --border: #382f47; --text: #efeaf4; --text-2: #a497b4;
  --accent: #C49BF5; --accent-soft: rgba(196,155,245,.16); --accent-contrast: #1a0f2b;
  --accent-grad: linear-gradient(135deg,#C49BF5,#F0A6D6); --accent-2: #F0A6D6; --glow: 0 8px 24px rgba(196,155,245,.28);
  --bubble-me: #34284a; --bubble-me-text: #efeaf4; --bubble-other: #2c2538; --tick-read: #F0A6D6; --bubble-me-tick: #F0A6D6;
}
[data-theme-name="peach"] { /* soft light — peach/coral */
  --bg: #FFF6F1; --panel: #ffffff; --panel-2: #FDEDE4; --border: #F6E0D4; --text: #3C2D26; --text-2: #9C8378;
  --accent: #F0926B; --accent-soft: #FDE7DC; --accent-contrast: #fff;
  --accent-grad: linear-gradient(135deg,#F0926B,#F6B89A); --accent-2: #F6B89A; --glow: 0 8px 22px rgba(240,146,107,.22);
  --bubble-me: #FDE2D5; --bubble-me-text: #3C2D26; --bubble-other: #ffffff; --tick-read: #E07B52; --bubble-me-tick: #E07B52;
}
[data-theme-name="skyblue"] { /* soft light — sky blue (#98ceff) */
  --bg: #EEF6FF; --panel: #ffffff; --panel-2: #E1EEFB; --border: #D3E5F6; --text: #1E3A54; --text-2: #6C88A4;
  --accent: #3E96EA; --accent-soft: #DCEDFD; --accent-contrast: #fff;
  --accent-grad: linear-gradient(135deg, #3E96EA, #98CEFF); --accent-2: #98CEFF; --glow: 0 8px 22px rgba(62,150,234,.24);
  --bubble-me: #D6ECFF; --bubble-me-text: #1E3A54; --bubble-other: #ffffff; --tick-read: #3E96EA; --bubble-me-tick: #3E96EA;
}
[data-theme-name="mintlight"] { /* soft light — fresh mint */
  --bg: #F1F9F6; --panel: #ffffff; --panel-2: #E6F4EE; --border: #D7EAE1; --text: #243A33; --text-2: #7A958B;
  --accent: #3FB89A; --accent-soft: #DFF3EC; --accent-contrast: #fff;
  --accent-grad: linear-gradient(135deg,#3FB89A,#69D0CB); --accent-2: #69D0CB; --glow: 0 8px 22px rgba(63,184,154,.2);
  --bubble-me: #D7F1E8; --bubble-me-text: #243A33; --bubble-other: #ffffff; --tick-read: #2FA589; --bubble-me-tick: #2FA589;
}
[data-theme-name="sand"] { /* soft light — warm sand canvas + calm trustworthy blue accent */
  --bg: #F3ECE0; --panel: #FFFCF6; --panel-2: #EFE6D7; --border: #E9E0CF; --text: #2B2720; --text-2: #998F7C;
  --accent: #2D68E0; --accent-soft: #E8EEFC; --accent-contrast: #fff;
  --accent-grad: linear-gradient(135deg,#2D68E0,#5B8DF0); --accent-2: #5B8DF0; --glow: 0 10px 26px rgba(45,104,224,.22);
  --bubble-me: #E2EAFB; --bubble-me-text: #2B2720; --bubble-other: #FFFCF6; --tick-read: #2D68E0; --bubble-me-tick: #2D68E0;
  --dock-bg: rgba(255,252,246,.82); --dock-border: rgba(45,104,224,.16);
}

/* FEAT-05: theme picker cards */
.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 4px 0 8px; }
.theme-card { display: flex; flex-direction: column; gap: 6px; padding: 7px; border-radius: 14px; border: 2px solid var(--border); background: var(--panel-2); cursor: pointer; }
.theme-card.on { border-color: var(--accent); }
.theme-card .tc-prev { height: 56px; border-radius: 9px; position: relative; overflow: hidden; display: block; }
.theme-card .tc-bub { position: absolute; height: 13px; border-radius: 7px; }
.theme-card .tc-bub.other { left: 8px; top: 12px; width: 46%; background: rgba(255,255,255,.85); }
.theme-card .tc-bub.me { right: 8px; top: 31px; width: 40%; }
.theme-card .tc-label { font-size: 12.5px; color: var(--text); text-align: center; }
.tc-day { background: linear-gradient(160deg,#d4e4f5,#e8f0e8); } .tc-day .tc-bub.me { background: #eeffde; }
.tc-night { background: #18222d; } .tc-night .tc-bub.other { background: #2b3543; } .tc-night .tc-bub.me { background: #2e6b3f; }
.tc-nightblue { background: #0e1621; } .tc-nightblue .tc-bub.other { background: #182533; } .tc-nightblue .tc-bub.me { background: #2b5278; }
.tc-ocean { background: linear-gradient(160deg,#c9f0e0,#e8f5d8); } .tc-ocean .tc-bub.me { background: #d3f3ec; }
.tc-system { background: linear-gradient(120deg,#e8f0e8 0 50%,#18222d 50% 100%); } .tc-system .tc-bub.me { background: #6fae6f; }

/* ===== ADMIN-04/05: server dashboard cards + usage bars ===== */
.sys-cards { display: flex; flex-direction: column; gap: 8px; padding: 4px 12px 6px; }
.sys-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; }
.sys-card .sc-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-2); }
.sys-card .sc-top b { color: var(--text); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sys-card .sc-sub { font-size: 11.5px; color: var(--text-2); margin-top: 5px; }
.hbar { height: 8px; border-radius: 5px; background: var(--border); overflow: hidden; margin-top: 7px; }
.hbar-fill { height: 100%; border-radius: 5px; background: var(--accent); transition: width .6s ease; }
.hbar-fill.warm { background: #f5a623; }
.hbar-fill.hot { background: var(--danger); }

/* ===== VPN-01: shop shell ===== */
.shop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(var(--sat) + 10px) 14px 10px; background: var(--panel); border-bottom: 1px solid var(--border); }
.sh-acct { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sh-acct .avatar.sm { width: 36px; height: 36px; }
.sh-hi { font-size: 11px; color: var(--text-2); }
.sh-user { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.sh-title { font-size: 17px; font-weight: 700; }
.sh-wallet { text-align: left; flex-shrink: 0; }
.sh-wallet small { display: block; font-size: 10.5px; color: var(--text-2); }
.sh-wallet b { font-size: 13.5px; color: var(--accent); }
.shop-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); margin: 10px 12px; padding: 12px 14px; }
.shop-card .sc-h { font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.ac-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.ac-row:last-child { border-bottom: 0; }
.ac-row b { font-weight: 600; }
.shop-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 12px 8px; }
.shop-actions .shop-qa { gap: 9px; }
.shop-qa { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); font-size: 12px; color: var(--text); cursor: pointer; text-align: center; transition: transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur); }
.shop-qa .qa-ic { color: var(--accent); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--accent-soft); font-size: 20px; transition: transform var(--dur) var(--ease); }
.shop-qa:hover { border-color: transparent; box-shadow: 0 10px 26px -8px var(--qa-shadow, rgba(99,102,241,.4)); transform: translateY(-2px); }
.shop-qa:hover .qa-ic { transform: translateY(-2px) scale(1.08); }
.shop-qa:active { transform: scale(.97); }
/* vibrant per-tile accents — soft gradient wash + colored icon chip */
.qa-c1 { --qa-shadow: rgba(139,124,240,.42); background: linear-gradient(160deg, color-mix(in srgb, #8B7CF0 12%, var(--panel)), var(--panel)); border-color: color-mix(in srgb, #8B7CF0 22%, var(--border)); }
.qa-c1 .qa-ic { color: #fff; background: linear-gradient(145deg, #8B7CF0, #6D5CE0); box-shadow: 0 6px 14px -4px rgba(139,124,240,.6); }
.qa-c2 { --qa-shadow: rgba(38,190,168,.42); background: linear-gradient(160deg, color-mix(in srgb, #26BEA8 12%, var(--panel)), var(--panel)); border-color: color-mix(in srgb, #26BEA8 22%, var(--border)); }
.qa-c2 .qa-ic { color: #fff; background: linear-gradient(145deg, #2BD4B0, #17A890); box-shadow: 0 6px 14px -4px rgba(38,190,168,.6); }
.qa-c3 { --qa-shadow: rgba(79,140,229,.42); background: linear-gradient(160deg, color-mix(in srgb, #4F8CE5 12%, var(--panel)), var(--panel)); border-color: color-mix(in srgb, #4F8CE5 22%, var(--border)); }
.qa-c3 .qa-ic { color: #fff; background: linear-gradient(145deg, #5B9BF0, #3B75D8); box-shadow: 0 6px 14px -4px rgba(79,140,229,.6); }
.qa-c4 { --qa-shadow: rgba(240,160,60,.42); background: linear-gradient(160deg, color-mix(in srgb, #F0A03C 12%, var(--panel)), var(--panel)); border-color: color-mix(in srgb, #F0A03C 22%, var(--border)); }
.qa-c4 .qa-ic { color: #fff; background: linear-gradient(145deg, #FBB040, #ED8A1E); box-shadow: 0 6px 14px -4px rgba(240,160,60,.6); }
.qa-c5 { --qa-shadow: rgba(237,129,144,.42); background: linear-gradient(160deg, color-mix(in srgb, #ED8190 12%, var(--panel)), var(--panel)); border-color: color-mix(in srgb, #ED8190 22%, var(--border)); }
.qa-c5 .qa-ic { color: #fff; background: linear-gradient(145deg, #F0899A, #E15C72); box-shadow: 0 6px 14px -4px rgba(237,129,144,.6); }
.shop-soon { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 24px; text-align: center; color: var(--text-2); }
.shop-soon .ss-ic { font-size: 40px; }
.shop-soon .ss-t { font-size: 16px; font-weight: 600; color: var(--text); }
.shop-soon .ss-n { font-size: 13px; line-height: 1.7; }

/* ===== VPN-02: wallet ===== */
.wallet-balance { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); margin: 12px; padding: 22px 16px; text-align: center; }
.wallet-balance .wb-label { font-size: 13px; color: var(--text-2); }
.wallet-balance .wb-amount { font-size: 28px; font-weight: 800; color: var(--accent); margin: 6px 0 14px; }
.wallet-balance .btn { max-width: 240px; margin: 0 auto; }
.wtx { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--panel); }
.wtx-main { min-width: 0; }
.wtx-t { font-size: 14px; font-weight: 500; }
.wtx-s { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.wtx-amt { font-size: 14px; font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.wtx-amt.pos { color: #16a34a; } .wtx-amt.neg { color: var(--danger); }
.pay-box { background: var(--accent-soft); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 12px; }
.pay-line { font-size: 13.5px; line-height: 1.9; }
.pay-line b { color: var(--accent); }
.pay-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 12px; margin-top: 8px; font-size: 16px; font-weight: 700; letter-spacing: 1px; }
.pay-name { font-size: 12.5px; color: var(--text-2); margin-top: 6px; }
.topup-row { border-bottom: 1px solid var(--border); padding: 12px 4px; }
.topup-row .tr-amt { font-size: 16px; font-weight: 700; color: var(--accent); margin: 4px 0; }
.topup-row .tr-rt { font-size: 12.5px; color: var(--text); margin: 3px 0; }
.topup-row .tr-img img { max-width: 160px; max-height: 160px; border-radius: 8px; margin: 6px 0; border: 1px solid var(--border); }
.topup-row .tr-time { font-size: 11.5px; color: var(--text-2); }
.topup-row .tr-acts { display: flex; gap: 8px; margin-top: 8px; }

/* ===== VPN-03: store (plans + custom builder) ===== */
.store-tabs { display: flex; gap: 8px; padding: 10px 12px 4px; }
.store-tabs button { flex: 1; padding: 9px; border-radius: var(--r-pill); background: var(--panel-2); color: var(--text-2); font-size: 13px; }
.store-tabs button.on { background: var(--accent); color: #fff; font-weight: 600; }
.reseller-note { margin: 8px 12px 0; padding: 8px 12px; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-sm); font-size: 12.5px; }
.plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 4px 12px 8px; }
.plan-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 12px; text-align: center; }
.plan-card .pc-title { font-size: 14px; font-weight: 600; }
.plan-card .pc-meta { font-size: 12px; color: var(--text-2); margin: 4px 0; }
.plan-card .pc-price { font-size: 16px; font-weight: 800; color: var(--accent); margin: 6px 0 10px; }
.custom-order { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); margin: 4px 12px 14px; padding: 14px; }
.co-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.co-row label { font-size: 14px; }
.stepper { display: flex; align-items: center; gap: 14px; }
.stepper button { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.stepper span { min-width: 40px; text-align: center; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.co-price { text-align: center; font-size: 15px; margin: 10px 0; }
.co-price b { color: var(--accent); font-size: 18px; }
.op-plan { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 15px; font-weight: 800; color: var(--text); }
.op-plan .op-plan-ic { display: flex; width: 32px; height: 32px; border-radius: 10px; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #7c5cff)); flex: 0 0 auto; }
.op-plan .op-plan-ic svg { width: 18px; height: 18px; }
.op-desc { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.75; color: var(--text); background: color-mix(in srgb, var(--accent) 9%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); border-radius: var(--r-md); }
.op-desc .op-desc-ic { display: flex; color: var(--accent); flex: 0 0 auto; margin-top: 1px; }
.op-desc .op-desc-ic svg { width: 16px; height: 16px; }
.order-prev { background: var(--panel-2); border-radius: var(--r-md); padding: 6px 14px; }
.op-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.op-row:last-child { border-bottom: 0; }
.op-row.total b { color: var(--accent); font-size: 17px; }
.op-row.warn b { color: var(--danger); }
/* short of money: said before the tap, with how much is missing */
.op-short { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; padding: 10px 12px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); font-size: 13px; }
.op-short svg { width: 18px; height: 18px; flex-shrink: 0; }
.op-short.hidden { display: none; }
.plan-admin { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.plan-admin .pa-t { font-size: 14px; font-weight: 500; }
.plan-admin .pa-s { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.plan-admin .pa-acts { display: flex; gap: 6px; flex-shrink: 0; }
.chip.danger { background: var(--chip-danger-bg, #fde2e2); color: var(--chip-danger-text, #c0392b); }

/* ===== VPN-04: panel management ===== */
.panel-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 11px 4px; border-bottom: 1px solid var(--border); }
.panel-row .pn-main { min-width: 0; flex: 1; }
.panel-row .pn-t { font-size: 14px; font-weight: 600; }
.panel-row .pn-s { font-size: 11.5px; color: var(--text-2); margin-top: 2px; word-break: break-all; }
.panel-row .pn-test { font-size: 12px; margin-top: 4px; }
.panel-row .pn-acts { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }

/* ===== VPN-05/06: configs + purchase result ===== */
.cfg-block { background: var(--panel-2); border-radius: var(--r-md); padding: 10px 12px; margin: 8px 0; }
.cfg-block .cfg-h { font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.cfg-block .cfg-val { font-size: 12px; word-break: break-all; line-height: 1.6; }
.cfg-block .cfg-acts { display: flex; gap: 8px; margin-top: 8px; }
.cfg-qr { display: flex; justify-content: center; margin: 12px 0; }
.cfg-qr canvas { background: #fff; padding: 10px; border-radius: 12px; }
.cfg-h { font-size: 12.5px; color: var(--text-2); margin: 10px 0 2px; }
.cfg-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); margin: 10px 12px; overflow: hidden; }
.cfg-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; cursor: pointer; }
.cfg-card-head:active { background: var(--panel-2); }
.cfg-card .cc-t { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-card .cc-s { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.cfg-live { max-height: 0; overflow: hidden; transition: max-height .3s ease; padding: 0 14px; }
.cfg-live.open { max-height: 3200px; padding: 0 14px 12px; }
.cfg-traffic { padding: 6px 0; }
.ct-row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 5px 0; }
.ct-row b { font-weight: 600; }
.chip.ok { background: var(--chip-ok-bg, #d4f3e0); color: var(--chip-ok-text, #15803d); }

/* VPN-11: download app */

/* VPN-10: support tickets */
.tk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.tk-row:active { background: var(--panel-2); }
.tk-subj { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-time { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.tk-thread { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.tk-msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.6; }
.tk-msg.user { align-self: flex-start; background: var(--panel-2); }
.tk-msg.admin { align-self: flex-end; background: var(--accent-soft); }
.tk-msg-from { font-size: 11px; color: var(--accent); margin-bottom: 2px; font-weight: 600; }
.tk-msg-t { font-size: 10.5px; color: var(--text-2); margin-top: 3px; }

/* VPN-13: warn chip for expiry */
.chip.warn { background: var(--chip-warn-bg, #fef0d0); color: var(--chip-warn-text, #b45309); }

/* VPN-15: one-click connect + clickable configs */
.connect-row { display: flex; flex-wrap: wrap; gap: 8px; }
.connect-row .btn { flex: 1; min-width: 90px; text-align: center; }
a.cfg-val { display: block; color: var(--accent); text-decoration: none; }
a.cfg-val:active { opacity: .7; }

/* VPN-17 — auto-renew toggle */
.autorenew-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:12px 13px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--panel-2);font-size:13.5px;cursor:pointer;transition:border-color var(--dur)}
.autorenew-row:active{border-color:var(--accent)}
.autorenew-row input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}

/* VPN-18 — in-chat sales assistant */

/* VPN-19 — banner, connection guide, FAQ */
.home-banner{display:flex;align-items:center;gap:8px;margin:10px 12px 4px;padding:11px 13px;border-radius:12px;font-size:13px;line-height:1.6;border:1px solid}
.home-banner .hb-text{flex:1}
.home-banner .hb-x{background:none;border:none;color:inherit;font-size:14px;cursor:pointer;opacity:.7;flex:0 0 auto}
.home-banner.info{background:color-mix(in srgb,#3b82f6 14%,transparent);border-color:#3b82f6;color:#bfdbfe}
.home-banner.warn{background:color-mix(in srgb,#f59e0b 16%,transparent);border-color:#f59e0b;color:#fde68a}
.home-banner.promo{background:color-mix(in srgb,#10b981 15%,transparent);border-color:#10b981;color:#a7f3d0}
.guide-steps{display:flex;flex-direction:column;gap:8px;padding:4px 12px}
.guide-step{padding:11px 13px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.guide-step .gs-t{font-weight:700;font-size:13.5px;margin-bottom:4px;color:var(--accent)}
.guide-step .gs-d{font-size:13px;line-height:1.8;color:var(--text-2)}
.faq-list{display:flex;flex-direction:column;gap:7px;padding:4px 12px 16px}
.faq-item{border:1px solid var(--border);border-radius:12px;background:var(--surface-2);overflow:hidden}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 13px;cursor:pointer;font-size:13.5px;font-weight:600}
.faq-ar{transition:transform .2s;color:var(--text-2)}
.faq-item.open .faq-ar{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;padding:0 13px;font-size:13px;line-height:1.85;color:var(--text-2);transition:max-height .25s,padding .25s}
.faq-item.open .faq-a{max-height:400px;padding:0 13px 13px}

/* VPN-20 — segmented payment-method control */
.seg{display:flex;gap:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:4px}
.seg-b{flex:1;padding:8px 6px;border:none;background:transparent;color:var(--text-2);border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer}
.seg-b.active{background:var(--accent);color:#fff}

/* VPN-21 — revenue chart + maintenance screen */
.rev-chart{display:flex;align-items:flex-end;gap:3px;height:90px;padding:6px 4px 0;border-bottom:1px solid var(--border)}
.rc-col{flex:1;height:100%;display:flex;align-items:flex-end}
.rc-bar{width:100%;min-height:2px;background:linear-gradient(180deg,var(--accent),#6d5dfc);border-radius:3px 3px 0 0}
.rc-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--text-2);padding:5px 2px 2px}
#maintScreen{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px}
.maint-box{text-align:center;max-width:340px}
.maint-ic{font-size:54px;margin-bottom:10px}
.maint-t{font-size:19px;font-weight:700;margin-bottom:8px}
.maint-m{font-size:14px;color:var(--text-2);line-height:1.8;margin-bottom:18px}

/* VPN-24 — PWA install card */
/* our own Android APK card — a touch stronger than the generic PWA card, and its CTA is
   an <a download> rather than a button, so it needs button-ish sizing */
.install-card.blu3-apk{border-width:1.5px;background:color-mix(in srgb,var(--accent) 13%,transparent)}
.install-card.blu3-apk .ic-ic{display:flex;align-items:center}
.install-card.blu3-apk a.btn{flex:0 0 auto;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

.install-card .ic-body{flex:1;min-width:0}
.install-card .ic-t{font-weight:700;font-size:14px;margin-bottom:3px}
.install-card .ic-n{font-size:12px;color:var(--text-2);line-height:1.7}

/* ============================================================================
   REDESIGN POLISH — Midnight Aurora (dark) / Daylight Trust (light)
   Motion + signature accents layered on the token system above.
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  .shop-scroll, .list, .topbar, .auth-wrap, .cfg-live.open { animation: view-in var(--dur) var(--ease) both; }
}
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* gradient accent text for the hero numbers */
.wallet-balance .wb-amount, .sh-wallet b { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* avatar gets the signature gradient instead of flat tint */
.shop-head .avatar, .auth-logo { background: var(--accent-grad); color: #fff; box-shadow: var(--glow); }

/* online presence dot — soft pulse (keyframe used by .avatar .dot above) */
@keyframes presence { 0%,100% { box-shadow: 0 0 0 0 rgba(63,208,106,.5); } 70% { box-shadow: 0 0 0 5px rgba(63,208,106,0); } }

/* primary chips / active tabs pick up the gradient */
.tabs button.active { background: var(--accent-grad); color: #fff; }

/* cards lift subtly on hover (desktop) */
@media (hover: hover) {
  .shop-card, .cfg-card, .plan-card { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .cfg-card:hover, .plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
}

/* skeleton shimmer utility for loading states */
.skeleton { position: relative; overflow: hidden; background: var(--panel-2); border-radius: var(--r-sm); }
.skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 8%, transparent), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { 100% { transform: translateX(-100%); } }
html[dir="ltr"] .skeleton::after { animation-direction: reverse; }

/* connect-row buttons (one-click connect) get the gradient treatment */
.connect-row .btn.small { background: var(--accent-grad); color: #fff; box-shadow: var(--glow); }

/* ============================================================================
   IMMERSIVE AURORA HOME (redesign) — aurora hero + connection orb + sheet
   ============================================================================ */
.home { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.home-hero { position: relative; overflow: hidden; padding: calc(var(--sat) + 12px) 18px 48px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--bg)), var(--bg)); }
.home-hero .blob { position: absolute; border-radius: 50%; filter: blur(42px); opacity: .5; z-index: 0; pointer-events: none; }
.home-hero .blob.b1 { width: 184px; height: 184px; background: var(--accent); top: -44px; right: -34px; }
.home-hero .blob.b2 { width: 172px; height: 172px; background: var(--accent-2); top: 28px; left: -42px; }
@media (prefers-reduced-motion: no-preference) { .home-hero .blob { animation: hb-drift 10s var(--ease) infinite; } .home-hero .blob.b2 { animation-delay: 1.8s; } }
@keyframes hb-drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(16px,12px) scale(1.18); } }
.home-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hb-acct { display: flex; align-items: center; gap: 10px; }
.hb-hi { font-size: 11px; color: var(--text-2); }
.hb-user { font-size: 14px; font-weight: 500; }
.hb-wallet { display: flex; align-items: center; gap: 6px; background: var(--dock-bg); border: 1px solid var(--dock-border); padding: 7px 12px; border-radius: var(--r-pill); font-size: 13px; backdrop-filter: blur(8px); }
.hbw-ic { display: flex; color: var(--accent-2); }
.hb-wallet b { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; margin-top: 16px; min-height: 210px; justify-content: center; }
.hero-status { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; }
.hs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--online); box-shadow: 0 0 8px var(--online); }
.hs-dot.off { background: var(--text-2); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .hs-dot:not(.off) { animation: hb-pulse 1.9s infinite; } }
@keyframes hb-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--online) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } }
.orb { position: relative; width: 154px; height: 154px; margin-top: 14px; border: none; background: none; cursor: pointer; }
.orb-skel { width: 154px; height: 154px; margin: 28px auto; position: relative; }
.orb-halo { position: absolute; inset: -16px; border-radius: 50%; z-index: 0; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 42%, transparent), transparent 68%); }
@media (prefers-reduced-motion: no-preference) { .orb-halo { animation: hb-halo 2.8s var(--ease) infinite; } }
@keyframes hb-halo { 0%,100% { transform: scale(.9); opacity: .6; } 50% { transform: scale(1.08); opacity: 1; } }
.orb-ring { position: absolute; inset: 0; border-radius: 50%; z-index: 1;
  background: conic-gradient(from -90deg, var(--accent) 0deg, var(--accent-2) var(--deg, 180deg), color-mix(in srgb, var(--text-2) 20%, transparent) var(--deg, 180deg)); }
.orb-skel .orb-ring { --deg: 90deg; }
@media (prefers-reduced-motion: no-preference) { .orb-skel .orb-ring { animation: hb-spin 1s linear infinite; } }
@keyframes hb-spin { to { transform: rotate(360deg); } }
.orb-core { position: absolute; inset: 15px; border-radius: 50%; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; z-index: 2; box-shadow: inset 0 0 22px color-mix(in srgb, var(--accent) 16%, transparent); }
.oc-ic { display: flex; color: var(--accent-2); }
.oc-n { font-size: 20px; font-weight: 500; }
.oc-l { font-size: 10.5px; color: var(--text-2); }
.orb.warn .orb-halo { background: radial-gradient(circle, rgba(245,158,11,.42), transparent 68%); }
.orb:active { transform: scale(.97); }
.hero-sub { position: relative; z-index: 2; margin-top: 14px; font-size: 11.5px; color: var(--text-2); }
.cta-primary { width: 100%; border: none; border-radius: var(--r-md); padding: 14px; background: var(--accent-grad); color: #fff; font-weight: 500; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 7px; box-shadow: var(--glow); transition: transform var(--dur) var(--ease); }
.cta-primary:active { transform: scale(.98); }
.cta-primary:disabled { opacity: .8; }
.ld-dot { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: authspin .6s linear infinite; }
/* home — three colour-coded primary actions (buy / renew / my-configs).
   Colour psychology: green = go/buy, amber = renew-before-expiry urgency, violet = manage/trust. */
.home-acts { display: grid; grid-template-columns: 1fr 1.34fr 1fr; align-items: stretch; gap: 9px; padding-bottom: 2px; }
.hact.big { padding: 20px 6px 17px; box-shadow: 0 12px 30px rgba(45,104,224,.34); }
.hact.big .ha-ic { width: 46px; height: 46px; border-radius: 14px; }
.hact.big .ha-ic svg { width: 25px; height: 25px; }
.hact.big b { font-size: 14px; font-weight: 700; }
.hact { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 15px 6px 13px; border: none; border-radius: var(--r-lg); color: #fff; font-family: inherit; position: relative; overflow: hidden; cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur); animation: sc-in .4s var(--ease) both; }
.hact::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 8%, rgba(255,255,255,.30), transparent 55%); pointer-events: none; }
.hact .ha-ic { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; }
.hact .ha-ic svg { width: 21px; height: 21px; }
.hact b { font-size: 12.5px; font-weight: 600; }
.hact:active { transform: scale(.95); }
/* configs = the big middle hero (brand blue); buy = emerald (positive/go); renew = warm coral */
.hact.cfg   { background: linear-gradient(150deg, #2D68E0, #5B8DF0); }
.hact.buy   { background: linear-gradient(150deg, #0EA571, #23C99A); box-shadow: 0 10px 24px rgba(14,165,113,.28); }
.hact.renew { background: linear-gradient(150deg, #F2733B, #F7A05B); box-shadow: 0 10px 24px rgba(242,115,59,.26); }
.hact.buy:nth-child(1) { animation-delay: 0s; } .hact.renew { animation-delay: .06s; } .hact.cfg { animation-delay: .12s; }
.qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* wallet — premium gradient balance card (banking-list inner page) */
.wallet-balance { background: var(--accent-grad); border: none; color: #fff; box-shadow: var(--glow); }
.wallet-balance .wb-label { color: rgba(255,255,255,.85); }
.wallet-balance .wb-amount { color: #fff; -webkit-text-fill-color: #fff; background: none; }
.wallet-balance .btn { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; backdrop-filter: blur(6px); }

/* ============================================================================
   PHASE 1 — home bar (profile+theme), 3-chip row, collapsible notes, richer orb
   ============================================================================ */
.hb-acct { display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 0; }
.hb-acct:active { transform: scale(.97); }
.hb-right { display: flex; align-items: center; gap: 8px; }
.hb-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--dock-bg); border: 1px solid var(--dock-border); color: var(--text); backdrop-filter: blur(8px); transition: transform var(--dur) var(--ease); }
.hb-icon:active { transform: scale(.9); }
.tb-ava { padding: 0; }
.tb-ava .avatar.sm { width: 30px; height: 30px; }
/* collapsible notes */
.notes-rest { max-height: 0; overflow: hidden; transition: max-height .32s var(--ease); }
.notes-rest.open { max-height: 800px; }
.notes-more { display: inline-flex; align-items: center; gap: 6px; margin: 8px 2px 0; padding: 8px 14px; border-radius: var(--r-pill); background: var(--panel-2); color: var(--accent); font-size: 12.5px; font-weight: 500; }
.notes-more span { display: flex; transition: transform var(--dur) var(--ease); }
.notes-more.open span { transform: rotate(180deg); }
/* richer connection-orb animation (both themes) */
.orb::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--accent-2) 55%, transparent) 40deg, transparent 120deg); opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .orb::before { animation: orb-sweep 5.5s linear infinite; }
  .orb-core { animation: orb-breathe 4s var(--ease) infinite; }
}
@keyframes orb-sweep { to { transform: rotate(360deg); } }
@keyframes orb-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(.97); } }
.orb-halo { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 50%, transparent), transparent 70%); }

/* ============================================================================
   PHASE 2 — free test/gift account: gift orb + celebratory burst animation
   ============================================================================ */
.orb.empty.gift .oc-ic { color: var(--accent-2); }
.orb.empty.gift .orb-core { box-shadow: inset 0 0 26px color-mix(in srgb, var(--accent-2) 24%, transparent); }
.gift-burst { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none;
  background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%); animation: gb-fade 1.8s ease forwards; }
@keyframes gb-fade { 0% { opacity: 0; } 10%,80% { opacity: 1; } 100% { opacity: 0; } }
.gb-card { display: flex; flex-direction: column; align-items: center; gap: 9px; animation: gb-pop .6s var(--ease) both; }
@keyframes gb-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
.gb-box { width: 98px; height: 98px; border-radius: 26px; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: var(--glow); animation: gb-shake .5s .5s ease; }
.gb-box svg { width: 48px; height: 48px; }
@keyframes gb-shake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
.gb-title { font-size: 18px; font-weight: 700; color: var(--text); }
.gb-sub { font-size: 13px; color: var(--text-2); }
.gb-confetti { position: absolute; top: 44%; left: 50%; }
.gb-confetti i { position: absolute; width: 9px; height: 9px; border-radius: 2px; background: var(--accent); animation: gb-fly 1.1s ease-out forwards; animation-delay: .45s; }
.gb-confetti i:nth-child(even) { background: var(--accent-2); }
.gb-confetti i:nth-child(3n) { background: #FFD166; }
.gb-confetti i:nth-child(3n+1) { background: #FF7A9C; }
@keyframes gb-fly { 0% { opacity: 1; transform: translate(0,0) rotate(0); } 100% { opacity: 0; transform: translate(calc(cos(var(--i) * 1rad * 16) * 150px), calc(sin(var(--i) * 1rad * 16) * 150px)) rotate(400deg); } }

/* ============================================================================
   HOME — the switch (hm-*/sw-*/ss-*) lives further down; this block is the leftover
   shared pieces the rest of the app still uses.
   ============================================================================ */
@property --deg { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes sc-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
/* coming-soon services teaser button */
.svc-soon { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--r-md); background: var(--panel); border: 1px dashed var(--border); text-align: right; transition: transform var(--dur) var(--ease), border-color var(--dur); }
.svc-soon:active { transform: scale(.99); }
.svc-soon:hover { border-color: var(--accent); }
.svc-soon .ss-rocket { font-size: 22px; }
.svc-soon .ss-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.svc-soon .ss-txt b { font-size: 13.5px; }
.svc-soon .ss-txt small { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.svc-soon .ss-peek { display: flex; }
.svc-soon .ss-peek i { width: 30px; height: 30px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 15px; font-style: normal; margin-right: -8px; }
/* referral — prominent invite banner (growth engine, placed in several spots) */
.ref-hero { text-align: center; padding: 6px 8px 12px; }
.ref-hero .ref-emoji { font-size: 46px; }
.ref-hero .ref-h { font-size: 19px; font-weight: 700; margin-top: 6px; }
.ref-hero .ref-sub { font-size: 13px; color: var(--text-2); line-height: 1.8; margin-top: 7px; }
/* prominent home banner (configs) — distinct teal so it stands apart from the violet invite */
.hp-banner { display: flex; align-items: center; gap: 13px; width: 100%; padding: 15px 16px; border: none; border-radius: var(--r-lg); color: #fff; text-align: right; position: relative; overflow: hidden; transition: transform var(--dur) var(--ease); }
.hp-banner:active { transform: scale(.98); }
.hp-banner::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 88% 12%, rgba(255,255,255,.26), transparent 46%); pointer-events: none; }
.hp-banner.configs { background: linear-gradient(135deg, #2BB6A8, #4FB6E5); box-shadow: 0 10px 26px rgba(43,182,168,.30); }
.hp-banner .hp-emoji { width: 44px; height: 44px; border-radius: 13px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; position: relative; }
.hp-banner .hp-emoji svg { width: 24px; height: 24px; }
.hp-banner .hp-tx { flex: 1; min-width: 0; position: relative; }
.hp-banner .hp-tx b { font-size: 15px; }
.hp-banner .hp-tx small { display: block; font-size: 12px; opacity: .92; margin-top: 2px; }
.hp-banner .hp-go { position: relative; opacity: .85; display: flex; }
@keyframes sk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.hb-login { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-grad); color: #fff; border: none; border-radius: var(--r-pill); padding: 9px 14px; font-family: inherit; font-size: 12.5px; font-weight: 600; box-shadow: var(--glow); }
.hb-login svg { width: 16px; height: 16px; }
.hb-acct .avatar.sm svg { width: 20px; height: 20px; color: var(--accent); }
/* guest-first soft auth modal (centered card, gradient header, 4 fields) */
.auth-overlay { position: fixed; inset: 0; z-index: 320; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 20px; animation: ds-fade .2s ease; }
.terms-body { font-size: 13.5px; line-height: 2; color: var(--text); padding: 4px 2px 12px; max-height: 60vh; overflow-y: auto; }
.terms-body h4 { font-size: 15px; font-weight: 800; margin: 12px 0 6px; color: var(--text); }
.terms-body b { color: var(--text); }
/* guest landing card for account-only tabs */
.guest-cta { text-align: center; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; }
.guest-cta .gc-ic { width: 72px; height: 72px; border-radius: 22px; background: var(--accent-grad); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--glow); margin-bottom: 16px; }
.guest-cta .gc-ic svg { width: 36px; height: 36px; }
.guest-cta .gc-t { font-size: 17px; font-weight: 700; }
.guest-cta .gc-s { font-size: 13px; color: var(--text-2); line-height: 1.8; margin: 8px 0 18px; max-width: 280px; }
.guest-cta .btn { width: 100%; max-width: 260px; }
/* guest feature-showcase (see what a section offers, register to use) */
.guest-preview { padding: 14px 14px 20px; }
.gp-hero { text-align: center; padding: 16px 16px 22px; border-radius: var(--r-lg); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, var(--panel)), var(--panel)); border: 1px solid var(--border); margin-bottom: 14px; }
.gp-hero .gp-ic { width: 64px; height: 64px; border-radius: 20px; background: var(--accent-grad); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--glow); margin: 0 auto 12px; animation: gb-shake 3s ease-in-out infinite; }
.gp-hero .gp-ic svg { width: 32px; height: 32px; }
.gp-hero .gp-t { font-size: 18px; font-weight: 700; }
.gp-hero .gp-s { font-size: 12.5px; color: var(--text-2); margin-top: 6px; }
.gp-feats { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.gp-feat { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--border); animation: sc-in .4s var(--ease) both; }
.gp-feat:nth-child(2) { animation-delay: .06s; } .gp-feat:nth-child(3) { animation-delay: .12s; }
.gp-feat .gpf-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.gp-feat .gpf-ic svg { width: 21px; height: 21px; }
.gp-feat .gpf-tx b { font-size: 14px; font-weight: 500; display: block; }
.gp-feat .gpf-tx small { font-size: 11.5px; color: var(--text-2); }
.guest-preview .cfg-hero { width: 100%; margin: 0; }
/* premium welcome overlay (after register/login) */
.welcome-ov { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 30%, var(--bg)), var(--bg) 70%); animation: wl-fade .4s ease; }
.welcome-ov.out { animation: wl-fadeout .4s ease forwards; }
@keyframes wl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wl-fadeout { to { opacity: 0; transform: scale(1.04); } }
.welcome-ov .wl-rings { position: absolute; top: 42%; left: 50%; }
.welcome-ov .wl-rings span { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); animation: wl-ring 1.8s var(--ease) infinite; }
.welcome-ov .wl-rings span:nth-child(2) { animation-delay: .35s; }
.welcome-ov .wl-rings span:nth-child(3) { animation-delay: .7s; }
@keyframes wl-ring { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.welcome-ov .wl-card { position: relative; text-align: center; animation: wl-pop .6s var(--ease) both; }
@keyframes wl-pop { 0% { transform: scale(.5) translateY(10px); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.welcome-ov .wl-badge { width: 96px; height: 96px; border-radius: 30px; background: var(--accent-grad); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; box-shadow: var(--glow); animation: wl-badge 2s var(--ease) infinite; }
.welcome-ov .wl-badge svg { width: 46px; height: 46px; }
@keyframes wl-badge { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-6deg); } }
.welcome-ov.farewell .wl-badge { font-size: 46px; animation: wl-wave 1.2s var(--ease) infinite; }
@keyframes wl-wave { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.welcome-ov .wl-t { font-size: 24px; font-weight: 800; color: var(--text); }
.welcome-ov .wl-s { font-size: 14px; color: var(--text-2); margin-top: 9px; }
.welcome-ov .wl-confetti { position: absolute; top: 42%; left: 50%; }
.welcome-ov .wl-confetti i { position: absolute; width: 10px; height: 10px; border-radius: 2px; background: var(--accent); animation: wl-fly 1.4s ease-out forwards; animation-delay: .25s; }
.welcome-ov .wl-confetti i:nth-child(even) { background: var(--accent-2); }
.welcome-ov .wl-confetti i:nth-child(3n) { background: #FFD166; }
.welcome-ov .wl-confetti i:nth-child(3n+1) { background: #FF7A9C; border-radius: 50%; }
@keyframes wl-fly { 0% { opacity: 1; transform: translate(0,0) rotate(0); } 100% { opacity: 0; transform: translate(calc(cos(var(--i) * 1rad * 14) * 180px), calc(sin(var(--i) * 1rad * 14) * 180px)) rotate(420deg); } }
/* welcome/announcement popup on app open */
.onboard-overlay { position: fixed; inset: 0; z-index: 300; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 20px; animation: ds-fade .2s ease; }
.onboard-card { position: relative; width: 100%; max-width: 380px; max-height: 86vh; overflow-y: auto; background: var(--panel); border-radius: var(--r-xl); padding: 26px 20px 18px; text-align: center; box-shadow: var(--shadow); animation: gb-pop .4s var(--ease) both; }
.onboard-card .onboard-x { position: absolute; top: 12px; left: 12px; width: 30px; height: 30px; border-radius: 50%; background: var(--panel-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.onboard-card .onboard-emoji { font-size: 44px; }
.onboard-card .onboard-title { font-size: 18px; font-weight: 700; margin: 8px 0 10px; }
.onboard-card .onboard-body { font-size: 13.5px; color: var(--text-2); line-height: 1.9; text-align: right; margin-bottom: 16px; }
.onboard-card .btn { width: 100%; margin-bottom: 9px; }
.onboard-card .onboard-later { background: none; border: none; color: var(--text-2); font-family: inherit; font-size: 13px; padding: 6px; }
.onboard-card .install-hero { font-size: 46px; }
.onboard-card .update-hero { font-size: 46px; animation: gb-shake 2.2s ease-in-out infinite; }
.onboard-card .changelog { text-align: right; display: flex; flex-direction: column; gap: 9px; margin: 6px 0 16px; max-height: 40vh; overflow-y: auto; }
.onboard-card .cl-row { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.7; color: var(--text); background: var(--panel-2); border-radius: var(--r-md); padding: 11px 12px; animation: sc-in .35s var(--ease) both; }
.onboard-card .cl-row .cl-dot { display: flex; color: var(--accent); flex: 0 0 auto; margin-top: 1px; }
.onboard-card .cl-row .cl-dot svg { width: 16px; height: 16px; }
.onboard-card .install-steps { text-align: right; margin: 4px 0 16px; display: flex; flex-direction: column; gap: 11px; background: var(--panel-2); border-radius: var(--r-md); padding: 14px; }
.onboard-card .ins-step { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.8; color: var(--text); }
.onboard-card .ins-step .ins-n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
@keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } }
/* connection status bar (disconnect → reconnect → «وصل شد») */
/* padding-top clears the status bar (Android reports safe-area-inset-top as 0 under the
   Capacitor WebView, so a bare 8px put the text under the clock/battery row) */
.conn-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 200; text-align: center; font-size: 12.5px; font-weight: 600; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; animation: cb-in .3s var(--ease); box-sizing: border-box; line-height: 1.5;
  padding: max(8px, calc(var(--sat) + 6px)) 12px 8px; }
@keyframes cb-in { from { transform: translateY(-100%); } to { transform: none; } }
.conn-bar.warn { background: linear-gradient(135deg, #E0A94E, #E8843C); }
.conn-bar.ok { background: linear-gradient(135deg, #2FBF71, #38D17A); }
.conn-bar .cb-spin { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: authspin .7s linear infinite; }
.conn-bar .cb-alt { background: rgba(255,255,255,.95); color: #b45309; font-weight: 700; font-size: 12px; padding: 4px 12px; border-radius: 999px; margin-inline-start: 4px; }
.conn-bar .cb-alt:active { transform: scale(.96); }
/* in-app new-message banner (shown when app is open but on another chat) */
.ia-notif { position: fixed; top: calc(var(--sat) + 8px); left: 50%; transform: translate(-50%,-150%); z-index: 250; display: flex; align-items: center; gap: 10px; width: min(440px,92vw); padding: 10px 14px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.28); cursor: pointer; opacity: 0; touch-action: pan-y; user-select: none; transition: transform .3s cubic-bezier(.2,.9,.3,1), opacity .3s; }
.ia-notif::before { content: ''; position: absolute; top: 50%; inset-inline-start: 6px; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 3px; background: var(--accent); opacity: .5; }
.ia-notif.show { transform: translate(-50%,0); opacity: 1; }
.ia-notif .ia-av { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.ia-notif .ia-tx { flex: 1; min-width: 0; }
.ia-notif .ia-name { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ia-notif .ia-body { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; text-align: start; }  /* same as .chat-item .preview */
/* app-wide announcement bar (everywhere except chat) */
#annBar:empty { display: none; }
.ann { display: flex; align-items: center; gap: 9px; padding: 10px 14px; font-size: 12.5px; color: #fff; animation: ann-in .3s var(--ease); }
@keyframes ann-in { from { transform: translateY(-100%); } to { transform: none; } }
.ann.info { background: linear-gradient(135deg, #5b8def, #7c6cf0); }
.ann.warn { background: linear-gradient(135deg, #e0a94e, #e8843c); }
.ann.promo { background: var(--accent-grad); }
.ann .ann-ic { font-size: 16px; flex: 0 0 auto; }
.ann .ann-tx { flex: 1; min-width: 0; line-height: 1.6; }
.ann .ann-x { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.22); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.user-item .ct-go { display: flex; color: var(--accent); flex: 0 0 auto; }
.nc-back { display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-size: 13px; color: var(--accent); background: none; border: none; padding: 4px 2px 8px; }
.nc-back span { display: inline-flex; }
.nc-back span svg { width: 18px; height: 18px; }
.sup-actions { display: flex; flex-direction: column; gap: 9px; padding: 12px; }
.sup-actions .btn span { display: inline-flex; vertical-align: -3px; margin-left: 4px; }
.app-footer { text-align: center; padding: 18px 16px calc(18px + var(--sab)); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.af-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.af-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--r-pill); background: var(--panel); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur); }
.af-chip .afc-ic { display: inline-flex; font-size: 14px; line-height: 1; }
.af-chip .afc-ic svg { width: 15px; height: 15px; }
.af-chip:active { transform: scale(.95); }
.af-chip:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.af-chip.up { color: #fff; background: linear-gradient(135deg, #6a4bf0, #2f7cf6); border-color: transparent; box-shadow: 0 8px 20px -9px rgba(47,124,246,.6); }
.af-meta { font-size: 11.5px; color: var(--text-2); background: none; border: none; font-family: inherit; opacity: .8; cursor: pointer; padding: 2px; }
.af-meta b { color: var(--text); font-weight: 700; }
.af-meta:active { opacity: .5; }
.wtx-acts { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.btn.small.danger { background: transparent; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); box-shadow: none; }
.btn.small.danger svg { width: 16px; height: 16px; }
.btn.small.danger:active { background: color-mix(in srgb, var(--danger) 12%, transparent); }
/* coming-soon sheet list */
.soon-list { display: flex; flex-direction: column; gap: 9px; }
.soon-item { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--r-md); background: var(--panel-2); }
.soon-item .si-ic { font-size: 22px; }
.soon-item .si-b { flex: 1; min-width: 0; }
.soon-item .si-b b { font-size: 13.5px; }
.soon-item .si-b small { display: block; font-size: 11px; color: var(--text-2); margin-top: 2px; }
.soon-item .si-soon { font-size: 10px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 4px 9px; border-radius: 10px; flex: 0 0 auto; }

/* ============================================================================
   PHASE 3 — configs redesign: action grid, one-click connect, inline QR, invoice
   ============================================================================ */
.cfg-card { border: 1px solid var(--border); border-radius: var(--r-lg); margin: 10px 12px; overflow: hidden; background: var(--panel); }
.cfg-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; cursor: pointer; transition: background var(--dur); }
.cfg-card-head:active { background: var(--panel-2); }
.cfg-card-head .cc-t { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-card-head .cc-s { font-size: 11.5px; color: var(--text-2); margin-top: 3px; }
.cfg-live { max-height: 0; overflow: hidden; transition: max-height .34s var(--ease); }
.cfg-live.open { max-height: 3200px; }
.cfg-live > * { padding-left: 14px; padding-right: 14px; }
.cfg-traffic { padding: 12px 14px; background: var(--panel-2); border-radius: var(--r-md); margin: 0 14px 12px; }
.ct-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; }
.ct-row b { font-weight: 500; }
.hbar { height: 8px; border-radius: 6px; background: color-mix(in srgb, var(--text-2) 20%, transparent); overflow: hidden; margin: 8px 0; }
.hbar-fill { height: 100%; border-radius: 6px; background: var(--accent-grad); transition: width .5s var(--ease); }
.hbar-fill.warm { background: linear-gradient(90deg, #F4BC6B, #F0A862); }
.hbar-fill.hot { background: linear-gradient(90deg, #EE8E9B, #F0A862); }
.cfg-block { margin: 0 14px 12px; }
.cfg-h { font-size: 12.5px; color: var(--text-2); margin-bottom: 7px; }
.cfg-h-row { display: flex; align-items: center; justify-content: space-between; }
.cfg-val { font-size: 11.5px; padding: 9px 11px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-sm); word-break: break-all; color: var(--text); display: block; }
.cfg-acts { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.cfg-acts .btn.small span { display: inline-flex; vertical-align: -3px; margin-left: 3px; }
.cfg-acts .btn.small.on { background: var(--accent-soft); color: var(--accent); }
.connect-card { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--panel)), var(--panel)); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 13px 14px; }
.connect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.connect-app { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 6px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--border); color: var(--text); font-size: 12px; font-weight: 500; transition: transform var(--dur) var(--ease), border-color var(--dur); }
.connect-app:hover { border-color: var(--accent); }
.connect-app:active { transform: scale(.96); }
.connect-app .ca-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-grad); }
.connect-hint { font-size: 11px; color: var(--text-2); line-height: 1.8; margin: 9px 2px 2px; }
.cfg-help { display: flex; gap: 9px; padding: 4px 14px 16px; }
.cfg-help .cfg-sbtn { padding: 12px 6px; }
/* download — per-platform groups + video tutorial rows */
.tut-list { display: flex; flex-direction: column; gap: 8px; }
.tut-row { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--border); color: var(--text); }
.tut-row .tut-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; flex: 0 0 auto; }
.tut-row .tut-tx { flex: 1; min-width: 0; }
.tut-row .tut-tx b { font-size: 13px; font-weight: 500; display: block; }
.tut-row .tut-tx small { font-size: 11px; color: var(--text-2); }
.tut-row .tut-go { display: flex; color: var(--text-2); transform: rotate(90deg); }
.store-cfg-link { display: flex; align-items: center; gap: 9px; width: calc(100% - 24px); margin: 10px 12px 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--accent-soft); border: none; color: var(--accent); font-family: inherit; font-size: 13.5px; font-weight: 600; }
.store-cfg-link > span { display: flex; }
.store-cfg-link > span svg { width: 19px; height: 19px; }
.store-cfg-link .scl-go { margin-inline-start: auto; transform: rotate(90deg); opacity: .7; }
/* store top sections (وی‌پی‌ان / خدمات) */
.store-tabs { display: flex; gap: 8px; padding: 10px 12px 4px; }
.store-tabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; font-family: inherit; font-size: 13px; font-weight: 500; padding: 11px 6px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--border); color: var(--text-2); transition: background var(--dur), color var(--dur); }
.store-tabs button span { display: flex; }
.store-tabs button span svg { width: 18px; height: 18px; }
.store-tabs button.on { background: var(--accent-grad); color: #fff; border-color: transparent; }
.svc-soon-hero { margin: 12px; padding: 20px 16px; border-radius: var(--r-lg); background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 18%, var(--panel)), var(--panel)); border: 1px solid var(--border); text-align: center; }
.svc-soon-hero .ssh-badge { display: inline-block; font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: 10px; }
.svc-soon-hero .ssh-t { font-size: 16px; font-weight: 600; }
.svc-soon-hero .ssh-s { font-size: 12px; color: var(--text-2); line-height: 1.7; margin-top: 6px; }
.soon-list { display: flex; flex-direction: column; gap: 9px; padding: 0 12px; }
.soon-item.disabled { opacity: .72; }
.soon-item.disabled .si-ic { filter: grayscale(.2); }
.qr-inline { display: flex; justify-content: center; align-items: center; max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.qr-inline.open { max-height: 320px; margin-top: 10px; }
.qr-inline canvas { border-radius: var(--r-sm); background: #fff; padding: 10px; flex: 0 0 auto; }
.qr-load { display: flex; align-items: center; justify-content: center; min-height: 180px; width: 100%; }
.qr-load .ld-dot { width: 26px; height: 26px; border-width: 3px; border-color: var(--accent-soft); border-top-color: var(--accent); }
.cfg-actions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 14px 12px; }
.cfg-act { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 4px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-size: 11.5px; transition: transform var(--dur) var(--ease), border-color var(--dur); }
.cfg-act span { display: flex; color: var(--accent); }
.cfg-act.primary { background: var(--accent-grad); color: #fff; border: none; box-shadow: var(--glow); }
.cfg-act.primary span { color: #fff; }
.cfg-act:hover { border-color: var(--accent); }
.cfg-act:active { transform: scale(.95); }
.ar-ic { display: inline-flex; vertical-align: -3px; color: var(--accent); }
/* in-app invoice */
.invoice { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--panel-2); }
.inv-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px; background: var(--accent-grad); color: #fff; }
.inv-brand { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.inv-logo { display: flex; }
.inv-meta { font-size: 12px; opacity: .9; text-align: left; line-height: 1.7; }
.inv-rows { padding: 6px 16px; }
.inv-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.inv-row span { color: var(--text-2); }
.inv-total { display: flex; justify-content: space-between; padding: 14px 16px; font-size: 16px; font-weight: 700; }
.inv-total b { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.inv-foot { padding: 0 16px 14px; font-size: 11px; color: var(--text-2); text-align: center; }

/* ----------------------------------------------------------------------------
   CONFIGS REDESIGN (Concept 1) — card head w/ usage ring + friendly expanded body
   ---------------------------------------------------------------------------- */
.cfg-card.inactive { opacity: .82; }
.cfg-card-head { gap: 12px; }
/* The list's mini gauge — the home card's shape at 44x27, so the same reading works everywhere. */
.cfg-mg { flex: 0 0 44px; overflow: visible; }
.cfg-mg .mg-track { fill: none; stroke: var(--panel-2); stroke-width: 5; stroke-linecap: round; }
.cfg-mg .mg-fill { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round;
  transition: stroke-dashoffset .6s var(--ease); }
.cfg-mg.low .mg-fill { stroke: #D9772E; }
.cfg-card.inactive .cfg-mg .mg-fill { stroke: var(--text-2); opacity: .5; }
.cfg-renew { border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); cursor: pointer; font: inherit;
  background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent);
  border-radius: var(--r-pill); padding: 7px 13px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.cfg-renew:active { transform: scale(.96); }


.cfg-pct { font-size: 11px; font-weight: 600; }
.cfg-headinfo { flex: 1; min-width: 0; }
.cfg-headside { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.cfg-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--online); box-shadow: 0 0 7px var(--online); }
.cfg-status-dot.off { background: var(--text-2); box-shadow: none; }
.cfg-chev { display: flex; color: var(--text-2); transition: transform var(--dur) var(--ease); }
.cfg-card-head.open .cfg-chev { transform: rotate(180deg); }
/* most-prominent: copy ALL configs */
.cfg-copyall { display: flex; align-items: center; gap: 12px; width: calc(100% - 28px); margin: 0 14px 12px; padding: 13px 14px; border: none; border-radius: var(--r-lg); background: var(--accent-grad); color: #fff; box-shadow: var(--glow); text-align: right; transition: transform var(--dur) var(--ease); }
.cfg-copyall:active { transform: scale(.98); }
.cfg-copyall .cc-ic { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cfg-copyall .cc-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cfg-copyall .cc-tx b { font-size: 14px; }
.cfg-copyall .cc-tx small { font-size: 11px; opacity: .9; }
.cfg-copyall .cc-n { font-size: 13px; font-weight: 700; background: rgba(255,255,255,.22); border-radius: 10px; padding: 3px 10px; flex: 0 0 auto; }
/* sub link block */
.cfg-sub { margin: 0 14px 12px; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel-2); }
.cfg-sub-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; margin-bottom: 9px; }
.cfg-sub-h .csh-ic { display: flex; color: var(--accent); }
.cfg-sub-h .csh-ic svg { width: 17px; height: 17px; }
.cfg-sub-url { font-size: 11.5px; padding: 9px 11px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); word-break: break-all; color: var(--text-2); }
.cfg-sub-acts { display: flex; gap: 7px; margin-top: 9px; }
.cfg-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--border); color: var(--text); font-size: 12px; font-weight: 500; font-family: inherit; transition: transform var(--dur) var(--ease), border-color var(--dur), background var(--dur); }
.cfg-btn span { display: flex; color: var(--accent); }
.cfg-btn span svg { width: 17px; height: 17px; }
.cfg-btn.primary { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.cfg-btn.primary span { color: var(--accent); }
.cfg-btn.on { background: var(--accent); color: #fff; border-color: transparent; }
.cfg-btn.on span { color: #fff; }
.cfg-btn:active { transform: scale(.96); }
.cfg-sub .qr-inline.open { max-height: 280px; margin-top: 12px; }
/* one-click connect */
.cfg-connect { margin: 0 14px 12px; }
.cfg-connect-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; margin-bottom: 9px; }
.cfg-connect-h span { display: flex; color: var(--accent-2); }
.cfg-connect-h span svg { width: 17px; height: 17px; }
/* management buttons — labeled, friendly */
.cfg-manage { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 14px 12px; }
.cfg-mbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 13px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--border); color: var(--text); text-align: right; transition: transform var(--dur) var(--ease), border-color var(--dur); }
.cfg-mbtn .m-ic { display: flex; color: var(--accent); margin-bottom: 4px; }
.cfg-mbtn .m-ic svg { width: 20px; height: 20px; }
.cfg-mbtn b { font-size: 13px; font-weight: 500; }
.cfg-mbtn small { font-size: 10.5px; color: var(--text-2); }
.cfg-mbtn:hover { border-color: var(--accent); }
.cfg-mbtn:active { transform: scale(.97); }
/* auto-renew toggle switch */
.cfg-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 14px 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--border); cursor: pointer; }
.cfg-switch .cs-l { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cfg-switch .cs-ic { display: flex; color: var(--accent); flex: 0 0 auto; }
.cfg-switch .cs-t b { font-size: 13px; font-weight: 500; display: block; }
.cfg-switch .cs-t small { font-size: 10.5px; color: var(--text-2); }
.cfg-switch .cs-tog { position: relative; width: 46px; height: 27px; border-radius: 14px; background: color-mix(in srgb, var(--text-2) 35%, transparent); transition: background var(--dur); flex: 0 0 auto; }
.cfg-switch .cs-tog input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cfg-switch .cs-knob { position: absolute; top: 3px; right: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: transform var(--dur) var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.cfg-switch .cs-tog:has(input:checked) { background: var(--accent); }
.cfg-switch .cs-tog input:checked + .cs-knob { transform: translateX(-19px); }
/* enable/disable (full-width, subtle) */
.cfg-toggle-en { display: flex; align-items: center; justify-content: center; gap: 7px; width: calc(100% - 28px); margin: 0 14px 14px; padding: 11px; border-radius: var(--r-md); background: transparent; border: 1px solid var(--border); color: var(--text-2); font-size: 12.5px; font-family: inherit; transition: border-color var(--dur); }
.cfg-toggle-en span { display: flex; }
.cfg-toggle-en:hover { border-color: var(--accent); color: var(--text); }

/* ----------------------------------------------------------------------------
   CONFIGS — clear hierarchy: list filter tabs + ONE hero action + quiet manage
   ---------------------------------------------------------------------------- */
.cfg-tabs { display: flex; gap: 7px; padding: 6px 12px 4px; }
.cfg-tabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-size: 12.5px; font-weight: 500; padding: 9px 4px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--border); color: var(--text-2); transition: background var(--dur), color var(--dur); }
.cfg-tabs button.on { background: var(--accent-grad); color: #fff; border-color: transparent; }
.cfg-tabs button .cft-n { font-size: 11px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: color-mix(in srgb, var(--text-2) 22%, transparent); display: inline-flex; align-items: center; justify-content: center; }
.cfg-tabs button.on .cft-n { background: rgba(255,255,255,.25); color: #fff; }
/* group labels */
.cfg-grp-label { font-size: 11.5px; font-weight: 500; color: var(--accent); margin: 4px 16px 9px; }
.cfg-grp-label.muted { color: var(--text-2); margin-top: 16px; }
/* THE hero action — the one button the user should press */
.cfg-hero { display: flex; align-items: center; gap: 13px; width: calc(100% - 28px); margin: 0 14px 10px; padding: 15px 16px; border: none; border-radius: var(--r-lg); background: var(--accent-grad); color: #fff; box-shadow: var(--glow); text-align: right; font-family: inherit; transition: transform var(--dur) var(--ease); }
.cfg-hero:active { transform: scale(.98); }
.cfg-hero .ch-ic { width: 42px; height: 42px; border-radius: 13px; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cfg-hero .ch-ic svg { width: 22px; height: 22px; }
.cfg-hero .ch-tx { flex: 1; min-width: 0; }
.cfg-hero .ch-tx b { font-size: 15px; font-weight: 600; }
.cfg-hero .ch-tx small { display: block; font-size: 11.5px; opacity: .92; margin-top: 2px; line-height: 1.5; }
/* secondary connect buttons — clearly subordinate (soft accent) */
.cfg-sec { display: flex; gap: 8px; margin: 0 14px 8px; }
.cfg-sbtn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 6px; border-radius: var(--r-md); background: var(--accent-soft); border: none; color: var(--accent); font-size: 12px; font-weight: 500; font-family: inherit; transition: transform var(--dur) var(--ease), background var(--dur); }
.cfg-sbtn span { display: flex; }
.cfg-sbtn span svg { width: 16px; height: 16px; }
.cfg-sbtn.on { background: var(--accent); color: #fff; }
.cfg-sbtn:active { transform: scale(.96); }
/* upgraded action buttons — only those with a colored icon-chip (.sb-ic); others untouched */
.cfg-sbtn:has(.sb-ic) { flex-direction: column; gap: 7px; padding: 13px 6px 11px; border-radius: 15px; background: var(--panel); border: 1px solid var(--border); color: var(--text); font-weight: 700; }
.cfg-sbtn .sb-ic { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; color: #fff; flex: 0 0 auto; background: linear-gradient(140deg, var(--sb-col, var(--accent)), color-mix(in srgb, var(--sb-col, var(--accent)) 62%, #000)); box-shadow: 0 5px 13px -5px var(--sb-col, var(--accent)); }
.cfg-sbtn .sb-ic svg { width: 17px; height: 17px; }
.cfg-sbtn:has(.sb-ic):hover { box-shadow: 0 8px 20px -10px var(--sb-col, var(--accent)); border-color: color-mix(in srgb, var(--sb-col, var(--accent)) 40%, var(--border)); }
.cfg-sbtn.sb-copy { --sb-col: #16B981; } .cfg-sbtn.sb-qr { --sb-col: #8B5CF6; }
.cfg-sbtn.sb-chat { --sb-col: #3B82F6; } .cfg-sbtn.sb-guide { --sb-col: #F59E0B; }
.cfg-sbtn.sb-dl { --sb-col: #06B6D4; } .cfg-sbtn.sb-app { --sb-col: #10B981; }
.cfg-sbtn.on:has(.sb-ic) { background: var(--accent); color: #fff; border-color: transparent; }
.cfg-sbtn.on .sb-ic { background: rgba(255,255,255,.25); box-shadow: none; }
.cfg-help .cfg-sbtn:has(.sb-ic) { flex-direction: row; padding: 12px 6px; }
.cfg-help .cfg-sbtn .sb-ic { width: 28px; height: 28px; border-radius: 9px; }
.cfg-sec ~ .qr-inline { margin: 0 14px; }
.cfg-sec ~ .qr-inline.open { max-height: 320px; margin: 2px 14px 12px; }
/* management — quiet neutral rows (iOS-style list) */
.cfg-mlist { margin: 0 14px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.cfg-mrow { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 14px; background: none; border: none; border-bottom: 1px solid var(--border); color: var(--text); font-family: inherit; text-align: right; transition: background var(--dur); }
.cfg-mrow:last-child { border-bottom: none; }
.cfg-mrow:active { background: var(--panel-2); }
.cfg-mrow .mr-ic { display: flex; color: var(--text-2); flex: 0 0 auto; }
.cfg-mrow .mr-ic svg { width: 20px; height: 20px; }
.cfg-mrow.accent .mr-ic { color: var(--online); }      /* تمدید = soft green (money / positive) */
.cfg-mrow .mr-lb { flex: 1; min-width: 0; }
.cfg-mrow .mr-lb b { font-size: 13.5px; font-weight: 500; display: block; }
.cfg-mrow .mr-lb small { font-size: 11px; color: var(--text-2); }
.cfg-mrow .mr-ar { display: flex; color: var(--text-2); flex: 0 0 auto; transform: rotate(90deg); }
.cfg-mrow .mr-ar svg { width: 16px; height: 16px; }
.cfg-mrow.swrow { cursor: pointer; }
.cfg-mrow.swrow .cs-tog { position: relative; width: 46px; height: 27px; border-radius: 14px; background: color-mix(in srgb, var(--text-2) 35%, transparent); transition: background var(--dur); flex: 0 0 auto; }
.cfg-mrow.swrow .cs-tog input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cfg-mrow.swrow .cs-knob { position: absolute; top: 3px; right: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: transform var(--dur) var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.cfg-mrow.swrow .cs-tog:has(input:checked) { background: var(--online); }
.cfg-mrow.swrow .cs-tog input:checked + .cs-knob { transform: translateX(-19px); }
/* service picker (home تمدید) */
.pick-list { display: flex; flex-direction: column; gap: 9px; }
.pick-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--border); color: var(--text); text-align: right; transition: transform var(--dur) var(--ease), border-color var(--dur); }
.pick-row:active { transform: scale(.98); }
.pick-row:hover { border-color: var(--accent); }
.pick-row .pr-ic { display: flex; color: var(--accent); flex: 0 0 auto; }
.pick-row .pr-tx { flex: 1; min-width: 0; }
.pick-row .pr-tx b { font-size: 14px; font-weight: 500; display: block; }
.pick-row .pr-tx small { font-size: 11.5px; color: var(--text-2); }
.pick-row .pr-ar { display: flex; color: var(--text-2); transform: rotate(90deg); flex: 0 0 auto; }

/* ============================================================================
   PHASE 4 — store redesign: gift banner, segmented, plan cards, custom builder
   ============================================================================ */
.store-scroll { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 12px; }
.store-gift { display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); margin: 12px; padding: 14px; border: none; border-radius: var(--r-lg); background: var(--accent-grad); color: #fff; box-shadow: var(--glow); text-align: right; transition: transform var(--dur) var(--ease); }
.store-gift:active { transform: scale(.98); }
.store-gift.claimed { background: var(--panel-2); color: var(--text-2); box-shadow: none; border: 1px solid var(--border); cursor: default; }
.store-gift.claimed .sg-ic { background: color-mix(in srgb, var(--text-2) 18%, transparent); }
.store-gift .sg-ic { width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.store-gift .sg-tx { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.store-gift .sg-tx b { font-size: 14px; }
.store-gift .sg-tx small { font-size: 11.5px; opacity: .9; }
.store-gift .sg-go { opacity: .8; }
/* ===== STORE REDESIGN — color-coded types, premium plan cards, clean builder ===== */
.store-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 12px 6px; }
.st-type { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: var(--r-lg); background: var(--panel); border: 1.5px solid var(--border); color: var(--text); text-align: right; transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur); }
.st-type:active { transform: scale(.97); }
.st-type .stt-ic { font-size: 22px; flex: 0 0 auto; }
.st-type .stt-tx { min-width: 0; }
.st-type .stt-tx b { font-size: 14.5px; display: block; }
.st-type .stt-tx small { font-size: 10.5px; color: var(--text-2); }
.st-type.vip.on { background: linear-gradient(135deg, #7C5CFF, #B08CFF); color: #fff; border-color: transparent; box-shadow: 0 10px 24px rgba(124,92,255,.34); }
.st-type.nat.on { background: linear-gradient(135deg, #2FBF71, #5BD99A); color: #fff; border-color: transparent; box-shadow: 0 10px 24px rgba(47,191,113,.32); }
.st-type.on .stt-tx small { color: rgba(255,255,255,.9); }
/* premium plan cards */
.splan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding: 4px 12px 10px; }
.splan { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px 12px; border-radius: var(--r-lg); background: var(--panel); border: 1.5px solid var(--border); color: var(--text); cursor: pointer; overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur); animation: sc-in .4s var(--ease) both; }
.splan:nth-child(2) { animation-delay: .05s; } .splan:nth-child(3) { animation-delay: .1s; } .splan:nth-child(4) { animation-delay: .15s; }
.splan:hover { border-color: var(--accent); }
.splan:active { transform: scale(.97); }
.splan .splan-gb { font-size: 30px; font-weight: 800; line-height: 1; color: var(--accent); }
.splan .splan-gb small { font-size: 13px; font-weight: 500; color: var(--text-2); margin-inline-start: 3px; }
.splan .splan-meta { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.splan .splan-price { font-size: 16px; font-weight: 700; margin-top: 8px; }
/* On the dark theme --accent-soft over --panel came out a hair lighter than the card itself, so
   the one control that takes the money read as a disabled label. It needs an edge. */
.splan .splan-cta { margin-top: 10px; width: 100%; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: var(--r-md); padding: 9px; transition: background var(--dur), border-color var(--dur); }
.splan:hover .splan-cta { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); border-color: var(--accent); }
.splan.pop { border: none; background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--accent-grad) border-box; border: 2px solid transparent; box-shadow: var(--glow); padding-top: 30px; }
.splan.pop .splan-cta { background: var(--accent-grad); color: #fff; }
.splan .splan-badge { position: absolute; top: 0; right: 0; background: var(--accent-grad); color: #fff; font-size: 10px; font-weight: 600; padding: 4px 10px; border-radius: 0 0 0 var(--r-md); }
.store-national .splan .splan-gb, .store-national .splan .splan-cta { color: #2FBF71; }
.store-national .splan .splan-cta { background: color-mix(in srgb, #2FBF71 14%, transparent); }
.store-national .splan.pop { background: linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(135deg, #2FBF71, #5BD99A) border-box; }
.store-national .splan.pop .splan-cta, .store-national .splan-badge { background: linear-gradient(135deg, #2FBF71, #5BD99A); color: #fff; }
/* free test account, shown as a plan-style card among the plans */
.splan.test { border: 1.5px solid transparent; background: linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(135deg, #F5C451, #16B981) border-box; }
.splan.test .splan-gb { color: #E0A92B; }
.splan.test .splan-price { color: #16B981; font-weight: 800; }
.splan.test .splan-price.tiny { font-size: 13px; }
.splan.test .splan-cta { background: linear-gradient(135deg, #16B981, #22D3EE); color: #fff; box-shadow: 0 6px 16px rgba(22,185,129,.34); }
/* A test account you have already used is the one card on the page you cannot act on. It should
   not be wearing the brightest border in the grid. */
.splan.test.claimed { opacity: 1; cursor: default; background: var(--panel); border: 1.5px solid var(--border); }
.splan.test.claimed .splan-gb, .splan.test.claimed .splan-price { color: var(--text-2); }
.splan.test.claimed .splan-badge { background: color-mix(in srgb, var(--text-2) 26%, transparent); color: var(--text-2); }
.splan.test.claimed .splan-cta { display: none; }
.splan-badge.gift { background: linear-gradient(135deg, #F5C451, #E0A92B); }
/* custom builder */
.builder { margin: 4px 12px 14px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--border); overflow: hidden; }
.builder .bld-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.builder .bld-lbl { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; }
.builder .bld-lbl .bl-ic { display: flex; color: var(--accent); } .builder .bld-lbl .bl-ic svg { width: 19px; height: 19px; }
.builder .bld-foot { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.builder .bld-price { flex: 1; } .builder .bld-price small { font-size: 11px; color: var(--text-2); display: block; }
.builder .bld-price b { font-size: 18px; font-weight: 700; color: var(--accent); }
.builder .bld-foot .btn { flex: 0 0 auto; width: auto; padding: 12px 18px; }
.store-seg { margin: 10px 12px; }
.store-seg .seg-b { font-size: 13px; padding: 11px 6px; }
.reseller-note { display: flex; align-items: center; gap: 7px; margin: 0 12px 6px; padding: 9px 12px; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-md); font-size: 12.5px; }
.reseller-note span { display: flex; }
.plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 4px 12px 8px; }
.plan-card2 { position: relative; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); padding: 15px 13px 13px; cursor: pointer; transition: transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur); }
.plan-card2:active { transform: scale(.97); }
.plan-card2:hover { border-color: var(--accent); }
.plan-card2.popular { border: 2px solid transparent; background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--accent-grad) border-box; box-shadow: var(--glow); }
.pc-badge { position: absolute; top: -1px; left: 13px; background: var(--accent-grad); color: #fff; font-size: 10px; font-weight: 500; padding: 3px 10px; border-radius: 0 0 var(--r-sm) var(--r-sm); }
.pc2-title { font-size: 14px; font-weight: 500; margin-bottom: 9px; }
.pc2-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); margin: 3px 0; }
.pc2-meta span { display: flex; color: var(--accent); }
.pc2-meta span svg { width: 15px; height: 15px; }
.pc2-price { font-size: 18px; font-weight: 700; margin: 11px 0 11px; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pc2-buy { text-align: center; padding: 9px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 500; }
.plan-card2.popular .pc2-buy { background: var(--accent-grad); color: #fff; }
.custom-order2 { margin: 4px 12px 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); padding: 14px; }
.co2-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; }
.co2-lbl { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.co2-lbl span { display: flex; color: var(--accent); }
.stepper { display: flex; align-items: center; gap: 10px; background: var(--panel-2); border-radius: var(--r-pill); padding: 4px; }
.stepper button { width: 34px; height: 34px; border-radius: 50%; background: var(--panel); border: 1px solid var(--border); font-size: 20px; color: var(--accent); display: flex; align-items: center; justify-content: center; line-height: 1; }
.stepper button:active { transform: scale(.9); }
.stepper span { min-width: 26px; text-align: center; font-weight: 500; font-size: 15px; }
.stepper small { font-size: 11px; color: var(--text-2); }
.co2-price { display: flex; align-items: center; justify-content: space-between; margin: 12px 0; padding-top: 12px; border-top: 1px solid var(--border); }
.co2-price span { font-size: 13px; color: var(--text-2); }
.co2-price b { font-size: 19px; font-weight: 700; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.custom-order2 .btn span { display: inline-flex; vertical-align: -3px; margin-left: 4px; }

/* ============================================================================
   PHASE 5 — payments: method picker, crypto pay sheet
   ============================================================================ */
.tu-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 9px; }
.tu-preset { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 11px 6px; border-radius: 13px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; transition: transform var(--dur) var(--ease), border-color var(--dur), background var(--dur); }
.tu-preset small { font-size: 10px; font-weight: 400; color: var(--text-2); }
.tu-preset:active { transform: scale(.96); }
.tu-preset.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.tu-preset.on small { color: var(--accent); }
.tu-eq { font-size: 11.5px; color: var(--text-2); margin-top: 6px; min-height: 15px; }
.pay-methods { display: flex; flex-direction: column; gap: 8px; }
.pay-m { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-size: 13px; transition: border-color var(--dur), transform var(--dur); }
.pay-m span { display: flex; color: var(--accent); }
.pay-m .pm-c { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.pay-m small { color: var(--text-2); }
.pay-m.active { border-color: var(--accent); background: var(--accent-soft); }
.pay-m:active { transform: scale(.98); }
.crypto-pay { display: flex; flex-direction: column; gap: 12px; }
.cp-note { font-size: 12.5px; line-height: 1.9; color: var(--text-2); background: var(--accent-soft); padding: 11px 13px; border-radius: var(--r-md); }
.cp-amt, .cp-addr { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 13px; }
.cp-amt > span, .cp-addr > span { font-size: 11.5px; color: var(--text-2); display: block; margin-bottom: 6px; }
.cp-amt-val { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.cp-amt-val b { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 20px; }
.cp-amt-val .btn span, .cp-addr .btn span { display: inline-flex; vertical-align: -3px; }
.cp-addr-val { font-size: 12px; word-break: break-all; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 11px; }
.cp-status { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: var(--r-md); background: var(--panel-2); font-size: 13px; font-weight: 500; }
.cp-status.ok { background: color-mix(in srgb, var(--online) 16%, transparent); color: var(--online); }
.cp-status .ld-dot { border-top-color: var(--accent); border-color: color-mix(in srgb,var(--accent) 35%,transparent); }

/* ============================================================================
   PHASE 6 — admin reorganized (grouped tiles) + disabled-type notice
   ============================================================================ */
.admin-section { font-size: 13px; font-weight: 500; color: var(--text-2); padding: 16px 16px 8px; }
.admin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 0 12px; }
.admin-tile { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 6px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--border); color: var(--text); font-size: 11.5px; text-align: center; transition: transform var(--dur) var(--ease), border-color var(--dur); }
.admin-tile span { font-size: 22px; }
.admin-tile:hover { border-color: var(--accent); }
.admin-tile:active { transform: scale(.95); }
.type-off { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; margin: 24px 16px; padding: 30px 20px; border: 1px dashed var(--border); border-radius: var(--r-lg); color: var(--text-2); }
.type-off .to-ic { width: 54px; height: 54px; border-radius: 50%; background: var(--panel-2); display: flex; align-items: center; justify-content: center; color: var(--text-2); opacity: .7; }
.type-off .to-t { font-size: 15px; font-weight: 500; color: var(--text); }
.type-off .to-s { font-size: 12.5px; }

/* ============================================================================
   PHASE 7 — reseller application
   ============================================================================ */
.rr-perks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.rr-perk { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13px; }
.rr-perk span { font-size: 18px; }
.rr-state { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--accent-soft); border-radius: var(--r-lg); }
.rr-state span { display: flex; color: var(--accent); }
.rr-state b { font-size: 15px; }
.rr-state p { font-size: 12.5px; color: var(--text-2); margin-top: 4px; line-height: 1.7; }

/* ============================================================================
   PHASE 8 — profile redesign (own header + friend profile polish)
   ============================================================================ */
.profile2 { padding: 0 0 16px; }
/* scoped to the retired .profile2 header: unscoped, these won the cascade over the info cover (line ~1116) —
   a 130px rounded band that cropped the square photo, a 52px gap under it, and an ::after layer that
   swallowed every tap on the photo */
.profile2 .pf-cover { position: relative; height: 130px; background: var(--accent-grad); border-radius: 0 0 var(--r-xl) var(--r-xl); margin-bottom: 52px; }
.profile2 .pf-cover::after { pointer-events: none; content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 10%, rgba(255,255,255,.18), transparent 45%); border-radius: inherit; }
.pf-back-theme { position: absolute; top: calc(var(--sat) + 10px); left: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); z-index: 2; }
.pf-ava-wrap { position: absolute; bottom: -44px; right: 50%; transform: translateX(50%); }
.pf-ava { width: 96px; height: 96px; border: 4px solid var(--panel); box-shadow: var(--shadow); cursor: pointer; font-size: 34px; position: relative; }
.pf-ava .pf-ava-edit { position: absolute; bottom: 0; left: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-grad); color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid var(--panel); }
.pf-ava .pf-ava-edit svg { width: 14px; height: 14px; }
.pf-id { text-align: center; padding: 0 16px; }
.profile2 .pf-name { font-size: 19px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pf-cover-meta .pf-name { display: flex; align-items: center; gap: 8px; }
.pf-role { font-size: 11px; font-weight: 500; padding: 2px 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); }
.pf-uname { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13.5px; color: var(--accent); background: var(--accent-soft); padding: 5px 12px; border-radius: var(--r-pill); }
.pf-uname span { display: flex; }
.pf-uname:active { transform: scale(.96); }
.pf-uid { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; margin-inline-start: 6px; font-size: 12.5px; color: var(--text-2); background: var(--panel-2); border: 1px solid var(--border); padding: 5px 12px; border-radius: var(--r-pill); }
.pf-uid b { color: var(--text); font-variant-numeric: tabular-nums; }
.pf-uid span { display: flex; }
.pf-uid:active { transform: scale(.96); }
.pf-bio { font-size: 13px; color: var(--text-2); margin-top: 10px; line-height: 1.7; }
.pf-id-acts { display: flex; gap: 8px; justify-content: center; margin: 14px 0 4px; }
.pf-id-acts .btn { width: auto; }
.pf-id-acts .btn span { display: inline-flex; vertical-align: -3px; margin-left: 3px; }
.menu-list { margin-top: 10px; }
.pf-row-btn { width: 100%; text-align: right; background: none; }
.pf-row-btn:active { background: var(--panel-2); }

/* PHASE 9 — ticket attached-service banner */
.tk-svc { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); background: var(--accent-soft); padding: 9px 12px; border-radius: var(--r-md); margin-bottom: 10px; }
.tk-svc span { display: flex; color: var(--accent); }
.tk-svc b { color: var(--text); }
#supBody .btn span { display: inline-flex; vertical-align: -3px; margin-left: 4px; }

/* PHASE 10 (slice) — tappable call message + icon call buttons */
.callmsg { display: flex; align-items: center; gap: 10px; background: none; border: none; width: 100%; text-align: right; padding: 2px 0; }
.callmsg .cm-ic { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.callmsg .cm-ic.missed { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.callmsg .cm-ic svg { width: 18px; height: 18px; }
.callmsg .cm-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.callmsg .cm-call { color: var(--accent); display: flex; }
.callmsg .cm-call svg { width: 18px; height: 18px; }
.callmsg:active { opacity: .7; }

/* PHASE 10 — new-message option tiles (create group/channel/contacts) */
.searchbox span { display: flex; color: var(--text-2); }
.nc-opts { display: flex; flex-direction: column; gap: 8px; }
.nc-opt { display: flex; align-items: center; gap: 12px; padding: 13px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--border); text-align: right; transition: transform var(--dur) var(--ease), border-color var(--dur); }
.nc-opt:hover { border-color: var(--accent); }
.nc-opt:active { transform: scale(.98); }
.nc-opt .nc-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 18px; }
.nc-opt .nc-ic svg { width: 21px; height: 21px; }
.nc-opt div { flex: 1; }
.nc-opt b { font-size: 14px; }
.nc-opt small { display: block; font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.nc-opt .nc-go { color: var(--text-2); display: flex; transform: scaleX(-1); }

/* PHASE 12 — sticker bank: add button, my-sticker delete badge, share toggle */
.ep-h-row { display: flex; align-items: center; justify-content: space-between; }
.ep-add { font-size: 12px; color: var(--accent); background: var(--accent-soft); padding: 4px 11px; border-radius: var(--r-pill); font-weight: 500; }
.ep-empty { padding: 16px 12px; font-size: 12.5px; color: var(--text-2); text-align: center; }
.ep-st { position: relative; }
.ep-st .ep-st-x { position: absolute; top: -4px; inset-inline-end: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 13px; line-height: 18px; text-align: center; z-index: 2; }
.ep-st .ep-st-badge { position: absolute; bottom: 2px; inset-inline-end: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--panel-2); color: var(--text-2); font-size: 11px; line-height: 16px; text-align: center; border: 1px solid var(--border); }
.ep-st.shared-on { outline: 2px solid var(--online); border-radius: 8px; }
.ep-st.shared-on .ep-st-badge { background: var(--online); color: #fff; }

/* PHASE 13 — story composer polish (Instagram-like) */
.story-creator .sc-textedit { font-size: 34px; line-height: 1.35; }
.story-creator .sc-bgs, .story-creator .sc-colors { position: static; bottom: auto; display: flex; gap: 9px; justify-content: center; padding: 10px 12px 2px; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.story-creator .sc-bgs::-webkit-scrollbar, .story-creator .sc-colors::-webkit-scrollbar { display: none; }
.story-creator .sc-bgs button, .story-creator .sc-colors button { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; border: 2px solid rgba(255,255,255,.4); transition: transform .15s; }
.story-creator .sc-bgs button.on, .story-creator .sc-colors button.on { transform: scale(1.18); border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.story-creator .sc-txt-in { position: static; bottom: auto; left: auto; right: auto; display: block; margin: 0 12px 8px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: var(--r-md); padding: 11px 13px; backdrop-filter: blur(6px); }
.story-creator .sc-txt-in::placeholder { color: rgba(255,255,255,.6); }
.story-creator .sc-bottom { padding: 10px 12px calc(12px + var(--sab)); }
.story-creator .sc-publish { width: 100%; border: none; border-radius: var(--r-pill); padding: 14px; background: linear-gradient(135deg,#dc2743,#bc1888); color: #fff; font-weight: 600; font-size: 15px; box-shadow: 0 6px 22px rgba(220,39,67,.4); }
.story-creator .sc-publish:active { transform: scale(.98); }
.story-creator .sc-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; backdrop-filter: blur(6px); }

/* ============================================================================
   Notification opt-in prompt (gesture-driven enable dialog)
   ============================================================================ */
.notif-ask { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); animation: ds-fade .2s ease both; padding: 16px; }
.notif-ask .na-card { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 24px 20px 18px; text-align: center; box-shadow: 0 -10px 40px rgba(0,0,0,.4); animation: ds-sheet-up .3s var(--ease) both; }
.notif-ask .na-ic { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; background: linear-gradient(135deg, #7C5CFF, #22D3EE); display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 10px 26px rgba(124,92,255,.4); animation: pulse 2s var(--ease) infinite; }
.notif-ask .na-t { font-size: 18px; font-weight: 700; }
.notif-ask .na-s { font-size: 13px; color: var(--text-2); line-height: 1.8; margin: 8px 4px 18px; }
.notif-ask .na-go { width: 100%; background: linear-gradient(135deg, #16B981, #22D3EE); box-shadow: 0 10px 24px rgba(22,185,129,.4); display: flex; align-items: center; justify-content: center; gap: 7px; }
.notif-ask .na-go span { display: inline-flex; }
.notif-ask .na-go span svg { width: 19px; height: 19px; }
.notif-ask .na-later { margin-top: 10px; background: none; border: none; color: var(--text-2); font-family: inherit; font-size: 13px; padding: 8px; }

/* E2EE indicator in the chat header */
.t-name .e2ee-lock { display: inline-flex; vertical-align: -1px; color: var(--online, #2FBF71); opacity: .85; margin-inline-start: 4px; }
.t-name .e2ee-lock svg { width: 13px; height: 13px; }
.t-name .e2ee-lock.off { color: var(--text-2); opacity: .55; }

/* ============================================================================
   Settings / Profile redesign (token-driven → matches each theme; sand by default)
   ============================================================================ */
.settings2 { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--sab) + 28px); }
/* 112px put the avatar's top edge at y=37 and the title's baseline at y=43 — the avatar clipped
   the corner of the word «تنظیمات». The cover needs room for both. */
.settings2 .st-cover { height: 136px; background: var(--accent-grad); position: relative; display: flex; align-items: flex-start; justify-content: space-between; padding: 18px; }
.settings2 .st-cover::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 82% 8%, rgba(255,255,255,.22), transparent 55%), radial-gradient(50% 60% at 8% 92%, rgba(255,255,255,.12), transparent 55%); pointer-events: none; }
.settings2 .st-ctitle { position: relative; color: #fff; font-size: 16px; font-weight: 800; }
.settings2 .st-moon { position: relative; width: 36px; height: 36px; border-radius: 12px; background: rgba(255,255,255,.2); border: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.settings2 .st-moon svg { width: 19px; height: 19px; }
.settings2 .st-profile { margin: -40px 16px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 24px; padding: 44px 16px 16px; position: relative; box-shadow: 0 12px 30px rgba(0,0,0,.06); }
.settings2 .st-avawrap { position: absolute; top: -36px; right: 16px; }
.settings2 .st-ava { width: 70px; height: 70px; border-radius: 22px; border: 3px solid var(--panel); background: var(--accent-grad); color: #fff; font-size: 27px; font-weight: 800; display: flex; align-items: center; justify-content: center; position: relative; overflow: visible; }
.settings2 .st-ava img { width: 100%; height: 100%; border-radius: 19px; object-fit: cover; }
.settings2 .st-cam { position: absolute; bottom: -3px; left: -3px; width: 25px; height: 25px; border-radius: 50%; background: var(--panel); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.settings2 .st-cam svg { width: 13px; height: 13px; }
.settings2 .st-name { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 7px; }
.settings2 .st-role { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 3px 9px; border-radius: 8px; }
.settings2 .st-uname { background: none; border: none; color: var(--text-2); font-size: 12.5px; padding: 4px 0 0; display: flex; align-items: center; gap: 5px; font-family: inherit; }
.settings2 .st-uname span, .settings2 .st-uid span { display: inline-flex; opacity: .7; }
.settings2 .st-uname span svg, .settings2 .st-uid span svg { width: 13px; height: 13px; }
.settings2 .st-uid { background: none; border: none; color: var(--text-2); font-size: 11.5px; padding: 3px 0 0; display: flex; align-items: center; gap: 5px; font-family: inherit; }
.settings2 .st-bio { font-size: 12.5px; color: var(--text-2); margin-top: 8px; line-height: 1.7; }
.settings2 .st-pacts { display: flex; gap: 9px; margin-top: 14px; }
.settings2 .st-pbtn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 700; font-family: inherit; padding: 10px; border-radius: 13px; border: none; }
.settings2 .st-pbtn svg { width: 16px; height: 16px; }
.settings2 .st-pbtn.pri { background: var(--accent); color: #fff; box-shadow: 0 6px 14px var(--glow, rgba(0,0,0,.15)); }
.settings2 .st-pbtn.sec { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); }
.settings2 .st-h { font-size: 11.5px; font-weight: 700; color: var(--text-2); margin: 8px 22px 9px; }
/* security score */
.settings2 .st-score { margin: 0 16px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 22px; padding: 16px; display: flex; align-items: center; gap: 16px; box-shadow: 0 8px 22px rgba(0,0,0,.05); }
.settings2 .st-ring { position: relative; width: 66px; height: 66px; flex: 0 0 auto; }
.settings2 .st-ring-fg { animation: stRing 1.1s .15s both; }
@keyframes stRing { from { stroke-dashoffset: 169.6; } }
.settings2 .st-ring-n { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.settings2 .st-ring-n b { font-size: 17px; font-weight: 800; color: var(--accent); }
.settings2 .st-ring-n small { font-size: 8px; color: var(--text-2); }
.settings2 .st-score-info { flex: 1; min-width: 0; }
.settings2 .st-score-h { font-size: 14px; font-weight: 800; }
.settings2 .st-score-p { font-size: 10.5px; color: var(--text-2); margin-top: 2px; }
.settings2 .st-chk { display: flex; align-items: center; gap: 7px; font-size: 11px; margin-top: 6px; color: var(--text-2); }
.settings2 .st-chk .warn { color: var(--accent); font-weight: 600; }
.settings2 .st-dot { width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; }
.settings2 .st-dot.ok { background: var(--online, #2FBF71); }
.settings2 .st-dot.no { background: var(--border); }
.settings2 .st-dot svg { width: 9px; height: 9px; }
/* groups + rows */
.settings2 .st-grp { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; margin: 0 16px 14px; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,.05); }
.settings2 .st-row { display: flex; align-items: center; gap: 13px; width: 100%; padding: 14px 15px; border: none; border-bottom: 1px solid var(--border); background: none; color: var(--text); font-family: inherit; text-align: right; transition: background var(--dur); }
.settings2 .st-row:last-child { border-bottom: none; }
.settings2 .st-row:active { background: var(--panel-2); }
.settings2 .st-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.settings2 .st-ic svg { width: 19px; height: 19px; }
.settings2 .st-lb { flex: 1; font-size: 13.5px; font-weight: 500; }
.settings2 .st-vl { font-size: 12px; color: var(--text-2); }
.settings2 .st-ch { color: var(--text-2); opacity: .5; display: inline-flex; }
.settings2 .st-ch svg { width: 18px; height: 18px; }
.settings2 .st-badge { font-size: 10px; font-weight: 700; color: var(--online, #2FBF71); background: color-mix(in srgb, var(--online, #2FBF71) 16%, transparent); padding: 3px 9px; border-radius: 8px; }
.settings2 .st-row.danger .st-ic { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.settings2 .st-row.danger .st-lb { color: var(--danger); }
/* invite */
.settings2 .st-invite { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 0 16px 14px; border-radius: var(--r-md); padding: 12px; position: relative;
  background: color-mix(in srgb, var(--accent) 6%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); color: var(--text); text-align: right; font-family: inherit; }
.settings2 .st-inv-ic { position: relative; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.settings2 .st-inv-ic svg { width: 18px; height: 18px; }
.settings2 .st-inv-tx { position: relative; flex: 1; min-width: 0; }
.settings2 .st-inv-tx b { font-size: 13px; font-weight: 700; } .settings2 .st-inv-tx small { display: block; font-size: 10.5px; color: var(--text-2); margin-top: 2px; }
.settings2 .st-inv-go { position: relative; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: 11.5px; font-weight: 700; padding: 7px 12px; border-radius: 10px; flex: 0 0 auto; }
/* theme card */
.settings2 .st-theme { display: block; width: calc(100% - 32px); margin: 0 16px 14px; border: 1px solid var(--border); border-radius: 20px; padding: 15px; background: var(--panel); box-shadow: 0 8px 22px rgba(0,0,0,.05); font-family: inherit; text-align: right; color: var(--text); }
.settings2 .st-theme-top { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.settings2 .st-theme-top .st-vl { margin-inline-start: auto; color: var(--accent); font-weight: 700; }
.settings2 .st-theme-body { display: flex; align-items: center; gap: 13px; }
.settings2 .st-mini { width: 60px; height: 90px; border-radius: 13px; background: var(--bg); border: 1px solid var(--border); padding: 8px; flex: 0 0 auto; }
.settings2 .st-mini span { display: block; border-radius: 5px; background: var(--panel); margin-bottom: 5px; }
.settings2 .st-mini .b1 { height: 8px; width: 60%; }
.settings2 .st-mini .bb { height: 18px; }
.settings2 .st-mini .bb.ac { background: var(--accent-grad); }
.settings2 .st-sw { display: flex; flex-wrap: wrap; gap: 9px; flex: 1; }
.settings2 .st-swatch { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border); cursor: pointer; }
.settings2 .st-swatch.on { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--panel); }
.settings2 .st-swatch.more { display: flex; align-items: center; justify-content: center; background: var(--panel-2); color: var(--text-2); }
.settings2 .st-swatch.more svg { width: 16px; height: 16px; }
.settings2 .app-footer { text-align: center; padding: 6px 16px 4px; }
.kb-stat { font-size: 12.5px; font-weight: 700; padding: 11px 13px; border-radius: var(--r-md); background: var(--panel-2); color: var(--text-2); }
.kb-stat.ok { background: color-mix(in srgb, var(--online, #2FBF71) 14%, transparent); color: var(--online, #2FBF71); }

/* SVG icons inside admin tiles + menu rows (replaced the old emoji) */
.admin-tile span svg { width: 24px; height: 24px; }
.admin-tile span { color: var(--accent); display: inline-flex; }
.menu-row .mr-ico svg { width: 20px; height: 20px; }
.menu-row .mr-ico { display: inline-flex; align-items: center; justify-content: center; }

/* inline SVG sizing for home/store/announcement icons (replaced emoji) */
.ss-rocket svg, .update-hero svg { width: 24px; height: 24px; }
.ann-ic svg { width: 17px; height: 17px; vertical-align: -3px; }
.update-hero svg { width: 40px; height: 40px; }

/* SVG sizing for store type-card icons + sales-bot avatar (replaced emoji) */
.stt-ic svg { width: 22px; height: 22px; }

/* settings: real on/off toggle switch */
.settings2 .st-switch { width: 42px; height: 24px; border-radius: 13px; background: var(--border); position: relative; flex: 0 0 auto; transition: background .22s; }
.settings2 .st-switch::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #fff; top: 2px; right: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: right .22s, left .22s; }
.settings2 .st-switch.on { background: var(--accent); }
.settings2 .st-switch.on::after { right: auto; left: 2px; }
/* settings: horizontal theme picker cards */
.settings2 .st-themes { display: flex; gap: 12px; overflow-x: auto; padding: 2px 16px 6px; margin-bottom: 14px; scrollbar-width: none; }
.settings2 .st-themes::-webkit-scrollbar { display: none; }
.settings2 .st-tcard { flex: 0 0 auto; width: 60px; background: none; border: none; font-family: inherit; cursor: pointer; padding: 0; }
.settings2 .st-tprev { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 17px; border: 1px solid var(--border); position: relative; box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.settings2 .st-tprev i { width: 22px; height: 22px; border-radius: 50%; display: block; }
.settings2 .st-tprev.grid { background: var(--panel-2); color: var(--text-2); }
.settings2 .st-tprev.grid svg { width: 22px; height: 22px; }
.settings2 .st-tcard.on .st-tprev { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--panel); }
.settings2 .st-tlb { display: block; font-size: 10px; color: var(--text-2); margin-top: 7px; white-space: nowrap; max-width: 60px; overflow: hidden; text-overflow: ellipsis; }
.settings2 .st-tcard.on .st-tlb { color: var(--accent); font-weight: 700; }

/* SVG sizing for service-catalog + reseller-placeholder icons (replaced emoji) */
.si-ic svg { width: 24px; height: 24px; }
.ss-ic svg { width: 30px; height: 30px; }

/* premium edit-profile sheet */
.editpf { display: flex; flex-direction: column; gap: 4px; }
.editpf .epf-galwrap { margin-bottom: 10px; }
.editpf .ep-photos { display: flex; gap: 10px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.editpf .ep-photos::-webkit-scrollbar { display: none; }
.editpf .ep-photo { position: relative; flex: 0 0 auto; width: 74px; height: 74px; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); }
.editpf .ep-photo img { width: 100%; height: 100%; object-fit: cover; }
.editpf .ep-del { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; border: none; display: flex; align-items: center; justify-content: center; }
.editpf .ep-del svg { width: 13px; height: 13px; }
.editpf .ep-add { flex: 0 0 auto; width: 74px; height: 74px; border-radius: 18px; border: 1.5px dashed var(--border); background: var(--panel-2); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.editpf .epf-field { margin-top: 12px; }
.editpf .epf-field > label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-2); margin: 0 4px 6px; }
.editpf .epf-input { display: flex; align-items: center; gap: 9px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 13px; transition: border-color var(--dur); }
.editpf .epf-input:focus-within { border-color: var(--accent); }
.editpf .epf-input.area { align-items: flex-start; padding-top: 11px; }
.editpf .epf-ic { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); font-size: 14px; font-weight: 700; flex: 0 0 auto; }
.editpf .epf-ic svg { width: 18px; height: 18px; }
.editpf .epf-input input, .editpf .epf-input textarea { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 14px; padding: 12px 0; }
.editpf .epf-input textarea { resize: none; line-height: 1.7; }
.editpf #e_save { margin-top: 18px; }

/* SVG sizing for icon containers that previously held emoji */
.pw-eye { display: inline-flex; align-items: center; justify-content: center; }
.pw-eye svg { width: 20px; height: 20px; }
.story-pill .add-badge svg { width: 13px; height: 13px; }
.notif-ask .na-ic { color: #fff; }
.notif-ask .na-ic svg { width: 30px; height: 30px; }
.onboard-card .install-hero { color: var(--accent); display: flex; align-items: center; justify-content: center; }
.onboard-card .install-hero svg { width: 46px; height: 46px; }
.install-card .ic-ic { color: var(--accent); display: flex; align-items: center; justify-content: center; }
.install-card .ic-ic svg { width: 30px; height: 30px; }
.sh-ic { color: var(--accent); }
.sh-ic svg { width: 20px; height: 20px; }
#storyViewer .sv-seen svg { width: 17px; height: 17px; }
.shop-soon .ss-ic { color: var(--accent); display: flex; align-items: center; justify-content: center; }
.shop-soon .ss-ic svg { width: 30px; height: 30px; }
.rq-story-ic svg { width: 18px; height: 18px; }

/* SVG sizing for chat/profile icon containers (emoji→SVG migration) */
.filebox .f-ico svg { width: 22px; height: 22px; }
.pin-ico svg { width: 14px; height: 14px; vertical-align: middle; }
.pf-row-ic { display: inline-flex; align-items: center; justify-content: center; }
.pf-row-ic svg { width: 19px; height: 19px; }
.msg .stamp .stamp-ic { vertical-align: middle; opacity: .8; }
.maint-box .maint-ic { color: var(--accent); display: flex; align-items: center; justify-content: center; }
.maint-box .maint-ic svg { width: 54px; height: 54px; }
.avatar.sm svg { width: 20px; height: 20px; }
.hover-acts button svg { vertical-align: middle; }
.poll .p-q svg { vertical-align: -2px; }

/* story reply heart/send (emoji→SVG) */
#storyViewer .sv-heart-btn { color: #fff; display: inline-flex; align-items: center; justify-content: center; }
#storyViewer .sv-heart-btn.on { color: #ff3b5c; }
#storyViewer .sv-send { display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.lock-ico { display: flex; align-items: center; justify-content: center; }

/* chatIcon inline SVG (channel/group/saved type marker before title) */
.ci-svg { vertical-align: -2px; margin-left: 3px; opacity: .85; }
.type-ico .ci-svg { vertical-align: middle; margin: 0; }

/* ===== ADMIN REDESIGN — segmented shell + dashboard ===== */
.adx { flex: 1; overflow-y: auto; min-height: 0; padding: 0 var(--sp-4) calc(var(--sab) + 24px); -webkit-overflow-scrolling: touch; }
.adx-seg { position: sticky; top: 0; z-index: 3; display: flex; gap: 4px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 3px; margin: var(--sp-3) 0; }
.adx-seg button { flex: 1; border: none; background: none; color: var(--text-2); font-family: inherit; font-size: 12.5px; font-weight: 500; padding: 7px 2px; border-radius: var(--r-sm); transition: background var(--dur), color var(--dur); }
.adx-seg button.on { background: var(--panel); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.adx-pane { animation: ds-fade .2s ease; }
.adx-h { font-size: 12px; font-weight: 500; color: var(--text-2); margin: var(--sp-4) 2px var(--sp-2); }

.adx-hero { background: var(--accent-grad); color: var(--accent-contrast); border-radius: var(--r-lg); padding: 13px 15px; box-shadow: var(--glow); }
.adx-hero-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; opacity: .9; }
.adx-hero-7d { font-size: 11px; opacity: .85; }
.adx-hero-num { font-size: 23px; font-weight: 700; margin: 2px 0 4px; }
.adx-hero-num span { font-size: 12px; font-weight: 400; opacity: .85; }
.adx-spark { display: block; width: 100%; height: 26px; }

.adx-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.adx-kpi { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 6px; text-align: center; }
.adx-kpi-n { font-size: 16px; font-weight: 700; color: var(--text); }
.adx-kpi-l { font-size: 10.5px; color: var(--text-2); margin-top: 2px; }

.adx-need { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.adx-need-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: none; border: none; border-top: 1px solid var(--border); font-family: inherit; color: var(--text); cursor: pointer; transition: background var(--dur); }
.adx-need-row:first-child { border-top: none; }
.adx-need-row:active { background: var(--panel-2); }
.adx-need-ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.adx-need-ic svg { width: 17px; height: 17px; }
.adx-need-lb { flex: 1; text-align: right; font-size: 13px; }
.adx-need-n { font-size: 11.5px; font-weight: 700; border-radius: 9px; padding: 1px 9px; }
.adx-clear { display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; color: var(--online, #1d9e75); font-size: 13px; }
.adx-clear svg { width: 18px; height: 18px; }

.adx-health { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; }
.adx-health-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); margin-bottom: 5px; }
.adx-health-row b { color: var(--text); font-weight: 500; }
.adx-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 11px; }
.adx-bar:last-child { margin-bottom: 0; }
.adx-bar-fill { height: 100%; background: var(--online, #1d9e75); border-radius: 3px; transition: width .5s ease; }
.adx-bar-fill.warm { background: #BA7517; }
.adx-bar-fill.hot { background: var(--danger, #e24b4a); }

.adx-usearch { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 12px; margin: var(--sp-3) 0 var(--sp-2); }
.adx-usearch-ic { color: var(--text-2); display: flex; }
.adx-usearch-ic svg { width: 17px; height: 17px; }
.adx-usearch input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 13.5px; padding: 10px 0; }
.adx-ufilters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.adx-ufilters::-webkit-scrollbar { display: none; }
.adx-ufilters button { flex: 0 0 auto; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-2); font-family: inherit; font-size: 12px; border-radius: var(--r-pill); padding: 5px 13px; transition: all var(--dur); }
.adx-ufilters button.on { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 500; }
/* bulk user selection */
.adx-ucount-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adx-ucount-row .list-section { margin: 0; }
.adx-selbar { display: flex; align-items: center; gap: 6px; background: var(--accent-soft); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 12px; margin: 4px 0 8px; font-size: 13px; }
.admin-user .au-check { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px; border: 2px solid var(--border-strong, var(--border)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; transition: all var(--dur); }
.admin-user .au-check.on { background: var(--accent); border-color: var(--accent); }
.admin-user.sel-on { background: var(--accent-soft); border-radius: var(--r-md); }
.bulk-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bulk-acts .btn.danger:last-child { grid-column: 1 / -1; }
.bulk-acts .btn.sel { outline: 2px solid var(--accent); }
.adx .admin-grid { margin-top: var(--sp-2); }

/* admin "needs attention" badge on the home quick-action */
.shop-qa { position: relative; }
.shop-qa .qa-badge { position: absolute; top: 6px; inset-inline-start: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger, #e24b4a); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }

/* admin user-detail drawer */
.aud-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.aud-head .avatar { width: 52px; height: 52px; font-size: 20px; }
.aud-id { min-width: 0; }
.aud-name { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.aud-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.aud-wallet { display: flex; justify-content: space-between; align-items: center; background: var(--accent-grad); color: var(--accent-contrast); border-radius: var(--r-md); padding: 12px 14px; }
.aud-w-l { font-size: 11.5px; opacity: .85; }
.aud-w-n { font-size: 19px; font-weight: 700; margin-top: 2px; }
.aud-w-n span { font-size: 11px; font-weight: 400; opacity: .85; }
.aud-w-side { display: flex; flex-direction: column; gap: 3px; font-size: 11px; opacity: .92; text-align: left; }
.aud-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.aud-stat { background: var(--panel-2); border-radius: var(--r-md); padding: 9px 4px; text-align: center; }
.aud-stat b { display: block; font-size: 16px; font-weight: 700; }
.aud-stat span { font-size: 10.5px; color: var(--text-2); }
.aud-actions { display: flex; gap: 7px; margin-bottom: 4px; }
.aud-actions .btn { width: auto; flex: 1; }
.aud-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--border); }
.aud-row:last-child { border-bottom: none; }
.aud-row-main { flex: 1; min-width: 0; font-size: 12.5px; }
.aud-row-main > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aud-row-sub { font-size: 11px; color: var(--text-2); margin-top: 1px; }

/* admin panel monitor */
.mon-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.mon-row:last-child { border-bottom: none; }
.mon-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); margin-top: 5px; flex-shrink: 0; }
.mon-dot.ok { background: var(--online, #1d9e75); box-shadow: 0 0 0 3px rgba(29,158,117,.18); }
.mon-dot.down { background: var(--danger, #e24b4a); box-shadow: 0 0 0 3px rgba(226,75,74,.18); }
.mon-main { flex: 1; min-width: 0; }
.mon-name { font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.mon-sub { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }

/* admin analytics */
.an-chart { display: flex; align-items: flex-end; gap: 3px; height: 90px; padding: 8px 2px; background: var(--panel-2); border-radius: var(--r-md); }
.an-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.an-bar-fill { width: 100%; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; transition: height .4s ease; }
.an-funnel { display: flex; align-items: center; gap: 6px; }
.an-fn { flex: 1; background: var(--panel-2); border-radius: var(--r-md); padding: 10px 4px; text-align: center; }
.an-fn b { display: block; font-size: 17px; font-weight: 700; }
.an-fn span { font-size: 10.5px; color: var(--text-2); }
.an-fn.rate { background: var(--accent-soft); }
.an-fn.rate b { color: var(--accent); }
.an-fn-arrow { color: var(--text-2); transform: rotate(90deg); display: flex; }
.an-fn-arrow svg { width: 16px; height: 16px; }
.an-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--border); }
.an-row:last-child { border-bottom: none; }
.an-rank { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.an-row-main { flex: 1; min-width: 0; font-size: 13px; }
.an-row-sub { font-size: 11px; color: var(--text-2); margin-top: 1px; }

/* advanced financial report */
.fin-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; -ms-overflow-style: none; scrollbar-width: none; }
.fin-tabs::-webkit-scrollbar { display: none; }
.fin-tab { flex: 0 0 auto; padding: 7px 15px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text-2); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: .15s; }
.fin-tab.on { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); box-shadow: var(--glow); }
.fin-load { display: flex; justify-content: center; padding: 30px; }
.fin-hero { background: var(--accent-grad); color: var(--accent-contrast); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--glow); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fh-main { min-width: 0; }
.fh-lb { font-size: 12px; opacity: .9; display: block; }
.fh-num { font-size: 24px; font-weight: 700; line-height: 1.2; }
.fh-num small { font-size: 12px; font-weight: 400; opacity: .85; }
.fh-side { display: flex; gap: 14px; text-align: center; flex-shrink: 0; }
.fh-side b { display: block; font-size: 15px; font-weight: 700; }
.fh-side small { font-size: 10px; opacity: .85; }
.fin-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.fin-kpi { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 6px; text-align: center; }
.fk-num { font-size: 16px; font-weight: 700; color: var(--text); }
.fk-lb { font-size: 10.5px; color: var(--text-2); margin-top: 2px; }
.fin-split { display: flex; gap: 8px; }
.fin-sp { flex: 1; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 8px; text-align: center; }
.fin-sp .fsp-ic { font-size: 17px; display: block; }
.fin-sp b { display: block; font-size: 15px; font-weight: 700; margin-top: 3px; }
.fin-sp small { font-size: 10.5px; color: var(--text-2); }
.fin-note { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 13px; margin-top: 12px; }
.fin-note > div { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--text-2); padding: 5px 0; border-bottom: 1px solid var(--border); }
.fin-note > div:last-child { border-bottom: none; }
.fin-note > div span small { font-size: 10.5px; opacity: .8; }
.fin-note > div b { color: var(--text); font-weight: 600; }

/* admin per-service management sheet */
.svc-head { display: flex; align-items: center; gap: 10px; padding: 2px 0 10px; }
.svc-head-main { flex: 1; min-width: 0; font-size: 13.5px; }
.svc-head-sub { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.svc-usage { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; }
.svc-usage-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.svc-usage-top b { font-weight: 600; }
.svc-bar { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; margin: 8px 0 6px; }
.svc-bar-fill { height: 100%; border-radius: 999px; min-width: 3px; transition: width .4s ease; }
.svc-usage-sub { font-size: 11.5px; color: var(--text-2); margin-top: 3px; }
.svc-cfg { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aud-row-chev { color: var(--text-2); display: flex; opacity: .55; align-self: center; }
.aud-row-chev svg { width: 16px; height: 16px; }

/* inline audio (mp3) player in chat */
.audiobox { display: flex; flex-direction: column; gap: 8px; min-width: 232px; max-width: min(300px, 70vw); }
.audiobox .ab-row { display: flex; align-items: center; gap: 9px; }
.audiobox .ab-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.audiobox .ab-meta { min-width: 0; }
.audiobox .ab-meta .f-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audiobox .ab-meta .f-size { font-size: 11px; color: var(--text-2); }
.audiobox .ab-audio { width: 100%; height: 34px; }

/* chat-list delivery ticks (own last message) */
.chat-item .ci-tick { color: #8a9099; font-size: 12.5px; font-weight: 700; margin-inline-end: 3px; letter-spacing: -1px; }
.chat-item .ci-tick.read { color: var(--tick-read, var(--accent)); }
.chat-item .pv-from { color: var(--text); font-weight: 500; }   /* «علی:» before a group's last message */
.tabs .tab-n { display: inline-block; min-width: 18px; padding: 0 5px; margin-inline-start: 4px; border-radius: 999px;
  background: var(--accent-fill, var(--accent)); color: var(--accent-contrast, #fff); font-size: 11px; line-height: 18px; text-align: center; }

/* hide bottom dock while the soft keyboard is up (prevents it riding over content) */
body.kb-open .bottomnav { display: none; }

/* floating compose FAB on the chats tab (Telegram-style) */
#mainView { position: relative; }
.fab { position: absolute; inset-inline-end: 18px; bottom: 18px; width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--accent-grad); color: var(--accent-contrast); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(45,104,224,.40); z-index: 20; transition: transform var(--dur) var(--ease), box-shadow var(--dur); animation: fab-in .3s var(--ease) both; }
.fab:active { transform: scale(.92); }
.fab svg { width: 25px; height: 25px; }
body.kb-open .fab { display: none; }
@keyframes fab-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* custom music/mp3 player (reuses voice-player wiring; persists via detached Audio) */
.musicbox { display: flex; align-items: center; gap: 11px; min-width: 236px; max-width: min(300px, 70vw); padding: 2px 0; }
.musicbox .mb-play { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--accent-grad); color: var(--accent-contrast); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: var(--glow); cursor: pointer; }
.musicbox .mb-play svg { width: 20px; height: 20px; }
.musicbox .mb-body { flex: 1; min-width: 0; }
.musicbox .mb-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 7px; }
.musicbox .mb-track { height: 4px; background: var(--border); border-radius: 3px; overflow: hidden; cursor: pointer; }
.musicbox .mb-track .v-fill { height: 100%; background: var(--accent); border-radius: 3px; width: 0; }
.musicbox .mb-sub { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--text-2); }
.musicbox .mb-ic { color: var(--accent); opacity: .9; flex: 0 0 auto; display: flex; }
.musicbox .mb-ic svg { width: 22px; height: 22px; }

/* ---- iOS contacts-sync sheet (Bale-style guided modal) ---- */
.iosc-head { text-align: center; padding: 2px 6px 16px; position: relative; }
.iosc-hic { width: 64px; height: 64px; margin: 2px auto 12px; border-radius: 20px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.iosc-hic svg { width: 34px; height: 34px; }
.iosc-head h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.iosc-head p { font-size: 13px; color: var(--text-2); line-height: 1.9; margin: 0; }
.iosc-card { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-lg); cursor: pointer; transition: transform .15s, border-color .15s; }
.iosc-card:active { transform: scale(.98); border-color: var(--accent); }
.iosc-ic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; background: var(--accent-grad); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -6px var(--accent-soft); }
.iosc-ic.alt { background: linear-gradient(135deg, #3aa2f7, #1d6ff2); }
.iosc-ic svg { width: 24px; height: 24px; }
.iosc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.iosc-tx b { font-size: 14.5px; font-weight: 700; }
.iosc-tx span { font-size: 12px; color: var(--text-2); line-height: 1.7; }
.iosc-link { display: block; margin: 12px auto 2px; font-size: 13px; color: var(--accent); background: none; }
.iosc-steps { display: flex; flex-direction: column; gap: 4px; margin: 4px 2px 16px; }
.iosc-step { display: flex; align-items: flex-start; gap: 12px; padding: 9px 4px; font-size: 14px; line-height: 1.9; }
.iosc-step + .iosc-step { border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.iosc-n { flex: 0 0 27px; width: 27px; height: 27px; margin-top: 2px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.iosc-cta { min-height: 52px; font-size: 15px; font-weight: 700; border-radius: var(--r-lg); }
.iosc-note { text-align: center; font-size: 11.5px; color: var(--text-2); margin-top: 10px; line-height: 1.8; }
.sheet:has(.iosc-back) { position: relative; }
.iosc-back { position: absolute; top: 14px; right: 16px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: var(--panel-2); color: var(--text); display: flex; align-items: center; justify-content: center; }

/* ---------- interactive onboarding tour (coach-marks) ---------- */
.tour-ov { position: fixed; inset: 0; z-index: 300; }
.tour-spot { position: absolute; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(10,12,24,.74); transition: left .38s cubic-bezier(.4,0,.2,1), top .38s cubic-bezier(.4,0,.2,1), width .38s cubic-bezier(.4,0,.2,1), height .38s cubic-bezier(.4,0,.2,1), opacity .3s; pointer-events: none; }
.tour-pop { position: absolute; width: min(300px, 86vw); background: var(--panel); color: var(--text); border-radius: 16px; padding: 16px 16px 12px; box-shadow: 0 24px 60px rgba(0,0,0,.45); transition: left .32s ease, top .32s ease; animation: tour-in .34s cubic-bezier(.2,.9,.3,1); }
@keyframes tour-in { from { opacity: 0; transform: scale(.9); } }
.tour-title { font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.tour-body { font-size: 13.5px; color: var(--text-2); line-height: 1.95; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 8px; }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: all .3s; }
.tour-dots i.on { background: var(--accent); width: 18px; border-radius: 3px; }
.tour-btns { display: flex; gap: 6px; align-items: center; }
.tour-btns button { font-size: 13px; padding: 7px 13px; border-radius: 10px; }
.tour-skip { color: var(--text-2); background: transparent; }
.tour-prev { background: var(--panel-2); color: var(--text); }
.tour-next { background: var(--accent); color: #fff; font-weight: 700; box-shadow: 0 6px 16px -6px var(--accent-soft); }

/* live admin alert banner (new user / ticket / suspected-fake) */
.admin-alert { position: fixed; top: calc(var(--sat) + 10px); left: 50%; transform: translate(-50%,-160%); z-index: 260; display: flex; align-items: center; gap: 10px; width: min(440px,92vw); padding: 11px 15px; background: linear-gradient(135deg, #4a3fb0, #2f7cf6); color: #fff; border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.3); transition: transform .34s cubic-bezier(.2,.9,.3,1); }
.admin-alert.show { transform: translate(-50%,0); }
.admin-alert b { font-size: 13.5px; } .admin-alert small { display: block; opacity: .9; font-size: 12px; }

/* ticket / feedback image attach */
.tk-attach { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; flex-wrap: wrap; }
.tk-prev-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-prev-item { position: relative; display: inline-block; }
.tk-prev-item img { height: 52px; width: 52px; object-fit: cover; border-radius: 9px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.tk-prev-item .tk-prev-x { position: absolute; top: -6px; inset-inline-end: -6px; background: var(--danger); color: #fff; border: 2px solid var(--panel); border-radius: 50%; width: 20px; height: 20px; font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.tk-msg .tk-img { display: block; max-width: 180px; max-height: 200px; border-radius: 10px; margin: 6px 0; cursor: pointer; }

/* force-update — prominent CENTER modal (stuck on old version) */
.upd-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(12,16,28,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s var(--ease); }
.upd-modal.show { opacity: 1; }
.upd-card { width: min(400px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 22px; padding: 26px 22px 18px; text-align: center; box-shadow: 0 30px 70px -20px rgba(0,0,0,.6); transform: translateY(18px) scale(.95); transition: transform .38s cubic-bezier(.2,.9,.3,1); }
.upd-modal.show .upd-card { transform: translateY(0) scale(1); }
.upd-badge { width: 66px; height: 66px; margin: 0 auto 14px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 34px; background: linear-gradient(140deg, #6a4bf0, #2f7cf6); box-shadow: 0 14px 30px -8px rgba(47,124,246,.6); animation: upd-bounce 1.6s ease-in-out infinite; }
@keyframes upd-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.upd-h { font-size: 19px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.upd-sub { font-size: 13px; line-height: 1.85; color: var(--text-2); margin-bottom: 14px; }
.upd-log { list-style: none; text-align: right; margin: 0 0 16px; padding: 12px 14px; background: var(--panel-2); border-radius: 14px; display: flex; flex-direction: column; gap: 7px; }
.upd-log li { position: relative; padding-inline-start: 18px; font-size: 12.5px; color: var(--text); line-height: 1.6; }
.upd-log li::before { content: '✦'; position: absolute; inset-inline-start: 0; color: var(--accent); font-size: 11px; top: 1px; }
.upd-cta { width: 100%; border: none; border-radius: 14px; padding: 14px; background: linear-gradient(135deg, #6a4bf0, #2f7cf6); color: #fff; font-family: inherit; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 12px 28px -8px rgba(47,124,246,.55); transition: transform var(--dur) var(--ease), filter var(--dur); }
.upd-cta span { display: flex; } .upd-cta span svg { width: 19px; height: 19px; }
.upd-cta:hover { filter: brightness(1.06); } .upd-cta:active { transform: scale(.97); }
.upd-later { width: 100%; margin-top: 8px; background: none; border: none; color: var(--text-2); font-family: inherit; font-size: 13px; padding: 9px; border-radius: 10px; cursor: pointer; transition: color var(--dur); }
.upd-later:hover { color: var(--text); }

/* chat message-area loading state (avoids a blank screen on open) */
.msg-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 40px 0; color: var(--text-2); font-size: 13px; }
@keyframes gg-glow { 0%,100% { filter: drop-shadow(0 0 0 rgba(255,158,61,0)); transform: scale(1); } 50% { filter: drop-shadow(0 3px 10px rgba(255,158,61,.5)); transform: scale(1.05); } }
@media (prefers-reduced-motion: no-preference) { .gift-pop { animation: gift-pop 1.8s var(--ease) infinite; } }
@keyframes gift-pop { 0%,100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-4px) rotate(-6deg); } 75% { transform: translateY(-4px) rotate(6deg); } }

/* boot-fail screen — cached shell up but server unreachable on this domain */
.boot-fail { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); opacity: 0; transition: opacity .3s var(--ease); }
.boot-fail.show { opacity: 1; }
.bf-card { width: min(380px, 100%); text-align: center; }
.bf-ic { font-size: 46px; margin-bottom: 12px; animation: upd-bounce 1.8s ease-in-out infinite; }
.bf-h { font-size: 19px; font-weight: 800; color: var(--text); margin-bottom: 9px; }
.bf-sub { font-size: 13px; line-height: 1.9; color: var(--text-2); margin-bottom: 20px; }
.bf-cta { width: 100%; border: none; border-radius: 14px; padding: 14px; background: var(--accent-grad, linear-gradient(135deg,#6a4bf0,#2f7cf6)); color: #fff; font-family: inherit; font-weight: 800; font-size: 15px; box-shadow: 0 12px 26px -8px rgba(47,124,246,.5); transition: transform var(--dur) var(--ease); }
.bf-cta:active { transform: scale(.97); }
.bf-alt { width: 100%; margin-top: 10px; border: 1px solid var(--border); border-radius: 14px; padding: 12px; background: var(--panel); color: var(--text); font-family: inherit; font-weight: 700; font-size: 13.5px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; transition: border-color var(--dur), transform var(--dur); }
.bf-alt small { color: var(--text-2); font-weight: 400; font-size: 11.5px; }
.bf-alt:active { transform: scale(.98); }

/* admin: V2Ray tunnel */
.tun-status { background: var(--panel-2); border-radius: 12px; padding: 11px 13px; font-size: 12.5px; line-height: 2; color: var(--text); }
.tun-list { display: flex; flex-direction: column; gap: 8px; }
.tun-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.tun-row.on { border-color: color-mix(in srgb, var(--online) 45%, var(--border)); background: color-mix(in srgb, var(--online) 7%, var(--panel)); }
.tun-row b { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tun-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-2); flex: 0 0 auto; }
.tun-row.on .tun-dot { background: var(--online); box-shadow: 0 0 8px var(--online); }
.tun-row .btn.small { flex: 0 0 auto; }

/* admin: app-icon uploader */
.aicon-list { display: flex; flex-direction: column; gap: 8px; }
.aicon-row { display: flex; align-items: center; gap: 11px; padding: 9px 11px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.aicon-row b { flex: 1; font-size: 13.5px; }
.aicon-prev { width: 40px; height: 40px; border-radius: 11px; overflow: hidden; background: var(--panel-2); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.aicon-prev img { width: 100%; height: 100%; object-fit: cover; }
.aicon-del { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border: none; border-radius: 9px; padding: 7px 12px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.aicon-del:active { transform: scale(.95); }

/* mirror switcher (settings) */
.mir-list { display: flex; flex-direction: column; gap: 9px; }
.mir-row { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--text); cursor: pointer; text-align: right; transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur); }
.mir-row:not(.cur):active { transform: scale(.985); }
.mir-row:not(.cur):hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 8px 22px -12px var(--accent); }
.mir-row.cur { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); opacity: .95; }
.mir-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-2); flex: 0 0 auto; }
.mir-row.cur .mir-dot { background: var(--online); box-shadow: 0 0 8px var(--online); }
.mir-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mir-tx b { font-size: 14px; } .mir-tx small { font-size: 11.5px; color: var(--text-2); }
.mir-badge { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 4px 9px; border-radius: 8px; flex: 0 0 auto; }
.mir-ar { display: flex; color: var(--text-2); flex: 0 0 auto; }
.mir-ar svg { width: 18px; height: 18px; }
html[dir="rtl"] .mir-ar { transform: scaleX(-1); }

/* referral invitees list + eligibility note */
.ref-note { background: var(--chip-warn-bg); color: var(--chip-warn-text); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.8; margin-bottom: 12px; }
.ref-list { display: flex; flex-direction: column; gap: 2px; }
.ref-item { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.ref-item + .ref-item { border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }

/* admin per-user service management */
.aud-svc { padding: 4px 0 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.aud-svc-btns { display: flex; gap: 8px; margin-top: 6px; }
.aud-svc-btns .btn { flex: 1; }

/* plan card: exact title + optional description */
.splan .splan-title { font-size: 15px; font-weight: 800; line-height: 1.4; color: var(--text); text-align: center; }
.splan .splan-desc { font-size: 11.5px; color: var(--text-2); line-height: 1.7; text-align: center; margin-top: 2px; }
.store-national .splan .splan-title { color: var(--text); }

/* home: vibrant glassy «کانفیگ‌های من» button (above the referral card) */
.deck-configs { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; gap: 13px; padding: 15px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: linear-gradient(120deg, #3D6BFF 0%, #7C5CFF 55%, #A855F7 100%); color: #fff; cursor: pointer; box-shadow: 0 14px 32px -10px rgba(99,102,241,.6); transition: transform var(--dur) var(--ease), box-shadow var(--dur), filter var(--dur); overflow: hidden; }
.deck-configs .dc-glow { position: absolute; inset: 0; background: radial-gradient(120px 80px at 82% 0%, rgba(255,255,255,.35), transparent 70%); pointer-events: none; }
.deck-configs::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 60%); transform: translateX(-130%); animation: dcSheen 4.2s ease-in-out infinite; pointer-events: none; }
@keyframes dcSheen { 0%, 55%, 100% { transform: translateX(-130%); } 72% { transform: translateX(130%); } }
.deck-configs:active { transform: scale(.985); }
.deck-configs:hover { filter: brightness(1.05); box-shadow: 0 18px 38px -10px rgba(124,92,255,.7); }
.deck-configs .dc-ic { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: rgba(255,255,255,.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); flex: 0 0 auto; }
.deck-configs .dc-ic svg { width: 24px; height: 24px; }
.deck-configs .dc-tx { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.deck-configs .dc-tx b { font-size: 16px; font-weight: 800; white-space: nowrap; }
.deck-configs .dc-tx small { font-size: 12px; color: rgba(255,255,255,.88); }
.deck-configs .dc-ar { position: relative; z-index: 1; display: flex; color: rgba(255,255,255,.9); flex: 0 0 auto; }
.deck-configs .dc-ar svg { width: 20px; height: 20px; }
html[dir="rtl"] .deck-configs .dc-ar { transform: scaleX(-1); }

/* ticket + receipt thumbnails open the in-app viewer */
.tk-img, .tr-img { cursor: pointer; display: inline-block; }

/* ---- offline mode ---- */
/* "last updated" chip on sections rendered from a local snapshot */
.stale-chip { display: inline-block; font-size: 11px; color: var(--text-2); background: var(--chip-bg, rgba(127,127,127,.12));
  border-radius: 999px; padding: 3px 10px; }
.stale-row { padding: 6px 14px 0; }
/* honest offline empty state — never "you have nothing", always "we couldn't ask" */
.offline-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 18px; text-align: center; }
.offline-empty .oe-ic { font-size: 30px; opacity: .8; }
.offline-empty .oe-s { font-size: 11.5px; color: var(--text-2); }
/* configs shown from the device while offline: links are usable, live stats are not */
.cfg-offline-note { background: rgba(255,176,32,.12); border: 1px solid rgba(255,176,32,.3); border-radius: var(--r-md, 12px);
  padding: 10px 12px; margin: 10px 0; font-size: 12px; line-height: 1.9; }
.cfg-offline-note span { color: var(--text-2); font-size: 11.5px; }
.cfg-offline-note .stale-chip { margin-top: 6px; }
/* actions that genuinely need the network are visibly disabled while offline */
body.is-offline .needs-net { opacity: .45; pointer-events: none; }
/* persistent offline strip (distinct from the transient socket-reconnect bar) */
.conn-bar.off { background: #4a4a52; color: #fff; }
/* wallet balance is deliberately blanked while offline — a stale number is dangerous */
.wallet-balance .wb-off { font-size: 11.5px; color: var(--text-2); margin-top: 6px; line-height: 1.8; }
/* queued (not yet sent) message — the turning clock in its stamp says so; the bubble keeps full contrast
   (it used to drop to 62% and flash back to full on the swap) */
/* refused by the server: outlined, with the reason and the red «!» beside it; tap for resend / remove */
.msg.pending.failed .bubble { box-shadow: inset 0 0 0 1.5px var(--danger); cursor: pointer; }
.msg .send-err { font-size: var(--fs-xs); font-weight: 600; line-height: 1.7; margin-top: 4px; color: var(--danger); }
/* the retry for an upload whose bubble has no transfer ring (a voice note) */
.msg .up-retry { border: 0; background: var(--danger); color: #fff; border-radius: 999px; width: 22px; height: 22px;
  font-size: 13px; line-height: 22px; padding: 0; cursor: pointer; margin-inline-end: 4px; }

/* ---- first-run intro ---- */
.intro-ov { position: fixed; inset: 0; z-index: 220; background: rgba(8,10,16,.82); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 22px; animation: ds-fade .2s ease; }
.intro-card { background: var(--panel); border-radius: 22px; padding: 30px 22px 22px; max-width: 360px; width: 100%;
  text-align: center; box-shadow: 0 22px 60px rgba(0,0,0,.5); position: relative; animation: ds-pop .28s var(--ease); }
.intro-skip { position: absolute; top: 12px; left: 14px; font-size: 12px; color: var(--text-2); background: none; border: 0; }
.intro-ic { font-size: 46px; line-height: 1; margin-bottom: 12px; }
.intro-t { font-size: 18px; font-weight: 800; margin-bottom: 10px; }
.intro-b { font-size: 13.5px; color: var(--text-2); line-height: 2.1; margin-bottom: 18px; }
.intro-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; }
.intro-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: .2s; }
.intro-dots span.on { background: var(--accent); width: 20px; border-radius: 999px; }
.intro-card .btn { margin-bottom: 8px; }
.intro-later { display: block; margin: 6px auto 0; color: var(--text-2); font-size: 12.5px; background: none; border: 0; }

/* ---- media viewer polish (overrides the earlier rules) --------------------
   Fixes: 40px hit-areas (below the 44px minimum), a hardcoded `left:150px` on the save
   button that collided with the "go to message" pill, and controls that vanished against
   a bright photo. A top scrim guarantees contrast over ANY image. */
#lightbox::before { content: ''; position: absolute; top: 0; left: 0; right: 0; z-index: 1;
  height: calc(96px + var(--sat)); pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0)); }
#lightbox .lb-close, #lightbox .lb-save {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(28,28,32,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14); color: #fff; z-index: 3;
  top: max(calc(12px + var(--sat)), 44px); transition: transform .12s ease, background .15s ease; }
#lightbox .lb-close { right: 12px; left: auto; font-size: 22px; }
#lightbox .lb-save  { left: 12px;  right: auto; }
#lightbox .lb-close:active, #lightbox .lb-save:active { transform: scale(.92); background: rgba(28,28,32,.85); }
#lightbox .lb-goto { top: max(calc(19px + var(--sat)), 51px); left: 66px; right: auto; z-index: 3;
  background: rgba(28,28,32,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14); padding: 8px 14px; }
#lightbox.photo-only .lb-save { left: 12px; }
#lightbox .lb-count { z-index: 3; background: rgba(28,28,32,.55); padding: 5px 14px; border-radius: 999px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 1; }
#lightbox .lb-nav { width: 48px; height: 48px; background: rgba(28,28,32,.55); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* give the media itself room so it never sits under the controls */
#lightbox .lb-stage { max-height: calc(100% - var(--sat) - var(--sab) - 108px); }
/* The stage has only a MAX height, so the media's max-height:100% resolved to "none": a phone
   screenshot or a portrait video ran under the close/save buttons and the counter. Size the
   media against the viewport itself (vh first, for WebViews without dvh). */
#lightbox img, #lightbox video {
  max-height: calc(100vh - var(--sat) - var(--sab) - 108px);
  max-height: calc(100dvh - var(--sat) - var(--sab) - 108px);
}

/* ── admin: checkbox rows + broadcast history + win-back steps ──────────────
   .chk was already used in five sheets but had never been styled — the box and its
   label sat unaligned on the baseline. Styling it here fixes those too. */
.chk {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--text); line-height: 1.7;
  margin: 8px 0 10px; cursor: pointer; user-select: none;
}
.chk input[type="checkbox"] {
  flex: none; width: 18px; height: 18px; margin: 0;
  accent-color: var(--accent); cursor: pointer;
}
.bc-hist { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.bc-hist h4 { font-size: 12px; color: var(--text-2); margin: 0 0 8px; font-weight: 600; }
.bc-hrow {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; margin-bottom: 6px;
  background: var(--bg-2); border-radius: 10px;
}
.bc-hrow b { font-size: 12px; font-weight: 600; }
.bc-hrow span { font-size: 11px; color: var(--text-2); }
.bc-hrow i { font-size: 10px; color: var(--text-2); font-style: normal; opacity: .75; }
.wb-step {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px 2px; margin-bottom: 10px;
}
.wb-step > b { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 6px; }

/* ── password recovery (code + admin request queue) ───────────────────────── */
.fp-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.fp-tab {
  flex: 1; padding: 9px 6px; border-radius: 10px; border: 1px solid var(--border);
  background: transparent; color: var(--text-2); font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.fp-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.fp-note { font-size: 12px; color: var(--text-2); line-height: 1.9; margin-bottom: 10px; }
.rc-intro { font-size: 12.5px; color: var(--text-2); line-height: 1.95; margin-bottom: 12px; }
.rc-have, .rc-none { font-size: 12px; line-height: 1.9; margin-bottom: 12px; }
.rc-none { color: var(--accent); }
/* the code itself: big, monospaced and selectable — people copy it by hand */
.rc-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 19px; letter-spacing: 2px; font-weight: 600; text-align: center;
  padding: 16px 10px; margin: 12px 0 10px; border-radius: 12px;
  background: var(--bg-2); border: 1px dashed var(--accent);
  user-select: all; -webkit-user-select: all; word-break: break-all;
}
.rc-warn { font-size: 11.5px; color: var(--accent); line-height: 1.8; margin-top: 8px; }
.rq-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.rq-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rq-h span { font-size: 11px; color: var(--text-2); }
.rq-f { font-size: 12px; color: var(--text-2); line-height: 1.9; }
.rq-f .ok { color: #2ea86a; font-weight: 600; }
.rq-f .bad { color: #d9534f; font-weight: 600; }
.rq-note { font-size: 12px; margin-top: 6px; padding: 8px 10px; border-radius: 9px; background: var(--bg-2); line-height: 1.8; }
.rq-btns { display: flex; gap: 8px; margin-top: 10px; }
.rq-btns .btn { flex: 1; margin: 0; }

/* ── secret chats ─────────────────────────────────────────────────────────── */
/* key fingerprint — big enough that two people can compare it over a call */
.sc-fp {
  font-size: 34px; letter-spacing: 6px; text-align: center;
  padding: 18px 8px 10px; line-height: 1.5;
}
.sc-fp-hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; letter-spacing: 1px; text-align: center;
  color: var(--text-2); padding-bottom: 14px; user-select: all; -webkit-user-select: all;
}
.sc-ttls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 6px; }
.sc-ttl {
  padding: 12px 8px; border-radius: 11px; border: 1px solid var(--border);
  background: transparent; color: var(--text); font-family: inherit; font-size: 13px; cursor: pointer;
}
.sc-ttl.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
/* secret chats are visually distinct in the list so nobody types into the wrong one. The old rule
   targeted .chat-name, which the list never renders, and no row ever had the class — chatIcon()
   now draws the lock (list, header, forward picker) and renderChatList sets .secret. */
.ci-secret { color: #2ea86a; }
.chat-item.secret .name { color: #2ea86a; }
/* a secret chat waiting for an answer: shown in place of the composer, nothing can be sent yet */
.sc-pending { padding: 12px 16px; text-align: center; }
.sc-pending-t { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--text); }
.sc-pending-t svg { color: #2ea86a; flex: 0 0 auto; }
.sc-pending-s { font-size: 12.5px; color: var(--text-2); line-height: 1.8; margin-top: 4px; }
.sc-pending-b { display: flex; gap: 8px; margin-top: 10px; }
.sc-pending-b .btn { flex: 1; margin: 0; }
.sc-ttl-chip {
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
  background: var(--bg-2); color: var(--text-2); margin-inline-start: 6px;
}

/* ── telegram connectivity diagnostic ─────────────────────────────────────── */
.tg-diag { margin: 10px 0 4px; }
.tg-diag > div {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 11.5px; padding: 7px 10px; margin-bottom: 5px;
  border-radius: 9px; background: var(--bg-2);
}
.tg-diag > div span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; opacity: .8; }
.tg-diag > div.ok b { color: #2ea86a; }
.tg-diag > div.bad b { color: #d9534f; font-weight: 500; }

/* Drag-to-dismiss needs the whole stage to own vertical gestures, not just the <img>.
   Without this the browser claims the pan over video and over the letterbox area, and the
   drag simply never reaches our handler. */
#lightbox, #lightbox .lb-stage, #lightbox video { touch-action: none; }
#lightbox .lb-stage { will-change: transform; }

/* the "sign in again" bar — an account that cannot read or send outranks anything else here */
.relog-bar { align-items: center; }
.relog-bar .ann-tx { flex: 1; }
.relog-bar .btn { margin: 0; flex: none; padding: 6px 12px; font-size: 12px; white-space: nowrap; }

/* ── recovery code: three ways to keep it ─────────────────────────────────── */
.rc-ways { display: flex; gap: 8px; margin: 12px 0 6px; }
.rc-way {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 6px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-2); color: var(--text); font-family: inherit; font-size: 12px; cursor: pointer;
}
.rc-way span { font-size: 22px; line-height: 1; }
.rc-way:active { transform: scale(.97); }
/* the QR is the path we steer people to — a screenshot is the one "save" everybody manages */
.rc-qr { display: block; margin: 8px auto 4px; border-radius: 10px; }

/* right-aligned status on a settings row ("ساخته شده ✓" / "ساخته نشده") */
.st-row .st-val { margin-inline-start: auto; font-size: 12px; color: var(--text-2); }

/* ── one-time media: the 🔥 toggle in the send preview ────────────────────── */
.ot-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 13px; margin: 10px 0; border-radius: 13px;
  border: 1px solid var(--border); background: var(--bg-2);
  color: var(--text); font-family: inherit; text-align: start; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ot-toggle.on { border-color: #e8623c; background: color-mix(in srgb, #e8623c 12%, var(--bg-2)); }
.ot-fire { font-size: 19px; filter: grayscale(1) opacity(.5); transition: filter .15s; }
.ot-toggle.on .ot-fire { filter: none; }
.ot-lb { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ot-lb b { font-size: 13px; font-weight: 600; }
.ot-lb i { font-size: 11px; font-style: normal; color: var(--text-2); }
.ot-sw { font-size: 12px; font-weight: 700; color: #e8623c; min-width: 30px; text-align: center; }

/* ── one-time media: sealed bubble + full-screen viewer ───────────────────── */
.onetime {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px; border-radius: 14px; min-width: 190px;
  border: 1px dashed color-mix(in srgb, #e8623c 55%, transparent);
  background: color-mix(in srgb, #e8623c 10%, transparent);
  color: var(--text); font-family: inherit; text-align: start; cursor: pointer;
}
.onetime[disabled] { cursor: default; opacity: .6; border-style: solid; }
.onetime .ot-ic { font-size: 21px; }
.onetime.spent .ot-ic { filter: grayscale(1); }
.onetime .ot-txt { display: flex; flex-direction: column; gap: 2px; }
.onetime .ot-txt b { font-size: 13.5px; font-weight: 600; }
.onetime .ot-txt i { font-size: 11px; font-style: normal; color: var(--text-2); }

.ot-view {
  position: fixed; inset: 0; z-index: 400; background: #000;
  display: flex; flex-direction: column; opacity: 1; transition: opacity .2s;
  /* no long-press "save image", no text selection, no callout */
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.ot-view.gone { opacity: 0; }
.ot-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--sat) + 10px) 14px 10px; flex: none;
}
.ot-count {
  min-width: 42px; padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 14px; font-weight: 700; text-align: center;
}
.ot-x {
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.ot-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px; }
.ot-stage img, .ot-stage video { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.ot-stage video { pointer-events: auto; }
.ot-note {
  flex: none; text-align: center; color: rgba(255,255,255,.6); font-size: 12px;
  padding: 10px 16px calc(var(--sab) + 14px);
}

/* ---- admin alerts list (ADMIN-ALERTS) ------------------------------------ */
/* The system's memory of everything it told the admin. Rows are scannable at a glance:
   the tone stripe carries severity, so an outage stands out from a routine signup without
   the reader having to parse Persian text in a hurry. */
.al-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.al-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text-2);
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.al-chip.on { border-color: var(--accent); color: var(--accent); background: rgba(91, 155, 240, .12); }
.al-chip b { font-weight: 600; opacity: .75; }
/* unseen-per-kind marker — a small filled dot rather than another number, so the chip stays short */
.al-chip i {
  font-style: normal; min-width: 16px; height: 16px; line-height: 16px; text-align: center;
  border-radius: 999px; background: var(--danger, #e05252); color: #fff; font-size: 10.5px;
}
.al-list { max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.al-day {
  position: sticky; top: 0; z-index: 1; padding: 6px 2px 4px;
  font-size: 11.5px; color: var(--text-2); background: var(--sheet-bg, var(--bg));
}
.al-row {
  display: flex; align-items: flex-start; gap: 9px; padding: 9px 8px; border-bottom: 1px solid var(--border);
  border-inline-start: 3px solid transparent; border-radius: 6px;
}
.al-row[data-u] { cursor: pointer; }
.al-row[data-u]:active { background: var(--hover, rgba(127, 127, 127, .08)); }
.al-row.bad { border-inline-start-color: var(--danger, #e05252); }
.al-row.good { border-inline-start-color: var(--ok, #2ea56b); }
.al-row.warn { border-inline-start-color: var(--warn, #d98c1f); }
.al-row.new { background: rgba(91, 155, 240, .07); }
.al-ic { font-size: 16px; line-height: 1.35; flex: 0 0 auto; }
.al-main { min-width: 0; flex: 1; }
.al-k { font-size: 12.5px; font-weight: 600; }
.al-k .al-who { font-weight: 400; color: var(--accent); }
.al-t { font-size: 12px; color: var(--text-2); margin-top: 2px; word-break: break-word; }
.al-time { font-size: 11px; color: var(--text-2); flex: 0 0 auto; margin-top: 1px; }

/* ---- in-app VPN connect button (Android only) ---------------------------- */
/* Deliberately the loudest control on the panel: for a customer who bought a service, tapping
   this IS the product. Everything else on the screen is a fallback for other apps. */
/* The opened service shows the same two gauges as the home card — three lines of text that
   made you subtract to find out how much was left are gone. */
.cfg-gauges { margin: 2px 0 10px; padding: 6px 4px 2px; border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--border); }
.cfg-gauges .hq-gauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cfg-gauges.low .ga-fill, .cfg-gauges.low .ga-svg line.on { stroke: #D9772E; }
.cfg-gauges.low .ga-knob { stroke: #D9772E; }
.cfg-gauges.low .ga-num b { color: #B8581A; }
.cg-off { margin: 2px 8px 6px; padding: 6px 10px; border-radius: 10px; font-size: 11.5px;
  background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); text-align: center; }


.vd-msg {
  font-size: 13px; line-height: 1.8; margin-bottom: 12px; padding: 10px 12px;
  border-radius: 10px; background: rgba(224, 82, 82, .1); color: var(--danger, #e05252);
  word-break: break-word;
}
.vd-box { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.vd-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; font-size: 13px; border-bottom: 1px solid var(--border);
}
.vd-row:last-child { border-bottom: 0; }
.vd-k { color: var(--text-2); }
.vd-v { font-weight: 600; }
.vd-v.ok { color: var(--ok, #2ea56b); }
.vd-v.bad { color: var(--danger, #e05252); }

/* ═══ HOME — the switch ═════════════════════════════════════════════════════
   One control, one meaning per state. Motion is rationed: only `connected`
   radiates outward and only `connecting` spins, so movement itself reports
   status. The core never changes size or position between states — the screen
   must not jump under a thumb that is already reaching for it. */

.hm-wash {
  position: absolute; inset: -60px -60px auto -60px; height: 460px; pointer-events: none; z-index: 0;
  background:
    radial-gradient(44% 38% at 30% 24%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%),
    radial-gradient(40% 34% at 74% 16%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 74%);
}
.home > * { position: relative; z-index: 1; }

/* active-service pill — the whole multi-service story in one line */
.hm-svc {
  display: flex; align-items: center; gap: 9px; margin: 14px auto 0;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(10px); border-radius: var(--r-pill); padding: 9px 8px 9px 16px;
  cursor: pointer; font: inherit; color: var(--text); box-shadow: 0 4px 14px rgba(40,44,90,.06);
  transition: transform .16s var(--ease), box-shadow .16s;
}
.hm-svc:active { transform: scale(.97); }
/* The `hidden` ATTRIBUTE only sets display:none in the UA sheet, which an author `display: flex`
   silently beats — the pill and the gift strip both stayed on screen as empty bars. */
.hm-svc[hidden], .hm-gift[hidden] { display: none; }
.hm-svc b { font-size: 13px; font-weight: 700; }
.hm-svc .hs-sep { width: 1px; height: 14px; background: var(--border); }
.hm-svc .hs-gb { font-size: 12px; color: var(--text-2); }
.hm-svc .hs-ar { width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--panel-2); display: grid; place-items: center; }
.hm-svc .hs-ar svg { width: 13px; height: 13px; }
.hs-dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--online); }
.hs-dot.on { animation: hmDot 2.4s ease-out infinite; }
@keyframes hmDot { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--online) 50%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } }

/* ── the stage ── */
.hm-switch { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; }
.sw-stage { position: relative; width: 246px; height: 246px; display: grid; place-items: center; }
.sw-stage > * { grid-area: 1 / 1; }

.sw-ripple, .sw-halo, .sw-sweep, .sw-track { pointer-events: none; border-radius: var(--r-pill); }
.sw-ripple { width: 200px; height: 200px; border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent); opacity: 0; }
.sw-halo   { width: 246px; height: 246px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 66%); opacity: 0; }
.sw-track  { width: 212px; height: 212px; border: 1.5px solid color-mix(in srgb, var(--accent) 16%, transparent); }
.sw-sweep  {
  width: 212px; height: 212px; opacity: 0;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in srgb, var(--accent) 34%, transparent) 60deg,
    color-mix(in srgb, var(--accent-2) 38%, transparent) 105deg,
    transparent 150deg);
  -webkit-mask: radial-gradient(circle, transparent 96px, #000 97px, #000 104px, transparent 105px);
          mask: radial-gradient(circle, transparent 96px, #000 97px, #000 104px, transparent 105px);
}

.sw-core {
  position: relative; width: 172px; height: 172px; border-radius: var(--r-pill); border: 0; cursor: pointer;
  font: inherit; color: var(--accent-contrast); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent-grad);
  box-shadow: 0 22px 48px color-mix(in srgb, var(--accent) 44%, transparent),
              0 4px 12px color-mix(in srgb, var(--accent) 28%, transparent),
              inset 0 2px 0 rgba(255,255,255,.42), inset 0 -14px 26px rgba(40,36,90,.22);
  transition: transform .18s var(--ease), box-shadow .25s, background .25s;
}
.sw-core:active { transform: scale(.955); }
.sw-core:disabled { cursor: default; }
.sw-gloss { position: absolute; inset: 0; border-radius: var(--r-pill); pointer-events: none;
  background: radial-gradient(76% 52% at 50% 6%, rgba(255,255,255,.44), transparent 70%); }
.sw-ic { position: relative; display: block; }
.sw-ic svg { width: 48px; height: 48px; display: block; filter: drop-shadow(0 2px 5px rgba(40,30,110,.28)); }
.sw-tx { position: relative; font-size: 15px; font-weight: 700; letter-spacing: .3px; }
.sw-sub { position: relative; font-size: 11px; opacity: .9; margin-top: -3px; }

/* idle — a switch at rest should look at rest, not dimmed-out */
.hm-switch[data-state="idle"] .sw-core,
.hm-switch[data-state="empty"] .sw-core {
  background: linear-gradient(158deg, var(--panel), var(--panel-2));
  color: var(--text);
  /* On the cream light theme a 1px --border ring against a --panel fill is very nearly the same
     colour as the page, so the biggest control on the screen stopped reading as a control at all.
     A tinted ring plus a real drop shadow give it an edge without lighting it up like the
     connected state — it should look at rest, not switched on. */
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--panel) 80%, #fff),
              0 0 0 6px color-mix(in srgb, var(--accent) 5%, transparent),
              0 10px 26px -6px color-mix(in srgb, var(--accent) 20%, transparent);
}
.hm-switch[data-state="idle"] .sw-ic svg,
.hm-switch[data-state="empty"] .sw-ic svg { filter: none; stroke: color-mix(in srgb, var(--accent) 62%, var(--text-2)); }
.hm-switch[data-state="idle"] .sw-track,
.hm-switch[data-state="empty"] .sw-track { border-style: dashed; }

/* connecting — motion around its own axis: working, not idle */
.hm-switch[data-state="connecting"] .sw-core { opacity: .94; }
.hm-switch[data-state="connecting"] .sw-track {
  border-color: transparent;
  background: conic-gradient(from 0deg, transparent 0deg, var(--accent) 120deg, transparent 200deg);
  -webkit-mask: radial-gradient(circle, transparent 104px, #000 105px);
          mask: radial-gradient(circle, transparent 104px, #000 105px);
  animation: swSpin 1.5s linear infinite;
}

/* connected — motion outward: carrying traffic */
.hm-switch[data-state="connected"] .sw-halo   { opacity: 1; animation: swBreathe 3.6s ease-in-out infinite; }
.hm-switch[data-state="connected"] .sw-sweep  { opacity: 1; animation: swSpin 6s linear infinite; }
.hm-switch[data-state="connected"] .sw-ripple { animation: swRipple 3.4s cubic-bezier(.2,.6,.3,1) infinite; }
.hm-switch[data-state="connected"] .sw-ripple.d2 { animation-delay: 1.7s; }

/* exhausted — still, and rose: nothing to press here, the answer is below */
.hm-switch[data-state="exhausted"] .sw-core {
  background: linear-gradient(158deg, color-mix(in srgb, var(--danger) 10%, var(--panel)), color-mix(in srgb, var(--danger) 18%, var(--panel)));
  color: var(--chip-danger-text); border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent);
  box-shadow: 0 6px 18px rgba(40,44,90,.07);
}
.hm-switch[data-state="exhausted"] .sw-ic svg { filter: none; stroke: var(--danger); }
.hm-switch[data-state="exhausted"] .sw-track { border-color: color-mix(in srgb, var(--danger) 22%, transparent); }

@keyframes swBreathe { 0%,100% { transform: scale(.92); opacity: .55; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes swSpin    { to { transform: rotate(360deg); } }
@keyframes swRipple  { 0% { transform: scale(.72); opacity: .5; } 100% { transform: scale(1.5); opacity: 0; } }

.sw-meta { display: flex; align-items: center; gap: 10px; min-height: 22px; font-size: 13px; color: var(--text-2); text-align: center; }
.sw-meta .mt-time { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.sw-meta .mt-sep { width: 3px; height: 3px; border-radius: var(--r-pill); background: var(--border); }
.sw-meta .mt-srv { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-meta .mt-ping { display: inline-flex; align-items: center; gap: 4px; background: var(--chip-ok-bg); color: var(--chip-ok-text);
  border-radius: var(--r-pill); padding: 3px 8px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sw-lead { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; padding: 0 26px; }
.sw-lead b { font-size: 14px; font-weight: 700; color: var(--text); }
.sw-lead small { font-size: 12px; color: var(--text-2); }

/* ── the card under the globe: two half-gauges, volume and days ──
   Approved design: design/phone-test/CardP1.dc.html. Both arcs are drawn from the RIGHT
   (M cx+r … A … cx−r) because the screen is RTL, and a knob marks the exact point the value
   reaches. The throughput graph and the speed reading that used to live here are gone — the
   space they took is what lets the whole home screen fit without scrolling. */
.hm-quota { margin: 8px var(--sp-5) 0; background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: 1px solid var(--border); border-radius: 22px; padding: 8px 12px 9px;
  box-shadow: 0 6px 20px rgba(40,44,90,.05); }
.hq-head { display: flex; align-items: center; gap: 8px; }
.hq-head b { font-size: 13px; font-weight: 800; color: var(--text); }
.hq-sp { flex: 1; }
.hq-until { font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.hq-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ok, #0FA85F) 12%, transparent); color: var(--ok-ink, #0A6E40);
  font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.hq-chip i { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--ok, #0FA85F); }
.hm-quota.low .hq-chip { background: color-mix(in srgb, #D9772E 14%, transparent); color: #B8581A; }
.hm-quota.low .hq-chip i { background: #D9772E; }

.hq-gauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 4px; }
.ga { position: relative; height: 64px; }
.ga.sep { border-inline-start: 1px solid var(--border); }
.ga-svg { position: absolute; left: 50%; transform: translateX(-50%); top: 0; overflow: visible; }
.ga-track { fill: none; stroke: var(--panel-2); stroke-width: 8; stroke-linecap: round; }
.ga-fill { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round;
  transition: stroke-dashoffset .6s var(--ease); }
.ga-svg .tk { stroke: color-mix(in srgb, var(--text-2) 45%, transparent); stroke-width: 2; stroke-linecap: round; }
.ga-svg line.on { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.ga-svg line.off { stroke: color-mix(in srgb, var(--text-2) 32%, transparent); stroke-width: 2.4; stroke-linecap: round; }
.ga-knob { fill: var(--panel); stroke: var(--accent); stroke-width: 2; }
.hm-quota.low .ga-fill, .hm-quota.low .ga-svg line.on { stroke: #D9772E; }
.hm-quota.low .ga-knob { stroke: #D9772E; }
.hm-quota.low .ga-num b { color: #B8581A; }
.ga-num { position: absolute; left: 0; right: 0; top: 20px; display: flex; flex-direction: column;
  align-items: center; line-height: 1.12; pointer-events: none; }
.ga-num b { font-size: 20px; font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; }
.ga-num > span { font-size: 9.5px; color: var(--text-2); }
.ga-e { position: absolute; bottom: 0; font-size: 9px; color: var(--text-2); opacity: .75; font-variant-numeric: tabular-nums; }
.ga-e0 { inset-inline-end: 8px; }
.ga-e1 { inset-inline-start: 8px; }

.hq-acts { display: flex; gap: 8px; margin-top: 7px; }
.hq-btn { flex: 1; min-width: 0; border: 0; cursor: pointer; font: inherit; height: 36px; padding: 0 10px;
  border-radius: 13px; font-size: 13px; font-weight: 800; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 7px; transition: transform .16s var(--ease); }
.hq-btn svg { width: 16px; height: 16px; }
.hq-btn:active { transform: scale(.97); }
.hq-btn.cfgs { flex: 1.45; background: var(--accent-grad); color: var(--accent-contrast);
  box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--accent) 80%, transparent); }
.hq-btn.renew { background: var(--panel); color: var(--text); border: 1px solid var(--border);
  box-shadow: 0 2px 6px -3px rgba(43,39,32,.2); }
/* Running out: the renewal becomes the loud one and the configs button steps back. */
.hm-quota.low .hq-btn.renew { flex: 1.9; background: linear-gradient(135deg, #C8621F, #E69744); color: #fff;
  border: 0; box-shadow: 0 8px 16px -8px rgba(200,98,31,.8); }
.hm-quota.low .hq-btn.cfgs { flex: 1; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); box-shadow: 0 2px 6px -3px rgba(43,39,32,.2); }

/* Skeleton: same height, so nothing jumps when the panel's numbers land. */
.hm-quota.sk .sk-gauge { position: absolute; left: 50%; transform: translateX(-50%); top: 8px;
  width: 132px; height: 46px; border-radius: 66px 66px 0 0;
  border: 8px solid var(--panel-2); border-bottom: 0; }
.hm-quota.sk .sk-word { display: block; width: 46px; height: 13px; border-radius: 7px; background: var(--panel-2); }
.hm-quota.sk .sk-word.wide { width: 120px; }
.hm-quota.sk .hq-btn { opacity: .55; pointer-events: none; }

/* ── buy CTA (no service / test finished) ── */
.hm-cta { margin: 16px var(--sp-5) 0; display: flex; flex-direction: column; gap: 10px; }
.hm-buy { border: 0; cursor: pointer; font: inherit; background: var(--accent-grad); color: var(--accent-contrast);
  border-radius: 18px; padding: 16px; font-size: 14.5px; font-weight: 700;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 34%, transparent);
  display: flex; align-items: center; justify-content: center; gap: 9px; animation: hmNudge 2.8s ease-in-out infinite; }
.hm-buy:active { transform: scale(.975); animation: none; }
.hm-buy svg { width: 19px; height: 19px; }
@keyframes hmNudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.hm-hint { display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 13px 15px; cursor: pointer; font: inherit;
  color: var(--text-2); font-size: 12px; }
.hm-hint svg { width: 17px; height: 17px; flex: 0 0 auto; }
.hm-hint b { color: var(--text); font-variant-numeric: tabular-nums; }
.hm-hint .hh-go { margin-inline-start: auto; color: var(--accent); font-weight: 700; font-size: 11.5px; }

/* guest gift strip */
.hm-gift { position: relative; align-self: center; margin-top: 16px; display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--chip-warn-bg), color-mix(in srgb, var(--chip-warn-bg) 40%, var(--panel)));
  border: 1px solid color-mix(in srgb, var(--chip-warn-text) 30%, transparent); border-radius: var(--r-pill);
  padding: 8px 15px; overflow: hidden; }
.hm-gift svg { width: 15px; height: 15px; position: relative; }
.hm-gift span { position: relative; font-size: 12px; color: var(--chip-warn-text); font-weight: 600; }
.hm-gift::after { content: ''; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: hmShine 3.6s ease-in-out infinite; }
@keyframes hmShine { 0% { transform: translateX(-120%) rotate(18deg); } 100% { transform: translateX(320%) rotate(18deg); } }

/* ── service drawer ── */
.svcsheet-list { display: flex; flex-direction: column; gap: 10px; }
.ss-row { display: flex; align-items: center; gap: 13px; border: 1px solid var(--border); background: var(--panel);
  border-radius: var(--r-xl); padding: 15px; cursor: pointer; font: inherit; color: var(--text); text-align: start;
  animation: ssIn .46s cubic-bezier(.22,.9,.28,1) both; transition: transform .16s var(--ease); }
.ss-row:active { transform: scale(.985); }
.ss-row.on { border: 0; background: linear-gradient(135deg, var(--accent-soft), var(--panel) 60%);
  box-shadow: 0 0 0 1.6px var(--accent), 0 8px 22px color-mix(in srgb, var(--accent) 16%, transparent); }
.ss-row.dead { border-color: color-mix(in srgb, var(--danger) 26%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 7%, var(--panel)), var(--panel) 60%); }
@keyframes ssIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ss-ring { position: relative; width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; }
.ss-ring svg.rg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ss-badge { width: 30px; height: 30px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--accent-grad); }
.ss-badge svg { width: 15px; height: 15px; stroke: #fff; }
.ss-badge.flat { background: var(--panel-2); }
.ss-badge.flat svg { stroke: var(--text-2); }
.ss-badge.bad { background: var(--chip-danger-bg); }
.ss-badge.bad svg { stroke: var(--danger); }
.ss-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ss-main b { font-size: 14px; font-weight: 700; }
.ss-main small { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ss-main small.bad { color: var(--danger); font-weight: 500; }
.ss-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--accent-soft); color: var(--accent);
  border-radius: var(--r-pill); padding: 3px 9px; font-size: 10.5px; font-weight: 700; }
.ss-act { border: 0; cursor: pointer; font: inherit; border-radius: var(--r-pill); padding: 9px 15px;
  font-size: 12px; font-weight: 700; flex: 0 0 auto; background: var(--panel-2); color: var(--text); }
.ss-act.hot { background: var(--accent-grad); color: var(--accent-contrast);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent); }
.ss-new { border: 1.5px dashed color-mix(in srgb, var(--text-2) 40%, transparent); background: transparent;
  border-radius: var(--r-lg); padding: 14px; cursor: pointer; font: inherit; color: var(--accent);
  font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ss-new svg { width: 17px; height: 17px; }

@media (prefers-reduced-motion: reduce) {
  .sw-halo, .sw-sweep, .sw-ripple, .hm-buy, .hm-gift::after, .ss-row, .hs-dot.on { animation: none !important; }
}

/* ── the switch owns the first screen ──────────────────────────────────────
   The mock shows one thing when you open the app: the button, what it is
   doing, and what it costs you. The legacy home cards (invite, quick actions,
   notes) still exist and still work — they simply start below the fold, which
   is where a customer who came to press one button expects them. Sizing the
   switch to the viewport is what makes the shipped screen match the design;
   without it the button競 competes with four cards for the same fold. */
.home-hero.flat {
  background: none;
  box-shadow: none;
  height: 100%;                     /* exactly one screen — there is no second fold any more */
  padding-bottom: 16px;             /* the dock lives OUTSIDE this scroller; only its raised
                                       «خانه» bubble reaches ~3px up into the last row */
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Locked: the owner's first note after testing on a real phone was that he never wants to
   scroll here. So the page is exactly the viewport, the switch takes whatever height is left
   between the bar and the tiles, and the globe shrinks instead of pushing the card out of view. */
.home { overflow: hidden; overscroll-behavior: contain; }
.home-hero.flat #homeSwitch { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.home-hero.flat .qa-grid { flex: 0 0 auto; margin: 0; }
.home-hero.flat #homeBanner:empty { display: none; }
/* The globe is the only thing allowed to give: it takes whatever height the fold has left
   after the bar, the status lines, the card and the tiles, so nothing ever falls behind the
   dock — on a tall phone it grows, on a short one it shrinks, and the page never scrolls. */
.home-hero.flat .hm-switch { flex: 1 1 auto; min-height: 0; }
.home-hero.flat #hmBody { flex: 0 0 auto; }
.home-hero.flat .sw-say, .home-hero.flat .sw-meta { flex: 0 0 auto; }
.home-hero.flat .hm-switch .sw-stage,
.home-hero.flat .hm-switch.globe .sw-stage {
  flex: 1 1 auto; min-height: 84px; width: auto; height: auto;
  aspect-ratio: 1 / 1; max-width: min(300px, 84vw); align-self: center;
}
.home-hero.flat .sw-halo { width: 100%; height: 100%; }
.home-hero.flat .sw-track, .home-hero.flat .sw-sweep { width: 96%; height: 96%; }
.home-hero.flat .sw-ripple { width: 92%; height: 92%; }
/* The sphere IS the button. At 70% of its stage it read as a small globe inside a big glow and
   people missed it; at 84% the thing you tap is the thing you see. */
.home-hero.flat .sw-core { width: 84%; height: 84%; }
/* the sweep's ring mask has to scale with the stage, or it drifts off the circle */
.home-hero.flat .sw-sweep {
  -webkit-mask: radial-gradient(circle closest-side, transparent 88%, #000 89%, #000 98%, transparent 99%);
          mask: radial-gradient(circle closest-side, transparent 88%, #000 89%, #000 98%, transparent 99%);
}
.home-hero.flat #hmBody { padding-bottom: 0; }
.home-hero.flat .hm-switch { padding-top: 0; }

/* ---- home sheet: one idiom ----------------------------------------------------------------
   Four compact tiles, then two quiet strips. Before this the sheet stacked a violet billboard,
   a red billboard, a dashed ghost card and four tall pastel tiles — four visual languages in
   500px, with the loudest one being an advert for the referral programme. */
.qa-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.qa-grid .shop-qa { padding: 6px 4px 6px; gap: 4px; border-radius: 16px; font-size: 11px; font-weight: 600; line-height: 1.25; text-align: center; }
.qa-grid .shop-qa .qa-ic { width: 30px; height: 30px; border-radius: 10px; }
.qa-grid .shop-qa .qa-ic svg { width: 19px; height: 19px; }

.hs-strip { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px;
  border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--border);
  text-align: right; font-family: inherit; color: var(--text);
  transition: transform var(--dur) var(--ease), border-color var(--dur); }
.hs-strip:active { transform: scale(.985); }
.hs-strip .hs-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.hs-strip .hs-ic svg { width: 18px; height: 18px; }
.hs-strip .hs-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hs-strip .hs-tx b { font-size: 13px; font-weight: 700; }
.hs-strip .hs-tx small { font-size: 10.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-strip .hs-ar { flex: 0 0 auto; display: flex; color: var(--text-2); opacity: .5; }
.hs-strip .hs-ar svg { width: 16px; height: 16px; }
.hs-strip.ref { border-color: color-mix(in srgb, var(--accent) 28%, transparent); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.hs-strip.ref .hs-ic { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.hs-strip.ref .hs-amt { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 8px; padding: 4px 8px; white-space: nowrap; }
.hs-strip.soon { border-style: dashed; }
.hs-strip.soon .hs-ic { background: color-mix(in srgb, var(--text-2) 12%, transparent); color: var(--text-2); }


/* on short screens everything tightens a notch — the stage already scales with the fold */
@media (max-height: 720px) {
  .home-hero.flat { gap: 6px; }
  .home-hero.flat .sw-core .sw-ic svg { width: 40px; height: 40px; }
  .hm-switch { gap: 9px; }
  .hm-quota { margin-top: 8px; padding: 10px 13px; }
  .qa-grid .shop-qa { padding: 9px 4px 8px; }
}


/* Update strip at the top of Settings — only rendered when an update actually exists, so it is
   allowed to be the loud thing on the page: a user stuck on an old build has no other way out. */
.st-upd { width: 100%; display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 13px 14px;
  border-radius: var(--r-md); border: 0; cursor: pointer; text-align: right; font-family: inherit;
  background: var(--accent-grad); color: var(--accent-contrast); box-shadow: var(--glow); }
.st-upd .stu-ic { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; font-size: 17px;
  border-radius: 11px; background: rgba(255,255,255,.20); }
.st-upd .stu-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-upd .stu-tx b { font-size: 13px; font-weight: 700; }
.st-upd .stu-tx small { font-size: 10.5px; opacity: .82; }
.st-upd .stu-go { display: flex; opacity: .75; }
.st-upd .stu-go svg { width: 17px; height: 17px; }
@media (prefers-reduced-motion: no-preference) { .st-upd { animation: nudge-in .5s var(--ease) both; } }
@keyframes nudge-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* «اتصال در برنامه» — on iOS this screen IS the connect button, so it gets real hierarchy. */
.ca-lead { font-size: 12.5px; color: var(--text-2); line-height: 1.9; margin-bottom: 12px; }
.ca-how { margin: 4px 0 14px; padding: 12px 14px; border-radius: var(--r-md); font-size: 13px; font-weight: 600;
  color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); line-height: 1.8; }
.ca-get { width: 100%; margin-top: 10px; padding: 11px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--accent); font-weight: 600; }
.connect-app { cursor: pointer; font-family: inherit; }

/* Admin: the installed apps, and the tunnels that are up right now. */
.adx-clients { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; margin-bottom: 14px; }
.adx-cl-load { font-size: 12px; color: var(--text-2); text-align: center; padding: 10px 0; }
.adx-cl-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.adx-cl-kpi { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; background: var(--bg); }
.adx-cl-kpi b { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.adx-cl-kpi small { font-size: 10px; color: var(--text-2); text-align: center; line-height: 1.5; }
/* The live tunnel count is the one number worth a colour — everything else is context for it. */
.adx-cl-kpi.live { background: color-mix(in srgb, var(--online) 14%, transparent); }
.adx-cl-kpi.live b { color: var(--online); }
.adx-cl-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: 11.5px; color: var(--text-2); }
.adx-cl-row.cur { color: var(--text); font-weight: 600; }
.adx-cl-v { min-width: 52px; font-variant-numeric: tabular-nums; }
.adx-cl-p { min-width: 60px; font-size: 10.5px; opacity: .75; }
.adx-cl-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.adx-cl-bar i { display: block; height: 100%; border-radius: 3px; background: var(--text-2); opacity: .45; }
.adx-cl-row.cur .adx-cl-bar i { background: var(--accent-grad); opacity: 1; }
.adx-cl-note { font-size: 10.5px; color: var(--text-2); line-height: 1.8; padding: 8px 2px 2px; }
.adx-cl-btn { width: 100%; margin-top: 8px; padding: 11px; border: 0; border-radius: var(--r-md); cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700; background: var(--accent-grad); color: var(--accent-contrast); }
.adx-cl-btn:disabled { opacity: .6; cursor: default; }
.adx-cl-auto { display: block; width: 100%; background: none; border: 0; text-align: start; cursor: pointer; font: inherit; font-size: 10.5px; }
.adx-cl-auto b { color: var(--text); }

/* Notification ask — the benefit rows. A permission is granted for a reason, so the reasons are
   the body of the card rather than a sentence someone has to parse. */
.na-rows { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 14px 0 4px; text-align: right; }
.na-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--bg); border: 1px solid var(--border); }
.na-row-ic { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
.na-row-ic svg { width: 16px; height: 16px; }
.na-row-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.na-row-tx b { font-size: 12.5px; font-weight: 700; color: var(--text); }
.na-row-tx small { font-size: 10.5px; color: var(--text-2); line-height: 1.6; }

/* Quota bar, before the panel has answered. Same box, same height — only the parts we do not yet
   know are replaced, so the numbers arriving does not shift the layout under the user's thumb. */
.hm-quota.sk .sk-pill { display: inline-block; width: 86px; height: 13px; border-radius: 7px; }
.hm-quota.sk .sk-word { display: inline-block; width: 58px; height: 11px; border-radius: 6px; }
.hm-quota.sk .sk-pill, .hm-quota.sk .sk-word, .hm-quota.sk .sk-fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--text-2) 13%, transparent) 25%,
                                     color-mix(in srgb, var(--text-2) 22%, transparent) 50%,
                                     color-mix(in srgb, var(--text-2) 13%, transparent) 75%);
  background-size: 220% 100%; }
.hm-quota.sk .sk-fill { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .hm-quota.sk .sk-pill, .hm-quota.sk .sk-word, .hm-quota.sk .sk-fill { animation: sk-sweep 1.25s linear infinite; }
}
@keyframes sk-sweep { from { background-position: 200% 0; } to { background-position: -20% 0; } }

/* The settings-row look is scoped to .settings2, so a row rendered inside a sheet got no sizing
   and its SVG fell back to its natural size — a camera icon the width of the card. Same values,
   available wherever a sheet reuses the pattern. */
.sheet .st-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 13px; margin-bottom: 8px;
  border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--border); cursor: pointer;
  font-family: inherit; text-align: right; color: var(--text); }
.sheet .st-row .st-ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: var(--accent-soft);
  color: var(--accent); display: flex; align-items: center; justify-content: center; }
.sheet .st-row .st-ic svg { width: 19px; height: 19px; }
.sheet .st-row .st-lb { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }

/* Account switcher rows — the same shape as a settings row, so it reads as part of the page. */
.acc-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 13px; margin-bottom: 7px;
  border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--border); cursor: pointer; }
.acc-row.cur { cursor: default; border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.acc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: right; }
.acc-tx b { font-size: 13px; font-weight: 700; color: var(--text); }
.acc-tx small { font-size: 10.5px; color: var(--text-2); }
.acc-tick { color: var(--accent); display: flex; }
.acc-tick svg { width: 17px; height: 17px; }
.acc-x { border: 0; background: none; cursor: pointer; color: var(--text-2); padding: 6px; display: flex; }
.acc-x svg { width: 15px; height: 15px; }

/* ===== Renewal sheet =====
   Short on purpose. The page showing behind it is the point: this reads as a confirmation, not
   a form — which is why nothing here grows to fill the screen. */
.rn { display: flex; flex-direction: column; }
.rn-center { align-items: center; text-align: center; }
.rn-ic { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; color: #fff;
         background: var(--accent-grad);   /* the app's own primary gradient — same as every .btn */
         box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--accent) 62%, transparent); margin-top: 8px; }
.rn-big { font-size: 26px; font-weight: 800; margin-top: 20px; letter-spacing: -.2px; }
.rn-sub { font-size: 13px; color: var(--text-2); margin-top: 5px; }
.rn-rule { width: 100%; height: 1px; background: var(--border); margin: 22px 0; }
.rn-row { width: 100%; display: flex; align-items: baseline; justify-content: space-between; font-size: 13.5px; color: var(--text-2); }
.rn-row2 { margin-top: 7px; font-size: 12px; }
.rn-row b { font-size: 25px; font-weight: 800; color: var(--text); }
.rn-short { color: var(--danger, #C4677A); font-weight: 700; }
.rn-go { width: 100%; margin-top: 22px; padding: 17px; border-radius: 17px; font-size: 16px; font-weight: 800; }
.rn-note { margin-top: 12px; font-size: 11.5px; color: var(--text-2); }
.rn-link { margin-top: 20px; border: 0; background: none; cursor: pointer; font-family: inherit;
           padding: 8px; font-size: 13px; color: var(--accent); font-weight: 600;
           display: flex; align-items: center; justify-content: center; gap: 5px; }
.rn-back { border: 0; background: none; cursor: pointer; font-family: inherit; padding: 0 0 22px;
           display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 17px; font-weight: 800; }
.rn-back svg { transform: scaleX(-1); width: 20px; height: 20px; }
.rn-lbl { font-size: 12.5px; color: var(--text-2); margin-bottom: 9px; }
/* One chip per rung. A stepper for three values means tapping twice and guessing where it stops —
   and a «+» that goes quiet reads as a broken app. The whole ladder is visible instead. */
.rn-chips { display: flex; gap: 9px; margin-bottom: 22px; }
.rn-chip { flex: 1; height: 52px; border-radius: 15px; border: 1px solid var(--border); background: var(--panel-2, var(--panel));
           cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--text);
           font-variant-numeric: tabular-nums; display: grid; place-items: center; transition: transform .12s ease; }
.rn-chip:active { transform: scale(.96); }
.rn-chip.on { background: var(--accent); border-color: var(--accent); color: #fff;
              box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent) 60%, transparent); }

/* The one line explaining WHY the update sheet appeared — only present when the server
   refused an action (426), never on the routine "a new version exists" prompt. */
.upd-why { margin: 8px 0 2px; padding: 10px 13px; border-radius: 12px; font-size: 12.5px; line-height: 1.8;
           background: color-mix(in srgb, var(--accent) 9%, transparent);
           border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); color: var(--accent); }

/* ===== Home, second pass =====
   Depth comes from THREE shadow layers, not one: a tight line that draws the edge, a mid shadow
   that lifts the card, and a wide halo that puts air underneath. The inset white line along the
   top is what actually reads as "raised" — without it the rest is just a drop shadow. */
.deck-configs, .qa-grid .shop-qa {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, white) 0%, var(--panel) 100%);
  border: 1px solid var(--border); border-top-color: color-mix(in srgb, var(--border) 30%, white);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 78%, transparent),
              0 1px 2px rgba(0,0,0,.05),
              0 6px 13px -6px rgba(0,0,0,.16),
              0 16px 32px -14px rgba(0,0,0,.13);
}
/* «کانفیگ‌های من» is the one coloured card on the screen and the only one with a tinted halo, so
   it is where the eye lands after the connect control — without anything having to shout. */
.deck-configs {
  background: var(--accent-grad); border-color: var(--accent); border-top-color: color-mix(in srgb, var(--accent) 55%, white);
  padding: 15px 17px; border-radius: 21px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 4px rgba(0,0,0,.12),
              0 10px 20px -8px color-mix(in srgb, var(--accent) 55%, transparent),
              0 22px 40px -16px color-mix(in srgb, var(--accent) 45%, transparent);
}
.deck-configs .dc-tx b { font-size: 15px; font-weight: 800; }
.deck-configs .dc-ic { width: 40px; height: 40px; border-radius: 13px; }
/* Three tiles, never four: the row stays balanced whether the third slot says مدیریت or نمایندگی. */
.qa-grid.qa3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qa-grid.qa3 .shop-qa { padding: 13px 6px 11px; border-radius: 17px; }

/* Support: the answers come BEFORE the person. Someone who finds it here neither waits nor
   fills the ticket queue — but the ticket button is not hidden, only placed after. */


/* Login: someone who has forgotten their password is stuck at that exact moment and has to find
   this immediately — a small link under the form was not findable. */
.auth-forgot { width: 100%; display: flex; align-items: center; gap: 11px; padding: 13px 15px;
  margin-bottom: 12px; border-radius: 15px; cursor: pointer; font-family: inherit; text-align: start;
  background: var(--panel); border: 1px solid var(--border); color: var(--text); }
.auth-forgot b { flex: 1; font-size: 13px; font-weight: 700; }
.auth-forgot .af-ic { color: var(--text-2); display: flex; } .auth-forgot .af-ic svg { width: 17px; height: 17px; }
.auth-forgot .af-ar { color: var(--text-2); display: flex; } .auth-forgot .af-ar svg { width: 15px; height: 15px; }

/* ===== The globe =====
   One variable drives the whole picture: data-state on .hm-switch. Colour, motion and which arc
   is drawn all follow from it, so the widget can never show a state its own text contradicts.
   Depth is geometry and light — the shading gradient, the meridians narrowing toward the limb,
   the day/night terminator — never a glass highlight. */
.hm-switch.globe .sw-stage { width: 300px; height: 300px; max-width: 84vw; max-height: 84vw; }
.hm-switch.globe .sw-core {
  width: 100%; height: 100%; border: 0; background: none; padding: 0; border-radius: var(--r-pill);
  position: relative; display: grid; place-items: center; box-shadow: none;
}
.hm-switch.globe .sw-core:active { transform: scale(.975); }
.sw-globe { width: 100%; height: 100%; display: block; }
/* The flag sits in HTML, not in SVG <text>: emoji flags do not render inside SVG text and leave
   an empty circle behind. */
.sw-flag { position: absolute; top: 26.5%; inset-inline-start: 57.5%; font-size: 15px; line-height: 1; pointer-events: none; }
.sw-say { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 0; }
.sw-say .sw-tx { font-size: 18px; font-weight: 800; color: var(--text); }
.sw-say .sw-sub { font-size: 12px; color: var(--text-2); }

/* --- palette per state --- */
.hm-switch.globe { --o1:#ADA595; --o2:#8C8577; --o3:#6B6459; --o4:#4B463D; --o5:#37332C;
  --atmo: rgba(150,141,126,.18); --land:#CFC7B7; --rim: rgba(230,224,212,.5); --edge: rgba(40,35,28,.4); }
.hm-switch.globe[data-state="connected"] { --o1:#22C878; --o2:#0FA85F; --o3:#0A8149; --o4:#065C34; --o5:#044426;
  --atmo: rgba(34,200,120,.30); --land:#9DF3C4; --rim: rgba(215,255,232,.6); --edge: rgba(3,50,29,.4); }
.hm-switch.globe[data-state="connecting"] { --o1:#5FBF8F; --o2:#4C9B76; --o3:#3C7A5E; --o4:#2A5642; --o5:#1D3E30;
  --atmo: rgba(34,200,120,.20); --land:#BCE6CF; --rim: rgba(215,255,232,.4); --edge: rgba(10,44,30,.4); }
.sw-globe .o1 { stop-color: var(--o1); } .sw-globe .o2 { stop-color: var(--o2); }
.sw-globe .o3 { stop-color: var(--o3); } .sw-globe .o4 { stop-color: var(--o4); }
.sw-globe .o5 { stop-color: var(--o5); }
.sw-globe .a0, .sw-globe .a3 { stop-color: transparent; }
.sw-globe .a1 { stop-color: var(--atmo); } .sw-globe .a2 { stop-color: var(--atmo); stop-opacity: .4; }
.sw-globe .g-land { fill: var(--land); opacity: .95; }
.sw-globe .g-mesh { stroke: rgba(255,255,255,.15); stroke-width: .9; }
.sw-globe .g-rim { stroke: var(--rim); stroke-width: 2; stroke-linecap: round; }
.sw-globe .g-edge { stroke: var(--edge); stroke-width: 1; }

/* --- rotation: the land strip slides one full width, so the loop is seamless.
       It stops when nothing is flowing — a still globe IS the disconnected state.
       PAUSED, not removed: `animation: none` threw the strip back to its start on every state flip
       (each hop between connecting and connected), which read as the globe jumping and sticking.
       A paused animation carries on from where it stopped. --- */
.sw-globe .g-strip { animation: g-turn 30s linear infinite; }
.hm-switch.globe:not([data-state="connected"]) .sw-globe .g-strip { animation-play-state: paused; }
@keyframes g-turn { from { transform: translateX(0); } to { transform: translateX(-186px); } }

/* --- the route --- */
.sw-globe .g-on, .sw-globe .g-off { display: none; }
.hm-switch.globe[data-state="connected"] .sw-globe .g-on { display: block; }
.hm-switch.globe:not([data-state="connected"]) .sw-globe .g-off { display: block; }
/* The arc is outlined — white core, dark green edge — so it stays legible over the dark globe
   AND over the light page behind it. A plain white line disappeared on the lit limb. */
.sw-globe .g-arc-out { stroke: #04492A; stroke-width: 5.5; stroke-linecap: round; }
.sw-globe .g-arc-in  { stroke: #FFFFFF; stroke-width: 2.6; stroke-linecap: round; }
.hm-switch.globe:not([data-state="connected"]) .sw-globe .g-arc-out { stroke: #3B362E; stroke-width: 4.5; }
.hm-switch.globe:not([data-state="connected"]) .sw-globe .g-arc-in  { stroke: #EFEAE0; stroke-width: 2.2; }
.sw-globe .g-shadow { stroke: rgba(2,52,30,.45); stroke-width: 3; stroke-linecap: round; }
.sw-globe .g-dash { stroke: #8C8577; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 6; opacity: .6; }
.sw-globe .g-x line { stroke: #5C554A; stroke-width: 3; stroke-linecap: round; }
.sw-globe .g-src { fill: #FFFFFF; stroke: #04492A; stroke-width: 1.5; }
.sw-globe .g-pole { stroke: #04492A; stroke-width: 2; }
.sw-globe .g-dest { fill: #FFFFFF; stroke: #04492A; stroke-width: 1.5; }
.sw-globe .g-dest-off { stroke: #8C8577; stroke-width: 1.6; stroke-dasharray: 3 4; }

/* --- packets: three dots down the arc. offset-path is the only way to follow a curve in CSS,
       and it is supported everywhere this app runs (Chromium WebView, WebKit). --- */
.sw-globe .g-pkt { offset-path: path('M95 176 C 98 116, 152 74, 202 86'); animation: g-fly 2.6s linear infinite; }
.sw-globe .g-pkt.b { animation-delay: .87s; } .sw-globe .g-pkt.c { animation-delay: 1.74s; }
.sw-globe .g-pkt-o { fill: #04492A; } .sw-globe .g-pkt-i { fill: #FFFFFF; }
@keyframes g-fly { from { offset-distance: 0%; opacity: 0; } 14% { opacity: 1; }
                   86% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }
/* The origin marker breathes: it is the only thing on the picture that represents the user. */
.sw-globe .g-ping { stroke: #FFFFFF; stroke-width: 2; animation: g-ping 2.6s cubic-bezier(.2,.7,.3,1) infinite; }
@keyframes g-ping { 0% { r: 5; opacity: .85; } 100% { r: 19; opacity: 0; } }

/* --- the invitation ring: only when it is OFF, because that is the only time the globe has to
       announce that it is a button at all. --- */
.sw-globe .g-invite { stroke: var(--ok, #12A05C); stroke-width: 2; opacity: 0; }
.hm-switch.globe[data-state="idle"] .sw-globe .g-invite,
.hm-switch.globe[data-state="exhausted"] .sw-globe .g-invite,
.hm-switch.globe[data-state="empty"] .sw-globe .g-invite { animation: g-invite 2.8s ease-out infinite; }
@keyframes g-invite { 0% { r: 95; opacity: .45; } 100% { r: 122; opacity: 0; } }
/* Connecting: one arc sweeps the limb. Motion carries the state — no gloss, no pulse. */
.hm-switch.globe[data-state="connecting"] .sw-globe .g-edge {
  stroke: var(--ok, #12A05C); stroke-width: 3; stroke-dasharray: 120 460;
  animation: g-sweep 1.5s linear infinite; transform-origin: 135px 135px;
}
@keyframes g-sweep { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .sw-globe .g-strip, .sw-globe .g-pkt, .sw-globe .g-ping, .sw-globe .g-invite, .sw-globe .g-edge { animation: none; }
}

/* The live row under the globe: three glanceable numbers. The real throughput graph lives just
   below in liveHtml(), drawn from measured samples — this row is the summary, not a second
   source of truth, and there is deliberately no decorative waveform next to a real one. */
.sw-meta .lv { width: 100%; display: flex; align-items: stretch; }
.sw-meta .lv-c { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px 4px; }
.sw-meta .lv-c small { font-size: 9.5px; color: var(--text-2); }
.sw-meta .lv-c b { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums;
                   display: flex; align-items: baseline; gap: 2px; }
.sw-meta .lv-c b.ok { color: var(--ok, #12A05C); }
.sw-meta .lv-c b i { font-size: 9.5px; font-weight: 600; font-style: normal; color: var(--text-2); }
.sw-meta .lv-d { width: 1px; align-self: stretch; margin: 4px 0;
  background: linear-gradient(180deg, transparent, var(--border), transparent); }
.hm-switch.globe .sw-meta { flex-direction: column; gap: 0; min-height: 0; width: 100%; padding: 0 18px; }
/* The old power/copy glyph lived INSIDE the circle. The globe carries no glyph — the label sits
   below it — but #swIc must stay in the DOM because paint() writes to it unconditionally.
   .sw-ic sets display:block, which beats the [hidden] attribute, so hide it explicitly here. */
.hm-switch.globe .sw-ic { display: none !important; }
/* While it is still dialling, the route is neither complete nor broken — so neither the cross
   nor the destination marker belongs there. What the state has to say is said by the sweep on
   the limb; drawing a "broken" X at the same time contradicts it. */
.hm-switch.globe[data-state="connecting"] .sw-globe .g-x,
.hm-switch.globe[data-state="connecting"] .sw-globe .g-dash,
.hm-switch.globe[data-state="connecting"] .sw-globe .g-dest-off { display: none; }

/* ===== Home, release 2.0: one status line, the config under the globe, session totals ===== */
/* Back from the background: HOME drops every globe animation for one frame and puts them back, which
   restarts any that came back stuck (see the visibilitychange handler in HOME). */
.hm-switch.g-kick .sw-globe * { animation: none !important; }
/* One line, always: a status that wraps to two lines while the count ticks up makes the globe above it
   shrink and grow with every step. The longer, in-progress lines are set a size smaller instead. */
.hm-switch.globe .sw-say .sw-tx { max-width: 94vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-switch.globe:is([data-tone="busy"], [data-tone="warn"], [data-tone="bad"]) .sw-say .sw-tx { font-size: 15px; }
/* The status line's colour follows the engine's tone — amber for a weak link or a search, red when the
   phone is offline or the connect failed — so the words and the colour can never disagree. */
.hm-switch.globe[data-tone="warn"] .sw-say .sw-tx { color: #C77A12; }
.hm-switch.globe[data-tone="bad"] .sw-say .sw-tx { color: var(--danger); }
/* The config that carries you, and its exit flag: the second line, fixed for the session. */
.hm-switch.globe[data-state="connected"] .sw-say .sw-sub {
  display: inline-flex; align-items: center; gap: 6px; max-width: 86vw;
  font-size: 13px; font-weight: 700; color: var(--text);
}
.hm-switch.globe .sw-say .sw-sub[hidden] { display: none; }
.sw-say .sw-sub .sw-cfg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-say .sw-sub .sw-cc { flex: 0 0 auto; font-size: 15px; line-height: 1; }
.sw-meta .sw-err { color: var(--danger); }
/* download | upload — this connection's totals, from zero at every connect */
.sw-meta .lv-io .lv-c small { display: inline-flex; align-items: center; gap: 3px; }
.sw-meta .lv-io .lv-c small svg { width: 11px; height: 11px; }
/* «سایت‌های ایرانی بدون VPN» */
.sw-split { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; padding: 5px 6px 5px 12px;
  border-radius: var(--r-pill); background: color-mix(in srgb, var(--text-2) 8%, transparent); cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.sw-split[hidden] { display: none; }
.sw-split .sp-tx { font-size: 12px; font-weight: 600; color: var(--text-2); }
.sw-split .sp-tog { position: relative; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 11px;
  background: color-mix(in srgb, var(--text-2) 35%, transparent); transition: background var(--dur); }
.sw-split .sp-tog:has(input:checked) { background: var(--ok, #12A05C); }
.sw-split .sp-tog input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sw-split .sp-knob { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--dur) var(--ease); pointer-events: none; }
.sw-split .sp-tog input:checked + .sp-knob { transform: translateX(-16px); }
.home-hero.flat .sw-split { flex: 0 0 auto; }

/* One status at a time (owner's item 1-6). While the VPN is measuring, dialling or hopping to a better
   server, the chat connection's strip at the top («اتصال قطع شد — در حال اتصال مجدد…») described the
   same moment in other words, and people read two «در حال اتصال» as two problems. The home's status
   line says what is happening; the strip shows again by itself if the chat is still down once the VPN
   settles. data-vpn on <html> is the engine's phase, set by the VPN module. The second rule gives the
   hidden strip's reserved height back (--connbar-h is set inline, hence !important). This is now the
   BACKUP: connBarHeld() in app.js decides the same in JS, since WebViews before Chrome 105 ignore :has(). */
html[data-vpn="measuring"] #connBar.warn,
html[data-vpn="connecting"] #connBar.warn,
html[data-vpn="switching"] #connBar.warn { display: none; }
html[data-vpn="measuring"]:has(#connBar.warn):not(:has(#offBar)),
html[data-vpn="connecting"]:has(#connBar.warn):not(:has(#offBar)),
html[data-vpn="switching"]:has(#connBar.warn):not(:has(#offBar)) { --connbar-h: 0px !important; }

/* ===== Renewal: plans, service picker, and the two state variants ===== */
.rn-h { font-size: 17px; font-weight: 800; }
.rn-sub2 { font-size: 12px; color: var(--text-2); margin-top: 5px; }
.rn-links { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.rn-links .rn-link { margin-top: 0; }
.rn-sep2 { color: var(--border); }

/* One row per plan or per service — same object, two uses. */
.rp { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 11px;
      padding: 14px 15px; border-radius: 15px; background: var(--panel); border: 1px solid var(--border);
      cursor: pointer; font-family: inherit; text-align: start; color: var(--text); }
.rp + .rp { margin-top: 9px; }
.rp.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent);
         box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 50%, transparent); }
.rp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rp-t b { font-size: 14.5px; font-weight: 800; }
.rp-t s { font-size: 10.5px; color: var(--text-2); text-decoration: none; }
.rp-a { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rp.on .rp-a { color: var(--accent); }

/* The list scrolls; the price and the button do not. However many plans exist, the way out
   stays on screen. */
.rn-plans { display: flex; flex-direction: column; max-height: 74dvh; }
.rn-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
             padding: 2px 2px 16px; margin: 0 -2px;
             mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); }
.rn-foot { padding-top: 14px; border-top: 1px solid var(--border); }
.rn-foot .rn-row { margin-bottom: 12px; font-size: 12.5px; }

.rn-svcs { margin-top: 16px; }
.rn-svc { gap: 12px; }
.rn-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: var(--r-pill); background: var(--ok, #3E9E6C); }
.rn-dot.dead { background: var(--danger); }

/* Renewing normally costs nothing but money. When most of the month is still there it costs
   that too — the only case that stops to say so. */
.rn-warn { display: flex; align-items: flex-start; gap: 10px; width: 100%; margin-top: 18px;
           padding: 13px 14px; border-radius: 14px; line-height: 1.75; font-size: 12px;
           color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent);
           border: 1px solid color-mix(in srgb, var(--danger) 34%, transparent); }
.rn-warn svg { flex: 0 0 17px; margin-top: 2px; }
.rn-warn b { color: var(--danger); }
.rn-go-quiet { background: var(--panel-2); color: var(--text); box-shadow: none; border: 1px solid var(--border); }
.rn-ic-dead { background: var(--danger); }
.rn-sub-dead { color: var(--danger); }

/* ── download page ──────────────────────────────────────────────────────────
   Our own app is never hidden any more, but what it OFFERS depends on where you
   are standing: inside the app it is «send it to a friend», in an Android browser
   it is «install», and when a newer build exists it is «update». */
.dl-hero { position: relative; overflow: hidden; margin: 12px; padding: 13px; border-radius: 22px; color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--accent) 60%, transparent); }
.dl-hero.upd { background: linear-gradient(135deg, #B0740F 0%, #D3971F 58%, #E9B84C 100%);
  box-shadow: 0 12px 24px -10px rgba(176,116,15,.55); }
.dh-orb { position: absolute; inset-inline-end: -36px; top: -56px; width: 150px; height: 150px;
  border-radius: var(--r-pill); background: rgba(255,255,255,.10); pointer-events: none; }
.dh-top { position: relative; display: flex; align-items: center; gap: 11px; }
.dh-logo { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(180deg, #4F93FF, #1F5FE0); border: 2px solid rgba(255,255,255,.4);
  box-shadow: 0 8px 18px -8px rgba(10,30,80,.6); }
.dh-logo.big { width: 52px; height: 52px; flex-basis: 52px; }
.dh-logo b { font-size: 15px; font-weight: 900; color: #fff; letter-spacing: -.4px; }
.dh-logo b span { color: #BCD7FF; }
.dh-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dh-name b { font-size: 16px; font-weight: 900; }
.dh-name small { font-size: 11.5px; color: rgba(255,255,255,.82); }
.dh-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.18); font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.dh-chip svg { width: 12px; height: 12px; }
.dh-say { position: relative; margin: 11px 0 0; font-size: 12.5px; line-height: 1.85; color: rgba(255,255,255,.92); }
.dh-pills { position: relative; display: flex; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
.dh-pills span { padding: 5px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.26); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.dh-acts { position: relative; display: flex; gap: 8px; margin-top: 10px; }
.dh-btn { flex: 1; min-width: 0; border: 0; cursor: pointer; font: inherit; padding: 12px 8px; border-radius: 14px;
  font-size: 13.5px; font-weight: 900; display: flex; align-items: center; justify-content: center; gap: 7px;
  text-decoration: none; transition: transform .16s var(--ease); }
.dh-btn:active { transform: scale(.97); }
.dh-btn svg { width: 16px; height: 16px; }
.dh-btn.solid { background: #fff; color: var(--accent); box-shadow: 0 8px 16px -8px rgba(10,30,80,.5); flex: 1.35; }
.dl-hero.upd .dh-btn.solid { color: #9C6A11; }
.dh-btn.ghost { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.38); color: #fff; }
.dh-btn.wide { position: relative; width: 100%; margin-top: 11px; padding: 13px 8px; font-size: 14.5px; }
.dh-help { margin-top: 10px; font-size: 12.5px; color: var(--text-2); }
.dh-help > summary { cursor: pointer; color: var(--accent); font-weight: 700; list-style-position: inside; }
.dh-help > ol { margin: 8px 0 0; padding-inline-start: 18px; display: grid; gap: 7px; line-height: 1.85; }
.dh-help b { color: var(--text); }
.dh-note { position: relative; display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; padding: 8px 10px;
  border-radius: 12px; background: rgba(255,255,255,.13); }
.dh-note svg { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 2px; }
.dh-note span { font-size: 10.5px; line-height: 1.7; color: rgba(255,255,255,.9); }
.dh-note b { background: rgba(255,255,255,.22); border-radius: 6px; padding: 1px 5px; }
.dh-foot { position: relative; margin-top: 9px; font-size: 10.5px; color: rgba(255,255,255,.8); }

.dl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 16px 14px 8px; }
.dl-head span { font-size: 12px; color: var(--text-2); }
.dl-head small { font-size: 11px; color: var(--text-2); opacity: .8; }
.dl-tabs { display: flex; gap: 6px; margin: 0 12px 9px; }
.dl-tabs button { border: 1px solid var(--border); background: var(--panel); color: var(--text-2); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; border-radius: var(--r-pill); padding: 6px 14px; }
.dl-tabs button.on { background: var(--accent-grad); color: var(--accent-contrast); border-color: transparent; }
.dl-card { margin: 10px 12px; padding: 11px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; }
.dl-row { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 9px 12px; padding: 9px 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px; text-align: right;
  font: inherit; color: var(--text); cursor: pointer; text-decoration: none; }
.dl-card .dl-row, .sh-rows .dl-row { width: 100%; margin: 0; }
.dl-row.plain { border: 0; background: none; padding: 0; }
.dl-row:active { background: var(--panel-2); }
.dr-ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; display: grid; place-items: center;
  background: var(--panel-2); overflow: hidden; font-weight: 800; }
.dr-ic img, .dr-ic svg { width: 100%; height: 100%; object-fit: cover; }
.dr-ic.dark { background: linear-gradient(180deg, #4A4640, #2B2720); color: #fff; }
.dr-ic.dark svg { width: 17px; height: 17px; }
.dr-ic.tint { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.dr-ic.tint svg { width: 17px; height: 17px; }
.dr-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dr-tx b { font-size: 13px; font-weight: 800; }
.dr-tx small { font-size: 10.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-go { font-size: 11.5px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.dr-go.btn-chip { border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); cursor: pointer; font: inherit;
  background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent);
  border-radius: var(--r-pill); padding: 7px 12px; font-size: 12px; font-weight: 800; }
.dr-dl { display: flex; color: var(--accent); }
.dr-dl svg { width: 15px; height: 15px; }
.dl-steps { display: flex; align-items: center; gap: 5px; margin-top: 9px; }
.dl-steps.col { flex-direction: column; align-items: stretch; gap: 7px; margin: 10px 0; }
.dl-steps span { display: flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: var(--r-pill);
  background: var(--panel-2); font-size: 10.5px; color: var(--text-2); white-space: nowrap; }
.dl-steps.col span { white-space: normal; font-size: 12px; padding: 9px 12px; }
.dl-steps svg { width: 10px; height: 10px; color: var(--text-2); opacity: .5; }

/* share sheet */
.sh-qr { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 11px; border-radius: 18px;
  background: #fff; border: 1px solid var(--border); }
.sh-qr #shQr { flex: 0 0 auto; display: grid; place-items: center; }
.sh-qr-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sh-qr-tx b { font-size: 13px; font-weight: 800; color: #2B2720; }
.sh-qr-tx span { font-size: 12px; color: var(--accent); }
.sh-qr-tx small { font-size: 10.5px; color: #998F7C; line-height: 1.7; }
.sh-rows { display: flex; flex-direction: column; gap: 8px; }
.sh-p { font-size: 12.5px; color: var(--text-2); line-height: 1.8; margin: 0 0 10px; }

/* ── support ────────────────────────────────────────────────────────────────
   The open conversation first, the answers in place, and the ticket button last:
   a page that tries to answer you before it asks you to wait for someone. */
.sup-open { position: relative; overflow: hidden; display: block; width: calc(100% - 24px); margin: 12px; padding: 12px 13px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px; text-align: right;
  font: inherit; color: var(--text); cursor: pointer; }
.sup-open::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--online), #63C79A); }
.sup-open:active { background: var(--panel-2); }
.so-head { display: flex; align-items: center; gap: 8px; }
.so-badge { padding: 4px 9px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--online) 14%, transparent);
  color: var(--ok-ink, #1F7A4F); font-size: 10.5px; font-weight: 800; }
.so-subj { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--accent);
  box-shadow: 0 0 7px var(--accent); flex: 0 0 auto; }
.so-last { margin-top: 7px; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-last b { color: var(--accent); font-weight: 700; }
.so-foot { margin-top: 9px; display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--text-2); }
.so-go { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--accent); }
.so-go svg { width: 13px; height: 13px; transform: scaleX(-1); }

.sup-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px; }
.sup-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 8px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px; cursor: pointer;
  font: inherit; color: var(--text); text-align: center; }
.sup-tile:active { background: var(--panel-2); }
.sup-tile .st-ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.sup-tile .st-ic svg { width: 18px; height: 18px; }
.sup-tile b { font-size: 12.5px; font-weight: 800; }
.sup-tile small { font-size: 10.5px; color: var(--text-2); }

.sup-faq-card { margin: 0 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.sfq + .sfq, .sfq-all { border-top: 1px solid var(--border); }
.sfq-q { display: flex; align-items: center; gap: 9px; padding: 11px 13px; cursor: pointer; }
.sfq-q b { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
.sfq.open .sfq-q b { font-weight: 800; }
.sfq-ar { display: flex; color: var(--text-2); opacity: .55; transition: transform var(--dur) var(--ease); }
.sfq-ar svg { width: 14px; height: 14px; }
.sfq.open .sfq-ar { transform: rotate(180deg); color: var(--accent); opacity: 1; }
.sfq-a { display: none; padding: 0 13px 12px; font-size: 12px; line-height: 1.9; color: var(--text-2); }
.sfq.open .sfq-a { display: block; }
.sfq-all { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 13px;
  background: none; border-inline: 0; border-bottom: 0; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 800; color: var(--accent); }
.sfq-all svg { width: 13px; height: 13px; transform: scaleX(-1); }

.sup-actions { display: flex; flex-direction: column; gap: 9px; padding: 0 12px; }
.sup-quiet { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px; font: inherit; color: var(--text); }
.sup-quiet .sq-ic { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.sup-quiet .sq-ic svg { width: 16px; height: 16px; }
.sup-quiet b { flex: 1; min-width: 0; text-align: right; font-size: 13px; font-weight: 800; }
.sup-quiet .sq-ar { display: flex; color: var(--text-2); opacity: .5; }
.sup-quiet .sq-ar svg { width: 14px; height: 14px; transform: scaleX(-1); }
.sup-closed { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; margin: 14px 0 4px;
  padding: 8px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: var(--accent); }
.sup-closed svg { width: 12px; height: 12px; transform: scaleX(-1); }

/* The ticket's title row owns the close action: next to «ارسال» it was a red button one slip
   away from ending a conversation the customer still needed. */
.tk-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-close { margin-inline-start: auto; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 11.5px; color: var(--text-2); padding: 4px 2px; }
.tk-close:active { color: var(--danger); }

/* support: breathing room above the dock, and the topic sheet's own layout */
.sup-body { padding-bottom: 20px; }
.sup-faq-card.in-sheet { margin: 10px 0 0; }
.sup-topic-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.sup-topic-foot span { font-size: 12px; color: var(--text-2); }

/* ── login / register — the approved design (design/phone-test/Login.dc.html, Register.dc.html) ──
   A full screen on the app's own ground instead of a floating card over a dark backdrop. */
.auth-overlay.auth3 { position: fixed; inset: 0; z-index: 900; display: block; align-items: initial; justify-content: initial;
  background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none;
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(var(--sat) + 12px) 0 calc(var(--sab) + 18px); }
.a3 { max-width: 420px; margin: 0 auto; padding: 0 22px; display: flex; flex-direction: column; }
.a3-back { align-self: flex-start; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: var(--text); cursor: pointer; }
.a3-top { height: 32px; }
.a3-brand { display: flex; flex-direction: column; align-items: center; margin-top: 6px; text-align: center; }
.a3-logo { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(180deg, #4F93FF, #1F5FE0); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 24px -10px rgba(31,95,224,.7); }
.a3-brand.sm .a3-logo { width: 44px; height: 44px; border-radius: 15px; }
.a3-logo b { font-size: 17px; font-weight: 900; color: #fff; letter-spacing: -.5px; }
.a3-logo b span { color: #BCD7FF; }
.a3-brand.sm .a3-logo b { font-size: 14px; }
.a3-title { font-size: 22px; font-weight: 900; margin-top: 12px; color: var(--text); }
.a3-brand.sm .a3-title { font-size: 21px; margin-top: 9px; }
.a3-sub { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.a3-seg { display: flex; padding: 4px; border-radius: 15px; background: var(--panel-2); border: 1px solid var(--border); margin-top: 18px; }
.a3-brand.sm + .a3-seg { margin-top: 13px; }
.a3-seg button { flex: 1; border: 0; background: none; cursor: pointer; font: inherit; padding: 9px; border-radius: 11px; font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.a3-seg button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(43,39,32,.08), 0 4px 10px -4px rgba(43,39,32,.22); }
.a3-f { margin-top: 12px; display: flex; flex-direction: column; }
.a3-f label { font-size: 11.5px; color: var(--text-2); margin-bottom: 7px; }
.a3-fld { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 0 14px; border-radius: 14px;
  background: var(--panel-2); border: 1px solid var(--border); transition: border-color var(--dur), box-shadow var(--dur), background var(--dur); }
.a3-fld:focus-within { background: var(--panel); border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
.a3-fld.good { background: var(--panel); border-color: color-mix(in srgb, #0FA85F 45%, transparent); }
.a3-fld.bad { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.a3-fld input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--text); padding: 12px 0; }
.a3-ic { display: flex; color: var(--text-2); }
.a3-ic svg { width: 17px; height: 17px; }
.a3-fld:focus-within .a3-ic { color: var(--accent); }
.a3-ok { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 999px; background: #0FA85F; color: #fff; display: grid; place-items: center; }
.a3-ok svg { width: 11px; height: 11px; }
.a3-eye { border: 0; background: none; cursor: pointer; display: flex; color: var(--text-2); padding: 4px; }
.a3-eye.on { color: var(--accent); }
.a3-cc { border: 1px solid var(--border); background: var(--panel); border-radius: 10px; padding: 5px 6px; font: inherit; font-size: 13px; font-weight: 700; color: var(--text); }
.a3-hint { margin-top: 6px; font-size: 11px; color: var(--text-2); display: flex; align-items: center; gap: 6px; line-height: 1.7; }
.a3-hint svg { width: 12px; height: 12px; flex: 0 0 12px; }
.a3-hint.bad { color: var(--danger); }
.a3-meter { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.a3-meter span { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.a3-meter i { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--text-2) 25%, transparent); }
.a3-meter b { font-size: 11px; font-weight: 700; min-width: 34px; }
.a3-meter[data-s="1"] i:nth-child(-n+1) { background: var(--danger); }
.a3-meter[data-s="1"] b { color: var(--danger); }
.a3-meter[data-s="2"] i:nth-child(-n+2) { background: #D9772E; }
.a3-meter[data-s="2"] b { color: #B8581A; }
.a3-meter[data-s="3"] i:nth-child(-n+3), .a3-meter[data-s="4"] i { background: #0FA85F; }
.a3-meter[data-s="3"] b, .a3-meter[data-s="4"] b { color: #0A6E40; }
/* «فراموشی رمز؟» right under the password — on the end side, where the approved design puts it */
.a3-forgot { width: fit-content; margin: 10px 0 0; margin-inline-start: auto; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 800; color: var(--accent); padding: 4px 2px; }
.a3-terms { position: relative; display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 12px; color: var(--text-2); cursor: pointer; }
.a3-terms input { position: absolute; opacity: 0; width: 0; height: 0; }
.a3-box { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px; border: 2px solid var(--border); display: grid; place-items: center; color: transparent; transition: all var(--dur); }
.a3-box svg { width: 12px; height: 12px; }
.a3-terms input:checked + .a3-box { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 10px -5px color-mix(in srgb, var(--accent) 80%, transparent); }
.a3-terms b { color: var(--accent); font-weight: 700; }
.auth3 .form-error { margin-top: 8px; }
.a3-cta { width: 100%; margin-top: 12px; border: 0; cursor: pointer; font: inherit; padding: 15px; border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 16px; font-weight: 900;
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 68%, transparent); }
.a3-cta:disabled { opacity: .75; }
.a3-guest { margin-top: 14px; border: 0; background: none; cursor: pointer; font: inherit; padding: 10px; font-size: 13px; color: var(--text-2); font-weight: 600; }
/* `hidden` must win over the flex/grid displays above — the 2FA field and the username tick are
   toggled with it, and without this they showed on a plain login. */
.auth3 [hidden] { display: none !important; }

/* Switching ورود ↔ ثبت‌نام, or opening recovery, swaps one full-screen layer for another. The base
   .auth-overlay fades in over 0.2s — during which the home screen showed through. A swap is instant. */
.auth-overlay.swap, .auth-overlay.fp-ov { animation: none; }
/* Recovery as a layer over the app (it used to replace the whole app and leave nothing behind). */
.auth-overlay.fp-ov { display: block; align-items: initial; justify-content: initial; padding: calc(var(--sat) + 8px) 0 calc(var(--sab) + 16px);
  background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 900; }
.auth-overlay.fp-ov .auth-wrap { flex: none; min-height: 100%; overflow: visible; }

/* No service yet, or a test account that ran out: the gauge card's shape and buttons, without gauges. */
.hq-line { margin: 7px 2px 1px; font-size: 12.5px; line-height: 1.8; color: var(--text-2); }
.hm-quota.empty .hq-chip { background: color-mix(in srgb, var(--text-2) 14%, transparent); color: var(--text-2); }
.hm-quota.empty .hq-chip i { background: var(--text-2); }
/* The title never wraps: on a 360px phone «هنوز سرویسی نداری» broke onto two lines beside the price. */
.hm-quota.empty .hq-head b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hm-quota.empty .hq-until { white-space: nowrap; }
.hm-quota.ended .hq-chip { background: color-mix(in srgb, #D9772E 14%, transparent); color: #B8581A; }
.hm-quota.ended .hq-chip i { background: #D9772E; }
.hq-btn.go { flex: 1.45; background: var(--accent-grad); color: var(--accent-contrast);
  box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--accent) 80%, transparent); }
.hm-quota.ended .hq-btn.go { flex: 1.9; background: linear-gradient(135deg, #C8621F, #E69744); color: #fff;
  box-shadow: 0 8px 16px -8px rgba(200,98,31,.8); }
.hq-btn.alt { background: var(--panel); color: var(--text); border: 1px solid var(--border); box-shadow: 0 2px 6px -3px rgba(43,39,32,.2); }

/* Register fits ONE phone screen: the «ساختِ حساب» button must never sit below the fold. */
.a3.reg .a3-brand { flex-direction: row; justify-content: center; gap: 10px; margin-top: 0; }
.a3.reg .a3-brand .a3-logo { width: 36px; height: 36px; border-radius: 12px; }
.a3.reg .a3-brand .a3-logo b { font-size: 12px; }
.a3.reg .a3-brand .a3-title { margin-top: 0; font-size: 19px; }
.a3.reg .a3-seg { margin-top: 10px; }
.a3.reg .a3-seg button { padding: 7px; }
.a3.reg .a3-f { margin-top: 8px; }
.a3.reg .a3-f label { margin-bottom: 4px; }
.a3.reg .a3-fld { min-height: 44px; }
.a3.reg .a3-fld input { padding: 10px 0; }
.a3.reg .a3-hint { margin-top: 3px; font-size: 10.5px; line-height: 1.5; }
.a3.reg .a3-meter { margin-top: 5px; }
.a3.reg .a3-terms { margin-top: 10px; }
.a3.reg .a3-cta { margin-top: 10px; padding: 13px; }
.a3.reg + * { display: none; }
.auth-overlay.auth3:has(.a3.reg) { padding-top: calc(var(--sat) + 6px); padding-bottom: calc(var(--sab) + 10px); }

/* ── Release 2.0 gates (app.js showInstallGate / showNotifGate) ──────────────────────────────────
   Full screen and opaque: a gate is not a dialog over the app, it is the app until it is passed.
   Above prompts, sheets, the intro and the PIN lock; below the update prompt (z 400), which comes
   first and hides any gate while it is up, and below the login screen (z 900) that «ورود مدیر» opens. */
.gate-ov { position: fixed; inset: 0; z-index: 390; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--sat) + 20px) 16px calc(var(--sab) + 20px); animation: ds-fade .25s ease both; }
body:has(.upd-modal) .gate-ov { display: none; }
/* an incoming call is never hidden behind the notification gate (renderCallUI sets call-up) */
body.call-up .gate-notif { display: none !important; }
.gate-card { width: min(420px, 100%); margin: auto; text-align: center; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.gate-card.gate-mid { background: var(--panel); border: 1px solid var(--border); border-radius: 24px; padding: 28px 20px 22px; box-shadow: 0 30px 70px -24px rgba(0,0,0,.45); }
.gate-hero { width: 76px; height: 76px; margin: 0 auto 4px; border-radius: 24px; display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(140deg, #6a4bf0, #2f7cf6); box-shadow: 0 16px 34px -10px rgba(47,124,246,.6); }
.gate-hero svg { width: 40px; height: 40px; }
.gate-hero.bell { background: linear-gradient(135deg, #16B981, #22D3EE); box-shadow: 0 16px 34px -10px rgba(22,185,129,.55); }
.gate-hero.bell svg { width: 36px; height: 36px; }
@media (prefers-reduced-motion: no-preference) { .gate-hero.bell svg { animation: gate-ring 2.4s ease-in-out infinite; transform-origin: 50% 10%; } }
@keyframes gate-ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(14deg); } 82% { transform: rotate(-12deg); } 89% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }
.gate-t { font-size: 21px; font-weight: 800; color: var(--text); line-height: 1.5; margin: 0; }
.gate-s { font-size: 13.5px; line-height: 1.9; color: var(--text-2); margin: 0 4px 6px; }
.gate-cta { width: 100%; border: none; border-radius: 16px; padding: 15px; background: linear-gradient(135deg, #6a4bf0, #2f7cf6); color: #fff;
  font-family: inherit; font-size: 16px; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer;
  box-shadow: 0 14px 30px -10px rgba(47,124,246,.6); transition: transform var(--dur) var(--ease), filter var(--dur); }
.gate-cta b { font-weight: 800; }
.gate-cta svg { width: 20px; height: 20px; flex: 0 0 auto; }
.gate-cta:active { transform: scale(.97); }
.gate-notif .gate-cta { background: linear-gradient(135deg, #16B981, #22D3EE); box-shadow: 0 14px 30px -10px rgba(22,185,129,.5); }
.gate-row { display: flex; gap: 10px; }
.gate-btn { flex: 1; min-width: 0; border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 14px; padding: 11px 8px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; }
.gate-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.gate-qr { display: grid; place-items: center; padding: 14px; background: #fff; border-radius: 18px; border: 1px solid var(--border); }
.gate-qr[hidden] { display: none; }
.gate-steps { list-style: none; margin: 4px 0 0; padding: 14px; background: var(--panel-2); border-radius: 16px; display: flex; flex-direction: column; gap: 12px; text-align: right; }
.gate-steps li { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.75; color: var(--text); }
.gate-steps .gs-n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--accent-soft); color: var(--accent); }
.gate-steps .gs-ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--border); color: #2f7cf6; }
.gate-steps .gs-ic svg { width: 19px; height: 19px; }
.gate-steps .gs-tx { flex: 1; min-width: 0; }
.gate-admin { align-self: center; margin-top: 10px; background: none; border: none; color: var(--text-3, var(--text-2)); opacity: .55; font-family: inherit; font-size: 11.5px; padding: 8px 12px; cursor: pointer; }
/* iPhone Safari: the share button is in the bottom bar — point at it */
.gate-ios-arrow { position: fixed; left: 50%; bottom: calc(var(--sab) + 6px); transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: #2f7cf6; box-shadow: 0 8px 20px -6px rgba(47,124,246,.7); pointer-events: none; }
.gate-ios-arrow svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) { .gate-ios-arrow { animation: gate-bob 1.4s ease-in-out infinite; } }
@keyframes gate-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* ============ Pro + the shutdown limits (release 2.0 — openProPage, adminProSheet, the admin user drawer) ============
   One look for "Pro" everywhere: deep plum with a gold mark. The plum is dark in every theme, so white text on it
   and the dark ink on the gold both keep their contrast whichever theme is on. */
:root { --pro-grad: linear-gradient(135deg, #2B2350 0%, #4A2F7E 58%, #7A3E8E 100%); --pro-gold: #F5C451;
  --pro-gold-grad: linear-gradient(135deg, #F8D77A, #E9A93A); --pro-gold-ink: #3A2A06; }

/* Settings: the Pro card (only drawn while the admin has Pro on) */
.st-pro, .settings2 .st-pro { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 0 16px 14px; padding: 13px 14px;
  border: 0; border-radius: var(--r-md); background: var(--pro-grad); color: #fff; text-align: right; font-family: inherit; cursor: pointer;
  position: relative; overflow: hidden; box-shadow: 0 10px 26px -12px rgba(74,47,126,.6); transition: transform var(--dur) var(--ease); }
.st-pro:active { transform: scale(.985); }
.st-pro::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(140px 70px at 8% 0%, rgba(245,196,81,.30), transparent 70%); }
.st-pro .stp-ic { position: relative; z-index: 1; width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 11px;
  background: var(--pro-gold-grad); color: var(--pro-gold-ink); font-size: 17px; font-weight: 800; }
.st-pro .stp-tx { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-pro .stp-tx b { font-size: 13.5px; font-weight: 700; }
.st-pro .stp-tx small { font-size: 10.5px; opacity: .86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-pro .stp-go { position: relative; z-index: 1; flex: 0 0 auto; font-size: 11.5px; font-weight: 800; padding: 7px 12px; border-radius: 10px;
  background: var(--pro-gold-grad); color: var(--pro-gold-ink); }
.st-pro.on .stp-go { background: rgba(255,255,255,.16); color: #fff; }
.st-pro.on.soon .stp-go { background: var(--pro-gold-grad); color: var(--pro-gold-ink); }

/* the Pro page: a tall sheet */
.sheet.pro-sheet { max-height: 94dvh; }
.pro-hero { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 16px 16px 18px; margin-bottom: 12px; background: var(--pro-grad); color: #fff; }
.pro-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(220px 110px at 10% 0%, rgba(245,196,81,.32), transparent 70%); }
.pro-hero > * { position: relative; z-index: 1; }
.pro-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pro-badge { display: inline-flex; align-items: center; gap: 4px; direction: ltr; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  padding: 3px 9px; border-radius: var(--r-pill); background: var(--pro-gold-grad); color: var(--pro-gold-ink); }
.pro-state { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); background: rgba(95,193,137,.24); color: #D3F7E2; }
.pro-hero-t { font-size: 22px; font-weight: 800; margin-top: 12px; }
.pro-hero-s { font-size: 12.5px; opacity: .86; margin-top: 3px; line-height: 1.8; }
.pro-why { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: var(--r-md); background: var(--chip-warn-bg); color: var(--chip-warn-text); }
.pro-why .pw-ic { font-size: 18px; line-height: 1.4; }
.pro-why b { display: block; font-size: 13px; }
.pro-why small { display: block; font-size: 11.5px; line-height: 1.7; margin-top: 2px; opacity: .92; }
.pro-sec { font-size: 12px; font-weight: 600; color: var(--text-2); margin: 16px 2px 7px; }
.pro-card { background: var(--panel-2); border-radius: var(--r-md); padding: 12px; }
.pro-use-row + .pro-use-row { margin-top: 14px; }
.pro-use-t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-bottom: 7px; }
.pro-use-t b { font-size: 13px; font-weight: 700; white-space: nowrap; }
.pro-use-t b small { font-size: 11px; font-weight: 400; color: var(--text-2); }
.pro-use-f { display: block; font-size: 10.5px; color: var(--text-2); margin-top: 5px; }
.pro-bar { height: 8px; border-radius: var(--r-pill); overflow: hidden; background: color-mix(in srgb, var(--text-2) 20%, transparent); }
.pro-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent-grad); transition: width .45s var(--ease); }
.pro-bar.warn i { background: linear-gradient(90deg, #F2B84B, #E9973A); }
.pro-bar.full i { background: var(--danger); }
.pro-bar.unl i { background: color-mix(in srgb, var(--online) 50%, transparent); }
.pro-cmp { padding: 2px 12px; }
.pro-cmp .pc-r { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 8px; align-items: center; padding: 10px 0; font-size: 12.5px; border-bottom: 1px solid var(--border); }
.pro-cmp .pc-r:last-child { border-bottom: 0; }
.pro-cmp .pc-r > span:nth-child(2), .pro-cmp .pc-r > b, .pro-cmp .pc-r > .pc-pro { text-align: center; }
.pro-cmp .pc-r > span:nth-child(2) { color: var(--text-2); }
.pro-cmp .pc-r > b { color: var(--accent); font-weight: 800; }
.pro-cmp .pc-h { font-size: 11px; color: var(--text-2); padding: 8px 0 6px; }
.pro-cmp .pc-h .pc-pro { font-weight: 800; color: color-mix(in srgb, #E9A93A 78%, var(--text)); }
.pro-perks { list-style: none; margin: 10px 2px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pro-perks li { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.7; }
.pro-perks li span { color: var(--online); font-weight: 800; }
.pro-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; padding-top: 6px; }
.pro-plan { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 15px 12px 12px; border-radius: var(--r-md);
  background: var(--panel); border: 1.5px solid var(--border); color: var(--text); font-family: inherit; text-align: right; cursor: pointer;
  transition: border-color var(--dur), background var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease); }
.pro-plan:active { transform: scale(.97); }
.pro-plan.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.pro-plan .pp-tag { position: absolute; top: -9px; inset-inline-start: 10px; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--pro-gold-grad); color: var(--pro-gold-ink); }
.pro-plan .pp-l { font-size: 13px; font-weight: 700; }
.pro-plan .pp-p { font-size: 15px; font-weight: 800; color: var(--accent); }
.pro-plan .pp-d { font-size: 10.5px; color: var(--text-2); }
.pro-wallet { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--text-2); margin: 14px 2px 9px; }
.pro-wallet b { color: var(--text); font-weight: 700; }
.btn.pro-cta { background: var(--pro-gold-grad); color: var(--pro-gold-ink); font-weight: 800; box-shadow: 0 12px 24px -12px rgba(233,169,58,.75); }
.btn.pro-cta.short { background: var(--accent-grad); color: var(--accent-contrast); box-shadow: var(--glow); }
.btn.pro-cta .ld-dot { border-color: rgba(58,42,6,.3); border-top-color: var(--pro-gold-ink); }
.pro-fine { font-size: 11px; color: var(--text-2); line-height: 1.8; margin-top: 9px; text-align: center; }

/* admin: «پرو و محدودیت‌ها» */
.pa-master { display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin-bottom: 10px; border-radius: var(--r-md); cursor: pointer;
  border: 1.5px solid var(--border); background: var(--panel-2); color: var(--text); transition: background var(--dur), color var(--dur); }
.pa-master.on { background: var(--pro-grad); color: #fff; border-color: transparent; }
.pa-master .pa-m-ic { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 11px; font-size: 17px; font-weight: 800;
  background: var(--pro-gold-grad); color: var(--pro-gold-ink); }
.pa-master .pa-m-tx { flex: 1; min-width: 0; }
.pa-master .pa-m-tx b { display: block; font-size: 14px; }
.pa-master .pa-m-tx small { display: block; font-size: 11px; line-height: 1.7; margin-top: 2px; opacity: .82; }
.pa-master input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: #E9A93A; cursor: pointer; }
.pa-sw span b { display: block; font-weight: 600; font-size: 13px; }
.pa-sw span small { display: block; font-size: 11px; color: var(--text-2); margin-top: 1px; }
.pa-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pa-hint { font-size: 11px; color: var(--text-2); line-height: 1.8; margin: -2px 2px 10px; }
.pa-plans { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.pa-plan { padding: 10px 11px 11px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--border); }
.pa-plan-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 12.5px; }
.pa-plan-g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pa-plan-g label { display: block; min-width: 0; }
.pa-plan-g label span { display: block; font-size: 10.5px; color: var(--text-2); margin-bottom: 3px; }
.pa-plan input { width: 100%; min-width: 0; height: 38px; padding: 0 9px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--panel);
  color: var(--text); font-family: inherit; font-size: 12.5px; }
.pa-plan input:focus { outline: none; border-color: var(--accent); }
.pa-del { padding: 4px 10px; border-radius: var(--r-pill); background: var(--chip-danger-bg); color: var(--chip-danger-text); font-size: 11px; font-weight: 700; font-family: inherit; }
.pa-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pa-lim { margin-bottom: 4px; }
.pa-lim .pa-lim-seg { padding: 0 0 8px; }
.pa-lim input { width: 100%; height: var(--field-h); padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); font-family: inherit; font-size: var(--fs-base); }
.pa-lim small { display: block; font-size: 11px; color: var(--text-2); margin-top: 6px; }
.pa-reset { display: flex; flex-direction: column; gap: 8px; }

/* admin: what each user runs, on their row in the list */
.admin-user .au-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.au-tag { font-size: 10.5px; line-height: 1.55; padding: 1px 7px; border-radius: var(--r-pill); background: var(--panel-2); color: var(--text-2); white-space: nowrap; }
.au-tag b { font-weight: 600; color: var(--text); }
.au-tag.ok { background: var(--chip-ok-bg); color: var(--chip-ok-text); }
.au-tag.warn { background: var(--chip-warn-bg); color: var(--chip-warn-text); }
.au-tag.danger { background: var(--chip-danger-bg); color: var(--chip-danger-text); }
.au-tag.pro { background: var(--pro-gold-grad); color: var(--pro-gold-ink); font-weight: 700; }
.au-tag.mute { opacity: .75; }

/* admin user drawer: the app/device tiles and the Pro/limits card */
.aud-devgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aud-dv { min-width: 0; padding: 10px 11px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid transparent; }
.aud-dv > span { display: block; font-size: 10.5px; color: var(--text-2); }
.aud-dv > b { display: block; font-size: 13px; font-weight: 700; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aud-dv > small { display: block; font-size: 10.5px; color: var(--text-2); margin-top: 2px; line-height: 1.6; }
.aud-dv.ok > b { color: var(--chip-ok-text); }
.aud-dv.warn { border-color: color-mix(in srgb, var(--chip-warn-text) 35%, transparent); }
.aud-dv.warn > b { color: var(--chip-warn-text); }
.aud-dv.danger { border-color: color-mix(in srgb, var(--chip-danger-text) 35%, transparent); }
.aud-dv.danger > b { color: var(--chip-danger-text); }
.aud-dv.mute > b { color: var(--text-2); font-weight: 500; }
.aud-live { color: var(--online); }
.aud-lim { display: flex; flex-direction: column; gap: 13px; padding: 12px; border-radius: var(--r-md); background: var(--panel-2); }
.aud-lim-pro { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.aud-lim-pro b { font-weight: 600; }
.aud-lim-pro:not(.on) .pro-badge { filter: grayscale(1); opacity: .55; }
.aud-lim-t { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-bottom: 6px; }
.aud-lim-t b { font-size: 12.5px; white-space: nowrap; }
.aud-lim-row small { display: block; font-size: 10.5px; color: var(--text-2); margin-top: 5px; }
.aud-lim-row small b { color: var(--text); }
.aud-lim-note { font-size: 11px; line-height: 1.7; padding: 7px 9px; border-radius: var(--r-sm); background: var(--chip-warn-bg); color: var(--chip-warn-text); }
.aud-lim-hist { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--text-2); }
.aud-lim-acts { display: flex; flex-wrap: wrap; gap: 7px; }
.aud-lim-acts .btn { flex: 1 1 auto; }

/* ============================================================================
   RELEASE 2.0 — store · services · ribbons · wallet/top-up · download · referral · reward popup
   (P4.5 — one block, so the store's look can be read in one place)
   ============================================================================ */
/* The palette a card, a ribbon or a shelf can wear. The server stores only the NAME (STORE_TONES),
   so a typo in the admin sheet can never paint a card unreadable; every pair carries white text. */
.tone-violet { --t1: #7C5CFF; --t2: #A98BFF; } .tone-blue { --t1: #2F7CF6; --t2: #5AB4FF; }
.tone-green { --t1: #12A96F; --t2: #34D399; } .tone-orange { --t1: #F2600C; --t2: #FBA21B; }
.tone-red { --t1: #E5484D; --t2: #FF7B72; } .tone-pink { --t1: #DB3F8C; --t2: #FF7AB8; }
.tone-gold { --t1: #C98A00; --t2: #F2B630; } .tone-teal { --t1: #0E9AAB; --t2: #2DD4BF; }
.tone-slate { --t1: #3F4B5F; --t2: #6B7A90; }

/* shelves — one row, the admin's order */
.shelves { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; padding: 10px 12px 4px; }
.shelf { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 10px 6px 9px; border-radius: var(--r-lg);
  background: var(--panel); border: 1.5px solid var(--border); color: var(--text); font-family: inherit; text-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur), background var(--dur); }
.shelf:active { transform: scale(.97); }
.shelf .sf-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; overflow: hidden; background: color-mix(in srgb, var(--t1) 14%, transparent); }
.shelf .sf-ic img { width: 100%; height: 100%; object-fit: cover; }
.shelf .sf-tx { display: flex; flex-direction: column; min-width: 0; width: 100%; }
.shelf .sf-tx b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf .sf-tx small { font-size: 10px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf.on { background: linear-gradient(135deg, var(--t1), var(--t2)); border-color: transparent; color: #fff; box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--t1) 70%, transparent); }
.shelf.on .sf-ic { background: rgba(255,255,255,.22); }
.shelf.on .sf-tx small { color: rgba(255,255,255,.88); }
.shelf .sf-off { position: absolute; top: -7px; left: 6px; font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); background: var(--chip-danger-bg); color: var(--chip-danger-text); }
.store-offnote { display: flex; gap: 8px; align-items: flex-start; margin: 12px 12px 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--chip-warn-bg); color: var(--chip-warn-text); font-size: 12px; line-height: 1.8; }
.store-offnote svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; }

/* first-ever open, before any device copy exists: the page's shape, not a sentence */
.sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding: 14px 12px; }
.sk-card { height: 150px; border-radius: var(--r-lg); background: linear-gradient(100deg, var(--panel-2) 30%, color-mix(in srgb, var(--panel-2) 35%, var(--panel)) 50%, var(--panel-2) 70%); background-size: 200% 100%; animation: sk-shine 1.2s linear infinite; }
@keyframes sk-shine { to { background-position: -200% 0; } }

/* plan cards with a ribbon wear its colour all the way round */
.splan.ribboned { border: 2px solid transparent; padding-top: 36px;
  background: linear-gradient(color-mix(in srgb, var(--t1) 6%, var(--panel)), var(--panel)) padding-box, linear-gradient(135deg, var(--t1), var(--t2)) border-box;
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--t1) 60%, transparent); }
.splan .splan-ribbon { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; padding: 5px 14px 6px;
  border-radius: 0 0 12px 12px; background: linear-gradient(135deg, var(--t1), var(--t2)); color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--t1) 70%, transparent); }
.splan .splan-ribbon i { font-style: normal; font-size: 11px; }
.splan.ribboned .splan-cta { background: linear-gradient(135deg, var(--t1), var(--t2)); color: #fff; border-color: transparent; }
.splan.ribboned .splan-price { color: var(--t1); }
.splan .splan-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; background: var(--panel-2); margin-bottom: 4px; overflow: hidden; }
.splan .splan-icon img { width: 100%; height: 100%; object-fit: cover; }

/* services shelf */
.svc-hero { display: flex; gap: 12px; align-items: center; margin: 12px; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--border);
  background: linear-gradient(135deg, color-mix(in srgb, #F2600C 13%, var(--panel)), color-mix(in srgb, #DB3F8C 11%, var(--panel))); }
.svc-hero .svh-ic { width: 42px; height: 42px; border-radius: 14px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #F2600C, #DB3F8C); }
.svc-hero b { display: block; font-size: 15px; font-weight: 800; }
.svc-hero small { display: block; font-size: 11.5px; color: var(--text-2); line-height: 1.7; margin-top: 2px; }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 12px 10px; }
@media (min-width: 520px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 128px; padding: 14px 12px 12px; border-radius: var(--r-lg);
  background: linear-gradient(160deg, color-mix(in srgb, var(--t1) 11%, var(--panel)) 0%, var(--panel) 62%); border: 1px solid color-mix(in srgb, var(--t1) 22%, var(--border));
  color: var(--text); font-family: inherit; text-align: right; overflow: hidden; animation: sc-in .4s var(--ease) both; transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
.svc-card:active { transform: scale(.97); }
.svc-card::after { content: ''; position: absolute; width: 96px; height: 96px; border-radius: 50%; left: -34px; bottom: -44px; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--t2) 30%, transparent), transparent 70%); }
.svc-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--t1) 80%, transparent); }
.svc-ic img { width: 100%; height: 100%; object-fit: cover; }
.svc-t { font-size: 14px; font-weight: 800; line-height: 1.4; }
.svc-d { font-size: 11px; color: var(--text-2); line-height: 1.6; }
.svc-tag { position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 800; color: #fff; padding: 3px 9px; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--t1), var(--t2)); }
.svc-other { display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); margin: 4px 12px 16px; padding: 13px 14px; border-radius: var(--r-lg);
  background: var(--panel); border: 1.5px dashed var(--border); color: var(--text); text-align: right; font-family: inherit; }
.svc-other > span:first-child { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); flex: 0 0 auto; }
.svc-other > span:first-child svg { width: 20px; height: 20px; }
.svc-other > span:nth-child(2) { flex: 1; min-width: 0; }
.svc-other b { display: block; font-size: 13.5px; } .svc-other small { display: block; font-size: 11px; color: var(--text-2); margin-top: 2px; }
.svc-other-go { color: var(--text-2); display: flex; } .svc-other-go svg { width: 16px; height: 16px; }
.svx-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.svx-ic { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 30px; color: #fff; flex: 0 0 auto; overflow: hidden;
  background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--t1) 80%, transparent); }
.svx-ic img { width: 100%; height: 100%; object-fit: cover; }
.svx-tt { flex: 1; min-width: 0; }
.svx-tt b { display: block; font-size: 17px; font-weight: 800; } .svx-tt small { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.svx-head .svc-tag { position: static; flex: 0 0 auto; }
.svx-long { font-size: 13.5px; line-height: 2; color: var(--text); background: var(--panel-2); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 12px; }
.svx-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.svx-steps div { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.svx-steps i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; color: var(--t1); background: color-mix(in srgb, var(--t1) 14%, transparent); }
.svx .btn.svx-go { display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; font-size: 16px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--t1) 80%, transparent); }
.svx .btn.svx-go svg { width: 20px; height: 20px; }
.svx-note { text-align: center; font-size: 11.5px; color: var(--text-2); margin-top: 8px; }
/* priced services: option radios, my orders, the admin queue */
.svh-tx { flex: 1; min-width: 0; }
.svh-mine { margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--panel); border: 1px solid var(--border); color: var(--text); font: inherit; font-size: 11.5px; font-weight: 700; }
.svh-mine svg { width: 15px; height: 15px; color: var(--accent); }
.svc-from { margin-top: auto; font-size: 11px; color: var(--text-2); } .svc-from b { color: var(--t1); font-size: 13px; font-weight: 800; }
.svo-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.svo { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 13px; border-radius: var(--r-md); background: var(--panel); border: 1.5px solid var(--border);
  color: var(--text); font: inherit; text-align: right; animation: sc-in .35s var(--ease) both; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform .12s var(--ease); }
.svo:active { transform: scale(.985); }
.svo.on { border-color: var(--t1); background: color-mix(in srgb, var(--t1) 8%, var(--panel)); }
.svo-dot { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; border: 2px solid var(--border); position: relative; transition: border-color var(--dur); }
.svo-dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--t1); transform: scale(0); transition: transform .22s cubic-bezier(.3,1.5,.5,1); }
.svo.on .svo-dot { border-color: var(--t1); } .svo.on .svo-dot::after { transform: scale(1); }
.svo-tx { flex: 1; min-width: 0; } .svo-tx b { display: block; font-size: 13.5px; font-weight: 800; } .svo-tx small { display: block; font-size: 11px; color: var(--text-2); margin-top: 2px; line-height: 1.6; }
.svo-pr { flex: 0 0 auto; text-align: left; } .svo-pr b { display: block; font-size: 14.5px; font-weight: 800; color: var(--t1); } .svo-pr small { display: block; font-size: 10px; color: var(--text-2); }
.svx-links { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--text-2); }
.svx-links button { background: none; border: 0; color: var(--accent); font: inherit; font-weight: 700; padding: 4px; }
.so-card { padding: 12px 13px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--border); margin-bottom: 9px; animation: sc-in .3s var(--ease) both; }
.so-card.st-pending { border-color: color-mix(in srgb, #F59E0B 45%, var(--border)); }
.so-top { display: flex; align-items: center; gap: 8px; } .so-top b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; }
.so-st { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: var(--r-pill); color: var(--t1); background: color-mix(in srgb, var(--t1) 14%, transparent); }
.so-sub { font-size: 11.5px; color: var(--text-2); margin-top: 4px; line-height: 1.8; } .so-sub a { color: var(--accent); cursor: pointer; }
.so-info { display: flex; align-items: center; gap: 8px; font-size: 12.5px; background: var(--panel-2); border-radius: 10px; padding: 8px 10px; margin-top: 8px; }
.so-info span { flex: 1; min-width: 0; word-break: break-word; } .so-info .so-copy { flex: 0 0 auto; }
.so-dl { margin-top: 9px; border-radius: 12px; background: color-mix(in srgb, #16a34a 9%, var(--panel)); border: 1px solid color-mix(in srgb, #16a34a 30%, var(--border)); padding: 9px 11px; }
.so-dl-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #16a34a; } .so-dl-h svg { width: 15px; height: 15px; } .so-dl-h span { flex: 1; }
.so-dl pre { margin: 6px 0 0; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 13px; line-height: 1.9; color: var(--text); user-select: text; -webkit-user-select: text; }
.so-copy { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px 10px; font: inherit; font-size: 11px; font-weight: 700; color: var(--accent); }
.so-why { margin-top: 8px; font-size: 12px; color: var(--danger); }
.so-acts { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .so-acts .btn { width: auto; flex: 0 0 auto; }
.so-wait { flex: 1; font-size: 11px; color: var(--text-2); }
.so-rate { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-bottom: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--panel-2); }
.so-rate small { color: var(--text-2); } .so-rate .btn { width: auto; }
.so-fee.field { display: flex; flex-direction: row; align-items: flex-end; gap: 8px; margin-bottom: 12px; }
.so-fee label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.so-fee .btn { width: auto; flex: 0 0 auto; height: 44px; padding: 0 18px; }
.so-tabs { margin: 4px 0 10px; } .so-tabs button { flex: 1; font-size: 12px; }
.so-n { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 10.5px; line-height: 18px; }
.sco-row { padding: 10px; border-radius: var(--r-md); background: var(--panel-2); margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.sco-row input { width: 100%; }
.sco-p { display: flex; align-items: flex-end; gap: 6px; } .sco-p label { flex: 1; font-size: 10.5px; color: var(--text-2); display: flex; flex-direction: column; gap: 3px; }
.sco-p .btn { width: auto; height: 38px; } .sco-p .pa-mv { height: 38px; }

/* the reward moment — transform/opacity only, so it is smooth on a cheap phone */
.rw-ov { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 24px; background: var(--overlay);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: rw-fade .28s var(--ease) both; }
.rw-ov.out { animation: rw-fade-out .3s var(--ease) both; }
@keyframes rw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rw-fade-out { to { opacity: 0; } }
.rw-card { position: relative; width: min(320px, 100%); padding: 34px 22px 26px; border-radius: 28px; background: var(--panel); text-align: center; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: 0 30px 70px -20px rgba(20,16,60,.45); animation: rw-rise .55s cubic-bezier(.2,.9,.25,1.12) both; }
.rw-ov.out .rw-card { animation: rw-sink .3s var(--ease) both; }
@keyframes rw-rise { from { opacity: 0; transform: translateY(26px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes rw-sink { to { opacity: 0; transform: translateY(12px) scale(.96); } }
.rw-glow { position: absolute; top: -100px; left: 50%; width: 320px; height: 230px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--t1) 36%, transparent), transparent); animation: rw-breathe 2.4s ease-in-out infinite; }
@keyframes rw-breathe { 50% { opacity: .6; transform: translateX(-50%) scale(1.08); } }
.rw-badge { position: relative; width: 108px; height: 108px; display: grid; place-items: center; margin-bottom: 8px; }
.rw-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rw-ring circle { fill: none; stroke: var(--t2); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; animation: rw-draw .9s .15s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes rw-draw { to { stroke-dashoffset: 0; } }
.rw-ic { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--t1), var(--t2));
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--t1) 85%, transparent); animation: rw-pop .5s .32s cubic-bezier(.2,.9,.3,1.3) both; }
.rw-ic svg { width: 38px; height: 38px; }
@keyframes rw-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.rw-bits { position: absolute; inset: 50%; }
.rw-bits i { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 3px; background: var(--t1); opacity: 0;
  transform: rotate(var(--a)) translateY(0); animation: rw-bit .95s .55s cubic-bezier(.15,.7,.3,1) forwards; }
.rw-bits i:nth-child(4n+1) { background: var(--t2); border-radius: 50%; }
.rw-bits i:nth-child(4n+2) { background: #FFD166; width: 6px; height: 11px; margin: -5px -3px; }
.rw-bits i:nth-child(4n+3) { background: #FF7A9C; border-radius: 50%; }
@keyframes rw-bit { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(.4); } }
.rw-t { font-size: 20px; font-weight: 800; color: var(--text); animation: rw-up .45s .45s var(--ease) both; }
.rw-s { font-size: 13px; color: var(--text-2); line-height: 1.8; animation: rw-up .45s .55s var(--ease) both; }
@keyframes rw-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* after a purchase: one pointer at the globe */
.hc-tip { position: fixed; inset: 0; z-index: 300; pointer-events: none; animation: rw-fade .3s var(--ease) both; }
.hc-tip.out { animation: rw-fade-out .25s var(--ease) both; }
.hc-ring { position: fixed; border-radius: 50%; border: 3px solid var(--accent); box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 20%, transparent); animation: hc-pulse 1.4s ease-in-out infinite; }
@keyframes hc-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .65; } }
.hc-bubble { position: fixed; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(320px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 18px;
  background: var(--accent); background-image: var(--accent-grad); color: #fff; text-align: center; pointer-events: auto; box-shadow: 0 16px 34px -12px rgba(60,40,160,.55);
  animation: hc-in .45s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes hc-in { from { opacity: 0; transform: translate(-50%, 10px) scale(.95); } to { opacity: 1; transform: translate(-50%, 0); } }
.hc-bubble b { display: block; font-size: 15.5px; font-weight: 800; }
.hc-bubble small { display: block; font-size: 11.5px; opacity: .92; margin-top: 3px; line-height: 1.7; }
.hc-arrow { position: absolute; left: 50%; width: 14px; height: 14px; margin-left: -7px; background: var(--accent); transform: rotate(45deg); }
.hc-bubble.up .hc-arrow { bottom: -6px; } .hc-bubble.down .hc-arrow { top: -6px; }
@media (prefers-reduced-motion: reduce) {
  .rw-card, .rw-ic, .rw-t, .rw-s, .rw-glow, .hc-ring, .hc-bubble, .sk-card { animation: none !important; }
  .rw-ring circle { animation: none; stroke-dashoffset: 0; } .rw-bits { display: none; }
}

/* «کانفیگ‌های تکی» */
.cl-list { display: flex; flex-direction: column; gap: 8px; }
.cl-list .cl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--panel-2); }
.cl-list .cl-row.sub { background: var(--accent-soft); }
.cl-list .cl-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.cl-list .cl-main b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-list .cl-proto { font-size: 10px; font-weight: 700; color: var(--accent); background: var(--panel); padding: 2px 7px; border-radius: var(--r-pill); flex: 0 0 auto; }
.cl-list .cl-acts { display: flex; gap: 6px; }
.cl-list .cl-btn { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--panel); color: var(--accent); border: 1px solid var(--border); }
.cl-list .cl-btn.on { background: var(--accent); color: #fff; border-color: transparent; }
.cl-list .cl-btn svg { width: 18px; height: 18px; }
.cl-list .cl-row .qr-inline { flex-basis: 100%; }

/* download — per platform: Download (loud), copy link, QR */
.dlx { padding-bottom: 16px; }
.dlx-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px; padding: 5px; border-radius: var(--r-lg); background: var(--panel-2); }
.dlx-seg button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 12px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); transition: background var(--dur), color var(--dur); }
.dlx-seg button span { display: flex; } .dlx-seg button svg { width: 20px; height: 20px; }
.dlx-seg button.on { background: var(--panel); color: var(--accent); box-shadow: 0 4px 12px -6px rgba(40,44,90,.3); }
.dlx-card { position: relative; overflow: hidden; margin: 0 12px; padding: 18px 16px 14px; border-radius: 22px; background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); }
.dlx-orb { position: absolute; width: 230px; height: 230px; border-radius: 50%; top: -125px; left: -60px; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); }
.dlx-top { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dlx-logo { width: 52px; height: 52px; border-radius: 16px; background: var(--accent-grad); display: grid; place-items: center; flex: 0 0 auto; color: #fff; box-shadow: var(--glow); }
.dlx-logo b { font-size: 16px; font-weight: 800; } .dlx-logo b span { opacity: .75; }
.dlx-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dlx-name b { font-size: 15.5px; font-weight: 800; } .dlx-name small { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.dlx-chip { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); background: var(--chip-ok-bg); color: var(--chip-ok-text); }
.dlx-chip.hot { background: var(--chip-warn-bg); color: var(--chip-warn-text); }
.dlx-go { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 58px; border-radius: 18px; font-family: inherit;
  background: var(--accent-grad); color: #fff; font-size: 17px; font-weight: 800; text-decoration: none; box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--accent) 80%, transparent);
  transition: transform var(--dur) var(--ease); }
.dlx-go svg { width: 22px; height: 22px; }
.dlx-go:active { transform: scale(.98); }
.dlx-go[disabled] { opacity: .5; box-shadow: none; }
.dlx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.dlx-sm { display: flex; align-items: center; justify-content: center; gap: 7px; height: 46px; border-radius: 14px; background: var(--panel-2); color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 600; border: 1px solid var(--border); }
.dlx-sm svg { width: 18px; height: 18px; color: var(--accent); }
.dlx-sm.on { border-color: var(--accent); color: var(--accent); }
.dlx-sm[disabled] { opacity: .45; }
.dlx-note { position: relative; display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; color: var(--text-2); line-height: 1.8; margin-top: 12px; }
.dlx-note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 3px; color: var(--accent); }
.dlx-help { display: block; margin: 14px auto 0; font-family: inherit; font-size: 12px; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.dlx-steps { padding-inline-start: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.9; }

/* wallet — the top-up button is the one warm thing on a cool card, so nobody has to look for it */
.wallet-balance .wb-topup { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 220px; height: 52px; padding: 0 22px;
  border-radius: 16px; font-family: inherit; font-size: 16px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #FF5F3D, #FF2D7A);
  box-shadow: 0 12px 26px -8px rgba(255,60,90,.65), inset 0 1px 0 rgba(255,255,255,.25); transition: transform var(--dur) var(--ease); }
.wb-topup .wbt-ic { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; }
.wb-topup .wbt-ic svg { width: 16px; height: 16px; }
.wb-topup::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); animation: wb-shine 3.4s 1s ease-in-out infinite; }
@keyframes wb-shine { 0%, 62% { left: -60%; } 100% { left: 130%; } }
.wb-topup:active { transform: scale(.97); }
.wallet-balance .wb-amount.wb-wait { opacity: .55; }
.tu-req { display: flex; align-items: center; gap: 10px; margin: 0 12px 8px; padding: 12px; border-radius: var(--r-lg);
  background: color-mix(in srgb, #F59E0B 10%, var(--panel)); border: 1px solid color-mix(in srgb, #F59E0B 35%, var(--border)); }
.tu-req.done { background: color-mix(in srgb, var(--online) 10%, var(--panel)); border-color: color-mix(in srgb, var(--online) 35%, var(--border)); }
.tur-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; color: #C27C00; background: color-mix(in srgb, #F59E0B 18%, transparent); }
.tu-req.done .tur-ic { color: var(--chip-ok-text); background: var(--chip-ok-bg); }
.tur-ic svg { width: 20px; height: 20px; }
.tur-tx { flex: 1; min-width: 0; }
.tur-tx b { display: block; font-size: 13.5px; font-weight: 700; } .tur-tx small { display: block; font-size: 11px; color: var(--text-2); margin-top: 2px; }
.tur-acts { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.tur-acts .btn { width: auto; padding: 8px 12px; }
.tur-x { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--text-2); }
.tur-x svg { width: 16px; height: 16px; }

/* «دعوت دوستان» — bold and warm wherever it appears (wallet, settings, the sheet) */
.ref-cta { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); margin: 4px 12px 12px; padding: 14px; border-radius: 20px;
  color: #fff; text-align: right; font-family: inherit; background: linear-gradient(120deg, #FF7A45 0%, #FF4D8D 55%, #B44DFF 100%);
  box-shadow: 0 14px 30px -14px rgba(255,77,141,.75); transition: transform var(--dur) var(--ease); }
.ref-cta::before { content: ''; position: absolute; width: 150px; height: 150px; border-radius: 50%; right: -40px; top: -80px; background: rgba(255,255,255,.14); }
.ref-cta:active { transform: scale(.98); }
.rc-gift { position: relative; width: 46px; height: 46px; border-radius: 15px; background: rgba(255,255,255,.22); display: grid; place-items: center; flex: 0 0 auto; animation: rc-wiggle 2.8s ease-in-out infinite; }
.rc-gift svg { width: 24px; height: 24px; }
@keyframes rc-wiggle { 0%, 82%, 100% { transform: rotate(0); } 86% { transform: rotate(-10deg); } 90% { transform: rotate(9deg); } 94% { transform: rotate(-5deg); } }
.rc-tx { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-tx b { font-size: 14.5px; font-weight: 800; } .rc-tx small { font-size: 11.5px; opacity: .92; }
.rc-go { position: relative; flex: 0 0 auto; padding: 8px 16px; border-radius: var(--r-pill); background: #fff; color: #E5397A; font-size: 13px; font-weight: 800; box-shadow: 0 6px 14px -6px rgba(0,0,0,.25); }
.settings2 .st-invite { background: linear-gradient(120deg, #FF7A45 0%, #FF4D8D 55%, #B44DFF 100%); border: none; color: #fff; padding: 14px; border-radius: 20px; overflow: hidden; box-shadow: 0 14px 30px -14px rgba(255,77,141,.7); }
.settings2 .st-invite .st-inv-ic { width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.22); color: #fff; animation: rc-wiggle 2.8s ease-in-out infinite; }
.settings2 .st-invite .st-inv-ic svg { width: 22px; height: 22px; }
.settings2 .st-invite .st-inv-tx b { font-size: 14.5px; font-weight: 800; }
.settings2 .st-invite .st-inv-tx small { color: rgba(255,255,255,.9); }
.settings2 .st-invite .st-inv-go { background: #fff; color: #E5397A; font-weight: 800; padding: 8px 16px; border-radius: var(--r-pill); }
.ref-hero2 { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px 18px; border-radius: 24px; text-align: center;
  color: #fff; background: linear-gradient(135deg, #FF7A45 0%, #FF4D8D 55%, #B44DFF 100%); box-shadow: 0 18px 36px -18px rgba(255,77,141,.8); }
.rh-orb { position: absolute; width: 210px; height: 210px; border-radius: 50%; top: -115px; right: -50px; background: rgba(255,255,255,.16); }
.rh-gift { position: relative; width: 64px; height: 64px; border-radius: 20px; background: rgba(255,255,255,.22); display: grid; place-items: center; animation: rc-wiggle 2.8s ease-in-out infinite; }
.rh-gift svg { width: 34px; height: 34px; }
.rh-h { position: relative; font-size: 20px; font-weight: 800; }
.rh-sub { position: relative; font-size: 12.5px; line-height: 1.9; opacity: .95; }
.rh-sub b { font-weight: 800; }
.ref-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.ref-stats div { padding: 12px; border-radius: 16px; background: var(--panel-2); text-align: center; }
.ref-stats b { display: block; font-size: 17px; font-weight: 800; } .ref-stats small { font-size: 11px; color: var(--text-2); }
.ref-link { width: 100%; display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 14px; border: 1px dashed var(--border); background: var(--panel); color: var(--text-2); font-size: 12.5px; font-family: inherit; }
.ref-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.ref-link i { display: flex; color: var(--accent); } .ref-link i svg { width: 18px; height: 18px; }
.ref-main { width: 100%; height: 54px; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 16px; font-family: inherit;
  color: #fff; font-size: 15.5px; font-weight: 800; background: linear-gradient(120deg, #FF7A45, #FF4D8D); box-shadow: 0 12px 24px -10px rgba(255,77,141,.7); }
.ref-main svg { width: 20px; height: 20px; }
.ref-two { display: flex; gap: 8px; margin-top: 8px; }
.ref-two button { flex: 1; height: 46px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--border); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); }
.ref-two svg { width: 18px; height: 18px; color: #FF4D8D; }
.ref-note2 { font-size: 11.5px; line-height: 1.85; color: var(--text-2); margin: 12px 2px 4px; }
.ref-empty { text-align: center; font-size: 12.5px; color: var(--text-2); padding: 16px 8px 6px; }

/* top-up: three steps, one at a time */
.tu-steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 14px; }
.tu-steps span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.tu-steps span i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; background: var(--panel-2); color: var(--text-2); }
.tu-steps span.on { color: var(--text); } .tu-steps span.on i { background: var(--accent-grad); color: #fff; }
.tu-steps span.done i { background: var(--chip-ok-bg); color: var(--chip-ok-text); }
.tu-steps > b { width: 18px; height: 2px; border-radius: 2px; background: var(--border); }
.sheet .tu-h { font-size: 18px; text-align: center; margin-bottom: 12px; }
.tu-preset { padding: 12px 6px 10px; gap: 0; }
.tu-preset b { font-size: 19px; font-weight: 800; line-height: 1.3; } .tu-preset span { font-size: 11px; font-weight: 600; color: var(--text-2); }
.tu-preset.on b, .tu-preset.on span { color: var(--accent); }
.tu-custom input { text-align: center; font-size: 16px; font-weight: 700; direction: ltr; }
.tu-eq b { color: var(--accent); font-size: 14px; }
.sheet .btn.tu-next { height: 52px; font-size: 15.5px; font-weight: 800; background: linear-gradient(135deg, #FF5F3D, #FF2D7A); box-shadow: 0 12px 24px -10px rgba(255,60,90,.6); }
.sheet .btn.tu-next:disabled { background: var(--panel-2); color: var(--text-2); box-shadow: none; opacity: 1; }
.pay-hero { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 14px 14px; border-radius: 20px; text-align: center; color: #fff; background: var(--accent-grad); box-shadow: var(--glow); }
.pay-hero small { font-size: 12px; opacity: .9; }
.pay-hero b { font-size: 26px; font-weight: 800; } .pay-hero b span { font-size: 13px; font-weight: 600; opacity: .9; }
.pay-hero .ph-eq { font-size: 12px; opacity: .9; }
.ph-copy { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 7px 14px; border-radius: var(--r-pill); background: rgba(255,255,255,.22); color: inherit; font-family: inherit; font-size: 12.5px; font-weight: 700; }
.ph-copy svg { width: 15px; height: 15px; }
.pay-card2 { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 10px; padding: 14px; border-radius: 18px; text-align: center; background: var(--panel-2); border: 1px dashed var(--border); }
.pay-card2 small { font-size: 11.5px; color: var(--text-2); } .pay-card2 b { font-size: 21px; font-weight: 800; letter-spacing: 1px; } .pay-card2 > span { font-size: 12.5px; color: var(--text-2); }
.pay-card2 .ph-copy { background: var(--accent-soft); color: var(--accent); }
.tu-why { font-size: 11.5px; line-height: 1.8; color: var(--chip-warn-text); background: var(--chip-warn-bg); border-radius: 12px; padding: 9px 12px; margin: 10px 0 14px; }
.tu-sub { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; margin-bottom: 8px; }
.tu-sub i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; color: #fff; background: var(--accent-grad); }
.tu-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 12px; padding: 18px 14px; border-radius: 18px; text-align: center; cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); transition: border-color var(--dur), background var(--dur); }
.tu-drop .td-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); overflow: hidden; transition: width var(--dur), height var(--dur); }
.tu-drop .td-ic svg { width: 24px; height: 24px; } .tu-drop .td-ic img { width: 100%; height: 100%; object-fit: cover; }
.tu-drop.has { border-style: solid; border-color: var(--online); background: color-mix(in srgb, var(--online) 8%, var(--panel)); }
.tu-drop.has .td-ic { width: 72px; height: 72px; }
.tu-drop b { font-size: 14px; } .tu-drop small { font-size: 11px; color: var(--text-2); }
.tu-drop.shake { animation: tu-shake .4s; }
@keyframes tu-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.tu-later { display: flex; justify-content: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--text-2); }
.tu-later button { font-family: inherit; font-size: 12px; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.tu-later button.danger { color: var(--danger); }
.tuo { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 4px; text-align: center; }
.tuo-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 4px; color: #C27C00; background: color-mix(in srgb, #F59E0B 18%, transparent); }
.tuo-ic svg { width: 30px; height: 30px; }
.tuo-ic.done { color: var(--chip-ok-text); background: var(--chip-ok-bg); }
.tuo-t { font-size: 18px; font-weight: 800; }
.tuo-amt { font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 4px 12px; border-radius: var(--r-pill); }
.tuo-p { font-size: 13px; line-height: 1.95; color: var(--text-2); margin: 6px 0 10px; }
.tuo-p b { color: var(--text); }
.tuo-close { margin-top: 6px; padding: 10px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--danger); }

/* admin: store showcase, plan order, card editor */
.adm-hint { font-size: 12px; color: var(--text-2); line-height: 1.85; margin: -2px 0 10px; }
.pa-order { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.pa-mv { width: 34px; height: 30px; border-radius: 8px; background: var(--panel-2); color: var(--text-2); font-size: 12px; line-height: 1; }   /* was 26×20 with 9px arrows — too small to hit */
.pa-mv:disabled { opacity: .3; }
.plan-admin .pa-main { flex: 1; min-width: 0; }
.plan-admin.off { opacity: .6; }
.pa-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-inline-end: 5px; vertical-align: middle; font-size: 15px; overflow: hidden; border-radius: 6px; }
.pa-ic img { width: 100%; height: 100%; object-fit: cover; }
.rb-chip { display: inline-block; margin-inline-start: 4px; padding: 2px 8px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 800; color: #fff; vertical-align: middle; background: linear-gradient(135deg, var(--t1), var(--t2)); }
.tone-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.tone-dot { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--t1), var(--t2)); border: 3px solid var(--panel); box-shadow: 0 0 0 1px var(--border); }
.tone-dot.on { box-shadow: 0 0 0 2px var(--text); }
.icon-field { display: flex; align-items: center; gap: 8px; }
.icon-field input { flex: 1; min-width: 0; }
.icon-field .btn { flex: 0 0 auto; width: auto; display: inline-flex; align-items: center; gap: 5px; padding: 9px 12px; }
.icon-field .btn svg { width: 16px; height: 16px; }
.if-prev { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 24px; background: var(--panel-2); flex: 0 0 auto; overflow: hidden; }
.if-prev img { width: 100%; height: 100%; object-fit: cover; }
.seg-pick { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: var(--panel-2); }
.seg-pick button { flex: 1; padding: 9px 6px; border-radius: 10px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.seg-pick button.on { background: var(--panel); color: var(--accent); box-shadow: 0 3px 10px -5px rgba(40,44,90,.3); }
.st-sec { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 10px; border-radius: 14px; background: var(--panel-2); }
.st-sec.off { opacity: .6; }
.st-sec-f { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.st-sec-f small { font-size: 10.5px; font-weight: 600; color: var(--text-2); }
.st-sec-in { display: flex; gap: 6px; }
.st-sec input { width: 100%; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); font-size: 13px; }
.st-sec input.ss-icon { width: 46px; flex: 0 0 46px; text-align: center; font-size: 17px; }
.adm-links { display: flex; flex-direction: column; gap: 8px; }
.adm-link { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--panel-2); color: var(--text); font-family: inherit; text-align: right; }
.adm-link > span:first-child { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; color: var(--accent); background: var(--accent-soft); }
.adm-link > span:first-child svg { width: 20px; height: 20px; }
.adm-link b { display: block; font-size: 13.5px; } .adm-link small { font-size: 11px; color: var(--text-2); }
.sc-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; font-size: 19px; color: #fff; background: linear-gradient(135deg, var(--t1), var(--t2)); }
.sc-ic img { width: 100%; height: 100%; object-fit: cover; }
/* giftBurst: the same moment, but it never takes a tap (something else may be happening behind it) */
.rw-ov.passive { pointer-events: none; background: color-mix(in srgb, var(--overlay) 55%, transparent); }

/* Android picture-in-picture during a video call (MainActivity → 'blu3:pip'): the floating window shows
   only the other side's video — no controls, no app around it. */
html.in-pip body > *:not(#callUI) { display: none !important; }
html.in-pip #callUI .call-controls, html.in-pip #callUI .call-info, html.in-pip #callUI .call-ghead,
html.in-pip #callUI .call-min, html.in-pip #callUI .call-add, html.in-pip #callUI .call-note,
html.in-pip #callUI .call-status, html.in-pip #callUI .call-routes, html.in-pip #callUI .call-alert { display: none !important; }
html.in-pip #callUI #remoteMedia { position: fixed; inset: 0; }
/* backstop: the window must never be black because the call screen was minimised (the JS restores it
   on 'blu3:pip'; this keeps it on screen even if that did not run) */
html.in-pip #callUI { display: flex !important; }
/* the OTHER person, full-window: never your own camera (a 106×154 self tile covered half of a ~180dp
   window, and a swapped view put YOU full-screen with them as the small box) */
html.in-pip #callUI #localMedia { display: none !important; }
html.in-pip #callUI.swapped #remoteMedia { inset: 0; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; z-index: 0; }
/* a group: one picture, the first person with one (else their photos), not the whole grid */
html.in-pip #callUI .call-grid { grid-template-columns: 1fr !important; padding: 0; gap: 0; }
html.in-pip #callUI .ctile.self, html.in-pip #callUI .ctile:not(.self).has-video ~ .ctile { display: none !important; }
html.in-pip #callUI .call-grid:has(.ctile:not(.self).has-video) .ctile:not(.has-video) { display: none !important; }
html.in-pip #callUI .ctile { border: 0; border-radius: 0; }

/* ============================================================================
   CHAT FOUNDATION (2.0) — one visual language for the whole chat section.
   Tokens + motion + shared utilities ONLY. Areas opt in by using these names;
   nothing below restyles an existing selector except the missing --bg-2 alias.
   Rules: reuse the base scales (--r-*, --sp-*, --fs-*, --ease, --dur) — the
   tokens here are named roles on top of them. Animate transform/opacity only,
   via the individual `translate` / `scale` / `rotate` properties so they
   compose with a component's own `transform`. Everything here is neutralised by
   the prefers-reduced-motion block at the end of this section.
   ============================================================================ */
:root {
  /* --- missing alias: 8 rules use var(--bg-2) (one-time toggle, TTL chip, recovery code…)
         but it was never defined, so they rendered transparent. Sunken surface. */
  --bg-2: var(--panel-2);

  /* --- reading direction as a sign: multiply physical X offsets by it so motion
         follows the inline direction (+1 = inline-end is right / LTR, -1 = RTL). */
  --dir-x: 1;

  /* --- icons: one size ladder + one stroke (inline SVGs use a 24-unit viewBox) --- */
  --ic-xs: 14px;  /* inline meta: ticks, timers, file-size rows */
  --ic-sm: 18px;  /* inside chips, pills, reply/edit bar, in-bubble controls */
  --ic-md: 22px;  /* menu items, list rows, sheet rows */
  --ic-lg: 24px;  /* header + composer actions, select bar (default of .ui-iconbtn) */
  --ic-xl: 32px;  /* media viewer controls, big play over media */
  --ic-stroke: 1.8;       /* stroke-width in viewBox units, for --ic-md and up */
  --ic-stroke-bold: 2.2;  /* small icons (xs/sm) — optically matches 1.8 at 24px */

  /* --- touch --- */
  --tap: 44px;      /* minimum hit target for anything tappable */
  --tap-sm: 36px;   /* compact VISUAL size (in-bubble controls) — pair with .ui-hit to keep 44px */

  /* --- radius roles (built on --r-*) --- */
  --r-bubble: 18px;                          /* message bubble */
  --r-bubble-sm: var(--r-xs);                /* tail corner + corners joined to a neighbour in a group */
  --r-media: calc(var(--r-bubble) - 4px);    /* media/cards inset inside a bubble */
  --r-inset: var(--r-xs);                    /* reply quote, inline code, small blocks inside a bubble */
  --r-card: var(--r-lg);                     /* file/link cards, banners, previews */
  --r-menu: var(--r-lg);                     /* context menu, popovers */
  --r-sheet: var(--r-xl);                    /* bottom sheet top corners */
  --r-btn: var(--r-md);                      /* text buttons */
  --r-input: 22px;                           /* composer field: a pill at 44px, soft when it grows */
  --r-chip: var(--r-pill);                   /* chips, reactions, date pill, counters */

  /* --- spacing: half-steps for dense chat layout + chat roles (built on --sp-*) --- */
  --sp-0-5: 2px; --sp-1-5: 6px; --sp-2-5: 10px;
  --chat-gutter: var(--sp-2-5);     /* side padding of the message list */
  --msg-gap: var(--sp-0-5);         /* between bubbles of one sender group */
  --msg-gap-group: var(--sp-2);     /* between sender groups / around separators */
  --bubble-pad-y: var(--sp-1-5);
  --bubble-pad-x: var(--sp-2-5);
  --chat-head-h: 56px;              /* header, select bar, search bar */

  /* --- type roles --- */
  --fs-msg: var(--fs-md);           /* message text + composer text (same size) */
  --fs-meta: var(--fs-xs);          /* time, ticks, sizes, durations */

  /* --- motion --- */
  --dur-xs: 90ms;      /* press-in, tiny state flips */
  --dur-sm: 150ms;     /* press release, icon swaps, small toggles */
  --dur-md: 220ms;     /* menus, bars, toasts, bubble entry (= --dur) */
  --dur-lg: 300ms;     /* bottom sheets, panels, screen slides */
  --dur-xl: 420ms;     /* emphasised / celebratory moments only */
  --dur-exit: 180ms;   /* every exit — exits are faster than entries */
  --dur-fade: 140ms;   /* opacity-only fade; the one duration kept under reduced motion */
  --dur-shimmer: 1.4s;
  --dur-flash: 1.6s;   /* "here it is" highlight after a jump */
  --dur-spin: .9s;
  --ease-out: var(--ease);                      /* entries, things settling (default) */
  --ease-in: cubic-bezier(.4, 0, 1, 1);         /* exits, things leaving */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);  /* on-screen moves, loops */
  --ease-emph: cubic-bezier(.2, .8, .2, 1);     /* sheets + panels (long decelerate) */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* small pops: badges, reactions, press release */
  --move-xs: 4px; --move-sm: 8px; --move-md: 16px;   /* enter/exit travel */
  --pop-scale: .92;           /* menus/popovers start here */
  --enter-scale: .5;          /* badges, chips, FAB appear from here */
  --press-scale: .92;         /* buttons, icons */
  --press-scale-soft: .98;    /* large surfaces: bubbles, rows, cards */

  /* --- elevation (light) --- */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(40,44,90,.08), 0 1px 1px rgba(40,44,90,.04);       /* bubbles, resting cards */
  --elev-2: 0 4px 14px rgba(40,44,90,.12), 0 1px 3px rgba(40,44,90,.06);      /* floating: FAB, scroll-down, date pill */
  --elev-3: 0 12px 32px rgba(40,44,90,.16), 0 2px 8px rgba(40,44,90,.08);     /* menus, popovers */
  --elev-sheet: 0 -8px 36px rgba(40,44,90,.16);                               /* bottom sheets (cast upward) */

  /* --- interaction + surface roles --- */
  --press-tint: color-mix(in srgb, var(--text) 9%, transparent);   /* pressed overlay — adapts to theme */
  --hover-tint: color-mix(in srgb, var(--text) 5%, transparent);
  --flash-tint: color-mix(in srgb, var(--accent) 26%, transparent);
  --accent-fill: var(--accent);   /* FILLED controls with --accent-contrast on top (send, play, FAB) — ≥3:1 in every theme */
  --danger-fill: color-mix(in srgb, var(--danger) 82%, #000);      /* filled destructive control, white icon */
  --track: color-mix(in srgb, var(--text-2) 32%, transparent);     /* progress/seek/ring track on panels + bubbles */
  --track-on-media: rgba(255,255,255,.35);
  --scrim-media: rgba(0,0,0,.45);         /* pill behind time/duration/controls over photos, video, stickers */
  --scrim-media-strong: rgba(0,0,0,.62);
  --on-media: var(--on-dark);
  --skel-base: color-mix(in srgb, var(--text) 7%, transparent);  /* translucent: works on panel AND both bubble colours */
  --skel-shine: rgba(255,255,255,.55);

  /* --- layers (existing values, named) --- */
  --z-head: 5; --z-float: 6; --z-bar: 8; --z-menu: 50; --z-sheet: 60; --z-viewer: 80; --z-call: 95; --z-toast: 100;
}
[dir="rtl"] { --dir-x: -1; }
[dir="ltr"] { --dir-x: 1; }
[data-theme="dark"] {
  --elev-1: 0 1px 2px rgba(0,0,0,.32);
  --elev-2: 0 0 0 1px rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.45);
  --elev-3: 0 0 0 1px rgba(255,255,255,.07), 0 14px 36px rgba(0,0,0,.55);
  --elev-sheet: 0 0 0 1px rgba(255,255,255,.06), 0 -10px 40px rgba(0,0,0,.5);
  --skel-shine: rgba(255,255,255,.06);
  --accent-fill: color-mix(in srgb, var(--accent) 82%, #000);   /* pastel dark accents vs white icon were ~2.6:1 */
}
/* light themes whose accent is too pale for a white icon; dark themes whose --accent-contrast is dark text */
[data-theme-name="peach"], [data-theme-name="mintlight"], [data-theme-name="ocean"], [data-theme-name="skyblue"] { --accent-fill: color-mix(in srgb, var(--accent) 82%, #000); }
[data-theme-name="carbon"], [data-theme-name="emerald"], [data-theme-name="amethyst"] { --accent-fill: var(--accent); }

/* --- keyframes (individual transform properties → compose with any existing transform) --- */
@keyframes ui-fade-in   { from { opacity: 0; } }
@keyframes ui-fade-out  { to   { opacity: 0; } }
@keyframes ui-sheet-in  { from { translate: 0 100%; } }
@keyframes ui-sheet-out { to   { translate: 0 100%; } }
@keyframes ui-pop-in    { from { opacity: 0; scale: var(--pop-scale); } }
@keyframes ui-pop-out   { to   { opacity: 0; scale: var(--pop-scale); } }
@keyframes ui-rise-in   { from { opacity: 0; translate: 0 var(--move-sm); } }
@keyframes ui-rise-out  { to   { opacity: 0; translate: 0 var(--move-sm); } }
@keyframes ui-drop-in   { from { opacity: 0; translate: 0 calc(-1 * var(--move-sm)); } }
@keyframes ui-drop-out  { to   { opacity: 0; translate: 0 calc(-1 * var(--move-sm)); } }
@keyframes ui-scale-in  { from { opacity: 0; scale: var(--enter-scale); } }
@keyframes ui-scale-out { to   { opacity: 0; scale: var(--enter-scale); } }
@keyframes ui-slide-in  { from { translate: calc(var(--dir-x) * 100%) 0; } }   /* from the inline-end edge */
@keyframes ui-slide-out { to   { translate: calc(var(--dir-x) * 100%) 0; } }
@keyframes ui-shimmer   { from { translate: calc(var(--dir-x) * -100%) 0; } to { translate: calc(var(--dir-x) * 100%) 0; } }
@keyframes ui-flash     { 0%, 100% { opacity: 0; } 12%, 55% { opacity: 1; } }
@keyframes ui-spin      { to { rotate: 360deg; } }

/* --- enter/exit effects: add the class when the element is inserted (plays the entry);
       add .is-closing to play the exit, then remove the element on animationend.
       Entries fill `backwards` only, so nothing lingers on the element once it has arrived
       (a later .ui-press scale / drag translate is never overridden); exits hold their end state. --- */
.ui-fx-fade  { animation: ui-fade-in  var(--dur-md) var(--ease-out) backwards; }
.ui-fx-sheet { animation: ui-sheet-in var(--dur-lg) var(--ease-emph) backwards; }
.ui-fx-pop   { animation: ui-pop-in   var(--dur-md) var(--ease-out) backwards; transform-origin: var(--fx-origin, 50% 0); }
.ui-fx-rise  { animation: ui-rise-in  var(--dur-md) var(--ease-out) backwards; }
.ui-fx-drop  { animation: ui-drop-in  var(--dur-md) var(--ease-out) backwards; }
.ui-fx-scale { animation: ui-scale-in var(--dur-md) var(--ease-spring) backwards; }
.ui-fx-slide { animation: ui-slide-in var(--dur-lg) var(--ease-emph) backwards; }
.ui-fx-fade.is-closing  { animation: ui-fade-out  var(--dur-exit) var(--ease-in) both; }
.ui-fx-sheet.is-closing { animation: ui-sheet-out var(--dur-exit) var(--ease-in) both; }
.ui-fx-pop.is-closing   { animation: ui-pop-out   var(--dur-exit) var(--ease-in) both; }
.ui-fx-rise.is-closing  { animation: ui-rise-out  var(--dur-exit) var(--ease-in) both; }
.ui-fx-drop.is-closing  { animation: ui-drop-out  var(--dur-exit) var(--ease-in) both; }
.ui-fx-scale.is-closing { animation: ui-scale-out var(--dur-exit) var(--ease-in) both; }
.ui-fx-slide.is-closing { animation: ui-slide-out var(--dur-exit) var(--ease-in) both; }
:is(.ui-fx-fade, .ui-fx-sheet, .ui-fx-pop, .ui-fx-rise, .ui-fx-drop, .ui-fx-scale, .ui-fx-slide).is-closing { pointer-events: none; }

/* --- press feedback --- */
/* .ui-press: scale-down on press, springy release. Add .ui-press--soft on big surfaces.
   Its transition is zero-specificity: if the component declares its own `transition`,
   append `scale var(--dur-sm) var(--ease-spring)` to that list. */
:where(.ui-press) { transition: scale var(--dur-sm) var(--ease-spring); }
.ui-press:active, .ui-press.is-pressed { scale: var(--press-scale); transition-duration: var(--dur-xs); transition-timing-function: var(--ease-out); }
.ui-press--soft { --press-scale: var(--press-scale-soft); }
.ui-press:disabled, .ui-press[aria-disabled="true"] { scale: none; }
/* .ui-press-tint: theme-aware overlay while pressed (rows, menu items, list cells). Paints over the
   background COLOUR without replacing it — don't use on gradient-filled controls (use .ui-press). */
.ui-press-tint:active, .ui-press-tint.is-pressed { background-image: linear-gradient(var(--press-tint), var(--press-tint)); }
@media (hover: hover) and (pointer: fine) {
  .ui-press-tint:hover:not(:active) { background-image: linear-gradient(var(--hover-tint), var(--hover-tint)); }
}
.ui-press:focus-visible, .ui-press-tint:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- touch targets --- */
:where(.ui-tap) { min-width: var(--tap); min-height: var(--tap); }
/* .ui-hit: grows the hit area to ≥44px around a smaller visual control (no layout change).
   The host must not clip (no overflow:hidden) and must not already use ::before. */
:where(.ui-hit) { position: relative; }
.ui-hit::before { content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, var(--tap)); height: max(100%, var(--tap)); translate: -50% -50%; }

/* --- icons --- */
/* .ui-ic on an <svg> or on a wrapper of one; size with --ic or the size modifiers.
   (display/position in this section sit in :where() so they never un-hide or un-position a component.) */
:where(.ui-ic:not(svg)) { display: inline-grid; place-items: center; }
.ui-ic { flex-shrink: 0; width: var(--ic, var(--ic-md)); height: var(--ic, var(--ic-md)); }
.ui-ic > svg, svg.ui-ic { width: var(--ic, var(--ic-md)); height: var(--ic, var(--ic-md)); stroke-width: var(--ic-sw, var(--ic-stroke)); }

/* --- icon button: 44px round target, icon centred, tint + scale on press --- */
:where(.ui-iconbtn) { --ic: var(--ic-lg); display: inline-grid; place-items: center; position: relative; padding: 0;
  transition: scale var(--dur-sm) var(--ease-spring); }
.ui-iconbtn { flex-shrink: 0; width: var(--btn-size, var(--tap)); height: var(--btn-size, var(--tap)); border-radius: var(--r-pill); color: var(--text-2); }
/* size modifiers — after .ui-iconbtn so they also resize its icon */
.ui-ic-xs { --ic: var(--ic-xs); --ic-sw: var(--ic-stroke-bold); }
.ui-ic-sm { --ic: var(--ic-sm); --ic-sw: var(--ic-stroke-bold); }
.ui-ic-md { --ic: var(--ic-md); }
.ui-ic-lg { --ic: var(--ic-lg); }
.ui-ic-xl { --ic: var(--ic-xl); }
.ui-iconbtn > svg { width: var(--ic); height: var(--ic); stroke-width: var(--ic-sw, var(--ic-stroke)); pointer-events: none; }
.ui-iconbtn:active, .ui-iconbtn.is-pressed { scale: var(--press-scale); background-image: linear-gradient(var(--press-tint), var(--press-tint));
  transition-duration: var(--dur-xs); transition-timing-function: var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .ui-iconbtn:hover:not(:active) { background-image: linear-gradient(var(--hover-tint), var(--hover-tint)); }
}
.ui-iconbtn.is-active, .ui-iconbtn[aria-pressed="true"] { color: var(--accent); }
.ui-iconbtn--filled { background-color: var(--accent-fill); color: var(--accent-contrast); box-shadow: var(--elev-1); }
.ui-iconbtn--danger { background-color: var(--danger-fill); color: var(--on-dark); box-shadow: var(--elev-1); }
.ui-iconbtn--on-media { background-color: var(--scrim-media); color: var(--on-media); }
.ui-iconbtn:disabled, .ui-iconbtn[aria-disabled="true"] { opacity: .4; scale: none; pointer-events: none; }
.ui-iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- skeleton / shimmer (loading placeholders; sweep follows the reading direction) --- */
:where(.ui-skel) { position: relative; }
.ui-skel { overflow: hidden; isolation: isolate; background-color: var(--skel-base); border-radius: var(--r-sm); }
.ui-skel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--skel-shine), transparent);
  translate: calc(var(--dir-x) * -100%) 0; animation: ui-shimmer var(--dur-shimmer) var(--ease-in-out) infinite; }
.ui-skel--line  { height: .8em; border-radius: var(--r-pill); }
.ui-skel--round { border-radius: 50%; }
.ui-skel--media { border-radius: var(--r-media); }

/* --- jump highlight: tint fades in and out UNDER the content (re-add the class to replay) --- */
:where(.ui-flash) { position: relative; }
.ui-flash { isolation: isolate; }
.ui-flash::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--flash-tint); opacity: 0; animation: ui-flash var(--dur-flash) var(--ease-in-out) both; }

/* --- spinner (an indeterminate progress ring/glyph) --- */
.ui-spin { animation: ui-spin var(--dur-spin) linear infinite; }

/* --- misc chat-wide helpers --- */
.ui-noselect { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }   /* bubbles, viewer images, controls */
.ui-num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }          /* timers, durations, sizes */

/* --- reduced motion: one switch for everything above (+ the shared --dur) --- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 1ms; --dur-xs: 1ms; --dur-sm: 1ms; --dur-md: 1ms; --dur-lg: 1ms; --dur-xl: 1ms; --dur-exit: 1ms;
    --move-xs: 0px; --move-sm: 0px; --move-md: 0px;
    --pop-scale: 1; --enter-scale: 1; --press-scale: 1; --press-scale-soft: 1;
    --dur-spin: 1.8s;   /* a spinner is a status, not decoration: it keeps turning, slowly */
  }
  /* every enter/exit becomes a short opacity fade (no travel, no scale) */
  .ui-fx-fade, .ui-fx-sheet, .ui-fx-pop, .ui-fx-rise, .ui-fx-drop, .ui-fx-scale, .ui-fx-slide { animation: ui-fade-in var(--dur-fade) linear backwards; }
  :is(.ui-fx-fade, .ui-fx-sheet, .ui-fx-pop, .ui-fx-rise, .ui-fx-drop, .ui-fx-scale, .ui-fx-slide).is-closing { animation: ui-fade-out var(--dur-fade) linear both; }
  /* press: --press-scale* = 1 and --dur-* = 1ms above; colour transitions a component adds are left alone */
  .ui-press:active, .ui-press.is-pressed, .ui-iconbtn:active, .ui-iconbtn.is-pressed { scale: none; }
  .ui-skel::after { animation: none; display: none; }
  /* .ui-flash is opacity-only and carries information ("this is the message") — it stays. */
}

/* ============================================================================
   CHAT BUBBLES (2.0) — runs of one sender, the time in the bubble's corner,
   drawn status icons, uploads that say how they are going, group names and
   initials, big emoji, the unread line, the floating date. Built on the CHAT
   FOUNDATION tokens above; motion is transform/opacity only.
   ============================================================================ */
:root {
  /* group names: the eight hues of the preset avatars (AVA_GRADS), dark enough to read on a white bubble */
  --name-1: #2D68E0; --name-2: #BF5A12; --name-3: #0F7F6C; --name-4: #7647D4;
  --name-5: #C02E68; --name-6: #2D8023; --name-7: #17789F; --name-8: #946500;
  /* a chip on my own bubble (a reaction, the voice speed): --accent-soft IS the bubble colour in the default themes */
  --bubble-me-chip: color-mix(in srgb, var(--accent) 18%, var(--bubble-me));
}
[data-theme="dark"] {
  --name-1: #86ACF6; --name-2: #F2A867; --name-3: #62D3BD; --name-4: #C6A6F6;
  --name-5: #F390B3; --name-6: #96D587; --name-7: #72CAE9; --name-8: #EDC671;
}

/* --- runs: 2px inside a run, 8px between runs; joined corners on the bubble's own side --- */
.msg.grp-first, .msg.grp-single { margin-top: var(--msg-gap-group); }
.msg.grp-mid, .msg.grp-last { margin-top: var(--msg-gap); }
.msg.me.grp-mid .bubble, .msg.me.grp-last .bubble { border-top-right-radius: var(--r-bubble-sm); }
.msg.other.grp-mid .bubble, .msg.other.grp-last .bubble { border-top-left-radius: var(--r-bubble-sm); }
.hover-acts[hidden] { display: none !important; }

/* --- group: initials at the end of each run (initials only: a hidden photo stays hidden) --- */
.msg.has-ava { padding-left: 38px; }      /* incoming sits on the left in both directions */
.msg-ava { position: absolute; left: 0; bottom: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; visibility: hidden; -webkit-user-select: none; user-select: none; }
.msg.grp-last > .msg-ava, .msg.grp-single > .msg-ava { visibility: visible; }

/* --- the time: in the corner, on the last line when it fits ([data-pad] holds the room) --- */
/* (physical sides: the stamp is LTR inside — time, then ticks — and an inset-inline-* would follow
   its own direction, not the line's. In the RTL app a line ends on the LEFT.) */
.bubble.st-inline > .stamp, .bubble.st-over > .stamp { position: absolute; bottom: 7px; left: var(--bubble-pad-x); right: auto; margin: 0; z-index: 1; }
.bubble.st-inline.st-flip > .stamp { left: auto; right: var(--bubble-pad-x); }   /* last line in the other direction */
html[dir="ltr"] .bubble.st-inline > .stamp, html[dir="ltr"] .bubble.st-over > .stamp { left: auto; right: var(--bubble-pad-x); }
html[dir="ltr"] .bubble.st-inline.st-flip > .stamp { right: auto; left: var(--bubble-pad-x); }
.stamp-pad { display: inline-flex; align-items: center; gap: 3px; padding: 0 4px; visibility: hidden; pointer-events: none; font-size: var(--fs-meta);
  line-height: 1; direction: ltr; white-space: nowrap; vertical-align: baseline; -webkit-user-select: none; user-select: none; }
.reacts > .stamp-pad { height: 26px; padding: 0 0 0 4px; }
/* over a picture, a sticker, a round video, big emoji: a dark pill (grey text on a wallpaper could not be read) */
.bubble.st-over > .stamp { bottom: 8px; left: 8px; padding: 3px 7px; border-radius: var(--r-chip); background: var(--scrim-media); color: var(--on-media); }
.bubble.st-over > .stamp .ticks, .bubble.st-over > .stamp .edited-tag { color: inherit; }
.bubble.st-over > .stamp .ticks.st-failed { color: #FF9AA5; }
html[dir="ltr"] .bubble.st-over > .stamp { left: auto; right: 8px; }
.bubble.sticker.st-over > .stamp, .bubble.vnbubble.st-over > .stamp, .bubble.emoji-only.st-over > .stamp { bottom: 2px; left: 2px; }
html[dir="ltr"] .bubble.sticker.st-over > .stamp, html[dir="ltr"] .bubble.vnbubble.st-over > .stamp, html[dir="ltr"] .bubble.emoji-only.st-over > .stamp { left: auto; right: 2px; }

/* --- a picture without a caption fills its bubble --- */
.bubble.media-only { padding: 3px; }
.bubble.media-only > .sender, .bubble.media-only > .fwd-src, .bubble.media-only > .replyq { margin: 3px 6px 5px; }
.bubble.media-only .media-wrap, .bubble.media-only img.photo, .bubble.media-only video { border-radius: var(--r-media); }
.bubble.media-only img.photo { margin: 0; display: block; }
.bubble.media-only > .send-err, .bubble.media-only.st-flow > .stamp, .bubble.media-only > .reacts { margin-inline: 7px; }
.bubble.media-only.st-flow > .stamp { margin-bottom: 4px; }
/* the shape known ahead (sealed w/h, or seen this session): the placeholder already has it */
.media-wrap.has-dims { aspect-ratio: var(--ar); width: min(260px, 64vw, calc(340px * var(--ar))); max-width: 100%; height: auto; }
.media-wrap.mload.has-dims.hy-done { display: block; width: min(260px, 64vw, calc(340px * var(--ar))); height: auto; }
.media-wrap.has-dims img.photo, .media-wrap.has-dims video { width: 100%; height: 100%; max-width: none; min-height: 0; object-fit: cover; margin: 0; }

/* --- one to three emoji alone: large, no bubble --- */
.msg .bubble.emoji-only { background: none !important; box-shadow: none; padding: 0 2px 20px; }
.bubble.emoji-only .mtext { font-size: 34px; line-height: 1.15; }
.bubble.emoji-only.e1 .mtext { font-size: 44px; }

/* --- my own bubble's chips: visible again (--accent-soft and --bubble-me were the same colour) --- */
.msg.me .reacts .rx:not(.mine), .msg.me .voicebox .v-speed, .msg.me .musicbox .v-speed { background: var(--bubble-me-chip); }

/* --- a refused send: the red «!» beside the bubble opens what can be done (Telegram) --- */
.msg .fail-dot { position: absolute; bottom: 2px; left: -30px; width: 22px; height: 22px; border: 0; border-radius: 50%; padding: 0;
  background: var(--danger-fill); color: var(--on-dark); font-size: 14px; font-weight: 800; line-height: 22px; text-align: center; cursor: pointer;
  animation: ui-scale-in var(--dur-md) var(--ease-spring) backwards; }
.msg.other .fail-dot { left: auto; right: -30px; }

/* --- uploads: how much is up, then «در حال ارسال…» with no ✕ (nothing left to cancel) --- */
.media-wrap .xf-cap { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2; padding: 3px 8px; border-radius: var(--r-chip); background: var(--scrim-media);
  color: var(--on-media); font-size: var(--fs-meta); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.media-wrap .xf-cap:empty, .msg.upfailed .media-wrap .xf-cap { display: none; }
.msg.xf-sending .xfer .xf-btn { background: var(--scrim-media-strong); cursor: default; }
.msg.xf-sending .xfer-chip { display: none; }
.msg.xf-sending .voicebox .v-up .v-play { background: color-mix(in srgb, var(--accent-fill) 45%, transparent); }   /* the turning ring shows against it */
/* a voice note going up: its round button is the upload (✕ / ↻ inside, the ring around it) */
.voicebox .v-up { position: relative; flex-shrink: 0; width: 44px; height: 44px; }
.voicebox .v-up .v-play svg { width: 18px; height: 18px; }
/* (.up-ring is also the story uploader's full-cover ring: its scrim, 96px svg and radius must not reach this one) */
.voicebox .v-up .dlring.up-ring { inset: -3px; display: block; background: none; border-radius: 50%; }
.voicebox .v-up .dlring.up-ring svg { width: 100%; height: 100%; }
.voicebox .v-up .dlring.up-ring circle { stroke-width: 3; }
.msg.upfailed .voicebox .v-up .v-play { background: var(--danger-fill); }

/* --- swipe to reply: the arrow fades in behind the bubble as it follows the finger --- */
.msg .swipe-reply { position: absolute; top: 50%; margin-top: -16px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--scrim-media); color: var(--on-media); opacity: 0; scale: .6; pointer-events: none; transition: background-color var(--dur-sm) var(--ease-out); }
.msg.me .swipe-reply { right: -42px; }
.msg.other .swipe-reply { left: -42px; }
.msg .swipe-reply svg { width: 18px; height: 18px; }
.msg .swipe-reply.on { background: var(--accent-fill); color: var(--accent-contrast); }

/* --- calls: which way it went --- */
.callmsg .cm-dir { display: inline-flex; vertical-align: -2px; margin-inline-end: 4px; color: var(--online); }
.callmsg .cm-dir.missed { color: var(--danger); }
.callmsg .cm-dir svg { width: 13px; height: 13px; }

/* --- where the reader left off --- */
.unread-sep { align-self: stretch; margin: var(--sp-3) calc(-1 * var(--chat-gutter)) var(--sp-1); padding: 6px 0; text-align: center; font-size: var(--fs-sm);
  font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--panel) 84%, transparent); line-height: 1.2; }

/* --- the day of what is on screen, floating at the top while scrolling --- */
#messages > .day-float { position: sticky; top: 6px; height: 0; align-self: center; z-index: var(--z-float); pointer-events: none; overflow: visible; }
.day-float > span { display: inline-block; padding: 5px var(--sp-3); border-radius: var(--r-chip); font-size: var(--fs-meta); font-weight: 600; line-height: 1;
  white-space: nowrap; color: var(--text-2); background: color-mix(in srgb, var(--panel) 90%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: var(--elev-2); opacity: 0; translate: 0 calc(-1 * var(--move-xs)); transition: opacity var(--dur-md) var(--ease-out), translate var(--dur-md) var(--ease-out); }
.day-float.on > span { opacity: 1; translate: 0 0; }

/* --- a jump to a message: the whole row lights up and fades (.ui-flash) --- */
#messages > .msg.ui-flash::before { inset: -2px -100vw; border-radius: 0; }

/* --- message text size (settings → «اندازهٔ متن پیام») --- */
.fs-prev { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--r-card); background: var(--bg); border: 1px solid var(--border); margin: 4px 0 14px; }
.fs-prev .fs-b { align-self: flex-end; max-width: 80%; padding: 6px 10px; border-radius: var(--r-bubble); background: var(--bubble-other); box-shadow: var(--elev-1); line-height: 1.55; }
.fs-prev .fs-b.me { align-self: flex-start; background: var(--bubble-me); color: var(--bubble-me-text); }
.fs-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fs-opts button { min-height: var(--tap); border-radius: var(--r-btn); background: var(--panel-2); color: var(--text); font-weight: 600; border: 1.5px solid transparent; }
.fs-opts button.on { border-color: var(--accent); color: var(--accent); }

/* ============================================================================
   CHAT CHROME (2.0) — the chat screen around the messages: the header and its ⋮
   menu, the selection and search bars that take its place, message menus with
   icons over a dimmed chat, the pin bar, empty chats, secret-chat marks, the
   Persian confirmation sheet. Built on the CHAT FOUNDATION tokens above; motion
   is transform/opacity only.
   ============================================================================ */
:root { --chat-bg: var(--bg); }
/* dark: the thread sits between the list's --bg and the header's --panel of the same theme
   (it was a blue-grey from another palette, with a seam at the header and the composer) */
[data-theme="dark"] { --chat-bg: color-mix(in srgb, var(--bg) 82%, var(--panel)); }

/* --- the header: clear of the status bar and of the offline strip (that strip covered it — #chatView
       never read --connbar-h); one 56px row under them --- */
.chat-head { padding: calc(max(var(--sat), var(--connbar-h)) + var(--sp-1)) var(--sp-2) var(--sp-1);
  min-height: calc(var(--chat-head-h) + max(var(--sat), var(--connbar-h))); }
.chat-head.ch2 { gap: 2px; padding-inline: var(--sp-1); }
.chat-head .ch-btn { width: var(--tap); height: var(--tap); flex-shrink: 0; transition: scale var(--dur-sm) var(--ease-spring); }
.chat-head .ch-btn svg, .ch-bar .ch-btn svg { width: var(--ic-lg); height: var(--ic-lg); }
.chat-head .ch-btn:active, .ch-bar .ch-btn:active { background: var(--press-tint); scale: var(--press-scale); }
.ch-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2-5); padding: 2px 6px; border-radius: var(--r-md); -webkit-tap-highlight-color: transparent; }
.ch-info[role="button"] { cursor: pointer; }
.ch-ava { position: relative; flex-shrink: 0; display: inline-flex; }
.ch2 .avatar { width: 40px; height: 40px; font-size: var(--fs-md); }
.ch2 .avatar .dot { width: 13px; height: 13px; border-width: 2.5px; }
.ch2 .titles { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; line-height: 1.3; cursor: inherit; }
.ch2 .t-name { display: flex; align-items: center; gap: 4px; min-width: 0; font-weight: 600; font-size: var(--fs-md); }
.ch2 .t-name .ci-svg { flex-shrink: 0; color: var(--text-2); }
.ch2 .t-name .ci-secret { color: var(--online); }
.ch2 .t-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch2 .t-mute { display: inline-flex; flex-shrink: 0; color: var(--text-2); }
.ch2 .t-mute[hidden] { display: none; }
.ch2 .t-mute svg { width: 14px; height: 14px; }
.ch2 .t-status { display: block; min-width: 0; font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* «آنلاین», «در حال نوشتن…», «M آنلاین» in the accent (the old rule wanted .t-status.on on one element) */
.chat-head .t-status .on { color: var(--accent); }
/* a secret chat's timer, on the avatar */
.ttl-chip { position: absolute; bottom: -5px; inset-inline-start: -7px; min-width: 16px; height: 15px; padding: 0 3px; border-radius: var(--r-chip);
  background: var(--accent-fill); color: var(--accent-contrast); border: 2px solid var(--panel); box-sizing: content-box;
  font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- letter avatars: the name's own colour, the letter under any photo (a failed photo is dropped) --- */
.avatar.av-l > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.avatar.av-l .av-ch { line-height: 1; }

/* --- the bars that take the header's place: selection, search --- */
#chatView > .ch-bar { position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-bar); display: flex; align-items: center; gap: 2px;
  height: auto; min-height: calc(var(--chat-head-h) + max(var(--sat), var(--connbar-h)));
  padding: calc(max(var(--sat), var(--connbar-h)) + var(--sp-1)) var(--sp-1) var(--sp-1);
  background: var(--panel); border-bottom: 1px solid var(--border); }
.ch-bar .ch-btn { width: var(--tap); height: var(--tap); flex-shrink: 0; }
.ch-bar .ch-btn:disabled { opacity: .35; pointer-events: none; }
#selectBar .sel-count { flex: 1; min-width: 0; padding-inline: var(--sp-2); font-weight: 600; font-size: var(--fs-md); white-space: nowrap; }
#selectBar .sel-acts { display: flex; gap: 2px; }
#selectBar .sel-del { color: var(--danger); }
#chatSearchBar input { flex: 1; min-width: 0; height: 40px; padding: 0 var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-input);
  background: var(--panel-2); color: var(--text); font-size: var(--fs-md); outline: none; -webkit-appearance: none; appearance: none; }
#chatSearchBar input:focus { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
#chatSearchBar .cs-count { flex-shrink: 0; min-width: 3em; padding-inline: 4px; font-size: var(--fs-sm); color: var(--text-2); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
#chatSearchBar input::-webkit-search-cancel-button { display: none; }   /* the field is cleared by Back; the blue native ✕ clashed */
#messages mark.hl { background: color-mix(in srgb, #FFC93C 58%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* --- selecting: a ring at the left of every row (ticked when chosen), the composer swapped for
       «پاسخ | فوروارد». The ✓ used to sit on the first letters of the bubble. --- */
#chatView.selecting #messages > .msg { max-width: none; align-self: stretch; padding-left: 36px; }
#chatView.selecting #messages > .msg.has-ava { padding-left: 74px; }
#chatView.selecting #messages > .msg > .msg-ava { left: 36px; }
#chatView.selecting #messages > .msg.me { align-items: flex-start; }
#chatView.selecting #messages > .msg.other { align-items: flex-end; }
html[dir="ltr"] #chatView.selecting #messages > .msg.me { align-items: flex-end; }
html[dir="ltr"] #chatView.selecting #messages > .msg.other { align-items: flex-start; }
#chatView.selecting #messages > .msg > .bubble { max-width: 80%; }
#chatView.selecting #messages > .msg::after { content: ''; position: absolute; inset-inline-start: auto; inset-inline-end: auto; left: 5px; right: auto; top: 50%;
  transform: none; translate: 0 -50%; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--text-2) 55%, transparent); background: var(--panel); font-size: 0;
  transition: background-color var(--dur-sm) var(--ease-out), border-color var(--dur-sm) var(--ease-out); }
#chatView.selecting #messages > .msg.selected::after { border-color: var(--accent-fill); background: var(--accent-fill) center / 14px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
#chatView.selecting #messages > .msg.unsent::after, #chatView.selecting .msg .fail-dot { display: none; }
#chatView.selecting .composer-wrap > :not(#selBottom):not(.scroll-down) { display: none !important; }
.sel-bottom { display: flex; gap: var(--sp-2); padding: var(--sp-1-5) var(--sp-2); }
.sel-bottom .sb-btn { flex: 1; min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border-radius: var(--r-btn); color: var(--accent); font-weight: 600; font-size: var(--fs-base); }
.sel-bottom .sb-btn:disabled { color: var(--text-2); opacity: .45; }
.sel-bottom .sb-btn svg { width: var(--ic-md); height: var(--ic-md); }

/* --- menus: an icon per row, no dividers; a message's menu dims the chat and lifts a copy of the
       message above the dimming (the backdrop was transparent, nothing marked the bubble) --- */
.ctx { border-radius: var(--r-menu); box-shadow: var(--elev-3); min-width: 220px; padding: 4px 0; }
.ctx .rxrow { padding-top: var(--sp-1); }
.ctx .rxrow button { min-width: 40px; min-height: 40px; }
.ctx .item { min-height: var(--tap); gap: var(--sp-3); padding: 9px var(--sp-4); border-top: 0; text-align: start; }
.ctx .ctx-ic { display: inline-grid; place-items: center; flex-shrink: 0; color: var(--text-2); }
.ctx .ctx-ic svg { width: var(--ic-md); height: var(--ic-md); }
.ctx .item.danger .ctx-ic { color: inherit; }
.ctx .ctx-lb { flex: 1; min-width: 0; }
#ctxOverlay .ctx { z-index: 2; }
#ctxOverlay.msg-ctx, #ctxOverlay.anchored.msg-ctx { background: color-mix(in srgb, var(--overlay) 72%, transparent); }
#ctxOverlay > .ctx-ghost { position: fixed; z-index: 1; margin: 0 !important; max-width: none; pointer-events: none; transform-origin: 50% 50%;
  animation: ctx-lift var(--dur-md) var(--ease-out) both; }
#ctxOverlay > .ctx-ghost .hover-acts, #ctxOverlay > .ctx-ghost .swipe-reply, #ctxOverlay > .ctx-ghost .fail-dot { display: none !important; }
@keyframes ctx-lift { to { scale: 1.02; } }

/* --- a confirmation sheet in Persian (confirm() was English «OK / Cancel» in the Android app) --- */
.ask h3 { margin-bottom: var(--sp-2); }
.ask-body { color: var(--text-2); font-size: var(--fs-base); line-height: 1.75; margin: 0 0 var(--sp-4); }
.ask-check { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap); margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); cursor: pointer; font-size: var(--fs-base); }
.ask-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.ask-btns { display: flex; gap: var(--sp-2); }
.ask-btns .btn { flex: 1; min-height: var(--tap); }
.ask-btns .btn.danger { background: var(--danger-fill); color: var(--on-dark); }   /* white on the pastel --danger read ~2.5:1 */

/* --- the pin bar: Telegram's segmented line (which pin of how many) --- */
.pinbar { height: 46px; gap: var(--sp-2-5); }
.pinbar .pb-line.pb-seg { display: flex; flex-direction: column; gap: 2px; height: 32px; background: none; }
.pinbar .pb-seg i { flex: 1; border-radius: 2px; background: color-mix(in srgb, var(--accent) 28%, transparent); transition: background-color var(--dur-sm) var(--ease-out); }
.pinbar .pb-seg i.on { background: var(--accent); }
.pinbar .pb-title .ui-num { font-weight: 500; opacity: .85; }
.pinbar .icon-btn { width: 36px; height: 36px; }

/* --- the thread: short chats sit on the composer (Telegram, WhatsApp), no pull-to-refresh reload,
       an older page says it is coming, ⌄ on the inline-end side in both directions --- */
#messages { overscroll-behavior-y: contain; }
#messages > :first-child:not(.day-float), #messages > .day-float:first-child + * { margin-top: auto; }
#messages.loading-older::before { content: ''; position: sticky; top: 44px; z-index: var(--z-float); align-self: center; flex-shrink: 0;
  width: 26px; height: 26px; margin-bottom: -26px; box-sizing: border-box; border-radius: 50%;
  border: 2.5px solid var(--track); border-top-color: var(--accent); background: var(--panel); box-shadow: var(--elev-2);
  animation: ui-spin var(--dur-spin) linear infinite; }
.scroll-down { left: auto; right: auto; inset-inline-end: 12px; }
.scroll-down .sd-badge { left: auto; right: auto; inset-inline-end: -5px; }

/* --- an empty chat: what it is and what to do, in the middle --- */
#messages > .chat-empty { margin: auto; }
.chat-empty { max-width: 290px; padding: var(--sp-5) var(--sp-5) var(--sp-4); border-radius: var(--r-card); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  background: color-mix(in srgb, var(--panel) 92%, transparent); box-shadow: var(--elev-1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.chat-empty .ce-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.chat-empty .ce-ic svg { width: 28px; height: 28px; }
.chat-empty .ce-t { font-weight: 700; font-size: var(--fs-md); line-height: 1.5; }
.chat-empty .ce-s { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.7; }
.chat-empty .ce-list { margin: var(--sp-1) 0 0; padding: 0; list-style: none; text-align: start; display: flex; flex-direction: column; gap: 6px;
  font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6; }
.chat-empty .ce-list li { position: relative; padding-inline-start: 18px; }
.chat-empty .ce-list li::before { content: ''; position: absolute; inset-inline-start: 3px; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.chat-empty .ce-wave { margin-top: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-5); border-radius: var(--r-pill);
  background: var(--accent-fill); color: var(--accent-contrast); font-weight: 600; display: inline-flex; align-items: center; gap: var(--sp-2); }
.chat-empty .ce-wave span { font-size: 20px; line-height: 1; }
.chat-empty .ce-wave:disabled { opacity: .6; }

/* --- a service line in the thread (a secret chat's timer changed) --- */
.svc-row { align-self: center; margin: var(--sp-2) 0; max-width: 85%; text-align: center; }
.svc-row > span { display: inline-block; padding: 5px var(--sp-3); border-radius: var(--r-chip); font-size: var(--fs-meta); font-weight: 600; line-height: 1.5;
  color: var(--text-2); background: color-mix(in srgb, var(--panel) 86%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* --- reactions: buttons; only a new chip pops in; a private chat shows who; who reacted, by emoji --- */
.reacts .rx { animation: none; border: 0; line-height: 1.2; }
.reacts .rx.rx-new { animation: ui-scale-in var(--dur-md) var(--ease-spring) backwards; }
.reacts .rx:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rx-face { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; flex-shrink: 0;
  color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }
.rx-face + .rx-face { margin-inline-start: -5px; }
.rx-face img { width: 100%; height: 100%; object-fit: cover; }
.sheet h3 .rx-total { color: var(--text-2); font-weight: 600; font-size: var(--fs-base); }
.rx-group + .rx-group { margin-top: var(--sp-3); }
.rx-h { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; color: var(--text-2); font-size: var(--fs-sm); padding: var(--sp-1) 2px; }
.rx-h .rx-e { font-size: 20px; line-height: 1; }
.rx-user { width: 100%; padding: 6px 4px; border-radius: var(--r-md); text-align: start; }
.rx-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- a long-press is the app's (menu, selection, recording) — not Android's «کپی / انتخاب همه»
       toolbar over it. Touch screens only: a mouse keeps native text selection. --- */
@media (pointer: coarse) {
  #messages .msg, #messages .bubble, .chat-head, #chatView > .ch-bar, .pinbar, .sel-bottom, #ctxOverlay {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
/* desktop: the chat pane holds its own bars (selection, search) — #chatView was static there, so they
   spanned the whole window, chat list included */
@media (min-width: 900px) { #app > #chatView { position: relative; } }

/* ============================================================================
   CALLS (2.0) — the call screen, the «بازگشت به تماس» bar and the floating video
   window. Built on the CHAT FOUNDATION tokens above; motion is transform/opacity
   only, and the decorative loops stop once a call is live or for reduced motion.
   ============================================================================ */
:root { --callbar-h: 0px; }

/* --- a minimised call: a bar under the status bar (renderPip); the app moves down by its height
       (--callbar-h), as it does for the reconnect strip (--connbar-h) --- */
.side { padding-top: calc(max(var(--sat), var(--connbar-h)) + var(--callbar-h)); }
.chat-head { padding-top: calc(max(var(--sat), var(--connbar-h)) + var(--callbar-h) + var(--sp-1));
  min-height: calc(var(--chat-head-h) + max(var(--sat), var(--connbar-h)) + var(--callbar-h)); }
/* …and so do the bars that take the header's place (selection, in-chat search). They stopped at the
   status bar: their buttons lay under the call bar — «حذف» and ↓ under «پایان تماس», «کپی» under mute —
   and a tap on them ended or muted the call */
#chatView > .ch-bar { padding-top: calc(max(var(--sat), var(--connbar-h)) + var(--callbar-h) + var(--sp-1));
  min-height: calc(var(--chat-head-h) + max(var(--sat), var(--connbar-h)) + var(--callbar-h)); }
#callBar { position: fixed; top: max(var(--sat), var(--connbar-h)); left: 0; right: 0; max-width: 560px; margin: 0 auto; height: 40px; z-index: 30;
  display: flex; align-items: center; padding-inline: 4px; color: #fff; box-shadow: var(--elev-2);
  background: color-mix(in srgb, var(--online) 70%, #000); }
#callBar.ringing { background: var(--accent-fill); color: var(--accent-contrast); }
#callBar .cbar-main { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: var(--sp-2); padding-inline: 10px; color: inherit; font: inherit; text-align: start; }
#callBar .cbar-tx { min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; white-space: nowrap; }
#callBar .cbar-tx b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
#callBar .cbar-tx > span:last-child { flex-shrink: 0; opacity: .92; }
#callBar .cbar-sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; flex-shrink: 0; }   /* a drawn dot: «·» beside Persian digits reads as ۰ */
#callBar .cbar-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; animation: cbar-blink 1.6s var(--ease-in-out) infinite; }
@keyframes cbar-blink { 50% { opacity: .35; } }
#callBar .cbar-btn { width: var(--tap); height: 40px; flex-shrink: 0; display: grid; place-items: center; color: inherit; border-radius: var(--r-pill); transition: scale var(--dur-sm) var(--ease-spring); }
#callBar .cbar-btn svg { width: 28px; height: 28px; padding: 5px; border-radius: 50%; }
#callBar .cbar-btn.on svg { background: #fff; color: #2b5d3f; }
#callBar .cbar-btn.end svg { background: var(--danger-fill); color: var(--on-dark); }
#callBar .cbar-btn:active, #callBar .cbar-main:active { scale: var(--press-scale); }
#callBar .cbar-main:active { scale: var(--press-scale-soft); }
body.app-locked #callBar { z-index: 122; }
@media (min-width: 900px) { #callBar { max-width: none; } }   /* desktop: the app spans the window (two panes) */
#callPip { touch-action: none; }
#callPip.video { border: 2px solid rgba(255,255,255,.6); }
#callPip .pip-end { width: 34px; height: 34px; }

/* --- the call screen's own pieces --- */
#callUI .call-min, #callUI .call-add { width: var(--tap); height: var(--tap); }
#callUI .call-min:active, #callUI .call-add:active { scale: var(--press-scale); }
/* the quality bars measure a link that exists: not before the call is connected */
#callUI:not(.live) .call-signal { display: none; }
/* 1:1 video with no picture from them (camera off, not answered yet, frames not arriving): their photo
   over the call backdrop, centred like a voice call — never a black screen (syncPeerView → .rv) */
#callUI.video:not(.rv) #remoteMedia { visibility: hidden; }
#callUI.video:not(.rv):not(.group) .call-info { margin: auto; text-shadow: none; }
/* dialling a video call: your own camera full-screen behind the name, as a phone does, until it connects */
#callUI.video:not(.live):not(.incoming):not(.self-off):not(.group):not(.ended) .call-info { margin: calc(54px + var(--sat)) 0 0; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
#callUI.video:not(.live):not(.incoming):not(.self-off):not(.group):not(.ended) .call-avatar { display: none; }
#callUI.video:not(.live):not(.incoming):not(.self-off):not(.group):not(.ended) #localMedia {
  inset: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; z-index: 0; cursor: default; }
/* your camera is off: no empty black box (updateCamBtn → .self-off) */
#callUI.self-off #localMedia { display: none; }
/* «میکروفونِ X خاموش است» / «دوربینِ X خاموش است» under the name (1:1) */
#callUI .call-peerst { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill);
  font-size: 13px; color: rgba(255,255,255,.9); background: var(--scrim-media); }
#callUI .call-peerst:empty { display: none; }
#callUI .call-note.flash { color: rgba(255,255,255,.92); }
#callUI .call-note:empty { min-height: 0; }
/* five buttons on a 360px phone: a little smaller, a little closer */
#callUI .call-controls.c5 { gap: 10px; padding-inline: 8px; }
#callUI .call-controls.c5 .cbtn { width: 56px; height: 56px; }
#callUI .call-controls.c5 .cbtn svg { width: 24px; height: 24px; }
#callUI .cbtn:disabled { opacity: .4; }
#callUI .cbtn:disabled:active { transform: none; }
#callUI .cbtn:focus-visible, #callUI .call-min:focus-visible, #callUI .call-add:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* over a picture the bottom scrim already darkens it: no blur behind every button (it costs a low-end GPU) */
#callUI.video .cbtn, #callUI.video .call-min { -webkit-backdrop-filter: none; backdrop-filter: none; }
#callUI.video.rv .cbtn:not(.on):not(.end):not(.accept) { background: rgba(0,0,0,.3); border-color: rgba(255,255,255,.22); }

/* --- no microphone for answering: said under the name, with the way to Settings (callMediaAlert) --- */
#callUI .call-alert { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 320px; margin-top: 4px; padding: 12px 16px;
  border-radius: var(--r-card); background: rgba(0,0,0,.36); border: 1px solid rgba(255,209,102,.35); text-align: center; text-shadow: none; }
#callUI .call-alert b { font-size: 14.5px; color: #ffd166; line-height: 1.6; }
#callUI .call-alert span { font-size: 12.5px; color: rgba(255,255,255,.85); line-height: 1.7; }
#callUI .call-alert .ca-go { margin-top: 4px; min-height: var(--tap); padding: 0 20px; border-radius: var(--r-pill); background: #fff; color: #1c2733; font: inherit; font-size: 13.5px; font-weight: 700; transition: scale var(--dur-sm) var(--ease-spring); }
#callUI .call-alert .ca-go:active { scale: var(--press-scale); }

/* --- where the sound goes, when there are more than two places (openRouteMenu) --- */
#callUI .call-routes { position: absolute; z-index: 7; left: 0; right: 0; margin: 0 auto; bottom: calc(150px + var(--sab)); width: min(280px, calc(100% - 32px));
  padding: 6px; border-radius: var(--r-menu); background: rgba(24,26,42,.94); box-shadow: 0 14px 40px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; --fx-origin: 50% 100%; }
#callUI .call-routes button { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 0 12px; border-radius: var(--r-md); color: #fff; font: inherit; font-size: 14.5px; text-align: start; }
#callUI .call-routes button:active { background: rgba(255,255,255,.1); }
#callUI .call-routes button.on { font-weight: 700; }
#callUI .call-routes .cr-ic, #callUI .call-routes .cr-ok { display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; }
#callUI .call-routes svg { width: 22px; height: 22px; }
#callUI .call-routes .cr-ok { color: #8ee0b2; }
#callUI .call-routes .cr-tx { flex: 1; }

/* --- group: you are a tile (the camera inside it), and whoever speaks has a green ring --- */
#callUI .ctile #localMedia { position: absolute; inset: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; z-index: 0; cursor: default; }
#callUI .ctile.self { background: rgba(255,255,255,.05); }
#callUI .ctile.speaking { outline: 2px solid var(--online); outline-offset: -2px; }

/* --- the last frame: how it ended, then a fade (showCallEnded) --- */
#callUI.ended .call-controls, #callUI.ended .call-min, #callUI.ended .call-add { opacity: .4; pointer-events: none; transition: opacity var(--dur-md) var(--ease-out); }
#callUI.ended video, #callUI.ended #localMedia { visibility: hidden; }
#callUI.ended .call-signal, #callUI.ended .call-peerst { display: none; }
#callUI.ended #callStatusText { animation: none; color: #fff; font-weight: 600; }
#callUI.ended.is-closing { animation: ui-fade-out var(--dur-lg) var(--ease-in) both; pointer-events: none; }

/* --- other things that open while the call screen is in front (body.call-front) --- */
/* a toast sat on «بی‌صدا»/«پایان» for 2 s and took their taps; under the PIN lock it was hidden behind the call */
body.call-front .toast { bottom: calc(180px + var(--sab)); pointer-events: none; z-index: 130; }
/* the reconnect strip covered the top buttons: the call screen's note line says it instead */
body.call-front .conn-bar { visibility: hidden; }
body.call-front .ia-notif { display: none; }

/* --- motion: the backdrop stops drifting once the call is live (it competes with the video encoder on a
       low-end phone); every loop and entry stands still for reduced motion --- */
#callUI.live .call-bg::before, #callUI.live .call-bg::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #callUI .call-bg::before, #callUI .call-bg::after, #callUI .call-avatar.pulse, #callUI .cbtn.accept, #callUI .ctile.ringing .ct-av,
  #callUI .call-avatar.pulse ~ .call-status #callStatusText, #callBar .cbar-dot { animation: none; }
  #callUI.enter, #callUI.enter .call-info, #callUI.enter .call-controls { animation: ui-fade-in var(--dur-fade) linear backwards; }
  #callUI .cbtn:active { transform: none; }
}

/* ── uiConfirm: a Persian yes/no ON TOP of whatever is open (replaces the system confirm(), which the
   Android app drew with English «OK / Cancel») ─────────────────────────────────────────────────── */
.ui-confirm { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0, 0, 0, .45); animation: uc-fade var(--dur-sm, 150ms) var(--ease-out, ease) both; }
.uc-card { width: 100%; max-width: 360px; padding: 20px 18px 16px; border-radius: var(--r-card, 16px); background: var(--panel);
  color: var(--text); box-shadow: var(--elev-3, 0 12px 40px rgba(0,0,0,.25)); animation: uc-pop var(--dur-md, 220ms) var(--ease-spring, ease) both; }
.uc-body { margin: 0 0 16px; font-size: 15px; line-height: 1.85; white-space: pre-line; }
.uc-btns { display: flex; gap: 10px; }
.uc-btns .btn { flex: 1; min-height: var(--tap, 44px); margin: 0; }
@keyframes uc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes uc-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ui-confirm, .uc-card { animation: none; } }

/* ============================================================================
   APP POLISH (2.0) — one feel for every section. The chat foundation's tokens applied to the shared
   pieces: buttons, fields, sheets, switches, toasts, scroll areas. Appended last on purpose (it only
   overrides); delete this block to go back. Motion is transform/opacity only, and none at all under
   prefers-reduced-motion (end of block).
   ============================================================================ */

/* a destructive fill that reads as one, in every theme: the theme's own red pulled toward a deep red
   (white text ≈ 4.8:1 — the soft theme pink alone gave ≈ 3.6:1, a washed-out «حذف») */
:root { --danger-fill: color-mix(in srgb, var(--danger) 60%, #a3001b); }

/* buttons: a real touch target, content centred (icon + label), the same press everywhere */
.btn { min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  line-height: 1.35; text-align: center; cursor: pointer; -webkit-user-select: none; user-select: none; text-decoration: none;
  transition: transform var(--dur-sm) var(--ease-out), box-shadow var(--dur-sm) var(--ease-out), opacity var(--dur-sm) var(--ease-out); }
.btn:active:not(:disabled) { transform: scale(var(--press-scale-soft)); transition-duration: var(--dur-xs); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; box-shadow: none; cursor: not-allowed; transform: none; }
.btn svg { flex-shrink: 0; }
.btn.danger { background: var(--danger-fill); color: var(--on-dark); }
.btn.ghost { box-shadow: inset 0 0 0 1px var(--border); }          /* an edge, without changing its height */
.btn.small { min-height: 36px; }

/* fields: 44px tall, the caret in the accent, a calmer placeholder, a clear disabled look */
.field input, .field textarea, .field select { min-height: var(--tap); caret-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-2); opacity: .7; }
.field input:disabled, .field textarea:disabled, .field select:disabled { opacity: .6; cursor: not-allowed; }
.searchbox input { caret-color: var(--accent); }
/* iPhone zooms the whole page into any field whose text is under 16px (user-scalable=no does not stop
   it) and stays zoomed after. 16px there only — Android keeps its sizes. */
@supports (-webkit-touch-callout: none) {
  .field input, .field textarea, .field select, .searchbox input, #msgInput, input.pw { font-size: 16px; }
}

/* sheets: the foundation's entrance (a little slower and softer than before), a shadow cast upward */
.sheet-overlay { animation: ui-fade-in var(--dur-md) var(--ease-out) both; }
.sheet { animation: ui-sheet-in var(--dur-lg) var(--ease-emph) both; box-shadow: var(--elev-sheet); overscroll-behavior: contain; }
.sheet .grab { width: 36px; height: 5px; border-radius: 999px; }
.sheet h3 { line-height: 1.5; }

/* switches: the knob glides, the track fades */
.switch { transition: background-color var(--dur-md) var(--ease-out); }
.switch::after { transition: transform var(--dur-md) var(--ease-spring); box-shadow: var(--elev-1); }

/* toasts: the shared radius and depth, above the home indicator */
.toast { box-shadow: var(--elev-2); bottom: calc(96px + var(--sab)); }

/* scroll areas on desktop / the Windows app: thin and quiet (a wide grey bar sat beside the store) */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-2) 30%, transparent) transparent; }

/* the selection in the accent's own tint */
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .btn, .switch, .switch::after { transition: none; }
  .sheet, .sheet-overlay { animation: none; }
}
.uc-title { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--text); }
/* admin «اپ و بخش‌ها» */
.aui-note { font-size: 12px; color: var(--text-2); line-height: 1.9; margin-bottom: 6px; }
.aui-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; }
.aui-chk { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.aui-chk input { width: 18px; height: 18px; accent-color: var(--accent); }
.aui-mv { display: flex; gap: 4px; }
.aui-mv .btn.small { min-height: 32px; padding: 4px 10px; }
.aui-sup { padding: 8px 0; border-bottom: 1px solid var(--border); }
.aui-more { margin: 12px 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--panel-2); }
.aui-more summary { cursor: pointer; font-size: 13px; color: var(--text-2); }
/* admin tabs: six of them don't fit a phone. The bar scrolls by itself — before, a tapped tab half off
   screen made the browser scroll the whole app sideways to show it (the title and the bottom bar were cut) */
.adx-seg { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.adx-seg::-webkit-scrollbar { display: none; }
.adx-seg button { flex: 1 0 auto; white-space: nowrap; padding-inline: 10px; }
/* admin: a setting folded into one line that says its state («تأییدِ خودکار: خاموش») */
.adm-fold { border: 1px solid var(--border); border-radius: var(--r-card, 14px); padding: 0 12px; margin-bottom: 12px; background: var(--panel); }
.adm-fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: var(--tap, 44px); cursor: pointer; font-size: 14px; }
.adm-fold > summary::-webkit-details-marker { display: none; }
.adm-fold > summary b { font-size: 12.5px; font-weight: 600; color: var(--text-2); padding: 3px 10px; border-radius: 999px; background: var(--panel-2); }
.adm-fold > summary b.on { color: var(--accent); background: var(--accent-soft); }
.adm-fold > summary::after { content: '⌄'; color: var(--text-2); margin-inline-start: 4px; }
.adm-fold[open] > summary::after { content: '⌃'; }
.adm-fold[open] { padding-bottom: 12px; }
.admin-tile.is-loading { opacity: .55; pointer-events: none; animation: adm-pulse 1s var(--ease-in-out, ease-in-out) infinite alternate; }
@keyframes adm-pulse { to { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .admin-tile.is-loading { animation: none; } }
/* admin refund: the service it will refund, shown before anything happens */
.rf-card { margin: -4px 0 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--border); font-size: 13px; }
.rf-card.muted { color: var(--text-2); text-align: center; }
.rf-card.bad { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.rf-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; }
.rf-row span { color: var(--text-2); }
.rf-row.warn { color: var(--danger); justify-content: center; font-weight: 600; }

/* ============================================================================
   TELEGRAM FEEL (2.0) — the chat moves the way people expect from Telegram. A customer said the chat
   «felt dry»: a new message only faded in 8px, opening a chat was a flat slide, ticks and reactions
   changed without a sign. Transform/opacity only; nothing at all under prefers-reduced-motion.
   ============================================================================ */

/* a message I send springs up out of the composer; one I receive slides up into place */
.msg.fx-send > .bubble { animation: fx-send var(--dur-lg, 300ms) var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) backwards; transform-origin: 100% 100%; }
.msg.fx-recv > .bubble { animation: fx-recv var(--dur-md, 220ms) var(--ease-out, ease-out) backwards; transform-origin: 0 100%; }
html[dir="ltr"] .msg.fx-send > .bubble { transform-origin: 0 100%; }
html[dir="ltr"] .msg.fx-recv > .bubble { transform-origin: 100% 100%; }
@keyframes fx-send { 0% { opacity: 0; transform: translateY(34px) scale(.78); } 45% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes fx-recv { 0% { opacity: 0; transform: translateY(16px) scale(.94); } 100% { opacity: 1; transform: none; } }

/* ticks that change (🕐 → ✓ → ✓✓ → blue) pop into their new state */
.msg .ticks.tick-pop { animation: tick-pop var(--dur-md, 220ms) var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) backwards; }
@keyframes tick-pop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* a reaction I add bursts big over the bubble, then floats away */
.rx-burst { position: absolute; left: 50%; top: 50%; z-index: 6; font-size: 46px; line-height: 1; pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.22)); animation: rx-burst 900ms var(--ease-out, ease-out) forwards; }
@keyframes rx-burst {
  0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
  25% { transform: translate(-50%, -75%) scale(1.3); opacity: 1; }
  60% { transform: translate(-50%, -85%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -140%) scale(.85); opacity: 0; } }

/* a deleted message folds away and the gap closes */
.msg.fx-del { overflow: hidden; opacity: 0; margin-block: 0 !important; pointer-events: none;
  transition: height var(--dur-md, 220ms) var(--ease-in, ease-in), opacity var(--dur-sm, 150ms) linear, margin var(--dur-md, 220ms); }
.msg.fx-del > .bubble { transform: scale(.86); transition: transform var(--dur-md, 220ms) var(--ease-in, ease-in); }

/* opening a chat (phone): the chat slides in on an emphasised curve and the list behind it gives way */
@media (max-width: 899px) {
  #chatView { transition: transform var(--dur-lg, 300ms) var(--ease-emph, cubic-bezier(.2,0,0,1)); }
  #app > .side { transition: transform var(--dur-lg, 300ms) var(--ease-emph, cubic-bezier(.2,0,0,1)); }
  #app:has(> #chatView.open) > .side { transform: translateX(22%); }
}

/* the long-press menu: the chat behind it softens (the pressed message itself stays sharp — it is a copy
   inside the overlay) */
#ctxOverlay { -webkit-backdrop-filter: blur(4px) saturate(1.1); backdrop-filter: blur(4px) saturate(1.1); }

@media (prefers-reduced-motion: reduce) {
  .msg.fx-send > .bubble, .msg.fx-recv > .bubble, .msg .ticks.tick-pop, .rx-burst { animation: none; }
  .msg.fx-del, .msg.fx-del > .bubble, #chatView, #app > .side { transition: none; }
  #app:has(> #chatView.open) > .side { transform: none; }
}

/* ── the emoji / sticker / GIF panel, laid out as Telegram's ─────────────────────────────────────── */
.emoji-panel .tgp-pages { flex: 1; min-height: 0; position: relative; }
.emoji-panel .tgp-page { position: absolute; inset: 0; display: none; flex-direction: column; }
.emoji-panel .tgp-page.on { display: flex; animation: tgp-in var(--dur-sm, 150ms) var(--ease-out, ease-out); }
@keyframes tgp-in { from { opacity: 0; transform: translateY(6px); } }
.emoji-panel .tgp-bar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; border-top: 1px solid var(--border); background: var(--panel); }
.emoji-panel .tgp-modes { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--panel-2); }
.emoji-panel .tgp-modes button { min-width: 66px; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); background: none; border: 0;
  transition: background-color var(--dur-sm, 150ms), color var(--dur-sm, 150ms); }
.emoji-panel .tgp-modes button.on { background: var(--panel); color: var(--accent); box-shadow: var(--elev-1, 0 1px 3px rgba(0,0,0,.12)); }
.emoji-panel .tgp-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); background: none; border: 0; -webkit-user-select: none; user-select: none; }
.emoji-panel .tgp-ic:active { background: var(--panel-2); }
.emoji-panel .tgp-ic svg { width: 22px; height: 22px; }
/* the category / pack strip: centred icons, the one in view underlined */
.emoji-panel .ep-tabs { justify-content: space-between; padding: 2px 6px; }
.emoji-panel .ep-tab { font-size: 20px; padding: 7px 8px; opacity: .55; transition: opacity var(--dur-sm, 150ms); }
.emoji-panel .ep-tab.active { opacity: 1; background: var(--panel-2); box-shadow: inset 0 -2px var(--accent); }
.emoji-panel .st-tab { padding: 4px 6px; }
.emoji-panel .st-tab img { width: 28px; height: 28px; object-fit: contain; display: block; }
/* bigger emoji, a press that answers, as in Telegram */
.emoji-panel .ep-e { font-size: 29px; padding: 4px 0; transition: transform var(--dur-xs, 90ms) var(--ease-out, ease-out); }
.emoji-panel .ep-e:active { transform: scale(.82); }
.emoji-panel .ep-h { font-size: 12px; font-weight: 600; padding: 10px 6px 6px; }
.emoji-panel .ep-grid.stickers { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 2px; }
.emoji-panel .ep-st img { transition: transform var(--dur-sm, 150ms) var(--ease-spring, ease-out); }
.emoji-panel .ep-st:active img { transform: scale(.86); }
.emoji-panel .ep-gif-own { display: block; width: calc(100% - 12px); margin: 8px 6px; padding: 10px; border-radius: var(--r-md, 12px); border: 1px dashed var(--border); background: none; color: var(--accent); font: inherit; font-size: 13px; }
.emoji-panel .ep-grid.gifs { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0 6px 6px; }
/* searching: the field and a row of results above the keyboard, no bar */
.emoji-panel.searching .tgp-page { position: static; }
.emoji-panel.searching .tgp-page:not(.on) { display: none; }
.emoji-panel.searching .tgp-bar { display: none; }
@media (prefers-reduced-motion: reduce) { .emoji-panel .tgp-page.on { animation: none; } .emoji-panel .ep-e, .emoji-panel .ep-st img { transition: none; } }
/* «＋ افزودن» in the sticker page: a small pill beside the title (it took the round photo-add button's look) */
.emoji-panel .ep-h .ep-add { width: auto; height: auto; min-height: 30px; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent); border: 0; display: inline-flex; align-items: center; aspect-ratio: auto; position: static; }

/* ===== TELEGRAM PARITY (2.0): service lines, group edit, mentions, channel views ===== */
/* «علی به گروه پیوست» — the chat's own note, centred like the day line, never a bubble */
.msg.svc { align-self: center; max-width: 92%; flex-direction: row; justify-content: center; padding: 0; margin: var(--sp-1) 0; }
.msg.svc .svc-pill { text-align: center; font-size: 12.5px; font-weight: 500; line-height: 1.6; padding: 3px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 86%, transparent); color: var(--text-2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.msg.svc.fx-recv, .msg.svc.fx-send { animation: fx-recv var(--dur-md, 220ms) var(--ease-out, ease-out) backwards; }
.bubble > .sender.tappable { cursor: pointer; }
.bubble > .sender.tappable:active { opacity: .7; }
/* group edit */
.pf-top .pf-edit { margin-inline-start: auto; color: var(--accent); }
.pf-top .pf-edit svg { width: 21px; height: 21px; }
.pf-photo.tappable { cursor: pointer; }
.ecs .ecs-top { display: flex; align-items: center; gap: 16px; margin: 4px 2px 6px; }
.ecs .ecs-photo { position: relative; width: 84px; height: 84px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; border: none; padding: 0;
  background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ecs .ecs-photo img { width: 100%; height: 100%; object-fit: cover; }
.ecs .ecs-letter { font-size: 32px; font-weight: 700; }
.ecs .ecs-cam { position: absolute; inset: auto 0 0 0; height: 30px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.42); color: #fff; }
.ecs .ecs-acts { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ecs .ecs-rm { color: var(--danger); }
.ecs #ecsSave { margin-top: 18px; }
.ecs #ecsSave.is-loading { opacity: .6; pointer-events: none; }
/* mentions */
.toast.tappable { cursor: pointer; pointer-events: auto; }
.badge.at { background: var(--accent); color: #fff; font-weight: 800; min-width: 20px; padding: 0 5px; margin-inline-end: 4px; }
.scroll-down.mention-down { margin-bottom: 64px; color: var(--accent); font-size: 20px; font-weight: 800; line-height: 1; }
.scroll-down.mention-down:not(.hidden) { animation: fx-recv var(--dur-md, 220ms) var(--ease-out, ease-out) backwards; }
body.recording .scroll-down.mention-down { visibility: hidden; }
.mtext .mention.me, .mention.me { background: var(--accent-soft); border-radius: 5px; padding: 0 3px; }
.mention-pop { max-height: 232px; overflow-y: auto; margin: 0 var(--sp-1) var(--sp-1); border-radius: var(--r-md, 14px); background: var(--panel);
  border: 1px solid var(--border); box-shadow: var(--elev-2, var(--shadow)); overscroll-behavior: contain; animation: fx-recv var(--dur-md, 200ms) var(--ease-out, ease-out) backwards; }
.mention-pop .mp-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; background: none; border: none; color: var(--text);
  font: inherit; text-align: start; cursor: pointer; min-height: var(--tap, 44px); }
.mention-pop .mp-row + .mp-row { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.mention-pop .mp-row:active, .mention-pop .mp-row:hover { background: var(--panel-2); }
.mention-pop .mp-ava { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 14px; }
.mention-pop .mp-ava img { width: 100%; height: 100%; object-fit: cover; }
.mention-pop .mp-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mention-pop .mp-user { color: var(--text-2); font-size: 12.5px; margin-inline-start: auto; }
/* channel post views */
.stamp .st-views { display: inline-flex; align-items: center; gap: 2px; margin-inline-end: 6px; }
.stamp .st-views svg { opacity: .85; }
.stamp .st-views b { font-weight: inherit; }
/* chat list: muted badge, «خوانده‌نشده» dot, swipe to archive */
.badge.muted { background: color-mix(in srgb, var(--text-2) 55%, transparent); color: #fff; }
.badge.dot { min-width: 12px; width: 12px; height: 12px; padding: 0; }
#chatList { position: relative; }   /* the swipe's strip is placed from it */
#chatList .chat-item { touch-action: pan-y; }
#chatList .chat-item.swiping { position: relative; z-index: 1; background: var(--bg); box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.ci-swipe-bg { position: absolute; inset-inline: 0; z-index: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-inline: 22px;
  background: color-mix(in srgb, var(--text-2) 45%, var(--panel)); color: #fff; font-weight: 600; font-size: 13px; transition: background var(--dur-sm, 150ms); }
.ci-swipe-bg.armed { background: var(--accent); }
.ci-swipe-bg .ci-sw-ic svg { width: 22px; height: 22px; }
.ci-swipe-bg.armed .ci-sw-ic { animation: tick-pop .3s var(--ease-spring, ease-out); }
.mb-cell .mb-file { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px;
  background: var(--panel-2); color: var(--text-2); text-align: center; }
.mb-cell .mb-file-ic { color: var(--accent); }
.mb-cell .mb-file-ic svg { width: 26px; height: 26px; }
.mb-cell .mb-file-n { font-size: 11px; font-weight: 600; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-cell .mb-file-s { font-size: 10.5px; }
/* a video's length and size on its bubble before anyone downloads it (Telegram) */
.videowrap .vw-meta { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2; padding: 1px 8px; border-radius: var(--r-pill, 99px);
  background: rgba(0,0,0,.5); color: #fff; font-size: 11.5px; line-height: 18px; direction: ltr; pointer-events: none; backdrop-filter: blur(4px); }
/* now-playing bar: speed chip, a track that seeks, and a place above the chat list once the chat is closed */
#nowPlaying .np-speed { flex-shrink: 0; min-width: 40px; height: 26px; padding: 0 8px; border-radius: 13px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--accent); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
#nowPlaying .np-track { position: relative; height: 4px; margin-top: 6px; cursor: pointer; touch-action: none; }
#nowPlaying .np-track::before { content: ''; position: absolute; inset: -9px 0; }   /* a finger-sized target */
#nowPlaying.np-list { border-radius: 0; box-shadow: var(--elev-1, 0 1px 3px rgba(0,0,0,.08)); }
/* a round video plays silently in the chat as it scrolls past, and grows when played with sound */
.vnote-wrap { transition: width var(--dur-md, 220ms) var(--ease-out, ease-out), height var(--dur-md, 220ms) var(--ease-out, ease-out); }
.msg .vnote { transition: width var(--dur-md, 220ms) var(--ease-out, ease-out), height var(--dur-md, 220ms) var(--ease-out, ease-out), max-width var(--dur-md, 220ms); }
.vnote-wrap.playing { width: min(76vw, 300px); height: min(76vw, 300px); }
.vnote-wrap.playing .vnote { width: min(76vw, 300px); height: min(76vw, 300px); max-width: none; }
.vnote-wrap.playing .vn-ring { width: 100%; height: 100%; }
.vnote-wrap.vn-silent:not(.playing) .vn-play { width: 40px; height: 40px; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .vnote-wrap, .msg .vnote { transition: none; } }
/* incoming call: «رد با پیام» under the two buttons */
.call-quick { position: relative; z-index: 4; align-self: center; margin-top: -6px; margin-bottom: calc(var(--sab, 0px) + 18px); padding: 7px 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 13px; cursor: pointer; backdrop-filter: blur(6px); }
.call-quick:active { background: rgba(255,255,255,.22); }
/* a photo still coming down: its blurred preview (or a soft shimmer), not a grey box */
.media-wrap.mload { position: relative; overflow: hidden; }
.media-wrap .mthumb { position: absolute; inset: -12px; background-size: cover; background-position: center; filter: blur(12px) saturate(1.15); transform: scale(1.05); pointer-events: none; }
.media-wrap.hy-done .mthumb { opacity: 0; transition: opacity .25s ease; }
.media-wrap.mload .photo { position: relative; }
.media-wrap.mskel:not(.hy-done) { background: linear-gradient(100deg, var(--panel-2) 30%, color-mix(in srgb, var(--panel-2) 60%, var(--panel)) 50%, var(--panel-2) 70%); background-size: 220% 100%; animation: mskel 1.4s linear infinite; }
@keyframes mskel { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .media-wrap.mskel:not(.hy-done) { animation: none; } }
.pf-members .ci-member .avatar { width: 42px; height: 42px; flex: 0 0 auto; }
.pf-members .ci-you { color: var(--text-2); font-weight: 400; font-size: 12px; }
/* link preview card under a link (Telegram) */
.bubble .lp-card { display: flex; flex-direction: column; gap: 1px; margin: 6px 0 2px; padding: 5px 10px 6px; border-inline-start: 3px solid var(--accent);
  border-radius: 6px; background: color-mix(in srgb, var(--accent) 9%, transparent); color: inherit; text-decoration: none; max-width: 100%; overflow: hidden; }
.msg.me .bubble .lp-card { border-inline-start-color: currentColor; background: color-mix(in srgb, currentColor 10%, transparent); }
.bubble .lp-card .lp-site { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.msg.me .bubble .lp-card .lp-site { color: inherit; }
.bubble .lp-card .lp-title { font-size: 13.5px; font-weight: 600; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bubble .lp-card .lp-desc { font-size: 12.5px; line-height: 1.55; opacity: .85; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ecs .ecs-rm[hidden] { display: none !important; }
/* round video held on the round button (Telegram): while the finger is down the buttons give way to the
   slide hints — «‹ برای لغو بکشید», «برای قفل، بالا بکشید»; locked, the buttons come back */
#vnRecorder .vnr-slide { display: none; }
#vnRecorder.holding .vnr-act { visibility: hidden; }
#vnRecorder.holding .vnr-bar { position: relative; }
#vnRecorder.holding .vnr-slide { display: flex; position: absolute; inset: 0; align-items: center; justify-content: space-between; padding: 0 var(--sp-5); color: #fff; font-size: 14px; pointer-events: none; }
#vnRecorder .vnr-sl-lock { display: inline-flex; align-items: center; gap: 6px; opacity: .85; }
#vnRecorder .vnr-sl-lock svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) { #vnRecorder.holding .vnr-sl-cancel { animation: vnr-nudge 1.4s var(--ease-in-out, ease-in-out) infinite; } }
@keyframes vnr-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* ===== albums (Telegram): photos and videos sent together, tiled in one block (threadHtml) ===== */
.album { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; width: min(340px, 78vw); max-width: 80%; flex-shrink: 0;   /* a flex child with overflow:hidden may shrink to nothing */
  border-radius: var(--r-bubble, 16px); overflow: hidden; margin: 1px 0; box-shadow: var(--elev-1, 0 1px 1px rgba(0,0,0,.05)); }
.album.alb-me { align-self: flex-start; }
.album.alb-other { align-self: flex-end; }
html[dir="ltr"] .album.alb-me { align-self: flex-end; }
html[dir="ltr"] .album.alb-other { align-self: flex-start; }
.album > .msg.alb-cell { max-width: none; width: auto; margin: 0; padding: 0; align-self: stretch; min-width: 0; }
.album > .alb-full { grid-column: span 6; height: 210px; }
.album > .alb-half { grid-column: span 3; height: 160px; }
.album > .alb-third { grid-column: span 2; height: 118px; }
.album > .alb-cell > .msg-ava, .album > .alb-cell .bubble > .sender, .album > .alb-cell .hover-acts, .album > .alb-cell .swipe-reply { display: none !important; }
.album > .alb-cell > .bubble { width: 100%; height: 100%; padding: 0 !important; margin: 0; border-radius: 0 !important; background: var(--panel-2) !important; box-shadow: none; overflow: hidden; }
.album > .alb-cell .media-wrap, .album > .alb-cell .media-wrap.has-dims { display: block; width: 100% !important; height: 100% !important; max-width: none; aspect-ratio: auto; border-radius: 0 !important; margin: 0; }
.album > .alb-cell .media-wrap img.photo, .album > .alb-cell .media-wrap video { width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none; object-fit: cover; border-radius: 0 !important; margin: 0; display: block; }
/* one time and one set of ticks for the block: on its last tile, over the picture */
.album > .alb-cell:not(:last-child) .stamp { display: none; }
.album > .alb-cell:last-child .stamp { position: absolute; top: auto; bottom: 6px; left: 6px; right: auto; width: auto; max-width: calc(100% - 12px); margin: 0; padding: 1px 7px; border-radius: 10px; background: rgba(0,0,0,.45); color: #fff; z-index: 3; }
.album > .alb-cell:last-child .stamp .ticks { color: #fff; }
html[dir="ltr"] .album > .alb-cell:last-child .stamp { left: auto; right: 6px; }   /* the block's outer corner, as in Telegram */
.album > .alb-cell .reacts { position: absolute; bottom: 6px; inset-inline-start: 6px; margin: 0; z-index: 3; }
.album > .alb-cell .vw-meta { top: 6px; inset-inline-start: 6px; font-size: 10.5px; }
.album > .alb-cell .xf-cap { display: none; }
.album > .alb-cell.selected > .bubble { outline: 3px solid var(--accent); outline-offset: -3px; }
.album > .alb-cell.selected > .bubble::after { content: '✓'; position: absolute; top: 6px; inset-inline-end: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; z-index: 4; }
body.app-locked #callUI .call-quick { display: none; }   /* nothing is written from behind the PIN lock */
.gate-btn.gate-open { display: flex; align-items: center; justify-content: center; margin-top: 12px; text-decoration: none; color: var(--accent); font-weight: 700; }
.call-quick { display: inline-flex; align-items: center; gap: 6px; }
.call-quick svg { width: 16px; height: 16px; }

/* ===== smoothness pass (2.0, «همه‌ی بخش‌ها رون و قشنگ») ===== */
#mainView.view-in { animation: view-in var(--dur-md, 220ms) var(--ease-out, ease-out) both; }
@keyframes view-in { from { opacity: 0; } to { opacity: 1; } }
/* pressing a row, a card or a button answers under the finger (Telegram's ripple, kept light) */
.chat-item, .user-item, .menu-row, .pf-action, .admin-tile, .att-tile, .set-row { transition: background-color var(--dur-sm, 120ms) ease, transform var(--dur-sm, 120ms) ease; }
.pf-action:active, .att-tile:active, .admin-tile:active { transform: scale(.96); }
.btn:active { transform: scale(.97); }
.sheet { will-change: transform; }
@media (prefers-reduced-motion: reduce) { #mainView.view-in { animation: none; } .pf-action:active, .att-tile:active, .admin-tile:active, .btn:active { transform: none; } }
.shelf .sf-ic svg { color: var(--t1, var(--accent)); }
.shelf.on .sf-ic svg { color: #fff; }

/* ===== media composer (one photo / video to send — Telegram) ===== */
.mc-ov { position: fixed; inset: 0; z-index: 86; background: #000; color: #fff; display: flex; flex-direction: column; opacity: 0; transition: opacity var(--dur-md, 200ms) var(--ease-out, ease-out); }
.mc-ov.in { opacity: 1; } .mc-ov.out { opacity: 0; }
.mc-top { display: flex; align-items: center; gap: 6px; padding: calc(var(--sat, 0px) + 8px) 10px 6px; }
.mc-sp { flex: 1; }
.mc-ib { width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; position: relative; }
.mc-ib svg { width: 22px; height: 22px; }
.mc-ib:active { transform: scale(.92); }
.mc-ot.on { background: #ff7a1a; }
.mc-ot i { position: absolute; bottom: -4px; inset-inline-end: -4px; font-style: normal; font-size: 10px; font-weight: 700; background: #ff7a1a; border-radius: 8px; padding: 0 4px; line-height: 15px; }
.mc-ot i:empty { display: none; }
.mc-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.mc-stage img, .mc-stage video { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.mc-ov:not(.editing) .mc-stage img { transform: scale(1); transition: transform .25s var(--ease-out, ease-out); }
.mc-crop { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,.55); cursor: move; touch-action: none; }
.mc-crop[hidden] { display: none; }
.mc-crop .h { position: absolute; width: 26px; height: 26px; border: 4px solid #fff; }
.mc-crop .tl { top: -4px; left: -4px; border-right: 0; border-bottom: 0; cursor: nwse-resize; }
.mc-crop .tr { top: -4px; right: -4px; border-left: 0; border-bottom: 0; cursor: nesw-resize; }
.mc-crop .bl { bottom: -4px; left: -4px; border-right: 0; border-top: 0; cursor: nesw-resize; }
.mc-crop .br { bottom: -4px; right: -4px; border-left: 0; border-top: 0; cursor: nwse-resize; }
.mc-crop .g { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255,255,255,.35) 33.33%, transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.35) 66.66%, transparent calc(66.66% + .5px)),
              linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255,255,255,.35) 33.33%, transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.35) 66.66%, transparent calc(66.66% + .5px)); }
.mc-tools { padding: 10px 12px calc(var(--sab, 0px) + 12px); display: flex; flex-direction: column; gap: 12px; }
.mc-tools[hidden] { display: none; }
.mc-asp { display: flex; gap: 8px; justify-content: center; }
.mc-asp button { border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; border-radius: 16px; padding: 5px 14px; font: inherit; font-size: 13px; }
.mc-asp button.on { background: #fff; color: #000; border-color: #fff; }
.mc-acts { display: flex; align-items: center; gap: 10px; }
.mc-acts .mc-cancel, .mc-acts .mc-done { flex: 1; height: 42px; border-radius: 21px; border: none; font: inherit; font-weight: 600; }
.mc-acts .mc-cancel { background: rgba(255,255,255,.12); color: #fff; }
.mc-acts .mc-done { background: var(--accent); color: #fff; }
.mc-bar { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(var(--sab, 0px) + 10px); background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); }
.mc-bar[hidden] { display: none; }
.mc-cap { flex: 1; background: rgba(255,255,255,.12); border-radius: 22px; padding: 4px 14px; }
.mc-cap textarea { width: 100%; background: none; border: none; outline: none; color: #fff; font: inherit; font-size: 16px; resize: none; padding: 7px 0; max-height: 110px; line-height: 1.5; }
.mc-cap textarea::placeholder { color: rgba(255,255,255,.55); }
.mc-send { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; border: none; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.mc-send svg { width: 22px; height: 22px; }
.mc-send:active { transform: scale(.92); }
body.kb-open .mc-bar { padding-bottom: 10px; }
/* the voice blob behind the round button while recording (Telegram): two soft circles that swell with
   the loudness (--lv 0…1 from the recorder's analyser) */
.rec-blob { position: absolute; width: 0; height: 0; z-index: 2; pointer-events: none; --lv: 0; }
.rec-blob i { position: absolute; left: -36px; top: -36px; width: 72px; height: 72px; border-radius: 50%; background: var(--danger-fill, #e5484d);
  transition: transform 90ms linear, background-color .2s; }
.rec-blob i:first-child { opacity: .28; transform: scale(calc(1 + var(--lv) * .75)); }
.rec-blob i:last-child { opacity: .14; transform: scale(calc(1.18 + var(--lv) * 1.35)); }
.composer.recording.locked .rec-blob i { background: var(--accent-fill, var(--accent)); }
@media (prefers-reduced-motion: no-preference) { .rec-blob { animation: rec-blob-in .25s var(--ease-out, ease-out) both; } }
@keyframes rec-blob-in { from { opacity: 0; } to { opacity: 1; } }
.tu-req .tur-st { font-size: 12px; font-weight: 600; color: #b7791f; background: color-mix(in srgb, #f6ad55 18%, transparent); padding: 4px 10px; border-radius: 12px; white-space: nowrap; }
.sw-split .sp-tx { display: flex; flex-direction: column; line-height: 1.45; text-align: start; }
.sw-split .sp-tx small { font-size: 10.5px; font-weight: 500; color: var(--text-3, var(--text-2)); opacity: .85; }

/* stickers & GIFs, the Telegram way: pack rows in the picker, a sticker's pack sheet, pack manager */
.ep-tab-set svg { width: 18px; height: 18px; color: var(--text-2); }
.ep-pk-x { width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--panel-2); color: var(--text-2); font-size: 15px; line-height: 22px; padding: 0; }
.ep-feat { margin: 4px 6px 10px; padding: 10px; border-radius: var(--r-md); background: var(--panel-2); }
.ep-feat-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ep-feat-h b { font-size: 13px; } .ep-feat-h small { font-size: 11px; color: var(--text-2); margin-inline-start: 6px; }
.ep-feat-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.ep-feat-row img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.ep-gif-bar { display: flex; gap: 6px; padding: 8px 6px 2px; }
.emoji-panel .ep-gif-bar .ep-gif-own { flex: 1; margin: 0; width: auto; }
.ep-gif-send { flex: 0 0 auto; padding: 10px 12px; border-radius: var(--r-md, 12px); border: 1px solid var(--border); background: none; color: var(--text-2); font: inherit; font-size: 12px; }
.ep-gif { position: relative; }
.ep-gif .ep-st-x { position: absolute; top: 4px; inset-inline-end: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 14px; line-height: 20px; text-align: center; z-index: 2; }
.sticker-msg { cursor: pointer; }
.stk-sheet { display: flex; flex-direction: column; gap: 12px; }
.stk-big { width: 180px; height: 180px; object-fit: contain; align-self: center; margin: 6px 0; animation: stk-pop .35s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes stk-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.stk-pack-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.stk-pack-h b { font-size: 16px; font-weight: 800; } .stk-pack-h small { font-size: 12px; color: var(--text-2); }
.stk-grid { max-height: 46vh; overflow-y: auto; }
.stk-grid .ep-st.on { background: var(--accent-soft); }
.stk-acts { display: flex; flex-direction: column; gap: 8px; }
.btn.danger-t { color: var(--danger); }
.stp-row { display: flex; align-items: center; gap: 8px; padding: 8px 2px; border-bottom: 1px solid var(--border); }
.stp-ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; background: var(--panel-2); overflow: hidden; display: grid; place-items: center; }
.stp-ic img { width: 100%; height: 100%; object-fit: contain; }
.stp-t { flex: 1; min-width: 0; } .stp-t b { display: block; font-size: 13.5px; } .stp-t small { font-size: 11px; color: var(--text-2); }
.stp-row .btn { width: auto; flex: 0 0 auto; }

/* ── stories, Instagram-style (public/js/stories.js) ─────────────────────────── */
/* a sheet, a menu, a dialog or a toast opened from the editor / viewer goes above it */
body:has(#storyViewer) .sheet-overlay, body:has(#storyCreator) .sheet-overlay { z-index: 140; }
body:has(#storyViewer) #ctxOverlay, body:has(#storyCreator) #ctxOverlay { z-index: 141; }
body:has(#storyViewer) .ui-confirm, body:has(#storyCreator) .ui-confirm { z-index: 142; }
body:has(#storyViewer) .toast, body:has(#storyCreator) .toast { z-index: 150; }
.story-pill.close .ring { background: linear-gradient(135deg, #22c55e, #16a34a); }
.story-pill.muted { opacity: .45; }
.story-pill.mine.has .ring { background: var(--story-grad); }
.cf-badge { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #16a34a; color: #fff; vertical-align: -5px; }
.cf-badge svg { width: 13px; height: 13px; }
.cf-list { max-height: 50vh; overflow-y: auto; margin-bottom: 12px; }
.cf-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: right; cursor: pointer; position: relative; }
.cf-row .cf-n { flex: 1; min-width: 0; font-size: 14px; } .cf-row .cf-n small { color: var(--text-2); font-size: 11.5px; }
.cf-row input { position: absolute; opacity: 0; pointer-events: none; }
.cf-tick { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; color: transparent; transition: background .15s, border-color .15s; }
.cf-tick svg { width: 13px; height: 13px; }
.cf-row input:checked + .cf-tick { background: #16a34a; border-color: #16a34a; color: #fff; }

/* elements on a story (editor and viewer share them) */
.se { position: absolute; transform-origin: center; white-space: nowrap; user-select: none; -webkit-user-select: none; touch-action: none; }
.se-live { cursor: grab; }
.se-text { width: max-content; max-width: 92%; white-space: normal; line-height: 1.38; text-align: center; color: var(--c); font-weight: 700; }
.se-text span { display: inline; padding: .08em .42em; border-radius: .3em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.se-text.bg-none span { text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.se-text.bg-solid span { background: var(--c); color: #fff; }
.se-text.bg-solid[style*="--c:#ffffff"] span, .se-text.bg-solid[style*="--c:#f5c518"] span, .se-text.bg-solid[style*="--c:#22d3ee"] span { color: #111; }
.se-text.bg-soft span { background: rgba(0,0,0,.55); }
.se-text.al-right { text-align: right; } .se-text.al-left { text-align: left; }
.se-text.f-serif { font-weight: 500; letter-spacing: .04em; }
.se-text.f-hand { color: #fff; text-shadow: 0 0 .25em var(--c), 0 0 .6em var(--c); }
.se-text.f-mono { font-family: ui-monospace, Menlo, Consolas, Vazirmatn, monospace; font-weight: 600; }
.se-emoji { line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.se-layer { position: absolute; pointer-events: none; object-fit: fill; }
.se-chip { display: inline-flex; align-items: center; gap: .3em; padding: .45em .8em; border-radius: .6em; border: 0; background: #fff; font: inherit; font-weight: 800; box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer; }
.se-mention { color: #e4405f; background: linear-gradient(90deg, #fff, #fff); }
.se-link { color: #2563eb; } .se-link i { display: inline-flex; width: 1.1em; height: 1.1em; } .se-link i svg { width: 100%; height: 100%; }
.se-poll { width: 62%; white-space: normal; border-radius: 14px; background: #fff; color: #111; box-shadow: 0 8px 24px rgba(0,0,0,.28); overflow: hidden; }
.se-poll .sp-q { padding: .8em .9em .5em; font-weight: 800; text-align: center; line-height: 1.5; }
.se-poll .sp-opts { display: flex; border-top: 1px solid #eee; }
.se-poll .sp-o { position: relative; flex: 1; padding: .9em .4em; border: 0; background: none; font: inherit; font-weight: 800; color: #2563eb; overflow: hidden; cursor: pointer; }
.se-poll .sp-o + .sp-o { border-inline-start: 1px solid #eee; color: #e4405f; }
.se-poll .sp-o i { position: absolute; inset: 0 auto 0 0; background: rgba(37,99,235,.14); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.se-poll .sp-o + .sp-o i { background: rgba(228,64,95,.14); }
.se-poll .sp-o span, .se-poll .sp-o b { position: relative; display: block; }
.se-poll .sp-o b { font-size: .85em; color: #333; margin-top: .15em; }
.se-poll .sp-o.mine { box-shadow: inset 0 -3px 0 currentColor; }

/* the editor */
.story-creator.sx { align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; }
.story-creator.sx.open { opacity: 1; }
.sx-frame { position: relative; overflow: hidden; border-radius: 14px; background: #111; }
.sx-bg { position: absolute; inset: 0; overflow: hidden; }
.sx-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-blur { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(32px) brightness(.75); opacity: 0; transition: opacity .2s; }
.story-creator.fit .sx-blur { opacity: 1; }
.sx-draw { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; pointer-events: none; z-index: 2; }
.story-creator.drawing .sx-draw { pointer-events: auto; }
.story-creator.drawing .sx-els { pointer-events: none; opacity: .6; }
.sx-els { position: absolute; inset: 0; z-index: 3; }
.sx-hint { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.8); font-size: 22px; font-weight: 700; pointer-events: none; z-index: 1; }
.sx-bin { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%) scale(.6); width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s, transform .15s, background .15s; z-index: 4; pointer-events: none; }
.sx-bin svg { width: 24px; height: 24px; }
.story-creator.dragging .sx-bin { opacity: 1; transform: translateX(-50%) scale(1); }
.sx-bin.hot { background: #e0455a; border-color: #e0455a; transform: translateX(-50%) scale(1.15) !important; }
.se.to-bin { opacity: .45; }
.sx-top { position: absolute; top: calc(var(--sat) + 10px); left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
.sx-tools { display: flex; gap: 8px; }
.sx-ic { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(0,0,0,.42); color: #fff; display: grid; place-items: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: inherit; font-weight: 800; font-size: 17px; }
.sx-ic svg { width: 21px; height: 21px; }
.story-creator.drawing .sx-tools, .story-creator.drawing .sx-bottom { opacity: 0; pointer-events: none; }
.sx-drawbar { position: absolute; top: calc(var(--sat) + 10px); left: 10px; right: 10px; display: flex; align-items: center; gap: 8px; z-index: 6; }
.sx-brushes { flex: 1; display: flex; justify-content: center; gap: 6px; }
.sx-brushes button { padding: 7px 12px; border-radius: 999px; border: 0; background: rgba(0,0,0,.45); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; }
.sx-brushes button.on { background: #fff; color: #111; }
.sx-done { padding: 9px 16px; border-radius: 999px; border: 0; background: #fff; color: #111; font: inherit; font-weight: 800; font-size: 13px; }
.sx-colors { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 84px); display: flex; gap: 9px; justify-content: center; padding: 0 12px; overflow-x: auto; scrollbar-width: none; z-index: 6; }
.sx-colors::-webkit-scrollbar { display: none; }
.sx-colors button, .sx-bgs button { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); transition: transform .15s; }
.sx-colors button.on, .sx-bgs button.on { transform: scale(1.2); border-color: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
.sx-size { position: absolute; left: 6px; top: 30%; height: 34%; width: 28px; writing-mode: vertical-lr; direction: rtl; z-index: 6; accent-color: #fff; }
.sx-bgs { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 84px); display: flex; gap: 9px; justify-content: center; padding: 0 12px; overflow-x: auto; scrollbar-width: none; z-index: 5; }
.story-creator.drawing .sx-bgs { display: none; }
.sx-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; justify-content: space-between; padding: 12px 12px calc(14px + var(--sab)); z-index: 5; background: linear-gradient(to top, rgba(0,0,0,.45), transparent); }
.sx-aud, .sx-pub { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 999px; border: 0; font: inherit; font-weight: 800; font-size: 14px; }
.sx-aud { background: rgba(0,0,0,.5); color: #fff; backdrop-filter: blur(8px); }
.sx-pub { background: #fff; color: #111; }
.sx-pub .avatar.xs { width: 26px; height: 26px; font-size: 12px; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; background: var(--accent-soft); }
.sx-pub .avatar.xs img { width: 100%; height: 100%; object-fit: cover; }
.sx-aud:disabled, .sx-pub:disabled { opacity: .55; }
.story-creator .up-ring { position: absolute; z-index: 8; }
.sx-edit { position: absolute; inset: 0; z-index: 9; background: rgba(0,0,0,.55); display: flex; flex-direction: column; animation: ds-fade .15s ease; }
.sxe-top { display: flex; align-items: center; gap: 6px; padding: calc(var(--sat) + 10px) 10px 8px; }
.sxe-fonts { flex: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.sxe-fonts button { flex: 0 0 auto; padding: 7px 13px; border-radius: 999px; border: 0; background: rgba(255,255,255,.2); color: #fff; font: inherit; font-size: 13px; font-weight: 700; }
.sxe-fonts button.on { background: #fff; color: #111; }
.sxe-fonts .f-hand { text-shadow: 0 0 6px #22d3ee; } .sxe-fonts .f-mono { font-family: ui-monospace, Menlo, monospace; }
.sxe-mid { flex: 1; position: relative; display: grid; place-items: center; }
.sxe-mid .sxe-live { position: static; transform: none; max-width: 88%; cursor: text; }
.sxe-mid .sxe-live span { outline: none; display: inline-block; min-width: 1ch; caret-color: #fff; }
.sxe-sz { position: absolute; left: 8px; top: 28%; height: 36%; width: 28px; writing-mode: vertical-lr; direction: rtl; accent-color: #fff; }
.sx-edit .sx-colors { position: static; padding: 10px 12px calc(14px + var(--sab)); }
.sx-stk-row { display: flex; gap: 8px; margin-bottom: 14px; }
.sx-stk-b { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 48px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: 14px; }
.sx-stk-b:nth-child(1) b { color: #e4405f; } .sx-stk-b:nth-child(2) { color: #2563eb; } .sx-stk-b:nth-child(3) b { color: #7c3aed; }
.sx-stk-b i { display: inline-flex; width: 18px; height: 18px; } .sx-stk-b i svg { width: 100%; height: 100%; }
.sx-emo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.sx-emo button { font-size: 32px; padding: 6px 0; border: 0; background: none; border-radius: 12px; transition: transform .12s; }
.sx-emo button:active { transform: scale(1.3); }

/* the viewer */
#storyViewer.svx { display: block; background: #000; opacity: 0; transition: opacity .2s; }
#storyViewer.svx.open { opacity: var(--fade, 1); }
.svx-stage { position: absolute; inset: 0; perspective: 1400px; overflow: hidden; }
.svx-page { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; transition: transform .18s ease; will-change: transform; }
.svx-frame { position: relative; overflow: hidden; border-radius: 12px; background: #111; }
.svx-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.svx-media > img, .svx-media > video { width: 100%; height: 100%; object-fit: cover; animation: sv-in .25s ease; }
.svx-media .sv-text { position: absolute; inset: 0; }
.svx-els { position: absolute; inset: 0; z-index: 2; }
.svx-els .se { pointer-events: none; } .svx-els .se-chip, .svx-els .se-poll { pointer-events: auto; }
.svx-shade-t, .svx-shade-b { position: absolute; left: 0; right: 0; height: 18%; pointer-events: none; z-index: 1; }
.svx-shade-t { top: 0; background: linear-gradient(rgba(0,0,0,.42), transparent); }
.svx-shade-b { bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,.42)); }
#storyViewer.svx .sv-progress { position: absolute; top: 0; left: 0; right: 0; z-index: 4; }
#storyViewer.svx .sv-head { position: absolute; top: calc(var(--sat) + 18px); left: 0; right: 0; z-index: 4; direction: rtl; }
#storyViewer.svx .sv-author { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; border: 0; background: none; color: #fff; font: inherit; text-align: right; padding: 0; }
#storyViewer.svx .sv-author .sv-meta { display: flex; flex-direction: column; min-width: 0; }
#storyViewer.svx .sv-author .sv-uname { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#storyViewer.svx .sv-author .sv-time { font-size: 11.5px; opacity: .8; }
#storyViewer.svx .sv-icon { border: 0; background: none; }
#storyViewer.svx .sv-icon svg { width: 22px; height: 22px; }
.sv-close-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: #16a34a; color: #fff; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.sv-close-chip svg { width: 11px; height: 11px; }
#storyViewer.svx .sv-caption { position: absolute; left: 0; right: 0; bottom: calc(120px + var(--sab)); z-index: 4; background: none; text-shadow: 0 1px 6px rgba(0,0,0,.6); direction: rtl; }
#storyViewer.svx .sv-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; direction: rtl; }
#storyViewer.svx .sv-heart-btn svg { width: 26px; height: 26px; }
#storyViewer.svx .sv-heart-btn.on { color: #ff3040; } #storyViewer.svx .sv-heart-btn.on svg { fill: currentColor; }
#storyViewer.svx .sv-send { display: grid; place-items: center; border: 0; } #storyViewer.svx .sv-send svg { width: 19px; height: 19px; }
#storyViewer.svx .sv-burst { z-index: 3; }
#storyViewer.svx .ss-title { display: flex; align-items: center; gap: 6px; justify-content: center; }
.ss-vote { color: var(--text-2); font-size: 11.5px; margin-inline-start: 6px; }
/* the cube between two people */
.svx-page.cube-out-next { transform-origin: left center; animation: cube-out-next .42s cubic-bezier(.4,.1,.3,1) forwards; }
.svx-page.cube-in-next { transform-origin: right center; animation: cube-in-next .42s cubic-bezier(.4,.1,.3,1) both; }
.svx-page.cube-out-prev { transform-origin: right center; animation: cube-out-prev .42s cubic-bezier(.4,.1,.3,1) forwards; }
.svx-page.cube-in-prev { transform-origin: left center; animation: cube-in-prev .42s cubic-bezier(.4,.1,.3,1) both; }
@keyframes cube-out-next { to { transform: translateX(-100%) rotateY(-90deg); filter: brightness(.45); } }
@keyframes cube-in-next { from { transform: translateX(100%) rotateY(90deg); filter: brightness(.45); } to { transform: none; filter: none; } }
@keyframes cube-out-prev { to { transform: translateX(100%) rotateY(90deg); filter: brightness(.45); } }
@keyframes cube-in-prev { from { transform: translateX(-100%) rotateY(-90deg); filter: brightness(.45); } to { transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .svx-page[class*="cube-"] { animation: none !important; } }

/* highlights on a profile */
.pf-hl:empty { display: none; }
.hl-row { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 10px; scrollbar-width: none; }
.hl-row::-webkit-scrollbar { display: none; }
.hl-it { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; width: 68px; border: 0; background: none; color: var(--text); font: inherit; }
.hl-ring { width: 64px; height: 64px; border-radius: 50%; padding: 2.5px; border: 1.5px solid var(--border); display: block; }
.hl-cov { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--panel-2) center / cover no-repeat; }
.hl-t { font-size: 11.5px; max-width: 68px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#storyViewer.svx .svx-frame { direction: rtl; }   /* the old viewer was ltr: a poll's options came out mirrored */

/* ── LEAD FIXES (round 5) ─────────────────────────────────────────────────────────────────────── */
/* Android's Back key counts as a keyboard press, so the button tapped last then showed its keyboard-
   focus ring — a purple circle around the globe. On a touch screen that ring only ever looks broken. */
@media (hover: none) and (pointer: coarse) { :focus-visible { outline: none !important; } }
.sw-core:focus-visible { outline: none; }
/* the home tiles give a little room to the globe (it takes whatever height is left) */
.home-hero.flat .qa-grid .shop-qa { padding: 5px 4px; gap: 3px; border-radius: 14px; font-size: 10.5px; }
.home-hero.flat .qa-grid .shop-qa .qa-ic { width: 26px; height: 26px; border-radius: 9px; }
.home-hero.flat .qa-grid .shop-qa .qa-ic svg { width: 17px; height: 17px; }
/* the jump highlight spanned 100vw past both edges, which made #messages wider than the screen —
   and Android then scrolled the whole thread sideways during the jump. The row is full width already. */
#messages > .msg.ui-flash::before { inset: -2px calc(-1 * var(--chat-gutter, var(--sp-3))); }   /* edge to edge, inside the padding */
#messages { overscroll-behavior-x: none; }

/* ── CALLS: voice ⇄ video mid-call (camera hint) ───────────────────────────────────────────────── */
/* someone else turned their camera on: our own «دوربین» button pulses for a moment (peerCamStarted) —
   a hint that we can turn ours on too, never a camera turned on for us */
@keyframes cam-hint { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 70% { box-shadow: 0 0 0 14px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
#callUI .cbtn.cam-hint { animation: cam-hint 1.3s ease-out 3; }
@media (prefers-reduced-motion: reduce) { #callUI .cbtn.cam-hint { animation: none; box-shadow: 0 0 0 3px rgba(255,255,255,.5); } }

/* ===== «ترتیبِ پیام‌های شروع» (admin start-flow sheet — adminStartFlowSheet in app.js) ===== */
.sf-sec { margin: 16px 0 8px; font-size: 12.5px; font-weight: 800; color: var(--accent); }
.sf-row { margin-bottom: 8px; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel-2); transition: opacity var(--dur, .2s); }
.sf-row.off { opacity: .55; }
.sf-head { display: flex; align-items: center; gap: 10px; }
.sf-n { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800; }
.sf-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sf-tx b { font-size: 14px; }
.sf-tx small { font-size: 11.5px; line-height: 1.8; color: var(--text-2); }
.sf-mv { flex: 0 0 auto; display: flex; flex-direction: row; gap: 6px; }
.sf-mv .pa-mv { width: 40px; height: 40px; }   /* side by side at a thumb's size (was 32×24 stacked: the wrong arrow got hit) */
.sf-lock { flex: 0 0 auto; padding: 4px 9px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 800; white-space: nowrap; }
.sf-extra { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 8px; }
.sf-extra .btn.small { align-self: flex-start; min-height: 32px; padding: 4px 12px; }
.sf-ck { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.sf-ck input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--accent); }
.sf-num { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.sf-num input { width: 76px; flex: 0 0 auto; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel, var(--bg)); color: var(--text); font: inherit; text-align: center; }
.sf-num.wide { flex-direction: column; align-items: stretch; }
.sf-num.wide input { width: 100%; }
.sf-nums { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--panel-2); }
.sf-note { font-size: 11px; line-height: 1.8; color: var(--text-2); }
/* ===== end «ترتیبِ پیام‌های شروع» ===== */

/* ===== ACTIVITY LOG — the admin's «لاگِ فعالیت» / «آخرین فعالیت‌ها» sheet (adminActivitySheet, server/activity.js) ===== */
.actv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.actv-back { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--panel-2); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.actv-back svg { width: 18px; height: 18px; }
.actv-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.actv-title b { font-size: var(--fs-lg); font-weight: 700; }
.actv-title span { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actv-copy { flex: 0 0 auto; border: none; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-pill); padding: 6px 12px; font-family: inherit; font-size: 12px; cursor: pointer; }
.actv-cats { margin-bottom: 4px; }
.actv-list { display: flex; flex-direction: column; }
.actv-day { position: sticky; top: 0; z-index: 1; text-align: center; padding: 10px 0 6px; pointer-events: none; }
.actv-day span { display: inline-block; background: var(--panel-2); color: var(--text-2); font-size: 11.5px; padding: 3px 12px; border-radius: var(--r-pill); box-shadow: 0 1px 0 var(--border); }
.actv-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--border); }
.actv-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 16px; line-height: 1; background: var(--panel-2); }
.actv-row.c-auth .actv-ic { background: rgba(55, 138, 221, .14); }
.actv-row.c-money .actv-ic { background: rgba(95, 193, 137, .17); }
.actv-row.c-svc .actv-ic { background: rgba(124, 108, 240, .15); }
.actv-row.c-social .actv-ic { background: rgba(239, 159, 39, .16); }
.actv-row.c-admin .actv-ic { background: rgba(237, 129, 144, .17); }
.actv-main { flex: 1; min-width: 0; }
.actv-text { font-size: 13.5px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.actv-meta { font-size: 11.5px; color: var(--text-2); margin-top: 1px; }
.actv-user { border: none; background: var(--accent-soft); color: var(--accent); font-family: inherit; font-size: 12px; font-weight: 600; border-radius: var(--r-pill); padding: 1px 9px; margin-left: 6px; cursor: pointer; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: 1px; }
.actv-more { display: flex; justify-content: center; align-items: center; min-height: 34px; padding: 12px 0 4px; }
.actv-end { font-size: 11.5px; color: var(--text-2); }
.actv-empty { color: var(--text-2); font-size: 13px; padding: 22px 0; text-align: center; }
.actv-keep { text-align: center; font-size: 11.5px; color: var(--text-2); padding: 4px 0 2px; }
.actv-keep:empty { display: none; }
.actv-keep select { font-family: inherit; font-size: 11.5px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 2px 6px; margin: 0 4px; }

/* ============================================================================
   STORIES POLISH (2.0) — public/js/stories.js: the row, the peek, the viewer, the editor, highlights
   (owner: stories. Everything here is scoped to story classes; the older story rules above stay.)
   ============================================================================ */
/* --- the row: Instagram's ring, a turning arc while my story goes up, a red «!» if it did not --- */
:root { --ig-ring: linear-gradient(45deg, #ffd600 0%, #ff7a00 25%, #ff0069 55%, #d300c5 80%, #7638fa 100%); }
.story-pill.unseen:not(.close) .ring, .story-pill.mine.has .ring { background: var(--ig-ring); }
.story-pill .ring { transition: transform .15s ease; -webkit-touch-callout: none; }
.story-pill:active .ring { transform: scale(.93); }
.story-pill { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.story-pill .sp-upfail { display: none; }
.story-pill.mine.uploading .ring, .story-pill.mine.has.uploading .ring { background: var(--border); }
.story-pill.uploading .ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #ffd600, #ff7a00, #ff0069, #d300c5, #7638fa, rgba(118, 56, 250, 0) 80%); animation: sp-turn 1s linear infinite; will-change: transform; }
.story-pill.uploading .ring .avatar { position: relative; z-index: 1; }
@keyframes sp-turn { to { transform: rotate(1turn); } }
.story-pill.mine.upfail .ring, .story-pill.mine.has.upfail .ring { background: #e0455a; }
.story-pill.upfail .sp-upfail { display: grid; place-items: center; position: absolute; right: -1px; bottom: -1px; z-index: 2; width: 21px; height: 21px; border-radius: 50%; background: #e0455a; color: #fff; font-size: 13px; font-weight: 900; border: 2px solid var(--panel); }
.story-pill.uploading .sp-name { color: var(--text-2); font-size: 10.5px; }
.story-pill.upfail .sp-name { color: #e0455a; font-size: 10.5px; }

/* --- the peek (hold a circle) --- */
.spk { position: fixed; inset: 0; z-index: 135; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .18s ease; }
.spk.open { opacity: 1; }
.spk-card { position: relative; width: min(62vw, 290px); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #111; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); transform: scale(.9); transition: transform .24s cubic-bezier(.2, 1.25, .4, 1); cursor: pointer; }
.spk.open .spk-card { transform: none; }
.spk-media { position: absolute; inset: 0; }
.spk-media img, .spk-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.spk-media .sv-text { font-size: 18px; padding: 18px; }
.spk-head { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px 18px; color: #fff; direction: rtl; font-size: 13px; background: linear-gradient(rgba(0, 0, 0, .5), transparent); }
.spk-head .avatar.sm { width: 28px; height: 28px; font-size: 12px; }
.spk-n { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spk-t { opacity: .8; font-size: 11.5px; flex-shrink: 0; }
.spk-acts { width: min(62vw, 290px); border-radius: 16px; overflow: hidden; background: var(--panel); transform: translateY(12px); transition: transform .24s cubic-bezier(.2, 1.2, .4, 1); }
.spk.open .spk-acts { transform: none; }
.spk-acts button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 16px; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: right; }
.spk-acts button + button { border-top: 1px solid var(--border); }
.spk-acts button:active { background: var(--panel-2); }
.spk-acts svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-2); }

/* --- the viewer: background that clears as the story is dragged down --- */
#storyViewer.svx { transition: opacity .2s ease, background-color .3s ease; }
#storyViewer.svx.vdrag { transition: opacity .2s ease; }   /* its background is set as the finger moves */
#storyViewer .svx-page { transition: none; }
#storyViewer .svx-page.spring { transition: transform .42s cubic-bezier(.2, 1.3, .35, 1); }
#storyViewer .svx-page.spring-out { transition: transform .24s cubic-bezier(.4, 0, .7, 1); }
#storyViewer .svx-page.cube-anim { transition: transform .34s cubic-bezier(.2, .7, .25, 1); }
#storyViewer .svx-page.cube-anim .svx-dim { transition: opacity .34s cubic-bezier(.2, .7, .25, 1); }
#storyViewer .svx-page.cube-live, #storyViewer .svx-page.drag { will-change: transform; }
.svx-dim { position: absolute; inset: 0; z-index: 8; background: #000; opacity: 0; pointer-events: none; }
/* the bars: a transform the compositor runs (WAAPI), never a width */
#storyViewer .sv-progress span i { width: 100%; transform-origin: left center; will-change: transform; }
/* until the media is ready: a shimmer + spinner (after a breath, so a cached picture never flashes it) */
.svx-load { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; overflow: hidden; background: #141414; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.svx-load::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .07) 50%, transparent 70%); transform: translateX(-100%); animation: svx-shim 1.3s ease-in-out infinite; }
@keyframes svx-shim { to { transform: translateX(100%); } }
.svx-page.is-loading .svx-load, .svx-page.is-error .svx-load, .svx-page.cube-in:not(.warm) .svx-load { opacity: 1; transition-delay: .12s; }
.svx-spin { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .22); border-top-color: #fff; animation: svx-rot .8s linear infinite; }
@keyframes svx-rot { to { transform: rotate(1turn); } }
.svx-err { display: none; position: relative; z-index: 1; color: #fff; font-size: 14px; font-weight: 700; direction: rtl; }
.svx-page.is-error .svx-spin { display: none; }
.svx-page.is-error .svx-err { display: block; }
.svx-page.is-error .svx-load::before { animation: none; opacity: 0; }
#storyViewer .svx-media > .svx-m { animation: none; transition: opacity .22s ease; }
#storyViewer .svx-page.is-loading .svx-media > .svx-m { opacity: 0; }
/* a hold hides the chrome, shades included, with a fade */
#storyViewer .svx-shade-t, #storyViewer .svx-shade-b { transition: opacity .25s ease; }
#storyViewer.paused .svx-shade-t, #storyViewer.paused .svx-shade-b { opacity: 0; }
#storyViewer .sv-chrome { transition: opacity .25s ease; }
/* my own story: viewers + «استوریِ تازه» */
#storyViewer .sv-mybar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#storyViewer .sv-new { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font: inherit; font-size: 13px; font-weight: 700; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#storyViewer .sv-new svg { width: 16px; height: 16px; }
/* reactions float up from their button; «ارسال شد»; the speaker; the sound hint */
.sv-float { position: fixed; z-index: 12; margin: -.5em 0 0 -.5em; font-size: 34px; line-height: 1; pointer-events: none; will-change: transform, opacity; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3)); }
.sv-float.still { animation: sv-fadeout .9s ease forwards; }
@keyframes sv-fadeout { 0%, 60% { opacity: 1; } to { opacity: 0; } }
.sv-sent { position: absolute; left: 50%; top: 46%; z-index: 12; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: rgba(20, 20, 20, .8); color: #fff; font-size: 14px; font-weight: 700; direction: rtl; white-space: nowrap; pointer-events: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translate(-50%, -50%); animation: sv-sent 1.6s cubic-bezier(.2, 1.2, .4, 1) forwards; }
.sv-sent i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #22c55e; }
.sv-sent i svg { width: 14px; height: 14px; color: #fff; }
@keyframes sv-sent { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -62%) scale(.96); } }
.sv-sndpop { position: absolute; left: 50%; top: 50%; z-index: 5; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; pointer-events: none; transform: translate(-50%, -50%); animation: sv-pop .9s ease forwards; }
.sv-sndpop svg { width: 34px; height: 34px; }
.sv-sndpop.still { animation: sv-fadeout .9s ease forwards; }
@keyframes sv-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); } }
.sv-mhint { position: absolute; left: 50%; bottom: calc(150px + var(--sab)); z-index: 6; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 0; background: rgba(0, 0, 0, .62); color: #fff; font: inherit; font-size: 13px; font-weight: 700; direction: rtl; white-space: nowrap; transform: translateX(-50%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: ds-fade .25s ease; transition: opacity .3s ease; }
.sv-mhint.out { opacity: 0; }
.sv-mhint svg { width: 18px; height: 18px; flex-shrink: 0; }

/* --- «ساعت» and «سؤال» stickers (editor and viewer) --- */
.se-clock { padding: .32em .55em; border-radius: .35em; line-height: 1.25; font-family: ui-monospace, Menlo, Consolas, Vazirmatn, monospace; font-weight: 800; direction: ltr; }
.se-clock.st-0 { background: #fff; color: #111; }
.se-clock.st-1 { background: rgba(0, 0, 0, .6); color: #fff; }
.se-clock.st-2 { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.se-q { display: flex; flex-direction: column; width: 64%; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); font-family: inherit; white-space: normal; text-align: center; cursor: pointer; direction: rtl; }
.se-q .sq-h { display: block; padding: .85em .9em .75em; background: var(--qbg); color: #fff; font-weight: 800; line-height: 1.45; word-break: break-word; }
.se-q .sq-in { display: block; margin: .6em; padding: .7em .6em; border-radius: .7em; background: #f1f1f4; color: #8a8a92; font-size: .9em; font-weight: 600; }
.se-q .sq-in.has { background: #eaf1ff; color: #2563eb; }
.svx-els .se-q { pointer-events: auto; }
.svq-ov { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: rgba(0, 0, 0, .6); direction: rtl; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .18s ease; }
.svq-ov.open { opacity: 1; }
.svq-card { display: flex; flex-direction: column; width: min(86vw, 340px); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 16px 48px rgba(0, 0, 0, .4); transform: scale(.92); transition: transform .22s cubic-bezier(.2, 1.2, .4, 1); }
.svq-ov.open .svq-card { transform: none; }
.svq-card .sq-h { padding: 16px 16px 14px; background: var(--qbg); color: #fff; font-size: 16px; font-weight: 800; line-height: 1.5; text-align: center; word-break: break-word; }
.svq-card textarea { margin: 12px 12px 0; min-height: 84px; padding: 12px; border: 0; border-radius: 12px; background: #f1f1f4; color: #111; font: inherit; font-size: 16px; line-height: 1.6; resize: none; outline: none; }
.svq-send { margin: 12px; height: 44px; border: 0; border-radius: 12px; background: var(--qbg); color: #fff; font: inherit; font-size: 15px; font-weight: 800; transition: opacity .15s; }
.svq-send:disabled { opacity: .45; }
.svq-send.busy { opacity: .7; }
.svq-note { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .85); font-size: 12.5px; }
.svq-note svg { width: 14px; height: 14px; }

/* --- viewers sheet: tabs with counts --- */
#storyViewer .sv-seen-sheet { touch-action: pan-y; }
#storyViewer .sv-seen-sheet .ss-grab, #storyViewer .ssx-tabs { touch-action: none; }
#storyViewer .sv-seen-sheet .ss-grab { position: relative; }
#storyViewer .sv-seen-sheet .ss-grab::after { content: ''; position: absolute; inset: -12px -80px; }   /* a handle big enough for a thumb */
#storyViewer .sv-seen-sheet.out { animation: ssx-out .2s ease forwards; }
#storyViewer .sv-seen-backdrop.out { animation: sv-fadeout .2s ease forwards; }
@keyframes ssx-out { to { transform: translateY(100%); } }
.ssx-loading { display: grid; place-items: center; padding: 30px 0; }
.ssx-loading .svx-spin { border-color: var(--border); border-top-color: var(--accent); }
.ssx-tabs { position: sticky; top: -8px; z-index: 1; display: flex; gap: 4px; margin: 0 0 10px; padding: 3px; border-radius: 12px; background: var(--panel-2); }
.ssx-tabs button { flex: 1; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 700; transition: background .15s, color .15s; }
.ssx-tabs button b { font-weight: 800; }
.ssx-tabs button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.ssx-row { padding: 8px 4px; }
.ssx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ssx-main b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssx-main small { font-size: 11.5px; color: var(--text-2); }
.ssx-emo { font-size: 20px; }
.ssx-empty { padding: 26px 0; text-align: center; color: var(--text-2); }
.ssx-poll { margin-bottom: 8px; padding: 10px; border-radius: 14px; background: var(--panel-2); }
.ssx-pq { margin-bottom: 8px; font-size: 14px; font-weight: 800; text-align: center; }
.ssx-pbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; margin-top: 6px; padding: 0 12px; border-radius: 10px; overflow: hidden; background: var(--panel); font-size: 13.5px; font-weight: 700; }
.ssx-pbar i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--accent-soft); transition: width .4s ease; }
.ssx-pbar span, .ssx-pbar b { position: relative; }
.ssx-chip { padding: 4px 10px; border-radius: 999px; background: rgba(37, 99, 235, .12); color: #2563eb; font-size: 12px; font-weight: 700; }
.ssx-chip.c1 { background: rgba(228, 64, 95, .12); color: #e4405f; }
.ssx-ans { padding: 10px 2px; border-bottom: 1px solid var(--border); }
.ssx-ah { display: flex; align-items: center; gap: 8px; }
.ssx-ah b { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.ssx-ah small { color: var(--text-2); font-size: 11.5px; }
.ssx-at { margin: 8px 0 6px; padding: 10px 12px; border-radius: 14px; background: var(--panel-2); font-size: 14.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.ssx-at.locked { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; }
.ssx-at.locked svg { width: 15px; height: 15px; }
.ssx-aa { display: flex; gap: 14px; }
.ssx-aa button { padding: 4px 2px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; }
.ssx-aa .danger { color: var(--danger); }

/* --- the editor: filters, centre guides, the spectrum, text controls, the busy «انتشار» --- */
.sx-frame { touch-action: none; }
.sx-bg { transition: filter .2s ease; }
.sx-tint { position: absolute; inset: 0; opacity: 0; mix-blend-mode: soft-light; pointer-events: none; transition: opacity .2s ease, background-color .2s ease; }
.sx-guide { position: absolute; z-index: 4; pointer-events: none; opacity: 0; background: #22d3ee; box-shadow: 0 0 4px rgba(34, 211, 238, .6); transition: opacity .12s ease; }
.sx-guide.v { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.sx-guide.h { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.sx-guide.on { opacity: .95; }
.sx-flabel { position: absolute; left: 50%; top: 42%; z-index: 4; width: max-content; max-width: 86%; color: #fff; font-size: 22px; font-weight: 800; line-height: 1.5; text-align: center; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); pointer-events: none; opacity: 0; transform: translate(-50%, -50%); }
.sx-flabel.go { animation: sx-flabel 1.5s ease forwards; }
@keyframes sx-flabel { 0% { opacity: 0; transform: translate(-50%, -40%); } 15%, 70% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }
.sx-cpick { position: relative; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); background: conic-gradient(#ff0040, #ffd600, #22c55e, #22d3ee, #3d5bff, #d300c5, #ff0040); transition: transform .15s; }
.sx-cpick::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--pick, #fff); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .2); }
.sx-cpick.on { transform: scale(1.2); border-color: #fff; }
.sx-spec { position: absolute; left: 16px; right: 16px; bottom: calc(var(--sab) + 130px); z-index: 7; height: 34px; border-radius: 17px; direction: ltr; touch-action: none; box-shadow: 0 4px 16px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .8);
  background: linear-gradient(to right, #fff 0 6%, hsl(0 92% 55%) 6%, hsl(60 92% 55%) 20.67%, hsl(120 92% 55%) 35.33%, hsl(180 92% 55%) 50%, hsl(240 92% 55%) 64.67%, hsl(300 92% 55%) 79.33%, hsl(360 92% 55%) 94%, #111 94%); }
.sx-spec i { position: absolute; top: 50%; left: var(--x, 50%); width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; background: var(--pick, transparent); box-shadow: 0 2px 8px rgba(0, 0, 0, .4); transform: translate(-50%, -50%); pointer-events: none; }
.sx-edit .sx-spec { position: relative; left: auto; right: auto; bottom: auto; flex: 0 0 34px; margin: 0 16px 6px; }
.sxe-al svg { width: 20px; height: 20px; }
.sxe-bg b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; border: 2px solid transparent; font-size: 15px; font-weight: 900; transition: background .15s, color .15s; }
.sxe-bg.bg-solid b { background: #fff; color: #111; }
.sxe-bg.bg-soft b { background: rgba(255, 255, 255, .3); }
.sxe-bg.bg-none b { border-color: rgba(255, 255, 255, .7); }
.sxe-szw { position: absolute; left: 4px; top: 24%; z-index: 2; display: flex; justify-content: center; width: 36px; height: 38%; }
.sxe-szw::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 14px; transform: translateX(-50%); border-radius: 4px; background: rgba(255, 255, 255, .35); clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%); pointer-events: none; }
.sxe-szw .sxe-sz { position: relative; left: auto; top: auto; width: 36px; height: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; }
.sxe-szw .sxe-sz::-webkit-slider-runnable-track { background: transparent; }
.sxe-szw .sxe-sz::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.sxe-szw .sxe-sz::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.sx-stk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sx-stk-grid .sx-stk-b { flex: none; }
.sx-stk-b.k-q b { color: #d300c5; }
.sx-stk-b.k-clock b { color: var(--text); font-family: ui-monospace, Menlo, Consolas, monospace; }
.sxq-cols { display: flex; justify-content: center; gap: 10px; margin: 4px 0 14px; }
.sxq-cols button { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; box-shadow: 0 0 0 1px var(--border); }
.sxq-cols button.on { border-color: var(--panel); box-shadow: 0 0 0 2px var(--accent); }
.sx-pub-spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .2); border-top-color: #111; animation: svx-rot .7s linear infinite; }
.sx-pub.busy .sx-pub-spin { display: inline-block; }

/* --- highlights: «جدید», the pickers, the order --- */
.st-hl { margin: 2px 14px 8px; }
.hl-it { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.hl-it:active .hl-ring { transform: scale(.94); }
.hl-ring { transition: transform .15s ease; }
.hl-new .hl-cov { display: grid; place-items: center; color: var(--text); }
.hl-new .hl-cov svg { width: 26px; height: 26px; }
.hlp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; max-height: 56vh; margin-bottom: 12px; overflow-y: auto; border-radius: 12px; }
.hlp-it { position: relative; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #111; }
.hlp-it img, .hlp-it video { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .15s; }
.hlp-txt { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.hlp-ck { position: absolute; top: 6px; left: 6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, .25); color: #fff; font-size: 12px; font-style: normal; font-weight: 800; }
.hlp-it.on .hlp-ck { background: var(--accent); border-color: var(--accent); }
.hlp-it.on img, .hlp-it.on video { opacity: .7; }
.hlp-it small { position: absolute; bottom: 4px; right: 6px; color: #fff; font-size: 10.5px; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.hlp-covers { display: flex; gap: 10px; padding: 4px 2px 8px; overflow-x: auto; scrollbar-width: none; }
.hlp-covers::-webkit-scrollbar { display: none; }
.hlp-cov { flex: 0 0 auto; width: 66px; height: 66px; padding: 0; border: 3px solid transparent; border-radius: 50%; overflow: hidden; background: var(--panel-2); color: var(--text-2); box-shadow: 0 0 0 1px var(--border); }
.hlp-cov img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.hlp-cov.on { border-color: var(--panel); box-shadow: 0 0 0 2.5px var(--accent); }
.hlp-gal { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; }
.hlp-gal svg { width: 22px; height: 22px; }
.hlp-gal small { font-size: 10px; }
.hlp-gal.busy { opacity: .5; pointer-events: none; }
.hlo-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--border); }
.hlo-row b { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.hlo-row button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--text); }
.hlo-row button:disabled { opacity: .35; }
.hlo-row button svg { width: 18px; height: 18px; }
.hl-cov.hlo-cov { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; color: #16a34a; }
.hlo-cov svg { width: 18px; height: 18px; }

/* --- less motion, when asked for --- */
@media (prefers-reduced-motion: reduce) {
  .story-pill.uploading .ring::before { animation-duration: 3s; }
  .svx-load::before { animation: none; }
  .svx-spin, .sx-pub-spin { animation-duration: 1.6s; }
  #storyViewer .svx-page.spring, #storyViewer .svx-page.spring-out, #storyViewer .svx-page.cube-anim { transition: none !important; }
  .sv-sent { animation: sv-fadeout 1.6s ease forwards; transform: translate(-50%, -50%); }
  .sv-sndpop { animation: sv-fadeout .9s ease forwards; }
  .spk, .spk-card, .spk-acts, .svq-ov, .svq-card, .sx-bg, .sx-tint { transition: none; }
  .sx-flabel.go { animation: sv-fadeout 1.5s ease forwards; }
  .story-pill:active .ring, .hl-it:active .hl-ring { transform: none; }
}

/* ═══════════ SERVICES SHELF — purchase form, order queue, card editor (svcshop) ═══════════ */
/* the purchase sheet */
.svx-eta { display: inline-flex; align-items: center; gap: 6px; margin: -2px 0 12px; padding: 6px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700;
  color: var(--t1, var(--accent)); background: color-mix(in srgb, var(--t1, var(--accent)) 11%, transparent); }
.svx-eta svg { width: 15px; height: 15px; flex: 0 0 auto; }
.svo-badge { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: var(--r-pill); font-style: normal; font-size: 10px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--t1), var(--t2)); vertical-align: 1px; }
.svo-tx small.svo-left { color: #D97706; font-weight: 700; }
.svo.soldout { opacity: .55; cursor: default; }
.svo.soldout .svo-dot { border-style: dashed; }
.svo-pr b.svo-out { color: var(--text-2); font-size: 12.5px; }
.svo.still { animation: none; }
.svqty { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 12px; padding: 7px; padding-inline-start: 13px;
  border-radius: var(--r-md); background: var(--panel-2); font-size: 13.5px; font-weight: 700; }
.svqty-step { display: flex; align-items: center; gap: 4px; }
.svqty-step button { width: 38px; height: 38px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); color: var(--t1, var(--accent));
  font: inherit; font-size: 20px; font-weight: 800; line-height: 1; display: grid; place-items: center; }
.svqty-step button:disabled { opacity: .35; }
.svqty-step b { min-width: 34px; text-align: center; font-size: 16px; }
.svf label { display: flex; align-items: baseline; gap: 4px; }
.svf-req { color: var(--danger); font-style: normal; font-weight: 800; }
.svf-opt { font-size: 10.5px; color: var(--text-2); font-weight: 400; margin-inline-start: 4px; opacity: .85; }
.svf-help { font-size: 11px; color: var(--text-2); line-height: 1.7; margin-top: -3px; }
.svf-err { font-size: 11.5px; color: var(--danger); }
.svf-err:empty { display: none; }
.svf.bad input, .svf.bad textarea { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
.svf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.svf-chip { padding: 8px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; font-weight: 600;
  transition: border-color var(--dur), background var(--dur), color var(--dur); }
.svf-chip.on { border-color: var(--t1, var(--accent)); background: color-mix(in srgb, var(--t1, var(--accent)) 10%, var(--panel)); color: var(--t1, var(--accent)); }
.svf.bad .svf-chip { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.svx .btn.svb-buy:disabled { opacity: .55; }
.svb-none { padding: 14px; }
.svb-tu { color: var(--accent); cursor: pointer; font-weight: 700; }
/* an order — the customer's list and the admin queue */
.so-card.st-progress { border-color: color-mix(in srgb, #2F7CF6 45%, var(--border)); }
.so-qty { color: var(--accent); font-weight: 800; }
.so-no { font-weight: 800; color: var(--text); }
.so-steps { display: flex; gap: 5px; margin-top: 10px; }
.so-steps span { flex: 1; position: relative; padding-top: 9px; font-size: 10.5px; color: var(--text-2); text-align: center; }
.so-steps span::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 4px; background: var(--border); }
.so-steps span.on { color: var(--text); font-weight: 700; }
.so-steps span.on::before { background: #2F7CF6; }
.so-steps.s3 span.on::before { background: #12A96F; }
.so-fields { margin-top: 8px; border-radius: 10px; background: var(--panel-2); padding: 2px 10px; }
.so-fv { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.so-fv:last-child { border-bottom: 0; }
.so-fv small { flex: 0 0 auto; max-width: 40%; color: var(--text-2); font-size: 11px; }
.so-fv span { flex: 1; min-width: 0; word-break: break-word; white-space: pre-wrap; user-select: text; -webkit-user-select: text; }
.so-fv .so-copy { flex: 0 0 auto; }
.so-notes { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.so-note { max-width: 88%; padding: 7px 11px; border-radius: 14px; font-size: 12.5px; }
.so-note small { display: block; font-size: 10px; color: var(--text-2); margin-bottom: 2px; }
.so-note p { margin: 0; white-space: pre-wrap; word-break: break-word; line-height: 1.8; }
.so-note.shop { align-self: flex-start; background: color-mix(in srgb, var(--accent) 10%, var(--panel-2)); border-start-start-radius: 4px; }
.so-note.cust { align-self: flex-end; background: var(--panel-2); border-start-end-radius: 4px; }
.so-note.priv { background: color-mix(in srgb, #C98A00 12%, var(--panel-2)); border: 1px dashed color-mix(in srgb, #C98A00 45%, transparent); }
.so-acts { flex-wrap: wrap; }
.so-acts .so-msg { display: inline-flex; align-items: center; gap: 5px; }
.so-acts .so-msg svg { width: 15px; height: 15px; }
.so-compose { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.so-compose.hidden { display: none; }
.so-compose textarea { width: 100%; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; padding: 8px 10px; resize: vertical; }
.so-compose-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.so-compose-row .btn { width: auto; }
.so-priv { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12px; color: var(--text-2); background: none; border: 0; padding: 0; }
.so-priv .switch { transform: scale(.82); }
.so-priv.on { color: var(--chip-warn-text); font-weight: 700; }
/* the queue's filters */
.so-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 4px 0 10px; padding: 2px 0; }
.so-chips::-webkit-scrollbar { display: none; }
.so-chip { flex: 0 0 auto; padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.so-chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.so-chip.on .so-n { background: var(--accent-contrast); color: var(--accent); }
.so-filter { display: flex; gap: 8px; margin-bottom: 10px; }
.so-filter input, .so-filter select { height: 40px; min-width: 0; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; padding: 0 10px; }
.so-filter input { flex: 1 1 60%; }
.so-filter select { flex: 1 1 40%; }
/* the card editor — the list */
.sc-rate { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--panel-2); font-size: 12px; line-height: 1.9; margin-bottom: 10px; }
.sc-rate .btn { width: auto; flex: 0 0 auto; }
.btn.sc-new { margin-bottom: 12px; }
.sc-row { display: flex; align-items: center; gap: 8px; padding: 8px 2px; border-bottom: 1px solid var(--border); }
.sc-row:last-child { border-bottom: 0; }
.sc-row.off .sc-main { opacity: .55; }
.sc-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px 0; font: inherit; color: var(--text); text-align: right; }
.sc-row .sc-ic { width: 40px; height: 40px; border-radius: 13px; flex: 0 0 auto; display: grid; place-items: center; font-size: 21px; color: #fff; overflow: hidden; background: linear-gradient(135deg, var(--t1), var(--t2)); }
.sc-row .sc-ic img { width: 100%; height: 100%; object-fit: cover; }
.sc-tx { flex: 1; min-width: 0; }
.sc-tx b { display: block; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-tx small { display: block; font-size: 11.5px; color: var(--text-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-warn { color: var(--danger); font-style: normal; font-weight: 700; }
/* templates */
.sct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sct { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 12px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--panel);
  font: inherit; color: var(--text); text-align: right; transition: transform .12s var(--ease), border-color var(--dur); }
.sct:active { transform: scale(.97); }
.sct:hover { border-color: var(--accent); }
.sct-ic { font-size: 26px; margin-bottom: 2px; }
.sct b { font-size: 14px; }
.sct small { font-size: 11px; color: var(--text-2); line-height: 1.6; }
.sct:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* one card */
.scx-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 6px; }
.scx-back { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; padding: 4px 0; }
.scx-back svg { width: 18px; height: 18px; }
.sc-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2); }
.sc-stat svg { width: 14px; height: 14px; }
.sc-stat.ok { color: #12A96F; }
.sc-stat.err { color: var(--danger); }
.sc-stat.noname { color: #D97706; }
.sc-stat button { background: none; border: 0; color: var(--accent); font: inherit; font-weight: 800; padding: 0 2px; }
.sc-stat.wait i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: sc-pulse 1s ease-in-out infinite; }
@keyframes sc-pulse { 50% { opacity: .25; } }
.scx-hidden { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-md); font-size: 12px; line-height: 1.7; color: var(--chip-warn-text);
  background: var(--chip-warn-bg); margin-bottom: 10px; }
.scx-hidden.hidden { display: none; }
.scx-hidden svg { width: 17px; height: 17px; flex: 0 0 auto; }
.scp { margin-bottom: 4px; }
.scp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.scp-head .seg-pick { flex: 1; }
.scp-big { flex: 0 0 auto; background: none; border: 0; color: var(--accent); font: inherit; font-size: 12px; font-weight: 700; padding: 4px 2px; }
.scp-body { max-height: 380px; overflow-y: auto; border-radius: var(--r-lg); border: 1px dashed var(--border); padding: 12px; background: var(--panel); overscroll-behavior: contain; }
.scp-note { font-size: 11px; color: var(--text-2); text-align: center; margin-top: 6px; }
.scp-grid { grid-template-columns: minmax(0, 210px); justify-content: center; padding: 4px 0; }
.svx-pv { pointer-events: none; }
.svx-pv .svc-card, .scp-body .svc-card, .svx-pv .svo { animation: none; }
.scx-sec { margin: 14px 0; padding: 14px; border-radius: var(--r-lg); background: var(--panel-2); }
.scx-sec[hidden] { display: none; }
.scx-sec h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 800; margin: 0 0 10px; }
.scx-sec .field input, .scx-sec .field textarea, .scx-sec .field select { background: var(--panel); }
.scx-sec .field:last-child { margin-bottom: 0; }
.scx .field label small { font-weight: 400; opacity: .8; margin-inline-start: 5px; }
.scx-sec .seg-pick { background: var(--panel); }
.scx-sec .seg-pick button.on { background: var(--accent-soft); }
.sc-modes { display: flex; flex-direction: column; gap: 8px; }
.sc-mode { --t1: var(--accent); display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--r-md); border: 1.5px solid var(--border); background: var(--panel);
  font: inherit; color: var(--text); text-align: right; transition: border-color var(--dur), background var(--dur); }
.sc-mode b { display: block; font-size: 13.5px; }
.sc-mode small { display: block; font-size: 11px; color: var(--text-2); margin-top: 2px; line-height: 1.6; }
.sc-mode.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.sc-mode.on .svo-dot { border-color: var(--accent); }
.sc-mode.on .svo-dot::after { transform: scale(1); }
.sc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.sc-quick > span { font-size: 11.5px; color: var(--text-2); }
.sco-chip { padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel); color: var(--text-2); font: inherit; font-size: 11.5px; font-weight: 700; }
.sco-chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.sc-empty { font-size: 12px; color: var(--text-2); text-align: center; padding: 12px; border: 1px dashed var(--border); border-radius: var(--r-md); margin-bottom: 8px; background: var(--panel); }
.btn.sc-add { width: 100%; margin-top: 2px; }
.sco, .scf { padding: 11px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--border); margin-bottom: 8px; display: flex; flex-direction: column; gap: 8px; }
.sco.off { opacity: .6; }
.sco input, .scf input, .scf textarea, .scf select { width: 100%; min-width: 0; height: 40px; border-radius: 11px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; padding: 0 10px; }
.scf textarea { height: auto; padding: 8px 10px; resize: vertical; }
.sco input:focus, .scf input:focus, .scf textarea:focus, .scf select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.sco-top, .scf-top { display: flex; align-items: center; gap: 8px; }
.sco-top input, .scf-top input { flex: 1; font-weight: 700; }
.scf-top select { flex: 0 0 128px; width: 128px; }
.sco-price { display: flex; align-items: center; gap: 8px; }
.sco-cur { flex: 0 0 auto; padding: 3px; }
.sco-cur button { padding: 7px 10px; font-size: 12px; white-space: nowrap; }
.sco-price input { flex: 1; font-size: 15px; font-weight: 700; }
.sco-calc { font-size: 11.5px; color: var(--text-2); line-height: 1.8; }
.sco-calc b { color: var(--accent); font-size: 13px; }
.sco-more summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--accent); padding: 2px 0; list-style: none; }
.sco-more summary::-webkit-details-marker { display: none; }
.sco-more summary::before { content: '＋ '; }
.sco-more[open] summary::before { content: '－ '; }
.sco-more-in { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sco-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sco-badge input { flex: 1 1 140px; width: auto; }
.sco-line, .scf-req { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 12.5px; color: var(--text); text-align: right; }
.sco-line small { display: block; font-size: 10.5px; color: var(--text-2); margin-top: 1px; }
.scf-req { width: auto; justify-content: flex-start; gap: 7px; }
.sco-qty { display: flex; gap: 8px; }
.sco-qty label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-2); }
.sco-stock { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.sco-stock span { flex: 1; }
.sco-stock small { display: block; font-size: 10.5px; color: var(--text-2); }
.sco-stock input { flex: 0 0 110px; width: 110px; text-align: center; }
.sco-acts, .scf-acts { display: flex; align-items: center; gap: 6px; }
.sco-acts > span, .scf-acts > span:not(:first-child) { flex: 1; }
.sco-acts .btn, .scf-acts .btn { width: auto; height: 34px; padding: 0 12px; }
.sco-acts .pa-mv, .scf-acts .pa-mv { height: 34px; }
.menu-row.sc-on { margin: 6px 0; border-radius: var(--r-md); background: var(--panel-2); padding: 12px 14px; }
.scx-foot { display: flex; gap: 8px; justify-content: space-between; margin: 10px 0 12px; }
.scx-foot .btn { width: auto; display: inline-flex; align-items: center; gap: 5px; }
/* the full-size preview over the editor */
.ui-confirm.scp-pop { align-items: flex-end; padding: 0; }
.scp-pop-in { position: relative; width: 100%; max-width: 560px; max-height: 88dvh; overflow-y: auto; background: var(--panel); color: var(--text);
  border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 16px 18px calc(18px + var(--sab)); animation: ds-sheet-up .26s cubic-bezier(.2,.8,.2,1); }
.scp-pop-h { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-2); margin-bottom: 12px; }
.scp-pop-h button { background: var(--panel-2); border: 0; border-radius: var(--r-pill); padding: 6px 14px; font: inherit; font-weight: 700; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .scp-pop-in { animation: none; } .sc-stat.wait i { animation: none; } }
/* ═══════════ end SERVICES SHELF ═══════════ */

/* ── Download page (app.js showInstallGate) — simple on purpose: icon, one line, one big button for
   this device, three short steps, quiet links. One centred column on every screen. Gate layer (z 390). */
.dlp-ov { align-items: center; background:
  radial-gradient(600px 360px at 50% -80px, color-mix(in srgb, #6a4bf0 22%, transparent), transparent 70%), var(--bg); }
.dlp { width: min(380px, 100%); margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 18px; text-align: center; }
.dlp-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dlp-icon { width: 76px; height: 76px; border-radius: 22px; overflow: hidden; margin-bottom: 6px; box-shadow: 0 16px 36px -12px rgba(74,60,240,.5); }
.dlp-icon img { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: no-preference) { .dlp-icon { animation: dlp-rise .45s cubic-bezier(.2,.9,.3,1.2) both; } }
@keyframes dlp-rise { from { transform: translateY(8px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.dlp-name { margin: 0; font-size: 24px; font-weight: 900; color: var(--text); }
.dlp-tag { margin: 0; font-size: 14px; line-height: 1.8; color: var(--text-2); }
.dlp-must { padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.8; font-weight: 600; color: var(--text);
  background: color-mix(in srgb, #f5a524 13%, transparent); }
.dlp-cta { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #6a4bf0, #2f7cf6); box-shadow: 0 16px 30px -14px rgba(74,90,246,.75); transition: transform var(--dur) var(--ease); text-align: right; }
.dlp-cta:active { transform: scale(.97); }
.dlp-cta-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.dlp-cta-ic svg { width: 22px; height: 22px; }
.dlp-cta-ic svg [fill="var(--panel)"] { fill: #5a5df3; }
.dlp-cta-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dlp-cta-t b { font-size: 16px; font-weight: 800; }
.dlp-cta-t small { font-size: 11.5px; opacity: .8; }
.dlp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: right; }
.dlp-steps li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.dlp-steps li > i { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font-size: 12px; font-weight: 800; color: #6a4bf0; background: color-mix(in srgb, #6a4bf0 12%, transparent); }
.dlp-steps li > svg { flex: 0 0 auto; width: 20px; height: 20px; color: #2f7cf6; }
.dlp-links { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3, var(--text-2)); }
.dlp-links button { background: none; border: 0; padding: 4px 2px; font: inherit; color: var(--text-2); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--text-2) 40%, transparent); }
.dlp .gate-qr { align-self: center; padding: 12px; }
.dlp-other { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.dlp-other[hidden] { display: none; }
.dlp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel);
  color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.dlp-chip svg { width: 15px; height: 15px; }
.dlp-chip.on { border-color: #6a4bf0; color: #6a4bf0; }
.dlp-look { align-self: center; background: none; border: none; color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; cursor: pointer; }
.dlp .gate-admin { margin-top: -6px; }
.dlp-ov:has(.gate-ios-arrow) { padding-bottom: calc(var(--sab) + 70px); }
.dlp-ov .gate-ios-arrow { z-index: 2; }
.adm-lock { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border-radius: 14px; margin: 4px 0 10px; font-size: 13px; color: var(--text);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.adm-lock small { font-size: 12px; color: var(--text-2); line-height: 1.8; }
.upd-new { margin: 10px 0 2px; font-size: 12.5px; font-weight: 800; color: var(--text); text-align: right; }
/* «راهنمای روز قطعی» (adminRunbookSheet) — long text the owner reads under stress: big lines, clear headings */
.runbook { font-size: 14px; line-height: 2.05; color: var(--text); padding-bottom: 12px; }
.runbook h4 { margin: 16px 0 4px; font-size: 15.5px; font-weight: 800; color: var(--accent); }
.runbook h4:first-child { margin-top: 0; font-size: 17px; color: var(--text); }
.runbook b { font-weight: 800; }

/* ===== PRO: what is left, how it is counted, history, subscribers (pro track, release 2.0) ===== */
.pro-use-f { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pro-use-f > small { font-size: 10.5px; color: var(--text-2); }
.pro-left { font-size: 11.5px; font-weight: 700; color: var(--online); }
.pro-left.none { color: var(--danger); }
.pro-how { margin-top: 10px; border-radius: var(--r-md); background: var(--panel-2); padding: 0 12px; }
.pro-how > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 0; font-size: 12.5px; font-weight: 700; color: var(--text); }
.pro-how > summary::-webkit-details-marker { display: none; }
.pro-how > summary::after { content: '▾'; color: var(--text-2); transition: transform .2s var(--ease); }
.pro-how[open] > summary::after { transform: rotate(180deg); }
.pro-how ul { margin: 0; padding: 0 0 12px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pro-how li { font-size: 12px; line-height: 1.85; color: var(--text-2); }
.pro-how li b { color: var(--text); }
.pro-hist { padding: 4px 12px; }
.pro-hist-r { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 9px 0; font-size: 12.5px; border-bottom: 1px solid var(--border); }
.pro-hist-r:last-child { border-bottom: 0; }
.pro-hist-r > span:nth-child(2) { color: var(--text-2); text-align: end; }
.pro-hist-r > small { grid-column: 1 / -1; font-size: 10.5px; color: var(--text-2); }
.aud-lim-paid { margin-top: 2px; color: var(--text); }
.adm-prosub .adm-q-acts { justify-content: flex-start; }
@media (prefers-reduced-motion: reduce) { .pro-how > summary::after { transition: none; } }
/* ===== end PRO ===== */

/* ===== SERVICES STORE 2 — «خدمات» (public/js/services.js) =====
   The shelf (one big card per row in its brand tone: a soft gradient, layered shadows, a top highlight,
   a press), the sticky category chips + search, a card's sheet (options as cards, the form, the total),
   «سفارش‌های من», an order's page (timeline, the goods with copy buttons, the quote to pay, notes), and
   the admin's card / option / codes / queue pieces. The brand colour comes from .tone-* (--t1/--t2);
   everything else is tokens, so dark mode follows. Phone first (375px), RTL. */
.sv2-body { padding-bottom: calc(24px + var(--sab)); }
.sv2-top { position: sticky; top: 0; z-index: 4; padding: 10px 12px 8px; background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.sv2-bar { display: flex; align-items: center; gap: 8px; }
.sv2-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--panel); border: 1px solid var(--border); color: var(--text-2); box-shadow: 0 1px 2px rgba(20, 24, 60, .05); cursor: text; }
.sv2-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sv2-search > svg { width: 18px; height: 18px; flex: none; }
.sv2-search input { flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none;
  font: inherit; font-size: 14px; color: var(--text); -webkit-appearance: none; appearance: none; }
.sv2-search input::-webkit-search-cancel-button { display: none; }
.sv2-q-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-inline-end: -6px; border-radius: 50%; background: var(--panel-2); color: var(--text-2); }
.sv2-q-x svg { width: 14px; height: 14px; }
.sv2-q-x[hidden] { display: none; }
.sv2-mine { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--panel); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.sv2-mine svg { width: 17px; height: 17px; color: var(--accent); }
.sv2-mine:active { transform: scale(.97); }
.sv2-chips { display: flex; gap: 6px; margin-top: 8px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.sv2-chips::-webkit-scrollbar { display: none; }
.sv2-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 15px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--panel); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.sv2-chip.on { background: var(--text); color: var(--panel); border-color: transparent; box-shadow: 0 6px 14px -8px rgba(20, 24, 60, .5); }
.sv2-list { display: flex; flex-direction: column; gap: 12px; padding: 6px 12px 4px; }
.sv2-sec { margin: 10px 6px -2px; font-size: 12px; font-weight: 800; color: var(--text-2); }
.sv2-sec:first-child { margin-top: 2px; }
/* the card: one per row, its brand tone, a little depth */
.sv2-card { --hi: rgba(255, 255, 255, .7); --gloss: rgba(255, 255, 255, .38);
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 98px; padding: 14px 14px 14px 10px;
  border-radius: 22px; border: 1px solid color-mix(in srgb, var(--t1) 22%, var(--border)); overflow: hidden;
  background: radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--t2) 24%, transparent) 0%, transparent 58%),
    linear-gradient(135deg, color-mix(in srgb, var(--t1) 15%, var(--panel)) 0%, var(--panel) 72%);
  color: var(--text); font: inherit; text-align: right;
  box-shadow: inset 0 1px 0 var(--hi), 0 1px 2px rgba(20, 24, 60, .06), 0 10px 22px -14px color-mix(in srgb, var(--t1) 60%, transparent), 0 24px 40px -30px color-mix(in srgb, var(--t1) 50%, transparent);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease); animation: sv2-in .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 38ms); }
[data-theme="dark"] .sv2-card { --hi: rgba(255, 255, 255, .08); --gloss: rgba(255, 255, 255, .05); }
/* on the dark surface the darker brand colour (slate, violet) is too dim for text: its lighter twin, lifted */
[data-theme="dark"] :is(.sv2-pc b, .sv2-pc.q, .sv2-opt-pr b, .sv2-sum-r.big b, .sv2-qp, .sv2-st, .sv2-ob, .sv2-step button, .sv2-go, .sv2-steps3 i, .sv2-fchip.on) { color: color-mix(in srgb, var(--t2) 72%, white); }
.sv2-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 48%; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--gloss), transparent); }
.sv2-card:active { transform: scale(.975) translateY(1px);
  box-shadow: inset 0 1px 0 var(--hi), 0 1px 2px rgba(20, 24, 60, .08), 0 6px 14px -10px color-mix(in srgb, var(--t1) 60%, transparent); }
.sv2-ghost { position: absolute; left: -12px; bottom: -30px; z-index: -1; display: grid; place-items: center; width: 120px; height: 120px; font-size: 100px; line-height: 1;
  opacity: .1; transform: rotate(-14deg); pointer-events: none; filter: saturate(.7); color: var(--t1); }
.sv2-ghost svg, .sv2-ghost img { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; }
.sv2-ic { flex: none; width: 60px; height: 60px; border-radius: 19px; display: grid; place-items: center; font-size: 30px; line-height: 1; color: #fff; overflow: hidden;
  background: linear-gradient(145deg, var(--t2), var(--t1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -4px 8px rgba(0, 0, 0, .14), 0 10px 18px -8px color-mix(in srgb, var(--t1) 85%, transparent); }
.sv2-ic svg { width: 28px; height: 28px; } .sv2-ic img { width: 100%; height: 100%; object-fit: cover; }
.sv2-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sv2-t { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sv2-t b { min-width: 0; font-size: 15.5px; font-weight: 800; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv2-badge { flex: none; font-style: normal; font-size: 10.5px; font-weight: 800; line-height: 1.6; color: #fff; padding: 1px 9px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--t1) 75%, transparent); }
.sv2-d { font-size: 12px; color: var(--text-2); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sv2-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 4px; }
.sv2-pc { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 11px; border-radius: var(--r-pill); font-size: 11.5px; color: var(--text-2);
  background: color-mix(in srgb, var(--t1) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--t1) 20%, transparent); }
.sv2-pc b { font-size: 13.5px; font-weight: 800; color: var(--t1); }
.sv2-pc.q { color: var(--t1); font-weight: 700; }
.sv2-fast { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; color: var(--chip-ok-text); }
.sv2-fast svg { width: 13px; height: 13px; }
.sv2-go { flex: none; display: flex; color: var(--t1); opacity: .65; } .sv2-go svg { width: 18px; height: 18px; }
.sv2-none { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 36px 16px; text-align: center; }
.sv2-none b { font-size: 15px; } .sv2-none small { font-size: 12.5px; color: var(--text-2); line-height: 1.8; }
.sv2-none.sm { padding: 10px 12px; }
.sv2-other { display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); margin: 12px 12px 8px; padding: 13px 14px; border-radius: 20px;
  background: var(--panel); border: 1.5px dashed var(--border); color: var(--text); text-align: right; font: inherit; }
.sv2-other > span:nth-child(2) { flex: 1; min-width: 0; }
.sv2-other b { display: block; font-size: 13.5px; } .sv2-other small { display: block; font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.sv2-other-ic { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); }
.sv2-other-ic svg { width: 20px; height: 20px; }
.sv2-other .sv2-go { color: var(--text-2); }
@keyframes sv2-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
/* a card's sheet */
.sv2-sh { display: flex; flex-direction: column; }
.sv2-hero { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.sv2-hero-ic { flex: none; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 30px; line-height: 1; color: #fff; overflow: hidden;
  background: linear-gradient(145deg, var(--t2), var(--t1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -4px 8px rgba(0, 0, 0, .14), 0 12px 22px -10px color-mix(in srgb, var(--t1) 85%, transparent); }
.sv2-hero-ic svg { width: 28px; height: 28px; } .sv2-hero-ic img { width: 100%; height: 100%; object-fit: cover; }
.sv2-hero-tx { flex: 1; min-width: 0; }
.sv2-hero-tx b { display: block; font-size: 17px; font-weight: 800; line-height: 1.5; }
.sv2-hero-tx small { display: block; font-size: 12px; color: var(--text-2); line-height: 1.7; }
.sv2-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sv2-facts span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; color: var(--text);
  background: color-mix(in srgb, var(--t1) 9%, var(--panel-2)); }
.sv2-facts svg { width: 14px; height: 14px; color: var(--t1); flex: none; }
.sv2-long { position: relative; margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--panel-2); }
.sv2-long p { margin: 0; font-size: 13.5px; line-height: 2; color: var(--text); white-space: pre-line; }
.sv2-long.clamp p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sv2-more { margin-top: 4px; padding: 2px 0; background: none; border: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.sv2-h { margin: 6px 2px 8px; font-size: 13px; font-weight: 800; color: var(--text); }
.sv2-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.sv2-opt { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 60px; padding: 12px 13px; border-radius: 16px; background: var(--panel);
  border: 1.5px solid var(--border); color: var(--text); font: inherit; text-align: right; animation: sv2-in .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform .12s var(--ease); }
.sv2-opt:active { transform: scale(.985); }
.sv2-opt.on { border-color: var(--t1); background: color-mix(in srgb, var(--t1) 8%, var(--panel)); box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--t1) 80%, transparent); }
.sv2-opt.out { opacity: .55; }
.sv2-radio { flex: none; position: relative; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); transition: border-color var(--dur); }
.sv2-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--t1); transform: scale(0); transition: transform .22s cubic-bezier(.3, 1.5, .5, 1); }
.sv2-opt.on .sv2-radio { border-color: var(--t1); } .sv2-opt.on .sv2-radio::after { transform: scale(1); }
.sv2-opt-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sv2-opt-tx b { font-size: 13.5px; font-weight: 800; line-height: 1.6; }
.sv2-opt-tx small { font-size: 11.5px; color: var(--text-2); line-height: 1.6; }
.sv2-ob { font-style: normal; display: inline-block; vertical-align: 1px; font-size: 10px; font-weight: 800; padding: 1px 8px; border-radius: var(--r-pill); color: var(--t1);
  background: color-mix(in srgb, var(--t1) 14%, transparent); }
.sv2-left { color: var(--chip-warn-text) !important; font-weight: 700; }
.sv2-opt-pr { flex: none; text-align: left; }
.sv2-opt-pr b { display: block; font-size: 15px; font-weight: 800; color: var(--t1); font-variant-numeric: tabular-nums; }
.sv2-opt-pr small { display: block; font-size: 10px; color: var(--text-2); }
.sv2-out { color: var(--text-2) !important; font-size: 12.5px !important; }
.sv2-qty { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 12px; font-size: 13px; font-weight: 700; }
.sv2-step { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: var(--r-pill); background: var(--panel-2); }
.sv2-step button { width: 38px; height: 38px; border-radius: 50%; background: var(--panel); color: var(--t1); font-size: 20px; font-weight: 700; box-shadow: 0 1px 2px rgba(20, 24, 60, .08); }
.sv2-step button:disabled { opacity: .4; }
.sv2-step b { min-width: 32px; text-align: center; font-size: 15px; }
.sv2-fields .sv2-f { margin-bottom: 12px; }
.sv2-f label { display: flex; align-items: center; gap: 6px; }
.sv2-req { font-style: normal; color: var(--danger); font-weight: 800; }
.sv2-opt-l { font-size: 10.5px; color: var(--text-2); padding: 0 7px; border-radius: var(--r-pill); background: var(--panel-2); }
.sv2-help { font-size: 11.5px; color: var(--text-2); line-height: 1.7; }
.sv2-f-err { font-size: 12px; color: var(--danger); }
.sv2-f-err:empty { display: none; }
.sv2-f.bad input, .sv2-f.bad textarea { border-color: var(--danger); }
.sv2-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.sv2-fchip { min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; }
.sv2-fchip.on { border-color: var(--t1); color: var(--t1); background: color-mix(in srgb, var(--t1) 9%, var(--panel)); }
.sv2-sum { margin: 2px 0 10px; padding: 4px 14px; border-radius: var(--r-md); background: var(--panel-2); }
.sv2-sum-r { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; font-size: 13px; color: var(--text-2); }
.sv2-sum-r + .sv2-sum-r { border-top: 1px solid var(--border); }
.sv2-sum-r b { color: var(--text); font-variant-numeric: tabular-nums; }
.sv2-sum-r.big b { font-size: 16.5px; font-weight: 800; color: var(--t1); }
.sv2-sum-r.warn b { color: var(--danger); }
.sv2-short { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r-md); font-size: 12.5px; line-height: 1.7;
  background: var(--chip-warn-bg); color: var(--chip-warn-text); }
.sv2-short svg { width: 17px; height: 17px; flex: none; }
.sv2-short[hidden] { display: none; }
.sv2-sh .form-error:empty, .sv2-od .form-error:empty { display: none; }
.sv2-sh .form-error, .sv2-od .form-error { margin-bottom: 8px; }
.sv2-sh .form-error a, .sv2-od .form-error a { color: var(--accent); font-weight: 700; text-decoration: underline; cursor: pointer; }
.btn.sv2-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; font-size: 16px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 26px -12px color-mix(in srgb, var(--t1) 85%, transparent); }
.btn.sv2-cta svg { width: 20px; height: 20px; }
.btn.sv2-cta:disabled { opacity: .55; box-shadow: none; }
.sv2-foot { margin-top: 10px; font-size: 11.5px; color: var(--text-2); line-height: 1.9; text-align: center; }
.sv2-links { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--text-2); }
.sv2-links button { min-height: 36px; padding: 4px 6px; background: none; border: 0; color: var(--accent); font: inherit; font-weight: 700; }
.sv2-steps3 { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.sv2-steps3 div { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sv2-steps3 i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; color: var(--t1);
  background: color-mix(in srgb, var(--t1) 14%, transparent); }
/* my orders */
.sv2-ol h3 { margin: 0 0 12px; }
.sv2-ol-note { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 10px 12px; border-radius: var(--r-md); font-size: 12.5px; font-weight: 700;
  background: var(--chip-warn-bg); color: var(--chip-warn-text); }
.sv2-ol-note svg { width: 17px; height: 17px; flex: none; }
.sv2-or { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; margin-bottom: 8px; border-radius: 18px; background: var(--panel);
  border: 1px solid var(--border); color: var(--text); font: inherit; text-align: right; animation: sv2-in .3s var(--ease) both; }
.sv2-or:active { transform: scale(.985); }
.sv2-or.hot { border-color: color-mix(in srgb, var(--t1) 55%, var(--border)); box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--t1) 80%, transparent); }
.sv2-or-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; color: #fff; overflow: hidden; background: linear-gradient(145deg, var(--t2), var(--t1)); }
.sv2-or-ic svg { width: 22px; height: 22px; } .sv2-or-ic img { width: 100%; height: 100%; object-fit: cover; }
.sv2-or-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sv2-or-tx b { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv2-or-tx small { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv2-st { flex: none; font-size: 10.5px; font-weight: 800; line-height: 1.7; padding: 2px 9px; border-radius: var(--r-pill); color: var(--t1); background: color-mix(in srgb, var(--t1) 14%, transparent); white-space: nowrap; }
/* one order's page */
.sv2-od-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sv2-od-h .sv2-st { align-self: flex-start; margin-top: 4px; }
.sv2-tl { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin: 0 0 14px; padding: 0; }
.sv2-tl li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.sv2-tl li::before { content: ''; position: absolute; top: 9px; right: -50%; width: 100%; height: 3px; background: var(--border); z-index: 0; }
.sv2-tl li:first-child::before { display: none; }
.sv2-tl li.ok::before, .sv2-tl li.now::before { background: var(--t1); }
.sv2-tl i { position: relative; z-index: 1; width: 21px; height: 21px; border-radius: 50%; background: var(--panel); border: 3px solid var(--border); }
.sv2-tl li.ok i { background: var(--t1); border-color: var(--t1); }
.sv2-tl li.ok i::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sv2-tl li.now i { border-color: var(--t1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--t1) 20%, transparent); }
.sv2-tl b { font-size: 10.5px; font-weight: 700; line-height: 1.5; color: var(--text-2); }
.sv2-tl li.ok b, .sv2-tl li.now b { color: var(--text); }
.sv2-tl small { font-size: 9.5px; color: var(--text-2); }
.sv2-goods { margin: 0 0 12px; padding: 12px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--online) 40%, var(--border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--online) 12%, var(--panel)), var(--panel)); }
.sv2-goods-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--chip-ok-text); }
.sv2-goods-h svg { width: 18px; height: 18px; } .sv2-goods-h b { flex: 1; font-size: 13.5px; font-weight: 800; }
.sv2-gr { padding: 8px 0; border-top: 1px dashed color-mix(in srgb, var(--online) 30%, var(--border)); }
.sv2-goods-h + .sv2-gr { border-top: 0; padding-top: 2px; }
.sv2-gr > small { display: block; font-size: 11px; color: var(--text-2); margin-bottom: 3px; }
.sv2-gr-v { display: flex; align-items: center; gap: 8px; }
.sv2-gr-v span { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); font-size: 14px; font-weight: 700;
  line-height: 1.7; overflow-wrap: anywhere; unicode-bidi: plaintext; user-select: text; -webkit-user-select: text; font-variant-numeric: tabular-nums; }
.sv2-cp { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--panel); color: var(--accent); font: inherit; font-size: 12px; font-weight: 800; }
.sv2-cp svg { width: 15px; height: 15px; }
.sv2-cp:active { transform: scale(.96); }
.sv2-goods-n { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11px; color: var(--text-2); }
.sv2-goods-n svg { width: 13px; height: 13px; }
.sv2-qbox { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0 0 12px; padding: 14px; border-radius: 18px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--t1) 30%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, var(--t1) 10%, var(--panel)), var(--panel)); }
.sv2-qbox > small { font-size: 12px; color: var(--text-2); }
.sv2-qp { font-size: 26px; font-weight: 900; color: var(--t1); font-variant-numeric: tabular-nums; }
.sv2-qp span { font-size: 13px; font-weight: 700; margin-inline-start: 4px; color: var(--text-2); }
.sv2-qn { margin: 2px 0 4px; font-size: 13px; line-height: 1.9; color: var(--text); white-space: pre-line; }
.sv2-qe { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 11.5px !important; }
.sv2-qe svg { width: 13px; height: 13px; }
.sv2-qbox .sv2-sum { margin-top: 8px; text-align: right; }
.sv2-qbox.wait { flex-direction: row; align-items: flex-start; gap: 10px; text-align: right; }
.sv2-qbox.wait > svg { width: 22px; height: 22px; flex: none; color: var(--t1); margin-top: 2px; }
.sv2-qbox.wait b { display: block; font-size: 13.5px; } .sv2-qbox.wait small { display: block; font-size: 12px; color: var(--text-2); line-height: 1.8; margin-top: 2px; }
.sv2-guide { margin: 0 0 12px; padding: 0 12px; border-radius: var(--r-md); background: var(--panel-2); }
.sv2-guide summary { display: flex; align-items: center; gap: 6px; min-height: 44px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 800; }
.sv2-guide summary::-webkit-details-marker { display: none; }
.sv2-guide summary svg { width: 18px; height: 18px; color: var(--chip-warn-text); }
.sv2-guide p { margin: 0; padding-bottom: 12px; font-size: 12.5px; line-height: 2; white-space: pre-line; color: var(--text); }
.sv2-end { display: flex; flex-direction: column; gap: 3px; margin: 0 0 12px; padding: 12px; border-radius: var(--r-md); background: var(--panel-2); }
.sv2-end b { font-size: 13px; } .sv2-end small { font-size: 12px; color: var(--text-2); line-height: 1.8; }
.sv2-end.bad { background: var(--chip-danger-bg); } .sv2-end.bad b { color: var(--chip-danger-text); }
.sv2-wait { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-md); font-size: 12.5px; line-height: 1.8; background: var(--panel-2); color: var(--text-2); }
.sv2-wait svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--t1); }
.sv2-info { margin: 0 0 10px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--border); }
.sv2-info summary { min-height: 42px; display: flex; align-items: center; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.sv2-kv { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; font-size: 13px; overflow-wrap: anywhere; }
.sv2-kv small { font-size: 11px; color: var(--text-2); }
.sv2-kv.money { flex-direction: row; justify-content: space-between; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.sv2-notes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.sv2-note { max-width: 86%; padding: 8px 11px; border-radius: 14px; font-size: 13px; }
.sv2-note p { margin: 0; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.sv2-note small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--text-2); }
.sv2-note.me { align-self: flex-start; background: var(--bubble-me); color: var(--bubble-me-text); border-end-start-radius: 4px; }
.sv2-note.shop { align-self: flex-end; background: var(--panel-2); border-end-end-radius: 4px; }
.sv2-note.priv { outline: 1px dashed var(--chip-warn-text); }
.sv2-cmp { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 12px; }
.sv2-cmp textarea { flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: 13.5px; resize: none; }
.sv2-cmp .btn { flex: none; min-height: 44px; }
.sv2-cmp .btn svg { width: 16px; height: 16px; }
.sv2-od-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sv2-od-acts .btn { flex: 1 1 auto; min-height: 44px; }
/* admin */
.sv2a-row .sv2a-main { flex-direction: row; align-items: center; gap: 10px; }
.sv2a-ic { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 21px; line-height: 1; color: #fff; overflow: hidden;
  background: linear-gradient(145deg, var(--t2), var(--t1)); }
.sv2a-ic svg { width: 20px; height: 20px; } .sv2a-ic img { width: 100%; height: 100%; object-fit: cover; }
.sv2a-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sv2a-tx b { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; font-weight: 700; }
.sv2a-tx small { font-size: 11.5px; color: var(--text-2); line-height: 1.6; }
#sv2aList.filtered .sv2a-mv { visibility: hidden; }
.sv2a-filter { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.sv2a-filter input, .sv2a-filter select { width: 100%; min-height: 44px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: 13.5px; }
.sv2a-filter .sv2-chips { margin-top: 0; }
.sv2a-tabs { margin: 0 0 10px; }
.sv2a-n { font-style: normal; min-width: 18px; padding: 0 5px; border-radius: 9px; font-size: 10.5px; line-height: 18px; text-align: center; background: var(--panel-2); color: var(--text-2); }
.sv2a-n.hot { background: var(--accent); color: var(--accent-contrast); }
.sv2-chip.on .sv2a-n { background: var(--panel); color: var(--text); }
.sv2a-pv { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; padding: 12px; border-radius: var(--r-lg); background: var(--panel-2); }
.sv2a-pv > small { font-size: 11.5px; color: var(--text-2); }
.sv2a-pv .sv2-card { animation: none; cursor: default; }
.sv2a-pv .btn { align-self: flex-start; }
.sv2a-qchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 14px; }
.sv2a-qchips > span { font-size: 12px; color: var(--text-2); }
.sv2a-qc { min-height: 34px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; }
.sv2a-qc:active { background: var(--accent-soft); }
.sv2a-fld { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; padding: 10px; border-radius: var(--r-md); background: var(--panel-2); }
.sv2a-fld input, .sv2a-fld select, .sv2a-fld textarea { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-size: 13.5px; }
.sv2a-fld-h { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px; }
.sv2a-fld-a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sv2a-fld-a .adm-sw { width: auto; margin: 0; }
.sv2a-orow .adm-row-main b { flex-wrap: wrap; }
.sv2a-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.sv2a-stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: var(--r-md); background: var(--panel-2); }
.sv2a-stats b { font-size: 18px; font-weight: 800; } .sv2a-stats small { font-size: 11.5px; color: var(--text-2); }
.sv2a-code b { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .5px; }
.sv2a-dl { margin-top: 8px; padding: 9px 11px; border-radius: var(--r-md); background: color-mix(in srgb, var(--online) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--online) 30%, var(--border)); }
.sv2a-dl-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 700; color: var(--chip-ok-text); }
.sv2a-dl pre { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 13px; line-height: 1.8; color: var(--text); }
.sv2a-q .adm-q-acts .btn svg { width: 16px; height: 16px; }
.adm-kv.sv2a-fv { flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 6px 0; }
.sv2a-fv > span { flex: 1 1 100%; font-size: 12px; }
.sv2a-fv b { flex: 1; min-width: 0; text-align: right; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.sv2a-pvg { margin-top: 4px; } .sv2a-pvg > small { display: block; margin-bottom: 6px; font-size: 11.5px; color: var(--text-2); }
.sv2-pv button { pointer-events: none; }
@media (max-width: 360px) {
  .sv2-card { gap: 11px; min-height: 90px; padding-inline: 12px 8px; }
  .sv2-ic { width: 52px; height: 52px; border-radius: 16px; font-size: 26px; }
  .sv2-mine span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sv2-card, .sv2-opt, .sv2-or { animation: none; }
  .sv2-card:active, .sv2-opt:active, .sv2-or:active { transform: none; }
}
/* ===== end SERVICES STORE 2 ===== */

/* ===== PRO FOR FAMILY (abroad exemption, gifts, profile chip — app.js proChipHtml / proAbroadPage / openProGift / proPeerPaint) =====
   Same plum + gold language as the Pro block above (--pro-grad / --pro-gold-grad); everything here is drawn only while Pro is on. */
.settings2 .st-prochip:empty, .pfx-progift-slot:empty, .pfx-pro:empty { display: none; }
.settings2 .st-prochip { margin: 6px 0 2px; }
.pro-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid var(--border); background: var(--panel-2); color: var(--text-2);
  font: inherit; font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: var(--r-pill); cursor: pointer; transition: transform var(--dur) var(--ease); }
.pro-chip:active { transform: scale(.97); }
.pro-chip .pc-go { font-weight: 600; color: var(--accent); }
.pro-chip.on { border-color: transparent; background: var(--pro-grad); color: #fff; }
.pro-chip.on .pc-star { color: var(--pro-gold); }
.st-pro.gift .stp-ic { font-size: 16px; }
.pro-badge.sm { font-size: 9.5px; padding: 2px 7px; }
.pfx-pro { display: inline-flex; }
.pfx-progift-slot { display: flex; justify-content: center; padding: 10px 0 2px; }
.pfx-progift { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; border: 0; border-radius: var(--r-pill); padding: 9px 16px; font: inherit;
  font-size: 12.5px; font-weight: 800; background: var(--pro-gold-grad); color: var(--pro-gold-ink); cursor: pointer; box-shadow: 0 10px 20px -12px rgba(233,169,58,.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfx-progift:active { transform: scale(.97); }
.pro-gift-cta { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 14px; border: 1px dashed rgba(233,169,58,.7); border-radius: var(--r-md);
  background: rgba(245,196,81,.10); color: var(--text); font: inherit; text-align: right; cursor: pointer; }
.pro-gift-cta .pg-ic { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 11px; background: var(--pro-gold-grad); font-size: 17px; }
.pro-gift-cta .pg-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pro-gift-cta .pg-tx b { font-size: 13.5px; font-weight: 800; }
.pro-gift-cta .pg-tx small { font-size: 11px; color: var(--text-2); }
.pro-gift-cta.big { border-style: solid; background: var(--pro-gold-grad); color: var(--pro-gold-ink); box-shadow: 0 12px 24px -12px rgba(233,169,58,.75); }
.pro-gift-cta.big .pg-ic { background: rgba(255,255,255,.45); }
.pro-gift-cta.big .pg-tx small { color: var(--pro-gold-ink); opacity: .8; }
.pg-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: var(--r-lg); background: var(--pro-grad); color: #fff; }
.pg-head .pg-hic { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 12px; background: var(--pro-gold-grad); font-size: 19px; }
.pg-head b { display: block; font-size: 16px; font-weight: 800; }
.pg-head small { display: block; font-size: 11.5px; line-height: 1.8; opacity: .88; margin-top: 3px; }
.pg-find { display: flex; gap: 8px; }
.pg-find input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; }
.pg-known-t { font-size: 11.5px; color: var(--text-2); margin: 12px 2px 6px; }
.pg-known { display: flex; flex-direction: column; gap: 4px; max-height: 236px; overflow-y: auto; }
.pg-person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text);
  font: inherit; text-align: right; cursor: pointer; }
.pg-person:not([disabled]):active, .pg-person:not([disabled]):hover { background: var(--panel-2); }
.pg-person[disabled] { cursor: default; padding-inline: 0; }
.pg-person .avatar { width: 38px; height: 38px; flex: 0 0 38px; }
.pg-pn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pg-pn b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-pn small { font-size: 11px; color: var(--text-2); text-align: right; }
.pg-no { font-size: 10.5px; color: var(--danger); max-width: 45%; text-align: left; }
.pg-chosen { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-md); background: var(--panel-2); }
.pg-chosen .pg-person { flex: 1; min-width: 0; }
.pg-wait { display: flex; justify-content: center; padding: 12px; }
.pro-hero.abroad .pro-state { background: rgba(255,255,255,.16); color: #fff; }
/* the wallet top-up: abroad, crypto first — and what there is when no coin is set up */
.tu-abroad { font-size: 11.5px; line-height: 1.8; color: var(--text-2); background: var(--accent-soft); border-radius: var(--r-md); padding: 8px 10px; margin-bottom: 8px; }
.tu-only { font-size: 11.5px; color: var(--text-2); text-align: center; margin: 4px 0 10px; }
.tu-only.abroad { color: var(--warn, #C98A12); font-weight: 700; background: rgba(233,169,58,.12); border-radius: var(--r-md); padding: 9px 10px; }
/* ===== end PRO FOR FAMILY ===== */

/* ===== PRO DATA METER (one monthly volume — app.js proChipHtml: «حجمِ این ماه: X از Y» under the profile chip) ===== */
.settings2 .st-prochip .pc-meter { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--text-2); }
.pc-meter span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pc-meter b { flex: 0 0 64px; height: 4px; border-radius: var(--r-pill); overflow: hidden; background: color-mix(in srgb, var(--text-2) 20%, transparent); }
.pc-meter b i { display: block; height: 100%; border-radius: inherit; background: var(--accent-grad); }
.pc-meter.warn b i { background: linear-gradient(90deg, #F2B84B, #E9973A); }
.pc-meter.full b i { background: var(--danger); }
.pc-meter.full span { color: var(--danger); font-weight: 700; }
/* ===== end PRO DATA METER ===== */

/* ===== WALLET COLOUR CARDS (2.0, owner 2026-10-24: «کارت‌های کیف پول رنگی باشن») =====
   Each top-up amount its own gradient (8, then they repeat); white text; the chosen one lifts with a ring. */
.tu-presets .tu-preset { position: relative; overflow: hidden; isolation: isolate; border: 0; color: #fff;
  background: linear-gradient(145deg, var(--c1), var(--c2)); box-shadow: 0 6px 16px -8px var(--c2), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.tu-presets .tu-preset::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 55%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent); }
.tu-presets .tu-preset::after { content: ''; position: absolute; width: 70px; height: 70px; left: -18px; bottom: -30px; z-index: -1; border-radius: 50%;
  background: rgba(255, 255, 255, .13); pointer-events: none; }
.tu-presets .tu-preset b, .tu-presets .tu-preset span, .tu-presets .tu-preset small { color: #fff; }
.tu-presets .tu-preset span { opacity: .9; } .tu-presets .tu-preset small { opacity: .78; }
.tu-presets .tu-preset:nth-child(8n+1) { --c1: #2dd4bf; --c2: #0d9488; }
.tu-presets .tu-preset:nth-child(8n+2) { --c1: #a78bfa; --c2: #6d28d9; }
.tu-presets .tu-preset:nth-child(8n+3) { --c1: #fbbf24; --c2: #d97706; }
.tu-presets .tu-preset:nth-child(8n+4) { --c1: #fb7185; --c2: #be123c; }
.tu-presets .tu-preset:nth-child(8n+5) { --c1: #60a5fa; --c2: #1d4ed8; }
.tu-presets .tu-preset:nth-child(8n+6) { --c1: #4ade80; --c2: #15803d; }
.tu-presets .tu-preset:nth-child(8n+7) { --c1: #818cf8; --c2: #4338ca; }
.tu-presets .tu-preset:nth-child(8n+8) { --c1: #f472b6; --c2: #be185d; }
.tu-presets .tu-preset.on { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 5px var(--c2), 0 10px 22px -10px var(--c2); }
.tu-presets .tu-preset.on b, .tu-presets .tu-preset.on span, .tu-presets .tu-preset.on small { color: #fff; }
.tu-presets .tu-preset.on::after { content: '✓'; display: grid; place-items: center; width: 22px; height: 22px; left: 8px; top: 8px; bottom: auto;
  font-size: 13px; font-weight: 800; color: var(--c2); background: #fff; z-index: 1; }
.tu-presets .tu-preset:active { transform: scale(.96); }
[data-theme="dark"] .tu-presets .tu-preset { filter: saturate(.92) brightness(.92); }

/* the admin's «📣 همهٔ کاربرها» in the story editor (stories.js) */
.sx-aud.sx-aud-all { background: linear-gradient(135deg, #7c3aed, #2563eb); box-shadow: 0 6px 16px -8px #4f46e5; }
.sx-aud.sx-aud-all.on { box-shadow: 0 0 0 2px #fff, 0 6px 16px -8px #4f46e5; }
.sx-bottom:has(.sx-aud-all) { flex-wrap: wrap; justify-content: center; gap: 8px; }
.sx-bottom:has(.sx-aud-all) .sx-aud, .sx-bottom:has(.sx-aud-all) .sx-pub { height: 42px; padding: 0 13px; font-size: 13px; }

/* ===== ADMIN KIT (redesign batch 2) =====
   public/js/admin.js: admSheet (sticky header + footer, the sheet stack), admLoad's skeleton and
   «بارگذاری نشد», admSave's spinner and inline error, the controls (money / number+unit / switch /
   tab bar / pick / chips), the queue card, the user file, list rows, the danger zone, the broadcast
   preview. Tokens only — dark mode follows them. Phone first: rows ≥56px, targets ≥44px. */
.sheet.adm-sheet { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.sheet.adm-sheet > .grab { flex: none; margin: 8px auto 2px; }
.adm-sheet [hidden] { display: none !important; }
.adm-sh-h { flex: none; display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 0 8px 6px; border-bottom: 1px solid var(--border); background: var(--panel); }
.sheet .adm-sh-t { flex: 1; min-width: 0; margin: 0; padding-inline: 8px; font-size: var(--fs-md); font-weight: 700; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-sh-back, .adm-sh-x { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 44px; height: 44px; padding: 0 8px; border-radius: var(--r-pill); font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); background: transparent; }
.adm-sh-back { color: var(--accent); }
.adm-sh-back svg { width: 20px; height: 20px; }
.adm-sh-x svg { width: 18px; height: 18px; }
.adm-sh-back:active, .adm-sh-x:active { background: var(--panel-2); }
.adm-sh-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 16px 20px; }
.adm-sh-b:has(+ .adm-sh-f[hidden]) { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.adm-sh-f { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--panel); }
.adm-sh-f .btn { width: 100%; }
.btn.adm-primary { min-height: 48px; font-size: 15px; font-weight: 700; }
.btn.adm-secondary { min-height: 44px; }
.btn.is-busy { opacity: .85; }
.adm-err { color: var(--danger); font-size: 12.5px; line-height: 1.7; text-align: center; }
.adm-spin { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; opacity: .85; animation: adm-spin .7s linear infinite; }
@keyframes adm-spin { to { transform: rotate(360deg); } }
/* loading / failed */
.adm-skel { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 12px; }
.adm-skel i { display: block; height: 18px; border-radius: 9px; background: linear-gradient(90deg, var(--panel-2) 0%, var(--border) 50%, var(--panel-2) 100%); background-size: 200% 100%; animation: adm-shimmer 1.2s linear infinite; }
.adm-skel i:nth-child(1) { width: 58%; }
.adm-skel i:nth-child(2) { width: 100%; height: 64px; border-radius: var(--r-md); }
.adm-skel i:nth-child(3) { width: 82%; height: 64px; border-radius: var(--r-md); }
@keyframes adm-shimmer { to { background-position: -200% 0; } }
.adm-fail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 12px; text-align: center; }
.adm-fail b { font-size: 16px; font-weight: 700; }
.adm-fail span { font-size: 13px; color: var(--text-2); }
.adm-fail .btn { width: auto; min-width: 150px; margin-top: 10px; }
/* text, sections, notes */
.adm-sec { display: flex; flex-direction: column; gap: 2px; margin: 18px 0 10px; }
.adm-sh-b > .adm-sec:first-child { margin-top: 0; }
.adm-sec b { font-size: 13px; font-weight: 700; color: var(--text); }
.adm-sec small { font-size: 12px; color: var(--text-2); line-height: 1.7; }
.adm-hint2 { font-size: 12px; color: var(--text-2); line-height: 1.8; margin: 0 0 10px; }
.adm-fld .adm-hint2 { margin: 0; }
.adm-lead { font-size: 14px; margin: 0 0 12px; }
.adm-muted { color: var(--text-2); }
.adm-good { color: var(--chip-ok-text); font-weight: 600; }
.adm-bad { color: var(--chip-danger-text); font-weight: 600; }
.adm-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; margin-bottom: 12px; border-radius: var(--r-md); font-size: 13px; line-height: 1.7; background: var(--panel-2); }
.adm-note.bad { background: var(--chip-danger-bg); color: var(--chip-danger-text); }
.adm-note.warn { background: var(--chip-warn-bg); color: var(--chip-warn-text); }
.adm-note .btn { width: auto; flex: none; }
.adm-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.adm-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 380px) { .adm-row3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.btn.adm-btn2 { margin-top: 4px; min-height: 44px; }
.adm-fold-b { padding-top: 4px; }
/* inputs: money / number with its unit */
.adm-fld { margin-bottom: 14px; }
.adm-inp { position: relative; }
.adm-inp input { padding-left: 64px; font-variant-numeric: tabular-nums; }
.adm-inp.no-unit input { padding-left: 13px; }
.adm-unit { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 12.5px; font-weight: 600; color: var(--text-2); pointer-events: none; }
.adm-inp.is-off .adm-unit { opacity: .5; }
.adm-help { min-height: 18px; margin-top: -2px; font-size: 12px; color: var(--accent); }
.adm-help:empty { min-height: 0; margin: 0; }
/* the one switch: the whole row is the button */
.adm-sw { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 2px; margin: 0 0 6px; font: inherit; color: var(--text); text-align: right; background: transparent; border-radius: var(--r-md); }
.adm-sw-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-sw-t b { font-size: 14px; font-weight: 600; }
.adm-sw-t small { font-size: 12px; color: var(--text-2); line-height: 1.6; }
.adm-sw-k { flex: none; position: relative; width: 44px; height: 26px; border-radius: var(--r-pill); background: var(--border); transition: background var(--dur) var(--ease); }
.adm-sw-k::after { content: ''; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-contrast); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform var(--dur) var(--ease); }
.adm-sw[aria-checked="true"] .adm-sw-k { background: var(--accent); }
.adm-sw[aria-checked="true"] .adm-sw-k::after { transform: translateX(-18px); }
.adm-sw:disabled { opacity: .5; }
.adm-sw.mini { min-height: 44px; margin: 2px 0 0; padding-block: 4px; }
.adm-sw.mini .adm-sw-t b { font-size: 13px; font-weight: 500; color: var(--text-2); }
.adm-sw.compact { width: auto; flex: none; min-width: 52px; min-height: 44px; margin: 0; padding: 0 4px; justify-content: center; }
/* the one tab bar */
.adm-seg { display: flex; gap: 4px; padding: 4px; margin: 0 0 12px; border-radius: 12px; background: var(--panel-2); }
.adm-seg button { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 8px; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-seg button[aria-selected="true"] { background: var(--panel); color: var(--accent); box-shadow: 0 2px 8px -4px rgba(40, 44, 90, .35); }
/* one choice: chips, or radio cards */
.adm-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.adm-pick > button { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; text-align: right; }
.adm-pick > button b { font-weight: 600; }
.adm-pick > button small { font-size: 11.5px; color: var(--text-2); }
.adm-pick > button[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.adm-pick.cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.adm-pick.cards > button { min-height: 60px; padding: 10px 12px; border-radius: var(--r-md); }
@media (max-width: 360px) { .adm-pick.cards { grid-template-columns: minmax(0, 1fr); } }
/* a list of numbers as chips */
.adm-chips { display: flex; flex-direction: column; gap: 8px; }
.adm-chips-l { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-chips-l:empty { display: none; }
.adm-chip { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding-inline: 12px 2px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; }
.adm-chip button { width: 32px; height: 32px; border-radius: 50%; font-size: 18px; line-height: 1; color: inherit; }
.adm-chips-add { display: flex; gap: 8px; }
.adm-chips-add input { flex: 1; min-width: 0; }
.adm-chip-plus { flex: none; width: 48px; min-height: 44px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel-2); color: var(--accent); font-size: 20px; font-weight: 700; }
/* list rows: tap to open, a trailing switch */
.adm-row { display: flex; align-items: center; gap: 6px; min-height: 56px; border-bottom: 1px solid var(--border); }
.adm-row.is-off .adm-row-main { opacity: .55; }
.adm-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-height: 56px; padding: 8px 4px; border-radius: var(--r-md); font: inherit; color: var(--text); text-align: right; }
.adm-row-main:active { background: var(--panel-2); }
.adm-row-main b { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; max-width: 100%; font-size: 14px; font-weight: 600; }
.adm-row-main bdi, .adm-ulink bdi, .adm-u-id bdi { min-width: 0; overflow-wrap: anywhere; }
.adm-row-main small { font-size: 12px; color: var(--text-2); line-height: 1.6; }
.adm-row-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.adm-order { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.adm-order .pa-mv { width: 44px; height: 40px; }
.adm-mrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 2px; border-bottom: 1px solid var(--border); font: inherit; color: var(--text); text-align: right; }
.adm-mrow:active { background: var(--panel-2); }
.adm-mrow-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent); }
.adm-mrow-ic svg { width: 19px; height: 19px; }
.adm-mrow-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-mrow-t b { font-size: 14px; font-weight: 600; }
.adm-mrow-t small { font-size: 12px; color: var(--text-2); line-height: 1.6; }
.adm-mrow-chev { flex: none; display: flex; color: var(--text-2); opacity: .5; }
.adm-mrow-chev svg { width: 16px; height: 16px; }
.adm-mrow.danger .adm-mrow-ic { background: var(--chip-danger-bg); color: var(--danger); }
.adm-mrow.danger .adm-mrow-t b { color: var(--danger); }
.adm-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 2px; border-bottom: 1px solid var(--border); }
.adm-line > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-line b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.adm-line small { font-size: 11.5px; color: var(--text-2); }
.adm-amt { flex: none; font-size: 14px; font-weight: 700; }
.adm-amt.pos { color: var(--online); }
.adm-amt.neg { color: var(--danger); }
.adm-kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.adm-kv span { color: var(--text-2); }
.adm-danger-zone { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 12px; border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: var(--r-md); }
.adm-danger-zone > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.adm-danger-zone b { font-size: 13.5px; color: var(--danger); }
.adm-danger-zone small { font-size: 12px; color: var(--text-2); line-height: 1.7; }
.adm-danger-zone .btn { flex: none; min-height: 44px; }
/* queues: one card per waiting request */
.adm-q-sum { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; }
.adm-queue { position: relative; margin-bottom: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; transition: max-height .3s var(--ease), opacity .2s ease, margin .3s var(--ease), padding .3s var(--ease); }
.adm-queue.adm-out { max-height: 0 !important; opacity: 0; margin-bottom: 0; padding-block: 0; border-width: 0; }
.adm-q-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adm-q-time { flex: none; font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
.adm-q-amt { margin: 6px 0 2px; font-size: 18px; font-weight: 700; color: var(--text); }
.adm-q-l { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 2px; font-size: 12.5px; line-height: 1.8; color: var(--text-2); overflow-wrap: anywhere; }
.adm-q-l b { color: var(--text); }
.adm-q-tx { font-size: 12px; overflow-wrap: anywhere; }
.adm-q-by { color: var(--accent); font-weight: 600; }
.adm-q-aa { color: var(--chip-warn-text); }
.adm-q-note { color: var(--text); }
.adm-q-img { display: block; width: 120px; height: 120px; margin-top: 8px; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel-2); }
.adm-q-img img { width: 100%; height: 100%; object-fit: cover; }
.adm-q-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.adm-q-acts .btn { flex: 1 1 auto; width: auto; min-height: 44px; }
.adm-q-acts .btn.adm-ok { flex: 2 1 auto; font-weight: 700; }
.btn.ghost.adm-no { color: var(--danger); }
.adm-code-box { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 12px; }
.adm-search { margin-top: 0; }
.adm-ulink { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px; min-width: 0; min-height: 36px; padding: 4px 0; font: inherit; color: var(--text); text-align: right; }
.adm-ulink b { font-size: 14px; font-weight: 700; color: var(--accent); }
.adm-ulink bdi { font-size: 12px; color: var(--text-2); }
.adm-copy { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--panel-2); color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; }
/* the user file */
.adm-u-head { margin-bottom: 10px; }
.adm-u-id { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 12.5px; color: var(--text-2); }
.adm-acts4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.adm-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 4px; border-radius: var(--r-md); background: var(--panel-2); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; text-align: center; }
.adm-act svg { width: 20px; height: 20px; color: var(--accent); }
.adm-act:disabled { opacity: .45; }
.adm-act:active { background: var(--accent-soft); }
.aud-stats.adm-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm-tk { padding: 2px 0 8px; border-bottom: 1px solid var(--border); }
.adm-tk-u { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
/* broadcast: who it reaches, and how it looks on a phone */
.adm-reach { min-height: 20px; margin: -4px 0 12px; font-size: 13px; font-weight: 600; color: var(--accent); }
.adm-np { margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel-2); }
.adm-np-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11.5px; color: var(--text-2); }
.adm-np-top img { width: 18px; height: 18px; border-radius: 5px; }
.adm-np-top span:last-child { margin-inline-start: auto; }
.adm-np-title { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.adm-np-body { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.adm-sw:focus-visible, .adm-seg button:focus-visible, .adm-pick > button:focus-visible, .adm-row-main:focus-visible, .adm-mrow:focus-visible, .adm-act:focus-visible, .adm-ulink:focus-visible, .adm-sh-back:focus-visible, .adm-sh-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .adm-skel i, .adm-spin { animation: none; } .adm-queue, .adm-sw-k, .adm-sw-k::after { transition: none; } }
/* ===== end ADMIN KIT (redesign batch 2) ===== */

/* ===== ADMIN REST (redesign batch 3) =====
   public/js/admin.js «ADMIN REST»: the repeatable-row editor (admList), the icon upload of a download
   row, the decimal ladder chips, the password eye, the popup / banner previews, the store shelves, the
   panel rows with their live dot, the audit rows, the service file's bar. Tokens only — dark mode
   follows them; .chip.info / .chip.tone-* replace the inline rgba chips. Rows ≥56px, targets ≥44px. */
.chip.info { background: var(--accent-soft); color: var(--accent); }
.chip.tone-violet, .chip.tone-blue, .chip.tone-green, .chip.tone-orange, .chip.tone-red, .chip.tone-pink, .chip.tone-gold, .chip.tone-teal, .chip.tone-slate { background: color-mix(in srgb, var(--t1) 16%, transparent); color: var(--t1); }
button.chip { min-height: 36px; padding-inline: 12px; font: inherit; font-size: 12.5px; font-weight: 600; }
.adm-sub-h { margin: 16px 0 8px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.adm-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adm-sec-h .adm-sec { flex: 1; min-width: 0; }
.btn.adm-wide { width: 100%; min-height: 44px; margin: 4px 0 8px; }
.adm-sheet .btn.small { min-height: 44px; }
.adx-bar-fill.warm { background: var(--chip-warn-text); }   /* was a fixed amber: a token now, so dark mode follows */
/* admList */
.adm-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.adm-list-l { display: flex; flex-direction: column; gap: 10px; }
.adm-list-l:empty { display: none; }
.adm-list-empty { padding: 12px; border: 1px dashed var(--border); border-radius: var(--r-md); text-align: center; font-size: 12.5px; color: var(--text-2); }
.btn.adm-list-add { width: 100%; min-height: 44px; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); background: transparent; }
.adm-li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); }
.adm-li .adm-fld { margin-bottom: 8px; }
.adm-li .adm-fld:last-child { margin-bottom: 0; }
.adm-li-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.adm-li-h > b { font-size: 13px; font-weight: 700; color: var(--text-2); }
.adm-li-acts { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.adm-li-acts .pa-mv { width: 44px; height: 44px; }
.adm-li-acts .pa-mv:disabled { opacity: .3; }
.adm-li-del { min-width: 52px; height: 44px; padding: 0 10px; border-radius: var(--r-md); font: inherit; font-size: 13px; font-weight: 600; color: var(--danger); background: transparent; }
.adm-li-del:active { background: var(--chip-danger-bg); }
.adm-li.one { flex-direction: row; align-items: center; gap: 6px; min-height: 56px; padding: 6px 6px 6px 4px; }
.adm-li-one { flex: 1; min-width: 0; }
.adm-li-one input { width: 100%; min-height: 44px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-md); outline: none; background: var(--panel-2); color: var(--text); font: inherit; font-size: 14px; caret-color: var(--accent); }
.adm-li-one input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.adm-li-one input::placeholder { color: var(--text-2); opacity: .7; }
@supports (-webkit-touch-callout: none) { .adm-li-one input { font-size: 16px; } }   /* no zoom-in on focus on iPhone, as .field inputs */
.adm-li.one .pa-mv { width: 40px; }
@media (max-width: 380px) { .adm-li.one { flex-wrap: wrap; } .adm-li.one .adm-li-one { flex-basis: 100%; } .adm-li.one .adm-li-acts { margin-inline-start: auto; } }
.adm-li-sw { flex-direction: row; align-items: center; gap: 6px; padding: 0 4px 0 0; }
.adm-li-sw .adm-sw { flex: 1; min-width: 0; border-bottom: 0; }
/* the icon of a download row */
.adm-ico { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-ico-p { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text-2); overflow: hidden; }
.adm-ico-p img { width: 100%; height: 100%; object-fit: cover; }
.adm-ico .btn { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.adm-ico .btn svg { flex: none; width: 18px; height: 18px; }
/* decimal ladder chips (admChipsD) — the same look as admChips */
.adm-cd-add { display: flex; gap: 8px; }
.adm-cd-add input { flex: 1; min-width: 0; }
/* password / token with «نمایش» */
.adm-pw input { padding-left: 72px; }
.adm-eye { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); min-width: 60px; min-height: 44px; padding: 0 10px; border-radius: var(--r-md); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent); background: transparent; }
/* tap-to-insert placeholders ({name}, {days}) */
.adm-ins { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 2px; font-size: 12px; color: var(--text-2); }
.adm-step { padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); }
.adm-step > b { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-2); }
.adm-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; }
/* previews: the open-app popup and the home banner */
.adm-pop { display: flex; flex-direction: column; gap: 6px; margin: 0 auto 14px; max-width: 320px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel-2); box-shadow: var(--shadow, none); }
.adm-pop b { font-size: 15px; overflow-wrap: anywhere; }
.adm-pop div { font-size: 13px; line-height: 1.8; white-space: pre-line; color: var(--text-2); overflow-wrap: anywhere; max-height: 9em; overflow: hidden; }
.adm-pop-btn { align-self: flex-start; margin-top: 4px; padding: 6px 12px; border-radius: var(--r-pill); font-size: 12px; color: var(--accent); background: var(--accent-soft); }
.adm-pop.is-off, .adm-bn.is-off { opacity: .45; }
.adm-bn { margin-bottom: 12px; padding: 10px 14px; border-radius: var(--r-md); font-size: 13px; font-weight: 600; line-height: 1.7; background: var(--accent-soft); color: var(--accent); overflow-wrap: anywhere; }
.adm-bn[data-k="warn"] { background: var(--chip-warn-bg); color: var(--chip-warn-text); }
.adm-bn[data-k="promo"] { background: var(--chip-ok-bg, var(--accent-soft)); color: var(--chip-ok-text, var(--accent)); }
/* store shelves */
.adm-shelf { display: flex; flex-direction: column; gap: 8px; padding: 6px 12px 12px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); }
.adm-shelf.is-off { background: var(--panel-2); }
.adm-shelf .adm-fld { margin-bottom: 0; }
.adm-shelf-in { display: flex; gap: 8px; }
.adm-shelf-in > .field:last-child { flex: 1; min-width: 0; }
.adm-shelf-icf { flex: none; width: 64px; }
.adm-shelf-ic { text-align: center; }
.adm-shelf input { min-height: 44px; }
/* VPN panel rows: a live dot, «وصل / قطع از …», the actions */
.adm-pnl { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 10px; border-bottom: 1px solid var(--border); }
.adm-pnl.is-off .adm-row-main { opacity: .6; }
.adm-pnl-acts { display: flex; gap: 8px; }
.adm-pnl-acts .btn { flex: 1; }
.adm-pnl-t:empty { display: none; }
.adm-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--text-2); opacity: .5; }
.adm-dot.ok { background: var(--online); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--online) 22%, transparent); }
.adm-dot.down { background: var(--danger); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
.adm-flash { animation: adm-flash 1.6s ease-out 1; }
@keyframes adm-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.adm-row.is-on { background: var(--accent-soft); border-radius: var(--r-md); }
.adm-row > .btn.small { flex: none; }
.adm-qr { display: flex; justify-content: center; margin: 6px 0 12px; }
.adm-qr canvas { max-width: 100%; height: auto; border-radius: 12px; background: var(--panel); }
/* stickers */
.adm-stk-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--panel-2); font-size: 12px; font-weight: 700; color: var(--text-2); overflow: hidden; }
.adm-stk-ic img { width: 100%; height: 100%; object-fit: contain; }
.adm-stk-grid { padding: 4px; }
.adm-stk-grid .ep-st-x { min-width: 28px; min-height: 28px; }
/* the audit log */
.adm-au { align-items: flex-start; }
.adm-au > div { flex: 1; }
.adm-au small bdi { overflow-wrap: anywhere; }
.adm-au-t { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 11px; color: var(--text-2); }
.adm-sheet .adm-seg + .adm-search { margin-top: 12px; }
#auKind button { flex: 1 1 auto; padding: 0 6px; }   /* «کارهای مدیر» / «ورود و حساب» whole at 360px */
/* reports, online, deleted, the service file */
.stat-grid.adm-stats { padding: 0; }
.adm-stats .s-num { font-size: 15px; overflow-wrap: anywhere; }
.adm-sheet .an-row-main .adm-ulink { min-height: 0; padding: 0; }
.adm-sheet .al-row[data-adm-user] { cursor: pointer; }
.adm-sheet .al-row[data-adm-user]:active { background: var(--panel-2); }
.adm-onl { gap: 10px; }
.adm-onl .adm-ulink { flex: 1; min-width: 0; }
.adm-del { align-items: flex-start; }
.adm-del .au-meta { flex: 1; min-width: 0; }
.adm-del-cost { margin-top: 3px; font-size: 11px; }
.adm-sheet .svc-bar-fill { background: var(--accent); }
.adm-sheet .svc-bar-fill.is-high { background: var(--danger); }
#bkActs .adm-mrow.sel { background: var(--accent-soft); }
#bkForm { margin-top: 12px; }
.adm-sheet .rf-row .adm-ulink { min-height: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) { .adm-flash { animation: none; } }
/* ===== end ADMIN REST (redesign batch 3) ===== */

/* ===== ADMIN SHELL (redesign batch 1) =====
   public/js/admin.js «ADMIN SHELL»: the «مدیریت» tab — the sticky section bar, the home («منتظر تو»,
   «امروز», «کارهای سریع», «اخیراً», «سلامت سرور», «اپ‌های کاربران»), the section rows and the search.
   Prefix .adh- because the batch-2 kit already owns .adm-sec / .adm-row / .adm-search inside sheets.
   Tokens only (no hex, no rgba), so the dark themes follow. Rows ≥56px, buttons ≥44px, works at 360px. */
.adh-top .icon-btn { width: 44px; height: 44px; }
.adh-top .icon-btn svg { width: 21px; height: 21px; }
.adh-shell { overflow-x: hidden; }
.adh-nav { position: sticky; top: 0; z-index: 3; display: flex; gap: 4px; padding: 4px; margin: var(--sp-2) 0 var(--sp-3); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-lg); }
.adh-nav > button { position: relative; flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 2px; border: 0; border-radius: var(--r-md); background: none; color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background var(--dur), color var(--dur); }
.adh-nav > button[aria-selected="true"] { background: var(--panel); color: var(--accent); box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 14%, transparent); }
.adh-nav-n { position: absolute; top: 3px; inset-inline-end: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill); background: var(--danger); color: var(--accent-contrast); font-style: normal; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.adh-nav-n[hidden] { display: none; }
.adh-pane { min-width: 0; }
.adh-h { margin: var(--sp-4) 4px var(--sp-2); font-size: 12px; font-weight: 600; color: var(--text-2); }
.adh-group-h { margin: var(--sp-4) 6px var(--sp-2); font-size: 12px; font-weight: 600; color: var(--text-2); }
.adh-pane > .adh-group-h:first-child { margin-top: var(--sp-1); }
.adh-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }

/* search */
.adh-search { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color var(--dur); }
.adh-search:focus-within { border-color: var(--accent); }
.adh-search-ic { display: flex; color: var(--text-2); flex: none; }
.adh-search-ic svg { width: 19px; height: 19px; }
.adh-search input { flex: 1; min-width: 0; height: 46px; padding: 0; border: 0; outline: none; background: none; color: var(--text); font-family: inherit; font-size: 16px; }
.adh-search input::placeholder { color: var(--text-2); font-size: 13.5px; }
.adh-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.adh-search-x { flex: none; width: 44px; height: 44px; margin-inline-end: -10px; display: grid; place-items: center; border: 0; background: none; color: var(--text-2); }
.adh-search-x svg { width: 17px; height: 17px; }
.adh-search-x[hidden] { display: none; }
.adh-search-in { margin-bottom: var(--sp-3); }
.adh-results { padding-bottom: var(--sp-4); }
.adh-results[hidden], .adh-results [hidden], #admHomeBody[hidden] { display: none; }
.adh-res-wait, .adh-res-empty { padding: 18px 12px; text-align: center; font-size: 13px; line-height: 1.8; color: var(--text-2); }
.adh-res-empty { margin-top: var(--sp-4); }
.adh-users { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.adh-users .admin-user { min-height: 56px; border-top: 1px solid var(--border); cursor: pointer; }
.adh-users .admin-user:first-child { border-top: 0; }
.adh-users .admin-user:active { background: var(--panel-2); }

/* section rows */
.adh-row, .adh-fold-h { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; border: 0; border-top: 1px solid var(--border); background: none; color: var(--text); font-family: inherit; text-align: right; cursor: pointer; transition: background var(--dur); }
.adh-row:first-child, .adh-fold-h { border-top: 0; }
.adh-row:active, .adh-fold-h:active { background: var(--panel-2); }
.adh-row-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent); }
.adh-row-ic svg { width: 19px; height: 19px; }
.adh-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adh-row-t b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adh-row-t small { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adh-row-end { flex: none; display: flex; align-items: center; }
.adh-row-end:empty { display: none; }
.adh-row-chev { flex: none; display: flex; color: var(--text-2); opacity: .5; }
.adh-row-chev svg { width: 16px; height: 16px; }
.adh-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-contrast); font-size: 12px; font-weight: 700; }
.adh-badge.danger { background: var(--danger); }
.adh-pill { display: inline-block; padding: 3px 9px; border-radius: var(--r-pill); background: var(--panel-2); color: var(--text-2); font-size: 11.5px; font-weight: 600; }
.adh-pill.on { background: var(--chip-ok-bg); color: var(--chip-ok-text); }
.adh-pill.warn { background: var(--chip-warn-bg); color: var(--chip-warn-text); }
.adh-row.is-loading, .adh-need.is-loading, .adh-tile.is-loading, .adh-quick > button.is-loading, .adh-chip.is-loading { opacity: .55; pointer-events: none; animation: adm-pulse 1s ease-in-out infinite alternate; }

/* «منتظر تو» */
.adh-needs { display: flex; flex-direction: column; gap: 8px; }
.adh-need { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-inline-start: 4px solid var(--accent); border-radius: var(--r-lg); color: var(--text); font-family: inherit; text-align: right; cursor: pointer; }
.adh-need:active { background: var(--panel-2); }
.adh-need-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.adh-need-ic svg { width: 20px; height: 20px; }
.adh-need-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adh-need-t b { font-size: 14px; font-weight: 600; }
.adh-need-t small { font-size: 12px; line-height: 1.6; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }   /* two lines: the oldest request's age comes last */
.adh-need-n { flex: none; min-width: 30px; height: 30px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 700; }
.adh-tone-warn { border-inline-start-color: var(--chip-warn-text); }
.adh-tone-warn .adh-need-ic, .adh-tone-warn .adh-need-n { background: var(--chip-warn-bg); color: var(--chip-warn-text); }
.adh-tone-danger { border-inline-start-color: var(--danger); }
.adh-tone-danger .adh-need-ic, .adh-tone-danger .adh-need-n { background: var(--chip-danger-bg); color: var(--chip-danger-text); }
.adh-tone-info { border-inline-start-color: var(--accent); }
.adh-clear { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; padding: 18px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); text-align: center; font-size: 13px; color: var(--text-2); }
.adh-clear b { color: var(--text); font-size: 14px; font-weight: 600; }

/* «امروز» */
.adh-today { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.adh-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: 78px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--text); font-family: inherit; text-align: right; cursor: pointer; }
.adh-tile:active { background: var(--panel-2); }
.adh-tile small { font-size: 12px; color: var(--text-2); }
.adh-tile b { max-width: 100%; font-size: 19px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adh-tile span { font-size: 11px; color: var(--text-2); }
.adh-foot { margin: 6px 4px 0; font-size: 11px; line-height: 1.7; color: var(--text-2); }

/* «کارهای سریع» + «اخیراً» */
.adh-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.adh-quick > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 76px; padding: 8px 4px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--text); font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.4; text-align: center; cursor: pointer; }
.adh-quick > button:active { background: var(--panel-2); }
.adh-quick > button > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent); }
.adh-quick > button svg { width: 18px; height: 18px; }
.adh-recent { display: flex; flex-wrap: wrap; gap: 6px; }
.adh-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--panel); color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.adh-chip > span { display: flex; color: var(--accent); }
.adh-chip svg { width: 16px; height: 16px; }

/* «سلامت سرور» + «اپ‌های کاربران» */
.adh-health-h { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 14px; border: 0; background: none; color: var(--text); font-family: inherit; font-size: 13.5px; text-align: right; cursor: pointer; }
.adh-health-t { flex: 1; min-width: 0; }
.adh-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--online); }
.adh-dot.hot { background: var(--danger); }
.adh-health-b { padding: 2px 14px 12px; }
.adh-health .adm-skel, .adh-needs > .adm-skel { padding: 12px 14px; }
.adh-fold { margin-top: var(--sp-3); }
.adh-fold-b[hidden] { display: none; }
.adh-fold-b .adx-clients { margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.adh-health-h .adh-row-chev svg, .adh-fold-h .adh-row-chev svg { transition: transform var(--dur); }
.adh-health-h[aria-expanded="true"] .adh-row-chev svg, .adh-fold-h[aria-expanded="true"] .adh-row-chev svg { transform: rotate(180deg); }
html[dir="ltr"] .adh-row .adh-row-chev svg, html[dir="ltr"] .adh-need .adh-row-chev svg { transform: scaleX(-1); }

/* the user file's «فعالیت» tab: that person's log */
.adh-act { margin: 6px 0 4px; }
.adh-act .adm-skel { padding: 8px 0; }

.adh-list + .adh-group-h { margin-top: var(--sp-5); }
@media (max-width: 380px) {
  .adh-nav > button { font-size: 12.5px; }
  .adh-quick > button { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .adh-row.is-loading, .adh-need.is-loading, .adh-tile.is-loading, .adh-quick > button.is-loading, .adh-chip.is-loading { animation: none; } }
/* ===== end ADMIN SHELL (redesign batch 1) ===== */