/* Autumn appearance, loaded only when selected. Classic assets remain unchanged.
   `modern` is the persisted setting key, independent of this season's palette. */
:root {
  --bg: #f3eee5; --bg-elevated: #fffcf7; --surface: #fffcf7; --surface-muted: #eee7dd; --surface-strong: #fffefb;
  --text: #302820; --text-muted: #766858; --text-subtle: #80715f;
  --border: #e1d6c7; --border-strong: #bfb09d; --shadow: #50351c0d; --shadow-strong: #50351c29;
  --accent: #9e4329; --accent-hover: #81341f; --accent-soft: #f3e3d7; --accent-rgb: 158, 67, 41; --accent-contrast: #fff;
  --season-gold: #b58a3c; --season-olive: #797b4c;
  --danger: #b83e3e; --danger-hover: #9d2f2f; --success: #287343; --warning: #966515;
  --radius: 10px; --radius-sm: 7px; --nav-height: 64px;
  --control-height: 40px; --control-radius: 7px; --control-shadow: none; --control-shadow-hover: none;
  --control-secondary-bg: var(--surface); --control-secondary-hover: var(--surface-muted); --control-secondary-text: var(--text);
}
:root[data-theme="dark"] {
  --bg: #1b1815; --bg-elevated: #2c2620; --surface: #24201c; --surface-muted: #302921; --surface-strong: #393025;
  --text: #f0e7da; --text-muted: #b8a995; --text-subtle: #ac9c87; --border: #44392e; --border-strong: #6b5845;
  --shadow: #0003; --shadow-strong: #0005;
  --accent: #e7aa7c; --accent-hover: #f0bc95; --accent-soft: #443023; --accent-rgb: 231, 170, 124; --accent-contrast: #291d14;
  --season-gold: #c7a866; --season-olive: #acac79;
  --danger: #ed9290; --danger-hover: #f5aaa9; --success: #80bd94; --warning: #d4ae6b;
  --control-secondary-bg: var(--surface); --control-secondary-hover: var(--surface-muted);
}
body { font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif; font-size: 14px; line-height: 1.55; }
body::before, body::after { content: none; animation: none; }
/* Six small leaves drift behind the UI; transforms only, no canvas/JS loop. */
.autumn-leaves { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; user-select: none; contain: strict; }
.autumn-leaves span { position: absolute; top: -60px; left: 7%; width: 26px; color: #ac603a; opacity: .3; animation: leaf-fall 30s linear infinite; animation-delay: -9s; }
.autumn-leaves svg { display: block; width: 100%; height: auto; animation: leaf-sway 7s ease-in-out infinite alternate; }
.autumn-leaves span:nth-child(2) { left: 26%; width: 19px; color: #ba914c; animation-duration: 39s; animation-delay: -31s; }
.autumn-leaves span:nth-child(3) { left: 47%; width: 29px; color: #a75b38; animation-duration: 35s; animation-delay: -17s; }
.autumn-leaves span:nth-child(4) { left: 66%; width: 20px; color: #969056; animation-duration: 44s; animation-delay: -38s; }
.autumn-leaves span:nth-child(5) { left: 85%; width: 25px; color: #c1964b; animation-duration: 33s; animation-delay: -5s; }
.autumn-leaves span:nth-child(6) { left: 95%; width: 18px; color: #a35637; animation-duration: 41s; animation-delay: -24s; }
.autumn-leaves span:nth-child(even) svg { animation-direction: alternate-reverse; animation-delay: -3s; }
@keyframes leaf-fall { from { transform: translate3d(-30px, -20px, 0) rotate(-20deg); } to { transform: translate3d(35px, calc(100vh + 100px), 0) rotate(220deg); } }
@keyframes leaf-sway { from { transform: translateX(-14px) rotate(-18deg); } to { transform: translateX(14px) rotate(22deg); } }
@media (max-width: 640px) { .autumn-leaves span:nth-child(even) { display: none; } }
@media (prefers-reduced-motion: reduce) { .autumn-leaves { display: none; } .autumn-leaves span, .autumn-leaves svg { animation: none; } }
strong, b { font-weight: 600; }
::placeholder { color: var(--text-subtle); opacity: 1; }
:is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Quiet, compact shell with enough room for the actual working surface. */
.navbar { grid-template-columns: 216px minmax(0, 1fr); padding: 0 24px; gap: 16px; background: var(--surface); backdrop-filter: none; box-shadow: none; }
.nav-brand { font-size: 15px; font-weight: 600; gap: 10px; }
.nav-brand-mark { width: 30px; height: 30px; border-radius: 6px; background: var(--accent); color: var(--accent-contrast); font-size: 12px; font-weight: 700; box-shadow: none; }
.nav-user { gap: 14px; }
.nav-user-avatar { width: 30px; height: 30px; flex-basis: 30px; border: 1px solid var(--border); box-shadow: none; }
.nav-user-meta { display: grid; gap: 0; line-height: 1.4; }
.nav-user-name { max-width: 180px; font-size: 13px; font-weight: 600; }
.user-level { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text-muted); font-size: 11px; font-weight: 400; }
.server-context-select, .server-context-label { width: auto; max-width: 210px; min-height: 34px; font-weight: 500; background: var(--surface); border-radius: 6px; }
.server-context-select { width: 190px; }
.azp-balance-link { flex-shrink: 0; height: 34px; padding: 0 11px; border-radius: 6px; box-shadow: none; border-color: var(--border); background: var(--surface-muted); }
.azp-balance-label { color: var(--text-muted); letter-spacing: 0; font-weight: 500; }
.azp-balance-link strong { font-weight: 600; }
.azp-balance-link:is(:hover, :focus-visible, .active) { transform: none; background: var(--accent-soft); border-color: var(--accent); }
.panel-settings-link, :root[data-theme="dark"] .panel-settings-link, .theme-toggle, :root[data-theme="dark"] .theme-toggle {
  min-height: 34px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); box-shadow: none; font-weight: 500;
}
.panel-settings-link:is(:hover, :focus-visible, .active), .theme-toggle:hover { transform: none; box-shadow: none; background: var(--surface-muted); border-color: var(--border-strong); }
.panel-settings-link-icon { width: 18px; height: 18px; background: none; border-radius: 0; color: var(--text-muted); }
.panel-settings-link-icon svg { width: 17px; height: 17px; }
.theme-toggle { gap: 5px; }
.theme-toggle-track, :root[data-theme="dark"] .theme-toggle-track { width: 20px; height: 20px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.theme-toggle-stars { display: none; }
.theme-toggle-thumb, :root[data-theme="dark"] .theme-toggle-thumb { width: 20px; height: 20px; background: none; box-shadow: none; transform: none; }
.theme-toggle-glyph, :root[data-theme="dark"] .theme-toggle-glyph { color: var(--text-muted); font-size: 17px; transform: none; }
.theme-toggle-text { min-width: 0; }
.app-container { grid-template-columns: 240px minmax(0, 1fr); }
.sidebar, :root[data-theme="dark"] .sidebar { padding: 20px 12px; background: var(--surface); border-right: 1px solid var(--border); box-shadow: none; backdrop-filter: none; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.sidebar-head { margin: 0; padding: 0 10px 12px; }
.sidebar-caption { font-size: 11px; font-weight: 500; letter-spacing: .03em; text-transform: none; color: var(--text-muted); }
.sidebar-close { display: none; }
.sidebar-search { display: flex; align-items: center; gap: 8px; margin: 0 4px 16px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); }
.sidebar-search:focus-within { border-color: var(--accent); }
.sidebar-search svg { flex: 0 0 15px; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.sidebar-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: none; font-size: 12px; color: var(--text); }
.sidebar-search input:focus-visible { outline: none; }
.sidebar-nav { gap: 2px; }
.nav-item { min-height: 38px; gap: 10px; padding: 8px 10px; border: 0; border-radius: 6px; font-size: 13px; font-weight: 400; line-height: 1.4; animation: none; transition: background .12s, color .12s; }
.nav-item:hover:not(.disabled), .nav-item:focus-visible:not(.disabled), :root[data-theme="dark"] .nav-item:hover:not(.disabled), :root[data-theme="dark"] .nav-item:focus-visible:not(.disabled) { transform: none; background: var(--surface-muted); box-shadow: none; color: var(--text); }
.nav-item.active, :root[data-theme="dark"] .nav-item.active { background: var(--accent-soft); color: var(--accent); box-shadow: none; font-weight: 600; }
.nav-item:focus-visible:not(.disabled) { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-icon, :root[data-theme="dark"] .nav-icon, .nav-item:hover:not(.disabled) .nav-icon, .nav-item:focus-visible:not(.disabled) .nav-icon, .nav-item.active .nav-icon { width: 28px; height: 28px; min-width: 28px; background: none; border: 0; border-radius: 0; box-shadow: none; filter: none; transform: none; color: inherit; }
.nav-icon svg { width: 28px; height: 28px; }
.nav-label { overflow: visible; overflow-wrap: anywhere; }
.nav-badge { border-radius: 4px; font-weight: 500; padding: 1px 5px; }
.nav-item.disabled { background: transparent; opacity: .55; }
.sidebar-nav [hidden], .sidebar-empty[hidden] { display: none; }
.sidebar-empty { padding: 0 10px; color: var(--text-muted); font-size: 12px; }
.main-content { position: relative; isolation: isolate; padding: 32px; }
.main-content::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; right: 12px; width: 160px; height: 125px; opacity: .2;
  background: url('autumn-botanical.svg') right -80px / 190px auto no-repeat;
}
.main-content [hidden] { display: none !important; }
.page-header { align-items: center; gap: 20px; margin-bottom: 28px; }
.page-header h1 { font-size: clamp(25px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.6px; line-height: 1.25; }
.page-header h1::after { content: ""; display: block; width: 36px; height: 2px; margin-top: 12px; background: var(--season-gold); }
.page-subtitle { font-size: 13px; line-height: 1.6; margin-top: 7px; }
.header-stats { font-weight: 500; padding: 5px 10px; border-radius: 6px; background: var(--surface); box-shadow: none; }

/* Shared controls: all interaction states remain visible without float/glow effects. */
:is(.primary-btn, .secondary-btn, .danger-btn, .action-btn, .script-btn, .login-btn, .logout-btn, .ghost-btn, .player-button, .player-back-link, .provider-action, .bug-submit, .test-submit, .report-answer-btn, .report-skip-btn, .ao-submit-btn, .scheduler-submit-btn, .scheduler-mini-btn, .property-mini-btn, .release-primary-button, .release-back-link, .dialog-button, .ghetto-action, .family-action, .load-older, .new-message-jump) {
  min-height: var(--control-height); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--surface); color: var(--text); box-shadow: none; font-weight: 600; font-size: 13px; line-height: 1.3;
  transform: none; filter: none; transition: background .12s, border-color .12s, color .12s;
}
:is(.primary-btn, .action-btn.primary, .script-btn.primary, .login-btn, .player-button, .bug-submit, .test-submit, .report-answer-btn, .ao-submit-btn, .scheduler-submit-btn, .property-mini-btn, .release-primary-button, .provider-action.connect, .ghetto-action.primary, .family-action.primary) { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); }
:is(.danger-btn, .action-btn.danger, .ghetto-action.danger, .family-action.danger, .dialog-button.danger) { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); color: var(--danger); }
:is(.action-btn.success, .dialog-button.success) { background: color-mix(in srgb, var(--success) 10%, var(--surface)); color: var(--success); border-color: var(--success); }
:is(.secondary-btn, .action-btn.secondary, .script-btn.secondary, .ghost-btn) { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.logout-form .logout-btn { min-height: 34px; padding: 6px 9px; border-color: transparent; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 500; }
.logout-form .logout-btn:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
:is(.action-btn, .script-btn).compact, .action-btn.small, .scheduler-mini-btn, .property-mini-btn { min-height: 32px; padding: 6px 10px; border-radius: 6px; font-size: 12px; }
:is(.primary-btn, .secondary-btn, .danger-btn, .action-btn, .script-btn, .login-btn, .logout-btn, .ghost-btn, .player-button, .player-back-link, .provider-action, .bug-submit, .test-submit, .report-answer-btn, .report-skip-btn, .ao-submit-btn, .scheduler-submit-btn, .scheduler-mini-btn, .property-mini-btn, .release-primary-button, .release-back-link, .dialog-button, .ghetto-action, .family-action, .load-older, .new-message-jump):hover:not(:disabled) { transform: none; filter: none; box-shadow: none; border-color: var(--accent); }
:is(.primary-btn, .action-btn.primary, .script-btn.primary, .login-btn, .player-button, .bug-submit, .test-submit, .report-answer-btn, .ao-submit-btn, .scheduler-submit-btn, .property-mini-btn, .release-primary-button, .provider-action.connect):hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
:is(.secondary-btn, .action-btn.secondary, .script-btn.secondary, .ghost-btn, .player-back-link):hover:not(:disabled) { background: var(--surface-muted); }
:is(.primary-btn, .secondary-btn, .danger-btn, .action-btn, .script-btn, .login-btn, .ghost-btn):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: none; }
.icon-close-btn, .property-remove-btn { border-radius: 6px; background: var(--surface); }
:is(.main-content, .player-panel, .release-shell, .login-container, .test-public) :is(input[type="text"], input[type="search"], input[type="number"], input[type="url"], input[type="email"], input[type="password"], input[type="datetime-local"], input[type="date"], input[type="time"], textarea, select) { border-color: var(--border-strong); border-radius: 7px; background: var(--surface); color: var(--text); box-shadow: none; }
:root[data-theme="dark"] :is(.main-content, .player-panel, .release-shell, .login-container, .test-public) :is(input, textarea, select) { box-shadow: none; }
:is(.main-content, .player-panel, .release-shell, .login-container, .test-public) :is(input, textarea, select):focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .15); }
.main-content :is(label, .field-label, .form-label, .settings-row-title) { font-weight: 500; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* Data views use restrained rows, legible type and compact secondary actions. */
:is(.users-table-container, .forms-table-wrap, .forms-panel, .script-card, .empty-state) { background: var(--surface); box-shadow: none; border-color: var(--border); }
.users-table th, .forms-table th, .token-table th { background: var(--surface-muted); color: var(--text-muted); text-transform: none; letter-spacing: 0; font-weight: 500; }
.users-table th, .users-table td, .forms-table th, .forms-table td { padding: 13px 16px; vertical-align: middle; font-size: 13px; }
.user-nickname, .sender-name { font-weight: 600; }
.vk-link { color: var(--accent); font-weight: 500; }
.level-badge, .status-badge, .access-badge { border-radius: 5px; padding: 3px 7px; font-size: 11px; font-weight: 500; box-shadow: none; }
.level-badge, :root[data-theme="dark"] .level-badge { color: var(--text-muted); background: var(--surface-muted); border-color: var(--border); }
.level-badge.level-6, :root[data-theme="dark"] .level-badge.level-6 { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.users-manage-table .user-row:hover, .forms-table tbody tr:hover { background: var(--surface-muted); }
.users-manage-table .table-actions { text-align: right; }
.user-filters { border-radius: 10px; box-shadow: none; background: var(--surface); padding: 18px; gap: 14px; }
.user-filter-field label, .user-filter-check span, .user-filter-count { font-weight: 500; }
.user-filter-check { border: 0; background: transparent; padding: 6px 0; min-height: 30px; }
.user-filter-checks { gap: 18px; padding-top: 10px; border-top: 1px solid var(--border); }
.user-card-backdrop, .modal-backdrop { backdrop-filter: none; }
.user-card-head h2 { font-size: 22px; font-weight: 600; }
.user-card-body { align-content: start; }
.user-card-summary > div { padding: 12px; border-radius: 6px; }
.user-card-section { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; padding: 18px 0 0; }
.user-card-section.danger-zone { padding: 16px; border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--border)); border-radius: 8px; }
.field-label, .user-card-profile, .card-check-row { font-weight: 500; }
:is(.view-button, .helper-tab, .prefix-option) { background: var(--surface); color: var(--text-muted); border-color: var(--border); box-shadow: none; }
:is(.view-button.active, .view-button.is-active, .helper-tab.active, .prefix-option.active, .prefix-option.selected) { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); box-shadow: none; }

/* Catalogue retains the original slot values and practical grid/list controls. */
.ic-page, :root[data-theme="dark"] .ic-page { --ic-accent: var(--accent); --ic-soft: var(--accent-soft); gap: 22px; }
.ic-page .ic-eyebrow { letter-spacing: .03em; font-weight: 500; font-size: 11px; color: var(--text-muted); }
.ic-page h1 { font-size: 30px; letter-spacing: -.6px; font-weight: 600; margin: 8px 0; }
.ic-title-dot { display: none; }
.ic-header p { font-size: 13px; }
.ic-overview { border-radius: 9px; padding: 20px; background: var(--surface); gap: 24px; }
.ic-overview-mark { display: none; }
.ic-total strong { font-size: 30px; font-weight: 600; }
.ic-total > span { letter-spacing: .02em; font-weight: 500; }
.ic-status { font-weight: 500; }
.ic-status::before { box-shadow: none; }
.ic-card, .ic-search, .ic-select { border-radius: 8px; }
.ic-card:hover { transform: none; box-shadow: none; }
.ic-art { background: var(--surface-muted); }
.ic-art::after { display: none; }
.ic-card h2 { font-weight: 600; }
.ic-badge { font-weight: 500; }
.ic-button, .ic-chips button { font-weight: 500; border-radius: 6px; }
.ic-sync-button { background: var(--accent); color: var(--accent-contrast); }
.ic-dialog { border-radius: 12px; }

@media (max-width: 1250px) {
  .navbar { grid-template-columns: 200px minmax(0, 1fr); padding-inline: 20px; }
  .nav-user { gap: 10px; } .nav-user-name { max-width: 145px; }
  .panel-settings-link-text, .theme-toggle-text { display: none; }
  .server-context-select { width: 170px; } .main-content { padding: 26px; }
}
@media (max-width: 1000px) and (min-width: 901px) {
  .navbar { grid-template-columns: 160px minmax(0, 1fr); }
  .nav-user-avatar { display: none; } .nav-user-name { max-width: 120px; }
  .app-container { grid-template-columns: 220px minmax(0, 1fr); } .main-content { padding: 22px; }
}
@media (max-width: 900px) {
  .navbar { display: flex; gap: 12px; padding: 10px 16px; height: auto; min-height: 64px; }
  .nav-user { margin-left: auto; } .nav-user-meta { display: none; }
  .nav-brand-mark { width: 30px; height: 30px; }
  .mobile-nav-toggle { display: inline-grid; width: 34px; height: 34px; padding: 7px; border-radius: 6px; gap: 4px; box-shadow: none; }
  .mobile-nav-toggle:hover { transform: none; box-shadow: none; }
  .app-container { display: block; }
  .sidebar, :root[data-theme="dark"] .sidebar { width: min(300px, calc(100vw - 48px)); height: 100dvh; padding: 20px 12px; border-radius: 0; transform: translateX(-101%); transition: transform .18s ease; }
  :root.sidebar-open .sidebar { transform: translateX(0); box-shadow: 12px 0 40px #0003; }
  :root.sidebar-open body { overflow: hidden; }
  :root.sidebar-open .app-container { z-index: 60; }
  .sidebar-close { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 5px; background: var(--surface-muted); color: var(--text); font-size: 23px; line-height: 1; }
  .sidebar-head { align-items: center; } .sidebar-backdrop { background: #10181366; backdrop-filter: none; }
  .sidebar-search { min-height: 40px; } .sidebar-search input { font-size: 14px; }
  .nav-item { min-height: 42px; } .main-content { padding: 24px 18px; }
  .page-header { align-items: flex-start; margin-bottom: 22px; } .header-stats { align-self: flex-start; }
}
@media (max-width: 640px) {
  .navbar { gap: 8px; padding: 10px 12px; flex-wrap: wrap; }
  .nav-user { gap: 7px; flex-wrap: wrap; justify-content: flex-end; flex: 1; }
  .nav-user-avatar { display: none; }
  .server-context-form { order: 5; flex-basis: 100%; }
  .server-context-select { width: 100%; max-width: none; font-size: 11px; }
  .nav-brand, .mobile-nav-toggle { align-self: flex-start; margin-top: 1px; }
  .azp-balance-link { height: 34px; padding-inline: 9px; min-width: 62px; }
  .main-content { padding: 22px 12px; }
  .page-header h1 { font-size: 26px; } .page-subtitle { font-size: 13px; }
  .user-filters { padding: 14px; } .user-filter-checks { gap: 9px; }
  .user-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-filter-field:first-child, .user-filter-field:nth-child(4) { grid-column: 1 / -1; }
  .users-table th, .users-table td, .forms-table th, .forms-table td { padding: 12px; }
  .users-manage-table { min-width: 740px; }
  :is(.form-actions, .modal-actions, .row-actions, .settings-actions, .property-actions, .scheduler-actions) { flex-wrap: wrap; }
  .user-card-panel { border-radius: 0 !important; }
  .ic-overview { gap: 14px; padding: 16px; } .ic-page h1 { font-size: 26px; }
}

.level-badge.level-3 { color: #7b3fb0; background: #f1e5fc; border-color: #ddc4ef; }
:root[data-theme="dark"] .level-badge.level-3 { color: #dbb5ff; background: #392747; border-color: #62417e; }