:root{--bg-color: #0f172a;--text-color: #f8fafc;--primary-color: #8b5cf6;--secondary-color: #06b6d4;--glass-bg: rgba(30, 41, 59, .7);--glass-border: rgba(255, 255, 255, .1);--card-bg: #1e293b;--accent-gradient: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%)}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg-color);color:var(--text-color)}#root{max-width:1280px;margin:0 auto;padding:1rem}.app-container{max-width:1800px;margin:0 auto;padding:1rem;display:grid;grid-template-columns:1fr;gap:1rem}@media(min-width:769px){.app-container{grid-template-columns:1fr 1fr}}@media(min-width:1200px){.app-container{grid-template-columns:1fr 450px;align-items:start}.results-pane{position:sticky;top:2rem;max-height:calc(100vh - 4rem);overflow-y:auto;padding-right:.5rem}}.results-pane::-webkit-scrollbar{width:6px}.results-pane::-webkit-scrollbar-track{background:#ffffff0d}.results-pane::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.glass-panel{background:#1e293bd9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--glass-border);border-radius:16px;padding:2rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transform:translateZ(0)}.btn{background:var(--card-bg);border:1px solid var(--glass-border);color:var(--text-color);padding:.5rem 1rem;border-radius:8px;cursor:pointer;transition:all .2s ease;font-weight:500}.btn:hover{background:var(--primary-color);border-color:var(--primary-color);transform:translateY(-1px)}.btn-primary{background:var(--accent-gradient);border:none;font-weight:600}.btn-primary:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 12px #8b5cf64d}.card{background:var(--card-bg);border-radius:12px;padding:1rem;transition:transform .2s;border:1px solid transparent}.card:hover{transform:translateY(-2px);border-color:var(--primary-color)}.grid-layout{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}.section-title{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{background:#475569;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#64748b}@media(max-width:768px){#root{padding:1rem}.app-container{padding:1rem;gap:1.5rem}header h1{font-size:2rem!important}.glass-panel{padding:1rem!important}.section-title{font-size:1.1rem;margin-bottom:.75rem}input[type=text],select,button{min-height:44px;font-size:16px}.results-pane{position:static!important;max-height:none!important;overflow-y:visible!important}.selector-pane{max-height:none!important;overflow-y:visible!important}}@media(max-width:480px){#root{padding:.75rem}.app-container{padding:.75rem;gap:1rem}header h1{font-size:1.75rem!important;margin-bottom:.25rem!important}.glass-panel{padding:.875rem!important}.section-title{font-size:1rem}}.unit-icon{position:relative;transition:transform .2s ease,opacity .2s ease;border-radius:6px;will-change:transform;backface-visibility:hidden}.unit-icon:hover{transform:scale(1.1);z-index:10}.unit-icon.selected{transform:scale(1.1);opacity:1}.unit-icon.dimmed{opacity:.3;pointer-events:none;filter:grayscale(100%)}.unit-icon.excluded{filter:grayscale(100%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(.8);outline:2px solid #ef4444;outline-offset:-2px}.unit-icon-inner{width:100%;height:100%;border-radius:4px;overflow:hidden;box-sizing:border-box;position:relative;border:2px solid white;transform:translateZ(0)}.unit-cost{position:absolute;bottom:-4px;right:-4px;background:#0f172a;font-size:10px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2}.unit-selected-indicator{position:absolute;top:-4px;left:-4px;background:#22c55e;color:#fff;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:10px;z-index:2}.unit-locked-indicator{position:absolute;top:2px;left:2px;background:#000c;color:#fbbf24;border-radius:4px;width:14px;height:14px;display:flex;align-items:center;justify-content:center;font-size:10px;z-index:2}.unit-wildcard-badge{position:absolute;bottom:2px;right:2px;background:#0009;color:#fbbf24;padding:2px 4px;font-size:.7rem;border-radius:4px;pointer-events:none}.result-card{background:#1e293b99;border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:1rem;margin-bottom:1rem;transition:transform .2s ease,border-color .2s ease;will-change:transform;transform:translateZ(0)}.result-card:hover{background:#1e293bcc;border-color:#8b5cf64d;transform:translateY(-2px)}.result-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.05)}.result-traits{display:flex;flex-wrap:wrap;gap:.5rem}.trait-badge{background:#8b5cf61a;border:1px solid rgba(139,92,246,.2);color:#e2e8f0;padding:.25rem .75rem;border-radius:999px;font-size:.85rem;display:flex;align-items:center;gap:.4rem}.unit-list{display:flex;flex-wrap:wrap;gap:.75rem}