*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f8f9fb;--bg-card: #ffffff;--bg-result: #f0f4ff;--bg-input: #ffffff;--text-primary: #1a1a2e;--text-secondary: #5a5a7a;--text-muted: #8a8aaa;--border: #e2e4ea;--border-focus: #6366f1;--accent-chihuahua: #e17055;--accent-chihuahua-soft: #fdf0ed;--accent-siegen: #4a90d9;--accent-siegen-soft: #edf3fc;--accent-highlight: #6366f1;--accent-highlight-soft: #eef0ff;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .1);--radius: 12px;--radius-sm: 8px;--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--badge-next: #059669;--badge-next-bg: #ecfdf5;--badge-prev: #dc2626;--badge-prev-bg: #fef2f2;--table-stripe: #f5f6f8}[data-theme=dark]{--bg: #0f1117;--bg-card: #1a1c25;--bg-result: #1e2035;--bg-input: #252736;--text-primary: #e8e8f0;--text-secondary: #a0a0ba;--text-muted: #6a6a8a;--border: #2e3040;--border-focus: #818cf8;--accent-chihuahua: #f0826d;--accent-chihuahua-soft: #2a1f1c;--accent-siegen: #6ba8e8;--accent-siegen-soft: #1a2230;--accent-highlight: #818cf8;--accent-highlight-soft: #1e2045;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .2);--shadow-md: 0 4px 12px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .4);--badge-next: #34d399;--badge-next-bg: #0d2e23;--badge-prev: #f87171;--badge-prev-bg: #2e1515;--table-stripe: #1e2030}html{font-family:var(--font);color:var(--text-primary);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh}.app{max-width:720px;margin:0 auto;padding:24px 16px 48px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;gap:16px;flex-wrap:wrap}.header__title h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}.header__subtitle{color:var(--text-secondary);font-size:.875rem;margin-top:2px}.header__controls{display:flex;align-items:center;gap:8px}.toggle-group{display:flex;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.toggle-group__btn{padding:6px 12px;font-size:.8rem;font-weight:500;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.toggle-group__btn--active{background:var(--accent-highlight);color:#fff}.theme-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.theme-btn:hover{border-color:var(--border-focus);color:var(--text-primary)}.section-title{font-size:1.1rem;font-weight:600;margin-bottom:16px;color:var(--text-primary)}.clocks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}.clock-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);transition:box-shadow .2s ease}.clock-card:hover{box-shadow:var(--shadow-md)}.clock-card--chihuahua{border-top:3px solid var(--accent-chihuahua)}.clock-card--siegen{border-top:3px solid var(--accent-siegen)}.clock-card__header{display:flex;align-items:center;gap:10px;margin-bottom:12px}.clock-card__flag{font-size:1.5rem}.clock-card__city{font-size:1rem;font-weight:600;line-height:1.2}.clock-card__country{font-size:.75rem;color:var(--text-muted)}.clock-card__time{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;margin-bottom:4px;font-variant-numeric:tabular-nums}.clock-card__date{font-size:.8rem;color:var(--text-secondary);margin-bottom:4px;text-transform:capitalize}.clock-card__offset{font-size:.75rem;color:var(--text-muted);font-family:monospace}.difference-label{text-align:center;color:var(--text-secondary);font-size:.9rem;margin-bottom:32px;padding:10px 16px;background:var(--accent-highlight-soft);border-radius:var(--radius-sm)}.difference-label strong{color:var(--accent-highlight)}.converter{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:24px;box-shadow:var(--shadow-sm)}.converter__controls{display:flex;align-items:flex-end;gap:12px;margin-bottom:16px;flex-wrap:wrap}.converter__city-select{flex:1;min-width:140px}.converter__city-select label,.converter__field label{display:block;font-size:.75rem;font-weight:500;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}.converter__city-select select,.converter__field select,.converter__field input{width:100%;padding:10px 12px;font-size:.9rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--text-primary);outline:none;transition:border-color .15s ease;font-family:inherit}.converter__city-select select:focus,.converter__field select:focus,.converter__field input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px #6366f11a}.converter__swap-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--bg-input);color:var(--text-secondary);cursor:pointer;transition:all .15s ease;flex-shrink:0}.converter__swap-btn:hover{background:var(--accent-highlight);color:#fff;border-color:var(--accent-highlight)}.converter__target-label{display:flex;align-items:center;gap:6px;font-size:.9rem;font-weight:500;color:var(--text-secondary);padding-bottom:10px}.converter__target-flag{font-size:1.2rem}.converter__inputs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px}.quick-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.quick-buttons__btn{padding:6px 14px;font-size:.8rem;font-weight:500;border:1px solid var(--border);border-radius:20px;background:var(--bg-input);color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.quick-buttons__btn:hover{border-color:var(--accent-highlight);color:var(--accent-highlight);background:var(--accent-highlight-soft)}.converter__result{background:var(--bg-result);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;align-items:center;gap:12px;position:relative}.converter__result-source,.converter__result-target{display:flex;align-items:center;gap:12px;width:100%}.converter__result-flag{font-size:1.5rem;flex-shrink:0}.converter__result-time{display:block;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.converter__result-time--highlight{font-size:2rem;color:var(--accent-highlight)}.converter__result-date{display:block;font-size:.8rem;color:var(--text-secondary);text-transform:capitalize}.converter__result-city{margin-left:auto;font-size:.85rem;color:var(--text-muted);font-weight:500}.converter__result-arrow{color:var(--text-muted)}.converter__day-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:600}.converter__day-badge--next-day{background:var(--badge-next-bg);color:var(--badge-next)}.converter__day-badge--previous-day{background:var(--badge-prev-bg);color:var(--badge-prev)}.reference-table{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:24px;box-shadow:var(--shadow-sm)}.reference-table__wrapper{overflow-x:auto}.reference-table table{width:100%;border-collapse:collapse}.reference-table th{text-align:left;font-size:.8rem;font-weight:600;color:var(--text-secondary);padding:10px 12px;border-bottom:2px solid var(--border);text-transform:uppercase;letter-spacing:.03em}.reference-table td{padding:10px 12px;font-size:.9rem;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--border)}.reference-table tbody tr:nth-child(2n){background:var(--table-stripe)}.reference-table__day-marker{font-size:.7rem;color:var(--text-muted);margin-left:4px}.footer{text-align:center;padding:24px 0 0;color:var(--text-muted);font-size:.75rem}@media(max-width:520px){.app{padding:16px 12px 32px}.header__title h1{font-size:1.2rem}.clocks{grid-template-columns:1fr;gap:12px}.clock-card__time{font-size:1.4rem}.converter__controls{flex-direction:column;align-items:stretch}.converter__swap-btn{align-self:center}.converter__target-label{justify-content:center}.converter__inputs{grid-template-columns:1fr}.converter__result-time{font-size:1.2rem}.converter__result-time--highlight{font-size:1.5rem}.quick-buttons{justify-content:center}}:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}button:focus:not(:focus-visible),select:focus:not(:focus-visible),input:focus:not(:focus-visible){outline:none}