:root {
  --bg:#0c1117; --card:#0f1621; --text:#e6edf3; --muted:#9aa4b2; --brand:#23c4a2; --line:#1b2430;
  --accent:#7dd3fc; --accent2:#a78bfa; --danger:#ef4444; --ok:#22c55e; --warn:#f59e0b;
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.25);
  --nav-h:64px;
}
body.light { --bg:#f7f9fb; --card:#ffffff; --text:#0e1116; --muted:#5b6472; --line:#e5e7eb; --shadow:0 10px 24px rgba(10,37,64,.08) }
* { box-sizing:border-box }
html { scroll-behavior:smooth }
html,body{min-height:100%}
body { margin:0; background:
  radial-gradient(1200px 800px at -10% -10%, rgba(35,196,162,.12), transparent 40%),
  radial-gradient(1000px 700px at 120% 120%, rgba(167,139,250,.10), transparent 40%),
  var(--bg);
  color:var(--text); font:15.5px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  transition: background .3s ease, color .3s ease; }
a { color:inherit }
.container { max-width:1140px; margin:0 auto; padding:16px }
.my-4{margin:16px 0}

/* ---------- Navbar ---------- */
.navbar { position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,0)), var(--card);
  border-bottom:1px solid var(--line); backdrop-filter:saturate(140%) blur(10px); }
body.light .navbar { background:linear-gradient(to bottom, rgba(255,255,255,.7), rgba(255,255,255,.55)), var(--card) }
.nav-wrap { display:flex; gap:12px; align-items:center; justify-content:space-between; height:100% }
.brand { display:flex; gap:10px; align-items:center; font-weight:800; letter-spacing:.2px; text-decoration:none }
.brand-logo { width:32px; height:32px; border-radius:10px; background:linear-gradient(135deg,var(--brand),#0ea5e9);
  display:grid; place-items:center; color:#fff; font-weight:900; box-shadow:0 6px 20px rgba(35,196,162,.35) }
.nav-links { display:flex; gap:10px; align-items:center }
.nav-links .hide-sm { display:none }
@media (min-width:860px){ .nav-links .hide-sm { display:flex } }

/* ---------- Buttons / pills / chips ---------- */
.btn { background:linear-gradient(90deg,var(--brand),#0ea5e9); color:#06252b; font-weight:800; border:none; border-radius:14px;
  padding:11px 16px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 6px 20px rgba(14,165,233,.25); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; font-size:14.5px }
.btn:hover { transform:translateY(-1px); filter:brightness(1.06) }
.btn:active { transform:translateY(0) }
.btn.small{ padding:8px 12px; font-weight:700; font-size:13px }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--line); box-shadow:none }
.btn.ghost:hover{ border-color:var(--brand); color:var(--brand) }
.btn.danger{ background:linear-gradient(90deg,#ef4444,#f97316); color:#fff }
.btn.full{ width:100%; justify-content:center }
.pill { padding:8px 13px; border:1px solid var(--line); border-radius:999px; color:var(--muted); text-decoration:none;
  background:rgba(255,255,255,.03); font-size:13px; font-weight:600; transition:all .15s ease }
.pill:hover{ border-color:var(--brand); color:var(--text) }
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700;
  color:var(--brand); background:rgba(35,196,162,.12); border:1px solid rgba(35,196,162,.25) }
.badge { display:inline-block; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.4px }
.badge.success{ background:rgba(34,197,94,.15); color:#22c55e; border:1px solid rgba(34,197,94,.3) }
.badge.error{ background:rgba(239,68,68,.15); color:#f87171; border:1px solid rgba(239,68,68,.3) }
.badge.info{ background:rgba(14,165,233,.15); color:#38bdf8; border:1px solid rgba(14,165,233,.3) }
.badge.muted{ background:rgba(154,164,178,.15); color:var(--muted); border:1px solid var(--line) }
.badge.warn{ background:rgba(245,158,11,.15); color:#fbbf24; border:1px solid rgba(245,158,11,.3) }

/* ---------- Search ---------- */
.search { display:flex; gap:8px; align-items:center; background:rgba(255,255,255,.04); border:1px solid var(--line);
  padding:8px 12px; border-radius:12px; transition:border-color .2s }
.search:focus-within { border-color:var(--brand) }
.search input { background:transparent; border:none; outline:none; color:var(--text); width:170px; font-size:13.5px }
.search svg { color:var(--muted); flex-shrink:0 }

/* ---------- Forms ---------- */
label { display:block; font-size:13px; font-weight:700; color:var(--muted); margin:12px 0 6px }
input[type="search"], input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="date"], select, textarea { width:100%; padding:10px 12px; border-radius:12px;
  border:1px solid var(--line); background:var(--card); color:var(--text); font:inherit; margin:4px 0; transition:border-color .2s, box-shadow .2s }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(35,196,162,.15) }
.field { margin-bottom:6px }

/* ---------- Grid / cards ---------- */
.grid { display:grid; gap:16px }
.g2{grid-template-columns:1fr} .g3{grid-template-columns:1fr} .g4{grid-template-columns:1fr}
@media (min-width:768px){ .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:992px){ .g4{grid-template-columns:repeat(4,1fr)} }
.card { position:relative; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); overflow:hidden }
.card::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(to bottom right, rgba(35,196,162,.15), rgba(167,139,250,.12)); opacity:.35; mix-blend-mode:overlay }
.card > * { position:relative; z-index:1 }
.card.hoverable { transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; text-decoration:none; display:block }
.card.hoverable:hover { transform:translateY(-4px); border-color:rgba(35,196,162,.5); box-shadow:0 18px 40px rgba(0,0,0,.28) }
.thumb { height:120px; border-radius:12px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg, rgba(125,211,252,.28), rgba(167,139,250,.24)); border:1px dashed var(--line);
  font-size:26px; margin-bottom:12px }
.thumb svg{ width:34px; height:34px }
.card h3 { margin:8px 0 6px; font-size:16.5px }
.price { font-weight:900; font-size:17px; color:var(--brand) }
.price.big { font-size:26px }
.price.strike { color:var(--muted); text-decoration:line-through; font-weight:600; font-size:14px }
.gradient { background:linear-gradient(90deg,#22c55e,#38bdf8,#a78bfa); -webkit-background-clip:text; background-clip:text; color:transparent }
.muted{color:var(--muted)} .small{font-size:12.5px} .mt{margin-top:20px} .mb{margin-bottom:16px} .mt-sm{margin-top:10px}

/* ---------- Hero ---------- */
.hero { position:relative; padding:52px 24px; border-radius:20px; overflow:hidden;
  background:linear-gradient(135deg, rgba(26,127,100,.18), rgba(167,139,250,.12)); border:1px solid var(--line) }
.hero h1 { font-size:clamp(26px,4.5vw,42px); margin:0 0 10px; letter-spacing:-.5px; line-height:1.15 }
.hero p { max-width:640px }
.hero .row { margin-top:22px }
.orb { position:absolute; border-radius:999px; filter:blur(26px); opacity:.5; pointer-events:none; animation:float 12s ease-in-out infinite }
.orb.a { width:220px; height:220px; left:-60px; top:-60px; background:#22c55e }
.orb.b { width:260px; height:260px; right:-70px; bottom:-70px; background:#38bdf8; animation-delay:-6s }
.orb.c { width:120px; height:120px; left:38%; top:-50px; background:#a78bfa; opacity:.35; animation-delay:-3s }
@keyframes float { 0%,100%{ transform:translateY(0) scale(1) } 50%{ transform:translateY(-16px) scale(1.05) } }

/* ---------- Filters / chips / sort ---------- */
.filter-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:16px 0 }
.chip-link { padding:8px 14px; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:13px; font-weight:700;
  text-decoration:none; transition:all .15s ease; background:rgba(255,255,255,.02) }
.chip-link.active { border-color:var(--brand); color:var(--text); background:rgba(35,196,162,.12) }
.chip-link:hover { border-color:var(--brand) }
.sort { margin-left:auto; width:auto; min-width:150px }

/* ---------- Skeleton ---------- */
.skeleton { position:relative; overflow:hidden; border-radius:12px; background:var(--card); border:1px solid var(--line);
  padding:16px; min-height:210px; box-shadow:var(--shadow) }
.skeleton::before { content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); animation:shimmer 1.4s infinite }
body.light .skeleton::before { background:linear-gradient(90deg, transparent, rgba(15,40,70,.06), transparent) }
.sk-thumb { height:90px; border-radius:10px; background:rgba(255,255,255,.05) }
body.light .sk-thumb{ background:rgba(15,40,70,.06) }
.sk-line { height:12px; border-radius:6px; background:rgba(255,255,255,.06); margin-top:12px }
body.light .sk-line{ background:rgba(15,40,70,.07) }
.sk-line.w60{ width:60% } .sk-line.w40{ width:40% }
@keyframes shimmer { 100% { transform:translateX(100%) } }

/* ---------- Toast ---------- */
.toast-wrap { position:fixed; top:18px; right:18px; z-index:100; display:flex; flex-direction:column; gap:10px; max-width:min(360px,90vw) }
.toast { display:flex; align-items:flex-start; gap:10px; padding:13px 16px; border-radius:14px; border:1px solid var(--line);
  background:var(--card); box-shadow:var(--shadow); font-size:14px; font-weight:600; animation:toast-in .28s cubic-bezier(.2,.9,.3,1.2);
  border-left:4px solid var(--ok) }
.toast.error{ border-left-color:var(--danger) } .toast.info{ border-left-color:#0ea5e9 } .toast.warn{ border-left-color:var(--warn) }
.toast .x { margin-left:auto; cursor:pointer; color:var(--muted); background:none; border:none; font-size:16px; padding:0 4px }
@keyframes toast-in { from { opacity:0; transform:translateX(24px) } to { opacity:1; transform:none } }
@keyframes toast-out { to { opacity:0; transform:translateX(24px) } }

/* ---------- Floating cart FAB ---------- */
.fab { position:fixed; right:22px; bottom:22px; z-index:60; width:58px; height:58px; border-radius:18px; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--brand),#0ea5e9); color:#06252b; display:grid; place-items:center; box-shadow:0 12px 32px rgba(14,165,233,.4);
  transition:transform .2s ease } 
.fab:hover { transform:translateY(-3px) scale(1.04) }
.fab svg { width:24px; height:24px }
.fab-count { position:absolute; top:-6px; right:-6px; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--danger);
  color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center; box-shadow:0 4px 10px rgba(239,68,68,.5) }
.fab.hidden { display:none }
@media (min-width:992px){ .fab { display:grid } }
.fab-mobile { display:none }

/* ---------- Bottom nav ---------- */
.bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:55; background:rgba(16,21,27,.72); border-top:1px solid var(--line);
  display:flex; justify-content:space-around; padding:8px 0 10px; backdrop-filter:saturate(160%) blur(14px) }
body.light .bottom-nav { background:rgba(255,255,255,.85) }
.bottom-nav a { display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none; color:var(--muted); font-size:11px; font-weight:600; position:relative }
.bottom-nav a.active { color:var(--brand) }
.bottom-nav svg { width:20px; height:20px }
.bnav-badge { position:absolute; top:-4px; right:-10px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--danger);
  color:#fff; font-size:10px; font-weight:800; display:grid; place-items:center }
@media (min-width:992px){ .bottom-nav { display:none } .fab-mobile{ display:none } }

/* ---------- Table ---------- */
.table-wrap { overflow:auto }
.table { width:100%; border-collapse:collapse }
.table th,.table td { border-bottom:1px solid var(--line); padding:11px 10px; text-align:left; font-size:14px }
.table th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.5px }
.table tr:last-child td { border-bottom:none }

/* ---------- Summary ---------- */
.summary { margin-top:14px; padding:14px; border-radius:14px; border:1px dashed var(--line); background:rgba(255,255,255,.02) }
.summary .row-item { display:flex; justify-content:space-between; padding:5px 0; font-size:14px }
.summary .row-item.grand { font-size:17px; font-weight:900; border-top:1px solid var(--line); margin-top:8px; padding-top:10px }

/* ---------- Footer ---------- */
.footer { border-top:1px solid var(--line); padding:22px 0; background:var(--card); margin-top:44px }
.footer .inner { display:flex; gap:20px; flex-wrap:wrap; align-items:center; justify-content:space-between }
.footer a { color:var(--muted); text-decoration:none; font-size:13.5px }
.footer a:hover { color:var(--brand) }

/* ---------- Notice (no-JS fallback) ---------- */
.notice { padding:12px 14px; border-radius:12px; border:1px solid var(--line); margin-bottom:12px; font-weight:600; font-size:14px }
.notice.success{border-left:4px solid var(--ok)} .notice.error{border-left:4px solid var(--danger)} .notice.info{border-left:4px solid #0ea5e9}

/* ---------- Layout helpers ---------- */
.row { display:flex; gap:12px } .wrap{flex-wrap:wrap} .gap{gap:12px} .between{justify-content:space-between}
.center{align-items:center} .end{justify-content:flex-end} .column{flex-direction:column} .grow{flex:1}
.list { list-style:none; padding:0; margin:0 } .list li { padding:10px 0; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:center }
.list li:last-child{ border-bottom:none }
.link { text-decoration:none; color:inherit } .link:hover{ color:var(--brand) }
code { background:rgba(125,211,252,.12); border:1px solid var(--line); padding:2px 7px; border-radius:7px; font-size:12.5px }
.section-title { display:flex; align-items:center; gap:12px; margin:26px 0 14px }
.section-title::after { content:""; height:1px; flex:1; background:linear-gradient(90deg,var(--line),transparent) }
.kpi { display:grid; grid-template-columns:repeat(2,1fr); gap:14px }
@media (min-width:768px){ .kpi{ grid-template-columns:repeat(4,1fr) } }
.stat-card { padding:18px; border-radius:16px; border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow) }
.stat-card .num { font-size:26px; font-weight:900; color:var(--brand) }
.stat-card .lbl { color:var(--muted); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px }
.divider { height:1px; background:var(--line); margin:16px 0 }
.avail { display:grid; place-items:center; height:60vh; text-align:center }
.avail h1 { font-size:clamp(24px,4vw,36px); margin-bottom:8px }
.empty { text-align:center; padding:48px 16px; color:var(--muted) }
.empty svg { opacity:.4; margin-bottom:8px }