/* =================================================================
   cafe-sweets.xyz // PATISSERIE OS v2.4.7
   Terminal-Operated Confectionery Console
   ================================================================= */

:root {
    --c-void: #0A0E14;
    --c-phosphor: #10E0A8;
    --c-magenta: #FF3D9A;
    --c-orange: #FFB13F;
    --c-teal: #1ABFC9;
    --c-bone: #E8E5DA;
    --c-plum: #5C2A60;

    --font-display: "Jura", "Inter", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", "Space Mono", monospace;
    --font-ascii: "Space Mono", "IBM Plex Mono", monospace;

    --tracking: 0.18em;
    --tracking-tight: 0.08em;
    --tracking-wide: 0.24em;

    --panel-bg: rgba(10, 14, 20, 0.78);
    --panel-bg-warm: rgba(92, 42, 96, 0.18);
    --panel-border: rgba(26, 191, 201, 0.55);

    --tilt-x: 0deg;
    --tilt-y: 0deg;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-display);
    background: var(--c-void);
    color: var(--c-bone);
    font-feature-settings: "tnum" 1, "lnum" 1;
    -webkit-font-smoothing: antialiased;
    perspective: 1400px;
    perspective-origin: 50% 50%;
    cursor: crosshair;
}

/* =============================================================
   GRID OVERLAY
   ============================================================= */

.grid-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(232, 229, 218, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(232, 229, 218, 0.06) 1px, transparent 1px);
    background-size: 8px 8px;
    z-index: 4;
    animation: gridPulse 3.6s ease-in-out infinite;
}

.grid-major {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(26, 191, 201, 0.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26, 191, 201, 0.10) 1px, transparent 1px);
    background-size: 64px 64px;
    z-index: 5;
}

@keyframes gridPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 1.5; }
}

/* =============================================================
   BOKEH BACKGROUND (CSS-generated stand-in for the photograph)
   ============================================================= */

.bokeh-stage {
    position: fixed;
    inset: -8%;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 30% 35%, rgba(92, 42, 96, 0.85) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 70%, rgba(26, 191, 201, 0.45) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(255, 61, 154, 0.30) 0%, transparent 70%),
        linear-gradient(180deg, #0A0E14 0%, #15182a 50%, #1a0e2a 100%);
    transform: perspective(2000px) rotateX(8deg) rotateY(-6deg) rotateZ(-2deg) scale(1.08);
    filter: saturate(0.7);
    opacity: 0;
    transition: opacity 1.6s ease;
}

.bokeh-stage.live {
    opacity: 1;
}

.bokeh-layer {
    position: absolute;
    inset: 0;
    filter: blur(24px) saturate(0.9);
}

.bokeh-orb {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: screen;
    animation: bokehDrift 18s ease-in-out infinite;
}

.bokeh-orb.orb-1 {
    width: 320px; height: 320px;
    top: 8%; left: 12%;
    background: radial-gradient(circle, rgba(255, 177, 63, 0.55), transparent 65%);
    animation-delay: 0s;
}
.bokeh-orb.orb-2 {
    width: 260px; height: 260px;
    top: 60%; left: 22%;
    background: radial-gradient(circle, rgba(255, 61, 154, 0.50), transparent 65%);
    animation-delay: -2s;
}
.bokeh-orb.orb-3 {
    width: 380px; height: 380px;
    top: 14%; left: 60%;
    background: radial-gradient(circle, rgba(16, 224, 168, 0.32), transparent 65%);
    animation-delay: -4s;
}
.bokeh-orb.orb-4 {
    width: 200px; height: 200px;
    top: 70%; left: 78%;
    background: radial-gradient(circle, rgba(26, 191, 201, 0.55), transparent 65%);
    animation-delay: -6s;
}
.bokeh-orb.orb-5 {
    width: 160px; height: 160px;
    top: 40%; left: 8%;
    background: radial-gradient(circle, rgba(232, 229, 218, 0.30), transparent 65%);
    animation-delay: -8s;
}
.bokeh-orb.orb-6 {
    width: 240px; height: 240px;
    top: 80%; left: 45%;
    background: radial-gradient(circle, rgba(255, 177, 63, 0.40), transparent 65%);
    animation-delay: -10s;
}
.bokeh-orb.orb-7 {
    width: 300px; height: 300px;
    top: 25%; left: 82%;
    background: radial-gradient(circle, rgba(255, 61, 154, 0.45), transparent 65%);
    animation-delay: -12s;
}
.bokeh-orb.orb-8 {
    width: 180px; height: 180px;
    top: 55%; left: 50%;
    background: radial-gradient(circle, rgba(16, 224, 168, 0.40), transparent 65%);
    animation-delay: -14s;
}
.bokeh-orb.orb-9 {
    width: 140px; height: 140px;
    top: 18%; left: 38%;
    background: radial-gradient(circle, rgba(232, 229, 218, 0.50), transparent 65%);
    animation-delay: -3s;
}
.bokeh-orb.orb-10 {
    width: 220px; height: 220px;
    top: 88%; left: 12%;
    background: radial-gradient(circle, rgba(26, 191, 201, 0.45), transparent 65%);
    animation-delay: -5s;
}
.bokeh-orb.orb-11 {
    width: 280px; height: 280px;
    top: 5%; left: 90%;
    background: radial-gradient(circle, rgba(92, 42, 96, 0.85), transparent 65%);
    animation-delay: -7s;
}
.bokeh-orb.orb-12 {
    width: 120px; height: 120px;
    top: 48%; left: 65%;
    background: radial-gradient(circle, rgba(255, 177, 63, 0.60), transparent 65%);
    animation-delay: -9s;
}

@keyframes bokehDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%      { transform: translate(28px, -22px) scale(1.08); }
    50%      { transform: translate(-18px, 32px) scale(0.95); }
    75%      { transform: translate(22px, 14px) scale(1.05); }
}

.bokeh-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        transparent 30%,
        rgba(10, 14, 20, 0.55) 75%,
        rgba(10, 14, 20, 0.95) 100%);
    z-index: 2;
}

.bokeh-chromatic {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(255, 61, 154, 0.08), transparent 25%),
        radial-gradient(ellipse at 80% 70%, rgba(26, 191, 201, 0.08), transparent 25%);
    mix-blend-mode: screen;
    z-index: 3;
}

/* =============================================================
   BOOT SCREEN
   ============================================================= */

.boot-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--c-void);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 8vh 6vw;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.boot-screen.boot-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scaleY(0.001);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.7,0,.3,1);
}

.boot-inner {
    max-width: 90vw;
    font-family: var(--font-ascii);
}

.boot-ascii {
    color: var(--c-bone);
    font-size: clamp(13px, 1.1vw, 17px);
    line-height: 1.6;
    letter-spacing: 0.02em;
    white-space: pre-wrap;
    margin: 0;
    text-shadow: 0 0 8px rgba(232, 229, 218, 0.20);
}

.boot-ascii .ok { color: var(--c-phosphor); }
.boot-ascii .warn { color: var(--c-orange); }
.boot-ascii .mag { color: var(--c-magenta); }
.boot-ascii .teal { color: var(--c-teal); }

.boot-cursor {
    display: inline-block;
    color: var(--c-phosphor);
    font-family: var(--font-ascii);
    font-size: clamp(13px, 1.1vw, 17px);
    animation: cursorBlink 0.6s steps(1) infinite;
}

@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* =============================================================
   CRT FLIP TRANSITION
   ============================================================= */

.crt-flip {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 95;
    background: linear-gradient(
        180deg,
        rgba(255, 61, 154, 0.0) 0%,
        rgba(16, 224, 168, 0.0) 50%,
        rgba(255, 61, 154, 0.0) 100%
    );
    opacity: 0;
    transform: scaleY(1);
}

.crt-flip.flipping {
    animation: crtFlip 0.5s cubic-bezier(.7, 0, .3, 1) forwards;
}

@keyframes crtFlip {
    0%   { opacity: 1; background: rgba(232, 229, 218, 0.9); transform: scaleY(0.001); }
    40%  { opacity: 1; background: linear-gradient(180deg, rgba(255,61,154,0.8), rgba(16,224,168,0.8)); transform: scaleY(0.8); }
    100% { opacity: 0; background: transparent; transform: scaleY(1); }
}

/* =============================================================
   OPERATIONS STAGE
   ============================================================= */

.ops-stage {
    position: fixed;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.ops-stage.live {
    pointer-events: auto;
    opacity: 1;
}

/* =============================================================
   HUD PANELS
   ============================================================= */

.hud-panel {
    position: absolute;
    pointer-events: auto;
    transform-style: preserve-3d;
    opacity: 0;
    transition: transform 0.6s cubic-bezier(.16,1,.3,1),
                opacity 0.6s ease,
                filter 0.4s ease;
}

.ops-stage.live .hud-panel {
    opacity: 1;
}

/* Stagger positioning */
.panel-system    { top: 24px; left: 24px;  width: clamp(280px, 22vw, 340px); }
.panel-inventory { top: 24px; right: 24px; width: clamp(300px, 24vw, 380px); }
.panel-query     { top: 50%; left: 50%; width: clamp(420px, 42vw, 640px); transform: translate(-50%, -50%); }
.panel-telemetry { bottom: 80px; left: 24px; width: clamp(300px, 26vw, 380px); }
.panel-log       { bottom: 80px; right: 24px; width: clamp(320px, 26vw, 400px); }

/* Stagger entry */
.ops-stage.live .panel-system    { transition-delay: 0.00s, 0.00s, 0s; }
.ops-stage.live .panel-inventory { transition-delay: 0.08s, 0.08s, 0s; }
.ops-stage.live .panel-query     { transition-delay: 0.16s, 0.16s, 0s; }
.ops-stage.live .panel-telemetry { transition-delay: 0.24s, 0.24s, 0s; }
.ops-stage.live .panel-log       { transition-delay: 0.32s, 0.32s, 0s; }

/* Entry transforms */
.panel-system    { transform: translate(-60px, -60px) rotate(-3deg); }
.panel-inventory { transform: translate(60px, -60px) rotate(3deg); }
.panel-query     { transform: translate(-50%, -50%) scale(0.85); }
.panel-telemetry { transform: translate(-60px, 60px) rotate(3deg); }
.panel-log       { transform: translate(60px, 60px) rotate(-3deg); }

.ops-stage.live .panel-system    { transform: translate(0, 0) rotate(0deg); }
.ops-stage.live .panel-inventory { transform: translate(0, 0) rotate(0deg); }
.ops-stage.live .panel-query     { transform: translate(-50%, -50%) scale(1); }
.ops-stage.live .panel-telemetry { transform: translate(0, 0) rotate(0deg); }
.ops-stage.live .panel-log       { transform: translate(0, 0) rotate(0deg); }

.panel-frame {
    position: relative;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    backdrop-filter: blur(6px) saturate(1.4);
    -webkit-backdrop-filter: blur(6px) saturate(1.4);
    padding: 10px 14px 14px;
    transform-style: preserve-3d;
    transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 0.25s ease, border-color 0.3s ease;
    box-shadow:
        0 0 0 1px rgba(26, 191, 201, 0.10) inset,
        0 12px 40px rgba(10, 14, 20, 0.55),
        0 0 40px rgba(16, 224, 168, 0.06);
}

.hud-panel:hover .panel-frame {
    border-color: var(--c-phosphor);
    box-shadow:
        0 0 0 1px rgba(16, 224, 168, 0.40) inset,
        0 12px 40px rgba(10, 14, 20, 0.55),
        0 0 50px rgba(16, 224, 168, 0.18);
}

/* Internal grid lines (chartreuse) */
.panel-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(16, 224, 168, 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(16, 224, 168, 0.12) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.55;
}

/* Panel corners */
.panel-corner {
    position: absolute;
    width: 10px; height: 10px;
    border-color: var(--c-phosphor);
    border-style: solid;
    pointer-events: none;
}
.panel-corner.tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.panel-corner.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.panel-corner.bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.panel-corner.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* Panel head */
.panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(26, 191, 201, 0.45);
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.panel-tag {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: var(--tracking-wide);
    color: var(--c-magenta);
    padding: 2px 6px;
    background: rgba(255, 61, 154, 0.10);
    border: 1px solid rgba(255, 61, 154, 0.45);
}

.panel-title {
    flex: 1;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(11px, 0.9vw, 13px);
    letter-spacing: var(--tracking);
    color: var(--c-bone);
    text-transform: uppercase;
}

.panel-led {
    width: 8px; height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
    animation: ledBlink 1.4s ease-in-out infinite;
}
.led-green   { background: var(--c-phosphor); color: var(--c-phosphor); }
.led-cyan    { background: var(--c-teal);     color: var(--c-teal); animation-delay: 0.2s; }
.led-magenta { background: var(--c-magenta);  color: var(--c-magenta); animation-delay: 0.4s; }
.led-orange  { background: var(--c-orange);   color: var(--c-orange); animation-delay: 0.6s; }

@keyframes ledBlink {
    0%, 80%, 100% { opacity: 1; transform: scale(1); }
    90% { opacity: 0.35; transform: scale(0.9); }
}

.panel-body {
    font-family: var(--font-mono);
    font-size: clamp(11px, 0.85vw, 13px);
    line-height: 1.55;
    position: relative;
    z-index: 1;
}

/* =============================================================
   PANEL: SYSTEM STATUS
   ============================================================= */

.system-body { padding-top: 4px; }

.sys-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    border-bottom: 1px dotted rgba(26, 191, 201, 0.22);
}

.sys-key {
    color: var(--c-teal);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    font-size: 10.5px;
    text-transform: uppercase;
}

.sys-val {
    color: var(--c-bone);
    text-align: right;
    font-size: 11.5px;
}

.uptime {
    color: var(--c-phosphor);
    font-variant-numeric: tabular-nums;
}

.pulse-mag {
    color: var(--c-magenta);
    animation: textPulseMag 1.8s ease-in-out infinite;
}

@keyframes textPulseMag {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.sys-flag {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    background: rgba(16, 224, 168, 0.10);
    border: 1px solid rgba(16, 224, 168, 0.45);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: var(--tracking-wide);
    color: var(--c-phosphor);
    text-transform: uppercase;
}

.flag-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--c-phosphor);
    box-shadow: 0 0 8px var(--c-phosphor);
    animation: ledBlink 1s ease-in-out infinite;
}

.sys-donut {
    margin-top: 10px;
    color: var(--c-orange);
    font-family: var(--font-ascii);
    font-size: 10px;
    line-height: 1.15;
    text-align: left;
    text-shadow: 0 0 4px rgba(255, 177, 63, 0.5);
    opacity: 0.85;
}

/* =============================================================
   PANEL: INVENTORY
   ============================================================= */

.inv-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(26, 191, 201, 0.40);
}

.inv-total-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: var(--tracking-wide);
    color: var(--c-teal);
}

.inv-total-val {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(24px, 2.5vw, 36px);
    letter-spacing: 0.04em;
    color: var(--c-phosphor);
    text-shadow: 0 0 10px rgba(16, 224, 168, 0.55);
    font-variant-numeric: tabular-nums;
}

.inv-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.inv-item {
    display: grid;
    grid-template-columns: 36px 1fr 50px;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.inv-item:hover {
    background: rgba(255, 61, 154, 0.10);
    border-left-color: var(--c-magenta);
}

.inv-item.is-active {
    background: rgba(16, 224, 168, 0.12);
    border-left-color: var(--c-phosphor);
}

.inv-item.is-highlight {
    animation: invHighlight 1.2s ease-out;
}

@keyframes invHighlight {
    0% { background: rgba(255, 177, 63, 0.40); }
    100% { background: transparent; }
}

.inv-glyph {
    color: var(--c-orange);
    font-family: var(--font-ascii);
    font-size: 11px;
    text-align: center;
    letter-spacing: 0;
}

.inv-name {
    color: var(--c-bone);
    font-size: 11px;
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
}

.inv-count {
    color: var(--c-phosphor);
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 600;
}

.inv-foot {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(26, 191, 201, 0.40);
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    letter-spacing: var(--tracking-tight);
}

.inv-foot-key { color: var(--c-teal); font-weight: 600; }
.inv-foot-val { color: var(--c-bone); font-variant-numeric: tabular-nums; }

/* =============================================================
   PANEL: ACTIVE QUERY (center)
   ============================================================= */

.panel-query .panel-frame {
    padding: 14px 18px 18px;
    background: rgba(10, 14, 20, 0.86);
    border-color: rgba(16, 224, 168, 0.60);
    box-shadow:
        0 0 0 1px rgba(16, 224, 168, 0.30) inset,
        0 24px 80px rgba(10, 14, 20, 0.75),
        0 0 60px rgba(255, 61, 154, 0.10);
}

.query-prompt {
    font-family: var(--font-mono);
    font-size: clamp(13px, 1.15vw, 16px);
    line-height: 1.5;
    color: var(--c-bone);
    word-break: break-word;
    min-height: 1.5em;
}

.query-host { color: var(--c-magenta); }
.query-sep  { color: var(--c-bone); margin: 0 2px; }
.query-path { color: var(--c-teal); }
.query-text { color: var(--c-phosphor); text-shadow: 0 0 6px rgba(16, 224, 168, 0.45); }

.query-cursor {
    display: inline-block;
    color: var(--c-phosphor);
    text-shadow: 0 0 8px var(--c-phosphor);
    animation: cursorBlink 0.6s steps(1) infinite;
    margin-left: 2px;
}

.query-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 4px 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: var(--tracking-wide);
    color: var(--c-orange);
    opacity: 0;
    background: rgba(255, 177, 63, 0.10);
    border: 1px dashed rgba(255, 177, 63, 0.40);
    transition: opacity 0.2s ease;
}

.query-status.live { opacity: 1; }

.qs-led {
    width: 6px; height: 6px;
    background: var(--c-orange);
    box-shadow: 0 0 6px var(--c-orange);
    animation: ledBlink 0.5s ease-in-out infinite;
}

.qs-label { color: var(--c-orange); }
.qs-time  { margin-left: auto; color: var(--c-phosphor); font-variant-numeric: tabular-nums; }

.query-table {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 11px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.query-table.live { opacity: 1; }

.query-table th {
    text-align: left;
    color: var(--c-teal);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    padding: 4px 6px;
    border-bottom: 1px solid rgba(26, 191, 201, 0.45);
    font-size: 10px;
    text-transform: uppercase;
}

.query-table td {
    padding: 3px 6px;
    border-bottom: 1px dotted rgba(26, 191, 201, 0.18);
    color: var(--c-bone);
}

.query-table tr td:first-child { color: var(--c-magenta); }
.query-table tr td:last-child  { color: var(--c-phosphor); }

.query-table tr {
    opacity: 0;
    transform: translateX(-12px);
    animation: rowIn 0.3s ease forwards;
}

.query-table tr:nth-child(1) { animation-delay: 0.05s; }
.query-table tr:nth-child(2) { animation-delay: 0.10s; }
.query-table tr:nth-child(3) { animation-delay: 0.15s; }
.query-table tr:nth-child(4) { animation-delay: 0.20s; }
.query-table tr:nth-child(5) { animation-delay: 0.25s; }

@keyframes rowIn {
    to { opacity: 1; transform: translateX(0); }
}

.query-hint {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: var(--tracking-wide);
    color: var(--c-bone);
    opacity: 0.75;
}

.hint-key {
    color: var(--c-orange);
    margin-right: 4px;
}

/* =============================================================
   PANEL: TELEMETRY (bottom-left)
   ============================================================= */

.telem-row {
    display: grid;
    grid-template-columns: 80px 1fr 60px;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px dotted rgba(26, 191, 201, 0.22);
}

.telem-row:last-child { border-bottom: none; }

.telem-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: var(--tracking);
    color: var(--c-teal);
    text-transform: uppercase;
}

.telem-wave {
    width: 100%;
    height: 28px;
    background: rgba(10, 14, 20, 0.55);
    border: 1px solid rgba(26, 191, 201, 0.25);
}

.telem-val {
    font-family: var(--font-mono);
    font-size: 11px;
    text-align: right;
    color: var(--c-bone);
    font-variant-numeric: tabular-nums;
}

.pulse-target.spike {
    color: var(--c-orange);
    text-shadow: 0 0 8px var(--c-orange);
    animation: textSpike 0.2s ease-out;
}

@keyframes textSpike {
    0%   { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* =============================================================
   PANEL: LOG TAIL (bottom-right)
   ============================================================= */

.log-body {
    max-height: 180px;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--c-bone);
    position: relative;
}

.log-line {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1px 0;
    animation: logIn 0.3s ease;
}

@keyframes logIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.log-time { color: var(--c-teal); }
.log-tag-ok    { color: var(--c-phosphor); }
.log-tag-warn  { color: var(--c-orange); }
.log-tag-mag   { color: var(--c-magenta); }
.log-tag-info  { color: var(--c-bone); }

/* =============================================================
   ARTICULATED ARM
   ============================================================= */

.arm-svg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 14;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.arm-svg.live {
    opacity: 1;
}

#armPath {
    stroke: var(--c-phosphor);
    filter: drop-shadow(0 0 2px var(--c-phosphor));
}

/* =============================================================
   DRILL-DOWN PANEL
   ============================================================= */

.drill-panel {
    position: fixed;
    top: 50%;
    right: -45vw;
    transform: translate(0, -50%) perspective(1400px) rotateY(8deg);
    width: 40vw;
    max-width: 540px;
    max-height: 78vh;
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    transition: right 0.32s cubic-bezier(.2,.9,.3,1),
                opacity 0.32s ease,
                transform 0.32s cubic-bezier(.2,.9,.3,1);
}

.drill-panel.live {
    right: 2vw;
    transform: translate(0, -50%) perspective(1400px) rotateY(-4deg);
    pointer-events: auto;
    opacity: 1;
}

.drill-frame {
    position: relative;
    background: rgba(10, 14, 20, 0.92);
    border: 1px solid var(--c-magenta);
    padding: 14px 18px 18px;
    box-shadow:
        0 0 0 1px rgba(255, 61, 154, 0.35) inset,
        -20px 12px 60px rgba(10, 14, 20, 0.7),
        0 0 60px rgba(255, 61, 154, 0.18);
    max-height: 78vh;
    overflow: hidden;
}

.drill-frame .panel-corner { border-color: var(--c-magenta); }
.drill-frame::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 61, 154, 0.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 61, 154, 0.10) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}

.drill-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(255, 61, 154, 0.45);
    margin-bottom: 12px;
    position: relative;
}

.drill-tag {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: var(--tracking-wide);
    color: var(--c-magenta);
    padding: 2px 6px;
    border: 1px solid rgba(255, 61, 154, 0.5);
}

.drill-id {
    font-family: var(--font-mono);
    color: var(--c-phosphor);
    font-size: 12px;
    flex: 1;
}

.drill-close {
    background: transparent;
    color: var(--c-orange);
    border: 1px solid rgba(255, 177, 63, 0.6);
    padding: 3px 8px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: var(--tracking-wide);
    transition: background 0.15s ease, color 0.15s ease;
}

.drill-close:hover {
    background: var(--c-orange);
    color: var(--c-void);
}

.drill-body {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    color: var(--c-bone);
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
    position: relative;
}

.drill-body::-webkit-scrollbar { width: 4px; }
.drill-body::-webkit-scrollbar-thumb { background: rgba(255, 61, 154, 0.5); }

.drill-line {
    display: block;
    opacity: 0;
    transform: translateX(-12px);
    animation: drillLineIn 0.35s ease forwards;
}

@keyframes drillLineIn {
    to { opacity: 1; transform: translateX(0); }
}

.drill-h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(20px, 2vw, 28px);
    letter-spacing: var(--tracking);
    color: var(--c-phosphor);
    text-transform: uppercase;
    margin: 6px 0 4px;
    text-shadow: 0 0 10px rgba(16, 224, 168, 0.45);
}

.drill-meta {
    color: var(--c-teal);
    font-size: 10px;
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.drill-section-title {
    color: var(--c-magenta);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin: 14px 0 4px;
    border-bottom: 1px dotted rgba(255, 61, 154, 0.4);
    padding-bottom: 3px;
}

.drill-kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    border-bottom: 1px dotted rgba(232, 229, 218, 0.10);
}

.drill-k { color: var(--c-teal); font-weight: 600; font-size: 11px; }
.drill-v { color: var(--c-bone); text-align: right; font-size: 11px; }
.drill-v.hot { color: var(--c-orange); }
.drill-v.cool { color: var(--c-phosphor); }

.drill-protocol {
    margin: 6px 0 0;
    padding-left: 14px;
}

.drill-protocol li {
    list-style: none;
    position: relative;
    padding: 2px 0;
    color: var(--c-bone);
    font-size: 11.5px;
}

.drill-protocol li::before {
    content: ">";
    position: absolute;
    left: -12px;
    color: var(--c-phosphor);
}

/* =============================================================
   MISSION OVERLAY
   ============================================================= */

.mission-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(10, 14, 20, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mission-overlay.live {
    opacity: 1;
    pointer-events: auto;
}

.mission-doc {
    width: min(680px, 88vw);
    max-height: 86vh;
    background:
        linear-gradient(180deg, rgba(232, 229, 218, 0.02), rgba(232, 229, 218, 0.05)),
        rgba(10, 14, 20, 0.96);
    border: 1px solid var(--c-orange);
    padding: 22px 28px 22px;
    color: var(--c-bone);
    font-family: var(--font-mono);
    overflow-y: auto;
    box-shadow:
        0 0 0 1px rgba(255, 177, 63, 0.30) inset,
        0 30px 100px rgba(10, 14, 20, 0.85),
        0 0 80px rgba(255, 177, 63, 0.10);
    transform: scale(0.94);
    transition: transform 0.3s cubic-bezier(.2,.9,.3,1);
}

.mission-overlay.live .mission-doc {
    transform: scale(1);
}

.mission-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--c-orange);
}

.mission-classified {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: var(--tracking-wide);
    color: var(--c-orange);
    background: rgba(255, 177, 63, 0.10);
    padding: 3px 6px;
    border: 1px solid var(--c-orange);
}

.mission-stamp {
    flex: 1;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: var(--tracking);
    color: var(--c-bone);
    text-transform: uppercase;
}

.mission-close {
    background: transparent;
    border: 1px solid var(--c-magenta);
    color: var(--c-magenta);
    padding: 3px 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: var(--tracking-wide);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.mission-close:hover { background: var(--c-magenta); color: var(--c-void); }

.mission-h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 38px);
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: var(--c-bone);
    margin-bottom: 16px;
    text-shadow: 0 0 12px rgba(232, 229, 218, 0.15);
}

.mission-p {
    font-size: 13px;
    line-height: 1.65;
    margin-bottom: 12px;
    color: var(--c-bone);
}

.redact {
    background: var(--c-bone);
    color: var(--c-bone);
    padding: 0 6px;
    user-select: none;
    text-shadow: none;
    letter-spacing: 0;
    font-size: 0.92em;
    box-shadow: 0 0 0 1px var(--c-bone);
}

.hilite {
    color: var(--c-phosphor);
    text-shadow: 0 0 6px rgba(16, 224, 168, 0.5);
    font-weight: 600;
}

.mission-foot {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 177, 63, 0.5);
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    letter-spacing: var(--tracking);
    color: var(--c-teal);
}

.mission-sig { color: var(--c-magenta); }

/* =============================================================
   CORNER READOUTS
   ============================================================= */

.corner-readout {
    position: fixed;
    z-index: 12;
    padding: 4px 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: var(--tracking-wide);
    color: var(--c-bone);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease 0.4s;
}

.ops-stage.live ~ .corner-readout,
.ops-stage.live .corner-readout {
    opacity: 1;
}

.cr-tl { top: 6px; left: 50%; transform: translateX(-50%); }
.cr-tr { top: 6px; right: 12px; }
.cr-bl { bottom: 36px; left: 12px; }
.cr-br { bottom: 36px; right: 12px; }

.cr-tag { color: var(--c-teal); }
.cr-val { color: var(--c-bone); }

.pulse-rec { color: var(--c-magenta); animation: textPulseMag 1s ease-in-out infinite; }

/* =============================================================
   CROSSHAIR
   ============================================================= */

.crosshair {
    position: fixed;
    inset: 0;
    z-index: 13;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ops-stage.live ~ .crosshair,
.ops-stage.live .crosshair { opacity: 1; }

.crosshair-h, .crosshair-v {
    position: absolute;
    background: rgba(16, 224, 168, 0.18);
    pointer-events: none;
}

.crosshair-h { left: 0; right: 0; height: 1px; top: 0; }
.crosshair-v { top: 0; bottom: 0; width: 1px; left: 0; }

.crosshair-coord {
    position: absolute;
    top: 8px;
    left: 8px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: var(--tracking-tight);
    color: var(--c-phosphor);
    text-shadow: 0 0 4px var(--c-phosphor);
}

/* =============================================================
   SCANLINES + CRT VIGNETTE
   ============================================================= */

.scanlines {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(10, 14, 20, 0.0) 0px,
        rgba(10, 14, 20, 0.0) 2px,
        rgba(10, 14, 20, 0.18) 3px,
        rgba(10, 14, 20, 0.0) 4px
    );
    mix-blend-mode: multiply;
}

.crt-vignette {
    position: fixed;
    inset: 0;
    z-index: 49;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        transparent 60%,
        rgba(10, 14, 20, 0.40) 85%,
        rgba(10, 14, 20, 0.80) 100%
    );
}

/* =============================================================
   MARQUEE FOOTER
   ============================================================= */

.ops-marquee {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 24px;
    z-index: 20;
    background: rgba(255, 61, 154, 0.12);
    border-top: 1px solid var(--c-magenta);
    border-bottom: 1px solid var(--c-magenta);
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease 0.6s;
}

.ops-stage.live ~ .ops-marquee {
    opacity: 1;
}

.marquee-track {
    display: flex;
    gap: 32px;
    white-space: nowrap;
    height: 100%;
    align-items: center;
    padding-left: 100%;
    animation: marqueeScroll 36s linear infinite;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: var(--tracking-wide);
    color: var(--c-magenta);
    text-transform: uppercase;
}

.marquee-item { display: inline-block; }

@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 900px) {
    .panel-system    { top: 14px; left: 12px; width: 46vw; }
    .panel-inventory { top: 14px; right: 12px; width: 46vw; }
    .panel-query     { top: 50%; left: 50%; width: 90vw; }
    .panel-telemetry { bottom: 64px; left: 12px; width: 46vw; }
    .panel-log       { bottom: 64px; right: 12px; width: 46vw; }

    .panel-frame { padding: 8px 10px 10px; }
    .panel-body  { font-size: 10px; }
    .inv-list    { max-height: 130px; overflow-y: auto; }
    .drill-panel { width: 92vw; max-width: 92vw; }
    .drill-panel.live { right: 4vw; }
}

@media (max-width: 600px) {
    .panel-system, .panel-inventory, .panel-telemetry, .panel-log {
        width: calc(100vw - 24px);
        left: 12px; right: 12px;
    }
    .panel-system    { top: 8px; }
    .panel-inventory { top: auto; bottom: auto; display: none; }
    .panel-telemetry { display: none; }
    .panel-log       { display: none; }
    .panel-query { width: 92vw; }
    .corner-readout { display: none; }
}