html[data-screen="talent"], html[data-screen="talent"] body { min-height: 100%; background: #030a12; color: #dbe9e6; }
html[data-screen="talent"] body { overflow: hidden; }
html[data-screen="talent"] #app { min-height: 100dvh; }
.talent-screen { position: relative; min-height: 100dvh; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 18% 24%, rgba(35, 100, 118, .13), transparent 32%), radial-gradient(circle at 78% 38%, rgba(101, 66, 157, .11), transparent 34%), #030a12; }
.talent-screen::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .7; background-image: linear-gradient(rgba(103,228,214,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(103,228,214,.024) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, #000, transparent 80%); }
.talent-stars { position: absolute; inset: 0; z-index: -2; opacity: .44; background-image: radial-gradient(circle at 13% 18%, rgba(255,255,255,.85) 0 1px, transparent 1.5px), radial-gradient(circle at 67% 22%, rgba(103,228,214,.8) 0 1px, transparent 1.6px), radial-gradient(circle at 86% 73%, rgba(242,190,114,.72) 0 1px, transparent 1.7px), radial-gradient(circle at 34% 77%, rgba(154,124,255,.7) 0 1px, transparent 1.4px); background-size: 210px 180px, 260px 230px, 310px 260px, 380px 300px; }
.talent-header { position: relative; z-index: 5; display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; align-items: center; gap: 26px; min-height: 84px; padding: 12px 28px; border-bottom: 1px solid rgba(122, 188, 194, .16); background: rgba(3, 11, 18, .82); backdrop-filter: blur(18px); }
.talent-brand { display: inline-flex; align-items: center; gap: 10px; color: #dbeae7; text-decoration: none; }
.talent-brand span { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(103,228,214,.38); border-radius: 50%; color: #f2be72; box-shadow: 0 0 18px rgba(103,228,214,.12); }
.talent-brand b { font-size: 13px; font-weight: 600; }
.talent-title { min-width: 0; }
.talent-title > span, .spine-pane-header > div > span, .flow-spotlight-header span, .flow-all-header span, .talent-detail-card header span, .talent-evidence-card header span, .parallel-domains-card header span, .market-reference-card header span, .goals-card header span, .milestones-card header span { color: #73d9d4; font: 9px/1.3 "IBM Plex Mono", Consolas, monospace; letter-spacing: .1em; }
.talent-title h1 { margin: 5px 0 0; color: #f4e4bf; font-size: 25px; line-height: 1.1; font-weight: 600; }
.talent-title p { display: inline; margin-left: 12px; color: #8ba7a4; font-size: 11px; }
.talent-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.talent-header-actions a, .talent-header-actions button { min-height: 35px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid rgba(113, 179, 183, .24); border-radius: 8px; background: rgba(8, 28, 38, .72); color: #bdd3cf; font-size: 10px; text-decoration: none; cursor: pointer; }
.talent-header-actions button { border-color: rgba(242,190,114,.48); background: rgba(91, 58, 25, .28); color: #ffe5b6; }
.talent-header-actions a:hover, .talent-header-actions button:hover, .talent-header-actions a:focus-visible, .talent-header-actions button:focus-visible { border-color: #67e4d6; color: #f3fffc; outline: none; }
.privacy-chip { color: #8aaca7; font: 9px "IBM Plex Mono", Consolas, monospace; white-space: nowrap; }
.talent-workspace { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(390px, .92fr) minmax(560px, 1.08fr); gap: 14px; height: calc(100dvh - 84px); padding: 14px 18px 18px; }
.spine-pane, .growth-pane { min-width: 0; min-height: 0; border: 1px solid rgba(111, 188, 195, .18); border-radius: 18px; background: rgba(6, 19, 29, .72); box-shadow: inset 0 1px 0 rgba(241,255,255,.06), 0 20px 60px rgba(0,0,0,.2); }
.spine-pane { display: flex; flex-direction: column; overflow: hidden; }
.spine-pane-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 10px; }
.spine-pane-header h2 { margin: 5px 0 4px; color: #f2e2bc; font-size: 20px; font-weight: 600; }
.spine-pane-header p { margin: 0; color: #8fa7a4; font-size: 10px; line-height: 1.55; }
.data-mode-chip { flex: 0 0 auto; margin-top: 2px; padding: 6px 8px; border: 1px solid rgba(103,228,214,.3); color: #99d7d0; font: 8px "IBM Plex Mono", Consolas, monospace; }
.data-mode-chip.is-demo { border-color: rgba(242,190,114,.35); color: #e2bd80; }
.talent-spine-stage { position: relative; flex: 1 1 auto; min-height: 470px; overflow: hidden; border-top: 1px solid rgba(111,188,195,.1); border-bottom: 1px solid rgba(111,188,195,.1); background: #090b10; isolation: isolate; }
.talent-spine-reference-frame { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; border: 0; background: #02060a; }
.talent-spine-status { position: absolute; z-index: 2; top: 45%; left: 65%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 12px; width: min(260px, 48%); padding: 16px; color: #c4ddd9; text-align: center; font-size: 14px; line-height: 1.6; }
.talent-spine-status[hidden], .talent-spine-status button[hidden] { display: none; }
.talent-spine-status button { min-height: 44px; padding: 8px 16px; border: 1px solid rgba(103,228,214,.3); border-radius: 12px; color: #dbe9e6; background: #102933; cursor: pointer; }
.talent-spine-canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.talent-spine-stage.is-spine-dragging .talent-spine-canvas, .talent-spine-stage.is-spine-dragging .talent-spine-reference-frame { cursor: grabbing; }
.spine-domain-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.spine-domain-label { position: absolute; left: 12%; top: 25%; display: inline-flex; align-items: center; gap: 6px; min-height: 25px; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--domain-color), transparent 52%); border-radius: 7px; background: rgba(3, 13, 21, .72); color: #dcebe7; font-size: 9px; pointer-events: auto; cursor: pointer; transform: translate(-50%, -50%); transition: opacity .2s ease, transform .2s ease, border-color .2s ease; }
.spine-domain-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--domain-color); box-shadow: 0 0 10px var(--domain-color); }
.spine-domain-label:hover, .spine-domain-label:focus-visible, .spine-domain-label.is-focused { border-color: var(--domain-color); transform: translate(-50%, -50%) scale(1.06); outline: none; }
.spine-domain-label.label-1 { left: 77%; top: 32%; }.spine-domain-label.label-2 { left: 78%; top: 73%; }.spine-domain-label.label-3 { left: 23%; top: 70%; }
.spine-controls { position: absolute; z-index: 4; right: 13px; bottom: 12px; left: 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #76928f; font: 8px "IBM Plex Mono", Consolas, monospace; }
.spine-controls button { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(103,228,214,.3); border-radius: 50%; background: rgba(3, 17, 25, .82); color: #9adbd2; cursor: pointer; }
.spine-legend { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 10px 12px; }
.spine-legend button { display: grid; grid-template-columns: 7px 1fr; align-items: center; gap: 5px; min-width: 0; padding: 5px 3px; border: 0; background: transparent; color: #8aa6a2; font-size: 9px; text-align: left; cursor: pointer; }
.spine-legend i { width: 6px; height: 6px; border-radius: 50%; background: var(--branch-color); box-shadow: 0 0 8px var(--branch-color); }.spine-legend button:hover, .spine-legend button:focus-visible { color: #effcf9; outline: none; }
.growth-pane { overflow: hidden; }
.growth-pane-scroll { height: 100%; overflow: auto; padding: 18px 18px 40px; scrollbar-color: rgba(103,228,214,.35) transparent; scrollbar-width: thin; }
.growth-pane-scroll > * + * { margin-top: 14px; }
.identity-strip { display: grid; grid-template-columns: 1fr 20px 1fr 20px 1fr; align-items: stretch; gap: 7px; }
.identity-strip article { min-width: 0; padding: 12px 13px; border: 1px solid rgba(112,172,177,.2); background: rgba(5, 23, 33, .76); }
.identity-strip article.is-forming { border-color: rgba(154,124,255,.38); background: rgba(54, 35, 86, .19); }.identity-strip article.is-future { border-color: rgba(242,190,114,.36); background: rgba(90, 59, 26, .17); }
.identity-strip article span { display: block; color: #779d9a; font: 8px "IBM Plex Mono", Consolas, monospace; }.identity-strip article b { display: block; overflow: hidden; margin-top: 7px; color: #e9f3ef; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.identity-strip article small { display: block; overflow: hidden; margin-top: 4px; color: #8ea7a4; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.identity-strip > i { align-self: center; color: #5e8b89; font-style: normal; text-align: center; }
.talent-branch-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; padding: 4px; border: 1px solid rgba(112,172,177,.16); background: rgba(4, 15, 24, .7); }
.talent-branch-tabs button { min-width: 0; display: grid; grid-template-columns: 17px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 6px; padding: 7px 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #819a97; text-align: left; cursor: pointer; }.talent-branch-tabs button > span { grid-row: span 2; color: var(--branch-color, #67dff4); font-size: 15px; text-align: center; }.talent-branch-tabs button b { overflow: hidden; color: #bdd1cd; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }.talent-branch-tabs button small { overflow: hidden; color: #718c88; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.talent-branch-tabs button.is-active { border-color: color-mix(in srgb, var(--branch-color, #67dff4), transparent 58%); background: color-mix(in srgb, var(--branch-color, #67dff4), transparent 91%); }.talent-branch-tabs button.is-active b { color: #f0fcf8; }
.guidance-mode { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid rgba(103,228,214,.17); background: rgba(6, 27, 36, .55); }.guidance-mode > div { min-width: 0; display: grid; gap: 4px; }.guidance-mode span { color: #6ea9a5; font: 8px "IBM Plex Mono", Consolas, monospace; letter-spacing: .08em; }.guidance-mode b { color: #d9ebe6; font-size: 11px; font-weight: 600; }.guidance-mode small { overflow: hidden; color: #8ea8a3; font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }.guidance-mode button { flex: 0 0 auto; min-height: 28px; padding: 0 9px; border: 1px solid rgba(103,228,214,.27); border-radius: 6px; background: rgba(5, 32, 39, .7); color: #9ddbd3; font-size: 9px; cursor: pointer; }.guidance-mode button:hover, .guidance-mode button:focus-visible { border-color: #67e4d6; color: #e7fffb; outline: none; }
.route-view-switcher { display: flex; justify-content: flex-end; gap: 4px; }.route-view-switcher button { min-height: 27px; padding: 0 9px; border: 1px solid rgba(113,179,183,.18); background: rgba(4, 17, 27, .6); color: #819b98; font-size: 9px; cursor: pointer; }.route-view-switcher button.is-active { border-color: rgba(242,190,114,.42); color: #ffe2ae; background: rgba(106, 69, 29, .22); }
.flow-spotlight, .flow-all, .talent-detail-card, .talent-evidence-card, .parallel-domains-card, .market-reference-card, .goals-card, .milestones-card { border: 1px solid rgba(111,188,195,.18); background: rgba(4, 17, 27, .69); }
.flow-spotlight { padding: 14px; border-color: color-mix(in srgb, var(--branch-color), transparent 62%); }.flow-spotlight-header, .flow-all-header, .goals-card > header, .milestones-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.flow-spotlight-header h2, .flow-all-header h2, .goals-card h2, .milestones-card h2 { margin: 5px 0 0; color: #f0e4c5; font-size: 17px; font-weight: 600; }.flow-spotlight-header > b { flex: 0 0 auto; color: var(--branch-color); font: 10px "IBM Plex Mono", Consolas, monospace; }
.flow-columns { display: grid; grid-template-columns: minmax(0, .9fr) 26px minmax(0, 1fr) 26px minmax(0, 1fr); align-items: center; gap: 7px; margin-top: 15px; }.flow-column { min-width: 0; }.flow-column-label { display: block; margin-bottom: 6px; color: #799793; font: 8px "IBM Plex Mono", Consolas, monospace; }.flow-connector { position: relative; height: 42px; }.flow-connector::before { content: ""; position: absolute; top: 20px; right: 0; left: 0; border-top: 1px solid color-mix(in srgb, var(--branch-color, #67dff4), transparent 55%); }.flow-connector i { position: absolute; top: 16px; width: 8px; height: 8px; border: 1px solid var(--branch-color, #67dff4); border-radius: 50%; background: #071824; box-shadow: 0 0 10px var(--branch-color, #67dff4); }.flow-connector i:first-child { left: 0; }.flow-connector i:last-child { right: 0; }
.flow-node { position: relative; display: grid; gap: 5px; width: 100%; min-height: 108px; padding: 11px; border: 1px solid color-mix(in srgb, var(--node-color), transparent 58%); border-radius: 9px; background: linear-gradient(145deg, color-mix(in srgb, var(--node-color), transparent 91%), rgba(3, 13, 22, .87)); color: #dceae6; text-align: left; cursor: pointer; }.flow-node + .flow-node { margin-top: 7px; }.flow-node:hover, .flow-node:focus-visible, .flow-node.is-selected { border-color: var(--node-color); box-shadow: 0 0 0 1px color-mix(in srgb, var(--node-color), transparent 63%), 0 0 18px color-mix(in srgb, var(--node-color), transparent 86%); outline: none; }.flow-node.state-feedback { border-style: dashed; }.flow-node-meta { display: flex; align-items: center; gap: 5px; color: #8ba7a2; font: 8px "IBM Plex Mono", Consolas, monospace; }.flow-node-meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--node-color); box-shadow: 0 0 7px var(--node-color); }.flow-node strong { color: #f3ead1; font-size: 12px; line-height: 1.35; font-weight: 600; }.flow-node small { color: #8fa9a5; font-size: 9px; line-height: 1.45; }.flow-node.stage-future { min-height: 122px; background: linear-gradient(145deg, rgba(119,86,29,.17), rgba(5,17,27,.88)); }
.hypothesis-callout, .career-note { display: grid; gap: 5px; margin-top: 12px; padding: 10px 11px; border-left: 2px solid #f2be72; background: rgba(95, 62, 27, .16); }.hypothesis-callout span { color: #f2be72; font: 8px "IBM Plex Mono", Consolas, monospace; }.hypothesis-callout b { color: #ffe5b2; font-size: 12px; }.hypothesis-callout small, .career-note span { color: #a8977e; font-size: 9px; line-height: 1.5; }
.flow-all { padding: 14px; }.flow-all-header p { max-width: 240px; margin: 0; color: #8fa8a4; font-size: 9px; line-height: 1.5; text-align: right; }.flow-all-grid { display: grid; gap: 7px; margin-top: 13px; }.flow-lane { padding: 8px; border: 1px solid color-mix(in srgb, var(--branch-color), transparent 75%); border-radius: 8px; background: color-mix(in srgb, var(--branch-color), transparent 96%); }.flow-lane > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }.flow-lane > header span { color: var(--branch-color); font-size: 10px; }.flow-lane > header span i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--branch-color); box-shadow: 0 0 8px var(--branch-color); }.flow-lane > header small { color: #718b87; font: 8px "IBM Plex Mono", Consolas, monospace; }.flow-lane-track { display: grid; grid-template-columns: 1fr 18px 1.12fr 18px 1.15fr; align-items: center; gap: 4px; }.flow-lane-step { display: grid; gap: 3px; min-width: 0; min-height: 46px; padding: 7px 8px; border: 1px solid rgba(119,179,181,.15); border-radius: 6px; background: rgba(3, 13, 21, .6); color: #d8e6e3; text-align: left; cursor: pointer; }.flow-lane-step:hover, .flow-lane-step:focus-visible { border-color: var(--branch-color); outline: none; }.flow-lane-step b { overflow: hidden; color: #e8f0de; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.flow-lane-step small { overflow: hidden; color: #7f9894; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.flow-lane-step.is-focus { border-color: color-mix(in srgb, var(--branch-color), transparent 40%); background: color-mix(in srgb, var(--branch-color), transparent 92%); }.flow-lane-step.is-future { border-style: dashed; }.lane-arrow { color: var(--branch-color); font-size: 13px; text-align: center; }
.talent-detail-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 9px; }.talent-detail-card, .talent-evidence-card, .parallel-domains-card, .market-reference-card { min-width: 0; padding: 13px; }.talent-detail-card { border-left: 2px solid var(--branch-color); }.talent-detail-card > header, .market-reference-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }.talent-detail-card header h2 { margin: 5px 0 0; color: #f0e2bf; font-size: 18px; }.talent-detail-card header > b { color: var(--branch-color); font: 18px "IBM Plex Mono", Consolas, monospace; }.talent-detail-card > p { margin: 10px 0; color: #a3b8b4; font-size: 10px; line-height: 1.6; }.talent-detail-card dl, .market-reference-card dl { display: grid; gap: 5px; margin: 0; }.talent-detail-card dl div, .market-reference-card dl div { display: flex; justify-content: space-between; gap: 12px; padding-top: 5px; border-top: 1px solid rgba(117,180,182,.12); }.talent-detail-card dt, .market-reference-card dt { color: #738d89; font-size: 9px; }.talent-detail-card dd, .market-reference-card dd { margin: 0; overflow: hidden; color: #c9dad6; font-size: 9px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }.talent-detail-card footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }.talent-detail-card footer button, .goals-card > header > button, .milestones-card > header > button { min-height: 30px; padding: 0 9px; border: 1px solid rgba(103,228,214,.27); border-radius: 6px; background: rgba(8, 32, 41, .72); color: #a9ddd7; font-size: 9px; cursor: pointer; }.talent-detail-card footer button:last-child, .goals-card > header > button, .milestones-card > header > button { border-color: rgba(242,190,114,.38); color: #f3d297; background: rgba(100, 64, 25, .18); }
.talent-evidence-card header, .parallel-domains-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.talent-evidence-card header b, .parallel-domains-card header b { color: #9dafaa; font: 9px "IBM Plex Mono", Consolas, monospace; }.talent-evidence-card h3, .parallel-domains-card h3, .market-reference-card h3 { margin: 9px 0 10px; color: #e4eee9; font-size: 13px; }.talent-evidence-card ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }.talent-evidence-card li { display: grid; grid-template-columns: 7px 35px minmax(0, 1fr); align-items: baseline; gap: 6px; }.talent-evidence-card li i { width: 6px; height: 6px; border-radius: 50%; background: #67dff4; }.talent-evidence-card li i.is-signal { background: #f2be72; }.talent-evidence-card li i.is-unknown { background: #9b8cff; }.talent-evidence-card li span { color: #829b97; font-size: 9px; }.talent-evidence-card li b { color: #bfd0cc; font-size: 9px; font-weight: 500; line-height: 1.45; }.talent-hypothesis { display: grid; gap: 4px; margin-top: 11px; padding: 8px; border: 1px dashed rgba(242,190,114,.34); background: rgba(102,69,28,.13); }.talent-hypothesis span { color: #c09c60; font: 8px "IBM Plex Mono", Consolas, monospace; }.talent-hypothesis b { color: #ffe5b4; font-size: 12px; }.talent-hypothesis small { color: #a18b70; font-size: 8px; }
.parallel-domains-card p { margin: 0; color: #91aaa6; font-size: 10px; line-height: 1.55; }.domain-chip-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }.domain-chip-list span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--domain-color), transparent 58%); border-radius: 5px; color: #cadbd6; font-size: 9px; }.domain-chip-list i { width: 5px; height: 5px; border-radius: 50%; background: var(--domain-color); }
.market-reference-card { grid-column: 1 / -1; border-color: rgba(242,190,114,.29); background: linear-gradient(145deg, rgba(100, 68, 29, .14), rgba(4, 17, 27, .72)); }.market-reference-card header > b { padding: 4px 6px; border: 1px solid rgba(242,190,114,.25); color: #ddb46e; font: 8px "IBM Plex Mono", Consolas, monospace; }.market-income { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(242,190,114,.14); border-bottom: 1px solid rgba(242,190,114,.14); }.market-income small { color: #9b8a70; font-size: 9px; }.market-income strong { color: #ffe2ac; font: 17px "IBM Plex Mono", Consolas, monospace; }.market-reference-card dl { grid-template-columns: repeat(3, 1fr); margin-top: 9px; }.market-reference-card dl div { display: grid; gap: 3px; }.market-reference-card dd { text-align: left; }.market-reference-card > p { margin: 9px 0 0; color: #9eaf9f; font-size: 8px; line-height: 1.45; }.market-reference-card > p span { margin-right: 8px; color: #d5a862; font: 8px "IBM Plex Mono", Consolas, monospace; }.market-caveat { display: block; margin-top: 7px; color: #8e806b; font-size: 8px; line-height: 1.5; }
.career-note, .feedback-note { grid-template-columns: auto 1fr auto; align-items: baseline; margin: 0; border-left-color: #f2be72; }.career-note b { color: #f2be72; font-size: 10px; }.career-note span { color: #aa997c; }.feedback-note { display: grid; gap: 9px; padding: 10px 11px; border-left: 2px solid #9b8cff; background: rgba(67, 48, 113, .16); }.feedback-note b { color: #c1b4ff; font-size: 10px; }.feedback-note span { color: #a49abf; font-size: 9px; line-height: 1.5; }.feedback-note strong { color: #9d90d9; font: 9px "IBM Plex Mono", Consolas, monospace; white-space: nowrap; }
.goals-card, .milestones-card { padding: 13px; }.goals-card > header > button, .milestones-card > header > button { flex: 0 0 auto; }.goal-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }.goal-row { min-width: 0; display: grid; gap: 4px; padding: 8px; border: 1px solid rgba(114,175,178,.14); background: rgba(3, 14, 23, .6); color: #a9bdb8; text-align: left; cursor: pointer; }.goal-row.is-selected { border-color: rgba(242,190,114,.48); background: rgba(98, 63, 25, .17); }.goal-row span { color: #b7945a; font: 8px "IBM Plex Mono", Consolas, monospace; }.goal-row b { overflow: hidden; color: #e1ebe6; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.goal-row small { color: #7f9995; font-size: 8px; }.goal-route-detail { margin-top: 10px; padding: 11px; border-top: 1px solid rgba(242,190,114,.18); }.goal-route-detail > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }.goal-route-detail header span { color: #d2a762; font: 8px "IBM Plex Mono", Consolas, monospace; }.goal-route-detail h3 { margin: 5px 0 0; color: #f1e2c0; font-size: 14px; }.goal-route-detail header > b { color: #d5ba80; font: 9px "IBM Plex Mono", Consolas, monospace; }.goal-progress { height: 4px; margin-top: 10px; background: rgba(127,149,158,.16); }.goal-progress i { display: block; width: var(--progress); height: 100%; background: linear-gradient(90deg, #67dff4, #9b8cff, #f2be72); }.goal-route-detail ol { display: grid; gap: 5px; margin: 11px 0 0; padding: 0; list-style: none; }.goal-route-detail li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-width: 0; padding: 6px 0; border-top: 1px solid rgba(116,178,179,.11); }.goal-route-detail li > span { color: #d1a661; font: 9px "IBM Plex Mono", Consolas, monospace; }.goal-route-detail li > div { min-width: 0; }.goal-route-detail li b { display: block; overflow: hidden; color: #cbdad5; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }.goal-route-detail li small { display: block; overflow: hidden; margin-top: 2px; color: #788f8b; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.goal-route-detail li > button { min-width: 35px; min-height: 24px; border: 1px solid rgba(103,228,214,.25); background: rgba(6, 28, 37, .58); color: #8bd6ce; font-size: 8px; cursor: pointer; }.goal-route-detail li.is-done b { color: #8fcfc4; text-decoration: line-through; }.goal-route-detail li.is-done > button { border-color: rgba(127,224,163,.35); color: #9ce5b6; }.goal-route-note { margin: 10px 0 0; color: #7c9591; font-size: 8px; line-height: 1.45; }
.milestone-boundary { margin: 7px 0 10px; color: #8d9f94; font-size: 9px; line-height: 1.5; }.milestone-list { display: grid; gap: 6px; }.milestone-item { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 8px; padding: 8px; border: 1px solid rgba(116,178,179,.14); background: rgba(3, 14, 23, .54); }.milestone-item > i { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #67dff4; box-shadow: 0 0 8px #67dff4; }.milestone-item.type-negative > i { background: #ff8f9c; box-shadow: 0 0 8px #ff8f9c; }.milestone-item.type-positive > i { background: #7fe0a3; box-shadow: 0 0 8px #7fe0a3; }.milestone-item header { display: flex; justify-content: space-between; gap: 8px; }.milestone-item header b { color: #d6e5df; font-size: 10px; }.milestone-item time { color: #778e8a; font: 8px "IBM Plex Mono", Consolas, monospace; }.milestone-item p { margin: 4px 0; color: #9eafab; font-size: 9px; line-height: 1.45; }.milestone-item small { color: #778d89; font-size: 8px; }.milestone-empty { display: grid; justify-items: center; gap: 6px; padding: 18px 10px; border: 1px dashed rgba(120,174,176,.2); text-align: center; }.milestone-empty i { color: #8e7ad8; font-size: 25px; }.milestone-empty b { color: #c8d8d3; font-size: 11px; }.milestone-empty small { max-width: 280px; color: #7f9793; font-size: 9px; line-height: 1.45; }
.talent-dialog { width: min(500px, calc(100vw - 28px)); padding: 0; border: 1px solid rgba(103,228,214,.34); border-radius: 13px; background: #071720; color: #dce9e5; box-shadow: 0 30px 100px rgba(0,0,0,.65); }.talent-dialog::backdrop { background: rgba(0, 5, 10, .72); backdrop-filter: blur(6px); }.talent-dialog form { display: grid; gap: 12px; padding: 18px; }.talent-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.talent-dialog header span { color: #75d8d1; font: 8px "IBM Plex Mono", Consolas, monospace; }.talent-dialog header h2 { margin: 5px 0 0; color: #f1e3c3; font-size: 19px; }.talent-dialog header button { width: 28px; height: 28px; border: 1px solid rgba(113,179,183,.23); background: transparent; color: #9bb4b0; font-size: 18px; cursor: pointer; }.talent-dialog p { margin: 0; color: #91aaa6; font-size: 10px; line-height: 1.55; }.talent-dialog label { display: grid; gap: 5px; }.talent-dialog label > span { color: #9db5b0; font-size: 9px; }.talent-dialog input, .talent-dialog select, .talent-dialog textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(113,179,183,.23); border-radius: 6px; background: rgba(2, 12, 20, .82); color: #e3efeb; font: inherit; font-size: 11px; padding: 9px 10px; }.talent-dialog textarea { resize: vertical; min-height: 88px; line-height: 1.5; }.talent-dialog input:focus, .talent-dialog select:focus, .talent-dialog textarea:focus { border-color: #67e4d6; outline: none; }.dialog-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.talent-dialog footer { display: flex; justify-content: flex-end; gap: 7px; margin-top: 4px; }.talent-dialog footer button { min-height: 34px; padding: 0 12px; border: 1px solid rgba(113,179,183,.24); background: rgba(6,27,36,.75); color: #b9d0ca; font-size: 10px; cursor: pointer; }.talent-dialog footer button.is-primary { border-color: rgba(242,190,114,.52); background: rgba(107,67,25,.3); color: #ffe5b4; }
.talent-announcer, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1180px) { .talent-workspace { grid-template-columns: minmax(330px, .8fr) minmax(520px, 1.2fr); }.talent-title p { display: none; }.talent-header { grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px; }.privacy-chip { display: none; } }
@media (max-width: 900px) { html[data-screen="talent"] body { overflow: auto; }.talent-screen { overflow: visible; }.talent-header { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 76px; padding: 10px 14px; }.talent-brand b { display: none; }.talent-title h1 { font-size: 20px; }.talent-header-actions a { display: none; }.talent-header-actions button { min-height: 34px; padding: 0 9px; font-size: 9px; }.talent-workspace { display: flex; flex-direction: column; height: auto; padding: 10px; }.spine-pane { min-height: 590px; }.talent-spine-stage { min-height: 500px; }.growth-pane { overflow: visible; }.growth-pane-scroll { height: auto; overflow: visible; padding: 14px 10px 84px; }.talent-branch-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }.talent-branch-tabs button { grid-template-columns: 15px minmax(0, 1fr); }.flow-columns { grid-template-columns: 1fr; gap: 6px; }.flow-connector { width: 100%; height: 17px; }.flow-connector::before { top: 8px; left: 14px; right: 14px; }.flow-connector i { top: 4px; }.flow-connector i:first-child { left: 11px; }.flow-connector i:last-child { right: 11px; }.talent-detail-grid { grid-template-columns: 1fr; }.market-reference-card { grid-column: auto; }.flow-lane-track { grid-template-columns: 1fr; gap: 4px; }.lane-arrow { transform: rotate(90deg); }.flow-all-header p { max-width: 170px; }.identity-strip { grid-template-columns: 1fr; gap: 4px; }.identity-strip > i { transform: rotate(90deg); }.goal-list { grid-template-columns: 1fr; } }
.feedback-note { display: grid; }
@media (max-width: 900px) { .career-note, .feedback-note { grid-template-columns: 1fr; gap: 4px; }.feedback-note strong { white-space: normal; }.guidance-mode { align-items: flex-start; flex-direction: column; }.guidance-mode small { white-space: normal; } }
@media (max-width: 560px) { .talent-header { grid-template-columns: 28px minmax(0, 1fr) auto; }.talent-title > span { font-size: 7px; }.talent-title h1 { font-size: 18px; }.talent-header-actions button { max-width: 100px; overflow: hidden; padding: 0 7px; text-overflow: ellipsis; white-space: nowrap; }.spine-pane { min-height: 530px; }.talent-spine-stage { min-height: 420px; }.spine-controls { font-size: 7px; }.spine-legend { grid-template-columns: repeat(3, 1fr); }.talent-branch-tabs button { grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: center; padding: 6px 3px; text-align: center; }.talent-branch-tabs button > span { grid-row: auto; }.talent-branch-tabs button b { font-size: 9px; }.talent-branch-tabs button small { font-size: 7px; }.flow-spotlight, .flow-all, .talent-detail-card, .talent-evidence-card, .parallel-domains-card, .market-reference-card, .goals-card, .milestones-card { padding: 11px; }.flow-spotlight-header h2, .flow-all-header h2, .goals-card h2, .milestones-card h2 { font-size: 15px; }.flow-all-header p { display: none; }.market-income { align-items: flex-start; flex-direction: column; gap: 5px; }.market-income strong { font-size: 15px; }.market-reference-card dl { grid-template-columns: 1fr; }.dialog-form-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .talent-screen *, .talent-screen *::before, .talent-screen *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
/* The spine is the visual anchor of the talent view. Its labels live inside the scene so the asset can fill the pane. */
.talent-workspace { min-height: 0; }
.spine-pane { position: relative; }
.spine-pane-header, .spine-legend { display: none; }
.talent-spine-stage { min-height: 0; border: 0; flex: 1 1 auto; }
.spine-overlay { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.spine-ideology-title { position: absolute; top: 16px; left: 16px; z-index: 5; box-sizing: border-box; width: min(290px, calc(100% - 32px)); margin: 0; padding: 9px 11px; border: 1px solid rgba(242,190,114,.3); background: linear-gradient(135deg, rgba(73,48,23,.8), rgba(12,24,32,.88)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 26px rgba(0,0,0,.28), 0 0 20px rgba(242,190,114,.1); color: #fff1c5; font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif; font-size: 12px; font-weight: 800; line-height: 1.45; letter-spacing: 0; text-shadow: 0 0 18px rgba(242,190,114,.28); pointer-events: none; }
.spine-three-views { position: absolute; top: 22%; bottom: 58px; left: 16px; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(260px, 42%); pointer-events: auto; }
.spine-three-view-card { --three-view-color: #69b7ff; display: flex; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid color-mix(in srgb, var(--three-view-color), transparent 58%); border-radius: 6px; background: linear-gradient(145deg, color-mix(in srgb, var(--three-view-color), transparent 88%), rgba(4,16,27,.72)); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 14px 34px rgba(0,0,0,.24), 0 0 22px color-mix(in srgb, var(--three-view-color), transparent 84%); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.spine-three-view-card:hover, .spine-three-view-card:focus-within { border-color: var(--three-view-color); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 38px rgba(0,0,0,.3), 0 0 28px color-mix(in srgb, var(--three-view-color), transparent 66%); }
.spine-three-view-card.is-selected { border-color: var(--three-view-color); transform: translateX(4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px color-mix(in srgb, var(--three-view-color), transparent 45%), 0 0 30px color-mix(in srgb, var(--three-view-color), transparent 62%); }
.spine-three-view-main { display: grid; min-height: 0; flex: 1 1 auto; align-content: center; gap: 3px; padding: 9px 10px 7px; border: 0; background: transparent; color: #e9f2ee; text-align: left; cursor: pointer; }
.spine-three-view-main:hover, .spine-three-view-main:focus-visible { background: color-mix(in srgb, var(--three-view-color), transparent 91%); outline: 0; }
.spine-three-view-kicker { display: flex; align-items: center; gap: 5px; color: var(--three-view-color); font: 8px/1.2 "IBM Plex Mono", Consolas, monospace; }
.spine-three-view-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--three-view-color); box-shadow: 0 0 9px var(--three-view-color); }
.spine-three-view-main strong { color: #fff6df; font-size: 16px; font-weight: 800; line-height: 1.15; }
.spine-three-view-main small { color: #b8ccc7; font-size: 9px; line-height: 1.25; }
.spine-three-view-main p { display: -webkit-box; overflow: hidden; margin: 3px 0 0; color: #e5f0ec; font-size: 10px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.spine-three-view-card footer { display: flex; min-height: 25px; align-items: center; gap: 5px; padding: 0 8px; border-top: 1px solid color-mix(in srgb, var(--three-view-color), transparent 78%); color: #98afa9; font-size: 8px; }
.spine-three-view-card footer span { min-width: 0; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spine-three-view-card footer button { padding: 3px 4px; border: 0; background: transparent; color: color-mix(in srgb, var(--three-view-color), #e7f5f1 38%); font-size: 8px; cursor: pointer; }
.spine-three-view-card footer button:hover, .spine-three-view-card footer button:focus-visible { color: #fff; text-shadow: 0 0 10px var(--three-view-color); outline: 0; }
.spine-branch-rail { position: absolute; right: 14px; bottom: 14px; left: 14px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; pointer-events: auto; }
.spine-branch-rail button { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 27px; padding: 0 5px; border: 1px solid rgba(111, 188, 195, .19); background: rgba(3, 14, 23, .72); color: #8aa6a2; font-size: 8px; cursor: pointer; backdrop-filter: blur(8px); }
.spine-branch-rail button i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--branch-color); box-shadow: 0 0 8px var(--branch-color); }
.spine-branch-rail button.is-active { border-color: color-mix(in srgb, var(--branch-color), transparent 38%); color: #f2fbf7; background: color-mix(in srgb, var(--branch-color), transparent 86%); }
.spine-controls { top: 16px; right: 16px; bottom: auto; left: auto; display: grid; justify-items: end; gap: 5px; width: 30px; }
.spine-controls span { position: absolute; top: 35px; right: 0; width: 120px; color: #78948f; font-size: 7px; line-height: 1.35; text-align: right; }
@media (max-width: 900px) {
.talent-workspace { padding: 10px; }
.spine-ideology-title { top: 12px; left: 12px; width: min(270px, calc(100% - 24px)); font-size: 11px; }
.spine-three-views { top: 24%; bottom: 58px; left: 12px; width: min(245px, 52%); gap: 6px; }
.spine-three-view-main { padding: 8px 9px 5px; }
.spine-three-view-main strong { font-size: 14px; }
.spine-three-view-main p { font-size: 9px; }
.spine-branch-rail { right: 10px; bottom: 10px; left: 10px; }
.spine-branch-rail button { min-height: 31px; }
.spine-controls { top: 12px; right: 12px; }
}
@media (max-width: 560px) {
.spine-ideology-title { top: 12px; width: min(220px, calc(100% - 24px)); padding: 7px 8px; font-size: 11px; line-height: 1.4; }
.spine-three-views { top: 25%; bottom: 112px; left: 9px; width: 55%; gap: 5px; }
.spine-three-view-main { padding: 6px 7px 4px; }
.spine-three-view-kicker { font-size: 7px; }
.spine-three-view-main strong { font-size: 12px; }
.spine-three-view-main small, .spine-three-view-main p { font-size: 8px; }
.spine-three-view-main p { margin-top: 1px; -webkit-line-clamp: 2; }
.spine-three-view-card footer { min-height: 20px; padding: 0 5px; }
.spine-three-view-card footer span, .spine-three-view-card footer button { font-size: 7px; }
.spine-branch-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spine-branch-rail button { font-size: 7px; }
}
.talent-three-view-dialog { border-color: color-mix(in srgb, var(--three-view-color, #69b7ff), transparent 38%); background: linear-gradient(145deg, rgba(18,48,60,.88), rgba(5,19,29,.94)); backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); }
.talent-three-view-dialog form { max-height: min(78vh, 680px); overflow: auto; }
.talent-three-view-dialog textarea { border-color: color-mix(in srgb, var(--three-view-color), transparent 55%); }
.three-view-history { display: grid; gap: 8px; min-height: 0; }
.three-view-history > header { align-items: center; padding-top: 3px; border-top: 1px solid rgba(139,196,199,.16); }
.three-view-history h3 { margin: 9px 0 0; color: #dcebe7; font-size: 12px; }
.three-view-history > header small { margin-top: 9px; color: #91aaa4; font-size: 9px; }
.three-view-history ol { display: grid; gap: 7px; max-height: 190px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.three-view-history li { display: grid; gap: 4px; padding: 8px 9px; border: 1px solid rgba(139,196,199,.16); border-radius: 5px; background: rgba(3,14,23,.45); }
.three-view-history li > div { display: flex; justify-content: space-between; gap: 8px; }
.three-view-history time, .three-view-history li span, .three-view-history li > small { color: #8fa9a3; font-size: 8px; }
.three-view-history li p { color: #dce9e5; font-size: 10px; }
.three-view-history-empty { padding: 10px; border: 1px dashed rgba(139,196,199,.16); text-align: center; }
/* Game-like talent map: icons and numbers carry the first read; prose stays in the selected-node inspector. */
.growth-pane-scroll { padding: 12px; overflow: auto; }
.talent-game-shell { display: flex; flex-direction: column; min-height: 100%; gap: 9px; }
.game-shell-header { display: flex; align-items: center; justify-content: space-between; min-height: 28px; gap: 10px; }
.game-shell-header > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.game-shell-header > div:last-child { color: #849e99; }
.game-shell-header span { color: #76dcd2; font: 8px/1.3 "IBM Plex Mono", Consolas, monospace; letter-spacing: .12em; }
.game-shell-header b { color: #f1e2bf; font-size: 15px; font-weight: 600; }
.game-shell-header small { color: #819a96; font-size: 8px; white-space: nowrap; }
.game-shell-header button { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(103,228,214,.26); border-radius: 50%; background: rgba(5,24,32,.7); color: #9cdbd2; cursor: pointer; }
.game-branch-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid rgba(111,188,195,.17); background: rgba(3, 15, 24, .68); }
.game-branch-tabs button { min-width: 0; display: grid; grid-template-columns: 21px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; column-gap: 6px; padding: 6px 7px; border: 1px solid transparent; background: transparent; color: #839b97; text-align: left; cursor: pointer; }
.game-branch-tabs button:hover, .game-branch-tabs button:focus-visible { border-color: color-mix(in srgb, var(--branch-color), transparent 45%); outline: none; }
.game-branch-tabs button.is-active { border-color: color-mix(in srgb, var(--branch-color), transparent 30%); background: color-mix(in srgb, var(--branch-color), transparent 88%); }
.game-branch-icon { grid-row: span 2; display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid color-mix(in srgb, var(--branch-color), transparent 40%); border-radius: 50%; color: var(--branch-color); font-size: 13px; box-shadow: 0 0 12px color-mix(in srgb, var(--branch-color), transparent 78%); }
.game-branch-tabs b { overflow: hidden; color: #d5e4df; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.game-branch-tabs small { color: #77918d; font: 8px "IBM Plex Mono", Consolas, monospace; }
.talent-game-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(214px, .34fr); flex: 1 1 auto; min-height: 0; gap: 9px; }
.talent-tree-column { display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: 8px; }
.game-tree-board { display: flex; flex-direction: column; min-width: 0; min-height: 0; flex: 1 1 auto; padding: 11px; border: 1px solid color-mix(in srgb, var(--branch-color), transparent 66%); background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--branch-color), transparent 93%), transparent 56%), rgba(3, 15, 24, .72); overflow: hidden; }
.game-tree-board-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.game-tree-board-header > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.game-tree-branch-icon { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid color-mix(in srgb, var(--branch-color), transparent 32%); border-radius: 50%; color: var(--branch-color); font-size: 16px; box-shadow: 0 0 18px color-mix(in srgb, var(--branch-color), transparent 76%); }
.game-tree-board-header b { display: block; color: #ecf4ef; font-size: 12px; }
.game-tree-board-header small { display: block; margin-top: 2px; color: #7d9691; font-size: 8px; }
.game-tree-board-header > strong { display: grid; justify-items: end; color: var(--branch-color); font: 17px "IBM Plex Mono", Consolas, monospace; }
.game-tree-board-header > strong small { margin: 0; color: #78918d; font: 7px "IBM Plex Mono", Consolas, monospace; }
.talent-tree-network { display: grid; grid-template-rows: auto 16px minmax(0, 1fr); align-content: center; min-height: 0; flex: 1 1 auto; margin-top: 8px; }
.talent-tree-root { justify-self: center; display: grid; grid-template-columns: 24px auto 24px; align-items: center; gap: 7px; min-width: 130px; padding: 6px 8px; border: 1px solid rgba(242,190,114,.42); background: rgba(71, 48, 24, .23); color: #f7dfb1; }
.talent-tree-root > span { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(242,190,114,.5); border-radius: 50%; color: #f2be72; }
.talent-tree-root b { color: #f3e7c8; font-size: 10px; }
.talent-tree-root em { color: #f2be72; font: 11px "IBM Plex Mono", Consolas, monospace; font-style: normal; text-align: right; }
.talent-tree-root-link { justify-self: center; width: 1px; height: 16px; border-left: 1px solid color-mix(in srgb, var(--branch-color), transparent 38%); }
.talent-tree-lanes { display: grid; align-content: start; gap: 10px; min-height: 0; overflow: auto; padding: 12px 0 4px; scrollbar-color: color-mix(in srgb, var(--branch-color), transparent 48%) transparent; }
.talent-tree-lane { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1.08fr) 18px minmax(0, 1.12fr); align-items: center; gap: 5px; min-height: 77px; }
.talent-tree-lane::before { content: ""; position: absolute; top: 50%; right: 9%; left: 9%; z-index: 0; border-top: 1px solid color-mix(in srgb, var(--branch-color), transparent 66%); }
.talent-node { position: relative; z-index: 1; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 6px; min-width: 0; min-height: 64px; padding: 7px; border: 1px solid rgba(119,179,181,.18); background: rgba(3, 13, 21, .84); color: #d7e6e1; text-align: left; cursor: pointer; }
.talent-node:hover, .talent-node:focus-visible { border-color: var(--node-color); outline: none; box-shadow: 0 0 16px color-mix(in srgb, var(--node-color), transparent 78%); }
.talent-node.is-selected { border-color: var(--node-color); background: color-mix(in srgb, var(--node-color), transparent 90%); box-shadow: 0 0 18px color-mix(in srgb, var(--node-color), transparent 80%); }
.talent-node.node-future { border-style: dashed; opacity: .82; }
.talent-node.is-candidate { border-color: rgba(242,190,114,.46); color: #ffe0a6; }
.talent-node.is-feedback { border-style: dotted; }
.talent-node-icon { grid-row: span 2; display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid color-mix(in srgb, var(--node-color), transparent 35%); border-radius: 50%; color: var(--node-color); font-size: 13px; }
.talent-node strong { overflow: hidden; color: #dce9e4; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.talent-node em { color: var(--node-color); font: 10px "IBM Plex Mono", Consolas, monospace; font-style: normal; text-align: right; }
.talent-node small { overflow: hidden; color: #718b87; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.talent-node-progress { grid-column: 2 / -1; display: block; height: 3px; margin-top: 4px; background: rgba(119,149,151,.16); }
.talent-node-progress::after { content: ""; display: block; width: var(--progress); height: 100%; background: linear-gradient(90deg, var(--node-color), rgba(255,255,255,.76)); box-shadow: 0 0 8px var(--node-color); }
.talent-tree-link { position: relative; z-index: 2; color: var(--branch-color); font-size: 12px; font-style: normal; text-align: center; text-shadow: 0 0 10px color-mix(in srgb, var(--branch-color), transparent 40%); }
.game-tree-board-footer { display: flex; align-items: center; gap: 9px; padding-top: 7px; border-top: 1px solid rgba(116,178,179,.12); color: #78928e; font-size: 8px; }
.game-tree-board-footer span { display: inline-flex; align-items: center; gap: 4px; }.game-tree-board-footer i { width: 6px; height: 6px; border-radius: 50%; background: #67dff4; }.game-tree-board-footer i.is-forming { background: #9b8cff; }.game-tree-board-footer i.is-dashed { border: 1px dashed #f2be72; background: transparent; }.game-tree-board-footer b { margin-left: auto; color: #b7c9c3; font: 10px "IBM Plex Mono", Consolas, monospace; }.game-tree-board-footer b small { color: #78928e; font: 8px "IBM Plex Mono", Consolas, monospace; }
.game-goal-bar { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 42px 27px; align-items: center; gap: 7px; min-height: 49px; padding: 6px 8px; border: 1px solid rgba(242,190,114,.28); background: rgba(71, 48, 24, .18); }
.game-goal-icon { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(242,190,114,.55); border-radius: 50%; color: #f2be72; font-size: 15px; }
.game-goal-bar > div { min-width: 0; }.game-goal-bar small { display: block; color: #b3925a; font: 7px "IBM Plex Mono", Consolas, monospace; }.game-goal-bar b { display: block; overflow: hidden; margin-top: 3px; color: #f0dfbb; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.game-goal-bar > strong { color: #f2be72; font: 12px "IBM Plex Mono", Consolas, monospace; }.game-goal-progress { display: block; height: 3px; background: rgba(127,149,158,.18); }.game-goal-progress::after { content: ""; display: block; width: var(--progress); height: 100%; background: linear-gradient(90deg, #67dff4, #9b8cff, #f2be72); }.game-goal-bar > button { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(242,190,114,.45); background: rgba(107,67,25,.3); color: #ffe5b4; cursor: pointer; }
.game-inspector { min-width: 0; display: flex; flex-direction: column; gap: 9px; padding: 12px; border: 1px solid color-mix(in srgb, var(--branch-color), transparent 62%); background: rgba(4, 17, 27, .76); overflow: auto; }
.game-inspector-header { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(116,178,179,.14); }.inspector-node-icon { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid color-mix(in srgb, var(--branch-color), transparent 26%); border-radius: 50%; color: var(--branch-color); font-size: 17px; }.game-inspector-header > div { min-width: 0; }.game-inspector-header > div > span { color: #75d8d1; font: 7px "IBM Plex Mono", Consolas, monospace; letter-spacing: .09em; }.game-inspector-header h2 { overflow: hidden; margin: 4px 0 0; color: #f0e2bf; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }.game-inspector-header small { display: block; overflow: hidden; margin-top: 3px; color: #829b97; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.game-inspector-header > b { color: var(--branch-color); font: 16px "IBM Plex Mono", Consolas, monospace; }
.inspector-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }.inspector-stats div { display: grid; justify-items: center; gap: 2px; padding: 6px 3px; border: 1px solid rgba(116,178,179,.13); background: rgba(3,14,23,.58); }.inspector-stats b { color: #e6f1ed; font: 14px "IBM Plex Mono", Consolas, monospace; }.inspector-stats small { color: #718c88; font-size: 7px; }.game-inspector-brief { margin: 0; color: #a5b8b3; font-size: 9px; line-height: 1.55; }.game-quest { display: grid; gap: 4px; padding: 8px; border-left: 2px solid var(--branch-color); background: color-mix(in srgb, var(--branch-color), transparent 93%); }.game-quest header { display: flex; justify-content: space-between; color: #82a5a0; font: 7px "IBM Plex Mono", Consolas, monospace; }.game-quest header b { color: var(--branch-color); }.game-quest strong { color: #dce8e3; font-size: 9px; line-height: 1.4; }.game-quest > small { color: #7d9692; font-size: 8px; line-height: 1.4; }.game-candidate, .game-feedback { display: grid; gap: 4px; padding: 8px; border: 1px dashed rgba(242,190,114,.38); background: rgba(104,70,27,.13); }.game-candidate span { color: #c49e5d; font: 7px "IBM Plex Mono", Consolas, monospace; }.game-candidate b { color: #ffe5b4; font-size: 11px; }.game-candidate small, .game-feedback { color: #a78d69; font-size: 8px; }.game-market { display: grid; gap: 4px; padding: 8px; border: 1px solid rgba(242,190,114,.29); background: rgba(100,68,29,.12); }.game-market span { color: #c8a269; font: 7px "IBM Plex Mono", Consolas, monospace; }.game-market strong { color: #ffe2ac; font: 15px "IBM Plex Mono", Consolas, monospace; }.game-market small { color: #99876d; font-size: 8px; line-height: 1.35; }.game-feedback { border-style: dotted; border-color: rgba(155,140,255,.38); background: rgba(67,48,113,.13); color: #b5a9ef; }.game-inspector-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: auto; }.game-inspector-actions button { min-height: 30px; border: 1px solid rgba(103,228,214,.25); background: rgba(6,28,37,.65); color: #a8dad4; font-size: 8px; cursor: pointer; }.game-inspector-actions button:last-child { border-color: rgba(242,190,114,.38); background: rgba(100,64,25,.17); color: #f3d297; }
@media (max-width: 1180px) { .talent-game-layout { grid-template-columns: minmax(0, 1fr) minmax(194px, .38fr); }.game-branch-tabs button { grid-template-columns: 18px minmax(0,1fr); padding: 6px 5px; }.game-branch-icon { width: 18px; height: 18px; font-size: 11px; }.game-branch-tabs b { font-size: 9px; }.talent-node { grid-template-columns: 22px minmax(0,1fr) auto; padding: 5px; }.talent-node-icon { width: 21px; height: 21px; font-size: 11px; }.talent-node strong { font-size: 8px; } }
@media (max-width: 900px) { .growth-pane-scroll { height: auto; min-height: 0; overflow: visible; padding: 14px 10px 70px; }.talent-game-shell { min-height: 0; }.talent-game-layout { display: flex; flex-direction: column; }.game-tree-board { min-height: 455px; }.game-inspector { min-height: 340px; }.game-inspector-actions { margin-top: 4px; }.talent-tree-lanes { overflow: visible; } }
@media (max-width: 560px) { .game-shell-header b { font-size: 13px; }.game-shell-header small { display: none; }.game-branch-tabs { grid-template-columns: repeat(3, minmax(0,1fr)); }.game-branch-tabs button { grid-template-columns: 18px minmax(0,1fr); }.talent-tree-lane { grid-template-columns: minmax(0,1fr) 12px minmax(0,1.08fr) 12px minmax(0,1.12fr); gap: 3px; min-height: 74px; }.talent-node { grid-template-columns: 19px minmax(0,1fr); grid-template-rows: auto auto auto; min-height: 61px; padding: 5px; }.talent-node-icon { grid-row: span 2; width: 18px; height: 18px; font-size: 10px; }.talent-node strong { font-size: 7px; }.talent-node em { grid-column: 2; font-size: 8px; text-align: left; }.talent-node-progress { grid-column: 1 / -1; }.talent-tree-link { font-size: 10px; }.game-goal-bar { grid-template-columns: 25px minmax(0,1fr) auto 27px; }.game-goal-progress { display: none; }.game-goal-icon { width: 22px; height: 22px; }.game-inspector { padding: 10px; } }
/* Classic talent-page layout: a points sidebar, tier strip, and icon-based tree panels. */
.talent-level-strip { display: flex; align-items: center; gap: 3px; min-height: 28px; padding: 3px 4px; border: 1px solid rgba(184,145,78,.32); background: linear-gradient(90deg, rgba(84,53,21,.48), rgba(5,18,27,.8)); overflow-x: auto; }
.talent-level-strip button { flex: 0 0 23px; width: 23px; height: 22px; border: 1px solid rgba(105,168,193,.24); background: linear-gradient(180deg, rgba(35,80,111,.88), rgba(5,25,42,.9)); color: #9cb7c0; font: 10px "IBM Plex Mono", Consolas, monospace; cursor: pointer; }
.talent-level-strip button.is-active { border-color: #e6be72; background: linear-gradient(180deg, #a56e2d, #4c2f19); color: #ffe6af; box-shadow: 0 0 8px rgba(242,190,114,.34); }
.talent-level-strip button.is-add { flex-basis: 25px; width: 25px; color: #f5d99d; font-size: 15px; }
.talent-game-layout { grid-template-columns: minmax(96px, .22fr) minmax(0, 1fr) minmax(178px, .43fr); gap: 7px; }
.talent-page-sidebar { display: flex; flex-direction: column; min-width: 0; gap: 7px; padding: 8px; border: 1px solid rgba(196,153,83,.38); background: linear-gradient(180deg, rgba(71,48,23,.83), rgba(9,22,29,.9) 55%, rgba(15,33,35,.9)); overflow: auto; }
.talent-page-identity { display: grid; grid-template-columns: 31px minmax(0,1fr); align-items: center; gap: 7px; padding-bottom: 7px; border-bottom: 1px solid rgba(242,190,114,.22); }
.talent-page-branch-icon { display: grid; width: 29px; height: 29px; place-items: center; border: 2px solid var(--node-color); border-radius: 4px; color: var(--node-color); background: rgba(7,17,22,.72); font-size: 16px; box-shadow: 0 0 11px color-mix(in srgb, var(--node-color), transparent 72%); }
.talent-page-identity span, .talent-page-points small { color: #c5a36c; font: 7px "IBM Plex Mono", Consolas, monospace; }
.talent-page-identity b { display: block; overflow: hidden; margin-top: 3px; color: #f4dfb1; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.talent-page-identity small { display: block; margin-top: 2px; color: #9e9783; font-size: 7px; }
.talent-page-points { display: grid; justify-items: center; gap: 1px; padding: 4px 0 6px; border-bottom: 1px solid rgba(242,190,114,.16); }
.talent-page-points strong { color: #e8b965; font: 21px "IBM Plex Mono", Consolas, monospace; text-shadow: 0 0 10px rgba(232,185,101,.4); }
.talent-page-points span { color: #8fa39d; font-size: 7px; }
.talent-page-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.talent-page-counts div { display: grid; justify-items: center; gap: 2px; padding: 5px 1px; border: 1px solid rgba(112,170,180,.2); background: rgba(3,15,22,.54); }
.talent-page-counts b { color: #e6f1ed; font: 12px "IBM Plex Mono", Consolas, monospace; }.talent-page-counts small { color: #7d9792; font-size: 6px; }
.talent-page-actions { display: grid; gap: 4px; }.talent-page-actions button { min-height: 24px; border: 1px solid rgba(122,184,202,.28); background: linear-gradient(180deg, rgba(54,108,139,.66), rgba(12,37,51,.8)); color: #c5e3e6; font-size: 7px; cursor: pointer; }.talent-page-actions button:last-child { border-color: rgba(242,190,114,.35); background: rgba(80,54,26,.45); color: #e9cd98; }
.talent-page-hint { margin: 0; color: #9a947e; font-size: 7px; line-height: 1.5; text-align: center; }
.talent-page-sidebar .game-branch-tabs { grid-template-columns: 1fr; gap: 3px; margin-top: auto; padding: 0; border: 0; background: transparent; }
.talent-page-sidebar .game-branch-tabs button { grid-template-columns: 22px minmax(0,1fr); grid-template-rows: auto auto; padding: 4px 3px; border-color: rgba(112,170,180,.16); background: rgba(3,14,22,.48); }
.talent-page-sidebar .game-branch-tabs button.is-active { border-color: color-mix(in srgb, var(--branch-color), transparent 20%); background: color-mix(in srgb, var(--branch-color), transparent 84%); }
.talent-page-sidebar .game-branch-tabs b { font-size: 8px; }.talent-page-sidebar .game-branch-tabs small { font-size: 6px; }.talent-page-sidebar .game-branch-icon { width: 20px; height: 20px; font-size: 11px; }
.talent-page-board { padding: 7px; }
.talent-page-board .game-tree-board-header { min-height: 31px; }
.talent-tree-surface { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; gap: 7px; margin-top: 7px; padding: 7px; border: 1px solid rgba(167,137,87,.27); background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--branch-color), transparent 89%), transparent 59%), rgba(3,12,18,.72); overflow: hidden; }
.talent-tree-origin { align-self: center; display: grid; grid-template-columns: 20px auto auto; align-items: center; gap: 5px; min-height: 27px; padding: 3px 7px; border: 1px solid rgba(242,190,114,.54); background: rgba(70,46,22,.7); color: #f3dcaa; }
.talent-tree-origin span { color: #f2be72; font-size: 14px; }.talent-tree-origin b { font-size: 8px; }.talent-tree-origin small { color: #bd9c63; font: 7px "IBM Plex Mono", Consolas, monospace; }
.talent-tree-columns { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 auto; min-height: 0; gap: 5px; }
.talent-tree-column-panel { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 214px; padding: 6px 4px; border: 1px solid rgba(143,171,169,.28); overflow: visible; }
.talent-tree-column-panel::after { content: "→"; position: absolute; top: 50%; right: -9px; z-index: 3; color: color-mix(in srgb, var(--node-color), white 18%); font-size: 12px; text-shadow: 0 0 8px var(--node-color); }
.talent-tree-column-panel:last-child::after { display: none; }
.talent-tree-column-panel::before { content: ""; position: absolute; top: 26px; bottom: 8px; left: 50%; z-index: 0; border-left: 1px solid color-mix(in srgb, var(--node-color), transparent 65%); }
.talent-tree-column-panel.tone-ember { background: linear-gradient(180deg, rgba(125,43,37,.72), rgba(39,18,27,.79)); }.talent-tree-column-panel.tone-ocean { background: linear-gradient(180deg, rgba(28,91,133,.72), rgba(13,36,65,.82)); }.talent-tree-column-panel.tone-forest { background: linear-gradient(180deg, rgba(45,111,63,.72), rgba(17,49,40,.82)); }
.talent-tree-column-panel > header { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; min-height: 27px; padding-bottom: 4px; border-bottom: 1px solid rgba(228,218,184,.22); }.talent-tree-column-panel > header b { color: #f1e3bd; font-size: 9px; }.talent-tree-column-panel > header small { color: rgba(232,225,195,.7); font-size: 6px; }
.talent-icon-stack { position: relative; z-index: 1; display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: space-evenly; min-height: 0; padding: 3px 0; }
.talent-icon-node { position: relative; display: grid; justify-items: center; gap: 2px; width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 2px; border: 0; background: transparent; color: #d8e6e0; cursor: pointer; }.talent-icon-node:focus-visible { outline: 1px solid #f3d297; outline-offset: 2px; }.talent-icon-frame { position: relative; display: grid; width: 38px; height: 38px; place-items: center; border: 2px solid rgba(170,190,187,.65); border-radius: 4px; background: linear-gradient(145deg, rgba(84,104,112,.75), rgba(8,17,24,.94)); box-shadow: inset 0 0 0 1px rgba(2,7,11,.75), 0 2px 8px rgba(0,0,0,.45); }.talent-icon-glyph { color: #dce6e2; font-size: 18px; filter: drop-shadow(0 0 5px currentColor); }.talent-icon-frame b { position: absolute; right: -6px; bottom: -5px; min-width: 20px; padding: 1px 2px; border: 1px solid rgba(228,205,145,.55); background: #07131b; color: #f6e4ac; font: 7px "IBM Plex Mono", Consolas, monospace; text-align: center; }
.talent-icon-node small { display: block; overflow: hidden; max-width: 100%; color: rgba(232,237,228,.82); font-size: 6px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }.talent-icon-node.is-connected .talent-icon-frame { border-color: #66d9e8; background: linear-gradient(145deg, #287d94, #0a2738); box-shadow: 0 0 13px rgba(103,223,244,.38), inset 0 0 0 1px rgba(148,242,249,.5); }.talent-icon-node.is-forming .talent-icon-frame { border-color: #b4a4ff; background: linear-gradient(145deg, #5a4f9a, #211d4e); box-shadow: 0 0 13px rgba(155,140,255,.4), inset 0 0 0 1px rgba(224,217,255,.4); }.talent-icon-node.is-forming .talent-icon-glyph { color: #ddd7ff; }.talent-icon-node.is-locked { opacity: .5; filter: grayscale(.9); }.talent-icon-node.is-candidate .talent-icon-frame { border-style: dashed; border-color: #f2be72; background: linear-gradient(145deg, rgba(99,75,38,.72), rgba(23,20,16,.89)); }.talent-icon-node.is-selected .talent-icon-frame { border-color: #fff0ba; box-shadow: 0 0 0 2px color-mix(in srgb, var(--node-color), transparent 50%), 0 0 18px color-mix(in srgb, var(--node-color), transparent 34%); transform: translateY(-1px); }.talent-icon-node.is-selected small { color: #fff0bf; }
.talent-stack-link { width: 1px; height: 10px; border-left: 1px solid color-mix(in srgb, var(--node-color), transparent 40%); }
.talent-page-board .game-tree-board-footer { margin-top: 5px; padding-top: 5px; font-size: 7px; }
@media (max-width: 1180px) { .talent-game-layout { grid-template-columns: 86px minmax(0, 1fr) 178px; }.talent-page-sidebar { padding: 6px; }.talent-page-identity { grid-template-columns: 25px minmax(0,1fr); }.talent-page-branch-icon { width: 24px; height: 24px; font-size: 13px; }.talent-page-identity b { font-size: 9px; }.talent-page-points strong { font-size: 17px; }.talent-icon-frame { width: 33px; height: 33px; }.talent-icon-glyph { font-size: 15px; } }
@media (max-width: 900px) { .talent-game-layout { display: flex; flex-direction: column; }.talent-page-sidebar { order: 0; }.talent-page-sidebar .game-branch-tabs { grid-template-columns: repeat(5, minmax(0,1fr)); }.talent-page-sidebar .game-branch-tabs button { grid-template-columns: 20px minmax(0,1fr); }.talent-tree-column { order: 1; }.game-inspector { order: 2; }.talent-tree-column-panel { min-height: 245px; } }
@media (max-width: 560px) { .talent-level-strip button { flex-basis: 21px; width: 21px; height: 20px; font-size: 9px; }.talent-page-sidebar .game-branch-tabs { grid-template-columns: repeat(3, minmax(0,1fr)); }.talent-page-sidebar .game-branch-tabs button { grid-template-columns: 18px minmax(0,1fr); }.talent-tree-column-panel { min-height: 230px; padding-inline: 2px; }.talent-icon-frame { width: 30px; height: 30px; }.talent-icon-glyph { font-size: 13px; }.talent-icon-node small { font-size: 5px; }.talent-tree-origin { grid-template-columns: 18px auto auto; padding-inline: 5px; } }
/* Goal-first revision: categories stay above the workspace and the main board explains effort before symbolism. */
.talent-category-bar { display: grid; gap: 5px; padding-bottom: 2px; border-bottom: 1px solid rgba(118,181,188,.2); }
.talent-category-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }.talent-category-heading span { color: #f1e2bf; font-size: 13px; font-weight: 600; }.talent-category-heading small { color: #83a09b; font-size: 9px; }
.talent-category-bar .game-branch-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 4px; border-color: rgba(111,188,195,.25); background: rgba(3, 15, 24, .72); }
.talent-category-bar .game-branch-tabs button { grid-template-columns: 25px minmax(0,1fr); padding: 8px 7px; min-height: 43px; }.talent-category-bar .game-branch-tabs b { font-size: 12px; }.talent-category-bar .game-branch-tabs small { font-size: 9px; }.talent-category-bar .game-branch-icon { width: 24px; height: 24px; font-size: 14px; }
.talent-page-board.goal-route-board { padding: 9px; }
.goal-hero { display: grid; gap: 7px; padding: 11px 12px 10px; border: 2px solid #d6a95f; background: linear-gradient(135deg, rgba(104,67,25,.86), rgba(32,27,22,.9) 57%, rgba(7,21,28,.94)); box-shadow: 0 0 18px rgba(214,169,95,.2), inset 0 0 0 1px rgba(255,227,163,.2); }
.goal-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #e4c58a; font-size: 9px; }.goal-hero-top b { color: #ffe5a8; font: 16px "IBM Plex Mono", Consolas, monospace; }.goal-hero h2 { margin: 0; overflow: hidden; color: #fff0bf; font-size: 20px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.goal-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }.goal-hero-stats div { display: grid; gap: 2px; padding: 6px 4px; border: 1px solid rgba(241,209,146,.27); background: rgba(8,19,25,.46); }.goal-hero-stats strong { color: #fff1c5; font: 17px "IBM Plex Mono", Consolas, monospace; }.goal-hero-stats small { color: #c4aa76; font-size: 8px; }.goal-hero-progress { height: 6px; background: rgba(122,133,133,.28); }.goal-hero-progress i { display: block; width: var(--progress); height: 100%; background: linear-gradient(90deg, #62d9e7, #a995ff, #f2be72); box-shadow: 0 0 10px rgba(242,190,114,.55); }.goal-hero p { margin: 0; overflow: hidden; color: #e3d5ae; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.goal-route-heading { display: flex; align-items: end; justify-content: space-between; gap: 8px; padding: 10px 2px 5px; }.goal-route-heading div { min-width: 0; }.goal-route-heading span { display: block; color: #e9f0e9; font-size: 14px; font-weight: 600; }.goal-route-heading small { display: block; margin-top: 3px; color: #8ba49f; font-size: 9px; }.goal-route-heading > b { color: #e8bd72; font: 12px "IBM Plex Mono", Consolas, monospace; white-space: nowrap; }
.goal-step-route { display: grid; flex: 1 1 auto; gap: 6px; min-height: 0; margin: 0; padding: 2px 0 4px; overflow: auto; list-style: none; }.goal-step-row { display: grid; grid-template-columns: 28px 48px minmax(0,1fr) 45px 57px; align-items: center; gap: 6px; min-height: 58px; padding: 6px; border: 1px solid rgba(112,170,180,.22); background: rgba(4,17,26,.68); }.goal-step-row.is-active { border-color: #67dff4; background: linear-gradient(90deg, rgba(35,100,116,.4), rgba(4,20,28,.72)); box-shadow: 0 0 13px rgba(103,223,244,.15); }.goal-step-row.is-done { border-color: rgba(127,224,163,.42); background: rgba(31,72,57,.38); }.goal-step-number { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(235,202,135,.55); color: #f1d28e; font: 10px "IBM Plex Mono", Consolas, monospace; }.goal-step-type { color: #b4d9d4; font-size: 10px; font-weight: 600; }.goal-step-type small { display: block; margin-top: 2px; color: #75918d; font-size: 8px; font-weight: 400; }.goal-step-content { min-width: 0; }.goal-step-content b { display: block; overflow: hidden; color: #edf4ee; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }.goal-step-content small { display: block; overflow: hidden; margin-top: 3px; color: #8fa9a4; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.goal-step-effort { display: grid; justify-items: end; gap: 2px; }.goal-step-effort strong { color: #f2ca83; font: 12px "IBM Plex Mono", Consolas, monospace; }.goal-step-effort small { color: #8e9d92; font-size: 7px; }.goal-step-row > button { min-height: 26px; border: 1px solid rgba(103,223,244,.3); background: rgba(9,38,48,.74); color: #a8e4e6; font-size: 8px; cursor: pointer; }.goal-step-row.is-done > button { border-color: rgba(127,224,163,.34); color: #a7e4ba; }.goal-step-row.is-pending > button { border-color: rgba(242,190,114,.3); background: rgba(83,58,27,.4); color: #e8c987; }
.goal-route-footer { display: flex; align-items: center; gap: 8px; padding-top: 7px; border-top: 1px solid rgba(112,170,180,.18); color: #8fa8a2; font-size: 8px; }.goal-route-footer span { display: inline-flex; align-items: center; gap: 4px; }.goal-route-footer i { width: 7px; height: 7px; border-radius: 50%; background: #788b8c; }.goal-route-footer i.is-done { background: #7fe0a3; }.goal-route-footer i.is-active { background: #67dff4; }.goal-route-footer i.is-pending { border: 1px dashed #f2be72; background: transparent; }.goal-route-footer b { margin-left: auto; color: #e4c68d; font: 9px "IBM Plex Mono", Consolas, monospace; }
.talent-page-sidebar { gap: 10px; }.talent-page-identity b { font-size: 13px; }.talent-page-identity small { font-size: 9px; }.talent-page-identity span, .talent-page-points small { font-size: 9px; }.talent-page-points strong { font-size: 24px; }.talent-page-points span { font-size: 9px; }.talent-page-counts b { font-size: 15px; }.talent-page-counts small { font-size: 8px; }.talent-page-actions button { min-height: 30px; font-size: 9px; }.talent-page-hint { font-size: 9px; }
.game-inspector-header h2 { font-size: 17px; }.game-inspector-header > div > span { font-size: 8px; }.game-inspector-header small { font-size: 9px; }.inspector-stats b { font-size: 17px; }.inspector-stats small { font-size: 8px; }.game-inspector-brief { font-size: 10px; }.game-quest strong { font-size: 11px; }.game-quest > small { font-size: 9px; }.game-market strong { font-size: 17px; }.game-market small { font-size: 9px; }
@media (max-width: 1180px) { .talent-category-bar .game-branch-tabs b { font-size: 10px; }.talent-category-bar .game-branch-tabs small { font-size: 8px; }.talent-category-bar .game-branch-tabs button { padding-inline: 5px; }.goal-step-row { grid-template-columns: 25px 43px minmax(0,1fr) 40px 53px; gap: 4px; }.goal-step-content b { font-size: 10px; } }
@media (max-width: 900px) { .talent-category-bar .game-branch-tabs { grid-template-columns: repeat(5, minmax(0,1fr)); }.talent-page-board.goal-route-board { min-height: 520px; } }
@media (max-width: 560px) { .talent-category-heading span { font-size: 12px; }.talent-category-heading small { font-size: 8px; }.talent-category-bar .game-branch-tabs { grid-template-columns: repeat(3, minmax(0,1fr)); }.talent-category-bar .game-branch-tabs button { grid-template-columns: 20px minmax(0,1fr); min-height: 39px; padding: 5px 4px; }.talent-category-bar .game-branch-tabs b { font-size: 9px; }.talent-category-bar .game-branch-tabs small { font-size: 7px; }.goal-hero h2 { font-size: 17px; }.goal-hero-stats strong { font-size: 15px; }.goal-route-heading span { font-size: 12px; }.goal-route-heading small { font-size: 8px; }.goal-step-row { grid-template-columns: 24px 38px minmax(0,1fr) 37px 48px; min-height: 54px; padding: 4px; }.goal-step-type { font-size: 8px; }.goal-step-type small, .goal-step-effort small { font-size: 6px; }.goal-step-content b { font-size: 9px; }.goal-step-content small { font-size: 7px; }.goal-step-effort strong { font-size: 10px; }.goal-step-row > button { font-size: 7px; }.goal-route-footer { font-size: 7px; }.goal-route-footer b { font-size: 8px; } }
/* Keep the goal route readable when the inspector shares the right half of the page. */
.talent-game-layout { grid-template-columns: 82px minmax(0, 1fr) 165px; }
.talent-page-identity { grid-template-columns: 1fr; justify-items: center; text-align: center; }.talent-page-identity b { overflow: visible; white-space: normal; }.talent-page-identity small { white-space: normal; }
.goal-step-row { min-height: 66px; }.goal-step-content b { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.goal-step-content small { white-space: normal; line-height: 1.3; }
@media (max-width: 1180px) { .talent-game-layout { grid-template-columns: 78px minmax(0, 1fr) 160px; }.goal-step-row { grid-template-columns: 25px 42px minmax(0,1fr) 38px 50px; min-height: 66px; }.goal-step-content b { font-size: 10px; } }
@media (max-width: 560px) { .talent-game-layout { grid-template-columns: 1fr; }.goal-step-row { min-height: 62px; }.goal-step-content b { font-size: 9px; }.goal-step-content small { font-size: 7px; } }
/* Three-state knowledge route: the left side is the clickable map, the right side is context. */
.talent-category-heading { align-items: center; }
.talent-category-heading > div:first-child { display: grid; gap: 3px; min-width: 0; }
.talent-category-heading > div:first-child small { display: block; }
.talent-category-meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; color: #829d98; font: 8px "IBM Plex Mono", Consolas, monospace; }
.talent-category-meta > b { overflow: hidden; color: #c0d2cc; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.demo-data-badge, .real-data-badge { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 5px 7px; border: 1px solid rgba(242,190,114,.62); background: rgba(93,59,24,.33); color: #ffe0a0; font: 8px "IBM Plex Mono", Consolas, monospace; white-space: nowrap; }
.demo-data-badge i { padding: 1px 3px; border: 1px solid rgba(242,190,114,.58); color: #f2be72; font-size: 7px; font-style: normal; letter-spacing: .08em; }
.real-data-badge { border-color: rgba(127,224,163,.35); background: rgba(24,74,55,.18); color: #a9e3bb; }
.talent-game-layout { grid-template-columns: minmax(0, 1.08fr) minmax(270px, .72fr); align-items: stretch; gap: 10px; }
.knowledge-route-panel, .knowledge-inspector { min-width: 0; min-height: 0; border: 1px solid rgba(111,188,195,.23); background: rgba(3,15,24,.78); box-shadow: inset 0 1px 0 rgba(241,255,255,.045); }
.knowledge-route-panel { display: flex; flex-direction: column; padding: 13px; overflow: auto; }
.knowledge-route-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(112,172,177,.18); }
.knowledge-route-header > div { min-width: 0; }
.knowledge-route-header span { display: block; color: var(--branch-color); font: 9px "IBM Plex Mono", Consolas, monospace; letter-spacing: .06em; }
.knowledge-route-header h2 { margin: 4px 0 0; color: #f0e5c6; font-size: 17px; font-weight: 600; }
.knowledge-route-header > b { display: grid; justify-items: end; flex: 0 0 auto; color: #ffe3aa; font: 24px "IBM Plex Mono", Consolas, monospace; line-height: 1; }
.knowledge-route-header > b small { margin-top: 4px; color: #8d9f96; font: 8px/1.2 "IBM Plex Mono", Consolas, monospace; }
.knowledge-state-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 8px; flex: 1 1 auto; min-height: 0; padding-top: 10px; }
.knowledge-state-group { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 9px; border: 1px solid rgba(119,179,181,.2); background: rgba(5,21,29,.66); }
.knowledge-state-group::after { content: ""; position: absolute; top: 50%; right: -9px; width: 8px; border-top: 1px solid rgba(126,174,164,.34); }
.knowledge-state-group:last-child::after { display: none; }
.knowledge-state-group.state-mastered { border-color: rgba(255,179,107,.4); background: linear-gradient(180deg, rgba(97,58,27,.29), rgba(5,21,29,.66)); }
.knowledge-state-group.state-current { border-color: rgba(242,190,114,.62); background: linear-gradient(180deg, rgba(103,69,27,.34), rgba(5,21,29,.66)); }
.knowledge-state-group.state-future { border-color: rgba(127,224,163,.4); background: linear-gradient(180deg, rgba(32,88,59,.24), rgba(5,21,29,.66)); }
.knowledge-state-group > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; padding-bottom: 8px; border-bottom: 1px solid rgba(129,176,170,.18); }
.knowledge-state-group > header > div { display: grid; gap: 3px; min-width: 0; }
.knowledge-state-group > header span { color: #f3ead0; font-size: 12px; font-weight: 600; }
.knowledge-state-group > header small { color: #91a59c; font-size: 8px; line-height: 1.25; }
.knowledge-state-group > header > b { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: #ffb36b; font: 11px "IBM Plex Mono", Consolas, monospace; }
.knowledge-state-group.state-current > header > b { color: #f2be72; }
.knowledge-state-group.state-future > header > b { color: #7fe0a3; }
.knowledge-tag-list { display: grid; gap: 6px; align-content: start; padding-top: 8px; }
.knowledge-tag { position: relative; display: grid; grid-template-columns: 23px minmax(0,1fr) auto; align-items: center; gap: 7px; width: 100%; min-width: 0; min-height: 55px; padding: 7px; border: 1px solid color-mix(in srgb, var(--tag-color), transparent 42%); background: rgba(4,17,26,.72); color: #dceae6; text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.knowledge-tag:hover, .knowledge-tag:focus-visible { transform: translateY(-1px); border-color: var(--tag-color); outline: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--tag-color), transparent 62%), 0 0 15px color-mix(in srgb, var(--tag-color), transparent 86%); }
.knowledge-tag-icon { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; }
.knowledge-tag-copy { display: grid; min-width: 0; gap: 3px; }
.knowledge-tag-copy b { overflow: hidden; color: #edf4ee; font-size: 11px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-tag-copy small { overflow: hidden; color: #8fa9a4; font-size: 8px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-tag > em { color: currentColor; font: 10px "IBM Plex Mono", Consolas, monospace; font-style: normal; white-space: nowrap; }
.knowledge-tag.state-mastered { --tag-color: #ffb36b; color: #ffb36b; }
.knowledge-tag.state-current { --tag-color: #f2be72; color: #f2be72; animation: knowledge-pulse 2.2s ease-in-out infinite; }
.knowledge-tag.state-future { --tag-color: #7fe0a3; color: #7fe0a3; border-style: dashed; }
.knowledge-tag.is-selected { background: color-mix(in srgb, var(--tag-color), transparent 84%); box-shadow: 0 0 0 1px var(--tag-color), 0 0 17px color-mix(in srgb, var(--tag-color), transparent 78%); }
.knowledge-tag.is-selected .knowledge-tag-copy b { color: #fff4ce; }
.knowledge-empty { margin: 4px 0; color: #78908c; font-size: 9px; }
.knowledge-route-footer { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 10px; margin-top: 10px; border-top: 1px solid rgba(112,172,177,.18); color: #91a6a0; font-size: 8px; }
.knowledge-route-footer span { display: inline-flex; align-items: center; gap: 5px; }
.knowledge-route-footer i { width: 7px; height: 7px; border-radius: 50%; background: #ffb36b; box-shadow: 0 0 7px currentColor; }.knowledge-route-footer i.is-current { background: #f2be72; }.knowledge-route-footer i.is-future { background: #7fe0a3; }
.knowledge-inspector { display: flex; flex-direction: column; padding: 14px; overflow: auto; }
.knowledge-inspector.state-mastered { border-color: rgba(255,179,107,.4); }.knowledge-inspector.state-current { border-color: rgba(242,190,114,.55); }.knowledge-inspector.state-future { border-color: rgba(127,224,163,.4); }
.knowledge-inspector-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; padding-bottom: 11px; border-bottom: 1px solid rgba(112,172,177,.18); }
.knowledge-detail-status { display: flex; align-items: center; gap: 8px; min-width: 0; }
.knowledge-detail-icon { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: #ffb36b; font-size: 16px; }.knowledge-inspector.state-current .knowledge-detail-icon { color: #f2be72; }.knowledge-inspector.state-future .knowledge-detail-icon { color: #7fe0a3; }
.knowledge-detail-status > div { min-width: 0; }.knowledge-detail-status span { display: block; color: currentColor; font: 8px "IBM Plex Mono", Consolas, monospace; }.knowledge-detail-status h2 { overflow: hidden; margin: 4px 0 0; color: #f3ead1; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }.knowledge-detail-status small { display: block; overflow: hidden; margin-top: 3px; color: #8fa9a4; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-inspector-header > b { color: #ffe0a4; font: 18px "IBM Plex Mono", Consolas, monospace; white-space: nowrap; }.knowledge-inspector-note { margin: 11px 0 0; color: #9bafa8; font-size: 10px; line-height: 1.45; }
.knowledge-detail-metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; margin-top: 11px; }.knowledge-detail-metrics > div, .knowledge-future-stats > div { display: grid; gap: 4px; min-width: 0; padding: 8px 6px; border: 1px solid rgba(126,174,164,.18); background: rgba(4,17,26,.58); }.knowledge-detail-metrics strong, .knowledge-future-stats strong { overflow: hidden; color: #f2d093; font: 11px "IBM Plex Mono", Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }.knowledge-detail-metrics small, .knowledge-future-stats small { color: #829a95; font-size: 8px; }
.knowledge-detail-block { display: grid; gap: 5px; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(112,172,177,.16); }.knowledge-detail-block > span, .knowledge-current-goal > span { color: #c4a05e; font: 8px "IBM Plex Mono", Consolas, monospace; }.knowledge-detail-block p { margin: 0; color: #c1d0cb; font-size: 10px; line-height: 1.55; }
.knowledge-current-goal { display: grid; gap: 7px; margin-top: 12px; padding: 10px; border: 1px solid rgba(242,190,114,.35); background: rgba(96,64,27,.18); }.knowledge-current-goal strong { color: #ffe5af; font-size: 12px; line-height: 1.4; }.knowledge-progress { height: 6px; background: rgba(147,143,120,.23); }.knowledge-progress i { display: block; width: var(--progress); height: 100%; background: linear-gradient(90deg, #f2be72, #ffda91); box-shadow: 0 0 10px rgba(242,190,114,.48); }.knowledge-current-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }.knowledge-current-stats b { display: grid; gap: 3px; color: #ffe2a4; font: 12px "IBM Plex Mono", Consolas, monospace; }.knowledge-current-stats small { color: #9d8d6f; font: 8px sans-serif; }
.knowledge-step-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }.knowledge-step-list li { display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: start; gap: 7px; color: #c7d6d1; font-size: 10px; line-height: 1.45; }.knowledge-step-list li b { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(242,190,114,.4); color: #f2be72; font: 9px "IBM Plex Mono", Consolas, monospace; }
.knowledge-future-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; margin-top: 11px; }.knowledge-why { border-top-color: rgba(127,224,163,.24); }.knowledge-gain { border-top-color: rgba(103,223,244,.24); }.knowledge-inspector-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: auto; padding-top: 14px; }.knowledge-inspector-actions button { min-height: 32px; border: 1px solid rgba(103,228,214,.3); background: rgba(6,28,37,.72); color: #a9ded6; font-size: 9px; cursor: pointer; }.knowledge-inspector-actions button:last-child { border-color: rgba(242,190,114,.4); background: rgba(96,64,27,.2); color: #f3d297; }
@keyframes knowledge-pulse { 0%, 100% { box-shadow: 0 0 7px rgba(242,190,114,.2); } 50% { box-shadow: 0 0 19px rgba(242,190,114,.68); } }
@media (prefers-reduced-motion: reduce) { .knowledge-tag.state-current { animation: none; } }
@media (max-width: 1180px) { .talent-game-layout { grid-template-columns: minmax(0, 1fr) minmax(250px, .72fr); }.knowledge-state-groups { gap: 6px; }.knowledge-state-group { padding: 7px; }.knowledge-tag { grid-template-columns: 20px minmax(0,1fr); min-height: 52px; padding: 6px; }.knowledge-tag > em { grid-column: 2; font-size: 9px; }.knowledge-tag-icon { width: 19px; height: 19px; font-size: 10px; }.knowledge-tag-copy b { font-size: 10px; }.knowledge-tag-copy small { font-size: 7px; } }
@media (max-width: 900px) { .talent-category-heading { align-items: flex-start; flex-direction: column; }.talent-category-meta { justify-content: flex-start; flex-wrap: wrap; }.talent-game-layout { display: flex; flex-direction: column; }.knowledge-route-panel { min-height: 0; overflow: visible; }.knowledge-inspector { min-height: 420px; overflow: visible; }.knowledge-state-groups { grid-template-columns: 1fr; }.knowledge-state-group::after { top: auto; right: auto; bottom: -8px; left: 50%; width: 0; height: 7px; border-top: 0; border-left: 1px solid rgba(126,174,164,.34); }.knowledge-state-group:last-child::after { display: none; } }
@media (max-width: 560px) { .talent-category-meta > b { max-width: 100%; }.knowledge-route-panel, .knowledge-inspector { padding: 10px; }.knowledge-route-header h2 { font-size: 15px; }.knowledge-route-header > b { font-size: 21px; }.knowledge-state-group > header span { font-size: 11px; }.knowledge-inspector-header > b { font-size: 16px; }.knowledge-detail-status h2 { font-size: 16px; }.knowledge-detail-metrics strong, .knowledge-future-stats strong { font-size: 10px; } }
/* V1.0.7 public-release empty state and accessibility floor. */
.talent-screen button:focus-visible, .talent-screen a:focus-visible, .talent-screen iframe:focus-visible { outline: 2px solid #f2be72; outline-offset: 3px; }
.talent-empty-workspace { position: relative; z-index: 1; min-height: calc(100dvh - 84px); display: grid; place-items: center; padding: 32px 20px 48px; }
.talent-empty-core { width: min(760px, 100%); display: grid; justify-items: center; gap: 12px; padding: 42px 38px; border: 1px solid rgba(111,188,195,.24); border-radius: 8px; background: radial-gradient(circle at 50% 26%, rgba(103,228,214,.1), transparent 34%), rgba(4,17,27,.82); box-shadow: inset 0 1px 0 rgba(241,255,255,.07), 0 26px 70px rgba(0,0,0,.28); text-align: center; }
.talent-empty-symbol { position: relative; display: grid; width: 116px; height: 116px; place-items: center; margin-bottom: 5px; }
.talent-empty-symbol::before, .talent-empty-symbol::after, .talent-empty-symbol i { content: ""; position: absolute; inset: 0; border: 1px solid rgba(103,228,214,.28); border-radius: 50%; }
.talent-empty-symbol::after { inset: 15px; border-color: rgba(242,190,114,.28); }
.talent-empty-symbol i { inset: 30px; box-shadow: 0 0 36px rgba(103,228,214,.16); }
.talent-empty-symbol span { position: relative; z-index: 1; display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: #dffaf5; color: #176e76; font-size: 19px; box-shadow: 0 0 30px rgba(103,228,214,.56); }
.talent-empty-core > span { color: #73d9d4; font: 11px/1.4 "IBM Plex Mono", Consolas, monospace; }
.talent-empty-core h2 { margin: 0; color: #f4e4bf; font-size: 30px; font-weight: 600; }
.talent-empty-core > p { max-width: 610px; margin: 0; color: #a8bdb8; font-size: 14px; line-height: 1.7; }
.talent-empty-branches { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); width: 100%; gap: 8px; margin-top: 12px; }
.talent-empty-branches span { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 7px; min-height: 46px; padding: 0 11px; border: 1px dashed color-mix(in srgb, var(--branch-color), transparent 58%); color: #c3d4cf; font-size: 12px; text-align: left; }
.talent-empty-branches i { width: 8px; height: 8px; border-radius: 50%; background: var(--branch-color); box-shadow: 0 0 9px var(--branch-color); }
.talent-empty-branches b { color: #78928d; font: 12px "IBM Plex Mono", Consolas, monospace; }
.talent-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.talent-empty-actions a { display: inline-flex; min-height: 46px; align-items: center; padding: 0 18px; border: 1px solid rgba(103,228,214,.32); border-radius: 7px; background: rgba(8,32,41,.72); color: #bde8e1; font-size: 13px; text-decoration: none; }
.talent-empty-actions a.is-primary { border-color: rgba(242,190,114,.52); background: rgba(100,64,25,.28); color: #ffe3ac; }
.talent-empty-core > small { color: #829b96; font-size: 12px; line-height: 1.5; }
@media (max-width: 560px) {
.talent-header { grid-template-columns: auto minmax(0,1fr); gap: 10px; min-height: 112px; padding: 10px 12px; }
.talent-brand { min-width: 44px; min-height: 44px; justify-content: center; }
.talent-brand span { width: 44px; height: 44px; }
.talent-brand b, .privacy-chip { display: none; }
.talent-title h1 { font-size: 22px; }
.talent-title p { display: block; margin: 4px 0 0; font-size: 12px; line-height: 1.35; }
.talent-header-actions { grid-column: 1 / -1; justify-content: stretch; }
.talent-header-actions a, .talent-header-actions button { display: inline-flex; flex: 1 1 0; justify-content: center; min-height: 44px; padding: 0 8px; font-size: 11px; }
.talent-workspace { height: auto; min-height: calc(100dvh - 112px); }
.talent-spine-stage { min-height: 470px; }
.spine-branch-rail button { font-size: 11px; letter-spacing: 0; }
.spine-domain-label { min-height: 44px; padding: 8px 10px; font-size: 11px; }
.spine-controls { z-index: 7; width: 44px; }
.spine-controls button { width: 44px; height: 44px; font-size: 18px; }
.spine-branch-rail button, .talent-category-bar .game-branch-tabs button,
.knowledge-tag, .knowledge-inspector-actions button, .goal-step-row > button,
.talent-page-actions button, .game-inspector-actions button { min-height: 44px; }
.spine-branch-rail button, .talent-category-bar .game-branch-tabs b,
.talent-category-bar .game-branch-tabs small, .knowledge-tag-copy b,
.knowledge-tag-copy small, .knowledge-tag > em, .knowledge-detail-status span,
.knowledge-detail-status small, .knowledge-inspector-note, .knowledge-detail-metrics small,
.knowledge-future-stats small, .knowledge-detail-block p, .knowledge-step-list li,
.knowledge-inspector-actions button, .goal-step-content b, .goal-step-content small,
.goal-step-type, .goal-step-type small, .goal-step-effort small, .goal-step-row > button,
.goal-route-footer, .goal-route-footer b { font-size: 11px; letter-spacing: 0; }
.talent-category-bar .game-branch-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); }
.talent-empty-workspace { min-height: calc(100dvh - 112px); padding: 18px 12px 28px; }
.talent-empty-core { gap: 10px; padding: 26px 14px; }
.talent-empty-symbol { width: 94px; height: 94px; }
.talent-empty-core h2 { font-size: 24px; }
.talent-empty-core > p { font-size: 13px; }
.talent-empty-branches { grid-template-columns: 1fr 1fr; }
.talent-empty-branches span:last-child { grid-column: 1 / -1; }
.talent-empty-actions { width: 100%; }
.talent-empty-actions a { flex: 1 1 100%; justify-content: center; }
.game-goal-bar > button { width: 44px; min-width: 44px; height: 44px; }
.goals-card > header > button, .milestones-card > header > button { min-height: 44px; padding-inline: 10px; }
.goal-route-detail li > button { min-width: 44px; min-height: 44px; }
}
/* V1.0.7 classic talent board: control rail, three-stage skill盤, and selected-node context. */
.talent-classic-layout { display: grid; grid-template-columns: 82px minmax(0, 1fr) 165px; align-items: stretch; gap: 7px; min-height: 442px; }
.talent-classic-layout > * { min-width: 0; }
.talent-classic-layout .talent-page-sidebar { min-height: 0; }
.talent-classic-layout .talent-page-board { display: flex; min-height: 0; flex-direction: column; padding: 7px; }
.talent-classic-layout .game-inspector { min-height: 0; }
.talent-level-strip { flex: 0 0 auto; }
.talent-level-label { margin-right: 4px; color: #e2c487; font-size: 8px; white-space: nowrap; }
.talent-knowledge-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(270px, .72fr); align-items: stretch; gap: 10px; }
.talent-knowledge-layout > * { min-width: 0; }
.goal-empty { display: grid; gap: 5px; margin-top: 12px; padding: 13px; border: 1px dashed rgba(242,190,114,.33); background: rgba(79,53,25,.16); }
.goal-empty b { color: #f0dfb7; font-size: 12px; }
.goal-empty small { color: #8fa59f; font-size: 9px; line-height: 1.45; }
@media (max-width: 1180px) {
.talent-classic-layout { grid-template-columns: 78px minmax(0, 1fr) 160px; }
.talent-knowledge-layout { grid-template-columns: minmax(0, 1fr) minmax(250px, .72fr); }
}
@media (max-width: 900px) {
.talent-classic-layout { display: flex; flex-direction: column; min-height: 0; }
.talent-classic-layout .talent-page-sidebar { order: 0; }
.talent-classic-layout .talent-page-board { order: 1; min-height: 390px; }
.talent-classic-layout .game-inspector { order: 2; min-height: 420px; }
.talent-knowledge-layout { display: flex; flex-direction: column; }
}
@media (max-width: 560px) {
.talent-level-strip { min-height: 52px; padding: 4px; }
.talent-level-label { font-size: 11px; }
.talent-level-strip button { flex-basis: 44px; width: 44px; height: 44px; min-height: 44px; font-size: 13px; }
.talent-level-strip button.is-add { flex-basis: 44px; width: 44px; font-size: 19px; }
.talent-classic-layout .talent-page-board { min-height: 420px; }
}