/* =============================================================
   MagicBin — MagicKB design system · dark + light themes
   IBM Plex Sans · JetBrains Mono · IBM Plex Sans Condensed
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans+Condensed:wght@400;500;600&display=swap');

/* ── Dark tokens — Night Owl (sdras) ───────────────────────── */
:root, [data-theme="dark"] {
  --bg:           #011627;
  --surface:      #0d2137;
  --surface-2:    #162d40;
  --surface-3:    #1e3a50;
  --border:       rgba(130,170,255,.10);
  --border-2:     rgba(130,170,255,.20);
  --text:         #d6deeb;
  --text-2:       #c5d1e0;
  --muted:        #8badc1;
  --subtle:       #4a6680;
  --primary:      #82aaff;
  --primary-bg:   rgba(130,170,255,.12);
  --primary-dark: #001a3a;
  --accent:       #c792ea;
  --green:        #22da6e;
  --green-bg:     rgba(34,218,110,.10);
  --amber:        #ffbc42;
  --amber-bg:     rgba(255,188,66,.10);
  --red:          #ef5350;
  --red-bg:       rgba(239,83,80,.12);
  --teal:         #7fdbca;
  --code-bg:      #01111d;
  --code-text:    #d6deeb;
  color-scheme: dark;
}

/* ── Light tokens — Light Owl (sdras) ──────────────────────── */
[data-theme="light"] {
  --bg:           #f0f0f0;
  --surface:      #fbfbfb;
  --surface-2:    #f5f5f5;
  --surface-3:    #e8e8e8;
  --border:       rgba(64,63,83,.10);
  --border-2:     rgba(64,63,83,.20);
  --text:         #403f53;
  --text-2:       #4e4d6a;
  --muted:        #7a7a8e;
  --subtle:       #aea9c3;
  --primary:      #4876d6;
  --primary-bg:   rgba(72,118,214,.10);
  --primary-dark: #fbfbfb;
  --accent:       #994cc3;
  --green:        #2aa298;
  --green-bg:     rgba(42,162,152,.10);
  --amber:        #bc5454;
  --amber-bg:     rgba(188,84,84,.10);
  --red:          #d0454c;
  --red-bg:       rgba(208,69,76,.10);
  --teal:         #0c969b;
  --code-bg:      #fbfbfb;
  --code-text:    #403f53;
  color-scheme: light;
}

/* ── Shared structural tokens ───────────────────────────────── */
:root {
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 18px; --r-full: 9999px;
  --topbar-h: 56px;
  --ann-h:    38px;
  --bottom-h: 52px;
  --sh-1: 0 1px 3px  rgba(0,0,0,.40);
  --sh-2: 0 4px 12px rgba(0,0,0,.50);
  --sh-3: 0 8px 24px rgba(0,0,0,.55);
  --tr:   .18s cubic-bezier(.2,0,0,1);
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
}
[data-theme="light"] {
  --sh-1: 0 1px 3px rgba(0,0,0,.06);
  --sh-2: 0 4px 12px rgba(0,0,0,.10);
  --sh-3: 0 8px 24px rgba(0,0,0,.14);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-sans);
  background: var(--bg); color: var(--text);
  line-height: 1.6; display: flex; flex-direction: column;
  overflow: hidden; /* keep full-height layout intact */
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--subtle); }
::selection { background: rgba(130,170,255,.20); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Announcement bar (create page) ───────────────────────── */
.ann-bar {
  height: var(--ann-h); flex-shrink: 0;
  background: rgba(127,219,202,.06);
  border-bottom: 1px solid rgba(127,219,202,.18);
  display: flex; align-items: center; justify-content: center;
  gap: 8px; font-size: .82rem; color: var(--teal);
  font-family: 'IBM Plex Sans Condensed', system-ui, sans-serif;
  letter-spacing: .01em;
  position: relative; padding: 0 44px;
  flex-wrap: nowrap; white-space: nowrap; overflow: hidden;
}
[data-theme="light"] .ann-bar {
  background: rgba(0,105,92,.05);
  border-bottom-color: rgba(0,105,92,.18);
}
.ann-bar strong { color: var(--text); }
.ann-close {
  position: absolute; right: 12px; background: none; border: none;
  color: var(--teal); opacity: .5; cursor: pointer; font-size: 1.1rem;
  padding: 4px 6px; border-radius: var(--r-sm); transition: opacity var(--tr); line-height: 1;
}
.ann-close:hover { opacity: 1; }
.ann-link {
  color: var(--teal);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(127,219,202,.35);
  transition: border-color var(--tr);
}
.ann-link:hover { border-bottom-color: var(--teal); text-decoration: none; }

/* ── Burn banner (view page — read-once paste) ─────────────── */
/* Styled to match ann-bar structure but fire-themed and unmissable */
.burn-banner {
  height: var(--ann-h); flex-shrink: 0;
  background: linear-gradient(90deg,
    rgba(239,83,80,.18) 0%,
    rgba(239,83,80,.10) 50%,
    rgba(239,83,80,.18) 100%);
  border-bottom: 1px solid rgba(239,83,80,.40);
  display: flex; align-items: center; justify-content: center;
  gap: 8px; font-size: .8rem; color: var(--red);
  font-family: 'IBM Plex Sans Condensed', system-ui, sans-serif; letter-spacing: .01em;
  position: relative; padding: 0 44px;
  white-space: nowrap; overflow: hidden;
  animation: burnGlow 2.5s ease-in-out infinite;
}
[data-theme="light"] .burn-banner {
  background: linear-gradient(90deg,
    rgba(198,40,40,.12) 0%,
    rgba(198,40,40,.06) 50%,
    rgba(198,40,40,.12) 100%);
  border-bottom-color: rgba(198,40,40,.35);
}
@keyframes burnGlow {
  0%,100% { box-shadow: none; border-bottom-color: rgba(239,83,80,.40); }
  50%     { box-shadow: 0 2px 16px rgba(239,83,80,.20);
            border-bottom-color: rgba(239,83,80,.70); }
}
.burn-banner strong { color: #ff6b6b; font-weight: 700; }
[data-theme="light"] .burn-banner strong { color: #c62828; }
.burn-banner .ann-close { color: var(--red); }

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h); flex-shrink: 0;
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 16px; gap: 12px; z-index: 50;
}
.topbar-brand {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none !important; flex-shrink: 0;
}
/* Brand icon: matches MagicKB exactly */
.brand-icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, #82aaff, #c792ea);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.brand-text {
  font-size: 1.05rem; color: var(--text);
  letter-spacing: -.02em; font-weight: 500;
}
.brand-text strong { color: var(--primary); }
[data-theme="light"] .brand-text strong { color: #4876d6; }
.topbar-spacer { flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: var(--r-full);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: .825rem; font-weight: 600; cursor: pointer; border: none;
  transition: all var(--tr); text-decoration: none !important;
  white-space: nowrap; line-height: 1;
}
.btn .mi { font-family: 'Material Icons Round'; font-size: 15px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn-primary {
  background: var(--primary); color: var(--primary-dark);
  box-shadow: 0 2px 8px var(--primary-bg);
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-2);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

/* Light theme: dark buttons so they read against the white surface */
[data-theme="light"] .btn-ghost {
  color: #403f53;
  border-color: rgba(64,63,83,.22);
}
[data-theme="light"] .btn-ghost:hover {
  background: #403f53;
  color: #ffffff;
  border-color: #403f53;
}
[data-theme="light"] .btn-primary {
  background: #403f53;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(49,49,49,.18);
}
[data-theme="light"] .btn-primary:hover { background: #1a1a1a; filter: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; filter: none !important; }

/* Icon button — matches MagicKB .icon-btn */
.icon-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  border-radius: var(--r-sm); color: var(--muted);
  transition: all var(--tr); flex-shrink: 0;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn .material-icons-round { font-size: 20px; }
[data-theme="light"] .icon-btn { color: #403f53; }
[data-theme="light"] .icon-btn:hover { background: #403f53; color: #ffffff; }

  to   { opacity: 1; transform: translateY(0); }
}
.lang-dd-menu.show { display: block; }
.lang-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  font-size: .85rem; color: var(--text-2);
  cursor: pointer;
  transition: background var(--tr);
  border: none; background: none; width: 100%; text-align: left;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.lang-dd-item:hover { background: var(--surface-2); }
.lang-dd-item.active {
  color: var(--primary);
  background: var(--primary-bg);
}
[data-theme="light"] .lang-dd-item.active { color: #4876d6; background: rgba(72,118,214,.08); }
.lang-dd-flag { font-size: 1rem; flex-shrink: 0; }
.lang-dd-name { flex: 1; }
.lang-dd-check {
  font-family: 'Material Icons Round';
  font-size: 14px; color: var(--primary);
  opacity: 0;
}
.lang-dd-item.active .lang-dd-check { opacity: 1; }

/* ── Editor layout ─────────────────────────────────────────── */
.editor-shell {
  flex: 1; display: flex; flex-direction: column;
  min-height: 0; position: relative; overflow: hidden;
}
.editor-sub-bar {
  height: 30px; flex-shrink: 0;
  background: var(--code-bg); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 14px; gap: 10px;
}
.lang-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; letter-spacing: .09em;
  color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 1px 7px; text-transform: uppercase; transition: all var(--tr);
}
.lang-pill.detected {
  color: var(--teal);
  border-color: rgba(127,219,202,.3);
  background: rgba(127,219,202,.06);
}
[data-theme="light"] .lang-pill.detected {
  border-color: rgba(0,105,92,.3);
  background: rgba(0,105,92,.06);
}
.cm-wrap { flex: 1; min-height: 0; overflow: hidden; position: relative; }

/* CodeMirror */
.CodeMirror {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13.5px !important; line-height: 1.72 !important;
  height: 100% !important;
  background: var(--code-bg) !important; color: var(--code-text) !important;
}
.CodeMirror-scroll { padding-bottom: 48px; }
.cm-s-night-owl .CodeMirror-gutters    { background: var(--code-bg) !important; border-right: 1px solid var(--border) !important; }
.cm-s-night-owl .CodeMirror-linenumber { color: var(--subtle) !important; padding: 0 10px 0 8px !important; min-width: 36px; text-align: right; }
.cm-s-night-owl .CodeMirror-cursor     { border-left: 2px solid var(--teal) !important; }
.cm-s-night-owl .CodeMirror-selected   { background: rgba(130,170,255,.14) !important; }
.cm-s-night-owl .CodeMirror-activeline-background { background: rgba(255,255,255,.022) !important; }
.cm-s-night-owl .CodeMirror-matchingbracket { background: rgba(127,219,202,.18) !important; color: var(--teal) !important; outline: none !important; }
.cm-s-night-owl span.cm-keyword   { color: #c792ea !important; font-style: italic; }
.cm-s-night-owl span.cm-atom,
.cm-s-night-owl span.cm-number    { color: #f78c6c !important; }
.cm-s-night-owl span.cm-def       { color: #82aaff !important; }
.cm-s-night-owl span.cm-variable  { color: #d6deeb !important; }
.cm-s-night-owl span.cm-variable-2,
.cm-s-night-owl span.cm-property  { color: #addb67 !important; }
.cm-s-night-owl span.cm-operator  { color: #89ddff !important; }
.cm-s-night-owl span.cm-string    { color: #ecc48d !important; }
.cm-s-night-owl span.cm-comment   { color: #637777 !important; font-style: italic; }
.cm-s-night-owl span.cm-tag       { color: #7fdbca !important; }
.cm-s-night-owl span.cm-attribute { color: #addb67 !important; }
.cm-s-night-owl span.cm-builtin   { color: #7fdbca !important; }
.cm-s-night-owl span.cm-meta      { color: #82aaff !important; }
.cm-s-night-owl span.cm-type      { color: #c792ea !important; }

/* ════════════════════════════════════════════════════════════
   GLITCH OVERLAY — shared by encrypt (index) and decrypt (view)
   On create page: covers the CM editor in-place
   On view page:   covers the whole screen (fullscreen variant)
   ════════════════════════════════════════════════════════════ */
.glitch-overlay {
  display: none;
  position: absolute;
  top: 30px; left: 0; right: 0; bottom: 0; /* below editor-sub-bar */
  background: var(--code-bg); z-index: 20; overflow: hidden;
}
.glitch-overlay.active { display: block; }

/* Full-screen variant used for decrypt */
.glitch-overlay.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 300;
}

.glitch-pre {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px; line-height: 1.72;
  padding: 4px 0 0 50px; /* align with CM gutter */
  color: var(--code-text);
  white-space: pre; overflow: hidden;
  height: 100%; position: relative; z-index: 2;
}
.glitch-overlay.fullscreen .glitch-pre {
  padding: 18px 22px;
}

/* Vignette flicker */
.glitch-overlay::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(1,17,29,.7) 100%);
  pointer-events: none; z-index: 3;
  animation: gFlicker .14s step-end infinite;
}
[data-theme="light"] .glitch-overlay::after {
  background: radial-gradient(ellipse at center, transparent 55%, rgba(240,242,245,.55) 100%);
}
@keyframes gFlicker {
  0%,100% { opacity: 1; } 44% { opacity: .92; } 45% { opacity: .7; } 46% { opacity: .92; } 79% { opacity: .87; }
}

/* Status bar at bottom */
.glitch-status {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 28px; background: var(--surface);
  border-top: 1px solid rgba(127,219,202,.22);
  display: flex; align-items: center; padding: 0 14px; gap: 12px; z-index: 10;
}
[data-theme="light"] .glitch-status { border-top-color: rgba(0,105,92,.2); }
.glitch-status-text {
  font-family: 'IBM Plex Sans Condensed', system-ui, sans-serif;
  font-size: .72rem; letter-spacing: .06em; color: var(--teal);
}
.glitch-status-bar { flex: 1; height: 2px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.glitch-status-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--primary));
  transition: width .08s linear; box-shadow: 0 0 6px var(--teal);
}
.glitch-status-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; color: var(--teal); min-width: 36px; text-align: right;
}

/* Character colour states */
.g-orig   { color: var(--code-text); }
.g-hex    { color: var(--teal); }
.g-random { color: var(--primary); opacity: .7; }
.g-locked { color: rgba(127,219,202,.35); }
[data-theme="light"] .g-hex    { color: #00695c; }
[data-theme="light"] .g-random { color: #4876d6; }
[data-theme="light"] .g-locked { color: rgba(0,105,92,.4); }

/* ── Bottom toolbar ─────────────────────────────────────────── */
.bottom-bar {
  height: var(--bottom-h); flex-shrink: 0;
  background: var(--surface); border-top: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 14px; gap: 8px;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
}
.bottom-bar::-webkit-scrollbar { height: 3px; }
.bb-sep { width: 1px; height: 20px; background: var(--border-2); flex-shrink: 0; }

.lang-select {
  -webkit-appearance: none; appearance: none;
  background: var(--surface-2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234a6680'/%3E%3C/svg%3E")
    no-repeat right 7px center;
  border: 1px solid var(--border-2); border-radius: var(--r-sm);
  color: var(--muted); font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; padding: 5px 22px 5px 8px;
  outline: none; cursor: pointer; flex-shrink: 0;
  transition: border-color var(--tr), color var(--tr); max-width: 138px;
}
.lang-select:focus { border-color: var(--primary); color: var(--text); }

.exp-group { display: flex; gap: 4px; flex-shrink: 0; }
.exp-chip {
  font-family: 'JetBrains Mono', monospace; font-size: .72rem;
  padding: 4px 11px; border-radius: var(--r-full);
  border: 1px solid var(--border-2); background: transparent;
  color: var(--muted); cursor: pointer; transition: all var(--tr); flex-shrink: 0;
}
.exp-chip:hover  { border-color: var(--primary); color: var(--primary); }
.exp-chip.active { border-color: var(--primary); background: var(--primary-bg); color: var(--primary); }

.bb-label { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--muted); flex-shrink: 0; }

.views-slider {
  -webkit-appearance: none; appearance: none;
  width: 80px; height: 3px; background: var(--surface-3);
  border-radius: 2px; outline: none; cursor: pointer; flex-shrink: 0;
}
.views-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--primary); cursor: pointer; transition: transform var(--tr);
}
.views-slider::-webkit-slider-thumb:hover { transform: scale(1.25); }
.views-val { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--primary); min-width: 20px; flex-shrink: 0; }

.burn-wrap { display: flex; align-items: center; gap: 6px; cursor: pointer; flex-shrink: 0; }
.burn-wrap input { display: none; }
.burn-track {
  position: relative; width: 32px; height: 17px;
  background: var(--surface-3); border-radius: var(--r-full);
  border: 1px solid transparent; transition: all var(--tr); flex-shrink: 0;
}
.burn-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--subtle); transition: all var(--tr);
}
.burn-wrap input:checked ~ .burn-track { background: var(--red-bg); border-color: var(--red); }
.burn-wrap input:checked ~ .burn-track::after { transform: translateX(15px); background: var(--red); }

.size-wrap { display: flex; align-items: center; gap: 7px; flex-shrink: 0; margin-left: auto; margin-right: 8px; }
.size-track { width: 80px; height: 3px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.size-fill  { height: 100%; width: 0%; background: var(--primary); border-radius: 2px; transition: width .3s ease, background .3s; }
.size-text  { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--subtle); }

.create-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--r);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: .875rem; font-weight: 700; cursor: pointer; border: none;
  background: linear-gradient(135deg, #82aaff, #c792ea);
  color: #011627;
  box-shadow: 0 2px 12px rgba(130,170,255,.30);
  transition: all var(--tr); flex-shrink: 0;
}
[data-theme="light"] .create-btn { background: #403f53; color: #ffffff; box-shadow: 0 2px 10px rgba(64,63,83,.20); }
[data-theme="light"] .create-btn:hover { filter: none; background: #2d2c3e; }
.create-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.create-btn:active { transform: none; }
.create-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.create-btn .mi { font-family: 'Material Icons Round'; font-size: 16px; }

/* ── Result modal ───────────────────────────────────────────── */
.modal-back {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: rgba(1,22,39,.85); backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
  padding: 16px;
}
[data-theme="light"] .modal-back { background: rgba(28,37,51,.60); }
.modal-back.show { display: flex; }

.modal {
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-xl); padding: 24px;
  max-width: 520px; width: 100%;
  box-shadow: var(--sh-3); animation: modalIn .2s ease-out;
  max-height: calc(100vh - 32px); overflow-y: auto;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.modal-check {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green-bg); border: 1px solid rgba(34,218,110,.28);
  display: flex; align-items: center; justify-content: center;
  color: var(--green); font-size: 1.1rem; flex-shrink: 0;
}
.modal-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.modal-sub   { font-size: .825rem; color: var(--text-2); line-height: 1.5; }

/* Separate-key toggle row */
.split-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; margin-bottom: 12px;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--r); gap: 12px;
}
.split-toggle-label {
  display: flex; align-items: center; gap: 7px;
  font-size: .825rem; font-weight: 500; color: var(--text-2);
}
.split-toggle-label .material-icons-round { font-size: 16px; color: var(--amber); }

/* Small toggle switch */
.toggle-sm { display: flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.toggle-sm input { display: none; }
.toggle-sm-track {
  position: relative; width: 34px; height: 18px;
  background: var(--surface-3); border-radius: var(--r-full);
  border: 1px solid var(--border-2); transition: all var(--tr);
}
.toggle-sm-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--subtle); transition: all var(--tr);
}
.toggle-sm input:checked ~ .toggle-sm-track { background: var(--primary-bg); border-color: var(--primary); }
.toggle-sm input:checked ~ .toggle-sm-track::after { transform: translateX(16px); background: var(--primary); }

/* URL field */
.url-field {
  display: flex; align-items: center; gap: 8px;
  background: var(--code-bg); border: 1px solid var(--border-2);
  border-radius: var(--r); padding: 10px 12px; margin-bottom: 10px;
}
.url-field-input {
  flex: 1; min-width: 0;
  font-family: 'JetBrains Mono', monospace; font-size: .75rem;
  color: var(--primary); background: none; border: none; outline: none;
  cursor: text; user-select: all; word-break: break-all;
}
[data-theme="light"] .url-field-input { color: #4876d6; }
.copy-btn {
  flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--r-sm); color: var(--text-2);
  font-family: 'JetBrains Mono', monospace; font-size: .72rem;
  padding: 5px 12px; cursor: pointer; transition: all var(--tr); white-space: nowrap;
  font-weight: 600;
}
.copy-btn:hover { border-color: var(--teal); color: var(--teal); }
.copy-btn.done  { border-color: var(--green); color: var(--green); background: var(--green-bg); }
/* Icon-only copy button: square, no text */
.copy-btn.icon-only { padding: 5px 8px; }
.copy-btn.icon-only .material-icons-round { font-size: 16px; display: block; line-height: 1; }
[data-theme="light"] .copy-btn { color: #403f53; border-color: rgba(64,63,83,.28); }
[data-theme="light"] .copy-btn:hover { border-color: var(--teal); color: var(--teal); }

/* Split fields */
.split-fields { display: none; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.split-fields.show { display: flex; }

.split-field-label {
  font-size: .78rem; font-weight: 600; color: var(--text-2);
  margin-bottom: 5px; display: flex; align-items: center; gap: 6px;
}
[data-theme="light"] .split-field-label { color: #403f53; }
.split-field-label .material-icons-round { font-size: 14px; color: var(--primary); }
.split-field-sublabel {
  font-size: .72rem; color: var(--muted); margin-top: -2px; margin-bottom: 6px;
  padding-left: 20px;
}
[data-theme="light"] .split-field-sublabel { color: #7a7a8e; }

.combined-field.hidden { display: none; }

.modal-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.mpill {
  font-family: 'JetBrains Mono', monospace; font-size: .72rem;
  letter-spacing: .04em; padding: 3px 10px; border-radius: var(--r-full);
  border: 1px solid var(--border-2); color: var(--text-2);
  font-weight: 500;
}
[data-theme="light"] .mpill { color: #403f53; border-color: rgba(64,63,83,.18); }
.mpill-expire { border-color: rgba(255,188,66,.45); color: var(--amber); background: var(--amber-bg); }
.mpill-views  { border-color: rgba(130,170,255,.45); color: var(--primary); background: var(--primary-bg); }
.mpill-burn   { border-color: rgba(239,83,80,.45);   color: var(--red);    background: var(--red-bg); }
[data-theme="light"] .mpill-expire { color: #e65100; }
[data-theme="light"] .mpill-views  { color: #4876d6; }
[data-theme="light"] .mpill-burn   { color: #c62828; }

.modal-x-close {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  border-radius: var(--r-sm); color: var(--subtle);
  transition: all var(--tr); margin-left: auto;
}
.modal-x-close:hover { background: var(--surface-2); color: var(--text); }
.modal-x-close .material-icons-round { font-size: 18px; }

/* Pills displayed inline under the modal title */
.modal-head-pills {
  display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px;
}
.modal-head-pills .mpill { font-size: .72rem; padding: 2px 8px; }

/* Size pill on view page */
.vpill-size { border-color: var(--border); color: var(--muted); }

/* ── Woosh animation ─────────────────────────────────────── */
.woosh-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--primary);
  background: var(--code-bg);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .15s ease, transform .15s ease;
}
[data-theme="light"] .woosh-msg { color: var(--primary); background: var(--code-bg); }
.woosh-msg.woosh-fade {
  opacity: 1;
  transform: scale(1);
  transition: opacity .12s ease, transform .12s ease;
}
/* After a short hold, fade out upward */
.woosh-msg.woosh-fade {
  animation: wooshAnim .65s ease forwards;
}
@keyframes wooshAnim {
  0%   { opacity: 0;   transform: scale(.85) translateY(4px); }
  20%  { opacity: 1;   transform: scale(1)   translateY(0); }
  70%  { opacity: 1;   transform: scale(1)   translateY(0); }
  100% { opacity: 0;   transform: scale(1.05) translateY(-8px); }
}

/* Amber info panel replacing modal-warn */
.modal-info-panel {
  background: var(--amber-bg);
  border: 1px solid rgba(255,188,66,.35);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 4px;
}
[data-theme="light"] .modal-info-panel {
  background: rgba(230,81,0,.07);
  border-color: rgba(230,81,0,.30);
}
.modal-info-title {
  display: flex; align-items: center; gap: 6px;
  font-size: .825rem; font-weight: 700;
  color: var(--amber); margin-bottom: 8px;
}
[data-theme="light"] .modal-info-title { color: #b34700; }
.modal-info-title .material-icons-round { font-size: 16px; }
.modal-info-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.modal-info-list li {
  font-size: .8rem; color: var(--text-2);
  line-height: 1.5; padding-left: 14px; position: relative;
}
[data-theme="light"] .modal-info-list li { color: #4e4d6a; }
.modal-info-list li::before {
  content: '•'; position: absolute; left: 2px;
  color: var(--amber); font-size: .7rem; top: 1px;
}
[data-theme="light"] .modal-info-list li::before { color: #b34700; }
.modal-info-list li em { font-style: italic; color: var(--amber); font-weight: 600; }
[data-theme="light"] .modal-info-list li em { color: #b34700; }
.modal-info-list li code {
  font-family: 'JetBrains Mono', monospace; font-size: .72rem;
  color: var(--primary); background: var(--primary-bg);
  padding: 1px 5px; border-radius: 3px; border: none;
}
[data-theme="light"] .modal-info-list li code { color: #4876d6; background: rgba(72,118,214,.08); }

  .btn-burn { width: 100%; }
}

/* ── VIEW PAGE ──────────────────────────────────────────────── */
.view-shell { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding-bottom: 0; }

.view-meta-bar {
  height: 36px; flex-shrink: 0;
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 14px; gap: 8px;
}
.view-filename {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem; color: var(--muted);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.view-pills { display: flex; align-items: center; gap: 5px; }
.vpill {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; letter-spacing: .05em;
  padding: 2px 8px; border-radius: var(--r-full);
  border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
}
.vpill-lang  { border-color: rgba(130,170,255,.28); color: var(--primary); }
.vpill-exp   { border-color: rgba(255,188,66,.25);  color: var(--amber); }
.vpill-burn  {
  border-color: rgba(239,83,80,.4); color: var(--red);
  background: var(--red-bg); animation: burnP 2s ease-in-out infinite;
}
@keyframes burnP { 0%,100%{box-shadow:none}50%{box-shadow:0 0 8px rgba(239,83,80,.28)} }

.code-view { flex: 1; min-height: 0; overflow: auto; background: var(--code-bg); }
.code-view pre { margin: 0; }
.code-view code {
  display: block; padding: 18px 22px;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13.5px !important; line-height: 1.72 !important;
  background: var(--code-bg) !important; color: var(--code-text) !important; tab-size: 2;
}

/* hljs dark */
.hljs { background: var(--code-bg) !important; color: var(--code-text) !important; }
.hljs-comment,.hljs-quote        { color: #637777 !important; font-style: italic; }
.hljs-keyword,.hljs-selector-tag { color: #c792ea !important; font-style: italic; }
.hljs-number,.hljs-literal       { color: #f78c6c !important; }
.hljs-string,.hljs-doctag        { color: #ecc48d !important; }
.hljs-title                      { color: #82aaff !important; }
.hljs-type,.hljs-class .hljs-title { color: #ffcb8b !important; }
.hljs-tag,.hljs-name             { color: #7fdbca !important; }
.hljs-attribute                  { color: #addb67 !important; }
.hljs-built_in                   { color: #7fdbca !important; }
.hljs-variable,.hljs-template-variable { color: #addb67 !important; }
.hljs-operator                   { color: #89ddff !important; }
.hljs-meta                       { color: #82aaff !important; }

/* hljs light — Light Owl */
[data-theme="light"] .hljs                       { background: var(--code-bg) !important; color: #403f53 !important; }
[data-theme="light"] .hljs-comment               { color: #809393 !important; font-style: italic; }
[data-theme="light"] .hljs-keyword               { color: #994cc3 !important; font-style: italic; }
[data-theme="light"] .hljs-number                { color: #aa0982 !important; }
[data-theme="light"] .hljs-string                { color: #c96765 !important; }
[data-theme="light"] .hljs-title                 { color: #4876d6 !important; }
[data-theme="light"] .hljs-attribute             { color: #4876d6 !important; }
[data-theme="light"] .hljs-built_in              { color: #0c969b !important; }
[data-theme="light"] .hljs-tag,[data-theme="light"] .hljs-name { color: #0c969b !important; }
[data-theme="light"] .hljs-operator              { color: #0c969b !important; }
[data-theme="light"] .hljs-literal               { color: #aa0982 !important; }

/* ── Line numbers (highlightjs-line-numbers plugin) ─────────── */
.hljs-line-numbers-rows {
  display: table-cell !important;
  padding: 18px 0 18px 14px !important;
  width: 1% !important;
  min-width: 42px !important;
  white-space: nowrap;
  user-select: none;
  vertical-align: top;
  border-right: 1px solid var(--border);
  background: var(--code-bg);
}
.hljs-line-numbers-rows span {
  display: block;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13.5px !important;
  line-height: 1.72 !important;
  color: var(--subtle) !important;
  text-align: right;
  padding-right: 14px;
}
/* The code cell sits beside the gutter */
.hljs-ln td.hljs-ln-code {
  padding: 0 22px !important;
}
/* The table wrapping the whole block */
.hljs-ln {
  border-collapse: collapse;
  width: 100%;
}
.hljs-ln tr:first-child td { padding-top: 18px !important; }
.hljs-ln tr:last-child  td { padding-bottom: 18px !important; }
/* Gutter column */
.hljs-ln td.hljs-ln-numbers {
  padding: 0 14px 0 14px !important;
  text-align: right;
  vertical-align: top;
  user-select: none;
  border-right: 1px solid var(--border);
  background: var(--code-bg);
  width: 1%;
  white-space: nowrap;
}
.hljs-ln td.hljs-ln-numbers .hljs-ln-n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--subtle);
}
/* Dim the gutter even more in light mode */
[data-theme="light"] .hljs-ln td.hljs-ln-numbers .hljs-ln-n {
  color: var(--subtle);
}
/* Ensure the code cell has no extra left padding from hljs overrides */
.hljs-ln td.hljs-ln-code {
  padding: 0 22px 0 16px !important;
}
/* The pre/code wrapper in line-number mode */
.code-view pre code.hljs {
  padding: 0 !important;
  display: block;
}
.code-view pre {
  padding: 0;
}

.view-status-bar {
  height: 26px; flex-shrink: 0;
  background: var(--surface); border-top: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 14px; gap: 14px;
}
.vsb-stat { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--subtle); white-space: nowrap; }
.vsb-zk   { margin-left: auto; display: flex; align-items: center; gap: 4px; font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--teal); opacity: .7; }

.state-screen { flex: 1; display: none; align-items: center; justify-content: center; }
.state-screen.show { display: flex; }
.state-card { text-align: center; padding: 48px 28px; max-width: 400px; }
.state-icon  { font-size: 2.8rem; margin-bottom: 14px; }
.state-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.state-msg   { font-size: .875rem; color: var(--muted); margin-bottom: 22px; line-height: 1.55; }
.state-card.burn .state-icon { display: inline-block; animation: ff 1s ease-in-out infinite alternate; }
@keyframes ff {
  from { filter: drop-shadow(0 0 6px rgba(239,83,80,.5)); }
  to   { filter: drop-shadow(0 0 16px rgba(255,100,0,.8)); transform: scale(1.06); }
}

  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.lang-dropdown-wrap.open .lang-dropdown-panel { display: block; }

.lang-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: .83rem;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--tr), color var(--tr);
  user-select: none;
  white-space: nowrap;
}
[data-theme="light"] .lang-dropdown-item { color: #4e4d6a; }
.lang-dropdown-item:hover { background: var(--surface-2); color: var(--text); }
.lang-dropdown-item.active {
  color: var(--primary);
  background: var(--primary-bg);
}
[data-theme="light"] .lang-dropdown-item.active { color: #4876d6; background: rgba(72,118,214,.08); }
.lang-flag { font-size: 1.1rem; line-height: 1; }
.lang-check {
  margin-left: auto;
  font-family: 'Material Icons Round';
  font-size: 15px;
  color: var(--primary);
  opacity: 0;
}
.lang-dropdown-item.active .lang-check { opacity: 1; }
[data-theme="light"] .lang-check { color: #4876d6; }

/* ── Data table (about/privacy/terms pages) ─────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
  padding: 9px 14px; text-align: left;
  border-bottom: 1px solid var(--border-2); background: var(--surface-2);
}
.data-table th:first-child { border-radius: var(--r-sm) 0 0 0; }
.data-table th:last-child  { border-radius: 0 var(--r-sm) 0 0; }
.data-table td {
  font-size: .875rem; color: var(--text-2);
  padding: 10px 14px; line-height: 1.55;
  border-bottom: 1px solid var(--border);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table td.label { color: var(--text); font-weight: 600; width: 30%; }

/* ── Toast ─────────────────────────────────────────────────── */
.toast-stack { position: fixed; top: calc(var(--topbar-h) + 48px); right: 16px; z-index: 600; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--r); padding: 9px 13px; font-size: .8rem; color: var(--text);
  box-shadow: var(--sh-2); animation: tIn .22s ease-out; max-width: 300px; pointer-events: auto;
}
.toast.t-ok  { border-color: rgba(34,218,110,.35); }
.toast.t-err { border-color: rgba(239,83,80,.35); }
.toast.t-inf { border-color: rgba(130,170,255,.35); }
.tdot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.toast.t-ok  .tdot { background: var(--green); }
.toast.t-err .tdot { background: var(--red); }
.toast.t-inf .tdot { background: var(--primary); }
.toast.out { animation: tOut .22s ease-in forwards; }
@keyframes tIn  { from{opacity:0;transform:translateX(10px)} to{opacity:1;transform:translateX(0)} }
@keyframes tOut { to{opacity:0;transform:translateX(12px)} }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile-first
   ═══════════════════════════════════════════════════════════ */

/* ── Site footer ────────────────────────────────────────────── */
.site-footer {
  flex-shrink: 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  font-family: 'IBM Plex Sans Condensed', system-ui, sans-serif;
  font-size: .75rem;
  color: var(--muted);
  background: var(--surface);
  border-top: 1px solid var(--border);
  letter-spacing: .01em;
  gap: 12px;
  z-index: 100;
  position: relative;
}
.site-footer-left { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-footer-nav  { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.site-footer-nav a {
  color: var(--muted); text-decoration: none;
  transition: color var(--tr);
  font-weight: 500;
}
.site-footer-nav a:hover { color: var(--text); text-decoration: none; }
[data-theme="light"] .site-footer { color: #7a7a8e; }
[data-theme="light"] .site-footer-nav a { color: #7a7a8e; }
[data-theme="light"] .site-footer-nav a:hover { color: var(--text); }

/* ── Tablet (≤ 768px) ── */
@media (max-width: 768px) {
  /* Topbar: hide text labels on Import/New buttons */
  .topbar .btn-ghost .btn-label { display: none; }
  .topbar .btn-ghost { padding: 7px 10px; }

  /* Ann bar smaller */
  .ann-bar, .burn-banner { font-size: .74rem; padding: 0 38px; }

  /* Modal: full-width with bottom-sheet feel */
  .modal-back { align-items: flex-end; padding: 0; }
  .modal {
    max-width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-height: 92vh;
    padding: 20px 18px 32px;
    animation: modalSlideUp .22s ease-out;
  }
  @keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Bottom bar: two rows on tablet */
  .bottom-bar {
    height: auto;
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 6px;
    row-gap: 8px;
  }
  /* Row 1: lang + expiry chips + burn */
  /* Row 2: views + size + create (push create to end) */
  .size-wrap { margin-left: auto; }
  .bb-row-break { flex-basis: 100%; height: 0; display: block; }

  /* Slightly smaller chips */
  .exp-chip { padding: 4px 9px; font-size: .7rem; }
}

/* ── Mobile (≤ 520px) ── */
@media (max-width: 520px) {
  /* Brand: show icon only if needed */
  .brand-text { font-size: .95rem; }

  /* Ann bar hidden on very small screens */
  .ann-bar { padding: 0 32px; font-size: .7rem; }

  /* Bottom bar: compact 2-row layout */
  .bottom-bar {
    padding: 7px 10px;
    gap: 5px;
    row-gap: 6px;
  }

  /* Lang select full row */
  .lang-select { max-width: 100%; width: 100%; }
  .bb-sep { display: none; }

  /* Views label hide on tiny */
  .bb-views-label { display: none; }

  /* Size meter: track hidden, just text */
  .size-track { display: none; }
  .size-text  { font-size: .72rem; }

  /* Create button: full width on its own row */
  .create-btn-wrap {
    flex-basis: 100%;
    display: flex;
  }
  .create-btn {
    width: 100%;
    justify-content: center;
    padding: 11px 18px;
    font-size: .9rem;
  }

  /* View page meta bar: wrap pills to next line */
  .view-meta-bar {
    height: auto;
    flex-wrap: wrap;
    padding: 6px 12px;
    gap: 5px;
    row-gap: 5px;
  }
  .view-filename { flex-basis: 100%; }
  .view-pills    { flex-wrap: wrap; }

  /* State cards: full padding */
  .state-card { padding: 40px 20px; }

  /* Toast: full-width at bottom */
  .toast-stack { left: 10px; right: 10px; top: calc(var(--topbar-h) + 8px); }
  .toast { max-width: 100%; }

  /* Key prompt */
  .key-prompt-card { padding: 32px 18px; }
}

/* ── Very small (≤ 380px) ── */
@media (max-width: 380px) {
  .ann-bar, .burn-banner { display: none; }
  .brand-text { display: none; }
  .topbar { padding: 0 10px; }
  .exp-chip { padding: 3px 7px; font-size: .72rem; }
}