/* Two screens: choose an order, then assemble and deliver. */
:root { --page:#f4f5ef; --ink:#243e36; --line:#dfe6dc; --gold:#bd8421; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.topbar { height:76px; padding:0 4%; background:#fbfcf7; }
.brand { font-size:16px; }
.brand small { font-size:9px; }
.hud-actions { display:flex; align-items:center; gap:10px; }
.coin { display:inline-grid; place-items:center; flex-shrink:0; width:24px; height:24px; border-radius:50%; border:2px solid #d7a647; color:#a76e13; background:#f6d580; box-shadow:inset 0 0 0 2px #ffebaf,0 2px 0 #d9b15d; font:600 14px var(--sans); }
.wallet { display:flex; gap:10px; align-items:center; min-width:110px; padding:9px 16px; background:#fcf3d9; border:1px solid #ead7a5; border-radius:30px; }
.wallet strong { font:600 22px var(--mono); color:#8f651c; }
.hud-button { height:42px; min-width:42px; display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid #dfe6d8; border-radius:12px; background:#fff; font-size:12px; }
.hud-button:hover { background:#edf3e7; }
.research-button { padding:0 12px; }
.research-button>span:first-child { font-size:24px; color:#6a8660; }
.research-button b { background:#e8efdd; color:#567143; border-radius:50%; padding:3px 6px; font:12px var(--mono); }
.icon-button { font-size:19px; color:#6f8174; }
main { max-width:1450px; padding:0 4% 24px; }
#level-screen { padding:60px 0 10px; }
.level-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:38px; }
.level-intro .eyebrow { color:#8a9b7d; letter-spacing:2.5px; font-size:10px; }
.level-intro h1 { margin:12px 0; font-size:34px; font-weight:650; letter-spacing:-.5px; }
.level-intro p { margin:0; font-size:13px; color:#7e8b7c; }
.completion-count { display:grid; grid-template-columns:auto auto; gap:3px 12px; align-items:center; padding:14px 20px; border:1px solid #dde5d5; border-radius:14px; background:#edf2e5; white-space:nowrap; }
.completion-count>span { grid-row:1/3; font-size:30px; color:#8ba377; }
.completion-count b { font:600 24px var(--mono); }
.completion-count small { color:#809175; font-size:11px; }
.level-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.level-card { position:relative; display:flex; flex-direction:column; align-items:stretch; text-align:left; min-width:0; border:1px solid #dce4d5; background:#fcfdf9; border-radius:18px; padding:18px 16px 0; overflow:hidden; transition:transform .2s,border-color .2s,box-shadow .2s; }
.level-card.available { border:2px solid #668c62; padding:17px 15px 0; box-shadow:0 6px 0 #dbe5d1,0 12px 30px #325b3d0c; }
.level-card.available:hover { transform:translateY(-5px); box-shadow:0 10px 0 #dbe5d1,0 18px 32px #325b3d14; }
.level-card.cleared { background:#eff5e9; }
.level-card.locked:disabled { opacity:1; cursor:default; background:#ecefe7; color:#82917d; }
.level-card-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.level-card-top>b { font:500 22px var(--mono); }
.level-card-top>span { color:#798a72; font-size:10px; }
.available .level-card-top>span { color:#52764a; }
.level-card>svg { width:100%; height:148px; margin:16px 0 8px; stroke:none; fill:none; }
.device-halo { fill:#edf3e4; }
.device-shape { fill:#d5e2c7; stroke:#67855d; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.device-shape path { fill:none; }
.locked .device-halo { fill:#e3e8dc; }
.locked .device-shape { fill:#d8dfcf; stroke:#a0ae95; }
.level-card h2 { font-size:16px; letter-spacing:0; line-height:1.5; color:inherit; }
.level-customer { margin-top:4px; font-size:11px; color:#8b9683; }
.level-specs { display:flex; justify-content:space-between; gap:6px; margin:19px 0 20px; font:11px var(--mono); color:#798c6e; }
.level-reward { display:flex; align-items:center; gap:7px; }
.level-reward strong { font:600 22px var(--mono); color:#927027; }
.level-reward small { font-size:9px; color:#8a917c; margin-left:auto; }
.locked .level-reward { opacity:.65; }
.level-reward .coin { width:21px; height:21px; font-size:11px; }
.level-cta { display:block; text-align:center; border-top:1px solid #e0e6d8; margin:22px -16px 0; padding:16px 8px; font-size:11px; color:#819174; background:#e8eddf; }
.available .level-cta { background:#63885c; border-color:#63885c; color:#fff; font-size:13px; font-weight:600; margin-right:-15px; margin-left:-15px; }
.cleared .level-cta { background:#e1ecd8; color:#5b7e4d; }
.map-caption { display:flex; justify-content:center; gap:30px; align-items:center; margin:35px 0 12px; color:#8b957f; font-size:11px; }
.map-caption>span { display:flex; align-items:center; gap:7px; }
.map-caption .coin { width:16px; height:16px; font-size:9px; border-width:1px; box-shadow:none; opacity:.8; }
.completed-banner { margin-top:30px; }
#play-screen { padding-top:18px; }
.play-heading { display:flex; align-items:center; gap:18px; margin-bottom:16px; min-height:58px; }
.back-button { border:1px solid #d9e2d1; border-radius:10px; background:#fbfcf7; padding:10px 12px; font-size:18px; color:#6a815c; display:flex; align-items:center; gap:7px; }
.back-button span { font-size:11px; }
.order-title { margin-right:auto; min-width:0; }
.order-title>span { font-size:10px; color:#819375; letter-spacing:.5px; }
.order-title h1 { margin:5px 0 0; font-size:21px; font-weight:650; }
.goal-badge { padding:7px 18px; border-right:1px solid #d8e2cf; text-align:right; }
.goal-badge span { display:block; font-size:10px; color:#7c8d70; }
.goal-badge strong { display:block; margin-top:4px; font:600 23px var(--mono); color:#537449; }
.bonus-button { border:1px solid #e8dbad; border-radius:10px; background:#fbf3dc; color:#a5873d; padding:11px 14px; font-size:12px; white-space:nowrap; }
.bonus-button.achieved { color:#4b7d4c; background:#e8f3df; border-color:#c2d9af; }
.game-layout { display:grid; grid-template-columns:minmax(0,1fr) 292px; gap:18px; align-items:stretch; }
.simulation-column { display:flex; flex-direction:column; }
.stage-panel { height:clamp(320px,44dvh,460px); background:#193e37; border-radius:15px 15px 0 0; }
.stage-heading { padding:16px 20px; font-size:10px; }
.stage-heading .stage-tool { font-size:11px; padding:6px 10px; cursor:pointer; }
.stage-ambient { top:67px; left:20px; }
.stage-ambient strong { font-size:17px; }
.stage-toolbar { top:67px; }
.stage-tool { font-size:11px; }
.stage-tool span { font-size:10px; }
.drop-prompt { top:28%; font-size:12px; padding:9px 14px; z-index:3; }
.stage-caption { bottom:44px; font-size:9px; }
.stage-legend { bottom:22px; font-size:9px; }
.thermal-scale { width:160px; right:20px; bottom:20px; }
.simulation-controls { padding:9px 16px; border-radius:0 0 12px 12px; min-height:49px; }
.play-button { font-size:11px; min-height:30px; }
.speed-control { gap:5px; }
.speed-control>span { display:inline; }
.speed-control button { font-size:11px; }
.reset-button { font-size:11px; min-height:30px; }
.assembly-strip { padding:10px 2px; min-height:43px; }
.strip-label,.empty-equipment { font-size:10px; }
.installed-pill { font-size:10px; border-radius:6px; padding:5px 7px; }
.installed-pill button { min-width:20px; min-height:20px; }
.acceptance { display:flex; align-items:center; gap:12px; padding:0 4px 0; }
.acceptance-ring { --progress:0%; width:52px; height:52px; border-radius:50%; background:conic-gradient(#6e9c60 var(--progress),#dce5d2 0); position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; }
.acceptance-ring:before { content:''; position:absolute; inset:4px; border-radius:50%; background:var(--page); }
.acceptance-ring>span,.acceptance-ring>small { z-index:1; }
.acceptance-ring>span { font:500 21px var(--mono); color:#729263; }
.acceptance-ring>small { font-size:8px; color:#8d9c80; }
.acceptance-ring.passed { background:#79a16b; }
.acceptance-copy { display:flex; flex-direction:column; gap:5px; }
.acceptance-copy>strong { font-size:13px; font-weight:550; }
.acceptance-copy>span { font-size:10px; color:#8b9980; }
.acceptance-copy b { font:500 12px var(--mono); color:#688252; }
#steady-verdict { color:#b18759; }
#steady-verdict.possible { color:#68935a; }
.parts-panel { padding:18px 14px 12px; display:flex; flex-direction:column; border-radius:15px; min-width:0; }
.parts-panel h2 { font-size:14px; }
.parts-tabs { margin:14px 0 10px; gap:4px; }
.parts-tabs button { padding:9px 3px; font-size:11px; border-radius:7px; }
.parts-tabs small { display:none; }
.parts-panel .parts-list { max-height:calc(clamp(320px,44dvh,460px) + 23px); display:flex; flex-direction:column; gap:7px; padding:2px; }
.parts-panel .part-card { display:grid; grid-template-columns:56px minmax(0,1fr); align-items:center; gap:10px; padding:10px 12px 10px 8px; min-height:80px; flex-shrink:0; }
.parts-panel .part-card>svg { width:56px; height:50px; }
.part-name { font-size:12px; line-height:1.5; }
.part-price { display:flex; align-items:center; gap:6px; margin-top:6px; font:500 13px var(--mono); color:#9c7934; }
.part-price .coin { width:15px; height:15px; font-size:8px; border-width:1px; box-shadow:inset 0 0 0 1px #ffebaf; }
.part-state { top:7px; right:8px; font-size:12px; }
.part-card.selected { background:#edf5e7; border-color:#8fab78; box-shadow:inset 3px 0 #87aa70; }
.part-card.locked-part:disabled { opacity:.78; }
.part-lock { font-size:9px; margin-top:4px; color:#8f936f; }
.parts-hint { font-size:10px; color:#8b9a7f; text-align:center; margin:12px 0 0; padding-top:10px; border-top:1px solid #e8edde; }
.deal-bar { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:30px; align-items:center; background:#fff; border:1px solid #dce5d4; border-radius:14px; padding:17px 22px; margin-top:17px; }
.deal-equation { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; column-gap:22px; row-gap:10px; }
.deal-amount>span { display:block; color:#87947b; font-size:10px; }
.deal-amount>strong { display:flex; align-items:center; gap:9px; color:#96722b; font:600 27px var(--mono); margin:6px 0 4px; white-space:nowrap; }
.deal-amount>small { display:block; color:#9aa38e; font-size:9px; }
.cost-amount>strong { color:#b18760; }
.cost-icon { color:#be9673; font:24px var(--sans); }
.profit-amount>strong { color:#5e8d4d; font-size:30px; }
.equation-sign { font:24px var(--mono); color:#b5bfaa; }
.margin-track { display:flex; grid-column:1/-1; width:100%; height:5px; overflow:hidden; border-radius:4px; background:#edf1e7; }
.margin-track>span { transition:width .3s; }
#cost-segment { background:#c9a67c; }
#profit-segment { background:#8aaf70; }
.margin-track.loss #cost-segment { background:#cb7059; }
.loss,#profit-reading.loss { color:#bc6246!important; }
.deal-action { display:grid; grid-template-columns:18px 1fr; align-items:center; gap:8px; border-left:1px solid #e5eadf; padding-left:24px; }
.deal-action>span { color:#a9b79b; font-size:16px; }
.deal-action h3 { color:#8a9980; font-size:11px; font-weight:500; margin:0; }
.deal-action.ready h3,.deal-action.ready>span { color:#5b854d; }
.deal-action button { grid-column:1/-1; width:100%; border:0; background:#608952; color:#fff; font-size:14px; font-weight:600; padding:14px 12px; border-radius:9px; box-shadow:0 3px 0 #426e37; }
.deal-action button:hover:not(:disabled) { background:#527e46; }
.deal-action button:disabled { opacity:1; cursor:default; color:#96a48a; background:#e8eddf; box-shadow:none; }
.research-nudge { margin:14px 0 0; padding:12px 16px; }
.research-nudge p { display:none; }
.research-summary { color:#7f926f; font-size:12px; line-height:1.7; }
.error-banner { margin-top:16px; }
dialog { max-height:90dvh; }
#analysis-dialog { max-width:740px; }
#analysis-dialog .readings-panel { display:block; border:0; padding:0; columns:2; column-gap:30px; }
#analysis-dialog .readings-panel>* { break-inside:avoid; }
#analysis-dialog .reading-separator { display:none; }
#analysis-dialog .equilibrium-card { margin-top:15px; }
#analysis-dialog .chart-panel { margin-top:24px; }
#analysis-dialog .chart-wrap { height:180px; }
#analysis-dialog .big-temperature { margin:12px 0; }
#analysis-dialog .customer-card { margin-bottom:10px; padding-bottom:10px; }
#bonus-dialog { max-width:500px; }
#bonus-dialog .challenge-card { margin-bottom:0; }
@media(min-width:1700px) { #level-screen { padding-top:90px; } .level-card>svg { height:180px; } .level-card h2 { font-size:18px; } }
@media(max-width:1100px) {
  main { padding-left:24px; padding-right:24px; }
  .topbar { padding:0 24px; }
  #level-screen { padding-top:40px; }
  .level-grid { gap:10px; }
  .level-card { padding-left:12px; padding-right:12px; }
  .level-card.available { padding-left:11px; padding-right:11px; }
  .level-card h2 { font-size:13px; }
  .level-card-top>span { font-size:9px; }
  .level-specs { font-size:10px; gap:3px; }
  .level-reward strong { font-size:20px; }
  .level-reward small { font-size:8px; }
  .level-cta,.available .level-cta { margin-left:-12px; margin-right:-12px; }
  .game-layout { grid-template-columns:minmax(0,1fr) 250px; gap:14px; }
  .parts-panel { padding:14px 10px; }
  .deal-bar { grid-template-columns:minmax(0,1fr) 225px; gap:20px; padding:16px 18px; }
  .deal-equation { column-gap:14px; }
  .deal-action { padding-left:20px; }
  .stage-legend { font-size:8px; }
}
@media(max-width:800px) {
  .brand { font-size:13px; gap:8px; }
  .brand img { width:29px; height:29px; }
  .brand small { font-size:8px; letter-spacing:2px; }
  .topbar { height:66px; padding:0 16px; }
  .hud-actions { gap:6px; }
  .wallet { min-width:0; padding:7px 10px; gap:6px; }
  .wallet strong { font-size:19px; }
  .wallet .coin { width:20px; height:20px; font-size:11px; }
  .hud-button { height:36px; min-width:36px; border-radius:9px; }
  .research-button { padding:0 8px; }
  .level-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
  .level-card h2 { font-size:16px; }
  .level-card>svg { height:125px; margin:10px 0; }
  .level-intro h1 { font-size:28px; }
  .game-layout { grid-template-columns:minmax(0,1fr); }
  .stage-panel { height:350px; }
  .parts-panel { display:block; padding:14px; }
  .parts-panel .parts-tabs { margin:12px 0; }
  .parts-panel .parts-list { display:flex; flex-direction:row; max-height:none; overflow-x:auto; padding:3px 2px 8px; scroll-snap-type:x proximity; }
  .parts-panel .parts-list .part-card { display:flex; flex-direction:column; align-items:flex-start; width:150px; min-height:126px; padding:10px 12px; gap:4px; scroll-snap-align:start; }
  .parts-panel .parts-list .part-card>svg { width:60px; height:42px; }
  .part-name { font-size:11px; }
  .parts-hint { border:0; margin:4px 0 0; padding:0; }
  .deal-bar { grid-template-columns:minmax(0,1fr) 190px; gap:15px; }
  .deal-equation { column-gap:9px; }
  .deal-amount>strong { font-size:22px; gap:5px; }
  .deal-amount .coin { width:19px; height:19px; font-size:10px; }
  .profit-amount>strong { font-size:25px; }
  .deal-action { padding-left:15px; }
  .deal-action button { font-size:12px; }
  .research-nudge { margin-bottom:12px; }
}
@media(max-width:540px) {
  main { padding:0 14px 18px; }
  .topbar { padding:0 14px; height:64px; }
  .brand>span { display:none; }
  .brand img { width:32px; height:32px; }
  .hud-actions { gap:5px; }
  .hud-button { height:36px; min-width:34px; }
  .research-button { gap:5px; font-size:11px; }
  .wallet { padding:7px 9px; }
  .wallet strong { font-size:18px; }
  #level-screen { padding-top:28px; }
  .level-intro { margin-bottom:23px; gap:10px; align-items:flex-start; }
  .level-intro .eyebrow { font-size:8px; letter-spacing:1.5px; }
  .level-intro h1 { font-size:22px; line-height:1.5; margin:8px 0; max-width:225px; }
  .level-intro p { font-size:11px; line-height:1.8; max-width:205px; }
  .completion-count { padding:10px 12px; display:flex; flex-direction:column; gap:5px; border-radius:12px; }
  .completion-count>span { display:none; }
  .completion-count b { font-size:19px; }
  .completion-count small { font-size:9px; }
  .level-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 12px; }
  .level-card { padding-top:13px; border-radius:14px; }
  .level-card.available { padding-top:12px; }
  .level-card-top>b { font-size:20px; }
  .level-card>svg { height:105px; margin:7px 0; }
  .level-card h2 { font-size:13px; }
  .level-customer { font-size:10px; }
  .level-specs { margin:12px 0 15px; font-size:10px; }
  .level-reward { gap:5px; }
  .level-reward strong { font-size:20px; }
  .level-reward small { font-size:8px; }
  .level-cta { margin-top:15px; padding:12px 4px; font-size:9px; }
  .available .level-cta { font-size:11px; }
  .map-caption { flex-direction:column; gap:10px; margin-top:25px; font-size:10px; }
  #play-screen { padding-top:12px; }
  .play-heading { display:grid; grid-template-columns:auto 1fr auto; gap:8px 10px; margin-bottom:12px; }
  .back-button { font-size:18px; padding:9px; grid-row:1/3; }
  .back-button span { display:none; }
  .order-title { grid-column:2; grid-row:1/3; }
  .order-title>span { font-size:9px; }
  .order-title h1 { font-size:16px; }
  .goal-badge { border:0; padding:0; grid-column:3; grid-row:1; }
  .goal-badge span { font-size:9px; }
  .goal-badge strong { font-size:18px; margin-top:2px; }
  .bonus-button { grid-column:3; grid-row:2; font-size:9px; padding:5px 7px; border-radius:6px; }
  .game-layout { gap:12px; }
  .stage-panel { height:300px; border-radius:12px 12px 0 0; }
  .stage-heading { padding:12px 13px; font-size:9px; }
  .stage-heading .stage-tool { font-size:10px; padding:5px 7px; }
  .stage-ambient { left:13px; top:52px; }
  .stage-ambient>span { font-size:8px; }
  .stage-ambient strong { font-size:14px; }
  .stage-toolbar { right:13px; top:52px; }
  .stage-tool { padding:5px 7px; }
  .stage-tool span { font-size:8px; }
  .drop-prompt { top:31%; padding:6px 10px; font-size:10px; }
  .stage-caption { display:none; }
  .stage-legend { left:13px; bottom:15px; font-size:7px; gap:4px; }
  .thermal-scale { width:126px; right:13px; bottom:15px; }
  .thermal-scale-title,.thermal-scale-ticks { font-size:7px; }
  .simulation-controls { padding:8px 10px; gap:7px; }
  .speed-control { gap:2px; }
  .speed-control>span { display:none; }
  .speed-control button { padding:6px; font-size:10px; }
  .play-button { font-size:10px; padding:7px 8px; }
  .simulation-controls>.mono { font-size:10px; }
  .reset-button { font-size:10px; padding-left:8px; }
  .assembly-strip { gap:7px; padding:8px 0; min-height:38px; }
  .strip-label { display:none; }
  .installed-pill { font-size:9px; padding:3px 5px; }
  .acceptance { gap:10px; padding:0 2px; }
  .acceptance-ring { width:45px; height:45px; }
  .acceptance-ring>span { font-size:18px; }
  .acceptance-ring>small { font-size:7px; }
  .acceptance-copy>strong { font-size:12px; }
  .parts-panel { padding:12px; }
  .parts-panel .parts-tabs { margin:10px 0 7px; }
  .parts-tabs button { padding:8px 4px; font-size:11px; }
  .parts-panel .parts-list .part-card { width:136px; min-height:118px; }
  .parts-panel .parts-list .part-card>svg { width:48px; height:36px; }
  .part-price { font-size:12px; margin-top:5px; }
  .part-lock { font-size:8px; }
  .parts-hint { font-size:9px; }
  .deal-bar { grid-template-columns:1fr; gap:10px; margin-top:12px; padding:12px 14px; }
  .deal-equation { column-gap:10px; row-gap:7px; }
  .deal-amount>span { font-size:9px; }
  .deal-amount>strong { font-size:22px; margin:5px 0 0; }
  .deal-amount>small { display:none; }
  .deal-amount .coin { width:17px; height:17px; font-size:9px; }
  .profit-amount>strong { font-size:24px; }
  .equation-sign { font-size:20px; }
  .cost-icon { font-size:19px; }
  .deal-action { padding:0; border:0; display:flex; gap:6px; }
  .deal-action h3 { font-size:10px; flex:1; }
  .deal-action button { width:auto; min-width:145px; font-size:12px; padding:11px 13px; }
  .deal-action>span { font-size:13px; }
  #analysis-dialog .readings-panel { columns:1; }
  .research-summary { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .level-card,.margin-track>span { transition:none; } }
/* Keep the quote and delivery action within a typical laptop viewport. */
@media(min-width:801px) {
  .topbar { height:64px; }
  #play-screen { padding-top:14px; }
  .play-heading { margin-bottom:12px; }
  .stage-panel { height:clamp(240px,calc(100dvh - 452px),460px); }
  .parts-panel .parts-list { max-height:calc(clamp(240px,calc(100dvh - 452px),460px) + 23px); }
  .deal-bar { margin-top:14px; padding-top:14px; padding-bottom:14px; }
}
.wallet { position:relative; }
#wallet-change { position:absolute; top:100%; right:12px; padding:5px 9px; border:1px solid #c5d8b4; border-radius:8px; background:#f3f9e9; color:#5d864a; font:600 16px var(--mono); pointer-events:none; z-index:8; animation:coin-gain 1.8s ease-out both; }
@keyframes coin-gain { 0% { opacity:0; transform:translateY(8px); } 15%,75% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(-8px); } }
@media(prefers-reduced-motion:reduce) { #wallet-change { animation:none; } }
/* Product families and system-level thermal challenges. */
.category-overview { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 25px; }
.category-card { text-align:left;border:1px solid #d6e1d0;border-radius:13px;background:#fbfcf8;padding:16px;line-height:1.6; }
.category-card.active { border:2px solid #678c5e;padding:15px;background:#edf4e6; }
.category-card strong { display:block;font-size:15px;color:#3b5c40; }
.category-card>span { font-size:10px;color:#77906d; }
.category-card p { color:#53654e;font-size:12px;margin:10px 0; }
.category-card ul { margin:0;padding-left:16px;font-size:11px;color:#7d8976; }
.category-card li+li { margin-top:5px; }
.category-heading { display:flex;justify-content:space-between;align-items:center;gap:15px;margin:15px 0; }
.category-heading h2 { font-size:18px; }
.category-heading button { border:1px solid #d1ddc9;background:#f8fbf4;border-radius:8px;padding:9px 12px;color:#597450;font-size:12px; }
.level-brief { display:block;font-size:11px;line-height:1.7;margin-top:12px;min-height:58px;color:#77876b; }
.level-system-spec { font-size:10px;line-height:1.8;margin-top:10px;color:#6b805f; }
.level-card .level-specs { margin-top:auto;padding-top:15px; }
.system-brief { font-size:13px;color:#687e5e;line-height:1.7;background:#eaf0e4;border-radius:9px;padding:10px 14px;margin:0 0 14px; }
.system-controls { display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:12px 0;padding:12px;background:#eaf0e3;border:1px solid #d9e3d2;border-radius:10px; }
.system-controls label { display:flex;flex-direction:column;gap:6px;font-size:11px;color:#697d5f;min-width:0; }
.system-controls select { width:100%;min-width:0;border:1px solid #cad8c1;border-radius:6px;background:#fff;padding:8px;font:12px var(--sans);color:#395b40; }
.system-controls p,.system-controls small { grid-column:1/-1;margin:0;line-height:1.6;font-size:11px;color:#718267; }
.system-checks table { width:100%;border-collapse:collapse;font-size:12px;background:#fbfcf8;border-radius:10px;overflow:hidden; }
.system-checks caption { text-align:left;font-size:11px;color:#76886d;margin:0 0 7px; }
.system-checks td,.system-checks th { padding:7px 10px;border-bottom:1px solid #e3eadd;text-align:right; }
.system-checks th:first-child { text-align:left; }
.system-checks thead { color:#8a9881;font-size:10px; }
.check-pass { color:#54824c; }.check-fail { color:#af7450; }
.system-caption { fill:#c4d9c8;font-size:13px;font-family:var(--sans); }
.system-small { fill:#adc6b6;font-size:11px;font-family:var(--sans); }
.system-chip-value { fill:#fff;font-size:14px;font-family:var(--mono); }
[data-select-chip] { cursor:pointer;outline:none; }[data-select-chip]:focus>rect:first-child { stroke:#fff; }
.system-stage { min-height:340px; }.system-stage .stage-legend { display:none; }
.chart-legend { flex-wrap:wrap; }
.point-milestones { overflow-x:auto; }
@media(max-width:1000px) { .category-overview { grid-template-columns:repeat(3,minmax(0,1fr)); }.category-card ul{font-size:10px;} }
@media(max-width:540px) { .category-overview { grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }.category-card{padding:12px;}.category-card.active{padding:11px;}.category-card strong{font-size:13px;}.category-card p{font-size:11px;}.category-card ul{font-size:10px;}.category-heading h2{font-size:15px;}.category-heading button{font-size:10px;}.system-controls { grid-template-columns:1fr; }.system-checks table{font-size:11px;}.system-stage{min-height:290px;}.level-brief{min-height:0;}.system-brief{font-size:11px;}.system-checks td,.system-checks th{padding:7px 5px;} }

/* Visual ledger and research: overview first, details on demand. */
#settings-dialog.visual-ledger { max-width:880px!important; width:calc(100% - 32px); padding:28px; }
.visual-ledger .dialog-heading,.visual-research .dialog-heading { margin-bottom:20px; }
.visual-ledger .dialog-heading h2,.visual-research .dialog-heading h2 { margin-top:6px; font-size:25px; letter-spacing:0; }
.finance-icon { display:block; width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.point-gem { display:inline-grid; place-items:center; color:#678d73; font:500 26px var(--sans); line-height:1; flex-shrink:0; }
.positive-text { color:#568148; }
.ledger-hero { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:center; border:1px solid #d9e4cb; border-radius:14px; background:#edf3e5; padding:22px 26px; }
.ledger-wallet { display:flex; gap:16px; align-items:center; }
.ledger-wallet>.coin { width:47px; height:47px; font-size:25px; border-width:3px; }
.ledger-wallet>div>span,.ledger-net>span { display:block; font-size:12px; color:#718361; }
.ledger-wallet strong { display:block; font:600 37px var(--mono); color:#97702c; margin-top:5px; letter-spacing:-1px; }
.ledger-net { padding-left:26px; border-left:1px solid #d5e0c9; }
.ledger-net>strong { display:block; font:600 34px var(--mono); margin:5px 0; letter-spacing:-1px; color:#58814b; }
.ledger-net>small { display:block; font-size:10px; color:#7f9170; }
.section-label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:23px 0 12px; }
.section-label h3 { font-size:14px; font-weight:600; margin:0; color:#486340; }
.section-label>span { color:#8a997c; font-size:10px; }
.cash-flow { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; padding:16px 8px; border:1px solid #e3e9dc; border-radius:11px; background:#fafbf6; }
.cash-flow-step { position:relative; min-width:0; display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; color:#9a8a60; }
.cash-flow-step>.finance-icon { height:26px; width:26px; }
.cash-flow-step>span:not(.cash-operator) { font-size:10px; color:#889479; }
.cash-flow-step>strong { font:500 19px var(--mono); }
.cash-flow-step.income { color:#729562; }
.cash-flow-step.parts { color:#b18c66; }
.cash-flow-step.research { color:#7d8e9d; }
.cash-flow-step.wallet { color:#97712e; background:transparent; border:0; padding:0; border-radius:0; min-width:0; }
.cash-flow-step.wallet>strong { font-size:19px; font-weight:600; }
.cash-operator { position:absolute; left:-19px; top:30px; font:20px var(--mono); color:#b1baa4; }
.ledger-order { border-bottom:1px solid #e5ebde; }
.ledger-order>summary,.profit-axis { display:grid; grid-template-columns:180px minmax(0,1fr) 88px 14px; gap:14px; align-items:center; }
.ledger-order>summary { cursor:pointer; padding:13px 0; border-radius:7px; list-style:none; }
.ledger-order>summary::-webkit-details-marker,.ledger-fold>summary::-webkit-details-marker,.technical-details>summary::-webkit-details-marker { display:none; }
.ledger-order>summary:hover { background:#f0f5e9; }
.ledger-order>summary:focus-visible,details>summary:focus-visible { outline:3px solid #71ae8c; outline-offset:3px; border-radius:5px; }
.ledger-order-name { display:flex; gap:11px; align-items:center; min-width:0; }
.ledger-order-name>b { display:grid; place-items:center; width:29px; height:29px; background:#eaf0df; border-radius:9px; font:12px var(--mono); color:#849b6b; flex-shrink:0; }
.ledger-order-name>span { font-size:12px; color:#5f7752; }
.ledger-order-name small { display:block; margin-top:4px; font-size:10px; color:#8b9b7c; }
.profit-axis { margin-bottom:2px; color:#97a28b; font:9px var(--mono); }
.profit-axis>span:nth-child(3) { text-align:right; font:9px var(--sans); }
#profit-axis-ticks { display:flex; justify-content:space-between; }
.profit-bar { position:relative; display:block; height:23px; background:#f0f3eb; border-radius:4px; overflow:hidden; }
.bar-zero { position:absolute; left:50%; top:0; height:100%; width:1px; background:#b5c3a6; z-index:1; }
.bar-fill { position:absolute; top:5px; bottom:5px; background:#85a96d; border-radius:2px; min-width:0; }
.negative .bar-fill { background:#ce8068; }
.profit-bar.unsettled { background:#f4f5f0; }
.profit-bar.unsettled>.bar-zero { opacity:.35; }
.profit-bar.unsettled>span { display:grid; height:100%; place-items:center; color:#98a18f; font-size:10px; background:#f4f5f0dc; position:relative; z-index:2; }
.order-net { font:500 17px var(--mono); text-align:right; }
.pending-value { color:#adb6a2; }
.fold-chevron { color:#92a283; font-size:17px; transition:transform .15s; justify-self:end; }
[open]>summary>.fold-chevron { transform:rotate(180deg); }
.order-detail { background:#f3f7ec; border:1px solid #e1e9d6; border-radius:10px; padding:17px 18px; margin-bottom:13px; }
.receipt-equation { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:12px; align-items:center; }
.receipt-equation>div>span { display:block; font-size:10px; color:#839573; }
.receipt-equation>div>strong { display:flex; gap:7px; align-items:center; font:500 22px var(--mono); margin-top:7px; color:#a48351; }
.receipt-equation>div>strong.positive-text { color:#568148; }
.receipt-equation .coin { width:19px; height:19px; font-size:10px; }
.receipt-operator { color:#adba9c; font:20px var(--mono); }
.receipt-bonuses { display:flex; flex-wrap:wrap; gap:10px 20px; border-top:1px solid #e1e9d7; padding-top:12px; margin-top:14px; color:#889975; font-size:10px; }
.receipt-bonuses b { font:11px var(--mono); color:#9c8757; }
.receipt-equipment { display:flex; gap:10px; margin:16px 0 13px; flex-wrap:wrap; color:#8b9a7d; font-size:11px; }
.part-thumbnail { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; gap:4px; color:#7b9175; font-size:9px; line-height:1.4; text-align:center; }
.part-thumbnail>svg { display:block; width:57px; height:42px; stroke:none; fill:none; }
.receipt-equipment>.part-thumbnail { min-width:94px; background:#fbfcf8; border:1px solid #e0e8d7; border-radius:9px; padding:7px; font-size:10px; }
.receipt-chip { border:1px solid #e0e8d7; border-radius:9px; padding:9px; background:#fbfcf8; min-width:0; }
.receipt-chip>b { display:block; font-size:10px; font-weight:500; margin-bottom:7px; }
.receipt-chip>div { display:flex; flex-wrap:wrap; gap:12px; }
.receipt-chip .part-thumbnail { width:78px; }
.receipt-thermal { display:flex; gap:12px 20px; flex-wrap:wrap; color:#859772; font-size:10px; }
.receipt-thermal b { font:500 11px var(--mono); color:#637d50; }
.pending-order { display:flex; flex-direction:column; gap:8px; color:#839575; font-size:11px; }
.pending-order>strong { color:#58744b; font-size:13px; font-weight:500; }
.pending-order>p { margin:3px 0 0; font-size:11px; line-height:1.8; }
.ledger-explainer { font-size:10px; color:#8e9c80; line-height:1.7; margin:12px 0 17px; }
.ledger-pagination { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:12px; }
.ledger-pagination>button { width:38px; height:36px; border:1px solid #d9e4cf; border-radius:9px; color:#64834f; background:#eff5e8; font-size:18px; cursor:pointer; }
.ledger-pagination>button:disabled { opacity:.4; cursor:default; }
.ledger-pagination>span { color:#7f9270; font-size:11px; }
.ledger-fold { border:1px solid #e0e6d7; background:#f8faf3; border-radius:10px; margin:0; padding:0 14px; }
.ledger-fold>summary { list-style:none; display:grid; grid-template-columns:1fr auto 16px; align-items:center; gap:10px; min-height:52px; cursor:pointer; }
.ledger-fold>summary>span:first-child { display:flex; align-items:center; gap:8px; font-size:12px; color:#748969; }
.ledger-fold>summary>strong { font:12px var(--mono); color:#7c8b95; }
#research-ledger .research-receipt { display:grid; grid-template-columns:28px 1fr auto; gap:12px; align-items:center; border-top:1px solid #e4eadb; border-bottom:0; padding:13px 0; }
.research-receipt .finance-icon { width:24px; height:24px; color:#889d80; }
.research-receipt>span { font-size:12px; }
.research-receipt small { display:block; font-size:10px; margin-top:4px; font-weight:400; color:#90a17f; }
#research-ledger .research-receipt>strong { color:#85939d; font:14px var(--mono); text-align:right; }
#research-ledger .research-receipt>strong small { display:block; }
.visual-ledger .order-dialog-footer { margin-top:17px; padding-top:13px; }
.visual-ledger .order-dialog-footer>span { font-size:10px; }

/* Research routes and resource previews. */
#skills-dialog.visual-research { max-width:1080px; width:calc(100% - 32px); padding:28px; }
.research-hud { display:grid; grid-template-columns:155px 155px minmax(0,1fr); align-items:center; gap:24px; border:1px solid #dae6d1; border-radius:13px; background:#edf4e6; padding:18px 22px; }
.research-balance { display:flex; align-items:center; gap:10px; }
.research-balance>.point-gem { font-size:40px; }
.research-balance>.coin { width:30px; height:30px; font-size:17px; }
.research-balance>span:last-child { font-size:11px; color:#7f9270; }
.research-balance strong { display:block; font:600 28px var(--mono); color:#628552; margin-top:5px; }
.research-balance:nth-child(2) strong { color:#97712e; }
.point-source { border-left:1px solid #d6e2ca; padding-left:24px; }
.point-source-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#7c8f6c; font-size:10px; }
.point-source-heading small { font-size:9px; color:#94a085; }
.point-source-note { margin:9px 0 0; color:#7c8f6c; font-size:9px; }
.point-milestones { display:flex; justify-content:space-between; position:relative; margin-top:10px; gap:12px; }
.point-milestones:before { content:''; position:absolute; left:12%; right:12%; top:15px; height:1px; background:#d4dfc8; }
.point-milestone { z-index:1; text-align:center; color:#9aab8b; font-size:9px; display:flex; align-items:center; flex-direction:column; gap:5px; }
.point-milestone>b { display:grid; place-items:center; width:30px; height:30px; border:1px solid #d4e0c8; border-radius:50%; background:#f7faf2; font-size:20px; font-weight:400; }
.point-milestone.earned { color:#62874f; }
.point-milestone.earned>b { color:white; border-color:#8aab76; background:#8aab76; font-size:15px; }
.research-context { display:flex; justify-content:space-between; gap:15px; color:#819373; font-size:11px; margin:16px 0 12px; }
#research-count { white-space:nowrap; color:#9aab8c; }
.visual-skill-tree { gap:18px; }
.research-route { --route:#6d8d60; --route-bg:#eef4e8; min-width:0; }
.research-route.cooling { --route:#5d8a8e; --route-bg:#ebf3f1; }
.research-route.business { --route:#a58b57; --route-bg:#f7f2e6; }
.research-route>header { display:flex; align-items:center; gap:9px; padding:7px 3px 13px; }
.research-route>header>span { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:var(--route); background:var(--route-bg); font-size:22px; }
.research-route h3 { margin:0; color:var(--route); font-size:15px; font-weight:600; }
.research-route header p { font-size:10px; margin:4px 0 0; color:#95a28b; }
.research-card { display:flex; flex-direction:column; width:100%; min-height:272px; padding:14px; text-align:left; color:#526c49; background:#fafcf6; border:1px solid #dce5d3; border-radius:12px; }
.research-card:hover { border-color:var(--route); background:#fff; box-shadow:0 4px 14px #2643310c; transform:translateY(-1px); }
.research-card.available { border-color:var(--route); background:#fff; box-shadow:inset 0 3px var(--route); }
.research-card.owned { background:var(--route-bg); }
.research-card.locked { border-style:dashed; }
.research-card-top { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; font-size:9px; color:#99a68d; }
.research-card-top>b { font-weight:400; font-size:9px; border-radius:5px; padding:4px 7px; color:#87977a; background:#edf1e6; }
.available .research-card-top>b,.owned .research-card-top>b { color:var(--route); background:var(--route-bg); }
.research-card-name { margin-top:11px; font-size:16px; font-weight:600; color:#526c49; }
.skill-card-visual { width:100%; display:flex; align-items:center; justify-content:center; min-height:78px; margin:6px 0 8px; color:var(--route); }
.unlock-thumbnails { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; width:100%; }
.unlock-thumbnails:has(>.part-thumbnail:nth-child(3):last-child) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.unlock-thumbnails .part-thumbnail>svg { width:100%; max-width:57px; height:43px; }
.locked .skill-card-visual { opacity:.65; }
.material-upgrade { display:flex; align-items:center; justify-content:center; gap:18px; }
.upgrade-pad { display:flex; flex-direction:column; align-items:center; font-size:9px; color:#7b9175; }
.upgrade-pad>svg { width:58px; height:42px; fill:none; stroke:none; }
.visual-plus { font-size:20px; color:#afbea3; }
.contact-upgrade { display:flex; align-items:center; flex-direction:column; color:#7b9175; font-size:9px; }
.contact-upgrade>svg { width:145px; height:57px; stroke:none; fill:none; }
.number-upgrade { display:grid; grid-template-columns:auto auto; align-items:center; gap:0 10px; }
.number-upgrade>.coin { width:26px; height:26px; font-size:15px; }
.number-upgrade>strong { font:600 38px var(--mono); color:#b59a5e; }
.number-upgrade strong small { font:18px var(--sans); margin-left:2px; }
.number-upgrade>span:last-child { grid-column:1/-1; text-align:center; color:#ab9a73; font-size:9px; }
.skill-short-effect { color:#829575; font-size:11px; line-height:1.7; min-height:38px; }
.skill-tags { display:flex; flex-wrap:wrap; gap:4px; margin:7px 0 12px; }
.skill-tags>span { color:#8d957d; background:#f0f2ea; border-radius:4px; padding:4px 6px; font-size:9px; line-height:1.3; }
.skill-tags>.timing-tag { color:var(--route); background:var(--route-bg); }
.research-card-bottom { margin-top:auto; padding-top:11px; border-top:1px solid #e5ecdd; width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.skill-cost { display:flex; align-items:center; gap:5px; font:500 17px var(--mono); color:#9d7c3e; }
.skill-cost>.coin { width:18px; height:18px; font-size:10px; }
.points-cost { display:flex; align-items:center; gap:3px; font:12px var(--mono); color:#7d946c; margin-left:8px; }
.points-cost .point-gem { font-size:20px; }
.research-card-bottom>span:last-child { font-size:10px; color:var(--route); }
.research-link { display:grid; place-items:center; height:24px; color:#b4c4a6; font-size:20px; }
.research-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:10px; color:#8a9d7d; line-height:1.8; border-top:1px solid #e4ebdc; margin-top:20px; padding-top:14px; }
#research-window { margin:0; font-size:10px; color:#91a181; }
#research-confirm-dialog.skill-detail-dialog { max-width:620px; padding:26px; }
.skill-detail-dialog .dialog-heading { margin-bottom:12px; }
.skill-detail-dialog .dialog-heading h2 { font-size:23px; margin-top:6px; }
.skill-detail-visual { display:flex; align-items:center; justify-content:center; padding:17px; background:#f0f6e8; border:1px solid #e0e9d5; border-radius:12px; min-height:107px; }
.skill-detail-visual .part-thumbnail { font-size:11px; }
.skill-detail-visual .part-thumbnail>svg { max-width:76px; height:55px; width:76px; }
.skill-detail-visual .material-upgrade { gap:25px; }
.skill-detail-visual .number-upgrade>strong { font-size:45px; }
#research-confirm-effect.skill-plain-effect { font-size:16px; font-weight:500; color:#5c7850; line-height:1.6; margin:17px 0 8px; }
.skill-detail-benefits { font-size:12px; color:#859773; line-height:1.8; margin-bottom:13px; }
.technical-details { padding:11px 0; border-top:1px solid #e4ebdc; border-bottom:1px solid #e4ebdc; }
.technical-details summary { display:flex; align-items:center; justify-content:space-between; list-style:none; font-size:11px; color:#829674; cursor:pointer; }
.technical-details p { font-size:12px; line-height:1.9; margin:10px 0 0; color:#6e845f; }
.skill-requirements { display:flex; flex-wrap:wrap; gap:6px; padding:14px 0; }
.requirements-title { width:100%; font-size:10px; color:#95a687; margin-bottom:2px; }
.requirement { display:flex; align-items:center; flex-wrap:wrap; gap:5px; font-size:10px; padding:6px 8px; border-radius:5px; border:1px solid #e0e8d5; background:#f2f7ec; color:#739460; }
.requirement.unmet { background:#f6f4ec; color:#a19470; border-color:#e9e3d2; }
.requirement small { color:#b18b61; font-size:9px; }
.resource-preview { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:10px; padding:16px 13px; background:#eef4e7; border-radius:10px; }
.resource-step { text-align:center; min-width:0; }
.resource-step>span { font-size:10px; color:#889c76; display:block; }
.resource-step>strong { display:block; font:500 23px var(--mono); color:#79955f; margin:7px 0; }
.resource-step>small { display:block; font-size:11px; color:#7a9266; }
.resource-step.spending>strong { color:#ab895c; }
.resource-step.spending>small { color:#ab9570; }
.resource-arrow { color:#acbba1; font-size:20px; }
.resource-step>strong.insufficient-resources { font:12px var(--sans); color:#b0875d; }
.resource-step:has(.insufficient-resources)>small { font-size:9px; line-height:1.6; }
.already-researched { grid-column:1/-1; color:#719460; font-size:12px; line-height:1.7; }
.skill-detail-dialog .research-confirm-note { font-size:11px; line-height:1.8; color:#889a78; margin:12px 0; }
.skill-detail-actions { display:flex; gap:12px; margin-top:17px; }
.skill-detail-actions>.close-dialog { font-size:12px; height:auto; border-radius:8px; padding:12px 18px; color:#859774; white-space:nowrap; }
.skill-detail-actions>.primary-button { margin:0; font-size:13px; border-radius:8px; background:#6b8f56; min-height:44px; }
.skill-detail-actions>.primary-button:disabled { opacity:1; color:#91a080; background:#e7eddf; cursor:default; }
.research-feedback { font-size:12px; line-height:1.8; color:#af694e; border:1px solid #e4c6b1; border-radius:8px; background:#fbf0e7; padding:10px; }
@media(max-width:850px) {
  #skills-dialog.visual-research { padding:22px; }
  .visual-skill-tree { gap:10px; }
  .research-card { padding:12px; }
  .research-hud { grid-template-columns:130px 130px minmax(0,1fr); gap:12px; padding:15px; }
  .point-source { padding-left:15px; }
  .research-card-name { font-size:15px; }
  .research-card .part-thumbnail { font-size:8px; }
  .skill-tags>span { font-size:8px; }
}
@media(max-width:700px) {
  #settings-dialog.visual-ledger,#skills-dialog.visual-research { padding:20px; width:calc(100% - 24px); border-radius:14px; }
  .visual-ledger .dialog-heading h2,.visual-research .dialog-heading h2 { font-size:21px; }
  .ledger-hero { padding:18px; gap:15px; }
  .ledger-wallet { gap:9px; }
  .ledger-wallet>.coin { width:33px; height:33px; font-size:17px; }
  .ledger-wallet strong { font-size:29px; }
  .ledger-net { padding-left:17px; }
  .ledger-net>strong { font-size:28px; }
  .ledger-order>summary,.profit-axis { grid-template-columns:132px minmax(0,1fr) 66px 12px; gap:10px; }
  .ledger-order-name { gap:7px; }
  .ledger-order-name>span { font-size:11px; }
  .ledger-order-name small { font-size:9px; }
  .order-net { font-size:15px; }
  .research-hud { grid-template-columns:1fr 1fr; gap:16px; }
  .point-source { grid-column:1/-1; padding:14px 0 0; border-left:0; border-top:1px solid #d6e2ca; }
  .point-source-heading small { font-size:10px; }
  .point-milestones { padding:0 8px; }
  .point-source-heading { font-size:11px; }
  .point-milestone { font-size:10px; }
  .visual-skill-tree { grid-template-columns:1fr; gap:20px; }
  .research-route>header { padding:0 3px 12px; }
  .research-card { padding:16px; min-height:0; }
  .research-card-name { font-size:18px; }
  .research-card-top,.research-card-top>b { font-size:10px; }
  .skill-card-visual { margin:12px 0; min-height:75px; }
  .research-card .part-thumbnail { font-size:10px; }
  .research-card .part-thumbnail>svg { height:50px; max-width:62px; }
  .skill-short-effect { min-height:0; font-size:12px; }
  .skill-tags>span { font-size:10px; }
  .research-card-bottom>span:last-child { font-size:11px; }
  .research-context { font-size:10px; line-height:1.8; }
  .research-footer { align-items:flex-start; flex-direction:column; gap:5px; }
  #research-confirm-dialog.skill-detail-dialog { width:calc(100% - 24px); padding:20px; }
}
@media(max-width:440px) {
  #settings-dialog.visual-ledger,#skills-dialog.visual-research { padding:17px; }
  .visual-ledger .dialog-heading,.visual-research .dialog-heading { gap:10px; }
  .visual-ledger .dialog-heading h2,.visual-research .dialog-heading h2 { font-size:20px; }
  .ledger-hero { gap:12px; padding:15px 12px; }
  .ledger-wallet { gap:8px; }
  .ledger-wallet>.coin { width:26px; height:26px; font-size:14px; }
  .ledger-wallet>div>span,.ledger-net>span { font-size:10px; }
  .ledger-wallet strong { font-size:25px; }
  .ledger-net { padding-left:12px; }
  .ledger-net>strong { font-size:25px; }
  .ledger-net>small { font-size:8px; }
  .section-label>span { font-size:9px; }
  .cash-flow { gap:12px; padding:13px 4px; }
  .cash-flow-step>.finance-icon { width:22px; height:22px; }
  .cash-flow-step>span:not(.cash-operator) { font-size:8px; }
  .cash-flow-step>strong,.cash-flow-step.wallet>strong { font-size:12px; }
  .cash-operator { left:-14px; top:25px; font-size:14px; }
  .ledger-order>summary,.profit-axis { grid-template-columns:112px minmax(0,1fr) 54px 10px; gap:7px; }
  .ledger-order-name>b { width:23px; height:25px; font-size:10px; border-radius:7px; }
  .ledger-order-name>span { font-size:11px; }
  .ledger-order-name small { font-size:8px; }
  .order-net { font-size:13px; }
  #profit-axis-ticks,.profit-axis>span:nth-child(3) { font-size:7px; }
  .profit-bar.unsettled>span { font-size:8px; }
  .profit-bar { height:20px; }
  .ledger-order>summary { padding:13px 0; }
  .order-detail { padding:13px 10px; }
  .receipt-equation { gap:6px; }
  .receipt-equation>div>span { font-size:9px; }
  .receipt-equation>div>strong { font-size:17px; gap:3px; }
  .receipt-equation .coin { width:14px; height:14px; font-size:8px; border-width:1px; }
  .receipt-operator { font-size:15px; }
  .receipt-bonuses { font-size:9px; }
  .receipt-equipment { gap:6px; }
  .receipt-equipment>.part-thumbnail { min-width:0; flex:1; font-size:9px; padding:5px; }
  .receipt-thermal { gap:7px 12px; font-size:9px; }
  .receipt-thermal b { font-size:10px; }
  .ledger-explainer { font-size:9px; }
  .resource-preview { gap:6px; padding:13px 7px; }
  .resource-step>span { font-size:9px; }
  .resource-step>strong { font-size:20px; }
  .resource-arrow { font-size:16px; }
  .resource-step>small { font-size:10px; }
  .skill-detail-visual { padding:12px 8px; }
  .skill-detail-visual .part-thumbnail { font-size:9px; }
  .skill-detail-visual .part-thumbnail>svg { max-width:58px; width:100%; height:46px; }
  .skill-detail-actions>.close-dialog { padding:12px; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .research-card,.fold-chevron { transition:none; } }