:root {
  --bg:#0F1115; --card:#1C1F26; --raised:#262A33; --text:#F3F4F6; --muted:#9AA0AB; --line:#2E323B;
  --strength:#F5A524; --stretch:#2DD4BF; --relaxed:#7C8290; --danger:#F0645C; --accent:var(--strength);
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --tabs-h:56px; --radius:14px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif; font-size:17px; -webkit-text-size-adjust:100%; overscroll-behavior:none; }
body { min-height:100dvh; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-align:inherit; }
button:disabled { opacity:.35; }
a { color:inherit; text-decoration:none; }
input { font:inherit; color:inherit; }
[hidden] { display:none !important; }
#view { padding:calc(var(--sat) + 12px) 20px calc(var(--tabs-h) + var(--sab) + 24px); max-width:520px; margin:0 auto; }
#view.no-tabs { padding-bottom:calc(var(--sab) + 16px); }
#tabs { position:fixed; left:0; right:0; bottom:0; height:calc(var(--tabs-h) + var(--sab)); padding-bottom:var(--sab); display:flex; background:#14161C; border-top:1px solid var(--line); z-index:10; }
#tabs a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:12px; color:var(--muted); }
#tabs a .icon { font-size:20px; }
#tabs a.active { color:var(--accent); font-weight:600; }

.header { display:flex; align-items:center; justify-content:space-between; min-height:44px; margin-bottom:12px; gap:8px; }
.header h1 { font-size:32px; margin:0; font-weight:700; }
.header .title { font-weight:700; font-size:17px; text-align:center; flex:1; }
.header .link { color:var(--accent); font-size:17px; min-width:64px; min-height:44px; display:flex; align-items:center; }
.header .link.right { justify-content:flex-end; }
.header .plus { font-size:32px; line-height:1; color:var(--accent); min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:flex-end; }
.title-input { flex:1; text-align:center; font-weight:700; font-size:17px; background:none; border:0; outline:none; min-height:44px; min-width:0; border-radius:8px; }
.title-input:focus { background:var(--card); }
.section-label { font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--muted); margin:18px 0 8px; }
.sub { color:var(--muted); font-size:14px; }
.card { background:var(--card); border-radius:16px; padding:16px 18px; margin-bottom:12px; display:block; width:100%; text-align:left; }
.card .row { display:flex; justify-content:space-between; align-items:baseline; }
.card .name { font-size:19px; font-weight:700; }
.card .dur { color:var(--muted); font-variant-numeric:tabular-nums; }
.btn { display:flex; align-items:center; justify-content:center; min-height:48px; border-radius:12px; font-weight:700; font-size:16px; width:100%; text-align:center; }
.btn.primary { background:var(--accent); color:#111; }
.btn.secondary { background:var(--card); color:var(--accent); }
.btn.raised { background:var(--raised); color:var(--accent); }
.text-danger { color:var(--danger); }
.text-link { color:var(--accent); }
.center { text-align:center; }
.block-btn { display:block; margin:0 auto; min-height:44px; padding:0 12px; }
.links { display:flex; gap:12px; margin-top:24px; font-size:14px; align-items:center; flex-wrap:wrap; }
.links .sep { color:var(--muted); }
.notice { background:var(--raised); border-radius:12px; padding:10px 14px; font-size:14px; color:var(--text); margin-bottom:12px; }
.notice.warn { border-left:3px solid var(--danger); }
.empty { color:var(--muted); text-align:center; padding:40px 0; }

.rows { display:flex; flex-direction:column; }
.row-item { display:flex; align-items:center; gap:12px; min-height:56px; padding:6px 0; border-bottom:1px solid var(--line); width:100%; text-align:left; position:relative; background:var(--bg); }
.row-item .handle { color:var(--muted); font-size:20px; width:28px; min-height:44px; display:flex; align-items:center; touch-action:none; cursor:grab; }
.row-item .idx { color:var(--muted); font-size:15px; width:16px; }
.row-item .thumb { width:44px; height:44px; border-radius:10px; background:var(--raised); flex:none; overflow:hidden; }
.row-item .thumb img { width:100%; height:100%; display:block; }
.row-item .label { flex:1; font-size:17px; min-height:44px; display:flex; align-items:center; }
.row-item .label.muted { color:var(--muted); }
.row-item .badge { font-size:12px; font-weight:700; color:var(--stretch); background:var(--raised); border-radius:6px; padding:3px 6px; }
.row-item .time { font-size:16px; font-variant-numeric:tabular-nums; }
.row-item .rest { font-size:13px; color:var(--muted); opacity:.7; width:40px; text-align:right; font-variant-numeric:tabular-nums; }
.row-item .rest.inert { opacity:.3; }
.row-item .chev { color:var(--muted); font-size:20px; min-width:32px; min-height:44px; display:flex; align-items:center; justify-content:flex-end; }
.row-item .chev.text-link { color:var(--accent); font-size:24px; }
.row-item.dragging { opacity:.75; z-index:2; box-shadow:0 8px 24px rgba(0,0,0,.5); background:var(--card); }
.chips { display:flex; gap:8px; margin:8px 0 12px; }
.chip { padding:7px 14px; border-radius:16px; background:var(--card); font-size:14px; min-height:34px; }
.chip.active { background:var(--text); color:#111; font-weight:700; }

.sheet-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:20; }
.sheet { position:fixed; left:0; right:0; bottom:0; background:var(--card); border-radius:24px 24px 0 0; padding:12px 20px calc(var(--sab) + 16px); z-index:21; max-height:88dvh; overflow:auto; max-width:520px; margin:0 auto; }
.sheet .grip { width:40px; height:5px; border-radius:3px; background:var(--line); margin:0 auto 20px; }
.sheet h2 { margin:0 0 4px; font-size:20px; }
.sheet .type { font-size:14px; margin-bottom:16px; color:var(--muted); }
.sheet .card { background:var(--raised); }
.stepper { margin:12px 0 18px; }
.stepper .label { color:var(--muted); font-size:14px; margin-bottom:8px; }
.stepper .ctl { display:flex; align-items:center; justify-content:center; gap:20px; }
.stepper .ctl button { width:56px; height:56px; border-radius:28px; background:var(--raised); font-size:28px; display:flex; align-items:center; justify-content:center; }
.stepper .ctl .val { font-size:34px; font-weight:700; min-width:110px; text-align:center; font-variant-numeric:tabular-nums; }
.stepper .ctl .val.small { font-size:26px; color:var(--muted); }
.stepper .hint { text-align:center; color:var(--muted); font-size:13px; margin-top:8px; }
.figs { display:flex; gap:12px; margin:8px 0 16px; }
.figs .fig { flex:1; }
.figs img { width:100%; border-radius:16px; display:block; background:var(--raised); }
.figs .cap { text-align:center; color:var(--muted); font-size:13px; margin-top:6px; }
.strength { color:var(--strength); }
.stretch { color:var(--stretch); }
.move-row { display:flex; gap:12px; margin:4px 0 12px; }

.session { display:flex; flex-direction:column; min-height:calc(100dvh - var(--sat) - 12px - var(--sab) - 16px); user-select:none; -webkit-user-select:none; }
.session .top { display:flex; justify-content:space-between; align-items:center; min-height:44px; }
.session .top .x { font-size:22px; color:var(--muted); min-width:44px; min-height:44px; display:flex; align-items:center; }
.session .top .where { color:var(--muted); font-size:14px; font-variant-numeric:tabular-nums; }
.bar { height:5px; border-radius:3px; background:var(--raised); overflow:hidden; }
.bar > div { height:100%; background:var(--accent); width:0; border-radius:3px; transition:width .25s linear; }
.bar.big { height:8px; border-radius:4px; margin:10px 40px 0; }
.session h1 { font-size:30px; margin:14px 0 2px; letter-spacing:.02em; }
.session .type { font-size:16px; margin-bottom:4px; color:var(--muted); }
.session .stage { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:space-evenly; cursor:pointer; }
.session .stage img { width:min(46vw, 180px); border-radius:20px; background:var(--card); display:block; }
.session .timer { font-size:84px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; text-align:center; }
.session .timer.huge { font-size:110px; }
.session .cue { color:var(--muted); font-size:14px; text-align:center; min-height:18px; }
.session .next { font-size:14px; text-align:center; margin-top:4px; }
.session .next.big { font-size:18px; font-weight:700; }
.session .controls { display:flex; align-items:center; justify-content:space-between; padding:12px 30px 0; }
.session .controls .side { font-size:26px; color:var(--muted); min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; }
.session .controls .pause { background:var(--card); border-radius:22px; min-width:140px; min-height:44px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.session.rest .stage img { width:min(52vw, 200px); }
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.86); z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; cursor:pointer; }
.overlay .big { font-size:72px; font-weight:700; font-variant-numeric:tabular-nums; }
.overlay .title { font-size:30px; font-weight:700; }
.overlay .sub { color:var(--muted); }
.done { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:calc(100dvh - 60px); gap:10px; }
.done .check { width:108px; height:108px; border-radius:54px; background:var(--accent); color:#111; display:flex; align-items:center; justify-content:center; font-size:56px; font-weight:700; margin-bottom:24px; }
.done h1 { margin:0; font-size:30px; }
.done .btn { position:fixed; left:20px; right:20px; bottom:calc(var(--sab) + 32px); width:auto; max-width:480px; margin:0 auto; }
#toast { position:fixed; left:50%; bottom:calc(var(--tabs-h) + var(--sab) + 20px); transform:translateX(-50%); background:var(--raised); color:var(--text); padding:10px 16px; border-radius:12px; font-size:14px; z-index:40; max-width:90vw; text-align:center; }

/* Plan view: the sync line is pinned to the bottom, above the tab bar */
.plan, .train { display:flex; flex-direction:column; min-height:calc(100dvh - var(--sat) - 12px - var(--tabs-h) - var(--sab) - 24px); }
.sync-host { margin-top:auto; }
.version { margin-top:auto; padding-top:28px; text-align:center; color:var(--muted); font-size:13px; }
.sync-line { padding-top:28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0 12px; min-height:44px; width:100%; font-size:15px; color:var(--muted); text-align:left; }
.sync-line.off, .sync-line.error { color:var(--accent); }
.sync-line .sub { flex-basis:100%; font-size:13px; margin-top:4px; }
.sync-line .chev { color:var(--muted); font-size:18px; }
.cfg-list { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.cfg-row { background:var(--raised); border-radius:14px; padding:12px 16px; width:100%; text-align:left; }
.cfg-row .top { display:flex; align-items:center; gap:10px; }
.cfg-row .fname { font-weight:700; font-size:16px; }
.cfg-row .tag { font-size:12px; font-weight:700; color:var(--stretch); background:var(--card); border-radius:6px; padding:3px 8px; }
.cfg-row .when { margin-left:auto; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.cfg-row .detail { color:var(--muted); font-size:13px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cfg-disconnect { color:var(--muted); font-size:14px; margin-bottom:8px; }