/* Skill Base — interlude.pw wiki. Compact left class-list + skill grid +
 * detail panel with a live level slider. Blends with the wiki dark-purple
 * theme via --wiki-* vars (with fallbacks). */
.sb-wrap{
  --sb-panel: var(--wiki-panel, #151a24);
  --sb-panel2:#1b2130;
  --sb-line: var(--wiki-border, #2a1d4a);
  --sb-txt:  var(--wiki-text, #d8dee9);
  --sb-muted:var(--wiki-text-dim, #8994a7);
  --sb-hot:  var(--wiki-accent-hot, #b78fff);
  --gold:#ffcb4a; --cyan:#96f5ff;
  --atk:#ff6b5e; --def:#5ec8ff; --pas:#c39bff; --oth:#8994a7;
  color:var(--sb-txt);font:14px/1.5 "Segoe UI",Roboto,system-ui,sans-serif;
}
.sb-wrap *{box-sizing:border-box}

/* ---- toolbar ---------------------------------------------------- */
.sb-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:10px 12px;background:var(--sb-panel);border:1px solid var(--sb-line);border-radius:10px;margin-bottom:12px}
.sb-cats{display:flex;gap:6px;flex-wrap:wrap}
.sb-cat{cursor:pointer;border:1px solid var(--sb-line);background:var(--sb-panel2);color:var(--sb-txt);
  padding:6px 12px;border-radius:20px;font-size:13px;transition:.12s}
.sb-cat:hover{border-color:var(--sb-hot)}
.sb-cat.on{background:rgba(183,143,255,.18);border-color:var(--sb-hot);color:#fff}
.sb-search{flex:1;min-width:170px}
.sb-search input{width:100%;background:var(--wiki-bg,#0d1017);border:1px solid var(--sb-line);color:var(--sb-txt);
  padding:8px 12px;border-radius:8px;font-size:14px;outline:none}
.sb-search input:focus{border-color:var(--sb-hot)}
.sb-count{color:var(--sb-muted);font-size:13px;white-space:nowrap;margin-left:auto}

/* ---- body: class-list | grid | detail --------------------------- */
.sb-body{display:grid;grid-template-columns:216px 1fr 360px;gap:12px;align-items:start}
.sb-side{background:var(--sb-panel);border:1px solid var(--sb-line);border-radius:10px;padding:6px;
  position:sticky;top:120px;max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain}
.sb-side::-webkit-scrollbar{width:9px}
.sb-side::-webkit-scrollbar-thumb{background:var(--sb-line);border-radius:6px}

.sb-item{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:7px 11px;border-radius:7px;cursor:pointer;color:var(--sb-txt);font-size:13.5px;
  border-left:3px solid transparent;transition:background .12s,border-color .12s,color .12s}
.sb-item:hover{background:var(--sb-panel2)}
.sb-item.on{background:rgba(183,143,255,.16);border-left-color:var(--sb-hot);color:#fff;font-weight:600}
.sb-item .n{color:var(--sb-muted);font-size:12px;font-variant-numeric:tabular-nums}
.sb-item.on .n{color:var(--cyan)}
.sb-item.all{font-weight:600;margin-bottom:2px}
.sb-h{margin:9px 6px 3px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--sb-muted);opacity:.85}

/* ---- skill grid ------------------------------------------------- */
.sb-main{min-height:50vh}
.sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.sb-card{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--sb-line);
  background:var(--sb-panel2);border-radius:9px;cursor:pointer;transition:.12s}
.sb-card:hover{border-color:var(--sb-hot);transform:translateY(-1px)}
.sb-card.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.sb-ico{width:40px;height:40px;border-radius:7px;background:#0a0d13;object-fit:cover;flex:none;border:1px solid #000}
.sb-ci{min-width:0}
.sb-ci .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-badge{display:inline-block;font-size:10.5px;padding:1px 7px;border-radius:10px;margin-top:2px;border:1px solid transparent}
.b-attack{color:var(--atk);border-color:#5a2a26;background:#231514}
.b-defense{color:var(--def);border-color:#22455f;background:#111f2b}
.b-passive{color:var(--pas);border-color:#3d2f5a;background:#191428}
.b-other{color:var(--oth);border-color:#333c4d;background:#161b26}
.sb-empty{color:var(--sb-muted);text-align:center;padding:40px;grid-column:1/-1}

/* ---- detail panel ---------------------------------------------- */
.sb-detail{background:var(--sb-panel);border:1px solid var(--sb-line);border-radius:10px;
  position:sticky;top:120px;max-height:calc(100vh - 140px);overflow:auto}
.sb-dhead{display:flex;gap:12px;align-items:center;padding:14px;border-bottom:1px solid var(--sb-line);
  background:linear-gradient(180deg,var(--sb-panel2),var(--sb-panel))}
.sb-dhead img{width:52px;height:52px;border-radius:9px;border:1px solid #000;background:#0a0d13}
.sb-dhead .t{font-size:17px;font-weight:700}
.sb-dhead .s{font-size:12px;color:var(--sb-muted);margin-top:2px}
.sb-dbody{padding:14px}
.sb-desc{white-space:pre-wrap;font-size:13.5px;line-height:1.6;
  background:#0a0d13;border:1px solid var(--sb-line);border-radius:8px;padding:12px}
.sb-lvl{display:flex;align-items:center;gap:10px;margin:12px 0 8px}
.sb-lvl input[type=range]{flex:1;accent-color:var(--sb-hot)}
.sb-lvl .lb{font-size:12px;color:var(--sb-muted);white-space:nowrap}
.sb-lvl b{color:var(--gold)}
.sb-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
.sb-stat{background:var(--sb-panel2);border:1px solid var(--sb-line);border-radius:7px;padding:7px 10px}
.sb-stat .k{font-size:11px;color:var(--sb-muted)}
.sb-stat .v{font-weight:600;color:var(--cyan)}
.sb-none{color:var(--sb-muted);text-align:center;padding:60px 20px}
.sb-note{font-size:11.5px;color:var(--sb-muted);margin-top:10px;padding:8px;border:1px dashed var(--sb-line);border-radius:7px}

@media(max-width:1150px){ .sb-body{grid-template-columns:200px 1fr}
  .sb-detail{position:fixed;inset:auto 10px 10px 10px;top:auto;max-height:70vh;z-index:60;
    box-shadow:0 -8px 40px rgba(0,0,0,.6);display:none}
  .sb-detail.show{display:block} }
@media(max-width:680px){ .sb-body{grid-template-columns:1fr}
  .sb-side{position:static;max-height:none} }