/* هوية أكاديمية الفتى الذكي — السجلّ الداخلي (لوحة + Cairo، بلا ملصقات ولا ظلال)
     المصدر: skills/clever-academy-design/assets/tokens.css */
  :root{
    --brand:#12CFCB;          /* فيروزي بنيوي: حدود وفواصل — لا يحمل نصًا أبدًا */
    --paper:#FCF6EE;          /* صفحة عاجية دافئة */
    --surface:#ECF1F1;        /* سطح البطاقات: نصف خطوة لونية بدل الظل */
    --surface-2:#E3EAEA;      /* رؤوس الجداول والتمرير */
    --ink:#000000;            /* أسود صريح بتفويض العلامة */
    --ink-2:#4D4640;
    --muted:#6E6862;          /* اشتقاق أفتح من on-surface-soft للبيانات الوصفية */
    --rule:#D0DAD9;           /* شعرة بانحياز فيروزي */
    --rule-strong:#B4C3C2;
    --accent:#00716A;         /* كل نص أو تعبئة فيروزية تحمل نصًا */
    --accent-ink:#FCF6EE;
    --accent-soft:#C9F5F5;
    --tertiary:#F5D31F;       /* الأندر: علامة الشهر الجاري وحدها */
    --paid:#2F7D2A;
    --paid-soft:#E6F7DE;
    --partial:#8A5406;
    --partial-soft:#FDF0DC;
    --unpaid:#94001B;
    --unpaid-soft:#FBE4E4;
    --r:14px;                 /* بطاقات المحتوى */
    --r-sm:6px;               /* أزرار وحقول */
    --f-display:'Cairo','Segoe UI',Tahoma,sans-serif;
    --f-body:'Cairo','Segoe UI',Tahoma,sans-serif;
    --f-num:'Cairo','Segoe UI',Tahoma,sans-serif;  /* خط واحد بأمر العلامة، حتى للأرقام */
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --brand:#37BAB7;
      --paper:#0C1615;
      --surface:#162221;
      --surface-2:#1D2B2A;
      --ink:#EAE7E4;
      --ink-2:#C3BDB7;
      --muted:#AAA39D;
      --rule:#2B3535;
      --rule-strong:#3C4948;
      --accent:#6FD8D5;
      --accent-ink:#0C1615;
      --accent-soft:#123230;
      --tertiary:#E7D171;
      --paid:#8FD47A;
      --paid-soft:#16301A;
      --partial:#E3AE6B;
      --partial-soft:#33260F;
      --unpaid:#F5928A;
      --unpaid-soft:#3A1A18;
    }
  }
  :root[data-theme="dark"]{
      --brand:#37BAB7;
      --paper:#0C1615;
      --surface:#162221;
      --surface-2:#1D2B2A;
      --ink:#EAE7E4;
      --ink-2:#C3BDB7;
      --muted:#AAA39D;
      --rule:#2B3535;
      --rule-strong:#3C4948;
      --accent:#6FD8D5;
      --accent-ink:#0C1615;
      --accent-soft:#123230;
      --tertiary:#E7D171;
      --paid:#8FD47A;
      --paid-soft:#16301A;
      --partial:#E3AE6B;
      --partial-soft:#33260F;
      --unpaid:#F5928A;
      --unpaid-soft:#3A1A18;
  }

  *,*::before,*::after{box-sizing:border-box}
  [hidden]{display:none!important}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:var(--f-body);font-size:15px;line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .app{max-width:1180px;margin:0 auto;padding:0 20px 72px}
  h1,h2,h3{font-family:var(--f-display);font-weight:800;text-wrap:balance;margin:0}
  .num{font-family:var(--f-num);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}
  button{font-family:inherit;font-size:inherit;color:inherit}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

  /* ---------- masthead ---------- */
  .masthead{
    display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 24px;
    padding:26px 0 18px;border-bottom:3px solid var(--brand);margin-bottom:0;
  }
  .brand{display:flex;align-items:center;gap:12px;min-width:0}
  .seal{
    width:42px;height:42px;flex:none;border:1.5px solid var(--accent);border-radius:3px;
    display:grid;place-items:center;color:var(--accent);
    font-family:var(--f-display);font-size:19px;line-height:1;
    background:var(--accent-soft);
  }
  .brand h1{font-size:23px}
  .brand .org{font-size:12.5px;color:var(--muted);letter-spacing:.04em}
  .mast-tools{display:flex;align-items:center;gap:8px;margin-inline-start:auto;flex-wrap:wrap}

  .field{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);padding:6px 10px}
  .field label{font-size:11.5px;color:var(--muted);letter-spacing:.05em}
  select,input[type="text"],input[type="number"],input[type="date"],textarea{
    font-family:inherit;font-size:14px;color:var(--ink);background:transparent;border:0;outline:none;min-width:0;
  }
  select{cursor:pointer}
  .btn{
    display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule-strong);background:var(--surface);
    padding:7px 13px;border-radius:var(--r-sm);cursor:pointer;font-size:14px;transition:background .14s,border-color .14s;
  }
  .btn:hover{background:var(--surface-2);border-color:var(--accent)}
  .btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
  .btn-primary:hover{background:var(--accent);filter:brightness(1.08)}
  .btn-ghost{border-color:transparent;background:transparent;color:var(--muted);padding:6px 9px}
  .btn-ghost:hover{background:var(--surface-2);color:var(--ink)}
  .btn-danger{color:var(--unpaid);border-color:var(--rule)}
  .btn-danger:hover{background:var(--unpaid-soft);border-color:var(--unpaid)}
  .btn:disabled{opacity:.45;cursor:not-allowed}

  /* ---------- notice ---------- */
  .notice{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    margin-top:16px;padding:11px 15px;border-radius:var(--r);
    background:var(--partial-soft);border:1px solid color-mix(in srgb,var(--partial) 35%,transparent);
    font-size:13.5px;color:var(--ink-2);
  }
  .notice b{color:var(--ink)}
  .notice .btn{padding:5px 11px;font-size:13px}
  .notice.info{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}

  /* ---------- month rail ---------- */
  .rail-wrap{margin-top:22px;overflow-x:auto;padding-bottom:4px}
  .rail{display:flex;gap:6px;min-width:max-content}
  .mchip{
    position:relative;border:1px solid var(--rule);background:var(--surface);border-radius:var(--r);
    padding:8px 13px 9px;cursor:pointer;text-align:center;min-width:84px;line-height:1.25;
    transition:border-color .14s,background .14s;
  }
  .mchip:hover{border-color:var(--rule-strong)}
  .mchip .mn{font-size:13.5px;font-weight:500;display:block}
  .mchip .mp{font-size:11px;color:var(--muted);font-family:var(--f-num);font-variant-numeric:tabular-nums}
  .mchip[aria-selected="true"]{background:var(--accent);border-color:var(--accent)}
  .mchip[aria-selected="true"] .mn,.mchip[aria-selected="true"] .mp{color:var(--accent-ink)}
  /* الأصفر أندر لون في النظام: موضع واحد لكل شاشة — الشهر الجاري */
  .mchip.now::after{
    content:"";position:absolute;inset-inline-start:7px;top:7px;
    width:7px;height:7px;border-radius:50%;background:var(--tertiary);
    border:1px solid rgba(0,0,0,.35);
  }
  .mchip .bar{position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--rule);border-radius:0 0 7px 7px;overflow:hidden}
  .mchip .bar i{display:block;height:100%;background:var(--paid);width:0}

  /* ---------- stats ---------- */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:22px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
  .stat{background:var(--surface);padding:14px 16px 15px}
  .stat .k{font-size:11.5px;color:var(--muted);letter-spacing:.05em;display:block;margin-bottom:4px}
  .stat .v{font-family:var(--f-num);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:block}
  .stat .u{font-family:var(--f-body);font-size:12px;color:var(--muted);margin-inline-start:4px}
  .stat.sum-paid .v{color:var(--paid)}
  .stat.sum-left .v{color:var(--unpaid)}
  .stat .sub{font-size:11.5px;color:var(--muted);margin-top:2px}

  /* ---------- toolbar ---------- */
  .toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px}
  .seg{display:flex;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
  .seg button{border:0;background:transparent;padding:7px 13px;cursor:pointer;font-size:13.5px;color:var(--muted);border-inline-start:1px solid var(--rule)}
  .seg button:first-child{border-inline-start:0}
  .seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
  .search{flex:1 1 200px;min-width:180px}
  .search input{width:100%}

  /* ---------- ledger ---------- */
  .sheet{margin-top:16px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
  .sheet-head{display:flex;align-items:baseline;gap:10px;padding:13px 16px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
  .sheet-head h2{font-size:16px}
  .sheet-head .hint{font-size:12.5px;color:var(--muted);margin-inline-start:auto}
  .tscroll{overflow-x:auto}
  table{border-collapse:collapse;width:100%;min-width:760px}
  th{
    text-align:start;font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.05em;
    padding:9px 14px;border-bottom:2px solid var(--brand);background:var(--surface-2);white-space:nowrap;
  }
  td{padding:9px 14px;border-bottom:1px solid var(--rule);vertical-align:middle}
  tbody tr:last-child td{border-bottom:0}
  tbody tr:hover td{background:var(--surface-2)}
  .who{display:flex;align-items:center;gap:10px}
  .av{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:600;background:var(--accent-soft);color:var(--accent)}
  .who .nm{font-weight:500;line-height:1.3}
  .who .rl{font-size:11.5px;color:var(--muted)}
  .amt{font-family:var(--f-num);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;text-align:end;white-space:nowrap}
  .pay-in{
    width:104px;text-align:end;font-family:var(--f-num);font-variant-numeric:tabular-nums;
    border:1px solid var(--rule);border-radius:6px;padding:5px 8px;background:var(--surface);direction:ltr;
  }
  .pay-in:focus{border-color:var(--accent);outline:none}
  .pill{
    display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
    padding:3px 10px;border-radius:999px;white-space:nowrap;
  }
  .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  .pill.paid{background:var(--paid-soft);color:var(--paid)}
  .pill.partial{background:var(--partial-soft);color:var(--partial)}
  .pill.unpaid{background:var(--unpaid-soft);color:var(--unpaid)}
  .rowacts{display:flex;gap:4px;justify-content:flex-end}
  .empty{padding:44px 20px;text-align:center;color:var(--muted)}
  .empty h3{font-size:16px;color:var(--ink);margin-bottom:6px}

  /* ---------- matrix ---------- */
  .matrix{min-width:900px}
  .matrix th.mcol{text-align:center;padding:9px 4px;font-size:11px}
  .matrix td.cell{padding:5px 3px;text-align:center}
  .cell button{
    width:100%;min-width:44px;border:1px solid var(--rule);background:var(--surface-2);
    border-radius:5px;padding:6px 2px;cursor:pointer;font-family:var(--f-num);font-size:11px;
    font-variant-numeric:tabular-nums;color:var(--muted);line-height:1.2;transition:transform .1s;
  }
  .cell button:hover{transform:translateY(-1px)}
  .cell button.s-paid{background:var(--paid-soft);border-color:color-mix(in srgb,var(--paid) 40%,transparent);color:var(--paid);font-weight:600}
  .cell button.s-partial{background:var(--partial-soft);border-color:color-mix(in srgb,var(--partial) 40%,transparent);color:var(--partial);font-weight:600}
  .cell button.s-unpaid{background:var(--unpaid-soft);border-color:color-mix(in srgb,var(--unpaid) 35%,transparent);color:var(--unpaid)}
  .cell button.s-future{opacity:.45}
  .legend{display:flex;gap:14px;flex-wrap:wrap;padding:11px 16px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--muted)}
  .legend span{display:inline-flex;align-items:center;gap:6px}
  .legend i{width:11px;height:11px;border-radius:3px;display:inline-block}

  /* ---------- dialog ---------- */
  dialog{
    border:1px solid var(--rule-strong);border-radius:12px;padding:0;background:var(--surface);color:var(--ink);
    width:min(460px,calc(100vw - 32px));
  }
  dialog::backdrop{background:rgba(12,22,21,.55);backdrop-filter:blur(2px)}
  .dlg-head{padding:16px 20px 12px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:10px}
  .dlg-head h3{font-size:17px}
  .dlg-body{padding:16px 20px;display:grid;gap:13px}
  .dlg-foot{padding:13px 20px;border-top:1px solid var(--rule);display:flex;gap:8px;justify-content:flex-end;background:var(--surface-2)}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
  .f{display:grid;gap:5px}
  .f > span{font-size:12px;color:var(--muted);letter-spacing:.03em}
  .f input,.f select,.f textarea{
    border:1px solid var(--rule);background:var(--surface);border-radius:6px;padding:8px 10px;width:100%;
  }
  .f input:focus,.f select:focus,.f textarea:focus{border-color:var(--accent)}
  .f textarea{resize:vertical;min-height:60px;font-size:14px}
  .f .num-in{font-family:var(--f-num);direction:ltr;text-align:start}

  /* ---------- toast ---------- */
  .toast{
    position:fixed;inset-inline-start:50%;transform:translateX(-50%);bottom:24px;z-index:50;
    background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;font-size:13.5px;
    opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

  .foot{margin-top:26px;font-size:12.5px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .dot{width:5px;height:5px;border-radius:50%;background:var(--rule-strong)}

  @media (max-width:760px){
    .stats{grid-template-columns:repeat(2,1fr)}
    .brand h1{font-size:20px}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
  @media print{
    body{background:#fff}
    .mast-tools,.toolbar,.rail-wrap,.notice,.rowacts,.foot,.toast{display:none!important}
    .sheet{box-shadow:none;border-color:#999}
    .pay-in{border:0;padding:0}
  }

  /* ---------- login gate (self-hosted build) ---------- */
  .gate{
    position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;
    background:var(--paper);
  }
  .gate-card{
    width:min(380px,100%);background:var(--surface);border:1px solid var(--rule);
    border-radius:12px;padding:28px 26px 24px;
    display:grid;gap:13px;justify-items:stretch;text-align:center;
  }
  .gate-card .seal{margin:0 auto}
  .gate-card h2{font-size:19px}
  .gate-sub{margin:-6px 0 4px;font-size:13.5px;color:var(--muted)}
  .gate-card .f{text-align:start}
  .gate-err{
    font-size:13px;color:var(--unpaid);background:var(--unpaid-soft);
    border-radius:6px;padding:8px 11px;text-align:start;
  }
  .gate-card .btn-primary{justify-content:center;padding:9px}
  .who-chip{
    font-size:12px;color:var(--muted);border:1px solid var(--rule);
    border-radius:999px;padding:3px 10px;white-space:nowrap;
  }
  .ro .pay-in,.ro [data-full],.ro [data-detail],.ro [data-edit],.ro [data-del],
  .ro #btnAdd,.ro #btnSettings{display:none}