/* Shared palette and decoration tokens. Keep status colors independent of themes. */
:root {
    --theme-top: #0f255e;
    --theme-bottom: #000516;
    --theme-panel: #0c1a46;
    --theme-inset: #102344;
    --theme-nav: #12274b;
    --theme-selected: #2b4b7a;
    --theme-header: #040c21;
    --theme-line: #607fae;
    --nav-text: var(--color-text);
    --nav-item: var(--theme-inset);
    --nav-active: var(--theme-selected);
    --nav-active-text: var(--color-text);
}
:root[data-palette="forest"] {
    --color-bg: #061e1a;
    --theme-top: #144e40;
    --theme-bottom: #02100e;
    --theme-panel: #0c3028;
    --theme-inset: #123d33;
    --theme-nav: #153b31;
    --theme-selected: #28634f;
    --theme-header: #061b16;
    --theme-line: #699d88;
    --color-primary: #9cdec3;
    --color-primary-accent: #d4f5e7;
    --color-text-muted: #cce7db;
    --btn-bg: #216b50;
}
:root[data-palette="plum"] {
    --color-bg: #221029;
    --theme-top: #51275e;
    --theme-bottom: #100617;
    --theme-panel: #31183d;
    --theme-inset: #3c2149;
    --theme-nav: #3a2045;
    --theme-selected: #674078;
    --theme-header: #1a0c23;
    --theme-line: #a184b4;
    --color-primary: #d9b0ec;
    --color-primary-accent: #f0dcfa;
    --color-text-muted: #e7d6ee;
    --btn-bg: #79448e;
}
:root[data-palette="forest"], :root[data-palette="plum"] {
    --color-border: var(--theme-line);
    --form-control-focus-border: var(--color-primary);
}
html[data-palette]:not([data-palette="navy"]) body.app-body {
    background: radial-gradient(circle at top, var(--theme-top), var(--color-bg) 45%, var(--theme-bottom));
}
html[data-palette]:not([data-palette="navy"]) body.app-body::before { opacity: 0.25; }
html[data-palette]:not([data-palette="navy"]) :is(.page-card:not(.important-notice), .table-card, .post-card, .events-filter-form) {
    background: var(--theme-panel); border-color: var(--theme-line);
}
html[data-palette]:not([data-palette="navy"]) :is(.ui-toc, .schedule-empty, .events-filter-checkbox, .schedule-list-table .events-row) {
    background: var(--theme-inset); border-color: var(--theme-line);
}
html[data-palette]:not([data-palette="navy"]) .events-filter-checkbox:has(input:checked) { background: var(--theme-selected); }
html[data-palette]:not([data-palette="navy"]) .ui-toc a { color: var(--color-primary-accent); }

/* Decoration is separate from palette, so seasonal additions need no form changes. */
html[data-palette][data-design="plain"] body.app-body { background: var(--color-bg); }
html[data-design="plain"] body.app-body::before,
html[data-design="plain"] .footer-nav::before,
html[data-design="plain"] .footer-nav::after { display: none; }
html[data-design="plain"] :is(.page-card, .table-card, .post-card, .footer-nav) {
    box-shadow: none; backdrop-filter: none; border-radius: 12px;
}
.appearance-settings { display: grid; gap: 16px; }
.appearance-settings p { margin: 0; }
.appearance-settings select { margin-bottom: 0; }

/* Light palettes share readable ink colors and independent surface tokens. */
:root[data-palette="sky"] { --color-bg: #edf7ff; --theme-top: #d8edff; --theme-bottom: #f7fbff; --theme-panel: #ffffff; --theme-inset: #eef6fc; --theme-nav: #e5f1fc; --theme-selected: #cbdff3; --theme-header: #f2f8fd; --theme-line: #7d9cb7; --color-primary: #245d88; --color-primary-accent: #245d88; --btn-bg: #315a7b; }
:root[data-palette="mint"] { --color-bg: #edf9f2; --theme-top: #d3f0de; --theme-bottom: #f6fcf8; --theme-panel: #ffffff; --theme-inset: #edf7f1; --theme-nav: #e0f0e6; --theme-selected: #c2e3cf; --theme-header: #f1faf5; --theme-line: #7f9f8c; --color-primary: #235f45; --color-primary-accent: #235f45; --btn-bg: #32694e; }
:root[data-palette="peach"] { --color-bg: #fff0f3; --theme-top: #ffd2df; --theme-bottom: #fff8fa; --theme-panel: #ffffff; --theme-inset: #fff0f4; --theme-nav: #ffe0e9; --theme-selected: #f5b9ce; --theme-header: #fff0f4; --theme-line: #b5758c; --color-primary: #943653; --color-primary-accent: #943653; --btn-bg: #a9365b; }
:root[data-palette="lavender"] { --color-bg: #f5f0fc; --theme-top: #e6d9f7; --theme-bottom: #fcfaff; --theme-panel: #ffffff; --theme-inset: #f2ebf9; --theme-nav: #ebe2f4; --theme-selected: #daccf0; --theme-header: #f7f2fc; --theme-line: #9d8eaf; --color-primary: #653e83; --color-primary-accent: #653e83; --btn-bg: #71468f; }
:root[data-palette="sand"] { --color-bg: #faf6e9; --theme-top: #f0e4ba; --theme-bottom: #fffdf6; --theme-panel: #ffffff; --theme-inset: #f7f1df; --theme-nav: #f0e8ce; --theme-selected: #e2d5ae; --theme-header: #fcf8ec; --theme-line: #a99b77; --color-primary: #715719; --color-primary-accent: #715719; --btn-bg: #7b601c; }

:root[data-tone="light"] { --color-text: #243247; --color-text-muted: #49576b; --color-border: var(--theme-line); --form-control-bg: #fff; --form-control-color: #243247; --form-control-border: var(--theme-line); --shadow-soft: 0 8px 24px #26334714; }
:root[data-palette="black"] { --color-bg: #121212; --theme-top: #292929; --theme-bottom: #080808; --theme-panel: #1c1c1c; --theme-inset: #262626; --theme-nav: #191919; --theme-selected: #454545; --theme-header: #111111; --theme-line: #777777; --color-text: #f5f5f5; --color-text-muted: #d2d2d2; --color-primary: #e5e5e5; --color-primary-accent: #f5f5f5; --color-border: #777777; --btn-bg: #4a4a4a; --form-control-border: #777777; --form-control-focus-border: #555555; --color-bg-alt: #262626; --color-surface: #333333; --color-card: #333333; --color-accent: #dddddd; }
:root[data-palette="white"] { --color-bg: #ffffff; --theme-top: #f4f4f4; --theme-bottom: #ffffff; --theme-panel: #ffffff; --theme-inset: #f5f5f5; --theme-nav: #ffffff; --theme-selected: #e1e1e1; --theme-header: #ffffff; --theme-line: #929292; --color-text: #252525; --color-text-muted: #555555; --color-primary: #333333; --color-primary-accent: #333333; --btn-bg: #333333; --color-accent: #444444; }
:root:is([data-palette="black"], [data-palette="white"]) { --decoration: radial-gradient(circle at 28px 32px, #9996 5px, transparent 6px), radial-gradient(circle at 100px 96px, #9994 3px, transparent 4px); --form-control-bg: #fff; --form-control-color: #252525; --form-control-placeholder: #555; }
html:is([data-tone="light"], [data-palette="black"]) .app-main :is(.profile-item, .child-card, .security-summary-card, .notification-setting, .notification-quiet-hours, .focus-card, .event-item, .compose-note, .post-history__item, .post-history-item, .schedule-calendar-month, .schedule-calendar-day, .schedule-calendar-agenda__item, .events-filter-fieldset, .admin-record-controls, .admin-search, .table-wrapper, .table-scroll) { background: var(--theme-inset); color: var(--color-text); border-color: var(--theme-line); }
html:is([data-tone="light"], [data-palette="black"]) .app-main :is(.page-card__caption, .table-card__caption, .profile-label, .profile-value, .mypage-note, .focus-card__description, .post-card__meta, .post-history__meta, .schedule-list-category, .schedule-list-venue, .schedule-period-presets button, .events-filter-toggle, .mypage-disclosure__summary::after, .mypage-member-disclosure__summary::after) { color: var(--color-text-muted); }
html:is([data-tone="light"], [data-palette="black"]) .app-main :is(.btn.secondary, button.secondary, .btn-tonal, .schedule-period-presets button, .events-filter-toggle) { background: var(--theme-inset); color: var(--color-text); border-color: var(--theme-line); }
html:is([data-tone="light"], [data-palette="black"]) .app-main :is(.data-table, .events-table, table) { color: var(--color-text); background: var(--theme-panel); }
html:is([data-tone="light"], [data-palette="black"]) .app-main :is(td, th) { color: var(--color-text); background: var(--theme-panel); border-color: var(--theme-line); }
html:is([data-tone="light"], [data-palette="black"]) .app-main th { background: var(--theme-selected); }
html:is([data-tone="light"], [data-palette="black"]) :is(.events-filter-checkbox, .events-filter-checkbox span, .schedule-calendar-controls__month, .schedule-calendar-month__title, .schedule-calendar-day__number, .schedule-calendar-agenda__date, .schedule-calendar-agenda__time, .schedule-calendar-agenda__title, .schedule-calendar-agenda__empty) { color: var(--color-text); }
html:is([data-tone="light"], [data-palette="black"]) :is(.schedule-calendar-weekday, .schedule-calendar-controls__button, .schedule-view-switch, .schedule-view-switch__button, .schedule-calendar-event) { background: var(--theme-inset); color: var(--color-text); border-color: var(--theme-line); }
html:is([data-tone="light"], [data-palette="black"]) .schedule-view-switch__button[aria-pressed="true"] { background: var(--theme-selected); color: var(--color-text); }
html:is([data-tone="light"], [data-palette="black"]) .schedule-calendar-event__time { color: var(--color-text-muted); }
html:is([data-tone="light"], [data-palette="black"]) .schedule-calendar-agenda__empty { background: var(--theme-panel); border: 1px solid var(--theme-line); }
html:is([data-tone="light"], [data-palette="black"]) :is(.btn-ghost, .btn.ghost, .events-filter-actions button[name="export"]) { background: var(--theme-inset); color: var(--color-text); border: 1px solid var(--theme-line); }
html:is([data-tone="light"], [data-palette="black"]) :is(.btn.secondary, button.secondary, .btn.ghost, .footer-nav) { box-shadow: var(--shadow-soft); }
html:is([data-tone="light"], [data-palette="black"]) :is(.post-engagement-icon, .post-comment-count, .post-read-count-action, .post-reaction-summary) { color: var(--color-text-muted); }
@media (max-width: 768px) { html:is([data-tone="light"], [data-palette="black"]) .app-main .schedule-list-table td { background: transparent; } }
html:is([data-tone="light"], [data-palette="black"]) .app-main .select-wrapper { --form-control-bg: #fff; --form-control-color: #243247; --form-control-focus-bg: #fff; --form-control-focus-color: #243247; }
html:is([data-tone="light"], [data-palette="black"]) .select-wrapper::after { border-color: var(--color-text); }
html:is([data-tone="light"], [data-palette="black"]) .app-main :is(.form-hint, .compose-hint, .post-history__content, .post-card__body, .security-summary-card__label) { color: var(--color-text-muted); }
html:is([data-tone="light"], [data-palette="black"]) .page-card.important-notice { background: #fff1cb; color: #503511; }
html:is([data-tone="light"], [data-palette="black"]) .page-card.important-notice :is(p, span, a) { color: #503511; }
html:is([data-tone="light"], [data-palette="black"]) :is(.btn-danger, .btn.danger, .btn-tonal--danger) { color: #fff; background: #a72a3d; }
.appearance-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.appearance-check input { flex: 0 0 22px; width: 22px; height: 22px; margin: 4px 0 0; }
.appearance-help { color: var(--color-text-muted); font-size: .85rem; }
.appearance-current { padding: 12px; border: 1px solid var(--theme-line); border-radius: 10px; background: var(--theme-inset); }
.appearance-preview { display: grid; gap: 12px; padding: 16px; border: 2px dashed var(--theme-line); border-radius: 14px; }
.appearance-preview h3 { margin: 0; font-size: 1rem; }
.appearance-preview-message [data-birthday-dismiss] { display: none; }
html:is([data-tone="light"], [data-palette="black"]) .app-main :is(.checkbox-fieldset, .profile-card, .profile-card__item, .template-edit-panel, .post-history) { background: var(--theme-inset); border-color: var(--theme-line); }
html:is([data-tone="light"], [data-palette="black"]) .app-main :is(.fieldset-description, .profile-card__title, .profile-card__furigana, .profile-card__item dt, .profile-card__item dd, .admin-note) { color: var(--color-text); }
html:is([data-tone="light"], [data-palette="black"]) .mypage-disclosure__summary::after,
html:is([data-tone="light"], [data-palette="black"]) .mypage-member-disclosure__summary::after { color: var(--color-text-muted); }
html:is([data-tone="light"], [data-palette="black"]) .app-main .checkbox-fieldset legend { color: var(--color-text); }
html:is([data-tone="light"], [data-palette="black"]) .app-main :is(.owner-action-item, .owner-action-item:hover, .toban-card, .info-item, .home-menu-item) { background: var(--theme-inset); color: var(--color-text); border-color: var(--theme-line); }
.appearance-settings [hidden], .birthday-greeting[hidden] { display: none !important; }
.birthday-greeting { margin-bottom: 20px; }
/* Match palette specificity so seasonal colors actually take precedence. */
:root[data-season="birthday"] {
    --color-bg: #fff8df; --theme-top: #ffe793; --theme-bottom: #fffdf4;
    --theme-panel: #fff; --theme-inset: #fff8e6; --theme-nav: #fff0b9;
    --theme-selected: #f6dc86; --theme-header: #fff2c5; --theme-line: #a98938;
    --color-primary: #a52940; --color-primary-accent: #a52940; --btn-bg: #bd293f;
    --nav-active: #bd293f; --nav-active-text: #fff;
    --season-ribbon: linear-gradient(90deg, #db3045 0 17%, #edb92c 17% 34%, #3d994f 34% 51%, #22a8ca 51% 68%, #7966b5 68% 84%, #e14b98 84%);
    --decoration: url('../img/themes/birthday-stars.svg?v=2');
    --decoration-size: 320px; --decoration-duration: 25s;
}
:root[data-season="christmas"] {
    --color-bg: #edf7f0; --theme-top: #b7dfc7; --theme-bottom: #fff;
    --theme-panel: #fff; --theme-inset: #edf7f0; --theme-nav: #12553f;
    --theme-selected: #d1e9db; --theme-header: #12553f; --theme-line: #6d9e82;
    --color-primary: #ac233b; --color-primary-accent: #ac233b; --btn-bg: #b3233e;
    --nav-text: #fff; --nav-item: #1c634b; --nav-active: #b3233e; --nav-active-text: #fff;
    --season-ribbon: linear-gradient(90deg, #12553f 0 33%, #bf2942 33% 66%, #fff 66%);
    --decoration: radial-gradient(circle at 18px 24px, #fff 4px, #8dbfa4 5px, transparent 6px), radial-gradient(circle at 86px 82px, #fff 3px, #8dbfa4 4px, transparent 5px), radial-gradient(circle at 106px 18px, #bd2843 5px, transparent 6px), radial-gradient(circle at 34px 106px, #2c7957 3px, transparent 4px);
}
:root[data-season="summer"] {
    --color-bg: #e8f9ff; --theme-top: #9edff5; --theme-bottom: #f4fcff;
    --theme-panel: #fff; --theme-inset: #e9f8fc; --theme-nav: #bceafa;
    --theme-selected: #9ddced; --theme-header: #d8f5ff; --theme-line: #5295af;
    --color-primary: #075b82; --color-primary-accent: #075b82; --btn-bg: #076c93;
    --season-ribbon: linear-gradient(90deg, #179cce 0 33%, #72d6e6 33% 66%, #ffe3a0 66%);
    --decoration: radial-gradient(circle at 26px 30px, transparent 8px, #249fc091 9px 11px, transparent 12px), radial-gradient(circle at 94px 90px, #fff9 5px, #249fc078 6px 7px, transparent 8px);
}
html[data-season="christmas"] .navbar { border-bottom: 4px solid #bf2942; }
html[data-season="christmas"] .footer-nav { border: 2px solid #bf2942; }
html[data-season="birthday"] .navbar { border-bottom: 4px solid #edbd3e; }
html[data-season]:not([data-season=""]) .appearance-current { border-left: 6px solid var(--color-primary); }
:root[data-season="birthday"] .app-main .page-card.birthday-greeting { border: 2px solid #c89513; background: #fffdf2; color: #943047; }
.appearance-preview-scene { margin: 0; overflow: hidden; border: 1px solid var(--theme-line); border-radius: 14px; }
.appearance-preview-scene figcaption { padding: 10px 12px; font-size: .85rem; background: var(--theme-panel); color: var(--color-text); }
.appearance-preview-background { position: relative; height: 168px; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, var(--theme-top), var(--theme-bottom)); }
.appearance-preview-background::after { content: ''; position: absolute; inset: auto 0 0; height: 8px; background: var(--season-ribbon, var(--theme-selected)); }
html[data-season="christmas"] .appearance-preview-background { background: #12553f; }
.appearance-preview-background::before { content: ''; position: absolute; pointer-events: none; }
html[data-palette] body.app-body::before,
.appearance-preview-background::before {
    inset: calc(-1 * var(--decoration-size, 128px)) 0; opacity: .8;
    background-image: var(--decoration, radial-gradient(circle at 28px 32px, #6a9bc97a 6px, transparent 7px), radial-gradient(circle at 100px 96px, #c8aadd99 4px, transparent 5px));
    background-size: var(--decoration-size, 128px) var(--decoration-size, 128px);
}
html[data-design="plain"] :is(body.app-body, .appearance-preview-background)::before { display: none; }
@keyframes appearance-drift { from { transform: translateY(0); } to { transform: translateY(var(--decoration-size, 128px)); } }
html[data-motion="on"][data-design="soft"] :is(body.app-body, .appearance-preview-background)::before { animation: appearance-drift var(--decoration-duration, 10s) linear infinite; }
html[data-season="summer"][data-motion="on"] :is(body.app-body, .appearance-preview-background)::before { animation-direction: reverse; }
html[data-page-visible="no"] :is(body.app-body, .appearance-preview-background)::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { :is(body.app-body, .appearance-preview-background)::before { animation: none !important; } }

/* Every navigation state uses the same palette, including the expanded mobile menu. */
html[data-palette] :is(.navbar, .navbar-menu) { background: var(--theme-header); }
html[data-palette] :is(.navbar-brand, .navbar-version, .navbar-notify, .footer-link) { color: var(--nav-text); }
html[data-palette] .navbar-toggle .bar { background: var(--nav-text); }
html[data-palette] .navbar-menu ul li :is(a, .navbar-logout) { color: var(--nav-text); border-color: var(--theme-line); box-shadow: none; }
html[data-palette] .navbar-menu :is(a, .navbar-logout)::after { background: var(--nav-text); }
html[data-palette] .navbar-notify { background: var(--nav-item); border-color: var(--theme-line); }
html[data-palette] .footer-nav { background: var(--theme-nav); border-color: var(--theme-line); box-shadow: var(--shadow-soft); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-palette] .footer-nav::before,
html[data-palette] .footer-nav::after,
html[data-palette] .footer-indicator { display: none; }
html[data-palette] .footer-link :is(.footer-icon, .footer-label) { color: inherit; filter: none; }
html[data-palette] .footer-link:is(.active, [aria-current="page"], :hover, :focus-visible),
html[data-palette] .navbar-menu ul li :is(a, .navbar-logout):is([aria-current="page"], :hover, :focus-visible),
html[data-palette] .navbar-notify:is(.is-active, :hover, :focus-visible) { background: var(--nav-active); color: var(--nav-active-text); border-color: var(--theme-line); }
html[data-palette] :is(.footer-link, .navbar-notify, .navbar-menu a, .navbar-logout):focus-visible { outline: 3px solid var(--nav-text); outline-offset: -3px; }
html[data-palette] .app-main :is(.staff-nav__item, .owner-action-item, .home-menu-item) { background: var(--theme-inset); color: var(--color-text); border-color: var(--theme-line); box-shadow: none; }
html[data-palette] .app-main :is(.staff-nav__item, .owner-action-item, .home-menu-item):is(:hover, :focus-visible) { background: var(--theme-selected); border-color: var(--color-primary); }
html[data-palette] .staff-nav__label { color: var(--color-text); }
@media (max-width: 1599px) {
    html[data-palette] .navbar-menu ul li :is(a, .navbar-logout) { background: var(--nav-item); }
    html[data-palette] .navbar-menu ul li :is(a, .navbar-logout):is([aria-current="page"], :hover, :focus-visible) { background: var(--nav-active); }
}
@media (min-width: 1600px) {
    .navbar-brand, .navbar-menu :is(a, .navbar-logout) { white-space: nowrap; }
    .navbar-menu :is(a, .navbar-logout) { display: inline-flex; border-radius: 6px; }
}