@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { color-scheme: light; --text:#202a28; --muted:#5d6d67; --accent:#166b50; --line:#dce4df; --soft:#f5f8f5; --good:#166b50; }
* { box-sizing:border-box; }
body { margin:0; background:#f3f5f1; color:var(--text); font:15px/1.55 'Manrope',sans-serif; }
.glow { display:none; }
main { width:min(1100px,calc(100% - 64px)); margin:0 auto; padding:32px 0 60px; }
header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 0 25px; border-bottom:1px solid var(--line); margin-bottom:28px; }
header .eyebrow { display:none; }
h1 { margin:0; font:600 25px/1.2 'Space Grotesk',sans-serif; letter-spacing:-1px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand img { flex-shrink:0; display:block; }
header p { max-width:330px; font-size:13px; text-align:right; margin:0; }
p { color:var(--muted); }
.layout { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.panel { min-width:0; padding:28px; background:white; border:1px solid var(--line); border-radius:18px; box-shadow:0 4px 14px #193d2405; }
.section-heading { margin:0 0 22px; font-size:16px; font-weight:800; letter-spacing:-.3px; }
.timer-display { text-align:center; margin:0 0 24px; padding:12px 0 8px; }
.timer-badge { width:auto; height:auto; aspect-ratio:auto; border:0; background:none; }
.time-text { color:var(--muted); font-size:14px; overflow-wrap:anywhere; }
.time-main { font:500 clamp(36px,4.4vw,52px)/1.2 'Space Grotesk',sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-2px; color:var(--text); margin-top:10px; }
.simple-banner { display:none; }
.timer-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.calculated-target { display:none; }
label { display:block; color:#46574f; font-size:13px; font-weight:700; margin:0 0 7px; }
input,select,textarea { width:100%; min-width:0; min-height:46px; padding:11px 12px; border:1px solid #ccd6cf; border-radius:8px; background:#fff; color:#202a28; -webkit-text-fill-color:#202a28; font:inherit; font-size:16px; }
option { background:#fff; color:#202a28; }
::placeholder { color:#728078; opacity:1; }
input[readonly],textarea[readonly] { background:var(--soft); }
:focus-visible { outline:3px solid #83c4ab; outline-offset:3px; }
.hint-inline { display:none; }
.buttons { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
button { min-height:44px; padding:10px 16px; border:1px solid #ccd6cf; border-radius:8px; background:white; color:#263b31; cursor:pointer; font:700 14px/1.4 'Manrope',sans-serif; transition:background .15s; }
button:hover:not(:disabled) { background:#edf3ee; }
button.primary { background:#17684e; border-color:#17684e; color:white; }
button.primary:hover:not(:disabled) { background:#10543d; }
button:disabled { color:#707a74; background:#f0f3ef; border-color:#e2e7e2; cursor:default; }
.timer-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:22px; }
.timer-actions #startBtn { grid-column:auto; }
.job-picker { margin-bottom:20px; }
.summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.metric { min-width:0; }
.metric-label { font-size:13px; color:var(--muted); }
.metric-value { margin-top:5px; font:500 27px/1.25 'Space Grotesk',sans-serif; letter-spacing:-.7px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.daily-summary > .summary-grid > .metric:first-child { grid-column:1/-1; padding-bottom:18px; border-bottom:1px solid var(--line); }
.daily-summary > .summary-grid > .metric:first-child .metric-value { font-size:52px; color:#17684e; letter-spacing:-2px; }
.daily-summary > .summary-grid > .metric:nth-child(2) { display:none; }
.progress-block { margin-top:24px; }
.progress-top { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 16px; color:var(--muted); font-size:12px; }
.progress-top strong { font-weight:600; }
.progress-track { height:7px; border-radius:6px; background:#e7ede7; overflow:hidden; margin:12px 0 8px; position:relative; }
.progress-fill { position:absolute; inset:0 auto 0 0; width:0; background:#288564; border-radius:inherit; transition:width .3s; }
.milestones { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }
.milestone.active { color:#166b50; font-weight:800; }
.encouragement { margin:16px 0 0; color:#456255; font-size:13px; }
.status { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:16px; }
.chip { color:#52645a; font-size:12px; }
.chip:first-child::before { content:''; display:inline-block; width:7px; height:7px; background:#298260; border-radius:50%; margin-right:6px; }
.workspace-tools { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; align-items:start; }
details.advanced { min-width:0; border:1px solid var(--line); background:white; border-radius:12px; overflow:hidden; }
details.advanced summary { padding:18px 20px; font-size:14px; font-weight:700; cursor:pointer; color:var(--text); }
details.advanced summary::marker { color:#63776b; }
details.advanced[open] { grid-column:1/-1; }
.advanced-content { border-top:1px solid var(--line); padding:24px; }
.advanced-content .timer-row { margin-top:16px; }
.inline-controls { display:flex; gap:12px; align-items:end; flex-wrap:wrap; margin-bottom:16px; }
.inline-controls > div { flex:1 1 200px; min-width:0; }
.summary-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:20px; }
.summary-toolbar label { margin:0; }
.summary-toolbar select { width:auto; min-width:160px; }
.summary-subgrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.summary-subgrid .metric { padding:16px; background:var(--soft); border-radius:8px; }
.history { margin-top:22px; }
.history-title,.invoice-title { font-weight:700; color:var(--text); margin:0 0 12px; }
.history-list { max-height:350px; overflow:auto; }
.history-row { padding:14px 0; display:flex; gap:16px; align-items:center; border-bottom:1px solid var(--line); font-size:14px; }
.history-row-main { flex:1; min-width:0; display:grid; gap:4px; overflow-wrap:anywhere; }
.history-row b { color:var(--text); }
.history-empty { text-align:center; color:var(--muted); padding:24px; background:var(--soft); border-radius:8px; }
.history-delete,#clearDataBtn,#deleteJobBtn { color:#a53631; }
.hint,.note,.meta-note { font-size:13px; color:var(--muted); line-height:1.6; }
.meta-note { margin-top:16px; }
.note:empty { display:none; }
.invoice-area { min-height:180px; resize:vertical; margin-top:16px; font:14px/1.6 'Manrope',sans-serif; }
.workspace-footer { color:var(--muted); font-size:12px; margin-top:20px; text-align:center; }
@media(max-width:700px) {
 main { width:calc(100% - 32px); padding:20px 0 32px; }
 header { padding-bottom:18px; margin-bottom:20px; }
 h1 { font-size:23px; }
 header p { display:none; }
 .layout { grid-template-columns:1fr; gap:16px; }
 .panel { padding:22px; border-radius:14px; }
 .section-heading { margin-bottom:18px; }
 .timer-display { padding:0; margin-bottom:20px; }
 .time-main { font-size:44px; }
 .job-picker { margin-bottom:18px; }
 .timer-row { gap:12px; }
 .timer-actions { gap:8px; margin-top:20px; }
 .timer-actions button { padding:10px 8px; }
 .daily-summary > .summary-grid > .metric:first-child .metric-value { font-size:42px; }
 .metric-value { font-size:24px; }
 .workspace-tools { grid-template-columns:1fr; margin-top:16px; gap:10px; }
 .summary-subgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .advanced-content { padding:18px; }
 .advanced-content .timer-row { grid-template-columns:1fr; }
 .inline-controls { align-items:stretch; }
 .inline-controls > div { flex-basis:100%; }
 .buttons button { flex:1 1 auto; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }

[hidden]{display:none!important}a{color:var(--accent)}.buttons a{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;text-decoration:none;font-weight:700}.note{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:20;width:min(600px,calc(100% - 32px));padding:14px 18px;background:#193f31;color:#fff;border-radius:10px;box-shadow:0 6px 24px #0002}.note:empty{display:none!important}header{flex-wrap:wrap}.brand{min-width:0}.workspace-footer{overflow-wrap:anywhere}#cloudStatus{width:100%;overflow-wrap:anywhere}#account .buttons{align-items:stretch}@media(max-width:380px){.panel{padding:17px}.brand img{width:32px;height:32px}header{gap:12px}.time-main{font-size:38px}.summary-subgrid{grid-template-columns:1fr}.advanced-content{padding:15px}}
