.career-chart {
  --career-paper: #1b241f; --career-card: #253029; --career-line: #516053; --career-gold: #d7ba7c;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--career-paper); color: var(--text); min-width: 0;
}
:root[data-theme="light"] .career-chart { --career-paper: #f0eee5; --career-card: #fffdf6; --career-line: #a5ac9e; --career-gold: #80602e; }
.career-banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; background: linear-gradient(110deg, #c7a5630d, transparent 75%); }
.career-eyebrow { display: block; font: 600 9px/1.5 "Segoe UI", sans-serif; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.career-banner .career-eyebrow { color: var(--career-gold); }
.career-banner .career-title { margin: 5px 0 8px; padding: 0; border: 0; font: 500 27px/1.2 Georgia, serif; letter-spacing: -.02em; }
.career-subtitle { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; }
.career-seal { display: grid; place-items: center; width: 50px; height: 50px; flex-shrink: 0; border: 1px solid var(--career-gold); border-radius: 50%; color: var(--career-gold); font-size: 32px; }
.career-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px 15px; }
.career-stages, .career-view-tools { display: flex; gap: 5px; align-items: center; }
.career-chart button, .career-chart select { font: inherit; color: var(--text); cursor: pointer; }
.career-stages button, .career-view-tools button { border: 1px solid var(--border); background: var(--surface); border-radius: 5px; padding: 7px 10px; height: auto; min-height: 30px; font-size: 11px; white-space: nowrap; }
.career-stages button span { font-size: 9px; color: var(--career-gold); margin-right: 5px; }
.career-chart button:hover { background: var(--hover); }
.career-chart :is(button,select,input,textarea):focus-visible, .career-viewport:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.career-view-tools .career-zoom-out, .career-view-tools .career-zoom-in { padding: 4px; width: 28px; font-size: 17px; }
.career-zoom-label { font-size: 10px; color: var(--muted); min-width: 28px; text-align: center; }
.career-view-tools .career-expand { margin-left: 5px; }
.career-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 9px 20px; font-size: 9px; color: var(--muted); }
.career-legend > span, .career-legend label { display: inline-flex; align-items: center; gap: 6px; }
.career-legend input { accent-color: var(--accent); width: 11px !important; height: 11px; margin: 0; }
.career-solid-key, .career-dash-key { display: inline-block; width: 20px; border-top: 1px solid var(--career-gold); }
.career-dash-key { border-top-style: dashed; border-color: var(--muted); }
.career-gesture { margin-left: auto; }
.career-viewport { width: 100%; overflow: auto; max-height: 540px; scrollbar-color: var(--border) var(--career-paper); scrollbar-width: thin; overscroll-behavior: contain; cursor: grab; background-image: radial-gradient(var(--border-soft) .7px, transparent .7px); background-size: 18px 18px; }
.career-viewport.is-panning { cursor: grabbing; user-select: none; }
.career-scene-size { position: relative; }
.career-canvas { position: absolute; left: 0; top: 0; transform-origin: top left; }
.career-phase { position: absolute; top: 12px; bottom: 16px; border: 1px solid var(--border-soft); border-radius: 10px; background: #9eb59203; padding: 12px 15px; pointer-events: none; }
.career-phase strong { color: var(--muted); font-size: 12px; font-weight: 500; }
.career-phase span { color: var(--subtle); font-size: 10px; margin-left: 16px; }
.career-column-grade { position: absolute; top: 65px; font-size: 9px; letter-spacing: .12em; font-weight: 600; color: var(--subtle); }
.career-edges { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.career-edge { fill: none; stroke: var(--career-line); stroke-width: 1.3; opacity: .65; }
.career-edge.is-lit { stroke: var(--career-gold); stroke-width: 2; opacity: 1; }
.career-edge-transfer { stroke-dasharray: 3 4; opacity: .7; }
.career-hide-transfers .career-edge-transfer { display: none; }
.career-chart .career-card { position: absolute; display: flex; align-items: center; gap: 9px; width: 176px; height: 76px; margin: 0; padding: 10px 11px; border: 1px solid var(--border); border-left: 3px solid var(--career-ink); border-radius: 8px; background: var(--career-card); text-align: left; box-shadow: 0 3px 6px var(--shadow-soft); }
.career-card strong { font-size: 12px; line-height: 1.35; font-weight: 500; overflow-wrap: anywhere; }
.career-card-grade { flex-shrink: 0; width: 24px; color: var(--career-ink); font-size: 10px; font-weight: 600; }
:root[data-theme="light"] .career-card-grade, :root[data-theme="light"] .career-info-grade { color: color-mix(in srgb, var(--career-ink) 55%, #18221b); }
.career-chart .career-card[aria-pressed="true"] { border-color: var(--career-gold); background: var(--active); box-shadow: 0 0 0 2px color-mix(in srgb, var(--career-gold) 20%, transparent); }
.career-junction { position: absolute; display: grid; place-items: center; border: 1px solid var(--career-gold); border-radius: 50%; background: var(--career-paper); color: var(--career-gold); width: 64px; height: 64px; font-size: 26px; }
.career-junction span { position: absolute; top: 76px; width: 100px; white-space: pre-line; text-align: center; font: 10px/1.5 "Segoe UI", sans-serif; color: var(--muted); }
.career-info { border-top: 1px solid var(--border); background: var(--surface); padding: 17px 22px 16px; }
.career-info-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.career-info-grade { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; font-size: 17px; color: var(--career-ink); background: var(--inset); }
.career-info h3 { font: 500 20px/1.3 Georgia, serif; margin: 2px 0 0; }
.career-info-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.career-perk h4 { font-size: 12px; margin: 4px 0 7px; }
.career-perk p, .career-progression p { font-size: 12px; line-height: 1.6; margin: 0; color: var(--muted); }
.career-progression { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; }
.career-progression > .career-eyebrow { width: 100%; margin-bottom: 4px; }
.career-chart .career-link { height: auto; font-size: 10px; line-height: 1.4; padding: 5px 7px; text-align: left; background: var(--inset); border: 1px solid var(--border); border-radius: 5px; }
.career-transfer-picker { display: grid; gap: 5px; width: 100%; margin-top: 6px; color: var(--muted); font-size: 10px; }
.career-chart .career-transfer-picker select { width: 100%; padding: 5px; font-size: 11px; border-radius: 5px; border: 1px solid var(--border); background: var(--input-background); }
.career-specialty { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 10px; line-height: 1.5; color: var(--muted); }
.career-footnote { padding: 0 22px 14px; margin: 0; background: var(--surface); color: var(--subtle); font-size: 10px; line-height: 1.5; }
.career-tooltip { position: fixed; z-index: 20; width: min(310px, calc(100vw - 24px)); padding: 14px 16px; background: var(--surface); color: var(--text); border: 1px solid var(--focus); border-radius: 8px; box-shadow: 0 8px 30px var(--shadow-strong); pointer-events: none; }
.career-tooltip strong, .career-tooltip b { display: block; }
.career-tooltip strong { font: 500 18px/1.4 Georgia, serif; margin: 5px 0 12px; }
.career-tooltip b { font-size: 12px; }
.career-tooltip p { margin: 5px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.career-tip-grade { font-size: 9px; color: var(--accent); letter-spacing: .08em; text-transform: uppercase; }
.career-dialog { width: min(1600px, calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); overflow-y: auto; }
.career-dialog::backdrop { background: #080d0bd9; backdrop-filter: blur(4px); }
.career-dialog .career-chart { border: 0; }
.career-dialog .career-viewport { max-height: 45dvh; }
.career-dialog .career-info { max-height: 32dvh; overflow-y: auto; }
.career-edit-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.career-edit-form label { display: grid; gap: 6px; font-size: 10px; line-height: 1.5; color: var(--muted); }
.career-edit-form label:has(textarea) { grid-column: 1 / -1; }
.career-edit-form :is(input,textarea) { width: 100%; padding: 7px; border: 1px solid var(--border); border-radius: 5px; background: var(--input-background); color: var(--text); font: 12px/1.5 "Segoe UI", sans-serif; }
.career-chart .career-apply { width: fit-content; height: auto; padding: 8px 14px; border: 0; border-radius: 5px; font-size: 12px; color: var(--selected-text); background: var(--selected-background); }
.career-edit-hint { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
#notes-career-extra:empty { display: none; }
.sidebar .career-banner { padding: 15px; }
.sidebar .career-banner .career-title { font-size: 22px; }
.sidebar .career-seal, .sidebar .career-gesture { display: none; }
.sidebar .career-controls { padding: 0 10px 12px; gap: 8px; }
.sidebar .career-stages { flex-wrap: wrap; }
.sidebar .career-stages button { padding: 6px; font-size: 10px; }
.sidebar .career-stages button span { display: none; }
.sidebar .career-legend { padding: 8px 12px; gap: 8px; }
.sidebar .career-info { padding: 15px; }
.sidebar .career-info-body { grid-template-columns: 1fr; gap: 12px; }
.sidebar .career-edit-form { grid-template-columns: 1fr; }
.player-career-panel { min-width: 0; }
.player-career-panel .notes-header h1 { font-size: 21px; }
#career-status { font-size: 12px; line-height: 1.6; color: var(--muted); }
.career-popout .app-shell { display: block; overflow: auto; background: var(--surface); }
.career-popout .player-career-panel { width: min(1500px, 100%); margin: 0 auto; padding: 28px 32px; }
.career-popout .notes-header h1 { font-size: 27px; }
@media (max-width: 700px) {
  .career-popout .player-career-panel { padding: 20px 12px; }
  .career-banner { padding: 18px; }
  .career-banner .career-title { font-size: 23px; }
  .career-seal, .career-gesture { display: none; }
  .career-info-body { grid-template-columns: 1fr; gap: 15px; }
  .career-controls { padding: 0 12px 12px; }
  .career-stages button { font-size: 10px; padding: 7px; }
  .career-legend { padding: 8px 12px; gap: 10px; }
  .career-edit-form { grid-template-columns: 1fr; }
  .career-dialog { width: calc(100vw - 16px); }
}
.career-chart-player .career-banner { padding: 18px 24px; border-bottom: 1px solid var(--border-soft); }
.career-chart-player .career-banner .career-title { margin: 0; }
.career-chart-player .career-card { -webkit-tap-highlight-color: transparent; }
.sidebar .career-chart-player .career-banner { padding: 15px; }
.career-tooltip-player { pointer-events: auto; max-height: calc(100dvh - 24px); overflow-y: auto; }
.career-tip-specialty { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.career-detail-dialog { position: fixed; width: min(440px, calc(100vw - 24px)); max-width: none; max-height: min(80dvh, 620px); margin: auto auto 12px; padding: 0; overflow-y: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 8px 32px var(--shadow-strong); }
.career-detail-dialog::backdrop { background: #080d0bb3; }
.career-detail-content { padding: 24px; }
.career-detail-content > .career-tip-grade, .career-detail-content h3 { padding-right: 44px; }
.career-detail-content h3 { font: 500 23px/1.3 Georgia, serif; margin: 8px 0 22px; }
.career-detail-content h4, .career-detail-content b { display: block; font-size: 13px; margin-bottom: 8px; }
.career-detail-content p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }
.career-detail-dialog .career-detail-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--inset); color: var(--text); font-size: 25px; cursor: pointer; }
.career-detail-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }