.command-center.city-active { background: #16221c; }
.city-workspace { max-width: 1400px; margin: 0 auto; }
.city-placement { position: absolute; z-index: 12; bottom: 12px; left: 12px; box-sizing: border-box; width: min(380px, calc(100% - 24px)); max-height: 46%; overflow-y: auto; padding: 14px; border: 1px solid #b49c65; border-radius: 6px; background: #15271bf5; color: #ebdfbf; box-shadow: 0 3px 18px #0006; }
.city-placement[hidden] { display: none; }
.city-placement h3 { margin: 0 0 8px; font: 19px Georgia, serif; }
.city-placement p, .city-placement li, .city-placement summary { font: 12px/1.5 system-ui, sans-serif; overflow-wrap: anywhere; }
.city-placement label { display: grid; gap: 5px; font: 12px system-ui, sans-serif; }
.city-placement select { min-width: 0; width: 100%; min-height: 44px; padding: 6px; border: 1px solid #67774d; color: #eedfb9; background: #1e2e24; }
.city-placement .screen-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; position: sticky; bottom: -14px; padding: 6px 0; background: #15271b; }
.city-placement .command-action { min-width: 0; min-height: 44px; padding: 6px; white-space: normal; }
.city-placement .placement-guide { margin-bottom: 8px; }
.city-placement .placement-site-scan { margin: 8px 0; border: 1px solid #58634c; border-radius: 5px; padding: 8px; }
.city-placement .placement-site-scan summary { cursor: pointer; min-height: 32px; }
.city-placement .placement-site-scan ul { list-style: none; margin: 8px 0 0; padding: 0; }
.city-placement .placement-site-scan li { display: grid; gap: 4px; padding: 7px 0; border-top: 1px solid #3e5242; }
.city-placement .placement-site-scan li span { color: #c7cdbd; }
.city-placement .placement-site-scan li button { justify-self: start; }
.city-placement .placement-site-group { margin-top: 6px; border-top: 1px solid #3e5242; padding: 4px 0; }
.city-placement .placement-site-group summary { font-weight: 600; }
.city-placement .placement-site-group li.is-selected { border-left: 3px solid #d3be81; padding-left: 7px; }
.city-placement .placement-operation { margin: 10px 0; border-top: 1px solid #58634c; padding-top: 8px; }
.city-placement .placement-operation h4 { margin: 0 0 6px; }
.city-placement .placement-operation p { margin: 6px 0; }
.city-placement .placement-requirements li { margin: 8px 0; }
.city-placement .placement-requirements li span { display: block; color: #c7cdbd; }
.map-panel[data-placement-active] .selection-actions, .map-panel[data-placement-active] .map-hint { display: none; }
@media (max-width: 640px) {
  .map-panel[data-placement-active] .prototype-bar, .map-panel[data-placement-active] .map-heading-row { display: none; }
}
.city-name { display: grid; gap: 8px; max-width: 360px; color: #bcc7b2; }
.city-name input { min-height: 44px; border: 1px solid #66734f; padding: 8px; border-radius: 4px; color: #efdfbc; background: #15251c; }
.city-workspace h2 { margin: 5px 0 14px; font: 28px Georgia, serif; color: #eddfbc; }
.city-title { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.city-title > div { min-width: 0; }
.city-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.city-stats > div, .city-stock > div { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid #52614a; border-radius: 6px; background: #203127; }
.city-stats span, .city-stock span { color: #b8c5b1; font-size: 12px; }
.city-stats b { color: #eddfbc; font-size: 24px; }
.city-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 18px; }
.city-tabs .is-current { border-color: #d1b472; background: #3a4630; color: #ffedc9; }
.city-navigation .command-action, .city-more > summary { min-height: 44px; }
.city-more { border: 1px solid #58634c; border-radius: 8px; padding: 0 12px; }
.city-more > summary { cursor: pointer; padding: 12px 0; overflow-wrap: anywhere; }
.city-navigation-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; padding-bottom: 12px; }
.city-navigation-groups section { min-width: 0; }
.city-navigation-groups h3 { color: #d1b472; font-size: 1rem; }
.city-navigation-groups ul { list-style: none; padding: 0; margin: 0; }
.city-navigation-groups li { margin-bottom: 16px; }
.city-navigation-groups p { margin: 6px 0 0; color: #c5cbbd; font-size: .9rem; overflow-wrap: anywhere; }
.city-navigation-status { display: block; margin-top: 6px; font-size: .8rem; color: #d1b472; }
.city-navigation .is-current { border-color: #d1b472; background: #3a4630; color: #ffedc9; }
.city-current-section { margin: 12px 0 18px; }
.city-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.supply-network { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, .4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.supply-network > section { min-width: 0; }
.supply-network h3, .supply-network h4 { color: #eddfbc; overflow-wrap: anywhere; }
.supply-network h4 { margin: 0 0 12px; font-size: 17px; }
.supply-nodes { list-style: none; padding: 0; margin: 0; }
.supply-stock-node { text-align: center; padding: 24px 6px; border: 1px solid #8d8052; border-radius: 7px; color: #eddfbc; }
.supply-stock-node > span { font-size: 28px; }
.supply-links { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.supply-links button { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.supply-instance + .supply-instance { border-top: 1px solid #52614a; margin-top: 16px; }
.city-supply-goal-materials, .city-supply-goal-sources { list-style: none; margin: 10px 0; padding: 0 0 0 14px; border-left: 2px solid #728962; min-width: 0; }
.city-supply-goal-material, .city-supply-goal-sources > li { margin: 10px 0; padding: 8px; background: #192a20; border: 1px solid #43583e; border-radius: 5px; min-width: 0; overflow-wrap: anywhere; }
.city-supply-goal-sources > li { background: #203227; }
.city-supply-goal-sources summary { cursor: pointer; min-height: 44px; padding: 9px 2px; color: #eddfbc; overflow-wrap: anywhere; }
.city-supply-goal-material > div { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.city-supply-goal-material p, .city-supply-goal-sources p { margin: 7px 0; }
.city-card[data-supply-details] summary { min-height: 44px; cursor: pointer; color: #eddfbc; overflow-wrap: anywhere; }
.city-card[data-production-details] summary { min-height: 44px; cursor: pointer; color: #eddfbc; overflow-wrap: anywhere; }
.city-card[data-governor-details] summary { min-height: 44px; cursor: pointer; color: #eddfbc; overflow-wrap: anywhere; }
.city-card[data-production-details] { margin-top: 16px; padding: 12px; }
.city-card[data-production-details] label { margin: 12px 0; }
@media (max-width: 900px) { .supply-network { grid-template-columns: 1fr; } .supply-stock-node > span { display: inline-block; transform: rotate(90deg); } }
.city-catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 16px; }
.city-tech-tree { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr)); gap: 12px; align-items: start; }
.city-tech-branch { border: 1px solid #526348; border-radius: 6px; background: #17271e; min-width: 0; }
.city-tech-branch summary { cursor: pointer; min-height: 44px; padding: 11px 14px; color: #eddfbc; font-weight: 650; overflow-wrap: anywhere; }
.city-tech-track { margin: 0 14px 14px 25px; padding: 0 0 0 16px; border-left: 2px solid #70885c; list-style: none; }
.city-tech-track li { position: relative; margin: 0 0 12px; min-width: 0; }
.city-tech-track li::before { content: ""; position: absolute; width: 9px; height: 9px; left: -22px; top: 17px; border-radius: 50%; background: #b7c98d; }
.city-tech-track button { display: grid; gap: 3px; width: 100%; min-height: 44px; padding: 8px 10px; text-align: left; color: #efe2bd; background: #263b2c; border: 1px solid #70885c; border-radius: 5px; cursor: pointer; }
.city-tech-track button:hover, .city-tech-track button:focus-visible { border-color: #d8c98a; background: #314a34; }
.city-tech-track button span, .city-tech-track small { color: #b9c8ae; font: 12px/1.45 system-ui, sans-serif; overflow-wrap: anywhere; }
.city-tech-track button[data-knowledge-map] { display: block; width: auto; margin-top: 6px; background: #304333; }
.city-tech-track small { display: block; margin-top: 4px; }
.city-card { padding: 20px; margin-bottom: 16px; background: #1e2e24; border: 1px solid #4c5d45; border-radius: 7px; min-width: 0; }
.city-subcard { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #4c5d45; }
.city-subcard p { margin: 0; }
.city-card h3 { color: #eddfbc; font: 21px Georgia, serif; margin: 0 0 12px; }
.city-card label { display: grid; gap: 8px; max-width: 100%; color: #bcc7b2; font-size: 12px; }
.city-card select, .city-card input[type="number"], .city-card input[data-district-field] { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; border: 1px solid #66734f; padding: 8px; border-radius: 4px; color: #efdfbc; background: #1e2e24; }
.city-card p, .city-insights, .city-list { color: #bec8b6; font: 13px/1.65 system-ui, sans-serif; overflow-wrap: anywhere; }
.city-insights { padding-left: 19px; }
.city-insights li { padding-bottom: 10px; }
.city-stock { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 10px; }
.city-stock b { color: #eddfbc; font-size: 19px; }
.city-muted, .city-limitations { color: #a9b7a4; font: 12px/1.6 system-ui, sans-serif; }
.city-muted { display: block; margin-top: 12px; }
.city-limitations { margin: 24px 0; border-top: 1px solid #4c5d45; padding-top: 16px; }
.city-limitations summary { cursor: pointer; min-height: 36px; }
.city-card .city-ready { color: #bae0a6; }
.city-card .city-blocked, .city-blocked { color: #edc18e; }
.city-notice { padding: 12px 16px; border-left: 3px solid #d2b16e; background: #35412b; color: #eee0bb; font: 13px/1.6 system-ui, sans-serif; overflow-wrap: anywhere; }
.city-empty { padding: 18px 0; color: #b5c1ad; font: 13px/1.6 system-ui, sans-serif; }
.city-list { margin: 0; padding: 0; list-style: none; }
.city-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 12px 0; border-bottom: 1px solid #43513d; }
.city-list span { color: #abbba1; font-size: 12px; }
.city-pulse { display: grid; gap: 10px; padding: 15px 0; }
.city-pulse > span, .city-pulse-link { display: flex; justify-content: space-between; gap: 12px; color: #b9c7af; font-size: 12px; }
.city-pulse b { color: #eedcaa; }
.city-pulse-link { width: 100%; border: 0; border-radius: 4px; padding: 4px; background: transparent; font: 12px/1.4 system-ui, sans-serif; text-align: left; cursor: pointer; }
.city-pulse-link:hover { background: rgba(215, 184, 112, .09); }
.city-pulse-link:focus-visible { outline: 2px solid #e5bd70; outline-offset: 2px; }
#cityOverlay { max-height: min(50vh, 520px); overflow-y: auto; }
#cityOverlay[data-map-compact="true"] .city-pulse-link:nth-child(n+3),
#cityOverlay[data-map-compact="true"] .city-overlay-priorities,
#cityOverlay[data-map-compact="true"] .city-overlay-work,
#cityOverlay[data-map-compact="true"] .screen-actions .command-action:not([data-view-jump="city"]):not([data-city-overlay-toggle]):not([data-city-map]):not([data-start-entry]),
#cityOverlay[data-map-compact="true"] > .city-muted { display: none; }
.city-overlay-priorities { border-top: 1px solid #35463b; padding: 10px 0; color: #d8e0d2; font: 12px/1.45 system-ui, sans-serif; }
.city-overlay-priorities ul { margin: 7px 0 0; padding-left: 18px; }
.city-overlay-priorities li { margin-bottom: 5px; overflow-wrap: anywhere; }
.city-overlay-work { border-top: 1px solid #35463b; padding: 7px 0; color: #c6d0c3; font: 12px/1.45 system-ui, sans-serif; }
.city-overlay-work summary { min-height: 44px; display: list-item; align-content: center; cursor: pointer; color: #e4ce98; }
.city-overlay-work ul { list-style: none; padding: 0; margin: 5px 0; }
.city-overlay-work li { border-top: 1px solid #35463b; padding: 9px 0; }
.city-overlay-work li b, .city-overlay-work li span { display: block; overflow-wrap: anywhere; }
.city-overlay-work li span { margin: 3px 0; }
.city-filters { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 15px; }
.city-filters label { display: flex; flex-direction: column; gap: 8px; color: #bcc7b2; font-size: 12px; max-width: 100%; }
.city-filters select { min-height: 44px; max-width: 100%; border: 1px solid #66734f; padding: 8px; border-radius: 4px; color: #efdfbc; background: #1e2e24; }
.city-workspace .command-action, #cityOverlay .command-action, #cityReview .command-action { min-height: 44px; }
.city-workspace [data-career-panel] label { display: grid; gap: 8px; margin: 12px 0; min-width: 0; }
.city-workspace [data-career-panel] input, .city-workspace [data-career-panel] select { width: 100%; max-width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; color: #efdfbc; background: #1e2e24; border: 1px solid #66734f; border-radius: 4px; padding: 8px; }
.city-review-details > div { border-top: 1px solid #45563e; padding: 10px 0; }
.city-review-details dt { color: #a9b89f; font-size: 12px; }
.city-review-details dd { margin: 5px 0 0; line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 700px) { .city-columns { grid-template-columns: 1fr; } .city-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .city-title { align-items: flex-start; flex-direction: column; } }

.regional-stats { grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); }
[data-regional-details] summary { min-height: 44px; cursor: pointer; color: #eddfbc; overflow-wrap: anywhere; }

[data-household-children] label { margin: 12px 0; }
[data-household-children] input { width: 100%; max-width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; color: #efdfbc; background: #1e2e24; border: 1px solid #66734f; border-radius: 4px; padding: 8px; }
[data-household-child] { margin-top: 18px; padding-top: 14px; border-top: 1px solid #4c5d45; }
[data-household-child] h4 { margin: 0 0 8px; color: #eddfbc; font: 18px Georgia, serif; }