/* Empire TCG — design tokens (subset, optimized for prototype) */
:root {
  --ink-000:#070708; --ink-100:#0B0B0D; --ink-200:#121217; --ink-300:#1A1A21;
  --ink-400:#23232C; --ink-500:#33333E; --ink-600:#5A5A68; --ink-700:#8A8A95;
  --ink-800:#C7C7CE; --ink-900:#EFEFF2;

  --gold-100:#FBEFC6; --gold-300:#EACB6E; --gold-500:#D4AF37;
  --gold-700:#9A7E1F; --gold-900:#5A4910;

  --oxblood-300:#C26B6B; --oxblood-500:#7A1F1F; --oxblood-700:#4A1010;
  --verdigris-500:#3F8F7E;

  --status-idle:#8A8A95; --status-active:#E8A93C;
  --status-ready:#3F8F7E; --status-shipped:#6B8FE8;
  --pay-paid:#3F8F7E; --pay-unpaid:#C25A5A;
  --success:#3F8F7E; --warning:#E8A93C; --error:#C25A5A; --info:#6B8FE8;

  --font-display:"Cormorant Garamond","Times New Roman",serif;
  --font-body:"Geist",-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  --motion-fast:150ms; --motion-base:240ms; --motion-slow:360ms;
  --ease-out:cubic-bezier(0.22,1,0.36,1);

  --shadow-2:0 8px 24px rgba(0,0,0,.45);
  --shadow-3:0 24px 60px rgba(0,0,0,.55);
  --shadow-gold:0 0 0 1px rgba(212,175,55,.4),0 8px 24px rgba(212,175,55,.15);
}

*,*::before,*::after{box-sizing:border-box}
html{margin:0;padding:0;background:#0B0B0D;background:var(--ink-100);color:#EFEFF2;color:var(--ink-900);font-family:"Geist",-apple-system,sans-serif;font-family:var(--font-body);min-height:100vh;width:100%}
body{
  margin:0;padding:0;min-height:100vh;width:100%;
  background-color:#0B0B0D;
  background:
    radial-gradient(1400px 700px at 80% -10%, rgba(212,175,55,.07), transparent 60%),
    radial-gradient(1100px 600px at -10% 110%, rgba(122,31,31,.06), transparent 60%),
    #0B0B0D;
  background:
    radial-gradient(1400px 700px at 80% -10%, rgba(212,175,55,.07), transparent 60%),
    radial-gradient(1100px 600px at -10% 110%, rgba(122,31,31,.06), transparent 60%),
    var(--ink-100);
  color:#EFEFF2;color:var(--ink-900);
  font-family:"Geist",-apple-system,sans-serif;font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}

/* Eyebrow / mono */
.eyebrow{font:600 11px/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-500)}
.mono{font:500 13px/1.4 var(--font-mono);font-variant-numeric:tabular-nums}
.h-rule{height:1px;background:linear-gradient(90deg,var(--gold-700),transparent);border:0;margin:0}

/* Page chrome */
.app{position:relative;min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 32px;background:rgba(11,11,13,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--ink-500)}
.topbar .brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.topbar .brand .mark{width:36px;height:36px;border-radius:6px;background:linear-gradient(135deg,var(--gold-500),var(--gold-700));display:grid;place-items:center;color:var(--ink-100);font:600 18px/1 var(--font-display);position:relative;overflow:hidden}
.topbar .brand .mark::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-100%);animation:shine 4.5s infinite;animation-delay:1.5s}
@keyframes shine{0%{transform:translateX(-100%)}40%,100%{transform:translateX(150%)}}
.topbar .brand .word{font-family:var(--font-display);font-weight:500;font-size:22px;letter-spacing:.02em}
.topbar .brand .sub{display:block;font:600 9px/1 var(--font-body);text-transform:uppercase;letter-spacing:.42em;color:var(--ink-700);margin-top:3px}
.topbar nav{display:flex;gap:4px;background:var(--ink-200);border:1px solid var(--ink-500);padding:4px;border-radius:999px;position:relative}
.topbar nav a{position:relative;display:inline-flex;align-items:center;height:36px;padding:0 18px;background:transparent;border:0;color:var(--ink-800);font:500 12px/1 var(--font-body);text-transform:uppercase;letter-spacing:.14em;border-radius:999px;transition:color var(--motion-fast);text-decoration:none;z-index:1}
.topbar nav a.active{color:var(--ink-100)}
.topbar nav .pill{position:absolute;top:4px;bottom:4px;background:var(--gold-500);border-radius:999px;transition:left var(--motion-slow) var(--ease-out),width var(--motion-slow) var(--ease-out);box-shadow:0 0 16px rgba(212,175,55,.45);z-index:0}
.topbar .right{display:flex;align-items:center;gap:18px;color:var(--ink-700);font:500 12px/1 var(--font-mono);letter-spacing:.04em}
.live-dot{display:inline-flex;align-items:center;gap:8px}
.live-dot .d{width:8px;height:8px;border-radius:999px;background:var(--verdigris-500);box-shadow:0 0 0 0 rgba(63,143,126,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,143,126,.6)}70%{box-shadow:0 0 0 10px rgba(63,143,126,0)}100%{box-shadow:0 0 0 0 rgba(63,143,126,0)}}

/* Page transitions */
.scene{animation:scene-in 600ms var(--ease-out) both}
@keyframes scene-in{from{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}

/* Particles canvas */
canvas.particles{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.55}

/* Section headers */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:28px}
.section-head .num{font-family:var(--font-mono);color:var(--gold-500);font-size:12px;letter-spacing:.14em;display:flex;align-items:center;gap:10px}
.section-head .num::before{content:"";width:24px;height:1px;background:var(--gold-500)}
.section-head h2{font-family:var(--font-display);font-weight:500;font-size:40px;line-height:1.1;letter-spacing:-.015em;margin:8px 0 0}
.section-head .body{max-width:560px;color:var(--ink-700);margin:0;font:400 14px/1.55 var(--font-body)}

/* Reusable badge */
.badge{display:inline-flex;align-items:center;gap:8px;height:24px;padding:0 12px;border-radius:999px;font:600 11px/1 var(--font-body);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:999px;flex-shrink:0}
.badge-idle{background:#1A1A21;color:var(--status-idle)} .badge-idle .dot{background:var(--status-idle);box-shadow:inset 0 0 0 1px var(--status-idle);background:transparent}
.badge-active{background:#3A2A0E;color:var(--status-active)} .badge-active .dot{background:var(--status-active);box-shadow:0 0 8px var(--status-active)}
.badge-ready{background:#0F2A26;color:var(--status-ready)} .badge-ready .dot{background:var(--status-ready);box-shadow:0 0 8px var(--status-ready)}
.badge-shipped{background:#11203F;color:var(--status-shipped)} .badge-shipped .dot{background:var(--status-shipped);box-shadow:0 0 8px var(--status-shipped)}
.badge-paid{background:#0F2A26;color:var(--pay-paid)}
.badge-unpaid{background:#3A1414;color:var(--pay-unpaid)}

/* Buttons (shared) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 22px;border-radius:6px;font:600 13px/1 var(--font-body);text-transform:uppercase;letter-spacing:.1em;border:1px solid transparent;background:transparent;color:var(--ink-900);transition:all var(--motion-fast) var(--ease-out);position:relative;overflow:hidden;text-decoration:none}
.btn-primary{background:var(--gold-500);color:var(--ink-100);border-color:var(--gold-700);box-shadow:0 4px 18px rgba(212,175,55,.25)}
.btn-primary:hover{background:var(--gold-300);transform:translateY(-1px);box-shadow:0 6px 24px rgba(212,175,55,.35)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease-out)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-secondary{border-color:var(--ink-500);color:var(--ink-900)}
.btn-secondary:hover{border-color:var(--gold-500);background:rgba(212,175,55,.06)}
.btn-ghost{color:var(--ink-800)}
.btn-ghost:hover{background:var(--ink-300);color:var(--ink-900)}
.btn-destructive{border-color:var(--oxblood-500);color:var(--oxblood-300)}
.btn-destructive:hover{background:var(--oxblood-700);color:var(--ink-900)}
.btn-sm{height:36px;padding:0 16px;font-size:11px}

/* Toasts */
.toast-stack{position:fixed;top:88px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:80;pointer-events:none}
.toast{display:flex;align-items:flex-start;gap:14px;padding:14px 18px;background:rgba(26,26,33,.92);backdrop-filter:blur(10px);border-radius:8px;box-shadow:var(--shadow-2);min-width:300px;max-width:380px;border-left:2px solid var(--success);animation:toast-in 360ms var(--ease-out);pointer-events:auto}
.toast.warning{border-left-color:var(--warning)} .toast.error{border-left-color:var(--error)} .toast.info{border-left-color:var(--info)}
.toast .title{font:600 13px/1.3 var(--font-body);color:var(--ink-900);margin:0 0 2px}
.toast .desc{font:400 12px/1.4 var(--font-body);color:var(--ink-700);margin:0}
@keyframes toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* Glow ring (futuristic accent) */
.glow-ring{position:relative}
.glow-ring::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from 0deg,var(--gold-500),transparent 30%,transparent 70%,var(--gold-500));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rotate 6s linear infinite;opacity:.6}
@keyframes rotate{to{transform:rotate(360deg)}}

/* Animations */
@keyframes foil{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes drift{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 8px))}}
@keyframes scan{0%{transform:translateY(-20px)}100%{transform:translateY(420px)}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bar-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes glow-pulse{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes spin-slow{to{transform:rotate(360deg)}}

/* Admin FAB (floating action button) */
.admin-fab{position:fixed;bottom:24px;right:24px;width:48px;height:48px;border-radius:999px;background:rgba(26,26,33,.85);backdrop-filter:blur(10px);border:1px solid var(--ink-500);display:grid;place-items:center;color:var(--ink-700);z-index:60;transition:all .2s var(--ease-out);text-decoration:none}
.admin-fab:hover{border-color:var(--gold-500);color:var(--gold-500);box-shadow:0 0 20px rgba(212,175,55,.2);transform:scale(1.08)}

/* utility */
.flex{display:flex}.col{flex-direction:column}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}
.center{align-items:center;justify-content:center}.between{justify-content:space-between}.itm-c{align-items:center}
.fg{flex-grow:1}.tc{text-align:center}
.tracked{letter-spacing:.18em;text-transform:uppercase}

/* Responsive topbar */
@media (max-width: 768px){
  .topbar{height:auto;min-height:56px;padding:10px 16px;flex-wrap:wrap;gap:10px}
  .topbar nav{order:3;width:100%;justify-content:center}
  .topbar .right{font-size:10px;gap:10px}
  .topbar .brand .word{font-size:18px}
  .topbar .brand .sub{font-size:8px}
  .topbar .brand .mark{width:30px;height:30px;font-size:15px}
}
@media (max-width: 480px){
  .topbar nav a{padding:0 12px;font-size:10px;height:32px}
  .topbar .right{display:none}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}