*{box-sizing:border-box;margin:0;padding:0}:root{--page-start: #3b82f6;--page-end: #7c3aed;--surface: #ffffff;--surface-muted: #f8fafc;--text: #1f2937;--text-muted: #64748b;--border: #dbe3ef;--accent: #4f46e5;--accent-strong: #4338ca;--success: #059669;--danger: #dc2626;--warning: #d97706;--shadow: 0 8px 22px rgba(15, 23, 42, .14)}body{min-height:100vh;padding:20px;color:var(--text);background:linear-gradient(135deg,var(--page-start),var(--page-end));font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body.dark-mode{--page-start: #111827;--page-end: #1e1b4b;--surface: #1e293b;--surface-muted: #0f172a;--text: #e5e7eb;--text-muted: #94a3b8;--border: #334155;--accent: #818cf8;--accent-strong: #6366f1;--success: #34d399;--danger: #f87171;--warning: #fbbf24;--shadow: 0 8px 22px rgba(0, 0, 0, .35)}body.light-mode{--page-start: #dbeafe;--page-end: #f8fafc;--accent: #2563eb;--accent-strong: #1d4ed8;--shadow: 0 6px 16px rgba(15, 23, 42, .08)}button,input{font:inherit}button{cursor:pointer}.container{max-width:1400px;margin:0 auto;padding-bottom:90px}.header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}h1{flex:1;color:#fff;font-size:2.5rem;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.26)}body.light-mode h1{color:var(--text);text-shadow:none}.theme-toggle{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;background:#fff3}.theme-toggle label{color:#fff;font-size:.875rem;font-weight:600}body.light-mode .theme-toggle label{color:var(--text)}.theme-switch{position:relative;width:60px;height:30px}.theme-switch input{width:0;height:0;opacity:0}.theme-slider{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;background:#334155;transition:background .2s ease}.theme-slider:before{position:absolute;left:4px;bottom:4px;display:grid;width:22px;height:22px;place-items:center;border-radius:50%;background:#fff;content:"🌙";font-size:.75rem;transition:transform .2s ease}input:checked+.theme-slider{background:#f59e0b}input:checked+.theme-slider:before{content:"☀️";transform:translate(30px)}.controls,.clock-card,.converter-toggle,.converter-panel{background:var(--surface);box-shadow:var(--shadow)}.controls{margin-bottom:28px;padding:20px;border-radius:8px}.add-timezone{display:flex;align-items:center;gap:10px}.add-timezone label{color:var(--text);font-weight:600}.timezone-search-wrapper{position:relative;flex:1;min-width:220px}.timezone-search{width:100%;padding:10px 12px;color:var(--text);border:2px solid var(--border);border-radius:6px;background:var(--surface)}.timezone-search:focus{border-color:var(--accent);outline:none}.timezone-dropdown{position:absolute;z-index:1000;top:calc(100% - 1px);left:0;right:0;display:none;max-height:300px;overflow-y:auto;border:2px solid var(--accent);border-top:0;border-radius:0 0 6px 6px;background:var(--surface);box-shadow:var(--shadow)}.timezone-dropdown.show{display:block}.timezone-option{display:block;width:100%;padding:10px 12px;color:var(--text);text-align:left;border:0;background:transparent}.timezone-option:hover,.timezone-option.focused{background:var(--surface-muted)}.timezone-group-label{position:sticky;top:0;padding:8px 12px;color:#fff;background:var(--accent);font-size:.75rem;font-weight:600;letter-spacing:0;text-transform:uppercase}.no-results{padding:20px;color:var(--text-muted);text-align:center}.add-timezone>button{padding:10px 20px;color:#fff;border:0;border-radius:6px;background:var(--accent);font-weight:600}.add-timezone>button:hover{background:var(--accent-strong)}.clocks-grid{display:flex;align-content:center;justify-content:space-between;align-items:stretch;justify-items:stretch;flex-wrap:wrap;flex-direction:row;gap:20px}.clock-card{position:relative;min-height:190px;padding:24px;border-radius:8px;cursor:move;animation:fade-in .2s ease-out;width:100%}@media (min-width: 480px){.clock-card{width:310px}}.clock-card:not(.home-clock):hover{transform:translateY(-2px)}.clock-card.dragging{opacity:.55}.home-clock{border:2px solid var(--success);cursor:default}.remove-btn{position:absolute;top:15px;right:15px;width:25px;height:25px;color:#fff;border:0;border-radius:50%;background:var(--danger);font-size:1.25rem;line-height:0;display:flex;justify-content:center;padding-top:10px}.timezone-name{margin-bottom:12px;padding-right:34px;color:var(--text);font-size:1.15rem;font-weight:700}.timezone-offset{display:inline-block;margin-bottom:10px;padding:4px 10px;color:var(--accent);border-radius:999px;background:color-mix(in srgb,var(--accent),transparent 88%);font-size:.85rem;font-weight:700}.time-display{margin-bottom:10px;color:var(--accent);font-size:2rem;font-variant-numeric:tabular-nums;font-weight:700}.date-display{color:var(--text-muted)}.no-clocks{padding:40px;color:#fff;border-radius:8px;background:#ffffff1f;font-size:1.15rem;text-align:center}body.light-mode .no-clocks{color:var(--text);background:#0f172a0d}.converter-toggle{position:fixed;z-index:1500;right:0;bottom:0;left:0}.toggle-converter-btn{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;padding:15px;color:var(--accent);border:0;background:transparent;font-weight:600}.toggle-converter-btn:hover{background:var(--surface-muted)}.toggle-icon{transition:transform .2s ease}.converter-toggle.open .toggle-icon{transform:rotate(180deg)}.converter-panel{position:fixed;z-index:1400;right:0;bottom:0;left:0;max-height:0;overflow:hidden;transition:max-height .25s ease}.converter-panel.open{max-height:70vh;overflow-y:auto}.converter-header{position:relative;padding:24px 30px 16px;border-bottom:1px solid var(--border)}.converter-header h2{margin-bottom:6px;padding-right:48px;color:var(--text);font-size:1.5rem}.converter-header p{color:var(--text-muted);font-size:.9rem}.converter-close-btn{position:absolute;top:18px;right:20px;width:38px;height:38px;color:var(--text-muted);border:0;border-radius:50%;background:transparent;font-size:1.75rem;line-height:1}.converter-close-btn:hover{color:var(--text);background:var(--surface-muted)}.converter-sliders{display:grid;grid-template-columns:1fr;gap:18px;padding:16px 30px 82px}.slider-item{padding:16px 18px;border:2px solid transparent;border-radius:8px;background:var(--surface-muted)}.slider-item.home-slider{border-color:var(--success);background:color-mix(in srgb,var(--success),transparent 92%)}.slider-label,.slider-time-container,.slider-markers{display:flex;align-items:center}.slider-label{justify-content:space-between;gap:16px;margin-bottom:10px}.slider-timezone-name{color:var(--text);font-weight:700}.slider-time-container{flex-shrink:0;gap:8px}.slider-time{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:700}.day-offset{padding:2px 8px;color:var(--warning);border-radius:999px;background:color-mix(in srgb,var(--warning),transparent 86%);font-size:.75rem;font-weight:600;white-space:nowrap}.time-slider{width:100%;height:6px;border-radius:999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to right,var(--accent),var(--success))}.time-slider::-webkit-slider-thumb{width:20px;height:20px;border:3px solid var(--accent);border-radius:50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff}.time-slider::-moz-range-thumb{width:16px;height:16px;border:3px solid var(--accent);border-radius:50%;background:#fff}.slider-markers{justify-content:space-between;margin-top:4px;color:var(--text-muted);font-size:.7rem}@keyframes fade-in{0%{opacity:0;transform:translateY(12px)}}@media (min-width: 1200px){.converter-sliders{grid-template-columns:1fr 1fr}}@media (max-width: 720px){body{padding:14px}.header,.add-timezone,.slider-label{align-items:stretch;flex-direction:column}h1{font-size:2rem;text-align:left}.theme-toggle,.add-timezone>button{align-self:flex-start}.timezone-search-wrapper,.add-timezone>button{width:100%}.converter-header,.converter-sliders{padding-right:18px;padding-left:18px}.slider-time-container{align-self:flex-start}}