/* ============================================================
   Dotobe UI Polish Layer
   在 tokens + design-system 之上，对既有页面类名做「视觉统一增强」。
   不改 HTML 结构与功能性 JS，仅覆盖颜色、阴影、圆角、动效、边框。
   加载顺序：… → design-system.css → 页面 css → ui-polish.css（最后）
   ============================================================ */

/* ---------- 全局：正文区更纯净 ---------- */
body {
    background-color: var(--color-bg) !important;
    color: var(--color-text);
}

/* ---------- 通用卡片抬升 ---------- */
.dashboard-stat-card,
.dashboard-chart-card,
.dashboard-recent-exams-card,
.dashboard-recommended-exams-card,
.dashboard-progress-card,
.dashboard-calendar-card,
.exam-list-card,
.exam-card,
.wrong-question-card,
.history-card,
.results-card,
.settings-card,
.my-exam-card,
.question-bank-card,
.in-progress-card {
    border: 1px solid var(--color-border-soft) !important;
    box-shadow: var(--shadow-sm) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--color-surface) !important;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal) !important;
}

.dashboard-stat-card:hover,
.exam-list-card:hover,
.exam-card:hover,
.wrong-question-card:hover,
.my-exam-card:hover,
.question-bank-card:hover,
.dashboard-exam-item:hover,
.dashboard-exam-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-md) !important;
    border-color: rgba(59, 130, 246, 0.28) !important;
}

/* ---------- Dashboard ---------- */
.dashboard-welcome-section {
    background: var(--grad-primary-soft) !important;
    border: 1px solid var(--color-border-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--color-text) !important;
}

.dashboard-welcome-content h1 {
    color: var(--color-text) !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
}

.dashboard-welcome-content p {
    color: var(--color-text-secondary) !important;
}

.dashboard-quick-action-btn {
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-text) !important;
    box-shadow: var(--shadow-xs) !important;
}

.dashboard-quick-action-btn:hover {
    background: var(--color-primary-light) !important;
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-inset-glow) !important;
    transform: translateY(-2px) !important;
}

.dashboard-stat-icon {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
}

.dashboard-stat-change.positive {
    background: var(--color-success-soft) !important;
    color: var(--color-success) !important;
}

.dashboard-stat-change.negative {
    background: var(--color-danger-soft) !important;
    color: var(--color-danger-text) !important;
}

.dashboard-card-header {
    border-bottom: 1px solid var(--color-border-soft) !important;
}

.dashboard-card-header h3 {
    color: var(--color-text) !important;
    font-weight: 600 !important;
}

.dashboard-card-header h3::before {
    background: var(--grad-primary) !important;
}

.dashboard-view-all {
    color: var(--color-primary) !important;
    background: var(--color-primary-light) !important;
    border-radius: var(--radius-sm) !important;
}

.dashboard-view-all:hover {
    box-shadow: var(--shadow-sm);
}

.dashboard-exam-item {
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-surface) !important;
}

.dashboard-exam-item:hover {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-inset-glow), var(--shadow-sm) !important;
}

.dashboard-exam-icon {
    background: var(--grad-primary) !important;
    box-shadow: var(--shadow-btn) !important;
    border-radius: var(--radius-md) !important;
}

.dashboard-exam-score.pass { color: var(--color-success) !important; }
.dashboard-exam-score.fail { color: var(--color-danger-text) !important; }

.dashboard-progress-bar,
.dashboard-subject-progress-bar {
    background: #E9ECF2 !important;
    border-radius: var(--radius-full) !important;
    overflow: visible !important;
    height: 10px !important;
}

.dashboard-progress-fill {
    background: var(--grad-growth) !important;
    border-radius: var(--radius-full) !important;
    transition: width var(--transition-progress) !important;
    position: relative;
}

.dashboard-progress-fill::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.45), 0 0 8px 2px rgba(5, 150, 105, 0.4);
}

.btn-primary,
.dashboard-container .btn-primary {
    background: var(--grad-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-btn) !important;
}

.btn-primary:hover {
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn-lg) !important;
}

/* 日历：去掉米色底，改纯净表面 */
.calendar-day {
    background-color: var(--color-surface-2) !important;
    border-radius: var(--radius-sm) !important;
}

.calendar-day:hover:not(.calendar-day-other) {
    background: var(--color-primary-light) !important;
    box-shadow: var(--shadow-inset-glow);
}

.calendar-day-today {
    background: var(--grad-primary) !important;
    color: #fff !important;
}

.calendar-day-today .calendar-day-number {
    color: #fff !important;
    font-weight: 700 !important;
}

.calendar-day-completed {
    border: 2px solid rgba(5, 150, 105, 0.55) !important;
    box-shadow: inset 0 0 0 2px rgba(52, 211, 153, 0.15);
}

.calendar-nav-btn {
    background: var(--color-surface-2) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-text-secondary) !important;
}

.calendar-nav-btn:hover {
    background: var(--grad-primary) !important;
    color: #fff !important;
}

.calendar-tooltip,
.calendar-modal-content {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}

.calendar-modal-overlay {
    background: rgba(30, 31, 40, 0.35) !important;
    backdrop-filter: blur(6px);
}

.calendar-modal-close:hover,
.event-action-btn:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
}

.add-event-form input:focus,
.add-event-form textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus) !important;
}

/* ---------- Exam List ---------- */
.exam-list-page,
.exam-list-container,
#appContent .exam-list-header,
.exam-list-toolbar,
.exam-list-filters {
    /* 页面级容器保持干净背景，细节由子元素承载 */
}

.exam-list-header h1,
.exam-list-title,
.page-title {
    color: var(--color-text);
}

.exam-list-filters,
.exam-list-filter-bar,
.exam-filters {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}

.exam-list-search input,
.exam-list-filters input,
.exam-list-filters select,
.exam-filters input,
.exam-filters select {
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-surface) !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.exam-list-search input:focus,
.exam-list-filters input:focus,
.exam-list-filters select:focus,
.exam-filters input:focus,
.exam-filters select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus) !important;
    outline: none !important;
}

.exam-card-title,
.exam-list-card h3 {
    color: var(--color-text) !important;
}

.difficulty-easy,
.exam-difficulty-easy,
.tag-easy {
    background: var(--color-success-soft) !important;
    color: #047857 !important;
    border-radius: var(--radius-full) !important;
}

.difficulty-medium,
.exam-difficulty-medium,
.tag-medium {
    background: var(--color-warning-soft) !important;
    color: #B45309 !important;
    border-radius: var(--radius-full) !important;
}

.difficulty-hard,
.exam-difficulty-hard,
.tag-hard {
    background: var(--color-danger-soft) !important;
    color: var(--color-danger-text) !important;
    border-radius: var(--radius-full) !important;
}

/* ---------- Wrong questions · 温和反馈 ---------- */
.wrong-questions-page .stat-card,
.wrong-stat-card,
.wq-stat-card {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}

.wrong-question-item,
.wrong-item,
.wq-question-card {
    background: var(--color-surface) !important;
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}

.wrong-question-item:hover,
.wrong-item:hover,
.wq-question-card:hover {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-inset-glow), var(--shadow-sm) !important;
    transform: translateY(-2px);
}

.mastered,
.is-mastered,
.tag-mastered {
    background: var(--color-success-soft) !important;
    color: #047857 !important;
}

.unmastered,
.is-unmastered,
.tag-unmastered {
    background: var(--color-warning-soft) !important;
    color: #B45309 !important;
}

/* ---------- History / Results / In-progress ---------- */
.history-page .card,
.results-page .card,
.in-progress-page .card,
.history-item,
.results-summary,
.in-progress-item {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}

.score-pass,
.result-pass {
    color: var(--color-success) !important;
}

.score-fail,
.result-fail {
    color: var(--color-danger-text) !important;
}

/* ---------- Settings ---------- */
.settings-page,
.settings-container {
    color: var(--color-text);
}

.settings-section,
.settings-panel,
.settings-form-card {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}

.settings-page input,
.settings-page select,
.settings-page textarea,
.settings-container input,
.settings-container select,
.settings-container textarea {
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-surface) !important;
}

.settings-page input:focus,
.settings-page select:focus,
.settings-page textarea:focus,
.settings-container input:focus,
.settings-container select:focus,
.settings-container textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus) !important;
    outline: none !important;
}

/* ---------- Question bank / My exams / Resources ---------- */
.question-bank-page .toolbar,
.my-exams-toolbar,
.resources-toolbar,
.public-resources-filters {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* ---------- Exam take / Practice · 选项温和反馈 ---------- */
.option-item,
.exam-option,
.practice-option,
.answer-option,
.choice-option {
    background: var(--color-surface) !important;
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal), color var(--transition-normal) !important;
}

.option-item:hover,
.exam-option:hover,
.practice-option:hover,
.answer-option:hover,
.choice-option:hover {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-inset-glow) !important;
}

.option-item.selected,
.exam-option.selected,
.practice-option.selected,
.answer-option.selected,
.choice-option.selected,
.option-item.active,
.exam-option.active {
    border-color: var(--color-primary) !important;
    background: var(--color-primary-light) !important;
    box-shadow: var(--shadow-inset-glow) !important;
}

.option-item.correct,
.exam-option.correct,
.practice-option.correct,
.answer-option.correct,
.choice-option.correct,
.is-correct {
    border: none !important;
    background: var(--grad-growth) !important;
    color: #fff !important;
}

.option-item.wrong,
.exam-option.wrong,
.practice-option.wrong,
.answer-option.wrong,
.choice-option.wrong,
.is-wrong {
    border: none !important;
    background: var(--color-danger-bg) !important;
    color: var(--color-danger-text) !important;
}

/* 答题卡 */
.answer-card,
.exam-answer-card,
.answercard {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
}

.answer-card-item,
.answercard-item,
.answer-sheet-item {
    border-radius: var(--radius-sm) !important;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.answer-card-item.answered,
.answercard-item.answered {
    background: var(--color-primary-light) !important;
    color: var(--color-primary-dark) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}

.answer-card-item.current,
.answercard-item.current {
    box-shadow: var(--shadow-focus) !important;
    border-color: var(--color-primary) !important;
}

/* 倒计时 · 渐变·生辉 仅用于警示 */
.exam-timer,
.countdown-timer,
.timer-warning {
    border-radius: var(--radius-full) !important;
}

.timer-warning,
.exam-timer.warning,
.countdown-timer.warning {
    background: var(--grad-alert) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.25);
}

/* ---------- Login / Register / Share / Forgot ---------- */
.login-container,
.register-container,
.forgot-container,
.share-container {
    background: var(--color-bg);
}

.login-card,
.register-card,
.forgot-card,
.share-card,
.auth-card {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
}

.login-card input,
.register-card input,
.forgot-card input,
.auth-card input {
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
}

.login-card input:focus,
.register-card input:focus,
.forgot-card input:focus,
.auth-card input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus) !important;
    outline: none !important;
}

.login-btn,
.register-btn,
.auth-submit,
.forgot-btn {
    background: var(--grad-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-btn) !important;
    font-weight: 600 !important;
}

.login-btn:hover,
.register-btn:hover,
.auth-submit:hover,
.forgot-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn-lg) !important;
}

/* ---------- Empty / Loading / Notifications ---------- */
.empty-state {
    color: var(--color-text-secondary) !important;
}

.empty-state i {
    color: var(--color-primary) !important;
    opacity: 0.7;
}

.app-notifications .notification {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border-soft) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
}

.app-notifications .notification.success { border-left: 4px solid var(--color-success) !important; }
.app-notifications .notification.error   { border-left: 4px solid #F43F5E !important; }
.app-notifications .notification.warning { border-left: 4px solid var(--color-warning) !important; }
.app-notifications .notification.info    { border-left: 4px solid var(--color-primary) !important; }

.loading-spinner {
    border-color: var(--color-border) !important;
    border-top-color: var(--color-primary) !important;
}

/* ---------- Pagination ---------- */
.pagination a,
.pagination button,
.page-btn {
    border-radius: var(--radius-sm) !important;
    border: 1.5px solid var(--color-border) !important;
    background: var(--color-surface) !important;
    color: var(--color-text-secondary) !important;
    transition: all var(--transition-fast);
}

.pagination a:hover,
.pagination button:hover,
.page-btn:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    background: var(--color-primary-light) !important;
}

.pagination a.active,
.pagination .active,
.page-btn.active {
    background: var(--grad-primary) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--shadow-btn) !important;
}

/* ---------- Modal 通用 ---------- */
.modal-content,
.dialog-content,
.popup-content {
    background: var(--color-surface) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    border: 1px solid var(--color-border-soft);
}

/* ---------- Table ---------- */
table th {
    color: var(--color-text-secondary) !important;
    font-weight: 600;
    border-bottom: 1px solid var(--color-border-soft) !important;
}

table td {
    border-bottom: 1px solid var(--color-border-soft) !important;
    color: var(--color-text);
}

table tr:hover td {
    background: var(--color-primary-light) !important;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .dashboard-stat-card:hover,
    .exam-list-card:hover,
    .exam-card:hover,
    .wrong-question-card:hover,
    .dashboard-exam-item:hover,
    .dashboard-exam-card:hover,
    .dashboard-quick-action-btn:hover,
    .btn-primary:hover,
    .login-btn:hover,
    .register-btn:hover {
        transform: none !important;
    }
}