:root{
  --bg:#0f172a;      /* Deep Midnight Blue (default) */
  --panel:#141a2e;
  --text:#e8e9ef;
  --muted:#a9afc7;
  --danger:#ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius:16px;

  /* Single universal accent */
  --contrast:#FFB547;           /* amber */
  --contrast-press:#FFCA78;
  --ink:#0B1020;                 /* dark “ink” used on amber */

  /* Progress ring colors (good contrast) */
  --ring-ink:#6A0DAD;            /* deep purple progress stroke */
  --ring-track:#FFCA78;          /* fallback progress track */

  /* Elements that pull from accent */
  --tile-cta: var(--contrast);
  --circle-bg: var(--contrast);
  --badge-bg: var(--contrast);
  --icon-on-contrast: var(--ink);

  /* Themed pills/dots (defaults for .theme-midnight) */
  --pill-bg:#1e2439;
  --pill-fg:#cfd5e1;
}

/* Background-only theme variations — accent stays the same for all */
.theme-midnight{
  --bg:#0f172a; --panel:#141a2e;
  --pill-bg:#1e2439; --pill-fg:#cfd5e1;
}
.theme-midnight-soft{
  --bg:#1a2442; --panel:#1f2a4e;
  --pill-bg:#233053; --pill-fg:#d6dbee;
}
.theme-warm{
  --bg:#2b2626; --panel:#342d2d;
  --pill-bg:#392f2f; --pill-fg:#e6dbd0;
}
.theme-teal{
  --bg:#1a2b2b; --panel:#203232;
  --pill-bg:#213838; --pill-fg:#cfe6e4;
}

*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html,body{height:100%; margin:0; background:var(--bg); color:var(--text); font-family:system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial;}
.app{min-height:100%; display:flex; flex-direction:column; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); gap:12px;}
header{display:flex; align-items:center; justify-content:space-between;}
h1{font-size:20px; margin:0;}

.grid{display:grid; grid-template-columns:1fr; gap:12px;}
.card{background:var(--panel); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow);}
.row{display:flex; align-items:center; gap:12px;}
.muted{color:var(--muted); font-size:14px;}
.small{font-size:12px; color:#9aa3c7;}
.hidden{display:none !important;}

.button{appearance:none; border:none; background:var(--contrast); color:var(--icon-on-contrast); padding:12px 14px; border-radius:12px; font-weight:800; box-shadow:var(--shadow);}
.button:active{transform:translateY(1px); background:var(--contrast-press);}

/* Chips */
.chips{display:flex; gap:8px; padding:0 2px;}
.chip-btn{
  appearance:none; border:1px solid rgba(255,255,255,.18);
  background:transparent; color:var(--text); font-weight:700;
  border-radius:999px; padding:6px 10px;
}
.chip-btn.active{
  background:rgba(255,255,255,.08);
  border-color:var(--pill-bg);              /* themed */
}

/* Segmented control */
.seg{display:flex; gap:6px;}
.seg-btn{appearance:none; border:1px solid rgba(255,255,255,.2); background:transparent; color:var(--text); font-weight:800; border-radius:10px; padding:6px 10px;}
.seg-btn.active{background:var(--contrast); color:var(--icon-on-contrast); border-color:transparent;}
.seg-btn:active{background:var(--contrast-press);}

/* List view tile */
.tile{cursor:pointer;}
.tile-head{display:flex; align-items:center; justify-content:space-between;}
.routine-badge{width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:var(--badge-bg); color:var(--icon-on-contrast); font-size:22px; font-weight:900;}
.play-btn{width:44px; height:44px; border-radius:10px; background:var(--tile-cta); display:grid; place-items:center; font-size:20px; border:none; color:var(--icon-on-contrast); box-shadow:var(--shadow);}
.play-btn:active{transform:translateY(1px); background:var(--contrast-press);}

.list{display:flex; flex-direction:column; gap:10px;}
.section-title{font-size:14px; font-weight:900; letter-spacing:.02em; color:#cfd4ea; margin:6px 2px;}
.step-row{display:flex; gap:10px; align-items:center;}

/* THEMED: step number pills (with 1px white border for contrast) */
.step-num{
  min-width:28px; height:28px; border-radius:8px;
  background:var(--pill-bg); color:var(--pill-fg);
  font-size:13px; display:grid; place-items:center;
  border: 1px solid rgba(255,255,255,.9);
}

/* Titles & chips inside tiles */
.step-title{font-weight:600;}
.chip{font-size:12px; color:#cbd5e1; background:#1e2335; padding:4px 8px; border-radius:999px;}

/* Streak row */
.streak{display:flex; align-items:center; gap:6px; margin:10px 0 4px;}
.dot{
  width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center; font-size:10px; font-weight:800;
  color:#ffffff;                             /* WHITE letters for readability */
  background:var(--pill-bg);                 /* themed unfilled dot */
  border:1px solid rgba(255,255,255,.15);
}
.dot.filled{background:var(--contrast); color:#ffffff; border-color:transparent;}
.dot.today{background:transparent; color:#ffffff; border-color:var(--contrast);}
.streak-label{font-size:12px; color:var(--muted); margin-left:auto;}

/* Run mode */
.run{position:fixed; inset:0; background:var(--bg); display:none; flex-direction:column;}
.run.visible{display:flex;}
.topmeta{padding:6px 12px 0; text-align:center; font-size:12px; color:#9aa3c7;}
.run-head{display:flex; align-items:center; gap:8px; padding:8px 12px 0;}
.run-title{font-size:20px; font-weight:800; flex:1; text-align:center;}
.hdrBtn{padding:6px 10px; background:transparent; border:none; border-radius:8px; font-weight:800; font-size:18px; color:var(--text);}

.hero{flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:10px 20px; overflow:auto; justify-content:center;}
.hero-title{font-size:28px; font-weight:900; margin-top:6px;}
.emoji-wrap{display:flex; align-items:center; justify-content:center; width:78%; max-width:280px; aspect-ratio:1/1; margin:6px auto;}
/* Native emoji text with faux stroke for separation (used in System pack) */
.emoji{font-size:120px; line-height:1; text-shadow:
  0 0 0 rgba(0,0,0,.85),
  0 2px 0 rgba(0,0,0,.85), 0 -2px 0 rgba(0,0,0,.85), 2px 0 0 rgba(0,0,0,.85), -2px 0 0 rgba(0,0,0,.85),
  1.5px 1.5px 0 rgba(0,0,0,.85), -1.5px 1.5px 0 rgba(0,0,0,.85), 1.5px -1.5px 0 rgba(0,0,0,.85), -1.5px -1.5px 0 rgba(0,0,0,.85); }
.emoji-img{width:70%; max-width:220px; height:auto; display:block;}

/* Numeric timer */
.hero-text{color:#cdd3ea; line-height:1.55; font-size:17px; max-width:520px; padding:0 6px;}
.timer{font-variant-numeric:tabular-nums; font-size:44px; font-weight:900; letter-spacing:1px;}
.timer.warning{color:var(--danger);}
.timer.hidden{display:none;}

/* Controls */
.run-controls{display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:10px 18px 16px;}
.circle-btn{
  position:relative; width:86px; height:86px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--circle-bg); border:none; color:var(--icon-on-contrast);
  box-shadow:var(--shadow); margin:0 auto; font-weight:900;
}
.circle-btn:active{transform:translateY(1px); background:var(--contrast-press);}
.icon-check{font-size:30px; pointer-events:none;}
.icon-svg{width:30px; height:30px; fill:var(--ink); transition:opacity .14s ease;}
.icon-svg.fading{opacity:0;}

/* Progress ring (thicker + glow, deep purple, darker warning red) */
.progress-ring{position:absolute; inset:0; transform:rotate(-90deg); filter: drop-shadow(0 0 4px rgba(0,0,0,.25));}

/* THEMED track with safe fallback */
.progress-bg{
  stroke: var(--ring-track);
  stroke-width:10; fill:none; opacity:.9;
}
@supports (color: color-mix(in srgb, white 50%, black)) {
  .progress-bg{
    /* mix a lighter track from the theme bg for consistency */
    stroke: color-mix(in srgb, var(--bg) 65%, white 35%);
  }
}

.progress-fg{stroke:var(--ring-ink); stroke-width:10; stroke-linecap:round; fill:none; transition:stroke .2s linear;}
.progress-fg.warning{stroke:#dc2626;}      /* darker red at ≤30s */
.progress-fg.overdue{stroke:#ef4444; stroke-dashoffset:0 !important;} /* solid red ring when overdue */

/* Footer */
.footer{display:flex; gap:10px; padding:0 12px 12px;}

/* Completion screen */
.done{position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; text-align:center; padding:20px;}
.done.visible{display:flex;}
.done .panel{background:var(--panel); border-radius:18px; padding:26px; box-shadow:var(--shadow); max-width:420px; transform:scale(.96); animation:pop .28s ease-out forwards;}
.done h2{margin:0 0 8px 0; font-size:26px;}
.done p{margin:0; color:#cdd3ea;}
.celebrate{font-size:56px; margin:8px 0 10px;}
@keyframes pop{ to { transform:scale(1); } }

/* Settings modal */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.5);}
.modal.visible{display:flex;}
.modal .panel{background:var(--panel); border-radius:16px; padding:16px 16px; box-shadow:var(--shadow); width:min(480px, 94vw);}
.row-sb{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.switch{position:relative; width:54px; height:32px; background:var(--pill-bg); border-radius:999px; cursor:pointer;} /* themed off state */
.knob{position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:#cfd6f5; transition:left .18s;}
.switch.on{background:var(--contrast);}
.switch.on .knob{left:25px; background:var(--icon-on-contrast);}

/* Ripple (CSS-only, centered) */
.button, .circle-btn { position: relative; overflow: hidden; }
.button::after, .circle-btn::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:20px; height:20px; border-radius:50%;
  background:rgba(255,255,255,.35);
  transform:scale(0); opacity:0; pointer-events:none;
}
.button:active::after, .circle-btn:active::after{
  animation:ripple .45s ease-out forwards;
}
@keyframes ripple{
  0%{ transform:scale(0); opacity:.35; }
  70%{ transform:scale(10); opacity:.18; }
  100%{ transform:scale(12); opacity:0; }
}

/* Step transitions */
.hero.anim-slide-left    { animation: slideLeft .22s ease both; }
.hero.anim-slide-right   { animation: slideRight .22s ease both; }
.hero.anim-pop           { animation: popIn .18s ease-out both; }
@keyframes slideLeft  { from{ transform:translateX(18px); opacity:0.0; } to{ transform:translateX(0); opacity:1; } }
@keyframes slideRight { from{ transform:translateX(-18px); opacity:0.0; } to{ transform:translateX(0); opacity:1; } }
@keyframes popIn      { from{ transform:scale(.98); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* === Theme Lab (dev only) === */
.theme-lab.hidden { display:none; }
.theme-lab {
  position: fixed; inset: 12px; z-index: 9999;
  background: var(--panel); color: var(--text);
  border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.45);
  padding: 14px; overflow: auto; border: 1px solid rgba(255,255,255,.1);
}
.tlab-top { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.tlab-title { font-weight: 900; font-size: 16px; }
.tlab-close { margin-left:auto; appearance:none; border:none; border-radius:10px;
  background: var(--contrast); color: var(--ink); padding:6px 10px; font-weight:800; }
.tlab-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.tlab-card { background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:10px; }
.tlab-card h4 { margin:0 0 8px 0; font-size:13px; letter-spacing:.02em; }
.tlab-swatches { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.swatch { display:flex; align-items:center; gap:8px; font-size:12px; }
.swatch-box { width:28px; height:22px; border-radius:6px; border:1px solid rgba(255,255,255,.25); }
.swatch-code { opacity:.9; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.tlab-preview { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.preview-pill { min-width:28px; height:28px; border-radius:8px; background:var(--pill-bg);
  color:var(--pill-fg); display:grid; place-items:center; font-weight:800; border:1px solid rgba(255,255,255,.9); }
.preview-chip { padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid var(--pill-bg); font-size:12px; }
.preview-dot  { width:18px; height:18px; border-radius:50%; background:var(--pill-bg); border:1px solid rgba(255,255,255,.2); }
.preview-dot.filled { background: var(--contrast); }
.preview-play { width:44px; height:44px; border-radius:10px; display:grid; place-items:center;
  background: var(--contrast); color: var(--ink); font-weight:900; }
.preview-ring { position:relative; width:44px; height:44px; }
.preview-ring svg { position:absolute; inset:0; transform:rotate(-90deg); }
.preview-ring .bg { stroke: var(--ring-track); stroke-width:8; fill:none; opacity:.9; }
.preview-ring .fg { stroke: var(--ring-ink); stroke-width:8; fill:none; stroke-linecap:round; stroke-dasharray: 110; stroke-dashoffset: 44; }
.tlab-note { font-size:12px; opacity:.75; margin-top:6px; }