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

:root { font-family: 'DM Sans', sans-serif; color: #233531; background: #f7f5ef; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid #e5a362; outline-offset: 2px; }
[hidden] { display: none !important; }
.shell { width: min(1120px, calc(100% - 48px)); margin: auto; }
.masthead { display: flex; justify-content: space-between; align-items: center; padding: 31px 0; border-bottom: 1px solid #dedfd6; }
.brand { display: flex; gap: 12px; align-items: center; font: 800 13px/1.2 Manrope, sans-serif; letter-spacing: .12em; }
.brand small { display: block; margin-top: 4px; color: #8b9991; font: 700 9px Manrope, sans-serif; letter-spacing: .2em; }
.brand-mark { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; color: white; background: #1b665a; font: 29px/1 Georgia, serif; padding-bottom: 3px; }
.local-badge { display: flex; align-items: center; gap: 9px; border: 1px solid #e4e6dc; border-radius: 30px; padding: 9px 14px; color: #65766d; background: #fbfaf5; font-size: 12px; font-weight: 600; }
.badge-dot { width: 7px; height: 7px; background: #2c9b76; border-radius: 50%; }
.project-bar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; padding-top: 25px; }
.project-picker { width: min(340px, 100%); }
.project-picker label { display: block; margin-bottom: 8px; }
.project-picker select { width: 100%; height: 43px; padding: 0 13px; border: 1px solid #dbe3da; border-radius: 8px; background: #fff; color: #233531; font: 700 14px 'DM Sans', sans-serif; }
.project-actions { display: flex; gap: 9px; }
.project-bar p { width: 100%; margin: 0; color: #9aa79d; font-size: 11px; }
.due-date-line { padding: 9px 12px; border: 1px solid #e8d8bd; border-radius: 7px; background: #fbf1e3; color: #865d36; font-size: 12px; font-weight: 700; }
.due-date-line.overdue { border-color: #e7c3b9; background: #fcf0eb; color: #a44f39; }
.intro { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 36px 0 37px; }
.eyebrow, .section-kicker { color: #a47147; font: 800 10px Manrope, sans-serif; letter-spacing: .18em; }
.eyebrow { margin: 0 0 13px; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: Manrope, sans-serif; letter-spacing: -.05em; }
h1 { margin-bottom: 10px; font-size: clamp(32px, 4vw, 46px); line-height: 1.2; }
h1 span { color: #d9935a; }
.subtitle { margin: 0; color: #75857d; font-size: 15px; }
.limit-tag { display: flex; flex-direction: column; gap: 6px; min-width: 132px; border-left: 1px solid #d6dbd1; padding-left: 22px; margin-bottom: 3px; }
.limit-tag > span { color: #91a097; font: 800 9px Manrope, sans-serif; letter-spacing: .16em; }
.limit-tag strong { font: 800 29px/1.2 Manrope, sans-serif; letter-spacing: -.05em; }
.limit-tag small { color: #76877d; font: 600 13px 'DM Sans', sans-serif; letter-spacing: 0; }
.dashboard { display: grid; grid-template-columns: 1fr 1.09fr; gap: 18px; }
.balance-card, .timer-card { min-height: 320px; border-radius: 18px; }
.balance-card { padding: 29px 33px 0; color: white; background: #1c6659; box-shadow: 0 13px 28px #1b665a18; }
.card-top { display: flex; justify-content: space-between; align-items: start; color: #a5d4c1; font: 800 10px Manrope, sans-serif; letter-spacing: .18em; }
.card-icon { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid #7dba9f88; border-radius: 50%; color: #d7e9d9; font: 17px 'DM Sans', sans-serif; }
.balance-body { display: flex; align-items: center; gap: 29px; padding: 26px 0 30px; }
.progress-ring { --progress: 0%; display: grid; place-items: center; flex: none; width: 144px; height: 144px; border-radius: 50%; background: conic-gradient(#f1ae74 var(--progress), #4a8578 0); }
.ring-center { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 114px; height: 114px; border-radius: 50%; background: #1c6659; }
.ring-center span { font: 800 31px Manrope, sans-serif; letter-spacing: -.07em; }
.ring-center small { color: #9bceba; font: 800 9px Manrope, sans-serif; letter-spacing: .18em; }
.balance-numbers p { margin: 0 0 5px; color: #b8dbcb; font-size: 14px; }
.balance-numbers strong { display: block; font: 800 clamp(25px, 3vw, 35px) Manrope, sans-serif; letter-spacing: -.07em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.balance-numbers > span { color: #a8d1bf; font-size: 12px; }
.balance-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ffffff29; padding: 18px 0; }
.balance-footer span { color: #a6d1bf; font: 800 10px Manrope, sans-serif; letter-spacing: .14em; }
.balance-footer strong { font: 700 16px Manrope, sans-serif; font-variant-numeric: tabular-nums; }
.timer-card { padding: 30px 33px; background: #fff; border: 1px solid #e7e8df; box-shadow: 0 12px 32px #273e2609; }
.timer-heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
h2 { margin: 7px 0 0; font-size: 21px; line-height: 1.3; }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 20px; background: #f0f3ee; color: #6f8176; font-size: 11px; font-weight: 700; white-space: nowrap; }
.status span { width: 6px; height: 6px; border-radius: 50%; background: #9caba1; }
.status.running { background: #e9f5ec; color: #277458; }
.status.running span { background: #32a66c; }
.status.paused { background: #fcf1e5; color: #a36e3c; }
.status.paused span { background: #d69452; }
.timer-caption { color: #8a9990; font-size: 13px; margin: 10px 0 22px; }
.timer-display { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; }
.timer-display > span { font: 800 clamp(35px, 4vw, 49px)/1 Manrope, sans-serif; letter-spacing: -.075em; font-variant-numeric: tabular-nums; }
.timer-display small { color: #a6b1a8; font: 800 9px Manrope, sans-serif; letter-spacing: .11em; }
.controls { display: flex; gap: 9px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 43px; padding: 0 20px; border-radius: 8px; font-size: 13px; font-weight: 700; }
.button span { font-size: 11px; }
.button.primary { border: 1px solid #1c6659; background: #1c6659; color: white; }
.button.primary:hover { background: #124e44; }
.button.secondary { border: 1px solid #dbe3da; background: #fff; color: #31584e; }
.button.secondary:hover { background: #f1f7f1; }
.note-field { margin-top: 19px; }
.note-field label { display: block; margin-bottom: 7px; color: #405b51; font-size: 12px; font-weight: 700; }
.note-field label span { color: #98a69c; font-weight: 500; }
.note-field input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #dce4dc; border-radius: 7px; background: #fbfcf9; color: #233531; font: 13px 'DM Sans', sans-serif; }
.note-field input::placeholder, .interval-note::placeholder { color: #a3afa4; }
.timer-footnote { margin: 18px 0 0; color: #a2afa4; font-size: 11px; }
.history { margin-top: 54px; }
.history-header, .activity-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.history-header h2, .activity-heading h2 { font-size: 25px; margin: 7px 0 4px; }
.history-header p { margin: 0; color: #87968c; font-size: 13px; }
.day-count { padding: 8px 13px; border: 1px solid #e0e4da; border-radius: 6px; color: #60796c; font-size: 12px; font-weight: 700; white-space: nowrap; }
.daily-list { margin-top: 22px; overflow: hidden; border: 1px solid #e7e9e0; border-radius: 13px; background: #fff; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 186px; text-align: center; }
.empty-state > span { color: #d19a6b; font-size: 27px; margin-bottom: 11px; }
.empty-state strong { font: 700 14px Manrope, sans-serif; }
.empty-state p { margin: 6px 0 0; color: #98a59b; font-size: 12px; }
.day-row { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(100px, 1.2fr) 100px; align-items: center; gap: 25px; padding: 19px 25px; border-bottom: 1px solid #eef0e9; }
.day-row:last-child { border-bottom: 0; }
.day-meta strong { display: block; font: 700 13px Manrope, sans-serif; }
.day-meta span { display: block; color: #9aaa9e; font-size: 11px; margin-top: 4px; }
.day-bar { height: 7px; background: #edf3ed; border-radius: 8px; }
.day-bar span { display: block; height: 100%; background: #3b9b77; border-radius: 8px; min-width: 3px; }
.day-time { text-align: right; font: 800 15px Manrope, sans-serif; font-variant-numeric: tabular-nums; }
.activity { margin: 41px 0 72px; }
.activity-heading { flex-wrap: wrap; padding-bottom: 15px; border-bottom: 1px solid #dedfd6; }
.activity-heading h2 { font-size: 21px; }
.record-actions { display: flex; align-items: center; gap: 19px; flex-wrap: wrap; }
.text-button { border: 0; background: none; color: #246d5c; font-size: 12px; font-weight: 700; padding: 8px 0; }
.text-button:disabled { opacity: .45; cursor: default; }
.activity-empty { color: #97a69b; font-size: 13px; padding: 10px 0; }
.interval-row { display: flex; gap: 16px; align-items: center; padding: 16px 4px; border-bottom: 1px solid #e9eae3; }
.interval-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #e8f2eb; color: #297c5d; font-size: 23px; }
.interval-detail { flex: 1; min-width: 0; }
.interval-detail strong, .interval-detail span { display: block; }
.interval-detail strong { font: 700 13px Manrope, sans-serif; }
.interval-detail span { margin-top: 4px; color: #87968d; font-size: 11px; }
.interval-note { display: block; width: min(100%, 510px); height: 32px; margin-top: 9px; padding: 0 9px; border: 1px solid #e2e9df; border-radius: 6px; background: #fcfdfa; color: #345249; font: 12px 'DM Sans', sans-serif; }
.interval-duration { font: 800 14px Manrope, sans-serif; font-variant-numeric: tabular-nums; }
.delete-button { border: 0; background: none; color: #a37763; font-size: 11px; padding: 8px; }
.delete-button:hover { color: #a63b2d; text-decoration: underline; }
.delete-button:disabled { opacity: .4; cursor: default; text-decoration: none; }
.invoice-dialog, .project-dialog { width: min(440px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 31px; border: 1px solid #e0e8df; border-radius: 16px; background: #fff; color: #233531; box-shadow: 0 24px 80px #142b2850; }
.invoice-dialog::backdrop, .project-dialog::backdrop { background: #10251ec2; }
.invoice-dialog h2, .project-dialog h2 { margin: 7px 0 8px; font-size: 26px; }
.invoice-dialog p, .project-dialog p { color: #72847a; font-size: 13px; line-height: 1.5; }
.invoice-dialog label, .project-dialog label { display: block; margin: 24px 0 8px; font-size: 13px; font-weight: 700; }
.project-dialog label { margin: 17px 0 8px; }
.project-dialog input { width: 100%; height: 45px; border: 1px solid #cddbd1; border-radius: 8px; padding: 0 12px; background: #fff; color: #233531; font: 700 14px 'DM Sans', sans-serif; }
.project-dialog #project-dialog-hint { margin: 13px 0 20px; }
.project-dialog .project-error { margin-bottom: 16px; color: #a33b2d; font-weight: 700; }
.rate-input { display: flex; align-items: center; gap: 9px; padding: 0 13px; height: 48px; border: 1px solid #cddbd1; border-radius: 8px; color: #24725b; font-weight: 700; }
.rate-input:focus-within { outline: 3px solid #e5a362; outline-offset: 2px; }
.rate-input input { width: 100%; border: 0; outline: 0; background: transparent; color: #233531; font: 700 16px Manrope, sans-serif; }
.rate-input input:focus-visible { outline: 0; }
.invoice-figures { display: flex; justify-content: space-between; gap: 20px; margin: 22px 0; padding: 17px 19px; border-radius: 9px; background: #f0f6f0; }
.invoice-figures span, .invoice-figures strong { display: block; }
.invoice-figures span { color: #71877a; font-size: 11px; }
.invoice-figures strong { margin-top: 5px; color: #1c6659; font: 800 20px Manrope, sans-serif; white-space: nowrap; }
.invoice-dialog .invoice-caution { margin-bottom: 22px; color: #8d6853; font-size: 11px; }
.invoice-actions { display: flex; justify-content: flex-end; gap: 9px; }
footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 23px 0 35px; border-top: 1px solid #dedfd6; color: #98a59b; font-size: 11px; }
footer span { color: #5f8070; font-weight: 800; white-space: nowrap; }
.footer-meta { text-align: right; }
footer p { margin: 0; text-align: right; }
footer .warning { color: #ab4b36; font-weight: 700; }
.reset-button { margin-top: 8px; padding: 3px 0; border: 0; background: none; color: #a15a47; font-size: 11px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.reset-button:disabled { opacity: .4; cursor: default; }
@media (max-width: 850px) { .dashboard { grid-template-columns: 1fr; } .balance-card, .timer-card { min-height: auto; } .balance-body { padding: 18px 0 25px; } }
@media (max-width: 570px) { .shell { width: min(100% - 32px, 460px); } .masthead { padding: 19px 0; } .local-badge { font-size: 0; gap: 0; padding: 9px; } .local-badge .badge-dot { width: 8px; height: 8px; } .project-bar { padding-top: 21px; } .project-picker, .project-actions { width: 100%; } .project-actions .button { flex: 1; padding: 0 10px; } .intro { padding: 27px 0 29px; align-items: start; } .limit-tag { min-width: 80px; padding-left: 12px; margin-top: 8px; } .limit-tag strong { font-size: 22px; } .limit-tag small { display: block; } .subtitle { font-size: 13px; } .balance-card, .timer-card { padding-left: 21px; padding-right: 21px; } .balance-body { gap: 16px; } .progress-ring { width: 117px; height: 117px; } .ring-center { width: 91px; height: 91px; } .ring-center span { font-size: 25px; } .balance-numbers strong { font-size: 25px; } .timer-display { flex-wrap: wrap; gap: 7px 12px; } .timer-display > span { font-size: 42px; } .history { margin-top: 39px; } .history-header h2 { font-size: 21px; } .day-row { grid-template-columns: 1fr auto; gap: 12px; padding: 16px; } .day-bar { grid-column: 1 / -1; grid-row: 2; } .day-time { grid-column: 2; grid-row: 1; } .interval-row { gap: 9px; } .interval-icon { display: none; } .record-actions { width: 100%; gap: 9px 16px; } .invoice-dialog, .project-dialog { padding: 23px; } footer { align-items: start; flex-direction: column; } .footer-meta, footer p { text-align: left; } }