@layer theme {
/* EduNex module: theme.
 * Responsibility-based runtime module; changes belong to this module only when they match its ownership contract.
 */

:root{
  --ed-bg:#f5f7fb;
  --ed-bg-alt:#f8fbff;
  --ed-glass-surface:rgba(255,255,255,.86);
  --ed-text-strong:#0f172a;
  --ed-accent-indigo:#4f46e5;
  --ed-accent-violet:#7c3aed;
  --ed-accent-cyan:#06b6d4;
  --ed-accent-pink:#ec4899;
  --ed-accent-green:#10b981;
  --ed-accent-amber:#f59e0b;
  --ed-accent-red:#ef4444;
  --ed-border-subtle:rgba(148,163,184,.24);
  --ed-shadow-elevated:0 22px 70px rgba(15,23,42,.10);
  --ed-shadow-soft:0 12px 36px rgba(15,23,42,.07);
  --ed-sidebar-surface:#08111f;
  --ed-sidebar-surface-alt:#111827;
  --ed-radius-hero:24px;
  --ed-surface:#ffffff;
  --ed-surface-soft:#f8fafc;
  --ed-surface-raised:#f1f5f9;
  --ed-emphasis-surface:#0c1220;
  --ed-border:#d8e0ec;
  --ed-border-strong:#c4cedd;
  --ed-text:#27364a;
  --ed-muted:#64748b;
  --ed-primary:#2457e6;
  --ed-primary-strong:#173fae;
  --ed-primary-soft:#eef3ff;
  --ed-success:#169b63;
  --ed-danger:#e5484d;
  --ed-warning:#d9831f;
  --ed-accent-orange:#ff7a32;
  --ed-radius-card:16px;
  --ed-radius-panel:18px;
  --ed-radius-control:13px;
  --ed-radius-compact:10px;
  --ed-shadow:0 12px 34px rgba(21,31,55,.07);
  --ed-shadow-lg:0 22px 70px rgba(21,31,55,.14);
  --ed-sidebar-width:244px;
  --ed-sidebar-width-wide:278px;
  --ed-sidebar-width-collapsed:84px;
  --ed-commerce-sidebar-width:276px;
  --ed-layout-gap:18px;
  --ed-topbar-height:76px;
  --ed-task-accent:#2457e6;
  --ed-note-accent:#f59e0b;
  --ed-success-surface:#ecfdf3;
  --ed-success-surface-strong:#dcfce7;
  --ed-success-border:#86efac;
  --ed-success-text:#166534;
  --ed-success-accent:#22c55e;
  --ed-danger-surface:#fff1f2;
  --ed-danger-surface-strong:#fee2e2;
  --ed-danger-border:#fca5a5;
  --ed-danger-text:#991b1b;
  --ed-danger-accent:#ef4444;
  --ed-info-surface:#eef4ff;
  --ed-info-border:#cbd9ff;
  --ed-info-text:#2457e6;
  --ed-warning-surface:#fef3c7;
  --ed-warning-border:#fcd34d;
  --ed-warning-text:#92400e;
  --ed-warning-accent:#f59e0b;
  --ed-z-sticky:1000;
  --ed-z-flyout:20000;
  --ed-z-commerce:30000;
  --ed-z-modal:40000;
  --ed-z-picker:42000;
  --ed-z-toast:50000;
}

html.unified-dark,
body.dark-ui{
  --ed-dark-bg:#070d17;
  --ed-dark-surface:#101827;
  --ed-dark-surface-2:#111a2a;
  --ed-dark-surface-3:#172235;
  --ed-dark-hover:#1b2940;
  --ed-dark-border:#334155;
  --ed-dark-border-strong:#42516a;
  --ed-dark-text:#eef4ff;
  --ed-dark-muted:#9fb0c7;
  --ed-dark-primary:#6085ff;
  --ed-dark-danger:#fb7185;
  --ed-dark-success:#4ade80;
  --ed-dark-warning:#fbbf24;
  --ed-text-strong:var(--ed-dark-text);
  
  
  --ed-surface-raised:var(--ed-dark-surface-3);
  
  
  
  --ed-primary:var(--ed-dark-primary);
  
  --ed-primary-strong:#4f6fe0;
  --ed-primary-soft:#1d2d5a;
  --ed-border-strong:var(--ed-dark-border-strong);
  --ed-success:var(--ed-dark-success);
  --ed-danger:var(--ed-dark-danger);
  --ed-warning:var(--ed-dark-warning);
  --ed-emphasis-surface:#1b2940;
  --ed-shadow:0 12px 34px rgba(0,0,0,.22);
  --ed-shadow-lg:0 24px 70px rgba(0,0,0,.38);
  --ed-success-surface:#103323;
  --ed-success-surface-strong:#14532d;
  --ed-success-border:#22c55e;
  --ed-success-text:#dcfce7;
  --ed-success-accent:#4ade80;
  --ed-danger-surface:#3d1820;
  --ed-danger-surface-strong:#7f1d1d;
  --ed-danger-border:#ef4444;
  --ed-danger-text:#fee2e2;
  --ed-danger-accent:#fb7185;
  --ed-info-surface:#172554;
  --ed-info-border:#3b82f6;
  --ed-info-text:#bfdbfe;
  --ed-warning-surface:#3b2a13;
  --ed-warning-border:#854d0e;
  --ed-warning-text:#fcd34d;
  --ed-warning-accent:#fbbf24;
  
  
  
  
  
  
  
  --ed-surface-soft:var(--ed-dark-surface-2);
  
  
  
  --ed-bg:var(--ed-dark-bg);
  --ed-surface:var(--ed-dark-surface);
  --ed-text:var(--ed-dark-text);
  --ed-muted:var(--ed-dark-muted);
  --ed-border:var(--ed-dark-border);
  color-scheme:dark;
}

/* Canonical page/surface hierarchy. */
body.dark-ui,
html.unified-dark body{background:var(--ed-dark-bg);color:var(--ed-dark-text);}
html.unified-dark .unified-platform{background:var(--ed-dark-bg);color:var(--ed-dark-text);}

body.dark-ui :is(.card,.panel-card,.glass-card,.modal-box,.modal-panel,.settings-drawer,.filter-bar,.filter-card,.table-card,.profile-card,.notice-card,.calendar-widget,.wizard-head,.wizard-step>.card,.wizard-nav,.exam-status-card,.exam-navigation-card,.runner-question-card,.question-review-card,.dashboard-ranking-card,.discount-reference-card),
html.unified-dark body :is(.card,.panel-card,.glass-card,.modal-box,.modal-panel,.settings-drawer,.filter-bar,.filter-card,.table-card,.profile-card,.notice-card,.calendar-widget,.wizard-head,.wizard-step>.card,.wizard-nav,.exam-status-card,.exam-navigation-card,.runner-question-card,.question-review-card,.dashboard-ranking-card,.discount-reference-card){
  background:var(--ed-dark-surface);
  color:var(--ed-dark-text);
  border-color:var(--ed-dark-border);
  box-shadow:none;
}

/* Neutral buttons and icon controls: never pure black/white in dark mode. */
body.dark-ui :is(.icon-btn,.bank-icon-action,.analysis-button,.ranking-mode-tabs a,.ranking-period-tabs a,.bank-performance-filters button,.bank-performance-period-tabs button,.discount-switch-tabs button,.summary-tabs button,.jalali-calendar-head button,.question-filter-actions button,.question-quick-row button,.exam-row-actions button,.exam-row-actions a),
html.unified-dark body :is(.icon-btn,.bank-icon-action,.analysis-button,.ranking-mode-tabs a,.ranking-period-tabs a,.bank-performance-filters button,.bank-performance-period-tabs button,.discount-switch-tabs button,.summary-tabs button,.jalali-calendar-head button,.question-filter-actions button,.question-quick-row button,.exam-row-actions button,.exam-row-actions a){
  background:var(--ed-dark-surface-2);
  color:var(--ed-dark-text);
  border-color:var(--ed-dark-border);
  box-shadow:none;
}
body.dark-ui :is(.icon-btn,.bank-icon-action,.analysis-button,.ranking-mode-tabs a,.ranking-period-tabs a,.bank-performance-filters button,.bank-performance-period-tabs button,.discount-switch-tabs button,.summary-tabs button,.jalali-calendar-head button):hover,
html.unified-dark body :is(.icon-btn,.bank-icon-action,.analysis-button,.ranking-mode-tabs a,.ranking-period-tabs a,.bank-performance-filters button,.bank-performance-period-tabs button,.discount-switch-tabs button,.summary-tabs button,.jalali-calendar-head button):hover{
  background:var(--ed-dark-hover);
  color:#fff;
  border-color:var(--ed-dark-border-strong);
}
body.dark-ui :is(.ranking-mode-tabs a.active,.ranking-period-tabs a.active,.bank-performance-filters button.active,.bank-performance-period-tabs button.active,.discount-switch-tabs button.active,.summary-tabs button.active,.bank-icon-action.primary),
html.unified-dark body :is(.ranking-mode-tabs a.active,.ranking-period-tabs a.active,.bank-performance-filters button.active,.bank-performance-period-tabs button.active,.discount-switch-tabs button.active,.summary-tabs button.active,.bank-icon-action.primary){
  background:#2457e6;color:#fff;border-color:#4f7cff
;}

/* Standard .btn neutral variants; semantic colors stay semantic. */
body.dark-ui .btn:not(.primary):not(.success):not(.danger):not(.warning):not(.white),
html.unified-dark body .btn:not(.primary):not(.success):not(.danger):not(.warning):not(.white){
  background:var(--ed-dark-surface-2);color:var(--ed-dark-text);border:1px solid var(--ed-dark-border);box-shadow:none
;}
body.dark-ui .btn.white,html.unified-dark body .btn.white{background:var(--ed-dark-surface-2);color:var(--ed-dark-text);border:1px solid var(--ed-dark-border);}

/* Inputs, selects, file inputs, search/count boxes. */
body.dark-ui :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea,.form-control,.select,.search-box,.selected-count,.live-count-box),
html.unified-dark body :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea,.form-control,.select,.search-box,.selected-count,.live-count-box){
  background:var(--ed-dark-surface-2);color:var(--ed-dark-text);border-color:var(--ed-dark-border);box-shadow:none
;}
body.dark-ui input[type=file]::file-selector-button,html.unified-dark body input[type=file]::file-selector-button{
  background:var(--ed-dark-surface-3);color:var(--ed-dark-text);border:1px solid var(--ed-dark-border);border-radius:9px;padding:7px 10px
;}
body.dark-ui ::placeholder,html.unified-dark body ::placeholder{color:#718198;opacity:1;}

/* Calendar: regular days use surface-2; semantic states retain meaning. */
body.dark-ui .jalali-calendar,
html.unified-dark body .jalali-calendar{background:var(--ed-dark-surface);color:var(--ed-dark-text);border-color:var(--ed-dark-border);}
body.dark-ui .jalali-day,
html.unified-dark body .jalali-day{background:var(--ed-dark-surface-2);color:var(--ed-dark-text);border:1px solid var(--ed-dark-border);box-shadow:none;}
body.dark-ui .jalali-day:hover,html.unified-dark body .jalali-day:hover{background:var(--ed-dark-hover);border-color:var(--ed-dark-border-strong);}
body.dark-ui .jalali-day.today,html.unified-dark body .jalali-day.today{background:var(--ed-info-surface);color:var(--ed-info-text);border-color:var(--ed-info-border);}
body.dark-ui .jalali-day.holiday,html.unified-dark body .jalali-day.holiday{background:var(--ed-danger-surface);color:var(--ed-danger-text);border-color:var(--ed-danger-border);}
body.dark-ui :is(.jalali-calendar-title select,.jalali-week span),html.unified-dark body :is(.jalali-calendar-title select,.jalali-week span){background:transparent;color:var(--ed-dark-text);border-color:var(--ed-dark-border);}
/* drew arrows in pseudo-elements on top of the actual button glyph. Use the actual glyph only. */
.jalali-calendar-head>[data-j-prev]::before,.jalali-calendar-head>[data-j-next]::before{content:none;display:none;}
.jalali-calendar-head>[data-j-prev],.jalali-calendar-head>[data-j-next]{font-size:15px;line-height:1;font-family:Arial,sans-serif;display:grid;place-items:center;text-align:center;}

/* Dashboard charts and ranking controls. */
body.dark-ui :is(.bank-performance-chart,.chart-placeholder,.weekly-bars,.monthly-bars,.yearly-bars,.smart-chart),
html.unified-dark body :is(.bank-performance-chart,.chart-placeholder,.weekly-bars,.monthly-bars,.yearly-bars,.smart-chart){
  background:var(--ed-dark-surface-2);color:var(--ed-dark-text);border-color:var(--ed-dark-border)
;}
body.dark-ui .bank-performance-chart,html.unified-dark body .bank-performance-chart{
  background:repeating-linear-gradient(to top,var(--ed-dark-surface-2) 0,var(--ed-dark-surface-2) 65px,#26344a 66px,#26344a 67px)
;}
body.dark-ui :is(.bank-performance-period,.bank-performance-legend,.bank-performance-period small,.bank-perf-column>small),
html.unified-dark body :is(.bank-performance-period,.bank-performance-legend,.bank-performance-period small,.bank-perf-column>small){color:var(--ed-dark-muted);}

/* Exam list three-dot menu: same neutral surface; active row is lifted above the next card. */
.bank-exam-row{overflow:visible;}
body.dark-ui .bank-exam-menu,html.unified-dark body .bank-exam-menu{
  background:var(--ed-dark-surface-2);color:var(--ed-dark-text);border-color:var(--ed-dark-border);box-shadow:0 18px 44px rgba(0,0,0,.38)
;}
body.dark-ui .bank-exam-menu button,html.unified-dark body .bank-exam-menu button{
  background:transparent;color:var(--ed-dark-text);border:0
;}
body.dark-ui .bank-exam-menu button:hover,html.unified-dark body .bank-exam-menu button:hover{background:var(--ed-dark-hover);}
body.dark-ui .bank-exam-menu button.danger,html.unified-dark body .bank-exam-menu button.danger{color:#fda4af;}
@media(max-width:760px){
  .bank-exam-menu{width:min(230px,calc(100vw - 58px));max-height:min(300px,55dvh);overflow:auto;}
}

/* Exam builder and review/checklist surfaces: remove white cards in dark mode. */
body.dark-ui :is(.mode-cards label,.pro-checklist li,.pick-card,.chapter-item,.preview-panel,.preview-line,.switch-line,.difficulty-picker label,.bank-detail-box,.bank-label-create,.unfinished-exam-list article),
html.unified-dark body :is(.mode-cards label,.pro-checklist li,.pick-card,.chapter-item,.preview-panel,.preview-line,.switch-line,.difficulty-picker label,.bank-detail-box,.bank-label-create,.unfinished-exam-list article){
  background:var(--ed-dark-surface-2);color:var(--ed-dark-text);border-color:var(--ed-dark-border)
;}
body.dark-ui :is(.mode-cards label small,.pick-card small,.chapter-item small,.pro-checklist li,.preview-line span,.bank-detail-box p),
html.unified-dark body :is(.mode-cards label small,.pick-card small,.chapter-item small,.pro-checklist li,.preview-line span,.bank-detail-box p){color:var(--ed-dark-muted);}

/* Question/exam action labels: no black rectangles behind text. */
body.dark-ui :is(.question-quick-row .plain-action,.question-quick-row button,.plain-action,.runner-question-card .question-action,.question-review-card .question-action),
html.unified-dark body :is(.question-quick-row .plain-action,.question-quick-row button,.plain-action,.runner-question-card .question-action,.question-review-card .question-action){background:transparent;color:var(--ed-dark-text);box-shadow:none;}

/* Shared cart, notification and small destructive icons. */
body.dark-ui :is(.cart-dropdown,.notif-dropdown),html.unified-dark body :is(.cart-dropdown,.notif-dropdown){background:var(--ed-dark-surface);color:var(--ed-dark-text);border-color:var(--ed-dark-border);}
body.dark-ui .cart-mini-item,html.unified-dark body .cart-mini-item{background:var(--ed-dark-surface-2);border:1px solid var(--ed-dark-border);}
body.dark-ui :is(.cart-mini-item button,.cart-page-row>.icon-btn.danger),html.unified-dark body :is(.cart-mini-item button,.cart-page-row>.icon-btn.danger){background:transparent;color:var(--ed-dark-danger);border-color:transparent;box-shadow:none;}
body.dark-ui .notif-dropdown .notif-item,html.unified-dark body .notif-dropdown .notif-item{background:var(--ed-dark-surface-2);color:var(--ed-dark-text);border-color:var(--ed-dark-border);}
body.dark-ui .modal-close,html.unified-dark body .modal-close{background:var(--ed-dark-surface-2);color:var(--ed-dark-text,#eef4ff);-webkit-text-fill-color:currentColor;border-color:var(--ed-dark-border-strong);box-shadow:none;opacity:1;}
body.dark-ui .modal-close:hover,html.unified-dark body .modal-close:hover{background:var(--ed-dark-hover);color:#fff;border-color:var(--ed-dark-border-strong);}

/* Unified admin platform: remove all white helper/code/file/control islands. */
html.unified-dark .unified-platform :is(.up-card,.up-note,.up-review-card,.up-setting-item,.up-switch-row,.up-table-wrap,.up-kv>div,.up-modal-help,.up-empty,.up-file-picker,.review-count-chip,.review-compact-list article,.review-batch-item,.review-version-list article,.review-modal-panel,.up-mind-node){
  background:var(--ed-dark-surface);color:var(--ed-dark-text);border-color:var(--ed-dark-border);box-shadow:none
;}
html.unified-dark .unified-platform :is(.up-btn.secondary,.up-tabs a,.up-icon-action,.up-icon-btn,.up-row-icon-action,.review-modal-close,.review-modal-tabs button){
  background:var(--ed-dark-surface-2);color:var(--ed-dark-text);border-color:var(--ed-dark-border);box-shadow:none
;}
html.unified-dark .unified-platform :is(.up-btn.secondary,.up-tabs a,.up-icon-action,.up-icon-btn,.up-row-icon-action):hover{background:var(--ed-dark-hover);border-color:var(--ed-dark-border-strong);color:#fff;}
html.unified-dark .unified-platform :is(.up-form input:not([type=checkbox]):not([type=radio]):not([type=color]),.up-form select,.up-form textarea,.education-manage-filter input,.education-manage-filter select,.review-filter-grid input,.review-filter-grid select,.review-modal-form input,.review-modal-form select,.review-modal-form textarea){
  background:var(--ed-dark-surface-2);color:var(--ed-dark-text);border-color:var(--ed-dark-border)
;}
html.unified-dark .unified-platform :is(.up-card code,.up-modal-help code,.up-help code,.up-note-body code,.up-setting-copy code,code){
  background:var(--ed-dark-surface-3);color:#c7d2fe;border:1px solid var(--ed-dark-border);border-radius:6px;padding:2px 6px;box-shadow:none
;}
html.unified-dark .unified-platform :is(.up-help,.up-modal-help,.up-form label,.up-file-label,.review-version-list small,.review-compact-list small,.review-batch-item span){color:var(--ed-dark-muted);}
html.unified-dark .unified-platform .up-table th{background:var(--ed-dark-surface-2);color:var(--ed-dark-text);border-color:var(--ed-dark-border);}
html.unified-dark .unified-platform .up-table td{background:transparent;color:var(--ed-dark-text);border-color:var(--ed-dark-border);}
html.unified-dark .unified-platform input[type=file]::file-selector-button{background:var(--ed-dark-surface-3);color:var(--ed-dark-text);border-color:var(--ed-dark-border);}

/* Semantic badges keep meaning while staying dark-compatible. */
body.dark-ui :is(.bank-exam-status.completed,.badge.success,.up-badge.success),html.unified-dark body :is(.bank-exam-status.completed,.badge.success){background:#123b2b;color:#86efac;border-color:#166534;}
body.dark-ui :is(.bank-exam-status.in_progress,.badge.warning),html.unified-dark body :is(.bank-exam-status.in_progress,.badge.warning){background:#3b2a13;color:#fcd34d;border-color:#854d0e;}
body.dark-ui :is(.bank-exam-status.pending,.badge.info),html.unified-dark body :is(.bank-exam-status.pending,.badge.info){background:#172554;color:#bfdbfe;border-color:#1d4ed8;}
body.dark-ui :is(.bank-exam-status.suspended,.badge.danger),html.unified-dark body :is(.bank-exam-status.suspended,.badge.danger){background:#3f171d;color:#fda4af;border-color:#7f1d1d;}
html.unified-dark .unified-platform .up-badge.success{background:#123b2b;color:#86efac;}
html.unified-dark .unified-platform .up-badge.warning{background:#3b2a13;color:#fcd34d;}
html.unified-dark .unified-platform .up-badge.danger{background:#3f171d;color:#fda4af;}
html.unified-dark .unified-platform .up-badge.info{background:#172554;color:#bfdbfe;}

/* Ensure content/menu overlays are above later cards and never clipped by dashboard sections. */
.bank-exams-card,.bank-exam-list,.dashboard-exam-list{overflow:visible;}

/* Mobile dark controls remain compact and coherent. */
@media(max-width:760px){
  body.dark-ui :is(.bank-performance-filters button,.bank-performance-period-tabs button,.ranking-mode-tabs a,.ranking-period-tabs a),
  html.unified-dark body :is(.bank-performance-filters button,.bank-performance-period-tabs button,.ranking-mode-tabs a,.ranking-period-tabs a){
    min-height:38px;border-radius:10px
  ;}
  html.unified-dark .unified-platform .up-modal-help{overflow-wrap:anywhere;word-break:normal;}
  html.unified-dark .unified-platform .up-modal-help code{max-width:100%;overflow-wrap:anywhere;word-break:break-word;white-space:normal;}
}
html.unified-dark .unified-platform .rank-settings-tabs,html.unified-dark .unified-platform .rank-settings-tabs a,body.dark-ui .unified-platform .rank-settings-tabs,body.dark-ui .unified-platform .rank-settings-tabs a{background:transparent!important;box-shadow:none!important}

/* Final dark-theme typography/state guardrail. Neutral button painting stays component-scoped. */
body.dark-ui :is(h1,h2,h3,h4,h5,h6,.panel-title h2,.panel-title h3,.section-head h3),
html.unified-dark body :is(h1,h2,h3,h4,h5,h6,.panel-title h2,.panel-title h3,.section-head h3){color:var(--ed-dark-text);}

body.dark-ui :is(.btn.primary,button.primary),html.unified-dark body :is(.btn.primary,button.primary){background:#2457e6;color:#fff;border-color:#4f7cff;}
body.dark-ui :is(.btn.success,button.success),html.unified-dark body :is(.btn.success,button.success){background:#166534;color:#dcfce7;border-color:#22c55e;}
body.dark-ui :is(.btn.danger,button.danger),html.unified-dark body :is(.btn.danger,button.danger){background:#3f171d;color:#fda4af;border-color:#7f1d1d;}
body.dark-ui :is(.btn.warning,button.warning),html.unified-dark body :is(.btn.warning,button.warning){background:#3b2a13;color:#fcd34d;border-color:#854d0e;}
/* Icon-only delete buttons stay visually light, not black blocks. */
body.dark-ui :is(.cart-mini-item button,.icon-btn.danger,.up-icon-btn.danger,.up-row-icon-action.danger),html.unified-dark body :is(.cart-mini-item button,.icon-btn.danger),html.unified-dark body :is(.cart-mini-item button,.icon-btn.danger,.up-icon-btn.danger,.up-row-icon-action.danger){background:transparent;color:var(--ed-dark-danger);border-color:transparent;}
/* Exam question navigation owns its semantic states; global theme rules must not repaint them. */
body.dark-ui .question-nav button,html.unified-dark body .question-nav button{background:var(--ed-surface-soft);color:var(--ed-text);border-color:var(--ed-border);}
body.dark-ui .question-nav button:hover,html.unified-dark body .question-nav button:hover{background:var(--ed-info-surface);color:var(--ed-info-text);border-color:var(--ed-info-border);}
body.dark-ui .question-nav button:is(.current,.active),html.unified-dark body .question-nav button:is(.current,.active){background:var(--ed-primary);color:#fff;border-color:var(--ed-primary);}
body.dark-ui .question-nav button.answered:not(.current):not(.active),html.unified-dark body .question-nav button.answered:not(.current):not(.active){background:var(--ed-success-surface);color:var(--ed-success-text);border-color:var(--ed-success-border);}
body.dark-ui .question-nav button.flagged:not(.current):not(.active),html.unified-dark body .question-nav button.flagged:not(.current):not(.active){box-shadow:inset 0 0 0 2px var(--ed-warning-accent);}

/* Canonical metric-card and dark-typography contract. Kept at the end of the
   final theme layer so legacy module/mobile rules cannot restore tall cards. */
.unified-platform .up-grid>.up-stat{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;align-content:center!important;align-self:start!important;
  gap:8px 14px!important;height:auto!important;min-height:72px!important;text-align:start!important
}
.unified-platform .up-grid>.up-stat>span{grid-column:1!important;grid-row:1!important;min-width:0;text-align:start!important}
.unified-platform .up-grid>.up-stat>strong{grid-column:2!important;grid-row:1!important;justify-self:end!important;margin:0!important;text-align:end!important}
.unified-platform .up-grid>.up-stat>small,.unified-platform .up-grid>.up-stat>.delta{grid-column:1/-1!important;grid-row:auto!important}
.unified-platform :is(.up-kv>div,.metric-box,.staff-kpi),
.unified-platform :is(.access-plan-meta,.subscription-meta-grid)>div{
  display:flex!important;flex-direction:row!important;align-items:center!important;
  justify-content:space-between!important;gap:10px!important;height:auto!important;text-align:start!important
}
.unified-platform :is(.up-kv>div,.metric-box,.staff-kpi)>:is(small,span),
.unified-platform :is(.access-plan-meta,.subscription-meta-grid)>div>small{min-width:0!important;margin:0!important;text-align:start!important}
.unified-platform :is(.up-kv>div,.metric-box,.staff-kpi)>:is(b,strong),
.unified-platform :is(.access-plan-meta,.subscription-meta-grid)>div>b{flex:0 0 auto!important;margin:0!important;text-align:end!important}
.unified-platform :is(.monitor-stat-card,.commerce-order-kpi,.subscription-stat-card){
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;align-content:center!important;gap:7px 14px!important;
  height:auto!important;min-height:72px!important;text-align:start!important
}
.unified-platform :is(.monitor-stat-card,.commerce-order-kpi,.subscription-stat-card)>span{
  grid-column:1!important;grid-row:1!important;min-width:0;text-align:start!important
}
.unified-platform :is(.monitor-stat-card,.commerce-order-kpi,.subscription-stat-card)>strong{
  grid-column:2!important;grid-row:1!important;justify-self:end!important;margin:0!important;text-align:end!important
}
.unified-platform :is(.monitor-stat-card,.commerce-order-kpi,.subscription-stat-card)>small{
  grid-column:1/-1!important;grid-row:2!important;margin:0!important;text-align:start!important
}
.unified-platform .instructor-dashboard-stat{
  display:flex!important;flex-direction:row!important;align-items:center!important;
  justify-content:flex-start!important;gap:11px!important;height:auto!important;min-height:72px!important;text-align:start!important
}
.unified-platform .instructor-dashboard-stat>div{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;min-width:0!important;flex:1!important}
.unified-platform .instructor-dashboard-stat>div>small{order:1!important;margin:0!important;text-align:start!important}
.unified-platform .instructor-dashboard-stat>div>b{order:2!important;flex:0 0 auto!important;margin:0!important;text-align:end!important}
html.unified-dark .unified-platform :is(.access-plan-card,.subscription-plan-card) :is(h2,h3,h4,strong,b),
body.dark-ui .unified-platform :is(.access-plan-card,.subscription-plan-card) :is(h2,h3,h4,strong,b){color:var(--ed-dark-text,#eef4ff)!important;-webkit-text-fill-color:var(--ed-dark-text,#eef4ff)!important}
html.unified-dark .unified-platform :is(.access-plan-meta,.subscription-meta-grid)>div>small,
body.dark-ui .unified-platform :is(.access-plan-meta,.subscription-meta-grid)>div>small{color:var(--ed-dark-muted,#9fb0c7)!important}
html.unified-dark .unified-platform :is(.up-card,.up-kv>div,.metric-box,.staff-kpi)>:is(h1,h2,h3,h4,h5,h6,strong,b),
body.dark-ui .unified-platform :is(.up-card,.up-kv>div,.metric-box,.staff-kpi)>:is(h1,h2,h3,h4,h5,h6,strong,b){color:var(--ed-dark-text,#eef4ff)}

/* Cards of different heights must not stretch to the tallest sibling of their row. */
.unified-platform .up-grid{align-items:start}

/* `.up-form-grid` defaults to four columns. Views that ask for `cols-2`/`cols-3` had no
   matching rule at all, so half-width settings cards rendered four cramped columns. */
.unified-platform .up-form-grid.cols-1{grid-template-columns:minmax(0,1fr)}
.unified-platform .up-form-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.unified-platform .up-form-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1200px){.unified-platform .up-form-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.unified-platform .up-form-grid.cols-2,.unified-platform .up-form-grid.cols-3{grid-template-columns:minmax(0,1fr)}}

/* Registration fields sit beside the language/SSO/AI card instead of spanning the page.
   An expanded field still needs the full card width for its own form grid. */
.unified-platform .registration-fields-card .settings-repeater{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.unified-platform .registration-fields-card .settings-repeater-item[open]{grid-column:1/-1}
@media(max-width:1100px){.unified-platform .registration-fields-card .settings-repeater{grid-template-columns:minmax(0,1fr)}}

/* The base stylesheet pins `body{direction:rtl}`, which outranked the document `dir`
   attribute, so switching the interface to English only re-aligned text while the whole
   shell — sidebar included — stayed right-to-left. Let `<html dir>` drive the layout, and
   release the component-level RTL pins that exist purely to flip column order on a
   right-to-left page. Persian *content* keeps its own direction. */
html[dir="ltr"] body{direction:ltr}
html[dir="ltr"] :is(.dashboard-reference,.courses-layout,.question-bank-layout,.result-layout,.exam-runner-layout,.profile-layout){direction:ltr}
html[dir="ltr"] :is(.dashboard-reference,.courses-layout,.question-bank-layout,.result-layout,.exam-runner-layout)>*{direction:ltr}
html[dir="ltr"] :is(.ed-live-chat,.ui-tour-card,.public-site-footer,.study-calendar-wrap,.study-side-panel,.education-article-toc,.education-article-content-column){direction:ltr}
html[dir="ltr"] .unified-platform .up-pagination{direction:ltr}
html[dir="ltr"] .unified-platform .up-sidebar{border-left:0;border-right:1px solid var(--ed-border)}

/* Gradebook matrix: compact numeric cells so a wide course still reads like a sheet. */
.unified-platform td.gradebook-cell{padding:5px 6px}
.unified-platform td.gradebook-cell input{width:82px;min-width:82px;text-align:center;padding:5px 6px}

/* Controls that live inside a table cell, an action row or an inline filter form never
   inherited the `.up-form` control look, so they rendered as bare browser inputs. */
.unified-platform :is(.up-table,.up-actions,.up-inline-form) :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]){
  min-height:38px;width:auto;max-width:100%;border:1px solid var(--ed-border,#d0d5dd);border-radius:12px;
  background:var(--ed-surface,#fff);color:var(--ed-text,#101828);padding:6px 11px;font:inherit;font-size:var(--ed-font-md);box-shadow:none;outline:none
}
.unified-platform :is(.up-table,.up-actions,.up-inline-form) :is(input,select,textarea):focus{
  border-color:color-mix(in srgb,var(--ed-primary,#2457e6) 55%,var(--ed-border,#d0d5dd));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ed-primary,#2457e6) 12%,transparent)
}
.unified-platform .up-inline-form :is(input,select){min-height:40px}
.unified-platform .up-table textarea{min-height:70px}
html.unified-dark .unified-platform :is(.up-table,.up-actions,.up-inline-form) :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]){
  background:rgba(12,18,32,.88);color:var(--ed-dark-text,#eef4ff);border-color:var(--ed-dark-border,rgba(255,255,255,.16))
}

/* Online-role legend: the label column used to stretch across the whole panel, which
   stranded every count on the far edge and made the block read as broken. */
.unified-platform .admin-role-legend{max-width:250px;justify-self:start;width:100%}
.unified-platform .admin-role-legend>div{grid-template-columns:10px minmax(0,1fr) auto;gap:9px;padding:3px 0}
.unified-platform .admin-role-legend span{font-size:var(--ed-font-sm)}
.unified-platform .admin-role-legend strong{font-size:var(--ed-font-base);font-variant-numeric:tabular-nums}
@media(max-width:1100px){.unified-platform .admin-role-chart{grid-template-columns:120px minmax(0,1fr)}}

/* Conversation room bar: the action icons belong at the far end of the bar, opposite the
   subject. The element sets `direction:ltr` for its own icon order, and that also made
   `margin-inline-start:auto` resolve to `margin-left`, which in an RTL bar pushed the
   icons back against the title instead of away from it. Pin the physical side per
   document direction so both languages place them correctly. */
.ed-live-chat-roombar{justify-content:space-between}
.ed-live-chat-room-actions{margin-inline-start:0!important;margin-inline-end:0!important;margin-left:0!important;margin-right:0!important}

/* Jalali picker header: month and year belong in the middle column, between the two
   navigation arrows, so the visible month is always obvious. A leftover `order` rule from
   a flex-era layout pushed the title into the narrow arrow column, which collapsed both
   selects down to a bare dropdown marker with no readable month at all. */
.jalali-calendar-head{display:grid!important;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;gap:8px}
.jalali-calendar-head>[data-p-prev],.jalali-calendar-head>[data-j-prev]{order:0!important;grid-column:1;justify-self:start}
.jalali-calendar-head>.jalali-calendar-title{order:0!important;grid-column:2;flex:none!important}
.jalali-calendar-head>[data-p-next],.jalali-calendar-head>[data-j-next]{order:0!important;grid-column:3;justify-self:end}
.jalali-calendar-title{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0}
.jalali-calendar-title select{flex:0 0 auto;width:auto;min-width:96px;height:34px;min-height:34px;padding:4px 10px;border:1px solid var(--ed-border);border-radius:10px;background:var(--ed-info-surface,#f2f5ff);color:var(--ed-info-text,var(--ed-primary));font:inherit;font-weight:800;font-size:var(--ed-font-md);text-align:center;text-align-last:center;cursor:pointer}
.jalali-calendar-title select[data-p-year]{min-width:76px}
@media(max-width:420px){.jalali-calendar-title select{min-width:78px;font-size:var(--ed-font-sm)}.jalali-calendar-title select[data-p-year]{min-width:64px}}

/* Report card: on screen the document sits inside a normal card, and printing drops the
   whole shell so the sheet comes out exactly like the PDF export. */
.unified-platform .report-card-sheet{padding:22px}
.unified-platform .report-card-tile .up-kv{grid-template-columns:repeat(2,minmax(0,1fr))}
.profile-report-cards .profile-report-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.profile-report-cards .profile-report-head h2{margin:0 0 4px}
.profile-report-cards .profile-report-head p{margin:0;color:var(--ed-muted,#667085);font-size:var(--ed-font-sm)}
.profile-report-list{display:grid;gap:9px}
.profile-report-item{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:11px 13px;border:1px solid var(--ed-border,#e4e7ec);border-radius:13px}
.profile-report-item small{display:block;margin-top:3px;color:var(--ed-muted,#667085);font-size:var(--ed-font-xs)}
.profile-report-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media print{
  .unified-platform .up-sidebar,.unified-platform .up-topbar,.unified-platform .up-backdrop,
  .unified-platform .up-page-head .up-actions,.unified-platform .platform-shell-footer,
  .ed-live-chat,[data-live-chat-root],.up-alert{display:none!important}
  .unified-platform .up-shell{display:block!important}
  .unified-platform .up-content{padding:0!important;max-width:none!important}
  .unified-platform .report-card-sheet{border:0!important;box-shadow:none!important;padding:0!important}
}

/* A `<td>` forced to `display:grid` leaves the table's column model, which is what broke
   the alignment of every metric column in the staff performance table. */
.unified-platform td.staff-performance-metric{display:table-cell;min-height:0;text-align:center;white-space:nowrap;vertical-align:middle}
@media(max-width:900px){
  .unified-platform .staff-performance-card .staff-performance-table td.staff-performance-metric{display:flex;align-items:center;justify-content:space-between;gap:7px;text-align:start;white-space:normal}
}
}