*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,sans-serif;background-color:#1a1a1a;color:#fff;overflow-x:hidden}#root{display:flex;flex-direction:column}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb{background:#333;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#444}.app{height:100%;background:#1a1a1a;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 #333}.app-header h1{font-size:2.5rem;font-weight:600;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5)}.search-container{display:flex;align-items:center;gap:.5rem;margin-left:auto}.add-clock-btn,.order-btn{background:transparent;border:none;color:#fff;padding:0;border-radius:4px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;width:24px;height:24px}.add-clock-btn:hover,.order-btn:hover{color:#4a90e2;background:#4a90e21a;transform:scale(1.1)}.search-panel{background:#1a1a1ae6;border:1px solid #333;border-radius:12px;padding:1.5rem;margin-bottom:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.search-input{width:100%;background:#1a1a1a;border:1px solid #444;border-radius:8px;padding:1rem;font-family:Poppins,sans-serif;font-size:1rem;color:#fff;outline:none;transition:border-color .3s ease}.search-input:focus{border-color:#4a90e2;box-shadow:0 0 0 3px #4a90e21a}.search-input::placeholder{color:#888}.search-results{margin-top:1rem;max-height:200px;overflow-y:auto;display:grid;gap:.5rem}.search-result-item{background:#2a2a2a;border:1px solid #444;border-radius:6px;padding:.75rem 1rem;color:#fff;font-family:Poppins,sans-serif;font-size:.9rem;cursor:pointer;transition:all .3s ease;text-align:left}.search-result-item:hover{background:#3a3a3a;border-color:#4a90e2;transform:translate(4px)}.search-loading{text-align:center;color:#4a90e2;font-style:italic;padding:1rem;margin-top:1rem}.result-location{font-weight:600;margin-bottom:.25rem}.result-details{font-size:.8rem;color:#888;opacity:.8}.clocks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;height:400px;overflow:visible}@media(max-width:768px){.app{padding:1rem}.app-header{flex-direction:column;gap:1rem;text-align:center}.app-header h1{font-size:2rem}.clocks-grid{grid-template-columns:1fr;gap:.5rem;height:800px}}.analog-clock-card{background:#1a1a1acc;border:1px solid #333;border-radius:8px;padding:3rem;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;box-shadow:0 8px 32px #0000004d;display:flex;flex-direction:column;align-items:center;animation:slideIn .5s ease-out}.analog-clock-card:hover{transform:translateY(-4px);border-color:#4a90e2;box-shadow:0 12px 40px #0006,0 0 20px #4a90e21a}.remove-btn{position:absolute;top:.25rem;right:.25rem;background:transparent;border:none;border-radius:50%;width:20px;height:20px;color:#fff;font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;opacity:.7;z-index:10}.remove-btn:hover{background:#dc3545;opacity:1;transform:scale(1.1)}.order-controls{position:absolute;top:.25rem;right:.25rem;display:flex;flex-direction:column;gap:2px;z-index:10}.order-btn-up,.order-btn-down{background:#4a90e2cc;border:none;border-radius:4px;width:20px;height:16px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;opacity:.7}.order-btn-up:hover,.order-btn-down:hover{background:#4a90e2;opacity:1;transform:scale(1.1)}.order-btn-up:disabled,.order-btn-down:disabled{opacity:.3;cursor:not-allowed}.clock-location{font-size:.85rem;font-weight:600;color:#4a90e2;margin-bottom:.25rem;text-align:center}.analog-clock-container{width:120px;height:120px;margin-bottom:.25rem;position:relative}.analog-clock{width:100%;height:100%;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.hour-hand{transition:transform .5s ease-in-out;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.minute-hand{transition:transform .5s ease-in-out;filter:drop-shadow(0 2px 4px rgba(74,144,226,.3))}.second-hand{transition:transform .1s ease-out;filter:drop-shadow(0 1px 2px rgba(255,71,87,.5))}.digital-time{font-size:1rem;font-weight:400;color:#fff;text-align:center;font-family:Poppins,monospace;margin-bottom:.1rem;text-shadow:0 2px 4px rgba(0,0,0,.5);opacity:.9}.clock-date{font-size:.65rem;font-weight:400;color:#ccc;text-align:center;opacity:.8}@media(max-width:768px){.analog-clock-card{padding:.5rem}.analog-clock-container{width:100px;height:100px}.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)}}@keyframes tickSecond{0%{transform:rotate(0)}to{transform:rotate(6deg)}}.analog-clock .hour-hand:hover{stroke:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.6))}.analog-clock .minute-hand:hover{stroke:#5aa3f0;filter:drop-shadow(0 0 8px rgba(74,144,226,.8))}.analog-clock .second-hand:hover{stroke:#ff6b7a;filter:drop-shadow(0 0 8px rgba(255,71,87,.8))}