*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            --bg: #f4f6f9; --surface: #ffffff; --surface-hover: #f0f2f5;
            --primary: #1e2a3a; --primary-light: #2c3e50;
            --accent: #3b6fa0; --accent-light: #e8eff7; --accent-hover: #2c5a84;
            --text: #1a2332; --text-secondary: #5a6a7a; --text-light: #5f6d7e;
            --border: #e2e6ec;
            --shadow: 0 4px 20px rgba(0,0,0,0.06); --shadow-lg: 0 12px 40px rgba(0,0,0,0.1);
            --radius: 12px; --radius-sm: 8px; --radius-xs: 4px;
            --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
            --font-size: 16px; --header-h: 64px;
            --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            --max-width: 1200px;
            --color-verb: #2e7d32; --color-noun: #1565c0; --color-adj: #e65100;
            --color-adv: #c62828; --color-numeral: #7b1fa2; --color-pron: #00838f;
            --color-prep: #4e342e; --color-conj: #37474f; --color-phr: #558b2f;
            --color-interj: #ad1457;
        }
        [data-theme="dark"] {
            --bg: #0f1419; --surface: #1a2332; --surface-hover: #222e3d;
            --primary: #e4e8ed; --primary-light: #c8d0da;
            --accent: #5a9fd4; --accent-light: #1a2e42; --accent-hover: #7ab8e8;
            --text: #e4e8ed; --text-secondary: #8a9aaa; --text-light: #5a6a7a;
            --border: #2a3a4a;
            --shadow: 0 4px 20px rgba(0,0,0,0.25); --shadow-lg: 0 12px 40px rgba(0,0,0,0.4);
        }
        [data-theme="cyber"] {
            --bg: #070b11; --surface: #11151d; --surface-hover: #1b202a;
            --primary: #ff5a63; --primary-light: #ff8a76;
            --accent: #27f4e5; --accent-light: rgba(39,244,229,0.12); --accent-hover: #ff5a63;
            --text: #f4f0e8; --text-secondary: #b9c5c8; --text-light: #7f9298;
            --border: rgba(255,90,99,0.34);
            --shadow: 0 0 0 1px rgba(39,244,229,0.08), 0 12px 34px rgba(0,0,0,0.36);
            --shadow-lg: 0 0 0 1px rgba(39,244,229,0.22), 0 20px 60px rgba(255,90,99,0.16);
        }
        html { font-size: var(--font-size); scroll-behavior: smooth; }
        body {
            font-family: var(--font); background: var(--bg); color: var(--text);
            line-height: 1.6; min-height: 100vh;
            -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
            padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
        }
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--text-light); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

        .header {
            position: sticky; top: 0; z-index: 100;
            border-bottom: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.03);
            backdrop-filter: blur(12px); background: rgba(255,255,255,0.92);
        }
        [data-theme="dark"] .header { background: rgba(26,35,50,0.92); }
        [data-theme="cyber"] body {
            background:
                radial-gradient(circle at 82% 14%, rgba(255,90,99,0.16), transparent 28rem),
                radial-gradient(circle at 18% 88%, rgba(39,244,229,0.10), transparent 32rem),
                linear-gradient(135deg, #070b11 0%, #150912 46%, #071018 100%);
        }
        [data-theme="cyber"] .header {
            background: rgba(8, 10, 16, 0.88);
            border-bottom-color: rgba(255,90,99,0.44);
            box-shadow: 0 0 22px rgba(255,90,99,0.16);
        }
        .header-inner {
            max-width: var(--max-width); margin: 0 auto; padding: 0 20px;
            height: var(--header-h); display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
        }
        .logo {
            display: flex; align-items: center; gap: 6px;
            font-weight: 700; font-size: 1.25rem; color: var(--primary);
            white-space: nowrap; user-select: none; flex-shrink: 0;
        }
        .logo span { color: var(--accent); }
        .logo svg { width: 28px; height: 28px; }
        .search-wrap { flex: 1; min-width: 120px; position: relative; margin: 0 8px; }
        .search-wrap input {
            width: 100%; padding: 8px 16px 8px 40px;
            border: 1.5px solid var(--border); border-radius: 24px;
            font-size: 0.9rem; background: var(--bg); color: var(--text);
            transition: var(--transition); outline: none; font-family: var(--font);
        }
        .search-wrap input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(59,111,160,0.12); }
        .search-wrap .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-light); pointer-events: none; font-size: 1rem; }
        .search-wrap .clear-btn {
            position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
            background: none; border: none; color: var(--text-light); cursor: pointer;
            font-size: 1.1rem; padding: 4px; display: none; border-radius: 50%; transition: var(--transition);
        }
        .search-wrap .clear-btn:hover { color: var(--text); background: var(--border); }
        .search-wrap .clear-btn.show { display: block; }
        .header-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
        .ctrl-btn {
            padding: 6px 14px; border: 1.5px solid var(--border); border-radius: 20px;
            background: var(--surface); color: var(--text); font-size: 0.8rem; font-weight: 500;
            cursor: pointer; transition: var(--transition); font-family: var(--font); white-space: nowrap;
        }
        .ctrl-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
        .ctrl-btn.active { border-color: var(--accent); background: var(--accent); color: #fff; }
        .font-control { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
        .font-control button {
            width: 30px; height: 30px; border: 1px solid var(--border); background: var(--surface);
            color: var(--text); border-radius: var(--radius-xs); cursor: pointer; font-size: 1rem;
            font-weight: 600; transition: var(--transition); display: flex; align-items: center;
            justify-content: center; font-family: var(--font);
        }
        .font-control button:hover { background: var(--surface-hover); border-color: var(--text-light); }
        .font-control .font-size-label { font-size: 0.75rem; color: var(--text-light); min-width: 32px; text-align: center; font-weight: 500; }
        .theme-select {
            min-height: 34px;
            padding: 6px 30px 6px 12px;
            border: 1.5px solid var(--border);
            border-radius: 18px;
            background: var(--surface);
            color: var(--text);
            font: 700 0.78rem var(--font);
            cursor: pointer;
            outline: none;
            transition: var(--transition);
        }
        .theme-select:hover, .theme-select:focus {
            border-color: var(--accent);
            background: var(--accent-light);
            color: var(--accent);
        }

        .filter-bar {
            position: sticky; top: var(--header-h); z-index: 99;
            background: var(--surface); border-bottom: 1px solid var(--border);
            padding: 8px 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.02);
        }
        [data-theme="dark"] .filter-bar { background: var(--surface); }

        /* ===== 折叠头条（常驻可见）===== */
        .filter-header {
            max-width: var(--max-width); margin: 0 auto;
            display: flex; align-items: center; gap: 10px;
        }
        .filter-toggle {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 5px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
            background: var(--surface); color: var(--text);
            font: 600 0.8rem var(--font); cursor: pointer; transition: var(--transition);
            min-height: 34px;
        }
        .filter-toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
        .filter-toggle:active { transform: scale(0.97); }
        .filter-toggle-chevron {
            display: inline-block; font-size: 0.6rem; transition: transform 0.22s ease;
            transform: rotate(0deg); line-height: 1;
        }
        .filter-toggle[aria-expanded="false"] .filter-toggle-chevron { transform: rotate(-90deg); }
        .filter-toggle-badge {
            display: inline-flex; align-items: center; justify-content: center;
            min-width: 18px; height: 18px; padding: 0 5px;
            background: var(--accent); color: #fff;
            border-radius: 9px; font-size: 0.65rem; font-weight: 700; line-height: 1;
        }
        .filter-toggle-badge[hidden] { display: none !important; }
        .filter-toggle[aria-expanded="false"] .filter-toggle-badge { background: var(--accent); }
        .filter-toggle[aria-expanded="true"] .filter-toggle-badge { background: var(--accent); }

        /* ===== 可折叠内容容器 ===== */
        .filter-collapsible {
            max-width: var(--max-width); margin: 0 auto;
            overflow: hidden;
            max-height: 800px;
            transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease, margin-top 0.22s ease;
            opacity: 1; margin-top: 8px;
        }
        .filter-collapsible.collapsed {
            max-height: 0; opacity: 0; margin-top: 0;
        }
        .filter-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .filter-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
        .filter-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; margin-right: 4px; white-space: nowrap; }
        .letter-filter { display: flex; gap: 3px; padding: 2px 0; flex-wrap: wrap; }
        .letter-filter button {
            flex: 0 0 auto; min-width: 28px; height: 28px; padding: 0 4px;
            border: 1px solid var(--border); background: var(--surface); color: var(--text);
            border-radius: var(--radius-xs); font-size: 0.7rem; font-weight: 500;
            cursor: pointer; transition: var(--transition); font-family: var(--font);
            display: flex; align-items: center; justify-content: center;
        }
        .letter-filter button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
        .letter-filter button.active { border-color: var(--accent); background: var(--accent); color: #fff; }
        .divider { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; }
        .select-filter {
            padding: 4px 12px 4px 8px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
            background: var(--surface); color: var(--text); font-size: 0.8rem;
            cursor: pointer; transition: var(--transition); font-family: var(--font); outline: none; min-height: 34px;
        }
        .select-filter:hover, .select-filter:focus { border-color: var(--accent); }
        .chip-filter { display: flex; flex-wrap: wrap; gap: 4px; }
        .filter-chip, .mode-toggle {
            min-height: 30px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
            border-radius: 5px; padding: 3px 8px; font: 600 0.72rem var(--font); cursor: pointer;
        }
        .filter-chip span { display: inline-block; min-width: 9px; margin-left: 3px; color: var(--text-light); }
        .filter-chip.include { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
        .filter-chip.include span { color: var(--accent); }
        .filter-chip.exclude { border-color: #c0392b; background: #fdf2f0; color: #a83225; text-decoration: line-through; }
        .filter-chip.exclude span { color: #a83225; }
        [data-theme="dark"] .filter-chip.exclude { background: rgba(192,57,43,0.16); }
        .mode-toggle { width: 30px; padding: 0; font-size: 1rem; }
        .mode-toggle[data-mode="exclude"] { border-color: #c0392b; color: #a83225; background: #fdf2f0; }
        .clear-filters-btn {
            padding: 4px 14px; border: 1.5px solid var(--border); border-radius: 16px;
            background: var(--surface); color: var(--text-secondary); font-size: 0.75rem;
            cursor: pointer; transition: var(--transition); font-family: var(--font); white-space: nowrap; font-weight: 500;
        }
        .clear-filters-btn:hover { border-color: #c0392b; color: #c0392b; background: #fdf2f0; }
        .clear-filters-btn:active { transform: scale(0.96); }
        .filter-count { font-size: 0.75rem; color: var(--text-light); margin-left: auto; white-space: nowrap; padding: 2px 8px; background: var(--bg); border-radius: 12px; }
        .active-tags { max-width: var(--max-width); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 20px 0; }
        .active-tags:empty { display: none; }
        .active-tag { display: flex; align-items: center; gap: 4px; padding: 2px 10px; background: var(--accent); color: #fff; border-radius: 12px; font-size: 0.7rem; font-weight: 500; animation: fadeIn 0.2s ease; }
        .active-tag button { background: none; border: none; color: #fff; cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0 2px; opacity: 0.8; transition: var(--transition); }
        .active-tag button:hover { opacity: 1; }
        .toolbar { max-width: var(--max-width); margin: 0 auto; padding: 12px 20px 4px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
        .toolbar-left { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-secondary); }
        .toolbar-right { display: flex; align-items: center; gap: 8px; }
        .sort-label { font-size: 0.75rem; color: var(--text-light); font-weight: 500; white-space: nowrap; }
        .main { max-width: var(--max-width); margin: 0 auto; padding: 8px 20px 20px; }
        .data-attribution { max-width: var(--max-width); margin: 0 auto; padding: 12px 20px 28px; color: var(--text-light); font-size: 0.72rem; line-height: 1.5; }
        .data-attribution a { color: inherit; }
        .word-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 8px; }
        .word-card {
            background: var(--surface); border-radius: var(--radius); padding: 18px 20px 16px;
            box-shadow: var(--shadow); border: 1px solid var(--border); cursor: pointer;
            transition: var(--transition); display: flex; flex-direction: column; gap: 6px; position: relative;
        }
        .word-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
        [data-theme="cyber"] .word-card {
            clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
            border-color: rgba(255,90,99,0.34);
        }
        [data-theme="cyber"] .word-card::before {
            content: "";
            position: absolute;
            left: 0; top: 12px; bottom: 12px; width: 3px;
            background: linear-gradient(var(--primary), var(--accent));
            box-shadow: 0 0 14px rgba(39,244,229,0.42);
        }
        .word-card:active { transform: scale(0.98); }
        .word-card .word-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .word-card .word-text { font-size: 1.4rem; font-weight: 700; color: var(--primary); line-height: 1.3; }
        .word-card .word-phonetic { font-size: 0.8rem; color: var(--text-light); font-weight: 400; }

        /* ===== Fix#5: .pos-tag 全局样式（卡片+详情页通用） ===== */
        .pos-tag {
            padding: 2px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap;
            background: var(--accent-light); color: var(--accent); border: 1px solid rgba(59,111,160,0.15);
        }
        .pos-tag.verb { background: #e8f5e9; color: var(--color-verb); border-color: rgba(46,125,50,0.15); }
        .pos-tag.noun { background: #e3f2fd; color: var(--color-noun); border-color: rgba(21,101,192,0.15); }
        .pos-tag.adj, .pos-tag.adjective { background: #fff3e0; color: var(--color-adj); border-color: rgba(230,81,0,0.15); }
        .pos-tag.numeral { background: #f3e5f5; color: var(--color-numeral); border-color: rgba(123,31,162,0.15); }
        .pos-tag.adv, .pos-tag.adverb { background: #fce4ec; color: var(--color-adv); border-color: rgba(198,40,40,0.15); }
        .pos-tag.pron, .pos-tag.pronoun { background: #e0f7fa; color: var(--color-pron); border-color: rgba(0,131,143,0.15); }
        .pos-tag.prep, .pos-tag.preposition { background: #efebe9; color: var(--color-prep); border-color: rgba(78,52,46,0.15); }
        .pos-tag.conj, .pos-tag.conjunction { background: #eceff1; color: var(--color-conj); border-color: rgba(55,71,79,0.15); }
        .pos-tag.phr { background: #f1f8e9; color: var(--color-phr); border-color: rgba(85,139,47,0.15); }
        .pos-tag.interj { background: #fce4ec; color: var(--color-interj); border-color: rgba(173,20,87,0.15); }
        [data-theme="dark"] .pos-tag { opacity: 0.85; }

        .word-card .meaning { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.4; margin-top: 2px; }
        .word-card .example { font-size: 0.82rem; color: var(--text-light); font-style: italic; padding: 6px 10px; background: var(--bg); border-radius: var(--radius-xs); margin-top: 4px; border-left: 3px solid var(--accent-light); line-height: 1.5; }
        .word-card .example .ex-trans { font-style: normal; color: var(--text-secondary); font-size: 0.78rem; display: block; margin-top: 2px; }
        .word-card .card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
        .word-card .card-footer .tags-row { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
        .word-card .card-footer .theme-tag { font-size: 0.65rem; padding: 1px 8px; border-radius: 8px; background: var(--bg); color: var(--text-light); border: 1px solid var(--border); }
        .word-card .card-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
        .word-card .card-actions button { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 4px; border-radius: 50%; transition: var(--transition); color: var(--text-light); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
        .word-card .card-actions button:hover { background: var(--bg); color: var(--accent); }
        .level-badge { font-size: 0.6rem; padding: 1px 6px; border-radius: 6px; font-weight: 600; position: absolute; top: 8px; right: 10px; }
        .level-badge.beginner { background: #e8f5e9; color: #2e7d32; }
        .level-badge.intermediate { background: #fff3e0; color: #e65100; }
        .level-badge.advanced { background: #fce4ec; color: #c62828; }
        .level-badge.extra { background: #eef0f3; color: #5a6470; border: 1px solid var(--border); }
        .word-card-extra { border-style: dashed; }
        .word-card-extra::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none; background: linear-gradient(135deg, rgba(90,100,112,0.04), transparent 42%); }
        .theme-tag.theme-more { background: var(--accent-light); color: var(--accent); border-color: rgba(59,111,160,0.16); font-weight: 600; }
        .empty-state { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--text-light); }
        .empty-state .empty-icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.5; }
        .empty-state p { font-size: 1rem; }
        .empty-state .hint { font-size: 0.85rem; margin-top: 4px; opacity: 0.7; }
        .pagination { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 20px 0; flex-wrap: wrap; }
        .pagination button { min-width: 36px; height: 36px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.82rem; font-weight: 500; transition: var(--transition); font-family: var(--font); display: flex; align-items: center; justify-content: center; padding: 0 10px; }
        .pagination button:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
        .pagination button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
        .pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
        .load-more-btn { min-height: 42px; border: 1px solid var(--border); background: var(--surface); color: var(--accent); border-radius: 6px; cursor: pointer; padding: 0 18px; font: 600 0.84rem var(--font); }
        .load-more-btn:hover { border-color: var(--accent); background: var(--accent-light); }
        .detail-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.35); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.2s ease; overscroll-behavior: contain; }
        .detail-overlay.open { display: flex; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .detail-modal { background: var(--surface); border-radius: var(--radius); max-width: 880px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 0; box-shadow: var(--shadow-lg); animation: slideUp 0.3s ease; position: relative; touch-action: pan-y; overscroll-behavior: contain; }
        .detail-header { position: sticky; top: 0; background: var(--surface); z-index: 10; padding: 20px 24px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
        .detail-header .dh-left { display: flex; flex-direction: column; gap: 2px; }
        .detail-header .dh-word { font-size: 2rem; font-weight: 700; color: var(--primary); line-height: 1.2; }
        .detail-header .dh-phonetic { font-size: 0.9rem; color: var(--text-light); }
        .detail-header .dh-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
        .detail-header .dh-controls { display: flex; gap: 6px; align-items: flex-start; flex-shrink: 0; margin-top: 4px; }
        .dh-ctrl-btn { width: 36px; height: 36px; border: none; background: var(--bg); border-radius: 50%; font-size: 1.2rem; cursor: pointer; color: var(--text-secondary); transition: var(--transition); display: flex; align-items: center; justify-content: center; }
        .dh-ctrl-btn:hover { background: var(--border); color: var(--text); }
        .detail-nav { display: flex; gap: 4px; align-items: center; }
        .detail-nav button { width: 32px; height: 32px; border: 1px solid var(--border); background: var(--surface); border-radius: 50%; cursor: pointer; color: var(--text-secondary); transition: var(--transition); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
        .detail-nav button:hover { background: var(--accent-light); color: var(--accent); }
        .detail-nav button:disabled { opacity: 0.3; cursor: not-allowed; }
        .detail-nav button[hidden] { display: none; }
        #detailBackBtn { width: auto; border-radius: 20px; padding: 0 10px; font-size: 0.78rem; font-weight: 500; white-space: nowrap; }
        .aspect-pair-link { color: var(--accent); text-decoration: underline; cursor: pointer; font-weight: 500; transition: var(--transition); }
        .aspect-pair-link:hover { color: var(--accent-hover); text-decoration: none; }
        .detail-body { padding: 20px 24px 28px; }
        .detail-meaning { font-size: 1.05rem; color: var(--text-secondary); margin-bottom: 20px; padding: 12px 16px; background: var(--bg); border-radius: var(--radius-sm); border-left: 4px solid var(--accent); }
        .detail-meaning .dm-lang { font-weight: 600; color: var(--text); margin-right: 6px; }
        .grammar-section { margin-bottom: 24px; }
        .grammar-section h3 { font-size: 0.95rem; font-weight: 600; color: var(--primary); margin-bottom: 10px; padding-bottom: 4px; border-bottom: 2px solid var(--accent-light); display: flex; align-items: center; gap: 8px; }
        .grammar-section h3 .gs-sub { font-weight: 400; font-size: 0.8rem; color: var(--text-light); }
        .grammar-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 4px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
        .grammar-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 480px; }
        .grammar-table th { background: var(--bg); color: var(--text-secondary); font-weight: 600; padding: 8px 12px; text-align: left; border-bottom: 2px solid var(--border); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
        .grammar-table td { padding: 7px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
        .grammar-table tr:last-child td { border-bottom: none; }
        .grammar-table tr:hover td { background: var(--surface-hover); }
        .grammar-table .case-name { font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
        .grammar-table .case-val { font-weight: 500; }
        .example-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
        .example-item { padding: 10px 14px; background: var(--bg); border-radius: var(--radius-sm); border-left: 3px solid var(--accent-light); font-size: 0.85rem; }
        .example-item .ex-src { font-style: italic; color: var(--text); }
        .example-item .ex-trans { color: var(--text-secondary); font-size: 0.82rem; margin-top: 2px; }
        .example-item .ex-grammar { font-size: 0.75rem; color: var(--accent); margin-top: 4px; font-weight: 500; background: var(--accent-light); padding: 2px 8px; border-radius: 4px; display: inline-block; }

        /* ===== 响应式 ===== */
        @media (max-width: 768px) {
            :root { --header-h: 56px; --font-size: 15px; }
            .header-inner { padding: 0 12px; gap: 6px; }
            .logo { font-size: 1.05rem; }
            .logo svg { width: 22px; height: 22px; }
            .search-wrap input { padding: 6px 12px 6px 34px; font-size: 0.82rem; }
            .search-wrap .search-icon { left: 10px; font-size: 0.85rem; }
            .ctrl-btn { padding: 6px 12px; font-size: 0.72rem; min-height: 36px; }
            .font-control button { width: 30px; height: 30px; font-size: 0.85rem; }
            .font-control .font-size-label { min-width: 24px; font-size: 0.65rem; }
            .filter-bar { padding: 6px 12px; }
            .filter-inner { gap: 6px; }
            .filter-toggle { padding: 4px 10px; font-size: 0.72rem; min-height: 32px; gap: 5px; }
            .filter-toggle-chevron { font-size: 0.55rem; }
            .filter-toggle-badge { min-width: 16px; height: 16px; font-size: 0.6rem; }
            .filter-collapsible { margin-top: 6px; }
            .filter-label { font-size: 0.65rem; }
            .letter-filter button { min-width: 30px; height: 30px; font-size: 0.7rem; }
            .select-filter { font-size: 0.72rem; padding: 4px 10px 4px 8px; min-height: 34px; }
            .filter-chip { gap: 3px; }
            .filter-chip, .mode-toggle { min-height: 34px; }
            .clear-filters-btn { font-size: 0.65rem; padding: 4px 12px; min-height: 34px; }
            .filter-count { font-size: 0.65rem; }
            .main { padding: 8px 12px 20px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
            .data-attribution { padding: 10px 12px calc(22px + env(safe-area-inset-bottom, 0px)); }
            .word-grid { grid-template-columns: 1fr; gap: 12px; }
            .word-card .card-actions button { width: 36px; height: 36px; font-size: 1.1rem; }
            .detail-modal { max-height: 95vh; border-radius: var(--radius-sm); }
            .detail-header { padding: 14px 16px 10px; }
            .detail-header .dh-word { font-size: 1.5rem; }
            .detail-body { padding: 14px 16px 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
            .grammar-table { font-size: 0.78rem; min-width: 320px; }
            .grammar-table th, .grammar-table td { padding: 5px 8px; }
            .detail-overlay { padding: 8px; }
            .toolbar { padding: 8px 12px 4px; }
            .active-tags { padding: 4px 12px 0; }
            .dh-ctrl-btn { width: 40px; height: 40px; font-size: 1.3rem; }
            .detail-nav button { width: 38px; height: 38px; font-size: 1rem; }
        }
        @media (max-width: 480px) {
            .header-inner { padding: 0 env(safe-area-inset-left, 8px) 0 env(safe-area-inset-right, 8px); }
            .header-controls .font-control { display: none; }
            /* Fix#10: 小屏隐藏 logo 文字，只留图标 */
            .logo .logo-text { display: none; }
            .logo svg { width: 18px; height: 18px; }
            .word-card .word-text { font-size: 1.2rem; }
            .filter-header { gap: 6px; }
            .filter-toggle { flex: 0 0 auto; }
            .filter-count { font-size: 0.62rem; padding: 2px 6px; }
            .clear-filters-btn { padding: 4px 10px; font-size: 0.62rem; }
            .filter-collapsible { margin-top: 4px; }
            .filter-inner .divider { display: none; }
            .filter-group { width: 100%; }
            .chip-filter { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
            .filter-chip { flex: 0 0 auto; }
            .filter-group .letter-filter { max-height: 72px; overflow-y: auto; scrollbar-width: thin; }
            .letter-filter button { min-width: 30px; height: 30px; font-size: 0.68rem; }
            .select-filter { width: 100%; }
            .toolbar { flex-direction: column; align-items: stretch; gap: 6px; }
            .toolbar-left { flex-wrap: wrap; }
            .toolbar-right { width: 100%; justify-content: space-between; }
            .toolbar-right .select-filter { width: auto; max-width: calc(100% - 56px); }
        }
        @media print {
            .header, .filter-bar, .pagination, .toolbar, .active-tags, .card-actions, .word-card .card-footer { display: none !important; }
            .word-card { page-break-inside: avoid; box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
            .detail-overlay { display: none !important; }
            body { background: #fff; }
        }
        .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
        /* Fix: 深色模式表格对比度 */
        [data-theme="dark"] .grammar-table .case-val { color: var(--text); }
        @media (max-width: 480px) {
            .grammar-table { font-size: 0.72rem; }
            .grammar-table th, .grammar-table td { padding: 4px 3px; }
            .case-name { font-size: 0.7rem; }
        }
        .ex-tts-btn { background: none; border: none; cursor: pointer; font-size: 0.85rem; opacity: 0.6; vertical-align: middle; padding: 0 2px; }
        .ex-tts-btn:hover { opacity: 1; }
    


        .morph-form { cursor: pointer; border-radius: 4px; transition: background 0.18s ease, box-shadow 0.18s ease; }
        .morph-form:hover { background: var(--accent-light) !important; color: var(--accent); }
        .morph-form.morph-active { background: var(--accent-light) !important; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
        .example-item.example-match { border-left-color: var(--accent); box-shadow: 0 0 0 2px rgba(59,111,160,0.18); background: var(--surface); }
        .example-form-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }


        .learning-tag { background: #fff8e1; color: #8a5a00; border-color: rgba(138,90,0,0.18); }
        .status-tag { background: #fff3e0; color: #a54b00; border-color: rgba(165,75,0,0.18); }
        .status-box { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 0.85rem; line-height: 1.55; }
        .status-box strong { color: var(--text); }
        .prep-gov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
        .prep-gov-card { padding: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
        .prep-gov-case { font-weight: 700; color: var(--primary); font-size: 0.86rem; margin-bottom: 5px; }
        .prep-gov-meaning { color: var(--text-secondary); font-size: 0.84rem; line-height: 1.5; margin-bottom: 8px; }
        .prep-patterns { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
        .prep-patterns span { font-size: 0.76rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; color: var(--text-secondary); }
        .prep-rule-examples { display: flex; flex-direction: column; gap: 6px; font-size: 0.79rem; color: var(--text-secondary); line-height: 1.45; }
        .prep-rule-examples strong { color: var(--text); font-weight: 600; }


        .search-mark { background: #fff1a8; color: inherit; border-radius: 3px; padding: 0 2px; box-shadow: 0 0 0 1px rgba(200,150,0,0.12); }
        [data-theme="dark"] .search-mark { background: rgba(255,214,102,0.28); color: var(--text); }
        .match-hint { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 5px 8px; border-radius: var(--radius-xs); background: var(--accent-light); color: var(--text-secondary); font-size: 0.78rem; line-height: 1.35; }
        .match-hint strong { color: var(--accent); font-size: 0.74rem; }
        .match-hint span { color: var(--text); }


        .word-text.origin-hit { background: linear-gradient(90deg, rgba(59,111,160,0.14), rgba(59,111,160,0.04)); border-radius: 7px; padding: 0 5px; box-shadow: inset 0 -2px 0 var(--accent); }
        .word-card.form-match { border-color: rgba(59,111,160,0.45); }


        /* ===== 无障碍 & 触控 & 可发音单元格（Claude round） ===== */
        /* 键盘焦点环：多处 outline:none 会让键盘用户看不到焦点，这里补回可见焦点 */
        :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
        .search-wrap input:focus-visible { outline: none; } /* 搜索框保留自身的 box-shadow 焦点环 */

        /* 变格/变体单元格：可点击 → 谷歌 TTS 发音 */
        .case-val.tts-speakable { cursor: pointer; transition: background 0.18s ease, color 0.18s ease; }
        .case-val.tts-speakable:hover { background: var(--accent-light); color: var(--accent); }
        .case-val.tts-speaking { background: var(--accent-light) !important; color: var(--accent); }

        /* 触控设备加大点击热区（≥44px，符合当下移动端操作习惯） */
        @media (pointer: coarse) {
            .word-card .card-actions button,
            .dh-ctrl-btn, .detail-nav button,
            .pagination button { min-width: 44px; min-height: 44px; }
            .ex-tts-btn { padding: 6px 4px; font-size: 1rem; }
            .case-val.tts-speakable { padding-top: 10px; padding-bottom: 10px; }
        }

        /* 尊重系统「减少动态效果」偏好 */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
                transition-duration: 0.001ms !important; scroll-behavior: auto !important;
            }
        }


        .feedback-btn {
            margin-left: 8px;
            border-style: dashed;
        }
        .word-ref-link {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            text-decoration: none;
        }

        /* Product refresh 2: cleaner alignment and more obvious sort controls */
        .toolbar {
            border-bottom: 1px solid rgba(127,139,153,0.14);
        }
        .toolbar-left, .toolbar-right {
            min-height: 36px;
        }
        .filter-inner {
            align-items: center;
        }
        .filter-group {
            min-height: 36px;
        }
        .ex-tts-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 999px;
            background: var(--surface);
            border: 1px solid var(--border);
            margin-left: 4px;
        }
        .ex-tts-btn:hover {
            background: var(--accent-light);
            color: var(--accent);
            border-color: rgba(59,111,160,0.35);
        }
        .word-card .card-actions {
            min-width: 32px;
            justify-content: flex-end;
        }


        

        /* Google Forms feedback + mobile history UX */
        .feedback-fab {
            position: fixed;
            right: max(18px, env(safe-area-inset-right, 0px) + 14px);
            bottom: max(18px, env(safe-area-inset-bottom, 0px) + 14px);
            z-index: 70;
            border: 0;
            border-radius: 999px;
            padding: 12px 18px;
            background: linear-gradient(135deg, var(--accent), #24577d);
            color: #fff;
            font-weight: 800;
            text-decoration: none;
            letter-spacing: 0.02em;
            box-shadow: 0 14px 34px rgba(22, 62, 92, 0.28);
            cursor: pointer;
            transition: transform 0.18s ease, box-shadow 0.18s ease;
        }
        .feedback-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(22, 62, 92, 0.34); color: #fff; }
        
        
        #detailBackBtn {
            min-height: 44px;
            padding: 0 14px;
            font-weight: 800;
            border-radius: 999px;
            background: var(--accent);
            color: #fff;
            border-color: transparent;
        }
        #detailBackBtn:hover { background: var(--accent-hover); color: #fff; }
        @media (max-width: 640px) {
            .detail-header {
                top: 0;
                z-index: 20;
                align-items: stretch;
            }
            .detail-header .dh-controls {
                width: 100%;
                align-items: center;
                flex-wrap: wrap;
            }
            .detail-nav {
                flex: 1 1 auto;
                min-height: 44px;
            }
            #detailBackBtn {
                min-width: 88px;
                height: 44px;
                font-size: 0.9rem;
            }
            
            .detail-body {
                padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
            }
            .feedback-fab {
                right: max(12px, env(safe-area-inset-right, 0px) + 10px);
                bottom: max(12px, env(safe-area-inset-bottom, 0px) + 10px);
                width: 52px;
                height: 52px;
                padding: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                text-indent: -999px;
            }
            .feedback-fab::after {
                content: "✎";
                text-indent: 0;
                font-size: 1.25rem;
            }
        }


/* 20260703 mobile table swipe + active filters + sense examples */
.table-scroll,
.grammar-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}
.table-scroll table,
.grammar-table-wrap table {
  min-width: max-content;
}
.active-tags {
  justify-content: center;
  align-items: center;
  padding: 8px 12px 0;
  margin: 0 auto;
}
.active-tag {
  min-height: 32px;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
}
.active-tag button {
  min-width: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sense-list {
  display: grid;
  gap: 12px;
}
.sense-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  padding: 12px;
}
.sense-block h4 {
  margin: 0 0 4px;
  color: var(--primary);
  font-size: 0.96rem;
}
.sense-subtitle {
  margin: 0 0 8px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.45;
}
@media (max-width: 640px) {
  .active-tags {
    justify-content: center;
    gap: 6px;
    padding-inline: 8px;
  }
  .active-tag {
    font-size: 0.72rem;
    white-space: normal;
  }
  .sense-block {
    padding: 10px;
  }
}


/* 20260703 filter drawer redesign */
.filter-drawer {
  padding: 8px 20px 7px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--accent) 6%), var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.filter-shell {
  max-width: var(--max-width);
  margin: 0 auto;
}
.filter-drawer .filter-header {
  max-width: none;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
}
.filter-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.filter-panel-title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-light);
}
.filter-meta-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.filter-drawer .filter-count {
  margin-left: 0;
  font-variant-numeric: tabular-nums;
}
.filter-drawer .filter-collapsible {
  max-width: none;
  margin-top: 7px;
}
.filter-drawer .filter-inner {
  justify-content: center;
  gap: 8px 12px;
  padding: 4px 0 2px;
}
.filter-drawer .active-tags {
  max-width: none;
  padding: 8px 10px 0;
  justify-content: center;
}
.filter-handle-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6px;
  min-height: 26px;
}
.filter-handle {
  min-height: 28px;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
  background: color-mix(in srgb, var(--surface) 86%, var(--accent-light) 14%);
  box-shadow: 0 6px 18px rgba(40, 70, 110, 0.08);
}
.filter-handle .filter-toggle-text {
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}
.filter-handle .filter-toggle-chevron {
  font-size: 0.8rem;
  transform: rotate(180deg);
}
.filter-handle[aria-expanded="false"] .filter-toggle-chevron {
  transform: rotate(0deg);
}
.filter-handle:hover {
  transform: translateY(-1px);
}
.filter-handle:active {
  transform: translateY(0) scale(0.98);
}
.filter-drawer .filter-collapsible.collapsed + .active-tags:empty + .filter-handle-row {
  margin-top: 2px;
}
@media (max-width: 768px) {
  .filter-drawer {
    padding: 6px 10px 5px;
  }
  .filter-panel-title {
    font-size: 0.66rem;
  }
  .filter-meta-actions {
    gap: 6px;
  }
  .filter-drawer .filter-inner {
    justify-content: flex-start;
    gap: 7px;
  }
  .filter-handle {
    min-width: 92px;
    min-height: 30px;
  }
}
@media (max-width: 480px) {
  .filter-drawer .filter-header {
    align-items: center;
  }
  .filter-panel-title {
    max-width: 42%;
    white-space: nowrap;
  }
  .filter-meta-actions {
    flex: 1;
    justify-content: flex-end;
  }
  .filter-handle-row {
    margin-top: 5px;
  }
}


/* 20260703 verb detail teaching layout */
.verb-section {
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent) 22%);
  border-radius: calc(var(--radius) + 2px);
  padding: 14px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent-light) 72%, transparent) 0, transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--accent-light) 4%), var(--surface));
}
.verb-section > h3 {
  justify-content: center;
  text-align: center;
  border-bottom: 0;
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.verb-section > h3::before,
.verb-section > h3::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 120px;
  background: linear-gradient(90deg, transparent, var(--accent-light), transparent);
}
.verb-section .status-box {
  max-width: 760px;
  margin-inline: auto;
  border-left-width: 0;
  border-top: 4px solid var(--accent);
}
.verb-section .grammar-table-wrap {
  margin: 10px auto 8px !important;
  max-width: 100%;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(31, 55, 88, 0.08);
}
.verb-section .grammar-table {
  min-width: max-content;
}
.verb-section .grammar-table th,
.verb-section .grammar-table td {
  text-align: center;
  vertical-align: middle;
}
.verb-section .grammar-table th {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.76rem;
}
.verb-section .grammar-table th:first-child,
.verb-section .grammar-table .case-name {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 96px;
  max-width: 160px;
  background: color-mix(in srgb, var(--bg) 92%, var(--surface) 8%);
  text-align: left;
  box-shadow: 1px 0 0 var(--border);
  white-space: normal;
  overflow-wrap: anywhere;
}
.verb-section .grammar-table th:first-child {
  z-index: 3;
  color: var(--text);
}
.verb-section .case-val {
  min-width: 112px;
  font-weight: 700;
  color: var(--primary);
}
.verb-pattern-caption {
  width: fit-content;
  max-width: 100%;
  margin: 14px auto 2px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
}
.verb-section .grammar-table-wrap + .verb-pattern-caption {
  margin-top: 16px;
}
.verb-section + .grammar-section {
  margin-top: 22px;
}
@media (max-width: 640px) {
  .verb-section {
    padding: 10px;
    border-radius: var(--radius-sm);
  }
  .verb-section > h3 {
    justify-content: flex-start;
    text-align: left;
  }
  .verb-section > h3::before,
  .verb-section > h3::after {
    display: none;
  }
  .verb-section .grammar-table .case-name {
    min-width: 82px;
  }
  .verb-section .case-val {
    min-width: 104px;
  }
  .verb-pattern-caption {
    margin-left: 0;
    margin-right: auto;
  }
}


/* Sense overview keeps meanings/grammar separate from examples. */
.sense-overview .sense-list {
  display: grid;
  gap: 10px;
}
.sense-overview .sense-block {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent-light) 6%);
}
.sense-overview .sense-block h4 {
  margin: 0 0 6px;
}
.sense-overview .sense-subtitle {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}


/* 20260705 UI: robust sense overview cards and cleaner detail spacing */
.detail-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.detail-body > .grammar-section,
.detail-body > .detail-meaning {
  margin-bottom: 0;
}
.sense-overview .sense-list {
  display: grid;
  gap: 12px;
}
.sense-overview .sense-block {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, var(--accent) 16%);
  border-left: 0;
  border-radius: 16px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--accent-light) 58%, transparent) 0, transparent 38%),
    color-mix(in srgb, var(--surface) 94%, var(--accent-light) 6%);
}
.sense-number {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 24%, transparent);
}
.sense-content {
  min-width: 0;
}
.sense-overview .sense-block h4 {
  margin: 1px 0 6px;
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.35;
}
.sense-overview .sense-subtitle {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.62;
  font-size: 0.88rem;
}
.sense-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.sense-tags span {
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-light) 70%, var(--surface) 30%);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  font-size: 0.7rem;
  font-weight: 700;
}
[data-theme="dark"] .sense-overview .sense-block,
[data-theme="dark"] .example-item,
[data-theme="dark"] .detail-meaning {
  background: color-mix(in srgb, var(--surface) 88%, #000 12%);
}
@media (max-width: 640px) {
  .detail-body {
    gap: 16px;
  }
  .sense-overview .sense-block {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
  }
  .sense-number {
    width: 26px;
    height: 26px;
    font-size: 0.72rem;
  }
}


/* 20260705 final polish: mobile affordances and upload-safe spacing */
.filter-handle-row {
  margin-top: 8px;
}
.filter-handle {
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 10%, transparent);
}
.filter-handle .filter-toggle-text {
  font-weight: 800;
}
.detail-modal {
  scrollbar-gutter: stable both-edges;
}
.detail-header {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 72%, transparent);
}
.detail-body > .grammar-section h3 {
  letter-spacing: 0.01em;
}
.feedback-fab {
  z-index: 180;
}
@media (max-width: 640px) {
  .filter-handle-row {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding-top: 6px;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 94%, transparent) 36%);
  }
  .filter-handle {
    min-height: 38px;
    padding-inline: 16px;
  }
  .detail-overlay {
    align-items: stretch;
    padding: 0;
  }
  .detail-modal {
    max-height: 100dvh;
    border-radius: 0;
  }
  .detail-header .dh-controls {
    gap: 8px;
  }
  .feedback-fab {
    opacity: 0.92;
  }
  .detail-overlay.open ~ .feedback-fab {
    opacity: 0.2;
    pointer-events: none;
  }
}


/* 20260706 Batch 0: minimal Chinese mnemonic line */
.mnemonic-line {
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-light) 76%, var(--surface) 24%);
  color: var(--text-secondary);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: 0.86rem;
  line-height: 1.45;
}
.mnemonic-line span {
  color: var(--accent);
  font-weight: 800;
}
[data-theme="dark"] .mnemonic-line {
  background: color-mix(in srgb, var(--surface) 84%, var(--accent-light) 16%);
}

/* 20260708 compact filter + cyber HUD refresh */
.filter-shell { position: relative; }
.filter-drawer.filters-collapsed {
  padding-top: 4px;
  padding-bottom: 5px;
}
.filter-drawer.filters-collapsed .filter-header {
  display: none;
}
.filter-drawer.filters-collapsed .active-tags {
  padding-top: 0;
  padding-bottom: 3px;
}
.filter-drawer.filters-collapsed .filter-handle-row {
  margin-top: 0;
  min-height: 24px;
}
.filter-drawer.filters-collapsed .filter-handle {
  min-height: 26px;
  padding: 2px 14px;
  box-shadow: none;
}
.filter-drawer.filters-collapsed .filter-toggle-text {
  font-size: 0.66rem;
}

[data-theme="cyber"] {
  --font: "Bahnschrift", "Agency FB", "Arial Narrow", "Segoe UI", sans-serif;
  --radius: 2px;
  --radius-sm: 2px;
  --radius-xs: 1px;
}
[data-theme="cyber"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.38;
  background:
    linear-gradient(rgba(255,90,99,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39,244,229,0.06) 1px, transparent 1px),
    repeating-linear-gradient(180deg, transparent 0 11px, rgba(255,255,255,0.025) 12px);
  background-size: 42px 42px, 42px 42px, 100% 12px;
}
[data-theme="cyber"] .header,
[data-theme="cyber"] .filter-drawer,
[data-theme="cyber"] .toolbar,
[data-theme="cyber"] .main,
[data-theme="cyber"] .data-attribution,
[data-theme="cyber"] .detail-overlay {
  position: relative;
}
[data-theme="cyber"] .logo,
[data-theme="cyber"] .word-card .word-text,
[data-theme="cyber"] .detail-header .dh-word,
[data-theme="cyber"] .grammar-section h3 {
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
[data-theme="cyber"] .search-wrap input,
[data-theme="cyber"] .theme-select,
[data-theme="cyber"] .ctrl-btn,
[data-theme="cyber"] .select-filter,
[data-theme="cyber"] .filter-chip,
[data-theme="cyber"] .mode-toggle,
[data-theme="cyber"] .clear-filters-btn,
[data-theme="cyber"] .filter-handle,
[data-theme="cyber"] .word-card,
[data-theme="cyber"] .detail-modal,
[data-theme="cyber"] .example-item,
[data-theme="cyber"] .status-box,
[data-theme="cyber"] .sense-block,
[data-theme="cyber"] .grammar-table-wrap {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
[data-theme="cyber"] .filter-drawer {
  background:
    linear-gradient(90deg, rgba(255,90,99,0.20), transparent 18%, transparent 82%, rgba(39,244,229,0.14)),
    color-mix(in srgb, var(--surface) 88%, #000 12%);
  box-shadow: inset 0 -1px 0 rgba(39,244,229,0.34), 0 8px 24px rgba(0,0,0,0.22);
}
[data-theme="cyber"] .filter-drawer::before,
[data-theme="cyber"] .detail-modal::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 2px;
  background:
    linear-gradient(90deg, var(--primary) 0 18%, transparent 18% 21%, var(--accent) 21% 34%, transparent 34% 38%, var(--primary) 38% 100%);
  box-shadow: 0 0 14px rgba(255,90,99,0.55);
  pointer-events: none;
}
[data-theme="cyber"] .word-card::after,
[data-theme="cyber"] .detail-modal::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 12px;
  width: 54px;
  height: 10px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--primary) 0 6px, transparent 6px 10px);
  opacity: 0.72;
}
[data-theme="cyber"] .word-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(39,244,229,0.38), 0 22px 50px rgba(255,90,99,0.18);
}
[data-theme="cyber"] .search-mark {
  background: var(--primary);
  color: #0a0d12;
  box-shadow: 0 0 12px rgba(255,90,99,0.52);
}
[data-theme="cyber"] .match-hint {
  border: 1px solid rgba(39,244,229,0.32);
  background:
    linear-gradient(90deg, rgba(39,244,229,0.14), rgba(255,90,99,0.08));
}
[data-theme="cyber"] .pos-tag {
  border-radius: 0;
  letter-spacing: 0.08em;
}
@media (max-width: 640px) {
  .filter-drawer.filters-collapsed {
    padding: 3px 10px 4px;
  }
  .filter-drawer.filters-collapsed .filter-handle {
    min-height: 32px;
  }
  .theme-select {
    max-width: 72px;
    padding-inline: 8px 18px;
    font-size: 0.72rem;
  }
}

/* ============================================================
   20260708 Cyber V5 — Neon Alley Lexicon
   目标：把 cyber 和 danger 拉开。
   - danger = 军用/安防/危险区数据库终端，红黑 HUD。
   - cyber  = 夜城/霓虹街巷/低生活语言黑市，蓝紫黑 + 青/紫/酸黄。
   稳定原则：不改 DOM、不改交互层级、不抢 pointer-events、不破坏 sticky。
   ============================================================ */

[data-theme="cyber"] {
  --cy-bg-0: #050515;
  --cy-bg-1: #080a22;
  --cy-bg-2: #10112e;
  --cy-panel: rgba(9, 12, 34, 0.82);
  --cy-panel-strong: rgba(12, 15, 42, 0.94);
  --cy-glass: rgba(15, 20, 52, 0.62);

  --cy-cyan: #25f7ff;
  --cy-cyan-soft: rgba(37, 247, 255, 0.14);
  --cy-violet: #9b5cff;
  --cy-violet-soft: rgba(155, 92, 255, 0.16);
  --cy-magenta: #ff3df2;
  --cy-magenta-soft: rgba(255, 61, 242, 0.14);
  --cy-lime: #b8ff4d;
  --cy-lime-soft: rgba(184, 255, 77, 0.13);
  --cy-yellow: #f7ff5a;

  --cy-text: #edf8ff;
  --cy-text-2: #a8bed6;
  --cy-text-3: #657b94;
  --cy-border: rgba(37, 247, 255, 0.26);

  --bg: var(--cy-bg-0);
  --surface: #0b0f28;
  --surface-hover: #141a3c;
  --primary: var(--cy-lime);
  --primary-light: #e3ff9e;
  --accent: var(--cy-cyan);
  --accent-light: var(--cy-cyan-soft);
  --accent-hover: var(--cy-magenta);
  --text: var(--cy-text);
  --text-secondary: var(--cy-text-2);
  --text-light: var(--cy-text-3);
  --border: var(--cy-border);
  --shadow:
    0 0 0 1px rgba(37, 247, 255, 0.08),
    0 18px 48px rgba(0, 0, 0, 0.46);
  --shadow-lg:
    0 0 0 1px rgba(184, 255, 77, 0.22),
    0 0 22px rgba(37, 247, 255, 0.22),
    0 28px 70px rgba(155, 92, 255, 0.22);

  /* 正文回归系统字体；数据类文本另走 mono，避免像 danger 那样全站终端化 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Microsoft YaHei", Arial, sans-serif;
  --cy-display-font: "Bahnschrift", "Chakra Petch", "Arial Narrow", "Segoe UI", sans-serif;
  --font-mono: "Share Tech Mono", "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  color-scheme: dark;
}

/* 夜城背景：霓虹雾、湿路面反光、很轻的雨线。与 danger 的红黑 HUD 拉开。 */
[data-theme="cyber"] body {
  background:
    radial-gradient(circle at 12% 8%, rgba(155, 92, 255, 0.24), transparent 26rem),
    radial-gradient(circle at 86% 18%, rgba(37, 247, 255, 0.15), transparent 24rem),
    radial-gradient(circle at 50% 104%, rgba(255, 61, 242, 0.18), transparent 34rem),
    linear-gradient(155deg, #050515 0%, #07091e 46%, #030711 100%);
}

[data-theme="cyber"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.26;
  background:
    linear-gradient(rgba(37, 247, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 92, 255, 0.045) 1px, transparent 1px),
    repeating-linear-gradient(180deg, transparent 0 13px, rgba(255,255,255,0.025) 14px);
  background-size: 56px 56px, 56px 56px, 100% 14px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.80), rgba(0,0,0,0.40));
}

[data-theme="cyber"] body::after {
  content: "";
  position: fixed;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
  background:
    repeating-linear-gradient(112deg, transparent 0 42px, rgba(37,247,255,0.08) 43px 44px, transparent 45px 78px),
    linear-gradient(180deg, transparent 0 62%, rgba(37,247,255,0.08) 100%);
  transform: translate3d(0,0,0);
  animation: pd-cyber-rain 12s linear infinite;
}

@keyframes pd-cyber-rain {
  from { transform: translate3d(0, -3%, 0); }
  to { transform: translate3d(-3%, 3%, 0); }
}

@keyframes pd-cyber-glitch {
  0%, 100% {
    transform: translate3d(0,0,0) skewX(0deg);
    filter: none;
    text-shadow: 0 0 14px rgba(39,244,229,.32);
  }
  18% {
    transform: translate3d(-1px,0,0) skewX(-5deg);
    filter: drop-shadow(2px 0 rgba(255,45,212,.75));
    text-shadow: -2px 0 rgba(255,45,212,.75), 2px 0 rgba(39,244,229,.65);
  }
  34% {
    transform: translate3d(1px,0,0) skewX(4deg);
    filter: drop-shadow(-2px 0 rgba(39,244,229,.65));
    text-shadow: 2px 0 rgba(215,255,66,.55), -2px 0 rgba(255,45,212,.55);
  }
  52% {
    transform: translate3d(0,1px,0) skewX(0deg);
    filter: contrast(1.18) saturate(1.18);
    text-shadow: 0 -1px rgba(215,255,66,.45), 0 0 18px rgba(39,244,229,.42);
  }
  70% {
    transform: translate3d(0,0,0) skewX(0deg);
    filter: none;
  }
}

@keyframes pd-cyber-idle-glitch {
  0%, 72%, 100% {
    transform: translate3d(0,0,0);
    filter: none;
    text-shadow: 0 0 14px rgba(39,244,229,.30);
  }
  73% {
    transform: translateX(-1px);
    filter: drop-shadow(1px 0 rgba(255,45,212,.46));
    text-shadow: -1px 0 rgba(255,45,212,.62), 1px 0 rgba(39,244,229,.56);
  }
  74% {
    transform: translateX(1px);
    filter: drop-shadow(-1px 0 rgba(39,244,229,.50));
    text-shadow: 1px 0 rgba(215,255,66,.40), -1px 0 rgba(255,45,212,.44);
  }
  75% {
    transform: translate3d(0,0,0);
    filter: none;
  }
}

/* 结构层级合同：只让真实控件接管事件；不能再靠 z-index 互相压。 */
[data-theme="cyber"] .header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background:
    linear-gradient(90deg, rgba(155,92,255,0.18), rgba(5,5,21,0.78) 34%, rgba(37,247,255,0.10)),
    rgba(5, 7, 18, 0.86);
  border-bottom: 1px solid rgba(37, 247, 255, 0.36);
  box-shadow:
    0 0 0 1px rgba(155,92,255,0.08),
    0 12px 36px rgba(0,0,0,0.38),
    0 0 28px rgba(37,247,255,0.12);
  backdrop-filter: blur(18px) saturate(1.25);
}

[data-theme="cyber"] .header::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 1px;
  background:
    linear-gradient(90deg,
      transparent,
      var(--cy-violet) 10%,
      transparent 18%,
      var(--cy-cyan) 44%,
      var(--cy-lime) 52%,
      transparent 64%,
      var(--cy-magenta) 82%,
      transparent);
  opacity: 0.86;
  pointer-events: none;
}

[data-theme="cyber"] .filter-bar.filter-drawer {
  position: sticky !important;
  top: var(--header-h) !important;
  z-index: 99 !important;
  overflow: visible !important;
}

[data-theme="cyber"] .toolbar {
  position: relative !important;
  z-index: 1 !important;
}

[data-theme="cyber"] .main,
[data-theme="cyber"] .data-attribution,
[data-theme="cyber"] .detail-overlay,
[data-theme="cyber"] .feedback-fab {
  position: relative;
  z-index: 1;
}

/* Logo：像夜城招牌，不再像 danger 的系统警示标签。 */
[data-theme="cyber"] .logo {
  font-family: var(--cy-display-font);
  color: var(--cy-lime);
  letter-spacing: 0.035em;
  text-shadow:
    0 0 10px rgba(184,255,77,0.34),
    0 0 24px rgba(37,247,255,0.16);
}

[data-theme="cyber"] .logo-text::before {
  content: "NEON//";
  color: var(--cy-magenta);
  font-family: var(--font-mono);
  font-size: 0.62em;
  letter-spacing: 0.10em;
  margin-right: 4px;
  opacity: 0.82;
}

[data-theme="cyber"] .logo span {
  color: var(--cy-cyan);
}

[data-theme="cyber"] .logo svg {
  filter:
    drop-shadow(0 0 8px rgba(37,247,255,0.50))
    drop-shadow(0 0 18px rgba(255,61,242,0.24));
}

[data-theme="cyber"] .logo svg rect {
  fill: rgba(8, 12, 34, 0.92);
  stroke: var(--cy-cyan);
  stroke-width: 1.3;
  rx: 7;
}

[data-theme="cyber"] .logo svg text {
  fill: var(--cy-lime);
}

/* 搜索框：霓虹店招/数据库入口。保留圆角，与 danger 的直角终端区分。 */
[data-theme="cyber"] .search-wrap {
  isolation: isolate;
}

[data-theme="cyber"] .search-wrap::before {
  content: "SCAN";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  font: 800 0.66rem var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--cy-lime);
  text-shadow: 0 0 8px rgba(184,255,77,0.42);
  pointer-events: none;
}

[data-theme="cyber"] .search-wrap .search-icon {
  display: none;
}

[data-theme="cyber"] .search-wrap input {
  height: 39px;
  padding-left: 64px;
  padding-right: 42px;
  border-radius: 18px;
  border: 1px solid rgba(37,247,255,0.36);
  background:
    linear-gradient(90deg, rgba(184,255,77,0.12), transparent 22%),
    linear-gradient(135deg, rgba(155,92,255,0.18), rgba(37,247,255,0.07)),
    rgba(5, 8, 25, 0.76);
  color: var(--cy-text);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.035),
    0 0 18px rgba(37,247,255,0.12);
  clip-path: none !important;
  font-family: var(--font);
}

[data-theme="cyber"] .search-wrap input::placeholder {
  color: rgba(168,190,214,0.62);
}

[data-theme="cyber"] .search-wrap input:focus {
  border-color: var(--cy-lime);
  background:
    linear-gradient(90deg, rgba(184,255,77,0.16), transparent 24%),
    linear-gradient(135deg, rgba(155,92,255,0.22), rgba(37,247,255,0.11)),
    rgba(8, 12, 34, 0.92);
  box-shadow:
    0 0 0 1px rgba(184,255,77,0.38),
    0 0 15px rgba(37,247,255,0.42),
    0 0 34px rgba(155,92,255,0.22),
    inset 0 0 18px rgba(37,247,255,0.05);
}

[data-theme="cyber"] .search-wrap .clear-btn {
  color: var(--cy-magenta);
  border-radius: 999px;
}

[data-theme="cyber"] .search-wrap .clear-btn:hover {
  background: rgba(255,61,242,0.16);
  color: #fff;
}

/* 控件：赛博走霓虹玻璃，小圆角；危险区才走硬切角。 */
[data-theme="cyber"] .ctrl-btn,
[data-theme="cyber"] .theme-select,
[data-theme="cyber"] .select-filter,
[data-theme="cyber"] .font-control button,
[data-theme="cyber"] .filter-toggle,
[data-theme="cyber"] .clear-filters-btn,
[data-theme="cyber"] .mode-toggle,
[data-theme="cyber"] .filter-chip,
[data-theme="cyber"] .pagination button,
[data-theme="cyber"] .load-more-btn {
  clip-path: none !important;
  border-radius: 12px !important;
  border-color: rgba(37,247,255,0.28);
  background:
    linear-gradient(135deg, rgba(37,247,255,0.08), rgba(155,92,255,0.08)),
    rgba(8, 12, 34, 0.78);
  color: var(--cy-text-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
}

[data-theme="cyber"] .ctrl-btn:hover,
[data-theme="cyber"] .theme-select:hover,
[data-theme="cyber"] .theme-select:focus,
[data-theme="cyber"] .select-filter:hover,
[data-theme="cyber"] .select-filter:focus,
[data-theme="cyber"] .font-control button:hover,
[data-theme="cyber"] .filter-toggle:hover,
[data-theme="cyber"] .clear-filters-btn:hover,
[data-theme="cyber"] .mode-toggle:hover,
[data-theme="cyber"] .filter-chip:hover,
[data-theme="cyber"] .pagination button:hover,
[data-theme="cyber"] .load-more-btn:hover {
  color: var(--cy-lime);
  border-color: rgba(184,255,77,0.58);
  background:
    linear-gradient(135deg, rgba(184,255,77,0.12), rgba(37,247,255,0.10)),
    rgba(10, 15, 42, 0.90);
  box-shadow:
    0 0 0 1px rgba(184,255,77,0.18),
    0 0 18px rgba(37,247,255,0.22),
    inset 0 0 18px rgba(37,247,255,0.035);
}

[data-theme="cyber"] select {
  color-scheme: dark;
}

[data-theme="cyber"] .theme-select,
[data-theme="cyber"] .select-filter {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cy-lime) 50%),
    linear-gradient(135deg, var(--cy-lime) 50%, transparent 50%),
    linear-gradient(135deg, rgba(37,247,255,0.10), rgba(155,92,255,0.10));
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%,
    0 0;
  background-size: 5px 5px, 5px 5px, 100% 100%;
  background-repeat: no-repeat;
}

[data-theme="cyber"] .theme-select option,
[data-theme="cyber"] .select-filter option {
  background: #090d26;
  color: var(--cy-text);
}

/* 筛选栏：夜城广告牌横幅，不能再像危险区协议栏。 */
[data-theme="cyber"] .filter-drawer {
  background:
    linear-gradient(90deg, rgba(255,61,242,0.14), transparent 24%, transparent 72%, rgba(37,247,255,0.14)),
    rgba(7, 9, 27, 0.84);
  border-bottom: 1px solid rgba(37,247,255,0.30);
  box-shadow:
    inset 0 -1px 0 rgba(184,255,77,0.12),
    0 14px 32px rgba(0,0,0,0.28),
    0 0 22px rgba(155,92,255,0.10);
  backdrop-filter: blur(16px) saturate(1.18);
}

[data-theme="cyber"] .filter-drawer::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 1px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--cy-magenta) 0 18px, transparent 18px 24px, var(--cy-cyan) 24px 42px, transparent 42px 54px, var(--cy-lime) 54px 60px, transparent 60px 74px);
  opacity: 0.75;
  box-shadow: 0 0 14px rgba(37,247,255,0.22);
}

[data-theme="cyber"] .filter-panel-title {
  font-family: var(--cy-display-font);
  color: var(--cy-lime);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(184,255,77,0.25);
}

[data-theme="cyber"] .filter-panel-title::after {
  content: "  / ALLEY FILTER";
  color: var(--cy-cyan);
  font-family: var(--font-mono);
  font-size: 0.68em;
  opacity: 0.74;
}

[data-theme="cyber"] .filter-label,
[data-theme="cyber"] .sort-label {
  font-family: var(--font-mono);
  color: var(--cy-text-3);
  letter-spacing: 0.08em;
}

[data-theme="cyber"] .divider {
  background: linear-gradient(180deg, transparent, rgba(37,247,255,0.42), transparent);
}

[data-theme="cyber"] .filter-count {
  border-radius: 999px;
  border: 1px solid rgba(184,255,77,0.24);
  color: var(--cy-lime);
  background: rgba(184,255,77,0.08);
  font-family: var(--font-mono);
}

[data-theme="cyber"] .letter-filter button {
  border-radius: 9px;
  border-color: rgba(37,247,255,0.20);
  background: rgba(8, 12, 34, 0.78);
  color: var(--cy-text-2);
}

[data-theme="cyber"] .letter-filter button:hover {
  color: var(--cy-cyan);
  border-color: rgba(37,247,255,0.48);
  background: rgba(37,247,255,0.10);
  box-shadow: 0 0 14px rgba(37,247,255,0.16);
}

[data-theme="cyber"] .letter-filter button.active {
  color: var(--cy-lime);
  background:
    linear-gradient(135deg, rgba(184,255,77,0.16), rgba(37,247,255,0.08)),
    rgba(3, 9, 23, 0.94);
  border-color: rgba(184,255,77,0.66);
  text-shadow: 0 0 10px rgba(184,255,77,0.28);
  box-shadow:
    0 0 0 1px rgba(184,255,77,0.22),
    0 0 16px rgba(37,247,255,0.16),
    inset 0 0 14px rgba(184,255,77,0.06);
}

[data-theme="cyber"] .filter-chip.include {
  color: var(--cy-cyan);
  border-color: rgba(37,247,255,0.46);
  background: rgba(37,247,255,0.12);
}

[data-theme="cyber"] .filter-chip.exclude,
[data-theme="cyber"] .mode-toggle[data-mode="exclude"] {
  color: var(--cy-magenta);
  border-color: rgba(255,61,242,0.46);
  background: rgba(255,61,242,0.12);
}

/* 排序条：不像 danger 的 ACCESS 横条；改成街区索引牌。 */
[data-theme="cyber"] .toolbar {
  border-radius: 18px;
  margin-top: 10px;
  padding: 10px 20px 6px;
  background:
    linear-gradient(90deg, rgba(37,247,255,0.07), transparent 44%, rgba(155,92,255,0.08)),
    rgba(6, 9, 27, 0.48);
  border: 1px solid rgba(37,247,255,0.12);
  box-shadow: 0 12px 28px rgba(0,0,0,0.20);
}

[data-theme="cyber"] .toolbar::before {
  content: "NEON INDEX";
  display: inline-flex;
  align-items: center;
  align-self: center;
  min-height: 26px;
  padding: 3px 10px;
  margin-right: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,61,242,0.34);
  color: var(--cy-magenta);
  background: rgba(255,61,242,0.08);
  font: 800 0.66rem var(--font-mono);
  letter-spacing: 0.10em;
}

[data-theme="cyber"] #resultSummary {
  color: var(--cy-text-2);
}

/* 词卡：夜城数据摊位卡，不再是 danger 的硬边数据包。 */
[data-theme="cyber"] .word-grid {
  counter-reset: cy-neon-card;
  gap: 18px;
}

[data-theme="cyber"] .word-card {
  counter-increment: cy-neon-card;
  clip-path: none !important;
  border-radius: 20px;
  overflow: hidden;
  padding: 18px 20px 16px 22px;
  border: 1px solid rgba(37,247,255,0.20);
  background:
    radial-gradient(circle at 12% 0%, rgba(184,255,77,0.12), transparent 9rem),
    radial-gradient(circle at 102% 12%, rgba(255,61,242,0.14), transparent 10rem),
    linear-gradient(145deg, rgba(13,18,50,0.96), rgba(7,10,30,0.90));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.025),
    0 18px 45px rgba(0,0,0,0.36);
}

[data-theme="cyber"] .word-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--cy-lime), var(--cy-cyan) 48%, var(--cy-magenta));
  box-shadow:
    0 0 9px rgba(184,255,77,0.50),
    0 0 18px rgba(37,247,255,0.32);
  animation: pd-cyber-rail 3.6s ease-in-out infinite;
}

@keyframes pd-cyber-rail {
  0%, 100% { opacity: 0.72; filter: saturate(1); }
  50% { opacity: 1; filter: saturate(1.35); }
}

[data-theme="cyber"] .word-card::after {
  content: "SIGN_" counter(cy-neon-card, decimal-leading-zero);
  position: absolute;
  right: 16px;
  top: 11px;
  color: rgba(184,255,77,0.72);
  font-family: var(--font-mono);
  font-size: 0.60rem;
  letter-spacing: 0.10em;
  pointer-events: none;
}

[data-theme="cyber"] .word-card:hover {
  transform: translateY(-4px);
  border-color: rgba(184,255,77,0.55);
  box-shadow:
    0 0 0 1px rgba(184,255,77,0.22),
    0 0 14px rgba(37,247,255,0.38),
    0 0 34px rgba(255,61,242,0.18),
    0 28px 62px rgba(0,0,0,0.48);
}

[data-theme="cyber"] .word-card .word-text {
  color: var(--cy-lime);
  font-family: var(--cy-display-font);
  letter-spacing: 0.035em;
  text-shadow:
    0 0 10px rgba(184,255,77,0.28),
    0 0 22px rgba(37,247,255,0.10);
}

[data-theme="cyber"] .word-card .word-phonetic,
[data-theme="cyber"] .dh-phonetic {
  color: var(--cy-cyan);
  font-family: var(--font-mono);
}

[data-theme="cyber"] .word-card .meaning {
  color: var(--cy-text-2);
}

[data-theme="cyber"] .word-card .example {
  border-left-color: rgba(255,61,242,0.48);
  background: rgba(5, 8, 25, 0.58);
  color: var(--cy-text-3);
  border-radius: 12px;
}

[data-theme="cyber"] .word-card .card-footer .theme-tag {
  border-radius: 999px;
  border-color: rgba(37,247,255,0.20);
  background: rgba(37,247,255,0.07);
  color: var(--cy-text-3);
}

/* POS / 难度：霓虹标签而不是危险权限块。 */
[data-theme="cyber"] .pos-tag,
[data-theme="cyber"] .level-badge {
  border-radius: 999px;
  font-family: var(--font-mono);
  letter-spacing: 0.07em;
}

[data-theme="cyber"] .pos-tag {
  background: rgba(37,247,255,0.09);
  border-color: rgba(37,247,255,0.28);
  color: var(--cy-cyan);
}

[data-theme="cyber"] .pos-tag.noun { color: var(--cy-cyan); border-color: rgba(37,247,255,0.36); background: rgba(37,247,255,0.10); }
[data-theme="cyber"] .pos-tag.verb { color: var(--cy-lime); border-color: rgba(184,255,77,0.36); background: rgba(184,255,77,0.10); }
[data-theme="cyber"] .pos-tag.adj,
[data-theme="cyber"] .pos-tag.adjective { color: var(--cy-magenta); border-color: rgba(255,61,242,0.35); background: rgba(255,61,242,0.10); }
[data-theme="cyber"] .pos-tag.adv,
[data-theme="cyber"] .pos-tag.adverb { color: var(--cy-violet); border-color: rgba(155,92,255,0.38); background: rgba(155,92,255,0.12); }

[data-theme="cyber"] .level-badge::before {
  content: none !important;
}

[data-theme="cyber"] .level-badge.beginner { color: #050515; background: var(--cy-lime); border: 1px solid rgba(184,255,77,0.55); }
[data-theme="cyber"] .level-badge.intermediate { color: var(--cy-cyan); background: rgba(37,247,255,0.12); border: 1px solid rgba(37,247,255,0.36); }
[data-theme="cyber"] .level-badge.advanced { color: var(--cy-magenta); background: rgba(255,61,242,0.12); border: 1px solid rgba(255,61,242,0.36); }
[data-theme="cyber"] .level-badge.extra { color: var(--cy-violet); background: rgba(155,92,255,0.13); border: 1px solid rgba(155,92,255,0.34); }

[data-theme="cyber"] .word-card .card-actions button {
  border-radius: 999px;
}

[data-theme="cyber"] .word-card .card-actions button:hover {
  color: var(--cy-lime);
  background: rgba(184,255,77,0.10);
}


/* V9.9.13: legacy Cyber detail experiment removed; final detail shell is defined in the Theme Runtime Contract below. */

/* Cyber micro UI = neon glass / alley signage. */
[data-theme="cyber"] .toolbar {
  align-items: center;
}

[data-theme="cyber"] .toolbar-left {
  gap: 8px;
}

[data-theme="cyber"] .toolbar-left::before {
  content: "FOUND";
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(184,255,77,0.30);
  color: var(--cy-lime);
  background: rgba(184,255,77,0.075);
  font: 900 0.62rem var(--font-mono);
  letter-spacing: 0.11em;
  box-shadow: 0 0 12px rgba(184,255,77,0.12);
}

[data-theme="cyber"] #resultSummary {
  font-family: var(--font-mono);
  color: var(--cy-text-2);
  letter-spacing: 0.04em;
}

[data-theme="cyber"] .sort-label::before {
  content: "SORT://";
  color: var(--cy-magenta);
  margin-right: 3px;
  font-family: var(--font-mono);
}

[data-theme="cyber"] .filter-handle,
[data-theme="cyber"] .filter-toggle {
  min-height: 30px;
  padding-inline: 14px;
  border-radius: 999px !important;
  border-color: rgba(37,247,255,0.34) !important;
  background:
    linear-gradient(90deg, rgba(37,247,255,0.10), rgba(255,61,242,0.08)),
    rgba(8,12,34,0.88) !important;
  color: var(--cy-cyan) !important;
  box-shadow: 0 0 14px rgba(37,247,255,0.10);
}

[data-theme="cyber"] .filter-handle:hover,
[data-theme="cyber"] .filter-toggle:hover {
  color: var(--cy-lime) !important;
  border-color: rgba(184,255,77,0.58) !important;
  box-shadow: 0 0 18px rgba(184,255,77,0.16), 0 0 26px rgba(37,247,255,0.12);
}

[data-theme="cyber"] .filter-toggle-chevron {
  color: var(--cy-lime);
  filter: drop-shadow(0 0 5px rgba(184,255,77,0.45));
}

[data-theme="cyber"] .filter-toggle-badge {
  background: var(--cy-lime) !important;
  color: #050515 !important;
  border-radius: 999px;
  font-family: var(--font-mono);
}

[data-theme="cyber"] .detail-nav button,
[data-theme="cyber"] .dh-ctrl-btn,
[data-theme="cyber"] #detailBackBtn {
  min-width: 34px;
  min-height: 34px;
  border: 1px solid rgba(37,247,255,0.28) !important;
  background:
    linear-gradient(135deg, rgba(37,247,255,0.08), rgba(155,92,255,0.08)),
    #080c22 !important;
  color: var(--cy-text-2) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
}

[data-theme="cyber"] .detail-nav button:hover,
[data-theme="cyber"] .dh-ctrl-btn:hover,
[data-theme="cyber"] #detailBackBtn:hover {
  color: var(--cy-lime) !important;
  border-color: rgba(184,255,77,0.58) !important;
  background: rgba(184,255,77,0.10) !important;
  box-shadow: 0 0 16px rgba(37,247,255,0.20), 0 0 24px rgba(184,255,77,0.12);
}

[data-theme="cyber"] #detailBackBtn::before {
  content: "BACK//";
  margin-right: 4px;
  color: var(--cy-magenta);
  font-family: var(--font-mono);
  font-size: 0.72em;
}

[data-theme="cyber"] .pagination button.active {
  color: #050515 !important;
  background: var(--cy-lime) !important;
  border-color: var(--cy-lime) !important;
  box-shadow: 0 0 16px rgba(184,255,77,0.30);
}

/* Danger micro UI = hard terminal / security controls. */
[data-theme="danger"] .toolbar-left {
  gap: 8px;
}

[data-theme="danger"] .toolbar-left::before {
  content: "ENTRIES";
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 9px;
  border-radius: 1px;
  border: 1px solid rgba(255,90,99,0.40);
  color: var(--dz-red-hot);
  background: rgba(255,90,99,0.10);
  font: 900 0.62rem var(--dz-display-font);
  letter-spacing: 0.12em;
}

[data-theme="danger"] #resultSummary {
  font-family: var(--dz-display-font);
  color: var(--dz-text-2);
  letter-spacing: 0.055em;
}

[data-theme="danger"] .sort-label::before {
  content: "CHANNEL:";
  color: var(--dz-red-hot);
  margin-right: 4px;
}

[data-theme="danger"] .filter-handle,
[data-theme="danger"] .filter-toggle {
  min-height: 30px;
  padding-inline: 14px;
  border-radius: 1px !important;
  border-color: rgba(255,90,99,0.42) !important;
  background:
    linear-gradient(90deg, rgba(255,90,99,0.14), transparent 70%),
    #12070b !important;
  color: var(--dz-red-hot) !important;
  box-shadow: 0 0 14px rgba(255,90,99,0.12);
}

[data-theme="danger"] .filter-handle:hover,
[data-theme="danger"] .filter-toggle:hover {
  color: var(--dz-cyan) !important;
  border-color: rgba(66,244,232,0.54) !important;
  box-shadow: 0 0 18px rgba(66,244,232,0.16), 0 0 24px rgba(255,90,99,0.12);
}

[data-theme="danger"] .filter-toggle-chevron {
  color: var(--dz-cyan);
}

[data-theme="danger"] .filter-toggle-badge {
  border-radius: 1px;
  background: var(--dz-red) !important;
  color: #16060a !important;
  font-family: var(--dz-display-font);
}

[data-theme="danger"] .detail-nav button,
[data-theme="danger"] .dh-ctrl-btn,
[data-theme="danger"] #detailBackBtn {
  min-width: 34px;
  min-height: 34px;
  border-radius: 1px !important;
  border: 1px solid rgba(255,90,99,0.38) !important;
  background:
    linear-gradient(90deg, rgba(255,90,99,0.10), transparent 72%),
    #12070b !important;
  color: var(--dz-text-2) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

[data-theme="danger"] .detail-nav button:hover,
[data-theme="danger"] .dh-ctrl-btn:hover,
[data-theme="danger"] #detailBackBtn:hover {
  color: var(--dz-cyan) !important;
  border-color: rgba(66,244,232,0.58) !important;
  background: rgba(66,244,232,0.08) !important;
  box-shadow: 0 0 18px rgba(66,244,232,0.16), 0 0 24px rgba(255,90,99,0.12);
}

[data-theme="danger"] #detailBackBtn::before {
  content: "RETURN:";
  margin-right: 4px;
  color: var(--dz-red-hot);
  font-size: 0.72em;
}

[data-theme="danger"] .pagination button.active {
  color: #16060a !important;
  background: var(--dz-red) !important;
  border-color: var(--dz-red) !important;
  box-shadow: 0 0 16px rgba(255,90,99,0.30);
}

/* Keep select/dropdown clickability above decorative toolbar labels. */
[data-theme="cyber"] .toolbar-right,
[data-theme="danger"] .toolbar-right,
[data-theme="cyber"] #sortSelect,
[data-theme="danger"] #sortSelect {
  position: relative;
  z-index: 3 !important;
}

@media (max-width: 768px) {
  [data-theme="cyber"] .detail-overlay,
  [data-theme="danger"] .detail-overlay {
    align-items: stretch;
    padding: 0;
  }

  [data-theme="cyber"] .detail-modal,
  [data-theme="danger"] .detail-modal {
    max-height: 100dvh;
  }

  [data-theme="cyber"] .detail-header,
  [data-theme="danger"] .detail-header {
    padding-top: 28px !important;
  }

  [data-theme="cyber"] .detail-header::after,
  [data-theme="danger"] .detail-header::after {
    right: 14px;
    top: 7px;
    font-size: 0.52rem;
  }
}

/* ============================================================
   20260708 V5.4 Danger Zone Access Console Refinement
   目标：危险区从“红黑 HUD”推进为“权限/安防/状态控制台”。
   与 cyber 拉开：cyber 保留 #27f4e5 作为夜城霓虹青；danger 的二级色改成安全薄荷绿，主视觉回到珊瑚警报红。
   不改 DOM、不改 JS、不改交互层级；只覆盖视觉层。
   ============================================================ */

/* Cyber keeps the clean neon cyan signature. */
[data-theme="cyber"] {
  --cy-cyan: #27f4e5;
  --cy-cyan-soft: rgba(39, 244, 229, 0.14);
  --cy-border: rgba(39, 244, 229, 0.26);
  --accent: var(--cy-cyan);
  --accent-light: var(--cy-cyan-soft);
  --border: var(--cy-border);
}

/* Danger palette: coral alarm red + dark wine panels + mint only as limited safety/active signal. */
[data-theme="danger"] {
  --dz-bg-0: #090306;
  --dz-bg-1: #140508;
  --dz-bg-2: #22070c;
  --dz-panel: rgba(18, 5, 8, 0.96);
  --dz-panel-solid: #130508;
  --dz-panel-soft: #21080d;

  --dz-red: #ff4d5f;
  --dz-red-hot: #ff6a74;
  --dz-red-dark: #8e1f2d;
  --dz-red-soft: rgba(255, 77, 95, 0.15);
  --dz-red-line: rgba(255, 77, 95, 0.48);

  --dz-mint: #7dffb2;
  --dz-mint-soft: rgba(125, 255, 178, 0.12);
  --dz-mint-line: rgba(125, 255, 178, 0.30);

  --dz-yellow: #e9ef5a;
  --dz-yellow-soft: rgba(233, 239, 90, 0.13);
  --dz-green: #58f0a7;
  --dz-magenta: #ff3f86;

  --dz-text: #ffe4e7;
  --dz-text-2: #d39aa3;
  --dz-text-3: #8c4d58;
  --dz-line-muted: rgba(255, 77, 95, 0.22);

  --bg: var(--dz-bg-0);
  --surface: var(--dz-panel-solid);
  --surface-hover: #270910;
  --primary: var(--dz-red);
  --primary-light: var(--dz-red-hot);
  --accent: var(--dz-red);
  --accent-light: var(--dz-red-soft);
  --accent-hover: var(--dz-mint);
  --text: var(--dz-text);
  --text-secondary: var(--dz-text-2);
  --text-light: var(--dz-text-3);
  --border: var(--dz-red-line);
  --shadow:
    0 0 0 1px rgba(255, 77, 95, 0.12),
    0 16px 38px rgba(0, 0, 0, 0.52);
  --shadow-lg:
    0 0 0 1px rgba(255, 77, 95, 0.36),
    0 0 26px rgba(255, 77, 95, 0.20),
    0 28px 84px rgba(0, 0, 0, 0.68);
}

[data-theme="danger"] body {
  background:
    radial-gradient(circle at 84% 4%, rgba(255, 77, 95, 0.22), transparent 24rem),
    radial-gradient(circle at 12% 86%, rgba(255, 77, 95, 0.09), transparent 30rem),
    linear-gradient(180deg, rgba(255, 77, 95, 0.055), transparent 28rem),
    linear-gradient(145deg, #090306 0%, #170509 47%, #050407 100%) !important;
}

[data-theme="danger"] body::before {
  opacity: 0.22 !important;
  background:
    linear-gradient(rgba(255, 77, 95, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 77, 95, 0.042) 1px, transparent 1px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 77, 95, 0.035) 18px 20px),
    repeating-linear-gradient(180deg, transparent 0 12px, rgba(255, 255, 255, 0.018) 13px) !important;
  background-size: 46px 46px, 46px 46px, 160px 100%, 100% 13px !important;
}

[data-theme="danger"] body::after {
  background:
    radial-gradient(circle at center, transparent 0 45%, rgba(0, 0, 0, 0.46) 100%),
    linear-gradient(90deg, rgba(255, 77, 95, 0.055), transparent 16%, transparent 84%, rgba(255, 77, 95, 0.055)) !important;
}

/* Header = zone access console, with a real warning strap rather than a generic neon line. */
[data-theme="danger"] .header {
  background:
    linear-gradient(90deg, rgba(255, 77, 95, 0.18), transparent 26%, transparent 72%, rgba(255, 77, 95, 0.12)),
    rgba(9, 3, 6, 0.94) !important;
  border-bottom-color: rgba(255, 77, 95, 0.58) !important;
  box-shadow:
    0 0 0 1px rgba(255, 77, 95, 0.12),
    0 12px 30px rgba(0, 0, 0, 0.50),
    0 0 24px rgba(255, 77, 95, 0.16) !important;
}

[data-theme="danger"] .header::after {
  height: 5px !important;
  bottom: -5px !important;
  background:
    repeating-linear-gradient(45deg, var(--dz-red) 0 9px, rgba(255, 77, 95, 0.22) 9px 13px, transparent 13px 17px),
    linear-gradient(90deg, transparent, var(--dz-red), transparent) !important;
  opacity: 0.82 !important;
  box-shadow: 0 0 18px rgba(255, 77, 95, 0.32);
}

[data-theme="danger"] .logo::before {
  content: "ZONE:" !important;
  color: #120508 !important;
  background: var(--dz-red) !important;
  padding: 2px 7px;
  margin-right: 5px;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
  box-shadow: 0 0 14px rgba(255, 77, 95, 0.34);
}

[data-theme="danger"] .logo,
[data-theme="danger"] .logo span {
  color: var(--dz-red-hot) !important;
  text-shadow: 0 0 10px rgba(255, 77, 95, 0.22);
}

[data-theme="danger"] .logo span span {
  color: var(--dz-mint) !important;
  text-shadow: 0 0 10px rgba(125, 255, 178, 0.20);
}

[data-theme="danger"] .logo svg rect {
  fill: #150508 !important;
  stroke: var(--dz-red) !important;
  stroke-width: 1.6;
}

[data-theme="danger"] .logo svg text { fill: var(--dz-red-hot) !important; }

/* Search = database access block, red dominant; mint appears only in focus/active state. */
[data-theme="danger"] .search-wrap::before {
  content: "SEARCH DB" !important;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 78px;
  box-sizing: border-box;
  text-align: center;
  color: var(--dz-red-hot) !important;
  background: rgba(255, 77, 95, 0.10);
  border: 1px solid rgba(255, 77, 95, 0.34);
  border-radius: 3px;
  padding: 4px 6px;
  font: 900 .58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  pointer-events: none;
  white-space: nowrap;
}

[data-theme="danger"] .search-wrap input {
  padding-left: 104px !important;
  border-color: rgba(255, 77, 95, 0.50) !important;
  background:
    linear-gradient(90deg, rgba(255, 77, 95, 0.16), transparent 32%),
    #100408 !important;
  color: var(--dz-text) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 16px rgba(255, 77, 95, 0.10) !important;
}

[data-theme="danger"] .search-wrap input:focus {
  border-color: var(--dz-mint) !important;
  box-shadow:
    0 0 0 1px rgba(125, 255, 178, 0.30),
    0 0 20px rgba(255, 77, 95, 0.20),
    inset 0 0 18px rgba(255, 77, 95, 0.06) !important;
}

/* Generic controls = hard security modules. No cyan collision; active/safe details use mint. */
[data-theme="danger"] .theme-select,
[data-theme="danger"] .select-filter,
[data-theme="danger"] .ctrl-btn,
[data-theme="danger"] .font-control button,
[data-theme="danger"] .filter-chip,
[data-theme="danger"] .mode-toggle,
[data-theme="danger"] .clear-filters-btn,
[data-theme="danger"] .filter-toggle,
[data-theme="danger"] .load-more-btn,
[data-theme="danger"] .pagination button,
[data-theme="danger"] .detail-nav button,
[data-theme="danger"] .dh-ctrl-btn,
[data-theme="danger"] #detailBackBtn {
  border-color: rgba(255, 77, 95, 0.40) !important;
  background:
    linear-gradient(90deg, rgba(255, 77, 95, 0.10), rgba(255, 77, 95, 0.035)),
    rgba(16, 4, 8, 0.96) !important;
  color: var(--dz-text-2) !important;
  border-radius: 1px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.018);
}

[data-theme="danger"] .theme-select:hover,
[data-theme="danger"] .theme-select:focus,
[data-theme="danger"] .select-filter:hover,
[data-theme="danger"] .select-filter:focus,
[data-theme="danger"] .ctrl-btn:hover,
[data-theme="danger"] .font-control button:hover,
[data-theme="danger"] .filter-chip:hover,
[data-theme="danger"] .mode-toggle:hover,
[data-theme="danger"] .filter-toggle:hover,
[data-theme="danger"] .pagination button:hover,
[data-theme="danger"] .load-more-btn:hover,
[data-theme="danger"] .detail-nav button:hover,
[data-theme="danger"] .dh-ctrl-btn:hover,
[data-theme="danger"] #detailBackBtn:hover {
  border-color: var(--dz-red-hot) !important;
  color: var(--dz-red-hot) !important;
  background:
    linear-gradient(90deg, rgba(255, 77, 95, 0.20), rgba(125, 255, 178, 0.045)),
    rgba(23, 5, 9, 0.98) !important;
  box-shadow:
    0 0 0 1px rgba(255, 77, 95, 0.22),
    0 0 18px rgba(255, 77, 95, 0.16) !important;
}

[data-theme="danger"] .theme-select option,
[data-theme="danger"] .select-filter option {
  background-color: #140508 !important;
  color: var(--dz-text) !important;
}

/* Filter drawer = SHORTCUTS / ZONE SET panel. */
[data-theme="danger"] .filter-drawer {
  background:
    linear-gradient(90deg, rgba(255, 77, 95, 0.18), transparent 22%, transparent 80%, rgba(255, 77, 95, 0.10)),
    rgba(12, 4, 7, 0.94) !important;
  border-bottom-color: rgba(255, 77, 95, 0.44) !important;
}

[data-theme="danger"] .filter-panel-title {
  color: #120508 !important;
  background: var(--dz-red) !important;
  padding: 3px 11px !important;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  box-shadow: 0 0 16px rgba(255, 77, 95, 0.24);
}

[data-theme="danger"] .filter-panel-title::before {
  content: "SHORTCUTS" !important;
  color: inherit !important;
  margin: 0 !important;
}

[data-theme="danger"] .filter-panel-title::after { content: none !important; }

[data-theme="danger"] .filter-label::before {
  content: "// ";
  color: var(--dz-red-hot);
}

[data-theme="danger"] .filter-count {
  color: var(--dz-red-hot) !important;
  border-color: rgba(255, 77, 95, 0.42) !important;
  background: rgba(255, 77, 95, 0.10) !important;
}

[data-theme="danger"] .letter-filter button.active,
[data-theme="danger"] .filter-chip.include,
[data-theme="danger"] .pagination button.active {
  color: #120508 !important;
  border-color: var(--dz-red) !important;
  background: var(--dz-red) !important;
  box-shadow: 0 0 18px rgba(255, 77, 95, 0.26) !important;
}

[data-theme="danger"] .filter-chip.exclude,
[data-theme="danger"] .mode-toggle[data-mode="exclude"] {
  border-color: var(--dz-yellow) !important;
  background: rgba(233, 239, 90, 0.12) !important;
  color: var(--dz-yellow) !important;
}

/* Toolbar = ACCESS GRANTED strip. */
[data-theme="danger"] .toolbar {
  min-height: 54px;
  background:
    linear-gradient(90deg, rgba(255, 77, 95, 0.16), transparent 44%, rgba(255, 77, 95, 0.08)),
    rgba(8, 3, 6, 0.64) !important;
  border-bottom: 1px solid rgba(255, 77, 95, 0.20) !important;
}

[data-theme="danger"] .toolbar-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

[data-theme="danger"] .toolbar-left::before {
  content: "ACCESS GRANTED" !important;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 16px 2px 12px;
  color: #140508 !important;
  background: var(--dz-red) !important;
  font: 900 0.82rem var(--dz-display-font);
  letter-spacing: 0.08em;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  box-shadow: 0 0 18px rgba(255, 77, 95, 0.28);
}

[data-theme="danger"] .toolbar::before { content: none !important; }

[data-theme="danger"] #resultSummary {
  color: var(--dz-text-2) !important;
  font-family: var(--font-mono, monospace) !important;
}

[data-theme="danger"] #resultSummary::before {
  content: "ENTRIES // ";
  color: var(--dz-red-hot);
}

[data-theme="danger"] .sort-label::before {
  content: "CHANNEL:" !important;
  color: var(--dz-red-hot) !important;
}

/* Cards = compact function modules. Left rail marks state without consuming content width. */
[data-theme="danger"] .word-grid { counter-reset: dz-entry; }

[data-theme="danger"] .word-card {
  counter-increment: dz-entry;
  padding: 30px 24px 18px 34px !important;
  min-height: 164px;
  border-color: rgba(255, 77, 95, 0.38) !important;
  background:
    linear-gradient(90deg, rgba(255, 77, 95, 0.52) 0 6px, rgba(255, 77, 95, 0.12) 6px 18px, transparent 18px),
    linear-gradient(135deg, rgba(255, 77, 95, 0.11), transparent 34%),
    rgba(15, 5, 8, 0.96) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.018),
    0 17px 42px rgba(0,0,0,0.48) !important;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)) !important;
}

[data-theme="danger"] .word-card::before {
  content: "" !important;
  position: absolute;
  left: 10px;
  top: 18px;
  bottom: 18px;
  width: 5px;
  height: auto;
  display: block;
  background: linear-gradient(180deg, var(--dz-red), var(--dz-yellow));
  box-shadow: 0 0 14px rgba(255, 77, 95, 0.24) !important;
  clip-path: none;
}

[data-theme="danger"] .word-card::after {
  content: "ENTRY_" counter(dz-entry, decimal-leading-zero) " // SEC" !important;
  color: rgba(255, 77, 95, 0.60) !important;
  font-family: var(--font-mono, monospace) !important;
  top: 10px !important;
  right: 14px !important;
}

[data-theme="danger"] .word-card:hover {
  border-color: var(--dz-red-hot) !important;
  box-shadow:
    0 0 0 1px rgba(255, 77, 95, 0.34),
    0 0 22px rgba(255, 77, 95, 0.22),
    0 24px 62px rgba(0, 0, 0, 0.58) !important;
}

[data-theme="danger"] .word-card .word-text {
  color: var(--dz-text) !important;
  text-shadow: 0 0 13px rgba(255, 77, 95, 0.22) !important;
}

[data-theme="danger"] .word-card .word-phonetic,
[data-theme="danger"] .dh-phonetic {
  color: var(--dz-mint) !important;
  text-shadow: 0 0 10px rgba(125, 255, 178, 0.18);
}

[data-theme="danger"] .word-card .meaning { color: #ffc7cd !important; }

[data-theme="danger"] .word-card .example {
  border-left-color: var(--dz-red-hot) !important;
  background: #090306 !important;
  color: var(--dz-text-2) !important;
}

[data-theme="danger"] .word-card .card-footer .theme-tag {
  border-color: rgba(255, 77, 95, 0.28) !important;
  background: rgba(255, 77, 95, 0.09) !important;
  color: var(--dz-text-2) !important;
}

/* POS / level: replace cyan with mint safety signal. */
[data-theme="danger"] .pos-tag.noun,
[data-theme="danger"] .pos-tag.pron,
[data-theme="danger"] .pos-tag.pronoun {
  color: var(--dz-mint) !important;
  border-color: var(--dz-mint-line) !important;
  background: var(--dz-mint-soft) !important;
}

[data-theme="danger"] .level-badge.beginner {
  background: var(--dz-mint-soft) !important;
  color: var(--dz-mint) !important;
  border: 1px solid var(--dz-mint-line) !important;
}

[data-theme="danger"] .level-badge.beginner::before { content: "T1 "; }
[data-theme="danger"] .level-badge.intermediate::before { content: "T3 "; }
[data-theme="danger"] .level-badge.advanced::before { content: "T4 "; }
[data-theme="danger"] .level-badge.extra::before { content: "X "; }

/* Detail page = fixed access file console. */
[data-theme="danger"] .detail-overlay {
  background:
    radial-gradient(circle at 50% 4%, rgba(255, 77, 95, 0.16), transparent 34rem),
    rgba(0, 0, 0, 0.72) !important;
}

[data-theme="danger"] .detail-modal {
  border-color: rgba(255, 77, 95, 0.56) !important;
  background: #0b0306 !important;
  box-shadow:
    0 0 0 1px rgba(255, 77, 95, 0.24),
    0 0 32px rgba(255, 77, 95, 0.16),
    0 30px 96px rgba(0, 0, 0, 0.76) !important;
}

[data-theme="danger"] .detail-header {
  padding-top: 42px !important;
  background:
    linear-gradient(90deg, rgba(255, 77, 95, 0.18), transparent 46%, rgba(125, 255, 178, 0.05)),
    #100407 !important;
  border-bottom-color: rgba(255, 77, 95, 0.48) !important;
}

[data-theme="danger"] .detail-header::before {
  content: "ACCESS GRANTED // ENTRY FILE OPEN" !important;
  left: 18px !important;
  right: auto !important;
  top: 8px !important;
  height: 24px !important;
  min-width: 240px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px 0 10px;
  color: #130508 !important;
  background: var(--dz-red) !important;
  font: 900 0.66rem var(--dz-display-font);
  letter-spacing: 0.09em;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  box-shadow: 0 0 16px rgba(255, 77, 95, 0.34) !important;
}

[data-theme="danger"] .detail-header::after {
  content: "SECURITY LEVEL // T-ACCESS" !important;
  color: var(--dz-red-hot) !important;
  top: 13px !important;
  right: 20px !important;
  font-family: var(--font-mono, monospace) !important;
  text-shadow: 0 0 10px rgba(255, 77, 95, 0.28) !important;
}

[data-theme="danger"] .detail-header .dh-word {
  color: var(--dz-text) !important;
  text-shadow: 0 0 14px rgba(255, 77, 95, 0.26) !important;
}

[data-theme="danger"] .sense-overview .sense-block,
[data-theme="danger"] .detail-meaning,
[data-theme="danger"] .grammar-section,
[data-theme="danger"] .example-item,
[data-theme="danger"] .status-box,
[data-theme="danger"] .grammar-table-wrap {
  border-color: rgba(255, 77, 95, 0.28) !important;
  background: #100407 !important;
}

[data-theme="danger"] .sense-number {
  color: #130508 !important;
  background: var(--dz-red) !important;
}

[data-theme="danger"] .grammar-section h3,
[data-theme="danger"] .sense-overview .sense-block h4 {
  color: var(--dz-red-hot) !important;
}

[data-theme="danger"] .grammar-table th {
  background: #18060a !important;
  color: var(--dz-red-hot) !important;
}

[data-theme="danger"] .search-mark {
  background: var(--dz-red) !important;
  color: #130508 !important;
}

[data-theme="danger"] .feedback-fab {
  background: var(--dz-red) !important;
  color: #130508 !important;
  border: 1px solid rgba(255, 77, 95, 0.52);
}

@media (max-width: 768px) {
  [data-theme="danger"] .word-card {
    padding-left: 18px !important;
    padding-top: 54px !important;
  }
  [data-theme="danger"] .word-card::before {
    left: 14px;
    top: 12px;
    width: auto;
    height: 24px;
    padding: 0 10px;
  }
  [data-theme="danger"] .detail-header::before {
    min-width: 190px;
    font-size: 0.56rem;
  }
  [data-theme="danger"] .detail-header::after {
    content: "SECURITY // T" !important;
    right: 12px !important;
    font-size: 0.50rem !important;
  }
}

/* ============================================================
   Custom Select Component Contract
   - 原生 select 只作为状态源，.pd-native-select 必须隐藏原生控件，避免双下拉。
   - .pd-select-button 负责可见入口，.pd-select-menu 作为 body portal 弹层。
   - visual-theme 是同一组件的 grid panel 分支，不另建第二套主题菜单。
   - 这里是组件基础层；后面的主题规则只能换皮肤，不能破坏入口/状态源/弹层关系。
   ============================================================ */

/* Native select remains as state source only. */
.pd-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 100%;
  pointer-events: auto !important;
}
.pd-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  left: 0;
  top: 0;
}
.pd-select-button {
  min-height: 34px;
  max-width: 100%;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 5px 30px 5px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: 700 0.78rem var(--font);
  cursor: pointer;
  outline: none;
  transition: var(--transition);
  position: relative;
  text-align: left;
  white-space: nowrap;
}
.pd-select-button:hover,
.pd-select-button:focus,
.pd-select-wrap.open .pd-select-button {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}
.pd-select-kicker {
  display: none;
}
.pd-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pd-select-arrow {
  position: absolute;
  right: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-62%) rotate(45deg);
  opacity: .75;
}
.pd-select-wrap.open .pd-select-arrow {
  transform: translateY(-35%) rotate(225deg);
}
.pd-select-kind-visual-theme .pd-select-button { min-width: 88px; }
.pd-select-kind-sort .pd-select-button { min-width: 136px; }
.pd-select-kind-theme .pd-select-button { min-width: 136px; }
.pd-select-kind-gender .pd-select-button,
.pd-select-kind-level .pd-select-button { min-width: 92px; }

.pd-select-menu {
  position: fixed;
  z-index: 1200;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: pdSelectIn .12s ease-out;
}
@keyframes pdSelectIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.pd-select-menu.open-up { animation-name: pdSelectInUp; }
@keyframes pdSelectInUp {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.pd-select-menu-head {
  padding: 5px 8px 7px;
  color: var(--text-light);
  font: 700 0.66rem var(--font);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pd-select-option {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: 600 0.78rem var(--font);
}
.pd-select-option:hover,
.pd-select-option:focus,
.pd-select-option.active {
  background: var(--accent-light);
  color: var(--accent);
  outline: none;
}
.pd-select-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  opacity: .78;
}
.pd-select-option-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-select-code {
  color: var(--text-light);
  font-size: .62rem;
  letter-spacing: .05em;
  opacity: .82;
}

/* Visual theme picker: one body-portal menu, two columns, five themes = three visual rows. */
.pd-select-menu.pd-theme-menu {
  padding: 10px;
  border-radius: 16px;
  overflow-y: auto;
}
.pd-theme-select-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.pd-theme-select-option {
  min-height: 64px;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  padding: 10px;
  border: 1px solid transparent;
}
.pd-theme-select-option:hover,
.pd-theme-select-option:focus,
.pd-theme-select-option.active {
  border-color: var(--accent);
}
.pd-theme-option-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.pd-theme-select-option .pd-select-option-text {
  white-space: normal;
  line-height: 1.12;
}
.pd-theme-option-desc {
  min-width: 0;
  color: var(--text-light);
  font: 500 .66rem/1.25 var(--font);
  opacity: .84;
}
.pd-theme-select-option:hover .pd-theme-option-desc,
.pd-theme-select-option:focus .pd-theme-option-desc,
.pd-theme-select-option.active .pd-theme-option-desc {
  color: inherit;
  opacity: .76;
}
.pd-theme-select-option .pd-select-code {
  align-self: start;
  padding-top: 1px;
}
.pd-theme-select-option[data-value="light"] .pd-theme-swatch { color: #c9a646; }
.pd-theme-select-option[data-value="dark"] .pd-theme-swatch { color: #7d8da1; }
.pd-theme-select-option[data-value="cyber"] .pd-theme-swatch { color: #27f4e5; }
.pd-theme-select-option[data-value="danger"] .pd-theme-swatch { color: #ff4d5f; }
.pd-theme-select-option[data-value="scriptorium"] .pd-theme-swatch { color: #9b6a2f; }


/* Vocabulary theme filter: the same custom select component, optimized for many theme categories. */
.pd-select-menu.pd-theme-filter-menu {
  padding: 10px;
  border-radius: 16px;
  overflow-y: auto;
}
.pd-theme-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}
.pd-theme-filter-option {
  min-height: 46px;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid transparent;
}
.pd-theme-filter-option:hover,
.pd-theme-filter-option:focus,
.pd-theme-filter-option.active {
  border-color: var(--accent);
}
.pd-theme-filter-all {
  grid-column: 1 / -1;
}
.pd-theme-filter-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.pd-theme-filter-option .pd-select-option-text {
  min-width: 0;
  white-space: normal;
  line-height: 1.14;
  overflow: visible;
  text-overflow: clip;
}
.pd-theme-filter-code {
  min-width: 0;
  color: var(--text-light);
  font: 700 .56rem/1 var(--font);
  letter-spacing: .04em;
  opacity: .68;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-theme-filter-count {
  min-width: 22px;
  justify-self: end;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-light);
  font: 800 .62rem/1.15 var(--font);
  text-align: center;
}
.pd-theme-filter-option:hover .pd-theme-filter-code,
.pd-theme-filter-option:focus .pd-theme-filter-code,
.pd-theme-filter-option.active .pd-theme-filter-code {
  color: inherit;
  opacity: .72;
}
@media (max-width: 520px) {
  .pd-select-menu.pd-theme-filter-menu { padding: 8px; }
  .pd-theme-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .pd-theme-filter-option {
    min-height: 42px;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    gap: 6px;
    padding: 8px;
  }
  .pd-theme-filter-code { display: none; }
  .pd-theme-filter-count {
    min-width: 20px;
    padding: 2px 5px;
    font-size: .58rem;
  }
}
@media (max-width: 330px) {
  .pd-theme-filter-grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .pd-select-menu.pd-theme-menu { padding: 8px; }
  .pd-theme-select-grid { gap: 6px; }
  .pd-theme-select-option {
    min-height: 48px;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    padding: 8px;
  }
  .pd-theme-option-desc { display: none; }
}

/* Filter drawer has pointer-events contract; custom select must explicitly receive clicks. */
.filter-drawer .pd-select-wrap,
.filter-drawer .pd-select-button {
  pointer-events: auto !important;
}
.toolbar-right .pd-select-wrap,
.toolbar-right .pd-select-button {
  position: relative;
  z-index: 22 !important;
  pointer-events: auto !important;
}

/* Cyber dropdown = neon alley menu, glassy, cyan retained as theme signature. */
[data-theme="cyber"] .pd-select-button {
  border-radius: 12px !important;
  border-color: rgba(39, 244, 229, 0.34) !important;
  color: #d9fbff !important;
  background:
    linear-gradient(90deg, rgba(39,244,229,0.11), rgba(178,93,255,0.075)),
    rgba(5, 9, 26, 0.92) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.025),
    0 0 14px rgba(39,244,229,0.08) !important;
  font-family: var(--font-mono, "Share Tech Mono", monospace) !important;
  letter-spacing: .035em;
}
[data-theme="cyber"] .pd-select-kicker {
  display: inline-block;
  color: rgba(39,244,229,.72);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
[data-theme="cyber"] .pd-select-button:hover,
[data-theme="cyber"] .pd-select-button:focus,
[data-theme="cyber"] .pd-select-wrap.open .pd-select-button {
  border-color: var(--cy-acid, #d7ff42) !important;
  color: var(--cy-acid, #d7ff42) !important;
  box-shadow:
    0 0 0 1px rgba(215,255,66,.28),
    0 0 18px rgba(39,244,229,.18),
    0 0 30px rgba(178,93,255,.12) !important;
}
[data-theme="cyber"] .pd-select-menu {
  border-radius: 14px;
  border-color: rgba(39,244,229,.38);
  background:
    radial-gradient(circle at 88% 8%, rgba(178,93,255,.22), transparent 10rem),
    linear-gradient(135deg, rgba(39,244,229,.09), transparent 36%),
    rgba(4, 8, 24, .98);
  box-shadow:
    0 0 0 1px rgba(39,244,229,.16),
    0 24px 60px rgba(0,0,0,.58),
    0 0 30px rgba(39,244,229,.16);
}
[data-theme="cyber"] .pd-select-menu-head {
  color: rgba(39,244,229,.82);
  font-family: var(--font-mono, monospace);
}
[data-theme="cyber"] .pd-select-menu-head::before { content: "NEON INDEX // "; color: var(--cy-acid, #d7ff42); }
[data-theme="cyber"] .pd-select-option {
  border-radius: 10px;
  color: #d9fbff;
  font-family: var(--font-mono, monospace);
}
[data-theme="cyber"] .pd-select-option:hover,
[data-theme="cyber"] .pd-select-option:focus {
  background: linear-gradient(90deg, rgba(39,244,229,.16), rgba(178,93,255,.10));
  color: #27f4e5;
}
[data-theme="cyber"] .pd-select-option.active {
  background: linear-gradient(90deg, rgba(215,255,66,.16), rgba(39,244,229,.10));
  color: var(--cy-acid, #d7ff42);
}
[data-theme="cyber"] .pd-select-code { color: rgba(39,244,229,.56); }
[data-theme="cyber"] .pd-select-dot { color: #27f4e5; }
[data-theme="cyber"] .pd-select-option[data-value="danger"] .pd-select-dot { color: #ff4d5f; }
[data-theme="cyber"] .pd-select-option[data-value="cyber"] .pd-select-dot { color: #27f4e5; }
[data-theme="cyber"] .pd-select-option[data-value="dark"] .pd-select-dot { color: #8a9aaa; }
[data-theme="cyber"] .pd-select-option[data-value="light"] .pd-select-dot { color: #d7ff42; }

/* Danger dropdown = access control menu. Uses green/blue/yellow as status accents, not main palette. */
[data-theme="danger"] {
  --dz-safe: #58f0a7;
  --dz-public: #4aa8ff;
  --dz-restricted: #e9ef5a;
  --dz-critical: #ff4d5f;
}
[data-theme="danger"] .pd-select-button {
  border-radius: 1px !important;
  border-color: rgba(255,77,95,.46) !important;
  color: var(--dz-text-2) !important;
  background:
    linear-gradient(90deg, rgba(255,77,95,.13), rgba(255,77,95,.035)),
    #100408 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 0 12px rgba(255,77,95,.09) !important;
  font-family: var(--font-mono, "Share Tech Mono", monospace) !important;
  letter-spacing: .035em;
}
[data-theme="danger"] .pd-select-kicker {
  display: inline-block;
  color: #130508;
  background: var(--dz-red);
  padding: 1px 5px;
  font: 900 .58rem var(--dz-display-font, inherit);
  letter-spacing: .07em;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
}
[data-theme="danger"] .pd-select-button:hover,
[data-theme="danger"] .pd-select-button:focus,
[data-theme="danger"] .pd-select-wrap.open .pd-select-button {
  border-color: var(--dz-red-hot) !important;
  color: var(--dz-red-hot) !important;
  background:
    linear-gradient(90deg, rgba(255,77,95,.22), rgba(125,255,178,.05)),
    #170509 !important;
  box-shadow:
    0 0 0 1px rgba(255,77,95,.24),
    0 0 20px rgba(255,77,95,.18) !important;
}
[data-theme="danger"] .pd-select-menu {
  border-radius: 1px;
  border-color: rgba(255,77,95,.56);
  background:
    linear-gradient(90deg, rgba(255,77,95,.13), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(255,77,95,.18), transparent 10rem),
    #0b0306;
  box-shadow:
    0 0 0 1px rgba(255,77,95,.24),
    0 0 30px rgba(255,77,95,.16),
    0 26px 70px rgba(0,0,0,.66);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
[data-theme="danger"] .pd-select-menu::before {
  content: "";
  position: sticky;
  display: block;
  top: -6px;
  height: 4px;
  margin: -6px -6px 4px;
  background: linear-gradient(90deg, var(--dz-safe) 0 18%, var(--dz-public) 18% 36%, var(--dz-restricted) 36% 54%, var(--dz-red) 54% 100%);
  box-shadow: 0 0 16px rgba(255,77,95,.26);
}
[data-theme="danger"] .pd-select-menu-head {
  color: var(--dz-red-hot);
  font-family: var(--font-mono, monospace);
}
[data-theme="danger"] .pd-select-menu-head::before { content: "ACCESS MENU // "; color: #130508; background: var(--dz-red); padding: 1px 5px; margin-right: 6px; }
[data-theme="danger"] .pd-select-option {
  border-radius: 1px;
  color: var(--dz-text-2);
  font-family: var(--font-mono, monospace);
  border-left: 2px solid rgba(255,77,95,.20);
}
[data-theme="danger"] .pd-select-option:hover,
[data-theme="danger"] .pd-select-option:focus {
  background: linear-gradient(90deg, rgba(255,77,95,.18), rgba(255,77,95,.04));
  color: var(--dz-red-hot);
  border-left-color: var(--dz-red-hot);
}
[data-theme="danger"] .pd-select-option.active {
  background: linear-gradient(90deg, rgba(255,77,95,.26), rgba(255,77,95,.08));
  color: #ffe4e7;
  border-left-color: var(--dz-red);
}
[data-theme="danger"] .pd-select-code { color: rgba(255,77,95,.58); }
[data-theme="danger"] .pd-select-dot { color: var(--dz-red); border-radius: 1px; }

/* Status-color mapping, based on the reference's safe/public/restricted/danger bands. */
[data-theme="danger"] .pd-select-option[data-value="A1"] .pd-select-dot,
[data-theme="danger"] .pd-select-option[data-value="safe"] .pd-select-dot { color: var(--dz-safe); }
[data-theme="danger"] .pd-select-option[data-value="A2"] .pd-select-dot { color: var(--dz-public); }
[data-theme="danger"] .pd-select-option[data-value="B1"] .pd-select-dot { color: var(--dz-restricted); }
[data-theme="danger"] .pd-select-option[data-value="B2"] .pd-select-dot,
[data-theme="danger"] .pd-select-option[data-value="danger"] .pd-select-dot { color: var(--dz-critical); }
[data-theme="danger"] .pd-select-option[data-value="extra"] .pd-select-dot { color: var(--dz-magenta); }
[data-theme="danger"] .pd-select-option[data-value="cyber"] .pd-select-dot { color: #27f4e5; }
[data-theme="danger"] .pd-select-option[data-value="dark"] .pd-select-dot { color: var(--dz-public); }
[data-theme="danger"] .pd-select-option[data-value="light"] .pd-select-dot { color: var(--dz-restricted); }
[data-theme="danger"] .pd-select-option[data-value="m"] .pd-select-dot { color: var(--dz-critical); }
[data-theme="danger"] .pd-select-option[data-value="f"] .pd-select-dot { color: var(--dz-safe); }
[data-theme="danger"] .pd-select-option[data-value="n"] .pd-select-dot { color: var(--dz-public); }
[data-theme="danger"] .pd-select-option[data-value="alpha"] .pd-select-dot { color: var(--dz-safe); }
[data-theme="danger"] .pd-select-option[data-value="alpha_desc"] .pd-select-dot { color: var(--dz-public); }
[data-theme="danger"] .pd-select-option[data-value="pos"] .pd-select-dot { color: var(--dz-restricted); }
[data-theme="danger"] .pd-select-option[data-value="number"] .pd-select-dot { color: var(--dz-critical); }

/* Danger interface upgrade: use green/blue/yellow as status bands, red remains command color. */
[data-theme="danger"] .toolbar::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -1px;
  height: 4px;
  background: linear-gradient(90deg,
    var(--dz-safe) 0 18%,
    rgba(88,240,167,.16) 18% 22%,
    var(--dz-public) 22% 39%,
    rgba(74,168,255,.16) 39% 43%,
    var(--dz-restricted) 43% 60%,
    rgba(233,239,90,.16) 60% 64%,
    var(--dz-red) 64% 100%);
  opacity: .78;
  box-shadow: 0 0 16px rgba(255,77,95,.18);
  pointer-events: none;
}
[data-theme="danger"] .filter-drawer::after {
  content: "SAFE  PUBLIC  RESTRICTED  DANGER" !important;
  position: absolute;
  right: 22px;
  top: 7px;
  color: rgba(255,228,231,.32);
  font: 700 .58rem var(--font-mono, monospace);
  letter-spacing: .12em;
  pointer-events: none;
}
[data-theme="danger"] .word-card {
  background-image:
    linear-gradient(180deg, var(--dz-safe) 0 22%, var(--dz-public) 22% 44%, var(--dz-restricted) 44% 66%, var(--dz-red) 66% 100%),
    linear-gradient(90deg, rgba(255, 77, 95, 0.12) 0 54px, transparent 54px),
    linear-gradient(135deg, rgba(255, 77, 95, 0.11), transparent 34%) !important;
  background-size: 4px calc(100% - 24px), auto, auto !important;
  background-position: 58px 12px, 0 0, 0 0 !important;
  background-repeat: no-repeat !important;
}
[data-theme="danger"] .level-badge.level-a1 {
  color: var(--dz-safe) !important;
  border-color: rgba(88,240,167,.36) !important;
  background: rgba(88,240,167,.11) !important;
}
[data-theme="danger"] .level-badge.level-a2 {
  color: var(--dz-public) !important;
  border-color: rgba(74,168,255,.36) !important;
  background: rgba(74,168,255,.11) !important;
}
[data-theme="danger"] .level-badge.level-b1 {
  color: var(--dz-restricted) !important;
  border-color: rgba(233,239,90,.38) !important;
  background: rgba(233,239,90,.11) !important;
}
[data-theme="danger"] .level-badge.level-b2 {
  color: var(--dz-red-hot) !important;
  border-color: rgba(255,77,95,.44) !important;
  background: rgba(255,77,95,.13) !important;
}
[data-theme="danger"] .level-badge.level-extra {
  color: var(--dz-magenta) !important;
  border-color: rgba(255,63,134,.42) !important;
  background: rgba(255,63,134,.12) !important;
}
[data-theme="danger"] .level-badge.level-a1::before { content: "T1 "; }
[data-theme="danger"] .level-badge.level-a2::before { content: "T2 "; }
[data-theme="danger"] .level-badge.level-b1::before { content: "T3 "; }
[data-theme="danger"] .level-badge.level-b2::before { content: "T4 "; }
[data-theme="danger"] .level-badge.level-extra::before { content: "X "; }

@media (max-width: 768px) {
  .pd-select-menu {
    max-width: calc(100vw - 16px) !important;
  }
  .pd-select-kind-sort .pd-select-button,
  .pd-select-kind-theme .pd-select-button { min-width: 112px; }
  .pd-select-kicker { display: none !important; }
  [data-theme="danger"] .filter-drawer::after { display: none; }
  [data-theme="danger"] .toolbar::after { left: 12px; right: 12px; }
  [data-theme="danger"] .word-card {
    background-position: 8px 52px, 0 0, 0 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-select-menu { animation: none !important; }
}


/* ============================================================
   20260708 V5.8 Danger System Polish
   - Filter drawer becomes an opaque terminal shield, so toolbar/result text can no longer bleed through it while scrolling.
   - Removed the loose green/blue/yellow status stripes from toolbar/cards.
   - Rebuilt Danger filter groups as a five-channel color system: Initial / POS / Theme / Gender / Level.
   - Added Cyber-style hover glitch to the filter toggle; Danger title/toggle get an alarm-scan hover.
   ============================================================ */

[data-theme="danger"] {
  --dz-filter-initial: #ff5a63;
  --dz-filter-initial-soft: rgba(255, 90, 99, 0.13);
  --dz-filter-initial-line: rgba(255, 90, 99, 0.52);
  --dz-filter-initial-glow: rgba(255, 90, 99, 0.22);

  --dz-filter-pos: #42f4e8;
  --dz-filter-pos-soft: rgba(66, 244, 232, 0.11);
  --dz-filter-pos-line: rgba(66, 244, 232, 0.46);
  --dz-filter-pos-glow: rgba(66, 244, 232, 0.18);

  --dz-filter-theme: #f4cf5a;
  --dz-filter-theme-soft: rgba(244, 207, 90, 0.11);
  --dz-filter-theme-line: rgba(244, 207, 90, 0.42);
  --dz-filter-theme-glow: rgba(244, 207, 90, 0.16);

  --dz-filter-gender: #ff9d4d;
  --dz-filter-gender-soft: rgba(255, 157, 77, 0.12);
  --dz-filter-gender-line: rgba(255, 157, 77, 0.46);
  --dz-filter-gender-glow: rgba(255, 157, 77, 0.18);

  --dz-filter-level: #62ee9d;
  --dz-filter-level-soft: rgba(98, 238, 157, 0.10);
  --dz-filter-level-line: rgba(98, 238, 157, 0.40);
  --dz-filter-level-glow: rgba(98, 238, 157, 0.16);
}

/* Opaque sticky shield: fixes the "1720 results / CHANNEL:SORT" bleed-through. */
[data-theme="danger"] .filter-bar.filter-drawer {
  z-index: 86 !important;
  background:
    linear-gradient(90deg, rgba(255, 90, 99, 0.18), rgba(8, 3, 7, 0.99) 18%, rgba(8, 3, 7, 0.99) 78%, rgba(66, 244, 232, 0.08)),
    #080307 !important;
  border-bottom: 1px solid rgba(255, 90, 99, 0.56) !important;
  box-shadow:
    inset 0 -1px 0 rgba(66, 244, 232, 0.10),
    0 12px 30px rgba(0, 0, 0, 0.62),
    0 0 26px rgba(255, 90, 99, 0.16) !important;
  backdrop-filter: none !important;
}
[data-theme="danger"] .filter-bar.filter-drawer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 90, 99, 0.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 90, 99, 0.026) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 90, 99, 0.08), transparent 58%);
  background-size: 34px 34px, 34px 34px, 100% 100%;
  opacity: 0.82;
}
[data-theme="danger"] .filter-bar.filter-drawer > * {
  position: relative;
  z-index: 1;
}
[data-theme="danger"] .toolbar {
  z-index: 1 !important;
  background:
    linear-gradient(90deg, rgba(255, 90, 99, 0.09), transparent 46%, rgba(66, 244, 232, 0.04)),
    #070307 !important;
  border-bottom: 1px solid rgba(255, 90, 99, 0.16) !important;
}
[data-theme="danger"] .toolbar::after,
[data-theme="danger"] .filter-drawer::after {
  display: none !important;
  content: none !important;
}

/* Remove the previous random status stripes from cards; keep the card as a red-black data packet. */
[data-theme="danger"] .word-card {
  background:
    linear-gradient(135deg, rgba(255, 90, 99, 0.12), transparent 32%),
    linear-gradient(225deg, rgba(66, 244, 232, 0.055), transparent 34%),
    rgba(13, 5, 9, 0.94) !important;
  background-size: auto !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
}
[data-theme="danger"] .word-card::before {
  width: 3px !important;
  background: linear-gradient(180deg, var(--dz-red), rgba(255, 90, 99, 0.34), var(--dz-cyan)) !important;
}

/* Filter color system: five consistent access channels. */
[data-theme="danger"] .filter-inner {
  align-items: stretch;
  gap: 8px;
}
[data-theme="danger"] .filter-group {
  --dz-fg: var(--dz-filter-initial);
  --dz-fg-soft: var(--dz-filter-initial-soft);
  --dz-fg-line: var(--dz-filter-initial-line);
  --dz-fg-glow: var(--dz-filter-initial-glow);
  position: relative;
  min-height: 43px;
  padding: 7px 8px 8px 10px;
  border: 1px solid var(--dz-fg-line);
  background:
    linear-gradient(90deg, var(--dz-fg-soft), rgba(18, 7, 11, 0.88) 38%, rgba(18, 7, 11, 0.96)),
    #100408;
  box-shadow:
    inset 3px 0 0 var(--dz-fg),
    inset 0 0 0 1px rgba(255,255,255,0.018),
    0 0 14px var(--dz-fg-glow);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
[data-theme="danger"] .filter-group-initial {
  --dz-fg: var(--dz-filter-initial);
  --dz-fg-soft: var(--dz-filter-initial-soft);
  --dz-fg-line: var(--dz-filter-initial-line);
  --dz-fg-glow: var(--dz-filter-initial-glow);
}
[data-theme="danger"] .filter-group-pos {
  --dz-fg: var(--dz-filter-pos);
  --dz-fg-soft: var(--dz-filter-pos-soft);
  --dz-fg-line: var(--dz-filter-pos-line);
  --dz-fg-glow: var(--dz-filter-pos-glow);
}
[data-theme="danger"] .filter-group-theme {
  --dz-fg: var(--dz-filter-theme);
  --dz-fg-soft: var(--dz-filter-theme-soft);
  --dz-fg-line: var(--dz-filter-theme-line);
  --dz-fg-glow: var(--dz-filter-theme-glow);
}
[data-theme="danger"] .filter-group-gender {
  --dz-fg: var(--dz-filter-gender);
  --dz-fg-soft: var(--dz-filter-gender-soft);
  --dz-fg-line: var(--dz-filter-gender-line);
  --dz-fg-glow: var(--dz-filter-gender-glow);
}
[data-theme="danger"] .filter-group-level {
  --dz-fg: var(--dz-filter-level);
  --dz-fg-soft: var(--dz-filter-level-soft);
  --dz-fg-line: var(--dz-filter-level-line);
  --dz-fg-glow: var(--dz-filter-level-glow);
}
[data-theme="danger"] .filter-group::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 6px;
  width: 6px;
  height: 6px;
  background: var(--dz-fg);
  box-shadow: 0 0 10px var(--dz-fg);
  pointer-events: none;
}
[data-theme="danger"] .filter-group .filter-label {
  color: var(--dz-fg) !important;
  text-shadow: 0 0 10px var(--dz-fg-glow);
  letter-spacing: 0.10em;
}
[data-theme="danger"] .filter-group-initial .filter-label::before { content: "INI // "; color: var(--dz-text-3); }
[data-theme="danger"] .filter-group-pos .filter-label::before { content: "POS // "; color: var(--dz-text-3); }
[data-theme="danger"] .filter-group-theme .filter-label::before { content: "THM // "; color: var(--dz-text-3); }
[data-theme="danger"] .filter-group-gender .filter-label::before { content: "GEN // "; color: var(--dz-text-3); }
[data-theme="danger"] .filter-group-level .filter-label::before { content: "LVL // "; color: var(--dz-text-3); }

[data-theme="danger"] .filter-group .letter-filter button,
[data-theme="danger"] .filter-group .filter-chip,
[data-theme="danger"] .filter-group .mode-toggle,
[data-theme="danger"] .filter-group .select-filter,
[data-theme="danger"] .filter-group .pd-select-button {
  border-color: var(--dz-fg-line) !important;
  color: var(--dz-text-2) !important;
  background:
    linear-gradient(90deg, var(--dz-fg-soft), rgba(8, 3, 7, 0.90) 62%),
    #0d0307 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.018) !important;
}
[data-theme="danger"] .filter-group .letter-filter button:hover,
[data-theme="danger"] .filter-group .letter-filter button:focus,
[data-theme="danger"] .filter-group .filter-chip:hover,
[data-theme="danger"] .filter-group .filter-chip:focus,
[data-theme="danger"] .filter-group .mode-toggle:hover,
[data-theme="danger"] .filter-group .mode-toggle:focus,
[data-theme="danger"] .filter-group .pd-select-button:hover,
[data-theme="danger"] .filter-group .pd-select-button:focus,
[data-theme="danger"] .filter-group .pd-select-wrap.open .pd-select-button {
  border-color: var(--dz-fg) !important;
  color: var(--dz-fg) !important;
  background:
    linear-gradient(90deg, var(--dz-fg-soft), rgba(8, 3, 7, 0.96) 58%),
    #0f0408 !important;
  box-shadow:
    0 0 0 1px var(--dz-fg-line),
    0 0 18px var(--dz-fg-glow) !important;
}
[data-theme="danger"] .filter-group .letter-filter button.active,
[data-theme="danger"] .filter-group .filter-chip.include {
  border-color: var(--dz-fg) !important;
  background: var(--dz-fg-soft) !important;
  color: var(--dz-fg) !important;
  box-shadow:
    0 0 0 1px var(--dz-fg-line),
    0 0 16px var(--dz-fg-glow) !important;
}
[data-theme="danger"] .filter-group .filter-chip.exclude,
[data-theme="danger"] .filter-group .mode-toggle[data-mode="exclude"] {
  border-color: var(--dz-red-hot) !important;
  background: rgba(255, 90, 99, 0.16) !important;
  color: var(--dz-red-hot) !important;
  text-decoration-color: var(--dz-red-hot) !important;
}
[data-theme="danger"] .divider {
  background: linear-gradient(180deg, transparent, rgba(255, 90, 99, 0.20), transparent) !important;
}

/* Portal dropdowns now inherit a channel accent instead of a loose status stripe. */
[data-theme="danger"] .pd-select-menu {
  --dz-menu-accent: var(--dz-red);
  --dz-menu-soft: rgba(255, 90, 99, 0.13);
  --dz-menu-line: rgba(255, 90, 99, 0.52);
  border-color: var(--dz-menu-line) !important;
  background:
    linear-gradient(90deg, var(--dz-menu-soft), transparent 36%),
    #0b0306 !important;
  box-shadow:
    0 0 0 1px var(--dz-menu-line),
    0 0 28px rgba(255, 90, 99, 0.14),
    0 26px 70px rgba(0,0,0,.66) !important;
}
[data-theme="danger"] .pd-select-menu.pd-select-kind-theme {
  --dz-menu-accent: var(--dz-filter-theme);
  --dz-menu-soft: var(--dz-filter-theme-soft);
  --dz-menu-line: var(--dz-filter-theme-line);
}
[data-theme="danger"] .pd-select-menu.pd-select-kind-gender {
  --dz-menu-accent: var(--dz-filter-gender);
  --dz-menu-soft: var(--dz-filter-gender-soft);
  --dz-menu-line: var(--dz-filter-gender-line);
}
[data-theme="danger"] .pd-select-menu.pd-select-kind-level {
  --dz-menu-accent: var(--dz-filter-level);
  --dz-menu-soft: var(--dz-filter-level-soft);
  --dz-menu-line: var(--dz-filter-level-line);
}
[data-theme="danger"] .pd-select-menu.pd-select-kind-sort,
[data-theme="danger"] .pd-select-menu.pd-select-kind-visual-theme {
  --dz-menu-accent: var(--dz-filter-pos);
  --dz-menu-soft: var(--dz-filter-pos-soft);
  --dz-menu-line: var(--dz-filter-pos-line);
}
[data-theme="danger"] .pd-select-menu::before {
  height: 3px !important;
  margin: -6px -6px 5px !important;
  background: linear-gradient(90deg, var(--dz-menu-accent), rgba(255,255,255,0.08), var(--dz-menu-accent)) !important;
  box-shadow: 0 0 14px var(--dz-menu-line) !important;
}
[data-theme="danger"] .pd-select-menu-head {
  color: var(--dz-menu-accent) !important;
}
[data-theme="danger"] .pd-select-menu-head::before {
  background: var(--dz-menu-accent) !important;
  color: #100407 !important;
}
[data-theme="danger"] .pd-select-option {
  border-left-color: var(--dz-menu-line) !important;
}
[data-theme="danger"] .pd-select-option:hover,
[data-theme="danger"] .pd-select-option:focus,
[data-theme="danger"] .pd-select-option.active {
  color: var(--dz-menu-accent) !important;
  background: var(--dz-menu-soft) !important;
  border-left-color: var(--dz-menu-accent) !important;
}
[data-theme="danger"] .pd-select-dot {
  color: var(--dz-menu-accent) !important;
}

/* Cyber toggle: same family as the existing logo hover glitch. */
[data-theme="cyber"] .filter-handle:hover .filter-toggle-text,
[data-theme="cyber"] .filter-handle:focus-visible .filter-toggle-text {
  animation: pd-cyber-glitch 0.5s steps(2, jump-none) 1;
}
[data-theme="cyber"] .filter-handle::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cy-cyan), var(--cy-magenta), transparent);
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
[data-theme="cyber"] .filter-handle:hover::after,
[data-theme="cyber"] .filter-handle:focus-visible::after {
  opacity: .9;
  transform: translateX(0);
}

/* Danger title/toggle: alarm console behavior, not neon street behavior. */
[data-theme="danger"] .filter-panel-title {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 9px;
  color: var(--dz-red-hot) !important;
  background: linear-gradient(90deg, rgba(255, 90, 99, 0.18), rgba(255, 90, 99, 0.04));
  border-left: 3px solid var(--dz-red);
  text-shadow: 0 0 14px rgba(255,90,99,.26);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
[data-theme="danger"] .filter-panel-title:hover,
[data-theme="danger"] .filter-handle:hover .filter-toggle-text,
[data-theme="danger"] .filter-handle:focus-visible .filter-toggle-text {
  animation: pd-danger-alarm-text .48s steps(2, jump-none) 1;
}
[data-theme="danger"] .filter-handle {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 90, 99, 0.52) !important;
  color: var(--dz-red-hot) !important;
  background:
    linear-gradient(90deg, rgba(255, 90, 99, 0.22), rgba(66, 244, 232, 0.05)),
    #100408 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 0 18px rgba(255, 90, 99, 0.18) !important;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
[data-theme="danger"] .filter-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  left: -44px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 90, 99, 0.42), transparent);
  transform: skewX(-18deg);
}
[data-theme="danger"] .filter-handle:hover::before,
[data-theme="danger"] .filter-handle:focus-visible::before {
  animation: pd-danger-scan-line .62s ease-out 1;
}
[data-theme="danger"] .filter-handle .filter-toggle-chevron {
  color: var(--dz-cyan);
  text-shadow: 0 0 10px rgba(66,244,232,.24);
}
[data-theme="danger"] .filter-handle .filter-toggle-badge {
  background: var(--dz-red) !important;
  color: #120407 !important;
  border-radius: 1px !important;
}

@keyframes pd-danger-alarm-text {
  0%, 100% { text-shadow: 0 0 12px rgba(255,90,99,.30); transform: translateX(0); }
  28% { text-shadow: 2px 0 var(--dz-cyan), -2px 0 var(--dz-red); transform: translateX(-1px); }
  54% { text-shadow: -2px 0 var(--dz-red), 2px 0 var(--dz-cyan); transform: translateX(1px); }
  76% { text-shadow: 1px 0 var(--dz-filter-theme), -1px 0 var(--dz-red); transform: translateX(0); }
}
@keyframes pd-danger-scan-line {
  from { left: -44px; opacity: 0; }
  12% { opacity: 1; }
  to { left: calc(100% + 20px); opacity: 0; }
}

@media (max-width: 768px) {
  [data-theme="danger"] .filter-inner {
    gap: 7px;
  }
  [data-theme="danger"] .filter-group {
    width: 100%;
    padding: 7px 8px 8px 10px;
  }
  [data-theme="danger"] .filter-group .pd-select-wrap,
  [data-theme="danger"] .filter-group .pd-select-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="cyber"] .filter-handle:hover .filter-toggle-text,
  [data-theme="cyber"] .filter-handle:focus-visible .filter-toggle-text,
  [data-theme="danger"] .filter-panel-title:hover,
  [data-theme="danger"] .filter-handle:hover .filter-toggle-text,
  [data-theme="danger"] .filter-handle:focus-visible .filter-toggle-text,
  [data-theme="danger"] .filter-handle:hover::before,
  [data-theme="danger"] .filter-handle:focus-visible::before {
    animation: none !important;
  }
}

/* ============================================================
   20260708 V5.9 Danger Detail Pass
   - Restore list cards as red-black ENTRY packets with ENTER hint.
   - Remove leftover green/blue/yellow card rails and unreadable level badge colors.
   - Improve left filter title contrast and right card meta readability.
   - Replace Danger glitch-like hover with alarm-lamp scan/pulse behavior.
   ============================================================ */

/* Danger header/logo alarm behavior: warning lamp, not cyber glitch. */
[data-theme="danger"] .logo {
  position: relative;
  isolation: isolate;
  padding: 2px 6px 3px 4px;
  overflow: visible;
}
[data-theme="danger"] .logo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--dz-red-hot), rgba(255,255,255,.58), var(--dz-red-hot), transparent);
  box-shadow: 0 0 16px rgba(255, 90, 99, .38);
  opacity: 0;
  transform: scaleX(.18);
  transform-origin: 50% 50%;
}
[data-theme="danger"] .logo:hover,
[data-theme="danger"] .logo:focus-within {
  animation: pd-danger-lamp-pulse .72s ease-out 1;
}
[data-theme="danger"] .logo:hover::after,
[data-theme="danger"] .logo:focus-within::after {
  animation: pd-danger-lamp-scan .72s ease-out 1;
}

/* Left filter title: inverse warning plate so red text no longer sits on red backing. */
[data-theme="danger"] .filter-panel-title {
  color: #140408 !important;
  background:
    linear-gradient(90deg, var(--dz-red-hot), var(--dz-red) 58%, #df3446) !important;
  border-left: 0 !important;
  border: 1px solid rgba(255, 128, 132, .72);
  box-shadow:
    0 0 0 1px rgba(255, 90, 99, .22),
    0 0 18px rgba(255, 90, 99, .25) !important;
  text-shadow: none !important;
  font-weight: 950;
}
[data-theme="danger"] .filter-panel-title::before,
[data-theme="danger"] .filter-panel-title::after {
  color: rgba(20, 4, 8, .72) !important;
  text-shadow: none !important;
}
[data-theme="danger"] .filter-panel-title:hover,
[data-theme="danger"] .filter-panel-title:focus-visible {
  animation: pd-danger-lamp-pulse .68s ease-out 1 !important;
}

/* Group labels also become readable command tabs; this fixes the Initial block's red-on-red problem. */
[data-theme="danger"] .filter-group .filter-label {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 6px 2px;
  margin-right: 6px;
  color: #100408 !important;
  background: var(--dz-fg) !important;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 12px var(--dz-fg-glow);
  text-shadow: none !important;
  font-weight: 900;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
[data-theme="danger"] .filter-group .filter-label::before {
  color: rgba(16, 4, 8, .64) !important;
}

/* Right-side select/control meta: stronger contrast in Danger. */
[data-theme="danger"] .pd-select-button,
[data-theme="danger"] .theme-select,
[data-theme="danger"] .select-filter {
  color: #ffe8eb !important;
  border-color: rgba(255, 112, 119, .58) !important;
  background:
    linear-gradient(90deg, rgba(255, 90, 99, .16), rgba(8, 3, 7, .94) 58%),
    #0a0306 !important;
}
[data-theme="danger"] .pd-select-kicker {
  color: #140408 !important;
  background: var(--dz-red-hot) !important;
  box-shadow: 0 0 10px rgba(255, 90, 99, .24);
}
[data-theme="danger"] .pd-select-label {
  color: #fff1f2;
  text-shadow: 0 0 10px rgba(255, 90, 99, .18);
}
[data-theme="danger"] .filter-group .pd-select-button .pd-select-label {
  color: var(--dz-fg) !important;
}
[data-theme="danger"] .filter-group .pd-select-button .pd-select-kicker {
  color: #100408 !important;
  background: var(--dz-fg) !important;
}

/* Word cards: return to ENTRY packet style, but without the loose colored vertical rail. */
[data-theme="danger"] .word-card {
  padding-top: 25px !important;
  padding-bottom: 14px !important;
  border-color: rgba(255, 90, 99, .38) !important;
  background:
    linear-gradient(90deg, rgba(255, 90, 99, .10), transparent 30%),
    linear-gradient(135deg, rgba(255, 90, 99, .075), transparent 36%),
    #0d0408 !important;
  background-image:
    linear-gradient(90deg, rgba(255, 90, 99, .10), transparent 30%),
    linear-gradient(135deg, rgba(255, 90, 99, .075), transparent 36%) !important;
  background-size: auto !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    inset 0 1px 0 rgba(255, 90, 99, .14),
    0 16px 38px rgba(0, 0, 0, .46) !important;
}
[data-theme="danger"] .word-card::before {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  top: 10px !important;
  bottom: auto !important;
  width: 14px !important;
  height: 14px !important;
  background: transparent !important;
  border-left: 2px solid var(--dz-red-hot) !important;
  border-top: 2px solid var(--dz-red-hot) !important;
  box-shadow: -3px -3px 12px rgba(255, 90, 99, .28) !important;
  pointer-events: none !important;
}
[data-theme="danger"] .word-card::after {
  content: attr(data-entry-code) !important;
  top: 11px !important;
  right: 17px !important;
  color: var(--dz-red-hot) !important;
  font: 900 .58rem var(--dz-display-font) !important;
  letter-spacing: .12em !important;
  opacity: .96 !important;
  text-shadow: 0 0 10px rgba(255,90,99,.30);
  background: rgba(8, 3, 7, .72);
  padding: 0 4px;
  border-left: 1px solid rgba(255,90,99,.34);
}
[data-theme="danger"] .word-card:hover::after {
  color: #120407 !important;
  background: var(--dz-red-hot);
  text-shadow: none;
}
[data-theme="danger"] .word-card .word-top {
  padding-right: 96px;
}

/* Level badge: no green/yellow/magenta leftovers on list cards. Keep compact terminal metadata. */
[data-theme="danger"] .word-card .level-badge,
[data-theme="danger"] .word-card .level-badge.beginner,
[data-theme="danger"] .word-card .level-badge.intermediate,
[data-theme="danger"] .word-card .level-badge.advanced,
[data-theme="danger"] .word-card .level-badge.extra,
[data-theme="danger"] .word-card .level-badge.level-a1,
[data-theme="danger"] .word-card .level-badge.level-a2,
[data-theme="danger"] .word-card .level-badge.level-b1,
[data-theme="danger"] .word-card .level-badge.level-b2,
[data-theme="danger"] .word-card .level-badge.level-extra {
  top: 29px !important;
  right: 17px !important;
  min-width: 54px;
  height: 20px;
  padding: 2px 7px !important;
  text-align: center;
  border-radius: 1px !important;
  border: 1px solid rgba(255, 90, 99, .56) !important;
  color: #ffe8eb !important;
  background:
    linear-gradient(90deg, rgba(255, 90, 99, .22), rgba(255, 90, 99, .08)),
    #100408 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 0 12px rgba(255, 90, 99, .16) !important;
  font: 900 .62rem var(--dz-display-font) !important;
  letter-spacing: .075em !important;
}
[data-theme="danger"] .word-card .level-badge.level-a1::before { content: "T1 // " !important; color: var(--dz-red-hot); }
[data-theme="danger"] .word-card .level-badge.level-a2::before { content: "T2 // " !important; color: var(--dz-red-hot); }
[data-theme="danger"] .word-card .level-badge.level-b1::before { content: "T3 // " !important; color: var(--dz-red-hot); }
[data-theme="danger"] .word-card .level-badge.level-b2::before { content: "T4 // " !important; color: var(--dz-red-hot); }
[data-theme="danger"] .word-card .level-badge.level-extra::before { content: "TX // " !important; color: var(--dz-red-hot); }

/* POS/gender/theme tags in cards are red-black system tags; no random traffic-light colors. */
[data-theme="danger"] .word-card .pos-tag,
[data-theme="danger"] .word-card .pos-tag.noun,
[data-theme="danger"] .word-card .pos-tag.verb,
[data-theme="danger"] .word-card .pos-tag.adj,
[data-theme="danger"] .word-card .pos-tag.adjective,
[data-theme="danger"] .word-card .pos-tag.adv,
[data-theme="danger"] .word-card .pos-tag.adverb,
[data-theme="danger"] .word-card .pos-tag.numeral,
[data-theme="danger"] .word-card .pos-tag.pron,
[data-theme="danger"] .word-card .pos-tag.pronoun,
[data-theme="danger"] .word-card .pos-tag.prep,
[data-theme="danger"] .word-card .pos-tag.conj,
[data-theme="danger"] .word-card .pos-tag.phr,
[data-theme="danger"] .word-card .pos-tag.interj {
  color: #ffd7dc !important;
  border-color: rgba(255, 90, 99, .44) !important;
  background: rgba(255, 90, 99, .12) !important;
}
[data-theme="danger"] .word-card .card-footer .theme-tag {
  color: #d8a6ad !important;
  border-color: rgba(255, 90, 99, .30) !important;
  background: rgba(255, 90, 99, .075) !important;
}
[data-theme="danger"] .word-card .card-footer .theme-tag:hover {
  color: var(--dz-red-hot) !important;
  border-color: rgba(255, 90, 99, .52) !important;
}

/* ENTER affordance restored in footer, without occupying the old colored rail. */
[data-theme="danger"] .word-card .card-actions {
  align-items: center;
  gap: 7px;
}
[data-theme="danger"] .word-card .card-actions::before {
  content: "ENTER";
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 6px 2px;
  border: 1px solid rgba(255, 90, 99, .40);
  color: var(--dz-red-hot);
  background: rgba(255, 90, 99, .08);
  font: 900 .55rem var(--dz-display-font);
  letter-spacing: .11em;
  box-shadow: 0 0 10px rgba(255, 90, 99, .12);
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
}
[data-theme="danger"] .word-card:hover .card-actions::before {
  color: #130407;
  background: var(--dz-red-hot);
  border-color: var(--dz-red-hot);
  box-shadow: 0 0 16px rgba(255, 90, 99, .28);
}
[data-theme="danger"] .word-card .tts-btn {
  color: #ffd7dc !important;
  background: transparent !important;
}

/* Danger filter button: alarm scan only, no RGB displacement/glitch feel. */
[data-theme="danger"] .filter-handle,
[data-theme="danger"] .filter-toggle {
  position: relative;
  overflow: hidden;
}
[data-theme="danger"] .filter-handle:hover,
[data-theme="danger"] .filter-handle:focus-visible,
[data-theme="danger"] .filter-toggle:hover,
[data-theme="danger"] .filter-toggle:focus-visible {
  animation: pd-danger-lamp-pulse .72s ease-out 1 !important;
}
[data-theme="danger"] .filter-handle:hover .filter-toggle-text,
[data-theme="danger"] .filter-handle:focus-visible .filter-toggle-text {
  animation: none !important;
  color: #ffe8eb !important;
  text-shadow: 0 0 12px rgba(255, 90, 99, .34) !important;
}
[data-theme="danger"] .filter-handle::before {
  background: linear-gradient(90deg, transparent, rgba(255, 235, 238, .66), rgba(255, 90, 99, .50), transparent) !important;
}
[data-theme="danger"] .filter-toggle-chevron {
  transition: transform .22s ease, color .18s ease, text-shadow .18s ease !important;
}

@keyframes pd-danger-lamp-pulse {
  0%, 100% {
    filter: brightness(1);
    box-shadow: 0 0 14px rgba(255,90,99,.16);
  }
  18% {
    filter: brightness(1.18);
    box-shadow: 0 0 20px rgba(255,90,99,.36), 0 0 32px rgba(255,90,99,.18);
  }
  38% {
    filter: brightness(.96);
    box-shadow: 0 0 10px rgba(255,90,99,.12);
  }
  58% {
    filter: brightness(1.12);
    box-shadow: 0 0 18px rgba(255,90,99,.30), 0 0 28px rgba(255,90,99,.14);
  }
}
@keyframes pd-danger-lamp-scan {
  0% { opacity: 0; transform: translateX(-18%) scaleX(.12); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: translateX(18%) scaleX(1); }
}

@media (max-width: 768px) {
  [data-theme="danger"] .word-card .word-top { padding-right: 78px; }
  [data-theme="danger"] .word-card::after { right: 12px !important; }
  [data-theme="danger"] .word-card .level-badge { right: 12px !important; min-width: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="danger"] .logo:hover,
  [data-theme="danger"] .logo:focus-within,
  [data-theme="danger"] .logo:hover::after,
  [data-theme="danger"] .logo:focus-within::after,
  [data-theme="danger"] .filter-panel-title:hover,
  [data-theme="danger"] .filter-panel-title:focus-visible,
  [data-theme="danger"] .filter-handle:hover,
  [data-theme="danger"] .filter-handle:focus-visible,
  [data-theme="danger"] .filter-toggle:hover,
  [data-theme="danger"] .filter-toggle:focus-visible {
    animation: none !important;
  }
}


/* ============================================================
   20260708 V6.0 Theme Stability Sweep
   Goal: keep Cyber/Danger visually rich, but restore the basic layout contracts:
   sticky header/filter, fixed detail overlay, fixed feedback FAB, clickable dropdown portal.
   This section intentionally comes last to neutralize older experimental overrides.
   ============================================================ */

/* 1) Global stacking contract. Older Cyber/Danger blocks temporarily changed fixed/sticky
   elements to relative; these guards restore expected UI behavior. */
[data-theme="cyber"] .header,
[data-theme="danger"] .header {
  position: sticky !important;
  top: 0 !important;
  z-index: 300 !important;
  isolation: isolate;
}
[data-theme="cyber"] .filter-bar.filter-drawer,
[data-theme="danger"] .filter-bar.filter-drawer {
  position: sticky !important;
  top: var(--header-h) !important;
  z-index: 290 !important;
  overflow: visible !important;
  isolation: isolate;
}
[data-theme="cyber"] .toolbar,
[data-theme="danger"] .toolbar {
  position: relative !important;
  z-index: 2 !important;
}
[data-theme="cyber"] .main,
[data-theme="danger"] .main,
[data-theme="cyber"] .data-attribution,
[data-theme="danger"] .data-attribution {
  position: relative !important;
  z-index: 1 !important;
}

/* 2) Detail modal must always be a fixed viewport overlay in every theme. */
[data-theme="cyber"] .detail-overlay,
[data-theme="danger"] .detail-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 900 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
[data-theme="cyber"] .detail-overlay.open,
[data-theme="danger"] .detail-overlay.open {
  display: flex !important;
}
[data-theme="cyber"] .detail-modal,
[data-theme="danger"] .detail-modal {
  position: relative !important;
  z-index: 901 !important;
  max-height: min(90vh, calc(100dvh - 36px)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

/* 3) Feedback FAB: never let theme container rules turn it into a normal-flow element. */
[data-theme="cyber"] .feedback-fab,
[data-theme="danger"] .feedback-fab {
  position: fixed !important;
  right: max(18px, env(safe-area-inset-right, 0px) + 14px) !important;
  bottom: max(18px, env(safe-area-inset-bottom, 0px) + 14px) !important;
  z-index: 820 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 52px !important;
  min-height: 44px !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: .96 !important;
  text-decoration: none !important;
}
[data-theme="cyber"] .detail-overlay.open ~ .feedback-fab,
[data-theme="danger"] .detail-overlay.open ~ .feedback-fab {
  opacity: .16 !important;
  pointer-events: none !important;
}
[data-theme="cyber"] .feedback-fab {
  border: 1px solid rgba(39,244,229,.38) !important;
  background: linear-gradient(135deg, var(--cy-lime, #d7ff42), var(--cy-cyan, #27f4e5), var(--cy-magenta, #ff3df2)) !important;
  color: #050515 !important;
  box-shadow:
    0 0 18px rgba(184,255,77,.28),
    0 14px 34px rgba(37,247,255,.20) !important;
}
[data-theme="danger"] .feedback-fab {
  border-radius: 2px !important;
  border: 1px solid rgba(255, 90, 99, .70) !important;
  background:
    linear-gradient(90deg, var(--dz-red-hot, #ff5a63), var(--dz-red, #ff3048)) !important;
  color: #130407 !important;
  font: 900 .78rem var(--dz-display-font, var(--font)) !important;
  letter-spacing: .08em !important;
  box-shadow:
    0 0 0 1px rgba(255,90,99,.20),
    0 0 20px rgba(255,90,99,.28),
    0 14px 34px rgba(0,0,0,.38) !important;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)) !important;
}
[data-theme="danger"] .feedback-fab::before {
  content: "REPORT // ";
  color: rgba(19, 4, 7, .72);
}

/* 4) Dropdown portal always floats above sticky bars and modals are the only thing above it. */
.pd-select-menu {
  position: fixed !important;
  z-index: 1200 !important;
  pointer-events: auto !important;
}
[data-theme="cyber"] .pd-select-wrap,
[data-theme="danger"] .pd-select-wrap,
[data-theme="cyber"] .pd-select-button,
[data-theme="danger"] .pd-select-button {
  pointer-events: auto !important;
}

/* 5) Filter handle row should stay part of the drawer, not become a layer over the cards. */
[data-theme="cyber"] .filter-handle-row,
[data-theme="danger"] .filter-handle-row {
  position: relative !important;
  z-index: 1 !important;
}
[data-theme="cyber"] .filter-collapsible,
[data-theme="danger"] .filter-collapsible,
[data-theme="cyber"] .filter-inner,
[data-theme="danger"] .filter-inner {
  position: relative !important;
  z-index: 2 !important;
}

/* 6) Cyber: keep the title glitch and restore readable core controls. */
[data-theme="cyber"] .logo:hover,
[data-theme="cyber"] .logo:focus-within {
  animation: pd-cyber-glitch .5s steps(2, jump-none) 1 !important;
}
[data-theme="cyber"] .filter-panel-title,
[data-theme="cyber"] .filter-label,
[data-theme="cyber"] .sort-label,
[data-theme="cyber"] #resultSummary {
  color: var(--cy-cyan, #27f4e5) !important;
  text-shadow: 0 0 12px rgba(39,244,229,.26) !important;
}
[data-theme="cyber"] .filter-handle:hover .filter-toggle-text,
[data-theme="cyber"] .filter-handle:focus-visible .filter-toggle-text {
  animation: pd-cyber-glitch .5s steps(2, jump-none) 1 !important;
}

/* 7) Danger: readable left title/labels and warning-lamp motion, not cyber RGB glitch. */
[data-theme="danger"] .filter-panel-title,
[data-theme="danger"] .filter-group .filter-label {
  color: #120407 !important;
  text-shadow: none !important;
}
[data-theme="danger"] .filter-panel-title {
  background: linear-gradient(90deg, var(--dz-red-hot, #ff5a63), var(--dz-red, #ff3048) 70%, #d72b3d) !important;
  border: 1px solid rgba(255, 129, 135, .72) !important;
}
[data-theme="danger"] .filter-group .filter-label {
  background: var(--dz-fg, var(--dz-red-hot, #ff5a63)) !important;
  border-color: rgba(255,255,255,.20) !important;
}
[data-theme="danger"] .filter-panel-title:hover,
[data-theme="danger"] .filter-panel-title:focus-visible,
[data-theme="danger"] .filter-handle:hover,
[data-theme="danger"] .filter-handle:focus-visible {
  animation: pd-danger-lamp-pulse .72s ease-out 1 !important;
}
[data-theme="danger"] .filter-handle:hover .filter-toggle-text,
[data-theme="danger"] .filter-handle:focus-visible .filter-toggle-text {
  animation: none !important;
  color: #ffe8eb !important;
}
[data-theme="danger"] .filter-handle:hover::before,
[data-theme="danger"] .filter-handle:focus-visible::before {
  animation: pd-danger-scan-line .62s ease-out 1 !important;
}

/* 8) Danger list cards: ENTRY packet + ENTER, no stray status rail or traffic-light tags. */
[data-theme="danger"] .word-card {
  position: relative !important;
  overflow: hidden !important;
  padding-top: 26px !important;
  border-color: rgba(255,90,99,.38) !important;
  background:
    linear-gradient(90deg, rgba(255,90,99,.10), transparent 30%),
    linear-gradient(135deg, rgba(255,90,99,.075), transparent 36%),
    #0d0408 !important;
  background-size: auto !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
}
[data-theme="danger"] .word-card::before {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  top: 10px !important;
  width: 14px !important;
  height: 14px !important;
  bottom: auto !important;
  background: transparent !important;
  border-top: 2px solid var(--dz-red-hot, #ff5a63) !important;
  border-left: 2px solid var(--dz-red-hot, #ff5a63) !important;
  box-shadow: -3px -3px 12px rgba(255,90,99,.28) !important;
}
[data-theme="danger"] .word-card::after {
  content: attr(data-entry-code) !important;
  position: absolute !important;
  top: 11px !important;
  right: 17px !important;
  color: var(--dz-red-hot, #ff5a63) !important;
  background: rgba(8,3,7,.74) !important;
  border-left: 1px solid rgba(255,90,99,.36) !important;
  padding: 0 4px !important;
  font: 900 .58rem var(--dz-display-font, var(--font)) !important;
  letter-spacing: .12em !important;
  opacity: .98 !important;
}
[data-theme="danger"] .word-card .word-top {
  padding-right: 96px !important;
}
[data-theme="danger"] .word-card .pos-tag,
[data-theme="danger"] .word-card .level-badge,
[data-theme="danger"] .word-card .card-footer .theme-tag {
  color: #ffd7dc !important;
  border-color: rgba(255,90,99,.44) !important;
  background: rgba(255,90,99,.10) !important;
  text-shadow: none !important;
}
[data-theme="danger"] .word-card .level-badge {
  top: 29px !important;
  right: 17px !important;
  min-width: 54px !important;
  height: 20px !important;
  color: #ffe8eb !important;
  background:
    linear-gradient(90deg, rgba(255,90,99,.22), rgba(255,90,99,.08)),
    #100408 !important;
}
[data-theme="danger"] .word-card .card-actions::before {
  content: "ENTER" !important;
  display: inline-flex !important;
}

/* 9) Small screens: fixed layers stay fixed and labels remain readable. */
@media (max-width: 640px) {
  [data-theme="cyber"] .detail-overlay,
  [data-theme="danger"] .detail-overlay {
    align-items: stretch !important;
    padding: 0 !important;
  }
  [data-theme="cyber"] .detail-modal,
  [data-theme="danger"] .detail-modal {
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  [data-theme="cyber"] .feedback-fab,
  [data-theme="danger"] .feedback-fab {
    right: max(12px, env(safe-area-inset-right, 0px) + 10px) !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px) + 10px) !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  [data-theme="danger"] .feedback-fab::before {
    content: "!";
    font-size: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="cyber"] .logo:hover,
  [data-theme="cyber"] .logo:focus-within,
  [data-theme="cyber"] .filter-handle:hover .filter-toggle-text,
  [data-theme="cyber"] .filter-handle:focus-visible .filter-toggle-text,
  [data-theme="danger"] .filter-panel-title:hover,
  [data-theme="danger"] .filter-panel-title:focus-visible,
  [data-theme="danger"] .filter-handle:hover,
  [data-theme="danger"] .filter-handle:focus-visible,
  [data-theme="danger"] .filter-handle:hover::before,
  [data-theme="danger"] .filter-handle:focus-visible::before {
    animation: none !important;
  }
}

/* ============================================================
   20260708 V6.1 Detail Navigation + Mobile Drawer + TTS Pass
   - Detail content uses one scroll container in every POS/detail layout.
   - Prev/next controls live on the modal side borders as theme-specific triangle tabs.
   - Mobile filters are capped and scrollable, with extra repairs for Danger Initial letters.
   - Speaker controls are rebuilt as themed icon buttons instead of raw emoji glyphs.
   ============================================================ */

/* ---------- Detail modal scroll contract: header fixed, body scrolls ---------- */
.detail-overlay.open {
  overflow: hidden !important;
}
.detail-modal {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  max-height: min(90vh, calc(100dvh - 36px)) !important;
  position: relative !important;
}
.detail-header {
  position: relative !important;
  top: auto !important;
  flex: 0 0 auto !important;
  z-index: 34 !important;
}
.detail-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable both-edges;
}
.detail-body .grammar-table-wrap,
.detail-body .table-scroll {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Header controls cleanup: back closes, side tabs navigate entries ---------- */
.detail-nav {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#detailBackBtn {
  width: auto !important;
  min-width: 52px !important;
  height: 36px !important;
  border-radius: 18px !important;
  padding: 0 13px !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
.detail-side-nav {
  position: absolute !important;
  top: 50% !important;
  z-index: 36 !important;
  width: 46px !important;
  height: 76px !important;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%) !important;
  color: var(--accent) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.12) !important;
  cursor: pointer !important;
  transition: transform .18s ease, opacity .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease !important;
  font-size: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.detail-side-prev {
  left: 0 !important;
  transform: translateY(-50%) !important;
  border-left: 0 !important;
  border-radius: 0 20px 20px 0 !important;
}
.detail-side-next {
  right: 0 !important;
  transform: translateY(-50%) !important;
  border-right: 0 !important;
  border-radius: 20px 0 0 20px !important;
}
.detail-side-nav::before {
  content: "" !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 40%, transparent));
}
.detail-side-prev::before {
  border-top: 13px solid transparent !important;
  border-bottom: 13px solid transparent !important;
  border-right: 17px solid currentColor !important;
}
.detail-side-next::before {
  border-top: 13px solid transparent !important;
  border-bottom: 13px solid transparent !important;
  border-left: 17px solid currentColor !important;
}
.detail-side-prev:hover,
.detail-side-prev:focus-visible {
  transform: translateY(-50%) translateX(2px) !important;
}
.detail-side-next:hover,
.detail-side-next:focus-visible {
  transform: translateY(-50%) translateX(-2px) !important;
}
.detail-side-nav:hover,
.detail-side-nav:focus-visible {
  color: #fff !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.16), 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent) !important;
  outline: none !important;
}
.detail-side-nav:disabled {
  opacity: .18 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(.6) !important;
}
.detail-side-nav[hidden] { display: none !important; }
[data-theme="dark"] .detail-side-nav {
  background: rgba(15,20,25,.90) !important;
  border-color: rgba(122,184,232,.28) !important;
  color: #7ab8e8 !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.34) !important;
}
[data-theme="dark"] .detail-side-nav:hover,
[data-theme="dark"] .detail-side-nav:focus-visible {
  background: #18283a !important;
  border-color: #7ab8e8 !important;
  box-shadow: 0 0 18px rgba(90,159,212,.22), 0 16px 34px rgba(0,0,0,.38) !important;
}
[data-theme="cyber"] .detail-side-nav {
  width: 50px !important;
  height: 82px !important;
  color: var(--cy-cyan, #27f4e5) !important;
  background:
    linear-gradient(180deg, rgba(39,244,229,.16), rgba(255,61,242,.10)),
    rgba(5,8,16,.92) !important;
  border-color: rgba(39,244,229,.52) !important;
  box-shadow: 0 0 20px rgba(39,244,229,.18), inset 0 0 0 1px rgba(255,255,255,.035) !important;
  clip-path: polygon(0 10px, 14px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 14px) 100%, 0 100%) !important;
}
[data-theme="cyber"] .detail-side-next {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 10px, 100% 100%, 14px 100%, 0 calc(100% - 10px)) !important;
}
[data-theme="cyber"] .detail-side-nav::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255,61,242,.22);
  pointer-events: none;
}
[data-theme="cyber"] .detail-side-nav:hover,
[data-theme="cyber"] .detail-side-nav:focus-visible {
  color: #050515 !important;
  background: linear-gradient(135deg, var(--cy-cyan, #27f4e5), var(--cy-lime, #d7ff42)) !important;
  border-color: var(--cy-lime, #d7ff42) !important;
  box-shadow: 0 0 24px rgba(39,244,229,.34), 0 0 38px rgba(255,61,242,.16) !important;
}
[data-theme="danger"] .detail-side-nav {
  width: 50px !important;
  height: 84px !important;
  color: var(--dz-red-hot, #ff5a63) !important;
  background:
    linear-gradient(90deg, rgba(255,90,99,.18), rgba(10,3,7,.94)),
    #080307 !important;
  border-color: rgba(255,90,99,.62) !important;
  box-shadow: 0 0 18px rgba(255,90,99,.22), 0 18px 36px rgba(0,0,0,.48) !important;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%) !important;
}
[data-theme="danger"] .detail-side-next {
  clip-path: polygon(11px 0, 100% 0, 100% 100%, 0 100%, 0 11px) !important;
}
[data-theme="danger"] .detail-side-nav::after {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: currentColor;
  opacity: .7;
  box-shadow: 0 0 12px currentColor;
}
[data-theme="danger"] .detail-side-prev::after { left: 7px; }
[data-theme="danger"] .detail-side-next::after { right: 7px; }
[data-theme="danger"] .detail-side-nav:hover,
[data-theme="danger"] .detail-side-nav:focus-visible {
  animation: pd-danger-lamp-pulse .72s ease-out 1 !important;
  color: #120407 !important;
  background: var(--dz-red-hot, #ff5a63) !important;
  border-color: var(--dz-red-hot, #ff5a63) !important;
  box-shadow: 0 0 26px rgba(255,90,99,.42), 0 0 42px rgba(255,90,99,.20) !important;
}

/* ---------- Themed speaker buttons: replace raw emoji with a stable vector mask ---------- */
:root {
  --pd-speaker-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm12.5-1.8v9.6c1.5-1.1 2.5-2.9 2.5-4.8s-1-3.7-2.5-4.8zm0-4.1v2.2c2.7 1.3 4.5 3.8 4.5 6.7s-1.8 5.4-4.5 6.7v2.2c3.8-1.5 6.5-5 6.5-8.9s-2.7-7.4-6.5-8.9z'/%3E%3C/svg%3E");
}
.tts-btn,
#detailTtsBtn,
.ex-tts-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  line-height: 1 !important;
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent-light) 78%, var(--surface) 22%) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: transform .16s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease !important;
  opacity: 1 !important;
}
.tts-btn,
#detailTtsBtn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
}
.ex-tts-btn {
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  padding: 0 !important;
  margin-left: 5px !important;
  vertical-align: -6px !important;
}
.tts-btn::before,
#detailTtsBtn::before,
.ex-tts-btn::before {
  content: "" !important;
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  background: currentColor !important;
  -webkit-mask: var(--pd-speaker-mask) center / contain no-repeat !important;
  mask: var(--pd-speaker-mask) center / contain no-repeat !important;
}
.ex-tts-btn::before { width: 14px !important; height: 14px !important; }
.tts-btn:hover,
#detailTtsBtn:hover,
.ex-tts-btn:hover,
.tts-btn:focus-visible,
#detailTtsBtn:focus-visible,
.ex-tts-btn:focus-visible {
  transform: translateY(-1px) !important;
  color: #fff !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 22%, transparent) !important;
  outline: none !important;
}
[data-theme="dark"] .tts-btn,
[data-theme="dark"] #detailTtsBtn,
[data-theme="dark"] .ex-tts-btn {
  color: #9fd0f2 !important;
  background: rgba(90,159,212,.12) !important;
  border-color: rgba(90,159,212,.30) !important;
}
[data-theme="cyber"] .tts-btn,
[data-theme="cyber"] #detailTtsBtn,
[data-theme="cyber"] .ex-tts-btn {
  color: var(--cy-cyan, #27f4e5) !important;
  background: rgba(39,244,229,.10) !important;
  border-color: rgba(39,244,229,.42) !important;
  border-radius: 6px !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 0 14px rgba(39,244,229,.16) !important;
}
[data-theme="cyber"] .tts-btn:hover,
[data-theme="cyber"] #detailTtsBtn:hover,
[data-theme="cyber"] .ex-tts-btn:hover,
[data-theme="cyber"] .tts-btn:focus-visible,
[data-theme="cyber"] #detailTtsBtn:focus-visible,
[data-theme="cyber"] .ex-tts-btn:focus-visible {
  color: #050515 !important;
  background: linear-gradient(135deg, var(--cy-cyan, #27f4e5), var(--cy-lime, #d7ff42)) !important;
  border-color: var(--cy-lime, #d7ff42) !important;
  box-shadow: 0 0 18px rgba(39,244,229,.34), 0 0 30px rgba(215,255,66,.16) !important;
}
[data-theme="danger"] .tts-btn,
[data-theme="danger"] #detailTtsBtn,
[data-theme="danger"] .ex-tts-btn {
  color: var(--dz-red-hot, #ff5a63) !important;
  background: rgba(255,90,99,.08) !important;
  border-color: rgba(255,90,99,.44) !important;
  border-radius: 2px !important;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)) !important;
  box-shadow: 0 0 12px rgba(255,90,99,.16) !important;
}
[data-theme="danger"] .tts-btn:hover,
[data-theme="danger"] #detailTtsBtn:hover,
[data-theme="danger"] .ex-tts-btn:hover,
[data-theme="danger"] .tts-btn:focus-visible,
[data-theme="danger"] #detailTtsBtn:focus-visible,
[data-theme="danger"] .ex-tts-btn:focus-visible {
  animation: pd-danger-lamp-pulse .66s ease-out 1 !important;
  color: #120407 !important;
  background: var(--dz-red-hot, #ff5a63) !important;
  border-color: var(--dz-red-hot, #ff5a63) !important;
  box-shadow: 0 0 18px rgba(255,90,99,.34) !important;
}

/* ---------- Mobile filter drawer: less screen takeover, real scrolling, Danger Initial repair ---------- */
@media (max-width: 768px) {
  .filter-bar.filter-drawer {
    padding: 5px 10px !important;
    max-height: calc(100dvh - var(--header-h) - 8px) !important;
    overflow: visible !important;
  }
  .filter-shell {
    max-height: inherit !important;
  }
  .filter-collapsible:not(.collapsed) {
    max-height: min(42dvh, 330px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding-right: 2px !important;
  }
  .filter-collapsible.collapsed {
    max-height: 0 !important;
    overflow: hidden !important;
  }
  .filter-inner {
    gap: 6px !important;
    align-items: flex-start !important;
  }
  .filter-group {
    width: 100% !important;
    min-width: 0 !important;
    gap: 5px !important;
  }
  .filter-label {
    flex: 0 0 auto !important;
  }
  .filter-group-initial {
    display: block !important;
  }
  .filter-group-initial .filter-label {
    display: inline-flex !important;
    margin-bottom: 5px !important;
  }
  .letter-filter {
    width: 100% !important;
    max-height: 92px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px 1px 5px !important;
    align-content: flex-start !important;
  }
  .letter-filter button {
    min-width: 30px !important;
    height: 30px !important;
  }
  .chip-filter {
    max-width: 100% !important;
  }
  .select-filter,
  .pd-select-wrap,
  .pd-select-button {
    max-width: 100% !important;
  }
  [data-theme="danger"] .filter-collapsible:not(.collapsed) {
    max-height: min(38dvh, 292px) !important;
    padding-bottom: 6px !important;
  }
  [data-theme="danger"] .filter-group-initial,
  [data-theme="danger"] .letter-filter {
    position: relative !important;
    z-index: 5 !important;
    clip-path: none !important;
  }
  [data-theme="danger"] .letter-filter {
    max-height: 84px !important;
    background: rgba(8,3,7,.36) !important;
    border: 1px solid rgba(255,90,99,.18) !important;
    padding: 5px !important;
    scrollbar-color: var(--dz-red-hot, #ff5a63) rgba(255,90,99,.08) !important;
  }
  [data-theme="danger"] .letter-filter button {
    min-width: 30px !important;
    height: 28px !important;
    padding: 0 5px !important;
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%) !important;
  }
}

/* ---------- Mobile detail: side triangles stay visible, header remains fixed, body scrolls ---------- */
@media (max-width: 640px) {
  .detail-overlay.open {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }
  .detail-modal {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  .detail-header {
    padding: max(12px, env(safe-area-inset-top, 0px) + 8px) 12px 9px !important;
  }
  .detail-header .dh-left {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .detail-header .dh-tags {
    max-height: 58px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .detail-header .dh-controls {
    gap: 5px !important;
  }
  .detail-body {
    padding: 12px 13px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #detailBackBtn {
    min-width: 44px !important;
    height: 36px !important;
    padding: 0 10px !important;
    font-size: .72rem !important;
  }
  .detail-side-nav {
    top: calc(50% + 24px) !important;
    width: 38px !important;
    height: 64px !important;
    opacity: .92 !important;
  }
  .detail-side-prev::before {
    border-top-width: 10px !important;
    border-bottom-width: 10px !important;
    border-right-width: 13px !important;
  }
  .detail-side-next::before {
    border-top-width: 10px !important;
    border-bottom-width: 10px !important;
    border-left-width: 13px !important;
  }
  .detail-side-prev:hover,
  .detail-side-prev:focus-visible {
    transform: translateY(-50%) translateX(0) !important;
  }
  .detail-side-next:hover,
  .detail-side-next:focus-visible {
    transform: translateY(-50%) translateX(0) !important;
  }
  .tts-btn,
  #detailTtsBtn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }
}

@media (max-width: 420px) {
  .detail-header .dh-word { font-size: 1.35rem !important; }
  .detail-header .dh-phonetic { font-size: .78rem !important; }
  
  .detail-side-nav {
    width: 34px !important;
    height: 58px !important;
  }
  [data-theme="danger"] .filter-collapsible:not(.collapsed) {
    max-height: min(36dvh, 270px) !important;
  }
  [data-theme="danger"] .letter-filter {
    max-height: 76px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-side-nav,
  .tts-btn,
  #detailTtsBtn,
  .ex-tts-btn {
    transition: none !important;
  }
}


/* ============================================================
   20260708 V6.2 Detail Logic + Mobile Filter + Frozen Table Pass
   - Back button returns to previous detail entry; X closes the detail page.
   - Cyber/Danger mobile filters keep all filter groups and can scroll without taking over the screen.
   - All grammar tables freeze the first column during horizontal scroll, not only verb tables.
   - Desktop prev/next tabs sit outside modal border; mobile uses long side touch rails.
   ============================================================ */

/* 1) Detail Back/X contract. Back is an internal-history action; close is only X/overlay/Escape. */
#detailBackBtn[hidden] {
  display: none !important;
}
#detailBackBtn:disabled {
  opacity: .42 !important;
  cursor: default !important;
  pointer-events: none !important;
}
#detailCloseBtn {
  position: relative !important;
  z-index: 48 !important;
}

/* 2) Let side navigation live outside the detail border on desktop. Body remains the only scroll container. */
.detail-modal {
  overflow: visible !important;
}
.detail-header,
.detail-body {
  overflow: hidden;
}
.detail-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-radius: 0 0 var(--radius) var(--radius);
}
.detail-side-nav {
  left: auto;
  right: auto;
}
.detail-side-prev {
  left: -58px !important;
  border-left: 1px solid var(--border) !important;
  border-radius: 18px !important;
}
.detail-side-next {
  right: -58px !important;
  border-right: 1px solid var(--border) !important;
  border-radius: 18px !important;
}
.detail-side-prev:hover,
.detail-side-prev:focus-visible {
  transform: translateY(-50%) translateX(-3px) !important;
}
.detail-side-next:hover,
.detail-side-next:focus-visible {
  transform: translateY(-50%) translateX(3px) !important;
}
[data-theme="cyber"] .detail-side-prev,
[data-theme="cyber"] .detail-side-next,
[data-theme="danger"] .detail-side-prev,
[data-theme="danger"] .detail-side-next {
  border-radius: 0 !important;
}

/* 3) Frozen first column for every grammar table. This mirrors the useful verb-table behavior for nouns/adjectives/adverbs/pronouns/numerals. */
.detail-body .grammar-table-wrap {
  position: relative !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  isolation: isolate;
}
.detail-body .grammar-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.detail-body .grammar-table th:first-child,
.detail-body .grammar-table td:first-child {
  position: sticky !important;
  left: 0 !important;
  min-width: 104px;
  max-width: 150px;
  background: var(--surface) !important;
  color: var(--text-secondary) !important;
  box-shadow: 1px 0 0 var(--border), 8px 0 14px rgba(0,0,0,.035) !important;
  z-index: 4 !important;
}
.detail-body .grammar-table thead th:first-child {
  background: var(--bg) !important;
  z-index: 7 !important;
}
.detail-body .grammar-table tbody tr:hover td:first-child {
  background: var(--surface-hover) !important;
}
[data-theme="dark"] .detail-body .grammar-table th:first-child,
[data-theme="dark"] .detail-body .grammar-table td:first-child {
  background: #1a2332 !important;
  box-shadow: 1px 0 0 var(--border), 10px 0 16px rgba(0,0,0,.28) !important;
}
[data-theme="dark"] .detail-body .grammar-table thead th:first-child {
  background: #0f1419 !important;
}
[data-theme="cyber"] .detail-body .grammar-table th:first-child,
[data-theme="cyber"] .detail-body .grammar-table td:first-child {
  background: rgba(8,12,28,.98) !important;
  color: var(--cy-cyan, #27f4e5) !important;
  box-shadow: 1px 0 0 rgba(39,244,229,.30), 10px 0 18px rgba(39,244,229,.10) !important;
}
[data-theme="cyber"] .detail-body .grammar-table thead th:first-child {
  background: rgba(5,8,20,.99) !important;
}
[data-theme="danger"] .detail-body .grammar-table th:first-child,
[data-theme="danger"] .detail-body .grammar-table td:first-child {
  background: rgba(16,4,8,.99) !important;
  color: var(--dz-red-hot, #ff5a63) !important;
  box-shadow: 1px 0 0 rgba(255,90,99,.32), 10px 0 18px rgba(255,90,99,.10) !important;
}
[data-theme="danger"] .detail-body .grammar-table thead th:first-child {
  background: rgba(9,2,5,.99) !important;
}

/* 4) Mobile filter drawer repair for all themes, with cyber/danger using the same full filter set as the base theme. */
@media (max-width: 768px) {
  .filter-bar.filter-drawer {
    max-height: calc(100dvh - var(--header-h) - 6px) !important;
  }
  .filter-drawer .filter-collapsible:not(.collapsed) {
    max-height: min(44dvh, 336px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    pointer-events: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }
  .filter-drawer .filter-collapsible:not(.collapsed) .filter-inner,
  .filter-drawer .filter-collapsible:not(.collapsed) .filter-group,
  .filter-drawer .filter-collapsible:not(.collapsed) .letter-filter,
  .filter-drawer .filter-collapsible:not(.collapsed) .chip-filter {
    visibility: visible !important;
    pointer-events: auto !important;
  }
  [data-theme="danger"] .filter-drawer .filter-inner {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 7px !important;
    padding: 0 !important;
  }
  [data-theme="danger"] .filter-drawer .filter-group,
  [data-theme="danger"] .filter-group-initial,
  [data-theme="danger"] .filter-group-pos,
  [data-theme="danger"] .filter-group-theme,
  [data-theme="danger"] .filter-group-gender,
  [data-theme="danger"] .filter-group-level {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  [data-theme="danger"] .filter-group-initial {
    display: block !important;
  }
  [data-theme="danger"] .filter-drawer .letter-filter {
    width: 100% !important;
    max-height: 78px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
  [data-theme="danger"] .filter-drawer .chip-filter {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  [data-theme="danger"] .filter-drawer .filter-chip {
    flex: 0 0 auto !important;
  }
  [data-theme="danger"] .filter-group-theme,
  [data-theme="danger"] .filter-group-gender,
  [data-theme="danger"] .filter-group-level {
    flex-wrap: nowrap !important;
  }
  [data-theme="danger"] .filter-group .pd-select-wrap,
  [data-theme="danger"] .filter-group .pd-select-button,
  [data-theme="danger"] .filter-group .select-filter {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  [data-theme="danger"] .filter-drawer .divider {
    display: none !important;
  }
}
@media (max-width: 420px) {
  .filter-drawer .filter-collapsible:not(.collapsed) {
    max-height: min(40dvh, 292px) !important;
  }
  [data-theme="danger"] .filter-drawer .letter-filter {
    max-height: 66px !important;
  }
}

/* 5) Mobile detail navigation: long side rails. They are obvious tap zones, but thin enough not to hide the content. */
@media (max-width: 640px) {
  .detail-modal {
    overflow: hidden !important;
  }
  .detail-body {
    padding-left: max(36px, env(safe-area-inset-left, 0px) + 30px) !important;
    padding-right: max(36px, env(safe-area-inset-right, 0px) + 30px) !important;
  }
  .detail-side-nav {
    position: fixed !important;
    top: 132px !important;
    bottom: max(18px, env(safe-area-inset-bottom, 0px) + 12px) !important;
    height: auto !important;
    width: 30px !important;
    min-width: 30px !important;
    opacity: .82 !important;
    border-radius: 0 !important;
    transform: none !important;
    background: color-mix(in srgb, var(--surface) 70%, transparent) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: none !important;
  }
  .detail-side-prev {
    left: 0 !important;
    right: auto !important;
    border-left: 0 !important;
    border-radius: 0 14px 14px 0 !important;
  }
  .detail-side-next {
    right: 0 !important;
    left: auto !important;
    border-right: 0 !important;
    border-radius: 14px 0 0 14px !important;
  }
  .detail-side-prev:hover,
  .detail-side-prev:focus-visible,
  .detail-side-next:hover,
  .detail-side-next:focus-visible {
    transform: none !important;
  }
  .detail-side-prev::before {
    border-top-width: 9px !important;
    border-bottom-width: 9px !important;
    border-right-width: 12px !important;
  }
  .detail-side-next::before {
    border-top-width: 9px !important;
    border-bottom-width: 9px !important;
    border-left-width: 12px !important;
  }
  [data-theme="cyber"] .detail-side-nav {
    width: 32px !important;
    color: var(--cy-cyan, #27f4e5) !important;
    background: linear-gradient(180deg, rgba(39,244,229,.16), rgba(255,61,242,.08)), rgba(5,8,18,.55) !important;
    border-color: rgba(39,244,229,.38) !important;
    clip-path: none !important;
  }
  [data-theme="danger"] .detail-side-nav {
    width: 32px !important;
    color: var(--dz-red-hot, #ff5a63) !important;
    background: linear-gradient(180deg, rgba(255,90,99,.16), rgba(255,90,99,.04)), rgba(10,3,7,.62) !important;
    border-color: rgba(255,90,99,.46) !important;
    clip-path: none !important;
  }
}
@media (max-width: 420px) {
  .detail-side-nav {
    top: 118px !important;
    width: 28px !important;
    min-width: 28px !important;
  }
  .detail-body {
    padding-left: max(32px, env(safe-area-inset-left, 0px) + 27px) !important;
    padding-right: max(32px, env(safe-area-inset-right, 0px) + 27px) !important;
  }
  .detail-body .grammar-table th:first-child,
  .detail-body .grammar-table td:first-child {
    min-width: 88px;
    max-width: 118px;
  }
}

/* ============================================================
   20260708 V6.3 Mobile Header + External Detail Navigation Pass
   - Move prev/next controls outside the clipped modal frame in DOM/CSS.
   - Keep cyber/danger tabs visible outside notched modal geometry.
   - Mobile light/dark use compact side tabs; cyber/danger use themed long rails below header.
   - Danger mobile search command no longer covers the search input.
   ============================================================ */

/* Detail side navigation is an overlay-level control, not modal content. This avoids clip-path/overflow traps in Cyber/Danger. */
.detail-overlay.open {
  overflow: visible !important;
  isolation: isolate !important;
}
.detail-overlay > .detail-side-nav {
  position: fixed !important;
  top: 50% !important;
  z-index: 280 !important;
  pointer-events: auto !important;
}
.detail-overlay > .detail-side-prev {
  left: max(14px, calc(50vw - 508px)) !important;
  right: auto !important;
  transform: translateY(-50%) !important;
}
.detail-overlay > .detail-side-next {
  right: max(14px, calc(50vw - 508px)) !important;
  left: auto !important;
  transform: translateY(-50%) !important;
}
.detail-overlay > .detail-side-prev:hover,
.detail-overlay > .detail-side-prev:focus-visible {
  transform: translateY(-50%) translateX(-4px) !important;
}
.detail-overlay > .detail-side-next:hover,
.detail-overlay > .detail-side-next:focus-visible {
  transform: translateY(-50%) translateX(4px) !important;
}
.detail-overlay > .detail-side-nav[hidden] {
  display: none !important;
}
.detail-overlay > .detail-side-nav:disabled {
  opacity: .18 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Desktop theme refinements now that the controls are outside the modal. */
[data-theme="cyber"] .detail-overlay > .detail-side-nav {
  z-index: 292 !important;
  backdrop-filter: blur(10px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.25) !important;
}
[data-theme="cyber"] .detail-overlay > .detail-side-prev {
  box-shadow: -10px 0 28px rgba(39,244,229,.16), 0 0 0 1px rgba(255,61,242,.18) !important;
}
[data-theme="cyber"] .detail-overlay > .detail-side-next {
  box-shadow: 10px 0 28px rgba(39,244,229,.16), 0 0 0 1px rgba(255,61,242,.18) !important;
}
[data-theme="danger"] .detail-overlay > .detail-side-nav {
  z-index: 292 !important;
  backdrop-filter: blur(8px) contrast(1.08) !important;
  -webkit-backdrop-filter: blur(8px) contrast(1.08) !important;
}
[data-theme="danger"] .detail-overlay > .detail-side-prev {
  box-shadow: -10px 0 30px rgba(255,90,99,.18), 0 0 0 1px rgba(255,90,99,.18) !important;
}
[data-theme="danger"] .detail-overlay > .detail-side-next {
  box-shadow: 10px 0 30px rgba(255,90,99,.18), 0 0 0 1px rgba(255,90,99,.18) !important;
}

/* Medium desktop/tablet: outside tabs cannot fit, so pin them to screen edge instead of letting them disappear. */
@media (min-width: 641px) and (max-width: 1040px) {
  .detail-overlay > .detail-side-prev {
    left: 10px !important;
  }
  .detail-overlay > .detail-side-next {
    right: 10px !important;
  }
  .detail-body {
    padding-left: max(36px, env(safe-area-inset-left, 0px) + 28px) !important;
    padding-right: max(36px, env(safe-area-inset-right, 0px) + 28px) !important;
  }
}

/* Danger mobile search: the command label must not eat input space. */
@media (max-width: 640px) {
  [data-theme="danger"] .search-wrap::before {
    content: "DB" !important;
    left: 9px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
    max-width: 30px !important;
    padding: 1px 4px !important;
    border: 1px solid rgba(255,90,99,.42) !important;
    background: rgba(16,4,8,.96) !important;
    color: var(--dz-red-hot, #ff5a63) !important;
    font-size: .54rem !important;
    line-height: 1.1 !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  [data-theme="danger"] .search-wrap input {
    padding-left: 42px !important;
    padding-right: 34px !important;
  }
}
@media (max-width: 380px) {
  [data-theme="danger"] .search-wrap::before {
    display: none !important;
  }
  [data-theme="danger"] .search-wrap input {
    padding-left: 12px !important;
  }
}

/* Mobile detail navigation: base themes use short centered tabs so they do not collide with Back/Feedback/Close. */
@media (max-width: 640px) {
  .detail-overlay > .detail-side-nav {
    position: fixed !important;
    z-index: 286 !important;
    top: 58dvh !important;
    bottom: auto !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 104px !important;
    opacity: .86 !important;
    transform: translateY(-50%) !important;
    border-radius: 0 !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  .detail-overlay > .detail-side-prev {
    left: 0 !important;
    right: auto !important;
    border-left: 0 !important;
    border-radius: 0 14px 14px 0 !important;
  }
  .detail-overlay > .detail-side-next {
    right: 0 !important;
    left: auto !important;
    border-right: 0 !important;
    border-radius: 14px 0 0 14px !important;
  }
  .detail-overlay > .detail-side-prev:hover,
  .detail-overlay > .detail-side-prev:focus-visible,
  .detail-overlay > .detail-side-next:hover,
  .detail-overlay > .detail-side-next:focus-visible {
    transform: translateY(-50%) !important;
  }
  html:not([data-theme]) .detail-overlay > .detail-side-nav,
  [data-theme="dark"] .detail-overlay > .detail-side-nav {
    background: color-mix(in srgb, var(--surface) 82%, transparent) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.12) !important;
  }
  html:not([data-theme]) .detail-body,
  [data-theme="dark"] .detail-body {
    padding-left: max(32px, env(safe-area-inset-left, 0px) + 26px) !important;
    padding-right: max(32px, env(safe-area-inset-right, 0px) + 26px) !important;
  }

  /* Cyber/Danger keep the long-side concept, but start below the detail header and stay above it visually. */
  [data-theme="cyber"] .detail-overlay > .detail-side-nav,
  [data-theme="danger"] .detail-overlay > .detail-side-nav {
    top: calc(env(safe-area-inset-top, 0px) + 156px) !important;
    bottom: max(16px, env(safe-area-inset-bottom, 0px) + 12px) !important;
    height: auto !important;
    transform: none !important;
    width: 34px !important;
    min-width: 34px !important;
    opacity: .94 !important;
  }
  [data-theme="cyber"] .detail-overlay > .detail-side-nav {
    color: var(--cy-cyan, #27f4e5) !important;
    background:
      linear-gradient(180deg, rgba(39,244,229,.22), rgba(255,61,242,.08)),
      rgba(5,8,18,.72) !important;
    border-color: rgba(39,244,229,.52) !important;
    box-shadow: 0 0 18px rgba(39,244,229,.20), inset 0 0 16px rgba(39,244,229,.07) !important;
    clip-path: none !important;
  }
  [data-theme="cyber"] .detail-overlay > .detail-side-nav::after {
    inset: 8px 9px !important;
    border-color: rgba(255,61,242,.32) !important;
  }
  [data-theme="danger"] .detail-overlay > .detail-side-nav {
    color: var(--dz-red-hot, #ff5a63) !important;
    background:
      repeating-linear-gradient(180deg, rgba(255,90,99,.18) 0 7px, rgba(255,90,99,.04) 7px 14px),
      rgba(10,3,7,.76) !important;
    border-color: rgba(255,90,99,.60) !important;
    box-shadow: 0 0 20px rgba(255,90,99,.24), inset 0 0 16px rgba(255,90,99,.08) !important;
    clip-path: none !important;
  }
  [data-theme="danger"] .detail-overlay > .detail-side-nav::after {
    opacity: .9 !important;
  }
  [data-theme="cyber"] .detail-overlay > .detail-side-prev:hover,
  [data-theme="cyber"] .detail-overlay > .detail-side-prev:focus-visible,
  [data-theme="cyber"] .detail-overlay > .detail-side-next:hover,
  [data-theme="cyber"] .detail-overlay > .detail-side-next:focus-visible,
  [data-theme="danger"] .detail-overlay > .detail-side-prev:hover,
  [data-theme="danger"] .detail-overlay > .detail-side-prev:focus-visible,
  [data-theme="danger"] .detail-overlay > .detail-side-next:hover,
  [data-theme="danger"] .detail-overlay > .detail-side-next:focus-visible {
    transform: none !important;
  }
  [data-theme="cyber"] .detail-body,
  [data-theme="danger"] .detail-body {
    padding-left: max(42px, env(safe-area-inset-left, 0px) + 36px) !important;
    padding-right: max(42px, env(safe-area-inset-right, 0px) + 36px) !important;
  }
}

@media (max-width: 420px) {
  [data-theme="cyber"] .detail-overlay > .detail-side-nav,
  [data-theme="danger"] .detail-overlay > .detail-side-nav {
    top: calc(env(safe-area-inset-top, 0px) + 142px) !important;
    width: 31px !important;
    min-width: 31px !important;
  }
  .detail-overlay > .detail-side-nav::before {
    transform: scale(.88) !important;
  }
}

/* ============================================================
   20260708 V6.4 Detail side navigation visibility fix
   Root cause: Cyber/Danger modal has z-index 901 from the stability layer,
   while V6.3 side rails were z-index 280/292. On mobile they were rendered
   behind the notched detail modal, so the controls existed but were invisible.
   This final contract keeps overlay-level prev/next above the modal and uses
   JS-measured top/bottom offsets so mobile rails start below the real header.
   ============================================================ */
.detail-overlay.open > .detail-side-nav {
  position: fixed !important;
  z-index: 960 !important;
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: .96 !important;
  mix-blend-mode: normal !important;
}
.detail-overlay.open > .detail-side-nav:disabled {
  visibility: visible !important;
  opacity: .26 !important;
  pointer-events: none !important;
}
[data-theme="cyber"] .detail-overlay.open > .detail-side-nav,
[data-theme="danger"] .detail-overlay.open > .detail-side-nav {
  z-index: 960 !important;
}
[data-theme="cyber"] .detail-overlay.open > .detail-modal,
[data-theme="danger"] .detail-overlay.open > .detail-modal {
  z-index: 910 !important;
}
@media (min-width: 641px) {
  .detail-overlay.open > .detail-side-prev {
    left: var(--pd-detail-side-left, max(14px, calc(50vw - 508px))) !important;
    right: auto !important;
  }
  .detail-overlay.open > .detail-side-next {
    right: var(--pd-detail-side-right, max(14px, calc(50vw - 508px))) !important;
    left: auto !important;
  }
}
@media (max-width: 640px) {
  .detail-overlay.open > .detail-side-nav {
    top: var(--pd-detail-side-top, 152px) !important;
    bottom: var(--pd-detail-side-bottom, max(16px, env(safe-area-inset-bottom, 0px) + 12px)) !important;
    height: auto !important;
    min-height: 96px !important;
    transform: none !important;
  }
  .detail-overlay.open > .detail-side-prev {
    left: env(safe-area-inset-left, 0px) !important;
    right: auto !important;
  }
  .detail-overlay.open > .detail-side-next {
    right: env(safe-area-inset-right, 0px) !important;
    left: auto !important;
  }
  [data-theme="cyber"] .detail-overlay.open > .detail-side-nav {
    width: 38px !important;
    min-width: 38px !important;
    color: var(--cy-cyan, #27f4e5) !important;
    background:
      linear-gradient(180deg, rgba(39,244,229,.32), rgba(255,61,242,.12)),
      rgba(4,8,18,.92) !important;
    border-color: rgba(39,244,229,.82) !important;
    box-shadow: 0 0 0 1px rgba(255,61,242,.24), 0 0 26px rgba(39,244,229,.38), inset 0 0 18px rgba(39,244,229,.14) !important;
    clip-path: none !important;
  }
  [data-theme="danger"] .detail-overlay.open > .detail-side-nav {
    width: 38px !important;
    min-width: 38px !important;
    color: var(--dz-red-hot, #ff5a63) !important;
    background:
      repeating-linear-gradient(180deg, rgba(255,90,99,.28) 0 7px, rgba(255,90,99,.08) 7px 14px),
      rgba(12,3,7,.94) !important;
    border-color: rgba(255,90,99,.86) !important;
    box-shadow: 0 0 0 1px rgba(255,90,99,.26), 0 0 28px rgba(255,90,99,.40), inset 0 0 18px rgba(255,90,99,.13) !important;
    clip-path: none !important;
  }
  [data-theme="cyber"] .detail-overlay.open > .detail-side-nav::before,
  [data-theme="danger"] .detail-overlay.open > .detail-side-nav::before {
    position: relative !important;
    z-index: 2 !important;
    filter: drop-shadow(0 0 8px currentColor) !important;
  }
  [data-theme="cyber"] .detail-overlay.open > .detail-side-nav::after,
  [data-theme="danger"] .detail-overlay.open > .detail-side-nav::after {
    z-index: 1 !important;
    pointer-events: none !important;
  }
}

/* =========================================================
   20260708 V6.5 Cyber Header/Filter/Sort Stability Pass
   目标：赛博主题顶部区减少遮挡和视觉噪音；排序下拉箭头对齐；
   保留赛博主题感，但不让装饰线像 bug 一样穿插 UI。
   ========================================================= */

/* 1) Header/filter junction: keep one intentional scan line, remove the extra segmented rail. */
[data-theme="cyber"] .header::after {
  height: 2px !important;
  opacity: .58 !important;
  background:
    linear-gradient(90deg,
      transparent 0 8%,
      rgba(39,244,229,.62) 18%,
      rgba(184,255,77,.42) 36%,
      rgba(255,61,242,.38) 58%,
      rgba(255,90,99,.55) 78%,
      transparent 92%) !important;
  box-shadow: 0 0 12px rgba(39,244,229,.20) !important;
}
[data-theme="cyber"] .filter-shell::before,
[data-theme="cyber"] .filter-drawer::before,
[data-theme="cyber"] .filter-drawer::after {
  display: none !important;
}

/* 2) Collapsed filter drawer should be a compact handle zone, not a large empty neon panel. */
[data-theme="cyber"] .filter-bar.filter-drawer.filters-collapsed {
  padding: 7px 20px 8px !important;
  min-height: 46px !important;
  background:
    linear-gradient(180deg, rgba(5,10,22,.88), rgba(5,10,22,.68)) !important;
  border-bottom: 1px solid rgba(39,244,229,.22) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
}
[data-theme="cyber"] .filter-drawer.filters-collapsed .filter-header {
  display: none !important;
}
[data-theme="cyber"] .filter-drawer.filters-collapsed .active-tags {
  display: none !important;
}
[data-theme="cyber"] .filter-drawer.filters-collapsed .filter-handle-row {
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 4 !important;
}
[data-theme="cyber"] .filter-drawer.filters-collapsed .filter-handle {
  min-height: 30px !important;
  min-width: 126px !important;
  padding: 4px 18px !important;
  transform: none !important;
}

/* 3) Expanded drawer: keep controls readable and scrolling without stealing toolbar clicks. */
[data-theme="cyber"] .filter-bar.filter-drawer:not(.filters-collapsed) {
  padding-top: 9px !important;
  padding-bottom: 10px !important;
  overflow: visible !important;
}
[data-theme="cyber"] .filter-bar.filter-drawer:not(.filters-collapsed) .filter-header {
  margin-top: 0 !important;
}
[data-theme="cyber"] .filter-drawer .filter-collapsible:not(.collapsed) {
  overflow: auto !important;
  overscroll-behavior: contain !important;
}

/* 4) Search control: SCAN tag becomes a real prefix chip and cannot cover typed text. */
[data-theme="cyber"] .search-wrap::before {
  left: 17px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding: 2px 7px !important;
  border: 1px solid rgba(184,255,77,.22) !important;
  border-radius: 999px !important;
  background: rgba(4,8,24,.72) !important;
  color: var(--cy-lime, #b8ff4d) !important;
  line-height: 1 !important;
  z-index: 2 !important;
}
[data-theme="cyber"] .search-wrap input {
  padding-left: 80px !important;
}
@media (max-width: 640px) {
  [data-theme="cyber"] .search-wrap::before {
    content: "S" !important;
    left: 12px !important;
    padding: 2px 6px !important;
  }
  [data-theme="cyber"] .search-wrap input {
    padding-left: 42px !important;
  }
}

/* 5) Toolbar and sort select: arrow and labels align as one button, not a loose select. */
[data-theme="cyber"] .toolbar {
  margin-top: 12px !important;
  padding: 14px 26px !important;
  border: 1px solid rgba(39,244,229,.16) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(90deg, rgba(39,244,229,.06), rgba(255,61,242,.035)),
    rgba(5,10,24,.78) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 16px 36px rgba(0,0,0,.20) !important;
}
[data-theme="cyber"] .toolbar-right {
  align-items: center !important;
  gap: 10px !important;
}
[data-theme="cyber"] .toolbar-right .pd-select-wrap {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}
[data-theme="cyber"] .toolbar-right .pd-select-kind-sort .pd-select-button {
  min-height: 42px !important;
  min-width: 174px !important;
  padding: 7px 36px 7px 14px !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1 !important;
  border-radius: 13px !important;
}
[data-theme="cyber"] .pd-select-button .pd-select-label,
[data-theme="cyber"] .pd-select-button .pd-select-kicker {
  line-height: 1.05 !important;
  align-self: center !important;
}
[data-theme="cyber"] .pd-select-arrow {
  top: 50% !important;
  right: 15px !important;
  width: 8px !important;
  height: 8px !important;
  transform: translateY(-50%) rotate(45deg) !important;
  transform-origin: 50% 50% !important;
}
[data-theme="cyber"] .pd-select-wrap.open .pd-select-arrow {
  transform: translateY(-50%) rotate(225deg) !important;
}
[data-theme="cyber"] .pd-select-menu.pd-select-kind-sort {
  min-width: 174px !important;
}

/* 6) Word-card meta: avoid SIGN/A1 collision with long lemmas. */
[data-theme="cyber"] .word-card {
  padding-top: 22px !important;
}
[data-theme="cyber"] .word-card .word-top {
  padding-right: 100px !important;
}
[data-theme="cyber"] .word-card::after {
  top: 12px !important;
  right: 58px !important;
  max-width: 86px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
[data-theme="cyber"] .word-card .level-badge {
  top: 10px !important;
  right: 14px !important;
  min-width: 32px !important;
  text-align: center !important;
  z-index: 2 !important;
}

@media (max-width: 768px) {
  [data-theme="cyber"] .filter-bar.filter-drawer.filters-collapsed {
    padding-left: 10px !important;
    padding-right: 10px !important;
    min-height: 42px !important;
  }
  [data-theme="cyber"] .toolbar {
    margin-top: 10px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
  }
  [data-theme="cyber"] .toolbar-right .pd-select-kind-sort .pd-select-button {
    min-width: 148px !important;
    max-width: 58vw !important;
    min-height: 38px !important;
  }
  [data-theme="cyber"] .word-card .word-top {
    padding-right: 82px !important;
  }
  [data-theme="cyber"] .word-card::after {
    right: 50px !important;
    max-width: 70px !important;
  }
}


/* =========================================================
   V7.9 cleanup: removed unreachable V6.6 manuscript/parchment preview block.
   Saved localStorage value "manuscript" is migrated to "scriptorium" in app.js.
   ========================================================= */

/* =====================================================================
   20260708 V6.7 Scriptorium Theme Rebuild
   Narrative: a working medieval manuscript scriptorium.
   Uses local CC0 parchment texture with CSS parchment fallback.
   This theme deliberately avoids overriding core overlay/portal/sticky contracts.
   ===================================================================== */
[data-theme="scriptorium"] {
    --bg: #2b1a10;
    --surface: #f2e6c8;
    --surface-hover: #ead8ad;
    --primary: #2b1f14;
    --primary-light: #51371f;
    --accent: #7a1f1f;
    --accent-light: rgba(122,31,31,0.13);
    --accent-hover: #5b1414;
    --text: #2b1f14;
    --text-secondary: #5b4229;
    --text-light: #7a5b38;
    --border: rgba(89, 55, 24, 0.48);
    --shadow: 0 10px 26px rgba(34, 19, 8, .22), inset 0 0 0 1px rgba(255,244,205,.24);
    --shadow-lg: 0 18px 42px rgba(34, 19, 8, .34), inset 0 0 0 1px rgba(255,244,205,.34);
    --radius: 14px;
    --radius-sm: 9px;
    --radius-xs: 4px;
    --font: "EB Garamond", Georgia, "Times New Roman", "Noto Serif SC", "Songti SC", serif;
    --sc-bg-dark: #2a190f;
    --sc-wood: #3a2414;
    --sc-parchment: #f2e6c8;
    --sc-parchment-light: #f8edcf;
    --sc-parchment-deep: #e3c78f;
    --sc-edge: #8a5a2b;
    --sc-ink: #2b1f14;
    --sc-ink-soft: #60462d;
    --sc-rubric: #7a1f1f;
    --sc-rubric-dark: #581515;
    --sc-gold: #8a6a1f;
    --sc-gold-light: #c2a654;
    --sc-blue: #1f3a5f;
    --sc-green: #2f5d46;
    --sc-leather: #5a2f1c;
    --sc-paper-image: url("assets/scriptorium/parchment-base.webp");
    --sc-card-image: url("assets/scriptorium/parchment-card.webp");
    --sc-page-image: url("assets/scriptorium/parchment-page.webp");
}

[data-theme="scriptorium"] body {
    color: var(--sc-ink);
    background:
        radial-gradient(circle at 50% 10%, rgba(190,132,54,.12), transparent 34rem),
        radial-gradient(circle at 18% 88%, rgba(0,0,0,.26), transparent 32rem),
        linear-gradient(135deg, #201109 0%, #3a2414 42%, #1a0e07 100%);
}
[data-theme="scriptorium"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0 49%, rgba(255,224,154,.08) 49.6% 50.4%, transparent 51%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
        radial-gradient(ellipse at 50% 46%, rgba(246,229,190,.08), transparent 55%);
    opacity: .9;
}

/* Shared parchment surface: image first, CSS fallback underneath. */
[data-theme="scriptorium"] .filter-shell,
[data-theme="scriptorium"] .toolbar,
[data-theme="scriptorium"] .word-card,
[data-theme="scriptorium"] .detail-modal,
[data-theme="scriptorium"] .pd-select-menu,
[data-theme="scriptorium"] .feedback-fab,
[data-theme="scriptorium"] .pagination button,
[data-theme="scriptorium"] .load-more-btn,
[data-theme="scriptorium"] .empty-state,
[data-theme="scriptorium"] .data-attribution {
    background-color: var(--sc-parchment);
    background-image:
        radial-gradient(circle at 18% 18%, rgba(126,79,36,.14), transparent 7rem),
        radial-gradient(circle at 84% 82%, rgba(90,45,18,.10), transparent 8rem),
        repeating-linear-gradient(8deg, rgba(76,47,23,.026) 0 1px, transparent 1px 7px),
        linear-gradient(145deg, rgba(248,237,207,.88), rgba(232,211,160,.92)),
        var(--sc-card-image);
    color: var(--sc-ink);
    border-color: var(--border);
}

/* Header: book edge / title plaque. */
[data-theme="scriptorium"] .header {
    background:
        linear-gradient(180deg, rgba(42,24,12,.96), rgba(66,39,20,.95)),
        var(--sc-page-image);
    border-bottom: 2px solid rgba(138,106,31,.78);
    box-shadow: 0 10px 24px rgba(25,14,7,.42), inset 0 -1px 0 rgba(255,232,160,.25);
    backdrop-filter: none;
}
[data-theme="scriptorium"] .header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px; height: 4px;
    background: linear-gradient(90deg, transparent, var(--sc-rubric), var(--sc-gold), var(--sc-blue), var(--sc-rubric), transparent);
    opacity: .55;
    pointer-events: none;
}
[data-theme="scriptorium"] .logo {
    color: #f4e4b7;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: "Cinzel", Georgia, serif;
    text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
[data-theme="scriptorium"] .logo::after {
    content: " SCRIPTORIUM";
    margin-left: 8px;
    color: var(--sc-gold-light);
    font: 800 .62rem/1 Georgia, serif;
    letter-spacing: .18em;
    border-left: 1px solid rgba(194,166,84,.58);
    padding-left: 8px;
}
[data-theme="scriptorium"] .logo svg {
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.55));
}
[data-theme="scriptorium"] .logo svg rect {
    fill: #7a1f1f;
    stroke: #c2a654;
    stroke-width: 2px;
}
[data-theme="scriptorium"] .logo svg text { fill: #f7e7ac; font-family: Georgia, serif; }
[data-theme="scriptorium"] .logo span { color: #f2e6c8; }
[data-theme="scriptorium"] .logo .logo-text span { color: var(--sc-gold-light); }

[data-theme="scriptorium"] .search-wrap::before {
    content: "INDEX";
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: var(--sc-rubric);
    font: 800 .68rem/1 Georgia, serif;
    letter-spacing: .16em;
    pointer-events: none;
}
[data-theme="scriptorium"] .search-wrap .search-icon { display: none; }
[data-theme="scriptorium"] .search-wrap input {
    padding-left: 72px;
    border-radius: 999px 999px 999px 999px / 54% 46% 54% 46%;
    border: 1.5px solid rgba(194,166,84,.66);
    background:
        radial-gradient(circle at 8% 50%, rgba(122,31,31,.10), transparent 3.6rem),
        linear-gradient(180deg, rgba(248,237,207,.92), rgba(231,209,160,.88)),
        var(--sc-card-image);
    color: var(--sc-ink);
    box-shadow: inset 0 2px 8px rgba(65,38,16,.16), 0 0 0 1px rgba(255,240,195,.16);
    font-family: var(--font);
}
[data-theme="scriptorium"] .search-wrap input::placeholder { color: rgba(43,31,20,.58); }
[data-theme="scriptorium"] .search-wrap input:focus {
    border-color: var(--sc-gold);
    box-shadow: inset 0 2px 8px rgba(65,38,16,.2), 0 0 0 3px rgba(194,166,84,.20);
    background-color: #f7ebc8;
}
[data-theme="scriptorium"] .search-wrap .clear-btn {
    color: var(--sc-rubric);
    background: rgba(122,31,31,.08);
    border: 1px solid rgba(122,31,31,.18);
}
[data-theme="scriptorium"] .search-wrap .clear-btn:hover { background: var(--sc-rubric); color: #f9e7b8; }

[data-theme="scriptorium"] .ctrl-btn,
[data-theme="scriptorium"] .theme-select,
[data-theme="scriptorium"] .font-control button {
    border: 1.5px solid rgba(194,166,84,.62);
    background:
        linear-gradient(180deg, rgba(95,48,24,.94), rgba(65,32,16,.96));
    color: #f5e5b7;
    border-radius: 7px;
    font-family: Georgia, serif;
    box-shadow: inset 0 1px 0 rgba(255,242,198,.16), 0 2px 5px rgba(0,0,0,.25);
}
[data-theme="scriptorium"] .theme-select {
    border-radius: 7px 7px 14px 14px;
    padding-top: 8px;
}
[data-theme="scriptorium"] .ctrl-btn:hover,
[data-theme="scriptorium"] .theme-select:hover,
[data-theme="scriptorium"] .theme-select:focus,
[data-theme="scriptorium"] .font-control button:hover {
    background: linear-gradient(180deg, #7a1f1f, #4a2015);
    border-color: var(--sc-gold-light);
    color: #fff1c8;
}
[data-theme="scriptorium"] .font-control .font-size-label { color: #d8c17e; font-family: Georgia, serif; }

/* Filter: bookmark tabs / index slips. */
[data-theme="scriptorium"] .filter-bar {
    background: rgba(43,25,12,.88);
    border-bottom: 1px solid rgba(194,166,84,.36);
    box-shadow: 0 8px 18px rgba(25,14,7,.34);
}
[data-theme="scriptorium"] .filter-shell {
    position: relative;
    border: 1px solid rgba(138,106,31,.44);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 10px 28px rgba(27,15,7,.26), inset 0 0 22px rgba(110,70,28,.11);
    padding: 8px 16px 10px;
}
[data-theme="scriptorium"] .filter-shell::before,
[data-theme="scriptorium"] .filter-shell::after {
    content: "";
    position: absolute;
    top: 6px;
    width: 48px; height: 48px;
    color: rgba(122,31,31,.26);
    background: currentColor;
    -webkit-mask: url("assets/scriptorium/corner-ornament.svg") center/contain no-repeat;
            mask: url("assets/scriptorium/corner-ornament.svg") center/contain no-repeat;
    pointer-events: none;
}
[data-theme="scriptorium"] .filter-shell::before { left: 8px; }
[data-theme="scriptorium"] .filter-shell::after { right: 8px; transform: scaleX(-1); }
[data-theme="scriptorium"] .filter-panel-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 3px 14px 3px 34px;
    color: #f9e7b8;
    background: linear-gradient(180deg, #7a1f1f, #571515);
    border: 1px solid rgba(194,166,84,.66);
    border-radius: 7px 7px 14px 14px;
    font: 800 .76rem/1 Georgia, serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255,235,177,.22), 0 2px 6px rgba(80,30,10,.28);
}
[data-theme="scriptorium"] .filter-panel-title::before {
    content: "❧";
    position: absolute;
    left: 11px;
    color: var(--sc-gold-light);
    font-size: 1rem;
}
[data-theme="scriptorium"] .filter-label {
    color: #f6e8bd;
    background: linear-gradient(180deg, #5a2f1c, #3b1d11);
    border: 1px solid rgba(194,166,84,.42);
    border-radius: 7px 7px 12px 12px;
    padding: 4px 9px;
    font: 800 .66rem/1 Georgia, serif;
    letter-spacing: .11em;
}
[data-theme="scriptorium"] .filter-group:nth-of-type(1) .filter-label { border-color: rgba(138,106,31,.75); }
[data-theme="scriptorium"] .filter-group:nth-of-type(3) .filter-label { border-color: rgba(122,31,31,.72); }
[data-theme="scriptorium"] .filter-group:nth-of-type(5) .filter-label { border-color: rgba(31,58,95,.70); }
[data-theme="scriptorium"] .filter-group:nth-of-type(7) .filter-label { border-color: rgba(47,93,70,.70); }
[data-theme="scriptorium"] .filter-group:nth-of-type(9) .filter-label { border-color: rgba(138,106,31,.75); }
[data-theme="scriptorium"] .filter-count {
    background: rgba(43,31,20,.10);
    border: 1px solid rgba(91,66,41,.24);
    color: var(--sc-ink-soft);
    font-family: Georgia, serif;
}
[data-theme="scriptorium"] .divider { background: rgba(122,31,31,.22); }
[data-theme="scriptorium"] .filter-toggle,
[data-theme="scriptorium"] .clear-filters-btn,
[data-theme="scriptorium"] .mode-toggle,
[data-theme="scriptorium"] .filter-chip,
[data-theme="scriptorium"] .letter-filter button,
[data-theme="scriptorium"] .select-filter,
[data-theme="scriptorium"] .active-tag {
    border: 1px solid rgba(89,55,24,.48);
    background:
        linear-gradient(180deg, rgba(248,237,207,.92), rgba(225,196,134,.86)),
        var(--sc-card-image);
    color: var(--sc-ink);
    border-radius: 8px 8px 13px 13px;
    font-family: Georgia, "Noto Serif SC", serif;
    box-shadow: inset 0 1px 0 rgba(255,248,220,.55);
}
[data-theme="scriptorium"] .filter-toggle:hover,
[data-theme="scriptorium"] .clear-filters-btn:hover,
[data-theme="scriptorium"] .mode-toggle:hover,
[data-theme="scriptorium"] .filter-chip:hover,
[data-theme="scriptorium"] .letter-filter button:hover,
[data-theme="scriptorium"] .select-filter:hover,
[data-theme="scriptorium"] .select-filter:focus {
    color: var(--sc-rubric);
    border-color: var(--sc-rubric);
    background:
        linear-gradient(180deg, #fbefcb, #e8ca8c),
        var(--sc-card-image);
}
[data-theme="scriptorium"] .filter-toggle-badge,
[data-theme="scriptorium"] .letter-filter button.active,
[data-theme="scriptorium"] .filter-chip.include,
[data-theme="scriptorium"] .mode-toggle[data-mode="include"] {
    background: linear-gradient(180deg, #8f2929, #641919);
    color: #ffefbf;
    border-color: rgba(194,166,84,.72);
    box-shadow: inset 0 1px 0 rgba(255,232,174,.23), 0 2px 6px rgba(122,31,31,.22);
}
[data-theme="scriptorium"] .filter-chip.include span { color: #f4d983; }
[data-theme="scriptorium"] .filter-chip.exclude,
[data-theme="scriptorium"] .mode-toggle[data-mode="exclude"] {
    color: #f1d8a6;
    border-color: #5e1616;
    background: repeating-linear-gradient(-8deg, #5b1717 0 5px, #461010 5px 10px);
    text-decoration: line-through;
}
[data-theme="scriptorium"] .active-tags { padding-left: 0; padding-right: 0; }
[data-theme="scriptorium"] .active-tag {
    background: linear-gradient(180deg, #7a1f1f, #551515);
    color: #f9e7b8;
    border-color: rgba(194,166,84,.55);
}

/* Toolbar / index page strip. */
[data-theme="scriptorium"] .toolbar {
    margin-top: 14px;
    border: 1px solid rgba(138,106,31,.44);
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(27,15,7,.25), inset 0 0 26px rgba(108,68,26,.10);
}
[data-theme="scriptorium"] .toolbar-left::before {
    content: "FOLIO INDEX";
    color: var(--sc-rubric);
    border: 1px solid rgba(122,31,31,.3);
    border-radius: 999px;
    padding: 4px 10px;
    margin-right: 8px;
    font: 800 .68rem/1 Georgia, serif;
    letter-spacing: .12em;
}
[data-theme="scriptorium"] #resultSummary { color: var(--sc-blue); font-weight: 800; }
[data-theme="scriptorium"] .sort-label {
    color: var(--sc-rubric);
    font: 800 .72rem/1 Georgia, serif;
    letter-spacing: .12em;
}
[data-theme="scriptorium"] .main {
    border-radius: 26px;
    position: relative;
}

/* Cards: folio slips with illuminated initials and wax/ink controls. */
[data-theme="scriptorium"] .word-card {
    min-height: 220px;
    border: 1.5px solid rgba(97,61,28,.52);
    border-radius: 4px 18px 4px 18px;
    box-shadow: 0 14px 28px rgba(28,14,6,.25), inset 0 0 0 1px rgba(255,246,214,.28), inset 0 0 34px rgba(99,64,26,.13);
    clip-path: polygon(0 8px, 8px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 10px));
    overflow: hidden;
}
[data-theme="scriptorium"] .word-card::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(122,31,31,.18);
    border-radius: 2px 13px 2px 13px;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(194,166,84,.14);
}
[data-theme="scriptorium"] .word-card::after {
    content: "FOLIO " counter(card-index, upper-roman);
    counter-increment: card-index;
    position: absolute;
    top: 13px;
    right: 16px;
    color: var(--sc-rubric);
    font: 800 .62rem/1 Georgia, serif;
    letter-spacing: .14em;
    opacity: .86;
}
[data-theme="scriptorium"] .word-grid { counter-reset: card-index; }
[data-theme="scriptorium"] .word-card:hover {
    transform: translateY(-3px) rotate(-.25deg);
    border-color: rgba(138,106,31,.72);
    box-shadow: 0 20px 44px rgba(28,14,6,.34), inset 0 0 0 1px rgba(255,246,214,.34), inset 0 0 36px rgba(99,64,26,.15);
}
[data-theme="scriptorium"] .word-card .word-top { padding-right: 86px; align-items: baseline; }
[data-theme="scriptorium"] .word-card .word-text {
    position: relative;
    color: var(--sc-rubric);
    font-family: "Cinzel", Georgia, serif;
    text-transform: none;
    letter-spacing: .02em;
    text-shadow: 0 1px 0 rgba(255,239,186,.38);
}
[data-theme="scriptorium"] .word-card .word-text::first-letter {
    font-size: 1.55em;
    line-height: .8;
    color: var(--sc-gold);
    text-shadow: 0 1px 0 #fff0b7, 0 2px 0 rgba(85,49,18,.22);
}
[data-theme="scriptorium"] .word-card .word-phonetic {
    color: var(--sc-blue);
    font-weight: 800;
}
[data-theme="scriptorium"] .word-card .meaning { color: var(--sc-ink); font-weight: 600; }
[data-theme="scriptorium"] .word-card .example {
    position: relative;
    margin-top: 8px;
    padding: 12px 14px 12px 30px;
    background: rgba(90,58,28,.09);
    border-left: 3px solid var(--sc-rubric);
    border-radius: 0 12px 12px 0;
    color: var(--sc-ink-soft);
    box-shadow: inset 0 1px 6px rgba(60,35,14,.07);
}
[data-theme="scriptorium"] .word-card .example::before {
    content: "❦";
    position: absolute;
    left: 9px;
    top: 10px;
    color: var(--sc-gold);
    font-size: 1rem;
}
[data-theme="scriptorium"] .word-card .example .ex-trans { color: var(--sc-ink); }
[data-theme="scriptorium"] .pos-tag {
    background: rgba(122,31,31,.10);
    color: var(--sc-rubric);
    border: 1px solid rgba(122,31,31,.38);
    border-radius: 4px 9px 4px 9px;
    font-family: Georgia, serif;
    text-transform: none;
    letter-spacing: .04em;
    box-shadow: inset 0 1px 0 rgba(255,244,205,.45);
}
[data-theme="scriptorium"] .pos-tag.noun { background: rgba(31,58,95,.12); color: var(--sc-blue); border-color: rgba(31,58,95,.42); }
[data-theme="scriptorium"] .pos-tag.verb { background: rgba(122,31,31,.12); color: var(--sc-rubric); border-color: rgba(122,31,31,.42); }
[data-theme="scriptorium"] .pos-tag.adj,
[data-theme="scriptorium"] .pos-tag.adjective { background: rgba(47,93,70,.13); color: var(--sc-green); border-color: rgba(47,93,70,.42); }
[data-theme="scriptorium"] .pos-tag.adv,
[data-theme="scriptorium"] .pos-tag.adverb { background: rgba(91,48,70,.12); color: #5b3046; border-color: rgba(91,48,70,.35); }
[data-theme="scriptorium"] .pos-tag.numeral { background: rgba(138,106,31,.15); color: var(--sc-gold); border-color: rgba(138,106,31,.46); }
[data-theme="scriptorium"] .word-card .card-footer .theme-tag {
    background: rgba(31,58,95,.09);
    color: var(--sc-blue);
    border: 1px solid rgba(31,58,95,.22);
    border-radius: 999px;
    font-family: Georgia, serif;
}
[data-theme="scriptorium"] .theme-tag.theme-more { color: var(--sc-rubric); background: rgba(122,31,31,.08); border-color: rgba(122,31,31,.22); }
[data-theme="scriptorium"] .level-badge {
    top: 36px;
    right: 14px;
    border-radius: 50%;
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 35% 30%, #e0c272, #8a6a1f 72%);
    color: #fff3c4;
    border: 1px solid rgba(80,52,18,.45);
    box-shadow: inset 0 2px 5px rgba(255,247,195,.22), 0 2px 5px rgba(64,32,12,.23);
    font: 800 .62rem/1 Georgia, serif;
}
[data-theme="scriptorium"] .word-card-extra { border-style: solid; }

/* TTS horn icon and sound affordances. */
[data-theme="scriptorium"] .tts-btn,
[data-theme="scriptorium"] .ex-tts-btn,
[data-theme="scriptorium"] #detailTtsBtn {
    position: relative;
    color: var(--sc-gold);
    background:
        radial-gradient(circle at 35% 30%, #fbefc7, #d1ac55 48%, #7b5720);
    border: 1px solid rgba(90,58,24,.55);
    border-radius: 50% 44% 50% 44%;
    box-shadow: inset 0 1px 0 rgba(255,246,207,.45), 0 2px 7px rgba(60,35,12,.20);
    font-size: 0 !important;
    overflow: hidden;
}
[data-theme="scriptorium"] .tts-btn::before,
[data-theme="scriptorium"] .ex-tts-btn::before,
[data-theme="scriptorium"] #detailTtsBtn::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin: auto;
    background: #5a3518;
    -webkit-mask: url("assets/scriptorium/horn.svg") center/contain no-repeat;
            mask: url("assets/scriptorium/horn.svg") center/contain no-repeat;
}
[data-theme="scriptorium"] .tts-btn:hover,
[data-theme="scriptorium"] .ex-tts-btn:hover,
[data-theme="scriptorium"] #detailTtsBtn:hover,
[data-theme="scriptorium"] .tts-speaking {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,246,207,.52), 0 0 0 3px rgba(194,166,84,.18), 0 5px 12px rgba(60,35,12,.22);
}
[data-theme="scriptorium"] .ex-tts-btn { width: 26px; height: 26px; vertical-align: middle; }
[data-theme="scriptorium"] .ex-tts-btn::before { width: 14px; height: 14px; }

/* Detail: open codex page. */
[data-theme="scriptorium"] .detail-overlay {
    background: rgba(27,15,7,.58);
    backdrop-filter: blur(4px) sepia(.22);
}
[data-theme="scriptorium"] .detail-modal {
    position: relative;
    border: 1.5px solid rgba(138,106,31,.58);
    border-radius: 4px 24px 4px 24px;
    background-image:
        linear-gradient(90deg, rgba(90,55,24,.10), transparent 48%, rgba(65,38,16,.20) 49.7%, rgba(255,244,205,.18) 50.2%, transparent 52%),
        radial-gradient(circle at 18% 20%, rgba(126,79,36,.14), transparent 13rem),
        radial-gradient(circle at 83% 72%, rgba(90,45,18,.10), transparent 12rem),
        repeating-linear-gradient(8deg, rgba(76,47,23,.024) 0 1px, transparent 1px 7px),
        linear-gradient(145deg, rgba(248,237,207,.91), rgba(232,211,160,.94)),
        var(--sc-page-image);
    box-shadow: 0 24px 70px rgba(20,10,4,.50), inset 0 0 0 1px rgba(255,246,214,.35), inset 0 0 55px rgba(93,58,22,.16);
    color: var(--sc-ink);
}
[data-theme="scriptorium"] .detail-modal::before,
[data-theme="scriptorium"] .detail-modal::after {
    content: "";
    position: absolute;
    width: 72px;
    height: 72px;
    color: rgba(122,31,31,.20);
    background: currentColor;
    -webkit-mask: url("assets/scriptorium/corner-ornament.svg") center/contain no-repeat;
            mask: url("assets/scriptorium/corner-ornament.svg") center/contain no-repeat;
    pointer-events: none;
    z-index: 0;
}
[data-theme="scriptorium"] .detail-modal::before { left: 12px; top: 12px; }
[data-theme="scriptorium"] .detail-modal::after { right: 12px; bottom: 12px; transform: rotate(180deg); }
[data-theme="scriptorium"] .detail-header {
    position: sticky;
    z-index: 5;
    background:
        linear-gradient(180deg, rgba(248,237,207,.96), rgba(232,211,160,.94)),
        var(--sc-page-image);
    border-bottom: 1px solid rgba(122,31,31,.32);
    box-shadow: 0 4px 12px rgba(76,47,23,.10);
}
[data-theme="scriptorium"] .detail-header::after {
    content: "";
    display: block;
    position: absolute;
    left: 24px; right: 24px; bottom: -12px; height: 16px;
    color: rgba(138,106,31,.55);
    background: currentColor;
    -webkit-mask: url("assets/scriptorium/fleuron.svg") center/contain no-repeat;
            mask: url("assets/scriptorium/fleuron.svg") center/contain no-repeat;
    pointer-events: none;
}
[data-theme="scriptorium"] .detail-header .dh-word {
    color: var(--sc-rubric);
    font-family: "Cinzel", Georgia, serif;
    letter-spacing: .02em;
}
[data-theme="scriptorium"] .detail-header .dh-word::first-letter {
    color: var(--sc-gold);
    font-size: 1.28em;
    text-shadow: 0 1px 0 #fff0b7;
}
[data-theme="scriptorium"] .detail-header .dh-phonetic { color: var(--sc-blue); font-weight: 800; }
[data-theme="scriptorium"] .dh-ctrl-btn,
[data-theme="scriptorium"] .detail-nav button {
    border: 1px solid rgba(89,55,24,.44);
    background:
        linear-gradient(180deg, rgba(250,239,205,.94), rgba(221,191,128,.9)),
        var(--sc-card-image);
    color: var(--sc-ink);
    border-radius: 8px 8px 14px 14px;
    box-shadow: inset 0 1px 0 rgba(255,248,220,.55), 0 2px 5px rgba(60,35,12,.16);
    font-family: Georgia, serif;
}
[data-theme="scriptorium"] .dh-ctrl-btn:hover,
[data-theme="scriptorium"] .detail-nav button:hover {
    border-color: var(--sc-rubric);
    color: var(--sc-rubric);
    background:
        linear-gradient(180deg, #fbefcb, #e7c587),
        var(--sc-card-image);
}
[data-theme="scriptorium"] #detailCloseBtn {
    background: radial-gradient(circle at 38% 32%, #b24a39, #741f1f 68%, #4a1111);
    color: #f9e7b8;
    border-radius: 50%;
    border-color: rgba(80,26,20,.5);
}
[data-theme="scriptorium"] #detailCloseBtn:hover { color: #fff4cc; box-shadow: inset 0 2px 6px rgba(0,0,0,.14), 0 0 0 3px rgba(122,31,31,.20); }
[data-theme="scriptorium"] .detail-body { position: relative; z-index: 1; }
[data-theme="scriptorium"] .detail-meaning,
[data-theme="scriptorium"] .grammar-section,
[data-theme="scriptorium"] .example-item {
    background: rgba(90,58,28,.075);
    border-color: rgba(122,31,31,.32);
    color: var(--sc-ink);
    box-shadow: inset 0 1px 6px rgba(58,34,15,.07);
}
[data-theme="scriptorium"] .grammar-section h3 {
    color: var(--sc-rubric);
    border-bottom-color: rgba(138,106,31,.32);
    font-family: Georgia, "Noto Serif SC", serif;
}
[data-theme="scriptorium"] .grammar-section h3::before {
    content: "❦";
    color: var(--sc-gold);
    margin-right: 2px;
}
[data-theme="scriptorium"] .grammar-table-wrap {
    border-color: rgba(89,55,24,.44);
    background: rgba(246,230,200,.58);
    box-shadow: inset 0 0 0 1px rgba(255,246,214,.24);
}
[data-theme="scriptorium"] .grammar-table th {
    background: rgba(122,31,31,.12);
    color: var(--sc-rubric);
    border-bottom-color: rgba(122,31,31,.28);
    font-family: Georgia, serif;
}
[data-theme="scriptorium"] .grammar-table td {
    border-bottom-color: rgba(89,55,24,.22);
}
[data-theme="scriptorium"] .grammar-table .case-name,
[data-theme="scriptorium"] .grammar-table th:first-child,
[data-theme="scriptorium"] .grammar-table td:first-child {
    background:
        linear-gradient(180deg, rgba(242,219,166,.98), rgba(221,191,128,.96)),
        var(--sc-card-image);
    color: var(--sc-rubric);
    box-shadow: 3px 0 8px rgba(62,38,16,.12);
}
[data-theme="scriptorium"] .grammar-table tr:hover td { background: rgba(194,166,84,.09); }
[data-theme="scriptorium"] .example-item { border-left-color: var(--sc-rubric); }
[data-theme="scriptorium"] .example-item .ex-src { color: var(--sc-ink); }
[data-theme="scriptorium"] .example-item .ex-trans { color: var(--sc-ink-soft); }
[data-theme="scriptorium"] .example-item .ex-grammar { background: rgba(31,58,95,.10); color: var(--sc-blue); }
[data-theme="scriptorium"] .aspect-pair-link { color: var(--sc-blue); }
[data-theme="scriptorium"] .search-mark { background: rgba(194,166,84,.34); color: var(--sc-rubric); }

/* Detail page navigation: parchment page edges. */
[data-theme="scriptorium"] .detail-overlay > .detail-side-nav,
[data-theme="scriptorium"] .detail-overlay.open > .detail-side-nav {
    background:
        linear-gradient(180deg, rgba(248,237,207,.96), rgba(219,187,119,.95)),
        var(--sc-card-image) !important;
    border: 1px solid rgba(122,31,31,.35) !important;
    color: var(--sc-rubric) !important;
    box-shadow: 0 8px 24px rgba(28,14,6,.32), inset 0 0 0 1px rgba(255,246,214,.28) !important;
}
[data-theme="scriptorium"] .detail-overlay > .detail-side-prev { border-radius: 0 18px 18px 0 !important; }
[data-theme="scriptorium"] .detail-overlay > .detail-side-next { border-radius: 18px 0 0 18px !important; }
[data-theme="scriptorium"] .detail-overlay > .detail-side-nav::before {
    color: var(--sc-gold) !important;
    text-shadow: 0 1px 0 #fff0b7;
}
[data-theme="scriptorium"] .detail-overlay > .detail-side-nav::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 62px;
    background: rgba(122,31,31,.16);
    border: 1px solid rgba(122,31,31,.22);
}
[data-theme="scriptorium"] .detail-overlay > .detail-side-prev::after { left: 6px; border-radius: 0 12px 12px 0; }
[data-theme="scriptorium"] .detail-overlay > .detail-side-next::after { right: 6px; border-radius: 12px 0 0 12px; }
[data-theme="scriptorium"] .detail-overlay > .detail-side-nav:hover,
[data-theme="scriptorium"] .detail-overlay > .detail-side-nav:focus-visible {
    transform: translateY(-50%) scale(1.03);
    border-color: var(--sc-gold) !important;
}

/* Custom select menus: folded parchment notes. */
[data-theme="scriptorium"] .pd-select-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    line-height: 1;
    border: 1.5px solid rgba(138,106,31,.48);
    background:
        linear-gradient(180deg, rgba(248,237,207,.94), rgba(224,194,131,.88)),
        var(--sc-card-image);
    color: var(--sc-ink);
    border-radius: 8px 8px 14px 14px;
    box-shadow: inset 0 1px 0 rgba(255,248,220,.55);
    font-family: Georgia, serif;
}
[data-theme="scriptorium"] .pd-select-kicker {
    color: var(--sc-rubric);
    font: 800 .62rem/1 Georgia, serif;
    letter-spacing: .12em;
}
[data-theme="scriptorium"] .pd-select-label { font-weight: 800; }
[data-theme="scriptorium"] .pd-select-arrow {
    color: var(--sc-gold);
    margin-left: auto;
    transform-origin: center;
}
[data-theme="scriptorium"] .pd-select-button:hover,
[data-theme="scriptorium"] .pd-select-button:focus,
[data-theme="scriptorium"] .pd-select-wrap.open .pd-select-button {
    border-color: var(--sc-rubric);
    color: var(--sc-rubric);
    background:
        linear-gradient(180deg, #fbefcb, #e6c482),
        var(--sc-card-image);
}
[data-theme="scriptorium"] .pd-select-menu {
    border: 1.5px solid rgba(89,55,24,.56);
    border-radius: 4px 14px 4px 14px;
    box-shadow: 0 18px 34px rgba(27,15,7,.35), inset 0 0 0 1px rgba(255,246,214,.27);
    color: var(--sc-ink);
}
[data-theme="scriptorium"] .pd-select-menu::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(122,31,31,.13);
    pointer-events: none;
}
[data-theme="scriptorium"] .pd-select-menu-head {
    color: var(--sc-rubric);
    border-bottom: 1px solid rgba(122,31,31,.22);
    background: rgba(122,31,31,.06);
    font-family: Georgia, serif;
}
[data-theme="scriptorium"] .pd-select-menu-head::before { content: "INDEX SLIP // "; color: var(--sc-gold); }
[data-theme="scriptorium"] .pd-select-option {
    color: var(--sc-ink);
    font-family: Georgia, "Noto Serif SC", serif;
    border-bottom: 1px solid rgba(89,55,24,.12);
}
[data-theme="scriptorium"] .pd-select-option:hover,
[data-theme="scriptorium"] .pd-select-option:focus {
    background: rgba(194,166,84,.16);
    color: var(--sc-rubric);
}
[data-theme="scriptorium"] .pd-select-option.active {
    background: rgba(122,31,31,.12);
    color: var(--sc-rubric);
}
[data-theme="scriptorium"] .pd-select-dot { color: var(--sc-rubric); }
[data-theme="scriptorium"] .pd-select-code { color: rgba(91,66,41,.56); }
[data-theme="scriptorium"] .pd-select-option[data-value="scriptorium"] .pd-select-dot,
[data-theme="scriptorium"] .pd-select-option[data-value="manuscript"] .pd-select-dot { color: var(--sc-gold); }
[data-theme="scriptorium"] .pd-select-option[data-value="cyber"] .pd-select-dot { color: var(--sc-blue); }
[data-theme="scriptorium"] .pd-select-option[data-value="danger"] .pd-select-dot { color: var(--sc-rubric); }

/* Feedback / pagination / footer. */
[data-theme="scriptorium"] .feedback-fab {
    color: var(--sc-rubric);
    border: 1.5px solid rgba(122,31,31,.46);
    border-radius: 4px 16px 4px 16px;
    box-shadow: 0 10px 22px rgba(27,15,7,.28), inset 0 0 0 1px rgba(255,246,214,.28);
    font-family: Georgia, serif;
}
[data-theme="scriptorium"] .feedback-fab::before { content: "✒ "; color: var(--sc-gold); }
[data-theme="scriptorium"] .feedback-fab:hover {
    transform: translateY(-3px) rotate(-1deg);
    border-color: var(--sc-gold);
}
[data-theme="scriptorium"] .pagination button,
[data-theme="scriptorium"] .load-more-btn {
    color: var(--sc-ink);
    border-color: rgba(89,55,24,.44);
    font-family: Georgia, serif;
}
[data-theme="scriptorium"] .pagination button:hover,
[data-theme="scriptorium"] .load-more-btn:hover {
    color: var(--sc-rubric);
    border-color: var(--sc-rubric);
}
[data-theme="scriptorium"] .pagination button.active {
    background: linear-gradient(180deg, #8f2929, #641919);
    color: #ffefbf;
    border-color: rgba(194,166,84,.72);
}
[data-theme="scriptorium"] .data-attribution {
    margin-top: 12px;
    border: 1px solid rgba(89,55,24,.25);
    border-radius: 14px;
    color: var(--sc-ink-soft);
}
[data-theme="scriptorium"] .empty-state .empty-icon { color: var(--sc-gold); }

/* Mobile: keep all filters, but make the scriptorium bookmark drawer compact and scrollable. */
@media (max-width: 760px) {
    [data-theme="scriptorium"] .header-inner { gap: 8px; }
    [data-theme="scriptorium"] .logo::after { display: none; }
    [data-theme="scriptorium"] .search-wrap::before { content: "IDX"; left: 11px; }
    [data-theme="scriptorium"] .search-wrap input { padding-left: 50px; }
    [data-theme="scriptorium"] .filter-shell { padding: 7px 10px 8px; }
    [data-theme="scriptorium"] .filter-collapsible:not(.collapsed) {
        max-height: min(42vh, 330px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        padding-right: 2px;
    }
    [data-theme="scriptorium"] .filter-inner {
        align-items: flex-start;
        gap: 8px;
    }
    [data-theme="scriptorium"] .filter-group {
        width: 100%;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    [data-theme="scriptorium"] .letter-filter,
    [data-theme="scriptorium"] .chip-filter {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    [data-theme="scriptorium"] .divider { display: none; }
    [data-theme="scriptorium"] .toolbar {
        margin-top: 10px;
        padding: 10px 12px;
    }
    [data-theme="scriptorium"] .toolbar-left::before { display: none; }
    [data-theme="scriptorium"] .word-card { min-height: 205px; }
    [data-theme="scriptorium"] .word-card::after { top: 11px; right: 12px; font-size: .55rem; }
    [data-theme="scriptorium"] .word-card .word-top { padding-right: 72px; }
    [data-theme="scriptorium"] .level-badge { top: 31px; right: 12px; min-width: 27px; height: 27px; }
    [data-theme="scriptorium"] .detail-modal {
        border-radius: 0;
        background-image:
            radial-gradient(circle at 18% 20%, rgba(126,79,36,.14), transparent 12rem),
            radial-gradient(circle at 83% 72%, rgba(90,45,18,.10), transparent 10rem),
            repeating-linear-gradient(8deg, rgba(76,47,23,.024) 0 1px, transparent 1px 7px),
            linear-gradient(145deg, rgba(248,237,207,.94), rgba(232,211,160,.96)),
            var(--sc-page-image);
    }
    [data-theme="scriptorium"] .detail-modal::before,
    [data-theme="scriptorium"] .detail-modal::after { width: 48px; height: 48px; opacity: .6; }
    [data-theme="scriptorium"] .detail-overlay.open > .detail-side-nav {
        width: 30px !important;
        top: var(--pd-detail-side-top, 126px) !important;
        bottom: max(14px, env(safe-area-inset-bottom, 0px) + 14px) !important;
    }
    [data-theme="scriptorium"] .detail-overlay > .detail-side-nav::after { width: 15px; height: 52px; }
}

@media (max-width: 480px) {
    [data-theme="scriptorium"] .filter-panel-title { max-width: 135px; letter-spacing: .08em; }
    [data-theme="scriptorium"] .pd-select-kind-sort .pd-select-button { min-width: 118px; }
    [data-theme="scriptorium"] .detail-header .dh-word { font-size: 1.56rem; }
    
}

/* =========================================================
   20260708 V6.8 Scriptorium II / Scroll Refinement Pass
   Goal: move away from heavy brown “retro UI” into a cleaner scriptorium system:
   - lighter vellum, restrained rubric/gold/ultramarine accents
   - scroll-index filter and folio toolbar
   - weaker codex crease, readable grammar tables
   - illuminated initials, horn TTS, quill feedback
   This pass only skins the scriptorium theme and does not change core layout contracts.
   ========================================================= */
[data-theme="scriptorium"] {
  --bg: #28180e;
  --surface: #f3e6c4;
  --surface-hover: #f7edcf;
  --primary: #2b1f14;
  --primary-light: #4a3523;
  --accent: #8a2d24;
  --accent-light: rgba(138,45,36,.10);
  --accent-hover: #681e18;
  --text: #2b1f14;
  --text-secondary: #5b4631;
  --text-light: #806444;
  --border: rgba(86,58,28,.34);
  --shadow: 0 10px 24px rgba(34,19,8,.18), inset 0 0 0 1px rgba(255,247,218,.28);
  --shadow-lg: 0 18px 42px rgba(34,19,8,.30), inset 0 0 0 1px rgba(255,247,218,.38);
  --sc-bg-dark: #2a1a10;
  --sc-wood: #362315;
  --sc-parchment: #f3e6c4;
  --sc-parchment-light: #f8edcf;
  --sc-parchment-deep: #dfc58d;
  --sc-edge: #80582b;
  --sc-ink: #2b1f14;
  --sc-ink-soft: #5b4631;
  --sc-rubric: #8a2d24;
  --sc-rubric-dark: #5d1a16;
  --sc-gold: #9a7828;
  --sc-gold-light: #d4b56b;
  --sc-blue: #25456f;
  --sc-green: #3d6750;
  --sc-leather: #4b2b1a;
  --sc-copper: #8f6a35;
}

[data-theme="scriptorium"] body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(216,174,86,.10), transparent 34rem),
    radial-gradient(circle at 14% 84%, rgba(0,0,0,.22), transparent 30rem),
    repeating-linear-gradient(90deg, rgba(255,220,160,.025) 0 1px, transparent 1px 18px),
    linear-gradient(135deg, #1d1008 0%, #392517 48%, #1b0e07 100%) !important;
}
[data-theme="scriptorium"] body::before {
  opacity: .52 !important;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(248,229,184,.08), transparent 56%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 6px) !important;
}

/* Cleaner parchment surfaces: image texture present, but pigment/contrast is toned down. */
[data-theme="scriptorium"] .filter-shell,
[data-theme="scriptorium"] .toolbar,
[data-theme="scriptorium"] .word-card,
[data-theme="scriptorium"] .detail-modal,
[data-theme="scriptorium"] .pd-select-menu,
[data-theme="scriptorium"] .feedback-fab,
[data-theme="scriptorium"] .pagination button,
[data-theme="scriptorium"] .load-more-btn,
[data-theme="scriptorium"] .empty-state,
[data-theme="scriptorium"] .data-attribution {
  background-color: var(--sc-parchment) !important;
  background-image:
    radial-gradient(circle at 13% 18%, rgba(132,86,39,.060), transparent 9rem),
    radial-gradient(circle at 88% 76%, rgba(96,58,25,.052), transparent 10rem),
    repeating-linear-gradient(8deg, rgba(76,47,23,.018) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, rgba(248,237,207,.74), rgba(232,211,160,.78)),
    var(--sc-card-image) !important;
  border-color: rgba(86,58,28,.28) !important;
}

/* Header as a restrained leather spine, not a coffee-brown navbar. */
[data-theme="scriptorium"] .header {
  background:
    radial-gradient(circle at 10% 0%, rgba(212,181,107,.08), transparent 13rem),
    linear-gradient(180deg, rgba(50,29,15,.97), rgba(39,23,13,.98)) !important;
  border-bottom: 1px solid rgba(154,120,40,.62) !important;
  box-shadow: 0 8px 20px rgba(20,10,4,.36), inset 0 -1px 0 rgba(244,220,154,.20) !important;
}
[data-theme="scriptorium"] .header::after {
  height: 2px !important;
  bottom: -2px !important;
  background: linear-gradient(90deg, transparent 6%, rgba(154,120,40,.72), rgba(138,45,36,.40), rgba(154,120,40,.72), transparent 94%) !important;
  opacity: .75 !important;
}
[data-theme="scriptorium"] .logo {
  letter-spacing: .10em !important;
  color: #f4e2ad !important;
}
[data-theme="scriptorium"] .logo::after {
  color: rgba(212,181,107,.92) !important;
  letter-spacing: .20em !important;
}
[data-theme="scriptorium"] .logo svg rect {
  fill: #8a2d24 !important;
  stroke: #d4b56b !important;
}
[data-theme="scriptorium"] .search-wrap input {
  border-color: rgba(154,120,40,.56) !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(138,45,36,.065), transparent 4.2rem),
    linear-gradient(180deg, rgba(250,240,210,.96), rgba(234,213,164,.93)),
    var(--sc-card-image) !important;
  box-shadow: inset 0 2px 7px rgba(65,38,16,.13), 0 0 0 1px rgba(255,240,195,.12) !important;
}
[data-theme="scriptorium"] .search-wrap::before {
  color: var(--sc-rubric) !important;
  opacity: .94 !important;
}
[data-theme="scriptorium"] .ctrl-btn,
[data-theme="scriptorium"] .theme-select {
  border-color: rgba(154,120,40,.50) !important;
  background:
    linear-gradient(180deg, rgba(77,43,23,.94), rgba(48,27,16,.96)) !important;
  color: #f3dfaa !important;
  box-shadow: inset 0 1px 0 rgba(255,242,198,.12), 0 2px 5px rgba(0,0,0,.22) !important;
}
[data-theme="scriptorium"] .theme-select {
  border-radius: 7px 7px 13px 13px !important;
}
[data-theme="scriptorium"] .font-control {
  gap: 0 !important;
  padding: 2px !important;
  border: 1px solid rgba(154,120,40,.46) !important;
  border-radius: 10px 10px 16px 16px !important;
  background:
    linear-gradient(180deg, rgba(77,43,23,.96), rgba(45,25,14,.98)),
    var(--sc-card-image) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,242,198,.14),
    0 2px 7px rgba(0,0,0,.26) !important;
}
[data-theme="scriptorium"] .font-control button {
  width: 31px !important;
  height: 30px !important;
  min-width: 31px !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 7px 7px 12px 12px !important;
  background: transparent !important;
  color: #f0d18a !important;
  font: 900 .72rem/1 Georgia, "Times New Roman", serif !important;
  letter-spacing: .01em !important;
  box-shadow: none !important;
  transform: none !important;
}
[data-theme="scriptorium"] .font-control button:hover {
  background: linear-gradient(180deg, #7a1f1f, #4a2015) !important;
  color: #fff1c8 !important;
  box-shadow: inset 0 0 0 1px rgba(194,166,84,.46) !important;
}
[data-theme="scriptorium"] .font-control .font-size-label {
  min-width: 36px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 2px !important;
  padding: 0 8px !important;
  border-left: 1px solid rgba(194,166,84,.32) !important;
  border-right: 1px solid rgba(194,166,84,.32) !important;
  color: #f4df9e !important;
  background: rgba(248,237,207,.08) !important;
  font-family: "Courier New", Georgia, serif !important;
  font-size: .76rem !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  letter-spacing: .03em !important;
  text-align: center !important;
  transform: none !important;
}

/* Scroll-index filter drawer: thinner, more scroll-like, less button-pile. */
[data-theme="scriptorium"] .filter-bar {
  background: rgba(40,24,14,.86) !important;
  box-shadow: 0 6px 16px rgba(20,10,4,.28) !important;
}
[data-theme="scriptorium"] .filter-shell {
  border-radius: 26px 26px 24px 24px !important;
  border: 1px solid rgba(154,120,40,.36) !important;
  padding: 10px 22px 12px !important;
  box-shadow:
    0 10px 26px rgba(27,15,7,.22),
    inset 0 16px 22px rgba(255,247,214,.22),
    inset 0 -16px 22px rgba(111,70,31,.08) !important;
}
[data-theme="scriptorium"] .filter-shell::before,
[data-theme="scriptorium"] .filter-shell::after {
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: calc(100% - 28px) !important;
  min-height: 58px !important;
  color: transparent !important;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,246,210,.66), transparent 42%),
    linear-gradient(90deg, rgba(91,58,25,.18), rgba(255,245,205,.42), rgba(91,58,25,.16)) !important;
  border: 1px solid rgba(154,120,40,.32) !important;
  box-shadow: inset 0 0 12px rgba(90,58,28,.16), 0 3px 8px rgba(50,28,12,.16) !important;
  -webkit-mask: none !important;
          mask: none !important;
  border-radius: 50%/16px !important;
  opacity: .82 !important;
}
[data-theme="scriptorium"] .filter-shell::before { left: 8px !important; }
[data-theme="scriptorium"] .filter-shell::after { right: 8px !important; transform: translateY(-50%) !important; }
[data-theme="scriptorium"] .filter-header {
  padding: 0 4px 6px !important;
  border-bottom: 1px solid rgba(154,120,40,.16) !important;
}
[data-theme="scriptorium"] .filter-panel-title {
  background: linear-gradient(180deg, #8a2d24, #611b17) !important;
  border-color: rgba(212,181,107,.52) !important;
  color: #f8e8ba !important;
  box-shadow: inset 0 1px 0 rgba(255,235,177,.18), 0 2px 6px rgba(80,30,10,.20) !important;
}
[data-theme="scriptorium"] .filter-label {
  background: rgba(86,47,27,.92) !important;
  color: #f3dfaa !important;
  border-color: rgba(212,181,107,.32) !important;
  border-radius: 8px 8px 12px 12px !important;
}
[data-theme="scriptorium"] .filter-toggle,
[data-theme="scriptorium"] .clear-filters-btn,
[data-theme="scriptorium"] .mode-toggle,
[data-theme="scriptorium"] .filter-chip,
[data-theme="scriptorium"] .letter-filter button,
[data-theme="scriptorium"] .select-filter,
[data-theme="scriptorium"] .active-tag {
  background:
    linear-gradient(180deg, rgba(249,238,205,.94), rgba(229,203,146,.88)) !important;
  color: var(--sc-ink) !important;
  border-color: rgba(86,58,28,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,248,220,.45) !important;
}
[data-theme="scriptorium"] .letter-filter button.active,
[data-theme="scriptorium"] .filter-chip.include,
[data-theme="scriptorium"] .mode-toggle[data-mode="include"],
[data-theme="scriptorium"] .filter-toggle-badge {
  background: linear-gradient(180deg, #8a2d24, #651d18) !important;
  color: #f8e8ba !important;
  border-color: rgba(212,181,107,.60) !important;
  box-shadow: inset 0 1px 0 rgba(255,235,177,.18), 0 1px 4px rgba(70,25,12,.18) !important;
}
[data-theme="scriptorium"] .filter-chip.exclude,
[data-theme="scriptorium"] .mode-toggle[data-mode="exclude"] {
  background: rgba(43,31,20,.08) !important;
  color: rgba(91,42,31,.78) !important;
  border-color: rgba(138,45,36,.38) !important;
  text-decoration: line-through;
}
[data-theme="scriptorium"] .filter-count {
  background: rgba(43,31,20,.055) !important;
  color: var(--sc-ink-soft) !important;
  border-color: rgba(86,58,28,.22) !important;
}

/* Folio toolbar: scroll strip, not a heavy panel. */
[data-theme="scriptorium"] .toolbar {
  border-radius: 24px !important;
  border: 1px solid rgba(154,120,40,.32) !important;
  padding: 11px 26px !important;
  box-shadow:
    0 8px 22px rgba(27,15,7,.18),
    inset 12px 0 16px rgba(111,70,31,.06),
    inset -12px 0 16px rgba(111,70,31,.06) !important;
}
[data-theme="scriptorium"] .toolbar-left::before {
  background: transparent !important;
  color: var(--sc-rubric) !important;
  border-color: rgba(138,45,36,.28) !important;
  box-shadow: none !important;
}
[data-theme="scriptorium"] #resultSummary {
  color: var(--sc-blue) !important;
}
[data-theme="scriptorium"] .sort-label {
  color: var(--sc-rubric) !important;
}

/* Word cards: cleaner folio slips with illuminated initials, less red/blue noise. */
[data-theme="scriptorium"] .word-card {
  border-radius: 5px 22px 5px 22px !important;
  border: 1px solid rgba(86,58,28,.30) !important;
  background-image:
    radial-gradient(circle at 9% 12%, rgba(138,45,36,.045), transparent 7rem),
    radial-gradient(circle at 92% 85%, rgba(154,120,40,.055), transparent 8rem),
    repeating-linear-gradient(8deg, rgba(76,47,23,.015) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, rgba(250,240,212,.82), rgba(233,214,167,.86)),
    var(--sc-card-image) !important;
  box-shadow: 0 12px 24px rgba(25,14,7,.20), inset 0 0 0 1px rgba(255,248,220,.36) !important;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)) !important;
}
[data-theme="scriptorium"] .word-card:hover {
  transform: translateY(-3px) rotate(-.15deg) !important;
  box-shadow: 0 18px 34px rgba(25,14,7,.28), inset 0 0 0 1px rgba(255,248,220,.50) !important;
  border-color: rgba(154,120,40,.48) !important;
}
[data-theme="scriptorium"] .word-card::before {
  width: 5px !important;
  left: 0 !important;
  top: 18px !important;
  bottom: 18px !important;
  background: linear-gradient(180deg, rgba(138,45,36,.82), rgba(154,120,40,.42)) !important;
  box-shadow: none !important;
}
[data-theme="scriptorium"] .word-card::after {
  color: rgba(138,45,36,.72) !important;
  letter-spacing: .15em !important;
  font-size: .58rem !important;
}
[data-theme="scriptorium"] .word-card .word-text {
  color: var(--sc-rubric) !important;
  font-family: Georgia, "Times New Roman", "Noto Serif SC", serif !important;
  text-shadow: none !important;
}
[data-theme="scriptorium"] .word-card .word-text::first-letter {
  color: var(--sc-gold) !important;
  font-size: 1.55em !important;
  line-height: .85 !important;
  text-shadow: 0 1px 0 rgba(255,244,190,.90), 0 0 0 1px rgba(86,58,28,.22) !important;
}
[data-theme="scriptorium"] .word-card .word-phonetic {
  color: var(--sc-blue) !important;
  font-weight: 700 !important;
  opacity: .92 !important;
}
[data-theme="scriptorium"] .word-card .meaning {
  color: var(--sc-ink) !important;
  font-weight: 600 !important;
}
[data-theme="scriptorium"] .word-card .example {
  background: rgba(255,246,218,.28) !important;
  border-left: 3px solid rgba(138,45,36,.70) !important;
  box-shadow: inset 0 1px 9px rgba(62,38,16,.045) !important;
  color: var(--sc-ink-soft) !important;
}
[data-theme="scriptorium"] .word-card .example::before {
  color: rgba(154,120,40,.85) !important;
  opacity: .9 !important;
}
[data-theme="scriptorium"] .theme-tag {
  background: rgba(255,248,222,.32) !important;
  color: var(--sc-blue) !important;
  border-color: rgba(37,69,111,.20) !important;
}
[data-theme="scriptorium"] .pos-tag {
  background: rgba(255,248,222,.34) !important;
  color: var(--sc-ink-soft) !important;
  border-color: rgba(86,58,28,.28) !important;
  border-radius: 4px 10px 4px 10px !important;
}
[data-theme="scriptorium"] .pos-tag.noun { color: var(--sc-blue) !important; border-color: rgba(37,69,111,.34) !important; }
[data-theme="scriptorium"] .pos-tag.verb { color: var(--sc-rubric) !important; border-color: rgba(138,45,36,.34) !important; }
[data-theme="scriptorium"] .pos-tag.adj,
[data-theme="scriptorium"] .pos-tag.adjective { color: var(--sc-green) !important; border-color: rgba(61,103,80,.34) !important; }
[data-theme="scriptorium"] .level-badge {
  background: radial-gradient(circle at 38% 30%, #e7cf82, #9a7828 68%, #704f1d) !important;
  color: #fff1bd !important;
  border: 1px solid rgba(90,58,25,.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,246,214,.36), 0 3px 7px rgba(50,28,12,.20) !important;
}

/* Horn sound buttons. */
[data-theme="scriptorium"] .tts-btn,
[data-theme="scriptorium"] #detailTtsBtn,
[data-theme="scriptorium"] .ex-tts-btn {
  background:
    radial-gradient(circle at 38% 30%, #ead59a, #caa64e 48%, #9a7828 78%) !important;
  color: #5a3518 !important;
  border-color: rgba(90,58,25,.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,247,214,.46), 0 3px 8px rgba(60,35,12,.18) !important;
}
[data-theme="scriptorium"] .tts-btn::before,
[data-theme="scriptorium"] #detailTtsBtn::before,
[data-theme="scriptorium"] .ex-tts-btn::before {
  background: #5a3518 !important;
}
[data-theme="scriptorium"] .tts-btn:hover,
[data-theme="scriptorium"] .ex-tts-btn:hover,
[data-theme="scriptorium"] #detailTtsBtn:hover,
[data-theme="scriptorium"] .tts-speaking {
  background:
    radial-gradient(circle at 38% 30%, #f1dfaa, #d4b56b 48%, #9a7828 78%) !important;
  box-shadow: inset 0 1px 0 rgba(255,247,214,.56), 0 0 0 3px rgba(154,120,40,.16), 0 5px 12px rgba(60,35,12,.20) !important;
}

/* Detail page: soften codex crease, keep content readable. */
[data-theme="scriptorium"] .detail-overlay {
  background: rgba(27,15,7,.52) !important;
  backdrop-filter: blur(5px) sepia(.18) !important;
}
[data-theme="scriptorium"] .detail-modal {
  border-color: rgba(154,120,40,.44) !important;
  border-radius: 5px 24px 5px 24px !important;
  background-image:
    linear-gradient(90deg, transparent 0 48.9%, rgba(70,42,18,.030) 49.2%, rgba(255,246,218,.080) 50%, rgba(70,42,18,.030) 50.8%, transparent 51.1%),
    radial-gradient(circle at 18% 20%, rgba(126,79,36,.075), transparent 14rem),
    radial-gradient(circle at 83% 72%, rgba(90,45,18,.060), transparent 13rem),
    repeating-linear-gradient(8deg, rgba(76,47,23,.016) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, rgba(250,239,208,.86), rgba(233,214,166,.90)),
    var(--sc-page-image) !important;
  box-shadow: 0 24px 70px rgba(20,10,4,.44), inset 0 0 0 1px rgba(255,246,214,.38), inset 0 0 42px rgba(93,58,22,.10) !important;
}
[data-theme="scriptorium"] .detail-modal::before,
[data-theme="scriptorium"] .detail-modal::after {
  color: rgba(138,45,36,.12) !important;
  width: 58px !important;
  height: 58px !important;
}
[data-theme="scriptorium"] .detail-header {
  background:
    linear-gradient(180deg, rgba(251,240,211,.97), rgba(234,214,167,.96)),
    var(--sc-page-image) !important;
  border-bottom-color: rgba(154,120,40,.24) !important;
  box-shadow: 0 4px 10px rgba(76,47,23,.055) !important;
}
[data-theme="scriptorium"] .detail-header::after {
  color: rgba(154,120,40,.34) !important;
  bottom: -10px !important;
}
[data-theme="scriptorium"] .detail-header .dh-word {
  color: var(--sc-rubric) !important;
}
[data-theme="scriptorium"] .detail-header .dh-word::first-letter {
  color: var(--sc-gold) !important;
}
[data-theme="scriptorium"] .dh-ctrl-btn,
[data-theme="scriptorium"] .detail-nav button {
  background:
    linear-gradient(180deg, rgba(250,239,205,.96), rgba(228,202,145,.90)),
    var(--sc-card-image) !important;
  border-color: rgba(86,58,28,.30) !important;
  color: var(--sc-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,248,220,.46), 0 2px 5px rgba(60,35,12,.11) !important;
}
[data-theme="scriptorium"] .detail-meaning,
[data-theme="scriptorium"] .grammar-section,
[data-theme="scriptorium"] .example-item {
  position: relative !important;
  z-index: 2 !important;
  background: rgba(255,247,220,.30) !important;
  border-color: rgba(138,45,36,.22) !important;
  box-shadow: inset 0 1px 7px rgba(58,34,15,.035) !important;
}
[data-theme="scriptorium"] .detail-meaning {
  border-left-color: rgba(138,45,36,.64) !important;
}
[data-theme="scriptorium"] .grammar-section h3 {
  color: var(--sc-rubric) !important;
  background:
    linear-gradient(90deg, rgba(138,45,36,.085), rgba(154,120,40,.08), transparent) !important;
  border-bottom: 1px solid rgba(154,120,40,.20) !important;
  padding: 7px 10px !important;
  border-radius: 10px 10px 0 0 !important;
}
[data-theme="scriptorium"] .grammar-table-wrap {
  position: relative !important;
  z-index: 3 !important;
  background:
    linear-gradient(180deg, rgba(251,241,213,.96), rgba(238,219,176,.94)),
    var(--sc-card-image) !important;
  border-color: rgba(86,58,28,.26) !important;
  box-shadow: inset 0 0 0 1px rgba(255,246,214,.28) !important;
}
[data-theme="scriptorium"] .grammar-table th {
  background: rgba(138,45,36,.070) !important;
  color: var(--sc-rubric) !important;
  border-bottom-color: rgba(138,45,36,.18) !important;
}
[data-theme="scriptorium"] .grammar-table td {
  background: rgba(255,248,226,.18) !important;
  border-bottom-color: rgba(86,58,28,.16) !important;
}
[data-theme="scriptorium"] .grammar-table .case-name,
[data-theme="scriptorium"] .grammar-table th:first-child,
[data-theme="scriptorium"] .grammar-table td:first-child {
  background:
    linear-gradient(180deg, rgba(247,232,191,.98), rgba(232,207,151,.96)),
    var(--sc-card-image) !important;
  color: var(--sc-ink) !important;
  box-shadow: 3px 0 8px rgba(62,38,16,.08) !important;
}
[data-theme="scriptorium"] .grammar-table tr:hover td {
  background: rgba(154,120,40,.075) !important;
}
[data-theme="scriptorium"] .grammar-table tr:hover td:first-child,
[data-theme="scriptorium"] .grammar-table tr:hover th:first-child {
  background:
    linear-gradient(180deg, rgba(247,232,191,.98), rgba(232,207,151,.96)),
    var(--sc-card-image) !important;
}

/* Select/dropdown slips: softer ink and better alignment. */
[data-theme="scriptorium"] .pd-select-button {
  border-color: rgba(86,58,28,.32) !important;
  background:
    linear-gradient(180deg, rgba(250,240,210,.96), rgba(230,204,147,.90)),
    var(--sc-card-image) !important;
  color: var(--sc-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,248,220,.48) !important;
}
[data-theme="scriptorium"] .pd-select-kicker {
  color: var(--sc-rubric) !important;
}
[data-theme="scriptorium"] .pd-select-arrow {
  color: var(--sc-gold) !important;
  align-self: center !important;
}
[data-theme="scriptorium"] .pd-select-menu {
  background-image:
    radial-gradient(circle at 16% 18%, rgba(132,86,39,.050), transparent 9rem),
    repeating-linear-gradient(8deg, rgba(76,47,23,.014) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, rgba(250,240,212,.94), rgba(232,211,160,.94)),
    var(--sc-card-image) !important;
}

/* Feedback and page-turn rails. */
[data-theme="scriptorium"] .feedback-fab {
  border-color: rgba(138,45,36,.34) !important;
  color: var(--sc-rubric) !important;
  background-image:
    radial-gradient(circle at 82% 20%, rgba(154,120,40,.12), transparent 4rem),
    linear-gradient(145deg, rgba(250,240,212,.92), rgba(232,211,160,.94)),
    var(--sc-card-image) !important;
}
[data-theme="scriptorium"] .detail-overlay > .detail-side-nav,
[data-theme="scriptorium"] .detail-overlay.open > .detail-side-nav {
  background:
    linear-gradient(180deg, rgba(250,240,210,.94), rgba(226,198,137,.92)),
    var(--sc-card-image) !important;
  border-color: rgba(154,120,40,.42) !important;
  color: var(--sc-gold) !important;
  box-shadow: 0 8px 22px rgba(28,14,6,.26), inset 0 0 0 1px rgba(255,246,214,.24) !important;
}
[data-theme="scriptorium"] .detail-overlay > .detail-side-nav::after {
  background: rgba(138,45,36,.090) !important;
  border-color: rgba(138,45,36,.16) !important;
}

/* Mobile: no codex crease; compact scroll drawer; keep all filters. */
@media (max-width: 760px) {
  [data-theme="scriptorium"] .filter-shell {
    padding: 8px 12px 10px !important;
    border-radius: 18px !important;
  }
  [data-theme="scriptorium"] .filter-shell::before,
  [data-theme="scriptorium"] .filter-shell::after {
    display: none !important;
  }
  [data-theme="scriptorium"] .filter-header {
    padding-bottom: 5px !important;
  }
  [data-theme="scriptorium"] .filter-collapsible:not(.collapsed) {
    max-height: min(40vh, 310px) !important;
    overflow-y: auto !important;
  }
  [data-theme="scriptorium"] .letter-filter,
  [data-theme="scriptorium"] .chip-filter {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }
  [data-theme="scriptorium"] .toolbar {
    border-radius: 18px !important;
    padding: 9px 12px !important;
  }
  [data-theme="scriptorium"] .word-card {
    border-radius: 4px 18px 4px 18px !important;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)) !important;
  }
  [data-theme="scriptorium"] .detail-modal {
    background-image:
      radial-gradient(circle at 18% 20%, rgba(126,79,36,.070), transparent 13rem),
      radial-gradient(circle at 83% 72%, rgba(90,45,18,.052), transparent 12rem),
      repeating-linear-gradient(8deg, rgba(76,47,23,.016) 0 1px, transparent 1px 8px),
      linear-gradient(145deg, rgba(250,239,208,.88), rgba(233,214,166,.92)),
      var(--sc-page-image) !important;
  }
  [data-theme="scriptorium"] .detail-overlay.open > .detail-side-nav {
    width: 30px !important;
    min-width: 30px !important;
    opacity: .88 !important;
  }
}
@media (max-width: 480px) {
  [data-theme="scriptorium"] .search-wrap::before { content: "IDX" !important; }
  [data-theme="scriptorium"] .search-wrap input { padding-left: 52px !important; }
  [data-theme="scriptorium"] .detail-modal::before,
  [data-theme="scriptorium"] .detail-modal::after { opacity: .38 !important; }
  
}

/* =========================================================
   20260708 V6.9 Scriptorium Readability + Paper Texture Fix
   - Theme name is plain Scriptorium / 手抄本工坊 in HTML+i18n.
   - Remove the center codex spine from detail pages; it was visually intrusive.
   - Replace dark ink blocks inside detail pages with readable parchment notes.
   - Strengthen real paper feel through layered local texture + CSS fallback.
   - Keep core layout/position/z-index untouched.
   ========================================================= */
[data-theme="scriptorium"] {
  --sc-paper-fiber: url("assets/scriptorium/vellum-fibers.svg");
  --sc-vellum: #f1dfb0;
  --sc-vellum-light: #f8edcd;
  --sc-vellum-mid: #ead09a;
  --sc-vellum-shadow: #c99f5e;
  --sc-ink: #2f2216;
  --sc-ink-soft: #60472e;
  --sc-rubric: #8b2e24;
  --sc-gold: #8d6d24;
  --sc-blue: #244368;
  --sc-line: rgba(86, 58, 28, .26);
  --bg: #28180e;
  --surface: var(--sc-vellum);
  --surface-hover: #f6e8bf;
  --text: var(--sc-ink);
  --text-secondary: var(--sc-ink-soft);
  --text-light: #80613c;
}

/* Make paper feel come from layered vellum texture, not just beige color. */
[data-theme="scriptorium"] .filter-shell,
[data-theme="scriptorium"] .toolbar,
[data-theme="scriptorium"] .word-card,
[data-theme="scriptorium"] .detail-modal,
[data-theme="scriptorium"] .detail-header,
[data-theme="scriptorium"] .detail-meaning,
[data-theme="scriptorium"] .sense-overview .sense-block,
[data-theme="scriptorium"] .status-box,
[data-theme="scriptorium"] .mnemonic-line,
[data-theme="scriptorium"] .grammar-section,
[data-theme="scriptorium"] .grammar-table-wrap,
[data-theme="scriptorium"] .example-item,
[data-theme="scriptorium"] .pd-select-button,
[data-theme="scriptorium"] .pd-select-menu,
[data-theme="scriptorium"] .feedback-fab,
[data-theme="scriptorium"] .pagination button,
[data-theme="scriptorium"] .load-more-btn,
[data-theme="scriptorium"] .empty-state,
[data-theme="scriptorium"] .data-attribution {
  background-color: var(--sc-vellum) !important;
  background-image:
    radial-gradient(circle at 12% 14%, rgba(128, 82, 34, .105), transparent 8.5rem),
    radial-gradient(circle at 86% 82%, rgba(120, 72, 26, .085), transparent 9rem),
    radial-gradient(ellipse at 50% 0%, rgba(255, 248, 215, .36), transparent 58%),
    repeating-linear-gradient(7deg, rgba(87, 55, 23, .030) 0 1px, transparent 1px 7px),
    var(--sc-paper-fiber),
    linear-gradient(145deg, rgba(248, 235, 195, .90), rgba(228, 199, 137, .88)),
    var(--sc-card-image) !important;
  color: var(--sc-ink) !important;
}

/* Header stays leather, but the theme should not advertise as v2/II. */
[data-theme="scriptorium"] .logo::after {
  content: "SCRIPTORIUM" !important;
}

/* Detail pages: remove the central book-spine/crease entirely. It harmed readability. */
[data-theme="scriptorium"] .detail-modal {
  background-image:
    radial-gradient(circle at 9% 10%, rgba(126,79,36,.105), transparent 12rem),
    radial-gradient(circle at 92% 78%, rgba(90,45,18,.075), transparent 13rem),
    radial-gradient(ellipse at 50% 0%, rgba(255,250,222,.34), transparent 55%),
    repeating-linear-gradient(7deg, rgba(76,47,23,.026) 0 1px, transparent 1px 8px),
    var(--sc-paper-fiber),
    linear-gradient(145deg, rgba(249,236,197,.93), rgba(229,203,143,.91)),
    var(--sc-page-image) !important;
  box-shadow:
    0 24px 70px rgba(20,10,4,.44),
    inset 0 0 0 1px rgba(255,246,214,.42),
    inset 0 0 52px rgba(95,59,22,.10) !important;
}

/* The body content must always sit on readable paper, never dark-brown panels. */
[data-theme="scriptorium"] .detail-body,
[data-theme="scriptorium"] .detail-body * {
  color: var(--sc-ink);
}
[data-theme="scriptorium"] .detail-meaning,
[data-theme="scriptorium"] .sense-overview .sense-block,
[data-theme="scriptorium"] .status-box,
[data-theme="scriptorium"] .mnemonic-line,
[data-theme="scriptorium"] .example-item {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(154,120,40,.065), transparent 5.5rem),
    repeating-linear-gradient(7deg, rgba(76,47,23,.020) 0 1px, transparent 1px 8px),
    var(--sc-paper-fiber),
    linear-gradient(145deg, rgba(250,240,211,.90), rgba(236,216,169,.86)) !important;
  background-color: #f4e4bb !important;
  border: 1px solid rgba(138,45,36,.18) !important;
  border-left: 4px solid rgba(138,45,36,.62) !important;
  box-shadow: inset 0 1px 8px rgba(66,39,16,.035) !important;
  color: var(--sc-ink) !important;
}
[data-theme="scriptorium"] .status-box strong,
[data-theme="scriptorium"] .sense-overview .sense-block h4,
[data-theme="scriptorium"] .mnemonic-line strong,
[data-theme="scriptorium"] .detail-meaning .dm-lang {
  color: var(--sc-rubric) !important;
}
[data-theme="scriptorium"] .status-box span,
[data-theme="scriptorium"] .sense-overview .sense-subtitle,
[data-theme="scriptorium"] .example-item .ex-trans,
[data-theme="scriptorium"] .mnemonic-line span {
  color: var(--sc-ink-soft) !important;
}

/* Fix tags created with inline background:var(--bg); they became dark in Scriptorium. */
[data-theme="scriptorium"] .detail-header .pos-tag,
[data-theme="scriptorium"] .dh-tags .pos-tag,
[data-theme="scriptorium"] .word-card .pos-tag,
[data-theme="scriptorium"] .pos-tag[style] {
  background:
    linear-gradient(180deg, rgba(250,240,211,.92), rgba(232,207,151,.82)),
    var(--sc-paper-fiber) !important;
  color: var(--sc-ink-soft) !important;
  border-color: rgba(86,58,28,.30) !important;
}
[data-theme="scriptorium"] .detail-header .pos-tag.noun,
[data-theme="scriptorium"] .word-card .pos-tag.noun { color: var(--sc-blue) !important; border-color: rgba(36,67,104,.36) !important; }
[data-theme="scriptorium"] .detail-header .pos-tag.verb,
[data-theme="scriptorium"] .word-card .pos-tag.verb { color: var(--sc-rubric) !important; border-color: rgba(139,46,36,.36) !important; }
[data-theme="scriptorium"] .detail-header .pos-tag.adj,
[data-theme="scriptorium"] .detail-header .pos-tag.adjective,
[data-theme="scriptorium"] .word-card .pos-tag.adj,
[data-theme="scriptorium"] .word-card .pos-tag.adjective { color: var(--sc-green) !important; border-color: rgba(61,103,80,.34) !important; }

/* Grammar sections and tables: no black cells, no black note panels. */
[data-theme="scriptorium"] .grammar-section {
  background:
    radial-gradient(circle at 12% 8%, rgba(154,120,40,.060), transparent 7rem),
    repeating-linear-gradient(7deg, rgba(76,47,23,.018) 0 1px, transparent 1px 8px),
    var(--sc-paper-fiber),
    linear-gradient(145deg, rgba(249,238,204,.78), rgba(232,208,154,.68)) !important;
  border: 1px solid rgba(86,58,28,.18) !important;
  border-radius: 13px !important;
  overflow: hidden;
}
[data-theme="scriptorium"] .grammar-section h3 {
  background:
    linear-gradient(90deg, rgba(139,46,36,.115), rgba(141,109,36,.080), transparent 76%) !important;
  color: var(--sc-rubric) !important;
  border-bottom: 1px solid rgba(139,46,36,.20) !important;
}
[data-theme="scriptorium"] .grammar-table-wrap {
  background:
    linear-gradient(180deg, rgba(251,242,216,.98), rgba(239,220,176,.96)),
    var(--sc-paper-fiber) !important;
  border-color: rgba(86,58,28,.24) !important;
}
[data-theme="scriptorium"] .grammar-table,
[data-theme="scriptorium"] .grammar-table thead,
[data-theme="scriptorium"] .grammar-table tbody,
[data-theme="scriptorium"] .grammar-table tr,
[data-theme="scriptorium"] .grammar-table th,
[data-theme="scriptorium"] .grammar-table td {
  background-color: rgba(255,248,226,.16) !important;
  color: var(--sc-ink) !important;
  border-color: rgba(86,58,28,.18) !important;
}
[data-theme="scriptorium"] .grammar-table th {
  background:
    linear-gradient(180deg, rgba(247,229,187,.98), rgba(236,208,152,.96)) !important;
  color: var(--sc-rubric) !important;
  font-weight: 800 !important;
}
[data-theme="scriptorium"] .grammar-table td {
  background:
    linear-gradient(180deg, rgba(255,248,226,.56), rgba(246,232,196,.44)) !important;
}
[data-theme="scriptorium"] .grammar-table .case-name,
[data-theme="scriptorium"] .grammar-table th:first-child,
[data-theme="scriptorium"] .grammar-table td:first-child,
[data-theme="scriptorium"] .detail-body .grammar-table th:first-child,
[data-theme="scriptorium"] .detail-body .grammar-table td:first-child,
[data-theme="scriptorium"] .detail-body .grammar-table thead th:first-child {
  background:
    linear-gradient(180deg, rgba(246,228,186,.99), rgba(231,204,145,.98)),
    var(--sc-paper-fiber) !important;
  color: var(--sc-ink) !important;
  box-shadow: 3px 0 8px rgba(62,38,16,.07) !important;
}
[data-theme="scriptorium"] .grammar-table tr:hover td,
[data-theme="scriptorium"] .grammar-table tr:hover td:first-child {
  background:
    linear-gradient(180deg, rgba(248,232,190,.98), rgba(238,215,165,.94)) !important;
  color: var(--sc-ink) !important;
}

/* Improve definition block spacing/readability in the screenshot case. */
[data-theme="scriptorium"] .detail-meaning {
  font-size: 1.02rem !important;
  line-height: 1.75 !important;
  padding: 13px 18px !important;
  margin-bottom: 2px !important;
}
[data-theme="scriptorium"] .detail-meaning::before,
[data-theme="scriptorium"] .status-box::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: rgba(139,46,36,.38);
  border-radius: 999px;
}

/* Slightly richer paper edge without reintroducing a fake spine. */
[data-theme="scriptorium"] .detail-modal,
[data-theme="scriptorium"] .word-card,
[data-theme="scriptorium"] .filter-shell,
[data-theme="scriptorium"] .toolbar {
  box-shadow:
    0 16px 34px rgba(22,12,5,.24),
    inset 0 0 0 1px rgba(255,248,222,.42),
    inset 0 0 34px rgba(117,74,28,.075) !important;
}
[data-theme="scriptorium"] .detail-modal {
  box-shadow:
    0 24px 70px rgba(20,10,4,.44),
    inset 0 0 0 1px rgba(255,246,214,.44),
    inset 0 0 58px rgba(117,74,28,.095) !important;
}

@media (max-width: 760px) {
  [data-theme="scriptorium"] .detail-modal {
    background-image:
      radial-gradient(circle at 9% 10%, rgba(126,79,36,.105), transparent 12rem),
      radial-gradient(circle at 92% 78%, rgba(90,45,18,.075), transparent 13rem),
      repeating-linear-gradient(7deg, rgba(76,47,23,.026) 0 1px, transparent 1px 8px),
      var(--sc-paper-fiber),
      linear-gradient(145deg, rgba(249,236,197,.93), rgba(229,203,143,.91)),
      var(--sc-page-image) !important;
  }
  [data-theme="scriptorium"] .grammar-table th,
  [data-theme="scriptorium"] .grammar-table td {
    color: var(--sc-ink) !important;
  }
}

/* =========================================================
   20260708 V7.0 Scriptorium Scroll Detail Fix
   Purpose:
   - Repair V6.9 detail readability/table regressions.
   - Keep the theme name plain: Scriptorium / 手抄本工坊.
   - Move the scroll idea into the detail shell and page-turn rails,
     not into table/content overlays.
   - No central book spine. No dark-brown note panels.
   ========================================================= */
[data-theme="scriptorium"] {
  --sc-scroll-shadow: rgba(81, 48, 20, .20);
  --sc-scroll-line: rgba(128, 82, 34, .30);
  --sc-note-paper: #f4e4ba;
  --sc-note-paper-light: #fbf0cc;
}

/* Stronger but lighter paper system: texture is visible, text remains readable. */
[data-theme="scriptorium"] .word-card,
[data-theme="scriptorium"] .filter-shell,
[data-theme="scriptorium"] .toolbar,
[data-theme="scriptorium"] .pd-select-button,
[data-theme="scriptorium"] .pd-select-menu,
[data-theme="scriptorium"] .feedback-fab,
[data-theme="scriptorium"] .pagination button,
[data-theme="scriptorium"] .load-more-btn {
  background-color: var(--sc-vellum) !important;
  background-image:
    radial-gradient(circle at 10% 12%, rgba(126,79,36,.12), transparent 8rem),
    radial-gradient(circle at 88% 78%, rgba(117,74,28,.09), transparent 9.5rem),
    radial-gradient(ellipse at 50% 8%, rgba(255,248,220,.34), transparent 52%),
    repeating-linear-gradient(7deg, rgba(74,45,20,.035) 0 1px, transparent 1px 7px),
    var(--sc-paper-fiber),
    linear-gradient(145deg, rgba(250,239,205,.78), rgba(229,202,142,.82)),
    var(--sc-card-image) !important;
  background-blend-mode: multiply, multiply, screen, multiply, multiply, normal, normal !important;
}

/* Detail as a horizontal parchment scroll sheet.
   The rolls live at the edges and below content z-index, so they cannot cover tables. */
[data-theme="scriptorium"] .detail-modal {
  border-radius: 28px 28px 20px 20px !important;
  border: 1.5px solid rgba(141,109,36,.42) !important;
  background-color: var(--sc-vellum) !important;
  background-image:
    radial-gradient(circle at 8% 9%, rgba(126,79,36,.12), transparent 12rem),
    radial-gradient(circle at 92% 82%, rgba(96,58,25,.095), transparent 13rem),
    radial-gradient(ellipse at 50% 0%, rgba(255,250,224,.38), transparent 56%),
    repeating-linear-gradient(7deg, rgba(76,47,23,.030) 0 1px, transparent 1px 8px),
    var(--sc-paper-fiber),
    linear-gradient(145deg, rgba(250,238,200,.95), rgba(228,202,142,.92)),
    var(--sc-page-image) !important;
  background-blend-mode: multiply, multiply, screen, multiply, multiply, normal, normal !important;
  box-shadow:
    0 24px 74px rgba(20,10,4,.46),
    inset 0 0 0 1px rgba(255,247,218,.46),
    inset 0 20px 34px rgba(255,250,224,.20),
    inset 0 -28px 44px rgba(117,74,28,.11) !important;
  overflow-x: visible !important;
}
[data-theme="scriptorium"] .detail-modal::before,
[data-theme="scriptorium"] .detail-modal::after {
  content: "" !important;
  position: absolute !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 24px !important;
  height: auto !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: .72 !important;
  color: transparent !important;
  -webkit-mask: none !important;
          mask: none !important;
  border: 1px solid rgba(141,109,36,.26) !important;
  border-radius: 50% / 18px !important;
  background:
    radial-gradient(ellipse at 50% 13%, rgba(255,247,218,.72), transparent 42%),
    radial-gradient(ellipse at 50% 87%, rgba(107,67,27,.20), transparent 52%),
    linear-gradient(90deg, rgba(92,58,25,.18), rgba(255,244,205,.48) 44%, rgba(121,77,33,.16)),
    var(--sc-paper-fiber) !important;
  box-shadow:
    inset 0 0 13px rgba(72,43,18,.18),
    0 4px 12px rgba(40,22,9,.16) !important;
}
[data-theme="scriptorium"] .detail-modal::before { left: 10px !important; }
[data-theme="scriptorium"] .detail-modal::after { right: 10px !important; transform: none !important; }
[data-theme="scriptorium"] .detail-header,
[data-theme="scriptorium"] .detail-body {
  position: relative !important;
  z-index: 4 !important;
}
@media (min-width: 761px) {
  [data-theme="scriptorium"] .detail-header {
    padding-left: 58px !important;
    padding-right: 58px !important;
  }
  [data-theme="scriptorium"] .detail-body {
    padding-left: 58px !important;
    padding-right: 58px !important;
  }
}

/* Header of the scroll: clear parchment strip, no spine, no dark overlay. */
[data-theme="scriptorium"] .detail-header {
  background-color: var(--sc-vellum-light) !important;
  background-image:
    radial-gradient(circle at 8% 16%, rgba(141,109,36,.09), transparent 7rem),
    repeating-linear-gradient(7deg, rgba(74,45,20,.024) 0 1px, transparent 1px 8px),
    var(--sc-paper-fiber),
    linear-gradient(180deg, rgba(252,241,212,.98), rgba(232,205,148,.96)) !important;
  border-bottom: 1px solid rgba(139,46,36,.22) !important;
  box-shadow: 0 5px 14px rgba(76,47,23,.075) !important;
}

/* Replace every dark detail note/status block with a parchment marginal note.
   The previous pseudo-left rule had absolute positioning risks; keep it contained. */
[data-theme="scriptorium"] .detail-body .detail-meaning,
[data-theme="scriptorium"] .detail-body .status-box,
[data-theme="scriptorium"] .detail-body .sense-overview .sense-block,
[data-theme="scriptorium"] .detail-body .mnemonic-line,
[data-theme="scriptorium"] .detail-body .example-item {
  position: relative !important;
  z-index: 5 !important;
  overflow: hidden !important;
  background-color: var(--sc-note-paper) !important;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(141,109,36,.08), transparent 6rem),
    repeating-linear-gradient(7deg, rgba(74,45,20,.020) 0 1px, transparent 1px 8px),
    var(--sc-paper-fiber),
    linear-gradient(145deg, rgba(252,241,212,.95), rgba(236,214,166,.92)) !important;
  color: var(--sc-ink) !important;
  border: 1px solid rgba(86,58,28,.22) !important;
  border-left: 4px solid rgba(139,46,36,.58) !important;
  border-radius: 13px !important;
  box-shadow:
    inset 0 1px 8px rgba(66,39,16,.035),
    0 2px 8px rgba(40,22,9,.045) !important;
}
[data-theme="scriptorium"] .detail-body .detail-meaning::before,
[data-theme="scriptorium"] .detail-body .status-box::before {
  content: none !important;
}
[data-theme="scriptorium"] .detail-body .status-box strong,
[data-theme="scriptorium"] .detail-body .detail-meaning .dm-lang,
[data-theme="scriptorium"] .detail-body .sense-overview .sense-block h4,
[data-theme="scriptorium"] .detail-body .mnemonic-line strong {
  color: var(--sc-rubric) !important;
}
[data-theme="scriptorium"] .detail-body .status-box span,
[data-theme="scriptorium"] .detail-body .sense-overview .sense-subtitle,
[data-theme="scriptorium"] .detail-body .example-item .ex-trans,
[data-theme="scriptorium"] .detail-body .mnemonic-line span {
  color: var(--sc-ink-soft) !important;
}

/* Grammar/table repair: cells must remain visible above scroll decoration, with clean sticky first column. */
[data-theme="scriptorium"] .detail-body .grammar-section {
  position: relative !important;
  z-index: 5 !important;
  overflow: visible !important;
  background-color: rgba(244,228,186,.62) !important;
  background-image:
    radial-gradient(circle at 10% 12%, rgba(141,109,36,.07), transparent 8rem),
    repeating-linear-gradient(7deg, rgba(74,45,20,.016) 0 1px, transparent 1px 8px),
    var(--sc-paper-fiber),
    linear-gradient(145deg, rgba(250,239,205,.78), rgba(232,207,151,.66)) !important;
  border: 1px solid rgba(86,58,28,.20) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 10px rgba(60,35,14,.035) !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table-wrap {
  position: relative !important;
  z-index: 7 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background:
    linear-gradient(180deg, rgba(252,242,216,.98), rgba(240,222,179,.96)),
    var(--sc-paper-fiber) !important;
  border: 1px solid rgba(86,58,28,.28) !important;
  border-radius: 11px !important;
  box-shadow: inset 0 0 0 1px rgba(255,247,218,.30), 0 2px 8px rgba(40,22,9,.045) !important;
  isolation: isolate !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table thead,
[data-theme="scriptorium"] .detail-body .grammar-table tbody,
[data-theme="scriptorium"] .detail-body .grammar-table tr {
  background: transparent !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table th,
[data-theme="scriptorium"] .detail-body .grammar-table td {
  position: relative !important;
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(255,248,226,.78), rgba(245,230,194,.66)) !important;
  color: var(--sc-ink) !important;
  border-color: rgba(86,58,28,.18) !important;
  background-clip: padding-box !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table th {
  z-index: 2 !important;
  background:
    linear-gradient(180deg, rgba(249,231,190,.98), rgba(237,210,154,.96)) !important;
  color: var(--sc-rubric) !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table th:first-child,
[data-theme="scriptorium"] .detail-body .grammar-table td:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 6 !important;
  min-width: 112px !important;
  background:
    linear-gradient(180deg, rgba(247,232,191,.99), rgba(232,207,151,.98)),
    var(--sc-paper-fiber) !important;
  color: var(--sc-ink) !important;
  box-shadow: 2px 0 0 rgba(86,58,28,.20), 10px 0 14px rgba(62,38,16,.055) !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table thead th:first-child {
  z-index: 9 !important;
  color: var(--sc-rubric) !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table tr:hover td {
  background: linear-gradient(180deg, rgba(250,234,194,.92), rgba(241,219,169,.88)) !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table tr:hover td:first-child {
  background:
    linear-gradient(180deg, rgba(247,232,191,.99), rgba(232,207,151,.98)),
    var(--sc-paper-fiber) !important;
}

/* Integrate previous/next controls with the scroll-roll idea. */
[data-theme="scriptorium"] .detail-overlay.open > .detail-side-nav {
  width: 54px !important;
  height: 126px !important;
  min-height: 126px !important;
  border: 1px solid rgba(141,109,36,.38) !important;
  color: var(--sc-gold) !important;
  background:
    radial-gradient(ellipse at 50% 14%, rgba(255,247,218,.76), transparent 43%),
    radial-gradient(ellipse at 50% 86%, rgba(107,67,27,.22), transparent 54%),
    linear-gradient(90deg, rgba(92,58,25,.22), rgba(255,244,205,.56) 48%, rgba(121,77,33,.18)),
    var(--sc-paper-fiber) !important;
  border-radius: 999px !important;
  box-shadow:
    0 9px 24px rgba(28,14,6,.28),
    inset 0 0 14px rgba(72,43,18,.20),
    inset 0 0 0 1px rgba(255,247,218,.26) !important;
  opacity: .96 !important;
}
[data-theme="scriptorium"] .detail-overlay.open > .detail-side-nav::before {
  position: relative !important;
  z-index: 3 !important;
  filter: drop-shadow(0 1px 0 rgba(255,244,190,.86)) !important;
}
[data-theme="scriptorium"] .detail-overlay.open > .detail-side-nav::after {
  content: "" !important;
  position: absolute !important;
  inset: 9px 13px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(139,46,36,.06), rgba(141,109,36,.10)) !important;
  border: 1px solid rgba(139,46,36,.12) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
[data-theme="scriptorium"] .detail-overlay.open > .detail-side-prev {
  border-radius: 0 999px 999px 0 !important;
}
[data-theme="scriptorium"] .detail-overlay.open > .detail-side-next {
  border-radius: 999px 0 0 999px !important;
}
[data-theme="scriptorium"] .detail-overlay.open > .detail-side-prev:hover,
[data-theme="scriptorium"] .detail-overlay.open > .detail-side-prev:focus-visible {
  transform: translateY(-50%) translateX(-5px) !important;
}
[data-theme="scriptorium"] .detail-overlay.open > .detail-side-next:hover,
[data-theme="scriptorium"] .detail-overlay.open > .detail-side-next:focus-visible {
  transform: translateY(-50%) translateX(5px) !important;
}

@media (max-width: 760px) {
  [data-theme="scriptorium"] .detail-modal::before,
  [data-theme="scriptorium"] .detail-modal::after {
    display: none !important;
  }
  [data-theme="scriptorium"] .detail-header,
  [data-theme="scriptorium"] .detail-body {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [data-theme="scriptorium"] .detail-overlay.open > .detail-side-nav {
    width: 30px !important;
    min-width: 30px !important;
    height: auto !important;
    min-height: 96px !important;
    border-radius: 0 !important;
    opacity: .90 !important;
  }
  [data-theme="scriptorium"] .detail-overlay.open > .detail-side-prev {
    border-radius: 0 18px 18px 0 !important;
  }
  [data-theme="scriptorium"] .detail-overlay.open > .detail-side-next {
    border-radius: 18px 0 0 18px !important;
  }
  [data-theme="scriptorium"] .detail-overlay.open > .detail-side-nav::after {
    inset: 8px 7px !important;
  }
  [data-theme="scriptorium"] .detail-body .grammar-table th:first-child,
  [data-theme="scriptorium"] .detail-body .grammar-table td:first-child {
    min-width: 104px !important;
    max-width: 150px !important;
  }
}


/* =========================================================
   20260708 V7.1 Scriptorium Detail Layout + Mobile Side Nav Fix
   - The detail panel no longer uses internal scroll-roll pseudo elements that eat
     visual space or appear to squeeze the content.
   - Scroll rolls are represented by the external previous/next controls instead.
   - Detail body spacing is restored; definition/mnemonic/grammar blocks no longer
     look collapsed under the header.
   - Mobile side controls have a stable top/bottom and handle touch on pointerdown,
     so the first tap switches words instead of only moving/focusing the rail.
   ========================================================= */

/* Remove the internal roll columns. They looked like scroll ends but reduced the usable page
   and made top content feel compressed. The external side-nav now carries the scroll-handle role. */
[data-theme="scriptorium"] .detail-modal::before,
[data-theme="scriptorium"] .detail-modal::after {
  display: none !important;
  content: none !important;
}

[data-theme="scriptorium"] .detail-modal {
  max-width: min(1120px, calc(100vw - 40px)) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background-color: var(--sc-vellum, #f3e6c4) !important;
  background-image:
    radial-gradient(circle at 8% 10%, rgba(126,79,36,.105), transparent 12rem),
    radial-gradient(circle at 92% 82%, rgba(96,58,25,.085), transparent 13rem),
    radial-gradient(ellipse at 50% 0%, rgba(255,250,224,.34), transparent 56%),
    repeating-linear-gradient(7deg, rgba(76,47,23,.026) 0 1px, transparent 1px 8px),
    var(--sc-paper-fiber),
    linear-gradient(145deg, rgba(250,238,200,.96), rgba(229,203,143,.92)),
    var(--sc-page-image) !important;
  box-shadow:
    0 24px 74px rgba(20,10,4,.46),
    inset 0 0 0 1px rgba(255,247,218,.46),
    inset 0 16px 30px rgba(255,250,224,.18),
    inset 0 -24px 38px rgba(117,74,28,.09) !important;
}

[data-theme="scriptorium"] .detail-header {
  z-index: 40 !important;
  padding: 22px 32px 16px !important;
  min-height: auto !important;
  background-color: var(--sc-vellum-light, #f8edcf) !important;
  background-image:
    radial-gradient(circle at 8% 16%, rgba(141,109,36,.07), transparent 8rem),
    repeating-linear-gradient(7deg, rgba(74,45,20,.020) 0 1px, transparent 1px 8px),
    var(--sc-paper-fiber),
    linear-gradient(180deg, rgba(252,241,212,.98), rgba(234,209,154,.96)) !important;
  border-bottom: 1px solid rgba(139,46,36,.18) !important;
  box-shadow: 0 4px 10px rgba(76,47,23,.07) !important;
}
[data-theme="scriptorium"] .detail-header::after {
  display: none !important;
  content: none !important;
}

[data-theme="scriptorium"] .detail-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  padding: 26px 34px 34px !important;
  color: var(--sc-ink, #2b1f14) !important;
  background: transparent !important;
}

/* Restore natural block height. V7.0 hid overflow to protect decoration, but this clipped
   one-line definition/mnemonic blocks and made the top of the detail page feel crushed. */
[data-theme="scriptorium"] .detail-body .detail-meaning,
[data-theme="scriptorium"] .detail-body .status-box,
[data-theme="scriptorium"] .detail-body .sense-overview .sense-block,
[data-theme="scriptorium"] .detail-body .mnemonic-line,
[data-theme="scriptorium"] .detail-body .example-item {
  overflow: visible !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  line-height: 1.72 !important;
  color: var(--sc-ink, #2b1f14) !important;
}
[data-theme="scriptorium"] .detail-body .detail-meaning {
  padding: 16px 22px !important;
  margin: 0 !important;
  font-size: 1.04rem !important;
  border-radius: 14px !important;
  background-color: #f5e6bd !important;
}
[data-theme="scriptorium"] .detail-body .mnemonic-line {
  width: fit-content !important;
  max-width: 100% !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
}
[data-theme="scriptorium"] .detail-body .detail-meaning::before,
[data-theme="scriptorium"] .detail-body .status-box::before {
  content: none !important;
}

/* Grammar sections should sit on normal readable paper and keep full table geometry. */
[data-theme="scriptorium"] .detail-body .grammar-section {
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(154,120,40,.050), transparent 7rem),
    repeating-linear-gradient(7deg, rgba(76,47,23,.016) 0 1px, transparent 1px 8px),
    var(--sc-paper-fiber),
    linear-gradient(145deg, rgba(249,238,204,.72), rgba(232,208,154,.60)) !important;
  border: 1px solid rgba(86,58,28,.18) !important;
  border-radius: 14px !important;
}
[data-theme="scriptorium"] .detail-body .grammar-section h3 {
  margin: 0 !important;
  padding: 13px 18px !important;
  line-height: 1.35 !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table-wrap {
  margin: 12px !important;
  width: calc(100% - 24px) !important;
  max-width: calc(100% - 24px) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  background:
    linear-gradient(180deg, rgba(252,242,216,.98), rgba(240,222,179,.96)),
    var(--sc-paper-fiber) !important;
  isolation: isolate !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table {
  width: 100% !important;
  min-width: 560px !important;
  table-layout: auto !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table th,
[data-theme="scriptorium"] .detail-body .grammar-table td {
  padding: 10px 14px !important;
  line-height: 1.55 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table th:first-child,
[data-theme="scriptorium"] .detail-body .grammar-table td:first-child {
  min-width: 150px !important;
  max-width: 220px !important;
  white-space: nowrap !important;
}

/* External previous/next controls are the scroll handles. Keep them outside the content.
   No transitions on mobile; this removes the visual up/down jump after first tap/focus. */
[data-theme="scriptorium"] .detail-overlay.open > .detail-side-nav {
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: border-color .16s ease, background-color .16s ease, opacity .16s ease, box-shadow .16s ease !important;
}

@media (min-width: 641px) {
  [data-theme="scriptorium"] .detail-overlay.open > .detail-side-prev {
    left: max(8px, calc(var(--pd-detail-side-left, 20px) - 4px)) !important;
  }
  [data-theme="scriptorium"] .detail-overlay.open > .detail-side-next {
    right: max(8px, calc(var(--pd-detail-side-right, 20px) - 4px)) !important;
  }
  [data-theme="scriptorium"] .detail-overlay.open > .detail-side-nav {
    width: 58px !important;
    height: 150px !important;
    min-height: 150px !important;
  }
}

@media (max-width: 760px) {
  [data-theme="scriptorium"] .detail-modal {
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 16px !important;
  }
  [data-theme="scriptorium"] .detail-header {
    padding: 18px 16px 12px !important;
  }
  [data-theme="scriptorium"] .detail-body {
    padding: 20px 18px 28px !important;
    gap: 18px !important;
  }
  [data-theme="scriptorium"] .detail-body .grammar-table {
    min-width: 620px !important;
  }
  [data-theme="scriptorium"] .detail-body .grammar-table th:first-child,
  [data-theme="scriptorium"] .detail-body .grammar-table td:first-child {
    min-width: 122px !important;
    max-width: 148px !important;
  }
}

@media (max-width: 640px) {
  [data-theme="scriptorium"] .detail-overlay.open > .detail-side-nav,
  .detail-overlay.open > .detail-side-nav {
    top: var(--pd-detail-side-top, 138px) !important;
    bottom: var(--pd-detail-side-bottom, 16px) !important;
    height: auto !important;
    min-height: 110px !important;
    transform: none !important;
    transition: opacity .14s ease, border-color .14s ease, background-color .14s ease, box-shadow .14s ease !important;
  }
  [data-theme="scriptorium"] .detail-overlay.open > .detail-side-nav:hover,
  [data-theme="scriptorium"] .detail-overlay.open > .detail-side-nav:focus,
  [data-theme="scriptorium"] .detail-overlay.open > .detail-side-nav:focus-visible,
  [data-theme="scriptorium"] .detail-overlay.open > .detail-side-nav:active,
  .detail-overlay.open > .detail-side-nav:hover,
  .detail-overlay.open > .detail-side-nav:focus,
  .detail-overlay.open > .detail-side-nav:focus-visible,
  .detail-overlay.open > .detail-side-nav:active {
    transform: none !important;
  }
  [data-theme="scriptorium"] .detail-overlay.open > .detail-side-prev,
  .detail-overlay.open > .detail-side-prev {
    left: env(safe-area-inset-left, 0px) !important;
  }
  [data-theme="scriptorium"] .detail-overlay.open > .detail-side-next,
  .detail-overlay.open > .detail-side-next {
    right: env(safe-area-inset-right, 0px) !important;
  }
}

/* =========================================================
   20260708 V7.2 Scriptorium Detail Alignment + Readability Fix
   - Fixes detail-page visual misalignment caused by stretched note pills and
     unpadded section body content.
   - Rebuilds grammar-section internal rhythm: title strip, padded body,
     stable table wrapper.
   - Replaces dark wax-number + black text with readable parchment/gold seal.
   - Keeps the external scroll-handle side nav; no internal roll columns.
   ========================================================= */
[data-theme="scriptorium"] {
  --sc-detail-paper: #f3dfad;
  --sc-detail-paper-light: #fbefcf;
  --sc-detail-paper-soft: #f6e7bf;
  --sc-detail-line: rgba(82, 54, 25, .24);
  --sc-detail-line-soft: rgba(82, 54, 25, .15);
  --sc-detail-shadow: rgba(56, 33, 13, .08);
}

/* Detail page should behave like a clean parchment reading sheet, not a set of
   stretched pills. The scroll identity is carried by the outer side handles. */
[data-theme="scriptorium"] .detail-modal {
  max-width: min(1080px, calc(100vw - 46px)) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background-color: var(--sc-detail-paper) !important;
  background-image:
    radial-gradient(circle at 9% 9%, rgba(126,79,36,.09), transparent 12rem),
    radial-gradient(circle at 92% 86%, rgba(96,58,25,.075), transparent 13rem),
    radial-gradient(ellipse at 50% 0%, rgba(255,250,224,.28), transparent 54%),
    repeating-linear-gradient(7deg, rgba(76,47,23,.024) 0 1px, transparent 1px 8px),
    var(--sc-paper-fiber),
    linear-gradient(145deg, rgba(252,239,203,.96), rgba(229,202,143,.92)),
    var(--sc-page-image) !important;
  background-blend-mode: multiply, multiply, screen, multiply, multiply, normal, normal !important;
}
[data-theme="scriptorium"] .detail-modal::before,
[data-theme="scriptorium"] .detail-modal::after {
  display: none !important;
  content: none !important;
}

[data-theme="scriptorium"] .detail-header {
  padding: 20px 30px 14px !important;
  background-color: var(--sc-detail-paper-light) !important;
  border-bottom: 1px solid rgba(139,46,36,.18) !important;
  box-shadow: 0 5px 12px rgba(76,47,23,.07) !important;
}
[data-theme="scriptorium"] .detail-header::after { display: none !important; content: none !important; }
[data-theme="scriptorium"] .detail-header .dh-word {
  line-height: 1.08 !important;
  margin-bottom: 4px !important;
}
[data-theme="scriptorium"] .detail-header .dh-tags {
  gap: 7px !important;
}

[data-theme="scriptorium"] .detail-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 18px !important;
  padding: 24px 32px 34px !important;
  background: transparent !important;
}

/* Definition and mnemonic are marginal notes: compact when short, full only on mobile. */
[data-theme="scriptorium"] .detail-body > .detail-meaning,
[data-theme="scriptorium"] .detail-body > .mnemonic-line {
  align-self: flex-start !important;
  width: auto !important;
  max-width: min(100%, 860px) !important;
  margin: 0 !important;
}
[data-theme="scriptorium"] .detail-body > .detail-meaning {
  display: inline-block !important;
  padding: 14px 20px !important;
  border-radius: 15px 20px 20px 15px !important;
  background-color: var(--sc-detail-paper-soft) !important;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(141,109,36,.065), transparent 6rem),
    repeating-linear-gradient(7deg, rgba(74,45,20,.016) 0 1px, transparent 1px 8px),
    var(--sc-paper-fiber),
    linear-gradient(145deg, rgba(252,241,212,.94), rgba(236,214,166,.90)) !important;
  color: var(--sc-ink) !important;
  border: 1px solid var(--sc-detail-line) !important;
  border-left: 4px solid rgba(139,46,36,.56) !important;
  box-shadow: inset 0 1px 7px rgba(66,39,16,.035), 0 2px 8px rgba(40,22,9,.040) !important;
  font-size: 1.02rem !important;
  line-height: 1.7 !important;
}
[data-theme="scriptorium"] .detail-body > .mnemonic-line {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;
  background: rgba(255,248,222,.42) !important;
  border: 1px solid rgba(139,46,36,.20) !important;
  color: var(--sc-ink-soft) !important;
}

/* Sections: explicit title strip + padded content area. This fixes the previous
   unpadded direct div text that looked shifted against the left border. */
[data-theme="scriptorium"] .detail-body .grammar-section {
  position: relative !important;
  display: block !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--sc-detail-line) !important;
  border-radius: 16px !important;
  background-color: rgba(246,229,188,.64) !important;
  background-image:
    radial-gradient(circle at 13% 7%, rgba(154,120,40,.050), transparent 7rem),
    repeating-linear-gradient(7deg, rgba(76,47,23,.014) 0 1px, transparent 1px 8px),
    var(--sc-paper-fiber),
    linear-gradient(145deg, rgba(250,239,205,.74), rgba(232,208,154,.58)) !important;
  box-shadow: inset 0 1px 10px rgba(60,35,14,.030), 0 2px 8px rgba(40,22,9,.035) !important;
}
[data-theme="scriptorium"] .detail-body .grammar-section h3 {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  color: var(--sc-rubric) !important;
  background:
    linear-gradient(180deg, rgba(245,223,176,.64), rgba(232,205,148,.44)) !important;
  border-bottom: 1px solid rgba(139,46,36,.16) !important;
  border-radius: 15px 15px 0 0 !important;
  line-height: 1.35 !important;
}
[data-theme="scriptorium"] .detail-body .grammar-section h3::before {
  color: var(--sc-gold) !important;
  flex: 0 0 auto !important;
}
[data-theme="scriptorium"] .detail-body .grammar-section > div:not(.grammar-table-wrap):not(.example-list):not(.sense-list):not(.status-box) {
  padding: 14px 18px 18px !important;
  margin: 0 !important;
  color: var(--sc-ink-soft) !important;
  line-height: 1.72 !important;
}
[data-theme="scriptorium"] .detail-body .grammar-section > .status-box {
  margin: 14px 16px 18px !important;
}
[data-theme="scriptorium"] .detail-body .grammar-section > .example-list,
[data-theme="scriptorium"] .detail-body .grammar-section > .sense-list {
  padding: 14px 16px 18px !important;
  margin: 0 !important;
}

/* Status/sense/example cards keep their own shape and never inherit a dark block. */
[data-theme="scriptorium"] .detail-body .status-box,
[data-theme="scriptorium"] .detail-body .sense-overview .sense-block,
[data-theme="scriptorium"] .detail-body .example-item {
  background-color: rgba(255,248,222,.46) !important;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(141,109,36,.055), transparent 6rem),
    repeating-linear-gradient(7deg, rgba(74,45,20,.012) 0 1px, transparent 1px 8px),
    var(--sc-paper-fiber),
    linear-gradient(145deg, rgba(252,241,212,.86), rgba(236,214,166,.74)) !important;
  color: var(--sc-ink) !important;
  border: 1px solid rgba(86,58,28,.20) !important;
  border-left: 4px solid rgba(139,46,36,.52) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 7px rgba(66,39,16,.030) !important;
}

/* Meaning overview: use a wax/gold seal with readable light text, not black text on dark red. */
[data-theme="scriptorium"] .detail-body .sense-list {
  display: grid !important;
  gap: 13px !important;
}
[data-theme="scriptorium"] .detail-body .sense-overview .sense-block {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 14px !important;
  padding: 15px 16px !important;
  min-height: 0 !important;
}
[data-theme="scriptorium"] .detail-body .sense-number {
  width: 34px !important;
  height: 34px !important;
  margin-top: 1px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 36% 30%, #b75a43, #8a2d24 60%, #5d1715) !important;
  color: #f9e7b8 !important;
  border: 1px solid rgba(212,181,107,.58) !important;
  box-shadow: inset 0 2px 5px rgba(74,18,12,.20), 0 2px 7px rgba(70,24,12,.16) !important;
  font: 800 .82rem/1 Georgia, serif !important;
  text-shadow: 0 1px 0 rgba(70,24,12,.55) !important;
}
[data-theme="scriptorium"] .detail-body .sense-content h4 {
  margin: 0 0 5px !important;
  color: var(--sc-rubric) !important;
  line-height: 1.42 !important;
}
[data-theme="scriptorium"] .detail-body .sense-subtitle {
  margin: 0 0 9px !important;
  color: var(--sc-ink-soft) !important;
  line-height: 1.62 !important;
}
[data-theme="scriptorium"] .detail-body .sense-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
[data-theme="scriptorium"] .detail-body .sense-tags span,
[data-theme="scriptorium"] .detail-body .ex-grammar {
  background: rgba(255,248,222,.54) !important;
  color: var(--sc-blue) !important;
  border: 1px solid rgba(37,69,111,.22) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
}

/* Table geometry: normal full-width paper table with a readable sticky first column. */
[data-theme="scriptorium"] .detail-body .grammar-table-wrap {
  margin: 14px 16px 18px !important;
  width: calc(100% - 32px) !important;
  max-width: calc(100% - 32px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid rgba(86,58,28,.26) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(252,242,216,.98), rgba(240,222,179,.95)),
    var(--sc-paper-fiber) !important;
  isolation: isolate !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table {
  width: 100% !important;
  min-width: 560px !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table th,
[data-theme="scriptorium"] .detail-body .grammar-table td {
  padding: 10px 14px !important;
  line-height: 1.55 !important;
  white-space: nowrap !important;
  color: var(--sc-ink) !important;
  background:
    linear-gradient(180deg, rgba(255,248,226,.80), rgba(245,230,194,.68)) !important;
  border-color: rgba(86,58,28,.18) !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table th {
  color: var(--sc-rubric) !important;
  background:
    linear-gradient(180deg, rgba(249,231,190,.98), rgba(237,210,154,.96)) !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table th:first-child,
[data-theme="scriptorium"] .detail-body .grammar-table td:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 8 !important;
  min-width: 148px !important;
  max-width: 220px !important;
  color: var(--sc-ink) !important;
  background:
    linear-gradient(180deg, rgba(247,232,191,.99), rgba(232,207,151,.98)),
    var(--sc-paper-fiber) !important;
  box-shadow: 2px 0 0 rgba(86,58,28,.18), 10px 0 14px rgba(62,38,16,.050) !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table thead th:first-child {
  z-index: 10 !important;
  color: var(--sc-rubric) !important;
}

@media (max-width: 760px) {
  [data-theme="scriptorium"] .detail-modal {
    max-width: calc(100vw - 10px) !important;
    max-height: calc(100dvh - 10px) !important;
    border-radius: 15px !important;
  }
  [data-theme="scriptorium"] .detail-header {
    padding: 18px 16px 12px !important;
  }
  [data-theme="scriptorium"] .detail-body {
    padding: 18px 16px 26px !important;
    gap: 16px !important;
  }
  [data-theme="scriptorium"] .detail-body > .detail-meaning,
  [data-theme="scriptorium"] .detail-body > .mnemonic-line {
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  [data-theme="scriptorium"] .detail-body .grammar-section > div:not(.grammar-table-wrap):not(.example-list):not(.sense-list):not(.status-box) {
    padding: 12px 14px 15px !important;
  }
  [data-theme="scriptorium"] .detail-body .grammar-section > .example-list,
  [data-theme="scriptorium"] .detail-body .grammar-section > .sense-list {
    padding: 12px 12px 15px !important;
  }
  [data-theme="scriptorium"] .detail-body .sense-overview .sense-block {
    grid-template-columns: 34px minmax(0,1fr) !important;
    column-gap: 10px !important;
    padding: 13px 12px !important;
  }
  [data-theme="scriptorium"] .detail-body .sense-number {
    width: 30px !important;
    height: 30px !important;
    font-size: .76rem !important;
  }
  [data-theme="scriptorium"] .detail-body .grammar-table {
    min-width: 620px !important;
  }
  [data-theme="scriptorium"] .detail-body .grammar-table th:first-child,
  [data-theme="scriptorium"] .detail-body .grammar-table td:first-child {
    min-width: 120px !important;
    max-width: 148px !important;
  }
}

/* =========================================================
   20260708 V7.3 Scriptorium Frontmatter Alignment Fix
   Problem being fixed:
   - Definition and Chinese mnemonic used different display models: definition
     behaved like a long callout, mnemonic like a small pill.
   - Their label/content baselines and paper backgrounds did not align, which
     made the detail page look broken even after the later readability passes.
   Solution:
   - Render both notes inside .detail-frontmatter and force the same two-column
     note grammar: fixed rubric label column + flexible text column.
   - Remove pill behavior in Scriptorium. These are manuscript marginal notes,
     not filter chips.
   ========================================================= */
.detail-frontmatter {
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
}
.detail-frontmatter .detail-note {
  min-width: 0;
}

[data-theme="scriptorium"] .detail-body > .detail-frontmatter {
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: grid !important;
  gap: 10px !important;
}

[data-theme="scriptorium"] .detail-frontmatter > .detail-note,
[data-theme="scriptorium"] .detail-frontmatter > .detail-meaning,
[data-theme="scriptorium"] .detail-frontmatter > .mnemonic-line {
  box-sizing: border-box !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 6.75em minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 12px !important;
  min-height: 0 !important;
  padding: 13px 18px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(86, 58, 28, .24) !important;
  border-left: 4px solid rgba(139, 46, 36, .54) !important;
  background-color: rgba(255, 248, 222, .50) !important;
  background-image:
    radial-gradient(circle at 11% 18%, rgba(141, 109, 36, .052), transparent 6rem),
    repeating-linear-gradient(7deg, rgba(74, 45, 20, .012) 0 1px, transparent 1px 8px),
    var(--sc-paper-fiber),
    linear-gradient(145deg, rgba(252, 241, 212, .88), rgba(236, 214, 166, .76)) !important;
  color: var(--sc-ink) !important;
  box-shadow: inset 0 1px 7px rgba(66, 39, 16, .028), 0 2px 8px rgba(40, 22, 9, .032) !important;
  font-size: 1rem !important;
  line-height: 1.72 !important;
  white-space: normal !important;
}

[data-theme="scriptorium"] .detail-frontmatter > .detail-note-meaning {
  border-left-color: rgba(139, 46, 36, .58) !important;
}
[data-theme="scriptorium"] .detail-frontmatter > .detail-note-mnemonic {
  border-left-color: rgba(138, 106, 31, .62) !important;
}

[data-theme="scriptorium"] .detail-frontmatter .detail-note-label,
[data-theme="scriptorium"] .detail-frontmatter .dm-lang,
[data-theme="scriptorium"] .detail-frontmatter .mnemonic-line span.detail-note-label,
[data-theme="scriptorium"] .detail-frontmatter .mnemonic-line > span:first-child {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--sc-rubric) !important;
  font-weight: 900 !important;
  font-family: Georgia, "Noto Serif SC", serif !important;
  letter-spacing: .02em !important;
  line-height: 1.72 !important;
  white-space: nowrap !important;
}

[data-theme="scriptorium"] .detail-frontmatter .detail-note-mnemonic .detail-note-label,
[data-theme="scriptorium"] .detail-frontmatter .detail-note-mnemonic > span:first-child {
  color: var(--sc-gold) !important;
}

[data-theme="scriptorium"] .detail-frontmatter .detail-note-value {
  display: block !important;
  min-width: 0 !important;
  color: var(--sc-ink) !important;
  line-height: 1.72 !important;
}

@media (max-width: 760px) {
  [data-theme="scriptorium"] .detail-frontmatter > .detail-note,
  [data-theme="scriptorium"] .detail-frontmatter > .detail-meaning,
  [data-theme="scriptorium"] .detail-frontmatter > .mnemonic-line {
    grid-template-columns: minmax(5.9em, 6.4em) minmax(0, 1fr) !important;
    padding: 12px 14px !important;
    column-gap: 10px !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 420px) {
  [data-theme="scriptorium"] .detail-frontmatter > .detail-note,
  [data-theme="scriptorium"] .detail-frontmatter > .detail-meaning,
  [data-theme="scriptorium"] .detail-frontmatter > .mnemonic-line {
    grid-template-columns: 1fr !important;
    row-gap: 2px !important;
  }
  [data-theme="scriptorium"] .detail-frontmatter .detail-note-label,
  [data-theme="scriptorium"] .detail-frontmatter .dm-lang,
  [data-theme="scriptorium"] .detail-frontmatter .mnemonic-line > span:first-child {
    white-space: normal !important;
  }
}

/* =====================================================================
   20260708 V7.4 Cyber + Danger Asset Rework
   - Local SVG assets first, CSS gradients as fallback.
   - Skin-only pass: keep overlay/sticky/portal layout contracts intact.
   - Cyber narrative: NEON LEXICON / database terminal.
   - Danger narrative: HAZARD ARCHIVE / safety-control terminal.
   ===================================================================== */

/* ---------------- Cyber: Neon Lexicon terminal ---------------- */
[data-theme="cyber"] {
  --cy-bg0: #050711;
  --cy-bg1: #0a1022;
  --cy-panel: rgba(7, 13, 30, 0.88);
  --cy-panel-2: rgba(13, 20, 45, 0.82);
  --cy-cyan: #27f4e5;
  --cy-cyan-soft: rgba(39, 244, 229, 0.16);
  --cy-cyan-line: rgba(39, 244, 229, 0.42);
  --cy-magenta: #ff2dd4;
  --cy-magenta-soft: rgba(255, 45, 212, 0.15);
  --cy-lime: #d7ff42;
  --cy-lime-soft: rgba(215, 255, 66, 0.14);
  --cy-amber: #ffb84d;
  --cy-text: #eefbff;
  --cy-muted: #9fb7c3;
  --cy-deep: #060817;
  --cy-grid: url("assets/cyber/circuit-grid.svg");
  --pd-speaker-mask: url("assets/cyber/audio-chip.svg");
  --bg: var(--cy-bg0);
  --surface: rgba(8, 14, 30, 0.92);
  --surface-hover: rgba(16, 27, 58, 0.94);
  --text: var(--cy-text);
  --text-secondary: #bdd6df;
  --text-light: #7ea1ad;
  --accent: var(--cy-cyan);
  --accent-light: var(--cy-cyan-soft);
  --border: rgba(39, 244, 229, 0.24);
}

[data-theme="cyber"] body {
  color: var(--cy-text);
  background:
    radial-gradient(circle at 82% 10%, rgba(255,45,212,.16), transparent 26rem),
    radial-gradient(circle at 18% 86%, rgba(39,244,229,.13), transparent 30rem),
    linear-gradient(135deg, #050711 0%, #101027 48%, #061725 100%);
}
[data-theme="cyber"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(5,7,17,.68), rgba(5,7,17,.82)),
    var(--cy-grid),
    repeating-linear-gradient(0deg, rgba(39,244,229,.035) 0 1px, transparent 1px 8px);
  background-size: auto, 360px 240px, auto;
  opacity: .9;
}
[data-theme="cyber"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(39,244,229,.08) 50%, transparent 52% 100%),
    radial-gradient(circle at 50% 0, rgba(215,255,66,.06), transparent 34rem);
  opacity: .75;
}

[data-theme="cyber"] .header {
  background: linear-gradient(90deg, rgba(8,12,28,.96), rgba(10,18,40,.94));
  border-bottom: 1px solid rgba(39,244,229,.38);
  box-shadow: 0 0 0 1px rgba(255,45,212,.12), 0 16px 34px rgba(0,0,0,.38);
}
[data-theme="cyber"] .header::after {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(39,244,229,.72), rgba(255,45,212,.55), rgba(215,255,66,.45), transparent) !important;
  opacity: .42 !important;
  box-shadow: none !important;
}
[data-theme="cyber"] .logo {
  color: var(--cy-text);
  letter-spacing: .08em;
  text-shadow: 0 0 14px rgba(39,244,229,.32);
}
[data-theme="cyber"] .logo::after {
  content: "NEON LEXICON";
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid rgba(215,255,66,.32);
  border-radius: 4px;
  color: var(--cy-lime);
  font: 700 .58rem/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  background: rgba(215,255,66,.06);
}
[data-theme="cyber"] .logo svg {
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(39,244,229,.55), 0 0 18px rgba(39,244,229,.28);
}
[data-theme="cyber"] .search-wrap::before {
  content: "SCAN";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: var(--cy-lime);
  font: 800 .64rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .18em;
  background: rgba(215,255,66,.08);
  border: 1px solid rgba(215,255,66,.22);
  border-radius: 999px;
  padding: 4px 8px;
  pointer-events: none;
}
[data-theme="cyber"] .search-wrap .search-icon { display: none; }
[data-theme="cyber"] .search-wrap input {
  min-height: 42px;
  padding-left: 78px !important;
  border-radius: 24px;
  border-color: rgba(39,244,229,.42);
  background:
    linear-gradient(90deg, rgba(39,244,229,.06), transparent 34%),
    rgba(3, 10, 24, .72);
  color: var(--cy-text);
  box-shadow: inset 0 0 22px rgba(39,244,229,.08), 0 0 0 1px rgba(255,45,212,.07);
}
[data-theme="cyber"] .search-wrap input:focus {
  border-color: var(--cy-cyan);
  box-shadow: 0 0 0 3px rgba(39,244,229,.14), 0 0 24px rgba(39,244,229,.18), inset 0 0 20px rgba(39,244,229,.10);
}

[data-theme="cyber"] .theme-select,
[data-theme="cyber"] .ctrl-btn,
[data-theme="cyber"] .font-control button,
[data-theme="cyber"] .select-filter,
[data-theme="cyber"] .filter-chip,
[data-theme="cyber"] .mode-toggle,
[data-theme="cyber"] .clear-filters-btn,
[data-theme="cyber"] .filter-toggle,
[data-theme="cyber"] .load-more-btn,
[data-theme="cyber"] .pagination button,
[data-theme="cyber"] .dh-ctrl-btn {
  color: var(--cy-text);
  border-color: rgba(39,244,229,.30);
  background: linear-gradient(180deg, rgba(11,22,48,.92), rgba(5,10,24,.92));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 0 14px rgba(39,244,229,.06);
}
[data-theme="cyber"] .theme-select:hover,
[data-theme="cyber"] .ctrl-btn:hover,
[data-theme="cyber"] .font-control button:hover,
[data-theme="cyber"] .select-filter:hover,
[data-theme="cyber"] .filter-chip:hover,
[data-theme="cyber"] .mode-toggle:hover,
[data-theme="cyber"] .clear-filters-btn:hover,
[data-theme="cyber"] .filter-toggle:hover,
[data-theme="cyber"] .load-more-btn:hover,
[data-theme="cyber"] .pagination button:hover,
[data-theme="cyber"] .dh-ctrl-btn:hover {
  color: var(--cy-cyan);
  border-color: var(--cy-cyan);
  background: linear-gradient(180deg, rgba(39,244,229,.16), rgba(5,10,24,.94));
  box-shadow: 0 0 18px rgba(39,244,229,.20);
}

[data-theme="cyber"] .filter-drawer {
  background: linear-gradient(180deg, rgba(6,10,27,.94), rgba(5,13,28,.88));
  border-bottom: 1px solid rgba(39,244,229,.36);
  box-shadow: 0 14px 34px rgba(0,0,0,.30), inset 0 -1px 0 rgba(255,45,212,.18);
}
[data-theme="cyber"] .filter-shell {
  border: 1px solid rgba(39,244,229,.18);
  border-radius: 18px;
  background:
    linear-gradient(rgba(5,10,24,.84), rgba(5,10,24,.90)),
    var(--cy-grid);
  background-size: auto, 360px 240px;
  box-shadow: 0 0 28px rgba(39,244,229,.08);
}
[data-theme="cyber"] .filter-panel-title {
  color: var(--cy-cyan);
  letter-spacing: .16em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-theme="cyber"] .filter-panel-title::before {
  content: "FILTER MATRIX";
  margin-right: 8px;
  color: var(--cy-lime);
  font-size: .62rem;
  border: 1px solid rgba(215,255,66,.30);
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(215,255,66,.08);
}
[data-theme="cyber"] .filter-label,
[data-theme="cyber"] .sort-label {
  color: var(--cy-magenta);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  font-weight: 800;
}
[data-theme="cyber"] #letterFilter button {
  border-color: rgba(39,244,229,.34);
  color: var(--cy-text);
  background: rgba(39,244,229,.06);
}
[data-theme="cyber"] #letterFilter button:hover,
[data-theme="cyber"] #letterFilter button.active {
  color: #04121b;
  background: var(--cy-cyan);
  border-color: var(--cy-cyan);
  box-shadow: 0 0 16px rgba(39,244,229,.34);
}
[data-theme="cyber"] .filter-chip.include,
[data-theme="cyber"] .pagination button.active,
[data-theme="cyber"] .active-tag {
  color: #04121b;
  background: linear-gradient(135deg, var(--cy-cyan), #78fff4);
  border-color: var(--cy-cyan);
  box-shadow: 0 0 18px rgba(39,244,229,.26);
}
[data-theme="cyber"] .filter-chip.exclude,
[data-theme="cyber"] .mode-toggle[data-mode="exclude"] {
  color: #fff;
  background: linear-gradient(135deg, rgba(255,45,212,.36), rgba(255,88,125,.22));
  border-color: rgba(255,45,212,.62);
}
[data-theme="cyber"] .mode-toggle[data-mode="include"] {
  color: var(--cy-lime);
  border-color: rgba(215,255,66,.34);
  background: rgba(215,255,66,.08);
}

[data-theme="cyber"] .toolbar {
  background:
    linear-gradient(90deg, rgba(6,12,29,.86), rgba(14,20,48,.78)),
    var(--cy-grid);
  background-size: auto, 360px 240px;
  border: 1px solid rgba(39,244,229,.20);
  border-radius: 18px;
  box-shadow: 0 0 26px rgba(39,244,229,.08);
}
[data-theme="cyber"] #resultSummary::before {
  content: none !important;
  display: none !important;
}

[data-theme="cyber"] .word-card {
  background:
    linear-gradient(145deg, rgba(9,18,40,.92), rgba(12,9,34,.88)),
    var(--cy-grid) !important;
  background-size: auto, 360px 240px !important;
  border: 1px solid rgba(39,244,229,.30);
  box-shadow: 0 0 0 1px rgba(255,45,212,.10), 0 18px 34px rgba(0,0,0,.34), inset 0 0 26px rgba(39,244,229,.05);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
[data-theme="cyber"] .word-card::before {
  width: 4px !important;
  left: 0 !important;
  top: 22px !important;
  bottom: 22px !important;
  background: linear-gradient(var(--cy-lime), var(--cy-cyan), var(--cy-magenta)) !important;
  box-shadow: 0 0 18px rgba(39,244,229,.50), 0 0 30px rgba(255,45,212,.18) !important;
}
[data-theme="cyber"] .word-card::after {
  content: "LEX_ID" !important;
  top: 14px !important;
  right: 18px !important;
  color: var(--cy-lime) !important;
  font: 900 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .16em !important;
  opacity: .9 !important;
}
[data-theme="cyber"] .word-card:hover {
  transform: translateY(-3px);
  border-color: rgba(39,244,229,.72);
  box-shadow: 0 0 0 1px rgba(39,244,229,.34), 0 20px 44px rgba(0,0,0,.42), 0 0 26px rgba(39,244,229,.22);
}
[data-theme="cyber"] .word-card .word-text,
[data-theme="cyber"] .detail-header .dh-word {
  color: var(--cy-lime);
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(215,255,66,.22);
}
[data-theme="cyber"] .word-card .word-phonetic,
[data-theme="cyber"] .dh-phonetic {
  color: var(--cy-cyan);
  font-weight: 800;
}
[data-theme="cyber"] .word-card .meaning,
[data-theme="cyber"] .detail-meaning {
  color: #d9eef2;
}
[data-theme="cyber"] .word-card .example,
[data-theme="cyber"] .example-item,
[data-theme="cyber"] .sense-block,
[data-theme="cyber"] .status-box,
[data-theme="cyber"] .detail-note,
[data-theme="cyber"] .detail-frontmatter .detail-note {
  background: rgba(3,7,18,.55) !important;
  border-color: rgba(255,45,212,.34) !important;
  color: #e7f9ff !important;
  box-shadow: inset 0 0 18px rgba(255,45,212,.04);
}
[data-theme="cyber"] .pos-tag,
[data-theme="cyber"] .level-badge,
[data-theme="cyber"] .theme-tag {
  background: rgba(39,244,229,.10);
  color: var(--cy-cyan);
  border-color: rgba(39,244,229,.34);
  border-radius: 999px;
}
[data-theme="cyber"] .level-badge,
[data-theme="cyber"] .word-card .level-badge {
  background: var(--cy-lime) !important;
  color: #07121a !important;
  border-color: var(--cy-lime) !important;
  box-shadow: 0 0 14px rgba(215,255,66,.24);
}

[data-theme="cyber"] .detail-modal {
  background:
    linear-gradient(145deg, rgba(6,12,30,.96), rgba(10,8,28,.95)),
    var(--cy-grid) !important;
  background-size: auto, 360px 240px !important;
  border: 1px solid rgba(39,244,229,.36);
  box-shadow: 0 0 0 1px rgba(255,45,212,.18), 0 22px 80px rgba(0,0,0,.60), 0 0 36px rgba(39,244,229,.20);
}
[data-theme="cyber"] .detail-header {
  background: linear-gradient(90deg, rgba(12,20,48,.98), rgba(8,12,30,.96));
  border-bottom-color: rgba(39,244,229,.28);
}
[data-theme="cyber"] .grammar-section h3 {
  color: var(--cy-magenta);
  border-bottom-color: rgba(255,45,212,.26);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-theme="cyber"] .grammar-table-wrap {
  background: rgba(4,8,20,.72);
  border-color: rgba(39,244,229,.26);
}
[data-theme="cyber"] .grammar-table th,
[data-theme="cyber"] .grammar-table td {
  border-color: rgba(39,244,229,.16);
}
[data-theme="cyber"] .grammar-table th {
  background: rgba(39,244,229,.12);
  color: var(--cy-cyan);
}
[data-theme="cyber"] .grammar-table .case-name,
[data-theme="cyber"] .grammar-table .case-val:first-child,
[data-theme="cyber"] .grammar-table th:first-child {
  background: rgba(4,10,24,.94) !important;
  color: var(--cy-lime) !important;
}

[data-theme="cyber"] .tts-btn,
[data-theme="cyber"] .ex-tts-btn {
  color: var(--cy-cyan) !important;
  border-color: rgba(39,244,229,.45) !important;
  background: linear-gradient(135deg, rgba(39,244,229,.16), rgba(5,10,24,.92)) !important;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
[data-theme="cyber"] .tts-btn:hover,
[data-theme="cyber"] .ex-tts-btn:hover,
[data-theme="cyber"] .tts-speaking {
  color: #05131b !important;
  background: var(--cy-cyan) !important;
  box-shadow: 0 0 20px rgba(39,244,229,.36) !important;
}
[data-theme="cyber"] .feedback-fab {
  background: linear-gradient(135deg, rgba(39,244,229,.18), rgba(255,45,212,.16));
  color: var(--cy-cyan);
  border: 1px solid rgba(39,244,229,.44);
  box-shadow: 0 0 24px rgba(39,244,229,.20);
}

[data-theme="cyber"] .pd-select-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  line-height: 1 !important;
  border-color: rgba(39,244,229,.36) !important;
  background: linear-gradient(180deg, rgba(10,20,48,.94), rgba(4,9,22,.96)) !important;
  color: var(--cy-text) !important;
}
[data-theme="cyber"] .pd-select-kicker { color: var(--cy-cyan) !important; line-height: 1 !important; }
[data-theme="cyber"] .pd-select-label { line-height: 1 !important; }
[data-theme="cyber"] .pd-select-arrow { margin-left: auto !important; transform-origin: center !important; color: var(--cy-cyan) !important; }
[data-theme="cyber"] .pd-select-menu {
  background:
    linear-gradient(rgba(5,10,24,.96), rgba(5,10,24,.98)),
    var(--cy-grid) !important;
  background-size: auto, 360px 240px !important;
  border-color: rgba(39,244,229,.38) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.52), 0 0 26px rgba(39,244,229,.22) !important;
}
[data-theme="cyber"] .pd-select-option:hover,
[data-theme="cyber"] .pd-select-option:focus,
[data-theme="cyber"] .pd-select-option.active {
  background: rgba(39,244,229,.14) !important;
  color: var(--cy-cyan) !important;
}

/* ---------------- Danger: Hazard Archive terminal ---------------- */
[data-theme="danger"] {
  --hz-bg: #100608;
  --hz-panel: rgba(24, 8, 11, 0.94);
  --hz-panel-2: rgba(34, 12, 14, 0.90);
  --hz-red: #ff313d;
  --hz-red-soft: rgba(255,49,61,.16);
  --hz-orange: #ff8a1f;
  --hz-yellow: #f6c945;
  --hz-yellow-soft: rgba(246,201,69,.14);
  --hz-black: #070203;
  --hz-cream: #ffe8c7;
  --hz-muted: #d3a190;
  --hz-green: #63d471;
  --hz-blue: #57b7ff;
  --hz-warning-icon: url("assets/danger/warning-triangle.svg");
  --hz-stripes: url("assets/danger/hazard-stripes.svg");
  --pd-speaker-mask: url("assets/danger/broadcast.svg");
  --bg: var(--hz-bg);
  --surface: var(--hz-panel);
  --surface-hover: rgba(44, 14, 17, 0.94);
  --text: var(--hz-cream);
  --text-secondary: #ffd2bd;
  --text-light: #b88a7d;
  --accent: var(--hz-red);
  --accent-light: var(--hz-red-soft);
  --border: rgba(255,49,61,.28);
}
[data-theme="danger"] body {
  color: var(--hz-cream);
  background:
    radial-gradient(circle at 16% 8%, rgba(255,49,61,.13), transparent 24rem),
    radial-gradient(circle at 85% 90%, rgba(246,201,69,.10), transparent 30rem),
    linear-gradient(135deg, #070203, #1a070b 48%, #090304 100%);
}
[data-theme="danger"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(12,3,5,.78), rgba(12,3,5,.88)),
    var(--hz-stripes),
    repeating-linear-gradient(90deg, rgba(255,49,61,.035) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(0deg, rgba(246,201,69,.025) 0 1px, transparent 1px 18px);
  background-size: auto, 192px 48px, auto, auto;
  background-position: 0 0, 0 0, 0 0, 0 0;
  opacity: .88;
}
[data-theme="danger"] body::after {
  content: "";
  position: fixed;
  inset: auto 24px 24px auto;
  width: 210px;
  height: 184px;
  pointer-events: none;
  z-index: 0;
  background: var(--hz-warning-icon) center / contain no-repeat;
  opacity: .055;
  filter: drop-shadow(0 0 18px rgba(255,49,61,.28));
}

[data-theme="danger"] .header {
  background: linear-gradient(90deg, rgba(15,5,7,.98), rgba(30,9,11,.96));
  border-bottom: 1px solid rgba(255,49,61,.46);
  box-shadow: 0 14px 34px rgba(0,0,0,.44);
}
[data-theme="danger"] .header::after {
  height: 3px !important;
  background-image: var(--hz-stripes) !important;
  background-size: 96px 24px !important;
  opacity: .85 !important;
  box-shadow: 0 0 18px rgba(255,49,61,.20);
}
[data-theme="danger"] .logo {
  color: var(--hz-cream);
  text-shadow: 0 0 14px rgba(255,49,61,.20);
}
[data-theme="danger"] .logo::after {
  content: "HAZARD ARCHIVE";
  margin-left: 8px;
  padding: 2px 7px;
  background: var(--hz-yellow);
  color: var(--hz-black);
  border-radius: 3px;
  font: 900 .58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}
[data-theme="danger"] .logo svg {
  box-shadow: 0 0 0 2px rgba(246,201,69,.55), 0 0 18px rgba(255,49,61,.28);
}
[data-theme="danger"] .search-wrap::before {
  content: "SEARCH DB" !important;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 78px;
  box-sizing: border-box;
  text-align: center;
  color: var(--hz-black);
  background: var(--hz-yellow);
  border: 1px solid rgba(246,201,69,.90);
  border-radius: 3px;
  padding: 4px 6px;
  font: 900 .58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  pointer-events: none;
  white-space: nowrap;
}
[data-theme="danger"] .search-wrap .search-icon { display: none; }
[data-theme="danger"] .search-wrap input {
  min-height: 42px;
  padding-left: 104px !important;
  border-radius: 8px;
  border-color: rgba(255,49,61,.50);
  background: linear-gradient(90deg, rgba(255,49,61,.10), rgba(20,5,7,.92));
  color: var(--hz-cream);
  box-shadow: inset 0 0 18px rgba(255,49,61,.08);
}
[data-theme="danger"] .search-wrap input:focus {
  border-color: var(--hz-yellow);
  box-shadow: 0 0 0 3px rgba(246,201,69,.14), 0 0 22px rgba(255,49,61,.20), inset 0 0 18px rgba(255,49,61,.10);
}

[data-theme="danger"] .theme-select,
[data-theme="danger"] .ctrl-btn,
[data-theme="danger"] .font-control button,
[data-theme="danger"] .select-filter,
[data-theme="danger"] .filter-chip,
[data-theme="danger"] .mode-toggle,
[data-theme="danger"] .clear-filters-btn,
[data-theme="danger"] .filter-toggle,
[data-theme="danger"] .load-more-btn,
[data-theme="danger"] .pagination button,
[data-theme="danger"] .dh-ctrl-btn {
  color: var(--hz-cream);
  background: linear-gradient(180deg, rgba(36,10,13,.96), rgba(14,4,6,.96));
  border-color: rgba(255,49,61,.38);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
[data-theme="danger"] .theme-select:hover,
[data-theme="danger"] .ctrl-btn:hover,
[data-theme="danger"] .font-control button:hover,
[data-theme="danger"] .select-filter:hover,
[data-theme="danger"] .filter-chip:hover,
[data-theme="danger"] .mode-toggle:hover,
[data-theme="danger"] .clear-filters-btn:hover,
[data-theme="danger"] .filter-toggle:hover,
[data-theme="danger"] .load-more-btn:hover,
[data-theme="danger"] .pagination button:hover,
[data-theme="danger"] .dh-ctrl-btn:hover {
  color: var(--hz-black);
  background: var(--hz-yellow);
  border-color: var(--hz-yellow);
  box-shadow: 0 0 16px rgba(246,201,69,.22);
}

[data-theme="danger"] .filter-drawer {
  background: linear-gradient(180deg, rgba(16,5,7,.96), rgba(20,6,8,.92));
  border-bottom: 1px solid rgba(255,49,61,.44);
  box-shadow: 0 14px 34px rgba(0,0,0,.40);
}
[data-theme="danger"] .filter-shell {
  border: 1px solid rgba(255,49,61,.26);
  border-radius: 10px;
  background:
    linear-gradient(rgba(16,5,7,.90), rgba(16,5,7,.92)),
    var(--hz-stripes);
  background-size: auto, 192px 48px;
  box-shadow: inset 0 0 0 1px rgba(246,201,69,.08), 0 0 28px rgba(255,49,61,.10);
}
[data-theme="danger"] .filter-panel-title {
  color: var(--hz-yellow);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}
[data-theme="danger"] .filter-panel-title::before {
  content: "ZONE CONTROL";
  margin-right: 8px;
  color: var(--hz-black);
  background: var(--hz-yellow);
  padding: 2px 6px;
  border-radius: 2px;
  font-size: .62rem;
}
[data-theme="danger"] .filter-label,
[data-theme="danger"] .sort-label {
  color: var(--hz-yellow) !important;
  background: rgba(246,201,69,.10);
  border: 1px solid rgba(246,201,69,.30);
  border-radius: 3px;
  padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 900;
  letter-spacing: .10em;
}
[data-theme="danger"] #letterFilter button {
  background: rgba(246,201,69,.08);
  border-color: rgba(246,201,69,.32);
  color: var(--hz-cream);
}
[data-theme="danger"] #letterFilter button:hover,
[data-theme="danger"] #letterFilter button.active,
[data-theme="danger"] .filter-chip.include,
[data-theme="danger"] .pagination button.active,
[data-theme="danger"] .active-tag {
  color: var(--hz-black) !important;
  background: var(--hz-yellow) !important;
  border-color: var(--hz-yellow) !important;
  box-shadow: 0 0 16px rgba(246,201,69,.22);
}
[data-theme="danger"] .filter-chip.exclude,
[data-theme="danger"] .mode-toggle[data-mode="exclude"] {
  color: #fff !important;
  background: rgba(255,49,61,.26) !important;
  border-color: var(--hz-red) !important;
  text-decoration: line-through;
}
[data-theme="danger"] .mode-toggle[data-mode="include"] {
  color: var(--hz-black);
  background: var(--hz-orange);
  border-color: var(--hz-orange);
}

[data-theme="danger"] .toolbar {
  background: linear-gradient(90deg, rgba(18,5,7,.94), rgba(28,8,10,.90));
  border: 1px solid rgba(255,49,61,.26);
  border-radius: 8px;
  box-shadow: inset 0 3px 0 rgba(246,201,69,.10), 0 16px 32px rgba(0,0,0,.28);
}
[data-theme="danger"] .toolbar::before {
  content: "" !important;
  height: 3px !important;
  background-image: var(--hz-stripes) !important;
  background-size: 96px 24px !important;
  opacity: .70 !important;
}
[data-theme="danger"] #resultSummary::before {
  content: "FILE COUNT";
  color: var(--hz-black);
  background: var(--hz-yellow);
  border-radius: 2px;
  padding: 2px 8px;
  margin-right: 8px;
  font: 900 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-theme="danger"] .word-card {
  background:
    radial-gradient(circle at 90% 12%, rgba(246,201,69,.055), transparent 5rem),
    linear-gradient(145deg, rgba(29,9,12,.96), rgba(12,4,6,.96)) !important;
  border: 1px solid rgba(255,49,61,.32);
  box-shadow: 0 18px 34px rgba(0,0,0,.40), inset 0 0 0 1px rgba(246,201,69,.05);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
[data-theme="danger"] .word-card::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 16px !important;
  bottom: 16px !important;
  width: 4px !important;
  background: var(--hz-red) !important;
  box-shadow: 0 0 18px rgba(255,49,61,.32) !important;
}
[data-theme="danger"] .word-card::after {
  content: "ENTRY" !important;
  top: 14px !important;
  right: 18px !important;
  color: var(--hz-yellow) !important;
  font: 900 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .14em !important;
  opacity: .88 !important;
}
[data-theme="danger"] .word-card:hover {
  transform: translateY(-2px);
  border-color: rgba(246,201,69,.55);
  box-shadow: 0 22px 42px rgba(0,0,0,.48), 0 0 22px rgba(255,49,61,.22);
}
[data-theme="danger"] .word-card .word-text,
[data-theme="danger"] .detail-header .dh-word {
  color: var(--hz-cream);
  text-shadow: 0 0 14px rgba(255,49,61,.24);
}
[data-theme="danger"] .word-card .word-phonetic,
[data-theme="danger"] .dh-phonetic {
  color: var(--hz-yellow);
  font-weight: 800;
}
[data-theme="danger"] .word-card .meaning,
[data-theme="danger"] .detail-meaning {
  color: #ffe3d1;
}
[data-theme="danger"] .word-card .example,
[data-theme="danger"] .example-item,
[data-theme="danger"] .sense-block,
[data-theme="danger"] .status-box,
[data-theme="danger"] .detail-note,
[data-theme="danger"] .detail-frontmatter .detail-note {
  background: rgba(9,3,4,.58) !important;
  border-color: rgba(246,201,69,.26) !important;
  color: #ffe8c7 !important;
  box-shadow: inset 4px 0 0 rgba(255,49,61,.75);
}
[data-theme="danger"] .pos-tag,
[data-theme="danger"] .level-badge,
[data-theme="danger"] .theme-tag {
  background: rgba(246,201,69,.10) !important;
  color: var(--hz-yellow) !important;
  border-color: rgba(246,201,69,.34) !important;
  border-radius: 3px;
}
[data-theme="danger"] .level-badge,
[data-theme="danger"] .word-card .level-badge {
  background: var(--hz-yellow) !important;
  color: var(--hz-black) !important;
  border-color: var(--hz-yellow) !important;
  box-shadow: 0 0 12px rgba(246,201,69,.20);
}
[data-theme="danger"] .pos-tag.verb { color: #fff !important; border-color: rgba(255,49,61,.56) !important; background: rgba(255,49,61,.20) !important; }
[data-theme="danger"] .pos-tag.noun { color: #bce6ff !important; border-color: rgba(87,183,255,.42) !important; background: rgba(87,183,255,.10) !important; }
[data-theme="danger"] .pos-tag.adj,
[data-theme="danger"] .pos-tag.adjective { color: #fff0b5 !important; border-color: rgba(246,201,69,.48) !important; background: rgba(246,201,69,.12) !important; }

[data-theme="danger"] .detail-modal {
  background:
    radial-gradient(circle at 100% 0, rgba(246,201,69,.055), transparent 18rem),
    linear-gradient(145deg, rgba(22,7,9,.98), rgba(12,3,5,.98)) !important;
  border: 1px solid rgba(255,49,61,.38);
  box-shadow: 0 0 0 1px rgba(246,201,69,.12), 0 24px 86px rgba(0,0,0,.66), 0 0 34px rgba(255,49,61,.18);
}
[data-theme="danger"] .detail-header {
  background: linear-gradient(90deg, rgba(32,9,12,.98), rgba(14,4,6,.98));
  border-bottom-color: rgba(255,49,61,.34);
}
[data-theme="danger"] .grammar-section h3 {
  color: var(--hz-yellow);
  border-bottom: 1px solid rgba(246,201,69,.24);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-theme="danger"] .grammar-table-wrap {
  background: rgba(8,2,3,.70);
  border-color: rgba(246,201,69,.24);
}
[data-theme="danger"] .grammar-table th,
[data-theme="danger"] .grammar-table td {
  border-color: rgba(246,201,69,.14);
  color: var(--hz-cream);
}
[data-theme="danger"] .grammar-table th {
  background: rgba(246,201,69,.13);
  color: var(--hz-yellow);
}
[data-theme="danger"] .grammar-table .case-name,
[data-theme="danger"] .grammar-table .case-val:first-child,
[data-theme="danger"] .grammar-table th:first-child {
  background: rgba(8,2,3,.96) !important;
  color: var(--hz-yellow) !important;
}

[data-theme="danger"] .tts-btn,
[data-theme="danger"] .ex-tts-btn {
  color: var(--hz-yellow) !important;
  border-color: rgba(246,201,69,.46) !important;
  background: linear-gradient(135deg, rgba(246,201,69,.15), rgba(13,4,5,.94)) !important;
  border-radius: 3px !important;
}
[data-theme="danger"] .tts-btn:hover,
[data-theme="danger"] .ex-tts-btn:hover,
[data-theme="danger"] .tts-speaking {
  color: var(--hz-black) !important;
  background: var(--hz-yellow) !important;
  box-shadow: 0 0 18px rgba(246,201,69,.28) !important;
}
[data-theme="danger"] .feedback-fab {
  background: linear-gradient(135deg, rgba(255,49,61,.24), rgba(12,3,5,.96));
  color: var(--hz-yellow);
  border: 1px solid rgba(246,201,69,.44);
  box-shadow: 0 0 24px rgba(255,49,61,.24);
}

[data-theme="danger"] .pd-select-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  line-height: 1 !important;
  background: linear-gradient(180deg, rgba(36,10,13,.96), rgba(13,4,5,.98)) !important;
  color: var(--hz-cream) !important;
  border-color: rgba(246,201,69,.34) !important;
  border-radius: 4px !important;
}
[data-theme="danger"] .pd-select-kicker {
  color: var(--hz-yellow) !important;
  line-height: 1 !important;
}
[data-theme="danger"] .pd-select-label { line-height: 1 !important; }
[data-theme="danger"] .pd-select-arrow {
  margin-left: auto !important;
  color: var(--hz-yellow) !important;
  transform-origin: center !important;
}
[data-theme="danger"] .pd-select-menu {
  background: linear-gradient(180deg, rgba(20,5,7,.98), rgba(10,2,3,.99)) !important;
  border-color: rgba(246,201,69,.38) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.58), 0 0 22px rgba(255,49,61,.20) !important;
}
[data-theme="danger"] .pd-select-menu::before {
  background-image: var(--hz-stripes) !important;
  background-size: 96px 24px !important;
  opacity: .82 !important;
}
[data-theme="danger"] .pd-select-option:hover,
[data-theme="danger"] .pd-select-option:focus,
[data-theme="danger"] .pd-select-option.active {
  background: rgba(246,201,69,.14) !important;
  color: var(--hz-yellow) !important;
}

/* Shared Cyber/Danger side-nav: visible, theme-specific, no content-layer collisions. */
[data-theme="cyber"] .detail-overlay.open > .detail-side-nav,
[data-theme="danger"] .detail-overlay.open > .detail-side-nav {
  z-index: 1250 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}
[data-theme="cyber"] .detail-overlay.open > .detail-side-nav {
  width: 42px !important;
  border-color: rgba(39,244,229,.46) !important;
  background: linear-gradient(180deg, rgba(39,244,229,.18), rgba(5,10,24,.90)) !important;
  box-shadow: 0 0 24px rgba(39,244,229,.24) !important;
}
[data-theme="cyber"] .detail-overlay.open > .detail-side-nav::after {
  background: var(--cy-cyan) !important;
  box-shadow: 0 0 18px rgba(39,244,229,.58) !important;
}
[data-theme="danger"] .detail-overlay.open > .detail-side-nav {
  width: 44px !important;
  border-color: rgba(246,201,69,.48) !important;
  background:
    linear-gradient(180deg, rgba(246,201,69,.14), rgba(14,4,5,.92)),
    var(--hz-stripes) !important;
  background-size: auto, 96px 24px !important;
  box-shadow: 0 0 24px rgba(255,49,61,.24) !important;
}
[data-theme="danger"] .detail-overlay.open > .detail-side-nav::after {
  background: var(--hz-yellow) !important;
  box-shadow: 0 0 16px rgba(246,201,69,.46) !important;
}

@media (max-width: 720px) {
  [data-theme="cyber"] .logo::after,
  [data-theme="danger"] .logo::after { display: none; }
  [data-theme="cyber"] .search-wrap::before,
  [data-theme="danger"] .search-wrap::before { display: none !important; }
  [data-theme="cyber"] .search-wrap input,
  [data-theme="danger"] .search-wrap input { padding-left: 40px !important; min-height: 38px; }
  [data-theme="cyber"] .search-wrap .search-icon,
  [data-theme="danger"] .search-wrap .search-icon { display: block; }

  [data-theme="danger"] .filter-collapsible {
    max-height: min(42vh, 360px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  [data-theme="danger"] .filter-collapsible.collapsed {
    max-height: 0 !important;
    overflow: hidden !important;
  }
  [data-theme="danger"] .filter-inner {
    gap: 8px !important;
  }
  [data-theme="danger"] .letter-filter,
  [data-theme="danger"] .chip-filter {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
  }
  [data-theme="cyber"] .toolbar,
  [data-theme="danger"] .toolbar {
    border-radius: 12px;
    margin-left: 10px;
    margin-right: 10px;
  }
  [data-theme="cyber"] .detail-overlay.open > .detail-side-nav,
  [data-theme="danger"] .detail-overlay.open > .detail-side-nav {
    width: 26px !important;
    top: var(--pd-detail-side-top, 126px) !important;
    bottom: var(--pd-detail-side-bottom, 18px) !important;
  }
  [data-theme="cyber"] .detail-overlay.open > .detail-side-prev,
  [data-theme="danger"] .detail-overlay.open > .detail-side-prev { left: 2px !important; }
  [data-theme="cyber"] .detail-overlay.open > .detail-side-next,
  [data-theme="danger"] .detail-overlay.open > .detail-side-next { right: 2px !important; }
  [data-theme="cyber"] .detail-overlay.open > .detail-side-nav:hover,
  [data-theme="cyber"] .detail-overlay.open > .detail-side-nav:focus,
  [data-theme="cyber"] .detail-overlay.open > .detail-side-nav:active,
  [data-theme="danger"] .detail-overlay.open > .detail-side-nav:hover,
  [data-theme="danger"] .detail-overlay.open > .detail-side-nav:focus,
  [data-theme="danger"] .detail-overlay.open > .detail-side-nav:active {
    transform: none !important;
  }
}

/* ================================================================
   V7.5 Cyber Card Meta Fix
   Fix: cyber word-card top-right LEX_ID and level badge overlapped.
   Keep narrative skin only; do not alter core layout/overlay contracts.
   ================================================================ */
[data-theme="cyber"] .word-card {
  padding-top: 28px !important;
}
[data-theme="cyber"] .word-card .word-top {
  padding-right: 124px !important;
}
[data-theme="cyber"] .word-card::after {
  content: "LEX_ID" !important;
  top: 13px !important;
  right: 72px !important;
  width: 58px !important;
  max-width: 58px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  z-index: 3 !important;
  opacity: .92 !important;
  letter-spacing: .12em !important;
  text-align: right !important;
}
[data-theme="cyber"] .word-card .level-badge,
[data-theme="cyber"] .word-card .level-badge.beginner,
[data-theme="cyber"] .word-card .level-badge.intermediate,
[data-theme="cyber"] .word-card .level-badge.advanced,
[data-theme="cyber"] .word-card .level-badge.extra {
  top: 10px !important;
  right: 16px !important;
  min-width: 34px !important;
  height: 26px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  z-index: 4 !important;
}
@media (max-width: 520px) {
  [data-theme="cyber"] .word-card {
    padding-top: 30px !important;
  }
  [data-theme="cyber"] .word-card .word-top {
    padding-right: 82px !important;
  }
  [data-theme="cyber"] .word-card::after {
    content: "LEX" !important;
    right: 58px !important;
    width: 34px !important;
    max-width: 34px !important;
    font-size: .56rem !important;
    letter-spacing: .08em !important;
  }
  [data-theme="cyber"] .word-card .level-badge,
  [data-theme="cyber"] .word-card .level-badge.beginner,
  [data-theme="cyber"] .word-card .level-badge.intermediate,
  [data-theme="cyber"] .word-card .level-badge.advanced,
  [data-theme="cyber"] .word-card .level-badge.extra {
    right: 13px !important;
    min-width: 32px !important;
    height: 24px !important;
    padding: 0 8px !important;
  }
}


/* ================================================================
   20260708 V7.7 Code Hygiene: semantic detail/card tag classes
   - Replaces high-risk inline tag styles from app.js with themeable classes.
   - Keeps behavior unchanged while reducing future theme regressions.
   ================================================================ */
.pos-tag.gender-tag {
    background: var(--bg);
    color: var(--text-secondary);
    border-color: var(--border);
}
.pos-tag.level-tag-detail,
.pos-tag.detail-theme-tag {
    background: var(--bg);
    color: var(--text-light);
    border-color: var(--border);
    font-weight: 400;
}
.pos-tag.animacy-tag {
    background: #e0f7fa;
    color: #00695c;
    border-color: rgba(0,105,92,0.15);
    font-weight: 400;
}
[data-theme="dark"] .pos-tag.gender-tag,
[data-theme="dark"] .pos-tag.level-tag-detail,
[data-theme="dark"] .pos-tag.detail-theme-tag {
    background: var(--surface-hover);
    color: var(--text-secondary);
    border-color: var(--border);
}
[data-theme="cyber"] .pos-tag.gender-tag,
[data-theme="cyber"] .pos-tag.level-tag-detail,
[data-theme="cyber"] .pos-tag.detail-theme-tag {
    background: rgba(3, 12, 26, 0.74);
    color: rgba(216, 239, 255, 0.76);
    border-color: rgba(0, 245, 255, 0.32);
    box-shadow: inset 0 0 0 1px rgba(255, 47, 181, 0.08);
}
[data-theme="cyber"] .pos-tag.animacy-tag {
    background: rgba(0, 245, 255, 0.12);
    color: #8ffcff;
    border-color: rgba(0, 245, 255, 0.38);
}
[data-theme="danger"] .pos-tag.gender-tag {
    background: rgba(255, 157, 77, 0.12);
    color: #ffb777;
    border-color: rgba(255, 157, 77, 0.46);
}
[data-theme="danger"] .pos-tag.level-tag-detail,
[data-theme="danger"] .pos-tag.detail-theme-tag {
    background: rgba(22, 6, 8, 0.78);
    color: rgba(255, 220, 184, 0.82);
    border-color: rgba(255, 83, 73, 0.42);
}
[data-theme="danger"] .pos-tag.animacy-tag {
    background: rgba(255, 183, 77, 0.14);
    color: #ffd186;
    border-color: rgba(255, 183, 77, 0.42);
}
[data-theme="scriptorium"] .pos-tag.gender-tag,
[data-theme="scriptorium"] .pos-tag.level-tag-detail,
[data-theme="scriptorium"] .pos-tag.detail-theme-tag {
    background: rgba(248, 237, 207, 0.82);
    color: #5a4631;
    border-color: rgba(122, 31, 31, 0.24);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
}
[data-theme="scriptorium"] .pos-tag.animacy-tag {
    background: rgba(61, 103, 80, 0.12);
    color: #3d6750;
    border-color: rgba(61, 103, 80, 0.30);
}

/* ================================================================
   20260708 V7.8 Inline Style + Interaction Contract Cleanup
   Purpose:
   - Move remaining app.js visual inline styles into semantic classes.
   - Add a final, narrow interaction contract so themes cannot break core layers.
   - This block is intentionally structural and should stay after theme skins.
   ================================================================ */
.usage-note-text {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
.usage-note-subtext {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-light);
    margin-top: 6px;
}
.detail-inline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}
.detail-inline-hint {
    font-size: 0.78rem;
    color: var(--text-light);
}
.detail-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.case-chip,
.reflexive-chip {
    font-size: 0.72rem;
    background: var(--accent-light);
    color: var(--accent);
    border-color: rgba(59,111,160,0.18);
}
.reflexive-chip { vertical-align: middle; font-size: 0.70rem; }
.collocation-block { margin-top: 10px; }
.collocation-title {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.collocation-chip {
    font-size: 0.78rem;
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.detail-mini-note {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.verb-pattern-note {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    padding: 6px 10px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    margin-top: 6px;
}
.grammar-subhead {
    text-align: left;
    font-weight: 400;
    font-size: 0.75rem;
}
.mt-4 { margin-top: 4px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }

[data-theme="dark"] .collocation-chip,
[data-theme="dark"] .verb-pattern-note {
    background: var(--surface-hover);
    color: var(--text-secondary);
    border-color: var(--border);
}
[data-theme="cyber"] .usage-note-text,
[data-theme="cyber"] .detail-mini-note,
[data-theme="cyber"] .collocation-title {
    color: rgba(216, 239, 255, 0.78);
}
[data-theme="cyber"] .usage-note-subtext,
[data-theme="cyber"] .detail-inline-hint {
    color: rgba(143, 252, 255, 0.58);
}
[data-theme="cyber"] .case-chip,
[data-theme="cyber"] .reflexive-chip,
[data-theme="cyber"] .collocation-chip {
    background: rgba(3, 12, 26, 0.74);
    color: #8ffcff;
    border-color: rgba(0, 245, 255, 0.34);
    box-shadow: inset 0 0 0 1px rgba(255, 47, 181, 0.06);
}
[data-theme="cyber"] .verb-pattern-note {
    background: rgba(3, 12, 26, 0.72);
    color: rgba(216, 239, 255, 0.78);
    border: 1px solid rgba(0, 245, 255, 0.22);
}
[data-theme="danger"] .usage-note-text,
[data-theme="danger"] .detail-mini-note,
[data-theme="danger"] .collocation-title {
    color: rgba(255, 220, 184, 0.82);
}
[data-theme="danger"] .usage-note-subtext,
[data-theme="danger"] .detail-inline-hint {
    color: rgba(255, 183, 77, 0.72);
}
[data-theme="danger"] .case-chip,
[data-theme="danger"] .reflexive-chip,
[data-theme="danger"] .collocation-chip {
    background: rgba(22, 6, 8, 0.78);
    color: #ffd186;
    border-color: rgba(255, 183, 77, 0.42);
}
[data-theme="danger"] .verb-pattern-note {
    background: rgba(22, 6, 8, 0.76);
    color: rgba(255, 220, 184, 0.84);
    border: 1px solid rgba(255, 83, 73, 0.34);
}
[data-theme="scriptorium"] .usage-note-text,
[data-theme="scriptorium"] .detail-mini-note,
[data-theme="scriptorium"] .collocation-title {
    color: #5a4631;
}
[data-theme="scriptorium"] .usage-note-subtext,
[data-theme="scriptorium"] .detail-inline-hint {
    color: #7a6244;
}
[data-theme="scriptorium"] .case-chip,
[data-theme="scriptorium"] .reflexive-chip,
[data-theme="scriptorium"] .collocation-chip {
    background: rgba(248, 237, 207, 0.86);
    color: #7a1f1f;
    border-color: rgba(122, 31, 31, 0.26);
}
[data-theme="scriptorium"] .verb-pattern-note {
    background: rgba(248, 237, 207, 0.84);
    color: #5a4631;
    border: 1px solid rgba(122, 31, 31, 0.18);
}


/* ======================================================================
   20260708 V9.5 Theme Component Skin Integration
   Source intent:
   - This is a component-level skin layer, not a throwaway override patch.
   - It normalizes Cyber filter-drawer geometry across collapse/expand states.
   - It restores the missing Cyber glitch motion by defining the animation contract
     used by logo and filter-handle states.
   - It leaves Danger alarm animation untouched.
   ====================================================================== */
[data-theme="cyber"] .logo .logo-text,
[data-theme="cyber"] .filter-handle .filter-toggle-text {
  display: inline-block !important;
  will-change: filter, text-shadow, transform;
  animation: pd-cyber-idle-glitch 5.2s steps(1, end) infinite;
}
[data-theme="cyber"] .logo:hover .logo-text,
[data-theme="cyber"] .logo:focus-within .logo-text,
[data-theme="cyber"] .filter-handle:hover .filter-toggle-text,
[data-theme="cyber"] .filter-handle:focus-visible .filter-toggle-text {
  animation: pd-cyber-glitch .52s steps(2, jump-none) 1 !important;
}
[data-theme="cyber"] .logo svg {
  animation: pd-cyber-idle-glitch 6.4s steps(1, end) infinite;
}
[data-theme="cyber"] .filter-drawer .filter-shell {
  border-radius: 3px !important;
  border-color: rgba(39,244,229,.32) !important;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)) !important;
  background:
    linear-gradient(135deg, rgba(39,244,229,.10), transparent 28%),
    linear-gradient(180deg, rgba(5,10,24,.88), rgba(4,8,22,.94)),
    var(--cy-grid) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,45,212,.08),
    0 0 28px rgba(39,244,229,.10) !important;
}
[data-theme="cyber"] .filter-drawer .filter-group {
  border: 1px solid rgba(39,244,229,.18) !important;
  border-radius: 2px !important;
  padding: 5px 7px !important;
  background: linear-gradient(90deg, rgba(39,244,229,.045), rgba(255,45,212,.026)) !important;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)) !important;
}
[data-theme="cyber"] .filter-drawer .filter-panel-title::before,
[data-theme="cyber"] .filter-drawer .filter-toggle,
[data-theme="cyber"] .filter-drawer .filter-handle,
[data-theme="cyber"] .filter-drawer .clear-filters-btn,
[data-theme="cyber"] .filter-drawer .mode-toggle,
[data-theme="cyber"] .filter-drawer .filter-chip,
[data-theme="cyber"] .filter-drawer .active-tag,
[data-theme="cyber"] .filter-drawer .letter-filter button,
[data-theme="cyber"] .filter-drawer .pd-select-button {
  border-radius: 2px !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
}
[data-theme="cyber"] .filter-drawer .filter-toggle,
[data-theme="cyber"] .filter-drawer .filter-handle,
[data-theme="cyber"] .filter-drawer .clear-filters-btn,
[data-theme="cyber"] .filter-drawer .mode-toggle,
[data-theme="cyber"] .filter-drawer .filter-chip,
[data-theme="cyber"] .filter-drawer .letter-filter button,
[data-theme="cyber"] .filter-drawer .pd-select-button {
  border-color: rgba(39,244,229,.36) !important;
  background:
    linear-gradient(135deg, rgba(39,244,229,.11), rgba(255,45,212,.045)),
    rgba(5,9,26,.92) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 0 14px rgba(39,244,229,.07) !important;
}
[data-theme="cyber"] .filter-drawer .filter-toggle:hover,
[data-theme="cyber"] .filter-drawer .filter-handle:hover,
[data-theme="cyber"] .filter-drawer .clear-filters-btn:hover,
[data-theme="cyber"] .filter-drawer .mode-toggle:hover,
[data-theme="cyber"] .filter-drawer .filter-chip:hover,
[data-theme="cyber"] .filter-drawer .letter-filter button:hover,
[data-theme="cyber"] .filter-drawer .pd-select-button:hover,
[data-theme="cyber"] .filter-drawer .pd-select-wrap.open .pd-select-button {
  border-color: var(--cy-lime, #d7ff42) !important;
  color: var(--cy-lime, #d7ff42) !important;
  box-shadow:
    0 0 0 1px rgba(215,255,66,.28),
    0 0 18px rgba(39,244,229,.18),
    inset 0 0 18px rgba(39,244,229,.08) !important;
}
[data-theme="cyber"] .filter-drawer .filter-toggle-badge,
[data-theme="cyber"] .filter-drawer .pd-select-arrow,
[data-theme="cyber"] .filter-drawer .pd-theme-filter-count {
  border-radius: 1px !important;
}
[data-theme="cyber"] .pd-select-menu.pd-select-kind-theme,
[data-theme="cyber"] .pd-select-menu.pd-select-kind-gender,
[data-theme="cyber"] .pd-select-menu.pd-select-kind-level {
  border-radius: 3px !important;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)) !important;
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="cyber"] .logo .logo-text,
  [data-theme="cyber"] .logo svg,
  [data-theme="cyber"] .filter-handle .filter-toggle-text {
    animation: none !important;
  }
}

/* V7.8 final interaction contract: keep core interactive layers stable across skins. */
.header {
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important;
    isolation: isolate !important;
}
.filter-bar.filter-drawer {
    position: sticky !important;
    top: var(--header-h) !important;
    z-index: 760 !important;
    overflow: visible !important;
    pointer-events: none !important;
    isolation: isolate !important;
}
.filter-drawer .filter-header,
.filter-drawer .filter-collapsible,
.filter-drawer .active-tags,
.filter-drawer .filter-handle-row {
    position: relative !important;
}
.filter-drawer button,
.filter-drawer select,
.filter-drawer input,
.filter-drawer .pd-select-wrap,
.filter-drawer .pd-select-button,
.filter-drawer .filter-chip,
.filter-drawer .active-tag,
.filter-drawer .active-tag *,
.filter-drawer .letter-filter button,
.filter-drawer .filter-handle {
    pointer-events: auto !important;
}
.filter-drawer::before,
.filter-drawer::after,
.filter-shell::before,
.filter-shell::after,
.detail-overlay::before,
.detail-overlay::after,
.detail-modal::before,
.detail-modal::after,
.word-card::before,
.word-card::after {
    pointer-events: none !important;
}
.toolbar {
    position: relative !important;
    z-index: 120 !important;
    pointer-events: auto !important;
    isolation: isolate !important;
}
.toolbar *,
.pd-select-wrap,
.pd-select-button,
.pd-select-menu,
.pd-select-option {
    pointer-events: auto !important;
}
.pd-select-menu {
    position: fixed !important;
    z-index: 1800 !important;
}
.detail-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1600 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
}
.detail-modal {
    position: relative !important;
    z-index: 1610 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    pointer-events: auto !important;
}
.detail-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1620 !important;
}
.detail-body {
    position: relative !important;
    z-index: 1615 !important;
}
.detail-side-nav {
    position: fixed !important;
    z-index: 1630 !important;
    pointer-events: auto !important;
}
.grammar-table-wrap {
    position: relative !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
}
.grammar-table th:first-child,
.grammar-table td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
}
.grammar-table th:first-child { z-index: 3 !important; }
.feedback-fab {
    position: fixed !important;
    z-index: 1700 !important;
    pointer-events: auto !important;
}
@media (max-width: 768px) {
    .filter-drawer .filter-collapsible:not(.collapsed) {
        max-height: min(46vh, 430px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .detail-overlay {
        padding: 0 !important;
    }
    .detail-side-nav {
        top: var(--pd-detail-side-top, 132px) !important;
        bottom: 18px !important;
    }
}

/* V8.2 detail layout contract: one stable structure for all POS detail pages. */
.detail-body.detail-layout-contract {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
.detail-frontmatter {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    clear: both !important;
}
.detail-note {
    display: grid !important;
    grid-template-columns: minmax(84px, 124px) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid var(--border) !important;
    border-left: 4px solid var(--accent) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--bg) !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
.detail-note-label,
.detail-note .dm-lang {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--text) !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    line-height: 1.45 !important;
}
.detail-note-value {
    display: block !important;
    min-width: 0 !important;
    color: var(--text-secondary) !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}
.detail-section,
.detail-body.detail-layout-contract > .grammar-section {
    position: relative !important;
    display: block !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}
.detail-section > h3,
.detail-body.detail-layout-contract > .grammar-section > h3 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 10px !important;
    box-sizing: border-box !important;
}
.detail-section .status-box,
.detail-section .usage-note-text,
.detail-section .usage-note-subtext,
.detail-section .example-list,
.detail-section .sense-list,
.detail-section .phrase-pragmatics,
.detail-section .collocation-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
}
.detail-section .grammar-table-wrap,
.detail-body.detail-layout-contract .grammar-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 10px 0 0 !important;
    clear: both !important;
    box-sizing: border-box !important;
    isolation: isolate !important;
}
.detail-body.detail-layout-contract .grammar-table {
    width: max-content !important;
    min-width: 100% !important;
    table-layout: auto !important;
}
.detail-body.detail-layout-contract .grammar-table th,
.detail-body.detail-layout-contract .grammar-table td {
    vertical-align: top !important;
    overflow-wrap: anywhere !important;
}
.detail-body.detail-layout-contract .grammar-table th:first-child,
.detail-body.detail-layout-contract .grammar-table td:first-child {
    min-width: 112px !important;
    max-width: 180px !important;
    box-shadow: 1px 0 0 var(--border) !important;
}
.detail-body.detail-layout-contract .detail-section-table::before,
.detail-body.detail-layout-contract .detail-section-table::after {
    pointer-events: none !important;
}
[data-theme="dark"] .detail-note {
    background: var(--surface-hover) !important;
    color: var(--text-secondary) !important;
}
[data-theme="cyber"] .detail-note {
    background: rgba(3, 12, 26, 0.78) !important;
    border-color: rgba(0, 245, 255, 0.34) !important;
    border-left-color: #00f5ff !important;
    color: rgba(216, 239, 255, 0.82) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 47, 181, 0.06) !important;
}
[data-theme="cyber"] .detail-note-label,
[data-theme="cyber"] .detail-note .dm-lang {
    color: #8ffcff !important;
}
[data-theme="cyber"] .detail-note-value {
    color: rgba(216, 239, 255, 0.86) !important;
}
[data-theme="danger"] .detail-note {
    background: rgba(22, 6, 8, 0.82) !important;
    border-color: rgba(255, 183, 77, 0.36) !important;
    border-left-color: #ffb74d !important;
    color: rgba(255, 220, 184, 0.86) !important;
}
[data-theme="danger"] .detail-note-label,
[data-theme="danger"] .detail-note .dm-lang {
    color: #ffd186 !important;
}
[data-theme="danger"] .detail-note-value {
    color: rgba(255, 235, 204, 0.9) !important;
}
[data-theme="scriptorium"] .detail-note {
    background:
        linear-gradient(rgba(248, 237, 207, 0.90), rgba(241, 223, 178, 0.88)),
        url("assets/scriptorium/vellum-fibers.svg"),
        url("assets/scriptorium/parchment-base.webp") !important;
    background-size: auto, 180px 180px, cover !important;
    border-color: rgba(122, 31, 31, 0.18) !important;
    border-left-color: #8a2d24 !important;
    color: #5a4631 !important;
}
[data-theme="scriptorium"] .detail-note-label,
[data-theme="scriptorium"] .detail-note .dm-lang {
    color: #7a1f1f !important;
}
[data-theme="scriptorium"] .detail-note-value {
    color: #4c3927 !important;
}
@media (min-width: 769px) {
    .detail-body.detail-layout-contract {
        padding-left: 26px !important;
        padding-right: 26px !important;
    }
}
@media (max-width: 768px) {
    .detail-body.detail-layout-contract {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .detail-note {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        padding: 10px 12px !important;
    }
    .detail-note-label,
    .detail-note .dm-lang {
        white-space: normal !important;
    }
    .detail-section,
    .detail-body.detail-layout-contract > .grammar-section {
        margin-bottom: 16px !important;
    }
    .detail-body.detail-layout-contract .grammar-table th:first-child,
    .detail-body.detail-layout-contract .grammar-table td:first-child {
        min-width: 96px !important;
        max-width: 144px !important;
    }
}

/* ================================================================
   20260708 V8.3 Mobile + Detail QA Stabilization
   Purpose:
   - Fix the final mobile side-nav contract variable mismatch.
   - Keep detail controls stable on touch devices.
   - Prevent the global feedback FAB from covering open detail content.
   - Add stable scroll behavior for detail modal/table areas across themes.
   ================================================================ */
body.detail-open .feedback-fab {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(10px) scale(0.98) !important;
}
.detail-overlay.open {
    overscroll-behavior: contain !important;
    touch-action: none !important;
}
.detail-modal {
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
}
.detail-body.detail-layout-contract {
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px) + 20px) !important;
}
.detail-body.detail-layout-contract .grammar-table-wrap {
    touch-action: pan-x pan-y !important;
    scroll-snap-type: none !important;
}
.detail-side-nav {
    touch-action: manipulation !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
.detail-side-nav:hover,
.detail-side-nav:focus,
.detail-side-nav:focus-visible,
.detail-side-nav:active {
    text-decoration: none !important;
}
.detail-side-nav:disabled {
    pointer-events: none !important;
}
.detail-body.detail-layout-contract .detail-section[data-detail-section-type="table"] {
    isolation: isolate !important;
}
.detail-body.detail-layout-contract .detail-section[data-detail-section-type="table"] .grammar-table-wrap::after {
    content: "";
    position: sticky;
    right: 0;
    top: 0;
    display: block;
    width: 1px;
    height: 0;
    pointer-events: none;
}
@media (max-width: 768px) {
    .detail-side-nav {
        top: var(--pd-detail-side-top, 132px) !important;
        bottom: var(--pd-detail-side-bottom, max(18px, env(safe-area-inset-bottom, 0px) + 14px)) !important;
        min-height: 96px !important;
        max-height: calc(100vh - var(--pd-detail-side-top, 132px) - 18px) !important;
    }
    .detail-overlay.open > .detail-side-nav:hover,
    .detail-overlay.open > .detail-side-nav:focus,
    .detail-overlay.open > .detail-side-nav:focus-visible,
    .detail-overlay.open > .detail-side-nav:active {
        transform: none !important;
    }
    .detail-body.detail-layout-contract {
        padding-bottom: max(32px, env(safe-area-inset-bottom, 0px) + 26px) !important;
    }
    .detail-body.detail-layout-contract .grammar-table-wrap {
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: var(--radius-sm) !important;
    }
    .detail-body.detail-layout-contract .grammar-table th,
    .detail-body.detail-layout-contract .grammar-table td {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    body.detail-open .feedback-fab {
        display: none !important;
    }
}
@media (max-width: 420px) {
    .detail-note {
        grid-template-columns: 1fr !important;
    }
    .detail-body.detail-layout-contract .grammar-table th:first-child,
    .detail-body.detail-layout-contract .grammar-table td:first-child {
        min-width: 88px !important;
        max-width: 126px !important;
    }
}


/* ======================================================================
   20260708 V9.6 Detail Modal Runtime Alignment
   Component intent:
   - Keep Cyber mobile detail as a single fullscreen shell, matching the base
     detail modal contract instead of inheriting older desktop/tablet rail math.
   - Keep grammar tables scrollable inside the shell without letting the whole
     modal exceed the viewport.
   - Keep Danger desktop search command label as an explicit reserved input
     prefix, so SEARCH DB never overlaps typed text.
   ====================================================================== */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  [data-theme="cyber"] .detail-overlay.open {
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    width: 100dvw !important;
    height: 100dvh !important;
    max-width: 100dvw !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  [data-theme="cyber"] .detail-modal {
    flex: 1 1 auto !important;
    width: 100dvw !important;
    max-width: 100dvw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
  }
  [data-theme="cyber"] .detail-header,
  [data-theme="cyber"] .detail-body,
  [data-theme="cyber"] .detail-body.detail-layout-contract,
  [data-theme="cyber"] .detail-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  [data-theme="cyber"] .detail-body.detail-layout-contract {
    padding-left: max(14px, env(safe-area-inset-left, 0px) + 12px) !important;
    padding-right: max(14px, env(safe-area-inset-right, 0px) + 12px) !important;
    overflow-x: hidden !important;
  }
  [data-theme="cyber"] .detail-body.detail-layout-contract .grammar-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
}

@media (min-width: 721px) {
  [data-theme="danger"] .search-wrap {
    min-width: 260px;
  }
}


/* ======================================================================
   20260708 V9.7 Responsive Theme Component Alignment
   Component intent:
   - Treat Cyber mobile as an app-shell problem, not only a detail-modal bug.
   - Keep Cyber detail headings and grammar sections inside the modal width on
     all terminals.
   - Rebuild Scriptorium detail sections as parchment reading blocks rather
     than nested card/table frames.
   - Reduce Scriptorium paint cost by moving texture work to containers instead
     of repeating it on every section/table cell.
   ====================================================================== */
[data-theme="cyber"] .detail-body .grammar-section,
[data-theme="cyber"] .detail-body.detail-layout-contract .detail-section {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
[data-theme="cyber"] .detail-body .grammar-section h3,
[data-theme="cyber"] .detail-body.detail-layout-contract .detail-section > h3,
[data-theme="cyber"] .detail-body .grammar-section h3 .gs-sub {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.34 !important;
  box-sizing: border-box !important;
}
[data-theme="cyber"] .detail-body .grammar-section h3 {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px 8px !important;
  letter-spacing: .08em !important;
}
[data-theme="cyber"] .detail-body .grammar-section h3 .gs-sub {
  flex: 1 1 100% !important;
  letter-spacing: .04em !important;
}
[data-theme="cyber"] .detail-body .grammar-table-wrap {
  contain: layout paint !important;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  /* V9.9.2: keep only global width safety here. Header/filter layout is governed
     by the later Cyber Mobile Layout Realignment block so this V9.7 legacy section
     no longer redefines the mobile component flow. */
  [data-theme="cyber"] html,
  [data-theme="cyber"] body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }
  [data-theme="cyber"] body::before,
  [data-theme="cyber"] body::after {
    background-size: auto, 240px 160px, auto !important;
    opacity: .58 !important;
  }
  [data-theme="cyber"] .header,
  [data-theme="cyber"] .filter-drawer,
  [data-theme="cyber"] .toolbar,
  [data-theme="cyber"] .main,
  [data-theme="cyber"] .data-attribution,
  [data-theme="cyber"] .word-grid,
  [data-theme="cyber"] .word-card,
  [data-theme="cyber"] .filter-shell,
  [data-theme="cyber"] .active-tags {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  [data-theme="cyber"] .word-card {
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)) !important;
  }
  [data-theme="cyber"] .word-card .word-top,
  [data-theme="cyber"] .word-card .word-main,
  [data-theme="cyber"] .word-card .word-meta {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  [data-theme="cyber"] .detail-body .grammar-section h3 {
    font-size: .9rem !important;
    letter-spacing: .05em !important;
  }
}

/* Scriptorium detail: paper-first layout, not title-strip-inside-card. */
[data-theme="scriptorium"] .detail-body .grammar-section {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 20px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(86,58,28,.16) !important;
}
[data-theme="scriptorium"] .detail-body .grammar-section:last-child {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}
[data-theme="scriptorium"] .detail-body .grammar-section h3 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
  padding: 0 0 7px !important;
  color: var(--sc-rubric) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(139,46,36,.20) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  line-height: 1.38 !important;
}
[data-theme="scriptorium"] .detail-body .grammar-section h3::before {
  content: "❦" !important;
  color: var(--sc-gold) !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
[data-theme="scriptorium"] .detail-body .grammar-section > div:not(.grammar-table-wrap):not(.example-list):not(.sense-list):not(.status-box) {
  padding: 0 !important;
  margin: 0 !important;
}
[data-theme="scriptorium"] .detail-body .grammar-section > .example-list,
[data-theme="scriptorium"] .detail-body .grammar-section > .sense-list {
  padding: 0 !important;
  margin: 0 !important;
}
[data-theme="scriptorium"] .detail-body .grammar-section > .status-box {
  margin: 0 !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table-wrap {
  margin: 0 0 4px !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 10px !important;
  background-color: rgba(250,239,205,.70) !important;
  background-image:
    linear-gradient(180deg, rgba(252,242,216,.94), rgba(240,222,179,.88)),
    var(--sc-paper-fiber) !important;
  box-shadow: inset 0 1px 0 rgba(255,248,220,.42) !important;
  contain: layout paint !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table th,
[data-theme="scriptorium"] .detail-body .grammar-table td {
  background-image: none !important;
  box-shadow: none !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table td {
  background-color: rgba(255,248,226,.30) !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table th {
  background-color: rgba(238,211,156,.58) !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table th:first-child,
[data-theme="scriptorium"] .detail-body .grammar-table td:first-child {
  background-image: none !important;
  background-color: rgba(238,211,156,.92) !important;
}
[data-theme="scriptorium"] .detail-body .status-box,
[data-theme="scriptorium"] .detail-body .sense-overview .sense-block,
[data-theme="scriptorium"] .detail-body .example-item {
  background-image: none !important;
  box-shadow: inset 0 1px 5px rgba(66,39,16,.028) !important;
}
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  [data-theme="scriptorium"] .detail-modal {
    background-blend-mode: normal !important;
  }
  [data-theme="scriptorium"] .detail-body {
    gap: 14px !important;
  }
  [data-theme="scriptorium"] .detail-body .grammar-section {
    padding-bottom: 16px !important;
  }
  [data-theme="scriptorium"] .detail-body .grammar-section h3 {
    margin-bottom: 10px !important;
  }
  [data-theme="scriptorium"] .detail-body .grammar-table-wrap {
    background-image: linear-gradient(180deg, rgba(252,242,216,.96), rgba(240,222,179,.90)) !important;
  }
  [data-theme="scriptorium"] .detail-body .grammar-table th,
  [data-theme="scriptorium"] .detail-body .grammar-table td {
    white-space: normal !important;
  }
}

/* ======================================================================
   20260708 V9.4 Mobile Detail Header Control Contract
   - Detail close is the only destructive detail action in the header.
   - On touch/narrow screens it is pinned to the physical top-right edge,
     outside the normal control flow, while Back/TTS remain inside .dh-controls.
   - This replaces the removed per-entry feedback control without adding a
     second mobile-only close button.
   ====================================================================== */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .detail-header {
    padding-right: max(58px, calc(env(safe-area-inset-right, 0px) + 54px)) !important;
  }
  .detail-header .dh-controls {
    padding-right: 0 !important;
  }
  #detailCloseBtn {
    position: absolute !important;
    top: max(6px, calc(env(safe-area-inset-top, 0px) + 6px)) !important;
    right: max(2px, env(safe-area-inset-right, 0px)) !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1640 !important;
  }
}

/* ======================================================================
   20260708 V9.0 Mobile Detail Nav Prune
   Mobile detail pages already support horizontal swipe between entries.
   Hide the overlay prev/next buttons on small screens to reduce clutter and
   prevent theme-specific side rails from occupying content/touch space.
   Desktop/tablet keeps the visible controls.
   ====================================================================== */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .detail-overlay > .detail-side-nav,
  .detail-overlay.open > .detail-side-nav,
  [data-theme="cyber"] .detail-overlay.open > .detail-side-nav,
  [data-theme="danger"] .detail-overlay.open > .detail-side-nav,
  [data-theme="scriptorium"] .detail-overlay.open > .detail-side-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .detail-overlay > .detail-side-nav::before,
  .detail-overlay > .detail-side-nav::after {
    display: none !important;
  }
}

/* ======================================================================
   20260708 V9.8 Grammar/Table Skin Calibration + TTS Module Boundary
   Component intent:
   - Treat grammar-section headings as part of the table/detail content system,
     not as free-floating theme decorations.
   - Keep Cyber active filter chips readable on dark terminal surfaces.
   - Give Scriptorium detail sections a manuscript reading rhythm with enough
     vertical breathing room and paper-first spacing.
   - Rebuild Danger filter surface as one continuous hazard control panel rather
     than a weak tiled stripe texture.
   ====================================================================== */

/* Cyber detail headings: terminal labels inside the available content width. */
[data-theme="cyber"] .detail-body .grammar-section h3,
[data-theme="cyber"] .detail-body.detail-layout-contract .detail-section > h3 {
  position: relative !important;
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 12px !important;
  padding: 8px 12px 8px 13px !important;
  box-sizing: border-box !important;
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  overflow: hidden !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.28 !important;
  letter-spacing: .045em !important;
  color: var(--cy-cyan, #27f4e5) !important;
  background:
    linear-gradient(90deg, rgba(39,244,229,.14), rgba(255,45,212,.055) 58%, rgba(5,10,24,.54)),
    rgba(4,9,24,.72) !important;
  border: 1px solid rgba(39,244,229,.32) !important;
  border-left: 4px solid var(--cy-cyan, #27f4e5) !important;
  border-bottom-color: rgba(255,45,212,.22) !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 0 16px rgba(39,244,229,.08) !important;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)) !important;
}
[data-theme="cyber"] .detail-body .grammar-section h3::before,
[data-theme="cyber"] .detail-body.detail-layout-contract .detail-section > h3::before {
  content: "SYS" !important;
  display: inline-block !important;
  margin: 0 8px 0 0 !important;
  padding: 2px 5px !important;
  vertical-align: .08em !important;
  color: #06131b !important;
  background: var(--cy-lime, #d7ff42) !important;
  border-radius: 1px !important;
  font: 900 .58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .10em !important;
}
[data-theme="cyber"] .detail-body .verb-section h3 {
  display: block !important;
}
[data-theme="cyber"] .detail-body .grammar-section h3 .gs-sub {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 5px 0 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
  color: rgba(216,255,250,.72) !important;
  font-size: .74rem !important;
  line-height: 1.32 !important;
  letter-spacing: .025em !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
[data-theme="cyber"] .detail-body .grammar-table-wrap {
  max-width: 100% !important;
  margin-top: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  box-sizing: border-box !important;
}
[data-theme="cyber"] .detail-body .grammar-table th,
[data-theme="cyber"] .detail-body .grammar-table td {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Cyber filter chips: active POS selection stays readable on dark terminal UI. */
[data-theme="cyber"] .filter-drawer .filter-chip.include,
[data-theme="cyber"] .filter-drawer .filter-chip.active,
[data-theme="cyber"] .filter-drawer .active-tag,
[data-theme="cyber"] .filter-chip.include {
  color: var(--cy-lime, #d7ff42) !important;
  background:
    linear-gradient(135deg, rgba(215,255,66,.16), rgba(39,244,229,.08)),
    rgba(3,9,23,.94) !important;
  border-color: rgba(215,255,66,.66) !important;
  text-shadow: 0 0 10px rgba(215,255,66,.26) !important;
  box-shadow:
    0 0 0 1px rgba(215,255,66,.22),
    0 0 16px rgba(39,244,229,.16),
    inset 0 0 14px rgba(215,255,66,.055) !important;
}
[data-theme="cyber"] .filter-drawer .filter-chip.include span,
[data-theme="cyber"] .filter-drawer .filter-chip.active span,
[data-theme="cyber"] .filter-drawer .active-tag span,
[data-theme="cyber"] .filter-chip.include span {
  color: inherit !important;
}

/* Scriptorium detail: manuscript rhythm and section spacing. */
[data-theme="scriptorium"] .detail-body {
  row-gap: 20px !important;
}
[data-theme="scriptorium"] .detail-body .grammar-section {
  padding: 18px 0 24px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(86,58,28,.14) !important;
}
[data-theme="scriptorium"] .detail-body .grammar-section + .grammar-section {
  margin-top: 8px !important;
  padding-top: 24px !important;
}
[data-theme="scriptorium"] .detail-body .grammar-section h3 {
  margin: 0 0 17px !important;
  padding: 0 0 10px !important;
  line-height: 1.42 !important;
  align-items: baseline !important;
  border-bottom-color: rgba(139,46,36,.18) !important;
}
[data-theme="scriptorium"] .detail-body .grammar-section h3::before {
  margin-right: 9px !important;
  transform: translateY(-.04em) !important;
  opacity: .88 !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table-wrap {
  margin-top: 4px !important;
  margin-bottom: 8px !important;
}
[data-theme="scriptorium"] .detail-body .example-list,
[data-theme="scriptorium"] .detail-body .sense-list,
[data-theme="scriptorium"] .detail-body .status-box {
  margin-top: 6px !important;
}
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  [data-theme="scriptorium"] .detail-body {
    row-gap: 16px !important;
  }
  [data-theme="scriptorium"] .detail-body .grammar-section {
    padding: 15px 0 20px !important;
  }
  [data-theme="scriptorium"] .detail-body .grammar-section + .grammar-section {
    padding-top: 19px !important;
  }
  [data-theme="scriptorium"] .detail-body .grammar-section h3 {
    margin-bottom: 14px !important;
  }
}

/* Danger filter drawer: one continuous, stronger hazard-control panel. */
[data-theme="danger"] .filter-drawer {
  background:
    linear-gradient(180deg, rgba(14,4,6,.98), rgba(24,7,9,.96)),
    repeating-linear-gradient(135deg, rgba(246,201,69,.18) 0 16px, rgba(7,2,3,.92) 16px 32px) !important;
  border-bottom-color: rgba(246,201,69,.58) !important;
  box-shadow:
    0 16px 38px rgba(0,0,0,.46),
    inset 0 -3px 0 rgba(246,201,69,.42),
    inset 0 -6px 0 rgba(255,49,61,.30) !important;
}
[data-theme="danger"] .filter-shell {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(246,201,69,.16), rgba(255,49,61,.08) 14%, rgba(16,5,7,.94) 42%, rgba(16,5,7,.94)),
    repeating-linear-gradient(135deg, rgba(246,201,69,.24) 0 14px, rgba(7,2,3,.84) 14px 28px),
    linear-gradient(180deg, rgba(23,7,9,.96), rgba(13,4,6,.97)) !important;
  background-size: auto, 112px 56px, auto !important;
  background-position: 0 0, 0 0, 0 0 !important;
  border-color: rgba(246,201,69,.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,49,61,.20),
    inset 0 0 36px rgba(0,0,0,.28),
    0 0 30px rgba(255,49,61,.14) !important;
}
[data-theme="danger"] .filter-shell::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: min(118px, 28%) !important;
  pointer-events: none !important;
  opacity: .38 !important;
  background: repeating-linear-gradient(135deg, var(--hz-yellow, #f6c945) 0 13px, var(--hz-black, #070203) 13px 26px) !important;
  mix-blend-mode: screen !important;
}
[data-theme="danger"] .filter-shell > * {
  position: relative !important;
  z-index: 1 !important;
}



/* ======================================================================
   20260708 V9.9.1 Filter Surface + Cyber Responsive Shell + Word Cards Sync
   Component intent:
   - Danger filter drawer is a coherent control surface, not a wallpaper panel.
   - Cyber mobile is an app-shell layout with enough touch target size; it is
     not solved by squeezing desktop controls or hiding overflow.
   - Filter drawer owns hit-testing; background clicks cannot fall through.
   - Word card runtime rules are aligned with css-src/06_word_cards.css.
   ====================================================================== */

/* ----------------------------------------------------------------------
   Filter drawer hit-test contract
   ---------------------------------------------------------------------- */
.filter-bar.filter-drawer,
.filter-bar.filter-drawer .filter-shell,
.filter-bar.filter-drawer .filter-header,
.filter-bar.filter-drawer .filter-collapsible,
.filter-bar.filter-drawer .filter-inner,
.filter-bar.filter-drawer .filter-group,
.filter-bar.filter-drawer .active-tags,
.filter-bar.filter-drawer .filter-handle-row {
  pointer-events: auto !important;
}

/* ----------------------------------------------------------------------
   Word card runtime boundary sync — mirrors css-src/06_word_cards.css.
   Keep this component-neutral and theme-safe.
   ---------------------------------------------------------------------- */
.word-grid,
.word-card,
.word-card .word-top,
.word-card .word-text,
.word-card .word-phonetic,
.word-card .meaning,
.word-card .example,
.word-card .card-footer,
.word-card .tags-row,
.word-card .card-actions {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.word-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.word-card .word-text,
.word-card .meaning,
.word-card .example,
.word-card .theme-tag {
  overflow-wrap: anywhere;
  word-break: normal;
}
.word-card .card-footer {
  gap: 8px;
}
.word-card .tags-row {
  min-width: 0;
  flex: 1 1 auto;
}
.word-card .card-actions {
  flex: 0 0 auto;
}
@media (max-width: 768px) {
  .word-grid {
    grid-template-columns: 1fr !important;
  }
  .word-card {
    width: 100%;
  }
}

/* ----------------------------------------------------------------------
   Cyber desktop filter readability
   ---------------------------------------------------------------------- */
[data-theme="cyber"] .filter-drawer .letter-filter button.active,
[data-theme="cyber"] .letter-filter button.active,
[data-theme="cyber"] .filter-drawer .filter-chip.include,
[data-theme="cyber"] .filter-chip.include {
  color: var(--cy-lime, #d7ff42) !important;
  background:
    linear-gradient(135deg, rgba(215,255,66,.16), rgba(39,244,229,.08)),
    rgba(3,9,23,.94) !important;
  border-color: rgba(215,255,66,.66) !important;
  text-shadow: 0 0 10px rgba(215,255,66,.28) !important;
  box-shadow:
    0 0 0 1px rgba(215,255,66,.22),
    0 0 16px rgba(39,244,229,.16),
    inset 0 0 14px rgba(215,255,66,.06) !important;
}
[data-theme="cyber"] .filter-drawer .filter-chip.include span,
[data-theme="cyber"] .filter-chip.include span,
[data-theme="cyber"] .filter-drawer .letter-filter button.active span {
  color: inherit !important;
}

/* ----------------------------------------------------------------------
   V9.9.3 note: removed the V9.9.2 Cyber-only mobile layout branch.
   Cyber now inherits the shared mobile component flow; only visual skin stays theme-specific.
   ---------------------------------------------------------------------- */

/* ----------------------------------------------------------------------
   Danger filter surface
   Root cause fixed here: stripes should not be the whole panel wallpaper.
   They are now a top/bottom hazard rail with an undisturbed dark control body.
   ---------------------------------------------------------------------- */
[data-theme="danger"] .filter-drawer {
  background:
    linear-gradient(180deg, rgba(24,5,8,.98), rgba(9,2,4,.99)) !important;
  border-bottom: 1px solid rgba(246,201,69,.62) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.52),
    inset 0 -2px 0 rgba(246,201,69,.28),
    inset 0 -5px 0 rgba(255,49,61,.24) !important;
}

[data-theme="danger"] .filter-shell {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  padding-top: 14px !important;
  background:
    radial-gradient(circle at 14px 14px, rgba(255,49,61,.20), transparent 26px),
    linear-gradient(90deg, rgba(255,49,61,.10), rgba(246,201,69,.035) 24%, rgba(18,5,8,.96) 42%, rgba(10,3,5,.99)),
    linear-gradient(180deg, rgba(31,8,12,.98), rgba(12,3,6,.98)) !important;
  border: 1px solid rgba(246,201,69,.46) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,49,61,.22),
    inset 0 0 42px rgba(0,0,0,.34),
    0 0 28px rgba(255,49,61,.13) !important;
}

[data-theme="danger"] .filter-shell::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: auto !important;
  height: 10px !important;
  pointer-events: none !important;
  opacity: .96 !important;
  background:
    repeating-linear-gradient(135deg, #f6c945 0 12px, #080203 12px 24px) !important;
  box-shadow:
    inset 0 -1px 0 rgba(255,49,61,.55),
    0 4px 16px rgba(246,201,69,.14) !important;
  mix-blend-mode: normal !important;
  z-index: 0 !important;
}

[data-theme="danger"] .filter-shell::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  height: 3px !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, transparent, #ff3141 16%, #f6c945 50%, #ff3141 84%, transparent) !important;
  opacity: .86 !important;
  z-index: 0 !important;
}

[data-theme="danger"] .filter-shell > * {
  position: relative !important;
  z-index: 1 !important;
}

[data-theme="danger"] .filter-header {
  padding-top: 1px !important;
}

[data-theme="danger"] .filter-inner {
  background:
    linear-gradient(180deg, rgba(13,3,6,.68), rgba(6,1,3,.52)) !important;
  border: 1px solid rgba(246,201,69,.18) !important;
  box-shadow:
    inset 0 0 22px rgba(0,0,0,.24),
    0 0 18px rgba(255,49,61,.08) !important;
}

@media (max-width: 768px) {
  [data-theme="danger"] .filter-shell {
    padding-top: 12px !important;
  }
  [data-theme="danger"] .filter-inner {
    background: rgba(8,2,4,.62) !important;
  }
}

/* ======================================================================
   20260708 V9.9.3 Cyber layout de-divergence
   Intent:
   - Cyber is now the shared mobile layout with a cyber skin, not a separate
     mobile layout system.
   - This section cancels legacy Cyber layout overrides by restating the same
     component flow used by the stable themes. It keeps Cyber-specific visual
     styling elsewhere: neon borders, glow, clipped corners, terminal colors.
   ====================================================================== */
@media (max-width: 768px) {
  [data-theme="cyber"] .header-inner {
    display: flex !important;
    grid-template-areas: none !important;
    grid-template-columns: none !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    height: var(--header-h) !important;
    min-height: 0 !important;
    padding: 0 12px !important;
  }
  [data-theme="cyber"] .logo {
    order: 0 !important;
    grid-area: auto !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  [data-theme="cyber"] .search-wrap {
    order: 1 !important;
    grid-area: auto !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 8px !important;
  }
  [data-theme="cyber"] .header-controls {
    order: 2 !important;
    grid-area: auto !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  [data-theme="cyber"] .header-controls .pd-select-wrap.pd-select-kind-visual-theme {
    flex: 0 0 auto !important;
    min-width: 92px !important;
    max-width: 128px !important;
  }
  [data-theme="cyber"] .header-controls .pd-select-button {
    min-height: 36px !important;
  }
  [data-theme="cyber"] .filter-drawer .filter-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  [data-theme="cyber"] .filter-drawer .filter-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  [data-theme="cyber"] .filter-drawer .letter-filter {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 3px !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 2px 0 !important;
  }
  [data-theme="cyber"] .filter-drawer .chip-filter {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  [data-theme="cyber"] .filter-drawer .filter-chip {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    justify-content: center !important;
  }
}
@media (max-width: 480px) {
  [data-theme="cyber"] .header-inner {
    padding: 0 env(safe-area-inset-left, 8px) 0 env(safe-area-inset-right, 8px) !important;
  }
  [data-theme="cyber"] .header-controls .font-control {
    display: none !important;
  }
  [data-theme="cyber"] .logo .logo-text {
    display: none !important;
  }
  [data-theme="cyber"] .header-controls .pd-select-wrap.pd-select-kind-visual-theme {
    min-width: 84px !important;
    max-width: 112px !important;
  }
  [data-theme="cyber"] .filter-drawer .filter-group {
    width: 100% !important;
  }
  [data-theme="cyber"] .filter-drawer .filter-group-initial {
    display: block !important;
  }
  [data-theme="cyber"] .filter-drawer .filter-group-initial .filter-label {
    display: inline-flex !important;
    margin-bottom: 5px !important;
  }
  [data-theme="cyber"] .filter-drawer .letter-filter {
    width: 100% !important;
    max-height: 72px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    padding: 2px 1px 5px !important;
  }
  [data-theme="cyber"] .filter-drawer .letter-filter button {
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 4px !important;
    font-size: .68rem !important;
  }
  [data-theme="cyber"] .filter-drawer .chip-filter {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    padding-bottom: 2px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  [data-theme="cyber"] .filter-drawer .filter-chip {
    flex: 0 0 auto !important;
  }
  [data-theme="cyber"] .filter-drawer .select-filter,
  [data-theme="cyber"] .filter-drawer .pd-select-wrap {
    width: 100% !important;
  }
}



/* ======================================================================
   V9.9.4 Cyber Toolbar Status Skin Contract
   ----------------------------------------------------------------------
   Scope: cyber toolbar status/sort micro UI only.
   Intent: remove duplicated FOUND badges and make INDEX / result / sort
   read as one compact status strip across desktop, tablet, and phone.
   This block does not change sorting behavior, select state, or word data.
   ====================================================================== */
[data-theme="cyber"] .toolbar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 12px !important;
  row-gap: 8px !important;
  margin-top: 10px !important;
  padding: 10px 16px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(90deg, rgba(39,244,229,.055), rgba(255,45,212,.035)),
    rgba(5,10,24,.78) !important;
  border: 1px solid rgba(39,244,229,.18) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 14px 34px rgba(0,0,0,.22) !important;
}
[data-theme="cyber"] .toolbar::before {
  content: "INDEX" !important;
  grid-column: 1 !important;
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 3px 9px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,61,242,.40) !important;
  color: var(--cy-magenta, #ff3df2) !important;
  background: rgba(255,61,242,.075) !important;
  font: 900 .62rem/1 var(--font-mono, ui-monospace, monospace) !important;
  letter-spacing: .10em !important;
  white-space: nowrap !important;
  text-shadow: 0 0 10px rgba(255,61,242,.25) !important;
}
[data-theme="cyber"] .toolbar-left {
  grid-column: 2 !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
[data-theme="cyber"] .toolbar-left::before {
  content: "FOUND" !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(184,255,77,.32) !important;
  color: var(--cy-lime, #b8ff4d) !important;
  background: rgba(184,255,77,.075) !important;
  font: 900 .58rem/1 var(--font-mono, ui-monospace, monospace) !important;
  letter-spacing: .10em !important;
  white-space: nowrap !important;
  box-shadow: 0 0 12px rgba(184,255,77,.12) !important;
}
[data-theme="cyber"] #resultSummary {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  color: var(--cy-cyan, #27f4e5) !important;
  font: 800 .72rem/1.15 var(--font-mono, ui-monospace, monospace) !important;
  letter-spacing: .05em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 0 11px rgba(39,244,229,.22) !important;
}
[data-theme="cyber"] #resultSummary::before {
  content: none !important;
  display: none !important;
}
[data-theme="cyber"] .toolbar-right {
  grid-column: 3 !important;
  justify-self: end !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}
[data-theme="cyber"] .sort-label {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  color: var(--cy-cyan, #27f4e5) !important;
  font: 900 .70rem/1 var(--font-mono, ui-monospace, monospace) !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  text-shadow: 0 0 10px rgba(39,244,229,.20) !important;
}
[data-theme="cyber"] .sort-label::before {
  content: "SORT://" !important;
  color: var(--cy-magenta, #ff3df2) !important;
  margin-right: 4px !important;
  font: inherit !important;
  letter-spacing: .06em !important;
}
[data-theme="cyber"] .toolbar-right .pd-select-wrap,
[data-theme="cyber"] .toolbar-right .pd-select-kind-sort {
  min-width: 0 !important;
  flex: 0 1 auto !important;
}
[data-theme="cyber"] .toolbar-right .pd-select-kind-sort .pd-select-button {
  min-width: 158px !important;
  max-width: min(220px, 34vw) !important;
  min-height: 38px !important;
  padding: 7px 34px 7px 13px !important;
  border-radius: 13px !important;
}
@media (max-width: 768px) {
  [data-theme="cyber"] .toolbar {
    grid-template-columns: auto minmax(0, 1fr) !important;
    padding: 10px 12px !important;
    margin-inline: 10px !important;
    border-radius: 16px !important;
  }
  [data-theme="cyber"] .toolbar::before {
    grid-column: 1 !important;
  }
  [data-theme="cyber"] .toolbar-left {
    grid-column: 2 !important;
    justify-self: end !important;
    justify-content: flex-end !important;
  }
  [data-theme="cyber"] .toolbar-right {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-self: stretch !important;
    justify-content: flex-start !important;
  }
  [data-theme="cyber"] .toolbar-right .pd-select-wrap,
  [data-theme="cyber"] .toolbar-right .pd-select-kind-sort {
    flex: 1 1 auto !important;
    width: auto !important;
  }
  [data-theme="cyber"] .toolbar-right .pd-select-kind-sort .pd-select-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}
@media (max-width: 420px) {
  [data-theme="cyber"] .toolbar {
    column-gap: 8px !important;
    row-gap: 7px !important;
  }
  [data-theme="cyber"] .toolbar::before,
  [data-theme="cyber"] .toolbar-left::before {
    min-height: 21px !important;
    padding-inline: 7px !important;
    font-size: .55rem !important;
    letter-spacing: .08em !important;
  }
  [data-theme="cyber"] #resultSummary {
    font-size: .66rem !important;
    letter-spacing: .035em !important;
  }
  [data-theme="cyber"] .sort-label::before {
    content: "SORT:" !important;
  }
}

/* ================================================================
   V9.9.5 Word Card Visual Freeze + Long Lexeme Safety
   Component contract: word-card layout owns wrapping and badge reserve;
   theme skins may paint, but must not hide long lemmas such as
   "przeciwdeszczowy" behind meta badges or action controls.
   ================================================================ */
.word-card {
  box-sizing: border-box !important;
  min-width: 0 !important;
  isolation: isolate;
}
.word-card .word-top,
.word-card .card-footer,
.word-card .tags-row,
.word-card .card-actions {
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.word-card .word-top {
  align-items: flex-start !important;
  max-width: 100% !important;
  padding-right: 72px;
}
.word-card .word-text,
.word-card .word-phonetic,
.word-card .meaning,
.word-card .example,
.word-card .match-hint,
.word-card .theme-tag,
.word-card .pos-tag {
  overflow-wrap: anywhere;
  word-break: normal;
  min-width: 0;
}
.word-card .word-text {
  display: inline-block;
  max-width: 100%;
  hyphens: auto;
}
.word-card .card-footer {
  gap: 8px !important;
  align-items: flex-end !important;
}
.word-card .tags-row { flex: 1 1 auto !important; }
.word-card .card-actions {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}
.word-card .level-badge {
  white-space: nowrap !important;
  max-width: calc(100% - 24px);
}
[data-theme="cyber"] .word-card .word-top {
  padding-right: clamp(94px, 22vw, 132px) !important;
}
[data-theme="danger"] .word-card .word-top {
  padding-right: clamp(92px, 22vw, 136px) !important;
}
[data-theme="scriptorium"] .word-card .word-top {
  padding-right: clamp(84px, 20vw, 118px) !important;
}
@media (max-width: 520px) {
  .word-card .word-top { padding-right: 64px; }
  [data-theme="cyber"] .word-card .word-top { padding-right: 96px !important; }
  [data-theme="danger"] .word-card .word-top { padding-right: 86px !important; }
  [data-theme="scriptorium"] .word-card .word-top { padding-right: 76px !important; }
  .word-card .word-text { max-width: 100%; }
}

/* ================================================================
   V9.9.5 Numeral Variant Table Cells
   Fixes numerals such as 1 and 2 whose case-form variants need to be
   separated visually instead of compressed into a single unreadable cell.
   ================================================================ */
.grammar-table td.case-val-list {
  min-width: 190px;
  white-space: normal !important;
  vertical-align: top;
}
.form-variant-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  min-width: 0;
}
.form-variant-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 72%, var(--bg));
  color: var(--text);
  cursor: pointer;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.form-variant-label {
  color: var(--text-light);
  font-size: .72em;
  white-space: nowrap;
}
.form-variant-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
[data-theme="cyber"] .form-variant-chip {
  border-color: rgba(39,244,229,.32);
  background: linear-gradient(180deg, rgba(39,244,229,.10), rgba(5,10,24,.84));
  color: var(--cy-cyan, #27f4e5);
  box-shadow: inset 0 0 12px rgba(39,244,229,.06);
}
[data-theme="cyber"] .form-variant-label { color: var(--cy-lime, #b8ff4d); }
[data-theme="danger"] .form-variant-chip {
  border-color: rgba(246,201,69,.30);
  background: rgba(246,201,69,.10);
  color: var(--hz-cream, #ffe8c7);
}
[data-theme="danger"] .form-variant-label { color: var(--hz-yellow, #f6c945); }
[data-theme="scriptorium"] .form-variant-chip {
  border-color: rgba(106,68,37,.28);
  background: rgba(255,250,235,.48);
  color: var(--sc-ink, #352514);
  border-radius: 12px;
}
[data-theme="scriptorium"] .form-variant-label { color: var(--sc-rubric, #8b2e24); }

/* ================================================================
   V9.9.10 Numeral Declension Table Pass
   Numeral detail pages now use the same table contract as nouns/adjectives:
   forms in declension tables, noun-case rules in a compact rule table, and
   ordinal/clock/collective forms in one related-forms table.
   ================================================================ */
.numeral-case-table,
.numeral-related-table,
.numeral-noun-rule-table {
  min-width: 720px;
}
.numeral-case-table th:first-child,
.numeral-case-table .case-name,
.numeral-related-table th:first-child,
.numeral-related-table .case-name,
.numeral-noun-rule-table th:first-child,
.numeral-noun-rule-table .case-name {
  min-width: 136px;
}
.numeral-case-table th:not(:first-child),
.numeral-case-table td.case-val {
  min-width: 134px;
  vertical-align: top;
}
.numeral-related-table th:nth-child(2),
.numeral-related-table td:nth-child(2) {
  min-width: 180px;
}
.numeral-noun-rule-table th:nth-child(2),
.numeral-noun-rule-table td:nth-child(2),
.numeral-noun-rule-table th:nth-child(3),
.numeral-noun-rule-table td:nth-child(3) {
  min-width: 150px;
  vertical-align: top;
}
.numeral-subtitle {
  margin: 10px 0 6px;
  color: var(--text-secondary);
  font-size: .88rem;
  font-weight: 800;
}
.numeral-form-cell {
  white-space: normal !important;
  line-height: 1.35;
}
.numeral-form-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}
.numeral-form-line {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  padding: 1px 0;
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.numeral-form-line:hover .numeral-form-text,
.numeral-form-line:focus .numeral-form-text {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.numeral-form-label {
  flex: 0 0 auto;
  color: var(--text-light);
  font-size: .72em;
  font-weight: 750;
  white-space: nowrap;
}
.numeral-form-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.numeral-form-empty {
  color: var(--text-light);
  font-weight: 600;
}
.numeral-case-section,
.numeral-noun-rule-section,
.numeral-related-section {
  margin-top: 12px;
}
[data-theme="cyber"] .numeral-form-line { color: var(--cy-cyan, #27f4e5); }
[data-theme="cyber"] .numeral-form-label { color: var(--cy-lime, #b8ff4d); }
[data-theme="danger"] .numeral-form-line { color: var(--hz-cream, #ffe8c7); }
[data-theme="danger"] .numeral-form-label { color: var(--hz-yellow, #f6c945); }
[data-theme="scriptorium"] .numeral-form-line { color: var(--sc-ink, #352514); }
[data-theme="scriptorium"] .numeral-form-label { color: var(--sc-rubric, #8b2e24); }
@media (max-width: 640px) {
  .numeral-case-table,
  .numeral-related-table,
  .numeral-noun-rule-table {
    min-width: 660px;
  }
  .numeral-case-table th:first-child,
  .numeral-case-table .case-name,
  .numeral-related-table th:first-child,
  .numeral-related-table .case-name,
  .numeral-noun-rule-table th:first-child,
  .numeral-noun-rule-table .case-name {
    min-width: 112px;
  }
  .numeral-case-table th:not(:first-child),
  .numeral-case-table td.case-val {
    min-width: 112px;
  }
}

/* =====================================================================
   V9.9.11 Theme Asset + Detail Performance Stabilization
   Scope:
   - Canonicalizes advanced-theme asset paths through /assets/{cyber,danger,scriptorium}.
   - Re-establishes Scriptorium as a clean parchment skin without repeated fiber layers.
   - Adds detail-open performance contracts for Cyber, Danger and Scriptorium.
   - This is the final theme contract layer; older historical theme blocks remain only
     as fallback definitions below the same public selectors.
   ===================================================================== */

/* ---------- Canonical asset tokens ---------- */
[data-theme="cyber"] {
  --cy-grid: url("assets/cyber/circuit-grid.svg");
  --pd-speaker-mask: url("assets/cyber/audio-chip.svg");
}
[data-theme="danger"] {
  --dg-stripes: url("assets/danger/hazard-stripes.svg");
  --dg-warning: url("assets/danger/warning-triangle.svg");
  --dg-broadcast: url("assets/danger/broadcast.svg");
}
[data-theme="scriptorium"] {
  --sc-paper-image: url("assets/scriptorium/parchment-base.webp");
  --sc-card-image: url("assets/scriptorium/parchment-card.webp");
  --sc-page-image: url("assets/scriptorium/parchment-page.webp");
  --sc-paper-fiber: none;
  --sc-paper-bg: #f1dfb0;
  --sc-paper-bg-light: #f8edcf;
  --sc-paper-bg-mid: #e7ca8d;
  --sc-ink: #2e2115;
  --sc-ink-soft: #60462d;
  --sc-line: rgba(91, 64, 34, .22);
  --bg: #2a1a10;
  --surface: var(--sc-paper-bg);
  --surface-hover: #f6e8bf;
  --text: var(--sc-ink);
  --text-secondary: var(--sc-ink-soft);
  --text-light: #80613c;
  --border: rgba(91, 64, 34, .30);
}

/* ---------- Scriptorium final surface model ---------- */
[data-theme="scriptorium"] body {
  background:
    radial-gradient(circle at 52% 10%, rgba(207, 156, 75, .10), transparent 34rem),
    radial-gradient(circle at 17% 85%, rgba(0, 0, 0, .20), transparent 32rem),
    linear-gradient(135deg, #211107 0%, #3a2514 44%, #1a0e07 100%) !important;
}
[data-theme="scriptorium"] body::before {
  background:
    linear-gradient(rgba(42, 26, 16, .18), rgba(42, 26, 16, .24)),
    var(--sc-paper-image) !important;
  background-size: 260px 260px !important;
  background-repeat: repeat !important;
  opacity: .16 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}
[data-theme="scriptorium"] .filter-shell,
[data-theme="scriptorium"] .toolbar,
[data-theme="scriptorium"] .word-card,
[data-theme="scriptorium"] .detail-modal,
[data-theme="scriptorium"] .pd-select-menu,
[data-theme="scriptorium"] .feedback-fab,
[data-theme="scriptorium"] .pagination button,
[data-theme="scriptorium"] .load-more-btn,
[data-theme="scriptorium"] .empty-state,
[data-theme="scriptorium"] .data-attribution {
  background-color: var(--sc-paper-bg) !important;
  background-image:
    radial-gradient(circle at 12% 16%, rgba(128, 82, 34, .075), transparent 8rem),
    radial-gradient(circle at 88% 82%, rgba(120, 72, 26, .060), transparent 9rem),
    linear-gradient(145deg, rgba(250, 240, 212, .90), rgba(231, 205, 148, .88)),
    var(--sc-card-image) !important;
  background-blend-mode: normal !important;
  color: var(--sc-ink) !important;
  border-color: var(--sc-line) !important;
  filter: none !important;
}
[data-theme="scriptorium"] .filter-shell::before,
[data-theme="scriptorium"] .filter-shell::after,
[data-theme="scriptorium"] .detail-modal::before,
[data-theme="scriptorium"] .detail-modal::after {
  opacity: .22 !important;
  filter: none !important;
}
[data-theme="scriptorium"] .word-card {
  clip-path: none !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 22px rgba(25, 14, 7, .20), inset 0 0 0 1px rgba(255, 248, 220, .28) !important;
}
[data-theme="scriptorium"] .word-card::before {
  content: "" !important;
  width: 4px !important;
  left: 0 !important;
  top: 16px !important;
  bottom: 16px !important;
  background: linear-gradient(180deg, rgba(138,45,36,.78), rgba(154,120,40,.34)) !important;
  box-shadow: none !important;
  filter: none !important;
}
[data-theme="scriptorium"] .word-card::after {
  color: rgba(138,45,36,.60) !important;
  text-shadow: none !important;
}
[data-theme="scriptorium"] .detail-modal {
  background-color: #f3dfad !important;
  background-image:
    radial-gradient(circle at 10% 9%, rgba(126,79,36,.060), transparent 12rem),
    radial-gradient(circle at 92% 86%, rgba(96,58,25,.050), transparent 13rem),
    linear-gradient(145deg, rgba(252,239,203,.96), rgba(229,202,143,.92)),
    var(--sc-page-image) !important;
  background-blend-mode: normal !important;
  clip-path: none !important;
  overflow: hidden auto !important;
  box-shadow: 0 18px 42px rgba(25,14,7,.34), inset 0 0 0 1px rgba(255,248,220,.34) !important;
}
[data-theme="scriptorium"] .detail-header,
[data-theme="scriptorium"] .detail-body .detail-meaning,
[data-theme="scriptorium"] .detail-body .status-box,
[data-theme="scriptorium"] .detail-body .sense-overview .sense-block,
[data-theme="scriptorium"] .detail-body .mnemonic-line,
[data-theme="scriptorium"] .detail-body .grammar-section,
[data-theme="scriptorium"] .detail-body .grammar-table-wrap,
[data-theme="scriptorium"] .detail-body .example-item {
  background-color: rgba(248, 237, 207, .82) !important;
  background-image: linear-gradient(180deg, rgba(255, 248, 224, .42), rgba(235, 211, 157, .24)) !important;
  background-blend-mode: normal !important;
  color: var(--sc-ink) !important;
  border-color: rgba(91, 64, 34, .20) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 248, 220, .20) !important;
  filter: none !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table th,
[data-theme="scriptorium"] .detail-body .grammar-table td {
  background-image: none !important;
  text-shadow: none !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table th {
  background: rgba(244, 226, 180, .88) !important;
}
[data-theme="scriptorium"] .detail-body .grammar-table td {
  background: rgba(251, 239, 207, .70) !important;
}


/* ===================================================================
   V9.9.13 Theme Runtime Contract
   Purpose:
   - Remove the V9.9.12 Danger rail experiment and restore the prior ENTRY packet border language with tighter spacing.
   - Replace stacked Cyber detail patches with a single low-cost detail shell.
   - Keep heavy-theme detail scrolling predictable by disabling offscreen animated layers while a detail view is open.
   =================================================================== */

/* Danger list cards: compact spacing, previous ENTRY packet border model, no full-height gradient rail. */
[data-theme="danger"] .word-card {
  position: relative !important;
  overflow: hidden !important;
  padding: 26px 24px 16px 24px !important;
  border: 1px solid rgba(255, 90, 99, .38) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)) !important;
  background:
    radial-gradient(circle at 92% 10%, rgba(246,201,69,.050), transparent 5rem),
    linear-gradient(90deg, rgba(255,90,99,.085), transparent 28%),
    linear-gradient(145deg, rgba(29,9,12,.96), rgba(12,4,6,.96)) !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.40),
    inset 0 0 0 1px rgba(246,201,69,.045),
    inset 0 1px 0 rgba(255,90,99,.12) !important;
}
[data-theme="danger"] .word-card::before {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  top: 10px !important;
  bottom: auto !important;
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  background: transparent !important;
  border-left: 2px solid var(--dz-red-hot, #ff5a63) !important;
  border-top: 2px solid var(--dz-red-hot, #ff5a63) !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  box-shadow: -3px -3px 12px rgba(255,90,99,.28) !important;
  clip-path: none !important;
  filter: none !important;
  pointer-events: none !important;
}
[data-theme="danger"] .word-card::after {
  content: attr(data-entry-code) !important;
  position: absolute !important;
  top: 11px !important;
  right: 17px !important;
  color: var(--dz-red-hot, #ff5a63) !important;
  background: rgba(8,3,7,.74) !important;
  border-left: 1px solid rgba(255,90,99,.36) !important;
  padding: 0 4px !important;
  font: 900 .58rem var(--dz-display-font, var(--font)) !important;
  letter-spacing: .12em !important;
  opacity: .98 !important;
  text-shadow: 0 0 10px rgba(255,90,99,.30) !important;
  pointer-events: none !important;
}
[data-theme="danger"] .word-card .word-top {
  padding-right: 86px !important;
}
[data-theme="danger"] .word-card .word-main,
[data-theme="danger"] .word-card .meaning,
[data-theme="danger"] .word-card .example,
[data-theme="danger"] .word-card .card-footer {
  margin-left: 0 !important;
}
@media (max-width: 640px) {
  [data-theme="danger"] .word-card {
    padding-left: 20px !important;
    padding-right: 18px !important;
  }
  [data-theme="danger"] .word-card .word-top {
    padding-right: 76px !important;
  }
}

/* One final detail overlay shell for heavy themes. */
[data-theme="cyber"] .detail-overlay,
[data-theme="danger"] .detail-overlay,
[data-theme="scriptorium"] .detail-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 900 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="cyber"] .detail-overlay.open,
[data-theme="danger"] .detail-overlay.open,
[data-theme="scriptorium"] .detail-overlay.open {
  display: flex !important;
}
[data-theme="cyber"] .detail-modal,
[data-theme="danger"] .detail-modal,
[data-theme="scriptorium"] .detail-modal {
  position: relative !important;
  z-index: 910 !important;
  max-height: min(90vh, calc(100dvh - 36px)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
  filter: none !important;
  isolation: isolate !important;
}
[data-theme="cyber"] body.detail-open::before,
[data-theme="cyber"] body.detail-open::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  filter: none !important;
  will-change: auto !important;
}
[data-theme="danger"] body.detail-open::before,
[data-theme="danger"] body.detail-open::after,
[data-theme="scriptorium"] body.detail-open::before,
[data-theme="scriptorium"] body.detail-open::after {
  animation: none !important;
  filter: none !important;
  transform: none !important;
  will-change: auto !important;
}

/* Cyber detail: single cheap scroller. Neon remains in color/border, not in moving layers. */
[data-theme="cyber"] body.detail-open .detail-overlay.open {
  background: rgba(1, 3, 12, .86) !important;
}
[data-theme="cyber"] body.detail-open .detail-modal {
  background: #071021 !important;
  background-image: none !important;
  border: 1px solid rgba(39,244,229,.24) !important;
  border-radius: 18px !important;
  clip-path: none !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.56), 0 0 0 1px rgba(39,244,229,.14) !important;
  text-shadow: none !important;
}
[data-theme="cyber"] body.detail-open .detail-modal::before,
[data-theme="cyber"] body.detail-open .detail-modal::after,
[data-theme="cyber"] body.detail-open .detail-header::before,
[data-theme="cyber"] body.detail-open .detail-header::after,
[data-theme="cyber"] body.detail-open .detail-body .grammar-section h3::before,
[data-theme="cyber"] body.detail-open .detail-body.detail-layout-contract .detail-section > h3::before {
  content: none !important;
  display: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}
[data-theme="cyber"] body.detail-open .detail-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 70 !important;
  padding-top: 16px !important;
  background: #09162b !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(39,244,229,.18) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}
[data-theme="cyber"] body.detail-open .detail-header .dh-word,
[data-theme="cyber"] body.detail-open .detail-body .grammar-section h3,
[data-theme="cyber"] body.detail-open .detail-body.detail-layout-contract .detail-section > h3,
[data-theme="cyber"] body.detail-open .detail-body .tts-speakable,
[data-theme="cyber"] body.detail-open .detail-body .form-variant-chip,
[data-theme="cyber"] body.detail-open .detail-body .numeral-form-variant {
  text-shadow: none !important;
  filter: none !important;
}
[data-theme="cyber"] body.detail-open .detail-body,
[data-theme="cyber"] body.detail-open .detail-body.detail-layout-contract {
  background: transparent !important;
  background-image: none !important;
  filter: none !important;
}
[data-theme="cyber"] body.detail-open .detail-meaning,
[data-theme="cyber"] body.detail-open .detail-note,
[data-theme="cyber"] body.detail-open .detail-frontmatter .detail-note,
[data-theme="cyber"] body.detail-open .detail-body .status-box,
[data-theme="cyber"] body.detail-open .detail-body .sense-overview .sense-block,
[data-theme="cyber"] body.detail-open .detail-body .mnemonic-line,
[data-theme="cyber"] body.detail-open .detail-body .grammar-section,
[data-theme="cyber"] body.detail-open .detail-body.detail-layout-contract .detail-section,
[data-theme="cyber"] body.detail-open .detail-body .grammar-table-wrap,
[data-theme="cyber"] body.detail-open .detail-body .example-item {
  background: #091122 !important;
  background-image: none !important;
  border-color: rgba(39,244,229,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  text-shadow: none !important;
}
[data-theme="cyber"] body.detail-open .detail-body .grammar-table th,
[data-theme="cyber"] body.detail-open .detail-body .grammar-table td {
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}
[data-theme="cyber"] body.detail-open .detail-body .grammar-table th {
  background: #0d1e37 !important;
}
[data-theme="cyber"] body.detail-open .detail-body .grammar-table td {
  background: #081224 !important;
}
[data-theme="cyber"] body.detail-open .detail-overlay.open > .detail-side-nav {
  animation: none !important;
  background: #081020 !important;
  background-image: none !important;
  border-color: rgba(39,244,229,.18) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.36) !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: auto !important;
}

/* Danger/Scriptorium detail: retain V9.9.11 stabilized surfaces. */
[data-theme="danger"] body.detail-open .detail-overlay.open {
  background: rgba(0,0,0,.84) !important;
}
[data-theme="danger"] body.detail-open .detail-modal {
  background: #0a0408 !important;
  background-image: linear-gradient(180deg, rgba(20,8,8,.98), rgba(12,6,6,.99)) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.50), 0 0 0 1px rgba(255,83,73,.26) !important;
}
[data-theme="scriptorium"] body.detail-open .detail-overlay.open {
  background: rgba(43, 25, 11, .46) !important;
}
[data-theme="scriptorium"] body.detail-open .detail-modal::before,
[data-theme="scriptorium"] body.detail-open .detail-modal::after {
  animation: none !important;
  filter: none !important;
  opacity: .18 !important;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  [data-theme="cyber"] body::before,
  [data-theme="cyber"] body::after {
    content: none !important;
    display: none !important;
  }
  [data-theme="danger"] body::before,
  [data-theme="danger"] body::after,
  [data-theme="scriptorium"] body::before,
  [data-theme="scriptorium"] body::after {
    animation: none !important;
    filter: none !important;
    will-change: auto !important;
  }
  [data-theme="cyber"] .detail-overlay.open,
  [data-theme="danger"] .detail-overlay.open,
  [data-theme="scriptorium"] .detail-overlay.open {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }
  [data-theme="cyber"] .detail-modal,
  [data-theme="danger"] .detail-modal,
  [data-theme="scriptorium"] .detail-modal {
    width: 100dvw !important;
    max-width: 100dvw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  [data-theme="cyber"] .word-card,
  [data-theme="danger"] .word-card,
  [data-theme="scriptorium"] .word-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  [data-theme="scriptorium"] .filter-shell::before,
  [data-theme="scriptorium"] .filter-shell::after,
  [data-theme="scriptorium"] .detail-modal::before,
  [data-theme="scriptorium"] .detail-modal::after {
    display: none !important;
    content: none !important;
  }
}