/* Huanle Mandarin student portal — shared fixed-light colour system. */

:root {
    color-scheme: light only !important;
    --brand-canvas: #f5f2ec;
    --brand-paper: #fffdf9;
    --brand-surface: #ffffff;
    --brand-ink: #17324d;
    --brand-muted: #637280;
    --brand-line: #dde2dc;
    --brand-orange: #c7511f;
    --brand-orange-dark: #9e3f18;
    --brand-orange-soft: #fae9de;
    --brand-gold: #e6a23c;
    --brand-green: #2f7d5a;
    --brand-green-soft: #e7f3ed;

    /* Shared portal shell */
    --portal-canvas: var(--brand-canvas);
    --portal-surface: var(--brand-paper);
    --portal-surface-soft: var(--brand-orange-soft);
    --portal-ink: var(--brand-ink);
    --portal-muted: var(--brand-muted);
    --portal-line: var(--brand-line);
    --portal-accent: var(--brand-orange);
    --portal-accent-dark: var(--brand-orange-dark);
}

html,
html[data-theme],
body,
button,
input,
select,
textarea {
    color-scheme: light only !important;
}

html,
body.portal-shell-ready {
    background: var(--brand-canvas) !important;
    color: var(--brand-ink);
}

html[data-theme="study"] {
    --primary-color: var(--brand-orange);
    --primary-light: #df7545;
    --primary-dark: var(--brand-orange-dark);
    --secondary-color: #d4672e;
    --dark-text: var(--brand-ink);
    --light-text: var(--brand-muted);
    --background-color: var(--brand-canvas);
    --surface-color: var(--brand-paper);
    --progress-surface: var(--brand-paper);
    --progress-surface-alt: #f9f4ee;
    --progress-border: var(--brand-line);
    --progress-text: var(--brand-ink);
    --progress-subtle-text: var(--brand-muted);
    --progress-chip-bg: var(--brand-orange-soft);
    --progress-chip-text: var(--brand-orange-dark);
    --correct-color: var(--brand-green);
    --quiz-option-bg: var(--brand-paper);
    --quiz-selected-bg: var(--brand-orange-soft);
    --quiz-selected-color: var(--brand-orange-dark);
    --quiz-selected-border: var(--brand-orange);
    --quiz-correct-bg: var(--brand-green-soft);
    --quiz-correct-color: #236449;
    --quiz-correct-border: var(--brand-green);
}

/* Navigation stays quiet; orange marks only the current destination. */
.portal-shell-ready .app-top-tabs-wrap {
    background: rgba(255, 253, 249, 0.98);
}

.portal-shell-ready .app-top-tab.active {
    border-color: #edcbb8;
    background: var(--brand-orange-soft);
    color: var(--brand-orange-dark);
    box-shadow: inset 3px 0 0 var(--brand-orange);
}

.portal-shell-ready .app-top-tab:hover,
.portal-shell-ready .app-top-tab:focus-visible,
.portal-brand:hover,
.portal-brand:focus-visible {
    background: var(--brand-orange-soft);
    color: var(--brand-orange-dark);
}

.portal-language-button[aria-pressed="true"] {
    background: var(--brand-ink);
    color: var(--brand-paper);
}

/* Home dashboard */
.home-progress {
    --hp-paper: var(--brand-paper);
    --hp-surface: var(--brand-surface);
    --hp-ink: var(--brand-ink);
    --hp-muted: var(--brand-muted);
    --hp-line: var(--brand-line);
    --hp-mist: #edf0ec;
    --hp-orange: var(--brand-orange);
    --hp-orange-dark: var(--brand-orange-dark);
    --hp-orange-soft: var(--brand-orange-soft);
    --hp-jade: var(--brand-green);
    --hp-jade-soft: var(--brand-green-soft);
    --hp-gold: var(--brand-gold);
    --hp-gold-soft: #fff4d8;
}

/* Daily Review */
.daily-review-section .welcome-box {
    border: 1px solid var(--brand-line);
    background: var(--brand-paper);
    box-shadow: 0 18px 46px rgba(23, 50, 77, 0.09);
    backdrop-filter: none;
}

.daily-review-pill-group,
.daily-review-mode-row .daily-review-pill-group {
    border-color: var(--brand-line);
    background: #eeece7;
}

.daily-review-pill input:checked + span,
body.fluency-theme .daily-review-pill input:checked + span {
    background: var(--brand-orange);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(158, 63, 24, 0.22);
}

.daily-review-help-btn,
.daily-review-help-content,
.daily-review-slider,
.daily-review-stats {
    border-color: var(--brand-line);
    background: var(--brand-surface);
    color: var(--brand-ink);
}

.daily-review-help-card,
.daily-review-count-warning {
    border-color: var(--brand-line);
    background: #f9f6f1;
}

.daily-review-ring-svg {
    filter: drop-shadow(0 10px 24px rgba(199, 81, 31, 0.16));
}

.daily-review-ring-bg {
    stroke: #e4e2dc;
}

.daily-review-stat-icon {
    background: var(--brand-orange-soft);
    color: var(--brand-orange-dark);
}

.daily-review-start-btn {
    box-shadow: 0 12px 28px rgba(158, 63, 24, 0.22);
}

.daily-review-start-btn:hover {
    box-shadow: 0 15px 34px rgba(158, 63, 24, 0.27);
}

/* Review library */
.practice-library-shell {
    --library-canvas: var(--brand-canvas);
    --library-surface: var(--brand-surface);
    --library-ink: var(--brand-ink);
    --library-muted: var(--brand-muted);
    --library-line: var(--brand-line);
    --library-orange: var(--brand-orange);
    --library-orange-dark: var(--brand-orange-dark);
    --library-orange-soft: var(--brand-orange-soft);
}

.practice-library-shell .hsk-selection-container,
.practice-library-shell .chapter-selection-container,
.study-selection-container {
    box-shadow: 0 14px 34px rgba(23, 50, 77, 0.07);
}

/* AI Chat */
.aichat-wrap .aichat-setup,
.aichat-wrap .conv-header,
.aichat-wrap .conv-input-bar,
.aichat-wrap .summary-card,
.aichat-wrap .summary-loading {
    border: 1px solid var(--brand-line);
    background: var(--brand-paper);
    box-shadow: 0 14px 36px rgba(23, 50, 77, 0.08);
}

.aichat-wrap .lang-btn,
.aichat-wrap .mode-card,
.aichat-wrap .topic-item,
.aichat-wrap .general-input-wrap input,
.aichat-wrap .chapter-select,
.aichat-wrap .text-fallback input {
    border-color: var(--brand-line);
    background: var(--brand-surface);
    color: var(--brand-ink);
}

.aichat-wrap .mode-card:hover,
.aichat-wrap .mode-card.selected,
.aichat-wrap .topic-item:hover,
.aichat-wrap .topic-item.selected,
.aichat-wrap .btn-outline:hover {
    border-color: var(--brand-orange);
    background: var(--brand-orange-soft);
}

.aichat-wrap .conv-messages {
    background: #f7f4ef;
}

.aichat-wrap .msg-row.ai .msg-avatar,
.aichat-wrap .msg-avatar-img {
    border-color: #edcbb8;
    background: var(--brand-orange-soft);
}

.aichat-wrap .msg-row.user .msg-avatar {
    background: var(--brand-green-soft);
}

.aichat-wrap .msg-row.ai .msg-bubble {
    border: 1px solid var(--brand-line);
    background: var(--brand-surface);
    box-shadow: 0 3px 10px rgba(23, 50, 77, 0.07);
}

.aichat-wrap .translation-toggle {
    color: var(--brand-orange-dark);
}

.aichat-wrap .translation-toggle:hover {
    color: var(--brand-ink);
}

.aichat-wrap .translation-toggle:focus-visible,
.aichat-wrap .translation-source-token:focus-visible,
.aichat-wrap .translation-target-token:focus-visible {
    outline-color: rgba(199, 81, 31, 0.28);
}

.aichat-wrap .translation-source-token,
.aichat-wrap .reply-vocab-hint {
    border-color: #edcbb8;
    background: #fff7f1;
    color: var(--brand-ink);
}

.aichat-wrap .translation-target {
    border-left-color: var(--brand-orange);
    background: #faf6f1;
    color: #40576a;
}

.aichat-wrap .translation-source-token.active,
.aichat-wrap .translation-target-token.active {
    border-color: var(--brand-orange-dark);
    background: var(--brand-orange-dark);
    color: #ffffff;
}

.aichat-wrap .transcript-preview,
.aichat-wrap .error-example,
.aichat-wrap .tip-box {
    background: var(--brand-orange-soft);
    color: var(--brand-ink);
}

#vocab-preview-overlay > div {
    border: 1px solid var(--brand-line);
    background: var(--brand-paper) !important;
}

#vocab-preview-start {
    background: var(--brand-orange) !important;
}

#vocab-preview-cancel {
    border-color: var(--brand-line) !important;
    background: var(--brand-surface) !important;
    color: var(--brand-ink) !important;
}

/* University Rankings: preserve semantic rank colours, unify the chrome. */
:root {
    --ur-bg: var(--brand-canvas);
    --ur-surface: var(--brand-surface);
    --ur-surface-hover: var(--brand-orange-soft);
    --ur-border: var(--brand-line);
    --ur-border-light: #eceee9;
    --ur-text: var(--brand-ink);
    --ur-text-secondary: #506579;
    --ur-text-muted: #778591;
    --ur-primary: var(--brand-orange);
    --ur-primary-light: var(--brand-orange-soft);
    --ur-primary-dark: var(--brand-orange-dark);
    --ur-accent: var(--brand-orange);
    --ur-accent-light: var(--brand-orange-soft);
    --ur-shadow: 0 1px 2px rgba(23, 50, 77, 0.05);
    --ur-shadow-md: 0 8px 20px rgba(23, 50, 77, 0.09);
    --ur-shadow-lg: 0 18px 38px rgba(23, 50, 77, 0.12);
}

.ur-header {
    background: var(--brand-ink);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14), 0 7px 24px rgba(23, 50, 77, 0.14);
}

.ur-logo-icon {
    background: var(--brand-orange);
}

.ur-indonesia-guide-btn:hover,
.ur-tier-guide-toggle-btn,
.ur-modal-close:hover {
    border-color: #edcbb8;
    background: var(--brand-orange-soft);
    color: var(--brand-orange-dark);
}

.ur-search-input {
    border-color: #cfd8d5;
    box-shadow: 0 7px 20px rgba(23, 50, 77, 0.07);
}

.ur-search-input:focus {
    box-shadow: 0 0 0 4px rgba(199, 81, 31, 0.15), 0 7px 20px rgba(23, 50, 77, 0.07);
}

.ur-table th,
.ur-modal-header {
    background: #f0eee9;
}

.ur-table tr:hover td {
    background: #fff7f1;
}

.ur-tier-guide-box,
.ur-indonesia-admission-box,
.ur-guide-section {
    border-color: #e6d8cf;
    background: #fcf8f3;
}

.ur-main :focus-visible {
    outline-color: rgba(199, 81, 31, 0.35);
}

/* Profile */
.profile-avatar {
    background: var(--brand-orange);
    box-shadow: 0 8px 24px rgba(158, 63, 24, 0.2);
}

.settings-section,
.stat-card,
.streak-card,
.leaderboard-card,
.word-progress-card,
.daily-reminder-card {
    border: 1px solid var(--brand-line);
    background: var(--brand-paper);
    box-shadow: 0 12px 30px rgba(23, 50, 77, 0.07);
}

.settings-section h2 {
    color: var(--brand-ink);
    letter-spacing: -0.01em;
    text-transform: none;
}

.theme-card.active,
.lang-card.active {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 4px rgba(199, 81, 31, 0.13);
}

.preview-study {
    background: var(--brand-canvas);
}

.preview-study .prev-bar,
.preview-study .prev-card {
    background: var(--brand-paper);
}

.preview-study .prev-dot {
    border-color: var(--brand-orange);
    background: var(--brand-orange-soft);
}

.preview-study .prev-line {
    background: #dfd7ce;
}

[data-theme="study"] .heatmap-cell[data-level="1"],
[data-theme="study"] .legend-cell[data-level="1"] {
    background: #f4d6c4;
}

[data-theme="study"] .heatmap-cell[data-level="2"],
[data-theme="study"] .legend-cell[data-level="2"] {
    background: #df8659;
}

[data-theme="study"] .heatmap-cell[data-level="3"],
[data-theme="study"] .legend-cell[data-level="3"] {
    background: var(--brand-orange);
}

.stat-card.streak .stat-value,
.streak-icon {
    color: var(--brand-gold);
}

@media (prefers-color-scheme: dark) {
    :root,
    html,
    body,
    button,
    input,
    select,
    textarea {
        color-scheme: light only !important;
    }

    html,
    body.portal-shell-ready {
        background: var(--brand-canvas) !important;
        color: var(--brand-ink) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal-shell-ready *,
    .home-progress *,
    .practice-library-shell *,
    .aichat-wrap *,
    .profile-container *,
    #app * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}