/* tipjarx skin — maps the shared --sx-* contract onto tipjarx's own identity.
   Loaded AFTER core.css on every browsing shell (landing, dashboard); the overlay
   keeps its own style.css.

   Identity: CANDY SHOP — bright, light, bubblegum-fun. A warm cream/pink base washed
   with VIVID candy blobs (hot pink, sky cyan, sunny lemon, mint), soft white cards that
   float on colored shadows (no hard "AI boxes"), chunky rounded Baloo headings, pill
   everything. LIGHT, not dark — the whole page reads sweet-shop, including the StrmrX
   header + footer (re-skinned light for tipjarx's pages only). Motion personality
   `playful` is declared on <html data-motion> (see index.html).
   Font @import stays here per the core.css convention. */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  /* tipjarx candy palette (app-specific CSS may use these directly) */
  --pink:#ff2e8b;       /* hot bubblegum — the star */
  --pink-2:#ff6fb3;     /* softer pink */
  --pink-soft:#ffd6e8;  /* pale pink wash */
  --cyan:#10c4e6;       /* bright sky aqua */
  --cyan-soft:#c6f3fb;
  --lemon:#ffc62e;      /* sunny yellow */
  --lemon-soft:#fff0bf;
  --mint:#2fd99a;       /* fresh mint */
  --mint-soft:#c7f6e4;
  --grape:#7a2fd6;      /* deep violet — contrast + gradients */
  --ink:#45134f;        /* deep grape — body text on light */
  --cream:#fff7f1;      /* warm light base tone */

  /* Map tipjarx identity onto the shared chrome. */
  --sx-accent:var(--pink);
  --sx-accent2:var(--cyan);
  --sx-accent-ink:#ffffff;                 /* white text on the bright pink button */
  --sx-accent-hover:#ff499c;
  --sx-accent-soft:#ffe7f2;                /* pale pink for .on / selected states */

  --sx-bg:#fff3f8;                          /* bright light base */
  --sx-surface:#ffffff;                     /* white candy cards */
  --sx-surface2:#fff5fa;                    /* faint pink inner surface */
  --sx-border:#ffdcec;                      /* soft pink hairline */
  --sx-border2:#ffc6de;

  /* SINGLE SOURCE for every card / control surface. All the cards, tiles, pills, buttons
     and the color-mix soft-fill bases below derive from --card, so dark mode is one flip
     (see [data-theme="dark"]) instead of chasing a hardcoded #fff through 15 rules. */
  --card:#ffffff;

  --sx-text:var(--ink);
  --sx-muted:#9a73b4;
  --sx-muted2:#7a4f98;
  --sx-faint:#c7a6db;

  /* candy is round + soft-shadowed, not bordered boxes */
  --sx-radius:26px;
  --sx-radius-sm:16px;
  /* floating candy shadow: a warm pink lift + a cool cyan kiss (no hard border needed) */
  --sx-shadow:0 22px 50px -26px rgba(255,46,139,.40),0 8px 20px -12px rgba(16,196,230,.24);
  --candy-card-shadow:0 26px 56px -28px rgba(255,46,139,.42),0 10px 24px -14px rgba(16,196,230,.26),
    inset 0 0 0 1px rgba(255,255,255,.7);

  /* a happier, bouncier display voice for headings */
  --font-display:'Baloo 2','Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* bright candy backdrop hues */
  --sx-glow-1:var(--pink);
  --sx-glow-2:var(--cyan);

  /* the signature candy gradients, reused everywhere */
  --candy:linear-gradient(90deg,var(--cyan),var(--pink) 52%,var(--lemon));
  --candy-diag:linear-gradient(135deg,var(--pink),var(--grape) 48%,var(--cyan));
}

/* The [hidden] attribute must win over any component's display rule. */
[hidden]{display:none!important}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT CANDY BACKDROP — override the family dark aurora with a bright sweet-shop wash:
   a warm cream/pink gradient lit by vivid candy blobs in the corners. Unlayered, so it
   wins over core.css's @layer backdrop. Suppressed on overlay shells by core already.
   ══════════════════════════════════════════════════════════════════════════════ */
body{background:var(--sx-bg)}
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(44% 42% at 6% -2%, color-mix(in srgb,var(--pink) 46%,transparent), transparent 60%),
    radial-gradient(42% 42% at 99% 2%, color-mix(in srgb,var(--cyan) 42%,transparent), transparent 60%),
    radial-gradient(46% 46% at 50% 106%, color-mix(in srgb,var(--lemon) 40%,transparent), transparent 62%),
    radial-gradient(40% 44% at 102% 104%, color-mix(in srgb,var(--mint) 34%,transparent), transparent 62%),
    radial-gradient(38% 40% at -2% 102%, color-mix(in srgb,var(--grape) 24%,transparent), transparent 62%),
    linear-gradient(168deg,#fff2f8 0%,#fff7ef 46%,#eafbff 100%);
  background-color:#fff4f1;
}
/* faint sugar-sprinkle dots, very light on the bright base */
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle, color-mix(in srgb,var(--grape) 10%,transparent) 1px, transparent 1.6px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 18%, #000 0%, transparent 82%);
          mask-image:radial-gradient(90% 70% at 50% 18%, #000 0%, transparent 82%);
  opacity:.4;
}

/* inputs: light scheme on the candy theme (core ships color-scheme:dark) */
input,select,textarea{background:var(--card);color:var(--sx-text);border:1.5px solid var(--sx-border);
  color-scheme:light;border-radius:12px}
input:focus,select:focus,textarea:focus{border-color:var(--pink);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--pink) 15%,transparent)}
::-webkit-scrollbar-track{background:var(--sx-surface2)}
::-webkit-scrollbar-thumb{background:var(--pink-2)}

/* ══════════════════════════════════════════════════════════════════════════════
   FAMILY CHROME, RE-SKINNED LIGHT (tipjarx pages only) — the hub header (.sxh) + footer
   (.sx-famfoot) ship dark and scope their own dark tokens inline on the element; we
   override those tokens to candy-light so the WHOLE page is bright. !important beats the
   inline scope. The "by StrmrX" X stays brand orange (hardcoded in the layout, by law).
   ══════════════════════════════════════════════════════════════════════════════ */
.sxh{
  --sx-bg:#fff2f8!important; --sx-surface:#ffffff!important; --sx-surface2:#fff2f8!important;
  --sx-text:var(--ink)!important; --sx-muted:#9a73b4!important; --sx-muted2:#6f3f90!important;
  --sx-border:#ffd3e6!important; --sx-accent:var(--pink)!important; --sx-accent2:var(--cyan)!important;
  color:var(--ink)!important;
  background:color-mix(in srgb,#ffffff 80%,var(--pink-soft))!important;
  box-shadow:0 10px 30px -18px rgba(255,46,139,.5)!important;
}
.sxh .sxh-item:hover{background:color-mix(in srgb,var(--pink) 12%,transparent)!important}
.sx-famfoot{
  --sx-bg:#fff2f8; --sx-surface:#ffffff; --sx-text:var(--ink); --sx-muted:#9a73b4; --sx-border:#ffd3e6;
  color:var(--ink);
  background:color-mix(in srgb,#ffffff 72%,var(--pink-soft))!important;
  border-top:1px solid var(--sx-border);
}
.sx-famfoot p,.sx-famfoot .sx-famfoot-word{color:var(--ink)}

/* ── page scaffold ──────────────────────────────────────────────────────────── */
.wrap{max-width:var(--sx-page-max);margin:0 auto;padding:0 20px}
.page{max-width:820px;margin:0 auto;padding:0 20px 80px}

/* Headlines wear the rounder display face. */
.hero h1,.hero-copy h1{font-family:var(--font-display)}

/* hero (landing) */
.hero{text-align:center;padding:72px 20px 44px}
.hero h1{font-size:clamp(56px,10vw,96px);font-weight:800;letter-spacing:-2px;line-height:.95;margin-bottom:16px;
  color:var(--ink)}
.hero h1 .x{background:var(--candy-diag);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .tag{font-size:clamp(16px,2.6vw,21px);color:var(--sx-muted2);max-width:560px;margin:0 auto 32px;line-height:1.5}
.hero .cta{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* section heads */
.sec-head{display:flex;align-items:baseline;gap:10px;margin:40px 0 16px}
.sec-head h2{font-size:24px;font-weight:800;letter-spacing:-.3px;color:var(--ink);font-family:var(--font-display)}
.sec-head .hint{font-size:13px;color:var(--sx-muted)}

/* demo cards grid (landing) */
.demos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.demos{grid-template-columns:1fr}}
.demo-card{display:block;padding:28px 20px;text-align:center;color:var(--ink);background:var(--card);border:0;
  box-shadow:var(--sx-shadow)}
.demo-card .emoji{font-size:48px;display:block;margin-bottom:10px;
  filter:drop-shadow(0 8px 16px color-mix(in srgb,var(--pink) 40%,transparent))}
.demo-card b{font-size:18px;display:block}
.demo-card span{display:block;color:var(--sx-muted);font-size:13px;margin-top:4px}
.demo-card{transition:transform var(--sx-dur-base) var(--sx-spring),box-shadow var(--sx-dur-base) var(--sx-ease)}
.demo-card:hover{transform:translateY(-5px);box-shadow:0 30px 60px -26px rgba(255,46,139,.5)}

/* ══════════════════════════════════════════════════════════════════════════════
   DASHBOARD — bright, full-bleed, de-boxed. A big live-preview HERO (the real overlay
   on a candy stage) then controls flowing edge-to-edge in soft floating cards.
   ══════════════════════════════════════════════════════════════════════════════ */
.dash-page{max-width:none;margin:0;padding:14px clamp(18px,3.4vw,64px) 100px}
/* The hub layout tags the main content .sx-body and caps it at --sx-body-max (~1120px)
   for cross-app consistency, centering it in a narrow band. tipjarx goes FULL WIDTH: kill
   that cap so the live-preview hero + control grid fan out across the whole screen.
   ID+class+!important beats the injected .sx-body rule. */
:root{--sx-body-max:100%}
#dash.dash-page,.sx-body{max-width:none!important;margin:0!important;width:auto!important}

/* ── HERO: the live preview, de-boxed ── */
.hero-preview{margin:18px 0 34px}
.hero-stage{position:relative;width:100%;max-width:1200px;margin-inline:auto;aspect-ratio:16/9;min-height:380px;
  border-radius:34px;overflow:hidden;isolation:isolate;
  /* bright candy stage so the transparent overlay reads on colour, with head/foot room */
  background:
    radial-gradient(60% 72% at 50% 44%, color-mix(in srgb,#fff 80%,var(--cyan-soft)), transparent 74%),
    radial-gradient(50% 60% at 82% 12%, color-mix(in srgb,var(--cyan) 30%,transparent), transparent 70%),
    radial-gradient(50% 60% at 16% 90%, color-mix(in srgb,var(--lemon) 26%,transparent), transparent 70%),
    linear-gradient(160deg,#fff0f8,#eafbff);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 30px 60px -30px rgba(255,46,139,.4)}
.hero-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:1;background:transparent}
/* "Live preview" tag, parked in the stage's bottom-left corner */
.hero-stage .stage-tag{position:absolute;left:18px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--candy-diag);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--pink) 70%,transparent)}
.hero-stage .stage-tag::before{content:'';width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.9);animation:livedot 1.6s var(--sx-ease-in-out) infinite}
@keyframes livedot{50%{opacity:.35;transform:scale(.7)}}

/* action strip under the hero */
.hero-bar{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:20px}
.hero-copy{min-width:min(280px,100%)}
.hero-copy h1{font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-1px;line-height:1;color:var(--ink)}
.hero-copy p{color:var(--sx-muted2);margin-top:8px;max-width:480px;font-size:14.5px;line-height:1.5}
.hero-actions{margin-left:auto;display:flex;flex-direction:column;gap:12px;min-width:min(480px,100%);flex:1 1 400px}

/* overlay URL box */
.url-box{display:flex;gap:8px;align-items:stretch}
.url-box input{font-family:var(--sx-mono);font-size:13px}
.url-note{font-size:12px;color:var(--sx-muted);margin-top:10px;line-height:1.5}
.url-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.save-state{font-size:12px;color:var(--sx-muted);font-weight:700}
.save-state.dirty{color:var(--lemon)}
.save-state.saved{color:var(--mint)}

/* ── overlays switcher (multi-jar) ── */
.overlays-bar{display:flex;flex-direction:column;gap:8px}
.overlays-head{display:flex;align-items:baseline;gap:9px}
.ov-title{font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--sx-muted2)}
.ov-count{font-size:11px;font-weight:700;color:var(--sx-muted);
  background:color-mix(in srgb,var(--pink) 10%,var(--card));padding:2px 9px;border-radius:999px}
.overlays-list{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ov-pill{display:inline-flex;align-items:center;gap:2px;border:1.5px solid var(--sx-border);
  background:var(--card);border-radius:999px;padding:3px 4px 3px 4px;
  box-shadow:0 8px 18px -14px rgba(255,46,139,.5);
  transition:transform var(--sx-dur-fast) var(--sx-spring),border-color var(--sx-dur-fast) var(--sx-ease),background var(--sx-dur-fast) var(--sx-ease)}
.ov-pill:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pink) 50%,var(--sx-border))}
.ov-pill.on{border-color:var(--pink);background:var(--sx-accent-soft)}
.ov-pill.new{border-style:dashed}
.ov-pill .ov-name{border:0;background:none;font:inherit;font-weight:700;font-size:13px;color:var(--ink);
  cursor:pointer;padding:6px 12px;border-radius:999px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-pill.on .ov-name{cursor:text}
.ov-pill .ov-edit,.ov-pill .ov-del{border:0;background:none;cursor:pointer;font-size:12px;line-height:1;
  width:24px;height:24px;border-radius:50%;color:var(--sx-muted2);
  transition:background var(--sx-dur-fast) var(--sx-ease),color var(--sx-dur-fast) var(--sx-ease),transform var(--sx-dur-fast) var(--sx-spring)}
.ov-pill .ov-edit:hover{background:color-mix(in srgb,var(--cyan) 18%,var(--card));color:var(--grape)}
.ov-pill .ov-del:hover{background:color-mix(in srgb,var(--sx-danger) 18%,var(--card));color:var(--sx-danger);transform:scale(1.08)}
.ov-pill .ov-rename{font:inherit;font-weight:700;font-size:13px;color:var(--ink);width:150px;
  border:1.5px solid var(--pink);background:var(--card);border-radius:999px;padding:5px 11px;outline:none}
.ov-add{border:1.5px dashed color-mix(in srgb,var(--pink) 45%,var(--sx-border));background:none;
  color:var(--sx-muted2);font:inherit;font-weight:800;font-size:12.5px;cursor:pointer;
  padding:8px 14px;border-radius:999px;
  transition:transform var(--sx-dur-fast) var(--sx-spring),border-color var(--sx-dur-fast) var(--sx-ease),color var(--sx-dur-fast) var(--sx-ease),background var(--sx-dur-fast) var(--sx-ease)}
.ov-add:hover{transform:translateY(-2px);border-color:var(--pink);color:var(--pink);background:color-mix(in srgb,var(--pink) 7%,var(--card))}
.ov-add:active{transform:scale(.96)}

/* ── branded confirm modal (replaces native confirm/prompt) ── */
.ov-modal-back{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--ink) 42%,transparent);backdrop-filter:blur(5px);
  opacity:0;transition:opacity var(--sx-dur-base) var(--sx-ease-out)}
.ov-modal-back.in{opacity:1}
.ov-modal{width:min(380px,calc(100vw - 40px));background:var(--card);border-radius:22px;
  padding:24px 24px 20px;box-shadow:0 30px 80px -24px rgba(130,20,90,.5),inset 0 0 0 1px rgba(255,255,255,.6);
  transform:scale(.92) translateY(10px);
  transition:transform var(--sx-dur-base) var(--sx-spring),opacity var(--sx-dur-base) var(--sx-ease-out)}
.ov-modal-back.in .ov-modal{transform:none}
.ov-modal p{margin:0 0 20px;color:var(--ink);font-weight:600;font-size:15px;line-height:1.5}
.ov-modal-actions{display:flex;gap:10px;justify-content:flex-end}
.ov-danger{background:var(--sx-danger);border-color:transparent;color:#fff}
.ov-danger:hover{background:#ef5a5a;border-color:transparent;color:#fff}

/* ── control grid — fills the full width ── */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:24px;align-items:start}
.store-card{grid-column:1/-1}

.card-pad{padding:26px 26px 28px}
.card-title{font-size:18px;font-weight:800;letter-spacing:-.2px;color:var(--ink);
  margin-bottom:18px;display:flex;align-items:center;gap:11px;font-family:var(--font-display)}
/* a round candy chip holds each card's emoji */
.card-title .ico{flex:0 0 auto;width:38px;height:38px;border-radius:14px;display:grid;place-items:center;font-size:20px;
  background:color-mix(in srgb,var(--pink) 14%,var(--card));box-shadow:inset 0 0 0 1px rgba(255,46,139,.15)}

.form-row{margin-bottom:20px}
.form-row:last-child{margin-bottom:0}
.field span{color:var(--sx-muted2);font-weight:700}

/* soft white candy cards — no hard border, they float on colour */
.sx-card{background:var(--card);border:0;border-radius:var(--sx-radius);box-shadow:var(--candy-card-shadow)}

/* ── fill-style tiles (image-based: each tile shows its real vessel art) ── */
.mode-pick{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mode-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px 14px;
  border:2px solid transparent;border-radius:20px;background:var(--card);cursor:pointer;color:var(--ink);
  font-weight:800;font-size:14px;position:relative;overflow:hidden;
  box-shadow:0 12px 26px -16px rgba(255,46,139,.3);
  transition:transform var(--sx-dur-fast) var(--sx-spring),border-color var(--sx-dur-fast) var(--sx-ease),
    box-shadow var(--sx-dur-fast) var(--sx-ease),background var(--sx-dur-fast) var(--sx-ease)}
.mode-tile .emoji{font-size:34px;line-height:1;transition:transform var(--sx-dur-base) var(--sx-spring)}
.mode-tile img.vart{width:62px;height:62px;object-fit:contain;
  filter:drop-shadow(0 8px 12px rgba(255,46,139,.28));transition:transform var(--sx-dur-base) var(--sx-spring)}
.mode-tile:hover{transform:translateY(-3px);box-shadow:0 20px 36px -18px rgba(255,46,139,.45)}
.mode-tile:hover .emoji,.mode-tile:hover img.vart{transform:scale(1.1) rotate(-3deg)}
.mode-tile:active{transform:scale(var(--sx-press-scale))}
.mode-tile.on{border-color:var(--pink);background:color-mix(in srgb,var(--pink) 5%,var(--card));
  box-shadow:0 16px 34px -16px color-mix(in srgb,var(--pink) 70%,transparent)}
.mode-tile.locked{opacity:.55;filter:saturate(.6)}
.mode-tile.locked:hover{transform:translateY(-3px);opacity:.75}
.mode-tile .lock{position:absolute;top:8px;right:9px;font-size:13px;line-height:1}

/* goal preview meter */
.goal-preview{margin-top:16px}
.goal-preview .lbl{display:flex;justify-content:space-between;font-size:13px;margin-bottom:7px;font-weight:700;color:var(--sx-muted2)}
.goal-preview .lbl b{color:var(--pink)}
.goal-preview .sx-meter{height:14px;background:var(--pink-soft)}
.goal-preview .sx-meter > span{background:var(--candy);box-shadow:0 0 16px -2px color-mix(in srgb,var(--pink) 60%,transparent)}

/* loading / gate states */
.gate{min-height:60vh;display:grid;place-items:center;text-align:center;color:var(--sx-muted2);font-weight:700}

/* ── text & bar card ──────────────────────────────────────────────────────────── */
.tb-controls{display:flex;flex-direction:column;gap:16px}
.tb-group{border:0;border-radius:18px;background:color-mix(in srgb,var(--pink) 5%,var(--card));padding:18px}
.tb-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.tb-h span{font-size:13.5px;font-weight:800;letter-spacing:.1px;color:var(--ink)}

.tb-field{margin-bottom:13px}
.tb-field:last-child{margin-bottom:0}
.tb-field label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.4px;color:var(--sx-muted);margin-bottom:6px}
.tb-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tb-split .tb-field{margin-bottom:0}

.tb-color input[type=color]{width:100%;height:38px;padding:3px;border:1.5px solid var(--sx-border);
  border-radius:11px;background:var(--card);cursor:pointer}
.tb-field input[type=range]{width:100%;accent-color:var(--pink);cursor:pointer;margin:6px 0 0}

.tb-toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:12px;font-weight:800;color:var(--sx-muted2)}
.tb-toggle input{width:auto;margin:0;accent-color:var(--pink);cursor:pointer}

/* 3x3 anchor picker */
.anchor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;aspect-ratio:16/7;margin-bottom:12px}
.anchor-grid button{display:flex;padding:7px;border:1.5px solid var(--sx-border);border-radius:10px;background:var(--card);cursor:pointer;
  transition:border-color var(--sx-dur-fast) var(--sx-ease),background var(--sx-dur-fast) var(--sx-ease)}
.anchor-grid button i{width:60%;height:3px;border-radius:2px;background:var(--sx-faint);transition:background var(--sx-dur-fast) var(--sx-ease)}
.anchor-grid button[data-anchor^=top]{align-items:flex-start}
.anchor-grid button[data-anchor^=over]{align-items:center}
.anchor-grid button[data-anchor^=bottom]{align-items:flex-end}
.anchor-grid button[data-anchor$=left]{justify-content:flex-start}
.anchor-grid button[data-anchor$=center]{justify-content:center}
.anchor-grid button[data-anchor$=right]{justify-content:flex-end}
.anchor-grid button:hover{border-color:color-mix(in srgb,var(--pink) 50%,var(--sx-border))}
.anchor-grid button.on{border-color:var(--pink);background:var(--sx-accent-soft)}
.anchor-grid button.on i{background:var(--candy)}

/* liquid flavour pills */
.liquid-only[hidden],.cauldron-only[hidden],.fill-only[hidden]{display:none}
.pill-pick{display:flex;flex-wrap:wrap;gap:9px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1.5px solid var(--sx-border);
  border-radius:999px;background:var(--card);cursor:pointer;color:var(--ink);font-weight:800;font-size:13px;
  transition:transform var(--sx-dur-fast) var(--sx-spring),border-color var(--sx-dur-fast) var(--sx-ease),background var(--sx-dur-fast) var(--sx-ease)}
.pill .dot{width:13px;height:13px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.08) inset}
.pill:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pink) 50%,var(--sx-border))}
.pill.on{border-color:var(--pink);background:var(--sx-accent-soft)}

/* HUD stack-order control */
.tb-order{display:flex;flex-direction:column;gap:8px}
.order-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border:0;border-radius:14px;
  background:var(--card);box-shadow:0 8px 18px -12px rgba(255,46,139,.3);font-size:13px;font-weight:800;color:var(--ink)}
.order-btns{display:inline-flex;gap:6px}
.order-btns button{width:30px;height:30px;display:grid;place-items:center;padding:0;border:1.5px solid var(--sx-border);
  border-radius:10px;background:var(--card);cursor:pointer;color:var(--ink);font-size:11px;line-height:1;
  transition:border-color var(--sx-dur-fast) var(--sx-ease),transform var(--sx-dur-fast) var(--sx-spring)}
.order-btns button:hover:not([disabled]){border-color:var(--pink);transform:translateY(-1px)}
.order-btns button:active:not([disabled]){transform:scale(.94)}
.order-btns button[disabled]{opacity:.3;cursor:default}

/* Celebration card */
.cel-sub{font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--sx-faint)}
.cel-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.cel-tune{position:relative;display:flex;flex-direction:column;gap:16px}
.cel-tune.locked .tb-group{opacity:.5}
.cel-lock{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:12px 15px;border:0;border-radius:16px;
  background:color-mix(in srgb,var(--pink) 12%,var(--card));font-size:13px;color:var(--sx-muted2);font-weight:600}
.cel-lock a{color:var(--pink);font-weight:800;text-decoration:none;margin-left:auto}
.cel-lock a:hover{text-decoration:underline}
.cel-presets .pill.on{border-color:var(--pink);background:var(--sx-accent-soft)}

/* ── custom fonts (Text & bar card) ── */
.font-lock{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:12px 15px;border-radius:16px;margin-bottom:11px;
  background:color-mix(in srgb,var(--pink) 12%,var(--card));font-size:13px;color:var(--sx-muted2);font-weight:600}
.font-lock a{color:var(--pink);font-weight:800;text-decoration:none;margin-left:auto}
.font-lock a:hover{text-decoration:underline}
.tb-hint{font-size:12px;color:var(--sx-muted);line-height:1.5;margin:0 0 12px}
.font-list{display:flex;flex-wrap:wrap;gap:8px}
.font-empty{font-size:12.5px;color:var(--sx-muted);font-weight:600}
.font-chip{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--sx-border);background:var(--card);
  border-radius:999px;padding:4px 5px 4px 13px;box-shadow:0 8px 18px -14px rgba(255,46,139,.5)}
.font-chip-name{font-size:12.5px;font-weight:700;color:var(--ink);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.font-chip-del{border:0;background:none;cursor:pointer;font-size:11px;line-height:1;width:22px;height:22px;border-radius:50%;
  color:var(--sx-muted2);transition:background var(--sx-dur-fast) var(--sx-ease),color var(--sx-dur-fast) var(--sx-ease),transform var(--sx-dur-fast) var(--sx-spring)}
.font-chip-del:hover{background:color-mix(in srgb,var(--sx-danger) 18%,var(--card));color:var(--sx-danger);transform:scale(1.08)}
.sx-btn.sx-btn-sm[disabled]{opacity:.5;cursor:not-allowed}

/* Content-pack store */
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:6px}
.store-empty{grid-column:1/-1;padding:26px;text-align:center;color:var(--sx-muted);font-size:14px}
.store-pack{display:flex;flex-direction:column;gap:10px;padding:20px;border:0;border-radius:20px;background:var(--card);
  box-shadow:0 14px 30px -18px rgba(255,46,139,.32);
  transition:transform var(--sx-dur-fast) var(--sx-spring),box-shadow var(--sx-dur-fast) var(--sx-ease)}
.store-pack:hover{transform:translateY(-3px);box-shadow:0 24px 44px -20px rgba(255,46,139,.46)}
.store-pack.owned{box-shadow:0 14px 30px -16px color-mix(in srgb,var(--mint) 60%,transparent)}
.store-pack-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.store-pack-name{font-weight:800;font-size:15.5px;color:var(--ink)}
.store-pack-desc{margin:0;font-size:13px;line-height:1.45;color:var(--sx-muted);flex:1}
.store-pack-foot{display:flex;justify-content:flex-end}
.store-tag{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:4px 10px;border-radius:999px;
  border:0;color:var(--ink);background:var(--pink-soft);white-space:nowrap}
.store-tag.price{color:#5a3b00;background:var(--lemon)}
.store-tag.owned{color:#06352a;background:var(--mint)}
.store-tag.soon{color:var(--sx-muted);background:color-mix(in srgb,var(--grape) 10%,var(--card))}

/* buttons on light: keep the pink primary punchy, secondary a soft white pill */
.sx-btn{background:var(--card);border:1.5px solid var(--sx-border);color:var(--ink);box-shadow:0 8px 18px -12px rgba(255,46,139,.3)}
.sx-btn:hover{border-color:var(--pink)}
.sx-btn-primary{background:var(--pink);border-color:transparent;color:#fff;box-shadow:0 12px 24px -12px color-mix(in srgb,var(--pink) 80%,transparent)}
.sx-btn-primary:hover{filter:brightness(1.05)}
.sx-btn-ghost{background:transparent;box-shadow:none}

/* ── floating theme toggle (dashboard) ── a candy pill; its glyph swaps in JS (🌙 / ☀️) */
.theme-toggle{position:fixed;right:clamp(16px,2vw,30px);bottom:clamp(16px,2vw,30px);z-index:60;
  width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;font-size:23px;line-height:1;
  display:grid;place-items:center;background:var(--card);color:var(--ink);box-shadow:var(--sx-shadow);
  transition:transform var(--sx-dur-fast) var(--sx-spring),box-shadow var(--sx-dur-fast) var(--sx-ease)}
.theme-toggle:hover{transform:translateY(-3px) rotate(-10deg);box-shadow:0 20px 38px -16px rgba(255,46,139,.5)}
.theme-toggle:active{transform:scale(.92)}

/* ══════════════════════════════════════════════════════════════════════════════
   DARK MODE — a candy NIGHT. The bubblegum accents (pink/cyan/lemon/mint) stay vivid —
   they glow on dark — re-based on a deep grape-black. Opt-in via the dashboard toggle,
   which sets data-theme="dark" on <html> and persists to localStorage; default is light.
   Because every surface derives from the tokens (esp. --card and --ink), this is a token
   flip plus a few backdrop/chrome overrides, not a second hand-built skin.
   ══════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"]{
  --ink:#ffe9f6;                 /* light text (was deep grape) — cascades to every var(--ink) */
  --cream:#160a22;
  --pink-soft:#4a1f44;           /* dark pink wash for meter tracks / tags */

  --sx-bg:#140a20;
  --sx-surface:#241236;
  --sx-surface2:#2c1740;
  --sx-border:#3a2155;
  --sx-border2:#4d2c6e;
  --sx-text:var(--ink);
  --sx-muted:#c3a3dd;
  --sx-muted2:#d8bff0;
  --sx-faint:#8468a8;
  --sx-accent-soft:#3a1a40;      /* .on selected-state fill on dark */

  --card:#251338;                /* card / control surface (the one flip that moves most of it) */

  --sx-shadow:0 22px 50px -26px rgba(0,0,0,.72),0 8px 20px -12px rgba(255,46,139,.26);
  --candy-card-shadow:0 26px 56px -28px rgba(0,0,0,.72),0 10px 24px -14px rgba(255,46,139,.22),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* dark candy aurora — glowing blobs on a near-black grape base */
:root[data-theme="dark"] body::before{
  background:
    radial-gradient(44% 42% at 6% -2%, color-mix(in srgb,var(--pink) 42%,transparent), transparent 60%),
    radial-gradient(42% 42% at 99% 2%, color-mix(in srgb,var(--cyan) 34%,transparent), transparent 60%),
    radial-gradient(46% 46% at 50% 106%, color-mix(in srgb,var(--lemon) 26%,transparent), transparent 62%),
    radial-gradient(40% 44% at 102% 104%, color-mix(in srgb,var(--mint) 24%,transparent), transparent 62%),
    radial-gradient(38% 40% at -2% 102%, color-mix(in srgb,var(--grape) 48%,transparent), transparent 62%),
    linear-gradient(168deg,#1a0c28 0%,#140a20 50%,#100818 100%);
  background-color:#120a1c;
}
/* sprinkles: swap the dark grape dots for faint light so they read on the night base */
:root[data-theme="dark"] body::after{
  background-image:radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.6px);
  opacity:.5;
}

/* inputs on dark */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea{color-scheme:dark}
:root[data-theme="dark"] ::-webkit-scrollbar-track{background:var(--sx-surface2)}

/* family header + footer, re-skinned DARK — more specific than the light `.sxh` !important
   overrides above (:root[data-theme=dark] .sxh beats .sxh), so these win in dark. */
:root[data-theme="dark"] .sxh{
  --sx-bg:#1a0c28!important; --sx-surface:#241236!important; --sx-surface2:#2c1740!important;
  --sx-text:#ffe9f6!important; --sx-muted:#c3a3dd!important; --sx-muted2:#d8bff0!important;
  --sx-border:#3a2155!important; --sx-accent:var(--pink)!important; --sx-accent2:var(--cyan)!important;
  color:#ffe9f6!important;
  background:color-mix(in srgb,#1a0c28 85%,var(--pink))!important;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.72)!important;
}
:root[data-theme="dark"] .sxh .sxh-item:hover{background:color-mix(in srgb,var(--pink) 18%,transparent)!important}
:root[data-theme="dark"] .sx-famfoot{
  --sx-bg:#1a0c28; --sx-surface:#241236; --sx-text:#ffe9f6; --sx-muted:#c3a3dd; --sx-border:#3a2155;
  color:#ffe9f6;
  background:color-mix(in srgb,#1a0c28 88%,var(--pink))!important;
  border-top:1px solid #3a2155;
}
:root[data-theme="dark"] .sx-famfoot p,
:root[data-theme="dark"] .sx-famfoot .sx-famfoot-word{color:#ffe9f6}

/* the live-preview stage goes to a dark candy glow so the transparent overlay still reads */
:root[data-theme="dark"] .hero-stage{
  background:
    radial-gradient(60% 72% at 50% 44%, color-mix(in srgb,#2a1540 82%,var(--cyan)), transparent 74%),
    radial-gradient(50% 60% at 82% 12%, color-mix(in srgb,var(--cyan) 26%,transparent), transparent 70%),
    radial-gradient(50% 60% at 16% 90%, color-mix(in srgb,var(--lemon) 20%,transparent), transparent 70%),
    linear-gradient(160deg,#1e0e2e,#140a20);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 30px 60px -30px rgba(0,0,0,.72);
}