/* public/css/style.css — Vortex Market */
:root {
  --bg-0: #080810;
  --bg-1: #10101c;
  --bg-2: #18182a;
  --surface: rgba(26,26,42,0.7);
  --surface-hi: rgba(36,36,56,0.9);
  --border: rgba(255,255,255,0.07);
  --border-hi: rgba(255,255,255,0.16);
  --text: #eaeaf8;
  --text-dim: #9898b8;
  --text-faint: #525268;
  --accent: #7c5cff;
  --accent-2: #00e0c7;
  --accent-warm: #ff6b9d;
  --success: #4ade80;
  --danger: #ff4466;
  --warning: #fbbf24;
  --shadow-soft: 0 10px 40px -10px rgba(124,92,255,.3);
  --shadow-hard: 0 24px 64px -16px rgba(0,0,0,.7);
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --t: 220ms cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html,body { background: var(--bg-0); color: var(--text); font-family: 'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; font-feature-settings: 'cv11','ss01'; line-height: 1.55; min-height: 100vh; overflow-x: hidden; }

/* Animated ambient background */
body::before { content:''; position:fixed; inset:0; z-index:-2; background: radial-gradient(1100px 600px at 5% -5%, rgba(124,92,255,.2), transparent 60%), radial-gradient(900px 500px at 105% 5%, rgba(0,224,199,.13), transparent 55%), radial-gradient(700px 700px at 50% 110%, rgba(255,107,157,.1), transparent 60%); animation: bgShift 22s ease-in-out infinite alternate; }
body::after { content:''; position:fixed; inset:0; z-index:-1; background-image: linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px); background-size: 64px 64px; pointer-events:none; mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%); }
@keyframes bgShift { 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(18px,-12px,0) scale(1.04)} }

a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; border:none; background:none; color:inherit; }

/* ── Layout ── */
.shell { max-width:1300px; margin:0 auto; padding:0 24px; }

/* ── Nav ── */
.nav { position:sticky; top:0; z-index:60; backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); background:rgba(8,8,16,.75); border-bottom:1px solid var(--border); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:13px 0; gap:16px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.025em; }
.logo-mark { width:34px; height:34px; border-radius:10px; background:conic-gradient(from 200deg,var(--accent),var(--accent-2),var(--accent-warm),var(--accent)); display:grid; place-items:center; font-size:16px; box-shadow:var(--shadow-soft); animation:spin 14s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.nav-links { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.nav-link { padding:8px 13px; border-radius:999px; color:var(--text-dim); font-size:14px; font-weight:500; transition:color var(--t),background var(--t); }
.nav-link:hover,.nav-link.active { color:var(--text); background:var(--surface-hi); }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 18px; border-radius:12px; font-weight:600; font-size:14px; background:var(--surface); color:var(--text); border:1px solid var(--border); transition:transform var(--t),background var(--t),border-color var(--t),box-shadow var(--t); white-space:nowrap; }
.btn:hover { background:var(--surface-hi); border-color:var(--border-hi); transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-primary { background:linear-gradient(135deg,var(--accent),#5b3eef); border-color:transparent; box-shadow:0 8px 24px -8px rgba(124,92,255,.6); }
.btn-primary:hover { background:linear-gradient(135deg,#8b6dff,#6c4eff); box-shadow:0 12px 32px -8px rgba(124,92,255,.75); }
.btn-success { background:linear-gradient(135deg,var(--success),#22c55e); border-color:transparent; color:#000; box-shadow:0 8px 24px -8px rgba(74,222,128,.4); }
.btn-danger { background:linear-gradient(135deg,var(--danger),#d63058); border-color:transparent; }
.btn-ghost { background:transparent; }
.btn-sm { padding:7px 12px; font-size:13px; border-radius:9px; }
.btn-lg { padding:14px 26px; font-size:16px; border-radius:14px; }
.btn-icon { width:38px; height:38px; padding:0; border-radius:10px; }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none !important; }

/* ── Hero ── */
.hero { padding:88px 0 64px; text-align:center; }
.hero h1 { font-size:clamp(36px,6vw,66px); font-weight:800; letter-spacing:-.035em; line-height:1.04; margin-bottom:18px; background:linear-gradient(180deg,#fff 30%,#a8a8c8 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gradient-text { background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { color:var(--text-dim); max-width:580px; margin:0 auto 28px; font-size:17px; }
.hero-cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero-stats { display:flex; gap:40px; justify-content:center; margin-top:52px; flex-wrap:wrap; }
.stat-num { font-size:30px; font-weight:800; letter-spacing:-.025em; background:linear-gradient(180deg,#fff,#b0b0d0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-label { font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em; margin-top:2px; }

/* ── Section ── */
.section { padding:56px 0; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; gap:16px; flex-wrap:wrap; }
.section-head h2 { font-size:26px; font-weight:700; letter-spacing:-.025em; }
.section-head p { color:var(--text-dim); font-size:14px; }

/* ── Game tiles ── */
.games-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.game-tile { position:relative; padding:22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); cursor:pointer; overflow:hidden; transition:transform var(--t),border-color var(--t),background var(--t); }
.game-tile::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(124,92,255,.2),transparent 55%); opacity:0; transition:opacity var(--t); pointer-events:none; }
.game-tile:hover { transform:translateY(-4px); border-color:var(--border-hi); }
.game-tile:hover::before { opacity:1; }
.game-tile.active { background:var(--surface-hi); border-color:rgba(124,92,255,.55); box-shadow:var(--shadow-soft); }
.game-icon { font-size:34px; margin-bottom:10px; display:inline-block; animation:float 4s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.game-name { font-weight:700; font-size:15px; margin-bottom:3px; }
.game-count { font-size:12px; color:var(--text-faint); }

/* ── Filters ── */
.filters { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:12px; margin-bottom:22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); }
.search-box { flex:1; min-width:200px; display:flex; align-items:center; gap:8px; padding:8px 12px; background:rgba(0,0,0,.35); border:1px solid var(--border); border-radius:10px; transition:border-color var(--t); }
.search-box:focus-within { border-color:var(--accent); }
.search-box input { background:none; border:none; outline:none; color:var(--text); flex:1; }
.search-box input::placeholder { color:var(--text-faint); }
select.select { padding:9px 12px; background:rgba(0,0,0,.35); border:1px solid var(--border); border-radius:10px; color:var(--text); outline:none; cursor:pointer; }
select.select:focus { border-color:var(--accent); }

/* ── Account cards ── */
.accounts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.account-card { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; display:flex; flex-direction:column; cursor:pointer; overflow:hidden; transition:transform var(--t),border-color var(--t),background var(--t); }
.account-card::after { content:''; position:absolute; inset:-1px; border-radius:var(--r-lg); background:linear-gradient(135deg,transparent,rgba(124,92,255,.4),transparent); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; -webkit-mask-composite:xor; opacity:0; transition:opacity var(--t); pointer-events:none; }
.account-card:hover { transform:translateY(-4px); background:var(--surface-hi); }
.account-card:hover::after { opacity:1; }
.card-tag { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; background:rgba(124,92,255,.15); color:#b9a8ff; margin-bottom:11px; align-self:flex-start; }
.featured-badge { position:absolute; top:12px; right:12px; background:linear-gradient(135deg,var(--accent-warm),#ff8c5a); font-size:10px; font-weight:700; padding:3px 9px; border-radius:999px; letter-spacing:.06em; text-transform:uppercase; }
.card-title { font-weight:700; font-size:16px; margin-bottom:5px; line-height:1.3; }
.card-desc { color:var(--text-dim); font-size:13px; line-height:1.5; flex:1; margin-bottom:14px; }
.card-foot { display:flex; justify-content:space-between; align-items:center; padding-top:12px; border-top:1px solid var(--border); gap:10px; }
.price-usd { font-size:20px; font-weight:800; letter-spacing:-.02em; background:linear-gradient(135deg,var(--accent-2),#5fffe5); -webkit-background-clip:text; background-clip:text; color:transparent; }
.price-robux { font-size:12px; color:var(--text-faint); margin-top:1px; }

/* ── Detail page ── */
.detail { display:grid; grid-template-columns:1fr 400px; gap:28px; padding:28px 0; }
@media(max-width:900px){.detail{grid-template-columns:1fr}}
.detail-main { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:30px; }
.detail-side { align-self:start; position:sticky; top:76px; display:flex; flex-direction:column; gap:14px; }
.detail h1 { font-size:30px; letter-spacing:-.03em; margin-bottom:10px; }

/* ── Purchase box ── */
.purchase-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; }
.purchase-box .big-price { font-size:38px; font-weight:800; letter-spacing:-.03em; background:linear-gradient(135deg,var(--accent-2),#5fffe5); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pay-methods { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.pay-btn { display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:12px; border:1.5px solid var(--border); cursor:pointer; transition:border-color var(--t),background var(--t),transform var(--t); font-weight:600; font-size:14px; }
.pay-btn:hover { border-color:var(--border-hi); background:var(--surface-hi); transform:translateY(-1px); }
.pay-btn.stripe  { border-color:rgba(100,210,255,.3); }
.pay-btn.paypal  { border-color:rgba(0,112,240,.3); }
.pay-btn.robux   { border-color:rgba(124,92,255,.4); }
.pay-badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; margin-left:auto; }
.pay-badge.cheap { background:rgba(74,222,128,.15); color:var(--success); }
.out-of-stock { text-align:center; padding:16px; color:var(--text-faint); font-size:14px; }

/* ── Tabs ── */
.tab-row { display:flex; gap:4px; padding:4px; background:var(--bg-2); border-radius:12px; margin-bottom:20px; width:fit-content; border:1px solid var(--border); }
.tab-row button { padding:8px 16px; border-radius:9px; font-weight:500; font-size:13px; color:var(--text-dim); transition:color var(--t),background var(--t); }
.tab-row button.on { background:var(--surface-hi); color:var(--text); }

/* ── Q&A ── */
.qa-form { margin-bottom:22px; display:flex; gap:10px; }
.qa-form input { flex:1; padding:10px 14px; background:rgba(0,0,0,.3); border:1px solid var(--border); border-radius:10px; color:var(--text); outline:none; }
.qa-form input:focus { border-color:var(--accent); }
.qa-item { padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); margin-bottom:12px; }
.qa-q { font-weight:600; font-size:14px; margin-bottom:8px; }
.qa-q span { color:var(--text-faint); font-size:12px; font-weight:400; margin-left:8px; }
.qa-a { font-size:14px; color:var(--text-dim); background:rgba(124,92,255,.08); padding:10px 12px; border-radius:8px; border-left:3px solid var(--accent); line-height:1.5; }
.qa-unanswered { font-size:13px; color:var(--text-faint); font-style:italic; }
.qa-answer-form { display:flex; gap:8px; margin-top:10px; }
.qa-answer-form input { flex:1; padding:8px 12px; background:rgba(0,0,0,.3); border:1px solid var(--border); border-radius:8px; color:var(--text); outline:none; font-size:13px; }

/* ── Chat ── */
.chat-widget { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; height:460px; }
.chat-head { padding:13px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.2); }
.chat-pulse { width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 8px var(--success); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 50%{opacity:.4} }
.chat-body { flex:1; padding:14px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.chat-body::-webkit-scrollbar { width:5px; }
.chat-body::-webkit-scrollbar-thumb { background:var(--border-hi); border-radius:3px; }
.bubble { max-width:80%; padding:9px 14px; border-radius:14px; font-size:14px; line-height:1.4; word-wrap:break-word; animation:bubbleIn 220ms cubic-bezier(.2,.8,.2,1); }
@keyframes bubbleIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.bubble.mine   { align-self:flex-end; background:linear-gradient(135deg,var(--accent),#5b3eef); color:#fff; border-bottom-right-radius:4px; }
.bubble.theirs { align-self:flex-start; background:var(--surface-hi); border-bottom-left-radius:4px; }
.bubble-meta { font-size:10px; color:var(--text-faint); margin:2px 4px; }
.chat-typing { font-size:12px; color:var(--text-faint); padding:0 14px 4px; min-height:16px; }
.chat-input-row { display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--border); background:rgba(0,0,0,.25); }
.chat-input-row input { flex:1; padding:9px 13px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:999px; color:var(--text); outline:none; }
.chat-input-row input:focus { border-color:var(--accent); }

/* ── Checkout page ── */
.checkout-grid { display:grid; grid-template-columns:1fr 420px; gap:28px; padding:32px 0; }
@media(max-width:900px){.checkout-grid{grid-template-columns:1fr}}
.checkout-main { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:28px; }
.checkout-main h2 { font-size:22px; font-weight:700; margin-bottom:20px; }
#stripe-payment-element { min-height:80px; }
.checkout-side { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px; align-self:start; position:sticky; top:76px; }
.order-summary-row { display:flex; justify-content:space-between; font-size:14px; padding:8px 0; border-bottom:1px solid var(--border); }
.order-summary-row:last-child { border-bottom:none; }
.order-summary-row.total { font-weight:700; font-size:16px; }
.robux-form .field { margin-bottom:14px; }
.robux-form label { display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px; font-weight:500; }
.robux-form input { width:100%; padding:10px 13px; background:rgba(0,0,0,.3); border:1px solid var(--border); border-radius:10px; color:var(--text); outline:none; }
.robux-form input:focus { border-color:var(--accent); }

/* ── Success page ── */
.success-page { max-width:520px; margin:80px auto; text-align:center; }
.success-icon { font-size:64px; margin-bottom:20px; animation:popIn 500ms cubic-bezier(.2,.8,.2,1); }
@keyframes popIn { from{transform:scale(.5);opacity:0} to{transform:scale(1);opacity:1} }
.success-page h1 { font-size:32px; font-weight:800; margin-bottom:10px; }
.success-page p { color:var(--text-dim); margin-bottom:24px; }

/* ── Orders page ── */
.order-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:18px; margin-bottom:14px; }
.order-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:8px; }
.order-title { font-weight:700; font-size:15px; }
.status-badge { font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.06em; }
.status-pending   { background:rgba(251,191,36,.15);  color:var(--warning); }
.status-paid      { background:rgba(74,222,128,.15); color:var(--success); }
.status-failed    { background:rgba(255,68,102,.15); color:var(--danger); }
.status-refunded  { background:rgba(255,255,255,.06); color:var(--text-faint); }
.status-delivered { background:rgba(0,224,199,.12); color:var(--accent-2); }

/* ── Modal ── */
.modal-backdrop { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:none; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity var(--t); }
.modal-backdrop.open { display:flex; opacity:1; }
.modal { background:var(--bg-1); border:1px solid var(--border-hi); border-radius:var(--r-xl); padding:32px; width:100%; max-width:440px; box-shadow:var(--shadow-hard); transform:translateY(10px) scale(.97); opacity:0; transition:transform var(--t),opacity var(--t); }
.modal-backdrop.open .modal { transform:translateY(0) scale(1); opacity:1; }
.modal h3 { font-size:21px; font-weight:700; margin-bottom:5px; letter-spacing:-.02em; }
.modal p.modal-sub { color:var(--text-dim); font-size:14px; margin-bottom:20px; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px; font-weight:500; }
.field input,.field textarea,.field select { width:100%; padding:10px 13px; background:rgba(0,0,0,.3); border:1px solid var(--border); border-radius:10px; color:var(--text); outline:none; transition:border-color var(--t),background var(--t); resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--accent); background:rgba(0,0,0,.5); }
.tab-toggle { display:flex; gap:4px; padding:4px; background:rgba(0,0,0,.3); border-radius:10px; margin-bottom:18px; }
.tab-toggle button { flex:1; padding:8px; border-radius:7px; font-size:14px; font-weight:500; color:var(--text-dim); transition:color var(--t),background var(--t); }
.tab-toggle button.on { background:var(--surface-hi); color:var(--text); }
.error-msg { color:var(--danger); font-size:13px; margin-top:8px; min-height:18px; }
.modal-foot { display:flex; gap:10px; margin-top:10px; }
.modal-foot .btn { flex:1; }

/* ── Admin / Seller layout ── */
.panel-shell { display:grid; grid-template-columns:230px 1fr; min-height:calc(100vh - 62px); }
@media(max-width:860px){.panel-shell{grid-template-columns:1fr}}
.panel-side { padding:20px 14px; border-right:1px solid var(--border); background:var(--bg-1); position:sticky; top:62px; height:calc(100vh - 62px); overflow-y:auto; }
.panel-side .nav-link { display:flex; align-items:center; gap:8px; margin-bottom:3px; padding:10px 12px; border-radius:10px; font-size:14px; }
.panel-main { padding:30px; overflow-x:auto; }
.panel-main h2 { font-size:22px; font-weight:700; letter-spacing:-.02em; margin-bottom:6px; }
.panel-main .sub { color:var(--text-dim); font-size:14px; margin-bottom:24px; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:26px; }
.stat-card { padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); transition:border-color var(--t),background var(--t); }
.stat-card:hover { background:var(--surface-hi); border-color:var(--border-hi); }
.stat-card .label { font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.stat-card .value { font-size:26px; font-weight:800; letter-spacing:-.02em; }

/* Table */
.table-wrap { overflow-x:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { padding:11px 14px; text-align:left; border-bottom:1px solid var(--border); }
th { font-weight:600; font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; background:rgba(0,0,0,.2); white-space:nowrap; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,255,255,.02); }
.inline-input { width:80px; padding:5px 8px; background:rgba(0,0,0,.3); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:13px; }
.inline-input:focus { border-color:var(--accent); outline:none; }
td .actions { display:flex; gap:6px; }

/* Inbox */
.inbox-grid { display:grid; grid-template-columns:300px 1fr; gap:14px; height:580px; }
@media(max-width:860px){.inbox-grid{grid-template-columns:1fr;height:auto}}
.inbox-list { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); overflow-y:auto; }
.inbox-item { padding:13px 14px; border-bottom:1px solid var(--border); cursor:pointer; transition:background var(--t); }
.inbox-item:hover { background:var(--surface-hi); }
.inbox-item.active { background:var(--surface-hi); border-left:3px solid var(--accent); }
.inbox-name { font-weight:600; font-size:14px; margin-bottom:3px; display:flex; align-items:center; gap:6px; }
.inbox-preview { font-size:12px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.unread-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.inbox-pane { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); display:flex; flex-direction:column; overflow:hidden; }

/* ── Toast ── */
#toasts { position:fixed; bottom:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:9px; pointer-events:none; }
.toast { padding:12px 18px; min-width:240px; background:var(--bg-2); border:1px solid var(--border-hi); border-radius:12px; font-size:14px; box-shadow:var(--shadow-hard); animation:toastIn 300ms cubic-bezier(.2,.8,.2,1); pointer-events:auto; }
.toast.success { border-left:3px solid var(--success); }
.toast.error   { border-left:3px solid var(--danger); }
.toast.info    { border-left:3px solid var(--accent); }
@keyframes toastIn { from{transform:translateX(16px);opacity:0} to{transform:translateX(0);opacity:1} }

/* ── Utilities ── */
.reveal { opacity:0; transform:translateY(14px); transition:opacity 600ms ease,transform 600ms ease; }
.reveal.in { opacity:1; transform:translateY(0); }
.page-anim { animation:pageIn 480ms cubic-bezier(.2,.8,.2,1); }
@keyframes pageIn { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:translateY(0)} }
.empty { padding:56px 20px; text-align:center; color:var(--text-faint); }
.empty-icon { font-size:38px; margin-bottom:10px; opacity:.6; }
.spinner { width:22px; height:22px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .75s linear infinite; margin:20px auto; }
.divider { border:none; border-top:1px solid var(--border); margin:20px 0; }
.badge { display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; }
.badge-accent { background:rgba(124,92,255,.18); color:#b9a8ff; }
.badge-seller { background:rgba(0,224,199,.12); color:var(--accent-2); }
.seller-chip { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--text-faint); padding:3px 9px; border:1px solid var(--border); border-radius:999px; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.footer { margin-top:80px; padding:36px 0; border-top:1px solid var(--border); color:var(--text-faint); font-size:13px; text-align:center; }

/* ── NEW: Game cards with color accent + banner ── */
.game-tile { transition: transform var(--t), border-color var(--t), box-shadow var(--t); }
.game-tile .game-banner {
  position: absolute; inset: 0; border-radius: var(--r-lg);
  background-size: cover; background-position: center;
  opacity: 0.12; transition: opacity var(--t);
}
.game-tile:hover .game-banner { opacity: 0.22; }
.game-tile.active .game-banner { opacity: 0.28; }
.game-accent-bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--game-color, var(--accent));
}

/* ── NEW: Advanced filter panel ── */
.filter-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 16px; margin-bottom: 22px;
}
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filter-row:last-child { margin-bottom: 0; }
.filter-label { font-size: 12px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; width: 72px; flex-shrink: 0; }
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); color: var(--text-dim);
  cursor: pointer; transition: all var(--t); background: rgba(0,0,0,.25);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.on { background: rgba(124,92,255,.18); border-color: var(--accent); color: #c4b5fd; }
.price-range { display: flex; gap: 8px; align-items: center; }
.price-range input { width: 90px; padding: 6px 10px; background: rgba(0,0,0,.3); border: 1px solid var(--border); border-radius: 8px; color: var(--text); outline: none; font-size: 13px; }
.price-range input:focus { border-color: var(--accent); }
.tag-cloud { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-pill {
  padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: rgba(124,92,255,.1); color: #b9a8ff; border: 1px solid rgba(124,92,255,.2);
  cursor: pointer; transition: all var(--t);
}
.tag-pill:hover { background: rgba(124,92,255,.25); }
.tag-pill.on { background: rgba(124,92,255,.35); border-color: var(--accent); }

/* ── NEW: Auction countdown ── */
.auction-badge {
  position: absolute; top: 12px; right: 12px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  letter-spacing: .05em; animation: pulseBadge 2s ease-in-out infinite;
  display: flex; align-items: center; gap: 5px;
}
@keyframes pulseBadge { 50% { box-shadow: 0 0 14px rgba(239,68,68,.6); } }
.countdown {
  font-size: 12px; font-weight: 700;
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.25);
  color: #fca5a5; border-radius: 8px; padding: 5px 10px; margin-top: 8px;
  display: inline-flex; align-items: center; gap: 5px;
}
.countdown.urgent { background: rgba(239,68,68,.2); color: #f87171; animation: pulseBadge 1s infinite; }
.bid-box {
  background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.2);
  border-radius: var(--r-md); padding: 14px; margin-top: 12px;
}
.current-bid { font-size: 28px; font-weight: 800; color: var(--warning); letter-spacing: -.02em; }
.bid-input-row { display: flex; gap: 8px; margin-top: 10px; }
.bid-input-row input { flex: 1; padding: 10px 13px; background: rgba(0,0,0,.3); border: 1px solid rgba(251,191,36,.3); border-radius: 10px; color: var(--text); outline: none; }
.bid-input-row input:focus { border-color: var(--warning); }
.bids-list { margin-top: 12px; max-height: 180px; overflow-y: auto; }
.bid-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.bid-row:last-child { border-bottom: none; }

/* ── NEW: Wishlist heart button ── */
.wishlist-btn {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.45); backdrop-filter: blur(6px);
  display: grid; place-items: center; font-size: 15px;
  border: 1px solid var(--border); cursor: pointer;
  transition: transform var(--t), background var(--t), border-color var(--t);
  z-index: 2;
}
.wishlist-btn:hover { transform: scale(1.15); background: rgba(255,68,102,.2); border-color: var(--danger); }
.wishlist-btn.saved { background: rgba(255,68,102,.25); border-color: var(--danger); }

/* ── NEW: Star rating ── */
.stars { display: inline-flex; gap: 2px; }
.star { color: var(--text-faint); font-size: 16px; cursor: pointer; transition: color var(--t); }
.star.on { color: var(--warning); }
.star:hover { color: var(--warning); }
.rating-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); }
.rating-big { font-size: 18px; font-weight: 700; color: var(--warning); }

/* ── NEW: Review card ── */
.review-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; margin-bottom: 10px; }
.review-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.review-stars { color: var(--warning); font-size: 14px; }

/* ── NEW: Discount code input ── */
.coupon-row { display: flex; gap: 8px; margin-top: 12px; }
.coupon-row input { flex: 1; padding: 9px 13px; background: rgba(0,0,0,.3); border: 1px solid var(--border); border-radius: 10px; color: var(--text); outline: none; font-size: 13px; text-transform: uppercase; }
.coupon-row input:focus { border-color: var(--accent-2); }
.coupon-applied { margin-top: 8px; padding: 8px 12px; background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.2); border-radius: 8px; font-size: 13px; color: var(--success); }
.coupon-error { margin-top: 6px; font-size: 12px; color: var(--danger); }

/* ── NEW: Notification bell in nav ── */
.notif-bell { position: relative; }
.notif-bubble {
  position: absolute; top: -3px; right: -3px;
  background: var(--danger); color: #fff; font-size: 9px; font-weight: 800;
  width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  animation: pulseBadge 2s infinite;
}

/* ── NEW: Seller profile card on listing ── */
.seller-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px; display: flex; gap: 12px; align-items: center;
}
.seller-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; font-size: 18px; font-weight: 800; flex-shrink: 0;
}
.seller-info { flex: 1; }
.seller-name { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.seller-meta { font-size: 12px; color: var(--text-faint); }

/* ── NEW: View count ── */
.view-count { font-size: 12px; color: var(--text-faint); display: flex; align-items: center; gap: 4px; }

/* ── NEW: Tags on cards ── */
.tag-list { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.tag { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.05); color: var(--text-faint); border: 1px solid var(--border); }

/* ── NEW: Empty auction state ── */
.auction-ended { padding: 16px; text-align: center; background: rgba(239,68,68,.06); border-radius: var(--r-md); border: 1px solid rgba(239,68,68,.15); color: var(--danger); font-size: 14px; }

/* ── NEW: Search autocomplete dropdown ── */
.search-wrap { position: relative; flex: 1; min-width: 220px; }
.search-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg-2); border: 1px solid var(--border-hi);
  border-radius: var(--r-md); z-index: 40; overflow: hidden;
  box-shadow: var(--shadow-hard);
}
.search-dropdown-item { padding: 10px 14px; font-size: 14px; cursor: pointer; transition: background var(--t); }
.search-dropdown-item:hover { background: var(--surface-hi); }

/* ── NEW: Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }

/* ── Admin: discount codes tab ── */
.code-list .code-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.code-badge { font-size: 13px; font-weight: 800; padding: 4px 12px; border-radius: 8px; background: rgba(124,92,255,.18); color: #c4b5fd; font-family: monospace; letter-spacing: .05em; }
.code-meta { font-size: 12px; color: var(--text-faint); flex: 1; }

/* ── Responsive tweaks ── */
@media (max-width: 640px) {
  .hero h1 { font-size: 30px; }
  .games-grid { grid-template-columns: repeat(2, 1fr); }
  .accounts-grid { grid-template-columns: 1fr; }
  .panel-shell { grid-template-columns: 1fr; }
  .panel-side { height: auto; position: static; }
  .inbox-grid { grid-template-columns: 1fr; height: auto; }
  .checkout-grid { grid-template-columns: 1fr; }
  .detail { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
}