:root {
  --neon: #00ff9c;
  --cyan: #4fd7ff;
  --magenta: #ff5ecb;
  --gold: #ffd23f;
  --xp-blue1: #0055ea;
  --xp-blue2: #3a93ff;
  --bg0: #00021a;
  --bg1: #050a2e;
  --panel: #d4d0c8;
  --panel-dark: #808080;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: radial-gradient(ellipse at 50% 0%, #0a1550 0%, var(--bg1) 40%, var(--bg0) 100%);
  color: var(--neon);
  font-family: 'Share Tech Mono', monospace;
  min-height: 100vh;
}

/* CRT scanlines overlay */
#scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.14) 0px, rgba(0,0,0,0.14) 1px, transparent 2px, transparent 3px);
  mix-blend-mode: multiply;
}

.app { max-width: 1200px; margin: 0 auto; padding: 12px; position: relative; }
.app.mega-glow { animation: megaglow 1.5s infinite alternate; }
@keyframes megaglow { from { filter: none; } to { filter: drop-shadow(0 0 12px var(--neon)) hue-rotate(20deg); } }

/* ── Cracktro banner ── */
.cracktro {
  position: relative; text-align: center; padding: 26px 12px 18px;
  border: 2px solid var(--cyan); border-radius: 8px;
  background: linear-gradient(180deg, rgba(10,20,80,0.7), rgba(2,5,30,0.9));
  overflow: hidden; margin-bottom: 16px;
  box-shadow: 0 0 24px rgba(0,255,156,0.15) inset;
}
.star-field {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 60% 70%, var(--cyan), transparent),
    radial-gradient(1px 1px at 80% 20%, #fff, transparent),
    radial-gradient(1px 1px at 40% 80%, var(--magenta), transparent),
    radial-gradient(1px 1px at 90% 60%, #fff, transparent),
    radial-gradient(1px 1px at 10% 60%, var(--gold), transparent);
  opacity: 0.6; animation: twinkle 3s infinite alternate;
}
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 0.8; } }

.logo {
  position: relative; z-index: 1; margin: 0;
  font-family: 'VT323', monospace;
  font-size: clamp(38px, 9vw, 82px); line-height: 0.9;
  font-weight: 400; letter-spacing: 4px;
  color: var(--neon);
  text-shadow: 0 0 8px var(--neon), 3px 3px 0 var(--magenta), 6px 6px 0 var(--cyan);
  animation: hue 6s linear infinite;
}
@keyframes hue { 0%{filter:hue-rotate(0)} 100%{filter:hue-rotate(360deg)} }

.subtitle {
  position: relative; z-index: 1; margin: 6px 0 0;
  color: var(--cyan); font-size: 11px; letter-spacing: 2px;
}
.disclaimer {
  position: relative; z-index: 1; margin: 12px auto 0; max-width: 640px;
  color: var(--gold); font-size: 12px; padding: 6px 10px;
  border: 1px dashed var(--gold); border-radius: 4px;
  background: rgba(255,210,63,0.06);
}
.toggles { position: relative; z-index: 1; margin-top: 12px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tgl {
  font-family: 'VT323', monospace; font-size: 18px;
  background: #001a2e; color: var(--cyan); border: 1px solid var(--cyan);
  padding: 3px 14px; cursor: pointer; border-radius: 3px;
}
.tgl:hover { background: var(--cyan); color: #001a2e; }

/* ── Layout ── */
.layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.col { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) { .layout { grid-template-columns: 1fr; } }

/* ── XP window chrome ── */
.xp-window {
  background: var(--panel); border: 2px solid #0831d9;
  border-radius: 6px 6px 2px 2px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  color: #1a1a1a; font-family: 'Share Tech Mono', monospace;
}
.xp-titlebar {
  background: linear-gradient(180deg, var(--xp-blue2) 0%, var(--xp-blue1) 8%, #0247d5 40%, #003ad0 90%);
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 6px 3px 8px;
}
.xp-title { color: #fff; font-weight: bold; font-size: 13px; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); }
.xp-buttons { display: flex; gap: 3px; }
.xp-btn {
  width: 18px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff; border: 1px solid #fff6; border-radius: 3px;
  background: linear-gradient(180deg, #6ba7ff, #1e5bd6);
}
.xp-btn.close { background: linear-gradient(180deg, #ff8a7a, #d63a1e); }
.xp-body { padding: 12px; }

/* ── Fields ── */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: #333; margin-bottom: 4px; font-weight: bold; }
.xp-select {
  width: 100%; padding: 5px 6px; font-family: 'Share Tech Mono', monospace;
  border: 2px inset #fff; background: #fff; font-size: 13px; color: #111;
}
.edition-desc { font-size: 11px; color: #555; margin: -6px 0 12px; font-style: italic; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.readonly {
  padding: 5px 6px; background: #ececec; border: 1px inset #aaa;
  font-size: 12px; color: #222;
}
.license-badge {
  display: inline-block; padding: 3px 12px; font-weight: bold; font-size: 12px;
  border-radius: 3px; color: #fff; text-shadow: 1px 1px 1px #0005;
}
.lic-volume { background: #c0392b; }
.lic-retail { background: #27692b; }
.lic-oemslp { background: #7d4a12; }

.divider { border: none; border-top: 1px solid #999; margin: 12px 0; }

.rpk-row { display: flex; align-items: center; gap: 6px; }
.rpk-in {
  width: 64px; padding: 6px; font-family: 'VT323', monospace; font-size: 22px;
  text-align: center; border: 2px inset #fff; letter-spacing: 2px;
}
.rpk-in.wide { width: 110px; }
.rpk-in.ok { background: #eafff0; color: #063; }
.rpk-in.bad { background: #fff0f0; color: #900; }
.dash { font-size: 22px; color: #444; }
.dice-btn {
  font-size: 20px; padding: 4px 10px; cursor: pointer; margin-left: 4px;
  background: linear-gradient(180deg, #fafafa, #d0d0d0); border: 2px outset #fff; border-radius: 4px;
}
.dice-btn:hover { background: linear-gradient(180deg, #fff, #e8e8e8); }
.hint { font-size: 10px; color: #666; margin-top: 4px; }
.chk { display: flex; align-items: center; font-size: 11px; color: #444; margin-bottom: 12px; gap: 4px; }

/* ── Generate button ── */
.generate-btn {
  width: 100%; padding: 14px; font-family: 'VT323', monospace; font-size: 28px;
  letter-spacing: 3px; cursor: pointer; border: 3px outset #4fff9c;
  background: linear-gradient(180deg, #063 0%, #021 100%); color: var(--neon);
  border-radius: 6px; text-shadow: 0 0 6px var(--neon);
  transition: all 0.1s;
}
.generate-btn:hover:not(:disabled) { background: linear-gradient(180deg, #085 0%, #032 100%); box-shadow: 0 0 18px var(--neon); }
.generate-btn:active:not(:disabled) { border-style: inset; }
.generate-btn:disabled { opacity: 0.4; cursor: not-allowed; border-color: #777; }

/* ── Compute box ── */
.compute-box { background: #000; padding: 12px; border: 2px inset #333; border-radius: 4px; }
.status-msg { color: var(--neon); font-size: 15px; margin-bottom: 8px; animation: blink 0.8s infinite; }
@keyframes blink { 50% { opacity: 0.4; } }
.prog-track { height: 18px; background: #111; border: 1px solid #333; overflow: hidden; margin-bottom: 8px; }
.prog-bar { height: 100%; background: repeating-linear-gradient(90deg, var(--neon) 0 8px, #063 8px 16px); transition: width 0.13s; }
.hex-dump { font-size: 11px; color: #0a6; opacity: 0.7; }
.hex-line { white-space: nowrap; overflow: hidden; }

/* ── Output ── */
.output-win .xp-body { background: #050505; color: var(--neon); }
.out-block { margin-bottom: 18px; }
.out-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.out-title { color: var(--cyan); font-size: 14px; font-weight: bold; }
.btn-group { display: flex; gap: 6px; }
.copy-btn {
  font-size: 11px; padding: 4px 10px; cursor: pointer; border-radius: 3px;
  background: linear-gradient(180deg, #2a2a2a, #111); color: var(--neon);
  border: 1px solid var(--neon); font-family: 'Share Tech Mono', monospace;
}
.copy-btn:hover { background: var(--neon); color: #000; }
.copy-btn.ghost { color: var(--gold); border-color: var(--gold); }
.copy-btn.ghost:hover { background: var(--gold); color: #000; }
.big-out {
  font-family: 'VT323', monospace; font-size: clamp(24px, 5vw, 40px);
  letter-spacing: 3px; color: var(--neon); text-shadow: 0 0 10px var(--neon);
  padding: 8px 4px; word-break: break-all;
}
.key-out { color: var(--gold); text-shadow: 0 0 10px var(--gold); }
.scrollx { overflow-x: auto; }
.key-note { font-size: 10px; color: #6a6; margin-top: 4px; word-break: break-all; }
.sim-tag { font-size: 10px; color: var(--magenta); margin-top: 6px; border-top: 1px dashed #444; padding-top: 6px; }
.sig-tag { font-size: 10px; color: var(--magenta); margin-top: 6px; border-top: 1px dashed #444; padding-top: 6px; }
.sig-ok {
  font-size: 11px; color: var(--neon); margin-top: 6px;
  border-top: 1px dashed #2a5; padding-top: 6px; text-shadow: 0 0 6px var(--neon);
}
.sig-block {
  font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--cyan);
  margin-top: 8px; padding: 6px; background: #010; border: 1px solid #143;
  border-radius: 3px; word-break: break-all;
}
.curve-line { font-size: 10px !important; word-break: break-all; }

.seg-breakdown { margin-top: 8px; border-top: 1px solid #222; padding-top: 8px; }
.seg-row { display: flex; align-items: baseline; gap: 12px; padding: 3px 0; flex-wrap: wrap; }
.seg-value { font-family: 'VT323', monospace; font-size: 22px; min-width: 90px; }
.seg-meta { display: flex; flex-direction: column; }
.seg-label { color: #ccc; font-size: 12px; }
.seg-note { color: #789; font-size: 10px; }

/* ── Welcome ── */
.welcome-win .xp-body { background: #f4f2ec; color: #222; }
.welcome p { font-size: 13px; line-height: 1.5; margin: 0 0 10px; }
.welcome .hl { color: #063; }
.welcome .small { font-size: 11px; color: #666; }

/* ── History ── */
.hist-win .xp-body { background: #050505; }
.empty { color: #567; font-size: 12px; padding: 8px; }
.hist-list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.hist-item {
  background: #0a0a12; border: 1px solid #223; padding: 6px 8px; border-radius: 3px;
  display: flex; flex-direction: column; gap: 2px; position: relative;
}
.hist-key { font-family: 'VT323', monospace; color: var(--gold); font-size: 16px; letter-spacing: 1px; word-break: break-all; }
.hist-meta { display: flex; justify-content: space-between; font-size: 10px; color: #789; }
.mini-copy {
  position: absolute; top: 6px; right: 6px; font-size: 9px; padding: 1px 6px;
  background: #123; color: var(--cyan); border: 1px solid var(--cyan); cursor: pointer; border-radius: 3px;
}
.mini-copy:hover { background: var(--cyan); color: #000; }
.clear-btn {
  margin-top: 10px; font-size: 11px; padding: 3px 10px; cursor: pointer;
  background: #300; color: #f88; border: 1px solid #f88; border-radius: 3px;
}

/* ── Math / lore collapsibles ── */
.math-win .xp-body, .lore-win .xp-body { background: #050505; padding: 8px; }
.collapse-head {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  color: var(--cyan); font-family: 'VT323', monospace; font-size: 20px; padding: 4px;
}
.collapse-head:hover { color: var(--neon); }
.math-body, .lore-body { padding: 8px 4px; }
.math-block { margin-bottom: 14px; }
.math-block h4 { color: var(--magenta); font-size: 13px; margin: 0 0 6px; }
.term {
  background: #000; color: var(--neon); padding: 8px; font-size: 12px;
  border: 1px solid #234; border-radius: 3px; white-space: pre-wrap; overflow-x: auto; margin: 0;
}
.small-term { font-size: 10px; }
.note-text { color: #9ab; font-size: 12px; line-height: 1.5; margin: 0; }
.lore-item { color: #bcd; font-size: 12px; line-height: 1.5; margin-bottom: 10px; }
.lore-item b { color: var(--gold); }

/* ── Footer ── */
.footer { margin-top: 24px; border-top: 1px solid #234; padding-top: 12px; }
.marquee { overflow: hidden; white-space: nowrap; border: 1px solid #234; background: #000; padding: 4px 0; border-radius: 3px; }
.marquee span { display: inline-block; padding-left: 100%; animation: scroll 26s linear infinite; color: var(--cyan); font-size: 13px; }
@keyframes scroll { to { transform: translateX(-100%); } }
.foot-text { text-align: center; color: #678; font-size: 11px; margin-top: 10px; padding-bottom: 20px; }
.remix { color: var(--neon); text-decoration: none; border-bottom: 1px dotted var(--neon); }
.remix:hover { text-shadow: 0 0 6px var(--neon); }