/* ═══════════════════════════════════════════════════════════
   COREVERSE — White Cybercore · Liquid Chrome · Sci-Fi Luxury
   ═══════════════════════════════════════════════════════════ */

/* Studio type system: H1 Northwood High · H2 Strange Dreams · H3 Longa Iberica ·
   Thai + body copy Ekkamai New. Display faces stay ASCII-only so every other
   glyph falls back per-glyph to Ekkamai New / Inter. */
@font-face{font-family:"Core Northwood";src:url("../assets/fonts/northwood-high.ttf") format("truetype");font-display:swap;unicode-range:U+0020-007E}
@font-face{font-family:"Core Strange";src:url("../assets/fonts/strange-dreams.ttf") format("truetype");font-display:swap;unicode-range:U+0020-007E}
@font-face{font-family:"Core Strange";font-style:italic;src:url("../assets/fonts/strange-dreams-italic.ttf") format("truetype");font-display:swap;unicode-range:U+0020-007E}
@font-face{font-family:"Core Longa";src:url("../assets/hero-v6/fonts/LongaIberica-DEMO.ttf") format("truetype");font-display:swap;unicode-range:U+0020-007E}
@font-face{font-family:"Ekkamai New";src:url("../assets/fonts/ekkamainew-thin.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Ekkamai New";src:url("../assets/fonts/ekkamainew-regular.ttf") format("truetype");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Ekkamai New";src:url("../assets/fonts/ekkamainew-bold.ttf") format("truetype");font-weight:700 900;font-style:normal;font-display:swap}

:root{
  --white:#ffffff;
  --grey:#f5f5f7;
  --grey-2:#ececef;
  --ink:#0a0a0b;
  --ink-2:#6e6e73;
  --ink-3:#a4a4ab;
  --line:rgba(10,10,11,.08);
  --line-soft:rgba(10,10,11,.05);
  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.82);
  --chrome:linear-gradient(120deg,#eceef2,#9ea3ad 30%,#fafbfd 50%,#7c8290 72%,#d9dbe0);
  --holo:linear-gradient(115deg,#ffd9e8,#d9e8ff 30%,#d9ffe3 55%,#fff3d1 78%,#f1d9ff);
  --r-lg:28px;
  --r-md:20px;
  --r-sm:14px;
  --shadow-soft:0 18px 50px -18px rgba(20,22,30,.16), 0 4px 14px -6px rgba(20,22,30,.08);
  --shadow-float:0 30px 80px -30px rgba(20,22,30,.28), 0 8px 24px -12px rgba(20,22,30,.12);
  --ease:cubic-bezier(.22,.8,.24,1);
  --ease-spring:cubic-bezier(.34,1.4,.34,1);
  --font-display:"Space Grotesk","Ekkamai New",system-ui,sans-serif;
  --font-body:"Ekkamai New","Inter",system-ui,sans-serif;
  --font-mono:"Space Mono","Ekkamai New","Courier New",monospace;
  --font-h1:"Core Northwood","Ekkamai New","Space Grotesk",system-ui,sans-serif;
  --font-h2:"Core Strange","Ekkamai New","Space Grotesk",system-ui,sans-serif;
  --font-h3:"Core Longa","Ekkamai New","Inter",system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
/* ?snap screenshot mode: freeze all motion, show everything */
html.snap{scroll-behavior:auto}
.snap *,.snap *::before,.snap *::after{transition:none!important;animation:none!important}
.snap [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-weight:500;
  background:var(--white);
  color:var(--ink);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-booting{overflow:hidden}
::selection{background:#dfe3ea;color:var(--ink)}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
:where(a,button,input,select):focus-visible{outline:2px solid #111;outline-offset:3px}

/* ── shared type ── */
.micro{
  font-family:var(--font-display);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-2);font-weight:500;
}
.mono{font-family:var(--font-mono)}
.h2{
  font-family:var(--font-h1);
  font-size:clamp(40px,5vw,66px);
  font-weight:500;letter-spacing:.035em;line-height:1.16;
  text-transform:none;
  margin:10px 0 20px;
}
.lead{color:var(--ink-2);font-family:var(--font-h3);font-size:15px;letter-spacing:.06em;text-transform:uppercase;line-height:1.75}
.section{padding:clamp(56px,8vw,110px) clamp(20px,5vw,72px)}
.section__head{margin-bottom:clamp(26px,4vw,48px)}

/* ── glass ── */
.glass{
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow-soft);
  border-radius:var(--r-lg);
}
.glass-soft{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
}

/* ── buttons ── */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-display);font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  padding:14px 8px 14px 24px;border-radius:999px;
  border:1px solid var(--line);background:var(--glass-strong);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .5s var(--ease-spring),box-shadow .5s var(--ease),border-color .3s;
  overflow:hidden;
}
.btn:hover{box-shadow:var(--shadow-soft);border-color:rgba(10,10,11,.16)}
.btn__orb{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--ink);color:#fff;flex:none;margin-right:6px;
  transition:transform .5s var(--ease-spring);
}
.btn:hover .btn__orb{transform:rotate(45deg)}
.btn--pill{padding-right:8px}
.btn--chrome,.btn--ghost{
  width:100%;justify-content:center;padding:14px 20px;margin-top:10px;border-radius:999px;
}
.btn--chrome{
  background:linear-gradient(120deg,#26272b,#4b4e57 45%,#191a1d);
  color:#fff;border-color:transparent;
  background-size:180% 100%;
  transition:background-position .8s var(--ease),transform .5s var(--ease-spring),box-shadow .5s;
}
.btn--chrome:hover{background-position:90% 0;box-shadow:var(--shadow-soft)}
.btn--ghost{background:transparent;border:1px solid var(--line)}
.btn--ghost:hover{background:rgba(10,10,11,.04)}
.btn .ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.65),transparent 65%);
  transform:scale(0);animation:ripple .7s var(--ease) forwards;
  mix-blend-mode:overlay;
}
@keyframes ripple{to{transform:scale(2.4);opacity:0}}

.linklike{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:10px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);
  border-bottom:1px solid var(--line);padding-bottom:3px;
  transition:color .3s,border-color .3s;
}
.linklike:hover{color:var(--ink);border-color:var(--ink)}

.card-arrow{
  position:absolute;right:16px;bottom:14px;
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.7);color:var(--ink);
  transition:transform .45s var(--ease-spring),background .3s,color .3s;
}
.tilt:hover .card-arrow,.quick__card:hover .card-arrow{background:var(--ink);color:#fff;transform:rotate(45deg)}

/* ═══════════ BOOT SCREEN ═══════════ */
.boot{
  position:fixed;inset:0;z-index:100;
  background:var(--white);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .9s var(--ease),filter .9s var(--ease),transform .9s var(--ease);
}
.boot.is-done{opacity:0;filter:blur(18px);transform:scale(1.06);pointer-events:none}
.boot__grid{
  position:absolute;inset:0;opacity:.5;
  background:
    linear-gradient(rgba(10,10,11,.035) 1px,transparent 1px) 0 0/100% 72px,
    linear-gradient(90deg,rgba(10,10,11,.035) 1px,transparent 1px) 0 0/72px 100%;
  mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);
}
.boot__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;padding:20px;text-align:center}
.boot__logo{width:min(320px,70vw);mix-blend-mode:multiply;animation:bootLogo 3.4s var(--ease) both}
@keyframes bootLogo{0%{opacity:0;filter:blur(14px);transform:scale(.94)}100%{opacity:1;filter:blur(0);transform:scale(1)}}
.boot__terminal{min-height:110px;text-align:left}
.boot__line{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;
  color:var(--ink-2);min-height:20px;white-space:pre;
}
.boot__line:first-child{color:var(--ink);font-weight:700}
.boot__line .caret{display:inline-block;width:7px;height:13px;background:var(--ink);vertical-align:-2px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.boot__bar{width:min(300px,64vw);height:2px;background:var(--grey-2);border-radius:2px;overflow:hidden}
.boot__bar-fill{display:block;height:100%;width:0%;background:linear-gradient(90deg,#8b909c,#0a0a0b);transition:width .35s var(--ease)}
.boot__enter{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.28em;
  padding:13px 30px;border-radius:999px;border:1px solid var(--ink);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease),background .3s,color .3s;
}
.boot__enter.is-ready{opacity:1;transform:none;pointer-events:auto}
.boot__enter:hover{background:var(--ink);color:#fff}
.boot__foot{
  position:absolute;bottom:26px;left:0;right:0;text-align:center;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.3em;color:var(--ink-3);
}

/* ═══════════ VEIL + CURSOR ═══════════ */
.veil{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  background:rgba(255,255,255,.65);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transition:opacity .45s var(--ease);
}
.veil.is-on{opacity:1}
.cursor-glow{
  position:fixed;z-index:1;top:0;left:0;width:520px;height:520px;
  margin:-260px 0 0 -260px;pointer-events:none;
  background:radial-gradient(circle,rgba(148,158,178,.16),rgba(214,190,255,.05) 45%,transparent 70%);
  filter:blur(6px);opacity:0;transition:opacity .6s;
}
body.has-cursor .cursor-glow{opacity:1}
@media (hover:none){.cursor-glow{display:none}}

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:80;
  width:min(1280px,calc(100% - 28px));
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 18px;border-radius:999px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 10px 40px -18px rgba(20,22,30,.18);
  transition:box-shadow .4s,background .4s;
  opacity:0;translate:0 -12px;
}
body.is-live .nav{opacity:1;translate:0 0;transition:opacity .9s var(--ease) .15s,translate .9s var(--ease) .15s,box-shadow .4s,background .4s}
.nav.is-scrolled{background:rgba(255,255,255,.78);box-shadow:0 14px 44px -18px rgba(20,22,30,.26)}
.nav__logo{height:30px;mix-blend-mode:multiply}
.nav__menu{display:flex;gap:4px}
.nav__link{
  position:relative;
  font-family:var(--font-display);font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
  padding:8px 11px;transition:color .3s;
}
.nav__link::after{
  content:"";position:absolute;left:11px;right:11px;bottom:4px;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__link:hover,.nav__link.is-active{color:var(--ink)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__actions{display:flex;align-items:center;gap:6px}
.nav__icon{
  position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.6);
  transition:background .3s,transform .4s var(--ease-spring);
}
.nav__icon:hover{background:var(--white)}
.nav__badge{
  position:absolute;top:-3px;right:-3px;width:15px;height:15px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:8.5px;font-weight:700;
  display:grid;place-items:center;font-family:var(--font-display);
}
.nav__burger{display:none;flex-direction:column;gap:5px;width:36px;height:36px;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line-soft)}
.nav__burger span{width:15px;height:1.4px;background:var(--ink);transition:transform .4s var(--ease)}
body.menu-open .nav__burger span:first-child{transform:translateY(3.2px) rotate(45deg)}
body.menu-open .nav__burger span:last-child{transform:translateY(-3.2px) rotate(-45deg)}

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:110px clamp(20px,5vw,72px) 0;
  overflow:hidden;background:
    radial-gradient(48% 64% at 78% 42%,rgba(232,235,241,.7),transparent 70%),
    linear-gradient(135deg,#fff 0%,#fdfdfd 62%,#f4f5f7 100%);
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.94}
.hero__fog{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,#fff 0%,rgba(255,255,255,.985) 38%,rgba(255,255,255,.78) 52%,transparent 72%),
    radial-gradient(56% 74% at 9% 82%,#fff 22%,rgba(255,255,255,.92) 54%,transparent 80%),
    radial-gradient(50% 60% at 50% 110%,rgba(255,255,255,.9),transparent 72%),
    linear-gradient(rgba(255,255,255,.28),transparent 34%);
}
.hero__particles{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero__particles i{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#c9cdd6 60%,#9aa0ad);
  box-shadow:0 2px 8px rgba(20,22,30,.18);
  animation:floaty var(--dur,9s) ease-in-out var(--del,0s) infinite alternate;
}
@keyframes floaty{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--dx,10px),var(--dy,-26px),0)}
}
.hero__frame{position:absolute;inset:0;pointer-events:none}
.hero__tick{position:absolute;width:22px;height:22px;border:1px solid rgba(10,10,11,.22)}
.hero__tick--tr{top:96px;right:clamp(20px,5vw,72px);border-left:0;border-bottom:0}
.hero__tick--br{bottom:120px;right:clamp(20px,5vw,72px);border-left:0;border-top:0}
.hero__coord{
  position:absolute;top:50%;right:calc(clamp(20px,5vw,72px) - 8px);
  writing-mode:vertical-rl;
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.3em;color:var(--ink-3);
}
.hero__content{position:relative;z-index:3;width:min(54vw,690px);max-width:690px}
.hero__welcome{margin-bottom:14px}
.hero__title{
  position:relative;display:block;width:100%;line-height:1;
  filter:drop-shadow(0 18px 24px rgba(43,45,52,.08));
}
.hero__logo-crop{position:relative;display:block;width:100%;overflow:hidden}
.hero__logo{
  width:100%;height:auto;mix-blend-mode:multiply;
  filter:saturate(.68) contrast(1.04);
  animation:logoShimmer 8s ease-in-out infinite alternate;
}
@keyframes logoShimmer{
  0%,18%{filter:saturate(.62) contrast(1.02) brightness(.98)}
  62%{filter:saturate(.72) contrast(1.06) brightness(1.08)}
  100%{filter:saturate(.62) contrast(1.02) brightness(1)}
}
.hero__sub{
  margin:20px 0 30px;
  font-family:var(--font-display);
  font-size:clamp(15px,1.55vw,22px);font-weight:500;
  letter-spacing:.2em;line-height:1.45;color:#47484e;
  text-transform:uppercase;
}
.hero__actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hero__try-link{
  display:inline-flex;align-items:center;gap:12px;min-height:44px;
  font-family:var(--font-display);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  border-bottom:1px solid rgba(10,10,11,.24);transition:border-color .3s,transform .4s var(--ease);
}
.hero__try-link:hover{border-color:#111;transform:translateX(3px)}
.hero__sigil{position:absolute;z-index:1;width:128px;height:128px;border:1px solid rgba(17,17,20,.13);border-radius:50%;pointer-events:none}
.hero__sigil::before,.hero__sigil::after{content:"";position:absolute;inset:50% auto auto 50%;background:rgba(17,17,20,.15);transform:translate(-50%,-50%)}
.hero__sigil::before{width:150%;height:1px}.hero__sigil::after{width:1px;height:150%}
.hero__sigil i,.hero__sigil b{position:absolute;display:block;border:1px solid rgba(17,17,20,.11);transform:rotate(45deg)}
.hero__sigil i{inset:23%}.hero__sigil b{inset:39%}
.hero__sigil--one{left:47%;top:18%;transform:rotate(17deg)}
.hero__sigil--two{right:4%;bottom:17%;width:76px;height:76px;transform:rotate(-12deg);opacity:.7}
.hero__orbit{position:absolute;z-index:1;right:7%;top:11%;width:38vw;max-width:590px;aspect-ratio:1.7;border:1px solid rgba(30,31,36,.11);border-radius:50%;transform:rotate(-17deg);pointer-events:none}
.hero__orbit span,.hero__orbit i{position:absolute;border-radius:50%;background:#b6bbc5;box-shadow:0 0 0 5px rgba(255,255,255,.7)}
.hero__orbit span{width:5px;height:5px;left:8%;top:62%}.hero__orbit i{width:3px;height:3px;right:14%;top:20%}
.hero__bottom{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 clamp(20px,5vw,72px);
}
.hero__scroll{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.hero__scroll-track{position:relative;width:120px;height:1px;background:var(--line)}
.hero__scroll-dot{
  position:absolute;top:-2.5px;left:0;width:6px;height:6px;border-radius:50%;background:var(--ink);
  animation:scrollDot 3s var(--ease) infinite;
}
@keyframes scrollDot{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:114px;opacity:0}}
.hero__ticker{
  border-top:1px solid var(--line-soft);
  padding:13px 0 16px;overflow:hidden;white-space:nowrap;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.hero__ticker-inner{display:inline-flex;animation:ticker 38s linear infinite}
.hero__ticker-inner span{
  font-family:var(--font-display);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-3);padding-right:20px;
}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ═══════════ REVEAL ═══════════ */
[data-reveal]{
  opacity:0;transform:translateY(26px);filter:blur(8px);
  transition:opacity 1s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s),filter 1s var(--ease) var(--d,0s);
}
[data-reveal].revealed{opacity:1;transform:none;filter:blur(0)}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;filter:none;transition:none}
  .hero__ticker-inner,.hero__scroll-dot,.hero__particles i{animation:none}
}

/* ═══════════ NEW DROP ═══════════ */
.drop{
  display:grid;gap:22px;
  grid-template-columns:minmax(240px,.9fr) minmax(300px,1.25fr) 1.4fr;
  align-items:stretch;background:var(--grey);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.drop__intro{display:flex;flex-direction:column;gap:10px;justify-content:center}
.drop__intro .btn{align-self:flex-start;margin-top:14px}
.drop__dots{display:flex;gap:7px;margin-top:26px}
.drop__dots span{width:6px;height:6px;border-radius:50%;background:var(--ink-3);opacity:.4}
.drop__dots span.is-on{opacity:1;background:var(--ink);width:20px;border-radius:3px}
.drop__feature{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  background:radial-gradient(120% 130% at 30% 20%,#3a3a3e,#101013 60%);
  min-height:320px;display:block;box-shadow:var(--shadow-soft);
}
.drop__feature-art{position:absolute;inset:0;display:grid;place-items:center}
.drop__feature-num{
  position:absolute;top:16px;left:18px;color:rgba(255,255,255,.65);
  font-size:13px;letter-spacing:.2em;
}
.nailset use{filter:drop-shadow(0 8px 14px rgba(10,10,15,.35))}
.nailset--lg{width:88%;max-width:420px}
.drop__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.drop__card{
  position:relative;display:flex;flex-direction:column;gap:8px;
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:16px 16px 44px;box-shadow:var(--shadow-soft);overflow:hidden;
}
.drop__card header{display:flex;justify-content:space-between;align-items:center;color:var(--ink-2)}
.drop__card .nailset{width:100%}
.drop__card .nailset use{filter:drop-shadow(0 6px 10px rgba(10,10,15,.22))}

/* ═══════════ TRY ON ═══════════ */
.tryon{background:var(--grey);padding-top:26px}
.tryon__panel{padding:clamp(16px,2.6vw,30px)}
.tryon__head{
  display:flex;justify-content:space-between;align-items:center;
  padding:0 4px 18px;
}
.tryon__head-left{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:12px;letter-spacing:.22em;
}
.tryon__plus{color:var(--ink-3)}
.tryon__grid{
  display:grid;gap:18px;
  grid-template-columns:220px minmax(320px,1fr) 280px;
  align-items:stretch;
}
.tryon__controls{padding:20px 18px}

.tones{display:flex;flex-direction:column;gap:4px;margin-top:12px}
.tone{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-display);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);padding:7px 10px;border-radius:999px;border:1px solid transparent;
  transition:border-color .3s,color .3s,background .3s;
}
.tone i{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(10,10,11,.08)}
.tone:hover{color:var(--ink)}
.tone.is-on{border-color:var(--ink);color:var(--ink);background:rgba(255,255,255,.8)}

.bgs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.bg{
  aspect-ratio:1;border-radius:50%;background:var(--bg);
  box-shadow:inset 0 0 0 1px rgba(10,10,11,.08);
  transition:transform .35s var(--ease-spring),box-shadow .3s;
}
.bg:hover{transform:scale(1.1)}
.bg.is-on{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 3px rgba(255,255,255,.9),0 0 0 4px rgba(10,10,11,.4)}

.tryon__stage-wrap{position:relative;display:flex;flex-direction:column;gap:12px}
.tryon__mode{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;background:rgba(255,255,255,.75);backdrop-filter:blur(10px);
  border:1px solid var(--line-soft);border-radius:999px;padding:3px;
}
.mode{
  font-family:var(--font-display);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;padding:7px 18px;border-radius:999px;color:var(--ink-2);
  transition:background .3s,color .3s;
}
.mode.is-on{background:var(--ink);color:#fff}
.tryon__stage{
  position:relative;flex:1;min-height:520px;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line-soft);
  transition:background .8s var(--ease);
  display:grid;place-items:center;
  touch-action:none;cursor:grab;
}
.tryon__stage:active{cursor:grabbing}
.tryon__stage[data-bg="studio"]{background:linear-gradient(160deg,#ffffff,#f0f1f4)}
.tryon__stage[data-bg="chrome"]{background:linear-gradient(135deg,#d8dade,#f5f6f8 45%,#a9adb6 78%,#e8e9ee)}
.tryon__stage[data-bg="blush"]{background:linear-gradient(150deg,#fbeef2,#e9dbe4)}
.tryon__stage[data-bg="glass"]{background:repeating-linear-gradient(100deg,#f6f7f9 0 26px,#e9ebef 26px 30px)}
.tryon__stage[data-bg="noir"]{background:radial-gradient(100% 120% at 50% 0%,#212227,#050506)}
.tryon__stage[data-bg="cloud"]{background:linear-gradient(#cfe8ff,#f4faff 65%,#ffffff)}
.tryon__stage[data-bg="holo"]{background:linear-gradient(120deg,#ffe9f4,#e3f2ff 32%,#e8ffe9 62%,#fff3dd)}
.tryon__stage[data-bg="gallery"]{background:linear-gradient(#efefef 82%,#dcdcdc 82.4%,#e6e6e6)}
.tryon__stage[data-bg="noir"] .stage__hint{color:rgba(255,255,255,.5)}
.stage__inner{
  width:min(78%,420px);will-change:transform;
  transition:transform .6s var(--ease);
  filter:drop-shadow(0 30px 40px rgba(20,22,30,.18));
}
.tryon__stage[data-hand="photo"] .stage__inner{
  width:auto;height:97%;filter:none;display:flex;align-items:flex-end;
}
.tryon__stage[data-hand="photo"] .hand--art{display:none}
.tryon__stage[data-hand="art"] .hand-photo{display:none}
.tryon__source{
  position:absolute;top:14px;right:14px;z-index:4;
  display:flex;background:rgba(255,255,255,.75);backdrop-filter:blur(10px);
  border:1px solid var(--line-soft);border-radius:999px;padding:3px;
}
.hand-photo{position:relative;height:100%;aspect-ratio:545/730;margin:0 auto}
/* transparent cutout hand: tone filter touches ONLY hand pixels */
.hand-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  user-select:none;-webkit-user-drag:none;
  filter:var(--toneF,none) drop-shadow(0 22px 26px rgba(20,22,30,.28));
  transition:filter .6s var(--ease);
}
.hand-photo__overlay{position:absolute;inset:0;width:100%;height:100%}
.hand-photo__overlay .nail-art{
  filter:drop-shadow(0 2px 4px rgba(10,10,15,.3));
  opacity:.97;
}
.pnail__layer{transform-box:fill-box;transform-origin:center}
.nail-gloss{fill:url(#g-gloss);stroke:rgba(255,255,255,.48);stroke-width:.65;pointer-events:none}
/* photo skin tones (hand pixels only; brightness BEFORE sepia so
   highlights stay warm brown instead of clipping to yellow-green) */
.tryon__stage[data-tone="fair"]{--toneF:brightness(1.06) saturate(.88)}
.tryon__stage[data-tone="beige"]{--toneF:brightness(.99) sepia(.3) saturate(1.45) hue-rotate(-10deg)}
.tryon__stage[data-tone="tan"]{--toneF:brightness(.88) sepia(.48) saturate(1.65) hue-rotate(-12deg)}
.tryon__stage[data-tone="brown"]{--toneF:brightness(.66) sepia(.6) saturate(1.9) hue-rotate(-14deg) contrast(1.04)}
.tryon__stage[data-tone="dark"]{--toneF:brightness(.52) sepia(.65) saturate(2.1) hue-rotate(-16deg) contrast(1.05)}
.stage__grade{display:none}
/* calibration mode */
body.is-calibrating .tryon__stage{cursor:default}
body.is-calibrating .hand-photo__overlay .nail{
  cursor:grab;stroke:rgba(10,10,11,.65);stroke-width:1.6;stroke-dasharray:5 4;
}
body.is-calibrating .pnail.is-cal .nail{stroke:#0a84ff;stroke-dasharray:none;stroke-width:2}
body.is-calibrating .pnail.is-cal .nail-gloss{stroke:#0a84ff;stroke-width:1.25}
.hand{width:100%;height:auto;user-select:none}
.crease{fill:none;stroke:rgba(80,45,20,.10);stroke-width:2;stroke-linecap:round}
.crease--wrist{stroke-width:3;stroke:rgba(80,45,20,.08)}
.tendon{fill:none;stroke:rgba(80,45,20,.05);stroke-width:7;stroke-linecap:round;filter:url(#f-soft)}
.nail{
  fill:url(#g-cyber);
  stroke:rgba(10,10,11,0);stroke-width:2;
  cursor:pointer;
  transition:filter .3s;
}
.nail:hover{filter:brightness(1.06) drop-shadow(0 0 6px rgba(120,130,150,.55))}
.nail.is-selected{
  stroke:rgba(10,10,11,.85);
  filter:drop-shadow(0 0 8px rgba(120,130,150,.7));
}
.nail--custom{fill:url(#g-custom);stroke:#9aa0ad;stroke-width:1.2;stroke-dasharray:4 3}
.stage__hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;pointer-events:none}
.tryon__tools{display:flex;gap:10px;justify-content:center}
.tool{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);padding:9px 16px;border-radius:999px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.7);
  transition:color .3s,border-color .3s,transform .4s var(--ease-spring);
}
.tool:hover{color:var(--ink);border-color:var(--line);transform:translateY(-2px)}

.tryon__product{padding:20px 18px;display:flex;flex-direction:column}
.product__top{display:flex;gap:14px;margin-bottom:16px}
.product__thumb{
  width:64px;height:78px;border-radius:12px;flex:none;
  background:linear-gradient(160deg,#ffffff,#eceef2);
  border:1px solid var(--line-soft);display:grid;place-items:center;
}
.product__thumb svg{width:44px;height:54px}
.product__name{font-family:var(--font-h2);font-size:20px;letter-spacing:.03em;text-transform:none}
.product__meta{font-size:10px;letter-spacing:.2em;color:var(--ink-3)}
.product__price{font-family:var(--font-display);font-weight:600;font-size:15px;margin-top:4px}

.minis{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.mini{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:8px 2px;border-radius:12px;border:1px solid transparent;
  background:rgba(255,255,255,.5);
  transition:border-color .3s,transform .35s var(--ease-spring),background .3s;
}
.mini svg{width:24px;height:32px}
.mini span{font-family:var(--font-display);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mini:hover{transform:translateY(-3px)}
.mini.is-on{border-color:var(--ink);background:#fff}
.mini.is-on span{color:var(--ink)}
.product__actions{
  display:flex;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:22px;
}

.calibration-dock{
  padding:16px;margin-top:4px;border-radius:18px;background:rgba(255,255,255,.9);
  box-shadow:0 18px 46px -24px rgba(20,22,30,.35);
}
.calibration-dock__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.calibration-dock__head b{display:block;font-family:var(--font-display);font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.calibration-dock__position{font-size:9px;color:var(--ink-2);letter-spacing:.08em}
.calibration-dock__fingers{display:flex;gap:5px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
.calibration-dock__fingers::-webkit-scrollbar{display:none}
.calibration-dock__fingers button{
  flex:1;min-width:70px;min-height:38px;border:1px solid var(--line);border-radius:999px;
  font-family:var(--font-display);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.calibration-dock__fingers button.is-on{background:#111;color:#fff;border-color:#111}
.calibration-dock__grid{display:grid;grid-template-columns:repeat(4,minmax(100px,1fr));gap:10px 14px}
.calibration-dock__grid label{font-family:var(--font-display);font-size:8.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.calibration-dock__grid output{float:right;font-family:var(--font-mono);font-size:8px;color:var(--ink)}
.calibration-dock__grid input{display:block;width:100%;margin-top:6px;accent-color:#111}
.calibration-dock__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.calibration-dock__actions .btn{margin:0;min-height:44px}

.shape-studio{
  display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:center;
  margin-top:18px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.5);border:1px solid var(--line-soft);
}
.shape-studio__intro b{display:block;font-family:var(--font-display);font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin:5px 0 3px}
.shape-studio__intro p{font-size:10.5px;color:var(--ink-2);line-height:1.45}
.shape-studio__scroll{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}
.shape-studio__scroll::-webkit-scrollbar{display:none}
.shape-studio__scroll button{
  flex:0 0 84px;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:1px solid var(--line-soft);border-radius:14px;background:rgba(255,255,255,.72);transition:border-color .3s,transform .3s var(--ease);
}
.shape-studio__scroll button:hover{transform:translateY(-2px)}
.shape-studio__scroll button.is-on{border-color:#111;background:#fff;box-shadow:0 8px 20px -14px rgba(20,22,30,.4)}
.shape-studio__scroll svg{width:26px;height:50px;overflow:visible}
.shape-studio__scroll use{fill:url(#g-cyber);stroke:rgba(10,10,11,.22);stroke-width:.55}
.shape-studio__scroll span{font-family:var(--font-display);font-size:7.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-align:center;line-height:1.25}

/* strip */
.strip{display:flex;align-items:center;gap:10px;margin-top:18px}
.strip__nav{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.75);
  transition:background .3s,transform .4s var(--ease-spring);
}
.strip__nav:hover{background:#fff;transform:scale(1.08)}
.strip__scroll{
  display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;
  padding:4px 2px 8px;scrollbar-width:none;flex:1;
}
.strip__scroll::-webkit-scrollbar{display:none}
.chip{
  flex:none;display:flex;flex-direction:column;gap:6px;align-items:center;
  padding:10px 16px 6px;border-radius:16px;
  background:rgba(255,255,255,.65);border:1px solid var(--line-soft);
  transition:border-color .3s,background .3s,transform .4s var(--ease-spring);
}
.chip:hover{transform:translateY(-3px);background:#fff}
.chip.is-on{border-color:var(--ink);background:#fff}
.chip__set{width:112px;height:40px}
.chip__set use{filter:drop-shadow(0 3px 5px rgba(10,10,15,.2))}

/* ═══════════ COLLECTIONS ═══════════ */
.collections{background:var(--grey);border-radius:0}
.collections__grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.col-card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--r-md);padding:18px 18px 20px;
  box-shadow:var(--shadow-soft);overflow:hidden;cursor:pointer;
}
.col-card__glow{
  position:absolute;inset:-40%;opacity:0;pointer-events:none;
  background:radial-gradient(40% 40% at var(--gx,50%) var(--gy,50%),rgba(190,200,225,.35),transparent 70%);
  transition:opacity .5s;
}
.col-card:hover .col-card__glow{opacity:1}
.col-card header{display:flex;justify-content:space-between;align-items:baseline}
.col-card__name{font-family:var(--font-h2);font-size:19px;font-weight:500;letter-spacing:.04em;text-transform:none}
.col-card__price{font-family:var(--font-mono);font-size:12px;color:var(--ink-2)}
.col-card .nailset{width:100%;margin:2px 0 4px}
.col-card__meta{display:flex;flex-wrap:wrap;gap:6px}
.col-card__meta span{
  font-family:var(--font-display);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--line-soft);border-radius:999px;padding:4px 9px;
  background:rgba(245,245,247,.8);
}
.col-card__cta{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line-soft);padding-top:12px;margin-top:2px;
}

/* ═══════════ PROMO ═══════════ */
.promo__grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.promo__card{
  position:relative;padding:24px 22px 20px;overflow:hidden;
  border-radius:var(--r-md);
}
.promo__card::before{
  content:"";position:absolute;top:-45%;right:-30%;width:75%;aspect-ratio:1;border-radius:50%;
  background:var(--holo);filter:blur(38px);opacity:.5;
}
.promo__big{
  position:relative;font-family:var(--font-display);
  font-size:21px;font-weight:400;line-height:1.25;letter-spacing:.02em;
  text-transform:uppercase;margin:14px 0 18px;
}
.promo__big b{font-weight:700}
.promo__big small{font-size:.55em;font-weight:600;letter-spacing:.2em;margin-left:6px}
.promo__note{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--ink-3)}

/* ═══════════ QUICK CARDS ═══════════ */
.quick{padding-top:0}
.quick__grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.quick__card{
  position:relative;display:flex;flex-direction:column;gap:10px;
  min-height:250px;padding:22px 20px 52px;
  background:var(--grey);border:1px solid var(--line-soft);border-radius:var(--r-md);
  overflow:hidden;transition:box-shadow .5s var(--ease);
}
.quick__card:hover{box-shadow:var(--shadow-float)}
.quick__title{
  font-family:var(--font-h2);font-size:24px;font-weight:500;
  letter-spacing:.03em;line-height:1.35;text-transform:none;
}
.quick__steps{display:flex;flex-direction:column;gap:6px;font-size:9.5px;letter-spacing:.06em;color:var(--ink-2);margin:6px 0 12px}
.quick__art{margin-top:auto}
.quick__promo{
  margin-top:auto;font-family:var(--font-display);text-transform:uppercase;
  font-size:12px;letter-spacing:.2em;color:var(--ink-2);line-height:1;
}
.quick__promo b{font-size:56px;font-weight:700;letter-spacing:0;color:var(--ink);display:inline-block;margin:8px 0 4px}
.quick__promo span{display:block;font-size:14px;letter-spacing:.4em;color:var(--ink)}
.quick__blob{
  position:absolute;right:-56px;bottom:-56px;width:190px;height:190px;border-radius:50%;
  background:
    radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 6%,transparent 26%),
    conic-gradient(from 200deg,#c7ccd6,#f4f5f8 25%,#8d93a0 50%,#e8eaee 75%,#c7ccd6);
  filter:blur(1px);opacity:.9;
  animation:breathe 7s ease-in-out infinite alternate;
}
@keyframes breathe{from{transform:scale(1) rotate(0deg)}to{transform:scale(1.1) rotate(14deg)}}

/* ═══════════ FOOTER ═══════════ */
.footer{
  background:var(--grey);border-top:1px solid var(--line-soft);
  padding:clamp(46px,6vw,80px) clamp(20px,5vw,72px) 26px;
}
.footer__grid{
  display:grid;gap:clamp(28px,5vw,72px);
  grid-template-columns:1.2fr 1fr 1fr;
  padding-bottom:44px;
}
.footer__brand{position:relative}
.footer__logo{width:min(240px,60vw);mix-blend-mode:multiply;margin-left:-8px}
.footer__tag{
  font-family:var(--font-display);font-size:11px;font-weight:600;
  letter-spacing:.3em;margin:8px 0 16px;
}
.footer__thai{font-size:13px;color:var(--ink-2);line-height:1.8}
.footer__cd{
  width:104px;height:104px;border-radius:50%;margin-top:26px;position:relative;
  background:conic-gradient(from 0deg,#e8e9ee,#f9d9e8 12%,#d9e8f9 25%,#f5f6f8 38%,#d9f9e2 52%,#e8e9ee 64%,#f9ecd9 78%,#dcd9f9 90%,#e8e9ee);
  box-shadow:0 14px 30px -14px rgba(20,22,30,.3);
  animation:spin 24s linear infinite;
}
.footer__cd::after{
  content:"";position:absolute;inset:38%;border-radius:50%;
  background:var(--grey);box-shadow:inset 0 0 0 1px rgba(10,10,11,.12);
}
@keyframes spin{to{transform:rotate(360deg)}}
.footer__connect .micro,.footer__line .micro{display:block;margin-bottom:18px}
.footer__social{display:flex;flex-direction:column;gap:14px}
.footer__social a{display:flex;align-items:center;gap:12px;transition:transform .35s var(--ease)}
.footer__social a:hover{transform:translateX(4px)}
.footer__sicon{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:#fff;border:1px solid var(--line-soft);color:var(--ink);flex:none;
}
.footer__social b{display:block;font-family:var(--font-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.footer__social i{font-style:normal;font-size:10.5px;color:var(--ink-3);font-family:var(--font-mono)}
.footer__line-card{
  display:flex;align-items:center;gap:18px;padding:18px;margin-bottom:16px;
}
.footer__qr{width:84px;height:84px;flex:none;border-radius:8px}
.footer__bottom{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--line-soft);padding-top:20px;
}
.footer__legal{display:flex;align-items:center;gap:12px}
.footer__legal span{color:var(--ink-3);font-size:10px}
.footer__legal a:hover{color:var(--ink)}

/* ═══════════ ADMIN CONSOLE ═══════════ */
.footer__admin{display:inline-flex;align-items:center;gap:5px;color:var(--ink-3)}
.footer__admin:hover{color:var(--ink)}
.admin{position:fixed;inset:0;z-index:96;pointer-events:none}
.admin__scrim{
  position:absolute;inset:0;background:rgba(20,22,30,.22);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .5s var(--ease);
}
.admin__panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(430px,100%);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(26px) saturate(1.4);-webkit-backdrop-filter:blur(26px) saturate(1.4);
  border-left:1px solid rgba(255,255,255,.8);
  box-shadow:-30px 0 80px -30px rgba(20,22,30,.35);
  transform:translateX(102%);
  transition:transform .6s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;
  padding:22px 22px 28px;
}
.admin.is-open{pointer-events:auto}
.admin.is-open .admin__scrim{opacity:1}
.admin.is-open .admin__panel{transform:translateX(0)}
.admin__head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid var(--line-soft);margin-bottom:18px}
.admin__title{font-family:var(--font-display);font-size:17px;letter-spacing:.06em;text-transform:uppercase}
.admin__close{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line-soft);transition:background .3s,color .3s;
}
.admin__close:hover{background:var(--ink);color:#fff}
.admin__gate{display:flex;flex-direction:column;gap:12px;margin:auto 0;text-align:center;align-items:center}
.admin__pin{text-align:center;font-size:22px;letter-spacing:.5em;max-width:200px}
.admin__hint{font-size:9.5px;letter-spacing:.12em;color:var(--ink-3)}
.admin__section{padding:16px 0;border-bottom:1px solid var(--line-soft)}
.admin__section>.micro{display:block;margin-bottom:14px}
.admin__type{display:flex;background:var(--grey);border-radius:999px;padding:3px;margin-bottom:14px}
.admin__type .mode{flex:1;font-size:9px;letter-spacing:.1em}
.admin__field{
  display:flex;flex-direction:column;gap:5px;margin-bottom:10px;flex:1;
  font-family:var(--font-display);font-size:9px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
}
.admin__row{display:flex;gap:10px}
.admin__input{
  font-family:var(--font-body);font-size:13px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;outline:none;width:100%;
  transition:border-color .3s,box-shadow .3s;
}
.admin__input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(10,10,11,.06)}
.admin__drop{
  display:grid;place-items:center;min-height:120px;margin:4px 0 14px;
  border:1.5px dashed var(--line);border-radius:var(--r-sm);
  background:var(--grey);cursor:pointer;text-align:center;
  transition:border-color .3s,background .3s;
}
.admin__drop:hover{border-color:var(--ink-3);background:#fff}
.admin__drop-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;color:var(--ink-2)}
.admin__drop-empty b{font-family:var(--font-display);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.admin__drop-empty i{font-style:normal;font-size:10.5px;color:var(--ink-3)}
.admin__drop-preview{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px}
.admin__drop-preview svg{width:56px;height:74px;filter:drop-shadow(0 6px 10px rgba(10,10,15,.25))}
.admin__drop-preview i{font-style:normal;font-size:10px;color:var(--ink-3)}
.admin__list{display:flex;flex-direction:column;gap:8px}
.admin__item{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:8px 12px;
}
.admin__item svg{width:26px;height:36px;flex:none}
.admin__item-info{flex:1;min-width:0}
.admin__item-info b{display:block;font-family:var(--font-display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin__item-info span{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-3)}
.admin__badge{
  font-family:var(--font-display);font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:3px 8px;color:var(--ink-2);flex:none;
}
.admin__del{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none;
  color:var(--ink-3);transition:background .3s,color .3s;
}
.admin__del:hover{background:#fdeaea;color:#b02a2a}
.admin__foot{display:flex;justify-content:space-between;padding-top:16px}
.admin__danger:hover{color:#b02a2a;border-color:#b02a2a}

/* ═══════════ TOAST ═══════════ */
.toast{
  position:fixed;left:50%;bottom:28px;z-index:95;
  transform:translate(-50%,20px);opacity:0;pointer-events:none;
  font-family:var(--font-display);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  background:var(--ink);color:#fff;border-radius:999px;padding:12px 26px;
  box-shadow:var(--shadow-float);
  transition:transform .5s var(--ease-spring),opacity .5s;
}
.toast.is-on{transform:translate(-50%,0);opacity:1}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1180px){
  .tryon__grid{grid-template-columns:200px 1fr;grid-template-areas:"controls stage" "product stage"}
  .tryon__controls{grid-area:controls}
  .tryon__stage-wrap{grid-area:stage}
  .tryon__product{grid-area:product}
  .drop{grid-template-columns:1fr 1fr}
  .drop__intro{grid-column:1/-1}
  .drop__cards{grid-column:1/-1}
  .calibration-dock__grid{grid-template-columns:repeat(3,minmax(100px,1fr))}
}
@media (max-width:900px){
  .nav__menu{
    position:fixed;inset:70px 14px auto;z-index:79;
    flex-direction:column;padding:18px;border-radius:var(--r-md);
    background:rgba(255,255,255,.92);backdrop-filter:blur(24px);
    border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow-float);
    opacity:0;translate:0 -10px;pointer-events:none;
    transition:opacity .4s var(--ease),translate .4s var(--ease);
  }
  body.menu-open .nav__menu{opacity:1;translate:0 0;pointer-events:auto}
  .nav__burger{display:flex}
  .tryon__grid{grid-template-columns:1fr;grid-template-areas:"stage" "controls" "product"}
  .tryon__controls .tones{flex-direction:row;flex-wrap:wrap}
  .drop__cards{grid-template-columns:1fr;gap:12px}
  .footer__grid{grid-template-columns:1fr}
  .hero__coord{display:none}
  .hero__content{width:min(76vw,610px)}
  .hero__fog{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.96) 48%,rgba(255,255,255,.58) 72%,transparent 100%),radial-gradient(70% 70% at 20% 80%,#fff 20%,transparent 78%)}
  .hero__orbit{right:-10%;top:18%;width:58vw;opacity:.6}
  .hero__sigil--one{left:auto;right:16%;top:16%;opacity:.6}
  .shape-studio{grid-template-columns:1fr}
}
@media (max-width:560px){
  .tryon__stage{min-height:380px}
  .quick__grid,.promo__grid{grid-template-columns:1fr}
  .nav__icon,.nav__burger{width:44px;height:44px}
  .mode,.tone,.tool{min-height:44px}
  .mode{padding-left:14px;padding-right:14px}
  .mini{min-height:58px}
  .hero{justify-content:flex-start;padding-top:132px}
  .hero__content{width:100%;max-width:none}
  .hero__welcome{max-width:240px;line-height:1.6}
  .hero__title{width:100%;margin-top:8px}
  .hero__sub{font-size:14px;letter-spacing:.12em;line-height:1.55;margin-top:18px}
  .hero__actions{gap:14px}.hero__try-link{font-size:9px}
  .hero__fog{background:linear-gradient(#fff 0%,rgba(255,255,255,.96) 52%,rgba(255,255,255,.62) 76%,transparent 100%)}
  .hero__canvas{opacity:.74}
  .hero__orbit{width:92vw;right:-46%;top:45%;opacity:.45}
  .hero__sigil--one{right:-20px;top:43%;opacity:.38}
  .calibration-dock__head{flex-direction:column}
  .calibration-dock__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calibration-dock__actions{grid-template-columns:1fr}
  .shape-studio{padding:14px}
  .shape-studio__scroll button{flex-basis:80px;min-height:96px}
}