:root{--accent:#3b5c4f;--accent-mid:#52796f;--accent-light:#eaf1ee;--gold:#c8860a;--gold-light:#fdf5e6;--bg:#f2eae0;--surface:#fff;--surface2:#f7f3ee;--text-primary:#1a1a1a;--text-secondary:#6b6b6b;--text-muted:#9e9e9e}body{background-color:var(--bg);min-height:100vh;color:var(--text-primary)}main{max-width:800px;padding:2rem 1.5rem}header{background:var(--accent);text-align:center;z-index:100;padding:1.75rem 1.5rem 3.25rem;position:sticky;top:0}.border{border:1px solid var(--accent)!important}.label-header{text-align:center;background-color:var(--accent-mid);border-radius:100px;padding:.25rem .75rem;display:inline-block;border:1px solid var(--text-secondary)!important;color:var(--bg)!important}.city-chip{color:#fffc;letter-spacing:.14em;text-transform:uppercase;background:#ffffff21;border:1px solid #ffffff38;border-radius:100px;margin-bottom:6px;padding:4px 14px;font-size:10px;display:inline-block}.city-name{color:#fff;letter-spacing:.05em;font-size:24px;font-weight:500}.clock-card{background:var(--surface);border:.5px solid #0000001f;border-radius:18px;margin-top:-1.75rem;box-shadow:0 4px 16px #0000001a}.clock-time{color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:38px;font-weight:300;line-height:1}.clock-date{color:var(--text-secondary);margin-top:5px;font-size:12px}.hijri-badge{background:var(--accent-light);color:var(--accent);white-space:nowrap;border:.5px solid #3b5c4f33;border-radius:8px;line-height:1.6}.hijri-label{letter-spacing:.1em;text-transform:uppercase;opacity:.6;font-size:10px}.hijri-date{font-size:13px;font-weight:500}.city-select-wrap{position:relative}.header-city-select{max-width:420px;margin:.75rem auto 0}.city-select{background:var(--surface);width:100%;color:var(--text-primary);appearance:none;cursor:pointer;border:.5px solid #0000001f;border-radius:12px;padding:.75rem 2.75rem .75rem 1rem;font-size:14px;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #00000014}.city-select:focus{border-color:var(--accent-mid);outline:none;box-shadow:0 0 0 3px #52796f26}.select-chevron{color:var(--text-muted);pointer-events:none;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.section-label{letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);font-size:10px}.vakit-card{background:var(--surface);border:1px solid var(--accent);text-align:center;border-radius:12px;padding:14px 8px;transition:transform .2s,box-shadow .2s;position:relative}.vakit-elevated{transform:translateY(-2px)}.vakit-active{background:var(--accent)!important;border-color:var(--accent)!important}.vakit-active .vakit-label{color:#fff9!important}.vakit-active .vakit-time{color:#fff!important}.vakit-next{background:var(--gold-light)!important;border-color:var(--gold)!important}.vakit-next .vakit-label{color:var(--gold)!important}.vakit-next .vakit-time{color:var(--text-primary)!important}.vakit-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;font-size:10px}.vakit-time{color:var(--text-primary);font-variant-numeric:tabular-nums;font-size:20px;font-weight:400}.countdown-pill{background:var(--gold);color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums;border-radius:100px;padding:3px 12px;font-size:10px;font-weight:600;position:absolute;top:-12px;left:50%;transform:translate(-50%);box-shadow:0 2px 6px #c8860a59}.monthly-card{background:var(--surface);border:.5px solid #0000001f;border-radius:18px;overflow:hidden;box-shadow:0 1px 3px #00000014}.monthly-header{color:var(--text-primary);border-bottom:.5px solid #00000012;padding:1rem 1.25rem;font-size:15px;font-weight:500}.monthly-sub{color:var(--text-muted);font-size:12px;font-weight:400}.monthly-table{font-variant-numeric:tabular-nums;width:100%;font-size:12.5px}.monthly-table thead th{text-align:center;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;background:var(--surface2);border-bottom:.5px solid #00000012;padding:8px 10px;font-size:10.5px;font-weight:500}.monthly-table td{text-align:center;border-bottom:.5px solid #0000000d;padding:8px 10px}.monthly-table tr:last-child td{border-bottom:none}.monthly-table tr.today-row td{background:var(--accent-light);font-weight:500}.monthly-table tr.today-row .date-cell{color:var(--accent);border-left:3px solid var(--accent);font-weight:600}.date-cell{color:var(--text-secondary);white-space:nowrap;font-size:11px}@media (width<=480px){.clock-time{font-size:30px}.city-name{font-size:20px}}