:root{--bg-0: #05060b;--bg-1: #0b0d18;--accent: #ff2e63;--accent-2: #6a3cff;--accent-3: #00e0ff;--text: #f4f4fa;--text-dim: #a9a9b8;--glass-bg: rgba(255, 255, 255, .04);--glass-bg-strong: rgba(255, 255, 255, .07);--glass-border: rgba(255, 255, 255, .09);--glass-border-strong: rgba(255, 255, 255, .18);--shadow: 0 20px 60px rgba(0, 0, 0, .5);--radius: 16px;--radius-sm: 10px;--role-vanguard: #3ca8ff;--role-duelist: #ff4560;--role-strategist: #3ddc97;--role-any: #c792ff;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;color:var(--text);background:var(--bg-0);overflow-x:hidden;min-height:100vh;position:relative}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(900px circle at 10% 10%,rgba(255,46,99,.22),transparent 55%),radial-gradient(1000px circle at 90% 20%,rgba(106,60,255,.22),transparent 55%),radial-gradient(900px circle at 50% 100%,rgba(0,224,255,.15),transparent 60%),linear-gradient(160deg,#05060b,#0a0b16,#05060b);z-index:-2}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(circle at 50% 50%,black 30%,transparent 80%);mask-image:radial-gradient(circle at 50% 50%,black 30%,transparent 80%);z-index:-1}button{font-family:inherit;cursor:pointer;border:none;outline:none;color:inherit}button:disabled{opacity:.45;cursor:not-allowed}input,select{font-family:inherit;color:inherit;outline:none;border:none}h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em}.app{max-width:1240px;margin:0 auto;padding:48px 24px 96px}.hero{text-align:center;margin-bottom:40px}.hero h1{font-size:clamp(2rem,4.5vw,3.5rem);background:linear-gradient(100deg,#fff,#ff2e63 40%,#6a3cff,#00e0ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 80px rgba(255,46,99,.25)}.hero p{color:var(--text-dim);margin:12px auto 0;max-width:600px;font-size:.95rem}.glass{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:var(--shadow)}.glass-strong{background:var(--glass-bg-strong);border-color:var(--glass-border-strong)}.panel{padding:24px;margin-bottom:24px}.panel h2{font-size:1.1rem;margin-bottom:18px;display:flex;align-items:center;gap:10px}.panel h2 .badge{font-size:.7rem;font-weight:600;color:var(--text-dim);padding:3px 10px;border-radius:999px;background:#ffffff0f;border:1px solid var(--glass-border)}.row{display:flex;gap:12px;flex-wrap:wrap}.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}@media (max-width: 860px){.grid-two{grid-template-columns:1fr}}.people{display:grid;gap:10px}.person-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#ffffff08;border:1px solid var(--glass-border);border-radius:var(--radius-sm);transition:border-color .2s,background .2s}.person-row:focus-within{border-color:#ff2e638c;background:#ff2e630d}.person-row input{flex:1;background:transparent;padding:8px 10px;font-size:.95rem;color:var(--text)}.person-row input::placeholder{color:var(--text-dim)}.person-index{width:24px;height:24px;display:grid;place-items:center;background:#ffffff0d;border-radius:50%;font-size:.75rem;color:var(--text-dim);border:1px solid var(--glass-border)}.icon-btn{width:32px;height:32px;display:grid;place-items:center;background:transparent;color:var(--text-dim);border-radius:8px;font-size:1.1rem;transition:background .15s,color .15s}.icon-btn:hover{background:#ff2e631f;color:var(--accent)}.add-person-btn{width:100%;padding:12px;margin-top:4px;border-radius:var(--radius-sm);background:#ffffff08;border:1px dashed var(--glass-border-strong);color:var(--text-dim);font-size:.9rem;transition:all .2s}.add-person-btn:hover:not(:disabled){background:#6a3cff1a;border-color:var(--accent-2);color:#fff}.role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}@media (max-width: 640px){.role-grid{grid-template-columns:repeat(2,1fr)}}.role-card{padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;background:#ffffff08;border:1px solid var(--glass-border);border-radius:var(--radius-sm);position:relative}.role-card .role-name{font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim)}.role-card.vanguard .role-name{color:var(--role-vanguard)}.role-card.duelist .role-name{color:var(--role-duelist)}.role-card.strategist .role-name{color:var(--role-strategist)}.role-card.any .role-name{color:var(--role-any)}.counter{display:flex;align-items:center;gap:6px}.counter button{width:28px;height:28px;border-radius:8px;background:#ffffff0f;color:var(--text);font-size:1rem;font-weight:700;transition:background .15s}.counter button:hover:not(:disabled){background:#ffffff1f}.counter-value{min-width:28px;text-align:center;font-weight:700;font-size:1.1rem}.slot-summary{margin-top:14px;padding-top:14px;border-top:1px solid var(--glass-border);display:flex;justify-content:space-between;font-size:.85rem;color:var(--text-dim)}.slot-summary .warning{color:var(--accent)}.slot-summary .ok{color:var(--role-strategist)}.randomize-bar{display:flex;justify-content:center;margin:32px 0}.randomize-btn{position:relative;padding:16px 48px;font-size:1rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:linear-gradient(100deg,#ff2e63,#6a3cff 60%,#00e0ff);border-radius:999px;box-shadow:0 8px 32px #ff2e6366,0 0 0 1px #ffffff26 inset;transition:transform .15s,box-shadow .2s}.randomize-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 40px #ff2e638c,0 0 0 1px #ffffff40 inset}.randomize-btn:active:not(:disabled){transform:translateY(1px)}.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.result-card{padding:16px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden;animation:fadeUp .45s cubic-bezier(.16,1,.3,1) both}.result-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 0%,var(--role-glow, rgba(255, 46, 99, .25)),transparent 60%);pointer-events:none;opacity:.8}.result-card[data-role=Vanguard]{--role-glow: rgba(60, 168, 255, .32)}.result-card[data-role=Duelist]{--role-glow: rgba(255, 69, 96, .32)}.result-card[data-role=Strategist]{--role-glow: rgba(61, 220, 151, .32)}.result-card[data-role=Multi-Role]{--role-glow: rgba(199, 146, 255, .32)}.result-card .name{font-size:.75rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;z-index:1}.result-card .person{font-size:1.1rem;font-weight:700;margin-bottom:10px;z-index:1}.hero-block{display:flex;flex-direction:column;align-items:center;gap:6px;z-index:1;width:100%}.hero-label-row{display:flex;align-items:center;gap:6px}.hero-label{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}.reroll-btn{width:22px;height:22px;display:grid;place-items:center;background:#ffffff0f;border:1px solid var(--glass-border);border-radius:50%;font-size:.85rem;color:var(--text-dim);transition:transform .4s cubic-bezier(.4,0,.2,1),background .15s,color .15s,border-color .15s;line-height:1}.reroll-btn:hover{background:#ff2e632e;border-color:#ff2e6380;color:#fff;transform:rotate(180deg)}.reroll-btn:active{transform:rotate(360deg);transition-duration:.25s}.hero-block.backup .hero-wrap{width:72px;height:72px;opacity:.9}.hero-wrap{width:120px;height:120px;border-radius:50%;overflow:hidden;background:#ffffff0a;border:1px solid var(--glass-border-strong);display:grid;place-items:center}.hero-wrap img{width:100%;height:100%;object-fit:cover;display:block}.hero-missing{color:var(--text-dim);font-size:1.5rem}.hero-name{font-size:.95rem;font-weight:700;text-align:center;line-height:1.15;padding:0 6px}.divider{width:70%;height:1px;background:linear-gradient(90deg,transparent,var(--glass-border-strong),transparent);margin:14px 0 8px;z-index:1}.slot-hint{margin-top:10px}.role-pill{margin-top:8px;padding:4px 12px;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;border:1px solid;z-index:1}.role-pill.Vanguard{color:var(--role-vanguard);border-color:#3ca8ff66;background:#3ca8ff1a}.role-pill.Duelist{color:var(--role-duelist);border-color:#ff456066;background:#ff45601a}.role-pill.Strategist{color:var(--role-strategist);border-color:#3ddc9766;background:#3ddc971a}.role-pill.Multi-Role{color:var(--role-any);border-color:#c792ff66;background:#c792ff1a}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.footer{text-align:center;margin-top:48px;font-size:.8rem;color:var(--text-dim)}.empty{text-align:center;padding:40px 20px;color:var(--text-dim);font-size:.9rem}