/* =========================================================
   رابط البيانات | Rabit Data — التصميم
   ========================================================= */
/* الخطوط محفوظة داخل الموقع (بدون Google Fonts): أسرع وما فيش تتبّع للزوار */
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/readex-pro-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/readex-pro-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/readex-pro-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/readex-pro-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/readex-pro-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/readex-pro-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; 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+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; 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+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; 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+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; 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+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; 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+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; 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+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }

:root {
  --navy: #10264F;
  --navy-2: #1B3A73;
  --blue: #1F5FD6;
  --blue-2: #1A4FB5;
  --mint: #2BC59A;
  --mint-soft: #E2F6EF;
  --green-text: #0B7F63;
  --bg: #F6F8FA;
  --card: #FFFFFF;
  --border: #E3E8EE;
  --border-strong: #C9D3DD;
  --text: #10264F;
  --muted: #4A5D70;
  --muted-2: #5A6B7D;
  --red-bg: #FDE8E8; --red-fg: #9B1C1C; --red-dot: #D93636;
  --orange-bg: #FEF0DC; --orange-fg: #8A4B08; --orange-dot: #E8890C;
  --green-bg: #DFF5EC; --green-fg: #0B5E48; --green-dot: #1FAE84;
  --radius: 16px;
  --font-body: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-head: "Readex Pro", "IBM Plex Sans Arabic", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.7; font-size: 16px; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.35; margin: 0; }
p { margin: 0; }
a { color: var(--green-text); }
a:hover { color: #096650; }
a, button, summary, select, input, label { transition: background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease; }
:focus-visible { outline: 3px solid #7FA6F0; outline-offset: 3px; border-radius: 8px; }
img, svg { flex: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.hidden, [hidden] { display: none !important; }
.num { text-align: center; font-variant-numeric: tabular-nums; }
.skip { position: absolute; inset-inline-start: -999px; top: 8px; background: var(--card); padding: 8px 14px; z-index: 10; }
.skip:focus { inset-inline-start: 8px; }

/* ---------- أزرار ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 12px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.btn-lg { min-height: 50px; padding: 12px 28px; font-size: 17px; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-2); color: #fff; }
.btn-mint { background: var(--mint); color: var(--navy); font-weight: 700; }
.btn-mint:hover { background: #22B58B; color: var(--navy); }
.btn-outline { background: var(--card); color: var(--navy); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--navy); color: var(--navy); }
.btn-ghost-light { color: #fff; border-color: #4A6A8A; background: transparent; }
.btn-ghost-light:hover { background: var(--navy-2); color: #fff; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ---------- عناصر عامة ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; }
.pill-red { background: var(--red-bg); color: var(--red-fg); } .pill-red .dot { background: var(--red-dot); }
.pill-orange { background: var(--orange-bg); color: var(--orange-fg); } .pill-orange .dot { background: var(--orange-dot); }
.pill-green { background: var(--green-bg); color: var(--green-fg); } .pill-green .dot { background: var(--green-dot); }
.pill-mint { background: var(--mint-soft); color: var(--green-fg); }
.pill-gray { background: #EEF3F8; color: #33475B; } .pill-gray .dot { background: #8A9AAB; }
.icon-box { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.alert { padding: 14px 16px; border-radius: 12px; display: flex; gap: 10px; align-items: flex-start; }
.alert-warn { background: var(--orange-bg); color: var(--orange-fg); }
.alert-info { background: var(--mint-soft); color: #22413A; }
.alert-error { background: var(--red-bg); color: var(--red-fg); }

/* ---------- نماذج ---------- */
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.input, .select { min-height: 44px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 10px; font: inherit; font-size: 15px; font-weight: 400; background: var(--card); color: var(--text); width: 100%; }
.input:focus, .select:focus { border-color: var(--blue); }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 400; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--green-text); }
fieldset { border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; margin: 0; }
legend { padding: 0 8px; font-weight: 600; }

/* ---------- جداول ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th { background: #F3F6F9; color: #44566A; font-weight: 600; padding: 11px 12px; text-align: start; white-space: nowrap; }
table.data td { padding: 11px 12px; border-top: 1px solid var(--border); vertical-align: top; }
table.data th.num, table.data td.num { text-align: center; }

/* ---------- الهيدر العام ---------- */
.site-header { background: var(--card); border-bottom: 1px solid var(--border); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand-name { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name b { font-family: var(--font-head); font-size: 20px; }
.brand-name small { font-size: 12px; color: var(--muted-2); letter-spacing: .5px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 24px; }
.nav-links a { color: var(--text); text-decoration: none; font-size: 15px; }
.nav-actions { display: flex; gap: 10px; }

/* ---------- الصفحة الرئيسية ---------- */
.hero { background: var(--navy); color: #fff; }
.hero-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding-top: 72px; padding-bottom: 80px; }
.hero-copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hero h1 { font-size: clamp(32px, 4.6vw, 54px); }
.hero-lead { font-size: 19px; color: #D3DEE9; max-width: 560px; }
.badge-dark { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--navy-2); color: #A8F0D6; font-size: 14px; }
.hero-preview { flex: 1 1 460px; min-width: 0; }
.preview-card { background: var(--card); color: var(--text); border-radius: 18px; padding: 20px; box-shadow: 0 12px 32px rgba(0,0,0,.22); }
.file-chip { flex: 1 1 0; min-width: 0; padding: 12px; border-radius: 12px; background: #EEF3F8; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section { padding: 80px 0 32px; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.section-head h2 { font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 12px; }
.section-head p { font-size: 18px; color: var(--muted); }
.grid-cards { display: flex; flex-wrap: wrap; gap: 24px; }
.grid-cards > * { flex: 1 1 300px; min-width: 0; }
.feature { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 18px; }
.feature ul, .plan ul { margin: 0; padding: 0 18px 0 0; display: flex; flex-direction: column; gap: 6px; color: #33475B; }
.steps { display: flex; flex-wrap: wrap; gap: 24px; }
.step { flex: 1 1 260px; display: flex; gap: 16px; align-items: flex-start; }
.step-num { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 20px; }
.privacy-band { background: var(--mint-soft); border-radius: 22px; padding: 44px 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.plan { display: flex; flex-direction: column; gap: 16px; padding: 30px; border-radius: 18px; }
.plan-price { font-family: var(--font-head); font-size: 40px; font-weight: 700; }
.plan-price small { font-size: 16px; font-weight: 500; color: var(--muted-2); }
.plan ul { flex-grow: 1; gap: 8px; }
.plan-featured { background: var(--navy); color: #fff; border-color: var(--navy); }
.plan-featured ul { color: #D3DEE9; }
.plan-featured .plan-price small { color: #B9C8D8; }
details.faq { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 22px; }
details.faq summary { cursor: pointer; font-weight: 600; font-size: 17px; }
details.faq p { margin-top: 12px; color: var(--muted); }
.cta-band { background: var(--navy); color: #fff; border-radius: 22px; padding: 56px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.site-footer { background: var(--card); border-top: 1px solid var(--border); }
.site-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 28px; padding-bottom: 28px; font-size: 14px; color: var(--muted-2); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer a { color: #44566A; }

/* ---------- صفحة الدخول والدفع ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.auth-card { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 18px; }
.tabs { display: flex; background: #EEF3F8; border-radius: 12px; padding: 4px; gap: 4px; }
.tabs button { flex: 1; min-height: 42px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--card); color: var(--navy); box-shadow: 0 1px 3px rgba(16,38,79,.12); }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted-2); font-size: 14px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------- التطبيق ---------- */
.app { display: flex; flex-wrap: wrap; min-height: 100vh; }
.sidebar { flex: 1 1 240px; max-width: 280px; background: var(--navy); color: #fff; padding: 24px 16px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar .brand { color: #fff; padding: 0 8px; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav a, .side-nav button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: #D3DEE9; text-decoration: none; background: transparent; border: 0; font: inherit; font-size: 15px; cursor: pointer; text-align: start; width: 100%; }
.side-nav a:hover, .side-nav button:hover { background: var(--navy-2); color: #fff; }
.side-nav a[aria-current="page"] { background: var(--navy-2); color: #fff; font-weight: 600; box-shadow: inset -3px 0 0 var(--mint); }
.side-nav a[aria-current="page"] svg { stroke: var(--mint); }
.side-bottom { margin-top: auto; }
.main { flex: 999 1 560px; min-width: 0; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.main:focus { outline: none; }
.tool-view { display: flex; flex-direction: column; gap: 20px; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.page-head h1 { font-size: 28px; }
.page-head p { margin-top: 4px; }
.plan-chip { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; font-size: 14px; }
.tool-card { text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 12px; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.tool-card:hover { border-color: var(--navy); color: var(--text); box-shadow: 0 6px 20px rgba(16,38,79,.08); transform: translateY(-2px); }
.ic { display: inline-flex; flex: none; }

/* إعدادات الأداة */
.setup-card { display: flex; flex-direction: column; gap: 20px; }
.sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.side { border: 1px solid var(--border); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 14px; background: #FCFDFE; min-width: 0; }
.side-head { display: flex; gap: 12px; align-items: flex-start; }
.side-head h3 { font-size: 17px; }
.side-head p { margin-top: 2px; }
.side-badge { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 14px; }
.file-list { display: flex; flex-direction: column; gap: 8px; }
.file-chip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; min-width: 0; flex-wrap: wrap; }
.file-chip-ic { width: 36px; height: 36px; border-radius: 9px; background: var(--mint-soft); display: flex; align-items: center; justify-content: center; flex: none; }
.file-chip-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 140px; line-height: 1.4; }
.file-chip-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-sm { min-height: 38px; width: auto; max-width: 220px; font-size: 14px; }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: #44566A; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.icon-btn:hover { border-color: var(--red-dot); color: var(--red-fg); background: var(--red-bg); }
.merge-note { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--green-fg); font-weight: 600; }
.fields { display: grid; grid-template-columns: 1fr; gap: 12px; }
.fields-2 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.drop { border: 2px dashed var(--border-strong); border-radius: 14px; padding: 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--card); cursor: pointer; position: relative; }
.drop-text { display: flex; flex-direction: column; gap: 2px; }
.drop-compact { flex-direction: row; justify-content: center; padding: 12px 16px; text-align: start; border-width: 1.5px; }
.drop:hover, .drop.drag { border-color: var(--green-text); background: var(--mint-soft); }
.drop:focus-within { outline: 3px solid var(--mint); outline-offset: 3px; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.source-box { border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: var(--card); }
.pairs-box { background: var(--card); }
.pairs-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 6px; }
.link-btn { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px; color: var(--green-text); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 0 24px; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #EEF2F6; }
.pair .check span { overflow: hidden; text-overflow: ellipsis; }
.pair-arrow { color: var(--muted-2); text-align: center; }
.pair .select { min-height: 40px; font-size: 14px; }
.col-picks { display: flex; flex-wrap: wrap; gap: 0 20px; max-height: 240px; overflow: auto; }
.run-row { display: flex; justify-content: flex-start; padding-top: 4px; border-top: 1px solid var(--border); }
.run-btn { min-width: 200px; }
.err-box:empty { display: none; }
.err-box { display: flex; flex-direction: column; gap: 8px; }

/* النتيجة */
.result-card { display: flex; flex-direction: column; gap: 16px; }
.result-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.result-head h2 { font-size: 22px; }
.files-line { margin-top: 2px; }
.btn-ghost { background: transparent; color: var(--navy); border-color: transparent; }
.btn-ghost:hover { background: #EEF3F8; color: var(--navy); }
.warn-box { border: 1px solid #F3D3A6; border-radius: 12px; padding: 10px 14px; background: #FFFBF3; }
.warn-box summary { cursor: pointer; font-weight: 600; color: var(--orange-fg); }
.warn-box[open] summary { margin-bottom: 10px; }
.warn-box .alert { margin-top: 6px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat { padding: 12px 14px; border-radius: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font: inherit; font-weight: 600; text-align: start; border: 2px solid transparent; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.stat:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,38,79,.08); }
.stat[aria-pressed="true"] { border-color: currentColor; box-shadow: 0 0 0 3px rgba(16,38,79,.06); }
.stat .stat-label { font-size: 14px; line-height: 1.4; }
.stat b { font-family: var(--font-head); font-size: 26px; line-height: 1.2; }
.stat-total { background: var(--navy); color: #fff; }
.stat-total[aria-pressed="true"] { border-color: var(--mint); }
.stat-red { background: var(--red-bg); color: var(--red-fg); }
.stat-orange { background: var(--orange-bg); color: var(--orange-fg); }
.stat-green { background: var(--green-bg); color: var(--green-fg); }
.stat-gray { background: #EEF3F8; color: #33475B; }
.stats-hint { margin-top: -6px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.search-box { position: relative; flex: 1 1 260px; max-width: 380px; }
.search-box .ic { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-2); }
.search-box .input { padding-inline-start: 40px; }
.review-progress { font-size: 14px; font-weight: 600; color: #33475B; background: #EEF3F8; padding: 6px 12px; border-radius: 999px; }
.review-progress.done { background: var(--green-bg); color: var(--green-fg); }
.count-line { margin-top: -4px; }
.more { display: flex; justify-content: center; }
.more:empty { display: none; }

table.review-table { table-layout: fixed; min-width: 960px; }
.review-table col.w-pri { width: 96px; } .review-table col.w-key { width: 118px; } .review-table col.w-name { width: 140px; }
.review-table col.w-item { width: 128px; } .review-table col.w-val { width: 100px; } .review-table col.w-delta { width: 86px; }
.review-table col.w-note { width: 140px; } .review-table col.w-rev { width: 96px; }
.review-table td { vertical-align: top; }
.review-table th.num { text-align: center; }
.review-table thead th { white-space: normal; overflow-wrap: anywhere; vertical-align: bottom; line-height: 1.4; }
/* صفوف البنود داخل الموظف الواحد: فاصل خفيف، وبين الموظفين فاصل أوضح */
.review-table tbody.emp tr + tr td { border-top: 1px dashed #DCE3EA; }
.review-table tbody.emp tr:first-child td { border-top: 2px solid #CFD8E2; }
.review-table td.d-item { font-weight: 600; }
.review-table td.d-total { font-weight: 700; }
.review-table td.d-val bdi, .review-table td.d-delta bdi { font-variant-numeric: tabular-nums; }
.review-table td.d-delta { white-space: nowrap; }
.delta { display: inline-block; padding: 0 8px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.delta.neg { background: var(--red-bg); color: var(--red-fg); }
.delta.pos { background: var(--green-bg); color: var(--green-fg); }
.review-table td.d-text { line-height: 1.6; }
.col-key bdi { font-variant-numeric: tabular-nums; }
.src { display: block; font-size: 12px; color: var(--muted-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parts { display: flex; flex-direction: column; gap: 4px; }
.part { line-height: 1.6; }
.part-label { font-weight: 600; }
.part-total .part-label, .part-total .v-a, .part-total .v-b { font-weight: 700; }
.v-a, .v-b { font-variant-numeric: tabular-nums; }
.part-arrow { color: var(--muted-2); }
.part-delta { display: inline-block; margin-inline-start: 6px; padding: 0 7px; border-radius: 999px; background: rgba(16,38,79,.06); color: #44566A; font-size: 12px; font-weight: 600; white-space: nowrap; vertical-align: 1px; }
.part-error { color: var(--orange-fg); font-weight: 600; }
.sys-note { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.note-input { width: 100%; min-height: 36px; border: 1px solid transparent; border-radius: 8px; background: rgba(255,255,255,.7); padding: 4px 8px; font: inherit; font-size: 14px; color: var(--text); }
.note-input:hover { border-color: var(--border); }
.note-input:focus { border-color: var(--navy); background: #fff; outline: none; }
.review-btn { min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: #fff; color: #44566A; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.review-btn:hover { border-color: var(--green-text); color: var(--green-text); }
.review-btn[aria-pressed="true"] { background: var(--green-text); border-color: var(--green-text); color: #fff; }
tr.is-reviewed td, tbody.is-reviewed td { opacity: .55; }
tr.is-reviewed td.col-rev, tbody.is-reviewed td.col-rev { opacity: 1; }
tr.p-red td, tbody.p-red td { background: #FFF7F7; }
tr.p-orange td, tbody.p-orange td { background: #FFFBF3; }
tr.p-green td, tbody.p-green td { background: #F6FCF9; }
.status-ok { color: var(--green-fg); font-weight: 600; white-space: nowrap; }
.status-missing { color: var(--orange-fg); font-weight: 600; }
table.link-table td, table.link-table th { white-space: nowrap; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; }
.spinner { width: 18px; height: 18px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.print-only { display: none; }

@media (max-width: 900px) {
  .sidebar { max-width: none; position: static; height: auto; flex-basis: 100%; padding: 14px 16px; gap: 10px; }
  .side-nav { flex-direction: row; flex-wrap: wrap; }
  .side-nav a, .side-nav button { width: auto; }
  .side-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--mint); }
  .side-bottom { margin-top: 0; }
}
@media (max-width: 720px) {
  .main { padding: 20px 16px; }
  .pairs { grid-template-columns: 1fr; }
  .hero-inner { padding-top: 48px; padding-bottom: 56px; }
  .stat b { font-size: 22px; }
}

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

/* =========================================================
   الطباعة / PDF: A4 عرضي، الجدول بيملأ الصفحة بكل الأعمدة
   ========================================================= */
@page { size: A4 landscape; margin: 10mm 10mm 12mm; @bottom-center { content: "صفحة " counter(page) " من " counter(pages); font-size: 9pt; color: #5A6B7D; } }
@media print {
  html, body { background: #fff !important; }
  body { font-size: 10pt; padding: 0 !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .app { display: block; min-height: 0; }
  .main { display: block; padding: 0; }
  .tool-view { display: block; }
  .sidebar, .no-print, .toolbar, .site-header, .site-footer, .skip, #demo-bar { display: none !important; }
  [data-view][hidden] { display: none !important; }
  .print-only { display: inline; }
  .card { border: 0; padding: 0; border-radius: 0; box-shadow: none; }
  .result-card { gap: 3mm; }
  .print-head { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 6mm; border-bottom: 2px solid #10264F; padding-bottom: 3mm; }
  .print-brand { display: flex; flex-direction: column; line-height: 1.2; }
  .print-brand b { font-family: var(--font-head); font-size: 13pt; color: #10264F; }
  .print-brand span { font-size: 8pt; color: #5A6B7D; }
  .print-title { flex: 1; text-align: center; }
  .print-title h2 { font-size: 14pt; }
  .print-title p { font-size: 9pt; color: #44566A; }
  .print-meta { display: flex; flex-direction: column; align-items: flex-end; font-size: 8.5pt; color: #44566A; text-align: left; }
  .result-head, .count-line, .stats-hint { display: none !important; }
  .alert { padding: 2mm 3mm; font-size: 9pt; }
  .alert svg { display: none; }
  .stats { display: flex; gap: 2mm; }
  .stat { flex: 1; padding: 2mm 3mm; border-width: 1px; border-color: transparent !important; box-shadow: none !important; transform: none !important; flex-direction: row; align-items: center; justify-content: space-between; }
  .stat .stat-label { font-size: 8.5pt; }
  .stat b { font-size: 12pt; }
  .stat[aria-pressed="true"] { outline: 1.5px solid currentColor; }
  .table-wrap { overflow: visible !important; border: 0; border-radius: 0; }
  table.data { width: 100% !important; min-width: 0 !important; font-size: 8.5pt; }
  table.review-table { table-layout: fixed; }
  .review-table col.w-pri { width: 18mm; } .review-table col.w-key { width: 23mm; } .review-table col.w-name { width: 34mm; }
  .review-table col.w-item { width: 30mm; } .review-table col.w-val { width: 22mm; } .review-table col.w-delta { width: 19mm; }
  .review-table col.w-note { width: 32mm; } .review-table col.w-rev { width: 14mm; }
  .review-table tbody.emp { break-inside: avoid; page-break-inside: avoid; }
  .review-table tbody.emp tr:first-child td { border-top: 1pt solid #9FB0C2; }
  .review-table tbody.emp tr + tr td { border-top: 0.4pt dashed #D5DDE5; }
  .delta { font-size: 7.5pt; padding: 0 1.5mm; }
  table.data th { background: #10264F !important; color: #fff !important; padding: 1.8mm 2mm; font-size: 8.5pt; white-space: normal; }
  table.data td { padding: 1.6mm 2mm; border-top: 0.6pt solid #D5DDE5; }
  table.link-table td, table.link-table th { white-space: normal; word-break: break-word; font-size: 7.5pt; padding: 1.2mm 1.4mm; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; page-break-inside: avoid; }
  .pill { font-size: 7.5pt; padding: 0 2mm; }
  .part-delta { font-size: 7.5pt; background: none; padding: 0; }
  .sys-note { font-size: 8pt; margin-bottom: 1mm; }
  tr.is-reviewed td, tbody.is-reviewed td { opacity: 1; }
  .src { font-size: 7pt; }
}

/* ===================== مراجعة الرواتب (نفس تصميم الأداة الداخلية) ===================== */
.sr-result {
  --sr-head: #10264F;
  --sr-r: #C23B2E; --sr-r-bg: #FDECEA; --sr-o: #C8590C; --sr-o-bg: #FDEEDD;
  --sr-y: #9A7400; --sr-y-bg: #FFF6D1; --sr-w: #5D6B7E; --sr-w-bg: #EEF1F5;
  --sr-g: #1D8A5A; --sr-g-bg: #E4F4EB;
}
.btn-sm { min-height: 40px; padding: 6px 14px; border-radius: 9px; font-size: 14px; }
.req-star { color: var(--red-dot); }
.is-bad { border-color: var(--red-dot) !important; background: var(--red-bg) !important; }
.field-warn { color: var(--orange-fg); font-weight: 600; font-size: 13px; margin: 0; }
.fields-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fields-3 small { font-weight: 400; font-size: 12.5px; line-height: 1.5; }
.side-settings { grid-column: 1 / -1; }

.sr-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sr-card { --c: var(--sr-head); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; text-align: start;
  background: var(--card); border: 1px solid var(--border); border-top: 4px solid var(--c); border-radius: 10px; padding: 12px 14px 11px;
  font: inherit; color: var(--text); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sr-card:hover { border-color: var(--c); }
.sr-card[aria-pressed="true"] { outline: 2px solid var(--c); outline-offset: 1px; }
.sr-card-lb { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.sr-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -2px 3px rgba(0,0,0,.18); flex: none; }
.sr-card-n { font-family: var(--font-head); font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--c); }
.sr-card-hint { font-size: 12.5px; color: var(--muted-2); line-height: 1.5; }
.sr-card-hint b { color: var(--text); }
.sr-c-all { --c: var(--sr-head); } .sr-c-r { --c: var(--sr-r); } .sr-c-o { --c: var(--sr-o); }
.sr-c-y { --c: var(--sr-y); } .sr-c-w { --c: var(--sr-w); } .sr-c-g { --c: var(--sr-g); }

.sr-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sr-bar .select { width: auto; min-width: 120px; max-width: 200px; min-height: 40px; font-size: 14px; }
.sr-bar .search-box { flex: 1 1 170px; max-width: 300px; }
.sr-bar .search-box .input { min-height: 40px; font-size: 14px; }
.sr-cnt { font-size: 13px; color: var(--muted-2); white-space: nowrap; }
.sr-actions { display: flex; gap: 8px; margin-inline-start: auto; }
.sr-xls { background: var(--sr-head); }
.sr-xls:hover { background: #0B4A3E; }
.sr-wrap { overflow: auto; max-height: 72vh; border: 1px solid var(--border); border-radius: 9px; }
table.sr-table { width: 100%; min-width: 960px; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.sr-table col.w-i { width: 3%; } .sr-table col.w-st { width: 12%; } .sr-table col.w-emp { width: 6%; } .sr-table col.w-nm { width: 12%; }
.sr-table col.w-iq { width: 10%; } .sr-table col.w-sp { width: 7%; } .sr-table col.w-m { width: 7%; } .sr-table col.w-d { width: 6%; }
.sr-table col.w-det { width: 17%; } .sr-table col.w-note { width: 8%; } .sr-table col.w-rv { width: 5%; }
.sr-table td.num bdi { white-space: nowrap; }
.sr-table th { position: sticky; top: 0; z-index: 2; background: var(--sr-head); color: #fff; font-weight: 600; font-size: 13px; line-height: 1.35;
  padding: 9px 6px; text-align: center; white-space: pre-line; vertical-align: middle; }
.sr-table td { padding: 7px 5px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; overflow-wrap: anywhere; }
.sr-table td.num { text-align: center; }
.sr-table td.sr-name { text-align: start; }
.sr-table td.sr-det { text-align: start; font-size: 13px; line-height: 1.55; }
.sr-table tr.sr-r td { background: var(--sr-r-bg); } .sr-table tr.sr-o td { background: var(--sr-o-bg); }
.sr-table tr.sr-y td { background: var(--sr-y-bg); } .sr-table tr.sr-w td { background: var(--sr-w-bg); }
.sr-table tr td:first-child { box-shadow: inset -4px 0 var(--stripe, transparent); }
.sr-table tr.sr-r { --stripe: var(--sr-r); } .sr-table tr.sr-o { --stripe: var(--sr-o); } .sr-table tr.sr-y { --stripe: var(--sr-y); }
.sr-table tr.sr-w { --stripe: var(--sr-w); } .sr-table tr.sr-g { --stripe: var(--sr-g); }
.sr-table tr.is-done td { opacity: .6; }
.sr-table tr.sr-empty td { padding: 28px; text-align: center; color: var(--muted-2); }
.sr-pill { display: inline-block; max-width: 100%; border: 1px solid currentColor; border-radius: 6px; padding: 1px 7px; background: var(--card);
  font-size: 11.5px; font-weight: 600; line-height: 1.6; white-space: normal; }
.sr-p-r { color: var(--sr-r); } .sr-p-o { color: var(--sr-o); } .sr-p-y { color: var(--sr-y); } .sr-p-w { color: var(--sr-w); } .sr-p-g { color: var(--sr-g); }
.sr-table td.neg { color: var(--sr-r); font-weight: 700; } .sr-table td.pos { color: var(--sr-g); font-weight: 700; }
.dash { color: var(--muted-2); }
.sr-fb { display: inline-block; margin-inline-start: 4px; padding: 0 6px; border-radius: 8px; background: var(--sr-w-bg); color: var(--sr-w); font-size: 11px; font-weight: 700; cursor: help; white-space: nowrap; }
.sr-note { width: 100%; min-height: 34px; border: 1px solid var(--border-strong); border-radius: 6px; padding: 4px 7px; background: var(--card); font: inherit; font-size: 13px; color: var(--text); }
.sr-rev { min-height: 34px; width: 100%; max-width: 56px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--card); font: inherit; font-size: 14px; color: var(--text); }
.sr-note:focus, .sr-rev:focus { border-color: var(--navy); outline: none; }
.sr-legend { margin: 0; font-size: 12.5px; color: var(--muted-2); line-height: 1.7; }
.sr-notes { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; }
.sr-notes h3 { font-size: 16px; margin: 0 0 6px; }
.sr-notes ul { margin: 0; padding-inline-start: 20px; line-height: 1.85; font-size: 13.5px; }

@media (max-width: 1100px) { .sr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sr-cards { grid-template-columns: 1fr; } .sr-bar .select { flex: 1 1 140px; } }

@media print {
  .sr-cards { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1.5mm; }
  .sr-card { padding: 1.5mm 2mm; border-width: 0.4pt; border-top-width: 2pt; border-radius: 1.5mm; gap: 0; outline: none !important; }
  .sr-card[aria-pressed="true"] { border-color: var(--c); border-width: 1pt; border-top-width: 2pt; }
  .sr-card-lb { font-size: 7pt; gap: 1mm; } .sr-dot { width: 2mm; height: 2mm; }
  .sr-card-n { font-size: 12pt; } .sr-card-hint { display: none; }
  .sr-box { border: 0; padding: 0; gap: 2mm; }
  .sr-wrap { max-height: none; overflow: visible; border: 0; }
  table.sr-table { min-width: 0; }
  .sr-table col.w-i { width: 6mm; } .sr-table col.w-st { width: 25mm; } .sr-table col.w-emp { width: 15mm; } .sr-table col.w-nm { width: 34mm; }
  .sr-table col.w-iq { width: 19mm; } .sr-table col.w-sp { width: 19mm; } .sr-table col.w-m { width: 15mm; } .sr-table col.w-d { width: 13mm; }
  .sr-table col.w-det { width: 50mm; } .sr-table col.w-note { width: 25mm; } .sr-table col.w-rv { width: 11mm; }
  .sr-table th { position: static; font-size: 7.5pt; padding: 1.2mm 1mm; background: #10264F !important; }
  .sr-table td { font-size: 7.5pt; padding: 1mm; }
  .sr-table td.sr-det { font-size: 7pt; }
  .sr-table tr { break-inside: avoid; page-break-inside: avoid; }
  .sr-table tr.is-done td { opacity: 1; }
  .sr-pill { font-size: 6.5pt; padding: 0 1mm; }
  .sr-fb { font-size: 6pt; }
  .sr-notes { border: 0; padding: 0; break-inside: avoid; }
  .sr-notes h3 { font-size: 10pt; } .sr-notes ul { font-size: 8pt; line-height: 1.6; }
}
/* إعدادات مراجعة الرواتب: أعمدة الأدوار في شبكة مضغوطة */
#salarySetup .fields { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; }
#salarySetup .fields .field { font-size: 13px; }
#salarySetup .fields .select { min-height: 40px; font-size: 14px; }
#salarySetup .fields .field-warn { grid-column: 1 / -1; }
#salarySetup .fields-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* لوحة المشترك: لا نعرض الصفحة قبل وصول بيانات الحساب (منعًا لوميض الشارات الفارغة) */
body.app-loading .main { visibility: hidden; }
.sheet-notice { margin-top: 12px; border: 2px solid var(--orange-fg); line-height: 1.8; }
.sheet-notice .btn { margin-inline-start: 4px; vertical-align: middle; }
.inline-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.inline-row .input { width: 110px; }
.inline-row .check { font-weight: 600; font-size: 14px; }

/* ===== ربط ومقارنة الملفات: مصادر الطرفين، نوع الربط، الأعمدة، خلايا النتيجة ===== */
.src-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.src-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; align-items: end; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.src-name { grid-column: 1 / -1; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-row .field-warn, .src-row .muted { grid-column: 1 / -1; margin: 0; }
.key-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.key-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 12px; border: 2px solid var(--border-strong); border-radius: 12px; background: var(--card); font: inherit; font-weight: 700; cursor: pointer; }
.key-btn small { font-weight: 400; color: var(--muted-2); direction: ltr; }
.key-btn[aria-pressed="true"] { border-color: var(--green-text); background: var(--mint-soft); }
.side-cols .all-check { border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.col-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 2px 0; border-bottom: 1px solid var(--border); }
.col-row:last-of-type { border-bottom: 0; }
.col-row > label { flex: 1 1 220px; min-width: 0; }
.col-sub { display: block; font-size: 12px; font-weight: 400; line-height: 1.4; }
.tgt { max-width: 280px; }
.tgt.in { border-color: var(--green-text); background: var(--green-bg); }
.policy { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-top: 8px; display: grid; gap: 6px; }
.policy legend { font-weight: 700; padding: 0 6px; }
.link-table th.tc { background: #0B7F63; }
.link-table th.nc { background: #1A4FB5; }
.link-table th small { display: block; font-weight: 400; opacity: .85; font-size: 11px; }
.link-table td.nc { background: #EEF3FB; }
.link-table td.fl { background: var(--green-bg) !important; font-weight: 600; }
.link-table td.rp { background: #E3ECFB !important; font-weight: 600; cursor: help; }
.link-table td.df { outline: 2px dashed var(--orange-dot); outline-offset: -3px; cursor: help; }
.link-table td.conf { background: var(--orange-bg) !important; color: var(--orange-fg); font-weight: 700; cursor: help; }
.link-table tr.miss td { background: var(--red-bg); }
.link-table tr.nokey td { background: #EEF1F5; }
.link-table td.t { text-align: start; }
.fbtag { display: inline-block; margin-inline-start: 4px; font-size: 11px; font-weight: 700; border-radius: 8px; padding: 0 6px; background: #E3ECFB; color: #1F4F99; cursor: help; white-space: nowrap; }
.fbtag.bad { background: var(--orange-bg); color: var(--orange-fg); }
.d-conf { color: var(--orange-fg); cursor: help; }
.csum .pbar { height: 8px; background: #E7EBF1; border-radius: 4px; overflow: hidden; min-width: 80px; }
.csum .pbar i { display: block; height: 100%; background: var(--green-text); }
.csum td small { display: block; color: var(--muted-2); font-size: 11px; }
@media print { .csum { display: none; } }

/* =========================================================
   الصفحة الرئيسية الجديدة (منصة أدوات البيانات الذكية)
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:root { --lp-navy: #10264F; --lp-blue: #1F5FD6; --lp-green: #14A785; --lp-purple: #6B3FC6; }
.brand-logo { height: 46px; width: auto; display: block; }
.lp-header { background: #fff; border-bottom: 1px solid #E6ECF4; position: sticky; top: 0; z-index: 20; }
.lp-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.lp-logo { display: flex; align-items: center; flex: none; }
.lp-logo img { height: 54px; width: auto; display: block; }
.lp-links { display: flex; align-items: center; gap: 26px; flex: 1; justify-content: center; }
.lp-links a { color: var(--lp-navy); text-decoration: none; font-weight: 600; font-size: 15px; padding: 24px 0 21px; border-bottom: 3px solid transparent; white-space: nowrap; }
.lp-links a:hover, .lp-links a[aria-current] { color: var(--lp-blue); border-bottom-color: var(--lp-blue); }
.lp-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.lp-login { color: var(--lp-navy); font-weight: 600; text-decoration: none; font-size: 15px; }
.lp-login:hover { color: var(--lp-blue); }
.lp-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--lp-blue); color: #fff; text-decoration: none; font-weight: 700; padding: 11px 22px; border-radius: 10px; box-shadow: 0 6px 16px rgba(31,95,214,.28); transition: transform .15s ease, box-shadow .15s ease; }
.lp-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(31,95,214,.34); }

.lp-hero { background: linear-gradient(180deg, #F3F7FF 0%, #FFFFFF 100%); border-bottom: 1px solid #EEF2F8; }
.lp-hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: center; padding-top: 44px; padding-bottom: 36px; }
.lp-hero h1 { font-size: clamp(22px, 6.4vw, 44px); line-height: 1.3; color: var(--lp-navy); margin-bottom: 14px; white-space: nowrap; }
.lp-lead { font-size: 21px; color: #4A5D78; max-width: 560px; margin: 0 0 16px; }
.lp-privacy { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 6px 14px; border-radius: 999px; background: #E8F6F1; color: #0B7F63; font-size: 14px; font-weight: 600; }
.lp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 28px; }
.lp-chips li { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--lp-navy); font-size: 16px; }
.lp-chip-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; }
.lp-c-blue { background: #E3EDFF; color: var(--lp-blue); }
.lp-c-green { background: #DDF4EC; color: var(--lp-green); }
.lp-art svg { width: 100%; height: auto; max-height: 340px; display: block; }

.lp-tools { padding-top: 28px; padding-bottom: 8px; }
.lp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.lp-card { --c: var(--lp-blue); --soft: #EEF4FF; --line: #D8E4FA; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, var(--soft) 0%, #FFFFFF 62%); padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 8px 24px rgba(16,38,79,.06); }
.lp-green { --c: var(--lp-green); --soft: #EAF8F3; --line: #CDEBE0; }
.lp-purple { --c: var(--lp-purple); --soft: #F2EEFC; --line: #DDD2F5; }
.lp-orange { --c: #D9822B; --soft: #FFF5E8; --line: #F6DFC0; }
.lp-teal { --c: #0F8FA9; --soft: #E9F7FB; --line: #C9E8F0; }
.lp-violet { --c: #6D4CC2; --soft: #F3EFFC; --line: #DDD3F4; }
.lp-rose { --c: #C2456A; --soft: #FDEEF2; --line: #F5D3DC; }
.lp-card-head { display: flex; align-items: center; gap: 16px; }
.lp-ico { width: 74px; height: 74px; border-radius: 20px; background: var(--c); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 10px 20px color-mix(in srgb, var(--c) 35%, transparent); }
.lp-card-head h3 { font-size: 26px; color: var(--lp-navy); margin: 0; line-height: 1.2; }
.lp-en { margin: 2px 0 0; color: #5A6B84; font-size: 15px; text-align: start; }
.lp-hook { font-weight: 800; font-size: 18px; color: var(--c); margin: 6px 0 0; }
.lp-desc { margin: 0; color: #33445E; line-height: 1.9; font-size: 15px; }
.lp-feat { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-feat li { display: flex; align-items: flex-start; gap: 12px; }
.lp-feat b { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--lp-navy); }
.lp-feat small { display: block; color: #5A6B84; font-size: 13px; line-height: 1.6; margin-top: 2px; }
.lp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); display: inline-block; }
.lp-check { width: 24px; height: 24px; border-radius: 50%; background: var(--c); flex: none; margin-top: 2px; position: relative; }
.lp-check::after { content: ""; position: absolute; inset-inline-start: 8px; top: 5px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(40deg); }
.lp-try { align-self: center; margin-top: auto; display: inline-flex; align-items: center; gap: 8px; background: var(--c); color: #fff; text-decoration: none; font-weight: 700; padding: 10px 30px; border-radius: 999px; box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 32%, transparent); }
.lp-try:hover { filter: brightness(1.06); }
.lp-note { display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--c) 7%, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.lp-note p { margin: 0; font-size: 13.5px; color: #33445E; line-height: 1.7; }
.lp-up { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--c); display: grid; place-items: center; flex: none; box-shadow: 0 2px 8px rgba(16,38,79,.1); }

.lp-feats { padding-top: 22px; padding-bottom: 8px; }
.lp-feats ul { list-style: none; margin: 0; padding: 18px 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border-top: 1px solid #E6ECF4; }
.lp-feats li { display: flex; align-items: center; gap: 14px; padding: 6px 18px; border-inline-start: 1px solid #E6ECF4; }
.lp-feats li:first-child { border-inline-start: 0; }
.lp-f-ic { color: var(--lp-blue); flex: none; display: grid; place-items: center; }
.lp-feats b { display: block; color: var(--lp-navy); font-size: 15px; }
.lp-feats small { display: block; color: #5A6B84; font-size: 12.5px; line-height: 1.5; }

@media (max-width: 1080px) {
  .lp-links { gap: 16px; }
  .lp-grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
  .lp-feats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
  .lp-feats li:nth-child(3) { border-inline-start: 0; }
}
@media (max-width: 900px) {
  .lp-nav { flex-wrap: wrap; padding-top: 8px; padding-bottom: 0; min-height: 0; }
  .lp-links { order: 3; flex: 1 1 100%; justify-content: flex-start; overflow-x: auto; gap: 22px; }
  .lp-links a { padding: 10px 0 8px; font-size: 14px; }
  .lp-hero-inner { grid-template-columns: 1fr; padding-top: 28px; }
  .lp-art { order: -1; max-width: 460px; margin-inline: auto; }
  .lp-login { display: none; }
}
@media (max-width: 560px) {
  .lp-logo img { height: 44px; }
  .lp-cta { padding: 9px 16px; font-size: 14px; }
  .lp-lead { font-size: 18px; }
  .lp-feats ul { grid-template-columns: 1fr; }
  .lp-feats li { border-inline-start: 0; border-top: 1px solid #E6ECF4; }
  .lp-feats li:first-child { border-top: 0; }
}
@media print { .lp-header { display: none; } }

/* زر اللغة */
.lang-toggle { font: inherit; font-weight: 700; font-size: 14px; padding: 8px 14px; border: 1px solid #D5DEEA; border-radius: 10px; background: #fff; color: var(--navy); cursor: pointer; }
.lang-toggle:hover { border-color: var(--blue); color: var(--blue); }
.side-bottom .lang-toggle { margin-bottom: 6px; }
html[dir="ltr"] .side-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--mint); }
html[dir="ltr"] .sr-table tr td:first-child { box-shadow: inset 4px 0 var(--stripe, transparent); }
@media (max-width: 900px) { html[dir="ltr"] .side-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--mint); } }
#accEmail { text-align: right; }
html[dir="ltr"] #accEmail { text-align: left; }
@media print { html[dir="ltr"] .print-meta { align-items: flex-start; text-align: right; } }

/* تبويبات فئات الأدوات في الصفحة الرئيسية (بدون جافاسكربت تظهر كل الفئات متتالية) */
.lp-tabs { display: none; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.lp-tools.lp-js .lp-tabs { display: flex; }
.lp-tab { --c: var(--lp-blue); display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px 10px 20px; border: 1px solid #D8E4FA; border-radius: 14px; background: #fff; color: var(--lp-navy); font: inherit; font-weight: 800; font-size: 17px; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s, border-color .15s; }
.lp-tab:hover { border-color: var(--c); }
.lp-tab-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #EEF4FF; color: var(--c); flex: none; }
.lp-tab[aria-selected="true"] { background: var(--lp-navy); border-color: var(--lp-navy); color: #fff; box-shadow: 0 8px 18px rgba(16,38,79,.22); }
.lp-tab[aria-selected="true"] .lp-tab-ic { background: rgba(255,255,255,.16); color: #fff; }
.lp-cat { margin-bottom: 8px; }
.lp-cat + .lp-cat { margin-top: 26px; }
.lp-tools.lp-js .lp-cat[hidden] { display: none; }
/* فئة فيها أداة واحدة: بطاقة عريضة بعمودين بدل ثلث العرض */
.lp-grid.lp-single { grid-template-columns: 1fr; max-width: 940px; margin-inline: auto; }
@media (min-width: 900px) {
  .lp-grid.lp-single > .lp-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 40px; row-gap: 12px; padding: 30px 34px 26px; align-content: start; }
  .lp-grid.lp-single > .lp-card > .lp-card-head { grid-column: 1; grid-row: 1; }
  .lp-grid.lp-single > .lp-card > .lp-hook { grid-column: 1; grid-row: 2; }
  .lp-grid.lp-single > .lp-card > .lp-desc { grid-column: 1; grid-row: 3; }
  .lp-grid.lp-single > .lp-card > .lp-try { grid-column: 1; grid-row: 4; align-self: start; justify-self: start; margin-top: 8px; }
  .lp-grid.lp-single > .lp-card > .lp-feat { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; justify-content: center; gap: 18px; }
  .lp-grid.lp-single > .lp-card > .lp-note { grid-column: 2; grid-row: 4; align-self: end; }
}
@media (max-width: 720px) { .lp-tab { padding: 8px 16px 8px 14px; font-size: 16px; } }

.lp-grid.lp-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }
@media (max-width: 1080px) { .lp-grid.lp-duo { grid-template-columns: 1fr; max-width: 640px; } }
.lp-grid.lp-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; margin-inline: auto; }
@media (max-width: 1080px) { .lp-grid.lp-quad { grid-template-columns: 1fr; max-width: 640px; } }