/* ATHAR 4.0 | CLARITY
   Visual implementation of the user-approved five-screen design. */
/* Optional local faces; fallback to the OS fonts when not installed. */
@font-face{font-family:'Inter Display';src:local('Inter Display'),local('InterDisplay-Regular');font-weight:400;font-style:normal}
@font-face{font-family:'Inter Display';src:local('Inter Display Medium'),local('InterDisplay-Medium');font-weight:500;font-style:normal}
@font-face{font-family:'Inter Display';src:local('Inter Display SemiBold'),local('InterDisplay-SemiBold');font-weight:600;font-style:normal}
@font-face{font-family:'Inter Display';src:local('Inter Display Bold'),local('InterDisplay-Bold');font-weight:700 900;font-style:normal}
@font-face{font-family:'Noto Kufi Arabic';src:local('Noto Kufi Arabic'),local('NotoKufiArabic-Regular');font-weight:400 500;font-style:normal}
@font-face{font-family:'Noto Kufi Arabic';src:local('Noto Kufi Arabic SemiBold'),local('NotoKufiArabic-SemiBold');font-weight:600 900;font-style:normal}
:root{--accent:#43917c;--accent-rgb:67,145,124;--accent-legible:#43917c;--good:#43917c;--bad:#cc5b68;--radius:24px;--font-english:'Inter Display',-apple-system,BlinkMacSystemFont,sans-serif;--font-arabic:'Noto Kufi Arabic',sans-serif;--nav-height:65px}
html{background:#f4f5f7;color-scheme:light;scroll-behavior:auto}
body{background:var(--bg);color:var(--text);font-family:var(--font-english);font-size:calc(14px * var(--font-scale));letter-spacing:-.016em;line-height:1.47;-webkit-font-smoothing:antialiased}
body[data-theme=light]{--surface:#fff;--surface2:#f0f2f5;--surface3:#e9ecef;--text:#17191e;--muted:#7f8794;--line:#e5eaf0;--bg:#f4f5f7;--good:#43917c;--bad:#c86267;color-scheme:light}
body[data-theme=dark]{--surface:#24272c;--surface2:#2d3137;--surface3:#363b43;--text:#f8f9fb;--muted:#a5adb7;--line:#3f454d;--bg:#15181c;--good:#67c4a4;--bad:#e38d95;color-scheme:dark}
body[data-theme=oled]{--surface:#151618;--surface2:#202124;--surface3:#292b2f;--text:#fff;--muted:#a7abb2;--line:#3c3d40;--bg:#000;--good:#67c4a4;--bad:#e38d95;color-scheme:dark}
.app-shell{max-width:465px;margin:auto;min-height:100dvh;padding:calc(env(safe-area-inset-top) + 53px) 22px calc(env(safe-area-inset-bottom) + 147px)}
.app-top{display:none!important}.ambient{display:none!important}
.view{animation:none!important}.kicker{font-family:var(--font-english);font-size:11px;letter-spacing:.16em;font-weight:700;color:#777e89;line-height:1.5;margin:0 0 10px;text-transform:uppercase}
.page-title{font-family:var(--font-english);font-size:43px;line-height:1.13;letter-spacing:-.057em;font-weight:700;margin:0;color:var(--text)}
.page-title:lang(ar){font-family:var(--font-arabic);font-size:35px;letter-spacing:0;line-height:1.5}
.glass-card,.surface-card{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:24px;box-shadow:0 10px 24px rgba(24,31,39,.048),0 1px 2px rgba(24,31,39,.035)!important;color:var(--text)}
.hero{margin:26px 0 21px;padding:22px 22px 23px;min-height:132px;display:flex;align-items:center;overflow:visible!important;box-shadow:0 10px 27px rgba(24,31,39,.05)!important}
.hero:after,.glass-card:after{display:none!important}
.hero-content{width:100%;display:flex;align-items:center;justify-content:space-between;gap:15px}
.hero-amount{font-family:var(--font-english);font-size:50px;font-weight:700;line-height:1.05;letter-spacing:-.071em;margin:0;white-space:nowrap}
.hero-amount small{font-size:inherit;letter-spacing:inherit;color:var(--text);font-weight:700}
.hero-hint{font-size:13px;color:#747d89;margin-top:10px;font-weight:400;line-height:1.35}
.hero .ring{width:93px;height:93px;background:conic-gradient(var(--accent) calc(var(--pct)*1%),#e9ecf0 0);display:grid;place-items:center;position:relative;flex-shrink:0}
.hero .ring:before{content:'';position:absolute;inset:10px;background:var(--surface);border-radius:50%}
.hero .ring-inner{position:relative;z-index:1;display:grid;place-items:center;line-height:1}
.hero .ring-inner strong{color:var(--text);font-size:16px;font-weight:700;letter-spacing:-.025em}
.hero .ring-inner span{display:none}
.hero-overline{display:none}
.section-head{margin:24px 0 10px}.section-head h2{font-size:17px;font-weight:700;letter-spacing:-.04em}
/* TODAY */
#view-today .kicker{margin-top:0;margin-bottom:8px}
.today-heading{display:flex;align-items:center;gap:12px;min-height:57px}
.today-heading .page-title{font-size:43px;line-height:1.05;margin:0}
.day-arrow{display:grid;place-items:center;width:39px;height:39px;flex:0 0 39px;line-height:1;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:30px;font-weight:400;padding:0 0 3px;box-shadow:0 4px 10px #26334412;touch-action:manipulation}
.day-arrow:active{transform:scale(.95)}
.today-subrow{display:flex;align-items:center;gap:12px;justify-content:flex-start;min-height:29px;color:var(--muted);font-size:14px;margin-bottom:0}
.today-date-picker{display:inline-block;position:relative;width:16px;height:20px;flex:0 0 16px;cursor:pointer;opacity:.68}
.today-date-picker:before{content:'▦';font-size:19px;position:absolute;inset:0;line-height:20px}
.today-date-picker input{position:absolute;inset:0;opacity:.01;cursor:pointer;width:100%;height:100%;padding:0;border:0}
.return-today{font-size:11px;border:none;color:var(--accent-legible);background:transparent;text-decoration:underline}
#view-today .hero{margin-top:25px;margin-bottom:22px}
.prayer-stack,.qada-stack{display:flex;flex-direction:column;gap:11px}
.prayer-line{min-height:72px;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;border-radius:21px;border:1px solid var(--line);background:var(--surface);box-shadow:0 5px 15px rgba(21,28,36,.06);gap:8px}
.prayer-line:first-child{border-top:1px solid var(--line)}
.prayer-name,.prayer-name[lang=ar]{font-family:var(--font-arabic);font-size:17px;line-height:1.6;font-weight:600;white-space:nowrap;letter-spacing:0;text-align:start}
.status-switch{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;display:flex;align-items:center;gap:7px}
.state-btn{width:32px;height:32px;min-width:32px;flex:0 0 32px;border-radius:50%;border:1.5px solid #d4dce4;background:transparent;color:#909ba8;display:grid;place-items:center;padding:0;transition:transform .12s ease,background .12s ease,border-color .12s ease!important}
.state-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.state-btn.not-done svg{width:16px;height:16px}
.state-btn[aria-pressed="true"]{border-color:#afb9c3;background:#f5f7f9;box-shadow:none!important;color:#647281}
.state-btn.on-time[aria-pressed="true"]{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important;box-shadow:none!important}
.state-btn.late[aria-pressed="true"]{background:var(--bad)!important;color:#fff!important;border-color:var(--bad)!important}
.state-btn.on-time:not([aria-pressed="true"]),.state-btn.late:not([aria-pressed="true"]){background:var(--surface)!important;color:#9aa4b0!important}
.below-fold{margin-top:44px}.below-fold .surface-card{overflow:hidden}.activity-row{border-bottom:1px solid var(--line);padding:13px 15px;min-height:62px}
.feature-banner{margin-top:19px;padding:16px 18px;background:transparent;border:1px solid var(--line)}
.feature-banner p{color:var(--muted)}
/* QADA */
.qada-headline{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:17px}
.qada-headline .kicker{margin-bottom:8px}
.qada-headline .page-title{font-size:43px}
.editable-years{background:var(--surface)!important;box-shadow:0 3px 10px #1d293614!important;border:1px solid var(--line)!important;color:#4e5867;border-radius:30px;padding:7px 12px;font-size:12px;white-space:nowrap;margin-bottom:1px}
.segmented{background:#e9edf0!important;border-radius:15px!important;border:0!important;padding:5px!important;display:flex;gap:4px;min-height:48px;margin:0 0 17px}
.segmented button{font-size:14px;line-height:1;flex:1;min-height:38px;border-radius:12px!important;font-weight:500;color:#75808d}
.segmented button.selected{background:var(--surface)!important;box-shadow:0 2px 6px #111b2713!important;color:var(--text);font-weight:650}
#view-qada .hero{margin:18px 0 17px;display:block;min-height:138px;padding:21px 21px 22px}
#view-qada .hero-overline{display:block;font-size:11px;letter-spacing:.12em;color:#737b87;font-weight:700;margin-bottom:12px}
#view-qada .hero-amount{font-size:45px}
#view-qada .hero-hint{margin-top:8px}
#view-qada .hero .ring{width:81px;height:81px}
.qada-stack{gap:10px}
.qada-row{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:0 4px 14px #1b25300c;padding:15px 17px;min-height:78px}
.qada-row-head{display:flex;align-items:center;gap:10px;justify-content:space-between}
.qada-row-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.qada-row .prayer-name{font-size:15px}
.qada-row-line{height:3px;width:80%;max-width:112px;overflow:hidden}
.qada-row-line .progress-track{height:3px;background:#e9edf0;border-radius:8px}
.qada-count{font-size:18px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.04em;white-space:nowrap}
.qada-rows-actions{display:flex;gap:7px;align-items:center;flex-shrink:0}
.qada-circle{width:31px;height:31px;border-radius:50%;background:#f0f2f5!important;color:#4f5968;font-size:23px;font-weight:400;line-height:1;border:0;display:grid;place-items:center;padding:0 0 2px}
.qada-circle:disabled{opacity:.4}.qada-record-actions{margin:18px 0 0;display:flex;flex-direction:column;gap:10px}
.qada-record-actions .button{background:#e8edf0!important;color:#46515e!important}
/* DUAS */
#view-duas .page-title{margin-bottom:23px}
.dua-search-wrap{margin:0 0 14px!important}
.search-input{display:block;width:100%;height:53px;background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:25px!important;padding-left:43px!important;color:var(--text);box-shadow:0 4px 15px #171d2611!important;font-size:14px}
.duas-filters{display:flex;align-items:center;gap:9px;overflow-x:auto;white-space:nowrap;margin:12px 0 17px;padding:0;scrollbar-width:none}
.duas-filters::-webkit-scrollbar{display:none}
.chip{border-radius:999px!important;background:#e8edf0!important;color:#687481!important;border:0!important;padding:9px 16px!important;font-weight:500!important;min-height:37px!important}
.chip.selected{color:#fff!important;background:#4b5563!important}
.duas-command{margin:0 0 21px!important}
.button{background:var(--accent);color:var(--accent-ink);border:0;border-radius:14px;min-height:49px;font-weight:650;font-size:14px}
#view-duas .duas-command .button{height:49px;color:white!important}
.dua-list{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;border-radius:0!important;display:flex;flex-direction:column;gap:13px}
.dua-card{background:var(--surface);border:1px solid var(--line)!important;border-radius:23px!important;box-shadow:0 5px 18px #141c280d;padding:19px 16px 17px 18px;min-height:134px}
.dua-card h3{font-size:18px;font-weight:700;letter-spacing:-.035em}
.dua-card-copy{min-width:0}
.dua-category{color:var(--accent-legible);background:#eaf5ef!important;border-radius:999px;font-size:11px;font-weight:650;padding:4px 10px;display:inline-block}
.dua-card-copy p{font-size:12px;line-height:1.55;color:var(--muted);text-align:start!important;margin-top:9px}
.dua-card-rail{border-left:1px solid var(--line);background:transparent;gap:6px;padding-left:11px}
.rail-action{width:32px;height:32px;border-radius:50%;background:transparent!important;color:#768395;font-size:26px}
.rail-action svg{stroke:#748091!important;fill:none}
/* FASTING */
#view-fasting .page-title{margin-bottom:0}
#view-fasting .hero{margin:22px 0 19px;min-height:131px}
#view-fasting .hero-hint{margin-top:8px}
#view-fasting .hero-hint.fast-left{font-size:12px;margin-top:6px}
#view-fasting .section-head{margin:18px 0 9px}
.fast-record-form{display:flex;flex-direction:column;gap:10px;padding:15px 16px!important;border-radius:24px!important}
.fast-record-form input[type=date]{height:49px;width:100%;border-radius:13px;border:1px solid #dfe5eb;background:#f5f7f9;color:#404a59;padding:0 14px;font-size:14px;appearance:auto;-webkit-appearance:auto;text-align:left}
.fast-record-form .fast-submit{height:48px;min-height:48px;margin:0;border-radius:13px!important;color:white!important}
.calendar-panel{padding:19px 16px 15px!important}
.calendar-header{display:flex;justify-content:space-between;align-items:center;min-height:28px;gap:6px;margin-bottom:14px}
.calendar-header strong{font-size:16px;font-weight:650;color:var(--text)}
.calendar-arrows{display:flex;gap:4px;align-items:center}
.calendar-header .icon-button{width:24px;min-width:24px;height:24px;min-height:24px;border:0!important;background:transparent!important;color:#6c7889;font-size:23px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px 3px;align-items:center;justify-items:center}
.weekday{font-size:11px;color:#969fa9;font-weight:650}
.calday{font-size:13px;font-weight:500;color:#424c58;min-width:30px;width:30px;height:30px;min-height:30px;border-radius:50%;border:0!important;background:transparent;display:grid;place-items:center;padding:0}
.calday.fasted{background:#e3f1eb!important;color:#32866d!important;font-weight:700}
.calday.current{background:var(--accent)!important;color:white!important;font-weight:700}
.calday:disabled{opacity:.6}.calday.blank{display:block}
/* SETTINGS */
#view-settings>.kicker{margin-top:0}
#view-settings .page-title{margin-bottom:0}
.profile-card{margin:26px 0 21px;padding:17px 18px;min-height:104px;border-radius:24px;width:100%;display:flex;align-items:center;text-align:start;gap:14px}
.avatar-wrap{width:61px;height:61px;border-radius:50%;background:#edf1f4!important;border:0!important;box-shadow:none!important}
.avatar-placeholder svg{stroke:#758595!important}
.profile-info{gap:4px;display:flex;flex-direction:column;flex:1}
.profile-info strong{font-size:17px;font-weight:700;letter-spacing:-.028em;line-height:1.25}
.profile-info span{color:#8b94a3;font-size:13px;line-height:1.4}
.settings-sublabel{font-size:11px;font-weight:700;letter-spacing:.14em;color:#9098a2;padding-left:6px;margin:16px 0 9px}
.settings-list{border-radius:23px!important;overflow:hidden}
.settings-list+.settings-sublabel{margin-top:23px}
.settings-route{min-height:59px;padding:9px 17px 9px 18px;gap:13px;text-align:left}
.settings-route:last-child{border-bottom:0}
.settings-route-icon{width:28px;height:31px;background:transparent!important;color:#718093!important;border-radius:0!important}
.settings-route-icon svg{width:21px;height:21px;stroke-width:1.8}
.settings-route-label{font-size:14px;font-weight:600;color:var(--text)}
.settings-route-arrow{font-size:25px;line-height:1;color:#748397}
.settings-footer{margin-top:40px;color:var(--muted);font-size:11px}
/* FLOATING LIQUID GLASS — fixed dimensions; NO SCROLL COLLAPSE */
.glass-nav,.glass-nav.compact{position:fixed!important;bottom:calc(env(safe-area-inset-bottom) + 11px)!important;left:50%!important;transform:translateX(-50%)!important;width:min(calc(100vw - 38px),425px)!important;height:65px!important;min-height:65px!important;padding:5px!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;z-index:30!important;border:1.5px solid rgba(255,255,255,.92)!important;border-radius:999px!important;background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(221,228,241,.57) 58%,rgba(244,246,250,.74))!important;box-shadow:0 10px 31px rgba(53,66,86,.16),inset 0 2px 3px rgba(255,255,255,.98),inset 0 -2px 2px rgba(142,163,194,.18),0 0 0 3px rgba(248,250,252,.45)!important;-webkit-backdrop-filter:blur(24px) saturate(1.6)!important;backdrop-filter:blur(24px) saturate(1.6)!important;transition:none!important;touch-action:pan-y;overflow:visible!important}
.glass-nav:before{content:'';position:absolute;inset:2px;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.52),transparent 55%)}
.glass-nav .nav-glider,.glass-nav.compact .nav-glider{position:absolute;z-index:0;top:5px;bottom:5px;left:0;border-radius:999px;background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(230,235,246,.66))!important;border:1px solid rgba(255,255,255,.86)!important;box-shadow:0 3px 11px rgba(49,62,80,.09),inset 0 1px 2px #fff!important;pointer-events:none;transition:transform .22s cubic-bezier(.2,.8,.15,1),width .22s!important}
.glass-nav .tab,.glass-nav.compact .tab{z-index:1;margin:0;min-height:48px;height:48px;display:grid;place-items:center;border-radius:50%;color:#748092!important;background:transparent!important;touch-action:pan-y}
.glass-nav .tab-icon svg,.glass-nav.compact .tab-icon svg{width:23px!important;height:23px!important;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transform:none!important}
.glass-nav .tab.active .tab-icon svg,.glass-nav.compact .tab.active .tab-icon svg{stroke:#34465d!important;filter:none!important}
body[data-theme=light] .glass-nav{background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(223,230,243,.61) 58%,rgba(250,252,255,.72))!important;border-color:rgba(255,255,255,.95)!important}
body[data-theme=dark] .glass-nav,body[data-theme=oled] .glass-nav{background:linear-gradient(145deg,rgba(96,104,119,.49),rgba(29,34,43,.76))!important;border-color:rgba(214,222,235,.30)!important;box-shadow:0 12px 30px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.28)!important}
body[data-theme=dark] .glass-nav .nav-glider,body[data-theme=oled] .glass-nav .nav-glider{background:linear-gradient(145deg,rgba(178,186,197,.29),rgba(138,147,161,.23))!important;border-color:rgba(225,230,236,.28)!important}
body[data-theme=dark] .glass-nav .tab,body[data-theme=oled] .glass-nav .tab{color:#c1c8d2!important}
body[data-theme=dark] .glass-nav .tab.active .tab-icon svg,body[data-theme=oled] .glass-nav .tab.active .tab-icon svg{stroke:#fff!important}
/* Secondary screens: consistent Clarity material */
.setting-section .surface-card,.modal,.reader-screen{background:var(--surface);color:var(--text)}
.settings-subhead .page-title{font-size:36px}
.settings-subhead .settings-back{color:var(--accent-legible)}
.modal{border:1px solid var(--line)}
.form-card{border-radius:23px}
.form-field input:not([type=checkbox]):not([type=range]),.form-field select,.form-field textarea,.setting-line select{border-radius:12px;background:var(--surface2);border:1px solid var(--line);color:var(--text)}
.setting-section .setting-title{color:var(--text)}
.reader-copy{font-family:var(--font-arabic);line-height:2.3}
.typography-preview [lang=ar],.dua-sample{font-family:var(--font-arabic)}
/* responsive fidelity */
@media(max-width:390px){.app-shell{padding:calc(env(safe-area-inset-top) + 35px) 18px calc(env(safe-area-inset-bottom) + 145px)}.page-title,.today-heading .page-title,.qada-headline .page-title{font-size:39px}.hero-amount{font-size:45px}.hero{padding:20px}.prayer-line{min-height:69px;padding:10px 15px}.prayer-name{font-size:15px}.status-switch{gap:6px}.state-btn{width:31px;height:31px;min-width:31px;flex-basis:31px}.glass-nav,.glass-nav.compact{width:calc(100vw - 30px)!important}.qada-row{padding:13px 13px}.qada-count{font-size:16px}.qada-circle{width:29px;height:29px}.calendar-grid{gap:4px 1px}}
@media(max-width:350px){.app-shell{padding-inline:14px}.page-title,.today-heading .page-title{font-size:35px}.hero-amount{font-size:40px}.hero .ring{width:76px;height:76px}.hero .ring:before{inset:8px}.state-btn{width:28px;height:28px;min-width:28px;flex-basis:28px}.prayer-name{font-size:14px}}
@media(prefers-reduced-motion:reduce){.glass-nav .nav-glider{transition:none!important}}

.date-kicker{position:relative;display:inline-flex;align-items:center;max-width:100%}
.date-kicker label{position:relative;display:inline-block;cursor:pointer}
.date-kicker input[type=date]{position:absolute;inset:0;width:100%;height:100%;opacity:.001;border:0;padding:0;cursor:pointer}
#view-today .today-subrow{margin-top:5px}
#view-qada .qada-headline .page-title{font-size:43px}
.qada-row-line{width:120px;min-height:4px}
.qada-row-line .progress-track{width:120px;height:4px!important;background:#e7ebef!important}

.qada-row-line .progress-track{margin-top:0!important}
.dua-search-wrap{position:relative}
.dua-search-wrap .search-glyph{position:absolute;z-index:2;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;fill:none;stroke:#929ca9;stroke-width:1.8;stroke-linecap:round}
.dua-card-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px}
.dua-card h3{order:0;margin:0;font-size:18px}
.dua-category{order:1;margin:0!important;font-size:11px;line-height:1.3}
.dua-card-copy p{order:2;margin:0!important;font-size:12px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;line-height:1.6}
.fast-date-wrapper{height:49px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f5f7f9;border:1px solid #dfe5eb;border-radius:13px;padding:0 14px;position:relative;color:#465162;font-size:14px}
.fast-date-wrapper svg{width:20px;height:20px;fill:none;stroke:#83909e;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.fast-date-wrapper input[type=date]{position:absolute;inset:0;opacity:.001;cursor:pointer;width:100%;height:100%;padding:0;margin:0;border:0}
#view-fasting .fast-submit:not(:disabled){background:var(--accent)!important;color:#fff!important}
.dua-card .rail-action{border:0!important;box-shadow:none!important;outline:none}

/* ================================================================
 ATHAR 4.0.1 — precise controls, calendar, balanced themes / materials
 ================================================================ */
/* One switch track and one thumb. Explicit dimensions override 3.0 styles. */
.setting-line{min-width:0;overflow:hidden}
.setting-line .setting-copy{min-width:0;flex:1 1 auto}
.setting-line input[type="checkbox"],.setting-section .setting-line input[type="checkbox"]{
 appearance:none!important;-webkit-appearance:none!important;display:inline-block!important;
 width:51px!important;min-width:51px!important;max-width:51px!important;
 height:31px!important;min-height:31px!important;max-height:31px!important;
 margin:0!important;padding:0!important;flex:0 0 51px!important;
 position:relative!important;left:auto!important;top:auto!important;
 border:1px solid rgba(100,110,125,.14)!important;border-radius:999px!important;
 background:var(--switch-off,#e1e5e9)!important;
 box-sizing:border-box!important;overflow:hidden!important;
 vertical-align:middle;cursor:pointer;box-shadow:inset 0 1px 2px rgba(25,32,40,.075)!important;
 transition:background-color .18s ease,border-color .18s ease!important;
 transform:none!important;filter:none!important;
}
.setting-line input[type="checkbox"]::before{content:none!important}
.setting-line input[type="checkbox"]::after,.setting-section .setting-line input[type="checkbox"]::after{
 content:""!important;position:absolute!important;left:3px!important;top:3px!important;
 width:23px!important;height:23px!important;border:0!important;border-radius:50%!important;
 background:#fff!important;box-shadow:0 1px 3px rgba(0,0,0,.18),0 0 0 .4px rgba(0,0,0,.05)!important;
 transform:translateX(0)!important;transition:transform .18s cubic-bezier(.2,.8,.2,1)!important;
 pointer-events:none!important;opacity:1!important;
}
.setting-line input[type="checkbox"]:checked{background:var(--accent)!important;border-color:transparent!important}
.setting-line input[type="checkbox"]:checked::after,.setting-section .setting-line input[type="checkbox"]:checked::after{transform:translateX(20px)!important}
.setting-line input[type="checkbox"]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
body[data-theme=dark],body[data-theme=oled]{--switch-off:#454b54}

/* Date controls — centered title group, independent calendar action. */
#view-today .date-kicker{font-size:11px;letter-spacing:.13em;color:var(--muted);font-weight:700;display:block;min-height:16px}
.today-heading{display:flex;align-items:center;gap:9px;min-width:0;max-width:100%;direction:ltr}
.today-heading .page-title{font-size:clamp(33px,10.6vw,43px);white-space:nowrap;overflow:hidden;text-overflow:clip;min-width:0;line-height:1.25;flex:0 1 auto;letter-spacing:-.05em}
.today-heading .page-title.is-long{font-size:clamp(25px,8.1vw,35px);letter-spacing:-.052em}
.today-heading .day-arrow,.today-heading .day-calendar-trigger{width:39px;height:39px;min-height:39px;min-width:39px;flex:0 0 39px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--text);box-shadow:0 4px 14px rgba(23,34,48,.07);display:grid;place-items:center;line-height:1;padding:0;font-size:27px}
.today-heading .day-calendar-trigger{margin-inline-start:auto}
.day-calendar-trigger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
#view-today .today-subrow{display:flex;align-items:center;justify-content:space-between;min-height:34px;gap:9px;margin-top:8px;margin-bottom:0;color:var(--muted)}
.return-today{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 12px!important;border:1px solid rgba(var(--accent-rgb),.24)!important;border-radius:999px!important;background:rgba(var(--accent-rgb),.085)!important;color:var(--nav-accent,var(--accent))!important;font-size:12px;font-weight:650;text-decoration:none!important;white-space:nowrap;line-height:1.1;box-shadow:none!important}
.return-today:active{transform:scale(.97)}
html[dir="rtl"] .today-heading{direction:rtl}
html[dir="rtl"] .today-heading .page-title{letter-spacing:normal}

/* Calendar sheet: deliberate, clean month/year controls and status dots. */
#modal-content:has(.datecal-controls){max-width:100%;overflow:hidden}
.datecal-controls{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;gap:6px;margin:17px 0 18px}
.datecal-arrow{background:var(--surface2);border:1px solid var(--line);color:var(--text);height:40px;width:40px;border-radius:50%;font-size:25px;display:grid;place-items:center;padding-bottom:2px}
.datecal-month-selection{display:flex;min-width:0;justify-content:center;align-items:center;gap:6px}
.datecal-month-selection select{background:var(--surface2);border:1px solid var(--line);border-radius:10px;color:var(--text);height:39px;font-size:13px;font-weight:650;min-width:0;max-width:64%;padding:5px 7px}
.datecal-month-selection select:last-child{width:82px;flex:0 0 82px}
.datecal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px 1px;justify-items:center;align-items:center;margin:0 0 16px}
.datecal-weekday{color:var(--muted);font-size:12px;font-weight:700;height:29px;display:grid;place-items:center}
.datecal-blank{min-height:39px;width:100%}
.datecal-day{border:1px solid transparent!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:39px;max-width:100%;height:43px;min-height:43px;padding:0!important;border-radius:13px;background:transparent!important;color:var(--text);font-weight:500;font-size:13px;box-shadow:none!important}
.datecal-day.is-today{border-color:var(--accent)!important}
.datecal-day.is-selected{background:var(--accent)!important;color:var(--accent-ink)!important;border-color:var(--accent)!important}
.datecal-dot{width:4px;height:4px;flex:0 0 4px;border-radius:100%;background:var(--accent)}
.datecal-day.is-selected .datecal-dot{background:var(--accent-ink)}
.datecal-footer{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.datecal-footer .button{min-height:43px;font-size:12px;padding:10px 8px}

/* Fasting balance editor; don't change underlying ledger calculations. */
.fasting-headline{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;min-width:0}
.fasting-heading-text{min-width:0;flex:1 1 auto}
.fasting-headline .page-title{font-size:clamp(30px,8.4vw,43px);white-space:nowrap;letter-spacing:-.055em}
.fasting-add-balance{width:42px;height:42px;min-width:42px;flex:0 0 42px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:50%;display:grid;place-items:center;padding:0;margin-bottom:1px;box-shadow:0 4px 13px rgba(20,30,40,.07)}
.fasting-add-balance svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.modal-explainer,.modal-hint{color:var(--muted);line-height:1.6;font-size:13px;margin:9px 0 15px}
.fast-balance-current{display:grid;grid-template-columns:1fr auto;gap:10px;padding:13px 15px;border-radius:14px;background:var(--surface2);margin:15px 0 18px;color:var(--muted)}
.fast-balance-current strong{color:var(--text);font-size:17px}
.fast-balance-current span{font-size:13px}

/* Qada day-equivalent card: each section has its own spacing, no overlap. */
#view-qada .qada-day-panel{padding:21px!important;overflow:hidden!important;display:flex;flex-direction:column;gap:0}
.qada-day-panel .day-summary-amount{line-height:1.1;margin:0 0 15px;display:flex;align-items:baseline;gap:9px;font-size:clamp(30px,9vw,43px);min-width:0}
.qada-day-panel .day-summary-amount small{font-size:14px;color:var(--muted)}
.qada-day-panel>.progress-track{height:5px;margin:0 0 15px;flex:0 0 5px}
.qada-day-panel .day-summary-note{margin:0 0 20px;line-height:1.6;font-size:12px;color:var(--muted)}
.qada-day-panel .two-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 18px;align-items:stretch}
.qada-day-panel .stat-tile{min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:14px 12px;border:1px solid var(--line);border-radius:17px;background:var(--surface2)}
.qada-day-panel .stat-tile .mini-label{display:block;min-height:30px;line-height:1.35;font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.qada-day-panel .stat-tile strong{font-size:clamp(19px,6.5vw,25px);line-height:1.14;overflow:visible;text-overflow:clip;margin-top:10px}
.qada-day-panel .qada-day-submit{width:100%;margin:0!important;min-height:48px;flex:0 0 auto;padding:12px 14px;position:relative;border-radius:13px}

/* Premium glass: translucent neutral material and accent-responsive active icon. */
.glass-nav,.glass-nav.compact,body[data-theme="light"] .glass-nav,body[data-theme="dark"] .glass-nav,body[data-theme="oled"] .glass-nav{
 background:rgba(244,248,252,calc(var(--glass-alpha,.74) * .25))!important;border:1px solid rgba(255,255,255,.71)!important;
 box-shadow:0 8px 26px rgba(31,43,62,.125),inset 0 1.5px 1px rgba(255,255,255,.93),inset 0 -1px 1px rgba(110,124,144,.11),0 0 0 .8px rgba(126,142,161,.09)!important;
 -webkit-backdrop-filter:blur(var(--glass-blur,24px)) saturate(165%) brightness(1.015)!important;
 backdrop-filter:blur(var(--glass-blur,24px)) saturate(165%) brightness(1.015)!important;
}
.glass-nav::before{background:linear-gradient(175deg,rgba(255,255,255,.33),rgba(255,255,255,.04) 37%,transparent 70%)!important}
.glass-nav .nav-glider,.glass-nav.compact .nav-glider{
 background:rgba(247,249,253,.32)!important;border:1px solid rgba(255,255,255,.80)!important;
 box-shadow:inset 0 1px 1px rgba(255,255,255,.95),0 3px 12px rgba(31,47,69,.12)!important;
 -webkit-backdrop-filter:blur(12px) saturate(130%);backdrop-filter:blur(12px) saturate(130%);
}
.glass-nav .tab,.glass-nav.compact .tab{color:var(--nav-idle,#788493)!important;border:0!important}
.glass-nav .tab-icon svg,.glass-nav.compact .tab-icon svg{width:var(--icon-size,23px)!important;height:var(--icon-size,23px)!important;max-width:28px;max-height:28px;stroke:currentColor!important;stroke-width:1.85!important;fill:none!important;stroke-linecap:round;stroke-linejoin:round}
.glass-nav .tab.active .tab-icon svg,.glass-nav.compact .tab.active .tab-icon svg,body[data-theme=dark] .glass-nav .tab.active .tab-icon svg,body[data-theme=oled] .glass-nav .tab.active .tab-icon svg{stroke:var(--nav-accent,var(--accent))!important}
.glass-nav .nav-glider.dragging{transition:none!important}
body[data-theme=dark] .glass-nav,body[data-theme=oled] .glass-nav{background:rgba(155,164,181,calc(var(--glass-alpha,.74) * .13))!important;border-color:rgba(231,235,247,.23)!important;box-shadow:0 8px 29px rgba(0,0,0,.33),inset 0 1px rgba(255,255,255,.23),0 0 0 .6px rgba(255,255,255,.12)!important}
body[data-theme=dark] .glass-nav .nav-glider,body[data-theme=oled] .glass-nav .nav-glider{background:rgba(171,179,199,.10)!important;border-color:rgba(230,236,245,.26)!important;box-shadow:inset 0 1px rgba(255,255,255,.28),0 2px 11px rgba(0,0,0,.22)!important}
body[data-theme=dark],body[data-theme=oled]{--nav-idle:#b5bdcb}

/* Intentional dark surfaces: never an inversion of the light palette. */
body[data-theme=dark]{--surface:#252a31;--surface2:#303741;--surface3:#3b444f;--text:#f2f4f7;--muted:#aab3bf;--line:rgba(220,229,245,.115);--bg:#12171e;--shadow:0 8px 22px rgba(0,0,0,.17);--good:#64b99d;--bad:#df7d88}
body[data-theme=oled]{--surface:#141519;--surface2:#21242b;--surface3:#292f37;--text:#f3f4f8;--muted:#a7b0bd;--line:rgba(231,238,250,.14);--bg:#000;--shadow:0 8px 22px rgba(0,0,0,.36);--good:#64b99d;--bad:#df7d88}
body[data-theme=dark] .glass-card,body[data-theme=dark] .surface-card,body[data-theme=oled] .glass-card,body[data-theme=oled] .surface-card{border-color:var(--line)!important;box-shadow:0 8px 24px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.025)!important}
body[data-theme=dark] .prayer-line,body[data-theme=oled] .prayer-line,body[data-theme=dark] .qada-row,body[data-theme=oled] .qada-row{background:var(--surface);box-shadow:0 5px 18px rgba(0,0,0,.17);border-color:var(--line)}
body[data-theme=dark] .kicker,body[data-theme=oled] .kicker,body[data-theme=dark] .settings-sublabel,body[data-theme=oled] .settings-sublabel{color:#a7b0bd}
body[data-theme=dark] .hero-hint,body[data-theme=oled] .hero-hint,body[data-theme=dark] .profile-info span,body[data-theme=oled] .profile-info span{color:var(--muted)}
body[data-theme=dark] .hero .ring,body[data-theme=oled] .hero .ring{background:conic-gradient(var(--accent) calc(var(--pct)*1%),var(--surface3) 0)}
body[data-theme=dark] .segmented,body[data-theme=oled] .segmented{background:var(--surface2)!important}
body[data-theme=dark] .segmented button,body[data-theme=oled] .segmented button{color:var(--muted)}
body[data-theme=dark] .segmented button.selected,body[data-theme=oled] .segmented button.selected{color:var(--text);background:var(--surface3)!important}
body[data-theme=dark] .chip,body[data-theme=oled] .chip{background:var(--surface2)!important;color:var(--muted)!important}
body[data-theme=dark] .chip.selected,body[data-theme=oled] .chip.selected{background:var(--surface3)!important;color:var(--text)!important}
body[data-theme=dark] .dua-category,body[data-theme=oled] .dua-category{background:rgba(var(--accent-rgb),.15)!important;color:var(--good)}
body[data-theme=dark] .qada-circle,body[data-theme=oled] .qada-circle{background:var(--surface2)!important;color:var(--text)!important}
body[data-theme=dark] .qada-row-line .progress-track,body[data-theme=oled] .qada-row-line .progress-track{background:var(--surface3)!important}
body[data-theme=dark] .state-btn:not([aria-pressed=true]),body[data-theme=oled] .state-btn:not([aria-pressed=true]){background:transparent!important;border-color:#515c69;color:#bac3d0!important}
body[data-theme=dark] .state-btn[aria-pressed=true]:not(.on-time):not(.late),body[data-theme=oled] .state-btn[aria-pressed=true]:not(.on-time):not(.late){background:var(--surface3)!important;border-color:var(--line)!important;color:var(--text)}
body[data-theme=dark] .fast-record-form input[type=date],body[data-theme=oled] .fast-record-form input[type=date],body[data-theme=dark] .fast-date-wrapper,body[data-theme=oled] .fast-date-wrapper{background:var(--surface2);border-color:var(--line);color:var(--text)}
body[data-theme=dark] .calday,body[data-theme=oled] .calday{color:var(--text)}
body[data-theme=dark] .calday.fasted,body[data-theme=oled] .calday.fasted{background:rgba(var(--accent-rgb),.23)!important;color:var(--good)!important}
body[data-theme=dark] .calday.current,body[data-theme=oled] .calday.current{color:var(--accent-ink)!important}
body[data-theme=dark] .settings-route-icon,body[data-theme=oled] .settings-route-icon,body[data-theme=dark] .settings-route-arrow,body[data-theme=oled] .settings-route-arrow{color:var(--muted)!important}
body[data-theme=dark] .day-calendar-trigger,body[data-theme=oled] .day-calendar-trigger,body[data-theme=dark] .day-arrow,body[data-theme=oled] .day-arrow{box-shadow:0 3px 13px rgba(0,0,0,.22)}
body[data-theme=dark] .return-today,body[data-theme=oled] .return-today{color:var(--nav-accent)!important;background:rgba(var(--accent-rgb),.16)!important}
body[data-theme=dark] .rail-action,body[data-theme=oled] .rail-action,body[data-theme=dark] .rail-action svg,body[data-theme=oled] .rail-action svg{color:var(--muted)!important;stroke:var(--muted)!important}
body[data-theme=dark] .qada-day-panel .stat-tile,body[data-theme=oled] .qada-day-panel .stat-tile{background:var(--surface2);border-color:var(--line)}
body[data-theme=dark] .editable-years,body[data-theme=oled] .editable-years{color:var(--text);background:var(--surface)!important}
body[data-theme=dark] .reader-screen,body[data-theme=oled] .reader-screen,body[data-theme=dark] .modal,body[data-theme=oled] .modal{background:var(--surface)!important;color:var(--text)}
body[data-theme=dark] .form-field input,body[data-theme=oled] .form-field input,body[data-theme=dark] .form-field select,body[data-theme=oled] .form-field select{background:var(--surface2);border-color:var(--line);color:var(--text)}
body[data-theme=dark] .button,body[data-theme=oled] .button{color:var(--accent-ink)}
body[data-theme=dark] .button.secondary,body[data-theme=oled] .button.secondary{background:var(--surface2)!important;color:var(--text)!important}

/* All components fit small devices without changing the selected design. */
@media(max-width:390px){
 .today-heading{gap:7px}.today-heading .day-arrow,.today-heading .day-calendar-trigger{width:35px;height:35px;min-width:35px;flex-basis:35px;font-size:24px}
 .today-heading .page-title{font-size:clamp(31px,10vw,39px)}
 .today-heading .page-title.is-long{font-size:clamp(24px,8vw,31px)}
 .fasting-headline .page-title{font-size:clamp(28px,8.1vw,39px)}
 .qada-day-panel .stat-tile{padding:12px 10px}
 .datecal-day{height:38px;min-height:38px}
}
@media(max-width:350px){.today-heading{gap:5px}.today-heading .day-arrow,.today-heading .day-calendar-trigger{width:32px;height:32px;min-width:32px;flex-basis:32px}.today-heading .page-title.is-long{font-size:23px}.fasting-headline .page-title{font-size:29px}.datecal-month-selection{gap:2px}.datecal-month-selection select{font-size:12px;padding:4px}}
@media(prefers-reduced-motion:reduce){.setting-line input[type=checkbox],.setting-line input[type=checkbox]::after{transition:none!important}}
/* Secondary polish: readable iOS-style toast and functioning appearance controls. */
html{background:var(--bg);color-scheme:inherit}
.toast{background:rgba(249,251,253,.94)!important;color:#28313d!important;border:1px solid rgba(170,184,201,.32)!important;box-shadow:0 9px 28px rgba(27,40,57,.15)!important;border-radius:16px!important;max-width:calc(100vw - 40px)!important;padding:12px 15px!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.toast button{color:var(--nav-accent,var(--accent))!important}
body[data-theme=dark] .toast,body[data-theme=oled] .toast{background:rgba(45,53,64,.91)!important;color:#f2f6fa!important;border:1px solid rgba(225,235,250,.23)!important;box-shadow:0 9px 28px rgba(0,0,0,.33)!important}
body[data-shadow="false"] .glass-card,body[data-shadow="false"] .surface-card,body[data-shadow="false"] .prayer-line,body[data-shadow="false"] .qada-row,body[data-shadow="false"] .dua-card{box-shadow:none!important}
body[data-border="false"] .glass-card,body[data-border="false"] .surface-card,body[data-border="false"] .prayer-line,body[data-border="false"] .qada-row,body[data-border="false"] .dua-card{border-color:transparent!important}
body:not(.no-grad) .ambient{display:block!important;opacity:.18!important;z-index:0!important}
body:not(.no-grad) .app-shell{position:relative;z-index:1}
body[data-theme=dark]:not(.no-grad) .ambient,body[data-theme=oled]:not(.no-grad) .ambient{opacity:.24!important;mix-blend-mode:screen}
body[data-theme=dark] .setting-range,body[data-theme=oled] .setting-range{accent-color:var(--accent);color:var(--accent);background:transparent}

/* Athar 4.0.2 — targeted Clarity refinements; keeps the 4.0.1 layouts. */
#view-qada > .qada-headline .page-title,#view-duas > .page-title{margin-top:0}
#view-duas > .page-title{margin-bottom:24px}
#view-today .date-kicker,.prayer-name,.prayer-name[lang=ar]{color:var(--accent-legible)!important}
#view-today .date-kicker{letter-spacing:.09em}
.today-heading .page-title,.today-heading .page-title.is-long{font-size:clamp(30px,8.8vw,41px)!important;letter-spacing:-.047em;line-height:1.16;overflow:visible;min-width:0}
.today-heading .page-title.is-long{font-size:clamp(30px,8.8vw,41px)!important}
.today-heading{position:relative;gap:9px;flex-wrap:nowrap}
.calendar-anchor{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:auto;flex:0 0 auto}
.today-heading .day-calendar-trigger{margin:0!important}
.calendar-pop{position:absolute;top:calc(100% + 9px);inset-inline-end:0;min-width:max-content;z-index:5;transform-origin:top right;animation:athar-calendar-expand .24s cubic-bezier(.15,.85,.22,1);box-shadow:0 5px 15px rgba(21,30,40,.10)!important}
@keyframes athar-calendar-expand{from{opacity:0;transform:translateY(-4px) scale(.88)}to{opacity:1;transform:translateY(0) scale(1)}}
.today-subrow{min-height:34px}
@media(max-width:370px){.today-heading{gap:5px}.today-heading .page-title,.today-heading .page-title.is-long{font-size:clamp(25px,8.2vw,33px)!important}.calendar-pop{font-size:11px}}
.state-btn.on-time[aria-pressed=true]{background:#398c73!important;border-color:#398c73!important;color:#fff!important}
.state-btn.late[aria-pressed=true]{background:#c95d62!important;border-color:#c95d62!important;color:#fff!important}
body[data-theme=dark] .state-btn.on-time[aria-pressed=true],body[data-theme=oled] .state-btn.on-time[aria-pressed=true]{background:#51ab8b!important;border-color:#51ab8b!important}
body[data-theme=dark] .state-btn.late[aria-pressed=true],body[data-theme=oled] .state-btn.late[aria-pressed=true]{background:#de7277!important;border-color:#de7277!important}
.settings-route-icon,body[data-theme=dark] .settings-route-icon,body[data-theme=oled] .settings-route-icon{color:var(--accent-legible)!important}
.profile-card .profile-info{justify-content:center}
.dua-card{cursor:pointer;display:flex;align-items:stretch;outline-offset:2px}
.dua-card:focus-visible{outline:2px solid var(--accent)}
.dua-card-rail{justify-content:center;align-items:center;gap:12px}
.dua-card-rail .rail-action,.dua-card-rail .rail-action svg,body[data-theme=dark] .rail-action,body[data-theme=oled] .rail-action,body[data-theme=dark] .rail-action svg,body[data-theme=oled] .rail-action svg{color:var(--accent-legible)!important;stroke:var(--accent-legible)!important}
.dua-category{background:rgba(var(--accent-rgb),.1)!important;color:var(--accent-legible)!important}
.duas-filters{flex-wrap:nowrap!important;overflow:visible!important;gap:7px!important}
.duas-filters .chip{flex:0 0 auto}
.duas-filters .chip.selected,body[data-theme=dark] .duas-filters .chip.selected,body[data-theme=oled] .duas-filters .chip.selected{background:var(--accent)!important;color:var(--accent-ink)!important;border-color:transparent!important}
.dua-category-panel{margin:0 0 14px!important;padding:9px!important;display:flex;flex-direction:column;gap:2px;box-shadow:0 5px 18px rgba(20,33,45,.06)!important}
.dua-category-item{width:100%;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;border-radius:12px;background:transparent;color:var(--text);font-size:14px;text-align:start}
.dua-category-item small{font-size:12px;color:var(--muted)}
.dua-category-item.selected{background:rgba(var(--accent-rgb),.12)!important;color:var(--accent-legible);font-weight:700}
.dua-category-item:focus-visible{outline:2px solid var(--accent)}
.reader-screen{overflow:hidden}
.reader-bar{transition:opacity .2s ease,transform .2s ease;position:relative;z-index:2}
.reader-head-actions{display:flex;align-items:center;gap:10px}
.reader-tool{width:35px;height:35px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;color:var(--accent-legible);background:var(--surface2);padding:8px}
.reader-tool svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.reader-toolbar{transition:opacity .2s ease,transform .2s ease;position:relative;z-index:2}
.reader-screen.chrome-hidden .reader-bar,.reader-screen.chrome-hidden .reader-toolbar,.reader-screen.chrome-hidden .reader-searchbox{opacity:0;visibility:hidden;pointer-events:none}
.reader-screen.chrome-hidden .reader-bar{transform:translateY(-7px)}
.reader-screen.chrome-hidden .reader-toolbar{transform:translateY(7px)}
.reader-screen.chrome-hidden .reader-scroll{margin-top:calc(-65px - env(safe-area-inset-top));margin-bottom:calc(-80px - env(safe-area-inset-bottom));padding-top:calc(65px + env(safe-area-inset-top))}
.reader-screen.chrome-hidden .reader-inner{padding-top:45px}
.reader-copy{font-size:calc(20px * var(--reader-scale,1.22))!important;white-space:pre-wrap;direction:rtl;text-align:justify!important;text-align-last:start;word-spacing:normal;line-height:2.07;letter-spacing:normal;overflow-wrap:break-word}
.reader-copy .reader-match{background:rgba(241,187,67,.35);color:inherit;border-radius:3px}
.reader-copy .reader-match.current{background:#eeb653;outline:1px solid rgba(255,174,22,.8)}
.reader-searchbox{display:flex;align-items:center;gap:7px;padding:9px 16px;background:var(--surface);border-bottom:1px solid var(--line);z-index:3}
.reader-searchbox input{flex:1;min-width:60px;border:1px solid var(--line);background:var(--surface2);color:var(--text);padding:9px 10px;border-radius:12px;font-size:14px}
.reader-searchbox span{font-size:11px;color:var(--muted);white-space:nowrap}
.reader-searchbox button{width:29px;height:31px;border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:10px}
.qada-goal-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 0 17px;padding:11px 2px;border-top:1px solid var(--line)}
.qada-goal-row div{display:flex;flex-direction:column;gap:4px;min-width:0}
.qada-goal-row strong{font-size:14px}
.qada-goal-row span{color:var(--muted);font-size:11px;line-height:1.4}
.goal-inline,.activity-undo{background:rgba(var(--accent-rgb),.11);color:var(--accent-legible);border:1px solid rgba(var(--accent-rgb),.18);padding:10px 12px;border-radius:999px;white-space:nowrap;font-size:12px;font-weight:650}
.activity-actions .activity-undo{min-width:58px;width:auto!important;min-height:36px}
#modal-date{display:block!important;width:100%;min-height:48px;text-align:center;text-align-last:center;padding:12px 16px!important;line-height:1.5;direction:ltr;appearance:auto!important;-webkit-appearance:date-picker!important}
#modal-date::-webkit-date-and-time-value{text-align:center;min-height:1.5em}
.weekday-choices{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:10px 0 18px}
.weekday-choice{display:block;position:relative;min-width:0}
.weekday-choice input{position:absolute;opacity:0;inset:0}
.weekday-choice span{display:grid;place-items:center;height:37px;border:1px solid var(--line);background:var(--surface2);border-radius:10px;font-size:11px;color:var(--muted);cursor:pointer}
.weekday-choice input:checked + span{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.weekday-choice input:focus-visible + span{outline:2px solid var(--accent)}
.calday.planned,.calday.recurring{background:rgba(var(--accent-rgb),.12)!important;color:var(--accent-legible)!important;border:1px dashed rgba(var(--accent-rgb),.4)!important}
.calday.planned{background:var(--accent)!important;color:var(--accent-ink)!important;border:1px solid var(--accent)!important}
.calday.fasted{border:2px solid rgba(57,140,115,.2)!important}
.fast-plan-hint{font-size:12px;line-height:1.55;color:var(--muted);margin:11px 4px 6px}
/* Light neutral glass, no luminous halo. Every tab remains stationary on scroll. */
.glass-nav,.glass-nav.compact,body[data-theme=light] .glass-nav{background:rgba(237,242,249,.085)!important;border:1px solid rgba(252,253,255,.68)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.46),0 5px 14px rgba(19,30,49,.075)!important;-webkit-backdrop-filter:blur(var(--glass-blur,24px)) saturate(125%)!important;backdrop-filter:blur(var(--glass-blur,24px)) saturate(125%)!important}
.glass-nav::before{background:linear-gradient(180deg,rgba(255,255,255,.15),transparent 45%)!important}
.glass-nav .nav-glider,.glass-nav.compact .nav-glider{background:rgba(242,245,253,.16)!important;border:1px solid rgba(255,255,255,.56)!important;box-shadow:inset 0 1px rgba(255,255,255,.45),0 2px 8px rgba(16,27,45,.06)!important;transition:transform .28s cubic-bezier(.18,.9,.19,1.05),width .25s!important}
.glass-nav .nav-glider.dragging{transition:none!important}
body[data-theme=dark] .glass-nav,body[data-theme=oled] .glass-nav{background:rgba(144,154,173,.09)!important;box-shadow:inset 0 1px rgba(255,255,255,.13),0 4px 14px rgba(0,0,0,.23)!important}
body[data-theme=dark] .glass-nav .nav-glider,body[data-theme=oled] .glass-nav .nav-glider{background:rgba(207,217,232,.085)!important;box-shadow:inset 0 1px rgba(255,255,255,.13),0 2px 8px rgba(0,0,0,.15)!important}
@media(prefers-reduced-motion:reduce){.calendar-pop{animation:none!important}.reader-chrome,.nav-glider{transition:none!important}}
body[data-motion=reduce] .calendar-pop{animation:none!important}
/* Compact the Qada Days summary just enough to keep its main action above the dock on standard iPhones. */
#view-qada .hero{margin-bottom:17px!important}
#view-qada .qada-day-panel{padding:18px!important}
#view-qada .qada-day-panel .day-summary-amount{margin-bottom:10px}
#view-qada .qada-day-panel>.progress-track{margin-bottom:11px}
#view-qada .qada-day-panel .day-summary-note{margin-bottom:12px}
#view-qada .qada-day-panel .two-grid{margin-bottom:10px}
#view-qada .qada-day-panel .stat-tile{padding:11px 10px!important}
#view-qada .qada-day-panel .stat-tile strong{margin-top:6px}
#view-qada .qada-goal-row{margin:10px 0 11px;padding:9px 2px}


/* ========================================================================== */
/* ATHAR — APPROVED VISUAL REFERENCES (2026-10-30)
   These final overrides intentionally change ONLY the navigation material and
   the calendar-attached Return to Today control. No tracking markup or data
   migration is involved. Colors may vary with the selected theme/accent.
   ========================================================================== */

/* Navigation dimensions and icon identities remain consistent with Athar 4.0.2.
   Light reference: soft off-white translucent material, no halos or bloom. */
.glass-nav,
.glass-nav.compact,
body[data-theme="light"] .glass-nav {
  width:min(calc(100vw - 22px),425px)!important;
  height:65px!important;
  min-height:65px!important;
  padding:5px!important;
  bottom:calc(env(safe-area-inset-bottom) + 11px)!important;
  border-radius:999px!important;
  border:1px solid rgba(219,223,230,.76)!important;
  background:rgba(247,248,251,.77)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:blur(21px) saturate(108%)!important;
  backdrop-filter:blur(21px) saturate(108%)!important;
  filter:none!important;
  overflow:hidden!important;
}
.glass-nav::before,
.glass-nav::after {display:none!important;content:none!important;}
.glass-nav .nav-glider,
.glass-nav.compact .nav-glider,
body[data-theme="light"] .glass-nav .nav-glider {
  top:5px!important;
  bottom:5px!important;
  background:rgba(255,246,249,.70)!important;
  border:1px solid rgba(255,255,255,.80)!important;
  box-shadow:none!important;
  filter:none!important;
}
.glass-nav .tab,
.glass-nav.compact .tab {height:48px!important;min-height:48px!important;}
.glass-nav .tab-icon svg,
.glass-nav.compact .tab-icon svg {filter:none!important;}
.glass-nav .tab.active .tab-icon svg,
.glass-nav.compact .tab.active .tab-icon svg {
  stroke:var(--nav-accent,var(--accent))!important;
  filter:none!important;
}
/* Dark reference: uniform single-color charcoal, same geometry, zero glow.
   Do not use gradients, edge lighting, bloom, drop shadows, or inset highlights. */
body[data-theme="dark"] .glass-nav,
body[data-theme="oled"] .glass-nav,
body[data-theme="dark"] .glass-nav.compact,
body[data-theme="oled"] .glass-nav.compact {
  background:rgba(29,30,33,.95)!important;
  border:1px solid rgba(102,103,109,.26)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:blur(14px) saturate(100%)!important;
  backdrop-filter:blur(14px) saturate(100%)!important;
}
body[data-theme="dark"] .glass-nav .nav-glider,
body[data-theme="oled"] .glass-nav .nav-glider,
body[data-theme="dark"] .glass-nav.compact .nav-glider,
body[data-theme="oled"] .glass-nav.compact .nav-glider {
  background:rgba(58,59,63,.91)!important;
  border:1px solid rgba(112,113,119,.16)!important;
  box-shadow:none!important;
  filter:none!important;
}
body[data-theme="dark"] .glass-nav .tab,
body[data-theme="oled"] .glass-nav .tab {color:#c0c4cc!important;}
body[data-theme="light"] .glass-nav .tab {color:#7e8796!important;}

/* Approved Return to Today: connected rounded pill directly under calendar. */
.calendar-anchor {position:relative;overflow:visible!important;}
.today-heading .return-today.calendar-pop {
  top:calc(100% + 16px)!important;
  inset-inline-end:23px!important;
  min-width:153px!important;
  min-height:38px!important;
  padding:8px 17px!important;
  background:rgba(var(--accent-rgb),.095)!important;
  color:var(--accent-legible)!important;
  border:1px solid rgba(var(--accent-rgb),.15)!important;
  border-radius:999px!important;
  outline:4px solid rgba(255,255,255,.94)!important;
  box-shadow:0 4px 12px rgba(33,40,50,.11)!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.35!important;
  text-decoration:none!important;
  letter-spacing:0!important;
  transform-origin:80% top!important;
  white-space:nowrap;
  isolation:isolate;
}
.today-heading .return-today.calendar-pop::before {
  content:"";
  position:absolute;
  right:19px;
  top:-8px;
  width:13px;
  height:13px;
  border-top:4px solid rgba(255,255,255,.94);
  border-left:4px solid rgba(255,255,255,.94);
  border-radius:2px 0 0 0;
  background:rgba(var(--accent-rgb),.095);
  transform:rotate(45deg);
  z-index:-1;
  pointer-events:none;
}
body[data-theme="dark"] .today-heading .return-today.calendar-pop,
body[data-theme="oled"] .today-heading .return-today.calendar-pop {
  background:rgba(var(--accent-rgb),.20)!important;
  color:var(--accent-legible)!important;
  border-color:rgba(var(--accent-rgb),.35)!important;
  outline-color:rgba(82,84,89,.46)!important;
  box-shadow:0 4px 12px rgba(0,0,0,.15)!important;
}
body[data-theme="dark"] .today-heading .return-today.calendar-pop::before,
body[data-theme="oled"] .today-heading .return-today.calendar-pop::before {
  background:rgba(var(--accent-rgb),.20);
  border-color:rgba(82,84,89,.46);
}
@media(max-width:350px) {
  .today-heading .return-today.calendar-pop {inset-inline-end:9px!important;min-width:144px!important;}
}
@media(prefers-reduced-motion:reduce) {
  .today-heading .return-today.calendar-pop {animation:none!important;}
}
body[data-motion="reduce"] .today-heading .return-today.calendar-pop {animation:none!important;}