.city-page{max-width:900px;margin:0 auto;padding:20px}.city-page.error{text-align:center;padding:60px 20px}.city-page.error h1{color:var(--color-error,#ef4444)}.city-page .breadcrumb{color:var(--color-text-tertiary);align-items:center;gap:8px;margin-bottom:24px;font-size:14px;display:flex}.city-page .breadcrumb a{color:var(--color-accent);text-decoration:none}.city-page .breadcrumb a:hover{text-decoration:underline}.city-page .breadcrumb .separator{color:var(--color-text-tertiary)}.city-page .breadcrumb .current{color:var(--color-text-primary);font-weight:500}.city-hero{text-align:center;background:linear-gradient(135deg,var(--color-dawn)0%,var(--color-day)100%);border-radius:var(--radius-lg);color:#09090b;min-height:280px;margin-bottom:32px;padding:40px 20px}.city-emoji-large{margin-bottom:16px;font-size:64px}.city-hero h1{margin:0 0 8px;font-size:32px;font-weight:700}.city-hero .city-country{opacity:.8;margin:0;font-size:18px}.clock-display{background:var(--color-surface);-webkit-backdrop-filter:blur(16px);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-align:center;margin-bottom:32px;padding:48px 32px}.live-time{color:var(--color-text-primary);font-variant-numeric:tabular-nums;letter-spacing:-2px;min-height:64px;font-size:64px;font-weight:700;line-height:1}.live-date{color:var(--color-text-secondary);margin:16px 0;font-size:20px}.timezone-info{justify-content:center;gap:16px;margin-top:16px;display:flex}.tz-abbr{background:linear-gradient(135deg,var(--color-dawn),var(--color-day));color:#09090b;border-radius:20px;padding:8px 16px;font-size:14px;font-weight:600}.tz-offset{background:var(--color-surface-solid);border:1px solid var(--color-border);color:var(--color-text-secondary);border-radius:20px;padding:8px 16px;font-size:14px}.best-time-section{background:linear-gradient(135deg,var(--color-night)0%,var(--color-dusk)100%);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-align:center;margin-bottom:32px;padding:32px}.best-time-section h2{color:var(--color-text-primary);margin:0 0 16px;font-size:20px}.time-diff-badge{color:var(--color-text-secondary);margin:0 0 24px;font-size:16px}.time-diff-badge strong{color:var(--color-day)}.calling-hours{justify-content:center;gap:32px;margin-bottom:16px;display:flex}.calling-hour-item{border:1px solid var(--color-border);border-radius:var(--radius-md);background:#0000004d;flex-direction:column;gap:8px;padding:16px 24px;display:flex}.calling-label{color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.5px;font-size:12px}.calling-value{color:var(--color-text-primary);font-size:18px;font-weight:600}.calling-note{color:var(--color-text-tertiary);margin:0;font-size:13px}.quick-facts{background:var(--color-surface);-webkit-backdrop-filter:blur(16px);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:32px;padding:32px}.quick-facts h2{color:var(--color-text-primary);margin:0 0 20px;font-size:20px}.facts-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;min-height:80px;display:grid}.fact-item{background:var(--color-surface-solid);border:1px solid var(--color-border);border-radius:var(--radius-md);flex-direction:column;gap:4px;padding:16px;display:flex}.fact-label{color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.5px;font-size:12px}.fact-value{color:var(--color-text-primary);word-break:break-word;font-size:16px;font-weight:600}.compare-section{background:var(--color-surface);-webkit-backdrop-filter:blur(16px);border:1px solid var(--color-border);border-radius:var(--radius-lg);min-height:160px;margin-bottom:32px;padding:32px}.compare-section h2{color:var(--color-text-primary);margin:0 0 20px;font-size:20px}.compare-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;display:grid}.compare-card{background:var(--color-surface-solid);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-fast);flex-direction:column;align-items:center;gap:8px;padding:20px 16px;text-decoration:none;display:flex}.compare-card:hover{background:linear-gradient(135deg,var(--color-dawn),var(--color-day));border-color:#0000;transform:translateY(-2px)}.compare-emoji{font-size:32px}.compare-name{color:var(--color-text-primary);font-size:14px;font-weight:500}.compare-card:hover .compare-name{color:#09090b}.related-cities{background:var(--color-surface);-webkit-backdrop-filter:blur(16px);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:32px;padding:32px}.related-cities h2{color:var(--color-text-primary);margin:0 0 20px;font-size:20px}.cities-grid{flex-wrap:wrap;gap:12px;display:flex}.city-link{background:var(--color-surface-solid);border:1px solid var(--color-border);color:var(--color-text-primary);border-radius:var(--radius-sm);transition:all var(--transition-fast);padding:10px 16px;font-size:14px;text-decoration:none}.city-link:hover{background:linear-gradient(135deg,var(--color-dawn),var(--color-day));color:#09090b;border-color:#0000}.city-page .faq-section{background:var(--color-surface);-webkit-backdrop-filter:blur(16px);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:32px;padding:32px}.city-page .faq-section h2{color:var(--color-text-primary);margin:0 0 24px;font-size:24px}.city-page .faq-item{background:var(--color-surface-solid);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:16px;padding:20px}.city-page .faq-item:last-child{margin-bottom:0}.city-page .faq-item h3{color:var(--color-text-primary);margin:0 0 12px;font-size:16px;font-weight:600}.city-page .faq-item p{color:var(--color-text-secondary);margin:0;line-height:1.6}.city-page .faq-item a{color:var(--color-accent)}@media (max-width:768px){.city-page{padding:16px}.city-hero{min-height:220px;padding:24px 16px}.city-hero h1{font-size:24px}.city-emoji-large{font-size:48px}.clock-display{padding:32px 16px}.live-time{font-size:42px}.live-date{font-size:16px}.timezone-info{flex-direction:column;gap:8px}.quick-facts,.compare-section,.related-cities,.best-time-section,.city-page .faq-section{padding:20px}.calling-hours{flex-direction:column;gap:12px}.calling-hour-item{padding:12px 16px}.calling-value{font-size:16px}}