/* ============================================================
   AltRizz — neonpets.com-inspired light + hot-pink theme
   ============================================================ */
:root{
  --bg:#fff7fb; --bg2:#ffffff; --panel:#ffffff; --panel2:#fff5fa; --card:#ffffff;
  --line:#f3e3ee; --line2:#f6d6e8; --line3:#ecd6e4;
  --text:#1c1322; --text2:#3a2f43; --muted:#8a7f93; --muted2:#a99fb1;

  --pink:#ff1f8e;          /* primary hot pink */
  --pink-deep:#e60f7b;
  --pink-soft:#ffe3f1;
  --mint:#12cfa0;          /* secondary (CART) */
  --mint-soft:#e2fbf3;
  --amber:#f4a722; --red:#ff4d6d; --blurple:#6d6bff;

  --glow:0 10px 26px rgba(255,31,142,.32);
  --glow-soft:0 6px 18px rgba(255,31,142,.18);
  --shadow:0 14px 40px rgba(70,20,55,.10);
  --shadow-sm:0 4px 14px rgba(70,20,55,.07);
  --radius:18px;
  --topbar-bg:rgba(255,255,255,.82);
  color-scheme:light;
}

/* ---------- Dark theme (dark canvas, restrained pink accent) ---------- */
[data-theme="dark"]{
  --bg:#120c16; --bg2:#181019; --panel:#1b1320; --panel2:#221829; --card:#1e1526;
  --line:#2a2031; --line2:#392a42; --line3:#473450;
  --text:#f4ecf7; --text2:#cabbd0; --muted:#988aa0; --muted2:#6f6379;

  --pink:#ff5fae;          /* slightly softened for dark */
  --pink-deep:#ff3d97;
  --pink-soft:#321827;     /* dark pink-tinted surface */
  --mint:#1fd9aa;
  --mint-soft:#11322a;
  --amber:#f4b14a; --red:#ff6480; --blurple:#8b89ff;

  --glow:0 10px 26px rgba(255,31,142,.26);
  --glow-soft:0 6px 18px rgba(255,31,142,.16);
  --shadow:0 16px 44px rgba(0,0,0,.55);
  --shadow-sm:0 4px 14px rgba(0,0,0,.4);
  --topbar-bg:rgba(18,12,22,.82);
  color-scheme:dark;
}
[data-theme="dark"] .signout:hover{background:#2a1620}
[data-theme="dark"] .badge.slate{background:#2a2331;color:#b5a8bd}
[data-theme="dark"] .badge.blurple{background:#23214a;color:#aaa8ff}
[data-theme="dark"] .badge.green,[data-theme="dark"] .badge.mint{color:#3fe3b8}
[data-theme="dark"] .trade-total,[data-theme="dark"] .trade-total .icon{color:#3fe3b8}
[data-theme="dark"] table.data .pos{color:#3fe3b8}
/* keep alert boxes readable on dark */
[data-theme="dark"] .alert.warn{background:#2a2212;border-color:#5a4a1e;color:#f0c873}
[data-theme="dark"] .alert.bad{background:#2c1620;border-color:#5a2435;color:#ff9bb0}
[data-theme="dark"] .alert.ok{background:#10271f;border-color:#1f5a44;color:#5fe3bd}
[data-theme="dark"] .note{background:#2a2212;border-color:#5a4a1e;color:#f0c873}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font:14px/1.6 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh; overflow-x:hidden; position:relative;
}
a{color:var(--pink);text-decoration:none;transition:.18s}
a:hover{color:var(--pink-deep)}
h1,h2,h3{margin:0;letter-spacing:-.5px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--pink-soft);border:1px solid var(--line2);padding:1px 7px;border-radius:7px;font-size:.85em;color:var(--pink-deep)}
.icon{display:inline-block;vertical-align:middle;flex:0 0 auto}

/* ---------- Background (faint pink grid like neonpets) ---------- */
.bg-fx{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(900px 520px at 88% -8%, rgba(255,31,142,.07), transparent 60%),
  radial-gradient(760px 520px at 6% 108%, rgba(18,207,160,.06), transparent 60%),
  var(--bg);}
.grid-overlay{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,31,142,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,31,142,.05) 1px,transparent 1px);
  background-size:38px 38px;mask:radial-gradient(circle at 50% 30%,#000,transparent 80%);opacity:.9}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;will-change:transform}
.b1{width:380px;height:380px;background:radial-gradient(circle,#ff7ec0,transparent 70%);top:-120px;right:6%;animation:float1 20s ease-in-out infinite}
.b2{width:340px;height:340px;background:radial-gradient(circle,#5ff0cf,transparent 70%);bottom:-120px;left:0;animation:float2 24s ease-in-out infinite}
.b3{display:none}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,40px) scale(1.1)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.06)}}

/* ---------- Top navbar ---------- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;padding:14px 30px;
  background:var(--topbar-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;font-size:21px;font-weight:900;color:var(--text);letter-spacing:-.6px}
.brand:hover{color:var(--text)}
.logo-mark{filter:drop-shadow(0 4px 10px rgba(255,31,142,.35));transition:.3s}
.brand:hover .logo-mark{transform:rotate(-10deg) scale(1.08)}
.brand-name b{background:linear-gradient(95deg,var(--pink),#ff6db0);-webkit-background-clip:text;background-clip:text;color:transparent}
.topnav{display:flex;gap:4px;margin-left:16px}
.topnav a{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;color:var(--muted);font-weight:700;font-size:13.5px;position:relative;transition:.2s}
.topnav a .icon{opacity:.75;transition:.2s}
.topnav a:hover{color:var(--text);background:var(--pink-soft)}
.topnav a:hover .icon{opacity:1;color:var(--pink)}
.topnav a.on{color:#fff;background:linear-gradient(135deg,var(--pink),var(--pink-deep));box-shadow:var(--glow-soft)}
.topnav a.on .icon{opacity:1}
.signout{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;color:var(--muted);border:1px solid var(--line2);background:var(--card);transition:.2s}
.signout:hover{color:var(--red);border-color:var(--red);background:#fff0f2}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.topbar-right .signout{margin-left:0}
.themetoggle{cursor:pointer}
.themetoggle:hover{color:var(--pink);border-color:var(--pink);background:var(--pink-soft)}
.themetoggle .icon-sun{display:none}
[data-theme="dark"] .themetoggle .icon-moon{display:none}
[data-theme="dark"] .themetoggle .icon-sun{display:inline-block}

/* ---------- Main ---------- */
.main{max-width:1180px;margin:0 auto;padding:32px 28px 80px}
.page-enter{animation:fadeUp .55s cubic-bezier(.2,.85,.25,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- Page head ---------- */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:28px;flex-wrap:wrap}
.page-head h1{font-size:30px;font-weight:900;letter-spacing:-1px}
.page-head .muted{margin-top:4px}
.muted{color:var(--muted)}.small,.muted.small{font-size:12.5px}
.head-actions{display:flex;gap:11px;align-items:center}

/* ---------- Buttons (neonpets style) ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line2);background:var(--card);color:var(--text);
  padding:11px 19px;border-radius:14px;font-weight:800;cursor:pointer;font-size:13.5px;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;box-shadow:var(--shadow-sm)}
.btn:hover{transform:translateY(-2px);border-color:var(--pink);color:var(--text)}
.btn:active{transform:translateY(0)}
.btn .icon{opacity:.9}
.btn.sm{padding:8px 14px;font-size:12.5px;border-radius:11px}
.btn.primary{background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;border-color:transparent;box-shadow:var(--glow)}
.btn.primary:hover{box-shadow:0 14px 32px rgba(255,31,142,.45);transform:translateY(-3px)}
.btn.primary .icon{opacity:1}
.btn.mint{background:var(--card);color:var(--mint);border-color:rgba(18,207,160,.4)}
.btn.mint:hover{background:var(--mint);color:#fff;border-color:transparent;box-shadow:0 12px 26px rgba(18,207,160,.32)}
.btn.ghost{background:var(--card)}
.btn .count{opacity:.8;font-weight:600}
.link{background:none;border:none;color:var(--pink);cursor:pointer;font:inherit;padding:0;text-decoration:underline;text-underline-offset:2px;font-weight:700}

/* ---------- Custom dropdown (export menu) ---------- */
.dropdown{position:relative}
.dropdown>[data-drop] .icon-chevron{transition:.25s}
.dropdown.open>[data-drop] .icon-chevron{transform:rotate(180deg)}
.dropdown .menu{position:absolute;right:0;top:calc(100% + 10px);min-width:230px;padding:7px;z-index:50;
  background:var(--card);border:1px solid var(--line2);border-radius:15px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top right;
  transition:opacity .18s,transform .18s,visibility .18s}
.dropdown.open .menu{opacity:1;visibility:visible;transform:none}
.dropdown .menu a{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:11px;color:var(--text);font-weight:700;font-size:13.5px;transition:.15s}
.dropdown .menu a .icon{color:var(--pink)}
.dropdown .menu a:hover{background:var(--pink-soft);color:var(--pink-deep);transform:translateX(2px)}
.dropdown .menu .menu-label{padding:7px 13px 5px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted2);font-weight:800}

/* ---------- Custom <select> (cselect) ---------- */
.cselect{display:none}
.cs{position:relative;min-width:160px}
.cs-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--card);border:1.5px solid var(--line2);
  color:var(--text);padding:11px 14px;border-radius:12px;font:inherit;font-weight:700;cursor:pointer;transition:.18s}
.cs-btn:hover{border-color:var(--pink)}
.cs.open .cs-btn{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,31,142,.12)}
.cs-btn .cs-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-btn .icon-chevron{transition:.22s;color:var(--muted);flex:0 0 auto}
.cs.open .cs-btn .icon-chevron{transform:rotate(180deg);color:var(--pink)}
.cs-menu{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:45;max-height:280px;overflow:auto;padding:6px;
  background:var(--card);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top;transition:.16s}
.cs.open .cs-menu{opacity:1;visibility:visible;transform:none}
.cs-opt{padding:10px 12px;border-radius:9px;cursor:pointer;font-weight:600;font-size:13.5px;color:var(--text2);transition:.12s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-opt:hover{background:var(--pink-soft);color:var(--pink-deep)}
.cs-opt.sel{background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff}

/* ---------- Cards ---------- */
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:22px;box-shadow:var(--shadow-sm);transition:.25s}
.card:hover{box-shadow:var(--shadow)}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px}
.card-head h2{font-size:16px;font-weight:800;display:flex;align-items:center;gap:9px}
.card-head h2 .icon{color:var(--pink)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:860px){.cols{grid-template-columns:1fr}.topnav a span{display:none}.topnav a{padding:10px 12px}.main{padding:22px 16px}}

/* ---------- Stat cards ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}
@media(max-width:860px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);transition:.25s}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--pink),var(--mint))}
.stat:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.stat-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--pink-soft);color:var(--pink);margin-bottom:12px}
.stat-label{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;font-weight:800}
.stat-num{font-size:33px;font-weight:900;letter-spacing:-1.4px;margin:5px 0 2px;color:var(--text)}
.stat-num.small{font-size:21px}
.stat-foot{color:var(--muted2);font-size:12px}

/* ---------- Dropzone ---------- */
.dropzone{position:relative;border:2px dashed var(--line2);border-radius:16px;background:var(--panel2);padding:30px;text-align:center;transition:.22s;cursor:pointer;overflow:hidden}
.dropzone.big{padding:54px}
.dropzone:hover,.dropzone.drag{border-color:var(--pink);background:var(--pink-soft)}
.dropzone.drag{transform:scale(1.01)}
.dz-icon{width:60px;height:60px;margin:0 auto 12px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;box-shadow:var(--glow)}
.dropzone.drag .dz-icon{animation:bob .8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.dz-inner b{color:var(--text)}
.upload-result{margin-top:16px}

/* ---------- Feature box (was frozen-box) ---------- */
.frozen-box{text-align:center;padding:14px 10px;color:var(--muted)}
.frozen-ring{width:66px;height:66px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--pink);background:var(--pink-soft);position:relative}
.frozen-ring::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px dashed rgba(255,31,142,.3);animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.frozen-box p{max-width:400px;margin:0 auto 16px;color:var(--text2)}

/* ---------- Badges & alerts ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:4px 11px;border-radius:999px;letter-spacing:.2px}
.badge.tiny{font-size:10px;padding:2px 8px}
.badge.big{font-size:13px;padding:7px 15px}
.badge.green,.badge.mint{background:var(--mint-soft);color:#0a9676}
.badge.pink{background:var(--pink-soft);color:var(--pink-deep)}
.badge.amber{background:#fef0d6;color:#b87708}
.badge.red{background:#ffe1e6;color:#d62d4f}
.badge.blurple{background:#e8e8ff;color:#5654d6}
.badge.slate{background:#efe9f1;color:#7a7184}
.badge.big.green::before,.badge.big.pink::before,.badge.big.amber::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.alert{display:flex;gap:10px;align-items:center;padding:14px 17px;border-radius:14px;margin-bottom:20px;border:1px solid transparent;animation:fadeUp .4s;font-weight:600}
.alert.ok{background:var(--mint-soft);border-color:rgba(18,207,160,.3);color:#0a8e6e}
.alert.warn{background:#fff6e6;border-color:#f6dca0;color:#9a6a08}
.alert.bad{background:#ffe9ed;border-color:#ffc2cd;color:#c92a48}

/* ---------- Tables ---------- */
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th{text-align:left;color:var(--muted);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:10px 11px;border-bottom:2px solid var(--line)}
table.data td{padding:12px 11px;border-bottom:1px solid var(--line)}
table.data tbody tr{transition:.15s}
table.data tbody tr:hover{background:var(--pink-soft)}
table.data tr:last-child td{border-bottom:none}
table.data .pos{color:#0a9676;font-weight:800}
.ellip{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.kv{width:100%;border-collapse:collapse}
table.kv td{padding:11px 7px;border-bottom:1px solid var(--line)}
table.kv td:first-child{color:var(--muted);width:180px;font-weight:600}

/* ---------- Channel tabs ---------- */
.chtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chtab{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:11px;border:1.5px solid var(--line2);
  background:var(--card);color:var(--muted);font-weight:700;font-size:13.5px;transition:.18s}
.chtab .icon{opacity:.7;transition:.18s}
.chtab:hover{color:var(--text);border-color:var(--pink);background:var(--pink-soft)}
.chtab:hover .icon{opacity:1;color:var(--pink)}
.chtab.on{color:#fff;background:linear-gradient(135deg,var(--pink),var(--pink-deep));border-color:transparent;box-shadow:var(--glow-soft)}
.chtab.on .icon{opacity:1;color:#fff}
.chtab-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 6px;border-radius:999px;
  font-size:11px;font-weight:800;background:var(--pink-soft);color:var(--pink-deep);line-height:1}
.chtab.on .chtab-count{background:rgba(255,255,255,.25);color:#fff}

/* ---------- Filters ---------- */
.filters{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.filters input[type=text]{flex:1;min-width:220px;background:var(--card);border:1.5px solid var(--line2);color:var(--text);padding:11px 15px 11px 14px;border-radius:12px;font:inherit;outline:none;transition:.2s}
.filters input[type=text]:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,31,142,.12)}
.filters input::placeholder{color:var(--muted2)}
.filters .check{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;cursor:pointer;user-select:none;font-weight:600}
.val-range{display:flex;align-items:center;gap:6px;background:var(--card);border:1.5px solid var(--line2);border-radius:12px;padding:4px 11px}
.val-range:focus-within{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,31,142,.12)}
.val-range .val-pre{color:var(--muted);font-weight:800}
.val-range .val-sep{color:var(--muted2)}
.val-range input{width:62px;border:none;background:transparent;color:var(--text);font:inherit;font-weight:700;outline:none;padding:6px 0}
.val-range input::placeholder{color:var(--muted2);font-weight:600}
.val-range input::-webkit-outer-spin-button,.val-range input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.filters .check input{accent-color:var(--pink);width:16px;height:16px}

/* ---------- Message list ---------- */
.msglist{padding:6px}
.msg{display:flex;gap:14px;padding:14px;border-radius:14px;transition:.18s;animation:fadeUp .35s both}
.msg:hover{background:var(--pink-soft)}
.av{width:44px;height:44px;flex:0 0 44px;border-radius:14px;background:linear-gradient(135deg,var(--pink),#ff7ab5);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.msg-body{min-width:0;flex:1}
.msg-line{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.msg .name{font-weight:800;color:var(--text)}
.msg .chan{color:var(--pink);font-size:12px;font-weight:800}
.msg .time{color:var(--muted2);font-size:12px;font-weight:600}
.msg .content{white-space:pre-wrap;word-break:break-word;margin-top:3px;color:var(--text2)}

/* ---------- Trade / inventory card body ---------- */
.trade{margin-top:8px;display:flex;flex-direction:column;gap:11px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:14px;padding:13px 15px}
.trade-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.trade-title{display:inline-flex;align-items:center;gap:7px;font-weight:800;color:var(--text);font-size:14px}
.trade-title .icon{color:var(--pink)}
.trade-total{display:inline-flex;align-items:center;gap:5px;font-weight:900;font-size:13px;color:#0a9676;
  background:var(--mint-soft);border:1px solid rgba(18,207,160,.3);padding:4px 12px;border-radius:999px}
.trade-total .icon{color:#0a9676}
/* value tiers — feed glow by total value */
.trade-total.tier-high{background:#fcefd0;border-color:#f0c976;color:#b3791a;box-shadow:0 0 14px rgba(244,167,34,.35)}
.trade-total.tier-high .icon{color:#b3791a}
.trade-total.tier-elite{background:linear-gradient(135deg,#ffc64d,#ff9d00);border-color:transparent;color:#5a3a00;box-shadow:0 0 20px rgba(255,164,0,.55);animation:pulse 1.8s infinite}
.trade-total.tier-elite .icon{color:#5a3a00}
[data-theme="dark"] .trade-total.tier-high{background:#33270e;color:#f0c873;border-color:#5a4a1e}
[data-theme="dark"] .trade-total.tier-high .icon{color:#f0c873}
.msg.tier-high{box-shadow:inset 3px 0 0 #f0c976}
.msg.tier-elite{box-shadow:inset 3px 0 0 #ff9d00}

/* fetch form — single centered card (no more 2-col with how-to) */
.fetch-card{max-width:680px}
.trade-meta{display:flex;flex-wrap:wrap;gap:8px}
.trade-meta .kv{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line2);
  padding:5px 11px;border-radius:10px;font-size:12px}
.trade-meta .kv-k{color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.4px;font-size:10.5px}
.trade-meta .kv code{background:transparent;border:none;padding:0;color:var(--text);font-weight:700}
/* item list — one row per item, name left / price right */
.trade-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.trade-items .item{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 10px;border-radius:9px;font-size:13px;color:var(--text2);transition:.14s}
.trade-items .item:hover{background:var(--card)}
.trade-items .item-name{font-weight:600;word-break:break-word}
.trade-items .item-price{flex:0 0 auto;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.trade-items .item.wanted{background:var(--pink-soft)}
.trade-items .item.wanted .item-name{color:var(--pink-deep);font-weight:800}
.trade-items .item.wanted .item-price{color:var(--pink-deep)}
.trade-note{color:var(--muted);font-size:12px}
/* claimed-card credentials (account + cookie, visible on Claimed tab) */
.creds{margin-top:8px;display:flex;flex-direction:column;gap:7px}
.cred{display:flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line2);
  border-radius:11px;padding:7px 11px}
.cred-k{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--muted);min-width:78px}
.cred-v{flex:1;min-width:0;background:transparent;border:none;padding:0;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cred-copy{flex:0 0 auto;border:1.5px solid var(--line2);background:var(--card);color:var(--text2);font:inherit;font-weight:800;
  font-size:11.5px;padding:5px 11px;border-radius:9px;cursor:pointer;transition:.16s}
.cred-copy:hover{border-color:var(--pink);color:#fff;background:linear-gradient(135deg,var(--pink),var(--pink-deep))}

/* per-message action (Copy → claim / Return) */
.msg-act{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line2);background:var(--card);
  color:var(--text2);font:inherit;font-weight:800;font-size:12px;padding:6px 12px;border-radius:10px;cursor:pointer;
  opacity:.6;transition:.16s;flex:0 0 auto}
.msg:hover .msg-act,.msg-act:focus-visible{opacity:1}
.msg-act .icon{opacity:.85}
.msg-act.claim:hover{border-color:var(--pink);color:#fff;background:linear-gradient(135deg,var(--pink),var(--pink-deep));box-shadow:var(--glow-soft)}
.msg-act.return:hover{border-color:var(--mint);color:#fff;background:var(--mint);box-shadow:0 8px 18px rgba(18,207,160,.3)}
.msg-act:disabled{opacity:.5;cursor:default}
@media(hover:none){.msg-act{opacity:1}}
.msg.leaving{animation:msgLeave .32s forwards}
@keyframes msgLeave{to{opacity:0;transform:translateX(28px);max-height:0;padding-top:0;padding-bottom:0;margin:0}}

/* ---------- Claim panel (slides up bottom-right, chat-box style) ---------- */
.cv-overlay{position:fixed;inset:0;z-index:130;display:none;pointer-events:none}
.cv-overlay.open{display:block}
.cv-modal{position:fixed;right:22px;bottom:22px;width:370px;max-width:calc(100vw - 28px);max-height:min(80vh,560px);
  pointer-events:auto;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line2);
  border-radius:18px;box-shadow:0 24px 60px rgba(70,20,55,.28);overflow:hidden;
  transform:translateY(20px) scale(.98);opacity:0;transition:transform .3s cubic-bezier(.2,.85,.25,1),opacity .25s}
.cv-overlay.open .cv-modal{transform:none;opacity:1}
.cv-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff}
.cv-head h3{font-size:15px;font-weight:900;display:flex;align-items:center;gap:7px}
.cv-x{background:rgba(255,255,255,.2);border:none;color:#fff;width:28px;height:28px;border-radius:9px;
  font-size:19px;line-height:1;cursor:pointer;transition:.16s;flex:0 0 auto}
.cv-x:hover{background:rgba(255,255,255,.35)}
.cv-body{padding:15px 16px;display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.cv-sec{display:flex;flex-direction:column;gap:7px}
.cv-label{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.cv-row{display:flex;align-items:center;gap:8px}
.cv-val{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line2);border-radius:11px;
  padding:10px 12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:var(--text);
  font-weight:700;overflow-x:auto;white-space:nowrap}
.cv-cookie{width:100%;min-height:84px;max-height:200px;resize:vertical;background:var(--panel2);border:1px solid var(--line2);
  border-radius:12px;padding:11px 12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
  color:var(--text2);line-height:1.5;word-break:break-all;outline:none}
.cv-cookie:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,31,142,.12)}
.cv-copy{flex:0 0 auto;border:1.5px solid var(--line2);background:var(--card);color:var(--text);font:inherit;font-weight:800;
  font-size:12.5px;padding:9px 14px;border-radius:11px;cursor:pointer;transition:.16s}
.cv-copy:hover{border-color:var(--pink);color:#fff;background:linear-gradient(135deg,var(--pink),var(--pink-deep));box-shadow:var(--glow-soft)}
.cv-copy.big{width:100%;padding:11px;font-size:13.5px}
/* phones: dock to the bottom edge as a full-width sheet */
@media(max-width:560px){
  .cv-modal{right:10px;left:10px;bottom:10px;width:auto;max-width:none;max-height:78vh;border-radius:18px}
}

/* ---------- Confirm dialog (ask) ---------- */
.ask-overlay{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(28,8,22,.5);backdrop-filter:blur(4px);opacity:0;transition:opacity .18s}
.ask-overlay.open{opacity:1}
.ask-modal{width:min(400px,100%);background:var(--card);border:1px solid var(--line2);border-radius:20px;padding:24px;
  box-shadow:var(--shadow);transform:translateY(12px) scale(.97);transition:transform .24s cubic-bezier(.2,.85,.25,1)}
.ask-overlay.open .ask-modal{transform:none}
.ask-title{font-size:18px;font-weight:900;letter-spacing:-.4px;margin-bottom:9px}
.ask-msg{color:var(--text2);font-size:14px;line-height:1.6}
.ask-msg b{color:var(--pink-deep)}
.ask-msg .ask-sub{display:block;margin-top:7px;color:var(--muted);font-size:12.5px}
.ask-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}

/* ---------- Toast / popup ---------- */
.toast-wrap{position:fixed;right:22px;bottom:22px;z-index:120;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{pointer-events:auto;min-width:210px;max-width:340px;padding:13px 17px;border-radius:14px;font-weight:700;font-size:13.5px;
  color:var(--text);background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow);
  opacity:0;transform:translateY(14px) scale(.96);transition:.26s cubic-bezier(.2,.85,.25,1);display:flex;align-items:center;gap:9px}
.toast.in{opacity:1;transform:none}
.toast b{color:var(--pink-deep)}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);flex:0 0 auto}
.toast.bad{border-color:#ffc2cd}
.toast.bad::before{background:var(--red);box-shadow:0 0 10px var(--red)}
.toast.bad b{color:#c92a48}
@media(max-width:560px){.toast-wrap{left:14px;right:14px;bottom:14px}.toast{max-width:none}}
.atts{display:flex;flex-wrap:wrap;gap:9px;margin-top:9px}
.att{display:inline-flex;gap:7px;align-items:center;font-size:12.5px;background:var(--card);border:1.5px solid var(--line2);padding:7px 11px;border-radius:11px;color:var(--text2);font-weight:600;transition:.18s}
.att .icon{color:var(--pink)}
.att:hover{border-color:var(--pink);color:var(--pink-deep);box-shadow:var(--glow-soft)}
.att-img{display:block;border-radius:13px;overflow:hidden;border:1.5px solid var(--line2);max-width:240px;transition:.2s}
.att-img:hover{border-color:var(--pink);box-shadow:var(--glow-soft);transform:translateY(-2px)}
.att-img img{display:block;max-width:240px;max-height:200px;object-fit:cover}
.center{text-align:center;padding:36px}

/* ---------- Pager ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:18px;margin:16px 0 10px}

/* ---------- Lists / steps / code ---------- */
.fmt-list{margin:0;padding-left:20px;line-height:1.8}
.fmt-list li{margin-bottom:9px;color:var(--muted)}
.fmt-list b{color:var(--text)}
.steps{counter-reset:step;list-style:none;padding-left:0;margin:0}
.steps li{position:relative;padding-left:42px;margin-bottom:14px;color:var(--text2)}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:-2px;width:28px;height:28px;border-radius:10px;background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;box-shadow:var(--glow-soft)}
.sub{font-size:13px;color:var(--muted);margin:18px 0 7px;font-weight:700}
pre.code{background:#1c1322;border:1px solid #2a1f33;border-radius:14px;padding:16px;overflow:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:#ffd0e8;line-height:1.6}
.copyrow{display:flex;gap:10px;align-items:center}
.copyrow .grow{flex:1;overflow:auto;white-space:nowrap;padding:11px 14px;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;color:var(--pink-deep);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}

/* ---------- Fetch form ---------- */
.vform{display:flex;flex-direction:column;gap:15px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld>span{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:var(--muted)}
.fld>span .icon{color:var(--pink)}
.fld input{background:var(--card);border:1.5px solid var(--line2);color:var(--text);padding:12px 14px;border-radius:12px;font:inherit;outline:none;transition:.2s;width:100%}
.fld input:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,31,142,.12)}
.fld input::placeholder{color:var(--muted2)}
.fld-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.fld-row.two .fld{flex:1;min-width:180px}
@media(max-width:520px){.fld-row.two{flex-direction:column}}
.seg{display:inline-flex;background:var(--panel2);border:1.5px solid var(--line2);border-radius:13px;padding:4px;gap:4px}
.seg-btn{border:none;background:transparent;color:var(--muted);font:inherit;font-weight:800;font-size:13px;padding:9px 16px;border-radius:9px;cursor:pointer;transition:.2s}
.seg-btn:hover{color:var(--text)}
.seg-btn.on{background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;box-shadow:var(--glow-soft)}
.seg.mint .seg-btn.on{background:linear-gradient(135deg,var(--mint),#0bb98e)}
.btn-row{display:flex;gap:11px;flex-wrap:wrap;margin-top:4px}
.check{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;cursor:pointer;user-select:none;font-weight:600}
.check input{accent-color:var(--pink);width:16px;height:16px}
.inline-check{margin-top:-2px}
.autobtn.on{background:linear-gradient(135deg,var(--mint),#0bb98e);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(18,207,160,.32)}
.autobtn.on .icon{animation:spin 2.4s linear infinite}
.note{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:13px 15px;border-radius:13px;background:#fff6e6;border:1px solid #f6dca0;color:#946708;font-size:12.5px;line-height:1.6;font-weight:500}
.note .icon{color:var(--amber);flex:0 0 auto;margin-top:1px}

/* ---------- Progress / job ---------- */
.prog-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.progress{height:13px;border-radius:999px;background:var(--pink-soft);overflow:hidden;border:1px solid var(--line2)}
.progress-bar{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--mint));box-shadow:0 0 14px rgba(255,31,142,.5);transition:width .4s ease}
.progress-bar.indet{width:35%!important;animation:indet 1.2s ease-in-out infinite}
@keyframes indet{0%{margin-left:-35%}100%{margin-left:100%}}
.job-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.js{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center}
.js-num{font-size:27px;font-weight:900;letter-spacing:-.6px;color:var(--text)}
.js-num.pos{color:#0a9676}
.js-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:800;margin-top:3px}

/* ---------- Saved channels ---------- */
.chan-list{display:flex;flex-direction:column;gap:12px}
.chan-card{display:flex;align-items:center;gap:14px;padding:15px 17px;background:var(--card);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow-sm);transition:.2s}
.chan-card:hover{border-color:var(--line2);box-shadow:var(--shadow);transform:translateY(-2px)}
.chan-ico{width:44px;height:44px;flex:0 0 44px;border-radius:13px;background:var(--pink-soft);color:var(--pink);display:flex;align-items:center;justify-content:center}
.chan-meta{flex:1;min-width:0}
.chan-name{font-weight:800;color:var(--text);font-size:15px;display:flex;align-items:center;gap:8px}
.chan-sub{color:var(--muted);font-size:12.5px;margin-top:2px;display:flex;gap:12px;flex-wrap:wrap}
.chan-sub b{color:var(--text2)}
.chan-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.chan-auto-status{font-weight:600}
/* Auto pill toggle */
.autopill{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line2);background:var(--card);
  color:var(--muted);font:inherit;font-weight:800;font-size:12.5px;padding:7px 13px;border-radius:999px;cursor:pointer;transition:.18s}
.autopill .autopill-dot{width:9px;height:9px;border-radius:50%;background:var(--muted2);transition:.18s}
.autopill:hover{border-color:var(--mint)}
.autopill.on{background:var(--mint-soft);border-color:rgba(18,207,160,.45);color:#0a9676}
.autopill.on .autopill-dot{background:var(--mint);box-shadow:0 0 8px var(--mint);animation:pulse 1.6s infinite}
@media(max-width:640px){.chan-card{flex-wrap:wrap}.chan-actions{width:100%;justify-content:flex-start;margin-top:4px}}

/* ---------- Login ---------- */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-card{position:relative;background:var(--card);border:1px solid var(--line2);border-radius:26px;padding:44px 38px;width:374px;text-align:center;box-shadow:var(--shadow);animation:fadeUp .5s cubic-bezier(.2,.85,.25,1)}
.login-logo{width:76px;height:76px;margin:0 auto 16px;border-radius:22px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--pink),var(--pink-deep));box-shadow:var(--glow);animation:floatLogo 4s ease-in-out infinite}
@keyframes floatLogo{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.login-card h1{font-size:26px;margin-bottom:5px;font-weight:900}
.login-card h1 b{background:linear-gradient(95deg,var(--pink),#ff6db0);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-sub{color:var(--muted);margin:0 0 22px;font-size:13.5px}
.login-field{position:relative;margin-bottom:14px}
.login-field .icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted2)}
.login-card input{width:100%;text-align:left;padding:13px 14px 13px 44px;border:1.5px solid var(--line2);border-radius:13px;font:inherit;outline:none;background:var(--card);transition:.2s}
.login-card input:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,31,142,.12)}
.login-card button{width:100%;padding:14px;border:none;border-radius:14px;background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;font-weight:900;cursor:pointer;font-size:15px;box-shadow:var(--glow);transition:.2s;display:flex;align-items:center;justify-content:center;gap:8px}
.login-card button:hover{box-shadow:0 16px 34px rgba(255,31,142,.45);transform:translateY(-2px)}
.login-error{display:flex;gap:8px;align-items:center;justify-content:center;background:#ffe9ed;color:#c92a48;border:1px solid #ffc2cd;padding:11px;border-radius:12px;margin-bottom:16px;font-size:13px;font-weight:600;animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,31,142,.22);border-radius:10px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,31,142,.4);background-clip:content-box}
::selection{background:var(--pink-soft);color:var(--pink-deep)}

/* ---------- Empty state ---------- */
.empty-state{text-align:center;padding:46px 20px;color:var(--muted)}
.empty-ico{width:62px;height:62px;margin:0 auto 14px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:var(--pink-soft);color:var(--pink)}
.empty-state p{margin:0;font-weight:600;font-size:14px}

/* ---------- Infinite scroll loader (skeleton shimmer) ---------- */
.more-loader{display:flex;flex-direction:column;gap:10px;padding:8px}
.more-loader[hidden]{display:none}
.sk-card{height:58px;border-radius:14px;background:
   linear-gradient(100deg,var(--panel2) 30%,var(--pink-soft) 50%,var(--panel2) 70%);
  background-size:200% 100%;animation:shimmer 1.3s linear infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.more-end{text-align:center;padding:16px;color:var(--muted2);font-size:12.5px;font-weight:600;letter-spacing:.3px}
.more-end[hidden]{display:none}

/* ---------- Mobile bottom nav ---------- */
.bottomnav{display:none}
@media(max-width:680px){
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--topbar-bg);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:6px 4px env(safe-area-inset-bottom,6px)}
  .bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border-radius:12px;
    color:var(--muted);font-size:10.5px;font-weight:800;transition:.15s}
  .bottomnav a .icon{opacity:.8}
  .bottomnav a.on{color:var(--pink)}
  .bottomnav a.on .icon{opacity:1}
  .main{padding-bottom:84px}
}

/* ============================================================
   Responsive — tablet & phone tuning (every device)
   ============================================================ */
@media(max-width:900px){
  .main{padding:24px 18px 72px}
  .page-head h1{font-size:26px}
}
@media(max-width:680px){
  /* top bar: compact, nav scrolls sideways instead of overflowing */
  .topbar{padding:11px 14px;gap:10px}
  .brand{font-size:18px}
  .topnav{margin-left:6px;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .topnav::-webkit-scrollbar{display:none}
  .topnav a{padding:9px 11px;font-size:13px}
  .signout{width:38px;height:38px}

  .main{padding:18px 13px 72px}
  .page-head{margin-bottom:18px;gap:12px}
  .page-head h1{font-size:23px}
  .head-actions{width:100%;flex-wrap:wrap}
  .card{padding:16px;border-radius:15px}

  /* filters: search takes a full row, selects share the next */
  .filters input[type=text]{min-width:0;flex:1 1 100%}
  .filters .cs{min-width:0;flex:1 1 44%}
  .filters .btn{flex:1 1 auto;justify-content:center}

  .chtabs{gap:6px}
  .chtab{padding:8px 11px;font-size:12.5px}

  .trade{padding:11px 12px}
  .stat-num{font-size:28px}
}
@media(max-width:440px){
  .stat-grid{grid-template-columns:1fr 1fr;gap:12px}
  .page-head h1{font-size:21px}
  .msg{padding:12px 8px;gap:10px}
  .av{width:38px;height:38px;flex-basis:38px}
  .msg-act{padding:6px 10px}
  .trade-items .item{padding:6px 8px;font-size:12.5px}
  .dropzone{padding:22px}
  .login-card{padding:34px 22px;width:100%}
}