:root{--space-0:0;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--z-base:0;--z-battlefield:1;--z-cards:10;--z-ui-elements:20;--z-floating:30;--z-overlay:40;--z-modal-backdrop:50;--z-modal-content:51;--z-toast:60;--z-tooltip:70;--z-dropdown:80;--z-maximum:9999;--duration-instant:.1s;--duration-fast:.15s;--duration-normal:.3s;--duration-slow:.5s;--duration-slower:.7s;--ease-in:cubic-bezier(.4,0,1,1);--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--ease-spring:cubic-bezier(.68,-.55,.265,1.55);--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a;--shadow-2xl:0 25px 50px -12px #00000040;--shadow-glow-purple:0 0 20px #8b5cf680;--shadow-glow-red:0 0 20px #ef444480;--shadow-glow-green:0 0 20px #22c55e80;--shadow-glow-yellow:0 0 20px #eab30880;--color-primary:#8b5cf6;--color-primary-hover:#7c3aed;--color-primary-active:#6d28d9;--color-success:#22c55e;--color-success-hover:#16a34a;--color-success-active:#15803d;--color-danger:#ef4444;--color-danger-hover:#dc2626;--color-danger-active:#b91c1c;--color-warning:#f59e0b;--color-warning-hover:#d97706;--color-warning-active:#b45309;--color-neutral:#6b7280;--color-neutral-hover:#4b5563;--color-neutral-active:#374151;--bg-primary:#111827f2;--bg-secondary:#1f2937e6;--bg-elevated:#374151e6;--bg-overlay:#000000b3;--text-primary:#fff;--text-secondary:#d1d5db;--text-tertiary:#9ca3af;--text-disabled:#6b7280;--touch-target-min:44px;--touch-target-comfortable:48px;--touch-target-large:56px;--safe-area-top:env(safe-area-inset-top,0px);--safe-area-right:env(safe-area-inset-right,0px);--safe-area-bottom:env(safe-area-inset-bottom,0px);--safe-area-left:env(safe-area-inset-left,0px)}.transition-smooth{transition:all var(--duration-normal)var(--ease-in-out)}.transition-fast{transition:all var(--duration-fast)var(--ease-in-out)}.interactive-glow{transition:box-shadow var(--duration-normal)var(--ease-out)}.interactive-glow:hover{box-shadow:var(--shadow-glow-purple)}.focus-ring{transition:box-shadow var(--duration-fast);outline:none}.focus-ring:focus-visible{box-shadow:0 0 0 4px #8b5cf680}.safe-area-padding{padding-top:max(var(--space-4),var(--safe-area-top));padding-right:max(var(--space-4),var(--safe-area-right));padding-bottom:max(var(--space-4),var(--safe-area-bottom));padding-left:max(var(--space-4),var(--safe-area-left))}.glass-panel{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#111827cc;border:1px solid #ffffff1a}.gradient-overlay-top{background:linear-gradient(#00000080,#0000)}.gradient-overlay-bottom{background:linear-gradient(#0000,#00000080)}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pulse-glow{0%,to{box-shadow:0 0 10px #8b5cf64d}50%{box-shadow:0 0 20px #8b5cf699}}.animate-slide-up{animation:slide-up var(--duration-normal)var(--ease-out)}.animate-slide-down{animation:slide-down var(--duration-normal)var(--ease-out)}.animate-fade-in{animation:fade-in var(--duration-fast)var(--ease-in)}.animate-pulse-glow{animation:pulse-glow 2s var(--ease-in-out)infinite}@media (max-width:640px){.mobile-hidden{display:none!important}}@media (min-width:641px){.desktop-hidden{display:none!important}}@media (max-width:640px){.touch-friendly{min-height:var(--touch-target-min);min-width:var(--touch-target-min)}}