/* PixRouter Design System v3 — Premium */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
  --bg: #0b0b14;
  --bg-alt: #090911;
  --surface: #12121e;
  --surface-alt: #1a1a2e;
  --surface-hover: #22223a;
  --border: #1e1e34;
  --border-light: #2a2a48;
  --border-focus: #4444aa;
  --text: #eeeef8;
  --text-secondary: #9a9ab4;
  --text-tertiary: #5c5c7a;
  --accent: #6366f1;
  --accent-hover: #7c7ff5;
  --accent-subtle: rgba(99,102,241,.12);
  --accent-glow: rgba(99,102,241,.2);
  --cyan: #06b6d4;
  --emerald: #22c55e;
  --amber: #f59e0b;
  --rose: #f43f5e;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --radius-round: 999px;
  --ease: cubic-bezier(.4,0,.2,1);
  --duration: 200ms;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6}
a{color:var(--accent);text-decoration:none;transition:opacity var(--duration) var(--ease)}
a:hover{opacity:.85}
::selection{background:var(--accent);color:#fff}

/* ── Glass Nav ── */
nav{display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:68px;max-width:1440px;margin:0 auto;background:rgba(11,11,20,.8);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
nav .brand{font-size:20px;font-weight:800;letter-spacing:-.4px;background:linear-gradient(135deg,var(--accent),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:flex;align-items:center;gap:10px}
nav .brand .badge{font-size:8px;font-weight:700;letter-spacing:.4px;background:var(--accent);color:#fff;padding:2px 7px;border-radius:20px;-webkit-text-fill-color:#fff}
nav .links{display:flex;align-items:center;gap:2px}
nav .links a{padding:8px 14px;border-radius:var(--radius-xs);font-size:13px;font-weight:500;color:var(--text-secondary);transition:all var(--duration) var(--ease)}
nav .links a:hover{color:var(--text);background:var(--surface-alt)}
nav .links .btn-accent{background:var(--accent);color:#fff!important;padding:8px 18px;border-radius:var(--radius-xs);font-weight:600;margin-left:10px;transition:opacity var(--duration) var(--ease),transform var(--duration) var(--ease)}
nav .links .btn-accent:hover{opacity:.92;transform:translateY(-1px);background:var(--accent)}

/* ── Container ── */
.container{max-width:1280px;margin:0 auto;padding:0 40px}
.container-wide{max-width:1440px;margin:0 auto;padding:0 40px}
.section{padding:80px 0}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 22px;border-radius:var(--radius-xs);font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all var(--duration) var(--ease);text-decoration:none;font-family:var(--font);line-height:1;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 12px var(--accent-glow)}
.btn-primary:hover{box-shadow:0 4px 20px var(--accent-glow)}
.btn-secondary{background:var(--surface-alt);border:1px solid var(--border-light);color:var(--text)}
.btn-secondary:hover{border-color:var(--accent);background:var(--surface-hover)}
.btn-emerald{background:var(--emerald);color:#fff}
.btn-ghost{background:transparent;color:var(--text-secondary);padding:8px 14px}
.btn-ghost:hover{background:var(--surface-alt);color:var(--text)}
.btn-sm{padding:8px 16px;font-size:12px}
.btn-lg{padding:14px 28px;font-size:16px;border-radius:var(--radius-sm);box-shadow:0 4px 24px var(--accent-glow)}
.btn-block{width:100%;justify-content:center}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ── Cards ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:all var(--duration) var(--ease)}
.card-hover:hover{border-color:var(--border-light);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.3)}

/* ── Forms ── */
input,textarea,select{padding:10px 14px;border-radius:var(--radius-xs);border:1px solid var(--border-light);background:var(--surface-alt);color:var(--text);font-size:14px;font-family:var(--font);outline:none;transition:all var(--duration) var(--ease);width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle)}
input::placeholder,textarea::placeholder{color:var(--text-tertiary)}
select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9ab4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}

/* ── Grids ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}

/* ── Utilities ── */
.flex{display:flex}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.flex-1{flex:1;min-width:0}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}
.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}.mt-12{margin-top:48px}
.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.text-center{text-align:center}
.text-secondary{color:var(--text-secondary)}
.text-tertiary{color:var(--text-tertiary)}
.text-accent{color:var(--accent)}
.text-emerald{color:var(--emerald)}
.text-sm{font-size:13px}
.text-xs{font-size:12px}
.font-mono{font-family:var(--mono)}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-full{width:100%}
.relative{position:relative}

/* ── Badge ── */
.badge{display:inline-flex;align-items:center;gap:6px;width:fit-content;padding:3px 10px;border-radius:var(--radius-round);font-size:11px;font-weight:500}
.badge-accent{background:var(--accent-subtle);border:1px solid rgba(99,102,241,.25);color:var(--accent)}
.badge-emerald{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);color:var(--emerald)}
.badge-amber{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);color:var(--amber)}

/* ── Table ── */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:12px 16px;font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;background:var(--surface-alt);border-bottom:1px solid var(--border)}
td{padding:10px 16px;border-bottom:1px solid var(--border);font-size:13px}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--surface-alt)}

/* ── Skeleton ── */
@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}
.skeleton{background:linear-gradient(90deg,var(--surface-alt) 25%,var(--surface-hover) 50%,var(--surface-alt) 75%);background-size:400px 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-xs)}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.animate-fade-up{animation:fadeUp .5s var(--ease) both}
.animate-fade-in{animation:fadeIn .4s var(--ease) both}
.delay-1{animation-delay:.08s}.delay-2{animation-delay:.16s}.delay-3{animation-delay:.24s}.delay-4{animation-delay:.32s}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}

@media(max-width:768px){
  .container,.container-wide{padding:0 20px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  nav{padding:0 20px;height:60px}
  nav .links a:not(.btn-accent){display:none}
}
@media(max-width:1024px){.grid-4{grid-template-columns:1fr 1fr}}