:root{color-scheme:dark;--paper:#0d1117;--surface:#161c25;--ink:#edf2f8;--muted:#a8b4c4;--navy:#edf2f8;--cobalt:#2165df;--petrol:#087d80;--border:#313b4b;--bg:#0d1117;--text:#edf2f8;--line:#313b4b}
html,body,.login{background:var(--paper);color:var(--ink)}
.app{width:min(580px,100%)}.app>header{padding-bottom:8px}.eyebrow{font-size:10px}.app h1{font-size:25px}.avatar-button{background:#202c40;color:#a5c7ff}
.page-tabs{padding-bottom:10px}.page-tabs a{color:#a8b4c4}.page-tabs .is-active{background:#1e2d44;color:#a5c7ff}
.category-grid{display:flex!important;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:3px 2px 9px;scrollbar-width:thin;scrollbar-color:#43566c transparent;align-items:stretch}
.category,.category.tone-green{flex:0 0 var(--task-width,104px);width:var(--task-width,104px);min-height:48px;max-height:none;display:flex;flex-direction:row;gap:6px;padding:8px 10px;background:#1b2534!important;border:1px solid #334157;color:#ced9e8;border-radius:12px;box-shadow:none}
.category .category-icon,.category>i{display:none}.category strong,.category.tone-green strong{font-size:14px;line-height:1.2;overflow-wrap:normal;text-align:left;width:auto}.category.is-selected{background:#2165df!important;color:#fff;border-color:#75aaff;box-shadow:none}.category:disabled{color:#758197!important;opacity:.65}
#taskFilters{background:transparent;padding:0;margin:0}#taskFilters summary{min-height:36px;font-size:13px;color:#a8b4c4}#taskSearch{width:100%;background:#161c25;border:1px solid #34404f;border-radius:10px;color:#edf2f8;padding:10px;font-size:16px}#allTasks{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}#allTasks button{min-height:44px;background:#1b2534;border:1px solid #34404f;border-radius:9px;padding:8px 12px;color:#edf2f8}#allTasks button[aria-pressed=true]{background:#2165df}
.mode-switch{background:#161c25;margin-top:8px}.mode-switch button{color:#a8b4c4}.mode-switch button.is-active{background:#27354b;color:#fff}
.block-panel{background:transparent;padding:8px 0;margin-top:5px;box-shadow:none;border:0}.time-inputs input,.extra-fields input,.extra-fields textarea,.rates-settings input,dialog input,dialog select,.report-heading input,.report-filter select,.report-controls input,.report-controls select,#chartResolution{background:#161c25!important;border-color:#34404f;color:#edf2f8!important}
.duration-header{margin-top:8px}.duration-header strong{color:#edf2f8;font-size:19px}.duration-header button{background:#161c25;color:#a8b4c4}.duration-chips button,.duration-chips button:nth-child(n){background:#1b2b43;color:#bdd7ff;border-color:#304764}
.roller-heading{margin-top:7px}.feedback-controls button{background:#161c25;color:#a8b4c4}.feedback-controls button[aria-pressed=true]{background:#1d4051;color:#8de3df}
.circular-dial{position:relative;display:block;width:202px;height:202px;margin:2px auto;background:#141d2b;border:1px solid #344a65;border-radius:50%;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;box-shadow:inset 0 0 0 12px #19263a}
.circular-dial .dial-ticks{position:absolute;inset:7px;border-radius:50%;background:repeating-conic-gradient(#677e9e 0deg 1.5deg,transparent 1.5deg 6deg);mask:radial-gradient(transparent 63%,#000 64%);-webkit-mask:radial-gradient(transparent 63%,#000 64%);pointer-events:none}
.circular-dial .roller-marker{inset:3px;left:3px;bottom:3px;position:absolute;width:auto;height:auto;border-radius:50%;background:none;transform:rotate(var(--dial-angle,0deg));pointer-events:none;box-shadow:none}
.circular-dial .roller-marker:after{content:'';position:absolute;top:0;left:calc(50% - 3px);height:19px;width:6px;border-radius:4px;background:#3d8bfd}
.circular-dial.feedback-pulse .roller-marker{background:none;box-shadow:none}.circular-dial.feedback-pulse .roller-marker:after{background:#f5b700;box-shadow:0 0 9px #f5b70066}
.circular-dial.is-dragging{background:#18263b;box-shadow:inset 0 0 0 12px #203657}
.dial-center{position:absolute;inset:35px 15px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;pointer-events:none}.dial-center small{font-size:10px;letter-spacing:.12em;color:#a8b4c4}.dial-center strong{font-size:37px;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}.dial-center span{font-size:11px;color:#a8b4c4;text-align:center}
.roller-actions{margin-top:2px}.roller-actions>button{background:#1b2b43;color:#bdd7ff;min-height:40px}.roller-actions>span{color:#a8b4c4}
.compact-detail,.extras-section.compact-detail,.rates-settings,.note-wrap,.extras-section,dialog,.login-card{background:#161c25;color:#edf2f8;border-color:#34404f;box-shadow:none}.compact-detail>summary,.studio-picker legend,.report-heading h2,.chart-card h3,.chart-toolbar h3{color:#edf2f8}.compact-detail>summary:before{color:#7dafff}.compact-detail>summary>small,.time-inputs label>span,.roller-title,.wheel-help,.time-hint,.speech-status,.speech-privacy,.app footer,.app footer a,.eyebrow,.section-heading span{color:#a8b4c4}
.compact-detail>summary{min-height:43px}.studio-picker button{background:#1b2534;border-color:#34404f;color:#dbe6f4}.studio-picker .is-selected{background:#2165df;color:#fff}.note-wrap textarea{color:#edf2f8}.note-wrap textarea::placeholder{color:#a8b4c4}.speech-button{background:#12444a;color:#b6f0eb;border-color:#27646a}.speech-button.is-listening{background:#a61b29;color:#fff}
.sticky-book{background:#0d1117f2}.book-button:disabled{background:#1d2735;color:#a8b4c4}.login input{background:#101722;color:#edf2f8;border-color:#34404f}.login-copy,.login label span{color:#a8b4c4}.dialog-heading button{background:#27354b;color:#edf2f8}.update-notice{background:#1e2d44;color:#edf2f8}
.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.stats-grid>div,.stats-grid>div:nth-child(n){background:#161c25;border:1px solid #34404f;border-top:3px solid #2165df;padding:13px 10px}.stats-grid strong{color:#fff;font-size:21px}.stats-grid span,.stats-grid small{color:#a8b4c4}.stats-grid>div:last-child{border-top-color:#16b8a6}
.entry-card,.mileage-card{background:#161c25;color:#edf2f8;border-color:#34404f}.entry-card>b,.summary-row>span:last-child{color:#81b3ff}.entry-card>span,.entry-card small,.mileage-card>span,.mileage-card small,.empty-state,#reportStatus{color:#a8b4c4}.summary-row{border-color:#34404f}.summary-row strong{color:#edf2f8}
.report-filter{flex-wrap:wrap}.report-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}.report-controls label{display:grid;gap:5px;color:#a8b4c4;font-size:13px}.report-controls input,.report-controls select,#chartResolution{min-width:0;max-width:100%;width:100%;padding:8px;border:1px solid #34404f;border-radius:8px;min-height:44px;font:inherit}#applyPeriod,#clearChartSelection{min-height:42px;padding:8px 12px;background:#2165df;border:0;border-radius:8px;color:#fff;margin-top:10px}
.chart-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px}.chart-toolbar h3{font-size:17px}.chart-toolbar label{display:grid;font-size:12px;color:#a8b4c4;gap:4px}.charts-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}.chart-card{min-width:0;padding:15px;background:#161c25;border:1px solid #293549;border-radius:17px}.chart-card h3{font-size:15px;margin:0 0 14px}.chart-scroll{overflow-x:auto;max-width:100%;scrollbar-width:thin;scrollbar-color:#43566c transparent}.chart-scroll svg{display:block}.chart-scroll svg [role=button]{cursor:pointer}.chart-scroll svg [role=button]:focus{outline:2px solid #f5b700}.chart-scroll svg [role=button]:hover{filter:brightness(1.25)}
.chart-data{margin-top:8px;font-size:13px;color:#a8b4c4}.chart-data summary{min-height:36px;cursor:pointer}.chart-data button{display:block;width:100%;text-align:left;min-height:44px;background:transparent;border:0;border-bottom:1px solid #34404f;color:#edf2f8;padding:8px;font:inherit}
.chart-rank{display:grid;grid-template-columns:1fr auto;width:100%;gap:7px;border:0;background:transparent;color:#edf2f8;text-align:left;padding:10px 0;min-height:60px;font:inherit}.chart-rank>span{font-size:14px}.chart-rank strong{font-size:13px}.chart-rank>i{height:9px;background:#273345;border-radius:6px;grid-column:1/-1;overflow:hidden}.chart-rank>i>i{display:block;height:100%;border-radius:6px}.chart-rank small{font-size:12px;color:#a8b4c4;grid-column:1/-1}.chart-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;margin-bottom:8px}.chart-legend span:nth-child(1){color:#3d8bfd}.chart-legend span:nth-child(2){color:#16b8a6}.chart-legend span:nth-child(3){color:#f5b700}
#studioChart{display:flex;gap:12px;align-items:center;flex-wrap:wrap}#studioChart svg{flex:none}.donut-legend{flex:1;min-width:140px}.donut-legend button{display:block;width:100%;min-height:44px;background:transparent;color:#edf2f8;border:0;border-left:3px solid;padding:6px 9px;margin:6px 0;text-align:left;font:inherit;font-size:13px}#modeChart{margin-top:10px}#chartSelection{padding:10px;background:#1e2d44;border-radius:10px;color:#edf2f8}#chartSelection span{display:block}
#weekSummary,#projectSummary{font-size:13px}.report-section:has(#weekSummary),.report-section:has(#projectSummary){display:none}
@media(min-width:800px){.charts-grid{grid-template-columns:1fr 1fr}.chart-card{padding:18px}.stats-grid strong{font-size:26px}}
@media(max-width:370px){.stats-grid{grid-template-columns:1fr}.circular-dial{width:188px;height:188px}.dial-center strong{font-size:33px}}
@media(prefers-reduced-motion:reduce){.circular-dial.feedback-pulse .roller-marker:after{box-shadow:none}}
/* Wider grip band; twelve notches correspond to 00, 05, ... 55 minutes. */
.circular-dial{width:218px;height:218px;box-shadow:inset 0 0 0 30px #20324b;border-color:#4f6e95}
.circular-dial .dial-ticks{inset:7px;background:repeating-conic-gradient(#91abce 0deg 3deg,transparent 3deg 30deg);mask:radial-gradient(transparent 52%,#000 53%);-webkit-mask:radial-gradient(transparent 52%,#000 53%)}
.circular-dial .roller-marker:after{height:29px;width:8px;left:calc(50% - 4px)}
.circular-dial.is-dragging{box-shadow:inset 0 0 0 30px #29486d}
@media(max-width:370px){.circular-dial{width:204px;height:204px}}
/* Release 14: an independent outer control ring around a quiet time display. */
.app{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom))}
.app>header .eyebrow{display:none}.app h1{font-size:23px}.app>header{padding:0 0 9px}.avatar-button{width:44px;height:44px}
.page-tabs{gap:3px;padding-bottom:8px}.page-tabs a{min-height:44px;padding:12px 4px;font-size:14px}
.section-heading{margin-bottom:5px}.section-heading h2{font-size:15px}#syncState{font-size:12px}
.mode-switch{margin:6px 0}.mode-switch button{height:44px}.category-grid{padding-bottom:4px}
#taskFilters summary{min-height:44px}#taskFilters{margin-top:-3px}
.block-panel{margin:0;padding:0;background:transparent!important}
.dial-toolbar{display:flex;justify-content:space-between;align-items:center;margin:0 0 2px}.dial-toolbar>button{font-size:14px;min-height:44px;background:transparent;border:0;color:#c8d4e4;padding:0 8px;text-decoration:underline;text-underline-offset:4px}
.feedback-controls button{min-height:44px;font-size:14px;padding:7px 11px}
.dial-shell{--dial-size:264px;position:relative;width:var(--dial-size);height:var(--dial-size);margin:0 auto;isolation:isolate}
.circular-dial,.circular-dial.is-dragging{position:absolute;inset:0;margin:0;width:100%;height:100%;border:1px solid #476185;background:#20334d;box-shadow:inset 0 1px 2px #6b91c34d,0 7px 24px #0005;overflow:hidden;transition:box-shadow .2s,background .2s;touch-action:none}
.circular-dial:after{content:'';position:absolute;inset:46px;border:1px solid #33445b;border-radius:50%;background:#0d1117;box-shadow:0 0 0 5px #0d1117;pointer-events:none}
.circular-dial .dial-ticks{inset:3px;background:repeating-conic-gradient(from -1deg,#6d8bb4 0deg 2deg,transparent 2deg 30deg);mask:radial-gradient(transparent 66%,#000 67%);-webkit-mask:radial-gradient(transparent 66%,#000 67%)}
.circular-dial.is-dragging{background:#2a4466;box-shadow:0 0 0 3px #408aff26,0 7px 24px #0005;cursor:grabbing}
.circular-dial .roller-marker{inset:0;z-index:2;transition:transform 180ms cubic-bezier(.2,.8,.2,1);will-change:transform}
.circular-dial .roller-marker:after{top:3px;height:8px;width:20px;left:calc(50% - 10px);border-radius:6px;background:#66b0ff;box-shadow:0 0 12px #3d8bfd99;transition:background .1s,box-shadow .1s}
.circular-dial.feedback-pulse .roller-marker:after{background:#fff;box-shadow:0 0 14px #72b8ff}
#minuteLabels{position:absolute;inset:0;pointer-events:none;z-index:1}#minuteLabels span{--label-radius:calc((var(--dial-size) / 2) - 25px);position:absolute;left:calc(50% - 20px);top:calc(50% - 22px);width:40px;height:44px;display:grid;place-items:center;transform:rotate(var(--mark-angle)) translateY(calc(-1 * var(--label-radius))) rotate(calc(-1 * var(--mark-angle)));font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:#bdcce0;transition:color .15s}
#minuteLabels span.is-current{color:#fff;font-weight:850;text-shadow:0 0 14px #67aaff}
.dial-center{z-index:3;inset:55px;border-radius:50%;border:1px solid #263950;background:radial-gradient(ellipse at top,#182334,#111822 75%);gap:5px;pointer-events:auto;padding:0;cursor:pointer;box-shadow:0 4px 12px #0004;touch-action:manipulation}
.dial-center small{font-size:12px;letter-spacing:.12em}.dial-center strong{font-size:39px;letter-spacing:-.04em}.dial-center span{font-size:14px;line-height:1.3;color:#b9c9de;max-width:130px}
.ring-help{text-align:center;color:#97abc4;font-size:12px;margin:9px 0 12px}
.duration-chips{margin-top:0;gap:6px}.duration-chips button{font-size:14px;height:46px;border-radius:12px}
.duration-header{margin:2px 0;min-height:44px}.duration-header strong{font-size:16px;color:#adbed4}.duration-header button{font-size:14px;min-width:44px;min-height:44px;background:transparent}
.compact-detail>summary{min-height:46px;font-size:14px}.compact-detail{margin:5px 0}.compact-detail>summary>small{font-size:12px}
#exactTimeDetails,#additionalDetails{background:transparent;border:1px solid #273447}
#exactTimeDetails:not([open]){display:none}
.category-section{display:grid;grid-template-columns:1fr auto;align-items:center}
.category-section>.section-heading{grid-column:1;grid-row:1}#syncState{display:none}
.category-section>.category-grid{grid-column:1/-1;grid-row:2}
#taskFilters{grid-column:2;grid-row:1;margin:0}#taskFilters summary{min-height:36px;font-size:12px}#taskFilters[open]{grid-column:1/-1;grid-row:3}
#exactTimeDetails .time-inputs{grid-template-columns:1fr 1fr}#exactTimeDetails .time-inputs>label:first-child{grid-column:1/-1}
.time-inputs input{font-size:16px!important;min-height:46px}.roller-actions{margin-top:10px}.roller-actions>button{min-height:44px;font-size:14px}
.sticky-book{padding-top:7px}.book-button{min-height:52px;background:#2165df;box-shadow:none}.app footer{font-size:12px}
.hardware-form{display:grid;gap:12px}.hardware-form label{display:grid;gap:7px;color:#b9c7da;font-size:14px}.hardware-form input,.hardware-form select,.hardware-form textarea{width:100%;min-width:0;font:inherit;font-size:16px;min-height:48px;padding:12px;border-radius:12px;border:1px solid #34465f;background:#161f2d;color:#edf2f8;appearance:none;-webkit-appearance:none}
.hardware-form input::-webkit-date-and-time-value{text-align:left}.hardware-form textarea{resize:vertical}.sale-price-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px}.hardware-form .speech-button{font:inherit;font-size:14px;min-height:48px;justify-content:center}.hardware-form output{font-size:23px;font-weight:750;text-align:right;color:#fff;padding:4px}
#saleMore{margin:0}#saleMore[open]{display:grid;gap:12px}.hardware-form .speech-status,.hardware-form .speech-privacy{margin:0}.hardware-form .speech-status:empty{display:none}#saleStatus{font-size:14px;color:#b9cee8;margin:0;overflow-wrap:anywhere}
#cancelSaleEdit{width:100%;min-height:44px;margin-top:8px;background:transparent;border:0;color:#afc7e8}#saleMonthTotal{color:#99bbee;font-weight:650}#hardwareView h2{font-size:21px}#hardwareView .report-heading h3{font-size:17px}#hardwareView .report-heading label{min-width:0;max-width:48%}
#salesReport{padding:13px}#salesReport h3{font-size:16px;margin:0 0 8px}#salesReport p{font-size:14px;line-height:1.5;color:#b9c7da}#salesReport a{display:inline-block;min-height:44px;padding:10px 0;color:#8dbbff}
@media(max-width:370px){.dial-shell{--dial-size:244px}.dial-center{inset:53px}.dial-center strong{font-size:34px}.duration-chips{gap:4px}.duration-chips button{font-size:12px}.page-tabs a{font-size:13px}.sale-price-row{gap:8px}}
@media(prefers-reduced-motion:reduce){.circular-dial,.circular-dial .roller-marker,#minuteLabels span{transition:none!important}.circular-dial.feedback-pulse .roller-marker:after{box-shadow:none}}