/* هوية فريد — ثيم ن٣ عصري (Mobile-first): خطوط IBM Plex Arabic مستضافة ذاتيًا */
@font-face{font-family:"PlexAr";src:url("fonts/IBMPlexArabic-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"PlexAr";src:url("fonts/IBMPlexArabic-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"PlexAr";src:url("fonts/IBMPlexArabic-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"PlexAr";src:url("fonts/IBMPlexArabic-SemiBold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"PlexAr";src:url("fonts/IBMPlexArabic-ExtraLight.ttf") format("truetype");font-weight:200;font-display:swap}
:root{
  --bg:#F4F6F3; --card:#FFFFFF; --ink:#152A1E; --muted:#5F6F64;
  --teal:#2E8044; --teal-2:#1B6B34; --deep:#0D2617; --deep-2:#143722;
  --gold:#C9A24A; --gold-2:#E4C883;
  --line:#E3E8E1; --ring:rgba(46,128,68,.25);
  --r:18px; --r-s:13px;
  --shadow:0 6px 24px rgba(13,38,23,.08),0 1px 3px rgba(13,38,23,.06);
  --shadow-lg:0 16px 44px rgba(13,38,23,.14);
  --font:"PlexAr","IBM Plex Sans Arabic",Tahoma,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);line-height:1.8;background:var(--bg);min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:820px;margin:0 auto;padding:24px 18px 72px}
.brandbar{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.brandbar h1{font-size:20px;font-weight:600;margin:0}
.brandbar .sub{font-size:12.5px;color:var(--muted);margin-top:-2px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:28px}
@media(max-width:560px){.card{padding:22px 18px}.wrap{padding:18px 14px 60px}}
.display{font-size:30px;font-weight:600;line-height:1.45;margin:0 0 12px;letter-spacing:-.2px}
@media(max-width:560px){.display{font-size:24px}}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--teal-2);background:#E7F2E9;border-radius:999px;padding:5px 14px;margin-bottom:14px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
.lede{font-size:15.5px;color:#3B4C41;margin:0 0 20px}
.muted{color:var(--muted)}
.btn{appearance:none;border:0;border-radius:999px;padding:14px 30px;font-family:var(--font);font-size:15.5px;font-weight:600;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--teal) 0%,var(--teal-2) 100%);box-shadow:0 6px 18px rgba(46,128,68,.28);transition:.15s;min-height:48px}
.btn:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(46,128,68,.34)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.ghost{background:#fff;color:var(--teal-2);border:1.5px solid #CFE0D2;box-shadow:none}
.btn.ghost:hover{background:#F2F8F3}
.row{display:flex;align-items:center;gap:12px;margin-top:22px;flex-wrap:wrap}
.spacer{flex:1}
label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px}
input[type=text],input[type=email],input[type=password],input[type=tel]{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r-s);padding:13px 15px;font-family:var(--font);font-size:16px;background:#FAFBF9;color:var(--ink);min-height:50px}
input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px var(--ring);background:#fff}
.field{margin-bottom:16px}
.pwd-wrap{position:relative}
.pwd-wrap input{padding-inline-end:48px}
.pwd-eye{position:absolute;inset-inline-end:7px;top:50%;transform:translateY(-50%);border:none;background:none;cursor:pointer;padding:8px;color:var(--muted);border-radius:50%}
.pwd-eye:hover{color:var(--teal-2);background:#EFF5F0}
.note{font-size:13px;color:var(--muted);background:#F3F6F2;border:1px solid var(--line);border-radius:var(--r-s);padding:13px 16px;margin-top:18px}
.err{color:#A03355;background:#FBEFF3;border:1px solid #F0D3DD;border-radius:var(--r-s);padding:11px 15px;font-size:14px;margin-top:14px;display:none}
.ok-msg{color:#1B6B34;background:#E9F5EB;border:1px solid #CBE5D0;border-radius:var(--r-s);padding:11px 15px;font-size:14px;margin-top:14px;display:none}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:#3B4C41;margin:14px 0}
.consent input{margin-top:5px;accent-color:var(--teal);width:18px;height:18px}
.consent a{color:var(--teal-2);font-weight:600}
.tabs{display:flex;gap:6px;margin-bottom:22px;background:#EDF1EC;border-radius:999px;padding:5px}
.tab{flex:1;text-align:center;padding:11px;cursor:pointer;font-weight:600;font-size:14.5px;border-radius:999px;color:var(--muted);transition:.15s}
.tab[aria-selected=true]{background:#fff;color:var(--teal-2);box-shadow:0 2px 8px rgba(13,38,23,.10)}
.topnav{display:flex;align-items:center;gap:14px;font-size:13.5px;padding:11px 16px;background:rgba(255,255,255,.85);border-bottom:1px solid var(--line);backdrop-filter:blur(10px);position:sticky;top:0;z-index:60}
.topnav a{color:var(--teal-2);text-decoration:none;font-weight:600}
.topnav .who{color:var(--muted)}
.topnav .out{color:#A03355;cursor:pointer;background:none;border:none;font-family:var(--font);font-size:13.5px;font-weight:600}
table.list{width:100%;border-collapse:collapse;font-size:14px}
table.list th{color:var(--muted);font-weight:600;text-align:right;padding:9px 8px;border-bottom:1.5px solid var(--line);font-size:12.5px}
table.list td{padding:12px 8px;border-bottom:1px solid #EFF2EE;vertical-align:top}
.pill{display:inline-block;border-radius:999px;padding:3px 12px;font-size:12px;font-weight:600;background:#E7F2E9;color:#1B6B34;margin-inline-end:4px;white-space:nowrap}
.pill.g{background:#F8F0DC;color:#8a6414}
.pill.p{background:#FBEFF3;color:#A03355}
.attlink{color:var(--teal-2);font-weight:600;text-decoration:none}
.attlink:hover{text-decoration:underline}
.foot{text-align:center;font-size:12.5px;color:var(--muted);margin-top:34px}
.spin{display:inline-block;width:18px;height:18px;border:2.5px solid var(--line);border-top-color:var(--teal);border-radius:50%;animation:sp 1s linear infinite;vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}
.danger-zone{border:1px solid #F0D3DD;border-radius:var(--r-s);padding:16px 18px;margin-top:26px;background:#FDF8FA}
.danger-zone h3{margin:0 0 8px;font-size:15px;color:#A03355}
@media print{.topnav,.no-print{display:none !important}}