/* plopx skin — maps the shared --sx-* contract onto plopx's own identity.
   Loaded AFTER core.css on every browsing shell (landing, dashboard); the overlay
   keeps its own style.css. Identity: warm "filling up / overflow" energy — amber
   fill rising into ember overflow — on the StrmrX chrome + X signature. 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=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  /* plopx brand vars (app-specific CSS may use these directly) */
  --amber:#ff9f1c;      /* the fill — warm honey-amber */
  --ember:#ff5e1a;      /* the overflow — hotter orange */
  --honey:#ffc24b;      /* highlight / rising glow */
  --warm-bg:#130d09;    /* warm-tinted dark, never pure black (warmth layer) */

  /* Map plopx identity onto the shared chrome. */
  --sx-accent:var(--amber);
  --sx-accent2:var(--ember);
  --sx-accent-ink:#2a1500;                 /* dark ink on the bright amber button */
  --sx-accent-hover:#ffb347;
  --sx-accent-soft:#2a1a0c;

  --sx-bg:var(--warm-bg);
  --sx-surface:#1d140d;
  --sx-surface2:#271a10;
  --sx-border:#3a281a;
  --sx-border2:#4a3522;

  --sx-text:#faf0e6;
  --sx-muted:#b39a85;
  --sx-muted2:#cdb6a0;
  --sx-faint:#7a6450;

  /* steer the family backdrop toward a warm, rising-glow flavour */
  --sx-glow-1:var(--amber);
  --sx-glow-2:var(--ember);
  --sx-bg-hi:color-mix(in srgb, var(--sx-bg) 86%, var(--honey));
  --sx-bg-lo:color-mix(in srgb, var(--sx-bg) 72%, #000);
}

/* The [hidden] attribute must win over any component's display rule (e.g. .gate /
   .acct set display, which otherwise ties with [hidden] and leaves them showing). */
[hidden]{display:none!important}

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

/* hero (landing) */
.hero{text-align:center;padding:64px 20px 40px}
.hero h1{font-size:clamp(48px,9vw,78px);font-weight:700;letter-spacing:-2px;line-height:1;margin-bottom:14px}
.hero h1 .x{color:var(--sx-accent)}
.hero .tag{font-size:clamp(16px,2.6vw,20px);color:var(--sx-muted2);max-width:540px;margin:0 auto 30px;line-height:1.5}
.hero .cta{display:inline-flex;gap:12px;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:22px;font-weight:700;letter-spacing:-.3px}
.sec-head .hint{font-size:13px;color:var(--sx-muted)}

/* demo cards grid (landing) */
.demos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.demos{grid-template-columns:1fr}}
.demo-card{display:block;padding:24px 18px;text-align:center;color:var(--sx-text)}
.demo-card .emoji{font-size:44px;display:block;margin-bottom:10px;
  filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--sx-accent) 40%,transparent))}
.demo-card b{font-size:17px;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),border-color var(--sx-dur-fast) var(--sx-ease)}
.demo-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--sx-accent) 55%,var(--sx-border))}

/* ── dashboard ──────────────────────────────────────────────────────────────── */
.dash-head{margin:28px 0 8px}
.dash-head h1{font-size:30px;font-weight:700;letter-spacing:-.5px}
.dash-head p{color:var(--sx-muted2);margin-top:4px}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
@media (max-width:720px){.dash-grid{grid-template-columns:1fr}}

.card-pad{padding:22px}
.card-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--sx-muted);margin-bottom:16px;display:flex;align-items:center;gap:8px}

.form-row{margin-bottom:16px}
.form-row:last-child{margin-bottom:0}

/* mode picker — two big toggle tiles */
.mode-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px;
  border:1px solid var(--sx-border);border-radius:var(--sx-radius-sm);background:var(--sx-surface2);
  cursor:pointer;color:var(--sx-text);font-weight:600;font-size:14px;
  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)}
.mode-tile{position:relative}
.mode-tile .emoji{font-size:30px}
.mode-tile:hover{transform:translateY(-2px)}
.mode-tile.on{border-color:var(--sx-accent);background:var(--sx-accent-soft);
  box-shadow:0 0 0 1px var(--sx-accent) inset}
/* premium-locked mode tile: dimmed, still clickable (click prompts an upgrade). */
.mode-tile.locked{opacity:.55;filter:saturate(.6)}
.mode-tile.locked:hover{transform:translateY(-2px);opacity:.75}
.mode-tile .lock{position:absolute;top:6px;right:8px;font-size:12px;line-height:1}

/* 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}

/* goal preview meter */
.goal-preview{margin-top:14px}
.goal-preview .lbl{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.goal-preview .lbl b{color:var(--sx-accent)}
.goal-preview .sx-meter > span{background:linear-gradient(90deg,var(--amber),var(--ember))}

/* account chip in topbar */
.acct{display:flex;align-items:center;gap:9px}
.acct .name{font-weight:600;font-size:14px}
@media (max-width:560px){.acct .name{display:none}}

/* tier badge + upgrade link in the topbar */
.tier-badge{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;border:1px solid var(--sx-border);
  background:var(--sx-surface2);color:var(--sx-muted)}
.tier-badge.tier-s{border-color:var(--sx-accent);background:var(--sx-accent-soft);color:var(--sx-accent)}
.tier-badge.tier-x{border-color:transparent;color:#1a1205;
  background:linear-gradient(90deg,var(--amber),var(--ember))}
.upgrade-link{font-size:12px;font-weight:600;color:var(--sx-accent);text-decoration:none;
  padding:3px 8px;border-radius:999px;transition:background var(--sx-dur-fast) var(--sx-ease)}
.upgrade-link:hover{background:var(--sx-accent-soft)}
@media (max-width:560px){.upgrade-link{display:none}}

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

/* ── text & bar card ──────────────────────────────────────────────────────────── */
.tb-card{margin-top:16px}
.tb-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;align-items:start}
@media (max-width:720px){.tb-wrap{grid-template-columns:1fr}}

.tb-preview{position:sticky;top:16px}
.tb-frame{aspect-ratio:16/9;border-radius:var(--sx-radius-sm);overflow:hidden;
  border:1px solid var(--sx-border);
  background:
    radial-gradient(120% 120% at 50% 0,color-mix(in srgb,var(--sx-accent) 10%,transparent),transparent 60%),
    repeating-conic-gradient(#171009 0% 25%,#1d140d 0% 50%) 0 0/22px 22px}
.tb-frame iframe{width:100%;height:100%;border:0;display:block}

.tb-controls{display:flex;flex-direction:column;gap:12px}
.tb-group{border:1px solid var(--sx-border);border-radius:var(--sx-radius-sm);
  background:var(--sx-surface2);padding:14px}
.tb-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.tb-h span{font-size:13px;font-weight:700;letter-spacing:.2px;color:var(--sx-text)}

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

/* color swatches — override core's full-width input rule */
.tb-color input[type=color]{width:100%;height:34px;padding:2px;border:1px solid var(--sx-border);
  border-radius:8px;background:var(--sx-surface);cursor:pointer}

/* range inputs */
.tb-field input[type=range]{width:100%;accent-color:var(--sx-accent);cursor:pointer;margin:6px 0 0}

/* show/hide toggle */
.tb-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:12px;font-weight:600;color:var(--sx-muted2)}
.tb-toggle input{width:auto;margin:0;accent-color:var(--sx-accent);cursor:pointer}

/* 3x3 anchor picker — the grid maps to the screen; the bar shows where the HUD sits */
.anchor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  aspect-ratio:16/7;margin-bottom:12px}
.anchor-grid button{display:flex;padding:7px;border:1px solid var(--sx-border);
  border-radius:8px;background:var(--sx-surface);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(--sx-accent) 50%,var(--sx-border))}
.anchor-grid button.on{border-color:var(--sx-accent);background:var(--sx-accent-soft)}
.anchor-grid button.on i{background:var(--sx-accent)}

/* liquid flavour + vessel pickers (Jar setup card) */
.liquid-only[hidden]{display:none}
.pill-pick{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;
  border:1px solid var(--sx-border);border-radius:999px;background:var(--sx-surface2);
  cursor:pointer;color:var(--sx-text);font-weight:600;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:11px;height:11px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}
.pill:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--sx-accent) 50%,var(--sx-border))}
.pill.on{border-color:var(--sx-accent);background:var(--sx-accent-soft);
  box-shadow:0 0 0 1px var(--sx-accent) inset}

/* save row (OBS overlay URL card) */
.url-actions{display:flex;align-items:center;gap:12px;margin-top:12px}
.save-state{font-size:12px;color:var(--sx-muted);font-weight:600}

/* HUD stack-order control (Text & bar card) */
.tb-order{display:flex;flex-direction:column;gap:7px}
.order-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 12px;border:1px solid var(--sx-border);border-radius:var(--sx-radius-sm);
  background:var(--sx-surface);font-size:13px;font-weight:600;color:var(--sx-text)}
.order-btns{display:inline-flex;gap:5px}
.order-btns button{width:28px;height:28px;display:grid;place-items:center;padding:0;
  border:1px solid var(--sx-border);border-radius:8px;background:var(--sx-surface2);
  cursor:pointer;color:var(--sx-text);font-size:11px;line-height:1;
  transition:border-color var(--sx-dur-fast) var(--sx-ease),background var(--sx-dur-fast) var(--sx-ease),
    transform var(--sx-dur-fast) var(--sx-spring)}
.order-btns button:hover:not([disabled]){border-color:color-mix(in srgb,var(--sx-accent) 55%,var(--sx-border));
  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:600;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:14px;flex-wrap:wrap}
.cel-tune{position:relative;display:flex;flex-direction:column;gap:12px}
.cel-tune.locked .tb-group{opacity:.5}
.cel-lock{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 13px;
  border:1px solid var(--sx-border2);border-radius:var(--sx-radius-sm);background:var(--sx-surface2);
  font-size:13px;color:var(--sx-muted2)}
.cel-lock a{color:var(--sx-accent);font-weight:700;text-decoration:none;margin-left:auto}
.cel-lock a:hover{text-decoration:underline}
.cel-presets .pill.on{border-color:var(--sx-accent);background:var(--sx-accent-soft)}

/* Content-pack store ----------------------------------------------------- */
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:4px}
.store-empty{grid-column:1/-1;padding:22px;text-align:center;color:var(--sx-muted);font-size:14px}
.store-pack{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--sx-border);
  border-radius:var(--sx-radius-sm);background:var(--sx-surface2);
  transition:transform var(--sx-dur-fast) var(--sx-spring),border-color var(--sx-dur-fast) var(--sx-ease)}
.store-pack:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--sx-accent) 40%,var(--sx-border))}
.store-pack.owned{border-color:color-mix(in srgb,var(--sx-accent) 50%,var(--sx-border))}
.store-pack-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.store-pack-name{font-weight:700;font-size:15px;color:var(--sx-text)}
.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:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;
  border-radius:999px;border:1px solid var(--sx-border2);color:var(--sx-muted2);white-space:nowrap}
.store-tag.price{border-color:var(--sx-accent);color:var(--sx-accent);background:var(--sx-accent-soft)}
.store-tag.owned{border-color:transparent;background:var(--sx-accent);color:var(--sx-accent-ink)}
.store-tag.soon{color:var(--sx-faint)}