:root{--bg: #121212;--surface: #1c1c1c;--surface-2: #242424;--surface-3: #2c2c2c;--accent: #e28552;--accent-soft: #e2a77d;--accent-dim: rgba(226, 133, 82, .2);--accent-tint: rgba(226, 133, 82, .1);--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .14);--text: rgba(255, 255, 255, .87);--text-dim: rgba(255, 255, 255, .6);--text-faint: rgba(255, 255, 255, .38);--positive: #66bb6a;--negative: #ef5350;--radius: 8px;--header-h: 60px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.5}a{color:inherit;text-decoration:none}button,input,select{font-family:inherit;font-size:inherit}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#3a3a3a}.container{max-width:1100px;margin:0 auto;padding:0 20px}.page{padding-top:calc(var(--header-h) + 24px);padding-bottom:64px;min-height:100vh}.page-title{font-size:1.9rem;font-weight:700;margin:0 0 4px}.text-dim{color:var(--text-dim)}.text-faint{color:var(--text-faint)}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.app-header{position:fixed;inset:0 0 auto 0;height:var(--header-h);display:flex;align-items:center;background:#121212d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:50}.app-header .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem}.app-header .brand .mark{width:22px;height:22px;object-fit:contain;flex-shrink:0}.app-header .spacer{flex:1}.app-header nav a{color:var(--text-dim);padding:6px 10px;border-radius:6px}.app-header nav a:hover,.app-header nav a.router-link-active{color:var(--text);background:var(--surface-2)}.btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);color:var(--text);border:1px solid var(--border-strong);border-radius:6px;padding:7px 14px;cursor:pointer;transition:background .15s,border-color .15s}.btn:hover{background:var(--surface-3);border-color:var(--accent-dim)}.btn.accent{background:var(--accent);border-color:var(--accent);color:#1a1a1a;font-weight:600}.btn.accent:hover{filter:brightness(1.08)}.btn.sm{padding:3px 9px;font-size:.82rem}.input{width:100%;background:#21212199;border:1px solid var(--border-strong);border-radius:8px;color:var(--text);padding:11px 14px;outline:none;transition:border-color .15s}.input:focus{border-color:var(--accent)}.tag{display:inline-flex;align-items:center;gap:5px;background:#21212199;border-radius:4px;color:var(--text-dim);font-size:.85rem;padding:4px 8px}.state{text-align:center;padding:64px 20px;color:var(--text-dim)}.spinner{width:36px;height:36px;border:3px solid var(--surface-3);border-top-color:var(--accent);border-radius:50%;margin:0 auto 14px;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.gold{white-space:nowrap;font-variant-numeric:tabular-nums}.gold .g{color:#f2c94c}.gold .s{color:silver}.gold .c{color:#cd7f32}.profit-pos{color:var(--positive)}.profit-neg{color:var(--negative)}.sim-wrap{max-width:1180px;margin:0 auto;padding:calc(var(--header-h) + 28px) 16px 80px}.sim-card{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--border-strong);border-radius:14px;overflow:hidden;box-shadow:0 12px 40px #00000073}.sim-title{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--surface-3);font-weight:600;letter-spacing:.3px}.sim-title .accent-dot{color:var(--accent)}.altar{position:relative;width:360px;height:320px;margin:26px auto 8px}.altar svg.hex{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.slot{position:absolute;width:92px;height:92px;border-radius:12px;background:radial-gradient(circle at 50% 35%,#20242b,#111316);border:2px solid var(--border-strong);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s;-webkit-user-select:none;user-select:none}.slot:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}.slot.filled{border-color:var(--accent-soft);box-shadow:0 0 18px #e2855240}.slot .ph{color:var(--text-faint);font-size:12px;text-align:center;line-height:1.2;padding:4px}.slot-item{left:50%;top:4px;transform:translate(-50%);width:104px;height:104px}.slot-scroll{left:14px;bottom:8px}.slot-charm{right:14px;bottom:8px}.slot-label{position:absolute;left:50%;transform:translate(-50%);font-size:12px;white-space:nowrap;color:var(--text-dim)}.slot-item .slot-label{top:110px}.slot-scroll .slot-label,.slot-charm .slot-label{bottom:-20px}.slot-icon{position:relative;width:100%;height:100%;border-radius:10px;overflow:hidden}.slot-icon img{width:100%;height:100%;display:block;image-rendering:auto}.slot-icon .ov{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.grade-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:30px auto 0;max-width:620px}.grade-pill{padding:4px 10px;border-radius:999px;font-size:12.5px;cursor:pointer;border:1px solid var(--border);background:var(--surface-2);color:var(--text-dim)}.grade-pill.active{color:#fff;border-color:var(--accent);background:var(--accent-dim)}.grade-pill:disabled{opacity:.35;cursor:not-allowed}.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface)}.stat{padding:16px 12px;text-align:center;border-right:1px solid var(--border)}.stat:last-child{border-right:0}.stat .lbl{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}.stat .val{font-size:26px;font-weight:700;margin-top:4px}.stat.success .val{color:var(--positive)}.stat.destroy .val{color:var(--negative)}.stat.degrade .val{color:var(--accent-soft)}.stat .sub{font-size:11.5px;color:var(--text-faint);margin-top:2px;min-height:14px}.bars{height:8px;display:flex;border-radius:0;overflow:hidden}.bars i{display:block;height:100%}.bars .b-s{background:var(--positive)}.bars .b-d{background:var(--negative)}.bars .b-g{background:var(--accent-soft)}.bars .b-x{background:var(--surface-3)}.controls{display:flex;flex-wrap:wrap;gap:14px;padding:16px 20px;align-items:center;justify-content:center}.toggle{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-dim);cursor:pointer}.toggle input{accent-color:var(--accent);width:16px;height:16px}select.charm-sel{background:var(--surface-2);color:var(--text);border:1px solid var(--border-strong);border-radius:8px;padding:7px 10px}.cost-row{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px 4px;color:var(--text-dim);font-size:14px}.cost-row b{color:var(--text)}.warn{text-align:center;color:var(--negative);opacity:.8;font-size:12.5px;padding:4px 20px 16px}.actions{display:flex;gap:12px;justify-content:center;padding:8px 20px 22px}.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px}.modal{width:640px;max-width:100%;max-height:78vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border-strong);border-radius:14px;overflow:hidden}.modal-head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center}.modal-head input{flex:1;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);border-radius:8px;padding:9px 12px}.type-tabs{display:flex;gap:6px;padding:8px 16px;flex-wrap:wrap;border-bottom:1px solid var(--border)}.type-tab{font-size:12.5px;padding:4px 11px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-dim);cursor:pointer}.type-tab.active{color:#fff;border-color:var(--accent);background:var(--accent-dim)}.item-list{overflow-y:auto}.item-row{display:flex;align-items:center;gap:12px;padding:8px 16px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.03)}.item-row:hover{background:var(--surface-2)}.item-row .nm{flex:1}.item-row .meta{font-size:12px;color:var(--text-faint)}.grp-tag{font-size:11px;padding:2px 7px;border-radius:6px;background:var(--surface-3);color:var(--text-dim)}.castbar{height:14px;margin:14px 24px 2px;border-radius:7px;background:var(--surface-3);border:1px solid var(--border-strong);overflow:hidden}.castbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#1f6fd0,#4aa8ff 60%,#8ad2ff);box-shadow:0 0 12px #4aa8ffbf}.slot-icon img{image-rendering:auto}.ext-link{margin-left:10px;white-space:nowrap}.sim-layout{display:flex;gap:20px;align-items:stretch}.sim-layout .sim-card{flex:1;min-width:0}.history{flex:0 0 320px;background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 12px 40px #00000073;overflow:hidden;display:flex;flex-direction:column}.history-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface-3);font-weight:600;letter-spacing:.3px}.history-empty{flex:1 1 0;padding:18px 16px;color:var(--text-faint);font-size:13px}.history-list{flex:1 1 0;min-height:0;list-style:none;margin:0;padding:6px 0;overflow-y:auto}.history-list li{display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13.5px;border-bottom:1px solid rgba(255,255,255,.03)}.history-list .hi-n{flex:0 0 auto;min-width:20px;text-align:right;color:var(--text-faint);font-weight:400;font-size:12px}.history-list .hi-text{flex:1;font-weight:600;min-width:0}.history-list .hi-gold{flex:0 0 auto;font-size:11.5px;opacity:.9;white-space:nowrap}.hist-count{background:var(--surface);color:var(--text-dim);font-size:12px;font-weight:600;border-radius:999px;padding:1px 9px}.history-total{position:relative;padding:13px 16px;border-top:1px solid var(--border-strong);background:var(--surface-3)}.ht-row{display:flex;align-items:center;justify-content:space-between;font-weight:600;cursor:help}.ht-row:after{content:"ⓘ";position:absolute;right:14px;top:11px;color:var(--text-faint);font-size:11px;opacity:0}.history-total:hover .ht-row:after{opacity:.6}.breakdown{position:absolute;left:12px;right:12px;bottom:calc(100% - 2px);background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;padding:8px 12px;box-shadow:0 10px 30px #00000080;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .12s,transform .12s;z-index:5}.history-total:hover .breakdown{opacity:1;transform:translateY(0)}.bd-row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:12.5px;padding:3px 0;color:var(--text-dim)}.bd-row+.bd-row{border-top:1px solid rgba(255,255,255,.04)}.cost-row{gap:10px}.gold{white-space:nowrap}.gold .g{color:#e8c75a;font-weight:700}.gold .s{color:#c3c8d0;font-weight:700}.gold .c{color:#cf8b54;font-weight:700}.gold .gu{color:var(--text-faint);font-size:.82em;margin:0 3px 0 1px}.gold.dim{color:var(--text-faint)}@media(max-width:820px){.sim-layout{flex-direction:column}.history{flex-basis:auto;width:100%;max-height:360px}}