/* Таймер фокуса: фиолетовая сцена с кольцом оставшегося времени и боковые карточки ритма. */
.focus-page{max-width:1120px;margin:auto}
.focus-heading{margin-bottom:28px}
.focus-heading h1{margin:0 0 10px;font-size:clamp(28px,3vw,38px);letter-spacing:-.035em}
.focus-heading p{max-width:60ch;margin:0;color:#62576f;line-height:1.55}
.focus-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(270px,.8fr);gap:22px;align-items:stretch}

/* ---------- Сцена ---------- */
.focus-hero{--accent:#e46fd6;--glow:#d45ad066;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:26px;padding:30px 32px 34px;border-radius:28px;color:#fff;background:radial-gradient(120% 90% at 50% 0%,#6d47ad 0%,#4a2f78 45%,#2c1d4a 100%);box-shadow:0 30px 60px -30px #2c1d4aee,inset 0 1px #ffffff1f}
.focus-hero.is-rest{--accent:#c8eb62;--glow:#9be07f55}
.focus-orb{position:absolute;z-index:-1;inset:auto -120px -160px auto;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#cc3bb070,#fb5b3130 45%,transparent 70%);filter:blur(4px);transition:background 600ms var(--spring)}
.focus-hero.is-rest .focus-orb{background:radial-gradient(circle at 35% 35%,#b8e25a55,#5fc7a030 45%,transparent 70%)}
.focus-hero::before{content:"";position:absolute;z-index:-1;inset:-140px auto auto -120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,#ffffff14,transparent 65%)}

.focus-modes{position:relative;display:flex;gap:4px;padding:5px;border-radius:999px;background:#ffffff14;border:1px solid #ffffff24;backdrop-filter:blur(8px)}
.focus-modes button{min-height:40px;padding:8px 18px;border:0;border-radius:999px;background:transparent;color:#e3d8f4;font:inherit;font-size:13px;font-weight:650;cursor:pointer;transition:background 220ms var(--spring),color 220ms var(--spring)}
.focus-modes button:hover{color:#fff;background:#ffffff14}
.focus-modes button.active{background:#fff;color:#352354;box-shadow:0 8px 18px -8px #0006}

.focus-dial{position:relative;width:min(100%,340px);aspect-ratio:1;display:grid;place-items:center}
.focus-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.focus-ticks{stroke:#ffffff2e;stroke-width:.45;stroke-linecap:round;fill:none}
.focus-track{fill:none;stroke:#ffffff17;stroke-width:3.2}
.focus-value{fill:none;stroke:url(#focus-work);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--share,1) * 100);transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 0 3px var(--glow))}
.focus-hero.is-rest .focus-value{stroke:url(#focus-rest)}
.focus-readout{position:relative;display:grid;justify-items:center;gap:8px;text-align:center}
.focus-phase{padding:5px 12px;border-radius:999px;background:#ffffff1a;color:#f2ebfb;font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.focus-count{font-size:clamp(58px,7.4vw,84px);font-weight:650;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 10px 30px #1a0f2e66}
.focus-until{color:#cdbfe3;font-size:13px}

.focus-status{display:flex;align-items:center;gap:9px;min-height:24px;margin:-8px 0 0;color:#e7ddf5;font-size:14px}
.focus-status i{width:8px;height:8px;border-radius:50%;background:#ffffff59}
.focus-hero.is-running .focus-status i{background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:focus-pulse 2s ease-out infinite;animation-delay:var(--loop-delay,0s)}

.focus-actions{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.focus-play{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:176px;min-height:56px;padding:0 28px;border:0;border-radius:999px;background:#fff;color:#352354;font:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 16px 30px -14px #000a;transition:transform 200ms var(--spring),box-shadow 200ms var(--spring)}
.focus-play:hover{transform:translateY(-2px);box-shadow:0 20px 34px -14px #000c}
.focus-play:active{transform:scale(.97)}
.focus-hero.is-running .focus-play{background:#ffffff1f;color:#fff;box-shadow:inset 0 0 0 1px #ffffff40}
.focus-reset{min-height:56px;padding:0 22px;white-space:nowrap;border:1px solid #ffffff38;border-radius:999px;background:transparent;color:#eee6fa;font:inherit;font-size:13px;font-weight:650;cursor:pointer;transition:background 200ms var(--spring)}
.focus-reset:hover{background:#ffffff14}
.focus-reset:active{transform:scale(.97)}
.focus-hero button:focus-visible{outline:3px solid #f1c6ff;outline-offset:3px}

/* ---------- Боковые карточки ---------- */
.focus-side{display:grid;gap:16px;align-content:start}
.focus-card{padding:22px 24px;border-radius:var(--radius-card,22px);background:#fff;border:1px solid var(--card-line,#eee8f4);box-shadow:var(--card-shadow)}
.focus-card h2{margin:0 0 16px;font-size:18px;letter-spacing:-.02em}
.focus-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.focus-steps li{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;padding:12px;border-radius:16px;border:1px solid transparent;transition:background 260ms var(--spring),border-color 260ms var(--spring)}
.focus-steps li.current{background:#f6f1fc;border-color:#e4d8f3}
.focus-steps strong{font-size:13.5px}
.focus-steps li span:not(.focus-step-mark){display:block;margin-top:4px;color:#68636e;font-size:12.5px;line-height:1.5}
.focus-steps em{display:none;margin-left:8px;vertical-align:1px;padding:3px 8px;border-radius:999px;background:var(--violet);color:#fff;font-size:10.5px;font-style:normal;font-weight:650}
.focus-steps li.current em{display:inline-block}
.focus-step-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--tint-violet,#efe8fb);color:var(--violet)}
.focus-steps li[data-focus-step="rest"] .focus-step-mark{background:var(--tint-lime,#eff7d8);color:#547a1f}

.focus-cycles{display:flex;align-items:center;justify-content:space-between;gap:16px}
.focus-cycles span{display:block;color:#68636e;font-size:12.5px}
.focus-cycles strong{display:block;margin-top:4px;font-size:34px;line-height:1;letter-spacing:-.03em;color:var(--violet);font-variant-numeric:tabular-nums}
.focus-cycle-dots{display:flex;gap:6px}
.focus-cycle-dots i{width:14px;height:14px;border-radius:50%;background:#eee8f4;box-shadow:inset 0 0 0 1px #e1d6ee}
.focus-cycle-dots i.done{background:linear-gradient(135deg,#8a5fd0,var(--violet));box-shadow:none}

.focus-task-link{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;transition:transform 200ms var(--spring),border-color 200ms var(--spring)}
.focus-task-link>span:nth-child(2){flex:1}
.focus-task-link strong{display:block;font-size:13.5px}
.focus-task-link small{display:block;margin-top:3px;color:#68636e;font-size:12px}
.focus-task-link>svg{color:var(--violet)}
.focus-task-link:hover{transform:translateY(-2px);border-color:#d9c9ee}
.focus-task-link:focus-visible{outline:3px solid #9b75c5;outline-offset:3px}

@keyframes focus-pulse{0%{box-shadow:0 0 0 0 var(--accent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

@media(max-width:900px){.focus-layout{grid-template-columns:1fr}.focus-side{grid-template-columns:1fr 1fr}.focus-side .focus-card:first-child{grid-column:1/-1}}
@media(max-width:540px){
  .focus-heading{margin-bottom:20px}
  .focus-hero{gap:20px;padding:22px 16px 24px;border-radius:24px}
  .focus-modes{width:100%}.focus-modes button{flex:1;min-height:44px;padding:8px 6px;font-size:12px}
  .focus-dial{width:min(100%,290px)}
  .focus-count{font-size:60px}
  .focus-actions{width:100%}.focus-play,.focus-reset{flex:1;min-width:0;padding:0 14px}
  .focus-side{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.focus-value,.focus-orb,.focus-modes button,.focus-play,.focus-steps li,.focus-task-link{transition:none}.focus-hero.is-running .focus-status i{animation:none}}