/* PokeQuant v0.7.1 design tokens & base layer */
:root {
  --pq-bg: #070a12;
  --pq-surface: #101726;
  --pq-surface-alt: #162132;
  --pq-border: #253349;
  --pq-text: #e5ecf5;
  --pq-text-dim: #8a97ab;
  --pq-accent: linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899);
  --pq-radius-sm: 6px;
  --pq-radius-md: 10px;
  --pq-radius-lg: 18px;
  --pq-font-stack: 'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --pq-focus: 0 0 0 2px #6366f199,0 0 0 4px #6366f144;
}
html,body { height:100%; }
body { margin:0; font-family: var(--pq-font-stack); background: radial-gradient(circle at 20% 20%, #14213b 0%, #0b101a 55%, #05080d 100%); color: var(--pq-text); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
::selection { background:#6366f1aa; color:#fff; }

/* Layout */
.app-shell { display:flex; min-height:100%; }
.sidebar { width:240px; display:flex; flex-direction:column; gap:20px; padding:20px 18px 24px; background: var(--pq-surface); border-right:1px solid var(--pq-border); position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-0.5px; font-size:18px; }
.brand-badge { width:36px; height:36px; border-radius:12px; background: var(--pq-accent); }
.nav { display:flex; flex-direction:column; gap:4px; }
.nav button { text-align:left; font:inherit; font-size:13px; padding:8px 10px; border:0; background:transparent; color:var(--pq-text-dim); border-radius: var(--pq-radius-sm); cursor:pointer; }
.nav button.active, .nav button:hover { background: var(--pq-surface-alt); color: var(--pq-text); }
.main { flex:1; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:60; backdrop-filter: blur(16px) saturate(160%); background: rgba(10,15,25,0.72); border-bottom:1px solid var(--pq-border); display:flex; align-items:center; gap:14px; padding:10px 20px; }
.grow { flex:1; }

/* Cards */
.panel { border:1px solid var(--pq-border); background: linear-gradient(145deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01)); border-radius: var(--pq-radius-lg); padding:22px 22px 26px; box-shadow:0 4px 28px -8px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.03); position:relative; }
.panel h2 { margin:0 0 14px; font-size:15px; letter-spacing:.5px; }
.grid-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
.tile { border:1px solid var(--pq-border); background: var(--pq-surface-alt); border-radius: var(--pq-radius-md); padding:10px 10px 12px; display:flex; flex-direction:column; gap:6px; cursor:pointer; position:relative; }
.tile:hover { border-color:#3a4d68; }
.tile img { width:100%; height:110px; object-fit:contain; display:block; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); }
.tile .nm { font-size:12px; font-weight:600; line-height:1.2; }
.tile .meta { font-size:10px; color:var(--pq-text-dim); letter-spacing:.5px; }
.tile .row { display:flex; align-items:center; justify-content:space-between; }
.badge { font-size:10px; font-weight:600; padding:2px 6px; border-radius:10px; letter-spacing:.5px; backdrop-filter: blur(8px); }
.badge-buy { background:linear-gradient(135deg,#059669,#10b981); color:#fff; }
.badge-hold { background:linear-gradient(135deg,#6b7280,#94a3b8); color:#fff; }
.badge-sell { background:linear-gradient(135deg,#dc2626,#ef4444); color:#fff; }
.price { font-size:11px; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; color:#e2e8f0; }

/* Utilities */
.mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; }
.hidden { display:none !important; }
.fade-in { animation:fade .5s ease; }
@keyframes fade { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:translateY(0);} }


/* Placeholder skeleton */
.skel { background:linear-gradient(90deg,#1e293b 0,#35455d 40%,#1e293b 80%); background-size:200% 100%; animation:shimmer 2.2s infinite; border-radius: var(--pq-radius-md); }
@keyframes shimmer { 0%{background-position:200% 0;}100%{background-position:-200% 0;} }

/* Responsive */
@media (max-width: 960px){ .sidebar { display:none; } .topbar { padding-left:68px; } }