:root {
  color-scheme: dark;
  --bg: #050507;
  --panel: rgba(12,17,27,.92);
  --panel2: rgba(18,23,37,.88);
  --line: rgba(255,255,255,.13);
  --text: #f8fafc;
  --soft: #cbd5e1;
  --muted: #8492a6;
  --cyan: #25d7f2;
  --blue: #087cff;
  --violet: #8f1dff;
  --green: #34d399;
  --amber: #f59e0b;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 75% 12%, rgba(37,215,242,.16), transparent 28rem),
    radial-gradient(circle at 8% 78%, rgba(143,29,255,.12), transparent 32rem),
    linear-gradient(135deg,#050507,#08121f 52%,#03130f);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }
button,input,select,textarea { font: inherit; }
.topbar,.market-app { width: min(1500px, calc(100% - 32px)); margin-inline: auto; }
.topbar { min-height: 72px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand,nav,.hero-actions,.toolbar,.panel-head,.tag-row,.card-actions,.form-grid-2,.chip-list,.stats { display:flex; align-items:center; }
.brand { gap:12px; }
.brand img { width:42px; height:42px; filter: drop-shadow(0 0 18px rgba(37,215,242,.34)); }
.brand span { display:grid; }
.brand small,.kicker { color:var(--cyan); font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
nav { gap:8px; flex-wrap:wrap; }
nav a,.primary,.ghost,.toolbar select,.close { min-height:40px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-weight:850; }
nav a { padding:0 12px; color:var(--soft); }
nav a:hover,.ghost:hover { background:rgba(255,255,255,.08); color:#fff; }
.market-app { display:grid; gap:14px; padding-bottom:42px; }
.hero,.panel,.product-card,.detail-card,.drawer-card { border:1px solid var(--line); border-radius:8px; background:linear-gradient(135deg,rgba(37,215,242,.06),rgba(143,29,255,.05)),var(--panel); box-shadow:0 20px 70px rgba(0,0,0,.24); }
.hero { min-height:330px; display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:22px; align-items:center; padding:clamp(22px,4vw,44px); }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:900px; margin-bottom:14px; font-size:clamp(42px,6vw,78px); line-height:.9; letter-spacing:0; }
h2 { margin:4px 0 0; font-size:clamp(24px,3vw,38px); line-height:1; }
p { color:var(--soft); line-height:1.65; }
.hero-actions { gap:10px; flex-wrap:wrap; }
.summary-strip { display:grid; gap:10px; }
.summary-strip article,.compare-item { border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:12px; background:rgba(255,255,255,.055); }
.toolbar { gap:10px; align-items:end; flex-wrap:wrap; padding:14px; }
.searchbox { flex:1 1 360px; display:grid; gap:6px; }
input,select,textarea { width:100%; min-height:42px; border:1px solid rgba(255,255,255,.13); border-radius:8px; padding:9px 10px; color:var(--text); background:rgba(255,255,255,.065); outline:none; }
textarea { min-height:120px; resize:vertical; }
input:focus,select:focus,textarea:focus { border-color:rgba(37,215,242,.55); box-shadow:0 0 0 3px rgba(37,215,242,.12); }
.primary,.ghost { border:0; padding:0 14px; color:#fff; cursor:pointer; }
.primary { background:linear-gradient(135deg,var(--violet),var(--blue) 54%,#0dbca4); }
.ghost { border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.065); }
.market-grid { display:grid; grid-template-columns:290px minmax(0,1fr); gap:14px; align-items:start; }
.panel { padding:16px; }
.side { position:sticky; top:12px; display:grid; gap:14px; }
hr { width:100%; border:0; border-top:1px solid rgba(255,255,255,.1); }
.panel-head { justify-content:space-between; gap:12px; margin-bottom:12px; }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.product-card { padding:14px; display:grid; gap:9px; align-content:start; }
.product-card img,.detail-media img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.06); }
.price { color:#fff; font-size:24px; font-weight:950; }
.seller { color:var(--muted); font-size:13px; }
.tag-row,.chip-list { gap:6px; flex-wrap:wrap; }
.tag,.chip { padding:5px 8px; border-radius:8px; color:var(--soft); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); font-size:11px; font-weight:850; cursor:pointer; }
.chip.active { color:#fff; border-color:rgba(37,215,242,.45); background:rgba(37,215,242,.16); }
.card-actions { gap:8px; flex-wrap:wrap; margin-top:4px; }
.compare-box { display:grid; gap:8px; }
.compare-item strong { display:block; }
.product-detail.hidden { display:none; }
.product-detail { display:block; }
.detail-card { display:grid; grid-template-columns:minmax(0,.85fr) minmax(320px,.5fr); gap:18px; padding:16px; }
.detail-info { display:grid; gap:10px; align-content:start; }
.stats { gap:8px; flex-wrap:wrap; }
.stats span { padding:8px 10px; border-radius:8px; background:rgba(255,255,255,.07); color:var(--soft); font-size:13px; }
.publish-drawer { position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.62); z-index:60; }
.publish-drawer.open { display:flex; }
.drawer-card { width:min(680px,100%); max-height:calc(100vh - 36px); overflow:auto; padding:18px; position:relative; }
.close { position:absolute; right:12px; top:12px; width:38px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.08); color:#fff; cursor:pointer; font-size:24px; }
.stacked-form { display:grid; gap:11px; }
.stacked-form label { display:grid; gap:6px; color:var(--soft); font-size:13px; font-weight:800; }
.form-grid-2 { gap:10px; }
.form-grid-2 > * { flex:1; }
.toast { position:fixed; left:50%; bottom:18px; transform:translate(-50%,18px); max-width:min(520px,calc(100vw - 28px)); padding:12px 14px; border:1px solid rgba(37,215,242,.28); border-radius:8px; background:rgba(13,18,29,.96); opacity:0; pointer-events:none; transition:.18s ease; z-index:70; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width: 1120px) { .hero,.market-grid,.detail-card { grid-template-columns:1fr; } .side { position:static; } .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 680px) { .topbar { align-items:flex-start; flex-direction:column; } .product-grid,.form-grid-2 { grid-template-columns:1fr; flex-direction:column; } h1 { font-size:clamp(38px,13vw,58px); } }