.directory-page{max-width:1200px;margin:0 auto;padding:2rem 1.5rem 4rem}.directory-page .breadcrumb{color:var(--color-text-tertiary);align-items:center;gap:.5rem;margin-bottom:1.5rem;font-size:.875rem;display:flex}.directory-page .breadcrumb a{color:var(--color-accent);text-decoration:none}.directory-page .breadcrumb a:hover{text-decoration:underline}.directory-page .breadcrumb .separator{color:var(--color-border)}.directory-page .breadcrumb .current{color:var(--color-text-secondary)}.directory-hero{text-align:center;margin-bottom:2rem}.directory-hero h1{color:var(--color-text-primary);margin:0 0 .75rem;font-size:clamp(2rem,5vw,2.75rem);font-weight:800}.directory-hero p{color:var(--color-text-secondary);margin:0;font-size:1.125rem}.search-section{margin-bottom:1.5rem}.search-input{background:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);width:100%;max-width:500px;color:var(--color-text-primary);margin:0 auto;padding:1rem 1.25rem;font-size:1rem;display:block}.search-input:focus{border-color:var(--color-accent);outline:none}.search-input::placeholder{color:var(--color-text-tertiary)}.filter-toggle{justify-content:center;gap:.5rem;margin-bottom:1.5rem;display:flex}.filter-toggle button{background:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);padding:.5rem 1.25rem;font-size:.875rem}.filter-toggle button:hover{background:var(--color-bg-tertiary)}.filter-toggle button.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.letter-nav{background:var(--color-bg-secondary);border-radius:var(--radius-lg);flex-wrap:wrap;justify-content:center;gap:.375rem;margin-bottom:1.5rem;padding:1rem;display:flex}.letter-nav button{border-radius:var(--radius-sm);width:36px;height:36px;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:1px solid #0000;justify-content:center;align-items:center;font-size:.875rem;font-weight:600;display:flex}.letter-nav button:hover:not(.disabled){color:var(--color-text-primary);background:#ffffff1a}.letter-nav button.active{background:var(--color-accent);color:#fff}.letter-nav button.disabled{opacity:.3;cursor:not-allowed}.country-select{max-width:300px;margin:0 auto 1.5rem}.country-select select{background:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);width:100%;color:var(--color-text-primary);cursor:pointer;padding:.75rem 1rem;font-size:1rem}.country-select select:focus{border-color:var(--color-accent);outline:none}.results-count{text-align:center;color:var(--color-text-tertiary);margin-bottom:1.5rem;font-size:.875rem}.cities-by-letter{margin-bottom:3rem}.letter-section{margin-bottom:2rem}.letter-heading{color:var(--color-accent);border-bottom:2px solid var(--color-border-subtle);margin:0 0 1rem;padding-bottom:.5rem;font-size:1.5rem;font-weight:700}.cities-grid,.cities-grid-flat{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;display:grid}.cities-grid-flat{margin-bottom:3rem}.city-card{background:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:inherit;transition:all var(--transition-fast);align-items:center;gap:.75rem;padding:.875rem 1rem;text-decoration:none;display:flex}.city-card:hover{background:var(--color-bg-tertiary);border-color:var(--color-accent);transform:translateY(-1px)}.city-emoji{font-size:1.5rem}.city-info{flex-direction:column;gap:.125rem;min-width:0;display:flex}.city-card .city-name{white-space:nowrap;text-overflow:ellipsis;font-size:.9375rem;font-weight:600;overflow:hidden;color:var(--color-text-primary)!important}.city-country{color:var(--color-text-tertiary);font-size:.75rem}.popular-section{margin-bottom:3rem}.popular-section h2{color:var(--color-text-primary);margin:0 0 1rem;font-size:1.25rem;font-weight:700}.popular-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;display:grid}.popular-card{border-radius:var(--radius-lg);text-align:center;transition:all var(--transition-fast);background:linear-gradient(135deg,#3b82f61a,#8b5cf61a);border:1px solid #3b82f633;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem 1rem;text-decoration:none;display:flex}.popular-card:hover{border-color:var(--color-accent);transform:translateY(-2px);box-shadow:0 4px 16px #0003}.popular-emoji{font-size:2rem}.popular-name{color:var(--color-text-primary);font-size:1rem;font-weight:600}.popular-country{color:var(--color-text-tertiary);font-size:.75rem}.directory-page .seo-content{background:var(--color-bg-secondary);border-radius:var(--radius-lg);margin-bottom:2rem;padding:2rem}.directory-page .seo-content h2{color:var(--color-text-primary);margin:0 0 1rem;font-size:1.25rem;font-weight:700}.directory-page .seo-content h3{color:var(--color-text-primary);margin:1.5rem 0 .75rem;font-size:1rem;font-weight:600}.directory-page .seo-content p{color:var(--color-text-secondary);margin:0 0 1rem;line-height:1.7}.directory-page .seo-content ul{margin:0;padding-left:1.5rem}.directory-page .seo-content li{color:var(--color-text-secondary);margin-bottom:.5rem;line-height:1.7}.directory-page .seo-content li strong{color:var(--color-text-primary)}@media (max-width:768px){.directory-page{padding:1.5rem 1rem 3rem}.cities-grid,.cities-grid-flat{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.popular-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.letter-nav{gap:.25rem;padding:.75rem}.letter-nav button{width:30px;height:30px;font-size:.75rem}}