/* ==========================================================================
   Paper Roses PH — design system
   ========================================================================== */
:root{
  --paper:#FBF7F2; --paper-2:#F5ECE3; --panel:#FFFFFF;
  --ink:#33302C; --ink-soft:#6E655D;
  --line:#E7DBCF; --line-soft:#F0E7DD;
  --rose:#C4876F; --rose-deep:#A96A54; --blush:#EFDCD2;
  --good:#5B8C6E; --warn:#B98235; --crit:#B5544A; --info:#7C7A9C;
  --shadow:0 1px 2px rgba(74,52,40,.05), 0 10px 30px -18px rgba(74,52,40,.35);
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --maxw:1160px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#211C1A; --paper-2:#2A2320; --panel:#2C2521;
    --ink:#F3E9E1; --ink-soft:#B6A79C;
    --line:#3C332E; --line-soft:#332B27;
    --rose:#D79A82; --rose-deep:#E7B49E; --blush:#3A2C27;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 34px -18px rgba(0,0,0,.6);
  }
}
:root[data-theme="light"]{
  --paper:#FBF7F2; --paper-2:#F5ECE3; --panel:#FFFFFF;
  --ink:#33302C; --ink-soft:#6E655D; --line:#E7DBCF; --line-soft:#F0E7DD;
  --rose:#C4876F; --rose-deep:#A96A54; --blush:#EFDCD2;
  --shadow:0 1px 2px rgba(74,52,40,.05), 0 10px 30px -18px rgba(74,52,40,.35);
}
:root[data-theme="dark"]{
  --paper:#211C1A; --paper-2:#2A2320; --panel:#2C2521;
  --ink:#F3E9E1; --ink-soft:#B6A79C; --line:#3C332E; --line-soft:#332B27;
  --rose:#D79A82; --rose-deep:#E7B49E; --blush:#3A2C27;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 34px -18px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0;text-wrap:balance}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{max-width:100%}
.tnum{font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;
  font-size:.7rem;font-weight:700;color:var(--rose-deep)}
.muted{color:var(--ink-soft)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.hidden{display:none!important}

/* ------------------------------------------------------------- buttons --- */
.btn{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--rose);
  background:var(--rose);color:#fff;padding:.7em 1.3em;border-radius:2px;font-weight:600;
  font-size:.92rem;letter-spacing:.01em;transition:.18s;white-space:nowrap}
.btn:hover{background:var(--rose-deep);border-color:var(--rose-deep)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--rose);color:var(--rose-deep);background:transparent}
.btn.sm{padding:.45em .85em;font-size:.82rem}
.btn.block{width:100%;justify-content:center}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--rose);outline-offset:2px}
.link{color:var(--rose-deep);font-weight:600;border-bottom:1px solid transparent;background:none;border-top:none;border-left:none;border-right:none;padding:0}
.link:hover{border-bottom-color:var(--rose-deep)}

/* -------------------------------------------------------------- header --- */
header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:70px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;cursor:pointer}
.brand img{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover}
.brand .name{font-family:var(--serif);font-size:1.15rem;letter-spacing:.28em;font-weight:600}
.brand .sub{display:block;font-size:.55rem;letter-spacing:.34em;text-transform:uppercase;color:var(--rose-deep);margin-top:2px}
.menu{display:flex;gap:22px;align-items:center}
.menu a{font-size:.9rem;font-weight:500;padding:6px 2px;border-bottom:2px solid transparent;color:var(--ink-soft);cursor:pointer}
.menu a:hover,.menu a.active{color:var(--ink);border-color:var(--rose)}
.navicons{display:flex;align-items:center;gap:12px}
.iconbtn{position:relative;background:none;border:none;color:var(--ink);padding:6px;border-radius:4px;display:flex}
.iconbtn:hover{color:var(--rose-deep)}
.badge{position:absolute;top:-3px;right:-4px;background:var(--rose);color:#fff;font-size:.62rem;
  font-weight:700;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.menutoggle{display:none}
@media(max-width:980px){
  .menu{display:none}
  .menu.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:4px;background:var(--paper);padding:16px 24px;border-bottom:1px solid var(--line);z-index:50}
  .menutoggle{display:flex}
  .nav{gap:12px}
}
/* On phones the wide letter-spacing pushed the shop name onto two lines and
   crowded the header, so tighten it and drop the tagline. */
@media(max-width:560px){
  .brand img{width:34px;height:34px}
  .brand .name{font-size:.92rem;letter-spacing:.13em;white-space:nowrap}
  .brand .sub{display:none}
  .navicons{gap:8px}
  #authBtn{padding:.45em .7em;font-size:.8rem}
}

/* ---------------------------------------------------------------- hero --- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(120% 130% at 72% 28%,#5c2f36 0%,#3a1d24 45%,#26141a 78%,#1d0f14 100%);
  color:#F6E9E2;min-height:600px;display:flex;align-items:center}
.hero-stage{position:absolute;inset:0;z-index:0}
.hero-stage img{width:100%;height:100%;object-fit:cover;opacity:.5}
.hero-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 120% at 72% 30%,transparent 30%,rgba(29,15,20,.55) 100%),
  linear-gradient(100deg,rgba(24,12,16,.6) 0%,rgba(24,12,16,.15) 42%,transparent 66%)}
.hero-inner{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;width:100%;
  padding:70px 24px;display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}
.hero-copy{max-width:540px}
.hero .eyebrow{color:#E6B49E}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem);letter-spacing:.01em;line-height:1.02;color:#FBF1EB}
.hero h1 em{font-style:italic;color:#E8B199}
.hero p{font-size:1.08rem;color:#E4C9BC;margin:20px 0 30px;max-width:440px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn.ghost{color:#FBF1EB;border-color:rgba(251,241,235,.35)}
.hero .btn.ghost:hover{border-color:#E8B199;color:#E8B199}

/* 3D glowing logo */
.logo3d{justify-self:center;perspective:900px;position:relative;width:min(360px,80vw);aspect-ratio:1/1}
.halo{position:absolute;inset:2%;border-radius:50%;z-index:0;
  background:radial-gradient(circle at 50% 46%,rgba(240,196,176,.55),rgba(196,135,111,.28) 42%,transparent 66%);
  filter:blur(26px);animation:halo 5.5s ease-in-out infinite}
.logomark{position:relative;z-index:2;width:100%;height:100%;transform-style:preserve-3d;animation:float 6.5s ease-in-out infinite}
.logomark img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;background:#FBF7F2;
  filter:drop-shadow(0 0 10px rgba(240,196,176,.55)) drop-shadow(0 0 26px rgba(232,168,143,.4)) drop-shadow(0 14px 30px rgba(0,0,0,.5));
  animation:sheen 4.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(-10px) rotateY(-9deg) rotateX(4deg)}50%{transform:translateY(10px) rotateY(9deg) rotateX(-3deg)}}
@keyframes halo{0%,100%{opacity:.7;transform:scale(.96)}50%{opacity:1;transform:scale(1.06)}}
@keyframes sheen{
  0%,100%{filter:drop-shadow(0 0 8px rgba(240,196,176,.4)) drop-shadow(0 0 22px rgba(232,168,143,.3)) drop-shadow(0 14px 30px rgba(0,0,0,.5))}
  50%{filter:drop-shadow(0 0 18px rgba(245,210,192,.8)) drop-shadow(0 0 46px rgba(232,168,143,.6)) drop-shadow(0 14px 30px rgba(0,0,0,.5))}}
.petals{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.petal{position:absolute;bottom:-8%;width:14px;height:14px;opacity:0;
  background:radial-gradient(circle at 30% 30%,#F0C4B0,#C4876F);border-radius:0 100% 0 100%;
  animation:drift linear infinite}
@keyframes drift{0%{transform:translateY(0) rotate(0);opacity:0}
  10%{opacity:.8}90%{opacity:.6}100%{transform:translateY(-118vh) rotate(360deg);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .logomark,.logomark img,.halo,.petal{animation:none!important}
  .logomark{transform:none}
}
@media(max-width:820px){
  .hero-inner{grid-template-columns:1fr;text-align:center;padding:54px 24px 70px}
  .hero-copy{margin:0 auto}.hero-cta{justify-content:center}
  .logo3d{width:min(260px,66vw);order:-1}
}

/* ------------------------------------------------------------ sections --- */
section.band{padding:70px 0}
.band-head{display:flex;flex-direction:column;gap:8px;margin-bottom:34px;align-items:center;text-align:center}
.band-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.rule{display:flex;align-items:center;gap:12px;color:var(--rose);font-size:.8rem;justify-content:center}
.rule::before,.rule::after{content:"";height:1px;width:44px;background:var(--rose);opacity:.5}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.svc{grid-template-columns:1fr}}
.svc .card{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:26px 24px;box-shadow:var(--shadow)}
.svc .card h3{font-size:1.2rem;margin:14px 0 6px}
.svc .ic{width:34px;height:34px;color:var(--rose)}

/* -------------------------------------------------------- product grid --- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.prod{background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden;
  box-shadow:var(--shadow);transition:.2s;display:flex;flex-direction:column;cursor:pointer;text-align:left;padding:0}
.prod:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--rose) 55%,var(--line))}
.thumb{aspect-ratio:4/3;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.thumb .plabel{position:relative;z-index:2;font-family:var(--serif);font-size:1.5rem;color:#fff;
  text-shadow:0 1px 12px rgba(60,30,20,.5);text-align:center;padding:0 16px;letter-spacing:.02em}
.thumb .cat{position:absolute;top:10px;left:10px;z-index:3;background:color-mix(in srgb,#fff 82%,transparent);
  color:var(--rose-deep);font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:20px}
.prod .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod .body h3{font-size:1.08rem}
.prod .desc{font-size:.85rem;color:var(--ink-soft);flex:1}
.prod .foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.price{font-family:var(--serif);font-size:1.15rem;color:var(--ink);font-weight:600}
.filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:34px}
.chip{border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);padding:.5em 1.1em;
  border-radius:40px;font-size:.85rem;font-weight:600}
.chip:hover{border-color:var(--rose);color:var(--rose-deep)}
.chip.on{background:var(--rose);border-color:var(--rose);color:#fff}

/* ------------------------------------------------------------- gallery --- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gallery{grid-template-columns:1fr}}
.gtile{position:relative;aspect-ratio:1/1;border-radius:5px;overflow:hidden;box-shadow:var(--shadow);margin:0}
.gtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gtile figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 14px 12px;color:#fff;
  font-size:.85rem;line-height:1.3;font-weight:500;background:linear-gradient(transparent,rgba(60,30,22,.72))}
.gtile .gcat{display:block;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-bottom:2px}

/* ------------------------------------------------------------- reviews --- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.reviews{grid-template-columns:1fr}}
.rcard{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.rcard p{font-family:var(--serif);font-size:1.05rem;line-height:1.5;color:var(--ink);margin:0}
.rmeta{font-size:.85rem;margin-top:auto}
.starpick{display:flex;gap:4px}
.starbtn{background:none;border:none;padding:2px;line-height:0;border-radius:4px}
.starbtn svg{transition:.12s}
.starbtn.on svg,.starbtn.hov svg{fill:var(--rose)}

/* ------------------------------------------------------ product detail --- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:820px){.pdp{grid-template-columns:1fr;gap:28px}}
.pdp .hero-img{aspect-ratio:1/1;border-radius:6px;position:relative;overflow:hidden;box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center}
.pdp h1{font-size:2.1rem;margin-bottom:6px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:.82rem;font-weight:600;color:var(--ink)}
.field .req{color:var(--rose-deep)}
input,select,textarea{font-family:inherit;font-size:.95rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:3px;padding:.7em .8em;width:100%}
textarea{min-height:82px;resize:vertical}
.filedrop{border:1.5px dashed var(--line);border-radius:4px;padding:16px;text-align:center;color:var(--ink-soft);
  font-size:.85rem;background:var(--paper);cursor:pointer;display:block}
.filedrop:hover{border-color:var(--rose);color:var(--rose-deep)}
.filedrop.has{border-style:solid;border-color:var(--good);color:var(--good)}
.qtyrow{display:flex;align-items:center;gap:14px;margin:8px 0 20px}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.stepper button{background:var(--panel);border:none;width:38px;height:40px;font-size:1.1rem;color:var(--ink)}
.stepper button:hover{background:var(--blush)}
.stepper span{width:46px;text-align:center;font-weight:600}

/* ----------------------------------------------------- cart & checkout --- */
.layout2{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start}
@media(max-width:860px){.layout2{grid-template-columns:1fr}}
.lineitem{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.li-thumb{width:84px;height:64px;border-radius:4px;flex:none;overflow:hidden;position:relative}
.li-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.li-body{flex:1}
.li-body h4{font-family:var(--sans);font-size:1rem;font-weight:600}
.li-pers{font-size:.8rem;color:var(--ink-soft);margin-top:3px}
.summary{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:24px;box-shadow:var(--shadow);position:sticky;top:90px}
.srow{display:flex;justify-content:space-between;padding:7px 0;font-size:.92rem;gap:10px}
.srow.total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-family:var(--serif);font-size:1.25rem;font-weight:600}
.radio-card{display:flex;gap:12px;border:1px solid var(--line);border-radius:5px;padding:14px 16px;margin-bottom:12px;cursor:pointer;align-items:flex-start;background:var(--panel);width:100%;text-align:left}
.radio-card.on{border-color:var(--rose);background:color-mix(in srgb,var(--blush) 40%,var(--panel))}
.radio-card .rc-title{font-weight:600}
.radio-card small{color:var(--ink-soft)}

/* --------------------------------------------------------------- modal --- */
.modal-bg{position:fixed;inset:0;background:rgba(40,26,20,.5);backdrop-filter:blur(3px);z-index:80;
  display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--paper);border:1px solid var(--line);border-radius:10px;max-width:440px;width:100%;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6);max-height:92vh;overflow:auto;position:relative}
.modal .m-head{padding:22px 24px 0;text-align:center}
.modal .m-body{padding:18px 24px 26px}
.paytabs{display:flex;gap:8px;justify-content:center;margin:16px 0}
.paytab{border:1px solid var(--line);background:var(--panel);padding:.5em 1.2em;border-radius:30px;font-weight:600;font-size:.85rem;color:var(--ink-soft)}
.paytab.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.qrbox{width:230px;height:230px;margin:8px auto;background:#fff;border-radius:8px;padding:10px;box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center}
.qrbox img{width:100%;height:100%;object-fit:contain}
.close-x{position:absolute;top:14px;right:16px;background:none;border:none;font-size:1.4rem;color:var(--ink-soft);z-index:2}

/* --------------------------------------------------- account & timeline --- */
.ordercard{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:20px 22px;margin-bottom:18px;box-shadow:var(--shadow)}
.oc-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.status{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;padding:4px 11px;border-radius:30px;letter-spacing:.02em}
.status .d{width:7px;height:7px;border-radius:50%}
.timeline{display:flex;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.tstep{flex:1;min-width:88px;text-align:center;position:relative;font-size:.7rem;color:var(--ink-soft)}
.tstep::before{content:"";position:absolute;top:8px;left:-50%;width:100%;height:2px;background:var(--line)}
.tstep:first-child::before{display:none}
.tstep .tdot{width:16px;height:16px;border-radius:50%;background:var(--panel);border:2px solid var(--line);margin:0 auto 6px;position:relative;z-index:2}
.tstep.done{color:var(--ink)}
.tstep.done .tdot{background:var(--rose);border-color:var(--rose)}
.tstep.done::before{background:var(--rose)}

/* ----------------------------------------------------------------- auth --- */
.authbox{max-width:420px;margin:0 auto;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:30px 28px;box-shadow:var(--shadow)}
.authtabs{display:flex;gap:8px;margin-bottom:22px}
.authtabs button{flex:1;border:1px solid var(--line);background:var(--paper);padding:.6em;border-radius:4px;font-weight:600;color:var(--ink-soft)}
.authtabs button.on{background:var(--rose);border-color:var(--rose);color:#fff}
.notice{border-radius:5px;padding:12px 14px;font-size:.88rem;margin-bottom:16px;border:1px solid}
.notice.err{background:color-mix(in srgb,var(--crit) 10%,var(--panel));border-color:var(--crit);color:var(--crit)}
.notice.ok{background:color-mix(in srgb,var(--good) 10%,var(--panel));border-color:var(--good);color:var(--good)}

/* ---------------------------------------------------------------- admin --- */
.admin-shell{display:grid;grid-template-columns:216px 1fr;min-height:calc(100vh - 70px)}
@media(max-width:820px){.admin-shell{grid-template-columns:1fr}}
.aside{background:var(--panel);border-right:1px solid var(--line);padding:24px 16px}
@media(max-width:820px){.aside{border-right:none;border-bottom:1px solid var(--line);display:flex;gap:6px;overflow-x:auto}}
.aside a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:5px;color:var(--ink-soft);font-size:.9rem;font-weight:600;white-space:nowrap;cursor:pointer}
.aside a:hover{background:var(--paper-2);color:var(--ink)}
.aside a.active{background:var(--blush);color:var(--rose-deep)}
.amain{padding:30px 34px}
@media(max-width:560px){.amain{padding:22px 18px}}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px}
@media(max-width:760px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:18px 20px;box-shadow:var(--shadow)}
.kpi .k-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);font-weight:700}
.kpi .k-val{font-family:var(--serif);font-size:1.7rem;font-weight:600;margin-top:6px}
.kpi .k-sub{font-size:.76rem;color:var(--good);margin-top:2px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:22px 24px;box-shadow:var(--shadow);margin-bottom:22px}
.panel h3{font-size:1.15rem;margin-bottom:4px}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);
  padding:10px;border-bottom:1px solid var(--line);font-weight:700}
td{padding:12px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tablewrap{overflow-x:auto}
.chart{display:flex;align-items:flex-end;gap:10px;height:180px;padding-top:10px}
.bar{flex:1;background:linear-gradient(var(--rose),color-mix(in srgb,var(--rose) 60%,var(--paper)));
  border-radius:4px 4px 0 0;min-height:4px;position:relative;transition:.3s}
.bar:hover{background:var(--rose-deep)}
.bar span{position:absolute;top:-20px;left:0;right:0;text-align:center;font-size:.68rem;color:var(--ink-soft)}
.bar small{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:.66rem;color:var(--ink-soft)}
.daterow{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:8px}
.daterow .field{margin-bottom:0}
.inline-edit{display:flex;align-items:center;gap:6px}
.inline-edit input{width:100px;padding:.4em .5em}
.toggle{position:relative;width:42px;height:23px;border-radius:20px;background:var(--line);border:none;transition:.2s;flex:none}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.2s}
.toggle.on{background:var(--good)}
.toggle.on::after{left:21px}
.qr-admin{display:flex;gap:22px;flex-wrap:wrap}
.qr-admin .qrslot{text-align:center}
.qr-admin .qrslot .box{width:140px;height:140px;border:1px solid var(--line);border-radius:8px;background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.qr-admin .qrslot .box img{width:100%;height:100%;object-fit:contain}

/* --------------------------------------------------------------- footer --- */
footer{border-top:1px solid var(--line);padding:44px 0;margin-top:40px;background:var(--paper-2)}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:120;
  background:var(--ink);color:var(--paper);padding:.8em 1.4em;border-radius:6px;font-size:.9rem;font-weight:600;
  opacity:0;transition:.3s;box-shadow:var(--shadow);pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.empty{text-align:center;padding:70px 20px;color:var(--ink-soft)}
.loading{text-align:center;padding:90px 20px;color:var(--ink-soft)}
.spinner{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--rose);
  border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
.setup-warn{background:var(--crit);color:#fff;padding:14px 20px;text-align:center;font-size:.9rem;font-weight:600}