.world-clock-container{display:flex;flex-direction:column;gap:1.5rem;padding:1rem;width:100%;height:100%}.local-time-card{background:var(--card-bg, #1a1a2e);border-radius:12px;padding:1.5rem;text-align:center;border:1px solid var(--border-color, #333);position:relative;overflow:hidden;transition:background .3s ease}.local-time-card:before{content:"";position:absolute;inset:0;opacity:.2;z-index:0;transition:opacity .3s ease}.local-time-card>*{position:relative;z-index:1}.local-time-card.time-night:before{background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);opacity:.3}.local-time-card.time-dawn:before{background:linear-gradient(135deg,#ff6b6b,#feca57,#48dbfb);opacity:.25}.local-time-card.time-morning:before{background:linear-gradient(135deg,#ffd89b,#19547b);opacity:.2}.local-time-card.time-day:before{background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);opacity:.15}.local-time-card.time-afternoon:before{background:linear-gradient(135deg,#f6d365,#fda085);opacity:.2}.local-time-card.time-dusk:before{background:linear-gradient(135deg,#ee9ca7,#ffdde1,#2193b0);opacity:.25}.local-time-card.time-evening:before{background:linear-gradient(135deg,#141e30,#243b55);opacity:.3}.local-time-card h3{margin:0 0 .5rem;font-size:1rem;color:var(--text-secondary, #888);font-weight:500}.local-time-display{font-size:3rem;font-weight:700;font-family:JetBrains Mono,Fira Code,SF Mono,Consolas,Liberation Mono,Menlo,monospace;color:var(--primary-color, #00d9ff);line-height:1.2}.local-date-display{font-size:1rem;color:var(--text-secondary, #888);margin-top:.5rem}.city-search-container{position:relative}.city-search-input{width:100%;padding:.75rem 1rem .75rem 2.5rem;border:1px solid var(--border-color, #333);border-radius:8px;background:var(--input-bg, #0d0d1a);color:var(--text-color, #fff);font-size:1rem;transition:border-color .2s ease}.city-search-input:focus{outline:none;border-color:var(--primary-color, #00d9ff)}.search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--text-secondary, #888);pointer-events:none}.selected-cities-section{margin-top:1rem}.section-title{font-size:.875rem;color:var(--text-secondary, #888);margin-bottom:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em}.city-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.city-card{background:var(--card-bg, #1a1a2e);border-radius:12px;padding:1rem 1.25rem;border:1px solid var(--border-color, #333);display:flex;justify-content:space-between;align-items:center;transition:transform .2s ease,box-shadow .2s ease,background .3s ease;position:relative;overflow:hidden}.city-card:before{content:"";position:absolute;inset:0;opacity:.2;z-index:0;transition:opacity .3s ease}.city-card>*{position:relative;z-index:1}.city-card.time-night:before{background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);opacity:.3}.city-card.time-dawn:before{background:linear-gradient(135deg,#ff6b6b,#feca57,#48dbfb);opacity:.25}.city-card.time-morning:before{background:linear-gradient(135deg,#ffd89b,#19547b);opacity:.2}.city-card.time-day:before{background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);opacity:.15}.city-card.time-afternoon:before{background:linear-gradient(135deg,#f6d365,#fda085);opacity:.2}.city-card.time-dusk:before{background:linear-gradient(135deg,#ee9ca7,#ffdde1,#2193b0);opacity:.25}.city-card.time-evening:before{background:linear-gradient(135deg,#141e30,#243b55);opacity:.3}.city-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.city-card:hover:before{opacity:.35}.city-info{display:flex;flex-direction:column;gap:.25rem}.city-name{font-size:1rem;font-weight:600;color:var(--text-color, #fff)}.city-country{font-size:.75rem;color:var(--text-secondary, #888)}.city-timezone{font-size:.75rem;color:var(--text-muted, #666)}.city-time-info{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}.city-time{font-size:1.5rem;font-weight:700;font-family:JetBrains Mono,Fira Code,SF Mono,Consolas,Liberation Mono,Menlo,monospace;color:var(--primary-color, #00d9ff)}.city-date{font-size:.75rem;color:var(--text-secondary, #888)}.time-difference{font-size:.75rem;padding:.125rem .5rem;border-radius:4px;background:var(--badge-bg, rgba(0, 217, 255, .1));color:var(--primary-color, #00d9ff)}.time-difference.ahead{background:#27ae6026;color:#27ae60}.time-difference.behind{background:#e74c3c26;color:#e74c3c}.city-card-actions{display:flex;gap:.5rem;margin-left:1rem}.btn-remove{background:transparent;border:none;color:var(--text-secondary, #888);cursor:pointer;padding:.25rem;border-radius:4px;transition:color .2s ease,background .2s ease}.btn-remove:hover{color:#e74c3c;background:#e74c3c26}.available-cities-section{margin-top:1.5rem;display:flex;flex-direction:column;flex:1;min-height:0}.available-cities-list{display:flex;flex-wrap:wrap;gap:.5rem;flex:1;overflow-y:auto;padding:.5rem;background:var(--input-bg, #0d0d1a);border-radius:8px;border:1px solid var(--border-color, #333);align-content:flex-start}.city-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--card-bg, #1a1a2e);border:1px solid var(--border-color, #333);border-radius:20px;cursor:pointer;transition:background .2s ease,border-color .2s ease;font-size:.875rem;color:var(--text-color, #fff)}.city-chip:hover{background:var(--hover-bg, #252540);border-color:var(--primary-color, #00d9ff)}.city-chip-flag{font-size:1rem}.city-chip-name{font-weight:500}.no-results{text-align:center;padding:2rem;color:var(--text-secondary, #888)}.empty-state{text-align:center;padding:2rem;color:var(--text-secondary, #888);background:var(--card-bg, #1a1a2e);border-radius:12px;border:1px dashed var(--border-color, #333)}.empty-state p{margin:0}@media(max-width:600px){.local-time-display{font-size:2.5rem}.city-cards-grid{grid-template-columns:1fr}.city-card{flex-direction:column;align-items:flex-start;gap:.75rem}.city-time-info{align-items:flex-start;width:100%;flex-direction:row;justify-content:space-between}.city-card-actions{position:absolute;right:1rem;top:1rem;margin-left:0}.city-card{position:relative}}