.bf-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.25rem;padding-inline:.875rem;border-radius:.5rem;border:1px solid transparent;font-size:.875rem;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .1s}
.bf-btn:active{transform:translateY(1px)}
.bf-btn:disabled,.bf-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}
.bf-btn--sm{height:1.875rem;padding-inline:.625rem;font-size:.8125rem;border-radius:.375rem}
.bf-btn--primary{background:rgb(var(--accent-rgb));color:rgb(var(--bg-rgb));box-shadow:inset 0 1px 0 rgb(255 255 255/.25)}
.bf-btn--primary:hover{background:rgb(var(--accent-hover-rgb))}
.bf-btn--secondary{background:rgb(var(--surface-rgb));border-color:rgb(var(--border-rgb));color:rgb(var(--fg-rgb))}
.bf-btn--secondary:hover{background:rgb(var(--surface-2-rgb))}
.bf-btn--ghost{background:transparent;color:rgb(var(--fg-2-rgb))}
.bf-btn--ghost:hover{background:rgb(var(--fg-rgb)/.05);color:rgb(var(--fg-rgb))}
.bf-btn--danger{background:rgb(var(--danger-rgb));color:rgb(var(--bg-rgb))}
.bf-btn--danger:hover{background:rgb(var(--danger-rgb)/.85)}
.bf-btn--danger-soft{background:rgb(var(--danger-rgb)/.1);color:rgb(var(--danger-rgb))}
.bf-btn--danger-soft:hover{background:rgb(var(--danger-rgb)/.18)}
.bf-btn--icon{width:2rem;height:2rem;padding:0;background:transparent;color:rgb(var(--fg-2-rgb))}
.bf-btn--icon:hover{background:rgb(var(--fg-rgb)/.05);color:rgb(var(--fg-rgb))}
.bf-link{color:rgb(var(--fg-rgb));font-weight:500;cursor:pointer;text-decoration:underline;text-decoration-color:rgb(var(--fg-3-rgb));text-underline-offset:3px}
.bf-link:hover{text-decoration-color:rgb(var(--fg-rgb))}

.bf-input{width:100%;height:2.25rem;padding-inline:.75rem;background:rgb(var(--bg-rgb));border:1px solid rgb(var(--border-rgb));border-radius:.5rem;color:rgb(var(--fg-rgb));font:inherit;font-size:.875rem;transition:border-color .15s,box-shadow .15s}
textarea.bf-input{height:auto;padding-block:.5rem;line-height:1.5}
select.bf-input{cursor:pointer}
.bf-input::placeholder{color:rgb(var(--fg-3-rgb))}
.bf-input:hover{border-color:rgb(var(--fg-3-rgb)/.6)}
.bf-input:focus{outline:none;border-color:rgb(var(--accent-rgb)/.7);box-shadow:0 0 0 3px rgb(var(--accent-rgb)/.15)}
.bf-input:disabled{background:rgb(var(--bg-rgb)/.5);color:rgb(var(--fg-2-rgb));cursor:not-allowed}
.bf-label{display:block;margin-block-end:.375rem;font-size:.75rem;font-weight:500;color:rgb(var(--fg-2-rgb))}
.bf-help{margin-block-start:.375rem;font-size:.75rem;color:rgb(var(--fg-3-rgb))}
.bf-check{inline-size:1rem;block-size:1rem;accent-color:rgb(var(--accent-rgb));cursor:pointer}

.bf-table-wrap{overflow-x:auto}
.bf-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.875rem;color:rgb(var(--fg-rgb))}
.bf-table thead th{padding:.625rem 1rem;text-align:start;font-size:.75rem;font-weight:500;color:rgb(var(--fg-2-rgb));background:rgb(var(--bg-rgb)/.4);border-block-end:1px solid rgb(var(--border-rgb));white-space:nowrap}
.bf-table tbody td{padding:.75rem 1rem;border-block-end:1px solid rgb(var(--border-rgb)/.7);vertical-align:middle}
.bf-table tbody tr:last-child td{border-block-end:0}
.bf-table tbody tr{transition:background-color .12s}
.bf-table tbody tr:hover{background:rgb(var(--fg-rgb)/.025)}
.bf-table .bf-num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.bf-table .bf-date{font-variant-numeric:tabular-nums;white-space:nowrap;color:rgb(var(--fg-2-rgb))}
.bf-table .bf-center{text-align:center}
.bf-table--compact thead th{padding:.5rem .75rem}
.bf-table--compact tbody td{padding:.5rem .75rem}
.bf-table-empty{padding:2.5rem 1rem;text-align:center;font-size:.875rem;color:rgb(var(--fg-2-rgb))}

.bf-badge{display:inline-flex;align-items:center;gap:.375rem;height:1.375rem;padding-inline:.5rem;border-radius:999px;font-size:.75rem;font-weight:500;line-height:1;white-space:nowrap;background:rgb(var(--fg-rgb)/.06);color:rgb(var(--fg-2-rgb));border:1px solid rgb(var(--fg-rgb)/.08)}
/* نقطة الحالة أُلغيت بصرياً عبر الموقع: الشارة نفسها (لونها ونصها) تحمل
   المعنى كاملاً، والنقطة كانت تكراراً زخرفياً له. الكلاس يبقى موجوداً بلا
   أثر حتى لا يحتاج أي من مواضع استخدامه الـ23 إلى تعديل. */
.bf-badge--dot::before{display:none}
.bf-badge--success{background:rgb(var(--success-rgb)/.1);color:rgb(var(--success-rgb));border-color:rgb(var(--success-rgb)/.22)}
.bf-badge--warning{background:rgb(var(--warning-rgb)/.1);color:rgb(var(--warning-rgb));border-color:rgb(var(--warning-rgb)/.22)}
.bf-badge--danger{background:rgb(var(--danger-rgb)/.1);color:rgb(var(--danger-rgb));border-color:rgb(var(--danger-rgb)/.22)}
.bf-badge--accent{background:rgb(var(--accent-rgb)/.12);color:rgb(var(--accent-rgb));border-color:rgb(var(--accent-rgb)/.25)}
.bf-badge--info{background:rgb(var(--info-rgb)/.1);color:rgb(var(--info-rgb));border-color:rgb(var(--info-rgb)/.22)}

.bf-panel{background:rgb(var(--surface-rgb));border:1px solid rgb(var(--border-rgb));border-radius:.75rem}
.bf-inset{background:rgb(var(--bg-rgb));border:1px solid rgb(var(--border-rgb));border-radius:.5rem}

.bf-modal{background:rgb(var(--surface-rgb));border:1px solid rgb(var(--border-rgb));border-radius:1rem;box-shadow:0 32px 64px -16px rgb(0 0 0/.7)}
.bf-modal__header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-block-end:1px solid rgb(var(--border-rgb))}
.bf-modal__title{font-size:.9375rem;font-weight:600;color:rgb(var(--fg-rgb))}
.bf-modal__body{padding:1.25rem}
.bf-modal__footer{display:flex;justify-content:flex-end;gap:.5rem;padding:1rem 1.25rem;border-block-start:1px solid rgb(var(--border-rgb));background:rgb(var(--bg-rgb)/.3)}
.bf-overlay{background:rgb(0 0 0/.6);backdrop-filter:blur(6px)}
.app-modal.flex{animation:bf-fade .18s ease-out}
.app-modal.flex .bf-modal{animation:bf-pop .22s cubic-bezier(.16,1,.3,1)}
@keyframes bf-fade{from{opacity:0}}
@keyframes bf-pop{from{opacity:0;transform:translateY(8px) scale(.98)}}

@media (prefers-reduced-motion:reduce){.bf-btn,.bf-input,.bf-table tbody tr{transition:none}.app-modal.flex,.app-modal.flex .bf-modal{animation:none}}

.settings-tab-btn.is-active{background:rgb(var(--fg-rgb)/.06);color:rgb(var(--fg-rgb))}

/* Chrome renders a date input's text inside a shadow tree (::-webkit-datetime-edit
   and its child fields). Those pseudo-elements carry their own UA declarations, so
   the font-size set on the host .bf-input never reaches them and they fall back to
   the UA control font (16px), which is why a date field reads a size larger than the
   text field beside it. They have to be targeted explicitly. The host rule is
   restated for the same reason. line-height:1 keeps the field text vertically
   centred inside the 2.25rem box, and the padding reset removes Chrome's built-in
   1px band above and below the edit area. */
input[type="date"].bf-input,input[type="time"].bf-input,input[type="datetime-local"].bf-input,input[type="month"].bf-input,input[type="week"].bf-input{font-size:.875rem;line-height:1}
.bf-input::-webkit-datetime-edit,.bf-input::-webkit-datetime-edit-fields-wrapper,.bf-input::-webkit-datetime-edit-text,.bf-input::-webkit-datetime-edit-year-field,.bf-input::-webkit-datetime-edit-month-field,.bf-input::-webkit-datetime-edit-day-field,.bf-input::-webkit-datetime-edit-hour-field,.bf-input::-webkit-datetime-edit-minute-field,.bf-input::-webkit-datetime-edit-ampm-field{font-family:inherit;font-size:inherit;line-height:1;padding:0;color:inherit}
/* the picker glyph ships black, which is invisible on the dark surface */
.bf-input::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer;filter:invert(1)}
.bf-input::-webkit-calendar-picker-indicator:hover{opacity:.9}
.settings-tab-btn.is-active:hover{background:rgb(var(--fg-rgb)/.06)}

.bf-link--danger{color:rgb(var(--danger-rgb))}
.bf-spinner{display:inline-block;inline-size:1rem;block-size:1rem;border:2px solid rgb(var(--fg-rgb)/.15);border-top-color:rgb(var(--accent-rgb));border-radius:50%;animation:bf-spin .7s linear infinite;vertical-align:-.15em}
.bf-spinner--lg{inline-size:1.75rem;block-size:1.75rem;border-width:3px}
@keyframes bf-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bf-spinner{animation-duration:1.6s}}
.bf-chip{display:inline-flex;align-items:center;height:1.875rem;padding-inline:.75rem;border-radius:999px;border:1px solid rgb(var(--border-rgb));background:rgb(var(--bg-rgb));color:rgb(var(--fg-rgb));font-size:.75rem;cursor:pointer;transition:border-color .15s,background-color .15s}
.bf-chip:hover{border-color:rgb(var(--accent-rgb)/.5);background:rgb(var(--accent-rgb)/.05)}
.bf-btn--lg{height:2.75rem;padding-inline:1.25rem;font-size:.9375rem}
.bf-balance{text-wrap:balance}

/* إظهار الأقسام عند أول وصول لها بالتمرير: السكربت يضيف .is-visible مرة واحدة
   لكل قسم ثم يتوقف عن مراقبته. الحالة الابتدائية مُلغاة كاملةً بلا جافاسكربت
   (كتلة <noscript> في index.html) وعند تفضيل تقليل الحركة أدناه. */
.bf-reveal{opacity:0;transform:translateY(8px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.bf-reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.bf-reveal{opacity:1;transform:none;transition:none}}

/* عنوان العرض الكبير (البطل). النسخة العربية أثقل وزناً وبتباعد أسطر أوسع
   وبلا tracking سالب: الحروف العربية متصلة، فتضييق التباعد يشوّه الوصلات،
   والارتفاع 1.02 يقطع النقاط والحركات فوق الحروف وتحتها. */
.bf-display{font-weight:600;letter-spacing:-.035em;line-height:1.02}
:lang(ar) .bf-display{font-weight:600;letter-spacing:0;line-height:1.22}

/* إطار "لقطة الشاشة": سطح داكن بحدّ فاتح شفاف وظل عميق، يُستخدَم لتقديم
   نسخ واجهة لوحة التحكم داخل الصفحات التسويقية. */
.bf-shot{background:rgb(var(--surface-rgb));border:1px solid rgb(255 255 255/.08);border-radius:16px;overflow:hidden;box-shadow:0 40px 80px -20px rgb(0 0 0/.6),inset 0 1px 0 rgb(255 255 255/.06)}