/* Both choices are light; only the artwork, accent palette and typography change. */
.appearance-switch {
    display: flex;
    width: min(100%, 300px);
    padding: 4px;
    gap: 4px;
    border: 1px solid #d5e2ca;
    border-radius: 14px;
    background: #f8fbf4;
}
.appearance-switch button {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #50654e;
    font: 600 .82rem/1.3 'Inter', sans-serif;
    cursor: pointer;
}
.appearance-switch button[aria-pressed="true"] { background: #dcebcf; color: #294c36; }
.appearance-switch button:focus-visible { outline: 2px solid #35634d; outline-offset: 1px; }

/* Give solar and lunar dates distinct identities without changing the layout. */
:root[data-appearance="traditional"] .bloc-split.has-landmark-bg .solar-day {
    color: #174c38;
    text-shadow: 0 4px 12px rgba(23, 76, 56, .14);
}
:root[data-appearance="traditional"] .bloc-split.has-landmark-bg .lunar-day {
    color: #9a4334;
    text-shadow: 0 4px 12px rgba(154, 67, 52, .14);
}
:root[data-appearance="traditional"] .bloc-split.has-landmark-bg .solar-side .side-label {
    color: #275843 !important;
    text-shadow: none;
}
:root[data-appearance="traditional"] .bloc-split.has-landmark-bg .lunar-side .side-label {
    color: #914536 !important;
    text-shadow: none;
}
:root[data-appearance="traditional"] .bloc-split.has-landmark-bg .solar-month-year,
:root[data-appearance="traditional"] .bloc-split.has-landmark-bg .week-display {
    color: #34483f !important;
    text-shadow: none;
}
:root[data-appearance="traditional"] .bloc-split.has-landmark-bg .lunar-month-info {
    color: #60483f !important;
    text-shadow: none;
}
.solar-side .side-label,
.lunar-side .side-label { position: relative; }
.solar-side .side-label::after,
.lunar-side .side-label::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 32px;
    height: 2px;
    border-radius: 999px;
    transform: translateX(-50%);
}
:root[data-appearance="traditional"] .solar-side .side-label::after { background: #275843; }
:root[data-appearance="traditional"] .lunar-side .side-label::after { background: #914536; }

:root[data-appearance="modern"] {
    --primary-color: #345882;
    --secondary-color: #dce6fa;
    --text-color: #344960;
    --bg-color: #f1f5fa;
    --card-bg: #fff;
    --header-text: #34516f;
    --surface-color: #fff;
    --divider-color: #dce5f0;
    --input-bg: #f6f8fc;
    --input-border: #d5e0ed;
    --modal-bg: #fff;
}
[data-appearance="modern"] .app-container { box-shadow: 0 12px 36px rgba(55,83,116,.08); }
:root[data-appearance="modern"] header,
:root[data-appearance="modern"] .month-header { background: #e9f0fb; color: #34516f; }
:root[data-appearance="modern"] header h1 {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    letter-spacing: .04em;
    color: #2d4a6b;
}
:root[data-appearance="modern"] .date-display { color: #506780; }
:root[data-appearance="modern"] .nav-pill-group,
[data-appearance="modern"] .appearance-switch { background: #f8faff; border-color: #d5e0ef; }
[data-appearance="modern"] .appearance-switch button { color: #506780; }
[data-appearance="modern"] .appearance-switch button[aria-pressed="true"] { background: #dbe7fa; color: #2f5078; }
[data-appearance="modern"] .appearance-switch button:focus-visible { outline-color: #345882; }
:root[data-appearance="modern"] #lang-toggle { border-right-color: #d5e0ef; }
:root[data-appearance="modern"] .btn-pill:hover { background: #e5edfa; }
:root[data-appearance="modern"] .calendar-bloc { border-color: #dce5f0; }
:root[data-appearance="modern"] .bloc-split.has-landmark-bg {
    --scene-accent: #d3e3f7;
    --scene-soft: #eef4fc;
    background:
        radial-gradient(ellipse at 110% 105%, var(--scene-accent) 0%, transparent 58%),
        linear-gradient(135deg, #fff 0%, #f8fbff 55%, var(--scene-soft) 100%);
}
:root[data-appearance="modern"] .bloc-split[data-scene="tet"] { --scene-accent: #f2d4c7; --scene-soft: #fff4ed; }
:root[data-appearance="modern"] .bloc-split[data-scene="lotus"] { --scene-accent: #e5d8f4; --scene-soft: #f6f0fc; }
:root[data-appearance="modern"] .bloc-split[data-scene="bamboo"] { --scene-accent: #cce7df; --scene-soft: #edf8f3; }
:root[data-appearance="modern"] .bloc-split[data-scene="harvest"] { --scene-accent: #f2dfb9; --scene-soft: #fff8e9; }
:root[data-appearance="modern"] .bloc-split[data-scene="moon"] { --scene-accent: #d5d9f4; --scene-soft: #f1f0ff; }
:root[data-appearance="modern"] .bloc-split[data-scene="tea"] { --scene-accent: #cde3ef; --scene-soft: #edf7fb; }
[data-appearance="modern"] .bloc-bg-image { display: none; }
:root[data-appearance="modern"] .bloc-split.has-landmark-bg::before { background: none; }
[data-appearance="modern"] .bloc-split::after {
    content: '';
    position: absolute;
    right: -36px;
    bottom: -90px;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 50%;
    box-shadow: 0 0 0 24px rgba(255,255,255,.22), 0 0 0 48px rgba(255,255,255,.15);
    pointer-events: none;
    z-index: 0;
}
[data-appearance="modern"] .bloc-split.has-landmark-bg .solar-day { color: #2d5b75; font-weight: 700; }
[data-appearance="modern"] .bloc-split.has-landmark-bg .lunar-day { color: #6d4b86; font-weight: 700; }
[data-appearance="modern"] .bloc-split.has-landmark-bg .side-label,
[data-appearance="modern"] .bloc-split.has-landmark-bg .solar-month-year,
[data-appearance="modern"] .bloc-split.has-landmark-bg .lunar-month-info,
[data-appearance="modern"] .bloc-split.has-landmark-bg .week-display { color: #425973 !important; }
[data-appearance="modern"] .bloc-split.has-landmark-bg .solar-side .side-label { color: #2d5b75 !important; }
[data-appearance="modern"] .bloc-split.has-landmark-bg .lunar-side .side-label { color: #6d4b86 !important; }
[data-appearance="modern"] .solar-side .side-label::after { background: #2d5b75; }
[data-appearance="modern"] .lunar-side .side-label::after { background: #6d4b86; }
[data-appearance="modern"] .bloc-split.has-landmark-bg .holiday-text { color: #884d37 !important; }
[data-appearance="modern"] .bloc-split.has-landmark-bg .solar-side { border-right-color: #d4dfed; }
:root[data-appearance="modern"] .bloc-split.has-landmark-bg .side-nav-btn { color: #345882; background: #fff; border-color: #d5e0ef; }
:root[data-appearance="modern"] .holiday-banner { background: #edf3fc; border-color: #dce5f0; }
:root[data-appearance="modern"] .btn.primary { background: #dbe7fa; color: #2f5078; }
:root[data-appearance="modern"] .btn.secondary { background: #eae4f7; color: #5b4878; }
:root[data-appearance="modern"] #footer-credit,
:root[data-appearance="modern"] .footer-links,
:root[data-appearance="modern"] .footer-links a { color: #63748b; }