*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#060609;--bg1:#0B0B12;--bg2:#0F0F18;--bg3:#151520;--bg4:#1C1C28;
  --b0:#16161F;--b1:#1E1E2C;--b2:#28283A;--b3:#343448;--b4:#424258;
  --t0:#F0F0FF;--t1:#C8C8E8;--t2:#7878A8;--t3:#3A3A60;
  --o:#FF9000;--od:#E07A00;--ol:rgba(255,144,0,.1);--om:rgba(255,144,0,.22);--oh:rgba(255,144,0,.45);
  --g:#00D47C;--gd:#00B068;--gl:rgba(0,212,124,.1);--gm:rgba(0,212,124,.22);
  --r:#FF4560;--rl:rgba(255,69,96,.1);--rm:rgba(255,69,96,.22);
  --p:#8B5FFF;--pl:rgba(139,95,255,.1);--pm:rgba(139,95,255,.22);
  --c:#00C8F0;--cl:rgba(0,200,240,.1);
  --a:#F5B800;--al:rgba(245,184,0,.1);
  --rad:10px;--rad2:16px;--rad3:22px;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--t0);font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:'DM Sans',sans-serif}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg1)}::-webkit-scrollbar-thumb{background:var(--b3);border-radius:2px}

/* PAGE SYSTEM */
.page{display:none;animation:pgFade .28s ease;background:var(--bg0)}
.page.active{display:block}
@keyframes pgFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* LAYOUT */
.wrap{max-width:1220px;margin:0 auto;padding:0 22px}
.section{padding:80px 0}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.fac{display:flex;align-items:center;gap:10px}
.fsb{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* 3D ICON ANIMATIONS */
@keyframes float3d{0%,100%{transform:translateY(0) rotateY(0deg)}50%{transform:translateY(-6px) rotateY(12deg)}}
@keyframes float3d-slow{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-4px) rotate(3deg)}}
@keyframes spin3d{0%{transform:perspective(180px) rotateY(0)}100%{transform:perspective(180px) rotateY(360deg)}}
@keyframes hover3d{0%,100%{transform:perspective(160px) rotateY(0) scale(1)}33%{transform:perspective(160px) rotateY(-14deg) scale(1.08)}66%{transform:perspective(160px) rotateY(14deg) scale(1.08)}}
@keyframes pulse3d{0%,100%{filter:drop-shadow(0 3px 10px rgba(255,144,0,.25))}50%{filter:drop-shadow(0 5px 18px rgba(255,144,0,.6))}}
.i3d{display:inline-flex;align-items:center;justify-content:center}
.i3d-float{animation:float3d 3.2s ease-in-out infinite}
.i3d-pulse svg{animation:pulse3d 2.2s ease-in-out infinite}
.i3d-spin svg{animation:spin3d 9s linear infinite}
.i3d:hover svg{animation:hover3d .55s ease forwards}

/* TYPOGRAPHY */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--o);margin-bottom:11px}
.eyebrow::before{content:'';width:22px;height:2px;background:linear-gradient(90deg,var(--o),transparent)}
h1.hh{font-family:'Syne',sans-serif;font-weight:900;font-size:clamp(38px,5vw,76px);line-height:1.02;letter-spacing:-.04em}
h2.sh{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(26px,3.2vw,50px);line-height:1.08;letter-spacing:-.03em}
.hi{font-style:normal;color:var(--o)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:var(--rad);font-size:13px;font-weight:700;border:none;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-p{background:linear-gradient(135deg,#FF9000,#E07A00);color:#0a0800;box-shadow:0 3px 16px rgba(255,144,0,.32)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 7px 24px rgba(255,144,0,.48)}
.btn-g{background:transparent;color:var(--t1);border:1px solid var(--b3)}
.btn-g:hover{border-color:var(--b4);background:var(--bg3)}
.btn-r{background:var(--rl);color:var(--r);border:1px solid var(--rm)}
.btn-gr{background:var(--gl);color:var(--g);border:1px solid var(--gm)}
.btn-sm{padding:6px 13px;font-size:11px}
.btn-lg{padding:14px 30px;font-size:15px;border-radius:var(--rad2)}

/* CARDS */
.card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rad2);overflow:hidden}
.card-hd{padding:13px 17px;border-bottom:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between}
.card-t{font-family:'Syne',sans-serif;font-weight:700;font-size:13px;display:flex;align-items:center;gap:7px}
.card-bd{padding:15px 17px}

/* BADGES */
.bx{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:100px;font-size:9px;font-weight:700}
.bx-o{background:var(--ol);color:var(--o);border:1px solid var(--om)}
.bx-g{background:var(--gl);color:var(--g);border:1px solid var(--gm)}
.bx-r{background:var(--rl);color:var(--r);border:1px solid var(--rm)}
.bx-p{background:var(--pl);color:var(--p);border:1px solid var(--pm)}
.bx-a{background:var(--al);color:var(--a);border:1px solid rgba(245,184,0,.28)}
.bx-c{background:var(--cl);color:var(--c);border:1px solid rgba(0,200,240,.22)}

/* NAV */
#nav{position:fixed;top:0;left:0;right:0;z-index:200;height:58px;transition:all .28s}
#nav.scrolled{background:rgba(6,6,9,.93);backdrop-filter:blur(22px);border-bottom:1px solid var(--b0)}
.nav-in{display:flex;align-items:center;height:58px;gap:6px}
.logo{font-family:'Syne',sans-serif;font-weight:900;font-size:21px;display:flex;align-items:center;cursor:pointer;margin-right:14px}
.logo-hub{background:linear-gradient(135deg,var(--o),#FFB800);color:#0a0800;padding:2px 8px;border-radius:7px;margin-left:2px;box-shadow:0 2px 10px rgba(255,144,0,.35)}
.ntab{display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--rad);font-size:12px;font-weight:600;cursor:pointer;transition:all .18s;color:var(--t2);border:none;background:none}
.ntab:hover{background:var(--bg3);color:var(--t1)}
.ntab:hover svg{animation:hover3d .5s ease forwards;filter:drop-shadow(0 2px 6px rgba(255,144,0,.3))}
.ntab.active svg{filter:drop-shadow(0 0 5px rgba(255,144,0,.5))}
.ntab.active{background:var(--ol);color:var(--o)}
.ntab svg{width:16px;height:16px;flex-shrink:0}
.nsep{width:1px;height:20px;background:var(--b2);margin:0 3px}
.nav-links-group{display:flex;align-items:center;gap:2px;flex:1}
.nright{margin-left:auto;display:flex;gap:8px;align-items:center}

/* ── AUTH / USER AREA ── */
/* unauth buttons */
#navAuthBtns{display:flex;gap:8px;align-items:center}
/* auth user block */
#navUser{display:none;align-items:center;gap:6px}

/* XP bar pill */
.nav-xp-pill{
  display:flex;align-items:center;gap:9px;
  background:var(--bg2);border:1px solid var(--b1);
  border-radius:100px;padding:4px 12px 4px 4px;
  cursor:pointer;transition:all .2s;
}
.nav-xp-pill:hover{background:var(--bg3);border-color:var(--b3)}
.nav-xp-pill:hover .nav-xp-bar-fill{filter:brightness(1.2)}
.nav-ava{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--o),#FFB800);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;color:#0a0800;
  flex-shrink:0;position:relative;
}
.nav-ava-ring{
  position:absolute;inset:-2px;border-radius:50%;
  border:1.5px solid var(--o);opacity:.6;
  animation:ringPulse 3s ease-in-out infinite;
}
@keyframes ringPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.8;transform:scale(1.06)}}
.nav-xp-info{display:flex;flex-direction:column;gap:2px}
.nav-xp-label{font-size:10px;font-weight:700;color:var(--o);line-height:1;display:flex;align-items:center;gap:4px}
.nav-xp-bar-wrap{width:72px;height:3px;background:var(--b2);border-radius:2px;overflow:hidden}
.nav-xp-bar-fill{height:100%;background:linear-gradient(90deg,var(--o),#FFB800);border-radius:2px;transition:width .6s ease}

/* Notifications bell */
.nav-bell{
  position:relative;width:34px;height:34px;
  background:var(--bg2);border:1px solid var(--b1);
  border-radius:var(--rad);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;flex-shrink:0;
}
.nav-bell:hover{background:var(--bg3);border-color:var(--b3)}
.nav-bell svg{width:16px;height:16px}
.nav-bell-dot{
  position:absolute;top:5px;right:5px;
  width:7px;height:7px;border-radius:50%;
  background:var(--r);border:1.5px solid var(--bg1);
  animation:bellDot 2.5s ease-in-out infinite;
}
@keyframes bellDot{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
.nav-bell.no-notif .nav-bell-dot{display:none}

/* Active deals badge */
.nav-deals-btn{
  display:flex;align-items:center;gap:6px;
  padding:5px 11px;
  background:var(--gl);border:1px solid var(--gm);
  border-radius:var(--rad);
  font-size:11px;font-weight:700;color:var(--g);
  cursor:pointer;transition:all .2s;
}
.nav-deals-btn:hover{background:var(--gm)}
.nav-deals-count{
  background:var(--g);color:#0a1a0a;
  font-size:10px;font-weight:800;
  padding:1px 5px;border-radius:100px;min-width:16px;text-align:center;
}

/* Mode switcher */
.nav-mode{
  display:flex;background:var(--bg2);border:1px solid var(--b1);
  border-radius:var(--rad);overflow:hidden;
}
.nav-mode-btn{
  padding:5px 10px;font-size:11px;font-weight:700;
  border:none;background:none;color:var(--t2);cursor:pointer;
  transition:all .18s;display:flex;align-items:center;gap:4px;
}
.nav-mode-btn.active{background:var(--o);color:#0a0800}
.nav-mode-btn:not(.active):hover{background:var(--bg3);color:var(--t1)}

/* User dropdown */
.nav-user-drop{
  position:relative;
}
.nav-user-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--bg2);border:1px solid var(--b2);
  border-radius:var(--rad2);min-width:200px;
  box-shadow:0 12px 40px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transform:translateY(-6px) scale(.97);
  transition:all .2s cubic-bezier(.4,0,.2,1);
  z-index:300;overflow:hidden;
}
.nav-user-menu.open{opacity:1;pointer-events:all;transform:none}
.num-header{padding:14px 16px;border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:10px}
.num-ava{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--o),#FFB800);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:#0a0800;flex-shrink:0}
.num-name{font-family:'Syne',sans-serif;font-weight:700;font-size:13px}
.num-level{font-size:10px;color:var(--o);margin-top:1px}
.num-item{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:12px;color:var(--t1);cursor:pointer;transition:background .15s}
.num-item:hover{background:var(--bg3)}
.num-item svg{width:14px;height:14px;opacity:.6;flex-shrink:0}
.num-item .num-badge{margin-left:auto;background:var(--r);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:100px}
.num-sep{height:1px;background:var(--b1);margin:3px 0}
.num-item.danger{color:var(--r)}
.num-item.danger:hover{background:var(--rl)}

/* Notifications dropdown */
.nav-notif-drop{position:relative}
.nav-notif-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--bg2);border:1px solid var(--b2);
  border-radius:var(--rad2);width:300px;
  box-shadow:0 12px 40px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transform:translateY(-6px) scale(.97);
  transition:all .2s cubic-bezier(.4,0,.2,1);
  z-index:300;overflow:hidden;
}
.nav-notif-menu.open{opacity:1;pointer-events:all;transform:none}
.nnm-header{padding:12px 16px;border-bottom:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between}
.nnm-title{font-family:'Syne',sans-serif;font-weight:700;font-size:13px}
.nnm-clear{font-size:11px;color:var(--o);cursor:pointer}
.nnm-clear:hover{text-decoration:underline}
.nnm-item{display:flex;gap:10px;padding:11px 16px;border-bottom:1px solid var(--b0);cursor:pointer;transition:background .15s;position:relative}
.nnm-item:hover{background:var(--bg3)}
.nnm-item:last-child{border-bottom:none}
.nnm-item.unread::before{content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:var(--o)}
.nnm-ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.nnm-text{flex:1;font-size:11px;color:var(--t1);line-height:1.5}
.nnm-time{font-size:9px;color:var(--t3);margin-top:2px}
.nnm-empty{padding:24px 16px;text-align:center;font-size:12px;color:var(--t2)}

/* REVEAL */
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
.rv-left{opacity:0;transform:translateX(-30px);transition:opacity .6s ease,transform .6s ease}
.rv-left.in{opacity:1;transform:none}
.rv-right{opacity:0;transform:translateX(30px);transition:opacity .6s ease,transform .6s ease}
.rv-right.in{opacity:1;transform:none}
.rv-scale{opacity:0;transform:scale(.85);transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.rv-scale.in{opacity:1;transform:scale(1)}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}.d4{transition-delay:.24s}.d5{transition-delay:.30s}.d6{transition-delay:.36s}.d7{transition-delay:.42s}.d8{transition-delay:.48s}

/* ── ENHANCED ANIMATIONS ──────────────────── */

/* Shimmer glow on borders */
@keyframes borderShimmer{
  0%{border-color:var(--b1)}
  50%{border-color:var(--b3)}
  100%{border-color:var(--b1)}
}

/* Gradient text shift */
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.grad-text{background:linear-gradient(90deg,var(--o),#FFD060,var(--o));background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:gradientShift 4s linear infinite}

/* Floating particles bg */
@keyframes particleFloat{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.6}
  90%{opacity:.6}
  100%{transform:translateY(-100vh) translateX(20px);opacity:0}
}

/* Count-up number animation */
@keyframes countPop{
  0%{transform:scale(1)}
  50%{transform:scale(1.15);color:var(--o)}
  100%{transform:scale(1)}
}
.count-pop{animation:countPop .4s ease}

/* Card tilt on hover (3D parallax) */
.tilt-card{transition:transform .3s ease,box-shadow .3s ease;transform-style:preserve-3d;perspective:600px}
.tilt-card:hover{box-shadow:0 12px 40px rgba(0,0,0,.5)}

/* Glowing border pulse */
@keyframes glowPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,144,0,0)}
  50%{box-shadow:0 0 0 6px rgba(255,144,0,.15)}
}
.glow-pulse{animation:glowPulse 2.5s ease-in-out infinite}

/* Stagger children animation */
.stagger-in > *{opacity:0;transform:translateY(12px);animation:staggerChild .4s ease forwards}
@keyframes staggerChild{to{opacity:1;transform:none}}
.stagger-in > *:nth-child(1){animation-delay:0s}
.stagger-in > *:nth-child(2){animation-delay:.06s}
.stagger-in > *:nth-child(3){animation-delay:.12s}
.stagger-in > *:nth-child(4){animation-delay:.18s}
.stagger-in > *:nth-child(5){animation-delay:.24s}
.stagger-in > *:nth-child(6){animation-delay:.30s}
.stagger-in > *:nth-child(7){animation-delay:.36s}
.stagger-in > *:nth-child(8){animation-delay:.42s}
.stagger-in > *:nth-child(9){animation-delay:.48s}
.stagger-in > *:nth-child(10){animation-delay:.54s}
.stagger-in > *:nth-child(11){animation-delay:.60s}
.stagger-in > *:nth-child(12){animation-delay:.66s}

/* Smooth counter (monospace numbers) */
.counter-val{font-family:'DM Mono',monospace;display:inline-block;transition:transform .3s ease}

/* Success checkmark */
@keyframes checkDraw{0%{stroke-dashoffset:30}100%{stroke-dashoffset:0}}
@keyframes checkScale{0%{transform:scale(0)}50%{transform:scale(1.15)}100%{transform:scale(1)}}

/* Ripple effect on buttons */
.btn-ripple{position:relative;overflow:hidden}
.btn-ripple::after{content:'';position:absolute;width:200%;height:200%;top:50%;left:50%;background:radial-gradient(circle,rgba(255,255,255,.25) 0%,transparent 60%);transform:translate(-50%,-50%) scale(0);transition:transform .5s ease;border-radius:50%;pointer-events:none}
.btn-ripple:active::after{transform:translate(-50%,-50%) scale(1);transition:transform 0s}

/* Typewriter cursor */
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.typewriter-cursor{display:inline-block;width:2px;height:1.1em;background:var(--o);margin-left:2px;animation:blink .8s step-end infinite;vertical-align:text-bottom}

/* Skeleton loading */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--rad)}
.skeleton-text{height:12px;margin-bottom:8px;border-radius:4px}
.skeleton-title{height:18px;width:60%;margin-bottom:12px;border-radius:4px}
.skeleton-avatar{width:40px;height:40px;border-radius:10px}
.skeleton-card{height:180px;border-radius:var(--rad2)}

/* Toast slide-in */
@keyframes toastIn{from{transform:translateX(100%);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{from{transform:none;opacity:1}to{transform:translateX(100%);opacity:0}}

/* Progress bar animation */
@keyframes progressGrow{from{width:0}to{width:var(--progress,100%)}}
.progress-animated .pfill{animation:progressGrow 1.2s cubic-bezier(.25,.46,.45,.94) forwards}

/* Notification badge bounce */
@keyframes badgeBounce{0%,100%{transform:scale(1)}30%{transform:scale(1.3)}60%{transform:scale(.9)}}
.badge-bounce{animation:badgeBounce .5s ease}

/* Status dot pulse */
@keyframes statusPulse{0%,100%{box-shadow:0 0 0 0 var(--dot-color,rgba(0,212,124,.5))}70%{box-shadow:0 0 0 6px transparent}}
.status-dot{width:8px;height:8px;border-radius:50%;animation:statusPulse 2s ease-in-out infinite}
.status-dot.online{background:var(--g);--dot-color:rgba(0,212,124,.5)}
.status-dot.busy{background:var(--a);--dot-color:rgba(245,184,0,.5)}
.status-dot.offline{background:var(--t3);animation:none}

/* Magnetic hover on cards (enhanced) */
.cc:hover .cc-bar{animation:borderShimmer 1.5s ease infinite}
.cc:hover .cc-fill{filter:brightness(1.3);box-shadow:0 0 8px var(--cc,var(--o))}

/* Logo heartbeat */
@keyframes heartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.06)}28%{transform:scale(1)}42%{transform:scale(1.04)}56%{transform:scale(1)}}
.logo:hover .logo-hub{animation:heartbeat .8s ease}

/* ONBOARD MODAL */
.ob-ov{position:fixed;inset:0;background:rgba(0,0,0,.86);z-index:900;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .28s}
.ob-ov.show{opacity:1;pointer-events:all}
.ob-box{background:var(--bg2);border:1px solid var(--b2);border-radius:var(--rad3);width:min(570px,93vw);overflow:hidden;transform:translateY(16px) scale(.97);transition:transform .32s cubic-bezier(.34,1.56,.64,1)}
.ob-ov.show .ob-box{transform:none}
.ob-hd{padding:17px 20px;border-bottom:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between}
.ob-pg{display:flex;gap:4px;padding:13px 20px 0}
.ob-d{flex:1;height:2.5px;border-radius:2px;background:var(--b2);transition:background .28s}
.ob-d.on{background:var(--o)}
.ob-bd{padding:24px 20px 16px;min-height:250px}
.ob-step{display:none}
.ob-step.show{display:block;animation:pgFade .28s ease}
.ob-sn{font-size:10px;color:var(--o);font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px}
.ob-step h3{font-family:'Syne',sans-serif;font-weight:800;font-size:21px;margin-bottom:9px}
.ob-step p{font-size:13px;color:var(--t2);line-height:1.7;margin-bottom:11px}
.ob-hi{background:var(--ol);border:1px solid var(--om);border-radius:var(--rad);padding:11px 14px;font-size:12px;color:var(--o);margin-bottom:11px}
.ob-li-wrap{display:flex;flex-direction:column;gap:7px;margin-bottom:11px}
.ob-li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t1)}
.ob-li::before{content:'→';color:var(--o);font-weight:700;flex-shrink:0}
.ob-roles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.ob-role{background:var(--bg3);border:2px solid var(--b2);border-radius:var(--rad2);padding:14px;cursor:pointer;transition:all .18s;text-align:center}
.ob-role:hover,.ob-role.sel{border-color:var(--o);background:var(--ol)}
.ob-lv{display:flex;align-items:center;gap:9px;padding:7px 10px;background:var(--bg3);border-radius:var(--rad);margin-bottom:5px}
.ob-ft{padding:13px 20px 18px;border-top:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between}
.ob-skip{font-size:11px;color:var(--t3);cursor:pointer}
.ob-skip:hover{color:var(--t2)}

/* RESPONSIVE */
/* ════════════════════════════════════
   RESPONSIVE — TABLET 900px
════════════════════════════════════ */
@media(max-width:900px){
  .hero-grid,.auth-wrap{grid-template-columns:1fr}
  .hero-w,.auth-left{display:none}
  .mp-lay,.deal-lay,.fo-lay{grid-template-columns:1fr}
  .mp-side,.fo-side{display:none}
  .g4,.g5{grid-template-columns:repeat(2,1fr)}
  .sidebar{display:none}
  /* Listing page sidebar below content */
  #listingSideCol{display:none}
}
@media(max-width:820px){
  .nav-links-group .ntab .ntlbl{display:none}
}

/* ════════════════════════════════════
   RESPONSIVE — MOBILE 600px
════════════════════════════════════ */
@media(max-width:600px){
  /* Typography */
  .g3,.g2{grid-template-columns:1fr}
  .section{padding:48px 0}

  /* Nav — hide entirely, use bottom bar */
  #nav{display:none}
  .full-page{padding-top:0 !important}
  .app-lay,.main-content,.mc{padding-top:0}

  /* Bottom nav bar */
  

  /* Add bottom padding for bottom nav */
  body{padding-bottom:64px}
  .full-page,#page-home,#page-how,#page-guarantee{padding-top:0}
  .app-lay{padding-top:0;min-height:auto}
  div[style*="padding-top:58px"]{padding-top:0 !important}

  /* Hero adjustments */
  .hero{min-height:auto;padding:48px 0 40px}
  .hero-grid{padding:0}
  .hh{font-size:34px}
  .sh{font-size:24px}
  .hstats{gap:16px}
  .hsv{font-size:18px}

  /* Wrap padding */
  .wrap{padding:0 16px}

  /* Chips & filters */
  #homeMarketFilter{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #homeMarketFilter::-webkit-scrollbar{display:none}

  /* Home listings: 1 col on mobile */
  #homeListings{grid-template-columns:1fr}

  /* Categories: 2 col */
  #catsGrid{grid-template-columns:repeat(2,1fr);gap:8px}
  .cc{padding:14px}
  .cc-icon{width:38px;height:38px}

  /* Levels: scroll horizontal */
  #levelsGrid{
    grid-template-columns:repeat(5,140px);
    overflow-x:auto;padding-bottom:8px;
    scrollbar-width:none;
  }
  #levelsGrid::-webkit-scrollbar{display:none}

  /* Verify: 1 col */
  #verifyGrid{grid-template-columns:1fr}

  /* Marketplace */
  .mp-lay{padding:12px 0 40px}
  .mp-hd{flex-direction:column;align-items:stretch}
  .mp-srch{max-width:100%}
  .lg{grid-template-columns:1fr}

  /* Auth page */
  .auth-right{padding:24px 16px 40px}

  /* Dashboard KPIs: 2 col */
  .kgrid{grid-template-columns:1fr 1fr;gap:8px}
  .ki-v{font-size:20px}

  /* Deal page */
  .deal-lay{grid-template-columns:1fr;gap:12px;padding:12px 0 80px}

  /* Dispute */
  .dp-lay{padding:12px 0 80px}
  .dp-st{grid-template-columns:repeat(3,1fr)}

  /* Forum */
  .fo-lay{padding:12px 0 80px}

  /* Create listing */
  .lc-lay{padding:12px 0 80px}
  .g3{grid-template-columns:1fr}

  /* Profile & listing page */
  div[style*="grid-template-columns:1fr 300px"]{grid-template-columns:1fr !important}
  div[style*="grid-template-columns:1fr 340px"]{grid-template-columns:1fr !important}

  /* Seller profile stats: 2+3 */
  div[style*="grid-template-columns:repeat(5,1fr)"]{
    grid-template-columns:repeat(3,1fr) !important;
  }

  /* FAQ */
  #faqList{margin-top:24px}

  /* How/guarantee sections */
  #how-section .g2{grid-template-columns:1fr}

  /* Notif/user menu — full width */
  .nav-notif-menu,.nav-user-menu{width:calc(100vw - 32px);right:-50px}

  /* Auth buttons hidden in unauth nav for tiny screens */
  #navAuthBtns .btn-g{display:none}

  /* Hero tag */
  .hero-tag{font-size:10px;padding:4px 10px}
}

/* ════════════════════════════════════
   MOBILE BOTTOM NAV
════════════════════════════════════ */







/* Active indicator line */

/* Auth-only tabs hidden by default */

.mob-authed 
.mob-authed 
/* Mobile filter sheet */
.mob-filter-sheet{
  position:fixed;inset:0;z-index:400;
  display:none;align-items:flex-end;
}
.mob-filter-sheet.open{display:flex}
.mob-filter-bg{
  position:absolute;inset:0;background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
}
.mob-filter-panel{
  position:relative;z-index:1;
  background:var(--bg1);border-radius:20px 20px 0 0;
  border-top:1px solid var(--b2);
  width:100%;max-height:80vh;overflow-y:auto;
  padding:20px 20px 32px;
  animation:slideUp .25s ease;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
.mob-filter-handle{
  width:36px;height:4px;border-radius:2px;
  background:var(--b3);margin:0 auto 18px;
}



/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:58px}
.h-glow{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(var(--o),transparent 70%);opacity:.045;top:-180px;left:-160px;animation:hglow 9s ease-in-out infinite;pointer-events:none}
@keyframes hglow{0%,100%{transform:scale(1)}50%{transform:scale(1.12) translate(50px,30px)}}
.h-grid{position:absolute;inset:0;background-image:linear-gradient(var(--b0) 1px,transparent 1px),linear-gradient(90deg,var(--b0) 1px,transparent 1px);background-size:62px 62px;opacity:.22}
.h-grid::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 70% at 50% 50%,transparent 35%,var(--bg) 100%)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;position:relative;z-index:1;padding:76px 0}
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:var(--ol);border:1px solid var(--oh);border-radius:100px;padding:6px 13px;font-size:11px;font-weight:700;color:var(--o);margin-bottom:20px}
.pdot{width:7px;height:7px;border-radius:50%;background:var(--g);animation:pd 2.1s infinite}
@keyframes pd{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,212,124,.45)}50%{opacity:.6;box-shadow:0 0 0 6px rgba(0,212,124,0)}}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap;margin:22px 0 32px}
.hstats{display:flex;gap:26px}
.hsv{font-family:'Syne',sans-serif;font-weight:800;font-size:22px;line-height:1}
.hsl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.07em;margin-top:3px}
.hero-w{background:var(--bg2);border:1px solid var(--b2);border-radius:var(--rad3);padding:20px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.hero-w::before{content:'';position:absolute;inset:-1px;border-radius:calc(var(--rad3) + 1px);background:linear-gradient(135deg,var(--oh),transparent 55%);z-index:-1}
.deal-r{display:flex;align-items:center;gap:11px;padding:9px 11px;background:var(--bg3);border-radius:var(--rad);margin-bottom:7px;cursor:pointer;transition:all .18s}
.deal-r:hover{background:var(--bg4);transform:translateX(3px)}
@keyframes liveDealSlide{0%{opacity:0;transform:translateY(-20px);max-height:0}30%{max-height:80px}100%{opacity:1;transform:none;max-height:80px}}
@keyframes liveDealGlow{0%{box-shadow:0 0 0 0 rgba(0,212,124,.3)}50%{box-shadow:0 0 12px 2px rgba(0,212,124,.15)}100%{box-shadow:none}}
.deal-r:first-child{animation:liveDealGlow 2s ease}
.deal-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.deal-amt{font-family:'DM Mono',monospace;font-size:12px;font-weight:600;color:var(--o)}
.deal-comm{font-size:9px;color:var(--t3)}

/* TICKER */
.ticker{background:var(--bg1);border-top:1px solid var(--b0);border-bottom:1px solid var(--b0);padding:8px 0;overflow:hidden}
.tick-t{display:flex;gap:44px;white-space:nowrap;animation:tick 26s linear infinite}
.tick-t:hover{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.tick-i{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--t2)}
.tick-i strong{color:var(--t0);font-family:'DM Mono',monospace}
.tick-sep{width:3px;height:3px;border-radius:50%;background:var(--o);flex-shrink:0}

/* CATEGORIES */
.cc{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rad2);padding:17px;cursor:pointer;transition:all .25s;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:9px}
.cc::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--cc,var(--o)) 0%,transparent 65%);opacity:0;transition:opacity .25s}
.cc:hover{border-color:var(--b3);transform:translateY(-4px);box-shadow:0 8px 28px rgba(0,0,0,.4)}
.cc:hover::after{opacity:.06}
.cc:hover .cc-icon{animation:none}
.cc:hover .cc-icon svg{animation:hover3d .55s ease forwards;filter:drop-shadow(0 6px 16px rgba(255,255,255,.15))}
.cc .cc-icon{transition:transform .3s ease}
.cc:nth-child(odd) .cc-icon{animation:float3d 3.5s ease-in-out infinite}
.cc:nth-child(even) .cc-icon{animation:float3d-slow 4s ease-in-out infinite}
.cc:nth-child(3n) .cc-icon{animation:float3d 3s ease-in-out infinite .8s}
.cc:nth-child(4n) .cc-icon{animation:float3d-slow 4.5s ease-in-out infinite .5s}
.cc-icon{position:relative;z-index:1;width:56px;height:56px}
.cc-name{font-family:'Syne',sans-serif;font-weight:700;font-size:13px;position:relative;z-index:1}
.cc-cnt{font-size:10px;color:var(--t2);position:relative;z-index:1}
.cc-bar{height:2px;background:var(--b1);border-radius:1px;overflow:hidden;position:relative;z-index:1}
.cc-fill{height:100%;border-radius:1px;background:var(--cc,var(--o));transition:width 1.1s ease}

/* ESCROW */
.esc{background:var(--bg2);border:1px solid var(--b2);border-radius:var(--rad2);overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.45)}
.esc-hd{padding:11px 15px;background:var(--bg3);border-bottom:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between}
.esc-t{font-family:'Syne',sans-serif;font-weight:700;font-size:12px}
.esc-bd{padding:13px 15px}
.er{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--b0)}
.er:last-child{border:none}
.ek{font-size:11px;color:var(--t2)}
.ev{font-family:'DM Mono',monospace;font-size:12px;font-weight:500}
.pbar{height:4px;background:var(--b1);border-radius:2px;overflow:hidden;margin:11px 0}
.pfill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--g),var(--c));animation:pa 3s ease infinite alternate}
@keyframes pa{0%{width:32%}100%{width:100%}}

/* LEVELS */
.lvc{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rad2);padding:17px 13px;text-align:center;transition:all .22s;position:relative}
.lvc:nth-child(1) .lv-ico{animation:float3d-slow 3.8s ease-in-out infinite}
.lvc:nth-child(2) .lv-ico{animation:float3d 3.2s ease-in-out infinite .3s}
.lvc:nth-child(3) .lv-ico{animation:float3d-slow 3.5s ease-in-out infinite .6s}
.lvc:nth-child(4) .lv-ico{animation:float3d 4s ease-in-out infinite .1s}
.lvc:nth-child(5) .lv-ico{animation:float3d-slow 3.3s ease-in-out infinite .9s}
.lvc:hover .lv-ico svg{animation:hover3d .55s ease forwards;filter:drop-shadow(0 4px 14px rgba(255,255,255,.2))}
.lvc:hover{transform:translateY(-3px);border-color:var(--b3)}
.lvc.hl{border-color:var(--o);background:var(--ol)}
.lv-best{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--o);color:#0a0800;font-size:9px;font-weight:800;padding:2px 9px;border-radius:100px;white-space:nowrap}
.lv-ico{width:42px;height:42px;margin:0 auto 9px}
.lv-fee{font-family:'Syne',sans-serif;font-weight:900;font-size:28px;color:var(--o);margin-bottom:2px}

/* VERIFY */
.vc{border-radius:var(--rad2);border:1px solid var(--b1);overflow:hidden;transition:all .22s;background:var(--bg2)}
.vc:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.4)}
.vc-top{padding:20px}
.vf{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-bottom:1px solid var(--b0);font-size:12px;color:var(--t1)}
.vf:last-child{border:none}
.vf::before{content:'✓';color:var(--g);font-weight:800;flex-shrink:0;margin-top:1px}
.vfl{padding:3px 20px 15px}

/* FAQ */
.faq{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rad);overflow:hidden;margin-bottom:6px}
.faq-q{padding:14px 17px;cursor:pointer;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:11px;transition:background .18s}
.faq-q:hover{background:var(--bg3)}
.faq-plus{color:var(--t2);font-size:18px;transition:transform .22s;flex-shrink:0}
.faq.open .faq-plus{transform:rotate(45deg);color:var(--o)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .32s ease}
.faq.open .faq-a{max-height:280px}
.faq-ai{padding:0 17px 14px;font-size:12px;color:var(--t2);line-height:1.72;border-top:1px solid var(--b0)}


/* MARKETPLACE PREVIEW CHIPS */
.mp-chip{padding:6px 14px;border-radius:100px;font-size:12px;font-weight:600;cursor:pointer;transition:all .18s;border:1px solid var(--b2);color:var(--t2);background:var(--bg2)}
.mp-chip:hover{border-color:var(--b3);color:var(--t1);background:var(--bg3)}
.mp-chip.active{background:var(--ol);border-color:var(--om);color:var(--o)}

/* SIDEBAR TOGGLE */
.mp-side-wrap{position:relative}
.mp-side-wrap.collapsed .mp-side{display:none}
.mp-lay.sidebar-collapsed{grid-template-columns:1fr}
/* Hamburger button */
.mp-hamburger{
  width:36px;height:36px;
  background:var(--bg2);
  border:1px solid var(--b1);
  border-radius:var(--rad);
  cursor:pointer;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:5px;
  flex-shrink:0;
  transition:background .2s, border-color .2s;
  padding:0;
}
.mp-hamburger:hover{
  background:var(--bg3);
  border-color:var(--b3);
}
.mp-hamburger.active{
  background:var(--ol);
  border-color:var(--om);
}
/* Three lines */
.hb-line{
  display:block;
  height:1.5px;
  border-radius:2px;
  background:var(--t2);
  transition:
    width .25s ease,
    transform .25s ease,
    opacity .2s ease,
    background .2s ease;
  transform-origin:center center;
}
.hb-line:nth-child(1){ width:16px }
.hb-line:nth-child(2){ width:11px }
.hb-line:nth-child(3){ width:7px  }
/* Hover — equalise widths */
.mp-hamburger:hover .hb-line{ background:var(--t0) }
.mp-hamburger:hover .hb-line:nth-child(2){ width:14px }
.mp-hamburger:hover .hb-line:nth-child(3){ width:11px }
/* Active — X */
.mp-hamburger.active .hb-line{ background:var(--o) }
.mp-hamburger.active .hb-line:nth-child(1){
  width:14px;
  transform:translateY(6.5px) rotate(45deg);
}
.mp-hamburger.active .hb-line:nth-child(2){
  opacity:0;
  transform:scaleX(0);
}
.mp-hamburger.active .hb-line:nth-child(3){
  width:14px;
  transform:translateY(-6.5px) rotate(-45deg);
}

/* MARKETPLACE */
.mp-lay{display:grid;grid-template-columns:235px 1fr;gap:20px;padding:18px 0 44px;transition:grid-template-columns .3s ease}
.mp-side{position:sticky;top:70px;height:fit-content}
.mp-lay.side-collapsed{grid-template-columns:48px 1fr;gap:0}
#mpSideContent{
  overflow:hidden;
  max-height:800px;
  opacity:1;
  transition:max-height .35s ease, opacity .25s ease, transform .3s ease;
  transform-origin:top left;
  transform:scaleX(1);
}
#mpSideContent.hidden{
  max-height:0;
  opacity:0;
  pointer-events:none;
  transform:scaleX(0.95);
}
#mpSideHeader{
  transition:border-color .3s ease, padding .3s ease, margin .3s ease;
}
#mpFilterLabel{
  font-size:12px;font-weight:700;color:var(--t2);
  text-transform:uppercase;letter-spacing:.08em;
  white-space:nowrap;
  transition:opacity .25s ease, transform .25s ease;
}
#mpFilterLabel.hidden{
  opacity:0;
  transform:translateX(-6px);
  pointer-events:none;
}
.mps-t{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);margin-bottom:8px}
.mp-ci{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--rad);cursor:pointer;transition:all .18s;font-size:12px;color:var(--t2);margin-bottom:2px}
.mp-ci:hover{background:var(--bg3);color:var(--t1)}
.mp-ci.active{background:var(--ol);color:var(--o)}
.mp-ci-cnt{margin-left:auto;font-family:'DM Mono',monospace;font-size:10px;color:var(--t3)}
.mp-flt{margin-bottom:12px}
.mp-flt label{font-size:10px;color:var(--t2);display:block;margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em}
.mp-flt select{width:100%;background:var(--bg3);border:1px solid var(--b1);border-radius:var(--rad);padding:7px 10px;font-size:12px;color:var(--t1);outline:none}
.mp-fch{display:flex;flex-direction:column;gap:5px}
.mp-fch label{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--t2);cursor:pointer}
.mp-fch input{accent-color:var(--o)}
.mp-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;flex-wrap:wrap;gap:9px}
.mp-srch{position:relative;flex:1;max-width:340px}
.mp-srch input{width:100%;background:var(--bg3);border:1px solid var(--b1);border-radius:var(--rad);padding:8px 11px 8px 32px;font-size:13px;color:var(--t0);outline:none;transition:border-color .18s}
.mp-srch input:focus{border-color:var(--o)}
.mp-si{position:absolute;left:10px;top:50%;transform:translateY(-50%)}
.lg{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:11px}
.lc{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rad2);overflow:hidden;cursor:pointer;transition:all .22s;display:flex;flex-direction:column}
.lc:hover{border-color:var(--b3);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.lc-top{padding:13px;flex:1}
.lc-sel{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.lc-ava{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.lc-sn{font-size:12px;font-weight:700}
.lc-sb{display:flex;gap:3px;margin-top:2px;flex-wrap:wrap}
.lc-title{font-family:'Syne',sans-serif;font-weight:700;font-size:13px;line-height:1.3;margin-bottom:4px}
.lc-desc{font-size:11px;color:var(--t2);line-height:1.5;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lc-tags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.lc-tag{background:var(--bg4);border-radius:100px;padding:2px 7px;font-size:9px;color:var(--t2)}
.lc-meta{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--t3)}
.lc-stars{color:var(--a)}
.lc-pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--b0)}
.lc-pkg{padding:8px 5px;background:var(--bg3);text-align:center;cursor:pointer;transition:background .18s}
.lc-pkg:hover{background:var(--bg4)}
.lc-pkg.ft{background:var(--ol)}
.lc-pn{font-size:9px;color:var(--t3);text-transform:uppercase;margin-bottom:1px}
.lc-pp{font-family:'DM Mono',monospace;font-size:11px;font-weight:600}
.lc-pt{font-size:9px;color:var(--t3);margin-top:1px}

/* DASHBOARD */
.app-lay{display:flex;min-height:calc(100vh - 58px);padding-top:58px}
.sb{width:215px;background:var(--bg1);border-right:1px solid var(--b0);flex-shrink:0;display:flex;flex-direction:column}
.sb-u{padding:16px 14px;border-bottom:1px solid var(--b0)}
.sb-av{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:8px;position:relative}
.sb-av::after{content:'';position:absolute;inset:-2px;border-radius:13px;border:1.5px solid var(--o);opacity:.45}
.sb-nm{font-family:'Syne',sans-serif;font-weight:700;font-size:13px}
.sb-lv{font-size:10px;color:var(--o);margin-top:2px}
.xpb{height:2.5px;background:var(--b2);border-radius:2px;overflow:hidden;margin-top:7px}
.xpbf{height:100%;background:linear-gradient(90deg,var(--o),#FFB800);border-radius:2px;width:62%}
.xpll{display:flex;justify-content:space-between;font-size:9px;color:var(--t3);margin-top:2px}
.sb-nav{flex:1;padding:9px 7px;overflow-y:auto}
.sb-sec{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);padding:7px 8px 3px}
.sbi{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--rad);cursor:pointer;transition:all .18s;font-size:12px;font-weight:500;color:var(--t2);margin-bottom:1px}
.sbi:hover{background:var(--bg3);color:var(--t1)}
.sbi.active{background:var(--ol);color:var(--o)}
.sbi .si{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.sbi:hover .si{transform:perspective(80px) rotateY(15deg) scale(1.15)}
.sbi.active .si{filter:drop-shadow(0 0 4px currentColor)}
.sbi .si svg{width:15px;height:15px}
.sb-badge{margin-left:auto;background:var(--r);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:100px}
.sb-mode{padding:11px 13px;border-top:1px solid var(--b0)}
.mt{display:flex;background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rad);overflow:hidden;margin-top:5px}
.mb{flex:1;padding:6px;text-align:center;font-size:10px;font-weight:700;cursor:pointer;transition:all .18s;color:var(--t2);border:none;background:none}
.mb.active{background:var(--o);color:#0a0800}
.mc{flex:1;overflow-y:auto;overflow-x:hidden}
.dc{padding:20px}
.kgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:16px}
.ki{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rad2);padding:14px;position:relative;overflow:hidden}
.ki::after{content:'';position:absolute;top:-28px;right:-28px;width:75px;height:75px;border-radius:50%;background:var(--kc,var(--o));opacity:.05}
.ki-l{font-size:10px;color:var(--t2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px}
.ki-v{font-family:'Syne',sans-serif;font-weight:800;font-size:24px;line-height:1;margin-bottom:4px}
.ki-d{font-size:11px;color:var(--g)}

/* FUND */
.fs{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--rad);margin-bottom:11px}
.fdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.fr{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-bottom:6px}
.fk{color:var(--t2)}
.fv{font-family:'DM Mono',monospace;font-weight:500}
.covb{height:4px;background:var(--b1);border-radius:2px;overflow:hidden;margin:9px 0}
.covf{height:100%;border-radius:2px}
.qi{display:flex;align-items:center;gap:11px;padding:9px 13px;background:var(--bg3);border-radius:var(--rad);margin-bottom:6px}
.qck{width:19px;height:19px;border-radius:5px;border:1.5px solid var(--b3);display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0}
.qck.done{background:var(--g);border-color:var(--g);color:#0a1a0a}
.qxp{margin-left:auto;font-family:'DM Mono',monospace;font-size:11px;color:var(--o)}
.mi{background:var(--bg3);border-radius:var(--rad);padding:11px 13px;margin-bottom:7px;display:flex;align-items:center;gap:11px}
.mpb{height:2.5px;background:var(--b1);border-radius:2px;overflow:hidden;margin-top:4px}
.mpbf{height:100%;background:var(--o);border-radius:2px}
.mrw{text-align:right;flex-shrink:0;font-family:'DM Mono',monospace;font-size:11px;color:var(--g);font-weight:600}
.wbtn{width:100%;padding:10px;background:linear-gradient(90deg,var(--ol),var(--gl));border:1px solid var(--om);border-radius:var(--rad);color:var(--o);font-size:12px;font-weight:700;cursor:pointer;margin-top:7px;transition:all .18s}
.wbtn:hover{background:linear-gradient(90deg,var(--om),var(--gm))}
.xsg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.xs{background:var(--bg3);border:1px solid var(--b1);border-radius:var(--rad);padding:9px;cursor:pointer;transition:all .18s;text-align:center}
.xs:hover{border-color:var(--b3);background:var(--bg4)}
.xs-n{font-size:11px;color:var(--t1);margin-bottom:3px}
.xs-c{font-family:'DM Mono',monospace;font-size:10px;color:var(--o)}

/* DEAL */
.deal-lay{display:grid;grid-template-columns:1fr 330px;gap:17px;padding:18px 0 44px}
.fl-steps{display:flex;align-items:center;padding:15px 17px;gap:0;overflow-x:auto}
.fl-s{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:66px}
.fl-d{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.fd-done{background:var(--g);color:#0a1a0a}
.fd-act{background:var(--o);color:#0a0800;box-shadow:0 0 13px rgba(255,144,0,.45);animation:fda 2s infinite}
@keyframes fda{0%,100%{box-shadow:0 0 13px rgba(255,144,0,.45)}50%{box-shadow:0 0 22px rgba(255,144,0,.7)}}
.fd-pen{background:var(--bg3);border:1px solid var(--b2);color:var(--t3)}
.fl-lbl{font-size:9px;color:var(--t2);text-align:center;line-height:1.3}
.fl-ln{flex:1;height:1.5px;background:var(--b2);min-width:14px;margin-bottom:16px}
.fl-ln.done{background:var(--g)}
.dr{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--b0)}
.dr:last-child{border:none}
.dk{font-size:11px;color:var(--t2)}
.dv{font-family:'DM Mono',monospace;font-size:12px;font-weight:500}
.cms{max-height:250px;overflow-y:auto;padding:11px 13px;display:flex;flex-direction:column;gap:7px}
.cm{display:flex;gap:7px;max-width:88%}
.cm.me{align-self:flex-end;flex-direction:row-reverse}
.cm-av{width:25px;height:25px;border-radius:6px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.cm-bub{background:var(--bg3);border:1px solid var(--b1);border-radius:var(--rad);padding:6px 10px;font-size:11px;color:var(--t1);line-height:1.5}
.cm.me .cm-bub{background:var(--ol);border-color:var(--om)}
.cm-t{font-size:9px;color:var(--t3);margin-top:2px;text-align:right}
.cinp{display:flex;gap:7px;padding:9px 13px;border-top:1px solid var(--b0)}
.cinp input{flex:1;background:var(--bg3);border:1px solid var(--b1);border-radius:var(--rad);padding:7px 10px;font-size:12px;color:var(--t0);outline:none}
.cinp input:focus{border-color:var(--o)}
.csend{background:var(--o);color:#0a0800;border:none;border-radius:var(--rad);padding:7px 11px;font-weight:700;cursor:pointer}

/* FORUM */
.fo-lay{display:grid;grid-template-columns:1fr 252px;gap:17px;padding:18px 0 44px}
.fo-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.fc{padding:5px 12px;border-radius:100px;font-size:11px;font-weight:700;cursor:pointer;transition:all .18s;border:1px solid var(--b1);color:var(--t2)}
.fc:hover{border-color:var(--b3);color:var(--t1)}
.fc.active{background:var(--ol);border-color:var(--om);color:var(--o)}
.pc{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rad2);padding:13px;margin-bottom:8px;cursor:pointer;transition:all .18s;display:flex;gap:11px}
.pc:hover{border-color:var(--b2);transform:translateY(-1px)}
.pv{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0}
.vbtn{background:none;border:none;color:var(--t3);cursor:pointer;font-size:12px;line-height:1;transition:color .14s}
.vbtn:hover{color:var(--o)}
.vcnt{font-family:'DM Mono',monospace;font-size:12px;font-weight:600}
.ptitle{font-family:'Syne',sans-serif;font-weight:700;font-size:13px;line-height:1.3;margin-bottom:4px}
.pprev{font-size:11px;color:var(--t2);line-height:1.5;margin-bottom:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pmeta{display:flex;align-items:center;gap:9px;font-size:10px;color:var(--t3)}
.hblur{filter:blur(5px);pointer-events:none;user-select:none;font-size:11px;color:var(--t2);line-height:1.5;margin-bottom:7px}
.hov{position:relative}
.hov-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,6,9,.62);border-radius:var(--rad);backdrop-filter:blur(2px)}
.hunl{background:var(--p);color:#fff;border:none;padding:6px 13px;border-radius:var(--rad);font-size:11px;font-weight:700;cursor:pointer}

/* DISPUTE */
.dp-lay{max-width:860px;margin:0 auto;padding:22px 0 44px}
.dp-st{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:20px}
.dst{text-align:center;padding:11px 5px;border-radius:var(--rad);border:1px solid var(--b1);background:var(--bg2)}
.dst.done{border-color:var(--g);background:var(--gl)}
.dst.act{border-color:var(--r);background:var(--rl)}
.dst-n{font-size:10px;margin-top:4px;color:var(--t2)}
.dst.done .dst-n{color:var(--g)}
.dst.act .dst-n{color:var(--r)}
.cm-mx{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cmr{background:var(--bg3);border:1px solid var(--b1);border-radius:var(--rad);padding:10px 12px}
.cmt{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--t3);margin-bottom:2px}
.cmp{font-family:'Syne',sans-serif;font-weight:800;font-size:21px;margin-bottom:1px}
.cmd{font-size:10px;color:var(--t2)}
.tli{display:flex;gap:11px;padding:9px 0;position:relative}
.tli:not(:last-child)::after{content:'';position:absolute;left:12px;top:34px;bottom:0;width:1px;background:var(--b1)}
.tld{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;border:1.5px solid}
.tlt{font-size:12px;font-weight:600;margin-bottom:2px}
.tldc{font-size:11px;color:var(--t2);line-height:1.5}
.tltm{font-size:9px;color:var(--t3);margin-top:2px}

/* LISTING CREATE */
.lc-lay{max-width:840px;margin:0 auto;padding:22px 0 44px}
.fg{margin-bottom:13px}
.fl{font-size:10px;color:var(--t2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;display:block;font-weight:700}
.fi,.fsl,.fta{width:100%;background:var(--bg3);border:1px solid var(--b1);border-radius:var(--rad);padding:8px 11px;font-size:13px;color:var(--t0);outline:none;transition:border-color .18s}
.fi:focus,.fsl:focus,.fta:focus{border-color:var(--o)}
.fta{height:84px;resize:none}
.pke{background:var(--bg3);border:1px solid var(--b1);border-radius:var(--rad2);padding:13px}
.pke.ft{border-color:var(--o);background:var(--ol)}
.pkb{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t2);margin-bottom:9px;display:flex;align-items:center;justify-content:space-between}
.pkb.ft{color:var(--o)}
.co-g{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.co{background:var(--bg3);border:1.5px solid var(--b1);border-radius:var(--rad);padding:9px 6px;cursor:pointer;transition:all .18s;text-align:center}
.co:hover{border-color:var(--b3)}
.co.sel{border-color:var(--o);background:var(--ol)}
.co-e{font-size:17px;margin-bottom:3px}
.co-n{font-size:10px;color:var(--t2);line-height:1.2}
.fee-box{background:var(--gl);border:1px solid var(--gm);border-radius:var(--rad);padding:11px 13px}
.fee-r{display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px}
.fee-r:last-child{margin:0;padding-top:7px;border-top:1px solid var(--gm);font-weight:700;font-size:12px}
.prv{background:var(--bg2);border:1.5px solid var(--o);border-radius:var(--rad2);overflow:hidden;opacity:.93}

/* AUTH */
.auth-wrap{display:grid;grid-template-columns:1fr 410px;min-height:100vh;background:var(--bg1)}
.auth-left{display:flex;align-items:center;padding:55px;position:relative;overflow:hidden;background:var(--bg1)}
.al-bg{position:absolute;inset:0;background:radial-gradient(ellipse 55% 55% at 28% 50%,rgba(255,144,0,.05),transparent)}
.auth-right{background:var(--bg1);border-left:1px solid var(--b0);display:flex;align-items:center;justify-content:center;padding:36px}
.a-tabs{display:flex;background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rad2);overflow:hidden;margin-bottom:22px}
.a-tab{flex:1;padding:9px;text-align:center;font-size:13px;font-weight:700;cursor:pointer;transition:all .18s;color:var(--t2);border:none;background:none}
.a-tab.active{background:var(--o);color:#0a0800}
.r-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:13px}
.r-opt{background:var(--bg3);border:2px solid var(--b2);border-radius:var(--rad2);padding:12px;cursor:pointer;transition:all .18s;text-align:center}
.r-opt:hover,.r-opt.sel{border-color:var(--o);background:var(--ol)}
.a-promo{background:var(--ol);border:1px solid var(--om);border-radius:var(--rad);padding:9px 12px;font-size:12px;color:var(--o);margin-bottom:14px}
.a-note{font-size:11px;color:var(--t3);text-align:center;margin-top:12px;line-height:1.6}

/* CTA / FOOTER */
.cta-s{background:linear-gradient(135deg,var(--bg1),var(--bg2));border-top:1px solid var(--b0);text-align:center;padding:80px 0;position:relative;overflow:hidden}
.cta-glow{position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(var(--o),transparent 70%);opacity:.05;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
footer{background:var(--bg1);border-top:1px solid var(--b0);padding:40px 0 20px}
.fg-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px}
.fg-grid h4{font-family:'Syne',sans-serif;font-weight:700;font-size:11px;color:var(--t0);text-transform:uppercase;letter-spacing:.08em;margin-bottom:11px}
.fg-grid a{display:block;font-size:12px;color:var(--t2);margin-bottom:6px;transition:color .18s}
.fg-grid a:hover{color:var(--t0)}
.fb{border-top:1px solid var(--b0);padding-top:16px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.fbc{font-size:11px;color:var(--t3)}
.fbs{display:flex;gap:6px}
.fbg{background:var(--bg3);border:1px solid var(--b1);border-radius:var(--rad);padding:3px 8px;font-size:10px;color:var(--t2)}



/* How step cards icon float */
.how-step-card .step-ico{display:inline-block;animation:float3d-slow 3.5s ease-in-out infinite}
.how-step-card:nth-child(2) .step-ico{animation-delay:.4s}
.how-step-card:nth-child(3) .step-ico{animation-delay:.8s}
.how-step-card:nth-child(4) .step-ico{animation-delay:.2s}
.how-step-card:nth-child(5) .step-ico{animation-delay:.6s}



/* Mobile page header */
.mob-page-hd{
  display:none;
  align-items:center;gap:12px;
  padding:14px 16px 10px;
  border-bottom:1px solid var(--b0);
  position:sticky;top:0;z-index:100;
  background:rgba(6,6,9,.95);
  backdrop-filter:blur(16px);
}
@media(max-width:600px){
  .mob-page-hd{display:flex}
  /* Marketplace mobile search full width */
  .mp-hd{gap:8px}
  .mp-srch{max-width:100%;flex:1}
  /* Section headings */
  .eyebrow{font-size:9px}
}

/* LISTING PAGE */
.lp-pkg-tab{
  padding:11px 8px;font-size:11px;font-weight:700;
  border:none;background:none;color:var(--t2);cursor:pointer;
  transition:all .18s;border-right:1px solid var(--b1);text-align:center;
}
.lp-pkg-tab:last-child{border-right:none}
.lp-pkg-tab:hover{background:var(--bg2);color:var(--t1)}
.lp-pkg-tab.active{background:var(--bg2);color:var(--o)}
.lp-include-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;background:var(--bg3);
  border-radius:var(--rad);font-size:12px;color:var(--t1);
}
.lp-include-item::before{content:"✓";color:var(--g);font-weight:800;flex-shrink:0}
.lp-step{display:flex;gap:14px;padding:11px 0;position:relative}
.lp-step:not(:last-child)::after{
  content:'';position:absolute;left:15px;top:38px;bottom:0;
  width:1.5px;background:linear-gradient(to bottom,var(--b3),transparent);
}
.lp-step-num{
  width:30px;height:30px;border-radius:50%;
  background:var(--ol);border:1.5px solid var(--om);
  display:flex;align-items:center;justify-content:center;
  font-family:'DM Mono',monospace;font-size:11px;font-weight:700;
  color:var(--o);flex-shrink:0;
}
.lp-review{padding:16px 20px;border-bottom:1px solid var(--b0)}
.lp-review:last-child{border-bottom:none}





/* BUYER PAGES */
.wish-card{position:relative}
.wish-heart{
  position:absolute;top:10px;right:10px;z-index:2;
  width:28px;height:28px;border-radius:50%;
  background:rgba(6,6,9,.7);backdrop-filter:blur(4px);
  border:1px solid var(--b2);display:flex;align-items:center;
  justify-content:center;cursor:pointer;font-size:13px;
  transition:all .2s;
}
.wish-heart:hover,.wish-heart.liked{background:var(--rl);border-color:var(--rm)}
.wish-heart.liked{background:var(--r);color:white;border-color:var(--r)}
.purchase-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;border-bottom:1px solid var(--b0);
  transition:background .15s;cursor:pointer;
}
.purchase-row:hover{background:var(--bg3)}
.purchase-row:last-child{border-bottom:none}
.seller-search-card{
  background:var(--bg2);border:1px solid var(--b1);
  border-radius:var(--rad2);padding:18px;
  transition:all .25s;cursor:pointer;
}
.seller-search-card:hover{border-color:var(--b3);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.spend-bar{height:5px;background:var(--b1);border-radius:3px;overflow:hidden;margin-top:5px}
.spend-fill{height:100%;border-radius:3px;transition:width .8s ease}
/* Buyer dashboard KPIs - hidden by default */
/* Wishlist heart button on listing cards */
.lc{position:relative}
.lc-heart{
  position:absolute;top:10px;right:10px;z-index:3;
  width:26px;height:26px;border-radius:50%;
  background:rgba(6,6,9,.75);backdrop-filter:blur(4px);
  border:1px solid var(--b2);display:flex;align-items:center;
  justify-content:center;cursor:pointer;font-size:12px;
  transition:all .2s;opacity:0;
}
.lc:hover .lc-heart{opacity:1}
.lc-heart.liked{opacity:1;background:var(--r);border-color:var(--r)}

/* DISPUTE & REFERRAL */
.disp-step-col{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.disp-step-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--bg3);border:1.5px solid var(--b2);color:var(--t3);transition:all .3s}
.disp-step-dot.done{background:var(--g);border-color:var(--g);color:#0a1a0a;font-size:11px}
.disp-step-dot.active{background:var(--o);border-color:var(--od);color:#0a0800;box-shadow:0 0 14px rgba(255,144,0,.4);animation:fda 2s infinite}
.disp-step-lbl{font-size:9px;color:var(--t2);line-height:1.3;max-width:60px}
.ref-level{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--bg3);border-radius:var(--rad2);border:1.5px solid transparent;transition:all .2s}
.ref-level.active{border-color:var(--o);background:var(--ol)}
.ref-level:hover{border-color:var(--b3)}

/* ══ MESSENGER ══ */
.msg-sidebar{
  width:300px;flex-shrink:0;border-right:1px solid var(--b1);
  display:flex;flex-direction:column;background:var(--bg1);
}
.msg-sidebar-hd{
  padding:16px 14px 10px;border-bottom:1px solid var(--b0);
  display:flex;flex-direction:column;gap:10px;
}
.msg-search{
  width:100%;background:var(--bg3);border:1px solid var(--b1);
  border-radius:var(--rad);padding:7px 10px 7px 30px;
  font-size:12px;color:var(--t1);outline:none;transition:border-color .18s;
}
.msg-search:focus{border-color:var(--o)}
.msg-tabs{display:flex;gap:0;padding:8px 10px;border-bottom:1px solid var(--b0)}
.msg-tab{
  flex:1;padding:5px 8px;font-size:11px;font-weight:700;
  border:none;background:none;color:var(--t2);cursor:pointer;
  border-radius:var(--rad);transition:all .18s;
}
.msg-tab.active{background:var(--ol);color:var(--o)}
.msg-chat-list{flex:1;overflow-y:auto}
.msg-chat-item{
  display:flex;align-items:center;gap:11px;
  padding:11px 14px;cursor:pointer;
  border-bottom:1px solid var(--b0);transition:background .15s;
  position:relative;
}
.msg-chat-item:hover{background:var(--bg3)}
.msg-chat-item.active{background:var(--ol);border-left:2px solid var(--o)}
.msg-chat-item.unread .msg-ci-name{font-weight:700}
.msg-ci-ava{
  width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;position:relative;
}
.msg-ci-online{
  position:absolute;bottom:1px;right:1px;
  width:9px;height:9px;border-radius:50%;
  background:var(--g);border:2px solid var(--bg1);
}
.msg-ci-body{flex:1;min-width:0}
.msg-ci-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.msg-ci-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-ci-time{font-size:10px;color:var(--t3);flex-shrink:0;margin-left:6px}
.msg-ci-preview{font-size:11px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-ci-badge{
  width:16px;height:16px;border-radius:50%;background:var(--o);
  color:#0a0800;font-size:9px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-left:4px;
}
.msg-ci-deal{
  font-size:9px;font-weight:700;padding:1px 6px;border-radius:100px;
  background:var(--gl);color:var(--g);border:1px solid var(--gm);
  margin-top:3px;display:inline-block;
}
/* Main area */
.msg-main{flex:1;display:flex;flex-direction:column;min-width:0}
.msg-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:40px;color:var(--t2);
}
.msg-chat-area{flex:1;display:flex;flex-direction:column;min-height:0}
.msg-chat-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;border-bottom:1px solid var(--b1);
  background:var(--bg1);flex-shrink:0;
}
.msg-chat-ava{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;background:var(--ol);
}
.msg-messages{
  flex:1;overflow-y:auto;padding:16px 18px;
  display:flex;flex-direction:column;gap:10px;
}
.msg-day-sep{
  text-align:center;font-size:10px;color:var(--t3);
  position:relative;margin:6px 0;
}
.msg-day-sep::before,.msg-day-sep::after{
  content:'';position:absolute;top:50%;width:40%;height:1px;background:var(--b0);
}
.msg-day-sep::before{left:0}
.msg-day-sep::after{right:0}
.msg-bubble-wrap{display:flex;align-items:flex-end;gap:8px}
.msg-bubble-wrap.me{flex-direction:row-reverse}
.msg-bubble-ava{
  width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;background:var(--bg3);flex-shrink:0;
}
.msg-bubble{
  max-width:68%;padding:9px 13px;border-radius:14px;
  font-size:13px;line-height:1.6;word-break:break-word;
  background:var(--bg2);border:1px solid var(--b1);
}
.msg-bubble-wrap.me .msg-bubble{
  background:var(--ol);border-color:var(--om);color:var(--t0);
  border-radius:14px 14px 4px 14px;
}
.msg-bubble-wrap:not(.me) .msg-bubble{border-radius:14px 14px 14px 4px}
.msg-bubble-time{font-size:10px;color:var(--t3);margin-top:4px;text-align:right}
.msg-system{
  text-align:center;font-size:11px;color:var(--t2);
  background:var(--bg2);border:1px solid var(--b0);
  border-radius:var(--rad);padding:6px 14px;
  margin:4px auto;max-width:380px;
}
.msg-deal-card{
  background:var(--bg2);border:1px solid var(--gm);
  border-radius:var(--rad2);padding:12px 14px;
  max-width:300px;cursor:pointer;transition:border-color .18s;
}
.msg-deal-card:hover{border-color:var(--o)}
/* Input */
.msg-input-wrap{
  display:flex;align-items:flex-end;gap:8px;
  padding:12px 16px;border-top:1px solid var(--b1);
  background:var(--bg1);flex-shrink:0;
}
.msg-attach-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--b2);
  background:var(--bg3);color:var(--t2);cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all .18s;
}
.msg-attach-btn:hover{border-color:var(--b3);color:var(--t1)}
.msg-input{
  flex:1;background:var(--bg2);border:1px solid var(--b2);
  border-radius:var(--rad2);padding:9px 13px;
  font-size:13px;color:var(--t0);resize:none;outline:none;
  font-family:'DM Sans',sans-serif;line-height:1.5;
  max-height:120px;overflow-y:auto;transition:border-color .18s;
}
.msg-input:focus{border-color:var(--o)}
.msg-send-btn{
  width:36px;height:36px;border-radius:50%;border:none;
  background:var(--o);color:#0a0800;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.msg-send-btn:hover{background:var(--od);transform:scale(1.08)}

/* ══ QUESTS PAGE ══ */
.quest-tabs{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.quest-tab{padding:8px 16px;font-size:12px;font-weight:700;border:1px solid var(--b1);border-radius:var(--rad2);background:var(--bg2);color:var(--t2);cursor:pointer;transition:all .18s}
.quest-tab:hover{border-color:var(--b3);color:var(--t1)}
.quest-tab.active{background:var(--ol);border-color:var(--om);color:var(--o)}
.streak-day{padding:5px 3px;text-align:center;font-size:10px;font-weight:700;border-radius:var(--rad);background:var(--bg3);color:var(--t3)}
.streak-day.done{background:var(--ol);color:var(--o);border:1px solid var(--om)}
.streak-day.today{background:var(--o);color:#0a0800}

/* ══ INTERACTIVE TOUR ══ */
#tourOverlay{position:fixed;inset:0;z-index:9000;pointer-events:none}
#tourOverlay.active{pointer-events:all}
#tourBackdrop{
  position:absolute;inset:0;
  background:rgba(4,4,8,.82);
  backdrop-filter:blur(2px);
  transition:clip-path .4s cubic-bezier(.4,0,.2,1);
}
/* Spotlight cutout via clip-path */
#tourBackdrop.spotlight{
  background:rgba(4,4,8,.78);
  clip-path:polygon(
    0% 0%, 100% 0%, 100% 100%, 0% 100%,
    0% var(--sy), var(--sx) var(--sy), var(--sx) var(--ey), var(--ex) var(--ey), var(--ex) var(--sy), 0% var(--sy)
  );
}
/* Spotlight ring */
#tourSpotlight{
  position:absolute;
  border:2px solid var(--o);
  border-radius:8px;
  box-shadow:0 0 0 3px rgba(255,144,0,.18), 0 0 30px rgba(255,144,0,.25);
  transition:all .35s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  z-index:9001;
}
/* Tour card */
.tour-card{
  position:absolute;
  width:340px;
  background:var(--bg1);
  border:1px solid var(--b2);
  border-radius:var(--rad3);
  box-shadow:0 24px 64px rgba(0,0,0,.7), 0 0 0 1px rgba(255,144,0,.08);
  z-index:9002;
  transition:all .35s cubic-bezier(.4,0,.2,1);
  pointer-events:all;
}
.tour-card::before{
  content:'';position:absolute;
  width:10px;height:10px;
  background:var(--bg1);
  border:1px solid var(--b2);
  transform:rotate(45deg);
  z-index:-1;
}
.tour-card.arrow-top::before{top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);border-right:none;border-bottom:none}
.tour-card.arrow-bottom::before{bottom:-6px;left:50%;transform:translateX(-50%) rotate(45deg);border-left:none;border-top:none}
.tour-card.arrow-left::before{left:-6px;top:50%;transform:translateY(-50%) rotate(45deg);border-right:none;border-top:none}
.tour-card.arrow-right::before{right:-6px;top:50%;transform:translateY(-50%) rotate(45deg);border-left:none;border-bottom:none}
.tour-card-header{
  padding:14px 18px 0;
  display:flex;align-items:center;gap:10px;
}
.tour-progress{
  flex:1;height:3px;background:var(--b1);border-radius:2px;overflow:hidden;
}
.tour-progress-fill{
  height:100%;background:linear-gradient(90deg,var(--o),#FFB800);
  border-radius:2px;transition:width .4s ease;
}
.tour-step-label{
  font-size:10px;font-weight:700;color:var(--t3);
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
.tour-icon{font-size:28px;margin-bottom:8px;line-height:1}
.tour-title{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:17px;margin-bottom:8px;color:var(--t0);
}
.tour-desc{font-size:13px;color:var(--t2);line-height:1.7}
.tour-hint{
  margin-top:12px;padding:9px 12px;
  background:var(--ol);border:1px solid var(--om);
  border-radius:var(--rad);font-size:11px;color:var(--o);
  line-height:1.6;
}
.tour-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px 16px;border-top:1px solid var(--b0);
  margin-top:4px;
}
.tour-btn-skip{
  font-size:11px;color:var(--t3);background:none;border:none;
  cursor:pointer;padding:0;transition:color .18s;
}
.tour-btn-skip:hover{color:var(--t1)}
.tour-btn-prev{
  padding:7px 14px;font-size:12px;font-weight:600;
  background:var(--bg3);border:1px solid var(--b2);
  border-radius:var(--rad);color:var(--t2);cursor:pointer;
  transition:all .18s;
}
.tour-btn-prev:hover{border-color:var(--b3);color:var(--t1)}
.tour-btn-prev:disabled{opacity:.3;cursor:not-allowed}
.tour-btn-next{
  padding:7px 18px;font-size:12px;font-weight:700;
  background:var(--o);border:none;
  border-radius:var(--rad);color:#0a0800;cursor:pointer;
  transition:all .2s;
}
.tour-btn-next:hover{background:var(--od);transform:translateY(-1px)}
/* Highlight pulse on target elements */
.tour-highlight{
  position:relative;z-index:8999;
  animation:tourPulse .8s ease-out;
}
@keyframes tourPulse{
  0%{box-shadow:0 0 0 0 rgba(255,144,0,.6)}
  100%{box-shadow:0 0 0 12px rgba(255,144,0,0)}
}

.nav-deals-drop{position:relative}
.nav-deals-menu{position:absolute;top:calc(100% + 10px);right:0;width:320px;background:var(--bg1);border:1px solid var(--b2);border-radius:var(--rad2);box-shadow:0 16px 48px rgba(0,0,0,.6);z-index:400;display:none}
.nav-deals-menu.open{display:block}
.ndm-header{display:flex;align-items:center;justify-content:space-between;padding:12px 15px 10px;border-bottom:1px solid var(--b0)}
.ndm-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--t3)}
.ndm-all{font-size:11px;color:var(--o);cursor:pointer;font-weight:600}
.ndm-item{display:flex;align-items:center;gap:11px;padding:10px 15px;border-bottom:1px solid var(--b0);cursor:pointer;transition:background .15s}
.ndm-item:hover{background:var(--bg3)}
.ndm-footer{padding:10px 15px}
.ndm-ico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.ndm-info{flex:1;min-width:0}
.ndm-deal-title{font-size:12px;font-weight:600;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ndm-deal-sub{font-size:10px;color:var(--t2)}
.ndm-deal-right{text-align:right;flex-shrink:0}
.ndm-deal-amt{font-family:"DM Mono",monospace;font-size:12px;font-weight:700}
.ndm-deal-status{font-size:9px;font-weight:700;padding:2px 6px;border-radius:100px;margin-top:3px;display:inline-block}
.num-mode-btn{flex:1;padding:7px 10px;font-size:11px;font-weight:700;border:1px solid var(--b1);border-radius:var(--rad);background:var(--bg3);color:var(--t2);cursor:pointer;transition:all .18s}
.num-mode-btn:hover{border-color:var(--b3);color:var(--t1)}
.num-mode-btn.active{background:var(--ol);border-color:var(--om);color:var(--o)}
.ag-step{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rad2);padding:14px;text-align:center}
.ag-step-num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"Syne",sans-serif;font-weight:800;font-size:14px;margin:0 auto 8px}
.ag-step-title{font-size:11px;font-weight:700;margin-bottom:3px}
.ag-step-sub{font-size:10px;color:var(--t3)}
.ag-arb-opt{display:flex;align-items:center;gap:10px;cursor:pointer;padding:8px 10px;background:var(--bg2);border-radius:var(--rad);border:1.5px solid transparent;transition:all .18s}
.ag-rate-row{display:grid;grid-template-columns:16px 1fr auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--b0);font-size:11px}
.sb-section-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);padding:14px 14px 4px}
.sb-badge{margin-left:auto;background:var(--o);color:#0a0800;font-size:9px;font-weight:800;padding:1px 6px;border-radius:100px;min-width:16px;text-align:center}
.sb-badge-r{background:var(--r);color:#fff}
.sb-balance{margin-left:auto;font-family:"DM Mono",monospace;font-size:10px;color:var(--g);font-weight:600}
.buy-qa{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rad2);padding:14px 10px;text-align:center;cursor:pointer;transition:all .2s}
.buy-qa:hover{border-color:var(--b3);background:var(--bg3);transform:translateY(-2px)}
.buy-qa-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;margin:0 auto 7px}
.buy-qa-t{font-size:11px;font-weight:700;margin-bottom:2px}
.buy-qa-s{font-size:9px;color:var(--t3)}
.buy-deal-row{display:flex;align-items:center;gap:11px;padding:11px 15px;border-bottom:1px solid var(--b0);cursor:pointer;transition:background .15s}
.buy-deal-row:hover{background:var(--bg3)}
.buy-deal-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
/* DEAL FILTER TABS */
.deal-ftab{padding:7px 12px;font-size:11px;font-weight:700;border:none;background:none;color:var(--t2);cursor:pointer;transition:all .18s;white-space:nowrap}
.deal-ftab:hover{color:var(--t1)}
.deal-ftab.active{background:var(--ol);color:var(--o)}
/* Fund chart bars */
.fund-bar{border-radius:3px 3px 0 0;background:var(--g);opacity:.7;transition:opacity .18s;cursor:pointer;min-width:8px}
.fund-bar:hover{opacity:1}

/* SETTINGS PAGE */
.stab{
  flex:1;min-width:100px;padding:11px 10px;font-size:12px;font-weight:700;
  border:none;background:none;color:var(--t2);cursor:pointer;
  transition:all .18s;border-right:1px solid var(--b1);white-space:nowrap;
}
.stab:last-child{border-right:none}
.stab:hover{background:var(--bg3);color:var(--t1)}
.stab.active{background:var(--ol);color:var(--o)}
.scard{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rad2);padding:20px}
.scard-title{font-family:'Syne',sans-serif;font-weight:700;font-size:14px;margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--b0)}
.sfield{display:flex;flex-direction:column;gap:5px;margin-bottom:0}
.sfield-label{font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--t2)}
.sfield-inp{background:var(--bg3);border:1px solid var(--b1);border-radius:var(--rad);
  padding:9px 12px;font-size:13px;color:var(--t0);
  font-family:'DM Sans',sans-serif;outline:none;transition:border-color .18s;width:100%}
.sfield-inp:focus{border-color:var(--o)}
.sfield-hint{font-size:10px;color:var(--t3)}
.sver-row{display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--bg3);border:1px solid var(--b1);border-radius:var(--rad2);
  transition:border-color .18s}
.sver-row.active{border-color:var(--b2)}
/* Toggle switch */
.stoggle{
  width:42px;height:24px;border-radius:12px;background:var(--b2);
  border:1.5px solid var(--b3);cursor:pointer;position:relative;
  transition:all .22s;flex-shrink:0;
}
.stoggle.active{background:var(--o);border-color:var(--od)}
.stoggle-knob{
  position:absolute;top:2px;left:2px;
  width:16px;height:16px;border-radius:50%;
  background:var(--t2);transition:all .22s;
}
.stoggle.active .stoggle-knob{left:calc(100% - 18px);background:white}
/* Theme card */
.stheme{cursor:pointer;padding:10px;border-radius:var(--rad2);
  border:1.5px solid var(--b1);transition:all .18s}
.stheme:hover{border-color:var(--b3)}
.stheme.active{border-color:var(--o);background:var(--ol)}

/* SELLER PROFILE */
.seller-tab{
  flex:1;padding:10px 14px;font-size:12px;font-weight:700;
  border:none;background:none;color:var(--t2);cursor:pointer;
  transition:all .18s;border-right:1px solid var(--b1);
}
.seller-tab:last-child{border-right:none}
.seller-tab:hover{background:var(--bg3);color:var(--t1)}
.seller-tab.active{background:var(--ol);color:var(--o)}

/* PAGE TOP PADDING — адаптивный отступ под nav */
.pg-wrap{padding-top:58px;min-height:100vh}
.app-lay{padding-top:58px}
@media(max-width:768px){
  .main-content{padding-bottom:70px}
  .deal-info{flex-direction:column}
  .desktop-only{display:none !important}
  .lc{width:100% !important;min-width:unset !important}
}
.fo-lsb{border-right:1px solid var(--b1);padding-bottom:20px}
.fo-lsb-sect{padding:6px 14px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);margin-top:14px}
.fo-lsb-item{display:flex;align-items:center;gap:9px;padding:8px 14px;cursor:pointer;transition:background .15s}
.fo-lsb-item:hover{background:var(--bg3)}.fo-lsb-item.active{background:var(--ol)}
.fo-lsb-item.active span{color:var(--o);font-weight:700}
.fo-lsb-ico{font-size:15px;width:20px;text-align:center;flex-shrink:0}.fo-lsb-lbl{font-size:12px;color:var(--t1);flex:1}
.fo-lsb-cnt{font-size:9px;font-family:'DM Mono',monospace;color:var(--t3);background:var(--bg3);padding:2px 6px;border-radius:100px}
.fo-main-hd{display:flex;align-items:center;padding:13px 18px;border-bottom:1px solid var(--b1)}
.fo-main-title{font-family:'Syne',sans-serif;font-weight:800;font-size:16px}
.fo-sort{display:flex;border-bottom:1px solid var(--b1);padding:0 18px}
.fo-sort-btn{padding:9px 12px;font-size:11px;font-weight:600;color:var(--t2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s}
.fo-sort-btn:hover{color:var(--t1)}.fo-sort-btn.active{color:var(--o);border-bottom-color:var(--o)}
.fo-thread{display:flex;align-items:flex-start;gap:11px;padding:11px 18px;border-bottom:1px solid var(--b0);cursor:pointer;transition:background .15s}
.fo-thread:hover{background:var(--bg3)}.fo-thread.pinned{background:linear-gradient(90deg,rgba(255,144,0,.04),transparent)}
.fo-thread-ava{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;margin-top:2px}
.fo-thread-body{flex:1;min-width:0}.fo-thread-title{font-size:13px;font-weight:700;color:var(--t0);line-height:1.35;margin-bottom:4px}
.fo-thread:hover .fo-thread-title{color:var(--o)}
.fo-thread-preview{font-size:11px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px}
.fo-thread-meta{display:flex;align-items:center;gap:9px;font-size:10px;color:var(--t3);flex-wrap:wrap}
.fo-thread-stats{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0;min-width:50px}
.fo-reply{display:flex;gap:11px;padding:14px 0;border-bottom:1px solid var(--b0)}
.fo-reply-ava{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;background:var(--bg3)}
.fo-reply-hd{display:flex;align-items:center;gap:7px;margin-bottom:6px;flex-wrap:wrap}
.fo-react-btn{display:flex;align-items:center;gap:3px;padding:3px 8px;background:var(--bg3);border:1px solid var(--b1);border-radius:100px;font-size:11px;cursor:pointer;transition:all .15s;color:var(--t2)}
.fo-react-btn:hover,.fo-react-btn.active{border-color:var(--o);color:var(--o);background:var(--ol)}
/* Hero canvas */
.hero{position:relative!important;overflow:hidden!important}
.hero .wrap,.hero .hero-grid{position:relative;z-index:2}
.h-glow{display:none!important}
#heroCanvas{position:absolute!important;inset:0;width:100%!important;height:100%!important;pointer-events:none;z-index:0!important;display:block}

/* ── MOBILE NAV ──────────────────────────────────────────── */
#mobileNav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: var(--bg2);
  border-top: 1px solid var(--b1);
  z-index: 400;
  align-items: stretch;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.mob-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  background: none;
  border: none;
  color: var(--t3);
  cursor: pointer;
  padding: 8px 4px 6px;
  transition: color .15s;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .02em;
  min-width: 0;
}
.mob-tab svg { flex-shrink: 0; }
.mob-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; text-align: center; }
.mob-tab:hover { color: var(--t1); }
.mob-tab.active { color: var(--o); }
.mob-tab.active svg { filter: drop-shadow(0 0 6px rgba(255,144,0,.5)); }

@media(max-width: 600px) {
  #mobileNav { display: flex; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  #nav { display: none !important; }
  .full-page { padding-top: 0; }

  /* Pages padding */
  .pg-wrap { padding-top: 12px; }
  .app-lay { padding-top: 0; }

  /* Hero */
  .hero { min-height: 85vh; padding-top: 16px; }
  .hh { font-size: clamp(32px, 9vw, 56px); }

  /* Cards */
  .g3, .g2 { grid-template-columns: 1fr; }
  .section { padding: 40px 0; }

  /* Marketplace */
  .mp-lay { grid-template-columns: 1fr; }
  .mp-side { display: none; }
  .mp-hd { flex-wrap: wrap; gap: 8px; }
  .mp-srch { max-width: 100%; flex: 1; }

  /* Dashboard */
  .dash-lay { grid-template-columns: 1fr; }
  .dash-sb { display: none; }

  /* Forum */
  
  

  /* Deal */
  .deal-lay { grid-template-columns: 1fr; }

  /* Auth */
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-left { display: none; }

  /* Section heading */
  .eyebrow { font-size: 9px; }
  .mob-page-hd { display: flex; }

  /* Seller profile */
  .seller-lay { grid-template-columns: 1fr; }

  /* Auto-garantee */
  .ag-lay { grid-template-columns: 1fr; }

  /* Tables scroll */
  .dt-wrap { overflow-x: auto; }

  /* Card overflow */
  .card { border-radius: var(--rad); }

  /* Wrap padding on mobile */
  .wrap { padding-left: 16px; padding-right: 16px; }
}

@media(min-width: 601px) {
  #mobileNav { display: none !important; }
}


/* Forum layout fix */
.fo-lolz{display:grid;grid-template-columns:210px 1fr;min-height:60vh}

@media(max-width:768px){
  .fo-lolz{grid-template-columns:1fr}
  .fo-lsb{display:none}
}


#page-dash.dash-buy-mode #dashKPIsSell{display:none!important}
#page-dash.dash-buy-mode #dashKPIsBuy{display:grid!important}
#page-dash.dash-buy-mode #dashSellBlock{display:none!important}
#page-dash.dash-buy-mode #dashBuyBlock{display:block!important}

/* ══════════════════════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE OPTIMIZATION
   Breakpoints: 1200 → 1024 → 768 → 600 → 480 → 360
══════════════════════════════════════════════════════════ */

/* ── LARGE DESKTOP 1200px ── */
@media(max-width:1200px){
  .wrap{max-width:100%;padding:0 24px}
  .hero-grid{gap:36px}
  .hstats{gap:18px}
  .g5{grid-template-columns:repeat(4,1fr)}
}

/* ── SMALL DESKTOP / LARGE TABLET 1024px ── */
@media(max-width:1024px){
  .hero-grid{gap:28px;padding:40px 0}
  .g4{grid-template-columns:repeat(3,1fr)}
  .g5{grid-template-columns:repeat(3,1fr)}
  .kgrid{grid-template-columns:repeat(2,1fr)}
  .hh{font-size:clamp(32px,4.5vw,64px)}
  .sh{font-size:clamp(22px,3vw,42px)}
  /* Nav labels condensed */
  .ntab{padding:6px 8px;font-size:11px}
  .nsep{margin:0 2px}
}

/* ── TABLET 768px ── */
@media(max-width:768px){
  /* Nav — hide labels, show only icons */
  .nav-links-group .ntab .ntlbl{display:none}
  .ntab{padding:8px}

  /* Grids collapse */
  .g4,.g5{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr 1fr}

  /* Hero */
  .hero-grid{grid-template-columns:1fr}
  .hero-w{display:none}
  .hero{min-height:auto;padding:32px 0 40px}
  .hero-cta{justify-content:center}
  .hstats{justify-content:center}
  .hero-grid{text-align:center}

  /* Auth */
  .auth-wrap{grid-template-columns:1fr}
  .auth-left{display:none}

  /* Sidebars */
  .mp-lay,.deal-lay,.fo-lay{grid-template-columns:1fr}
  .mp-side,.fo-side{display:none}
  #listingSideCol{display:none}
  .sidebar{display:none}

  /* Inline grid overrides */
  div[style*="grid-template-columns:1fr 300px"],
  div[style*="grid-template-columns:1fr 340px"],
  div[style*="grid-template-columns: 1fr 300px"],
  div[style*="grid-template-columns: 1fr 340px"]{
    grid-template-columns:1fr !important;
  }

  /* Seller profile 5-col stats → 3 col */
  div[style*="grid-template-columns:repeat(5,1fr)"],
  div[style*="grid-template-columns: repeat(5, 1fr)"]{
    grid-template-columns:repeat(3,1fr) !important;
  }

  /* Seller tabs scroll */
  .seller-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .seller-tabs::-webkit-scrollbar{display:none}
  .seller-tab{white-space:nowrap;flex-shrink:0}

  /* Modals */
  .ob-box{width:min(570px,96vw)}

  /* Dashboard layout */
  .dash-lay{grid-template-columns:1fr}
  .dash-sb{display:none}

  /* Seller layout */
  .seller-lay{grid-template-columns:1fr}
  .ag-lay{grid-template-columns:1fr}

  /* Tables horizontal scroll */
  .dt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dt-wrap table{min-width:600px}

  /* Cards padding */
  .card{padding:16px}

  /* Wrap padding */
  .wrap{padding:0 20px}

  /* Section spacing */
  .section{padding:56px 0}

  /* Listing grid: 2 col */
  .lg{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

  /* Categories: 3 col */
  #catsGrid{grid-template-columns:repeat(3,1fr);gap:10px}

  /* Forum layout */
  .fo-lolz{grid-template-columns:1fr}
  .fo-lsb{display:none}

  /* Page padding */
  .pg-wrap{padding-top:58px}
}

/* ── MOBILE 600px (enhanced) ── */
@media(max-width:600px){
  /* All inline grids → 1 col */
  div[style*="grid-template-columns:repeat(5,1fr)"],
  div[style*="grid-template-columns: repeat(5, 1fr)"]{
    grid-template-columns:repeat(2,1fr) !important;
  }
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"]{
    grid-template-columns:repeat(2,1fr) !important;
  }
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"]{
    grid-template-columns:1fr !important;
  }

  /* Modals — full width on mobile */
  .ob-box{width:calc(100vw - 24px);border-radius:var(--rad2)}
  .ob-bd{padding:16px 14px 12px;min-height:200px}
  .ob-hd{padding:14px 14px}
  .ob-ft{padding:10px 14px 14px}
  .ob-step h3{font-size:18px}
  .ob-roles{grid-template-columns:1fr 1fr;gap:8px}

  /* JS-created modals */
  div[style*="max-width:560px"],
  div[style*="max-width: 560px"],
  div[style*="max-width:640px"],
  div[style*="max-width: 640px"]{
    max-width:calc(100vw - 24px) !important;
    border-radius:var(--rad2) !important;
  }

  /* KPI cards: 2 col tight */
  .kgrid{grid-template-columns:1fr 1fr;gap:6px}
  .ki{padding:12px}
  .ki-v{font-size:18px}
  .ki-l{font-size:9px}

  /* Buttons: full width on mobile */
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%;justify-content:center}

  /* Stats row */
  .hstats{flex-wrap:wrap;gap:12px;justify-content:center}
  .hs{text-align:center}
  .hsv{font-size:16px}

  /* Categories: 2 col */
  #catsGrid{grid-template-columns:repeat(2,1fr);gap:8px}
  .cc{padding:12px}
  .cc-icon{width:40px;height:40px}
  .cc-name{font-size:12px}

  /* Listing cards */
  .lc{border-radius:var(--rad)}
  .lg{grid-template-columns:1fr;gap:10px}

  /* Marketplace header */
  .mp-hd{flex-direction:column;align-items:stretch;gap:8px}
  .mp-srch{max-width:100%}
  .mp-chips{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:4px}
  .mp-chips::-webkit-scrollbar{display:none}

  /* Deal messages area */
  .deal-msgs{max-height:50vh}

  /* Purchase rows */
  .purchase-row{padding:10px 12px;gap:10px}
  .purchase-row *{font-size:11px}

  /* Forum threads */
  .fo-thread{padding:9px 12px}
  .fo-thread-ava{width:30px;height:30px;font-size:14px}
  .fo-thread-stats{min-width:40px}

  /* Dispute steps: 3 → scrollable */
  .dp-st{grid-template-columns:repeat(3,1fr);gap:4px}
  .dp-st>div{padding:8px 4px;font-size:10px}

  /* Settings page */
  .settings-sections{grid-template-columns:1fr}

  /* Search bar */
  .topbar-search{width:100%}

  /* Notifications */
  .nav-notif-menu,.nav-user-menu{
    width:calc(100vw - 24px);
    right:auto;left:50%;transform:translateX(-50%);
    max-height:70vh;overflow-y:auto;
  }

  /* Levels grid: horizontal scroll */
  #levelsGrid{
    grid-template-columns:repeat(5,130px);
    overflow-x:auto;padding-bottom:8px;
    scrollbar-width:none;gap:8px;
  }
  #levelsGrid::-webkit-scrollbar{display:none}

  /* Referral/wallet/fund cards */
  .ref-grid,.wallet-grid{grid-template-columns:1fr}

  /* Text overflow */
  .t-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Smooth scrolling containers */
  .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .scroll-x::-webkit-scrollbar{display:none}
}

/* ── SMALL MOBILE 480px ── */
@media(max-width:480px){
  /* Typography */
  .hh{font-size:28px !important}
  .sh{font-size:20px !important}

  /* Tighter padding */
  .wrap{padding:0 12px}
  .section{padding:32px 0}
  .card{padding:12px}

  /* KPI cards: stack */
  .kgrid{grid-template-columns:1fr;gap:6px}
  .ki{padding:10px;display:flex;align-items:center;gap:10px}
  .ki-ico{flex-shrink:0}

  /* Categories: 2 col tighter */
  #catsGrid{gap:6px}
  .cc{padding:10px}
  .cc-icon{width:32px;height:32px}
  .cc-name{font-size:11px}

  /* Listings */
  .lg{gap:8px}
  .lc{border-radius:var(--rad)}

  /* Auth form */
  .auth-right{padding:16px 12px 32px}
  .auth-right input,.auth-right select{font-size:16px} /* Prevent iOS zoom */

  /* Buttons smaller */
  .btn{padding:9px 16px;font-size:12px}
  .btn-lg{padding:12px 20px;font-size:13px}

  /* Deal page */
  .deal-lay{gap:8px;padding:8px 0 72px}

  /* Dispute steps: horizontal scroll */
  .dp-st{display:flex;overflow-x:auto;scrollbar-width:none;gap:6px}
  .dp-st::-webkit-scrollbar{display:none}
  .dp-st>div{flex-shrink:0;min-width:90px}

  /* Forum */
  .fo-thread{gap:8px}
  .fo-thread-ava{width:26px;height:26px;font-size:12px;border-radius:7px}
  .fo-thread-title{font-size:12px}
  .fo-thread-meta{font-size:9px;gap:6px}

  /* Modal bottom sheet on small screens */
  .ob-ov{align-items:flex-end}
  .ob-box{
    width:100vw;border-radius:20px 20px 0 0;
    max-height:90vh;overflow-y:auto;
    animation:slideUp .3s ease;
  }

  /* Onboard roles: stack on very small */
  .ob-roles{grid-template-columns:1fr;gap:6px}

  /* Bottom nav spacing */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}

  /* Seller profile stats → 2 col */
  div[style*="grid-template-columns:repeat(5,1fr)"],
  div[style*="grid-template-columns: repeat(5, 1fr)"]{
    grid-template-columns:repeat(2,1fr) !important;
  }

  /* Escrow box tighter */
  .esc-hd{padding:9px 12px}
  .esc-bd{padding:10px 12px}
  .ek,.ev{font-size:10px}

  /* Verify grid */
  #verifyGrid{gap:8px}

  /* Input font size 16px to prevent iOS zoom */
  input,select,textarea{font-size:16px !important}
}

/* ── EXTRA SMALL 360px ── */
@media(max-width:360px){
  .hh{font-size:24px !important}
  .sh{font-size:18px !important}
  .wrap{padding:0 10px}

  /* Hero compact */
  .hero{padding:20px 0 32px}
  .hero-tag{font-size:9px;padding:3px 8px}
  .hero-cta .btn{font-size:11px;padding:8px 14px}

  /* Bottom nav text smaller */
  .mob-tab{font-size:8px;padding:6px 2px 4px}
  .mob-tab svg{width:18px;height:18px}

  /* Cards very tight */
  .card{padding:10px;border-radius:8px}
  .ki-v{font-size:16px}

  /* Categories 2 col super tight */
  #catsGrid{gap:4px}
  .cc{padding:8px}
  .cc-icon{width:28px;height:28px}
  .cc-name{font-size:10px}
  .cc-cnt{font-size:8px}

  /* Forum ultra compact */
  .fo-thread{padding:7px 8px}
  .fo-thread-title{font-size:11px}

  /* Listing card */
  .lc *{font-size:inherit}
}

/* ── LANDSCAPE PHONE ── */
@media(max-height:500px) and (orientation:landscape){
  .hero{min-height:auto;padding:20px 0}
  .hero-grid{padding:0}
  .hh{font-size:28px !important}
  #mobileNav{height:48px}
  .mob-tab{padding:4px 2px;font-size:8px}
  .mob-tab svg{width:16px;height:16px}
  body{padding-bottom:52px}
  .section{padding:24px 0}
  .ob-ov{align-items:center}
  .ob-box{max-height:85vh;overflow-y:auto;border-radius:var(--rad2)}
}

/* ── TABLET LANDSCAPE ── */
@media(min-width:768px) and (max-width:1024px) and (orientation:landscape){
  .hero-grid{grid-template-columns:1fr 1fr}
  .hero-w{display:block}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
}

/* ── TOUCH DEVICE IMPROVEMENTS ── */
@media(hover:none) and (pointer:coarse){
  /* Larger touch targets */
  .ntab{min-height:44px;min-width:44px}
  .mob-tab{min-height:44px}
  .btn{min-height:44px}
  .fo-thread{min-height:48px}
  .seller-tab{min-height:44px}
  .chip,.mp-chip{min-height:36px;padding:8px 14px}

  /* Remove hover effects that feel sticky on touch */
  .cc:hover{transform:none;box-shadow:none}
  .deal-r:hover{transform:none}
  .lc:hover{transform:none}
  .seller-search-card:hover{transform:none}
  .purchase-row:hover{background:none}

  /* Active states instead */
  .cc:active{transform:scale(.97)}
  .deal-r:active{background:var(--bg4)}
  .lc:active{transform:scale(.98)}
  .btn:active{transform:scale(.97)}
  .mob-tab:active{opacity:.7}
}

/* ── HIGH DPI / RETINA FIXES ── */
@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
  .card,.lc,.cc{border-width:.5px}
  .er{border-width:.5px}
}

/* ── SAFE AREA (NOTCH DEVICES) ── */
@supports(padding:max(0px)){
  .wrap{
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
  }
  #mobileNav{
    padding-bottom:env(safe-area-inset-bottom,0px);
    height:calc(60px + env(safe-area-inset-bottom,0px));
  }
}

/* ── LANG SWITCH ── */
.lang-btn.active{border-color:var(--om) !important;background:var(--ol) !important;color:var(--o) !important}

/* ── PREFERS REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .tick-t{animation:none}
  .h-glow{animation:none}
  .cc-icon{animation:none !important}
  #heroCanvas{display:none}
}