/* ======= THEME ======= */
:root{
  --bg:#050505; --bg-grad: radial-gradient(1000px 600px at 50% 0%, #141414 0%, #050505 60%);
  --card:#0a0a0a; --card-2:#0e0e0e; --text:#f7f7f7; --muted:#a3a3a3; --line:#1e1e1e; --accent:#ffffff;
  --ring:rgba(255,255,255,.14);
  --shadow:0 24px 64px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.35);
  --tabbar-h:84px; --vh:1vh; --drawer-max:68vh; --radius:18px;

  --focus: 0 0 0 2px rgba(255,255,255,.3);
  --blur: blur(12px);

  --safe-top: max(10vh, env(safe-area-inset-top));
}

/* ======= BASE ======= */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);background-image:var(--bg-grad);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
body,.app-root{padding-top:var(--safe-top);box-sizing:border-box}
button{cursor:pointer}
:focus-visible{outline:none; box-shadow: var(--focus)}

.app{min-height:calc(var(--vh) * 100);padding-bottom:var(--tabbar-h)}
.screen{min-height:calc(var(--vh) * 100 - var(--tabbar-h));padding:16px 14px 110px}
.page{display:none}
.page.active{display:block}

/* ======= GLASS, LIFT ======= */
.glass{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));backdrop-filter: var(--blur)}
.lift{transition:transform .15s ease, box-shadow .15s ease}
.lift:active{transform:translateY(1px)}
.lift:hover{transform:translateY(-1px)}

/* ======= CARDS ======= */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px; margin-bottom:12px
}
.card.center{text-align:center}
.card-h{font-size:13px;color:var(--muted);margin-bottom:10px}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.badge{background:#111;border:1px solid #222;border-radius:8px;padding:2px 6px;font-size:11px;letter-spacing:.3px}

/* ======= AVATAR ======= */
.name-row{display:flex;align-items:center;gap:8px;justify-content:center}
.avatar{position:relative;display:inline-block}
.avatar img{width:120px;height:120px;border-radius:50%;object-fit:cover;filter:grayscale(12%)}
.avatar .ring{position:absolute;inset:-8px;border-radius:50%;border:8px solid var(--ring);filter:blur(.3px)}
.ring-anim{mask: conic-gradient(from var(--angle, 0deg), transparent 0 20%, white 20% 25%, transparent 25% 45%, white 45% 50%, transparent 50% 70%, white 70% 75%, transparent 75% 100%); animation:spin 6s linear infinite}
@keyframes spin{to{--angle:360deg}}
h1{font-size:22px;margin:10px 0 6px}

/* ======= GRID / TILES ======= */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px;margin:14px auto 4px}
.tile{
  position:relative;border:none;border-radius:14px;background:linear-gradient(180deg,#0f0f0f,#0b0b0b);
  color:var(--text);padding:16px 14px;text-align:left;border:1px solid var(--line);box-shadow:var(--shadow)
}
.t-title{font-weight:800; letter-spacing:.2px}
.t-sub{font-size:12px;color:var(--muted);margin-top:4px}
.hint{opacity:.85}
.has-modal .tile-dot{position:absolute;right:10px;top:10px;width:6px;height:6px;border-radius:50%;background:#fff;opacity:.9}

/* ======= STATS ======= */
.gp-row{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-bottom:8px;flex-wrap:wrap}
.gp-track{height:10px;border-radius:999px;background:#0d0d0d;border:1px solid #222;overflow:hidden;position:relative}
.gp-fill{
  height:100%;
  background:linear-gradient(90deg,#fff 0%, #d7d7d7 50%, #fff 100%);
  width:0%; transition:width .25s ease
}

/* ======= INFO ======= */
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kv-k{font-size:12px;color:var(--muted)}
.kv-v{font-size:14px}
.chip-ghost{border:1px dashed rgba(255,255,255,.25); border-radius:8px; padding:2px 6px; margin-left:6px}

/* ======= PICKERS ======= */
.pickers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.picker{position:relative;background:linear-gradient(180deg,#0f0f0f,#0b0b0b);border:1px solid var(--line);border-radius:14px;padding:10px}
.picker label{display:block;color:var(--muted);font-size:12px;margin:0 0 6px 4px}
.picker-list{
  height:232px; overflow-y:auto; overflow-x:hidden;
  scroll-snap-type:y mandatory; padding:44px 0;
  mask-image:linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  -webkit-overflow-scrolling: touch;
}
.picker-item{
  height:44px; display:flex; align-items:center; justify-content:center;
  scroll-snap-align:center; font-weight:800; color:#d0d0d0;
  transition:transform .12s, opacity .12s, color .12s; will-change:transform,opacity;
  transform:scale(.92); opacity:.6;
}
.picker-item.active{color:var(--text);opacity:1;transform:scale(1.18)}
.picker-mask{
  position:absolute;left:10px;right:10px;top:calc(50% - 22px);height:44px;
  border:1px dashed rgba(255,255,255,.22);border-radius:10px;pointer-events:none
}

/* ======= EXPLORE ======= */
.ex-hero{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ex-hero-title{font-weight:800;font-size:18px}
.chip{background:#111;border:1px solid #222;border-radius:999px;padding:6px 10px;font-size:12px}

.ex-stack{position:relative;min-height:46vh;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#0a0a0a,#090909);box-shadow:var(--shadow);padding:10px 12px;margin-bottom:72px;overflow:hidden}
.ex-page{position:absolute;inset:10px 12px;opacity:0;transform:translateX(10px);transition:opacity .22s ease, transform .22s ease;overflow:auto}
.ex-page.active{opacity:1;transform:translateX(0)}
.ex-head{font-weight:800;margin:2px 0 10px}
.ex-nav{
  position:fixed;left:14px;right:14px;bottom:calc(var(--tabbar-h) + 10px);
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;z-index:5
}
.ex-nav-btn{
  border:1px solid var(--line);background:linear-gradient(180deg,#0f0f0f,#0b0b0b);color:#fff;border-radius:14px;
  padding:10px 12px;display:flex;gap:8px;align-items:center;justify-content:center;min-height:46px
}
.ex-nav-btn svg{width:18px;height:18px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ex-nav-btn.active{background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));border-color:rgba(255,255,255,.35)}

/* ======= TABLE ======= */
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.table-dense th,.table-dense td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left}
.table th{color:var(--muted);font-weight:600}
.table tr:hover td{background:rgba(255,255,255,.02)}

/* ======= SHOP ======= */
.shop-list{display:grid;gap:10px}
.shop-card{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  background:linear-gradient(180deg,#101010,#0c0c0c)
}
.shop-card .item-title{display:inline-block;margin-right:6px;font-weight:700}
.shop-card .badge-sold{display:inline-block;padding:2px 6px;border:1px solid #333;border-radius:999px;font-size:11px;color:#bbb}

/* ======= TABBAR ======= */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;height:var(--tabbar-h);padding:10px 12px;border-top:1px solid var(--line);
  background:rgba(0,0,0,.72);backdrop-filter: blur(14px);
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;z-index:6
}
.tabbar button{
  border:none;background:linear-gradient(180deg,#0f0f0f,#0b0b0b);
  border:1px solid var(--line);border-radius:16px;color:var(--text);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:var(--shadow);min-height:64px
}
.tabbar button.active{background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); border-color: rgba(255,255,255,.35)}
.tabbar svg{width:22px;height:22px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.frost{backdrop-filter: blur(16px) saturate(120%)}

/* ======= BUTTONS ======= */
.btn{border:1px solid var(--line);border-radius:12px;background:#fff;color:#000;font-weight:800;padding:12px 14px;transition: transform .12s ease}
.btn.primary{width:100%}
.btn.ghost{background:#0f0f0f;color:#fff}
.btn:disabled{opacity:.45}
.btn.big{font-size:18px}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn-sub{position:absolute;right:12px;bottom:8px;font-size:11px;color:#333}
.pulse-hover{animation: none}
.pulse-hover:hover{animation: pulseText .6s ease}

/* ======= DRAWER ======= */
.decode-drawer{position:fixed;left:0;right:0;bottom:var(--tabbar-h);background:linear-gradient(180deg,#0b0b0b,#0a0a0a);border-top:1px solid var(--line);box-shadow:var(--shadow);max-height:0;transition:max-height .25s ease;z-index:7;overflow:hidden}
.decode-drawer.open{max-height:var(--drawer-max)}
.drawer-head{display:flex;align-items:center;gap:10px;padding:6px 10px;border-bottom:1px solid var(--line)}
.drawer-title{margin:6px 2px 10px 2px}
.icon-btn{border:none;background:transparent;padding:8px;border-radius:12px}
.icon-btn svg{width:24px;height:24px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.drawer-body{padding:8px 14px 14px}
.drawer-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 14px;border-top:1px solid var(--line);background:rgba(0,0,0,.2)}

/* ======= VERIFY ======= */
.verify{display:grid;gap:12px}
.verify-row{display:flex;align-items:center;gap:12px}
.code-display{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:28px;letter-spacing:2px;background:linear-gradient(180deg,#0f0f0f,#0b0b0b);border:1px solid var(--line);border-radius:10px;padding:10px 14px;min-width:160px;text-align:center}
.code-display.glow{box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 0 32px rgba(255,255,255,.06)}
.progress{height:8px;border-radius:999px;background:#0d0d0d;border:1px solid #222;overflow:hidden;position:relative}
.progress.small{height:6px}
.progress-fill{height:100%;background:linear-gradient(90deg,#fff,#cfcfcf);width:0%}
.progress-dot{position:absolute;top:-3px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #000;transform:translateX(-50%)}

/* ======= SPINNER / FX ======= */
.spinner{display:flex;gap:6px}
.spinner div{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.28;animation:blink 1.2s infinite}
.spinner div:nth-child(2){animation-delay:.2s}
.spinner div:nth-child(3){animation-delay:.4s}
@keyframes blink{0%{opacity:.28}50%{opacity:1}100%{opacity:.28}}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.cd-shake{animation:shake .35s ease}
@keyframes pulseText{0%{opacity:1;transform:translateY(0)}50%{opacity:.7;transform:translateY(-1px)}100%{opacity:1;transform:translateY(0)}}
.pulse{animation:pulseText .6s ease}

/* ======= MODALS ======= */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.54);padding:20px;z-index:20;backdrop-filter: blur(10px)}
.modal.open{display:flex;animation:modalFade .18s ease both}
.modal-box{background:linear-gradient(180deg,#0f0f0f,#0b0b0b);border:1px solid var(--line);border-radius:18px;max-width:560px;width:100%;padding:16px 18px;box-shadow:var(--shadow);animation:modalPop .18s ease both}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalPop{from{transform:scale(.96);opacity:.6}to{transform:scale(1);opacity:1}}

/* ======= INVENTORY ======= */
.items-grid{display:grid;gap:10px}
.item-card{border:1px solid var(--line);background:linear-gradient(180deg,#101010,#0c0c0c);border-radius:14px;padding:12px}
.item-title{font-weight:800}
.item-sub{font-size:12px;color:var(--muted);margin-top:2px}

/* ======= TOASTS / OFFLINE ======= */
.toasts{position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + 12px);display:grid;justify-items:center;gap:8px;z-index:50;pointer-events:none}
.toast{pointer-events:auto;background:linear-gradient(180deg,#101010,#0d0d0d);border:1px solid var(--line);color:#fff;border-radius:12px;padding:10px 12px;box-shadow:var(--shadow);animation:toastIn .18s ease}
@keyframes toastIn{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
.netchip{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--tabbar-h) + 8px); z-index:60;
  background:#1a1a1a; color:#fff; border:1px solid #2a2a2a;
  padding:8px 12px; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.netchip.show{ opacity:1; transform:translateX(-50%) translateY(-2px); }

/* ======= MEDIA / ACCESSIBILITY ======= */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}
@media (min-width:740px){
  .screen{padding:20px 18px 120px}
}
.nav-btn img{width:24px;height:24px;margin-right:6px}