@import url('/static/css/fonts-local.css?v=20260322-fontsrc1');

:root {
            --indigo-600: #4f46e5;
            --emerald-500: #10b981;
            --rose-500: #ef4444;
            --safe-bottom: env(safe-area-inset-bottom, 0px);
            --app-vh: 1vh;
            --reading-font: var(--app-font-family);
        }
        body {
            font-family: var(--app-font-family);
            background:
                radial-gradient(1200px 500px at 10% -10%, rgba(99, 102, 241, 0.12), transparent),
                radial-gradient(900px 400px at 90% 0%, rgba(20, 184, 166, 0.08), transparent),
                #f8fafc;
            color: #1e293b;
            -webkit-tap-highlight-color: transparent;
            min-height: 100dvh;
        }

        .md-strong {
            font-weight: 700 !important;
            font-size: 1.06em;
            line-height: inherit;
            text-shadow:
                0.018em 0 currentColor,
                -0.018em 0 currentColor,
                0 0.018em currentColor,
                0 -0.018em currentColor;
        }
        @supports (-webkit-text-stroke: 0.3px currentColor) {
            .md-strong {
                -webkit-text-stroke: 0.3px currentColor;
                text-shadow: none;
            }
        }
        .md-em {
            font-style: italic !important;
            font-synthesis: style;
            display: inline-block;
            transform: skewX(-10deg);
            transform-origin: left center;
        }
        .md-u {
            text-decoration: underline;
            text-decoration-thickness: 0.08em;
            text-underline-offset: 0.12em;
        }
        .md-heiti {
            font-family: var(--font-family-heiti), "Noto Sans SC", "Microsoft YaHei", sans-serif !important;
            font-style: normal !important;
        }
        .md-heiti.md-heiti-strong {
            font-weight: 700 !important;
        }

        ::-webkit-scrollbar { width: 10px; height: 10px; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
        ::-webkit-scrollbar-track { background: transparent; }

        /* 统一下拉框样式（仿模式选择） */
        body:not(.admin-page) select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: 1px solid #e2e8f0;
            border-radius: 0.75rem;
            background-color: #f1f5f9;
            color: #475569;
            font-size: 0.875rem;
            font-weight: 600;
            line-height: 1.25rem;
            padding: 0.5rem 2rem 0.5rem 0.75rem;
            transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.65rem center;
            background-size: 14px 14px;
        }
        body:not(.admin-page) select:hover {
            background-color: #e2e8f0;
            border-color: #cbd5e1;
            color: #334155;
        }
        body:not(.admin-page) select:focus {
            outline: none;
            border-color: #a5b4fc;
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
        }
        body:not(.admin-page) select:disabled {
            opacity: 0.65;
            cursor: not-allowed;
        }
        body:not(.admin-page) select::-ms-expand {
            display: none;
        }
        @media (max-width: 768px) {
            body:not(.admin-page) select {
                width: 100%;
                min-height: 2.35rem;
                height: 2.35rem;
                box-sizing: border-box;
                font-size: 0.9375rem;
                line-height: 1.2;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                padding-right: 2rem !important;
                background-position: right 0.6rem center;
            }
            #question-report-type-wrap {
                position: relative;
            }
            #question-report-type-menu {
                position: absolute !important;
                top: calc(100% + 0.35rem) !important;
                left: 0 !important;
                right: 0 !important;
                bottom: auto !important;
                width: auto !important;
                min-width: 0 !important;
                max-width: none !important;
                margin-top: 0 !important;
                max-height: min(40vh, 16rem);
                overflow-y: auto;
                overscroll-behavior: contain;
                -webkit-overflow-scrolling: touch;
                z-index: 260 !important;
            }
            #question-report-type-wrap.question-report-type-wrap-up #question-report-type-menu {
                top: auto !important;
                bottom: calc(100% + 0.35rem) !important;
            }
        }

        /* 题干容器 */
        .question-head-grid {
            min-width: 0;
        }
        .question-content-col {
            min-width: 0;
        }
        .question-head-title {
            min-width: 0;
            text-align: left;
            margin: 0;
            font-family: var(--reading-font);
            font-weight: 400;
        }
        .question-title-wrap {
            min-width: 0;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.85rem;
            flex-wrap: wrap;
        }
        .question-meta-tags {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 0.5rem;
            max-width: min(48vw, 36rem);
        }
        .question-meta-chip {
            display: inline-flex;
            align-items: center;
            max-width: 100%;
            border-radius: 0.6rem;
            padding: 0.22rem 0.62rem;
            font-size: 0.85rem;
            line-height: 1.2;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .question-type-chip {
            color: #6b7a90;
            background: #edf1f6;
            border: 1px solid #dfe7f1;
        }
        .question-knowledge-chip {
            color: #4f46e5;
            background: #e9ecff;
            border: 1px solid #d9deff;
        }

        /* --- 响应式布局核心 --- */
        #sidebar { 
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
            z-index: 100;
        }
        
        /* 手机端 (Mobile): 全屏抽屉样式 */
        @media (max-width: 768px) {
            #sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 85%; transform: translateX(-100%); background: white; }
            #sidebar.active { transform: translateX(0); box-shadow: 20px 0 50px rgba(0,0,0,0.1); }
            .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); z-index: 90; backdrop-filter: blur(2px); }
            .sidebar-overlay.active { display: block; }
            .question-title-wrap {
                gap: 0.55rem;
            }
            .question-meta-tags {
                width: 100%;
                justify-content: flex-start;
            }
            .question-meta-chip {
                max-width: 100%;
            }
        }

        /* 手机端顶部工具栏：均匀分布且支持横向拖动 */
        @media (max-width: 768px) {
            body.quiz-session-active nav {
                display: grid !important;
                grid-template-columns: auto minmax(0, 1fr);
                gap: 0.5rem;
                padding-left: 0.5rem !important;
                padding-right: 0.5rem !important;
            }
            body.quiz-session-active #top-brand {
                min-width: max-content;
                gap: 0.35rem !important;
            }
            body.quiz-session-active #top-actions {
                min-width: 0;
                display: flex !important;
                align-items: center;
                justify-content: flex-start;
                gap: 0.45rem;
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-x: contain;
                touch-action: auto;
                scrollbar-width: none;
                -ms-overflow-style: none;
                padding-bottom: 2px;
                scroll-behavior: smooth;
                cursor: grab;
            }
            body.quiz-session-active #top-actions.is-dragging {
                cursor: grabbing;
                user-select: none;
            }
            body.quiz-session-active #top-actions::-webkit-scrollbar { display: none; }
            body.quiz-session-active #top-actions > * {
                flex: 0 0 auto;
                min-width: 2.25rem;
            }
            body.quiz-session-active #top-actions button,
            body.quiz-session-active #top-actions a {
                touch-action: manipulation;
            }
            /* 下拉面板改为 fixed，避免被横向滚动容器裁切导致“点击无反应” */
            body.quiz-session-active #top-actions #font-size-wrap,
            body.quiz-session-active #top-actions #mode-switch-wrap {
                position: static !important;
            }
            body.quiz-session-active #top-actions #font-size-panel,
            body.quiz-session-active #top-actions #mode-switch-menu {
                position: fixed !important;
                top: calc(env(safe-area-inset-top, 0px) + 4.25rem) !important;
                right: 0.5rem !important;
                left: auto !important;
                z-index: 160 !important;
            }
            body.quiz-session-active #top-actions #font-size-panel {
                width: min(16rem, calc(100vw - 1rem)) !important;
            }
            body.quiz-session-active #top-actions #font-size-btn,
            body.quiz-session-active #top-actions #mode-switch-btn {
                width: auto;
                justify-content: center;
                padding-left: 0.5rem;
                padding-right: 0.5rem;
            }
            body.quiz-session-active.ios-phone #top-actions {
                touch-action: auto;
                cursor: auto;
            }
            body.quiz-session-active.ios-phone #top-actions.is-dragging {
                cursor: auto;
                user-select: auto;
            }
        }

        /* 答题卡网格点 (红绿逻辑) */
        .n-item { 
            width: calc(20% - 8px); min-width: 40px; aspect-ratio: 1;
            display: flex; align-items: center; justify-content: center; 
            margin: 4px; border-radius: 12px; font-size: 14px; font-weight: 800; 
            background: #f1f5f9; color: #94a3b8; transition: all 0.2s;
        }
        .n-group {
            margin-bottom: 0.35rem;
        }
        .n-group-title {
            font-size: 11px;
            font-weight: 800;
            color: #94a3b8;
            letter-spacing: 0.06em;
            padding: 0 4px;
            margin-bottom: 2px;
        }
        .n-group-grid {
            display: flex;
            flex-wrap: wrap;
        }
        .n-curr { outline: 2px solid var(--indigo-600); outline-offset: 2px; color: var(--indigo-600); background: #eff6ff; }
        .n-done { background: #e2e8f0; color: #475569; }
        /* 复盘态颜色 */
        .n-right { background: #dcfce7 !important; color: #15803d !important; }
        .n-wrong { background: #fee2e2 !important; color: #b91c1c !important; }
        .n-corrected { background: #fef3c7 !important; color: #b45309 !important; }

        /* 选项卡片交互 */
        body.quiz-session-active #main-view {
            max-width: min(92vw, 1120px);
            margin: 0 auto;
        }
        body.quiz-session-active .quiz-panel {
            background: #ffffff !important;
            border: 1px solid #d8e1ec !important;
            border-radius: 1rem !important;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
        }
        body.quiz-session-active .analysis-card {
            background: #f8fafc !important;
            border: 1px solid #d8e1ec !important;
            border-left-width: 1px !important;
            border-left-color: #cbd5e1 !important;
            border-radius: 0.75rem !important;
            box-shadow: none !important;
            text-align: left;
        }
        body.quiz-session-active .analysis-card * {
            text-align: left;
        }
        body.quiz-session-active .option-card {
            border: 1px solid #d3dce8;
            background: #ffffff;
            border-radius: 0.5rem !important;
            cursor: pointer;
            transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
            justify-content: flex-start;
            align-items: flex-start;
            text-align: left;
        }
        body.quiz-session-active .option-card:not(.multi-option-row) {
            align-items: center;
            display: grid !important;
            grid-template-columns: auto minmax(0, 1fr);
            column-gap: 0.72em;
        }
        body.quiz-session-active .option-card:not(.multi-option-row) .option-tag-badge {
            align-self: center;
        }
        body.quiz-session-active .option-card:not(.multi-option-row) .option-text {
            align-self: center;
        }
        body.quiz-session-active .option-input-control {
            margin-top: 0.22rem;
            flex-shrink: 0;
            accent-color: #4f46e5 !important;
        }
        body.quiz-session-active .option-input-control:disabled {
            opacity: 1;
            cursor: default;
        }
        body.quiz-session-active .option-readonly {
            pointer-events: none;
        }
        body.quiz-session-active .quiz-answer-input {
            font-size: 16px;
            line-height: 1.45;
            touch-action: manipulation;
        }
        @media (min-width: 1024px) {
            body.quiz-session-active .quiz-answer-input {
                font-size: 15px;
                line-height: 1.5;
            }
        }
        @media (max-width: 768px) {
            body.quiz-session-active .quiz-answer-input {
                min-height: 2.7rem;
                padding-top: 0.68rem !important;
                padding-bottom: 0.68rem !important;
            }
            body.quiz-session-active textarea.quiz-answer-input {
                min-height: 9rem;
            }
        }
        @media (min-width: 1024px) {
            body.quiz-session-active .option-card:hover {
                border-color: #b8c5d7;
                box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
            }
        }
        .question-option-label {
            display: inline-flex;
            align-items: center;
            min-width: auto;
            color: #29446b;
            font-size: 1.03rem;
            font-weight: 400;
            letter-spacing: 0.01em;
            text-align: left;
            font-family: var(--reading-font);
        }
        .question-option-label::before {
            content: "";
            width: 1rem;
            height: 1rem;
            border-radius: 999px;
            border: 2px solid #7f90a8;
            margin-right: 0.75rem;
            flex-shrink: 0;
            background: #fff;
        }
        .option-card .option-text {
            color: #213e66;
            font-weight: 400;
            text-align: left;
            font-family: var(--reading-font);
            display: block;
            line-height: 1.32;
        }
        .option-tag-badge {
            width: auto;
            height: auto;
            min-width: 1.9em;
            padding: 0.2em 0.5em;
            margin-right: 0 !important;
            margin-top: 0;
            align-self: baseline;
            line-height: 1.32;
            transform: none;
        }
        .option-selected {
            border-color: #768dd4 !important;
            background: #edf3ff !important;
        }
        .option-selected .question-option-label::before {
            border-color: #4f46e5;
            box-shadow: inset 0 0 0 4px #4f46e5;
        }
        .opt-wrong {
            border-color: #f2b3be !important;
            background: #fff2f4 !important;
            color: #9f1239 !important;
        }
        .opt-right {
            border-color: #9ad8b4 !important;
            background: #ecfdf4 !important;
            color: #065f46 !important;
        }
        .opt-missed {
            border-color: #f6d38d !important;
            background: #fff9eb !important;
            color: #92400e !important;
        }
        .opt-right .option-text,
        .opt-right .question-option-label { color: #065f46 !important; }
        .opt-wrong .option-text,
        .opt-wrong .question-option-label { color: #9f1239 !important; }
        .opt-missed .option-text,
        .opt-missed .question-option-label { color: #92400e !important; }
        .opt-right .question-option-label::before {
            border-color: #059669;
            box-shadow: inset 0 0 0 4px #10b981;
        }
        .opt-wrong .question-option-label::before {
            border-color: #e11d48;
            box-shadow: inset 0 0 0 4px #fb7185;
        }
        body.quiz-session-active .option-card.multi-option-row {
            display: grid !important;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center !important;
            column-gap: 0.72em;
        }
        body.quiz-session-active .option-card.multi-option-row .option-tag-badge {
            padding: 0.2em 0.5em;
            min-width: 1.9em;
            line-height: 1.32;
            align-self: center;
        }
        body.quiz-session-active .option-card.multi-option-row .option-text {
            line-height: 1.32;
            align-self: center;
        }
        .multi-option-row .question-option-label::before { display: none; }
        .app-shell { height: calc(var(--app-vh) * 100 - 4rem); min-height: calc(100dvh - 4rem); }
        .pb-safe { padding-bottom: max(0.75rem, var(--safe-bottom)); }

        .quiz-library-card,
        .mode-entry {
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(148, 163, 184, 0.18);
            box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
            transition: all 0.2s;
        }
        .home-shell {
            max-width: 88rem;
            margin: 0 auto;
        }
        #main-view.home-layout {
            max-width: min(96vw, 1520px) !important;
            padding-top: 0 !important;
        }
        /* 首页首屏与顶部 nav 交叉贴合，消除视觉缝隙 */
        #main-view.home-layout > .home-shell > .home-hero {
            margin-top: -0.65rem;
        }
        @media (min-width: 1024px) {
            #main-view.home-layout {
                padding-left: clamp(1.25rem, 2.2vw, 2.6rem) !important;
                padding-right: clamp(1.25rem, 2.2vw, 2.6rem) !important;
            }
            #main-view.home-layout > .home-shell > .home-hero {
                margin-top: -0.8rem;
            }
        }
        .home-hero {
            position: relative;
            overflow: hidden;
            border-radius: 1.8rem;
            padding: clamp(1.2rem, 2.6vw, 2rem);
            margin-bottom: 1rem;
            background:
                radial-gradient(120% 160% at 0% 0%, rgba(79, 70, 229, 0.22), transparent 52%),
                radial-gradient(120% 160% at 100% 0%, rgba(20, 184, 166, 0.18), transparent 45%),
                rgba(255, 255, 255, 0.86);
            border: 1px solid rgba(99, 102, 241, 0.2);
            box-shadow: 0 18px 38px rgba(30, 41, 59, 0.08);
        }
        .home-hero::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(130deg, rgba(255, 255, 255, 0.5), transparent 42%, rgba(255, 255, 255, 0.16));
        }
        .home-hero-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.35rem 0.65rem;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.06);
            color: #334155;
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .home-hero-title {
            margin-top: 0.7rem;
            font-size: clamp(1.45rem, 3.2vw, 2.25rem);
            line-height: 1.15;
            font-weight: 900;
            letter-spacing: -0.03em;
            color: #0f172a;
        }
        .home-hero-subtitle {
            margin-top: 0.65rem;
            max-width: 54rem;
            font-size: 0.9rem;
            line-height: 1.55;
            color: #475569;
        }
        .home-stats {
            margin-top: 1rem;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.6rem;
        }
        .home-search-wrap {
            margin-top: 0.95rem;
            position: relative;
            z-index: 1;
        }
        .home-search-box {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            border-radius: 999px;
            padding: 0 0.55rem 0 0.7rem;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(148, 163, 184, 0.34);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
        }
        .home-search-box:focus-within {
            border-color: rgba(79, 70, 229, 0.55);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
        }
        .home-search-icon {
            color: #64748b;
            flex: 0 0 auto;
        }
        .home-search-input {
            flex: 1;
            min-width: 0;
            height: 2.45rem;
            border: 0;
            outline: 0;
            background: transparent;
            font-size: 0.86rem;
            color: #0f172a;
        }
        .home-search-input::placeholder {
            color: #94a3b8;
        }
        .home-search-clear {
            border: 0;
            outline: 0;
            border-radius: 999px;
            padding: 0.35rem 0.6rem;
            background: rgba(79, 70, 229, 0.1);
            color: #4f46e5;
            font-size: 0.72rem;
            font-weight: 800;
            cursor: pointer;
        }
        .home-search-clear:hover {
            background: rgba(79, 70, 229, 0.18);
        }
        .home-search-meta {
            margin-top: 0.42rem;
            color: #64748b;
            font-size: 0.72rem;
            font-weight: 700;
        }
        .home-stat-card {
            border-radius: 1rem;
            padding: 0.72rem 0.85rem;
            background: rgba(248, 250, 252, 0.9);
            border: 1px solid rgba(148, 163, 184, 0.25);
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            min-width: 0;
        }
        .home-stat-card-wide { grid-column: span 1; }
        .home-stat-number {
            display: block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #0f172a;
            font-size: 1.2rem;
            line-height: 1.2;
            font-weight: 900;
            letter-spacing: -0.01em;
        }
        .home-stat-card-wide .home-stat-number {
            font-size: 0.96rem;
            letter-spacing: 0;
        }
        .home-stat-label {
            color: #64748b;
            font-size: 0.72rem;
            font-weight: 700;
        }
        .library-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.9rem;
        }
        .library-grid.home-library-grid {
            grid-template-columns: 1fr;
            gap: 0.9rem;
        }
        .quiz-library-card {
            position: relative;
            padding: 1.1rem;
            border-radius: 1.3rem;
            min-width: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            min-height: 215px;
            border-color: rgba(148, 163, 184, 0.2) !important;
        }
        .quiz-library-card::before {
            content: "";
            position: absolute;
            width: 110px;
            height: 110px;
            right: -32px;
            top: -32px;
            border-radius: 999px;
            background: var(--card-accent-soft, rgba(79, 70, 229, 0.14));
            pointer-events: none;
            transition: transform 0.25s ease;
        }
        .quiz-library-card:hover::before {
            transform: scale(1.08);
        }
        .quiz-library-icon {
            font-size: 2rem;
            line-height: 1;
        }
        .quiz-library-head,
        .quiz-library-title,
        .quiz-library-description,
        .quiz-library-footer {
            position: relative;
            z-index: 1;
        }
        .quiz-library-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
        }
        .quiz-library-head-right {
            display: inline-flex;
            align-items: center;
            gap: 0.32rem;
            min-width: 0;
        }
        .quiz-flag-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.4rem;
            height: 1.4rem;
            border-radius: 999px;
            font-size: 0.78rem;
            line-height: 1;
            border: 1px solid transparent;
            background: rgba(148, 163, 184, 0.12);
        }
        .quiz-flag-test {
            border-color: rgba(20, 184, 166, 0.38);
            background: rgba(20, 184, 166, 0.16);
        }
        .quiz-flag-password {
            border-color: rgba(245, 158, 11, 0.4);
            background: rgba(251, 191, 36, 0.2);
        }
        .quiz-count-pill {
            display: inline-flex;
            align-items: center;
            padding: 0.26rem 0.6rem;
            border-radius: 999px;
            font-size: 0.7rem;
            font-weight: 800;
            color: var(--card-accent, #4f46e5);
            background: var(--card-pill-bg, rgba(79, 70, 229, 0.12));
            border: 1px solid var(--card-pill-border, rgba(79, 70, 229, 0.22));
            white-space: nowrap;
        }
        .quiz-library-description {
            color: #475569;
            font-size: 0.82rem;
            line-height: 1.45;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .quiz-library-footer {
            margin-top: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.6rem;
        }
        .quiz-library-updated {
            display: inline-flex;
            align-items: center;
            gap: 0.24rem;
            min-width: 0;
            color: #64748b;
            font-size: 0.72rem;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .quiz-library-enter {
            display: inline-flex;
            align-items: center;
            gap: 0.22rem;
            color: var(--card-accent, #4f46e5);
            font-size: 0.74rem;
            font-weight: 900;
            white-space: nowrap;
        }
        .home-search-empty {
            margin-top: 0.95rem;
            border-radius: 1rem;
            border: 1px dashed rgba(148, 163, 184, 0.45);
            background: rgba(248, 250, 252, 0.8);
            padding: 1rem;
            text-align: center;
        }
        .home-search-empty-title {
            color: #334155;
            font-size: 0.95rem;
            font-weight: 900;
            letter-spacing: 0.02em;
        }
        .home-search-empty-sub {
            margin-top: 0.35rem;
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 600;
        }
        .lib-accent-1 { --card-accent: #4f46e5; --card-accent-soft: rgba(99, 102, 241, 0.2); --card-pill-bg: rgba(99, 102, 241, 0.12); --card-pill-border: rgba(99, 102, 241, 0.24); }
        .lib-accent-2 { --card-accent: #0f766e; --card-accent-soft: rgba(20, 184, 166, 0.18); --card-pill-bg: rgba(20, 184, 166, 0.12); --card-pill-border: rgba(20, 184, 166, 0.25); }
        .lib-accent-3 { --card-accent: #c2410c; --card-accent-soft: rgba(251, 146, 60, 0.2); --card-pill-bg: rgba(251, 146, 60, 0.12); --card-pill-border: rgba(251, 146, 60, 0.25); }
        .lib-accent-4 { --card-accent: #0e7490; --card-accent-soft: rgba(6, 182, 212, 0.18); --card-pill-bg: rgba(6, 182, 212, 0.12); --card-pill-border: rgba(6, 182, 212, 0.25); }
        .lib-accent-5 { --card-accent: #be185d; --card-accent-soft: rgba(236, 72, 153, 0.18); --card-pill-bg: rgba(236, 72, 153, 0.12); --card-pill-border: rgba(236, 72, 153, 0.25); }
        .lib-accent-6 { --card-accent: #475569; --card-accent-soft: rgba(100, 116, 139, 0.18); --card-pill-bg: rgba(100, 116, 139, 0.12); --card-pill-border: rgba(100, 116, 139, 0.25); }
        .quiz-library-title,
        .quiz-library-meta {
            display: block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        @media (max-width: 680px) {
            .home-stats {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .home-stat-card-wide {
                grid-column: span 2;
            }
        }
        @media (min-width: 560px) {
            .library-grid.home-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (min-width: 1080px) {
            .library-grid.home-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }
        @media (min-width: 1460px) {
            .library-grid.home-library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        }
        @media (min-width: 640px) {
            .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
        }
        @media (min-width: 1024px) {
            .library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        }

        @media (min-width: 1024px) {
            .quiz-library-card:hover,
            .mode-entry:hover {
                transform: translateY(-2px);
                box-shadow: 0 14px 34px rgba(15, 23, 42, 0.11);
            }
        }

        @media (min-width: 768px) and (max-width: 1180px) and (orientation: landscape) {
            body.tablet-landscape .app-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); }
            body.tablet-landscape #sidebar {
                position: relative;
                transform: none !important;
                width: 280px;
                height: auto;
                box-shadow: none !important;
            }
            body.tablet-landscape #main-scroll {
                grid-column: 2;
                min-width: 0;
            }
            body.tablet-landscape #sidebar.hidden + #main-scroll {
                grid-column: 1 / -1;
            }
            body.tablet-landscape #overlay { display: none !important; }
            body.tablet-landscape #sidebar-trigger { display: none !important; }
        }

        @media (max-width: 360px) {
            nav { height: 3.5rem !important; }
            .app-shell { height: calc(var(--app-vh) * 100 - 3.5rem); min-height: calc(100dvh - 3.5rem); }
            #main-view { padding: 0.75rem !important; }
            #main-view.home-layout { padding-top: 0 !important; }
            #sidebar { width: 82vw !important; }
            .quiz-library-card, .mode-entry { border-radius: 1.25rem !important; padding: 1rem !important; }
            .home-hero { border-radius: 1.35rem !important; padding: 1rem !important; }
            .home-stats { grid-template-columns: 1fr; }
            .home-stat-card-wide .home-stat-number { font-size: 0.86rem; }
            .n-item { min-width: 34px; font-size: 12px; margin: 3px; border-radius: 10px; }
            #confirm-ok-btn, #confirm-cancel-btn, #submit-box button { font-weight: 700; }
            #exam-timer { font-size: 12px !important; padding: 0.3rem 0.55rem !important; }
        }

        body.theme-dark {
            background:
                radial-gradient(1200px 520px at 10% -10%, rgba(79, 70, 229, 0.20), transparent),
                radial-gradient(900px 420px at 90% 0%, rgba(20, 184, 166, 0.16), transparent),
                #020617;
            color: #e2e8f0;
        }
        body.theme-dark nav {
            background: rgba(2, 6, 23, 0.78);
            border-color: rgba(51, 65, 85, 0.7);
        }
        body.theme-dark #theme-toggle,
        body.theme-dark #home-refresh-btn,
        body.theme-dark #font-size-btn,
        body.theme-dark #nav-mode-toggle,
        body.theme-dark #mode-switch-btn,
        body.theme-dark a[href="/admin"] {
            background: rgba(30, 41, 59, 0.92) !important;
            border-color: rgba(71, 85, 105, 0.8) !important;
            color: #cbd5e1 !important;
        }
        body.theme-dark #theme-toggle:hover,
        body.theme-dark #home-refresh-btn:hover,
        body.theme-dark #font-size-btn:hover,
        body.theme-dark #nav-mode-toggle:hover,
        body.theme-dark #mode-switch-btn:hover,
        body.theme-dark a[href="/admin"]:hover {
            background: rgba(51, 65, 85, 0.98) !important;
            color: #f8fafc !important;
        }
        body.theme-dark #font-size-panel {
            background: rgba(15, 23, 42, 0.96) !important;
            border-color: rgba(71, 85, 105, 0.8) !important;
        }
        body.theme-dark #font-size-panel .text-slate-500 { color: #cbd5e1 !important; }
        body.theme-dark #font-size-panel .text-slate-400 { color: #94a3b8 !important; }
        body.theme-dark #font-size-reset {
            background: rgba(30, 41, 59, 0.88) !important;
            color: #cbd5e1 !important;
        }
        body.theme-dark #font-family-menu-btn {
            background: rgba(30, 41, 59, 0.88) !important;
            border-color: rgba(71, 85, 105, 0.85) !important;
            color: #e2e8f0 !important;
        }
        body.theme-dark #font-family-menu-btn:focus {
            border-color: #818cf8 !important;
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.28) !important;
        }
        body.theme-dark #font-family-menu-btn:disabled {
            background: rgba(30, 41, 59, 0.62) !important;
            color: #94a3b8 !important;
            border-color: rgba(71, 85, 105, 0.58) !important;
        }
        body.theme-dark #question-font-size {
            accent-color: #818cf8;
        }
        body.theme-dark #mode-switch-menu,
        body.theme-dark #font-family-menu {
            background: rgba(15, 23, 42, 0.96) !important;
            border-color: rgba(71, 85, 105, 0.8) !important;
        }
        body.theme-dark:not(.admin-page) select {
            background-color: rgba(30, 41, 59, 0.92) !important;
            border-color: rgba(71, 85, 105, 0.82) !important;
            color: #cbd5e1 !important;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        }
        body.theme-dark:not(.admin-page) select:hover {
            background-color: rgba(51, 65, 85, 0.96) !important;
            color: #f8fafc !important;
        }
        body.theme-dark:not(.admin-page) select:focus {
            border-color: #818cf8 !important;
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.28) !important;
        }
        body.theme-dark .mode-switch-item,
        body.theme-dark .font-family-menu-item {
            color: #cbd5e1 !important;
        }
        body.theme-dark .mode-switch-item:hover,
        body.theme-dark .font-family-menu-item:hover {
            background: rgba(51, 65, 85, 0.9) !important;
            color: #f8fafc !important;
        }
        body.theme-dark #exam-timer {
            background: rgba(127, 29, 29, 0.22) !important;
            border-color: rgba(190, 24, 93, 0.35) !important;
            color: #fda4af !important;
        }
        body.theme-dark #sidebar {
            background: rgba(2, 6, 23, 0.88);
            border-color: rgba(51, 65, 85, 0.8);
        }
        body.theme-dark #submit-box {
            background: rgba(15, 23, 42, 0.9);
            border-color: rgba(51, 65, 85, 0.8);
        }
        body.theme-dark main {
            background: linear-gradient(135deg, rgba(2, 6, 23, 0.98), rgba(15, 23, 42, 0.95));
        }
        body.theme-dark .quiz-library-card,
        body.theme-dark .mode-entry,
        body.theme-dark .library-intro,
        body.theme-dark .quiz-panel,
        body.theme-dark .result-panel,
        body.theme-dark .modal-card {
            background: rgba(15, 23, 42, 0.88) !important;
            border-color: rgba(71, 85, 105, 0.75) !important;
            color: #e2e8f0 !important;
            box-shadow: 0 12px 32px rgba(2, 6, 23, 0.45);
        }
        body.theme-dark .home-hero {
            background:
                radial-gradient(120% 160% at 0% 0%, rgba(99, 102, 241, 0.25), transparent 50%),
                radial-gradient(120% 160% at 100% 0%, rgba(20, 184, 166, 0.2), transparent 45%),
                rgba(15, 23, 42, 0.78);
            border-color: rgba(99, 102, 241, 0.38);
        }
        body.theme-dark .home-hero::after {
            background: linear-gradient(130deg, rgba(148, 163, 184, 0.07), transparent 42%, rgba(148, 163, 184, 0.06));
        }
        body.theme-dark .home-hero-badge {
            background: rgba(30, 41, 59, 0.82);
            color: #cbd5e1;
        }
        body.theme-dark .home-hero-title { color: #f8fafc; }
        body.theme-dark .home-hero-subtitle { color: #94a3b8; }
        body.theme-dark .home-stat-card {
            background: rgba(30, 41, 59, 0.85);
            border-color: rgba(71, 85, 105, 0.75);
        }
        body.theme-dark .home-stat-number { color: #f8fafc; }
        body.theme-dark .home-stat-label { color: #94a3b8; }
        body.theme-dark .home-search-box {
            background: rgba(30, 41, 59, 0.82);
            border-color: rgba(71, 85, 105, 0.78);
            box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.08);
        }
        body.theme-dark .home-search-box:focus-within {
            border-color: rgba(129, 140, 248, 0.58);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
        }
        body.theme-dark .home-search-icon { color: #94a3b8; }
        body.theme-dark .home-search-input {
            color: #f8fafc;
        }
        body.theme-dark .home-search-input::placeholder {
            color: #64748b;
        }
        body.theme-dark .home-search-clear {
            background: rgba(99, 102, 241, 0.2);
            color: #c7d2fe;
        }
        body.theme-dark .home-search-clear:hover {
            background: rgba(99, 102, 241, 0.3);
        }
        body.theme-dark .home-search-meta {
            color: #94a3b8;
        }
        body.theme-dark .quiz-library-description { color: #94a3b8; }
        body.theme-dark .quiz-library-updated { color: #94a3b8; }
        body.theme-dark .quiz-count-pill {
            border-color: rgba(148, 163, 184, 0.28);
        }
        body.theme-dark .quiz-flag-test {
            border-color: rgba(45, 212, 191, 0.55);
            background: rgba(15, 118, 110, 0.34);
        }
        body.theme-dark .quiz-flag-password {
            border-color: rgba(245, 158, 11, 0.55);
            background: rgba(180, 83, 9, 0.34);
        }
        body.theme-dark .home-search-empty {
            background: rgba(30, 41, 59, 0.65);
            border-color: rgba(71, 85, 105, 0.72);
        }
        body.theme-dark .home-search-empty-title {
            color: #e2e8f0;
        }
        body.theme-dark .home-search-empty-sub {
            color: #94a3b8;
        }
        body.theme-dark #main-view h2,
        body.theme-dark #confirm-title { color: #f8fafc !important; }
        body.theme-dark #main-view p,
        body.theme-dark #confirm-message,
        body.theme-dark #nav-title { color: #94a3b8 !important; }
        body.theme-dark #main-view .text-indigo-600 { color: #a5b4fc !important; }
        body.theme-dark #main-view .text-rose-600 { color: #fda4af !important; }
        body.theme-dark #main-view .text-rose-300 { color: #fecdd3 !important; }
        body.theme-dark #main-view .text-amber-600 { color: #fcd34d !important; }
        body.theme-dark .option-card {
            background: rgba(15, 23, 42, 0.95);
            border-color: rgba(71, 85, 105, 0.7);
            color: #cbd5e1;
        }
        body.theme-dark .multi-option-checkbox {
            accent-color: #818cf8;
        }
        body.theme-dark .option-input-control {
            accent-color: #818cf8;
        }
        body.theme-dark .option-card .question-option-label {
            color: #cbd5e1 !important;
        }
        body.theme-dark .option-card .question-option-label::before {
            background: transparent;
            border-color: rgba(148, 163, 184, 0.72);
        }
        body.theme-dark .option-card .option-text {
            color: #cbd5e1 !important;
        }
        body.theme-dark .opt-right .option-text,
        body.theme-dark .opt-right .question-option-label {
            color: #a7f3d0 !important;
        }
        body.theme-dark .opt-wrong .option-text,
        body.theme-dark .opt-wrong .question-option-label {
            color: #fecdd3 !important;
        }
        body.theme-dark .opt-missed .option-text,
        body.theme-dark .opt-missed .question-option-label {
            color: #fcd34d !important;
        }
        body.theme-dark .question-type-chip {
            background: rgba(30, 41, 59, 0.9);
            border-color: rgba(71, 85, 105, 0.82);
            color: #94a3b8;
        }
        body.theme-dark .question-knowledge-chip {
            background: rgba(67, 56, 202, 0.26);
            border-color: rgba(129, 140, 248, 0.5);
            color: #c7d2fe;
        }
        body.theme-dark .analysis-card {
            background: rgba(30, 41, 59, 0.72) !important;
            border-left-color: rgba(129, 140, 248, 0.65) !important;
        }
        body.theme-dark.quiz-session-active .quiz-panel {
            background: rgba(15, 23, 42, 0.94) !important;
            border-color: rgba(71, 85, 105, 0.78) !important;
            box-shadow: 0 1px 2px rgba(2, 6, 23, 0.48) !important;
        }
        body.theme-dark.quiz-session-active .analysis-card {
            background: rgba(30, 41, 59, 0.58) !important;
            border-color: rgba(71, 85, 105, 0.78) !important;
            border-left-width: 1px !important;
            border-left-color: rgba(71, 85, 105, 0.78) !important;
            box-shadow: none !important;
        }
        body.theme-dark .quiz-answer-input {
            background: rgba(15, 23, 42, 0.95) !important;
            border-color: rgba(71, 85, 105, 0.82) !important;
            color: #e2e8f0 !important;
        }
        body.theme-dark .quiz-answer-input::placeholder {
            color: #64748b !important;
        }
        body.theme-dark .option-selected {
            border-color: rgba(129, 140, 248, 0.68) !important;
            background: rgba(79, 70, 229, 0.18) !important;
            color: #c7d2fe !important;
        }
        body.theme-dark .opt-right {
            border-color: rgba(16, 185, 129, 0.5) !important;
            background: rgba(16, 185, 129, 0.14) !important;
            color: #a7f3d0 !important;
        }
        body.theme-dark .opt-missed {
            border-color: rgba(245, 158, 11, 0.5) !important;
            background: rgba(245, 158, 11, 0.16) !important;
            color: #fcd34d !important;
        }
        body.theme-dark .opt-wrong {
            border-color: rgba(244, 63, 94, 0.45) !important;
            background: rgba(244, 63, 94, 0.14) !important;
            color: #fecdd3 !important;
        }
        body.theme-dark .n-item { background: #1e293b; color: #64748b; }
        body.theme-dark .n-group-title { color: #64748b; }
        body.theme-dark .n-done { background: #334155; color: #cbd5e1; }
        body.theme-dark .n-curr { background: #1e293b; color: #a5b4fc; outline-color: #818cf8; }
        body.theme-dark .n-right { background: rgba(16, 185, 129, 0.24) !important; color: #86efac !important; }
        body.theme-dark .n-wrong { background: rgba(244, 63, 94, 0.24) !important; color: #fda4af !important; }
        body.theme-dark .n-corrected { background: rgba(245, 158, 11, 0.24) !important; color: #fcd34d !important; }
        body.theme-dark #time-modal, body.theme-dark #confirm-modal, body.theme-dark #library-password-modal, body.theme-dark #question-report-modal { background: rgba(2, 6, 23, 0.68); }
        body.theme-dark #time-modal .modal-card {
            border: 1px solid rgba(71, 85, 105, 0.82);
        }
        body.theme-dark #library-password-modal .modal-card {
            border: 1px solid rgba(71, 85, 105, 0.82);
        }
        body.theme-dark #library-password-modal .library-password-field {
            background: rgba(15, 23, 42, 0.95) !important;
            border-color: rgba(71, 85, 105, 0.82) !important;
            color: #e2e8f0 !important;
        }
        body.theme-dark #library-password-modal .library-password-field::placeholder {
            color: #64748b !important;
        }
        body.theme-dark #library-password-modal .text-slate-500 {
            color: #94a3b8 !important;
        }
        body.theme-dark #library-password-toggle-btn,
        body.theme-dark #library-password-cancel-btn {
            background: rgba(30, 41, 59, 0.82) !important;
            color: #cbd5e1 !important;
        }
        body.theme-dark #library-password-submit-btn {
            background: #4f46e5 !important;
            color: #eef2ff !important;
        }
        body.theme-dark #question-report-modal .modal-card {
            border: 1px solid rgba(71, 85, 105, 0.82);
        }
        body.theme-dark #question-report-modal .report-field {
            background: rgba(15, 23, 42, 0.95) !important;
            border-color: rgba(71, 85, 105, 0.82) !important;
            color: #e2e8f0 !important;
        }
        body.theme-dark #question-report-modal .report-field::placeholder {
            color: #64748b !important;
        }
        body.theme-dark #question-report-modal .text-slate-500 {
            color: #94a3b8 !important;
        }
        body.theme-dark #question-report-close-btn,
        body.theme-dark #question-report-cancel-btn {
            background: rgba(30, 41, 59, 0.82) !important;
            color: #cbd5e1 !important;
        }
        body.theme-dark #question-report-submit-btn {
            background: #e11d48 !important;
            color: #fff1f2 !important;
        }
        body.theme-dark #custom-min {
            background: rgba(15, 23, 42, 0.95) !important;
            border-color: rgba(71, 85, 105, 0.88) !important;
            color: #f8fafc !important;
        }
        body.theme-dark #custom-min:focus {
            border-color: #818cf8 !important;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.28);
        }
        body.theme-dark #time-modal .text-slate-300 {
            color: #94a3b8 !important;
        }
        body.theme-dark #time-modal button[onclick="closeTimeModal()"] {
            color: #cbd5e1 !important;
            background: rgba(30, 41, 59, 0.82);
            border-radius: 1rem;
        }
        body.theme-dark #time-modal button[onclick="confirmStartExam()"] {
            background: #4f46e5 !important;
            color: #eef2ff !important;
        }
        body.theme-dark #main-view .bg-white,
        body.theme-dark #main-view .bg-white\/95,
        body.theme-dark #main-view .bg-slate-50,
        body.theme-dark #main-view .bg-slate-100 {
            background: rgba(30, 41, 59, 0.82) !important;
            color: #e2e8f0 !important;
        }
        body.theme-dark #main-view .bg-indigo-50 {
            background: rgba(79, 70, 229, 0.2) !important;
            color: #c7d2fe !important;
        }
        body.theme-dark #main-view .bg-slate-900 {
            background: rgba(51, 65, 85, 0.95) !important;
            color: #f8fafc !important;
        }
        body.theme-dark #main-view .bg-indigo-600 {
            background: #4338ca !important;
            color: #eef2ff !important;
        }
        body.theme-dark {
            color-scheme: dark;
            scrollbar-color: rgba(71, 85, 105, 0.9) rgba(2, 6, 23, 0.6);
        }
        body.theme-dark ::-webkit-scrollbar-thumb { background: rgba(71, 85, 105, 0.9); }
        body.theme-dark ::-webkit-scrollbar-track { background: rgba(2, 6, 23, 0.6); }
        body.theme-dark .text-slate-900,
        body.theme-dark .text-slate-800,
        body.theme-dark .text-slate-700 {
            color: #e2e8f0 !important;
        }
        body.theme-dark .text-slate-600 { color: #cbd5e1 !important; }
        body.theme-dark .text-slate-500,
        body.theme-dark .text-slate-400,
        body.theme-dark .text-slate-300 {
            color: #94a3b8 !important;
        }
        body.theme-dark .border-slate-100,
        body.theme-dark .border-slate-200,
        body.theme-dark .border-slate-300 {
            border-color: rgba(71, 85, 105, 0.7) !important;
        }
        body.theme-dark .bg-white,
        body.theme-dark .bg-white\/95 {
            background: rgba(15, 23, 42, 0.92) !important;
            color: #e2e8f0 !important;
        }
        body.theme-dark .bg-slate-50,
        body.theme-dark .bg-slate-100,
        body.theme-dark .bg-slate-200 {
            background: rgba(30, 41, 59, 0.92) !important;
            color: #cbd5e1 !important;
        }
        body.theme-dark .bg-indigo-50 {
            background: rgba(79, 70, 229, 0.2) !important;
            color: #c7d2fe !important;
            border-color: rgba(129, 140, 248, 0.45) !important;
        }
        body.theme-dark .text-indigo-600 { color: #a5b4fc !important; }
        body.theme-dark .bg-emerald-100 {
            background: rgba(16, 185, 129, 0.18) !important;
            color: #a7f3d0 !important;
            border-color: rgba(16, 185, 129, 0.35) !important;
        }
        body.theme-dark .text-emerald-700 { color: #a7f3d0 !important; }
        body.theme-dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.35) !important; }
        body.theme-dark .bg-rose-100 {
            background: rgba(244, 63, 94, 0.18) !important;
            color: #fecdd3 !important;
            border-color: rgba(244, 63, 94, 0.35) !important;
        }
        body.theme-dark .text-rose-600 { color: #fda4af !important; }
        body.theme-dark .border-rose-200 { border-color: rgba(244, 63, 94, 0.35) !important; }
        body.theme-dark .bg-amber-100 {
            background: rgba(245, 158, 11, 0.18) !important;
            color: #fcd34d !important;
            border-color: rgba(245, 158, 11, 0.35) !important;
        }
        body.theme-dark .text-amber-600 { color: #fcd34d !important; }
        body.theme-dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.35) !important; }