/* ── Reset & Root ───────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#080808;--fg:#e8e8e4;--dim:#4a4a4a;--border:#1e1e1e;--border2:#2a2a2a;
  --green:#3ddc84;--red:#ff6b6b;--yellow:#ffd93d;--blue:#6bceff;--purple:#c084fc;--orange:#fb923c;
  --font:'Space Mono',monospace;--ease:cubic-bezier(.16,1,.3,1);--back:cubic-bezier(.34,1.56,.64,1)
}
html,body{width:100%;min-height:100%;background:var(--bg);color:var(--fg);font-family:var(--font);cursor:none;overflow-x:hidden}
a{color:inherit;text-decoration:none}

/* ── Custom cursor ──────────────────────────────────── */
#cur{position:fixed;width:7px;height:7px;background:var(--fg);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .2s,height .2s}
#cur.h{width:14px;height:14px}
#cur-ring{position:fixed;width:30px;height:30px;border:1px solid rgba(232,232,228,.4);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .35s var(--back),height .35s var(--back)}
#cur-ring.h{width:56px;height:56px;opacity:.3}
.rip{position:fixed;border-radius:50%;background:rgba(232,232,228,.08);pointer-events:none;z-index:9997;transform:translate(-50%,-50%) scale(0);animation:rip .6s var(--ease) forwards}
@keyframes rip{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
#fog{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ── Nav ────────────────────────────────────────────── */
.topnav{position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:20px 60px;border-bottom:1px solid var(--border)}
.nav-logo{font-size:14px;font-weight:700;letter-spacing:-.01em}
.nav-logo span{color:var(--dim);font-weight:400;font-size:12px}
.nav-links{display:flex;gap:20px;align-items:center;font-size:11px;letter-spacing:.06em}
.nav-links a:hover{color:var(--dim)}
.notif-badge{background:var(--red);color:#fff;font-size:9px;padding:1px 5px;border-radius:10px;margin-left:3px}

/* ── Layout ─────────────────────────────────────────── */
#page-wrap{position:relative;z-index:1;min-height:calc(100vh - 120px);padding:0 60px 60px}
.page-hero{padding:44px 0 32px;border-bottom:1px solid var(--border);margin-bottom:40px}
.page-hero h1{font-size:clamp(28px,4vw,56px);font-weight:700;letter-spacing:-.03em;line-height:.92}
.page-hero p{font-size:11px;color:var(--dim);margin-top:12px;line-height:2;max-width:500px}
.label-sm{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:10px}

/* ── Buttons ────────────────────────────────────────── */
.btn,.btn-outline,.btn-green,.btn-red,.btn-yellow,.btn-blue,.btn-purple{
  display:inline-block;background:none;border:1px solid var(--border);color:var(--fg);
  font-family:var(--font);font-size:10px;letter-spacing:.12em;padding:9px 18px;
  cursor:none;transition:border-color .3s,color .3s,background .3s;text-transform:uppercase;
}
.btn:hover,.btn-outline:hover{border-color:rgba(232,232,228,.5)}
.btn-green{border-color:var(--green);color:var(--green)}.btn-green:hover{background:rgba(61,220,132,.07)}
.btn-red{border-color:var(--red);color:var(--red)}.btn-red:hover{background:rgba(255,107,107,.07)}
.btn-yellow{border-color:var(--yellow);color:var(--yellow)}.btn-yellow:hover{background:rgba(255,217,61,.07)}
.btn-blue{border-color:var(--blue);color:var(--blue)}.btn-blue:hover{background:rgba(107,206,255,.07)}
.btn-purple{border-color:var(--purple);color:var(--purple)}.btn-purple:hover{background:rgba(192,132,252,.07)}
.btn-full{width:100%;text-align:center;display:block}

/* ── Forms ──────────────────────────────────────────── */
.form-box{border:1px solid var(--border);padding:32px;max-width:480px;margin:40px auto;animation:fadeUp .5s var(--ease)}
.form-box h2{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.form-box p{font-size:11px;color:var(--dim);margin-bottom:24px;line-height:1.8}
.field{margin-bottom:16px}
.field label{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;background:rgba(255,255,255,.03);border:1px solid var(--border2);
  color:var(--fg);font-family:var(--font);font-size:11px;padding:10px 14px;
  outline:none;transition:border-color .25s;cursor:none;letter-spacing:.02em
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(232,232,228,.35);background:rgba(255,255,255,.05)}
.field select option{background:#111}
.field textarea{resize:vertical;min-height:80px;line-height:1.8}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-error{font-size:9px;color:var(--red);margin-top:4px;letter-spacing:.06em}
.form-footer{font-size:11px;color:var(--dim);margin-top:20px;text-align:center}
.form-footer a{color:var(--fg)}

/* ── Flash messages ─────────────────────────────────── */
.flash{position:relative;z-index:10;padding:12px 60px;font-size:11px;letter-spacing:.04em;border-bottom:1px solid}
.flash-ok{background:rgba(61,220,132,.08);border-color:rgba(61,220,132,.3);color:var(--green)}
.flash-err{background:rgba(255,107,107,.08);border-color:rgba(255,107,107,.3);color:var(--red)}

/* ── Item cards ─────────────────────────────────────── */
.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:24px}
.item-card{border:1px solid var(--border);background:rgba(255,255,255,.01);transition:border-color .25s,background .25s;animation:fadeUp .4s var(--ease)}
.item-card:hover{border-color:rgba(232,232,228,.2);background:rgba(255,255,255,.025)}
.item-img{width:100%;height:180px;object-fit:cover;display:block;background:var(--border);border-bottom:1px solid var(--border)}
.item-img-placeholder{width:100%;height:180px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:36px}
.item-body{padding:14px}
.item-title{font-size:12px;font-weight:700;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-price{font-size:16px;font-weight:700;color:var(--green);margin-bottom:6px}
.item-meta{display:flex;justify-content:space-between;font-size:9px;color:var(--dim);letter-spacing:.04em}
.item-cond{padding:2px 7px;border:1px solid var(--border2);font-size:9px;letter-spacing:.08em;display:inline-block;margin-bottom:8px}
.cond-new{border-color:var(--green);color:var(--green)}
.cond-like_new{border-color:var(--blue);color:var(--blue)}
.cond-good{border-color:var(--yellow);color:var(--yellow)}
.cond-fair{border-color:var(--orange);color:var(--orange)}
.cond-poor{border-color:var(--red);color:var(--red)}

/* ── Stats / Dashboard ──────────────────────────────── */
.stats-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-bottom:36px}
.stat-box{border:1px solid var(--border);padding:24px;animation:fadeUp .4s var(--ease)}
.stat-val{font-size:36px;font-weight:700;letter-spacing:-.03em}
.stat-label{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:8px}
.stat-box.green .stat-val{color:var(--green)}
.stat-box.blue  .stat-val{color:var(--blue)}
.stat-box.yellow .stat-val{color:var(--yellow)}
.stat-box.red   .stat-val{color:var(--red)}

/* ── Table ──────────────────────────────────────────── */
.data-table{width:100%;border-collapse:collapse;font-size:11px;margin-top:16px}
.data-table th{border-bottom:1px solid var(--border);padding:10px 14px;text-align:left;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:400}
.data-table td{border-bottom:1px solid var(--border);padding:12px 14px;vertical-align:middle}
.data-table tr:hover td{background:rgba(255,255,255,.02)}
.badge{font-size:9px;padding:3px 9px;border:1px solid;letter-spacing:.08em;display:inline-block}
.badge-green{border-color:var(--green);color:var(--green)}
.badge-blue{border-color:var(--blue);color:var(--blue)}
.badge-yellow{border-color:var(--yellow);color:var(--yellow)}
.badge-red{border-color:var(--red);color:var(--red)}
.badge-dim{border-color:var(--dim);color:var(--dim)}

/* ── Section / Panel ────────────────────────────────── */
.section-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.section-hdr h2{font-size:14px;font-weight:700;letter-spacing:-.01em}
.panel{border:1px solid var(--border);padding:24px;margin-bottom:24px;animation:fadeUp .4s var(--ease)}
.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}

/* ── Filters ────────────────────────────────────────── */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;align-items:center;padding:16px 0;border-bottom:1px solid var(--border)}
.filter-bar input,.filter-bar select{background:rgba(255,255,255,.03);border:1px solid var(--border2);color:var(--fg);font-family:var(--font);font-size:11px;padding:8px 12px;outline:none;cursor:none}
.filter-bar input:focus,.filter-bar select:focus{border-color:rgba(232,232,228,.35)}
.filter-bar select option{background:#111}

/* ── Upgrade / Pricing ──────────────────────────────── */
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:700px;margin:40px auto}
.price-card{border:1px solid var(--border);padding:32px;text-align:center}
.price-card.featured{border-color:var(--green)}
.price-card h3{font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.price-val{font-size:48px;font-weight:700;letter-spacing:-.04em;color:var(--green)}
.price-per{font-size:10px;color:var(--dim);margin-bottom:24px}
.price-features{list-style:none;text-align:left;margin-bottom:28px;font-size:11px;line-height:2.2;color:var(--dim)}
.price-features li::before{content:'+ ';color:var(--green)}

/* ── Item detail ────────────────────────────────────── */
.item-detail{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:32px}
.item-detail-img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--border)}
.item-detail-placeholder{width:100%;aspect-ratio:1;background:rgba(255,255,255,.03);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:80px}
.item-detail h1{font-size:clamp(22px,3vw,36px);font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.item-detail-price{font-size:32px;font-weight:700;color:var(--green);margin-bottom:20px}
.item-detail-desc{font-size:12px;color:var(--dim);line-height:2;margin-bottom:24px;border-top:1px solid var(--border);padding-top:16px}

/* ── Footer ─────────────────────────────────────────── */
.site-footer{position:relative;z-index:1;border-top:1px solid var(--border);padding:24px 60px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;font-size:11px}
.footer-logo{font-weight:700;font-size:13px}
.footer-copy{color:var(--dim)}
.footer-links{display:flex;gap:20px;color:var(--dim)}

/* ── Animations ─────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes nodeIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}

/* ── Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2)}

/* ── Responsive ─────────────────────────────────────── */
@media(max-width:768px){
  .topnav,#page-wrap,.site-footer{padding-left:20px;padding-right:20px}
  .item-detail{grid-template-columns:1fr}
  .dashboard-grid,.pricing-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr 1fr}
}