/* ═══════════════════════════════════════════════════════════════════
   BoutiqueHQ · Porcelain Glass — shared material layer (F1/F4/F5/F6)
   Loaded AFTER each page's base styles; upgrades the flat porcelain
   surfaces to the three-tier glass system from the frontend master plan.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --glass-hi:rgba(255,255,255,.78);
  --glass-mid:rgba(255,255,255,.5);
  --glass-lo:rgba(255,255,255,.28);
  --spec:rgba(255,255,255,.92);
  --field-rose:rgba(236,72,153,.10);
  --field-gold:rgba(201,154,63,.09);
  --field-violet:rgba(122,74,140,.06);
  --spring:cubic-bezier(.3,1.4,.4,1);
  --easeout:cubic-bezier(.2,.7,.3,1);
  --shadow-panel:0 18px 44px -20px rgba(28,20,32,.28);
  --shadow-float:0 14px 34px -12px rgba(236,72,153,.45);
}

/* ── the ambient field: light for the glass to refract ─────────────── */
body{position:relative}
body::before,body::after{
  content:"";position:fixed;z-index:-1;border-radius:50%;pointer-events:none;
  filter:blur(70px);will-change:transform;
}
body::before{
  width:56vw;height:56vw;left:-16vw;top:-18vw;
  background:radial-gradient(circle at 40% 40%,var(--field-rose),transparent 68%);
  animation:bhq-drift-a 46s ease-in-out infinite alternate;
}
body::after{
  width:48vw;height:48vw;right:-14vw;bottom:-16vw;
  background:radial-gradient(circle at 55% 55%,var(--field-gold),transparent 66%),
             radial-gradient(circle at 30% 30%,var(--field-violet),transparent 70%);
  animation:bhq-drift-b 54s ease-in-out infinite alternate;
}
@keyframes bhq-drift-a{to{transform:translate(9vw,7vh) scale(1.12)}}
@keyframes bhq-drift-b{to{transform:translate(-8vw,-8vh) scale(.92)}}

/* ── tier 1 · glass-nav (site nav, app top bar & sidebar) ──────────── */
nav, .top{
  background:rgba(252,250,247,.7)!important;
  backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:inset 0 1px 0 var(--spec);
}
.side{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.62))!important;
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:inset -1px 0 0 rgba(236,230,224,.9), inset 0 1px 0 var(--spec);
  border-right:0!important;
}

/* ── tier 2 · glass-panel (cards of every lineage) ─────────────────── */
.card,.dcard,.tier,.vig,.creator,.stat,.f,.hstep,.newcard,.surface,.glasscard{
  background:linear-gradient(165deg,var(--glass-hi),var(--glass-mid) 60%,var(--glass-lo))!important;
  border:1px solid var(--spec)!important;
  box-shadow:inset 0 1px 0 var(--spec), inset 0 -1px 0 rgba(236,72,153,.05), var(--shadow-panel)!important;
  backdrop-filter:blur(18px) saturate(1.45);-webkit-backdrop-filter:blur(18px) saturate(1.45);
  transition:transform .28s var(--easeout),box-shadow .28s var(--easeout);
}
.dcard:hover,.tier:hover,.f:hover,.surface:hover{
  transform:translateY(-4px);
  box-shadow:inset 0 1px 0 var(--spec), inset 0 -1px 0 rgba(236,72,153,.08),
             0 26px 54px -22px rgba(28,20,32,.34)!important;
}
.tier.mid{
  border-color:rgba(236,72,153,.55)!important;
  box-shadow:inset 0 1px 0 var(--spec), 0 26px 60px -24px rgba(236,72,153,.42)!important;
}
/* keep content readable inside glass: inner screens & tables stay near-opaque */
.screen, .card table, .vig .vrow, table{background-color:rgba(255,253,251,.92)}
.setup-card{background:linear-gradient(165deg,rgba(255,255,255,.85),rgba(253,240,246,.6))!important}

/* ── tier 3 · glass-float (primary buttons, rings, toasts) ─────────── */
.btn:not(.ghost){
  background:linear-gradient(180deg,#F56DB0,#EC4899 45%,#DB2780)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.12), var(--shadow-float)!important;
  transition:transform .22s var(--spring),box-shadow .22s var(--easeout),filter .2s;
}
.btn:not(.ghost):hover{
  filter:brightness(1.06);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 20px 44px -12px rgba(236,72,153,.55)!important;
}
.btn:not(.ghost):active{transform:translateY(0) scale(.98)}
.btn.ghost{
  background:linear-gradient(165deg,var(--glass-hi),var(--glass-mid))!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--spec)!important;
  box-shadow:inset 0 1px 0 var(--spec), 0 8px 20px -10px rgba(28,20,32,.22)!important;
}
.setupmini{
  background:linear-gradient(165deg,rgba(253,240,246,.9),rgba(253,240,246,.55))!important;
  backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 var(--spec), 0 10px 22px -12px rgba(236,72,153,.3);
}

/* ── sheets, modals, celebration ───────────────────────────────────── */
.panel{
  background:linear-gradient(200deg,rgba(255,255,255,.94),rgba(255,251,248,.86))!important;
  backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
  box-shadow:inset 1px 0 0 var(--spec), -34px 0 80px -32px rgba(28,20,32,.4)!important;
  border-left:0!important;
  transition:transform .38s var(--spring)!important;
}
.overlay{backdrop-filter:blur(6px) saturate(1.2);-webkit-backdrop-filter:blur(6px)}
.celebrate{backdrop-filter:blur(14px) saturate(1.4)!important}

/* ── inputs get the glass focus bloom ──────────────────────────────── */
.creator input:focus,.field input:focus{
  box-shadow:0 0 0 4px rgba(236,72,153,.14), inset 0 1px 2px rgba(28,20,32,.05)!important;
}

/* ── nav items & rows: soft glass hover ────────────────────────────── */
.nitem:hover,.setup-row:hover{background:rgba(253,240,246,.7)!important}
.nitem.active{background:linear-gradient(165deg,rgba(253,240,246,.95),rgba(253,240,246,.6))!important;
  box-shadow:inset 0 1px 0 var(--spec)}

/* ── reduced motion: the field freezes, springs collapse ───────────── */
@media (prefers-reduced-motion:reduce){
  body::before,body::after{animation:none!important}
  *{transition-duration:.01ms!important}
}