/* =============================================
   Warm Study — Natural Theme Override
   Warm Beige · Charcoal · Warm Brown/Tan
   ============================================= */

/* ── CSS Variables ─────────────────────────── */
:root {
    --qt-ivory:      #F7F6F3;
    --qt-paper:      #F7F6F3;
    --qt-warm:       #E9E7E2;
    --qt-charcoal:   #2E2E2E;
    --qt-gray:       #8E8E8E;
    --qt-gray-light: #B8B2A4;
    --qt-brown:      #B8B2A4;
    --qt-brown-dark: #2E2E2E;
    --qt-dusty:      #D6D2C6;
    --qt-line:       #D6D2C6;
    --qt-radius:     12px;
    --qt-radius-sm:  8px;
    --qt-radius-pill:999px;

    /* Override app vars */
    --app-base:         var(--qt-ivory);
    --app-surface:      var(--qt-paper);
    --app-section:      var(--qt-warm);
    --app-text:         var(--qt-charcoal);
    --app-muted:        var(--qt-gray);
    --app-primary:      var(--qt-brown);
    --app-sub-accent:   var(--qt-dusty);
    --app-border:       var(--qt-line);
    --app-radius-card:  var(--qt-radius);
    --app-radius-control: var(--qt-radius-sm);
    --app-line-height:  1.72;

    /* --color-* vars (consumed by scoped CSS fallbacks) */
    --color-text:         #2E2E2E;
    --color-text-muted:   #8E8E8E;
    --color-surface:      #F7F6F3;
    --color-surface-muted:#E9E7E2;
    --color-bg:           #F7F6F3;
    --color-border:       #D6D2C6;
    --color-accent:       #B8B2A4;
    --color-accent-dark:  #2E2E2E;
    --color-brass:        #B8B2A4;
    --radius-card:        12px;
    --radius-large:       14px;
    --shadow-soft:        0 18px 44px rgba(46, 46, 46, 0.08);
    --shadow-card:        0 10px 26px rgba(46, 46, 46, 0.06);
}

/* ── Body ───────────────────────────────────── */
body {
    background: var(--qt-ivory) !important;
    color: var(--qt-charcoal) !important;
    font-family: "Georgia", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif !important;
    -webkit-font-smoothing: antialiased;
}

/* ── Typography ─────────────────────────────── */
h1, h2, h3, h4, h5 {
    font-family: "Georgia", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif !important;
    color: var(--qt-charcoal) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
}

/* UI要素（ボタン・ラベル・ナビ）はサンセリフを維持 */
.btn, .nav-link, .badge, .form-label,
.bottom-nav-label, input, select, textarea,
.small, small, .text-muted {
    font-family: "Inter", "Noto Sans JP", "Segoe UI", sans-serif !important;
}

p, li, label, .form-text, .form-label {
    color: var(--qt-charcoal) !important;
}

.text-muted { color: var(--qt-gray) !important; }
.text-success { color: var(--qt-brown-dark) !important; }

/* ── Cards ──────────────────────────────────── */
.card {
    background: var(--qt-paper) !important;
    border: 1px solid var(--qt-line) !important;
    border-radius: var(--qt-radius) !important;
    box-shadow: 0 2px 16px rgba(44, 36, 24, 0.06) !important;
    transition: box-shadow 0.2s ease !important;
}

.card:hover {
    transform: none !important;
    box-shadow: 0 4px 24px rgba(44, 36, 24, 0.10) !important;
}

/* ── Buttons ─────────────────────────────────── */
.btn-primary,
.btn-success,
.btn-warning {
    background: var(--qt-brown) !important;
    border-color: var(--qt-brown) !important;
    color: #fff !important;
    border-radius: var(--qt-radius-pill) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    box-shadow: none !important;
    padding: 0.62rem 1.35rem !important;
    transition: background 0.18s ease, transform 0.15s ease !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-warning:hover {
    background: var(--qt-brown-dark) !important;
    border-color: var(--qt-brown-dark) !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-secondary {
    background: var(--qt-warm) !important;
    border-color: var(--qt-line) !important;
    color: var(--qt-charcoal) !important;
    border-radius: var(--qt-radius-pill) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.btn-secondary:hover {
    background: #E5DDD0 !important;
    transform: none !important;
}

.btn-outline-primary {
    color: var(--qt-charcoal) !important;
    border-color: var(--qt-line) !important;
    background: transparent !important;
    border-radius: var(--qt-radius-pill) !important;
    font-weight: 500 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--qt-warm) !important;
    border-color: #C8BFB0 !important;
    color: var(--qt-charcoal) !important;
}

.btn-outline-secondary {
    color: var(--qt-gray) !important;
    border-color: var(--qt-line) !important;
    background: transparent !important;
    border-radius: var(--qt-radius-pill) !important;
    font-weight: 500 !important;
}

.btn-outline-secondary:hover {
    background: var(--qt-warm) !important;
    color: var(--qt-charcoal) !important;
    border-color: #C8BFB0 !important;
}

/* ── Forms ──────────────────────────────────── */
.form-control,
.form-select,
textarea.form-control {
    background: var(--qt-paper) !important;
    border-color: var(--qt-line) !important;
    color: var(--qt-charcoal) !important;
    border-radius: var(--qt-radius-sm) !important;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: var(--qt-brown) !important;
    box-shadow: 0 0 0 3px rgba(139, 112, 64, 0.15) !important;
    background: var(--qt-paper) !important;
}

textarea.form-control {
    border: 1px solid var(--qt-line) !important;
}

/* ── Section Soft ───────────────────────────── */
.section-soft {
    background: var(--qt-warm) !important;
}

/* ── Alerts ─────────────────────────────────── */
.alert-success {
    background: rgba(139, 112, 64, 0.10) !important;
    border-color: rgba(139, 112, 64, 0.28) !important;
    color: var(--qt-brown-dark) !important;
    border-radius: var(--qt-radius-sm) !important;
}

.alert-warning {
    background: rgba(180, 155, 90, 0.10) !important;
    border-color: rgba(180, 155, 90, 0.28) !important;
    border-radius: var(--qt-radius-sm) !important;
}

.alert-danger {
    background: rgba(160, 90, 80, 0.10) !important;
    border-color: rgba(160, 90, 80, 0.28) !important;
    border-radius: var(--qt-radius-sm) !important;
}

.alert-info {
    background: rgba(122, 141, 119, 0.10) !important;
    border-color: rgba(122, 141, 119, 0.28) !important;
    color: #4A6B58 !important;
    border-radius: var(--qt-radius-sm) !important;
}

/* ── Badges ─────────────────────────────────── */
.badge.bg-success {
    background: var(--qt-brown) !important;
    border-color: var(--qt-brown) !important;
}

/* ── Bottom Nav ─────────────────────────────── */
.bottom-nav {
    background: rgba(253, 251, 247, 0.95) !important;
    border-top-color: var(--qt-line) !important;
    box-shadow: 0 -2px 20px rgba(44, 36, 24, 0.07) !important;
    backdrop-filter: blur(16px) !important;
}

.bottom-nav-icon-shell--primary {
    background: var(--qt-charcoal) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(44, 36, 24, 0.22) !important;
}

.bottom-nav-icon-svg--plus {
    stroke: #fff !important;
}

.bottom-nav-item.active .bottom-nav-label,
.bottom-nav-item.active .bottom-nav-icon-shell {
    color: var(--qt-charcoal) !important;
}

.bottom-nav-icon-shell {
    color: var(--qt-gray) !important;
}

.bottom-nav-label {
    color: var(--qt-gray) !important;
}

/* ── Scrollbar ──────────────────────────────── */
::-webkit-scrollbar-thumb {
    background: #C8BFB0 !important;
    border-color: var(--qt-ivory) !important;
}

::-webkit-scrollbar-track {
    background: var(--qt-warm) !important;
}

/* ── Modal ──────────────────────────────────── */
.modal-content {
    background: var(--qt-paper) !important;
    border-color: var(--qt-line) !important;
    border-radius: var(--qt-radius) !important;
}

/* ── List group ─────────────────────────────── */
.list-group-item {
    background: var(--qt-paper) !important;
    border-color: var(--qt-line) !important;
    color: var(--qt-charcoal) !important;
}

/* ── Tables ──────────────────────────────────── */
.table th, .table td {
    color: var(--qt-charcoal) !important;
    border-color: var(--qt-line) !important;
}

/* ── Dropdown ───────────────────────────────── */
.dropdown-menu {
    background: var(--qt-paper) !important;
    border-color: var(--qt-line) !important;
    border-radius: var(--qt-radius-sm) !important;
    box-shadow: 0 8px 32px rgba(44, 36, 24, 0.12) !important;
}

.dropdown-item {
    color: var(--qt-charcoal) !important;
}

.dropdown-item:hover {
    background: var(--qt-warm) !important;
}

/* ── Auth pages ──────────────────────────────── */
.auth-visual {
    background: linear-gradient(140deg, #2E2E2E 0%, #8E8E8E 54%, #D6D2C6 100%) !important;
}

.register-visual {
    background: linear-gradient(140deg, #2E3A30 0%, #4A6B58 50%, #7A8D77 100%) !important;
}

.auth-social-btn {
    border-color: var(--qt-line) !important;
    background: var(--qt-paper) !important;
    color: var(--qt-charcoal) !important;
    border-radius: var(--qt-radius-sm) !important;
}

.auth-input {
    border-color: var(--qt-line) !important;
    border-radius: var(--qt-radius-sm) !important;
}

.auth-submit {
    border-radius: var(--qt-radius-pill) !important;
}

/* ── FAQ ────────────────────────────────────── */
.faq-item {
    background: var(--qt-paper) !important;
    border-color: var(--qt-line) !important;
    border-radius: var(--qt-radius-sm) !important;
}

.faq-question {
    color: var(--qt-charcoal) !important;
}

.faq-question:hover,
.faq-item.is-open .faq-question,
.faq-item[open] > .faq-question {
    color: var(--qt-brown-dark) !important;
}

.faq-answer {
    color: var(--qt-gray) !important;
}

/* ── Score card ──────────────────────────────── */
.score-card {
    background: var(--qt-warm) !important;
    border-color: var(--qt-line) !important;
}

.score-card__title {
    color: var(--qt-brown-dark) !important;
}

.score-card__cefr {
    background: var(--qt-brown-dark) !important;
}

.score-row__track {
    background: var(--qt-line) !important;
}

.score-row__fill {
    background: linear-gradient(90deg, var(--qt-brown-dark), var(--qt-brown)) !important;
}

/* ── Profile page ────────────────────────────── */
.pf-hero-banner {
    background: linear-gradient(135deg, #2E2E2E 0%, #8E8E8E 60%, #D6D2C6 100%) !important;
}

.pf-avatar {
    background: linear-gradient(135deg, #8E8E8E 0%, #D6D2C6 100%) !important;
}

/* ── Plan compare table ─────────────────────── */
.plan-compare-table th.col-pro {
    background: rgba(139, 112, 64, 0.10) !important;
    color: var(--qt-brown-dark) !important;
}

.plan-compare-table .check-icon {
    color: var(--qt-brown-dark) !important;
}

/* ── Dashboard shell ─────────────────────────── */
body:not(.dark-mode) .dashboard-shell .metric-card,
body:not(.dark-mode) .dashboard-shell .chart-card,
body:not(.dark-mode) .dashboard-shell .latest-section {
    background: var(--qt-paper) !important;
    border-color: var(--qt-line) !important;
    color: var(--qt-charcoal) !important;
}

/* ── Milestone banner ────────────────────────── */
.milestone-banner {
    background: rgba(139, 112, 64, 0.08) !important;
    border-color: rgba(139, 112, 64, 0.22) !important;
}

.milestone-badge-text strong {
    color: var(--qt-brown-dark) !important;
}

/* ── Form select ─────────────────────────────── */
.form-select {
    background-color: var(--qt-paper) !important;
    border-color: var(--qt-line) !important;
    box-shadow: none !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236A5F52' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: 14px 14px !important;
}

.form-select:focus {
    border-color: var(--qt-brown) !important;
    box-shadow: 0 0 0 3px rgba(139, 112, 64, 0.15) !important;
}

/* ── Disable hover lift on mobile buttons ────── */
@media (max-width: 768px) {
    .btn {
        border-radius: var(--qt-radius-pill) !important;
    }
}

/* ── Growth chips ────────────────────────────── */
.growth-page .growth-chip.is-active {
    border-color: var(--qt-brown-dark) !important;
    background: var(--qt-brown-dark) !important;
    box-shadow: none !important;
}

.growth-page .growth-chip {
    border-color: var(--qt-line) !important;
    background: var(--qt-paper) !important;
    color: var(--qt-charcoal) !important;
}

.growth-page .growth-card,
.growth-page .growth-panel,
.growth-page .growth-window {
    border-color: var(--qt-line) !important;
    background: var(--qt-paper) !important;
    box-shadow: none !important;
}

/* ── Auto vocab ──────────────────────────────── */
.diary-auto-vocab-card {
    border-left-color: rgba(139, 112, 64, 0.45) !important;
}

/* ── Landing page buttons (ln-btn-*) ─────────── */
.ln-btn-brass,
.ln-btn-night {
    background: var(--qt-brown) !important;
    border-color: var(--qt-brown) !important;
    color: #fff !important;
}

.ln-btn-brass:hover,
.ln-btn-night:hover:not(:disabled) {
    background: var(--qt-brown-dark) !important;
    border-color: var(--qt-brown-dark) !important;
}

.ln-nav-cta {
    background: var(--qt-brown) !important;
    color: #fff !important;
}

.ln-nav-cta:hover {
    background: var(--qt-brown-dark) !important;
    color: #fff !important;
}

/* ── Diary page — override residual indigo/blue ─────────────────── */

.diary-page-kicker {
    color: var(--qt-brown-dark) !important;
    background: rgba(139, 112, 64, 0.10) !important;
}

.diary-first-run-kicker,
.diary-next-action-kicker,
.correction-takeaway__kicker {
    color: var(--qt-brown-dark) !important;
}

.diary-first-run-coach {
    border-color: rgba(139, 112, 64, 0.28) !important;
    background: rgba(139, 112, 64, 0.05) !important;
}

.diary-prompt-banner {
    border-color: rgba(139, 112, 64, 0.28) !important;
    background: linear-gradient(180deg, rgba(139, 112, 64, 0.07), rgba(253, 251, 247, 0.96)) !important;
    color: var(--qt-charcoal) !important;
}

.formality-selector {
    background: var(--qt-warm) !important;
    border-color: var(--qt-line) !important;
}

.formality-selector .btn {
    border-color: var(--qt-line) !important;
    background: rgba(253, 251, 247, 0.96) !important;
    color: var(--qt-charcoal) !important;
}

.formality-selector .btn-check:checked + .btn {
    background: var(--qt-brown) !important;
    border-color: var(--qt-brown) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(139, 112, 64, 0.26) !important;
    transform: none !important;
}

.diary-tab-button.active {
    background: var(--qt-charcoal) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(44, 36, 24, 0.2) !important;
}

.ai-progress-card {
    background: rgba(139, 112, 64, 0.05) !important;
    border-color: rgba(139, 112, 64, 0.28) !important;
    box-shadow: none !important;
}

.ai-progress-step--active { color: var(--qt-brown) !important; }
.ai-progress-step--done   { color: var(--qt-brown-dark) !important; }

.ai-progress-step--done .ai-progress-step__marker {
    background: var(--qt-brown-dark) !important;
    border-color: var(--qt-brown-dark) !important;
}

.ai-progress-spinner {
    border-color: rgba(139, 112, 64, 0.22) !important;
    border-top-color: var(--qt-brown) !important;
}

.diary-redpen-overlay,
.diary-typewriter-overlay {
    background: var(--qt-paper) !important;
    border-color: rgba(139, 112, 64, 0.38) !important;
    box-shadow: 0 0 0 0.22rem rgba(139, 112, 64, 0.12) !important;
}

.typewriter-caret { background: var(--qt-brown) !important; }

.result-heading-primary {
    background: rgba(139, 112, 64, 0.09) !important;
    color: var(--qt-brown-dark) !important;
    border-left-color: var(--qt-brown) !important;
}

.result-heading-cefr,
.result-heading-explanation {
    background: rgba(139, 112, 64, 0.07) !important;
    color: var(--qt-brown-dark) !important;
    border-left-color: var(--qt-brown-dark) !important;
}

.result-heading-feedback {
    background: rgba(180, 162, 122, 0.10) !important;
    color: #8C7030 !important;
    border-left-color: #B8A27A !important;
}

.result-heading-reply {
    background: rgba(122, 141, 119, 0.09) !important;
    color: #4A6B58 !important;
    border-left-color: #7A8D77 !important;
}

.card-chip {
    color: var(--qt-brown-dark) !important;
    background: rgba(139, 112, 64, 0.10) !important;
}

.selection-badge {
    color: var(--qt-brown-dark) !important;
}

.vocab-card.selected {
    border-color: var(--qt-brown) !important;
    box-shadow: 0 0 0 2px rgba(139, 112, 64, 0.18), 0 6px 20px rgba(44, 36, 24, 0.08) !important;
}

.page-dot.active { background: var(--qt-brown-dark) !important; }

.diary-next-action-panel,
.diary-empty-start-panel {
    background: rgba(139, 112, 64, 0.05) !important;
    border-color: rgba(139, 112, 64, 0.22) !important;
}

/* ── VocabularyTextExtractor (Collection Room) ───────────────── */
.extract-hero {
    background: linear-gradient(135deg, var(--qt-paper) 0%, rgba(139, 112, 64, 0.06) 100%) !important;
}

.result-head h2 {
    font-weight: 700 !important;
}

/* ── VocabularyList (語彙棚) ─────────────────────────────────── */
.catalog-toolbar {
    background: rgba(253, 251, 247, 0.95) !important;
    border-bottom-color: var(--qt-line) !important;
    box-shadow: 0 2px 12px rgba(44, 36, 24, 0.06) !important;
}

/* ============================================================
   Application shell overrides
   ============================================================ */

body.lx-world,
body.lx-world.dark-mode {
    --bg-app: var(--qt-ivory);
    --bg-paper: var(--qt-paper);
    --bg-paper-deep: var(--qt-warm);
    --ink: var(--qt-charcoal);
    --muted-ink: var(--qt-gray);
    --wood-dark: var(--qt-paper);
    --wood-mid: var(--qt-warm);
    --leather-brown: var(--qt-brown);
    --leather-blue: var(--qt-dusty);
    --leather-green: var(--qt-brown-dark);
    --brass: var(--qt-brown);
    --border-soft: var(--qt-line);
    --shadow-soft: rgba(44, 36, 24, 0.08);
    --lx-sidebar-bg: var(--qt-paper);
    --lx-sidebar-fg: var(--qt-gray);
    --lx-sidebar-active: var(--qt-charcoal);
    --lx-sidebar-hover: var(--qt-warm);
    --lx-gold: var(--qt-brown);
    --lx-gold-soft: rgba(139, 112, 64, 0.10);
    --bs-primary: #2E2E2E;
    --bs-primary-rgb: 46, 46, 46;
    color-scheme: light;
    accent-color: var(--qt-brown);
}

/* サイドバーを紙色に変えたため、ロゴ(lexion)を明るい色のままにすると
   アイボリー地にアイボリー文字で消える。チャコールで読めるようにする。 */
body.lx-world .lex-rail-logo {
    color: var(--qt-charcoal) !important;
}

/* スライドアウトメニュー(ドロワー) — アイボリー面で読めるように。
   旧チャコール背景前提の薄色指定(near-white文字/アイコン、
   45%不透明のセクション見出し)が紙色背景でほぼ見えなくなるため上書き。 */
body.lx-world .nav-scrollable .nav-group-label {
    color: var(--qt-gray) !important;
    opacity: 1 !important;
}

body.lx-world .nav-scrollable .nav-link {
    color: var(--qt-charcoal) !important;
}

body.lx-world .nav-scrollable .nav-link i {
    color: var(--qt-brown) !important;
}

body.lx-world .nav-scrollable .nav-link:hover {
    background: var(--qt-warm) !important;
    color: var(--qt-charcoal) !important;
}

body.lx-world .nav-scrollable .nav-link:hover i {
    color: var(--qt-brown-dark) !important;
}

body.lx-world .nav-scrollable .nav-link.active,
body.lx-world .nav-scrollable .active > .nav-link {
    background: rgba(139, 112, 64, 0.12) !important;
    color: var(--qt-brown-dark) !important;
}

body.lx-world .nav-scrollable .nav-link.active i,
body.lx-world .nav-scrollable .active > .nav-link i {
    color: var(--qt-brown-dark) !important;
}

body.lx-world .page:not(.page--landing),
body.lx-world .page:not(.page--landing) main,
body.lx-world .page:not(.page--landing) .content,
body.lx-world.dark-mode .page,
body.lx-world.dark-mode main,
body.lx-world.dark-mode .content {
    background: var(--qt-ivory) !important;
    background-image: none !important;
    color: var(--qt-charcoal) !important;
}

body.lx-world .page:not(.page--landing) .content {
    min-height: 100vh;
}

/* ============================================================
   Collection Room (DiaryList) — ダーク書斎 → ミニマル昼の書斎
   参考イメージ: クリーム・薄セージの本、温かい木の棚
   ============================================================ */

/* 部屋全体 — 近黒 → ウォームアイボリー */
.collection-room {
    background: var(--qt-ivory) !important;
    color: var(--qt-charcoal) !important;
    border-color: var(--qt-line) !important;
    box-shadow: 0 2px 24px rgba(44, 36, 24, 0.06) !important;
}

.collection-header h1 { color: var(--qt-charcoal) !important; }
.collection-header p  { color: var(--qt-gray) !important; }
.collection-kicker    { color: var(--qt-brown) !important; }

/* 年選択 */
.year-selector span { color: var(--qt-gray) !important; }
.year-selector strong { color: var(--qt-charcoal) !important; }
.year-selector button,
.year-dots button,
.calendar-heading button { color: var(--qt-gray) !important; }

/* 本棚フレーム — 明るいナチュラルウッド */
.bookshelf-frame {
    background: linear-gradient(180deg, #C8A878 0%, #B89660 30%, #A8865A 100%) !important;
    border-color: #C4A070 !important;
    box-shadow: 0 8px 24px rgba(44, 36, 24, 0.14) !important;
}

/* 棚の背面 — ウォームペーパー（明るい書斎の内壁） */
.shelf-back {
    background: var(--qt-warm) !important;
    box-shadow: inset 0 0 20px rgba(44, 36, 24, 0.06) !important;
}

/* 棚板 — ナチュラルオーク */
.wood-shelf {
    background: linear-gradient(#C4A070, #B08850) !important;
    border-top-color: #D4B480 !important;
    box-shadow: 0 5px 10px rgba(44, 36, 24, 0.16),
                inset 0 1px rgba(255,255,255,0.25) !important;
}

/* 月ごとの本の色 — クリーム・セージ・オフホワイト系（参考画像の明るいトーン） */
.month-book {
    color: var(--qt-charcoal) !important;
    box-shadow: inset 3px 0 rgba(255,255,255,0.5),
                inset -3px 0 rgba(44,36,24,0.10),
                2px 3px 8px rgba(44,36,24,0.14) !important;
}

.book-tone-m1  { background-color: #D8DDE0 !important; } /* 1月 — 冬霞のグレー */
.book-tone-m2  { background-color: #DDD8E2 !important; } /* 2月 — 薄紫がかった白 */
.book-tone-m3  { background-color: #D4DDD0 !important; } /* 3月 — 若芽のセージ */
.book-tone-m4  { background-color: #CCDAC4 !important; } /* 4月 — 春の薄緑 */
.book-tone-m5  { background-color: #D8D8C4 !important; } /* 5月 — 薄い苔色 */
.book-tone-m6  { background-color: #E0D8C4 !important; } /* 6月 — 薄い砂色 */
.book-tone-m7  { background-color: #E4D8C0 !important; } /* 7月 — 麦わら */
.book-tone-m8  { background-color: #E0D0BC !important; } /* 8月 — 淡いテラコッタ */
.book-tone-m9  { background-color: #D8CCBC !important; } /* 9月 — 薄い錆 */
.book-tone-m10 { background-color: #D4CCC0 !important; } /* 10月 — 薄い小麦 */
.book-tone-m11 { background-color: #D0CCC8 !important; } /* 11月 — 薄灰 */
.book-tone-m12 { background-color: #CCD4D0 !important; } /* 12月 — 冬の薄緑 */
.book-tone-sand    { background-color: #E0D8C4 !important; }
.book-tone-walnut  { background-color: #D8D0C4 !important; }
.book-tone-navy    { background-color: #CDD4DC !important; }
.book-tone-leather { background-color: #D4CCC8 !important; }

/* 本の文字色 — 明るい背景に合わせてダークに */
.book-month,
.book-name,
.book-count,
.book-vocab { color: var(--qt-charcoal) !important; }
.book-cap { border-color: rgba(44,36,24,0.25) !important; }
.book-mark { border-color: rgba(44,36,24,0.30) !important; color: var(--qt-gray) !important; }

/* DiaryList の日記本（個別エントリ）も同様にライトトーン */
.month-book.is-empty { opacity: 0.40 !important; }

/* 月ごとのサマリー行 */
.year-summary {
    background: rgba(245, 240, 232, 0.88) !important;
    border-color: var(--qt-line) !important;
    color: var(--qt-charcoal) !important;
}

.year-summary small { color: var(--qt-gray) !important; }
.year-summary strong { color: var(--qt-charcoal) !important; }

.year-dots button { background: #C4B8A4 !important; }
.year-dots button.is-active {
    background: var(--qt-brown) !important;
    box-shadow: 0 0 0 3px rgba(139, 112, 64, 0.18) !important;
}

/* アーカイブ通知 */
.archive-notice {
    background: rgba(245, 240, 232, 0.92) !important;
    border-color: var(--qt-line) !important;
    color: var(--qt-charcoal) !important;
}

/* 本の選択後の表紙 — 棚の本と同じ落ち着いた砂色トーンに統一 */
.selected-cover {
    background: #E2DACA !important;
    border-color: var(--qt-line) !important;
    color: var(--qt-charcoal) !important;
    box-shadow: inset 6px 0 rgba(255, 255, 255, 0.45),
                inset -3px 0 rgba(44, 36, 24, 0.08),
                12px 18px 32px rgba(44, 36, 24, 0.22) !important;
}

.selected-cover small { color: var(--qt-gray) !important; }
.selected-cover i { border-color: rgba(139, 112, 64, 0.45) !important; color: var(--qt-brown) !important; }

/* ツールバーボタン */
.index-toolbar button,
.reader-toolbar button,
.reader-toolbar a {
    background: rgba(245, 240, 232, 0.90) !important;
    border-color: var(--qt-line) !important;
    color: var(--qt-charcoal) !important;
}

.index-toolbar button.is-active {
    border-color: var(--qt-brown) !important;
    color: var(--qt-brown-dark) !important;
}

/* Collection Room の write ボタン */
.collection-write,
.stage-close {
    background: rgba(245, 240, 232, 0.88) !important;
    border-color: var(--qt-line) !important;
    color: var(--qt-charcoal) !important;
}

.collection-write:hover {
    border-color: var(--qt-brown) !important;
    color: var(--qt-brown-dark) !important;
}

/* ローディング */
.collection-loading-mark {
    background: rgba(139, 112, 64, 0.12) !important;
    border-color: var(--qt-brown) !important;
    color: var(--qt-brown-dark) !important;
}

/* ============================================================
   Diary (Journal Entry) — ダーク外装 → ライト書斎スタイル
   ============================================================ */

/* ワークスペース全体の近黒背景 → ウォームアイボリー */
.diary-workspace {
    background:
        radial-gradient(circle at 50% -20%, rgba(139, 112, 64, 0.14), transparent 40%),
        var(--qt-ivory) !important;
    color: var(--qt-charcoal) !important;
    border-color: var(--qt-line) !important;
    box-shadow: 0 2px 24px rgba(44, 36, 24, 0.07) !important;
}

/* ページヘッダー (ENGLISH DIARY / Journal Entry) */
.diary-workspace .diary-page-header {
    color: var(--qt-charcoal) !important;
}

.diary-workspace .diary-page-kicker,
.diary-workspace .diary-page-date {
    color: var(--qt-brown) !important;
}

.diary-workspace .diary-page-title {
    color: var(--qt-charcoal) !important;
    font: 400 clamp(1.55rem, 3vw, 2.35rem)/1 Georgia, "Yu Mincho", serif;
}

/* ブックマークボタン */
.journal-bookmark {
    background: rgba(245, 240, 232, 0.88) !important;
    border-color: var(--qt-line) !important;
    color: var(--qt-charcoal) !important;
}

.journal-bookmark i { color: var(--qt-brown) !important; }

/* 日記カード外装（本の表紙）— ダーク → ウォームウォルナット */
.diary-workspace .diary-writing-card {
    border-color: #8B6840 !important;
    background: #8B6840 !important;
    box-shadow:
        -5px 6px 0 -2px #EFE2C4,
        -9px 10px 0 -3px #E6D8B8,
        -13px 14px 0 -4px #D8C8A0,
        -17px 19px 0 -6px #C6B487,
        5px 6px 0 -2px #EFE2C4,
        9px 10px 0 -3px #E6D8B8,
        13px 14px 0 -4px #D8C8A0,
        17px 19px 0 -6px #C6B487,
        0 15px 0 -1px #B8B2A4,
        0 21px 0 -2px #4A3818,
        0 30px 40px -12px rgba(44,36,24,0.30),
        0 60px 90px rgba(44,36,24,0.22) !important;
}

/* ============================================================
   VocabularyList サイドバー — ダーク → ライトペーパー
   ============================================================ */

.catalog-sidebar {
    background: var(--qt-paper) !important;
    border-right: 1px solid var(--qt-line) !important;
}

.catalog-sidebar-brand {
    color: var(--qt-charcoal) !important;
    border-bottom-color: var(--qt-line) !important;
}

.sidebar-section-label {
    color: var(--qt-gray-light) !important;
}

.sidebar-item {
    color: var(--qt-gray) !important;
}

.sidebar-item:hover {
    background: var(--qt-warm) !important;
    color: var(--qt-charcoal) !important;
}

.sidebar-item.active {
    background: rgba(139, 112, 64, 0.12) !important;
    color: var(--qt-brown-dark) !important;
}

/* 棚板の色（語彙棚ページ） */
.shelf-plank {
    background: linear-gradient(180deg, #C4A070, #A8824E) !important;
}

@media (max-width: 640px) {
    body.lx-world .top-row.navbar {
        background: #1F2422 !important;
        border-bottom-color: rgba(246, 241, 232, 0.08) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.lx-world .top-row.navbar .navbar-brand,
    body.lx-world .top-row.navbar .brand-wordmark {
        color: #F6F1E8 !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

    body.lx-world .top-row.navbar .header-icon,
    body.lx-world .top-row.navbar .notification-button {
        color: #D6C9B4 !important;
        opacity: 1 !important;
    }

    body.lx-world .top-row.navbar .header-icon:hover,
    body.lx-world .top-row.navbar .header-icon:focus-visible,
    body.lx-world .top-row.navbar .notification-button:hover,
    body.lx-world .top-row.navbar .notification-button:focus-visible {
        background: rgba(246, 241, 232, 0.08) !important;
        color: #F6F1E8 !important;
    }

    body.lx-world .top-row.navbar .navbar-toggler {
        color: #D6C9B4 !important;
        opacity: 1 !important;
        background: transparent
            url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28214, 201, 180, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M5 8h20M5 15h20M5 22h20'/%3e%3c/svg%3e")
            no-repeat center/1.35rem !important;
    }

    body.lx-world .bottom-nav {
        background: #1F2422 !important;
        border-top-color: rgba(246, 241, 232, 0.08) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Final sidebar readability pass. Must stay after the app-wide palette rules. */
body.lx-world .nav-scrollable,
body.lx-world.dark-mode .nav-scrollable {
    background: #23221F !important;
    color: #D6D2C6 !important;
}

body.lx-world .nav-scrollable .nav-group-label,
body.lx-world.dark-mode .nav-scrollable .nav-group-label {
    color: #B8B2A4 !important;
    opacity: 1 !important;
}

body.lx-world .nav-scrollable .nav-link,
body.lx-world .nav-scrollable .btn.nav-link,
body.lx-world .nav-scrollable .nav-link i,
body.lx-world.dark-mode .nav-scrollable .nav-link,
body.lx-world.dark-mode .nav-scrollable .btn.nav-link,
body.lx-world.dark-mode .nav-scrollable .nav-link i {
    color: #D6D2C6 !important;
    opacity: 1 !important;
}

body.lx-world .nav-scrollable .nav-link:hover,
body.lx-world .nav-scrollable .nav-link:focus-visible,
body.lx-world .nav-scrollable .btn.nav-link:hover,
body.lx-world .nav-scrollable .btn.nav-link:focus-visible,
body.lx-world .nav-scrollable .nav-link:hover i,
body.lx-world .nav-scrollable .nav-link:focus-visible i,
body.lx-world.dark-mode .nav-scrollable .nav-link:hover,
body.lx-world.dark-mode .nav-scrollable .nav-link:focus-visible,
body.lx-world.dark-mode .nav-scrollable .btn.nav-link:hover,
body.lx-world.dark-mode .nav-scrollable .btn.nav-link:focus-visible,
body.lx-world.dark-mode .nav-scrollable .nav-link:hover i,
body.lx-world.dark-mode .nav-scrollable .nav-link:focus-visible i {
    background: #34322E !important;
    color: #F7F6F3 !important;
}

body.lx-world .nav-scrollable .nav-link.active,
body.lx-world .nav-scrollable .active > .nav-link,
body.lx-world .nav-scrollable .nav-link.active i,
body.lx-world .nav-scrollable .active > .nav-link i,
body.lx-world.dark-mode .nav-scrollable .nav-link.active,
body.lx-world.dark-mode .nav-scrollable .active > .nav-link,
body.lx-world.dark-mode .nav-scrollable .nav-link.active i,
body.lx-world.dark-mode .nav-scrollable .active > .nav-link i {
    background: #34322E !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

body.lx-world .nav-upgrade-btn,
body.lx-world.dark-mode .nav-upgrade-btn {
    background: rgba(247, 246, 243, 0.06) !important;
    border-color: rgba(214, 210, 198, 0.28) !important;
    color: #D6D2C6 !important;
}

body.lx-world .nav-upgrade-title,
body.lx-world.dark-mode .nav-upgrade-title {
    color: #F7F6F3 !important;
}

body.lx-world .nav-upgrade-sub,
body.lx-world .nav-upgrade-arrow,
body.lx-world .nav-upgrade-icon,
body.lx-world.dark-mode .nav-upgrade-sub,
body.lx-world.dark-mode .nav-upgrade-arrow,
body.lx-world.dark-mode .nav-upgrade-icon {
    color: #B8B2A4 !important;
}

/* Final dashboard palette pass: remove remaining sage, blue, and timber tones. */
body.lx-world .dashboard-shell {
    background: #F7F6F3 !important;
    box-shadow: none !important;
}

body.lx-world .dashboard-hero,
body.lx-world .library-cabinet,
body.lx-world .lex-shelf-card,
body.lx-world .today-mission-panel {
    background: #F7F6F3 !important;
    border: 1px solid #D6D2C6 !important;
    box-shadow: 0 12px 34px rgba(46, 46, 46, 0.075) !important;
}

body.lx-world .dashboard-hero {
    background:
        linear-gradient(120deg, rgba(233, 231, 226, 0.72), rgba(247, 246, 243, 0.96)) !important;
}

body.lx-world .dashboard-hero .lx-page-kicker,
body.lx-world .dashboard-hero .dashboard-kicker,
body.lx-world .today-mission-kicker {
    color: #8E8E8E !important;
    letter-spacing: 0.16em !important;
}

body.lx-world .dashboard-hero .lx-page-title,
body.lx-world .dashboard-hero h1,
body.lx-world .dashboard-hero h2,
body.lx-world .cabinet-heading h3,
body.lx-world .lex-card-title,
body.lx-world .today-mission-title,
body.lx-world .month-status-item strong,
body.lx-world .desk-today-stats strong,
body.lx-world .desk-streak-value strong {
    color: #2E2E2E !important;
    text-shadow: none !important;
}

body.lx-world .dashboard-hero .lx-page-sub,
body.lx-world .hero-sub,
body.lx-world .cabinet-heading a,
body.lx-world .lex-shelf-total,
body.lx-world .lex-shelf-note,
body.lx-world .lex-bars-axis,
body.lx-world .month-status-item span,
body.lx-world .desk-today-stats small,
body.lx-world .desk-streak-value span {
    color: #8E8E8E !important;
    text-shadow: none !important;
}

body.lx-world .desk-today-card,
body.lx-world .desk-streak-card,
body.lx-world .month-status-item,
body.lx-world .today-mission-item {
    background: #E9E7E2 !important;
    border-color: #D6D2C6 !important;
    color: #2E2E2E !important;
    box-shadow: inset 0 0 0 1px rgba(247, 246, 243, 0.66) !important;
}

body.lx-world .desk-card-label,
body.lx-world .desk-card-label i,
body.lx-world .today-mission-icon,
body.lx-world .today-mission-state {
    color: #565656 !important;
}

body.lx-world .desk-write-button,
body.lx-world .activation-cta {
    background: #2E2E2E !important;
    border-color: #2E2E2E !important;
    color: #F7F6F3 !important;
    box-shadow: 0 12px 26px rgba(46, 46, 46, 0.18) !important;
}

body.lx-world .desk-write-button:hover,
body.lx-world .activation-cta:hover {
    background: #565656 !important;
    border-color: #565656 !important;
    color: #F7F6F3 !important;
}

body.lx-world .desk-streak-week span {
    color: #8E8E8E !important;
}

body.lx-world .desk-streak-week span::after,
body.lx-world .desk-streak-week span.is-active::after {
    background: #B8B2A4 !important;
    border-color: #E9E7E2 !important;
    box-shadow: none !important;
}

body.lx-world .desk-streak-week span.is-active::after {
    background: #565656 !important;
}

body.lx-world .library-cabinet {
    overflow: hidden !important;
}

body.lx-world .cabinet-section,
body.lx-world .cabinet-heading {
    background: #F7F6F3 !important;
    border-color: #D6D2C6 !important;
    box-shadow: none !important;
}

body.lx-world .cabinet-diaries {
    border-right-color: #D6D2C6 !important;
}

body.lx-world .diary-books,
body.lx-world .word-books {
    border-bottom-color: #B8B2A4 !important;
    box-shadow: inset 0 -4px 0 #D6D2C6 !important;
}

body.lx-world .diary-book,
body.lx-world .diary-book--0,
body.lx-world .diary-book--1,
body.lx-world .diary-book--2,
body.lx-world .diary-book--3,
body.lx-world .diary-book--4 {
    background: linear-gradient(100deg, #E9E7E2 0%, #D6D2C6 100%) !important;
    border-color: #B8B2A4 !important;
    color: #2E2E2E !important;
    box-shadow:
        inset 3px 0 rgba(247, 246, 243, 0.6),
        inset -4px 0 rgba(46, 46, 46, 0.07),
        2px 4px 9px rgba(46, 46, 46, 0.11) !important;
}

body.lx-world .diary-book:nth-child(3n+1) {
    background: linear-gradient(100deg, #F7F6F3 0%, #E9E7E2 100%) !important;
}

body.lx-world .diary-book:nth-child(3n+2) {
    background: linear-gradient(100deg, #D6D2C6 0%, #B8B2A4 100%) !important;
}

body.lx-world .diary-book-date,
body.lx-world .diary-book-words {
    color: #565656 !important;
}

body.lx-world .diary-book-date::before,
body.lx-world .diary-book-date::after,
body.lx-world .diary-book::after {
    background: #565656 !important;
}

body.lx-world .diary-book-add {
    background: rgba(247, 246, 243, 0.4) !important;
    border-color: #D6D2C6 !important;
    color: #8E8E8E !important;
}

body.lx-world .lex-shelf-card .lex-bars {
    border-bottom-color: #B8B2A4 !important;
    box-shadow: inset 0 -1px 0 #D6D2C6 !important;
}

body.lx-world .lex-shelf-card .lex-bar,
body.lx-world .lex-shelf-card .lex-bar-col:nth-child(5n+1) .lex-bar:not(.is-empty),
body.lx-world .lex-shelf-card .lex-bar-col:nth-child(5n+2) .lex-bar:not(.is-empty),
body.lx-world .lex-shelf-card .lex-bar-col:nth-child(5n+3) .lex-bar:not(.is-empty),
body.lx-world .lex-shelf-card .lex-bar-col:nth-child(5n+4) .lex-bar:not(.is-empty),
body.lx-world .lex-shelf-card .lex-bar-col:nth-child(5n) .lex-bar:not(.is-empty),
body.lx-world .lex-spine,
body.lx-world .lex-spine--0,
body.lx-world .lex-spine--1,
body.lx-world .lex-spine--2,
body.lx-world .lex-spine--3,
body.lx-world .lex-spine--4 {
    background: linear-gradient(100deg, #E9E7E2 0%, #D6D2C6 100%) !important;
    border-color: #B8B2A4 !important;
    box-shadow:
        inset 3px 0 rgba(247, 246, 243, 0.58),
        inset -3px 0 rgba(46, 46, 46, 0.07),
        2px 3px 8px rgba(46, 46, 46, 0.12) !important;
}

body.lx-world .lex-shelf-card .lex-bar-col:nth-child(4n+1) .lex-bar:not(.is-empty),
body.lx-world .lex-spine--1 {
    background: linear-gradient(100deg, #F7F6F3 0%, #E9E7E2 100%) !important;
}

body.lx-world .lex-shelf-card .lex-bar-col:nth-child(4n+2) .lex-bar:not(.is-empty),
body.lx-world .lex-spine--2 {
    background: linear-gradient(100deg, #D6D2C6 0%, #B8B2A4 100%) !important;
}

body.lx-world .lex-shelf-card .lex-bar.is-empty {
    background: #E9E7E2 !important;
    box-shadow: none !important;
}

/* Sidebar contrast: keep charcoal chrome, lift text back into the light palette. */
body.lx-world .sidebar,
body.lx-world .lex-rail,
body.lx-world .nav-scrollable,
body.lx-world.dark-mode .sidebar,
body.lx-world.dark-mode .lex-rail,
body.lx-world.dark-mode .nav-scrollable {
    background: #23221F !important;
    color: #D6D2C6 !important;
}

body.lx-world .nav-scrollable .nav-group-label,
body.lx-world.dark-mode .nav-scrollable .nav-group-label {
    color: #B8B2A4 !important;
    opacity: 1 !important;
}

body.lx-world .nav-scrollable .nav-link,
body.lx-world .nav-scrollable .nav-link:visited,
body.lx-world .nav-scrollable .btn.nav-link,
body.lx-world .nav-scrollable .nav-link i,
body.lx-world.dark-mode .nav-scrollable .nav-link,
body.lx-world.dark-mode .nav-scrollable .nav-link:visited,
body.lx-world.dark-mode .nav-scrollable .btn.nav-link,
body.lx-world.dark-mode .nav-scrollable .nav-link i {
    color: #D6D2C6 !important;
    opacity: 1 !important;
}

body.lx-world .nav-scrollable .nav-link:hover,
body.lx-world .nav-scrollable .nav-link:focus-visible,
body.lx-world .nav-scrollable .btn.nav-link:hover,
body.lx-world .nav-scrollable .btn.nav-link:focus-visible,
body.lx-world .nav-scrollable .nav-link:hover i,
body.lx-world .nav-scrollable .nav-link:focus-visible i,
body.lx-world.dark-mode .nav-scrollable .nav-link:hover,
body.lx-world.dark-mode .nav-scrollable .nav-link:focus-visible,
body.lx-world.dark-mode .nav-scrollable .btn.nav-link:hover,
body.lx-world.dark-mode .nav-scrollable .btn.nav-link:focus-visible,
body.lx-world.dark-mode .nav-scrollable .nav-link:hover i,
body.lx-world.dark-mode .nav-scrollable .nav-link:focus-visible i {
    background: #34322E !important;
    color: #F7F6F3 !important;
}

body.lx-world .nav-scrollable .nav-link.active,
body.lx-world .nav-scrollable .active > .nav-link,
body.lx-world .nav-scrollable .nav-link.active i,
body.lx-world .nav-scrollable .active > .nav-link i,
body.lx-world.dark-mode .nav-scrollable .nav-link.active,
body.lx-world.dark-mode .nav-scrollable .active > .nav-link,
body.lx-world.dark-mode .nav-scrollable .nav-link.active i,
body.lx-world.dark-mode .nav-scrollable .active > .nav-link i {
    background: #34322E !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

body.lx-world .nav-upgrade-cta {
    border-top-color: rgba(214, 210, 198, 0.16) !important;
}

body.lx-world .nav-upgrade-btn,
body.lx-world.dark-mode .nav-upgrade-btn {
    background: rgba(247, 246, 243, 0.06) !important;
    border-color: rgba(214, 210, 198, 0.28) !important;
    color: #D6D2C6 !important;
}

body.lx-world .nav-upgrade-title,
body.lx-world.dark-mode .nav-upgrade-title {
    color: #F7F6F3 !important;
}

body.lx-world .nav-upgrade-sub,
body.lx-world .nav-upgrade-arrow,
body.lx-world .nav-upgrade-icon,
body.lx-world.dark-mode .nav-upgrade-sub,
body.lx-world.dark-mode .nav-upgrade-arrow,
body.lx-world.dark-mode .nav-upgrade-icon {
    color: #B8B2A4 !important;
}

body.lx-world .nav-upgrade-btn:hover,
body.lx-world.dark-mode .nav-upgrade-btn:hover {
    background: rgba(247, 246, 243, 0.11) !important;
    border-color: rgba(247, 246, 243, 0.38) !important;
}

/* ============================================================
   Small Minimal palette
   Reference: white room, soft gray daylight, black typography.
   ============================================================ */

:root,
body.lx-world,
body.lx-world.dark-mode {
    --sm-wall: #F7F6F3;
    --sm-paper: #F7F6F3;
    --sm-panel: #E9E7E2;
    --sm-panel-2: #D6D2C6;
    --sm-line: #D6D2C6;
    --sm-line-strong: #B8B2A4;
    --sm-ink: #2E2E2E;
    --sm-ink-soft: #565656;
    --sm-muted: #8E8E8E;
    --sm-faint: #B8B2A4;
    --sm-warm-shadow: #B8B2A4;
    --sm-danger: #7C4B47;
    --sm-success: #666D68;
    --sm-warning: #746B5C;

    --qt-ivory: var(--sm-wall);
    --qt-paper: var(--sm-paper);
    --qt-warm: var(--sm-panel);
    --qt-charcoal: var(--sm-ink);
    --qt-gray: var(--sm-muted);
    --qt-gray-light: var(--sm-faint);
    --qt-brown: var(--sm-ink-soft);
    --qt-brown-dark: var(--sm-ink);
    --qt-dusty: var(--sm-warm-shadow);
    --qt-line: var(--sm-line);
    --qt-radius: 12px;
    --qt-radius-sm: 8px;

    --app-base: var(--sm-wall);
    --app-surface: var(--sm-paper);
    --app-section: var(--sm-panel);
    --app-text: var(--sm-ink);
    --app-muted: var(--sm-muted);
    --app-primary: var(--sm-ink);
    --app-sub-accent: var(--sm-ink-soft);
    --app-border: var(--sm-line);
    --app-radius-card: 12px;
    --app-radius-control: 8px;

    --color-bg: var(--sm-wall);
    --color-surface: var(--sm-paper);
    --color-surface-muted: var(--sm-panel);
    --color-border: var(--sm-line);
    --color-text: var(--sm-ink);
    --color-text-muted: var(--sm-muted);
    --color-accent: var(--sm-ink-soft);
    --color-accent-dark: var(--sm-ink);
    --color-brass: var(--sm-warm-shadow);

    --lx-ivory: var(--sm-wall);
    --lx-surface: var(--sm-paper);
    --lx-surface-alt: var(--sm-panel);
    --lx-ink: var(--sm-ink);
    --lx-ink-mid: var(--sm-ink-soft);
    --lx-muted: var(--sm-muted);
    --lx-faint: var(--sm-faint);
    --lx-green: var(--sm-ink-soft);
    --lx-green-mid: var(--sm-ink);
    --lx-green-soft: var(--sm-panel);
    --lx-green-btn: var(--sm-ink);
    --lx-gold: var(--sm-warm-shadow);
    --lx-gold-soft: #EFEEE9;
    --lx-line: var(--sm-line);
    --lx-line-soft: #E6E4DF;
    --lx-sidebar-bg: #23221F;
    --lx-sidebar-fg: #D7D5CF;
    --lx-sidebar-active: #FFFFFF;
    --lx-sidebar-hover: #34322E;
    --lx-settled: var(--sm-ink-soft);
    --lx-reread: #75664A;
    --lx-unsorted: var(--sm-faint);

    --lp-primary: var(--sm-ink);
    --lp-primary-strong: #2E2E2E;
    --lp-ink: var(--sm-ink);
    --lp-body: var(--sm-muted);
    --lp-muted: var(--sm-faint);
    --lp-line: var(--sm-line);
    --lp-surface: var(--sm-paper);
    --lp-tint: var(--sm-wall);
    --lp-violet-soft: var(--sm-panel);
    --bs-primary: #2E2E2E;
    --bs-primary-rgb: 46, 46, 46;
    --bs-link-color: #2E2E2E;
    --bs-link-hover-color: #2E2E2E;
    color-scheme: light;
    accent-color: var(--sm-ink);
}

html,
body,
body.lx-world,
body.lx-world.dark-mode,
body.lx-world .page:not(.page--landing),
body.lx-world .page:not(.page--landing) main,
body.lx-world .page:not(.page--landing) .content,
body.lx-world .page:not(.page--landing) .container,
body.lx-world .page:not(.page--landing) .container-fluid {
    background: var(--sm-wall) !important;
    background-color: var(--sm-wall) !important;
    color: var(--sm-ink) !important;
}

body.lx-world h1,
body.lx-world h2,
body.lx-world h3,
body.lx-world h4,
body.lx-world h5,
body.lx-world p,
body.lx-world li,
body.lx-world label,
body.lx-world .form-label,
body.lx-world .modal-title,
body.lx-world .dropdown-item {
    color: var(--sm-ink) !important;
}

body.lx-world .text-muted,
body.lx-world .form-text,
body.lx-world small,
body.lx-world .small,
body.lx-world .lp-nav-links a,
body.lx-world .lp-nav-login {
    color: var(--sm-muted) !important;
}

body.lx-world a,
body.lx-world .btn-link,
body.lx-world .nav-link:hover,
body.lx-world .lp-nav-links a:hover,
body.lx-world .lp-nav-login:hover {
    color: var(--sm-ink) !important;
}

body.lx-world .card,
body.lx-world .modal-content,
body.lx-world .dropdown-menu,
body.lx-world .list-group-item,
body.lx-world .section-soft,
body.lx-world .table,
body.lx-world .dashboard-shell .metric-card,
body.lx-world .dashboard-shell .chart-card,
body.lx-world .dashboard-shell .latest-section,
body.lx-world .growth-page .growth-card,
body.lx-world .growth-page .growth-panel,
body.lx-world .growth-page .growth-window,
body.lx-world .discovery-page .discovery-search,
body.lx-world .discovery-page .starter-panel,
body.lx-world .discovery-page .saved-groups,
body.lx-world .discovery-page .discovery-result,
body.lx-world .discovery-page .candidate-card,
body.lx-world .discovery-page .source-group-card,
body.lx-world .membership-card,
body.lx-world .pricing-card {
    background: var(--sm-paper) !important;
    background-color: var(--sm-paper) !important;
    border-color: var(--sm-line) !important;
    color: var(--sm-ink) !important;
    box-shadow: 0 10px 30px rgba(46, 46, 46, 0.055) !important;
}

body.lx-world .btn-primary,
body.lx-world .btn-success,
body.lx-world .btn-warning,
body.lx-world .btn-dark,
body.lx-world .lp-btn-primary,
body.lx-world .ln-btn-brass,
body.lx-world .ln-btn-night,
body.lx-world .ln-nav-cta,
body.lx-world .membership-action,
body.lx-world .sp-text-send-btn,
body.lx-world .sp-mic-btn,
body.lx-world .sp-modal-action-btn--primary {
    background: var(--sm-ink) !important;
    border-color: var(--sm-ink) !important;
    color: #FFFFFF !important;
    box-shadow: 0 12px 28px rgba(46, 46, 46, 0.16) !important;
}

body.lx-world .btn-primary:hover,
body.lx-world .btn-success:hover,
body.lx-world .btn-warning:hover,
body.lx-world .lp-btn-primary:hover,
body.lx-world .ln-btn-brass:hover,
body.lx-world .ln-btn-night:hover:not(:disabled),
body.lx-world .ln-nav-cta:hover,
body.lx-world .membership-action:hover,
body.lx-world .sp-text-send-btn:hover,
body.lx-world .sp-mic-btn:hover,
body.lx-world .sp-modal-action-btn--primary:hover {
    background: #2E2E2E !important;
    border-color: #2E2E2E !important;
    color: #FFFFFF !important;
}

body.lx-world .extract-invite-button,
body.lx-world .extract-invite-button:hover,
body.lx-world .extract-invite-button:focus-visible {
    background: var(--sm-ink) !important;
    border-color: var(--sm-ink) !important;
    color: #FFFFFF !important;
}

body.lx-world .extract-invite-button i {
    color: inherit !important;
}

body.lx-world .btn-secondary,
body.lx-world .btn-outline-primary,
body.lx-world .btn-outline-secondary,
body.lx-world .lp-btn-ghost,
body.lx-world .sp-modal-action-btn--secondary,
body.lx-world .catalog-view-btn,
body.lx-world .vocab-row-action,
body.lx-world .index-toolbar button,
body.lx-world .reader-toolbar button,
body.lx-world .reader-toolbar a {
    background: transparent !important;
    border-color: var(--sm-line-strong) !important;
    color: var(--sm-ink) !important;
    box-shadow: none !important;
}

body.lx-world .btn-secondary:hover,
body.lx-world .btn-outline-primary:hover,
body.lx-world .btn-outline-secondary:hover,
body.lx-world .lp-btn-ghost:hover,
body.lx-world .catalog-view-btn.active,
body.lx-world .catalog-view-btn:hover,
body.lx-world .vocab-row-action:hover {
    background: var(--sm-panel) !important;
    border-color: var(--sm-line-strong) !important;
    color: var(--sm-ink) !important;
}

body.lx-world .form-control,
body.lx-world .form-select,
body.lx-world textarea.form-control,
body.lx-world input,
body.lx-world select,
body.lx-world textarea {
    background-color: var(--sm-paper) !important;
    border-color: var(--sm-line) !important;
    color: var(--sm-ink) !important;
    box-shadow: none !important;
}

body.lx-world .form-control:focus,
body.lx-world .form-select:focus,
body.lx-world textarea.form-control:focus,
body.lx-world input:focus,
body.lx-world select:focus,
body.lx-world textarea:focus {
    border-color: var(--sm-ink) !important;
    box-shadow: 0 0 0 3px rgba(46, 46, 46, 0.12) !important;
}

body.lx-world .alert-success,
body.lx-world .alert-info,
body.lx-world .diary-first-run-coach,
body.lx-world .ai-progress-card,
body.lx-world .milestone-banner,
body.lx-world .diary-next-action-panel,
body.lx-world .diary-empty-start-panel {
    background: rgba(247, 246, 243, 0.86) !important;
    border-color: var(--sm-line) !important;
    color: var(--sm-ink) !important;
}

body.lx-world .alert-warning,
body.lx-world .status-pill--warning,
body.lx-world .lx-badge--reread {
    background: #ECE6D9 !important;
    border-color: #D6CCB8 !important;
    color: var(--sm-warning) !important;
}

body.lx-world .alert-danger,
body.lx-world .validation-message,
body.lx-world .sp-end-session-btn {
    color: var(--sm-danger) !important;
}

body.lx-world .alert-danger {
    background: #F0E7E5 !important;
    border-color: #D8C4C0 !important;
}

body.lx-world .text-success,
body.lx-world .text-success-emphasis,
body.lx-world .status-pill--success,
body.lx-world .lx-badge--settled,
body.lx-world .ai-progress-step--done,
body.lx-world .ai-progress-step--active {
    color: var(--sm-success) !important;
}

body.lx-world .badge.bg-success,
body.lx-world .bg-success,
body.lx-world .page-dot.active,
body.lx-world .score-row__fill,
body.lx-world .progress-bar,
body.lx-world .trend-bar-value,
body.lx-world .bar-fill,
body.lx-world .donut-fill,
body.lx-world .ai-progress-step--done .ai-progress-step__marker,
body.lx-world .typewriter-caret {
    background: var(--sm-ink) !important;
    border-color: var(--sm-ink) !important;
}

body.lx-world .diary-page-kicker,
body.lx-world .diary-first-run-kicker,
body.lx-world .diary-next-action-kicker,
body.lx-world .correction-takeaway__kicker,
body.lx-world .collection-kicker,
body.lx-world .shelf-kicker,
body.lx-world .growth-kicker,
body.lx-world .pf-badge--xp,
body.lx-world .ranking-me-badge,
body.lx-world .result-heading,
body.lx-world .result-heading-primary,
body.lx-world .result-heading-cefr,
body.lx-world .result-heading-feedback,
body.lx-world .result-heading-explanation,
body.lx-world .result-heading-reply,
body.lx-world .card-chip,
body.lx-world .selection-badge {
    background: var(--sm-panel) !important;
    border-color: var(--sm-line) !important;
    color: var(--sm-ink) !important;
}

body.lx-world .lp,
body.lx-world .lp-nav,
body.lx-world .lp-hero,
body.lx-world .lp-final,
body.lx-world .lp-origin-story,
body.lx-world .lp-promo-card,
body.lx-world .lp-card,
body.lx-world .landing-page {
    background: var(--sm-paper) !important;
    color: var(--sm-ink) !important;
    border-color: var(--sm-line) !important;
}

body.lx-world .lp-nav {
    background: rgba(247, 246, 243, 0.9) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

body.lx-world .auth-visual,
body.lx-world .register-visual,
body.lx-world .pf-hero-banner,
body.lx-world .membership-card--premium,
body.lx-world .membership-card--pro,
body.lx-world .diary-prompt-banner,
body.lx-world .extract-hero,
body.lx-world .streak-highlight,
body.lx-world .score-card,
body.lx-world .year-summary,
body.lx-world .archive-notice,
body.lx-world .selected-cover,
body.lx-world .shelf-stats {
    background: linear-gradient(180deg, var(--sm-paper), var(--sm-panel)) !important;
    border-color: var(--sm-line) !important;
    color: var(--sm-ink) !important;
    box-shadow: 0 14px 36px rgba(46, 46, 46, 0.07) !important;
}

body.lx-world .catalog-sidebar,
body.lx-world .catalog-toolbar,
body.lx-world .bottom-nav {
    background: rgba(247, 246, 243, 0.94) !important;
    border-color: var(--sm-line) !important;
    box-shadow: 0 8px 28px rgba(46, 46, 46, 0.06) !important;
}

body.lx-world .sidebar-item.active,
body.lx-world .nav-scrollable .nav-link.active,
body.lx-world .nav-scrollable .active > .nav-link,
body.lx-world .diary-tab-button.active,
body.lx-world .growth-page .growth-chip.is-active,
body.lx-world .formality-selector .btn-check:checked + .btn {
    background: var(--sm-ink) !important;
    border-color: var(--sm-ink) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

body.lx-world .sidebar-dot--settled,
body.lx-world .lx-dot--settled {
    background: var(--sm-ink-soft) !important;
}

body.lx-world .sidebar-dot--reread,
body.lx-world .lx-dot--reread {
    background: var(--sm-warning) !important;
}

body.lx-world .sidebar-dot--unsorted,
body.lx-world .lx-dot--unsorted {
    background: var(--sm-faint) !important;
}

body.lx-world .bookshelf-frame,
body.lx-world .wood-shelf,
body.lx-world .shelf-plank {
    background: linear-gradient(180deg, #D6D2C6, #B8B2A4) !important;
    border-color: #B8B2A4 !important;
    box-shadow: 0 10px 24px rgba(46, 46, 46, 0.11) !important;
}

body.lx-world .month-book,
body.lx-world .shelf-book,
body.lx-world .book-tone-m1,
body.lx-world .book-tone-m2,
body.lx-world .book-tone-m3,
body.lx-world .book-tone-m4,
body.lx-world .book-tone-m5,
body.lx-world .book-tone-m6,
body.lx-world .book-tone-m7,
body.lx-world .book-tone-m8,
body.lx-world .book-tone-m9,
body.lx-world .book-tone-m10,
body.lx-world .book-tone-m11,
body.lx-world .book-tone-m12,
body.lx-world .book-tone-sand,
body.lx-world .book-tone-walnut,
body.lx-world .book-tone-navy,
body.lx-world .book-tone-leather {
    background: linear-gradient(180deg, #E9E7E2, #D6D2C6) !important;
    color: var(--sm-ink) !important;
    border-color: var(--sm-line-strong) !important;
}

body.lx-world .diary-workspace .diary-writing-card {
    background: #D6D2C6 !important;
    border-color: #B8B2A4 !important;
    box-shadow:
        -5px 6px 0 -2px #F7F6F3,
        -9px 10px 0 -3px #E9E7E2,
        -13px 14px 0 -4px #D6D2C6,
        0 26px 48px -16px rgba(46, 46, 46, 0.18) !important;
}

body.lx-world .sp-toast.alert-success,
body.lx-world .sp-toast.alert-warning,
body.lx-world .sp-toast.alert-danger {
    background: var(--sm-ink) !important;
    color: #FFFFFF !important;
}

body.lx-world ::selection {
    background: #2E2E2E !important;
    color: #FFFFFF !important;
}

@media (min-width: 641px) {
    body.lx-world .sidebar,
    body.lx-world .lex-rail {
        background: var(--lx-sidebar-bg, #23221F) !important;
        border-right-color: rgba(255, 255, 255, 0.16) !important;
    }

    body.lx-world .lex-rail-logo {
        color: #FFFFFF !important;
        opacity: 0.96 !important;
    }

    body.lx-world .lex-rail-link {
        color: #E4E0D8 !important;
        opacity: 1 !important;
    }

    body.lx-world .lex-rail-link:hover,
    body.lx-world .lex-rail-link:focus-visible,
    body.lx-world .lex-rail-link.active,
    body.lx-world .lex-rail-link.is-active {
        color: #FFFFFF !important;
        background: rgba(255, 255, 255, 0.16) !important;
    }
}

@media (max-width: 640px) {
    body.lx-world .top-row.navbar,
    body.lx-world.dark-mode .top-row.navbar,
    body.lx-world .bottom-nav,
    body.lx-world.dark-mode .bottom-nav {
        background: rgba(247, 246, 243, 0.96) !important;
        border-color: var(--sm-line) !important;
        color: var(--sm-ink) !important;
        box-shadow: 0 -8px 28px rgba(46, 46, 46, 0.06) !important;
    }

    body.lx-world .top-row.navbar .navbar-brand,
    body.lx-world .top-row.navbar .brand-wordmark,
    body.lx-world .top-row.navbar .header-icon,
    body.lx-world .top-row.navbar .notification-button,
    body.lx-world .top-row.navbar .navbar-toggler,
    body.lx-world .bottom-nav-label,
    body.lx-world .bottom-nav-icon-shell {
        color: var(--sm-ink) !important;
    }

    body.lx-world .top-row.navbar .navbar-toggler {
        background: transparent
            url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2846, 46, 46, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M5 8h20M5 15h20M5 22h20'/%3e%3c/svg%3e")
            no-repeat center/1.35rem !important;
    }
}

/* Final sidebar readability pass. Must stay after the app-wide palette rules. */
body.lx-world .nav-scrollable,
body.lx-world.dark-mode .nav-scrollable {
    background: #23221F !important;
    color: #D6D2C6 !important;
}

body.lx-world .nav-scrollable .nav-group-label,
body.lx-world.dark-mode .nav-scrollable .nav-group-label {
    color: #B8B2A4 !important;
    opacity: 1 !important;
}

body.lx-world .nav-scrollable .nav-link,
body.lx-world .nav-scrollable .btn.nav-link,
body.lx-world .nav-scrollable .nav-link i,
body.lx-world.dark-mode .nav-scrollable .nav-link,
body.lx-world.dark-mode .nav-scrollable .btn.nav-link,
body.lx-world.dark-mode .nav-scrollable .nav-link i {
    color: #D6D2C6 !important;
    opacity: 1 !important;
}

body.lx-world .nav-scrollable .nav-link:hover,
body.lx-world .nav-scrollable .nav-link:focus-visible,
body.lx-world .nav-scrollable .btn.nav-link:hover,
body.lx-world .nav-scrollable .btn.nav-link:focus-visible,
body.lx-world .nav-scrollable .nav-link:hover i,
body.lx-world .nav-scrollable .nav-link:focus-visible i,
body.lx-world.dark-mode .nav-scrollable .nav-link:hover,
body.lx-world.dark-mode .nav-scrollable .nav-link:focus-visible,
body.lx-world.dark-mode .nav-scrollable .btn.nav-link:hover,
body.lx-world.dark-mode .nav-scrollable .btn.nav-link:focus-visible,
body.lx-world.dark-mode .nav-scrollable .nav-link:hover i,
body.lx-world.dark-mode .nav-scrollable .nav-link:focus-visible i {
    background: #34322E !important;
    color: #F7F6F3 !important;
}

body.lx-world .nav-scrollable .nav-link.active,
body.lx-world .nav-scrollable .active > .nav-link,
body.lx-world .nav-scrollable .nav-link.active i,
body.lx-world .nav-scrollable .active > .nav-link i,
body.lx-world.dark-mode .nav-scrollable .nav-link.active,
body.lx-world.dark-mode .nav-scrollable .active > .nav-link,
body.lx-world.dark-mode .nav-scrollable .nav-link.active i,
body.lx-world.dark-mode .nav-scrollable .active > .nav-link i {
    background: #34322E !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

body.lx-world .nav-upgrade-btn,
body.lx-world.dark-mode .nav-upgrade-btn {
    background: rgba(247, 246, 243, 0.06) !important;
    border-color: rgba(214, 210, 198, 0.28) !important;
    color: #D6D2C6 !important;
}

body.lx-world .nav-upgrade-title,
body.lx-world.dark-mode .nav-upgrade-title {
    color: #F7F6F3 !important;
}

body.lx-world .nav-upgrade-sub,
body.lx-world .nav-upgrade-arrow,
body.lx-world .nav-upgrade-icon,
body.lx-world.dark-mode .nav-upgrade-sub,
body.lx-world.dark-mode .nav-upgrade-arrow,
body.lx-world.dark-mode .nav-upgrade-icon {
    color: #B8B2A4 !important;
}