
body.page-skill{margin:0;background:var(--lab-bg);color:var(--lab-text);min-height:100vh}
.skill-page{max-width:1800px;margin:0 auto;padding:26px 22px 50px}
.skill-intro{margin-bottom:14px}.skill-intro h1{margin:0 0 5px;font-size:28px;letter-spacing:-.025em}.skill-intro p{margin:0;color:var(--lab-muted);font-size:13px;line-height:1.7}
.skill-card{background:#fff;border:1px solid var(--lab-line);border-radius:10px;box-shadow:0 4px 14px rgba(15,23,42,.04)}
.skill-controls{display:grid;grid-template-columns:190px minmax(520px,1fr) auto;gap:12px;align-items:end;padding:13px 14px;margin-bottom:10px}
.skill-field label,.skill-correction-title{display:block;font-size:10px;font-weight:800;color:#526174;margin-bottom:5px}.skill-field select,.skill-field input,.skill-corr input{height:36px;width:100%;border:1px solid #aebac8;border-radius:7px;background:#fff;color:#111827;padding:0 10px;font:inherit}
.skill-correction-head{display:flex;align-items:center;gap:8px;margin-bottom:5px}.skill-correction-title{margin:0}.skill-corrections{display:grid;grid-template-columns:repeat(5,minmax(82px,1fr));gap:6px}.skill-corr span{display:block;font-size:9px;color:#64748b;margin-bottom:4px;white-space:nowrap}.skill-correction-box.enabled .skill-corr input{border-color:#7bb8af;background:#f6fbfa}
.skill-switch{position:relative;width:34px;height:18px;display:inline-block;flex:none}.skill-switch input{position:absolute;opacity:0;pointer-events:none}.skill-slider{position:absolute;inset:0;background:#c2c9d2;border-radius:999px;transition:.14s}.skill-slider:before{content:"";position:absolute;width:12px;height:12px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:.14s}.skill-switch input:checked+.skill-slider{background:var(--lab-accent)}.skill-switch input:checked+.skill-slider:before{transform:translateX(16px)}
.skill-actions{display:flex;gap:6px}.skill-btn{height:36px;border:1px solid #aebac8;border-radius:7px;background:#fff;color:#27364b;padding:0 12px;font-weight:800;font-size:11px}.skill-btn:hover{background:#f1f5f9}
.skill-summary{display:flex;align-items:center;gap:20px;padding:9px 13px;margin-bottom:14px;font-size:11px;color:#526174}.skill-summary strong{font-size:15px;color:#172033;margin-left:5px;font-variant-numeric:tabular-nums}
.skill-board-layout{display:grid;grid-template-columns:minmax(430px,1fr) minmax(0,2fr);gap:14px;align-items:start}.skill-main-column{min-width:0}.skill-other-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.skill-class-board{overflow:hidden;min-width:0}.skill-class-head{height:38px;padding:0 11px;display:flex;align-items:center;justify-content:flex-start;border-bottom:1px solid #dce3ea;background:#fafcfd}.skill-class-board.main .skill-class-head{background:#f3faf8}.skill-class-title{font-size:13px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skill-lanes{display:grid;grid-template-columns:minmax(100px,var(--lane-active,3fr)) minmax(100px,var(--lane-passive,1fr)) minmax(100px,var(--lane-od,1fr))}.skill-lane{min-width:0;border-right:1px solid #dce3ea;background:#fff}.skill-lane:last-child{border-right:0}.skill-lane-title{height:28px;display:flex;align-items:center;justify-content:center;padding:0 7px;background:#f8fafc;border-bottom:1px solid #dce3ea;font-size:10px;font-weight:850;color:#334155;white-space:nowrap}
.skill-list{padding:7px;display:grid;grid-template-columns:repeat(auto-fit,86px);justify-content:center;gap:6px;align-content:start}.skill-node{box-sizing:border-box;width:86px;min-height:64px;display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-areas:"icon controls";column-gap:5px;align-items:center;padding:4px 6px 4px 4px;border:1px solid #b8d9d3;border-radius:5px;background:#eef8f5;transition:.12s}.skill-node:hover{border-color:#7bb8af;background:#e6f4f1}.skill-node.locked{background:#f1f3f5;border-color:#d8dde3}.skill-node.locked:hover{background:#eceff2;border-color:#cbd2da}.skill-node.corrected:not(.locked){border-color:#78b1c8;background:#eaf6f4}.skill-node.maxed:not(.locked){border-color:#8fc7bf;background:#e9f6f2}
.skill-icon{grid-area:icon;width:34px;height:34px;border:1px solid #9eabb9;border-radius:4px;background:#273126;overflow:hidden;display:block}.skill-icon img{width:32px;height:32px;display:block}.skill-node.locked .skill-icon img{filter:grayscale(1);opacity:.62}.skill-ctrl{grid-area:controls;width:100%;min-width:0;height:53px;display:grid;grid-template-rows:14px 23px 14px;gap:1px}.skill-quick,.skill-step{display:grid;grid-template-columns:1fr 1fr;gap:2px}.skill-ctrl button{height:14px;min-width:0;padding:0;border:1px solid #98a6b6;border-radius:3px;background:#fff;color:#172033;font-size:8px;font-weight:900;line-height:1}.skill-ctrl .skill-plus,.skill-ctrl .skill-minus{font-size:10px}.skill-ctrl button:hover:not(:disabled){background:#e8f5f2;border-color:#6daaa1;color:#084b45}.skill-ctrl button:disabled{color:#c5cbd3;background:#f2f4f6;border-color:#e1e5ea;cursor:default;font-weight:700}
.skill-level{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;font-variant-numeric:tabular-nums;overflow:hidden}.skill-level-main{font-size:17px;font-weight:900;color:#263548}.skill-node.corrected .skill-level-main{color:#0b6697}.skill-level-sub{font-size:8px;font-weight:850;color:#0b6697;margin-top:2px;white-space:nowrap}.skill-empty{width:86px;height:64px;display:flex;align-items:center;justify-content:center;font-size:9px;color:#b2bac4}
.skill-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,10px);opacity:0;pointer-events:none;background:#172033;color:#fff;border-radius:8px;padding:9px 12px;font-size:11px;transition:.18s;z-index:4000}.skill-toast.show{opacity:1;transform:translate(-50%,0)}
/* detail */
.skill-detail-page{max-width:1180px;margin:0 auto;padding:26px 22px 50px}.skill-detail-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}.skill-detail-icon{width:50px;height:50px;border:1px solid #9eabb9;border-radius:7px;image-rendering:auto}.skill-detail-name{margin:0 0 5px;font-size:26px;letter-spacing:-.02em}.skill-detail-meta{display:flex;flex-wrap:wrap;gap:8px;color:#526174;font-size:11px}.skill-detail-current{margin-left:auto;text-align:center;min-width:86px}.skill-detail-current strong{display:block;font-size:28px;line-height:1;color:#0b6697}.skill-detail-current small{display:block;margin-top:4px;font-size:11px;color:#0b6697;font-weight:800}.skill-detail-back{display:inline-flex;margin-bottom:12px;color:#0b6259;text-decoration:none;font-size:11px;font-weight:800}.skill-detail-table-wrap{overflow:auto;border:1px solid var(--lab-line);border-radius:10px;background:#fff}.skill-detail-table{width:100%;border-collapse:collapse;min-width:620px}.skill-detail-table th{position:sticky;top:0;z-index:3;background:#243247;color:#fff;font-size:11px;text-align:left;padding:9px 11px;border-bottom:1px solid #52617a}.skill-detail-table th:first-child,.skill-detail-table td:first-child{text-align:center;width:72px}.skill-detail-table th:last-child,.skill-detail-table td:last-child{text-align:right;width:110px}.skill-detail-table td{padding:8px 11px;border-bottom:1px solid #e1e6ec;font-size:12px;color:#172033}.skill-detail-table tr:last-child td{border-bottom:0}.skill-detail-table tbody tr:nth-child(even){background:#f8fafc}.skill-detail-table tbody tr.base-row{box-shadow:inset 4px 0 #9eabb9;background:#eef2f6}.skill-detail-table tbody tr.effective-row{box-shadow:inset 4px 0 #0b6259;background:#e5f4f1}.skill-detail-table tbody tr.base-row.effective-row{box-shadow:inset 4px 0 #0b6259;background:#e5f4f1}.skill-detail-lv{font-weight:850}.skill-detail-empty{padding:28px;text-align:center;color:#64748b}
@media(max-width:1450px){.skill-controls{grid-template-columns:170px 1fr auto}.skill-board-layout{grid-template-columns:minmax(410px,.95fr) minmax(0,1.05fr)}.skill-other-grid{grid-template-columns:1fr}}
@media(max-width:1080px){.skill-controls{grid-template-columns:1fr auto}.skill-correction-box{grid-column:1/-1}.skill-actions{grid-column:auto}.skill-board-layout{grid-template-columns:1fr}.skill-other-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.skill-page,.skill-detail-page{padding:20px 14px 40px}.skill-other-grid{grid-template-columns:1fr}.skill-class-board{width:100%}.skill-lanes{grid-template-columns:1fr}.skill-lane{border-right:0;border-bottom:1px solid #dce3ea}.skill-lane:last-child{border-bottom:0}.skill-lane[data-group="active"] .skill-list,.skill-lane[data-group="passive"] .skill-list,.skill-lane[data-group="od"] .skill-list{grid-template-columns:repeat(auto-fill,86px)}.skill-detail-head{align-items:flex-start;flex-wrap:wrap}.skill-detail-current{margin-left:0}}
@media(max-width:620px){.skill-controls{grid-template-columns:1fr}.skill-correction-box,.skill-actions{grid-column:auto}.skill-corrections{grid-template-columns:repeat(2,minmax(0,1fr))}.skill-summary{gap:12px}.skill-intro h1{font-size:24px}}
