:root{--bg-primary:#1a1a2e;--bg-secondary:#16213e;--bg-card:#0f3460;--bg-card-hover:#1a4a7a;--text-primary:#e8e8e8;--text-secondary:#a0a0b0;--accent:#e94560;--accent-green:#4ade80;--accent-yellow:#fbbf24;--accent-blue:#60a5fa;--accent-orange:#fb923c;--border:#2a2a4a}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif}.container{max-width:1200px;margin:0 auto;padding:20px}h1{text-align:center;background:linear-gradient(135deg,var(--accent),var(--accent-orange));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:8px;font-size:2rem}.subtitle{text-align:center;color:var(--text-secondary);margin-bottom:32px;font-size:.95rem}.upload-area{border:2px dashed var(--border);text-align:center;cursor:pointer;background:var(--bg-secondary);border-radius:16px;margin-bottom:24px;padding:40px;transition:all .3s}.upload-area:hover{border-color:var(--accent);background:var(--bg-card)}.upload-area.dragging{border-color:var(--accent-green);background:#4ade801a}.upload-icon{margin-bottom:12px;font-size:3rem}.upload-text{color:var(--text-secondary);font-size:1.1rem}.upload-text strong{color:var(--accent)}.screenshot-preview{border:2px solid var(--border);border-radius:12px;margin-bottom:24px;position:relative;overflow:hidden}.screenshot-preview img{width:100%;height:auto;display:block}.screenshot-actions{justify-content:center;gap:12px;margin-bottom:24px;display:flex}.btn{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:8px;padding:12px 24px;font-size:1rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{background:linear-gradient(135deg,var(--accent),#c73550);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 15px #e9456066}.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--bg-card-hover)}.btn-small{padding:6px 14px;font-size:.85rem}.army-panels{grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px;display:grid}@media (max-width:768px){.army-panels{grid-template-columns:1fr}}.army-panel{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:20px}.army-panel h2{align-items:center;gap:8px;margin-bottom:16px;font-size:1.2rem;display:flex}.army-panel.player h2{color:var(--accent-green)}.army-panel.enemy h2{color:var(--accent)}.unit-row{background:#ffffff08;border-radius:8px;align-items:center;gap:12px;margin-bottom:6px;padding:8px 12px;transition:background .2s;display:flex}.unit-row:hover{background:#ffffff0f}.unit-icon{text-align:center;width:32px;font-size:1.4rem}.unit-portrait{background:linear-gradient(#f5e6c8,#d4c4a0);border:2px solid #8b6914;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex;overflow:hidden;box-shadow:0 1px 3px #0006}.unit-portrait img{border-radius:50%}.unit-name{flex:1;font-weight:500}.unit-count{background:var(--bg-card);text-align:center;border-radius:6px;min-width:40px;padding:4px 12px;font-weight:700}.unit-count input{color:var(--text-primary);text-align:center;background:0 0;border:none;width:50px;font-size:.95rem;font-weight:700}.unit-count input:focus{outline:1px solid var(--accent);border-radius:4px}.unit-stats{color:var(--text-secondary);font-size:.75rem}.analysis-section{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;margin-bottom:24px;padding:24px}.analysis-section h2{margin-bottom:16px;font-size:1.3rem}.win-indicator{border-radius:12px;justify-content:center;align-items:center;gap:16px;margin-bottom:20px;padding:24px;font-size:1.3rem;font-weight:700;display:flex}.win-indicator.high{border:1px solid var(--accent-green);color:var(--accent-green);background:#4ade8026}.win-indicator.medium{border:1px solid var(--accent-yellow);color:var(--accent-yellow);background:#fbbf2426}.win-indicator.low{border:1px solid var(--accent-orange);color:var(--accent-orange);background:#fb923c26}.win-indicator.very_low{border:1px solid var(--accent);color:var(--accent);background:#e9456026}.win-percentage{font-size:2.5rem}.tip-list{padding:0;list-style:none}.tip-list li{border-radius:8px;margin-bottom:8px;padding:12px 16px;font-size:.95rem;line-height:1.5}.tip-list li.tip{border-left:3px solid var(--accent-blue);background:#60a5fa1a}.tip-list li.warning{border-left:3px solid var(--accent);background:#e945601a}.strategy-cards{gap:16px;display:grid}.strategy-card{background:var(--bg-card);border:1px solid var(--border);cursor:pointer;border-radius:10px;padding:16px;transition:all .2s}.strategy-card:hover{border-color:var(--accent-blue);transform:translateY(-2px)}.strategy-card.selected{border-color:var(--accent-green);background:#4ade8014}.strategy-card h3{color:var(--accent-blue);margin-bottom:8px;font-size:1rem}.strategy-card p{color:var(--text-secondary);font-size:.9rem;line-height:1.4}.strategy-card .army-list{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.strategy-card .army-tag{background:#ffffff1a;border-radius:20px;padding:3px 10px;font-size:.8rem}.loading{flex-direction:column;align-items:center;gap:16px;padding:40px;display:flex}.spinner{border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:48px;height:48px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.reference-section{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;margin-top:32px;padding:24px}.reference-section h2{margin-bottom:16px}.unit-table{border-collapse:collapse;width:100%}.unit-table th,.unit-table td{text-align:left;border-bottom:1px solid var(--border);padding:8px 12px}.unit-table th{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:.8rem}.unit-table td{font-size:.9rem}.skill-badge{color:var(--accent-blue);background:#60a5fa33;border-radius:4px;margin:1px 2px;padding:2px 8px;font-size:.75rem;display:inline-block}.skill-badge.flanking{color:var(--accent-orange);background:#fb923c33}.skill-badge.firstStrike{color:var(--accent-green);background:#4ade8033}.skill-badge.lastStrike{color:var(--accent);background:#e9456033}.skill-badge.splash{color:var(--accent-yellow);background:#fbbf2433}.skill-badge.armored,.skill-badge.defender,.skill-badge.stalwart,.skill-badge.bulletproof{color:#b0b0c0;background:#a0a0b033}.skill-badge.piercing,.skill-badge.explosive{color:var(--accent);background:#e9456026}.skill-badge.charge,.skill-badge.quicksilver{color:var(--accent-green);background:#4ade8026}.skill-badge.spiky{color:var(--accent-orange);background:#fb923c26}.skill-badge.flying{color:var(--accent-blue);background:#60a5fa26}.skill-badge.support,.skill-badge.encourage,.skill-badge.rescuer,.skill-badge.pillage,.skill-badge.chaoticSpellcasting{color:#c084fc;background:#a855f726}.skill-badge.armageddon,.skill-badge.lightningBolt,.skill-badge.confusion,.skill-badge.summon,.skill-badge.revive{color:var(--accent);background:#e9456033}.screenshot-upload-grid{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;display:grid}@media (max-width:768px){.screenshot-upload-grid{grid-template-columns:1fr}}.upload-slot{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:16px}.upload-slot .upload-area{margin-bottom:0}.upload-slot .screenshot-preview{margin-bottom:8px}.upload-slot .screenshot-preview img{border-radius:8px}.collapsible-header{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;display:flex}.collapsible-header:hover{opacity:.8}.collapse-arrow{transition:transform .2s}.collapse-arrow.open{transform:rotate(180deg)}.tabs{background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;gap:4px;margin-bottom:24px;padding:4px;display:flex}.tab{text-align:center;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;padding:12px;font-size:.95rem;font-weight:500;transition:all .2s}.tab.active{background:var(--bg-card);color:var(--text-primary)}.tab:hover:not(.active){color:var(--text-primary)}.sim-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px;display:grid}.sim-stat{background:var(--bg-card);text-align:center;border-radius:8px;padding:16px}.sim-stat-value{font-size:1.5rem;font-weight:700}.sim-stat-label{color:var(--text-secondary);margin-top:4px;font-size:.8rem}.info-notice{color:var(--accent-blue);background:#60a5fa1a;border:1px solid #60a5fa4d;border-radius:10px;margin-bottom:24px;padding:16px 20px;font-size:.9rem;line-height:1.5}.screenshot-preview.parsing img{opacity:.4}.screenshot-parsing-overlay{color:var(--accent-green);background:#00000080;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:.95rem;font-weight:600;display:flex;position:absolute;inset:0}.parsing-status{color:var(--accent-green);background:#4ade801a;border:1px solid #4ade804d;border-radius:10px;align-items:center;gap:12px;margin-bottom:16px;padding:14px 20px;font-size:.9rem;display:flex}.parse-success{color:var(--accent-green);background:#4ade801a;border:1px solid #4ade804d;border-radius:10px;margin-bottom:16px;padding:14px 20px;font-size:.9rem}.parse-error{color:var(--accent);background:#e945601a;border:1px solid #e945604d;border-radius:10px;margin-bottom:16px;padding:14px 20px;font-size:.9rem}