/* ============================================================
   TGPanel — OBSIDIAN DARK v4.0 — Complete Ground-Up Rewrite
   Zero inline color overrides. All tokens in one place.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..800;1,14..32,300..800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Canvas (near-black, neutral) ── */
  --c-bg:        #050506;
  --c-bg-1:      #0a0a0c;
  --c-bg-2:      #111114;
  --c-surface:   rgba(19, 19, 22, 0.86);
  --c-surface-2: rgba(26, 26, 30, 0.96);
  --c-hover:     rgba(255,255,255,0.045);
  --c-active-bg: rgba(255,255,255,0.075);
  --c-scroll:       rgba(255,255,255,0.12);
  --c-scroll-hover: rgba(255,255,255,0.22);
  --c-recess:       rgba(0,0,0,0.28);
  --c-inset:        rgba(0,0,0,0.40);
  --c-bloom-1: rgba(255,255,255,0.022);
  --c-bloom-2: rgba(255,255,255,0.012);

  /* ── Borders ── */
  --c-line:      rgba(255,255,255,0.075);
  --c-line-2:    rgba(255,255,255,0.13);
  --c-line-3:    rgba(255,255,255,0.22);

  /* ── Accent: neutral light (no hue). `on-accent` is the text/knob color on it ── */
  --c-accent:    #e9eaed;
  --c-accent-2:  #a3a8b3;
  --c-accent-rgb: 233,234,237;
  --c-accent-dim: rgba(255,255,255,0.08);
  --c-accent-glow: transparent;
  --c-on-accent: #0b0b0d;
  --c-primary-1: #f6f7f9; --c-primary-2: #dcdee3;
  --c-primary-h1: #ffffff; --c-primary-h2: #e8eaee;
  --c-primary-sh: none;

  /* ── Text ── */
  --c-t0: #f3f4f6;
  --c-t1: #c4c8d0;
  --c-t2: #8b919c;
  --c-t3: #575c66;

  /* ── Status (semantic, slightly muted) ── */
  --c-ok:     #58c987;
  --c-ok-bg:  rgba(88, 201, 135, 0.10);
  --c-ok-bdr: rgba(88, 201, 135, 0.26);

  --c-warn:     #e5b93c;
  --c-warn-bg:  rgba(229, 185, 60, 0.10);
  --c-warn-bdr: rgba(229, 185, 60, 0.26);

  --c-err:     #f0706e;
  --c-err-bg:  rgba(240, 112, 110, 0.10);
  --c-err-bdr: rgba(240, 112, 110, 0.26);

  --c-idle:     #6b7280;
  --c-idle-bg:  rgba(107, 114, 128, 0.14);
  --c-idle-bdr: rgba(107, 114, 128, 0.28);

  /* ── Extra hues: colored status pills / brand chips ── */
  --c-orange: #ffa04d; --c-orange-bg: rgba(255,160,77,0.12); --c-orange-bdr: rgba(255,160,77,0.34);
  --c-purple: #b99cff; --c-purple-bg: rgba(185,156,255,0.12); --c-purple-bdr: rgba(185,156,255,0.34);
  --c-blue:   #5aa9ff; --c-blue-bg:   rgba(90,169,255,0.12);  --c-blue-bdr:   rgba(90,169,255,0.34);
  --c-pink:   #ff7eb6; --c-pink-bg:   rgba(255,126,182,0.12); --c-pink-bdr:   rgba(255,126,182,0.34);
  --c-grid:   rgba(255,255,255,0.022);

  /* ── Liquid glass (phone tab bar + «Ещё» sheet) ── */
  --lg-bg:        rgba(34, 34, 40, 0.42);
  --lg-bg-strong: rgba(26, 26, 31, 0.74);
  --lg-sheen:     linear-gradient(180deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 46%, rgba(255,255,255,0) 100%);
  --lg-border:    rgba(255,255,255,0.14);
  --lg-hi:        rgba(255,255,255,0.28);
  --lg-lens:      rgba(255,255,255,0.11);
  --lg-lens-bdr:  rgba(255,255,255,0.10);
  --lg-shadow:    0 14px 36px rgba(0,0,0,0.55), 0 3px 10px rgba(0,0,0,0.35);

  /* ── Chart colors (monochrome) ── */
  --ch-1: #e9eaed;
  --ch-2: #8b919c;
  --ch-3: rgba(255,255,255,0.4);
  --ch-4: rgba(255,255,255,0.22);

  /* ── Layout ── */
  --sidebar-w: 88px;
  --sidebar-w-wide: 224px;
  --topbar-h:  64px;

  /* ── Radius ── */
  --r-xs:  5px;
  --r-sm:  9px;
  --r-md:  13px;
  --r-lg:  20px;
  --r-xl:  24px;

  /* ── Typography ── */
  --font-ui:   'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ── Shadows ── */
  --sh-card:   none;
  --sh-modal:  0 24px 64px rgba(0,0,0,0.6);
  --sh-float:  0 4px 12px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.5);

  /* ── Legacy token aliases ──────────────────────────────
     Views (views/*.jsx) were written against the previous token
     naming scheme. The stylesheet was rewritten to --c-* tokens but
     the views still reference the old names, so without these aliases
     every screen loses its text colors, borders and accents (values
     fall back to inherited/defaults). Mapped here to the new system. */
  --bg-1:        var(--c-bg-1);
  --bg-2:        var(--c-bg-2);
  --tx-0:        var(--c-t0);
  --tx-1:        var(--c-t1);
  --tx-2:        var(--c-t2);
  --tx-3:        var(--c-t3);
  --tx-4:        var(--c-t3);
  --line:        var(--c-line);
  --line-strong: var(--c-line-2);
  --line-accent: rgba(var(--c-accent-rgb), 0.25);
  --ok:          var(--c-ok);
  --warn:        var(--c-warn);
  --danger:      var(--c-err);
  --idle:        var(--c-idle);
  --teal:        var(--c-accent-2);
  --blue-soft:   var(--c-accent-2);
}

/* ── Light theme — calm neutral: white surfaces, near-black accent, soft
   shadows, no glows. Applies automatically when the OS is in light mode
   (unless the operator explicitly forced dark), and always when toggled to
   light via the sidebar theme switch (ThemeToggle in core/app.jsx sets
   [data-theme] and persists the choice in localStorage). Only the CORE
   tokens are overridden — every legacy alias above is a var() indirection
   onto them, so they follow automatically. Declared twice (media query +
   explicit attribute) because CSS can't share one block between them. ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --c-bg:        #f3f4f6;
    --c-bg-1:      #fafafb;
    --c-bg-2:      #eef0f3;
    --c-surface:   rgba(255, 255, 255, 0.94);
    --c-surface-2: #ffffff;
    --c-hover:     rgba(17,20,28,0.04);
    --c-active-bg: rgba(17,20,28,0.07);
    --c-scroll:       rgba(17,20,28,0.16);
    --c-scroll-hover: rgba(17,20,28,0.30);
    --c-recess:       rgba(17,20,28,0.035);
    --c-inset:        rgba(17,20,28,0.05);
    --c-bloom-1: transparent;
    --c-bloom-2: transparent;

    --c-line:      rgba(17,20,28,0.09);
    --c-line-2:    rgba(17,20,28,0.15);
    --c-line-3:    rgba(17,20,28,0.26);

    --c-accent:    #17191e;
    --c-accent-2:  #5b616d;
    --c-accent-rgb: 23,25,30;
    --c-accent-dim: rgba(23,25,30,0.07);
    --c-accent-glow: transparent;
    --c-on-accent: #ffffff;
    --c-primary-1: #2c3038; --c-primary-2: #14161a;
    --c-primary-h1: #3a3f48; --c-primary-h2: #1f2229;
    --c-primary-sh: none;

    --c-t0: #14161a;
    --c-t1: #3a3f48;
    --c-t2: #6a707c;
    --c-t3: #a2a8b2;

    --c-ok:     #15803d;
    --c-ok-bg:  rgba(21,128,61,0.09);
    --c-ok-bdr: rgba(21,128,61,0.25);

    --c-warn:     #b45309;
    --c-warn-bg:  rgba(180,83,9,0.09);
    --c-warn-bdr: rgba(180,83,9,0.26);

    --c-err:     #c62828;
    --c-err-bg:  rgba(198,40,40,0.08);
    --c-err-bdr: rgba(198,40,40,0.25);

    --c-idle:     #7b8190;
    --c-idle-bg:  rgba(123,129,144,0.12);
    --c-idle-bdr: rgba(123,129,144,0.26);

    --c-orange: #c2570a; --c-orange-bg: rgba(194,87,10,0.09); --c-orange-bdr: rgba(194,87,10,0.26);
    --c-purple: #6d3fe0; --c-purple-bg: rgba(109,63,224,0.09); --c-purple-bdr: rgba(109,63,224,0.26);
    --c-blue:   #1d6fe0; --c-blue-bg:   rgba(29,111,224,0.09); --c-blue-bdr:   rgba(29,111,224,0.26);
    --c-pink:   #d6336c; --c-pink-bg:   rgba(214,51,108,0.09); --c-pink-bdr:   rgba(214,51,108,0.26);
    --c-grid:   rgba(17,20,28,0.04);
    --lg-bg:        rgba(255, 255, 255, 0.52);
    --lg-bg-strong: rgba(255, 255, 255, 0.82);
    --lg-sheen:     linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.06) 100%);
    --lg-border:    rgba(255,255,255,0.8);
    --lg-hi:        rgba(255,255,255,0.95);
    --lg-lens:      rgba(17,20,28,0.07);
    --lg-lens-bdr:  rgba(17,20,28,0.06);
    --lg-shadow:    0 12px 32px rgba(17,20,28,0.16), 0 2px 8px rgba(17,20,28,0.08), 0 0 0 0.5px rgba(17,20,28,0.10);

    --ch-1: #17191e;
    --ch-2: #6a707c;
    --ch-3: rgba(17,20,28,0.38);
    --ch-4: rgba(17,20,28,0.2);

    --sh-card:   0 1px 2px rgba(17,20,28,0.04);
    --sh-modal:  0 12px 40px rgba(17,20,28,0.18), 0 2px 6px rgba(17,20,28,0.08);
    --sh-float:  0 4px 14px rgba(17,20,28,0.12), 0 1px 3px rgba(17,20,28,0.08);
  }
}
:root[data-theme="light"] {
  --c-bg:        #f3f4f6;
  --c-bg-1:      #fafafb;
  --c-bg-2:      #eef0f3;
  --c-surface:   rgba(255, 255, 255, 0.94);
  --c-surface-2: #ffffff;
  --c-hover:     rgba(17,20,28,0.04);
  --c-active-bg: rgba(17,20,28,0.07);
  --c-scroll:       rgba(17,20,28,0.16);
  --c-scroll-hover: rgba(17,20,28,0.30);
  --c-recess:       rgba(17,20,28,0.035);
  --c-inset:        rgba(17,20,28,0.05);
  --c-bloom-1: transparent;
  --c-bloom-2: transparent;

  --c-line:      rgba(17,20,28,0.09);
  --c-line-2:    rgba(17,20,28,0.15);
  --c-line-3:    rgba(17,20,28,0.26);

  --c-accent:    #17191e;
  --c-accent-2:  #5b616d;
  --c-accent-rgb: 23,25,30;
  --c-accent-dim: rgba(23,25,30,0.07);
  --c-accent-glow: transparent;
  --c-on-accent: #ffffff;
  --c-primary-1: #2c3038; --c-primary-2: #14161a;
  --c-primary-h1: #3a3f48; --c-primary-h2: #1f2229;
  --c-primary-sh: none;

  --c-t0: #14161a;
  --c-t1: #3a3f48;
  --c-t2: #6a707c;
  --c-t3: #a2a8b2;

  --c-ok:     #15803d;
  --c-ok-bg:  rgba(21,128,61,0.09);
  --c-ok-bdr: rgba(21,128,61,0.25);

  --c-warn:     #b45309;
  --c-warn-bg:  rgba(180,83,9,0.09);
  --c-warn-bdr: rgba(180,83,9,0.26);

  --c-err:     #c62828;
  --c-err-bg:  rgba(198,40,40,0.08);
  --c-err-bdr: rgba(198,40,40,0.25);

  --c-idle:     #7b8190;
  --c-idle-bg:  rgba(123,129,144,0.12);
  --c-idle-bdr: rgba(123,129,144,0.26);

  --c-orange: #c2570a; --c-orange-bg: rgba(194,87,10,0.09); --c-orange-bdr: rgba(194,87,10,0.26);
  --c-purple: #6d3fe0; --c-purple-bg: rgba(109,63,224,0.09); --c-purple-bdr: rgba(109,63,224,0.26);
  --c-blue:   #1d6fe0; --c-blue-bg:   rgba(29,111,224,0.09); --c-blue-bdr:   rgba(29,111,224,0.26);
  --c-pink:   #d6336c; --c-pink-bg:   rgba(214,51,108,0.09); --c-pink-bdr:   rgba(214,51,108,0.26);
  --c-grid:   rgba(17,20,28,0.04);
  --lg-bg:        rgba(255, 255, 255, 0.52);
  --lg-bg-strong: rgba(255, 255, 255, 0.82);
  --lg-sheen:     linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.06) 100%);
  --lg-border:    rgba(255,255,255,0.8);
  --lg-hi:        rgba(255,255,255,0.95);
  --lg-lens:      rgba(17,20,28,0.07);
  --lg-lens-bdr:  rgba(17,20,28,0.06);
  --lg-shadow:    0 12px 32px rgba(17,20,28,0.16), 0 2px 8px rgba(17,20,28,0.08), 0 0 0 0.5px rgba(17,20,28,0.10);

  --ch-1: #17191e;
  --ch-2: #6a707c;
  --ch-3: rgba(17,20,28,0.38);
  --ch-4: rgba(17,20,28,0.2);

  --sh-card:   0 1px 2px rgba(17,20,28,0.04);
  --sh-modal:  0 12px 40px rgba(17,20,28,0.18), 0 2px 6px rgba(17,20,28,0.08);
  --sh-float:  0 4px 14px rgba(17,20,28,0.12), 0 1px 3px rgba(17,20,28,0.08);
}

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root { height: 100%; }
html {
  background: var(--c-bg);
  color: var(--c-t1);
  font-family: var(--font-ui);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
::selection { background: rgba(var(--c-accent-rgb),0.2); color: var(--c-t0); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }
input:focus, textarea:focus, select:focus { outline: none; }
a { color: inherit; text-decoration: none; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-scroll); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-scroll-hover); }

/* ── App Shell ───────────────────────────────────────── */
.app-shell {
  display: flex;
  height: 100%;
  background: var(--c-bg);
  position: relative;
  overflow: hidden;
}

/* Backdrop: soft bloom + a fine grid that fades out toward the edges */
.bloom-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 6% 0%, var(--c-bloom-1) 0%, transparent 62%),
    radial-gradient(ellipse 48% 42% at 100% 100%, var(--c-bloom-2) 0%, transparent 62%);
}
.bloom-bg::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--c-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 58% 38%, #000 18%, transparent 80%);
          mask-image: radial-gradient(ellipse 90% 85% at 58% 38%, #000 18%, transparent 80%);
}
.bloom-grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Sidebar: icon rail (icon over a small label) ─────────
   `.wide` expands it to the classic icon-left layout (also used by the phone
   drawer). The three layouts share one set of rules: the layout knobs are
   custom properties flipped on `.sidebar.wide`. */
.sidebar {
  --ni-dir: column; --ni-jc: center; --ni-gap: 4px; --ni-pad: 7px 3px 6px;
  --ni-fs: 10px; --ni-ta: center; --ni-cpos: absolute;
  position: relative;
  z-index: 10;
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-bg-1) 94%, transparent),
    color-mix(in srgb, var(--c-bg) 88%, transparent));
  border-right: 1px solid var(--c-line);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  transition: width 0.2s ease, flex-basis 0.2s ease;
}
.sidebar.wide {
  --ni-dir: row; --ni-jc: flex-start; --ni-gap: 11px; --ni-pad: 8px 11px;
  --ni-fs: 13px; --ni-ta: left; --ni-cpos: static;
  width: var(--sidebar-w-wide);
  flex-basis: var(--sidebar-w-wide);
}

/* Brand */
.brand {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  height: var(--topbar-h); padding: 0 8px;
  border-bottom: 1px solid var(--c-line);
  flex: 0 0 var(--topbar-h);
  cursor: pointer;
}
.sidebar.wide .brand { justify-content: flex-start; padding: 0 18px; }
.brand-mark {
  /* Fixed brand colors (not theme tokens) — the TelegaFather mark reads the
     same pink square + red-orange plane on both the dark and light theme. */
  width: 34px; height: 34px; border-radius: 11px;
  background: #f6d9d4;
  display: grid; place-items: center;
  color: #ec3013;
  flex: 0 0 34px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.brand-mark svg { width: 16px; height: 16px; }
.brand-name {
  display: none;
  font-size: 15px; font-weight: 700; letter-spacing: -0.025em; color: var(--c-t0);
}
.sidebar.wide .brand-name { display: block; }
.brand-name em { font-style: normal; color: var(--c-t3); font-weight: 500; font-size: 13px; }

/* Nav */
.nav {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 8px 7px;
  display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.nav:hover { scrollbar-color: var(--c-scroll) transparent; }
/* Section label: a hairline divider in the rail, a text heading when wide. */
.nav-label {
  flex: 0 0 1px; height: 1px; margin: 7px 12px; padding: 0;
  background: var(--c-line); overflow: hidden;
  font-size: 0; line-height: 0; color: transparent;
}
.sidebar.wide .nav-label {
  flex: 0 0 auto; height: auto; margin: 0; padding: 16px 10px 5px;
  background: none; overflow: visible;
  font-size: 10px; line-height: normal; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--c-t3);
}
.nav .nav-label-fb {
  flex: 0 0 auto; height: auto; overflow: visible; background: none;
  margin: 8px 0 3px; padding: 0; display: flex; justify-content: center;
}
.sidebar.wide .nav .nav-label-fb { margin: 0; padding: 16px 10px 7px; justify-content: flex-start; }
.fb-plate {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 6px; border-radius: 99px;
  background: rgba(24, 119, 242, 0.12); border: 1px solid rgba(24, 119, 242, 0.28);
  color: #4b9bff; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.4;
}
.sidebar:not(.wide) .fb-plate { padding: 4px; }
.sidebar:not(.wide) .fb-plate-txt { display: none; }

.nav-item {
  display: flex; flex-direction: var(--ni-dir); align-items: center; justify-content: var(--ni-jc);
  gap: var(--ni-gap); padding: var(--ni-pad); width: 100%;
  border-radius: 10px; border: 1px solid transparent;
  color: var(--c-t2); font-size: var(--ni-fs); font-weight: 600;
  line-height: 1.15; text-align: var(--ni-ta);
  transition: color 0.13s, background 0.13s, border-color 0.13s, box-shadow 0.13s;
  position: relative;
}
.nav-item svg { width: 19px; height: 19px; flex: 0 0 19px; transition: color 0.13s; }
.nav-item .nav-txt { min-width: 0; overflow-wrap: break-word; }
.nav-item:hover { color: var(--c-t0); background: var(--c-hover); }
.nav-item:hover svg { color: var(--c-t0); }
.nav-item.active {
  color: var(--c-t0);
  background: var(--c-active-bg);
}
.nav-item.active svg { color: var(--c-t0); }
.nav-count {
  position: var(--ni-cpos); top: 3px; right: 4px; margin-left: auto;
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px;
  font-size: 9.5px; font-family: var(--font-mono); font-weight: 700; line-height: 1;
  color: var(--c-t1); border-radius: 99px;
  background: var(--c-surface-2); border: 1px solid var(--c-line-2);
}
.nav-item.active .nav-count { color: var(--c-t0); border-color: var(--c-line-3); }

/* Sidebar footer — theme switch + operator */
.sidebar-footer {
  padding: 6px 8px 10px; border-top: 1px solid var(--c-line);
  display: flex; flex-direction: column; gap: 3px;
}
/* Rail width toggle: a small round button sitting on the sidebar's edge */
.rail-toggle {
  position: absolute; top: 76px; right: -13px; z-index: 12;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-surface-2); border: 1px solid var(--c-line-2); color: var(--c-t2);
  box-shadow: var(--sh-float); transition: color 0.13s, border-color 0.13s;
}
.rail-toggle:hover { color: var(--c-t0); border-color: var(--c-line-3); }
.rail-toggle svg { width: 14px; height: 14px; transition: transform 0.2s; }
.sidebar.wide .rail-toggle svg { transform: rotate(180deg); }
.operator-pill {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 2px 0; border-radius: 14px;
}
.sidebar.wide .operator-pill { justify-content: flex-start; padding: 8px 10px; gap: 10px; background: var(--c-hover); }
.operator-pill .op-ava {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-active-bg); border: 1px solid var(--c-line-2);
  display: grid; place-items: center; color: var(--c-t0); flex: 0 0 32px;
  font-size: 13px; font-weight: 700; text-transform: uppercase;
}
.operator-pill .op-open {
  display: flex; align-items: center; gap: inherit; min-width: 0;
  border-radius: 10px; text-align: left; color: inherit;
}
.sidebar.wide .operator-pill .op-open { flex: 1; }
.operator-pill .op-open:hover .op-ava { border-color: var(--c-line-3); }
.operator-pill .op-open:hover .op-name { text-decoration: underline; text-underline-offset: 2px; }
.operator-pill .op-info { display: none; }
.sidebar.wide .operator-pill .op-info { display: block; flex: 1; min-width: 0; }
.operator-pill .op-name { font-size: 12.5px; font-weight: 600; color: var(--c-t0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operator-pill .op-role { font-size: 11px; color: var(--c-t3); }
.operator-pill .op-logout {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  color: var(--c-t3); transition: color 0.13s, background 0.13s;
}
.operator-pill .op-logout:hover { color: var(--c-err); background: var(--c-err-bg); }

/* ── Main ────────────────────────────────────────────── */
.main {
  /* No z-index on purpose: it must not form its own stacking context, or the
     phone tab bar (a sibling) would paint above modals opened inside the view. */
  position: relative;
  flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column;
}

/* Topbar */
.topbar {
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 28px;
  border-bottom: 1px solid var(--c-line);
  background: color-mix(in srgb, var(--c-bg) 55%, transparent);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  position: relative; z-index: 20;
}
.topbar .col { min-width: 0; }
.topbar h1 {
  font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--c-t0);
  line-height: 1.2; white-space: nowrap;
}
.topbar .sub {
  font-size: 12px; color: var(--c-t3); font-weight: 400; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(56vw, 760px);
}
.topbar-spacer { flex: 1; }
/* Notification popover: opaque, so page content never shows through it */
.notif-pop { background: var(--c-bg-1); }

/* Acting account pill */
.acting {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 14px 5px 6px; border-radius: 99px;
  background: var(--c-surface); border: 1px solid var(--c-line-2);
  transition: border-color 0.15s, background 0.15s; cursor: pointer;
}
.acting:hover { border-color: var(--c-line-3); background: var(--c-surface-2); }
.acting .ava { width: 28px; height: 28px; }
.acting-meta { text-align: left; white-space: nowrap; }
.acting-meta .lbl { font-size: 10px; color: var(--c-t3); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; display: block; }
.acting-meta .nm { font-size: 12.5px; color: var(--c-t0); font-weight: 600; }

/* ── Content ──────────────────────────────────────────── */
.content { flex: 1; overflow-y: auto; padding: 26px 28px 34px; }
.view {
  max-width: 1360px; margin: 0 auto;
  animation: viewIn 0.22s ease;
}
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Cards — dark glass with a rim light on the top edge ──
   (No backdrop-filter here on purpose: it would make every card the
   containing block for `position: fixed` modals rendered inside one.) */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  position: relative;
  transition: border-color 0.15s;
}
.card-pad { padding: 22px; }
.card:hover { border-color: var(--c-line-2); }
.card-glow {
  border-color: var(--c-line-3);
}

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--c-t1);
  background: var(--c-hover);
  border: 1px solid var(--c-line);
  transition: color 0.13s, background 0.13s, border-color 0.13s, transform 0.1s; white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { color: var(--c-t0); border-color: var(--c-line-2); background: var(--c-active-bg); }
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

.btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.btn-icon { width: 36px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }

/* Primary — flat accent fill */
.btn-primary {
  background: var(--c-primary-1);
  color: var(--c-on-accent); border-color: transparent;
  font-weight: 600;
  box-shadow: var(--c-primary-sh);
}
.btn-primary:hover {
  background: var(--c-primary-2);
  color: var(--c-on-accent); border-color: transparent;
  box-shadow: var(--c-primary-sh);
}

.btn-ghost { background: transparent; border-color: transparent; color: var(--c-t2); }
.btn-ghost:hover { background: var(--c-hover); color: var(--c-t0); border-color: transparent; }

.btn-danger { color: var(--c-err); border-color: var(--c-err-bdr); background: var(--c-err-bg); }
.btn-danger:hover { background: color-mix(in srgb, var(--c-err) 16%, transparent); }

.btn-warn { color: var(--c-warn); border-color: var(--c-warn-bdr); background: var(--c-warn-bg); }
.btn-warn:hover { background: color-mix(in srgb, var(--c-warn) 16%, transparent); }

.btn-ok { color: var(--c-ok); border-color: var(--c-ok-bdr); background: var(--c-ok-bg); }
.btn-ok:hover { background: color-mix(in srgb, var(--c-ok) 16%, transparent); }

/* ── Badges / Tags — pills with a glowing dot ──────────── */
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  height: 24px; padding: 0 10px; border-radius: 99px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
  border: 1px solid transparent;
}
.tag .dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }
.tag-ok { color: var(--c-ok); background: var(--c-ok-bg); border-color: var(--c-ok-bdr); }
.tag-ok .dot { background: var(--c-ok); }
.tag-warn { color: var(--c-warn); background: var(--c-warn-bg); border-color: var(--c-warn-bdr); }
.tag-warn .dot { background: var(--c-warn); }
.tag-danger { color: var(--c-err); background: var(--c-err-bg); border-color: var(--c-err-bdr); }
.tag-danger .dot { background: var(--c-err); }
.tag-idle { color: var(--c-idle); background: var(--c-idle-bg); border-color: var(--c-idle-bdr); }
.tag-idle .dot { background: var(--c-idle); box-shadow: none; }
.tag-deleted { color: var(--c-t3); background: var(--c-hover); border-color: var(--c-line); text-decoration: line-through; }
.tag-deleted .dot { background: var(--c-t3); box-shadow: none; }
.tag-orange { color: var(--c-orange); background: var(--c-orange-bg); border-color: var(--c-orange-bdr); }
.tag-orange .dot { background: var(--c-orange); }
.tag-purple { color: var(--c-purple); background: var(--c-purple-bg); border-color: var(--c-purple-bdr); }
.tag-purple .dot { background: var(--c-purple); }
.tag-blue { color: var(--c-blue); background: var(--c-blue-bg); border-color: var(--c-blue-bdr); }
.tag-blue .dot { background: var(--c-blue); }
.tag-pink { color: var(--c-pink); background: var(--c-pink-bg); border-color: var(--c-pink-bdr); }
.tag-pink .dot { background: var(--c-pink); }

/* Avatar */
.ava {
  width: 34px; height: 34px; border-radius: var(--r-sm); flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
  color: var(--c-t0); position: relative;
}
.ava.round { border-radius: 50%; }

/* ── Form Controls ────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-lbl { font-size: 11.5px; font-weight: 600; color: var(--c-t2); }
.field-hint { font-size: 11px; color: var(--c-t3); }

.input, .textarea, .select {
  width: 100%;
  background: var(--c-bg-2); border: 1px solid var(--c-line-2);
  border-radius: var(--r-md); padding: 10px 14px;
  font-size: 13.5px; color: var(--c-t0);
  box-shadow: inset 0 1px 2px var(--c-inset);
  transition: border-color 0.13s, box-shadow 0.13s;
}
.input::placeholder, .textarea::placeholder { color: var(--c-t3); }
.input:focus, .textarea:focus, .select:focus {
  border-color: rgba(var(--c-accent-rgb), 0.4);
  box-shadow: 0 0 0 3px var(--c-accent-dim);
  background: var(--c-bg-1);
}
.textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
.select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a93a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

.search {
  display: flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 14px; border-radius: var(--r-md);
  background: var(--c-bg-2); border: 1px solid var(--c-line-2);
  box-shadow: inset 0 1px 2px var(--c-inset);
  transition: border-color 0.13s, box-shadow 0.13s; min-width: 190px;
}
.search:focus-within {
  border-color: rgba(var(--c-accent-rgb), 0.4);
  box-shadow: 0 0 0 3px var(--c-accent-dim);
}
.search svg { width: 15px; height: 15px; color: var(--c-t3); flex: 0 0 15px; }
.search input { flex: 1; background: none; border: none; font-size: 13px; color: var(--c-t0); }
.search input::placeholder { color: var(--c-t3); }

/* Toggle */
.toggle {
  width: 42px; height: 24px; border-radius: 99px; flex: 0 0 42px;
  background: var(--c-bg-2); border: 1px solid var(--c-line-2);
  box-shadow: inset 0 1px 2px var(--c-inset);
  position: relative; transition: all 0.18s ease; cursor: pointer;
}
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-t3); transition: transform 0.2s cubic-bezier(0.3,1.5,0.5,1), background 0.18s, box-shadow 0.18s;
}
.toggle.on { background: var(--c-accent); border-color: transparent; }
.toggle.on::after { transform: translateX(18px); background: var(--c-on-accent); }

/* Checkbox */
.cbx {
  width: 18px; height: 18px; border-radius: 6px; flex: 0 0 18px;
  border: 1.5px solid var(--c-line-3); background: var(--c-bg-2);
  display: grid; place-items: center; transition: all 0.13s; cursor: pointer;
}
.cbx svg { width: 11px; height: 11px; color: var(--c-on-accent); opacity: 0; transition: opacity 0.1s; }
.cbx.on { background: var(--c-accent); border-color: transparent; }
.cbx.on svg { opacity: 1; }

/* ── Tables ───────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table thead th {
  text-align: left; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-t3); font-weight: 700; padding: 14px 14px 10px;
  border-bottom: 1px solid var(--c-line);
}
.table tbody tr { transition: background 0.1s; }
.table tbody tr:hover { background: var(--c-hover); }
.table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--c-line); font-size: 13.5px; vertical-align: middle; }
.table tbody tr.sel { background: rgba(var(--c-accent-rgb),0.06); }
.table tbody tr:last-child td { border-bottom: none; }
.mono { font-family: var(--font-mono); }

/* ── Modal ────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: grid; place-items: center; padding: 20px;
  animation: fadeIn 0.18s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: 100%; max-width: 500px; max-height: 88vh; overflow-y: auto;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-2);
  border-radius: 20px; box-shadow: var(--sh-modal);
  animation: modalIn 0.24s cubic-bezier(0.2,0.9,0.3,1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }

.modal-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--c-line); }
.modal-head h3 { font-size: 16px; font-weight: 700; color: var(--c-t0); letter-spacing: -0.02em; }
.modal-body { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 18px 24px; border-top: 1px solid var(--c-line); }

.badge-status-glow {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
  display: grid; place-items: center; color: #050607;
  box-shadow: 0 0 24px rgba(74,222,128,0.5);
  margin: 0 auto 8px;
}

/* ── Toasts ───────────────────────────────────────────── */
.toasts {
  position: fixed; bottom: 22px; right: 22px; z-index: 80;
  display: flex; flex-direction: column; gap: 10px;
}
.toast {
  display: flex; align-items: center; gap: 11px;
  min-width: 260px; max-width: 380px; padding: 12px 16px;
  background: var(--c-surface-2); border: 1px solid var(--c-line-2);
  border-radius: var(--r-md); box-shadow: var(--sh-float);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: toastIn 0.25s cubic-bezier(0.2,0.9,0.3,1);
  font-size: 13px; color: var(--c-t1);
}
@keyframes toastIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.toast .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 28px; }
.toast .ic svg { width: 15px; height: 15px; }
.toast.ok .ic { background: var(--c-ok-bg); color: var(--c-ok); }
.toast.info .ic { background: var(--c-accent-dim); color: var(--c-accent); }
.toast.warn .ic { background: var(--c-warn-bg); color: var(--c-warn); }
.toast.danger .ic { background: var(--c-err-bg); color: var(--c-err); }

/* ── Utility Classes ──────────────────────────────────── */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap4 { gap: 4px; } .gap6 { gap: 6px; } .gap8 { gap: 8px; }
.gap10 { gap: 10px; } .gap12 { gap: 12px; } .gap14 { gap: 14px; }
.gap16 { gap: 16px; } .gap18 { gap: 18px; } .gap20 { gap: 20px; }
.muted { color: var(--c-t2); } .faint { color: var(--c-t3); }
.grow { flex: 1; } .wrap { flex-wrap: wrap; }
.divider { height: 1px; background: var(--c-line); }

.section-title {
  font-size: 12.5px; font-weight: 700; color: var(--c-t1);
  letter-spacing: 0.01em; display: flex; align-items: center; gap: 8px;
}
.section-title svg { width: 15px; height: 15px; color: var(--c-t3); }

.kpi-num {
  font-size: 30px; font-weight: 800; color: var(--c-t0);
  letter-spacing: -0.035em; line-height: 1;
}

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 12px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; color: var(--c-t2);
  background: var(--c-hover); border: 1px solid var(--c-line); cursor: pointer;
  transition: all 0.12s;
}
.chip:hover { color: var(--c-t0); border-color: var(--c-line-2); }
.chip.on { color: var(--c-t0); background: var(--c-active-bg); border-color: var(--c-line-3); }

.progress { height: 5px; border-radius: 99px; background: var(--c-hover); overflow: hidden; }
.progress > i {
  display: block; height: 100%; border-radius: 99px;
  background: var(--c-accent); transition: width 0.35s ease;
}

.empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 48px 16px; text-align: center; color: var(--c-t3);
}
.empty svg { width: 32px; height: 32px; opacity: 0.35; }

/* ── Dropdown ─────────────────────────────────────────── */
.dropdown {
  position: absolute; z-index: 50; min-width: 190px;
  background: var(--c-surface-2); border: 1px solid var(--c-line-2);
  border-radius: var(--r-md); box-shadow: var(--sh-modal);
  padding: 5px; animation: ddIn 0.14s ease;
}
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dd-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: var(--r-xs);
  font-size: 12.5px; font-weight: 500; color: var(--c-t1); cursor: pointer; transition: all 0.11s;
}
.dd-item svg { width: 15px; height: 15px; color: var(--c-t3); }
.dd-item:hover { background: var(--c-hover); color: var(--c-t0); }
.dd-item.danger { color: var(--c-err); }
.dd-item.danger:hover { background: var(--c-err-bg); }
.dd-sep { height: 1px; background: var(--c-line); margin: 4px 3px; }

/* ── Dashboard Specific ───────────────────────────────── */
.dash-kpi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px;
}
.dash-kpi, .dash-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg); box-shadow: var(--sh-card);
}
.dash-kpi {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px; padding: 20px;
  background: var(--c-surface);
}
.dash-kpi:hover, .dash-card:hover { border-color: var(--c-line-2); }
.dash-kpi-icon {
  width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--c-hover); border: 1px solid var(--c-line-2);
}
.dash-kpi-icon svg { width: 17px; height: 17px; color: var(--c-t1); }

.dash-split {
  display: grid; gap: 16px; margin-top: 16px;
}
.dash-card { padding: 20px; }

/* ── Campaigns ─────────────────────────────────────────── */
.cmp-tabs, .pill-tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.cmp-tab, .pill-tab {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 18px; border-radius: 99px;
  background: var(--c-surface); border: 1px solid var(--c-line-2);
  font-weight: 600; font-size: 13px; color: var(--c-t2);
  transition: all 0.13s; cursor: pointer; white-space: nowrap;
}
.cmp-tab svg, .pill-tab svg { width: 16px; height: 16px; }
.cmp-tab:hover, .pill-tab:hover { color: var(--c-t0); border-color: var(--c-line-3); background: var(--c-surface-2); }
.cmp-tab.on, .pill-tab.on {
  color: var(--c-t0);
  background: var(--c-active-bg);
  border-color: var(--c-line-3);
}
.cmp-tab.on svg, .pill-tab.on svg { color: var(--c-t0); }
.pill-tab .n { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--c-t3); }
.pill-tab.on .n { color: var(--c-t1); }

.cmp-grid { display: grid; grid-template-columns: 270px 1fr; gap: 16px; align-items: start; }
@media (max-width: 960px) { .cmp-grid { grid-template-columns: 1fr; } }

.cmp-rail {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: 16px; box-shadow: var(--sh-card);
}
.cmp-rail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; border-bottom: 1px solid var(--c-line);
}
.cmp-rail-head .lbl { font-size: 12.5px; font-weight: 700; color: var(--c-t0); }

.camp-item {
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  border-radius: var(--r-sm); background: var(--c-hover);
  border: 1px solid var(--c-line); transition: all 0.13s; cursor: pointer;
}
.camp-item:hover { border-color: var(--c-line-2); background: var(--c-active-bg); }
.camp-item.sel { border-color: rgba(var(--c-accent-rgb),0.3); background: rgba(var(--c-accent-rgb),0.05); }
.camp-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.camp-name { font-weight: 600; font-size: 13px; color: var(--c-t0); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--c-t2); }

.cmp-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--c-line); }
.tbl-scroll { overflow-x: auto; }
.ce { text-align: center; }

.acc-cell { display: flex; align-items: center; gap: 10px; }
.acc-name { font-weight: 600; color: var(--c-t0); font-size: 13px; }
.acc-sub { font-size: 11px; color: var(--c-t3); }

.chats-panel { padding: 16px 20px; background: var(--c-recess); border-top: 1px solid var(--c-line); }
.chats-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.chats-box {
  display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow-y: auto;
  padding: 10px; background: var(--c-bg); border-radius: var(--r-sm); border: 1px solid var(--c-line);
}

.chat-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border-radius: 6px; background: var(--c-hover); border: 1px solid var(--c-line);
  font-size: 12px; font-weight: 500; color: var(--c-t1); cursor: pointer; transition: all 0.12s;
}
.chat-chip:hover { border-color: var(--c-line-2); color: var(--c-t0); }
.chat-chip.sel { background: var(--c-accent-dim); border-color: rgba(var(--c-accent-rgb),0.3); color: var(--c-accent); }

/* ── Posts / Templates ─────────────────────────────────── */
.tplchip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  border-radius: var(--r-sm); background: var(--c-hover); border: 1px solid var(--c-line);
  font-size: 12.5px; cursor: pointer; transition: all 0.13s;
}
.tplchip:hover { border-color: var(--c-line-2); background: var(--c-surface); }
.tplchip.on { background: var(--c-accent-dim); border-color: rgba(var(--c-accent-rgb),0.3); color: var(--c-t0); }
.tplthumb { width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0; }
.aibadge {
  font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
  background: var(--c-hover); color: var(--c-t2); border: 1px solid var(--c-line);
}
.usedin {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  color: var(--c-accent); background: var(--c-accent-dim); padding: 3px 8px; border-radius: 6px;
}

.arow { transition: background 0.1s; }
.arow:hover { background: var(--c-hover); }
.exp-parent { background: rgba(var(--c-accent-rgb),0.04) !important; }
.exp-sec { font-size: 13px; font-weight: 700; color: var(--c-t1); display: flex; align-items: center; gap: 7px; }

/* ── Campaign / chats missing styles ──────────────────────
   These class names are used by views/campaigns.jsx (and the
   340px split layouts) but were never defined, so campaign
   statuses, chat chips, folder rows and the inline filter all
   rendered unstyled. Defined here against the token system. */

/* "Running" status tag — accent with a pulsing dot */
.tag-run { color: var(--c-accent); background: var(--c-accent-dim); border-color: rgba(var(--c-accent-rgb),0.3); }
.tag-run .dot { background: var(--c-accent); animation: pulseDot 1.4s ease-in-out infinite; }
@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Paused progress bar — striped/dimmed */
.progress.pw > i {
  background: repeating-linear-gradient(45deg, var(--c-warn) 0 6px, color-mix(in srgb, var(--c-warn) 35%, transparent) 6px 12px);
}

/* Chat-chip variants: folder vs already-joined */
.chip.fld { color: var(--c-t1); background: var(--c-hover); border-color: var(--c-line-2); }
.chip.jd  { color: var(--c-ok); background: var(--c-ok-bg); border-color: var(--c-ok-bdr); }

/* Compact inline chat filter (ChatsPanel) */
.chat-search {
  display: flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 10px; border-radius: var(--r-sm);
  background: var(--c-bg-2); border: 1px solid var(--c-line-2); min-width: 150px;
  transition: border-color 0.13s, box-shadow 0.13s;
}
.chat-search:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-dim); }
.chat-search svg { width: 13px; height: 13px; color: var(--c-t3); flex: 0 0 13px; }
.chat-search input { flex: 1; min-width: 0; background: none; border: none; font-size: 12.5px; color: var(--c-t0); }
.chat-search input::placeholder { color: var(--c-t3); }

/* Folder rows (Folders / PickFolder modals) */
.frow {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin-top: 8px; border-radius: var(--r-md);
  background: var(--c-bg-1); border: 1px solid var(--c-line);
  transition: border-color 0.13s, background 0.13s;
}
.frow:hover { border-color: var(--c-line-2); background: var(--c-hover); }
.fi {
  width: 34px; height: 34px; border-radius: var(--r-sm); flex: 0 0 34px;
  display: grid; place-items: center;
  background: var(--c-accent-dim); border: 1px solid rgba(var(--c-accent-rgb),0.2);
}
.fi svg { width: 16px; height: 16px; color: var(--c-accent); }

/* Numeric campaign cells: dimmed zero + semantic colors */
.ce.z { color: var(--c-t3); opacity: 0.45; }
.ce.g { color: var(--c-ok); }
.ce.p { color: var(--c-warn); }
.ce.o { color: var(--c-t2); }

/* Chevron / expand cell */
.dots { color: var(--c-t3); display: inline-flex; align-items: center; }

/* Sticky settings action bar — keeps Save reachable on a long page and
   highlights when there are unsaved changes. */
.settings-bar {
  display: flex; align-items: center; gap: 10px;
  position: sticky; bottom: 12px; z-index: 5;
  margin-top: 8px; padding: 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--c-bg-1) 94%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--c-line);
}
.settings-bar.dirty { border-color: var(--c-warn-bdr); }

/* ── Accordion (collapsible settings-style sections) ─────── */
.acc {
  border-radius: 14px; border: 1px solid var(--c-line);
  background: var(--c-surface); overflow: hidden;
}
.acc-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 16px; text-align: left; cursor: pointer;
  transition: background 0.13s;
}
.acc-head:hover { background: var(--c-hover); }
.acc-ico {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px;
  display: grid; place-items: center;
  background: var(--c-hover); color: var(--c-t2);
  transition: color 0.13s, background 0.13s;
}
.acc-ico svg { width: 16px; height: 16px; }
.acc-head:hover .acc-ico, .acc.open .acc-ico { color: var(--c-t0); background: var(--c-active-bg); }
.acc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.acc-title { font-size: 14px; font-weight: 600; color: var(--c-t0); }
.acc-sub { font-size: 12.5px; color: var(--c-t3); }
.acc-chev { width: 16px; height: 16px; flex: 0 0 16px; color: var(--c-t3); transition: transform 0.2s, color 0.15s; }
.acc.open .acc-chev { transform: rotate(90deg); color: var(--c-t1); }
.acc-body {
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px 16px 18px 58px; border-top: 1px solid var(--c-line);
}
@media (max-width: 640px) { .acc-body { padding-left: 16px; } }
/* Settings page: one grouped list with hairline dividers */
.settings-list { gap: 0 !important; }
.settings-list > .acc { border-radius: 0; }
.settings-list > .acc + .acc { border-top: none; }
.settings-list > .acc:first-child { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.settings-list > .acc:last-child { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }

/* Inset sub-panel (a bordered group inside an accordion body / card) */
.inset {
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--c-recess); border: 1px solid var(--c-line);
}

/* Colored icon chip (messenger / source markers) */
.ico-sq {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 30px;
  display: grid; place-items: center;
  background: var(--c-hover); border: 1px solid var(--c-line-2); color: var(--c-t2);
}
.ico-sq svg { width: 15px; height: 15px; }
.ico-sq.green  { color: var(--c-ok);     background: var(--c-ok-bg);     border-color: var(--c-ok-bdr); }
.ico-sq.blue   { color: var(--c-blue);   background: var(--c-blue-bg);   border-color: var(--c-blue-bdr); }
.ico-sq.purple { color: var(--c-purple); background: var(--c-purple-bg); border-color: var(--c-purple-bdr); }
.ico-sq.pink   { color: var(--c-pink);   background: var(--c-pink-bg);   border-color: var(--c-pink-bdr); }
.ico-sq.orange { color: var(--c-orange); background: var(--c-orange-bg); border-color: var(--c-orange-bdr); }

/* ── Liquid glass: floating phone tab bar + «Ещё» sheet ──────
   A frosted, saturated backdrop with a top sheen and a specular rim; the
   active tab sits under a "lens" that springs between positions (--i of --n
   slots, set inline by GlassTabBar in core/app.jsx). Rendered on phones only. */
.lg-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 47;
  height: 66px; padding: 6px; border-radius: 28px;
  background: var(--lg-sheen), var(--lg-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.9); backdrop-filter: blur(24px) saturate(1.9);
  border: 1px solid var(--lg-border);
  box-shadow: inset 0 1px 0 var(--lg-hi), inset 0 -1px 1px rgba(255,255,255,0.05), var(--lg-shadow);
}
.lg-bar::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 70% at 50% -30%, rgba(255,255,255,0.16), transparent 62%);
}
.lg-track { position: relative; display: flex; height: 100%; }
.lg-lens {
  position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% / var(--n));
  transform: translateX(calc(var(--i) * 100%));
  border-radius: 22px; background: var(--lg-lens);
  box-shadow: inset 0 1px 0 var(--lg-hi), inset 0 0 0 1px var(--lg-lens-bdr), 0 4px 14px rgba(0,0,0,0.18);
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.lg-item {
  flex: 1 1 0; min-width: 0; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 22px; color: var(--c-t2);
  font-size: 10.5px; font-weight: 600; line-height: 1.1;
  transition: color 0.2s, transform 0.15s;
}
.lg-item svg { width: 22px; height: 22px; transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.5, 1); }
.lg-item span { max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-item.active { color: var(--c-t0); }
.lg-item.active svg { transform: scale(1.08); }
.lg-item:active { transform: scale(0.94); }

.lg-sheet-backdrop {
  position: fixed; inset: 0; z-index: 44;
  background: rgba(0,0,0,0.32); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: fadeIn 0.2s ease;
}
.lg-sheet {
  position: fixed; left: 10px; right: 10px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 46;
  max-height: calc(100% - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto;
  padding: 10px 14px 14px; border-radius: 30px;
  background: var(--lg-sheen), var(--lg-bg-strong);
  -webkit-backdrop-filter: blur(28px) saturate(1.9); backdrop-filter: blur(28px) saturate(1.9);
  border: 1px solid var(--lg-border);
  box-shadow: inset 0 1px 0 var(--lg-hi), var(--lg-shadow);
  transform-origin: bottom center;
  animation: lgSheetIn 0.38s cubic-bezier(0.32, 1.3, 0.5, 1);
}
@keyframes lgSheetIn { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: none; } }
.lg-sheet-grip { width: 36px; height: 4px; border-radius: 99px; background: var(--c-line-3); margin: 0 auto 10px; }
.lg-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 12px; }
.lg-sheet-title { font-size: 16px; font-weight: 700; color: var(--c-t0); letter-spacing: -0.01em; }
.lg-pill {
  height: 32px; padding: 0 14px; border-radius: 99px;
  font-size: 13px; font-weight: 600; color: var(--c-t0);
  background: var(--lg-lens); box-shadow: inset 0 1px 0 var(--lg-hi), inset 0 0 0 1px var(--lg-lens-bdr);
}
.lg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 4px; }
.lg-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 2px; border-radius: 18px;
  color: var(--c-t1); font-size: 11px; font-weight: 600; line-height: 1.15; text-align: center;
  transition: transform 0.15s, opacity 0.15s;
}
.lg-tile:active { transform: scale(0.94); }
.lg-tile .ic {
  position: relative; width: 50px; height: 50px; border-radius: 16px;
  display: grid; place-items: center; color: var(--c-t0);
  background: var(--lg-lens); box-shadow: inset 0 1px 0 var(--lg-hi), inset 0 0 0 1px var(--lg-lens-bdr);
}
.lg-tile .ic svg { width: 22px; height: 22px; }
.lg-tile .lbl {
  max-width: 100%; overflow: hidden; overflow-wrap: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lg-tile .cnt, .lg-tile .pin {
  position: absolute; top: -4px; right: -7px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  display: grid; place-items: center;
  font-size: 10px; font-family: var(--font-mono); font-weight: 700;
  background: var(--c-surface-2); border: 1px solid var(--c-line-2); color: var(--c-t1);
}
.lg-tile .pin { padding: 0; width: 18px; background: var(--c-t0); color: var(--c-bg); border-color: transparent; }
.lg-tile .pin svg { width: 11px; height: 11px; }
.lg-tile.current .ic, .lg-tile.pinned .ic { background: var(--c-accent); color: var(--c-on-accent); box-shadow: none; }
.lg-tile.dim { opacity: 0.45; }
.lg-hint { font-size: 12px; color: var(--c-t2); padding: 0 4px 10px; line-height: 1.4; }
.lg-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.lg-slot {
  position: relative; height: 58px; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10.5px; font-weight: 600; color: var(--c-t0);
  background: var(--lg-lens); box-shadow: inset 0 1px 0 var(--lg-hi), inset 0 0 0 1px var(--lg-lens-bdr);
}
.lg-slot > svg { width: 20px; height: 20px; }
.lg-slot span { max-width: 100%; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-slot .x { position: absolute; top: 5px; right: 6px; width: 12px; height: 12px; opacity: 0.55; }
.lg-slot.empty { background: transparent; box-shadow: none; border: 1.5px dashed var(--c-line-3); color: var(--c-t3); font-size: 18px; }
.lg-link { display: block; margin: 12px auto 0; font-size: 12.5px; font-weight: 600; color: var(--c-t2); }
.lg-sheet-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-line);
}
.lg-sheet-foot .btn { border-radius: 99px; }
.lg-seg {
  flex: 1; display: flex; padding: 3px; border-radius: 99px;
  background: var(--c-recess); box-shadow: inset 0 0 0 1px var(--lg-lens-bdr);
}
.lg-seg button { flex: 1; height: 34px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--c-t2); }
.lg-seg button.on {
  color: var(--c-t0); background: var(--lg-lens);
  box-shadow: inset 0 1px 0 var(--lg-hi), inset 0 0 0 1px var(--lg-lens-bdr);
}

/* ── Mobile ───────────────────────────────────────────── */
.nav-toggle { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 820px) {
  .app-shell { height: 100%; height: 100dvh; }

  /* Slide-in drawer (opened from the bottom bar's «Ещё») */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    flex-basis: auto;
    transform: translateX(-100%);
    transition: transform 0.24s cubic-bezier(0.2,0.8,0.2,1);
    z-index: 50; box-shadow: var(--sh-modal);
    background: var(--c-bg-1);
    padding-top: env(safe-area-inset-top);
  }
  .sidebar, .sidebar.wide { width: min(86vw, 300px); }
  .sidebar.open { transform: none; }
  .sidebar .brand { height: 56px; flex-basis: 56px; }
  .sidebar .nav-item { --ni-pad: 12px 12px; --ni-fs: 14px; }
  .sidebar-footer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .rail-toggle { display: none; }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 45;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none; transition: opacity 0.22s;
  }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

  /* Compact top bar (respects the notch) */
  .topbar {
    height: calc(56px + env(safe-area-inset-top)); flex-basis: calc(56px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 14px 0; gap: 10px;
  }
  .topbar h1 { font-size: 16px; }
  .topbar .sub { display: none; }
  .acting { padding: 4px 12px 4px 5px; }
  .acting-meta .lbl { display: none; }
  .notif-pop {
    position: fixed !important; left: 10px !important; right: 10px !important;
    top: calc(60px + env(safe-area-inset-top)) !important; width: auto !important;
  }

  .nav-toggle { display: inline-flex; }
  .content {
    padding: 14px 14px calc(24px + env(safe-area-inset-bottom));
    overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  /* Toolbars wrap onto extra lines instead of pushing past the screen edge */
  .view .row { flex-wrap: wrap; row-gap: 8px; }
  /* Tables keep one line per row and scroll sideways inside their card */
  .table th, .table td { white-space: nowrap; }
  .table .row, .table .acc-cell { flex-wrap: nowrap; }
  /* The tab strip scrolls sideways; its trailing hint text is dropped */
  .cmp-tab, .pill-tab { flex: 0 0 auto; }
  .cmp-tabs > .grow, .cmp-tabs > .faint { display: none; }

  /* Dashboard / panels */
  .dash-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dash-kpi { padding: 14px; gap: 10px; }
  .kpi-num { font-size: 26px; }
  .card-pad, .dash-card { padding: 16px; }
  /* Views set grid columns inline, which overrides media queries — force a
     single column on narrow screens so panels don't get crushed. */
  .dash-split, .split-340 { grid-template-columns: 1fr !important; }
  .dash-split { gap: 12px; margin-top: 12px; }
  /* Card headers (title + legend/actions) wrap instead of squeezing */
  .dash-card > .row:first-child { flex-wrap: wrap; gap: 8px 12px; }
  .dash-card > .row:first-child > .row { flex-wrap: wrap; }
  /* Any wide table stays usable via horizontal scroll. */
  .card, .dash-card { overflow-x: auto; }
  .table thead th { padding: 12px 10px 8px; }
  .table tbody td { padding: 10px; }
  .acc-head { padding: 14px 16px; gap: 12px; }
  .acc-body { padding: 16px; }
  .acc-ico { width: 36px; height: 36px; flex-basis: 36px; }

  /* Touch-sized controls; 16px inputs stop iOS from zooming on focus */
  .btn { height: 42px; }
  .btn-sm { height: 36px; }
  .btn-icon { width: 42px; }
  .btn-icon.btn-sm { width: 36px; }
  .chip { height: 32px; }
  .search { height: 42px; min-width: 0; }
  .input, .textarea, .select, .search input, .chat-search input { font-size: 16px; }
  .cmp-tab, .pill-tab { height: 40px; padding: 0 16px; }
  .cmp-tabs, .pill-tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-left: -14px; margin-right: -14px; padding: 0 14px 2px;
  }
  .cmp-tabs::-webkit-scrollbar, .pill-tabs::-webkit-scrollbar { display: none; }

  /* Modals become bottom sheets */
  .overlay { place-items: end center; padding: 0; }
  .modal {
    width: 100%; max-width: 100% !important; max-height: 92vh; max-height: 92dvh;
    border-radius: 22px 22px 0 0; border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom);
    animation: sheetIn 0.26s cubic-bezier(0.2,0.9,0.3,1);
  }
  @keyframes sheetIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
  .modal-head { padding: 16px 18px; }
  .modal-body { padding: 18px; }
  .modal-foot { padding: 14px 18px; flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 auto; }

  .toasts { left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .toast { min-width: 0; max-width: none; }
  .settings-bar { bottom: calc(12px + env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 8px; }
  /* Bottom-bar mode: content, toasts and the save bar clear the floating bar */
  .mnav-tabs .content { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .mnav-tabs .toasts { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .mnav-tabs .settings-bar { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .settings-bar > span { flex: 1 0 100%; }
  .settings-bar .btn { flex: 1 1 0; }
  .settings-bar .btn-ghost { flex: 0 0 auto; }
}

@media (max-width: 360px) {
  .dash-kpi-grid { grid-template-columns: 1fr; }
}

/* ── Accessibility ─────────────────────────────────────── */
/* Visible keyboard-focus ring for all interactive elements (mouse users
   are unaffected because :focus-visible only fires for keyboard/AT). */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.nav-item:focus-visible,
.btn:focus-visible,
.chip:focus-visible,
.cmp-tab:focus-visible,
.acting:focus-visible,
.acc-head:focus-visible {
  outline: 1.5px solid var(--c-line-3);
  outline-offset: 1px;
}
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: none; /* these already show an accent border + ring on focus */
}
.toggle:focus-visible, .cbx:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Empty state for the filtered settings list (every section hid itself) */
.settings-list:empty::after {
  content: 'Ничего не найдено'; padding: 40px 16px; text-align: center; color: var(--c-t3);
}

/* ── «Мой аккаунт» ───────────────────────────────────── */
.acct-seed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.acct-word {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  background: var(--c-hover); border: 1px solid var(--c-line); border-radius: 9px;
}
.acct-word .faint { font-size: 10.5px; min-width: 16px; }
.acct-word .mono:last-child { font-size: 12.5px; font-weight: 600; color: var(--c-t0); }
.acct-err {
  padding: 9px 12px; border-radius: 9px; font-size: 12.5px;
  color: var(--c-err); background: var(--c-err-bg);
}
@media (max-width: 420px) { .acct-seed { grid-template-columns: repeat(2, 1fr); } }

/* ── FB manual-work window (VNC) ─────────────────────── */
.fbscreen-overlay { padding: 12px; }
.fbscreen {
  width: min(1400px, 100%); height: min(940px, 100%);
  display: flex; flex-direction: column;
  background: var(--c-surface-2); border: 1px solid var(--c-line-2);
  border-radius: 16px; box-shadow: var(--sh-modal); overflow: hidden;
}
.fbscreen-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; flex-wrap: wrap; }
.fbscreen-head b { color: var(--c-t0); font-size: 14px; }
.fbscreen-status { font-size: 12px; color: var(--c-t3); }
.fbscreen-status.connected { color: var(--c-ok); }
.fbscreen-status.disconnected { color: var(--c-err); }
.fbscreen-view { position: relative; flex: 1; min-height: 0; background: #000; }
.fbscreen-canvas { position: absolute; inset: 0; }
.fbscreen-wait {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center; color: #c4c8d0; font-size: 14px;
}
.fbscreen-wait span { font-size: 12px; color: #8b919c; }
.fbscreen-foot { display: flex; align-items: center; gap: 8px; padding: 8px 12px; flex-wrap: wrap; }
.fbscreen-foot .input { flex: 1 1 260px; height: 32px; }
.fbscreen-clip { font-size: 12px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .fbscreen-overlay { padding: 0; } .fbscreen { border-radius: 0; } }


/* ── Mini App: PIN pad + lock screen ─────────────────── */
.pin-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 0 2px; }
.pin-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pin-head h3 { font-size: 17px; font-weight: 700; color: var(--c-t0); }
.pin-head .faint { font-size: 12.5px; }
.pin-ico {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--c-active-bg); border: 1px solid var(--c-line-2); color: var(--c-t0);
}
.pin-dots { display: flex; gap: 14px; height: 18px; align-items: center; margin: 4px 0 0; }
.pin-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--c-line-3); background: transparent;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.pin-dot.on { background: var(--c-t0); border-color: var(--c-t0); transform: scale(1.08); }
.pin-dots.shake { animation: pinShake 0.4s cubic-bezier(.36,.07,.19,.97); }
@keyframes pinShake {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); }
}
.pin-msg { min-height: 18px; font-size: 12.5px; color: var(--c-err); text-align: center; opacity: 0; transition: opacity 0.15s; }
.pin-msg.show { opacity: 1; }
.pin-keys {
  display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; justify-content: center;
  user-select: none; -webkit-user-select: none;
}
.pin-keys.disabled { opacity: 0.45; }
.pin-key {
  height: 60px; border-radius: 18px; font-size: 24px; font-weight: 600; color: var(--c-t0);
  background: var(--c-hover); border: 1px solid var(--c-line);
  transition: background 0.1s, transform 0.08s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.pin-key:hover:not(:disabled) { background: var(--c-active-bg); }
.pin-key:active:not(:disabled) { transform: scale(0.94); background: var(--c-active-bg); }
.pin-key.back { font-size: 20px; color: var(--c-t2); }
.pin-key:disabled { cursor: default; }
.pin-id {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px; background: var(--c-hover); border: 1px solid var(--c-line);
}
.pin-id b { font-size: 20px; color: var(--c-t0); letter-spacing: 0.02em; }
.pin-link { background: none; color: var(--c-t3); font-size: 12.5px; font-weight: 600; padding: 6px 10px; }
.pin-link:hover { color: var(--c-t0); }
.lock-screen {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--c-bg-1); animation: fadeIn 0.15s ease;
}
@media (max-width: 380px) { .pin-keys { grid-template-columns: repeat(3, 64px); gap: 10px; } .pin-key { height: 54px; } }
@media (prefers-reduced-motion: reduce) { .pin-dots.shake { animation: none; } }

/* Inside Telegram: no hover states on touch, and keep content clear of the
   home indicator when Telegram runs the app fullscreen. */
.miniapp body { padding-bottom: env(safe-area-inset-bottom, 0px); overscroll-behavior: none; }