@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;700;900&display=swap";:root{--bg:#070a12;--bg-2:#0b1120;--panel:#101828;--panel-2:#16203a;--panel-3:#1c2844;--line:#223052;--line-soft:#1a2540;--text:#e9efff;--muted:#8b9cc0;--muted-2:#64769b;--gold:#f2c65c;--gold-2:#c9962f;--blue:#58a6ff;--green:#43d98a;--red:#ff6b6b;--purple:#a78bfa;--water:#46a6ff;--fire:#ff7a52;--wind:#4ade80;--light:#ffd75e;--dark:#b07cff;--radius:14px;--shadow:0 18px 40px -18px #000c}*{box-sizing:border-box}html,body,#root{height:100%}body{background:radial-gradient(1100px 600px at 12% -8%, #487aff24, transparent 60%), radial-gradient(900px 500px at 92% 0%, #f2c65c17, transparent 55%), var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,Noto Sans TC,Microsoft JhengHei,system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.55}button,input,select,textarea{font-family:inherit}button{cursor:pointer}a{color:var(--blue);text-decoration:none}h1,h2,h3,h4{letter-spacing:-.01em;margin:0;font-weight:700}p{margin:0}::selection{background:#f2c65c4d}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{border:2px solid var(--bg);background:#223052;border-radius:8px}::-webkit-scrollbar-thumb:hover{background:#2f416b}.app{min-height:100%;display:flex}.sidebar{border-right:1px solid var(--line-soft);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:20;background:linear-gradient(#101828e6,#080c16e6);flex-direction:column;flex:0 0 236px;gap:18px;width:236px;height:100vh;padding:20px 14px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:11px;padding:4px 6px 0;display:flex}.brand-mark{color:#201603;background:linear-gradient(145deg,#f6d27a,#b9821f);border-radius:11px;place-items:center;width:38px;height:38px;font-size:17px;font-weight:900;display:grid;box-shadow:0 6px 18px -6px #f2c65cb3}.brand-title{letter-spacing:.02em;font-size:15px;font-weight:800}.brand-sub{color:var(--muted-2);letter-spacing:.14em;text-transform:uppercase;font-size:10.5px}.nav{flex-direction:column;gap:3px;margin-top:4px;display:flex}.nav-label{letter-spacing:.14em;color:var(--muted-2);text-transform:uppercase;padding:10px 10px 4px;font-size:10.5px}.nav-item{color:var(--muted);text-align:left;background:0 0;border:1px solid #0000;border-radius:10px;align-items:center;gap:10px;width:100%;padding:9px 10px;font-size:13.5px;font-weight:500;transition:all .15s;display:flex}.nav-item:hover{color:var(--text);background:#ffffff09}.nav-item.active{color:var(--text);box-shadow:inset 2px 0 0 var(--gold);background:linear-gradient(90deg,#f2c65c29,#f2c65c08);border-color:#f2c65c47}.nav-item.active svg{color:var(--gold)}.nav-item svg{opacity:.9;width:17px;height:17px}.sidebar-foot{flex-direction:column;gap:8px;margin-top:auto;display:flex}.main{flex-direction:column;flex:1;min-width:0;display:flex}.topbar{border-bottom:1px solid var(--line-soft);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:15;background:#080c168c;justify-content:space-between;align-items:center;gap:16px;padding:16px 26px;display:flex;position:sticky;top:0}.topbar h1{font-size:18px}.topbar .sub{color:var(--muted);margin-top:1px;font-size:12px}.content{width:100%;max-width:1500px;margin:0 auto;padding:24px 26px 60px}.card{border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow);background:linear-gradient(#16203ab8,#0d1321b8)}.card-pad{padding:18px}.card-head{border-bottom:1px solid var(--line-soft);justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;display:flex}.card-title{letter-spacing:.02em;font-size:13.5px;font-weight:700}.card-sub{color:var(--muted);font-size:11.5px}.grid{gap:16px;display:grid}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.row{align-items:center;gap:10px;display:flex}.wrap{flex-wrap:wrap}.between{justify-content:space-between}.col{flex-direction:column;gap:10px;display:flex}.btn{border:1px solid var(--line);background:var(--panel-2);color:var(--text);white-space:nowrap;border-radius:10px;justify-content:center;align-items:center;gap:7px;padding:8px 14px;font-size:13px;font-weight:600;transition:all .15s;display:inline-flex}.btn:hover{background:var(--panel-3);border-color:#2f416b}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{color:#23180a;background:linear-gradient(135deg,#f6d27a,#d9a53c);border-color:#e5b34c;box-shadow:0 8px 22px -12px #f2c65ce6}.btn-primary:hover{background:linear-gradient(135deg,#ffe093,#e8b449)}.btn-ghost{border-color:var(--line-soft);background:0 0}.btn-sm{border-radius:8px;padding:5px 10px;font-size:12px}.btn-icon{padding:8px}.input,.select{border:1px solid var(--line);width:100%;color:var(--text);background:#0b1221;border-radius:9px;outline:none;padding:8px 11px;font-size:13px;transition:border .15s,box-shadow .15s}.input:focus,.select:focus{border-color:#f2c65c99;box-shadow:0 0 0 3px #f2c65c1f}.select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;background-repeat:no-repeat;background-size:5px 5px;padding-right:28px}.field{flex-direction:column;gap:6px;display:flex}.field label{color:var(--muted);letter-spacing:.02em;font-size:11.5px;font-weight:600}.hint{color:var(--muted-2);font-size:11.5px}.chip{color:#9dcbff;background:#58a6ff1a;border:1px solid #58a6ff38;border-radius:999px;align-items:center;gap:5px;padding:3px 9px;font-size:11.5px;font-weight:600;display:inline-flex}.chip.gold{color:var(--gold);background:#f2c65c1f;border-color:#f2c65c4d}.chip.green{color:var(--green);background:#43d98a1a;border-color:#43d98a40}.chip.red{color:var(--red);background:#ff6b6b1a;border-color:#ff6b6b40}.chip.muted{color:var(--muted);border-color:var(--line-soft);background:#8b9cc014}.stat-tile{border:1px solid var(--line-soft);background:#0b112099;border-radius:12px;padding:14px 16px}.stat-tile .k{color:var(--muted);letter-spacing:.04em;font-size:11px}.stat-tile .v{letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px;font-size:22px;font-weight:800}.stat-tile .u{color:var(--muted-2);margin-left:3px;font-size:11px;font-weight:600}.table{border-collapse:collapse;width:100%;font-size:12.5px}.table th{text-align:left;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--line-soft);white-space:nowrap;z-index:1;background:#0d1424;padding:9px 12px;font-size:11px;font-weight:600;position:sticky;top:0}.table td{border-bottom:1px solid #1a254099;padding:9px 12px}.table tbody tr:hover{background:#58a6ff0a}.table .num{text-align:right;font-variant-numeric:tabular-nums}.scroll-y{overflow:auto}.scroll-y::-webkit-scrollbar{width:8px;height:8px}.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.muted{color:var(--muted)}.dim{color:var(--muted-2)}.tiny{font-size:11px}.big{font-size:16px;font-weight:700}.gold{color:var(--gold)}.green{color:var(--green)}.red{color:var(--red)}.divider{background:var(--line-soft);height:1px;margin:2px 0}.el-1{color:var(--water)}.el-2{color:var(--fire)}.el-3{color:var(--wind)}.el-4{color:var(--light)}.el-5{color:var(--dark)}.ring-1{box-shadow:0 0 0 2px #46a6ff8c}.ring-2{box-shadow:0 0 0 2px #ff7a528c}.ring-3{box-shadow:0 0 0 2px #4ade808c}.ring-4{box-shadow:0 0 0 2px #ffd75e8c}.ring-5{box-shadow:0 0 0 2px #b07cff8c}.mon-icon{object-fit:cover;background:#0b1221;border-radius:10px;width:44px;height:44px}.mon-icon.lg{border-radius:12px;width:64px;height:64px}.dropzone{text-align:center;background:linear-gradient(#16203a80,#0b11204d);border:1.5px dashed #2b3d63;border-radius:16px;flex-direction:column;align-items:center;gap:10px;padding:40px 24px;transition:all .18s;display:flex}.dropzone.hover{border-color:var(--gold);background:#f2c65c0f;transform:translateY(-1px)}.dropzone .dz-icon{width:54px;height:54px;color:var(--gold);background:#f2c65c1f;border-radius:15px;place-items:center;display:grid}.hero{grid-template-columns:1.15fr .85fr;align-items:center;gap:26px;padding:10px 0 6px;display:grid}.hero h2{letter-spacing:-.03em;font-size:34px;line-height:1.18}.hero h2 span{background:linear-gradient(100deg,#f6d27a,#ffb86b 60%,#f2c65c);color:#0000;-webkit-background-clip:text;background-clip:text}.hero p{color:var(--muted);max-width:560px;font-size:14px}.tick-badge{color:var(--gold);font-variant-numeric:tabular-nums;background:linear-gradient(135deg,#f2c65c2e,#f2c65c0d);border:1px solid #f2c65c59;border-radius:8px;align-items:baseline;gap:2px;padding:1px 7px;font-size:11.5px;font-weight:800;display:inline-flex}.rune{border:1px solid var(--line-soft);background:#0b1120b3;border-radius:11px;flex-direction:column;gap:5px;min-width:0;padding:10px 11px;display:flex}.rune-top{justify-content:space-between;align-items:center;gap:6px;display:flex}.rune-set{align-items:center;gap:6px;font-size:12px;font-weight:700;display:flex}.rune-dot{background:var(--muted);border-radius:3px;width:8px;height:8px}.rune-slot{color:var(--muted-2);letter-spacing:.06em;font-size:10.5px;font-weight:700}.rune-main{color:var(--gold);font-size:13px;font-weight:800}.rune-sub{color:var(--muted);justify-content:space-between;gap:10px;font-size:11.5px;display:flex}.rune-sub b{color:#cfdcf7;font-weight:600}.rune-sub .g{color:var(--green);font-size:10.5px}.rune.legendary{border-color:#ffc85a47}.rune.hero{border-color:#be82ff40}.rune.rare{border-color:#58a6ff38}.rune-prefix{color:#a9bce0}.rune-tag{letter-spacing:.02em;color:var(--gold);background:#f2c65c14;border:1px solid #f2c65c59;border-radius:4px;padding:0 3px;font-size:9px;font-weight:700;line-height:1.5}.rune-tag.muted{color:var(--muted);border-color:var(--line-soft);background:0 0}.rune-sub .gem{color:#5ee6d0;font-size:10px}.rune.detail{gap:4px;padding:11px 12px}.rune.detail .rune-main{letter-spacing:-.01em;font-size:13.5px}.rune-meta{border-top:1px dashed var(--line-soft);flex-direction:column;gap:3px;margin-top:6px;padding-top:7px;display:flex}.rune-meta-row{color:var(--muted-2);justify-content:space-between;align-items:center;gap:8px;font-size:10.5px;display:flex}.rune-meta-row b{color:#cfdcf7;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;max-width:68%;font-weight:700;overflow:hidden}.rune-meta-row b.gold{color:var(--gold)}.rune-meta .bar{margin-top:3px}.rune-wheel-head{justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 8px;display:flex}.rune-wheel-title{letter-spacing:.03em;font-size:12px;font-weight:700}.rune-wheel-wrap{container-type:inline-size}.rune-wheel{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"rs6 rs1 rs2""rs5 rs4 rs3";gap:10px;padding:9px 0;display:grid}.rune-wheel-cell{min-width:0;display:flex}.rune-wheel-cell[data-slot="1"]{transform:translateY(-9px)}.rune-wheel-cell[data-slot="4"]{transform:translateY(9px)}.rune-wheel-cell>.rune{flex:auto}.rune-wheel .rune-slot{color:var(--gold);opacity:.75}.rune-empty{opacity:.6;background:0 0;border-style:dashed;justify-content:flex-start}@container (width<=700px){.rune-wheel{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-template-areas:none;padding:0}.rune-wheel-cell{grid-area:auto!important}.rune-wheel-cell[data-slot]{transform:none}}.focus-panel{background:linear-gradient(#f2c65c0f,#f2c65c05);border:1px solid #f2c65c3d;border-radius:12px;flex-direction:column;gap:8px;padding:11px 12px;display:flex}.focus-title{letter-spacing:.03em;font-size:12px;font-weight:700}.focus-row{grid-template-columns:minmax(0,1fr) 58px 30px;align-items:center;gap:6px;display:grid}.focus-row .select{padding:5px 26px 5px 9px;font-size:12px}.focus-row .input{text-align:center;padding:5px 6px;font-size:12px}.focus-row .btn{padding:4px}.focus-depth{border-top:1px dashed var(--line-soft);flex-direction:column;gap:4px;padding-top:8px;display:flex}.empty{text-align:center;color:var(--muted);padding:50px 20px}.empty svg{opacity:.35;width:40px;height:40px;margin-bottom:10px}.modal-back{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:100;background:#03060cc7;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:var(--panel);border:1px solid var(--line);border-radius:18px;width:min(760px,100%);max-height:86vh;overflow:auto;box-shadow:0 40px 80px -30px #000}.modal-head{border-bottom:1px solid var(--line-soft);background:var(--panel);z-index:2;justify-content:space-between;align-items:center;padding:16px 20px;display:flex;position:sticky;top:0}.modal-body{padding:18px 20px 22px}.bar{background:#223052b3;border-radius:999px;height:6px;overflow:hidden}.bar>i{background:linear-gradient(90deg,#58a6ff,#a78bfa);border-radius:999px;height:100%;display:block}.kv{border-bottom:1px dashed #2230528c;justify-content:space-between;align-items:center;padding:7px 0;font-size:12.5px;display:flex}.kv:last-child{border-bottom:0}.kv .k{color:var(--muted)}.kv .v{font-variant-numeric:tabular-nums;font-weight:600}.tabs{border:1px solid var(--line-soft);background:#0b1120cc;border-radius:11px;gap:3px;padding:3px;display:inline-flex}.tab{color:var(--muted);background:0 0;border:0;border-radius:8px;padding:6px 13px;font-size:12.5px;font-weight:600}.tab.active{color:var(--gold);background:#f2c65c24}.tick-row{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;display:grid}.tick-cell{border:1px solid var(--line-soft);background:#0b1120a6;border-radius:10px;flex-direction:column;gap:1px;padding:8px 10px;display:flex}.tick-cell.hit{background:#f2c65c17;border-color:#f2c65c8c}.tick-cell .t{color:var(--muted);letter-spacing:.06em;font-size:10.5px;font-weight:700}.tick-cell .s{font-variant-numeric:tabular-nums;font-size:16px;font-weight:800}.alert{border:1px solid;border-radius:10px;padding:11px 14px;font-size:12.5px}.alert.warn{color:#ffdf9a;background:#f2c65c14;border-color:#f2c65c4d}.alert.err{color:#ffb3b3;background:#ff6b6b14;border-color:#ff6b6b4d}.alert.ok{color:#9ff0c3;background:#43d98a14;border-color:#43d98a47}.toast-wrap{z-index:200;flex-direction:column;gap:8px;display:flex;position:fixed;bottom:20px;right:20px}.toast{border:1px solid var(--line);box-shadow:var(--shadow);background:#16203a;border-radius:10px;padding:10px 16px;font-size:12.5px;animation:.18s slideIn}@keyframes slideIn{0%{opacity:0;transform:translateY(8px)}}.build-row{grid-template-columns:38px 1fr auto;align-items:center;gap:12px;display:grid}.build-rank{width:30px;height:30px;color:var(--blue);background:#58a6ff1a;border:1px solid #58a6ff33;border-radius:9px;place-items:center;font-size:12px;font-weight:800;display:grid}.build-rank.top{color:var(--gold);background:#f2c65c24;border-color:#f2c65c59}.optimizer-grid{grid-template-columns:minmax(330px,380px) minmax(0,1fr);align-items:start}.optimizer-side{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#2b3d63 transparent;max-height:calc(100vh - 118px);position:sticky;top:78px;overflow-y:auto}.optimizer-side::-webkit-scrollbar{width:7px}.optimizer-side::-webkit-scrollbar-thumb{background:#2b3d63;border-radius:99px}.optimizer-actions{border-radius:0 0 var(--radius) var(--radius);background:linear-gradient(#10182800,#101828 38%);margin:2px -18px -18px;padding:12px 18px 18px;position:sticky;bottom:0}@media (max-width:1080px){.optimizer-grid{grid-template-columns:1fr}.optimizer-side{max-height:none;position:static;overflow:visible}.optimizer-actions{background:0 0;margin:2px 0 0;padding:0;position:static}}.mobile-nav{display:none}@media (max-width:1080px){.hero{grid-template-columns:1fr}.g4,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:820px){.sidebar{display:none}.content{padding:16px 14px 90px}.topbar{padding:12px 14px}.hero h2{font-size:26px}.g2,.g3,.g4{grid-template-columns:1fr}.mobile-nav{z-index:50;border-top:1px solid var(--line-soft);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:#0a0f1af5;justify-content:space-around;display:flex;position:fixed;bottom:0;left:0;right:0}.mobile-nav button{color:var(--muted);background:0 0;border:0;flex-direction:column;flex:1;align-items:center;gap:2px;padding:4px 0;font-size:10px;font-weight:600;display:flex}.mobile-nav button.active{color:var(--gold)}.mobile-nav svg{width:19px;height:19px}}