/* Часослов — стол с таймерами: сцена, визуальные темы, карточки, диалог, «время вышло», фокус-режим. */
.desk-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:18px}
.h-hand{font:400 clamp(2.4rem,5vw,3.6rem)/1 var(--font-script);color:var(--brass-1);text-shadow:0 2px 0 #0008}
.desk-head p{color:var(--on-desk);opacity:.9;max-width:46ch;margin-top:4px;text-shadow:0 1px 3px #0008}
.presets{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.presets>span{font:700 .9rem var(--font-ui);color:var(--on-desk-soft);margin-right:4px}
.preset{min-width:52px;min-height:44px;padding:0 12px;border-radius:99px;border:1px solid rgba(243,214,150,.35);background:rgba(255,235,190,.07);color:var(--on-desk);font:700 1rem var(--font-ui);
  transition:background-color .2s,transform .15s var(--ease-out),border-color .2s}
.preset:hover{background:rgba(255,235,190,.2);border-color:var(--brass-1);transform:translateY(-2px)}
.preset:active{transform:scale(.95)}
.desk-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:clamp(16px,2.5vw,32px);align-items:start}

/* ---------- сцена ---------- */
.stage{--tc:#e0a23b;position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:18px clamp(14px,2.4vw,30px) 22px;border-radius:18px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,200,120,.1),transparent 60%),linear-gradient(170deg,#2c1b11,#170d08);
  border:1px solid rgba(243,214,150,.3);box-shadow:inset 0 1px 0 rgba(255,235,190,.16),inset 0 0 0 5px #1b0f09,inset 0 0 0 6px rgba(201,161,90,.45),0 40px 60px -30px #000,0 12px 22px -10px #000}
.stage-top{display:flex;align-items:center;gap:10px;min-height:44px}
.stage-title{display:flex;align-items:baseline;gap:10px;min-width:0;margin-right:auto}
.stage-title .dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--tc);box-shadow:0 0 12px var(--tc);align-self:center}
.stage-title b{font:700 1.5rem/1.1 var(--font-display);color:var(--brass-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-title small{font:700 .85rem var(--font-ui);color:var(--on-desk-soft);white-space:nowrap}
.stage-vis{position:relative;width:min(100%,470px);margin:4px auto 0;display:grid;place-items:center;min-height:0}
.stage-vis>div{width:100%}
.stage-vis[data-theme='hourglass']{width:min(58%,260px)}
.stage-vis[data-theme='candle']{width:min(72%,310px)}
.stage-vis[data-theme='flip']{width:min(100%,660px)}
.stage-vis.swap{animation:swap .5s var(--ease-out)}
@keyframes swap{from{opacity:0;transform:scale(.94) translateY(8px)}}
.stage-readout{text-align:center;font:900 clamp(2.4rem,6vw,3.6rem)/1 var(--font-display);color:var(--on-desk);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.02em;text-shadow:0 2px 0 #000a}
.stage-readout.hide{display:none}
.stage-phase{text-align:center;font:400 clamp(1.5rem,2.6vw,2rem)/1.1 var(--font-script);color:var(--tc);min-height:1.2em;filter:brightness(1.25)}
.stage-controls{display:flex;justify-content:center;align-items:center;gap:clamp(12px,3vw,26px)}
.ctl{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:1px solid rgba(243,214,150,.4);background:linear-gradient(180deg,rgba(255,235,190,.14),rgba(255,235,190,.04));color:var(--on-desk);
  transition:transform .15s var(--ease-out),background-color .2s,box-shadow .2s;box-shadow:0 6px 12px -6px #000a}
.ctl:hover{background:rgba(255,235,190,.2)}
.ctl:active{transform:scale(.93)}
.ctl .i{width:26px;height:26px}
.ctl-main{width:88px;height:88px;color:#2a1a08;border-color:#7a5a24;background:linear-gradient(180deg,#f5e4ac 0%,#dcb866 46%,#b98e41 100%);box-shadow:inset 0 1px 0 #fff9,inset 0 -3px 0 #0003,0 3px 0 #5b4420,0 14px 24px -8px #000c,0 0 0 0 var(--tc)}
.ctl-main:hover{background:linear-gradient(180deg,#f9ebbe,#e2bf70 46%,#c19646)}
.ctl-main .i{width:38px;height:38px}
.stage[data-state='running'] .ctl-main{animation:pulseRing 2.4s ease-out infinite}
@keyframes pulseRing{0%{box-shadow:inset 0 1px 0 #fff9,inset 0 -3px 0 #0003,0 3px 0 #5b4420,0 14px 24px -8px #000c,0 0 0 0 color-mix(in srgb,var(--tc) 60%,transparent)}100%{box-shadow:inset 0 1px 0 #fff9,inset 0 -3px 0 #0003,0 3px 0 #5b4420,0 14px 24px -8px #000c,0 0 0 22px transparent}}
.ctl small{display:none}
.stage-extra{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.stage-extra .btn{min-height:44px}
.stage-task{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font:500 1.3rem/1.2 var(--font-hand);color:var(--on-desk)}
.stage-task .chip-task{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 12px;border-radius:99px;background:rgba(243,214,150,.12);border:1px solid rgba(243,214,150,.3)}
.stage-task button{width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:var(--on-desk-soft)}
.stage-task button:hover{background:rgba(255,235,190,.15)}
.theme-row{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.theme-row button{display:grid;justify-items:center;gap:2px;min-width:64px;min-height:56px;padding:6px 8px;border-radius:10px;border:1px solid rgba(243,214,150,.2);background:rgba(255,235,190,.05);color:var(--on-desk-soft);font:700 .72rem var(--font-ui);transition:background-color .2s,border-color .2s,color .2s}
.theme-row button svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.theme-row button:hover{background:rgba(255,235,190,.14)}
.theme-row button[aria-checked='true']{color:var(--brass-1);border-color:var(--brass-2);background:rgba(243,214,150,.14)}
.laps{max-height:170px;overflow:auto;border-radius:10px;background:rgba(0,0,0,.25);padding:4px 12px;font:700 .95rem var(--font-ui);font-variant-numeric:tabular-nums}
.laps div{display:grid;grid-template-columns:3rem 1fr auto;gap:8px;padding:6px 0;border-bottom:1px solid rgba(243,214,150,.12);color:var(--on-desk)}
.laps div:last-child{border-bottom:0}
.laps span:first-child{color:var(--on-desk-soft)}
.laps span:last-child{color:var(--brass-1)}

/* ---------- визуальные темы ---------- */
.th{position:relative;width:100%;--tc:#e0a23b}
.th-ring{container-type:inline-size;aspect-ratio:1}
.th-ring svg{width:100%;height:100%;overflow:visible}
.th-ring .rim{fill:none;stroke:rgba(243,214,150,.2);stroke-width:1.5}
.th-ring .ticks line{stroke:rgba(243,214,150,.38)}
.th-ring .track{fill:none;stroke:rgba(243,214,150,.1);stroke-width:20}
.th-ring .arc,.th-ring .glow{fill:none;stroke-width:20;stroke-linecap:round}
.th-ring .glow{opacity:.5;stroke-width:30}
.th-ring[data-state='running'] .glow{animation:breathe 4.2s ease-in-out infinite}
@keyframes breathe{50%{opacity:.95}}
.th-ring .head{filter:drop-shadow(0 0 6px var(--tc))}
.th-ring .th-center{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1cqw;text-align:center;pointer-events:none}
.th-ring .th-digits{font:900 19cqw/1 var(--font-display);color:var(--on-desk);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.01em;text-shadow:0 3px 0 #000a,0 0 24px color-mix(in srgb,var(--tc) 40%,transparent)}
.th-ring .th-digits.long{font-size:14cqw}
.th-ring .th-sub{font:400 6.4cqw/1 var(--font-script);color:color-mix(in srgb,var(--tc) 70%,#fff);max-width:70cqw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-ring[data-state='done'] .th-digits{color:var(--tc)}

.th-dial{aspect-ratio:1}
.th-dial svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 16px 20px rgba(0,0,0,.55))}
.th-dial .tk line{stroke:#4a3a24}
.th-dial .num{font:700 15px var(--font-display);fill:#4a3a24;transition:opacity .4s}
.th-dial .brand{font:italic 700 15px var(--font-display);fill:#5b4420;letter-spacing:.06em}
.th-dial .wedge{transition:fill .3s}
.th-dial .ptr,.th-dial .sec{will-change:transform}

.th-hourglass canvas{margin:0 auto;display:block}
.th-hourglass.flipping canvas{animation:hgflip .76s var(--ease-io) forwards}
@keyframes hgflip{0%{transform:rotate(0)}70%{transform:rotate(190deg)}100%{transform:rotate(180deg)}}
.th-candle svg{width:100%;height:auto;overflow:visible}
.th-candle .cf{transition:none}

.th-flip{container-type:inline-size;padding:3cqw 0 1cqw}
.th-flip[data-groups='2']{--cw:min(20.5cqw,148px)}
.th-flip[data-groups='3']{--cw:min(13.4cqw,92px)}
.fl-row{display:flex;justify-content:center;align-items:flex-start;gap:2.4cqw}
.fl-group{position:relative;display:flex;gap:1.2cqw;padding-bottom:1.7em}
.fl-group small{position:absolute;left:0;right:0;bottom:0;text-align:center;font:700 .78rem var(--font-ui);color:var(--on-desk-soft)}
.fl-colon{display:grid;gap:calc(var(--cw)*.2);align-self:start;margin-top:calc(var(--cw)*.5)}
.fl-colon i{width:calc(var(--cw)*.11);height:calc(var(--cw)*.11);border-radius:50%;background:var(--tc);box-shadow:0 0 10px var(--tc)}
.fl-card{position:relative;outline:1px solid rgba(243,214,150,.16);width:var(--cw);height:calc(var(--cw)*1.4);perspective:calc(var(--cw)*5);border-radius:calc(var(--cw)*.08);box-shadow:0 14px 18px -8px #000,0 2px 0 #000;font-size:calc(var(--cw)*1.12)}
.fl-card::after{content:'';position:absolute;z-index:6;left:0;right:0;top:calc(50% - 1px);height:2px;background:#050201;box-shadow:0 1px 0 rgba(255,235,190,.12)}
.fl-card::before{content:'';position:absolute;z-index:6;left:0;right:0;bottom:-3px;height:3px;border-radius:0 0 4px 4px;background:var(--tc);opacity:.9}
.fl-half{position:absolute;left:0;right:0;height:50%;overflow:hidden;color:#f6ead0;background:linear-gradient(180deg,#4a3324,#352418);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fl-half span{position:absolute;left:0;right:0;height:calc(var(--cw)*1.4);line-height:calc(var(--cw)*1.4);text-align:center;font:900 1em/calc(var(--cw)*1.4) var(--font-display);font-variant-numeric:lining-nums;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.fl-top,.fl-flap-top{top:0;border-radius:calc(var(--cw)*.08) calc(var(--cw)*.08) 0 0;box-shadow:inset 0 1px 0 rgba(255,235,190,.16),inset 0 -8px 14px -8px #000}
.fl-top span,.fl-flap-top span{top:0}
.fl-bot,.fl-flap-bot{bottom:0;border-radius:0 0 calc(var(--cw)*.08) calc(var(--cw)*.08);background:linear-gradient(180deg,#2c1d13,#3d2b1e)}
.fl-bot span,.fl-flap-bot span{bottom:0}
.fl-flap-top,.fl-flap-bot{visibility:hidden;z-index:4}
.fl-flap-top{transform-origin:50% 100%}.fl-flap-bot{transform-origin:50% 0;transform:rotateX(90deg)}
.fl-card.flipping .fl-flap-top{visibility:visible;animation:flipTop .3s cubic-bezier(.5,0,.9,.5) forwards}
.fl-card.flipping .fl-flap-bot{visibility:visible;animation:flipBot .3s .3s cubic-bezier(.1,.6,.4,1) backwards;transform:rotateX(0)}
@keyframes flipTop{to{transform:rotateX(-90deg);filter:brightness(.6)}}
@keyframes flipBot{from{transform:rotateX(90deg);filter:brightness(.6)}to{transform:rotateX(0)}}
.fl-rivet{position:absolute;z-index:7;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#8a6a2f)}
.fl-rivet.l{left:3px}.fl-rivet.r{right:3px}

/* ---------- список таймеров ---------- */
.tl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.tl-head h2{font:700 1.5rem/1 var(--font-display);color:var(--brass-1)}
.tcards{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tcard{--tc:#e0a23b;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;border-radius:14px;border:1px solid rgba(243,214,150,.22);background:linear-gradient(160deg,rgba(60,36,22,.85),rgba(30,17,10,.9));
  box-shadow:inset 0 1px 0 rgba(255,235,190,.08),0 14px 20px -14px #000;transition:border-color .25s,transform .25s var(--ease-out),background-color .25s}
.tcard::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 3px 3px 0;background:var(--tc);box-shadow:0 0 10px var(--tc)}
.tcard:hover{transform:translateX(3px)}
.tcard.sel{border-color:var(--brass-2);background:linear-gradient(160deg,rgba(84,52,30,.92),rgba(40,23,13,.95))}
.tcard-main{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:68px;padding:8px 6px 8px 18px;border:0;background:none;color:var(--on-desk);text-align:left;border-radius:14px}
.tc-ring{width:44px;height:44px}
.tc-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.tc-ring circle{fill:none;stroke-width:5}
.tc-ring .bg{stroke:rgba(243,214,150,.15)}.tc-ring .fg{stroke:var(--tc);stroke-linecap:round}
.tc-info{min-width:0;display:grid}
.tc-info b{font:700 1.08rem/1.15 var(--font-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-info small{font:400 .82rem/1.2 var(--font-ui);color:var(--on-desk-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-time{font:900 1.35rem/1 var(--font-display);font-variant-numeric:lining-nums tabular-nums;color:var(--on-desk)}
.tcard[data-state='running'] .tc-time{color:var(--tc);filter:brightness(1.2)}
.tcard[data-state='done'] .tc-time{color:var(--on-desk-soft)}
.tc-btn{width:44px;height:44px;margin-right:2px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--on-desk-soft);transition:background-color .2s,color .2s}
.tc-btn:hover{background:rgba(255,235,190,.14);color:var(--on-desk)}
.tc-btn .i{width:22px;height:22px}
.tl-empty{display:grid;justify-items:center;gap:10px;padding:26px 16px;text-align:center;border:1.5px dashed rgba(243,214,150,.3);border-radius:14px;color:var(--on-desk-soft)}
.tl-empty .hand{font:500 1.6rem/1.15 var(--font-hand);color:var(--on-desk)}
.hint{margin-top:22px;color:var(--on-desk-soft);font-size:.9rem}
.hint kbd{display:inline-block;min-width:1.6em;padding:1px 6px;border-radius:5px;border:1px solid rgba(243,214,150,.4);background:rgba(255,235,190,.08);font:700 .85em var(--font-ui);text-align:center}
.notif-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px;padding:10px 14px;border-radius:10px;background:rgba(243,214,150,.1);border:1px dashed rgba(243,214,150,.4);color:var(--on-desk);font-size:.95rem}
.notif-bar .btn{min-height:40px}

/* ---------- диалог таймера ---------- */
.kind-seg{display:grid;grid-template-columns:repeat(4,1fr);width:100%}
.kind-seg button{display:grid;justify-items:center;gap:2px;padding:6px 2px;font-size:.78rem;line-height:1.1;min-height:60px}
.kind-seg .i{width:22px;height:22px}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:44px;height:44px;border-radius:50%;border:3px solid transparent;background:var(--sw);box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);transition:transform .15s var(--ease-out)}
.swatch:hover{transform:scale(1.1)}
.swatch[aria-checked='true']{border-color:var(--ink);box-shadow:0 0 0 2px var(--paper),inset 0 0 0 2px rgba(0,0,0,.25)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{min-height:44px;min-width:56px;padding:0 12px;border-radius:99px;border:1.5px solid rgba(42,32,23,.4);background:transparent;color:var(--ink);font:700 .95rem var(--font-ui)}
.chips button:hover{background:rgba(42,32,23,.1)}
.chips button[aria-pressed='true']{background:var(--ink);color:var(--paper)}
.hms{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hms label{display:grid;gap:2px;font:700 .8rem var(--font-ui);color:var(--ink-soft)}
.hms input{text-align:center;font:900 1.5rem var(--font-display);min-height:52px;padding:0}
.sub-form[hidden]{display:none}

/* ---------- «время вышло» ---------- */
.done-overlay{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(10,5,2,.7);backdrop-filter:blur(4px);animation:fadeIn .35s ease-out}
@keyframes fadeIn{from{opacity:0}}
.done-card{--tc:#e0a23b;position:relative;width:min(460px,100%);padding:34px 28px 26px;text-align:center;border-radius:6px;background:var(--paper-grain),var(--paper);color:var(--ink);overflow:hidden;
  box-shadow:0 40px 80px -20px #000,0 0 0 8px var(--leather-2),0 0 0 9px #c9a15a88;animation:cardIn .6s var(--ease-out)}
@keyframes cardIn{from{opacity:0;transform:translateY(30px) scale(.9) rotate(-2deg)}}
.done-bell{position:relative;width:110px;height:110px;margin:0 auto 6px;display:grid;place-items:center}
.done-bell svg{position:relative;z-index:2;width:62px;height:62px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 8%;animation:ring 1.1s ease-in-out 3}
.done-bell i{position:absolute;inset:14px;border-radius:50%;border:3px solid var(--tc);opacity:0;animation:ripple 2.4s ease-out infinite}
.done-bell i:nth-child(2){animation-delay:.8s}.done-bell i:nth-child(3){animation-delay:1.6s}
@keyframes ripple{0%{opacity:.8;transform:scale(.5)}100%{opacity:0;transform:scale(2.2)}}
@keyframes ring{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-7deg)}75%{transform:rotate(3deg)}}
.done-card h2{font:900 2.4rem/1 var(--font-display);margin-bottom:6px;color:var(--ink)}
.done-card .nm{font:500 1.7rem/1.15 var(--font-hand);color:var(--ink-blue);margin-bottom:4px}
.done-card .sm{color:var(--ink-soft);margin-bottom:18px}
.done-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.done-card .splash{position:absolute;left:50%;top:78px;width:340px;height:340px;margin:-170px 0 0 -170px;pointer-events:none;opacity:0;animation:splash 1.4s .1s ease-out}
.done-card .splash circle{fill:var(--tc);opacity:.18}
@keyframes splash{0%{opacity:.34;transform:scale(.1)}100%{opacity:0;transform:scale(1.6)}}
.done-card>*:not(.splash){position:relative}

/* ---------- фокус-режим ---------- */
.focus-mode{position:fixed;inset:0;z-index:70;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;padding:clamp(14px,3vw,30px);background:radial-gradient(90% 70% at 50% 40%,#2c1b11,#0d0704);color:var(--on-desk);animation:fadeIn .4s}
.focus-mode .fm-top{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px}
.focus-mode .fm-title{font:400 clamp(1.6rem,3vw,2.4rem)/1.1 var(--font-script);color:var(--tc,var(--brass-1))}
.focus-mode .fm-vis{align-self:center;width:min(86vw,72vh,680px)}
.focus-mode .fm-vis[data-theme='hourglass']{width:min(48vw,48vh,320px)}
.focus-mode .fm-vis[data-theme='candle']{width:min(62vw,54vh,360px)}
.focus-mode .fm-vis[data-theme='flip']{width:min(94vw,820px)}
.focus-mode .fm-bottom{display:grid;justify-items:center;gap:10px}
.fm-readout{font:900 clamp(2rem,5vw,3.4rem)/1 var(--font-display);font-variant-numeric:lining-nums tabular-nums;text-shadow:0 2px 0 #000a}

@media (max-width:900px){
  .desk-grid{grid-template-columns:minmax(0,1fr)}
  .stage-vis[data-theme='hourglass']{width:min(52%,220px)}
  .ctl-main{width:80px;height:80px}
  .tcard:hover{transform:none}
}
@media (max-width:520px){
  .stage{padding:14px 12px 18px;border-radius:14px}
  .ctl{width:54px;height:54px}
  .theme-row button{min-width:56px}
  .preset{min-width:48px;padding:0 10px}
}