/* ============================================================
   DKSan3 // DEEP_SPACE_UNION — TERMINAL OS v7
   工业机能美学设计系统
   结构：变量 → 基础 → 覆盖层 → HUD → 布局 → 组件 → 动画 → 响应式
   ============================================================ */

/* ────────────────────────── 设计 Token ────────────────────────── */
:root {
    /* 基础品牌色（CLASSIC） */
    --c-primary: #ff5a09;
    --c-accent: #00f0ff;
    --c-warn: #ffd23f;
    --c-ok: #37ff9b;
    --c-danger: #ff2d55;

    --c-bg: #030303;
    --c-bg-2: #070a0d;
    --c-panel: rgba(8, 12, 16, 0.72);
    --c-panel-solid: #05080b;
    --c-text: #c0c0c0;
    --c-text-dim: #6b7280;
    --c-border: rgba(255, 90, 9, 0.22);
    --c-border-strong: rgba(255, 90, 9, 0.55);
    --c-glow: rgba(255, 90, 9, 0.35);
    --c-glow-accent: rgba(0, 240, 255, 0.28);

    /* 字体 */
    --f-mono: 'Share Tech Mono', 'Noto Sans SC', monospace;
    --f-sans: 'Noto Sans SC', sans-serif;

    /* 布局 */
    --container: 1080px;
    --radius: 2px;
    --gap: 24px;

    /* 动画 */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast: 0.18s;
    --t-med: 0.32s;
    --t-slow: 0.6s;

    --scan-opacity: 0.16;
    --noise-opacity: 0.05;
}

/* ── 主题：AURORA 极光 ── */
html[data-theme="aurora"] {
    --c-primary: #b06bff;
    --c-accent: #7df9ff;
    --c-border: rgba(176, 107, 255, 0.22);
    --c-border-strong: rgba(176, 107, 255, 0.55);
    --c-glow: rgba(176, 107, 255, 0.32);
    --c-glow-accent: rgba(125, 249, 255, 0.26);
}

/* ── 主题：BLOOD 血红 ── */
html[data-theme="blood"] {
    --c-primary: #ff2d55;
    --c-accent: #ff9d5c;
    --c-border: rgba(255, 45, 85, 0.24);
    --c-border-strong: rgba(255, 45, 85, 0.6);
    --c-glow: rgba(255, 45, 85, 0.34);
    --c-glow-accent: rgba(255, 157, 92, 0.24);
}

/* ── 主题：GHOST 幽灵 ── */
html[data-theme="ghost"] {
    --c-primary: #e6e9ef;
    --c-accent: #7db4ff;
    --c-border: rgba(230, 233, 239, 0.18);
    --c-border-strong: rgba(230, 233, 239, 0.5);
    --c-glow: rgba(230, 233, 239, 0.22);
    --c-glow-accent: rgba(125, 180, 255, 0.22);
}

/* ────────────────────────── 基础 ────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-color: var(--c-primary) #0a0a0a; }

body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--f-mono);
    font-size: 15px;
    line-height: 1.7;
    overflow-x: hidden;
    transition: background var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
    min-height: 100vh;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--c-primary); color: #000; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--c-border-strong) 60%, transparent); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--c-primary); }

a { color: var(--c-primary); }
button { font-family: inherit; }

/* 焦点可见性（无障碍） */
:focus-visible {
    outline: 1px solid var(--c-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--c-glow-accent);
}

/* ────────────────────────── 3D 背景 ────────────────────────── */
#scene-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
}

/* ────────────────────────── CRT 覆盖层 ────────────────────────── */
/* 扫描线 */
.crt::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0, transparent 2px,
        rgba(0, 0, 0, var(--scan-opacity)) 2px, rgba(0, 0, 0, var(--scan-opacity)) 4px
    );
    mix-blend-mode: multiply;
}

/* 缓慢下移的亮度带 */
.crt::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    height: 120px;
    z-index: 9001;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.035), transparent);
    animation: crt-band 9s linear infinite;
}

/* 噪点 */
body::after {
    content: "";
    position: fixed;
    inset: -50%;
    z-index: 9002;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: var(--noise-opacity);
    animation: noise-shift 0.7s steps(4) infinite;
}

@keyframes crt-band {
    0% { top: -15%; }
    100% { top: 115%; }
}

@keyframes noise-shift {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-2%, 1%); }
    50% { transform: translate(1%, -2%); }
    75% { transform: translate(-1%, 2%); }
    100% { transform: translate(2%, -1%); }
}

/* ────────────────────────── 启动层 ────────────────────────── */
#boot-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s var(--ease);
}

#boot-screen.gone { opacity: 0; pointer-events: none; }

.boot-inner { width: min(640px, 88vw); }

.boot-art {
    color: var(--c-primary);
    font-size: 11px;
    line-height: 1.25;
    margin-bottom: 28px;
    text-shadow: 0 0 8px var(--c-glow);
    white-space: pre;
    overflow: hidden;
}

.boot-log {
    min-height: 190px;
    font-size: 13px;
    color: var(--c-text);
    white-space: pre-wrap;
    margin-bottom: 20px;
}

.boot-log .ok { color: var(--c-ok); text-shadow: 0 0 6px rgba(55, 255, 155, 0.5); }
.boot-log .warn { color: var(--c-warn); }
.boot-log .accent { color: var(--c-primary); }
.boot-log .dim { color: var(--c-text-dim); }

.boot-bar {
    height: 14px;
    border: 1px solid var(--c-border-strong);
    padding: 2px;
    margin-bottom: 14px;
    position: relative;
}

.boot-bar-fill {
    height: 100%;
    width: 0%;
    background: repeating-linear-gradient(90deg, var(--c-primary) 0 8px, transparent 8px 12px);
    box-shadow: 0 0 12px var(--c-glow);
    transition: width 0.2s linear;
}

.boot-hint {
    color: var(--c-text-dim);
    font-size: 12px;
    min-height: 1.4em;
    letter-spacing: 0.5px;
}

.boot-hint .blink { color: var(--c-primary); }

/* ────────────────────────── HUD 四角括号 ────────────────────────── */
.hud-corner {
    position: fixed;
    width: 26px;
    height: 26px;
    z-index: 500;
    pointer-events: none;
    border: 1px solid var(--c-border-strong);
    opacity: 0.6;
    transition: opacity var(--t-fast);
}

.hud-corner.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.hud-corner.tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.hud-corner.bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.hud-corner.br { bottom: 10px; right: 10px; border-left: none; border-top: none; }

/* ────────────────────────── 顶部状态栏 ────────────────────────── */
.hud-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 28px;
    font-size: 11px;
    letter-spacing: 1px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
    border-bottom: 1px solid transparent;
}

.hud-top.scrolled {
    background: linear-gradient(to bottom, rgba(2, 3, 5, 0.92), rgba(2, 3, 5, 0.4), transparent);
    border-bottom-color: var(--c-border);
}

.hud-left { display: flex; align-items: center; gap: 10px; }

.hud-badge {
    color: #000;
    background: var(--c-primary);
    padding: 2px 7px;
    font-weight: bold;
    box-shadow: 0 0 10px var(--c-glow);
    animation: badge-pulse 4s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 0 6px var(--c-glow); }
    50% { box-shadow: 0 0 16px var(--c-glow); }
}

.hud-id { color: var(--c-text); font-weight: bold; }

.hud-center { overflow: hidden; flex: 1; max-width: 420px; }

.hud-ticker {
    display: inline-block;
    white-space: nowrap;
    color: var(--c-text-dim);
    animation: ticker 26s linear infinite;
}

@keyframes ticker {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.hud-right { display: flex; align-items: center; gap: 14px; }

/* 语言切换按钮 */
.lang-btn {
    background: none;
    border: 1px solid var(--c-border);
    color: var(--c-text-dim);
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 3px 9px;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
}

.lang-btn:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
    box-shadow: 0 0 10px var(--c-glow-accent);
}

.hud-clock { color: var(--c-accent); text-shadow: 0 0 6px var(--c-glow-accent); font-variant-numeric: tabular-nums; }

/* 信号条 */
.hud-sig { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.hud-sig i {
    width: 3px;
    height: 3px;
    background: var(--c-border-strong);
    transition: all 0.3s var(--ease);
}
.hud-sig.on i { background: var(--c-ok); box-shadow: 0 0 4px rgba(55, 255, 155, 0.6); }
.hud-sig i:nth-child(1) { height: 3px; }
.hud-sig i:nth-child(2) { height: 5px; }
.hud-sig i:nth-child(3) { height: 7px; }
.hud-sig i:nth-child(4) { height: 9px; }
.hud-sig i:nth-child(5) { height: 11px; }
.hud-sig.degraded i { background: var(--c-warn); }
.hud-sig.lost i { background: var(--c-danger); }

/* ────────────────────────── 布局 ────────────────────────── */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 10;
}

/* ────────────────────────── 标题区 ────────────────────────── */
.title-block { padding: 150px 0 34px; }

.typewriter-text {
    color: var(--c-primary);
    font-size: 12px;
    margin-bottom: 18px;
    min-height: 3.4em;
    letter-spacing: 1px;
    text-shadow: 0 0 8px var(--c-glow);
    border-left: 2px solid var(--c-primary);
    padding-left: 14px;
    line-height: 1.9;
}

.main-title {
    font-size: clamp(2.6rem, 8vw, 4.6rem);
    color: #fff;
    line-height: 1.05;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.14);
}

.main-title-accent { color: var(--c-primary); text-shadow: 0 0 30px var(--c-glow); }

.main-sub {
    margin-top: 14px;
    color: var(--c-text-dim);
    font-size: 12px;
    letter-spacing: 1.5px;
}

/* ────────────────────────── Hero ────────────────────────── */
.hero { margin: 0 0 48px; }

.hero-frame {
    position: relative;
    border: 1px solid var(--c-border);
    background: var(--c-bg-2);
    overflow: hidden;
    min-height: 400px;
}

.hero-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 90, 9, 0.06), transparent 40%),
                linear-gradient(to top, rgba(3, 3, 3, 0.92), transparent 45%);
}

.hero-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0 3px,
        rgba(0, 0, 0, 0.12) 3px 4px
    );
    opacity: 0.5;
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    filter: grayscale(0.75) contrast(1.05);
    transform: scale(1.02);
    transition: filter var(--t-slow) var(--ease), transform 8s var(--ease);
    cursor: pointer;
}

.hero-frame:hover .hero-media {
    filter: grayscale(0.25) contrast(1.08);
    transform: scale(1.05);
}

.hero-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
}

/* 加载态 */
.hero-loading {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--c-text-dim);
    background: var(--c-bg-2);
}

.hero-loading .scan {
    color: var(--c-primary);
    animation: scan-x 1.4s ease-in-out infinite;
}

@keyframes scan-x {
    0% { transform: translateX(-14px); opacity: 0; }
    30% { opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translateX(14px); opacity: 0; }
}

.hero-loading.done { opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none; }

/* 影像信息 */
.hero-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hero-tag { color: var(--c-primary); font-size: 11px; letter-spacing: 2px; text-shadow: 0 0 8px var(--c-glow); }

.hero-title {
    color: #fff;
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: clamp(1.15rem, 3vw, 1.6rem);
    line-height: 1.45;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
}

.hero-sub { color: var(--c-text-dim); font-size: 10px; letter-spacing: 1.5px; }

/* ────────────────────────── 主网格 ────────────────────────── */
.main-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
}

/* ────────────────────────── 日志区 ────────────────────────── */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.section-title {
    color: var(--c-primary);
    font-size: 1rem;
    font-weight: normal;
    letter-spacing: 1px;
    text-shadow: 0 0 10px var(--c-glow);
}

.section-tools { display: flex; align-items: center; gap: 12px; }

.log-count { font-size: 10px; color: var(--c-text-dim); letter-spacing: 1px; }

.log-search {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    font-family: inherit;
    font-size: 12px;
    padding: 5px 10px;
    width: 170px;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.log-search::placeholder { color: var(--c-text-dim); }
.log-search:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 12px var(--c-glow-accent);
    outline: none;
}

/* 日志卡片 */
.log-list { display: flex; flex-direction: column; gap: 10px; min-height: 120px; }

.log-item {
    position: relative;
    display: grid;
    grid-template-columns: 88px 40px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 10px 16px 10px 10px;
    border: 1px solid var(--c-border);
    background: var(--c-panel);
    backdrop-filter: blur(4px);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--t-med) var(--ease),
                background var(--t-med) var(--ease),
                transform var(--t-med) var(--ease),
                box-shadow var(--t-med) var(--ease);
    animation: item-in 0.5s var(--ease) both;
}

@keyframes item-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 扫描线掠过 */
.log-item::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, var(--c-glow-accent), transparent);
    transform: skewX(-20deg);
    opacity: 0;
    transition: opacity var(--t-med);
    pointer-events: none;
}

.log-item:hover::before {
    opacity: 1;
    animation: card-scan 0.9s var(--ease) infinite;
}

@keyframes card-scan {
    0% { left: -60%; }
    100% { left: 130%; }
}

/* 当日影像缩略图 */
.log-thumb {
    position: relative;
    width: 88px;
    height: 56px;
    border: 1px solid var(--c-border);
    background-size: cover;
    background-position: center;
    filter: grayscale(0.6) contrast(1.05);
    overflow: hidden;
    flex-shrink: 0;
    transition: filter var(--t-med) var(--ease);
}

.log-item:hover .log-thumb { filter: grayscale(0.1) contrast(1.1); }

.log-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.28) 2px 3px);
    pointer-events: none;
}

/* 影像丢失：故障占位 */
.log-thumb.fail {
    background: radial-gradient(ellipse at 50% 45%, #101a24 0%, #05080c 70%, #000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    filter: none;
}

.log-thumb.fail::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
    animation: noise-shift 0.5s steps(3) infinite;
}

.log-thumb.fail::after {
    content: "SIGNAL_LOST";
    font-size: 7.5px;
    letter-spacing: 1px;
    color: var(--c-danger);
    border: 1px solid var(--c-danger);
    padding: 2px 4px;
    opacity: 0.85;
    background: none;
    animation: blink 1.6s steps(1) infinite;
}

/* 左侧序号竖条 */
.log-index {
    font-size: 10px;
    color: var(--c-text-dim);
    border-right: 1px solid var(--c-border);
    padding-right: 14px;
    text-align: right;
    letter-spacing: 1px;
}

.log-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.log-date { font-size: 10px; color: var(--c-text-dim); letter-spacing: 1px; }

.log-title {
    color: var(--c-text);
    font-size: 13px;
    font-family: var(--f-sans);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--t-fast);
}

.log-item:hover { border-color: var(--c-border-strong); transform: translateX(4px); }
.log-item:hover .log-title { color: #fff; }

.log-arrow { color: var(--c-primary); font-size: 12px; opacity: 0; transform: translateX(-6px); transition: all var(--t-med) var(--ease); }
.log-item:hover .log-arrow { opacity: 1; transform: translateX(0); }

.log-new .log-date::after {
    content: "NEW";
    margin-left: 8px;
    color: var(--c-ok);
    font-size: 9px;
    border: 1px solid var(--c-ok);
    padding: 0 4px;
    opacity: 0.8;
    animation: badge-pulse 3s ease-in-out infinite;
}

.log-empty { color: var(--c-text-dim); font-size: 12px; padding: 30px 0; text-align: center; }

/* ── 分页器 ── */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--c-border);
    flex-wrap: wrap;
}

.pager-btn {
    background: none;
    border: 1px solid var(--c-border);
    color: var(--c-text-dim);
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 7px 14px;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
}

.pager-btn:hover:not(:disabled) {
    border-color: var(--c-primary);
    color: var(--c-primary);
    box-shadow: 0 0 12px var(--c-glow);
}

.pager-btn:disabled { opacity: 0.3; cursor: default; }

.pager-pages { display: flex; gap: 4px; align-items: center; }

.pager-num {
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    color: var(--c-text-dim);
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
}

.pager-num:hover { color: var(--c-accent); border-color: var(--c-border); }

.pager-num.active {
    color: #000;
    background: var(--c-primary);
    border-color: var(--c-primary);
    box-shadow: 0 0 12px var(--c-glow);
    font-weight: bold;
}

.pager-ellipsis { color: var(--c-text-dim); font-size: 10px; padding: 0 2px; }

/* 信号失真标题 */
.log-title.degraded { color: var(--c-danger); font-style: normal; opacity: 0.9; }

.log-more { text-align: center; color: var(--c-text-dim); font-size: 11px; padding: 10px 0; letter-spacing: 2px; }
.log-more.hidden { display: none; }

/* ────────────────────────── 遥测侧栏 ────────────────────────── */
.telemetry { display: flex; flex-direction: column; gap: var(--gap); position: sticky; top: 90px; }

.panel {
    border: 1px solid var(--c-border);
    background: var(--c-panel);
    backdrop-filter: blur(6px);
    padding: 18px 18px 14px;
    font-size: 11px;
    position: relative;
}

.panel::after {
    content: "";
    position: absolute;
    top: -1px; left: -1px;
    width: 34px; height: 1px;
    background: var(--c-primary);
    box-shadow: 0 0 8px var(--c-glow);
}

.panel-title {
    color: var(--c-accent);
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 12px;
    text-shadow: 0 0 8px var(--c-glow-accent);
}

.panel-rows { display: flex; flex-direction: column; gap: 7px; }

.row { display: flex; justify-content: space-between; gap: 10px; }
.row dt { color: var(--c-text-dim); }
.row dd { color: var(--c-text); text-align: right; }
.row dd.ok { color: var(--c-ok); text-shadow: 0 0 6px rgba(55, 255, 155, 0.5); }

/* 控制按钮 */
.ctl-btn {
    display: block;
    width: 100%;
    background: none;
    border: 1px solid var(--c-border);
    color: var(--c-text);
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 1.5px;
    padding: 8px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    text-align: left;
    transition: all var(--t-fast) var(--ease);
}

.ctl-btn:hover, .ctl-btn.active {
    border-color: var(--c-primary);
    color: var(--c-primary);
    box-shadow: 0 0 14px var(--c-glow);
    transform: translateX(3px);
}

.ctl-link {
    display: block;
    color: var(--c-text-dim);
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 5px 0;
    transition: all var(--t-fast);
}

.ctl-link:hover { color: var(--c-primary); padding-left: 6px; text-shadow: 0 0 8px var(--c-glow); }

.panel-note p {
    color: var(--c-text-dim);
    font-size: 11px;
    line-height: 1.9;
    font-family: var(--f-sans);
}

.panel-note b { color: var(--c-accent); font-weight: 400; }

/* ────────────────────────── 页脚 ────────────────────────── */
.page-footer {
    margin-top: 90px;
    padding: 44px 0 130px;
    border-top: 1px solid var(--c-border);
    text-align: center;
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--c-text-dim);
}

.foot-sub { margin-top: 8px; opacity: 0.5; }

/* ────────────────────────── 日志阅读器 ────────────────────────── */
.reader {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(1, 4, 7, 0.97);
    backdrop-filter: blur(6px);
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.35s var(--ease);
}

.reader.show { opacity: 1; }
.reader.hide { opacity: 0; }

.reader-inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 90px 40px 120px;
    position: relative;
}

.reader-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 14px;
}

.reader-meta { display: flex; gap: 12px; }

.reader-tag { color: var(--c-primary); font-size: 10px; letter-spacing: 2px; text-shadow: 0 0 8px var(--c-glow); }

.reader-close {
    background: none;
    border: 1px solid var(--c-border-strong);
    color: var(--c-primary);
    font-family: inherit;
    font-size: 10px;
    padding: 6px 12px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all var(--t-fast);
}

.reader-close:hover { background: var(--c-primary); color: #000; box-shadow: 0 0 18px var(--c-glow); }

.reader-title {
    color: var(--c-accent);
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: clamp(1.3rem, 4vw, 1.9rem);
    line-height: 1.5;
    margin-bottom: 34px;
    text-shadow: 0 0 20px var(--c-glow-accent);
}

.reader-body {
    color: var(--c-text);
    font-size: 14.5px;
    line-height: 2.1;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--f-sans);
    outline: none;
    min-height: 30vh;
}

.reader-body > div { animation: para-in 0.5s var(--ease) both; }

/* 英文副本缺失提示 */
.reader-note {
    color: var(--c-warn);
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-warn);
    padding: 10px 14px;
    margin-bottom: 18px;
}

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

.reader-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 56px;
    border-top: 1px solid var(--c-border);
    padding-top: 20px;
}

.reader-nav {
    background: none;
    border: 1px solid var(--c-border);
    color: var(--c-text-dim);
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 1.5px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all var(--t-fast);
}

.reader-nav:hover:not(:disabled) {
    border-color: var(--c-primary);
    color: var(--c-primary);
    box-shadow: 0 0 12px var(--c-glow);
}

.reader-nav:disabled { opacity: 0.3; cursor: default; }

.reader-pos { color: var(--c-text-dim); font-size: 10px; letter-spacing: 2px; }

/* 阅读进度条 */
.reader-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 3001;
    background: transparent;
}

.reader-progress i {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
    box-shadow: 0 0 10px var(--c-glow);
    transition: width 0.15s linear;
}

/* ────────────────────────── 终端面板 ────────────────────────── */
.term-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 58px;
    z-index: 2000;
    max-height: 46vh;
    overflow-y: auto;
    background: rgba(2, 4, 6, 0.96);
    border-top: 1px solid var(--c-border-strong);
    backdrop-filter: blur(8px);
    padding: 18px 32px 22px;
    font-size: 12.5px;
    line-height: 1.9;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.6);
    animation: term-up 0.3s var(--ease);
}

@keyframes term-up {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.term-line { color: var(--c-text); white-space: pre-wrap; word-break: break-word; }
.term-line.cmd { color: var(--c-accent); }
.term-line.cmd::before { content: "❯ "; color: var(--c-primary); }
.term-line.err { color: var(--c-danger); }
.term-line.ok { color: var(--c-ok); }
.term-line.dim { color: var(--c-text-dim); }
.term-line.head { color: var(--c-primary); letter-spacing: 1px; }

/* 命令列表表格 */
.term-table { display: grid; grid-template-columns: 110px 1fr; gap: 2px 14px; margin: 6px 0; }
.term-table .k { color: var(--c-accent); }
.term-table .d { color: var(--c-text-dim); }

/* ────────────────────────── 底部命令栏 ────────────────────────── */
.cmd-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 28px;
    background: rgba(2, 3, 5, 0.92);
    border-top: 1px solid var(--c-border);
    backdrop-filter: blur(10px);
}

.cmd-prompt {
    color: var(--c-primary);
    font-size: 12px;
    white-space: nowrap;
    text-shadow: 0 0 8px var(--c-glow);
}

.cmd-input {
    flex: 1;
    background: none;
    border: none;
    color: var(--c-text);
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 0.5px;
    outline: none;
    caret-color: var(--c-accent);
}

.cmd-input::placeholder { color: var(--c-text-dim); }

.cmd-key {
    color: var(--c-text-dim);
    font-size: 10px;
    border: 1px solid var(--c-border);
    padding: 1px 6px;
    opacity: 0.7;
    user-select: none;
}

.cmd-bar.focused { border-top-color: var(--c-border-strong); box-shadow: 0 0 18px var(--c-glow); }

/* ────────────────────────── 左侧时间日期链 ────────────────────────── */
.timechain {
    position: fixed;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.tc-clock {
    font-size: 10px;
    color: var(--c-accent);
    letter-spacing: 1px;
    text-shadow: 0 0 8px var(--c-glow-accent);
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--c-border);
    padding: 3px 7px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
}

.tc-line {
    width: 1px;
    flex: 1;
    min-height: 40px;
    max-height: 220px;
    background: linear-gradient(to bottom, var(--c-border-strong), var(--c-border));
    position: relative;
    overflow: hidden;
}

.tc-line::after {
    content: "";
    position: absolute;
    left: 0;
    top: -30%;
    width: 100%;
    height: 30%;
    background: linear-gradient(to bottom, transparent, var(--c-primary), transparent);
    animation: tc-scan 5s linear infinite;
}

@keyframes tc-scan {
    0% { top: -30%; }
    100% { top: 130%; }
}

.tc-points {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
    max-height: 46vh;
    overflow-y: auto;
    scrollbar-width: none;
    padding: 4px 2px;
}

.tc-points::-webkit-scrollbar { display: none; }

.tc-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    opacity: 0.45;
    transition: opacity var(--t-fast);
    pointer-events: auto;
}

.tc-node:hover { opacity: 1; }
.tc-node.active { opacity: 1; }

.tc-node .dot {
    width: 7px;
    height: 7px;
    border: 1px solid var(--c-text-dim);
    transform: rotate(45deg);
    background: rgba(0, 0, 0, 0.6);
    transition: all var(--t-fast);
}

.tc-node.active .dot {
    border-color: var(--c-primary);
    background: var(--c-primary);
    box-shadow: 0 0 10px var(--c-glow);
}

.tc-node .label {
    font-size: 8px;
    letter-spacing: 1px;
    color: var(--c-text-dim);
    white-space: nowrap;
}

.tc-node.active .label { color: var(--c-primary); text-shadow: 0 0 6px var(--c-glow); }

/* 桌面窄屏 / 移动端隐藏 */
@media (max-width: 1280px) {
    .timechain { display: none; }
}

/* ────────────────────────── 通用 ────────────────────────── */
.blink { animation: blink 1s steps(1) infinite; }

/* 主内容首屏渐入 */
#main { opacity: 0; transform: translateY(14px); }
#main.ready { opacity: 1; transform: translateY(0); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }

/* Hero 定位闪烁（terminal apod 命令） */
.hero-frame.flash { animation: hero-flash 1.4s var(--ease); }

@keyframes hero-flash {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 90, 9, 0); }
    30% { box-shadow: 0 0 60px var(--c-glow); border-color: var(--c-primary); }
}

/* WebGL 不可用时的 CSS 星空降级 */
body.fallback-scene {
    background:
        radial-gradient(1px 1px at 22% 30%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 70% 15%, #cfd8ff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 40% 70%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 85% 55%, #9be8ff 50%, transparent 51%),
        radial-gradient(1px 1px at 10% 85%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 60% 45%, #cfd8ff 50%, transparent 51%),
        radial-gradient(ellipse at 50% 100%, #0a141d 0%, transparent 60%),
        #030303;
    background-repeat: repeat;
    background-size: 420px 420px, 500px 500px, 380px 380px, 560px 560px, 450px 450px, 520px 520px, 100% 100%, 100% 100%;
    animation: fallback-drift 240s linear infinite;
}

@keyframes fallback-drift {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    to { background-position: 420px 420px, 500px 500px, 380px 380px, 560px 560px, 450px 450px, 520px 520px, 0 0, 0 0; }
}

@keyframes blink { 50% { opacity: 0; } }

/* ────────────────────────── 响应式 ────────────────────────── */
@media (max-width: 860px) {
    .container { padding: 0 20px; }
    .main-grid { grid-template-columns: 1fr; }
    .telemetry { position: static; flex-direction: row; flex-wrap: wrap; }
    .telemetry .panel { flex: 1 1 200px; }
    .hero { margin-top: 100px; }
    .hero-frame { min-height: 300px; }
    .hud-center { display: none; }
    .reader-inner { padding: 70px 20px 90px; }
}

@media (max-width: 520px) {
    body { font-size: 14px; }
    .hud-top { padding: 12px 16px; }
    .hud-sig { display: none; }
    .cmd-bar { padding: 10px 16px; }
    .cmd-key { display: none; }
    .log-search { width: 130px; }
    .term-panel { padding: 14px 16px; }
    .hero-frame { min-height: 240px; }
    .boot-art { font-size: 9px; }
}

/* ────────────────────────── 动效偏好 ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .crt::after, body::after { display: none; }
}