.topbar-actions{display:flex;align-items:center;gap:18px}
.topbar-actions .text-button{white-space:nowrap}
html[data-theme="dark"]{color-scheme:dark;background:#0b1723;color:#e4edf2}
html[data-theme="dark"] .topbar{background:#081421}
html[data-theme="dark"] .brand-light{color:#9ebbc6}
html[data-theme="dark"] .text-button{color:#d2e6e9}
html[data-theme="dark"] .eyebrow{color:#77d8ca}
html[data-theme="dark"] .subtle,
html[data-theme="dark"] .login p{color:#a7bdc9}
html[data-theme="dark"] .panel{background:#152536;border-color:#2a4252;box-shadow:0 4px 20px rgba(0,0,0,.12)}
html[data-theme="dark"] .primary{background:#36b8a6;color:#082126}
html[data-theme="dark"] .primary:hover{background:#64d0bf}
html[data-theme="dark"] .secondary{background:#1b3040;color:#e1edf0;border-color:#3a5362}
html[data-theme="dark"] .secondary:hover{background:#274253}
html[data-theme="dark"] .toolbar label,
html[data-theme="dark"] #task-form label{color:#bed0d8}
html[data-theme="dark"] .toolbar input,
html[data-theme="dark"] .toolbar select,
html[data-theme="dark"] #task-form input,
html[data-theme="dark"] #task-form select,
html[data-theme="dark"] #task-form textarea{background:#0e1e2c;border-color:#365061;color:#e4edf2}
html[data-theme="dark"] input::placeholder{color:#91a8b3}
html[data-theme="dark"] .area-title{background:#192c3b;border-color:#2a4252}
html[data-theme="dark"] .task-row{border-color:#293f4e}
html[data-theme="dark"] .count,
html[data-theme="dark"] .tag{background:#204149;color:#a9e3da}
html[data-theme="dark"] .pill{background:#403820;color:#f4d88b}
html[data-theme="dark"] .next,
html[data-theme="dark"] .empty{color:#b0c3cd}
html[data-theme="dark"] .edit{color:#8de3d4}
html[data-theme="dark"] .check{border-color:#91b6bf}
html[data-theme="dark"] .check:checked{background:#36b8a6;border-color:#36b8a6}
html[data-theme="dark"] .check:checked:after{color:#082126}
html[data-theme="dark"] .error{background:#43272c;border-color:#995a5f;color:#ffd0d0}
html[data-theme="dark"] dialog{background:#152536;color:#e4edf2}
html[data-theme="dark"] dialog::backdrop{background:#020a11bc}
html[data-theme="dark"] .icon-button{color:#b5c9d0}
@media(max-width:460px){.topbar-actions{gap:8px}.topbar-actions .text-button{font-size:12px}}