@font-face{font-family:Alexandria;font-weight:700;font-display:swap;src:url(fonts/alexandria-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Alexandria;font-weight:700;font-display:swap;src:url(fonts/alexandria-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:Alexandria;font-weight:800;font-display:swap;src:url(fonts/alexandria-arabic-800-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Alexandria;font-weight:800;font-display:swap;src:url(fonts/alexandria-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:Plex;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Plex;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:Plex;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Plex;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:Plex;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Plex;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}

:root{
  --bg:#0E1024; --card:#171A33; --card2:#1F2344; --line:#2E3360; --muted-bg:#262A4F; --off:#3A3F70;
  --text:#F4F1EA; --muted:#A3A7C7; --soft:#D6D8EC;
  --mint:#34D6A8; --mint-ink:#08261D; --mint-dim:#1E7F66; --mint-pale:#9FF0D6;
  --coral:#FF8A6B; --coral-ink:#2B0E05;
  --amber:#FFC24B; --amber-ink:#1A1406;
  --violet:#9D8CFF; --violet-2:#B3A6FF; --violet-ink:#150F33;
  --mint-fg:#34D6A8; --coral-fg:#FF8A6B; --violet-fg:#B3A6FF; --amber-fg:#FFC24B; --danger:#FF9B8A;
  --badge-bg:#2A1C1F; --banner-bg:#2A2410; --banner-line:#5C4A1E; --banner-fg:#FFE3A3;
  --week-on:#B35A45; --cell-today:#3F4580; --bar:#2A6E5E; --done-fg:#8A8EB0; --chip-on:#1E2A2A;
  --h1:#5C4A1E; --h2:#9C7A26; --h3:#D9A637; --future:#14172E; --future-fg:#4A4F7A; --nav-bg:rgba(31,35,68,.92);
  --display:Alexandria,"Plex",system-ui,sans-serif; --body:"Plex",system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  /* المسافة تحت شريط التنقل: الشريط يجلس فوق مؤشر الآيفون مباشرة بدل ما يضيف مسافة كاملة فوقه */
  --nav-gap:max(10px, calc(var(--safe-b) - 14px));
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#EDEFF6; --card:#FFFFFF; --card2:#F3F4FA; --line:#DDE0EE; --muted-bg:#E6E9F4; --off:#C3C8DE;
  --text:#15173A; --muted:#5D6285; --soft:#353A5E;
  --mint-dim:#8FE3C9; --mint-pale:#0B5E47;
  --mint-fg:#0C8A68; --coral-fg:#C94B26; --violet-fg:#5B46D6; --amber-fg:#9A6A00; --danger:#C8321B;
  --badge-bg:#FFE7DF; --banner-bg:#FFF4D6; --banner-line:#F2D78C; --banner-fg:#5C4300;
  --week-on:#F4B3A1; --cell-today:#9AA0C4; --bar:#9ADFC9; --done-fg:#8C90AE; --chip-on:#DDF7EE;
  --h1:#FCEBC0; --h2:#F8D685; --h3:#F2BD45; --future:#F6F7FB; --future-fg:#B3B7CF; --nav-bg:rgba(255,255,255,.9);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
/* تطبيق، لا صفحة ويب: بلا تكبير بالقرص أو بالنقر المزدوج (التمرير يبقى طبيعياً) */
html{touch-action:pan-x pan-y}
/* ولا تحديد للنصوص أو قائمة الضغط المطوّل، إلا داخل خانات الكتابة */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img,svg{-webkit-user-drag:none}
input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
body{overscroll-behavior-y:none}
html.modal-open{overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;margin:0;padding:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
h1,h2,h3{margin:0;font-family:var(--display)}
svg{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

#app{max-width:480px;margin:0 auto;min-height:100%;position:relative}
.screen{padding:calc(20px + var(--safe-t)) 20px calc(108px + var(--nav-gap));display:flex;flex-direction:column;gap:20px;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* header */
.head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.head .sub{font-size:13px;color:var(--muted)}
.head h1{font-weight:800;font-size:24px;line-height:1.35}
.badge{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:var(--badge-bg);color:var(--coral-fg);font-weight:600;font-size:14px;white-space:nowrap}

/* cards */
.card{background:var(--card);border-radius:24px;padding:18px 16px;display:flex;flex-direction:column;gap:12px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px}
.card-h h2{font-weight:700;font-size:17px}
.card-h .meta{font-size:13px;color:var(--muted)}
.c-mint{color:var(--mint-fg)} .c-coral{color:var(--coral-fg)} .c-violet{color:var(--violet-fg)} .c-amber{color:var(--amber-fg)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.icon-btn{width:44px;height:44px;border-radius:14px;background:var(--muted-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.icon-btn.sm{width:36px;height:36px;border-radius:12px}

/* hero */
.hero{display:flex;align-items:center;gap:18px;padding:20px;border-radius:28px;background:var(--amber);color:var(--amber-ink)}
.hero .l{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.hero .k{font-size:14px;font-weight:600;opacity:.8}
.hero .big{font-family:var(--display);font-weight:800;font-size:40px;line-height:1}
.hero .s{font-size:13px;font-weight:500}
.hero .q{margin-top:6px;font-size:13px;line-height:1.6;font-weight:500}
.ring{position:relative;width:104px;height:104px;flex-shrink:0}
.ring>svg{transform:rotate(-90deg)}
.ring circle{transition:stroke-dashoffset .5s cubic-bezier(.3,.7,.3,1)}
.ring .c{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}

/* prayers */
.prayers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.pr{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0;border-radius:16px}
.pr .dot{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--off);transition:background .2s,border-color .2s,transform .15s}
.pr:active .dot{transform:scale(.92)}
.pr .dot.s1{background:var(--mint-dim);border-color:var(--mint-dim)}
.pr .dot.s2{background:var(--mint);border-color:var(--mint)}
.pr .dot.upcoming{border-color:var(--amber)}
.pr .n{font-size:13px;font-weight:600}
.pr .t{font-size:12px;color:var(--muted)}
.pr .t.j{color:var(--mint-fg)}

/* wird */
.big-num{display:flex;align-items:baseline;gap:4px}
.big-num b{font-family:var(--display);font-weight:800;font-size:30px}
.big-num span{font-size:13px;color:var(--muted)}
.bar{height:8px;border-radius:999px;background:var(--muted-bg);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:999px;background:var(--mint);transition:width .3s}
.row-btns{display:flex;gap:8px}
.row-btns button{flex:1;height:44px;border-radius:14px;background:var(--muted-bg);display:flex;align-items:center;justify-content:center}
.row-btns button.pri{background:var(--mint);color:var(--mint-ink)}
.tog{height:48px;border-radius:14px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;background:var(--muted-bg);font-weight:600;font-size:14px;transition:background .2s}
.tog.on{background:var(--mint);color:var(--mint-ink)}
.tog .o{width:22px;height:22px;border-radius:50%;border:2px solid currentColor;display:flex;align-items:center;justify-content:center}

/* habits */
.habit{display:flex;align-items:center;gap:12px}
.chk{width:44px;height:44px;flex-shrink:0;border-radius:14px;display:flex;align-items:center;justify-content:center;border:2px solid var(--off);transition:background .2s,border-color .2s,transform .15s}
.chk:active{transform:scale(.92)}
.chk.on{background:var(--coral);border-color:var(--coral)}
.habit .nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.habit .nm b{font-size:15px;font-weight:600}
.habit .nm span{font-size:13px;color:var(--muted)}
.week{display:flex;gap:4px}
.week i{width:8px;height:22px;border-radius:4px;background:var(--muted-bg)}
.week i.on{background:var(--week-on)}.week i.on.today{background:var(--coral)}

/* tasks / list rows */
.row{min-height:52px;display:flex;align-items:center;gap:12px;padding:6px 12px;border-radius:16px;background:var(--card2);text-align:start;width:100%}
.row .box{width:24px;height:24px;flex-shrink:0;border-radius:8px;border:2px solid var(--violet);display:flex;align-items:center;justify-content:center}
.row .box.on{background:var(--violet)}
.row .tx{flex:1;font-size:15px;font-weight:500;line-height:1.5}
.row .tx.done{text-decoration:line-through;color:var(--done-fg)}
.task{display:flex;align-items:center;gap:6px}
.task .row{flex:1}
.x{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0}
.empty{font-size:14px;color:var(--muted);line-height:1.7;padding:6px 2px}
.link{color:var(--amber-fg);font-weight:600;font-size:14px;padding:10px 0;text-align:start}
.chip-btn{align-self:flex-start;display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;background:var(--muted-bg);font-size:13px;font-weight:600;color:var(--soft);min-height:40px}

/* goal mini */
.goal-mini{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:24px;background:var(--violet);color:var(--violet-ink);text-align:start;width:100%}
.goal-mini .t{font-family:var(--display);font-weight:700;font-size:20px}
.goal-mini .pill{font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--violet-ink);color:#D9D2FF}
.goal-mini .track{flex:1;height:10px;border-radius:999px;background:var(--violet-ink);overflow:hidden}
.goal-mini .track i{display:block;height:100%;background:var(--amber);border-radius:999px}

/* banner */
.banner{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:20px;background:var(--banner-bg);border:1px solid var(--banner-line);color:var(--banner-fg);font-size:14px;line-height:1.6}
.banner button{margin-inline-start:auto;padding:8px 12px;border-radius:12px;background:var(--amber);color:var(--amber-ink);font-weight:600;font-size:13px;white-space:nowrap}

/* iman */
.next{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:28px;background:var(--mint);color:var(--mint-ink)}
.next .top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.next .k{font-size:14px;font-weight:600;opacity:.8}
.next .nm{font-family:var(--display);font-weight:800;font-size:34px;line-height:1.15}
.next .in{padding:8px 14px;border-radius:999px;background:var(--mint-ink);color:#9FF0D6;font-size:14px;font-weight:600;white-space:nowrap}
.times{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:8px 6px;border-radius:18px;background:#2BB892}
.times div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:12px}
.times div.cur{background:#9FF0D6}
.times b{font-size:13px;font-weight:600}.times span{font-size:13px;font-weight:500}
.pgrid{display:flex;flex-direction:column;gap:4px}
.pgrid .r{display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr));gap:4px;align-items:center}
.pgrid .lb{font-size:13px;font-weight:500;color:var(--soft)}
.pgrid .dh{text-align:center;font-size:13px;font-weight:600;color:var(--muted)}
.pgrid .dh.today{color:var(--mint)}
.cell{height:40px;border-radius:10px;background:var(--card2);display:flex;align-items:center;justify-content:center;border:2px solid transparent;transition:background .15s}
.cell.today{border-color:var(--cell-today)}
.cell.s1{background:var(--mint-dim)}.cell.s2{background:var(--mint)}
.cell.s2::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint-ink)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:4px;display:inline-block}
.bars{height:84px;display:flex;align-items:flex-end;gap:8px}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.bars span{font-size:12px;color:var(--muted)}
.bars i{width:100%;border-radius:6px;background:var(--bar);min-height:4px}
.bars i.today{background:var(--mint)}
.bars i.zero{background:var(--muted-bg)}
.nf .o{width:28px;height:28px;flex-shrink:0;border-radius:50%;border:2px solid var(--off);display:flex;align-items:center;justify-content:center}
.nf .o.on{background:var(--mint);border-color:var(--mint)}
.nf .st{font-size:13px;font-weight:600;color:var(--mint-fg);white-space:nowrap}
.nf .tx{display:flex;flex-direction:column;gap:2px}.nf .tx b{font-size:15px;font-weight:600}.nf .tx span{font-size:13px;color:var(--muted)}
.info{display:flex;align-items:center;gap:14px;padding:16px;border-radius:24px;background:var(--card2);border:1px solid var(--line)}
.info .ic{width:44px;height:44px;flex-shrink:0;border-radius:14px;background:var(--muted-bg);color:var(--amber-fg);display:flex;align-items:center;justify-content:center}
.info .tx{display:flex;flex-direction:column;gap:2px}.info .tx b{font-size:15px;font-weight:600}.info .tx span{font-size:13px;color:var(--muted);line-height:1.6}

/* month */
.mhead{display:flex;align-items:center;gap:8px}
.mhead .ttl{flex:1;display:flex;flex-direction:column;gap:4px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stat{display:flex;flex-direction:column;gap:4px;padding:14px 12px;border-radius:20px;background:var(--card)}
.stat b{font-family:var(--display);font-weight:800;font-size:24px}
.stat span{font-size:13px;color:var(--muted)}
.stat.hl{background:var(--amber);color:var(--amber-ink)}.stat.hl span{color:var(--amber-ink);font-weight:600}
.goal{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;background:var(--card2)}
.goal .top{display:flex;align-items:center;gap:10px}
.goal .nm{flex:1;display:flex;flex-direction:column;gap:2px;text-align:start;min-width:0}
.goal .nm small{font-size:13px;font-weight:600}.goal .nm b{font-size:16px;font-weight:600}
.goal .prog{display:flex;align-items:center;gap:10px}
.goal .track{flex:1;height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.goal .track i{display:block;height:100%;border-radius:999px;transition:width .3s}
.goal .cnt{font-size:13px;font-weight:600;color:var(--soft);white-space:nowrap}
.heat{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.heat .wd{text-align:center;font-size:12px;font-weight:600;color:var(--muted)}
.heat .d{height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;border:2px solid transparent}
.heat .d.today{border-color:var(--text)}
.l0{background:var(--muted-bg);color:var(--muted)}.l1{background:var(--h1)}.l2{background:var(--h2)}.l3{background:var(--h3);color:var(--amber-ink)}.l4{background:var(--amber);color:var(--amber-ink)}
.lf{background:var(--future);color:var(--future-fg)}
.scale{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.scale i{width:10px;height:10px;border-radius:3px}
.plan{display:flex;gap:12px;text-align:start;width:100%}
.plan .rail{display:flex;flex-direction:column;align-items:center;width:16px;flex-shrink:0}
.plan .rail i{width:14px;height:14px;margin-top:4px;border-radius:50%;border:2px solid var(--off)}
.plan .rail u{flex:1;width:2px;background:var(--line)}
.plan .bd{flex:1;display:flex;flex-direction:column;gap:4px;padding-bottom:16px}
.plan .wk{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.plan .pchip{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}
.plan .tx{font-size:15px;font-weight:500;line-height:1.6}
.plan .tx.ph{color:var(--muted)}

/* me */
.set{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px;border-radius:16px;background:var(--card2);width:100%;text-align:start}
.set .tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.set .tx b{font-size:15px;font-weight:600}.set .tx span{font-size:13px;color:var(--muted);line-height:1.5}
.set .v{font-size:14px;color:var(--soft);white-space:nowrap}
.stepper{display:flex;align-items:center;gap:6px}
.stepper b{min-width:34px;text-align:center;font-size:15px}
.danger{color:var(--danger)}
.foot{text-align:center;font-size:13px;color:var(--muted);line-height:1.8}

/* nav */
.nav{position:fixed;inset-inline:0;bottom:0;z-index:20;padding:0 12px var(--nav-gap);pointer-events:none;display:flex;justify-content:center}
.nav::before{content:"";position:absolute;inset:auto 0 0;height:calc(100% + 22px);background:linear-gradient(to top,var(--bg) 40%,color-mix(in srgb,var(--bg) 0%,transparent));pointer-events:none;z-index:-1}
.nav .in{pointer-events:auto;width:100%;max-width:456px;height:72px;border-radius:26px;background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;padding:0 6px;gap:2px}
.nav button{height:56px;border-radius:18px;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:13px;font-weight:500;transition:background .2s,color .2s}
.nav button[aria-current=page]{font-weight:600}
.nav .t-today[aria-current=page],.nav .t-iman[aria-current=page]{background:var(--mint);color:var(--mint-ink)}
.nav .t-month[aria-current=page]{background:var(--amber);color:var(--amber-ink)}
.nav .t-me[aria-current=page],.nav .t-projects[aria-current=page]{background:var(--violet);color:var(--violet-ink)}

/* sheet */
.scrim{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center}
.scrim-bg{position:absolute;inset:0;touch-action:none;background:rgba(5,6,18,.6);animation:fadeIn .2s ease}
.scrim.out .scrim-bg{opacity:0;transition:opacity .22s ease}
.sheet.out{transform:translate3d(0,105%,0)!important;transition:transform .23s cubic-bezier(.4,0,.9,.55)!important}
@keyframes fadeIn{from{opacity:0}}
.sheet{position:relative;width:100%;max-width:480px;max-height:88vh;overflow:auto;overscroll-behavior:contain;background:var(--card);border-radius:28px 28px 0 0;padding:10px 20px calc(24px + var(--safe-b));display:flex;flex-direction:column;gap:16px;animation:up .28s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(100%)}}
.grab{width:40px;height:5px;border-radius:9px;background:var(--off);align-self:center;position:relative}
.grab::before{content:'';position:absolute;inset:-14px -60px}
.sheet>*{flex-shrink:0}
.sheet h3{font-weight:700;font-size:20px}
.sheet p{margin:0;font-size:14px;color:var(--muted);line-height:1.7}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--soft)}
.input{height:52px;border-radius:14px;border:2px solid var(--line);background:var(--bg);padding:0 14px;font-size:16px;width:100%}
.input:focus{border-color:var(--amber);outline:none}
textarea.input{height:auto;min-height:96px;padding:12px 14px;line-height:1.6;resize:none}
select.input{appearance:none;-webkit-appearance:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:8px 14px;border-radius:999px;background:var(--muted-bg);font-size:14px;font-weight:500;border:2px solid transparent}
.chip.on{background:var(--chip-on);border-color:var(--mint);color:var(--mint-pale)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;height:54px;border-radius:16px;background:var(--amber);color:var(--amber-ink);font-weight:700;font-size:16px;font-family:var(--display);width:100%}
.btn:disabled{opacity:.4}
.btn.ghost{background:var(--muted-bg);color:var(--text)}
.btn.red{background:#E0533D;color:#fff}
.btns{display:flex;gap:10px}

/* toast */
.toast{position:fixed;z-index:60;top:calc(16px + var(--safe-t));inset-inline:16px;margin:0 auto;max-width:440px;padding:14px 18px;border-radius:18px;background:var(--text);color:var(--bg);font-weight:600;font-size:15px;text-align:center;animation:drop .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 10px 30px rgba(0,0,0,.35)}
@keyframes drop{from{transform:translateY(-30px);opacity:0}}

/* onboarding */
.ob{min-height:100vh;min-height:100dvh;padding:calc(40px + var(--safe-t)) 24px calc(28px + var(--safe-b));display:flex;flex-direction:column;gap:24px;max-width:480px;margin:0 auto}
.ob .steps{display:flex;gap:6px}
.ob .steps i{flex:1;height:5px;border-radius:9px;background:var(--muted-bg)}
.ob .steps i.on{background:var(--amber)}
.ob .mark{width:72px;height:72px;border-radius:22px;background:var(--amber);display:flex;align-items:center;justify-content:center;color:var(--amber-ink)}
.ob h1{font-weight:800;font-size:30px;line-height:1.35}
.ob p{margin:0;font-size:16px;color:var(--muted);line-height:1.8}
.ob .grow{flex:1}
.cities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cities .chip{border-radius:14px;text-align:start}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

:root[data-theme=light] .goal .nm small{filter:brightness(.72) saturate(1.2)}
:root[data-theme=light] .card,:root[data-theme=light] .stat,:root[data-theme=light] .info{box-shadow:0 1px 2px rgba(21,23,58,.05)}
:root[data-theme=light] .scrim-bg{background:rgba(21,23,58,.35)}
.theme-btn{width:40px;height:40px;border-radius:12px;background:var(--muted-bg);color:var(--amber-fg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.head .end{display:flex;align-items:center;gap:8px}
html{transition:background-color .25s}

/* ——— 1.1: التحسينات ——— */
.hint{font-size:13px;color:var(--muted);line-height:1.6}
.toast{display:flex;align-items:center;justify-content:center;gap:12px}
.toast button{padding:6px 12px;border-radius:10px;background:var(--bg);color:var(--amber-fg);font-weight:700;font-size:14px}

/* التنقل بين الأيام */
.daynav{display:flex;align-items:center;gap:6px;margin-top:-6px}
.daynav .icon-btn:disabled{opacity:.3}
.days{flex:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.dd{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 7px;border-radius:14px;color:var(--muted);position:relative}
.dd small{font-size:12px;font-weight:500}
.dd b{font-size:15px;font-weight:700;color:var(--text)}
.dd i{width:18px;height:4px;border-radius:9px;background:var(--muted-bg);position:relative;overflow:hidden}
.dd i::after{content:"";position:absolute;inset:0;background:var(--amber);transform-origin:right;transform:scaleX(var(--r,0))}
.dd.now b{color:var(--amber-fg)}
.dd.cur{background:var(--card2);box-shadow:inset 0 0 0 2px var(--amber)}
.back-today{align-self:center;margin-top:-10px}

/* العادات بعدد */
.chk.cnt{position:relative;border:0;background:conic-gradient(var(--coral) calc(var(--p,0)*360deg),var(--muted-bg) 0)}
.chk.cnt::before{content:"";position:absolute;inset:4px;border-radius:10px;background:var(--card)}
.chk.cnt b{position:relative;font-size:15px;font-weight:700}
.chk.cnt.on::before{background:var(--coral)}
.chk.cnt.on b{color:var(--coral-ink)}
.week i.off{height:6px;align-self:center;opacity:.5}
.week{align-items:center}

/* قائمة العادات والسحب */
.hlist{display:flex;flex-direction:column;gap:8px}
.hrow{display:flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border-radius:16px;background:var(--bg)}
.hrow.dragging{box-shadow:0 14px 34px -8px rgba(0,0,0,.35);background:var(--card2);position:relative;z-index:3}
.grip{width:36px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:grab;touch-action:none;flex-shrink:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.dragging .grip{cursor:grabbing;color:var(--text)}
.hbody{flex:1;display:flex;flex-direction:column;gap:2px;text-align:start;padding:8px 0;min-width:0}
.hbody b{font-size:15px;font-weight:600}.hbody span{font-size:13px;color:var(--muted)}
.chev{color:var(--muted)}
.daypick{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.daypick button{height:44px;border-radius:12px;background:var(--muted-bg);font-weight:700;border:2px solid transparent}
.daypick button.on{background:var(--chip-on);border-color:var(--mint);color:var(--mint-pale)}

/* مفاتيح التشغيل */
.switch-row{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 14px;border-radius:14px;background:var(--bg);font-size:15px;font-weight:500}
.switch-row>span:first-child{flex:1}
.switch-row .tx{display:flex;flex-direction:column;gap:1px}
.switch-row .tx small{font-size:13px;color:var(--muted);font-weight:400}
input[role=switch]{appearance:none;-webkit-appearance:none;width:48px;height:28px;border-radius:99px;background:var(--off);position:relative;cursor:pointer;flex-shrink:0;transition:background .2s;margin:0}
input[role=switch]::after{content:"";position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s}
input[role=switch]:checked{background:var(--mint)}
input[role=switch]:checked::after{transform:translateX(-20px)}
input[role=switch]:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

.btn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.btn-grid .btn{height:48px;font-size:14px;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--body);font-weight:600}
.btns .btn{display:flex;align-items:center;justify-content:center;gap:8px}

/* المواسم */
.season{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:28px;background:#18294A;color:#F4F1EA;border:1px solid #2C4474}
:root[data-theme=light] .season{background:#1D3160}
.season .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.season .k{font-size:13px;font-weight:600;color:#FFC24B}
.season .nm{font-family:var(--display);font-weight:800;font-size:28px;line-height:1.25}
.season .pv{font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;background:#FFC24B;color:#1A1406}
.season .sub{font-size:14px;color:#C9CFEA;line-height:1.6}
.season .items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.season .items button{min-height:48px;border-radius:14px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600;font-size:14px;color:#F4F1EA;padding:0 6px}
.season .items button.on{background:#FFC24B;color:#1A1406}
.season .items .o{width:20px;height:20px;border-radius:50%;border:2px solid currentColor;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* الاحتفال */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px;animation:fall 2s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(105vh) rotate(540deg);opacity:.9}}

/* المشاركة */
.share-cta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:16px;border:2px dashed var(--line);color:var(--amber-fg);font-weight:700;font-size:15px}
.share-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.share-opts .seg{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-preview{display:flex;align-items:center;justify-content:center;min-height:320px;border-radius:18px;background:var(--bg);overflow:hidden}
.card-preview img{width:66%;max-width:280px;border-radius:14px;box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(0,0,0,.3);display:block}
.card-preview span{color:var(--muted);font-size:14px}

/* ——— 1.2 ——— */
.dayacts{display:flex;justify-content:center;gap:8px;margin-top:-8px;flex-wrap:wrap}
.dayacts .chip-btn{align-self:auto;min-height:36px;padding:6px 14px}
.chip-btn.on{background:var(--chip-on);color:var(--mint-pale);box-shadow:inset 0 0 0 2px var(--mint)}
.review-cta{width:100%;text-align:start;border-color:var(--mint)}
.review-cta .ic{color:var(--mint-fg)}
.chk.half{border-color:var(--coral);background:linear-gradient(0deg,var(--coral) 50%,transparent 50%)}
.chk.half small{font-size:16px;font-weight:800;color:var(--coral-ink);position:relative;top:4px}
.chk.cnt.half::before{background:var(--card)}
.habit.quiet{opacity:.55}
.week i.on.half{background:linear-gradient(0deg,var(--week-on) 50%,var(--muted-bg) 50%)}
.journey{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:16px;background:var(--bg)}
.journey .jh{display:flex;justify-content:space-between;font-size:14px}.journey .jh span{color:var(--coral-fg);font-weight:700}
.jstats{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted)}.jstats b{color:var(--text)}
.qgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.qgrid .input{padding:0 6px;text-align:center}
.qbtns{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.qbtns button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0;border-radius:14px;background:var(--card2)}
.qbtns button b{font-size:13px;font-weight:600}.qbtns button span{font-size:16px;font-weight:700;color:var(--mint-fg)}
.qbtns button:disabled{opacity:.35}
.rstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.rstats div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;border-radius:14px;background:var(--bg)}
.rstats b{font-family:var(--display);font-size:20px}.rstats b small{font-size:13px;color:var(--muted)}
.rstats span{font-size:12px;color:var(--muted)}
.mood{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.mood button{min-height:44px;border-radius:12px;background:var(--muted-bg);font-weight:600;font-size:14px;border:2px solid transparent}
.mood button.on{background:var(--chip-on);border-color:var(--mint);color:var(--mint-pale)}
.review{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:14px;background:var(--card2)}
.review .rh{display:flex;justify-content:space-between;gap:8px;font-size:14px}.review .rh span{font-size:13px;color:var(--muted)}
.review p{margin:0;display:flex;gap:6px;align-items:flex-start;font-size:14px;line-height:1.6;color:var(--soft)}
.review p i{color:var(--mint-fg);margin-top:4px;flex-shrink:0}
.promise-cta{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:18px;background:var(--chip-on);color:var(--mint-pale);text-align:start;font-size:13px}
.promise-cta b{font-weight:700}
.promise{display:flex;flex-direction:column;gap:8px}
.promise div{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:var(--bg)}
.promise b{font-size:15px}.promise span{font-size:13px;color:var(--muted);line-height:1.6}
.time-in{height:36px;border-radius:10px;border:2px solid var(--line);background:var(--card);padding:0 6px;font-size:14px;color:var(--text)}

/* ——— 1.3 ——— */
[dir=ltr] input[role=switch]::after{right:auto;left:3px}
[dir=ltr] input[role=switch]:checked::after{transform:translateX(20px)}
[dir=ltr] .q{font-style:italic}
/* بداية جديدة */
.fresh{display:flex;gap:14px;padding:16px;border-radius:24px;background:linear-gradient(135deg,var(--chip-on),var(--card));border:1px solid var(--mint-dim)}
.fresh .ic{width:44px;height:44px;flex-shrink:0;border-radius:14px;background:var(--mint);color:var(--mint-ink);display:flex;align-items:center;justify-content:center}
.fresh .bd{display:flex;flex-direction:column;gap:6px;min-width:0}
.fresh b{font-family:var(--display);font-size:17px}
.fresh .bd>span{font-size:13px;color:var(--soft);line-height:1.7}
.fresh .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.fresh .chip-btn{align-self:auto}
/* صيام اليوم (شاشة اليوم) */
.fast-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:20px;background:var(--card);border:1px dashed var(--line);text-align:start}
.fast-row .ic{width:38px;height:38px;border-radius:12px;background:var(--muted-bg);color:var(--mint-fg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fast-row .tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.fast-row .tx b{font-size:14px;font-weight:600}.fast-row .tx span{font-size:13px;color:var(--muted)}
.fast-row .o{width:26px;height:26px;border-radius:50%;border:2px solid var(--off);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fast-row.on{border-style:solid;border-color:var(--mint-dim);background:var(--chip-on)}
.fast-row .o.on{background:var(--mint);border-color:var(--mint);color:var(--mint-ink)}
/* بطاقة الصيام */
.fast-today{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--mint-fg)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:16px;background:var(--bg)}
.seg button{height:42px;border-radius:12px;font-size:13px;font-weight:600;color:var(--muted);transition:background .2s,color .2s}
.seg button.on{background:var(--mint);color:var(--mint-ink)}
.fstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fstats>*{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:14px;background:var(--card2)}
.fstats b{font-family:var(--display);font-size:22px}.fstats b small{font-size:13px;color:var(--muted)}
.fstats span{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px}
/* العادة المربوطة بصلاة وحان وقتها */
.habit.due .chk{box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 45%,transparent)}
.habit .nm em{font-style:normal;font-size:12px;font-weight:700;color:var(--amber-fg)}
/* التركيز */
.task .tx small{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:12px;color:var(--violet-fg);font-weight:600;margin-top:3px}
.task .tx small>span{display:inline-flex;align-items:center;gap:4px}
.task .row .tx{display:flex;flex-direction:column}
.focus-btn{color:var(--violet-fg)}
.focus-task{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:14px;background:var(--bg);color:var(--violet-fg)}
.focus-task b{flex:1;color:var(--text);font-size:15px;font-weight:600}.focus-task span{font-size:13px;color:var(--muted)}
.focus-len{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.focus-len button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 0;border-radius:16px;background:var(--card2);border:2px solid transparent}
.focus-len b{font-family:var(--display);font-size:22px}.focus-len span{font-size:12px;color:var(--muted)}
.focus-len button.on{border-color:var(--violet);background:color-mix(in srgb,var(--violet) 16%,var(--card2))}
.focus-ring{position:relative;align-self:center;width:220px;height:220px}
.focus-ring .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.focus-ring .c b{font-family:var(--display);font-size:48px;font-weight:800;font-variant-numeric:tabular-nums;direction:ltr}
.focus-ring .c span{font-size:13px;color:var(--muted)}
.focus-bar{position:fixed;z-index:21;left:50%;transform:translateX(-50%);bottom:calc(84px + var(--nav-gap));display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--violet);color:var(--violet-ink);font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.focus-bar b{font-family:var(--display);font-variant-numeric:tabular-nums;direction:ltr}.focus-bar span{font-size:13px;font-weight:600}
/* رؤى */
.insight{display:flex;gap:12px;padding:12px 14px;border-radius:16px;background:var(--card2)}
.insight>i{width:4px;border-radius:4px;flex-shrink:0}
.insight div{display:flex;flex-direction:column;gap:3px}
.insight b{font-size:14px;font-weight:700}.insight span{font-size:13px;color:var(--muted);line-height:1.6}
[dir=ltr] .dd i::after{transform-origin:left}
[dir=ltr] .stepper{flex-direction:row-reverse}
/* ترتيب المهام بالسحب */
.tlist{display:flex;flex-direction:column;gap:8px}
.task .grip{width:26px;height:44px;margin-inline-end:-4px}
.task{border-radius:16px}
.task.dragging{box-shadow:0 14px 34px -8px rgba(0,0,0,.35);background:var(--card2);position:relative;z-index:3}
/* ——— 1.4 ——— */
.banner .x{margin:0;background:none;color:var(--banner-fg);padding:0;width:28px;height:28px;flex-shrink:0}
.warn{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--banner-bg);border:1px solid var(--banner-line);color:var(--banner-fg);font-size:14px;line-height:1.7}
.warn svg{flex-shrink:0;margin-top:3px}
.isteps{display:flex;flex-direction:column;gap:8px}
.isteps>div{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--card2);font-size:15px}
.isteps b{width:28px;height:28px;border-radius:50%;background:var(--amber);color:var(--amber-ink);display:flex;align-items:center;justify-content:center;font-family:var(--display);flex-shrink:0}
.isteps span{flex:1}.isteps i{color:var(--violet-fg);display:flex}
.crash{min-height:70vh;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:calc(40px + var(--safe-t)) 24px 40px;text-align:center}
.crash .ic{width:64px;height:64px;border-radius:20px;background:var(--chip-on);color:var(--mint-fg);display:flex;align-items:center;justify-content:center;align-self:center}
.crash h2{font-size:22px}.crash p{margin:0;color:var(--muted);line-height:1.8}
.crash code{font-size:13px;color:var(--muted);opacity:.7;direction:ltr;word-break:break-word}

/* تلميحات لمرة وحدة */
.tip{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--amber) 14%,var(--card2));color:var(--text);font-size:13px;line-height:1.6;animation:fade .3s ease}
.tip>svg{color:var(--amber-fg);flex-shrink:0}
.tip span{flex:1}
.tip button{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0}
/* لما يصير خطأ: نخفي بقايا الشاشة اللي ما اكتمل رسمها */
main:has(>.crash)>:not(.crash),.sheet:has(>.crash)>:not(.crash,.grab){display:none}

/* النسخة التجريبية */
.demo-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(8px + var(--safe-t)) 16px 8px;background:var(--banner-bg);border-bottom:1px solid var(--banner-line);color:var(--banner-fg);font-size:13px;font-weight:600}
.demo-bar span{display:flex;align-items:center;gap:6px}
.demo-bar a{flex:none;padding:7px 14px;border-radius:999px;background:var(--amber);color:var(--amber-ink);font-weight:800;font-family:var(--display);font-size:13px;text-decoration:none}
.demo-bar+main .screen{padding-top:16px}

/* v1.5 — العادات الذرية */
.seg.two{grid-template-columns:1fr 1fr}
.seg.two button{display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px}
.seg.two button.on{background:var(--coral);color:var(--coral-ink)}
.field label .opt{font-size:12px;font-weight:500;color:var(--muted);margin-inline-start:4px}
.idin{display:flex;align-items:center;gap:10px}
.idin>span{font-family:var(--display);font-weight:800;font-size:17px;color:var(--coral-fg)}
.idin .input{flex:1;min-width:0}
.plan-line{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--coral) 9%,var(--bg));border:1.5px dashed color-mix(in srgb,var(--coral) 45%,transparent)}
.plan-line small{font-size:12px;font-weight:700;color:var(--coral-fg)}
.plan-line p{margin:0;font-size:15px;font-weight:600;line-height:1.75}
.quit-add{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:var(--bg);border:1px solid var(--line);text-align:start;width:100%;color:var(--muted)}
.quit-add .ic{width:40px;height:40px;flex-shrink:0;border-radius:12px;background:color-mix(in srgb,var(--coral) 16%,transparent);color:var(--coral-fg);display:flex;align-items:center;justify-content:center}
.quit-add .tx{flex:1;display:flex;flex-direction:column;gap:2px}.quit-add .tx b{font-size:15px;font-weight:600;color:var(--text)}.quit-add .tx span{font-size:12.5px}
.qtag{display:inline-flex;vertical-align:-2px;margin-inline-end:6px;color:var(--coral-fg);font-style:normal}
.coach{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:18px;background:color-mix(in srgb,var(--mint) 11%,var(--card2));border:1px solid color-mix(in srgb,var(--mint) 30%,transparent);animation:fade .3s ease}
.coach .ch{display:flex;align-items:center;gap:10px}
.coach .ch .ic{width:32px;height:32px;flex-shrink:0;border-radius:10px;background:var(--mint);color:var(--mint-ink);display:flex;align-items:center;justify-content:center}
.coach .ch b{font-family:var(--display);font-size:15px;flex:1}
.coach .ch .x{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.coach p{margin:0;font-size:13.5px;line-height:1.75;color:var(--soft)}
.coach p .soft{color:var(--muted)}
.coach .acts{display:flex;flex-wrap:wrap;gap:8px}
.coach .acts .chip-btn{align-self:auto}
.coach .chip-btn.on{background:var(--mint);color:var(--mint-ink);box-shadow:none}
.coach.rescue{background:color-mix(in srgb,var(--coral) 11%,var(--card2));border-color:color-mix(in srgb,var(--coral) 35%,transparent)}
.coach.rescue .ch .ic,.coach.rescue .chip-btn.on{background:var(--coral);color:var(--coral-ink)}
.coach.up{background:color-mix(in srgb,var(--amber) 13%,var(--card2));border-color:color-mix(in srgb,var(--amber) 40%,transparent)}
.coach.up .ch .ic,.coach.up .chip-btn.on{background:var(--amber);color:var(--amber-ink)}
.chk.q{border-style:dashed}
.chk.q .qi{color:var(--muted);display:flex}
.chk.q.on{border-style:solid}
.chk.q.slip{border-style:solid;border-color:var(--danger);color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.week i.slip{background:var(--danger);opacity:.75}
/* عادة أتركها: درع بدل المربع، وأخضر للصمود، ورمادي هادئ للزلّة (بلا أحمر) */
.chk.q,.chk.q.on,.chk.q.slip{width:44px;height:48px;border:0;border-radius:0;background:none;color:inherit}
.chk.q svg{display:block;overflow:visible}
.chk.q .qs{fill:none;stroke:var(--off);stroke-width:2.4;stroke-linejoin:round;transition:fill .2s,stroke .2s}
.chk.q.on .qs{fill:var(--mint);stroke:var(--mint)}
.chk.q.slip .qs{fill:var(--muted-bg);stroke:var(--muted-bg)}
.chk.q .qk{fill:none;stroke:var(--mint-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.chk.q .qd{fill:none;stroke:var(--muted);stroke-width:3;stroke-linecap:round}
.habit.quit .week i.on{background:var(--mint);opacity:.55}.habit.quit .week i.on.today{opacity:1}
.habit.quit .week i.slip{background:var(--off);opacity:1}
.habit.quit .nm span.held{color:var(--mint-fg);font-weight:600}
.hdiv{height:1px;background:var(--muted-bg);margin:2px 0}
.idv{display:flex;flex-direction:column;gap:6px}
.idv .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:15px}
.idv .top span{color:var(--coral-fg);font-weight:700;font-size:13px;white-space:nowrap}
.idv .track{height:8px;border-radius:99px;background:var(--muted-bg);overflow:hidden}
.idv .track i{display:block;height:100%;border-radius:99px;background:var(--coral)}
.idv small{font-size:12px;color:var(--muted)}

/* شاشة التفعيل */
.gate .input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.5px;font-size:16px;text-align:left}
.gate-err{color:var(--danger)!important;font-size:14px!important;margin-top:-8px!important}
.gate a{text-decoration:none}
.gate-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
button.gate-demo{background:none;border:0;font-family:inherit;width:100%;cursor:pointer}
.gate-demo{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:14px;font-weight:500;padding:6px}

/* ——— نسخة الديسكتوب (html.desk: شاشة ≥1100 + ماوس + بدون لمس). الجوال والتابلت ما بيشوفوا شي من هون ——— */
.cols,.col{display:contents}
.nav .brand{display:none}
html.desk{--side:248px}
html.desk #app{max-width:none;padding-inline-start:var(--sb)}
html.desk{--sb:0px}
html.desk #app:has(>.nav){--sb:var(--side)}
/* الترحيب والتفعيل (بدون قائمة): بطاقة بنص الشاشة */
html.desk .ob{min-height:0;max-width:540px;margin:max(40px,8vh) auto 40px;padding:44px 44px 36px;border-radius:32px;background:var(--card);border:1px solid var(--line);box-shadow:0 30px 80px -30px rgba(0,0,0,.45)}
html.desk .ob .grow{flex:0 0 4px}
html.desk main{max-width:1080px;margin:0 auto}
html.desk .screen{padding:36px 40px 56px;gap:22px}
html.desk .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
html.desk .col{display:flex;flex-direction:column;gap:22px;min-width:0}
html.desk .head h1,html.desk .mhead h1{font-size:30px!important}
html.desk .daynav{align-self:flex-start;width:100%;max-width:620px}
html.desk .dayacts{align-self:flex-start;width:100%;max-width:620px}
html.desk .back-today{align-self:flex-start}
html.desk .mhead{max-width:620px;width:100%;align-self:center}
html.desk .foot{padding-top:8px}
html.desk .demo-bar{padding:10px 40px}
html.desk .demo-bar+main .screen{padding-top:28px}
/* القائمة الجانبية */
html.desk .nav{top:0;bottom:0;inset-inline-start:0;inset-inline-end:auto;width:var(--side);padding:28px 16px;display:block;pointer-events:auto;background:color-mix(in srgb,var(--card) 55%,var(--bg));border-inline-end:1px solid var(--line)}
html.desk .nav::before{display:none}
html.desk .nav .in{max-width:none;height:auto;align-items:stretch;border-radius:0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;display:flex;flex-direction:column;gap:6px;padding:0}
html.desk .nav .brand{display:flex;align-items:center;gap:12px;padding:0 10px 30px;font-family:var(--display);font-weight:800;font-size:22px;color:var(--text)}
html.desk .nav .bm{width:40px;height:40px;border-radius:13px;background:var(--amber);color:var(--amber-ink);display:flex;align-items:center;justify-content:center}
html.desk .nav button{height:50px;flex-direction:row;justify-content:flex-start;gap:14px;padding:0 16px;border-radius:16px;font-size:15px}
html.desk .nav button:not([aria-current]):hover{background:var(--muted-bg);color:var(--text)}
/* لمسات الماوس */
html.desk .set:hover,html.desk .row:hover,html.desk .plan:hover .bd,html.desk .share-cta:hover{filter:brightness(1.06)}
html.desk .icon-btn:hover,html.desk .chip-btn:hover,html.desk .chip:hover{filter:brightness(1.12)}
html.desk .pr:hover .dot,html.desk .chk:hover{border-color:var(--soft)}
/* النوافذ: نافذة بنص الشاشة بدل ورقة من تحت */
html.desk .scrim{align-items:center;padding:32px;padding-inline-start:calc(var(--sb) + 32px)}
html.desk .sheet{max-width:540px;max-height:86vh;border-radius:28px;padding:28px 28px 28px;animation:pop .22s cubic-bezier(.2,.8,.2,1);box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
html.desk .sheet .grab{display:none}
html.desk .sheet.out{transform:scale(.96)!important;opacity:0;transition:transform .18s ease,opacity .18s ease!important}
@keyframes pop{from{transform:scale(.96);opacity:0}}
html.desk .toast{inset-inline-start:calc(var(--sb) + 16px)}
html.desk .focus-bar{left:calc((100vw - var(--sb)) / 2);bottom:28px}
html.desk[dir=ltr] .focus-bar{left:calc(var(--sb) + (100vw - var(--sb)) / 2)}
/* أعلى شاشات الترحيب والتفعيل: الخطوات + اللغة + الليلي/النهاري */
.ob-top{display:flex;align-items:center;gap:14px}
.ob-top .steps{flex:1}
.ob .tools,.gate-top .tools{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.ob .tools .chip-btn{align-self:auto}

/* ——— v1.10: مشاريعي ——— */
.pjtag{--pf:color-mix(in srgb,var(--pc) 62%,var(--text));display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:1px 8px 1px 9px;border-radius:99px;background:color-mix(in srgb,var(--pc) 16%,transparent);color:var(--pf);font-style:normal;font-size:11.5px;font-weight:600;line-height:1.7;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pjtag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pc);flex-shrink:0}
.tx.done .pjtag{opacity:.7}
/* بطاقة المشروع */
.pj{--pf:color-mix(in srgb,var(--pc) 62%,var(--text));display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:24px;background:var(--card);position:relative;overflow:hidden}
.pj::before{content:"";position:absolute;inset-block:18px;inset-inline-start:0;width:4px;border-radius:0 4px 4px 0;background:var(--pc)}
[dir=ltr] .pj::before{border-radius:0 4px 4px 0}
[dir=rtl] .pj::before{border-radius:4px 0 0 4px}
.pj-h{display:flex;align-items:center;gap:12px;text-align:start;width:100%}
.pj-ic{width:42px;height:42px;flex-shrink:0;border-radius:14px;background:color-mix(in srgb,var(--pc) 18%,transparent);color:var(--pf,var(--pc));display:flex;align-items:center;justify-content:center}
.pj-h .tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.pj-h .tx b{font-size:16px;font-weight:700;font-family:var(--display)}
.pj-h .tx span{font-size:13px;color:var(--muted)}
.pj-h .tx em,.pj-top em{font-style:normal}
.pj-h .tx em.late{color:var(--coral-fg);font-weight:600}
.pj-pct{font-family:var(--display);font-weight:800;font-size:18px;color:var(--pf)}
.pj-bar{height:8px;border-radius:99px;background:var(--muted-bg);overflow:hidden}
.pj-bar i{display:block;height:100%;border-radius:99px;background:var(--pc);transition:width .35s cubic-bezier(.3,.7,.3,1)}
.pj-next{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 14px;border-radius:18px;background:var(--card2)}
[dir=rtl] .pj-next{padding:10px 14px 10px 12px}
.pj-next .tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.pj-next small{font-size:12px;font-weight:700;color:var(--pf)}
.pj-next b{font-size:15px;font-weight:600;line-height:1.5}
.pj-next .icon-btn{color:var(--text)}
.pj-play{background:var(--pc)!important;color:#0E1024!important}
.pj-play:disabled{opacity:.35}
.pj-in{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:99px;background:var(--chip-on);color:var(--mint-pale);font-size:12px;font-weight:700;white-space:nowrap}
.pj-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--muted)}
.pj-meta span{display:inline-flex;align-items:center;gap:5px}
.pj-meta .idle{color:var(--coral-fg);font-weight:600}
.pj-done-btn{color:var(--mint-pale);background:var(--chip-on)}
.pj-empty p{margin:0;font-size:14px;color:var(--muted);line-height:1.75}
.pj-chip{display:inline-flex;align-items:center;gap:8px}
.pj-chip i{width:10px;height:10px;border-radius:50%;background:var(--pc)}
/* صندوق الأفكار */
.pj-add{display:flex;gap:8px;align-items:center}
.pj-add .input{flex:1;min-width:0}
.pj-add .icon-btn{width:52px;height:52px;border-radius:16px}
.pj-add .icon-btn:disabled{opacity:.35}
.row.idea{gap:12px}
.row.idea .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);flex-shrink:0}
.row.idea .ago{font-size:12px;color:var(--muted);white-space:nowrap}
.pj-fold{width:100%;text-align:start}
.pj-fold .meta{display:flex;align-items:center;gap:6px}
.pj-fold .chev{display:flex;transition:transform .2s;transform:rotate(-90deg)}
.pj-fold .chev.up{transform:rotate(90deg)}
.pj-old{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--card2)}
.pj-old>i{width:10px;height:10px;border-radius:50%;background:var(--pc);flex-shrink:0}
.pj-old .tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.pj-old .tx b{font-size:15px;font-weight:600}.pj-old .tx span{font-size:12.5px;color:var(--muted)}
.pj-old .chip-btn{align-self:auto}
/* نافذة المشروع */
.pj-top{--pf:color-mix(in srgb,var(--pc) 62%,var(--text));display:flex;align-items:center;gap:12px}
.pj-top .tx{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.pj-top h3{line-height:1.35}
.pj-top .tx span{font-size:13px;color:var(--muted)}
.pj-why{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:14px;background:var(--bg);font-size:14px;line-height:1.7;color:var(--soft)}
.pj-why svg{color:var(--amber-fg);flex-shrink:0;margin-top:4px}
.pj-steps{display:flex;flex-direction:column;gap:8px}
.pj-step{--pf:color-mix(in srgb,var(--pc) 62%,var(--text));display:flex;align-items:center;gap:4px;border-radius:16px}
.pj-step .row{flex:1;min-height:50px}
.pj-step .row .box,.row.pick .box{border-color:var(--pc)}
.pj-step .row .box.on,.row.pick .box.on{background:var(--pc);color:#0E1024}
.pj-step .row .tx,.row.pick .tx{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.pj-step .row .tx small{font-size:11.5px;font-weight:700;color:var(--pf)}
.pj-step.nx .row{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--pc) 55%,transparent)}
.pj-step .grip{width:24px;margin-inline-end:-2px}
.pj-step.dragging{box-shadow:0 14px 34px -8px rgba(0,0,0,.35);background:var(--card2);position:relative;z-index:3}
.row.pick small{display:flex}
.pj-colors{display:flex;flex-wrap:wrap;gap:10px}
.pj-colors button{width:40px;height:40px;border-radius:50%;background:var(--pc);color:#0E1024;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.pj-colors button.on{box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--pc)}
.pj-colors button:active{transform:scale(.92)}
.btn.ghost.on{background:var(--chip-on);color:var(--mint-pale)}
input[type=date].input{min-height:52px;-webkit-appearance:none;appearance:none;text-align:start}
html.desk .pj-h:hover .tx b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
@media (max-width:370px){.nav button{font-size:11.5px}}
/* v1.10.1: وضوح القسم */
.pj-act{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 14px;border-radius:12px;background:var(--muted-bg);color:var(--text);font-size:14px;font-weight:600;white-space:nowrap;flex-shrink:0;min-width:84px}
.pj-act.go{background:var(--pc,var(--violet));color:#0E1024}
.pj-act.go:disabled{opacity:.4}
.pj-act.done{background:var(--chip-on);color:var(--mint-pale)}
.pj-act.sm{flex:none;height:32px;padding:0 10px;font-size:12.5px;border-radius:10px;color:var(--pf,var(--text))}
.pj-keys .pj-act{flex:none;height:32px;padding:0 12px;font-size:13px}
.pj-guide{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pj-guide li{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:16px;background:var(--card2)}
.pj-guide .n{width:36px;height:36px;flex-shrink:0;border-radius:12px;display:flex;align-items:center;justify-content:center}
.pj-guide li div{display:flex;flex-direction:column;gap:2px;min-width:0}
.pj-guide b{font-size:15px;font-weight:700;font-family:var(--display)}
.pj-guide span{font-size:13px;color:var(--muted);line-height:1.65}
.sheet .pj-guide li{background:var(--bg)}
.pj-keys{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;border:1px dashed var(--line)}
.pj-keys>div{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--soft);line-height:1.6}
.pj-keys>div>span:first-child{flex-shrink:0;min-width:76px}
.pj-intro{border:1.5px solid color-mix(in srgb,var(--violet) 45%,transparent)}
.pj-intro .chip-btn{align-self:flex-start}
.sec-t{display:flex;flex-direction:column;gap:2px;margin-bottom:-8px;padding:0 4px}
.sec-t b{font-family:var(--display);font-size:17px}
.sec-t span{font-size:13px;color:var(--muted)}
.row.idea .chev{display:flex;color:var(--muted);margin-inline-start:-4px}
.head .end .icon-btn{flex-shrink:0}
.pj-ring{position:relative;width:44px;height:44px;flex-shrink:0}
.pj-ring circle{transition:stroke-dashoffset .4s cubic-bezier(.3,.7,.3,1)}
.pj-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:11.5px;font-weight:800;direction:ltr}
.pj-h .tx span.late{color:var(--coral-fg);font-weight:600}
.pj-h .chev{display:flex;color:var(--muted)}
.pj{gap:10px;padding:14px 16px}
.idea-acts{display:flex;flex-direction:column;gap:8px}
.idea-acts .btn{justify-content:flex-start;padding:0 16px;font-family:var(--body);font-weight:600;font-size:15px;height:50px}
.idea-acts .chips{padding:2px 4px 6px}
.pj-del{align-self:center;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:12px;color:var(--danger);font-weight:600;font-size:14px}

/* يومك الأول: بطاقة ترحيب بدل «0%» للمستخدم الجديد */
.day1{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:28px;background:var(--card);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--amber) 70%,transparent);animation:pop .35s cubic-bezier(.2,.9,.25,1.1)}
.day1 .h{display:flex;align-items:center;gap:12px}
.day1 .bm{width:44px;height:44px;flex-shrink:0;border-radius:14px;background:#0E1024;color:var(--amber);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
.day1 .ht{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.day1 .ht b{font-family:var(--display);font-weight:800;font-size:19px}
.day1 .ht span{font-size:13px;color:var(--muted)}
.day1 .h em{font-style:normal;font-family:var(--display);font-weight:700;font-size:15px;color:var(--amber-fg)}
.day1 .seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.day1 .seg i{height:6px;border-radius:99px;background:var(--muted-bg);transition:background .35s ease}
.day1 .seg i.on{background:var(--mint)}
.day1 .sts{display:flex;flex-direction:column;gap:8px}
.day1 .st{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:16px;background:var(--card2);text-align:start;transition:background .3s ease}
.day1 .st .o{width:30px;height:30px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--amber);background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber-fg);font-family:var(--display);font-weight:700;font-size:13px;transition:background .3s,border-color .3s}
.day1 .st .tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.day1 .st .tx b{font-size:14px;font-weight:600}
.day1 .st .tx small{font-size:12px;color:var(--muted)}
.day1 .st .cv{color:var(--muted)}
.day1 .st.on{background:color-mix(in srgb,var(--mint) 12%,var(--card2));cursor:default}
.day1 .st.on .o{background:var(--mint);border-color:var(--mint);color:var(--mint-ink);animation:pop .3s ease}
.day1 .st.on .tx b{color:var(--done-fg);text-decoration:line-through}
.day1 .skip{align-self:center;font-size:12px;color:var(--muted);padding:4px 10px;min-height:32px}
.day1.won{flex-direction:row;align-items:center;gap:16px;padding:20px;background:var(--mint);color:var(--mint-ink);box-shadow:none}
.day1.won .l{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.day1.won .l b{font-family:var(--display);font-weight:800;font-size:20px}
.day1.won .l span{font-size:13px;font-weight:600;opacity:.85;line-height:1.6}
.day1.won .chip-btn{margin-top:4px;background:rgba(8,38,29,.12);color:var(--mint-ink)}
.day1.won .pc{width:88px;height:88px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--mint-ink) calc(var(--p)*1%),rgba(8,38,29,.15) 0)}
.day1.won .pc b{width:66px;height:66px;border-radius:50%;background:var(--mint);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:19px}
.pr .dot.hint{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 14%,transparent);animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--amber) 45%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--amber) 0%,transparent)}}

/* التسجيل: نسخة مصغّرة من «اليوم» تتشكّل مع الإجابات (تبقى ظاهرة أثناء التمرير) */
.obx{gap:18px}
.obx .cities{display:flex;flex-wrap:wrap}
.obx .cities .chip{border-radius:999px}
.obp{position:sticky;top:calc(var(--safe-t) + 10px);z-index:2;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:26px;background:var(--card2);box-shadow:0 0 0 1px var(--line),0 -80px 0 16px var(--bg);transform-origin:50% 30%}
.obp-k{align-self:center;display:flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--card);font-size:11px;font-weight:600;color:var(--muted)}
.obp-k i{width:7px;height:7px;border-radius:50%;background:var(--mint);animation:obk 1.8s ease-in-out infinite}
@keyframes obk{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mint) 50%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--mint) 0%,transparent)}}
.obp-h,.obp-c{border-radius:16px;transition:box-shadow .3s ease,background .3s ease}
.obp-h{display:flex;flex-direction:column;gap:2px;padding:6px 10px}
.obp-h small{font-size:11px;color:var(--muted)}
.obp-h b{font-family:var(--display);font-weight:800;font-size:18px;line-height:1.4;min-height:25px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.obp .ph{display:inline-block;height:12px;border-radius:6px;background:var(--muted-bg);vertical-align:middle}
.obp-c{background:var(--card);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.obp-h.on{background:var(--card)}
.obp .on{box-shadow:0 0 0 2px var(--amber),0 12px 26px -18px color-mix(in srgb,var(--amber) 80%,transparent)}
.obp-t{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.obp-t b{font-family:var(--display);font-size:13px;font-weight:700}
.obp-pr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;text-align:center}
.obp-pr div{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600}
.obp-pr i{width:26px;height:26px;border-radius:50%;border:2px solid var(--off)}
.obp-pr em{font-style:normal;font-size:11px;font-weight:500;color:var(--off);font-variant-numeric:tabular-nums}
.obp-pr em.tm{color:var(--mint-fg);font-weight:600;animation:fade .35s ease}
.obp-hb{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;min-height:20px;animation:fade .3s ease}
.obp-hb i{width:18px;height:18px;border-radius:50%;border:2px solid var(--coral);flex-shrink:0}
.obp-hb.nil{animation:none}.obp-hb.nil i{border-color:var(--off)}
.ob.leave>:not(.obp){opacity:0;transition:opacity .2s ease}
.ob.leave .obp{transform:translateY(-8px) scale(1.16);opacity:0;transition:transform .5s cubic-bezier(.3,0,.2,1),opacity .32s ease .18s}
.obx>.btn,.obx>.btns{position:sticky;bottom:calc(var(--safe-b) + 14px);z-index:2;box-shadow:0 30px 0 14px var(--bg)}

/* ===== v1.13 ترتيب بصري: لون قوي واحد، والباقي هادئ ===== */
h2.sec{display:flex;align-items:center;gap:10px;color:var(--text)}
h2.sec .ti{width:30px;height:30px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center}
h2.sec.c-mint .ti{background:color-mix(in srgb,var(--mint) 16%,transparent);color:var(--mint-fg)}
h2.sec.c-coral .ti{background:color-mix(in srgb,var(--coral) 16%,transparent);color:var(--coral-fg)}
h2.sec.c-violet .ti{background:color-mix(in srgb,var(--violet) 18%,transparent);color:var(--violet-fg)}
h2.sec.c-amber .ti{background:color-mix(in srgb,var(--amber) 20%,transparent);color:var(--amber-fg)}
.head h1{font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head>div:first-child{min-width:0;flex:1}
.badge{background:var(--card);color:var(--text);box-shadow:0 0 0 1px var(--line)}
.badge svg{color:var(--coral-fg)}
.hero{position:relative;overflow:hidden}
.hero .l,.hero .ring{position:relative}
.hero .khatam{position:absolute;width:210px;height:210px;inset-inline-end:-58px;top:-36px;stroke:var(--amber-ink);stroke-opacity:.045;stroke-width:1;pointer-events:none}
.hero .big{font-variant-numeric:tabular-nums}
/* «التالي» */
.nextc{display:flex;flex-direction:column;border-radius:22px;background:var(--card);overflow:hidden}
.nx-row{display:flex;align-items:center;gap:12px;padding:13px 16px;text-align:start;width:100%}
.nx-row+.nx-row{border-top:1px solid var(--line)}
.nx-row .ic{width:34px;height:34px;flex-shrink:0;border-radius:11px;background:var(--card2);color:var(--muted);display:flex;align-items:center;justify-content:center}
.nx-row .ic.am{background:color-mix(in srgb,var(--amber) 20%,transparent);color:var(--amber-fg)}
.nx-row .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.nx-row .tx b{font-size:14px;font-weight:600}
.nx-row .tx span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-row em{font-style:normal;font-family:var(--display);font-weight:700;font-size:13px;color:var(--amber-fg);white-space:nowrap}
.nx-row .cv{color:var(--muted)}
/* الأذكار والورد: هادئة */
.tog.on{background:var(--muted-bg);color:var(--text)}
.tog.on .o{background:var(--mint);border-color:var(--mint);color:var(--mint-ink)}
.row-btns button.pri{background:color-mix(in srgb,var(--mint) 20%,var(--card));color:var(--mint-fg)}
/* بطاقات المدرّب: خلفية محايدة واللون بالأيقونة والزر */
.coach,.coach.rescue,.coach.up{background:var(--card2);border:0}
.coach .ch .ic{background:color-mix(in srgb,var(--mint) 18%,transparent);color:var(--mint-fg)}
.coach.rescue .ch .ic{background:color-mix(in srgb,var(--coral) 18%,transparent);color:var(--coral-fg)}
.coach.up .ch .ic{background:color-mix(in srgb,var(--amber) 22%,transparent);color:var(--amber-fg)}
.coach .chip-btn.on{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mint);color:var(--mint-fg)}
.coach.rescue .chip-btn.on{background:transparent;box-shadow:inset 0 0 0 1.5px var(--coral);color:var(--coral-fg)}
.coach.up .chip-btn.on{background:transparent;box-shadow:inset 0 0 0 1.5px var(--amber);color:var(--amber-fg)}
/* العادة: معلومة وحدة، والأسبوع نقاط صغيرة */
.week{gap:3px}
.week i{width:6px;height:6px;border-radius:50%}
.week i.off{width:4px;height:4px;opacity:.5}
.week i.on.half{background:linear-gradient(90deg,var(--week-on) 50%,var(--muted-bg) 50%)}
.habit .nm em{font-size:12.5px;font-weight:600}
/* هدف الشهر: بطاقة عادية بشريط بنفسجي */
.goal-mini{background:var(--card);color:var(--text)}
.goal-mini .pill{background:var(--muted-bg);color:var(--muted)}
.goal-mini .track{background:var(--muted-bg)}
.goal-mini .track i{background:var(--violet)}
/* رسومات الحالات الفارغة */
.empty-art{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px 6px;text-align:center;width:100%}
.empty-art b{font-family:var(--display);font-size:16px;font-weight:700;margin-top:4px}
.empty-art span{font-size:13px;color:var(--muted)}
.allp{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--card2);animation:fade .35s ease}
.allp span{display:flex;flex-direction:column;gap:1px;font-size:12.5px;color:var(--muted)}
.allp b{font-size:14px;color:var(--text)}
.pj-empty .art{align-self:center}

/* ===== v1.13 تفاعلات صغيرة ===== */
.pr .dot{position:relative;transition:background .25s ease,border-color .25s ease,box-shadow .35s ease,transform .15s}
.pr .dot.s2{box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--amber)}
.pr .dot .rip{position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--mint);pointer-events:none;animation:rip .55s cubic-bezier(.2,.7,.3,1) both}
.pr .dot.s2 .rip{border-color:var(--amber)}
@keyframes rip{from{transform:scale(1);opacity:.75}to{transform:scale(1.9);opacity:0}}
.pop svg path{stroke-dasharray:24;animation:draw .32s ease .06s both}
@keyframes draw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
.chk{position:relative}
.chk .plus1{position:absolute;top:-6px;left:50%;width:28px;margin-left:-14px;text-align:center;font-style:normal;font-family:var(--display);font-weight:800;font-size:13px;color:var(--coral-fg);pointer-events:none;animation:plus1 .75s cubic-bezier(.2,.7,.3,1) both}
@keyframes plus1{from{transform:translateY(0);opacity:1}to{transform:translateY(-26px);opacity:0}}
.habit .nm span.pop{display:inline-block;animation:bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.12);color:var(--coral-fg)}100%{transform:scale(1)}}
.row .tx.done{text-decoration:none}
.row .tx .tt{background:linear-gradient(currentColor,currentColor) right 55%/0 2px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .35s cubic-bezier(.4,0,.2,1) .05s}
[dir=ltr] .row .tx .tt{background-position:left 55%}
.row .tx.done .tt{background-size:100% 2px}
.row .box{transition:background .2s ease}
/* التنقل: كبسولة وحدة بتنزلق */
.nav .in{position:relative}
.nav .pill{position:absolute;top:50%;height:56px;margin-top:-28px;width:calc((100% - 20px) / 5);inset-inline-start:calc(6px + var(--i) * ((100% - 20px) / 5 + 2px));border-radius:18px;background:var(--mint);transition:inset-inline-start .42s cubic-bezier(.3,1.25,.5,1),background .3s ease;pointer-events:none}
.nav .pill.p-month{background:var(--amber)}
.nav .pill.p-me,.nav .pill.p-projects{background:var(--violet)}
html:not(.desk) .nav .in>button[aria-current=page]{background:transparent;position:relative;transition:color .3s ease}
html:not(.desk) .nav .in>button{position:relative}
html.desk .nav .pill{display:none}
a.set{color:inherit;text-decoration:none}

/* ===== v1.14 لمسات من نوشن ===== */
/* أيقونة المشروع */
.pj-tile{width:44px;height:44px;border-radius:15px}
.pj-bar.thin{height:5px}
.pjtag.ic{padding-inline-start:7px}
.pjtag.ic::before{display:none}
.pjtag.ic svg{flex-shrink:0}
.pj-icons{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.pj-icons button{height:46px;border-radius:14px;background:var(--card2);color:var(--soft);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,box-shadow .2s}
.pj-icons button.on{background:color-mix(in srgb,var(--pc) 20%,transparent);color:color-mix(in srgb,var(--pc) 62%,var(--text));box-shadow:inset 0 0 0 2px var(--pc)}
/* تبويبات المشروع */
.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;border-radius:14px;background:var(--card2)}
.seg button{height:40px;border-radius:11px;font-size:14px;font-weight:600;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px;transition:background .2s,color .2s}
.seg button.on{background:var(--card);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.seg button small{font-size:11px;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--muted-bg);display:inline-flex;align-items:center;justify-content:center}
/* ملاحظات المشروع */
.notes{display:flex;flex-direction:column;gap:2px;min-height:200px}
.notes .empty{margin-bottom:6px}
.nb{display:flex;align-items:center;gap:10px;min-height:36px}
.nb-in{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:var(--text);padding:6px 2px;line-height:1.7;resize:none;overflow:hidden}
.nb-in::placeholder{color:var(--off)}
.nb-in:focus{background:color-mix(in srgb,var(--pc) 7%,transparent);border-radius:8px}
.nb-h .nb-in{font-family:var(--display);font-weight:700;font-size:18px;padding-top:12px}
.nb-b .dot{width:6px;height:6px;border-radius:50%;background:var(--text);flex-shrink:0;margin-inline-start:6px}
.nb-p textarea{display:block}
.nb-t .box{width:24px;height:24px;flex-shrink:0;border-radius:8px;border:2px solid var(--pc);display:flex;align-items:center;justify-content:center;color:var(--violet-ink);transition:background .2s}
.nb-t .box.on{background:var(--pc)}
.nb-t.done .nb-in{color:var(--done-fg);text-decoration:line-through}
.nb-t .pj-act.sm{height:32px;min-width:0;padding:0 12px;font-size:12.5px}
.nb-sent{font-size:12px;font-weight:600;padding:5px 10px;border-radius:10px;background:color-mix(in srgb,var(--pc) 18%,transparent);color:color-mix(in srgb,var(--pc) 62%,var(--text));white-space:nowrap}
.nb-l{margin:4px 0}
.nb-l a{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--card2);color:var(--text);font-size:14px;font-weight:600;text-decoration:none}
.nb-l a svg{color:color-mix(in srgb,var(--pc) 62%,var(--text));flex-shrink:0}
.nb-l a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-l .nb-in{background:var(--card2);border-radius:12px;padding:10px 12px}
.nb-l .x{width:32px;height:32px;border-radius:10px;color:var(--muted);display:flex;align-items:center;justify-content:center}
.nb-new{margin-top:4px}
.nbar{position:sticky;bottom:0;z-index:2;margin-top:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:6px;border-radius:18px;background:#15173A;box-shadow:0 0 0 6px var(--card)}
.nbar button{height:48px;border-radius:13px;color:#F4F1EA;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11.5px}
.nbar button:active{background:rgba(255,255,255,.08)}
.nbar .nk-h{font-family:var(--display);font-size:16px;line-height:18px}
/* محاسبة اليوم */
.muh{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:16px;border-radius:24px;background:#15173A;color:#F4F1EA;text-align:start;width:100%}
.muh .khatam{position:absolute;width:150px;height:150px;inset-inline-end:-40px;top:-46px;stroke:#FFC24B;stroke-opacity:.12;stroke-width:1.2;pointer-events:none}
.muh .ic{position:relative;width:40px;height:40px;flex-shrink:0;border-radius:13px;background:rgba(255,194,75,.16);color:#FFC24B;display:flex;align-items:center;justify-content:center}
.muh .tx{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.muh .tx b{font-family:var(--display);font-size:16px}
.muh .tx span{font-size:12.5px;color:#A3A7C7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.muh .go{position:relative;padding:8px 16px;border-radius:12px;background:#FFC24B;color:#1A1406;font-family:var(--display);font-weight:700;font-size:13px}
:root:not([data-theme=light]) .muh{background:var(--card2);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--amber) 40%,transparent)}
.muh.done{background:var(--card);color:var(--text);box-shadow:none;padding:12px 16px}
.muh.done .ic{width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--mint) 18%,transparent);color:var(--mint-fg)}
.muh.done .tx b{font-family:var(--body);font-size:14px;font-weight:600}
.muh.done .tx span{color:var(--muted)}
.muh.done .go{background:transparent;color:var(--muted);font-family:var(--body);font-weight:600;padding:0}
.muh-h{display:flex;align-items:center;gap:12px}
.muh-h .ic{width:42px;height:42px;border-radius:13px;background:#15173A;color:#FFC24B;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.muh-h span{font-size:12.5px;color:var(--muted)}
.muh-tmr{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--soft);margin-top:4px;cursor:pointer}
.muh-tmr input{width:18px;height:18px;accent-color:var(--violet)}
.muh-q{font-size:12.5px;color:var(--muted);line-height:1.7;padding:10px 12px;border-radius:12px;background:var(--card2)}
.muh-list{display:flex;flex-direction:column;gap:8px}
.muh-list>div{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:14px;background:var(--bg);font-size:13.5px;line-height:1.6}
.muh-list small{font-size:12px;font-weight:700;color:var(--amber-fg)}
.muh-list .mu{color:var(--muted)}
.muh-rep{margin-top:8px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--amber) 12%,var(--card2));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--amber) 45%,transparent);font-size:13px}
/* ترتيب الأقسام */
.ord{display:flex;flex-direction:column;gap:6px}
.ord-row{display:flex;align-items:center;gap:6px;min-height:48px;padding:4px 6px 4px 14px;border-radius:14px;background:var(--bg)}
[dir=ltr] .ord-row{padding:4px 14px 4px 6px}
.ord-row .nm{flex:1;font-size:15px;font-weight:500}
.ord-row .icon-btn:disabled{opacity:.3}
:root:not([data-theme=light]) .nbar{background:var(--muted-bg);box-shadow:0 0 0 6px var(--card),inset 0 0 0 1px var(--line)}
.fast-row.on{background:var(--card);border:1px solid color-mix(in srgb,var(--mint) 45%,transparent)}
.fast-row.on .ic{background:color-mix(in srgb,var(--mint) 16%,transparent)}