/* WowPage · shared design system
   One accent (pop), warm neutrals, system type, no external anything. */

:root{
  /* ink */
  --ink:#2b2440;
  --ink-2:#514969;
  --muted:#7d7593;

  /* surfaces */
  --paper:#fff9f2;
  --paper-2:#fdf2e3;
  --card:#ffffff;
  --line:#eee1d2;

  /* accent */
  --pop:#ff5d73;
  --pop-deep:#e2394f;
  --pop-soft:#ffe9ec;

  /* supporting warm tone (price token + small highlights only) */
  --sun:#ffb340;
  --sun-soft:#fff1d8;

  /* joy set: one hue per moment, never all at once */
  --mint:#25b795;
  --mint-deep:#0e8268;
  --mint-soft:#e0f6ee;
  --lilac:#9b7bd4;
  --lilac-deep:#6b4bb8;
  --lilac-soft:#efe9fb;
  --sky:#4da3dd;
  --sky-soft:#e4f2fc;

  /* status */
  --ok:#22855d;
  --ok-soft:#e0f3e9;
  --warn:#a26a00;
  --warn-soft:#fdf0d7;
  --err:#c22f43;
  --err-soft:#fdeaec;

  /* shape + elevation (layered, ink-tinted) */
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;
  --shadow:0 1px 2px rgba(43,36,64,.06), 0 10px 24px rgba(43,36,64,.09), 0 24px 48px rgba(226,57,79,.07);
  --shadow-sm:0 1px 2px rgba(43,36,64,.05), 0 5px 16px rgba(43,36,64,.08);
  --shadow-lift:0 2px 4px rgba(43,36,64,.06), 0 16px 32px rgba(43,36,64,.12), 0 32px 64px rgba(226,57,79,.10);

  /* grain (inline SVG noise, no requests) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");

  /* type scale, ratio 1.25 */
  --fs-0:.8125rem;   /* 13 */
  --fs-1:1rem;       /* 16 */
  --fs-2:1.25rem;    /* 20 */
  --fs-3:1.5625rem;  /* 25 */
  --fs-4:1.9375rem;  /* 31 */
  --fs-5:2.4375rem;  /* 39 */
  --fs-6:3.0625rem;  /* 49 */

  --font:system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;

  color-scheme:light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-1);
  line-height:1.6;
  color:var(--ink);
  background:
    radial-gradient(60rem 40rem at 85% -8%, rgba(255,179,64,.14), transparent 60%),
    radial-gradient(52rem 36rem at -12% 22%, rgba(255,93,115,.09), transparent 60%),
    radial-gradient(46rem 40rem at 110% 78%, rgba(255,233,236,.7), transparent 65%),
    var(--paper);
}
/* paper grain over everything, fixed so it never repaints on scroll */
body::before{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  background:var(--grain); background-size:180px 180px; opacity:.05;
}

/* ---------- drifting colour weather (landing + 404) ----------
   Four big soft blobs behind everything. Transform-only drift, 24-40s loops.
   Under prefers-reduced-motion they simply hold still: a static gradient. */
.bg-scene{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
}
.blob{ position:absolute; border-radius:50%; filter:blur(64px); }
.blob-a{
  width:36rem; height:36rem; top:-14rem; right:-9rem;
  background:radial-gradient(circle at 40% 40%, rgba(255,179,64,.42), transparent 68%);
}
.blob-b{
  width:30rem; height:30rem; top:16rem; left:-13rem;
  background:radial-gradient(circle at 55% 45%, rgba(255,93,115,.34), transparent 68%);
}
.blob-c{
  width:32rem; height:32rem; bottom:-12rem; right:-6rem;
  background:radial-gradient(circle at 45% 45%, rgba(37,183,149,.26), transparent 68%);
}
.blob-d{
  width:26rem; height:26rem; bottom:8rem; left:14%;
  background:radial-gradient(circle at 50% 50%, rgba(155,123,212,.24), transparent 68%);
}
@media (prefers-reduced-motion: no-preference){
  .blob{ will-change:transform; }
  .blob-a{ animation:drift-a 34s ease-in-out infinite alternate; }
  .blob-b{ animation:drift-b 27s ease-in-out infinite alternate; }
  .blob-c{ animation:drift-c 39s ease-in-out infinite alternate; }
  .blob-d{ animation:drift-d 24s ease-in-out infinite alternate; }
}
@keyframes drift-a{
  from{ transform:translate(0,0) scale(1); }
  to{ transform:translate(-7rem,5rem) scale(1.14); }
}
@keyframes drift-b{
  from{ transform:translate(0,0) scale(1.08); }
  to{ transform:translate(5rem,-4rem) scale(.94); }
}
@keyframes drift-c{
  from{ transform:translate(0,0) scale(1); }
  to{ transform:translate(-5rem,-6rem) scale(1.12); }
}
@keyframes drift-d{
  from{ transform:translate(0,0) scale(.92); }
  to{ transform:translate(6rem,3rem) scale(1.06); }
}
img,svg{ max-width:100%; display:block; }
h1,h2,h3,h4{ line-height:1.12; margin:0 0 .5em; font-weight:800; letter-spacing:-.015em; }
h1{ font-size:var(--fs-5); }
h2{ font-size:var(--fs-4); }
h3{ font-size:var(--fs-2); }
p{ margin:0 0 1em; max-width:65ch; }
a{ color:var(--pop-deep); text-underline-offset:.16em; }
a:hover{ color:var(--ink); }
::selection{ background:var(--sun-soft); color:var(--ink); }

:focus-visible{
  outline:3px solid var(--pop);
  outline-offset:2px;
  border-radius:4px;
}

.icon{ width:1.15em; height:1.15em; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- wordmark ---------- */
.wordmark{
  font-weight:800; font-size:var(--fs-2); letter-spacing:-.02em;
  color:var(--ink); text-decoration:none; display:inline-flex; align-items:baseline;
}
.wordmark .dot{ color:var(--pop); }
.wordmark:hover{ color:var(--ink); }
.wordmark:hover .dot{ color:var(--pop-deep); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-weight:700; white-space:nowrap;
  padding:.72rem 1.4rem; border-radius:999px; border:2px solid transparent;
  cursor:pointer; text-decoration:none; text-align:center;
  position:relative; overflow:hidden;
  transition:transform .18s ease-out, background-color .18s ease-out,
             color .18s ease-out, border-color .18s ease-out, box-shadow .18s ease-out;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-pop{ background:var(--pop); color:#fff; box-shadow:var(--shadow-sm); }
.btn-pop:hover{ background:var(--pop-deep); color:#fff; transform:translateY(-1px); }
/* one playful shine sweep per hover, transform-only */
.btn-pop::after, .btn-ink::after{
  content:""; position:absolute; top:0; bottom:0; left:-45%; width:45%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.32), transparent);
  transform:translateX(0) skewX(-16deg); pointer-events:none;
}
.btn-pop:hover::after, .btn-ink:hover::after{
  animation:btn-shine .55s ease-out;
}
@keyframes btn-shine{
  from{ transform:translateX(0) skewX(-16deg); }
  to{ transform:translateX(400%) skewX(-16deg); }
}
.btn-ink{ background:var(--ink); color:var(--paper); }
.btn-ink:hover{ background:#3a3157; color:#fff; transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.btn-quiet{ background:transparent; color:var(--ink-2); padding:.5rem .9rem; }
.btn-quiet:hover{ color:var(--pop-deep); }
.btn-big{ font-size:var(--fs-2); padding:.9rem 2rem; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }
.btn-link{
  background:none; border:none; padding:0; font:inherit; cursor:pointer;
  color:var(--pop-deep); text-decoration:underline; text-underline-offset:.16em;
}
.btn-link:hover{ color:var(--ink); }

/* ---------- forms ---------- */
.field{ margin-bottom:1.1rem; }
.field label{
  display:block; font-weight:700; font-size:var(--fs-0);
  margin-bottom:.35rem; color:var(--ink);
}
.field .hint{ font-size:var(--fs-0); color:var(--muted); margin:.3rem 0 0; }
.input, textarea.input, select.input{
  width:100%; font:inherit; color:var(--ink);
  background:var(--card); border:2px solid var(--line); border-radius:var(--r-sm);
  padding:.65rem .85rem;
  transition:border-color .18s ease-out;
}
.input::placeholder{ color:#a89fb8; }
.input:hover{ border-color:#dccbb6; }
.input:focus-visible{ outline:none; border-color:var(--pop); }
textarea.input{ resize:vertical; min-height:6.5rem; }
.field-err{
  color:var(--err); font-size:var(--fs-0); font-weight:600; margin:.35rem 0 0;
}
.field.has-err .input{ border-color:var(--err); }

.checks{ display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:0; list-style:none; }
.check-pill{ position:relative; }
.check-pill input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.check-pill span{
  display:inline-block; padding:.4rem 1rem; border-radius:999px;
  border:2px solid var(--line); background:var(--card); font-weight:600;
  transition:border-color .18s ease-out, background-color .18s ease-out;
}
.check-pill input:hover + span{ border-color:#dccbb6; }
.check-pill input:checked + span{
  border-color:var(--ink); background:var(--ink); color:var(--paper);
}
.check-pill input:focus-visible + span{ outline:3px solid var(--pop); outline-offset:2px; }

/* ---------- app shell ---------- */
.app-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom:1px solid var(--line); background:var(--paper);
}
.app-head .who{ display:flex; align-items:center; gap:.9rem; font-size:var(--fs-0); color:var(--ink-2); }
.app-main{
  max-width:1120px; margin:0 auto;
  padding:clamp(1.25rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem) 5rem;
}

/* toast */
.toast{
  position:fixed; left:50%; bottom:1.5rem; transform:translate(-50%, .5rem);
  background:var(--ink); color:var(--paper); font-weight:600;
  padding:.75rem 1.4rem; border-radius:999px; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; z-index:50; max-width:min(92vw, 34rem);
  transition:opacity .25s ease-out, transform .25s ease-out;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }
.toast.good{ background:var(--ok); color:#fff; }

/* ---------- auth ---------- */
.auth{
  max-width:26.5rem; margin:clamp(1rem,6vh,4rem) auto 0;
  padding:clamp(1.5rem, 4vw, 2.25rem);
  position:relative;
}
/* card face + a tilted paper layer peeking behind it (explicit stacking order:
   the face must sit above the backing, whatever stacking context we are in) */
.auth::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.auth::before{
  content:""; position:absolute; inset:.8rem -.8rem -.8rem .8rem; z-index:-2;
  background:var(--sun-soft); border-radius:var(--r-lg); transform:rotate(-1.6deg);
}
.auth h1{ font-size:var(--fs-4); }
.auth .lead{ color:var(--ink-2); }
.auth .swap{ margin:1.25rem 0 0; font-size:var(--fs-0); color:var(--ink-2); }
.auth .form-err{
  background:var(--err-soft); color:var(--err); border-radius:var(--r-sm);
  padding:.6rem .9rem; font-weight:600; font-size:var(--fs-0); margin:0 0 1rem;
}
.inbox-art{
  width:4.5rem; height:4.5rem; border-radius:50%; background:var(--sun-soft);
  display:grid; place-items:center; margin-bottom:1rem;
}
.inbox-art .icon{ width:2rem; height:2rem; color:var(--warn); }

/* ---------- wizard ---------- */
.wiz{ display:grid; grid-template-columns:minmax(0,1fr) 19rem; gap:2.5rem; align-items:start; }
.wiz-main{ min-width:0; }
/* progress: the one signature gradient on the site, pop -> sun */
.progress{
  height:.75rem; border-radius:999px; background:var(--paper-2);
  border:1px solid var(--line); overflow:hidden; margin-bottom:.5rem;
  box-shadow:inset 0 1px 2px rgba(43,36,64,.06);
}
.progress > div{
  height:100%; background:linear-gradient(90deg, var(--pop), var(--sun));
  border-radius:999px; position:relative; min-width:.75rem;
  transition:width .5s cubic-bezier(.22,1,.36,1);
}
.progress > div::after{
  content:""; position:absolute; top:50%; right:.14rem; width:.42rem; height:.42rem;
  border-radius:50%; background:#fff; transform:translateY(-50%);
  box-shadow:0 0 0 2px rgba(43,36,64,.12);
}
/* each step carries its own gentle accent (pill + heading rule) */
.wiz{ --wa-ink:var(--pop-deep); --wa-soft:var(--pop-soft); }
.wiz[data-step="2"]{ --wa-ink:var(--warn); --wa-soft:var(--sun-soft); }
.wiz[data-step="3"]{ --wa-ink:var(--mint-deep); --wa-soft:var(--mint-soft); }
.wiz[data-step="4"]{ --wa-ink:var(--lilac-deep); --wa-soft:var(--lilac-soft); }
.wiz[data-step="5"]{ --wa-ink:#2379ad; --wa-soft:var(--sky-soft); }
.wiz[data-step="6"]{ --wa-ink:var(--mint-deep); --wa-soft:var(--mint-soft); }
.wiz[data-step="7"]{ --wa-ink:var(--pop-deep); --wa-soft:var(--pop-soft); }
.wiz-count{
  display:inline-block; font-size:var(--fs-0); font-weight:800;
  color:var(--wa-ink); background:var(--wa-soft);
  padding:.18rem .8rem; border-radius:999px; margin-bottom:1.75rem;
}
.wiz h1{ font-size:var(--fs-4); }
.wiz .lead{ color:var(--ink-2); margin-bottom:1.75rem; }
.wiz-nav{ display:flex; align-items:center; gap:1rem; margin-top:2rem; flex-wrap:wrap; }

/* basket rail */
.basket{ position:sticky; top:1.25rem; }
.basket details{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.basket summary{
  list-style:none; cursor:pointer; padding:1rem 1.25rem; font-weight:800;
  display:flex; justify-content:space-between; align-items:center; gap:.75rem;
}
.basket summary::-webkit-details-marker{ display:none; }
.basket summary .sum-total{ color:var(--pop-deep); white-space:nowrap; }
.basket-body{ padding:0 1.25rem 1.1rem; }
.basket-line{
  display:flex; justify-content:space-between; gap:.75rem; padding:.5rem 0;
  border-top:1px dashed var(--line); font-size:var(--fs-0);
}
.basket-line:first-child{ border-top:0; }
.basket-line .b-name{ color:var(--ink); font-weight:600; }
.basket-line .b-amount{ color:var(--ink-2); white-space:nowrap; }
.basket-note{
  margin:.9rem 0 0; padding:.6rem .8rem; border-radius:var(--r-sm);
  background:var(--ok-soft); color:var(--ok); font-size:var(--fs-0); font-weight:600;
}

/* prefetch fact sheet */
.fact-wait{ display:flex; align-items:center; gap:1rem; padding:1.25rem 0; color:var(--ink-2); }
.spin{
  width:1.6rem; height:1.6rem; border-radius:50%; flex:none;
  border:3px solid var(--paper-2); border-top-color:var(--pop);
  animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.hours-grid{ display:grid; grid-template-columns:6.5rem minmax(0,1fr); gap:.5rem .75rem; align-items:center; }
.hours-grid label{ font-weight:700; font-size:var(--fs-0); }

/* direction cards: physical paint swatches, fanned slightly */
.dirs{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.1rem; }
.dir{
  position:relative; border:2px solid var(--line); border-radius:var(--r-md);
  background:var(--card); overflow:hidden; cursor:pointer; padding:0;
  text-align:left; font:inherit; color:inherit; display:block; width:100%;
  box-shadow:var(--shadow-sm);
  transition:border-color .2s ease-out, transform .2s ease-out, box-shadow .2s ease-out;
}
.dirs .dir:nth-child(1){ transform:rotate(-1.2deg); }
.dirs .dir:nth-child(3){ transform:rotate(1.2deg); }
.dir:hover{ transform:translateY(-4px) rotate(0deg); box-shadow:var(--shadow); border-color:#dccbb6; }
.dir[aria-pressed="true"]{
  border-color:var(--pop); box-shadow:var(--shadow);
  transform:translateY(-4px) rotate(0deg) scale(1.02);
}
.dir[aria-pressed="true"]::after{
  content:"Your pick"; position:absolute; top:.6rem; right:.6rem;
  background:var(--pop); color:#fff; font-size:.7rem; font-weight:800;
  padding:.15rem .6rem; border-radius:999px;
}
.dir-preview{ height:7.5rem; padding:1rem 1.1rem; display:flex; flex-direction:column; justify-content:center; gap:.45rem; }
.dir-preview .dp-head{ font-weight:800; font-size:1.05rem; line-height:1.1; }
.dir-preview .dp-rule{ width:2.2rem; height:.28rem; border-radius:2px; }
.dir-preview .dp-line{ height:.4rem; border-radius:2px; width:82%; opacity:.55; }
.dir-preview .dp-line.short{ width:56%; }
.dir-meta{ padding:.8rem 1.1rem 1rem; border-top:1px solid var(--line); }
.dir-meta strong{ display:block; }
.dir-meta span{ font-size:var(--fs-0); color:var(--muted); }
/* the three mini styles */
.dp-warm{ background:#fbeadb; color:#4a2c1d; }
.dp-warm .dp-head{ font-family:Georgia, "Times New Roman", serif; font-style:italic; font-weight:600; }
.dp-warm .dp-rule{ background:#c96f3b; }
.dp-warm .dp-line{ background:#a8785d; }
.dp-bold{ background:#231f33; color:#fff; }
.dp-bold .dp-head{ text-transform:uppercase; letter-spacing:.04em; }
.dp-bold .dp-rule{ background:var(--sun); }
.dp-bold .dp-line{ background:#8f87ad; }
.dp-calm{ background:#f2f4ef; color:#33413a; }
.dp-calm .dp-head{ font-weight:600; letter-spacing:.01em; }
.dp-calm .dp-rule{ background:#5d7f6d; }
.dp-calm .dp-line{ background:#9dab9f; }

/* uploads */
.up-zone{
  border:2px dashed var(--line); border-radius:var(--r-md); background:var(--card);
  padding:1.25rem; text-align:center; margin-bottom:1rem;
}
.up-zone p{ margin:0 auto .75rem; color:var(--ink-2); }
.asset-list{ list-style:none; padding:0; margin:0 0 1.5rem; display:grid; gap:.6rem; }
.asset{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.75rem; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:.65rem .8rem;
}
.asset .a-chip{
  width:2.6rem; height:2.6rem; border-radius:var(--r-sm); background:var(--paper-2);
  display:grid; place-items:center; color:var(--ink-2); font-weight:800; font-size:.65rem;
  text-transform:uppercase; letter-spacing:.03em;
}
.asset .a-chip.logo{ background:var(--sun-soft); color:var(--warn); }
.asset .a-cap{ display:flex; gap:.5rem; align-items:center; min-width:0; }
.asset .a-cap .input{ padding:.4rem .6rem; font-size:var(--fs-0); }
.asset .a-del{
  background:none; border:none; cursor:pointer; color:var(--muted); padding:.4rem;
  border-radius:var(--r-sm); display:grid; place-items:center;
}
.asset .a-del:hover{ color:var(--err); background:var(--err-soft); }

/* extras */
.extras{ display:grid; gap:.9rem; }
.extra{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; align-items:center;
  background:var(--card); border:2px solid var(--line); border-radius:var(--r-md);
  padding:1rem 1.2rem; box-shadow:var(--shadow-sm);
  transition:border-color .18s ease-out, transform .18s ease-out, box-shadow .18s ease-out;
}
.extra:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.extra.in{ border-color:var(--ink); background:linear-gradient(0deg, rgba(255,233,236,.45), rgba(255,233,236,.45)), var(--card); }
.extra strong{ display:block; }
.extra .x-price{ color:var(--pop-deep); font-weight:800; white-space:nowrap; }
.extra .x-desc{ font-size:var(--fs-0); color:var(--ink-2); margin:0; }
.extra .soon{
  display:inline-block; margin-left:.5rem; padding:.05rem .55rem; border-radius:999px;
  background:var(--paper-2); color:var(--muted); font-size:.7rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em;
}

/* review */
.review-block{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:1rem 1.25rem; margin-bottom:1rem;
}
.review-block h3{ font-size:var(--fs-1); margin-bottom:.4rem; }
.review-block p{ margin-bottom:.25rem; color:var(--ink-2); font-size:var(--fs-0); }
.verify-nudge{
  background:var(--warn-soft); border-radius:var(--r-md); padding:1rem 1.25rem;
  margin-top:1.25rem; color:var(--warn); font-weight:600;
}

/* ---------- building + reveal ---------- */
.build-wrap{ max-width:38rem; margin:clamp(1rem,8vh,5rem) auto 0; text-align:center; }
.build-art{
  width:6.5rem; height:6.5rem; margin:0 auto 1.5rem; border-radius:50%;
  background:var(--pop-soft); display:grid; place-items:center; position:relative;
}
.build-art .icon{ width:2.6rem; height:2.6rem; color:var(--pop-deep); }
.build-art::after{
  content:""; position:absolute; inset:-.55rem; border-radius:50%;
  border:3px dashed var(--pop); opacity:.4;
  animation:orbit 14s linear infinite;
}
@keyframes orbit{ to{ transform:rotate(360deg); } }
.build-wrap .lead{ color:var(--ink-2); margin-left:auto; margin-right:auto; }
.reveal-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.5rem; }
.tweak-box{ text-align:left; margin-top:2rem; }

/* ---------- dashboard ---------- */
.dash{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); align-items:start; }
.panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.4rem 1.5rem; box-shadow:var(--shadow-sm); min-width:0;
  border-top:4px solid var(--pop);
}
/* each dashboard panel gets its own hue along the top edge */
.dash .panel:nth-child(4n+2){ border-top-color:var(--sun); }
.dash .panel:nth-child(4n+3){ border-top-color:var(--mint); }
.dash .panel:nth-child(4n){ border-top-color:var(--lilac); }
.panel h2{ font-size:var(--fs-2); margin-bottom:.75rem; }
.panel .empty{ color:var(--muted); font-size:var(--fs-0); }
.status-pill{
  display:inline-block; padding:.2rem .8rem; border-radius:999px; font-weight:800;
  font-size:var(--fs-0); background:var(--ok-soft); color:var(--ok);
}
.status-pill.warn{ background:var(--warn-soft); color:var(--warn); }
.msg{ border-top:1px dashed var(--line); padding:.75rem 0; }
.msg:first-of-type{ border-top:0; }
.msg .m-who{ font-weight:700; }
.msg .m-when{ color:var(--muted); font-size:var(--fs-0); }
.msg p{ margin:.25rem 0 0; font-size:var(--fs-0); color:var(--ink-2); }

/* pure-CSS stat bars */
.bars{ display:grid; grid-auto-flow:column; align-items:end; gap:.3rem; height:7rem; margin:.75rem 0 .25rem; }
.bars .bar{
  background:var(--pop); border-radius:3px 3px 0 0; min-height:2px; align-self:end;
  position:relative;
}
.bars .bar:hover{ background:var(--pop-deep); }
.bars .bar span{
  position:absolute; bottom:calc(100% + .25rem); left:50%; transform:translateX(-50%);
  font-size:.65rem; color:var(--muted); white-space:nowrap; opacity:0;
}
.bars .bar:hover span{ opacity:1; }
.bars-cap{ display:flex; justify-content:space-between; font-size:var(--fs-0); color:var(--muted); }

.order{ display:flex; justify-content:space-between; gap:.75rem; border-top:1px dashed var(--line); padding:.6rem 0; font-size:var(--fs-0); }
.order:first-of-type{ border-top:0; }
.order .o-amount{ font-weight:700; white-space:nowrap; }

.approve-strip{
  background:var(--sun-soft); border-radius:var(--r-md); padding:1rem 1.25rem;
  margin-bottom:1rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  justify-content:space-between;
}
.approve-strip p{ margin:0; font-weight:600; }

/* ---------- 404 ---------- */
.lost{
  min-height:100dvh; display:grid; place-items:center; text-align:center;
  padding:2rem 1rem;
}
.lost .code{
  font-size:clamp(4rem, 18vw, 8rem); font-weight:800; letter-spacing:-.04em;
  line-height:1; color:var(--pop); margin-bottom:.5rem;
}
.lost .code span{ display:inline-block; }
.lost .code span:nth-child(1){ color:var(--pop); transform:rotate(-6deg); }
.lost .code span:nth-child(2){ color:var(--mint-deep); transform:translateY(.06em); }
.lost .code span:nth-child(3){ color:var(--lilac-deep); transform:rotate(5deg); }
@media (prefers-reduced-motion: no-preference){
  .lost .code span{ animation:lost-bob 4.5s ease-in-out infinite; }
  .lost .code span:nth-child(2){ animation-delay:-1.5s; }
  .lost .code span:nth-child(3){ animation-delay:-3s; }
  @keyframes lost-bob{
    0%,100%{ translate:0 0; }
    50%{ translate:0 -.12em; }
  }
}
.lost p{ color:var(--ink-2); margin-left:auto; margin-right:auto; }

/* ---------- motion helpers ---------- */

/* scroll reveal: only ever hides content when JS has confirmed it is running
   (body.reveal-init) AND the visitor is happy with motion */
@media (prefers-reduced-motion: no-preference){
  /* uses `translate` (not transform) so it composes with tilts + hover lifts */
  .reveal-init [data-reveal]{
    opacity:0; translate:0 18px;
    transition:opacity .2s ease-out, translate .2s ease-out;
    transition-delay:var(--rd, 0s);
  }
  .reveal-init [data-reveal].revealed{ opacity:1; translate:none; }

  .float{ animation:floaty 7s ease-in-out infinite; }
  .float-slow{ animation:floaty 11s ease-in-out infinite reverse; }
  .build-art{ animation:floaty 6s ease-in-out infinite; }
  .view-enter{ animation:rise-in .45s cubic-bezier(.22,1,.36,1) both; }
}
@keyframes floaty{
  0%,100%{ transform:translateY(0) rotate(var(--tilt, 0deg)); }
  50%{ transform:translateY(-10px) rotate(calc(var(--tilt, 0deg) + 2deg)); }
}
@keyframes rise-in{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}

/* celebration burst (added by JS on big moments, removed after) */
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:70; overflow:hidden; }
.confetti i{
  position:absolute; top:-5vh; width:.55rem; height:.9rem; border-radius:2px;
  opacity:0; animation:confetti-fall var(--cd, 2.6s) ease-in var(--cdl, 0s) forwards;
}
@keyframes confetti-fall{
  0%{ opacity:1; transform:translateY(0) rotate(0) ; }
  85%{ opacity:1; }
  100%{ opacity:0; transform:translateY(108vh) rotate(660deg); }
}

/* ---------- responsive ---------- */
@media (max-width:959px){
  .wiz{ grid-template-columns:minmax(0,1fr); }
  .basket{ position:static; order:-1; }
}
@media (max-width:700px){
  .dirs{ grid-template-columns:minmax(0,1fr); }
  h1{ font-size:var(--fs-4); }
  h2{ font-size:var(--fs-3); }
}
@media (max-width:420px){
  .asset{ grid-template-columns:auto minmax(0,1fr); }
  .asset .a-del{ grid-column:2; justify-self:end; }
}

/* ---------- motion safety ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}