.city-panel { display: none; min-height: 100%; padding-bottom: 16px; color: #aebcc9; }
.inspector-content.show-city > :not(.city-panel) { display: none !important; }
.inspector-content.show-city > .city-panel { display: block; }
.inspector:has(.inspector-content.show-city) .inspector-tabs { display: none; }
.inspector:has(.inspector-content.show-city) .inspector-content { height: calc(100% - 58px); }
.city-hero { padding: 19px 14px 16px; border-bottom: 1px solid #9db1c619; background: radial-gradient(ellipse at 85% 0, #5cf0bc20, transparent 70%), linear-gradient(130deg, #111c24, #0d1219); }
.city-hero > small { font-size: 8px; letter-spacing: .15em; color: #70dabc; }
.city-hero h3 { margin: 8px 0; color: #eff7f9; font-size: 17px; font-weight: 600; letter-spacing: -.035em; }
.city-hero p, .city-boundary p { margin: 0; color: #91a3b2; font-size: 10px; line-height: 1.6; }
.city-render-badge { display: inline-block; margin-top: 13px; padding: 4px 7px; border: 1px solid #71dfbd38; border-radius: 3px; color: #7ad7bc; font-size: 7px; letter-spacing: .08em; }
.city-section { padding: 14px; border-bottom: 1px solid #9db1c617; }
.city-section h4 { margin: 0 0 11px; color: #dbe4ed; font-size: 11px; font-weight: 600; }
.city-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 43px; cursor: pointer; }
.city-switch span { display: grid; gap: 4px; }
.city-switch b { color: #bac8d3; font-size: 10px; font-weight: 500; }
.city-switch small { color: #8595a6; font-size: 8px; line-height: 1.45; }
.city-switch input { flex: 0 0 auto; accent-color: #56f0bb; width: 14px; height: 14px; }
.city-panel fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.city-panel fieldset:disabled { opacity: .52; }
.city-panel fieldset:disabled .city-switch { cursor: default; }
.city-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(72px, 42%); gap: 8px; align-items: center; margin: 9px 0; color: #a4b4c3; font-size: 9px; }
.city-field input, .city-field select, .city-vector-fields input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 29px; padding: 4px 6px; border: 1px solid #9db1c632; border-radius: 4px; background: #080e14; color: #d6e1eb; font: inherit; }
.city-panel input:focus-visible, .city-panel select:focus-visible, .city-panel button:focus-visible, .city-panel a:focus-visible { outline: 2px solid #56f0bb; outline-offset: 2px; }
.city-panel input:invalid { border-color: #e59472; }
.city-panel #city-manual-wind { margin: 10px 0 13px; }
.city-panel #city-manual-wind legend { color: #a4b4c3; font-size: 9px; margin-bottom: 8px; }
.city-vector-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.city-vector-fields label { display: grid; gap: 5px; color: #8799aa; font-size: 8px; }
.city-note { margin: 8px 0; color: #8799aa; font-size: 9px; line-height: 1.6; }
.city-link-button { border: 0; background: none; padding: 4px 0; color: #85d8c0; cursor: pointer; text-align: left; font-size: 9px; }
.city-link-button:hover { color: #b5f8e2; }
.city-boundary { background: #101d2d55; }
.city-boundary p + p { margin-top: 9px; }
.city-render-action { width: 100%; margin-top: 12px; padding: 9px; color: #d1fff0; border: 1px solid #64ceac40; border-radius: 5px; background: #24644d66; font-size: 10px; cursor: pointer; }
.city-render-action:hover { background: #2c795c88; }
.city-validation { margin: 12px 14px; color: #8394a5; font-size: 9px; line-height: 1.55; }
.city-validation.error { color: #ffb99e; }
.city-credit { margin: 12px 14px; display: grid; gap: 5px; }
.city-credit a { color: #81cfbb; text-decoration: none; font-size: 9px; }
.city-credit a:hover { text-decoration: underline; }
.city-credit small { color: #708396; font-size: 8px; line-height: 1.5; }
.city-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }