/* Rhythm v2 — calm colours, selectable palettes, and curated YouTube library */
:root, html[data-theme="midnight"] {
  --bg:#f5f7fb;--paper:#ffffff;--text:#1d2b3e;--muted:#63748a;
  --faint:#94a1b2;--line:#e3e9f1;--green:#284e7c;--green2:#406b9b;
  --sage:#e8effb;--peach:#f2effd;--sage-dark:#ceddf1;
  --accent:#284e7c;--accent-hover:#1a385d;--accent-soft:#e9f0fb;
  --accent-soft2:#d9e6f7;--accent-ink:#25456b;--accent-muted:#6380aa;
  --ring-track:#d4e0ef;--warm:#fff8f0;--warm-line:#efe3d6;
  --surface-tint:#eef3fc;--input-bg:#fbfcff;--nav-bg:#fbfcff;
  --shadow:0 5px 22px rgba(30,49,81,.025);
}
html[data-theme="plum"] {
  --bg:#f9f7fb;--text:#30263b;--muted:#786a82;--faint:#a99ab3;--line:#eee5f1;
  --green:#67527d;--green2:#80639b;--sage:#f0eaf5;--peach:#faf0f3;--sage-dark:#e6d7ed;
  --accent:#67527d;--accent-hover:#4f3b63;--accent-soft:#f1eaf5;
  --accent-soft2:#e6daed;--accent-ink:#5d4873;--accent-muted:#957fa7;
  --ring-track:#e4daeb;--warm:#fcf6f0;--warm-line:#eee0d8;
  --surface-tint:#f5eef8;--input-bg:#fffaff;--nav-bg:#fdfbff;
}
html[data-theme="terracotta"] {
  --bg:#fbf8f4;--text:#3a2a25;--muted:#8d756a;--faint:#b7a69d;--line:#eee3db;
  --green:#9e5442;--green2:#af6954;--sage:#f7eae2;--peach:#fcf1e8;--sage-dark:#f2dace;
  --accent:#9e5442;--accent-hover:#7b3f31;--accent-soft:#faece5;
  --accent-soft2:#f2dcd1;--accent-ink:#874330;--accent-muted:#bb8570;
  --ring-track:#edd9cf;--warm:#fcf4ec;--warm-line:#efdccf;
  --surface-tint:#f9ebe3;--input-bg:#fffcfa;--nav-bg:#fffcfa;
}
body { color:var(--text);background:var(--bg); }
button:focus-visible,a:focus-visible,textarea:focus-visible,input:focus-visible {outline-color:var(--accent-muted)}
.sidebar {background:var(--nav-bg)}
.brand-mark{background:var(--accent)}
.brand-mark span {background:#fff}
.brand-dot,.page-heading h1 em {color:var(--accent-muted)}
.side-overline,.eyebrow {color:var(--accent-muted)}
.nav-link {color:var(--muted)}
.nav-link:hover,.nav-link.active {background:var(--accent-soft);color:var(--accent-ink)}
.side-quote,.local-pill,.top-date,.page-heading p,.overview-text p,.card-description,.reflection-card p,.account-card p,.edit-day-card p,.settings-panel p,.tip-panel p {color:var(--muted)}
.top-avatar {background:var(--accent-soft2);color:var(--accent-ink)}
.live-dot {background:var(--accent)}
.overview-main {background:var(--surface-tint);border-color:var(--line)}
.stat-header {color:var(--accent-ink)}
.ring-inside {background:var(--surface-tint)}
.ring-inside small {color:var(--muted)}
.stat-kicker,.compact-stat strong small,.stat-note,.practice-category,.subtle-caption,.med-timer-label,.video-creator {color:var(--muted)}
.micro-dots span,.mini-bars span {background:var(--accent-soft)}
.micro-dots span.done,.mini-bars span.done {background:var(--accent)}
.mini-bars span.partial {background:var(--accent-muted)}
.meditation-card{background:#fff}
.movement-card{background:#fff}
.med-icon{background:var(--accent-soft);color:var(--accent)}
.move-icon{background:var(--warm);color:#a77b5b}
.status-chip{background:var(--accent-soft);color:var(--muted)}
.status-chip.is-done{background:var(--accent-soft2);color:var(--accent-ink)}
.med-timer-panel {background:var(--surface-tint);border-color:var(--line)}
.preset,.duration-selector button {border-color:var(--line);color:var(--accent-ink)}
.preset.active,.duration-selector button.selected{background:var(--accent-soft2);border-color:var(--accent-muted);color:var(--accent-ink)}
.btn.dark{background:var(--accent)}
.btn.dark:hover{background:var(--accent-hover)}
.btn.subtle,.btn.complete,.btn.complete.done {background:var(--accent-soft);color:var(--accent-ink)}
.btn.complete:hover {background:var(--accent-soft2)}
.btn.outlined {border-color:var(--line);color:var(--accent-ink)}
.text-link{color:var(--accent)}
.workout-detail {background:var(--warm);border-color:var(--warm-line)}
.workout-detail ul {color:var(--muted)}
.workout-detail li::marker {color:var(--accent-muted)}
.account-card,.tip-panel{background:var(--surface-tint)}
.account-steps div {color:var(--muted)}
.step-number{border-color:var(--accent-muted);color:var(--accent)}
.mood-options button {background:var(--input-bg);border-color:var(--line);color:var(--muted)}
.mood-options button.selected {background:var(--accent-soft);border-color:var(--accent-muted);color:var(--accent-ink)}
.field-label,.settings-panel label:not(.upload-btn){color:var(--accent-ink)}
.reflection-card textarea,.settings-panel input {color:var(--text);background:var(--input-bg);border-color:var(--line)}
.calendar-controls button {color:var(--accent);background:var(--accent-soft)}
.day-cell{border-color:var(--line);color:var(--muted)}
.day-cell.both{background:var(--accent-soft2);color:var(--accent-ink);border-color:var(--accent-muted)}
.day-cell.one{background:var(--warm);border-color:var(--warm-line);color:#9a704f}
.day-cell.selected{outline-color:var(--accent)}
.day-cell.today:after{background:var(--accent)}
.legend-both,.edit-actions .done {background:var(--accent-soft2)}
.legend-one{background:var(--warm)}
.toast{background:var(--accent-hover)}
@media(max-width:680px){
 .mobile-bottom{background:var(--nav-bg);border-top-color:var(--line)}
 .mobile-nav-item.active{color:var(--accent)}
 .topbar{border-bottom-color:var(--line)}
}
/* New video recommendations */
.recommendation-section{margin:0 0 24px}
.recommendation-head {display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}
.recommendation-head h2{font-family:Georgia,serif;font-size:28px;font-weight:400;letter-spacing:-.6px;margin:8px 0 8px}
.recommendation-head p {font-size:12px;line-height:1.65;max-width:560px;margin:0;color:var(--muted)}
.filter-pills{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap}
.filter-pills button{font-size:11px;font-weight:700;border:1px solid var(--line);color:var(--muted);background:#fff;padding:9px 13px;border-radius:100px}
.filter-pills button.active{background:var(--accent);border-color:var(--accent);color:#fff}
.recommended-videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.recommended-video{display:grid;grid-template-columns:145px minmax(0,1fr);gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;padding:10px;min-height:166px;box-shadow:var(--shadow)}
.video-thumbnail{display:block;position:relative;min-height:140px;border-radius:11px;overflow:hidden;background:var(--accent-soft)}
.video-thumbnail img{position:absolute;width:100%;height:100%;object-fit:cover;inset:0}
.play-symbol{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#181d2bb8;color:#fff;border-radius:12px;font-size:15px;width:42px;height:31px;display:grid;place-items:center;padding-left:3px}
.video-length{position:absolute;bottom:8px;right:8px;background:#151515db;color:#fff;font-size:10px;border-radius:5px;padding:4px 6px;font-weight:750}
.video-card-body{min-width:0;display:flex;flex-direction:column;padding:7px 4px 5px 0}
.video-kind{font-size:9px;letter-spacing:1.2px;color:var(--accent-muted);font-weight:800;margin-bottom:7px}
.video-card-body h3{font-size:14px;line-height:1.35;letter-spacing:-.2px;margin:0 0 5px;color:var(--text)}
.video-creator{font-size:11px;margin:0 0 8px}
.video-summary{font-size:11px;line-height:1.48;color:var(--muted);margin:0 0 10px}
.video-actions{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:auto}
.video-actions a{font-size:10px;font-weight:700;color:var(--accent);text-decoration:none}
.video-actions a:hover{text-decoration:underline}
.video-actions button{font-size:10px;border:1px solid var(--line);background:var(--accent-soft);color:var(--accent-ink);border-radius:8px;padding:8px 10px;font-weight:750}
.video-actions button:hover{background:var(--accent-soft2)}
.recommendation-note{font-size:11px;line-height:1.6;color:var(--muted);margin:14px 0 20px}
/* Theme chooser */
.theme-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.theme-option {border:1px solid var(--line);background:var(--input-bg);border-radius:14px;padding:14px;display:flex;gap:10px;align-items:center;text-align:left;color:var(--text);font-size:12px;font-weight:700}
.theme-option.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.theme-sample{width:24px;height:24px;flex-shrink:0;border-radius:50%;box-shadow:inset 0 0 0 4px #ffffffae}
.theme-midnight{background:#284e7c}.theme-plum{background:#67527d}.theme-terracotta{background:#9e5442}
.theme-check{margin-left:auto;display:none;color:var(--accent)}
.theme-option.selected .theme-check{display:block}
@media(max-width:1190px){.recommended-videos{grid-template-columns:1fr}}
@media(max-width:960px){.recommendation-head{align-items:start;flex-direction:column}.recommended-videos{grid-template-columns:1fr}}
@media(max-width:680px){
 .recommended-video{grid-template-columns:120px minmax(0,1fr);gap:10px;padding:8px;min-height:158px}
 .video-thumbnail{min-height:137px}
 .video-card-body{padding:3px 2px 2px 0}
 .video-card-body h3{font-size:12px}
 .video-summary{font-size:10px}
 .video-actions{gap:8px}
 .video-actions a,.video-actions button{font-size:10px}
 .theme-picker{grid-template-columns:1fr}
}
@media(max-width:370px){.recommended-video{grid-template-columns:102px minmax(0,1fr)}.video-thumbnail{min-height:145px}.video-summary{display:none}}

/* Cloudflare D1 sync */
.sync-access { padding: 0 24px 24px; display: grid; gap: 12px; }
.sync-access label { font-weight: 650; font-size: 0.88rem; }
.sync-access input { width: 100%; border-radius: 10px; border: 1px solid var(--border, #d2d7e0); padding: 13px 14px; font: inherit; background: var(--card, #fff); color: var(--text, #1c2535); }
.sync-access input:focus { outline: 2px solid var(--green, #30577f); outline-offset: 2px; }
.sync-status { padding: 12px 14px; border-radius: 10px; background: var(--soft, #e8eff8); color: var(--text, #1d293c); font-size: 0.88rem; line-height: 1.5; overflow-wrap: anywhere; }
.sync-status[data-tone="error"] { background: #fff1eb; color: #85402e; }
.sync-status[data-tone="ok"] { background: #eaf5ee; color: #226040; }
.sync-access .settings-buttons { gap: 8px; flex-wrap: wrap; }
.sync-access .settings-buttons button { min-height: 42px; }
@media(max-width: 640px) { .sync-access { padding: 0 18px 20px; } }