/* ============================================================
   PACER — style.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body { height: 100%; overflow: hidden; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, select, textarea { font: inherit; }
svg { display: block; }

/* ============================================================
   THEME VARIABLES
   ============================================================ */

:root {
  --accent:       #39ff14;
  --accent-dim:   rgba(57,255,20,0.12);
  --accent-glow:  rgba(57,255,20,0.45);
  --accent-text:  #000;
  /* Secondary "depth" tone. Defaults to the primary accent so every existing
     theme is unchanged; themes that want a distinct second color (sage, forest)
     override --accent2. Used for ambient elements: progress fill, done dots,
     pace-card chevrons — while --accent stays the primary action color. */
  --accent2:      var(--accent);
  --bg:           #060d06;
  /* Atmosphere: the radial light-lift behind every screen — one shared
     geometry, per-theme colors. Themes supply --atmo-1 (inner light, mixed
     ~15% toward their accent and nudged brighter) and --atmo-2 (the mid
     falloff at ~half that mix). Defaults resolve to --bg, i.e. a flat
     no-op, so a theme without a pair simply has no atmosphere. */
  --atmo-1:       var(--bg);
  --atmo-2:       var(--bg);
  --bg-gradient:  radial-gradient(125% 80% at 50% 38%, var(--atmo-1) 0%, var(--atmo-2) 45%, var(--bg) 78%);
  --surface:      #0c1a0c;
  --surface2:     #132213;
  --surface3:     #1b2e1b;
  --text:         #e8f5e8;
  --text-muted:   #6a886a;
  --border:       rgba(255,255,255,0.07);
  --ease:         cubic-bezier(.22,1,.36,1);   /* signature easing — gentle ease-out */
  --transition:   180ms var(--ease);
  --shadow-1:     0 2px 10px rgba(0,0,0,.22);  /* resting card elevation (subtle on dark) */
  --shadow-2:     0 8px 24px rgba(0,0,0,.30);  /* lifted / hover elevation */
  --safe-top:     env(safe-area-inset-top,0px);
  --safe-bottom:  env(safe-area-inset-bottom,0px);
}

[data-theme="ember"]  { --accent:#ff4d00; --accent-dim:rgba(255,77,0,.12); --accent-glow:rgba(255,77,0,.45); --accent-text:#fff; }
[data-theme="dusk"]   { --accent:#b44fff; --accent-dim:rgba(180,79,255,.12); --accent-glow:rgba(180,79,255,.45); --accent-text:#fff; }
[data-theme="arctic"] { --accent:#00d4ff; --accent-dim:rgba(0,212,255,.12); --accent-glow:rgba(0,212,255,.45); --accent-text:#000; }
[data-theme="chalk"]  { --accent:#d0d0d0; --accent-dim:rgba(208,208,208,.12); --accent-glow:rgba(208,208,208,.3); --accent-text:#000; }
[data-theme="sage"]   { --accent:#8fbf9f; --accent2:#b8cdb0; --accent-dim:rgba(143,191,159,.14); --accent-glow:rgba(143,191,159,.30); --accent-text:#0c1a12; }
[data-theme="forest"] { --accent:#4ade80; --accent2:#a3e635; --accent-dim:rgba(74,222,128,.14);  --accent-glow:rgba(74,222,128,.38);  --accent-text:#052e16; }

/* Dark mode per theme — each supplies its atmosphere pair, mixed from its own
   accent hue (the venom pair lives on :root scoped to dark, since venom's
   base tokens ARE the :root; it precedes the per-theme rules so they win). */
:root:not([data-mode="light"]) { --atmo-1:#113409; --atmo-2:#0a1e07; }
[data-theme="ember"]:not([data-mode="light"])  { --bg:#0d0804; --atmo-1:#371604; --atmo-2:#1e0d04; --surface:#1c1008; --surface2:#25160c; --surface3:#2e1c12; --text:#f8f0e8; --text-muted:#8a7060; }
[data-theme="dusk"]:not([data-mode="light"])   { --bg:#090610; --atmo-1:#261338; --atmo-2:#150b21; --surface:#120d1e; --surface2:#1a1428; --surface3:#231c32; --text:#f0ecf8; --text-muted:#7a6a92; }
[data-theme="arctic"]:not([data-mode="light"]) { --bg:#04090e; --atmo-1:#06303c; --atmo-2:#04171f; --surface:#0a1420; --surface2:#101d2c; --surface3:#162638; --text:#e8f4f8; --text-muted:#5a7e9a; }
[data-theme="chalk"]:not([data-mode="light"])  { --bg:#080808; --atmo-1:#222222; --atmo-2:#141414; --surface:#141414; --surface2:#1e1e1e; --surface3:#282828; --text:#f0f0f0; --text-muted:#888; }
[data-theme="sage"]:not([data-mode="light"])   { --bg:#121a15; --atmo-1:#2a3c31; --atmo-2:#1c2820; --surface:#1b2620; --surface2:#25332b; --surface3:#2f3f35; --text:#e4ede6; --text-muted:#8aa090; }
[data-theme="forest"]:not([data-mode="light"]) { --bg:#0c1710; --atmo-1:#21402e; --atmo-2:#16291d; --surface:#182c1f; --surface2:#22402f; --surface3:#2d543d; --text:#e8f3ea; --text-muted:#8aa896; }

/* Light mode. Resets the atmosphere pair to flat (var(--bg) resolves against
   each theme's own light bg) so no dark-mode lift ever leaks onto a light
   background; light themes wanting atmosphere re-declare their pair (forest). */
[data-mode="light"] { --bg:#f2faf2; --atmo-1:var(--bg); --atmo-2:var(--bg); --surface:#fff; --surface2:#e8f5e8; --surface3:#daeeda; --text:#0c1a0c; --text-muted:#5a7a5a; --border:rgba(0,0,0,.08); --accent:#1a8a04; --accent-dim:rgba(26,138,4,.12); --accent-glow:rgba(26,138,4,.25); --accent-text:#fff; }
[data-theme="ember"][data-mode="light"]  { --bg:#fdf5f0; --surface:#fff; --surface2:#fce8dc; --surface3:#f8d8c8; --text:#1a0c06; --text-muted:#7a5040; --border:rgba(0,0,0,.08); --accent:#cc2200; --accent-text:#fff; --accent-dim:rgba(204,34,0,.10); --accent-glow:rgba(204,34,0,.25); }
[data-theme="dusk"][data-mode="light"]   { --bg:#f8f4fe; --surface:#fff; --surface2:#ede0fb; --surface3:#e0ccf8; --text:#140c28; --text-muted:#7060a0; --border:rgba(0,0,0,.08); --accent:#7700cc; --accent-text:#fff; --accent-dim:rgba(119,0,204,.10); --accent-glow:rgba(119,0,204,.25); }
[data-theme="arctic"][data-mode="light"] { --bg:#f0f8fc; --surface:#fff; --surface2:#ddf0f8; --surface3:#c8e8f4; --text:#040c14; --text-muted:#406080; --border:rgba(0,0,0,.08); --accent:#0077cc; --accent-text:#fff; --accent-dim:rgba(0,119,204,.10); --accent-glow:rgba(0,119,204,.25); }
[data-theme="chalk"][data-mode="light"]  { --bg:#f4f4f4; --surface:#fff; --surface2:#e8e8e8; --surface3:#d8d8d8; --text:#111; --text-muted:#666; --border:rgba(0,0,0,.08); --accent:#222; --accent-text:#fff; --accent-dim:rgba(34,34,34,.10); --accent-glow:rgba(34,34,34,.20); }
[data-theme="sage"][data-mode="light"]   { --bg:#eef3ef; --surface:#fff; --surface2:#e2ebe4; --surface3:#d4e2d8; --text:#16241b; --text-muted:#5a7064; --border:rgba(0,0,0,.08); --accent:#3d7a52; --accent2:#6a9e7d; --accent-text:#fff; --accent-dim:rgba(61,122,82,.10); --accent-glow:rgba(61,122,82,.22); }
[data-theme="forest"][data-mode="light"] { --bg:#d6e5db; --atmo-1:#f2f8f4; --atmo-2:#e3efe7; --surface:#fff; --surface2:#e7f1ea; --surface3:#d2e4d9; --text:#0e1f15; --text-muted:#4e6e5a; --border:rgba(0,0,0,.08); --accent:#1f9d52; --accent2:#5a9e2a; --accent-text:#fff; --accent-dim:rgba(31,157,82,.10); --accent-glow:rgba(31,157,82,.22); }

@media (prefers-color-scheme: light) {
  :root:not([data-mode="dark"]) { --bg:#f2faf2; --atmo-1:var(--bg); --atmo-2:var(--bg); --surface:#fff; --surface2:#e8f5e8; --surface3:#daeeda; --text:#0c1a0c; --text-muted:#5a7a5a; --border:rgba(0,0,0,.08); --accent:#1a8a04; --accent-dim:rgba(26,138,4,.12); --accent-glow:rgba(26,138,4,.25); --accent-text:#fff; }
  [data-theme="ember"]:not([data-mode="dark"])  { --bg:#fdf5f0; --surface:#fff; --surface2:#fce8dc; --text:#1a0c06; --text-muted:#7a5040; --border:rgba(0,0,0,.08); --accent:#cc2200; --accent-text:#fff; --accent-dim:rgba(204,34,0,.10); --accent-glow:rgba(204,34,0,.25); }
  [data-theme="dusk"]:not([data-mode="dark"])   { --bg:#f8f4fe; --surface:#fff; --surface2:#ede0fb; --text:#140c28; --text-muted:#7060a0; --border:rgba(0,0,0,.08); --accent:#7700cc; --accent-text:#fff; --accent-dim:rgba(119,0,204,.10); --accent-glow:rgba(119,0,204,.25); }
  [data-theme="arctic"]:not([data-mode="dark"]) { --bg:#f0f8fc; --surface:#fff; --surface2:#ddf0f8; --text:#040c14; --text-muted:#406080; --border:rgba(0,0,0,.08); --accent:#0077cc; --accent-text:#fff; --accent-dim:rgba(0,119,204,.10); --accent-glow:rgba(0,119,204,.25); }
  [data-theme="chalk"]:not([data-mode="dark"])  { --bg:#f4f4f4; --surface:#fff; --surface2:#e8e8e8; --text:#111; --text-muted:#666; --border:rgba(0,0,0,.08); --accent:#222; --accent-text:#fff; --accent-dim:rgba(34,34,34,.10); --accent-glow:rgba(34,34,34,.20); }
}

/* Step colors — fixed named palette */
:root {
  --step-red:    #ff4444;
  --step-orange: #ff8c00;
  --step-yellow: #ffd700;
  --step-green:  #39c759;
  --step-teal:   #00c9a7;
  --step-blue:   #4488ff;
  --step-purple: #a044ff;
  --step-pink:   #ff44aa;
  --step-white:  #e8e8e8;
  --step-grey:   #888888;
}

/* ============================================================
   BASE
   ============================================================ */

body { font-family:'Barlow',sans-serif; font-weight:400; background:var(--bg-gradient); color:var(--text); transition:color var(--transition); -webkit-font-smoothing:antialiased; }

/* ============================================================
   SCREENS
   ============================================================ */

.screen { position:fixed; inset:0; display:flex; flex-direction:column; opacity:0; pointer-events:none; transform:translateX(40px); transition:opacity 220ms ease,transform 220ms ease; overflow:hidden; }
.screen.active { opacity:1; pointer-events:all; transform:translateX(0); }
.screen-content { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 16px 16px; }
.screen-footer { padding:12px 16px calc(12px + var(--safe-bottom)); border-top:1px solid var(--border); background:var(--bg); display:flex; gap:8px; }
.screen-hint { font-size:13px; color:var(--text-muted); line-height:1.5; padding:12px 0 16px; }

/* ============================================================
   HEADER
   ============================================================ */

.app-header { display:flex; align-items:center; justify-content:space-between; padding:calc(12px + var(--safe-top)) 16px 12px; border-bottom:1px solid var(--border); background:var(--bg); flex-shrink:0; gap:8px; }
/* Redesigned screens go seamless: header & footer fade into the Forest atmosphere
   instead of hard borders, and content scrolls softly under them. */
#screen-home .app-header, #screen-builder .app-header, #screen-templates .app-header, #screen-settings .app-header { border-bottom:none; background:linear-gradient(to bottom, var(--bg), var(--bg) 55%, transparent); }
#screen-home .screen-footer, #screen-builder .screen-footer { border-top:none; background:linear-gradient(to top, var(--bg), var(--bg) 55%, transparent); }
/* Logo lockup: the ring mark carries the accent; the wordmark stays quiet in
   text color — light and color belong to the mark, not the letters. The mark
   is the run view distilled: ghost tracks, 2/3 time ring, 1/3 rounds ring,
   and the "now" dot at the sweep head (mirrored live by .timer-ring-dot). */
.logo { display:flex; align-items:center; gap:9px; flex-shrink:0; }
.logo-mark { width:26px; height:26px; }
.logo-mark .lm-track  { fill:none; stroke:var(--accent);  opacity:.16; }
.logo-mark .lm-track2 { fill:none; stroke:var(--accent2); opacity:.13; }
.logo-mark .lm-outer  { fill:none; stroke:url(#logo-grad); stroke-linecap:round; }
.logo-mark .lm-inner  { fill:none; stroke:var(--accent2); stroke-linecap:round; opacity:.9; }
.logo-mark .lm-dot    { fill:var(--accent2); }
.logo-word { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:20px; letter-spacing:.13em; color:var(--text); }
.logo-small { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px; letter-spacing:.14em; color:var(--accent); opacity:.7; }
.header-title { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:18px; letter-spacing:.04em; color:var(--text); }
.header-name-input { flex:1; background:none; border:none; border-bottom:1px solid var(--border); border-radius:0; padding:4px 2px; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:17px; color:var(--text); min-width:0; }
.header-name-input::placeholder { color:var(--text-muted); }
.header-name-input:focus { outline:none; border-bottom-color:var(--accent); }
.icon-btn { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:10px; color:var(--text); transition:background var(--transition),color var(--transition); flex-shrink:0; }
.icon-btn svg { width:20px; height:20px; }
.icon-btn:hover,.icon-btn:active { background:var(--accent-dim); color:var(--accent); }
.icon-btn.danger-btn { color:var(--text-muted); }
.icon-btn.danger-btn:hover,.icon-btn.danger-btn:active { background:rgba(255,60,60,.12); color:#ff4444; }
/* Brief flash applied to the save button after a successful save, to reassure
   the user their changes have been persisted. */
.icon-btn.is-saved { background:var(--accent); color:var(--accent-text); }
.text-btn { font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:500; color:var(--text-muted); padding:6px 10px; border-radius:8px; transition:color var(--transition),background var(--transition); }
.danger-text { color:rgba(255,80,80,.8); }
.danger-text:hover { background:rgba(255,60,60,.1); color:#ff4444; }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px; letter-spacing:.06em; padding:13px 20px; border-radius:12px; transition:all var(--transition); flex:1; text-align:center; }
.btn-accent { background:var(--accent); color:var(--accent-text); box-shadow:0 4px 20px var(--accent-glow); }
.btn-accent:hover,.btn-accent:active { filter:brightness(1.1); box-shadow:0 6px 28px var(--accent-glow); transform:translateY(-1px); }
.btn-secondary { background:var(--surface2); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover,.btn-secondary:active { background:var(--surface3); }
.btn-sm { font-size:14px; padding:10px 14px; flex:0 0 auto; }
.btn-large { font-size:18px; padding:16px 32px; flex:2; }
/* Square-ish icon button used in the media-style timer controls
   (prev / restart / pause-play / next).  Hosts inline SVG icons. */
.btn-icon { flex:0 0 auto; min-width:52px; padding:13px 0; line-height:1; }
/* Inline SVG icon inside an icon button.  Inherits the button's text colour
   so the icons re-tint correctly under theme changes. */
.icon-svg { width:22px; height:22px; fill:currentColor; vertical-align:middle; display:inline-block; }
/* The pause/play button is the dominant control: a larger circle that stays calm
   (surface) while playing and fills with the accent when paused, to signal "tap
   to resume". Its sizing lives in the timer-controls section below. */
#btn-pause-resume.is-paused .icon-svg { fill:var(--accent-text); }
.builder-footer { flex-wrap:nowrap; }

/* ============================================================
   HOME — Pace List
   ============================================================ */

/* Floating status pill: absolutely positioned (out of the document flow), so
   sync messages never move the pace list — they hover briefly under the
   header, fade, and vanish. :empty hides it entirely between messages. */
.sync-status { position:absolute; top:calc(58px + var(--safe-top)); left:50%; transform:translateX(-50%); z-index:5; font-size:12px; color:var(--text-muted); background:var(--surface2); border:1px solid var(--border); border-radius:999px; padding:5px 14px; white-space:nowrap; pointer-events:none; box-shadow:var(--shadow-1); transition:opacity .45s var(--ease); }
.sync-status:empty { display:none; }
.sync-status.error { color:#ff6666; }
.sync-status.ok { color:var(--accent); }
.pace-list { padding-bottom:8px; }
.pace-group-title { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); padding:6px 0 8px; }
/* Row that holds the "My Paces" title and the Reorder/Done toggle button. */
.pace-group-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pace-group-header .pace-group-title { padding:20px 0 8px; }
.pace-reorder-toggle { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text); background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:6px 12px; cursor:pointer; transition:background var(--transition),border-color var(--transition),color var(--transition); }
.pace-reorder-toggle:hover, .pace-reorder-toggle:active { background:var(--surface3); border-color:var(--accent-dim); }
.pace-reorder-toggle.is-active { background:var(--accent); color:var(--accent-text); border-color:var(--accent); }
.pace-group-body { display:flex; flex-direction:column; gap:8px; }
.pace-empty { text-align:center; color:var(--text-muted); font-size:15px; padding:48px 24px; line-height:1.7; }
/* Faint dashed ring echoing the timer, so even an empty Home reads as a rhythm app. */
.pace-empty-ring { display:block; width:72px; height:72px; margin:4px auto 20px; opacity:.5; }
.pace-empty-ring circle { fill:none; stroke:var(--accent2); stroke-width:2; stroke-linecap:round; stroke-dasharray:3 7; }
.pace-empty-title { font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:600; color:var(--text); margin-bottom:8px; }

.pace-card { background:linear-gradient(180deg, var(--surface2), var(--surface)); border:1px solid var(--border); border-radius:16px; padding:15px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; text-align:left; width:100%; box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-1); transition:background var(--transition),border-color var(--transition),transform var(--transition),box-shadow var(--transition); }
.pace-card:hover,.pace-card:active { background:linear-gradient(180deg, var(--surface3), var(--surface2)); border-color:var(--accent-dim); transform:translateX(3px) translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), var(--shadow-2); }
/* Fixed minimum width matches the 5-dot case (5 × 9 px + 4 × 4 px = 61 px) so
   pace names line up regardless of how many dots a particular pace renders. */
.pace-card-dots { display:flex; gap:4px; flex-shrink:0; min-width:61px; }
.pace-card-dot { width:9px; height:9px; border-radius:50%; }
.pace-card-info { flex:1; min-width:0; }
.pace-card-name { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:17px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pace-card-meta { font-size:13px; color:var(--text-muted); margin-top:2px; }
.pace-card-arrow { color:var(--accent2); font-size:18px; flex-shrink:0; opacity:.6; }
/* Reorder-mode card: not clickable as a whole, no hover lift. */
.pace-card-reorder { cursor:default; }
.pace-card-reorder:hover, .pace-card-reorder:active { transform:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-1); border-color:var(--border); }
.pace-reorder-arrows { display:flex; gap:6px; flex-shrink:0; }
.reorder-arrow { width:36px; height:36px; border:1px solid var(--border); background:var(--surface2); color:var(--text); border-radius:8px; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--transition),border-color var(--transition); }
.reorder-arrow:hover, .reorder-arrow:active { background:var(--surface3); border-color:var(--accent-dim); }
.reorder-arrow:disabled { opacity:.3; cursor:not-allowed; }
.reorder-arrow.danger:hover, .reorder-arrow.danger:active { background:rgba(255,60,60,.12); color:#ff4444; border-color:rgba(255,60,60,.3); }

/* Quality floor: honour reduced-motion for the screen slide and the card lift. */
@media (prefers-reduced-motion: reduce) {
  .screen { transition:opacity 200ms var(--ease); }
  .pace-card:hover, .pace-card:active, .template-card:hover, .template-card:active { transform:none; }
}

/* ============================================================
   TEMPLATE PICKER
   ============================================================ */


.template-cat-header { display:flex; align-items:center; justify-content:space-between; width:100%; padding:14px 4px 10px; background:none; text-align:left; }
.template-cat-title { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:var(--text); }
.template-cat-chevron { font-size:11px; color:var(--text-muted); transition:transform var(--transition); }

.template-cat-body { padding-bottom:8px; }
.template-cat-body.collapsed { display:none; }

.template-subcategory { margin-bottom:4px; }
.template-sub-header { display:flex; align-items:center; justify-content:space-between; width:100%; padding:8px 10px; background:var(--surface); border:1px solid var(--border); border-radius:10px; text-align:left; transition:background var(--transition),border-color var(--transition); }
.template-sub-header:hover { background:var(--surface2); border-color:var(--accent-dim); }
.template-sub-title { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.template-sub-chevron { font-size:10px; color:var(--text-muted); }
.template-sub-body { padding-top:6px; padding-bottom:6px; }
.template-sub-body.collapsed { display:none; }

.template-blank-btn { display:flex; align-items:center; gap:14px; width:100%; background:var(--surface); border:1.5px dashed var(--border); border-radius:14px; padding:16px; margin-bottom:20px; text-align:left; transition:border-color var(--transition),background var(--transition); }
.template-blank-btn:hover,.template-blank-btn:active { border-color:var(--accent); background:var(--accent-dim); }
.template-blank-icon { font-size:24px; color:var(--accent); font-weight:300; width:36px; text-align:center; flex-shrink:0; }
.template-blank-text { display:flex; flex-direction:column; gap:2px; }
.template-blank-title { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:17px; color:var(--text); }
.template-blank-sub { font-size:13px; color:var(--text-muted); }

.template-category { margin-bottom:20px; }
.template-cards { display:flex; flex-direction:column; gap:8px; }
/* Same material language as the home pace-cards, a touch lighter for the
   denser picker list: surface gradient + inset top highlight + resting shadow,
   hover lifts. */
.template-card { background:linear-gradient(180deg, var(--surface2), var(--surface)); border:1px solid var(--border); border-radius:12px; padding:12px 14px; display:flex; align-items:center; gap:12px; cursor:pointer; width:100%; text-align:left; box-shadow:inset 0 1px 0 rgba(255,255,255,.04), var(--shadow-1); transition:background var(--transition),border-color var(--transition),transform var(--transition),box-shadow var(--transition); }
.template-card:hover,.template-card:active { background:linear-gradient(180deg, var(--surface3), var(--surface2)); border-color:var(--accent-dim); transform:translateX(3px) translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-2); }
/* Fixed-width dots column (4 dots × 7px + 3 × 3px gaps) so titles align
   across cards regardless of dot count — same trick as .pace-card-dots. */
.template-card-dots { display:flex; gap:3px; flex-shrink:0; min-width:37px; }
.template-card-dot { width:7px; height:7px; border-radius:50%; }
.template-card-info { flex:1; min-width:0; }
.template-card-name { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px; color:var(--text); }
.template-card-desc { font-size:12px; color:var(--text-muted); margin-top:2px; }
.template-card-arrow { color:var(--accent); opacity:.5; }

/* ============================================================
   BUILDER
   ============================================================ */

.pace-settings-bar { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--border); background:transparent; flex-shrink:0; }
.pace-setting-label { font-size:13px; color:var(--text-muted); font-weight:500; }
.countdown-opts { display:flex; gap:4px; }
.countdown-opt { padding:4px 10px; border-radius:8px; border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); font-size:12px; font-weight:500; cursor:pointer; transition:all var(--transition); }
.countdown-opt:hover { background:var(--surface3); color:var(--text); }
.countdown-opt.active { background:var(--accent); border-color:var(--accent); color:var(--accent-text); }

.builder-empty { text-align:center; color:var(--text-muted); font-size:14px; padding:32px 16px; line-height:1.7; }

/* Step card */
.step-card { background:linear-gradient(180deg, var(--surface2), var(--surface)); border:1px solid var(--border); border-radius:14px; margin-bottom:10px; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.04), var(--shadow-1); transition:border-color var(--transition),box-shadow var(--transition); }
.step-card:focus-within { border-color:var(--accent-dim); }

.step-card-main { display:flex; align-items:center; gap:10px; padding:12px 12px 8px; }
.step-color-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; cursor:pointer; transition:transform var(--transition); border:2px solid transparent; }
.step-color-dot:hover { transform:scale(1.3); }
.step-name-input { flex:1; background:none; border:none; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:17px; color:var(--text); min-width:0; padding:0; }
.step-name-input::placeholder { color:var(--text-muted); }
.step-name-input:focus { outline:none; }
.step-duration-wrap { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.step-time-input { width:38px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:4px 4px; color:var(--text); font-family:'Barlow',sans-serif; font-variant-numeric:tabular-nums; font-size:13px; text-align:center; -webkit-appearance:none; }
.step-time-input:focus { outline:none; border-color:var(--accent); }
.step-colon { font-family:'Barlow',sans-serif; font-size:13px; color:var(--text-muted); }

.step-card-actions { display:flex; gap:2px; padding:0 10px 10px; flex-wrap:wrap; align-items:center; }
.step-voice-cue-row { display:flex; align-items:center; gap:6px; flex:1; min-width:0; }
.step-voice-icon { font-size:13px; color:var(--text-muted); flex-shrink:0; cursor:pointer; transition:color var(--transition); }
.step-voice-icon:hover { color:var(--accent); }
.step-voice-icon.silent { color:var(--text-muted); opacity:.4; }
.step-voice-input { flex:1; background:none; border:none; border-bottom:1px solid var(--border); font-size:13px; color:var(--text-muted); font-style:italic; padding:2px 2px; min-width:0; }
.step-voice-input::placeholder { color:var(--text-muted); opacity:.5; }
.step-voice-input:focus { outline:none; border-bottom-color:var(--accent); color:var(--text); }
.step-voice-clear { font-size:15px; color:var(--text-muted); padding:0 4px; flex-shrink:0; opacity:.6; }
.step-voice-clear:hover { color:#ff4444; opacity:1; }

.step-secondary-actions { display:flex; gap:4px; margin-left:auto; flex-shrink:0; }
.step-action-btn { width:28px; height:28px; border-radius:7px; background:var(--surface2); border:1px solid var(--border); color:var(--text-muted); font-size:12px; display:flex; align-items:center; justify-content:center; transition:all var(--transition); }
.step-action-btn:hover:not(:disabled) { background:var(--surface3); color:var(--text); }
.step-action-btn:disabled { opacity:.25; cursor:default; }
.step-action-btn.danger { font-size: 18px; }
.step-action-btn.danger:hover:not(:disabled) { background:rgba(255,60,60,.12); color:#ff4444; border-color:rgba(255,60,60,.3); }

/* Extra voice cues within a step */
.step-extra-cues { padding:0 12px 8px; display:flex; flex-direction:column; gap:6px; }
.extra-cue-row { display:flex; align-items:center; gap:6px; }
.extra-cue-offset { width:44px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:4px 6px; color:var(--text); font-family:'Barlow',sans-serif; font-variant-numeric:tabular-nums; font-size:12px; text-align:center; -webkit-appearance:none; flex-shrink:0; }
.extra-cue-offset:focus { outline:none; border-color:var(--accent); }
.extra-cue-label { font-size:11px; color:var(--text-muted); flex-shrink:0; }
.extra-cue-text { flex:1; background:none; border:none; border-bottom:1px solid var(--border); font-size:13px; color:var(--text-muted); font-style:italic; padding:2px 2px; min-width:0; }
.extra-cue-text:focus { outline:none; border-bottom-color:var(--accent); color:var(--text); }
.extra-cue-del { font-size:15px; color:var(--text-muted); padding:0 4px; opacity:.6; }
.extra-cue-del:hover { color:#ff4444; opacity:1; }

.add-voice-cue-btn { font-size:12px; color:var(--text-muted); padding:4px 0 2px 12px; display:block; text-align:left; transition:color var(--transition); }
.add-voice-cue-btn:hover { color:var(--accent); }

/* Color picker popover */
.color-picker { display:flex; gap:6px; flex-wrap:wrap; padding:8px 12px 10px; border-top:1px solid var(--border); }
.color-picker.hidden { display:none; }
.color-swatch { width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform var(--transition),border-color var(--transition); flex-shrink:0; }
.color-swatch:hover { transform:scale(1.2); }
.color-swatch.selected { border-color:var(--text); }

/* Group card */
.group-card { background:linear-gradient(180deg, var(--surface3), var(--surface2)); border:1.5px solid var(--accent-glow); border-radius:14px; margin-bottom:10px; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-1); }
.group-card:focus-within { border-color:var(--accent); }
.group-header { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); }
.group-name-input { flex:1; background:none; border:none; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:15px; color:var(--text); padding:0; letter-spacing:.04em; }
.group-name-input::placeholder { color:var(--text-muted); }
.group-name-input:focus { outline:none; }
.group-repeats-wrap { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.group-repeats-label { font-size:12px; color:var(--text-muted); }
.group-repeats-input { width:36px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:3px 4px; color:var(--text); font-family:'Barlow',sans-serif; font-variant-numeric:tabular-nums; font-size:13px; text-align:center; -webkit-appearance:none; }
.group-repeats-input:focus { outline:none; border-color:var(--accent); }
.group-repeats-x { font-size:12px; color:var(--text-muted); }
.group-body { padding:10px 10px 4px; display:flex; flex-direction:column; gap:8px; }
.group-empty { font-size:13px; color:var(--text-muted); text-align:center; padding:12px 0; }
.group-footer { padding:6px 10px 10px; display:flex; gap:6px; align-items:center; justify-content:space-between; }
.add-to-group-btn { font-size:13px; color:var(--text-muted); padding:4px 0; transition:color var(--transition); }
.add-to-group-btn:hover { color:var(--accent); }
.group-del-btn { font-size:12px; color:var(--text-muted); padding:4px 8px; border-radius:7px; transition:all var(--transition); }
.group-del-btn:hover { color:#ff4444; background:rgba(255,60,60,.1); }

/* Step inside a group — slightly inset */
.group-step { background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.group-step .step-card-main { padding:10px 10px 6px; }
.group-step .step-card-actions { padding:0 8px 8px; }

/* Utility */
.hidden { display: none !important; }

/* End Step toggle */
.step-end-row { display:flex; align-items:center; gap:8px; padding:0 12px 10px; flex-wrap:wrap; }
.step-end-label { font-size:12px; color:var(--text-muted); flex-shrink:0; }
.step-end-toggle { display:flex; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:2px; gap:2px; flex-shrink:0; }
.step-end-btn { font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600; padding:4px 10px; border-radius:6px; color:var(--text-muted); transition:background var(--transition),color var(--transition); }
.step-end-btn.active { background:var(--accent); color:var(--accent-text); }

/* Manual next button on timer screen. visibility (not display) is what
   updateTimerDisplay toggles: the button owns its slot on every step, so the
   ring and labels never shift when a manual step appears — hidden means
   invisible, never absent. */
.btn-manual-next {
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-text);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.06em;
  padding: 20px 40px;
  border-radius: 16px;
  box-shadow: 0 4px 24px var(--accent-glow);
  margin: 16px auto 0;
  width: calc(100% - 48px);
  max-width: 340px;
  transition: all var(--transition);
}
.btn-manual-next:hover, .btn-manual-next:active {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--accent-glow);
}

.timer-header { border-bottom:none; background:transparent; justify-content:center; }
.timer-pace-name { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:15px; letter-spacing:.08em; color:var(--text); text-align:center; }
.timer-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px 24px; text-align:center; }
/* Run-view stability: every slot above and below the ring keeps a constant
   height whether occupied or not — one line each for the phase label and step
   name (ellipsized, never wrapped), a fixed two-line block for cue text — so
   nothing recenters and the ring never moves between steps. */
.timer-phase-label { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; height:16px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.timer-step-name { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:clamp(22px,6vw,28px); letter-spacing:.02em; color:var(--text); margin:0 0 16px; min-height:30px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Circular ring timer — the hero. The SVG is rotated -90° so the depleting arc
   starts at 12 o'clock; the clock overlay sits centered, outside the SVG so it
   isn't rotated. The fill ring uses the primary accent; the arc length is driven
   by stroke-dashoffset in updateTimerDisplay (full at step start → empty at end). */
.timer-ring-wrap { position:relative; width:clamp(200px,64vw,236px); aspect-ratio:1; margin:0 auto 18px; }
/* Wavy decorative rings just outside the progress ring. The path data + opacity
   are generated each frame by the ringFx loop in app.js (only while the timer is
   on screen): subtle and faint at rest, swelling larger and brighter for a beat
   whenever a cue is spoken or a step changes, then easing back to calm. */
.decor-ring-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.decor-ring-svg path { fill:none; stroke-width:1.5; stroke-linejoin:round; }
.decor-1 { opacity:.14; }
.decor-1 path { stroke:var(--accent); }
.decor-2 { opacity:.10; }
.decor-2 path { stroke:var(--accent2); }
.timer-ring { position:relative; z-index:1; width:100%; height:100%; display:block; transform:rotate(-90deg); }
.timer-ring-track { fill:none; stroke:var(--surface2); stroke-width:6; }
/* Inner concentric "rounds" ring — sits just inside the time ring and fills as a
   multi-round group works through its repeats (driven by updateProgress). Uses
   --accent2 so it reads as a companion to the time ring; hidden unless the active
   section is a repeating group. */
.timer-rounds-track { fill:none; stroke:var(--surface3); stroke-width:2.5; opacity:0; transition:opacity var(--transition); }
.timer-rounds-fill  { fill:none; stroke:var(--accent2); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:527.79; stroke-dashoffset:527.79; opacity:0; transition:stroke-dashoffset .26s linear, opacity var(--transition); }
.has-rounds .timer-rounds-track { opacity:.45; }
.has-rounds .timer-rounds-fill  { opacity:1; }
.timer-ring-fill { fill:none; stroke:url(#ring-grad); stroke-width:6; stroke-linecap:round; stroke-dasharray:578.05; stroke-dashoffset:0; filter:drop-shadow(0 0 5px var(--accent-glow)); }
/* Ghost of the just-completed ring: a full circle under the fill arc that
   updateRingFillFrame dissolves while the next step's sweep is already moving,
   so a step boundary reads as an exhale instead of a stop. */
.timer-ring-ghost { fill:none; stroke:url(#ring-grad); stroke-width:6; opacity:0; filter:drop-shadow(0 0 5px var(--accent-glow)); }
/* The "now" dot riding the sweep head — positioned every frame by
   updateRingFillFrame. Slightly wider than the stroke, accent2, no extra glow;
   hidden on manual steps (the orbit comet is its own head). */
.timer-ring-dot { fill:var(--accent2); opacity:0; }
/* Gradient stops re-theme via the accent vars; --accent2 defaults to --accent, so
   on single-accent themes the gradient is simply a solid accent stroke. */
.ring-grad-a { stop-color:var(--accent); }
.ring-grad-b { stop-color:var(--accent2); }
/* Manual (open-ended) step: a short accent arc orbits slowly instead of a full
   ring — an honest "active, no fixed end" signal that implies no % complete. */
.timer-ring-fill.is-manual { stroke-dasharray:150 428; transform-box:fill-box; transform-origin:center; animation:ringOrbit 4s linear infinite; }
@keyframes ringOrbit { to { transform:rotate(360deg); } }
/* Paused: still the screen so the state reads instantly — desaturate the ring and
   drop its glow. The decoration waves are frozen separately, from JS. */
.is-paused .timer-ring-fill, .is-paused .timer-ring-ghost, .is-paused .timer-ring-dot { filter:saturate(.25) brightness(.5); }
.is-paused .timer-ring-fill.is-manual { animation-play-state:paused; }
.timer-clock-overlay { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; }
/* Clock numerals: light-weight tabular Barlow — quiet watch-face precision (the
   ring owns the glow). Tabular figures keep the countdown from jittering as
   digits change width. */
.timer-clock { font-family:'Barlow',sans-serif; font-weight:300; font-variant-numeric:tabular-nums; font-size:clamp(44px,13vw,58px); color:var(--text); line-height:1; letter-spacing:.03em; }
.timer-clock.paused { animation:pausedBlink 1.2s ease-in-out infinite; }
@keyframes pausedBlink { 0%,100%{opacity:.55}50%{opacity:.2} }
.timer-clock-sub { font-size:12px; color:var(--text-muted); margin-top:7px; letter-spacing:.04em; min-height:14px; }

.timer-cue-text { font-size:14px; color:var(--text); opacity:.78; line-height:1.4; max-width:300px; margin:0 auto 16px; height:40px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.timer-overall-progress { display:flex; gap:14px; justify-content:center; align-items:flex-start; flex-wrap:wrap; max-width:300px; margin:0 auto 10px; min-height:12px; }
/* Each section is a cluster of dots; a repeating group's dots are tied together by
   a faint underline that brightens to accent2 while it's the active section. */
.prog-cluster { display:flex; gap:5px; align-items:center; position:relative; padding-bottom:5px; }
.prog-cluster.is-group::after { content:''; position:absolute; left:1px; right:1px; bottom:0; height:1.5px; border-radius:1px; background:var(--text-muted); opacity:.3; transition:background var(--transition),opacity var(--transition); }
.prog-cluster.is-group.is-active-section::after { background:var(--accent2); opacity:.7; }
.overall-dot { width:7px; height:7px; border-radius:50%; background:var(--surface3); transition:background var(--transition); }
.overall-dot.done { background:var(--accent2); opacity:.55; }
.overall-dot.active { background:var(--accent); }
/* Fallback for long ungrouped paces (> 24 steps): a compact count + slim line. */
.prog-count { font-family:'Barlow',sans-serif; font-variant-numeric:tabular-nums; font-size:13px; color:var(--text-muted); letter-spacing:.04em; text-align:center; width:100%; margin-bottom:6px; }
.prog-line { width:100%; max-width:240px; height:3px; border-radius:2px; background:var(--surface3); overflow:hidden; }
.prog-line-fill { width:0; height:100%; background:var(--accent); border-radius:2px; transition:width .26s linear; }
.timer-next { font-size:12px; color:var(--text-muted); opacity:.7; letter-spacing:.02em; height:15px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Bottom control bar: a 3-column grid (side | pause | side) puts the enlarged
   pause in the centre column so it sits dead-centre on screen; the side groups
   hug it (left right-aligned, right left-aligned). prev/restart sit left; next +
   the ghost End sit right. */
.timer-controls { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding:12px 16px calc(16px + var(--safe-bottom)); background:transparent; flex-shrink:0; }
.timer-side { display:flex; align-items:center; gap:10px; }
.timer-side-left  { justify-content:flex-end; }
.timer-side-right { justify-content:flex-start; }
/* Enlarged primary control — dominance through size (calm) while playing; the
   accent fill when paused comes from #btn-pause-resume.is-paused above. */
#btn-pause-resume { width:64px; height:64px; min-width:64px; padding:0; border-radius:50%; background:var(--surface3); border:1px solid var(--border); color:var(--text); box-shadow:0 2px 12px rgba(0,0,0,.22); }
#btn-pause-resume .icon-svg { width:26px; height:26px; }
#btn-pause-resume.is-paused { background:var(--accent); border-color:var(--accent); box-shadow:0 4px 22px var(--accent-glow); }
/* End/stop — ghost square, calm and muted, set off at the trailing edge; flushes
   to the danger red only on press (the existing destructive semantic). The
   confirm dialog remains the real safeguard. */
.btn-stop { margin-left:6px; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--border); color:var(--text-muted); transition:color var(--transition),border-color var(--transition),background var(--transition); }
.btn-stop .icon-svg { width:18px; height:18px; fill:currentColor; }
.btn-stop:hover, .btn-stop:active { color:#ff5a5a; border-color:rgba(255,90,90,.4); background:rgba(255,80,80,.10); }

/* ============================================================
   COMPLETE
   ============================================================ */

.complete-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 32px calc(40px + var(--safe-bottom)); text-align:center; gap:16px; }
.complete-check { font-size:72px; color:var(--accent); text-shadow:0 0 40px var(--accent-glow); animation:popIn .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes popIn { from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1} }
.complete-title { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:32px; letter-spacing:.04em; color:var(--text); }
.complete-name { font-size:16px; color:var(--text-muted); }
.complete-time { font-family:'Barlow',sans-serif; font-weight:300; font-variant-numeric:tabular-nums; font-size:28px; color:var(--accent); }
.complete-actions { display:flex; gap:12px; width:100%; margin-top:16px; }

/* ============================================================
   SETTINGS
   ============================================================ */

.settings-section { padding:20px 0; border-bottom:1px solid var(--border); }
.settings-section:last-child { border-bottom:none; }
.settings-heading { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); margin-bottom:16px; }
.settings-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px; }
.settings-row-col { flex-direction:column; align-items:flex-start; }
.settings-label { font-size:15px; color:var(--text); }
.settings-note { font-size:13px; color:var(--text-muted); line-height:1.5; margin-bottom:14px; }
.form-group { margin-bottom:14px; }
.form-label { display:block; font-size:13px; font-weight:500; color:var(--text-muted); margin-bottom:6px; }
.form-input { width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; color:var(--text); font-size:16px; transition:border-color var(--transition),box-shadow var(--transition); -webkit-appearance:none; }
.form-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.segmented-control { display:flex; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:3px; gap:2px; }
.seg-btn { font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600; letter-spacing:.04em; padding:6px 14px; border-radius:8px; color:var(--text-muted); transition:background var(--transition),color var(--transition); }
.seg-btn.active { background:var(--accent); color:var(--accent-text); }
.theme-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.theme-swatch { display:flex; align-items:center; gap:7px; font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600; padding:8px 14px; border-radius:10px; background:var(--surface); border:1.5px solid var(--border); color:var(--text-muted); transition:all var(--transition); }
.theme-swatch.active { border-color:var(--accent); color:var(--text); background:var(--accent-dim); }
.swatch-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.api-status { font-size:13px; margin-top:10px; min-height:18px; }
.api-status.ok { color:var(--accent); }
.api-status.error { color:#ff6666; }

/* ============================================================
   PHASE TRANSITION
   ============================================================ */

/* On a new segment, only the changing labels gently settle into place — the
   ring, time, controls and overall frame stay constant, so short (breathing)
   steps don't blink the whole UI out and back every few seconds. */
@keyframes stepSettle { from{transform:translateY(4px)} to{transform:translateY(0)} }
.step-change { animation:stepSettle .28s cubic-bezier(.22,1,.36,1) both; }

/* ============================================================
   MODAL DIALOG (themed confirm)
   ============================================================ */

.modal-overlay { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px calc(24px + var(--safe-bottom)); background:rgba(0,0,0,.55); }
.modal-overlay.open { display:flex; animation:modalFade .16s ease both; }
@keyframes modalFade { from{opacity:0} to{opacity:1} }
.modal-card { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:24px 22px 20px; width:100%; max-width:340px; text-align:center; box-shadow:0 16px 48px rgba(0,0,0,.4); animation:modalPop .22s cubic-bezier(.34,1.4,.64,1) both; }
@keyframes modalPop { from{opacity:0; transform:scale(.94) translateY(8px)} to{opacity:1; transform:scale(1) translateY(0)} }
.modal-message { font-size:16px; line-height:1.5; color:var(--text); margin-bottom:22px; }
.modal-actions { display:flex; gap:10px; }
.modal-actions .btn { flex:1; }
.btn-danger { background:#e5484d; color:#fff; box-shadow:0 4px 20px rgba(229,72,77,.3); }
.btn-danger:hover, .btn-danger:active { filter:brightness(1.08); box-shadow:0 6px 26px rgba(229,72,77,.4); transform:translateY(-1px); }