:root{--bg-primary: #0a0e17;--bg-secondary: #111827;--bg-card: #1a2035;--bg-surface: #1f2937;--bg-hover: #2a3548;--text-primary: #f3f4f6;--text-secondary: #9ca3af;--text-muted: #6b7280;--accent: #f6821f;--accent-hover: #e5720e;--accent-light: rgba(246, 130, 31, .15);--mana-white: #f9faf4;--mana-blue: #0e68ab;--mana-black: #150b00;--mana-red: #d3202a;--mana-green: #00733e;--mana-colorless: #ccc2c0;--battlefield-green: #1a3a2a;--health-green: #22c55e;--damage-red: #ef4444;--success: #22c55e;--warning: #eab308;--error: #ef4444;--info: #3b82f6;--border-color: #2d3748;--border-radius: 8px;--border-radius-sm: 4px;--border-radius-lg: 12px;--border-radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .5);--shadow-glow: 0 0 12px rgba(246, 130, 31, .4);--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--font-display: "Cinzel", "Palatino Linotype", "Book Antiqua", serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--card-width: 130px;--card-height: 182px;--card-width-sm: 80px;--card-height-sm: 112px;--card-width-thumb: 50px;--card-height-thumb: 70px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease;--nav-height: 56px;--sidebar-width: 280px;--content-max-width: 1200px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-main);font-size:var(--text-base);line-height:1.6;color:var(--text-primary);background:var(--bg-primary);min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3;color:var(--text-primary)}h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}h4{font-size:var(--text-lg)}p{color:var(--text-secondary);margin-bottom:var(--space-md)}a{color:var(--accent);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-hover)}code,pre{font-family:var(--font-mono)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);font-family:var(--font-main);font-size:var(--text-sm);font-weight:500;line-height:1.4;color:var(--text-primary);background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--border-radius);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast);-webkit-user-select:none;user-select:none}.btn:hover{background:var(--bg-hover);border-color:var(--text-muted)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary{color:#fff;background:var(--accent);border-color:var(--accent)}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-ghost{background:transparent;border-color:transparent}.btn-ghost:hover{background:var(--accent-light)}.btn-danger{color:#fff;background:var(--error);border-color:var(--error)}.btn-danger:hover{background:#dc2626;border-color:#dc2626}.btn-sm{padding:var(--space-xs) var(--space-sm);font-size:var(--text-xs)}.btn-lg{padding:var(--space-md) var(--space-xl);font-size:var(--text-lg)}.input,input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=number],textarea,select{width:100%;padding:var(--space-sm) var(--space-md);font-family:var(--font-main);font-size:var(--text-sm);color:var(--text-primary);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius);outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input:focus,input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}.input::placeholder,input::placeholder,textarea::placeholder{color:var(--text-muted)}label{display:block;font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);margin-bottom:var(--space-xs)}.form-group{margin-bottom:var(--space-md)}.form-error{color:var(--error);font-size:var(--text-xs);margin-top:var(--space-xs)}.surface{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:var(--space-lg)}.surface-elevated{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-md)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}*{scrollbar-width:thin;scrollbar-color:var(--border-color) var(--bg-primary)}.page-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;color:var(--text-muted);gap:var(--space-md)}.loader-spinner{width:32px;height:32px;border:3px solid var(--border-color);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.text-center{text-align:center}.text-right{text-align:right}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-accent{color:var(--accent)}.text-success{color:var(--success)}.text-error{color:var(--error)}.font-display{font-family:var(--font-display)}.font-mono{font-family:var(--font-mono)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-xs{gap:var(--space-xs)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.gap-xl{gap:var(--space-xl)}.grid{display:grid}.w-full{width:100%}.mt-xs{margin-top:var(--space-xs)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.p-sm{padding:var(--space-sm)}.p-md{padding:var(--space-md)}.p-lg{padding:var(--space-lg)}.p-xl{padding:var(--space-xl)}.rounded{border-radius:var(--border-radius)}.rounded-lg{border-radius:var(--border-radius-lg)}.rounded-full{border-radius:var(--border-radius-full)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.badge{display:inline-flex;align-items:center;padding:2px 8px;font-size:var(--text-xs);font-weight:600;border-radius:var(--border-radius-full);background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--border-color)}.badge-accent{background:var(--accent-light);color:var(--accent);border-color:transparent}.badge-success{background:#22c55e26;color:var(--success);border-color:transparent}.badge-error{background:#ef444426;color:var(--error);border-color:transparent}@media(max-width:768px){:root{--card-width: 100px;--card-height: 140px;--card-width-sm: 64px;--card-height-sm: 90px}}