/* ============================================================================
   IN gì BÁN đó — "Precision Workshop" premium theme layer.
   Loads AFTER styles.css and elevates the existing markup without changing any
   structure, class names, or behaviour. Art direction: deep forest green +
   warm white, futuristic but playful, restrained accents, layered surfaces.
   All colour/space/shape/motion values live as tokens so the whole site moves
   together. Safe to remove this one <link> to fully revert.
   ========================================================================== */

/* ---------- 1. Design tokens ---------------------------------------------- */
:root{
  /* Brand — deep green scale + energetic lime accent */
  --brand-900:#0c1f18;
  --brand-800:#103026;
  --brand-700:#154536;
  --brand-600:#195542;
  --brand-500:#237a5d;
  --brand-400:#2f9a75;
  --brand-300:#5cbf9c;
  --accent:#c8ed46;          /* lime — energy, used sparingly */
  --accent-soft:#e6f6a8;
  --accent-ink:#2b3a10;      /* readable text on lime */

  /* Playful secondary accents (from the 3D toys) */
  --coral:#ff745d; --amber:#ffb83e; --cyan:#36bebc; --violet:#8c67d7;

  /* Semantic surfaces — 4 elevation levels */
  --bg:#f4f6f2;              /* page canvas — cool warm-white */
  --bg-tint:#eef2ec;
  --surface:#ffffff;         /* elevated cards */
  --surface-2:#f7f9f5;       /* secondary / inset */
  --surface-3:#eef1ea;       /* wells, track backgrounds */
  --surface-ink:#0e211a;     /* dark premium surface (sidebar/hero) */

  /* Text */
  --text:#12211b;
  --text-2:#3c4b43;
  --text-muted:#6d7a72;
  --text-on-dark:#eaf1ec;
  --text-on-dark-muted:#9fb0a7;

  /* Lines & focus */
  --line:#e4e8e0;
  --line-strong:#d3dacf;
  --line-on-dark:rgba(255,255,255,.12);
  --ring:0 0 0 3px rgba(35,122,93,.28);
  --ring-accent:0 0 0 3px rgba(200,237,70,.45);

  /* State colours */
  --ok:#1f7a54; --ok-bg:#e7f6ec;
  --warn:#a9691a; --warn-bg:#fdf1dd;
  --err:#b23b34; --err-bg:#fdecea;
  --info:#2f6f8f; --info-bg:#e6f2f7;

  /* Radius scale */
  --r-xs:8px; --r-sm:11px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:30px; --r-pill:999px;

  /* Spacing scale (rhythm) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:30px; --sp-7:40px; --sp-8:56px;

  /* Shadow scale — soft, multi-layer, tinted green-ink */
  --sh-1:0 1px 2px rgba(14,33,26,.05), 0 1px 1px rgba(14,33,26,.04);
  --sh-2:0 4px 10px -4px rgba(14,33,26,.10), 0 2px 6px -3px rgba(14,33,26,.08);
  --sh-3:0 14px 30px -12px rgba(14,33,26,.18), 0 6px 14px -8px rgba(14,33,26,.12);
  --sh-4:0 30px 60px -20px rgba(11,31,24,.30), 0 12px 26px -14px rgba(11,31,24,.20);
  --sh-accent:0 10px 30px -8px rgba(35,122,93,.45);

  /* Signature gradients */
  --grad-brand:linear-gradient(135deg,var(--brand-700),var(--brand-500));
  --grad-brand-strong:linear-gradient(135deg,var(--brand-800),var(--brand-600) 60%,var(--brand-400));
  --grad-accent:linear-gradient(135deg,#d6f25b,#a9d92f);
  --grad-spectrum:linear-gradient(90deg,var(--coral),var(--amber),var(--accent),var(--cyan),var(--violet));

  /* Motion system */
  --dur-1:.14s; --dur-2:.24s; --dur-3:.4s; --dur-4:.6s;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* Remap the original variables so legacy rules inherit the refreshed palette */
  --ink:var(--text);
  --ink-2:var(--text-2);
  --muted:var(--text-muted);
  --cream:var(--bg);
  --paper:var(--surface);
  --green:var(--brand-600);
  --green-2:var(--brand-500);
  --lime:var(--accent);
  --shadow:var(--sh-3);
  --radius:var(--r-lg);
}

/* ---------- 2. Base + atmosphere ------------------------------------------ */
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 620px at 82% -8%, rgba(47,154,117,.10), transparent 60%),
    radial-gradient(900px 500px at -6% 12%, rgba(200,237,70,.08), transparent 55%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Fine grain overlay for a printed, tactile premium feel (very subtle). */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- 3. Typography ------------------------------------------------- */
:root{
  --font-display:"SF Pro Rounded",ui-rounded,"Arial Rounded MT Bold","Nunito Sans",system-ui,sans-serif;
}
.topbar h1,.hero-panel h2,.storefront-hero h2,.public-hero h1,.public-toolbar h2,
.gate-card h1,.price-display strong,.metric-card strong{
  font-family:var(--font-display);letter-spacing:-.03em;font-weight:750;
}
.topbar h1{font-size:clamp(22px,2.4vw,29px);line-height:1.08}
.public-hero h1{font-size:clamp(36px,6vw,68px);line-height:.98;letter-spacing:-.05em}
.gate-card h1{font-size:clamp(28px,4vw,46px)}
.public-toolbar h2{font-size:clamp(24px,3vw,32px)}
.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:800;color:var(--brand-500)}
.page-lead,.subtle{color:var(--text-muted);line-height:1.6}
.money-positive,.money-negative,.metric-card strong,.price-display strong,
.cost-breakdown strong,.per-unit-grid strong,td,th{font-variant-numeric:tabular-nums lining-nums}

/* ---------- 4. Buttons ---------------------------------------------------- */
.button{
  border-radius:var(--r-sm);padding:11px 17px;font-weight:700;letter-spacing:.01em;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2),
             background-color var(--dur-2),background-position var(--dur-3),border-color var(--dur-2),color var(--dur-2);
}
.button:hover{transform:translateY(-2px)}
.button:active{transform:translateY(0) scale(.98);transition-duration:var(--dur-1)}
.button:focus-visible{outline:none;box-shadow:var(--ring),var(--sh-2)}

.button-primary{
  background:var(--grad-brand);background-size:180% 180%;background-position:0 0;
  color:#fff;box-shadow:var(--sh-2);
}
.button-primary:hover{background-position:100% 0;box-shadow:var(--sh-accent)}
.button-primary:focus-visible{box-shadow:var(--ring),var(--sh-accent)}

.button-light{background:var(--surface);color:var(--text);box-shadow:var(--sh-2)}
.button-light:hover{box-shadow:var(--sh-3)}

.button-ghost{background:var(--surface);border-color:var(--line-strong);color:var(--text)}
.button-ghost:hover{border-color:var(--brand-400);background:var(--surface-2);color:var(--brand-600)}

.button-danger{background:var(--err-bg);border-color:#f0cfcb;color:var(--err)}
.button-danger:hover{background:#fbe1de;border-color:#e6b3ad}

.button:disabled,.button[disabled]{opacity:.5;pointer-events:none;filter:saturate(.7)}

/* Magnetic + press states also cover nav/segmented controls */
.icon-button{border-radius:var(--r-sm);transition:background var(--dur-2),color var(--dur-2),transform var(--dur-1)}
.icon-button:hover{background:var(--surface-3);color:var(--text)}
.icon-button:active{transform:scale(.9)}
.icon-button:focus-visible,.text-button:focus-visible,.privacy-toggle:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-xs)}
.text-button{transition:color var(--dur-2)}
.text-button:hover{color:var(--brand-400)}

/* ---------- 5. Inputs & forms --------------------------------------------- */
.field>span{color:var(--text-2);font-weight:700;letter-spacing:.01em}
.field input,.field select,.field textarea,.search-box input,.search-box{
  border-radius:var(--r-sm);border-color:var(--line-strong);background:var(--surface);
  transition:border-color var(--dur-2),box-shadow var(--dur-2),background var(--dur-2);
}
.field input::placeholder,.field textarea::placeholder,.search-box input::placeholder{color:#9aa69f}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brand-400);box-shadow:var(--ring);outline:none;
}
.search-box{background:var(--surface);border-color:var(--line-strong);transition:border-color var(--dur-2),box-shadow var(--dur-2)}
.search-box:focus-within{border-color:var(--brand-400);box-shadow:var(--ring)}
.add-line{border-radius:var(--r-sm);border-color:var(--line-strong);background:var(--surface-2);color:var(--brand-600);transition:border-color var(--dur-2),background var(--dur-2),transform var(--dur-1)}
.add-line:hover{border-color:var(--brand-400);background:var(--accent-soft)}
.add-line:active{transform:scale(.99)}

/* Segmented filter tabs */
.filter-tabs{background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-md);padding:4px}
.filter-tabs button{border-radius:var(--r-xs);transition:background var(--dur-2),color var(--dur-2),box-shadow var(--dur-2)}
.filter-tabs button:hover{color:var(--text)}
.filter-tabs button.active{background:var(--surface);color:var(--brand-600);box-shadow:var(--sh-1)}

/* ---------- 6. Sidebar + navigation --------------------------------------- */
.sidebar{
  background:
    radial-gradient(420px 200px at 20% -5%, rgba(47,154,117,.28), transparent 60%),
    linear-gradient(180deg,var(--brand-900),var(--surface-ink));
  border-right:1px solid var(--line-on-dark);
}
.brand small,.local-badge small{color:var(--text-on-dark-muted)}
.nav-item{color:#a9b7b0;border-radius:var(--r-sm);transition:background var(--dur-2),color var(--dur-2),transform var(--dur-2)}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;transform:translateX(3px)}
.nav-item.active{background:rgba(200,237,70,.10);color:#fff;box-shadow:inset 3px 0 var(--accent)}
.nav-item.active .nav-icon{color:var(--accent)}
.nav-count{background:var(--accent);color:var(--accent-ink);font-weight:800}
.local-badge{border-top-color:var(--line-on-dark)}

/* ---------- 7. Topbar (transparent → elevated on scroll) ------------------ */
.topbar{
  background:linear-gradient(180deg,rgba(244,246,242,.86),rgba(244,246,242,.66));
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--dur-3),border-color var(--dur-3),background var(--dur-3);
}
.topbar.scrolled{
  background:linear-gradient(180deg,rgba(247,249,245,.94),rgba(247,249,245,.82));
  border-bottom-color:var(--line);box-shadow:var(--sh-2);
}
.account-button{background:var(--surface);border-color:var(--line-strong);border-radius:var(--r-md);transition:border-color var(--dur-2),box-shadow var(--dur-2),transform var(--dur-2)}
.account-button:hover{border-color:var(--brand-400);box-shadow:var(--sh-2);transform:translateY(-1px)}
.save-status{color:var(--text-muted)}

/* ---------- 8. Panels / cards + spotlight --------------------------------- */
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);transition:box-shadow var(--dur-3),border-color var(--dur-3),transform var(--dur-3);
}
.panel-heading h3,.section-title h3,.settings-card h3,.modal h3{letter-spacing:-.01em}

/* Spotlight — pointer-tracked highlight (fx.js sets --glow-x/--glow-y) */
.panel,.settings-card,.store-card,.metric-card{position:relative}
.panel::after,.settings-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(340px circle at var(--glow-x,-100%) var(--glow-y,-100%),rgba(47,154,117,.10),transparent 60%);
  opacity:0;transition:opacity var(--dur-3);
}
.panel:hover::after,.settings-card:hover::after{opacity:1}

/* ---------- 9. Metric cards ----------------------------------------------- */
.metric-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-1);overflow:hidden;
  transition:box-shadow var(--dur-3),transform var(--dur-3),border-color var(--dur-3);
}
.metric-card:hover{box-shadow:var(--sh-3);border-color:var(--line-strong);transform:translateY(-3px)}
.metric-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--grad-accent);opacity:0;transition:opacity var(--dur-3);
}
.metric-card:hover::before{opacity:1}
.metric-card span{color:var(--text-muted);font-weight:600}
.metric-card strong{color:var(--text)}
.metric-card small{color:var(--brand-500);font-weight:700}
.metric-icon{border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px rgba(14,33,26,.05)}

/* ---------- 10. Tables ---------------------------------------------------- */
.table-panel,.panel.table-panel{overflow:hidden}
thead th{
  position:sticky;top:0;z-index:2;background:var(--surface-2);
  border-bottom:1px solid var(--line-strong);color:var(--text-muted);
  backdrop-filter:blur(4px);
}
tbody tr{transition:background var(--dur-2)}
tbody tr:hover{background:var(--surface-2)}
td{border-bottom-color:var(--line)}
.status{border-radius:var(--r-pill);font-weight:800;letter-spacing:.01em}
.status.good{color:var(--ok);background:var(--ok-bg)}
.status.low{color:var(--warn);background:var(--warn-bg)}
.status.out{color:var(--err);background:var(--err-bg)}
.stock-control button{border-radius:var(--r-xs);border-color:var(--line-strong);transition:background var(--dur-2),border-color var(--dur-2),transform var(--dur-1)}
.stock-control button:hover{background:var(--accent-soft);border-color:var(--brand-400)}
.stock-control button:active{transform:scale(.9)}
.row-actions button{border-radius:var(--r-xs);transition:background var(--dur-2),color var(--dur-2),transform var(--dur-1)}
.row-actions button:hover{background:var(--surface-3);color:var(--brand-600)}
.row-actions button:active{transform:scale(.9)}
.summary-chip{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.stock-bar{background:var(--surface-3)}
.stock-bar i{background:var(--grad-brand)}
.stock-bar i.low{background:linear-gradient(90deg,var(--amber),#f59f2a)}

/* ---------- 11. Dashboard hero panel -------------------------------------- */
.hero-panel{border-radius:var(--r-xl);box-shadow:var(--sh-4)}
.hero-panel h2{font-size:clamp(28px,3.4vw,40px)}
.hero-panel .button{box-shadow:var(--sh-2)}
.chart-panel .bar.revenue{background:var(--grad-brand)}
.bar-group .bar{transition:filter var(--dur-2),transform var(--dur-2)}
.bar-group:hover .bar{filter:brightness(1.08)}
.attention-item{border-bottom-color:var(--line)}
.attention-icon{background:var(--warn-bg);color:var(--warn);border-radius:var(--r-xs)}

/* ---------- 12. Storefront (admin) & store cards -------------------------- */
.storefront-hero{
  background:
    radial-gradient(600px 300px at 88% -40%, rgba(47,154,117,.18), transparent 60%),
    linear-gradient(120deg,#ffffff,var(--surface-2) 55%,#eef6f1);
  border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2);
}
.store-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden;
  transition:box-shadow var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out),border-color var(--dur-3);
}
.store-card:hover{transform:translateY(-6px);box-shadow:var(--sh-4);border-color:var(--line-strong)}
.store-image{background:linear-gradient(140deg,#eaf4ee,#f4ede4)}
.store-card .store-image>img{transition:transform var(--dur-4) var(--ease-out)}
.store-card:hover .store-image>img{transform:scale(1.06)}
.store-placeholder{color:rgba(25,85,66,.24)}
.store-price strong{color:var(--brand-600);font-family:var(--font-display);letter-spacing:-.02em}
.store-image-nav{border-radius:var(--r-pill);box-shadow:var(--sh-2);transition:opacity var(--dur-2),transform var(--dur-2)}
.store-card:hover .store-image-nav{opacity:1}
.store-image-nav:hover{transform:translateY(-50%) scale(1.1)}
.store-card .status{box-shadow:var(--sh-1)}

/* ---------- 13. Public storefront ----------------------------------------- */
.public-header{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.72));
  backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid transparent;
  transition:box-shadow var(--dur-3),border-color var(--dur-3),background var(--dur-3);
}
.public-header.scrolled{background:rgba(255,255,255,.95);border-bottom-color:var(--line);box-shadow:var(--sh-2)}
.public-hero{border-bottom:1px solid var(--line)}
.public-hero p:last-child{color:#d6e4dd}
.public-footer{background:linear-gradient(180deg,var(--brand-800),var(--brand-900))}
.public-footer .text-button{color:var(--accent)}
.public-store-grid .store-card{background:var(--surface)}

/* ---------- 14. Login gate ------------------------------------------------ */
.login-gate{background:var(--brand-900)}
.gate-card{background:var(--surface);box-shadow:-40px 0 90px rgba(0,0,0,.25)}
.gate-card input{border-radius:var(--r-sm)}
.gate-submit{box-shadow:var(--sh-accent)}
.gate-message.error{color:var(--err)}
.gate-message.success{color:var(--brand-500)}

/* ---------- 15. Modals ---------------------------------------------------- */
dialog::backdrop{background:rgba(9,22,17,.55);backdrop-filter:blur(5px)}
.modal form,.gallery-shell,.history-shell{
  border-radius:var(--r-xl);box-shadow:var(--sh-4);border:1px solid var(--line);
  animation:modalIn var(--dur-3) var(--ease-out);
}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.confirm-icon{background:var(--err-bg);color:var(--err)}
.auth-brand .brand-mark{background:var(--brand-800)}
.image-dropzone{border-radius:var(--r-md);border-color:var(--line-strong);background:var(--surface-2);transition:border-color var(--dur-2),background var(--dur-2)}
.image-dropzone:hover{border-color:var(--brand-400);background:var(--accent-soft)}
.upload-icon{background:var(--grad-brand);border-radius:var(--r-sm)}
.gallery-thumb.active{border-color:var(--brand-500)}

/* ---------- 16. Toasts ---------------------------------------------------- */
.toast{background:var(--surface-ink);color:#fff;border-radius:var(--r-md);box-shadow:var(--sh-4)}
.toast.success{border-left:4px solid var(--accent)}
.toast.error{border-left:4px solid var(--coral)}

/* ---------- 17. Motion utilities (used by fx.js) -------------------------- */
.fx-magnetic{will-change:transform;transition:transform var(--dur-2) var(--ease-out)}
.fx-count{font-variant-numeric:tabular-nums lining-nums}
.fx-ripple{background:rgba(255,255,255,.5)}
.hero-panel .button.fx-magnetic:hover,.gate-submit.fx-magnetic:hover{box-shadow:var(--sh-accent)}

/* ---------- 18. Accessibility & reduced motion ---------------------------- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:none}
.nav-item:focus-visible{outline:none;box-shadow:inset 3px 0 var(--accent),var(--ring)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .store-card:hover,.metric-card:hover,.button:hover{transform:none}
}
@media(prefers-contrast:more){
  :root{--line:#c4ccc0;--line-strong:#aab5a4;--text-muted:#4c574f}
  .button-ghost{border-color:var(--text-2)}
}

/* ---------- 19. Responsive refinements ------------------------------------ */
@media(max-width:760px){
  .metric-card:hover,.store-card:hover{transform:none}
  body::before{opacity:.02}
  .topbar{background:rgba(244,246,242,.94)}
}
@media(max-width:430px){
  .button{padding:11px 15px}
}

/* ---------- 20. Pastel claymorphism art direction ------------------------- */
:root{
  --brand-900:#554b70;--brand-800:#665b82;--brand-700:#756990;--brand-600:#8174a0;
  --brand-500:#9689b6;--brand-400:#aa9ec7;--brand-300:#c8bfdd;
  --accent:#ffd894;--accent-soft:#fff0cf;--accent-ink:#5f4a2f;
  --coral:#f49c9c;--amber:#f4c57f;--cyan:#92d4cf;--violet:#aa96cf;
  --bg:#eef0fa;--bg-tint:#e9ebf7;--surface:#f4f2fb;--surface-2:#eceaf6;
  --surface-3:#e5e3f0;--surface-ink:#5d5376;
  --text:#4e4960;--text-2:#686278;--text-muted:#898398;
  --text-on-dark:#fffaff;--text-on-dark-muted:#ddd5ea;
  --line:rgba(255,255,255,.7);--line-strong:rgba(128,117,157,.18);
  --ok:#4e8c78;--ok-bg:#dff2e9;--warn:#a87439;--warn-bg:#fff0d8;--err:#ad666c;--err-bg:#f9e0e2;
  --r-xs:12px;--r-sm:16px;--r-md:21px;--r-lg:27px;--r-xl:34px;--r-2xl:42px;
  --sh-1:7px 7px 15px rgba(109,104,137,.13),-7px -7px 15px rgba(255,255,255,.82);
  --sh-2:10px 10px 22px rgba(109,104,137,.16),-10px -10px 22px rgba(255,255,255,.88);
  --sh-3:15px 15px 34px rgba(103,97,132,.18),-14px -14px 30px rgba(255,255,255,.9);
  --sh-4:22px 24px 50px rgba(89,82,119,.21),-18px -18px 38px rgba(255,255,255,.76);
  --sh-accent:10px 12px 25px rgba(133,119,167,.24),-7px -7px 18px rgba(255,255,255,.7);
  --grad-brand:linear-gradient(145deg,#a99ac7,#8174a0);
  --grad-brand-strong:linear-gradient(135deg,#74688f,#9f90bd);
  --grad-accent:linear-gradient(145deg,#ffe6b7,#f3c77f);
  --ring:0 0 0 4px rgba(150,137,182,.25);
}
body{background:radial-gradient(850px 520px at 10% 0%,rgba(255,218,218,.78),transparent 67%),radial-gradient(950px 600px at 92% 5%,rgba(194,225,226,.72),transparent 67%),linear-gradient(145deg,#f5eff7,#e8edf8 55%,#edf5f1);}
body::before{opacity:.018}
.public-shop{background:transparent}
.panel,.metric-card,.store-card,.summary-chip,.account-button,.filter-tabs,.search-box,.field input,.field select,.field textarea,.tag-picker,.sort-control select{
  border:1px solid rgba(255,255,255,.76);background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(234,232,245,.82));box-shadow:var(--sh-1);
}
.panel,.metric-card,.store-card,.summary-chip{border-radius:var(--r-lg)}
.button{border:1px solid rgba(255,255,255,.52);box-shadow:var(--sh-1);border-radius:var(--r-sm)}
.button-primary{background:var(--grad-brand);box-shadow:8px 9px 18px rgba(104,91,139,.28),-5px -5px 14px rgba(255,255,255,.68)}
.button-ghost,.button-light{background:linear-gradient(145deg,#faf8ff,#e6e3f0);box-shadow:var(--sh-1)}
.button:active,.filter-tabs button:active,.quiet-login:active{box-shadow:inset 4px 4px 9px rgba(105,99,130,.18),inset -4px -4px 9px rgba(255,255,255,.75);transform:translateY(1px) scale(.99)}
.sidebar{background:linear-gradient(165deg,#716583,#554d6d);border-right:1px solid rgba(255,255,255,.22);box-shadow:12px 0 32px rgba(82,74,108,.14)}
.nav-item.active{background:rgba(255,255,255,.14);box-shadow:inset 3px 3px 8px rgba(52,43,74,.22),inset -2px -2px 6px rgba(255,255,255,.10)}
.nav-count{background:#ffd79b}.topbar,.public-header{background:rgba(244,242,250,.72);backdrop-filter:blur(18px) saturate(1.15)}
.hero-panel{background:linear-gradient(135deg,#8275a0,#a58fc0 55%,#91b7b4);border:1px solid rgba(255,255,255,.28)}
.storefront-hero{background:radial-gradient(450px 230px at 88% 0%,rgba(255,211,198,.8),transparent 70%),linear-gradient(145deg,#f7f1fa,#e5edf6);box-shadow:var(--sh-2)}
.public-hero{min-height:410px;margin:22px clamp(14px,3vw,38px) 0;border-radius:var(--r-2xl);overflow:hidden;background-image:linear-gradient(90deg,rgba(89,76,111,.90),rgba(111,95,135,.66) 48%,rgba(141,183,177,.14)),url("assets/nhum-3d-hero.jpg");box-shadow:var(--sh-4);border:1px solid rgba(255,255,255,.35)}
.store-image{background:linear-gradient(145deg,#dfeeed,#f6e4e7);box-shadow:inset 6px 6px 14px rgba(120,115,143,.10),inset -7px -7px 15px rgba(255,255,255,.65)}
.store-card:hover{transform:translateY(-5px) rotate(-.15deg);box-shadow:var(--sh-3)}
.filter-tabs{padding:6px}.filter-tabs button.active{background:linear-gradient(145deg,#fff,#e7e4f0);box-shadow:5px 5px 10px rgba(105,98,130,.16),-4px -4px 10px rgba(255,255,255,.9)}
.public-footer{background:linear-gradient(145deg,#675c7e,#514965)}
.quiet-login{appearance:none;border:0;background:transparent;color:var(--text-muted);font:inherit;font-size:12px;padding:9px 12px;border-radius:999px;cursor:pointer;opacity:.52;transition:.2s ease}
.quiet-login:hover,.quiet-login:focus-visible{opacity:.9;background:rgba(255,255,255,.45);box-shadow:var(--sh-1);outline:none}
.public-footer .text-button{color:#d8cfdf;opacity:.38;font-size:12px}.public-footer .text-button:hover{opacity:.82}
.shop-controls,.store-toolbar-end{display:flex;align-items:center;gap:12px}.sort-control{display:flex;align-items:center;gap:9px;color:var(--text-muted);font-size:12px;font-weight:750;white-space:nowrap}.sort-control select{appearance:none;color:var(--text);font:inherit;padding:11px 38px 11px 14px;border-radius:var(--r-sm);cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,#817a91 50%),linear-gradient(135deg,#817a91 50%,transparent 50%),linear-gradient(145deg,rgba(255,255,255,.82),rgba(232,230,241,.9));background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%,0 0;background-size:5px 5px,5px 5px,100% 100%;background-repeat:no-repeat}
.product-tags{position:absolute;left:13px;top:13px;display:flex;flex-wrap:wrap;gap:6px;max-width:68%;z-index:3}.product-tag{padding:6px 9px;border-radius:999px;font-size:10px;font-weight:850;letter-spacing:.03em;box-shadow:3px 4px 8px rgba(74,67,91,.16),-2px -2px 6px rgba(255,255,255,.72)}.tag-new{background:#dff1e8;color:#477865}.tag-hot{background:#f7dcdc;color:#9a575c}.tag-sale{background:#fff0c9;color:#93692d}.tag-limited{background:#e4ddf3;color:#69598a}
.table-tags{display:block;margin-top:4px;color:var(--brand-500);font-size:10px;font-weight:800}
.sold-control button{color:var(--brand-600)}
.image-position-controls{margin:14px 0;padding:16px 18px;border:1px solid rgba(255,255,255,.76);border-radius:var(--r-md);background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(234,232,245,.82));box-shadow:var(--sh-1)}
.image-position-controls[hidden]{display:none}.image-control-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.image-control-head strong,.image-control-head small{display:block}.image-control-head small{color:var(--text-muted);font-size:10px;margin-top:3px}.image-control-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:14px;align-items:end}.range-field>span{display:flex;justify-content:space-between;color:var(--text-2);font-size:11px;font-weight:750;margin-bottom:9px}.range-field b{color:var(--brand-500)}.range-field input{width:100%;accent-color:var(--brand-500)}
.gallery-stage{width:min(100%,620px);height:auto;aspect-ratio:4/3;margin-inline:auto}.gallery-stage img{width:100%;height:100%;max-width:none;max-height:none;margin:0;background:#f3f0f7}.gallery-thumb img{background:#f3f0f7}
.store-image>.status{left:auto;right:13px;top:13px;width:max-content;max-width:calc(100% - 26px);white-space:nowrap}.tag-picker{margin:22px 0;padding:18px 20px}.tag-picker legend{padding:0 7px;font-weight:800;color:var(--text-2)}.tag-picker>p{margin:0 0 13px;color:var(--text-muted);font-size:13px}.tag-options{display:flex;gap:10px;flex-wrap:wrap}.tag-options label{cursor:pointer}.tag-options input{position:absolute;opacity:0;pointer-events:none}.tag-options span{display:block;padding:9px 13px;border-radius:999px;background:var(--surface-2);color:var(--text-muted);font-size:12px;font-weight:800;box-shadow:inset 2px 2px 5px rgba(106,99,130,.10),inset -2px -2px 5px rgba(255,255,255,.72);transition:.2s ease}.tag-options input:checked+span{color:#fff;background:var(--grad-brand);box-shadow:4px 5px 10px rgba(101,89,132,.22)}.tag-options input:focus-visible+span{box-shadow:var(--ring)}
.gate-card{background:linear-gradient(145deg,#f8f5fb,#eae7f2);box-shadow:-28px 0 70px rgba(53,45,70,.24)}.login-gate{background:#625779}
.public-header{position:relative;top:auto}.public-filter-row{display:flex;justify-content:flex-start;margin:-4px 0 24px}

/* Appearance settings */
.appearance-card{grid-column:1/-1}.theme-palette-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:20px 0}.theme-palette-picker button{border:1px solid rgba(255,255,255,.72);background:linear-gradient(145deg,#f9f7fd,#e8e5f0);border-radius:16px;padding:10px 8px;color:var(--text-2);font:700 11px var(--font);cursor:pointer;box-shadow:var(--sh-1);transition:.2s ease}.theme-palette-picker button:hover{transform:translateY(-2px)}.theme-palette-picker button.active{box-shadow:inset 3px 3px 8px rgba(94,87,118,.16),inset -3px -3px 8px rgba(255,255,255,.74);color:var(--brand-600)}.theme-palette-picker i{display:block;height:34px;border-radius:11px;margin-bottom:8px}.palette-lavender{background:linear-gradient(135deg,#9f90bd,#d9cfeb)}.palette-mint{background:linear-gradient(135deg,#77aa98,#cce8dc)}.palette-peach{background:linear-gradient(135deg,#d88f7d,#f7d8bd)}.palette-ocean{background:linear-gradient(135deg,#5c91b8,#bce0e7)}.palette-rose{background:linear-gradient(135deg,#c77f96,#f0ccd7)}.palette-neutral{background:linear-gradient(135deg,#77736e,#ddd8ce)}.appearance-options{margin-top:14px}
body[data-theme="mint"]{--brand-900:#365e56;--brand-800:#477268;--brand-700:#568478;--brand-600:#649589;--brand-500:#78aa9c;--brand-400:#9bc6b9;--bg:#edf6f2;--bg-tint:#e5f1ed;--surface:#f3faf7;--surface-2:#e7f2ee;--surface-3:#deebe6;--accent:#ffd69a;--grad-brand:linear-gradient(145deg,#8dbbae,#5e9184)}
body[data-theme="peach"]{--brand-900:#714d49;--brand-800:#875d57;--brand-700:#9b6b63;--brand-600:#ad786e;--brand-500:#c18b7d;--brand-400:#d9a99b;--bg:#fbf0e9;--bg-tint:#f6e9df;--surface:#fff7f1;--surface-2:#f7e9df;--surface-3:#efded2;--accent:#f2c777;--grad-brand:linear-gradient(145deg,#d99b88,#ae756b)}
body[data-theme="ocean"]{--brand-900:#31566f;--brand-800:#3e6a86;--brand-700:#4c7e9b;--brand-600:#5b8fab;--brand-500:#70a4bc;--brand-400:#99c5d4;--bg:#eaf3f6;--bg-tint:#e1eef2;--surface:#f2f9fa;--surface-2:#e4f0f3;--surface-3:#d9e9ed;--accent:#ffd18b;--grad-brand:linear-gradient(145deg,#7db3c6,#5286a3)}
body[data-theme="rose"]{--brand-900:#6b4758;--brand-800:#81576a;--brand-700:#956579;--brand-600:#a97488;--brand-500:#bf879b;--brand-400:#d6a8b7;--bg:#f8edf1;--bg-tint:#f3e5ea;--surface:#fdf5f8;--surface-2:#f4e6eb;--surface-3:#ecdce2;--accent:#f4ce85;--grad-brand:linear-gradient(145deg,#d39aab,#a66d82)}
body[data-theme="neutral"]{--brand-900:#4e4b47;--brand-800:#625e58;--brand-700:#747069;--brand-600:#858078;--brand-500:#99938a;--brand-400:#b9b2a8;--bg:#f0efeb;--bg-tint:#e9e7e1;--surface:#f8f6f1;--surface-2:#ebe8e1;--surface-3:#e1ddd4;--accent:#d8c991;--grad-brand:linear-gradient(145deg,#9c968c,#716c65)}
body[data-theme]{background:radial-gradient(900px 540px at 10% 0%,color-mix(in srgb,var(--brand-300) 32%,transparent),transparent 68%),radial-gradient(900px 560px at 92% 4%,color-mix(in srgb,var(--brand-400) 20%,transparent),transparent 68%),var(--bg)}body[data-theme] .sidebar{background:linear-gradient(165deg,var(--brand-700),var(--brand-900))}body[data-theme] .hero-panel{background:linear-gradient(135deg,var(--brand-700),var(--brand-500) 58%,color-mix(in srgb,var(--brand-400) 65%,#8eb9b2))}
body[data-font="modern"]{--font:Inter,"SF Pro Text",system-ui,sans-serif;--font-display:Inter,"SF Pro Display",system-ui,sans-serif}body[data-font="serif"]{--font:"Avenir Next",system-ui,sans-serif;--font-display:Georgia,"Times New Roman",serif}body[data-font="rounded"]{--font:Nunito,"SF Pro Rounded",ui-rounded,system-ui,sans-serif;--font-display:"SF Pro Rounded",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif}
body[data-layout="compact"] .content{padding:22px 26px 42px}body[data-layout="compact"] .metric-grid{gap:11px;margin:14px 0}body[data-layout="compact"] .metric-card{min-height:92px;padding:15px}body[data-layout="compact"] td{padding:10px 12px}body[data-layout="compact"] th{padding:10px 12px}body[data-layout="compact"] .panel{border-radius:20px}body[data-layout="compact"] .store-grid{gap:11px}
body[data-layout="wide"] .content,body[data-layout="wide"] .public-content{max-width:none}body[data-layout="wide"] .content{padding-inline:52px}body[data-layout="wide"] .store-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:760px){.public-hero{margin:10px;border-radius:28px}.shop-controls,.store-toolbar-end{width:100%;align-items:stretch;flex-direction:column}.sort-control{justify-content:space-between}.sort-control select{flex:1}.store-toolbar{align-items:stretch}.public-toolbar .search-box{width:100%}.public-header{padding-inline:16px}.image-control-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.theme-palette-picker{grid-template-columns:repeat(3,1fr)}body[data-layout="wide"] .store-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Smooth storefront filtering and gallery image changes */
.store-grid{opacity:1;transform:translateY(0) scale(1);transition:opacity .18s ease,transform .24s var(--ease-out);will-change:opacity,transform}.store-grid.store-grid-leaving,.store-grid.store-grid-entering{opacity:0;transform:translateY(7px) scale(.995);pointer-events:none}.store-image>img{backface-visibility:hidden;transform-style:preserve-3d;transition:opacity .22s ease,transform var(--dur-4) var(--ease-out)}
@media(prefers-reduced-motion:reduce){.store-grid{transition:none!important;transform:none!important}.store-grid.store-grid-leaving,.store-grid.store-grid-entering{opacity:1!important}}

/* ============================================================================
   21. EMERALD STUDIO — premium art direction (overrides §20 pastel layer)
   Deep emerald green + warm gold accent · ivory canvas · crisp layered shadows
   · glass surfaces · sparing luminous highlights. Delete this whole section to
   fall back to the pastel look. No markup or behaviour changes.
   ========================================================================== */
:root{
  /* Emerald brand scale */
  --brand-900:#06251c; --brand-800:#0a3327; --brand-700:#0e4a38;
  --brand-600:#125e46; --brand-500:#177a5b; --brand-400:#1f9d74; --brand-300:#54c19a;
  /* Warm gold accent — used sparingly for energy & value */
  --accent:#e8b84b; --accent-soft:#f8e9bd; --accent-ink:#4a3610;
  /* Refined playful secondaries (from the 3D toys) */
  --coral:#ff7a63; --amber:#f5b13c; --cyan:#2bb6b4; --violet:#8f6fd8;
  /* Ivory premium surfaces */
  --bg:#f5f7f3; --bg-tint:#eef1eb; --surface:#ffffff; --surface-2:#f7faf6;
  --surface-3:#edf1ea; --surface-ink:#082a20;
  /* Text */
  --text:#11241c; --text-2:#38493f; --text-muted:#68766d;
  --text-on-dark:#e9f2ec; --text-on-dark-muted:#9db3a8;
  /* Lines & focus */
  --line:#e6ebe2; --line-strong:#d3dbcf; --line-on-dark:rgba(255,255,255,.12);
  --ring:0 0 0 3px rgba(23,122,91,.26); --ring-accent:0 0 0 3px rgba(232,184,75,.45);
  /* State */
  --ok:#1c7a52; --ok-bg:#e6f6ec; --warn:#a4691a; --warn-bg:#fdf1dd;
  --err:#b23b34; --err-bg:#fdecea; --info:#2f6f8f; --info-bg:#e6f2f7;
  /* Moderate, confident radii (undo the oversized pastel radii) */
  --r-xs:8px; --r-sm:11px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:30px; --r-pill:999px;
  /* Crisp, multi-layer green-ink shadows (not neumorphic) */
  --sh-1:0 1px 2px rgba(10,44,33,.05),0 1px 1px rgba(10,44,33,.04);
  --sh-2:0 4px 12px -4px rgba(10,44,33,.12),0 2px 6px -3px rgba(10,44,33,.08);
  --sh-3:0 16px 34px -14px rgba(10,44,33,.20),0 6px 14px -8px rgba(10,44,33,.12);
  --sh-4:0 34px 64px -22px rgba(6,37,28,.34),0 14px 28px -16px rgba(6,37,28,.22);
  --sh-accent:0 10px 28px -8px rgba(232,184,75,.5);
  /* Signature gradients */
  --grad-brand:linear-gradient(135deg,#0e4a38,#177a5b);
  --grad-brand-strong:linear-gradient(135deg,#0a3327,#125e46 60%,#1f9d74);
  --grad-accent:linear-gradient(135deg,#f2cd6a,#dca02c);
  --grad-spectrum:linear-gradient(90deg,var(--coral),var(--amber),var(--accent),var(--cyan),var(--violet));
  --shadow:var(--sh-3); --radius:var(--r-lg);
}

/* Atmosphere — cool ivory canvas with faint emerald + gold light */
body{
  background:
    radial-gradient(1100px 600px at 84% -8%, rgba(31,157,116,.10), transparent 60%),
    radial-gradient(880px 500px at -6% 10%, rgba(232,184,75,.07), transparent 55%),
    var(--bg);
}
body::before{opacity:.022}
.public-shop{background:transparent}

/* Clean elevated surfaces (undo pastel neumorphism) */
.panel,.metric-card,.store-card,.summary-chip,.account-button{
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
}
.panel,.metric-card,.store-card,.summary-chip{border-radius:var(--r-lg)}
.field input,.field select,.field textarea,.search-box,.tag-picker,.sort-control select{
  background:var(--surface);border:1px solid var(--line-strong);box-shadow:none;
}
.filter-tabs{background:var(--surface-3);border:1px solid var(--line);padding:4px}
.filter-tabs button.active{background:var(--surface);color:var(--brand-600);box-shadow:var(--sh-1)}
.image-position-controls{background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}

/* Buttons — emerald gradient, gold-glow on hover, crisp press */
.button{border:1px solid transparent;box-shadow:var(--sh-1);border-radius:var(--r-sm)}
.button-primary{background:var(--grad-brand);background-size:180% 180%;background-position:0 0;color:#fff;box-shadow:var(--sh-2)}
.button-primary:hover{background-position:100% 0;box-shadow:var(--sh-accent)}
.button-primary:focus-visible{box-shadow:var(--ring),var(--sh-accent)}
.button-ghost{background:var(--surface);border-color:var(--line-strong);color:var(--text);box-shadow:var(--sh-1)}
.button-ghost:hover{border-color:var(--brand-400);background:var(--surface-2);color:var(--brand-600)}
.button-light{background:var(--surface);color:var(--text);box-shadow:var(--sh-2)}
.button:active,.filter-tabs button:active,.quiet-login:active{box-shadow:var(--sh-1);transform:translateY(0) scale(.98)}

/* Sidebar — deep emerald with a soft top glow, gold active marker */
.sidebar{
  background:
    radial-gradient(460px 220px at 18% -6%, rgba(31,157,116,.30), transparent 60%),
    linear-gradient(180deg,#06251c,#0a2c20 55%,#082a20);
  border-right:1px solid var(--line-on-dark);box-shadow:none;
}
.nav-item{color:#a6b6ad}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:linear-gradient(90deg,rgba(232,184,75,.16),rgba(232,184,75,.02));color:#fff;box-shadow:inset 3px 0 var(--accent)}
.nav-item.active .nav-icon{color:var(--accent)}
.nav-count{background:var(--accent);color:var(--accent-ink)}
.account-avatar{background:linear-gradient(135deg,var(--brand-500),var(--accent))}

/* Topbar & public header — frosted glass */
.topbar,.public-header{background:linear-gradient(180deg,rgba(245,247,243,.85),rgba(245,247,243,.60));backdrop-filter:blur(16px) saturate(1.3)}
.topbar.scrolled{background:linear-gradient(180deg,rgba(247,249,245,.95),rgba(247,249,245,.82));border-bottom-color:var(--line);box-shadow:var(--sh-2)}
.public-header.scrolled{background:rgba(255,255,255,.95);border-bottom-color:var(--line);box-shadow:var(--sh-2)}

/* Dashboard hero — emerald-veiled photo, gold eyebrow, deep shadow */
.hero-panel{
  background-image:linear-gradient(100deg,rgba(6,37,28,.97) 0%,rgba(6,37,28,.82) 40%,rgba(6,37,28,.22) 74%),url("assets/nhum-3d-hero.jpg");
  background-size:cover;background-position:center;
  border:1px solid rgba(255,255,255,.10);box-shadow:var(--sh-4);
}
.hero-tag{color:var(--accent)}
.hero-panel:after{background:linear-gradient(90deg,var(--accent),var(--brand-400),var(--cyan))}

/* Admin storefront hero */
.storefront-hero{
  background:
    radial-gradient(560px 280px at 90% -30%, rgba(31,157,116,.16), transparent 62%),
    linear-gradient(120deg,#ffffff,#f4f8f4 55%,#eef6f0);
  border:1px solid var(--line);box-shadow:var(--sh-2);
}

/* Store cards */
.store-image{background:linear-gradient(140deg,#e9f4ee,#f3ede2);box-shadow:none}
.store-card:hover{transform:translateY(-6px);box-shadow:var(--sh-4);border-color:var(--line-strong)}
.store-price strong{color:var(--brand-600)}

/* Public storefront hero + footer */
.public-hero{
  background-image:linear-gradient(95deg,rgba(6,37,28,.96),rgba(6,37,28,.72) 46%,rgba(6,37,28,.14)),url("assets/nhum-3d-hero.jpg");
  background-size:cover;background-position:center;
  box-shadow:var(--sh-4);border:1px solid rgba(255,255,255,.14);
}
.public-footer{background:linear-gradient(180deg,var(--brand-800),var(--brand-900))}
.public-footer .text-button{color:var(--accent)}

/* Login gate */
.login-gate{background:#06251c}
.gate-card{background:var(--surface);box-shadow:-36px 0 90px rgba(0,0,0,.28)}
.gate-submit{box-shadow:var(--sh-accent)}

/* Sort dropdown arrow recoloured to ink-green */
.sort-control select{
  background-image:linear-gradient(45deg,transparent 50%,#6b7a70 50%),linear-gradient(135deg,#6b7a70 50%,transparent 50%),var(--surface);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%,0 0;
  background-size:5px 5px,5px 5px,100% 100%;background-repeat:no-repeat;border:1px solid var(--line-strong);
}

/* Tag picker chips */
.tag-options span{background:var(--surface-3);border:1px solid var(--line);box-shadow:none}
.tag-options input:checked+span{background:var(--grad-brand);color:#fff;box-shadow:none}

/* Storefront product tags — quieter, premium */
.tag-new{background:#e4f3ea;color:#2f7a58}
.tag-hot{background:#fbe2dd;color:#b25548}
.tag-sale{background:#fbeecb;color:#96702a}
.tag-limited{background:#e9e2f6;color:#6b599a}
.product-tag{box-shadow:var(--sh-1)}

/* Toasts */
.toast{background:var(--surface-ink)}
.toast.success{border-left:4px solid var(--accent)}
.toast.error{border-left:4px solid var(--coral)}

/* Product browsing stays intentionally calm: cards remain mounted with no entrance motion. */
.store-grid,.store-grid.store-grid-leaving,.store-grid.store-grid-entering{opacity:1;transform:none;pointer-events:auto;transition:none;will-change:auto}
.store-card{translate:none!important;animation:none!important}.store-card:hover{transform:none}
.store-card{transition:border-color .18s ease,box-shadow .18s ease}.store-image>img{animation:none!important}

/* ==========================================================================
   22. PUBLIC STOREFRONT — Nhum Maker Editorial
   A bold, playful first impression for customers. Scoped to public mode so
   the management workspace keeps its existing density and behaviour.
   ========================================================================== */
.shop-announcement{
  min-height:34px;display:flex;align-items:center;justify-content:center;gap:14px;
  padding:7px 20px;background:#061f18;color:#dceae2;font-size:10px;font-weight:850;
  letter-spacing:.17em;text-align:center;text-transform:uppercase;
}
.announcement-spark{color:var(--accent);font-size:11px;animation:announcementPulse 2.8s ease-in-out infinite}
@keyframes announcementPulse{50%{opacity:.42;transform:scale(.75) rotate(45deg)}}
.public-header{
  height:82px;padding:0 clamp(20px,5vw,72px);position:sticky;top:0;z-index:30;
  background:rgba(248,250,246,.88);border-bottom:1px solid rgba(6,37,28,.08);
}
.public-brand{text-decoration:none;color:inherit}.public-brand .brand-mark{transition:transform .45s var(--ease-out)}
.public-brand:hover .brand-mark{transform:rotate(-5deg) scale(1.05)}
.public-nav{position:absolute;left:50%;display:flex;align-items:center;gap:34px;transform:translateX(-50%)}
.public-nav a{position:relative;color:var(--text-2);font-size:12px;font-weight:800;text-decoration:none}
.public-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:var(--accent);transition:right .28s var(--ease-out)}
.public-nav a:hover:after{right:0}
.quiet-login{display:flex;align-items:center;gap:10px;color:var(--brand-800);font-weight:850}
.quiet-login span{display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--line-strong);border-radius:50%;transition:.25s}
.quiet-login:hover span{background:var(--brand-800);border-color:var(--brand-800);color:#fff;transform:rotate(45deg)}

.public-hero{
  height:clamp(440px,62vh,540px);min-height:0;box-sizing:border-box;margin:14px clamp(14px,3vw,42px) 0;
  padding:clamp(42px,5vw,62px) clamp(26px,6vw,88px);border-radius:30px;
  isolation:isolate;overflow:hidden;box-shadow:0 35px 90px -42px rgba(6,37,28,.65);
}
.public-hero:before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 70% 15%,rgba(232,184,75,.18),transparent 19%),linear-gradient(115deg,transparent 58%,rgba(255,255,255,.04) 58% 59%,transparent 59%);
}
#public-cover>.cover-slides{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:0}
.public-hero .cover-slide{position:absolute;inset:0;width:100%;height:100%}
.cover-slide:after{background:linear-gradient(91deg,rgba(4,27,20,.94) 0%,rgba(5,34,25,.74) 37%,rgba(5,34,25,.10) 67%,rgba(5,34,25,.02))}
.cover-slide{opacity:0;transform:translate3d(26px,0,0) scale(1.018);transition:opacity .9s ease,transform 1.05s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.cover-slide.active{opacity:1;transform:translate3d(0,0,0) scale(1);z-index:1}
.cover-slide.leaving{opacity:0;transform:translate3d(-18px,0,0) scale(1.006);z-index:2}
#public-cover>.public-hero-copy{position:relative;max-width:590px;z-index:3;transition:opacity .32s ease,transform .42s cubic-bezier(.22,1,.36,1)}
.public-hero-copy.is-changing{opacity:.08;transform:translate3d(-10px,0,0)}
.public-hero-copy .eyebrow{display:flex;align-items:center;gap:10px;color:#f4cc6c;letter-spacing:.2em}
.public-hero-copy .eyebrow:before{content:"";width:34px;height:1px;background:currentColor}
.public-hero h1{max-width:590px;margin:13px 0 20px;font-size:clamp(40px,4.4vw,62px);line-height:.93;letter-spacing:-.058em;text-wrap:balance;text-shadow:0 3px 26px rgba(0,0,0,.18)}
.public-hero-copy>p:last-of-type{max-width:500px;color:rgba(237,246,241,.88);font-size:clamp(13px,1.15vw,16px);line-height:1.58}
.hero-actions{display:flex;align-items:center;gap:10px;margin-top:24px}
.hero-cta{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:46px;padding:0 21px;border-radius:999px;font-size:11px;font-weight:900;text-decoration:none;transition:transform .28s var(--ease-out),background .28s,box-shadow .28s}
.hero-cta-primary{background:#f6ce68;color:#273018;box-shadow:0 16px 34px -16px rgba(246,206,104,.8)}
.hero-cta-primary span{font-size:17px}.hero-cta-primary:hover{transform:translateY(-3px);background:#ffe08a;box-shadow:0 20px 42px -15px rgba(246,206,104,.9)}
.hero-cta-ghost{border:1px solid rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(8px)}
.hero-cta-ghost:hover{transform:translateY(-3px);background:rgba(255,255,255,.13)}
#public-cover>.hero-studio-note{
  position:absolute;right:clamp(28px,5vw,72px);bottom:clamp(28px,4vw,48px);z-index:3;
  display:grid;place-items:center;width:132px;height:132px;border:1px solid rgba(255,255,255,.24);
  border-radius:50%;background:rgba(5,36,27,.34);color:#fff;text-align:center;backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 8px rgba(255,255,255,.035);
}
.hero-studio-note strong{font:italic 750 18px/1.02 Georgia,serif;letter-spacing:-.035em}
.hero-studio-note small{position:absolute;bottom:20px;color:#f4cc6c;font-size:6px;font-weight:900;line-height:1.3;letter-spacing:.14em}
.studio-orbit{position:absolute;top:17px;color:rgba(255,255,255,.58);font-size:6px;font-weight:900;letter-spacing:.18em}
#public-cover>.cover-dots{position:absolute;max-width:none;left:clamp(26px,6vw,88px);bottom:20px;gap:9px}
.cover-dots button{height:5px;width:5px}.cover-dots button.active{width:38px;background:var(--accent)}

.maker-ribbon{
  display:grid;grid-template-columns:repeat(3,1fr);max-width:1320px;margin:0 auto;
  border-inline:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.66);
}
.maker-ribbon>div{display:flex;align-items:center;justify-content:center;gap:15px;min-height:82px;padding:14px 24px;border-right:1px solid var(--line)}
.maker-ribbon>div:last-child{border:0}.maker-ribbon b{color:var(--accent);font:italic 800 24px Georgia,serif}
.maker-ribbon span,.maker-ribbon strong,.maker-ribbon small{display:block}.maker-ribbon strong{color:var(--text);font-size:13px}.maker-ribbon small{margin-top:3px;color:var(--text-muted);font-size:10px}

.public-content{max-width:1380px;padding:82px clamp(18px,5vw,68px) 120px}
.shop-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.65fr);gap:60px;align-items:end;margin-bottom:72px}
.shop-intro .eyebrow,.story-copy .eyebrow{color:var(--brand-500);letter-spacing:.18em}
.shop-intro h2,.studio-story h2{margin:13px 0 0;color:var(--brand-900);font-size:clamp(40px,5.2vw,72px);line-height:.94;letter-spacing:-.06em}
.shop-intro h2 em,.studio-story h2 em{color:var(--brand-500);font-family:Georgia,serif;font-weight:500}
.shop-intro>p{max-width:480px;margin:0 0 5px;color:var(--text-2);font-size:15px;line-height:1.8}
.public-toolbar{padding-top:26px;border-top:1px solid var(--line);align-items:center}.public-toolbar h3{margin:0 0 5px;font-size:22px;letter-spacing:-.025em}
.shop-controls{gap:10px}.public-filter-row{margin:4px 0 32px}.public-filter-row .filter-tabs{padding:5px;border-radius:999px}.public-filter-row .filter-tabs button{padding-inline:17px;border-radius:999px}
.public-toolbar .search-box{min-width:270px;border-radius:999px}.public-toolbar .sort-control select{border-radius:999px}

.public-store-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.public-store-grid .store-card{overflow:hidden;border-color:rgba(6,37,28,.09);border-radius:20px;box-shadow:0 4px 16px -12px rgba(6,37,28,.28);transition:transform .35s var(--ease-out),box-shadow .35s,border-color .35s}
.public-store-grid .store-card:hover{transform:translateY(-8px)!important;border-color:rgba(23,122,91,.24);box-shadow:0 28px 55px -30px rgba(6,37,28,.42)}
.public-store-grid .store-image{height:auto;aspect-ratio:1/1.05;overflow:hidden;background:linear-gradient(145deg,#ecf4ef,#f5efe5)}
.public-store-grid .store-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 64%,rgba(6,37,28,.12));pointer-events:none}
.public-store-grid .store-image>img{transition:transform .65s var(--ease-out)!important}
.public-store-grid .store-card:hover .store-image>img{transform:scale(1.055)!important}
.public-store-grid .store-body{padding:20px 20px 22px}.public-store-grid .store-meta{color:var(--brand-500);font-size:9px;letter-spacing:.15em}
.public-store-grid .store-body h3{min-height:48px;margin:8px 0 15px;font-size:18px;line-height:1.25;letter-spacing:-.025em}
.public-store-grid .store-price{padding-top:14px;border-top:1px solid var(--line)}
.public-store-grid .store-price strong{font-size:19px;color:var(--brand-800)}.public-store-grid .store-price span{font-size:10px}
.public-store-grid .store-placeholder{font:italic 800 54px Georgia,serif;color:rgba(14,74,56,.25)}
.public-store-grid .product-tags{left:13px;top:13px}.public-store-grid .product-tag{backdrop-filter:blur(8px)}
.public-store-grid .status{z-index:3}
.public-store-grid .store-empty{grid-column:1/-1;min-height:280px;display:grid;place-items:center;border:1px dashed var(--line-strong);border-radius:24px;background:rgba(255,255,255,.45);color:var(--text-muted)}

.studio-story{display:grid;grid-template-columns:minmax(360px,1.05fr) minmax(360px,.95fr);gap:clamp(50px,8vw,120px);align-items:center;padding:clamp(70px,10vw,140px) max(24px,calc((100vw - 1280px)/2));background:#092c22;color:#fff;overflow:hidden}
.story-image{position:relative;min-height:650px;border-radius:160px 28px 160px 28px;overflow:hidden;box-shadow:0 40px 80px -40px #000}
.story-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(5,28,21,.52))}
.story-image img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transition:transform 1s var(--ease-out)}
.story-image:hover img{transform:scale(1.035)}
.story-image span{position:absolute;left:28px;bottom:28px;z-index:2;color:#fff;font-size:10px;font-weight:900;line-height:1.5;letter-spacing:.19em}
.story-copy .eyebrow{color:#eec65e}.studio-story h2{color:#fff}.studio-story h2 em{color:#8bd1b1}
.story-copy>p:not(.eyebrow){max-width:570px;margin:28px 0;color:#aec1b8;font-size:15px;line-height:1.85}
.story-copy ol{list-style:none;margin:34px 0;padding:0;border-top:1px solid rgba(255,255,255,.12)}
.story-copy li{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.story-copy li b{color:#eec65e;font:italic 700 18px Georgia,serif}.story-copy li span,.story-copy li strong,.story-copy li small{display:block}
.story-copy li strong{font-size:13px}.story-copy li small{margin-top:3px;color:#8fa89c;font-size:10px}
.story-link{display:inline-flex;align-items:center;gap:25px;color:#fff;font-size:12px;font-weight:900;text-decoration:none}.story-link span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#eec65e;color:#26361f;transition:.28s}
.story-link:hover span{transform:translateX(5px) rotate(-35deg)}

.public-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;padding:40px clamp(22px,5vw,70px);text-align:left}
.footer-brand{display:flex;align-items:center;gap:12px}.footer-brand>div:last-child,.footer-brand strong,.footer-brand small{display:block}.footer-brand small{margin-top:2px;color:#92aa9e;font-size:9px}
.public-footer>p{margin:0;color:#839c90;font-size:10px;text-align:center}.public-footer>.text-button{justify-self:end;margin:0;color:#d7bd73}

@media(max-width:1100px){
  .public-nav{display:none}.public-store-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-studio-note{display:none}.story-image{min-height:560px}
}
@media(max-width:820px){
  .shop-announcement{font-size:8px;letter-spacing:.12em}.public-header{height:72px}
  .public-hero{height:auto;min-height:520px;padding:48px 30px 84px}.public-hero h1{font-size:clamp(40px,9.5vw,58px)}
  .hero-studio-note{display:none}.cover-dots{left:30px}.maker-ribbon{grid-template-columns:1fr}.maker-ribbon>div{justify-content:flex-start;min-height:84px;border-right:0;border-bottom:1px solid var(--line);padding-inline:30px}
  .shop-intro{grid-template-columns:1fr;gap:26px;margin-bottom:50px}.public-content{padding-top:80px}
  .public-store-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-story{grid-template-columns:1fr;padding:80px 24px}.story-image{min-height:520px;max-width:620px;width:100%;margin:auto}.public-footer{grid-template-columns:1fr;text-align:center}.footer-brand{justify-content:center}.public-footer>.text-button{justify-self:center}.public-footer>p{order:3}
}
@media(max-width:560px){
  .announcement-spark{display:none}.public-header{padding-inline:14px}.public-header .auth-brand small{display:block}.quiet-login{font-size:0}.quiet-login span{font-size:12px}
  .public-hero{min-height:500px;margin:8px;border-radius:24px;padding:42px 24px 76px}.cover-slide{background-position:62% center}.cover-slide:after{background:linear-gradient(180deg,rgba(4,27,20,.82),rgba(5,34,25,.48) 58%,rgba(5,34,25,.82))}
  .public-hero-copy .eyebrow{font-size:8px}.public-hero h1{font-size:clamp(38px,11.5vw,52px);line-height:.94}.hero-actions{align-items:stretch;flex-direction:column}.hero-cta{width:100%}
  .maker-ribbon{margin-inline:8px}.public-content{padding:68px 14px 82px}.shop-intro{padding-inline:8px}.shop-intro h2,.studio-story h2{font-size:42px}
  .public-toolbar{align-items:stretch}.public-store-grid{grid-template-columns:1fr;gap:16px}.public-store-grid .store-image{aspect-ratio:1.08/1}.public-store-grid .store-body h3{min-height:0}
  .public-filter-row{overflow:auto;padding-bottom:3px}.public-filter-row .filter-tabs{min-width:max-content}.story-image{min-height:430px;border-radius:110px 24px 110px 24px}.studio-story{padding-inline:16px}
}
@media(prefers-reduced-motion:reduce){.announcement-spark{animation:none}.cover-slide{transform:none!important;transition:none}.public-hero-copy{transition:none}.story-image img{transition:none}}

/* 23. Compact, high-contrast public product cards */
.public-store-grid{gap:18px}
.public-store-grid .store-card{background:#fbfcfa;border-color:#dfe7df}
.public-store-grid .store-image{aspect-ratio:1.1/1;border-bottom:1px solid #dfe7df}
.public-store-grid .store-body{
  padding:15px 16px 16px;background:linear-gradient(180deg,#fff 0%,#fbfcfa 100%);
  box-shadow:inset 0 3px 0 rgba(23,122,91,.09)
}
.public-store-grid .store-meta{
  display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;
  background:#edf4ef;color:#467562;font-size:8px;font-weight:900;letter-spacing:.16em
}
.public-store-grid .store-body h3{
  min-height:42px;margin:8px 0 11px;color:#102a20;font-size:18px;font-weight:900;
  line-height:1.18;letter-spacing:-.035em
}
.public-store-grid .store-price{
  display:flex;align-items:center;gap:10px;margin:0;padding:11px 12px;border:0;border-radius:12px;
  background:#f0f5f1
}
.public-store-grid .store-price strong{display:flex;flex:1;flex-direction:column;color:#0b4937;font-size:20px;line-height:1.05}
.public-store-grid .store-price strong small{
  margin-bottom:5px;color:#6d8177;font:850 7px/1 var(--font);letter-spacing:.15em;text-transform:uppercase
}
.public-store-grid .stock-copy{
  flex:none;padding:6px 8px;border-radius:999px;background:#fff;color:#65766d;font-size:9px;font-weight:850;white-space:nowrap;
  box-shadow:0 1px 3px rgba(6,37,28,.08)
}
.public-store-grid .stock-copy.stock-good{background:#e4f4e9;color:#247450}
.public-store-grid .stock-copy.stock-low{background:#fff0d6;color:#986519}
.public-store-grid .stock-copy.stock-out{background:#fde9e7;color:#a64039}
.public-store-grid .status{font-size:9px;padding:6px 9px}
@media(max-width:560px){
  .public-store-grid .store-body{padding:14px}.public-store-grid .store-body h3{min-height:0;font-size:17px}
  .public-store-grid .store-price{padding:10px}.public-store-grid .store-price strong{font-size:19px}
}

/* 24. Subtle 3D-layer storefront background */
.public-shop .public-content {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(calc(100% - 32px), 1380px);
  box-sizing: border-box;
  margin: 42px auto 76px;
  border: 1px solid rgba(14, 74, 56, 0.1);
  border-radius: 34px;
  background:
    radial-gradient(700px 420px at -5% 10%, rgba(232, 184, 75, 0.11), transparent 62%),
    radial-gradient(720px 500px at 104% 38%, rgba(31, 157, 116, 0.12), transparent 65%),
    linear-gradient(145deg, #fafbf8 0%, #f1f5ef 58%, #f7f5ed 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 28px 70px -58px rgba(6, 37, 28, 0.35);
}

.public-shop .public-content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image:
    radial-gradient(circle, rgba(14, 74, 56, 0.22) 1px, transparent 1.3px),
    repeating-linear-gradient(0deg, rgba(14, 74, 56, 0.035) 0 1px, transparent 1px 34px);
  background-size: 28px 28px, 100% 34px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0.55));
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0.55));
}

.public-shop .public-content::after {
  content: "";
  position: absolute;
  top: 34%;
  left: -182px;
  z-index: 0;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(23, 122, 91, 0.1);
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 0 0 32px rgba(23, 122, 91, 0.055),
    0 0 0 66px rgba(23, 122, 91, 0.035),
    0 0 0 104px rgba(232, 184, 75, 0.028);
}

.public-shop .public-content > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 820px) {
  .public-shop .public-content {
    width: calc(100% - 16px);
    margin: 22px auto 48px;
    border-radius: 24px;
  }

  .public-shop .public-content::after {
    left: -260px;
    opacity: 0.7;
  }
}