body {
    background-color: #02080a;
    color: #b3f0ff;
    font-family: 'Share Tech Mono', monospace;
    /* Smooth dungeon vignette only — the grid and bars live in the blurred
       `.bars` layer so they read as soft, out-of-focus depth, not text noise. */
    background-image:
        radial-gradient(ellipse at 50% 35%, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
    background-size: 100% 100%;
    background-attachment: fixed;
    min-height: 100vh;
}

/* CRT scanline overlay. */
.scanlines {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 216, 255, 0.035) 3px,
        rgba(0, 0, 0, 0) 4px
    );
}

/* Cell bars — vertical containment bars sitting BEHIND the content so the
   page reads like a cell, while the (opaque) panels stay crisp on top. Each
   bar is shaded for a rounded, back-lit metal look. */
.bars {
    pointer-events: none;
    position: fixed;
    /* Over-sized so the blur has no soft gap at the viewport edges. */
    inset: -16px;
    z-index: 0;
    filter: blur(3px);
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 62px,
            rgba(0, 120, 150, 0.34) 62px,
            rgba(120, 232, 255, 0.30) 68px,
            rgba(200, 250, 255, 0.62) 73px,
            rgba(120, 232, 255, 0.30) 78px,
            rgba(0, 120, 150, 0.34) 84px,
            transparent 84px,
            transparent 92px
        ),
        linear-gradient(rgba(0, 216, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 216, 255, 0.05) 1px, transparent 1px);
    background-size: auto, 40px 40px, 40px 40px;
}
/* A pair of heavy horizontal rails to complete the cage. */
.bars::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 118px,
        rgba(0, 96, 122, 0.18) 118px,
        rgba(190, 248, 255, 0.22) 122px,
        rgba(0, 96, 122, 0.18) 126px,
        transparent 126px,
        transparent 240px
    );
}

.container {
    max-width: 680px;
    margin: 0 auto;
    padding: 40px 16px;
    position: relative;
    z-index: 1;
}
/* Wider layout for the side-by-side cell terminal + relay. */
.container-wide { max-width: 1040px; }

/* Two separate boxes, side by side and centred: terminal | echo relay. */
.terminal-grid {
    display: flex;
    gap: 24px;
    align-items: stretch;
    justify-content: center;
    margin-top: 8px;
}
.terminal-col {
    flex: 1 1 0;
    min-width: 0;
    max-width: 480px;
    margin: 0;
}
/* Higher specificity than `.status` so the auto-centring is not overridden. */
.status.sent-banner { max-width: 760px; margin: 16px auto; }
.centered-links { justify-content: center; border-top: none; }
@media (max-width: 780px) {
    .terminal-grid { flex-direction: column; align-items: center; }
    .terminal-col { width: 100%; max-width: 480px; }
}

.grid-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    letter-spacing: 12px;
    color: #00d8ff;
    text-align: center;
    text-shadow: 0 0 10px #00d8ff, 0 0 30px #0a5a6e;
    margin-bottom: 6px;
}

h2 {
    font-family: 'Orbitron', sans-serif;
    color: #3be3ff;
    text-align: center;
    font-size: 18px;
    text-shadow: 0 0 8px rgba(59, 227, 255, 0.7);
    margin-bottom: 6px;
}

.subtitle {
    text-align: center;
    color: rgba(179, 240, 255, 0.82);
    margin-bottom: 22px;
    font-size: 13px;
}

.hl { color: #00d8ff; text-shadow: 0 0 8px rgba(0, 216, 255, 0.7); }
code {
    color: #aef4ff;
    background: rgba(0, 216, 255, 0.14);
    padding: 1px 5px;
    border-radius: 3px;
}

/* ===== Sector brand header — a hazard-striped containment plate ===== */
.company-brand {
    position: relative;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    letter-spacing: 6px;
    font-size: 13px;
    color: #00d8ff;
    text-shadow: 0 0 10px rgba(0, 216, 255, 0.7);
    margin-bottom: 24px;
    padding: 10px 0 14px;
    border-bottom: 1px solid rgba(0, 216, 255, 0.45);
}
/* Caution chevrons flanking the sector name. */
.company-brand::before,
.company-brand::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 84px;
    height: 6px;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(0, 216, 255, 0.55) 0 6px,
        rgba(2, 20, 26, 0.0) 6px 12px
    );
}
.company-brand::before { left: 0; }
.company-brand::after { right: 0; }

/* ===== Identity disc visual ===== */
.disc {
    width: 160px;
    height: 160px;
    margin: 0 auto 28px;
    position: relative;
}
.disc-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 6px solid #00d8ff;
    box-shadow: 0 0 30px rgba(0, 216, 255, 0.7), inset 0 0 25px rgba(0, 216, 255, 0.4);
    background:
        repeating-conic-gradient(rgba(120, 230, 255, 0.6) 0deg 1.5deg, transparent 1.5deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 0 64px, #000 64px 72px, transparent 72px);
            mask: radial-gradient(circle, transparent 0 64px, #000 64px 72px, transparent 72px);
    animation: spin 8s linear infinite;
}
.disc-ring::before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    border: 2px solid rgba(0, 216, 255, 0.5);
}
.disc-core {
    position: absolute;
    inset: 52px;
    border-radius: 50%;
    background: radial-gradient(circle, #d6f8ff 0%, #00d8ff 55%, #0a5a6e 100%);
    box-shadow: 0 0 25px rgba(0, 216, 255, 0.9), inset 0 0 12px rgba(10, 90, 110, 0.6);
    border: 2px solid #d6f8ff;
}
.disc-core::after {
    content: "\2317"; /* viewdata square / grid mark */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #07313b;
    text-shadow: 0 0 4px rgba(214, 248, 255, 0.8);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Boxes — styled as containment panels bolted to the cell wall ===== */
.auth-box {
    position: relative;
    /* More opaque than before so text stays crisp in front of the bars. */
    background: rgba(4, 22, 28, 0.94);
    border: 1px solid rgba(0, 216, 255, 0.5);
    border-radius: 6px;
    padding: 28px 28px 30px;
    box-shadow:
        0 0 30px rgba(0, 216, 255, 0.14),
        inset 0 0 22px rgba(0, 216, 255, 0.06),
        0 8px 26px rgba(0, 0, 0, 0.6);
}
/* Containment corner brackets (top-left / bottom-right). */
.auth-box::before,
.auth-box::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    pointer-events: none;
    border: 2px solid rgba(120, 232, 255, 0.85);
}
.auth-box::before { top: 7px; left: 7px; border-right: none; border-bottom: none; }
.auth-box::after { bottom: 7px; right: 7px; border-left: none; border-top: none; }
.auth-box.wide { max-width: 680px; }
.override-box { border-color: rgba(0, 216, 255, 0.7); }

/* ===== Forms ===== */
.form-legend {
    color: #3be3ff;
    letter-spacing: 2px;
    font-size: 12px;
    margin: 4px 0 8px;
}
.form-control {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.78);
    border: 1px solid rgba(0, 216, 255, 0.5);
    color: #d6f8ff;
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    padding: 11px 13px;
    margin-bottom: 12px;
    border-radius: 4px;
    outline: none;
}
.form-control:focus {
    border-color: #00d8ff;
    box-shadow: 0 0 10px rgba(0, 216, 255, 0.5);
}
.textarea { resize: vertical; line-height: 1.5; }

.btn {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    letter-spacing: 3px;
    font-size: 14px;
    padding: 12px;
    border: 1px solid #00d8ff;
    border-radius: 4px;
    background: rgba(0, 216, 255, 0.12);
    color: #00d8ff;
    cursor: pointer;
    text-shadow: 0 0 8px rgba(0, 216, 255, 0.7);
    transition: all 0.15s ease;
}
.btn:hover {
    background: rgba(0, 216, 255, 0.28);
    box-shadow: 0 0 18px rgba(0, 216, 255, 0.6);
}
.btn-secondary {
    border-color: rgba(0, 216, 255, 0.5);
    background: rgba(0, 216, 255, 0.05);
    color: #7ff0ff;
}

.divider {
    text-align: center;
    color: rgba(179, 240, 255, 0.4);
    margin: 18px 0;
    font-size: 12px;
    letter-spacing: 2px;
}

/* ===== Alerts / status ===== */
.alert-warning {
    background: rgba(255, 90, 90, 0.1);
    border: 1px solid rgba(255, 90, 90, 0.6);
    color: #ff9b9b;
    padding: 11px 13px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 13px;
    text-align: center;
}
.status {
    text-align: center;
    padding: 12px;
    border-radius: 4px;
    margin: 16px 0;
    letter-spacing: 1px;
    font-size: 14px;
}
.status-online {
    color: #6effa8;
    border: 1px solid rgba(110, 255, 168, 0.5);
    background: rgba(110, 255, 168, 0.08);
    text-shadow: 0 0 8px rgba(110, 255, 168, 0.6);
}
.status-offline {
    color: rgba(179, 240, 255, 0.6);
    border: 1px solid rgba(0, 216, 255, 0.3);
    background: rgba(0, 216, 255, 0.04);
}

/* ===== Sent / preview ===== */
.preview { margin: 18px 0; }
.preview-label, .preview-body { font-size: 12px; }
.preview-label { color: #3be3ff; letter-spacing: 2px; margin-bottom: 6px; }
.preview-body {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 216, 255, 0.25);
    border-radius: 4px;
    padding: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    color: #9fdfe9;
}

/* ===== Relay info (the server you control) ===== */
.relay-info {
    margin: 18px 0 6px;
    padding: 16px 18px;
    border: 1px dashed rgba(0, 216, 255, 0.5);
    border-radius: 4px;
    background: rgba(0, 216, 255, 0.09);
}
.relay-title {
    font-family: 'Orbitron', sans-serif;
    color: #3be3ff;
    font-size: 12px;
    letter-spacing: 2px;
    margin: 8px 0 6px;
}
.relay-title:first-child { margin-top: 0; }
.relay-list {
    margin: 0 0 8px;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.7;
    color: rgba(179, 240, 255, 0.95);
}
.relay-heading {
    font-family: 'Orbitron', sans-serif;
    color: #00d8ff;
    font-size: 14px;
    letter-spacing: 3px;
    margin: 24px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 216, 255, 0.25);
    text-shadow: 0 0 8px rgba(0, 216, 255, 0.5);
}

/* ===== Data echo log — one block per captured echo, full data wraps ===== */
.echo-log {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}
.echo-entry {
    border: 1px solid rgba(0, 216, 255, 0.28);
    border-left: 3px solid rgba(0, 216, 255, 0.65);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.55);
    padding: 9px 11px;
    margin-bottom: 10px;
}
.echo-meta {
    font-size: 11px;
    letter-spacing: 1px;
    color: rgba(179, 240, 255, 0.7);
    margin-bottom: 5px;
}
.echo-data {
    color: #6effa8;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: anywhere;
    text-shadow: 0 0 6px rgba(110, 255, 168, 0.4);
}

/* ===== Guard console transmission render ===== */
.guard-body { background-color: #050204; }
.transmission {
    background: rgba(0, 0, 0, 0.62);
    border: 1px solid rgba(0, 216, 255, 0.35);
    border-radius: 4px;
    padding: 16px 18px;
    margin-top: 12px;
    color: #d6f8ff;
    line-height: 1.6;
}
.transmission a { color: #00d8ff; }

/* ===== Flag ===== */
.flag-box {
    text-align: center;
    margin: 18px 0;
    padding: 22px;
    border: 1px solid #6effa8;
    border-radius: 6px;
    background: rgba(110, 255, 168, 0.08);
    box-shadow: 0 0 25px rgba(110, 255, 168, 0.2);
}
.flag-label {
    font-family: 'Orbitron', sans-serif;
    color: #6effa8;
    letter-spacing: 3px;
    margin-bottom: 10px;
}
.flag-value {
    font-size: 18px;
    color: #d6ffe6;
    word-break: break-all;
    text-shadow: 0 0 10px rgba(110, 255, 168, 0.7);
}
.escape-note {
    margin-top: 12px;
    font-size: 12px;
    color: rgba(179, 240, 255, 0.6);
}

/* ===== Footer links ===== */
.console-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 216, 255, 0.2);
}
.override-link, .logout-link {
    color: #3be3ff;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 1px;
}
.override-link:hover, .logout-link:hover {
    color: #00d8ff;
    text-shadow: 0 0 8px rgba(0, 216, 255, 0.7);
}
.logout-link { color: rgba(179, 240, 255, 0.5); }

.sentinel-note {
    text-align: center;
    color: rgba(179, 240, 255, 0.62);
    font-size: 11px;
    margin-top: 18px;
}

/* ===== Button row + payload self-test preview ===== */
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; width: auto; }

.preview-wrap { margin-top: 16px; }
.preview-frame {
    width: 100%;
    height: 200px;
    border: 1px solid rgba(0, 216, 255, 0.4);
    border-radius: 4px;
    background: #02080a;
    box-shadow: inset 0 0 14px rgba(0, 216, 255, 0.12);
}

.checkpoint-wall {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2, 6, 10, 0.96);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    overflow-y: auto;
}

.checkpoint-box {
    width: 100%;
    max-width: 620px;
    background: rgba(4, 14, 20, 0.97);
    border: 1px solid rgba(0, 216, 255, 0.7);
    box-shadow: 0 0 40px rgba(0, 216, 255, 0.35), inset 0 0 30px rgba(0, 216, 255, 0.06);
    padding: 26px;
    text-align: center;
}

.checkpoint-img {
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 14px auto;
    border: 1px solid rgba(0, 216, 255, 0.45);
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

.checkpoint-picks { margin: 6px 0 4px; }

.pick-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.pick-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    color: #3be3ff;
    min-width: 88px;
    text-align: right;
}

.pick-btn {
    font-family: 'Share Tech Mono', monospace;
    font-size: 15px;
    min-width: 40px;
    padding: 7px 0;
    background: transparent;
    border: 1px solid rgba(0, 216, 255, 0.45);
    color: #b3f0ff;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pick-btn:hover { border-color: #00d8ff; color: #fff; }
.pick-btn.selected {
    background: #00d8ff;
    color: #02080a;
    border-color: #00d8ff;
    box-shadow: 0 0 14px rgba(0, 216, 255, 0.8);
}

.checkpoint-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.checkpoint-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 12px;
}

.checkpoint-msg {
    min-height: 20px;
    margin-top: 12px;
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
}
.checkpoint-msg.ok  { color: #2dff8a; text-shadow: 0 0 8px rgba(45, 255, 138, 0.7); }
.checkpoint-msg.bad { color: #ff5a5a; text-shadow: 0 0 8px rgba(255, 90, 90, 0.6); }

.pit-fixtures { display: none !important; }