:root {
  color-scheme: dark;
  --bg: #080b10;
  --panel: #11161e;
  --panel-2: #161d27;
  --line: #273140;
  --text: #f5f7fa;
  --muted: #98a5b7;
  --lime: #c8ff33;
  --green: #42d77d;
  --orange: #ff9f43;
  --red: #ff5d6c;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 5% -10%, rgba(200,255,51,.13), transparent 30rem),
    linear-gradient(145deg, #07090d 0%, #0a0f16 70%, #101720 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button { font: inherit; }
.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 64px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:48px; }
.brand { display:flex; align-items:center; gap:14px; }
.mark { width:46px; height:46px; display:grid; place-items:center; background:var(--lime); color:#080b10; font-weight:950; font-size:25px; transform:skew(-7deg); }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:0; font-size:22px; letter-spacing:-.02em; }
h2 { margin-bottom:10px; letter-spacing:-.035em; }
.eyebrow { margin-bottom:5px; color:var(--lime); font-size:11px; font-weight:850; letter-spacing:.16em; }
.top-actions { display:flex; align-items:center; gap:12px; }
.identity { color:var(--muted); font-size:14px; }
.button { border:1px solid var(--line); border-radius:10px; padding:11px 16px; cursor:pointer; transition:.18s ease; }
.button-primary { background:var(--lime); color:#080b10; border-color:var(--lime); font-weight:850; }
.button-primary:hover { transform:translateY(-1px); box-shadow:0 10px 30px rgba(200,255,51,.18); }
.button-ghost { color:var(--text); background:rgba(255,255,255,.02); }
.button-ghost:hover { border-color:#4a596e; }
.auth-card { width:min(560px,100%); margin:10vh auto 0; padding:40px; border:1px solid var(--line); border-radius:20px; background:rgba(17,22,30,.92); box-shadow:0 26px 80px rgba(0,0,0,.35); }
.auth-card h2 { font-size:32px; }
.auth-card > p:not(.eyebrow) { color:var(--muted); line-height:1.65; margin-bottom:26px; }
.error { color:#ffb0b7 !important; margin:18px 0 0 !important; }
.status-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.status-card { display:flex; align-items:center; gap:12px; padding:15px 16px; background:rgba(17,22,30,.85); border:1px solid var(--line); border-radius:14px; }
.status-card p { margin:0 0 2px; color:var(--muted); font-size:12px; }
.status-card strong { font-size:14px; }
.status-dot { width:10px; height:10px; flex:0 0 auto; border-radius:50%; background:var(--orange); box-shadow:0 0 0 5px rgba(255,159,67,.1); }
.status-dot.live { background:var(--green); box-shadow:0 0 0 5px rgba(66,215,125,.1); }
.status-dot.error { background:var(--red); box-shadow:0 0 0 5px rgba(255,93,108,.1); }
.status-dot.neutral { background:#748196; box-shadow:0 0 0 5px rgba(116,129,150,.1); }
.hero-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:14px; }
.call-card,.instructions,.recent-section { background:rgba(17,22,30,.9); border:1px solid var(--line); border-radius:18px; }
.call-card { min-height:390px; padding:28px; }
.call-header { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.call-header h2 { font-size:29px; margin-bottom:0; }
.badge { padding:7px 11px; border-radius:999px; font-size:12px; font-weight:850; }
.badge-idle { color:#bac4d2; background:#252d39; }
.badge-ringing { color:#1a0f00; background:var(--orange); }
.badge-connected { color:#04150a; background:var(--green); }
.badge-ended { color:#f5f7fa; background:#394457; }
.candidate-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 32px; padding:28px 0; }
.candidate-grid div { min-width:0; }
.candidate-grid span { display:block; color:var(--muted); font-size:12px; margin-bottom:7px; }
.candidate-grid strong { display:block; overflow-wrap:anywhere; font-size:17px; }
.call-note { margin:0; padding:14px 16px; border-radius:10px; color:#bac5d3; background:#0c1118; font-size:13px; line-height:1.5; }
.instructions { padding:28px; }
.instructions ol { margin:20px 0 30px; padding-left:22px; color:#d8dee8; }
.instructions li { padding:0 0 16px 6px; line-height:1.45; }
.instructions li::marker { color:var(--lime); font-weight:900; }
.safety-note { display:flex; flex-direction:column; gap:6px; padding:16px; border-radius:12px; background:#0b1017; border-left:3px solid var(--lime); }
.safety-note span { color:var(--muted); font-size:13px; line-height:1.45; }
.recent-section { margin-top:14px; padding:24px; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.section-title h2 { margin-bottom:0; font-size:22px; }
.table-wrap { overflow:auto; margin-top:20px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { color:var(--muted); text-align:left; font-weight:650; border-bottom:1px solid var(--line); padding:11px 12px; }
td { border-bottom:1px solid rgba(39,49,64,.7); padding:13px 12px; }
.empty { color:var(--muted); text-align:center; padding:30px; }

@media (max-width: 1050px) {
  .status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 820px) {
  .status-grid,.hero-grid { grid-template-columns:1fr; }
  .candidate-grid { grid-template-columns:1fr; gap:18px; }
  .topbar { margin-bottom:30px; }
  .identity { display:none; }
}

@media (max-width: 520px) {
  .shell { width:min(100% - 20px,1180px); padding-top:14px; }
  .auth-card,.call-card,.instructions,.recent-section { padding:22px; }
  .auth-card h2,.call-header h2 { font-size:25px; }
  .call-header { align-items:center; }
}