:root{
  --bg:#05070a; --bg2:#0a0e14; --panel:rgba(13,19,27,.72);
  --border:rgba(90,220,200,.16); --text:#d9e8e5; --muted:#6f8583;
  --teal:#2ff0cf; --cyan:#38d1ff; --amber:#ffb020; --green:#40e88f;
  --red:#ff5470; --grid:rgba(70,150,135,.07);
  --display:"Bahnschrift","DIN Alternate","Segoe UI Semibold",system-ui,sans-serif;
  --mono:"Cascadia Code","Cascadia Mono","JetBrains Mono","SF Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--mono); font-size:13.5px; line-height:1.5;
  overflow-x:hidden; position:relative;
}
/* layered atmospheric background */
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(47,240,207,.10), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(56,209,255,.08), transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:38px 38px; mask-image:radial-gradient(circle at 50% 40%,#000 60%,transparent 100%);
  animation:gridpan 24s linear infinite;
}
@keyframes gridpan{to{background-position:38px 38px,38px 38px}}
/* moving scanline */
.scan{position:fixed;left:0;right:0;height:140px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(47,240,207,.05),transparent);
  animation:scan 7s linear infinite}
@keyframes scan{0%{top:-140px}100%{top:100%}}

/* ---- header ---- */
header{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:16px 24px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(10,16,22,.9),rgba(10,16,22,.5));
  backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}
.brand{font-family:var(--display);font-size:20px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(90deg,var(--teal),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{display:block;font-size:9px;letter-spacing:.34em;color:var(--muted);
  -webkit-text-fill-color:var(--muted)}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(64,232,143,.6);animation:beat 1.8s infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(64,232,143,.55)}70%{box-shadow:0 0 0 9px rgba(64,232,143,0)}}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:11px;letter-spacing:.06em;padding:4px 10px;border-radius:999px;
  border:1px solid var(--border);color:var(--muted);background:rgba(255,255,255,.02);
  text-transform:uppercase}
.chip b{color:var(--teal);font-weight:600}
.clock{font-variant-numeric:tabular-nums;color:var(--cyan);letter-spacing:.1em}
.spacer{flex:1}

/* ---- buttons ---- */
button{font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;
  font-size:12px;font-weight:600;cursor:pointer;border-radius:8px;padding:9px 16px;
  color:#04140f;border:0;background:linear-gradient(120deg,var(--teal),var(--cyan));
  box-shadow:0 0 18px rgba(47,240,207,.28);transition:transform .12s,box-shadow .2s}
button:hover{transform:translateY(-1px);box-shadow:0 0 26px rgba(47,240,207,.5)}
button:active{transform:translateY(0)}
button.ghost{background:transparent;color:var(--text);border:1px solid var(--border);
  box-shadow:none}
button.ghost:hover{border-color:var(--teal);color:var(--teal)}
button:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
label.tog{display:inline-flex;align-items:center;gap:7px;color:var(--muted);
  font-size:12px;cursor:pointer;text-transform:none;letter-spacing:0;font-family:var(--mono)}
input[type=checkbox]{accent-color:var(--teal);width:15px;height:15px}

main{max-width:1200px;margin:0 auto;padding:24px;display:grid;gap:24px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;
  padding:20px;backdrop-filter:blur(6px);position:relative;overflow:hidden}
.panel h2{font-family:var(--display);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin:0 0 16px;display:flex;
  align-items:center;gap:10px}
.panel h2::before{content:"";width:22px;height:2px;background:var(--teal);
  box-shadow:0 0 10px var(--teal)}

/* ---- quote cards ---- */
.grid-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.card{position:relative;border:1px solid var(--border);border-radius:14px;padding:16px;
  background:linear-gradient(160deg,rgba(20,28,38,.6),rgba(10,14,20,.7));
  opacity:0;transform:translateY(14px);animation:reveal .5s forwards;cursor:pointer;
  transition:border-color .2s,transform .15s}
.card:hover{transform:translateY(-3px);border-color:var(--teal)}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}
.card .accent{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:14px 0 0 14px}
.card.s-near{animation:reveal .5s forwards,glowamber 2.2s ease-in-out infinite}
.card.s-cross{animation:reveal .5s forwards,glowcross 1.6s ease-in-out infinite}
@keyframes glowamber{0%,100%{box-shadow:0 0 0 0 rgba(255,176,32,0)}50%{box-shadow:0 0 26px rgba(255,176,32,.32)}}
@keyframes glowcross{0%,100%{box-shadow:0 0 0 0 rgba(64,232,143,0)}50%{box-shadow:0 0 30px rgba(64,232,143,.42)}}
.s-near .accent{background:var(--amber);box-shadow:0 0 14px var(--amber)}
.s-cross .accent{background:var(--green);box-shadow:0 0 14px var(--green)}
.s-far .accent{background:var(--muted)}
.s-error .accent{background:var(--red)}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sym{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:.06em}
.badge{font-family:var(--display);font-size:10px;letter-spacing:.14em;padding:3px 9px;
  border-radius:999px;text-transform:uppercase}
.b-near{background:rgba(255,176,32,.16);color:var(--amber)}
.b-cross{background:rgba(64,232,143,.16);color:var(--green)}
.b-far{background:rgba(120,140,138,.14);color:var(--muted)}
.b-error{background:rgba(255,84,112,.16);color:var(--red)}
.gauge-wrap{display:flex;align-items:center;gap:14px;margin:8px 0 4px}
.gauge{position:relative;width:96px;height:96px;flex:none}
.gauge .val{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.gauge .val b{font-size:19px;letter-spacing:.02em}
.gauge .val span{font-size:9px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.ring-bg{fill:none;stroke:rgba(255,255,255,.06);stroke-width:8}
.ring-fg{fill:none;stroke-width:8;stroke-linecap:round;
  transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1);
  transform:rotate(-90deg);transform-origin:50% 50%;
  filter:drop-shadow(0 0 6px currentColor)}
.stats{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;font-size:11.5px}
.stats div span{color:var(--muted);display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.stats div b{font-weight:600;font-variant-numeric:tabular-nums}
.spark{margin-top:10px;width:100%;height:34px;display:block}
.trend{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.err-text{color:var(--red);font-size:11px;margin-top:8px}

/* ---- settings ---- */
.tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.tab{font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 14px;border-radius:8px;border:1px solid var(--border);color:var(--muted);
  background:transparent;cursor:pointer}
.tab.active{color:var(--bg);background:var(--teal);border-color:var(--teal)}
.tabpane{display:none}.tabpane.active{display:block}
.feed-tabs{margin-bottom:14px}
.feedpane{display:none}.feedpane.active{display:block}
.feedpane h2{margin-top:4px}
#tvhint{margin:0 0 12px;max-width:52rem}
#tvhint code{font-size:.9em;opacity:.85}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field .hint{font-size:11px;color:var(--muted);text-transform:none;letter-spacing:0}
input,select,textarea{background:rgba(4,7,11,.7);color:var(--text);
  border:1px solid var(--border);border-radius:8px;padding:9px 10px;font:inherit;
  transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(47,240,207,.12)}
textarea{resize:vertical;min-height:92px}
.full{grid-column:1/-1}
.field .inline{display:flex;gap:8px;align-items:center}
.field .inline select{flex:none;width:auto}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}

/* channel cards */
.chan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.chan{border:1px solid var(--border);border-radius:12px;padding:14px;
  background:rgba(255,255,255,.02);transition:border-color .2s,opacity .2s;opacity:.62}
.chan.on{opacity:1;border-color:rgba(47,240,207,.4)}
.chan-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.chan-head .name{font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;font-size:13px}
.chan .field{margin-top:8px}
.chan .test{font-size:10px;padding:5px 10px}
.switch{position:relative;width:40px;height:22px;flex:none}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.12);
  transition:.2s;cursor:pointer}
.slider::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;
  border-radius:50%;background:var(--muted);transition:.2s}
.switch input:checked+.slider{background:rgba(47,240,207,.35)}
.switch input:checked+.slider::before{transform:translateX(18px);background:var(--teal);
  box-shadow:0 0 8px var(--teal)}

/* ---- modal ---- */
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;
  background:rgba(3,5,8,.72);backdrop-filter:blur(4px)}
.modal.open{display:flex}
.modal-box{width:min(760px,92vw);background:var(--panel);border:1px solid var(--teal);
  border-radius:16px;padding:22px;box-shadow:0 0 60px rgba(47,240,207,.2)}
.modal-box h3{font-family:var(--display);letter-spacing:.1em;margin:0 0 14px;display:flex;
  justify-content:space-between;align-items:center}
.modal-box .x{cursor:pointer;color:var(--muted)}
.mdetail{margin:0 0 14px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;
  background:rgba(0,0,0,.25);font-size:13px}
.mdetail .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 14px}
.mdetail .k{color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.mdetail .v{font-family:var(--mono);color:var(--text);margin-top:2px}
.mdetail .note{margin-top:10px;color:var(--muted);font-size:12px}
#tvcards .card[data-sym]{cursor:pointer}
.legend{display:flex;gap:18px;font-size:11px;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}

/* ---- AI summary hover tooltip ---- */
#aitip{position:absolute;z-index:40;min-width:240px;max-width:340px;
  padding:12px 14px;border-radius:10px;font-size:12px;line-height:1.55;
  color:var(--text);pointer-events:none;
  background:linear-gradient(160deg,rgba(16,24,33,.98),rgba(8,12,18,.98));
  border:1px solid var(--teal);
  box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 22px rgba(47,240,207,.18);
  opacity:0;transform:translateY(-4px);transition:opacity .16s,transform .16s}
#aitip.show{opacity:1;transform:translateY(0)}
#aitip.loading{border-color:rgba(47,240,207,.4);color:var(--muted)}
#aitip.muted{border-color:var(--border);color:var(--muted)}
#aitip .dots{color:var(--teal)}

/* ---- toast ---- */
#toast{position:fixed;bottom:22px;right:22px;z-index:60;padding:13px 18px;border-radius:10px;
  font-size:12.5px;opacity:0;transform:translateY(8px);transition:.28s;pointer-events:none;
  max-width:380px;border:1px solid transparent}
#toast.show{opacity:1;transform:translateY(0)}
#toast.ok{background:rgba(64,232,143,.14);border-color:var(--green);color:var(--green)}
#toast.err{background:rgba(255,84,112,.14);border-color:var(--red);color:var(--red)}
.hint{color:var(--muted);font-size:11.5px}