/* Sedavea — v1.3: "lumière" luxury pass + tray alignment fix.
   Keeps the v1.2 depth system (elevation variables, rim light, glass,
   coin medallion, recessed trays, wax-seal verdict, stacked-paper brief
   card) and retunes it toward light: an ivory/blush luminous interior,
   rose and rose-gold accents, champagne-gold foil, plum ink reserved
   for type, the masthead, selected states and the CTA. Airier spacing
   (~+25%), softer rose-tinted shadows, pale-gold hairlines, tiny CSS
   sparkle glints and a gently floating medallion. Defect fixes: the two
   photo trays share one exact top line (fixed-height single-line label
   row + equal grid columns), the creator CTA sits in a frosted-glass
   dock instead of colliding with scrolling chips, and labels/pills are
   nowrap with container- or viewport-clamped sizing at 360px.
   System font stacks only. No external assets. */

:root {
  --plum: #2E1226;
  --plum-deep: #1C0719;
  --plum-soft: #4A2350;
  --wine: #6D1735;
  --wine-deep: #571128;
  --rose: #B04A6B;
  --rose-soft: #E8B4B8;
  --rose-gold: #B76E79;
  --champagne: #EAD9B0;
  --champagne-soft: #F6ECD4;
  --champagne-deep: #C9A86A;
  --gold-bright: #E7C873;
  --gold-deep: #B08A2E;
  --gold-dark: #A37F3C;
  --gold-text: #7C5E14;        /* antique gold, dark enough for small caps */
  --blush: #F0C6BF;
  --blush-deep: #E2A294;
  --blush-soft: #FBEEE9;
  --lilac: #B79AC8;
  --ivory: #FFF9F4;
  --paper: #FFFDF9;
  --ink: #33202E;
  --ink-soft: #54404D;
  --muted: #857180;
  --hairline: #F2E2C6;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- elevation system: rim light + rose-tinted near/far shadows ---- */
  --rim: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --rim-soft: inset 0 1px 0 rgba(255, 255, 255, 0.38);
  --e1: 0 1px 2px rgba(94, 30, 52, 0.05), 0 5px 12px rgba(183, 110, 121, 0.10);
  --e2: 0 2px 4px rgba(94, 30, 52, 0.05), 0 12px 24px rgba(183, 110, 121, 0.13),
        0 26px 44px rgba(46, 18, 38, 0.05);
  --e3: 0 3px 6px rgba(94, 30, 52, 0.06), 0 18px 34px rgba(183, 110, 121, 0.16),
        0 38px 64px rgba(46, 18, 38, 0.07);
  --e4: 0 6px 12px rgba(46, 18, 38, 0.08), 0 26px 50px rgba(146, 74, 96, 0.16),
        0 52px 96px rgba(28, 7, 25, 0.18);
  /* recessed well (trays, inputs): the surface sinks into the page */
  --well: inset 0 2px 6px rgba(146, 74, 96, 0.12),
          inset 0 12px 28px rgba(183, 110, 121, 0.12),
          inset 0 -1px 0 rgba(255, 255, 255, 0.7);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  background-color: var(--plum-deep);
  /* Feminine gradient-mesh world behind the app column (desktop margins). */
  background:
    radial-gradient(720px 460px at 6% -6%, rgba(176, 74, 107, 0.50), rgba(176, 74, 107, 0) 62%),
    radial-gradient(840px 520px at 97% 2%, rgba(234, 217, 176, 0.30), rgba(234, 217, 176, 0) 58%),
    radial-gradient(760px 720px at 50% 110%, rgba(183, 154, 200, 0.30), rgba(183, 154, 200, 0) 60%),
    radial-gradient(560px 460px at 92% 64%, rgba(109, 23, 53, 0.46), rgba(109, 23, 53, 0) 65%),
    radial-gradient(480px 380px at 0% 58%, rgba(74, 35, 80, 0.52), rgba(74, 35, 80, 0) 60%),
    linear-gradient(160deg, #38123A 0%, var(--plum) 40%, var(--plum-deep) 100%);
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed; inset: -12% -8%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(340px 340px at 14% 22%, rgba(240, 198, 191, 0.20), rgba(240, 198, 191, 0) 70%),
    radial-gradient(420px 420px at 86% 30%, rgba(201, 168, 106, 0.16), rgba(201, 168, 106, 0) 70%),
    radial-gradient(380px 380px at 72% 88%, rgba(183, 154, 200, 0.18), rgba(183, 154, 200, 0) 70%);
  filter: blur(46px);
}
::selection { background: var(--rose-soft); color: var(--plum); }

.app {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 0 18px calc(36px + env(safe-area-inset-bottom));
  /* The luminous interior: ivory dominant, blush/rose washes of light. */
  background:
    radial-gradient(640px 340px at 104% 8%, rgba(232, 180, 184, 0.42), rgba(232, 180, 184, 0) 60%),
    radial-gradient(540px 420px at -6% 38%, rgba(183, 154, 200, 0.16), rgba(183, 154, 200, 0) 62%),
    radial-gradient(660px 380px at 94% 74%, rgba(234, 217, 176, 0.30), rgba(234, 217, 176, 0) 60%),
    radial-gradient(520px 320px at 0% 97%, rgba(232, 180, 184, 0.28), rgba(232, 180, 184, 0) 60%),
    linear-gradient(180deg, #FFFBF5 0%, var(--ivory) 32%, #FCF0E6 100%);
  box-shadow:
    0 0 0 1px rgba(234, 217, 176, 0.10),
    0 30px 70px rgba(0, 0, 0, 0.50),
    0 6px 18px rgba(0, 0, 0, 0.35);
}

/* ---------- entrance choreography ---------- */
@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
main { animation: viewIn 0.38s cubic-bezier(0.22, 0.8, 0.3, 1) both; }
.masthead     { animation: rise 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) 0.02s both; }
.hero         { animation: rise 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) 0.10s both; }
#creatorPanel { animation: rise 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) 0.18s both; }
#passportPanel { animation: rise 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) 0.26s both; }
.privacy      { animation: rise 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) 0.34s both; }
.tilt-scene   { animation: rise 0.60s cubic-bezier(0.22, 0.8, 0.3, 1) 0.06s both; }
.brief-actions { animation: rise 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) 0.16s both; }
#savePanel    { animation: rise 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) 0.24s both; }

/* ---------- masthead: slimmer, deeper plum band (brand anchor) ---------- */
.masthead {
  position: relative;
  margin: 0 -18px;
  overflow: hidden;
  border-radius: 0 0 28px 28px;
  background:
    radial-gradient(460px 230px at 88% -24%, rgba(234, 217, 176, 0.34), rgba(234, 217, 176, 0) 60%),
    radial-gradient(420px 300px at -12% 112%, rgba(176, 74, 107, 0.50), rgba(176, 74, 107, 0) 62%),
    radial-gradient(310px 200px at 58% 128%, rgba(183, 154, 200, 0.30), rgba(183, 154, 200, 0) 60%),
    radial-gradient(290px 190px at 30% -30%, rgba(232, 180, 184, 0.26), rgba(232, 180, 184, 0) 60%),
    linear-gradient(158deg, #55235C 0%, #37153C 44%, var(--plum) 76%, var(--plum-deep) 100%);
  border-bottom: 1px solid rgba(231, 200, 115, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(246, 236, 212, 0.25),
    0 16px 32px rgba(46, 18, 38, 0.30),
    0 4px 10px rgba(46, 18, 38, 0.20);
}
.masthead::before {              /* silk texture woven under the mesh */
  content: "";
  position: absolute; inset: 0;
  background: url("assets/silk-wave.webp") center 62% / cover no-repeat;
  opacity: 0.15;
  pointer-events: none;
}
.orb {                            /* blurred colour orbs inside the hero */
  position: absolute;
  border-radius: 50%;
  filter: blur(26px);
  pointer-events: none;
}
.orb-1 {
  width: 180px; height: 180px; right: -44px; top: -72px;
  background: radial-gradient(circle, rgba(246, 236, 212, 0.52), rgba(246, 236, 212, 0) 70%);
}
.orb-2 {
  width: 220px; height: 220px; left: -72px; bottom: -112px;
  background: radial-gradient(circle, rgba(232, 180, 184, 0.50), rgba(232, 180, 184, 0) 70%);
}
.orb-3 {
  width: 132px; height: 132px; left: 40%; top: -60px;
  background: radial-gradient(circle, rgba(183, 154, 200, 0.44), rgba(183, 154, 200, 0) 70%);
}
.topbar {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  padding: 16px 20px 15px;
}

/* ---- the medallion: a dimensional gold coin / seal, gently floating ---- */
.medallion {
  position: relative;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 26%, #F9EECB 0%, var(--champagne) 34%, var(--champagne-deep) 68%, var(--gold-dark) 100%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.85),
    inset 0 -4px 7px rgba(90, 60, 10, 0.45),
    inset 0 0 0 2px rgba(120, 88, 26, 0.35),
    0 0 0 3px rgba(28, 7, 25, 0.55),
    0 0 0 4.5px rgba(234, 217, 176, 0.35),
    0 14px 26px rgba(0, 0, 0, 0.42),
    0 4px 9px rgba(0, 0, 0, 0.32);
  animation: coinFloat 7s ease-in-out infinite;
}
@keyframes coinFloat {           /* ±2px drift — transform only, no layout shift */
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(2px); }
}
.medallion::before {              /* static top-left light on the coin */
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%);
  pointer-events: none;
}
.medallion::after {               /* slow silk sheen sweeping the coin */
  content: "";
  position: absolute; top: -12%; bottom: -12%; left: 0;
  z-index: 3;
  width: 45%;
  background: linear-gradient(90deg, rgba(255, 252, 240, 0), rgba(255, 252, 240, 0.55), rgba(255, 252, 240, 0));
  transform: translateX(-140%) skewX(-18deg);
  animation: coinSheen 5.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes coinSheen {
  0%, 56%   { transform: translateX(-140%) skewX(-18deg); }
  86%, 100% { transform: translateX(260%) skewX(-18deg); }
}
.medallion .logo {
  position: relative;
  z-index: 1;
  width: 49px; height: 49px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(90, 60, 10, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.medallion.small { width: 52px; height: 52px; }
.medallion.small .logo { width: 43px; height: 43px; }
.logo.small { border-radius: 50%; }

.brand { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.brand-name {
  font-family: var(--serif);
  font-size: 27px; font-weight: 600; letter-spacing: 0.055em;
  line-height: 1;
  color: var(--ivory);
  background: linear-gradient(180deg, #FFFDF6 20%, var(--champagne) 88%, var(--champagne-deep) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .brand-name { color: var(--ivory); -webkit-text-fill-color: currentColor; filter: none; }
}
.brand-tag {
  margin-top: 5px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.19em; text-transform: uppercase;
  color: rgba(234, 217, 176, 0.92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* ---- glass language toggle ---- */
.lang-toggle {
  display: flex; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px; overflow: hidden;
  background: rgba(255, 249, 244, 0.14);
  backdrop-filter: blur(10px) saturate(1.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -6px 12px rgba(46, 18, 38, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.25);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .lang-toggle { background: rgba(74, 35, 80, 0.55); }
}
.lang-btn {
  border: 0; background: transparent; cursor: pointer;
  color: rgba(255, 249, 244, 0.88);
  font-family: var(--sans); font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em;
  padding: 8px 14px; white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.lang-btn.active {
  background: linear-gradient(150deg, #F6ECD4, var(--champagne) 45%, var(--champagne-deep));
  color: var(--plum);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -3px 6px rgba(90, 60, 10, 0.30),
    0 3px 8px rgba(0, 0, 0, 0.22);
}

/* ---- sparkle glints: tiny four-point stars, pure CSS ---- */
.sparkle {
  position: absolute;
  z-index: 4;
  width: 13px; height: 13px;
  background: linear-gradient(135deg, #FFF6DC 0%, var(--gold-bright) 45%, var(--gold-deep) 100%);
  clip-path: polygon(50% 0%, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0% 50%, 37% 37%);
  filter: drop-shadow(0 0 5px rgba(231, 200, 115, 0.75));
  pointer-events: none;
  animation: twinkle 3.6s ease-in-out infinite alternate;
}
.sparkle.s1 { top: 30px; right: 7%; width: 14px; height: 14px; }
.sparkle.s2 { top: 118px; left: 4%; width: 9px; height: 9px; animation-delay: 1.2s; }
.sparkle.s3 { top: 12px; left: 118px; width: 10px; height: 10px; animation-delay: 2.1s; }
@keyframes twinkle {
  from { opacity: 0.25; transform: scale(0.72) rotate(0deg); }
  to   { opacity: 1;    transform: scale(1.08) rotate(14deg); }
}

/* ---------- hero: larger, calmer, more air ---------- */
.hero { position: relative; padding: 34px 2px 4px; }
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(33px, 9.2vw, 38px);
  line-height: 1.22; font-weight: 600; letter-spacing: 0.004em;
  color: var(--plum); margin: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.hero h1::after {
  content: "";
  display: block; width: 58px; height: 2.5px; border-radius: 3px;
  margin-top: 20px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), rgba(231, 200, 115, 0));
  box-shadow: 0 1px 3px rgba(176, 138, 46, 0.40);
}
.hero p { font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); margin: 15px 0 8px; }

/* ---------- panels: luminous ivory cards resting on the light ---------- */
.panel {
  position: relative;
  background: linear-gradient(180deg, #FFFCF7 0%, var(--ivory) 58%, #FBF1E6 100%);
  border: 1px solid rgba(231, 200, 115, 0.38);
  border-radius: 26px;
  padding: 26px 22px;
  margin: 20px 0;
  box-shadow: var(--rim), var(--e2);
}
.panel h2 {
  font-family: var(--serif);
  color: var(--plum); font-size: clamp(18.5px, 5.4vw, 21px); font-weight: 600;
  margin: 0 0 14px;
}
.panel h2::after {
  content: "";
  display: block; width: 36px; height: 2.5px; border-radius: 3px;
  margin-top: 11px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), rgba(231, 200, 115, 0));
}

/* ---------- section + field labels ---------- */
.step-label,
.field-label {
  display: block;
  font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--plum-soft);
}
/* DEFECT FIX A — the tray label row: ONE line, ONE fixed height.
   Both step labels live in equal grid columns (see .photos), and each
   label is locked to the same fixed-height, single-line box, so the two
   trays below them start at exactly the same y on every screen. The
   font is sized from the .photos container width (cqw) so the longer
   Spanish label ("1 · El look que quieres") fits its column unclipped:
   the steepest string needs ~13.9em of advance; at 4.6cqw the half
   column offers ~50cqw − gap, i.e. the label uses well under it. */
.step-label {
  height: 16px; line-height: 16px;
  font-size: 11px;                      /* fallback if cqw unsupported */
  font-size: clamp(8.5px, 4.6cqw, 11px);
  letter-spacing: 0.1em;
  letter-spacing: clamp(0.05em, 0.4cqw, 0.1em);
  white-space: nowrap;
  overflow: hidden;
}
.step-label::first-letter { color: var(--gold-text); font-family: var(--serif); font-size: 13px; }
.field-label {
  font-size: clamp(10.5px, 3.1vw, 11.5px);
  margin-bottom: 11px;
  text-wrap: balance;          /* sentence labels wrap evenly, never ragged */
}
.field { margin-top: 28px; }
.attr-group { margin-bottom: 16px; }
.attr-group .field-label { color: var(--muted); font-size: clamp(10px, 3vw, 11px); margin-bottom: 8px; }

/* ---------- photo trays: two equal columns, one shared top line ------- */
.photos {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* mathematically equal columns */
  align-items: start;
  gap: 14px;
  container-type: inline-size;      /* sizes the step-label font (cqw) */
}
.photo-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.photo-slot {
  position: relative;
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  aspect-ratio: 1 / 1.08;           /* equal widths ⇒ equal heights */
  padding: 10px;
  border: 1px solid rgba(201, 168, 106, 0.50);
  border-radius: 22px;
  background:
    radial-gradient(130% 95% at 50% 0%, #FDF0EC 0%, rgba(253, 240, 236, 0) 58%),
    linear-gradient(168deg, #F9E8E2 0%, #F4E3D3 55%, #EFDEC7 100%);
  box-shadow: var(--well);
  cursor: pointer; overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.15s ease;
}
.photo-slot::before {           /* inner dashed gold ring — empty state only */
  content: "";
  position: absolute; inset: 8px;
  border: 1.5px dashed rgba(176, 138, 46, 0.45);
  border-radius: 15px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.photo-slot:has(img:not([hidden]))::before { opacity: 0; }
.photo-slot::after {            /* outer hairline gold frame over tray + photo */
  content: "";
  position: absolute; inset: 0;
  border: 1px solid rgba(231, 200, 115, 0.55);
  border-radius: 22px;
  pointer-events: none;
}
.photo-slot:active { transform: scale(0.985); }
.photo-slot img {               /* the chosen photo: a raised print on the tray */
  position: absolute; inset: 9px;
  width: calc(100% - 18px); height: calc(100% - 18px);
  object-fit: cover;
  border-radius: 14px;
  box-shadow:
    0 12px 24px rgba(94, 30, 52, 0.26),
    0 3px 7px rgba(94, 30, 52, 0.15),
    0 0 0 1px rgba(201, 168, 106, 0.65);
}
.slot-plus {                    /* a small jewel coin hovering over the tray */
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, #743A78 0%, var(--plum-soft) 44%, var(--plum) 78%, var(--plum-deep) 100%);
  color: var(--champagne);
  font-size: 24px; font-weight: 300; line-height: 1;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -5px 9px rgba(0, 0, 0, 0.38),
    0 0 0 2px var(--rose-gold),
    0 0 0 3.5px rgba(231, 200, 115, 0.75),
    0 13px 22px rgba(94, 30, 52, 0.30),
    0 4px 8px rgba(94, 30, 52, 0.20);
}
.slot-plus::before {            /* gloss light pooled on the top half */
  content: "";
  position: absolute; left: 11%; right: 11%; top: 5%; height: 44%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.slot-text { font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--plum); white-space: nowrap; }
.wide-slot { aspect-ratio: 16 / 8; margin-bottom: 16px; }
.wide-slot .slot-plus { width: 40px; height: 40px; font-size: 21px; }

/* ---------- chips: ivory glass pills with volume ---------- */
.chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  container-type: inline-size;      /* sizes long look-name pills (cqw) */
}
.chip {
  display: inline-flex; align-items: center;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 16px;
  overflow: hidden;
  border: 1px solid rgba(183, 110, 121, 0.35);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(253, 244, 235, 0.90) 100%);
  color: var(--plum);
  font-family: var(--sans);
  font-size: 14px;                  /* fallback if cqw unsupported */
  font-size: clamp(12px, 4.2cqw, 14px);
  font-weight: 600; line-height: 1.15;
  white-space: nowrap;              /* a pill's text never breaks mid-pill */
  cursor: pointer;
  box-shadow:
    var(--rim),
    0 2px 4px rgba(94, 30, 52, 0.06),
    0 9px 17px rgba(183, 110, 121, 0.10);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, transform 0.12s ease;
}
.chip.active {
  background: linear-gradient(150deg, #743A78 0%, var(--plum-soft) 34%, var(--plum) 72%, var(--plum-deep) 100%);
  color: var(--champagne);
  border-color: rgba(201, 168, 106, 0.60);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(246, 236, 212, 0.50),
    inset 0 -7px 13px rgba(0, 0, 0, 0.30),
    inset 0 0 0 1px rgba(234, 217, 176, 0.22),
    0 10px 20px rgba(46, 18, 38, 0.26),
    0 3px 7px rgba(46, 18, 38, 0.16);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.chip:active {
  transform: translateY(1px) scale(0.98);
  box-shadow:
    var(--rim-soft),
    0 1px 2px rgba(94, 30, 52, 0.07),
    0 4px 9px rgba(183, 110, 121, 0.10);
}
.chip.active:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    inset 0 1px 0 rgba(246, 236, 212, 0.40),
    inset 0 -4px 9px rgba(0, 0, 0, 0.30),
    0 5px 11px rgba(46, 18, 38, 0.22);
}
.small-chip { min-height: 36px; padding: 7px 13px; font-size: 12.5px; }

/* ---------- notes / warnings: tinted glass ---------- */
.note {
  margin: 26px 0 0;
  padding: 13px 15px;
  font-size: 12.5px; line-height: 1.58; color: #5D4753;
  background: linear-gradient(160deg, rgba(232, 180, 184, 0.26), rgba(234, 217, 176, 0.28));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(231, 200, 115, 0.42);
  border-radius: 14px;
  box-shadow: var(--rim-soft), var(--e1);
}
.warn {
  margin: 13px 0 0;
  padding: 12px 14px;
  font-size: 13px; font-weight: 600; color: var(--wine);
  background: linear-gradient(160deg, rgba(176, 74, 107, 0.10), rgba(166, 43, 74, 0.07));
  border: 1px solid rgba(166, 43, 74, 0.28);
  border-radius: 12px;
  box-shadow: var(--rim-soft), var(--e1);
}

/* ---------- buttons ---------- */
.cta {
  position: relative;
  overflow: hidden;
  display: block; width: 100%;
  margin-top: 20px; padding: 17px 18px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(150deg, #84355F 0%, var(--wine) 30%, var(--plum-soft) 66%, var(--plum-deep) 112%);
  color: var(--champagne);
  font-family: var(--sans);
  font-size: 14.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.40);
  box-shadow:
    inset 0 1px 0 rgba(246, 236, 212, 0.45),
    inset 0 -8px 16px rgba(0, 0, 0, 0.30),
    0 16px 30px rgba(46, 18, 38, 0.30),
    0 5px 11px rgba(109, 23, 53, 0.22);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.cta::before {                  /* gloss pooled over the top half */
  content: "";
  position: absolute; left: 3px; right: 3px; top: 2px; height: 52%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.02));
  pointer-events: none;
}
.cta::after {                   /* slow sheen sweep */
  content: "";
  position: absolute; top: -25%; bottom: -25%; left: 0;
  width: 34%;
  background: linear-gradient(90deg, rgba(255, 244, 214, 0), rgba(255, 244, 214, 0.38), rgba(255, 244, 214, 0));
  transform: translateX(-160%) skewX(-18deg);
  animation: ctaSheen 4.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaSheen {
  0%, 52%   { transform: translateX(-160%) skewX(-18deg); }
  84%, 100% { transform: translateX(420%) skewX(-18deg); }
}
.cta:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(246, 236, 212, 0.35),
    inset 0 -5px 11px rgba(0, 0, 0, 0.30),
    0 8px 16px rgba(46, 18, 38, 0.28),
    0 2px 5px rgba(109, 23, 53, 0.20);
  filter: brightness(1.10);
}
/* DEFECT FIX B — the creator CTA lives in a frosted-glass dock.
   The dock (not the button) is the sticky element: it bleeds to the
   panel edges, carries a hairline top border and a soft upward shadow,
   and its translucent ivory + backdrop blur frosts any chips scrolling
   beneath it, so nothing ever visually collides with the button. The
   panel's extra bottom padding (26px, matched by the dock's negative
   margin) keeps the last field clear of the dock at rest. */
.cta-dock {
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin: 26px -22px -26px;
  padding: 14px 22px calc(13px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255, 250, 243, 0.70), rgba(253, 243, 233, 0.88));
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-top: 1px solid rgba(231, 200, 115, 0.50);
  border-radius: 0 0 26px 26px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 -12px 28px rgba(146, 74, 96, 0.10);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .cta-dock { background: linear-gradient(180deg, rgba(255, 250, 243, 0.96), rgba(253, 243, 233, 0.98)); }
}
.cta-dock .cta { margin-top: 0; }
.ghost {
  border: 1px solid rgba(74, 35, 80, 0.34);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(6px) saturate(1.3);
  -webkit-backdrop-filter: blur(6px) saturate(1.3);
  color: var(--plum);
  border-radius: 999px; padding: 10px 18px;
  font-family: var(--sans); font-weight: 700; font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--rim), var(--e1);
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.ghost:active {
  background: rgba(251, 238, 233, 0.85);
  transform: translateY(1px) scale(0.98);
  box-shadow: var(--rim-soft), 0 1px 3px rgba(94, 30, 52, 0.07);
}
.ghost.wide { width: 100%; margin-top: 14px; padding: 14px; }
#btnBack {
  width: 44px; height: 44px; padding: 0; margin: 18px 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: linear-gradient(180deg, #FFFFFF, #FBF2E4);
}

button:focus-visible,
.chip:focus-visible,
.photo-slot:focus-visible,
.lang-btn:focus-visible {
  outline: 2px solid var(--champagne-deep);
  outline-offset: 2px;
}

/* ---------- the brief card: a physical object ---------- */
.tilt-scene {
  perspective: 1200px;
  margin-top: 12px;
}
.tilt-wrap {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}
/* Stacked card stock: two sheets resting beneath the card. */
.tilt-wrap::before,
.tilt-wrap::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  border-radius: 28px;
  border: 1px solid rgba(231, 200, 115, 0.45);
  box-shadow: var(--e2);
}
.tilt-wrap::before {
  background: linear-gradient(180deg, #FDF6EA, #F1E4CC);
  transform: rotate(-1.5deg) translateY(7px);
}
.tilt-wrap::after {
  background: linear-gradient(180deg, #FFFDF8, #F7EDD9);
  transform: rotate(1.15deg) translateY(3.5px);
}
.brief-card {
  position: relative;
  z-index: 1;
  padding: 26px 22px;
  background: linear-gradient(180deg, #FFFCF7 0%, var(--ivory) 55%, #FCF3E8 100%);
  border: 1px solid rgba(231, 200, 115, 0.55);
  border-radius: 26px;
  box-shadow: var(--rim), var(--e4);
  overflow: hidden;
}
/* Light that follows the tilt (fx.js sets --gx / --gy). */
.brief-card::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 6;
  border-radius: inherit;
  background: radial-gradient(430px circle at var(--gx, 50%) var(--gy, 0%),
              rgba(255, 250, 235, 0.16), rgba(255, 250, 235, 0) 62%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.tilt-wrap.fx-tilting .brief-card::after { opacity: 1; }

.brief-head {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  margin: -26px -22px 22px;
  padding: 22px 22px 19px;
  overflow: hidden;
  background:
    radial-gradient(340px 170px at 90% -30%, rgba(234, 217, 176, 0.30), rgba(234, 217, 176, 0) 60%),
    radial-gradient(300px 220px at -8% 120%, rgba(176, 74, 107, 0.40), rgba(176, 74, 107, 0) 62%),
    linear-gradient(148deg, #55235C, var(--plum) 58%, var(--plum-deep));
  border-bottom: 1px solid rgba(231, 200, 115, 0.70);
  box-shadow:
    inset 0 1px 0 rgba(246, 236, 212, 0.28),
    inset 0 -14px 26px rgba(0, 0, 0, 0.22),
    0 10px 22px rgba(46, 18, 38, 0.16);
}
.brief-head::before {
  content: "";
  position: absolute; inset: 0;
  background: url("assets/silk-wave.webp") center 60% / cover no-repeat;
  opacity: 0.15;
  pointer-events: none;
}
.brief-head > * { position: relative; z-index: 1; }
.brief-head h2 {                /* gold foil title */
  font-family: var(--serif);
  margin: 0;
  font-size: clamp(19px, 5.6vw, 22px); font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--champagne);
  background: linear-gradient(100deg, #B8944F 0%, #F6ECD4 26%, var(--champagne) 44%,
              var(--champagne-deep) 60%, #F1E3BC 80%, #B8944F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .brief-head h2 { color: var(--ivory); -webkit-text-fill-color: currentColor; filter: none; }
}
.brief-look { display: block; margin-top: 4px; font-size: 13.5px; color: rgba(234, 217, 176, 0.88); }

.brief-photos { display: flex; gap: 12px; margin: 2px 0 20px; }
.brief-photos img {             /* raised, gold-framed prints on the card */
  flex: 1; width: 50%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 17px;
  border: 1px solid rgba(201, 168, 106, 0.65);
  background: var(--blush-soft);
  box-shadow:
    var(--rim-soft),
    0 12px 24px rgba(94, 30, 52, 0.14),
    0 3px 7px rgba(94, 30, 52, 0.09);
}

/* verdict + the wax seal */
.verdict {
  border-radius: 22px;
  padding: 24px 20px 20px;
  background: linear-gradient(165deg, #FCF4E3, #F6EACD);
  border: 1px solid rgba(231, 200, 115, 0.50);
  box-shadow:
    var(--rim),
    inset 0 10px 24px rgba(255, 255, 255, 0.35),
    var(--e1);
}
.verdict.v-changes {
  background: linear-gradient(165deg, #FCF1ED, #F7E0D8);
  border-color: rgba(226, 162, 148, 0.55);
}
.verdict.v-fight {
  background: linear-gradient(165deg, #FAEAEE, #F2D6DD);
  border-color: rgba(142, 35, 71, 0.30);
}
.verdict-label {                /* glossy wax-seal medallion */
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
  max-width: 250px; min-height: 62px;
  padding: 13px 30px;
  border-radius: 50%;
  font-family: var(--serif); font-size: 16.5px; font-weight: 600; letter-spacing: 0.02em;
  line-height: 1.25;
  color: #4A3405;
  background: radial-gradient(ellipse at 38% 28%, #FAF0D2 0%, var(--champagne) 42%, var(--champagne-deep) 76%, var(--gold-dark) 105%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.80),
    inset 0 -6px 10px rgba(90, 60, 10, 0.42),
    inset 0 0 0 2px rgba(120, 88, 26, 0.35),
    inset 0 0 0 6.5px rgba(255, 248, 226, 0.30),
    0 12px 22px rgba(94, 30, 52, 0.22),
    0 3px 7px rgba(94, 30, 52, 0.13);
  text-shadow: 0 1px 0 rgba(255, 250, 235, 0.55), 0 -1px 1px rgba(90, 60, 10, 0.35);
  transform: rotate(-2deg);
}
.verdict.v-changes .verdict-label {
  color: #5E1226;
  background: radial-gradient(ellipse at 38% 28%, #FCE7E0 0%, var(--blush) 45%, var(--blush-deep) 78%, #BC7663 105%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.80),
    inset 0 -6px 10px rgba(122, 52, 40, 0.38),
    inset 0 0 0 2px rgba(140, 66, 52, 0.32),
    inset 0 0 0 6.5px rgba(255, 240, 234, 0.35),
    0 12px 22px rgba(94, 30, 52, 0.22),
    0 3px 7px rgba(94, 30, 52, 0.13);
  text-shadow: 0 1px 0 rgba(255, 244, 238, 0.60), 0 -1px 1px rgba(122, 52, 40, 0.30);
}
.verdict.v-fight .verdict-label {
  color: #F3E3C2;
  background: radial-gradient(ellipse at 38% 28%, #B04A6B 0%, #8E2347 42%, var(--wine) 74%, var(--wine-deep) 105%);
  box-shadow:
    inset 0 2px 3px rgba(255, 220, 228, 0.45),
    inset 0 -6px 10px rgba(30, 2, 12, 0.50),
    inset 0 0 0 2px rgba(40, 4, 18, 0.40),
    inset 0 0 0 6.5px rgba(255, 214, 224, 0.16),
    0 12px 22px rgba(94, 30, 52, 0.26),
    0 3px 7px rgba(94, 30, 52, 0.15);
  text-shadow: 0 1px 0 rgba(255, 226, 232, 0.30), 0 -1px 1px rgba(30, 2, 12, 0.45);
}
/* fx.js replays this pop each time a fresh brief appears. */
@keyframes sealPop {
  0%   { transform: rotate(-2deg) scale(0.86); }
  55%  { transform: rotate(-2deg) scale(1.045); }
  100% { transform: rotate(-2deg) scale(1); }
}
.tilt-wrap.fx-pop .verdict-label { animation: sealPop 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) both; }

.verdict h3,
.stylist-card h3,
.upkeep h3 {
  margin: 18px 0 8px;
  font-size: clamp(11px, 3.3vw, 12.5px); font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-text);
}
.verdict ul { margin: 2px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.verdict p { font-size: 14px; line-height: 1.6; margin: 2px 0 0; }
#nearestBlock { margin-top: 6px; }

.card-lang-row { display: flex; justify-content: center; gap: 8px; margin: 20px 0 0; }

/* stylist card */
.stylist-card {
  margin-top: 18px;
  padding: 10px 20px 18px;
  background: linear-gradient(180deg, #FFFCF7, #FBF5EA);
  border: 1px solid rgba(231, 200, 115, 0.55);
  border-top: 3px solid var(--champagne-deep);
  border-radius: 20px;
  box-shadow: var(--rim), var(--e2);
}
.stylist-card h3 {
  margin-top: 14px; padding-bottom: 11px;
  border-bottom: 1px solid #F3E7D0;
}
.stylist-card dl { margin: 2px 0 4px; }
.stylist-card dt {
  margin-top: 14px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden;
  color: var(--gold-text);
}
.stylist-card dd {
  margin: 4px 0 0; padding-bottom: 11px;
  font-size: 15px; line-height: 1.5;
  border-bottom: 1px solid #F6EDDB;
}
.stylist-card dl dd:last-of-type { border-bottom: 0; padding-bottom: 2px; }
.stylist-card h4 {
  margin: 16px 0 6px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--plum);
}
.stylist-card ol { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.stylist-card p { font-size: 14px; line-height: 1.6; margin: 0; }

/* upkeep: a lighter champagne glass panel with inner glow */
.upkeep {
  margin-top: 20px;
  padding: 20px 20px 17px;
  background: linear-gradient(158deg, rgba(252, 244, 222, 0.84), rgba(246, 233, 203, 0.72));
  backdrop-filter: blur(6px) saturate(1.25);
  -webkit-backdrop-filter: blur(6px) saturate(1.25);
  border: 1px solid rgba(231, 200, 115, 0.60);
  border-radius: 22px;
  box-shadow:
    var(--rim),
    inset 0 0 0 1px rgba(255, 250, 235, 0.35),
    inset 0 -16px 30px rgba(201, 168, 106, 0.16),
    inset 0 12px 26px rgba(255, 255, 255, 0.38),
    var(--e1);
  container-type: inline-size;    /* sizes the micro labels (cqw) */
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .upkeep { background: linear-gradient(158deg, #FBF2DA, #F4E7C9); }
}
.upkeep h3 { margin-top: 2px; }
.upkeep-grid { display: flex; align-items: start; }
.upkeep-grid > div {
  flex: 1 1 0; text-align: center;
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0; overflow: hidden;
  padding: 2px 4px;
}
.upkeep-grid > div:nth-child(3) { flex-grow: 1.3; }  /* room for the long ES label */
.upkeep-grid > div + div { border-left: 1px solid rgba(160, 124, 50, 0.24); }
.up-num {
  font-family: var(--serif);
  font-size: 21px; font-weight: 600; line-height: 1.2;
  color: var(--plum);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
.upkeep-grid > div:nth-child(3) .up-num {   /* first-year cost: foil hero numeral */
  font-size: 29px;
  background: linear-gradient(100deg, #7A5A14 0%, #B8944F 30%, #8C6D1F 52%, #C9A86A 74%, #7A5A14 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.45));
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .upkeep-grid > div:nth-child(3) .up-num {
    color: var(--plum); -webkit-text-fill-color: currentColor; filter: none;
  }
}
.up-lab {
  font-size: 10.5px;               /* fallback if cqw unsupported */
  font-size: clamp(7.5px, 3cqw, 10.5px);
  font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
  color: #6E5514;
}
.basis {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid rgba(160, 124, 50, 0.22);
  font-size: 12px; line-height: 1.55; color: rgba(51, 32, 46, 0.75);
}
.honesty {
  margin: 22px 0 2px; padding-top: 16px;
  border-top: 1px dashed rgba(201, 168, 106, 0.60);
  font-family: var(--serif); font-style: italic;
  font-size: 13px; line-height: 1.65; text-align: center;
  color: var(--ink-soft);
}

/* brief actions + save */
.brief-actions { margin-top: 22px; }
.brief-actions .cta { margin-top: 0; }
.toast {
  display: block;
  margin-top: 14px; padding: 11px 15px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(47, 107, 79, 0.12), rgba(47, 107, 79, 0.08));
  border: 1px solid rgba(47, 107, 79, 0.28);
  font-size: 13px; font-weight: 600; color: #2F6B4F;
  text-align: center;
  box-shadow: var(--rim-soft), var(--e1);
}
.toast[hidden] { display: none; }

.txt-label {
  display: block;
  margin: 18px 0 0;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--plum-soft);
}
.txt-label input {              /* a well the text sinks into */
  display: block; width: 100%;
  margin-top: 8px; padding: 13px 15px;
  font-family: var(--sans); font-size: 15px;
  color: var(--ink);
  background: linear-gradient(180deg, #FBF3E4, #FFFDF9);
  border: 1px solid #E4D2B4; border-radius: 14px;
  box-shadow: inset 0 2px 6px rgba(94, 30, 52, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.7);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.txt-label input:focus {
  outline: none;
  border-color: var(--champagne-deep);
  box-shadow:
    inset 0 2px 6px rgba(94, 30, 52, 0.05),
    0 0 0 3px rgba(201, 168, 106, 0.25),
    0 6px 14px rgba(94, 30, 52, 0.07);
}

/* ---------- passport: timeline cards in the same light ---------- */
#passportList { margin-top: 2px; }
.passport-entry {
  display: flex; gap: 14px;
  margin-top: 14px; padding: 16px;
  background: linear-gradient(180deg, #FFFFFF, #FCF6EC);
  border: 1px solid rgba(231, 200, 115, 0.42);
  border-left: 3px solid var(--champagne-deep);
  border-radius: 20px;
  box-shadow: var(--rim), var(--e2);
}
.passport-entry:first-child { margin-top: 0; }
.passport-entry img {           /* raised gold-framed thumbnail */
  width: 76px; height: 76px; flex-shrink: 0;
  object-fit: cover;
  border-radius: 15px;
  border: 1px solid rgba(201, 168, 106, 0.60);
  background: var(--blush-soft);
  box-shadow:
    0 10px 18px rgba(94, 30, 52, 0.14),
    0 2px 5px rgba(94, 30, 52, 0.09),
    0 0 0 3px rgba(246, 236, 212, 0.65);
}
.passport-meta { flex: 1; min-width: 0; }
.passport-meta .p-look {
  font-family: var(--serif);
  font-size: 16.5px; font-weight: 600;
  color: var(--plum);
}
.passport-meta .p-line { margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.passport-meta .p-remind {      /* small glossy pill */
  display: inline-block;
  margin-top: 9px; padding: 4px 11px;
  border-radius: 999px;
  background: linear-gradient(150deg, #FAF0D2, #F1E2C4 55%, #E7D3A8);
  border: 1px solid rgba(201, 168, 106, 0.60);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -3px 6px rgba(163, 127, 60, 0.22),
    0 4px 9px rgba(94, 30, 52, 0.09);
  font-size: 11.5px; font-weight: 700; color: var(--plum);
  white-space: nowrap;
}
.p-actions { display: flex; gap: 8px; margin-top: 11px; }
.p-actions button {
  padding: 7px 13px;
  border: 1px solid rgba(74, 35, 80, 0.32);
  border-radius: 999px;
  background: linear-gradient(180deg, #FFFFFF, #FBF2E4);
  color: var(--plum);
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--rim), 0 3px 8px rgba(94, 30, 52, 0.08);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.18s ease;
}
.p-actions button:first-child {
  background: linear-gradient(150deg, #743A78, var(--plum-soft) 40%, var(--plum));
  color: var(--champagne);
  border-color: rgba(201, 168, 106, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(246, 236, 212, 0.45),
    inset 0 -5px 10px rgba(0, 0, 0, 0.28),
    0 8px 16px rgba(46, 18, 38, 0.24);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.p-actions button:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: var(--rim-soft), 0 1px 3px rgba(94, 30, 52, 0.09);
}
.empty {                        /* soft glass over the silk texture */
  margin: 0; padding: 26px 20px;
  border: 1px dashed rgba(201, 168, 106, 0.65);
  border-radius: 20px;
  background:
    linear-gradient(rgba(255, 253, 248, 0.85), rgba(255, 249, 244, 0.91)),
    url("assets/silk-wave.webp") center / cover no-repeat;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: var(--rim-soft), var(--e1);
  font-family: var(--serif);
  font-size: 14.5px; line-height: 1.65; text-align: center;
  color: #5D4753;
}

/* ---------- privacy + footer ---------- */
.privacy p { font-size: 13.5px; line-height: 1.7; color: var(--ink); margin: 0; }
.foot { text-align: center; padding: 10px 0 0; }
.foot .wave {
  width: 100%; height: 60px; object-fit: cover;
  border-radius: 17px;
  border: 1px solid rgba(231, 200, 115, 0.50);
  box-shadow: var(--rim-soft), var(--e2);
  opacity: 0.97;
}
.foot p {
  margin: 14px 0 0;
  font-family: var(--serif); font-style: italic;
  font-size: 12px; letter-spacing: 0.03em;
  color: var(--muted);
}

/* ---------- desktop ---------- */
@media (min-width: 560px) {
  body { padding: 26px 0; }
  .app { border-radius: 26px; min-height: auto; }
  .masthead { border-radius: 25px 25px 28px 28px; }
}

/* ---------- reduced motion: neutralise sweeps, float, twinkle, tilt glow, entrances ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tilt-wrap.fx-tilting .brief-card::after { opacity: 0; }
}