body aside{background:var(--c-sidebar)}body .card,body dialog,body input,body select,body textarea,body button{background:var(--c-panel);color:var(--c-text);border-color:var(--c-border)}body .primary,body.dark .primary{background:var(--green);color:var(--c-buttonText)}body .hero{background:var(--c-hero);color:var(--c-heroText)}body .hero p,body .hero .hint{color:var(--c-heroText)!important}body .hero .big,body .hero .eyebrow{color:var(--accent)}body .pill,body nav button.active,body .day.done,body th,body .track,body .feedback{background:var(--c-soft)}body .pill,body nav button.active,body .feedback,body td a{color:var(--green)}body td,body .day.done{border-color:var(--line)}body button:hover{background:var(--c-soft)}body .hint,body p,body .eyebrow,body .stat-label,body .status,body th,body td small,body .day b,body .day small,body .bar-label,body footer{color:var(--muted)}body .hero p{color:var(--c-heroText)}body .brand{font-size:18px;letter-spacing:-.7px}body .month-volume,body .month-ratings{margin-bottom:20px}.monthly-svg{display:block;width:100%;height:auto}.month-bars{height:205px;display:flex;gap:5px;padding:16px 0 28px;margin:15px 0 5px;border-bottom:1px solid var(--line)}.month-bar-column{flex:1;min-width:0;position:relative;height:100%;display:flex;align-items:end}.month-bar-column>div{width:100%;min-height:1px;border-radius:3px 3px 0 0;background:var(--green)}.month-bar-column small{position:absolute;bottom:-22px;font-size:10px;left:50%;transform:translateX(-50%);color:var(--muted)}.focus-pie{display:grid;grid-template-columns:minmax(130px,210px) minmax(0,1fr);align-items:center;gap:16px;margin:18px 0}.focus-pie svg{width:100%;height:auto}.focus-key{display:flex;align-items:center;gap:7px;margin:10px 0;font-size:12px}.focus-key i{width:9px;height:9px;border-radius:50%;flex-shrink:0}.focus-key span{flex:1}.focus-key b{white-space:nowrap}.focus-key small{color:var(--muted);font-weight:400}.month-chart-scroll{overflow-x:auto}.month-chart-scroll svg{min-width:520px}@media(max-width:700px){.focus-pie{grid-template-columns:1fr}.focus-pie svg{max-width:220px;margin:auto}.month-bars{gap:2px}.month-bar-column small{font-size:8px}body .month-ratings .card-head{flex-wrap:wrap;gap:12px}body #filters input[type=month]{width:100%;min-width:0}body #filters select{max-width:100%;grid-column:1/-1}}
body.dark aside{background:var(--c-sidebar)}body.dark .card,body.dark dialog,body.dark input,body.dark select,body.dark textarea,body.dark button{background:var(--c-panel);color:var(--c-text)}body.dark .primary{background:var(--green);color:var(--c-buttonText)}body.dark th,body.dark .day.done,body.dark nav button.active,body.dark .pill{background:var(--c-soft)}body.dark nav button.active,body.dark .pill{color:var(--green)}body.dark .feedback{color:var(--green)}body .brand .target{flex-shrink:0}
/* Form controls must be allowed to shrink below their option text width. */
body dialog{width:min(680px,calc(100vw - 48px));max-width:calc(100vw - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;overflow-x:hidden}
body dialog form:not(.settings-form){grid-template-columns:repeat(2,minmax(0,1fr))}
body dialog label,body dialog fieldset,body dialog .settings-fields,body dialog .card-head>div{min-width:0}
body dialog input:not([type=checkbox]),body dialog select,body dialog textarea{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
body dialog select{text-overflow:ellipsis}
body dialog .card-head{gap:14px;align-items:flex-start}
body dialog .card-head>button{flex-shrink:0}
body:has(dialog[open]){overflow:hidden}
@media(max-width:700px){
 body dialog[open]{position:fixed;inset:0;margin:0;width:100%;max-width:100%;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;border:0;border-radius:0;padding:0;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;box-sizing:border-box}
 body dialog[open]>.card-head{margin:0;padding:calc(18px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) 16px max(18px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);background:var(--panel)}
 body dialog[open]>.card-head h2{font-size:20px}
 body dialog[open]>.card-head button{min-width:44px;min-height:44px}
 body dialog[open]>form{margin:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:20px max(18px,env(safe-area-inset-right,0px)) 0 max(18px,env(safe-area-inset-left,0px));align-content:start;gap:18px;scroll-padding:18px 0 100px}
 body dialog[open]>form:not(.settings-form){grid-template-columns:minmax(0,1fr)}
 body dialog[open] input,body dialog[open] select,body dialog[open] textarea{font-size:16px;min-height:48px}
 body dialog[open] label{font-size:13px;gap:8px}
 body dialog[open] .actions{position:sticky;bottom:0;margin-top:4px;padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px));background:var(--panel);border-top:1px solid var(--line);z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px}
 body dialog[open] .actions button{min-height:48px;white-space:normal}
}
.scheme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.scheme-option{display:flex!important;flex-wrap:wrap;align-items:center;gap:9px!important;padding:13px;border:1px solid var(--line);border-radius:10px;cursor:pointer}.scheme-option:has(input:checked){border-color:var(--green);background:var(--soft)}body dialog .scheme-option input[type=radio]{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;margin:0;accent-color:var(--green)}.scheme-swatches{display:flex;gap:3px}.scheme-swatches i{width:15px;height:22px;border-radius:4px;border:1px solid #00000012}.scheme-option>span:last-child{font-weight:600;width:100%}@media(max-width:700px){.scheme-options{grid-template-columns:repeat(2,minmax(0,1fr))}}