:root {
  --ink: #080a09;
  --panel: #101310;
  --panel-2: #151915;
  --line: #2a302a;
  --paper: #e8eadf;
  --muted: #8f978d;
  --signal: #d7ff39;
  --amber: #ffb000;
  --danger: #ff4d38;
  --blue: #68b5ff;
  --display: "Avenir Next Condensed", "DIN Condensed", "Arial Narrow", sans-serif;
  --mono: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); font-family: var(--mono); }
body { margin: 0; min-height: 100vh; background:
  radial-gradient(circle at 74% -10%, rgba(215,255,57,.09), transparent 29rem),
  linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px), var(--ink);
  background-size: auto, 38px 38px, 38px 38px, auto;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .08; background: repeating-linear-gradient(0deg, transparent 0 3px, #000 3px 4px); }
.eyebrow { margin: 0 0 .8rem; color: var(--signal); font-size: .67rem; letter-spacing: .18em; text-transform: uppercase; }
.error { min-height: 1.2em; color: #ff7c69; font-size: .75rem; }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 560px); align-items: center; padding: 8vw; overflow: hidden; }
.login-shell::before { content: "84,722"; position: fixed; left: -2vw; bottom: -9vw; color: transparent; -webkit-text-stroke: 1px rgba(232,234,223,.08); font: 900 28vw/.8 var(--display); letter-spacing: -.07em; }
.login-mark { width: min(32vw, 440px); aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; position: relative; animation: appear .8s ease both; }
.login-mark::before, .login-mark::after { content: ""; position: absolute; inset: 13%; border: 1px solid rgba(215,255,57,.25); border-radius: 50%; }
.login-mark::after { inset: 31%; background: var(--signal); border: 0; box-shadow: 0 0 80px rgba(215,255,57,.28); }
.login-mark span { position: absolute; width: 52%; height: 1px; background: var(--paper); transform-origin: 100%; left: -2%; }
.login-mark span:nth-child(2) { transform: rotate(120deg); }
.login-mark span:nth-child(3) { transform: rotate(240deg); }
.login-panel { position: relative; z-index: 1; padding: 3rem; border-left: 1px solid var(--line); animation: rise .65s .12s ease both; }
.login-panel h1 { margin: 0; font: 900 clamp(5rem, 10vw, 9rem)/.72 var(--display); letter-spacing: -.065em; }
.login-copy { max-width: 32rem; color: var(--muted); line-height: 1.6; margin: 2rem 0; }
label { display: grid; gap: .55rem; color: var(--muted); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
label span { color: #60675f; }
input { width: 100%; border: 1px solid var(--line); background: #0b0d0b; color: var(--paper); padding: .95rem 1rem; outline: none; transition: border-color .2s, box-shadow .2s; }
input:focus { border-color: var(--signal); box-shadow: inset 3px 0 0 var(--signal); }
input[readonly] { color: #798078; cursor: not-allowed; }

.button { border: 1px solid var(--line); min-height: 44px; padding: .78rem 1.05rem; display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; color: var(--paper); background: var(--panel-2); text-decoration: none; cursor: pointer; text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; transition: transform .16s, background .16s, color .16s; }
.button:hover:not(:disabled) { transform: translateY(-2px); }
.button:disabled, .button.disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.button.primary { background: var(--signal); color: #11140b; border-color: var(--signal); font-weight: 800; }
.button.danger { background: var(--danger); color: #160604; border-color: var(--danger); font-weight: 800; }
.button.success { background: #59d785; color: #06130a; border-color: #59d785; }
.button.ghost { background: transparent; }
.button.secondary:hover { border-color: var(--paper); }

.console { max-width: 1600px; margin: 0 auto; padding: 0 3vw; }
.topbar { height: 72px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; background: rgba(8,10,9,.86); backdrop-filter: blur(18px); }
.brand { display: flex; gap: .8rem; align-items: center; letter-spacing: .08em; }
.brand-pip { width: 10px; height: 10px; background: var(--signal); box-shadow: 0 0 20px var(--signal); }
.brand small { color: var(--muted); border-left: 1px solid var(--line); padding-left: .8rem; }
.top-actions { display: flex; align-items: center; gap: .7rem; }
.clock { color: var(--muted); font-size: .7rem; margin-right: 1rem; }
.icon-button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: .67rem; letter-spacing: .12em; padding: .6rem; }
.icon-button:hover { color: var(--signal); }

.hero-grid { min-height: 330px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1.1fr .6fr 1fr; align-items: center; gap: 4vw; position: relative; }
.hero-copy h1 { margin: 0; font: 900 clamp(4.8rem, 10vw, 9.5rem)/.72 var(--display); letter-spacing: -.06em; }
.hero-copy > p:last-child { max-width: 42rem; color: var(--muted); }
.radar { justify-self: center; width: min(20vw, 230px); aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; position: relative; background: repeating-radial-gradient(circle, transparent 0 23%, rgba(215,255,57,.09) 24% 25%); }
.radar::before, .radar::after { content: ""; position: absolute; background: var(--line); }
.radar::before { left: 50%; top: 0; width: 1px; height: 100%; }
.radar::after { top: 50%; left: 0; height: 1px; width: 100%; }
.radar i { position: absolute; inset: 50% 0 auto 50%; height: 1px; background: linear-gradient(90deg, var(--signal), transparent); transform-origin: left; animation: sweep 4s linear infinite; }
.radar i:nth-child(2) { animation-delay: -2s; opacity: .25; }
.radar span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); left: 68%; top: 31%; box-shadow: 0 0 14px var(--signal); animation: pulse 1.2s infinite; }
.hero-stats { display: grid; border-left: 1px solid var(--line); }
.hero-stats div { padding: 1rem 0 1rem 1.4rem; border-bottom: 1px solid var(--line); display: grid; gap: .4rem; }
.hero-stats span, .metric > span { color: var(--muted); text-transform: uppercase; font-size: .62rem; letter-spacing: .14em; }
.hero-stats strong { font-size: .8rem; overflow-wrap: anywhere; }

.active-section, .builder-section { padding: 5rem 0; border-bottom: 1px solid var(--line); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.section-heading h2, dialog h2 { margin: 0; font: 800 clamp(2.8rem, 5vw, 5rem)/.85 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.section-note { color: var(--muted); max-width: 38rem; font-size: .75rem; line-height: 1.6; text-align: right; }
.state-pill { padding: .55rem .8rem; border: 1px solid var(--signal); color: var(--signal); font-size: .68rem; letter-spacing: .14em; }
.state-pill.paused { border-color: var(--amber); color: var(--amber); }
.state-pill.error { border-color: var(--danger); color: var(--danger); }

.metrics-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.metric { min-height: 170px; padding: 1.3rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; background: rgba(16,19,16,.72); }
.metric strong { font: 750 clamp(1.4rem, 2.3vw, 2.5rem)/1 var(--display); }
.metric.major strong { font-size: clamp(3rem, 6vw, 6rem); }
.metric.major strong em { color: var(--muted); font-style: normal; font-size: .3em; margin-left: .3em; }
.metric small { color: var(--muted); font-size: .66rem; }
.metric .address { font: .72rem/1.5 var(--mono); word-break: break-all; color: var(--blue); }
.progress { width: 100%; height: 6px; background: #252a24; margin-top: auto; }
.progress i { display: block; height: 100%; width: 0; background: var(--signal); box-shadow: 0 0 16px rgba(215,255,57,.4); transition: width .55s ease; }
.controls-row { display: flex; gap: .7rem; padding: 1rem 0 3rem; flex-wrap: wrap; }

.telemetry-grid { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 1rem; }
.panel { border: 1px solid var(--line); background: rgba(16,19,16,.82); min-height: 260px; }
.panel-title { padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.panel-title h3 { margin: 0; font: 700 1.35rem var(--display); text-transform: uppercase; }
.panel-title span { color: var(--signal); font-size: .6rem; letter-spacing: .14em; }
.state-list { padding: 1rem 1.2rem; }
.state-row { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: .7rem 0; border-bottom: 1px solid #20251f; font-size: .72rem; }
.state-row span { text-transform: uppercase; color: var(--muted); }
.state-row b { font-weight: 500; }
.batch-list { overflow-x: auto; }
.batch-row { min-width: 630px; display: grid; grid-template-columns: 65px 80px 80px 1fr 90px; gap: 1rem; padding: .8rem 1.2rem; border-bottom: 1px solid #20251f; font-size: .67rem; align-items: center; }
.batch-row .signature { color: var(--blue); overflow: hidden; text-overflow: ellipsis; }
.batch-row .status-confirmed { color: var(--signal); }
.batch-row .status-failed { color: var(--danger); }
.empty { padding: 2rem; color: var(--muted); font-size: .75rem; }
.event-panel { margin-top: 1rem; }
.event-list { max-height: 340px; overflow: auto; }
.event-row { display: grid; grid-template-columns: 145px 70px 150px 1fr; gap: 1rem; padding: .78rem 1.2rem; border-bottom: 1px solid #20251f; font-size: .66rem; line-height: 1.5; }
.event-row time, .event-row .kind { color: var(--muted); }
.event-row .success { color: var(--signal); }.event-row .error { color: var(--danger); }.event-row .warn { color: var(--amber); }

.campaign-form { border: 1px solid var(--line); background: rgba(16,19,16,.82); }
.preset-switch { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.preset-switch button { padding: 1.2rem; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; }
.preset-switch button.active { background: var(--signal); color: #11140b; font-weight: 800; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.form-grid label { background: var(--panel); padding: 1.2rem; }
.form-grid .span-two { grid-column: span 2; }
.guardrail { display: grid; grid-template-columns: 1.3fr 1fr 1fr; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.guardrail > * { padding: 1.1rem 1.2rem; border-right: 1px solid var(--line); min-height: 70px; }
.guardrail > div { display: grid; gap: .35rem; }
.guardrail strong { color: var(--signal); font: 800 1.1rem var(--display); }
.guardrail small { color: var(--muted); font-size: .62rem; line-height: 1.4; }
.check { display: flex; align-items: center; gap: .8rem; cursor: pointer; color: var(--paper); line-height: 1.5; }
.check input { position: absolute; opacity: 0; width: 1px; }
.check > span { width: 19px; height: 19px; border: 1px solid var(--muted); flex: 0 0 auto; position: relative; }
.check input:checked + span { background: var(--signal); border-color: var(--signal); }
.check input:checked + span::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #11140b; font-weight: 900; }
.builder-actions { display: flex; justify-content: flex-end; gap: .7rem; padding: 1rem; }
.campaign-form > .error { padding: 0 1rem; }
.validation-note { min-height: 1.2rem; margin: 0; padding: 0 1rem; color: var(--signal); font-size: .68rem; line-height: 1.5; }

footer { min-height: 100px; display: flex; justify-content: space-between; align-items: center; color: #5d645c; font-size: .62rem; }

dialog { width: min(92vw, 620px); color: var(--paper); border: 1px solid #444b42; padding: 0; background: var(--panel); box-shadow: 0 40px 120px #000; }
dialog::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(7px); }
.dialog-card { padding: 2.3rem; display: grid; gap: 1.2rem; position: relative; }
.dialog-close { position: absolute; right: 1rem; top: 1rem; border: 0; background: none; color: var(--muted); font-size: 1.7rem; cursor: pointer; }
.dialog-note, .arm-summary { color: var(--muted); line-height: 1.65; font-size: .74rem; }
.danger-text { color: var(--danger); }
.confirm { border: 1px solid var(--line); padding: 1rem; }

@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .25; transform: scale(.7); } }
@keyframes appear { from { opacity: 0; transform: scale(.8) rotate(-20deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

@media (max-width: 980px) {
  .login-shell { grid-template-columns: 1fr; padding: 8vw; }.login-mark { display: none; }.login-panel { border-left: 0; padding: 0; }
  .hero-grid { grid-template-columns: 1fr 1fr; }.radar { display: none; }.metrics-grid { grid-template-columns: 1fr 1fr; }.telemetry-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr 1fr; }.guardrail { grid-template-columns: 1fr; }.guardrail > * { border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .console { padding: 0 1rem; }.topbar { height: 60px; }.brand small, .clock { display: none; }
  .hero-grid { grid-template-columns: 1fr; padding: 3rem 0; }.hero-stats { border: 1px solid var(--line); }.hero-copy h1 { font-size: 4.7rem; }
  .section-heading { align-items: flex-start; flex-direction: column; }.section-note { text-align: left; }.metrics-grid, .form-grid { grid-template-columns: 1fr; }.form-grid .span-two { grid-column: auto; }
  .metric.major strong { font-size: 3rem; }.guardrail { grid-template-columns: 1fr; }.builder-actions { flex-direction: column; }.builder-actions .button { width: 100%; }
  .event-row { grid-template-columns: 90px 60px 1fr; }.event-row .kind { display: none; } footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: .7rem; }
}