/* === Device Connect app.css — assembled, CSP-clean (self-hosted webfonts, no CDN) === */
/* Self-hosted webfonts: same-origin /fonts/*.woff2 (CSP font-src 'self'). Without these the
   app silently fell back to system fonts on the phone — Manrope/JetBrains Mono never loaded.
   Variable woff2 where available (one file covers all weights); IBM Plex Mono is static. */
/* unicode-range = Google "latin" subset (what these woff2s actually cover). Turkish ş/ğ/İ/Ş/Ğ live
   in latin-ext (NOT in these subsets). The assumption used to be that this just falls through to a
   Turkish-capable system font — it didn't: some WebViews' default face lacks full Turkish coverage,
   so these glyphs rendered as tofu (Onur, repeatedly). Root-cause fix = the 'Ormur Latin Ext(-Sans)'
   faces a few lines below, which explicitly own the U+0100-024F gap. */
@font-face{font-family:'Manrope';src:url('/fonts/manrope-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrains-mono-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Noto Sans Symbols 2 subset — Android WebView has no system face for media-control/arrow
   glyphs (U+23F5 ⏵ etc), so TUI status lines drew tofu boxes. unicode-range keeps it inert
   for normal text. Registered in theme.jsx's fontStack after the mono faces. */
@font-face{font-family:'Ormur Symbols';src:url('/fonts/ormur-symbols.woff2') format('woff2');font-display:swap;unicode-range:U+2190-21FF,U+2300-23FF,U+25A0-25FF,U+2600-26FF,U+2700-27BF,U+2B00-2BFF}
@font-face{font-family:'Fira Code';src:url('/fonts/fira-code-var.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Doto — 8-bit pixel display face for the BarBarOS wordmark (logo set from docs/ORMUR.html) */
@font-face{font-family:'Doto';src:url('/fonts/doto-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Doto';src:url('/fonts/doto-700.woff2') format('woff2');font-weight:700;font-display:swap}
/* brand wordmark now FOLLOWS the active theme (was a fixed blue→teal gradient that stayed blue even in
   the amber/pink themes — Onur: "yine 2 renge boyamışsın"). Uses all three theme swatch colors. */
/* BarBarOS wordmark = the FIXED brand snake-gradient (deep blue -> turquoise, NO green/gold), theme-independent. */
.wm{font-family:'Doto';font-weight:800;letter-spacing:.02em;line-height:1;background:linear-gradient(110deg,#0a84ff 0%,#1393b0 44%,#16c8c2 72%,#2fe6d2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibm-plex-mono-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* extra terminal font choices (Onur — more fonts) */
@font-face{font-family:'Cascadia Code';src:url('/fonts/cascadia-code-var.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';src:url('/fonts/dm-mono-var.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Martian Mono';src:url('/fonts/martian-mono-var.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Red Hat Mono';src:url('/fonts/red-hat-mono-var.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Spline Sans Mono';src:url('/fonts/spline-sans-mono-var.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Overpass Mono';src:url('/fonts/overpass-mono-var.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Anonymous Pro';src:url('/fonts/anonymous-pro-var.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cousine';src:url('/fonts/cousine-var.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Victor Mono';src:url('/fonts/victor-mono-var.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans Mono';src:url('/fonts/noto-sans-mono-var.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Code Pro';src:url('/fonts/source-code-pro-var.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto Mono';src:url('/fonts/roboto-mono-var.woff2') format('woff2');font-weight:100 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inconsolata';src:url('/fonts/inconsolata-var.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';src:url('/fonts/space-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';src:url('/fonts/space-mono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Ubuntu Mono';src:url('/fonts/ubuntu-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Ubuntu Mono';src:url('/fonts/ubuntu-mono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Ormur Latin Ext / Ormur Latin Ext Sans — Turkish tofu fix (Onur, repeatedly: "ş/ğ/İ hala kare
   çıkıyor"). ROOT CAUSE: every bundled webfont above (mono AND Manrope UI face) is a Google
   "latin" SUBSET — its unicode-range covers U+0000-00FF plus a handful of cherry-picked extras
   (U+0131 dotless-i, U+0152-0153 œ/OE) but NOT the rest of Latin Extended-A (U+0100-024F), which is
   exactly where ş(015F) ğ(011F) İ(0130) Ş(015E) Ğ(011E) live. unicode-range was scoped correctly,
   but with NO installed face covering that range, the fallback chain had nothing to fall through
   to except the OS default — and on some Android WebViews that default itself lacks full Turkish
   coverage, so glyphs rendered as tofu boxes instead of silently upgrading.
   Fix: two narrow-range subset faces (fontTools pyftsubset, Consolas/Segoe UI source — both ship
   full Turkish coverage on Windows) that own ONLY U+0100-024F. They never compete with the primary
   faces for plain ASCII (that unicode-range is untouched), so this is additive/inert everywhere
   except the exact codepoints that were missing. cmap-verified: scedilla/Scedilla/gbreve/Gbreve/
   Idotaccent/dotlessi all present in both generated woff2 files. */
@font-face{font-family:'Ormur Latin Ext';src:url('/fonts/ormur-latinext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F}
@font-face{font-family:'Ormur Latin Ext Sans';src:url('/fonts/ormur-latinext-sans.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F}
/* --- tokens/colors.css --- */
/* BarBarOS — Color tokens
   Dark-first. Neutral near-black surfaces. ONE accent (#0a84ff).
   Status hues (green/amber/red) appear ONLY when they carry meaning.
   Offline = neutral gray, NOT red. No second accent, ever. */
:root{
  /* surfaces (dark, default) — L0 page → L3 raised */
  --bg-0:#0a0b0d;
  --bg-1:#111316;
  --surface-1:#15181c;
  --surface-2:#1c2026;
  --surface-3:#262b32;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.14);

  /* text / ink */
  --fg-0:#eef1f5;   /* primary ink */
  --fg-1:#a4adb8;   /* secondary / labels */
  --fg-2:#6b7480;   /* meta / disabled */

  /* THE ONE accent — primary action · active/selected · links · focus ring */
  --accent:#0a84ff;
  --accent-hover:#3a9bff;
  --accent-press:#0066d6;
  --accent-soft:rgba(10,132,255,.14);
  --accent-ring:rgba(10,132,255,.5);

  /* status — render ONLY when it carries meaning (online/offline/error) */
  --ok:#2fb344;
  --warn:#d99a2b;
  --danger:#e5484d;
  --ok-soft:rgba(47,179,68,.13);
  --warn-soft:rgba(217,154,43,.13);
  --danger-soft:rgba(229,72,77,.13);

  /* terminal canvas — RING-FENCED, never reuse in chrome */
  --term-bg:#0a0b0d;
  --term-fg:#e6e9ee;
  --term-cursor:#0a84ff;
  --term-selection:rgba(10,132,255,.30);
}

/* LIGHT — MANAGEMENT screens only. The terminal viewport stays dark regardless. */
[data-theme=light]{
  --bg-0:#f6f7f9;
  --bg-1:#eef0f3;
  --surface-1:#fff;
  --surface-2:#f4f5f7;
  --surface-3:#eaecf0;
  --border:rgba(10,15,25,.10);
  --border-strong:rgba(10,15,25,.18);
  --fg-0:#15171a;
  --fg-1:#5b5f66;
  --fg-2:#8a8e96;
}

/* --- tokens/typography.css --- */
/* BarBarOS — Typography
   Manrope (UI) + JetBrains Mono (terminal/IDs/fingerprints/code).
   Scale: display 28/800 · h1 20/700 · h2 16/600 · body 15/400 ·
          label 13/500 · meta 12/500 · mono 13/500.
   Labels & metadata read calm in --fg-1 / --fg-2. */
:root{
  --font:'Manrope','Ormur Latin Ext Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* symbol fallbacks appended so glyphs the coding font lacks (Claude Code's ▶▶ "bypass permissions"
     marker = U+23F5 → showed as □□ tofu on the phone — Onur) fall back to a system symbol face instead
     of a missing-glyph box. Fallback only affects chars absent from the mono face, so ASCII alignment is
     untouched. 'Ormur Latin Ext' (right after the primary face, before any system fallback) fills the
     ş/ğ/İ/Ş/Ğ gap the bundled latin-subset webfonts don't cover — see @font-face comment above. */
  --mono:'JetBrains Mono','Ormur Latin Ext','SF Mono',ui-monospace,Consolas,'Segoe UI Symbol','Noto Sans Symbols 2','Noto Sans Symbols','Noto Color Emoji',monospace;

  /* semantic type tokens */
  --t-display-size:28px; --t-display-weight:800; --t-display-tracking:-.02em;
  --t-h1-size:20px;      --t-h1-weight:700;      --t-h1-tracking:-.01em;
  --t-h2-size:16px;      --t-h2-weight:600;
  --t-body-size:15px;    --t-body-weight:400;
  --t-label-size:13px;   --t-label-weight:500;
  --t-meta-size:12px;    --t-meta-weight:500;
  --t-mono-size:13px;    --t-mono-weight:500;
}

.t-display{font:800 28px/1.2 var(--font);letter-spacing:-.02em;color:var(--fg-0)}
.t-h1{font:700 20px/1.3 var(--font);letter-spacing:-.01em;color:var(--fg-0)}
.t-h2{font:600 16px/1.4 var(--font);color:var(--fg-0)}
.t-body{font:400 15px/1.5 var(--font);color:var(--fg-0)}
.t-label{font:500 13px/1.4 var(--font);color:var(--fg-1)}
.t-meta{font:500 12px/1.4 var(--font);color:var(--fg-2)}
.t-mono{font:500 13px/1.5 var(--mono);color:var(--fg-0)}

/* UPPERCASE tracked label — credibility for small metadata */
.t-eyebrow{font:600 12px/1.4 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}

/* --- tokens/spacing.css --- */
/* BarBarOS — Spacing (4px grid) + touch target.
   Few surfaces, lots of calm space. 44px minimum touch target. */
:root{
  --s1:4px;
  --s2:8px;
  --s3:12px;
  --s4:16px;
  --s5:24px;
  --s6:32px;
  --s7:48px;
  --tap:44px;   /* minimum touch target */
}

/* --- tokens/radius.css --- */
/* BarBarOS — Corner radii.
   8 (sm) · 12 (md, the default) · 16 (lg, cards) · pill.
   Buttons/inputs use md; cards use lg; pills/dots use pill. */
:root{
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-pill:999px;
}

/* --- tokens/elevation.css --- */
/* BarBarOS — Elevation.
   On dark, a 1px ring does the elevation, not heavy shadow.
   --e1 = hairline ring (cards). --e2 = ring + soft drop (floating: sheets, popovers, toasts). */
:root{
  --e1:0 0 0 1px var(--border);
  --e2:0 0 0 1px var(--border),0 8px 24px rgba(0,0,0,.45);
}

/* --- tokens/motion.css --- */
/* BarBarOS — Motion.
   Quick, calm easing. Press = subtle shrink, not a color flip.
   prefers-reduced-motion kills pulse/transitions (also reads more pro). */
:root{
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur-1:120ms;
  --dur-2:200ms;
}

@keyframes bb-pulse{
  0%,100%{opacity:1}
  50%{opacity:.35}
}
@keyframes bb-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/* --- tokens/themes.css --- */
/* BarBarOS — Theme layer (opt-in)
   The CORE system is single-accent neutral (see colors.css). Themes are an
   opt-in skin: set <html data-theme="fiesta"> (or nord / dracula / solarized /
   github-light / light) and the WHOLE app re-skins — chrome AND terminal.
   Every theme keeps the rules: ONE accent, status hues only for meaning,
   offline = neutral gray, terminal stays dark on light themes.

   To use in another app: link styles.css, then either set data-theme on <html>,
   or drive it from JS with applyTheme() in lib/theme.js. */

/* ---- Fiesta (San Antonio Spurs) — pink primary, teal/orange/gold status ---- */
[data-theme="fiesta"]{
  --accent:#e11d74; --accent-hover:#f24c9a; --accent-press:#b3145c;
  --accent-soft:rgba(225,29,116,.16); --accent-ring:rgba(225,29,116,.5);
  --ok:#00b0a6; --warn:#f6871f; --danger:#eb1f4e;
  --ok-soft:rgba(0,176,166,.15); --warn-soft:rgba(246,135,31,.16); --danger-soft:rgba(235,31,78,.15);
  --term-bg:#0a090d; --term-fg:#eef0f2; --term-cursor:#e11d74; --term-selection:rgba(225,29,116,.30);
  --term-gold:#f6a01c; --glow-a:rgba(225,29,116,.10); --glow-b:rgba(0,176,166,.09);
}

/* ---- Nord ---- */
[data-theme="nord"]{
  --bg-0:#242933; --bg-1:#2e3440; --surface-1:#3b4252; --surface-2:#434c5e; --surface-3:#4c566a;
  --border:rgba(236,239,244,.10); --border-strong:rgba(236,239,244,.18);
  --fg-0:#eceff4; --fg-1:#d8dee9; --fg-2:#9aa5b8;
  --accent:#88c0d0; --accent-hover:#8fbcbb; --accent-press:#5e81ac;
  --accent-soft:rgba(136,192,208,.18); --accent-ring:rgba(136,192,208,.5);
  --ok:#a3be8c; --warn:#ebcb8b; --danger:#bf616a;
  --ok-soft:rgba(163,190,140,.18); --warn-soft:rgba(235,203,139,.18); --danger-soft:rgba(191,97,106,.2);
  --term-bg:#2e3440; --term-fg:#d8dee9; --term-cursor:#88c0d0; --term-selection:rgba(136,192,208,.3);
  --term-gold:#ebcb8b; --glow-a:rgba(136,192,208,.12); --glow-b:rgba(180,142,173,.10);
}

/* ---- Dracula ---- */
[data-theme="dracula"]{
  --bg-0:#21222c; --bg-1:#282a36; --surface-1:#2d2f3d; --surface-2:#343746; --surface-3:#41435a;
  --border:rgba(248,248,242,.09); --border-strong:rgba(248,248,242,.16);
  --fg-0:#f8f8f2; --fg-1:#c9cbe0; --fg-2:#6272a4;
  --accent:#bd93f9; --accent-hover:#caa6fb; --accent-press:#9a72e0;
  --accent-soft:rgba(189,147,249,.18); --accent-ring:rgba(189,147,249,.5);
  --ok:#50fa7b; --warn:#f1fa8c; --danger:#ff5555;
  --ok-soft:rgba(80,250,123,.16); --warn-soft:rgba(241,250,140,.16); --danger-soft:rgba(255,85,85,.18);
  --term-bg:#282a36; --term-fg:#f8f8f2; --term-cursor:#ff79c6; --term-selection:rgba(189,147,249,.3);
  --term-gold:#f1fa8c; --glow-a:rgba(189,147,249,.12); --glow-b:rgba(255,121,198,.10);
}

/* ---- Solarized (dark) ---- */
[data-theme="solarized"]{
  --bg-0:#002b36; --bg-1:#073642; --surface-1:#0a3b47; --surface-2:#0f4754; --surface-3:#14515f;
  --border:rgba(238,232,213,.09); --border-strong:rgba(238,232,213,.16);
  --fg-0:#eee8d5; --fg-1:#93a1a1; --fg-2:#657b83;
  --accent:#268bd2; --accent-hover:#3a9bdf; --accent-press:#1e6fa8;
  --accent-soft:rgba(38,139,210,.18); --accent-ring:rgba(38,139,210,.5);
  --ok:#859900; --warn:#b58900; --danger:#dc322f;
  --ok-soft:rgba(133,153,0,.18); --warn-soft:rgba(181,137,0,.18); --danger-soft:rgba(220,50,47,.18);
  --term-bg:#002b36; --term-fg:#93a1a1; --term-cursor:#268bd2; --term-selection:rgba(38,139,210,.3);
  --term-gold:#b58900; --glow-a:rgba(38,139,210,.12); --glow-b:rgba(42,161,152,.10);
}

/* ---- GitHub Light — management chrome light, terminal stays dark ---- */
[data-theme="github-light"]{
  --bg-0:#eef1f4; --bg-1:#e4e8ed; --surface-1:#ffffff; --surface-2:#f3f5f7; --surface-3:#e9edf1;
  --border:rgba(27,31,36,.12); --border-strong:rgba(27,31,36,.22);
  --fg-0:#1f2328; --fg-1:#57606a; --fg-2:#8c959f;
  --accent:#0969da; --accent-hover:#1a7ff0; --accent-press:#0757b8;
  --accent-soft:rgba(9,105,218,.12); --accent-ring:rgba(9,105,218,.45);
  --ok:#1a7f37; --warn:#9a6700; --danger:#cf222e;
  --ok-soft:rgba(26,127,55,.12); --warn-soft:rgba(154,103,0,.12); --danger-soft:rgba(207,34,46,.12);
  --term-bg:#0d1117; --term-fg:#e6edf3; --term-cursor:#58a6ff; --term-selection:rgba(56,139,253,.3);
  --term-gold:#d29922; --glow-a:rgba(9,105,218,.08); --glow-b:rgba(26,127,55,.06);
}

/* --- components.css --- */
/* BarBarOS — Component classes
   Thin, token-driven primitives. The .jsx components mirror these classes.
   No 1px section borders for *grouping* (the No-Line rule); hairlines only
   separate list rows. Color appears only on status chrome. */

/* ---- Buttons ---------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 16px;border:0;border-radius:var(--r-md);
  font:600 14px var(--font);cursor:pointer;white-space:nowrap;
  /* pillow 3D — same language as .key/.iconbtn: bright top edge + layered drop + soft floor */
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.11), 0 4px 8px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.22);
  transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease);
}
.btn:hover{transform:translateY(-1.5px)}
.btn:active{transform:translateY(1.5px);box-shadow:inset 0 3px 6px rgba(0,0,0,.42)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-sm{height:36px;padding:0 12px}
.btn-primary{background:linear-gradient(180deg,var(--accent-hover),var(--accent));color:#fff;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.30), inset 0 -3px 5px rgba(0,0,0,.16), 0 5px 13px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.28)}
.btn-primary:hover{background:linear-gradient(180deg,var(--accent-hover),var(--accent-hover))}
.btn-primary:active{background:var(--accent-press);box-shadow:inset 0 3px 6px rgba(0,0,0,.4)}
.btn-secondary{background:linear-gradient(180deg,var(--surface-2),var(--surface-1));color:var(--fg-0);
  box-shadow:inset 0 0 0 1px var(--border-strong), inset 0 1.5px 0 rgba(255,255,255,.09), 0 4px 8px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.2)}
.btn-secondary:hover{background:linear-gradient(180deg,var(--surface-3),var(--surface-2))}
.btn-ghost{background:transparent;color:var(--fg-1);box-shadow:none}
.btn-ghost:hover{background:var(--surface-2);color:var(--fg-0);box-shadow:none;transform:none}
.btn-danger{background:transparent;color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}
.btn-danger:hover{background:var(--danger-soft)}

/* ---- Icon button ------------------------------------------------------ */
.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:0;border-radius:var(--r-md);
  /* 3D cushion (same recipe as the keyboard .key) so photo/voice/send feel like raised keys */
  background:linear-gradient(180deg,var(--surface-2),var(--surface-1));color:var(--fg-1);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), inset 0 -2px 3px rgba(0,0,0,.2), 0 2px 5px rgba(0,0,0,.28);
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
.iconbtn:hover{transform:translateY(-1px);color:var(--fg-0);box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 5px 12px rgba(0,0,0,.34)}
.iconbtn:active{transform:translateY(1px) scale(.97);box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
/* session pillow keycap: press pushes in like a real key (Onur — 3d pillow tuş) */
.key-pillow{transition:transform var(--dur-1) var(--ease)}
.key-pillow:active{transform:translateY(1.5px) scale(.997)}
/* primary (Send/Mic on) — permanent soft-3D cushion; full 3-shade accent ramp (light→base→press) */
.iconbtn-primary{background:linear-gradient(180deg,var(--accent-hover),var(--accent),var(--accent-press));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 3px 8px rgba(0,0,0,.32)}
.iconbtn-primary:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 5px 12px rgba(0,0,0,.36)}
.iconbtn-primary:active{transform:translateY(1px) scale(.97);box-shadow:inset 0 2px 5px rgba(0,0,0,.45)}
/* the composer trio (photo/mic/send) sits on the SAME neutral raised cushion as the keybar .key —
   inherited from the base .iconbtn (identical recipe: surface gradient + top light edge + inner bottom
   shade) — and carries its identity ONLY in the glyph color: photo=warn/gold, mic=ok/green, send=accent.
   (The previous FILLED theme-color chips read as three loud islands over the neutral keybar.) Hover
   rules re-assert the tint because the base .iconbtn:hover recolors to fg-0; press physics stay on the
   shared .iconbtn:active. While LISTENING the mic swaps to .iconbtn-primary (filled accent ramp above)
   so the armed state stays unmistakable; theme vars keep all of it correct in light AND dark. */
.iconbtn-accent{color:var(--accent)}
.iconbtn-accent:hover{color:var(--accent-hover)}
.iconbtn-accent:active{color:var(--accent-press)}
.iconbtn-ok{color:var(--ok)}
.iconbtn-ok:hover{color:var(--ok)}
.iconbtn-warn{color:var(--warn)}
.iconbtn-warn:hover{color:var(--warn)}
/* voice LIVE pulse — soft accent halo breathing around the mic while an in-app STT session listens.
   The keyframes RE-STATE the .iconbtn-primary cushion shadows (an animated box-shadow would otherwise
   override them), then ripple a 4th accent ring outward. Single-accent discipline: halo = #0a84ff. */
@keyframes voice-pulse{
  0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 3px 8px rgba(0,0,0,.32), 0 0 0 0 rgba(10,132,255,.45)}
  70%{box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 3px 8px rgba(0,0,0,.32), 0 0 0 9px rgba(10,132,255,0)}
  100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 3px 8px rgba(0,0,0,.32), 0 0 0 0 rgba(10,132,255,0)}
}
.iconbtn-voice-live{animation:voice-pulse 1.6s ease-out infinite}

/* ---- Full-width/pill primary CTA — same raised-cushion recipe as .iconbtn-primary, for text
   buttons (Save/Add rows) that need the pillow language instead of the flat .btn-primary fill
   (Onur: "pillow tuşlu tarzımız var" — a few Save/Add spots had drifted to a flat one-off). */
.btn-primary-pillow{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 16px;border:0;border-radius:var(--r-md);
  font:700 14px var(--font);cursor:pointer;white-space:nowrap;
  background:linear-gradient(180deg,var(--accent-hover),var(--accent),var(--accent-press));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 3px 8px rgba(0,0,0,.32);
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),filter var(--dur-1) var(--ease);
}
.btn-primary-pillow:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 5px 12px rgba(0,0,0,.36)}
.btn-primary-pillow:active{transform:translateY(1px) scale(.97);box-shadow:inset 0 2px 5px rgba(0,0,0,.45)}
.btn-primary-pillow:disabled{opacity:.45;cursor:not-allowed;transform:none}
/* filled pillow variant of .chip for a chip-sized primary action (terminal draft "Koy") */
.chip-primary{background:linear-gradient(180deg,var(--accent-hover),var(--accent),var(--accent-press));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 3px 8px rgba(0,0,0,.32)}
.chip-primary:hover{filter:brightness(1.07)}
.chip-primary:active{transform:translateY(1px) scale(.97);box-shadow:inset 0 2px 5px rgba(0,0,0,.45)}

/* ---- Input ------------------------------------------------------------ */
.input{
  height:44px;background:var(--bg-1);border:1px solid var(--border-strong);
  border-radius:var(--r-md);color:var(--fg-0);padding:0 12px;
  font:400 16px var(--font); /* 16px = anti iOS-zoom */
  outline:none;transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
  width:100%;box-sizing:border-box;
}
.input::placeholder{color:var(--fg-2)}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}

/* ---- Card ------------------------------------------------------------- */
.card{
  background:linear-gradient(180deg,var(--surface-2),var(--surface-1));border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 6px 16px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.22);padding:20px;
}
.card-raised{box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 12px 28px rgba(0,0,0,.4), 0 2px 5px rgba(0,0,0,.3)}

/* ---- Status pill — the ONLY chromatic chrome -------------------------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;
  border-radius:var(--r-pill);font:600 12px var(--font);white-space:nowrap;
}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pill-bare::before{display:none}
.pill-ok{background:var(--ok-soft);color:var(--ok)}
.pill-warn{background:var(--warn-soft);color:var(--warn)}
.pill-off{background:var(--surface-2);color:var(--fg-2)}
.pill-err{background:var(--danger-soft);color:var(--danger)}
.pill-accent{background:var(--accent-soft);color:var(--accent)}

/* ---- Connection dot --------------------------------------------------- */
.dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.dot-live{background:var(--ok)}
.dot-recon{background:var(--warn);animation:bb-pulse 1.4s var(--ease) infinite}
.dot-down{background:var(--danger)}
.dot-off{background:var(--fg-2)}

/* ---- List row (the workhorse) ----------------------------------------- */
.lrow{
  display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 16px;
  /* pillow key rows — raised, spaced, pressable (replaces the flat bordered list) */
  background:linear-gradient(180deg,var(--surface-2),var(--surface-1));border-radius:var(--r-md);margin-bottom:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 3px 7px rgba(0,0,0,.24), 0 1px 2px rgba(0,0,0,.18);
  cursor:pointer;transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.lrow:last-child{margin-bottom:0}
.lrow:hover{transform:translateY(-1.5px)}
.lrow:active{transform:translateY(1.5px);box-shadow:inset 0 3px 6px rgba(0,0,0,.4)}
.lrow.active{background:linear-gradient(180deg,var(--accent-soft),var(--surface-1));box-shadow:inset 0 0 0 1px var(--accent-ring), 0 3px 7px rgba(0,0,0,.24)}
.lrow-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.lrow-title{font:600 15px var(--font);color:var(--fg-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow-sub{font:500 12px var(--mono);color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Trust strip ------------------------------------------------------ */
.trust{
  display:flex;align-items:center;gap:8px;height:28px;padding:0 16px;
  background:var(--bg-1);font:500 12px var(--font);color:var(--fg-1);
}
.trust .state-direct{color:var(--ok)}
.trust .state-relay{color:var(--warn)}
.trust .state-offline{color:var(--fg-2)}

/* ---- Accessory key bar (mobile terminal) ------------------------------ */
.keybar{
  display:flex;gap:6px;align-items:center;overflow-x:auto;
  padding:6px 10px;background:var(--bg-1);
  -webkit-mask:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);
          mask:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);
  scrollbar-width:none;
}
.keybar::-webkit-scrollbar{display:none}
.key{
  /* uniform boyut (Onur "home/ent/esc size uygun olsun"): min-width 46 + eşit padding → dar/geniş tuş farkı azalır */
  flex:none;min-width:46px;height:40px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--surface-2),var(--surface-1));color:var(--term-gold);border:0;border-radius:13px;
  font:600 15px var(--mono);cursor:pointer;
  /* daha belirgin "yastık" / 3D pillow (Onur): parlak üst ışık kenarı + derin içe-alt gölge + katmanlı dış gölge = kabarık tuş */
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.14), inset 0 -3px 5px rgba(0,0,0,.30), 0 4px 8px rgba(0,0,0,.36), 0 1px 2px rgba(0,0,0,.24);
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.key:hover{transform:translateY(-1.5px);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.16), inset 0 -2px 4px rgba(0,0,0,.24), 0 7px 15px rgba(0,0,0,.4)}
.key:active{transform:translateY(1.5px);box-shadow:inset 0 3px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05)} /* pressed-in, derin */
.key.armed{box-shadow:inset 0 0 0 1.5px var(--accent), inset 0 1px 0 rgba(255,255,255,.06);color:var(--accent);background:var(--accent-soft)}
.key.locked{background:var(--accent-soft);color:var(--accent)}

/* FLOAT mode (?float=1, the resizable overlay window): drop the bottom nav + compact the chrome so the
   terminal gets the space instead of a thin strip. The overlay has its own title bar already. */
.float .tabbar{display:none!important}
.float .keybar{padding:4px 8px}
.float .key{height:34px;min-width:36px;padding:0 8px;font-size:13px;border-radius:10px}
.float .composer-label{display:none}     /* the "Type a command · Enter sends" hint row */

/* ---- Toast ------------------------------------------------------------ */
.toast{
  display:flex;align-items:center;gap:10px;
  background:var(--surface-3);color:var(--fg-0);
  border-radius:var(--r-md);box-shadow:var(--e2);
  padding:12px 16px;font:500 14px var(--font);max-width:420px;
}

/* ---- App scaffolding helpers ------------------------------------------ */
.app-dark{background:var(--bg-0);color:var(--fg-0);font-family:var(--font)}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg-0),0 0 0 4px var(--accent-ring)}

/* --- design inline component CSS (fiesta :root override stripped) --- */
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{
    background:var(--bg-0); /* flat, no glow */
    font-family:var(--font);color:var(--fg-0);
    display:flex;align-items:center;justify-content:center;gap:48px;
    padding:40px;min-height:100vh;
  }
  /* phone */
  .phone{
    width:392px;height:812px;flex:none;position:relative;
    background:var(--bg-0);border-radius:46px;
    box-shadow:0 0 0 10px #1a1d22, 0 0 0 11px #2a2e35, 0 40px 90px rgba(0,0,0,.6);
    overflow:hidden;display:flex;flex-direction:column;
  }
  .phone[data-theme=light]{background:var(--bg-0)}
  .statusbar{height:44px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 26px 8px;font:600 13px var(--font);color:var(--fg-0);position:relative;z-index:5}
  .statusbar .dots{display:flex;gap:5px;align-items:center}
  .screen{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;background:var(--bg-1)}
  .scroll{flex:1;min-height:0;overflow:auto;scrollbar-width:none}
  .scroll::-webkit-scrollbar{display:none}
  /* top bar */
  .topbar{flex:none;display:flex;align-items:center;gap:10px;padding:6px 14px 10px;min-height:48px}
  .topbar .title{font:700 19px var(--font);letter-spacing:-.01em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sesschip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:var(--r-pill);background:var(--surface-2);font:500 12px var(--mono);color:var(--fg-1)}
  /* bottom nav */
  .tabbar{flex:none;display:flex;padding:8px 8px calc(26px + env(safe-area-inset-bottom));background:var(--bg-1);box-shadow:inset 0 1px 0 var(--border)}
  .tab{flex:1;height:52px;border:0;margin:0 3px;background:linear-gradient(180deg,var(--surface-2),var(--surface-1));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--fg-2);cursor:pointer;border-radius:12px;font:600 10px var(--font);box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -2px 3px rgba(0,0,0,.16), 0 2px 4px rgba(0,0,0,.24);transition:color .12s,box-shadow .12s,transform .12s}
  .tab.on{color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent-ring), inset 0 1px 0 rgba(255,255,255,.08)}
  .tab:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
  /* terminal */
  .term{flex:1;min-height:0;background:var(--term-bg);overflow:auto;padding:14px 16px;font:400 13.5px/1.5 var(--mono);color:var(--term-fg);scrollbar-width:none;font-variant-ligatures:var(--term-liga,normal);font-feature-settings:var(--term-zero,"zero" 1)}
  .term::-webkit-scrollbar{display:none}
  .term .muted{color:#6b7480}
  .term .ok{color:var(--ok)}
  .term .acc{color:var(--accent)}
  .term .warn{color:var(--warn)}
  .term .gold{color:var(--term-gold)}
  .term .sel{background:var(--term-selection)}
  .caret{display:inline-block;width:8px;height:16px;background:var(--term-cursor);vertical-align:-3px;animation:bb-pulse 1.1s steps(2,end) infinite}
  .jump{position:absolute;right:14px;bottom:172px;z-index:6;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--fg-0);box-shadow:var(--e2);border:0;font:600 12px var(--font);cursor:pointer}
  /* terminal tabs — the strip must NEVER pan: tabs SHRINK to fit (names ellipsize) instead of
     overflowing into a horizontal scroller. overflow-x:auto let any touch drag the whole strip
     side to side (Onur: "sekmeler sağa sola oynuyor, öyle bi şey istemiyorum"); touch-action:none
     also blocks the WebView's pan/overscroll attempt on the row. Many sessions -> the drawer. */
  /* Sekme şeridi (Onur 2026-07-05): sekmeler ARTIK KÜÇÜLMEZ (flex:0 0 auto) — taşanlar yatay
     kaydırmayla gezilir. overflow-x:auto ama touch-action:none KALIR: pan JS'te (tabPointerMove),
     native pan değil — 07-03'teki "sekmeler kendiliğinden kayıyor" bug'ı geri gelmesin. Reorder =
     uzun-bas (mobil) / mouse drag (desktop). Scrollbar gizli: şerit dar, thumb gürültü olur. */
  .ttabs{display:flex;align-items:center;gap:4px;padding:6px 8px;background:var(--term-bg);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:none;box-shadow:inset 0 -1px 0 var(--border)}
  .ttabs::-webkit-scrollbar{display:none}
  .ttab{flex:0 0 auto;min-width:0;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 8px 0 11px;border-radius:10px;background:transparent;color:var(--fg-2);font:600 12px var(--font);cursor:pointer;border:0;max-width:172px}
  .ttab.on{background:var(--surface-2);color:var(--fg-0)}
  .ttab .nm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:118px}
  .ttab .x{flex:none;display:inline-flex;color:var(--fg-2);border-radius:6px;padding:2px;margin-left:1px}
  .ttab .x:hover{background:var(--surface-3);color:var(--fg-0)}
  .tadd{flex:none;width:36px;height:36px;border-radius:10px;background:transparent;color:var(--fg-1);border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
  .tadd:hover{background:var(--surface-2);color:var(--fg-0)}
  /* slide-out session drawer */
  .edge{position:absolute;left:0;top:44px;bottom:0;width:22px;z-index:30;touch-action:none}
  .scrim{position:absolute;inset:0;background:#000;z-index:40}
  .drawer{position:absolute;left:0;top:0;bottom:0;width:300px;background:var(--bg-1);box-shadow:var(--e2);z-index:41;display:flex;flex-direction:column}
  .drawer .grip{position:absolute;right:6px;top:50%;width:4px;height:46px;border-radius:999px;background:var(--surface-3);transform:translateY(-50%)}
  .dvrow{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:14px;cursor:pointer;min-height:58px;transition:background var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
  .dvrow:hover{background:var(--surface-1);box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.22)}
  .dvrow:active{transform:scale(.99)}
  .dvrow.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-ring), inset 3px 0 0 var(--accent)}
  /* generic */
  .sec{padding:14px 16px}
  .sec-h{font:600 12px var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--fg-2);margin:6px 2px 10px}
  .stack{display:flex;flex-direction:column;gap:12px}
  .listwrap{background:var(--surface-1);border-radius:16px;box-shadow:var(--e1);overflow:hidden}
  .chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:var(--r-pill);background:linear-gradient(180deg,var(--surface-2),var(--surface-1));color:var(--fg-0);font:500 13px var(--font);border:0;cursor:pointer;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 1px 3px rgba(0,0,0,.22);transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
  .chip:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.38)}
  .chip.on{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-ring)}
  .ctxbar{height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden}
  .ctxbar>i{display:block;height:100%;background:var(--accent);border-radius:999px}
  .kancol{flex:none;width:264px;display:flex;flex-direction:column;gap:10px}
  .kancard{background:var(--surface-1);border-radius:14px;box-shadow:var(--e1);padding:14px}
  .qr{width:188px;height:188px;border-radius:16px;background:#fff;padding:12px;display:grid;grid-template-columns:repeat(17,1fr);grid-auto-rows:1fr}
  .qr i{background:#0a0b0d;border-radius:1px}
  .codebox{width:42px;height:54px;border-radius:10px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font:600 26px var(--mono);color:var(--fg-0)}
  .step{width:7px;height:7px;border-radius:50%;background:var(--surface-3)}
  .step.on{background:var(--accent);width:20px;border-radius:999px}
  .toastwrap{position:absolute;left:0;right:0;bottom:84px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:20;pointer-events:none;padding:0 16px}
  .toastwrap .toast{pointer-events:auto;width:100%}
  /* bubble / background mode */
  .home{position:absolute;inset:0;z-index:50;overflow:hidden;background:
      radial-gradient(120% 80% at 50% -10%, var(--accent-soft) 0%, transparent 55%),
      linear-gradient(180deg, var(--bg-1), var(--bg-0));display:flex;flex-direction:column}
  .home-clock{font:200 76px/1 var(--font);letter-spacing:-.03em;color:var(--fg-0)}
  .home-dock{display:flex;gap:18px;justify-content:center;padding:18px;margin-top:auto}
  .home-dock i{width:46px;height:46px;border-radius:13px;background:var(--surface-2);box-shadow:var(--e1);display:block}
  .bubble{position:absolute;z-index:60;width:62px;height:62px;border-radius:50%;cursor:pointer;border:0;
      background:radial-gradient(circle at 32% 28%, var(--accent-hover), var(--accent) 55%, var(--accent-press));
      box-shadow:0 10px 26px rgba(0,0,0,.5), 0 0 0 3px var(--bg-0), 0 0 0 5px var(--accent-ring);
      display:flex;align-items:center;justify-content:center;color:#fff;font:700 22px var(--mono);
      transition:transform .15s var(--ease)}
  .bubble:active{transform:scale(.94)}
  .bubble .live{position:absolute;bottom:5px;right:5px;width:13px;height:13px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--bg-0)}
  .bubble .unread{position:absolute;top:-3px;right:-3px;min-width:21px;height:21px;border-radius:11px;background:var(--danger);color:#fff;font:700 12px var(--mono);display:flex;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 0 0 2px var(--bg-0)}
  .notif{display:flex;gap:10px;align-items:flex-start;background:var(--surface-3);border-radius:16px;box-shadow:var(--e2);padding:12px 13px;cursor:pointer;animation:slideIn .26s var(--ease)}
  @keyframes dashFlow{to{stroke-dashoffset:-18}}
  .devnode{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:5px}
  .devnode .ico{width:46px;height:46px;border-radius:14px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;box-shadow:var(--e1);position:relative}
  .devnode .ico .st{position:absolute;bottom:-3px;right:-3px;width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 3px var(--surface-1)}
  /* mock iOS keyboard */
  .kb{background:#1b1d22;padding:7px 5px calc(7px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;animation:kbUp .22s var(--ease)}
  @keyframes kbUp{from{transform:translateY(100%)}to{transform:none}}
  .kbrow{display:flex;gap:6px;justify-content:center}
  .kbkey{flex:1;height:42px;border:0;border-radius:6px;background:#3a3d44;color:#fff;font:400 18px var(--font);box-shadow:0 1px 0 rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .kbkey:active{background:#4c5059}
  .kbkey.alt{background:#26282d;flex:1.5;font-size:13px;font-weight:600}
  .kbkey.wide{flex:5}
  .kbkey.go{background:var(--accent);color:#fff;flex:2;font-size:14px;font-weight:600}
  /* haptics */
  @keyframes buzz{0%,100%{transform:translateX(0)}20%{transform:translateX(-2px)}40%{transform:translateX(2px)}60%{transform:translateX(-1.5px)}80%{transform:translateX(1.5px)}}
  .buzzing{animation:buzz .3s var(--ease)}
  .hpip{position:absolute;top:48px;left:50%;transform:translateX(-50%);z-index:80;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:var(--surface-3);box-shadow:var(--e2);color:var(--fg-0);font:600 11px var(--font);pointer-events:none;animation:slideIn .14s var(--ease)}
  /* app face (foreground) — shrinks toward bubble on swipe-up */
  .appface{position:absolute;inset:0;display:flex;flex-direction:column;transform-origin:50% 100%;overflow:hidden;border-radius:46px;background:var(--bg-1)}
  .homebar{position:absolute;left:0;right:0;bottom:0;height:22px;z-index:18;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab}
  .homebar .hint{color:var(--fg-2);opacity:.55;display:flex;height:12px;transition:opacity .15s,transform .15s}
  .homebar:hover .hint{opacity:.9;transform:translateY(-1px)}
  .homebar i{width:128px;height:5px;border-radius:999px;background:var(--fg-2);opacity:.7}
  /* in-app notification banners (foreground) */
  .nbanner{display:flex;gap:10px;align-items:flex-start;background:var(--surface-3);border-radius:16px;box-shadow:var(--e2);padding:11px 12px;cursor:pointer;overflow:hidden;position:relative;touch-action:pan-x;animation:dropIn .26s var(--ease)}
  .nbanner::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bz,var(--accent))}
  @keyframes dropIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
  /* bubble close target */
  .closez{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:59;width:60px;height:60px;border-radius:50%;background:var(--surface-3);box-shadow:var(--e2);display:flex;align-items:center;justify-content:center;color:var(--fg-1);transition:transform .15s var(--ease),background .15s,color .15s}
  .closez.near{transform:translateX(-50%) scale(1.35);background:var(--danger);color:#fff}
  .closez-aura{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);width:240px;height:160px;z-index:58;pointer-events:none;background:radial-gradient(60% 80% at 50% 100%, rgba(0,0,0,.45), transparent 70%)}
  @keyframes slideIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
  .switch{width:44px;height:26px;border-radius:999px;background:var(--surface-3);position:relative;cursor:pointer;border:0;flex:none;transition:background .15s}
  .switch.on{background:var(--accent)}
  .switch>i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
  .switch.on>i{left:21px}
  .planpro{position:relative;background:linear-gradient(180deg,var(--surface-2),var(--surface-1));border-radius:18px;box-shadow:var(--e1);padding:18px}
  .legend{font:500 12px var(--font);color:var(--fg-2)}
  .caption{font:500 12px var(--font);color:var(--fg-2);text-align:center;max-width:300px;margin:0 auto}
  /* desktop hint card */
  .aside{width:340px;flex:none;color:var(--fg-1)}
  .aside h1{font:800 30px var(--font);letter-spacing:-.02em;color:var(--fg-0);margin:0 0 12px}
  .aside p{font:400 15px/1.6 var(--font);margin:0 0 16px}
  .aside .mono{font:500 12px var(--mono);color:var(--fg-2)}
  .aside .feat{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;font:500 13px/1.5 var(--font);color:var(--fg-1)}
  .aside .feat svg{flex:none;margin-top:1px;color:var(--accent)}
  @media (max-width:900px){.aside{display:none}}


/* ============================================================================
   PRODUCTION OVERRIDES — turn the phone-frame design mockup into a real app.
   Single blue accent (#0a84ff) is the colors.css default; no fiesta re-skin.
   ========================================================================== */
:root{
  --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);
  --font:'Manrope','Ormur Latin Ext Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono','Ormur Latin Ext','Cascadia Code','SF Mono',ui-monospace,Consolas,'Segoe UI Symbol','Noto Sans Symbols 2','Noto Sans Symbols','Noto Color Emoji',monospace;
}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--bg-0)}
body{display:block!important;padding:0!important;gap:0!important;min-height:100%;
     /* NO ambient glow / fluorescence — pure flat background (the brand gradient lives only
        on real elements: logo, title, accent buttons). Solid theme bg (near-black on dark themes). */
     background:var(--bg-0)!important}
#root{height:100%;background:var(--bg-0)}
.aside{display:none!important}
.statusbar{display:none!important}
/* track the visual viewport so the soft keyboard shrinks the app (composer + keybar
   ride above the keyboard) instead of scrolling the whole screen away */
/* White-flash-on-keyboard fix (Onur: "klavyeyle yazarken ekranda beyaz bir flash oluşuyor"):
   .phone is resized live (var(--app-h)/var(--app-top), driven by visualViewport in app.html) every
   time the soft keyboard opens/closes/animates. It used to be background:transparent, betting that
   body's --bg-0 always shows through underneath — true at rest, but during the resize/repaint churn
   this is one of the root-covering layers that must carry its OWN solid themed fill rather than rely
   on a lower layer painting in time. Solid now; visually identical (same var(--bg-0) as body). */
.phone{position:fixed!important;top:var(--app-top,0)!important;left:0;right:0;
       width:100%!important;height:var(--app-h,100vh)!important;max-width:none!important;
       border-radius:0!important;box-shadow:none!important;background:var(--bg-0);overflow:hidden}
.appface{border-radius:0!important;padding-top:var(--sat)}
.scroll,.term,.term .xterm-viewport{overscroll-behavior:contain}
.tabbar{padding-bottom:calc(8px + var(--sab))!important}
/* the real terminal lives in an iframe filling the Terminal tab */
.termframe{flex:1;min-height:0;width:100%;border:0;display:block;background:var(--term-bg)}
/* "demo data" marker for the one screen with no backend (Usage) */
.demo-badge{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:999px;
  background:var(--warn-soft);color:var(--warn);font:600 10px/1 var(--font);letter-spacing:.05em;text-transform:uppercase}
/* loading / empty state for wired screens */
.dc-empty{padding:28px 16px;text-align:center;color:var(--fg-2);font:500 13px/1.5 var(--font)}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ============================================================================
   TABLET / WIDE-VIEWPORT — the phone layout below 720px is UNCHANGED. The real
   app pins .phone to the whole viewport (position:fixed;width:100%), so on a
   tablet (or a landscape device) the content column + bottom nav would otherwise
   stretch edge-to-edge and read poorly. Here we only cap the readable width of
   each NON-terminal screen and re-centre the bottom nav; the Terminal tab stays
   full-bleed so xterm's FitAddon fills the wide screen. Purely geometric — single
   accent + existing tokens, no new colours. 720px is safely above any portrait
   phone width, so portrait phones never trip these rules.
   ========================================================================== */
@media (min-width:720px){
  /* `.appface > .screen` matches ONLY the active non-terminal screen: the Terminal
     screen's .screen is nested under its always-mounted wrapper div, so it is not a
     direct child of .appface and keeps the full viewport width. */
  .appface > .screen{max-width:720px;width:100%;margin-inline:auto}
  /* bottom nav: don't let the 6 tabs stretch across a tablet — keep them phone-sized,
     grouped + centred (the bar background still spans edge-to-edge). */
  .tabbar{justify-content:center;gap:6px}
  .tab{flex:0 0 96px}
  /* foreground notification banners + toasts follow the same readable column */
  .toastwrap .toast{max-width:600px}
  .nbanner{max-width:640px;margin-inline:auto}
}
/* tablets: a comfortable reading column (720 is a cramped phone strip on a 10" screen) + roomier
   bottom-nav tabs + wider overlays. The Terminal keeps the full viewport (nested, not `.appface > .screen`). */
@media (min-width:900px){
  .appface > .screen{max-width:820px}
  .tab{flex:0 0 104px}
  .toastwrap .toast{max-width:700px}
  .nbanner{max-width:700px}
}
/* large tablets / desktop web: wider still, and give the terminal session-tab row some side padding
   so tabs don't hug the left edge of a wide viewport. */
@media (min-width:1200px){
  .appface > .screen{max-width:900px}
  .ttabs{padding-inline:10px}
}

/* ===== xterm.js base styles (vendored, CSP-clean) ===== */
/**
 * Copyright (c) 2014 The xterm.js authors. All rights reserved.
 * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
 * https://github.com/chjj/term.js
 * @license MIT
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * Originally forked from (with the author's permission):
 *   Fabrice Bellard's javascript vt100 for jslinux:
 *   http://bellard.org/jslinux/
 *   Copyright (c) 2011 Fabrice Bellard
 *   The original design remains. The terminal itself
 *   has been extended to include xterm CSI codes, among
 *   other features.
 */

/**
 *  Default styles for xterm.js
 */

.xterm {
    cursor: text;
    position: relative;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
    outline: none;
}

.xterm .xterm-helpers {
    position: absolute;
    top: 0;
    /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
    z-index: 5;
}

.xterm .xterm-helper-textarea {
    padding: 0;
    border: 0;
    margin: 0;
    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    width: 0;
    height: 0;
    z-index: -5;
    /** Prevent wrapping so the IME appears against the textarea at the correct position */
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}

.xterm .composition-view {
    /* TODO: Composition position got messed up somewhere */
    background: #000;
    color: #FFF;
    display: none;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}

.xterm .composition-view.active {
    display: block;
}

.xterm .xterm-viewport {
    /* On OS X this is required in order for the scroll bar to appear fully opaque */
    background-color: #000;
    overflow-y: scroll;
    cursor: default;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.xterm .xterm-screen {
    position: relative;
}

.xterm .xterm-screen canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.xterm-char-measure-element {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -9999em;
    line-height: normal;
}

.xterm.enable-mouse-events {
    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
    cursor: default;
}

.xterm.xterm-cursor-pointer,
.xterm .xterm-cursor-pointer {
    cursor: pointer;
}

.xterm.column-select.focus {
    /* Column selection mode */
    cursor: crosshair;
}

.xterm .xterm-accessibility:not(.debug),
.xterm .xterm-message {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    color: transparent;
    pointer-events: none;
}

.xterm .xterm-accessibility-tree:not(.debug) *::selection {
  color: transparent;
}

.xterm .xterm-accessibility-tree {
  font-family: monospace;
  user-select: text;
  white-space: pre;
}

.xterm .xterm-accessibility-tree > div {
  transform-origin: left;
  width: fit-content;
}

.xterm .live-region {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.xterm-dim {
    /* Dim should not apply to background, so the opacity of the foreground color is applied
     * explicitly in the generated class and reset to 1 here */
    opacity: 1 !important;
}

.xterm-underline-1 { text-decoration: underline; }
.xterm-underline-2 { text-decoration: double underline; }
.xterm-underline-3 { text-decoration: wavy underline; }
.xterm-underline-4 { text-decoration: dotted underline; }
.xterm-underline-5 { text-decoration: dashed underline; }

.xterm-overline {
    text-decoration: overline;
}

.xterm-overline.xterm-underline-1 { text-decoration: overline underline; }
.xterm-overline.xterm-underline-2 { text-decoration: overline double underline; }
.xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; }
.xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; }
.xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; }

.xterm-strikethrough {
    text-decoration: line-through;
}

.xterm-screen .xterm-decoration-container .xterm-decoration {
	z-index: 6;
	position: absolute;
}

.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
	z-index: 7;
}

.xterm-decoration-overview-ruler {
    z-index: 8;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

.xterm-decoration-top {
    z-index: 2;
    position: relative;
}



/* Derived from vs/base/browser/ui/scrollbar/media/scrollbar.css */

/* xterm.js customization: Override xterm's cursor style */
.xterm .xterm-scrollable-element > .scrollbar {
    cursor: default;
}

/* Arrows */
.xterm .xterm-scrollable-element > .scrollbar > .scra {
	cursor: pointer;
	font-size: 11px !important;
}

.xterm .xterm-scrollable-element > .visible {
	opacity: 1;

	/* Background rule added for IE9 - to allow clicks on dom node */
	background:rgba(0,0,0,0);

	transition: opacity 100ms linear;
	/* In front of peek view */
	z-index: 11;
}
.xterm .xterm-scrollable-element > .invisible {
	opacity: 0;
	pointer-events: none;
}
.xterm .xterm-scrollable-element > .invisible.fade {
	transition: opacity 800ms linear;
}

/* Scrollable Content Inset Shadow */
.xterm .xterm-scrollable-element > .shadow {
	position: absolute;
	display: none;
}
.xterm .xterm-scrollable-element > .shadow.top {
	display: block;
	top: 0;
	left: 3px;
	height: 3px;
	width: 100%;
	box-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset;
}
.xterm .xterm-scrollable-element > .shadow.left {
	display: block;
	top: 3px;
	left: 0;
	height: 100%;
	width: 3px;
	box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}
.xterm .xterm-scrollable-element > .shadow.top-left-corner {
	display: block;
	top: 0;
	left: 0;
	height: 3px;
	width: 3px;
}
.xterm .xterm-scrollable-element > .shadow.top.left {
	box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}

/* xterm fit into the .term area — horizontal padding 6px (was 10): on a phone-width grid every
   px is a column; 10px each side burned ~1 col for pure air (the /effort menu-wrap fix set) */
.term .xterm{height:100%;width:100%;padding:8px 6px}
.term .xterm-viewport{scrollbar-width:none}
.term .xterm-viewport::-webkit-scrollbar{display:none}

/* when the soft keyboard is open, hide the bottom nav so the composer + keys + terminal get the room */
.kb-open .tabbar{display:none!important}

/* weave the theme accent into section labels + terminal session tab name (balanced, per-theme) */
.t-eyebrow{color:var(--accent)}
.ttab.on .nm{color:var(--accent)!important}

/* mobile: smooth one-finger scrolling of the terminal scrollback. xterm's canvas/screen
   layer otherwise swallows touch drags (felt "stuck"); pan-y lets vertical drags scroll the
   viewport while long-press still selects. Momentum + contained overscroll = native feel. */
.xterm-viewport{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none}
.xterm-viewport::-webkit-scrollbar{width:0;height:0}
/* the JS touch-drag handler (TerminalScreen) owns vertical scroll → tell the browser not to
   pan/zoom on the terminal surface so drags reach our handler cleanly (no jank/intercept). */
.term,.term .xterm,.term .xterm-screen{touch-action:none;overscroll-behavior:contain}
.term.selecting{box-shadow:inset 0 0 0 1.5px var(--accent-ring)}
.term.selecting .xterm{cursor:crosshair}
.term-selbar{
  position:absolute;left:50%;bottom:16px;z-index:30;transform:translateX(-50%);
  display:flex;gap:6px;align-items:center;padding:6px;
  background:rgba(30,34,40,.94);border-radius:16px;   /* dark glass (terminal is dark in every theme); color-mix avoided for old WebView */
  box-shadow:0 12px 36px rgba(0,0,0,.5), inset 0 0 0 1px var(--border-strong), inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  animation:selbar-in .16s var(--ease)
}
@keyframes selbar-in{from{opacity:0;transform:translateX(-50%) translateY(8px) scale(.96)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.term-selbar .term-sel-action{height:42px;min-width:56px;padding:0 16px;font:600 13px var(--font);color:var(--fg-1);background:linear-gradient(180deg,var(--surface-2),var(--surface-1))}
.term-selbar .term-sel-action:active{transform:translateY(1px) scale(.97)}
/* Copy = the primary action: filled accent ramp so the eye lands on it first */
.term-selbar .term-sel-action.primary{color:#fff;background:linear-gradient(180deg,var(--accent-hover),var(--accent),var(--accent-press));box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 3px 8px rgba(0,0,0,.3)}
.term-selbar .close{color:var(--fg-2)}
/* The handle CENTER sits on the (left,top) point cellHandlePoint computes (= row center + SEL_LIFT, i.e.
   below the glyph). The BUTTON stays a big invisible 44px grab target (fingertip ≈ 45px); the VISUAL is a
   native-Android-style teardrop (~22px) whose sharp tip points UP at the exact glyph — that tip replaces
   the old dot+stem look (Onur: "topuzları modern pro yap"). Gradient + hairline ring + soft elevation =
   the same raised-cushion language as .iconbtn, so it reads as part of the system, not a debug widget. */
.term-sel-handle{
  position:absolute;z-index:31;width:44px;height:44px;margin:0;padding:0;border:0;background:transparent;
  transform:translate(-50%,-50%);touch-action:none;cursor:grab
}
.term-sel-handle::after{
  content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;
  transform:translate(-50%,-58%) rotate(45deg);
  background:linear-gradient(135deg,var(--accent-hover),var(--accent-press));
  border-radius:0 50% 50% 50%; /* sharp corner -> rotated to point straight up at the row */
  box-shadow:0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1.5px rgba(255,255,255,.28);
  transition:transform .12s var(--ease)
}
.term-sel-handle:active{cursor:grabbing}
.term-sel-handle:active::after{transform:translate(-50%,-58%) rotate(45deg) scale(1.14)}
