.city-tier-admin { display: grid; gap: 16px; color: var(--text); }
.city-tier-admin .city-tier-note { margin: 0; color: var(--muted); line-height: 1.7; }
.city-tier-toolbar, .city-tier-footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.city-tier-admin output { color: var(--muted); font-size: 13px; line-height: 1.5; }
.city-tier-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.city-tier-card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 20px; display: grid; gap: 16px; min-width: 0; }
.city-tier-card.is-dirty { border-color: #c99841; }
.city-tier-card h3 { margin: 0; color: var(--gold); }
.city-tier-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.city-tier-fields label { display: grid; gap: 6px; min-width: 0; font-size: 13px; }
.city-tier-fields label > span { color: var(--gold); }
.city-tier-fields input { width: 100%; min-width: 0; box-sizing: border-box; }
.city-tier-fields input::placeholder { color: var(--muted); opacity: 1; }
.city-tier-pool-label { font-size: 13px; font-weight: 600; margin-bottom: -8px; color: var(--gold); }
.city-tier-pool { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; max-height: 180px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--panel-2); }
.city-tier-pool label { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.city-tier-pool input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; }
.city-tier-pool span { overflow-wrap: anywhere; }
.city-tier-hero { display: grid; align-content: start; gap: 6px; min-width: 0; }
.city-tier-hero-details { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding-left: 22px; }
.city-tier-pool .city-tier-hero-weight { color: var(--gold); flex: 0 0 auto; }
.city-tier-hero-weight input { width: 76px; min-width: 0; box-sizing: border-box; padding: 5px 7px; }
.city-tier-hero-weight input:disabled { opacity: .55; }
.city-tier-hero-probability { white-space: nowrap; }
.city-tier-pool-summary.is-error { color: #ef9a82; }
.city-tier-footer output { flex: 1 1 100%; }
.city-tier-composition { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: var(--panel-2); }
.city-tier-composition-toggle { display: flex; align-items: center; gap: 8px; color: var(--gold); font-size: 13px; }
.city-tier-composition-toggle input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; }
.city-tier-composition-body { display: grid; gap: 12px; }
.city-tier-composition [hidden] { display: none; }
.city-tier-composition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.city-tier-unit { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 5px 8px; padding: 12px; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.city-tier-unit-portrait { position: relative; display: grid; place-items: center; height: 124px; margin-bottom: 4px; overflow: hidden; }
/* Preserve the full artwork and its original aspect ratio within the existing portrait area. */
.city-tier-unit-portrait img { width: 100%; height: 124px; min-width: 0; object-fit: contain; object-position: center; }
.city-tier-unit-symbol { display: grid; place-items: center; width: 64px; height: 76px; background: #554532; border: 1px solid #977047; border-radius: 22px 22px 10px 10px; color: #ffe2a2; font-size: 35px; font-weight: 600; }
.city-tier-unit[data-unit="neutralGarrisonArcherPercent"] .city-tier-unit-symbol { background: #38432e; border-color: #708553; }
.city-tier-unit[data-unit="neutralGarrisonCavalryPercent"] .city-tier-unit-symbol { background: #343d4c; border-color: #6f819f; }
.city-tier-unit[data-unit="neutralGarrisonFamousHeroPercent"] .city-tier-unit-symbol { background: #613b2b; border-color: #a97e45; }
.city-tier-unit strong { color: var(--gold); font-size: 13px; }
.city-tier-unit-description { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.city-tier-unit label { grid-column: 1 / -1; display: grid; gap: 5px; margin-top: 7px; font-size: 12px; color: var(--gold); }
.city-tier-unit input { width: 100%; min-width: 0; box-sizing: border-box; }
.city-tier-unit output { grid-column: 1 / -1; }
.city-tier-unit output[data-unit-count] { color: var(--text); }
.city-tier-composition-summary { min-width: 0; }
.city-tier-composition output.is-error { color: #ef9a82; }
.city-progression-enabled { display: flex; align-items: center; gap: 8px; color: var(--gold); }
.city-progression-enabled input { flex: 0 0 18px; margin: 0; }
@media (max-width: 1000px) { .city-tier-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .city-tier-fields, .city-tier-pool { grid-template-columns: minmax(0, 1fr); } .city-tier-card { padding: 14px; } }
@media (max-width: 380px) { .city-tier-composition-grid { grid-template-columns: minmax(0, 1fr); } }