:root {
    --bg: #1a1a1b;
    --panel: #232324;
    --fg: #f2f2f2;
    --muted: #9a9a9a;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --green: #22c55e;
    --red: #ef4444;
    --yellow: #eab308;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding-bottom: 24px;
}
main { max-width: 480px; margin: 0 auto; padding: 12px 16px; }
h1 { font-size: 22px; margin: 16px 0 12px; }
h2 { font-size: 19px; margin: 0 0 4px; }
h3 { font-size: 16px; margin: 0 0 4px; }
.muted { color: var(--muted); font-size: 13px; }
.error { color: var(--red); }
a { color: inherit; text-decoration: none; }

.topnav {
    display: flex; overflow-x: auto; gap: 4px; padding: 10px 12px;
    background: var(--panel); position: sticky; top: 0; z-index: 10;
}
.topnav a { padding: 8px 10px; font-size: 13px; white-space: nowrap; border-radius: 6px; }
.topnav a.logout { margin-left: auto; color: var(--red); }

.card {
    display: block;
    background: var(--panel);
    border-radius: 10px;
    padding: 14px;
    margin: 12px 0;
}
.card.centered { text-align: center; margin-top: 60px; }
.banner-warning { background: #4a3b0f; }
.banner-success { background: #163a24; }

label { display: block; font-size: 13px; color: var(--muted); margin: 8px 0 4px; }
input[type=text], input[type=tel], input[type=number], select, textarea {
    width: 100%; padding: 12px; border-radius: 8px; border: none;
    background: #2f2f31; color: var(--fg); font-size: 16px;
}
.pin-input { text-align: center; font-size: 28px; letter-spacing: 8px; }

.btn {
    display: inline-block; border: none; border-radius: 8px; padding: 14px 16px;
    font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 8px;
}
.btn-block { display: block; width: 100%; text-align: center; }
.btn-primary { background: var(--accent); color: white; }
.btn-secondary { background: #3a3a3b; color: var(--fg); }
.btn-dial { background: var(--green); color: white; font-size: 18px; text-align: center; }
.btn-flow { background: #2f2f5f; color: var(--fg); text-align: left; }
.btn-copy { background: var(--accent); color: white; padding: 12px 14px; }
.btn-remove { background: #3a3a3b; color: var(--red); }

.outcome-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 8px; }
.outcome-grid.two-col { grid-template-columns: 1fr 1fr; }
.btn-outcome { background: #3a3a3b; color: var(--fg); }
.btn-bad { background: #4a1f1f; color: var(--red); }
.btn-warm { background: var(--yellow); color: #1e1e1e; }
.btn-hot { background: var(--green); color: white; }
.btn-personal-vm { background: #5b3fa0; color: white; }

.timer-card { text-align: center; }
.timer { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; }

.flow-text { font-size: 16px; white-space: pre-wrap; }
.note-line { font-size: 13px; margin: 4px 0; }
.row-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row input { flex: 1; }

.progress-track {
    background: #2f2f31; border-radius: 6px; height: 10px; overflow: hidden; margin-top: 8px;
}
.progress-fill { background: var(--green); height: 100%; }