
#p-timer .timer-panel{padding:30px 28px;background:radial-gradient(ellipse at 50% 40%,#edf2e9,transparent 65%),#faf9f5;border:1px solid #e1e5db;border-radius:26px;box-shadow:0 12px 36px #314c3810}
#p-timer .timer-panel:after{display:none}
#p-timer .tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:5px;background:#eceee7;border:0;border-radius:16px;width:100%;max-width:610px}
#p-timer .tabs button{flex:1;min-width:88px;padding:12px 9px;border-radius:12px;font-size:12px;font-weight:600;line-height:1.4;color:#758172;transition:background .2s,color .2s,box-shadow .2s}
#p-timer .tabs button:hover{background:#ffffff80;color:#354b3d}
#p-timer .tabs button.selected{background:#fffefa;color:#344d3d;box-shadow:0 2px 8px #334b3810}
#p-timer .tabs button small{display:block;margin-top:4px;font-size:10px;font-weight:500;letter-spacing:.03em;opacity:.68}
#p-timer .timer-orbit{width:280px;height:280px;margin:48px 0 32px;border:1px solid #b9c7b388;box-shadow:0 0 0 12px #b5c6ac0d,0 0 0 26px #b5c6ac09;animation:none}
#p-timer .timer-orbit:before{opacity:.7}
#p-timer #timer{font-size:clamp(42px,5.5vw,62px);font-weight:500;letter-spacing:-2.5px;font-variant-numeric:tabular-nums;color:#354b3d}
#p-timer .timer-display small{font-size:10px;font-weight:600;letter-spacing:2px;margin-top:14px;color:#7f8c79}
#p-timer .head-actions{gap:10px}
#p-timer #start{min-width:145px;padding:13px 24px;background:#405b48;border:1px solid #405b48;color:#fffef8;border-radius:14px;font-size:13px;box-shadow:0 4px 12px #354b3d16}
#p-timer #reset{padding:13px 18px;border:1px solid #dce1d5;background:transparent;border-radius:14px;color:#74816e;font-size:12px}
#p-timer #sessionState{font-size:11px;color:#7b8874;margin:18px 0 0}
#p-timer #pomodoroProgress{position:relative;width:100%;max-width:320px;margin:24px 0 -17px;padding:10px 16px 14px;border-radius:12px;background:#e8eee4;color:#4e6550;font-size:12px;letter-spacing:.02em;overflow:hidden}
#p-timer #pomodoroProgress:after{content:'';position:absolute;bottom:0;left:0;height:3px;width:var(--round-progress,0%);background:#91ac88;transition:width .35s}
#p-timer #pomodoroProgress[data-phase="break"]{background:#efebf3;color:#7b688c}
#p-timer #pomodoroProgress[data-phase="break"]:after{background:#b7a3c6}
#p-timer #pomodoroProgress[hidden]{display:none}
#p-timer .timer-custom{position:relative;z-index:2;max-width:480px;width:100%;margin-top:28px;text-align:left;border-top:1px solid #dfe4d8}
#p-timer .timer-custom summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;padding:18px 2px;color:#5c6d57;font-size:12px;font-weight:600}
#p-timer .timer-custom summary::-webkit-details-marker{display:none}
#p-timer .timer-custom summary:after{content:'+';font-size:20px;font-weight:400;color:#87917d}
#p-timer .timer-custom[open] summary:after{content:'−'}
#p-timer .timer-duration-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;text-align:left}
#p-timer .timer-duration-fields label{font-size:11px;color:#7a8571}
#p-timer .timer-duration-fields input{box-sizing:border-box;display:block;width:100%;min-width:0;margin-top:8px;padding:12px 10px;border:1px solid #dce2d3;border-radius:12px;background:#fffefa;color:#40533b;font:500 17px Manrope, sans-serif;outline:none}
#p-timer .timer-duration-fields input:focus{border-color:#96ad88;box-shadow:0 0 0 3px #96ad881a}
#p-timer .timer-duration-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
#p-timer .timer-duration-actions .btn{flex:1;padding:11px 8px;font-size:11px;border-radius:10px;background:#f0f2ea;border:1px solid #dce2d3;color:#5b6e51;box-shadow:none}
#p-timer .timer-custom p{font-size:11px;line-height:1.7;margin:12px 0 0;color:#8a9381}
#p-timer button:focus-visible,#p-timer summary:focus-visible{outline:2px solid #839e77;outline-offset:3px}
@media(max-width:600px){#p-timer .timer-panel{padding:22px 16px}#p-timer .tabs button{min-width:78px;font-size:11px;padding:10px 6px}#p-timer .timer-duration-fields{grid-template-columns:repeat(2,minmax(0,1fr))}#p-timer .timer-orbit{width:240px;height:240px;margin-top:40px}#p-timer #timer{font-size:46px}}

/* Quiet, layered focus workspace */
#p-timer .timer-panel{background:radial-gradient(ellipse at 18% 8%,#efe9f380,transparent 48%),radial-gradient(ellipse at 82% 62%,#dfe9dc80,transparent 52%),linear-gradient(145deg,#fdfbf7,#f5f5ed);border:1px solid #e6e4d9;box-shadow:0 20px 60px #4c544110,inset 0 1px 0 #fff;border-radius:30px;padding:32px}
#p-timer .tabs{padding:6px;background:#e6e8df80;border:1px solid #ffffffb0;box-shadow:inset 0 1px 4px #56614905;gap:5px;border-radius:18px}
#p-timer .tabs button{color:#6c7667;padding:13px 9px;position:relative}
#p-timer .tabs button.selected{background:#fffefa;box-shadow:0 3px 12px #45553b0d,inset 0 0 0 1px #fff;color:#354d3d}
#p-timer .tabs button.selected:before{content:'';display:block;position:absolute;bottom:6px;left:calc(50% - 7px);width:14px;height:2px;border-radius:4px;background:#9eaf90}
#p-timer .tabs button small{font-size:10px;padding-bottom:3px}
#p-timer .timer-orbit{background:radial-gradient(circle,#fffefbdb 20%,#f9faf3a6 65%,#edf1e580);border-color:#bac8b070;box-shadow:0 0 0 12px #ffffff50,0 0 0 13px #cad4c338,0 18px 45px #4b62480b,inset 0 1px 2px #fff;width:284px;height:284px;margin:48px 0 32px}
#p-timer .timer-orbit:before{opacity:.65}
#p-timer #timer{font-weight:500;color:#3f5142;letter-spacing:-3px;text-shadow:0 1px 0 #fff}
#p-timer #start{background:linear-gradient(135deg,#536c53,#3d5644);box-shadow:0 6px 18px #3f594423,inset 0 1px 0 #ffffff26;border-color:#4a624b;transition:box-shadow .2s,transform .2s}
#p-timer #start:hover{transform:translateY(-1px);box-shadow:0 8px 22px #3f594430}
#p-timer #reset{background:#fffefa70;border-color:#dce1d4}
#p-timer #pomodoroProgress{cursor:pointer;width:auto;min-width:230px;max-width:100%;border:1px solid #d9e1d1;background:#eef2e9c9;padding:12px 38px 14px 19px;border-radius:14px;font-family:inherit;font-weight:500;box-shadow:0 3px 9px #4e655006;transition:box-shadow .2s,border-color .2s}
#p-timer #pomodoroProgress:hover{border-color:#b2c2a8;box-shadow:0 4px 12px #4e655010}
#p-timer #pomodoroProgress:before{content:'✎';position:absolute;right:14px;top:10px;font-size:16px;opacity:.65}
#p-timer #pomodoroProgress:after{height:2px}
#p-timer #pomodoroProgress[data-phase="break"]{border-color:#ded5e8;background:#f0ebf4c9}
#p-timer .round-editor{z-index:3;width:100%;max-width:340px;margin:27px 0 -15px;padding:18px;text-align:left;border:1px solid #e1e5d8;border-radius:18px;background:#fffefa;box-shadow:0 10px 28px #4a574510}
#p-timer .round-editor[hidden]{display:none}
#p-timer .round-editor label{display:block;font-size:12px;font-weight:600;color:#51624a;margin-bottom:12px}
#p-timer .round-editor-controls{display:flex;align-items:center;gap:8px}
#p-timer .round-editor input{box-sizing:border-box;width:80px;min-width:0;padding:10px;border:1px solid #cbd6c1;border-radius:10px;font:500 17px Manrope,sans-serif;color:#40533b;background:#f8faf4}
#p-timer .round-editor button{padding:10px 12px;border:1px solid #dde4d4;border-radius:10px;background:#edf2e7;font-family:inherit;font-size:11px;font-weight:600;color:#53674a;cursor:pointer}
#p-timer .round-editor #cancelRounds{background:transparent;color:#8a927e;border-color:transparent}
#p-timer .round-editor small{display:block;font-size:10px;line-height:1.6;color:#849076;margin-top:11px}
#p-timer .timer-custom{border:1px solid #e1e5d8;border-radius:17px;background:#fffefa65;box-sizing:border-box;padding:0 18px;margin-top:27px;max-width:480px}
#p-timer .timer-custom[open]{padding-bottom:18px;background:#fffefa9c}
#p-timer .timer-custom summary{padding:16px 0;color:#68765e;font-weight:500}
#p-timer .side-stack .card{border-radius:22px;border-color:#e5e6dc;box-shadow:0 8px 24px #53604406}
@media(max-width:600px){#p-timer .timer-panel{padding:22px 15px;border-radius:24px}#p-timer .timer-orbit{width:235px;height:235px}#p-timer .tabs button{padding:11px 6px}#p-timer .timer-custom{padding-left:13px;padding-right:13px}#p-timer .round-editor{box-sizing:border-box}}
@media(prefers-reduced-motion:reduce){#p-timer *{transition:none!important}}

#p-timer .focus-weave{padding:23px;background:radial-gradient(ellipse at 60% 45%,#efedf4a1,transparent 65%),#fbfaf6;border:1px solid #e4e2d9;overflow:hidden}
#p-timer .weave-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#8d917f;font-size:9px;font-weight:600;letter-spacing:1.8px}
#p-timer .weave-badge{font-size:10px;letter-spacing:0;color:#8a7995;padding:5px 8px;background:#eee9f2;border-radius:20px;font-weight:500}
#p-timer .focus-weave h3{font:500 22px/1.4 Georgia,serif;color:#58624e;letter-spacing:-.4px;margin:16px 0 0}
#p-timer #focusWeaveArt{max-width:330px;margin:0 auto;aspect-ratio:1;display:grid;place-items:center}
#p-timer #focusWeaveArt svg{width:100%;height:100%}
#p-timer .weave-status{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;line-height:1.5;color:#7b8370}
#p-timer .weave-status b{font-size:11px;font-weight:500;color:#9a88a4;white-space:nowrap}
#p-timer .weave-track{height:3px;border-radius:5px;background:#e9e8de;margin-top:12px;overflow:hidden}
#p-timer .weave-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#afbea0,#ae99be);border-radius:5px;transition:width 1s linear}
#p-timer #focusWeaveRule{font-size:10px;line-height:1.7;margin:13px 0 0;color:#929680}
#p-timer .weave-collection{padding:27px 30px;margin-top:22px;border:1px solid #e4e4d9;border-radius:26px;background:linear-gradient(115deg,#fbfaf6,#f4f3ed)}
#p-timer .weave-collection-head{display:flex;align-items:center;justify-content:space-between;gap:15px}
#p-timer .weave-collection-head>div>span{font-size:9px;letter-spacing:1.8px;color:#969883;font-weight:600}
#p-timer .weave-collection-head h2{font:500 24px/1.4 Georgia,serif;color:#58624e;letter-spacing:-.4px;margin:7px 0 0}
#p-timer #focusWeaveCount{font-size:11px;color:#8c7c98;padding:7px 11px;border:1px solid #e3dce8;border-radius:30px;white-space:nowrap}
#p-timer #focusWeaveGallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:22px}
#p-timer .weave-piece{background:#fffefa;border:1px solid #e9e7dc;border-radius:16px;padding:8px 8px 14px;min-width:0;box-shadow:0 5px 13px #55523e04}
#p-timer .weave-piece svg{display:block;width:100%;height:auto;aspect-ratio:1}
#p-timer .weave-piece>div{padding:0 5px}
#p-timer .weave-piece b{display:block;font-size:12px;font-weight:500;color:#627057}
#p-timer .weave-piece span,#p-timer .weave-piece small{display:block;font-size:10px;color:#939783;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#p-timer .weave-empty{grid-column:1/-1;text-align:center;padding:22px 15px 28px;border:1px dashed #dcdfcf;border-radius:18px;background:#ffffff36}
#p-timer .weave-empty>span{display:block;color:#b1a0bc;font-size:32px;margin-bottom:8px}
#p-timer .weave-empty b{font-size:12px;font-weight:500;color:#7a846e}
#p-timer .weave-empty p{font-size:11px;color:#989d89;margin:8px 0 0}
#p-timer .weave-local-note{font-size:10px;line-height:1.6;color:#9b9e8c;margin:14px 0 0}
@media(max-width:1100px){#p-timer #focusWeaveGallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){#p-timer .weave-collection{padding:22px 16px}#p-timer .weave-collection-head h2{font-size:21px}#p-timer #focusWeaveGallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
