.clock-page{padding-top:40px}.clock-location-bar{display:flex;align-items:center;justify-content:space-between;gap:25px}.clock-location-bar h2{font-size:clamp(26px,3vw,38px);margin:12px 0}.clock-location-bar p{font-size:14px;line-height:1.7;color:#607062}.clock-status{line-height:1.7;min-height:24px;color:#47674f}.clock-remember{display:flex;align-items:center;gap:12px;font-size:14px;min-height:44px}.clock-remember input{width:20px;height:20px;accent-color:#214e3f}.clock-privacy{font-size:12px;line-height:1.8;color:#6e7968;max-width:780px;margin:6px 0 30px}.clock-main-grid{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:26px}.clock-live{position:relative;overflow:hidden;border-radius:25px;background:#173d35 url('assets/arabian-courtyard.jpg') center/cover;min-height:480px;box-shadow:0 20px 60px #173d3520;color:#f5e9ce}.clock-live-shade{position:absolute;inset:0;background:linear-gradient(180deg,#082d30bb,#103b35f0)}.clock-live-content{position:relative;padding:40px;height:100%;display:flex;flex-direction:column;justify-content:center}.clock-live .eyebrow{color:#d5ba7f}.clock-live h2{font-size:clamp(32px,4vw,55px);margin:20px 0;color:#f2e6c9}.clock-next-time{font-size:43px;font-variant-numeric:tabular-nums;margin:4px 0;color:#e9cc90}.clock-live #clockNextDate{font-size:14px;color:#d6ddc7;line-height:1.7}.clock-countdown-label{font-size:10px;letter-spacing:.16em;margin-top:30px;color:#cabc91}.clock-countdown{font-size:clamp(26px,3vw,36px);font-variant-numeric:tabular-nums;margin:12px 0}.clock-live .clock-live-small{font-size:12px;line-height:1.8;color:#bacbb7;max-width:300px;margin-top:28px}.clock-day-panel{padding:25px;border:1px solid #d8dfcf;border-radius:25px;background:#faf9f1}.clock-date-nav{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px}.clock-date-nav label{display:grid;gap:6px;font-size:11px;flex:1;min-width:135px}.clock-date-nav input{width:100%;min-width:0}.clock-date-nav button{min-height:44px;padding:10px 14px}.clock-day-panel>h3{font-size:23px;margin:24px 0 8px}.clock-method-label{font-size:12px;color:#6e795f}.clock-prayer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0}.clock-prayer-card{padding:20px 17px;border:1px solid #d4ddc8;border-radius:15px;background:#eff3e8;display:flex;flex-direction:column;gap:20px;transition:background .3s,border-color .3s}.clock-prayer-card h3{font-size:23px;margin:9px 0 5px}.clock-prayer-card strong{font-size:27px;font-weight:500;font-variant-numeric:tabular-nums;color:#234c3b;white-space:nowrap}.clock-prayer-card small{font-size:11px;color:#65735e}.clock-card-status{font-size:9px;letter-spacing:.09em;color:#6e795f}.clock-prayer-card.clock-next{background:#234d3e;border-color:#ae9356;color:#f2e5c6}.clock-next h3,.clock-next strong{color:#f2e5c6}.clock-next small,.clock-next .clock-card-status{color:#dbc691}.clock-location-picker,.clock-settings{border:1px solid #d4dccc;border-radius:20px;margin:30px 0;padding:0 28px;background:#f7f8ee}.clock-location-picker>summary,.clock-settings>summary{display:flex;justify-content:space-between;gap:20px;align-items:center;cursor:pointer;padding:24px 0;font-size:18px;min-height:72px}.clock-location-picker>summary span,.clock-settings>summary span{font-size:25px;color:#917b49}.clock-picker-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:0 0 30px}.clock-picker-grid h3,.clock-settings h3{font-size:25px}.clock-picker-grid p,.clock-settings p{font-size:14px;line-height:1.8;color:#5e6e5b}.clock-picker-grid label,.clock-settings label{display:grid;gap:8px;font-size:13px;line-height:1.5;margin:12px 0}.clock-picker-grid input,.clock-settings input,.clock-settings select,.clock-date-nav input{padding:12px;border:1px solid #cbd6c1;border-radius:9px;background:#fffef8;color:#234b39;font:inherit;min-height:45px}.clock-picker-grid input{width:100%;min-width:0}.clock-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.clock-form-grid input,.clock-form-grid select{width:100%;min-width:0}.clock-settings input[readonly]{font-size:12px}.clock-city-list{display:grid;gap:8px;margin:14px 0;max-height:310px;overflow:auto}.clock-city{display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;padding:14px 16px;background:#edf2e5;border:1px solid #d7dfcb;border-radius:10px;color:#204934;font:inherit;font-size:14px;min-height:47px;cursor:pointer}.clock-city:hover{border-color:#a58e52}.clock-settings form{padding-bottom:30px}.clock-offset-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.clock-offset-grid input{width:100%;min-width:0}.clock-settings .actions{margin:20px 0}.clock-week{margin:50px 0}.clock-table-scroll{overflow-x:auto;border:1px solid #d4dccc;border-radius:15px;max-width:100%}.clock-week table{border-collapse:collapse;width:100%;min-width:690px;background:#fbfaf3;font-size:14px;white-space:nowrap}.clock-week caption{text-align:left;padding:20px;font-size:12px;color:#64715e}.clock-week th,.clock-week td{padding:17px 16px;text-align:left;border-top:1px solid #dce3d2;font-variant-numeric:tabular-nums}.clock-week thead{background:#e6eedb;color:#234b38}.clock-week tbody tr:nth-child(even){background:#f0f4e9}.clock-explainer{display:grid;grid-template-columns:1fr 1fr;gap:35px;padding:30px;border-radius:20px;background:#e9efdf;margin:30px 0}.clock-explainer h3{font-size:24px}.clock-explainer p{font-size:14px;line-height:1.9;color:#596b55}.clock-explainer summary{cursor:pointer;padding:12px 0;min-height:44px}.clock-explainer a{font-size:12px;color:#386649}.clock-home-link{padding-top:0;padding-bottom:35px}.clock-home-link>a{display:flex;align-items:center;gap:25px;padding:30px 35px;border-radius:22px;border:1px solid #cbd6bb;background:linear-gradient(110deg,#edf2e2,#f9f5e5);text-decoration:none;color:#234c3b}.clock-home-link h2{font-size:clamp(24px,3vw,35px);margin:9px 0}.clock-home-link p{font-size:14px;margin:0;line-height:1.8;color:#6b765f}.clock-home-icon{font-size:50px;color:#957d45}.clock-home-link b{margin-left:auto;font-size:13px;white-space:nowrap}.clock-page button:disabled{opacity:.65;cursor:wait}.clock-page input:focus-visible,.clock-page select:focus-visible,.clock-city:focus-visible{outline:3px solid #a89457;outline-offset:3px}
.night-theme .clock-day-panel,.night-theme .clock-location-picker,.night-theme .clock-settings{background:#183c33;border-color:#49644c;color:#e7e6d2}.night-theme .clock-prayer-card,.night-theme .clock-city{background:#24483a;border-color:#4a654a;color:#ede4c8}.night-theme .clock-prayer-card h3,.night-theme .clock-prayer-card strong,.night-theme .clock-explainer h3,.night-theme .clock-location-bar h2{color:#f1e3bf}.night-theme .clock-explainer,.night-theme .clock-home-link>a{background:#204335;border-color:#4a674b;color:#e7e4cd}.night-theme .clock-explainer p,.night-theme .clock-picker-grid p,.night-theme .clock-settings p,.night-theme .clock-privacy,.night-theme .clock-status,.night-theme .clock-method-label,.night-theme .clock-location-bar p,.night-theme .clock-prayer-card small,.night-theme .clock-card-status{color:#b5c5ac}.night-theme .clock-week table{background:#1b3e33;color:#e3e4cd}.night-theme .clock-week thead,.night-theme .clock-week tbody tr:nth-child(even){background:#284936;color:#e3e4cd}.night-theme .clock-week th,.night-theme .clock-week td{border-color:#466046}.night-theme .clock-next{background:#456344}.night-theme .clock-picker-grid input,.night-theme .clock-settings input,.night-theme .clock-settings select,.night-theme .clock-date-nav input{background:#e8ecdf;color:#234b39}
@media(max-width:1000px){.clock-main-grid{grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr)}.clock-live-content{padding:28px}.clock-prayer-card{padding:16px 14px}.clock-prayer-card strong{font-size:24px}.clock-offset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.clock-page{padding-top:28px}.clock-location-bar{flex-direction:column;align-items:flex-start;gap:12px}.clock-location-bar .actions{flex-wrap:wrap}.clock-main-grid,.clock-picker-grid,.clock-explainer{grid-template-columns:minmax(0,1fr)}.clock-live{min-height:330px}.clock-live-content{padding:30px}.clock-live h2{font-size:42px}.clock-next-time{font-size:38px}.clock-countdown{font-size:30px}.clock-live .clock-live-small{max-width:none;margin-top:20px}.clock-day-panel{padding:20px 16px}.clock-prayer-card{padding:18px 14px;gap:17px}.clock-prayer-card strong{font-size:25px}.clock-location-picker,.clock-settings{padding:0 20px}.clock-location-picker>summary,.clock-settings>summary{font-size:16px}.clock-picker-grid{gap:20px}.clock-form-grid{gap:10px}.clock-offset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.clock-explainer{padding:24px;gap:15px}.clock-home-link>a{flex-wrap:wrap;padding:25px;gap:18px}.clock-home-icon{font-size:35px}.clock-home-link>a>div{flex:1;min-width:180px}.clock-home-link b{margin-left:53px;white-space:normal}.clock-week .section-head{flex-direction:column;align-items:flex-start;gap:20px}.clock-privacy{font-size:12px}.clock-prayer-grid{gap:10px}.clock-location-bar p{overflow-wrap:anywhere}.clock-picker-grid form,.clock-picker-grid section{min-width:0}}
@media(max-width:360px){.clock-prayer-card strong{font-size:22px}.clock-date-nav label{min-width:120px}.clock-date-nav button{padding:10px}.clock-location-picker,.clock-settings{padding:0 15px}}
@media(prefers-reduced-motion:reduce){.clock-prayer-card{transition:none}}

#clockPlaceSearch>.input{width:100%;margin:8px 0 12px}#clockPlaceSearch .clock-city span{overflow-wrap:anywhere}.clock-quick-cities{margin-top:22px}.clock-quick-cities summary{cursor:pointer;font-size:.95rem}.clock-quick-cities[open]>label{display:block;margin-top:14px}