/* =========================================================
   ninny.top - rebuilt styles.css (dark / glass / pink accent)
   Drop-in replacement for /public/assets/styles.css
   ========================================================= */

/* ---------- CSS Reset (modern) ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }

/* ---------- Theme ---------- */
:root{
  /* Neutrals */
  --bg0: #04050a;
  --bg1: #070810;
  --panel: rgba(18, 18, 28, .62);
  --panel2: rgba(12, 12, 18, .55);
  --stroke: rgba(255,255,255,.08);
  --stroke2: rgba(255,255,255,.06);

  /* Text */
  --text: rgba(255,255,255,.92);
  --text2: rgba(255,255,255,.72);
  --text3: rgba(255,255,255,.55);

  /* Accent (lighter pink) */
  --accent: #ff73de;        /* main pink */
  --accent2: #ffb3f0;       /* lighter */
  --accentGlow: rgba(255, 115, 222, .55);
  --accentGlow2: rgba(255, 179, 240, .45);

  /* Shadow */
  --shadow: 0 24px 80px rgba(0,0,0,.55);
  --shadow2: 0 18px 50px rgba(0,0,0,.45);

  /* Radius / spacing */
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  --gap-1: 10px;
  --gap-2: 14px;
  --gap-3: 18px;
  --gap-4: 24px;

  --max: 1100px;

  /* Fonts */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ---------- Page background + sticky footer ---------- */
html, body { height: 100%; }

body{
  min-height: 100%;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 900px at 20% 20%, rgba(255,115,222,.16), transparent 58%),
    radial-gradient(1100px 800px at 80% 90%, rgba(120,90,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x: hidden;

  /* sticky footer layout */
  display: flex;
  flex-direction: column;
}

body::before{
  content:"";
  position: fixed;
  inset: -2px;
  pointer-events: none;
  background:
    radial-gradient(900px 700px at 15% 25%, rgba(255,98,198,.12), transparent 60%),
    radial-gradient(900px 700px at 85% 85%, rgba(90,150,255,.08), transparent 60%);
  filter: blur(0px);
  z-index: -2;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.35) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 70%, rgba(0,0,0,.55) 100%);
  z-index: -1;
}

/* Snow canvas (snow.js) */
#snow, #snowCanvas, canvas.snow {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .85;
  mix-blend-mode: screen;
}

/* Make sure app layers are above snow */
#appHeader, main, #appFooter { position: relative; z-index: 2; }

::selection { background: rgba(255,98,198,.25); }

/* ---------- Typography ---------- */
.h1{
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0;
}

.h2{
  font-size: clamp(20px, 2.3vw, 26px);
  line-height: 1.15;
  margin: 0;
}

.p{
  margin: 0;
  color: var(--text2);
  line-height: 1.55;
}

.muted { color: var(--text2); }
.dim { color: var(--text3); }
.mono { font-family: var(--mono); }

/* Accent text helper */
.accent{
  color: var(--accent);
  text-shadow: 0 0 22px rgba(255,98,198,.18);
}

/* ---------- Layout helpers ---------- */
.container{
  width: min(var(--max), calc(100% - 34px));
  margin-inline: auto;
}

.shell{
  width: min(var(--max), calc(100% - 34px));
  margin: 0 auto;
  padding: 34px 0 46px;
  flex: 1 0 auto; /* sticky footer */
}

.grid{
  display: grid;
  gap: var(--gap-4);
}

.grid-2{
  grid-template-columns: 1.2fr .8fr;
}
@media (max-width: 980px){
  .grid-2{ grid-template-columns: 1fr; }
}

/* ---------- Glass panels ---------- */
.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.panel--soft{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  border: 1px solid var(--stroke2);
}

.panel--wide{
  padding: 26px;
}

.panel--pad{
  padding: 22px;
}

.panel--tight{
  padding: 16px;
}

/* "Glow ring" (subtle) */
.ring{
  position: relative;
}
.ring::before{
  content:"";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(900px 240px at 30% 20%, rgba(255,98,198,.18), transparent 55%);
  opacity: .9;
  filter: blur(0px);
  z-index: -1;
}

/* ---------- Header / Topbar ---------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 0;
  background: linear-gradient(180deg, rgba(6,7,11,.72), rgba(6,7,11,.28));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.topbar__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.brand--spacer{
  min-width: 220px;
  opacity: 0;
  pointer-events: none;
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

.brand__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  box-shadow: 0 0 0 6px rgba(255,98,198,.14), 0 0 22px rgba(255,98,198,.35);
}

.brand__text{
  display: grid;
  line-height: 1.1;
}
.brand__name{ font-weight: 650; font-size: 13.5px; }
.brand__sub{ font-size: 11.5px; color: var(--text3); margin-top: 1px; }

/* Nav pills */
.nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.nav a{
  font-size: 12.5px;
  color: var(--text2);
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.nav a:hover{
  color: var(--text);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  transform: translateY(-1px);
}
.nav a.is-active,
.nav a[aria-current="page"]{
  color: var(--text);
  border-color: rgba(255,98,198,.35);
  background: rgba(255,98,198,.10);
  box-shadow: 0 0 0 6px rgba(255,98,198,.06);
}

@media (max-width: 980px){
  .brand{ min-width: 0; }
  .nav{ display: none; } /* keep header clean on mobile */
}

/* Right-side actions */
.actions{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  justify-content: flex-end;
}

.iconbtn,
.iconBtn{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.iconbtn:hover,
.iconBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
}
.iconbtn:active,
.iconBtn:active{ transform: translateY(0px) scale(.98); }

.pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-size: 12.5px;
  color: var(--text);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pill:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
}

.avatar{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
}
.avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.icon{
  width: 18px;
  height: 18px;
  opacity: .9;
  fill: currentColor;
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-size: 12.7px;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
  user-select: none;
}
.btn .icon{
  width: 16px;
  height: 16px;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
}
.btn:active{ transform: translateY(0px) scale(.985); }

.btn--primary{
  border-color: rgba(255,98,198,.35);
  background: linear-gradient(180deg, rgba(255,98,198,.20), rgba(255,98,198,.08));
  box-shadow: 0 0 0 7px rgba(255,98,198,.07);
}
.btn--primary:hover{
  border-color: rgba(255,98,198,.55);
  background: linear-gradient(180deg, rgba(255,98,198,.26), rgba(255,98,198,.10));
  box-shadow: 0 0 0 7px rgba(255,98,198,.10), 0 16px 44px rgba(0,0,0,.40);
}

.btn--ghost{
  background: transparent;
}

.btn--danger{
  border-color: rgba(255,90,90,.35);
  background: rgba(255,90,90,.10);
}

/* ---------- Chips / badges ---------- */
.chips{ display: flex; flex-wrap: wrap; gap: 10px; }
.chip{
  font-size: 11.5px;
  color: var(--text2);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.chip--accent{
  border-color: rgba(255,98,198,.35);
  background: rgba(255,98,198,.10);
  color: var(--text);
}

/* ---------- Page blocks ---------- */
.hero{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--gap-4);
  padding: 28px;
}
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
}

.kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--text2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.kicker__dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(255,98,198,.11);
}

.list{
  margin-top: 14px;
  padding-left: 18px;
  color: var(--text2);
  line-height: 1.65;
  font-size: 13px;
}
.list li{ margin: 6px 0; }

.hero__cta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.hero__right{
  padding: 18px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018));
}

/* Legacy classnames used in HTML */
.heroGrid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--gap-4);
  padding: 28px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,115,222,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,115,222,.14);
  position: relative;
}
.heroGrid::before{
  content:"";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background: radial-gradient(700px 200px at 20% 10%, rgba(255,98,198,.18), transparent 60%);
  opacity: .7;
  filter: blur(12px);
  z-index: -1;
}
.heroLeft .lead{
  margin-top: 8px;
  color: var(--text2);
  line-height: 1.55;
}
.heroLeft .bullets{
  margin-top: 12px;
  color: var(--text2);
  line-height: 1.6;
  font-size: 13px;
}
.heroLeft .bullets li{ margin: 6px 0; }
.heroRight{
  padding: 18px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018));
}

.heroShowcase{
  position: relative;
  height: 220px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,115,222,.25);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  overflow: hidden;
}
.showcaseCard{
  position: absolute;
  width: 160px;
  height: 200px;
  border-radius: 16px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(12,12,18,.6);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.showcaseCard img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.float-1{ left: 18px; top: 24px; animation: floatUp 6s ease-in-out infinite; }
.float-2{ left: 120px; top: 6px; animation: floatUp 7s ease-in-out infinite; }
.float-3{ right: 20px; top: 32px; animation: floatUp 6.5s ease-in-out infinite; }

.cardTitle{
  font-weight: 650;
  font-size: 14px;
}
.lead{
  margin: 0;
  color: var(--text2);
  line-height: 1.55;
}
.bullets{
  margin-top: 14px;
  padding-left: 18px;
  color: var(--text2);
  line-height: 1.65;
  font-size: 13px;
}
.bullets li{ margin: 6px 0; }
.dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(255,98,198,.11);
  display: inline-block;
}
.heroGrid .btnRow{
  margin-top: 14px;
}

.section{
  margin-top: 22px;
}

.section__title{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.section__title .h2{ font-weight: 650; }
.section__title .muted{ font-size: 13px; }

/* ---------- Cards / tiles ---------- */
.cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-3);
}
@media (max-width: 980px){
  .cards{ grid-template-columns: 1fr; }
}

@media (max-width: 980px){
  .heroGrid{ grid-template-columns: 1fr; }
}

.card{
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 16px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.045);
  box-shadow: var(--shadow2);
}
.cards .card{
  animation: floatIn .5s ease both;
}
.cards .card:nth-child(1){ animation-delay: .08s; }
.cards .card:nth-child(2){ animation-delay: .16s; }
.cards .card:nth-child(3){ animation-delay: .24s; }

.review-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-3);
}
@media (max-width: 980px){
  .review-grid{ grid-template-columns: 1fr; }
}
.review-card{
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 16px;
  display: grid;
  gap: 8px;
  animation: floatIn .45s ease both;
}
.review-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
}
.review-name{ font-weight: 650; }
.review-rating{ color: var(--accent); }
.review-body{ color: var(--text2); font-size: 12.5px; line-height: 1.5; }
.review-meta{ color: var(--text3); font-size: 11.5px; }

.page-pop main{
  animation: pagePop .5s ease both;
}
@keyframes pagePop {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.card__title{
  font-weight: 650;
  font-size: 14px;
  margin: 0 0 6px 0;
}
.card__desc{
  font-size: 12.5px;
  color: var(--text2);
  margin: 0 0 12px 0;
}

/* ---------- Product grid ---------- */
.product-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-3);
}
@media (max-width: 980px){
  .product-grid{ grid-template-columns: 1fr; }
}
.product-grid--shop{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1200px){
  .product-grid--shop{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px){
  .product-grid--shop{ grid-template-columns: 1fr; }
}
.shop-header{
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px;
  margin: -10px -10px 0;
  background: rgba(12,10,18,.82);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.05);
}
.shop-search{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.shop-search__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--text3);
}
.shop-search__icon .icon{
  width: 16px;
  height: 16px;
}
.shop-search input{
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  width: 200px;
  font-size: 12.5px;
}
.shop-tabs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.shop-sort{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.shop-sort__label{
  font-size: 11px;
  color: var(--text3);
}
.shop-sort select{
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 12px;
  outline: none;
  cursor: pointer;
}
.shop-panels{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.shop-panel{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 14px;
}
.cart-list, .recent-grid{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}
.cart-row{
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.cart-row img{
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
}
.cart-info{
  display: grid;
  gap: 4px;
  font-size: 12px;
}
.cart-remove{
  border: 0;
  background: rgba(255,255,255,.06);
  color: var(--text2);
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.cart-actions{
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.recent-grid{
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.recent-card{
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  text-align: left;
  color: var(--text);
}
.recent-card img{
  width: 100%;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
}
.related-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.related-card{
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--text);
  text-align: left;
}
.related-card img{
  width: 100%;
  height: 70px;
  object-fit: cover;
  border-radius: 10px;
}
.review-mini-grid{
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
.review-mini{
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.review-mini__head{
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 6px;
}
.review-mini__body{
  font-size: 12px;
  color: var(--text2);
}
.faq-list{
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.faq-item{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor: pointer;
}
.faq-panel{
  display: none;
  padding: 0 12px 10px;
  color: var(--text2);
  font-size: 12.5px;
}
.faq-panel.is-open{
  display: block;
}
.faq-icon{
  color: var(--text3);
}

.skeleton-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.skeleton-card{
  height: 220px;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}
.img-fallback{
  filter: grayscale(.2);
}
.shop-tab{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--text2);
  font-size: 11.5px;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.shop-tab:hover{
  transform: translateY(-1px);
  color: var(--text);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}
.shop-tab.is-active{
  color: var(--text);
  border-color: rgba(255,98,198,.35);
  background: rgba(255,98,198,.10);
  box-shadow: 0 0 0 6px rgba(255,98,198,.06);
}
.product-card{
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  overflow: hidden;
  box-shadow: var(--shadow2);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.product-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.045);
}
.product-card--shop{
  text-align: left;
  position: relative;
  cursor: pointer;
  padding: 0;
}
.product-pill{
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--text);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
}
.product-price{
  position: absolute;
  right: 12px;
  bottom: 64px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--text);
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
}
.product-thumb{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  padding: 14px;
}
.product-thumb img{
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 14px;
  transition: transform .25s ease, filter .25s ease;
}
.product-card:hover .product-thumb img{
  transform: scale(1.03);
  filter: saturate(1.08);
}
.badge-row{
  display: flex;
  gap: 6px;
  padding: 0 16px;
  margin-top: 10px;
}
.badge{
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text2);
}
.price-now{
  color: var(--accent);
  font-weight: 700;
}
.price-old{
  margin-left: 8px;
  color: var(--text3);
  text-decoration: line-through;
  font-size: 12px;
}
.nav-badge{
  margin-left: 6px;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,98,198,.2);
  border: 1px solid rgba(255,98,198,.45);
  color: #ffd6f0;
}
.modal__details{
  display: inline-flex;
  margin-top: 8px;
  font-size: 12px;
  color: var(--accent);
}

/* ---------- Admin dashboard ---------- */
.admin-shell .pageCard{ padding-bottom: 26px; }
.admin-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.admin-card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1);
  background: radial-gradient(circle at top left, rgba(255,98,198,.06), transparent 55%), rgba(255,255,255,.03);
  padding: 14px;
  display: grid;
  gap: 10px;
}
.admin-card--wide{
  grid-column: span 2;
}
@media (max-width: 900px){
  .admin-card--wide{ grid-column: span 1; }
}
.admin-stats{
  display: grid;
  gap: 8px;
}
.stat-pill{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  font-size: 12px;
}
.admin-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text2);
}
.admin-table .table{
  display: grid;
  gap: 6px;
}
.table__row{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  font-size: 12px;
}
.table__head{
  font-weight: 600;
  color: var(--text);
}
.admin-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.admin-logs{
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow: auto;
}
.log-row{
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text2);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}
.log-type{
  color: var(--text);
  font-weight: 600;
}
.admin-form{
  display: grid;
  gap: 8px;
}
.admin-form input,
.admin-form select,
.admin-filters input,
.admin-filters select{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--text);
}
.admin-form textarea{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--text);
}
.admin-inline-input{
  width: 120px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 6px 8px;
  color: var(--text);
  font-size: 12px;
}
.btn--xs{
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 8px;
}
.admin-modal .modal__panel{
  max-width: 520px;
}
.admin-shell .pageHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.admin-shell .pageHead p{
  color: var(--text2);
}
.admin-chip{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,98,198,.35);
  background: rgba(255,98,198,.1);
  color: #ffd6f0;
}
.admin-filters{
  background: rgba(255,255,255,.02);
  border-radius: 12px;
  padding: 8px;
}
.admin-table .table__row{
  align-items: center;
}
.admin-kpi{
  display: grid;
  gap: 6px;
}
.admin-kpi strong{
  color: var(--text);
}
.admin-filters{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  align-items: center;
}

/* ---------- Payment methods ---------- */
.payment-grid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.payment-card{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text2);
}
.payment-card img{
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
}

/* ---------- Verify form ---------- */
.verify-form{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ---------- Legal pages ---------- */
.legal-page .pageHead p{
  color: var(--text2);
}
.legal-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.legal-nav a{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text2);
  transition: all .2s ease;
}
.legal-nav a:hover{
  color: var(--text);
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
}
.legal-grid{
  display: grid;
  gap: 12px;
}
.legal-card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 16px 18px;
  box-shadow: var(--shadow2);
  animation: floatIn .4s ease both;
}

/* ---------- FAQ accordion ---------- */
.accordion{
  display: grid;
  gap: 10px;
}
.accordion details{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 10px 14px;
  transition: border-color .2s ease, background .2s ease;
}
.accordion summary{
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text);
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion details[open]{
  border-color: rgba(255,98,198,.4);
  background: rgba(255,98,198,.06);
  box-shadow: 0 0 0 6px rgba(255,98,198,.06);
}
.accordion details p{
  margin-top: 8px;
  color: var(--text2);
  font-size: 13px;
}

/* ---------- Support form ---------- */
.support-form{
  display: grid;
  gap: 10px;
}
.support-form input,
.support-form select,
.support-form textarea{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 13px;
}
.support-form textarea{ resize: vertical; }

/* ---------- Product page ---------- */
.breadcrumbs{
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--text2);
}
.breadcrumbs a{
  color: var(--text2);
}
.product-page__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 18px;
}
.product-page__media{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 16px;
}
.product-page__media img{
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.product-page__content{
  display: grid;
  gap: 10px;
}
.product-page__price{
  display: flex;
  align-items: center;
  gap: 10px;
}
.product-page__badge{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,98,198,.35);
  color: #ffd6f0;
  background: rgba(255,98,198,.12);
}
@media (max-width: 980px){
  .product-page__grid{ grid-template-columns: 1fr; }
  .product-page__media img{ height: 240px; }
}
/* ---------- Shop layout ---------- */
.shop-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
}
.shop-aside{
  position: relative;
}
.shop-summary{
  position: sticky;
  top: 90px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 14px;
  box-shadow: var(--shadow2);
}
@media (max-width: 980px){
  .shop-layout{ grid-template-columns: 1fr; }
  .shop-summary{ position: static; }
}

/* ---------- Checkout layout ---------- */
.checkout-layout{
  display: grid;
  gap: 14px;
}

/* ---------- Payment methods ---------- */
.payment-grid--fancy{
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.payment-card{
  position: relative;
  overflow: hidden;
}
.payment-card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(120deg, rgba(255,98,198,.25), rgba(255,255,255,0)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .2s ease;
}
.payment-card:hover::after{ opacity: 1; }
.payment-icon{
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.payment-icon img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* ---------- Product polish ---------- */
.product-card--shop{
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(circle at top left, rgba(255,98,198,.08), transparent 50%), rgba(255,255,255,.02);
}
.product-card--shop:hover{
  border-color: rgba(255,98,198,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 18px rgba(255,98,198,.15);
}
.modal__panel{
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(circle at top left, rgba(255,98,198,.08), transparent 55%), rgba(9,10,15,.94);
}
.variant-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  margin-top: 8px;
}
.variant-price{
  font-weight: 600;
  color: var(--accent);
}
.modal__variant-select select{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
}
.verify-form input{
  flex: 1 1 220px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
}
.product-body{
  padding: 14px 16px 18px;
  display: grid;
  gap: 8px;
}
.product-title{
  font-weight: 650;
  font-size: 14px;
}
.product-desc{
  color: var(--text2);
  font-size: 12.5px;
  line-height: 1.5;
}
.status-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text2);
  background: rgba(255,255,255,.03);
  width: fit-content;
}
.status-pill--ok{ border-color: rgba(82,243,164,.35); color: #9ff2c7; background: rgba(82,243,164,.08); }
.status-pill--warn{ border-color: rgba(255,211,106,.35); color: #ffd98e; background: rgba(255,211,106,.08); }
.status-pill--bad{ border-color: rgba(255,107,107,.35); color: #ff9a9a; background: rgba(255,107,107,.08); }
.status-dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

/* ---------- Product modal ---------- */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 70;
}
.modal.is-open{ display: block; }
.modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}
.modal__panel{
  position: relative;
  width: min(920px, calc(100% - 32px));
  margin: 60px auto;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(12,12,18,.95), rgba(10,10,16,.95));
  box-shadow: var(--shadow);
  padding: 22px;
  animation: floatIn .35s ease both;
}
.modal__close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor: pointer;
}
.modal__grid{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 18px;
}
@media (max-width: 900px){
  .modal__grid{ grid-template-columns: 1fr; }
}
.modal__media img{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
}
.modal__title{
  font-size: 22px;
  font-weight: 700;
}
.modal__price{
  font-size: 18px;
  color: var(--accent);
  margin-top: 6px;
}
.modal__meta{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.product-page__grid{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 18px;
}
.product-page__media img{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
}
.product-page__status{
  margin-top: 8px;
}
@media (max-width: 900px){
  .product-page__grid{ grid-template-columns: 1fr; }
}

/* ---------- Account page ---------- */
.account-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.account-user{
  display: flex;
  align-items: center;
  gap: 10px;
}
.account-name{
  font-weight: 650;
  font-size: 14px;
}
.account-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.account-details{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.account-details > div{
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  font-size: 12.5px;
}
.account-banner{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  font-size: 12px;
  color: var(--text2);
}
.support-links{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.purchase-actions{
  margin: 8px 0 12px;
}
.purchase-grid{
  display: grid;
  gap: var(--gap-3);
}
.purchase-card{
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 14px 16px;
  display: grid;
  gap: 6px;
  animation: floatIn .45s ease both;
}
.purchase-card__head{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.purchase-media{
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.purchase-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.purchase-info{
  display: grid;
  gap: 6px;
}
.purchase-title{
  font-weight: 650;
  font-size: 13.5px;
}
.purchase-meta{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text2);
}
.purchase-key{
  font-size: 12px;
  color: var(--text);
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  width: fit-content;
}

/* ---------- Banners ---------- */
.banner{
  width: min(var(--max), calc(100% - 34px));
  margin: 14px auto 0;
  padding: 12px 16px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.banner--info{ border-color: rgba(98,164,255,.35); background: rgba(98,164,255,.08); }
.banner--warn{ border-color: rgba(255,211,106,.35); background: rgba(255,211,106,.08); }
.banner--maint{ border-color: rgba(255,98,198,.35); background: rgba(255,98,198,.10); }
.banner__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 10px rgba(0,0,0,.2);
}
.banner__link{
  margin-left: auto;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Simple page layout helpers ---------- */
.pageCard{
  padding: 24px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  animation: floatIn .45s ease both;
}
.pageHead h1{ margin: 0; font-size: clamp(24px, 2.8vw, 34px); }
.pageHead p{ margin: 6px 0 0 0; color: var(--text2); }
.btnRow{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- Page header block ---------- */
.page{
  margin-top: 26px;
}
.page__head{
  margin-bottom: 14px;
}
.page__head .h1{ font-size: clamp(28px, 3vw, 38px); }
.page__head p{ margin-top: 8px; }

/* ---------- Footer ---------- */
.footer{
  border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(6,7,11,.18), rgba(6,7,11,.45));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* sticky footer */
  margin-top: auto;
  width: 100%;
}

.footer__row{
  width: min(var(--max), calc(100% - 34px));
  margin-inline: auto;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer__left{
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--text2);
}
.footer__right{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 12px;
  color: var(--text2);
}
.footer__right a{
  color: var(--text2);
  transition: color .18s ease;
}
.footer__right a:hover{ color: var(--text); }

.pay-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  font-size: 11px;
  color: var(--text2);
}
.pay-badge{
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

@media (max-width: 700px){
  .footer__row{
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__right{ justify-content: flex-start; }
}

/* ---------- Forms (for client/login pages) ---------- */
.field{
  display: grid;
  gap: 7px;
  margin-top: 12px;
}
label{
  font-size: 12px;
  color: var(--text2);
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 10px 12px;
  outline: none;
  color: var(--text);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
textarea{ min-height: 120px; resize: vertical; }
input:focus, textarea:focus{
  border-color: rgba(255,98,198,.45);
  box-shadow: 0 0 0 6px rgba(255,98,198,.10);
  background: rgba(255,255,255,.045);
}

hr, .hr{
  border: 0;
  height: 1px;
  margin: 16px 0;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.18), rgba(255,255,255,.06));
}

/* ---------- Status widget ---------- */
.statusRow{
  display: grid;
  grid-template-columns: 14px 90px 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 12.5px;
  color: var(--text2);
}
.statusDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 0 10px rgba(0,0,0,.2);
}
.statusDot--ok{ background: #52f3a4; }
.statusDot--warn{ background: #ffd36a; }
.statusDot--bad{ background: #ff6b6b; }
.statusLabel{ color: var(--text); font-weight: 600; }
.statusMsg{ color: var(--text2); }

/* ---------- Toast ---------- */
.toast{
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(12,12,20,.85);
  color: var(--text);
  font-size: 12.5px;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 60;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Utility spacing ---------- */
.mt-1{ margin-top: 10px; }
.mt-2{ margin-top: 14px; }
.mt-3{ margin-top: 18px; }
.mt-4{ margin-top: 24px; }
.mb-1{ margin-bottom: 10px; }
.mb-2{ margin-bottom: 14px; }
.mb-3{ margin-bottom: 18px; }
.mb-4{ margin-bottom: 24px; }

.center{ text-align: center; }
.right{ text-align: right; }
.flex{ display: flex; }
.between{ justify-content: space-between; }
.items-center{ align-items: center; }
.gap-1{ gap: 10px; }
.gap-2{ gap: 14px; }
.gap-3{ gap: 18px; }

/* ---------- Animation polish ---------- */
@keyframes floatIn {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 0 7px rgba(255,98,198,.07), 0 18px 50px rgba(0,0,0,.45); }
  50%     { box-shadow: 0 0 0 9px rgba(255,98,198,.10), 0 22px 70px rgba(0,0,0,.55); }
}
@keyframes floatUp {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-in{ animation: floatIn .45s ease both; }
.animate-in.delay-1{ animation-delay: .08s; }
.animate-in.delay-2{ animation-delay: .16s; }
.animate-in.delay-3{ animation-delay: .24s; }
.pulse{ animation: glowPulse 2.2s ease-in-out infinite; }

a, button { -webkit-tap-highlight-color: transparent; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible{
  outline: 2px solid rgba(255,98,198,.55);
  outline-offset: 2px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- "Looks good even if HTML uses random class names" fallback ---------- */
main{
  width: min(var(--max), calc(100% - 34px));
  margin-inline: auto;
  padding: 34px 0 46px;
  flex: 1 0 auto;
}

/* If your HTML uses these IDs */
#appHeader .topbar { background: transparent; border: 0; }
#appFooter .footer { background: transparent; border: 0; }

/* ---------- Shop enhancements ---------- */
.shop-highlights{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.shop-highlight{
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.shop-highlight .icon{
  width: 22px;
  height: 22px;
  color: var(--accent);
}
.shop-highlight__title{
  font-weight: 600;
  color: var(--text);
}
.product-meta{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  align-items: center;
}
.meta-pill{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.72);
}

/* ---------- Modal details ---------- */
.modal__gallery{
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.modal__gallery img{
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
}
.modal__variant-select{
  margin-top: 12px;
  display: grid;
  gap: 6px;
}
.modal__variant-select label{
  font-size: 12px;
  color: var(--text2);
}
.modal__variant-select select{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--stroke);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 12px;
  outline: none;
}
.modal__rating{
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-left: 8px;
}
.modal__variants{
  margin-top: 12px;
  display: grid;
  gap: 8px;
}
.variant-row{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: var(--card-2);
}
.variant-name{
  font-weight: 600;
}
.variant-price{
  font-weight: 600;
  color: var(--accent);
}
.modal__features{
  margin-top: 12px;
}
.modal__subtitle{
  font-weight: 600;
  margin-bottom: 6px;
}
.modal__feature-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.modal__feature-list li{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
}
.modal__payments{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}