/* =============================================================================
   VSUP // CONTROL — mission-control terminal aesthetic
   Type: IBM Plex Mono + Plex Sans Condensed + Major Mono Display (brand mark)
   Palette: deep terminal black, sodium-amber, cyan accent, alarm magenta
============================================================================= */

:root {
    --bg-0: #07080b;
    --bg-1: #0b0d12;
    --bg-2: #11141d;
    --bg-3: #181c28;
    --border-0: #1d2230;
    --border-1: #2a3144;
    --border-2: #3a435a;

    --ink-0: #ede9d7;
    --ink-1: #c8c3ab;
    --ink-2: #8a8773;
    --ink-3: #5a5849;

    --amber: #ffb454;
    --amber-glow: rgba(255, 180, 84, 0.32);
    --cyan: #4fd1c5;
    --cyan-glow: rgba(79, 209, 197, 0.28);
    --green: #6ee7b7;
    --magenta: #f472b6;
    --red: #f87171;
    --red-glow: rgba(248, 113, 113, 0.36);
    --yellow: #fcd34d;

    /* Semantic aliases used by login.css and terminal.css.
       Without these, var() falls back to the property's initial value
       (transparent for backgrounds, none for borders) and the autofill
       override has no opaque colour to paint over the browser default. */
    --paper: var(--bg-0);
    --surface: var(--bg-2);
    --rule: var(--border-1);
    --muted: var(--ink-2);

    --shadow-panel: 0 24px 48px -24px rgba(0, 0, 0, 0.8);
    --shadow-card: 0 8px 22px -10px rgba(0, 0, 0, 0.65);

    --grid-line: rgba(255, 255, 255, 0.025);

    --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
        Menlo, Monaco, Consolas, monospace;
    --font-sans: "IBM Plex Sans Condensed", "Helvetica Neue", Helvetica, Arial,
        sans-serif;
    --font-display: "Major Mono Display", "IBM Plex Mono", monospace;
}

[x-cloak] {
    display: none !important;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-0);
    color: var(--ink-0);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.45;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* `overflow-x: hidden` on body promotes overflow-y to auto, which moves
   the scroll container to body and breaks `position: sticky` on .topbar
   (the navbar disappears when scrolling past the first viewport, e.g.
   when jumping to #terminal-section). Push horizontal clipping to html
   with `overflow-x: clip` so the body stays a non-scrolling block and
   the sticky navbar follows the scroll. */
html {
    overflow-x: clip;
}

body {
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 180, 84, 0.06), transparent 70%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(79, 209, 197, 0.04), transparent 70%),
        linear-gradient(180deg, var(--bg-0) 0%, #050608 100%);
    background-attachment: fixed;
    position: relative;
}

/* CRT scanlines — extremely subtle, animated drift */
.scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.015) 0px,
        rgba(255, 255, 255, 0.015) 1px,
        transparent 1px,
        transparent 3px
    );
    mix-blend-mode: overlay;
    animation: scan 11s linear infinite;
}

@keyframes scan {
    from { background-position-y: 0; }
    to   { background-position-y: 120px; }
}

.vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
        ellipse at center,
        transparent 50%,
        rgba(0, 0, 0, 0.55) 100%
    );
}

/* =================== Brand / Top bar ====================================== */
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 18px 28px;
    background: linear-gradient(180deg, rgba(11, 13, 18, 0.92), rgba(11, 13, 18, 0.78));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-0);
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.brand__name {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Orbitron', var(--font-display), monospace;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-0);
}

.brand__icon {
    font-size: 20px;
    color: var(--amber);
    text-shadow: 0 0 12px var(--amber-glow);
    animation: brand-glow 2.6s ease-in-out infinite;
}

@keyframes brand-glow {
    0%, 100% { text-shadow: 0 0 8px rgba(255, 180, 84, 0.40); }
    50%      { text-shadow: 0 0 18px rgba(255, 180, 84, 0.85); }
}

.brand__word {
    background: linear-gradient(180deg, #fff2c8 0%, var(--amber) 60%, #c98a2e 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 2px;
}

.brand__divider {
    color: var(--amber);
    font-weight: 700;
    margin: 0 4px;
    opacity: 0.7;
}

.brand__sub {
    color: var(--ink-1);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.20em;
}

.brand__rev {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 1px;
    color: var(--ink-3);
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid var(--border-1);
    border-radius: 2px;
}

.topbar__stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.2px;
    padding: 7px 12px;
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    color: var(--ink-1);
    clip-path: polygon(
        6px 0,
        100% 0,
        100% calc(100% - 6px),
        calc(100% - 6px) 100%,
        0 100%,
        0 6px
    );
}

.chip__dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink-3);
}

.chip--live .chip__dot {
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
    animation: pulse 1.6s ease-in-out infinite;
}

.chip--off .chip__dot {
    background: var(--red);
}

.chip__label.muted {
    color: var(--ink-3);
}

.chip__value {
    color: var(--ink-0);
    font-weight: 600;
}

.chip__value.ok {
    color: var(--green);
}

.chip__value.warn {
    color: var(--amber);
}

.chip__toggle {
    appearance: none;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 2px 8px;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: background 120ms, color 120ms;
}

.chip__toggle:hover:not(:disabled) {
    /* Tint the background with the current text colour instead of fully
       inverting (which produced unreadable black-on-bright-colour hovers
       for the AUTO-RESOLVE / FORCE-ESC chip). The text keeps its accent
       colour for legibility. */
    background: color-mix(in srgb, currentColor 16%, transparent);
}

.chip__toggle--on {
    color: var(--green);
}

.chip__toggle--off {
    color: var(--amber);
}

.chip__toggle--alarm {
    color: var(--red);
    border-style: dashed;
    animation: chip-alarm 1.4s ease-in-out infinite;
}

@keyframes chip-alarm {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

.chip--resolve .chip__value {
    color: var(--amber);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.chip--resolve:hover:not(:disabled) .chip__value {
    color: var(--green);
}

.chip--resolve:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.chip__toggle:disabled {
    color: var(--muted);
    cursor: not-allowed;
    border-style: dashed;
}

/* --- Auto Remediation switch (replaces the SCENARIO chip toggle) --- */
.switch {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.switch__track {
    position: relative;
    width: 34px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: color-mix(in srgb, currentColor 12%, transparent);
    transition: background 120ms ease, border-color 120ms ease;
}

.switch__knob {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: currentColor;
    transition: transform 140ms cubic-bezier(.4,.0,.2,1);
    box-shadow: 0 0 6px color-mix(in srgb, currentColor 60%, transparent);
}

.switch--on {
    color: var(--accent-soft, #4ade80);
}
.switch--on .switch__track {
    background: color-mix(in srgb, currentColor 20%, transparent);
}
.switch--on .switch__knob {
    transform: translateX(16px);
}

.switch--off {
    color: var(--alarm, #ef4444);
}
.switch--off .switch__knob {
    transform: translateX(0);
}

.switch__label {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    min-width: 1.9em;
    text-align: center;
}

.switch:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 3px;
    border-radius: 4px;
}

.chip--muted {
    opacity: 0.7;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.35); opacity: 0.6; }
}

/* =================== KPI strip ============================================ */
.kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 22px 28px 0 28px;
}

.kpi {
    position: relative;
    padding: 16px 18px;
    background:
        linear-gradient(180deg, rgba(255, 180, 84, 0.025), rgba(0, 0, 0, 0)) ,
        var(--bg-2);
    border: 1px solid var(--border-1);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    clip-path: polygon(
        10px 0,
        100% 0,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        0 100%,
        0 10px
    );
}

.kpi::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: var(--amber);
    opacity: 0.7;
}

.kpi--alert {
    border-color: var(--red);
    background:
        linear-gradient(180deg, rgba(248, 113, 113, 0.06), rgba(0, 0, 0, 0)),
        var(--bg-2);
    animation: alarm-pulse 1.8s ease-in-out infinite;
}

.kpi--alert::before {
    background: var(--red);
}

@keyframes alarm-pulse {
    0%, 100% { box-shadow: var(--shadow-card); }
    50%      { box-shadow: 0 0 22px var(--red-glow); }
}

.kpi__head {
    display: flex;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.6px;
    color: var(--ink-2);
    text-transform: uppercase;
}

.kpi__bracket {
    color: var(--amber);
}

.kpi__value {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 36px;
    font-weight: 300;
    color: var(--ink-0);
    line-height: 1.05;
}

.kpi__separator {
    color: var(--ink-3);
    margin: 0 4px;
}

.kpi__unit {
    font-size: 22px;
    color: var(--ink-2);
    margin-left: 4px;
}

.kpi__sub {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 1px;
    color: var(--ink-2);
    text-transform: uppercase;
}

.kpi--alert .kpi__sub {
    color: var(--red);
}

.tabular {
    font-variant-numeric: tabular-nums;
}

/* =================== Layout =============================================== */
.grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 18px;
    padding: 22px 28px 80px 28px;
}

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

.panel {
    position: relative;
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    box-shadow: var(--shadow-panel);
    padding: 20px 22px 24px 22px;
    overflow: hidden;
}

.panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
        linear-gradient(0deg, var(--grid-line) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: -1px -1px;
    opacity: 0.55;
}

.panel > * {
    position: relative;
}

.panel__head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 18px;
    border-bottom: 1px dashed var(--border-0);
    padding-bottom: 12px;
}

.panel__rule {
    color: var(--amber);
    font-family: var(--font-mono);
    letter-spacing: -2px;
    font-size: 11px;
    text-shadow: 0 0 6px var(--amber-glow);
}

.panel__title {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ink-0);
}

.panel__sub {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-3);
}

.empty {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-2);
    text-align: center;
    padding: 28px 12px;
    border: 1px dashed var(--border-1);
}

code {
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 1px 6px;
    background: var(--bg-3);
    color: var(--amber);
    border-radius: 2px;
}

/* =================== Host card ============================================ */
.host {
    display: block;
    margin-bottom: 18px;
    padding: 18px 18px 16px 18px;
    background:
        linear-gradient(180deg, rgba(79, 209, 197, 0.025), transparent 38%),
        var(--bg-2);
    border: 1px solid var(--border-1);
    box-shadow: var(--shadow-card);
    clip-path: polygon(
        10px 0,
        100% 0,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        0 100%,
        0 10px
    );
    transition: border-color 0.2s ease;
}

.host:last-child {
    margin-bottom: 0;
}

.host--down {
    border-color: var(--red);
    background:
        linear-gradient(180deg, rgba(248, 113, 113, 0.05), transparent 50%),
        var(--bg-2);
}

.host--alarm {
    border-color: var(--amber);
}

.host__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-0);
}

.host__id {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.host__bracket {
    font-family: var(--font-mono);
    color: var(--amber);
    font-size: 20px;
}

.host__name {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--ink-0);
    text-transform: uppercase;
}

.host__role {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 1.4px;
    color: var(--cyan);
    padding: 2px 7px;
    border: 1px solid var(--cyan);
    border-radius: 2px;
}

.host__state {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink-1);
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot--ok {
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
    animation: pulse 2.4s ease-in-out infinite;
}

.status-dot--err {
    background: var(--red);
    box-shadow: 0 0 8px var(--red);
}

.host__err {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--red);
    background: rgba(248, 113, 113, 0.06);
    padding: 12px;
    border-left: 2px solid var(--red);
    margin: 0;
}

.host__body {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 22px;
}

@media (max-width: 720px) {
    .host__body {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =================== Gauges =============================================== */
.gauges {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gauge {
    font-family: var(--font-mono);
}

.gauge__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ink-1);
}

.gauge__label {
    color: var(--ink-2);
}

.gauge__value {
    color: var(--ink-0);
    font-size: 12px;
    font-weight: 500;
}

.muted {
    color: var(--ink-3);
}

.gauge__bar {
    position: relative;
    height: 8px;
    background: var(--bg-3);
    border: 1px solid var(--border-0);
    overflow: hidden;
}

.gauge__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--cyan), var(--amber));
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 12px var(--cyan-glow);
}

.gauge--alert .gauge__fill {
    background: linear-gradient(90deg, var(--amber), var(--red));
    box-shadow: 0 0 14px var(--red-glow);
}

.gauge__threshold {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 1px;
    background: var(--ink-2);
    opacity: 0.5;
}

/* =================== Services ============================================= */
.services {
    border: 1px solid var(--border-0);
    background: var(--bg-3);
    padding: 12px 14px;
}

.services__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px dashed var(--border-1);
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.services__title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ink-2);
}

.services__hint {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
}

.services__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.service {
    display: grid;
    grid-template-columns: 16px minmax(80px, auto) auto 1fr;
    gap: 8px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.18);
    border-left: 2px solid transparent;
}

.service--critical {
    border-left-color: var(--amber);
}

.service--optional {
    border-left-color: var(--ink-3);
}

.service--down {
    border-left-color: var(--red);
    background: rgba(248, 113, 113, 0.08);
}

.service__marker {
    color: var(--amber);
}

.service--optional .service__marker {
    color: var(--ink-2);
}

.service--down .service__marker {
    color: var(--red);
}

.service__name {
    color: var(--ink-0);
    font-weight: 600;
    text-transform: lowercase;
}

.service__state {
    color: var(--green);
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 1px 7px;
    border: 1px solid var(--green);
    width: max-content;
}

.service--down .service__state {
    color: var(--red);
    border-color: var(--red);
}

.service__raw {
    font-size: 10.5px;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service--empty {
    grid-template-columns: 1fr;
    color: var(--ink-3);
    font-style: italic;
    border-left-color: var(--border-0);
}

/* =================== Right pane =========================================== */
.rightpane {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

/* =================== Chaos pad ============================================ */
.pad {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pad__btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 14px 14px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    color: var(--ink-0);
    text-align: left;
    cursor: pointer;
    font-family: var(--font-mono);
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
    clip-path: polygon(
        8px 0,
        100% 0,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        0 100%,
        0 8px
    );
}

.pad__btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(255, 255, 255, 0.02) 50%,
        transparent
    );
    pointer-events: none;
}

.pad__btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--amber);
    background: linear-gradient(180deg, rgba(255, 180, 84, 0.05), transparent),
        var(--bg-2);
}

.pad__btn:active:not(:disabled) {
    transform: translateY(0);
}

.pad__btn:disabled {
    opacity: 0.45;
    cursor: progress;
}

.pad__btn--cpu { --pad-accent: var(--cyan); }
.pad__btn--critical { --pad-accent: var(--red); }
.pad__btn--optional { --pad-accent: var(--yellow); }
.pad__btn--disk { --pad-accent: var(--magenta); }

.pad__btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--pad-accent);
    opacity: 0.6;
}

.pad__cmd {
    font-size: 10.5px;
    letter-spacing: 2px;
    color: var(--pad-accent);
    text-transform: uppercase;
}

.pad__name {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink-0);
    margin-top: 2px;
}

.pad__hint {
    font-size: 10.5px;
    color: var(--ink-2);
    letter-spacing: 0.5px;
    text-transform: lowercase;
    padding-right: 36px;
    line-height: 1.5;
}

.pad__icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 24px;
    color: var(--pad-accent);
    opacity: 0.35;
    line-height: 1;
}

/* =================== Toast (scenario feedback) ============================ */
.toast {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--bg-3);
    border: 1px solid var(--border-1);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-1);
    animation: slide-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.toast--ok {
    border-left: 3px solid var(--green);
}

.toast--err {
    border-left: 3px solid var(--red);
}

.toast strong {
    display: block;
    font-size: 11.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink-0);
    margin-bottom: 6px;
}

.toast__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toast__list li {
    display: grid;
    grid-template-columns: minmax(60px, auto) auto minmax(0, 1.2fr) minmax(0, 1.4fr) 36px;
    gap: 8px;
    align-items: baseline;
    font-size: 11px;
}

.toast__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}

.toast__ts {
    color: var(--ink-3);
    font-size: 11px;
    letter-spacing: 0.08em;
    font-family: 'IBM Plex Mono', monospace;
}

.toast__host { color: var(--cyan); }
.toast__arrow { color: var(--ink-3); }
.toast__target { color: var(--ink-0); }
.toast__detail { color: var(--ink-2); }
.toast__status {
    text-align: right;
    color: var(--green);
    letter-spacing: 1px;
}

.toast--err .toast__status {
    color: var(--red);
}

/* =================== BPMN timeline ======================================== */
.timeline {
    margin: 0;
    padding: 0 0 0 12px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 4px;
}

.timeline::-webkit-scrollbar {
    width: 6px;
}
.timeline::-webkit-scrollbar-track {
    background: var(--bg-2);
}
.timeline::-webkit-scrollbar-thumb {
    background: var(--border-2);
}

.evt {
    position: relative;
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 12px;
    padding: 10px 12px 10px 0;
    border-left: 1px solid var(--border-0);
    margin-left: 4px;
    animation: slide-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.evt__rail {
    position: absolute;
    top: 14px;
    left: -5px;
    width: 10px;
}

.evt__dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ink-3);
    box-shadow: 0 0 0 2px var(--bg-1);
}

.evt--running .evt__dot {
    background: var(--cyan);
    box-shadow: 0 0 0 2px var(--bg-1), 0 0 10px var(--cyan-glow);
    animation: pulse 1.2s ease-in-out infinite;
}

.evt--success .evt__dot {
    background: var(--green);
    box-shadow: 0 0 0 2px var(--bg-1), 0 0 8px rgba(110, 231, 183, 0.4);
}

.evt--failure .evt__dot {
    background: var(--red);
    box-shadow: 0 0 0 2px var(--bg-1), 0 0 10px var(--red-glow);
    animation: pulse 1.4s ease-in-out infinite;
}

.evt__body {
    min-width: 0;
    grid-column: 2;
    padding-left: 8px;
}

.evt__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.evt__time {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 1px;
}

.evt__job {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-0);
    letter-spacing: 1px;
}

.evt__status {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 1px 7px;
    border: 1px solid currentColor;
}

.evt--running .evt__status { color: var(--cyan); }
.evt--success .evt__status { color: var(--green); }
.evt--failure .evt__status { color: var(--red); }

.evt__meta {
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-1);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.evt__sep {
    color: var(--ink-3);
}

.evt__detail {
    margin: 8px 0 0 0;
    padding: 8px 10px;
    list-style: none;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-0);
    font-family: var(--font-mono);
    font-size: 11px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--ink-1);
}

.evt__detail li {
    display: flex;
    gap: 4px;
}

@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* =================== Bottom bar =========================================== */
.bottombar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding: 8px 28px;
    background: linear-gradient(0deg, var(--bg-0), rgba(11, 13, 18, 0.92));
    border-top: 1px solid var(--border-0);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ink-3);
}

.bottombar__col--center {
    text-align: center;
    color: var(--ink-1);
}

.bottombar__col--right {
    text-align: right;
}

/* =================== Alarm mode override ================================== */
body.is-alarm .topbar {
    border-bottom-color: var(--red);
}

body.is-alarm .brand__icon {
    color: var(--red);
    text-shadow: 0 0 18px var(--red-glow);
    animation: brand-glow 0.9s ease-in-out infinite;
}