* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --primary: #2563eb;
    --primary-light: #dbeafe;
    --correct-bg: #dbeafe;
    --wrong-bg: #ffedd5;
    --correct-border: #93c5fd;
    --wrong-border: #fdba74;
    --success: #22c55e;
    --danger: #ef4444;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-500: #6b7280;
    --gray-700: #374151;
    --gray-900: #111827;
    --card: #ffffff;
    --safe-top: env(safe-area-inset-top, 20px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* 深色模式：翻转全局色板 */
:root.dark {
    --primary: #60a5fa;
    --primary-light: rgba(96, 165, 250, 0.14);
    --correct-bg: rgba(96, 165, 250, 0.16);
    --wrong-bg: rgba(251, 146, 60, 0.14);
    --correct-border: rgba(96, 165, 250, 0.45);
    --wrong-border: rgba(251, 146, 60, 0.45);
    --success: #4ade80;
    --danger: #f87171;
    --gray-50: #0d1424;
    --gray-100: #1c2740;
    --gray-200: #2b3a55;
    --gray-300: #40526f;
    --gray-500: #93a5c1;
    --gray-700: #c6d3e6;
    --gray-900: #f0f5fc;
    --card: #151e32;
    color-scheme: dark;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
    background: var(--gray-50);
    color: var(--gray-900);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#app {
    max-width: 440px;
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
}

.page {
    display: none;
    padding: calc(var(--safe-top) + 10px) 16px calc(80px + var(--safe-bottom));
    min-height: 100vh;
}

.page.active {
    display: block;
}

/* 主页用 flex 纵向布局：搜索隐藏题库后，margin-top:auto 仍能把搜索框+按钮推到底部，保证 sticky 位置不变 */
#page-home.active {
    display: flex;
    flex-direction: column;
}

.page.hidden {
    display: none !important;
}

.hidden {
    display: none !important;
}

.page-header {
    text-align: center;
    margin-bottom: 16px;
    position: relative;
}

.page-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
}

.page-header .subtitle {
    font-size: 14px;
    color: var(--gray-500);
    margin-top: 4px;
}

/* Question Grid */
.grid-section {
    margin-bottom: 8px;
}

.grid-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    padding: 12px 16px 8px;
    margin: 0;
}

.question-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    margin-bottom: 16px;
    padding: 4px;
    -webkit-overflow-scrolling: touch;
}

.grid-item {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    background: var(--gray-100);
    color: var(--gray-700);
    border: 1.5px solid var(--gray-200);
    cursor: pointer;
    transition: transform 0.1s;
}

.grid-item:active {
    transform: scale(0.92);
}

.grid-item.correct {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.grid-item.wrong {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

.grid-item.skipped {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #9ca3af;
}

/* Buttons */
.btn-primary {
    width: 100%;
    padding: 14px 24px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-primary:active {
    opacity: 0.8;
}

.btn-secondary {
    width: 100%;
    padding: 14px 24px;
    background: var(--card);
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
}

.btn-cancel {
    width: 100%;
    padding: 12px 24px;
    background: transparent;
    color: var(--gray-500);
    border: none;
    font-size: 15px;
    cursor: pointer;
    margin-top: 8px;
}

.fav-detail-nav {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}
.fav-detail-nav .btn-nav {
    flex: 1;
    padding: 9px 0;
    text-align: center;
    border-radius: 9px;
}

.home-actions {
    position: sticky;
    bottom: calc(80px + var(--safe-bottom));
    padding: 12px 0;
    z-index: 50;
    margin-top: auto;
}

/* 主页搜索 */
.home-search {
    position: relative;
    margin-bottom: 10px;
}

.home-search-input {
    width: 100%;
    padding: 11px 16px;
    border: 1.5px solid var(--gray-200);
    border-radius: 22px;
    background: var(--card);
    color: var(--gray-900);
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}

.home-search-input:focus {
    border-color: var(--primary);
}

.home-search-input::placeholder {
    color: var(--gray-500);
}

.home-search-results {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 8px;
    background: var(--card);
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    max-height: 340px;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.search-result-count {
    padding: 8px 14px 4px;
    font-size: 12px;
    color: var(--gray-500);
}

.search-result-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray-900);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:active {
    background: var(--gray-100);
}

.search-result-tag {
    flex-shrink: 0;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary);
    margin-top: 2px;
    white-space: nowrap;
}

.search-result-text {
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-empty {
    padding: 18px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--gray-500);
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: var(--card);
    border-radius: 20px;
    padding: 28px 24px;
    width: 100%;
    max-width: 340px;
    text-align: center;
}

.modal-content h3 {
    font-size: 18px;
    margin-bottom: 20px;
}

.modal-large {
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    text-align: left;
}

/* Quiz Page */
.quiz-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.btn-back {
    background: none;
    border: none;
    font-size: 16px;
    color: var(--primary);
    cursor: pointer;
    padding: 8px 0;
}

.quiz-progress {
    font-size: 14px;
    color: var(--gray-500);
    font-weight: 500;
}

.quiz-body {
    flex: 1;
}

.question-type-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

.question-text {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 20px;
    color: var(--gray-900);
}

.options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.option-item {
    padding: 14px 16px;
    background: var(--card);
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.option-item:active {
    transform: scale(0.98);
}

.option-item.selected {
    border-color: var(--primary);
    background: var(--primary-light);
}

.option-item.correct-answer {
    border-color: var(--success);
    background: #dcfce7;
}

.option-item.wrong-answer {
    border-color: var(--danger);
    background: #fef2f2;
}

.option-item.missed-answer {
    border-color: #f59e0b;
    background: #fffbeb;
    border-style: dashed;
}

.option-item.disabled {
    pointer-events: none;
}

.option-letter {
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gray-100);
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700);
}

.option-item.selected .option-letter {
    background: var(--primary);
    color: white;
}

.option-item.correct-answer .option-letter {
    background: var(--success);
    color: white;
}

.option-item.wrong-answer .option-letter {
    background: var(--danger);
    color: white;
}

.option-item.missed-answer .option-letter {
    background: #f59e0b;
    color: white;
}

.correct-label.result-correct {
    color: var(--success);
    font-weight: 700;
    font-size: 15px;
}

.correct-label.result-wrong {
    color: #dc2626;
    font-weight: 700;
    font-size: 15px;
    background: #fee2e2;
    padding: 2px 8px;
    border-radius: 4px;
}

.option-text {
    flex: 1;
    padding-top: 2px;
}

/* Explanation */
.answer-explanation {
    margin-top: 20px;
    padding: 16px;
    background: #f0fdf4;
    border-radius: 12px;
    border: 1px solid #bbf7d0;
}

.answer-explanation.explanation-wrong {
    background: #fef2f2;
    border-color: #fecaca;
}

.answer-explanation.hidden {
    display: none;
}

.explanation-header {
    margin-bottom: 8px;
}

.btn-clear-records {
    display: inline-block;
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}
.wrong-clear-row {
    text-align: center;
    margin-top: 20px;
    padding-top: 12px;
}
.btn-clear-records:active {
    background: #fecaca;
}

.correct-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--success);
}

.explanation-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray-700);
}

/* Quiz Footer */
.quiz-footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 440px;
    padding: 12px 16px calc(12px + var(--safe-bottom));
    background: var(--card);
    z-index: 200;
    border-top: 1px solid var(--gray-200);
}

.btn-submit {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.btn-submit:disabled {
    background: var(--gray-300);
    cursor: not-allowed;
}

.btn-submit.next-mode {
    background: var(--success);
}

/* Extract Quiz */
.extract-footer {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-finish-early {
    padding: 6px 12px;
    background: var(--primary-light);
    color: var(--primary);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-finish-early:active {
    opacity: 0.7;
}

.btn-nav {
    padding: 14px 18px;
    background: var(--gray-100);
    color: var(--gray-700);
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.btn-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.extract-footer .btn-submit {
    flex: 1;
}

/* Progress Bar */
.progress-bar-container {
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    margin-bottom: 12px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
}

/* Extract Result */
.extract-result {
    text-align: center;
}

.extract-result.hidden {
    display: none;
}

.result-summary {
    margin-bottom: 20px;
}

.result-summary h2 {
    font-size: 20px;
    margin-bottom: 12px;
}

.score-display {
    font-size: 48px;
    font-weight: 800;
    color: var(--primary);
}

.time-display {
    font-size: 14px;
    color: var(--gray-500);
    margin-top: 8px;
}

.extract-start {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
}

.extract-start.hidden {
    display: none;
}

.extract-quiz.hidden {
    display: none;
}

/* Wrong Page */
.wrong-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    text-align: center;
}

.wrong-empty p {
    font-size: 16px;
    color: var(--gray-500);
}

.wrong-empty.hidden {
    display: none;
}

/* Tab Bar */
.tab-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 440px;
    display: flex;
    background: var(--card);
    border-top: 1px solid var(--gray-200);
    padding: 8px 0 calc(8px + var(--safe-bottom));
    z-index: 100;
}

.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    padding: 4px 0;
}

.tab-icon {
    font-size: 22px;
}

.tab-label {
    font-size: 11px;
    color: var(--gray-500);
    font-weight: 500;
}

.tab-item.active .tab-label {
    color: var(--primary);
    font-weight: 600;
}

/* Hide tab bar during quiz */
body.quiz-mode .tab-bar {
    display: none;
}

body.quiz-mode .page {
    padding-bottom: calc(80px + var(--safe-bottom));
}

/* Scrollbar */
.question-grid::-webkit-scrollbar {
    width: 0;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.quiz-body {
    animation: fadeIn 0.2s ease;
}

/* Favorite Button */
.btn-fav {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    color: var(--gray-300);
    transition: transform 0.15s;
}

.btn-fav:active {
    transform: scale(1.3);
}

.btn-fav.faved {
    color: #f59e0b;
}

/* Favorite grid items */
.grid-item.faved {
    background: #fef3c7;
    border-color: #fbbf24;
    color: #92400e;
}

/* View Toggle Button */
.btn-view-toggle {
    display: block;
    margin: 8px auto 0;
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid #93c5fd;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.btn-view-toggle:active {
    opacity: 0.7;
}

/* Topic View */
#home-view-topic.hidden {
    display: none;
}

#home-view-order.hidden {
    display: none;
}

.topic-section {
    margin-bottom: 16px;
    background: var(--card);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid var(--gray-200);
}

.topic-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-100);
}

.topic-icon {
    font-size: 20px;
}

.topic-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-900);
    flex: 1;
}

.topic-count {
    font-size: 12px;
    color: var(--gray-500);
    background: var(--gray-100);
    padding: 2px 8px;
    border-radius: 10px;
}

.topic-study-btn {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-light);
    border: 1px solid #93c5fd;
    border-radius: 10px;
    padding: 3px 10px;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
    white-space: nowrap;
}

.topic-study-btn:active {
    transform: scale(0.93);
    background: #dbeafe;
}

.topic-type-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-500);
    margin: 8px 0 4px;
}

/* Modal fav row */
.modal-fav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.modal-fav-row .question-type-badge {
    margin-bottom: 0;
}

/* Question row with fav button */
.question-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 20px;
}

.question-row .question-text {
    flex: 1;
    margin-bottom: 0;
}

.question-row .btn-fav {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ===== Wrong Book Stages (smooth red → gray interpolation) ===== */
.grid-item.stage-0 {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

.grid-item.stage-1 {
    background: #f8ebec;
    border-color: #e6bdc0;
    color: #a34c53;
}

.grid-item.stage-2 {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #6b7280;
}

/* ===== Stats Page ===== */
.stats-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.btn-sort {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid #93c5fd;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    flex: 1;
    text-align: center;
    cursor: pointer;
}

.btn-sort:active {
    opacity: 0.7;
}

.stats-progress {
    margin-bottom: 16px;
    background: var(--card);
    border-radius: 12px;
    padding: 14px;
    border: 1px solid var(--gray-200);
}

.stats-time {
    text-align: center;
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.stats-progress-bar {
    display: flex;
    height: 14px;
    border-radius: 7px;
    background: var(--gray-200);
    overflow: hidden;
}

.sp-seg {
    height: 100%;
    transition: width 0.4s ease;
}

.sp-green {
    background: #16a34a;
}

.sp-blue {
    background: #2563eb;
}

.sp-red {
    background: #ef4444;
}

.sp-yellow {
    background: #f59e0b;
}

.stats-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--gray-700);
}

.stats-legend .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 3px;
    vertical-align: -1px;
}

.dot-green { background: #16a34a; }
.dot-blue { background: #2563eb; }
.dot-red { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-gray { background: var(--gray-300); }

.stats-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--gray-300);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    transition: transform 0.1s;
}

.stat-item:active {
    transform: scale(0.98);
}

.stat-item.st-mastered {
    border-left-color: #16a34a;
}

.stat-item.st-correct {
    border-left-color: #2563eb;
}

.stat-item.st-wrong {
    border-left-color: #ef4444;
}

.stat-item.st-improving {
    border-left-color: #f59e0b;
}

.stat-item.st-unanswered {
    border-left-color: var(--gray-300);
}

.stat-id {
    flex-shrink: 0;
    min-width: 44px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-500);
    background: var(--gray-100);
    border-radius: 6px;
    padding: 4px 6px;
}

.stat-item.st-mastered .stat-id {
    color: #15803d;
    background: #dcfce7;
}

.stat-item.st-correct .stat-id {
    color: #1d4ed8;
    background: #dbeafe;
}

.stat-item.st-wrong .stat-id {
    color: #dc2626;
    background: #fee2e2;
}

.stat-item.st-improving .stat-id {
    color: #b45309;
    background: #fef3c7;
}

.stat-qtext {
    flex: 1;
    font-size: 13px;
    line-height: 1.4;
    color: var(--gray-700);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.stat-meta {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--gray-500);
    text-align: right;
    line-height: 1.5;
    white-space: nowrap;
}

/* ===== Extract Mode Buttons ===== */
.extract-mode-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.extract-mode-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px;
    background: var(--card);
    border: 1.5px solid var(--gray-200);
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}

.extract-mode-btn:active {
    transform: scale(0.97);
    border-color: var(--primary);
    background: var(--primary-light);
}

.mode-icon {
    font-size: 26px;
    flex-shrink: 0;
}

.mode-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mode-info b {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-900);
}

.mode-info small {
    font-size: 12px;
    color: var(--gray-500);
}

.mode-arrow {
    font-size: 24px;
    color: var(--gray-300);
    flex-shrink: 0;
    line-height: 1;
}

/* ===== 抽题答题记录 ===== */
.extract-history {
    width: 100%;
    margin-top: 20px;
}

.extract-history.hidden {
    display: none;
}

.history-header {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 10px;
}

.hist-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hist-item {
    background: var(--card);
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    padding: 9px 14px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.hist-item.expanded {
    border-color: #93c5fd;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.08);
    padding-bottom: 12px;
}

.hist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.hist-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hist-main b {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
    white-space: nowrap;
}

.hist-mode {
    font-size: 11px;
    color: var(--gray-500);
    background: var(--gray-100);
    border-radius: 6px;
    padding: 2px 7px;
    white-space: nowrap;
}

.hist-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.hist-rate {
    font-size: 14px;
    font-weight: 800;
}

.hist-rate.rate-high { color: #16a34a; }
.hist-rate.rate-mid { color: #d97706; }
.hist-rate.rate-low { color: #dc2626; }

.hist-sub {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 2px;
}

.hist-detail {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--gray-200);
    animation: hist-expand 0.25s ease;
}

.hist-detail.hidden {
    display: none;
}

@keyframes hist-expand {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.hist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 6px;
}

.hist-grid .grid-item {
    width: auto;
    height: 30px;
    font-size: 12px;
}

/* ===== Trophy Button + Tier Icons ===== */
.btn-trophy {
    display: inline-block;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s;
    flex: 1;
    text-align: center;
}

.btn-trophy:active {
    transform: scale(1.2);
}

.trophy {
    display: inline-block;
    line-height: 1;
}

.trophy-gold {
    filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.45));
}

.trophy-silver {
    filter: grayscale(1) brightness(1.12) drop-shadow(0 2px 4px rgba(148, 163, 184, 0.45));
}

.trophy-bronze {
    filter: sepia(0.9) hue-rotate(-25deg) saturate(2.4) brightness(0.9) drop-shadow(0 2px 4px rgba(180, 83, 9, 0.4));
}

.trophy-off {
    filter: grayscale(1) opacity(0.35);
}

.trophy-big {
    font-size: 64px;
}

/* ===== Achievement Unlock Banner (top slide-in, non-blocking) ===== */
.ach-banner {
    position: fixed;
    top: calc(var(--safe-top) + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 32px);
    padding: 10px 18px 10px 14px;
    background: linear-gradient(160deg, #fffbeb, #fef3c7);
    border: 1.5px solid #fbbf24;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
    pointer-events: none;
}

.ach-banner.hidden {
    display: none;
}

.ach-banner.slide-in {
    animation: banner-slide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes banner-slide {
    0% { transform: translate(-50%, -140%); opacity: 0; }
    100% { transform: translate(-50%, 0); opacity: 1; }
}

.ach-banner .trophy {
    font-size: 26px;
}

.ach-banner-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
}

.ach-banner-text small {
    font-size: 11px;
    font-weight: 700;
    color: #b45309;
    letter-spacing: 1px;
}

.ach-banner-text b {
    font-size: 16px;
    font-weight: 800;
    color: var(--gray-900);
}

/* ===== Achievement Hall ===== */
.ach-hall {
    max-width: 380px;
}

.ach-hall-title {
    text-align: center;
    font-size: 18px;
    margin-bottom: 4px;
}

.ach-hall-count {
    text-align: center;
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 14px;
}

.ach-hall-count b {
    color: #f59e0b;
    font-size: 15px;
}

.ach-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 55vh;
    overflow-y: auto;
    margin-bottom: 8px;
}

.ach-tier-header {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 8px 2px 2px;
}

.ach-tier-header.ach-tier-gold { color: #b45309; }
.ach-tier-header.ach-tier-silver { color: #64748b; }
.ach-tier-header.ach-tier-bronze { color: #92400e; }

.ach-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
}

.ach-item .trophy {
    font-size: 26px;
    flex-shrink: 0;
}

.ach-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.ach-info b {
    font-size: 14px;
    color: var(--gray-900);
}

.ach-info small {
    font-size: 11px;
    color: var(--gray-500);
    line-height: 1.4;
}

.ach-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #16a34a;
    background: #dcfce7;
    padding: 3px 8px;
    border-radius: 10px;
}

.ach-item.locked {
    opacity: 0.55;
}

.ach-item.locked .ach-badge {
    color: var(--gray-500);
    background: var(--gray-100);
}

/* ===== Celebration Overlay ===== */
.celebration {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(160deg, #1e3a8a, #172554);
}

.celebration.hidden {
    display: none;
}

.celebration.cel-2 {
    background: linear-gradient(160deg, #4c1d95, #1e1b4b);
}

.celebration.cel-3 {
    background: linear-gradient(160deg, #f59e0b, #b45309);
}

.celebration.cel-4 {
    background: linear-gradient(160deg, #78350f, #451a03);
}

.cel-rays {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200vmax;
    height: 200vmax;
    margin: -100vmax 0 0 -100vmax;
    background: conic-gradient(from 0deg, rgba(252,236,195,0.9) 0deg 15deg, rgba(255,255,255,0.8) 15deg 30deg, rgba(252,236,195,0.9) 30deg 45deg, rgba(255,255,255,0.8) 45deg 60deg, rgba(252,236,195,0.9) 60deg 75deg, rgba(255,255,255,0.8) 75deg 90deg, rgba(252,236,195,0.9) 90deg 105deg, rgba(255,255,255,0.8) 105deg 120deg, rgba(252,236,195,0.9) 120deg 135deg, rgba(255,255,255,0.8) 135deg 150deg, rgba(252,236,195,0.9) 150deg 165deg, rgba(255,255,255,0.8) 165deg 180deg, rgba(252,236,195,0.9) 180deg 195deg, rgba(255,255,255,0.8) 195deg 210deg, rgba(252,236,195,0.9) 210deg 225deg, rgba(255,255,255,0.8) 225deg 240deg, rgba(252,236,195,0.9) 240deg 255deg, rgba(255,255,255,0.8) 255deg 270deg, rgba(252,236,195,0.9) 270deg 285deg, rgba(255,255,255,0.8) 285deg 300deg, rgba(252,236,195,0.9) 300deg 315deg, rgba(255,255,255,0.8) 315deg 330deg, rgba(252,236,195,0.9) 330deg 345deg, rgba(255,255,255,0.8) 345deg 360deg);
    animation: rays-spin 24s linear infinite;
}

@keyframes rays-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cel-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.confetti {
    position: absolute;
    top: -20px;
    border-radius: 2px;
    animation: confetti-fall linear infinite;
}

@keyframes confetti-fall {
    0% { transform: translateY(-5vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0.8; }
}

.cel-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 32px;
    animation: cel-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cel-pop {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.cel-emoji {
    font-size: 76px;
    animation: cel-bounce 1.2s ease-in-out infinite;
}

.celebration.cel-2 .cel-emoji { font-size: 92px; }
.celebration.cel-3 .cel-emoji { font-size: 100px; }
.celebration.cel-4 .cel-emoji { font-size: 112px; }

@keyframes cel-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

.cel-title {
    font-size: 30px;
    font-weight: 800;
    color: #ffffff;
    margin: 18px 0 10px;
    letter-spacing: 1px;
}

.celebration.cel-2 .cel-title { font-size: 36px; }

.celebration.cel-3 .cel-title { font-size: 38px; }

.celebration.cel-4 .cel-title {
    font-size: 42px;
    color: #f59e0b;
    text-shadow: 0 0 24px rgba(251, 191, 36, 0.6);
}

.celebration.cel-4 .cel-sub {
    color: #78350f;
    font-weight: 600;
}

.cel-sub {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 30px;
    line-height: 1.6;
}

.cel-btn {
    max-width: 220px;
    margin: 0 auto;
    background: #ffffff;
    color: var(--gray-900);
}

.celebration.cel-3 .cel-btn {
    background: #fef3c7;
    color: #92400e;
}

.celebration.cel-4 .cel-btn {
    background: #fbbf24;
    color: #451a03;
}

/* ===== 庆祝页面预览（临时调试） ===== */
.cel-preview {
    margin: 24px 16px 12px;
    padding: 12px;
    border: 1px dashed #c4b5fd;
    border-radius: 12px;
    background: #faf5ff;
}

.cel-preview-title {
    font-size: 12px;
    color: #7c3aed;
    text-align: center;
    margin-bottom: 10px;
    font-weight: 600;
}

.cel-preview-btns {
    display: flex;
    gap: 8px;
}

.cel-preview-btn {
    flex: 1;
    padding: 8px 4px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #ddd6fe;
    border-radius: 8px;
    background: #ffffff;
    color: #6d28d9;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
}

.cel-preview-btn:active {
    transform: scale(0.95);
    background: #ede9fe;
}

/* ===== 主题切换按钮（左上角） ===== */
.theme-toggle {
    position: fixed;
    top: calc(var(--safe-top) + 16px);
    left: max(16px, calc(50% - 204px));
    z-index: 900;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    background: var(--card);
    border: 1px solid var(--gray-200);
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14);
    cursor: pointer;
    transition: transform 0.2s, background-color 0.3s, border-color 0.3s;
}

.theme-toggle:active {
    transform: scale(0.85) rotate(40deg);
}

body:not(.on-home) .theme-toggle,
body.quiz-mode .theme-toggle {
    display: none;
}

/* 账号按钮（右上角，与主题切换对称） */
.account-btn {
    position: fixed;
    top: calc(var(--safe-top) + 16px);
    right: 16px;
    z-index: 900;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    background: var(--card);
    border: 1px solid var(--gray-200);
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14);
    cursor: pointer;
    color: var(--gray-700);
    transition: transform 0.2s, background-color 0.3s, border-color 0.3s;
}
.account-btn:active { transform: scale(0.85); }
body:not(.on-home) .account-btn,
body.quiz-mode .account-btn {
    display: none;
}

/* 登录/注册弹窗 */
.auth-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 16px;
    text-align: center;
}
.auth-pwd-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}
.auth-pwd-row .auth-input {
    flex: 1;
    margin-bottom: 0;
}
.auth-pwd-row.hidden {
    display: none;
}
.pwd-toggle-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--gray-200);
    background: var(--card);
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-input {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    font-size: 15px;
    background: var(--gray-50);
    color: var(--gray-900);
    outline: none;
    transition: border-color 0.2s;
}
.auth-input:focus {
    border-color: var(--primary);
}
.auth-error {
    color: var(--danger);
    font-size: 13px;
    margin-bottom: 10px;
    text-align: center;
}
.auth-error.hidden { display: none; }
.auth-submit {
    width: 100%;
    margin-bottom: 4px;
}
.auth-logout {
    color: var(--danger);
}
.account-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    margin-bottom: 6px;
}
.account-sync-hint {
    font-size: 12px;
    color: var(--gray-500);
    text-align: center;
    margin-bottom: 12px;
}

/* ===== 深色模式：组件级覆盖 ===== */
html.dark .grid-item.correct { background: rgba(96, 165, 250, 0.16); border-color: rgba(96, 165, 250, 0.45); color: #9cc3ff; }
html.dark .grid-item.wrong { background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.4); color: #fda4a4; }
html.dark .grid-item.skipped { background: #1c2740; border-color: #2b3a55; color: #7487a3; }
html.dark .grid-item.faved { background: rgba(251, 191, 36, 0.13); border-color: rgba(251, 191, 36, 0.4); color: #fcd34d; }

html.dark .grid-item.stage-0 { background: rgba(248, 113, 113, 0.2); border-color: rgba(248, 113, 113, 0.5); color: #fca5a5; }
html.dark .grid-item.stage-1 { background: rgba(248, 113, 113, 0.1); border-color: rgba(201, 145, 150, 0.35); color: #cf9aa1; }
html.dark .grid-item.stage-2 { background: #1c2740; border-color: #2b3a55; color: #8fa3bd; }

html.dark .option-item.correct-answer { background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.6); }
html.dark .option-item.wrong-answer { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.65); }
html.dark .option-item.missed-answer { background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.65); }
html.dark .correct-label.result-wrong { color: #fca5a5; background: rgba(248, 113, 113, 0.15); }

html.dark .answer-explanation { background: rgba(74, 222, 128, 0.07); border-color: rgba(74, 222, 128, 0.25); }
html.dark .answer-explanation.explanation-wrong { background: rgba(248, 113, 113, 0.07); border-color: rgba(248, 113, 113, 0.25); }

html.dark .btn-clear-records { background: rgba(248, 113, 113, 0.12); color: #fca5a5; border-color: rgba(248, 113, 113, 0.35); }
html.dark .btn-clear-records:active { background: rgba(248, 113, 113, 0.22); }
html.dark .btn-trophy { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.4); }
html.dark .btn-view-toggle,
html.dark .btn-sort,
html.dark .topic-study-btn { border-color: rgba(96, 165, 250, 0.4); }
html.dark .topic-study-btn:active { background: rgba(96, 165, 250, 0.22); }

html.dark .stat-item.st-mastered .stat-id { color: #86efac; background: rgba(74, 222, 128, 0.12); }
html.dark .stat-item.st-correct .stat-id { color: #93c5fd; background: rgba(96, 165, 250, 0.12); }
html.dark .stat-item.st-wrong .stat-id { color: #fca5a5; background: rgba(248, 113, 113, 0.12); }
html.dark .stat-item.st-improving .stat-id { color: #fcd34d; background: rgba(251, 191, 36, 0.12); }

html.dark .hist-rate.rate-high { color: #4ade80; }
html.dark .hist-rate.rate-mid { color: #fbbf24; }
html.dark .hist-rate.rate-low { color: #f87171; }
html.dark .hist-item.expanded { border-color: rgba(96, 165, 250, 0.55); box-shadow: 0 2px 12px rgba(96, 165, 250, 0.12); }

html.dark .ach-tier-header.ach-tier-gold { color: #fbbf24; }
html.dark .ach-tier-header.ach-tier-silver { color: #a5b4cf; }
html.dark .ach-tier-header.ach-tier-bronze { color: #d69e63; }
html.dark .ach-badge { color: #86efac; background: rgba(74, 222, 128, 0.12); }
html.dark .ach-banner { background: linear-gradient(160deg, #4a2c06, #6b4208); border-color: #f59e0b; box-shadow: 0 8px 24px rgba(245, 158, 11, 0.25); }
html.dark .ach-banner-text small { color: #fbbf24; }
html.dark .ach-banner-text b { color: #fef3c7; }

html.dark .modal { background: rgba(0, 0, 0, 0.65); }

html.dark .cel-btn { color: #111827; }

html.dark .cel-preview { background: rgba(139, 92, 246, 0.08); border-color: rgba(167, 139, 250, 0.4); }
html.dark .cel-preview-title { color: #c4b5fd; }
html.dark .cel-preview-btn { background: #1c2740; border-color: rgba(167, 139, 250, 0.35); color: #c4b5fd; }
html.dark .cel-preview-btn:active { background: rgba(139, 92, 246, 0.2); }

/* ===== Tab Switch ===== */
.tab-switch {
    display: flex;
    gap: 0;
    background: var(--gray-100);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 10px;
}
.tab-switch-btn {
    flex: 1;
    padding: 8px 0;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.2s;
}
.tab-switch-btn.active {
    background: var(--card);
    color: var(--primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ===== Global Stats List ===== */
.global-sort-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.global-stat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.global-stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.global-stat-item:active {
    transform: scale(0.98);
}
.global-stat-item .gs-rank {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-400);
    min-width: 22px;
    text-align: center;
}
.global-stat-item .gs-rank.top3 {
    color: var(--primary);
}
.global-stat-item .gs-info {
    flex: 1;
    min-width: 0;
}
.global-stat-item .gs-info b {
    display: block;
    font-size: 13px;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.global-stat-item .gs-info small {
    font-size: 11px;
    color: var(--gray-400);
}
.global-stat-item .gs-stat {
    text-align: right;
    white-space: nowrap;
}
.global-stat-item .gs-stat b {
    font-size: 14px;
    color: #ef4444;
}
.global-stat-item .gs-stat small {
    display: block;
    font-size: 11px;
    color: var(--gray-400);
}
.global-stat-item .gs-stat.fav-stat b {
    color: #f59e0b;
}
.global-empty {
    text-align: center;
    padding: 40px 0;
    color: var(--gray-400);
    font-size: 14px;
}

/* ===== Achievement Rate ===== */
.ach-rate {
    font-size: 11px;
    color: var(--gray-400);
    margin-left: 6px;
}

/* ===== Dark mode for new components ===== */
html.dark .tab-switch {
    background: rgba(255,255,255,0.06);
}
html.dark .tab-switch-btn.active {
    background: var(--card);
    color: #60a5fa;
}
html.dark .global-stat-item {
    border-color: rgba(255,255,255,0.08);
}
html.dark .global-stat-item .gs-info b {
    color: #e5e7eb;
}
html.dark .global-stat-item .gs-stat b {
    color: #f87171;
}
html.dark .global-stat-item .gs-stat.fav-stat b {
    color: #fbbf24;
}

/* ===== QA Actions (Note/Comment buttons) ===== */
.qa-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}
.qa-action-btn {
    padding: 6px 12px;
    border: 1px solid var(--gray-200);
    background: var(--card);
    border-radius: 8px;
    font-size: 12px;
    color: var(--gray-600);
    cursor: pointer;
    transition: transform 0.15s, background 0.2s;
}
.qa-action-btn:active {
    transform: scale(0.93);
}
.note-display {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
    font-size: 13px;
    color: var(--gray-700);
    white-space: pre-wrap;
    word-break: break-all;
}
.note-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.note-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    font-size: 14px;
    resize: none;
    background: var(--card);
    color: var(--gray-800);
    outline: none;
    transition: border-color 0.2s;
    margin-bottom: 12px;
}
.note-textarea:focus {
    border-color: var(--primary);
}
.note-btn-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.note-save-btn {
    padding: 10px 20px;
}
.comment-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50vh;
    background: var(--card);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
    z-index: 1100;
    display: flex;
    flex-direction: column;
}
.comment-panel.hidden {
    display: none;
}
.comment-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-200);
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
}
.comment-close-btn {
    border: none;
    background: transparent;
    font-size: 18px;
    color: var(--gray-400);
    cursor: pointer;
    padding: 4px 8px;
}
.comment-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.comment-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.comment-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.comment-body {
    flex: 1;
    min-width: 0;
}
.comment-body .comment-user {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600);
}
.comment-body .comment-text {
    font-size: 13px;
    color: var(--gray-800);
    margin-top: 2px;
    word-break: break-all;
}
.comment-body .comment-time {
    font-size: 11px;
    color: var(--gray-400);
    margin-top: 2px;
}
.comment-empty {
    text-align: center;
    color: var(--gray-400);
    font-size: 13px;
    padding: 30px 0;
}
.comment-input-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--gray-200);
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.comment-input {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid var(--gray-200);
    border-radius: 22px;
    font-size: 16px;
    outline: none;
    background: var(--bg);
    color: var(--gray-800);
}
.comment-input:focus {
    border-color: var(--primary);
}
.comment-send-btn {
    width: auto;
    padding: 7px 14px;
    border-radius: 18px;
    font-size: 13px;
    flex-shrink: 0;
    flex-grow: 0;
}
.comment-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--gray-200);
}
.comment-inline-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 10px;
}
.comment-inline-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.comment-inline-input {
    flex: 1;
    min-width: 0;
    padding: 9px 14px;
    border: 1px solid var(--gray-200);
    border-radius: 18px;
    font-size: 14px;
    outline: none;
    background: var(--bg);
    color: var(--gray-800);
}
.comment-inline-input:focus {
    border-color: var(--primary);
}
.comment-inline-send {
    width: auto;
    padding: 7px 14px;
    border: none;
    background: var(--primary);
    color: #fff;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
}
.comment-inline-send:active {
    opacity: 0.8;
}
html.dark .qa-action-btn {
    border-color: rgba(255,255,255,0.1);
    color: #9ca3af;
}
html.dark .note-display {
    background: rgba(245, 158, 11, 0.1);
    color: #d1d5db;
}
html.dark .note-textarea {
    border-color: rgba(255,255,255,0.1);
    color: #e5e7eb;
}
html.dark .comment-panel {
    background: #1f2937;
}
html.dark .comment-panel-header {
    border-color: rgba(255,255,255,0.08);
    color: #d1d5db;
}
html.dark .comment-body .comment-text {
    color: #e5e7eb;
}
html.dark .comment-input-bar {
    border-color: rgba(255,255,255,0.08);
}
html.dark .comment-input {
    background: #111827;
    border-color: rgba(255,255,255,0.1);
    color: #e5e7eb;
}
html.dark .comment-section {
    border-color: rgba(255,255,255,0.08);
}
html.dark .comment-inline-input {
    background: #111827;
    border-color: rgba(255,255,255,0.1);
    color: #e5e7eb;
}