.world-clock-map-page{background:linear-gradient(135deg,var(--bg-darker)0%,var(--bg-dark)100%);min-height:100vh;padding-top:80px}.map-hero{text-align:center;max-width:800px;margin:0 auto;padding:3rem 1.5rem 2rem}.map-hero h1{background:linear-gradient(135deg,#fff 0%,#87ceeb 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:1rem;font-size:2.5rem;font-weight:700}.map-subtitle{color:var(--text-secondary);max-width:600px;margin:0 auto 1.5rem;font-size:1.1rem;line-height:1.6}.map-controls{justify-content:center;gap:.5rem;display:flex}.format-toggle{color:var(--text-secondary);cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:8px;padding:.5rem 1rem;font-size:.9rem;transition:all .2s}.format-toggle:hover,.format-toggle.active{color:#87ceeb;background:#87ceeb33;border-color:#87ceeb}.map-container{max-width:1200px;margin:0 auto;padding:0 1rem}.world-map{border-radius:16px;width:100%;height:auto;overflow:hidden;box-shadow:0 20px 60px #0006}.continents{opacity:.8}.city-marker{transition:all .2s}.city-marker:hover circle{r:6}.city-marker .city-label{opacity:0;text-shadow:0 1px 3px #000c;font-family:Inter,sans-serif;transition:opacity .2s}.city-marker:hover .city-label,.city-marker.selected .city-label{opacity:1}.city-marker .city-time{text-shadow:0 1px 3px #000c;font-family:Inter,sans-serif}.selected-city-panel{max-width:600px;margin:2rem auto;padding:0 1rem}.selected-city-content{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;align-items:center;gap:1rem;padding:1.5rem;display:flex}.selected-city-emoji{font-size:2.5rem}.selected-city-info{flex:1}.selected-city-info h2{color:var(--text-primary);margin-bottom:.25rem;font-size:1.25rem;font-weight:600}.selected-city-time{color:#87ceeb;margin:0;font-size:1.75rem;font-weight:700}.selected-city-timezone{color:var(--text-muted);margin:0;font-size:.85rem}.view-city-btn{color:#0f172a;background:linear-gradient(135deg,#87ceeb 0%,#6bb3d9 100%);border-radius:8px;padding:.75rem 1.25rem;font-weight:600;text-decoration:none;transition:all .2s}.view-city-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #87ceeb4d}.map-cities-grid{max-width:1200px;margin:3rem auto;padding:0 1rem}.map-cities-grid h2{color:var(--text-primary);text-align:center;margin-bottom:1.5rem;font-size:1.5rem;font-weight:600}.cities-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;display:grid}.city-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;align-items:center;gap:.75rem;padding:1rem;text-decoration:none;transition:all .2s;display:flex}.city-card:hover{background:#ffffff1a;border-color:#fff3;transform:translateY(-2px)}.city-card.day{border-left:3px solid gold}.city-card.night{border-left:3px solid #87ceeb}.city-card .city-emoji{font-size:1.5rem}.city-card .city-info{flex-direction:column;display:flex}.city-card .city-name{color:var(--text-primary);font-size:.9rem;font-weight:500}.city-card .city-time{color:#87ceeb;font-size:1.1rem;font-weight:600}.city-card.day .city-time{color:gold}.map-seo-content{background:#ffffff08;border-radius:16px;max-width:800px;margin:4rem auto;padding:2rem}.map-seo-content h2{color:var(--text-primary);margin-bottom:1rem;font-size:1.5rem;font-weight:600}.map-seo-content h3{color:var(--text-primary);margin:1.5rem 0 .75rem;font-size:1.2rem;font-weight:600}.map-seo-content p{color:var(--text-secondary);margin-bottom:1rem;line-height:1.7}.map-seo-content ul{padding:0;list-style:none}.map-seo-content li{color:var(--text-secondary);padding:.5rem 0 .5rem 1.5rem;position:relative}.map-seo-content li:before{content:"→";color:#87ceeb;position:absolute;left:0}.map-seo-content a{color:#87ceeb;text-decoration:none}.map-seo-content a:hover{text-decoration:underline}.map-cta{text-align:center;max-width:600px;margin:0 auto;padding:3rem 1.5rem}.map-cta h2{color:var(--text-primary);margin-bottom:.75rem;font-size:1.5rem;font-weight:600}.map-cta p{color:var(--text-secondary);margin-bottom:1.5rem}.map-cta .cta-button{color:#0f172a;background:linear-gradient(135deg,#87ceeb 0%,#6bb3d9 100%);border-radius:12px;align-items:center;gap:.5rem;padding:1rem 2rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.map-cta .cta-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #87ceeb4d}@media (max-width:768px){.map-hero h1{font-size:2rem}.map-subtitle{font-size:1rem}.selected-city-content{text-align:center;flex-wrap:wrap;justify-content:center}.selected-city-info{text-align:center;width:100%}.cities-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.cities-grid{grid-template-columns:1fr}}