/* Bunyan Labs design system 1.4.0 - generated from tokens.json, do not edit. */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-logo:25%;
  --radius-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-1:120ms;
  --dur-2:200ms;
  --z-sticky:10;
  --z-overlay:40;
  --z-modal:50;
  --z-toast:60;
  --font-sans:Cairo, Inter, Arial, system-ui, sans-serif;
  --font-arabic:Cairo, "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --text-display:800 56px/56px var(--font-sans);
  --tracking-display:-0.03em;
  --text-heading-1:800 40px/44px var(--font-sans);
  --tracking-heading-1:-0.025em;
  --text-heading-2:800 28px/34px var(--font-sans);
  --tracking-heading-2:-0.02em;
  --text-heading-3:700 20px/26px var(--font-sans);
  --tracking-heading-3:-0.01em;
  --text-body-lg:400 18px/28px var(--font-sans);
  --tracking-body-lg:0;
  --text-body:400 16px/24px var(--font-sans);
  --tracking-body:0;
  --text-label:600 14px/20px var(--font-sans);
  --tracking-label:0;
  --text-caption:500 12px/16px var(--font-sans);
  --tracking-caption:0.02em;
  --text-ar-heading:800 32px/44px var(--font-arabic);
  --tracking-ar-heading:0;
  --text-ar-body:400 17px/30px var(--font-arabic);
  --tracking-ar-body:0;
  --control-h:44px;
  --control-h-sm:36px;
  --control-px:20px;
  --card-pad:24px;
  --cell-py:12px;
  --section-y:96px;
  --text-base:16px;
  --leading-base:24px;
  --container:1180px;
}
[data-density="compact"]{
  --control-h:36px;
  --control-h-sm:28px;
  --control-px:14px;
  --card-pad:16px;
  --cell-py:8px;
  --section-y:64px;
  --text-base:15px;
  --leading-base:22px;
  --container:1120px;
}
@media (pointer:coarse){[data-density="compact"]{--control-h:44px;--control-h-sm:36px}}
[data-theme="bunyan"]{
  color-scheme:light;
  --bg:#F5F8F7;
  --surface:#FFFFFF;
  --tint:#E0EFEC;
  --ink:#0A2426;
  --muted:#4A6164;
  --line:#CCDCD9;
  --border-strong:var(--muted);
  --brand:#0D7369;
  --on-brand:#FFFFFF;
  --brand-text:#0B6A61;
  --accent:#C59A45;
  --on-accent:#0A2426;
  --accent-text:#7D5C1F;
  --highlight:#7D5C1F;
  --on-highlight:#FFFFFF;
  --danger:#B3261E;
  --on-danger:#FFFFFF;
  --success:#1E6B3C;
  --focus:var(--brand-text);
  --bunyan-ink:#072325;
  --bunyan-paper:#F5F8F7;
  --bunyan-teal:#0D7369;
  --bunyan-teal-light:#2CC5B2;
  --bunyan-burgundy:#7D1D3F;
  --bunyan-rose:#C43A63;
  --bunyan-gold-bright:#C9A45E;
  --bunyan-champagne:#D4B483;
  --bunyan-gold:#7D5C1F;
  --bunyan-sand:#E8DCC4;
  --qatee-forest:#173D34;
  --qatee-deep-forest:#0F2A24;
  --qatee-sand:#F5EBD4;
  --qatee-gold:#D5A53E;
  --qatee-cream:#FFFAF0;
  --clay:#BB5D38;
}
[data-theme="bunyan-dark"]{
  color-scheme:dark;
  --bg:#072325;
  --surface:#0C2F31;
  --tint:#123D3F;
  --ink:#EDF6F4;
  --muted:#A2BFBB;
  --line:#24504E;
  --border-strong:var(--muted);
  --brand:#2CC5B2;
  --on-brand:#05201F;
  --brand-text:#5FD9C8;
  --accent:#C9A45E;
  --on-accent:#072325;
  --accent-text:#D4B483;
  --highlight:#D4B483;
  --on-highlight:#072325;
  --danger:#FF8A80;
  --on-danger:#05201F;
  --success:#7BE0A0;
  --focus:var(--brand-text);
  --bunyan-ink:#072325;
  --bunyan-paper:#F5F8F7;
  --bunyan-teal:#0D7369;
  --bunyan-teal-light:#2CC5B2;
  --bunyan-burgundy:#7D1D3F;
  --bunyan-rose:#C43A63;
  --bunyan-gold-bright:#C9A45E;
  --bunyan-champagne:#D4B483;
  --bunyan-gold:#7D5C1F;
  --bunyan-sand:#E8DCC4;
  --qatee-forest:#173D34;
  --qatee-deep-forest:#0F2A24;
  --qatee-sand:#F5EBD4;
  --qatee-gold:#D5A53E;
  --qatee-cream:#FFFAF0;
  --clay:#BB5D38;
}
[data-theme="qatee"]{
  color-scheme:light;
  --bg:#FFFAF0;
  --surface:#FFFFFF;
  --tint:#F5EBD4;
  --ink:#0F2A24;
  --muted:#53665E;
  --line:#DCCFB0;
  --border-strong:var(--muted);
  --brand:#173D34;
  --on-brand:#FFFAF0;
  --brand-text:#173D34;
  --accent:#D5A53E;
  --on-accent:#0F2A24;
  --accent-text:#7A5712;
  --highlight:#7A5712;
  --on-highlight:#FFFFFF;
  --danger:#A8472A;
  --on-danger:#FFFFFF;
  --success:#1E6B45;
  --focus:var(--brand-text);
  --bunyan-ink:#072325;
  --bunyan-paper:#F5F8F7;
  --bunyan-teal:#0D7369;
  --bunyan-teal-light:#2CC5B2;
  --bunyan-burgundy:#7D1D3F;
  --bunyan-rose:#C43A63;
  --bunyan-gold-bright:#C9A45E;
  --bunyan-champagne:#D4B483;
  --bunyan-gold:#7D5C1F;
  --bunyan-sand:#E8DCC4;
  --qatee-forest:#173D34;
  --qatee-deep-forest:#0F2A24;
  --qatee-sand:#F5EBD4;
  --qatee-gold:#D5A53E;
  --qatee-cream:#FFFAF0;
  --clay:#BB5D38;
}
[data-theme="qatee-dark"]{
  color-scheme:dark;
  --bg:#0F2A24;
  --surface:#173D34;
  --tint:#1F4A3F;
  --ink:#FFFAF0;
  --muted:#B5C4BC;
  --line:#2E5A4E;
  --border-strong:var(--muted);
  --brand:#D5A53E;
  --on-brand:#0F2A24;
  --brand-text:#E4BC5C;
  --accent:#D5A53E;
  --on-accent:#0F2A24;
  --accent-text:#E4BC5C;
  --highlight:#E4BC5C;
  --on-highlight:#0F2A24;
  --danger:#F0A187;
  --on-danger:#171A2B;
  --success:#8FD9AE;
  --focus:var(--brand-text);
  --bunyan-ink:#072325;
  --bunyan-paper:#F5F8F7;
  --bunyan-teal:#0D7369;
  --bunyan-teal-light:#2CC5B2;
  --bunyan-burgundy:#7D1D3F;
  --bunyan-rose:#C43A63;
  --bunyan-gold-bright:#C9A45E;
  --bunyan-champagne:#D4B483;
  --bunyan-gold:#7D5C1F;
  --bunyan-sand:#E8DCC4;
  --qatee-forest:#173D34;
  --qatee-deep-forest:#0F2A24;
  --qatee-sand:#F5EBD4;
  --qatee-gold:#D5A53E;
  --qatee-cream:#FFFAF0;
  --clay:#BB5D38;
}

/* Bunyan Labs design system 1.4.0 */
/* Base: reset and typography. Needs tokens.css and data-theme on <html>. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--text-base)/var(--leading-base) var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:lang(ar){font-family:var(--font-arabic)}
html:lang(ar) body{line-height:1.75}
img,svg,video{max-width:100%;height:auto}
h1,h2,h3,h4,p,dl,dd,figure,blockquote{margin:0}
h1,h2,h3,h4{color:var(--ink);text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--brand-text);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::selection{background:var(--accent);color:var(--on-accent)}
hr{border:0;border-top:1px solid var(--line);margin:0}
code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.875em}
code{background:var(--tint);color:var(--ink);padding:.1em .35em;border-radius:var(--radius-sm)}
pre{background:var(--tint);color:var(--ink);padding:var(--space-4);border-radius:var(--radius-md);overflow:auto;line-height:1.55}
pre code{background:none;padding:0}
kbd{display:inline-block;min-width:1.6em;padding:0 .4em;border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:var(--radius-sm);text-align:center;font-size:.8em;color:var(--ink)}

/* Type styles: one class per tokens.json style */
.bl-display{font:var(--text-display);letter-spacing:var(--tracking-display);font-size:clamp(36px,5.2vw,56px);line-height:1.04}
.bl-h1{font:var(--text-heading-1);letter-spacing:var(--tracking-heading-1);font-size:clamp(30px,3.6vw,40px);line-height:1.1}
.bl-h2{font:var(--text-heading-2);letter-spacing:var(--tracking-heading-2);font-size:clamp(22px,2.4vw,28px);line-height:1.2}
.bl-h3{font:var(--text-heading-3);letter-spacing:var(--tracking-heading-3)}
.bl-lead{font:var(--text-body-lg);color:var(--muted)}
.bl-body{font:var(--text-body)}
.bl-label{font:var(--text-label)}
.bl-caption{font:var(--text-caption);letter-spacing:var(--tracking-caption);color:var(--muted)}
.bl-eyebrow{font:var(--text-label);color:var(--highlight);display:flex;align-items:center;gap:var(--space-2);letter-spacing:.02em}
.bl-eyebrow::before{content:"";width:24px;height:1px;background:currentColor;flex:none}
/* Emphasis inside a headline takes the highlight, not italics */
:is(.bl-display,.bl-h1,.bl-h2) em{font-style:normal;color:var(--highlight)}
.bl-highlight{color:var(--highlight)}
.bl-rule{display:block;width:32px;height:2px;background:var(--highlight);border:0;margin:0}
.bl-muted{color:var(--muted)}
.bl-measure{max-width:65ch}
.bl-num{font-variant-numeric:tabular-nums}
/* Arabic keeps its own face and taller lines at every step */
:lang(ar) :is(.bl-display,.bl-h1,.bl-h2,.bl-h3,.bl-lead,.bl-body,.bl-label,.bl-caption,.bl-eyebrow){font-family:var(--font-arabic);letter-spacing:0}
:lang(ar) :is(.bl-display,.bl-h1,.bl-h2){line-height:1.3}
:lang(ar) .bl-lead{line-height:1.8}

/* Accessibility helpers */
.bl-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bl-skip{position:absolute;inset-inline-start:var(--space-4);top:-100px;z-index:var(--z-toast);background:var(--surface);color:var(--ink);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--line)}
.bl-skip:focus{top:var(--space-3)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Bunyan Labs design system 1.4.0 */
/* Layout primitives. Compose pages from these; no page-specific CSS for spacing. */
.bl-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--space-5)}
@media (max-width:600px){.bl-container{padding-inline:var(--space-4)}}
.bl-section{padding-block:var(--section-y)}
@media (max-width:720px){.bl-section{padding-block:calc(var(--section-y) * .7)}}
.bl-section + .bl-section{border-top:1px solid var(--line)}
.bl-stack{display:flex;flex-direction:column;gap:var(--gap,var(--space-4))}
.bl-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,var(--space-3))}
.bl-grid{display:grid;gap:var(--gap,var(--space-4));grid-template-columns:repeat(auto-fit,minmax(min(var(--min,240px),100%),1fr))}
.bl-split{display:grid;gap:var(--gap,var(--space-6));grid-template-columns:minmax(0,var(--a,1fr)) minmax(0,var(--b,1fr));align-items:var(--align,start)}
@media (max-width:860px){.bl-split{grid-template-columns:1fr}}
.bl-push{margin-inline-start:auto}
.bl-divider{border:0;border-top:1px solid var(--line);margin:0}
/* Section head: eyebrow + title on one side, intro on the other */
.bl-section-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-3) var(--space-6);align-items:end;margin-bottom:var(--space-6)}
.bl-section-head > :last-child:not(:first-child){color:var(--muted)}
@media (max-width:860px){.bl-section-head{grid-template-columns:1fr}}

/* Bunyan Labs design system 1.4.0 */
/* --- alert --- */
/* Inline message. Always says what happened in words; colour is a second signal. */
.bl-alert{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-inline-start:3px solid var(--brand-text);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font-size:14px;line-height:20px}
.bl-alert strong{font-weight:600}
.bl-alert--success{border-inline-start-color:var(--success)}
.bl-alert--danger{border-inline-start-color:var(--danger)}
.bl-alert--warning{border-inline-start-color:var(--clay)}

/* --- badge --- */
.bl-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-2);border-radius:var(--radius-sm);background:var(--tint);color:var(--ink);font:var(--text-caption);letter-spacing:var(--tracking-caption);white-space:nowrap;vertical-align:middle}
:lang(ar) .bl-badge{font-family:var(--font-arabic);letter-spacing:0}
.bl-badge--success{color:var(--success);background:transparent;box-shadow:inset 0 0 0 1px var(--success)}
.bl-badge--danger{color:var(--danger);background:transparent;box-shadow:inset 0 0 0 1px var(--danger)}
.bl-badge--accent{background:var(--accent);color:var(--on-accent)}
.bl-badge--highlight{color:var(--highlight);background:transparent;box-shadow:inset 0 0 0 1px var(--highlight)}
.bl-badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
/* Chips: filters and removable selections */
.bl-chip{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--control-h-sm);padding:0 var(--space-3);border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:transparent;color:var(--ink);font:var(--text-label);font-size:13px;cursor:pointer}
.bl-chip[aria-pressed="true"],.bl-chip[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* --- button --- */
.bl-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-h);padding:0 var(--control-px);border:1px solid transparent;border-radius:var(--radius-md);font:var(--text-label);white-space:nowrap;cursor:pointer;text-decoration:none;transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
:lang(ar) .bl-btn{font-family:var(--font-arabic)}
.bl-btn:hover{text-decoration:none}
.bl-btn--primary{background:var(--brand);color:var(--on-brand)}
.bl-btn--primary:hover{background:color-mix(in srgb,var(--brand) 88%,var(--ink))}
.bl-btn--accent{background:var(--accent);color:var(--on-accent)}
.bl-btn--accent:hover{background:color-mix(in srgb,var(--accent) 88%,var(--on-accent))}
.bl-btn--secondary{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.bl-btn--secondary:hover{border-color:var(--ink)}
.bl-btn--ghost{background:transparent;color:var(--ink)}
.bl-btn--ghost:hover{background:var(--tint)}
.bl-btn--danger{background:var(--danger);color:var(--on-danger)}
.bl-btn--sm{min-height:var(--control-h-sm);padding:0 calc(var(--control-px) * .7);font-size:13px}
.bl-btn--block{display:flex;width:100%}
.bl-btn--icon{padding:0;width:var(--control-h)}
.bl-btn[disabled],.bl-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.bl-btn svg{width:18px;height:18px;flex:none}

/* --- card --- */
.bl-card{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-pad);display:flex;flex-direction:column;gap:var(--space-2)}
.bl-card > h3,.bl-card__title{margin:0;font:var(--text-heading-3);letter-spacing:var(--tracking-heading-3)}
.bl-card > p{margin:0;color:var(--muted)}
.bl-card--tint{background:var(--tint);border-color:transparent}
.bl-card--flat{background:transparent}
.bl-card--link{text-decoration:none;transition:border-color var(--dur-1) var(--ease)}
.bl-card--link:hover{border-color:var(--brand-text)}
/* Panel: one bordered surface split into rows or cells by hairlines */
.bl-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.bl-panel > * + *{border-top:1px solid var(--line)}
.bl-panel__row{padding:var(--card-pad)}
.bl-cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--min,220px),100%),1fr));background:var(--line);gap:1px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.bl-cells > *{background:var(--surface);padding:var(--card-pad)}

/* --- data --- */
/* Description list: label / value rows */
.bl-dl{display:grid;grid-template-columns:max-content 1fr;gap:0;margin:0;font-size:14px;line-height:20px}
.bl-dl > div{display:contents}
.bl-dl dt{color:var(--muted);font-weight:500;padding-block:var(--cell-py);border-bottom:1px solid var(--line)}
.bl-dl dd{margin:0;color:var(--ink);padding-block:var(--cell-py);padding-inline-start:var(--space-4);border-bottom:1px solid var(--line)}
.bl-dl > div:last-child > *{border-bottom:0}
@media (max-width:420px){.bl-dl{grid-template-columns:1fr}.bl-dl dt{border:0;padding-bottom:0}.bl-dl dd{padding-inline-start:0}}
/* Stat: number with a label */
.bl-stat{display:flex;flex-direction:column;gap:2px}
.bl-stat__value{font:800 28px/1.1 var(--font-sans);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.bl-stat__label{font:var(--text-caption);letter-spacing:var(--tracking-caption);color:var(--muted)}
:lang(ar) .bl-stat__label{font-family:var(--font-arabic);letter-spacing:0;font-size:13px}
/* Progress / meter */
.bl-progress{height:6px;border-radius:var(--radius-pill);background:var(--tint);overflow:hidden}
.bl-progress > span{display:block;height:100%;width:var(--value,0%);background:var(--brand);border-radius:inherit}
/* Toolbar: actions above tables and editors */
.bl-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.bl-toolbar__sep{width:1px;align-self:stretch;background:var(--line);margin-inline:var(--space-1)}

/* --- field --- */
.bl-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.bl-field > label,.bl-field__label{font:var(--text-label);color:var(--ink)}
:lang(ar) :is(.bl-field > label,.bl-field__label){font-family:var(--font-arabic)}
.bl-field .bl-optional{color:var(--muted);font-weight:500}
.bl-input,.bl-field :is(input:not([type=checkbox],[type=radio]),select,textarea){width:100%;min-height:var(--control-h);padding:0 var(--space-3);border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font:400 var(--text-base)/var(--leading-base) inherit;font-family:inherit;transition:border-color var(--dur-1) var(--ease)}
.bl-field textarea,textarea.bl-input{padding:var(--space-2) var(--space-3);min-height:calc(var(--control-h) * 2.6);resize:vertical}
.bl-field select,select.bl-input{appearance:none;padding-inline-end:calc(var(--space-3) + 18px);background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-size:5px 5px;background-repeat:no-repeat;background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%}
[dir=rtl] .bl-field select,[dir=rtl] select.bl-input{background-position:18px 50%,13px 50%}
.bl-field :is(input,select,textarea):hover{border-color:var(--ink)}
.bl-field :is(input,select,textarea):focus-visible,.bl-input:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.bl-help{font:var(--text-caption);letter-spacing:var(--tracking-caption);color:var(--muted)}
.bl-field--error :is(input,select,textarea){border:2px solid var(--danger)}
.bl-field--error .bl-help{color:var(--danger)}
/* Checkbox, radio and switch */
.bl-check{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-h-sm);cursor:pointer;color:var(--ink)}
.bl-check input{width:18px;height:18px;margin:0;accent-color:var(--brand)}
.bl-switch{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;color:var(--ink)}
.bl-switch input{appearance:none;margin:0;width:36px;height:20px;border-radius:var(--radius-pill);background:var(--border-strong);position:relative;cursor:pointer;transition:background-color var(--dur-2) var(--ease)}
.bl-switch input::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:transform var(--dur-2) var(--ease)}
.bl-switch input:checked{background:var(--brand)}
.bl-switch input:checked::after{transform:translateX(16px)}
[dir=rtl] .bl-switch input:checked::after{transform:translateX(-16px)}

/* --- modal --- */
/* Works on <dialog class="bl-modal"> (use showModal()) or a div inside .bl-modal-backdrop */
.bl-modal-backdrop{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:color-mix(in srgb,var(--bunyan-ink) 60%,transparent)}
.bl-modal{width:min(100%,480px);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}
dialog.bl-modal{margin:auto;max-height:calc(100dvh - 32px)}
dialog.bl-modal:not([open]){display:none}
dialog.bl-modal::backdrop{background:color-mix(in srgb,var(--bunyan-ink) 60%,transparent)}
.bl-modal h2{font:var(--text-heading-2);letter-spacing:var(--tracking-heading-2)}
.bl-modal p{color:var(--muted)}
.bl-modal-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2)}

/* --- nav --- */
/* Top bar: logo, links, actions. Sticky, hairline bottom edge. */
.bl-topbar{position:sticky;top:0;z-index:var(--z-sticky);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.bl-topbar__in{display:flex;align-items:center;gap:var(--space-5);min-height:calc(var(--control-h) + 20px)}
.bl-topbar__brand{display:flex;align-items:center;flex:none;direction:ltr;color:var(--ink);text-decoration:none}
.bl-topbar__brand svg,.bl-topbar__brand img{height:28px;width:auto;display:block}
.bl-topbar__links{display:flex;gap:var(--space-1);margin-inline-start:auto}
.bl-topbar__links a{display:inline-flex;align-items:center;min-height:var(--control-h-sm);padding:0 var(--space-3);border-radius:var(--radius-md);color:var(--muted);font:var(--text-label);text-decoration:none}
:lang(ar) .bl-topbar__links a{font-family:var(--font-arabic)}
.bl-topbar__links a:hover,.bl-topbar__links a[aria-current]{color:var(--ink);background:var(--tint)}
.bl-topbar__actions{display:flex;align-items:center;gap:var(--space-2)}
.bl-topbar__brand + .bl-topbar__actions{margin-inline-start:auto}
@media (max-width:720px){.bl-topbar__links{display:none}.bl-topbar__actions{margin-inline-start:auto}}
/* Footer */
.bl-footer{border-top:1px solid var(--line);padding-block:var(--space-5);color:var(--muted);font-size:14px}
.bl-footer__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-5)}
.bl-footer a{color:var(--ink);text-decoration:none;font-weight:600}
.bl-footer a:hover{text-decoration:underline}

/* --- table --- */
.bl-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.bl-table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px;color:var(--ink)}
.bl-table caption{text-align:start;padding:var(--cell-py) var(--space-4);font:var(--text-label);font-size:15px}
.bl-table th{text-align:start;padding:var(--cell-py) var(--space-4);font:var(--text-caption);font-weight:600;letter-spacing:var(--tracking-caption);color:var(--muted);background:var(--tint);border-bottom:1px solid var(--line);white-space:nowrap}
.bl-table td{padding:var(--cell-py) var(--space-4);border-bottom:1px solid var(--line);vertical-align:top}
.bl-table tr:last-child td{border-bottom:0}
.bl-table tbody tr:hover td{background:color-mix(in srgb,var(--tint) 50%,transparent)}
.bl-table .bl-num,.bl-table td.num{text-align:end;font-variant-numeric:tabular-nums}
.bl-table--sticky thead th{position:sticky;top:0;z-index:1}

/* --- tabs --- */
.bl-tablist{display:flex;gap:var(--space-1);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.bl-tab{min-height:var(--control-h);padding:0 var(--space-3);background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--muted);font:var(--text-label);cursor:pointer;white-space:nowrap}
:lang(ar) .bl-tab{font-family:var(--font-arabic)}
.bl-tab:hover{color:var(--ink)}
.bl-tab:focus-visible{outline-offset:-2px}
.bl-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brand)}
.bl-tabpanel{padding:var(--space-4) 0}
/* Segmented control: compact tabs inside a box */
.bl-segmented{display:inline-flex;padding:2px;gap:2px;background:var(--tint);border-radius:var(--radius-md)}
.bl-segmented > button{min-height:calc(var(--control-h-sm));padding:0 var(--space-3);border:0;border-radius:calc(var(--radius-md) - 2px);background:transparent;color:var(--muted);font:var(--text-label);font-size:13px;cursor:pointer}
.bl-segmented > [aria-pressed="true"],.bl-segmented > [aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line)}