:root{--color-bg:#1a1a2e;--color-bg-deep:#0a0a1e;--color-panel:#16213e;--color-panel-border:#0f3460;--color-input-bg:#0f3460;--color-input-border:#1a4a7a;--color-input-border-focus:gold;--color-gold:gold;--color-gold-hover:#ffed4a;--color-text:#e2e8f0;--color-text-secondary:#ccc;--color-text-muted:#888;--color-text-dim:#555;--color-success:#4ade80;--color-danger:#f87171;--color-info:#60a5fa;--color-warning:#fbbf24;--color-nav-bg:#0d1117;--color-forest:#4ade80;--color-forest-border:#22c55e;--color-human:#60a5fa;--color-human-border:#3b82f6;--color-nightfall:#f87171;--color-nightfall-border:#ef4444;--font-2xs:1rem;--font-xs:1.1rem;--font-sm:1.2rem;--font-base:1.35rem;--font-md:1.45rem;--font-lg:1.55rem;--font-xl:1.75rem;--font-2xl:2rem;--font-3xl:2.5rem;--font-4xl:3.25rem;--space-1:6px;--space-2:10px;--space-3:16px;--space-4:22px;--space-5:28px;--space-6:34px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px}*{box-sizing:border-box;margin:0;padding:0}body,html{overflow-x:hidden;width:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:var(--color-bg);color:var(--color-text);min-height:100vh;font-size:var(--font-base)}:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}.container{max-width:1920px;margin:0 auto;padding:var(--space-4);overflow-x:hidden}main{display:flex;flex-direction:column;gap:var(--space-3)}.panel{background:var(--color-panel);border-radius:var(--radius-sm);padding:var(--space-4);border:1px solid var(--color-panel-border);min-width:0;overflow:hidden}.panel h2{color:var(--color-gold);margin-bottom:var(--space-3);font-size:var(--font-xl);border-bottom:1px solid var(--color-panel-border);padding-bottom:var(--space-2)}.panel h3{color:var(--color-text-secondary);margin:var(--space-3) 0 var(--space-2);font-size:var(--font-lg)}.hero-select-panel{grid-column:1/-1}.hero-filters{margin-bottom:var(--space-3);flex-wrap:wrap}.filter-group,.hero-filters{display:flex;gap:var(--space-2)}.filter-group{align-items:center}.filter-group label{font-size:var(--font-sm);color:var(--color-text-muted)}.filter-group select{background:var(--color-input-bg);border:1px solid var(--color-input-border);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);color:#fff;font-size:var(--font-sm);cursor:pointer}.filter-group select:focus{outline:none;border-color:var(--color-gold)}.hero-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));grid-gap:var(--space-2);gap:var(--space-2);max-height:340px;overflow-y:auto;padding:var(--space-1)}.hero-card{background:var(--color-input-bg);border-radius:var(--radius-sm);padding:var(--space-3);cursor:pointer;transition:background .15s;border:2px solid transparent}.hero-card.faction-Forest{border-left:4px solid var(--color-forest-border)}.hero-card.faction-Forest .name{color:var(--color-forest)}.hero-card.faction-Human{border-left:4px solid var(--color-human-border)}.hero-card.faction-Human .name{color:var(--color-human)}.hero-card.faction-Nightfall{border-left:4px solid var(--color-nightfall-border)}.hero-card.faction-Nightfall .name{color:var(--color-nightfall)}.hero-card.selected,.hero-card:hover{background:var(--color-input-border)}.hero-card.selected{border-color:var(--color-gold)!important;border-width:2px;border-style:solid}.hero-card .name{font-weight:700;margin-bottom:var(--space-1);font-size:var(--font-base)}.hero-card .info{font-size:var(--font-sm);color:var(--color-text-muted)}.hero-card .type-badge{display:inline-block;padding:2px 6px;border-radius:var(--radius-sm);font-size:var(--font-xs);margin-top:var(--space-1)}.hero-card .type-badge.Tank{background:#2d6a4f}.hero-card .type-badge.DPS{background:#9d0208}.hero-card .type-badge.Support{background:#3a0ca3}.selected-hero{background:var(--color-input-bg);border-radius:var(--radius-sm);padding:var(--space-3);margin-bottom:var(--space-2)}.selected-hero .hero-name{font-size:var(--font-2xl);color:var(--color-gold);margin-bottom:var(--space-1)}.selected-hero .hero-info{color:var(--color-text-muted);font-size:var(--font-sm)}.placeholder{color:var(--color-text-dim);font-style:italic}.buff-inputs,.stat-inputs{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:var(--space-2);gap:var(--space-2)}.equipment-faction-inputs{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--space-2);gap:var(--space-2);background:var(--color-input-bg);padding:var(--space-3);border-radius:var(--radius-sm)}.checkbox-group label{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;color:#fff;font-size:var(--font-sm)}.checkbox-group input[type=checkbox]{width:18px;height:18px;accent-color:var(--color-gold)}.input-group select{background:var(--color-bg);border:1px solid var(--color-input-border);border-radius:var(--radius-sm);padding:var(--space-2);color:#fff;font-size:var(--font-sm)}.input-group select:focus{outline:none;border-color:var(--color-gold)}.battle-inputs,.rage-inputs{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:var(--space-2);gap:var(--space-2);background:var(--color-input-bg);padding:var(--space-3);border-radius:var(--radius-sm)}.input-group{display:flex;flex-direction:column}.input-group label{font-size:var(--font-sm);color:var(--color-text-muted);margin-bottom:var(--space-1)}.input-group input{background:var(--color-input-bg);border:1px solid var(--color-input-border);border-radius:var(--radius-sm);padding:var(--space-2);color:#fff;font-size:var(--font-base)}.input-group input:focus{outline:none;border-color:var(--color-gold)}.star-level-selector{background:var(--color-input-bg);padding:var(--space-2);border-radius:var(--radius-sm);display:flex;justify-content:center}.star-selector{display:flex;gap:var(--space-2)}.star{width:36px;height:36px;border:none;border-radius:var(--radius-sm);background:var(--color-input-border);color:var(--color-text-muted);cursor:pointer;font-weight:700;font-size:var(--font-lg);transition:background .15s}.star:hover{background:#2d6a9f}.star.active{background:var(--color-gold);color:#000}.skills-display{display:flex;flex-direction:column;gap:var(--space-2)}details.skill-card{background:var(--color-input-bg);border-radius:var(--radius-sm);border-left:4px solid var(--color-gold)}details.skill-card.passive{border-left-color:var(--color-success)}details.skill-card.special{border-left-color:#f472b6}details.skill-card summary.skill-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3);cursor:pointer;list-style:none}details.skill-card summary.skill-header::-webkit-details-marker{display:none}details.skill-card summary.skill-header:after{content:"+";color:var(--color-text-muted);font-size:var(--font-lg);font-weight:700}details.skill-card[open] summary.skill-header:after{content:"-"}details.skill-card .skill-name{font-weight:700;color:var(--color-gold);font-size:var(--font-base)}details.skill-card.passive .skill-name{color:var(--color-success)}details.skill-card.special .skill-name{color:#f472b6}details.skill-card .skill-type{font-size:var(--font-xs);color:var(--color-text-muted);background:var(--color-panel);padding:2px 8px;border-radius:var(--radius-sm);margin-right:var(--space-4)}details.skill-card .skill-body{padding:0 var(--space-3) var(--space-3) var(--space-3)}details.skill-card .skill-desc{font-size:var(--font-sm);color:var(--color-text-secondary);margin-bottom:var(--space-2);line-height:1.5}.skill-card .star-effects{background:var(--color-panel);border-radius:var(--radius-sm);padding:var(--space-2)}.skill-card .star-effects-title{font-size:var(--font-sm);color:var(--color-text-muted);margin-bottom:var(--space-1)}.skill-card .star-effect-row{display:flex;padding:var(--space-1) 0;font-size:var(--font-sm);border-bottom:1px solid var(--color-panel-border)}.skill-card .star-effect-row:last-child{border-bottom:none}.skill-card .star-effect-row .star-num{width:30px;color:var(--color-gold);font-weight:700}.skill-card .star-effect-row .star-effect{flex:1 1;color:#aaa}.skill-card .star-effect-row.active .star-effect{color:var(--color-success)}.skill-card .star-effect-row.inactive .star-effect{color:var(--color-text-dim)}.skill-level-box{background:var(--color-panel);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);margin:var(--space-2) 0}.skill-level-selector{display:flex;align-items:center;gap:var(--space-2)}.skill-level-selector label{color:var(--color-text-muted);font-size:var(--font-sm);min-width:70px}.skill-level-slider{flex:1 1;height:6px;border-radius:var(--radius-sm);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-panel-border);outline:none}.skill-level-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-gold);cursor:pointer;-webkit-transition:background .15s;transition:background .15s}.skill-level-slider::-webkit-slider-thumb:hover{background:var(--color-gold-hover)}.skill-level-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-gold);cursor:pointer;border:none}.skill-level-value{min-width:30px;text-align:center;font-weight:700;color:var(--color-gold);font-size:var(--font-md)}.per-level-row{display:flex;padding:var(--space-1) 0 0 0;margin-top:var(--space-2);border-top:1px solid var(--color-panel-border);font-size:var(--font-sm)}.per-level-label{width:65px;color:var(--color-success);font-weight:700;flex-shrink:0}.per-level-text{color:#aaa;flex:1 1}details.skill-card.skill4{border-left-color:#f97316}details.skill-card.skill4 .skill-name{color:#f97316}details.skill-card.inactive-skill4{opacity:.5;border-left-color:#666}details.skill-card.inactive-skill4 .skill-name{color:#666}.skills-note{font-size:var(--font-sm);color:var(--color-text-dim);font-style:italic;margin-bottom:var(--space-2)}.calculate-btn{width:100%;padding:var(--space-3);margin-top:var(--space-3);background:var(--color-gold);color:#000;border:none;border-radius:var(--radius-sm);font-size:var(--font-base);font-weight:700;cursor:pointer;transition:background .15s}.calculate-btn:hover{background:var(--color-gold-hover)}.refresh-btn{padding:var(--space-2) var(--space-3);background:var(--color-input-bg);color:#fff;border:1px solid var(--color-input-border);border-radius:var(--radius-sm);cursor:pointer;margin-bottom:var(--space-2);font-size:var(--font-sm)}.refresh-btn:hover{background:var(--color-input-border)}.results-container{background:var(--color-input-bg)}.fight-total,.results-container{border-radius:var(--radius-sm);padding:var(--space-3)}.fight-total{text-align:center;margin-bottom:var(--space-3);background:linear-gradient(135deg,var(--color-input-border) 0,var(--color-input-bg) 100%)}.fight-total .fight-damage{font-size:var(--font-4xl);font-weight:700;color:var(--color-success)}.fight-total .fight-label{font-size:var(--font-sm);color:var(--color-text-muted)}.dps-total{font-size:var(--font-2xl);color:var(--color-gold);text-align:center;margin-bottom:var(--space-3)}.dps-card .fight-uses{color:var(--color-success);font-weight:700}.breakdown-details{margin-top:var(--space-3)}.breakdown-details summary{cursor:pointer;color:var(--color-text-muted);padding:var(--space-2);background:var(--color-input-bg);border-radius:var(--radius-sm);margin-bottom:var(--space-2);font-size:var(--font-sm)}.breakdown-details summary:hover{color:var(--color-gold)}.dps-breakdown{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--space-3);gap:var(--space-3);margin-bottom:var(--space-3)}.dps-card{background:var(--color-panel)}.dps-card,.rage-cycle-info{border-radius:var(--radius-sm);padding:var(--space-3)}.rage-cycle-info{background:var(--color-input-bg);text-align:center;margin-bottom:var(--space-3)}.rage-cycle-info .cycle-label{color:var(--color-gold);font-weight:700;margin-bottom:var(--space-1);font-size:var(--font-base)}.rage-cycle-info .cycle-detail{color:var(--color-text-secondary);font-size:var(--font-sm)}.dps-card h4{color:var(--color-gold);margin-bottom:var(--space-1);font-size:var(--font-sm)}.dps-card .value{font-size:var(--font-xl);color:#fff}.dps-card .detail{font-size:var(--font-sm);color:var(--color-text-muted);margin-top:var(--space-1)}.stats-summary{background:var(--color-panel);border-radius:var(--radius-sm);padding:var(--space-3);margin-bottom:var(--space-3)}.stats-summary .stat-row{display:flex;justify-content:space-between;padding:var(--space-1) 0;border-bottom:1px solid var(--color-panel-border);font-size:var(--font-sm)}.stats-summary .stat-row:last-child{border-bottom:none}.stats-summary .stat-row.faction-bonus span:last-child{color:var(--color-gold);font-weight:600}.breakdown-text{background:#0a0a0a;font-family:monospace;font-size:var(--font-sm);white-space:pre-wrap;max-height:300px;overflow-y:auto;color:var(--color-text-secondary)}.battle-phase-section,.breakdown-text{border-radius:var(--radius-sm);padding:var(--space-3)}.battle-phase-section{background:var(--color-panel);margin-bottom:var(--space-3)}.battle-phase-section h4{color:var(--color-gold);margin-bottom:var(--space-3);font-size:var(--font-base)}.battle-log{display:flex;flex-direction:column;gap:var(--space-2);max-height:400px;overflow-y:auto}.battle-turn{background:var(--color-input-bg);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);border-left:3px solid var(--color-gold)}.battle-turn.skill3-turn{border-left-color:#f472b6;background:linear-gradient(90deg,rgba(244,114,182,.1) 0,var(--color-input-bg) 30%)}.battle-turn.skill1-turn{border-left-color:var(--color-info)}.battle-turn.beast-turn{border-left-color:#a855f7;background:linear-gradient(90deg,rgba(168,85,247,.1) 0,var(--color-input-bg) 30%)}.battle-turn.beast-turn .turn-skill{color:#a855f7;font-weight:700}.battle-turn .turn-header{display:flex;justify-content:space-between;margin-bottom:var(--space-1)}.battle-turn .turn-number{font-weight:700;color:var(--color-gold);font-size:var(--font-sm)}.battle-turn .turn-rage{font-size:var(--font-sm);color:#f97316}.battle-turn .turn-details{display:flex;justify-content:space-between;align-items:center}.battle-turn .turn-skill{color:var(--color-text-secondary);font-size:var(--font-sm)}.battle-turn.skill3-turn .turn-skill{color:#f472b6;font-weight:700}.battle-turn .turn-damage{font-size:var(--font-lg);font-weight:700;color:var(--color-success)}.battle-turn .turn-calc{font-size:var(--font-xs);background:rgba(0,0,0,.3);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-family:monospace;word-break:break-all}.battle-turn .turn-calc,.battle-turn .turn-footer{color:var(--color-text-muted);margin-top:var(--space-1)}.battle-turn .turn-footer{display:flex;justify-content:flex-end;font-size:var(--font-sm)}.battle-turn .turn-total{color:var(--color-text-muted)}.rankings-panel{grid-column:1/-1}.rankings-table{width:100%;border-collapse:collapse;font-size:var(--font-sm)}.rankings-table td,.rankings-table th{padding:var(--space-2) var(--space-3);text-align:left;border-bottom:1px solid var(--color-panel-border)}.rankings-table th{color:var(--color-gold);font-weight:700}.rankings-table tr:hover{background:var(--color-input-bg)}.rankings-table .rank{color:var(--color-gold);font-weight:700}.rankings-table .dps-value{color:var(--color-success);font-weight:700}.rankings-table .type-badge{display:inline-block;padding:2px 6px;border-radius:var(--radius-sm);font-size:var(--font-xs)}.rankings-table .type-badge.Tank{background:#2d6a4f}.rankings-table .type-badge.DPS{background:#9d0208}.rankings-table .type-badge.Support{background:#3a0ca3}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--color-input-bg);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb{background:var(--color-input-border);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:#2d6a9f}.nav-bar{display:flex;align-items:center;justify-content:space-between;background:var(--color-nav-bg);border-bottom:1px solid var(--color-panel-border);padding:0 var(--space-5);height:52px;position:-webkit-sticky;position:sticky;top:0;z-index:100}.nav-logo{font-size:var(--font-xl);font-weight:700;color:var(--color-gold);text-decoration:none}.nav-links{display:flex;gap:var(--space-5)}.nav-link{color:var(--color-text-dim);font-size:var(--font-base);text-decoration:none;transition:color .15s;font-weight:500}.nav-link:hover{color:var(--color-text-secondary)}.nav-link.active{color:var(--color-gold)}.nav-auth{display:flex;align-items:center;gap:var(--space-2)}.nav-auth-btn{background:transparent;border:1px solid var(--color-gold);color:var(--color-gold);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-3);cursor:pointer;font-size:var(--font-sm);font-weight:700}.nav-auth-btn:hover{background:rgba(255,215,0,.1)}.nav-user{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-sm)}.nav-user-email{color:var(--color-gold)}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:200}.modal-card{background:var(--color-panel);border:1px solid var(--color-input-border);border-radius:var(--radius-md);padding:var(--space-5);width:100%;max-width:420px;margin:0 var(--space-4)}.modal-card h2{color:var(--color-gold);margin-bottom:var(--space-4);text-align:center;border:none;padding:0;font-size:var(--font-xl)}.modal-input{width:100%;background:var(--color-input-bg);border:1px solid var(--color-input-border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);color:#fff;font-size:var(--font-base);margin-bottom:var(--space-2)}.modal-input:focus-visible{outline:none;border-color:var(--color-gold)}.modal-submit{width:100%;background:var(--color-gold);color:#000;border:none;border-radius:var(--radius-sm);padding:var(--space-3);font-size:var(--font-base);font-weight:700;cursor:pointer;margin-top:var(--space-1)}.modal-submit:hover{background:var(--color-gold-hover)}.modal-submit:disabled{opacity:.6;cursor:default}.modal-toggle{text-align:center;margin-top:var(--space-3);font-size:var(--font-sm);color:var(--color-text-muted)}.modal-toggle button{background:none;border:none;color:var(--color-info);cursor:pointer;font-size:var(--font-sm);text-decoration:underline}.hero-row-grid{display:grid;grid-gap:var(--space-2);gap:var(--space-2)}.hero-front-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));margin-bottom:var(--space-3)}.hero-back-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}.team-loader-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));grid-gap:var(--space-3);gap:var(--space-3);margin-bottom:var(--space-3)}.team-loader{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:rgba(15,52,96,.4);border:1px solid hsla(0,0%,100%,.1);border-left:3px solid;border-radius:var(--radius-sm)}.team-loader-label{font-size:var(--font-sm);font-weight:600;white-space:nowrap}.team-loader-select{flex:1 1;padding:var(--space-1) var(--space-2);background:rgba(0,0,0,.3);color:var(--color-text);border:1px solid hsla(0,0%,100%,.15);border-radius:var(--radius-sm);font-size:var(--font-sm);min-width:0}.team-loader-btn{padding:var(--space-1) var(--space-3);border:none;border-radius:var(--radius-sm);font-size:var(--font-sm);font-weight:600;color:#000;cursor:pointer;white-space:nowrap;transition:opacity .15s}.team-loader-btn:disabled{opacity:.4;cursor:not-allowed}.team-loader-btn:not(:disabled):hover{opacity:.85}.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,620px),1fr));grid-gap:var(--space-3);gap:var(--space-3)}.battle-actions{display:flex;gap:var(--space-3);justify-content:center}.battle-actions .calculate-btn{max-width:220px;flex:1 1}.page-placeholder{text-align:center;padding:40px var(--space-5);color:var(--color-text-dim)}.page-placeholder h1{color:var(--color-gold);font-size:var(--font-3xl);margin-bottom:var(--space-2)}.page-content{padding:var(--space-3) var(--space-4)}@media (max-width:768px){.page-content{padding:var(--space-3)}.team-grid,.team-loader-grid{grid-template-columns:1fr}.nav-links{gap:var(--space-3)}.battle-actions{flex-direction:column;align-items:stretch}.battle-actions .calculate-btn{max-width:none}.buff-inputs,.stat-inputs{grid-template-columns:1fr 1fr}}@media (max-width:480px){.container,.page-content{padding:var(--space-2)}.panel{padding:var(--space-3)}.modal-card{padding:var(--space-4);margin:0 var(--space-2)}.nav-bar{padding:0 var(--space-3);height:46px}.nav-logo{font-size:var(--font-lg)}.nav-link{font-size:var(--font-sm)}.nav-links{display:flex;gap:var(--space-3)}}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.site-footer{text-align:center;padding:var(--space-4) var(--space-3);margin-top:var(--space-3);font-size:var(--font-xs);color:var(--color-text-dim);border-top:1px solid var(--color-panel)}.site-footer a{color:var(--color-text-muted);text-decoration:underline}.site-footer a:hover{color:#aaa}