:root{--bg: #0a0a0b;--bg-panel: #18191c;--bg-card: #1e2023;--bg-card-hover: #26292d;--border: #34373b;--border-bright: #4a4e54;--text: #e9e6df;--text-dim: #9aa2aa;--text-faint: #5c5f63;--accent: #9e2b28;--accent-bright: #c9433c;--accent-glow: rgba(158, 43, 40, .35);--q1: #9c8867;--q2: #cf7f29;--q3: #a2a41b;--q4: #42c234;--q5: #315dce;--q6: #a42acc;--steel: #4d7fa8;--light: #6fa8c7;--medium: #c9a44a;--heavy: #9e2b28;--positive: #7fbf7f;--negative: #e08585;--font-display: "Oswald", "Arial Narrow", sans-serif;--font-body: "Roboto", "Segoe UI", system-ui, sans-serif;--font-mono: "Roboto Mono", ui-monospace, monospace;--clip: 12px;--clip-sm: 8px}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);margin:0;font-family:var(--font-body)}#root{max-width:1100px;margin:0 auto;padding:24px 20px 60px;background-image:radial-gradient(ellipse 900px 420px at 50% -10%,rgba(158,43,40,.1),transparent 60%)}.hud-clip{clip-path:polygon(var(--clip) 0,100% 0,100% calc(100% - var(--clip)),calc(100% - var(--clip)) 100%,0 100%,0 var(--clip))}.app-header h1{font-family:var(--font-display);font-weight:700;font-size:1.7rem;text-transform:uppercase;margin:0 0 6px;letter-spacing:.02em}.app-subtitle{color:var(--text-dim);margin:0 0 24px;font-size:.92rem;max-width:640px;line-height:1.5}.toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--bg-panel);border:1px solid var(--border);clip-path:polygon(var(--clip) 0,100% 0,100% calc(100% - var(--clip)),calc(100% - var(--clip)) 100%,0 100%,0 var(--clip));padding:12px 16px;margin-bottom:24px}.toolbar-select{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--text-dim)}input[type=range]{accent-color:var(--accent)}select{background:var(--bg-card);background-image:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%);color:var(--text);border:1px solid var(--border);clip-path:polygon(var(--clip-sm) 0,100% 0,100% calc(100% - var(--clip-sm)),calc(100% - var(--clip-sm)) 100%,0 100%,0 var(--clip-sm));padding:7px 10px;font-family:var(--font-body);font-size:.88rem}select:focus{outline:2px solid var(--accent-glow);outline-offset:1px}.btn-clear{margin-left:auto;background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);clip-path:polygon(var(--clip-sm) 0,100% 0,100% calc(100% - var(--clip-sm)),calc(100% - var(--clip-sm)) 100%,0 100%,0 var(--clip-sm));padding:7px 16px;font-family:var(--font-display);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.btn-clear:hover{border-color:var(--border-bright);color:var(--text)}.layout{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:24px;align-items:start}.slots{display:flex;flex-direction:column;gap:14px;min-width:0}.slot-card{background:var(--bg-card);border:1px solid var(--border);clip-path:polygon(var(--clip) 0,100% 0,100% calc(100% - var(--clip)),calc(100% - var(--clip)) 100%,0 100%,0 var(--clip));padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0;transition:border-color .15s}.slot-card:has(select:focus){border-color:var(--accent)}.slot-card-header{display:flex;align-items:center;justify-content:space-between}.slot-card-label{font-family:var(--font-display);font-weight:600;font-size:.82rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.14em}.class-badge{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.06em;padding:2px 7px}.class-badge--light{color:var(--light);border:1px solid var(--light);background:color-mix(in srgb,var(--light) 14%,transparent)}.class-badge--medium{color:var(--medium);border:1px solid var(--medium);background:color-mix(in srgb,var(--medium) 14%,transparent)}.class-badge--heavy{color:var(--accent-bright);border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}.slot-icon-row{display:flex;align-items:center;gap:10px;min-width:0}.slot-select{flex:1;min-width:0}.item-icon{flex-shrink:0;padding:2px;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);background:var(--bg);border:1px solid var(--border);object-fit:contain}.item-icon--placeholder{background:repeating-linear-gradient(45deg,var(--bg),var(--bg) 4px,var(--bg-panel) 4px,var(--bg-panel) 8px)}.data-table--icons th:first-child,.data-table--icons td:first-child{width:34px;padding-right:0}.passive-groups{display:flex;flex-direction:column;gap:12px}.passive-group{border:1px solid var(--border);padding:10px 12px}.passive-group-header{display:flex;align-items:center;gap:10px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--border)}.passive-group-name{font-weight:500;font-size:.88rem}.passive-group-tier{margin-left:auto;font-family:var(--font-mono);font-size:.7rem;color:var(--text-faint);letter-spacing:.04em}.passive-stat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.passive-stat-list li{display:flex;justify-content:space-between;font-size:.85rem;color:var(--text-dim)}.passive-stat-list li>span:last-child{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.slot-tier{display:flex;flex-direction:column;gap:6px}.tier-label-row{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;row-gap:2px;column-gap:10px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:var(--text-faint);text-transform:uppercase;white-space:nowrap}.tier-label-row b{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.02em}.tier-track{display:flex;gap:2px;height:16px;background:var(--bg);border:1px solid var(--border);padding:2px}.tier-seg{flex:1;background:var(--text-faint);opacity:.3;border:none;padding:0;cursor:pointer}.tier-seg:hover{opacity:.6}.tier-seg.on{opacity:1}.tier-seg:focus-visible{outline:2px solid var(--accent-glow);outline-offset:1px}.slot-piece-info{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text-dim);border-top:1px solid var(--border);padding-top:8px}.slot-piece-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slot-piece-armor{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--accent-bright);font-weight:600;white-space:nowrap}.slot-piece-flavor{margin:0;font-family:var(--font-body);font-style:italic;font-size:.8rem;color:var(--text-dim);line-height:1.5}.results{display:flex;flex-direction:column;gap:20px}.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.stat-card{background:var(--bg-panel);border:1px solid var(--border);clip-path:polygon(var(--clip-sm) 0,100% 0,100% calc(100% - var(--clip-sm)),calc(100% - var(--clip-sm)) 100%,0 100%,0 var(--clip-sm));padding:14px;display:flex;flex-direction:column;gap:4px}.stat-card--primary{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 18%,transparent),var(--bg-panel) 70%);border-color:var(--accent)}.stat-label{font-family:var(--font-display);font-size:.7rem;font-weight:600;color:var(--text-faint);text-transform:uppercase;letter-spacing:.12em}.stat-value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:600;white-space:nowrap}.stat-card--primary .stat-value{color:var(--accent-bright)}.stat-value--text{font-size:1.05rem;letter-spacing:-.01em}.stat-sub{font-family:var(--font-mono);font-size:.75rem;color:var(--text-dim)}.empty-hint{color:var(--text-dim);font-style:italic}.panel-block{background:var(--bg-panel);border:1px solid var(--border);clip-path:polygon(var(--clip) 0,100% 0,100% calc(100% - var(--clip)),calc(100% - var(--clip)) 100%,0 100%,0 var(--clip));padding:16px}.panel-block h2{margin:0 0 12px;display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:.8rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.16em}.panel-block h2:before{content:"";width:3px;height:12px;background:var(--accent-bright);flex-shrink:0}.set-bonus-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.set-bonus{border:1px solid var(--border);padding:10px 12px;opacity:.6}.set-bonus--active{opacity:1;border-color:var(--accent);background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%)}.set-bonus-title{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-display);font-weight:600;letter-spacing:.02em}.set-bonus-status{font-family:var(--font-mono);font-size:.72rem;color:var(--text-faint);font-weight:500;letter-spacing:.04em}.set-bonus-status--active{color:var(--accent-bright)}.set-bonus-desc{margin:6px 0 0;font-size:.85rem;color:var(--text-dim);white-space:pre-line;line-height:1.5}.data-table{width:100%;border-collapse:collapse;font-size:.85rem}.data-table th{text-align:left;font-family:var(--font-display);color:var(--text-faint);font-weight:600;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;padding:6px 8px;border-bottom:1px solid var(--border)}.data-table th:last-child{text-align:right}.data-table td{padding:6px 8px;border-bottom:1px solid rgba(52,55,59,.5)}.data-table td:last-child{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}.data-table tbody tr:hover{background:#ffffff05}.value-positive{color:var(--positive)}.value-negative{color:var(--negative)}.panel-block--warning{border-color:var(--heavy)}.warning-list{margin:0;padding-left:18px;font-size:.82rem;color:var(--text-dim);display:flex;flex-direction:column;gap:4px}.app-footer{margin-top:40px;font-size:.78rem;color:var(--text-dim);border-top:1px solid var(--border);padding-top:16px}.app-footer code{font-family:var(--font-mono);color:var(--accent-bright)}@media (max-width: 820px){.layout{grid-template-columns:minmax(0,1fr)}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}