:root { --surface: #fff; --field: #fff; }
.theme-toggle { flex-shrink: 0; font-size: 12px; padding: 8px 10px; background: var(--surface); color: var(--ink, #183747); border: 1px solid var(--line, #dae5e9); border-radius: 7px; width: auto; }
header { gap: 12px; }
#priceSortControl { margin-bottom: 15px; }
#priceSort { font-size: 12px; }
.login-card .theme-toggle { display: block; margin: -10px 0 20px auto; }
html[data-theme="dark"] { color-scheme: dark; --accent: #00a9cb; --ink: #e3edf3; --muted: #a0b4c1; --line: #344956; --bg: #111b23; --surface: #1b2a35; --field: #14232e; color: var(--ink); background: var(--bg); }
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] header, html[data-theme="dark"] aside, html[data-theme="dark"] .client-card, html[data-theme="dark"] .section, html[data-theme="dark"] dialog, html[data-theme="dark"] .login-card { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--field); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #92a8b7; }
html[data-theme="dark"] label, html[data-theme="dark"] p, html[data-theme="dark"] .team-note, html[data-theme="dark"] .team-row small, html[data-theme="dark"] .cloud-user { color: var(--muted); }
html[data-theme="dark"] button { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] button:hover { background: #243d4c; border-color: var(--accent); }
html[data-theme="dark"] .primary, html[data-theme="dark"] .login-card button[type="submit"] { background: var(--accent); color: #fff; border-color: var(--accent); }
html[data-theme="dark"] .primary:hover { background: #008fab; }
html[data-theme="dark"] .secondary, html[data-theme="dark"] .tabs .active { background: #163e4c; color: #8ae3f5; }
html[data-theme="dark"] .tabs button { border-color: transparent; }
html[data-theme="dark"] .section-header { background: #193b48; }
html[data-theme="dark"] .section-header input { background: transparent; color: #91e1f2; border-color: transparent; }
html[data-theme="dark"] .civil-section .section-header { background: #3f2e24; border-bottom-color: #765137; }
html[data-theme="dark"] .civil-section .section-header input, html[data-theme="dark"] .civil-section .section-header > span { color: #ffb574; }
html[data-theme="dark"] .line { border-bottom-color: var(--line); }
html[data-theme="dark"] .line input, html[data-theme="dark"] .line textarea { background: transparent; border-color: transparent; }
html[data-theme="dark"] .line input:hover, html[data-theme="dark"] .line textarea:hover { border-color: var(--line); }
html[data-theme="dark"] .line input.missing { background: #3b2e20; border-color: #bc8a45; }
html[data-theme="dark"] .add-line, html[data-theme="dark"] .icon { background: transparent; color: #91dbea; }
html[data-theme="dark"] .empty { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .warning, html[data-theme="dark"] .cloud-session-message { background: #3c3021; color: #f2cf90; border-color: #b78d4a; }
html[data-theme="dark"] .auto-note { color: #eec187; }
html[data-theme="dark"] .auto-report, html[data-theme="dark"] .wizard-profile, html[data-theme="dark"] .wizard-kpis div, html[data-theme="dark"] .wizard-attraction, html[data-theme="dark"] .team-invite-message { background: #173440; border-color: var(--line); }
html[data-theme="dark"] .auto-report summary, html[data-theme="dark"] .wizard-profile strong { color: #87daeb; }
html[data-theme="dark"] .wizard-progress span { background: #364c59; }
html[data-theme="dark"] .wizard-progress .done { background: var(--accent); }
html[data-theme="dark"] .danger-text, html[data-theme="dark"] .cloud-team-error, html[data-theme="dark"] #wizardError, html[data-theme="dark"] [role="alert"] { color: #ffab9b; }
html[data-theme="dark"] .danger { background: #b94536; color: #fff; }
html[data-theme="dark"] .team-row { border-color: var(--line); }
html[data-theme="dark"] a { color: #88daee; }
html[data-theme="dark"] #toast { background: #dce9f1; color: #14232e; }
html[data-theme="dark"] dialog::backdrop { background: #060b10b3; }
@media (min-width: 801px) and (max-width: 1450px) { header .header-title { display: none; } header { padding: 0 18px; gap: 10px; } #saveStatus { max-width: 100px; } header button { font-size: 12px; padding: 7px 9px; } }
@media (max-width: 800px) { header { height: auto; min-height: 60px; padding: 10px 12px; flex-wrap: wrap; gap: 8px; } .theme-toggle { font-size: 11px; padding: 7px 9px; } }