:root{--bg: #0d1117;--bg-panel: #151b24;--bg-panel-2: #1b2330;--line: #263140;--text: #dde4ee;--text-dim: #8f9bad;--accent: #ffd75e;--accent-2: #4f9ce2;--danger: #e2564f;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.45 Segoe UI,system-ui,-apple-system,sans-serif}.app{display:flex;flex-direction:column;min-height:100%}header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#182031,#121822);flex-wrap:wrap}.brand{display:flex;align-items:center;gap:12px}.logo{display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:#24304a;border:1px solid #3a4a6b;color:var(--accent);font-weight:700;letter-spacing:-.5px}header h1{margin:0;font-size:18px;letter-spacing:.5px}header p{margin:0;color:var(--text-dim);font-size:12px}.header-actions{display:flex;align-items:center;gap:10px}.check{display:flex;align-items:center;gap:6px;color:var(--text-dim);font-size:12px;cursor:pointer}main{display:grid;grid-template-columns:320px minmax(560px,1fr) 380px;gap:14px;padding:14px;align-items:start;flex:1}@media(max-width:1400px){main{grid-template-columns:300px 1fr}.col.right{grid-column:1 / -1}}@media(max-width:1000px){main{grid-template-columns:1fr}.col.right{grid-column:auto}}.col{display:flex;flex-direction:column;gap:14px;min-width:0}.col.left,.col.right{max-height:calc(100vh - 130px);overflow-y:auto}.panel{background:var(--bg-panel);border:1px solid var(--line);border-radius:12px;padding:14px}.panel h2{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);display:flex;align-items:center;gap:8px}.panel h3{margin:16px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim)}.badge{background:#26313f;border-radius:999px;padding:1px 8px;font-size:11px;color:var(--text)}.badge.alt{background:#3a3050;color:var(--accent)}.hint{margin:0 0 10px;color:var(--text-dim);font-size:12px}.center-hint{text-align:center}.footnote{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);font-size:11px;line-height:1.5}.footnote code{background:#0f141b;padding:1px 4px;border-radius:4px;font-size:10.5px}.warn{margin:0 0 10px;padding:8px 10px;border-radius:8px;background:#3a2a1a;border:1px solid #6b4a20;color:#ffd9a0;font-size:12px}button{background:var(--bg-panel-2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font:inherit;font-size:12px;cursor:pointer}button:hover:not(:disabled){border-color:#3d4c62;background:#222c3b}button:disabled{opacity:.4;cursor:default}button.primary{background:#2c4b73;border-color:#3f6a9e;font-weight:600}button.danger:hover{border-color:var(--danger);color:var(--danger)}.tool-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}.tool.on{background:#2c4b73;border-color:var(--accent-2);color:#fff}.preset{margin-bottom:6px}.preset>button{width:100%;text-align:left;padding:7px 9px}.preset.on>button{border-color:var(--accent);color:var(--accent)}.preset-explain{margin:5px 0 0;padding:7px 9px;border-left:2px solid var(--accent);background:#1a1f2b;border-radius:0 6px 6px 0;color:#b7c2d2;font-size:11.5px}.spell-group{margin-top:8px}.spell-group h3{margin:12px 0 6px;font-size:11px}.spell{border:1px solid var(--line);border-radius:10px;margin-bottom:6px;overflow:hidden;background:#131922}.spell.on{border-color:var(--accent);box-shadow:0 0 0 1px #ffd75e40}.spell-main{display:flex;gap:9px;width:100%;text-align:left;border:0;border-radius:0;background:transparent;padding:8px 9px}.spell-main:hover{background:#1a2230}.swatch{flex:0 0 auto;width:12px;height:12px;border-radius:3px;margin-top:2px}.spell-text{display:flex;flex-direction:column;gap:2px;min-width:0}.spell-name{font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.mover{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.5px;background:#33405a;color:#cfe0ff;border-radius:999px;padding:1px 6px}.spell-meta{color:var(--text-dim);font-size:11px}.spell-desc{font-size:11.5px;color:#b7c2d2}.spell-note{font-size:11px;color:#7f8ca0;font-style:italic}.levels{display:flex;gap:4px;padding:0 9px 8px}.lvl{padding:2px 7px;font-size:11px;border-radius:6px}.lvl.on{background:#2c4b73;border-color:var(--accent-2)}.board-wrap{background:#0a0d12;border:1px solid var(--line);border-radius:12px;padding:10px;overflow:auto}.board{width:100%;height:auto;display:block;-webkit-user-select:none;user-select:none}.no-pointer{pointer-events:none}.cell{stroke:#38495e;stroke-width:.7;cursor:pointer}.cell-a{fill:#2a3949}.cell-b{fill:#2f4053}.cell-wall{fill:#05070a;stroke:#151b24}.cell:hover{fill:#48627e}.trap-order{font-size:9px;font-weight:700;fill:#10141a}.entity-tag{font-size:10px;font-weight:700;fill:#fff}.playbar{display:flex;align-items:center;gap:8px;background:var(--bg-panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}.playbar input[type=range]{flex:1;accent-color:var(--accent)}.counter{font-variant-numeric:tabular-nums;color:var(--text-dim);font-size:12px;min-width:62px;text-align:right}.order-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.order-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:#131922;border:1px solid var(--line)}.order-item.on{border-color:var(--accent)}.order-item.unused{opacity:.55}.idx{flex:0 0 auto;width:20px;height:20px;display:grid;place-items:center;border-radius:6px;background:#26313f;font-size:11px;font-weight:700}.order-text{display:flex;flex-direction:column;min-width:0;flex:1}.order-name{font-size:12.5px;font-weight:600}.order-meta{font-size:11px;color:var(--text-dim)}.order-actions{display:flex;gap:3px}.order-actions button{padding:2px 6px;font-size:11px;line-height:1}.chain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}.chain li{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:4px 6px;border-radius:6px}.chain li:hover{background:#1c2431}.chain li em{color:var(--text-dim);font-style:normal;font-size:11px}.chain-idx{width:18px;height:18px;display:grid;place-items:center;border-radius:999px;background:var(--accent);color:#171a10;font-size:10px;font-weight:700}.stats{list-style:none;margin:0;padding:0}.stats li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dashed #232d3a;font-size:12px}.stats li span{color:var(--text-dim)}.stats li strong{text-align:right;font-weight:600}.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:340px;overflow-y:auto}.timeline li{display:flex;gap:8px;align-items:flex-start;padding:4px 6px;border-radius:6px;font-size:12px;cursor:pointer;border-left:2px solid transparent}.timeline li:hover{background:#1c2431}.timeline li.on{background:#26344a;border-left-color:var(--accent)}.timeline li.future{opacity:.45}.tl-icon{flex:0 0 auto;min-width:22px;text-align:center;font-size:10px;font-weight:700;padding:1px 0;border-radius:4px;background:#26313f;color:var(--text-dim)}.timeline li.tl-trap .tl-icon{background:#5b4a12;color:var(--accent)}.timeline li.tl-move .tl-icon{background:#1f4066;color:#a9d0ff}.timeline li.tl-blocked .tl-icon{background:#5a2320;color:#ffb3ae}.tl-text{min-width:0}footer{padding:10px 20px 20px;color:var(--text-dim);font-size:11.5px;border-top:1px solid var(--line)}footer p{margin:8px 0 0;max-width:1100px}