.subtalent-workbench { --sub-gold:#efd089; margin:28px 3px; border:1px solid #795942; border-radius:7px; background:#120e19; box-shadow:0 0 0 3px #271f23; overflow:hidden; scroll-margin-top:20px; }
.subtalent-header { padding:21px 26px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; background:linear-gradient(105deg,#49203b,#22162e 70%); border-bottom:1px solid #654450; }
.subtalent-header h3 { margin:2px 0 0; color:#f7e5b3; font-size:24px; }
.subtalent-header .eyebrow { color:#bca0c3; letter-spacing:2px; }
.subtalent-header label { min-width:210px; max-width:100%; }
.subtalent-header select { background:#181020; color:#f1d9a1; border-color:#705144; }
.subtalent-toolbar { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:18px 26px 0; font-size:12px; color:#b5a7be; }
.subtalent-toolbar > div { display:flex; align-items:center; flex-wrap:wrap; gap:22px; }
.subtalent-toolbar b { font-size:22px; color:var(--sub-gold); margin-left:8px; }
.subtalent-toolbar label { display:flex; align-items:center; gap:8px; font-size:12px; }
.subtalent-toolbar input { width:17px; height:17px; accent-color:#d9b575; }
.subtalent-legend { display:inline-flex; align-items:center; gap:7px; font-size:11px; color:#9e8ba9; }
.subtalent-legend i { width:17px; height:2px; background:#edc45b; }
.subtalent-legend i.unlit { background:#51425f; margin-left:6px; }
.subtalent-help { margin:10px 26px 18px; color:#a99ab2; font-size:11px; line-height:1.8; }
.subtalent-help b { color:#dbc79d; }
.subtalent-body { display:grid; grid-template-columns:minmax(0,1fr) 300px; align-items:start; gap:18px; padding:0 22px 24px; }
.subtalent-map-scroll { min-width:0; overflow:auto; scrollbar-color:#69476e #160e20; border:1px solid #4e365e; border-radius:6px; }
.subtalent-map { position:relative; min-width:780px; aspect-ratio:481/456; background:radial-gradient(ellipse at 50% 50%,#4c245048,#241a3b55 38%,transparent 78%),radial-gradient(circle at 15% 20%,#78427433,transparent 45%),linear-gradient(135deg,#19152b,#120d20 65%,#26182e); }
.subtalent-map::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.22; background-image:radial-gradient(#bea9cd 1px,transparent 1px); background-size:37px 43px; }
.subtalent-links { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.subtalent-links line { stroke:#54415d; stroke-width:2.8; vector-effect:non-scaling-stroke; }
.subtalent-links line.active { stroke:#e6c053; filter:drop-shadow(0 0 3px #b87f4170); }
.subtalent-node { position:absolute; transform:translate(-50%,-25px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; width:86px; padding:5px 2px; background:transparent; border:1px solid transparent; border-radius:7px; color:#ae9bb8; touch-action:manipulation; z-index:1; }
.subtalent-node.keystone { transform:translate(-50%,-30px); }
.subtalent-node:hover,.subtalent-node:focus-visible,.subtalent-node.selected { border-color:#a17b57; background:#292033dd; outline-offset:3px; }
.subtalent-orb { display:grid; place-items:center; width:40px; height:40px; border:2px solid #756345; border-radius:50%; background:radial-gradient(circle at 35% 30%,#3f4962,#211429 70%); box-shadow:0 0 0 3px #1a111c,0 0 0 4px #3f3042; color:#b2a2b2; font-size:14px; font-weight:700; }
.subtalent-node.keystone .subtalent-orb { width:50px; height:50px; border-radius:12px; border-color:#8f699b; background:radial-gradient(circle,#553067,#24112f); box-shadow:0 0 0 3px #190e21,0 0 0 4px #6e3f70; }
.subtalent-node.invested .subtalent-orb { color:#fff0b9; border-color:#e7c866; box-shadow:0 0 0 3px #352431,0 0 8px 4px #d8ab4730; background:radial-gradient(circle at 35% 30%,#88714d,#362042 65%); }
.subtalent-node.maximum .subtalent-orb { border-color:#fff0a2; }
.subtalent-node.locked .subtalent-orb { filter:brightness(.65) grayscale(.4); }
.subtalent-art { display:inline-block; flex-shrink:0; background-size:var(--subtalent-atlas-size); background-repeat:no-repeat; image-rendering:pixelated; }
.subtalent-node:not(.invested) .subtalent-art { filter:saturate(.6) brightness(.75); }
.subtalent-node.over-cap .subtalent-rank { color:#fbb5db; border-color:#b875a0; }
.subtalent-node.selected .subtalent-orb { outline:2px solid #f5d58e; outline-offset:4px; }
.subtalent-rank { position:relative; margin-top:-5px; padding:0 5px; line-height:17px; min-width:36px; background:#17101e; border:1px solid #756044; border-radius:3px; font-size:11px; font-weight:750; color:#baab8e; }
.subtalent-node.invested .subtalent-rank { color:#ffe6a3; }
.subtalent-node-name { font-size:10px; font-weight:600; line-height:1.3; margin-top:5px; max-width:110px; overflow-wrap:anywhere; text-shadow:0 1px 3px #000; }
.subtalent-node.invested .subtalent-node-name { color:#e9dab6; }
.subtalent-root { position:absolute; transform:translate(-50%,-30px); width:122px; display:flex; flex-direction:column; align-items:center; color:#dbbd93; text-align:center; pointer-events:none; }
.subtalent-root-glyph { display:grid; place-items:center; width:60px; height:60px; border:2px solid #b79865; border-radius:50%; outline:4px double #725473; outline-offset:4px; background:radial-gradient(circle,#815b8d,#291633 70%); color:#ebc3fa; font-size:37px; }
.subtalent-root strong { font-size:13px; margin-top:12px; }
.subtalent-root small { font-size:10px; color:#8f789c; margin-top:3px; }
#subtalent-detail { position:sticky; top:16px; min-width:0; padding:22px; border:1px solid #74563d; background:linear-gradient(140deg,#211827,#0e0a14); box-shadow:inset 0 0 0 3px #281e2c; }
.subtalent-detail-title .eyebrow { color:#a185ae; font-size:10px; letter-spacing:1.5px; }
.subtalent-detail-title h3 { margin:8px 0; color:var(--sub-gold); font-size:21px; }
.subtalent-en { color:#89778f; font-size:10px; }
.subtalent-description { color:#e0cee5; line-height:1.9; font-size:14px; white-space:pre-line; margin:22px 0; }
.subtalent-effects { border-top:1px solid #49334c; padding-top:12px; margin-top:16px; }
.subtalent-effects table { width:100%; border-collapse:collapse; font-size:11px; table-layout:auto; }
.subtalent-effects th,.subtalent-effects td { padding:8px 4px; border-bottom:1px solid #39263e; }
.subtalent-effects thead th { color:#938099; font-weight:500; }
.subtalent-effects th:first-child { text-align:left; }
.subtalent-effects tbody th { color:#c8afd5; font-weight:500; }
.subtalent-effects td { text-align:right; color:#ecd4a1; white-space:nowrap; }
.subtalent-effects td:last-child { color:#b9d5b4; }
.subtalent-effects p { color:#88758f; font-size:10px; margin:10px 0 0; }
.subtalent-meta { margin:20px 0; padding-top:14px; border-top:1px solid #49334c; font-size:12px; }
.subtalent-meta > div { display:flex; justify-content:space-between; gap:15px; margin:9px 0; }
.subtalent-meta dt { color:#9e87a7; flex-shrink:0; }
.subtalent-meta dd { text-align:right; margin:0; color:#cab5d1; }
.subtalent-meta b { color:#f5db9e; }
.subtalent-actions { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; gap:12px; }
.subtalent-actions button { min-height:42px; padding:0; font-size:23px; color:#ebcd91; border-color:#796042; background:#301e2f; }
.subtalent-actions span { font-size:28px; color:#efd089; text-align:center; font-weight:700; }
.subtalent-condition { min-height:38px; margin:12px 0 18px; font-size:11px; line-height:1.8; color:#bea4c4; }
.subtalent-direct { border-top:1px solid #49334c; padding-top:16px; color:#9a849e; font-size:11px; }
.subtalent-direct summary { cursor:pointer; color:#d3b8bd; }
.subtalent-direct p { line-height:1.7; }
.subtalent-direct label { display:block; margin:12px 0 6px; font-size:11px; }
.subtalent-direct > div { display:flex; gap:8px; }
.subtalent-direct input { min-width:0; width:100%; background:#0c0810; border-color:#5b3f59; }
.subtalent-direct button { flex-shrink:0; }
.subtalent-detail-note { color:#88758e; font-size:10px; line-height:1.8; margin:20px 0 0; }
.subtalent-footer { padding:16px 25px; border-top:1px solid #4f3453; font-size:11px; line-height:1.8; color:#aa91b0; }
.subtalent-footer p { margin:5px 0 0; color:#8c7994; }
.subtalent-footer [data-sub-anomaly] { display:block; color:#df9fcb; }
.subtalent-footer details { margin-top:12px; }
.subtalent-footer summary { cursor:pointer; color:#c6b08b; }
.subtalent-footer input { max-width:100%; margin-top:8px; font-size:11px; }
.subtalent-unavailable { padding:24px; color:#c7adcf; }
@media(max-width:1280px) { .subtalent-body { grid-template-columns:1fr; } #subtalent-detail { position:static; } }
@media(max-width:640px) { .subtalent-header { padding:18px; } .subtalent-toolbar { padding:15px 18px 0; } .subtalent-help { margin:10px 18px 16px; } .subtalent-body { padding:0 12px 18px; } .subtalent-footer { padding:14px 18px; } .subtalent-header label { width:100%; } }