/* ============================================================
   ViceAccs — warm dark premium (inspired by white.expert)
   Ambient gradient glows · orange→violet accent · glowing orb ·
   rounded cards & pills · one friendly bold sans (Manrope).
   ============================================================ */
:root {
  --bg:#0c0710; --bg2:#08050c;
  --surface:#16101e; --surface2:#1e1728; --raised:#241b31;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.05); --border:rgba(255,255,255,.12);

  --text:#f4eff8; --dim:#cdc2d8; --muted:#9d90ad; --faint:#6f6579;

  --accent:#ff7a2f; --accent2:#8b5cf6;
  --grad:linear-gradient(100deg,#ff7a2f 0%,#c04bd0 55%,#7c5cff 100%);
  --glow-o:rgba(255,122,47,.35); --glow-v:rgba(139,92,246,.30);

  --ok:#46d6a0; --warn:#f5b544; --bad:#ff6b6b;

  --font:'Manrope',system-ui,-apple-system,sans-serif;
  --r:18px; --r-sm:12px;
  --hdr-h:70px; --wrap:1180px;
}
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); }
body { font-family:var(--font); color:var(--text); font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; letter-spacing:-.01em; }
a { color:inherit; text-decoration:none; }
input,select,button { font-family:inherit; }
::selection { background:var(--accent); color:#1a0d05; }
.num { font-variant-numeric:tabular-nums; }

/* ambient glow background */
.dots { position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(680px 460px at 12% -5%, rgba(255,122,47,.16), transparent 60%),
    radial-gradient(760px 520px at 102% 12%, rgba(124,60,220,.20), transparent 60%),
    radial-gradient(620px 620px at 70% 108%, rgba(139,92,246,.10), transparent 60%); }
#app { position:relative; z-index:1; }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 20px; }

/* ---------- buttons (pills) ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; cursor:pointer;
  background:var(--grad); color:#fff; font-weight:700; font-size:14px; border-radius:999px; padding:12px 24px;
  box-shadow:0 8px 26px -8px var(--glow-o); transition:transform .14s ease, box-shadow .14s ease; }
.btn:hover { transform:translateY(-1px); box-shadow:0 12px 30px -8px var(--glow-o); }
.btn:active { transform:translateY(0); }
.btn-2 { display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text); font-weight:600; font-size:14px;
  border-radius:999px; padding:12px 22px; transition:background .14s ease, border-color .14s ease; }
.btn-2:hover { background:rgba(255,255,255,.08); border-color:var(--accent); }
.btn-block { width:100%; }

/* ---------- header ---------- */
.hdr { position:sticky; top:0; z-index:30; height:var(--hdr-h); backdrop-filter:blur(16px);
  background:rgba(12,7,16,.72); border-bottom:1px solid var(--line2); }
.hdr__in { max-width:var(--wrap); margin:0 auto; height:100%; display:flex; align-items:center; gap:18px; padding:0 20px; }
.hdr__logo { display:flex; align-items:center; gap:10px; cursor:pointer; flex-shrink:0; }
.hdr__orb { width:22px; height:22px; border-radius:50%; background:var(--grad); box-shadow:0 0 16px var(--glow-o); }
.hdr__brand { font-weight:800; font-size:19px; letter-spacing:-.03em; }
.hdr__brand b { color:var(--accent); font-weight:800; }
.hdr__nav { display:flex; gap:2px; margin-left:8px; }
.hdr__nav a { padding:9px 14px; border-radius:999px; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; transition:color .13s, background .13s; }
.hdr__nav a:hover { color:var(--text); background:rgba(255,255,255,.05); }
.hdr__nav a.on { color:var(--text); background:rgba(255,255,255,.07); }
.hdr__right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.hdr__cart { display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; border:1px solid var(--border);
  background:rgba(255,255,255,.04); font-size:13.5px; font-weight:600; color:var(--dim); cursor:pointer; }
.hdr__cart:hover { border-color:var(--accent); color:var(--text); }
.hdr__cart b { color:var(--accent); }
.hdr__cart .cnt { min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--grad); color:#fff;
  display:inline-grid; place-items:center; font-size:11px; font-weight:700; }

/* ---------- sections ---------- */
.sec { padding:28px 0; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }

/* ---------- HOME ---------- */
.hero { position:relative; text-align:center; padding:54px 20px 40px; }
.hero__orb { width:132px; height:132px; margin:0 auto 30px; border-radius:50%; position:relative;
  background:radial-gradient(circle at 34% 30%, #ffce9a, #ff7a2f 32%, #c04bd0 64%, #6d3bff 100%);
  box-shadow:0 0 70px 6px var(--glow-o), 0 0 120px 30px var(--glow-v); }
.hero__orb::after { content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.55), transparent 42%); }
.hero__badge { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px;
  border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--dim); font-size:12.5px; font-weight:600; margin-bottom:22px; }
.hero__badge .d { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.hero__h { font-weight:800; font-size:clamp(34px,5vw,54px); line-height:1.05; letter-spacing:-.03em; max-width:820px; margin:0 auto; }
.hero__h .g { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__sub { margin:20px auto 0; max-width:560px; font-size:16px; color:var(--muted); }
.hero__cta { display:flex; gap:12px; justify-content:center; margin-top:30px; flex-wrap:wrap; }
.hero__cta .btn, .hero__cta .btn-2 { padding:14px 30px; font-size:15px; }

.trust { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:20px; }
.tcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px; }
.tcard__ic { width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,rgba(255,122,47,.22),rgba(139,92,246,.22));
  display:grid; place-items:center; margin-bottom:14px; }
.tcard__ic svg { width:19px; height:19px; fill:none; stroke:var(--accent); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.tcard__t { font-weight:700; font-size:14.5px; }
.tcard__d { font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.5; }

.h2 { font-weight:800; font-size:24px; letter-spacing:-.02em; margin:0 0 4px; }
.h2sub { color:var(--muted); font-size:14px; margin:0 0 20px; }

.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; cursor:pointer;
  display:flex; flex-direction:column; gap:12px; transition:transform .15s, border-color .15s, box-shadow .15s; }
.tile:hover { transform:translateY(-3px); border-color:var(--border); box-shadow:0 18px 40px -22px var(--glow-v); }
.tile__top { display:flex; justify-content:space-between; align-items:center; }
.tile__name { font-weight:700; font-size:17px; }
.tile__cnt { font-size:12px; color:var(--muted); background:rgba(255,255,255,.05); padding:3px 10px; border-radius:999px; }
.tile__d { font-size:13px; color:var(--muted); line-height:1.5; }
.tile__p { margin-top:auto; font-size:14px; font-weight:600; }
.tile__p b { color:var(--accent); }

.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.step { display:flex; gap:14px; align-items:flex-start; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
.step__n { font-weight:800; font-size:20px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.step__t { font-weight:700; font-size:14.5px; }
.step__d { font-size:12.5px; color:var(--muted); margin-top:3px; }

/* ---------- CATALOG ---------- */
.split { display:grid; grid-template-columns:250px 1fr; gap:20px; align-items:start; }
.side { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px; position:sticky; top:calc(var(--hdr-h) + 16px); }
.side__h { padding:12px 12px 8px; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-weight:600; }
.catrow { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:10px; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--muted); }
.catrow:hover { color:var(--text); background:rgba(255,255,255,.04); }
.catrow.on { color:var(--text); background:rgba(255,122,47,.12); }
.catrow .n { font-size:12px; color:var(--faint); font-weight:500; }
.catrow.on .n { color:var(--accent); }
.subrow { display:flex; justify-content:space-between; padding:8px 12px 8px 24px; font-size:13px; color:var(--muted); cursor:pointer; border-radius:8px; }
.subrow:hover { color:var(--text); }
.subrow.on { color:var(--accent); }
.subrow .n { font-size:11px; color:var(--faint); }

.cat__bar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.cat__title { font-weight:800; font-size:22px; letter-spacing:-.02em; }
.cat__title .c { color:var(--muted); font-size:14px; font-weight:500; }
.search { display:flex; align-items:center; gap:8px; border:1px solid var(--border); background:rgba(255,255,255,.04); border-radius:999px; padding:0 16px; min-width:280px; }
.search input { background:transparent; border:0; color:var(--text); padding:11px 0; font-size:13.5px; width:100%; outline:none; }
.search input::placeholder { color:var(--faint); }

.pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; display:flex; flex-direction:column; gap:12px;
  transition:transform .15s, border-color .15s, box-shadow .15s; }
.pcard.buyable { cursor:pointer; }
.pcard.buyable:hover { transform:translateY(-3px); border-color:var(--border); box-shadow:0 20px 44px -24px var(--glow-o); }
.pcard.out { opacity:.72; }
.status { display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:999px; background:rgba(255,255,255,.05); }
.status .d { width:6px; height:6px; border-radius:50%; }
.pcard__name { font-weight:700; font-size:15px; line-height:1.35; }
.pcard.out .pcard__name { color:var(--muted); }
.pcard__foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:4px; }
.pcard__price { font-weight:800; font-size:19px; letter-spacing:-.02em; }
.pcard.out .pcard__price { color:var(--faint); }
.pcard__btn { padding:9px 18px; border-radius:999px; background:var(--grad); color:#fff; font-size:13px; font-weight:700; cursor:pointer; box-shadow:0 6px 18px -8px var(--glow-o); }
.pcard__btn.off { background:rgba(255,255,255,.06); color:var(--muted); box-shadow:none; }

/* ---------- PRODUCT ---------- */
.crumb { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:13.5px; font-weight:600; cursor:pointer; margin-bottom:18px; }
.crumb:hover { color:var(--text); }
.pd { display:grid; grid-template-columns:1.3fr .7fr; gap:20px; align-items:start; }
.pd__l { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:30px; }
.pd__cat { font-size:12px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; }
.pd__h { font-weight:800; font-size:30px; line-height:1.15; letter-spacing:-.02em; }
.pd__desc { margin-top:16px; font-size:15px; line-height:1.65; color:var(--dim); }
.pd__specs { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:26px; }
.spec { background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 16px; }
.spec__k { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:600; }
.spec__v { font-weight:700; margin-top:5px; }
.pd__r { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px; display:flex; flex-direction:column; gap:18px; position:sticky; top:calc(var(--hdr-h) + 16px); }
.pd__row { display:flex; justify-content:space-between; align-items:center; }
.pd__price { font-weight:800; font-size:36px; letter-spacing:-.03em; }
.pd__price .u { font-size:14px; color:var(--faint); font-weight:600; }
.lbl { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); font-weight:600; margin-bottom:8px; }
.stepper { display:flex; align-items:center; border:1px solid var(--border); border-radius:999px; overflow:hidden; background:rgba(255,255,255,.03); }
.stepper .b { padding:11px 18px; cursor:pointer; color:var(--muted); font-size:16px; user-select:none; }
.stepper .b:hover { color:var(--text); background:rgba(255,255,255,.05); }
.stepper .v { flex:1; text-align:center; padding:11px; font-weight:700; font-size:15px; }
.pd__tot { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pd__tot .v { font-weight:800; font-size:18px; }
.pd__hint { font-size:12px; color:var(--faint); text-align:center; line-height:1.6; }

/* ---------- ACCOUNT / ADMIN shared shell ---------- */
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.pside { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px; display:flex; flex-direction:column; }
.pside__user { padding:14px 12px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line2); margin-bottom:6px; }
.avatar { width:40px; height:40px; border-radius:50%; background:var(--grad); box-shadow:0 0 16px var(--glow-o); flex-shrink:0; }
.pside__user .who { font-weight:700; font-size:14.5px; }
.pside__user .sub { font-size:12px; color:var(--muted); }
.pnav { display:flex; flex-direction:column; gap:2px; }
.pnav div { padding:10px 12px; border-radius:10px; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; }
.pnav div:hover { color:var(--text); background:rgba(255,255,255,.04); }
.pnav div.on { color:var(--text); background:rgba(255,122,47,.12); }
.pnav div.onV { color:var(--text); background:rgba(139,92,246,.15); }
.pbal { margin-top:auto; padding:14px 12px 6px; }
.pbal .row { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.pbal .v { font-weight:800; font-size:20px; }

.accStats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
.accStat { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px; }
.accStat .k { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:600; }
.accStat .v { font-weight:800; font-size:28px; margin-top:8px; }
.accStat .v.a { color:var(--accent); }
.secttl { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:600; padding:0 0 12px; }
.orow { display:grid; grid-template-columns:120px 1fr 70px 90px 130px; align-items:center; padding:15px 18px; border-bottom:1px solid var(--line2); font-size:13.5px; }
.orow:last-child { border-bottom:0; }
.orow .dt { color:var(--faint); font-size:12.5px; }
.orow .q { color:var(--muted); }
.orow .s { font-weight:700; }
.badge { font-size:11.5px; font-weight:600; padding:4px 11px; border-radius:999px; justify-self:start; }
.badge.ok { background:rgba(70,214,160,.14); color:var(--ok); }
.badge.warn { background:rgba(245,181,68,.14); color:var(--warn); }

/* ---------- ADMIN ---------- */
.adm__brand { display:flex; align-items:center; gap:8px; padding:12px; margin-bottom:6px; border-bottom:1px solid var(--line2); }
.adm__brand .d { width:8px; height:8px; border-radius:50%; background:var(--accent2); box-shadow:0 0 10px var(--accent2); }
.adm__brand span { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent2); font-weight:700; }
.adm__meta { margin-top:auto; padding:14px 12px 6px; font-size:11.5px; color:var(--faint); line-height:1.7; }
.adm__bar { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line2); }
.adm__bar h2 { font-weight:800; font-size:18px; letter-spacing:-.02em; margin:0; }
.thead { display:grid; padding:12px 20px; border-bottom:1px solid var(--line2); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); font-weight:600; }
.trow { display:grid; align-items:center; padding:13px 20px; border-bottom:1px solid var(--line2); font-size:13.5px; }
.trow:last-child { border-bottom:0; }
.trow .pname { font-weight:600; }
.trow .psku { font-size:11px; color:var(--faint); margin-top:2px; }
.trow .pcat { font-size:12.5px; color:var(--muted); }
.trow .pprice { font-weight:700; }
.ministep { display:flex; align-items:center; border:1px solid var(--border); border-radius:999px; overflow:hidden; width:88px; }
.ministep .b { padding:5px 10px; cursor:pointer; color:var(--muted); font-size:13px; }
.ministep .b:hover { color:var(--text); background:rgba(255,255,255,.05); }
.ministep .v { flex:1; text-align:center; padding:5px 0; font-size:12.5px; font-weight:700; }
.tstatus { font-size:12px; font-weight:600; }
.tacts { display:flex; gap:12px; font-size:12.5px; }
.tacts .ed { color:var(--muted); cursor:pointer; } .tacts .ed:hover { color:var(--accent); }
.tacts .rm { color:var(--muted); cursor:pointer; } .tacts .rm:hover { color:var(--bad); }

.admCats { padding:18px 20px; display:flex; flex-direction:column; gap:14px; }
.acat { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.acat__h { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:rgba(255,255,255,.02); border-bottom:1px solid var(--line2); }
.acat__name { font-weight:700; font-size:15px; }
.acat__meta { font-size:11.5px; color:var(--faint); margin-left:12px; }
.acat__acts, .asub__acts { display:flex; gap:12px; font-size:12px; }
.acat__acts span, .asub__acts span { cursor:pointer; color:var(--muted); }
.acat__acts .addsub { color:var(--accent2); }
.acat__acts .ed:hover, .asub__acts .ed:hover { color:var(--text); }
.acat__acts .rm:hover, .asub__acts .rm:hover { color:var(--bad); }
.asub { display:flex; align-items:center; justify-content:space-between; padding:10px 18px 10px 30px; font-size:13px; }
.asub__l { display:flex; align-items:center; gap:10px; color:var(--dim); }
.asub__l .ar { color:var(--faint); }
.asub__l .n { font-size:11px; color:var(--faint); }

/* ---------- CART ---------- */
.cart__empty { padding:70px 24px; text-align:center; color:var(--muted); }
.cart__empty .btn { margin-top:18px; }
.citem { display:grid; grid-template-columns:1fr 130px 90px 36px; align-items:center; gap:16px; padding:18px; border-bottom:1px solid var(--line2); }
.citem:last-of-type { border-bottom:0; }
.citem__name { font-weight:700; font-size:14.5px; }
.citem__sku { font-size:12px; color:var(--muted); margin-top:3px; }
.citem__sum { font-weight:800; text-align:right; }
.citem__rm { text-align:center; color:var(--faint); cursor:pointer; }
.citem__rm:hover { color:var(--bad); }
.cart__foot { display:grid; grid-template-columns:1fr 340px; border-top:1px solid var(--line); }
.cart__note { padding:24px; font-size:13px; color:var(--muted); line-height:1.7; }
.cart__pay { padding:24px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:14px; }
.cart__tot { display:flex; justify-content:space-between; align-items:baseline; }
.cart__tot .v { font-weight:800; font-size:28px; letter-spacing:-.02em; }

/* ---------- modal ---------- */
.modal { position:fixed; inset:0; z-index:60; display:none; }
.modal.open { display:block; }
.modal__scrim { position:absolute; inset:0; background:rgba(6,3,10,.66); backdrop-filter:blur(2px); }
.modal__card { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(460px,calc(100% - 32px));
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:0 30px 80px -20px rgba(0,0,0,.7); }
.modal__head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line2); }
.modal__head h3 { font-weight:800; font-size:17px; letter-spacing:-.02em; margin:0; }
.modal__head .x { cursor:pointer; color:var(--muted); }
.modal__head .x:hover { color:var(--text); }
.modal__body { padding:20px 22px; display:flex; flex-direction:column; gap:14px; }
.field label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:600; margin-bottom:6px; }
.field input, .field select { width:100%; background:rgba(255,255,255,.03); border:1px solid var(--border); color:var(--text); padding:11px 13px; font-size:13.5px; border-radius:10px; outline:none; }
.field input:focus, .field select:focus { border-color:var(--accent); }
.field.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modal__foot { display:flex; gap:10px; padding:0 22px 22px; }
.modal__foot .btn { flex:1; }

/* ---------- footer ---------- */
.ftr { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 0 40px; margin-top:20px; border-top:1px solid var(--line2); font-size:12.5px; color:var(--faint); flex-wrap:wrap; }
.ftr__r { display:flex; gap:20px; flex-wrap:wrap; }
.ftr__r .a { color:var(--accent); }

/* ---------- toast ---------- */
.toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(16px); z-index:80;
  background:var(--raised); border:1px solid var(--border); color:var(--text); padding:12px 20px; border-radius:999px;
  font-size:13px; font-weight:600; box-shadow:0 20px 50px -18px rgba(0,0,0,.7); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast b { color:var(--accent); }

/* ---------- responsive ---------- */
@media (max-width:900px) {
  .trust { grid-template-columns:repeat(2,1fr); }
  .tiles,.steps { grid-template-columns:1fr; }
  .split,.pd { grid-template-columns:1fr; }
  .side,.pd__r { position:static; }
  .pgrid { grid-template-columns:repeat(2,1fr); }
  .accStats { grid-template-columns:1fr; }
  .cart__foot { grid-template-columns:1fr; } .cart__pay { border-left:0; border-top:1px solid var(--line); }
}
@media (max-width:620px) {
  .hdr__nav { display:none; }
  .pgrid { grid-template-columns:1fr; }
  .orow { grid-template-columns:1fr auto; gap:6px; } .orow .dt,.orow .q { display:none; }
  .thead { display:none; } .trow { grid-template-columns:1fr auto !important; gap:8px; }
  .citem { grid-template-columns:1fr auto; }
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ---------- burger + mobile menu ---------- */
.hdr__burger { display:none; width:40px; height:40px; border-radius:12px; border:1px solid var(--border);
  background:rgba(255,255,255,.04); color:var(--text); align-items:center; justify-content:center; cursor:pointer; }
.hdr__burger svg { width:20px; height:20px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; }
.mnav { display:none; }
.mnav.open { display:flex; flex-direction:column; gap:2px; padding:10px; margin:0 20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); position:sticky; top:calc(var(--hdr-h) + 8px); z-index:25; }
.mnav a { padding:12px 14px; border-radius:10px; font-size:15px; font-weight:600; color:var(--dim); }
.mnav a:hover, .mnav a.on { color:var(--text); background:rgba(255,122,47,.12); }

/* ---------- catalog controls ---------- */
.ctrls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ctrls select { background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text);
  border-radius:999px; padding:10px 15px; font-size:13px; font-weight:600; outline:none; cursor:pointer; }
.toggle { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); cursor:pointer; user-select:none; }
.toggle input { accent-color:var(--accent); width:15px; height:15px; }

/* ---------- delivered goods block ---------- */
.goods { background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:14px; max-height:260px; overflow:auto;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.75; color:var(--dim); white-space:pre-wrap; word-break:break-all; }
.field textarea { width:100%; min-height:160px; background:rgba(255,255,255,.03); border:1px solid var(--border); color:var(--text);
  padding:11px 13px; font-size:12.5px; border-radius:10px; outline:none; font-family:ui-monospace,Menlo,monospace; resize:vertical; }
.field textarea:focus { border-color:var(--accent); }
.field__hint { font-size:11.5px; color:var(--faint); margin-top:6px; }
.orow.click { cursor:pointer; }
.orow.click:hover { background:rgba(255,255,255,.03); }
.load-btn { padding:6px 14px; border-radius:999px; background:rgba(139,92,246,.15); color:var(--accent2); font-size:12.5px; font-weight:600; cursor:pointer; }
.load-btn:hover { background:rgba(139,92,246,.25); }
.stockcell { display:flex; align-items:center; gap:10px; }
.stockcell .cnt { font-weight:700; }

@media (max-width:620px) {
  .hdr__burger { display:inline-flex; }
  .hdr__right .btn, .hdr__right .btn-2, .hdr__me { display:none; }
}

/* ---------- header user chip ---------- */
.hdr__me { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px;
  border:1px solid var(--border); background:rgba(255,255,255,.04); font-size:13.5px; font-weight:600; color:var(--dim); cursor:pointer; }
.hdr__me:hover { border-color:var(--accent); color:var(--text); }
.hdr__me::before { content:''; width:18px; height:18px; border-radius:50%; background:var(--grad); box-shadow:0 0 10px var(--glow-o); }

/* ---------- auth screen ---------- */
.auth { display:flex; justify-content:center; padding:20px 0 40px; }
.auth__card { width:min(420px,100%); background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 26px; text-align:center; box-shadow:0 30px 80px -30px rgba(0,0,0,.6); }
.auth__orb { width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #ffce9a, #ff7a2f 32%, #c04bd0 64%, #6d3bff 100%);
  box-shadow:0 0 44px 4px var(--glow-o), 0 0 70px 18px var(--glow-v); }
.auth__h { font-weight:800; font-size:22px; letter-spacing:-.02em; margin:0 0 18px; }
.auth__tabs { display:flex; gap:4px; padding:4px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:999px; margin-bottom:20px; }
.auth__tab { flex:1; padding:9px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; }
.auth__tab.on { color:#fff; background:var(--grad); }
.auth .field { text-align:left; margin-bottom:14px; }
.auth .btn-block { margin-top:4px; }
.auth__or { display:flex; align-items:center; gap:12px; color:var(--faint); font-size:12px; margin:18px 0; }
.auth__or::before, .auth__or::after { content:''; flex:1; height:1px; background:var(--line); }
.gbtn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:12px; border-radius:999px;
  border:1px solid var(--border); background:#fff; color:#1f1f1f; font-weight:600; font-size:14px; cursor:pointer; }
.gbtn:hover { background:#f2f2f2; }
.gbtn__g { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:13px;
  background:conic-gradient(from -45deg,#ea4335,#fbbc05,#34a853,#4285f4,#ea4335); color:#fff; }
.auth__note { font-size:12px; color:var(--faint); margin:16px 0 0; line-height:1.6; }
.auth__note b { color:var(--muted); }