/* ======================================================
   ARCANA — Design System | Dark Celestial Theme
   ====================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  --bg-primary: #0a0a1a; --bg-secondary: #12122a; --bg-tertiary: #1a1a3a;
  --bg-surface: rgba(255,255,255,0.05); --bg-surface-hover: rgba(255,255,255,0.08);
  --accent-gold: #d4a853; --accent-gold-light: #f0c87a; --accent-gold-dim: rgba(212,168,83,0.3);
  --accent-purple: #8b5cf6; --accent-purple-light: #a78bfa; --accent-purple-dim: rgba(139,92,246,0.3);
  --accent-blue: #3b82f6; --accent-blue-light: #60a5fa;
  --accent-rose: #f43f5e; --accent-teal: #14b8a6;
  --text-primary: #f0e6d3; --text-secondary: rgba(240,230,211,0.6); --text-muted: rgba(240,230,211,0.35);
  --text-inverse: #0a0a1a;
  --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #3b82f6;
  --gradient-gold: linear-gradient(135deg, #d4a853, #f0c87a);
  --gradient-mystical: linear-gradient(135deg, #8b5cf6, #3b82f6);
  --gradient-dark: linear-gradient(180deg, #0a0a1a, #12122a);
  --gradient-celestial: linear-gradient(135deg, #0a0a1a 0%, #1a103a 50%, #0a0a1a 100%);
  --glass-bg: rgba(18,18,42,0.7); --glass-bg-light: rgba(18,18,42,0.5); --glass-bg-heavy: rgba(18,18,42,0.85);
  --glass-border: rgba(212,168,83,0.15); --glass-border-purple: rgba(139,92,246,0.2);
  --glass-blur: 20px; --glass-shadow: 0 8px 32px rgba(0,0,0,0.3);
  --font-display: 'Cinzel Decorative','Cinzel',serif;
  --font-heading: 'Cinzel',serif;
  --font-body: 'Inter',system-ui,-apple-system,sans-serif;
  --font-accent: 'Playfair Display',serif;
  --fs-display: clamp(2rem,5vw,3.5rem); --fs-h1: clamp(1.75rem,4vw,2.25rem);
  --fs-h2: clamp(1.375rem,3vw,1.75rem); --fs-h3: clamp(1.125rem,2.5vw,1.375rem);
  --fs-body: clamp(0.9375rem,2vw,1rem); --fs-small: clamp(0.8125rem,1.8vw,0.875rem);
  --fs-caption: clamp(0.6875rem,1.5vw,0.75rem); --fs-overline: 0.6875rem;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --lh-tight:1.2; --lh-normal:1.5; --lh-relaxed:1.7;
  --ls-wide:0.05em; --ls-wider:0.1em; --ls-widest:0.2em;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-full:9999px;
  --shadow-sm:0 2px 8px rgba(0,0,0,0.2); --shadow-md:0 4px 16px rgba(0,0,0,0.3);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.4); --shadow-xl:0 16px 48px rgba(0,0,0,0.5);
  --shadow-glow-gold:0 0 20px rgba(212,168,83,0.3); --shadow-glow-purple:0 0 20px rgba(139,92,246,0.3);
  --ease-default:cubic-bezier(0.4,0,0.2,1); --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
  --duration-fast:0.15s; --duration-normal:0.3s; --duration-slow:0.5s;
  --transition-default:0.3s cubic-bezier(0.4,0,0.2,1);
  --transition-bounce:0.5s cubic-bezier(0.34,1.56,0.64,1);
  --z-base:0; --z-above:10; --z-sticky:100; --z-overlay:500; --z-modal:1000; --z-toast:1500;
  --sidebar-width:260px; --topbar-height:64px; --bottombar-height:72px;
  --container-max:1200px; --content-max:800px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;color-scheme:dark}
body{font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-normal);color:var(--text-primary);background:var(--bg-primary);min-height:100vh;overflow-x:hidden;position:relative}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:var(--accent-gold-dim);border-radius:var(--radius-full)}
::selection{background:var(--accent-purple-dim);color:var(--text-primary)}
a{color:var(--accent-gold);text-decoration:none;transition:color var(--transition-default)}
a:hover{color:var(--accent-gold-light)}
img{max-width:100%;display:block}
ul,ol{list-style:none}
input,textarea,select,button{font-family:inherit;font-size:inherit;color:inherit;border:none;outline:none;background:none}
button{cursor:pointer}

.display{font-family:var(--font-display);font-size:var(--fs-display);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:var(--ls-wide);color:var(--accent-gold)}
h1,.h1{font-family:var(--font-heading);font-size:var(--fs-h1);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:var(--ls-wide)}
h2,.h2{font-family:var(--font-heading);font-size:var(--fs-h2);font-weight:var(--fw-semibold);line-height:var(--lh-tight)}
h3,.h3{font-family:var(--font-heading);font-size:var(--fs-h3);font-weight:var(--fw-semibold);line-height:var(--lh-tight)}
.body-text{font-size:var(--fs-body);line-height:var(--lh-relaxed)}
.small-text{font-size:var(--fs-small);line-height:var(--lh-normal)}
.caption{font-size:var(--fs-caption);line-height:var(--lh-normal);color:var(--text-muted)}
.overline{font-size:var(--fs-overline);font-weight:var(--fw-semibold);letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--accent-gold)}
.text-gradient-gold{background:var(--gradient-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-gradient-mystical{background:var(--gradient-mystical);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.font-accent{font-family:var(--font-accent)}

.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--space-4)}
.content-narrow{max-width:var(--content-max);margin:0 auto}
.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}
.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}
.grid{display:grid}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.text-center{text-align:center}.text-right{text-align:right}
.w-full{width:100%}.h-full{height:100%}.min-h-screen{min-height:100vh}
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}
.hidden{display:none!important}.invisible{visibility:hidden}.opacity-0{opacity:0}

.p-0{padding:0}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}
.px-4{padding-left:var(--space-4);padding-right:var(--space-4)}.px-6{padding-left:var(--space-6);padding-right:var(--space-6)}
.py-4{padding-top:var(--space-4);padding-bottom:var(--space-4)}.py-6{padding-top:var(--space-6);padding-bottom:var(--space-6)}.py-8{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}
.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}
.mx-auto{margin-left:auto;margin-right:auto}

/* Starfield */
.starfield{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--z-base);overflow:hidden}
.starfield::before,.starfield::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%}
.starfield::before{background-image:radial-gradient(2px 2px at 20px 30px,rgba(255,255,255,0.8),transparent),radial-gradient(2px 2px at 40px 70px,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 90px 40px,rgba(255,255,255,0.6),transparent),radial-gradient(1px 1px at 130px 80px,rgba(255,255,255,0.4),transparent),radial-gradient(2px 2px at 160px 30px,rgba(212,168,83,0.6),transparent),radial-gradient(1px 1px at 200px 60px,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 20px 120px,rgba(255,255,255,0.4),transparent),radial-gradient(2px 2px at 60px 150px,rgba(139,92,246,0.5),transparent),radial-gradient(1px 1px at 110px 130px,rgba(255,255,255,0.3),transparent),radial-gradient(1px 1px at 180px 150px,rgba(255,255,255,0.6),transparent);background-size:200px 170px;animation:starDrift 60s linear infinite}
.starfield::after{background-image:radial-gradient(1px 1px at 50px 20px,rgba(255,255,255,0.4),transparent),radial-gradient(2px 2px at 80px 50px,rgba(212,168,83,0.4),transparent),radial-gradient(1px 1px at 120px 30px,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 30px 90px,rgba(139,92,246,0.3),transparent),radial-gradient(2px 2px at 150px 70px,rgba(255,255,255,0.3),transparent);background-size:190px 120px;animation:starDrift 90s linear infinite reverse;opacity:0.7}
.nebula-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--z-base);background:radial-gradient(ellipse at 20% 50%,rgba(139,92,246,0.05) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(212,168,83,0.04) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(59,130,246,0.03) 0%,transparent 50%)}

@keyframes starDrift{from{transform:translate(0,0)}to{transform:translate(-200px,-170px)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInScale{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}
@keyframes slideInLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes slideInUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 20px rgba(212,168,83,0.2)}50%{box-shadow:0 0 40px rgba(212,168,83,0.5),0 0 60px rgba(212,168,83,0.2)}}
@keyframes glowPulsePurple{0%,100%{box-shadow:0 0 20px rgba(139,92,246,0.2)}50%{box-shadow:0 0 40px rgba(139,92,246,0.5),0 0 60px rgba(139,92,246,0.2)}}
@keyframes textGlow{0%,100%{text-shadow:0 0 10px rgba(212,168,83,0.3)}50%{text-shadow:0 0 20px rgba(212,168,83,0.6),0 0 40px rgba(212,168,83,0.3)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floatSlow{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-8px) rotate(1deg)}66%{transform:translateY(-4px) rotate(-1deg)}}
@keyframes cardReveal{0%{transform:rotateY(180deg) scale(0.8)}50%{transform:rotateY(90deg) scale(1.05)}100%{transform:rotateY(0deg) scale(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(0) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(180deg)}}
@keyframes moonGlow{0%,100%{filter:drop-shadow(0 0 8px rgba(240,230,211,0.3))}50%{filter:drop-shadow(0 0 16px rgba(240,230,211,0.6))}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes pulseRing{0%{transform:scale(1);opacity:0.8}100%{transform:scale(1.5);opacity:0}}

.animate-fade-in{animation:fadeIn .5s var(--ease-default) both}
.animate-fade-in-up{animation:fadeInUp .5s var(--ease-default) both}
.animate-fade-in-down{animation:fadeInDown .5s var(--ease-default) both}
.animate-fade-in-scale{animation:fadeInScale .5s var(--ease-default) both}
.animate-slide-in-up{animation:slideInUp .5s var(--ease-default) both}
.animate-glow{animation:glowPulse 2s ease-in-out infinite}
.animate-glow-purple{animation:glowPulsePurple 2s ease-in-out infinite}
.animate-text-glow{animation:textGlow 2s ease-in-out infinite}
.animate-spin{animation:spin 1s linear infinite}
.animate-spin-slow{animation:spin 8s linear infinite}
.animate-float{animation:float 3s ease-in-out infinite}
.animate-float-slow{animation:floatSlow 6s ease-in-out infinite}
.animate-shimmer{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.08) 50%,transparent 100%);background-size:200% 100%;animation:shimmer 2s infinite}
.animate-moon{animation:moonGlow 4s ease-in-out infinite}
.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.delay-4{animation-delay:.4s}.delay-5{animation-delay:.5s}.delay-6{animation-delay:.6s}

/* App Shell */
.app{position:relative;z-index:var(--z-above);min-height:100vh}
@media(min-width:1025px){
  .app--with-nav{min-height:100vh}
  .app__sidebar{position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;z-index:var(--z-sticky)}
  .app__main{margin-left:var(--sidebar-width)}
  .app__bottombar{display:none!important}
}
@media(max-width:1024px){
  .app__sidebar{display:none!important}
  .app__main{padding-bottom:calc(var(--bottombar-height) + env(safe-area-inset-bottom,0px))}
  .app__bottombar{position:fixed;bottom:0;left:0;width:100%;z-index:var(--z-sticky)}
}
.page{padding:var(--space-6) var(--space-4);max-width:var(--container-max);margin:0 auto}
@media(min-width:1025px){.page{padding:var(--space-8)}}
.page--full{padding:0;max-width:none}
.page--centered{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center}

.bg-primary{background:var(--bg-primary)}.bg-secondary{background:var(--bg-secondary)}
.bg-glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}
.text-gold{color:var(--accent-gold)}.text-purple{color:var(--accent-purple)}
.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}
.border-glass{border:1px solid var(--glass-border)}.border-gold{border:1px solid var(--accent-gold-dim)}
.rounded-sm{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-full{border-radius:var(--radius-full)}
.divider{width:100%;height:1px;background:var(--glass-border);margin:var(--space-6) 0}
.divider--ornate{background:linear-gradient(90deg,transparent,var(--accent-gold-dim),transparent)}
.star-separator{display:flex;align-items:center;justify-content:center;gap:var(--space-4);margin:var(--space-8) 0;color:var(--accent-gold);font-size:var(--fs-small)}
.star-separator::before,.star-separator::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--accent-gold-dim),transparent)}