/* ══ PakNoor Design System v3 — Complete Professional Rebuild ══ */
:root{
  --bg:#FAF7F4;--surface:#FFFFFF;--surface2:#F4EFE9;--surface3:#EBE3D8;
  --rose:#B54238;--rose2:#D4826E;--rose3:#EAB8A8;
  --rose-dim:rgba(181,66,56,0.09);--rose-border:rgba(181,66,56,0.18);
  --gold:#C4954A;--gold-dim:rgba(196,149,74,0.10);
  --text:#180E0C;--text-dim:#6F574C;--text-light:#8F7C73;
  --green:#47725A;--green-dim:rgba(71,114,90,0.12);
  --red:#B84040;--red-dim:rgba(184,64,64,0.10);--blue:#4A6898;
  --border:rgba(24,14,12,0.07);--border2:rgba(24,14,12,0.13);
  --shadow-sm:0 2px 16px rgba(24,8,4,0.07),0 1px 3px rgba(24,8,4,0.04);
  --shadow:0 6px 30px rgba(24,8,4,0.10),0 2px 8px rgba(24,8,4,0.05);
  --shadow-lg:0 18px 60px rgba(24,8,4,0.14),0 6px 20px rgba(24,8,4,0.07);
  --shadow-rose:0 8px 32px rgba(181,66,56,0.28),0 2px 8px rgba(181,66,56,0.16);
  --radius:20px;--radius-sm:14px;--radius-lg:28px;
  --font-serif:'Cormorant Garamond',serif;
  --font-sans:'DM Sans',system-ui,sans-serif;
  --font-mono:'Inter',sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.4,0,.2,1);
}
html[data-theme="dark"]:root,html[data-theme="dark"] body{
  --bg:#0C0A09;--surface:#181310;--surface2:#201814;--surface3:#2A1F1A;
  --rose:#C87060;--rose2:#A05040;--rose3:#7A3828;
  --rose-dim:rgba(200,112,96,0.11);--rose-border:rgba(200,112,96,0.22);
  --gold:#C49A5A;--gold-dim:rgba(196,154,90,0.12);
  --text:#F0EAE4;--text-dim:#B99F95;--text-light:#88736C;
  --green:#6AA07A;--green-dim:rgba(106,160,122,0.14);
  --red:#E07878;--red-dim:rgba(224,120,120,0.12);--blue:#6880B8;
  --border:rgba(240,234,228,0.08);--border2:rgba(240,234,228,0.15);
  --shadow-sm:0 2px 16px rgba(0,0,0,0.48),0 1px 3px rgba(0,0,0,0.32);
  --shadow:0 6px 30px rgba(0,0,0,0.58),0 2px 8px rgba(0,0,0,0.40);
  --shadow-lg:0 18px 60px rgba(0,0,0,0.68),0 6px 20px rgba(0,0,0,0.48);
  --shadow-rose:0 8px 32px rgba(200,112,96,0.22),0 2px 8px rgba(200,112,96,0.12);
}
@media(prefers-color-scheme:dark){html:not([data-theme="light"]){
  --bg:#0C0A09;--surface:#181310;--surface2:#201814;--surface3:#2A1F1A;
  --rose:#C87060;--rose2:#A05040;--rose3:#7A3828;
  --rose-dim:rgba(200,112,96,0.11);--rose-border:rgba(200,112,96,0.22);
  --gold:#C49A5A;--gold-dim:rgba(196,154,90,0.12);
  --text:#F0EAE4;--text-dim:#B99F95;--text-light:#88736C;
  --green:#6AA07A;--green-dim:rgba(106,160,122,0.14);
  --red:#E07878;--red-dim:rgba(224,120,120,0.12);--blue:#6880B8;
  --border:rgba(240,234,228,0.08);--border2:rgba(240,234,228,0.15);
  --shadow-sm:0 2px 16px rgba(0,0,0,0.48),0 1px 3px rgba(0,0,0,0.32);
  --shadow:0 6px 30px rgba(0,0,0,0.58),0 2px 8px rgba(0,0,0,0.40);
  --shadow-lg:0 18px 60px rgba(0,0,0,0.68),0 6px 20px rgba(0,0,0,0.48);
  --shadow-rose:0 8px 32px rgba(200,112,96,0.22),0 2px 8px rgba(200,112,96,0.12);
}}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{-webkit-user-select:text;user-select:text}
html{scroll-behavior:smooth;overscroll-behavior:none}
body{background:var(--bg);color:var(--text);font-family:var(--font-sans);font-weight:400;font-size:15px;min-height:100vh;min-height:100dvh;overflow-x:hidden;padding-bottom:calc(86px + env(safe-area-inset-bottom,0px));padding-top:env(safe-area-inset-top,0px);overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
button,a,[role=button],.check-item,.glass,.chip,.day-cell,.madhab-opt,.nav-item,.prayer-widget,.nw-card,.msg-save,.saved-item-del,.cst-item-btn,.theme-btn,.perm-btn,.io-btn,.ob-btn,.ob-google,.gate-btn,.complete-btn,.aih-btn,.ai-send,.ai-think-btn,.install-btn,.install-dismiss,.modal-close,.skin-type-btn,.rose-btn,.ghost-btn,.danger-btn{touch-action:manipulation}
.nav-item{will-change:transform}
.glass{will-change:transform}
.ai-send{will-change:transform}
::-webkit-scrollbar{width:0}
input,textarea,button,select{font-family:var(--font-sans)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--rose) 72%,white);outline-offset:3px}
.skip-link{position:fixed;left:14px;top:14px;z-index:100000;transform:translateY(-180%);padding:10px 14px;border-radius:10px;background:var(--text);color:var(--bg);font-size:.8rem;font-weight:600;text-decoration:none;box-shadow:var(--shadow)}
.skip-link:focus{transform:translateY(0)}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 80% 50% at 110% -10%,rgba(181,66,56,0.08) 0%,transparent 55%),
    radial-gradient(ellipse 60% 70% at -10% 105%,rgba(181,66,56,0.06) 0%,transparent 50%),
    radial-gradient(ellipse 45% 35% at 50% 50%,rgba(196,149,74,0.03) 0%,transparent 55%)}
.wrap{position:relative;z-index:1;max-width:430px;margin:0 auto;padding:0 16px;transition:padding-top .3s}

/* ── Header ── */
.header{padding:24px 18px 16px;display:flex;align-items:center;gap:16px;position:relative}
.header.collapsed{display:none}
.header-logo{width:54px;height:54px;border-radius:18px;flex-shrink:0;background:linear-gradient(145deg,var(--rose) 0%,#9A2820 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(181,66,56,0.32),inset 0 1px 0 rgba(255,255,255,0.2);animation:logoFloat 5s ease-in-out infinite;overflow:hidden;position:relative}
.header-logo img{width:100%;height:100%;object-fit:cover;border-radius:18px;position:relative;z-index:1}
.header-logo-ar{font-family:var(--font-serif);font-size:1.3rem;font-weight:500;color:#fff;letter-spacing:.02em;position:absolute;z-index:0}
.header-info{flex:1;min-width:0}
.header-greeting{font-size:.64rem;color:var(--text-dim);letter-spacing:.13em;text-transform:uppercase;font-weight:600;margin-bottom:4px}
.header-name{font-family:var(--font-serif);font-size:1.65rem;font-weight:300;color:var(--text);line-height:1.1;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-day{font-size:.73rem;color:var(--rose);font-weight:600;margin-top:4px;letter-spacing:.02em}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(-0.5deg)}50%{transform:translateY(-4px) rotate(0.5deg)}}

/* ── Install banner ── */
.install-banner{background:var(--surface);border:1px solid var(--rose-border);border-radius:var(--radius);padding:13px 15px;display:flex;align-items:center;gap:10px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.install-banner.hidden{display:none}
.install-text{flex:1}
.install-text strong{font-size:.83rem;color:var(--text);display:block;font-weight:600}
.install-text span{font-size:.71rem;color:var(--text-dim)}
.install-btn{background:linear-gradient(135deg,var(--rose),#8A2018);color:#fff;border:none;padding:8px 16px;border-radius:11px;font-size:.75rem;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;box-shadow:0 3px 12px rgba(181,66,56,0.36);transition:all .2s}
.install-btn:active{transform:scale(.95)}
.install-dismiss{background:none;border:none;color:var(--text-dim);font-size:.95rem;cursor:pointer;padding:4px;flex-shrink:0}

/* ── Progress Hero Card ── */
.progress-card{
  background:linear-gradient(145deg,var(--rose) 0%,#9A2820 50%,#B84838 100%);
  border-radius:var(--radius-lg);padding:24px 22px;margin-bottom:16px;
  display:flex;align-items:center;gap:20px;
  box-shadow:var(--shadow-rose);
  position:relative;overflow:hidden;
  transition:opacity .3s,transform .3s
}
.progress-card::before{content:'';position:absolute;top:-30px;right:-30px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,0.07);pointer-events:none}
.progress-card::after{content:'';position:absolute;bottom:-40px;left:-20px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,0.05);pointer-events:none}
.progress-card.collapsed{display:none}
.ring-wrap{position:relative;width:86px;height:86px;flex-shrink:0}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,0.18);stroke-width:6}
.ring-fill{fill:none;stroke:rgba(255,255,255,0.92);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1)}
.ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-num{font-family:var(--font-serif);font-size:1.55rem;font-weight:500;color:#fff;line-height:1}
.ring-label{font-size:.5rem;color:rgba(255,255,255,0.72);letter-spacing:.1em;margin-top:2px}
.progress-info h3{font-family:var(--font-serif);font-size:1.2rem;font-weight:400;color:#fff}
.progress-info p{font-size:.78rem;color:rgba(255,255,255,0.82);margin-top:5px;line-height:1.55}
.days-left{display:inline-block;margin-top:10px;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);color:#fff;font-size:.71rem;padding:5px 14px;border-radius:22px;font-weight:600;backdrop-filter:blur(8px)}

/* ── Sections ── */
.section{display:none}
.section.active{display:block;animation:fadeUp .3s cubic-bezier(.4,0,.2,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sec-title{font-family:var(--font-serif);font-size:1.75rem;font-weight:300;color:var(--text);margin-bottom:5px;letter-spacing:-.02em}
.sec-sub{font-size:.78rem;color:var(--text-dim);margin-bottom:18px;line-height:1.65}
#sec-prayer>div:first-child,
#sec-routines>div:first-child,
#sec-tips>div:first-child,
#sec-settings>div:first-child,
#sec-about>div:first-child{margin-top:24px}

/* ── Cards ── */
.card{background:var(--surface);border-radius:var(--radius);overflow:hidden;margin-bottom:14px;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.card-header{padding:15px 18px 13px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.card-icon{font-size:1.15rem}
svg.card-icon{width:20px;height:20px;color:var(--rose)}
.card-title{font-family:var(--font-serif);font-size:1.1rem;font-weight:400;color:var(--text);flex:1}
.card-badge{font-size:.68rem;padding:3px 9px;border-radius:20px;font-weight:500;background:var(--surface2);color:var(--text-dim);transition:all .3s}
.card-badge.done{background:var(--green-dim);color:var(--green)}

/* ── Check items ── */
.check-item{display:flex;align-items:center;gap:14px;padding:15px 18px;cursor:pointer;transition:background .18s,opacity .25s;border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.check-item:last-child{border-bottom:none}
.check-item:active{background:var(--rose-dim)}
.check-item::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(181,66,56,0.07) 0%,transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none}
.check-item.ripple::after{opacity:1}
.checkbox{width:28px;height:28px;border:1.5px solid var(--border2);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .25s var(--ease);background:transparent}
.check-item.done .checkbox{background:linear-gradient(145deg,var(--rose),#8A2018);border-color:var(--rose);box-shadow:0 3px 10px rgba(181,66,56,0.28)}
.checkbox svg{display:none}
.check-item.done .checkbox svg{display:block}
.check-label{font-size:.87rem;color:var(--text);line-height:1.4;font-weight:400}
.check-item.done .check-label{color:var(--text-dim);text-decoration:line-through;text-decoration-color:rgba(138,112,104,0.35);transition:color .25s}
.check-sub{font-size:.71rem;color:var(--text-light);margin-top:2px}

/* ── Prayer widget ── */
.prayer-widget{background:var(--surface);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm);cursor:pointer;border:1px solid var(--border);border-left:3px solid var(--rose)}
.pw-icon{font-size:1.15rem;flex-shrink:0}
svg.pw-icon{width:22px;height:22px;color:var(--rose)}
.pw-next-label{font-size:.64rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.pw-next-name{font-family:var(--font-serif);font-size:1.08rem;color:var(--text);font-weight:400;margin-top:2px}
.pw-next-time{font-family:var(--font-serif);font-size:.98rem;color:var(--rose);margin-top:1px}
.pw-setup{font-size:.81rem;color:var(--text-dim);flex:1}
.pw-setup span{color:var(--rose);cursor:pointer;font-weight:600}
.pw-arrow{color:var(--text-light);font-size:.9rem;margin-left:auto;flex-shrink:0}

/* ── Mask badge ── */
.mask-badge{display:inline-flex;align-items:center;gap:6px;background:var(--rose-dim);border:1px solid var(--rose-border);border-radius:20px;padding:6px 14px 6px 10px;font-size:.74rem;color:var(--rose);font-weight:500;margin-bottom:12px}

/* ── Water ── */
.water-card{background:var(--surface);border-radius:var(--radius);padding:18px 16px;margin-bottom:14px;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.water-title{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.water-title-text{font-family:var(--font-serif);font-size:1.1rem;color:var(--text)}
.water-glasses{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:8px}
.glass{aspect-ratio:1;border:1.5px solid var(--border);border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s var(--ease);background:var(--surface2)}
.glass .ic{width:22px;height:22px;color:var(--border2);transition:color .25s,transform .25s}
.glass.filled{background:rgba(70,104,152,0.12);border-color:rgba(70,104,152,0.38);box-shadow:0 2px 10px rgba(70,104,152,0.13)}
.glass.filled .ic{color:rgba(60,100,160,0.75);transform:scale(1.05)}
.glass:active{transform:scale(.88)}
.water-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.water-num{text-align:center;font-size:.62rem;color:var(--text-light)}
.water-status{text-align:center;font-size:.8rem;color:var(--text-dim);margin-top:10px}
.water-status strong{color:var(--blue)}

/* ── Prayer section ── */
.next-prayer-card{border-radius:var(--radius-lg);padding:28px 24px;text-align:center;margin-bottom:16px;box-shadow:var(--shadow-rose);color:#fff;position:relative;overflow:hidden;background:linear-gradient(145deg,var(--rose) 0%,#8A2018 55%,#B84030 100%)}
.next-prayer-card::before{content:'';position:absolute;top:-50px;right:-50px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,0.08);pointer-events:none}
.next-prayer-card::after{content:'';position:absolute;bottom:-50px;left:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,0.05);pointer-events:none}
.npc-label{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75;font-weight:600;margin-bottom:8px;position:relative;z-index:1}
.npc-name{font-family:var(--font-serif);font-size:2rem;font-weight:400;margin-bottom:4px;position:relative;z-index:1}
.npc-time{font-size:2.8rem;font-weight:300;font-family:var(--font-serif);line-height:1.05;letter-spacing:.04em;position:relative;z-index:1}
.npc-countdown{font-size:.83rem;opacity:.85;margin-top:8px;position:relative;z-index:1}
.npc-no-data{padding:14px 0;font-size:.85rem;opacity:.85;line-height:1.65;position:relative;z-index:1}
.npc-no-data strong{font-weight:600;display:block;margin-bottom:4px;font-size:.97rem}
.prayer-list{background:var(--surface);border-radius:var(--radius);overflow:hidden;margin-bottom:16px;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.prayer-row{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--border);transition:background .2s}
.prayer-row:last-child{border-bottom:none}
.prayer-row.past{opacity:.45}
.prayer-row.next{background:var(--rose-dim);border-left:3px solid var(--rose)}
.prayer-row.next .pr-name{color:var(--rose);font-weight:600}
.pr-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--rose2)}
.pr-info{flex:1}
.pr-name{font-size:.9rem;color:var(--text)}
.pr-tag{font-size:.6rem;color:var(--text-light);background:var(--surface2);padding:1px 7px;border-radius:10px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin-left:6px}
.pr-time{font-family:var(--font-serif);font-size:1.05rem;color:var(--text)}
.pr-checkmark{font-size:.85rem;color:var(--green)}

/* Madhab selector */
.prayer-settings-card{background:var(--surface);border-radius:var(--radius);overflow:hidden;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.ps-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border)}
.ps-row:last-child{border-bottom:none}
.ps-label{flex:1}
.ps-label strong{font-size:.84rem;color:var(--text);display:block;font-weight:400}
.ps-label span{font-size:.7rem;color:var(--text-dim)}
.ps-input{background:var(--surface2);border:1px solid var(--border2);color:var(--text);border-radius:10px;padding:8px 12px;font-size:.82rem;outline:none;width:130px;text-align:center;transition:border-color .2s;-webkit-user-select:text;user-select:text}
.ps-input:focus{border-color:var(--rose)}
.madhab-opts{padding:8px 10px 4px;display:flex;flex-direction:column;gap:2px}
.madhab-opt{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:10px;cursor:pointer;transition:background .18s}
.madhab-opt.active{background:var(--rose-dim)}
.mo-radio{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border2);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s}
.madhab-opt.active .mo-radio{border-color:var(--rose);background:var(--rose)}
.madhab-opt.active .mo-radio::after{content:'';width:7px;height:7px;border-radius:50%;background:#fff}
.mo-info{flex:1}
.mo-name{font-size:.84rem;color:var(--text)}
.mo-sub{font-size:.7rem;color:var(--text-dim);margin-top:1px}

/* ── Recipes ── */
.recipe-card{background:var(--surface);border-radius:var(--radius);overflow:hidden;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.recipe-hdr{padding:12px 16px;background:var(--surface2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.recipe-hdr .ic{width:18px;height:18px;flex-shrink:0}
.recipe-name{font-family:var(--font-serif);font-size:1rem;color:var(--text)}
.recipe-step{display:flex;gap:10px;align-items:flex-start;padding:10px 16px;border-bottom:1px solid var(--border)}
.recipe-step:last-child{border-bottom:none}
.step-num{width:22px;height:22px;border-radius:50%;background:var(--rose-dim);border:1px solid var(--rose-border);color:var(--rose);font-size:.66rem;font-weight:500;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.step-text{font-size:.81rem;color:var(--text-dim);line-height:1.55}
.step-text strong{color:var(--text);font-weight:500}

/* ── Calendar ── */
.cal-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:12px}
.day-cell{aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .18s;background:var(--surface2);border:1px solid transparent;position:relative}
.day-cell.today{background:var(--rose-dim);border-color:var(--rose);animation:pulseCell 2.5s ease infinite}
.day-cell.complete{background:var(--green-dim);border-color:rgba(79,125,96,0.28)}
.day-cell.future{opacity:.3}
.day-cell:active{transform:scale(.9)}
@keyframes pulseCell{0%,100%{box-shadow:0 0 0 0 rgba(192,104,95,0.2)}50%{box-shadow:0 0 0 5px rgba(192,104,95,0)}}
.day-num{font-family:var(--font-serif);font-size:.95rem;font-weight:500;color:var(--text-dim);line-height:1}
.day-cell.today .day-num{color:var(--rose)}
.day-cell.complete .day-num{color:var(--green)}
.day-emoji{display:flex;align-items:center;justify-content:center;margin-top:1px;height:10px}
.day-dot{width:8px;height:8px;display:block}

/* ── Tips ── */
.tip-card{background:var(--surface);border-radius:var(--radius);padding:16px 18px;margin-bottom:12px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.tip-icon{width:44px;height:44px;border-radius:14px;flex-shrink:0;background:linear-gradient(135deg,var(--rose-dim),rgba(181,66,56,0.12));border:1px solid var(--rose-border);display:flex;align-items:center;justify-content:center;color:var(--rose)}
.tip-icon .ic{width:20px;height:20px}
.tip-title{font-size:.87rem;color:var(--text);font-weight:600;margin-bottom:4px}
.tip-body{font-size:.77rem;color:var(--text-dim);line-height:1.65}
.avoid-item{display:flex;gap:10px;align-items:flex-start;padding:11px 16px;border-bottom:1px solid var(--border)}
.avoid-item:last-child{border-bottom:none}
.avoid-x{width:22px;height:22px;border-radius:6px;background:var(--red-dim);color:var(--red);font-size:.7rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700;margin-top:1px}
.avoid-text{font-size:.81rem;color:var(--text-dim);line-height:1.4}
.avoid-text strong{color:var(--text);display:block;font-weight:500;margin-bottom:2px}

/* ── Buttons ── */
.rose-btn{width:100%;padding:14px;border:none;border-radius:var(--radius-sm);background:linear-gradient(145deg,var(--rose),#8A2018);color:#fff;font-family:var(--font-sans);font-size:.86rem;font-weight:600;cursor:pointer;letter-spacing:.03em;box-shadow:0 5px 18px rgba(181,66,56,0.34);transition:all .2s}
.rose-btn:active{transform:scale(.97);box-shadow:0 2px 8px rgba(181,66,56,0.24)}
.ghost-btn{width:100%;padding:13px;border-radius:var(--radius-sm);border:1.5px solid var(--border2);background:transparent;color:var(--text-dim);font-family:var(--font-sans);font-size:.84rem;cursor:pointer;transition:all .2s}
.ghost-btn:active{background:var(--surface2)}
.danger-btn{width:100%;padding:13px;border-radius:var(--radius-sm);border:1px solid rgba(184,64,64,0.22);background:var(--red-dim);color:var(--red);font-family:var(--font-sans);font-size:.84rem;font-weight:600;cursor:pointer;transition:all .2s}
.danger-btn:active{transform:scale(.97)}

/* ── Settings ── */
.setting-group{background:var(--surface);border-radius:var(--radius);overflow:hidden;margin-bottom:14px;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.setting-group-title{padding:14px 18px 12px;border-bottom:1px solid var(--border);font-family:var(--font-serif);font-size:1.05rem;color:var(--text);display:flex;align-items:center;gap:8px;font-weight:400}
.setting-group-title .ic{width:17px;height:17px;color:var(--rose);flex-shrink:0}
.setting-row{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border)}
.setting-row:last-child{border-bottom:none}
.setting-label{flex:1}
.setting-label strong{font-size:.86rem;color:var(--text);display:block;font-weight:500}
.setting-label span{font-size:.72rem;color:var(--text-dim)}
.time-input{background:var(--surface2);border:1px solid var(--border2);color:var(--text);border-radius:10px;padding:7px 10px;font-size:.82rem;outline:none;width:100px;text-align:center;transition:border-color .2s}
.time-input:focus{border-color:var(--rose)}
.toggle{position:relative;width:46px;height:26px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--surface3);border-radius:26px;cursor:pointer;transition:.3s;border:1px solid var(--border2)}
.toggle-slider::before{content:'';position:absolute;height:20px;width:20px;left:2px;bottom:2px;background:var(--text-dim);border-radius:50%;transition:.3s}
.toggle input:checked+.toggle-slider{background:var(--rose);border-color:var(--rose)}
.toggle input:checked+.toggle-slider::before{transform:translateX(20px);background:#fff}
.theme-toggle{display:flex;gap:4px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:4px}
.theme-btn{flex:1;padding:8px 6px;border:none;border-radius:9px;font-size:.72rem;color:var(--text-dim);background:transparent;cursor:pointer;transition:all .2s}
.theme-btn.active{background:var(--surface);color:var(--text);font-weight:500;box-shadow:var(--shadow-sm)}
.perm-btn{width:100%;padding:12px;border:none;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.83rem;font-weight:500;cursor:pointer;transition:all .2s;letter-spacing:.03em;margin-top:4px}
.perm-btn.ask{background:var(--rose);color:#fff;box-shadow:0 2px 8px rgba(192,104,95,0.3)}
.perm-btn.granted{background:var(--green-dim);color:var(--green);border:1px solid rgba(79,125,96,0.25)}
.perm-btn.denied{background:var(--red-dim);color:var(--red);border:1px solid rgba(184,64,64,0.2)}
.perm-btn:active{transform:scale(.97)}
.io-row{display:flex;gap:10px;margin-top:4px}
.io-btn{flex:1;padding:11px 8px;border-radius:12px;border:none;font-size:.78rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}
.io-btn:active{transform:scale(.96)}
.io-btn.export{background:var(--rose-dim);border:1px solid var(--rose-border);color:var(--rose)}
.io-btn.import{background:var(--green-dim);border:1px solid rgba(79,125,96,0.2);color:var(--green)}
.install-steps{padding:4px 0}
.install-step{display:flex;align-items:flex-start;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border)}
.install-step:last-child{border-bottom:none}
.step-circle{width:28px;height:28px;border-radius:50%;background:var(--rose-dim);border:1px solid var(--rose-border);color:var(--rose);font-size:.76rem;font-weight:500;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.step-info strong{font-size:.83rem;color:var(--text);display:block;font-weight:500;margin-bottom:2px}
.step-info span{font-size:.72rem;color:var(--text-dim);line-height:1.4}
.notif-status-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--rose-dim);border-radius:12px;margin-bottom:12px}

/* ── Bottom Nav ── */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:rgba(250,247,244,0.96);backdrop-filter:blur(40px) saturate(1.4);-webkit-backdrop-filter:blur(40px) saturate(1.4);border-top:1px solid var(--border);display:flex;padding:4px 6px max(6px,env(safe-area-inset-bottom));gap:2px;z-index:100;box-shadow:0 -2px 20px rgba(24,8,4,0.04)}
html[data-theme="dark"] .bottom-nav{background:rgba(12,10,9,0.96);box-shadow:0 -2px 20px rgba(0,0,0,0.3)}
@media(prefers-color-scheme:dark){html:not([data-theme="light"]) .bottom-nav{background:rgba(12,10,9,0.96);box-shadow:0 -2px 20px rgba(0,0,0,0.3)}}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 6px;cursor:pointer;color:var(--text-light);font-size:.6rem;letter-spacing:.02em;border:none;background:transparent;transition:color .18s,background .2s,transform .12s var(--spring);font-family:var(--font-sans);min-width:0;overflow:hidden;min-height:52px;border-radius:14px;font-weight:500}
.nav-item:active{transform:scale(.88)}
.nav-item.active{color:var(--rose);background:var(--rose-dim)}
.nav-icon{font-size:1.18rem;transition:transform .22s var(--spring);display:block}
svg.nav-icon{width:22px;height:22px;stroke:currentColor;fill:none;margin:0 auto}
.nav-item.active .nav-icon{transform:translateY(-1px) scale(1.12)}
.nav-icon-wrap{position:relative;display:inline-block}
.notif-dot{position:absolute;top:-2px;right:-4px;width:7px;height:7px;border-radius:50%;background:var(--red);border:1.5px solid var(--bg);display:none}
/* Reusable icon class — inline SVG currentColor icons */
.ic{width:20px;height:20px;stroke:currentColor;fill:none;flex-shrink:0;vertical-align:middle}
.ic-sm{width:16px;height:16px}
.ic-lg{width:28px;height:28px}
.ic-xl{width:40px;height:40px}
/* Brand mark: crescent + star, scales to container. Uses currentColor for fill. */
.brand-mark{width:62%;height:62%;color:#FBF9F6;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.18))}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:300;display:none;align-items:flex-end;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:22px 22px 44px;width:100%;max-width:430px;animation:slideUp .32s cubic-bezier(.4,0,.2,1);max-height:88vh;overflow-y:auto;position:relative;-webkit-overflow-scrolling:touch}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-handle{width:40px;height:4px;background:var(--border2);border-radius:4px;margin:0 auto 20px}
.modal-close{position:absolute;top:16px;right:16px;background:var(--surface2);border:1px solid var(--border);color:var(--text-dim);width:34px;height:34px;border-radius:50%;font-size:.88rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.modal-title{font-family:var(--font-serif);font-size:1.45rem;font-weight:300;color:var(--text);margin-bottom:4px;letter-spacing:-.01em}
.modal-sub{font-size:.77rem;color:var(--text-dim);margin-bottom:18px;line-height:1.55}
.complete-btn{width:100%;padding:14px;background:linear-gradient(145deg,var(--rose),#8A2018);color:#fff;border:none;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.86rem;font-weight:600;cursor:pointer;margin-top:14px;transition:all .2s;box-shadow:0 5px 18px rgba(181,66,56,0.32)}
.complete-btn:active{transform:scale(.97)}
.complete-btn.done-btn{background:var(--green-dim);color:var(--green);border:1px solid rgba(71,114,90,0.25);box-shadow:none}

/* ── Toast ── */
.toast{position:fixed;bottom:calc(86px + env(safe-area-inset-bottom,0px) + 10px);left:50%;transform:translateX(-50%) translateY(16px) scale(.94);background:var(--text);color:var(--bg);padding:12px 24px;border-radius:30px;font-size:.8rem;font-weight:500;opacity:0;transition:all .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none;white-space:nowrap;z-index:9990;max-width:calc(100vw - 40px);text-align:center;box-shadow:var(--shadow-lg);letter-spacing:.01em}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}

/* ── Onboarding ── */
#onboardingOverlay{position:fixed;inset:0;z-index:99999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 28px;transition:opacity .4s,visibility .4s}
#onboardingOverlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.ob-logo-wrap{width:100px;height:100px;border-radius:30px;background:linear-gradient(145deg,var(--rose) 0%,#8A2018 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 44px rgba(181,66,56,0.40),inset 0 1px 0 rgba(255,255,255,0.2);margin-bottom:30px;animation:obPulse 3.5s ease-in-out infinite;overflow:hidden}
.ob-logo-wrap img{width:100%;height:100%;object-fit:cover;border-radius:30px}
@keyframes obPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.ob-logo-ar{font-family:var(--font-serif);font-size:2.2rem;color:#fff;font-weight:400;letter-spacing:.06em}
.ob-title{font-family:var(--font-serif);font-size:2.15rem;font-weight:300;color:var(--text);text-align:center;margin-bottom:10px;letter-spacing:-.02em}
.ob-sub{font-size:.84rem;color:var(--text-dim);text-align:center;line-height:1.75;margin-bottom:36px;max-width:290px}
.ob-label{font-size:.7rem;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;font-weight:500;margin-bottom:8px;align-self:flex-start;width:100%;max-width:320px}
.ob-input{width:100%;max-width:320px;padding:15px 18px;border:1.5px solid var(--border2);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-family:var(--font-serif);font-size:1.2rem;font-weight:400;outline:none;margin-bottom:14px;text-align:center;transition:border-color .2s,box-shadow .2s;-webkit-user-select:text;user-select:text}
.ob-input:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(192,104,95,0.12)}
.ob-input::placeholder{color:var(--text-light)}
.ob-btn{width:100%;max-width:320px;padding:15px;background:linear-gradient(145deg,var(--rose),#8A2018);color:#fff;border:none;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.9rem;font-weight:600;cursor:pointer;letter-spacing:.03em;margin-bottom:12px;box-shadow:0 6px 22px rgba(181,66,56,0.40);transition:all .2s}
.ob-btn:active{transform:scale(.97)}
.ob-google{width:100%;max-width:320px;padding:14px;background:var(--surface);color:var(--text);border:1.5px solid var(--border2);border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.84rem;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s;box-shadow:var(--shadow-sm);margin-bottom:12px}
.ob-google:active{box-shadow:none;transform:scale(.97)}
.ob-divider{font-size:.72rem;color:var(--text-light);text-align:center;margin:4px 0;letter-spacing:.05em}

/* ── Splash ── */
#appSplash{position:fixed;inset:0;z-index:99998;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:40px 32px;transition:opacity .45s,visibility .45s}
#appSplash.hidden{opacity:0;visibility:hidden;pointer-events:none}
@media(prefers-color-scheme:dark){html:not([data-theme="light"]) #appSplash{background:#0C0A09}html:not([data-theme="light"]) #onboardingOverlay{background:#0C0A09}}
html[data-theme="dark"] #appSplash,html[data-theme="dark"] #onboardingOverlay{background:#0C0A09}
.splash-logo-wrap{width:88px;height:88px;border-radius:26px;background:linear-gradient(145deg,var(--rose) 0%,#8A2018 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 36px rgba(181,66,56,0.40),inset 0 1px 0 rgba(255,255,255,0.2);animation:splashFloat 3.5s ease-in-out infinite;margin-bottom:22px;overflow:hidden}
.splash-logo-wrap img{width:100%;height:100%;object-fit:cover;border-radius:26px}
@keyframes splashFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.splash-logo-ar{font-family:var(--font-serif);font-size:2rem;color:#fff;font-weight:400}
.splash-title{font-family:var(--font-serif);font-size:1.85rem;font-weight:300;color:var(--text);letter-spacing:.04em;margin-bottom:6px}
.splash-tagline{font-size:.68rem;color:var(--text-dim);letter-spacing:.16em;text-transform:uppercase;margin-bottom:44px}
.splash-steps{display:flex;flex-direction:column;gap:10px;width:100%;max-width:220px;margin-bottom:28px}
.splash-step{display:flex;align-items:center;gap:10px;font-size:.73rem;color:var(--text-light);transition:color .35s,opacity .35s;opacity:.4}
.splash-step.active{color:var(--text);opacity:1}
.splash-step.done{color:var(--green);opacity:.85}
.splash-step.error{color:var(--red);opacity:1}
.splash-step-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);flex-shrink:0;transition:all .35s}
.splash-step.active .splash-step-dot{background:var(--rose);box-shadow:0 0 10px rgba(192,104,95,0.5);animation:stepPulse 1.1s ease-in-out infinite}
.splash-step.done  .splash-step-dot{background:var(--green);animation:none}
.splash-step.error .splash-step-dot{background:var(--red);animation:none}
@keyframes stepPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.6}}

/* ── Overlays ── */
#reconnectOverlay{position:fixed;inset:0;z-index:9999;background:rgba(250,248,245,0.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
#reconnectOverlay.visible{opacity:1;visibility:visible}
@media(prefers-color-scheme:dark){html:not([data-theme="light"]) #reconnectOverlay{background:rgba(15,13,12,0.9)}}
html[data-theme="dark"] #reconnectOverlay{background:rgba(15,13,12,0.9)}
.reconnect-ring{width:48px;height:48px;border-radius:50%;border:2.5px solid var(--border2);border-top-color:var(--rose);animation:spin .9s linear infinite;box-shadow:0 0 20px rgba(192,104,95,0.2)}
.reconnect-title{font-family:var(--font-serif);font-size:1.1rem;color:var(--text);font-weight:300}
.reconnect-sub{font-size:.7rem;color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase}
@keyframes spin{to{transform:rotate(360deg)}}
#signInLoadingOverlay{position:fixed;inset:0;z-index:9998;background:rgba(250,248,245,0.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
#signInLoadingOverlay.visible{opacity:1;visibility:visible}
html[data-theme="dark"] #signInLoadingOverlay{background:rgba(15,13,12,0.8)}
.signin-loading-text{font-size:.74rem;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase}
#appLoadingBar{position:fixed;top:0;left:0;right:0;height:2px;z-index:9999;background:linear-gradient(90deg,transparent,var(--rose),var(--rose2),var(--rose),transparent);background-size:300% 100%;animation:loadBar 1.6s ease-in-out infinite;opacity:1;transition:opacity .6s}
#appLoadingBar.done{opacity:0;pointer-events:none}
@keyframes loadBar{0%{background-position:100% 0}100%{background-position:-100% 0}}
#offlineBanner{position:fixed;top:0;left:0;right:0;z-index:9998;background:rgba(26,18,16,0.96);border-bottom:1px solid rgba(192,104,95,0.2);padding:8px 16px;display:flex;align-items:center;gap:8px;font-size:.74rem;color:#C4B8B0;transform:translateY(-100%);transition:transform .3s}
#offlineBanner.visible{transform:translateY(0)}
.ob-dot{width:6px;height:6px;border-radius:50%;background:#888;flex-shrink:0}
.ob-msg{flex:1}
.ob-badge{font-size:.65rem;background:rgba(192,104,95,0.1);border:1px solid rgba(192,104,95,0.2);color:var(--rose);padding:2px 8px;border-radius:20px}
#syncDot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;transition:background .4s}
#syncDot.idle{background:var(--green);animation:pulse 2.5s infinite}
#syncDot.syncing{background:var(--rose);animation:pulse .8s infinite}
#syncDot.offline{background:#888;animation:none}
#syncDot.error{background:var(--red);animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.progress-card{transition:opacity .3s}

/* ── Result items ── */
.result-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
.result-item:last-child{border-bottom:none}
.result-badge{width:38px;height:38px;border-radius:10px;flex-shrink:0;background:var(--rose-dim);border:1px solid var(--rose-border);display:flex;align-items:center;justify-content:center;font-size:.68rem;color:var(--rose);font-weight:500;text-align:center;line-height:1.2}
.result-badge.done{background:var(--green-dim);border-color:rgba(79,125,96,0.25);color:var(--green)}

/* ═══════════════════════════════════════════════════════════
   AI SECTION — "Pak Noor AI" · Luxury Minimal v2
   All class names preserved for JS compatibility.
   ═══════════════════════════════════════════════════════════ */
#sec-ai{display:none;position:fixed;inset:0 0 calc(72px + env(safe-area-inset-bottom,0px)) 0;z-index:50;flex-direction:column;overflow:hidden;background:var(--bg)}
#sec-ai.active{display:flex!important;animation:fadeUp .26s cubic-bezier(.22,.61,.36,1) both}
#aiCard{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;position:relative}
#aiContainer{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
/* Subtle ambient gradient bloom behind messages for premium feel */
#aiContainer::before{content:"";position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:420px;height:420px;background:radial-gradient(closest-side,rgba(181,66,56,.08),transparent 70%);pointer-events:none;z-index:0;filter:blur(10px)}
html[data-theme="dark"] #aiContainer::before{background:radial-gradient(closest-side,rgba(212,130,110,.07),transparent 70%)}

/* ── Chat Header ── */
.aih{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:calc(13px + env(safe-area-inset-top,0px)) 12px 12px;flex-shrink:0;background:color-mix(in srgb,var(--surface) 82%,transparent);border-bottom:1px solid var(--border);backdrop-filter:saturate(140%) blur(22px);-webkit-backdrop-filter:saturate(140%) blur(22px)}
.aih-icon{position:relative;width:42px;height:42px;border-radius:14px;background:linear-gradient(150deg,var(--rose) 0%,#8E2A22 100%);display:flex;align-items:center;justify-content:center;color:#FBF9F6;flex-shrink:0;box-shadow:0 6px 18px rgba(181,66,56,.34),inset 0 1px 0 rgba(255,255,255,.18);overflow:hidden}
.aih-icon .brand-mark{width:24px;height:24px}
.aih-icon::after{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 55%);pointer-events:none}
.aih-info{flex:1;min-width:0;overflow:hidden}
.aih-name{font-size:.96rem;font-weight:700;color:var(--text);letter-spacing:-.02em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aih-name .spark{color:var(--rose);font-family:var(--font-serif);font-weight:500;opacity:.9;font-size:.82rem}
.aih-status{font-size:.64rem;color:var(--text-dim);display:flex;align-items:center;gap:6px;margin-top:3px;font-family:var(--font-mono);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aih-dot{position:relative;width:7px;height:7px;border-radius:50%;background:#5cbf88;flex-shrink:0;box-shadow:0 0 0 0 rgba(92,191,136,.55);animation:aihPulse 2.2s ease-out infinite}
@keyframes aihPulse{0%{box-shadow:0 0 0 0 rgba(92,191,136,.55)}70%{box-shadow:0 0 0 6px rgba(92,191,136,0)}100%{box-shadow:0 0 0 0 rgba(92,191,136,0)}}
.aih-right{display:flex;align-items:center;gap:2px;flex-shrink:0}

/* Points pill with inline micro progress bar */
.aih-pill{position:relative;font-size:.66rem;font-weight:600;padding:6px 11px 6px 28px;border-radius:999px;background:var(--rose-dim);color:var(--rose);border:1px solid var(--rose-border);letter-spacing:.01em;white-space:nowrap;transition:all .25s;margin-right:4px;font-family:var(--font-mono);overflow:hidden;display:inline-flex;align-items:center;gap:4px}
.aih-pill::before{content:"";position:absolute;left:9px;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--rose) 0%,#8A2018 100%);box-shadow:0 0 0 2px color-mix(in srgb,var(--surface) 90%,transparent)}
.aih-pill.limit{background:rgba(184,64,64,.08);color:var(--red);border-color:rgba(184,64,64,.22);animation:pillPulse 2s ease-in-out infinite}
.aih-pill.limit::before{background:radial-gradient(circle at 35% 35%,var(--red) 0%,#7a2a2a 100%)}
@keyframes pillPulse{0%,100%{opacity:1}50%{opacity:.55}}

.aih-btn{width:34px;height:34px;border-radius:11px;background:transparent;border:none;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s,color .18s,transform .12s;position:relative;flex-shrink:0}
.aih-btn .ic{width:18px;height:18px}
.aih-btn:hover{background:var(--surface2);color:var(--text)}
.aih-btn:active{background:var(--surface3);transform:scale(.9)}
.aih-btn.saved-insights{color:var(--green);background:var(--green-dim);border:1px solid color-mix(in srgb,var(--green) 24%,var(--border))}
.aih-btn.saved-insights:hover{color:var(--text);background:color-mix(in srgb,var(--green) 16%,var(--surface2));border-color:color-mix(in srgb,var(--green) 42%,var(--border))}
.aih-btn.danger:hover{background:var(--red-dim);color:var(--red)}
.aih-btn.live::after{content:"";position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 2px var(--surface)}

/* ── Messages Area ── */
.ai-msgs-wrap{flex:1;min-height:0;position:relative;overflow:hidden;z-index:1}
.ai-msgs{position:absolute;inset:0;overflow-y:auto;padding:18px 14px 14px;display:flex;flex-direction:column;gap:4px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.ai-msgs::-webkit-scrollbar{width:0}
/* Soft fade at top so messages appear to emerge from behind the header */
.ai-msgs::before{content:"";position:sticky;top:0;left:0;right:0;height:14px;margin:-18px -14px 4px;background:linear-gradient(180deg,var(--bg),transparent);z-index:2;pointer-events:none;flex-shrink:0}

/* ── Message Layout ── */
.msg{display:flex;flex-direction:column;animation:msgIn .32s cubic-bezier(.22,.61,.36,1) both}
@keyframes msgIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.msg.u{align-items:flex-end;margin:12px 0 2px}
.msg.b{align-items:flex-start;margin:2px 0 12px}
.msg-row{display:flex;align-items:flex-start;gap:10px;max-width:92%}
.msg.u .msg-row{flex-direction:row-reverse}
.msg-av{width:32px;height:32px;flex-shrink:0;margin-top:2px}
.msg-av-inner{position:relative;width:32px;height:32px;border-radius:11px;background:linear-gradient(150deg,var(--rose) 0%,#8E2A22 100%);display:flex;align-items:center;justify-content:center;color:#FBF9F6;box-shadow:0 3px 10px rgba(181,66,56,.26),inset 0 1px 0 rgba(255,255,255,.16);overflow:hidden}
.msg-av-inner .brand-mark{width:18px;height:18px}
.msg-av-inner::after{content:"";position:absolute;inset:0;border-radius:11px;background:linear-gradient(180deg,rgba(255,255,255,.15),transparent 55%);pointer-events:none}

/* ── User Bubble ── */
.msg.u .bubble{background:linear-gradient(150deg,var(--rose) 0%,#8E2A22 100%);color:#FBF9F6;border-radius:22px 22px 6px 22px;padding:12px 18px;font-size:.86rem;line-height:1.7;word-break:break-word;box-shadow:0 4px 18px rgba(181,66,56,.26),inset 0 1px 0 rgba(255,255,255,.1)}
.msg.u .bubble strong,.msg.u .bubble em{color:#fff}

/* ── Bot Bubble ── */
.bubble{padding:14px 18px;border-radius:6px 22px 22px 22px;font-size:.86rem;line-height:1.85;word-break:break-word;position:relative}
.msg.b .bubble{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.04),0 12px 28px -24px rgba(0,0,0,.25)}

/* Streaming caret — the "live ink" during token streaming */
.streaming-caret{display:inline-block;width:3px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--rose);border-radius:2px;animation:streamCaret 1s steps(1) infinite;box-shadow:0 0 6px rgba(181,66,56,.45)}
@keyframes streamCaret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ── Bubble Typography ── */
.bubble p{margin:0 0 12px}
.bubble p:last-child{margin-bottom:0}
.bubble h2{font-family:var(--font-serif);font-size:1.05rem;font-weight:600;margin:18px 0 8px;color:var(--rose);letter-spacing:-.01em}
.bubble h2:first-child{margin-top:0}
.msg.u .bubble h2{color:#fff}
.bubble h3{font-size:.9rem;font-weight:700;margin:14px 0 6px;color:var(--text);letter-spacing:-.01em}
.bubble h3:first-child{margin-top:0}
.msg.u .bubble h3{color:#fff}
.bubble h4{font-size:.84rem;font-weight:600;margin:10px 0 4px;color:var(--text-dim)}
.bubble h4:first-child{margin-top:0}
.bubble ul,.bubble ol{padding-left:20px;margin:10px 0 14px}
.bubble li{margin:6px 0;padding-left:4px;line-height:1.75}
.bubble li::marker{color:var(--rose)}
.msg.u .bubble li::marker{color:rgba(255,255,255,.55)}
.bubble strong{font-weight:700;color:var(--text)}
.msg.u .bubble strong{color:#fff}
.bubble em{font-style:italic;color:var(--text-dim)}
.msg.u .bubble em{color:rgba(255,255,255,.85)}
.bubble code{background:var(--surface2);padding:2px 8px;border-radius:6px;font-family:var(--font-mono);font-size:.76rem;border:1px solid var(--border)}
.msg.u .bubble code{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.12)}
.bubble pre{background:var(--surface2);border-radius:14px;padding:14px 16px;margin:12px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border)}
.bubble pre code{background:none;padding:0;font-size:.76rem;line-height:1.7;border:none}
.bubble blockquote{margin:12px 0;padding:12px 18px;border-left:3px solid var(--rose);background:var(--rose-dim);border-radius:0 14px 14px 0;font-size:.84rem;color:var(--text-dim);line-height:1.75;font-style:italic}
.msg.u .bubble blockquote{border-left-color:rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:rgba(255,255,255,.85)}
.bubble hr{border:none;border-top:1px solid var(--border);margin:16px 0}
.msg.u .bubble hr{border-top-color:rgba(255,255,255,.18)}
.bubble a{color:var(--rose);text-decoration:none;border-bottom:1px dashed var(--rose-border)}
.msg.u .bubble a{color:#fff;border-bottom-color:rgba(255,255,255,.5)}

/* ── AI bubble: subtle warm accent so replies don't feel like a grey wall ── */
.msg.b .bubble::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--rose),transparent 70%);
  border-radius:6px 0 0 22px;opacity:.55;pointer-events:none;
}
.msg.b .bubble{background:linear-gradient(175deg,color-mix(in srgb,var(--rose) 4%,var(--surface)),var(--surface) 55%)}

/* ── Callout cards rendered from :::tip / :::wisdom / :::recipe / :::warn / :::note ── */
.bubble .cl{position:relative;margin:14px 0;border-radius:16px;padding:12px 14px 12px 14px;border:1px solid var(--border);background:var(--surface2);overflow:hidden;font-size:.84rem;line-height:1.7}
.bubble .cl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rose)}
.bubble .cl-hd{display:flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;color:var(--rose)}
.bubble .cl-hd .ic{width:14px;height:14px;flex-shrink:0}
.bubble .cl-bd > *:first-child{margin-top:0}
.bubble .cl-bd > *:last-child{margin-bottom:0}
.bubble .cl-bd p{margin:0 0 8px;font-size:.84rem}
.bubble .cl-bd ul,.bubble .cl-bd ol{margin:6px 0;padding-left:18px}
.bubble .cl-bd li{margin:3px 0;font-size:.84rem;line-height:1.65}
/* Tip — gold accent */
.bubble .cl-tip{background:linear-gradient(175deg,rgba(196,149,74,.09),var(--surface2));border-color:rgba(196,149,74,.22)}
.bubble .cl-tip::before{background:#C4954A}
.bubble .cl-tip .cl-hd{color:#C4954A}
/* Wisdom — rose, soft glow, italic body */
.bubble .cl-wisdom{background:linear-gradient(175deg,var(--rose-dim),var(--surface2));border-color:var(--rose-border)}
.bubble .cl-wisdom::before{background:var(--rose)}
.bubble .cl-wisdom .cl-hd{color:var(--rose)}
.bubble .cl-wisdom .cl-bd{font-family:var(--font-serif);font-size:.9rem;line-height:1.75;color:var(--text)}
.bubble .cl-wisdom .cl-bd p{font-size:.9rem}
/* Recipe — sage green accent */
.bubble .cl-recipe{background:linear-gradient(175deg,rgba(107,138,122,.09),var(--surface2));border-color:rgba(107,138,122,.25)}
.bubble .cl-recipe::before{background:#6B8A7A}
.bubble .cl-recipe .cl-hd{color:#6B8A7A}
/* Warn — red accent */
.bubble .cl-warn{background:linear-gradient(175deg,var(--red-dim),var(--surface2));border-color:rgba(184,64,64,.25)}
.bubble .cl-warn::before{background:var(--red)}
.bubble .cl-warn .cl-hd{color:var(--red)}
/* Note — neutral muted */
.bubble .cl-note{background:var(--surface2);border-color:var(--border)}
.bubble .cl-note::before{background:var(--text-dim)}
.bubble .cl-note .cl-hd{color:var(--text-dim)}
/* Dark mode tweaks — the card backgrounds need slightly higher contrast */
html[data-theme="dark"] .bubble .cl-tip{background:linear-gradient(175deg,rgba(196,149,74,.14),var(--surface2))}
html[data-theme="dark"] .bubble .cl-recipe{background:linear-gradient(175deg,rgba(107,138,122,.14),var(--surface2))}
html[data-theme="dark"] .bubble .cl-wisdom{background:linear-gradient(175deg,rgba(181,66,56,.15),var(--surface2))}
html[data-theme="dark"] .bubble .cl-warn{background:linear-gradient(175deg,rgba(184,64,64,.15),var(--surface2))}
/* User bubble version — no gradient, keep it solid rose */
.msg.u .bubble .cl{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff}
.msg.u .bubble .cl::before{background:rgba(255,255,255,.4)}
.msg.u .bubble .cl-hd{color:#fff}

/* ── Think label ── */
.think-label{font-size:.62rem;font-weight:700;color:#9874c3;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;background:rgba(152,116,195,.08);border-radius:8px;border:1px solid rgba(152,116,195,.18);width:fit-content}
.think-label .ic{width:12px;height:12px}

/* ── Typing Dots (shimmer) ── */
.tdots{display:inline-flex;gap:6px;align-items:center;padding:6px 2px}
.tdots span{width:7px;height:7px;border-radius:50%;background:var(--rose);opacity:.35;animation:tdotBreathe 1.25s ease-in-out infinite}
.tdots span:nth-child(2){animation-delay:.18s}
.tdots span:nth-child(3){animation-delay:.36s}
@keyframes tdotBreathe{0%,80%,100%{transform:translateY(0) scale(.85);opacity:.35}40%{transform:translateY(-5px) scale(1);opacity:1}}

/* ── Thinking Wave (deep-think mode) ── */
.thinking-wave{display:inline-flex;gap:3px;align-items:center;padding:6px 2px;height:18px}
.thinking-wave span{width:3px;height:4px;border-radius:2px;background:#9874c3;animation:twave 1.1s ease-in-out infinite}
.thinking-wave span:nth-child(2){animation-delay:.12s}
.thinking-wave span:nth-child(3){animation-delay:.24s}
.thinking-wave span:nth-child(4){animation-delay:.36s}
.thinking-wave span:nth-child(5){animation-delay:.48s}
@keyframes twave{0%,70%,100%{height:4px;opacity:.45}35%{height:16px;opacity:1}}

/* Rotating "thinking state" text companion */
.thinking-state{display:inline-block;font-size:.68rem;color:var(--text-dim);font-family:var(--font-mono);letter-spacing:.04em;margin-left:8px;vertical-align:middle;opacity:.85;animation:stateFade .4s ease both}
@keyframes stateFade{from{opacity:0;transform:translateY(2px)}to{opacity:.85;transform:none}}

/* ── Message Meta ── */
.msg-meta{display:flex;align-items:center;gap:6px;margin-top:7px;padding:0 42px;flex-wrap:wrap}
.msg.u .msg-meta{justify-content:flex-end;padding:0 4px}
.msg-time{font-size:.6rem;color:var(--text-light);letter-spacing:.04em;font-family:var(--font-mono)}
.msg-meta-btn{font-size:.6rem;color:var(--text-dim);cursor:pointer;padding:4px 9px;border-radius:10px;transition:all .18s;border:1px solid transparent;background:transparent;display:inline-flex;align-items:center;gap:5px;font-family:inherit;line-height:1}
.msg-meta-btn .ic{width:12px;height:12px}
.msg-meta-btn:hover{background:var(--surface2);border-color:var(--border);color:var(--text)}
.msg-meta-btn:active{transform:scale(.94)}
.msg-meta-btn.active,.msg-meta-btn.saved{color:var(--rose);background:var(--rose-dim);border-color:var(--rose-border)}
.msg-save{font-size:.6rem;color:var(--text-dim);cursor:pointer;padding:4px 9px;border-radius:10px;transition:all .18s;border:1px solid transparent;display:inline-flex;align-items:center;gap:5px}
.msg-save .ic{width:12px;height:12px}
.msg-save:hover{background:var(--surface2);border-color:var(--border);color:var(--text)}
.msg-save:active{transform:scale(.94)}
.msg-save.saved{color:var(--rose);font-weight:600;background:var(--rose-dim);border-color:var(--rose-border)}
.msg-reactions{display:flex;gap:4px}
.msg-react-btn{font-size:.6rem;padding:4px 8px;border-radius:10px;border:1px solid transparent;background:transparent;cursor:pointer;transition:all .18s;color:var(--text-dim);display:inline-flex;align-items:center;gap:4px}
.msg-react-btn .ic{width:12px;height:12px}
.msg-react-btn:hover{background:var(--surface2);border-color:var(--border);color:var(--text)}
.msg-react-btn:active{transform:scale(.9)}
.msg-react-btn.active{background:var(--rose-dim);border-color:var(--rose-border);color:var(--rose)}

/* ── Follow-up Suggestion Chips (after bot reply) ── */
.ai-followups{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding:0 42px;animation:msgIn .32s cubic-bezier(.22,.61,.36,1) .15s both}
.ai-followup{flex-shrink:0;padding:7px 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);font-size:.7rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .18s;font-family:var(--font-sans);display:inline-flex;align-items:center;gap:5px}
.ai-followup .ic{width:12px;height:12px;color:var(--rose)}
.ai-followup:hover{border-color:var(--rose-border);background:var(--rose-dim);color:var(--rose)}
.ai-followup:active{transform:scale(.95)}

/* ── Quick Prompts (initial chip bar) ── */
.ai-chips{flex-shrink:0;display:flex;gap:8px;padding:10px 14px;overflow-x:auto;border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface) 60%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:all .3s cubic-bezier(.22,.61,.36,1)}
.ai-chips::-webkit-scrollbar{display:none}
.ai-chips.gone{height:0!important;padding:0!important;border:none!important;opacity:0;pointer-events:none;overflow:hidden}
.chip{flex-shrink:0;padding:9px 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.74rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .2s;font-family:var(--font-sans);display:inline-flex;align-items:center;gap:6px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.chip .ic{width:13px;height:13px;color:var(--rose);flex-shrink:0}
.chip:hover{border-color:var(--rose-border);color:var(--rose);background:var(--rose-dim)}
.chip:active{background:var(--rose);color:#fff;border-color:var(--rose);transform:scale(.94);box-shadow:0 3px 10px rgba(181,66,56,.24)}
.chip:active .ic{color:#fff}

/* ── Input Bar ── */
.ai-bar{position:relative;flex-shrink:0;display:flex;align-items:flex-end;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(140%) blur(22px);-webkit-backdrop-filter:saturate(140%) blur(22px)}
.ai-bar::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px;background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none}
.ai-bar-left{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
.ai-think-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface2);color:var(--text-dim);font-family:var(--font-mono);font-size:.64rem;font-weight:600;cursor:pointer;transition:all .22s;white-space:nowrap;height:38px;letter-spacing:.04em}
.ai-think-btn .ic{width:13px;height:13px}
.ai-think-btn:hover{color:var(--text);border-color:var(--border2)}
.ai-think-btn.on{border-color:rgba(152,116,195,.55);background:rgba(152,116,195,.12);color:#9874c3;box-shadow:0 2px 10px rgba(152,116,195,.2),inset 0 0 0 1px rgba(152,116,195,.15)}
.ai-think-btn.on .think-cost-badge{background:rgba(152,116,195,.22);color:#9874c3}
.think-cost-badge{font-size:.58rem;padding:2px 6px;border-radius:8px;background:var(--rose-dim);color:var(--rose);font-weight:700;margin-left:2px}

.ai-input-wrap{flex:1;position:relative;display:flex;flex-direction:column}
.ai-ta{width:100%;border-radius:22px;padding:11px 38px 11px 18px;background:var(--bg);border:1.5px solid var(--border);color:var(--text);font-family:var(--font-sans);font-size:.88rem;font-weight:400;outline:none;resize:none;min-height:44px;max-height:120px;overflow-y:auto;line-height:1.55;transition:border-color .2s,box-shadow .2s,background .2s;-webkit-user-select:text;user-select:text;box-sizing:border-box}
.ai-ta:focus{border-color:var(--rose);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--rose) 10%,transparent)}
.ai-ta:disabled{opacity:.3;cursor:not-allowed}
.ai-ta::placeholder{color:var(--text-light);font-weight:400}
.ai-char-count{position:absolute;bottom:10px;right:14px;font-size:.58rem;color:var(--text-light);pointer-events:none;transition:color .2s;font-family:var(--font-mono);letter-spacing:.04em}
.ai-char-count.warn{color:var(--red)}

.ai-send{position:relative;width:44px;height:44px;min-width:44px;border-radius:15px;background:linear-gradient(150deg,var(--rose) 0%,#8E2A22 100%);border:none;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;box-shadow:0 5px 18px rgba(181,66,56,.38),inset 0 1px 0 rgba(255,255,255,.18);transition:all .18s cubic-bezier(.22,.61,.36,1);align-self:flex-end;overflow:hidden}
.ai-send .ic{width:18px;height:18px;position:relative;z-index:1}
.ai-send::before{content:"";position:absolute;inset:0;background:linear-gradient(150deg,transparent,rgba(255,255,255,.22));opacity:0;transition:opacity .2s}
.ai-send:hover:not(:disabled)::before{opacity:1}
.ai-send:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 7px 22px rgba(181,66,56,.44),inset 0 1px 0 rgba(255,255,255,.22)}
.ai-send:active:not(:disabled){transform:scale(.9)}
.ai-send:disabled{opacity:.25;cursor:not-allowed;box-shadow:none;background:var(--surface3)}
.ai-send.streaming{background:linear-gradient(150deg,#9874c3 0%,#6c4f96 100%);box-shadow:0 5px 18px rgba(152,116,195,.38);animation:sendPulse 1.4s ease-in-out infinite}
@keyframes sendPulse{0%,100%{box-shadow:0 5px 18px rgba(152,116,195,.38)}50%{box-shadow:0 5px 24px rgba(152,116,195,.6)}}

.ai-voice-btn{width:40px;height:40px;border-radius:12px;background:var(--surface2);border:1px solid var(--border);color:var(--text-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .18s;align-self:flex-end}
.ai-voice-btn .ic{width:17px;height:17px}
.ai-voice-btn:hover{color:var(--text);border-color:var(--border2)}
.ai-voice-btn.listening{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.45);color:#ef4444;animation:voice-pulse .9s ease-in-out infinite}
@keyframes voice-pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.3)}50%{box-shadow:0 0 0 7px rgba(239,68,68,0)}}
.ai-voice-btn:active{transform:scale(.9)}

/* ── Limit Banner ── */
.ai-limit{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 14px;font-size:.68rem;color:var(--red);background:var(--red-dim);border-top:1px solid rgba(184,64,64,.16);font-family:var(--font-mono);letter-spacing:.02em}
.ai-limit .ic{width:13px;height:13px}

/* ── Loading (splash on section open) ── */
.ai-load{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px;position:relative;z-index:1}
.ai-load-mark{width:56px;height:56px;border-radius:18px;background:linear-gradient(150deg,var(--rose) 0%,#8E2A22 100%);display:flex;align-items:center;justify-content:center;color:#FBF9F6;box-shadow:0 8px 24px rgba(181,66,56,.32),inset 0 1px 0 rgba(255,255,255,.18);animation:markBreathe 2.4s ease-in-out infinite}
.ai-load-mark .brand-mark{width:32px;height:32px}
@keyframes markBreathe{0%,100%{transform:scale(1);box-shadow:0 8px 24px rgba(181,66,56,.32),inset 0 1px 0 rgba(255,255,255,.18)}50%{transform:scale(1.04);box-shadow:0 12px 32px rgba(181,66,56,.46),inset 0 1px 0 rgba(255,255,255,.18)}}
.ai-load-ring{width:34px;height:34px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--rose);animation:spin .9s linear infinite}
.ai-load-txt{font-size:.65rem;color:var(--text-dim);letter-spacing:.18em;text-transform:uppercase;font-family:var(--font-mono)}

/* ── Gate (sign-in, offline, error) ── */
.ai-gate{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 24px;gap:10px;position:relative;z-index:1}
.gate-logo{margin-bottom:6px}
.gate-logo-ring{position:relative;width:92px;height:92px;border-radius:28px;background:linear-gradient(150deg,var(--rose) 0%,#8A2018 100%);display:flex;align-items:center;justify-content:center;color:#FBF9F6;font-weight:700;box-shadow:0 14px 36px rgba(181,66,56,.36),inset 0 1px 0 rgba(255,255,255,.2);margin:0 auto;overflow:hidden}
.gate-logo-ring .brand-mark{width:46px;height:46px}
.gate-logo-ring::after{content:"";position:absolute;inset:0;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 55%);pointer-events:none}
.gate-ico{width:56px;height:56px;border-radius:18px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--rose);margin:0 auto 4px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.gate-ico .ic{width:26px;height:26px}
.gate-title{font-family:var(--font-serif);font-size:1.7rem;font-weight:600;color:var(--text);letter-spacing:-.02em;margin-top:4px}
.gate-tagline{font-size:.78rem;color:var(--text-dim);margin-top:-4px;letter-spacing:.01em}
.gate-desc{font-size:.84rem;color:var(--text-dim);line-height:1.65;max-width:300px}
.gate-feats{display:flex;flex-direction:column;gap:8px;margin:16px 0 8px;text-align:left;width:100%;max-width:300px}
.gate-feat{display:flex;align-items:center;gap:12px;font-size:.8rem;color:var(--text);line-height:1.55;background:var(--surface);border:1px solid var(--border);padding:11px 14px;border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.03);transition:transform .2s,border-color .2s}
.gate-feat:hover{transform:translateX(2px);border-color:var(--rose-border)}
.gate-feat-ico{flex-shrink:0;width:32px;height:32px;border-radius:10px;background:var(--rose-dim);color:var(--rose);display:flex;align-items:center;justify-content:center}
.gate-feat-ico .ic,svg.gate-feat-ico{width:16px;height:16px}
svg.gate-feat-ico{background:var(--rose-dim);padding:8px;border-radius:10px;box-sizing:content-box;color:var(--rose)}
.gate-brand{font-size:.64rem;color:var(--text-light);letter-spacing:.14em;margin-top:10px;font-family:var(--font-mono);text-transform:uppercase}
.gate-btn{margin-top:12px;padding:14px 32px;border-radius:999px;background:linear-gradient(150deg,var(--rose) 0%,#8A2018 100%);border:none;color:#fff;font-size:.88rem;font-weight:600;cursor:pointer;box-shadow:0 8px 24px rgba(181,66,56,.38),inset 0 1px 0 rgba(255,255,255,.18);transition:all .2s cubic-bezier(.22,.61,.36,1);display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-sans);letter-spacing:.01em}
.gate-btn:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(181,66,56,.44)}
.gate-btn:active{transform:scale(.96)}
.gate-btn.sec{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:none}
.gate-btn.sec:hover{background:var(--surface2);border-color:var(--border2);box-shadow:0 2px 8px rgba(0,0,0,.04)}
.gate-btn .ic{width:16px;height:16px}

/* ── Scroll-to-bottom floating button ── */
.ai-scroll-btn{position:absolute;bottom:12px;right:14px;width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--border);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.12);transition:opacity .22s,transform .2s;z-index:5;opacity:0;pointer-events:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ai-scroll-btn .ic{width:16px;height:16px}
.ai-scroll-btn.show{opacity:1;pointer-events:auto}
.ai-scroll-btn:hover{transform:translateY(-2px)}
.ai-scroll-btn:active{transform:scale(.9)}

/* ── History divider (loads chat history divider line) ── */
.ai-history-note{text-align:center;font-size:.58rem;color:var(--text-light);padding:10px 10px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-mono);position:relative;margin:8px 0}
.ai-history-note::before,.ai-history-note::after{content:"";position:absolute;top:50%;width:30%;height:1px;background:var(--border)}
.ai-history-note::before{left:6%}
.ai-history-note::after{right:6%}

/* ── Copied-to-clipboard toast micro-animation ── */
@keyframes copiedFlash{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
.msg-meta-btn.flash{animation:copiedFlash .32s ease;color:var(--rose);background:var(--rose-dim);border-color:var(--rose-border)}

/* Saved Panel */
#aiSavedPanel{position:fixed;inset:0 0 calc(72px + env(safe-area-inset-bottom,0px)) 0;z-index:201;display:flex;flex-direction:column;overflow:hidden;background:rgba(250,248,245,0.98);backdrop-filter:blur(24px);animation:fadeUp .2s ease}
html[data-theme="dark"] #aiSavedPanel{background:rgba(15,13,12,0.98)}
@media(prefers-color-scheme:dark){html:not([data-theme="light"]) #aiSavedPanel{background:rgba(15,13,12,0.98)}}

/* Tutorial */
#aiTutorialOverlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:all .3s}
#aiTutorialOverlay.show{opacity:1;visibility:visible}
.ai-tut{background:var(--surface);border-radius:var(--radius-lg);padding:28px 24px 24px;max-width:360px;width:100%;text-align:center;animation:slideUp .35s cubic-bezier(.4,0,.2,1)}
.ai-tut-icon{font-size:2.6rem;margin-bottom:14px}
.ai-tut-title{font-family:var(--font-serif);font-size:1.3rem;color:var(--text);margin-bottom:8px}
.ai-tut-desc{font-size:.8rem;color:var(--text-dim);line-height:1.7;margin-bottom:6px}
.ai-tut-features{text-align:left;margin:14px 0;display:flex;flex-direction:column;gap:10px}
.ai-tut-feat{display:flex;gap:10px;align-items:flex-start;font-size:.78rem;color:var(--text);line-height:1.5}
.ai-tut-feat span{font-size:1.05rem;flex-shrink:0;margin-top:1px}

/* Panel Components */
.saved-panel-hdr{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:13px 16px 11px;background:var(--surface);border-bottom:1px solid var(--border)}
.saved-panel-title{flex:1;font-family:var(--font-serif);font-size:.95rem;font-weight:500;color:var(--text)}
.saved-panel-close{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--surface2);color:var(--text-dim);font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.saved-panel-body{flex:1;overflow-y:auto;padding:12px 14px 16px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.saved-item{background:var(--surface);border:1px solid var(--border);border-left:2px solid rgba(181,66,56,.35);border-radius:2px 12px 12px 12px;padding:12px 14px}
.saved-item-text{font-size:.79rem;color:var(--text);line-height:1.72;margin-bottom:8px;word-break:break-word;user-select:text;-webkit-user-select:text}
.saved-item-meta{display:flex;align-items:center;justify-content:space-between}
.saved-item-time{font-size:.54rem;color:var(--text-light)}
.saved-item-del{font-size:.57rem;color:var(--red);cursor:pointer;padding:2px 8px;border-radius:6px;border:1px solid transparent;transition:all .14s}
.saved-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;font-size:.8rem;color:var(--text-dim);line-height:2;gap:4px}
.unblock-step{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.unblock-num{width:22px;height:22px;border-radius:50%;background:var(--rose-dim);border:1px solid var(--rose-border);color:var(--rose);font-size:.68rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700}
.io-preview{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px;margin-top:12px;font-size:.74rem;color:var(--text-dim);line-height:1.8}
.settings-section-label{font-size:.65rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin:20px 4px 8px;display:block}
.skin-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.skin-type-btn{padding:11px 10px;border-radius:12px;border:1.5px solid var(--border2);background:var(--surface2);color:var(--text-dim);font-family:var(--font-sans);font-size:.8rem;cursor:pointer;transition:all .2s;text-align:center}
.skin-type-btn.active{border-color:var(--rose);background:var(--rose-dim);color:var(--rose);font-weight:500}
.skin-type-btn:active{transform:scale(.96)}
.io-preview strong{color:var(--text);display:block;margin-bottom:4px;font-size:.79rem}

/* ── About ── */
.about-hero{text-align:center;padding:24px 16px 20px;border-bottom:1px solid var(--border);margin-bottom:0}
.about-logo{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--rose),#E89090);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 4px 16px rgba(192,104,95,0.25)}
.about-logo-ar{font-family:var(--font-serif);font-size:1.7rem;color:#fff;font-weight:400}
.about-app-name{font-family:var(--font-serif);font-size:1.4rem;color:var(--text);font-weight:300;margin-bottom:4px}
.about-version{font-size:.68rem;color:var(--text-dim);background:var(--surface2);border:1px solid var(--border);padding:3px 12px;border-radius:20px;display:inline-block}

/* ── Noor Widgets ── */
.noor-widgets{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.nw-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nw-card{background:var(--surface);border-radius:var(--radius);padding:16px 15px;box-shadow:var(--shadow-sm);border:1px solid var(--border);position:relative;overflow:hidden;transition:transform .15s}
.nw-card:active{transform:scale(.97)}
.nw-card::after{content:'';position:absolute;top:-24px;right:-24px;width:70px;height:70px;border-radius:50%;pointer-events:none;opacity:.05;background:var(--rose)}
.nw-card-icon{font-size:1.3rem;margin-bottom:7px;color:var(--rose)}
.nw-card-icon svg{width:24px;height:24px;display:block}
.nw-card-label{font-size:.6rem;color:var(--text-light);letter-spacing:.11em;text-transform:uppercase;font-weight:600;margin-bottom:4px}
.nw-card-value{font-family:var(--font-serif);font-size:1.25rem;color:var(--text);font-weight:400;line-height:1.2}
.nw-card-sub{font-size:.69rem;color:var(--text-dim);margin-top:4px;line-height:1.4}
.nw-wisdom{background:linear-gradient(135deg,rgba(181,66,56,0.06),rgba(196,149,74,0.07));border:1px solid var(--rose-border);border-radius:var(--radius);padding:18px 20px;position:relative;overflow:hidden;cursor:pointer}
.nw-wisdom-text{font-family:var(--font-serif);font-size:.9rem;color:var(--text);line-height:1.72;font-style:italic;position:relative;z-index:1}
.nw-wisdom-src{font-size:.62rem;color:var(--rose);margin-top:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;position:relative;z-index:1}
.nw-streak{background:linear-gradient(145deg,var(--rose) 0%,#8A2018 60%,#B84030 100%);border-radius:var(--radius);padding:16px 18px;color:#fff;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-rose)}
.nw-streak-num{font-family:var(--font-serif);font-size:2.2rem;font-weight:400;line-height:1;min-width:44px;text-align:center}
.nw-streak-info{flex:1}
.nw-streak-label{font-size:.63rem;letter-spacing:.11em;text-transform:uppercase;opacity:.82;font-weight:600}
.nw-streak-desc{font-size:.79rem;opacity:.92;margin-top:3px;line-height:1.45}

/* ── Custom Routine Steps ── */
.cst-tag{display:inline-flex;align-items:center;gap:3px;font-size:.55rem;color:var(--rose);background:var(--rose-dim);border:1px solid var(--rose-border);border-radius:6px;padding:1px 6px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-left:6px;vertical-align:middle}
.cst-tag.ai{color:#a080cc;background:rgba(160,128,204,.09);border-color:rgba(160,128,204,.22)}
.cst-manage-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.cst-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:12px}
.cst-item-info{flex:1;min-width:0}
.cst-item-label{font-size:.82rem;color:var(--text);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cst-item-meta{font-size:.65rem;color:var(--text-dim);margin-top:2px;display:flex;align-items:center;gap:6px}
.cst-item-actions{display:flex;gap:4px;flex-shrink:0}
.cst-item-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:.72rem;cursor:pointer;transition:all .15s;color:var(--text-dim)}
.cst-item-btn:active{transform:scale(.9)}
.cst-item-btn.del{border-color:rgba(184,64,64,.2);color:var(--red)}
.cst-form{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:10px}
.cst-form-row{margin-bottom:10px}
.cst-form-label{font-size:.68rem;color:var(--text-dim);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.cst-form-input{width:100%;padding:9px 12px;border:1px solid var(--border2);border-radius:10px;background:var(--surface);color:var(--text);font-family:var(--font-sans);font-size:.82rem;outline:none;transition:border-color .2s;-webkit-user-select:text;user-select:text}
.cst-form-input:focus{border-color:var(--rose)}
.cst-form-select{width:100%;padding:9px 12px;border:1px solid var(--border2);border-radius:10px;background:var(--surface);color:var(--text);font-family:var(--font-sans);font-size:.82rem;outline:none;-webkit-appearance:none;appearance:none}
.cst-empty{text-align:center;padding:16px;font-size:.78rem;color:var(--text-dim);line-height:1.6}
.ai-suggest{margin:10px 0;padding:14px 16px;background:rgba(160,128,204,.06);border:1px solid rgba(160,128,204,.18);border-left:3px solid #a080cc;border-radius:4px 16px 16px 16px;box-shadow:0 2px 10px rgba(160,128,204,.08)}
.ai-suggest-title{font-size:.7rem;color:#a080cc;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.ai-suggest-label{font-size:.88rem;color:var(--text);font-weight:600;margin-bottom:4px}
.ai-suggest-desc{font-size:.76rem;color:var(--text-dim);margin-bottom:12px;line-height:1.6}
.ai-suggest-btns{display:flex;gap:10px}
.ai-suggest-btns button{padding:9px 20px;border-radius:12px;font-size:.78rem;font-weight:600;cursor:pointer;font-family:var(--font-sans);transition:all .18s;border:none}
.ai-suggest-btns button:active{transform:scale(.95)}
.ai-suggest-btns .accept{background:linear-gradient(145deg,var(--rose),#9A2820);color:#fff;box-shadow:0 3px 12px rgba(192,104,95,.3)}
.ai-suggest-btns .dismiss{background:var(--surface);color:var(--text-dim);border:1px solid var(--border2)}
/* Security - Removed user-select blocking as it provides no real security */
/* Note: text selection is now allowed for better accessibility */
/* Native App Overlays */
.native-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--surface);z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center;opacity:0;pointer-events:none;transition:all .4s cubic-bezier(0.16,1,0.3,1);transform:translateY(20px)}
.native-overlay.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.native-overlay-icon{font-size:3.5rem;margin-bottom:24px;animation:floatUp 3s ease-in-out infinite}
.native-overlay-title{font-family:var(--font-serif);font-size:1.8rem;font-weight:500;color:var(--text);margin-bottom:12px}
.native-overlay-desc{font-size:.95rem;color:var(--text-dim);line-height:1.6;max-width:320px}
@keyframes floatUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.native-sheet-bg{position:fixed;inset:0;background:rgba(15,13,12,0.4);z-index:9999;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.native-sheet-bg.show{opacity:1;pointer-events:auto}
.native-sheet{position:fixed;bottom:0;left:0;right:0;z-index:10000;background:var(--surface);border-radius:24px 24px 0 0;padding:32px 24px 40px;transform:translateY(100%);transition:transform .4s cubic-bezier(0.16,1,0.3,1);text-align:center;box-shadow:0 -10px 40px rgba(0,0,0,0.1)}
.native-sheet.show{transform:translateY(0)}
.sheet-handle{width:40px;height:5px;border-radius:10px;background:var(--border);margin:0 auto 24px}

/* ── Responsive — small screens ── */
@media(max-width:359px){
  .wrap{padding:0 10px}
  .header{padding:18px 10px 12px;gap:10px}
  .header-name{font-size:1.15rem}
  .card-header{padding:11px 12px 9px}
  .check-item{padding:12px 12px;gap:10px}
  .check-label{font-size:.82rem}
  .tip-card{padding:12px 12px}
  .tip-title{font-size:.82rem}
  .cal-grid{grid-template-columns:repeat(5,1fr);gap:5px;padding:8px}
  .water-glasses{gap:6px}
  .nw-row{gap:8px}
  .nw-card{padding:12px 12px}
  .nav-item{font-size:.5rem;padding:6px 1px 5px}
  .bubble{max-width:90%;font-size:.76rem}
  .ob-title{font-size:1.6rem}
  .ob-sub{font-size:.78rem}
  .wl-title{font-size:1.5rem}
}
@media(min-width:360px) and (max-width:389px){
  .wrap{padding:0 12px}
  .cal-grid{gap:5px;padding:10px}
  .nav-item{font-size:.52rem}
}
/* ── AI chat: tighten input bar on phones so the textarea has real room ── */
@media(max-width:430px){
  .ai-bar{gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))}
  /* Collapse Think button to icon+badge only; text "Think" hidden on phones */
  .ai-think-btn{padding:8px 10px;gap:4px;min-width:38px;justify-content:center;font-size:0}
  .ai-think-btn .ic{width:15px;height:15px}
  .ai-think-btn .think-cost-badge{font-size:.62rem}
  .ai-voice-btn{width:38px;height:38px}
  .ai-send{width:42px;height:42px;min-width:42px;border-radius:13px}
  .ai-send .ic{width:17px;height:17px}
  .ai-ta{padding:10px 14px;font-size:.92rem;min-height:42px}
  .ai-followups{padding:0 14px}
  /* Msg-meta wraps neatly on narrow screens */
  .msg-meta{flex-wrap:wrap;gap:6px}
}
/* Very small phones (≤359px) — shrink Think button further and bubble max */
@media(max-width:359px){
  .ai-bar{padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));gap:5px}
  .ai-send{width:40px;height:40px;min-width:40px}
  .ai-think-btn{padding:8px 8px}
  .msg-row{max-width:96%}
  .ai-followup{font-size:.66rem;padding:6px 11px}
}

/* Conditional Landing (S13) */
#webLandingOverlay{position:fixed;inset:0;z-index:11000;background:var(--surface);flex-direction:column;align-items:center;justify-content:center;padding:24px;overflow:hidden}
.wl-bg{position:absolute;inset:0;background:radial-gradient(circle at 78% 12%,rgba(217,129,121,.18),transparent 36%),radial-gradient(circle at 14% 82%,rgba(206,163,132,.14),transparent 42%),linear-gradient(145deg,var(--surface),var(--bg));z-index:-1}
.wl-bg::after{content:"";position:absolute;inset:0;opacity:.34;background-image:radial-gradient(circle at center,rgba(255,255,255,.35) 0 1px,transparent 1.5px);background-size:28px 28px;mask-image:linear-gradient(to bottom,black,transparent 78%)}
.wl-content{width:min(100%,460px);text-align:center;animation:fadeInUp .8s cubic-bezier(0.16,1,0.3,1)}
.wl-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;color:var(--rose);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.wl-eyebrow span{width:22px;height:1px;background:currentColor}
.wl-logo-wrap{width:92px;height:92px;margin:0 auto 24px;background:linear-gradient(145deg,var(--rose),#8A2018);border:1px solid rgba(255,255,255,.18);border-radius:30px;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 50px rgba(181,66,56,.25),inset 0 1px 0 rgba(255,255,255,.2);animation:floatUp 5s ease-in-out infinite}
.wl-logo-ar{font-family:var(--font-serif);font-size:3.25rem;color:#fff;margin-top:-5px}
.wl-title{font-family:var(--font-serif);font-size:clamp(2rem,7vw,2.75rem);line-height:1.04;color:var(--text);margin-bottom:16px;letter-spacing:-.035em;text-wrap:balance}
.wl-sub{font-size:.94rem;color:var(--text-dim);line-height:1.7;margin:0 auto 20px;max-width:420px;padding:0 8px;text-wrap:pretty}
.wl-features{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:26px}
.wl-features span{padding:7px 11px;border:1px solid var(--border2);border-radius:999px;background:color-mix(in srgb,var(--surface2) 82%,transparent);color:var(--text-dim);font-size:.68rem}
.wl-play-btn{display:flex;width:100%;align-items:center;justify-content:center;gap:12px;background:var(--rose);color:#fff;padding:16px 24px;border:0;border-radius:18px;text-decoration:none;font-weight:600;font-size:1rem;cursor:pointer;box-shadow:0 10px 25px rgba(192,104,95,0.25);transition:transform .2s, box-shadow .2s}
.wl-play-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(181,66,56,.32)}
.wl-play-btn:active{transform:scale(0.98);box-shadow:0 5px 15px rgba(192,104,95,0.15)}
.wl-ghost{margin-top:18px;background:none;border:none;color:var(--text);font-size:.82rem;text-decoration:underline;text-underline-offset:4px;cursor:pointer;opacity:.8;padding:10px}
.wl-trust{margin-top:8px;color:var(--text-light);font-size:.66rem}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* Landing Page Logic Interaction */
#webLandingOverlay{display:none}
html.landing-page-active #webLandingOverlay{display:flex}
html.landing-page-active #appSplash, html.landing-page-active #onboardingOverlay {display:none !important}


/* ── Landing page ── */
.wl-play-btn{background:linear-gradient(145deg,var(--rose),#8A2018);box-shadow:0 12px 30px rgba(181,66,56,0.28);border-radius:20px;padding:18px 28px}

/* ── Toggle ── */
.toggle-slider{background:var(--surface3)}
.toggle input:checked+.toggle-slider{background:var(--rose);border-color:var(--rose)}

@media(max-height:700px){
  #webLandingOverlay{overflow-y:auto;justify-content:flex-start;padding-top:42px;padding-bottom:42px}
  .wl-logo-wrap{width:76px;height:76px;border-radius:24px;margin-bottom:18px}
  .wl-logo-ar{font-size:2.7rem}
  .wl-eyebrow{margin-bottom:14px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Product onboarding */
#onboardingOverlay{overflow-y:auto}
.ob-goals{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:320px;margin-bottom:14px}
.ob-goal{min-height:42px;padding:9px 10px;border:1px solid var(--border2);border-radius:12px;background:var(--surface);color:var(--text-dim);font:500 .7rem var(--font-sans);cursor:pointer;transition:.2s}
.ob-goal.active{border-color:var(--rose);background:var(--rose-dim);color:var(--rose);box-shadow:inset 0 0 0 1px var(--rose-border)}

/* Plus pricing */
.pricing-overlay{position:fixed;inset:0;z-index:120000;display:flex;align-items:flex-end;justify-content:center}
.pricing-overlay.hidden{display:none}
.pricing-backdrop{position:absolute;inset:0;border:0;background:rgba(24,17,15,.62);backdrop-filter:blur(9px);cursor:pointer}
.pricing-sheet{position:relative;width:min(100%,520px);max-height:min(94vh,830px);overflow-y:auto;background:linear-gradient(155deg,var(--surface),color-mix(in srgb,var(--rose-dim) 45%,var(--surface)));border:1px solid var(--border2);border-radius:30px 30px 0 0;padding:28px 24px calc(28px + env(safe-area-inset-bottom));box-shadow:0 -28px 80px rgba(37,19,15,.28);animation:pricingRise .32s cubic-bezier(.16,1,.3,1)}
@keyframes pricingRise{from{transform:translateY(40px);opacity:0}}
.pricing-close{position:absolute;right:18px;top:18px;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--surface2);color:var(--text-dim);display:grid;place-items:center;cursor:pointer}.pricing-close .ic{width:16px;height:16px}
.pricing-mark{display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:linear-gradient(135deg,#7f302a,#a95046);color:#fff;padding:6px 11px 6px 7px;margin-bottom:20px;font-size:.57rem;font-weight:700;letter-spacing:.14em;box-shadow:0 8px 22px rgba(127,48,42,.24)}.pricing-mark .brand-mark{width:22px;height:22px}
.pricing-eyebrow{color:var(--rose);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;margin:0 0 7px}
.pricing-sheet h2{font:400 2rem/1.08 var(--font-serif);letter-spacing:-.025em;color:var(--text);margin:0 46px 10px 0}
.pricing-intro{font-size:.78rem;line-height:1.65;color:var(--text-dim);margin:0 0 20px}
.pricing-benefits{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:20px}
.pricing-benefits>div{display:flex;align-items:flex-start;gap:9px;padding:12px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 86%,transparent);border-radius:14px}.pricing-benefits>div>span{width:21px;height:21px;border-radius:7px;background:var(--green-dim);color:var(--green);display:grid;place-items:center;font-size:.66rem;flex-shrink:0}.pricing-benefits p{margin:0}.pricing-benefits strong,.pricing-benefits small{display:block}.pricing-benefits strong{font-size:.72rem;color:var(--text);margin-bottom:3px}.pricing-benefits small{font-size:.61rem;color:var(--text-dim);line-height:1.35}
.billing-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:5px;background:var(--surface2);border:1px solid var(--border);border-radius:16px;margin-bottom:12px}.billing-toggle button{border:1px solid transparent;border-radius:12px;padding:10px;background:transparent;color:var(--text-dim);cursor:pointer;text-align:left}.billing-toggle button.active{background:var(--surface);border-color:var(--rose-border);box-shadow:var(--shadow-sm);color:var(--text)}.billing-toggle span,.billing-toggle strong{display:block}.billing-toggle span{font-size:.65rem;margin-bottom:4px}.billing-toggle strong{font:500 .93rem var(--font-serif)}.billing-toggle em{font:600 .53rem var(--font-sans);font-style:normal;color:var(--green);margin-left:4px}
.pricing-cta{width:100%;padding:15px 18px;border:0;border-radius:15px;background:linear-gradient(135deg,var(--rose),#862f28);color:#fff;font:600 .86rem var(--font-sans);cursor:pointer;box-shadow:0 10px 26px rgba(134,47,40,.27)}.pricing-cta:disabled{opacity:.62;cursor:wait}.pricing-note{text-align:center;color:var(--text-light);font-size:.61rem;line-height:1.5;margin:10px 0 0}
.pricing-payment-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;padding:10px 12px;border:1px solid var(--border);border-radius:13px;background:var(--surface2);color:var(--text-light)}
.pricing-payment-row>span{font-size:.58rem}.pricing-payment-badge{display:inline-flex;align-items:center;gap:7px;color:var(--text)}.pricing-payment-badge .ic{width:14px;height:14px;color:var(--green)}.pricing-payment-badge strong{font-size:.65rem}
.pricing-restore{width:100%;margin-top:8px;padding:10px;border:0;background:transparent;color:var(--green);font:650 .65rem var(--font-sans);cursor:pointer}.pricing-restore:hover{text-decoration:underline}.pricing-restore:disabled{opacity:.55;cursor:wait}

/* Plus membership and weekly insight */
.membership-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#7f302a,#a55349);color:#fff;border-radius:22px;padding:20px;margin-bottom:16px;box-shadow:0 16px 34px rgba(127,48,42,.22)}.membership-glow{position:absolute;width:160px;height:160px;right:-60px;top:-70px;border-radius:50%;background:rgba(255,255,255,.12)}.membership-heading{position:relative;display:flex;gap:12px;align-items:center}.membership-mark{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.14);display:grid;place-items:center}.membership-mark .brand-mark{width:25px;height:25px}.membership-heading span{font-size:.56rem;letter-spacing:.13em;opacity:.75}.membership-heading h3{font:500 1.12rem var(--font-serif);margin:3px 0 0}.membership-card>p{position:relative;font-size:.72rem;line-height:1.55;opacity:.82;margin:15px 0}.membership-points{position:relative;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);border-radius:12px;font-size:.66rem}.membership-points strong{font-size:.7rem}.membership-card>button{position:relative;width:100%;margin-top:10px;padding:12px;border-radius:12px;border:0;background:#fff;color:#782b25;font:600 .72rem var(--font-sans);cursor:pointer}.membership-card>small{position:relative;display:block;text-align:center;font-size:.59rem;opacity:.7;margin-top:8px}.admin-entry{text-decoration:none;display:block}.admin-entry.hidden{display:none}
.plus-insight{position:relative;overflow:hidden;margin:-5px 0 16px;padding:17px;border:1px solid var(--rose-border);border-radius:19px;background:linear-gradient(130deg,var(--surface),var(--rose-dim));box-shadow:var(--shadow-sm);cursor:pointer}.plus-insight::after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-48px;bottom:-62px;background:var(--rose-dim)}.plus-insight-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;color:var(--text-light);font-size:.58rem}.plus-chip{background:var(--rose);color:#fff;border-radius:999px;padding:4px 8px;font-weight:700;letter-spacing:.1em}.plus-insight-body{position:relative;display:flex;gap:12px;align-items:flex-start}.plus-insight-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--rose-dim);color:var(--rose);flex-shrink:0}.plus-insight-icon .ic{width:19px;height:19px}.plus-insight h3{font:500 .98rem/1.25 var(--font-serif);margin:0 0 5px;color:var(--text)}.plus-insight p{font-size:.69rem;line-height:1.5;color:var(--text-dim);margin:0}.plus-insight>button{position:relative;border:0;background:none;color:var(--rose);font:600 .65rem var(--font-sans);padding:12px 0 0;cursor:pointer}.plus-insight.unlocked{border-color:rgba(79,125,96,.25);background:linear-gradient(130deg,var(--surface),var(--green-dim))}.plus-insight.unlocked .plus-chip{background:var(--green)}.plus-insight.unlocked .plus-insight-icon{background:var(--green-dim);color:var(--green)}

.ai-think-btn.locked{border-color:var(--rose-border);color:var(--rose);background:var(--rose-dim)}.ai-think-btn.locked .think-cost-badge{background:var(--rose);color:#fff}
@media(min-width:521px){.pricing-overlay{align-items:center}.pricing-sheet{border-radius:30px}}
@media(max-width:430px){.pricing-benefits{grid-template-columns:1fr}.pricing-sheet{padding:24px 18px calc(24px + env(safe-area-inset-bottom))}.pricing-sheet h2{font-size:1.7rem}.ob-logo-wrap{margin-bottom:18px}.ob-sub{margin-bottom:20px}}
@media(max-height:760px){#onboardingOverlay{justify-content:flex-start;padding-top:30px;padding-bottom:30px}.ob-logo-wrap{width:74px;height:74px;border-radius:23px;margin-bottom:16px}.ob-title{font-size:1.55rem}.ob-sub{margin-bottom:16px;line-height:1.5}.ob-input{padding:11px;margin-bottom:10px}.ob-goal{min-height:36px;padding:7px}.ob-btn,.ob-google{padding:11px}}

/* ═══════════════════════════════════════════════════════════════
   PakNoor v4 — calm, responsive product experience
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#F5F3EC;--surface:#FFFEFA;--surface2:#EFEEE6;--surface3:#E7E8DE;
  --rose:#B85F4B;--rose2:#914738;--rose3:#71362C;
  --rose-dim:rgba(184,95,75,.09);--rose-border:rgba(184,95,75,.2);
  --gold:#AD8547;--gold-dim:rgba(173,133,71,.12);
  --text:#18302A;--text-dim:#65746E;--text-light:#8B9691;
  --green:#4F755F;--green-dim:rgba(79,117,95,.11);
  --red:#B65252;--red-dim:rgba(182,82,82,.1);--blue:#587B88;
  --border:rgba(24,48,42,.09);--border2:rgba(24,48,42,.16);
  --shadow-sm:0 1px 2px rgba(24,48,42,.04),0 8px 24px rgba(24,48,42,.045);
  --shadow:0 2px 6px rgba(24,48,42,.04),0 18px 44px rgba(24,48,42,.07);
  --shadow-lg:0 24px 80px rgba(24,48,42,.16);
  --shadow-rose:0 16px 42px rgba(113,54,44,.19);
  --radius:18px;--radius-sm:13px;--radius-lg:26px;
}
html[data-theme="dark"]:root,html[data-theme="dark"] body{
  --bg:#10201C;--surface:#172A24;--surface2:#1C332C;--surface3:#244038;
  --rose:#DD8A73;--rose2:#C06F5B;--rose3:#A45949;
  --rose-dim:rgba(221,138,115,.1);--rose-border:rgba(221,138,115,.21);
  --gold:#D2AD6A;--gold-dim:rgba(210,173,106,.12);
  --text:#F2F1E9;--text-dim:#B2C0BA;--text-light:#83968E;
  --green:#91B79E;--green-dim:rgba(145,183,158,.12);
  --red:#EF9292;--red-dim:rgba(239,146,146,.1);--blue:#8BB1BF;
  --border:rgba(242,241,233,.08);--border2:rgba(242,241,233,.15);
  --shadow-sm:0 10px 28px rgba(0,0,0,.15);--shadow:0 18px 48px rgba(0,0,0,.2);--shadow-lg:0 30px 90px rgba(0,0,0,.3);
}
@media(prefers-color-scheme:dark){html:not([data-theme="light"]){
  --bg:#10201C;--surface:#172A24;--surface2:#1C332C;--surface3:#244038;
  --rose:#DD8A73;--rose2:#C06F5B;--rose3:#A45949;
  --rose-dim:rgba(221,138,115,.1);--rose-border:rgba(221,138,115,.21);
  --gold:#D2AD6A;--gold-dim:rgba(210,173,106,.12);
  --text:#F2F1E9;--text-dim:#B2C0BA;--text-light:#83968E;
  --green:#91B79E;--green-dim:rgba(145,183,158,.12);
  --red:#EF9292;--red-dim:rgba(239,146,146,.1);--blue:#8BB1BF;
  --border:rgba(242,241,233,.08);--border2:rgba(242,241,233,.15);
  --shadow-sm:0 10px 28px rgba(0,0,0,.15);--shadow:0 18px 48px rgba(0,0,0,.2);--shadow-lg:0 30px 90px rgba(0,0,0,.3);
}}

body{font-size:16px;background:var(--bg);line-height:1.5}
body::before{background:radial-gradient(circle at 90% 5%,rgba(184,95,75,.07),transparent 30%),radial-gradient(circle at 2% 94%,rgba(79,117,95,.08),transparent 34%)}
button,input,select,textarea{font-size:16px}
button{min-height:44px}
.wrap{max-width:560px;padding:0 18px}
.card,.water-card,.recipe-card,.tip-card,.setting-group,.prayer-list{box-shadow:var(--shadow-sm);border-color:var(--border);background:var(--surface)}
.card,.water-card,.recipe-card,.tip-card,.setting-group,.membership-card,.plus-insight{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.page-heading{display:flex;align-items:center;gap:14px;margin:28px 0 20px}
.page-heading .sec-title{font-size:2rem;font-weight:500;line-height:1}
.page-heading .sec-sub{font-size:.82rem;line-height:1.45}
.header{padding:28px 4px 18px;gap:14px}
.header-logo{width:48px;height:48px;border-radius:16px;background:linear-gradient(145deg,var(--green),#315545);box-shadow:0 10px 28px rgba(49,85,69,.22);animation:none}
.header-greeting{color:var(--green);font-size:.65rem}
.header-name{font-size:1.8rem;font-weight:500}
.header-day{color:var(--text-dim);font-size:.72rem}
.header-settings{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);display:grid;place-items:center;box-shadow:var(--shadow-sm);cursor:pointer}
.progress-card{background:linear-gradient(135deg,#234E40 0%,#315E4F 58%,#80604A 145%);padding:22px;border-radius:24px;box-shadow:0 16px 42px rgba(35,78,64,.19)}
.progress-card::before{width:180px;height:180px;top:-90px;right:-40px;background:rgba(255,255,255,.055)}
.progress-info h3{font-size:1.35rem;font-weight:500}
.progress-info p{font-size:.8rem}
.days-left{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.17)}
.ring-bg{stroke:rgba(255,255,255,.16)}
.plus-insight{margin:0 0 16px;background:linear-gradient(140deg,var(--surface),color-mix(in srgb,var(--green-dim) 68%,var(--surface)));border-color:color-mix(in srgb,var(--green) 20%,transparent)}
.plus-chip{background:var(--green)}
.plus-insight-icon{color:var(--green);background:var(--green-dim)}
.plus-insight>button{color:var(--green)}
.prayer-widget{min-height:64px;border-radius:18px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);padding:14px 16px}
.routine-card .card-header{background:color-mix(in srgb,var(--surface2) 48%,var(--surface));padding:16px 18px}
.routine-card .card-title{font-weight:500}
.check-item{min-height:64px}
.check-item:hover{background:color-mix(in srgb,var(--green-dim) 55%,transparent)}
.checkbox{width:30px;height:30px;border-radius:10px}
.check-item.done .checkbox{background:var(--green);border-color:var(--green);box-shadow:0 4px 12px rgba(79,117,95,.25)}
.check-label{font-size:.88rem;font-weight:500}
.check-sub{font-size:.72rem;line-height:1.45}
.noor-widgets{margin:2px 0 16px}
.nw-card,.nw-streak,.nw-wisdom{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-sm)}
.water-card{border-radius:20px}
.tip-card{padding:18px;min-height:112px}
.tip-title{font-size:.94rem;font-weight:600}
.tip-body{font-size:.76rem;line-height:1.65}
.recipe-card{padding:18px}
.recipe-name{font-weight:600}
.setting-group{overflow:hidden}
.settings-section-label{margin-top:22px;color:var(--green);font-weight:700}
.rose-btn,.ob-btn,.pricing-cta{background:var(--green);box-shadow:0 8px 22px rgba(49,85,69,.19)}
.ghost-btn{min-height:44px}
.nav-brand,.nav-kicker,.nav-footer{display:none}
.bottom-nav{background:color-mix(in srgb,var(--surface) 93%,transparent);border-color:var(--border);padding:5px 8px max(7px,env(safe-area-inset-bottom));gap:3px}
.nav-item{font-size:.61rem;min-height:56px;border-radius:13px}
.nav-item.active{color:var(--green);background:var(--green-dim)}
.nav-item.active .nav-icon{transform:none}
.notif-dot{border-color:var(--surface)}
.install-btn,.ai-send,.gate-btn{background:var(--green);box-shadow:0 6px 18px rgba(49,85,69,.2)}
.next-prayer-card{background:linear-gradient(135deg,#234E40,#3B6658);box-shadow:0 16px 40px rgba(35,78,64,.18);padding:24px}
.npc-no-data{padding:8px 0}
.prayer-row.next{background:var(--green-dim);border-left-color:var(--green)}
.prayer-row.next .pr-name{color:var(--green)}
#sec-prayer>.page-heading>div:first-child{background:linear-gradient(135deg,var(--green),#72977F)!important;box-shadow:0 3px 12px rgba(79,117,95,.22)!important}
html.landing-page-active{overflow:hidden}
html.landing-page-active body{overflow:hidden}
html.landing-page-active .bottom-nav,html.landing-page-active #appContent,html.landing-page-active .skip-link{display:none!important}

/* Landing */
#webLandingOverlay{padding:0;overflow-y:auto;justify-content:flex-start;background:var(--bg)}
.wl-bg{position:fixed;background:radial-gradient(circle at 85% 12%,rgba(184,95,75,.16),transparent 28%),radial-gradient(circle at 62% 92%,rgba(79,117,95,.15),transparent 32%),var(--bg)}
.wl-bg::after{background-size:32px 32px;opacity:.18}
.wl-nav{width:min(100% - 40px,1180px);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:24px 0}
.wl-brand{display:flex;align-items:center;gap:11px;color:var(--text)}
.wl-brand-mark{width:42px;height:42px;border-radius:14px;background:var(--green);display:grid;place-items:center}
.wl-brand-mark .brand-mark{width:25px;height:25px}
.wl-brand>span:last-child{display:flex;flex-direction:column}
.wl-brand strong{font:600 1.15rem var(--font-serif);line-height:1}
.wl-brand small{font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-top:4px}
.wl-nav-cta{padding:9px 16px;border-radius:999px;border:1px solid var(--border2);background:color-mix(in srgb,var(--surface) 86%,transparent);color:var(--text);font-weight:600;cursor:pointer}
.wl-layout{width:min(100% - 40px,1180px);min-height:calc(100vh - 155px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,.85fr);align-items:center;gap:7vw;padding:36px 0 64px}
.wl-content{width:auto;max-width:610px;text-align:left}
.wl-eyebrow{margin-bottom:24px;color:var(--green);font-size:.7rem}
.wl-title{font-size:clamp(3.2rem,5.5vw,5.8rem);line-height:.91;letter-spacing:-.055em;margin-bottom:26px}
.wl-title em{font-weight:400;color:var(--rose);font-style:italic}
.wl-sub{font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.75;margin:0 0 28px;padding:0;max-width:570px}
.wl-actions{display:flex;align-items:center;gap:18px;margin-bottom:34px}
.wl-play-btn{width:auto;min-width:230px;padding:16px 22px;background:var(--green);border-radius:14px;box-shadow:0 14px 34px rgba(49,85,69,.2)}
.wl-play-btn:hover{box-shadow:0 18px 42px rgba(49,85,69,.25)}
.wl-ghost{margin:0;text-decoration:none;color:var(--text-dim);font-weight:600}
.wl-features{justify-content:flex-start;gap:0;margin:0 0 22px}
.wl-features span{border:0;border-right:1px solid var(--border2);border-radius:0;background:none;padding:0 20px;color:var(--text-dim);font-size:.7rem;display:flex;flex-direction:column}
.wl-features span:first-child{padding-left:0}.wl-features span:last-child{border:0}
.wl-features strong{font:600 1.25rem var(--font-serif);color:var(--text)}
.wl-trust{display:flex;align-items:center;gap:7px;margin:0;color:var(--text-light);font-size:.7rem}
.wl-preview{position:relative;min-height:610px;display:grid;place-items:center}
.wl-orbit{position:absolute;border:1px solid color-mix(in srgb,var(--green) 18%,transparent);border-radius:50%}
.wl-orbit-one{width:510px;height:510px}.wl-orbit-two{width:390px;height:390px}
.wl-phone{position:relative;z-index:2;width:302px;min-height:570px;padding:18px 16px 22px;border:8px solid color-mix(in srgb,var(--text) 88%,#000);border-radius:42px;background:var(--bg);box-shadow:0 36px 90px rgba(24,48,42,.24),inset 0 0 0 1px var(--border)}
.wl-phone-top{display:flex;align-items:center;justify-content:space-between;font-size:.58rem;font-weight:700;padding:0 6px 20px}
.wl-phone-top i{width:70px;height:18px;border-radius:12px;background:var(--text)}
.wl-phone-greeting{display:flex;flex-direction:column;padding:0 4px 15px}
.wl-phone-greeting span{font-size:.55rem;color:var(--green);text-transform:uppercase;letter-spacing:.11em;font-weight:700}
.wl-phone-greeting strong{font:500 1.18rem var(--font-serif);margin-top:3px}
.wl-phone-progress{display:flex;align-items:center;gap:12px;padding:14px;border-radius:17px;background:linear-gradient(135deg,#234E40,#3D6759);color:#fff}
.wl-mini-ring{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:5px solid rgba(255,255,255,.22);border-top-color:#fff;transform:rotate(35deg)}
.wl-mini-ring span{font-size:.65rem;font-weight:700;transform:rotate(-35deg)}
.wl-phone-progress>div:last-child{display:flex;flex-direction:column}.wl-phone-progress small{font-size:.45rem;letter-spacing:.1em;opacity:.72}.wl-phone-progress strong{font:500 .82rem var(--font-serif);margin:3px 0}.wl-phone-progress span{font-size:.52rem;opacity:.76}
.wl-phone-prayer{display:flex;align-items:center;gap:9px;margin-top:10px;padding:11px;border-radius:14px;background:var(--surface);border:1px solid var(--border)}
.wl-phone-prayer .ic{color:var(--green);width:18px}.wl-phone-prayer>span{display:flex;flex:1;flex-direction:column}.wl-phone-prayer small{font-size:.43rem;color:var(--text-light);letter-spacing:.09em}.wl-phone-prayer strong{font-size:.62rem}.wl-phone-prayer b{font:.7rem var(--font-serif)}
.wl-phone-section{display:flex;justify-content:space-between;margin:18px 3px 8px}.wl-phone-section span{font:600 .9rem var(--font-serif)}.wl-phone-section small{font-size:.52rem;color:var(--text-light)}
.wl-phone-task{display:flex;align-items:center;gap:10px;padding:11px 5px;border-bottom:1px solid var(--border)}
.wl-phone-task i{width:25px;height:25px;border:1.5px solid var(--border2);border-radius:8px;display:grid;place-items:center;font-size:.6rem;font-style:normal}.wl-phone-task.done i{background:var(--green);border-color:var(--green);color:#fff}.wl-phone-task>span{display:flex;flex-direction:column}.wl-phone-task strong{font-size:.65rem}.wl-phone-task small{font-size:.52rem;color:var(--text-light)}.wl-phone-task.done strong{text-decoration:line-through;color:var(--text-dim)}
.wl-phone-note{margin-top:15px;padding:12px;border-radius:14px;background:var(--green-dim);color:var(--green);font:italic 600 .68rem/1.5 var(--font-serif)}
.wl-float-card{position:absolute;z-index:3;background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);backdrop-filter:blur(16px)}
.wl-float-streak{left:0;top:125px;padding:13px 16px;display:grid;grid-template-columns:auto 1fr;gap:0 8px}.wl-float-streak>span{grid-row:1/3;color:var(--gold);font-size:1.3rem}.wl-float-streak strong{font-size:.72rem}.wl-float-streak small{font-size:.56rem;color:var(--text-light)}
.wl-float-private{right:-8px;bottom:90px;padding:12px 14px;display:flex;align-items:center;gap:8px;color:var(--green)}.wl-float-private .ic{width:17px}.wl-float-private strong{font-size:.66rem}
.wl-foot{width:min(100% - 40px,1180px);margin:0 auto 22px;padding:18px 0 0;border-top:1px solid var(--border);display:flex;justify-content:space-between;color:var(--text-light);font-size:.61rem;text-transform:uppercase;letter-spacing:.09em}

/* Onboarding */
#onboardingOverlay{padding:22px;background:var(--bg)}
.ob-shell{width:min(100%,980px);display:grid;grid-template-columns:.9fr 1.1fr;overflow:hidden;border:1px solid var(--border);border-radius:30px;background:var(--surface);box-shadow:var(--shadow-lg)}
.ob-story{position:relative;overflow:hidden;padding:64px 50px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(155deg,#214A3D,#2E5C4D 62%,#765847 140%);color:#fff}
.ob-story::after{content:"نور";position:absolute;right:-35px;bottom:-80px;font:190px var(--font-serif);opacity:.05}
.ob-story-mark{width:58px;height:58px;border-radius:19px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);display:grid;place-items:center;margin-bottom:38px}
.ob-story-mark .brand-mark{width:34px;height:34px}.ob-kicker{font-size:.64rem!important;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.7;margin-bottom:10px!important}
.ob-story h2{font:500 2.65rem/1.03 var(--font-serif);letter-spacing:-.03em;margin-bottom:20px;max-width:340px}.ob-story>p{font-size:.81rem;line-height:1.75;opacity:.76;max-width:330px}
.ob-story-list{display:flex;flex-direction:column;gap:9px;margin-top:35px;font-size:.7rem;opacity:.82}
.ob-card{padding:42px 50px;min-height:610px;display:flex;flex-direction:column;justify-content:center}
.ob-progress{height:4px;border-radius:4px;background:var(--surface2);margin-bottom:11px}.ob-progress span{display:block;width:50%;height:100%;background:var(--green);border-radius:4px;transition:width .3s}
.ob-step-label{font-size:.59rem;color:var(--text-light);letter-spacing:.1em;text-transform:uppercase;margin-bottom:28px}
.ob-step{display:none}.ob-step.active{display:block;animation:fadeUp .3s ease}
.ob-card .ob-logo-wrap{width:62px;height:62px;border-radius:19px;margin:0 0 22px;background:var(--green);box-shadow:0 10px 24px rgba(49,85,69,.18);animation:none}
.ob-card .ob-title{text-align:left;font-size:2rem;font-weight:500}
.ob-card .ob-sub{text-align:left;max-width:400px;margin:0 0 26px;font-size:.82rem;line-height:1.65}
.ob-card .ob-label{max-width:none}
.ob-card .ob-input{max-width:none;text-align:left;font-family:var(--font-sans);font-size:1rem;padding:14px 16px;margin-bottom:14px}
.ob-card .ob-btn,.ob-card .ob-google{max-width:none;border-radius:13px}
.ob-card .ob-btn{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--green);box-shadow:none}
.ob-divider{margin:10px 0 12px;position:relative;font-size:.65rem}.ob-divider::before,.ob-divider::after{content:"";position:absolute;top:50%;width:30%;height:1px;background:var(--border)}.ob-divider::before{left:0}.ob-divider::after{right:0}
.ob-back{border:0;background:none;color:var(--text-dim);padding:0;margin:0 0 24px;cursor:pointer;font-weight:600}
.ob-goals{max-width:none;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}.ob-goal{min-height:82px;padding:13px;text-align:left;border-radius:14px;display:flex;flex-direction:column;justify-content:center}.ob-goal strong{font-size:.76rem;color:var(--text)}.ob-goal span{font-size:.63rem;color:var(--text-light);margin-top:4px;line-height:1.35}.ob-goal.active{border-color:var(--green);background:var(--green-dim);color:var(--green);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 15%,transparent)}.ob-goal.active strong{color:var(--green)}
.ob-privacy{text-align:center;font-size:.63rem;color:var(--text-light);margin-top:10px}

@media(min-width:900px){
  body{padding:0 0 60px 244px}
  .bottom-nav{top:0;bottom:0;left:0;right:auto;width:244px;padding:28px 18px 20px;display:flex;flex-direction:column;align-items:stretch;gap:6px;border:0;border-right:1px solid var(--border);box-shadow:none;background:color-mix(in srgb,var(--surface) 94%,var(--bg));backdrop-filter:blur(24px)}
  .nav-brand{display:flex;align-items:center;gap:11px;padding:0 10px 28px}.nav-brand>span{width:42px;height:42px;border-radius:14px;background:var(--green);display:grid;place-items:center}.nav-brand .brand-mark{width:25px;height:25px}.nav-brand>div{display:flex;flex-direction:column}.nav-brand strong{font:600 1.1rem var(--font-serif)}.nav-brand small{font-size:.57rem;color:var(--text-light)}
  .nav-kicker{display:block;padding:0 12px 7px;color:var(--text-light);font-size:.55rem;letter-spacing:.13em;font-weight:700}
  .nav-item{flex:0 0 auto;min-height:48px;width:100%;padding:11px 13px;display:flex;flex-direction:row;justify-content:flex-start;gap:12px;border-radius:12px;font-size:.76rem;overflow:visible}
  .nav-item .nav-icon{width:20px;height:20px;margin:0}.nav-item .nav-icon-wrap{width:20px}.nav-item.active{background:var(--green-dim);color:var(--green);font-weight:700}
  .nav-footer{display:flex;margin-top:auto;padding:13px;border:1px solid var(--border);border-radius:13px;background:var(--surface);justify-content:space-between;align-items:center}.nav-footer span{font-size:.59rem;color:var(--text-light)}.nav-footer strong{font-size:.66rem;color:var(--green)}
  .wrap{max-width:1200px;padding:0 34px;margin:0 auto}
  .header{padding:32px 0 22px}
  .header.collapsed{display:none}
  .progress-card{padding:25px 28px;margin-bottom:20px}
  #sec-today.active{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
  #sec-today>.plus-insight{grid-column:span 2;margin:0;height:100%}
  #sec-today>.prayer-widget{grid-column:span 1;margin:0;height:100%}
  #today-mask-badge{grid-column:1/-1}
  #sec-today>.noor-widgets{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
  .noor-widgets>.nw-row{display:contents}.noor-widgets .nw-card,.noor-widgets .nw-streak,.noor-widgets .nw-wisdom{margin:0;min-height:128px}
  .noor-widgets .nw-streak,.noor-widgets .nw-wisdom{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
  .routine-card{margin:0;height:100%}
  #sec-today>.water-card{grid-column:1/-1;margin:0}
  #sec-prayer,#sec-routines,#sec-tips,#sec-settings,#sec-about{max-width:1040px;margin:0 auto}
  #sec-routines.active,#sec-tips.active,#sec-settings.active{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
  #sec-routines>.page-heading,#sec-tips>.page-heading,#sec-settings>.page-heading{grid-column:1/-1}
  #sec-routines>.recipe-card,#sec-tips>.tip-card,#sec-settings>.setting-group,#sec-settings>.membership-card{margin:0;height:100%}
  #sec-routines>.sec-title,#sec-routines>.sec-sub,#sec-routines>.card,#sec-tips>.card,#sec-settings>.settings-section-label{grid-column:1/-1}
  #sec-routines>.card,#sec-tips>.card{margin-top:0}
  #sec-settings>.settings-section-label{margin:14px 0 -2px}
  #sec-settings>.membership-card{grid-column:1/-1}
  .prayer-list{overflow:hidden}
  #sec-ai{left:244px;bottom:0}
  #aiCard{max-width:1000px;margin:0 auto;width:100%;box-shadow:var(--shadow-lg)}
  .modal{max-width:580px;border-radius:24px;margin-bottom:24px}
  .toast{bottom:28px}
}

@media(min-width:900px) and (max-width:1080px){
  #sec-today.active{grid-template-columns:repeat(2,minmax(0,1fr))}
  #sec-today>.plus-insight,#sec-today>.prayer-widget{grid-column:span 1}
  #sec-today>.noor-widgets,#today-mask-badge,#sec-today>.water-card{grid-column:1/-1}
  .night-routine{grid-column:1/-1}
}

@media(max-width:899px){
  .wl-layout{grid-template-columns:1fr;gap:40px;text-align:center;padding-top:50px}.wl-content{margin:0 auto;text-align:center}.wl-eyebrow{justify-content:center}.wl-actions,.wl-features{justify-content:center}.wl-trust{justify-content:center}.wl-preview{min-height:590px}.wl-foot{display:none}
  .ob-shell{max-width:540px;grid-template-columns:1fr}.ob-story{display:none}.ob-card{padding:36px;min-height:0}
}

@media(max-width:600px){
  .wl-nav{width:calc(100% - 30px);padding:16px 0}.wl-brand small{display:none}.wl-nav-cta{font-size:.7rem}
  .wl-layout{width:calc(100% - 36px);padding:42px 0 80px;min-height:auto}
  .wl-title{font-size:clamp(2.7rem,13vw,4.1rem)}.wl-sub{font-size:.92rem}.wl-actions{flex-direction:column;gap:8px}.wl-play-btn{width:100%}.wl-ghost{width:100%}
  .wl-features span{padding:0 11px}.wl-features strong{font-size:1.05rem}
  .wl-preview{min-height:560px;transform:scale(.88);margin:-25px -35px}.wl-orbit-one{width:430px;height:430px}.wl-orbit-two{width:330px;height:330px}.wl-float-streak{left:3px}.wl-float-private{right:2px}
  #onboardingOverlay{padding:0;background:var(--surface);align-items:stretch;justify-content:flex-start}
  .ob-shell{border:0;border-radius:0;box-shadow:none;min-height:100dvh}.ob-card{padding:30px 22px calc(28px + env(safe-area-inset-bottom));justify-content:flex-start;min-height:100dvh}.ob-step-label{margin-bottom:22px}.ob-card .ob-logo-wrap{width:54px;height:54px;margin-bottom:18px}.ob-card .ob-title{font-size:1.7rem}.ob-card .ob-sub{margin-bottom:22px}.ob-goals{grid-template-columns:1fr}.ob-goal{min-height:67px}
  .page-heading{margin-top:24px}.page-heading .sec-title{font-size:1.7rem}
  .header-settings{display:none}
}

@media(hover:hover){
  .card:hover,.water-card:hover,.recipe-card:hover,.tip-card:hover,.setting-group:hover{border-color:var(--border2)}
  .nav-item:hover{background:color-mix(in srgb,var(--green-dim) 65%,transparent);color:var(--green)}
}

/* ═══════════════════════════════════════════════════════════
   NOOR AI WORKSPACE — connected product experience
   ═══════════════════════════════════════════════════════════ */
#aiCard{max-width:none;background:var(--bg)}
.noor-ai-shell{display:grid;grid-template-columns:232px minmax(0,1fr);flex:1;min-height:0;overflow:hidden}
.noor-ai-rail{display:flex;flex-direction:column;gap:17px;min-height:0;padding:24px 18px 18px;border-right:1px solid var(--border);background:color-mix(in srgb,var(--surface) 72%,var(--bg))}
.noor-rail-profile{display:flex;flex-direction:column;gap:5px}
.noor-rail-profile>span,.noor-eyebrow{font:.56rem var(--font-mono);font-weight:700;letter-spacing:.12em;color:var(--green)}
.noor-rail-profile>strong{font:600 1.14rem var(--font-serif);color:var(--text)}
.noor-rail-profile>small{font-size:.65rem;line-height:1.4;color:var(--text-light)}
.noor-rail-progress{display:flex;align-items:center;gap:11px;padding:13px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.noor-rail-progress>div{width:53px;height:53px;flex:0 0 53px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) var(--noor-progress),var(--surface3) 0);position:relative}
.noor-rail-progress>div::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
.noor-rail-progress>div span{position:relative;z-index:1;font:.62rem var(--font-mono);font-weight:700;color:var(--text)}
.noor-rail-progress p{display:flex;flex-direction:column;gap:3px;min-width:0}
.noor-rail-progress p strong{font-size:.7rem;color:var(--text)}.noor-rail-progress p small{font-size:.6rem;color:var(--text-light)}
.noor-context-list{display:flex;flex-direction:column;gap:7px}
.noor-context-list button{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:11px 12px;border:1px solid transparent;border-radius:12px;color:var(--text);background:transparent;text-align:left;cursor:pointer}
.noor-context-list button:hover{border-color:var(--border);background:var(--surface)}
.noor-context-list button>span{font:.52rem var(--font-mono);letter-spacing:.1em;color:var(--text-light)}
.noor-context-list button>strong{max-width:100%;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.noor-context-list button>small{font-size:.59rem;color:var(--text-light);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.noor-rail-note{margin-top:auto;display:flex;gap:8px;align-items:flex-start;padding:12px;border-radius:13px;background:var(--green-dim);color:var(--green)}
.noor-rail-note .ic{width:15px;height:15px;flex:0 0 15px}.noor-rail-note span{font-size:.6rem;line-height:1.5}

.noor-ai-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.noor-ai-tabs{display:flex;gap:6px;padding:11px 20px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 80%,transparent)}
.noor-ai-tab{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:37px;padding:0 13px;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--text-dim);font-size:.69rem;font-weight:650;cursor:pointer}
.noor-ai-tab .ic{width:15px;height:15px}.noor-ai-tab.active{border-color:color-mix(in srgb,var(--green) 18%,var(--border));background:var(--green-dim);color:var(--green)}
.noor-ai-view{display:none;flex:1;min-height:0;overflow:auto}
.noor-ai-view.active{display:block;animation:fadeUp .2s ease both}
.noor-ai-view[data-view="chat"].active{display:flex;flex-direction:column;overflow:hidden}

.noor-briefing{width:min(920px,100%);margin:0 auto;padding:28px 30px 36px}
.noor-brief-hero{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:28px;border:1px solid color-mix(in srgb,var(--green) 20%,var(--border));border-radius:24px;background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--green-dim) 72%,var(--surface)));box-shadow:var(--shadow-sm)}
.noor-brief-hero h2,.noor-plan-heading h2{margin:7px 0 8px;font:500 clamp(1.55rem,2.6vw,2.35rem)/1.05 var(--font-serif);letter-spacing:-.035em;color:var(--text)}
.noor-brief-hero p{max-width:560px;font-size:.76rem;line-height:1.6;color:var(--text-dim)}
.noor-brief-ring{width:92px;height:92px;flex:0 0 92px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:conic-gradient(var(--green) var(--noor-progress),var(--surface3) 0);position:relative}
.noor-brief-ring::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--surface)}
.noor-brief-ring span,.noor-brief-ring small{z-index:1}.noor-brief-ring span{font:700 1.05rem var(--font-mono);color:var(--text)}.noor-brief-ring small{font:.53rem var(--font-mono);letter-spacing:.07em;color:var(--text-light)}
.noor-brief-alert{display:flex;align-items:center;gap:11px;margin-top:13px;padding:13px 16px;border:1px solid color-mix(in srgb,var(--gold) 24%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--gold) 8%,var(--surface));color:var(--gold)}
.noor-brief-alert .ic{width:20px;height:20px}.noor-brief-alert div{display:flex;flex-direction:column}.noor-brief-alert strong{font-size:.72rem;color:var(--text)}.noor-brief-alert span{font-size:.63rem;color:var(--text-dim)}
.noor-next-action{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-top:16px;padding:18px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.noor-next-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;background:var(--green)}.noor-next-icon .ic{width:20px;height:20px}
.noor-next-action>div:nth-child(2){display:flex;flex-direction:column;gap:3px;min-width:0}.noor-next-action>div:nth-child(2)>span{font:.53rem var(--font-mono);letter-spacing:.1em;color:var(--green)}.noor-next-action strong{font-size:.82rem}.noor-next-action small{font-size:.63rem;color:var(--text-light)}
.noor-next-action>button,.noor-plan-heading button{min-height:38px;padding:0 13px;border:1px solid color-mix(in srgb,var(--green) 26%,var(--border));border-radius:11px;background:var(--green-dim);color:var(--green);font-size:.66rem;font-weight:700;cursor:pointer}
.noor-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.noor-quick-grid>button{display:flex;align-items:center;gap:12px;min-height:74px;padding:14px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer;transition:border-color .2s,transform .15s}
.noor-quick-grid>button:hover{border-color:color-mix(in srgb,var(--green) 32%,var(--border));transform:translateY(-1px)}
.noor-quick-grid .ic{width:22px;height:22px;flex:0 0 22px;color:var(--green)}.noor-quick-grid span{display:flex;flex-direction:column;gap:4px}.noor-quick-grid strong{font-size:.72rem}.noor-quick-grid small{font-size:.62rem;color:var(--text-light)}
.noor-boundary{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:17px;color:var(--text-light)}.noor-boundary .ic{width:14px;height:14px}.noor-boundary span{font-size:.59rem;line-height:1.45}

.noor-plan-view{width:min(920px,100%);margin:0 auto;padding:28px 30px 36px}
.noor-plan-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:17px}.noor-plan-heading h2{max-width:600px;margin-bottom:0}
.noor-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.noor-plan-grid>button{display:flex;align-items:center;gap:12px;min-height:82px;padding:15px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer}
.noor-plan-grid>button:hover{border-color:color-mix(in srgb,var(--green) 30%,var(--border))}
.noor-plan-grid .ic{width:23px;height:23px;color:var(--green)}.noor-plan-grid span{display:flex;min-width:0;flex-direction:column;gap:3px}.noor-plan-grid strong{font-size:.74rem}.noor-plan-grid small{font-size:.61rem;color:var(--text-light)}
.noor-custom-plan{margin-top:17px;padding:18px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.noor-custom-plan-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--border)}.noor-custom-plan-head strong{font:600 .91rem var(--font-serif)}.noor-custom-plan-head span{font:.58rem var(--font-mono);color:var(--text-light)}
.noor-plan-step{display:grid;grid-template-columns:75px minmax(0,1fr);gap:4px 12px;padding:12px 2px;border-bottom:1px solid var(--border)}.noor-plan-step>span{grid-row:1/3;font:.53rem var(--font-mono);letter-spacing:.08em;color:var(--green);padding-top:2px}.noor-plan-step strong{font-size:.7rem}.noor-plan-step small{font-size:.61rem;color:var(--text-light)}
.noor-plan-empty{display:flex;flex-direction:column;gap:5px;padding:22px 4px 8px;text-align:center}.noor-plan-empty strong{font-size:.74rem}.noor-plan-empty span{font-size:.63rem;color:var(--text-light)}
.noor-data-action{margin:8px 0 5px 50px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--green) 25%,var(--border));border-radius:15px;background:var(--green-dim)}.noor-data-action strong{display:block;font-size:.73rem}.noor-data-action p{margin:4px 0 10px;font-size:.63rem;color:var(--text-dim)}.noor-data-action button{min-height:34px;padding:0 11px;border:0;border-radius:9px;background:var(--green);color:#fff;font-size:.63rem;font-weight:700;cursor:pointer}.noor-data-action button+button{margin-left:6px;background:transparent;color:var(--text-dim);border:1px solid var(--border)}
.noor-action-done{font-size:.65rem;font-weight:700;color:var(--green)}

.noor-ai-main>.ai-bar{border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(18px)}

@media(min-width:900px){
  #aiCard{max-width:1240px}
}
@media(max-width:899px){
  .noor-ai-shell{grid-template-columns:1fr}.noor-ai-rail{display:none}
  .noor-ai-tabs{padding:9px 12px}.noor-ai-tab{flex:1;padding:0 8px}
  .noor-briefing,.noor-plan-view{padding:18px 15px 28px}
  .noor-brief-hero{padding:20px}.noor-brief-ring{width:78px;height:78px;flex-basis:78px}
}
@media(max-width:600px){
  .aih{padding-left:10px;padding-right:8px}.aih-icon{width:38px;height:38px;border-radius:12px}.aih-name{font-size:.87rem}.aih-status{font-size:.57rem}.aih-pill{padding-right:8px;margin-right:0}
  .noor-brief-hero{align-items:flex-start}.noor-brief-hero h2{font-size:1.48rem}.noor-brief-hero p{font-size:.69rem}.noor-brief-ring{width:68px;height:68px;flex-basis:68px}.noor-brief-ring span{font-size:.86rem}
  .noor-next-action{grid-template-columns:auto 1fr}.noor-next-action>button{grid-column:2;justify-self:start}.noor-next-action small{line-height:1.4}
  .noor-quick-grid,.noor-plan-grid{grid-template-columns:1fr}.noor-boundary{align-items:flex-start;text-align:left}
  .noor-plan-heading{align-items:flex-start;flex-direction:column}.noor-plan-heading h2{font-size:1.48rem}.noor-plan-heading button{width:100%}
}

/* v4.2 stability pass — simpler integrations, safer mobile geometry */
#aiContainer::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--green) 10%,transparent),transparent 70%)}
.aih-icon,.ai-load-mark,.gate-logo-ring{background:linear-gradient(150deg,#5F8A70,#294C3D);box-shadow:0 8px 22px rgba(41,76,61,.25),inset 0 1px 0 rgba(255,255,255,.16)}
.aih-pill{color:var(--green);background:var(--green-dim);border-color:color-mix(in srgb,var(--green) 22%,transparent)}
.aih-pill::before{background:radial-gradient(circle at 35% 35%,#6FA783,#315545 100%)}
.noor-ai-rail{overflow-y:auto;overscroll-behavior:contain}
.noor-ai-view{overscroll-behavior:contain}
.noor-ai-main>.ai-bar{padding-bottom:10px}
.noor-data-action{margin:8px 12px 6px 50px}
.about-logo{background:linear-gradient(145deg,#5F8A70,#294C3D);box-shadow:0 8px 24px rgba(41,76,61,.22)}
.about-logo .brand-mark{width:34px;height:34px}
@media(max-width:600px){
  .page-heading{align-items:flex-start;flex-wrap:wrap}
  .page-heading>div:nth-child(2){flex:1;min-width:0}
  .aih-status{display:none}
  .aih-pill{max-width:82px;overflow:hidden;text-overflow:ellipsis}
  .noor-ai-tabs{gap:4px;padding:7px 8px}
  .noor-ai-tab{min-height:36px;font-size:.64rem}
  .noor-briefing,.noor-plan-view{padding:14px 12px 22px}
  .noor-brief-hero{padding:17px;border-radius:19px}
  .noor-next-action{padding:14px}
  .noor-quick-grid>button{min-height:66px}
  .noor-ai-main>.ai-bar{padding-bottom:8px}
  .noor-data-action{margin-left:10px;margin-right:10px}
}

@media(max-width:380px){
  .aih-right .aih-btn{width:30px}
  .aih-pill{font-size:.59rem;padding-left:24px;padding-right:6px;max-width:68px}
  .noor-ai-tab .ic{display:none}
  .noor-brief-hero{display:grid;grid-template-columns:1fr auto}
  .noor-brief-hero p{grid-column:1/-1}
  .noor-brief-ring{width:60px;height:60px;flex-basis:60px}
}

/* ═══════════════════════════════════════════════════════════
   ASK NOOR LAUNCHER + SETTINGS CONTROL CENTER
   ═══════════════════════════════════════════════════════════ */
.noor-fab{position:fixed;right:20px;bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:140;display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 15px 6px 6px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:linear-gradient(145deg,#47725A,#294C3D);color:#fff;box-shadow:0 14px 38px rgba(29,62,47,.32),inset 0 1px 0 rgba(255,255,255,.14);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px) scale(.96);transition:opacity .2s,transform .2s,visibility .2s,box-shadow .2s}
.noor-fab.show{opacity:1;visibility:visible;transform:none}
.noor-fab:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(29,62,47,.38),inset 0 1px 0 rgba(255,255,255,.14)}
.noor-fab:active{transform:scale(.97)}
.noor-fab-mark{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;border-radius:50%;background:rgba(255,255,255,.11)}
.noor-fab-mark .brand-mark{width:24px;height:24px}
.noor-fab-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.noor-fab-copy strong{font-size:.72rem;color:#fff}.noor-fab-copy small{margin-top:3px;font-size:.54rem;color:rgba(255,255,255,.7)}

#sec-settings>.page-heading>div:first-child{color:var(--green)!important;background:var(--green-dim)!important;border-color:color-mix(in srgb,var(--green) 20%,var(--border))!important}
.settings-hero{grid-column:1/-1;position:relative;isolation:isolate;overflow:hidden;padding:24px;border:1px solid rgba(255,255,255,.12);border-radius:25px;background:linear-gradient(135deg,#315545 0%,#47725A 58%,#5F806C 100%);color:#fff;box-shadow:0 18px 48px rgba(40,76,59,.2)}
.settings-hero::after{content:"";position:absolute;z-index:-1;right:-90px;top:-130px;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(231,191,114,.18),transparent 68%)}
.settings-hero-brand{display:flex;align-items:center;gap:15px}
.settings-hero-mark{width:54px;height:54px;display:grid;place-items:center;flex:0 0 54px;border-radius:17px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12)}
.settings-hero-mark .brand-mark{width:31px;height:31px}
.settings-hero-brand span{font:.55rem var(--font-mono);letter-spacing:.13em;color:#E7BF72;font-weight:700}
.settings-hero-brand h2{margin:5px 0 4px;font:500 clamp(1.35rem,2.8vw,2rem)/1.05 var(--font-serif);letter-spacing:-.025em;color:#fff}
.settings-hero-brand p{font-size:.67rem;color:rgba(255,255,255,.7)}
.settings-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:20px}
.settings-status-grid>div{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;align-items:center;padding:11px 12px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.07)}
.settings-status-grid .ic{grid-row:1/3;width:17px;height:17px;color:#E7BF72}.settings-status-grid span{font:.49rem var(--font-mono);letter-spacing:.11em;color:rgba(255,255,255,.58)}.settings-status-grid strong{font-size:.66rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.settings-quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.settings-quick-actions button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 10px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.09);color:#fff;font:650 .63rem var(--font-sans);cursor:pointer}
.settings-quick-actions button:hover{background:rgba(255,255,255,.15)}.settings-quick-actions .ic{width:15px;height:15px;color:#E7BF72}

.settings-toolbar{grid-column:1/-1;position:sticky;top:0;z-index:12;display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--surface) 88%,transparent);box-shadow:var(--shadow-sm);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.settings-search{min-width:220px;flex:1;display:flex;align-items:center;gap:8px;height:40px;padding:0 10px;border:1px solid var(--border);border-radius:11px;background:var(--surface2);color:var(--text-light)}
.settings-search>.ic{width:16px;height:16px;flex:0 0 16px}.settings-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text);font:400 .72rem var(--font-sans);-webkit-user-select:text;user-select:text}.settings-search input::placeholder{color:var(--text-light)}
.settings-search button{width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--text-light);cursor:pointer}.settings-search button:hover{background:var(--surface3);color:var(--text)}.settings-search button .ic{width:13px;height:13px}
.settings-jump-nav{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}.settings-jump-nav::-webkit-scrollbar{display:none}.settings-jump-nav button{min-height:36px;padding:0 11px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text-dim);font:650 .61rem var(--font-sans);white-space:nowrap;cursor:pointer}.settings-jump-nav button:hover{border-color:var(--border);background:var(--green-dim);color:var(--green)}
.settings-no-results{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px;border:1px dashed var(--border2);border-radius:18px;color:var(--text-light)}.settings-no-results[hidden]{display:none}.settings-no-results .ic{width:24px;height:24px;color:var(--green)}.settings-no-results strong{font-size:.78rem;color:var(--text)}.settings-no-results span{font-size:.65rem}

#sec-settings>.settings-section-label{scroll-margin-top:82px;margin-top:18px;padding:0 3px;color:var(--green);font:.57rem var(--font-mono);letter-spacing:.14em}
#sec-settings>.setting-group{border-radius:18px;box-shadow:none;border-color:var(--border);background:color-mix(in srgb,var(--surface) 97%,var(--green-dim));transition:border-color .2s,box-shadow .2s,transform .2s}
#sec-settings>.setting-group:hover{border-color:color-mix(in srgb,var(--green) 24%,var(--border));box-shadow:0 10px 28px rgba(29,62,47,.07)}
#sec-settings .setting-group-title{min-height:50px;padding:12px 15px;font:600 .96rem var(--font-serif)}
#sec-settings .setting-group-title>.ic{width:28px;height:28px;padding:6px;border-radius:9px;background:var(--green-dim);color:var(--green)}
#sec-settings .skin-type-btn.active{border-color:var(--green);background:var(--green-dim);color:var(--green)}
#sec-settings .madhab-opt.active{background:var(--green-dim)}#sec-settings .madhab-opt.active .mo-radio{border-color:var(--green);background:var(--green)}
#sec-settings .rose-btn:not(.danger-btn),#sec-settings .perm-btn.granted{background:var(--green);border-color:var(--green);color:#fff}
#sec-settings .membership-card{background:linear-gradient(135deg,#294C3D,#47725A);box-shadow:0 16px 34px rgba(41,76,61,.2)}
#sec-settings .membership-card>button{color:#294C3D}
.settings-anchor-flash{animation:settingsAnchorFlash 1.1s ease}
@keyframes settingsAnchorFlash{0%,100%{color:var(--green)}35%{color:var(--gold);text-shadow:0 0 18px color-mix(in srgb,var(--gold) 35%,transparent)}}

@media(min-width:900px){
  .noor-fab{right:28px;bottom:26px}
  .settings-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);column-gap:24px}
  .settings-status-grid{margin-top:0}.settings-quick-actions{grid-column:1/-1}
}
@media(max-width:700px){
  .settings-toolbar{align-items:stretch;flex-direction:column}.settings-search{width:100%;min-width:0}.settings-jump-nav{width:100%}
  .settings-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:430px){
  .noor-fab{right:12px;bottom:calc(80px + env(safe-area-inset-bottom,0px));min-height:48px;padding-right:12px}.noor-fab-mark{width:36px;height:36px;flex-basis:36px}.noor-fab-mark .brand-mark{width:21px;height:21px}.noor-fab-copy small{display:none}
  .settings-hero{padding:18px;border-radius:20px}.settings-hero-mark{width:46px;height:46px;flex-basis:46px}.settings-hero-brand h2{font-size:1.35rem}
  .settings-status-grid{gap:5px}.settings-status-grid>div{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:9px}.settings-status-grid .ic{width:15px;height:15px}.settings-status-grid span{font-size:.43rem}.settings-status-grid strong{font-size:.57rem;max-width:100%}
  .settings-quick-actions button{min-height:42px}
  #sec-settings>.setting-group{border-radius:16px}
}

/* ═══════════════════════════════════════════════════════════
   NOOR AI v4.4 — richer replies, advanced controls, icon polish
   ═══════════════════════════════════════════════════════════ */
.pr-checkmark{display:grid;place-items:center}.pr-checkmark .ic{width:15px;height:15px}
.avoid-x .ic{width:13px;height:13px;stroke-width:2}
.ob-story-list span{display:flex;align-items:center;gap:8px}.ob-story-list .ic{width:15px;height:15px;color:#E7BF72}
.wl-phone-task i .ic{width:13px;height:13px}.wl-float-streak>span .ic{width:22px;height:22px}
.pricing-benefits>div>span .ic{width:13px;height:13px}
.noor-action-done{display:flex;align-items:center;justify-content:center;gap:6px}.noor-action-done .ic{width:15px;height:15px}

.ai-compose-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.ai-style-label{display:flex;align-items:center;gap:9px;min-width:0;color:var(--green)}
.ai-style-label>.ic{width:17px;height:17px;flex:0 0 17px}
.ai-style-label>span{display:flex;flex-direction:column;min-width:0}.ai-style-label strong{font-size:.64rem;color:var(--text)}.ai-style-label small{font-size:.54rem;color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-style-options{display:flex;align-items:center;gap:4px;padding:3px;border:1px solid var(--border);border-radius:12px;background:var(--surface2)}
.ai-style-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:30px;padding:0 9px;border:0;border-radius:8px;background:transparent;color:var(--text-dim);font:600 .59rem var(--font-sans);white-space:nowrap;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.ai-style-btn .ic{width:13px;height:13px}.ai-style-btn:hover{color:var(--text)}.ai-style-btn.active{background:var(--surface);color:var(--green);box-shadow:0 2px 8px rgba(30,62,47,.1)}

.ai-think-btn{color:var(--text-dim)}.ai-think-btn>.ic{color:#8E6DB5}.ai-think-btn.on>.ic{color:#9874c3}
.msg-row{max-width:min(92%,880px)}
.msg.u .bubble{background:linear-gradient(150deg,#47725A,#294C3D);box-shadow:0 7px 24px rgba(41,76,61,.22)}
.msg.b .bubble:has(.noor-reply-card){padding:0;overflow:hidden;border-radius:8px 24px 24px 24px;background:var(--surface);border-color:color-mix(in srgb,var(--green) 18%,var(--border));box-shadow:0 16px 38px -28px rgba(29,62,47,.55)}
.msg.b .bubble:has(.noor-reply-card)::before{display:none}
.noor-reply-card{min-width:min(620px,66vw);background:linear-gradient(175deg,color-mix(in srgb,var(--green-dim) 35%,var(--surface)),var(--surface) 28%)}
.noor-reply-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,#315545,#47725A);color:#fff}
.noor-reply-mark{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.13);border-radius:11px;background:rgba(255,255,255,.1)}.noor-reply-mark .brand-mark{width:20px;height:20px}
.noor-reply-header>span:nth-child(2){display:flex;flex-direction:column;gap:2px}.noor-reply-header strong{font-size:.68rem;color:#fff}.noor-reply-header small{font:.52rem var(--font-mono);letter-spacing:.04em;color:rgba(255,255,255,.62)}
.noor-reply-mode{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.08);font:.53rem var(--font-mono);letter-spacing:.05em}.noor-reply-mode .ic{width:12px;height:12px;color:#E7BF72}
.noor-reply-content{padding:18px 19px 16px}.noor-reply-content>h2:first-child,.noor-reply-content>h3:first-child,.noor-reply-content>p:first-child{margin-top:0}
.noor-reply-content h2{color:var(--green);font-size:1.15rem}.noor-reply-content li::marker{color:var(--green)}
.noor-reply-content strong{color:color-mix(in srgb,var(--green) 78%,var(--text))}
.noor-reply-footer{display:flex;align-items:center;gap:7px;padding:10px 14px;border-top:1px solid var(--border);background:color-mix(in srgb,var(--green-dim) 45%,var(--surface));color:var(--text-light)}
.noor-reply-footer .ic{width:13px;height:13px;flex:0 0 13px;color:var(--green)}.noor-reply-footer span{font-size:.56rem;line-height:1.4}
.msg-meta{padding-left:42px}.msg-meta-btn.active{color:var(--green);background:var(--green-dim);border-color:color-mix(in srgb,var(--green) 22%,var(--border))}
.msg-react-btn[aria-label="Not helpful"].active{color:var(--red);background:var(--red-dim);border-color:rgba(184,64,64,.22)}
.ai-followup .ic,.chip .ic{color:var(--green)}.ai-followup:hover,.chip:hover{border-color:color-mix(in srgb,var(--green) 25%,var(--border));background:var(--green-dim);color:var(--green)}
.ai-send{background:linear-gradient(150deg,#5F8A70,#294C3D);box-shadow:0 6px 20px rgba(41,76,61,.3)}
.ai-send:hover:not(:disabled){box-shadow:0 8px 26px rgba(41,76,61,.38)}
.ai-ta:focus{border-color:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 10%,transparent)}
.streaming-caret{background:var(--green);box-shadow:0 0 6px rgba(71,114,90,.42)}

@media(max-width:700px){
  .ai-compose-tools{align-items:stretch;flex-direction:column;gap:7px;padding:8px 10px}.ai-style-label small{display:none}.ai-style-options{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.ai-style-btn{padding:0 5px}
  .noor-reply-card{min-width:0;width:100%}.msg.b .msg-row{max-width:100%;width:100%}.msg.b .bubble{min-width:0;max-width:calc(100vw - 66px)}
  .noor-reply-content{padding:16px 15px 14px}.noor-reply-footer{align-items:flex-start}
  .msg-meta{padding-left:42px;gap:3px}.msg-meta-btn,.msg-save{padding:5px 7px}.msg-time{width:100%;margin-bottom:1px}
}
@media(max-width:430px){
  .ai-style-btn{font-size:.55rem}.ai-style-btn .ic{width:12px;height:12px}
  .ai-think-btn .ai-think-copy{display:none}
  .noor-reply-header{padding:10px}.noor-reply-mode{padding:5px 7px}.noor-reply-content{font-size:.83rem;line-height:1.78}
  .msg-meta-btn,.msg-save{font-size:0;width:29px;height:29px;justify-content:center;padding:0}.msg-meta-btn .ic,.msg-save .ic{width:14px;height:14px}.msg-reactions{margin-left:1px}
}