:root {
  --ink: #0a0d0c;
  --panel: #111614;
  --panel-2: #171d1a;
  --line: #303a35;
  --muted: #87928c;
  --paper: #e6eadf;
  --acid: #d9ff43;
  --amber: #ffb84d;
  --red: #ff675f;
  --cyan: #67e8d1;
}

* { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 82% -10%, #253329 0, transparent 35%), var(--ink); font-family: "Lucida Sans", "Segoe UI", sans-serif; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.scanlines { position: fixed; inset: 0; pointer-events: none; opacity: .16; z-index: 9; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 3px 4px); }

.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw; border-bottom: 1px solid var(--line); background: rgba(10,13,12,.88); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 8; }
.brand { color: var(--paper); text-decoration: none; display: flex; align-items: center; gap: 12px; font: 700 13px/1 "Courier New", monospace; letter-spacing: .2em; }
.brand-mark { display: flex; gap: 3px; height: 24px; align-items: end; }
.brand-mark i { width: 3px; background: var(--acid); animation: brandWave 1.2s ease-in-out infinite alternate; }
.brand-mark i:nth-child(1) { height: 35%; }.brand-mark i:nth-child(2) { height: 90%; animation-delay: -.4s; }.brand-mark i:nth-child(3) { height: 58%; animation-delay: -.8s; }.brand-mark i:nth-child(4) { height: 100%; animation-delay: -.2s; }
.topbar nav { display: flex; gap: 28px; }
.topbar nav a { color: var(--muted); text-decoration: none; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; padding: 10px 0; border-bottom: 1px solid transparent; }
.topbar nav a:hover, .topbar nav a.active { color: var(--acid); border-color: var(--acid); }

main { width: min(1500px, 92vw); margin: 0 auto; }
.hero { min-height: 330px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; padding: 75px 0 56px; gap: 12vw; }
.kicker { color: var(--acid); margin: 0 0 16px; font: 700 11px/1.2 "Courier New", monospace; letter-spacing: .19em; }
h1 { margin: 0; font: 400 clamp(64px, 8vw, 128px)/.79 Georgia, serif; letter-spacing: -.075em; }
h1 em { color: var(--acid); font-weight: 400; }
.hero-copy { max-width: 470px; color: #aab2ad; font: 400 clamp(17px, 1.5vw, 23px)/1.55 Georgia, serif; margin: 0; padding-bottom: 8px; }

.signal-rail { min-height: 98px; border: 1px solid var(--line); display: grid; grid-template-columns: 1fr 80px 1fr 80px 1fr; align-items: center; padding: 0 28px; background: rgba(17,22,20,.7); }
.signal-item { display: flex; align-items: center; gap: 14px; min-width: 0; }
.signal-item small, .identity-strip small { color: var(--muted); display: block; font: 700 9px/1.2 "Courier New", monospace; letter-spacing: .16em; margin-bottom: 6px; }
.signal-item strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signal-light { width: 12px; height: 12px; border-radius: 50%; background: #3e4742; box-shadow: 0 0 0 5px rgba(62,71,66,.12); transition: .3s; }
.signal-light.ready { background: var(--acid); box-shadow: 0 0 18px rgba(217,255,67,.55); }
.signal-light.pending { background: var(--amber); box-shadow: 0 0 18px rgba(255,184,77,.45); }
.signal-light.error { background: var(--red); box-shadow: 0 0 18px rgba(255,103,95,.5); }
.rail-line { height: 1px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 11px); }

.desk-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr); margin-top: 22px; border: 1px solid var(--line); }
.dial-card, .live-card { padding: clamp(28px, 3vw, 52px); background: var(--panel); }
.dial-card { border-right: 1px solid var(--line); }
.live-card { background: linear-gradient(150deg, #171d1a, #0e1210 60%); }
.card-label { display: flex; justify-content: space-between; color: var(--muted); font: 700 10px/1 "Courier New", monospace; letter-spacing: .16em; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
h2 { font: 400 clamp(28px, 3vw, 46px)/1.05 Georgia, serif; letter-spacing: -.035em; margin: 30px 0; }
.field { display: block; margin: 28px 0; }
.field > span, .mode-choice legend { display: block; color: #b3bbb6; font: 700 11px/1 "Courier New", monospace; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.field span i { color: var(--muted); font-style: normal; font-weight: 400; text-transform: none; }
.field input, .field textarea { width: 100%; color: var(--paper); background: transparent; border: 0; border-bottom: 1px solid #536059; padding: 12px 0; outline: 0; transition: border .2s; }
.field input { font: 400 clamp(26px, 3vw, 42px)/1.2 Georgia, serif; letter-spacing: -.03em; }
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { border-color: var(--acid); }
.field small { color: var(--muted); display: block; font-size: 11px; line-height: 1.5; margin-top: 9px; }
.mode-choice { border: 0; padding: 0; margin: 30px 0; }
.mode-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-choice legend { grid-column: 1/-1; }
.mode-choice label { position: relative; display: block; }
.mode-choice input { position: absolute; opacity: 0; }
.mode-choice label span { display: flex; flex-direction: column; gap: 5px; padding: 16px; border: 1px solid var(--line); cursor: pointer; transition: .2s; }
.mode-choice label strong { font: 400 20px Georgia, serif; }.mode-choice label small { color: var(--muted); font-size: 10px; }
.mode-choice input:checked + span { border-color: var(--acid); background: rgba(217,255,67,.07); }
.setup-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 34px; }
.setup-actions button, .live-controls button { border: 1px solid var(--line); background: #1c2420; min-height: 58px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 11px; text-transform: uppercase; font: 700 10px/1 "Courier New", monospace; letter-spacing: .12em; transition: transform .2s, background .2s, border .2s; }
.setup-actions button:hover:not(:disabled), .live-controls button:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--paper); }
.setup-actions button:disabled, .live-controls button:disabled { opacity: .35; cursor: not-allowed; }
.setup-actions .call-button { background: var(--acid); color: #11150e; border-color: var(--acid); }
.notice { color: var(--muted); min-height: 42px; font-size: 12px; line-height: 1.5; padding: 14px 0 0 16px; border-left: 2px solid var(--line); }
.notice.success { color: var(--acid); border-color: var(--acid); }.notice.error { color: #ff8c85; border-color: var(--red); }
.mic-glyph { width: 12px; height: 17px; border: 1px solid currentColor; border-radius: 8px; position: relative; }.mic-glyph:after { content:""; position:absolute; width:16px; height:8px; border:1px solid currentColor; border-top:0; border-radius:0 0 10px 10px; left:-3px; top:9px; }
.phone-glyph { width: 15px; height: 15px; border: 2px solid currentColor; border-top-color: transparent; border-right-color: transparent; border-radius: 4px 10px; transform: rotate(-45deg); }

.switchboard { min-height: 370px; position: relative; display: grid; place-items: center; overflow: hidden; }
.pulse-ring { position: absolute; border: 1px solid #344039; border-radius: 50%; aspect-ratio: 1; }
.ring-a { width: 58%; }.ring-b { width: 83%; border-style: dashed; animation: orbit 22s linear infinite; }
.switchboard.live .pulse-ring { border-color: rgba(217,255,67,.38); box-shadow: inset 0 0 40px rgba(217,255,67,.025); }
.switchboard.nova .pulse-ring { border-color: rgba(103,232,209,.5); }
.wave-bars { position: absolute; display: flex; align-items: center; gap: 5px; height: 90px; opacity: .2; }
.wave-bars i { display: block; width: 3px; height: calc(12px + var(--level, 0) * 64px); min-height: 12px; background: var(--acid); transition: height .08s; }
.wave-bars i:nth-child(2n) { background: var(--cyan); }
.mode-readout { position: relative; z-index: 2; text-align: center; padding: 24px; background: radial-gradient(circle, rgba(14,18,16,.96), rgba(14,18,16,.64) 65%, transparent); }
.mode-readout small { color: var(--muted); font: 700 9px "Courier New", monospace; letter-spacing: .2em; }
.mode-readout strong { display: block; color: var(--acid); font: 400 clamp(42px, 5vw, 78px)/1 Georgia, serif; letter-spacing: -.05em; margin: 10px 0; }
.switchboard.nova .mode-readout strong { color: var(--cyan); }
.mode-readout span { color: var(--muted); font-size: 11px; }
.identity-strip { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.identity-strip > div { padding: 18px 0; min-width: 0; }.identity-strip > div + div { border-left: 1px solid var(--line); padding-left: 20px; }
.identity-strip strong { display: block; font: 400 11px/1.3 "Courier New", monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-controls { display: grid; grid-template-columns: .8fr 1.4fr .8fr; gap: 9px; margin-top: 22px; }
.live-controls .nova-button { background: var(--cyan); border-color: var(--cyan); color: #08100e; }.live-controls .danger-button { color: #ffaaa5; }
.mode-help { color: var(--muted); font-size: 11px; line-height: 1.55; margin: 18px 0 0; }
.end-icon { width: 16px; height: 7px; background: currentColor; border-radius: 50% 50% 2px 2px; transform: rotate(180deg); }
.mute-icon { width: 12px; height: 16px; border: 1px solid currentColor; border-radius: 8px; }

.handoff-card { margin-top: 22px; border: 1px solid var(--line); background: linear-gradient(125deg, #151b18 0 62%, #101511 62%); padding: clamp(26px, 3vw, 46px); position: relative; overflow: hidden; }
.handoff-card:after { content:"H"; position:absolute; right:-.04em; bottom:-.3em; color:rgba(217,255,67,.025); font:400 330px/1 Georgia,serif; pointer-events:none; }
.handoff-card.active { border-color: rgba(217,255,67,.55); }
.handoff-card.connecting { border-color: rgba(255,184,77,.7); }
.handoff-heading { display:flex; align-items:start; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:1; }
.handoff-heading h2 { margin:0 0 25px; }
.handoff-badge { border:1px solid var(--line); color:var(--muted); padding:9px 12px; font:700 9px/1 "Courier New",monospace; letter-spacing:.16em; }
.handoff-card.active .handoff-badge { color:var(--ink); background:var(--acid); border-color:var(--acid); }
.handoff-card.connecting .handoff-badge { color:var(--ink); background:var(--amber); border-color:var(--amber); }
.handoff-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,80px); padding:34px 0 28px; position:relative; z-index:1; }
.handoff-route { display:grid; grid-template-columns:1fr 38px 1fr 38px 1fr; align-items:center; }
.handoff-route > i { height:1px; background:linear-gradient(90deg,var(--acid),var(--line)); position:relative; }
.handoff-route > i:after { content:""; position:absolute; right:0; top:-3px; border-left:5px solid var(--line); border-top:3px solid transparent; border-bottom:3px solid transparent; }
.route-node { min-height:148px; border:1px solid var(--line); padding:18px; display:flex; flex-direction:column; justify-content:space-between; background:rgba(10,13,12,.55); }
.route-node small { color:var(--acid); font:700 9px "Courier New",monospace; }
.route-node strong { font:400 19px/1.1 Georgia,serif; }
.route-node span { color:var(--muted); font-size:10px; line-height:1.45; }
.handoff-console { border-left:1px solid var(--line); padding-left:clamp(24px,3vw,44px); }
.handoff-console > p { color:#b8c0bb; margin:0 0 24px; font:italic 17px/1.55 Georgia,serif; }
.handoff-facts { margin:0; }
.handoff-facts div { display:grid; grid-template-columns:110px 1fr; gap:14px; padding:9px 0; border-bottom:1px solid rgba(48,58,53,.55); }
.handoff-facts dt { color:var(--muted); font:700 9px/1.5 "Courier New",monospace; letter-spacing:.11em; text-transform:uppercase; }
.handoff-facts dd { margin:0; font:400 11px/1.5 "Courier New",monospace; overflow-wrap:anywhere; }
.handoff-actions { display:grid; grid-template-columns:1fr auto auto; gap:8px; margin-top:22px; }
.handoff-actions select, .handoff-actions button { min-height:42px; border:1px solid var(--line); background:#1c2420; color:var(--paper); padding:0 13px; font:700 9px "Courier New",monospace; text-transform:uppercase; letter-spacing:.08em; }
.handoff-actions button { cursor:pointer; }.handoff-actions button:first-of-type { background:var(--acid); color:var(--ink); border-color:var(--acid); }
.handoff-actions button:disabled { opacity:.35; cursor:not-allowed; }
.handoff-test-note { color:var(--muted) !important; font:400 10px/1.5 "Lucida Sans","Segoe UI",sans-serif !important; margin:12px 0 0 !important; }
.agent-directory { margin-top:22px; border:1px solid var(--line); background:#0e1210; overflow:hidden; }
.directory-heading { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; padding:clamp(28px,3vw,48px); border-bottom:1px solid var(--line); background:linear-gradient(105deg,#171d1a 0 72%,rgba(217,255,67,.055) 72%); }
.directory-heading h2 { margin:0 0 12px; }
.directory-heading p:last-child { max-width:700px; margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.directory-stat { min-width:160px; text-align:right; }
.directory-stat strong { display:block; color:var(--acid); font:400 clamp(54px,6vw,86px)/.8 Georgia,serif; letter-spacing:-.07em; }
.directory-stat span { display:block; margin-top:14px; color:var(--muted); font:700 9px/1 "Courier New",monospace; letter-spacing:.17em; }
.directory-layout { display:grid; grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr); }
.agent-form { padding:clamp(26px,3vw,44px); border-right:1px solid var(--line); background:linear-gradient(150deg,#131916,#0c100e); }
.form-index,.agent-list-label { color:var(--acid); font:700 9px/1 "Courier New",monospace; letter-spacing:.16em; }
.agent-form h3 { margin:18px 0 28px; font:400 27px/1.1 Georgia,serif; }
.agent-form label { display:block; margin:19px 0; }
.agent-form label > span { display:block; margin-bottom:9px; color:#aeb7b1; font:700 9px/1 "Courier New",monospace; letter-spacing:.12em; text-transform:uppercase; }
.agent-form input,.agent-form select { width:100%; min-height:46px; border:1px solid var(--line); outline:0; color:var(--paper); background:#0b0f0d; padding:0 13px; transition:border-color .2s,box-shadow .2s; }
.agent-form input:focus,.agent-form select:focus { border-color:var(--acid); box-shadow:0 0 0 2px rgba(217,255,67,.08); }
.agent-form small { color:var(--muted); display:block; margin-top:7px; font-size:9px; }
.agent-form-row { display:grid; grid-template-columns:1.4fr .6fr; gap:10px; }
.add-agent-button { width:100%; min-height:52px; margin-top:8px; border:1px solid var(--acid); color:var(--ink); background:var(--acid); cursor:pointer; font:700 10px/1 "Courier New",monospace; letter-spacing:.1em; text-transform:uppercase; }
.add-agent-button span { font-size:19px; vertical-align:-1px; margin-right:8px; }.add-agent-button:disabled { opacity:.45; cursor:wait; }
.directory-notice { min-height:34px; margin:14px 0 0; color:var(--muted); font-size:10px; line-height:1.5; }.directory-notice.success { color:var(--acid); }.directory-notice.error { color:#ff8c85; }
.agent-list-panel { min-width:0; padding:clamp(26px,3vw,44px); }
.agent-list-label { display:flex; justify-content:space-between; align-items:center; padding-bottom:18px; border-bottom:1px solid var(--line); }
.agent-list-label button { color:var(--muted); border:0; background:none; cursor:pointer; font:700 9px/1 "Courier New",monospace; letter-spacing:.12em; text-transform:uppercase; }.agent-list-label button:hover { color:var(--acid); }
.agent-roster { display:grid; }
.agent-row { display:grid; grid-template-columns:minmax(160px,1.1fr) minmax(155px,.9fr) minmax(120px,.7fr) auto; gap:18px; align-items:center; min-height:88px; border-bottom:1px solid rgba(48,58,53,.7); transition:background .2s; }
.agent-row:hover { background:rgba(255,255,255,.018); }
.agent-identity { display:flex; align-items:center; gap:13px; min-width:0; }.agent-identity > i { flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--muted); }.agent-row.available .agent-identity > i { background:var(--acid); box-shadow:0 0 13px rgba(217,255,67,.5); }.agent-row.reserved .agent-identity > i,.agent-row.dialing .agent-identity > i,.agent-row.busy .agent-identity > i { background:var(--amber); box-shadow:0 0 13px rgba(255,184,77,.4); }
.agent-identity strong,.agent-route-meta strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 16px/1.3 Georgia,serif; }.agent-identity small,.agent-route-meta small { display:block; margin-top:5px; color:var(--muted); font:700 8px/1 "Courier New",monospace; letter-spacing:.1em; text-transform:uppercase; }
.agent-phone { color:var(--paper); font:400 12px/1.4 "Courier New",monospace; text-decoration:none; white-space:nowrap; }.agent-phone:hover { color:var(--acid); }
.agent-route-meta strong { font:700 9px/1.3 "Courier New",monospace; letter-spacing:.08em; text-transform:uppercase; }
.agent-row-actions { display:flex; gap:7px; justify-content:flex-end; }.agent-row-actions button { min-height:34px; border:1px solid var(--line); background:#171d1a; color:#b9c1bc; cursor:pointer; padding:0 10px; font:700 8px/1 "Courier New",monospace; letter-spacing:.07em; text-transform:uppercase; }.agent-row-actions button:hover:not(:disabled) { border-color:var(--acid); color:var(--acid); }.agent-row-actions .remove-agent:hover:not(:disabled) { border-color:var(--red); color:#ff8c85; }.agent-row-actions button:disabled { opacity:.42; cursor:not-allowed; }
.agent-empty { color:var(--muted); margin:0; padding:48px 0; font:italic 17px/1.6 Georgia,serif; }

.lower-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 22px; margin-top: 22px; }
.transcript-card, .event-card, .activation-card { border: 1px solid var(--line); background: var(--panel); padding: clamp(25px, 3vw, 42px); }
.section-heading { display: flex; justify-content: space-between; align-items: start; border-bottom: 1px solid var(--line); }
.section-heading h2 { margin: 0 0 24px; }.section-heading .kicker { margin-bottom: 9px; }
.section-heading button { border: 0; background: none; color: var(--muted); cursor: pointer; font: 700 10px "Courier New", monospace; text-transform: uppercase; }
.transcript { min-height: 250px; max-height: 440px; overflow: auto; padding: 24px 0; }
.empty-state { color: var(--muted); font: italic 18px/1.6 Georgia, serif; }
.utterance { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 13px 0; border-bottom: 1px solid rgba(48,58,53,.55); }
.utterance strong { color: var(--cyan); font: 700 10px/1.6 "Courier New", monospace; text-transform: uppercase; letter-spacing: .1em; }
.utterance.user strong, .utterance.operator-note strong { color: var(--acid); }.utterance p { margin: 0; line-height: 1.6; }
.event-log { margin: 0; padding: 20px 0 0; list-style: none; max-height: 390px; overflow: auto; }
.event-log li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px 0; color: #aab2ad; font: 400 11px/1.4 "Courier New", monospace; border-bottom: 1px solid rgba(48,58,53,.45); }.event-log time { color: var(--acid); }
.activation-card { margin: 22px 0 80px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: linear-gradient(90deg, #151a17, #101410); }
.activation-card h2 { margin: 0; }.activation-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.activation-card li { color: var(--muted); font-size: 12px; padding-left: 26px; position: relative; }.activation-card li:before { content:"×"; position:absolute; left:0; color:var(--red); font:bold 16px "Courier New",monospace; }.activation-card li.ready { color: var(--paper); }.activation-card li.ready:before { content:"✓"; color:var(--acid); }
footer { width: 92vw; margin: 0 auto; border-top: 1px solid var(--line); padding: 24px 0 38px; display: flex; justify-content: space-between; color: var(--muted); font: 700 9px "Courier New", monospace; letter-spacing: .14em; }

@keyframes brandWave { to { height: 30%; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@media (max-width: 980px) {
  .topbar { height: auto; padding-top: 18px; padding-bottom: 18px; align-items: flex-start; }.topbar nav { gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
  .hero { grid-template-columns: 1fr; gap: 45px; }.hero-copy { justify-self: end; }
  .signal-rail { grid-template-columns: 1fr; gap: 18px; padding: 24px; }.rail-line { display:none; }
  .desk-grid, .lower-grid, .handoff-grid, .directory-layout { grid-template-columns: 1fr; }.dial-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .handoff-console { border-left:0; border-top:1px solid var(--line); padding:28px 0 0; }
  .agent-form { border-right:0; border-bottom:1px solid var(--line); }
  .agent-row { grid-template-columns:1fr 1fr; }.agent-row-actions { justify-content:start; }
  .activation-card { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 620px) {
  .topbar { display: block; }.topbar nav { margin-top: 18px; justify-content: flex-start; }.topbar nav a { font-size: 10px; }
  main { width: 94vw; }.hero { min-height: 280px; padding-top: 55px; }.desk-grid { border-left:0; border-right:0; }.dial-card,.live-card { padding: 28px 18px; }
  .setup-actions, .live-controls, .identity-strip { grid-template-columns: 1fr; }.identity-strip > div + div { border-left:0; border-top:1px solid var(--line); padding-left:0; }
  .switchboard { min-height: 300px; }.utterance { grid-template-columns: 1fr; gap: 4px; }
  .handoff-route { grid-template-columns:1fr; gap:8px; }.handoff-route > i { width:1px; height:18px; margin-left:24px; background:linear-gradient(var(--acid),var(--line)); }
  .handoff-actions { grid-template-columns:1fr; }.handoff-facts div { grid-template-columns:1fr; gap:3px; }
  .directory-heading { grid-template-columns:1fr; }.directory-stat { text-align:left; }.agent-form-row,.agent-row { grid-template-columns:1fr; }.agent-row { gap:10px; padding:20px 0; }.agent-row-actions { display:grid; grid-template-columns:1fr 1fr; }.agent-row-actions button { min-height:42px; }
  footer { display: grid; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; scroll-behavior: auto !important; } }