*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #f6f6f3;--card: #ffffff;--border: #e5e3dd;--border-strong: #d9d7d1;--surface: #f0efeb;--text: #1c1b18;--text-secondary: #6f6c64;--text-faint: #a09d95;--accent: #d92b2b;--accent-soft: rgba(217, 43, 43, .08)}body{font-family:Poppins,sans-serif;background-color:var(--bg);color:var(--text);overflow-x:hidden}#root{display:flex;flex-direction:column}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-faint)}.app{min-height:100vh;background:var(--bg);padding:2rem;display:flex;flex-direction:column}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}.app-title{font-size:1.1rem;font-weight:600;letter-spacing:.02em;color:var(--text)}.search-container{display:flex;align-items:center;gap:.5rem;margin-left:auto}.add-clock-btn,.order-btn{background:transparent;border:none;color:var(--text-secondary);padding:0;border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:28px;height:28px}.add-clock-btn:hover,.order-btn:hover{color:var(--accent);background:var(--accent-soft)}.search-panel{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 4px 16px #1c1b180d}.search-input{width:100%;background:var(--card);border:1px solid var(--border-strong);border-radius:10px;padding:.85rem 1rem;font-family:Poppins,sans-serif;font-size:1rem;color:var(--text);outline:none;transition:border-color .2s ease,box-shadow .2s ease}.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.search-input::placeholder{color:var(--text-faint)}.search-results{margin-top:1rem;max-height:200px;overflow-y:auto;display:grid;gap:.5rem}.search-result-item{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.75rem 1rem;color:var(--text);font-family:Poppins,sans-serif;font-size:.9rem;cursor:pointer;transition:all .2s ease;text-align:left}.search-result-item:hover{border-color:var(--accent);background:var(--card)}.search-loading{text-align:center;color:var(--text-secondary);font-style:italic;padding:1rem;margin-top:1rem}.result-location{font-weight:600;margin-bottom:.25rem}.result-details{font-size:.8rem;color:var(--text-secondary)}.clocks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;align-content:start}.preset-section{margin-top:1.25rem}.preset-title{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:.5rem}.preset-chips{display:flex;flex-wrap:wrap;gap:.4rem;max-height:130px;overflow-y:auto}.preset-chip{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.3rem .8rem;color:var(--text);font-family:Poppins,sans-serif;font-size:.8rem;cursor:pointer;transition:all .2s ease}.preset-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--card)}@media(max-width:768px){.app{padding:1rem}.app-header{gap:1rem}.clocks-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.5rem}}.analog-clock-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.5rem 1rem;position:relative;transition:all .25s ease;box-shadow:0 1px 2px #1c1b180a,0 4px 16px #1c1b180f;display:flex;flex-direction:column;align-items:center;animation:slideIn .5s ease-out}.analog-clock-card:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:0 2px 4px #1c1b180d,0 10px 28px #1c1b181a}.remove-btn{position:absolute;top:.4rem;right:.4rem;background:transparent;border:none;border-radius:50%;width:22px;height:22px;color:var(--text-faint);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:10}.remove-btn:hover{background:var(--accent);color:#fff}.order-controls{position:absolute;top:.4rem;right:.4rem;display:flex;flex-direction:column;gap:2px;z-index:10}.order-btn-up,.order-btn-down{background:var(--surface);border:1px solid var(--border);border-radius:5px;width:22px;height:18px;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.order-btn-up:hover,.order-btn-down:hover{background:var(--accent);border-color:var(--accent);color:#fff}.clock-location{background:transparent;border:none;padding:0;font-family:Poppins,sans-serif;font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:.35rem;text-align:center;cursor:pointer;border-bottom:1px dashed transparent;transition:border-color .2s ease}.clock-location:hover{border-bottom-color:var(--text-faint)}.clock-location-input{background:var(--card);border:1px solid var(--accent);border-radius:6px;padding:.1rem .4rem;font-family:Poppins,sans-serif;font-size:.85rem;font-weight:600;color:var(--text);text-align:center;margin-bottom:.35rem;max-width:90%;outline:none}.analog-clock-container{width:130px;height:130px;margin-bottom:.4rem;position:relative}.analog-clock{width:100%;height:100%}.digital-time{font-size:1rem;font-weight:500;color:var(--text);text-align:center;font-family:Poppins,monospace;font-variant-numeric:tabular-nums;margin-bottom:.1rem}.clock-date{font-size:.65rem;font-weight:400;color:var(--text-secondary);text-align:center}.clock-meta{display:flex;gap:.6rem;margin-top:.35rem;font-size:.65rem;align-items:center}.zone-abbr{color:var(--text-secondary);font-weight:600;letter-spacing:.03em}.zone-offset{color:var(--text-secondary);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.05rem .5rem}@media(max-width:768px){.analog-clock-card{padding:1rem .5rem}.analog-clock-container{width:105px;height:105px}.clock-location{font-size:.75rem}.digital-time{font-size:.85rem}.clock-date{font-size:.6rem}}@keyframes slideIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}