: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: #31d65b; 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; }
.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: #18222d; }
.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; }

#messages { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-3) var(--sp-2); display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.day-sep { align-self: center; background: var(--panel); color: var(--text-2); font-size: var(--fs-xs); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3); margin: var(--sp-3) 0 var(--sp-2); box-shadow: var(--shadow); }
.msg { max-width: 80%; display: flex; flex-direction: column; position: relative; }
.msg.me { align-self: flex-start; }   /* RTL: my messages on the left like Telegram fa */
.msg.other { align-self: flex-end; }
.bubble { border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-3) 5px; position: relative; word-break: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.05); font-size: var(--fs-base); line-height: 1.65; }
.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) */
.msg.me .bubble { background: var(--bubble-me); color: var(--bubble-me-text); border-bottom-left-radius: var(--r-xs); }
.msg.other .bubble { background: var(--bubble-other); border-bottom-right-radius: var(--r-xs); }
.msg .sender { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); margin-bottom: 1px; }
.msg .stamp { display: flex; align-items: center; gap: 3px; justify-content: flex-end; font-size: var(--fs-xs); color: var(--text-2); margin-top: 1px; direction: ltr; }
/* APP-01: Telegram tick states — sent/delivered = gray, READ = blue (#34b7f1). */
.msg .ticks { font-size: 13px; font-weight: 700; letter-spacing: -1px; color: #8a9099; } /* unread → clear gray */
.msg.me .ticks { color: color-mix(in srgb, var(--bubble-me-text) 78%, transparent); }
.msg .ticks.read, .msg.me .ticks.read { color: var(--tick-read); }   /* read → Telegram blue, bold */
/* 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 { border-right: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: var(--r-xs) var(--r-sm) var(--r-sm) 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 .rq-name { color: var(--accent); font-weight: 600; font-size: var(--fs-sm); }
.replyq .rq-text { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.msg img.photo { max-width: min(320px, 64vw); border-radius: var(--r-md); margin: 2px 0; cursor: pointer; }
.msg video { max-width: min(320px, 64vw); 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 span { display: inline-flex; align-items: center; gap: 4px; 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 span:hover { filter: brightness(.97); }
.reacts span:active { transform: scale(1.15); }
.reacts span.mine { background: 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: composer reply preview + edit bar — leading accent icon, accent
   bar, title in accent, snippet in secondary, close button. Shared component. */
.reply-preview { display: flex; align-items: center; gap: 8px; padding: 8px 14px 0; font-size: 12.5px; }
.reply-preview .rp-ico { color: var(--accent); flex-shrink: 0; display: flex; }
.reply-preview .rp-body { flex: 1; border-right: 3px solid var(--accent); padding-right: 8px; min-width: 0; }
.rp-name { color: var(--accent); font-weight: 600; }
.rp-text { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px; }
.composer textarea {
  flex: 1; background: var(--panel-2); border: 1px solid var(--border); border-radius: 18px;
  padding: 9px 14px; resize: none; outline: none; max-height: 120px; line-height: 1.6;
}
.send-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.send-btn.rec { background: var(--danger); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }
.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.) */
.emoji-panel { background: var(--panel); border-top: 1px solid var(--border); height: 300px; display: flex; flex-direction: column; flex-shrink: 0; }
.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-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; 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 {
  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 {
  content: ''; position: absolute; width: 58vmax; height: 58vmax; border-radius: 50%;
  filter: blur(64px); opacity: .38; pointer-events: none;
}
#callUI.voice-only .call-bg::before { background: radial-gradient(circle, #7C6CF0, transparent 62%); top: -22vmax; left: -12vmax; animation: cbg-drift1 14s ease-in-out infinite alternate; }
#callUI.voice-only .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 .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; 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 .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); direction: ltr; display: flex; align-items: center; justify-content: center; gap: 8px; }
#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; top: calc(64px + var(--sat)); 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: calc(64px + var(--sat)); right: 14px; left: auto; bottom: auto; 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; }
#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)); 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 .call-controls:has(.accept) { 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) */
#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; }
#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; }

/* ---------- voice recording bar (Telegram-style hold-to-record) ---------- */
.rec-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; min-height: 58px; }
.rec-bar .rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); animation: pulse 1.2s infinite; flex-shrink: 0; }
.rec-bar .rec-time { font-size: 14px; color: var(--text); direction: ltr; font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 44px; }
.rec-bar .rec-wave { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 2px; height: 26px; overflow: hidden; direction: ltr; }
.rec-bar .rec-wave i { width: 3px; background: var(--accent); border-radius: 2px; flex-shrink: 0; min-height: 3px; }
.rec-bar .rec-cancel { display: flex; align-items: center; gap: 5px; color: var(--text-2); font-size: 13px; flex-shrink: 0; transition: color .15s, transform .15s; }
.rec-bar.cancelling .rec-cancel { color: var(--danger); transform: translateX(-6px); }
.rec-bar .rec-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rec-bar .rec-actions button { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.rec-bar .rec-del { color: var(--danger); background: var(--panel-2); font-size: 18px; }
.rec-bar .rec-send { background: var(--accent); color: #fff; }
.rec-lock { display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--text-2); font-size: 15px; flex-shrink: 0; transition: color .15s, transform .15s; }
.rec-lock .rl-up { font-size: 13px; animation: rl-bounce 1.4s infinite; }
.rec-bar.locking .rec-lock { color: var(--accent); transform: translateY(-4px); }
@keyframes rl-bounce { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }
.rec-bar .rec-send { background: var(--accent); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 45%, transparent); }
.rec-bar.locked-bar .rec-send { width: 44px; height: 44px; }

/* ---------- round video recorder overlay (Telegram-style) ---------- */
#vnRecorder { position: fixed; inset: 0; z-index: 92; background: rgba(0,0,0,.82); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: #fff; }
#vnRecorder .vnr-stage { position: relative; width: 260px; height: 260px; }
#vnRecorder video { width: 260px; height: 260px; border-radius: 50%; object-fit: cover; background: #000; transform: scaleX(-1); }
#vnRecorder .vnr-ring { position: absolute; inset: 0; width: 260px; height: 260px; transform: rotate(-90deg); pointer-events: none; }
#vnRecorder .vnr-ring circle { fill: none; stroke-width: 3; }
#vnRecorder .vnr-ring .bg { stroke: rgba(255,255,255,.22); }
#vnRecorder .vnr-ring .fg { stroke: var(--danger); stroke-linecap: round; stroke-dasharray: 301.6; stroke-dashoffset: 301.6; transition: stroke-dashoffset .2s linear; }
#vnRecorder .vnr-time { font-size: 16px; direction: ltr; font-variant-numeric: tabular-nums; }
#vnRecorder .vnr-hint { font-size: 13px; opacity: .8; }
#vnRecorder .vnr-actions { display: flex; gap: 36px; align-items: center; }
#vnRecorder .vnr-actions button { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; }
#vnRecorder .vnr-cancel { background: rgba(255,255,255,.15); color: #fff; }
#vnRecorder .vnr-stop { background: var(--danger); color: #fff; }

.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 + RTL-anchored profile nav zones already flip via [dir=ltr] rules above */
html[dir="ltr"] .rec-bar .rec-cancel svg { transform: scaleX(-1); }
/* 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; }
html[dir="ltr"] .msg.me .bubble { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-xs); }
html[dir="ltr"] .msg.other .bubble { border-bottom-right-radius: var(--r-lg); border-bottom-left-radius: var(--r-xs); }
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-note { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); margin: 6px 12px; padding: 10px 12px; font-size: 12.5px; color: var(--text); line-height: 1.8; }
.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; }
.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 */
.dl-app { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 8px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 14.5px; color: var(--text); }
.dl-app .dl-ico { width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 17px; overflow: hidden; }
.dl-app .dl-ico img { width: 100%; height: 100%; object-fit: cover; }
.dl-app .dl-nm { flex: 1; min-width: 0; }
.dl-app .dl-go { color: var(--accent); display: flex; }
.dl-app:active { background: var(--panel-2); }

/* 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 */
.bot-av{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),#6d5dfc);font-size:20px}
.chat-item.bot-item{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent)}
.bot-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.bot-bubble{max-width:80%;padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.7;white-space:normal;word-break:break-word}
.bot-bubble.bot{align-self:flex-start;background:var(--surface-2);border:1px solid var(--border);border-bottom-left-radius:5px}
.bot-bubble.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.bot-quick{display:flex;gap:7px;overflow-x:auto;padding:9px 12px;border-top:1px solid var(--border);background:var(--surface);scrollbar-width:none}
.bot-quick::-webkit-scrollbar{display:none}
.bot-chip{flex:0 0 auto;padding:8px 13px;border-radius:18px;border:1px solid var(--accent);background:transparent;color:var(--accent);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.bot-chip:active{background:var(--accent);color:#fff}

/* 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 */
.install-card{display:flex;align-items:center;gap:11px;margin:12px;padding:13px;border:1px solid var(--accent);border-radius:14px;background:color-mix(in srgb,var(--accent) 8%,transparent)}
.install-card .ic-ic{font-size:30px;flex:0 0 auto}
/* 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); }
.home-sheet { position: relative; z-index: 2; background: var(--bg); border-radius: 24px 24px 0 0; margin-top: -22px; padding: 18px 14px 18px; display: flex; flex-direction: column; gap: 13px; }
.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; }
.auth2-card { position: relative; width: 100%; max-width: 360px; max-height: 90vh; overflow-y: auto; background: var(--bg); border: 1px solid var(--brd, var(--border)); border-radius: 24px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.6); animation: gb-pop .42s var(--ease) both; }
.auth2-x { position: absolute; top: 12px; left: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 3; }
.auth2-head { background: var(--accent-grad); color: #fff; padding: 24px 20px 22px; text-align: center; position: relative; overflow: hidden; }
.auth2-head::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 12%, rgba(255,255,255,.28), transparent 50%); pointer-events: none; }
.auth2-head .a2-hic { width: 60px; height: 60px; border-radius: 19px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; backdrop-filter: blur(6px); position: relative; animation: a2-float 3.2s var(--ease) infinite; }
.auth2-head .a2-hic svg { width: 30px; height: 30px; }
@keyframes a2-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.auth2-head .a2-t { font-size: 17.5px; font-weight: 700; position: relative; }
.auth2-head .a2-s { font-size: 12px; opacity: .92; margin-top: 6px; position: relative; }
.auth2-body { padding: 18px 16px; display: flex; flex-direction: column; gap: 11px; }
.auth2-fld { display: flex; align-items: center; gap: 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 13px; padding: 0 13px; transition: border-color var(--dur), box-shadow var(--dur); }
.auth2-fld:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth2-fld .a2-ic { display: flex; color: var(--accent); flex: 0 0 auto; }
.auth2-fld .a2-ic svg { width: 18px; height: 18px; }
.auth2-fld input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 14px; padding: 13px 0; min-width: 0; }
.auth2-fld .a2-eye { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--text-2); background: none; border: none; padding: 4px; border-radius: 8px; transition: color var(--dur); }
.auth2-fld .a2-eye.on { color: var(--accent); }
.auth2-fld .a2-eye:active { transform: scale(.9); }
.auth2-fld.a2-phone { gap: 8px; }
.auth2-fld.a2-phone input { text-align: left; }
/* minimal country-code pill on the LEFT (end in RTL), harmonised with the field */
.auth2-fld .a2-cc { flex: 0 0 auto; max-width: 40%; order: 3; background: color-mix(in srgb, var(--accent) 9%, transparent); border: none; border-inline-start: 1px solid var(--border); border-radius: 0; color: var(--text-2); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 12px 8px 12px 6px; margin-inline-start: 4px; outline: none; cursor: pointer; direction: ltr; text-align: left; }
.auth2-fld .a2-cc:focus { color: var(--accent); }
/* terms checkbox (registration) */
.a2-terms { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-2); cursor: pointer; padding: 2px; margin: -2px 0 2px; line-height: 1.7; }
.a2-terms input { position: absolute; opacity: 0; width: 0; height: 0; }
.a2-terms .a2t-box { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; color: transparent; transition: all var(--dur) var(--ease); font-size: 13px; }
.a2-terms .a2t-box svg { width: 14px; height: 14px; }
.a2-terms input:checked + .a2t-box { background: var(--accent); border-color: var(--accent); color: #fff; }
.a2-terms b { color: var(--accent); font-weight: 700; }
.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); }
.auth2-cta { margin-top: 4px; border: none; border-radius: 13px; background: var(--accent-grad); color: #fff; font-family: inherit; font-weight: 600; font-size: 14.5px; padding: 14px; display: flex; align-items: center; justify-content: center; gap: 7px; box-shadow: var(--glow); transition: transform var(--dur) var(--ease); }
.auth2-cta span { display: flex; } .auth2-cta span svg { width: 17px; height: 17px; }
.auth2-cta:active { transform: scale(.98); }
.auth2-foot { text-align: center; font-size: 13px; color: var(--text-2); margin-top: 4px; }
.auth2-foot b { color: var(--accent); cursor: pointer; }
/* 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; }
/* 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 */
.dl-group { margin: 0 12px 10px; }
.dl-group-h { font-size: 13px; font-weight: 600; margin: 12px 2px 8px; }
.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; }
.cfg-ring { position: relative; width: 46px; height: 46px; flex: 0 0 auto; }
.cfg-ring-fill { position: absolute; inset: 0; border-radius: 50%; transition: --deg .9s var(--ease);
  background: conic-gradient(from -90deg, var(--accent) var(--deg), color-mix(in srgb, var(--text-2) 22%, transparent) var(--deg)); }
.cfg-ring-fill.hot { background: conic-gradient(from -90deg, #F4BC6B var(--deg), color-mix(in srgb, var(--text-2) 22%, transparent) var(--deg)); }
.cfg-ring-core { position: absolute; inset: 4px; border-radius: 50%; background: var(--panel); display: flex; align-items: center; justify-content: center; }
.cfg-card.inactive .cfg-ring-core { background: var(--panel-2); }
.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; }
.pf-cover { position: relative; height: 130px; background: var(--accent-grad); border-radius: 0 0 var(--r-xl) var(--r-xl); margin-bottom: 52px; }
.pf-cover::after { 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; }
.pf-name { font-size: 19px; font-weight: 700; display: flex; align-items: center; justify-content: 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; }
.bot-av svg { width: 22px; height: 22px; color: #fff; }

/* 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; }
.rec-lock .rl-up { display: flex; }
.rec-lock svg { display: block; }
.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)); }

/* 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 — Telegram-style clock, dimmed until it lands */
.msg.pending .bubble { opacity: .62; }
.msg.pending .pending-clock { font-size: 11px; opacity: .85; }

/* ---- 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); }

/* ── 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(--line); 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(--line); 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(--line);
  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(--line); 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(--line);
  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 */
.chat-item.secret .chat-name::before,
.sc-badge { content: '🔒'; }
.sc-badge { font-size: 12px; margin-inline-end: 4px; }
.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(--line);
  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(--line); 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. */
.vpn-hero {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; margin-bottom: 10px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--card, rgba(127,127,127,.06));
  color: var(--text); font: inherit; text-align: start; cursor: pointer;
  transition: background .18s, border-color .18s;
}
.vpn-hero:active { transform: scale(.995); }
.vpn-hero .vh-ring {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px;
  border: 2px solid var(--text-2); display: grid; place-items: center; transition: border-color .25s;
}
.vpn-hero .vh-dot {
  width: 12px; height: 12px; border-radius: 999px; background: var(--text-2); transition: background .25s;
}
.vpn-hero .vh-tx { min-width: 0; }
.vpn-hero .vh-tx b { display: block; font-size: 15px; font-weight: 700; }
.vpn-hero .vh-tx small { display: block; font-size: 11.5px; color: var(--text-2); margin-top: 2px; }

.vpn-hero.on { border-color: var(--ok, #2ea56b); background: rgba(46, 165, 107, .12); }
.vpn-hero.on .vh-ring { border-color: var(--ok, #2ea56b); }
.vpn-hero.on .vh-dot { background: var(--ok, #2ea56b); }

.vpn-hero.busy .vh-ring { border-color: var(--accent); animation: vh-spin 1s linear infinite; }
.vpn-hero.busy .vh-dot { background: var(--accent); }
/* A dashed ring makes the rotation legible; a solid one would look static while spinning. */
.vpn-hero.busy .vh-ring { border-style: dashed; }
@keyframes vh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vpn-hero.busy .vh-ring { animation: none; } }

/* ---- VPN diagnostics sheet ----------------------------------------------- */
.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: 13px; padding: 20px 0 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); }

/* ── live traffic ── */
.hm-live { margin: 20px var(--sp-5) 0; background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: 1px solid var(--border); border-radius: 22px; padding: 14px 16px 10px; box-shadow: 0 6px 20px rgba(40,44,90,.05); }
.hl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.hl-rates { display: flex; align-items: center; gap: 14px; }
.hl-rate { display: flex; align-items: center; gap: 6px; }
.hl-rate svg { width: 15px; height: 15px; }
.hl-rate b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hl-rate span { font-size: 10.5px; color: var(--text-2); }
.hl-today { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.hl-graph { height: 58px; overflow: hidden; border-radius: var(--r-md);
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 100%); mask: linear-gradient(90deg, transparent, #000 12%, #000 100%); }
.hl-graph svg { display: block; animation: hlDrift 9s linear infinite; }
@keyframes hlDrift { to { transform: translateX(-320px); } }

/* ── quota + renewal ── */
.hm-quota { margin: 12px var(--sp-5) 0; background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: 1px solid var(--border); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 13px;
  box-shadow: 0 6px 20px rgba(40,44,90,.05); }
.hq-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.hq-head b { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.hq-bar { height: 9px; border-radius: var(--r-pill); background: var(--panel-2); overflow: hidden; }
.hq-fill { height: 100%; border-radius: var(--r-pill); background: var(--accent-grad);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--accent) 40%, transparent); transition: width .6s var(--ease); }
.hq-fill.low { background: linear-gradient(90deg, var(--danger), #F0A0AC); box-shadow: none; }
.hq-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hq-days { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.hq-days svg { width: 15px; height: 15px; }
.hq-renew { border: 0; cursor: pointer; font: inherit; background: var(--accent-grad); color: var(--accent-contrast);
  border-radius: var(--r-pill); padding: 10px 20px; font-size: 12.5px; font-weight: 700;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 32%, transparent); transition: transform .16s var(--ease); }
.hq-renew:active { transform: scale(.96); }

/* ── 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, .hl-graph svg, .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;
  min-height: 100%;                 /* the SCROLLER's height — not the window's; the dock is outside it */
  padding-bottom: 92px;             /* the dock floats over this */
  display: flex;
  flex-direction: column;
}
/* Centred, not top-anchored. The switch is the only thing in the fold, so it belongs in the
   middle of it; anchoring it to the top left a third of the screen empty and made the page
   read as "finished" right where the user was supposed to keep scrolling. */
.home-hero.flat #homeSwitch { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
.home-hero.flat #hmBody { padding-bottom: 0; }
.home-hero.flat .hm-switch { padding-top: 0; }
/* the only thing that says "there is more below" */
.hm-more { position: absolute; inset-inline: 0; bottom: 96px; margin: 0 auto; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 12px;
  background: none; border: 0; color: var(--text-2); font-size: 10.5px; font-family: inherit;
  opacity: .55; transition: opacity var(--dur) var(--ease); }
.hm-more:active { opacity: 1; }
.hm-more svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: no-preference) { .hm-more svg { animation: hm-bob 2.4s var(--ease) infinite; } }
@keyframes hm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.home.scrolled .hm-more { opacity: 0; pointer-events: none; }

/* ---- 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: 11px 4px 10px; gap: 7px; border-radius: 16px; font-size: 11px; font-weight: 600; line-height: 1.25; text-align: center; }
.qa-grid .shop-qa .qa-ic { width: 38px; height: 38px; border-radius: 12px; }
.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); }
/* The hero owns a whole viewport, so unless the sheet can also fill one the scroll range stops
   short and the sheet can never reach the top of the screen — it parks ~130px down with an empty
   band of hero above it, which reads as a broken layout rather than a short page. */
.home-hero.flat + .home-sheet { margin-top: 0; padding-top: 22px; min-height: 100%; padding-bottom: 104px; }

/* Renewal is loud only when renewal is the point. On a service with weeks left it was the
   brightest thing under the switch, which trains people to ignore it exactly when it matters. */
.hq-renew.calm { background: none; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); box-shadow: none; font-weight: 600; }

/* on short screens the stage shrinks rather than pushing the quota card off */
@media (max-height: 720px) {
  .sw-stage { width: 208px; height: 208px; }
  .sw-halo { width: 208px; height: 208px; }
  .sw-sweep, .sw-track { width: 180px; height: 180px; }
  .sw-sweep { -webkit-mask: radial-gradient(circle, transparent 80px, #000 81px, #000 88px, transparent 89px);
                      mask: radial-gradient(circle, transparent 80px, #000 81px, #000 88px, transparent 89px); }
  .sw-ripple { width: 168px; height: 168px; }
  .sw-core { width: 146px; height: 146px; }
  .sw-core .sw-ic svg { width: 40px; height: 40px; }
  .hm-live, .hm-quota { margin-top: 12px; }
}

.hl-graph.empty { display: grid; place-items: center; background: var(--panel-2); }
.hl-graph.empty span { font-size: 11.5px; color: var(--text-2); }

/* 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; }

/* 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; }