:root{
  --bg:#0C0F14;
  --surface:#151B23;
  --surface-2:#1C242F;
  --line:#2A3441;
  --line-soft:#222B36;
  --text:#EAF0F6;
  --muted:#8B99AB;
  --faint:#5E6B7C;
  --ready:#7E8DA0;
  --run:#FF7A1A;
  --run-dim:#3a2410;
  --done:#27D17C;
  --done-dim:#0f2e20;
  --danger:#FF5A5A;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;min-height:100vh;
  padding-bottom:env(safe-area-inset-bottom);
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit}
a{color:var(--run);text-decoration:none}

/* header */
.appbar{
  position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg, rgba(12,15,20,.97), rgba(12,15,20,.92));
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  padding:14px 16px;padding-top:max(14px, env(safe-area-inset-top));
}
.appbar .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.title{font-size:19px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin:0;white-space:nowrap}
.badge{
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--run);
  border:1px solid var(--run);border-radius:4px;padding:3px 7px;font-weight:600;white-space:nowrap;
}
.spacer{margin-left:auto}
.sub{margin-top:8px;font-family:var(--mono);font-size:12px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.live{display:inline-flex;align-items:center;gap:6px;color:var(--run)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--run);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,122,26,.5)}70%{box-shadow:0 0 0 7px rgba(255,122,26,0)}100%{box-shadow:0 0 0 0 rgba(255,122,26,0)}}

/* connection chip */
.conn{font-family:var(--mono);font-size:11px;display:inline-flex;align-items:center;gap:6px;color:var(--faint)}
.conn .d{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.conn.ok .d{background:var(--done)} .conn.ok{color:var(--done)}
.conn.off .d{background:var(--danger)} .conn.off{color:var(--danger)}

/* generic buttons */
.btn{font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:12px;border-radius:9px;padding:11px 15px;text-align:center;transition:.12s}
.btn-primary{background:var(--run);color:#0C0F14}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--surface-2);border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--faint)}
.btn-danger{background:transparent;border:1px solid var(--danger);color:var(--danger)}
.btn-danger:hover{background:rgba(255,90,90,.1)}
.btn-start{background:var(--ready);color:#0C0F14}
.btn-finish{background:var(--run);color:#0C0F14}
.mini{font-size:14px;line-height:1;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px 11px}
.mini:hover{color:var(--text);border-color:var(--faint)}

.timer{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.02em}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  padding:11px 18px;border-radius:10px;font-size:13px;font-weight:600;z-index:99;opacity:0;transition:.2s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* simple key prompt */
.keybar{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.keybar input{background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:8px 10px;font-size:13px;width:130px}
.keybar input:focus{outline:none;border-color:var(--run)}

.logo {
  text-align: center;
}

.evline {
  display: none;
}