/* ===== Primer tokens (light) ===== */
:root {
  --bgColor-default:#ffffff; --bgColor-muted:#f6f8fa; --bgColor-inset:#f6f8fa;
  --bgColor-neutral-muted:#818b981f; --bgColor-accent-muted:#ddf4ff; --bgColor-accent-emphasis:#0969da;
  --bgColor-success-muted:#dafbe1; --bgColor-danger-muted:#ffebe9; --bgColor-attention-muted:#fff8c5;
  --bgColor-success-emphasis:#1f883d; --bgColor-danger-emphasis:#cf222e; --bgColor-done-emphasis:#8250df;
  --fgColor-default:#1f2328; --fgColor-muted:#59636e; --fgColor-accent:#0969da; --fgColor-onEmphasis:#ffffff;
  --fgColor-success:#1a7f37; --fgColor-danger:#d1242f; --fgColor-attention:#9a6700; --fgColor-done:#8250df;
  --borderColor-default:#d1d9e0; --borderColor-muted:#d1d9e0b3;
  --borderColor-accent-muted:#54aeff66; --borderColor-success-muted:#4ac26b66; --borderColor-danger-muted:#ff818266; --borderColor-attention-muted:#d4a72c66;
  --button-default-bgColor-rest:#f6f8fa; --button-default-bgColor-hover:#eff2f5; --button-default-borderColor:#d1d9e0;
  --button-primary-bgColor-rest:#1f883d; --button-primary-bgColor-hover:#1c8139; --button-primary-borderColor:#1f232826;
  --header-bgColor:#f6f8fa; --underlineNav-active:#fd8c73;
  --row-hover:#f6f8fa; --focus-outline:#0969da; --input-bg:#ffffff;
  --shadow-overlay:0 1px 3px #1f23281f, 0 8px 24px #424a5333;
  --fontStack-system:"IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --fontStack-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}
/* ===== Primer tokens (dark) ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-color-mode="light"]) {
    --bgColor-default:#0d1117; --bgColor-muted:#151b23; --bgColor-inset:#010409;
    --bgColor-neutral-muted:#656c7633; --bgColor-accent-muted:#388bfd1a; --bgColor-accent-emphasis:#1f6feb;
    --bgColor-success-muted:#2ea04326; --bgColor-danger-muted:#f851491a; --bgColor-attention-muted:#bb800926;
    --bgColor-success-emphasis:#238636; --bgColor-danger-emphasis:#da3633; --bgColor-done-emphasis:#8957e5;
    --fgColor-default:#f0f6fc; --fgColor-muted:#9198a1; --fgColor-accent:#4493f8;
    --fgColor-success:#3fb950; --fgColor-danger:#f85149; --fgColor-attention:#d29922; --fgColor-done:#ab7df8;
    --borderColor-default:#3d444d; --borderColor-muted:#3d444db3;
    --borderColor-accent-muted:#388bfd66; --borderColor-success-muted:#2ea04366; --borderColor-danger-muted:#f8514966; --borderColor-attention-muted:#bb800966;
    --button-default-bgColor-rest:#212830; --button-default-bgColor-hover:#262c36; --button-default-borderColor:#3d444d;
    --button-primary-bgColor-rest:#238636; --button-primary-bgColor-hover:#29903b; --button-primary-borderColor:#ffffff1a;
    --header-bgColor:#151b23; --underlineNav-active:#f78166;
    --row-hover:#151b23; --focus-outline:#1f6feb; --input-bg:#010409;
    --shadow-overlay:0 0 0 1px #3d444d, 0 8px 24px #010409;
    color-scheme: dark;
  }
}
:root[data-color-mode="dark"] {
  --bgColor-default:#0d1117; --bgColor-muted:#151b23; --bgColor-inset:#010409;
  --bgColor-neutral-muted:#656c7633; --bgColor-accent-muted:#388bfd1a; --bgColor-accent-emphasis:#1f6feb;
  --bgColor-success-muted:#2ea04326; --bgColor-danger-muted:#f851491a; --bgColor-attention-muted:#bb800926;
  --bgColor-success-emphasis:#238636; --bgColor-danger-emphasis:#da3633; --bgColor-done-emphasis:#8957e5;
  --fgColor-default:#f0f6fc; --fgColor-muted:#9198a1; --fgColor-accent:#4493f8;
  --fgColor-success:#3fb950; --fgColor-danger:#f85149; --fgColor-attention:#d29922; --fgColor-done:#ab7df8;
  --borderColor-default:#3d444d; --borderColor-muted:#3d444db3;
  --borderColor-accent-muted:#388bfd66; --borderColor-success-muted:#2ea04366; --borderColor-danger-muted:#f8514966; --borderColor-attention-muted:#bb800966;
  --button-default-bgColor-rest:#212830; --button-default-bgColor-hover:#262c36; --button-default-borderColor:#3d444d;
  --button-primary-bgColor-rest:#238636; --button-primary-bgColor-hover:#29903b; --button-primary-borderColor:#ffffff1a;
  --header-bgColor:#151b23; --underlineNav-active:#f78166;
  --row-hover:#151b23; --focus-outline:#1f6feb; --input-bg:#010409;
  --shadow-overlay:0 0 0 1px #3d444d, 0 8px 24px #010409;
  color-scheme: dark;
}

/* ===== Base ===== */
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; }
body { background:var(--bgColor-default); color:var(--fgColor-default); font:14px/1.5 var(--fontStack-system); -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }
a { color:var(--fgColor-accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { margin:0; font-weight:600; }
p { margin:0; }
code,.mono { font-family:var(--fontStack-mono); font-size:12px; }
svg.octicon { width:16px; height:16px; fill:currentColor; vertical-align:text-bottom; flex-shrink:0; }
:focus-visible { outline:2px solid var(--focus-outline); outline-offset:-2px; border-radius:6px; }
[hidden] { display:none !important; }
.muted { color:var(--fgColor-muted); }
.text-normal { font-weight:400; }
.strong { font-weight:600; }
.center { text-align:center; }
.ltr { direction:ltr; unicode-bidi:embed; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.container { width:100%; max-width:1280px; margin:0 auto; padding:0 16px; }
@media (min-width:544px){ .container{ padding:0 24px; } }
@media (min-width:1012px){ .container{ padding:0 32px; } }
.page { flex:1; padding-top:24px; padding-bottom:40px; }
.stack { display:flex; flex-direction:column; gap:16px; }
.row-gap { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* theme toggle icons */
.when-dark { display:none; }
:root[data-color-mode="dark"] .when-dark { display:inline-block; }
:root[data-color-mode="dark"] .when-light { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-color-mode="light"]) .when-dark { display:inline-block; }
  :root:not([data-color-mode="light"]) .when-light { display:none; }
}

/* ===== AppHeader ===== */
.AppHeader { background:var(--header-bgColor); border-bottom:1px solid var(--borderColor-default); }
.AppHeader-top { display:flex; align-items:center; gap:16px; height:64px; padding:0 16px; }
.AppHeader-logo { display:flex; flex-shrink:0; }
.AppHeader-logo img { width:32px; height:32px; object-fit:contain; }
.AppHeader-context { display:flex; align-items:center; gap:4px; min-width:0; overflow:hidden; white-space:nowrap; }
.AppHeader-context a, .AppHeader-context .current { color:var(--fgColor-default); padding:2px 6px; border-radius:6px; overflow:hidden; text-overflow:ellipsis; }
.AppHeader-context a:hover { background:var(--bgColor-neutral-muted); text-decoration:none; }
.AppHeader-context .sep { color:var(--fgColor-muted); }
.AppHeader-actions { margin-inline-start:auto; display:flex; align-items:center; gap:8px; }
.AppHeader:has(.UnderlineNav) { border-bottom:0; }

/* ===== UnderlineNav ===== */
.UnderlineNav { display:flex; gap:8px; padding:0 16px; overflow-x:auto; border-bottom:1px solid var(--borderColor-default); scrollbar-width:none; }
.UnderlineNav::-webkit-scrollbar { display:none; }
.UnderlineNav-item { position:relative; display:flex; align-items:center; gap:8px; padding:0 8px; height:48px; color:var(--fgColor-default); white-space:nowrap; }
.UnderlineNav-item span.text { padding:4px 0; }
.UnderlineNav-item:hover { text-decoration:none; }
.UnderlineNav-item:hover::before { content:""; position:absolute; inset:8px 0; background:var(--bgColor-neutral-muted); border-radius:6px; z-index:0; }
.UnderlineNav-item > * { position:relative; z-index:1; }
.UnderlineNav-item .octicon { color:var(--fgColor-muted); }
.UnderlineNav-item[aria-current="page"] { font-weight:600; }
.UnderlineNav-item[aria-current="page"]::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--underlineNav-active); border-radius:6px; }

/* ===== Buttons ===== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:32px; padding:0 12px; font:500 14px var(--fontStack-system); color:var(--fgColor-default); background:var(--button-default-bgColor-rest); border:1px solid var(--button-default-borderColor); border-radius:6px; cursor:pointer; white-space:nowrap; text-decoration:none; transition:background .08s; }
.btn:hover { background:var(--button-default-bgColor-hover); text-decoration:none; }
.btn .octicon { color:var(--fgColor-muted); }
.btn-sm { height:28px; padding:0 8px; font-size:12px; gap:4px; }
.btn-icon { width:32px; padding:0; }
.btn-sm.btn-icon { width:28px; }
.btn-block { width:100%; }
.btn-primary { color:#fff; background:var(--button-primary-bgColor-rest); border-color:var(--button-primary-borderColor); font-weight:600; }
.btn-primary:hover { background:var(--button-primary-bgColor-hover); }
.btn-primary .octicon { color:#fff; }
.btn-danger { color:var(--fgColor-danger); }
.btn-danger .octicon { color:currentColor; }
.btn-danger:hover { color:#fff; background:var(--bgColor-danger-emphasis); border-color:var(--bgColor-danger-emphasis); }
.btn-invisible { background:transparent; border-color:transparent; color:var(--fgColor-accent); }
.btn-invisible:hover { background:var(--bgColor-neutral-muted); }
button:disabled, .btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }

/* ===== Counter / Label ===== */
.Counter { display:inline-block; min-width:20px; padding:0 6px; font-size:12px; font-weight:500; line-height:18px; text-align:center; border-radius:2em; background:var(--bgColor-neutral-muted); color:var(--fgColor-default); }
.Label { display:inline-flex; align-items:center; padding:0 7px; font-size:12px; font-weight:500; line-height:18px; border:1px solid var(--borderColor-default); border-radius:2em; color:var(--fgColor-muted); white-space:nowrap; }
.Label--success { color:var(--fgColor-success); border-color:var(--borderColor-success-muted); }
.Label--danger { color:var(--fgColor-danger); border-color:var(--borderColor-danger-muted); }
.Label--attention { color:var(--fgColor-attention); border-color:var(--borderColor-attention-muted); }
.Label--accent { color:var(--fgColor-accent); border-color:var(--borderColor-accent-muted); }
.topic { display:inline-block; padding:0 10px; font-size:12px; font-weight:500; line-height:22px; border-radius:2em; background:var(--bgColor-accent-muted); color:var(--fgColor-accent); white-space:nowrap; }

/* ===== Box ===== */
.Box { border:1px solid var(--borderColor-default); border-radius:6px; background:var(--bgColor-default); }
.Box > :first-child { border-start-start-radius:6px; border-start-end-radius:6px; }
.Box-header { display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--bgColor-muted); border-bottom:1px solid var(--borderColor-default); flex-wrap:wrap; }
.Box-title { font-weight:600; font-size:14px; }
.Box-body { padding:16px; }
.Box-row { display:flex; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid var(--borderColor-muted); }
.Box-header + .Box-row, .Box-row:first-child { border-top:0; }
.Box-row:hover { background:var(--row-hover); }
.Box-row--static:hover { background:transparent; }
.Box-footer { padding:12px 16px; border-top:1px solid var(--borderColor-default); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.Box--danger { border-color:var(--borderColor-danger-muted); }
.Box--danger .Box-header { background:transparent; }
.blankslate { padding:32px 16px; text-align:center; color:var(--fgColor-muted); }
.blankslate .octicon { width:24px; height:24px; margin-bottom:8px; }
.blankslate h3 { color:var(--fgColor-default); font-size:16px; margin-bottom:4px; }

/* ===== Avatar ===== */
.avatar { display:inline-block; border-radius:50%; object-fit:cover; flex-shrink:0; vertical-align:middle; box-shadow:0 0 0 1px var(--borderColor-muted); }
.avatar-letter { display:inline-flex; align-items:center; justify-content:center; font-weight:600; color:#fff; background:hsl(var(--h,210) 45% 48%); box-shadow:none; line-height:1; }

/* ===== Dropdown ===== */
.dropdown { position:relative; }
.dropdown > summary { list-style:none; cursor:pointer; display:flex; border-radius:50%; }
.dropdown > summary::-webkit-details-marker { display:none; }
.dropdown-menu { position:absolute; inset-inline-end:0; top:calc(100% + 6px); min-width:200px; padding:8px 0; background:var(--bgColor-default); border:1px solid var(--borderColor-default); border-radius:12px; box-shadow:var(--shadow-overlay); z-index:20; }
.dropdown-header { padding:4px 16px 8px; display:flex; flex-direction:column; border-bottom:1px solid var(--borderColor-muted); margin-bottom:8px; }
.dropdown-item { display:flex; align-items:center; gap:8px; width:100%; padding:6px 16px; color:var(--fgColor-default); background:none; border:0; font:inherit; text-align:start; cursor:pointer; }
.dropdown-item .octicon { color:var(--fgColor-muted); }
.dropdown-item:hover { background:var(--bgColor-neutral-muted); text-decoration:none; }
.dropdown-divider { height:1px; margin:8px 0; background:var(--borderColor-muted); }
.dropdown form { margin:0; }

/* ===== Forms ===== */
.form-group { margin-bottom:16px; }
.form-group > label, fieldset legend { display:block; font-weight:600; margin-bottom:6px; }
fieldset { border:0; margin:0; padding:0; min-width:0; }
.form-control { width:100%; height:32px; padding:0 12px; font:14px var(--fontStack-system); color:var(--fgColor-default); background:var(--input-bg); border:1px solid var(--borderColor-default); border-radius:6px; }
textarea.form-control { height:auto; padding:6px 12px; resize:vertical; line-height:1.5; }
.form-control:focus { outline:2px solid var(--focus-outline); outline-offset:-1px; border-color:var(--focus-outline); }
.form-control.is-invalid { border-color:var(--fgColor-danger); }
.form-select { appearance:auto; padding-inline-end:8px; }
.form-control.input-sm { height:28px; font-size:12px; }
.note { margin-top:6px; font-size:12px; color:var(--fgColor-muted); }
.note.error { color:var(--fgColor-danger); }
.check-list { display:flex; flex-wrap:wrap; gap:8px; }
.check { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border:1px solid var(--borderColor-default); border-radius:6px; cursor:pointer; background:var(--bgColor-default); font-weight:400; }
.check:has(input:checked) { border-color:var(--focus-outline); background:var(--bgColor-accent-muted); }
.check input { margin:0; accent-color:var(--bgColor-accent-emphasis); }
.check-row { display:flex; gap:8px; align-items:flex-start; padding:8px 0; cursor:pointer; }
.check-row input { margin-top:4px; accent-color:var(--bgColor-accent-emphasis); }
.form-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:543px){ .form-grid{ grid-template-columns:1fr; } }

/* ===== Flash ===== */
.flash-stack { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.flash { padding:12px 16px; border:1px solid var(--borderColor-accent-muted); background:var(--bgColor-accent-muted); border-radius:6px; display:flex; gap:8px; align-items:flex-start; }
.flash .octicon { color:var(--fgColor-accent); margin-top:2px; }
.flash-success { border-color:var(--borderColor-success-muted); background:var(--bgColor-success-muted); }
.flash-success .octicon { color:var(--fgColor-success); }
.flash-warn { border-color:var(--borderColor-attention-muted); background:var(--bgColor-attention-muted); }
.flash-warn .octicon { color:var(--fgColor-attention); }
.flash-error { border-color:var(--borderColor-danger-muted); background:var(--bgColor-danger-muted); }
.flash-error .octicon { color:var(--fgColor-danger); }

/* ===== Auth pages (زي صفحة دخول GitHub) ===== */
.auth-top { display:flex; justify-content:flex-end; padding:16px; }
.auth { width:100%; max-width:340px; margin:0 auto; padding:8px 16px 40px; flex:1; }
.auth-wide { max-width:480px; }
.auth-logo { display:flex; justify-content:center; margin-bottom:16px; }
.auth-logo img { width:64px; height:64px; object-fit:contain; }
.auth-heading { font-size:24px; font-weight:300; text-align:center; margin-bottom:16px; letter-spacing:-.5px; }
.auth .Box-body { padding:20px; background:var(--bgColor-muted); border-radius:6px; }
.auth .form-control { background:var(--input-bg); }
.auth-callout { margin-top:16px; padding:16px; text-align:center; border:1px solid var(--borderColor-default); border-radius:6px; }
.auth-footer { text-align:center; padding:24px 16px 40px; font-size:12px; }
.label-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.label-row label { font-weight:600; }
.label-row a { font-size:12px; }

/* ===== Page header / layout ===== */
.page-head { display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; margin-bottom:16px; }
.page-head h1 { font-size:24px; font-weight:400; }
.page-head .actions { margin-inline-start:auto; display:flex; gap:8px; flex-wrap:wrap; }
.Subhead { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-bottom:8px; margin-bottom:16px; border-bottom:1px solid var(--borderColor-muted); }
.Subhead h2 { font-size:20px; font-weight:400; }
.Subhead .actions { margin-inline-start:auto; display:flex; gap:8px; }
.Subhead--danger h2 { color:var(--fgColor-danger); }
.Layout { display:grid; grid-template-columns:296px minmax(0,1fr); gap:24px; }
.Layout--narrow { grid-template-columns:minmax(0,1fr) 296px; }
@media (max-width:767px){ .Layout, .Layout--narrow { grid-template-columns:1fr; } }
.toolbar { display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.toolbar .grow { flex:1; min-width:180px; }
.profile-card { display:flex; flex-direction:column; gap:12px; }
.avatar-form label.btn { position:relative; }
.radio-list { display:flex; flex-direction:column; gap:4px; }
.scope-projects { margin-inline-start:24px; display:flex; flex-wrap:wrap; gap:8px; }
.profile-card .avatar { width:160px; height:160px; }
.profile-card h1 { font-size:24px; line-height:1.25; }
.profile-card .handle { font-size:20px; font-weight:300; color:var(--fgColor-muted); }
.meta-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.meta-list li { display:flex; gap:8px; align-items:center; color:var(--fgColor-muted); }
.meta-list li span { color:var(--fgColor-default); overflow-wrap:anywhere; }
@media (max-width:767px){ .profile-card { flex-direction:row; align-items:center; flex-wrap:wrap; } .profile-card .avatar { width:72px !important; height:72px !important; font-size:32px !important; } }

/* project cards */
.project-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:16px; }
.project-card { display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid var(--borderColor-default); border-radius:6px; }
.project-card h3 { font-size:14px; display:flex; align-items:center; gap:8px; }
.project-card h3 a { font-weight:600; }
.project-card p { color:var(--fgColor-muted); font-size:12px; flex:1; }

/* data table */
.table-wrap { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; }
.data-table th, .data-table td { padding:10px 16px; text-align:start; border-top:1px solid var(--borderColor-muted); vertical-align:middle; }
.data-table th { font-size:12px; font-weight:600; color:var(--fgColor-muted); background:var(--bgColor-muted); border-top:0; border-bottom:1px solid var(--borderColor-default); white-space:nowrap; }
.data-table tbody tr:first-child td { border-top:0; }
.data-table tbody tr:hover { background:var(--row-hover); }
.data-table .user-cell { display:flex; align-items:center; gap:8px; min-width:180px; }
.data-table .user-cell a { font-weight:600; color:var(--fgColor-default); }
.data-table .nowrap { white-space:nowrap; }
.pagination { display:flex; justify-content:center; gap:4px; margin-top:16px; }
.pagination a, .pagination span { min-width:32px; height:32px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; color:var(--fgColor-default); }
.pagination a:hover { background:var(--bgColor-neutral-muted); text-decoration:none; }
.pagination .current { background:var(--bgColor-accent-emphasis); color:#fff; }

/* key/value list */
.kv { display:grid; grid-template-columns:160px minmax(0,1fr); }
.kv dt, .kv dd { margin:0; padding:10px 16px; border-top:1px solid var(--borderColor-muted); }
.kv dt { color:var(--fgColor-muted); }
.kv dt:first-of-type, .kv dt:first-of-type + dd { border-top:0; }
@media (max-width:543px){ .kv{ grid-template-columns:1fr; } .kv dd{ border-top:0; padding-top:0; } }

/* timeline */
.timeline-item { display:flex; gap:12px; padding:8px 16px; border-top:1px solid var(--borderColor-muted); font-size:12px; align-items:center; }
.timeline-item:first-child { border-top:0; }
.timeline-item .when { margin-inline-start:auto; color:var(--fgColor-muted); white-space:nowrap; }

/* ===== Footer ===== */
.footer { border-top:1px solid var(--borderColor-muted); padding:32px 16px 40px; display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; align-items:center; font-size:12px; color:var(--fgColor-muted); }
.footer img { object-fit:contain; opacity:.8; }
.Box--attention { border-color:var(--borderColor-attention-muted); }
.Box--attention .Box-header { background:var(--bgColor-attention-muted); }
.pay-head { display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; }
.pay-total { text-align:left; }
.pay-amount { font-size:28px; font-weight:600; line-height:1.2; }
@media (max-width:600px) { .pay-total { text-align:right; width:100%; } }
.sugg-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; }
.sugg { border:1px solid var(--borderColor-default); border-radius:6px; padding:10px; display:flex; flex-direction:column; gap:4px; background:var(--bgColor-default); }
.link-card .Box-footer form { margin:0; }