:root {
  --bg: #f4f6fa;
  --surface: rgba(255,255,255,.86);
  --surface-solid: #fff;
  --surface-soft: #eef2f8;
  --text: #07143d;
  --muted: #69738f;
  --line: rgba(11,28,77,.09);
  --accent: #147ff3;
  --accent-2: #092cbe;
  --glow: rgba(20,127,243,.22);
  --period: #1685f6;
  --period-soft: rgba(22,133,246,.12);
  --danger: #d9475c;
  --success: #16a66a;
  --warning: #ed9225;
  --shadow: 0 18px 48px rgba(13,30,74,.08), 0 2px 12px rgba(13,30,74,.04);
  --radius: 26px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Noto Sans JP", sans-serif;
  font-synthesis: none;
}

:root[data-period="morning"] { --period:#f39a16; --period-soft:rgba(243,154,22,.13); --glow:rgba(243,154,22,.22); }
:root[data-period="day"] { --period:#1483f5; --period-soft:rgba(20,131,245,.12); --glow:rgba(20,131,245,.22); }
:root[data-period="night"] { --period:#3343ba; --period-soft:rgba(51,67,186,.14); --glow:rgba(51,67,186,.25); }
:root[data-theme="dark"] {
  --bg:#071027; --surface:rgba(16,28,57,.88); --surface-solid:#111e3b; --surface-soft:#172647;
  --text:#f5f7ff; --muted:#9ca9c5; --line:rgba(220,230,255,.1); --shadow:0 22px 56px rgba(0,0,0,.3);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg:#071027; --surface:rgba(16,28,57,.88); --surface-solid:#111e3b; --surface-soft:#172647;
    --text:#f5f7ff; --muted:#9ca9c5; --line:rgba(220,230,255,.1); --shadow:0 22px 56px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { min-height:100%; background:var(--bg); overscroll-behavior:none; touch-action:manipulation; }
body { margin:0; min-height:100dvh; background:var(--bg); color:var(--text); overflow-x:hidden; }
button,input,textarea,select { font:inherit; color:inherit; }
button { cursor:pointer; border:0; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid var(--glow); outline-offset:2px; }
button:disabled { opacity:.42; cursor:not-allowed; }
a { color:var(--accent); }

.app-shell { min-height:100dvh; }
.sidebar { display:none; }
.main-stage { width:100%; max-width:1360px; margin:0 auto; padding:calc(var(--safe-top) + 18px) 16px calc(94px + var(--safe-bottom)); }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:60px; margin-bottom:20px; }
.topbar h1 { font-size:clamp(1.45rem,5.8vw,2.2rem); letter-spacing:-.045em; margin:3px 0 0; line-height:1.1; }
.eyebrow { color:var(--period); letter-spacing:.16em; font-size:.68rem; line-height:1.2; font-weight:850; margin:0; text-transform:uppercase; }
.top-actions { display:flex; align-items:center; gap:8px; }
.icon-button { width:44px; height:44px; border-radius:50%; background:var(--surface); border:1px solid var(--line); color:var(--text); display:grid; place-items:center; font-size:1.25rem; box-shadow:0 5px 16px rgba(10,25,70,.05); flex:0 0 auto; }
.mode-pill { min-height:44px; display:flex; align-items:center; gap:8px; padding:0 12px; border-radius:22px; color:var(--text); background:var(--surface); border:1px solid var(--line); }
.mode-pill b { font-size:.73rem; letter-spacing:.07em; max-width:84px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mode-pill > span:first-child { width:8px; height:8px; border-radius:50%; background:var(--period); box-shadow:0 0 0 4px var(--period-soft); }

.view-root { display:block; animation:viewIn .32s ease both; }
@keyframes viewIn { from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }
.grid { display:grid; gap:14px; }
.two-col { grid-template-columns:1fr; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.card-flat { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:16px; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:6px 2px 14px; }
.section-head h2 { font-size:1.04rem; margin:0; letter-spacing:-.02em; }
.section-head p { margin:3px 0 0; color:var(--muted); font-size:.76rem; }
.text-button { min-height:44px; padding:0 12px; border-radius:14px; background:transparent; color:var(--accent); font-weight:750; font-size:.82rem; }

.hero { position:relative; overflow:hidden; padding:22px; background:linear-gradient(145deg,var(--surface-solid),var(--surface)); }
.hero::after { content:""; width:180px; height:180px; position:absolute; right:-68px; top:-78px; border-radius:50%; background:radial-gradient(circle,var(--period-soft),transparent 68%); pointer-events:none; }
.hero-time { font-size:clamp(2.7rem,13vw,4.8rem); font-weight:800; letter-spacing:-.075em; line-height:.95; font-variant-numeric:tabular-nums; margin:4px 0 8px; }
.hero-sub { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:.82rem; }
.period-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:99px; background:var(--period-soft); color:var(--period); font-weight:800; }
.progress-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; margin-top:22px; }
.progress-track { height:9px; border-radius:99px; background:var(--surface-soft); overflow:hidden; }
.progress-fill { height:100%; width:0; background:linear-gradient(90deg,#ffac19,var(--period),#1748d4); border-radius:inherit; transition:width .6s cubic-bezier(.2,.9,.2,1); }
.progress-count { font-weight:800; font-variant-numeric:tabular-nums; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.metric { padding:12px 10px; background:var(--surface-soft); border-radius:16px; }
.metric span { display:block; color:var(--muted); font-size:.64rem; font-weight:700; letter-spacing:.06em; }
.metric strong { display:block; margin-top:4px; font-size:.94rem; font-variant-numeric:tabular-nums; }

.switch-card { position:relative; min-height:214px; color:white; background:linear-gradient(135deg,#071b58 0%,#0b52d7 58%,#0798f5 100%); overflow:hidden; border:0; }
.switch-card::before,.switch-card::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.17); border-radius:50%; }
.switch-card::before { width:235px; height:235px; right:-102px; top:-112px; }
.switch-card::after { width:150px; height:150px; right:-52px; bottom:-90px; }
.switch-card .eyebrow { color:#87d7ff; }
.switch-card h2 { font-size:1.75rem; margin:8px 0 4px; letter-spacing:-.04em; }
.switch-card p { color:rgba(255,255,255,.72); margin:0; max-width:28ch; font-size:.83rem; line-height:1.5; }
.switch-main { width:100%; min-height:58px; border-radius:18px; margin-top:20px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.96); color:#082164; font-weight:850; box-shadow:0 12px 30px rgba(0,0,0,.2); }
.switch-main span:last-child { font-size:1.4rem; }

.emergency-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-radius:20px; background:linear-gradient(120deg,rgba(241,146,31,.14),rgba(232,74,93,.11)); border:1px solid rgba(232,120,40,.18); }
.emergency-banner strong { display:block; font-size:.9rem; }
.emergency-banner span { color:var(--muted); font-size:.72rem; }
.toggle { width:52px; height:32px; padding:3px; border-radius:99px; background:#c9cfdb; transition:.2s; flex:0 0 auto; }
.toggle::after { content:""; display:block; width:26px; height:26px; border-radius:50%; background:white; box-shadow:0 2px 8px rgba(0,0,0,.18); transition:.25s; }
.toggle.on { background:var(--warning); }
.toggle.on::after { transform:translateX(20px); }

.routine-list { display:grid; gap:10px; }
.routine-card { position:relative; min-height:82px; display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:21px; transition:transform .18s, opacity .2s, background .2s; }
.routine-card:active { transform:scale(.988); }
.routine-card.complete { opacity:.67; }
.routine-card.complete .routine-name { text-decoration:line-through; text-decoration-thickness:1px; }
.routine-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:16px; font-size:1.35rem; background:color-mix(in srgb,var(--routine-color,var(--accent)) 12%,transparent); }
.routine-main { min-width:0; }
.routine-name-row { display:flex; align-items:center; gap:7px; min-width:0; }
.routine-name { font-weight:800; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.tiny-badge { flex:0 0 auto; padding:3px 7px; border-radius:99px; background:var(--surface-soft); color:var(--muted); font-size:.6rem; font-weight:800; letter-spacing:.04em; }
.routine-meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; color:var(--muted); font-size:.7rem; margin-top:5px; }
.routine-status { min-width:58px; text-align:right; }
.routine-status strong { display:block; font-size:.8rem; }
.routine-status span { display:block; color:var(--muted); margin-top:3px; font-size:.65rem; }
.check-button { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--surface-soft); border:1px solid var(--line); color:var(--muted); font-weight:900; }
.check-button.done { background:var(--success); color:white; border-color:transparent; animation:checkPop .35s ease; }
@keyframes checkPop { 50%{transform:scale(1.16); box-shadow:0 0 0 9px rgba(22,166,106,.12)} }
.period-section.active-period .section-head h2 { color:var(--period); }
.empty-state { text-align:center; padding:38px 20px; color:var(--muted); }
.empty-state span { display:block; font-size:2rem; margin-bottom:8px; }

.primary-button,.secondary-button,.danger-button { width:100%; min-height:52px; border-radius:17px; padding:0 18px; font-weight:850; letter-spacing:.01em; }
.primary-button { color:white; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 12px 26px var(--glow); }
.secondary-button { background:var(--surface-soft); border:1px solid var(--line); }
.danger-button { color:var(--danger); background:rgba(217,71,92,.1); }
.button-row { display:flex; gap:10px; }
.button-row > * { flex:1; }
.fab { position:fixed; right:18px; bottom:calc(88px + var(--safe-bottom)); width:58px; height:58px; border-radius:19px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:white; font-size:1.8rem; box-shadow:0 15px 30px var(--glow); z-index:20; }

.segmented { display:flex; padding:4px; gap:3px; background:var(--surface-soft); border-radius:14px; }
.segmented button { min-height:38px; flex:1; border-radius:11px; background:transparent; color:var(--muted); font-size:.75rem; font-weight:800; }
.segmented button.active { background:var(--surface-solid); color:var(--text); box-shadow:0 3px 10px rgba(0,0,0,.07); }

.timeline { display:grid; gap:0; }
.timeline-row { display:grid; grid-template-columns:56px 18px 1fr; gap:8px; min-height:84px; }
.timeline-time { font-size:.68rem; color:var(--muted); padding-top:13px; font-variant-numeric:tabular-nums; }
.timeline-line { position:relative; display:flex; justify-content:center; }
.timeline-line::after { content:""; position:absolute; top:25px; bottom:-8px; width:1px; background:var(--line); }
.timeline-row:last-child .timeline-line::after { display:none; }
.timeline-dot { width:10px; height:10px; margin-top:15px; border-radius:50%; background:var(--dot,var(--accent)); box-shadow:0 0 0 4px var(--surface-solid); z-index:1; }
.compact-list .routine-card { min-height:58px; grid-template-columns:36px minmax(0,1fr) auto; border-radius:16px; padding:8px 10px; }
.compact-list .routine-icon { width:36px; height:36px; border-radius:12px; font-size:1rem; }

.modal-backdrop { position:fixed; inset:0; display:flex; align-items:flex-end; justify-content:center; background:rgba(1,8,25,.54); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:100; animation:fadeIn .2s ease both; }
.modal-sheet { width:100%; max-height:94dvh; background:var(--surface-solid); border-radius:30px 30px 0 0; padding:0 16px calc(18px + var(--safe-bottom)); box-shadow:0 -20px 60px rgba(0,0,0,.22); overflow:hidden; animation:sheetIn .3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fadeIn { from{opacity:0} }
@keyframes sheetIn { from{transform:translateY(30px); opacity:.4} }
.sheet-handle { width:38px; height:5px; border-radius:99px; background:var(--line); margin:8px auto 3px; }
.modal-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 2px 14px; border-bottom:1px solid var(--line); }
.modal-header h2 { margin:3px 0 0; font-size:1.35rem; letter-spacing:-.03em; }
.modal-body { overflow-y:auto; max-height:calc(94dvh - 94px - var(--safe-bottom)); padding:18px 2px 30px; overscroll-behavior:contain; }

.form-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.field { display:grid; gap:7px; }
.field > span { font-size:.7rem; font-weight:800; color:var(--muted); letter-spacing:.03em; }
.field input,.field textarea,.field select { width:100%; min-height:48px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); padding:12px; font-size:16px; }
.field textarea { min-height:90px; resize:vertical; line-height:1.55; }
.field small { color:var(--muted); line-height:1.4; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.days { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.day-check input { position:absolute; opacity:0; }
.day-check span { min-height:38px; display:grid; place-items:center; border-radius:11px; background:var(--surface-soft); color:var(--muted); font-size:.72rem; font-weight:800; }
.day-check input:checked + span { background:var(--period); color:white; }
.color-row { display:flex; flex-wrap:wrap; gap:8px; }
.color-radio input { position:absolute; opacity:0; }
.color-radio span { display:block; width:32px; height:32px; border-radius:50%; background:var(--c); border:3px solid var(--surface-solid); box-shadow:0 0 0 1px var(--line); }
.color-radio input:checked + span { box-shadow:0 0 0 3px var(--text); }

.recommendation { text-align:center; padding:6px 0; }
.recommendation-icon { width:90px; height:90px; margin:5px auto 16px; display:grid; place-items:center; border-radius:28px; font-size:2.8rem; background:linear-gradient(145deg,var(--period-soft),var(--surface-soft)); box-shadow:inset 0 0 0 1px var(--line); }
.recommendation h3 { margin:0; font-size:1.9rem; letter-spacing:-.045em; }
.recommendation .minutes { margin:8px 0; font-size:.85rem; font-weight:900; color:var(--period); letter-spacing:.12em; }
.reason { display:inline-flex; margin:6px auto 20px; border-radius:99px; padding:7px 12px; background:var(--surface-soft); color:var(--muted); font-size:.74rem; }

.player-overlay { position:fixed; inset:0; z-index:150; min-height:100dvh; background:radial-gradient(circle at 50% -5%,var(--period-soft),transparent 42%),var(--bg); color:var(--text); display:flex; flex-direction:column; padding:calc(var(--safe-top) + 14px) 18px calc(var(--safe-bottom) + 18px); overflow:auto; }
.player-head { display:flex; justify-content:space-between; align-items:center; }
.player-progress { color:var(--muted); font-size:.75rem; font-weight:800; letter-spacing:.08em; }
.player-core { flex:1; min-height:430px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.player-icon { font-size:3.2rem; margin-bottom:14px; }
.player-core h2 { font-size:2rem; margin:0; letter-spacing:-.04em; }
.timer-ring { width:min(72vw,310px); aspect-ratio:1; border-radius:50%; margin:25px auto; display:grid; place-items:center; position:relative; background:conic-gradient(var(--period) var(--timer-progress,0%),var(--surface-soft) 0); box-shadow:0 24px 60px var(--glow); }
.timer-ring::after { content:""; position:absolute; inset:10px; border-radius:50%; background:var(--bg); }
.timer-time { z-index:1; font-size:clamp(3.2rem,16vw,5rem); font-weight:780; letter-spacing:-.075em; font-variant-numeric:tabular-nums; }
.timer-label { z-index:1; display:block; color:var(--muted); font-size:.7rem; letter-spacing:.12em; font-weight:800; margin-top:-15px; }
.player-controls { width:100%; max-width:520px; margin:0 auto; display:grid; gap:10px; }
.player-primary { min-height:58px; border-radius:20px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:white; font-weight:900; font-size:1rem; box-shadow:0 15px 30px var(--glow); }
.player-secondary { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.player-secondary button { min-height:50px; border-radius:16px; background:var(--surface); border:1px solid var(--line); font-size:.72rem; font-weight:800; }

.parser-text { min-height:150px!important; }
.candidate-list { display:grid; gap:10px; margin:14px 0; }
.candidate { display:grid; gap:9px; padding:14px; border-radius:18px; background:var(--surface-soft); border:1px solid var(--line); }
.candidate-top { display:grid; grid-template-columns:44px 1fr 88px; gap:8px; }
.candidate input,.candidate select { min-width:0; width:100%; min-height:42px; border:1px solid var(--line); border-radius:12px; padding:8px; background:var(--surface-solid); font-size:16px; }
.candidate-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.candidate-meta label { display:grid; gap:4px; color:var(--muted); font-size:.62rem; font-weight:750; }

.onboarding { position:fixed; inset:0; z-index:200; background:var(--bg); overflow:auto; padding:calc(var(--safe-top) + 20px) 18px calc(var(--safe-bottom) + 30px); }
.onboarding-inner { max-width:620px; margin:0 auto; min-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 50px); display:flex; flex-direction:column; }
.onboarding-logo { width:min(82vw,380px); height:auto; margin:5vh auto 8px; mix-blend-mode:multiply; }
:root[data-theme="dark"] .onboarding-logo { mix-blend-mode:screen; border-radius:28px; }
.onboarding-copy { text-align:center; margin:auto 0; }
.onboarding-copy h1 { font-size:clamp(2.1rem,10vw,4rem); letter-spacing:-.06em; line-height:1.04; margin:0; }
.onboarding-copy p { color:var(--muted); line-height:1.75; }
.onboarding-step { animation:viewIn .3s ease; }
.step-dots { display:flex; justify-content:center; gap:6px; margin:18px 0; }
.step-dots span { width:7px; height:7px; border-radius:50%; background:var(--line); }
.step-dots span.active { width:22px; border-radius:99px; background:var(--period); }

.balance-list { display:grid; gap:14px; }
.balance-item { display:grid; grid-template-columns:112px 1fr 42px; gap:10px; align-items:center; }
.balance-label { min-width:0; display:flex; align-items:center; gap:7px; font-size:.76rem; font-weight:800; }
.balance-label span:last-child { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.balance-bar { height:9px; border-radius:99px; background:var(--surface-soft); overflow:hidden; }
.balance-bar i { display:block; height:100%; border-radius:inherit; background:var(--bar,var(--accent)); }
.balance-value { text-align:right; font-size:.72rem; font-weight:800; }
.insight-note { display:flex; align-items:flex-start; gap:11px; padding:14px; border-radius:18px; background:var(--period-soft); color:var(--text); font-size:.8rem; line-height:1.5; }
.insight-note span { font-size:1.15rem; }

.stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.stat { min-height:90px; padding:16px; background:var(--surface-soft); border-radius:18px; }
.stat span { color:var(--muted); font-size:.68rem; font-weight:750; }
.stat strong { display:block; font-size:1.5rem; margin-top:7px; letter-spacing:-.04em; }

.calendar-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.calendar-head h3 { margin:0; font-size:1rem; }
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.calendar-grid .dow { text-align:center; color:var(--muted); font-size:.62rem; padding:5px 0; }
.calendar-day { min-width:0; aspect-ratio:1; border-radius:12px; background:var(--surface-soft); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; border:1px solid transparent; }
.calendar-day.empty { visibility:hidden; }
.calendar-day.today { border-color:var(--period); }
.calendar-day.selected { background:var(--period); color:white; }
.calendar-day small { font-size:.55rem; color:inherit; opacity:.72; }
.day-score { width:16px; height:3px; border-radius:99px; background:var(--score,#d8dce5); }
.heatmap-wrap { overflow-x:auto; padding-bottom:6px; }
.heatmap { display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,12px); grid-auto-columns:12px; gap:4px; width:max-content; }
.heat-cell { width:12px; height:12px; border-radius:3px; background:color-mix(in srgb,var(--period) calc(var(--level) * 20%),var(--surface-soft)); border:1px solid var(--line); }

.settings-list { display:grid; gap:10px; }
.setting-row { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 4px; border-bottom:1px solid var(--line); }
.setting-row:last-child { border:0; }
.setting-row strong { display:block; font-size:.84rem; }
.setting-row p { margin:3px 0 0; color:var(--muted); font-size:.69rem; }
.category-chip { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; background:var(--surface-soft); border-radius:14px; }
.category-chip > span { display:flex; align-items:center; gap:8px; font-weight:750; font-size:.8rem; }
.category-dot { width:10px; height:10px; border-radius:50%; background:var(--c); }

.bottom-nav { position:fixed; left:10px; right:10px; bottom:calc(8px + var(--safe-bottom)); z-index:50; min-height:66px; display:grid; grid-template-columns:repeat(5,1fr); align-items:end; padding:6px 6px; border-radius:22px; background:color-mix(in srgb,var(--surface-solid) 88%,transparent); border:1px solid var(--line); box-shadow:0 18px 45px rgba(8,20,60,.2); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
.nav-item { min-width:0; height:50px; border-radius:15px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:transparent; color:var(--muted); }
.nav-item span { font-size:1.05rem; line-height:1; }
.nav-item b { font-size:.58rem; font-weight:800; }
.nav-item.active { color:var(--period); background:var(--period-soft); }
.switch-tab { width:52px; height:52px; align-self:start; justify-self:center; margin-top:-19px; border-radius:50%; background:linear-gradient(135deg,#ffad14,#178bf6 55%,#092ab6); border:4px solid var(--surface-solid); color:white; box-shadow:0 9px 23px var(--glow); font-size:1.3rem; }
.toast { position:fixed; left:50%; bottom:calc(92px + var(--safe-bottom)); transform:translate(-50%,12px); z-index:300; max-width:calc(100vw - 32px); padding:12px 16px; border-radius:14px; background:#07183e; color:white; font-size:.78rem; font-weight:750; opacity:0; pointer-events:none; transition:.28s; box-shadow:0 12px 30px rgba(0,0,0,.22); text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.celebration { position:fixed; inset:0; z-index:260; pointer-events:none; display:none; place-items:center; background:radial-gradient(circle,rgba(255,255,255,.75),transparent 58%); }
.celebration.show { display:grid; animation:celebrate 1.7s ease both; }
.celebration::after { content:"PERFECT DAY"; padding:16px 28px; border-radius:99px; background:linear-gradient(135deg,#061847,#0e62db); color:white; font-size:1rem; font-weight:900; letter-spacing:.15em; box-shadow:0 20px 60px var(--glow); }
.celebration span { position:absolute; width:7px; height:60px; border-radius:99px; background:linear-gradient(#ffb316,#1688fa); transform-origin:50% calc(50vh - 20px); }
.celebration span:nth-child(1){transform:rotate(0deg) translateY(-32vh)} .celebration span:nth-child(2){transform:rotate(72deg) translateY(-32vh)} .celebration span:nth-child(3){transform:rotate(144deg) translateY(-32vh)} .celebration span:nth-child(4){transform:rotate(216deg) translateY(-32vh)} .celebration span:nth-child(5){transform:rotate(288deg) translateY(-32vh)}
@keyframes celebrate { 0%{opacity:0;transform:scale(.9)} 20%,70%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.04)} }

@media (min-width:760px) {
  .main-stage { padding-left:28px; padding-right:28px; }
  .two-col { grid-template-columns:minmax(0,1.35fr) minmax(280px,.8fr); }
  .form-grid { grid-template-columns:repeat(2,1fr); }
  .field.full { grid-column:1/-1; }
  .stat-grid { grid-template-columns:repeat(4,1fr); }
  .modal-backdrop { align-items:center; padding:24px; }
  .modal-sheet { max-width:720px; max-height:88dvh; border-radius:30px; padding-bottom:18px; }
  .modal-body { max-height:calc(88dvh - 94px); }
  .sheet-handle { display:none; }
}

@media (min-width:1020px) {
  .app-shell { display:grid; grid-template-columns:250px minmax(0,1fr); }
  .sidebar { position:sticky; top:0; height:100dvh; display:flex; flex-direction:column; padding:calc(var(--safe-top) + 26px) 18px 22px; border-right:1px solid var(--line); background:var(--surface); }
  .brand-button { min-height:58px; display:flex; align-items:center; gap:11px; background:transparent; text-align:left; padding:6px; }
  .brand-button img { border-radius:13px; box-shadow:0 5px 14px rgba(10,30,90,.13); }
  .brand-button strong { display:block; font-size:.78rem; letter-spacing:.08em; }
  .brand-button small { display:block; color:var(--muted); margin-top:4px; font-size:.6rem; }
  .side-nav { display:grid; gap:7px; margin-top:34px; }
  .side-nav .nav-item { height:52px; flex-direction:row; justify-content:flex-start; gap:13px; padding:0 14px; }
  .side-nav .nav-item b { font-size:.78rem; }
  .side-quote { margin:auto 10px 8px; color:var(--muted); line-height:1.7; font-size:.68rem; }
  .main-stage { padding:38px 34px 50px; }
  .bottom-nav { display:none; }
  .fab { bottom:30px; right:32px; }
  .topbar { margin-bottom:26px; }
}

@media (orientation:landscape) and (max-height:540px) {
  .main-stage { padding-top:calc(var(--safe-top) + 10px); padding-bottom:calc(76px + var(--safe-bottom)); }
  .topbar { min-height:46px; margin-bottom:10px; }
  .topbar h1 { font-size:1.3rem; }
  .hero-time { font-size:2.7rem; }
  .two-col { grid-template-columns:1.15fr .85fr; }
  .player-overlay { flex-direction:row; align-items:center; gap:24px; padding-left:calc(env(safe-area-inset-left,0px) + 22px); padding-right:calc(env(safe-area-inset-right,0px) + 22px); }
  .player-head { position:absolute; top:calc(var(--safe-top) + 10px); left:calc(env(safe-area-inset-left,0px) + 18px); right:calc(env(safe-area-inset-right,0px) + 18px); }
  .player-core { min-height:0; flex:1; }
  .timer-ring { width:min(46vh,240px); margin:10px; }
  .player-icon { font-size:2rem; margin:0; }
  .player-core h2 { font-size:1.35rem; }
  .player-controls { flex:0 0 43%; }
  .modal-sheet { max-height:96dvh; }
}

@media (max-width:360px) {
  .main-stage { padding-left:11px; padding-right:11px; }
  .card { padding:16px; border-radius:22px; }
  .topbar h1 { font-size:1.25rem; }
  .mode-pill { padding:0 9px; }
  .mode-pill b { max-width:58px; }
  .metrics { gap:5px; }
  .metric { padding:10px 7px; }
  .candidate-top { grid-template-columns:40px 1fr; }
  .candidate-top select { grid-column:1/-1; }
  .candidate-meta { grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.001ms!important; }
}