:root{
  color-scheme:light;
  --canvas:#f6f6f3;--surface:#fff;--surface-muted:#fafaf8;--ink:#20211f;--muted:#696b65;--soft:#8b8d86;--line:#e3e4df;--line-strong:#cccec7;--accent:#20211f;--accent-soft:#efefeb;--success:#35694c;--success-bg:#edf5ef;--danger:#a43b36;--danger-bg:#fff1ef;--shadow:0 2px 8px rgb(20 22 17 / 3%);
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--canvas)}
body{margin:0;color:var(--ink);background:var(--canvas);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #74776f;outline-offset:2px}
button:disabled{cursor:not-allowed;opacity:.5}
[hidden]{display:none!important}
.app-shell{min-height:100vh;display:grid;grid-template-columns:226px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:25px 16px 17px;background:var(--surface);border-right:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;padding:0 9px;color:var(--ink);text-decoration:none;font-size:19px;font-weight:750;letter-spacing:-.8px}
.brand-mark{display:grid;place-items:center;width:33px;height:33px;border:1.5px solid var(--ink);border-radius:7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:18px;font-weight:600}

.sidebar-label{display:flex;justify-content:space-between;align-items:center;margin:46px 10px 12px;color:var(--soft);font:600 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px}
.sidebar-label span{color:#b0b2ab}
.nav-group{display:flex;flex-direction:column;gap:5px}
.nav-item{display:flex;align-items:center;gap:11px;width:100%;border:1px solid transparent;border-radius:7px;padding:11px 10px;color:#555750;background:transparent;text-align:left;font-size:13px}
.nav-icon{width:20px;text-align:center;font-size:17px;color:#696b65}
.nav-item>span:nth-child(2){flex:1}
.nav-key{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#a0a29b;opacity:0}
.nav-item:hover{background:#f7f7f4}
.nav-item.active{background:#efefeb;border-color:#e5e5df;color:#191a18;font-weight:650}
.nav-item.active .nav-icon{color:#191a18}
.nav-item.active .nav-key{opacity:1}
.sidebar-bottom{margin-top:auto;display:flex;gap:10px;align-items:flex-start;border-top:1px solid var(--line);padding:15px 9px 0}
.status-indicator{width:7px;height:7px;border-radius:50%;background:#4b8b60;margin-top:5px;flex:none}
.sidebar-bottom strong,.sidebar-bottom small{display:block}
.sidebar-bottom strong{font:600 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4px}
.sidebar-bottom small{font-size:11px;color:var(--muted);margin-top:3px}
.main{width:100%;max-width:1170px;margin:0 auto;padding:0 48px 25px;min-width:0}
.topbar{height:67px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.breadcrumbs{display:flex;gap:10px;align-items:center;color:#777970;font:600 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px}
.breadcrumbs span:first-child{color:#31332e}
.crumb-slash{color:#b2b4ad}
.top-actions{display:flex;align-items:center;gap:13px}
.top-date{font-size:11px;color:var(--muted)}

.welcome{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:35px 0 21px}
.eyebrow{margin:0 0 9px;color:#767971;font:600 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.1px;text-transform:uppercase}
.welcome h1{margin:0 0 8px;font-size:clamp(26px,3vw,32px);line-height:1.25;letter-spacing:-1.5px;font-weight:720}
.subheading{margin:0;color:var(--muted);font-size:13px}
.primary-button{display:inline-flex;justify-content:center;align-items:center;gap:5px;min-height:40px;padding:0 15px;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:white;font-weight:600;font-size:12px;white-space:nowrap;transition:background .15s,border-color .15s}
.primary-button:hover{background:#41423e;border-color:#41423e}
.plus{font-size:17px;font-weight:400;line-height:1}
.date-toolbar{display:flex;align-items:center;gap:7px;margin:0 0 31px;padding:7px;background:#fff;border:1px solid var(--line);border-radius:7px;width:fit-content;box-shadow:var(--shadow)}
.date-step{display:grid;place-items:center;width:32px;height:32px;border:1px solid transparent;border-radius:5px;background:transparent;color:#42443e;font-size:17px}
.date-step:hover{background:#f2f2ef;border-color:#e8e9e3}
.date-select-wrap{display:flex;align-items:center;gap:9px;min-height:32px;padding:0 8px}
.calendar-icon{color:#62645e;font-size:16px}
.date-select-wrap input{min-width:145px;border:0;outline:0;background:transparent;color:#292a26;color-scheme:light;font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer}
.date-select-wrap input:focus-visible{outline:2px solid #777;outline-offset:2px;border-radius:3px}
.today-button{min-height:30px;margin-left:2px;padding:0 11px;border:1px solid #dfe0d9;border-radius:5px;background:#f9f9f7;color:#383a35;font-size:11px;font-weight:600}
.today-button:hover{border-color:#aeb0a8;background:#f0f0ec}
.routine-section{margin:0 0 37px}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:14px}
.section-title-group{display:flex;align-items:flex-start;gap:12px;min-width:0}
.section-index{display:grid;place-items:center;flex:none;width:27px;height:27px;border:1px solid #d7d8d2;border-radius:5px;background:#fff;color:#666860;font:600 10px ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:1px}
.section-title-group h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;margin:0 0 4px;font-size:16px;font-weight:700;letter-spacing:-.35px;line-height:1.45}

.section-title-group p{margin:0;color:var(--muted);font-size:11px}
.text-button{flex:none;display:flex;align-items:center;gap:4px;border:0;background:transparent;color:#454740;font-size:12px;font-weight:650;padding:8px 0 8px 10px}
.text-button span{font-size:17px;font-weight:400}
.text-button:hover{color:#000;text-decoration:underline;text-underline-offset:3px}
.routine-card{overflow:hidden;border:1px solid #dfe0d9;border-radius:9px;background:var(--surface);box-shadow:var(--shadow)}
.routine-overview{display:grid;grid-template-columns:minmax(145px,.7fr) minmax(210px,1.3fr);align-items:center;gap:28px;padding:19px 22px 17px;background:#fcfcfa;border-bottom:1px solid var(--line)}
.mini-label{color:#81837b;font:600 9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px}
.routine-count{display:flex;align-items:baseline;gap:7px;margin-top:4px;font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#777970}
.routine-count strong{color:var(--ink);font-size:25px;letter-spacing:-1px;font-weight:650}
.count-label{margin-left:2px;color:#777970;font:11px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif}
.routine-progress-area{min-width:0}
.routine-progress-track{height:6px;overflow:hidden;border-radius:99px;background:#e8e9e3}
.routine-progress-track>div{height:100%;width:0;border-radius:99px;background:#2e302b;transition:width .2s ease}
.routine-progress-caption{display:flex;justify-content:space-between;gap:12px;margin-top:8px;color:#73766e;font-size:10px}
.routine-progress-caption span:last-child{font:600 10px ui-monospace,SFMono-Regular,Menlo,monospace;color:#44463f}
.routine-list{padding:2px 21px}
.routine-row{display:grid;grid-template-columns:21px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:52px;border-bottom:1px solid #edeee9}
.routine-row:last-child{border-bottom:0}
.routine-check{appearance:none;display:grid;place-items:center;width:19px;height:19px;border:1.5px solid #bfc1b9;border-radius:5px;background:#fff;margin:0;cursor:pointer;transition:background .12s,border-color .12s}
.routine-check:checked{background:#262722;border-color:#262722}
.routine-check:checked::after{content:"✓";color:#fff;font-size:12px;line-height:1}
.routine-name{font-size:12px;font-weight:550;color:#30312d;overflow-wrap:anywhere}
.routine-row.completed .routine-name{color:#82847d;text-decoration:line-through;text-decoration-thickness:1px}
.routine-row-actions{display:flex;gap:3px;opacity:.7}
.routine-row:hover .routine-row-actions,.routine-row:focus-within .routine-row-actions{opacity:1}
.icon-button{display:grid;place-items:center;width:29px;height:29px;border:1px solid transparent;border-radius:5px;background:transparent;color:#767970;font-size:14px}
.icon-button:hover{background:#f3f3ef;border-color:#e3e4dd;color:#242520}
.icon-button.delete:hover{background:var(--danger-bg);border-color:#f1d5d2;color:var(--danger)}
.routine-empty{display:flex;align-items:center;gap:15px;padding:21px 22px}
.empty-symbol{flex:none;color:#696c64;font:600 15px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-1px}
.routine-empty>div{flex:1;min-width:0}
.routine-empty strong,.empty-tasks strong{font-size:12px;font-weight:650}
.routine-empty p,.empty-tasks p{margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.65}
.secondary-button{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 11px;border:1px solid #d4d6ce;border-radius:5px;background:#fff;color:#31332e;font-size:11px;font-weight:600}
.secondary-button:hover{background:#f2f2ee;border-color:#aeb0a8}
.planner{margin-top:0}
.planner>.section-heading{margin-bottom:15px}
.filters{display:flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--line);border-radius:6px;background:#eeeeea}
.filter{display:flex;align-items:center;gap:6px;min-height:29px;padding:0 10px;border:1px solid transparent;border-radius:4px;background:transparent;color:#666860;font-size:10px}
.filter span{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;color:#969890}
.filter.active{border-color:#e3e4de;background:#fff;color:#23241f;font-weight:650;box-shadow:0 1px 2px rgb(0 0 0 / 4%)}
.filter.active span{color:#50524b}
.task-list{display:flex;flex-direction:column;gap:7px}
.task{display:grid;grid-template-columns:21px minmax(0,1fr) auto;gap:12px;align-items:start;padding:15px 16px;border:1px solid var(--line);border-radius:7px;background:#fff;box-shadow:var(--shadow)}
.task:hover{border-color:#c8cac2}
.task-check{appearance:none;display:grid;place-items:center;width:18px;height:18px;border:1.5px solid #bfc1b9;border-radius:5px;background:white;margin:1px 0 0;cursor:pointer}
.task-check:checked{border-color:#262722;background:#262722}
.task-check:checked::after{content:"✓";color:white;font-size:12px;line-height:1}
.task-title{color:#292a26;font-size:12px;line-height:1.6;font-weight:600;overflow-wrap:anywhere}
.task.completed .task-title{color:#868880;text-decoration:line-through}
.task-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag{display:inline-flex;align-items:center;min-height:21px;padding:2px 7px;border:1px solid #e6e7e1;border-radius:4px;background:#f7f7f4;color:#62645d;font-size:10px}
.tag.high{border-color:#efd5d2;background:#fff3f1;color:#9a3b35}
.tag.low{border-color:#dfe7df;background:#f1f6f1;color:#48684c}
.task-time{color:#65675f;font:10px ui-monospace,SFMono-Regular,Menlo,monospace}
.task-notes{margin-top:8px;color:#666961;font-size:11px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.task-actions{display:flex;gap:3px}
.empty-tasks{display:flex;align-items:center;gap:15px;padding:22px;border:1px dashed #d3d5ce;border-radius:7px;background:rgb(255 255 255 / 50%)}
.empty-tasks>div{flex:1;min-width:0}
.main footer{display:flex;align-items:center;justify-content:center;gap:8px;position:relative;padding:33px 0 0;color:#92948d;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px}
.main footer>span:first-child{color:#62645d;font-weight:600}
.footer-separator{color:#c0c1bb}
.footer-version{position:absolute;right:0;color:#a2a49d;letter-spacing:.4px}
.modal-backdrop{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:20px;background:rgb(28 29 26 / 38%);backdrop-filter:blur(3px)}
.modal-card{width:min(100%,490px);max-height:min(92vh,800px);overflow:auto;padding:25px;background:#fff;border:1px solid #dfe0da;border-radius:10px;box-shadow:0 20px 70px rgb(0 0 0 / 16%)}
.modal-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:23px}
.modal-heading .eyebrow{margin-bottom:7px}
.modal-heading h2{margin:0;font-size:21px;letter-spacing:-.65px;line-height:1.3}
.close-button{display:grid;place-items:center;width:31px;height:31px;border:1px solid #e1e2dc;border-radius:5px;background:white;color:#5e6059;font-size:22px;line-height:1}
.close-button:hover{background:#f4f4f0}
.field-label{display:block;margin:0 0 7px;color:#383a34;font-size:11px;font-weight:650}
.field-label span{color:#7a7d74}
.modal-card input:not([type=checkbox]),.modal-card select,.modal-card textarea{display:block;width:100%;min-height:42px;margin:0 0 17px;padding:10px 11px;border:1px solid #d7d9d1;border-radius:5px;outline:none;background:#fff;color:#262722;color-scheme:light;font-size:12px}
.modal-card input[type=date],.modal-card input[type=time]{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer;accent-color:#252621}
.modal-card input:focus,.modal-card select:focus,.modal-card textarea:focus{border-color:#777a71;box-shadow:0 0 0 3px rgb(60 62 54 / 9%)}
.modal-card textarea{min-height:83px;resize:vertical;line-height:1.6}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.field-help{margin:-8px 0 18px;color:var(--muted);font-size:11px;line-height:1.65}
.form-error{min-height:0;margin:0;color:var(--danger);font-size:11px;line-height:1.5}
.form-error:not(:empty){margin-bottom:12px}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
@media(min-width:1400px){.main{padding-right:62px;padding-left:62px}}
@media(max-width:1000px){.main{padding-right:30px;padding-left:30px}.app-shell{grid-template-columns:206px minmax(0,1fr)}.routine-overview{gap:20px}}
@media(max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;min-height:0;padding:12px 15px;border-right:0;border-bottom:1px solid var(--line);display:flex;flex-direction:row;align-items:center;gap:13px}.brand{padding:0;font-size:17px}.brand-mark{width:29px;height:29px}.sidebar-label,.sidebar-bottom{display:none}.nav-group{flex-direction:row;gap:4px;margin-left:auto}.nav-item{width:auto;gap:6px;padding:8px 9px;font-size:11px}.nav-icon{width:auto;font-size:14px}.nav-key{display:none}.main{padding:0 17px 22px}.topbar{height:54px}.breadcrumbs{font-size:9px}.welcome{align-items:flex-start;padding:26px 0 19px;gap:12px}.welcome h1{font-size:25px}.subheading{max-width:280px;font-size:12px;line-height:1.7}.welcome .primary-button{min-height:36px;padding:0 10px;font-size:11px}.date-toolbar{margin-bottom:26px}.section-heading{align-items:flex-start;gap:10px}.section-title-group{gap:9px}.section-title-group h2{font-size:14px;gap:6px}.section-title-group p{max-width:300px;line-height:1.6}.text-button{font-size:11px;padding-top:3px}.routine-overview{grid-template-columns:1fr;gap:12px;padding:15px 16px}.routine-count{margin-top:0}.routine-progress-caption{margin-top:6px}.routine-list{padding:2px 14px}.routine-row{min-height:49px;gap:9px}.routine-name{font-size:12px}.routine-row-actions{opacity:1}.routine-empty{flex-wrap:wrap;padding:18px 15px;gap:10px}.routine-empty>div{flex:1 1 calc(100% - 40px)}.routine-empty .secondary-button{margin-left:30px}.planner>.section-heading{flex-wrap:wrap;align-items:center}.filters{margin-left:36px}.task{padding:13px 11px;gap:9px}.task-title{font-size:12px}.task-actions{flex-direction:column}.footer-version{display:none}.main footer{font-size:8px}.date-select-wrap{gap:6px;padding:0 3px}.date-select-wrap input{min-width:130px;font-size:11px}}
@media(max-width:430px){.sidebar{gap:8px;padding-right:10px;padding-left:10px}.brand{gap:7px;font-size:16px}.brand-mark{width:28px;height:28px}.nav-item{padding:7px 8px}.welcome h1{font-size:22px}.welcome .eyebrow{font-size:9px;letter-spacing:.7px}.welcome .primary-button{font-size:10px;padding:0 8px}.date-step{width:28px}.today-button{padding:0 8px;font-size:10px}.date-select-wrap input{min-width:116px;font-size:10px}.section-title-group p{font-size:10px}.section-index{width:24px;height:24px}.section-heading{gap:7px}.text-button{padding-left:3px}.routine-row-actions .icon-button{width:25px}.modal-card{padding:20px}.form-row{gap:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

.inline-error{padding:14px 15px;border:1px solid #efd5d2;border-radius:6px;background:#fff3f1;color:#9a3b35;font-size:12px;line-height:1.7}

.brand{gap:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:650;letter-spacing:-.5px}
.brand-mark{width:30px;height:30px;border:0;border-radius:8px;background:#171815 url("/favicon.svg") center/cover no-repeat;display:inline-block;flex:0 0 30px}
.nav-divider{height:1px;background:var(--line);margin:11px 8px}
.nav-item{min-height:39px}
.nav-key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.sidebar-bottom{gap:9px;align-items:center}
.sidebar-status-copy{min-width:0;flex:1}

.top-actions{min-height:28px}
.page-view[hidden]{display:none!important}
.feature-page{padding:39px 0 0}
.feature-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:27px}
.feature-heading h1{margin:0 0 8px;font-size:29px;font-weight:650;letter-spacing:-1.2px}
.feature-heading .eyebrow{margin-bottom:11px}

.pomo-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,.8fr);gap:16px;align-items:start}
.pomo-card,.pomo-settings{background:var(--surface);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow)}
.pomo-card{padding:23px 25px 18px}
.pomo-tabs{display:flex;justify-content:center;gap:5px;width:fit-content;max-width:100%;margin:0 auto;background:#f1f1ee;border:1px solid #e8e8e2;border-radius:7px;padding:4px}
.pomo-tab{border:0;border-radius:4px;background:transparent;color:#666961;font-size:11px;padding:9px 16px;white-space:nowrap}
.pomo-tab.active{background:#fff;color:#1f201c;box-shadow:0 1px 3px #1111;font-weight:650}
.timer-face{width:min(100%,320px);aspect-ratio:1;margin:18px auto 12px;position:relative;display:grid;place-items:center}
.timer-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.timer-ring circle{fill:none;stroke-width:2.5}
.ring-track{stroke:#e9eae4}
.ring-progress{stroke:#262722;stroke-linecap:round;stroke-dasharray:791.68;stroke-dashoffset:0;transition:stroke-dashoffset .3s linear}
.timer-readout{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.timer-mode-label,.mini-label{font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px;color:#797c73}
#pomoClock{font:500 clamp(42px,6vw,64px)/1.08 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;letter-spacing:-3px;color:#1e1f1b}
#pomoStatus{font-size:11px;color:#777a71}
.timer-controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:9px 0 21px}
.timer-main-button{min-width:130px;min-height:42px}
.timer-controls .secondary-button{min-height:42px}
.pomo-note{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:15px;color:#777a71;font-size:11px}
.pomo-note .status-indicator{flex:0 0 6px}
.pomo-settings{padding:22px 22px 20px}
.pomo-settings h2{font-size:16px;font-weight:650;letter-spacing:-.3px;margin:8px 0 21px}
.duration-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:12px;color:#474942}
.duration-control{display:flex;align-items:center;gap:7px;color:#83867d}
.duration-control input{width:64px;height:34px;text-align:right;padding:5px 8px;border:1px solid #dcddd6;border-radius:5px;background:#fff;color:#252620;font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;appearance:textfield;-moz-appearance:textfield}
.duration-control input::-webkit-inner-spin-button,.duration-control input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.duration-control small{font-size:10px}
.save-settings{width:100%;margin-top:17px;min-height:38px}
.pomo-settings .field-help{font-size:10px;line-height:1.8;margin:14px 0}
.notification-button{margin-top:3px;color:#585b53}
.auth-body{min-height:100vh;display:grid;place-items:center;padding:22px;background:var(--canvas)}
.auth-card{width:min(100%,390px);padding:31px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 40px rgb(20 22 17 / 5%)}
.auth-brand{display:flex;align-items:center;gap:11px;font:650 18px ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:35px}
.auth-brand-square{width:30px;height:30px;border-radius:8px;background:#171815 url("/favicon.svg") center/cover no-repeat;display:inline-block}
.auth-card .eyebrow{margin-bottom:10px}
.auth-card h1{font-size:23px;letter-spacing:-.8px;margin:0 0 8px}
.auth-description{font-size:12px;color:#75786f;line-height:1.8;margin:0 0 25px}
.auth-label{display:block;font-size:11px;font-weight:600;color:#42443d;margin-bottom:8px}
.auth-input{width:100%;height:43px;border:1px solid #d8d9d1;border-radius:5px;padding:0 12px;background:#fff;color:#20211f;outline:none;font:13px ui-monospace,SFMono-Regular,Menlo,monospace}
.auth-input:focus{border-color:#74766e;box-shadow:0 0 0 3px #20211f10}
.auth-submit{width:100%;height:43px;margin-top:15px}
.auth-error{min-height:16px;margin:11px 0 0;color:#a43b36;font-size:11px;line-height:1.6}
.auth-foot{margin-top:23px;padding-top:14px;border-top:1px solid var(--line);font:9px ui-monospace,SFMono-Regular,Menlo,monospace;color:#8b8e85;letter-spacing:.7px}

@media(max-width:1000px){.pomo-layout{grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr)}.record-disc{width:190px;height:190px}.tonearm{right:calc(50% - 119px)}}
@media(max-width:760px){.sidebar-bottom{display:none}.brand-mark{border-radius:7px}.nav-group{flex-wrap:wrap;justify-content:flex-end}.nav-divider{display:none}.nav-item{min-height:34px;gap:5px;padding:7px 8px}.nav-key{display:none}.nav-item>span:nth-child(2){flex:initial}.feature-page{padding-top:27px}.feature-heading h1{font-size:25px}.pomo-layout{grid-template-columns:1fr}.pomo-card{padding:17px 15px 15px}.pomo-settings{padding:19px}.timer-face{width:min(100%,290px)}.pomo-tab{padding:8px 11px;font-size:10px}.record-disc{width:198px;height:198px}.tonearm{right:calc(50% - 124px)}.feature-heading{align-items:flex-start}}
@media(max-width:440px){.sidebar{gap:8px;flex-wrap:wrap}.brand{font-size:16px}.brand-mark{width:27px;height:27px;flex-basis:27px}.nav-group{flex:1;gap:3px}.nav-item{padding:7px 6px;font-size:10px}.nav-icon{display:none}.nav-item>span:nth-child(2){font-size:10px}.welcome h1{font-size:21px}.feature-heading{gap:8px}.pomo-tabs{width:100%;justify-content:space-between}.pomo-tab{flex:1;padding:8px 4px}.timer-controls{gap:6px}.timer-main-button{min-width:100px}.timer-controls .secondary-button{padding:8px 9px;font-size:11px}}
.readonly-tag{background:#f5f5f1;color:#888b82;border-color:#e6e7e1}.icon-button:disabled{opacity:.3;cursor:not-allowed}.task-check:disabled,.routine-check:disabled{opacity:.4;cursor:not-allowed}

.brand>span:last-child{text-transform:none}
.routine-progress-track>div{transition:none!important;animation:none!important}
.timer-settings-toggle{border:0;background:transparent;color:#898b84;padding:3px 0;font-size:11px;text-decoration:underline;text-decoration-color:#d7d8d2;text-underline-offset:4px;cursor:pointer}
.timer-settings-fields[hidden]{display:none}
.app-toast{position:fixed;z-index:100;left:50%;bottom:24px;transform:translateX(-50%);max-width:min(90vw,440px);padding:12px 16px;border:1px solid var(--line);border-radius:7px;background:#20211e;color:#fff;font-size:12px;box-shadow:0 8px 30px #0002}
.app-toast[hidden]{display:none}
.app-dialog{width:min(90vw,380px);border:1px solid var(--line);border-radius:10px;padding:22px;background:#fff;color:var(--ink);box-shadow:0 18px 70px #0003}
.app-dialog::backdrop{background:#17181555;backdrop-filter:blur(2px)}
.app-dialog p{font-size:13px;line-height:1.7;margin:0 0 20px;white-space:pre-line}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px}
@media(max-width:760px){
 .topbar{width:100%;min-width:0;gap:8px}.breadcrumbs{min-width:0;white-space:nowrap}.top-actions{min-width:0;gap:8px}.top-date{white-space:nowrap;font-size:10px}
 
 .record-disc{width:min(78vw,420px);height:min(78vw,420px);max-width:420px;max-height:420px;cursor:pointer;filter:brightness(.82)}
 
 .tonearm{top:-12px;right:calc(50% - min(39vw,210px) - 6px);width:70px;height:min(52vw,220px);transform-origin:top center;transform:rotate(-10deg)}
 .tonearm.playing{transform:rotate(5deg)}
}

.brand>span:last-child{text-transform:none}
.routine-progress-track>div{transition:none!important;animation:none!important}
.timer-settings-toggle{border:0;background:transparent;color:#898b84;padding:3px 0;font-size:11px;text-decoration:underline;text-decoration-color:#d7d8d2;text-underline-offset:4px;cursor:pointer}
.timer-settings-fields[hidden]{display:none}
.app-toast{position:fixed;z-index:100;left:50%;bottom:24px;transform:translateX(-50%);max-width:min(90vw,440px);padding:12px 16px;border:1px solid var(--line);border-radius:7px;background:#20211e;color:#fff;font-size:12px;box-shadow:0 8px 30px #0002}
.app-toast[hidden]{display:none}
.app-dialog{width:min(90vw,380px);border:1px solid var(--line);border-radius:10px;padding:22px;background:#fff;color:var(--ink);box-shadow:0 18px 70px #0003}
.app-dialog::backdrop{background:#17181555;backdrop-filter:blur(2px)}
.app-dialog p{font-size:13px;line-height:1.7;margin:0 0 20px;white-space:pre-line}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px}
@media(max-width:760px){
 .topbar{width:100%;min-width:0;gap:8px}.breadcrumbs{min-width:0;white-space:nowrap}.top-actions{min-width:0;gap:8px}.top-date{white-space:nowrap;font-size:10px}
 
 .record-disc{width:min(78vw,420px);height:min(78vw,420px);max-width:420px;max-height:420px;cursor:pointer;filter:brightness(.82)}
 
 .tonearm{top:-12px;right:calc(50% - min(39vw,210px) - 6px);width:70px;height:min(52vw,220px);transform-origin:top center;transform:rotate(-10deg)}
 .tonearm.playing{transform:rotate(5deg)}
}

.topbar{width:100%;min-width:0;gap:12px}
.breadcrumbs{flex:1;min-width:0;white-space:nowrap;overflow:hidden}
#pageContext{min-width:0;overflow:hidden;text-overflow:ellipsis}
.top-actions{flex:0 0 auto;min-width:0}
.top-date{white-space:nowrap}

/* Keep the timer card and put the same compact settings drawer beneath it on every viewport. */
.pomo-layout{grid-template-columns:minmax(0,1fr);gap:13px}
.pomo-settings{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;margin:0}
.timer-settings-toggle{display:block;margin:0 0 0 auto;padding:8px 1px;color:#777970;text-decoration:none;font-size:11px}
.timer-settings-fields{margin-top:7px;padding:20px 22px;border:1px solid var(--line);border-radius:9px;background:var(--surface);box-shadow:var(--shadow)}
.timer-settings-fields[hidden]{display:none!important}
.pomo-settings h2{margin-bottom:15px}

.music-page{padding-bottom:15px;overflow:visible}

.music-stage{position:relative;display:flex;flex-direction:column;width:100%;height:max(620px,calc(100dvh - 67px));min-height:620px;overflow:visible;clip-path:inset(-40px 0 0 0);background:var(--canvas)}
.music-deck{flex:1;min-height:420px;display:flex;align-items:center;justify-content:center;position:relative;transition:transform .8s ease}
.music-deck.playing{transform:translateY(20px)}
.record-wrap{width:min(420px,calc(100vw - 36px));height:auto;aspect-ratio:1;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;outline-offset:5px}
.record-base{position:absolute;width:106%;height:106%;border-radius:50%;background:#deded8;z-index:1}
.record-disc{position:relative;width:100%;height:100%;border-radius:50%;background-color:#333;background-image:none;background-size:cover;background-position:center;filter:brightness(.6);z-index:2;border:2px solid #111;box-shadow:none;transition:none;cursor:pointer}
.record-disc::before{display:none!important}
.record-disc.playing{animation:none}
.tonearm{position:absolute;top:-30px;right:0;width:70px;height:220px;transform-origin:top center;transform:rotate(-10deg);transition:transform .8s ease;z-index:10;border:0;border-radius:0;background:transparent;box-shadow:none}
.tonearm::before{content:"";position:absolute;top:0;left:32px;width:6px;height:100%;background:linear-gradient(90deg,#b8b9b3,#f4f4ef 50%,#a3a49d);border-radius:4px;clip-path:polygon(0% 0%,100% 0%,75% 100%,25% 100%);border:0}
.tonearm::after{display:none!important}
.tonearm.playing{transform:rotate(5deg)}
.music-progress-wrap{position:absolute;bottom:220px;left:20%;width:60%;height:6px;background:#deded8;border-radius:3px;opacity:0;transition:opacity .8s ease;z-index:4}
.music-progress-wrap.visible{opacity:1}
#musicProgress{width:0%;height:100%;background:#20211f;border-radius:3px;transition:none}
.albums{height:auto;min-height:200px;display:flex;gap:30px;overflow-x:auto;overflow-y:hidden;padding:40px;align-items:flex-end;background:#eeeeea;border-top:1px solid #deded8;flex-shrink:0;transition:transform .8s ease;scrollbar-width:thin;scrollbar-color:#c9cac2 transparent}
.albums.hidden{transform:translateY(100%)}
.albums[hidden]{display:none!important}
.album{display:block;min-width:220px;width:220px;flex:0 0 220px;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;transition:opacity .3s;opacity:.3;color:inherit;text-align:center;box-shadow:none;white-space:normal}
.album:hover{background:transparent;border-color:transparent;opacity:.65}
.album.active{opacity:.7}
.album-entry{display:flex;flex:0 0 220px;width:220px;min-width:0;flex-direction:column;align-items:stretch;gap:8px}
.album-entry .album{width:100%;min-width:0;flex:0 0 auto}
.cover-placeholder{background:linear-gradient(135deg,#deded8,#f0f0eb)}

.cover{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#d8d9d2 center/cover no-repeat;border-radius:12px;margin-bottom:12px}
.title{display:block;font-size:16px;line-height:1.4;font-weight:400;color:#777970;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-empty{padding:0 16px 24px;text-align:center;color:#686b62;background:transparent;border:0}
.music-empty .empty-symbol{margin-bottom:8px}
.music-empty strong{font-size:12px;color:#34352f;font-weight:600}
@media(max-width:760px){
 .main{width:100%;min-width:0}
 .topbar{width:100%;min-width:0;gap:8px}
 .breadcrumbs{flex:1;min-width:0;gap:7px;font-size:9px;letter-spacing:.7px}
 .top-actions{flex:0 0 auto;gap:6px}
 .top-date{display:none}
 
 .music-stage{width:calc(100% + 34px);margin-left:-17px;height:max(620px,calc(100dvh - 112px));min-height:620px;overflow-x:clip;overflow-y:visible}
 .music-deck{min-height:400px}
 .record-wrap{width:min(420px,calc(100vw - 34px))}
 .tonearm{top:-30px;right:0;width:70px;height:220px;transform:rotate(-10deg)}
 .tonearm.playing{transform:rotate(5deg)}
 .music-progress-wrap{bottom:220px;left:12%;width:76%}
 .albums{gap:30px;padding:40px;min-height:200px}
 .album-entry{width:220px;flex-basis:220px}.album{min-width:0;width:100%;flex-basis:auto}
 .pomo-settings{padding:0}
 .timer-settings-fields{padding:17px}
}
@media(max-width:440px){
 .topbar{overflow:hidden}
 .breadcrumbs{gap:5px;letter-spacing:.4px;font-size:8px}
 .music-stage{height:max(620px,calc(100dvh - 112px));min-height:620px}
 .albums{padding:40px;gap:30px}
}

.music-page{padding-top:0}

html,body{ max-width:100%; }
body:not(.music-mode){ overflow-x:clip; }
.app-shell,.main,#dashboardView,.topbar{ min-width:0; max-width:100%; }
.topbar{ width:100%; box-sizing:border-box; }
.breadcrumbs{ min-width:0; flex:1 1 auto; overflow:hidden; white-space:nowrap; }
#pageContext{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.top-actions{ flex:0 0 auto; min-width:0; }

html.music-mode,body.music-mode{ height:100dvh; overflow:hidden; }
body.music-mode .app-shell{
  height:100dvh; min-height:0; overflow:hidden;
  grid-template-rows:minmax(0,1fr);
}
body.music-mode .main{
  height:100dvh; min-height:0; overflow:hidden;
  display:flex; flex-direction:column; padding-bottom:0;
}
body.music-mode .topbar{ flex:0 0 67px; height:67px; }
body.music-mode #musicView{
  display:flex; flex:1 1 0; flex-direction:column; min-height:0; height:auto;
  margin:0; padding:0; overflow:hidden;
}
body.music-mode .music-stage{
  position:relative; display:flex; flex:1 1 0; flex-direction:column;
  width:100%; height:100%; min-height:0; margin:0; overflow:hidden;
  clip-path:none; background:var(--canvas);
}
body.music-mode .music-deck{
  position:relative; display:flex; flex:1 1 0; align-items:center; justify-content:center;
  min-height:0; transition:transform .8s ease; z-index:2;
}
body.music-mode .music-deck.playing{ transform:translateY(20px); }
body.music-mode .record-wrap{
  position:relative; display:flex; flex:0 0 auto; align-items:center; justify-content:center;
  width:min(420px,calc(100vw - 36px)); height:auto; aspect-ratio:1; cursor:pointer;
}
body.music-mode .record-base{
  position:absolute; width:106%; height:106%; border-radius:50%;
  background:#deded8; z-index:1;
}
body.music-mode .record-disc{
  position:relative; width:100%; height:100%; border:2px solid #111; border-radius:50%;
  background-color:#333; background-position:center; background-size:cover;
  filter:brightness(.6); box-shadow:none; transition:none; z-index:2; cursor:pointer;
}
body.music-mode .record-disc::before{ display:none!important; }
body.music-mode .record-disc.playing{ animation:none; }
body.music-mode .tonearm{
  position:absolute; top:-30px; right:0; width:70px; height:220px; z-index:10;
  transform-origin:top center; transform:rotate(-10deg); transition:transform .8s ease;
  border:0; border-radius:0; background:transparent; box-shadow:none;
}
body.music-mode .tonearm::before{
  content:""; position:absolute; top:0; left:32px; width:6px; height:100%;
  background:#ccc; border:0; border-radius:4px;
  clip-path:polygon(0% 0%,100% 0%,75% 100%,25% 100%); box-shadow:none;
}
body.music-mode .tonearm::after{ display:none!important; }
body.music-mode .tonearm.playing{ transform:rotate(5deg); }
body.music-mode .music-progress-wrap{
  position:absolute; bottom:220px; left:20%; width:60%; height:6px;
  border-radius:3px; background:#deded8; opacity:0;
  transition:opacity .8s ease; pointer-events:none; z-index:1;
}
body.music-mode .music-progress-wrap.visible{ opacity:1; }
body.music-mode #musicProgress{ width:0%; height:100%; border-radius:3px; background:#20211f; transition:none; }
body.music-mode .albums{
  position:relative; display:flex; flex:0 0 auto; align-items:flex-end; gap:30px;
  width:100%; height:238px; min-height:238px; max-height:238px; padding:20px 40px 16px;
  overflow-x:auto; overflow-y:hidden; background:#eeeeea; border-top:1px solid #deded8;
  transition:transform .8s ease; scrollbar-width:thin; scrollbar-color:#c9cac2 transparent;
}
body.music-mode .albums.hidden{ transform:translateY(100%); }
body.music-mode .albums[hidden]{ display:none!important; }
body.music-mode .album-entry{ flex:0 0 220px; width:220px; }
body.music-mode .album{
  display:block; flex:0 0 auto; width:100%; min-width:0; padding:0;
  border:0; border-radius:0; background:transparent; color:inherit; text-align:center;
  cursor:pointer; opacity:.3; transition:opacity .3s; white-space:normal; box-shadow:none;
}
body.music-mode .album:hover{ opacity:.65; background:transparent; }
body.music-mode .album.active{ opacity:.7; }
body.music-mode .cover{
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; margin-bottom:12px;
  border-radius:12px; background:#d8d9d2 center/cover no-repeat;
}
body.music-mode .title{
  display:block; color:#777970; text-align:center; font-size:16px; line-height:1.4;
  font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.music-mode .music-empty{
  position:absolute; left:0; right:0; bottom:245px; z-index:3;
  padding:0 16px 24px; border:0; background:transparent; text-align:center;
}

@media (max-width:760px) {
  .app-shell{ width:100%; max-width:100%; }
  .sidebar{ width:100%; min-width:0; flex-wrap:nowrap; box-sizing:border-box; }
  .nav-group{ min-width:0; flex-wrap:nowrap; justify-content:space-between; }
  .nav-item{ min-width:0; white-space:nowrap; }
  .main{ width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
  .topbar{ width:100%; max-width:100%; height:54px; flex:0 0 54px; gap:8px; overflow:hidden; }
  .breadcrumbs{ flex:1 1 auto; min-width:0; gap:5px; font-size:9px; letter-spacing:.5px; }
  .top-actions{ flex:0 0 auto; }
  .top-date{ display:none; }
  

  body.music-mode .app-shell{
    height:100dvh; min-height:0; overflow:hidden;
    grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr);
  }
  body.music-mode .sidebar{ flex:0 0 auto; }
  body.music-mode .main{
    height:100%; min-height:0; margin:0; overflow:hidden;
    padding:0 17px 0; display:flex; flex-direction:column;
  }
  body.music-mode .topbar{ flex:0 0 54px; height:54px; }
  body.music-mode #musicView{ flex:1 1 0; min-height:0; height:auto; }
  body.music-mode .music-stage{
    width:calc(100% + 34px); height:100%; min-height:0; margin-left:-17px;
    overflow:hidden; flex:1 1 0;
  }
  body.music-mode .music-deck{ min-height:0; flex:1 1 0; }
  body.music-mode .record-wrap{ width:min(420px,calc(100vw - 34px)); }
  body.music-mode .music-progress-wrap{ bottom:220px; left:20%; width:60%; }
  body.music-mode .albums{ gap:30px; padding:20px 40px 16px; height:238px; min-height:238px; max-height:238px; }
}
@media (max-width:440px) {
  .sidebar{ flex-wrap:nowrap; gap:7px; padding-right:10px; padding-left:10px; }
  .brand{ flex:0 0 auto; gap:7px; font-size:16px; }
  .brand-mark{ width:28px; height:28px; flex-basis:28px; }
  .nav-group{ flex:1 1 auto; gap:2px; }
  .nav-item{ gap:4px; padding:7px 5px; font-size:10px; }
  .nav-icon{ display:none; }
  .nav-item>span:nth-child(2){ font-size:10px; }
  body.music-mode .record-wrap{ width:min(420px,calc(100vw - 34px)); }
}

@media (min-width:761px) {
  body.music-mode .record-wrap{ width:min(420px,calc(100vw - 36px),max(160px,calc(100dvh - 433px))); }
}
@media (max-width:760px) {
  body.music-mode .record-wrap{ width:min(420px,calc(100vw - 34px),max(160px,calc(100dvh - 479px))); }
}
@media (max-width:760px) {
  /* Do not distribute leftover grid height into the sidebar; this was pushing the topbar down on All Tasks. */
  .app-shell{ align-content:start; }
}

@media (max-width:760px) {
  body.music-mode .record-wrap{
    width:min(420px,calc(100vw - 34px),max(160px,calc(100dvh - 479px)));
  }
  body.music-mode .albums{
    height:180px;
    min-height:180px;
    max-height:180px;
    padding:8px 24px 12px;
    gap:24px;
  }
  body.music-mode .music-progress-wrap{
    bottom:180px;
    left:12%;
    width:76%;
  }
}

@media (min-width:761px) {
  body.music-mode .music-progress-wrap{ bottom:190px; height:6px; }
}

@media (max-width:760px) {
  body.music-mode .record-wrap{
    width:min(300px,calc(100vw - 34px),max(190px,calc(100dvh - 479px)));
  }
  body.music-mode .record-disc{ touch-action:manipulation; }
  body.music-mode .albums{ overscroll-behavior-x:contain; }
}

@media (max-width:760px) {
  body.music-mode .record-wrap{
    /* Keep the record as large as the viewport allows while leaving a narrow safety margin. */
    width:min(525px,calc(100vw - 10px),max(260px,calc(100dvh - 240px)));
  }
  body.music-mode .albums{
    height:128px;
    min-height:128px;
    max-height:128px;
    padding:5px 14px;
    gap:14px;
  }
  body.music-mode .album-entry{ flex-basis:138px; width:138px; gap:2px; }
  body.music-mode .album{ flex-basis:auto; width:100%; min-width:0; }
  body.music-mode .cover{
    margin-bottom:2px;
    border-radius:7px;
  }
  body.music-mode .title{
    font-size:11px;
    line-height:1.1;
  }
  body.music-mode .music-progress-wrap{ bottom:128px; }
  body.music-mode .music-empty{ bottom:132px; padding-bottom:10px; }

  .sidebar{ gap:7px; }
  .brand{ margin-right:12px; flex:0 0 auto; }
  .nav-group{ gap:0; min-width:0; }
  .nav-item{ gap:2px; padding-left:4px; padding-right:4px; }
}
@media (max-width:440px) {
  .sidebar{ gap:5px; padding-right:8px; padding-left:8px; }
  .brand{ margin-right:10px; gap:7px; }
  .nav-group{ gap:0; }
  .nav-item{ padding-left:3px; padding-right:3px; }
}

.nav-logout{ color:#575951; }
.nav-logout .nav-icon{ display:flex; align-items:center; justify-content:center; }
.nav-logout .nav-icon svg{ display:block; }
.nav-logout:hover{ background:#f7f7f4; }
@media (max-width:760px) {
  .nav-logout-divider{ display:none; }
  .nav-group{ flex:0 1 auto; min-width:0; margin-left:0; justify-content:flex-start; gap:2px; }
  .nav-item{ gap:2px; padding-left:6px; padding-right:6px; border-radius:8px; }
  .nav-logout{ flex:0 0 auto; }
  .nav-logout .nav-icon{ display:grid; }
  .nav-logout>span:nth-child(2){ display:none; }
  body.music-mode .record-wrap{
    width:min(330px,calc(100vw - 34px),max(230px,calc(100dvh - 420px)));
  }
}
@media (max-width:440px) {
  .sidebar{ gap:5px; padding-right:8px; padding-left:8px; }
  .brand{ margin-right:10px; }
  .nav-group{ flex:0 1 auto; margin-left:0; justify-content:flex-start; gap:2px; }
  .nav-item{ padding-left:6px; padding-right:6px; }
  .nav-item:not(.nav-logout) .nav-icon{ display:none; }
  .nav-logout .nav-icon{ display:grid; }
  .nav-logout>span:nth-child(2){ display:none; }
}

@media (max-width:760px) {
  .sidebar{
    width:100%; min-width:0; box-sizing:border-box;
    flex-wrap:nowrap; gap:4px; padding-left:8px; padding-right:8px;
  }
  .brand{ flex:0 0 auto; margin-right:8px; gap:7px; }
  .nav-group{
    display:flex; flex:1 1 auto; min-width:0; margin-left:0;
    flex-direction:row; flex-wrap:nowrap; align-items:center;
    justify-content:flex-start; gap:1px; overflow:visible;
  }
  .nav-group > .nav-item{
    min-width:0; flex:0 1 auto; white-space:nowrap;
    padding:7px 6px; border-radius:8px; gap:2px;
  }
  .nav-group > #logoutButton{
    display:grid; place-items:center; flex:0 0 29px;
    width:29px; min-width:29px; height:32px; padding:0;
    margin-left:3px; border:1px solid transparent; border-radius:8px;
  }
  .nav-logout .nav-icon{ display:grid; place-items:center; width:100%; }
  .nav-logout > span:nth-child(2){ display:none; }
  body.music-mode .record-wrap{
    /* Near full viewport width; the record base adds 6% to the outside diameter. */
    width:min(90vw, calc(100vw - 34px), calc(100dvh - 290px));
    max-width:none; min-width:0;
  }
  body.music-mode .record-disc{ width:100%; height:100%; touch-action:manipulation; }
  body.music-mode .record-base{ width:106%; height:106%; }
  body.music-mode .music-deck{ min-height:0; }
}
@media (max-width:440px) {
  .sidebar{ gap:3px; padding-left:7px; padding-right:7px; }
  .brand{ margin-right:7px; gap:6px; font-size:15px; }
  .brand-mark{ width:27px; height:27px; flex-basis:27px; }
  .nav-group > .nav-item{ padding-left:7px; padding-right:7px; font-size:10px; }
  .nav-group > #logoutButton{ flex-basis:27px; width:27px; min-width:27px; height:31px; }
}

/* Long-press the existing album artwork in the bottom music tray to save/remove it. */
.music-mode .album .cover{user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;}
.music-mode .album .cover.long-pressing{filter:brightness(.72);}
.music-mode .album .cover.long-press-done{outline:2px solid #20211f;outline-offset:-2px;}

/* Compact notices and a favicon-based saved marker on the music thumbnails. */
.app-toast{
  top:calc(env(safe-area-inset-top, 0px) + 10px);
  bottom:auto;
  max-width:min(90vw, 360px);
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:anywhere;
  line-height:1.45;
}
.saved-badge{
  display:grid;
  position:absolute;
  z-index:5;
  top:5px;
  left:5px;
  width:22px;
  height:22px;
  place-items:center;
  border-radius:3px;
  background:rgba(23,24,21,.62);
  color:rgba(255,255,255,.82);
  box-shadow:0 1px 3px #0003;
  pointer-events:none;
  overflow:hidden;
}
.saved-badge[hidden]{display:none!important}
.saved-badge svg{position:relative;width:14px;height:14px;opacity:.82}
.album{position:relative;touch-action:pan-x}
/* Only tracks that are not saved for offline use become visually unavailable offline. */
.music-mode .album.offline-unavailable{filter:grayscale(1) brightness(.48);opacity:1;cursor:not-allowed;}

/* Trim unused vertical space so the Pomodoro controls fit on one mobile screen. */
.pomo-layout{gap:8px}
.pomo-card{padding:16px 20px 12px}
.timer-face{width:min(100%,270px);margin:10px auto 4px}
.timer-controls{margin:4px 0 4px}
@media(max-width:760px){
  .brand{margin-left:4px}
  .nav-group > #logoutButton{margin-left:auto}
  body.music-mode .main{padding-left:0;padding-right:0}
  body.music-mode .topbar{padding-left:17px;padding-right:17px}
  body.music-mode .music-stage{width:100%;margin-left:0}
  body.music-mode .record-wrap{
    width:min(90vw,calc(100vw - 24px),calc(100dvh - 270px));
    max-width:none;min-width:0;
  }
  body.music-mode .albums{
    height:142px;min-height:142px;max-height:142px;
    padding:6px 14px;gap:14px;
  }
  body.music-mode .album-entry{flex-basis:154px;width:154px;gap:2px}
  body.music-mode .cover{margin-bottom:2px;border-radius:7px}
  .feature-page{padding-top:12px}
  .feature-heading{margin-bottom:10px}
  .feature-heading .eyebrow{margin-bottom:4px}
  .feature-heading h1{margin-bottom:2px}
  .pomo-card{padding:12px 12px 8px}
  .pomo-tabs{padding:3px}
  .pomo-tab{padding:6px 8px}
  .timer-face{width:min(100%,245px);margin:6px auto 0}
  .timer-readout{gap:5px}
  .timer-controls{margin:4px 0 2px}
  .timer-main-button,.timer-controls .secondary-button{min-height:36px}
}
@media(max-width:440px){
  .brand{margin-left:4px}
  .nav-group > #logoutButton{margin-left:auto}
  body.music-mode .topbar{padding-left:14px;padding-right:14px}
  body.music-mode .record-wrap{width:min(90vw,calc(100vw - 22px),calc(100dvh - 270px))}
  body.music-mode .albums{padding-left:10px;padding-right:10px;gap:12px;align-items:center}
  body.music-mode .album-entry{flex-basis:148px;width:148px}
  .pomo-card{padding:10px 9px 7px}
  .timer-face{width:min(100%,232px)}
}


/* Keep the status line reserved so starting the timer never shifts the clock. */
#pomoStatus{display:block;min-height:1.4em;line-height:1.4;margin-top:-2px}
.pomo-heading{margin-bottom:12px}
.pomo-heading h1{margin-bottom:0}
@media(max-width:760px){.pomo-heading{margin-bottom:8px}}

/* Keep more of each music cover visible on narrow screens. */
@media(max-width:760px){
  body.music-mode .albums{height:164px;min-height:164px;max-height:164px;padding:8px 14px;gap:14px;align-items:center}
  body.music-mode .album-entry{flex-basis:174px;width:174px;gap:3px}
  body.music-mode .cover{margin-bottom:1px}
}
@media(max-width:440px){
  body.music-mode .albums{padding-left:10px;padding-right:10px;gap:12px;align-items:center}
  body.music-mode .album-entry{flex-basis:168px;width:168px}
}

/* Final music-tray spacing and tonearm positioning adjustments. */
@media(max-width:760px){
  body.music-mode .albums{
    height:158px;min-height:158px;max-height:158px;
    padding-top:5px;padding-bottom:5px;
  }
  body.music-mode .cover{margin-bottom:5px;}
  body.music-mode .tonearm{top:-12px;}
}
body.music-mode .tonearm.playing{transform:translateY(-20px) rotate(5deg);}