.city-areas-page { max-width:1100px; margin:0 auto; padding:30px 24px 42px; }
.city-areas-back { color:var(--muted); font-size:14px; }
.city-areas-heading h1 { margin:16px 0 8px; font-size:28px; line-height:1.25; }
.city-areas-heading p { color:var(--muted); font-size:17px; line-height:1.5; }
.city-areas-section { margin-top:28px; }
.city-areas-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.city-areas-toolbar h2 { font-size:20px; font-weight:700; }
.city-area-search { display:flex; align-items:center; gap:10px; width:280px; max-width:100%; padding:0 12px; background:#fff; border:1px solid var(--line); border-radius:6px; color:var(--muted); }
.city-area-search input { width:100%; min-width:0; height:42px; border:0; background:transparent; font:inherit; font-size:16px; color:var(--ink); }
.city-area-search:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.city-area-search input:focus-visible { outline:0; }
.city-area-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; list-style:none; margin:0; padding:0; }
.city-area-grid li[hidden] { display:none; }
.city-area-grid a { min-height:62px; height:100%; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; border:1px solid #c6dce3; border-radius:7px; background:#fff; color:var(--accent); font-size:17px; line-height:1.3; transition:background .15s,border-color .15s; }
.city-area-grid a:hover { background:var(--accent-light); border-color:var(--accent); }
.city-area-grid a span { min-width:0; overflow-wrap:anywhere; hyphens:auto; }
.city-area-grid a .icon { width:17px; height:17px; flex-shrink:0; }
.city-areas-all { border-top:1px solid var(--line); margin-top:24px; padding-top:18px; }
.city-areas-all p { color:var(--muted); font-size:14px; line-height:1.5; margin-bottom:10px; }
.city-areas-all a { color:var(--accent); font-size:15px; text-decoration:underline; text-underline-offset:3px; }
.city-area-empty { padding:20px 0; color:var(--muted); }
@media(max-width:900px) { .city-area-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) {
 .city-areas-page { padding:20px 16px 28px; }
 .city-areas-heading h1 { font-size:24px; margin-top:14px; }
 .city-areas-heading p { font-size:16px; }
 .city-areas-section { margin-top:24px; }
 .city-areas-toolbar { align-items:stretch; flex-direction:column; gap:12px; }
 .city-area-search { width:100%; }
 .city-area-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .city-area-grid a { min-height:58px; padding:12px; font-size:16px; }
}