/**
 * 皮肤设计令牌层 v2 —— 第一期：黑客帝国
 *
 * 以前「皮肤」= 换一个 --theme-accent，所以 14 个皮肤长得一模一样，只有颜色不同。
 * 这一层把皮肤升级成「一整套设计令牌 + 消费这些令牌的组件规则」：
 *
 *   1. 令牌：调色板 / 表面 / 描边 / 圆角 / 辉光 / 扫描线 / 等宽字体
 *   2. 同时覆盖应用已有的 --nano-* 令牌（全站组件本来就在消费它们）
 *   3. 组件规则：扫描线、四角框、标题提示符、终端按钮、HUD 数字、单词框
 *
 * 全部作用域限制在 .app-theme.skin-matrix：其他 13 个皮肤完全不受影响，
 * 回滚只需摘掉 index.html 里的引用。
 */

.app-theme.skin-matrix {
    /* ---------- 1. 皮肤自己的令牌（经典 Matrix 电影感：近黑底 + 荧光绿 + 冷白） ---------- */
    --skin-ink: #00ff41;
    --skin-ink-bright: #d8ffe0;
    --skin-ink-dim: #14b53a;
    --skin-ink-faint: #0d5c26;
    --skin-void: #02060a;
    --skin-surface: #061410;
    --skin-surface-2: #081b14;
    --skin-panel-soft: rgba(4, 18, 12, 0.72);
    --skin-line: rgba(0, 255, 65, 0.22);
    --skin-line-strong: rgba(0, 255, 65, 0.55);
    --skin-glow: 0 0 18px rgba(0, 255, 65, 0.22);
    --skin-glow-strong: 0 0 26px rgba(0, 255, 65, 0.4);
    --skin-radius: 3px;
    --skin-scan: 0.05;
    --skin-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ---------- 2. 覆盖应用令牌：这一步让「整个站」跟着皮肤变 ---------- */
    /* 页面底色留出透明度，代码雨才能从内容后面透出来（雨仍是 z-index:-1） */
    --nano-bg: rgba(2, 7, 10, 0.6);
    --nano-card: var(--skin-surface);
    --nano-panel: var(--skin-surface-2);
    --nano-line: var(--skin-line);
    --nano-text: #dcf7e4;
    --nano-sub: #63a97e;
    --nano-grid: rgba(0, 255, 65, 0.045);
    --nano-yellow: var(--skin-ink);
    --nano-yellow-dim: var(--skin-ink-dim);
    --theme-accent: var(--skin-ink);
    --theme-accent-rgb: 0, 255, 65;
    --theme-secondary-rgb: 13, 92, 38;
    --font-head: var(--skin-font-mono);

    background-color: var(--nano-bg);
    font-family: var(--font-body);
}

/* ---------- 3. 页面级氛围：扫描线 + 四角终端框 ---------- */
.app-theme.skin-matrix::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom,
            rgba(0, 255, 65, var(--skin-scan)) 0 1px,
            transparent 1px 3px);
    mix-blend-mode: screen;
}

.app-theme.skin-matrix::after {
    content: "";
    position: fixed;
    inset: 10px;
    z-index: 2;
    pointer-events: none;
    opacity: 0.75;
    background:
        linear-gradient(var(--skin-line-strong), var(--skin-line-strong)) 0 0 / 18px 1px no-repeat,
        linear-gradient(var(--skin-line-strong), var(--skin-line-strong)) 0 0 / 1px 18px no-repeat,
        linear-gradient(var(--skin-line-strong), var(--skin-line-strong)) 100% 0 / 18px 1px no-repeat,
        linear-gradient(var(--skin-line-strong), var(--skin-line-strong)) 100% 0 / 1px 18px no-repeat,
        linear-gradient(var(--skin-line-strong), var(--skin-line-strong)) 0 100% / 18px 1px no-repeat,
        linear-gradient(var(--skin-line-strong), var(--skin-line-strong)) 0 100% / 1px 18px no-repeat,
        linear-gradient(var(--skin-line-strong), var(--skin-line-strong)) 100% 100% / 18px 1px no-repeat,
        linear-gradient(var(--skin-line-strong), var(--skin-line-strong)) 100% 100% / 1px 18px no-repeat;
}

/* ---------- 4. 组件：把「终端」语言落到具体控件上 ---------- */

/* 卡片：硬边 + 内侧高光 + 角落切口 */
.app-theme.skin-matrix .hb-qcard,
.app-theme.skin-matrix .hb-panel,
.app-theme.skin-matrix .hb-stat,
.app-theme.skin-matrix .skin-card,
.app-theme.skin-matrix .poll-card,
.app-theme.skin-matrix .suggestion-card,
.app-theme.skin-matrix .achievement-card {
    border: 1px solid var(--skin-line) !important;
    border-radius: var(--skin-radius) !important;
    background:
        linear-gradient(180deg, rgba(0, 255, 65, 0.05), rgba(0, 0, 0, 0) 42%),
        var(--skin-panel-soft) !important;
    box-shadow: inset 0 1px 0 rgba(0, 255, 65, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.4);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.app-theme.skin-matrix .hb-qcard:hover,
.app-theme.skin-matrix .skin-card:hover {
    border-color: var(--skin-line-strong) !important;
    box-shadow: inset 0 1px 0 rgba(0, 255, 65, 0.18), var(--skin-glow);
    transform: translateY(-1px);
}

/* 标题：等宽 + 终端提示符 */
.app-theme.skin-matrix h1,
.app-theme.skin-matrix h2,
.app-theme.skin-matrix .hb-title,
.app-theme.skin-matrix .title {
    font-family: var(--skin-font-mono);
    letter-spacing: 0.01em;
}

.app-theme.skin-matrix h1::before,
.app-theme.skin-matrix h2::before {
    content: "> ";
    color: var(--skin-ink);
    opacity: 0.85;
}

/* 小标题/标签：等宽大写字距，像终端里的字段名 */
.app-theme.skin-matrix h5,
.app-theme.skin-matrix .hb-panel h5 {
    font-family: var(--skin-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* 按钮：硬边终端块，hover 反色 */
.app-theme.skin-matrix button,
.app-theme.skin-matrix .btn,
.app-theme.skin-matrix .btn-main {
    border-radius: var(--skin-radius) !important;
    font-family: var(--skin-font-mono);
    letter-spacing: 0.02em;
}

.app-theme.skin-matrix .btn:not(.btn-main):hover,
.app-theme.skin-matrix .hb-qcard button:hover {
    border-color: var(--skin-line-strong) !important;
    color: var(--skin-ink-bright) !important;
    box-shadow: var(--skin-glow);
}

/* 数字/统计：等宽 + 表格数字对齐 */
.app-theme.skin-matrix .hb-stat b,
.app-theme.skin-matrix .hb-goal b,
.app-theme.skin-matrix .speed-score b,
.app-theme.skin-matrix .speed-score strong {
    font-family: var(--skin-font-mono);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.25);
}

/* 侧栏导航：激活态用左侧亮条 + 底色，而不是整块高亮 */
.app-theme.skin-matrix nav a,
.app-theme.skin-matrix .hb-nav a,
.app-theme.skin-matrix .hb-nav-item {
    border-radius: var(--skin-radius);
    border-left: 2px solid transparent;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.app-theme.skin-matrix .hb-nav-item.is-active,
.app-theme.skin-matrix .hb-nav a.is-active,
.app-theme.skin-matrix nav a.is-active {
    border-left-color: var(--skin-ink);
    background: linear-gradient(90deg, rgba(0, 255, 65, 0.16), rgba(0, 255, 65, 0));
    color: var(--skin-ink-bright);
}

/* 输入框/下拉：终端风格 */
.app-theme.skin-matrix input:not([type="checkbox"]):not([type="radio"]),
.app-theme.skin-matrix select,
.app-theme.skin-matrix textarea {
    border: 1px solid var(--skin-line) !important;
    border-radius: var(--skin-radius) !important;
    background: rgba(2, 10, 7, 0.72) !important;
    font-family: var(--skin-font-mono);
    color: var(--skin-ink-bright);
}

.app-theme.skin-matrix input:focus,
.app-theme.skin-matrix select:focus,
.app-theme.skin-matrix textarea:focus {
    border-color: var(--skin-line-strong) !important;
    box-shadow: var(--skin-glow);
    outline: none;
}

/* 进度条：数据流质感 */
.app-theme.skin-matrix .hb-goal-bar,
.app-theme.skin-matrix .progress-bar,
.app-theme.skin-matrix .hb-progress {
    border-radius: 0;
    background: rgba(0, 255, 65, 0.1);
}

/* ---------- 5. 极速代码：单词框改成「终端行」 ---------- */
/* 中心聚焦：代码雨是氛围，不能让单词难读。这一层压在单词下方（z-index 5 < 单词的 10） */
.app-theme.skin-matrix .word-container::before {
    content: "";
    position: absolute;
    inset: -8% -6%;
    z-index: 5;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
            rgba(2, 7, 10, 0.94) 0%,
            rgba(2, 7, 10, 0.78) 42%,
            rgba(2, 7, 10, 0) 74%);
}

/* 上/下一个词：等宽 + 压暗，不与主词抢 */
.app-theme.skin-matrix .word.prev,
.app-theme.skin-matrix .word.next {
    font-family: var(--skin-font-mono);
    color: rgba(150, 220, 175, 0.75);
    text-shadow: 0 0 12px rgba(2, 7, 10, 0.95);
}

/* html.theme-matrix 里原来那套（黑底 + 2px 描边 + 外发光）在这里被覆盖 */
.app-theme.skin-matrix .word.curr::before {
    background: linear-gradient(180deg, rgba(0, 255, 65, 0.1), rgba(0, 0, 0, 0.85)) !important;
    border: 1px solid var(--skin-line-strong) !important;
    border-radius: var(--skin-radius) !important;
    inset: -6px -26px !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 22px rgba(0, 255, 65, 0.14) !important;
    backdrop-filter: none !important;
}

.app-theme.skin-matrix .word.curr {
    font-family: var(--skin-font-mono);
    letter-spacing: 0.02em;
}

/* 逐字符着色：已输入=亮绿、当前位=反色块光标、未输入=暗绿 */
/* 逐字符着色：已输入=亮绿、当前位=反色块光标、未输入=暗绿；
   原来的高亮覆盖层 .hl 与逐字符方案重复，这里关掉 */
.app-theme.skin-matrix .word.curr .hl {
    display: none !important;
}

.app-theme.skin-matrix .mx-word {
    display: inline-flex;
    align-items: baseline;
}

.app-theme.skin-matrix .mx-word .mx-done {
    color: var(--skin-ink);
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.45);
}

.app-theme.skin-matrix .mx-word .mx-cur {
    background: var(--skin-ink-bright);
    color: #04120a;
    border-radius: 1px;
    box-shadow: 0 0 12px rgba(216, 255, 224, 0.5);
}

.app-theme.skin-matrix .mx-word .mx-todo {
    color: rgba(120, 200, 150, 0.5);
}

/* 提示符：单词行左右各一个，形成「终端行」 */
.app-theme.skin-matrix .word-container .word.curr .mx-caret-l,
.app-theme.skin-matrix .word-container .word.curr .mx-caret-r {
    color: var(--skin-ink);
    opacity: 0.55;
    font-weight: 700;
}