/* My Life 3 — design system */
@font-face{font-family:Amiri;font-weight:400;font-display:swap;src:url(../fonts/amiri-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Cairo;font-weight:400;font-display:swap;src:url(../fonts/cairo-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E}
@font-face{font-family:Cairo;font-weight:600;font-display:swap;src:url(../fonts/cairo-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E}
@font-face{font-family:Cairo;font-weight:700;font-display:swap;src:url(../fonts/cairo-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E}
@font-face{font-family:Cairo;font-weight:800;font-display:swap;src:url(../fonts/cairo-arabic-800-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E}
@font-face{font-family:Cairo;font-weight:400;font-display:swap;src:url(../fonts/cairo-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Cairo;font-weight:600;font-display:swap;src:url(../fonts/cairo-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Cairo;font-weight:700;font-display:swap;src:url(../fonts/cairo-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Cairo;font-weight:800;font-display:swap;src:url(../fonts/cairo-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Baloo;font-weight:600;font-display:swap;src:url(../fonts/baloo-bhaijaan-2-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E}
@font-face{font-family:Baloo;font-weight:800;font-display:swap;src:url(../fonts/baloo-bhaijaan-2-arabic-800-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E}
@font-face{font-family:Baloo;font-weight:600;font-display:swap;src:url(../fonts/baloo-bhaijaan-2-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Baloo;font-weight:800;font-display:swap;src:url(../fonts/baloo-bhaijaan-2-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}

:root{
  --brand:#7C5CFA;--brand-2:#A48BFF;--brand-soft:#EFEAFF;
  --accent:#7C5CFA;--accent-2:#FF8A5B;--accent-soft:#EFEAFF;--accent-ink:#4B32C9;
  --bg:#FBF7F2;--bg-2:#F4EEE6;--surface:#FFFFFF;--surface-2:#F8F4EE;--ink:#2A2540;--ink-2:#5E5878;--ink-3:#9590A8;
  --line:#ECE5DB;--track:#EFE9E1;--mint:#2EB886;--mint-soft:#E3F7EF;--sun:#F7B731;--sun-soft:#FFF4D9;--coral:#FF6B5E;--coral-soft:#FFE9E6;--sky:#3D9BFF;--sky-soft:#E4F1FF;
  --shadow-sm:0 1px 2px rgba(42,37,64,.06),0 2px 8px rgba(42,37,64,.05);
  --shadow:0 2px 6px rgba(42,37,64,.05),0 12px 32px -8px rgba(42,37,64,.14);
  --shadow-lg:0 24px 60px -12px rgba(42,37,64,.28);
  --r-sm:12px;--r:20px;--r-lg:28px;--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --font:Cairo,system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;--font-head:Baloo,Cairo,system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  --tabbar-h:72px;
  color-scheme:light;
}
body[data-char=boy]{--accent:#3D8BFF;--accent-2:#22C1A9;--accent-soft:#E6F0FF;--accent-ink:#1F5FCC}
body[data-char=girl]{--accent:#F2669A;--accent-2:#FF9F6B;--accent-soft:#FFE8F0;--accent-ink:#C23C70}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#14121D;--bg-2:#1B1828;--surface:#211E30;--surface-2:#2A2640;--ink:#F3F0FA;--ink-2:#BDB7D3;--ink-3:#8A84A3;--line:#332E48;--track:#2E2A42;--brand-soft:#2C2550;--accent-soft:#2A2547;--mint-soft:#183A30;--sun-soft:#3A3018;--coral-soft:#40221F;--sky-soft:#1A2D45;--shadow:0 12px 32px -10px rgba(0,0,0,.6);--shadow-sm:0 2px 8px rgba(0,0,0,.35);color-scheme:dark}}
:root[data-theme=dark]{--bg:#14121D;--bg-2:#1B1828;--surface:#211E30;--surface-2:#2A2640;--ink:#F3F0FA;--ink-2:#BDB7D3;--ink-3:#8A84A3;--line:#332E48;--track:#2E2A42;--brand-soft:#2C2550;--accent-soft:#2A2547;--mint-soft:#183A30;--sun-soft:#3A3018;--coral-soft:#40221F;--sky-soft:#1A2D45;--shadow:0 12px 32px -10px rgba(0,0,0,.6);--shadow-sm:0 2px 8px rgba(0,0,0,.35);color-scheme:dark}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg)}
body{font-family:var(--font);color:var(--ink);font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.has-sheet{overflow:hidden}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.25;margin:0;font-weight:800;letter-spacing:-.01em}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent-ink)}
.i{width:22px;height:22px;flex:none}
.muted{color:var(--ink-2)}.small{font-size:13px}.tiny{font-size:12px;color:var(--ink-3)}
.hidden{display:none!important}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px;border-radius:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- splash ---------- */
.splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;align-content:center;gap:14px;background:radial-gradient(120% 80% at 50% 0%,#8C6BFF 0%,#5B3FD6 55%,#3B2A8F 100%);color:#fff;transition:opacity .45s var(--ease),visibility .45s}
.splash.hide{opacity:0;visibility:hidden}
.splash-logo{width:92px;height:92px;border-radius:30px;background:rgba(255,255,255,.14);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);animation:pop .7s var(--spring) both}
.splash-logo svg{width:62px;height:62px}
.splash-word{font-family:Baloo,Cairo,sans-serif;font-size:34px;font-weight:800;letter-spacing:.01em;animation:rise .6s .1s var(--ease) both}
.splash p{opacity:.8;margin:0;animation:rise .6s .2s var(--ease) both}
.splash-dots{display:flex;gap:6px;margin-top:8px}.splash-dots i{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.5;animation:dot 1s infinite}.splash-dots i:nth-child(2){animation-delay:.15s}.splash-dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{opacity:1;transform:translateY(-4px)}}
@keyframes pop{from{transform:scale(.6);opacity:0}}
@keyframes rise{from{transform:translateY(14px);opacity:0}}

/* ---------- app shell ---------- */
#app{min-height:100vh;min-height:100dvh}
.shell{display:block;min-height:100dvh}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:calc(10px + var(--safe-t)) 18px 10px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.topbar .tb-avatar{width:44px;height:44px;border-radius:16px;background:var(--accent-soft);overflow:hidden;border:none;padding:0;flex:none}
.topbar .tb-avatar svg{width:100%;height:100%}
.topbar h1{font-size:20px}
.topbar .tb-sub{font-size:12.5px;color:var(--ink-3);line-height:1.2}
.topbar .tb-title{flex:1;min-width:0}
.topbar .tb-title>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-sm);font-weight:800;font-size:14px;border:none}
.pill .i{width:18px;height:18px}
.pill.streak{color:#E8590C}.pill.streak .i{color:#FF7A1A}
.pill.level{color:var(--accent-ink)}
.icon-btn{width:40px;height:40px;border-radius:14px;border:none;background:var(--surface);display:grid;place-items:center;box-shadow:var(--shadow-sm);color:var(--ink);flex:none}
.icon-btn .i{width:20px;height:20px}
.icon-btn.flat{background:transparent;box-shadow:none}
.view{padding:6px 18px calc(var(--tabbar-h) + 104px + var(--safe-b));max-width:760px;margin:0 auto}
.view-enter>*{animation:enter .5s var(--ease) both}
.view-enter>*:nth-child(2){animation-delay:.04s}.view-enter>*:nth-child(3){animation-delay:.08s}.view-enter>*:nth-child(4){animation-delay:.12s}.view-enter>*:nth-child(5){animation-delay:.16s}.view-enter>*:nth-child(6){animation-delay:.2s}.view-enter>*:nth-child(n+7){animation-delay:.24s}
@keyframes enter{from{opacity:0;transform:translateY(16px)}}

/* tab bar */
.tabbar{position:fixed;inset-inline:12px;bottom:calc(10px + var(--safe-b));z-index:30;height:var(--tabbar-h);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:26px;box-shadow:var(--shadow-lg);padding:0 6px;max-width:560px;margin:0 auto}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;color:var(--ink-3);font-size:11.5px;font-weight:700;padding:8px 0;transition:color .2s}
.tab .i{width:24px;height:24px;transition:transform .35s var(--spring)}
.tab.on{color:var(--accent-ink)}
.tab.on .i{transform:translateY(-2px) scale(1.08)}
.tab.on::before{content:'';position:absolute;top:3px;width:46px;height:34px;border-radius:14px;background:var(--accent-soft);z-index:-1;animation:pop .35s var(--spring)}
.fab{position:fixed;z-index:31;inset-inline-end:22px;bottom:calc(var(--tabbar-h) + 24px + var(--safe-b));width:58px;height:58px;border-radius:20px;border:none;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--accent-2)));color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -8px color-mix(in srgb,var(--accent) 70%,transparent);transition:transform .25s var(--spring)}
.fab .i{width:28px;height:28px;stroke-width:2.6}
.fab:active{transform:scale(.92) rotate(90deg)}
.sidebar{display:none}

@media (min-width:980px){
  .shell{display:grid;grid-template-columns:260px 1fr}
  .sidebar{display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100dvh;padding:24px 16px;border-inline-end:1px solid var(--line);background:var(--surface)}
  .side-brand{display:flex;align-items:center;gap:10px;padding:6px 10px 18px;font-family:var(--font-head);font-weight:800;font-size:22px}
  .side-brand .logo{width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,#8C6BFF,#5B3FD6);display:grid;place-items:center}
  .side-brand .logo svg{width:28px;height:28px}
  .side-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:none;background:none;color:var(--ink-2);font-weight:700;text-align:start}
  .side-item:hover{background:var(--surface-2)}
  .side-item.on{background:var(--accent-soft);color:var(--accent-ink)}
  .side-add{margin-top:10px}
  .side-me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;background:var(--surface-2);border:none;text-align:start}
  .side-me svg.ch{width:44px;height:44px;border-radius:14px;background:var(--accent-soft)}
  .tabbar,.fab{display:none}
  .view{max-width:1080px;padding:8px 32px 60px}
  .topbar{padding:18px 32px 12px}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .grid-2>.card{margin:0}
}

/* ---------- cards & sections ---------- */
.card{background:var(--surface);border-radius:var(--r);padding:18px;box-shadow:var(--shadow-sm);margin-bottom:14px;position:relative}
.card.soft{background:var(--surface-2);box-shadow:none}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.card-h h3{font-size:17px}
.card-h .link{background:none;border:none;color:var(--accent-ink);font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;gap:2px;padding:4px}
.card-h .link .i{width:16px;height:16px}
.sec-title{display:flex;align-items:center;justify-content:space-between;margin:22px 4px 10px}
.sec-title h2{font-size:19px}
.grid-2{display:grid;gap:12px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{background:var(--surface);border-radius:18px;padding:12px;box-shadow:var(--shadow-sm);min-width:0}
.kpi small{display:block;color:var(--ink-3);font-size:12px;font-weight:700}
.kpi b{display:block;font-family:var(--font-head);font-size:20px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .i{width:18px;height:18px;margin-bottom:4px}
.kpi.mint .i{color:var(--mint)}.kpi.coral .i{color:var(--coral)}.kpi.sun .i{color:var(--sun)}.kpi.sky .i{color:var(--sky)}.kpi.accent .i{color:var(--accent)}
.note{display:flex;gap:10px;align-items:flex-start;background:var(--sun-soft);border-radius:16px;padding:12px 14px;font-size:13.5px;color:var(--ink-2);margin-bottom:14px}
.note .i{color:#C98A00;width:20px;height:20px;margin-top:2px}
.note.info{background:var(--sky-soft)}.note.info .i{color:var(--sky)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:16px;border:none;background:var(--surface-2);color:var(--ink);font-weight:800;font-size:15px;transition:transform .15s var(--ease),background .2s,box-shadow .2s;text-decoration:none;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn .i{width:20px;height:20px}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 10px 22px -10px color-mix(in srgb,var(--accent) 80%,transparent)}
.btn.brand{background:var(--brand);color:#fff}
.btn.ghost{background:transparent;color:var(--ink-2)}
.btn.outline{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.danger{background:var(--coral-soft);color:var(--coral)}
.btn.sm{min-height:38px;padding:0 14px;font-size:13.5px;border-radius:12px}
.btn.block{width:100%}
.btn[disabled]{pointer-events:none;background:var(--track);color:var(--ink-3);box-shadow:none}
.btn.loading[disabled]{background:var(--accent);color:#fff}
.btn.loading::after{content:'';width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-inline-end-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.row-actions{display:flex;gap:10px;margin-top:16px}.row-actions .btn{flex:1}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>label,.field>.lbl{font-weight:700;font-size:13.5px;color:var(--ink-2)}
.input,select.input,textarea.input{width:100%;min-height:50px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);outline:none;transition:border-color .2s,box-shadow .2s;font-size:16px}
textarea.input{min-height:96px;resize:vertical;line-height:1.6}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.input-row{display:flex;gap:10px}.input-row>*{flex:1;min-width:0}
.input-wrap{position:relative}
.input-wrap .suffix{position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-weight:700;font-size:13px;pointer-events:none}
.input.big{font-family:var(--font-head);font-size:30px;text-align:center;min-height:68px}
.hint{font-size:12.5px;color:var(--ink-3)}
.err{color:var(--coral);font-size:13px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 14px;border-radius:14px;background:var(--surface-2);border:1.5px solid transparent;font-weight:700;font-size:14px;cursor:pointer;transition:all .2s var(--ease);user-select:none}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip .i{width:18px;height:18px}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.chip:active{transform:scale(.96)}
.seg{display:flex;background:var(--surface-2);border-radius:16px;padding:4px;gap:4px;margin-bottom:14px}
.seg button{flex:1;min-height:40px;border:none;background:none;border-radius:12px;font-weight:800;color:var(--ink-3);font-size:14px;transition:all .25s var(--ease)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.switch{position:relative;width:52px;height:32px;flex:none}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch span{position:absolute;inset:0;border-radius:99px;background:var(--track);transition:.25s}
.switch span::after{content:'';position:absolute;top:4px;inset-inline-start:4px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:.3s var(--spring)}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span::after{inset-inline-start:24px}

/* ---------- lists ---------- */
.list{display:flex;flex-direction:column;gap:8px}
.item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),opacity .3s}
.card .item{box-shadow:none;background:var(--surface-2)}
.item .meta{flex:1;min-width:0}
.item .meta b{display:block;font-weight:700;line-height:1.45;word-break:break-word}
.item .meta small{display:flex;align-items:center;gap:6px;color:var(--ink-3);font-size:12.5px;flex-wrap:wrap}
.item .meta small .tag{display:inline-flex;align-items:center;gap:4px}
.item .meta small .dot{width:7px;height:7px;border-radius:50%}
.item.done .meta b{text-decoration:line-through;color:var(--ink-3)}
.item.overdue .meta small .when{color:var(--coral);font-weight:700}
.item .end{display:flex;gap:4px;align-items:center}
.item .ico{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:none}
.item .ico .i{width:20px;height:20px}
.check{width:32px;height:32px;border-radius:11px;border:2.2px solid var(--line);background:var(--surface);display:grid;place-items:center;flex:none;padding:0;color:#fff;transition:all .25s var(--spring)}
.check .i{width:18px;height:18px;stroke-width:3;opacity:0;transform:scale(.3);transition:all .3s var(--spring)}
.check.on{background:var(--mint);border-color:var(--mint)}
.check.on .i{opacity:1;transform:scale(1)}
.check.pop{animation:checkpop .45s var(--spring)}
@keyframes checkpop{40%{transform:scale(1.25)}}
.item.leaving{opacity:0;transform:translateX(calc(var(--dir,1) * 30px))}
.mini-btn{width:34px;height:34px;border-radius:11px;border:none;background:transparent;color:var(--ink-3);display:grid;place-items:center}
.mini-btn .i{width:18px;height:18px}
.mini-btn:hover{background:var(--surface-2)}

.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:20px 10px}
.empty svg.ch{width:110px;height:110px;margin-bottom:4px}
.empty b{font-size:16px}.empty p{color:var(--ink-2);font-size:14px;max-width:300px;margin-bottom:8px}

.ring{position:relative;display:inline-grid;place-items:center;flex:none}
.ring svg{position:absolute;inset:0;width:100%;height:100%}
.ring-val{transition:stroke-dashoffset 1.1s var(--ease)}
.ring-inner{position:relative;text-align:center;line-height:1.1}
.bar{height:10px;border-radius:99px;background:var(--track);overflow:hidden}
.bar i{display:block;height:100%;width:var(--w);border-radius:inherit;animation:grow 1s var(--ease) both}
@keyframes grow{from{width:0}}

/* ---------- sheet ---------- */
#layer{position:relative;z-index:60}
.sheet-wrap{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet-backdrop{position:absolute;inset:0;background:rgba(20,16,36,.42);opacity:0;transition:opacity .25s}
.sheet{position:relative;width:100%;max-width:620px;max-height:92dvh;overflow:auto;overscroll-behavior:contain;background:var(--surface);border-radius:28px 28px 0 0;padding:6px 20px calc(22px + var(--safe-b));transform:translateY(100%);transition:transform .38s var(--ease);box-shadow:var(--shadow-lg)}
.sheet-wrap.open .sheet-backdrop{opacity:1}.sheet-wrap.open .sheet{transform:none}
.sheet-wrap.closing .sheet{transition-duration:.22s}
.sheet-grip{width:44px;height:5px;border-radius:9px;background:var(--line);margin:6px auto 10px;touch-action:none;cursor:grab;padding:8px 0;background-clip:content-box;box-sizing:content-box}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.sheet-head h2{font-size:21px}.sheet-head p{color:var(--ink-2);font-size:14px;margin-top:2px}
.sheet-head .icon-btn{box-shadow:none;background:var(--surface-2)}
.sheet-wrap.full .sheet{height:100dvh;max-height:none;border-radius:0}
@media (min-width:700px){.sheet-wrap{align-items:center}.sheet{border-radius:28px;transform:translateY(30px) scale(.97);opacity:0;transition:transform .32s var(--ease),opacity .25s}.sheet-wrap.open .sheet{opacity:1}.sheet-grip{display:none}.sheet-wrap.full .sheet{height:auto;max-height:92dvh;border-radius:28px}}
.levelup .sheet{text-align:center;overflow:hidden}
.levelup-art svg{width:150px;height:200px;margin:0 auto;display:block}
.levelup-badge{width:56px;height:56px;margin:-14px auto 10px;border-radius:18px;background:linear-gradient(135deg,#FFD25E,#FF9F43);color:#fff;display:grid;place-items:center;box-shadow:0 10px 20px -8px #FF9F43;animation:pop .6s .2s var(--spring) both}
.levelup h2{font-size:26px;margin-bottom:6px}.levelup p{margin-bottom:18px}
.confirm .sheet-head{margin-bottom:6px}

/* toast */
.toast{position:fixed;z-index:90;left:50%;bottom:calc(var(--tabbar-h) + 28px + var(--safe-b));transform:translate(-50%,20px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:12px 18px;border-radius:16px;background:#2A2540;color:#fff;font-weight:700;font-size:14px;box-shadow:var(--shadow-lg);transition:all .3s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast .i{width:20px;height:20px;color:#7CE0B5}
.toast button{background:rgba(255,255,255,.14);border:none;color:#fff;border-radius:10px;padding:5px 12px;font-weight:800}
@media (min-width:980px){.toast{bottom:28px}}
.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:95}
.xp-float{position:fixed;z-index:96;transform:translate(-50%,0);font-family:var(--font-head);font-weight:800;color:var(--accent-ink);background:var(--surface);padding:2px 10px;border-radius:99px;box-shadow:var(--shadow);pointer-events:none;animation:xp 1.1s var(--ease) forwards;font-size:14px;direction:ltr}
@keyframes xp{0%{opacity:0;transform:translate(-50%,6px) scale(.7)}20%{opacity:1;transform:translate(-50%,-10px) scale(1.05)}100%{opacity:0;transform:translate(-50%,-48px)}}

/* tour */
.tour{position:fixed;inset:0;z-index:80}
.tour.closing{opacity:0;transition:opacity .2s}
.tour-hole{position:fixed;left:0;top:0;border-radius:20px;box-shadow:0 0 0 9999px rgba(20,16,36,.62);transition:transform .32s var(--ease),width .32s var(--ease),height .32s var(--ease);will-change:transform;pointer-events:none}
.tour-card{position:fixed;inset-inline:16px;max-width:420px;margin:0 auto;background:var(--surface);border-radius:24px;padding:16px;box-shadow:var(--shadow-lg);display:grid;grid-template-columns:64px 1fr;gap:4px 12px}
.tour-card{transition:top .32s var(--ease),opacity .18s}.tour-card.fading{opacity:0}body.touring{overflow:hidden}
.tour-char svg{width:64px;height:64px;border-radius:20px;background:var(--accent-soft)}
.tour-text b{font-family:var(--font-head);font-size:17px}.tour-text p{color:var(--ink-2);font-size:14px}
.tour-foot{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin-top:10px}
.tour-dots{flex:1;display:flex;gap:5px}.tour-dots i{width:7px;height:7px;border-radius:9px;background:var(--line);transition:all .3s}.tour-dots i.on{width:20px;background:var(--accent)}

/* ---------- character animation ---------- */
svg.ch{display:block;overflow:visible}
.ch-body{animation:breathe 3.4s ease-in-out infinite;transform-origin:100px 262px}
.ch-head{animation:tilt 6s ease-in-out infinite;transform-origin:100px 140px}
.ch-eyes{animation:blink 5s infinite;transform-origin:100px 100px}
.ch-arm-wave{animation:wave 1.4s ease-in-out infinite;transform-origin:132px 158px}
.ch-arm-cheer-l{animation:cheerL .9s ease-in-out infinite;transform-origin:68px 158px}
.ch-arm-cheer-r{animation:cheerR .9s ease-in-out infinite;transform-origin:132px 158px}
.ch-tails{animation:tails 3.4s ease-in-out infinite;transform-origin:100px 100px}
.ch-sparkles{animation:twinkle 1.6s ease-in-out infinite;transform-origin:100px 80px}
.ch-zz{animation:zz 2.4s ease-in-out infinite}
.ch.jump .ch-all,.ch.jump-loop .ch-all{animation:jump .8s var(--spring)}
.ch.jump-loop .ch-all{animation:jump 1.4s var(--spring) infinite}
.ch.walk .ch-all{animation:walk .5s ease-in-out infinite}
@keyframes breathe{50%{transform:translateY(-2.5px) scaleY(1.008)}}
@keyframes tilt{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-4deg)}88%{transform:rotate(3deg)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.08)}}
@keyframes wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-18deg)}}
@keyframes cheerL{0%,100%{transform:rotate(0)}50%{transform:rotate(12deg)}}
@keyframes cheerR{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
@keyframes tails{0%,100%{transform:rotate(0)}50%{transform:rotate(2.5deg)}}
@keyframes twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.92)}}
@keyframes zz{0%{opacity:0;transform:translateY(6px)}50%{opacity:.7}100%{opacity:0;transform:translateY(-10px)}}
@keyframes jump{0%{transform:translateY(0)}30%{transform:translateY(-26px) scale(1.02,.98)}55%{transform:translateY(0) scale(1.04,.94)}70%{transform:translateY(-6px)}100%{transform:translateY(0)}}
@keyframes walk{50%{transform:translateY(-4px) rotate(1.5deg)}}

/* ---------- auth ---------- */
.auth{min-height:100dvh;display:grid;place-items:center;padding:24px 18px calc(24px + var(--safe-b));background:radial-gradient(90% 60% at 50% -10%,color-mix(in srgb,var(--brand) 22%,transparent),transparent),var(--bg)}
.auth-card{width:100%;max-width:440px}
.auth-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.auth-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:800;font-size:22px}
.auth-brand .logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#8C6BFF,#5B3FD6);display:grid;place-items:center}.auth-brand .logo svg{width:28px;height:28px}
.auth-hero{display:flex;justify-content:center;gap:0;margin:8px 0 4px;height:190px}
.auth-hero svg{width:136px;height:190px}
.auth-hero svg:first-child{margin-inline-end:-18px}
.auth h1{font-size:27px;text-align:center}
.auth .lead{text-align:center;color:var(--ink-2);margin:6px 0 20px}
.g-btn{width:100%;min-height:52px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px}
.g-btn svg{width:22px;height:22px}
.divider{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:13px;margin:16px 0}.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}
.auth-switch{display:block;margin:14px auto 0;background:none;border:none;color:var(--accent-ink);font-weight:800}
.auth-msg{min-height:22px;text-align:center;margin-top:10px;font-size:14px;font-weight:700}
.auth-msg.err{color:var(--coral)}.auth-msg.ok{color:var(--mint)}
.auth-lock{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--ink-3);font-size:12.5px;margin-top:18px}
.auth-lock .i{width:16px;height:16px}
.pw-toggle{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%)}

/* ---------- onboarding journey ---------- */
.ob{min-height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto;padding:calc(14px + var(--safe-t)) 20px calc(20px + var(--safe-b))}
.ob-top{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.ob-progress{flex:1;height:10px;border-radius:99px;background:var(--track);overflow:hidden;position:relative}
.ob-progress i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .6s var(--ease)}
.ob-step{font-size:12.5px;font-weight:800;color:var(--ink-3);min-width:42px;text-align:center}
.ob-body{flex:1;display:flex;flex-direction:column;animation:enter .5s var(--ease) both}
.ob-body.back{animation-name:enterBack}
@keyframes enterBack{from{opacity:0;transform:translateY(-12px)}}
.ob-hero{display:flex;align-items:flex-end;gap:10px;margin:8px 0 14px}
.ob-hero svg.ch{width:100px;height:140px;flex:none}
.bubble{position:relative;background:var(--surface);border-radius:20px 20px 20px 6px;padding:12px 16px;box-shadow:var(--shadow-sm);font-weight:700;margin-bottom:34px;animation:pop .5s .15s var(--spring) both}
[dir=rtl] .bubble{border-radius:20px 20px 6px 20px}
.ob h1{font-size:25px;margin-bottom:6px}
.ob .lead{color:var(--ink-2);margin-bottom:18px}
.ob-foot{display:flex;gap:10px;margin:20px -20px 0;padding:18px 20px calc(4px + var(--safe-b));position:sticky;bottom:0;background:linear-gradient(to top,var(--bg) 72%,transparent);z-index:2}
.ob-foot .btn.primary{flex:1}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice{position:relative;display:flex;flex-direction:column;gap:6px;text-align:start;padding:14px;border-radius:20px;background:var(--surface);border:2px solid transparent;box-shadow:var(--shadow-sm);cursor:pointer;transition:all .25s var(--ease);min-height:96px}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice .ico{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff}
.choice .ico .i{width:21px;height:21px}
.choice b{font-size:15px;line-height:1.35}
.choice small{color:var(--ink-2);font-size:12.5px;line-height:1.5}
.choice .tick{position:absolute;top:10px;inset-inline-end:10px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;transform:scale(0);transition:transform .3s var(--spring)}
.choice .tick .i{width:15px;height:15px;stroke-width:3}
.choice.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 60%,var(--surface))}
.choice.on .tick{transform:scale(1)}
.choice:active{transform:scale(.97)}
.choice.wide{grid-column:1/-1;flex-direction:row;align-items:center;min-height:0}
.choice.wide .txt{flex:1}
.gender-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gender-card{position:relative;border:none;border-radius:26px;padding:12px 8px 14px;background:var(--surface);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;gap:4px;transition:all .3s var(--ease);outline:3px solid transparent}
.gender-card svg.ch{width:120px;height:168px}
.gender-card b{font-family:var(--font-head);font-size:18px}
.gender-card.boy{background:linear-gradient(180deg,#E6F0FF,var(--surface))}
.gender-card.girl{background:linear-gradient(180deg,#FFE8F0,var(--surface))}
:root[data-theme=dark] .gender-card.boy,:root[data-theme=dark] .gender-card.girl{background:var(--surface)}
.gender-card.on{outline-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow)}
.customizer{display:grid;gap:14px;margin-top:6px}
.cust-preview{display:flex;justify-content:center;background:radial-gradient(circle at 50% 70%,var(--accent-soft),transparent 70%);border-radius:28px;padding:6px}
.cust-preview svg.ch{width:150px;height:210px}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatch{width:40px;height:40px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 2px var(--line);padding:0;transition:transform .2s var(--spring)}
.swatch.on{box-shadow:0 0 0 3px var(--accent);transform:scale(1.08)}
.build{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px}
.build-path{position:relative;width:100%;max-width:340px;height:200px}
.build-path svg.route{position:absolute;inset:0;width:100%;height:100%}
.build-path .route-line{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2.6s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.build-path .walker{position:absolute;width:76px;height:106px;bottom:0;left:0;animation:trek 2.6s var(--ease) forwards}
.build-path .walker svg{width:100%;height:100%}
@keyframes trek{0%{left:0;bottom:0}50%{left:40%;bottom:34px}100%{left:calc(100% - 70px);bottom:92px}}
.build-list{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px;text-align:start;width:100%;max-width:320px}
.build-list li{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink-3);transition:color .3s}
.build-list li .check{width:26px;height:26px;border-radius:9px}
.build-list li.done{color:var(--ink)}
.slide-dots{display:flex;gap:6px;justify-content:center;margin:12px 0}.slide-dots i{width:8px;height:8px;border-radius:9px;background:var(--line);transition:all .3s}.slide-dots i.on{width:24px;background:var(--accent)}
.story{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px}
.story-art{position:relative;width:240px;height:240px;display:grid;place-items:center}
.story-art::before{content:'';position:absolute;inset:16px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 70%)}
.story-art svg.ch{position:relative;width:160px;height:224px}
.story-art .float{position:absolute;width:46px;height:46px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow);display:grid;place-items:center;animation:floaty 3s ease-in-out infinite}
.story-art .float .i{width:22px;height:22px}
.story-art .f1{top:24px;inset-inline-start:6px;color:var(--mint)}.story-art .f2{top:60px;inset-inline-end:0;color:var(--sun);animation-delay:.6s}.story-art .f3{bottom:40px;inset-inline-start:0;color:var(--coral);animation-delay:1.2s}
@keyframes floaty{50%{transform:translateY(-8px) rotate(4deg)}}
.story h1{font-size:26px}.story p{color:var(--ink-2);max-width:340px}

/* ---------- home ---------- */
.hero{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:18px;background:linear-gradient(135deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 55%,var(--accent-2)) 100%);color:#fff;display:flex;align-items:center;gap:12px;margin-bottom:14px;box-shadow:0 18px 40px -18px color-mix(in srgb,var(--accent) 80%,transparent)}
.hero::after{content:'';position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.1);inset-inline-end:-60px;top:-90px}
.hero-char{width:104px;height:146px;flex:none;position:relative;z-index:1;cursor:pointer;border:none;background:none;padding:0}
.hero-char svg{width:100%;height:100%}
.hero-text{flex:1;position:relative;z-index:1;min-width:0}
.hero-text .say{background:rgba(255,255,255,.18);border-radius:16px;padding:10px 12px;font-weight:700;font-size:14.5px;line-height:1.55;margin-bottom:10px}
.hero-text .say.pop{animation:pop .4s var(--spring)}
.hero-ring{display:flex;align-items:center;gap:10px}
.hero-ring .ring-inner b{font-family:var(--font-head);font-size:19px;color:#fff}
.hero-ring small{display:block;opacity:.85;font-size:12.5px}
.hero-ring strong{font-size:15px}
.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:14px}
.wday{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm);font-size:11.5px;font-weight:700;color:var(--ink-3)}
.wday b{font-size:15px;color:var(--ink);font-family:var(--font-head)}
.wday i{width:8px;height:8px;border-radius:50%;background:var(--track)}
.wday.act i{background:var(--mint)}
.wday.today{background:var(--accent);color:rgba(255,255,255,.85)}.wday.today b{color:#fff}.wday.today i{background:rgba(255,255,255,.5)}.wday.today.act i{background:#fff}
.mission{position:relative}
.mission .ico{color:#fff}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.quick button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:18px;border:none;background:var(--surface);box-shadow:var(--shadow-sm);font-weight:700;font-size:12.5px;color:var(--ink-2)}
.quick button span{width:42px;height:42px;border-radius:14px;display:grid;place-items:center}
.quick button .i{width:21px;height:21px}
.quick button:active{transform:scale(.95)}
.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow-sm);border:none;text-align:start;min-width:0}
.tile .i{width:22px;height:22px}
.tile b{font-family:var(--font-head);font-size:19px;line-height:1.2}
.tile small{color:var(--ink-3);font-size:12.5px;font-weight:700}
.tile .bar{height:7px;margin-top:4px}
.banner{display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;background:var(--accent-soft);margin-bottom:14px;border:none;width:100%;text-align:start}
.banner svg.ch{width:56px;height:56px;flex:none}
.banner b{display:block}.banner p{font-size:13.5px;color:var(--ink-2)}
.banner .i{width:20px;height:20px;color:var(--accent-ink)}
.banner .txt{flex:1}

/* plan */
.area-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 -18px 6px;padding-inline:18px;scrollbar-width:none}
.area-strip::-webkit-scrollbar{display:none}
.area-strip .chip{flex:none}
.group-label{font-size:13px;font-weight:800;color:var(--ink-3);margin:16px 6px 8px;display:flex;align-items:center;gap:6px}
.group-label .count{background:var(--surface-2);border-radius:99px;padding:0 8px;font-size:12px}
.habit-week{display:flex;gap:4px;margin-top:6px}
.habit-week button{width:28px;height:28px;border-radius:9px;border:none;background:var(--track);font-size:11px;font-weight:800;color:var(--ink-3);padding:0;display:grid;place-items:center}
.habit-week button.on{background:var(--mint);color:#fff}
.habit-week button.today{box-shadow:inset 0 0 0 2px var(--accent)}
.habit-count{font-family:var(--font-head);font-weight:800;color:var(--sun);display:inline-flex;align-items:center;gap:2px}
.habit-count .i{width:16px;height:16px}
.suggest{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.suggest button{border:1.5px dashed var(--line);background:none;border-radius:12px;padding:6px 12px;font-size:13px;font-weight:700;color:var(--ink-2);text-align:start}
.suggest button:active{background:var(--accent-soft)}

/* health */
.steps-card{display:flex;align-items:center;gap:16px}
.steps-card .ring-inner b{font-family:var(--font-head);font-size:22px;display:block}
.steps-card .ring-inner small{color:var(--ink-3);font-size:11.5px}
.steps-info{flex:1;min-width:0}
.steps-info h3{font-size:17px;margin-bottom:4px}
.water{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.water button{width:34px;height:42px;border:none;padding:0;background:none;color:var(--sky);opacity:.3;transition:all .25s var(--spring)}
.water button.on{opacity:1}
.water button:active{transform:scale(.9)}
.water svg{width:100%;height:100%}
.workout-today{display:flex;gap:14px;align-items:center}
.workout-today .ico{width:58px;height:58px;border-radius:20px;background:var(--coral-soft);color:var(--coral);display:grid;place-items:center;flex:none}
.workout-today .ico .i{width:28px;height:28px}
.week-plan{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:6px 0 10px}
.week-plan button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;border-radius:14px;border:none;background:var(--surface-2);font-size:11px;font-weight:700;color:var(--ink-3)}
.week-plan button .i{width:18px;height:18px}
.week-plan button.train{background:var(--coral-soft);color:var(--coral)}
.week-plan button.done{background:var(--mint);color:#fff}
.week-plan button.today{box-shadow:inset 0 0 0 2px var(--accent)}
.ex-list{display:grid;gap:8px}
.ex{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--surface-2)}
.ex .n{width:30px;height:30px;border-radius:10px;background:var(--surface);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.ex .meta{flex:1;min-width:0}.ex b{display:block;font-size:14.5px}.ex small{color:var(--ink-3);font-size:12.5px}
.ex a{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:800;text-decoration:none;white-space:nowrap}
.ex a .i{width:15px;height:15px}
.food-chips{display:flex;gap:8px;overflow-x:auto;margin:0 -18px 12px;padding:2px 18px 6px;scrollbar-width:none}
.food-chips::-webkit-scrollbar{display:none}
.food-chips button{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:92px;padding:10px 8px;border-radius:16px;border:none;background:var(--surface-2);font-size:12px;font-weight:700;color:var(--ink-2)}
.food-chips button span{font-size:22px;line-height:1.2}
.food-chips button small{color:var(--ink-3);font-weight:700;direction:ltr}
.cal-head{display:flex;align-items:center;gap:16px}
.cal-head .ring-inner b{font-family:var(--font-head);font-size:20px;display:block}
.cal-head .ring-inner small{font-size:11px;color:var(--ink-3)}
.macro{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1}
.macro div{background:var(--surface-2);border-radius:14px;padding:8px 10px}
.macro small{display:block;font-size:11.5px;color:var(--ink-3);font-weight:700}
.macro b{font-family:var(--font-head);font-size:16px}
/* workout player */
.player{display:flex;flex-direction:column;min-height:calc(100dvh - 120px);text-align:center}
.player-top{display:flex;justify-content:space-between;align-items:center;font-weight:800;color:var(--ink-3);font-size:13px}
.player-prog{height:8px;border-radius:9px;background:var(--track);overflow:hidden;margin:10px 0 20px}.player-prog i{display:block;height:100%;background:var(--accent);transition:width .4s var(--ease)}
.player h2{font-size:26px;margin-bottom:6px}
.player .big{font-family:var(--font-head);font-size:54px;font-weight:800;line-height:1;margin:14px 0 4px;direction:ltr}
.player .sets{display:flex;gap:8px;justify-content:center;margin:16px 0}
.player .sets i{width:14px;height:14px;border-radius:50%;background:var(--track)}.player .sets i.on{background:var(--mint)}
.player .stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.player .stage svg.ch{width:120px;height:168px}
.player .controls{display:grid;gap:10px;margin-top:16px}

/* money */
.money-hero{border-radius:var(--r-lg);padding:20px;background:linear-gradient(140deg,#2D2A4A 0%,#3E3670 100%);color:#fff;margin-bottom:14px;position:relative;overflow:hidden}
.money-hero::after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.06);inset-inline-start:-60px;bottom:-110px}
.money-hero .mh-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.month-nav{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border-radius:14px;padding:3px}
.month-nav button{width:32px;height:32px;border:none;border-radius:11px;background:none;color:#fff;display:grid;place-items:center}
.month-nav button .i{width:18px;height:18px}
.month-nav span{font-weight:800;font-size:13.5px;min-width:110px;text-align:center}
.money-hero small{opacity:.75;font-weight:700;font-size:13px}
.money-hero .left{font-family:var(--font-head);font-size:38px;font-weight:800;line-height:1.15;margin:2px 0 10px}
.money-hero .left.neg{color:#FF9C92}
.money-hero .bar{background:rgba(255,255,255,.14);height:10px}
.money-hero .mh-row{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-size:13px}
.money-hero .mh-row b{display:block;font-size:16px;font-family:var(--font-head)}
.money-hero .perday{margin-top:12px;background:rgba(255,255,255,.1);border-radius:14px;padding:10px 12px;font-size:13.5px;display:flex;align-items:center;gap:8px}
.money-hero .perday .i{width:18px;height:18px;color:#FFD25E}
.groups{display:grid;gap:10px}
.group{display:flex;align-items:center;gap:12px}
.group .ico{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;flex:none}
.group .ico .i{width:20px;height:20px}
.group .meta{flex:1;min-width:0}
.group .meta .top{display:flex;justify-content:space-between;gap:8px;font-weight:700;font-size:14px}
.group .meta .top span{color:var(--ink-3);font-size:12.5px}
.group .bar{height:8px;margin-top:6px;position:relative;overflow:visible}
.group .bar .mark{position:absolute;top:-3px;width:2px;height:14px;background:var(--ink-3);border-radius:2px}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:16px;border:2px solid transparent;background:var(--surface-2);font-size:12px;font-weight:700;text-align:center;line-height:1.3;cursor:pointer}
.cat input{position:absolute;opacity:0;pointer-events:none}
.cat span.ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;color:#fff}
.cat span.ic .i{width:18px;height:18px}
.cat.on{border-color:var(--accent);background:var(--accent-soft)}
.day-head{font-size:12.5px;font-weight:800;color:var(--ink-3);margin:14px 6px 6px;display:flex;justify-content:space-between}
.amount{font-family:var(--font-head);font-weight:800;white-space:nowrap}
.amount.in{color:var(--mint)}

/* me */
.profile{display:flex;align-items:center;gap:14px}
.profile .av{width:92px;height:92px;border-radius:28px;background:var(--accent-soft);border:none;padding:0;flex:none;position:relative;overflow:hidden}
.profile .av svg{width:100%;height:100%}
.profile .av .edit{position:absolute;bottom:4px;inset-inline-end:4px;width:26px;height:26px;border-radius:9px;background:var(--surface);display:grid;place-items:center;box-shadow:var(--shadow-sm);color:var(--ink)}
.profile .av .edit .i{width:14px;height:14px}
.profile h2{font-size:22px}
.profile .lv{display:flex;align-items:center;gap:6px;color:var(--accent-ink);font-weight:800;font-size:14px;margin:2px 0 8px}
.profile .lv .i{width:18px;height:18px}
.profile .meta{flex:1;min-width:0}
.journey-map{position:relative;padding:4px 0}
.station{display:flex;align-items:center;gap:14px;position:relative;padding:8px 0}
.station:not(:last-child)::after{content:'';position:absolute;inset-inline-start:23px;top:50px;bottom:-10px;width:3px;border-radius:3px;background:repeating-linear-gradient(to bottom,var(--line) 0 6px,transparent 6px 12px)}
.station.passed:not(:last-child)::after{background:var(--mint)}
.station .node{width:48px;height:48px;border-radius:17px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-3);flex:none;position:relative;z-index:1}
.station .node .i{width:22px;height:22px}
.station.passed .node{background:var(--mint);color:#fff}
.station.current .node{background:var(--accent);color:#fff;box-shadow:0 0 0 6px var(--accent-soft);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--accent-soft) 40%,transparent)}}
.station b{display:block}.station small{color:var(--ink-3);font-size:12.5px}
.station .you{width:44px;height:44px;margin-inline-start:auto}
.station .you svg{width:100%;height:100%}
.station.locked{opacity:.55}
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.badge{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:11.5px;font-weight:700;color:var(--ink-2);line-height:1.3}
.badge span{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-3)}
.badge span .i{width:24px;height:24px}
.badge.on span{background:linear-gradient(135deg,#FFD25E,#FF9F43);color:#fff;box-shadow:0 8px 18px -8px #FF9F43}
.badge:not(.on){opacity:.6}
.menu{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:14px}
.menu-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border:none;background:none;text-align:start;width:100%;font-weight:700;border-bottom:1px solid var(--line);color:var(--ink)}
.menu-item:last-child{border-bottom:none}
.menu-item .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none}
.menu-item .ico .i{width:19px;height:19px}
.menu-item .txt{flex:1;min-width:0}
.menu-item .txt small{display:block;color:var(--ink-3);font-weight:600;font-size:12.5px}
.menu-item>.i{color:var(--ink-3);width:18px;height:18px}
.menu-item.danger{color:var(--coral)}
[dir=rtl] .flip{transform:scaleX(-1)}
/* charts */
.chart{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:10px}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;border:none;background:none;padding:0;min-width:0}
.chart .col .b{width:100%;max-width:34px;border-radius:10px 10px 6px 6px;background:var(--accent-soft);position:relative;min-height:4px;transform-origin:bottom;animation:barup .8s var(--ease) both}
.chart .col.on .b{background:var(--accent)}
.chart .col small{font-size:11px;color:var(--ink-3);font-weight:700;white-space:nowrap}
.chart .col .v{font-size:11px;font-weight:800;color:var(--ink-2)}
@keyframes barup{from{transform:scaleY(0)}}
.line-chart svg{width:100%;height:130px;display:block}
.donut-row{display:flex;align-items:center;gap:16px}
.legend{display:grid;gap:6px;flex:1;font-size:13px}
.legend div{display:flex;align-items:center;gap:8px}
.legend i{width:10px;height:10px;border-radius:4px;flex:none}
.legend span{flex:1}
.lb{display:grid;gap:6px;padding:0;margin:0;list-style:none}
.lb li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--surface-2);font-weight:700}
.lb li .rk{width:28px;height:28px;border-radius:9px;background:var(--surface);display:grid;place-items:center;font-size:13px}
.lb li.me{background:var(--accent-soft)}
.lb li b{margin-inline-start:auto;font-family:var(--font-head)}
.lb li:nth-child(1) .rk{background:#FFD25E;color:#fff}.lb li:nth-child(2) .rk{background:#C8CDD8;color:#fff}.lb li:nth-child(3) .rk{background:#E7A26B;color:#fff}

.page-head{display:flex;align-items:center;gap:10px;margin:4px 0 14px}
.page-head h1{font-size:23px;flex:1}
.startup-error{min-height:100dvh;display:grid;place-items:center;padding:24px;text-align:center}
.startup-error svg.ch{width:120px;height:168px;margin:0 auto}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body.no-motion *,body.no-motion *::before,body.no-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
@media (max-width:370px){.quick{grid-template-columns:repeat(4,1fr);gap:6px}.kpi b{font-size:17px}.cat-grid{grid-template-columns:repeat(3,1fr)}.hero-char{width:86px;height:120px}}
[dir=ltr] .flip-ltr{transform:scaleX(-1)}
.main{min-width:0}
/* dark accents per character */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) body{--accent-soft:#2A2547;--accent-ink:#B9A6FF}:root:not([data-theme=light]) body[data-char=boy]{--accent-soft:#1B2A45;--accent-ink:#8DB8FF}:root:not([data-theme=light]) body[data-char=girl]{--accent-soft:#3A2033;--accent-ink:#FF9CC0}}
:root[data-theme=dark] body{--accent-soft:#2A2547;--accent-ink:#B9A6FF}
:root[data-theme=dark] body[data-char=boy]{--accent-soft:#1B2A45;--accent-ink:#8DB8FF}
:root[data-theme=dark] body[data-char=girl]{--accent-soft:#3A2033;--accent-ink:#FF9CC0}
:root[data-theme=dark] .toast{background:#F3F0FA;color:#2A2540}
/* ---------- interactive workout coach ---------- */
.howto{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.howto li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.55;font-weight:600}
.howto li span{flex:none;width:24px;height:24px;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-size:12.5px;font-weight:800}
details.ex{display:block;padding:0}
details.ex summary{display:flex;align-items:center;gap:12px;padding:10px 12px;list-style:none;cursor:pointer}
details.ex summary::-webkit-details-marker{display:none}
details.ex summary>.i{width:18px;height:18px;color:var(--ink-3);transition:transform .25s}
details.ex[open] summary>.i{transform:rotate(180deg)}
details.ex .howto{padding:4px 14px 10px}
details.ex .btn{margin:0 12px 12px;width:calc(100% - 24px)}
.player .stage{gap:4px}
.player .stage.learn{justify-content:flex-start}
.player .stage .btn{margin-top:12px}
.coach{width:116px;height:150px;margin:0 auto 4px}
.coach svg.ch{width:100%;height:100%}
.coach .ch-all{transform-origin:100px 264px;animation-duration:3s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.coach.mv-down .ch-all{animation-name:mvDown}
.coach.mv-up .ch-all{animation-name:mvUp}
.coach.mv-push .ch-all{animation-name:mvPush}
.coach.mv-pull .ch-all{animation-name:mvPull}
.coach.mv-hinge .ch-all{animation-name:mvHinge;transform-origin:100px 205px}
.coach.mv-hold .ch-all{animation-name:mvHold;animation-duration:.6s}
.coach.paused .ch-all{animation-play-state:paused}
@keyframes mvDown{0%,100%{transform:none}50%{transform:translateY(18px) scaleY(.88)}}
@keyframes mvUp{0%,100%{transform:none}50%{transform:translateY(-14px)}}
@keyframes mvPush{0%,100%{transform:none}50%{transform:translateX(-10px) rotate(-5deg)}}
@keyframes mvPull{0%,100%{transform:none}50%{transform:translateX(8px) rotate(4deg)}}
@keyframes mvHinge{0%,100%{transform:none}50%{transform:rotate(-16deg)}}
@keyframes mvHold{0%,100%{transform:none}50%{transform:translateX(1px)}}
[dir=rtl] .coach.mv-push .ch-all{animation-name:mvPushR}
@keyframes mvPushR{0%,100%{transform:none}50%{transform:translateX(10px) rotate(5deg)}}
.cue{font-family:var(--font-head);font-size:26px;font-weight:800;color:var(--accent-ink);min-height:42px;margin:8px 0 6px}
.cue.pop{animation:pop .35s var(--spring)}
.rep-btn{border:none;background:none;padding:0;border-radius:50%;cursor:pointer;transition:transform .12s}
.rep-btn:active{transform:scale(.94)}
.rep-btn .ring-inner b{font-family:var(--font-head);font-size:46px;display:block;line-height:1}
.rep-btn .ring-inner small{color:var(--ink-3);font-weight:700;font-size:13px}
.rep-btn .ring-val{transition:stroke-dashoffset .35s var(--ease)}
.auto-toggle{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:var(--ink-2);margin-top:12px;cursor:pointer}
.link-video{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-weight:800;font-size:13.5px;text-decoration:none;color:var(--accent-ink)}
.link-video .i{width:16px;height:16px}
.btn.glow{animation:glow 1.2s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 25%,transparent)}}
a.btn{text-decoration:none}
/* ---------- worship corner ---------- */
.faith-card .card-h h3{display:flex;align-items:center;gap:6px}.faith-card .card-h h3 .i{color:#2EAD7A;width:20px;height:20px}
.next-prayer{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;background:var(--mint-soft);border-radius:14px;padding:10px 12px;margin-bottom:10px}
.next-prayer span{font-size:12.5px;color:var(--ink-2);font-weight:700}.next-prayer b{font-family:var(--font-head);font-size:17px}.next-prayer small{color:var(--mint);font-weight:800;margin-inline-start:auto}
.prayer-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.pr{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border-radius:14px;border:none;background:var(--surface-2);font-size:12px;color:var(--ink-2)}
.pr span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3)}.pr span .i{width:18px;height:18px}
.pr b{font-size:12.5px}.pr small{font-size:11px;color:var(--ink-3);direction:ltr}
.pr.on{background:var(--mint-soft)}.pr.on span{background:var(--mint);color:#fff;animation:pop .35s var(--spring)}
.faith-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border-radius:var(--r-lg);padding:20px;margin-bottom:14px;color:#fff;background:linear-gradient(140deg,#1F7A5A,#2EAD7A 60%,#7FD1B2);box-shadow:0 18px 40px -18px #1F7A5A;position:relative;overflow:hidden}
.faith-hero::after{content:'';position:absolute;width:160px;height:160px;border-radius:50%;inset-inline-start:-40px;bottom:-80px;background:rgba(255,255,255,.1)}
.faith-hero small{opacity:.85;font-weight:700}.faith-hero h2{font-size:30px}.faith-hero b{font-family:var(--font-head);font-size:22px;display:block}.faith-hero span{opacity:.9;font-weight:700;font-size:14px}
.faith-hero .pill{background:rgba(255,255,255,.18);color:#fff;box-shadow:none;position:relative;z-index:1}
.pr-item small .i{width:14px;height:14px}
.pr-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px}
.pr-week div{display:flex;flex-direction:column;align-items:center;gap:4px}
.pr-week i{width:100%;max-width:30px;height:36px;border-radius:10px;background:linear-gradient(to top,var(--mint) var(--p),var(--track) var(--p))}
.pr-week small{font-size:11px;color:var(--ink-3);font-weight:700}.pr-week .today small{color:var(--accent-ink)}
.quran-row{display:flex;gap:14px;align-items:flex-start}
.quran-row .ring-inner b{font-family:var(--font-head);font-size:22px}.quran-row .ring-inner small{color:var(--ink-3);font-size:12px}
.stepper{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:14px;padding:4px}
.stepper span{flex:1;text-align:center;font-weight:700;font-size:13.5px}
.stepper button{width:40px;height:40px;border-radius:11px;border:none;background:var(--surface);display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.azkar-tile.done{background:var(--mint-soft)}.azkar-tile .i{color:#2EAD7A}
.azkar{display:flex;flex-direction:column;min-height:calc(100dvh - 120px);transition:opacity .18s}
.azkar.swap{opacity:0}
.zikr{flex:1;border:none;background:var(--surface-2);border-radius:24px;padding:22px 18px;margin:6px 0 14px;font-family:'Amiri','Traditional Arabic',var(--font);font-size:21px;line-height:2.05;color:var(--ink);text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s;overflow:auto}
.zikr:active{transform:scale(.985)}
.zikr-foot{display:flex;align-items:center;gap:14px}
.zikr-foot .ring-inner b{font-family:var(--font-head);font-size:26px;display:block;line-height:1}.zikr-foot .ring-inner small{font-size:11px;color:var(--ink-3)}
.zikr-actions{flex:1}
/* ---------- calendar ---------- */
.cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.cal-top b{font-family:var(--font-head);font-size:17px}
.cal-head,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-head span{font-size:12px;font-weight:800;color:var(--ink-3);padding:4px 0}
.cal-day{aspect-ratio:1/1.05;border:none;background:none;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0;color:var(--ink);font-weight:700}
.cal-day b{font-size:14.5px}
.cal-day .dots{display:flex;gap:2px;height:6px}.cal-day .dots i{width:6px;height:6px;border-radius:50%}
.cal-day .dots i.tr,.cal-legend i.tr{background:var(--coral);border-radius:2px;transform:rotate(45deg) scale(.85)}
.cal-day.today b{color:var(--accent-ink)}.cal-day.today{box-shadow:inset 0 0 0 2px var(--accent-soft)}
.cal-day.sel{background:var(--accent);color:#fff}.cal-day.sel b{color:#fff}.cal-day.sel .dots i{box-shadow:0 0 0 1.5px #fff}
.cal-day.late:not(.sel) b{color:var(--coral)}
.cal-legend{display:flex;gap:14px;align-items:center;margin-top:10px;font-size:12px;color:var(--ink-3);font-weight:700}
.cal-legend span{display:inline-flex;align-items:center;gap:5px}.cal-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}
.cal-legend .link{margin-inline-start:auto}
/* ---------- quit habits ---------- */
.quit-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.quit-top .ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;flex:none}
.quit-top b{display:block;font-size:16px}
.quit-main{display:flex;align-items:center;gap:14px}
.quit-main .ring-inner b{font-family:var(--font-head);font-size:34px;display:block;line-height:1}.quit-main .ring-inner small{font-size:12px;color:var(--ink-3);font-weight:700}
.quit-stats{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quit-stats div{background:var(--surface-2);border-radius:12px;padding:6px 10px;min-width:0}
.quit-stats small{display:block;font-size:11px;color:var(--ink-3);font-weight:700}.quit-stats b{font-family:var(--font-head);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.quit-why{display:flex;gap:8px;align-items:flex-start;background:var(--coral-soft);border-radius:14px;padding:10px 12px;margin-top:12px;font-size:14px}
.quit-why .i{color:var(--coral);width:18px;height:18px;margin-top:3px}
svg.ch.quit-av{width:96px;height:96px;margin:0 auto}
.breath{display:grid;place-items:center;height:250px}
.breath-circle{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#9EE7CE,#2EB886);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 0 14px rgba(46,184,134,.14),0 0 0 30px rgba(46,184,134,.07);transition:transform 4s ease-in-out}
.breath-circle.in{transform:scale(1.65)}.breath-circle.hold{transform:scale(1.65)}.breath-circle.out{transform:scale(1)}.breath-circle.done{transform:scale(1.2)}
.breath-circle b{font-family:var(--font-head);font-size:19px}.breath-circle small{font-weight:800;opacity:.85}

.choice .txt small{display:block}
/* ---------- my day ---------- */
.day-card{display:block;width:100%;border:none;text-align:start;padding:14px 16px}
.dc-row{display:flex;align-items:center;gap:12px}
.dc-row .ico{width:44px;height:44px;border-radius:14px;background:var(--sky-soft);color:var(--sky);display:grid;place-items:center;flex:none}
.dc-row small{display:block;color:var(--ink-3);font-weight:700;font-size:12px}.dc-row b{font-size:16px}
.dc-next{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--ink-2)}
.dc-next .i{width:16px;height:16px;color:var(--accent-ink)}.dc-next em{font-style:normal;color:var(--ink-3)}
.timeline{position:relative;padding-inline-start:4px;margin-bottom:6px}
.tl{position:relative;display:grid;grid-template-columns:64px 34px 1fr auto;align-items:start;gap:8px;padding:8px 0}
.tl::before{content:'';position:absolute;top:40px;bottom:-10px;inset-inline-start:calc(64px + 8px + 16px);width:2px;background:var(--line)}
.tl:last-child::before{display:none}
.tl time{font-size:12.5px;font-weight:800;color:var(--ink-3);padding-top:6px;white-space:nowrap}
.tl .dot{width:34px;height:34px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow-sm);display:grid;place-items:center;color:var(--accent-ink);position:relative;z-index:1}
.tl .dot .i{width:17px;height:17px}
.tl-body{background:var(--surface);border-radius:16px;padding:10px 12px;box-shadow:var(--shadow-sm);min-width:0}
.tl-body b{display:block;font-size:14.5px}.tl-body small{display:block;color:var(--ink-2);font-size:12.5px;line-height:1.55;margin-top:2px}
.tl-body em{display:inline-block;margin-top:6px;font-style:normal;font-size:11.5px;font-weight:800;color:#fff;background:var(--accent);border-radius:99px;padding:1px 10px}
.tl .check,.tl .mini-btn{margin-top:4px}
.tl.past{opacity:.55}.tl.past .tl-body{box-shadow:none;background:var(--surface-2)}
.tl.cur .dot{background:var(--accent);color:#fff;box-shadow:0 0 0 5px var(--accent-soft)}
.tl.cur .tl-body{box-shadow:0 0 0 2px var(--accent),var(--shadow-sm)}
.tl.g-family .dot{color:#FF6F91}.tl.g-sleep .dot{color:#5B5AA8}.tl.g-prayer .dot{color:#2EAD7A}
.tl.g-prayer .tl-body{background:var(--mint-soft);box-shadow:none;padding:6px 12px}
.sleep-hero{display:flex;align-items:center;justify-content:space-around;gap:10px;border-radius:var(--r-lg);padding:18px;margin-bottom:14px;color:#fff;background:linear-gradient(140deg,#24224A,#3F3A8C 60%,#6E63D9);box-shadow:0 18px 40px -18px #24224A}
.sleep-hero>.i{width:34px;height:34px;color:#FFD25E}
.sleep-hero small{display:block;opacity:.75;font-weight:700;font-size:12.5px;text-align:center}.sleep-hero b{font-family:var(--font-head);font-size:28px;display:block;text-align:center}
.card.ask{background:var(--sun-soft);box-shadow:none;text-align:center}.card.ask b{font-size:16px}
.sleep-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.sleep-week div{display:flex;flex-direction:column;align-items:center;gap:4px}
.sleep-week i{width:32px;height:32px;border-radius:11px;background:var(--track);display:grid;place-items:center;color:#fff}
.sleep-week i .i{width:16px;height:16px;stroke-width:3}
.sleep-week i.ok{background:var(--mint)}.sleep-week i.no{background:var(--coral-soft);color:var(--coral)}
.sleep-week small{font-size:11px;color:var(--ink-3);font-weight:700}.sleep-week .today small{color:var(--accent-ink)}
.tips{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tips li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.6}
.tips li .i{width:18px;height:18px;color:var(--accent-ink);flex:none;margin-top:3px}
.fam-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fam-head b{display:block}.fam-head small{color:var(--ink-2);font-size:13px}
.card-h h3 .i{width:18px;height:18px;vertical-align:-3px}
/* ---------- bills ---------- */
.bill-row{align-items:center}
.bill-row .meta small{gap:4px}
.tag.ok{color:var(--mint);font-weight:800}.tag.ok .i{width:14px;height:14px}
.tag.late{color:var(--coral);font-weight:800}
.bill-row .btn.sm{min-height:34px;padding:0 12px}
.cal-day .dots i.mo,.cal-legend i.mo{background:#2EAD7A;border-radius:2px}
.money-hero .mh-row{flex-wrap:wrap}.money-hero .mh-row>div{min-width:22%}
.toast{width:max-content}
.today-food{background:var(--surface-2);border-radius:16px;padding:10px 12px;margin-bottom:14px}
.tf-h{display:flex;justify-content:space-between;margin-bottom:6px;font-size:14px}.tf-h span{color:var(--ink-3);font-weight:800;direction:ltr}
.tf-row{display:flex;align-items:center;gap:8px;padding:4px 0;border-top:1px solid var(--line);font-size:14px}
.tf-row span{flex:1;min-width:0}.tf-row small{color:var(--ink-3);font-weight:700}
.mini-btn.danger-ic{color:var(--coral)}
.ch-hero{border-radius:var(--r-lg);padding:18px;margin-bottom:14px;color:#fff;background:linear-gradient(140deg,#1F9E74,#22C1A9);box-shadow:0 18px 40px -18px #1F9E74}
.ch-hero-top{display:flex;justify-content:space-between;align-items:flex-start}
.ch-hero small{opacity:.85;font-weight:700;font-size:12.5px;display:block}.ch-hero b{font-family:var(--font-head);font-size:34px;line-height:1.2}
.ch-rank{background:rgba(255,255,255,.18);border-radius:16px;padding:6px 14px;text-align:center}.ch-rank b{font-size:24px}
.ch-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;height:90px;margin-top:12px;align-items:end}
.ch-bars div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%}
.ch-bars i{width:100%;max-width:26px;border-radius:8px;background:rgba(255,255,255,.4)}.ch-bars .today i{background:#fff}
.ch-bars small{font-size:11px}
.ch-me{display:flex;align-items:center;gap:12px}.ch-me .ico{width:44px;height:44px;border-radius:14px;background:var(--sun-soft);color:#C98A00;display:grid;place-items:center}
.ch-me b{display:block}
.ch-join{display:flex;gap:8px}.ch-join .input{flex:1;min-width:0}
/* ---------- vault lock ---------- */
.vault-intro{text-align:center}.vault-intro h2{font-size:21px;margin:6px 0}.vault-intro .list{text-align:start}
.lock{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:6px 0 10px}
.lock-ic{width:64px;height:64px;border-radius:22px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;margin-bottom:4px}
.lock-ic .i{width:28px;height:28px}
.lock h2{font-size:20px}.lock .err{min-height:20px}
.lock.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pin-dots{display:flex;gap:14px;margin:12px 0 2px;direction:ltr}
.pin-dots i{width:15px;height:15px;border-radius:50%;border:2px solid var(--ink-3);transition:all .15s}
.pin-dots i.on{background:var(--accent);border-color:var(--accent);transform:scale(1.1)}
.pin-pad{display:grid;grid-template-columns:repeat(3,72px);gap:14px 26px;margin-top:6px;direction:ltr}
.pin-pad span{display:block}
.pin-pad button{width:72px;height:72px;border-radius:50%;border:none;background:var(--surface-2);font-family:var(--font-head);font-size:28px;font-weight:800;color:var(--ink);display:grid;place-items:center;transition:transform .1s,background .2s}
.pin-pad button:active{transform:scale(.92);background:var(--accent-soft)}
.pin-pad button .i{width:26px;height:26px}
.pin-pad button[data-bio]{color:var(--accent-ink);background:var(--accent-soft)}
.pattern{position:relative;width:min(300px,78vw);aspect-ratio:1;margin:10px auto 14px;touch-action:none;direction:ltr;user-select:none}
.pattern .pat-lines{position:absolute;inset:0;width:100%;height:100%}
.pattern polyline{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.pn{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;display:grid;place-items:center}
.pn i{width:18px;height:18px;border-radius:50%;background:var(--ink-3);transition:all .15s}
.pn.on i{width:26px;height:26px;background:var(--accent);box-shadow:0 0 0 10px var(--accent-soft)}
/* new logo */
.ml-logo{display:block;width:100%;height:100%}
.splash-logo{background:none;box-shadow:0 20px 50px -14px rgba(0,0,0,.45);border-radius:28px;width:104px;height:104px;overflow:hidden}
.splash-logo svg{width:100%;height:100%}
.side-brand .logo,.auth-brand .logo{background:none;overflow:hidden;border-radius:12px}
.side-brand .logo svg,.auth-brand .logo svg{width:100%;height:100%}
/* ---------- welcome (before sign-in) ---------- */
.welcome{min-height:100dvh;max-width:460px;margin:0 auto;padding:calc(30px + var(--safe-t)) 22px calc(24px + var(--safe-b));display:flex;flex-direction:column;align-items:center;text-align:center;background:radial-gradient(90% 50% at 50% 0%,color-mix(in srgb,var(--brand) 16%,transparent),transparent)}
.wl-logo{width:116px;height:116px;border-radius:32px;overflow:hidden;box-shadow:0 22px 50px -16px rgba(62,42,158,.55);margin-top:24px;animation:pop .7s var(--spring) both}
.wl-word{font-family:Baloo,Cairo,sans-serif;font-weight:800;font-size:34px;margin-top:14px;animation:rise .6s .1s var(--ease) both}
.wl-tag{color:var(--ink-2);font-weight:700;margin:2px 0 34px;animation:rise .6s .2s var(--ease) both}.wl-tag span{font-size:13px;color:var(--ink-3);font-weight:600}
.welcome h2{font-size:19px;margin-bottom:14px}
.wl-sub{color:var(--ink-2);margin:-6px 0 18px}
.wl-langs{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-bottom:22px}
.wl-lang{border:2px solid transparent;border-radius:22px;background:var(--surface);box-shadow:var(--shadow-sm);padding:18px 10px;display:flex;flex-direction:column;gap:2px;align-items:center;transition:all .25s var(--ease)}
.wl-lang b{font-family:var(--font-head);font-size:22px}.wl-lang small{color:var(--ink-3);font-weight:700}
.wl-lang.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand-soft) 60%,var(--surface));transform:translateY(-2px)}
.welcome .btn.block{margin-top:auto}
.wl-top{display:flex;align-items:center;justify-content:space-between;width:100%}
.wl-mini{width:46px;height:46px;border-radius:14px;overflow:hidden}
.welcome .gender-pick{width:100%}
.auth-hero svg{width:150px;height:190px}

/* ---------- themes inspired by planner covers ---------- */
body[data-skin=night]{--accent:#E9B949;--accent-2:#8C7CFF;--accent-soft:#2D2A55;--accent-ink:#F5CF6B;--brand:#E9B949;--brand-soft:#2D2A55;--bg:#12142B;--bg-2:#181A36;--surface-2:#262A52;--line:#2F3366;--track:#2A2D58;--skin-pat:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27120%27%20height%3D%27120%27%3E%3Cg%20fill%3D%27%23ffffff%27%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2718%27%20r%3D%271.6%27/%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2740%27%20r%3D%271.2%27/%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%2794%27%20r%3D%271.8%27/%3E%3Ccircle%20cx%3D%2734%27%20cy%3D%2786%27%20r%3D%271%27/%3E%3Cpath%20d%3D%27M88%2010%20l2.4%206%206%202.4-6%202.4-2.4%206-2.4-6-6-2.4%206-2.4z%27/%3E%3Cpath%20d%3D%27M40%2050%20l1.6%204%204%201.6-4%201.6-1.6%204-1.6-4-4-1.6%204-1.6z%27/%3E%3C/g%3E%3Cpath%20d%3D%27M18%20104%20a10%2010%200%201%200%2010-12%20a8%208%200%201%201-10%2012z%27%20fill%3D%27%23FFD25E%27/%3E%3C/svg%3E");--surface:#1D2040;--ink:#F3F1FF;--ink-2:#BEBBE0;--ink-3:#8A87B5;--mint-soft:#173A36;--sun-soft:#3A3420;--coral-soft:#40232A;--sky-soft:#1C2C4A;--shadow:0 12px 32px -10px rgba(0,0,0,.6);--shadow-sm:0 2px 8px rgba(0,0,0,.35);color-scheme:dark}
body[data-skin=space]{--accent:#7B4FE0;--accent-2:#FF6FA3;--accent-soft:#EEE6FF;--accent-ink:#5A33C2;--brand:#7B4FE0;--brand-soft:#EEE6FF;--bg:#F6F2FF;--bg-2:#EEE8FF;--surface-2:#F3EEFF;--line:#E4DAFB;--track:#E9E1FB;--skin-pat:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27140%27%20height%3D%27140%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272%27%3E%3Ccircle%20cx%3D%2736%27%20cy%3D%2740%27%20r%3D%2714%27/%3E%3Cellipse%20cx%3D%2736%27%20cy%3D%2740%27%20rx%3D%2726%27%20ry%3D%277%27%20transform%3D%27rotate%28-20%2036%2040%29%27/%3E%3Ccircle%20cx%3D%27108%27%20cy%3D%27104%27%20r%3D%279%27/%3E%3C/g%3E%3Cg%20fill%3D%27%23ffffff%27%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%2726%27%20r%3D%272%27/%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%27112%27%20r%3D%271.6%27/%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2778%27%20r%3D%271.4%27/%3E%3Cpath%20d%3D%27M120%2060%20l2%205%205%202-5%202-2%205-2-5-5-2%205-2z%27/%3E%3C/g%3E%3Cpath%20d%3D%27M60%20120%20l30-18%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) body[data-skin=space]{--bg:#15131D;--bg-2:#1B1828;--surface-2:#2A2640;--line:#332E48;--track:#2E2A42;--accent-soft:color-mix(in srgb,#7B4FE0 26%,#211E30);--accent-ink:color-mix(in srgb,#7B4FE0 55%,#fff)}}
:root[data-theme=dark] body[data-skin=space]{--bg:#15131D;--bg-2:#1B1828;--surface-2:#2A2640;--line:#332E48;--track:#2E2A42;--accent-soft:color-mix(in srgb,#7B4FE0 26%,#211E30);--accent-ink:color-mix(in srgb,#7B4FE0 55%,#fff)}
body[data-skin=floral]{--accent:#9A2F4F;--accent-2:#5E9C76;--accent-soft:#F8E6EA;--accent-ink:#7E2140;--brand:#9A2F4F;--brand-soft:#F8E6EA;--bg:#FBF5F1;--bg-2:#F6ECE6;--surface-2:#F8F0EC;--line:#EEDFD8;--track:#F0E3DC;--skin-pat:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27130%27%20height%3D%27130%27%3E%3Cg%20fill%3D%27%23ffffff%27%3E%3Cpath%20d%3D%27M30%2030%20c10-18%2030-18%2034-12%20c-6%2016-24%2020-34%2012z%27/%3E%3Cpath%20d%3D%27M30%2030%20c-4-20%206-34%2012-34%20c6%2014%200%2030-12%2034z%27%20transform%3D%27rotate%2840%2030%2030%29%27/%3E%3Ccircle%20cx%3D%2796%27%20cy%3D%2792%27%20r%3D%276%27/%3E%3Ccircle%20cx%3D%27106%27%20cy%3D%2786%27%20r%3D%275%27/%3E%3Ccircle%20cx%3D%2788%27%20cy%3D%2784%27%20r%3D%275%27/%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%27102%27%20r%3D%275%27/%3E%3Ccircle%20cx%3D%2786%27%20cy%3D%2798%27%20r%3D%274%27/%3E%3C/g%3E%3Cpath%20d%3D%27M10%20120%20c20-30%2040-30%2060-24%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272%27/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) body[data-skin=floral]{--bg:#15131D;--bg-2:#1B1828;--surface-2:#2A2640;--line:#332E48;--track:#2E2A42;--accent-soft:color-mix(in srgb,#9A2F4F 26%,#211E30);--accent-ink:color-mix(in srgb,#9A2F4F 55%,#fff)}}
:root[data-theme=dark] body[data-skin=floral]{--bg:#15131D;--bg-2:#1B1828;--surface-2:#2A2640;--line:#332E48;--track:#2E2A42;--accent-soft:color-mix(in srgb,#9A2F4F 26%,#211E30);--accent-ink:color-mix(in srgb,#9A2F4F 55%,#fff)}
body[data-skin=ocean]{--accent:#169FB1;--accent-2:#FF6B5E;--accent-soft:#DFF5F7;--accent-ink:#0E7C8C;--brand:#169FB1;--brand-soft:#DFF5F7;--bg:#F1FAFA;--bg-2:#E5F5F6;--surface-2:#EEF8F9;--line:#D6EEF0;--track:#DCF0F2;--skin-pat:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27140%27%20height%3D%27120%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M0%2030%20q17-12%2035%200%20t35%200%20t35%200%20t35%200%27/%3E%3Cpath%20d%3D%27M0%2090%20q17-12%2035%200%20t35%200%20t35%200%20t35%200%27/%3E%3C/g%3E%3Cg%20fill%3D%27%23ffffff%27%3E%3Cpath%20d%3D%27M100%2054%20l3%208%208%201-6%206%202%208-7-4-7%204%202-8-6-6%208-1z%27/%3E%3Cpath%20d%3D%27M30%2060%20c0-10%2016-10%2016%200%20c0%206-8%2010-8%2010%20s-8-4-8-10z%27/%3E%3C/g%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) body[data-skin=ocean]{--bg:#15131D;--bg-2:#1B1828;--surface-2:#2A2640;--line:#332E48;--track:#2E2A42;--accent-soft:color-mix(in srgb,#169FB1 26%,#211E30);--accent-ink:color-mix(in srgb,#169FB1 55%,#fff)}}
:root[data-theme=dark] body[data-skin=ocean]{--bg:#15131D;--bg-2:#1B1828;--surface-2:#2A2640;--line:#332E48;--track:#2E2A42;--accent-soft:color-mix(in srgb,#169FB1 26%,#211E30);--accent-ink:color-mix(in srgb,#169FB1 55%,#fff)}
body[data-skin=islamic]{--accent:#26357A;--accent-2:#F2A13B;--accent-soft:#E5E9F8;--accent-ink:#1E2B66;--brand:#26357A;--brand-soft:#E5E9F8;--bg:#F7F4EC;--bg-2:#EFEADC;--surface-2:#F4F0E6;--line:#E6DFCD;--track:#EAE3D2;--skin-pat:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2780%27%20height%3D%2780%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271.6%27%3E%3Crect%20x%3D%2722%27%20y%3D%2722%27%20width%3D%2736%27%20height%3D%2736%27/%3E%3Crect%20x%3D%2722%27%20y%3D%2722%27%20width%3D%2736%27%20height%3D%2736%27%20transform%3D%27rotate%2845%2040%2040%29%27/%3E%3Ccircle%20cx%3D%2740%27%20cy%3D%2740%27%20r%3D%278%27/%3E%3Cpath%20d%3D%27M0%200%20L22%2022%20M80%200%20L58%2022%20M0%2080%20L22%2058%20M80%2080%20L58%2058%27/%3E%3C/g%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) body[data-skin=islamic]{--bg:#15131D;--bg-2:#1B1828;--surface-2:#2A2640;--line:#332E48;--track:#2E2A42;--accent-soft:color-mix(in srgb,#26357A 26%,#211E30);--accent-ink:color-mix(in srgb,#26357A 55%,#fff)}}
:root[data-theme=dark] body[data-skin=islamic]{--bg:#15131D;--bg-2:#1B1828;--surface-2:#2A2640;--line:#332E48;--track:#2E2A42;--accent-soft:color-mix(in srgb,#26357A 26%,#211E30);--accent-ink:color-mix(in srgb,#26357A 55%,#fff)}
body[data-skin=idea]{--accent:#1DAFC1;--accent-2:#FFB93E;--accent-soft:#DDF5F8;--accent-ink:#0F8696;--brand:#1DAFC1;--brand-soft:#DDF5F8;--bg:#F3FBFC;--bg-2:#E6F6F8;--surface-2:#EEF8FA;--line:#D5EEF1;--track:#DBF0F3;--skin-pat:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27130%27%20height%3D%27130%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M40%2052%20a16%2016%200%201%201%2020%200%20v8%20h-20z%27/%3E%3Cpath%20d%3D%27M43%2066%20h14%20M45%2071%20h10%27/%3E%3Cpath%20d%3D%27M50%2022%20v-8%20M28%2030%20l-6-6%20M72%2030%20l6-6%27/%3E%3C/g%3E%3Cg%20fill%3D%27%23ffffff%27%3E%3Cpath%20d%3D%27M100%2090%20c-2-14%2014-22%2020-14%20c-8%202-12%208-20%2014z%27/%3E%3Cpath%20d%3D%27M100%2090%20c-14-4-16-20-6-22%20c0%208%204%2014%206%2022z%27/%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%27110%27%20r%3D%272%27/%3E%3Ccircle%20cx%3D%27112%27%20cy%3D%2730%27%20r%3D%272%27/%3E%3C/g%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) body[data-skin=idea]{--bg:#15131D;--bg-2:#1B1828;--surface-2:#2A2640;--line:#332E48;--track:#2E2A42;--accent-soft:color-mix(in srgb,#1DAFC1 26%,#211E30);--accent-ink:color-mix(in srgb,#1DAFC1 55%,#fff)}}
:root[data-theme=dark] body[data-skin=idea]{--bg:#15131D;--bg-2:#1B1828;--surface-2:#2A2640;--line:#332E48;--track:#2E2A42;--accent-soft:color-mix(in srgb,#1DAFC1 26%,#211E30);--accent-ink:color-mix(in srgb,#1DAFC1 55%,#fff)}
body[data-skin] .hero,body[data-skin] .money-hero,body[data-skin] .faith-hero,body[data-skin] .sleep-hero,body[data-skin] .ch-hero,body[data-skin] .tour-card .tour-char{isolation:isolate}
body[data-skin] .hero::before,body[data-skin] .money-hero::before,body[data-skin] .sleep-hero::before,body[data-skin] .faith-hero::before,body[data-skin] .ch-hero::before{content:'';position:absolute;inset:0;background:var(--skin-pat);opacity:.16;z-index:-1;pointer-events:none;border-radius:inherit}
body[data-skin] .money-hero,body[data-skin] .sleep-hero,body[data-skin] .faith-hero,body[data-skin] .ch-hero{position:relative;overflow:hidden}
body[data-skin] .money-hero{background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 70%,#111),color-mix(in srgb,var(--accent) 88%,#000 0%))}
body[data-skin] .topbar{background:color-mix(in srgb,var(--bg) 88%,transparent)}
body[data-skin]::after{content:'';position:fixed;inset:0;background:var(--skin-pat);opacity:.045;pointer-events:none;z-index:0;filter:invert(1)}
body[data-skin=night]::after{filter:none;opacity:.08}
body[data-skin] #app{position:relative;z-index:1}
body[data-skin=night] .hero{background:linear-gradient(140deg,#2B2E6B,#4B3F9E 60%,#6E58C9)}
body[data-skin=night] .hero .say{background:rgba(255,255,255,.12)}
body[data-skin=night] .gender-card.boy,body[data-skin=night] .gender-card.girl{background:var(--surface)}
body[data-skin=night] .toast{background:#F3F1FF;color:#1D2040}
.skin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.skin{border:2px solid transparent;border-radius:18px;padding:0;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-sm);text-align:start;cursor:pointer}
.skin .sw{display:block;height:62px;position:relative;background-size:auto 100%}
.skin .sw::after{content:'';position:absolute;inset:0;background:var(--p);opacity:.35}
.skin b{display:block;font-size:13px;padding:6px 10px 8px}
.skin.on{border-color:var(--accent);transform:translateY(-2px)}
.skin[data-skin=default] .sw{background:linear-gradient(135deg,#7C5CFA,#FF8A5B)}
.skin[data-skin=night] .sw{background:linear-gradient(135deg,#E9B949,#8C7CFF);--p:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27120%27%20height%3D%27120%27%3E%3Cg%20fill%3D%27%23ffffff%27%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2718%27%20r%3D%271.6%27/%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2740%27%20r%3D%271.2%27/%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%2794%27%20r%3D%271.8%27/%3E%3Ccircle%20cx%3D%2734%27%20cy%3D%2786%27%20r%3D%271%27/%3E%3Cpath%20d%3D%27M88%2010%20l2.4%206%206%202.4-6%202.4-2.4%206-2.4-6-6-2.4%206-2.4z%27/%3E%3Cpath%20d%3D%27M40%2050%20l1.6%204%204%201.6-4%201.6-1.6%204-1.6-4-4-1.6%204-1.6z%27/%3E%3C/g%3E%3Cpath%20d%3D%27M18%20104%20a10%2010%200%201%200%2010-12%20a8%208%200%201%201-10%2012z%27%20fill%3D%27%23FFD25E%27/%3E%3C/svg%3E")}
.skin[data-skin=space] .sw{background:linear-gradient(135deg,#7B4FE0,#FF6FA3);--p:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27140%27%20height%3D%27140%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272%27%3E%3Ccircle%20cx%3D%2736%27%20cy%3D%2740%27%20r%3D%2714%27/%3E%3Cellipse%20cx%3D%2736%27%20cy%3D%2740%27%20rx%3D%2726%27%20ry%3D%277%27%20transform%3D%27rotate%28-20%2036%2040%29%27/%3E%3Ccircle%20cx%3D%27108%27%20cy%3D%27104%27%20r%3D%279%27/%3E%3C/g%3E%3Cg%20fill%3D%27%23ffffff%27%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%2726%27%20r%3D%272%27/%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%27112%27%20r%3D%271.6%27/%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2778%27%20r%3D%271.4%27/%3E%3Cpath%20d%3D%27M120%2060%20l2%205%205%202-5%202-2%205-2-5-5-2%205-2z%27/%3E%3C/g%3E%3Cpath%20d%3D%27M60%20120%20l30-18%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E")}
.skin[data-skin=floral] .sw{background:linear-gradient(135deg,#9A2F4F,#5E9C76);--p:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27130%27%20height%3D%27130%27%3E%3Cg%20fill%3D%27%23ffffff%27%3E%3Cpath%20d%3D%27M30%2030%20c10-18%2030-18%2034-12%20c-6%2016-24%2020-34%2012z%27/%3E%3Cpath%20d%3D%27M30%2030%20c-4-20%206-34%2012-34%20c6%2014%200%2030-12%2034z%27%20transform%3D%27rotate%2840%2030%2030%29%27/%3E%3Ccircle%20cx%3D%2796%27%20cy%3D%2792%27%20r%3D%276%27/%3E%3Ccircle%20cx%3D%27106%27%20cy%3D%2786%27%20r%3D%275%27/%3E%3Ccircle%20cx%3D%2788%27%20cy%3D%2784%27%20r%3D%275%27/%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%27102%27%20r%3D%275%27/%3E%3Ccircle%20cx%3D%2786%27%20cy%3D%2798%27%20r%3D%274%27/%3E%3C/g%3E%3Cpath%20d%3D%27M10%20120%20c20-30%2040-30%2060-24%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272%27/%3E%3C/svg%3E")}
.skin[data-skin=ocean] .sw{background:linear-gradient(135deg,#169FB1,#FF6B5E);--p:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27140%27%20height%3D%27120%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M0%2030%20q17-12%2035%200%20t35%200%20t35%200%20t35%200%27/%3E%3Cpath%20d%3D%27M0%2090%20q17-12%2035%200%20t35%200%20t35%200%20t35%200%27/%3E%3C/g%3E%3Cg%20fill%3D%27%23ffffff%27%3E%3Cpath%20d%3D%27M100%2054%20l3%208%208%201-6%206%202%208-7-4-7%204%202-8-6-6%208-1z%27/%3E%3Cpath%20d%3D%27M30%2060%20c0-10%2016-10%2016%200%20c0%206-8%2010-8%2010%20s-8-4-8-10z%27/%3E%3C/g%3E%3C/svg%3E")}
.skin[data-skin=islamic] .sw{background:linear-gradient(135deg,#26357A,#F2A13B);--p:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2780%27%20height%3D%2780%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271.6%27%3E%3Crect%20x%3D%2722%27%20y%3D%2722%27%20width%3D%2736%27%20height%3D%2736%27/%3E%3Crect%20x%3D%2722%27%20y%3D%2722%27%20width%3D%2736%27%20height%3D%2736%27%20transform%3D%27rotate%2845%2040%2040%29%27/%3E%3Ccircle%20cx%3D%2740%27%20cy%3D%2740%27%20r%3D%278%27/%3E%3Cpath%20d%3D%27M0%200%20L22%2022%20M80%200%20L58%2022%20M0%2080%20L22%2058%20M80%2080%20L58%2058%27/%3E%3C/g%3E%3C/svg%3E")}
.skin[data-skin=idea] .sw{background:linear-gradient(135deg,#1DAFC1,#FFB93E);--p:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27130%27%20height%3D%27130%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M40%2052%20a16%2016%200%201%201%2020%200%20v8%20h-20z%27/%3E%3Cpath%20d%3D%27M43%2066%20h14%20M45%2071%20h10%27/%3E%3Cpath%20d%3D%27M50%2022%20v-8%20M28%2030%20l-6-6%20M72%2030%20l6-6%27/%3E%3C/g%3E%3Cg%20fill%3D%27%23ffffff%27%3E%3Cpath%20d%3D%27M100%2090%20c-2-14%2014-22%2020-14%20c-8%202-12%208-20%2014z%27/%3E%3Cpath%20d%3D%27M100%2090%20c-14-4-16-20-6-22%20c0%208%204%2014%206%2022z%27/%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%27110%27%20r%3D%272%27/%3E%3Ccircle%20cx%3D%27112%27%20cy%3D%2730%27%20r%3D%272%27/%3E%3C/g%3E%3C/svg%3E")}
/* ---------- growth: tools, plans, journal, dump, guides ---------- */
.tools-row{display:flex;gap:8px;overflow-x:auto;margin:0 -18px 14px;padding:2px 18px 6px;scrollbar-width:none}
.tools-row::-webkit-scrollbar{display:none}
.tools-row button{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:82px;padding:10px 6px;border-radius:18px;border:none;background:var(--surface);box-shadow:var(--shadow-sm);font-size:12px;font-weight:700;color:var(--ink-2)}
.tools-row button span{width:40px;height:40px;border-radius:13px;display:grid;place-items:center}
.tools-row .i{width:20px;height:20px}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plan-card{position:relative;display:flex;flex-direction:column;gap:6px;text-align:start;padding:14px;border-radius:20px;border:none;background:var(--surface);box-shadow:var(--shadow-sm)}
.plan-card .ico{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff}
.plan-card b{font-size:15px;line-height:1.35}.plan-card small{color:var(--ink-2);font-size:12px;line-height:1.5}
.plan-card em{position:absolute;top:12px;inset-inline-end:12px;font-style:normal;font-size:11px;font-weight:800;color:var(--ink-3);background:var(--surface-2);border-radius:99px;padding:1px 8px}
.plan-row .bar{height:6px;margin-top:6px}
.plan-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px;border-radius:var(--r-lg);margin-bottom:14px;color:#fff;background:linear-gradient(140deg,var(--c),color-mix(in srgb,var(--c) 60%,#1a1530));box-shadow:0 18px 40px -18px var(--c)}
.plan-hero small{opacity:.85;font-weight:700}.plan-hero h2{font-size:28px}.plan-hero p{opacity:.95;font-weight:700}
.plan-hero .ring-inner b{color:#fff;font-family:var(--font-head);font-size:18px}
.science{display:flex;gap:10px;align-items:flex-start;background:var(--accent-soft);border-radius:16px;padding:12px;margin-bottom:14px;font-size:13.5px;line-height:1.75}
.science .i{color:var(--accent-ink);flex:none;margin-top:3px}
.steps-preview{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;padding-bottom:4px}
.steps-preview div{flex:none;background:var(--surface-2);border-radius:12px;padding:8px 10px;text-align:center;min-width:76px}
.steps-preview b{display:block;font-size:13.5px}.steps-preview small{font-size:11px;color:var(--ink-3)}
.day-cells{display:grid;grid-template-columns:repeat(14,1fr);gap:4px}
.day-cells.weeks{grid-template-columns:repeat(13,1fr)}
.day-cells i{aspect-ratio:1;border-radius:5px;background:var(--track)}
.day-cells i.on{background:var(--mint)}.day-cells i.miss{background:var(--coral-soft)}.day-cells i.rest{background:var(--surface-2)}.day-cells i.now{box-shadow:0 0 0 2px var(--accent)}
.ladder{display:flex;align-items:flex-end;gap:6px;height:130px;direction:ltr}
.rung{flex:1;height:var(--h);border-radius:10px 10px 4px 4px;background:var(--track);display:flex;align-items:flex-start;justify-content:center;padding-top:6px;min-height:28px}
.rung span{font-size:11px;font-weight:800;color:var(--ink-3)}
.rung.past{background:var(--mint)}.rung.past span{color:#fff}
.rung.cur{background:var(--accent)}.rung.cur span{color:#fff}
.pyramid{display:flex;flex-direction:column;align-items:center;gap:3px;padding-top:8px;position:relative}
.pr-row{display:flex;gap:3px}.pr-row i{width:clamp(10px,3.4vw,15px);height:clamp(10px,3.4vw,15px);border-radius:3px;background:var(--track)}
.pr-row i.on{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.pr-flag{color:var(--sun);margin-bottom:2px}.pr-flag .i{width:24px;height:24px}
.w52-card .check{width:30px;height:30px}
.wk{width:30px;height:30px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}
.item.future{opacity:.5}.item.future>.i{color:var(--ink-3);width:18px;height:18px}
.banner.jr{background:var(--sun-soft)}.banner.jr .i{color:#C98A00}.banner.jr.eve{background:var(--accent-soft)}.banner.jr.eve .i{color:var(--accent-ink)}
.banner.w52{background:var(--mint-soft)}.banner.w52 .i{color:var(--mint)}
.j-date{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.j-date b{font-family:var(--font-head);font-size:16px}
.j-sec .lbl{display:block;font-weight:800;font-size:13.5px;color:var(--ink-2);margin:12px 0 6px}
.j-sec .input{margin-bottom:6px;min-height:44px}
.j-sec.morning .card-h h3 .i{color:#E59A00}.j-sec.evening .card-h h3 .i{color:var(--accent-ink)}
.affirm{display:flex;gap:10px;align-items:center;margin-top:12px;background:linear-gradient(135deg,var(--accent-soft),var(--sun-soft));border-radius:16px;padding:12px}
.affirm .i{color:var(--accent-ink);flex:none}.affirm small{display:block;font-size:11.5px;color:var(--ink-3);font-weight:800}
.affirm input{border:none;background:none;font-family:var(--font-head);font-size:16px;font-weight:800;width:100%;outline:none;color:var(--ink)}
.stars{display:flex;gap:6px;direction:ltr;justify-content:center}
.stars button{border:none;background:none;padding:4px;color:var(--track)}
.stars button .i{width:36px;height:36px;fill:currentColor}
.stars button.on{color:#FFC94D;animation:pop .3s var(--spring)}
.mini-stars{color:#FFC94D;letter-spacing:1px;font-size:13px}
.dump-in .input{min-height:110px}
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.guide-card{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:20px;border:none;background:var(--surface);box-shadow:var(--shadow-sm);text-align:start}
.guide-card span{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--c)}
.guide-card b{font-size:14.5px;line-height:1.4}
.guide-hero{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:var(--r-lg);color:#fff;background:linear-gradient(140deg,var(--c),color-mix(in srgb,var(--c) 55%,#1a1530));margin-bottom:14px}
.guide-hero .i{width:34px;height:34px}.guide-hero h2{font-size:22px}
.guide-body{display:grid;gap:10px}
.g-step{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border-radius:18px;padding:14px;box-shadow:var(--shadow-sm)}
.g-step>span{width:30px;height:30px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;flex:none}
.g-step b{display:block;margin-bottom:2px}.g-step p{color:var(--ink-2);font-size:14px;line-height:1.75}
.chk-list{display:grid;gap:8px}
.chk{display:flex;align-items:center;gap:10px;border:none;background:var(--surface-2);border-radius:14px;padding:10px 12px;text-align:start;font-weight:700;font-size:14px;color:var(--ink);transition:all .2s}
.chk span{width:24px;height:24px;border-radius:8px;border:2px solid var(--line);display:grid;place-items:center;color:#fff;flex:none;background:var(--surface)}
.chk span .i{width:15px;height:15px;stroke-width:3;opacity:0}
.chk.on{background:color-mix(in srgb,var(--c,var(--mint)) 14%,var(--surface))}.chk.on span{background:var(--c,var(--mint));border-color:var(--c,var(--mint))}.chk.on span .i{opacity:1}
.card.friday{background:linear-gradient(160deg,var(--mint-soft),var(--surface) 60%)}
/* ---------- sports, meals, discover ---------- */
.sport-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sport-card{display:flex;flex-direction:column;gap:6px;text-align:start;padding:14px;border-radius:20px;border:none;background:var(--surface);box-shadow:var(--shadow-sm)}
.sport-card span{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--c)}
.sport-card b{font-size:15.5px}.sport-card small{color:var(--ink-2);font-size:12.5px}
.sport-big{width:70px;height:70px;border-radius:22px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}.sport-big .i{width:36px;height:36px}
.tips li .num{width:24px;height:24px;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}
.meal-banner{background:var(--mint-soft)}.meal-banner .i{color:var(--mint)}
.meal-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.meal-sum small{display:block;font-size:11.5px;color:var(--ink-3);font-weight:700}.meal-sum b{font-family:var(--font-head);font-size:17px}
.meal-h{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.meal-h .ico{width:42px;height:42px;border-radius:14px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex:none}
.meal-h b{display:block;font-size:16px}.meal-h small{color:var(--ink-3);font-size:12.5px}
.meal-items{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:4px}
.meal-items li{display:flex;justify-content:space-between;gap:10px;padding:6px 10px;border-radius:10px;background:var(--surface-2);font-size:14px}
.meal-items li b{white-space:nowrap}
.meal.eaten{opacity:.7}
.hobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hobby{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow-sm)}
.hobby .hh{display:flex;justify-content:space-between}
.hobby .hh span{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--c)}
.hobby .hh em{width:24px;height:24px;border-radius:50%;background:var(--mint);color:#fff;display:grid;place-items:center}.hobby .hh em .i{width:14px;height:14px}
.hobby b{font-size:15px}.hobby p{color:var(--ink-2);font-size:12.5px;line-height:1.6}
.hobby .first{display:flex;gap:6px;align-items:flex-start;font-size:12.5px;font-weight:700;background:var(--surface-2);border-radius:12px;padding:8px}
.hobby .first .i{width:15px;height:15px;color:var(--c);flex:none;margin-top:2px}
.hb-actions{display:flex;gap:6px;margin-top:auto}.hb-actions .btn.primary{flex:1}
.trip{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}
.trip .ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;flex:none}
.trip .meta{flex:1;min-width:0}.trip b{display:block}.trip small{display:block;color:var(--ink-2);font-size:12.5px}.trip small.tiny .i{width:12px;height:12px;vertical-align:-1px}
/* ---------- subscription ---------- */
.code-form{display:flex;gap:8px}.code-form .input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:1px;font-weight:800}
.paywall .wl-sub{margin-top:6px}
.pw-feats{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:6px}
.pw-feats div{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:14px;padding:10px;box-shadow:var(--shadow-sm);font-weight:700;font-size:13.5px}
.pw-feats .i{color:var(--accent-ink);width:20px;height:20px}
.sub-card .sub-row{display:flex;align-items:center;gap:12px}
.sub-card .ico{width:44px;height:44px;border-radius:14px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex:none}
.sub-card b{display:block}.sub-card small{color:var(--ink-3);font-size:12.5px}
.sub-card.warn{box-shadow:0 0 0 2px var(--coral)}
.sub-more{margin-top:12px}.sub-more summary{cursor:pointer;font-weight:800;color:var(--accent-ink);font-size:13.5px;margin-bottom:10px}
.banner.sub-warn{background:var(--coral-soft)}.banner.sub-warn .i{color:var(--coral)}
svg.ch.ch-bust{overflow:hidden}

/* ---------- logo 3.4 (staircase + sprout) ---------- */
.ml-logo .lg-s1,.ml-logo .lg-s2,.ml-logo .lg-s3,.ml-logo .lg-sun,.ml-logo .lg-lf1,.ml-logo .lg-lf2,.ml-logo .lg-stem,.ml-logo .lg-ball,.ml-logo .lg-glow{transform-box:fill-box}
.ml-logo .lg-ball{opacity:0}
.ml-logo.anim .lg-s1{transform-origin:50% 100%;animation:lgRise .5s .05s cubic-bezier(.3,1.5,.5,1) both}
.ml-logo.anim .lg-s2{transform-origin:50% 100%;animation:lgRise .5s .2s cubic-bezier(.3,1.5,.5,1) both}
.ml-logo.anim .lg-s3{transform-origin:50% 100%;animation:lgRise .55s .35s cubic-bezier(.3,1.5,.5,1) both}
.ml-logo.anim .lg-shade{animation:lgFade .3s .8s both}
.ml-logo.anim .lg-ball{animation:lgHop 1.15s .75s cubic-bezier(.45,0,.55,1) both}
.ml-logo.anim .lg-stem{stroke-dasharray:90;stroke-dashoffset:90;animation:lgDraw .4s 1.85s ease-out forwards}
.ml-logo.anim .lg-lf1{transform-origin:100% 100%;animation:lgLeaf .55s 2.1s cubic-bezier(.3,1.6,.5,1) both}
.ml-logo.anim .lg-lf2{transform-origin:0% 100%;animation:lgLeaf .55s 2.2s cubic-bezier(.3,1.6,.5,1) both}
.ml-logo.anim .lg-sun{transform-origin:50% 50%;animation:lgSun .8s 1.9s cubic-bezier(.2,.9,.3,1.2) both}
.ml-logo.anim .lg-glow{animation:lgFade 1s 2s both}
@keyframes lgRise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes lgFade{from{opacity:0}}
@keyframes lgDraw{to{stroke-dashoffset:0}}
@keyframes lgLeaf{from{transform:scale(0) rotate(-25deg)}to{transform:scale(1) rotate(0)}}
@keyframes lgSun{from{transform:translateY(90px) scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes lgHop{
 0%{opacity:0;transform:translate(0,40px)}
 8%{opacity:1;transform:translate(0,0)}
 22%{transform:translate(52px,-74px)}
 33%{transform:translate(102px,-68px) scale(1.15,.85)}
 50%{transform:translate(160px,-142px)}
 62%{transform:translate(225px,-136px) scale(1.15,.85)}
 78%{transform:translate(225px,-152px) scale(1)}
 92%{opacity:1;transform:translate(225px,-124px) scale(.55)}
 100%{opacity:0;transform:translate(225px,-120px) scale(.2)}}
@media (prefers-reduced-motion:reduce){.ml-logo.anim *{animation:none!important;stroke-dashoffset:0!important}}

.splash-logo{animation:none;background:none;box-shadow:0 24px 60px -16px rgba(0,0,0,.5);width:132px;height:132px;border-radius:36px}
.splash-word{animation:rise .6s 2.1s var(--ease) both}
.splash-slogan{font-weight:700;font-size:17px;color:#FFE9A8}

.who-chip{display:flex;width:fit-content;align-items:center;gap:10px;margin:-4px auto 8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 8px 6px 14px;font:600 13px var(--font);color:var(--ink-2);cursor:pointer;align-self:center}
.who-chip b{display:inline-flex;align-items:center;gap:4px;background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;padding:3px 10px;font-weight:800}
.who-chip b .i{width:14px;height:14px}
.wl-word.intro{animation:rise .6s 2.1s var(--ease) both}.wl-tag.intro{animation:rise .6s 2.3s var(--ease) both}
.wl-logo.intro{animation:none}
.wl-tag{font-weight:700}

/* intro story (3.4) */
.intro-story{text-align:center}
.is-art{position:relative;height:210px;display:grid;place-items:center;margin:4px auto 8px;width:min(100%,320px);border-radius:32px;background:radial-gradient(90% 90% at 50% 100%,color-mix(in srgb,var(--sc) 28%,transparent),transparent 70%)}
.is-char svg.ch{width:132px;height:184px}
.is-ladder{position:absolute;inset:auto 18px 14px auto;display:flex;align-items:flex-end;gap:5px;height:120px}
.is-ladder i{width:22px;border-radius:8px 8px 3px 3px;background:color-mix(in srgb,var(--sc) 70%,#fff);animation:lgRise .5s cubic-bezier(.3,1.5,.5,1) both;transform-origin:bottom}
.is-ladder i:nth-child(1){height:28%;animation-delay:.1s}.is-ladder i:nth-child(2){height:50%;animation-delay:.22s}.is-ladder i:nth-child(3){height:74%;animation-delay:.34s}.is-ladder i:nth-child(4){height:100%;animation-delay:.46s;background:var(--sc)}
.intro-story h1.slogan{font-size:26px;color:var(--sc)}
.is-feats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 6px;text-align:start}
.is-feats div{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px 12px;font-weight:700;font-size:14px;animation:enter .45s var(--ease) both}
.is-feats .i{color:var(--sc);flex:none;width:20px;height:20px}
/* calendar events 3.4 */
.cal-day{position:relative}.cal-cake{position:absolute;top:1px;inset-inline-end:2px;font-size:10px;font-style:normal;line-height:1}
.cal-add{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}.cal-add .btn{padding-inline:8px;font-size:13px}
.pill-mini{flex:none;font-size:11px;font-weight:800;border-radius:99px;padding:3px 9px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)}
.cal-grid{touch-action:pan-y}
/* family 3.4 */
.fam-hero{display:flex;gap:12px;align-items:center;border-radius:28px;padding:16px;margin-bottom:14px;color:#fff;background:linear-gradient(135deg,#F2A93B,#E0457B)}
.fam-hero .fh-art svg.ch{width:92px;height:128px}.fam-hero small{opacity:.85;font-weight:700}.fam-hero h2{font-size:21px;margin:2px 0 4px}.fam-hero p{font-size:13px;opacity:.95;margin:0}
.fam-rit{border:1.5px solid transparent}.fam-rit.on{border-color:color-mix(in srgb,var(--c) 40%,transparent)}
.fr-h{display:flex;align-items:center;gap:12px}.fr-h .ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;background:var(--c);color:#fff}
.fr-h small{display:block;color:var(--ink-2);font-size:12.5px}.fr-body{margin-top:12px}
.chips.sm .chip{padding:6px 10px;font-size:12.5px}
.idea-card p{margin:0;font-size:15px;line-height:1.8}
.fam-banner .i:first-child{color:#E0457B}
/* subscription page 3.4 */
.sub-page{gap:12px;text-align:start;align-items:stretch;padding-bottom:30px}
.sub-lock-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.sub-lock-head .wl-logo{margin-top:8px}.sub-lock-head h2{margin-top:10px;font-size:22px}.sub-lock-head p{color:var(--ink-2);margin:0}
.sub-status{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:22px;padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.sub-status .ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink)}
.sub-status small{color:var(--ink-2);font-weight:700}.sub-status b{display:block;font-size:16px}
.sub-status.trial .ico{background:#FFF1D6;color:#C77800}
.price-card{border-radius:26px;padding:18px;margin-bottom:12px;color:#fff;background:radial-gradient(120% 90% at 100% 0%,#8C6BFF,transparent 60%),linear-gradient(150deg,#4E33D2,#271A74);box-shadow:0 18px 40px -18px rgba(62,42,158,.7)}
.pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pc-top small{font-weight:800;opacity:.85;letter-spacing:.02em}.pc-top b{display:block;font-size:40px;font-family:var(--font-head);line-height:1.1}.pc-top b em{font-style:normal;font-size:15px;font-family:var(--font);font-weight:700;opacity:.85}
.pc-badge{background:#FFD36B;color:#3B2A00;border-radius:99px;padding:4px 12px;font-weight:800;font-size:12px}
.price-card ul{list-style:none;margin:12px 0 16px;padding:0;display:grid;gap:8px}.price-card li{display:flex;gap:10px;align-items:center;font-weight:600}.price-card li .i{color:#9DF0C6;flex:none}
.price-card .btn.primary{background:#25D366;color:#073B1E;box-shadow:none}
.steps-ol{margin:0;padding-inline-start:22px;display:grid;gap:6px;font-weight:600}
.ref-card{border:1.5px dashed color-mix(in srgb,var(--accent) 40%,transparent)}
.ref-code{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--accent-soft);border-radius:16px;padding:10px 14px;margin:10px 0}
.ref-code b{font-size:22px;letter-spacing:.12em;color:var(--accent-ink)}
.ref-stats{display:flex;gap:14px;flex-wrap:wrap;color:var(--ink-2);font-size:13px;font-weight:700;margin-bottom:10px}.ref-stats span{display:inline-flex;gap:5px;align-items:center}.ref-stats .i{width:16px;height:16px}
/* mushaf 3.4 */
.mushaf-top{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.mushaf-top .pill{display:inline-flex;align-items:center;gap:6px}.pill.soft{background:var(--surface-2);box-shadow:none}
.mushaf{border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:#FFFDF6;touch-action:pan-y}
.mushaf-paper{position:relative;min-height:62vh;background:#FFFDF6;border:6px double #D9C58F;border-radius:22px}
.mushaf-paper img{display:block;width:100%;height:auto;opacity:0;transition:opacity .25s}
.mushaf-paper.ready img{opacity:1}.mushaf-paper.ready .m-load,.mushaf-paper.failed .m-load{display:none}
.m-load,.m-err{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;color:#8A7B55;font-weight:700;text-align:center;padding:20px}
.m-err{background:#FFFDF6}
.mushaf.zoom{overflow:auto;max-height:78vh}.mushaf.zoom .mushaf-paper{width:180%}
html[data-theme=dark] .mushaf,html[data-theme=dark] .mushaf-paper,html[data-theme=dark] .m-err{background:#15130F}
html[data-theme=dark] .mushaf-paper img{filter:invert(1) hue-rotate(180deg) brightness(.92)}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .mushaf,html:not([data-theme=light]) .mushaf-paper,html:not([data-theme=light]) .m-err{background:#15130F}html:not([data-theme=light]) .mushaf-paper img{filter:invert(1) hue-rotate(180deg) brightness(.92)}}
.mushaf-nav{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin:12px 0}
.mw-row{display:flex;gap:12px;align-items:center}.mw-row small{display:block;color:var(--ink-2);font-size:12.5px;margin-bottom:6px}
.juz-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:6px}.juz-chips .chip{flex:none}
.surah-list{display:grid;gap:4px;max-height:44vh;overflow:auto}
.surah-row{display:flex;align-items:center;gap:12px;border:none;background:var(--surface-2);border-radius:14px;padding:10px 12px;text-align:start;cursor:pointer;font:inherit;color:var(--ink)}
.surah-row .num{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--mint-soft);color:var(--mint);font-weight:800;font-size:13px;flex:none}
.surah-row b{flex:1}.surah-row small{color:var(--ink-3)}
/* inbody 3.4 */
.ib-hero{display:flex;gap:12px;align-items:center;border-radius:26px;padding:18px;color:#fff;margin-bottom:12px;background:radial-gradient(100% 90% at 0% 0%,#22C1A9,transparent 60%),linear-gradient(140deg,#1E9C86,#2B1F7A)}
.ib-hero small{font-weight:800;opacity:.85}.ib-hero h2{font-size:21px;margin:2px 0 4px}.ib-hero p{margin:0;font-size:13.5px;opacity:.95}
.ib-ico{width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}.ib-ico .i{width:34px;height:34px}
.ib-pick{cursor:pointer}
.ib-scan{position:relative;overflow:hidden;border-radius:22px;background:var(--surface);box-shadow:var(--shadow-sm);padding:26px 16px;display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:12px;text-align:center}
.ib-scan>.i{width:44px;height:44px;color:var(--accent)}.ib-scan small{color:var(--ink-2)}
.ib-beam{position:absolute;inset-inline:0;height:40%;top:-40%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--mint) 30%,transparent),transparent);animation:ibBeam 1.6s linear infinite}
@keyframes ibBeam{to{top:100%}}
.ib-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ib-m{background:var(--surface-2);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.ib-m small{color:var(--ink-2);font-size:11.5px;font-weight:700}.ib-m b{font-size:19px}.ib-m b em{font-style:normal;font-size:11px;color:var(--ink-3);margin-inline-start:2px}
.ib-st{align-self:flex-start;font-size:10.5px;font-weight:800;border-radius:99px;padding:2px 7px;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}
.ib-compare{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:13px;color:var(--ink-2)}
.ib-diff{font-weight:800;border-radius:8px;padding:0 5px}.ib-diff.good{color:var(--mint);background:var(--mint-soft)}.ib-diff.bad{color:var(--coral);background:var(--coral-soft)}
.ib-ai{display:flex;gap:10px;margin-top:12px;background:var(--accent-soft);border-radius:16px;padding:12px}.ib-ai .i{color:var(--accent-ink);flex:none}.ib-ai p{margin:0;font-size:14px;line-height:1.8}
.ib-focus{display:inline-block;background:var(--mint-soft);color:var(--mint);font-weight:800;border-radius:99px;padding:4px 12px;margin-bottom:8px}
.ib-manual{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;margin-top:10px}.ib-manual .btn{grid-column:1/-1}
.ib-banner .i:first-child{color:#1E9C86}
/* coach 3.4 */
.slogan-band{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;border-radius:20px;padding:12px 16px;margin:12px 0;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),color-mix(in srgb,#FFB24E 14%,var(--surface)));color:var(--accent-ink)}
.slogan-band b{font-size:16px;font-weight:800;letter-spacing:.01em}.slogan-band .i{flex:none}
.slogan-band.home{margin-top:16px}
.why-card{border:1.5px solid color-mix(in srgb,var(--coral) 30%,transparent)}
.why-h{display:flex;gap:12px;align-items:center}.why-h svg.ch{width:54px;height:54px;border-radius:16px;background:var(--coral-soft);flex:none}
.why-h b{display:block;font-size:16px}.why-h small{color:var(--ink-2)}
.why-list{display:flex;flex-direction:column;gap:4px;margin:10px 0 12px;font-weight:600;font-size:14px}.why-list span{display:flex;align-items:center;gap:4px}.why-list .i{width:16px;height:16px;color:var(--coral)}
.why-step{text-align:center;margin-bottom:12px}.why-step small{color:var(--ink-3);font-weight:800}.why-step h3{font-size:19px;margin:4px 0}
.why-reasons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.why-reasons button{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--surface);border-radius:16px;padding:12px;font:700 14px var(--font);color:var(--ink);cursor:pointer;text-align:start}
.why-reasons button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.why-fix{display:flex;gap:8px;align-items:flex-start;margin-top:12px;background:var(--mint-soft);color:var(--ink);border-radius:14px;padding:10px 12px;font-size:14px}.why-fix .i{color:var(--mint);flex:none}
.why-do{margin-top:10px}
.coach-hero{display:flex;gap:16px;align-items:center;border-radius:26px;padding:18px;color:#fff;background:linear-gradient(140deg,#21A97A,#2B1F7A);margin-bottom:4px}
.coach-hero small{font-weight:700;opacity:.85}.coach-hero h2{font-size:38px;margin:2px 0;display:flex;align-items:baseline;gap:8px}.coach-hero h2 em{font-style:normal;font-size:16px;opacity:.75}.coach-hero p{margin:0;font-size:13.5px}
.coach-hero .up,.coach-hero .down,.coach-hero .eq{font-size:13px;font-weight:800;border-radius:99px;padding:2px 8px;background:rgba(255,255,255,.18)}
.ch-ladder{display:flex;align-items:flex-end;gap:4px;height:84px;flex:none}.ch-ladder i{width:13px;border-radius:5px 5px 2px 2px;background:rgba(255,255,255,.25)}.ch-ladder i.on{background:#FFD36B}
.coach-rows{display:grid;gap:8px}.coach-rows>div{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)}.coach-rows>div:last-child{border:none}
.coach-rows .ico{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);flex:none}.coach-rows .t{flex:1;color:var(--ink-2);font-weight:600}.coach-rows b{font-size:16px}.coach-rows .pct{font-size:12px;font-weight:800;color:var(--accent-ink);background:var(--accent-soft);border-radius:99px;padding:2px 8px}
.reason-bars{display:grid;gap:10px}.reason-bars>div{display:grid;grid-template-columns:minmax(0,1.2fr) 1fr auto;gap:10px;align-items:center;font-size:13.5px;font-weight:600}.reason-bars span{display:flex;gap:6px;align-items:center}.reason-bars .i{width:16px;height:16px}
.coach-banner .i:first-child{color:#21A97A}
.is-art{place-items:center start;padding-inline-start:34px}
/* english + chat 3.4 */
.en-hero{display:flex;gap:12px;align-items:center;border-radius:26px;padding:18px;color:#fff;margin-bottom:6px;background:radial-gradient(100% 90% at 100% 0%,#5BC2FF,transparent 60%),linear-gradient(140deg,#3D6BFF,#2B1F7A)}
.en-hero small{font-weight:800;opacity:.85}.en-hero h2{font-size:21px;margin:2px 0 4px}.en-hero p{margin:0;font-size:13.5px}
.en-badge{width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.16);display:grid;place-items:center;font:800 20px var(--font-head);flex:none;letter-spacing:.04em}
.word-item .say{width:42px;height:42px;border-radius:14px;border:none;background:var(--sky-soft);color:var(--sky);display:grid;place-items:center;cursor:pointer;flex:none}
.word-item b{font-size:17px}.word-item .ar-mean{color:var(--accent-ink);font-weight:700}
.room-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.room-card{border:none;border-radius:20px;padding:14px 10px;background:var(--surface);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font:inherit;color:var(--ink)}
.room-card span{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}.room-card small{color:var(--ink-3);font-size:12px}
.soon-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:1.5px dashed var(--line);border-radius:18px;padding:12px 14px;margin:12px 0}.soon-card>.i{color:var(--ink-3)}.soon-card div{flex:1}.soon-card small{display:block;color:var(--ink-3)}
.chat-wrap{display:flex;flex-direction:column;gap:10px}
.chat-top{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:18px;padding:10px 12px;box-shadow:var(--shadow-sm)}
.chat-top .ico{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);flex:none}.chat-top div{flex:1;min-width:0}.chat-top small{display:block;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-box{height:calc(100dvh - 330px);min-height:260px;overflow-y:auto;background:var(--surface-2);border-radius:20px;padding:12px;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain}
.chat-empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink-3);text-align:center;padding:20px}
.msg{max-width:82%;align-self:flex-start;background:var(--surface);border-radius:16px 16px 16px 6px;padding:8px 12px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.msg.mine{align-self:flex-end;background:var(--accent);color:#fff;border-radius:16px 16px 6px 16px}
html[dir=rtl] .msg{border-radius:16px 16px 6px 16px}html[dir=rtl] .msg.mine{border-radius:16px 16px 16px 6px}
.msg-h{display:flex;align-items:center;gap:8px;font-size:12px}.msg-h b{font-size:12.5px}.msg-h time{opacity:.6}.msg p{margin:2px 0 0;font-size:15px;line-height:1.55;word-break:break-word}
.msg .rep{margin-inline-start:auto;border:none;background:none;color:var(--ink-3);cursor:pointer;padding:2px}.msg .rep .i{width:14px;height:14px}
.chat-form{display:flex;gap:8px;align-items:center;position:sticky;bottom:calc(86px + env(safe-area-inset-bottom,0px));background:var(--bg);padding:6px 0}
.chat-form .input{flex:1}.chat-form .mic{color:var(--ink-3)}
.ban-card{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 18px}.ban-card>.i{width:44px;height:44px;color:var(--coral)}.ban-card p{color:var(--ink-2);margin:0 0 6px}
.en-banner .i:first-child{color:#3D6BFF}
/* admin 3.4 */
.admin-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 14px}
.admin-stats div{background:var(--surface);border-radius:16px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:var(--shadow-sm)}.admin-stats b{font-size:18px}.admin-stats small{color:var(--ink-3);font-size:11px;text-align:center}.admin-stats .i{width:18px;height:18px;color:var(--accent-ink)}
.flag-card{background:var(--surface);border-radius:18px;padding:12px;box-shadow:var(--shadow-sm);margin-bottom:10px}
.fc-h{display:flex;gap:10px;align-items:center}.fc-h small{display:block;color:var(--ink-2);font-size:12.5px}.fc-h b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flag-dot{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c);flex:none}
.fc-sample{margin:10px 0 0;background:var(--coral-soft);border-radius:12px;padding:8px 10px;font-size:13.5px;color:var(--ink)}
.fc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.code-list{display:flex;flex-wrap:wrap;gap:8px}.code-chip{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);background:var(--surface-2);border-radius:12px;padding:8px 10px;font:700 14px ui-monospace,monospace;color:var(--ink);cursor:pointer}.code-chip .i{width:14px;height:14px;color:var(--ink-3)}
/* 3.5: FAB slides away while scrolling down so it never sits on top of text */
.fab{transition:transform .28s var(--ease),opacity .2s}
body.fab-hide .fab{transform:translateY(calc(100% + 120px));opacity:0;pointer-events:none}
/* 3.5 intro art: character and ladder side by side, never on top of each other or the text */
.is-art{display:flex;align-items:flex-end;justify-content:center;gap:18px;height:auto;min-height:0;padding:12px 16px 10px;place-items:unset}
.is-art .is-ladder{position:static;height:110px;inset:auto}
.is-char svg.ch{width:min(120px,30vw);height:auto;aspect-ratio:200/280;display:block}
.intro-story h1{margin-top:8px}
@media (max-height:700px){.is-char svg.ch{width:96px}.is-art .is-ladder{height:84px}.is-feats div{padding:8px 10px;font-size:13px}}
.rit-row{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.rit-time{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink-2)}.rit-time .input{flex:1;max-width:none}
.rel-quick{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}.rel-quick .chip{display:inline-flex;align-items:center;gap:4px;font-size:13px}.rel-quick .chip .i{width:14px;height:14px}
.gm-sum{display:grid;gap:6px;background:var(--accent-soft);border-radius:14px;padding:10px 12px;margin-bottom:12px}.gm-sum:empty{display:none}.gm-sum div{display:flex;gap:8px;align-items:center;font-weight:700;font-size:13.5px;color:var(--accent-ink)}.gm-sum .i{width:16px;height:16px;flex:none}
.debt-item .meta{min-width:0}.debt-item .bar{margin-top:6px}
/* 3.5 grouped tools on «أنا» */
.tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:6px}
.tool-tile{border:none;background:var(--surface);border-radius:18px;padding:12px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:var(--shadow-sm);cursor:pointer;font:inherit;color:var(--ink);min-width:0}
.tool-tile span{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}
.tool-tile b{font-size:12.5px;font-weight:700;text-align:center;line-height:1.3}
@media (max-width:360px){.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 3.5 home simplicity + search */
.start-card{border:1.5px solid color-mix(in srgb,var(--accent) 25%,transparent)}
.sc-h{display:flex;gap:12px;align-items:center}.sc-h>div{flex:1;min-width:0}.sc-h b{display:block;font-size:16px}.sc-h small{color:var(--ink-2)}
.sc-next{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;border:none;background:var(--accent-soft);border-radius:16px;padding:12px;text-align:start;font:inherit;color:var(--ink);cursor:pointer}
.sc-next .ico{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--accent);color:#fff;flex:none}.sc-next .meta{flex:1;min-width:0}.sc-next b{display:block}.sc-next small{color:var(--ink-2)}
.sc-dots{display:flex;gap:6px;justify-content:center;margin-top:10px}.sc-dots i{width:8px;height:8px;border-radius:9px;background:var(--line)}.sc-dots i.on{background:var(--mint)}.sc-dots i.cur{width:22px;background:var(--accent)}
.more-nudges{margin:0 0 12px}.more-nudges summary{list-style:none;display:flex;align-items:center;gap:8px;justify-content:center;cursor:pointer;color:var(--accent-ink);font-weight:800;font-size:14px;padding:8px;border-radius:14px;background:var(--surface)}.more-nudges summary::-webkit-details-marker{display:none}.more-nudges[open] summary{margin-bottom:10px}
.search-btn{margin-inline-start:auto}
.search-box{position:relative}.search-box>.i{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:var(--ink-3)}.search-box .input{padding-inline-start:44px}
.search-res{margin-top:12px;min-height:200px}
.setup-card{text-align:start}.setup-card>.i{width:40px;height:40px;color:var(--accent)}.setup-card h2{font-size:19px;margin:8px 0}
.flag-card.cust .fc-actions .btn{padding:6px 10px}
.trial-pill{background:#FFF1D6;color:#B86E00;box-shadow:none;font-weight:800}.trial-pill .i{width:15px;height:15px}
.ref-link{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:12px;padding:8px 10px;margin-bottom:10px}.ref-link span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--ink-2)}
.admin-banner{background:linear-gradient(135deg,#2B1F7A,#D7263D)!important;color:#fff}.admin-banner p{color:#ffffffcc!important}.admin-banner .i{color:#fff}
/* 3.5 intro video */
.intro-vid{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:radial-gradient(120% 80% at 50% 0%,#5E43E0 0%,#2B1F7A 55%,#150F45 100%);color:#fff;padding:calc(10px + var(--safe-t)) 16px calc(14px + var(--safe-b));overflow:hidden}
.iv-top{display:flex;flex-direction:column;gap:10px}
.iv-bars{display:flex;gap:4px}.iv-bars i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.22);overflow:hidden}.iv-bars b{display:block;height:100%;width:0;background:#FFD36B}
.iv-ctrl{display:flex;justify-content:space-between;align-items:center}
.iv-btn,.iv-skip{border:none;background:rgba(255,255,255,.14);color:#fff;border-radius:999px;height:36px;display:inline-flex;align-items:center;gap:6px;padding:0 14px;font:700 14px var(--font);cursor:pointer}.iv-btn{width:36px;padding:0;justify-content:center}
.iv-stage{flex:1;position:relative;display:grid;place-items:center;min-height:0}
.iv-logo{display:flex;flex-direction:column;align-items:center;gap:12px}.iv-logo svg{width:150px;height:150px;border-radius:40px;box-shadow:0 24px 60px -18px rgba(0,0,0,.6)}.iv-logo b{font:800 34px Baloo,Cairo,sans-serif}
.iv-phone{position:absolute;height:min(64vh,560px);aspect-ratio:9/19.2;border-radius:34px;padding:8px;background:#0E0A2E;box-shadow:0 30px 70px -20px rgba(0,0,0,.7),0 0 0 2px rgba(255,255,255,.08);opacity:0;transform:translateY(40px) scale(.94);transition:opacity .5s,transform .6s var(--ease)}
.iv-phone.on{opacity:1;transform:none}
.iv-screen{width:100%;height:100%;border-radius:27px;overflow:hidden;background:#FBF7F2}.iv-screen img{width:100%;display:block;will-change:transform}
.iv-chips{position:absolute;inset:auto 0 6px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;pointer-events:none}
.iv-chips span{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#2B1F7A;border-radius:999px;padding:7px 12px;font-weight:800;font-size:13px;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);opacity:0;animation:ivChip .5s var(--spring) forwards}.iv-chips .i{width:16px;height:16px;color:#6A4BE8}
@keyframes ivChip{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}
.iv-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center}.iv-slogan{font:800 28px/1.5 var(--font-head);color:#FFE9A8;max-width:16ch}
.iv-cap{min-height:4.6em;margin:10px 0 0;text-align:center;font-size:17px;font-weight:700;line-height:1.6;text-wrap:balance;opacity:0}.iv-cap.in{animation:enter .45s var(--ease) forwards}
.intro-vid.paused .iv-stage::after{content:'⏸';position:absolute;font-size:46px;opacity:.85}
.iv-start{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:inherit;transition:opacity .35s}.iv-start.gone{opacity:0;pointer-events:none}
.iv-start-in{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:20px}.iv-start-in svg{width:96px;height:96px;border-radius:28px}.iv-start-in h2{font-size:22px;margin:0}
.iv-play{width:84px;height:84px;border-radius:50%;border:none;background:#FFD36B;color:#2B1F7A;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 10px rgba(255,211,107,.18);animation:pulseRing 1.8s infinite}.iv-play .i{width:38px;height:38px}
@keyframes pulseRing{50%{box-shadow:0 0 0 18px rgba(255,211,107,.06)}}
.iv-start .btn.ghost{color:#fff}

/* 3.5 fixes */
.intro-vid [hidden]{display:none!important}
.eod-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.eod-h>div{flex:1;min-width:0}.eod-h b{display:block;font-weight:800;font-size:16px;margin-bottom:3px}.eod-h small{display:block;color:var(--muted);line-height:1.6}
/* 3.5 subscription counter, admin sharing, start over */
.sub-counter{background:linear-gradient(135deg,#7C5CFA,#A48BFF);color:#fff;border-radius:26px;padding:18px;margin-bottom:12px;box-shadow:0 18px 40px -22px rgba(90,60,220,.7)}
.sub-counter.trial{background:linear-gradient(135deg,#F59E0B,#F2B33D)}
.sub-counter.ended{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.sub-counter.life{display:flex;align-items:center;gap:12px}
.sub-counter .sc-h{display:flex;align-items:center;gap:12px}.sub-counter .ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.22);color:#fff;flex:none}
.sub-counter small{opacity:.9;font-weight:700}.sub-counter .sc-h b{display:block;font-size:18px}
.sc-clock{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 10px}
.sc-clock div{background:rgba(255,255,255,.18);border-radius:16px;padding:10px 0;text-align:center}
.sc-clock b{display:block;font:800 30px/1.1 var(--font-head);font-variant-numeric:tabular-nums}.sc-clock small{font-size:12px}
.sc-bar{height:8px;border-radius:8px;background:rgba(255,255,255,.25);overflow:hidden}.sc-bar i{display:block;height:100%;background:#fff;border-radius:8px}
.sc-end{font-size:13px;margin-top:10px;opacity:.95;line-height:1.7}
.sc-bonus{display:flex;gap:8px;align-items:flex-start;margin-top:10px;background:rgba(255,255,255,.18);border-radius:14px;padding:10px 12px;font-size:13.5px;font-weight:700;line-height:1.7}
.sub-counter.ended .sc-bonus{background:var(--accent-soft);color:var(--accent-ink)}
.sc-bonus .i{width:18px;height:18px;flex:none;margin-top:2px}
.trial-pill.paid{background:var(--accent-soft);color:var(--accent-ink)}.trial-pill.warn{background:#FFE1E1;color:#C62828}
.share-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.btn.wa{background:#25D366;color:#fff;border:none}
.code-row{background:var(--surface-2);border-radius:16px;padding:12px;margin-bottom:8px}.code-row b{font:800 18px/1.2 ui-monospace,monospace;letter-spacing:.5px}
.admin-link{margin-bottom:12px}
.warn-box{display:flex;gap:10px;background:#FFF4E5;color:#7A4A00;border-radius:16px;padding:14px;margin-bottom:12px;line-height:1.75;font-size:14px}
.warn-box>.i{width:22px;height:22px;flex:none;color:#E07A00;margin-top:3px}.warn-box ul{margin:6px 0 0;padding-inline-start:18px}
.menu-item.start-over .txt{font-weight:800}
.admin-note{display:flex;gap:8px;align-items:flex-start;background:#FDECEE;color:#9B1C2C;border-radius:14px;padding:10px 12px;font-size:13.5px;font-weight:700;line-height:1.7;margin-bottom:10px}.admin-note .i{width:18px;height:18px;flex:none;margin-top:3px}
.zakat-form .z-sec{background:var(--surface-2);border-radius:18px;padding:12px 12px 4px;margin-bottom:10px}
.zakat-form .z-sec>b{display:flex;align-items:center;gap:8px;font-weight:800;margin-bottom:8px}.zakat-form .z-sec>b .i{width:18px;height:18px;color:var(--accent-ink)}
.zakat-form .z-sec.minus>b .i{color:var(--coral)}
.zakat-form .z-sec .hint{display:block;margin:-4px 0 10px}
.z-result{background:linear-gradient(135deg,#1F9E74,#2EC4B6);color:#fff;border-radius:20px;padding:16px;text-align:center;margin:6px 0 12px}
.z-result>small{opacity:.9;font-weight:700}.z-result>b{display:block;font:800 32px/1.3 var(--font-head)}
.z-lines{margin-top:8px;text-align:start}.z-lines div{display:flex;justify-content:space-between;font-size:13.5px;padding:3px 0;border-top:1px dashed rgba(255,255,255,.3)}
.z-result p{font-size:13.5px;margin-top:8px;line-height:1.7}
.zakat-banner .i:first-child{color:#1F9E74}

/* 3.5.3 splash: a boy and a girl climb the stairs together, then become the sun and the sprout */
.ml-logo .lg-kids{opacity:0}
.ml-logo.anim .lg-kids{opacity:1;animation:lgClimb 2.1s .85s cubic-bezier(.45,0,.35,1) both}
.ml-logo.anim .lg-kb,.ml-logo.anim .lg-kg{transform-box:fill-box}
.ml-logo.anim .lg-kb{transform-origin:50% 100%;animation:lgToSun .7s 3.0s cubic-bezier(.5,0,.3,1) forwards}
.ml-logo.anim .lg-kg{transform-origin:50% 100%;animation:lgToSprout .6s 3.05s cubic-bezier(.5,0,.3,1) forwards}
@keyframes lgClimb{
  0%{transform:translate(18px,424px)}
  12%{transform:translate(52px,424px)}
  20%{transform:translate(78px,352px)}
  28%{transform:translate(104px,330px)}
  40%{transform:translate(150px,268px)}
  50%{transform:translate(198px,262px)}
  62%{transform:translate(250px,196px)}
  72%{transform:translate(296px,194px)}
  100%{transform:translate(296px,194px)}}
@keyframes lgToSun{0%{transform:none;opacity:1}55%{transform:translate(28px,-46px) scale(.75);opacity:.9}100%{transform:translate(40px,-60px) scale(.2);opacity:0}}
@keyframes lgToSprout{0%{transform:none;opacity:1}100%{transform:translate(8px,6px) scale(.15,.1);opacity:0}}
.ml-logo.anim .lg-ball{animation:none;opacity:0}
.ml-logo.anim .lg-sun{animation:lgSun .8s 3.15s cubic-bezier(.2,.9,.3,1.2) both}
.ml-logo.anim .lg-glow{animation:lgFade 1s 3.3s both}
.ml-logo.anim .lg-stem{animation:lgDraw .4s 3.2s ease-out forwards}
.ml-logo.anim .lg-lf1{animation:lgLeaf .55s 3.4s cubic-bezier(.3,1.6,.5,1) both}
.ml-logo.anim .lg-lf2{animation:lgLeaf .55s 3.5s cubic-bezier(.3,1.6,.5,1) both}
.ml-logo.anim .lg-s1{animation-duration:.55s}.ml-logo.anim .lg-s2{animation-delay:.25s}.ml-logo.anim .lg-s3{animation-delay:.45s}
.splash-logo{width:156px;height:156px;border-radius:42px}
.splash-word{font-size:40px;animation:rise .6s 3.7s var(--ease) both}
.splash-slogan{animation:rise .7s 3.95s var(--ease) both!important;opacity:1}
.wl-word.intro{animation:rise .6s 3.7s var(--ease) both}.wl-tag.intro{animation:rise .6s 3.9s var(--ease) both}
@media (prefers-reduced-motion:reduce){.ml-logo.anim .lg-kids{display:none}}
/* 3.5.3 path card + how it works */
.path-card{padding-bottom:14px}
.path{display:flex;align-items:flex-start;gap:0;margin-top:6px}
.path .pline{flex:1;height:3px;background:var(--line);border-radius:3px;margin-top:22px;min-width:8px}
.pstep{flex:0 0 auto;width:74px;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit;text-align:center}
.pstep .pdot{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-3);border:2px solid var(--line);transition:transform .2s}
.pstep .pdot .i{width:20px;height:20px}
.pstep b{font-size:12.5px;font-weight:800;line-height:1.3}.pstep small{font-size:11px;color:var(--ink-3);font-weight:700}
.pstep.cur .pdot{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 0 6px var(--accent-soft);animation:pulseDot 1.8s ease-in-out infinite}
.pstep.done .pdot{background:var(--mint);border-color:var(--mint);color:#fff}
.pstep.done small{color:var(--mint)}
@keyframes pulseDot{50%{box-shadow:0 0 0 10px transparent}}
.path-done{margin-top:12px;text-align:center;font-weight:800;color:var(--mint)}
.card-h .link .i{width:15px;height:15px}
.info-btn .i{width:20px;height:20px}
.how-flow .flow-list{list-style:none;padding:0;margin:6px 0 8px;display:grid;gap:12px}
.flow-list li{display:flex;gap:12px;align-items:flex-start}
.fl-n{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}
.flow-list b{display:block;font-weight:800}.flow-list small{color:var(--ink-2);line-height:1.7}
.term-list{display:grid;gap:10px}
.term .term-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}.term .term-h b{font-size:17px;font-weight:800}
.term .ico{width:40px;height:40px;border-radius:13px;display:grid;place-items:center}
.term p{line-height:1.8;margin:0 0 4px}.term .term-ex{color:var(--ink-2);font-size:13.5px}
.term-f{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;flex-wrap:wrap}.term-f small{color:var(--ink-3);font-weight:700;display:flex;align-items:center;gap:4px}.term-f small .i{width:14px;height:14px}
@media (max-width:360px){.pstep{width:64px}.pstep b{font-size:11.5px}}
.pin-in{text-align:center;font:800 26px/1 ui-monospace,monospace;letter-spacing:10px}
.pin-err{color:var(--coral);font-weight:800;min-height:22px;margin:8px 0 4px;text-align:center}
.check-row{display:flex;align-items:center;gap:8px;font-weight:700}
.sub-counter.life{align-items:center}.sub-counter.life b{font-size:17px}
.pin-in::placeholder{letter-spacing:normal;font:600 15px var(--font)}
/* 3.5.4 — splash logo motion v2: tile → steps → sun & rays → sprout → shine → name → slogan */
.ml-logo .lg-rays,.ml-logo .lg-spk{display:none}
.ml-logo.anim .lg-rays,.ml-logo.anim .lg-spk{display:inline}
.ml-logo .lg-shine{transform:translateX(0)}
.ml-logo.anim .lg-s1{animation:lgRise .6s .55s cubic-bezier(.3,1.45,.5,1) both}
.ml-logo.anim .lg-s2{animation:lgRise .6s .72s cubic-bezier(.3,1.45,.5,1) both}
.ml-logo.anim .lg-s3{animation:lgRise .65s .9s cubic-bezier(.3,1.45,.5,1) both}
.ml-logo.anim .lg-sun{animation:lgSun 1s 1.3s cubic-bezier(.2,.9,.25,1.15) both}
.ml-logo.anim .lg-glow{animation:lgGlow 2.4s 1.5s ease-in-out both}
.ml-logo.anim .lg-rays{transform-box:view-box;transform-origin:346px 158px;animation:lgRaysIn .9s 1.55s cubic-bezier(.2,.9,.3,1.2) both}
.ml-logo.anim .lg-rays-spin{transform-box:view-box;transform-origin:346px 158px;animation:lgSpin 24s 1.55s linear infinite}
.ml-logo.anim .lg-stem{animation:lgDraw .5s 2s ease-out forwards}
.ml-logo.anim .lg-lf1{animation:lgLeaf .6s 2.3s cubic-bezier(.3,1.6,.5,1) both}
.ml-logo.anim .lg-lf2{animation:lgLeaf .6s 2.42s cubic-bezier(.3,1.6,.5,1) both}
.ml-logo.anim .lg-sprout{transform-box:view-box;transform-origin:350px 190px;animation:lgSway 3.2s 3s ease-in-out infinite}
.ml-logo.anim .lg-shine{animation:lgShine 1.1s 2.85s cubic-bezier(.4,0,.2,1) both}
.ml-logo.anim .lg-spk path{transform-box:fill-box;transform-origin:center;animation:lgTwinkle 1.6s ease-in-out infinite both}
.ml-logo.anim .lg-spk path:nth-child(1){animation-delay:3.1s}.ml-logo.anim .lg-spk path:nth-child(2){animation-delay:3.4s}.ml-logo.anim .lg-spk path:nth-child(3){animation-delay:3.7s}
@keyframes lgRaysIn{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes lgSpin{to{transform:rotate(360deg)}}
@keyframes lgGlow{0%{opacity:0}55%{opacity:1}100%{opacity:.75}}
@keyframes lgSway{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}
@keyframes lgShine{from{transform:translateX(0)}to{transform:translateX(900px)}}
@keyframes lgTwinkle{0%,100%{transform:scale(0);opacity:0}45%{transform:scale(1.1) rotate(20deg);opacity:1}70%{transform:scale(.8);opacity:.8}}
.splash-logo{width:168px;height:168px;border-radius:46px;animation:logoIn 1s cubic-bezier(.2,.9,.25,1.12) both,logoFloat 4s 3.4s ease-in-out infinite;box-shadow:0 30px 70px -18px rgba(0,0,0,.55),0 0 0 0 rgba(255,201,77,0)}
@keyframes logoIn{0%{transform:scale(.35) rotate(-14deg);opacity:0;filter:blur(10px)}60%{transform:scale(1.06) rotate(2deg);opacity:1;filter:blur(0)}100%{transform:none;opacity:1}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.splash-word{font-size:46px;animation:wordReveal .9s 3.35s cubic-bezier(.2,.8,.2,1) both}
@keyframes wordReveal{from{clip-path:inset(0 0 0 100%);transform:translateY(8px);opacity:.2}to{clip-path:inset(0 0 0 0);transform:none;opacity:1}}
html[dir=ltr] .splash-word{animation-name:wordRevealL}
@keyframes wordRevealL{from{clip-path:inset(0 100% 0 0);transform:translateY(8px);opacity:.2}to{clip-path:inset(0 0 0 0);transform:none;opacity:1}}
.splash-slogan{animation:none!important;opacity:1}
.splash-slogan span{display:inline-block;animation:sloganWord .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes sloganWord{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.wl-word.intro{animation:wordReveal .9s 3.35s cubic-bezier(.2,.8,.2,1) both}.wl-tag.intro{animation:rise .7s 3.9s var(--ease) both}
.wl-logo.intro .ml-logo{animation:logoIn 1s cubic-bezier(.2,.9,.25,1.12) both}
@media (prefers-reduced-motion:reduce){.splash-logo,.splash-word,.splash-slogan span{animation:none!important}}
[dir=rtl] .flip-rtl{transform:scaleX(-1)}
.car{position:relative;display:flex;align-items:center;gap:6px;margin-top:4px}
.car-track{flex:1;min-width:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.car-track::-webkit-scrollbar{display:none}
.car-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;min-width:0}
.car-slide .sc-next{width:100%;margin:0}
.sc-next.done{opacity:.75}.sc-next.done .ico{background:var(--mint-soft)!important;color:var(--mint)!important}
.car-arrow{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink-2);cursor:pointer;padding:0}
.car-arrow .i{width:16px;height:16px}.car-arrow[disabled]{opacity:.3;cursor:default}
.car-dots button{width:8px;height:8px;border-radius:9px;background:var(--line);border:none;padding:0;cursor:pointer;transition:width .2s}
.car-dots button.on{background:var(--mint)}.car-dots button.cur{width:22px;background:var(--accent)}
.azkar{touch-action:pan-y}
/* 3.6 sport timer */
.sp-now{text-align:center;background:linear-gradient(135deg,var(--accent),#A48BFF);color:#fff;border-radius:24px;padding:18px 16px;margin-bottom:12px}
.sp-now small{opacity:.85;font-weight:700}.sp-now b{display:block;font-size:19px;font-weight:800;margin:4px 0 6px;line-height:1.5}
.sp-time{font:800 54px/1 var(--font-head);font-variant-numeric:tabular-nums;direction:ltr}
.sp-bar{height:8px;border-radius:8px;background:rgba(255,255,255,.25);margin-top:12px;overflow:hidden}.sp-bar i{display:block;height:100%;background:#fff;border-radius:8px;transition:width .25s linear}
.sp-steps{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px}
.sp-steps li{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;background:var(--surface-2);font-weight:700;font-size:14px}
.sp-steps li em{font-style:normal;color:var(--ink-3);white-space:nowrap}.sp-steps li.cur{background:var(--accent-soft);color:var(--accent-ink)}.sp-steps li.done{opacity:.5;text-decoration:line-through}
/* 3.6 intro: viewport screenshots, quicker feel, tap to advance */
.iv-screen img{height:100%;object-fit:cover;object-position:top;animation:ivZoom 4.6s ease-out both}
@keyframes ivZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
.iv-phone{transition:opacity .35s ease,transform .35s cubic-bezier(.2,.9,.3,1.1)!important}
.iv-bars i{cursor:pointer}
.iv-start{display:none!important}
.iv-tap-hint{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;font-size:12px;color:rgba(255,255,255,.6);font-weight:700;pointer-events:none}

/* ---------- 3.6 «يومي ببساطة» ---------- */
.sd-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px;border-radius:var(--r-lg,22px);background:linear-gradient(135deg,var(--accent),#7C5CFA);color:#fff;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.sd-hero small{opacity:.85;font-weight:700}
.sd-hero h2{margin:2px 0 4px;font-family:var(--font-head);font-size:1.35rem}
.sd-hero p{margin:0;opacity:.95;font-weight:700}
.sd-hero .ring b{color:#fff}
.sd-step{position:relative;transition:box-shadow .2s var(--ease)}
.sd-step.cur{box-shadow:0 0 0 2px var(--accent),var(--shadow-sm)}
.sd-step.done .sd-n{background:var(--mint);color:#fff}
.sd-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sd-h>div{flex:1;min-width:0}
.sd-h b{display:block;font-family:var(--font-head);font-size:1.05rem}
.sd-h small{color:var(--ink-3);font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-n{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);flex:none}
.sd-n .i{width:22px;height:22px}
.sd-form{display:grid;gap:6px}
.sd-form label{font-weight:800;font-size:.9rem;color:var(--ink-2);margin-top:4px}
.sd-sum{margin:0;color:var(--ink-2);font-weight:700}
.sd-list{margin-top:4px}
.sd-pref{margin:16px 4px 8px;color:var(--ink-2);font-size:.9rem}

/* ---------- 3.6 «اسأل دائم» ---------- */
.ask-wrap{display:flex;flex-direction:column;min-height:calc(100vh - 210px)}
.ask-log{flex:1;display:flex;flex-direction:column;gap:10px;padding-bottom:8px}
.ask-msg{display:flex;gap:8px;align-items:flex-end;max-width:92%;animation:pop .25s var(--spring)}
.ask-msg.me{align-self:flex-end}
.ask-msg.bot{align-self:flex-start}
.ask-av{width:32px;height:32px;flex:none;border-radius:12px;background:var(--surface);box-shadow:var(--shadow-sm);display:grid;place-items:center;overflow:hidden}
.ask-av svg{width:28px;height:28px}
.ask-b{background:var(--surface);border-radius:18px;padding:10px 14px;box-shadow:var(--shadow-sm);line-height:1.8}
.ask-b p{margin:0;font-weight:600}
.ask-msg.me .ask-b{background:var(--accent);color:#fff;border-end-end-radius:6px}
.ask-msg.bot .ask-b{border-end-start-radius:6px}
.ask-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ask-acts .btn{min-height:36px}
.ask-sug{margin-top:8px}
.ask-top{margin:8px 0}
.ask-top.hide{display:none}
.ask-bar{position:sticky;bottom:calc(var(--safe-b,0px) + 74px);display:flex;gap:8px;background:var(--bg);padding:8px 0;z-index:3}
.ask-bar .input{flex:1}
.ask-send{width:48px;padding:0;flex:none}
.ask-clear{margin:4px auto 0;color:var(--ink-3)}
.typing{display:flex;gap:4px;padding:14px 16px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:askdot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes askdot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.ask-btn .i{width:21px;height:21px}
button.link{background:none;border:none;color:var(--accent-ink);font-weight:700;display:inline-flex;align-items:center;gap:4px;padding:4px;cursor:pointer}

/* 3.6.2 intro: lighter theme, slogan on one line */
.intro-vid{background:radial-gradient(120% 85% at 50% 0%,#B6A2FF 0%,#8E70FF 40%,#6B4CF0 100%)}
.iv-bars i{background:rgba(255,255,255,.35)}
.iv-btn,.iv-skip{background:rgba(255,255,255,.22)}
.iv-slogan{max-width:none;white-space:nowrap;font-size:min(6.2vw,30px);color:#FFF3C4;text-shadow:0 3px 14px rgba(40,20,120,.45)}
.iv-end{gap:26px}
.iv-tap-hint{color:rgba(255,255,255,.8)}

/* 3.6.3 «محتاج مساعدة؟» companion */
.help-nudge{position:fixed;inset-inline-start:12px;bottom:calc(var(--safe-b,0px) + 92px);z-index:45;animation:hnIn .45s var(--spring) both}
.help-nudge.out{animation:hnOut .25s ease forwards}
.hn-main{display:flex;flex-direction:column;align-items:center;gap:4px;border:none;background:none;padding:0;cursor:pointer;font:inherit;color:inherit}
.hn-char{width:84px;height:84px;border-radius:50%;background:var(--surface);box-shadow:0 14px 30px -12px rgba(30,20,80,.45),0 0 0 4px var(--accent-soft);overflow:hidden;display:grid;place-items:center;animation:hnBob 2.4s ease-in-out infinite}
.hn-char svg{width:92%;height:92%;margin-top:8px}
.hn-txt{display:flex;flex-direction:column;align-items:center;background:var(--accent);color:#fff;border-radius:16px;padding:6px 12px;box-shadow:0 10px 24px -10px rgba(30,20,80,.5);max-width:180px;text-align:center}
.hn-txt b{font-size:14px;line-height:1.3}.hn-txt small{font-size:11px;opacity:.9;font-weight:700;line-height:1.4}
.hn-x{position:absolute;top:-6px;inset-inline-end:-6px;width:26px;height:26px;border-radius:50%;border:none;background:var(--surface);color:var(--ink-2);box-shadow:var(--shadow-sm);display:grid;place-items:center;z-index:2;cursor:pointer}
.hn-x .i{width:14px;height:14px}
@keyframes hnIn{from{opacity:0;transform:translateY(30px) scale(.7)}to{opacity:1;transform:none}}
@keyframes hnOut{to{opacity:0;transform:translateY(20px) scale(.8)}}
@keyframes hnBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* 3.6.4 topbar labels + alternating help button + English card */
.tb-act{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none}
.tb-act small{font-size:10.5px;font-weight:800;color:var(--ink-2);line-height:1}
.tb-act .search-btn{margin-inline-start:0}
.tb-act:has(.search-btn){margin-inline-start:auto}
.ask-btn{position:relative;overflow:visible}
.ask-btn .ab-chat,.ask-btn .ab-char{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .45s ease,transform .45s var(--spring)}
.ask-btn .ab-char{opacity:0;transform:scale(.6);border-radius:14px;overflow:hidden;background:var(--accent-soft)}
.ask-btn .ab-char svg{width:120%;height:120%;margin-top:10px}
.ask-btn.alt .ab-chat{opacity:0;transform:scale(.6)}
.ask-btn.alt .ab-char{opacity:1;transform:none}
.ask-btn .ab-note{position:absolute;top:-10px;inset-inline-end:-14px;background:var(--accent);color:#fff;font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:8px;white-space:nowrap;opacity:0;transform:translateY(4px) scale(.8);transition:opacity .35s ease .25s,transform .35s var(--spring) .25s;pointer-events:none;box-shadow:0 4px 10px -4px rgba(0,0,0,.35)}
.ask-btn.alt .ab-note{opacity:1;transform:none}
.eng-card{display:flex;align-items:center;gap:12px;width:100%;border:none;text-align:start;padding:14px 16px;margin:0 0 14px;border-radius:var(--r-lg,22px);background:linear-gradient(135deg,#3D8BFF,#7C5CFA);color:#fff;box-shadow:0 14px 30px -16px rgba(61,139,255,.8);cursor:pointer;font:inherit}
.eng-card .txt{flex:1;min-width:0}.eng-card b{display:block;font-size:17px}.eng-card small{display:block;font-size:12.5px;opacity:.92;font-weight:700}
.eng-card .eng-bubbles{position:relative;width:64px;height:48px;flex:none}
.eng-card .eng-bubbles i{position:absolute;font-style:normal;font-size:11px;font-weight:800;padding:4px 8px;border-radius:10px;white-space:nowrap}
.eng-card .b1{top:0;inset-inline-start:0;background:#fff;color:#2B2540}
.eng-card .b2{bottom:0;inset-inline-end:0;background:#FFC94D;color:#2B2540}
.eng-card .i{width:20px;height:20px}

/* 3.6.5 topbar: every action the same size, label under each */
.topbar{gap:8px}
.tb-act{height:56px;justify-content:center}
.tb-act>button{height:40px}
.tb-act .pill{height:40px;display:inline-flex;align-items:center}
.ask-btn{width:40px;height:40px}
.ask-btn .ab-char{inset:0;width:40px;height:40px}
.ask-btn .ab-char svg{width:40px!important;height:40px!important;margin-top:5px}
.ask-btn .ab-note{top:-8px;inset-inline-end:50%;transform:translate(50%,4px) scale(.8);font-size:9px;padding:1px 6px}
[dir=ltr] .ask-btn .ab-note{transform:translate(-50%,4px) scale(.8)}
.ask-btn.alt .ab-note{transform:translate(50%,0)}
[dir=ltr] .ask-btn.alt .ab-note{transform:translate(-50%,0)}
.topbar .tb-title h1{font-size:clamp(17px,4.6vw,21px)}
.topbar .tb-title h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .tb-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 3.6.7 adhkar swipe: slide in the swipe direction */
.azkar-sheet .sheet-body,.azkar{touch-action:pan-y}
.azkar.swap[data-dir=f]{opacity:0;transform:translateX(-40px)}[dir=rtl] .azkar.swap[data-dir=f]{transform:translateX(40px)}
.azkar.swap[data-dir=b]{opacity:0;transform:translateX(40px)}[dir=rtl] .azkar.swap[data-dir=b]{transform:translateX(-40px)}
.azkar{transition:opacity .18s,transform .18s}
.azkar-hint{text-align:center;font-size:12px;color:var(--ink-3);margin-top:6px}
.day-card .dc-row,.day-card .dc-next,.day-card .dc-all{width:100%;background:none;border-left:none;border-right:none;border-bottom:none;font:inherit;color:inherit;text-align:start;cursor:pointer}
.day-card .dc-row{border-top:none;padding:0}
.day-card .dc-next{padding-bottom:0;padding-inline:0}
.day-card .dc-all{display:flex;align-items:center;justify-content:flex-end;gap:4px;border-top:none;padding:8px 0 0;font-size:12.5px;font-weight:700;color:var(--accent-ink)}.day-card .dc-all .i{width:14px;height:14px}
/* 3.6.9 app update + share */
.upd-ver{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:var(--surface-2)}
.upd-ver>div{flex:1}.upd-ver small{display:block;font-size:12px;color:var(--ink-3);font-weight:700}.upd-ver b{font-family:var(--font-head);font-size:22px;line-height:1.2}
.upd-ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--mint-soft);color:var(--mint);flex:none}.upd-ico.new{background:#FDECEE;color:#E5484D}.upd-ico .i{width:24px;height:24px}
.upd-msg{margin:14px 2px 12px;line-height:1.8;font-weight:600}
.upd-notes{background:var(--accent-soft);border-radius:16px;padding:12px 14px;margin-bottom:12px}.upd-notes b{display:block;margin-bottom:4px;font-size:13px}.upd-notes p{font-size:13.5px;line-height:1.8;color:var(--ink-2)}
.upd-banner{padding:0;background:linear-gradient(135deg,#FFE9EC,#FFF4E6);border:1.5px solid #F7B6BE}
.upd-banner .txt-btn{flex:1;display:flex;align-items:center;gap:12px;padding:14px;background:none;border:none;font:inherit;color:inherit;text-align:start;cursor:pointer}
.upd-banner .txt-btn>.i{color:#E5484D;width:24px;height:24px}.upd-banner small{display:block;font-size:12.5px;color:var(--ink-2)}
.upd-banner .x{background:none;border:none;padding:12px;color:var(--ink-3);cursor:pointer}.upd-banner .x .i{width:18px;height:18px;color:var(--ink-3)}
.upd-admin textarea{min-height:76px;resize:vertical}
/* 3.7.1 keyboard open: no bottom bar squeezing the page; chat opens without the jump */
body.kb-open .tabbar,body.kb-open .fab,body.kb-open .help-nudge{display:none!important}
body.kb-open .ask-bar{bottom:calc(var(--safe-b,0px) + 6px)}
.ask-log.init .ask-msg{animation:none}
body.on-ask .fab,body.on-ask .help-nudge{display:none!important}
/* 1.0.0 worship: mosque, qiyam, salawat */
.faith-q{font-family:'Amiri','Traditional Arabic',var(--font);font-size:16.5px;line-height:1.95;color:var(--ink);background:var(--mint-soft);border-radius:14px;padding:10px 14px;margin-bottom:8px}
.faith-msg p{line-height:1.9;font-weight:600}
.faith-msg blockquote{margin:12px 0 0;font-family:'Amiri','Traditional Arabic',var(--font);font-size:17px;line-height:1.95;background:var(--mint-soft);border-inline-start:4px solid var(--mint);border-radius:12px;padding:10px 14px}
.salawat-line{display:flex;align-items:center;gap:10px;width:100%;margin-top:10px;padding:10px 12px;border:none;border-radius:14px;background:var(--mint-soft);text-align:start;font:inherit;color:inherit;cursor:pointer}
.salawat-line>span:first-child{width:36px;height:36px;border-radius:12px;background:var(--surface);display:grid;place-items:center;font-size:20px;color:#2EAD7A;flex:none}
.salawat-line b{display:block;font-size:14px}.salawat-line em{font-style:normal;color:#2EAD7A;margin-inline-start:4px}
.salawat-line small{display:block;font-size:11.5px;color:var(--ink-2);line-height:1.6}
.salawat-line:active{transform:scale(.98)}
.zikr{flex-direction:column;gap:10px}.zikr-fadl{display:block;font-family:var(--font);font-size:12.5px;line-height:1.7;color:var(--ink-2);background:var(--mint-soft);border-radius:12px;padding:8px 12px}
/* 1.0.0 «نبدأ صح» companion */
.cp{display:flex;flex-direction:column;gap:10px}
.cp h3{font-size:20px;margin:2px 0}
.cp p{line-height:1.95;font-size:15px}
.cp-av{width:84px;height:84px;margin:0 auto 2px}.cp-av svg{width:100%;height:100%}
.cp-paths{display:grid;gap:8px;margin-top:4px}
.cp-path{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);font:inherit;color:inherit;text-align:start;cursor:pointer}
.cp-path .ico{width:38px;height:38px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex:none}.cp-path .ico .i{width:20px;height:20px}
.cp-path b{font-size:15px}.cp-path.ghost{border-style:dashed}
.cp-path:active{transform:scale(.98)}
.cp-note{background:var(--accent-soft);border-radius:14px;padding:10px 12px;font-weight:600}
.cp-q{margin:4px 0;font-family:'Amiri','Traditional Arabic',var(--font);font-size:16.5px;line-height:1.9;background:var(--mint-soft);border-inline-start:4px solid var(--mint);border-radius:12px;padding:10px 14px}
.cp-steps{display:grid;gap:8px}
.cp-step{display:block;padding:12px 14px;border-radius:16px;border:1.5px solid var(--line);cursor:pointer}
.cp-step input{display:none}.cp-step b{display:block}.cp-step small{color:var(--ink-2);font-size:13px}
.cp-step.on{border-color:var(--accent);background:var(--accent-soft)}
.cp-deal{text-align:center;background:var(--accent-soft);border-radius:18px;padding:14px}.cp-deal b{display:block;font-size:17px}.cp-deal small{color:var(--ink-2)}
.cp-card .cp-row{display:flex;gap:12px;align-items:center}.cp-card .cp-row svg{width:62px;height:62px;flex:none}
.cp-card .cp-row p{font-size:13.5px;color:var(--ink-2);line-height:1.8;margin-top:2px}
.cp-card .cp-h small{display:block;color:var(--ink-3);font-weight:700;font-size:12px}.cp-card .cp-h b{font-size:17px}
.cp-dots{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;margin:12px 0 8px}
.cp-dots i{height:10px;border-radius:5px;background:var(--surface-2)}.cp-dots i.on{background:var(--mint)}.cp-dots i.now{outline:2px solid var(--accent);outline-offset:1px}
.cp-msg{font-size:13.5px;color:var(--ink-2);margin-bottom:10px;line-height:1.8}
.cp-card.done{background:linear-gradient(135deg,var(--mint-soft),var(--surface))}
/* 1.0.1 meal week */
.meal-why{margin-bottom:10px}
.meal-days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px 4px;scrollbar-width:none}.meal-days::-webkit-scrollbar{display:none}
.meal-days .md{position:relative;flex:none;width:112px;text-align:start;padding:10px 12px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);font:inherit;color:inherit;cursor:pointer}
.meal-days .md b{display:block;font-size:14px}.meal-days .md small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11.5px;color:var(--ink-2);line-height:1.5;margin-top:2px}
.meal-days .md.on{border-color:var(--accent);background:var(--accent-soft)}
.meal-days .md i{position:absolute;top:8px;inset-inline-end:8px;color:var(--accent-ink)}.meal-days .md i .i{width:14px;height:14px}
.swap-opt.on{background:var(--accent-soft)}
.shop-list{list-style:none;margin:0;padding:0}.shop-list li{display:flex;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px dashed var(--line)}.shop-list li b{white-space:nowrap}
/* 1.0.1 iPhone */
.ios-guide .ig-lead{line-height:1.9;font-weight:600;margin-bottom:10px}
.ig-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ig-steps li{display:flex;gap:12px;align-items:flex-start;background:var(--surface-2);border-radius:16px;padding:12px 14px;line-height:1.8}
.ig-n{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.ig-ico{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--surface);vertical-align:middle;color:#0A84FF}.ig-ico .i{width:18px;height:18px}
.ig-steps small{display:block;color:var(--ink-3);font-size:12px}
.push-card{padding:0}.push-card.banner:not(div){padding:14px}
.push-card .txt-btn{flex:1;display:flex;align-items:center;gap:12px;padding:14px;background:none;border:none;font:inherit;color:inherit;text-align:start;cursor:pointer}
.push-card .x{background:none;border:none;padding:12px;color:var(--ink-3);cursor:pointer}
.push-card small{display:block;font-size:12.5px;color:var(--ink-2)}
/* 1.1 journal lessons */
.j-vent{min-height:110px}
.lessons-hero p{color:var(--ink-2);font-size:14px;line-height:1.8;margin:4px 0 10px}
.item.lesson b{font-weight:600;line-height:1.8}
/* 1.1 support + wallet */
.sup-hero{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,var(--accent-soft),var(--mint-soft));border-radius:20px;padding:14px;margin-bottom:12px}
.sup-hero svg{width:64px;height:64px;flex:none}.sup-hero b{font-size:17px}.sup-hero p{font-size:13.5px;line-height:1.8;color:var(--ink-2);margin-top:2px}
.sup-opts{display:grid;gap:8px;margin-bottom:12px}
.sup-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);font:inherit;color:inherit;text-align:start;cursor:pointer}
.sup-opt .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);flex:none}.sup-opt .ico .i{width:20px;height:20px}
.sup-opt b{display:block;font-size:14.5px}.sup-opt small{color:var(--ink-3);font-size:12px}
.wallet-num{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 4px;padding:10px 14px;border-radius:14px;background:var(--surface-2)}
.wallet-num b{font-size:20px;letter-spacing:1px;font-family:var(--font-head)}
.legal .card h3{font-size:16px;margin-bottom:6px}.legal .card p{line-height:1.95;color:var(--ink-2);font-size:14.5px}
.auth-legal{font-size:12.5px;color:var(--ink-3);text-align:center;margin-top:10px;line-height:1.8}.auth-legal a{color:var(--accent-ink);font-weight:700}
/* 1.1 gradual unlock */
.tab.soon{opacity:.55}.tab.soon::after{content:"";position:absolute;top:8px;inset-inline-end:calc(50% - 18px);width:8px;height:8px;border-radius:50%;background:var(--sun,#F2A93B)}
.tab{position:relative}
.unlock-card{text-align:center;padding:24px 18px}
.ul-ico{width:68px;height:68px;margin:0 auto 10px;border-radius:22px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink)}.ul-ico .i{width:34px;height:34px}
.ul-ico.big{width:84px;height:84px}
.unlock-card h2{font-size:22px;margin-bottom:6px}.unlock-card p{line-height:1.9;margin-bottom:10px}
.ul-when{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--surface-2);font-weight:700;margin-bottom:12px}.ul-when .i{width:16px;height:16px}
.ul-new{text-align:center}.ul-new p{line-height:1.9;margin:8px 0}
/* 1.1 together */
.tg-intro p{color:var(--ink-2);line-height:1.85;font-size:14px;margin:4px 0 10px}
.tg-code{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:14px;padding:10px 12px}.tg-code span{color:var(--ink-3);font-size:13px}.tg-code b{flex:1;font-size:20px;letter-spacing:2px;font-family:var(--font-head)}
.tg-buddy .tg-bh{display:flex;align-items:center;gap:10px}.tg-av{width:42px;height:42px;border-radius:14px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:18px;flex:none}
.tg-bh>div{flex:1;min-width:0}.tg-bh small{display:block;color:var(--ink-3);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tg-state{font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--surface-2);white-space:nowrap}.tg-state.ok{background:var(--mint-soft);color:#1F8E5E}
.tg-meta{color:var(--ink-2);font-size:13px;margin:8px 0}.tg-meta .i{width:14px;height:14px;vertical-align:-2px}
.tg-cheer-row{display:flex;flex-wrap:wrap;gap:6px}.tg-cheer-row .chip{font-size:12.5px}
.tg-cheer{display:flex;gap:8px;align-items:center;padding:6px 0;font-size:14px}.tg-cheers>b{display:block;margin-bottom:4px}
.tg-add{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}.tg-add select{max-width:130px}.tg-add input[name=t]{flex:1;min-width:120px}
.tg-board{list-style:none;padding:0;margin:4px 0 8px;counter-reset:r}.tg-board li{display:flex;justify-content:space-between;padding:8px 10px;border-radius:12px;counter-increment:r}.tg-board li::before{content:counter(r);width:22px;color:var(--ink-3);font-weight:700}.tg-board li span{flex:1}.tg-board li.me{background:var(--accent-soft)}
.tg-load{text-align:center;color:var(--ink-3);padding:24px}
/* 1.1 admin numbers */
.an-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.an-grid.three{margin:0}
.an-k{background:var(--surface);border-radius:16px;padding:10px 12px;box-shadow:var(--shadow-sm)}.an-k small{display:block;color:var(--ink-3);font-size:11.5px;font-weight:700}.an-k b{font-size:22px;font-family:var(--font-head)}
.an-bars{display:flex;align-items:flex-end;gap:3px;height:110px;direction:ltr}.an-bars i{flex:1;background:var(--accent);border-radius:4px 4px 0 0;min-height:2px;opacity:.85}
.an-row{display:flex;justify-content:space-between;padding:8px 2px;border-bottom:1px dashed var(--line)}

/* ===== 1.1.1 — one version: «تفعيل الاشتراك», meals card lines, InBody on the phone ===== */
.price-card .pc-top b{font-size:26px;margin-top:2px}
.price-card .btn.pc-act{background:#FFD36B;color:#2B1D00;font-weight:800;font-size:16px;min-height:52px;box-shadow:0 10px 24px -12px rgba(255,211,107,.9);border:none}
.price-card .btn.pc-act .i{color:#2B1D00}
.price-card .btn.pc-refresh{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.28);margin-top:8px;font-weight:700}
.price-card .btn.pc-refresh .i{color:#fff}
.act-opts .sup-opt{padding:14px}
.act-opts .sup-opt > .i:last-child{margin-inline-start:auto;color:var(--ink-3);width:18px;height:18px}
.act-opts .sup-opt small{display:block;font-size:13.5px;font-weight:700;color:var(--ink-2);margin-top:2px;text-align:start}
.act-wa .ico{background:#DFF7E8!important;color:#1A9E52!important}
.act-mail .ico{background:#E7EEFF!important;color:#3466E0!important}
.meal-lines{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.meal-lines span{display:block;line-height:1.55}
.meal-lines .ml-head{font-weight:800;color:var(--mint);font-size:14px}
.ib-form .card-h{margin-bottom:8px}
.ib-photo-pick{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1.5px dashed var(--line);background:var(--bg);cursor:pointer;margin-bottom:10px}
.ib-photo-pick > .i{width:26px;height:26px;color:var(--accent);flex:none}
.ib-photo-pick b{display:block;font-size:14px}.ib-photo-pick small{color:var(--ink-3);font-size:12px}
.ib-preview{position:relative;margin-bottom:12px;border-radius:14px;overflow:hidden;border:1px solid var(--line);max-height:220px}
.ib-preview img{display:block;width:100%;height:auto}
.ib-preview.big{max-height:none}
.ib-preview .btn{position:absolute;bottom:8px;inset-inline-start:8px;background:var(--surface)}
.ib-inputs{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.ib-in label{display:flex;flex-direction:column;gap:1px}
.ib-in label small{font-size:10.5px;color:var(--ink-3);font-weight:600;text-align:start}
.ib-in .req{color:var(--coral);font-style:normal}
.ib-in-row{display:flex;align-items:center;gap:6px}.ib-in-row .input{flex:1;min-width:0}
.ib-in-row span{font-size:12px;color:var(--ink-3);font-weight:700;min-width:22px}
.ib-in label{min-height:46px;justify-content:flex-end}
.ib-in label > span{display:block}
.ib-in label small{line-height:1.3}
/* 1.1.2 — قيام الليل: before Isha */
.qiyam-wait{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--accent-soft);color:var(--accent-ink);font-size:.86rem;line-height:1.7}
.qiyam-wait svg{flex:none;width:18px;height:18px;margin-top:3px}
/* 1.1.2 — account card & e-mail rows: long e-mails stay inside, buttons never overflow */
.acct-email{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;direction:ltr;unicode-bidi:isolate;text-align:right;font-size:.95rem;font-weight:700;letter-spacing:0}
html[dir="ltr"] .acct-email{text-align:left}
.menu-item .acct-txt{flex:1;min-width:0;overflow:hidden}
.menu-item .acct-txt small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-card{overflow:hidden}
.acct-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:14px}
.acct-actions .btn{min-width:0;white-space:nowrap;padding-inline:14px;font-size:.92rem}
.acct-actions .btn span,.acct-actions .btn{overflow:hidden;text-overflow:ellipsis}
/* 1.1.2 — InBody sheet photos (kept with each scan, synced) */
.ib-ph{position:relative;display:block;width:100%;padding:0;border:none;border-radius:16px;overflow:hidden;background:var(--surface-2,#eef2f5);aspect-ratio:3/4;cursor:pointer}
.ib-ph img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .25s}
.ib-ph.ready img{opacity:1}
.ib-ph.missing::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 10px,rgba(0,0,0,.03) 10px 20px)}
.ib-ph-cap{position:absolute;inset:auto 0 0 0;display:flex;align-items:center;gap:6px;padding:18px 10px 8px;color:#fff;font-size:.78rem;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.ib-ph-cap svg{width:15px;height:15px;flex:none}
.ib-ph-wide{aspect-ratio:4/3;margin-top:12px}
.ib-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.ib-view{display:grid;place-items:center}
.ib-view img{max-width:100%;max-height:72vh;border-radius:12px;object-fit:contain;background:#fff}
.ib-del{color:var(--coral)}

/* 1.1.4 — smoother on phones
   1) no live blur behind the top bar and the bottom tab bar: blurring while scrolling is the heaviest thing a phone does in this app */
.topbar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:color-mix(in srgb,var(--bg) 97%,transparent)}
.tabbar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--surface)}
/* 2) the characters move for a few seconds when a page opens, then rest — no endless repainting in the background */
.ch-body,.ch-head,.ch-eyes,.ch-arm-wave,.ch-arm-cheer-l,.ch-arm-cheer-r,.ch-tails,.ch-sparkles,.ch-zz{animation-iteration-count:2}
.ch-bust .ch-body,.ch-bust .ch-head,.ch-bust .ch-tails,.ch-bust .ch-sparkles,.ch-bust .ch-arm-wave{animation:none}
.station.current .node,.pstep.cur .pdot,.btn.glow{animation-iteration-count:4}
.ref-note{display:flex;gap:6px;align-items:flex-start;margin:-4px 0 10px}.ref-note .i{width:16px;height:16px;flex:none;margin-top:3px}
/* 1.1.4 — two buttons side by side always fit inside their card (longer feminine labels used to push them out) */
.row-actions .btn{min-width:0;padding-inline:12px;font-size:15px;line-height:1.3;white-space:normal;text-align:center}
.row-actions .btn .i{flex:none}
.quran-row>div{min-width:0}
.quran-row .stepper span{flex:1;min-width:0;text-align:center;font-size:14px}
.quran-row .btn{max-width:100%;white-space:normal;line-height:1.3}
@media (max-width:400px){.row-actions .btn{font-size:14px;padding-inline:10px;gap:6px}.quran-row{gap:10px}.quran-row .stepper span{font-size:12.5px;white-space:nowrap}.quran-row .stepper button{width:36px;height:36px}.quran-row .btn{font-size:13.5px;padding-inline:10px;gap:6px}}
@media (max-width:400px){.quran-row .qp{display:none}}
/* press-and-hold confirm (no phone lock / web) */
.hold-btn{position:relative;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.hold-btn::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.28);transform:scaleX(0);transform-origin:right;pointer-events:none}
[dir=ltr] .hold-btn::before{transform-origin:left}
.hold-btn.holding::before{transform:scaleX(1);transition:transform var(--hold,2000ms) linear}

/* ===================== Dayem 1.2 ===================== */
.chip-btn{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 13px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;text-decoration:none;white-space:nowrap}
.chip-btn .i{width:17px;height:17px}
.chip-btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.chip-btn.ghost{border-color:transparent;background:var(--surface-2)}
/* time-clash note */
.cf-note{display:flex;gap:10px;align-items:flex-start;background:var(--sun-soft);border-radius:14px;padding:11px 12px;margin-top:8px;font-size:13.5px;color:var(--ink-2)}
.cf-note>.i{flex:none;width:20px;height:20px;margin-top:2px;color:#C98A00}
.cf-note p{margin:0 0 8px;line-height:1.7}
.cf-acts{display:flex;flex-wrap:wrap;gap:6px}
.cf-acts .chip-btn{min-height:34px;font-size:12.5px;padding:0 10px}
/* «حياتي» */
.life-lead{color:var(--ink-2);font-size:14px;margin:0 4px 12px;line-height:1.8}
.life-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:700px){.life-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.life-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start;border:none;background:var(--surface);border-radius:20px;padding:14px;box-shadow:var(--shadow-sm);font:inherit;color:var(--ink);cursor:pointer;min-height:122px;min-width:0}
.life-card .lc-ico{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c);margin-bottom:4px}
.life-card .lc-ico .i{width:22px;height:22px}
.life-card b{font-size:15.5px}
.life-card small{font-size:12px;color:var(--ink-3);line-height:1.55;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.life-card.locked{opacity:.78}
.life-card .lc-lock{position:absolute;top:12px;inset-inline-end:12px;color:var(--ink-3)}
.life-card .lc-lock .i{width:16px;height:16px}
.life-card:active{transform:scale(.98)}
/* top 3 */
.top3-add{display:flex;gap:8px;margin-top:10px}
.top3-add .input{flex:1;min-width:0}
.tips{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tips li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.75;color:var(--ink-2)}
.tips li .i{flex:none;width:17px;height:17px;margin-top:4px;color:var(--accent)}
/* «شغلي» */
.work-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,#3D6BFF,#5B3FD6);color:#fff;border-radius:22px;padding:18px;margin-bottom:14px;flex-wrap:wrap}
.work-hero small{opacity:.85}
.work-hero h2{margin:2px 0;font-size:24px}
.work-hero p{margin:0;opacity:.9;font-size:13px}
.work-hero .pill{background:rgba(255,255,255,.18);color:#fff;border:none}
.focus-ring{display:grid;place-items:center;margin:6px 0 12px}
/* coach home */
.coach-chat{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.cb{display:flex;gap:8px;align-items:flex-end;max-width:92%}
.cb p{margin:0;padding:11px 14px;border-radius:18px;font-size:15px;line-height:1.7;background:var(--surface);box-shadow:var(--shadow-sm)}
.cb.d p{border-end-start-radius:6px}
.cb.me{align-self:flex-end;flex-direction:row-reverse}
.cb.me p{background:var(--accent);color:#fff;border-end-end-radius:6px}
.cb-av{flex:none;width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--accent-soft)}
.cb-av svg{width:100%;height:100%}
.cb-chips,.cb-acts,.coach-links{display:flex;flex-wrap:wrap;gap:8px;padding-inline-start:46px}
.coach-links{padding:0;justify-content:center;margin-top:6px}
.cb-acts{padding:0;margin-bottom:14px}
.cb-line{display:flex;align-items:center;gap:8px;background:var(--sky-soft);color:var(--ink-2);border-radius:14px;padding:10px 12px;font-size:13.5px;margin-bottom:12px}
.cb-line .i{flex:none;color:var(--sky)}
.cb-line span{flex:1}
.cb-next{display:flex;align-items:center;gap:12px;width:100%;border:none;background:var(--surface);border-radius:18px;padding:13px 14px;box-shadow:var(--shadow-sm);margin-bottom:14px;font:inherit;color:var(--ink);text-align:start;cursor:pointer}
.cb-next>.i{width:22px;height:22px;color:var(--accent);flex:none}
.cb-next span{flex:1;min-width:0;display:flex;flex-direction:column}
.cb-next small{color:var(--ink-3);font-size:12px}
.cb-next em{font-style:normal;font-weight:800;color:var(--accent-ink)}
.coach-close .stars{margin:6px 0 12px}
.coach-close .cb{max-width:100%;margin-bottom:6px}
/* discover: trips */
.mood-row{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px;scrollbar-width:none}
.mood-row::-webkit-scrollbar{display:none}
.trip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:700px){.trip-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.trip-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start;border:none;border-radius:20px;padding:14px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 16%,var(--surface)),var(--surface) 70%);box-shadow:var(--shadow-sm);font:inherit;color:var(--ink);cursor:pointer;min-width:0}
.trip-card .tc-ico{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--c);color:#fff;margin-bottom:4px}
.trip-card b{font-size:15.5px}
.trip-card small{font-size:12px;color:var(--ink-2);line-height:1.55}
.tc-meta{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3);font-weight:700}
.tc-meta .i{width:13px;height:13px;flex:none}
.place-facts{display:grid;gap:6px;margin-bottom:12px;font-size:13.5px;color:var(--ink-2)}
.place-facts span{display:flex;gap:8px;align-items:center}
.place-facts .i{width:16px;height:16px;color:var(--accent);flex:none}
.est-box{background:var(--surface-2);border-radius:18px;padding:12px;margin:12px 0}
.est-box .field{margin-bottom:10px}
.est-box .stepper{background:var(--surface);max-width:200px}
.est-box .stepper b{flex:1;text-align:center;font-size:17px}
.est{display:flex;gap:8px;align-items:center;font-size:14px;background:var(--mint-soft);border-radius:12px;padding:10px 12px}
.est .i{color:var(--mint);flex:none}
.book-links{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 6px}
.fund-card .fund-name{display:block;margin-bottom:8px}
.soft-debt{background:var(--accent-soft)}
.soft-debt .i{color:var(--accent-ink)}
.out-item{border:none;width:100%;text-align:start;font:inherit;cursor:pointer}
/* «حاجة تانية» */
.chip-other{border:1.5px dashed var(--line);background:transparent;color:var(--ink-2);font:inherit;font-weight:700;font-size:13.5px}
.choice-grid+.chips .chip-other{min-height:42px}
.other-box{display:flex;gap:6px;align-items:center;flex:1 1 220px;min-width:0}
.other-box .input{flex:1;min-width:0;min-height:42px}
/* contest */
.contest-mini{display:flex;align-items:center;gap:12px;width:100%;border:none;text-align:start;font:inherit;color:var(--ink);cursor:pointer;background:linear-gradient(135deg,color-mix(in srgb,#E9B949 22%,var(--surface)),var(--surface))}
.contest-mini .cm-ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#E9B949;color:#fff;flex:none}
.contest-mini .cm-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.contest-mini small{color:var(--ink-2);font-size:12.5px;line-height:1.6}
.contest-hero{text-align:center;background:linear-gradient(150deg,#F2A93B,#E0457B 55%,#7C5CFA);color:#fff;border-radius:24px;padding:22px 16px;margin-bottom:14px}
.contest-hero .ch-trophy .i{width:46px;height:46px}
.contest-hero h2{margin:6px 0 4px}
.contest-hero p{margin:0 0 14px;opacity:.95;line-height:1.7}
.ch-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ch-stats div{background:rgba(255,255,255,.18);border-radius:16px;padding:10px 4px}
.ch-stats b{display:block;font-size:22px}
.ch-stats small{opacity:.9;font-size:12px}
.board{display:grid;gap:6px}
.br{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;background:var(--surface-2)}
.br.me{background:var(--accent-soft);color:var(--accent-ink)}
.br-r{width:28px;text-align:center;font-weight:800}
.br b{flex:1;min-width:0}
.br em{font-style:normal;font-weight:800}
.stars.big button .i{width:44px;height:44px}
/* subscription plans */
.plan-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.plan-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;padding:12px 6px;border-radius:16px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);cursor:pointer;color:inherit}
.plan-opt input{position:absolute;opacity:0;pointer-events:none}
.plan-opt.on{background:rgba(255,255,255,.28);border-color:#fff}
.plan-opt b{font-size:14.5px}
.plan-opt small{font-size:11px;opacity:.9;line-height:1.45}
.disc-bar{margin-top:8px}
/* admin */
.admin-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:none;margin:0 -2px}
.admin-tabs::-webkit-scrollbar{display:none}
.admin-tabs button{flex:none;position:relative;border:none;border-radius:12px;padding:9px 13px;background:var(--surface);box-shadow:var(--shadow-sm);font:inherit;font-weight:700;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.admin-tabs button.on{background:var(--accent);color:#fff}
.admin-tabs em{font-style:normal;margin-inline-start:6px;background:var(--coral);color:#fff;border-radius:99px;padding:0 6px;font-size:11px}
.adm-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.adm-tile{display:flex;flex-direction:column;align-items:center;gap:2px;border:none;border-radius:16px;padding:12px 4px;background:var(--surface);box-shadow:var(--shadow-sm);font:inherit;color:var(--ink);cursor:pointer}
.adm-tile .i{color:var(--accent);width:20px;height:20px}
.adm-tile b{font-size:20px}
.adm-tile small{font-size:11.5px;color:var(--ink-3);text-align:center}
.fun-row{display:grid;grid-template-columns:minmax(0,9em) 1fr auto auto;gap:8px;align-items:center;font-size:13px;margin:7px 0}
.fun-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fun-row small{color:var(--ink-3);min-width:3em;text-align:end}
.hb{display:block;height:9px;border-radius:99px;background:var(--track);overflow:hidden}
.hb i{display:block;height:100%;border-radius:inherit}
.fb-item{border-top:1px solid var(--line);padding:11px 0}
.fb-item:first-of-type{border-top:none}
.fb-item.new{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 6%,transparent))}
.fb-h{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12px;color:var(--ink-3)}
.fb-h .pill-mini{display:inline-flex;gap:4px;align-items:center}
.fb-h .pill-mini .i{width:12px;height:12px}
.fb-item p{margin:6px 0;line-height:1.75;font-size:14px;white-space:pre-wrap;word-break:break-word}
.rate-sum{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rate-sum b{font-size:34px}
.rate-sum span{color:#FFC94D;font-size:20px;letter-spacing:2px}
.sec-mini{font-weight:800;font-size:13px;color:var(--ink-2);margin:12px 0 2px}
.err-m{font-family:ui-monospace,monospace;font-size:12.5px;background:var(--surface-2);border-radius:10px;padding:8px}
.err-s{font-size:11px;white-space:pre-wrap;word-break:break-all;max-height:220px;overflow:auto;background:var(--surface-2);border-radius:10px;padding:8px}
.an-bars.hours{height:90px}
.hours-ax{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);direction:ltr}
.cust-open{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.note.warn{background:var(--coral-soft)}
.note.warn .i{color:var(--coral)}
@media (max-width:400px){.plan-opt small{display:none}.fun-row{grid-template-columns:minmax(0,7em) 1fr auto}.fun-row small{display:none}.adm-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===================== Dayem 1.2.1 ===================== */
/* «سهران؟» */
.night-card{position:relative;overflow:hidden;border-radius:24px;padding:16px;margin-bottom:14px;color:#fff;background:linear-gradient(150deg,#1B1747,#3B2A8C 60%,#5B3FD6)}
.nc-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.7;animation:twinkle 2.4s ease-in-out 3}
.nc-stars i:nth-child(1){top:14px;left:22%}.nc-stars i:nth-child(2){top:38px;left:8%;animation-delay:.6s}.nc-stars i:nth-child(3){top:22px;left:48%;animation-delay:1.1s}.nc-stars i:nth-child(4){top:60px;left:30%;animation-delay:.3s}.nc-stars i:nth-child(5){top:10px;left:70%;animation-delay:1.6s}
@keyframes twinkle{50%{opacity:.15;transform:scale(.6)}}
.nc-h{position:relative;display:flex;gap:10px;align-items:flex-start;margin-bottom:12px}
.nc-moon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.14);flex:none}
.nc-moon .i{color:#FFD36B}
.nc-h div{flex:1;min-width:0}
.nc-h b{display:block;font-size:17px;line-height:1.6}
.nc-h small{opacity:.8;font-size:12.5px}
.nc-x{border:none;background:rgba(255,255,255,.12);color:#fff;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none}
.nc-x .i{width:16px;height:16px}
.nc-opts{position:relative;display:flex;flex-wrap:wrap;gap:8px}
.nc-opts button{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;border-radius:14px;padding:9px 12px;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer}
.nc-opts button:active{transform:scale(.97);background:rgba(255,255,255,.2)}
.night-pad{min-height:180px;line-height:1.9;resize:vertical;transition:all .9s var(--ease)}
.night-pad.fly{opacity:0;transform:translateY(-60px) scale(.9) rotate(-2deg);filter:blur(4px)}
.np-acts{display:grid;gap:8px;margin-top:12px}
.breath{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 0 18px}
.br-ball{width:90px;height:90px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#B9A8FF,var(--accent));box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 30%,transparent);transition:transform 4s ease-in-out,box-shadow 4s}
.br-ball.in{transform:scale(1.7);box-shadow:0 0 0 22px color-mix(in srgb,var(--accent) 12%,transparent)}
.br-ball.out{transform:scale(1)}
.breath b{font-size:20px;margin-top:28px}
.breath small{color:var(--ink-3)}
/* «عنّي» */
.about-row{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;padding:10px 2px;border-top:1px solid var(--line);font:inherit;color:var(--ink);text-align:start;cursor:pointer}
.about-card .card-h+.about-row{border-top:none}
.about-row .ico{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none}
.about-row .ico .i{width:17px;height:17px}
.ab-l{font-size:13.5px;color:var(--ink-2);flex:none;min-width:5.5em}
.ab-v{flex:1;min-width:0;font-weight:700;font-size:14px;text-align:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.about-row>.i:last-child{width:15px;height:15px;color:var(--ink-3);flex:none}
.gear-btn .i{width:22px;height:22px}
/* ideas */
.idea2 .card-h h3 .i{color:var(--c)}
.idea-topics{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-bottom:10px}
.idea-topics::-webkit-scrollbar{display:none}
.idea-topics .chip-btn{min-height:32px;font-size:12.5px;padding:0 11px;flex:none}
.idea-topics .chip-btn.on{background:color-mix(in srgb,var(--c) 14%,transparent);border-color:var(--c);color:var(--ink)}
.idea-body{background:color-mix(in srgb,var(--c) 7%,var(--surface-2));border-radius:16px;padding:13px 14px;animation:fadeUp .35s var(--ease)}
.idea-body b{display:block;margin-bottom:4px}
.idea-body p{margin:0;line-height:1.85;font-size:14.5px;color:var(--ink-2)}
.idea-acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* discover 1.2.1 */
.who-row{margin:2px 0 6px}
.who-row>.tiny{display:block;margin:0 4px 6px}
.tc-fit{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:800;color:var(--mint)}
.tc-fit .i{width:13px;height:13px}
.gov-pick{width:100%;min-height:42px;font-weight:700;margin-bottom:6px}
.spot{border-top:1px solid var(--line);padding:11px 0}
.card-h+.spot,.sec-mini+.spot{border-top:none}
.sp-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sp-h b{font-size:15px}
.spot p{margin:4px 0 8px;font-size:13.5px;color:var(--ink-2);line-height:1.7}
.sp-a{display:flex;gap:8px;flex-wrap:wrap}
.sp-a .chip-btn{min-height:34px;font-size:12.5px}
/* customer file */
.cf-sec{border-top:1px solid var(--line);padding:4px 0}
.cf-sec summary{display:flex;align-items:center;gap:8px;padding:10px 2px;cursor:pointer;list-style:none}
.cf-sec summary::-webkit-details-marker{display:none}
.cf-sec summary b{flex:1}
.cf-sec summary>.i:first-child{color:var(--accent)}
.cf-sec summary>.i:last-child{width:16px;height:16px;color:var(--ink-3);transition:transform .2s}
.cf-sec[open] summary>.i:last-child{transform:rotate(180deg)}
.cf-body{padding:0 2px 10px}
.heat{display:grid;grid-template-columns:repeat(30,1fr);gap:3px;direction:ltr;margin-top:10px}
.heat i{aspect-ratio:1;border-radius:3px;background:var(--track)}
.heat i.on{background:var(--mint)}
.alerts-card .fb-item.new{border-inline-start:3px solid var(--coral);padding-inline-start:8px}
.msg-held{display:flex;gap:6px;align-items:flex-start;margin-top:6px;padding:7px 9px;border-radius:10px;background:rgba(0,0,0,.08);font-size:12px;line-height:1.6}
.msg.mine .msg-held{background:rgba(255,255,255,.18)}
.msg-held .i{width:14px;height:14px;flex:none;margin-top:2px}
/* «بيتي» */
.house-seg{overflow-x:auto;scrollbar-width:none}
.house-seg button{flex:1 0 auto;white-space:nowrap}
.house-today{display:flex;gap:10px;align-items:center;background:linear-gradient(135deg,color-mix(in srgb,#F2A93B 18%,var(--surface)),var(--surface));border-radius:18px;padding:13px 14px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.house-today>.i{width:26px;height:26px;color:#C98A00;flex:none}
.house-today span{display:flex;flex-direction:column}
.house-today small{color:var(--ink-2);font-size:12.5px}
.house-prog{display:grid;gap:6px;margin:0 4px 12px;font-size:13px;color:var(--ink-2)}
.hplan{flex:0 1 52%;width:52%;min-width:0;min-height:36px;padding:2px 8px;font-size:13px}
.meal-grid{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:6px;align-items:center}
.meal-grid>b{font-size:12.5px;text-align:center;color:var(--ink-2)}
.meal-grid>span{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.meal-grid>span.today{color:var(--accent-ink)}
.meal-cell{min-height:40px;border-radius:12px;border:1.5px dashed var(--line);background:none;font:inherit;font-size:12px;color:var(--ink-3);padding:4px;line-height:1.3;cursor:pointer;overflow:hidden}
.meal-cell.on{border-style:solid;border-color:transparent;background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
.pantry-it{flex-wrap:wrap}
.pst{display:flex;gap:4px}
.pst button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:5px 8px;font:inherit;font-size:11.5px;font-weight:700;color:var(--ink-3);cursor:pointer}
.pst button.on{background:color-mix(in srgb,var(--c) 15%,transparent);border-color:var(--c);color:var(--ink)}
.shop-add{display:flex;gap:6px;margin-bottom:8px}
.shop-add .input{flex:1;min-width:0}
.shop-add select.input{flex:0 0 auto;width:auto;max-width:42%}
.price-in{width:78px;min-height:34px;padding:4px 8px;font-size:13px;text-align:center;flex:none}
.shop-sum{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:12px 2px;font-size:14px}
.kid-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-bottom:6px}
.kid-facts span{background:var(--surface-2);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column}
.kid-facts small{font-size:11.5px;color:var(--ink-3)}
.bag-card summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}
.bag-card summary::-webkit-details-marker{display:none}
.bag-card summary b{flex:1}
.bag-card summary .ico{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink)}
.bag-card[open] summary{margin-bottom:10px}

/* ---------- 1.3.4 «هناكل إيه النهارده؟» ---------- */
.eat-card .seg{margin-bottom:10px}
.eat-who button{font-size:13px}
.eat-lv{display:flex;gap:6px;overflow-x:auto;margin:0 0 10px;padding-bottom:2px;scrollbar-width:none}
.eat-lv::-webkit-scrollbar{display:none}
.eat-lv button{flex:none;border:1.5px solid var(--line);background:none;border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.eat-lv button.on{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}
.eat-main{display:grid;gap:4px;padding:14px;border-radius:16px;background:linear-gradient(135deg,var(--sun-soft),var(--coral-soft));margin-bottom:10px}
.eat-main b{font-size:19px;font-family:var(--font-head);line-height:1.35}
.eat-main small{color:var(--ink-2);font-weight:700;display:flex;align-items:center;gap:4px}
.eat-main small .i{width:16px;height:16px;color:var(--mint)}
.eat-main.done{background:var(--mint-soft)}
.eat-main.plan{background:var(--sky-soft)}
.eat-tags{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--ink-2);font-weight:700}
.eat-tags span{display:inline-flex;align-items:center;gap:3px}
.eat-tags .i{width:14px;height:14px}
.eat-tags .lv{padding:0 8px;border-radius:999px;background:var(--surface)}
.eat-actions{display:flex;flex-wrap:wrap;gap:8px}
.eat-actions .btn{flex:1 1 auto}
.eat-alt{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.eat-alt small{color:var(--ink-3);font-weight:700}
.eat-alt button{border:1.5px dashed var(--line);background:none;border-radius:12px;padding:5px 10px;font-size:13px;font-weight:700;color:var(--ink-2);text-align:start}
.eat-need{margin:0 2px 10px}
.eat-list .item{border:none;width:100%;text-align:start}
.eat-list .item.on{outline:2px solid var(--mint)}
.eat-list .item>.i{color:var(--mint)}
.eat-list .item .eat-tags{margin-top:2px}
.diet-on{margin-bottom:12px;cursor:pointer}
.diet-on small{display:block;color:var(--ink-3);font-size:12px}

/* ---------- 1.3.5 fixes ---------- */
.story-art.sm{width:210px;height:220px}
.story-art.sm svg.ch{width:130px;height:182px}
.ob-notify-h{margin-top:6px;position:relative;z-index:1}
.share-code{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:var(--accent-soft);margin-bottom:12px}
.share-code small{color:var(--ink-2);font-weight:700}
.share-code b{flex:1;font-size:24px;letter-spacing:.08em;color:var(--accent-ink);text-align:center}
.share-how{margin:0 0 12px;padding:0 18px 0 0;display:grid;gap:8px;line-height:1.8;font-size:14.5px}
[dir=ltr] .share-how{padding:0 0 0 18px}
.share-count{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--mint);margin:0 0 12px}
.share-count .i{width:18px;height:18px}
.stack-form{display:grid;gap:8px}
.stack-form .sf-l{font-weight:700;font-size:14px;line-height:1.6;color:var(--ink)}
.stack-form .sf-l small{display:block;font-weight:500;font-size:12.5px;color:var(--ink-3)}
.stack-form .sf-row{display:flex;align-items:center;gap:10px}
.stack-form .sf-row .input{width:90px;text-align:center}
.stack-form .sf-row span{color:var(--ink-2);font-weight:700}
.idea-topics{flex-wrap:wrap;overflow:visible}
.idea-topics .chip-btn{flex:0 1 auto;white-space:normal;text-align:center;line-height:1.4;padding-block:6px}
/* top bar: the small line under the page name wraps to a 2nd line instead of being cut with «…» */
.topbar .tb-sub{white-space:normal;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4;margin-top:2px}
.topbar .tb-title h1{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* code boxes: Arabic hints are never spaced out / capitalised, so they fit */
.code-form .input::placeholder,.stack-form .input::placeholder{letter-spacing:0;text-transform:none;font-weight:500}
.input::placeholder{color:var(--ink-3);opacity:1}
.tab{font-size:11px;white-space:nowrap}
.contest-mini .cm-txt small{line-height:1.6}
.contest-mini .cm-txt .cm-2{margin-top:3px;color:var(--ink-2);font-weight:600}
small{line-height:1.55}
.item .meta small{display:block;margin-top:2px}
.gps-ask .ga-t{display:grid;gap:4px}.gps-ask .ga-t small{color:var(--ink-2);line-height:1.7}
.gps-opt.on{outline:2px solid var(--mint)}
.gps-opt>.i{color:var(--mint)}
.gps-ask .row-actions .btn{white-space:nowrap}

/* ---------- 1.3.6 «رياضتي» ---------- */
.sp-hero{display:flex;align-items:center;gap:14px;padding:20px;border-radius:24px;background:linear-gradient(135deg,var(--c,#FF6B5E),color-mix(in srgb,var(--c,#FF6B5E) 55%,#7C5CFA));color:#fff;margin-bottom:14px;box-shadow:var(--shadow)}
.sp-hero h2{font-size:24px;margin:2px 0 4px}.sp-hero p{opacity:.95;line-height:1.7}.sp-hero small{opacity:.9;font-weight:700}
.sp-hero>div{flex:1;min-width:0}
.sp-hero-i{width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}.sp-hero-i .i{width:34px;height:34px}
.sp-today .spt-h{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.sp-today .spt-h .ico{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--c,var(--accent)) 15%,transparent);color:var(--c,var(--accent))}
.sp-today.rest .spt-h .ico{background:var(--sky-soft);color:var(--sky)}
.sp-today .spt-h div{display:grid;gap:2px;min-width:0}
.sp-today .spt-h small{color:var(--ink-3);font-weight:700}
.sp-today .spt-h b{font-size:18px;font-family:var(--font-head);line-height:1.4}
.sp-today .spt-h em{font-style:normal;color:var(--ink-2);font-size:13px;line-height:1.6}
.spt-list{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:6px}
.spt-list li{padding:8px 12px;border-radius:12px;background:var(--surface-2);font-size:14px;line-height:1.6}
.spt-next{display:flex;gap:8px;align-items:center;margin:0 0 10px;color:var(--ink-2);line-height:1.7}.spt-next .i{width:18px;height:18px;flex:none}
.sp-howto summary{cursor:pointer;font-weight:800;display:flex;align-items:center;gap:8px;list-style:none}
.sp-howto summary::-webkit-details-marker{display:none}
.sp-3{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.sp-3 li{display:flex;gap:10px;align-items:flex-start;line-height:1.7}
.sp-3 li span{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.sp-week button{display:flex;flex-direction:column;align-items:center;gap:2px}
.sp-week button small{font-size:11px}
.sp-lib .item{border:none;width:100%;text-align:start}
.sp-lib .item small{line-height:1.6;color:var(--ink-2)}
.sp-how{margin:6px 0 10px;color:var(--ink-2);line-height:1.8;font-size:14.5px}
.sp-banner .i{color:#FF6B5E}
.dose-explain{margin:6px 0 0;color:var(--ink-2);line-height:1.7;max-width:320px}
/* ---------- 1.3.6 work & study form ---------- */
.lf-sep{margin:18px 0 10px;padding-top:14px;border-top:1.5px dashed var(--line);font-weight:800;color:var(--ink-2);font-size:14px}
.cls-list{display:grid;gap:8px;margin-bottom:10px}
.cls-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--surface-2)}
.cls-k{padding:3px 10px;border-radius:999px;background:var(--mint-soft);color:#16A394;font-weight:800;font-size:12.5px;flex:none}
.cls-t{flex:1;min-width:0;display:grid}.cls-t small{color:var(--ink-3)}
.cls-add{display:grid;gap:8px;padding:12px;border-radius:16px;border:1.5px dashed var(--line)}
.cls-add .field{margin:0}
.sp-vid{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--coral-soft);color:var(--coral);flex:none}.sp-vid .i{width:16px;height:16px}
.sp-vlink{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;font-weight:800;color:#fff;background:rgba(255,255,255,.2);padding:6px 12px;border-radius:999px;text-decoration:none;font-size:13.5px}.sp-vlink .i{width:16px;height:16px}
.sp-comm-l{display:grid;gap:8px}
.sp-now .sp-how{color:rgba(255,255,255,.92)}
/* ---------- lists that scroll inside their card (about 4 items in view) ---------- */
.scroll-box{max-height:336px;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y proximity;scrollbar-width:thin;padding:2px;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent);border-radius:16px}
.scroll-box.at-end{-webkit-mask-image:none;mask-image:none}
.scroll-box .list>*{scroll-snap-align:start}
.sb-hint{display:flex;align-items:center;justify-content:center;gap:4px;margin:8px 0 0;font-size:12.5px;color:var(--ink-3);font-weight:700}
.sb-hint .i{width:16px;height:16px;animation:sbBob 1.6s ease-in-out infinite}
@keyframes sbBob{50%{transform:translateY(3px)}}
/* ---------- 1.3.8 «خطتي» ---------- */
.plan-top{display:flex;align-items:center;gap:14px;padding:16px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow-sm);margin-bottom:10px}
.plan-top .pt-txt{flex:1;min-width:0;display:grid;gap:2px}
.plan-top .pt-txt small{color:var(--ink-3);font-weight:700}
.plan-top .pt-txt b{font-size:18px;font-family:var(--font-head);line-height:1.35}
.plan-top .pt-txt span{color:var(--ink-2);font-size:13px;line-height:1.6}
.plan-top .pt-txt em{font-style:normal;color:var(--coral);font-weight:800}
.pt-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.plan-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:5px;border-radius:18px;background:var(--surface-2);margin-bottom:14px}
.plan-tabs button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px;border:none;border-radius:14px;background:none;color:var(--ink-3);font-weight:800;font-size:12.5px;min-width:0}
.plan-tabs button .i{width:20px;height:20px}
.plan-tabs button.on{background:var(--surface);color:var(--accent-ink);box-shadow:var(--shadow-sm)}
.plan-tabs button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.area-wrap .chips{flex-wrap:wrap;overflow:visible;margin-bottom:10px}
.plan-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.pt-tool{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;border:none;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm);text-align:start;min-width:0}
.pt-tool span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}
.pt-tool span .i{width:20px;height:20px}
.pt-tool b{font-size:13.5px;line-height:1.4}
.pt-tool small{font-size:11.5px;color:var(--ink-3);line-height:1.45}
.plan-top{margin-bottom:14px}
.pt-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.pt-tags i{font-style:normal;font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--surface-2);color:var(--ink-2)}
.pt-tags i.late{background:color-mix(in srgb,var(--coral) 14%,transparent);color:var(--coral)}
/* 1.3.8: no sideways scrolling for everyday rows — they wrap instead */
.area-strip,.food-chips,.meal-days,.mood-row,.juz-chips,.eat-lv,.steps-preview{flex-wrap:wrap;overflow-x:visible;margin-inline:0;padding-inline:0}
.area-strip>.chips,.food-chips>*,.juz-chips .chip{flex-wrap:wrap}
.eat-lv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.eat-lv button{padding:6px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meal-days>*,.mood-row>*{flex:1 0 auto}
.plan-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
.pt-tool{flex-direction:row;align-items:center;gap:10px;padding:12px 10px}
.pt-tool span{flex:none}
.pt-tool b,.pt-tool small{display:block}
.pt-tool>div{min-width:0}
.meal-days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.meal-days .md{width:auto;padding:8px;min-width:0}
.meal-days>*{flex:initial}
/* ---------- 1.3.9 «اشتراكاتي» ---------- */
.subs-hero{border-radius:var(--r-lg);padding:18px 20px;background:linear-gradient(140deg,#3B2A6B 0%,#7C5CFA 100%);color:#fff;margin-bottom:14px}
.subs-hero>small{opacity:.85;font-weight:700}
.subs-hero>b{display:block;font-family:var(--font-head);font-size:30px;margin:2px 0 12px}
.subs-hero>b span{font-size:14px;opacity:.85}
.sh-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sh-row>div{background:rgba(255,255,255,.14);border-radius:14px;padding:8px 10px;min-width:0}
.sh-row small{display:block;font-size:11.5px;opacity:.85}.sh-row b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sub-row{width:100%;text-align:start;border:none;font:inherit;color:inherit;cursor:pointer;align-items:center}
.sub-row .meta small{white-space:normal;line-height:1.5}
.sub-row.soon{box-shadow:inset 0 0 0 1.5px var(--sun)}
.sub-row.off{opacity:.65}
.sub-price{display:flex;flex-direction:column;align-items:flex-end;flex:none;text-align:end}
.sub-price b{font-size:14px}.sub-price small{font-size:11px;color:var(--ink-3)}
.sub-kinds{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sub-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:12px}
.sub-grid .cat{font-size:12px;text-align:center}
.sub-detail{display:grid;gap:8px;margin-bottom:14px}
.sd-line{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:var(--surface-2);font-size:14px;line-height:1.6}
.sd-line .i{width:18px;height:18px;flex:none;margin-top:2px;color:var(--accent-ink)}
.sub-acts{display:grid;gap:8px}
.btn.danger-outline{background:none;border:1.5px solid color-mix(in srgb,var(--coral) 45%,transparent);color:var(--coral)}
.cancel-how{display:flex;gap:10px;padding:14px;border-radius:16px;background:var(--sky-soft,#E8F1FF);line-height:1.8;font-size:14.5px}
.cancel-how .i{flex:none;color:var(--sky,#3D8BFF);margin-top:4px}.cancel-how p{margin:0}
.subs-off{margin-top:6px}.subs-off summary{display:flex;align-items:center;gap:6px;font-weight:800;color:var(--ink-3);cursor:pointer;padding:8px 6px;list-style:none}
.subs-off summary::-webkit-details-marker{display:none}.subs-off summary .i{width:16px;height:16px}
.sub-more{margin:4px 0 12px;border-radius:14px;background:var(--surface-2);padding:10px 12px}
.sub-more summary{font-weight:800;font-size:13.5px;cursor:pointer;color:var(--accent-ink)}
.sub-more .field{margin-top:10px}
/* ---------- 1.3.9 «أدويتي» ---------- */
.med-ph{width:52px;height:52px;border-radius:14px;overflow:hidden;flex:none;display:grid;place-items:center;background:color-mix(in srgb,#FF6F91 14%,transparent);color:#E2557A}
.med-ph img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s}.med-ph.ready img{opacity:1}
.med-ph.missing img{display:none}
.med-ph.sm{width:44px;height:44px;border-radius:12px}
.med-ph.big{width:100%;height:auto;aspect-ratio:4/3;border-radius:18px}
.med-ph.empty .i{width:24px;height:24px}
.med-big{margin-bottom:12px}
.med-lib{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.med-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px;border:none;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm);text-align:start;font:inherit;color:inherit;cursor:pointer;min-width:0}
.med-card .med-ph{width:100%;height:auto;aspect-ratio:4/3;border-radius:14px;margin-bottom:4px}
.med-card b{font-size:14.5px;line-height:1.4}
.med-card small{font-size:12px;color:var(--ink-2);line-height:1.45}
.med-card em{font-style:normal;font-size:11.5px;color:var(--ink-3);font-weight:700}
.med-run{width:100%;text-align:start;border:none;font:inherit;color:inherit;cursor:pointer;align-items:center}
.med-run .meta{min-width:0}
.med-times{display:grid;gap:8px;margin-bottom:6px}
.med-time{display:flex;gap:8px;align-items:center}.med-time .input{flex:1}
.med-today{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.med-today .chip-btn.on{background:var(--mint-soft,#E3F7EE);border-color:var(--mint);color:var(--mint)}
.med-pick{margin-bottom:12px}.med-pick .lbl{display:block;margin-bottom:6px}
.med-photo-pick .med-ph{margin:0}
.sh-row b{white-space:normal;font-size:14px;line-height:1.3}
.sh-row{display:flex;flex-wrap:wrap}.sh-row>div{flex:1 1 auto}.sh-row b{white-space:nowrap;overflow:visible;text-overflow:clip;font-size:14.5px}
/* 1.4.0: in-box scrollbar (cards, sheets, lists, chats) */
.sb-stick{position:sticky;top:0;height:0;margin:0!important;padding:0!important;z-index:6;pointer-events:none;flex:none;order:-1}
.sb-rail{position:absolute;top:8px;inset-inline-end:-11px;width:5px;height:40px;border-radius:99px;background:color-mix(in srgb,var(--ink-3) 16%,transparent);opacity:0;transition:opacity .2s;touch-action:none;cursor:pointer;pointer-events:none}
.sb-rail::before{content:'';position:absolute;inset:-4px -9px}
.sb-on>.sb-stick>.sb-rail{opacity:1;pointer-events:auto}
.sb-rail i{position:absolute;top:0;inset-inline:0;height:40px;border-radius:99px;background:var(--accent);box-shadow:0 1px 4px color-mix(in srgb,var(--accent) 40%,transparent);will-change:transform}
.sb-drag>.sb-stick>.sb-rail{width:7px}
.scroll-box,.sheet,.surah-list,.chat-box,.zikr{scrollbar-width:none}
.scroll-box::-webkit-scrollbar,.sheet::-webkit-scrollbar,.surah-list::-webkit-scrollbar,.chat-box::-webkit-scrollbar,.zikr::-webkit-scrollbar{display:none}
.scroll-box{padding-inline-end:14px;-webkit-mask-image:linear-gradient(#000 88%,transparent);mask-image:linear-gradient(#000 88%,transparent)}
.scroll-box.at-end{-webkit-mask-image:none;mask-image:none}
.surah-list,.chat-box{padding-inline-end:14px}
.sheet>.sb-stick>.sb-rail{inset-inline-end:-14px;top:28px}
.chat-box>.sb-stick{margin-bottom:-8px!important}
.scroll-box,.sheet,.surah-list,.chat-box,.zikr{overflow-x:hidden}
.sb-rail::before{inset:-4px -6px}
/* 1.4.1: the page never shifts sideways (no zoom / horizontal pan on the page itself; inner carousels still swipe) */
html,body{overflow-x:clip;max-width:100%}
html{touch-action:pan-y;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.car-track,.admin-tabs,.mushaf.zoom,.house-seg{touch-action:pan-x pan-y}
.life-card{align-items:center;text-align:center}
.life-card small{text-align:center}
.life-card small span{display:block}
.pulse-hl{animation:pulseHl 1.6s ease 2;border-radius:14px}@keyframes pulseHl{50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent)}}