/* =================================================================
   FormatGPT — warm aurora workbench (port of design system)
   Replaces the old neon-cyan theme + header. Single file.
   Keeps every existing class hook so the 17 JS files keep working.
   ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500&display=swap');

* { box-sizing: border-box; }
html, body { margin:0; padding:0; min-height:100%; }

:root{
  /* ---------- Deep navy + teal palette (video provides depth) ---------- */
  --background: 201 100% 13%;
  --foreground: 0 0% 100%;
  --muted-foreground: 240 4% 66%;
  --bg0: hsl(var(--background));
  --bg1: hsl(201 60% 8%);
  --paper:#f7f2ec;
  --ink:#1a1410;
  --accent:#2dd4bf;
  --accent-2:#5eead4;
  --accent-3:#06b6d4;
  --mint:#6ee7b7;
  --violet:#38bdf8;
  --line: rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.25);
  --muted: hsl(var(--muted-foreground));
  --fg: hsl(var(--foreground));

  /* ---------- Type ---------- */
  --font-serif:"Instrument Serif", Georgia, serif;
  --font-display:"Sora", system-ui, sans-serif;
  --font-body:"DM Sans", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;

  /* ---------- Legacy compat (kept so panel CSS resolves) ---------- */
  --bg: var(--bg0);
  --panel: rgba(18,13,8,0.55);
  --ok:#6ee7b7;
  --ok-dark:#22a86c;
  --bad:#ff5a7a;
  --radius:14px;
  --shadow: 0 18px 40px -12px rgba(0,0,0,0.55), 0 4px 10px rgba(0,0,0,0.35);
}

html, body{
  background: var(--bg0);
  color: var(--fg);
  font-family: var(--font-body);
  overflow-x: hidden;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* Let the fixed video show through behind everything */
body{ background: transparent; }
html{ background: var(--bg0); }

/* =================== Motion-graphics background video =================== */
.bg-video{
  position:fixed; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-2;
  pointer-events:none;
}
.bg-video__tint{
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0,30,60,0.20), rgba(0,15,30,0.55) 70%),
    linear-gradient(180deg, rgba(0,15,30,0.35) 0%, rgba(0,15,30,0.55) 100%);
}

/* =================== Fade-rise entrance animation =================== */
@keyframes fade-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-rise        { animation: fade-rise .8s ease-out both; }
.animate-fade-rise-delay  { animation: fade-rise .8s ease-out .2s both; }
.animate-fade-rise-delay-2{ animation: fade-rise .8s ease-out .4s both; }

/* =================== Aurora background =================== */
.aur{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.35;mix-blend-mode:screen}
.aur::before{content:"";position:absolute;inset:0;background:
  radial-gradient(1200px 700px at var(--mx,30%) var(--my,20%), rgba(45,212,191,0.28), transparent 60%),
  radial-gradient(900px 700px at 90% 90%, rgba(56,189,248,0.18), transparent 60%),
  radial-gradient(800px 600px at 10% 90%, rgba(110,231,183,0.12), transparent 60%),
  radial-gradient(1000px 800px at 70% 0%, rgba(6,182,212,0.14), transparent 60%);
  transition:background 0.3s;
  animation: auroShift 22s ease-in-out infinite alternate;
}
@keyframes auroShift{
  0%{filter:hue-rotate(0deg) saturate(1)}
  100%{filter:hue-rotate(-18deg) saturate(1.15)}
}
.aur::after{content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/></svg>");
  opacity:0.08;mix-blend-mode:overlay}

.grid-lines{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(247,242,236,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247,242,236,0.04) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, black 30%, transparent 85%);
          mask-image:radial-gradient(ellipse at 50% 40%, black 30%, transparent 85%);
}

/* =================== Shell =================== */
main{
  position:relative;z-index:2;
  max-width:1320px;margin:0 auto;
  padding:28px 36px 48px;
  display:flex;flex-direction:column;min-height:100vh;gap:24px;
}

/* =================== Ticker =================== */
.ticker{
  display:flex;align-items:center;gap:20px;
  padding:10px 16px;border:1px solid var(--line);border-radius:999px;
  background:rgba(18,13,8,0.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);
  overflow:hidden;position:relative;
}
.ticker .pill{display:inline-flex;align-items:center;gap:8px;color:var(--fg);font-weight:700;white-space:nowrap}
.ticker .pill .live{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:ping 2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(45,212,191,0.7)}70%{box-shadow:0 0 0 10px rgba(45,212,191,0)}100%{box-shadow:0 0 0 0 rgba(45,212,191,0)}}
.ticker .scroll{flex:1;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent)}
.ticker .scroll__inner{display:inline-flex;gap:40px;white-space:nowrap;animation:tickerRoll 30s linear infinite;will-change:transform}
.ticker .scroll__inner span{color:var(--muted)}
.ticker .scroll__inner b{color:var(--fg);font-weight:700;margin-right:6px}
@keyframes tickerRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker .clock{font-variant-numeric:tabular-nums;color:var(--fg);font-weight:700}

/* =================== Hero =================== */
.hero{
  position:relative;padding:32px 0 8px;
  border:none;background:transparent;
}
.hero h1{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(60px,10vw,140px);line-height:0.88;letter-spacing:-0.04em;margin:0;
  color:var(--fg);
}
.hero h1 .word{display:inline-block;opacity:0;transform:translateY(30px);animation:wIn 0.9s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .word:nth-child(1){animation-delay:0.05s}
.hero h1 .word:nth-child(2){animation-delay:0.18s}
.hero h1 .word:nth-child(3){animation-delay:0.32s}
@keyframes wIn{to{opacity:1;transform:none}}
.hero h1 em{
  font-style:italic;display:inline-block;position:relative;
  background:linear-gradient(100deg, #2dd4bf 0%, #06b6d4 35%, #38bdf8 68%, #6ee7b7 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation: wIn 0.9s cubic-bezier(.2,.8,.2,1) 0.32s both, hueRoll 6s linear infinite 0.9s;
}
@keyframes hueRoll{to{background-position:-300% 0}}

/* =================== Workbench =================== */
.work{
  position:relative;display:grid;grid-template-columns:1fr 100px 1fr;gap:0;
  border:1px solid var(--line);border-radius:28px;overflow:hidden;
  background:rgba(18,13,8,0.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  min-height:540px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6), 0 0 120px -40px rgba(45,212,191,0.25);
}

.pane{position:relative;padding:26px 28px;display:flex;flex-direction:column;background:transparent;border:none;border-radius:0;box-shadow:none;margin:0}
.pane--out{background:linear-gradient(180deg, rgba(45,212,191,0.04), transparent 40%)}
.pane__head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line);gap:12px}
.pane__kick{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted)}
.pane__kick b{color:var(--fg);font-weight:700}
.pane__title{font-family:var(--font-serif);font-size:30px;line-height:1;letter-spacing:-0.02em;margin-top:4px;font-weight:400;display:flex;align-items:center;gap:10px}
.pane__title em{font-style:italic;color:var(--accent)}
.pane__tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* When dynamic JS panels (filter/sorter) hide the output pane via .closest('.card'),
   the .pane.card sibling rules still cleanly hide the right side. */
.pane.card{}

/* Settings gear lives in the input pane head */
.h2-gear{
  width:22px;height:22px;cursor:pointer;fill:none;stroke:var(--muted);stroke-width:2;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), stroke .2s;
}
.h2-gear:hover{stroke:var(--fg);transform:rotate(28deg)}

/* =================== Input area — fixed height, scroll inside =================== */
#inp, textarea{
  width:100%;height:420px;
  background:transparent;border:none;outline:none;resize:none;overflow-y:auto;
  font-family:var(--font-mono);font-size:13.5px;line-height:1.75;color:var(--fg);
  padding:6px 0 64px;letter-spacing:0.005em;   /* bottom padding so text never hides under Paste/Copy */
  scrollbar-gutter:stable;
}
#inp::placeholder, textarea::placeholder{
  color:var(--muted);font-family:var(--font-serif);font-style:italic;font-size:15px
}

/* =================== Output (kept as <pre>) — fixed height, scroll inside =================== */
#out{
  height:420px;margin:0;overflow-y:auto;
  background:transparent;border:none;border-radius:0;padding:6px 0;
  font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--fg);
  white-space:pre-wrap;word-break:break-word;
  scrollbar-gutter:stable;
  counter-reset: outrow;
}
/* Per-account block (wrapped by inline script). Border ONLY between accounts. */
#out .out-row{
  position:relative;
  padding:14px 14px 14px 46px;
  border-bottom:1px dashed rgba(247,242,236,0.12);
  counter-increment: outrow;
  transition:background .2s;
}
#out .out-row:hover{ background:rgba(45,212,191,0.04); }
#out .out-row:last-child{ border-bottom:none; }
#out .out-row::before{
  content: counter(outrow, decimal-leading-zero);
  position:absolute;left:10px;top:13px;
  font-family:var(--font-serif);font-style:italic;font-size:16px;
  color:var(--accent);
  letter-spacing:0;
}
#out .out-row__line{
  font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--fg);
  padding:1px 0;
  white-space:pre-wrap;word-break:break-word;
}

/* Per-row Copy pill — top-right of each .out-row */
#out .out-row .row-copy{
  position:absolute; top:10px; right:10px;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px;
  font:600 11px/1 var(--font-sans, ui-sans-serif, system-ui);
  letter-spacing:.04em; text-transform:uppercase;
  color:#9bf0d8;
  background:linear-gradient(180deg, rgba(45,212,191,0.16), rgba(45,212,191,0.06));
  border:1px solid rgba(45,212,191,0.32);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 4px 12px rgba(0,0,0,.18);
  cursor:pointer;
  opacity:0; transform:translateY(-2px);
  transition:opacity .18s ease, transform .18s ease, background .2s, border-color .2s, color .2s;
  z-index:2;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
#out .out-row:hover .row-copy,
#out .out-row .row-copy:focus-visible{
  opacity:1; transform:translateY(0);
}
#out .out-row .row-copy:hover{
  color:#d6fff1;
  background:linear-gradient(180deg, rgba(45,212,191,0.28), rgba(45,212,191,0.12));
  border-color:rgba(45,212,191,0.55);
}
#out .out-row .row-copy:active{ transform:translateY(0) scale(.97); }
#out .out-row .row-copy.is-copied{
  opacity:1;
  color:#041014;
  background:linear-gradient(180deg, #34d4b1, #1aa890);
  border-color:#34d4b1;
}
#out .out-row .row-copy svg{ display:block; }
/* Touch devices: don't hide the button behind hover */
@media (hover:none){
  #out .out-row .row-copy{ opacity:1; transform:none; }
}
/* Mobile: shrink to icon-only to save space */
@media (max-width:520px){
  #out .out-row .row-copy{ padding:5px 7px; }
  #out .out-row .row-copy .row-copy__txt{ display:none; }
}
#out:empty::before{
  content:"Your formatted output will appear here.";
  color:var(--muted);font-family:var(--font-serif);font-style:italic;font-size:18px;
}

/* =================== Axis core =================== */
.axis{position:relative;overflow:hidden;border-left:1px solid var(--line);border-right:1px solid var(--line);background:rgba(247,242,236,0.02)}
.axis canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.axis__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
.axis__core .ring{
  width:76px;height:76px;border-radius:50%;
  background:conic-gradient(from var(--ang2,0deg), #2dd4bf, #06b6d4, #38bdf8, #6ee7b7, #2dd4bf);
  animation:spinBord 6s linear infinite;
  position:relative;
  box-shadow:0 0 40px rgba(45,212,191,0.45);
}
@property --ang2{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes spinBord{to{--ang2:360deg}}
.axis__core .inner{position:absolute;inset:3px;border-radius:50%;background:var(--bg0);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-style:italic;font-size:30px;color:var(--fg)}
.axis__core .inner::after{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle at 35% 30%, rgba(94,234,212,0.5), transparent 60%);animation:orbFloat 3s ease-in-out infinite}
@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.04)}}
.axis__pulse{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:1px solid var(--accent);opacity:0;pointer-events:none}
.axis__pulse.go{animation:pulseOut 0.9s ease-out}
@keyframes pulseOut{0%{opacity:0.8;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}}

/* Input pane head Copy button — sits to the LEFT of the settings gear */
.pane__tools{display:inline-flex;align-items:center;gap:10px}
.head-copy{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;
  padding:6px 12px;min-height:28px;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg, rgba(110,231,183,0.14) 0%, rgba(110,231,183,0.04) 100%);
  border:1px solid rgba(110,231,183,0.45);color:var(--mint);
  box-shadow:0 4px 14px -8px rgba(110,231,183,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
  transition:all .2s;
}
.head-copy:hover{
  background:linear-gradient(180deg, rgba(110,231,183,0.45) 0%, rgba(110,231,183,0.18) 100%);
  color:#04261b;border-color:var(--mint);transform:translateY(-1px);
}
.head-copy.is-copied{background:linear-gradient(180deg, rgba(110,231,183,0.7), rgba(110,231,183,0.35));color:#04261b;border-color:var(--mint)}

/* Inline header variant of the Paste split — sits inside .pane__tools (not floating over textarea) */
.head-split{
  position:relative !important;
  bottom:auto !important; right:auto !important;
  align-items:stretch;
}
.head-split .btn-main,
.head-split .btn-caret{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;
  padding:6px 12px;min-height:28px;display:inline-flex;align-items:center;cursor:pointer;
  transition:all .2s;
}
.head-split .btn-caret{padding:0 9px}
.head-split .menu{ top:calc(100% + 8px); right:0; }

/* =================== Hero typewriter (cycling mode descriptions) =================== */
/* Kept intentionally subtle so FormatGPT stays the hero focal point. */
.hero{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
}
.hero h1{ flex:0 0 auto; }
.hero__type{
  display:block;
  width:100%; max-width:100%;
  font-family:var(--font-display); font-style:normal; font-weight:500;
  font-size:clamp(12px, 1.5vw, 18px);
  line-height:1.3; letter-spacing:.01em;
  white-space:normal; overflow-wrap:anywhere;
  opacity:.9;
}
.hero__type-text{
  color:#fde68a; /* soft yellow — readable, not louder than the title */
  text-shadow:none;
}
.hero__type-caret{
  display:inline-block; width:.1em; height:.95em;
  background:#fde68a; border-radius:1px;
  vertical-align:-0.08em;
  animation: blinkCaret 1s steps(2) infinite;
}
.hero__type-caret--lead{ margin-right:0.3em; }
.hero__type-text + .hero__type-caret{ margin-left:2px; }
@keyframes blinkCaret{ 50%{ opacity:0 } }

/* Phones — tighten title + subtext sizing */
@media (max-width: 760px){
  .hero h1{ font-size:clamp(40px, 12vw, 72px); }
  .hero__type{ font-size:clamp(11px, 3vw, 14px); }
}
@media (max-width: 420px){
  .hero h1{ font-size:clamp(34px, 13vw, 58px); }
  .hero__type{ font-size:clamp(10px, 2.8vw, 12px); }
}

/* =================== Crosscheck mode (output pane → List 2 textarea) =================== */
/* List 2 editable pane — matches #out sizing. Hidden unless crosscheck mode is active. */
.cc-list2{
  display:none;
  height:420px; margin:0; padding:6px 0;
  background:transparent; border:none; outline:none; resize:none;
  color:var(--fg);
  font-family:var(--font-mono); font-size:13px; line-height:1.7;
  letter-spacing:0.005em;
  scrollbar-gutter:stable;
  white-space:pre; overflow:auto;
}
.cc-list2::placeholder{
  color:var(--muted); font-family:var(--font-serif); font-style:italic; font-size:15px;
}
/* In crosscheck mode: swap output pane to List 2, hide output copy-split (per-tab copy lives in the bottom panel) */
body[data-mode="crosscheck"] #out{ display:none; }
body[data-mode="crosscheck"] .pane--out .cc-list2{ display:block; }
body[data-mode="crosscheck"] .pane--out #copySplit{ display:none; }
/* Rename pane titles while in crosscheck mode (font-size:0 hides text nodes + children) */
body[data-mode="crosscheck"] .pane--in  .pane__title,
body[data-mode="crosscheck"] .pane--out .pane__title{
  position:relative; font-size:0;
}
body[data-mode="crosscheck"] .pane--in  .pane__title::after,
body[data-mode="crosscheck"] .pane--out .pane__title::after{
  font-size:30px; font-family:var(--font-serif); font-style:italic;
  color:var(--accent); line-height:1; letter-spacing:-.02em;
  display:inline-block;
}
body[data-mode="crosscheck"] .pane--in  .pane__title::after{ content:"List 1"; }
body[data-mode="crosscheck"] .pane--out .pane__title::after{ content:"List 2"; }
@media (max-width: 760px){
  body[data-mode="crosscheck"] .pane--in  .pane__title::after,
  body[data-mode="crosscheck"] .pane--out .pane__title::after{ font-size:24px; }
}

/* =================== Crosscheck results panel (below the workbench) =================== */
#crosscheckPanel{
  padding:18px 22px;
  background:rgba(18,13,8,0.55);
  border:1px solid var(--line);
  border-radius:20px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:var(--fg); font-family:var(--font-body);
  display:flex; flex-direction:column; gap:14px;
}
.cc-head{ display:flex; flex-direction:column; gap:2px; }
.cc-title{
  font-family:var(--font-serif); font-size:28px; line-height:1;
  letter-spacing:-.01em; color:var(--fg); font-weight:400;
}
.cc-title em{ font-style:italic; color:var(--accent); }
.cc-sub{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}

/* Tabs */
.cc-tabs{ display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px dashed var(--line); padding-bottom:8px; }
.cc-tab{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700;
  padding:9px 14px; min-height:34px; border-radius:999px; cursor:pointer;
  color:var(--muted); background:rgba(247,242,236,0.04);
  border:1px solid var(--line); transition:all .2s;
  display:inline-flex; align-items:center; gap:8px;
}
.cc-tab:hover{ color:var(--fg); border-color:var(--line-strong); }
.cc-tab.cc-active{
  color:#041014;
  background:linear-gradient(180deg, rgba(110,231,183,0.9), rgba(45,212,191,0.75));
  border-color:var(--mint);
  box-shadow:0 6px 18px -6px rgba(110,231,183,0.5);
}
.cc-tab .cc-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:20px; padding:0 7px;
  border-radius:999px; font-size:10px; letter-spacing:.02em; font-weight:700;
  background:rgba(0,0,0,0.25); color:inherit; border:1px solid currentColor;
  font-variant-numeric:tabular-nums;
}
.cc-tab.cc-active .cc-count{ background:rgba(4,16,20,0.25); border-color:rgba(4,16,20,0.4); }

/* Result panels — one per tab, each with its own Copy button */
.cc-result{
  border:1px solid var(--line); border-radius:14px;
  background:rgba(11,15,20,0.55);
  display:flex; flex-direction:column; gap:0;
  overflow:hidden;
}
.cc-result[hidden]{ display:none; }
.cc-result__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--line);
  background:rgba(247,242,236,0.02);
}
.cc-result__title{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg); font-weight:700;
}
.cc-copy{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700;
  padding:6px 14px; min-height:28px; border-radius:999px; cursor:pointer;
  color:var(--mint);
  background:linear-gradient(180deg, rgba(110,231,183,0.18) 0%, rgba(110,231,183,0.06) 100%);
  border:1px solid rgba(110,231,183,0.55);
  box-shadow:0 4px 12px -6px rgba(110,231,183,0.35);
  transition:all .2s;
}
.cc-copy:hover{
  color:#04261b;
  background:linear-gradient(180deg, rgba(110,231,183,0.55) 0%, rgba(110,231,183,0.25) 100%);
  transform:translateY(-1px);
}
.cc-copy.is-copied{
  color:#04261b;
  background:linear-gradient(180deg, rgba(110,231,183,0.7), rgba(110,231,183,0.35));
}
.cc-result__body{
  margin:0; padding:14px 16px;
  max-height:340px; overflow:auto;
  font-family:var(--font-mono); font-size:12.5px; line-height:1.7;
  color:var(--fg); white-space:pre-wrap; word-break:break-word;
}
.cc-result__body:empty::before{
  content:"Nothing here yet — paste both lists.";
  color:var(--muted); font-family:var(--font-serif); font-style:italic; font-size:14px;
}

/* Stats */
.cc-stats{ display:flex; gap:10px; flex-wrap:wrap; }
.cc-stat{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
  padding:6px 10px; border-radius:999px;
  background:rgba(247,242,236,0.03); border:1px solid var(--line);
}
.cc-stat b{ color:var(--fg); font-weight:700; margin-left:6px; font-variant-numeric:tabular-nums; }
.cc-stat.cc-m{ border-color:rgba(110,231,183,0.35); }
.cc-stat.cc-m b{ color:var(--mint); }
.cc-stat.cc-u{ border-color:rgba(251,146,60,0.35); }
.cc-stat.cc-u b{ color:#fb923c; }

/* Phone screens — keep the crosscheck views usable on mobile */
@media (max-width: 760px){
  #crosscheckPanel{ padding:14px; gap:10px; }
  .cc-title{ font-size:22px; }
  .cc-sub{ font-size:9.5px; letter-spacing:.1em; }
  .cc-tab{ padding:7px 10px; font-size:9.5px; letter-spacing:.1em; min-height:30px; }
  .cc-tab .cc-count{ min-width:18px; height:16px; font-size:9px; padding:0 5px; }
  .cc-result__head{ padding:8px 10px; }
  .cc-result__title{ font-size:9.5px; letter-spacing:.1em; }
  .cc-copy{ padding:5px 10px; font-size:9.5px; min-height:26px; }
  .cc-result__body{ padding:10px 12px; font-size:12px; max-height:260px; }
  .cc-stats{ gap:6px; }
  .cc-stat{ font-size:9px; padding:5px 8px; letter-spacing:.08em; }
  .cc-list2{ height:340px; font-size:12.5px; }
}
@media (max-width: 420px){
  #crosscheckPanel{ padding:12px; }
  .cc-list2{ height:280px; font-size:12px; }
}

/* =================== Paste / Copy split buttons =================== */
.split{position:absolute;bottom:16px;right:14px;display:inline-flex;align-items:stretch;border-radius:999px;overflow:visible}
.split.small .btn-main, .split.small .btn-main-copy,
.split.small .btn-caret, .split.small .btn-caret-copy{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;
  padding:7px 14px;min-height:32px;display:inline-flex;align-items:center;cursor:pointer;border:1px solid var(--line);
  transition:all .2s;
}
.split.small .btn-caret, .split.small .btn-caret-copy{padding:0 10px}

/* Paste — coral fill */
.btn-main{
  background:linear-gradient(100deg,#2dd4bf 0%,#06b6d4 100%);
  background-size:200% 100%;color:#fff;border:1px solid rgba(255,255,255,.12);
  border-radius:999px 0 0 999px;
  box-shadow:0 8px 20px -8px rgba(45,212,191,0.55);
}
.btn-main:hover{background-position:100% 0;transform:translateY(-1px)}
.btn-caret{
  background:rgba(45,212,191,0.12);color:var(--accent);
  border:1px solid rgba(45,212,191,0.35);border-left:none;
  border-radius:0 999px 999px 0;
}
.btn-caret:hover{background:rgba(45,212,191,0.2);color:#fff}
.btn-main:active,.btn-caret:active{transform:translateY(0) scale(0.97)}

/* Copy — mint glass with shimmer on hover */
.btn-main-copy{
  background:linear-gradient(180deg, rgba(110,231,183,0.18) 0%, rgba(110,231,183,0.06) 100%);
  border:1px solid rgba(110,231,183,0.55);color:var(--mint);
  border-radius:999px 0 0 999px;
  box-shadow:0 6px 18px -8px rgba(110,231,183,0.4), inset 0 1px 0 rgba(255,255,255,0.18);
  position:relative;overflow:hidden;
}
.btn-main-copy:hover{
  background:linear-gradient(180deg, rgba(110,231,183,0.55) 0%, rgba(110,231,183,0.25) 100%);
  color:#04261b;border-color:var(--mint);
  box-shadow:0 14px 28px -8px rgba(110,231,183,0.6), inset 0 1px 0 rgba(255,255,255,0.4);
  transform:translateY(-1px);
}
.btn-caret-copy{
  background:rgba(110,231,183,0.10);border:1px solid rgba(110,231,183,0.45);border-left:none;color:var(--mint);
  border-radius:0 999px 999px 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-caret-copy:hover{background:rgba(110,231,183,0.28);color:#04261b}
.btn-main-copy:active,.btn-caret-copy:active{transform:translateY(0) scale(0.97)}

/* Caret menus */
.menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:220px;
  background:rgba(18,13,8,0.95);border:1px solid var(--line-strong);border-radius:14px;
  box-shadow:var(--shadow);padding:6px;display:none;z-index:500;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.menu.open{display:block;animation:popIn .18s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.menu .header{font:600 10px/1 var(--font-mono);letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);padding:8px 10px 6px}
.menu button{
  display:flex;width:100%;justify-content:space-between;align-items:center;text-align:left;
  padding:10px 12px;border:none;background:transparent;color:var(--fg);
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;
  border-radius:10px;cursor:pointer;transition:background .15s;
}
.menu button:hover{background:rgba(247,242,236,0.06)}

/* =================== Command rail =================== */
.rail{
  position:relative;z-index:50;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:12px 16px;border:1px solid var(--line);border-radius:999px;
  background:rgba(18,13,8,0.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.rail__kicker{padding-left:6px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.rail__kicker b{color:var(--fg);font-weight:700;display:block;margin-bottom:2px}
.rail__center{display:flex;align-items:center;gap:10px;min-width:0}
.rail__right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

/* ----- Mode dropdown styled as a rail pill ----- */
.controls{display:none}                       /* old controls row no longer used */
#blueBtn, .add-mail, #clearBtn{margin:0}      /* reset legacy spacing */

.mode-dd{position:relative;min-width:240px;max-width:340px;flex:0 0 auto}
.dd-btn{
  display:inline-flex;align-items:center;gap:10px;width:100%;
  padding:10px 16px;border:1px solid var(--line-strong);border-radius:999px;
  background:rgba(247,242,236,0.05);color:var(--fg);
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;
  cursor:pointer;transition:all .22s cubic-bezier(.34,1.56,.64,1);
}
.dd-btn::before{
  content:"Mode";color:var(--muted);font-weight:600;letter-spacing:0.16em;
  padding-right:10px;border-right:1px solid var(--line);margin-right:4px;
}
.dd-btn:hover{background:rgba(247,242,236,0.08);border-color:var(--accent);transform:translateY(-1px)}
#modeLabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg)}
.dd-spacer{flex:1}
.dd-chevron{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .25s cubic-bezier(.34,1.56,.64,1);margin-left:auto;color:var(--muted)}
.dd-btn[aria-expanded="true"] .dd-chevron{transform:rotate(180deg);color:var(--accent)}

.dd-menu{
  position:absolute;top:calc(100% + 10px);left:0;z-index:510;
  min-width:280px;max-width:360px;
  padding:8px;margin:0;list-style:none;
  border-radius:18px;border:1px solid var(--line-strong);
  background:rgba(18,13,8,0.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow);display:none;
  max-height:480px;overflow-y:auto;
}
.mode-dd.open .dd-menu, .dd-menu.open{display:block;animation:popIn .22s cubic-bezier(.34,1.56,.64,1)}

.dd-item{
  position:relative;padding:10px 14px;border-radius:12px;color:var(--muted);
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;
  cursor:pointer;display:flex;align-items:center;gap:10px;
  transition:all .18s;
  counter-increment:mode;
}
.dd-menu{counter-reset:mode}
.dd-item::before{
  content:counter(mode, decimal-leading-zero);
  font-family:var(--font-serif);font-style:italic;font-size:14px;
  color:var(--accent);letter-spacing:0;text-transform:none;font-weight:400;
  min-width:24px;
}
.dd-item:hover{background:rgba(247,242,236,0.06);color:var(--fg)}
.dd-item.active{
  background:var(--fg);color:var(--ink);
  box-shadow:0 10px 24px -10px rgba(247,242,236,0.3);
}
.dd-item.active::before{color:var(--accent)}

/* ----- Toggle buttons (Blue, Add Mail) restyled to design system tog ----- */
.blue-btn{
  display:inline-flex;align-items:center;gap:10px;padding:9px 14px;
  border-radius:999px;background:transparent;border:1px solid var(--line);color:var(--muted);cursor:pointer;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;
  transition:all 0.2s;min-height:0;
}
.blue-btn .label{order:2}
.blue-btn .slider{
  order:1;position:relative;width:34px;height:18px;border-radius:999px;
  background:rgba(247,242,236,0.08);border:1px solid var(--line-strong);transition:background 0.2s;
  display:inline-block;
  overflow:hidden; /* clip any easing overshoot so knob never escapes the pill */
  flex:0 0 auto;
}
.blue-btn .knob{
  position:absolute;top:1px;left:1px;width:14px;height:14px;border-radius:50%;
  background:var(--muted);
  transition:transform 0.28s cubic-bezier(.34, 1.25, .64, 1), background 0.2s;
  inset:auto;
}
.blue-btn:hover{color:var(--fg);border-color:var(--line-strong)}
.blue-btn.is-on{
  color:var(--fg);border-color:var(--violet);
  background:transparent;box-shadow:0 0 24px -6px rgba(56,189,248,0.4);
}
.blue-btn.is-on .slider{background:var(--violet);border-color:var(--violet)}
.blue-btn.is-on .knob{transform:translateX(16px);background:#fff}

.add-mail{
  display:inline-flex;align-items:center;gap:10px;padding:9px 14px;
  border-radius:999px;background:transparent;border:1px solid var(--line);color:var(--muted);cursor:pointer;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;
  transition:all 0.2s;user-select:none;
}
.add-mail input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:32px;height:16px;border-radius:999px;
  background:rgba(247,242,236,0.08);border:1px solid var(--line-strong);
  position:relative;cursor:pointer;margin:0;transition:background 0.2s, border-color 0.2s;
}
.add-mail input[type=checkbox]::after{
  content:"";position:absolute;top:1px;left:1px;width:12px;height:12px;border-radius:50%;
  background:var(--muted);transition:transform 0.35s cubic-bezier(.34,1.56,.64,1), background 0.2s;
}
.add-mail:hover{color:var(--fg);border-color:var(--line-strong)}
.add-mail:has(input:checked){color:var(--fg);border-color:var(--accent)}
.add-mail input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.add-mail input[type=checkbox]:checked::after{transform:translateX(16px);background:#fff}

#clearBtn{
  display:inline-flex;align-items:center;padding:9px 16px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,90,122,0.10) 0%, rgba(255,90,122,0.02) 100%);
  border:1px solid rgba(255,90,122,0.45);color:#ff8aa3;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;font-weight:800;
  cursor:pointer;transition:all 0.25s cubic-bezier(.34,1.56,.64,1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}
#clearBtn:hover{
  background:linear-gradient(180deg, rgba(255,90,122,0.28) 0%, rgba(255,90,122,0.10) 100%);
  color:#fff;border-color:#ff5a7a;transform:translateY(-1px);
  box-shadow:0 10px 24px -10px rgba(255,90,122,0.6), inset 0 1px 0 rgba(255,255,255,0.18);
}
#clearBtn:active{transform:translateY(0) scale(0.97)}

/* =================== Colophon =================== */
.colo{
  margin-top:8px;display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);
  padding:14px 4px 0;border-top:1px solid var(--line)
}
.colo b{color:var(--fg);font-weight:700}
.colo__c{font-family:var(--font-serif);font-style:italic;font-size:16px;text-transform:none;letter-spacing:0;color:var(--fg)}
.colo__r{text-align:right}

/* =================== Shortcut pill =================== */
.shortcut{
  position:fixed;bottom:22px;right:22px;z-index:100;display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;background:rgba(18,13,8,0.8);border:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);
  animation:fadeIn 1s 1s both
}
.shortcut kbd{background:var(--fg);color:var(--ink);padding:2px 6px;border-radius:4px;font-size:9px;font-weight:700;font-family:var(--font-mono)}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* =================== Dynamic panels (reorder/filter/sorter) =================== */
/* These panels are injected dynamically by JS using class="card".
   We give them a unified warm-aurora panel look. */
.card.work-panel,
#reorderPanel,
#filterPanel,
#sorterPanel{
  position:relative;z-index:2;
  background:rgba(18,13,8,0.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:24px;padding:22px !important;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.5);
}

/* ===== Reorder panel ===== */
.rp-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:2px 0 10px;user-select:none}
.rp-header-left{display:flex;align-items:center;gap:12px}
.rp-icon{width:22px;height:22px;color:var(--accent);flex-shrink:0}
.rp-title{font-family:var(--font-serif);font-size:24px;color:var(--fg);font-weight:400;letter-spacing:-0.01em}
.rp-subtitle{font-family:var(--font-mono);font-size:10px;line-height:1.3;color:var(--muted);letter-spacing:0.12em;text-transform:uppercase}
.rp-chevron{width:20px;height:20px;color:var(--muted);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.rp-chevron.rp-flipped{transform:rotate(180deg);color:var(--accent)}
.rp-body.rp-collapsed{display:none}

.rp-section{margin-bottom:16px}
.rp-section:last-child{margin-bottom:0}
.rp-label{
  font-family:var(--font-mono);font-size:9.5px;color:var(--muted);
  letter-spacing:0.18em;text-transform:uppercase;font-weight:700;margin-bottom:10px;
  display:flex;justify-content:space-between;align-items:center
}

.rp-presets{display:flex;flex-wrap:wrap;gap:6px}
.rp-preset{
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:rgba(247,242,236,0.04);color:var(--muted);
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;
  cursor:pointer;transition:all .18s;white-space:nowrap
}
.rp-preset:hover{background:rgba(247,242,236,0.08);color:var(--fg);border-color:var(--line-strong)}
.rp-preset.rp-active{background:var(--fg);color:var(--ink);border-color:var(--fg)}

.rp-seps{display:flex;flex-wrap:wrap;gap:6px}
.rp-sep{
  padding:8px 16px;border-radius:999px;border:1px solid var(--line);
  background:rgba(247,242,236,0.04);color:var(--muted);
  font-family:var(--font-mono);font-size:13px;font-weight:600;
  cursor:pointer;transition:all .18s;
  min-width:42px;text-align:center
}
.rp-sep:hover{background:rgba(247,242,236,0.08);color:var(--fg)}
.rp-sep.rp-active{background:rgba(45,212,191,0.15);border-color:var(--accent);color:var(--accent)}

.rp-sel-acts{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase}
.rp-sel-acts a{color:var(--accent);text-decoration:none;cursor:pointer}
.rp-sel-acts a:hover{text-decoration:underline}

.rp-fields{display:flex;flex-direction:column;gap:4px}
.rp-field-row{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:14px;
  background:rgba(247,242,236,0.03);border:1px solid transparent;
  transition:background .18s, border-color .18s
}
.rp-field-row.rp-on{background:rgba(45,212,191,0.06);border-color:rgba(45,212,191,0.25)}
.rp-field-row.rp-dragging{opacity:.7;background:rgba(45,212,191,0.12);border-color:var(--accent)}

.rp-drag{
  cursor:grab;color:var(--muted);font-size:18px;user-select:none;line-height:1;padding:2px;
  -webkit-touch-callout:none
}
.rp-drag:active{cursor:grabbing}

.rp-check{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}

.rp-fname{font-family:var(--font-mono);font-size:12px;color:var(--fg);flex:1;font-weight:500;letter-spacing:0.04em}
.rp-field-row:not(.rp-on) .rp-fname{color:var(--muted)}

.rp-fkey{font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:0.12em;text-transform:uppercase}

.rp-preview{
  background:rgba(0,0,0,0.35);border:1px solid var(--line);border-radius:12px;
  padding:12px;color:var(--accent);font-family:var(--font-mono);font-size:12px;line-height:1.5;
  white-space:pre-wrap;word-break:break-all;min-height:40px;max-height:140px;overflow-y:auto
}

/* ===== Filter panel ===== */
.fp-section{margin-bottom:14px}
.fp-label{
  font-family:var(--font-mono);font-size:9.5px;color:var(--muted);
  letter-spacing:0.18em;text-transform:uppercase;font-weight:700;margin-bottom:10px
}

.fp-ta-wrap{position:relative}
.fp-usernames{
  width:100%;min-height:90px;max-height:200px;resize:vertical;
  background:rgba(0,0,0,0.35);color:var(--fg);border:1px solid var(--line);border-radius:14px;
  padding:12px;padding-right:80px;outline:none;
  font-family:var(--font-mono);font-size:13px;line-height:1.5;
}
.fp-usernames:focus{border-color:var(--accent)}
.fp-paste-btn{
  position:absolute;top:8px;right:8px;
  padding:6px 14px;border-radius:999px;border:none;
  background:linear-gradient(100deg,#2dd4bf,#06b6d4);color:#fff;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;cursor:pointer;
  box-shadow:0 6px 16px -4px rgba(45,212,191,0.5);
}
.fp-paste-btn:active{transform:translateY(1px) scale(0.97)}

.fp-summary{
  background:rgba(0,0,0,0.35);border:1px solid var(--line);border-radius:14px;
  padding:12px 16px;margin-bottom:12px
}
.fp-sum-line{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:12px;color:var(--muted);line-height:1.7}
.fp-sum-line b{color:var(--fg);font-weight:700}
.fp-sum-ok{color:var(--mint)}
.fp-sum-ok b{color:var(--mint)}
.fp-sum-no{color:var(--bad)}
.fp-sum-no b{color:var(--bad)}

.fp-views{display:flex;gap:6px}
.fp-view{
  padding:8px 16px;border-radius:999px;border:1px solid var(--line);
  background:rgba(247,242,236,0.04);color:var(--muted);
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;
  cursor:pointer;transition:all .18s
}
.fp-view:hover{background:rgba(247,242,236,0.08);color:var(--fg)}
.fp-view.fp-v-active{background:var(--fg);color:var(--ink);border-color:var(--fg)}

.fp-block{margin-top:12px}
.fp-block-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border-radius:14px 14px 0 0
}
.fp-bh-match{background:rgba(110,231,183,0.08);border:1px solid rgba(110,231,183,0.3);border-bottom:none}
.fp-bh-unmatch{background:rgba(255,90,122,0.08);border:1px solid rgba(255,90,122,0.3);border-bottom:none}
.fp-block-title{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase}
.fp-bh-match .fp-block-title{color:var(--mint)}
.fp-bh-unmatch .fp-block-title{color:var(--bad)}

.fp-block-actions{display:flex;gap:6px}
.fp-btn{
  padding:6px 12px;border-radius:999px;border:1px solid var(--line);
  background:rgba(247,242,236,0.04);color:var(--muted);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;
  cursor:pointer;transition:all .15s
}
.fp-btn:hover{background:rgba(247,242,236,0.08);color:var(--fg);border-color:var(--line-strong)}
.fp-btn:active{transform:translateY(1px)}
.fp-btn-copy{border-color:rgba(45,212,191,0.4);color:var(--accent)}
.fp-btn-copy:hover{background:rgba(45,212,191,0.12);color:var(--accent)}
.fp-btn-save{border-color:var(--line)}

.fp-output{
  background:rgba(0,0,0,0.35);color:var(--fg);border:1px solid var(--line);border-radius:0 0 14px 14px;
  padding:12px;white-space:pre-wrap;word-break:break-word;
  min-height:60px;max-height:320px;overflow-y:auto;
  font-family:var(--font-mono);font-size:12px;line-height:1.6;margin:0
}

/* ===== Sorter panel ===== */
.sp-info{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.sp-title{font-family:var(--font-serif);font-size:24px;color:var(--fg);margin-bottom:4px;letter-spacing:-0.01em}
.sp-sub{font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:0.12em;text-transform:uppercase}

.sp-section{margin-bottom:14px}
.sp-section:last-child{margin-bottom:0}
.sp-label{
  font-family:var(--font-mono);font-size:9.5px;color:var(--muted);
  letter-spacing:0.18em;text-transform:uppercase;font-weight:700;margin-bottom:10px
}

.sp-cols{display:flex;flex-wrap:wrap;gap:6px}
.sp-cols-empty{
  color:var(--muted);font-family:var(--font-mono);font-size:12px;line-height:1.5;
  padding:12px;background:rgba(0,0,0,0.25);border-radius:12px;border:1px dashed var(--line-strong)
}
.sp-col{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:rgba(247,242,236,0.04);color:var(--muted);
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;
  cursor:pointer;transition:all .18s
}
.sp-col:hover{background:rgba(247,242,236,0.08);color:var(--fg)}
.sp-col.sp-active{background:rgba(45,212,191,0.12);border-color:var(--accent);color:var(--accent)}
.sp-col-num{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:8px;
  background:rgba(0,0,0,0.4);color:var(--muted);font-family:var(--font-mono);font-size:9px;font-weight:700
}
.sp-col.sp-active .sp-col-num{background:rgba(45,212,191,0.2);color:var(--accent)}
.sp-col-name{font-family:var(--font-mono);font-size:10px}

.sp-orders{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.sp-order{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:12px 16px;border-radius:14px;border:1px solid var(--line);
  background:rgba(247,242,236,0.04);color:var(--muted);
  cursor:pointer;transition:all .18s;text-align:left
}
.sp-order:hover{background:rgba(247,242,236,0.08);color:var(--fg)}
.sp-order.sp-active{background:rgba(45,212,191,0.1);border-color:var(--accent);color:var(--accent)}
.sp-o-name{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase}
.sp-o-hint{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:0.14em;text-transform:uppercase}
.sp-order.sp-active .sp-o-hint{color:var(--accent-2)}

/* =================== Settings popover =================== */
.gear-pop{
  position:absolute;
  background:rgba(18,13,8,0.95);border:1px solid var(--line-strong);border-radius:18px;padding:14px;min-width:300px;z-index:1200;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow)
}
.gp-title{font-family:var(--font-serif);font-size:20px;color:var(--fg);margin:0 0 10px;font-weight:400}
.gp-row{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.gp-input{
  flex:1;min-width:0;padding:10px 12px;border-radius:12px;border:1px solid var(--line-strong);
  background:rgba(0,0,0,0.35);color:var(--fg);
  font-family:var(--font-mono);font-size:12px;outline:none;
}
.gp-input:focus{border-color:var(--accent)}
.gp-actions{display:flex;gap:8px;justify-content:flex-end}
.icon-pill{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:rgba(247,242,236,0.04);color:var(--fg);cursor:pointer
}
.icon-pill:hover{background:rgba(45,212,191,0.12);border-color:var(--accent)}
.icon-pill.ok{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.icon-pill.warn{background:rgba(255,90,122,0.15);border-color:rgba(255,90,122,0.4);color:#ff8aa3}

/* =================== Responsive =================== */
@media (max-width:960px){
  main{padding:20px;gap:18px}
  .work{grid-template-columns:1fr;min-height:auto}
  .axis{height:90px;border:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .axis__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  /* Rotate the ⇌ ring so it points top↓bottom on stacked layout */
  .axis__core .inner{transform:rotate(90deg)}
  .rail{grid-template-columns:1fr;border-radius:24px;gap:12px}
  .rail__right{justify-content:space-between}
  .colo{grid-template-columns:1fr;text-align:left;gap:8px}
  .colo__r{text-align:left}
  .shortcut{display:none}
}

@media (max-width:520px){
  main{padding:14px}
  .hero h1{font-size:48px}
  .pane{padding:18px 16px}
  .mode-dd{min-width:180px}
  /* Stack action buttons so they don't overlap pane content */
  #inp, textarea{height:300px;padding-bottom:64px}
  #out{height:340px}
  .split{bottom:10px;right:10px}
}

/* =================== Selection / scrollbars =================== */
::selection{background:rgba(45,212,191,0.4);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(0,0,0,0.2)}
::-webkit-scrollbar-thumb{background:rgba(247,242,236,0.15);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(45,212,191,0.4)}

/* =================== Lightweight CSS-only background (no video) =================== */
/* The video tag was removed for speed. We now rely entirely on: .bg-video__tint
   (vignette) + .aur (animated radial gradients) + .grid-lines + a cheap nebula layer
   below. All pure CSS, zero network, negligible GPU. */
.bg-video__tint{
  background:
    radial-gradient(ellipse at 20% 10%, rgba(8, 60, 90, 0.45), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(45, 212, 191, 0.12), transparent 60%),
    linear-gradient(180deg, #05090e 0%, #070d14 50%, #040810 100%);
}
/* Strengthen the aurora now that there's no video beneath it */
.aur{ opacity: .6; }
.aur::before{ animation-duration: 18s; }

/* Slow-drifting nebula layer — pure CSS, one painted element, ~free.
   Mouse glow is a small perfect CIRCLE (not an ellipse) with a tight radius
   so it acts like a focused spotlight instead of a page-wide wash. */
.aur::before{
  background:
    radial-gradient(circle 160px at var(--mx,30%) var(--my,20%), rgba(45,212,191,0.45), transparent 70%),
    radial-gradient(circle 680px at 90% 90%, rgba(56,189,248,0.20), transparent 65%),
    radial-gradient(circle 620px at 10% 90%, rgba(110,231,183,0.14), transparent 65%),
    radial-gradient(circle 780px at 70% 0%, rgba(6,182,212,0.16), transparent 65%);
}

/* =================== Drop-to-paste hover state =================== */
#inp.is-drop, #ccList2.is-drop{
  outline: 2px dashed rgba(45, 212, 191, 0.7);
  outline-offset: -10px;
  background: rgba(45, 212, 191, 0.06);
  transition: background .12s ease, outline-color .12s ease;
}
#inp.is-drop::placeholder, #ccList2.is-drop::placeholder{
  color: rgba(45, 212, 191, 0.9);
}

/* =================== Crosscheck List 2 Paste split (only shown in crosscheck mode) =================== */
.pane--out #ccPasteSplit{ display: none; }
body[data-mode="crosscheck"] .pane--out #ccPasteSplit{ display: inline-flex; }

/* =================== Line-count pill in pane headers =================== */
.pane__count{
  display:inline-block;
  margin-left:10px;
  padding:2px 9px;
  border-radius:999px;
  background:rgba(45,212,191,0.14);
  color:rgba(94,234,212,0.95);
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  vertical-align:middle;
  border:1px solid rgba(45,212,191,0.25);
}
.pane__count:empty{ display:none; }

/* =================== Drop-to-paste overlay ("Paste any text file") =================== */
.drop-hint{
  position:absolute;
  left:20px; right:20px;
  top:78px; bottom:20px;
  display:none;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  border:2px dashed rgba(45,212,191,0.7);
  border-radius:14px;
  background:rgba(10,40,35,0.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  z-index:6;
}
.drop-hint > span{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(14px, 1.8vw, 22px);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(94,234,212,0.95);
  text-shadow:0 0 18px rgba(45,212,191,0.35);
}
.pane.is-drop > .drop-hint{ display:flex; }

/* =================== Deliver-mode panel =================== */
.deliver-panel{
  padding:22px 26px;
  background:rgba(18,13,8,0.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:20px;
  color:var(--fg);
}
.deliver-panel .dp-head{ margin-bottom:14px; }
.deliver-panel .dp-title{
  font-family:var(--font-serif);
  font-size:26px; font-weight:400; letter-spacing:-0.01em;
  color:var(--fg);
}
.deliver-panel .dp-sub{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted);
  margin-top:4px;
}
.deliver-panel .dp-row{
  display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap;
  margin-bottom:14px;
}
.deliver-panel .dp-field{
  display:flex; flex-direction:column; gap:6px; flex:1 1 200px;
}
.deliver-panel .dp-label{
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted);
}
.deliver-panel .dp-optional{
  color:rgba(255,255,255,0.3); font-weight:400; text-transform:none; letter-spacing:0.04em;
}
.deliver-panel input[type="number"],
.deliver-panel input[type="text"]{
  padding:10px 14px;
  background:rgba(11,15,20,0.85);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--fg);
  font-family:var(--font-mono);
  font-size:14px;
  outline:none;
  transition:border-color .15s, background .15s;
}
.deliver-panel input[type="number"]:focus,
.deliver-panel input[type="text"]:focus{
  border-color:rgba(45,212,191,0.65);
  background:rgba(11,15,20,0.95);
}
.deliver-panel input::placeholder{
  color:rgba(255,255,255,0.25);
  font-style:italic;
}
.deliver-panel .dp-btn{
  padding:11px 20px;
  background:linear-gradient(180deg, rgba(110,231,183,0.9), rgba(45,212,191,0.8));
  color:#04261b;
  border:none;
  border-radius:12px;
  font-family:var(--font-mono);
  font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  cursor:pointer;
  transition:transform .15s, filter .15s;
  align-self:flex-end;
}
.deliver-panel .dp-btn:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.deliver-panel .dp-btn:active{ transform:translateY(0); }
.deliver-panel .dp-stats{
  display:flex; gap:22px; flex-wrap:wrap;
  padding:10px 0 2px;
  border-top:1px dashed var(--line);
  margin-top:4px;
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted);
}
.deliver-panel .dp-stat b{ color:var(--fg); font-weight:700; margin:0 4px; }
.deliver-panel .dp-stat--out b{ color:#6ee7b7; }
.deliver-panel .dp-stat--hint{
  margin-left:auto; color:rgba(94,234,212,0.9); text-transform:none; letter-spacing:0.02em;
  font-family:var(--font-body);
}
.deliver-panel .dp-hint--err{ color:#ff7a93 !important; }

@media (max-width: 760px){
  .deliver-panel{ padding:16px 18px; }
  .deliver-panel .dp-row{ gap:10px; }
  .deliver-panel .dp-btn{ width:100%; align-self:stretch; }
  .drop-hint{ left:10px; right:10px; top:62px; bottom:10px; }
}

/* =================== Flowing dot-waves background =================== */
/* Canvas sits above the globe/tint but below main content. Dots flow in sine
   waves across the viewport. Pointer-events off so it never blocks UI. */
.bg-dotwave{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
}
@media (prefers-reduced-motion: reduce){
  .bg-dotwave{ display: none; }
}

/* =================== Animated Lottie globe background =================== */
/* Fixed, transparent, sits behind everything. Low opacity so content stays readable. */
.bg-lottie{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(95vmin, 1200px);
  height: min(95vmin, 1200px);
  z-index: 0;                       /* above bg-video__tint (-1), below main (2) */
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: screen;
  filter: hue-rotate(-10deg) saturate(1.05);
}
/* Subtle radial fade so edges of the globe blend into the page */
.bg-lottie::after{
  content: none;
}

/* Tone it down on small screens so it doesn't dominate */
@media (max-width: 760px){
  .bg-lottie{ width: 120vmin; height: 120vmin; opacity: 0.30; }
}
@media (prefers-reduced-motion: reduce){
  .bg-lottie{ display: none; }
}