:root{
  --emerald:#05A566; --deep:#14445A; --gold:#C1B488; --teal:#10A6A3;
  --steel:#3B7CB9; --tealdark:#1E8AA8; --sky:#66CBE2; --indigo:#331272;
  --violet:#7257A2; --peri:#787EFB; --bluemid:#2E78A5; --grey:#DCDCDC;
  --ink:#0E2A38; --muted:#5C7481; --line:#E3E9EC; --bg:#F3F6F7; --card:#FFFFFF;
  --shadow:0 2px 10px rgba(20,68,90,.07); --shadow-lg:0 14px 40px rgba(20,68,90,.16);
  --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Tajawal',system-ui,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
 
#app{position:relative;isolation:isolate}
#app::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;filter:blur(110px);opacity:.5;
  background:
    radial-gradient(300px 300px at 78% 14%, #05A566 0%, transparent 65%),
    radial-gradient(280px 280px at 12% 62%, #10A6A3 0%, transparent 65%),
    radial-gradient(240px 240px at 62% 88%, #66CBE2 0%, transparent 65%),
    radial-gradient(220px 220px at 32% 22%, #C1B488 0%, transparent 65%);
  animation:appGlow 26s ease-in-out infinite}
@keyframes appGlow{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(-28px,22px,0) scale(1.08)}
  66%{transform:translate3d(24px,-18px,0) scale(1.04)}}
h1,h2,h3,h4,.kufi{font-family:'Noto Kufi Arabic','Tajawal',sans-serif;letter-spacing:-.2px}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
:focus-visible{outline:3px solid var(--emerald);outline-offset:2px;border-radius:6px}
.hide{display:none !important}

 
#login{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px;
  position:relative; overflow:hidden;
  background:linear-gradient(158deg,#FFFFFF 0%,#F3FAF8 30%,#E9F5F0 62%,#E1F1EA 100%);
}
 
.page-aurora{position:absolute;inset:-25%;z-index:0;filter:blur(90px);opacity:.55;pointer-events:none}
.page-aurora i{position:absolute;display:block;border-radius:50%}
.page-aurora i:nth-child(1){width:520px;height:520px;background:#05A566;top:-10%;right:-6%;opacity:.30;animation:drift1 19s ease-in-out infinite}
.page-aurora i:nth-child(2){width:470px;height:470px;background:#10A6A3;bottom:-12%;left:-8%;opacity:.28;animation:drift2 23s ease-in-out infinite}
.page-aurora i:nth-child(3){width:360px;height:360px;background:#66CBE2;top:52%;left:34%;opacity:.24;animation:drift3 21s ease-in-out infinite}
.page-aurora i:nth-child(4){width:320px;height:320px;background:#C1B488;top:8%;left:18%;opacity:.20;animation:drift1 27s ease-in-out infinite reverse}
.login-wrap{position:relative;z-index:1}
.login-wrap{width:100%;max-width:1040px;display:grid;grid-template-columns:1.02fr .98fr;
  background:var(--card);border-radius:26px;overflow:hidden;border:1px solid #E4EDEA;
  box-shadow:0 24px 70px rgba(20,68,90,.16), 0 2px 8px rgba(20,68,90,.06)}
.login-brand{padding:22px 30px 28px;color:#0E2A38;position:relative;overflow:hidden;
  display:flex;flex-direction:column;min-height:472px;border-right:1px solid #E6F0EC;
  background:linear-gradient(158deg,#F4FBF8 0%,#E9F6F0 34%,#DDF0E7 72%,#D2EBE0 118%)}
.login-brand::after{content:"";position:absolute;inset:-40px;opacity:.22;z-index:1;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, #14445A 1px, transparent 0);background-size:20px 20px;
  -webkit-mask-image:radial-gradient(115% 90% at 50% 42%,#000 18%,transparent 72%);
  mask-image:radial-gradient(115% 90% at 50% 42%,#000 18%,transparent 72%);
  animation:dotDrift 34s linear infinite}
@keyframes dotDrift{0%{transform:translate(0,0)}100%{transform:translate(-36px,-36px)}}
 
.vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 92% at 50% 44%, transparent 46%, rgba(20,68,90,.09) 100%)}
 
.sweep{position:absolute;top:-60%;bottom:-60%;width:210px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  transform:rotate(14deg);animation:sweepGo 9s ease-in-out infinite}
@keyframes sweepGo{0%{right:-30%;opacity:0}12%{opacity:1}55%{opacity:1}70%,100%{right:112%;opacity:0}}
.login-brand>*{position:relative;z-index:2}

 
.aurora{position:absolute;inset:-28%;z-index:0;filter:blur(72px);opacity:.42;pointer-events:none}
.aurora i{position:absolute;display:block;border-radius:50%}
.aurora i:nth-child(1){width:320px;height:320px;background:#05A566;top:-8%;right:-8%;animation:drift1 17s ease-in-out infinite}
.aurora i:nth-child(2){width:300px;height:300px;background:#10A6A3;bottom:-12%;left:-10%;animation:drift2 21s ease-in-out infinite}
.aurora i:nth-child(3){width:210px;height:210px;background:#66CBE2;top:42%;left:30%;opacity:.55;animation:drift3 19s ease-in-out infinite}
.aurora i:nth-child(4){width:170px;height:170px;background:#C1B488;bottom:16%;right:18%;opacity:.45;animation:drift1 25s ease-in-out infinite reverse}
.aurora i:nth-child(5){width:150px;height:150px;background:#787EFB;top:8%;left:12%;opacity:.26;animation:drift2 27s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-42px,34px) scale(1.16)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(46px,-30px) scale(1.12)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(.95)}50%{transform:translate(28px,26px) scale(1.2)}}

 
.masthead{display:flex;align-items:center;justify-content:space-between;gap:14px}
.mh-logo{flex:none;display:grid;place-items:center;padding:2px 4px}
.mh-logo img{height:92px;width:auto;display:block;animation:halo 4.2s ease-in-out infinite}
@keyframes halo{
  0%,100%{filter:drop-shadow(0 2px 5px rgba(20,68,90,.14))}
  50%{filter:drop-shadow(0 0 14px rgba(5,165,102,.45)) drop-shadow(0 0 26px rgba(102,203,226,.35))}}
.mh-text{text-align:left;line-height:1.6;min-width:0;max-width:300px}
.mh-text span{display:block}
.mh-text .l1{font-family:'Noto Kufi Arabic',sans-serif;font-size:14px;font-weight:700;color:#8A7A40;letter-spacing:.2px;text-align:center}
.mh-text .l2{font-size:12px;font-weight:600;color:#3E5866;margin-top:4px;white-space:nowrap}
.mh-text .l3{font-size:11px;font-weight:500;color:#6B838E;white-space:nowrap}
.mh-text .ln{height:1.5px;margin:7px 0 6px;background:linear-gradient(to left,#C1B488,rgba(193,180,136,0))}

 
.brand-center{margin:auto 0;text-align:center;padding:14px 0}
.brand-center h1{
  font-size:clamp(19px,3.5vw,33px);font-weight:800;line-height:1.55;white-space:nowrap;
  background:linear-gradient(100deg,#0C3A4C 12%,#0A6B60 30%,#05A566 46%,#0A6B60 62%,#0C3A4C 82%);
  background-size:230% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:sheen 7s linear infinite;
  filter:drop-shadow(0 2px 10px rgba(5,165,102,.22))}
@keyframes sheen{0%{background-position:220% 0}100%{background-position:-20% 0}}
.brand-center .rule{width:118px;height:3px;margin:13px auto 15px;border-radius:99px;
  background:linear-gradient(90deg,transparent,#C1B488 35%,#05A566 65%,transparent);
  animation:ruleGlow 3.4s ease-in-out infinite}
@keyframes ruleGlow{0%,100%{opacity:.75;box-shadow:0 0 6px rgba(193,180,136,.45);width:104px}
  50%{opacity:1;box-shadow:0 0 16px 2px rgba(5,165,102,.5);width:158px}}
.login-brand .yr{display:inline-block;padding:5px 17px;border-radius:999px;
  background:#FBF7EA;border:1.5px solid #E3D8B4;color:#8A7A40;
  font-size:12.5px;font-weight:700;letter-spacing:.4px;animation:yrGlow 3.8s ease-in-out infinite}
@keyframes yrGlow{0%,100%{box-shadow:0 0 0 0 rgba(193,180,136,.45)}50%{box-shadow:0 0 20px 3px rgba(193,180,136,0)}}
.login-brand p{margin:17px auto 0;color:#4A6270;font-size:14.5px;max-width:33ch}

.brandbar{display:flex;gap:5px;margin-top:6px}
.brandbar i{height:6px;flex:1;border-radius:99px;opacity:.85;animation:barGlow 2.8s ease-in-out infinite}
@keyframes barGlow{0%,100%{opacity:.5;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.75)}}
.login-form{padding:40px 42px;display:flex;flex-direction:column;justify-content:center}
.form-head{margin-bottom:20px}
.form-head h2{font-size:22px;color:var(--deep);font-weight:800}
.form-head p{font-size:13.5px;color:var(--muted);margin-top:5px}
.tabs{display:flex;gap:6px;background:#EEF3F5;padding:5px;border-radius:14px;margin-bottom:22px}
.tabs button{flex:1;padding:11px 6px;border-radius:10px;font-weight:700;font-size:13.5px;
  color:var(--muted);transition:.18s;line-height:1.35}
.tabs button.on{background:#fff;color:var(--deep);box-shadow:var(--shadow)}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:700;color:var(--deep);margin-bottom:7px}
.fw{position:relative;display:block}
.fw > svg{position:absolute;top:50%;right:14px;transform:translateY(-50%);color:#9BAAB2;pointer-events:none;transition:.18s}
.field input,.field select{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;
  background:#FAFCFC;transition:.18s;font-size:15px}
.fw input,.fw select{padding-right:44px}
.fw select{appearance:none;-webkit-appearance:none;padding-left:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235C7481' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat:no-repeat;background-position:left 14px center}
.fw.pw input{padding-left:46px}
.field input:focus,.field select:focus{border-color:var(--emerald);background:#fff;outline:none;
  box-shadow:0 0 0 4px rgba(5,165,102,.13)}
.fw input:focus + svg,.fw input:focus ~ svg{color:var(--emerald)}
.eye{position:absolute;top:50%;left:8px;transform:translateY(-50%);width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;color:#8FA0A8;transition:.16s}
.eye:hover{background:#EEF3F5;color:var(--deep)}
.note{display:flex;align-items:flex-start;gap:8px;margin-top:9px;padding:9px 12px;border-radius:10px;
  background:#F5F9F8;border:1px solid #E3EDEA}
.note svg{flex:none;margin-top:2px;color:var(--teal)}
.note span{font-size:12.5px;color:var(--muted);line-height:1.65}
.btn-main{width:100%;padding:14px;border-radius:12px;color:#fff;font-weight:800;font-size:16px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(120deg,var(--emerald),#04916f 60%,var(--teal));
  box-shadow:0 8px 22px rgba(5,165,102,.32);transition:.18s;margin-top:18px}
.btn-main svg{transition:transform .18s}
.btn-main:hover svg{transform:translateX(-4px)}
.btn-main:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(5,165,102,.42)}
.btn-main:disabled{opacity:.6;cursor:progress;transform:none}
.msg{margin-top:13px;padding:11px 14px;border-radius:11px;font-size:14px;font-weight:600;display:none}
.msg.err{display:block;background:#FDECEC;color:#A22A2A;border:1px solid #F6CFCF}

 
#app{min-height:100vh;display:flex;flex-direction:column}
header.top{
  background:linear-gradient(120deg,#14445A 0%,#0F5566 60%,#0B6B57 100%);
  color:#fff;padding:14px 22px;display:flex;align-items:center;gap:16px;
  border-bottom:3px solid var(--gold);position:sticky;top:0;z-index:40}
header.top{position:relative;overflow:hidden}
header.top::after{content:"";position:absolute;top:-80%;bottom:-80%;width:150px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(160,240,220,.16),transparent);
  transform:rotate(16deg);animation:sweepGo 14s ease-in-out infinite}
header.top > *{position:relative;z-index:1}
header.top .logo{display:grid;place-items:center;flex:none;padding-left:4px}
header.top .logo img{height:26px;width:auto;display:block;
  filter:drop-shadow(0 0 8px rgba(102,203,226,.35))}
header.top .logo svg{opacity:.9}
header.top h1{font-size:17.5px;font-weight:800;line-height:1.35}
header.top .sub{font-size:12.5px;color:rgba(255,255,255,.75)}
.spacer{flex:1}
.whoami{text-align:left;font-size:12.5px;color:rgba(255,255,255,.86);line-height:1.5}
.whoami b{display:block;font-size:14px;color:#fff;font-weight:700}
.btn-out{padding:8px 15px;border-radius:10px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.3);color:#fff;font-weight:700;font-size:13.5px;transition:.18s;flex:none}
.btn-out:hover{background:rgba(255,255,255,.24)}
.burger{display:none;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.3);color:#fff;font-weight:700;font-size:14px}

.shell{flex:1;display:flex;align-items:flex-start;gap:20px;padding:20px;max-width:1560px;width:100%;margin:0 auto}

 
aside{width:315px;flex:none;background:rgba(255,255,255,.95);backdrop-filter:blur(6px);
  border-radius:var(--r);box-shadow:var(--shadow);
  border:1px solid var(--line);overflow:hidden;position:sticky;top:88px}
.aside-head{padding:15px 18px;background:linear-gradient(120deg,#F4F9F8,#EAF4F1);border-bottom:1px solid var(--line)}
.aside-head h3{font-size:15px;color:var(--deep);font-weight:700;display:flex;align-items:center;gap:9px}
.aside-body{padding:16px 18px 20px}
.step{margin-bottom:15px}
.step label{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  color:var(--muted);margin-bottom:7px;letter-spacing:.2px}
.step .num{width:19px;height:19px;border-radius:6px;background:var(--deep);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.step select{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:11px;
  background:#FAFCFC;font-size:14px;font-weight:500}
.step select:focus{border-color:var(--emerald);outline:none;box-shadow:0 0 0 4px rgba(5,165,102,.12)}
.step select:disabled{background:#F1F4F5;color:#9BAAB2;cursor:not-allowed}
.locked{padding:11px 13px;border-radius:11px;background:#F4F8F7;border:1.5px solid #E1EDE9;
  font-size:14px;font-weight:600;color:var(--deep);display:flex;align-items:center;gap:8px}
.locked svg{flex:none;opacity:.5}
.aside-foot{padding:13px 18px;background:#FAFCFC;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted)}

 
main{flex:1;min-width:0}
.panel{background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-radius:var(--r);
  box-shadow:var(--shadow);border:1px solid var(--line);padding:22px 24px;margin-bottom:18px}
.panel-title{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.panel-title h2{font-size:19px;color:var(--deep);font-weight:800}
.panel-sub{font-size:14px;color:var(--muted);margin-bottom:18px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:999px;
  font-size:12.5px;font-weight:700;background:#EAF7F1;color:#046B45;border:1px solid #CDEBDF}
.pill.gold{background:#FBF7EA;color:#8A7A40;border-color:#EEE4C7}

 
.weeks{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:13px}
.week{position:relative;border-radius:15px;padding:16px 12px 14px;text-align:center;color:#fff;
  overflow:hidden;transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s;
  box-shadow:0 4px 14px rgba(20,68,90,.14)}
.week:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-lg)}
.week::after{content:"";position:absolute;top:-60%;bottom:-60%;width:46px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:rotate(18deg);animation:tileShine 5.5s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes tileShine{0%{right:-40%;opacity:0}10%{opacity:1}45%{opacity:1}60%,100%{right:120%;opacity:0}}
.week::before{content:"";position:absolute;inset:0;opacity:.2;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);background-size:14px 14px}
.week>*{position:relative;z-index:1}
.week .lbl{font-size:12px;font-weight:600;opacity:.9}
.week .n{font-family:'Noto Kufi Arabic',sans-serif;font-size:32px;font-weight:800;line-height:1.15;margin:1px 0 4px}
.week .ready{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:999px;
  background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.4)}
.week .n.sp{font-size:15px;line-height:1.4;margin:5px 0 6px}
.week.idle{opacity:.5}
.week.idle:hover{opacity:.78}

 
.crumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);margin-bottom:16px}
.crumb b{color:var(--deep)}
.btn-back{padding:8px 15px;border-radius:10px;background:#EEF3F5;color:var(--deep);
  font-weight:700;font-size:13.5px;border:1px solid var(--line);transition:.18s}
.btn-back:hover{background:#E2EBEF}
.wk-hero{border-radius:var(--r);padding:22px 24px;color:#fff;margin-bottom:18px;position:relative;overflow:hidden}
.wk-hero::after{content:"";position:absolute;inset:0;opacity:.16;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);background-size:16px 16px}
.wk-hero>*{position:relative;z-index:1}
.wk-hero .eyebrow{font-size:13px;opacity:.85;font-weight:600}
.wk-hero h2{font-size:26px;font-weight:800;margin-top:2px}
.wk-hero .meta{margin-top:10px;font-size:13.5px;opacity:.9}

.res{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:15px}
.rcard{border:1.5px solid var(--line);border-radius:15px;padding:20px 18px;background:var(--card);
  text-align:right;transition:.2s;display:flex;flex-direction:column;gap:11px;position:relative;overflow:hidden}
.rcard::before{content:"";position:absolute;top:0;right:0;left:0;height:4px;background:var(--c)}
.rcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--c)}
.rcard .ico{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;color:#fff;background:var(--c);
  box-shadow:0 6px 16px color-mix(in srgb, var(--c) 40%, transparent)}
.rcard h4{font-size:15.5px;color:var(--deep);font-weight:700}
.rcard p{font-size:13px;color:var(--muted);line-height:1.65;flex:1}
.rcard .state{font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;align-self:flex-start;
  background:#F2F5F6;color:#7A8D96;border:1px solid var(--line)}
.rcard .state.on{background:#EAF7F1;color:#046B45;border-color:#CDEBDF}

 
.dom{border:1.5px solid var(--line);border-radius:15px;overflow:hidden;margin-bottom:13px;background:var(--card)}
.dom-head{width:100%;display:flex;align-items:center;gap:12px;padding:14px 18px;text-align:right;
  border-right:5px solid var(--c);background:#FAFCFC;transition:.18s}
.dom-head:hover{background:#F1F6F7}
.dom-head .dico{width:40px;height:40px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:var(--c);color:#fff;box-shadow:0 5px 14px color-mix(in srgb,var(--c) 38%,transparent)}
.dom-head h3{flex:1;font-size:16.5px;font-weight:700;color:var(--deep);font-family:'Noto Kufi Arabic','Tajawal',sans-serif}
.dom-head .chev{color:var(--muted);transition:transform .2s;flex:none}
.dom.open .dom-head{background:#fff}
.dom.open .chev{transform:rotate(180deg)}
.dom-body{display:none;padding:16px 18px 20px;border-top:1px solid var(--line)}
.dom.open .dom-body{display:block}
.dom-body .sub{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:13px}
 
.oc{border:1px solid var(--line);border-radius:13px;padding:14px 15px 16px;background:#FBFDFD;margin-bottom:13px}
.oc:last-child{margin-bottom:0}
.oc-head{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.oc-head .n{width:27px;height:27px;border-radius:9px;flex:none;background:var(--c);color:#fff;
  display:grid;place-items:center;font-size:12.5px;font-weight:800}
.oc-head h4{font-size:15px;font-weight:700;color:var(--deep);
  font-family:'Noto Kufi Arabic','Tajawal',sans-serif}
.oc-none{padding:22px 6px;text-align:center;font-size:14px;color:var(--muted)}
 
.extra{display:flex;align-items:center;gap:14px;padding:15px 17px;border-radius:14px;margin-bottom:14px;
  text-decoration:none;background:linear-gradient(115deg,#EAF6F8,#EDF6F1);
  border:1.5px solid #CFE4E6;transition:.18s}
.extra:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--c)}
.extra .ico{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:var(--c);color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--c) 38%,transparent)}
.extra .t{flex:1;min-width:0}
.extra .t b{display:block;font-size:15.5px;font-weight:700;color:var(--deep);
  font-family:'Noto Kufi Arabic','Tajawal',sans-serif}
.extra .t i{display:block;font-style:normal;font-size:13px;color:var(--muted);line-height:1.6;margin-top:3px}
.extra .go{flex:none;padding:9px 17px;border-radius:10px;background:var(--c);color:#fff;
  font-size:13.5px;font-weight:700}
@media(max-width:600px){.extra{flex-wrap:wrap}.extra .t{flex-basis:100%;order:3}}

.empty{text-align:center;padding:52px 24px;color:var(--muted)}
.empty .big{width:76px;height:76px;border-radius:24px;background:#EEF4F3;display:grid;place-items:center;
  margin:0 auto 16px;color:var(--teal)}
.empty h3{font-size:17px;color:var(--deep);margin-bottom:7px}
.empty p{font-size:14px;max-width:46ch;margin:0 auto}

 
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:18px}
.tool{display:flex;align-items:center;gap:13px;padding:18px;border-radius:15px;text-decoration:none;
  border:1.5px solid var(--line);background:var(--card);box-shadow:var(--shadow);transition:.2s;text-align:right;width:100%}
.tool:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--c)}
.tool .ico{width:48px;height:48px;border-radius:15px;flex:none;display:grid;place-items:center;color:#fff;background:var(--c);
  box-shadow:0 6px 16px color-mix(in srgb,var(--c) 38%,transparent)}
.tool .t{flex:1;min-width:0}
.tool .t b{display:block;font-size:15px;font-weight:700;color:var(--deep);font-family:'Noto Kufi Arabic','Tajawal',sans-serif}
.tool .t i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.55}
.tool.on{border-color:var(--c);background:#FAFDFC}

.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:flex;align-items:center;gap:11px;font-size:13px}
.bar .bl{width:150px;flex:none;color:var(--deep);font-weight:600;text-align:right}
.bar .bt{flex:1;height:11px;border-radius:99px;background:#EEF3F5;overflow:hidden}
.bar .bt i{display:block;height:100%;border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.3,1)}
.bar .bv{width:74px;flex:none;text-align:left;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}

.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th,.tbl td{padding:9px 11px;border:1px solid var(--line);text-align:center}
.tbl th{background:#F2F7F8;color:var(--deep);font-weight:700}
.tbl td:first-child,.tbl th:first-child{text-align:right;font-weight:600}
.tbl .z{color:#B7C3C9}

.notice{border:1.5px solid #EEE4C7;background:#FBF7EA;border-radius:14px;padding:18px 20px}
.notice h4{font-size:15px;color:#7A6A34;margin-bottom:7px;font-family:'Noto Kufi Arabic','Tajawal',sans-serif}
.notice p{font-size:13.5px;color:#8A7A40;line-height:1.75}
.notice p + p{margin-top:9px}
@media(max-width:640px){.bar .bl{width:96px;font-size:12px}.bar .bv{width:58px}}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:13px;margin-bottom:18px}
.stat{background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.stat .k{font-size:12.5px;color:var(--muted);font-weight:600}
.stat .v{font-family:'Noto Kufi Arabic',sans-serif;font-size:25px;font-weight:800;color:var(--deep);line-height:1.3}

footer.credits{background:var(--deep);color:rgba(255,255,255,.9);padding:22px;margin-top:auto}
.credits-in{max-width:1560px;margin:0 auto;text-align:center}
.credits .org{font-family:'Noto Kufi Arabic','Tajawal',sans-serif;
  font-size:14px;font-weight:700;color:rgba(255,255,255,.92);line-height:1.6}
.credits .org span{display:block;font-family:'Tajawal',sans-serif;font-size:12.5px;font-weight:500;
  color:var(--gold);letter-spacing:.4px;margin-top:3px}

@media(max-width:1000px){
  .login-wrap{grid-template-columns:1fr}
  .login-brand{padding:22px 24px 24px;min-height:0}
  .mh-logo img{height:60px}
  .mh-text .l1{font-size:11.5px}.mh-text .l2{font-size:10.5px}.mh-text .l3{font-size:10px}
  .login-form{padding:30px 28px}
  .burger{display:block}
  .shell{flex-direction:column;padding:14px;gap:14px}
  aside{width:100%;position:static}
  aside.closed .aside-body,aside.closed .aside-foot{display:none}
}
@media(max-width:520px){
  .weeks{grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:10px}
  .week .n{font-size:27px}
  header.top h1{font-size:15px}
  .whoami{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  .page-aurora,.aurora,.sweep,#app::before,.week::after,header.top::after{display:none !important}
}

[hidden]{display:none!important}a[aria-disabled="true"]{cursor:default;opacity:.7}.tabs button,.note,.field label,.form-head p,.step label,.aside-foot,.week .lbl,.week .ready,.pill,.rcard .state{font-size:14px}.mh-text .l2,.mh-text .l3{font-size:14px;white-space:normal}.rcard p{font-size:14px}body{font-size:16px}#app{min-height:100vh;display:flex;flex-direction:column}@media(max-width:650px){.login-brand .brand-center h1{white-space:normal}.mh-text{max-width:55%}.masthead{gap:8px}.login-brand{padding:20px}.mh-logo img{max-width:100px;height:auto}.top{flex-wrap:wrap}header.top h1{font-size:16px}.whoami{font-size:14px}.rcard{min-width:0}.rcard h4{overflow-wrap:anywhere}.panel{padding:18px 14px}.shell{padding:12px;gap:12px}.weeks{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.home-gates{min-height:100vh;background:#f1f7f5;display:flex;flex-direction:column;color:#153f36}.home-heading{display:flex;gap:24px;align-items:center;padding:32px max(24px,calc((100vw - 1120px)/2));background:white;border-bottom:1px solid #d9e5df}.home-logo img{width:110px;height:86px;object-fit:contain}.home-heading p{font-size:16px;margin:0 0 6px}.home-heading h1{font-size:28px;margin:0 0 6px}.home-heading span{font-size:18px;color:#526e64}.home-main{max-width:1120px;width:100%;padding:48px 24px;margin:auto}.home-main h2{font-size:26px;margin:0 0 24px}.gate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.gate-card{font-family:inherit;display:flex;flex-direction:column;align-items:start;text-align:right;gap:16px;padding:30px 24px;border:1px solid #d4e2db;border-radius:20px;background:white;text-decoration:none;color:#153f36;cursor:pointer;box-shadow:0 8px 22px #123e3510;min-height:235px;transition:transform .2s,border-color .2s}.gate-card:hover{transform:translateY(-3px);border-color:#05a566}.gate-card:focus-visible,.dialog-close:focus-visible{outline:3px solid #d8b14c;outline-offset:4px}.gate-card strong{font-size:22px;line-height:1.7}.gate-card>span:last-child{font-size:16px;line-height:1.8;color:#527166}.gate-icon{display:grid;place-items:center;width:62px;height:62px;background:#e5f5eb;color:#007c4f;border-radius:16px}.gate-card:last-child .gate-icon{background:#edeaf8;color:#58418b}.home-footer{text-align:center;font-size:16px;color:#527166;padding:25px}#staffDialog{color:#153f36;background:white;width:min(480px,calc(100vw - 32px));border:1px solid #d4e2db;border-radius:20px;padding:26px;box-shadow:0 24px 80px #0004}#staffDialog::backdrop{background:#092b24a8}.staff-dialog-head{display:flex;justify-content:space-between;align-items:start;gap:16px}.staff-dialog-head h2{font-size:22px;margin:0}.dialog-close{border:0;background:#edf4f0;border-radius:8px;color:#153f36;font-size:28px;line-height:1;width:36px;height:36px;cursor:pointer;flex-shrink:0}#staffDialog p{font-size:16px;line-height:1.8;margin:16px 0 24px}#staffDialog .field input{width:100%;font-size:20px;padding:13px;border:1px solid #ccdcd3;border-radius:10px;background:#fbfdfc;letter-spacing:3px}#staffDialog .field label{display:block;margin-bottom:8px;font-size:16px}#staffDialog .btn-main{width:100%;font-size:17px;margin-top:20px}@media(max-width:740px){.home-heading{padding:22px 18px;gap:16px}.home-logo img{width:78px;height:65px}.home-heading h1{font-size:24px}.home-heading p{font-size:14px}.home-main{padding:28px 18px}.gate-grid{grid-template-columns:1fr;gap:16px}.gate-card{min-height:0;padding:22px;gap:10px}.gate-card strong{font-size:21px}.gate-icon{width:48px;height:48px}}

.designer-credit{margin-top:10px;font-size:16px;font-weight:700;color:#153f36;line-height:1.8}