/* Both palettes follow the device preference, including changes while the page is open. */
:root {
    color-scheme: light;
    --page-background: #f4f7fa;
    --surface: #ffffff;
    --surface-subtle: #f1f5f8;
    --surface-hover: #e8f1f8;
    --text: #273c50;
    --text-muted: #5f7387;
    --text-placeholder: #687c8e;
    --border: #d4dee7;
    --border-soft: #e8edf2;
    --input-border: #bacad7;
    --link: #216c9b;
    --link-hover: #15547c;
    --primary: #2879ad;
    --primary-hover: #21658f;
    --on-primary: #ffffff;
    --focus-ring: rgba(40, 121, 173, .22);
    --danger: #b0323e;
    --danger-background: #fff1f2;
    --danger-border: #eab5bb;
    --danger-button: #b13c47;
    --danger-button-hover: #92313b;
    --success: #206344;
    --success-background: #edf9f1;
    --success-border: #abd7ba;
    --success-button: #26704d;
    --success-button-hover: #1d583c;
    --warning: #79501a;
    --warning-background: #fff8e6;
    --warning-border: #e5cb8c;
    --info: #245e7e;
    --info-background: #edf7fc;
    --info-border: #b1d4e6;
    --shadow: 0 3px 14px rgba(27, 51, 74, .05);
    --dropdown-shadow: 0 12px 32px rgba(15, 23, 42, .14);
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --page-background: #111923;
        --surface: #1b2633;
        --surface-subtle: #243343;
        --surface-hover: #2d4358;
        --text: #e4edf5;
        --text-muted: #adbed0;
        --text-placeholder: #9bb0c3;
        --border: #405369;
        --border-soft: #324457;
        --input-border: #60788e;
        --link: #8ecbff;
        --link-hover: #badaff;
        --primary: #356f9b;
        --primary-hover: #407fac;
        --on-primary: #ffffff;
        --focus-ring: rgba(142, 203, 255, .3);
        --danger: #ffb3bd;
        --danger-background: #3c252e;
        --danger-border: #87515e;
        --danger-button: #9e3947;
        --danger-button-hover: #b94353;
        --success: #9ae1b5;
        --success-background: #1b372e;
        --success-border: #3d765e;
        --success-button: #286c4d;
        --success-button-hover: #31815d;
        --warning: #f0d192;
        --warning-background: #3a3222;
        --warning-border: #826e43;
        --info: #a6dbf5;
        --info-background: #203746;
        --info-border: #446e88;
        --shadow: 0 3px 16px rgba(0, 0, 0, .16);
        --dropdown-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    }
}

html, body { background: var(--page-background); color: var(--text); }
body, input, select, textarea, button { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", Meiryo, "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: var(--link); }
a:hover, a:focus { color: var(--link-hover); }
::selection { background: var(--primary); color: var(--on-primary); }
hr { border-color: var(--border); }
.text-muted, .help-block, small.text-muted { color: var(--text-muted); }
.cl-blue { color: var(--link); }
.cl-red, .text-danger, .error-message { color: var(--danger); }
.cl-lightgray { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }

.navbar-default { background: var(--surface); border-color: var(--border); }
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-text { color: var(--text-muted); }
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus { color: var(--link); }
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus { background: var(--surface-hover); color: var(--text); }
.navbar-default .navbar-collapse,
.navbar-default .navbar-form { border-color: var(--border); }
.navbar-default .navbar-toggle { border-color: var(--border); }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background: var(--surface-hover); }
.navbar-default .navbar-toggle .icon-bar { background: var(--text-muted); }
.nav > li > a:hover, .nav > li > a:focus { background: var(--surface-hover); }
.navbar-box_ex > li.active > a { background: var(--surface); border-color: var(--border); color: var(--text); }
.navbar-box_ex > li.unactive > a { background: var(--surface-subtle); border-color: var(--border); color: var(--text-muted); }
.navbar-box_ex > li.nav-btn > a { color: var(--on-primary); }

.panel, .well, .list-group-item, .modal-content { background: var(--surface); border-color: var(--border); color: var(--text); }
.panel { box-shadow: var(--shadow); }
.panel-default > .panel-heading, .panel-footer, .modal-header, .modal-footer { background: var(--surface); border-color: var(--border); color: var(--text); }
.panel-title, .lable-ex { color: var(--text); }

/* Keep the summary, release and character cards aligned on anime detail pages. */
.anime-show-page .border-max, .actor-show-page .border-max { min-width: 0; }
.anime-show-page .panel, .actor-show-page .panel { float: none; padding: 0 15px; }
.anime-show-page .panel > .panel-heading, .actor-show-page .panel > .panel-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    float: none;
    width: auto;
    min-height: 50px;
    padding: 10px 5px;
    font-size: 18px;
    font-weight: 600;
}
.anime-show-page .panel-heading .panel-title, .actor-show-page .panel-heading .panel-title { font-size: inherit; font-weight: inherit; }
.anime-show-page .panel-heading .anime-number, .actor-show-page .panel-heading .anime-number { margin-left: auto; }
.anime-show-page .panel > .panel-body, .actor-show-page .panel > .panel-body { float: none; width: auto; padding: 15px 5px; }
.anime-show-page .anime-detail-panels { clear: both; }

.tag-head { background: var(--surface-subtle); color: var(--text-muted); }
.tag-content { color: var(--text); }
.botten-line { border-color: var(--border); }
.nav-tabs { border-color: var(--border); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus { background: var(--surface); color: var(--text); border-color: var(--border); border-bottom-color: transparent; }

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > td { border-color: var(--border-soft); }
.table > thead > tr > th { color: var(--text-muted); }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--surface-subtle); }
.table-hover > tbody > tr:hover,
.table > tbody > tr.active > td,
.table > tbody > tr > td.active { background: var(--surface-hover); }
.table-responsive { border-color: var(--border); }
.pagination > li > a, .pagination > li > span { background: var(--surface); border-color: var(--border); color: var(--link); }
.pagination > li > a:hover, .pagination > li > a:focus { background: var(--surface-hover); border-color: var(--border); color: var(--link-hover); }
.pagination > .active > span, .pagination > .active > a,
.pagination > .active > span:hover, .pagination > .active > a:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.pagination > .disabled > span, .pagination > .disabled > a,
.pagination > .disabled > span:hover, .pagination > .disabled > a:hover { background: var(--surface-subtle); border-color: var(--border); color: var(--text-muted); }

.form-control, .input-ex { background: var(--surface); border-color: var(--input-border); color: var(--text); box-shadow: none; }
.form-control:focus, .input-ex:focus { border-color: var(--link); box-shadow: 0 0 0 3px var(--focus-ring); }
.form-control::placeholder, .input-ex::placeholder { color: var(--text-placeholder); opacity: 1; }
.form-control[readonly], .form-control[disabled], fieldset[disabled] .form-control { background: var(--surface-subtle); color: var(--text-muted); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
select option, select optgroup { background: var(--surface); color: var(--text); }
.input-group-addon { background: var(--surface-subtle); border-color: var(--input-border); color: var(--text-muted); }
.has-error .control-label, .has-error .help-block { color: var(--danger); }
.has-error .form-control { border-color: var(--danger); }
.has-error .form-control:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--focus-ring); }
.btn-default { background: var(--surface); border-color: var(--input-border); color: var(--text); }
.btn-default:hover, .btn-default:focus, .btn-default:active { background: var(--surface-hover); border-color: var(--link); color: var(--text); }
.btn-primary, .btn-info, .btn-follow { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info:hover, .btn-info:focus, .btn-info:active,
.btn-follow:hover, .btn-follow:focus, .btn-follow:active { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.btn-danger { background: var(--danger-button); border-color: var(--danger-button); color: #fff; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background: var(--danger-button-hover); border-color: var(--danger-button-hover); color: #fff; }
.btn-success { background: var(--success-button); border-color: var(--success-button); color: #fff; }
.btn-success:hover, .btn-success:focus, .btn-success:active { background: var(--success-button-hover); border-color: var(--success-button-hover); color: #fff; }
.btn-link { color: var(--link); }
.btn-link:hover, .btn-link:focus { color: var(--link-hover); }
.btn-default[disabled], .btn-default[disabled]:hover,
.btn-primary[disabled], .btn-primary[disabled]:hover,
.btn-danger[disabled], .btn-danger[disabled]:hover { background: var(--surface-subtle); border-color: var(--border); color: var(--text-muted); opacity: .75; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.close { color: var(--text); opacity: .7; text-shadow: none; }
.close:hover, .close:focus { color: var(--text); opacity: 1; }

.alert-danger, .bg-danger, .list-group-item-danger, .panel-danger > .panel-heading { background: var(--danger-background); border-color: var(--danger-border); color: var(--danger); }
.alert-success, .bg-success, .list-group-item-success, .panel-success > .panel-heading { background: var(--success-background); border-color: var(--success-border); color: var(--success); }
.alert-warning, .bg-warning, .list-group-item-warning, .panel-warning > .panel-heading { background: var(--warning-background); border-color: var(--warning-border); color: var(--warning); }
.alert-info, .bg-info, .list-group-item-info, .panel-info > .panel-heading { background: var(--info-background); border-color: var(--info-border); color: var(--info); }
.label-success { background: var(--success-background); border: 1px solid var(--success-border); color: var(--success); }
.alert a { color: inherit; text-decoration: underline; }

.dropdown-menu { background: var(--surface); border-color: var(--border); box-shadow: var(--dropdown-shadow); }
.dropdown-menu > li > a, .dropdown-menu .menu-option { color: var(--text); }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus,
.dropdown-menu .menu-option:hover, .dropdown-menu .menu-option:focus { background: var(--surface-hover); color: var(--link); }
.dropdown-menu .menu-option[aria-current="true"] { color: var(--link); }
.dropdown-menu .divider { background: var(--border); }
.search-suggestions { background: var(--surface); border-color: var(--border); box-shadow: var(--dropdown-shadow); }
.search-suggestion { color: var(--text); }
.search-suggestion:hover, .search-suggestion:focus, .search-suggestion[aria-selected="true"] { background: var(--surface-hover); color: var(--link); }
.search-suggestion-category { background: var(--surface-subtle); color: var(--text-muted); }
.search-suggestion-detail, .search-suggestion-message { color: var(--text-muted); }

/* Select2 dropdowns are appended to body, outside the form itself. */
.select2-container--bootstrap .select2-selection,
.select2-container--default .select2-selection,
.select2-dropdown { background: var(--surface); border-color: var(--input-border); color: var(--text); }
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text); }
.select2-container--bootstrap .select2-selection__placeholder { color: var(--text-placeholder); }
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--surface-subtle); border-color: var(--border); color: var(--text); }
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--bootstrap .select2-selection__clear { color: var(--text-muted); }
.select2-container--bootstrap .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field { background: var(--surface); color: var(--text); border-color: var(--input-border); }
.select2-search--inline .select2-search__field { color: var(--text); }
.select2-search__field::placeholder { color: var(--text-placeholder); opacity: 1; }
.select2-container--bootstrap .select2-results__option,
.select2-container--default .select2-results__option { color: var(--text); }
.select2-container--bootstrap .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[aria-selected="true"] { background: var(--surface-subtle); }
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--primary); color: var(--on-primary); }
.select2-container--bootstrap .select2-results__option[aria-disabled="true"] { color: var(--text-muted); }
.select2-container--bootstrap .select2-selection--single .select2-selection__arrow b { border-top-color: var(--text-muted); }
.select2-container--bootstrap.select2-container--open .select2-selection--single .select2-selection__arrow b { border-bottom-color: var(--text-muted); }

@media (prefers-color-scheme: dark) {
    .label.status-badge { --status-color: #bdcbda; --status-background: #273645; --status-border: #566c82; --status-hover: #34495d; }
    .label.status-badge.label-status-playing,
    .label.status-badge.label-user-playing { --status-color: #a4cbff; --status-background: #203753; --status-border: #45678e; --status-hover: #2b496c; }
    .label.status-badge.label-status-ended,
    .label.status-badge.label-user-ended { --status-color: #a0e3b8; --status-background: #1c382c; --status-border: #447b5b; --status-hover: #294d3d; }
    .label.status-badge.label-status-new,
    .label.status-badge.label-user-new { --status-color: #f0d192; --status-background: #3a3222; --status-border: #826e43; --status-hover: #50442d; }
    .label.status-badge.label-user-following { --status-color: #d5bdff; --status-background: #35284b; --status-border: #70568f; --status-hover: #49365f; }
    .label.status-badge.label-status-transferred { --status-color: #99f6e4; --status-background: #163c39; --status-border: #417c74; --status-hover: #20524d; }
    .label.status-badge.label-game-ended { --status-color: #bdcbda; --status-background: #273645; --status-border: #566c82; --status-hover: #34495d; }
    .label.media-badge { --media-color: #bdcbda; --media-background: #273645; --media-border: #566c82; }
    .label.media-tv { --media-color: #a4cbff; --media-background: #203753; --media-border: #45678e; }
    .label.media-ova { --media-color: #dbbaff; --media-background: #38284c; --media-border: #795695; }
    .label.media-theatrical { --media-color: #ffb6c5; --media-background: #442735; --media-border: #8b5265; }
    .label.media-internet { --media-color: #96e2d6; --media-background: #1d3b3a; --media-border: #407c75; }
    .label.media-other { --media-color: #f0d192; --media-background: #3a3222; --media-border: #826e43; }
}