.class-selector{max-height:590px;overflow:auto}.class-skills{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.skill-slot{width:94px;min-height:96px;padding:10px 5px 6px;display:flex;align-items:center;flex-direction:column;gap:8px;border:1px solid #92b9d6;border-radius:8px;color:#305e81;background:linear-gradient(145deg,#fff,#d7e8f6);box-shadow:inset 0 0 0 3px #f6fbff,0 3px 10px #14395615}.skill-slot img{width:40px;height:40px;object-fit:contain;background:#163550;border:1px solid #7fb5dc;border-radius:4px;box-shadow:0 0 0 3px #14395612}.skill-slot span{font-size:10px;line-height:1.4}.skill-slot:hover,.skill-slot:focus-visible{border-color:#439fd9;box-shadow:inset 0 0 0 3px #f6fbff,0 0 16px #69bce650}.adjustment-box .skill-help{font-size:10px;color:#6c8ba4;margin:8px 0}.skill-popover{position:fixed;z-index:2000;width:320px;max-width:calc(100vw - 24px);padding:20px;color:#d8eafb;border:1px solid #a7d0ed;border-radius:8px;background:linear-gradient(145deg,#203f60,#0a1c31);box-shadow:inset 0 0 0 4px #081c2e,inset 0 0 0 5px #73a8ce45,0 10px 35px #00132688;overflow-wrap:anywhere;pointer-events:auto}.skill-popover::after{content:"";position:absolute;left:calc(var(--arrow-x) - 6px);width:12px;height:12px;background:#102840;transform:rotate(45deg);border-right:1px solid #a7d0ed;border-bottom:1px solid #a7d0ed}.skill-popover[data-side=top]::after{bottom:-7px}.skill-popover[data-side=bottom]::after{top:-7px;transform:rotate(225deg)}.skill-popover small{display:block;color:#8fc8ef;font-size:10px;margin-bottom:9px}.skill-popover strong{display:block;font-size:17px;color:#f0f8ff;border-bottom:1px solid #6ba0c450;padding-bottom:10px;margin-bottom:10px}.skill-popover p{font-size:12px;line-height:1.8;white-space:pre-line}.skill-popover p+p{margin-top:8px;color:#acc7dd}@media(max-width:760px){.class-selector{max-height:260px}.skill-slot{width:86px}.skill-popover{width:290px}}

.class-branches{grid-column:1/-1;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:18px 22px;border-bottom:1px solid #b8cfe1;background:linear-gradient(#f7fbff,#e3eff9)}.class-branch{min-height:42px;min-width:125px;padding:9px 18px;border:1px solid #99b9d3;border-radius:5px;color:#436e90;background:linear-gradient(#fff,#e1edf7);box-shadow:inset 0 1px #fff;font-size:12px}.class-branch:hover{border-color:#499bd2;color:#235579}.class-branch.active{background:linear-gradient(#4f8abc,#285b88);color:#fff;border-color:#89c7f1;box-shadow:inset 0 1px #c9eaff70,0 0 12px #6bbced30}@media(max-width:760px){.class-branches{gap:7px;padding:14px 10px}.class-branch{flex:1;min-width:85px;padding:8px;font-size:11px}}
/* Recessed class menu: one continuous panel, quiet silver separators. */
.class-selector{gap:2px;padding:12px 9px;background:linear-gradient(145deg,#1c354b,#122a40);border-right:1px solid #91abc0;box-shadow:inset 0 1px #f0f8ff22,inset -3px 0 #071a2c24;scroll-padding:12px}
.class-selector .class-tab{position:relative;flex-shrink:0;min-height:47px;padding:11px 14px;gap:9px;border:1px solid transparent;border-bottom-color:#8fadc421;border-radius:3px;background:transparent;box-shadow:none;color:#b9cbda;font-size:11px;line-height:1.5;text-shadow:none;transition:background .18s,color .18s,border-color .18s}
.class-tab-icon{display:grid;place-items:center;color:#89a9c2;flex-shrink:0}
.class-tab-icon .icon{width:16px;height:16px}
.class-selector .class-chevron{font-size:0;width:5px;height:5px;flex-shrink:0;border:1px solid #6c8ca6;background:transparent;transform:rotate(45deg);opacity:.55}
.class-selector .class-tab.active{background:linear-gradient(90deg,#335d7d,#26465f);border-color:#7095b56b;box-shadow:inset 3px 0 #a5d7f2;color:#f1f8ff;font-weight:600}
.class-selector .class-tab.active .class-tab-icon{color:#c3e2f5}
.class-selector .class-tab.active .class-chevron{background:#b0d8ee;border-color:#d8edf9;opacity:1}
.class-selector .class-tab:hover{background:#b3d9f012;color:#edf8ff;border-bottom-color:#8fadc44d}
.class-selector .class-tab.active:hover{background:linear-gradient(90deg,#3a6788,#2c506b);border-color:#8cb3ce80}
.class-selector .class-tab:focus-visible{outline:2px solid #b4e3ff;outline-offset:1px}
.class-branches{gap:8px;padding:15px 22px;background:linear-gradient(#edf4f9,#e0ebf3);border-bottom:1px solid #b5cbdc;box-shadow:inset 0 1px #fff9}
.class-branches .class-branch{position:relative;min-width:150px;min-height:44px;padding:10px 22px;border:1px solid #afc5d5;border-radius:3px;background:linear-gradient(#f7fbfd,#e4edf4);color:#4d6d86;font-size:12px;line-height:1.5;box-shadow:inset 0 1px #fff;transition:background .18s,color .18s,border-color .18s}
.class-branches .class-branch.active{background:linear-gradient(#315773,#25445f);border-color:#769bb6;color:#f3faff;box-shadow:inset 0 -2px #a8d5ef,inset 0 1px #f2faff26;font-weight:600}
.class-branches .class-branch:hover{background:#d8e8f4;border-color:#84a9c5;color:#254c6a}
.class-branches .class-branch.active:hover{background:linear-gradient(#3a6482,#2d506d);color:#fff}
.class-branches .class-branch:focus-visible{outline:2px solid #368dcc;outline-offset:3px}
@media(max-width:1080px) and (min-width:761px){.class-selector .class-tab{font-size:10px;padding-inline:10px;gap:7px}.class-tab-icon .icon{width:14px;height:14px}}
@media(max-width:760px){.class-selector{padding:10px;gap:5px;max-height:280px;border-right:0;border-bottom:1px solid #91abc0}.class-selector .class-tab{font-size:10px;min-height:44px;padding:10px 8px;justify-content:center;text-align:center;border-color:#8fadc42b}.class-selector .class-tab.active{border-color:#86afcf80;box-shadow:inset 0 -2px #a5d7f2}.class-selector .class-tab-icon{display:none}.class-branches{padding:12px;gap:8px}.class-branches .class-branch{flex:0 1 160px;min-width:0;min-height:44px;padding:10px 18px;font-size:11px}}
@media(max-width:420px){.class-branches .class-branch{flex:1;padding-inline:14px}}
@media(prefers-reduced-motion:reduce){.class-selector .class-tab,.class-branches .class-branch{transition:none}}