@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Amiri:wght@400;700&display=swap";@import"https://cdn.jsdelivr.net/npm/dseg@0.46.0/css/dseg.min.css";:root{--color-bg-primary: #f2f1ef;--color-bg-secondary: #eae8e4;--color-bg-card: #ffffff;--color-bg-card-hover: #f5f4f2;--color-bg-header: rgba(242, 241, 239, .92);--color-bg-input: #ffffff;--color-bg-dropdown: #ffffff;--color-bg-highlight: rgba(60, 80, 60, .06);--color-bg-active: #3a3a3a;--color-bg-overlay: rgba(0, 0, 0, .2);--color-text-primary: #1a1a1a;--color-text-secondary: #3d3d3d;--color-text-tertiary: #595959;--color-text-on-active: #f2f1ef;--color-text-accent: #3c5a3c;--color-accent-green: #4a6741;--color-accent-green-subtle: rgba(74, 103, 65, .1);--color-accent-gold: #9e8a4f;--color-accent-gold-subtle: rgba(158, 138, 79, .12);--color-border: #d8d6d0;--color-border-light: #e8e6e2;--color-border-focus: #4a6741;--color-shadow: rgba(0, 0, 0, .04);--color-shadow-md: rgba(0, 0, 0, .08);--color-next-bg: #2c2c2c;--color-next-text: #f2f1ef;--color-next-sub: rgba(242, 241, 239, .75);--color-next-accent: #b8a460;--color-next-badge-bg: rgba(255, 255, 255, .1);--font-primary: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", "Courier New", monospace;--font-arabic: "Amiri", serif;--fs-xs: .85rem;--fs-sm: .9375rem;--fs-base: 1rem;--fs-lg: 1.125rem;--fs-xl: 1.3125rem;--fs-2xl: 1.625rem;--fs-3xl: 2rem;--fs-4xl: 2.75rem;--fs-5xl: 3.5rem;--fs-time: 1.75rem;--fw-light: 300;--fw-normal: 400;--fw-medium: 500;--fw-semibold: 600;--fw-bold: 700;--sp-1: .25rem;--sp-2: .5rem;--sp-3: .75rem;--sp-4: 1rem;--sp-5: 1.25rem;--sp-6: 1.5rem;--sp-8: 2rem;--sp-10: 2.5rem;--sp-12: 3rem;--sp-16: 4rem;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-full: 9999px;--shadow-sm: 0 1px 2px var(--color-shadow);--shadow-md: 0 2px 8px var(--color-shadow-md);--shadow-lg: 0 4px 16px var(--color-shadow-md);--t-fast: .12s ease;--t-base: .2s ease;--container-max: 800px;--container-pad: var(--sp-6)}[data-theme=dark]{--color-bg-primary: #141414;--color-bg-secondary: #1a1a1a;--color-bg-card: #1e1e1e;--color-bg-card-hover: #262626;--color-bg-header: rgba(20, 20, 20, .92);--color-bg-input: #1e1e1e;--color-bg-dropdown: #1e1e1e;--color-bg-highlight: rgba(74, 103, 65, .08);--color-bg-active: #e8e6e2;--color-bg-overlay: rgba(0, 0, 0, .5);--color-text-primary: #e8e6e2;--color-text-secondary: #c0c0c0;--color-text-tertiary: #999999;--color-text-on-active: #141414;--color-text-accent: #7a9e70;--color-accent-green: #7a9e70;--color-accent-green-subtle: rgba(122, 158, 112, .1);--color-accent-gold: #c4aa5a;--color-accent-gold-subtle: rgba(196, 170, 90, .1);--color-border: #2e2e2e;--color-border-light: #252525;--color-border-focus: #7a9e70;--color-shadow: rgba(0, 0, 0, .15);--color-shadow-md: rgba(0, 0, 0, .25);--color-next-bg: #0e0e0e;--color-next-text: #e8e6e2;--color-next-sub: rgba(232, 230, 226, .7);--color-next-accent: #c4aa5a;--color-next-badge-bg: rgba(255, 255, 255, .06)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-primary);background:var(--color-bg-primary);color:var(--color-text-primary);line-height:1.5;transition:background-color var(--t-base),color var(--t-base);min-height:100vh}#root,.app-wrapper{min-height:100vh;display:flex;flex-direction:column}.app-header{position:sticky;top:0;z-index:100;background:var(--color-bg-header);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}.header-content{max-width:var(--container-max);margin:0 auto;padding:var(--sp-3) var(--container-pad);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}.header-brand{display:flex;align-items:center;gap:var(--sp-3)}.header-logo{color:var(--color-accent-green)}.header-title{font-family:var(--font-mono);font-size:var(--fs-base);font-weight:var(--fw-normal);color:var(--color-text-primary);letter-spacing:.08em;text-transform:uppercase}.header-subtitle{font-size:var(--fs-xs);color:var(--color-text-tertiary);font-weight:var(--fw-medium);letter-spacing:.06em;font-family:var(--font-mono)}.header-bismillah{font-family:var(--font-arabic);font-size:var(--fs-sm);color:var(--color-text-tertiary);letter-spacing:.02em;flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.theme-toggle{display:flex;align-items:center;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:2px;gap:0}.theme-option{border:none;background:transparent;cursor:pointer;padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-sm);font-size:var(--fs-xs);font-family:var(--font-mono);line-height:1;color:var(--color-text-tertiary);transition:all var(--t-fast);letter-spacing:.04em}.theme-option.active{background:var(--color-bg-active);color:var(--color-text-on-active)}.theme-option:not(.active):hover{color:var(--color-text-primary)}.main-content{flex:1;max-width:var(--container-max);margin:0 auto;padding:var(--sp-8) var(--container-pad);width:100%}.bismillah-section{text-align:center;margin-bottom:var(--sp-8);padding:var(--sp-6) 0}.bismillah-arabic{font-family:var(--font-arabic);font-size:var(--fs-3xl);color:var(--color-text-primary);font-weight:700;margin-bottom:var(--sp-2);line-height:1.3}.bismillah-translation{font-size:var(--fs-xs);color:var(--color-text-tertiary);font-weight:var(--fw-medium);letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-mono)}.city-selector{margin-bottom:var(--sp-6);position:relative}.city-selector-label{display:block;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--color-text-tertiary);margin-bottom:var(--sp-2);text-transform:uppercase;letter-spacing:.1em;font-family:var(--font-mono)}.city-input-wrapper{position:relative}.city-input-icon{position:absolute;left:var(--sp-4);top:50%;transform:translateY(-50%);color:var(--color-text-tertiary);font-family:var(--font-mono);font-size:var(--fs-sm);pointer-events:none}.city-input{width:100%;padding:var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 24px);font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--color-text-primary);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);outline:none;transition:border-color var(--t-fast);letter-spacing:.02em}.city-input:focus{border-color:var(--color-border-focus)}.city-input::placeholder{color:var(--color-text-tertiary)}.city-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--color-bg-dropdown);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:50;max-height:240px;overflow-y:auto;animation:dropdown-in .1s ease-out}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.city-dropdown-item{padding:var(--sp-3) var(--sp-4);cursor:pointer;font-size:var(--fs-sm);font-family:var(--font-mono);color:var(--color-text-primary);transition:background var(--t-fast);border-bottom:1px solid var(--color-border-light);letter-spacing:.02em}.city-dropdown-item:last-child{border-bottom:none}.city-dropdown-item:hover{background:var(--color-bg-highlight)}.city-dropdown-empty{padding:var(--sp-4);text-align:center;color:var(--color-text-tertiary);font-size:var(--fs-sm);font-family:var(--font-mono)}.date-nav{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);margin-bottom:var(--sp-6)}.date-nav-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-family:var(--font-mono);font-size:var(--fs-sm);cursor:pointer;transition:all var(--t-fast)}.date-nav-btn:hover{border-color:var(--color-accent-green);color:var(--color-accent-green)}.date-nav-label{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--color-text-primary);min-width:180px;text-align:center;letter-spacing:.02em}.date-nav-today{padding:var(--sp-2) var(--sp-3);background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-family:var(--font-mono);font-size:var(--fs-xs);cursor:pointer;transition:all var(--t-fast);letter-spacing:.04em;text-transform:uppercase}.date-nav-today:hover{border-color:var(--color-accent-green);color:var(--color-accent-green)}.info-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-6);padding-bottom:var(--sp-4);border-bottom:1px solid var(--color-border-light)}.date-display{display:flex;flex-direction:column;gap:2px}.date-primary{font-size:var(--fs-lg);font-weight:var(--fw-semibold);color:var(--color-text-primary)}.date-secondary{font-size:var(--fs-xs);color:var(--color-text-tertiary);font-family:var(--font-mono);letter-spacing:.04em}.location-badge{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-3);background:var(--color-accent-green-subtle);border:1px solid transparent;border-radius:var(--radius-sm);font-size:var(--fs-xs);font-family:var(--font-mono);color:var(--color-accent-green);letter-spacing:.04em;cursor:pointer;transition:border-color .2s,background .2s;text-transform:uppercase}.location-badge:hover{border-color:var(--color-accent-green);background:var(--color-bg-highlight)}.next-prayer-card{background:var(--color-next-bg);border-radius:var(--radius-lg);padding:var(--sp-6) var(--sp-8);margin-bottom:var(--sp-6);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.04)}.next-prayer-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--sp-3)}.next-prayer-icon{color:#ffffff40}.next-prayer-label{font-size:var(--fs-xs);font-family:var(--font-mono);color:var(--color-next-sub);text-transform:uppercase;letter-spacing:.15em;margin-bottom:var(--sp-3)}.next-prayer-name{font-size:var(--fs-xl);font-weight:var(--fw-semibold);color:var(--color-next-text);letter-spacing:.02em;margin-bottom:var(--sp-1)}.next-prayer-time{margin-bottom:var(--sp-4);line-height:1}.next-prayer-countdown{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-3);background:var(--color-next-badge-bg);border-radius:var(--radius-sm);font-size:var(--fs-xs);font-family:var(--font-mono);color:var(--color-next-sub);letter-spacing:.04em}.ornament-divider{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);margin:var(--sp-6) 0;color:var(--color-accent-gold)}.ornament-divider:before,.ornament-divider:after{content:"";flex:1;height:1px;background:var(--color-border)}.ornament-diamond{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-accent-gold);letter-spacing:.3em}.prayer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin-bottom:var(--sp-8)}.prayer-card{background:var(--color-bg-card);border:1px solid var(--color-border-light);border-radius:var(--radius-md);padding:var(--sp-4) var(--sp-3);text-align:center;transition:all var(--t-fast);position:relative}.prayer-card:hover{border-color:var(--color-border);box-shadow:var(--shadow-sm)}.prayer-card.is-next{border-color:var(--color-accent-green);background:var(--color-accent-green-subtle)}.prayer-card.is-passed{opacity:.35}.prayer-card-icon-wrap{display:flex;justify-content:center;align-items:center;margin-bottom:var(--sp-2);min-height:28px;color:var(--color-text-tertiary)}.prayer-card.is-next .prayer-card-icon-wrap{color:var(--color-accent-green)}.prayer-card-name{font-size:var(--fs-xs);font-family:var(--font-mono);font-weight:var(--fw-medium);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--sp-2)}.prayer-card.is-next .prayer-card-name{color:var(--color-accent-green)}.prayer-card-time{line-height:1}.prayer-card.is-next .prayer-card-time{color:var(--color-accent-green)}.prayer-card.is-next .seg__value{color:var(--color-accent-green)!important}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-16) 0;gap:var(--sp-4)}.loading-spinner{width:24px;height:24px;border:2px solid var(--color-border);border-top-color:var(--color-accent-green);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:var(--fs-xs);color:var(--color-text-tertiary);font-family:var(--font-mono);letter-spacing:.04em}.error-container{text-align:center;padding:var(--sp-12) var(--sp-4)}.error-icon{font-family:var(--font-mono);font-size:var(--fs-2xl);color:var(--color-text-tertiary);margin-bottom:var(--sp-4)}.error-message{font-size:var(--fs-sm);color:var(--color-text-secondary);margin-bottom:var(--sp-4)}.error-retry{padding:var(--sp-2) var(--sp-5);background:var(--color-bg-active);color:var(--color-text-on-active);border:none;border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:opacity var(--t-fast)}.error-retry:hover{opacity:.85}.app-footer{text-align:center;padding:var(--sp-8) var(--container-pad);color:var(--color-text-tertiary);font-size:var(--fs-xs);border-top:1px solid var(--color-border-light);margin-top:auto}.footer-ornament{display:block;margin-bottom:var(--sp-2);font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-accent-gold);letter-spacing:.4em}.footer-source{font-family:var(--font-mono);font-weight:var(--fw-medium);letter-spacing:.04em;margin-bottom:var(--sp-1);color:var(--color-text-secondary)}.footer-text{font-family:var(--font-mono);letter-spacing:.04em}.footer-source a,.footer-text a{color:var(--color-accent-green);text-decoration:none}.footer-source a:hover,.footer-text a:hover{text-decoration:underline}.footer-nav{font-family:var(--font-mono);font-weight:var(--fw-medium);letter-spacing:.06em;margin-bottom:var(--sp-2);display:flex;gap:var(--sp-3);justify-content:center;align-items:center}.footer-nav a{color:var(--color-accent-green);text-decoration:none;text-transform:uppercase;font-size:var(--fs-sm)}.footer-nav a:hover{text-decoration:underline}.footer-nav-sep{color:var(--color-text-tertiary);font-size:var(--fs-sm)}.page-section{max-width:640px;margin:0 auto}.page-heading{font-family:var(--font-mono);font-size:var(--fs-2xl);font-weight:var(--fw-semibold);color:var(--color-text-primary);letter-spacing:.04em;text-transform:uppercase;margin-bottom:var(--sp-6)}.source-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--sp-5);margin-bottom:var(--sp-6)}.source-row{display:flex;justify-content:space-between;align-items:baseline;padding:var(--sp-3) 0;border-bottom:1px solid var(--color-border-light);gap:var(--sp-4)}.source-row:last-child{border-bottom:none}.source-label{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}.source-value{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--color-text-primary);text-align:right}.source-value a{color:var(--color-accent-green);text-decoration:none}.source-value a:hover{text-decoration:underline}.source-api-section{margin-top:var(--sp-6)}.source-subheading{font-family:var(--font-mono);font-size:var(--fs-lg);font-weight:var(--fw-semibold);color:var(--color-text-primary);letter-spacing:.04em;text-transform:uppercase;margin-bottom:var(--sp-4)}.source-text{font-size:var(--fs-sm);color:var(--color-text-secondary);line-height:1.7;margin-bottom:var(--sp-3)}.source-text a{color:var(--color-accent-green);text-decoration:none}.source-text a:hover{text-decoration:underline}.about-card{display:flex;gap:var(--sp-6);align-items:flex-start;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--sp-6);margin-bottom:var(--sp-6)}.about-avatar{flex-shrink:0;color:var(--color-accent-green);padding:var(--sp-3);background:var(--color-bg-secondary);border-radius:var(--radius-md)}.about-info{flex:1;min-width:0}.about-name{font-family:var(--font-mono);font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--color-text-primary);margin-bottom:var(--sp-1)}.about-role{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--sp-5)}.about-links{display:flex;flex-direction:column;gap:var(--sp-3)}.about-link{display:flex;flex-direction:column;gap:2px;text-decoration:none;padding:var(--sp-3);border-radius:var(--radius-md);border:1px solid var(--color-border-light);transition:border-color .2s,background .2s}.about-link:hover{border-color:var(--color-accent-green);background:var(--color-bg-highlight)}.about-link-label{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--color-accent-green);text-transform:uppercase;letter-spacing:.06em}.about-link-url{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--color-text-secondary)}.about-description{margin-top:var(--sp-2)}.header-brand{text-decoration:none;color:inherit}@media(max-width:768px){.prayer-grid{grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}.prayer-card{padding:var(--sp-3) var(--sp-2)}.prayer-card-time{font-size:var(--fs-xl)}.next-prayer-time{font-size:var(--fs-4xl)}.info-bar{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}}@media(max-width:520px){:root{--container-pad: var(--sp-4)}.header-subtitle,.header-bismillah{display:none}.bismillah-arabic{font-size:var(--fs-2xl)}.main-content{padding:var(--sp-6) var(--container-pad)}.next-prayer-card{padding:var(--sp-5) var(--sp-5)}.next-prayer-time{font-size:var(--fs-3xl)}.prayer-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-2)}.prayer-card-time{font-size:var(--fs-xl)}.date-nav{gap:var(--sp-2);flex-wrap:wrap}.date-nav-label{min-width:140px;font-size:var(--fs-xs)}}@media(max-width:380px){.prayer-card-time{font-size:var(--fs-lg)}.next-prayer-time{font-size:var(--fs-2xl)}}.seg{display:inline-block;font-family:"DSEG7 Classic",var(--font-mono);font-style:normal;font-weight:400;letter-spacing:.04em}.seg--sm{font-size:var(--fs-xl)}.seg--sm .seg__value{color:var(--color-text-primary)}.seg--md{font-size:var(--fs-time)}.seg--md .seg__value{color:var(--color-text-primary)}.seg--lg{font-size:var(--fs-3xl)}.seg--lg .seg__value{color:var(--color-next-accent)}.seg--xl{font-size:var(--fs-5xl)}.seg--xl .seg__value{color:var(--color-next-accent)}