@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#10130f;--panel:#191d17;--line:#30362c;--muted:#8f9889;--accent:#c8f56b;--white:#f3f5ec}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--white);font-family:'DM Sans',sans-serif}
button,input{font:inherit}
.app{max-width:1220px;margin:auto;padding:0 40px}
.header{height:95px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2a3027}
.brand{text-decoration:none;color:var(--white);font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;letter-spacing:-1px;display:flex;align-items:center;gap:10px}
.brand-mark{display:grid;place-items:center;background:var(--accent);color:#11180c;width:33px;height:33px;border-radius:8px;font-size:21px}
.brand-dot{color:var(--accent);margin-left:-9px}
.header-note,.eyebrow,.card-top,.phase,.round,.field-label small,.total span,footer{font-size:10px;font-weight:700;letter-spacing:1.5px}
.header-note{color:#899284;display:flex;align-items:center;gap:9px}.header-note span,.live i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}
.intro{padding:52px 0 35px}.eyebrow{color:var(--accent);margin:0 0 17px}.eyebrow span{color:#798273}
h1,h2{font-family:'Space Grotesk',sans-serif;letter-spacing:-3px;margin:0;line-height:1.03}h1{font-size:clamp(49px,6vw,76px)}h1 em{font-style:normal;color:var(--accent)}.intro>p:last-child{color:#a5ada0;font-size:15px;margin:18px 0 0}
.workspace{display:grid;grid-template-columns:1.12fr 1fr;gap:18px}.timer-card,.settings-card{background:var(--panel);border:1px solid #2c3329;border-radius:16px;padding:27px 30px}.card-top{display:flex;justify-content:space-between;color:#889282}.live{color:var(--accent);display:flex;align-items:center;gap:8px}.live i{width:6px;height:6px}
.timer-face{position:relative;width:min(270px,75%);aspect-ratio:1;margin:30px auto 25px}.progress-ring{width:100%;height:100%;transform:rotate(-90deg)}.progress-ring circle{fill:none;stroke-width:5}.ring-track{stroke:#343c30}.ring-progress{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:879.646;stroke-dashoffset:0;transition:stroke-dashoffset .15s linear,stroke .3s}.timer-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.phase{color:var(--accent);margin-bottom:9px}.time{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(55px,6vw,76px);letter-spacing:-4px;line-height:1}.round{color:#98a192;margin-top:15px}
.controls{display:flex;justify-content:center;gap:10px}.controls button{border:0;cursor:pointer;height:48px;border-radius:8px;font-weight:700}.primary{background:var(--accent);color:#18200f;padding:0 35px;min-width:180px}.primary:hover{background:#d8ff8a}.primary span:first-child{font-size:12px;margin-right:8px}.reset{width:48px;background:#30372c;color:#e4ebdc;font-size:24px}.reset:hover{background:#414a3b}.timer-hint{text-align:center;color:#858f80;font-size:12px;margin:17px 0 0}
.settings-card{padding:31px}.settings-heading{display:flex;justify-content:space-between}.settings-heading .eyebrow{margin-bottom:13px}.settings-heading h2{font-size:32px;letter-spacing:-1.5px}.settings-heading h2 span{color:var(--accent)}.settings-icon{font-size:23px;color:var(--accent)}.settings-description{color:#939d8e;font-size:13px;line-height:1.6;margin:16px 0 23px}
#settings{border-top:1px solid var(--line)}#settings label{display:flex;align-items:center;gap:14px;padding:17px 0;border-bottom:1px solid var(--line)}.field-icon{width:39px;height:39px;border-radius:9px;display:grid;place-items:center;font-size:20px;background:#303c25;color:var(--accent)}.rest-icon{background:#2e3633;color:#a5c8ba}.rounds-icon{background:#39362a;color:#d7ca99}.field-label{font-size:14px;font-weight:700;flex:1}.field-label small{display:block;color:#7f897b;font-size:9px;margin-top:5px;letter-spacing:1px}.input-wrap{display:flex;align-items:center;gap:5px;background:#11150f;border:1px solid #363e32;border-radius:7px;padding:9px 10px;color:#8f998a;font-size:11px}.input-wrap input{width:40px;border:0;background:transparent;color:var(--white);font-size:15px;font-weight:700;text-align:right;outline:none}.input-wrap:focus-within{border-color:var(--accent)}input:disabled{opacity:.6}.total{display:flex;justify-content:space-between;align-items:center;margin-top:24px}.total span{color:#939e8e}.total strong{font-family:'Space Grotesk',sans-serif;font-size:22px;color:var(--accent)}
footer{display:flex;justify-content:space-between;color:#697365;padding:34px 0;font-size:9px}.footer-star{color:var(--accent);font-size:15px}
.profiles{border-top:1px solid var(--line);margin-top:24px;padding-top:20px}.profiles h3{font-size:15px;margin:0 0 12px}.profile-select-row{display:flex;gap:8px}.profiles select,.profiles button{border:1px solid #394235;border-radius:8px;background:#11150f;color:var(--white);padding:10px 12px;font:inherit;font-size:13px}.profiles select{min-width:0;flex:1}.profiles button{cursor:pointer}.profiles button:hover:not(:disabled){border-color:var(--accent)}.profiles button:disabled,.profiles select:disabled{opacity:.45;cursor:not-allowed}.profile-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.profile-message{color:#b5c0af;font-size:12px;line-height:1.4;margin:10px 0 0}.profile-message:empty{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.settings-toggle,.settings-close{display:none}
@media(max-width:700px){
	.app{padding:0 20px;min-height:100dvh;display:flex;flex-direction:column}
	.header{height:75px;flex-shrink:0}
	.header-note,.intro,footer{display:none}
	.settings-toggle,.settings-close{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--white);font-size:22px;cursor:pointer}
	.workspace{display:flex;flex-direction:column;flex:1;justify-content:center;padding:24px 0 48px}
	.timer-card{padding:24px;background:transparent;border:0}
	.timer-face{width:min(300px,80vw);max-width:100%;margin:42px auto}
	.time{font-size:72px}
	.controls button{height:56px}.primary{flex:1;max-width:240px}.reset{width:56px}
	.settings-card{display:none;padding:24px;margin-top:24px}
	.settings-card.is-open{display:block}
	.settings-icon{display:none}.settings-close{font-size:17px;flex-shrink:0}
	.input-wrap input{font-size:16px}
}