/* ============================================================
   HIFZ JOURNEY — APPROVED DESIGN SYSTEM (coded rebuild)
   Layout, spacing, colour and composition follow the approved
   mockup set exactly. Nothing about the design language changed.
   ============================================================ */
:root{
  --green:#10a353; --green-dk:#087c43; --green-lt:#e9fbf1; --green-mid:#19b861;
  --deep:#053b28; --deep2:#062f23;
  --ink:#0d1b2a; --ink2:#07123e;
  --muted:#6b7a90; --muted2:#8794a6;
  --line:#e6ecea; --line2:#e1e8ec;
  --bg:#f7fafb;
  --card:#ffffff;
  --shadow-sm:0 2px 8px rgba(8,42,55,.05);
  --shadow:0 4px 16px rgba(16,50,38,.06);
  --shadow-lg:0 14px 40px rgba(11,47,37,.14);
  --blue:#2563eb; --blue-lt:#eef4ff;
  --amber:#b45309; --amber-lt:#fff4e0;
  --red:#dc2626; --red-lt:#ffecec;
  --purple:#6d4be8; --purple-lt:#f1ecff;
  --orange:#e07b12; --orange-lt:#fff3e6;
  --bar:60px;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#e9eeec;
  font-family:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--ink); overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* ---------- prototype control bar ---------- */
.controlbar{position:sticky;top:0;z-index:60;min-height:var(--bar);background:#102c27;color:#fff;
  display:flex;align-items:center;gap:10px;padding:8px 12px;box-shadow:0 4px 16px #0002;flex-wrap:wrap}
.brand{font-weight:800;white-space:nowrap;margin-right:2px}
.brand small{font-weight:500;opacity:.72;margin-left:6px}
.rolebtn,.ctlbtn,.cbsel{border:1px solid #ffffff26;background:#ffffff12;color:#fff;border-radius:10px;padding:9px 11px;cursor:pointer}
.rolebtn:hover,.ctlbtn:hover{background:#ffffff22}
.rolebtn.active{background:#1a9c60;border-color:#3dc47e}
.cbsel{min-width:300px;background:#1b3b35}
.cbsel option,.cbsel optgroup{color:#111;background:#fff}
.spacer{flex:1}
.codepill{font-size:12px;font-weight:800;padding:7px 10px;background:#dff7e8;color:#0a6237;border-radius:999px;white-space:nowrap}
.stage{min-height:calc(100vh - var(--bar));display:grid;place-items:start center;padding:20px 14px 60px}
.frame{position:relative;background:#fff;box-shadow:0 18px 60px #0b2f2533;border-radius:18px;overflow:hidden}
.frame.mobile{width:430px;max-width:100%}
.frame.desktop{width:min(100%,1280px)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(30px);opacity:0;z-index:99;
  background:#0d372d;color:#fff;padding:12px 17px;border-radius:12px;box-shadow:0 10px 30px #0003;
  transition:.22s;max-width:88vw;text-align:center;pointer-events:none;font-size:14px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.helpbtn{position:fixed;right:14px;bottom:14px;z-index:55;border:0;background:#0b8d4e;color:#fff;border-radius:999px;
  width:46px;height:46px;font-size:20px;box-shadow:0 8px 20px #0003;cursor:pointer}
.drawer{position:fixed;inset:0 0 0 auto;width:min(420px,92vw);background:#fff;z-index:70;box-shadow:-15px 0 50px #0004;
  transform:translateX(105%);transition:.25s;padding:22px;overflow:auto;line-height:1.55;font-size:14px}
.drawer.open{transform:none}
.drawer h2{margin:0 0 10px}
.drawer h3{margin:20px 0 6px;font-size:15px}
.drawer p,.drawer li{color:#4d5f5a}
.drawer code{background:#eef5f2;padding:2px 5px;border-radius:5px;font-size:12px}
.drawer .close{float:right;border:0;background:#eef3f1;border-radius:9px;padding:8px 10px;cursor:pointer}
body.focus .controlbar,body.focus .helpbtn{display:none}
body.focus .stage{padding:0;min-height:100vh}
body.focus .frame{border-radius:0;box-shadow:none}
body.focus .frame.mobile{width:min(100vw,430px)}
body.focus .frame.desktop{width:100vw;max-width:none}
body.taps [data-go],body.taps .tapable{outline:2px dashed #00a95c99;outline-offset:-2px;background-image:linear-gradient(#00a95c14,#00a95c14)}

/* ============================================================
   MOBILE SHELL — teacher + student (approved)
   ============================================================ */
.mob{position:relative;width:100%;min-height:764px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdfc 62%,#eaf7f0 100%);overflow:hidden}
.mob .statusbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 2px;
  font-size:14px;font-weight:700;color:#0b0d12;flex:0 0 auto}
.mob .statusbar .sb-right{display:flex;align-items:center;gap:5px}
.mob .statusbar svg{display:block}
.mob .mobbody{flex:1 1 auto;overflow-y:auto;padding:10px 18px 22px;position:relative;z-index:2;scrollbar-width:thin}
.mob .mobbody::-webkit-scrollbar{width:5px}
.mob .mobbody::-webkit-scrollbar-thumb{background:#cfdcd6;border-radius:9px}
.mob.nonav .mobbody{padding-bottom:22px}
.mosque{position:absolute;left:0;right:0;bottom:64px;height:150px;z-index:0;opacity:.5;pointer-events:none}
.mosque svg{width:100%;height:100%;display:block}

/* mobile page header (back pill + title + brand mark) */
.mhead{display:flex;align-items:flex-start;gap:12px;margin:4px 0 16px}
.backpill svg{width:19px;height:19px}
.backpill{flex:0 0 auto;width:40px;height:40px;border-radius:13px;border:0;background:#e9f3ee;color:#0a7a45;
  display:grid;place-items:center;cursor:pointer}
.backpill.wide{width:auto;padding:0 15px;gap:7px;display:flex;align-items:center;font-weight:700;font-size:14px;border-radius:999px}
.mhead .mtitle{flex:1 1 auto;min-width:0}
.mhead h1{margin:0;font-size:22px;line-height:1.18;letter-spacing:-.4px;color:#0b1e18;font-weight:800}
.mhead .sub{margin:4px 0 0;color:var(--muted);font-size:13px}
.mhead.center{align-items:center}
.mhead.center h1{text-align:center}
.mhead.wb h1{font-size:19px}
.mhead.wb .sub{font-size:12px}
.brandmark{flex:0 0 auto;width:96px;display:flex;align-items:center;gap:6px;color:#69727f;font-size:9px;line-height:1.25;font-weight:600}
.brandmark .arch{width:27px;height:33px;flex:0 0 auto}
.eyebrow{color:var(--muted);font-size:14px;margin:0 0 -2px}
.bigname{margin:0;font-size:30px;font-weight:800;letter-spacing:-.8px;color:#0c1a16;line-height:1.1}
.rule{height:1px;background:linear-gradient(90deg,#bfe2ce,#e8f1ec);margin:14px 0 16px;border:0}

/* bottom navigation (approved) */
.bnav{flex:0 0 auto;position:relative;z-index:3;display:grid;background:rgba(255,255,255,.985);
  border-top:1px solid #e7efeb;box-shadow:0 -6px 22px rgba(19,53,42,.06);padding:9px 6px 10px}
.bnav button{border:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;
  color:#7b8698;font-size:10.5px;font-weight:600;padding:2px 0;position:relative}
.bnav button svg{width:22px;height:22px}
.bnav button.on{color:var(--green)}
.bnav button.on:after{content:"";position:absolute;bottom:-7px;width:30px;height:3px;border-radius:999px;background:#078b46}

/* ---------- mobile cards & blocks ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.soft{background:linear-gradient(135deg,#eefbf4,#e6f7ee);border-radius:18px;padding:18px}
.mint{background:var(--green-lt);border-radius:16px;padding:14px}
.sect{margin:20px 0 12px;font-size:19px;font-weight:800;letter-spacing:-.3px;color:#0c1a16}
.sect.spread{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sect.spread span{font-size:13px;font-weight:600;color:var(--muted)}
.stack{display:grid;gap:12px}
.stack.sm{gap:9px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.muted{color:var(--muted)}
.tiny{font-size:12px}
.hidden{display:none !important}

/* status pills */
.pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:800;white-space:nowrap}
.pill svg{width:16px;height:16px;flex:0 0 auto}
.pill.ok{background:#dcf7e6;color:#0b7a45}
.pill.warn{background:#fef1cd;color:#a35d00}
.pill.bad{background:#ffe3e3;color:#c62828}
.pill.rep{background:#ffe7e7;color:#c62828}
.pill.none{background:#eef2f6;color:#64748b}
.pill.info{background:#e8efff;color:#2c52c9}
.pill.sm{font-size:11px;padding:6px 9px;gap:5px}
.pill.sm .dotico{width:18px;height:18px}
.pill.sm .dotico svg{width:11px;height:11px}
.dotico{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.dotico.ok{background:#0e9c56;color:#fff}
.dotico.warn{background:#eab308;color:#fff}
.dotico.bad{background:#e33b3b;color:#fff}
.dotico.none{background:#cbd5e1;color:#fff}
.dotico svg{width:58%;height:58%}

/* student row with the serial number outside the card */
.numrow{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center}
.numrow .serial{width:34px;height:34px;border-radius:50%;background:#e8f4ee;color:#0a6b41;
  display:grid;place-items:center;font-weight:800;font-size:14px;flex:0 0 auto}

/* juzz progress strip (30 blocks) */
.juzzbar{display:grid;grid-template-columns:repeat(30,1fr);gap:2.5px}
.juzzbar i{height:15px;border-radius:3px;background:#e4eae8;display:block}
.juzzbar i.on{background:#3fb968}
.juzzbar.big i{height:18px;border-radius:4px}

/* menu cards (dashboard tiles) */
.menugrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.menucard{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:14px 12px;box-shadow:var(--shadow);cursor:pointer;text-align:left;min-height:118px}
.menucard .mi{width:46px;height:46px;border-radius:50%;background:#e9fbf2;color:#0a9b50;display:grid;place-items:center;flex:0 0 auto}
.menucard .mi svg{width:23px;height:23px}
.menucard b{display:block;font-size:15px;line-height:1.2;color:#082b22;margin-bottom:4px;font-weight:800}
.menucard small{display:block;color:var(--muted);font-size:11.5px;line-height:1.3}
.menucard .chev{margin-left:auto;color:#9fadbd;flex:0 0 auto}
.menucard>span{min-width:0}
.menucard:hover{border-color:#bfe4cf}

/* list rows */
.row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:15px;
  padding:13px;box-shadow:var(--shadow);cursor:pointer;width:100%;text-align:left}
.row:hover{border-color:#bfe4cf}
.row .ri{width:44px;height:44px;border-radius:13px;background:#eafaf1;color:#0a8348;display:grid;place-items:center;flex:0 0 auto}
.row .ri svg{width:22px;height:22px}
.row .rc{flex:1 1 auto;min-width:0}
.row .rc b{display:block;font-size:15px;color:#0d1f1a}
.row .rc small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.row .chev{color:#9fadbd;flex:0 0 auto}

/* forms (mobile) */
.field{margin-bottom:13px}
.field label{display:block;font-size:12.5px;font-weight:800;color:#3f5349;margin-bottom:6px}
.inp{width:100%;border:1px solid #dbe7e1;border-radius:10px;background:#fff;padding:11px 12px;outline:0;font-size:14px}
.inp:focus{border-color:#37a772;box-shadow:0 0 0 3px rgba(27,165,92,.12)}
textarea.inp{min-height:84px;resize:vertical}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line2);
  border-radius:10px;padding:11px 16px;background:#fff;cursor:pointer;font-weight:800;font-size:14px}
.btn:hover{filter:brightness(.98)}
.btn.primary{background:linear-gradient(180deg,#19b861,#0a9a4e);border-color:transparent;color:#fff}
.btn.dark{background:#0a8f4a;border-color:transparent;color:#fff}
.btn.danger{background:#ef3f3f;border-color:transparent;color:#fff}
.btn.soft{background:#dff5e8;border-color:transparent;color:#0a7a45}
.btn.full{width:100%}
.btn.lg{padding:15px 18px;font-size:16px;border-radius:12px}
.btn svg{width:18px;height:18px}
.choice{border:1.6px solid #d5e0dc;border-radius:11px;padding:12px 8px;background:#fff;cursor:pointer;
  font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center}
.choice.on.green{border-color:#1aa85f;background:#edfaf2;color:#087840}
.choice.on.amber{border-color:#e39a1c;background:#fff8ea;color:#a35d00}
.choice.on.red{border-color:#ef6a6a;background:#fff1f1;color:#c0392b}
.choice .mark{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;flex:0 0 auto;opacity:.55}
.choice.on .mark{opacity:1;border:0;color:#fff}
.choice.on.green .mark{background:#0e9c56}
.choice.on.amber .mark{background:#e39a1c}
.choice.on.red .mark{background:#e33b3b}
.choice .mark svg{width:12px;height:12px}
.switch{width:52px;height:30px;border-radius:999px;background:#cfd8dd;position:relative;cursor:pointer;border:0;flex:0 0 auto;transition:.18s}
.switch:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 3px #0003}
.switch.on{background:#14a85c}
.switch.on:after{left:25px}
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;margin-bottom:14px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{white-space:nowrap;border:1px solid #dfe8e4;background:#fff;color:#64748b;border-radius:10px;
  padding:9px 13px;font-size:13px;font-weight:700;cursor:pointer}
.tabs button.on{background:var(--green);border-color:var(--green);color:#fff}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.chips button{border:1px solid #dfe8e4;background:#fff;color:#51606f;border-radius:999px;padding:7px 13px;
  font-size:12.5px;font-weight:700;cursor:pointer}
.chips button.on{background:var(--green);border-color:var(--green);color:#fff}
.avatar{border-radius:50%;display:grid;place-items:center;font-weight:800;flex:0 0 auto;
  background:#d9ece2;color:#0a6b41;letter-spacing:.3px}
.progbar{height:9px;border-radius:999px;background:#e3e9ea;overflow:hidden}
.progbar i{display:block;height:100%;border-radius:inherit;background:var(--green)}
.empty{border:1px dashed #cdddd5;border-radius:14px;padding:26px 16px;text-align:center;color:#7d8c85;background:#fafcfb;font-size:13px}

/* ============================================================
   ADMIN DESKTOP SHELL (approved)
   ============================================================ */
.adm{display:flex;min-height:825px;background:#fbfcfd;font-size:14px}
.side{width:216px;flex:0 0 216px;background:linear-gradient(180deg,#132534,#0d1b27);color:#e9f1f5;
  padding:20px 12px;display:flex;flex-direction:column}
.side .sbrand{display:flex;align-items:center;gap:10px;padding:2px 8px 22px}
.side .sbrand .bk{width:32px;height:26px;color:#20c46f;flex:0 0 auto}
.side .sbrand b{display:block;font-size:16px;letter-spacing:-.3px}
.side .sbrand small{display:block;font-size:10.5px;font-style:italic;color:#93a6b3}
.snav{display:grid;gap:3px}
.snav button{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;border:0;background:transparent;
  color:#e2ecf1;cursor:pointer;font-size:13.5px;text-align:left;width:100%}
.snav button svg{width:18px;height:18px;flex:0 0 auto;opacity:.9}
.snav button:hover{background:#ffffff12}
.snav button.on{background:linear-gradient(90deg,#0d6d51,#145347);color:#fff;font-weight:700}
.sfoot{margin-top:auto;padding-top:16px}
.sfoot button{display:flex;align-items:center;gap:11px;width:100%;border:1px solid #36505f;border-radius:8px;
  color:#fff;padding:12px 16px;font-weight:700;background:transparent;cursor:pointer;font-size:13px}
.sfoot button:hover{background:#ffffff10}
.sfoot button svg{width:16px;height:16px;flex:0 0 auto}
.admain{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.atop{height:66px;flex:0 0 auto;background:#fff;border-bottom:1px solid #eef2f4;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:0 24px}
.asearch{display:flex;align-items:center;gap:8px;border:1px solid #e4ebef;border-radius:8px;padding:8px 12px;
  min-width:300px;color:#9aa8b4}
.asearch input{border:0;outline:0;background:transparent;width:100%;font-size:13px}
.atop .right{display:flex;align-items:center;gap:16px;margin-left:auto}
.bell{width:38px;height:38px;border:1px solid #e9eef2;border-radius:50%;display:grid;place-items:center;background:#fff;cursor:pointer}
.bell svg,.asearch svg{width:17px;height:17px;flex:0 0 auto}
.uchip{display:flex;align-items:center;gap:10px}
.uchip .avatar{width:38px;height:38px;background:#e6e0ff;color:#3d2fa5;font-size:13px}
.uchip b{display:block;font-size:13px}
.uchip small{display:block;font-size:11.5px;color:var(--muted)}
.acontent{flex:1 1 auto;overflow-y:auto;padding:22px 26px 34px}
.acontent::-webkit-scrollbar{width:8px}
.acontent::-webkit-scrollbar-thumb{background:#d6e0e5;border-radius:9px}
.phead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px}
.phead h1{margin:0;font-size:26px;letter-spacing:-.6px;color:var(--ink2)}
.phead p{margin:4px 0 0;color:#4a5b76;font-size:13.5px}
.acard{background:#fff;border:1px solid #e6eaee;border-radius:12px;box-shadow:var(--shadow-sm);padding:16px}
.ag{display:grid;gap:16px}
.ag2{grid-template-columns:1fr 1fr}
.ag3{grid-template-columns:repeat(3,1fr)}
.ag4{grid-template-columns:repeat(4,1fr)}
.astat{display:flex;align-items:center;gap:13px;border-radius:12px;border:1px solid #e9edf1;padding:15px;min-height:96px}
.astat .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}
.astat .ic svg{width:24px;height:24px}
.astat b{display:block;font-size:26px;color:var(--ink2);line-height:1.1}
.astat span{font-size:13px;color:#1f2d49}
.astat em{display:block;font-style:normal;font-size:11.5px;color:#4b8f66;margin-top:3px}
.ic.blue{background:#e7f0ff;color:#2563eb}.ic.green{background:#e6f9ef;color:#0f9d52}
.ic.orange{background:#fff0e4;color:#e07b12}.ic.purple{background:#efe9ff;color:#6d4be8}
.abtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #e0e7ec;background:#fff;
  border-radius:7px;padding:9px 14px;font-weight:700;font-size:13px;cursor:pointer;min-height:38px}
.abtn:hover{filter:brightness(.98)}
.abtn.primary{background:var(--green);border-color:transparent;color:#fff}
.abtn.ghost{background:#f4f7f9}
.abtn.danger{background:#fff;border-color:#f3c4c4;color:#c62828}
.abtn svg{width:16px;height:16px}
.atable{width:100%;border-collapse:collapse}
.atable th{background:#f8fafb;text-align:left;color:#41516e;font-size:11.5px;font-weight:800;padding:11px 13px;border-bottom:1px solid #e9eef1}
.atable td{padding:11px 13px;border-bottom:1px solid #f0f4f6;font-size:12.5px;vertical-align:middle}
.atable tr:last-child td{border-bottom:0}
.atable tbody tr:hover{background:#fafcfd}
.twrap{border:1px solid #e6eaee;border-radius:10px;overflow:auto;background:#fff}
.abadge{display:inline-flex;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:800;white-space:nowrap}
.abadge.ok{background:#daf7e6;color:#087943}
.abadge.bad{background:#ffe1e1;color:#b42318}
.abadge.warn{background:#fff0cf;color:#a55a00}
.abadge.grey{background:#eef2f6;color:#60708a}
.abadge.purple{background:#efe7ff;color:#5b34c7}
.abadge.blue{background:#e7f0ff;color:#2258c9}
.ainp{width:100%;border:1px solid #dce5ea;border-radius:7px;padding:10px 12px;min-height:40px;outline:0;background:#fff;font-size:13px}
.ainp:focus{border-color:#37a772;box-shadow:0 0 0 3px rgba(27,165,92,.10)}
textarea.ainp{min-height:74px;resize:vertical}
.alabel{display:block;font-size:12px;font-weight:800;color:#233152;margin-bottom:6px}
.alabel .req{color:#dc2626}
.ahelp{font-size:11px;color:var(--muted);margin-top:5px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.frow{margin-bottom:15px}
.adivider{height:1px;background:#eef2f4;margin:18px 0}
.atabs{display:flex;gap:4px;border-bottom:1px solid #e9eef1;margin-bottom:18px;overflow-x:auto}
.atabs button{border:0;background:transparent;padding:11px 15px;font-size:13.5px;color:#68748a;cursor:pointer;
  border-bottom:3px solid transparent;white-space:nowrap;font-weight:600}
.atabs button.on{color:#07984d;border-color:#07984d;font-weight:800}
.upbox{border:1.5px dashed #d5dfe6;border-radius:10px;padding:22px;text-align:center;color:#6f7f92;background:#fcfdfe;cursor:pointer}
.upbox svg{width:28px;height:28px;color:#8a9aac}
.upbox b{display:block;margin-top:8px;font-size:13px;color:#33435c}
.upbox small{font-size:11px}
.orgcard{border:1px solid #e6eaee;border-radius:11px;background:#fff;padding:15px;box-shadow:var(--shadow-sm)}
.orgcard .oh{display:flex;gap:12px;align-items:flex-start}
.orgcard .ol{width:46px;height:46px;border-radius:50%;background:#eaf8ef;color:#0b9850;display:grid;place-items:center;flex:0 0 auto}
.ol svg{width:22px;height:22px}
.orgcard h3{margin:0;font-size:15px;color:var(--ink2)}
.orgcard .om{display:grid;grid-template-columns:repeat(3,1fr);margin:14px 0 12px;text-align:center}
.orgcard .om div{border-right:1px solid #eef2f4}
.orgcard .om div:last-child{border:0}
.orgcard .om b{display:block;font-size:17px}
.orgcard .om small{font-size:11px;color:var(--muted)}
.orgcard .of{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px 0;font-size:12.5px;color:var(--muted)}
.pager .pg{display:flex;gap:5px}
.pager .pg button{width:30px;height:30px;border:1px solid #e3e9ee;background:#fff;border-radius:7px;cursor:pointer;font-size:12px}
.pager .pg button.on{background:var(--green);border-color:var(--green);color:#fff;font-weight:800}
.actmenu{width:28px;height:28px;border:0;background:transparent;cursor:pointer;color:#7b8a9c;border-radius:6px}
.actmenu:hover{background:#f0f4f6}
.info{display:flex;gap:10px;background:#eef4ff;border-radius:9px;padding:12px;color:#2b4372;font-size:12px;line-height:1.45}
.info svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px}
.upbox svg{width:28px;height:28px}
.snav button svg{width:18px;height:18px}
.info.green{background:#e9fbf1;color:#0a6b41}
.kv{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #f0f4f6;font-size:13px}
.kv:last-child{border:0}
.kv span{color:var(--muted)}
.kv b{font-weight:600;color:#1a2b45;text-align:right}
.chart{display:flex;align-items:flex-end;gap:10px;height:180px;padding-top:8px}
.chart .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.chart .b i{width:100%;max-width:34px;background:#3cb45f;border-radius:3px 3px 0 0;display:block}
.chart .b span{font-size:11px;color:var(--muted)}
.chev svg{width:18px;height:18px}
.actmenu svg{width:17px;height:17px}
.donutwrap{display:flex;align-items:center;gap:20px}
.donut{width:150px;height:150px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;position:relative}
.donut:after{content:"";position:absolute;width:98px;height:98px;background:#fff;border-radius:50%}
.donut div{position:relative;z-index:2;text-align:center}
.donut b{display:block;font-size:24px;color:var(--ink2)}
.donut small{color:var(--muted);font-size:12px}
.legend{display:grid;gap:12px;flex:1}
.legend div{display:flex;align-items:center;gap:9px;font-size:13px}
.legend i{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.legend b{margin-left:auto}
.actlist{display:grid}
.actrow{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid #f0f3f5}
.actrow:last-child{border:0}
.actrow .ai{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.actrow .ai svg{width:17px;height:17px}
.actrow b{display:block;font-size:13px}
.actrow small{display:block;font-size:11.5px;color:var(--muted)}
.actrow time{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
.qa{display:grid;gap:9px}
.qa button{display:flex;align-items:center;gap:11px;border:1px solid #e3e9ee;background:#fff;border-radius:8px;
  padding:13px 14px;cursor:pointer;font-weight:700;font-size:13.5px;text-align:left}
.qa button svg{width:16px;height:16px;flex:0 0 auto}
.qa button .arr{margin-left:auto;color:#93a3b5;display:flex}
.qa button.primary{background:var(--green);border-color:transparent;color:#fff}
.qa button.primary .arr{color:#fff}
.qa button:hover{filter:brightness(.985)}

/* PIN entry */
.pinblock{margin:2px 0 18px}
.pinblock label{display:block;text-align:center;font-size:12.5px;font-weight:800;color:#3f5349;margin-bottom:12px}
.pindots{display:flex;justify-content:center;gap:14px;margin-bottom:18px}
.pindots span{width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid #cfdfd7;transition:.14s}
.pindots span.on{background:var(--green);border-color:var(--green);transform:scale(1.08)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.keypad button{border:1px solid #e0eae5;background:#fff;border-radius:13px;padding:13px 0;font-size:20px;
  font-weight:700;color:#0d2b21;cursor:pointer;display:flex;align-items:center;justify-content:center}
.keypad button:hover{background:#f2faf6;border-color:#bfe4cf}
.keypad button:active{background:#e6f7ee}
.keypad button.ghost{font-size:13px;font-weight:800;color:#6b7a90;background:#f6f9f7}
.keypad button.ghost svg{width:19px;height:19px}
.btn.off{opacity:.5}

/* auth screens */
.auth{min-height:764px;display:grid;place-items:center;padding:26px 20px;
  background:linear-gradient(180deg,#f2fcf7,#e9f6f0)}
.authcard{width:100%;max-width:370px;background:#fff;border:1px solid #e3ece8;border-radius:22px;
  box-shadow:0 16px 42px rgba(10,60,40,.10);padding:26px 22px}
.authcard .logo{width:62px;height:62px;border-radius:18px;background:linear-gradient(135deg,#19b861,#077f44);
  display:grid;place-items:center;color:#fff;margin:0 auto 14px}
.authcard h1{margin:0;text-align:center;font-size:23px;letter-spacing:-.4px}
.authcard .sub{text-align:center;color:var(--muted);font-size:13px;margin:6px 0 20px}
.authfoot{text-align:center;font-size:13px;color:var(--muted);margin-top:16px}
.authfoot button,button.authfoot{border:0;background:transparent;color:var(--green-dk);font-weight:800;cursor:pointer;padding:0;font-size:13px}
.rolepick{display:grid;gap:9px;margin-bottom:16px}
.rolepick button{display:flex;align-items:center;gap:11px;border:1.6px solid #dde7e2;background:#fff;border-radius:12px;
  padding:12px;cursor:pointer;text-align:left;font-weight:700;font-size:13.5px}
.rolepick button.on{border-color:#1aa85f;background:#eefaf3;color:#08703f}
.rolepick button .ri{width:36px;height:36px;border-radius:10px;background:#e9fbf2;color:#0a9b50;display:grid;place-items:center;flex:0 0 auto}
.rolepick button small{display:block;font-weight:500;color:var(--muted);font-size:11.5px;margin-top:2px}

@media(max-width:900px){
  .adm{min-height:0}
  .side{display:none}
  .asearch{display:none}
  .ag2,.ag3,.ag4{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .acontent{padding:16px}
}
@media(max-width:520px){
  .cbsel{min-width:0;max-width:56vw;flex:1}
  .codepill{display:none}
  .brand small{display:none}
  .stage{padding:0 0 30px}
  .frame{border-radius:0;box-shadow:none;width:100% !important}
  .menugrid{grid-template-columns:1fr 1fr}
}

/* ============================================================
   BOTTOM SHEETS

   Additive only. Nothing above this line in app.css is touched, and
   every new class is prefixed .sh- so it cannot collide with the
   approved sheet (.sfoot already exists on the admin sidebar).

   Every value below comes from the approved system: --green,
   --green-lt, --line, --muted, --radius, and the existing .btn,
   .choice, .inp, .field, .kv, .dotico, .info and .g2 classes are
   reused unchanged. The panel itself is the approved .card surface
   and .mhead header pairing, slid up from the bottom of the frame.
   ============================================================ */

.scrim{position:absolute;inset:0;z-index:40;background:rgba(7,32,24,.42);
  opacity:0;pointer-events:none;transition:.2s}
.scrim.open{opacity:1;pointer-events:auto}

.sheet{position:absolute;left:0;right:0;bottom:0;z-index:41;background:#fff;
  border-radius:22px 22px 0 0;box-shadow:0 -16px 44px rgba(11,47,37,.22);
  transform:translateY(102%);transition:.24s cubic-bezier(.22,.8,.3,1);
  max-height:92%;display:flex;flex-direction:column}
.sheet.open{transform:none}
.sh-grab{width:42px;height:4px;border-radius:999px;background:#d7e3dd;margin:9px auto 0;flex:0 0 auto}
.sh-head{display:flex;align-items:flex-start;gap:11px;padding:13px 18px 10px;flex:0 0 auto}
.sh-ico{width:40px;height:40px;border-radius:13px;background:#eafaf1;color:#0a8348;
  display:grid;place-items:center;flex:0 0 auto}
.sh-ico svg{width:21px;height:21px}
.sh-head h2{margin:0;font-size:19px;line-height:1.2;font-weight:800;letter-spacing:-.3px;color:#0b1e18}
.sh-head p{margin:3px 0 0;font-size:12.5px;color:var(--muted);line-height:1.35}
.sh-x{width:34px;height:34px;border-radius:11px;border:0;background:#eef3f1;color:#4d5f5a;
  display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.sh-x svg{width:16px;height:16px}
.sh-body{padding:4px 18px 16px;overflow-y:auto;flex:1 1 auto;scrollbar-width:thin}
.sh-body::-webkit-scrollbar{width:5px}
.sh-body::-webkit-scrollbar-thumb{background:#cfdcd6;border-radius:9px}
.sh-foot{padding:12px 18px 18px;border-top:1px solid var(--line);background:#fff;
  display:flex;gap:9px;flex:0 0 auto}

/* number stepper — yearly juzz count */
.stepper{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #dbe7e1;
  border-radius:14px;padding:8px}
.stepper button{width:46px;height:46px;border-radius:12px;border:0;background:#eafaf1;color:#0a8348;
  cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.stepper button svg{width:20px;height:20px}
.stepper button:disabled{opacity:.38;cursor:default}
.stepper .val{flex:1 1 auto;text-align:center;min-width:0}
.stepper .val b{display:block;font-size:32px;font-weight:800;letter-spacing:-1.2px;color:#0b2a1f;line-height:1.02}
.stepper .val small{display:block;font-size:12px;color:var(--muted);margin-top:3px}

/* derived read-out — same mint as .mint, laid out with the approved .kv rows */
.derived{background:var(--green-lt);border-radius:16px;padding:4px 14px}
.derived .kv{border-bottom:1px solid #d5efe0}
.derived .kv:last-child{border:0}
.derived .kv b{color:#0a6b41}

/* tickable library row — same 1.6px border and green "on" state as .choice */
.ckrow{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;cursor:pointer;
  background:#fff;border:1.6px solid #d5e0dc;border-radius:13px;padding:11px 12px}
.ckrow:hover{border-color:#bfe4cf}
.ckrow .bx{width:22px;height:22px;border-radius:7px;border:2px solid #cdd9d3;flex:0 0 auto;margin-top:1px;
  display:grid;place-items:center;color:#fff}
.ckrow .bx svg{width:13px;height:13px;opacity:0}
.ckrow.on{border-color:#1aa85f;background:#f2fbf6}
.ckrow.on .bx{background:#0e9c56;border-color:#0e9c56}
.ckrow.on .bx svg{opacity:1}
.ckrow .t{flex:1 1 auto;min-width:0;font-size:13.5px;line-height:1.35;color:#22403a}
.ckrow .own{flex:0 0 auto;font-size:10.5px;font-weight:800;color:#0a7a45;background:#e3f6ec;
  border-radius:999px;padding:3px 8px;margin-top:1px}

/* editable list rows — commitment */
.cmlist{display:grid;gap:9px}
.cmrow{display:flex;gap:9px;align-items:flex-start}
.cmrow .n{width:26px;height:26px;margin-top:9px;font-size:12px;font-weight:800}
.cmrow textarea.inp{min-height:62px;flex:1 1 auto}
.cmrow .del{width:38px;height:38px;margin-top:3px;border-radius:11px;border:1px solid #f3cccc;
  background:#fff;color:#c62828;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.cmrow .del svg{width:16px;height:16px}