*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{height:100vh;display:flex;flex-direction:column;overflow:hidden}button{cursor:pointer;border:none;font-family:inherit}input,select{font-family:inherit}img{display:block;max-width:100%}:root{--color-primary: #F59E0B;--color-primary-dk: #D97706;--color-secondary: #1a1a2e;--color-bg: #0a0a0a;--color-surface: #141414;--color-surface-2: #1e1e1e;--color-border: #2a2a2a;--color-text: #f0f0f0;--color-text-muted: #888;--color-error: #ef4444;--color-success: #22c55e;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-full: 9999px;--transition: .2s ease}.screen{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:var(--spacing-lg);gap:var(--spacing-md)}.screen-title{font-size:1.75rem;font-weight:800;line-height:1.1;letter-spacing:-.03em}.screen-subtitle{font-size:1rem;color:var(--color-text-muted);line-height:1.5}.btn{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:16px var(--spacing-lg);border-radius:var(--radius-full);font-size:1rem;font-weight:700;letter-spacing:.02em;transition:transform var(--transition),opacity var(--transition);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(.97)}.btn-primary{background:var(--color-primary);color:#000}.btn-primary:hover{background:var(--color-primary-dk)}.btn-secondary{background:var(--color-surface-2);color:var(--color-text);border:1px solid var(--color-border)}.btn-ghost{background:transparent;color:var(--color-text-muted);font-size:.875rem;padding:12px}.btn:disabled{opacity:.4;pointer-events:none}.field{display:flex;flex-direction:column;gap:var(--spacing-xs)}.field label{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted)}.field input,.field select{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:1rem;padding:14px var(--spacing-md);width:100%;outline:none;transition:border-color var(--transition);-moz-appearance:none;appearance:none;-webkit-appearance:none}.field input:focus,.field select:focus{border-color:var(--color-primary)}.field .error-msg{font-size:.8rem;color:var(--color-error)}.progress-bar{width:100%;height:4px;background:var(--color-surface-2);border-radius:var(--radius-full);overflow:hidden}.progress-bar__fill{height:100%;background:var(--color-primary);border-radius:var(--radius-full);transition:width .6s ease}.rarity-badge{display:inline-block;padding:4px 12px;border-radius:var(--radius-full);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.rarity-bronze{background:#92400e;color:#fcd34d}.rarity-silver{background:#334155;color:#cbd5e1}.rarity-gold{background:#78350f;color:#fbbf24}.rarity-special{background:#4c1d95;color:#c4b5fd}.divider{display:flex;align-items:center;gap:var(--spacing-md);color:var(--color-text-muted);font-size:.8rem}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--color-border)}