@charset "UTF-8";
/* =====================================================================
   CentersPro — نظام التصميم
   لغة بصرية مؤسسية: لوحة رمادية/كحلية مقيّدة، حدود 1px بدل الظلال،
   زوايا حادة، كثافة معلوماتية عالية، حركة بالكاد تُلاحظ.
   ===================================================================== */

/* ------------------------------ 1. الجذور ------------------------------ */
:root {
    /* الحبر */
    --ink-900: #14202C;
    --ink-700: #33404E;
    --ink-500: #5A6674;
    --ink-400: #7C8794;
    --ink-300: #9AA4B0;

    /* الأسطح */
    --bg:         #EFF1F3;
    --surface:    #FFFFFF;
    --surface-2:  #F7F8F9;
    --surface-3:  #F0F2F4;

    /* الحدود */
    --line:       #DDE1E6;
    --line-2:     #E8EBEE;
    --line-strong:#C4CBD3;

    /* الهوية — كحلي وذهبي وأبيض (ألوان الشعار) */
    --brand:      #17365D;
    --brand-700:  #102843;
    --brand-800:  #0B1D33;
    --brand-600:  #1E4374;
    --brand-100:  #E4EAF1;
    --brand-050:  #F2F5F9;

    --gold:       #B8912E;
    --gold-600:   #9C7A22;
    --gold-400:   #D0AC4E;
    --gold-100:   #F6EFDC;
    --gold-050:   #FBF7EE;

    /* دلالات — مكتومة، تُستخدم بجرعات صغيرة */
    --ok:   #2E6A4C;
    --ok-bg:#EAF1ED;
    --warn: #8A6410;
    --warn-bg:#F5F0E4;
    --bad:  #97302A;
    --bad-bg:#F5EAE9;
    --info: #2A5070;
    --info-bg:#E9EEF3;

    /* المقاييس */
    --r:      3px;
    --r-lg:   4px;
    --sidebar-w: 244px;
    --topbar-h:  56px;

    /* الحركة */
    --t-fast: 110ms cubic-bezier(.4,0,.2,1);
    --t:      170ms cubic-bezier(.4,0,.2,1);

    --shadow-pop: 0 1px 2px rgba(20,32,44,.06), 0 8px 24px rgba(20,32,44,.10);
    --shadow-sm:  0 1px 2px rgba(20,32,44,.05);

    --font: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}

/* ------------------------------ 2. إعادة الضبط ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-900);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.4; letter-spacing: -.1px; }
p  { margin: 0 0 .8em; }
a  { color: var(--brand); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--brand-600); }
img, svg { max-width: 100%; vertical-align: middle; }

/* مقاس افتراضي لكل أيقونات النظام — بدونه تتمدّد لحجم الحاوية */
.ic {
    width: 16px; height: 16px;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: -3px;
}
.ic[width] { width: auto; height: auto; }   /* احترام المقاس الصريح */
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
small { font-size: 12px; }

/* أرقام لاتينية بعرض ثابت داخل الجداول والأرقام */
.num, td.num, .kpi-value, .money, table tbody td { font-variant-numeric: tabular-nums; }

::selection { background: var(--brand-100); color: var(--brand-700); }

/* شريط التمرير */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: #CDD3DA; border: 2px solid var(--surface-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #B5BDC6; }

/* ------------------------------ 3. الهيكل ------------------------------ */
.layout { min-height: 100vh; }

.sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--sidebar-w);
    background: var(--brand-700);
    border-inline-end: 1px solid rgba(255,255,255,.06);
    display: flex;
    flex-direction: column;
    z-index: 40;
}

.sidebar-brand {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex: 0 0 auto;
}
.sidebar-brand .mark {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: var(--r);
    color: #fff; font-weight: 700; font-size: 13px;
    overflow: hidden;
    flex: 0 0 auto;
}
.sidebar-brand .mark img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-brand .txt { min-width: 0; display: flex; flex-direction: column; }
.sidebar-brand .name {
    color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-brand .sub { color: var(--gold-400); font-size: 10px; letter-spacing: .2px; line-height: 1.3; }

/* ---- الشعار ---- */
.brand-mark { display: block; flex: 0 0 auto; }
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; }
.brand-lockup .brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.brand-lockup .brand-title { font-size: 19px; font-weight: 700; letter-spacing: -.2px; }
.brand-lockup .brand-sub { font-size: 11px; font-weight: 500; }

.sidebar-nav { flex: 1 1 auto; overflow-y: auto; padding: 8px 0 24px; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border: 0; }

.nav-group {
    padding: 14px 16px 5px;
    color: rgba(255,255,255,.34);
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .6px;
}

.nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 16px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    border-inline-start: 2px solid transparent;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.nav-link:hover { background: rgba(255,255,255,.055); color: #fff; }
.nav-link.active {
    background: rgba(255,255,255,.09);
    color: #fff; font-weight: 600;
    border-inline-start-color: var(--gold-400);
}
.nav-link .ic { width: 16px; height: 16px; flex: 0 0 auto; opacity: .82; }
.nav-link.active .ic { opacity: 1; }
.nav-link .badge-count {
    margin-inline-start: auto;
    background: rgba(255,255,255,.14);
    color: #fff; font-size: 10.5px;
    padding: 0 5px; border-radius: 2px; min-width: 18px; text-align: center;
}

/* حالة الاشتراك أسفل القائمة الجانبية */
.sidebar-sub {
    flex: 0 0 auto; padding: 11px 16px 13px;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.14);
}
.sidebar-sub .ss-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-sub .ss-plan { color: rgba(255,255,255,.8); font-size: 11.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-sub .ss-days { color: var(--gold-400); font-size: 11.5px; font-weight: 700; flex: 0 0 auto; }
.sidebar-sub .ss-days.warn { color: #E6BE6A; }
.sidebar-sub .ss-days.bad  { color: #E39590; }
.sidebar-sub .ss-meter { height: 4px; background: rgba(255,255,255,.14); border-radius: 2px; overflow: hidden; margin: 7px 0 5px; }
.sidebar-sub .ss-meter > i { display: block; height: 100%; background: var(--gold-400); border-radius: 2px; }
.sidebar-sub .ss-meter > i.warn { background: #E6BE6A; }
.sidebar-sub .ss-meter > i.bad  { background: #E39590; }
.sidebar-sub .ss-date { color: rgba(255,255,255,.38); font-size: 10.5px; }

.main {
    margin-inline-start: var(--sidebar-w);
    min-height: 100vh;
    display: flex; flex-direction: column;
}

.topbar {
    height: var(--topbar-h);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 14px;
    padding: 0 20px;
    position: sticky; top: 0; z-index: 30;
}
.topbar .page-title { font-size: 15px; font-weight: 700; }
.topbar .page-sub  { font-size: 11.5px; color: var(--ink-400); font-weight: 400; }
.topbar .spacer { margin-inline-start: auto; }

.content { padding: 20px; flex: 1 1 auto; max-width: 1560px; width: 100%; }

/* ملاحظة مهمة: لا نستخدم transform هنا إطلاقًا.
   أي transform على .content ينشئ containing block فيجعل العناصر
   position:fixed بداخلها (النوافذ وطبقة التظليل) تتموضع بالنسبة لها
   لا بالنسبة للشاشة. لذلك الحركة بالإزاحة والشفافية فقط. */
.page-enter { animation: pageIn 190ms cubic-bezier(.32,.72,.34,1) both; }
@keyframes pageIn { from { opacity: 0; margin-top: 5px; } to { opacity: 1; margin-top: 0; } }

/* ------------------------------ 4. مسار التنقل والعناوين ------------------------------ */
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-400); margin-bottom: 12px; }
.crumbs a { color: var(--ink-500); }
.crumbs a:hover { color: var(--brand); }
.crumbs .sep { color: var(--ink-300); }

.page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.page-head h1 { font-size: 19px; }
.page-head .desc { color: var(--ink-500); font-size: 12.5px; margin-top: 2px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------ 5. البطاقات واللوحات ------------------------------ */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.panel + .panel { margin-top: 16px; }

.panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.panel-head h2, .panel-head h3 {
    font-size: 13.5px; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
}
.panel-head h2::before, .panel-head h3::before {
    content: ''; width: 3px; height: 13px; background: var(--gold); border-radius: 2px; flex: 0 0 auto;
}
.panel-head.plain h2::before, .panel-head.plain h3::before { display: none; }
.panel-head .hint { font-size: 11.5px; color: var(--ink-400); font-weight: 400; }
.panel-body { padding: 16px; }
.panel-body.tight { padding: 0; }
.panel-foot {
    padding: 11px 16px; border-top: 1px solid var(--line);
    background: var(--surface-2); display: flex; gap: 8px; align-items: center;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ------------------------------ 5.5 ترويسة لوحة المعلومات ------------------------------ */
.dash-hero {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    padding: 16px 18px; margin-bottom: 18px;
    background: var(--brand-700);
    border-radius: var(--r-lg);
    position: relative; overflow: hidden;
}
.dash-hero::after {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 38px 38px; pointer-events: none;
}
.dash-hero > * { position: relative; z-index: 1; }
.dash-hero .dh-greet { color: var(--gold-400); font-size: 11.5px; font-weight: 600; }
.dash-hero .dh-title { color: #fff; font-size: 20px; font-weight: 700; line-height: 1.4; }
.dash-hero .dh-date  { color: rgba(255,255,255,.5); font-size: 11.5px; }

.dash-hero .dh-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.dash-hero .dh-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px; padding: 0 13px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--r);
    color: rgba(255,255,255,.88); font-size: 12.5px; font-weight: 600;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.dash-hero .dh-btn:hover { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.26); }
.dash-hero .dh-btn.primary { background: var(--gold); border-color: var(--gold); color: #fff; }
.dash-hero .dh-btn.primary:hover { background: var(--gold-600); border-color: var(--gold-600); }

/* شرائط التنبيه السريعة */
.alert-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.alert-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px; font-size: 12.5px;
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface); color: var(--ink-700);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.alert-chip strong { font-weight: 700; }
.alert-chip:hover { border-color: var(--ink-300); background: var(--surface-2); }
.alert-chip.warn { border-color: #E3D9BF; background: var(--warn-bg); color: #6B4E0C; }
.alert-chip.bad  { border-color: #E2CBC9; background: var(--bad-bg);  color: #7C2722; }
.alert-chip.info { border-color: #CFDAE4; background: var(--info-bg); color: #244258; }

@media (max-width: 760px) {
    .dash-hero { padding: 13px; gap: 12px; }
    .dash-hero .dh-title { font-size: 16px; }
    .dash-hero .dh-actions { width: 100%; }
    .dash-hero .dh-btn { flex: 1 1 calc(50% - 4px); justify-content: center; height: 34px; font-size: 12px; }
    .alert-chip { width: 100%; font-size: 12px; }
}

/* ------------------------------ 6. مؤشرات الأداء ------------------------------ */
.kpi-row {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-bottom: 16px;
}
.kpi {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 13px 15px;
    position: relative;
    transition: border-color var(--t-fast);
}
.kpi:hover { border-color: var(--line-strong); }
.kpi .kpi-label {
    font-size: 11.5px; color: var(--ink-500); font-weight: 500;
    display: flex; align-items: center; gap: 6px;
}
.kpi .kpi-value {
    font-size: 23px; font-weight: 700; line-height: 1.25;
    margin-top: 3px; letter-spacing: -.4px;
}
.kpi .kpi-value .unit { font-size: 12.5px; font-weight: 500; color: var(--ink-400); margin-inline-start: 3px; }
.kpi .kpi-meta { font-size: 11.5px; color: var(--ink-400); margin-top: 3px; }
.kpi .kpi-meta .up   { color: var(--ok); }
.kpi .kpi-meta .down { color: var(--bad); }

/* ------------------------------ 7. الأزرار ------------------------------ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 34px; padding: 0 13px;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--ink-700);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-300); color: var(--ink-900); }
.btn:active { background: var(--surface-3); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.btn:disabled, .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn .ic { width: 15px; height: 15px; }

.btn-primary {
    background: var(--brand); border-color: var(--brand); color: #fff;
}
.btn-primary:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

.btn-gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-600); border-color: var(--gold-600); color: #fff; }

.btn-danger { color: var(--bad); border-color: #E0C9C7; background: var(--surface); }
.btn-danger:hover { background: var(--bad-bg); border-color: #CDA9A6; color: var(--bad); }

.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-3); border-color: transparent; }

.btn-sm { height: 28px; padding: 0 9px; font-size: 11.5px; }
.btn-lg { height: 40px; padding: 0 20px; font-size: 13.5px; }
.btn-block { width: 100%; }
.btn-icon { width: 30px; padding: 0; }

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-inline-start: -1px; }
.btn-group .btn:first-child { border-start-start-radius: var(--r); border-end-start-radius: var(--r); margin: 0; }
.btn-group .btn:last-child  { border-start-end-radius: var(--r); border-end-end-radius: var(--r); }
.btn-group .btn.active { background: var(--brand-100); border-color: var(--brand); color: var(--brand-700); z-index: 1; }

/* ------------------------------ 8. النماذج ------------------------------ */
.form-grid { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field.full { grid-column: 1 / -1; }

.field label, .form-label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--ink-700); margin-bottom: 5px;
}
.field label .req { color: var(--bad); font-weight: 400; }
.field .help { font-size: 11px; color: var(--ink-400); margin-top: 4px; }
.field .err  { font-size: 11.5px; color: var(--bad); margin-top: 4px; }

.input, .select, .textarea,
input[type="text"], input[type="number"], input[type="password"], input[type="email"],
input[type="date"], input[type="time"], input[type="tel"], input[type="datetime-local"],
input[type="search"], select, textarea {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    font-family: inherit; font-size: 13px; color: var(--ink-900);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    appearance: none;
}
textarea, .textarea { height: auto; min-height: 84px; padding: 8px 10px; line-height: 1.6; resize: vertical; }

select, .select {
    padding-inline-end: 28px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235A6674' d='M6 8.5 2 4.2h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 10px;
}

input:focus, select:focus, textarea:focus, .input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(28,58,87,.09);
}
input::placeholder, textarea::placeholder { color: var(--ink-300); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-3); color: var(--ink-400); cursor: not-allowed; }
input.has-error, select.has-error, textarea.has-error { border-color: #C08D89; }

.input-group { display: flex; }
.input-group .input { border-start-end-radius: 0; border-end-end-radius: 0; }
.input-group .btn   { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: -1px; height: 36px; }

.check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12.5px; user-select: none; }
.check input[type="checkbox"], .check input[type="radio"] {
    width: 15px; height: 15px; margin: 0; accent-color: var(--brand); cursor: pointer; flex: 0 0 auto;
}

.switch { position: relative; display: inline-block; width: 34px; height: 19px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
    position: absolute; inset: 0; background: #C4CBD3; border-radius: 10px;
    transition: background var(--t); cursor: pointer;
}
.switch .track::before {
    content: ''; position: absolute; width: 15px; height: 15px; top: 2px; inset-inline-start: 2px;
    background: #fff; border-radius: 50%; transition: transform var(--t);
}
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::before { transform: translateX(-15px); }
html[dir="ltr"] .switch input:checked + .track::before { transform: translateX(15px); }

/* شريط الفلاتر */
.filters {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end;
    padding: 12px 16px; background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}
.filters .field { margin: 0; min-width: 150px; }
.filters .field label { font-size: 11px; margin-bottom: 3px; color: var(--ink-500); }
.filters input, .filters select { height: 32px; font-size: 12.5px; }
.filters .btn { height: 32px; }
.filters .grow { flex: 1 1 200px; }

/* ------------------------------ 9. الجداول ------------------------------ */
.table-wrap { overflow-x: auto; }

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
table.data thead th {
    background: var(--surface-2);
    color: var(--ink-500);
    font-weight: 600; font-size: 11.5px;
    text-align: start;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    position: sticky; top: 0; z-index: 2;
}
table.data thead th a { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
table.data thead th a:hover { color: var(--brand); }

table.data tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line-2);
    vertical-align: middle;
    color: var(--ink-700);
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background var(--t-fast); }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody td.strong { color: var(--ink-900); font-weight: 600; }
table.data td.actions { white-space: nowrap; text-align: end; }
table.data td.actions .btn { margin-inline-start: 3px; }
table.data .row-num { color: var(--ink-300); font-size: 11.5px; width: 44px; }

table.data.compact tbody td, table.data.compact thead th { padding: 6px 10px; }
table.data.bordered td, table.data.bordered th { border-inline-end: 1px solid var(--line-2); }
table.data.bordered td:last-child, table.data.bordered th:last-child { border-inline-end: 0; }

.empty-state { padding: 46px 20px; text-align: center; color: var(--ink-400); }
.empty-state .title { font-size: 14px; font-weight: 600; color: var(--ink-500); margin-bottom: 4px; }
.empty-state .desc  { font-size: 12.5px; }
.empty-state .btn   { margin-top: 14px; }

/* ------------------------------ 10. الحالات والشارات ------------------------------ */
.tag {
    display: inline-flex; align-items: center; gap: 5px;
    height: 21px; padding: 0 7px;
    font-size: 11px; font-weight: 600;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink-500);
    border-radius: 2px;
    white-space: nowrap;
}
.tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-300); flex: 0 0 auto; }
.tag.no-dot::before { display: none; }

.tag.ok   { color: var(--ok);   background: var(--ok-bg);   border-color: #CFDED6; }
.tag.ok::before   { background: var(--ok); }
.tag.warn { color: var(--warn); background: var(--warn-bg); border-color: #E3D9BF; }
.tag.warn::before { background: var(--warn); }
.tag.bad  { color: var(--bad);  background: var(--bad-bg);  border-color: #E2CBC9; }
.tag.bad::before  { background: var(--bad); }
.tag.info { color: var(--info); background: var(--info-bg); border-color: #CFDAE4; }
.tag.info::before { background: var(--info); }
.tag.gold { color: var(--gold-600); background: var(--gold-100); border-color: #E6D8B4; }
.tag.gold::before { background: var(--gold); }

.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 1px 7px; font-size: 11px;
    border: 1px solid var(--line); border-radius: 2px;
    background: var(--surface); color: var(--ink-500);
}
.chip .dot { width: 7px; height: 7px; border-radius: 1px; flex: 0 0 auto; }

/* ------------------------------ 11. الهوية الشخصية ------------------------------ */
.person { display: flex; align-items: center; gap: 9px; min-width: 0; }
.avatar {
    width: 30px; height: 30px; flex: 0 0 auto;
    border-radius: 2px; object-fit: cover;
    background: var(--brand-100); color: var(--brand-700);
    display: grid; place-items: center;
    font-size: 11.5px; font-weight: 700;
    border: 1px solid var(--line);
    overflow: hidden;
}
.avatar.lg { width: 46px; height: 46px; font-size: 15px; }
.avatar.xl { width: 84px; height: 84px; font-size: 26px; border-radius: var(--r); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.person .meta { min-width: 0; }
.person .nm { font-weight: 600; color: var(--ink-900); font-size: 12.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person .sb { font-size: 11px; color: var(--ink-400); }

/* ------------------------------ 12. القوائم المنسدلة ------------------------------ */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute; inset-inline-end: 0; top: calc(100% + 5px);
    min-width: 190px; padding: 4px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-pop);
    z-index: 60;
    opacity: 0; visibility: hidden; transform: translateY(-3px);
    transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: none; }
.dropdown-menu a, .dropdown-menu button {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 7px 9px; font-size: 12.5px; color: var(--ink-700);
    background: none; border: 0; border-radius: 2px;
    font-family: inherit; text-align: start; cursor: pointer;
    transition: background var(--t-fast);
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--surface-2); color: var(--ink-900); }
.dropdown-menu .sep { height: 1px; background: var(--line); margin: 4px 0; }
.dropdown-menu .danger { color: var(--bad); }
.dropdown-menu .head { padding: 8px 9px 6px; font-size: 11px; color: var(--ink-400); font-weight: 600; }

.user-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px 4px 4px; border: 1px solid transparent; border-radius: var(--r);
    background: none; cursor: pointer; font-family: inherit;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.user-btn:hover { background: var(--surface-2); border-color: var(--line); }
.user-btn .nm { font-size: 12.5px; font-weight: 600; color: var(--ink-900); }
.user-btn .rl { font-size: 10.5px; color: var(--ink-400); }

/* ------------------------------ 13. التنبيهات ------------------------------ */
.alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 13px; margin-bottom: 14px;
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--ink-300);
    border-radius: var(--r);
    background: var(--surface);
    font-size: 12.5px; color: var(--ink-700);
    animation: alertIn 200ms cubic-bezier(.32,.72,.34,1) both;
}
@keyframes alertIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.alert.success { border-inline-start-color: var(--ok);   background: var(--ok-bg);   color: #24503A; }
.alert.error   { border-inline-start-color: var(--bad);  background: var(--bad-bg);  color: #7C2722; }
.alert.warning { border-inline-start-color: var(--warn); background: var(--warn-bg); color: #6B4E0C; }
.alert.info    { border-inline-start-color: var(--info); background: var(--info-bg); color: #244258; }
.alert .close { margin-inline-start: auto; background: none; border: 0; cursor: pointer; color: inherit; opacity: .5; font-size: 16px; line-height: 1; padding: 0 2px; }
.alert .close:hover { opacity: 1; }

.toast-stack { position: fixed; top: 68px; inset-inline-end: 20px; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.toast {
    padding: 10px 13px; font-size: 12.5px;
    background: var(--surface); border: 1px solid var(--line-strong);
    border-inline-start: 3px solid var(--brand);
    border-radius: var(--r); box-shadow: var(--shadow-pop);
    animation: toastIn 200ms cubic-bezier(.32,.72,.34,1) both;
}
.toast.ok  { border-inline-start-color: var(--ok); }
.toast.bad { border-inline-start-color: var(--bad); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ------------------------------ 14. النوافذ المنبثقة ------------------------------ */
.modal-backdrop {
    /* لا نستخدم 100vw/100vh — تشمل عرض شريط التمرير فينزاح التظليل.
       التثبيت بالحواف الأربع هو الصحيح. */
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(11,29,51,.52);
    z-index: 80; display: grid; place-items: center; padding: 20px;
    opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t);
    overscroll-behavior: contain;
}
.modal-backdrop.open { opacity: 1; visibility: visible; }
.modal {
    width: 100%; max-width: 520px; max-height: 88vh; overflow: auto;
    background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
    transform: translateY(-6px) scale(.99); transition: transform var(--t);
}
.modal-backdrop.open .modal { transform: none; }
.modal.wide { max-width: 820px; }
.modal.xl   { max-width: 1080px; }

/* ---- محتوى نوافذ الإضافة والتعديل المحمّلة من الخادم ---- */
.dialog-body { padding: 0; }
.dialog-loading { padding: 46px 20px; text-align: center; color: var(--ink-400); font-size: 12.5px; }

/* عناصر الصفحة الكاملة تُخفى داخل النافذة */
.dialog-body .crumbs,
.dialog-body .page-head { display: none; }

.dialog-body .panel { border: 0; border-radius: 0; }
.dialog-body .panel + .panel { margin-top: 0; border-top: 1px solid var(--line); }
.dialog-body .panel-head { border-radius: 0; }
.dialog-body .panel-foot {
    position: sticky; bottom: 0; z-index: 2;
    border-radius: 0; border-top: 1px solid var(--line);
    background: var(--surface);
}
.dialog-body .panel:last-child .panel-foot { border-bottom: 0; }

/* التخطيط ذو العمودين ينهار داخل النافذة الضيقة */
.dialog-body .grid[style*="300px"],
.dialog-body .grid[style*="320px"],
.dialog-body .grid[style*="340px"] { grid-template-columns: 1fr !important; }
.modal.xl .dialog-body .grid[style*="300px"] { grid-template-columns: 1fr 280px !important; }

@media (max-width: 900px) {
    .modal.xl .dialog-body .grid[style*="300px"] { grid-template-columns: 1fr !important; }
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: 14px; }
.modal-body { padding: 16px; }
.modal-foot { padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2); display: flex; gap: 8px; justify-content: flex-start; }

/* ------------------------------ 15. التبويبات ------------------------------ */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs a, .tabs button {
    padding: 9px 14px; font-size: 12.5px; font-weight: 600;
    color: var(--ink-500); background: none; border: 0;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    cursor: pointer; font-family: inherit; white-space: nowrap;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.tabs a:hover, .tabs button:hover { color: var(--ink-900); }
.tabs a.active, .tabs button.active { color: var(--brand); border-bottom-color: var(--brand); }

/* ------------------------------ 16. الترقيم ------------------------------ */
.pager { display: flex; align-items: center; gap: 4px; padding: 11px 16px; border-top: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.pager .info { font-size: 11.5px; color: var(--ink-400); margin-inline-end: auto; }
.pager a, .pager span.pg {
    min-width: 29px; height: 29px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; color: var(--ink-700);
    border: 1px solid var(--line-strong); border-radius: var(--r);
    background: var(--surface);
    transition: background var(--t-fast), border-color var(--t-fast);
}
.pager a:hover { background: var(--surface-3); }
.pager .current { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.pager .disabled { opacity: .4; pointer-events: none; }

/* ------------------------------ 17. أدوات مساعدة ------------------------------ */
.row      { display: flex; gap: 16px; flex-wrap: wrap; }
.col      { flex: 1 1 0; min-width: 0; }
.grid     { display: grid; gap: 16px; }
.grid-2   { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3   { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4   { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.sp-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flex     { display: flex; gap: 8px; align-items: center; }
.flex-wrap{ flex-wrap: wrap; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.mt-0 { margin-top: 0; }  .mt-8 { margin-top: 8px; }  .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; }
.text-muted { color: var(--ink-400); }
.text-sec   { color: var(--ink-500); }
.text-sm    { font-size: 11.5px; }
.text-end   { text-align: end; }
.text-center{ text-align: center; }
.fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
.mono { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 12px; letter-spacing: -.2px; }
.nowrap { white-space: nowrap; }
.divider-v { width: 1px; height: 22px; background: var(--line); }
.w-100 { width: 100%; }
.hidden { display: none !important; }

.stat-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.stat-line:last-child { border-bottom: 0; }
.stat-line .k { color: var(--ink-500); }
.stat-line .v { font-weight: 600; }

/* بطاقة الاشتراك */
.sub-card {
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface); overflow: hidden;
}
.sub-card .sc-head {
    background: var(--brand-700); color: #fff; padding: 11px 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.sub-card .sc-head .plan { font-size: 13px; font-weight: 700; }
.sub-card .sc-head .days { font-size: 11.5px; color: var(--gold-400); font-weight: 600; }
.sub-card .sc-body { padding: 12px 14px; }
.sub-meter { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; margin: 8px 0 10px; }
.sub-meter > i { display: block; height: 100%; background: var(--gold); border-radius: 3px; transition: width 400ms cubic-bezier(.4,0,.2,1); }
.sub-meter > i.warn { background: var(--warn); }
.sub-meter > i.bad  { background: var(--bad); }

.bar { height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brand); border-radius: 3px; transition: width 400ms cubic-bezier(.4,0,.2,1); }
.bar > i.ok   { background: var(--ok); }
.bar > i.warn { background: var(--warn); }
.bar > i.bad  { background: var(--bad); }

.def-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 12.5px; align-items: baseline; }
.def-list dt { color: var(--ink-400); font-size: 11.5px; }
.def-list dd { margin: 0; font-weight: 600; color: var(--ink-900); }

/* ------------------------------ 18. شاشة الدخول ------------------------------ */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 460px; background: var(--surface); }
.auth-side {
    background: var(--brand-700);
    padding: 48px 56px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
}
.auth-side::after {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 46px 46px;
    pointer-events: none;
}
.auth-side > * { position: relative; z-index: 1; }
.auth-side .logo { display: flex; align-items: center; gap: 11px; color: #fff; }
.auth-side .logo .mark {
    width: 38px; height: 38px; display: grid; place-items: center;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--r); font-weight: 700;
}
.auth-side h2 { color: #fff; font-size: 27px; line-height: 1.5; max-width: 480px; font-weight: 700; }
.auth-side p  { color: rgba(255,255,255,.6); font-size: 13.5px; max-width: 460px; line-height: 1.9; }
.auth-side .facts { display: flex; gap: 34px; flex-wrap: wrap; }
.auth-side .facts .f .n { color: #fff; font-size: 20px; font-weight: 700; }
.auth-side .facts .f .l { color: rgba(255,255,255,.45); font-size: 11.5px; }
.auth-side .foot { color: rgba(255,255,255,.32); font-size: 11.5px; }

.auth-side .as-mid { max-width: 480px; }
.auth-side .as-features { list-style: none; padding: 0; margin: 24px 0 0; }
.auth-side .as-features li {
    display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px;
}
.auth-side .as-features .fx {
    width: 30px; height: 30px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--r); color: var(--gold-400);
}
.auth-side .as-features li > span:last-child { display: flex; flex-direction: column; line-height: 1.6; }
.auth-side .as-features strong { color: #fff; font-size: 12.5px; font-weight: 600; }
.auth-side .as-features span span, .auth-side .as-features li > span:last-child {
    color: rgba(255,255,255,.55); font-size: 11.5px;
}

.auth-form { padding: 48px 52px; display: flex; flex-direction: column; justify-content: center; }
.auth-form .head { margin-bottom: 24px; }
.auth-form .head h1 { font-size: 22px; }
.auth-form .head p  { color: var(--ink-500); font-size: 13px; margin-top: 5px; }
.auth-form .field { margin-bottom: 14px; }
.auth-form input { height: 42px; }

.auth-brand-mobile { display: none; text-align: center; margin-bottom: 24px; }

/* حقل بأيقونة */
.input-icon { position: relative; }
.input-icon > .ic {
    position: absolute; inset-inline-start: 11px; top: 50%; transform: translateY(-50%);
    color: var(--ink-300); pointer-events: none; z-index: 1;
}
.input-icon input { padding-inline-start: 34px; }
.input-icon .pw-toggle {
    position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; cursor: pointer; color: var(--ink-300);
    width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r);
    transition: color var(--t-fast), background var(--t-fast);
}
.input-icon .pw-toggle:hover { color: var(--ink-700); background: var(--surface-2); }
.input-icon .pw-toggle.on { color: var(--brand); }

.auth-links {
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px;
}

/* صندوق النسخة التجريبية */
.trial-box {
    margin-top: 22px; padding: 15px;
    border: 1px solid #E6D8B4; border-radius: var(--r-lg);
    background: var(--gold-050);
}
.trial-box .tb-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-900); }

@media (max-width: 1080px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-side { display: none; }
    .auth-form {
        padding: 32px 22px 40px; min-height: 100vh;
        justify-content: flex-start; max-width: 460px; margin: 0 auto; width: 100%;
    }
    .auth-brand-mobile { display: block; }
    .auth-form .mobile-only { display: block; }
}

@media (max-width: 420px) {
    .auth-form { padding: 24px 16px 32px; }
    .auth-form .head h1 { font-size: 19px; }
    .auth-form input, .auth-form select { height: 44px; font-size: 15px; }   /* يمنع تكبير iOS التلقائي */
    .trial-box { padding: 13px; }
}

/* ------------------------------ 19. شاشة المسح (الحضور) ------------------------------ */
/* مبدّل وضع المسح: حضور / انصراف */
.scan-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.scan-mode .sm-btn {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 14px; cursor: pointer; font-family: inherit; text-align: start;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    color: var(--ink-500);
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.scan-mode .sm-btn span { display: flex; flex-direction: column; line-height: 1.4; }
.scan-mode .sm-btn strong { font-size: 13.5px; font-weight: 700; }
.scan-mode .sm-btn small { font-size: 11px; opacity: .75; }
.scan-mode .sm-btn:hover { border-color: var(--ink-300); background: var(--surface-2); }
.scan-mode .sm-btn.on {
    background: var(--brand); border-color: var(--brand); color: #fff;
}
.scan-mode.out-mode .sm-btn.on { background: var(--gold-600); border-color: var(--gold-600); }

.scan-shell { display: grid; grid-template-columns: 1fr 400px; gap: 16px; align-items: start; }
.scanner-box {
    background: #111820; border: 1px solid #26313D; border-radius: var(--r-lg);
    overflow: hidden; position: relative; aspect-ratio: 4/3;
}
.scanner-box video, .scanner-box canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner-frame {
    position: absolute; inset: 16%;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: var(--r);
    pointer-events: none;
}
.scanner-frame::before, .scanner-frame::after {
    content: ''; position: absolute; inset-inline: -1px; height: 1px;
    background: rgba(255,255,255,.85);
}
.scanner-frame::before { top: 50%; animation: scanLine 2.4s ease-in-out infinite; }
.scanner-frame::after  { display: none; }
@keyframes scanLine { 0%,100% { top: 4%; opacity: .25 } 50% { top: 96%; opacity: .9 } }

.scan-result {
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface); padding: 18px; text-align: center;
    animation: pageIn 170ms cubic-bezier(.32,.72,.34,1) both;
}
.scan-result.ok  { border-color: #BFD3C8; background: var(--ok-bg); }
.scan-result.bad { border-color: #DFC3C0; background: var(--bad-bg); }
.scan-result .who { font-size: 17px; font-weight: 700; margin-top: 8px; }
.scan-result .msg { font-size: 12.5px; color: var(--ink-500); }

.feed-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 12.5px; }
.feed-item:last-child { border-bottom: 0; }
.feed-item .t { margin-inline-start: auto; font-size: 11px; color: var(--ink-400); }

@media (max-width: 1100px) { .scan-shell { grid-template-columns: 1fr; } }

/* ------------------------------ 20. التقويم ------------------------------ */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); border-inline-start: 1px solid var(--line); border-top: 1px solid var(--line); }
.cal .hd {
    background: var(--surface-2); padding: 7px; text-align: center;
    font-size: 11.5px; font-weight: 600; color: var(--ink-500);
    border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cal .cell {
    min-height: 104px; padding: 5px; background: var(--surface);
    border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line);
    transition: background var(--t-fast);
}
.cal .cell:hover { background: var(--surface-2); }
.cal .cell.other { background: var(--surface-3); }
.cal .cell.today { background: var(--brand-050); }
.cal .cell .d { font-size: 11.5px; color: var(--ink-400); margin-bottom: 3px; }
.cal .cell.today .d { color: var(--brand); font-weight: 700; }
.cal .ev {
    display: block; font-size: 10.5px; padding: 2px 5px; margin-bottom: 2px;
    border-radius: 2px; background: var(--brand-100); color: var(--brand-700);
    border-inline-start: 2px solid var(--brand);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background var(--t-fast);
}
.cal .ev:hover { background: #DCE4EB; }

/* ------------------------------ 21. الرسوم البيانية ------------------------------ */
.chart { width: 100%; height: 200px; display: block; }
.chart .grid-line { stroke: var(--line-2); stroke-width: 1; }
.chart .axis-text { fill: var(--ink-400); font-size: 10px; font-family: var(--font); }
.chart .series-bar { fill: var(--brand); transition: fill var(--t-fast); }
.chart .series-bar:hover { fill: var(--brand-600); }
.chart .series-bar.alt { fill: #9FB0BF; }
.chart .series-line { fill: none; stroke: var(--brand); stroke-width: 1.6; }
.chart .series-area { fill: var(--brand); opacity: .07; }
.chart .series-dot  { fill: var(--brand); }

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-500); }
.legend .i { display: flex; align-items: center; gap: 5px; }
.legend .sw { width: 9px; height: 9px; border-radius: 1px; }

/* ------------------------------ 22. كارنيه الطالب والطباعة ------------------------------ */
.id-card {
    width: 320px; border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    background: var(--surface); overflow: hidden;
}
.id-card .hd { background: var(--brand-700); color: #fff; padding: 9px 13px; font-size: 12px; display: flex; justify-content: space-between; align-items: center; }
.id-card .bd { padding: 13px; display: flex; gap: 13px; }
.id-card .qr { width: 96px; height: 96px; flex: 0 0 auto; border: 1px solid var(--line); padding: 3px; background: #fff; }
.id-card .ft { border-top: 1px solid var(--line); padding: 7px 13px; font-size: 10.5px; color: var(--ink-400); text-align: center; }

.receipt { max-width: 420px; margin: 0 auto; font-size: 12.5px; }
.receipt .rc-head { text-align: center; padding-bottom: 12px; border-bottom: 1px dashed var(--line-strong); }
.receipt .rc-head .nm { font-size: 16px; font-weight: 700; }
.receipt table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.receipt table td { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.receipt .total { display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; padding-top: 9px; border-top: 2px solid var(--ink-900); }

/* رأس وتذييل الطباعة الرسميان */
.print-doc, .print-foot { display: none; }

@media print {
    .sidebar, .topbar, .no-print, .filters, .pager, .crumbs,
    .page-head .actions, .mobile-bar, .sidebar-overlay, .modal-backdrop,
    .toast-stack, .tabs, footer { display: none !important; }

    .main { margin: 0 !important; padding-bottom: 0 !important; }
    .content { padding: 0 !important; max-width: none; }
    body { background: #fff; font-size: 11px; }

    /* ---------- الترويسة الرسمية ---------- */
    .print-doc { display: block; margin-bottom: 12px; }
    .print-head {
        display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
    }
    .print-head .ph-brand { display: flex; align-items: flex-start; gap: 11px; }
    .print-head .ph-brand img { width: 52px; height: 52px; object-fit: contain; }
    .print-head .ph-name { font-size: 16px; font-weight: 700; color: #0B1D33; line-height: 1.4; }
    .print-head .ph-sub  { font-size: 9px; color: #5A6674; line-height: 1.65; }

    .print-head .ph-meta { text-align: start; min-width: 232px; }
    .print-head .ph-badge {
        display: inline-block; border: 1px solid #B8912E; color: #8A6410;
        font-size: 9px; font-weight: 700; padding: 1px 9px; border-radius: 2px; margin-bottom: 4px;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .print-head .ph-table { width: 100%; border-collapse: collapse; font-size: 9px; }
    .print-head .ph-table td { padding: 1.5px 0; vertical-align: top; }
    .print-head .ph-table td:first-child { color: #7C8794; width: 74px; }
    .print-head .ph-table td:last-child  { color: #33404E; }
    .print-head .ph-table .strong { font-weight: 700; color: #17365D; font-size: 10.5px; }

    .print-rule {
        height: 3px; margin-top: 8px;
        background: linear-gradient(to left, #0B1D33 0 62%, #B8912E 62% 100%);
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }

    /* ---------- التذييل الرسمي ---------- */
    .print-foot { display: block; margin-top: 18px; break-inside: avoid; }
    .print-foot .pf-signs {
        display: flex; justify-content: space-between; gap: 14px;
        padding-top: 8px; margin-bottom: 8px;
    }
    .print-foot .pf-signs > div { flex: 1; text-align: center; }
    .print-foot .pf-signs span { font-size: 9px; color: #5A6674; display: block; margin-bottom: 22px; }
    .print-foot .pf-signs i { display: block; border-top: 1px solid #8B96A2; margin: 0 10px; }
    .print-foot .pf-note {
        border-top: 1px solid #DDD; padding-top: 5px;
        font-size: 8px; color: #8B96A2; text-align: center;
    }

    .panel { border: 1px solid #CCC; break-inside: auto; margin-bottom: 8px; }
    .panel + .panel { margin-top: 8px; }
    .panel-head { background: #F2F2F2 !important; border-bottom: 1px solid #999;
        -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .panel-head h2::before, .panel-head h3::before { display: none; }
    .panel-foot { background: none; }

    table.data thead th {
        background: #EDEDED !important; color: #000 !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    table.data tbody tr { break-inside: avoid; }
    table.data.stack thead { display: table-header-group !important; }

    .kpi-row { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 6px; }
    .kpi { border: 1px solid #CCC; padding: 7px 9px; break-inside: avoid; }
    .kpi .kpi-value { font-size: 15px; }

    .tag, .chip { border: 1px solid #999 !important; background: none !important; color: #000 !important; }
    .tag::before { display: none; }
    .bar { border: 1px solid #BBB; }
    .bar > i { background: #555 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    .page-enter { animation: none; }
    a[href]::after { content: none !important; }
    a { color: #000 !important; text-decoration: none !important; }

    /* جداول التقارير: تكرار الرأس على كل صفحة ومنع قطع الصفوف */
    table.data { page-break-inside: auto; }
    table.data thead { display: table-header-group; }
    table.data tfoot { display: table-footer-group; }
    table.data tbody tr:nth-child(even) {
        background: #FAFAFA !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    table.data tbody td, table.data thead th { border-color: #C8CDD3 !important; }

    .empty-state { border: 1px dashed #BBB; }
    .desc, .hint { color: #5A6674 !important; }

    @page { margin: 14mm 11mm 12mm; }
}

/* ------------------------------ 22.2 شريط الدخول نيابةً ------------------------------ */
.impersonate-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 8px 20px;
    background: var(--warn-bg); border-bottom: 1px solid #E3D9BF;
    color: #6B4E0C; font-size: 12.5px;
}
.impersonate-bar span { display: flex; align-items: center; gap: 7px; }
.impersonate-bar a {
    color: #6B4E0C; font-weight: 700; text-decoration: underline;
    border: 1px solid #D8C89A; border-radius: var(--r); padding: 3px 10px; text-decoration: none;
    background: rgba(255,255,255,.55);
}
.impersonate-bar a:hover { background: #fff; color: #4E390A; }

/* ------------------------------ 22.3 بوابة ولي الأمر ------------------------------ */
.portal-shell { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }

.portal-bar {
    position: sticky; top: 0; z-index: 30;
    background: var(--brand-700);
    padding: 10px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border-bottom: 2px solid var(--gold);
}
.portal-bar .pb-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.portal-bar .pb-brand img { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
.portal-bar .pb-brand span { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.portal-bar .pb-brand strong {
    color: #fff; font-size: 13.5px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.portal-bar .pb-brand small { color: var(--gold-400); font-size: 10.5px; }
.portal-bar .btn {
    background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.9);
}
.portal-bar .btn:hover { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.3); }

/* اختيار الابن */
.child-switch { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.child-switch a {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px; border-radius: 24px;
    border: 1px solid var(--line-strong); background: var(--surface);
    font-size: 12.5px; font-weight: 600; color: var(--ink-700);
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.child-switch a:hover { border-color: var(--brand); background: var(--brand-050); }
.child-switch a.on { background: var(--brand); border-color: var(--brand); color: #fff; }

@media (max-width: 760px) {
    .portal-bar { padding: 9px 11px; }
    .portal-bar .pb-brand strong { font-size: 12.5px; }
    .portal-bar .btn { padding: 0 8px; }
}

/* ------------------------------ 22.4 منتقي وسيلة الدفع ------------------------------ */
.pay-picker .pp-group {
    font-size: 10.5px; font-weight: 700; color: var(--ink-400);
    margin: 10px 0 5px; letter-spacing: .3px;
}
.pay-picker .pp-group:first-of-type { margin-top: 6px; }
.pay-picker .pp-row { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }

.pay-picker .pp-item {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 9px; cursor: pointer;
    border: 1px solid var(--line-strong); border-radius: var(--r);
    background: var(--surface); color: var(--ink-700);
    font-size: 12px; font-weight: 600;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
    user-select: none;
}
.pay-picker .pp-item input { position: absolute; opacity: 0; pointer-events: none; }
.pay-picker .pp-item:hover { background: var(--surface-2); border-color: var(--ink-300); }
.pay-picker .pp-item.on {
    background: var(--brand-050); border-color: var(--brand); color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand);
}
.pay-picker .pp-ic { display: grid; place-items: center; flex: 0 0 auto; opacity: .8; }
.pay-picker .pp-item.on .pp-ic { opacity: 1; color: var(--gold-600); }
.pay-picker .pp-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
    .pay-picker .pp-row { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------ 22.44 مكافآت المسابقات ------------------------------ */
.reward-list { display: grid; gap: 7px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.reward-item {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 11px; cursor: pointer; user-select: none;
    border: 1px solid var(--line-strong); border-radius: var(--r);
    background: var(--surface);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.reward-item input { position: absolute; opacity: 0; pointer-events: none; }
.reward-item span { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; }
.reward-item strong { font-size: 12.5px; color: var(--ink-900); font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reward-item small { font-size: 11px; color: var(--ink-400); }
.reward-item:hover { border-color: var(--gold); background: var(--gold-050); }
.reward-item.on { border-color: var(--gold); background: var(--gold-100); box-shadow: inset 0 0 0 1px var(--gold); }
.reward-item.on strong { color: var(--gold-600); }

/* ------------------------------ 22.45 أنواع الملاحظات ------------------------------ */
.note-types { display: flex; gap: 6px; flex-wrap: wrap; }
.note-types .nt-item {
    padding: 6px 11px; cursor: pointer; user-select: none;
    border: 1px solid var(--line-strong); border-radius: 20px;
    background: var(--surface); color: var(--ink-500);
    font-size: 12px; font-weight: 600;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.note-types .nt-item input { position: absolute; opacity: 0; pointer-events: none; }
.note-types .nt-item:hover { border-color: var(--ink-300); background: var(--surface-2); }
.note-types .nt-item.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* بطاقة ملاحظة في البوابة وملف الطالب */
.note-card {
    border: 1px solid var(--line); border-inline-start: 3px solid var(--ink-300);
    border-radius: var(--r); background: var(--surface);
    padding: 12px 14px; margin-bottom: 9px;
}
.note-card.ok   { border-inline-start-color: var(--ok); }
.note-card.warn { border-inline-start-color: var(--warn); }
.note-card.bad  { border-inline-start-color: var(--bad); }
.note-card.info { border-inline-start-color: var(--info); }
.note-card .nc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.note-card .nc-title { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.note-card .nc-meta  { margin-inline-start: auto; font-size: 11px; color: var(--ink-400); }
.note-card .nc-body  { font-size: 12.5px; color: var(--ink-700); line-height: 1.75; }
.note-card .nc-stars { color: var(--gold); font-size: 13px; letter-spacing: 1px; }

/* ------------------------------ 22.5 محرّر الصلاحيات ------------------------------ */
.perm-toolbar {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 11px 13px; background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--r-lg);
    margin-bottom: 13px;
}
.perm-counter { margin-inline-start: auto; font-size: 12px; color: var(--ink-500); white-space: nowrap; }
.perm-counter strong { color: var(--brand); font-size: 14px; }

.perm-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }

.perm-mod {
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface); padding: 11px;
    transition: border-color var(--t-fast);
}
.perm-mod.has-any { border-color: var(--brand-100); background: var(--brand-050); }
.perm-mod .pm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.perm-mod .pm-name { font-size: 12.5px; font-weight: 700; color: var(--ink-900); }
.perm-mod .pm-count { font-size: 10.5px; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.perm-mod.has-any .pm-count .on { color: var(--gold-600); font-weight: 700; }

.pm-levels { display: flex; gap: 0; margin-bottom: 7px; }
.pm-levels .lv {
    flex: 1; height: 26px; font-family: inherit; font-size: 11px; font-weight: 600;
    color: var(--ink-500); background: var(--surface);
    border: 1px solid var(--line-strong); margin-inline-start: -1px; cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.pm-levels .lv:first-child { border-start-start-radius: var(--r); border-end-start-radius: var(--r); margin: 0; }
.pm-levels .lv:last-child  { border-start-end-radius: var(--r); border-end-end-radius: var(--r); }
.pm-levels .lv:hover { background: var(--surface-2); color: var(--ink-900); }
.pm-levels .lv.active { background: var(--brand); border-color: var(--brand); color: #fff; z-index: 1; }

.pm-toggle {
    background: none; border: 0; padding: 2px 0; cursor: pointer; font-family: inherit;
    font-size: 11px; color: var(--ink-400); display: flex; align-items: center; gap: 4px;
}
.pm-toggle:hover { color: var(--brand); }
.pm-toggle.open .ic { transform: rotate(-90deg); }
.pm-toggle .ic { transition: transform var(--t-fast); }

.pm-items { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line); }
.pm-items .check { display: flex; padding: 2px 0; }

@media (max-width: 760px) {
    .perm-grid { grid-template-columns: 1fr; }
    .perm-counter { margin-inline-start: 0; }
}

/* ------------------------------ 23. شبكة الأقسام ------------------------------ */
.mod-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.mod-card {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    position: relative;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.mod-card::after {
    content: ''; position: absolute; inset-block: -1px; inset-inline-end: -1px;
    width: 3px; background: var(--gold); border-radius: 0 var(--r-lg) var(--r-lg) 0;
    opacity: 0; transition: opacity var(--t-fast);
}
html[dir="rtl"] .mod-card::after { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.mod-card:hover { border-color: var(--brand); background: var(--brand-050); }
.mod-card:hover::after { opacity: 1; }
.mod-card .ic-box {
    width: 36px; height: 36px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: var(--brand-100); color: var(--brand);
    border-radius: var(--r);
    transition: background var(--t-fast), color var(--t-fast);
}
.mod-card:hover .ic-box { background: var(--brand); color: #fff; }
.mod-card .mod-name { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.mod-card .mod-desc { font-size: 11.5px; color: var(--ink-400); margin-top: 2px; line-height: 1.55; }
.mod-card .mod-count {
    margin-inline-start: auto; font-size: 11px; font-weight: 700;
    color: var(--gold-600); background: var(--gold-100);
    padding: 1px 6px; border-radius: 2px; flex: 0 0 auto;
}
.mod-section-title {
    display: flex; align-items: center; gap: 9px;
    font-size: 12.5px; font-weight: 700; color: var(--ink-700);
    margin: 22px 0 10px;
}
.mod-section-title::before { content: ''; width: 3px; height: 14px; background: var(--gold); border-radius: 2px; }
.mod-section-title:first-child { margin-top: 0; }

/* ------------------------------ 24. الاستجابة ------------------------------ */
.mobile-toggle { display: none; }
.sidebar-overlay { display: none; }
.mobile-only { display: none; }

@media (max-width: 1024px) {
    .sidebar { transform: translateX(100%); transition: transform var(--t); box-shadow: -4px 0 24px rgba(0,0,0,.18); }
    html[dir="ltr"] .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: none; }
    .main { margin-inline-start: 0; }
    .mobile-toggle { display: inline-flex; }
    .sidebar-overlay {
        display: block; position: fixed; inset: 0; background: rgba(11,29,51,.45); z-index: 35;
        opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t);
    }
    .sidebar-overlay.open { opacity: 1; visibility: visible; }
    .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: 1fr; }

    /* الأعمدة الجانبية تنزل تحت المحتوى */
    .grid[style*="320px"], .grid[style*="340px"], .grid[style*="300px"] { grid-template-columns: 1fr !important; }
    .scan-shell { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    :root { --topbar-h: 52px; }

    body { font-size: 13px; }
    .content { padding: 11px; }
    .topbar { padding: 0 11px; gap: 9px; }
    .topbar .page-title { font-size: 13.5px; }

    .page-head { margin-bottom: 12px; gap: 10px; }
    .page-head h1 { font-size: 16px; }
    .page-head .desc { font-size: 11.5px; }
    .page-head .actions { width: 100%; }
    .page-head .actions .btn { flex: 1 1 auto; justify-content: center; }

    .kpi-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .kpi { padding: 10px 11px; }
    .kpi .kpi-label { font-size: 10.5px; }
    .kpi .kpi-value { font-size: 17px; }
    .kpi .kpi-value .unit { font-size: 10.5px; }
    .kpi .kpi-meta { font-size: 10.5px; }

    .panel-body { padding: 12px; }
    .panel-head { padding: 10px 12px; flex-wrap: wrap; }
    .panel-foot { padding: 10px 12px; flex-wrap: wrap; }
    .panel-foot .btn { flex: 1 1 auto; justify-content: center; }

    .filters { padding: 10px 12px; gap: 7px; }
    .filters .field { min-width: 0; flex: 1 1 130px; }
    .filters .btn { flex: 1 1 100%; justify-content: center; }

    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; gap: 11px; }
    .mod-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .mod-card { padding: 11px; flex-direction: column; gap: 8px; }
    .mod-card .mod-count { margin-inline-start: 0; }

    .tabs { gap: 0; }
    .tabs a, .tabs button { padding: 8px 11px; font-size: 12px; }

    .modal { max-width: 100%; max-height: 92vh; }
    .modal-backdrop { padding: 10px; align-items: flex-end; }
    .modal-foot { flex-wrap: wrap; }
    .modal-foot .btn { flex: 1 1 auto; justify-content: center; }

    .pager { padding: 10px 12px; }
    .pager .info { flex: 1 1 100%; margin-bottom: 6px; }

    /* ---- الجداول تتحول إلى بطاقات ---- */
    table.data.stack thead { display: none; }
    table.data.stack, table.data.stack tbody, table.data.stack tr, table.data.stack td { display: block; width: 100%; }
    table.data.stack tr {
        border: 1px solid var(--line); border-radius: var(--r);
        margin-bottom: 8px; padding: 4px 0; background: var(--surface);
    }
    table.data.stack tbody td {
        border: 0; padding: 5px 11px;
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        text-align: start;
    }
    table.data.stack tbody td::before {
        content: attr(data-label);
        font-size: 10.5px; color: var(--ink-400); font-weight: 600;
        flex: 0 0 auto;
    }
    table.data.stack tbody td:empty { display: none; }
    table.data.stack td.actions { justify-content: flex-start; border-top: 1px solid var(--line-2); margin-top: 3px; padding-top: 8px; }
    table.data.stack td.row-num { display: none; }

    .desktop-only { display: none !important; }
    .mobile-only { display: block; }

    /* الشريط العلوي: الصورة فقط بدل الاسم والدور (لها style سطري فتحتاج !important) */
    .user-btn .nm, .user-btn .rl { display: none !important; }
    .user-btn { padding: 3px; gap: 0; }
    .topbar .page-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
    .topbar .page-sub { display: none; }
    .topbar > div:first-of-type + div { min-width: 0; }
}

@media (max-width: 420px) {
    body { font-size: 12.5px; }
    .kpi-row { grid-template-columns: 1fr 1fr; }
    .kpi .kpi-value { font-size: 16px; }
    .mod-grid { grid-template-columns: 1fr; }
    .btn { height: 32px; font-size: 12px; padding: 0 10px; }
    .page-head h1 { font-size: 15px; }
    .auth-form { padding: 26px 16px; }
    .brand-lockup .brand-title { font-size: 16px; }
}

/* شريط تنقل سفلي سريع على الموبايل */
.mobile-bar { display: none; }
@media (max-width: 760px) {
    .mobile-bar {
        display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 45;
        background: var(--surface); border-top: 1px solid var(--line);
        padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
    }
    .mobile-bar a {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 5px 2px; font-size: 10px; color: var(--ink-400); font-weight: 600;
    }
    .mobile-bar a.active { color: var(--brand); }
    .mobile-bar a .ic { width: 19px; height: 19px; }
    .main { padding-bottom: 58px; }
}

/* ------------------------------ 24. تفضيل تقليل الحركة ------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}