/* Riwaq v7.3.30 — stable task sync + restrained source accents */

/* My Courses: clear blocks, no artificial numbering and no random palette. */
#coursesPage .student-course-list{
  display:grid!important;
  gap:26px!important;
}
#coursesPage .course-essential-head{
  background:linear-gradient(135deg,var(--course-tint-strong),var(--panel) 72%)!important;
  border-bottom:1px solid color-mix(in srgb,var(--course-tone) 20%,var(--line))!important;
}
#coursesPage .course-essential-fact,
#coursesPage .course-code-badge{box-shadow:none!important}
@media(max-width:760px){
  #coursesPage .student-course-list{gap:20px!important}
  }

/* Tasks v7.3.30: source colour is an accent, not a paint bucket. */
#tasksPage .task-kind-project{--task-accent:#336fe6!important}
#tasksPage .task-kind-course{--task-accent:#0b8f87!important}
#tasksPage .task-kind-general{--task-accent:#c77715!important}
#tasksPage #taskResults>.cards{
  align-items:start!important;
  grid-auto-rows:max-content!important;
  gap:20px!important;
}
#tasksPage .task-source-legend{
  display:flex!important;align-items:center!important;gap:9px!important;flex-wrap:wrap!important;
  margin:-2px 0 14px!important;padding:9px 11px!important;border:1px solid var(--line)!important;
  border-radius:13px!important;background:var(--panel)!important;color:var(--muted)!important;
  font-size:calc(.78rem * var(--font-scale))!important;font-weight:800!important;
}
#tasksPage .task-source-legend span{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;background:var(--panel2)}
#tasksPage .task-source-legend i{width:8px;height:8px;border-radius:50%;display:block}
#tasksPage .task-source-legend .project i{background:#336fe6}
#tasksPage .task-source-legend .course i{background:#0b8f87}
#tasksPage .task-source-legend .general i{background:#c77715}
#tasksPage .task-source-legend em{font-style:normal;margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;color:var(--muted)}
#tasksPage .task-sync-spinner{width:13px;height:13px;border:2px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:riwaq-task-spin .8s linear infinite}
@keyframes riwaq-task-spin{to{transform:rotate(360deg)}}
#tasksPage .task-card-v60{
  --task-soft:color-mix(in srgb,var(--task-accent) 7%,var(--panel));
  --task-soft-2:color-mix(in srgb,var(--task-accent) 11%,var(--panel));
  position:relative!important;align-self:start!important;height:auto!important;min-height:0!important;
  display:grid!important;gap:13px!important;padding:18px 19px!important;
  border:1px solid color-mix(in srgb,var(--task-accent) 30%,var(--line))!important;
  border-inline-start:5px solid var(--task-accent)!important;border-radius:18px!important;
  background:var(--panel)!important;
  box-shadow:0 8px 22px color-mix(in srgb,var(--text) 7%,transparent)!important;
  overflow:hidden!important;
}
#tasksPage .task-card-v60::before{display:none!important;content:none!important}
#tasksPage .task-card-v60:hover{box-shadow:0 12px 28px color-mix(in srgb,var(--text) 10%,transparent)!important}
#tasksPage .task-card-v60.is-completed{
  border-color:color-mix(in srgb,var(--task-accent) 36%,var(--line))!important;
  border-inline-start-color:var(--task-accent)!important;
  background:var(--panel)!important;
  box-shadow:0 8px 22px color-mix(in srgb,var(--text) 7%,transparent)!important;
}
#tasksPage .task-card-v60.is-completed h3{color:var(--text)!important}
#tasksPage .task-card-v60 .task-card-top{
  align-items:flex-start!important;padding-bottom:9px!important;border-bottom:1px solid var(--line)!important;
}
#tasksPage .task-card-labels{display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:wrap!important}
#tasksPage .task-kind-chip{
  background:var(--task-accent)!important;color:#fff!important;border:1px solid var(--task-accent)!important;
  border-radius:999px!important;padding:5px 10px!important;font-size:calc(.75rem * var(--font-scale))!important;font-weight:900!important;
}
#tasksPage .task-completed-mark{
  background:var(--task-soft)!important;color:var(--task-accent)!important;
  border:1px solid color-mix(in srgb,var(--task-accent) 34%,var(--line))!important;
  border-radius:999px!important;padding:5px 9px!important;font-size:calc(.73rem * var(--font-scale))!important;font-weight:900!important;
}
#tasksPage .task-card-labels>.badge:not(.warn){
  background:var(--panel2)!important;color:var(--muted)!important;border:1px solid var(--line)!important;
}
#tasksPage .task-card-v60 .task-dual-date{
  color:var(--muted)!important;font-size:calc(.78rem * var(--font-scale))!important;font-weight:750!important;line-height:1.6!important;text-align:end!important;
}
#tasksPage .task-card-v60 h3{font-size:calc(1.08rem * var(--font-scale))!important;line-height:1.55!important;margin:0!important;color:var(--text)!important}
#tasksPage .task-card-v60 .task-description{
  min-height:0!important;margin:0!important;color:var(--muted)!important;line-height:1.65!important;font-size:calc(.9rem * var(--font-scale))!important;
}
#tasksPage .task-card-v60 .task-facts{gap:8px!important}
#tasksPage .task-card-v60 .task-fact,
#tasksPage .task-card-v60.is-completed .task-fact,
#tasksPage .task-card-v60 .task-fact.workflow-state,
#tasksPage .task-card-v60 .task-fact.workflow-state.idle,
#tasksPage .task-card-v60 .task-fact.workflow-state.working,
#tasksPage .task-card-v60 .task-fact.workflow-state.success,
#tasksPage .task-card-v60 .task-fact.workflow-state.danger{
  background:var(--panel2)!important;border:1px solid var(--line)!important;color:var(--text)!important;
  box-shadow:none!important;padding:10px 11px!important;
}
#tasksPage .task-card-v60 .task-fact small{color:var(--muted)!important;font-size:calc(.7rem * var(--font-scale))!important}
#tasksPage .task-card-v60 .task-fact strong{color:var(--text)!important;font-size:calc(.83rem * var(--font-scale))!important}
#tasksPage .task-card-v60 .task-progress-row{
  padding:4px 0 18px!important;border-top:0!important;
}
#tasksPage .task-card-v60 .task-progress-row b{color:var(--task-accent)!important;font-weight:900!important}
#tasksPage .task-card-v60 .task-progress-row small{color:var(--muted)!important}
#tasksPage .task-card-v60 .progress{height:7px!important;background:var(--panel2)!important;border:1px solid var(--line)!important}
#tasksPage .task-card-v60 .progress i,
#tasksPage .task-card-v60.is-completed .progress i{background:var(--task-accent)!important}
#tasksPage .task-card-v60 .task-state-segment{
  background:var(--panel2)!important;border:1px solid var(--line)!important;padding:4px!important;border-radius:13px!important;
  box-shadow:none!important;
}
#tasksPage .task-card-v60 .task-state-segment button{
  min-height:40px!important;background:var(--panel)!important;color:var(--text)!important;
  border:1px solid var(--line)!important;box-shadow:none!important;border-radius:9px!important;
}
#tasksPage .task-card-v60 .task-state-segment button:hover{
  background:var(--task-soft)!important;color:var(--task-accent)!important;border-color:color-mix(in srgb,var(--task-accent) 34%,var(--line))!important;
}
#tasksPage .task-card-v60 .task-state-segment button.active,
#tasksPage .task-card-v60 .task-state-segment button[data-state="done"].active{
  background:var(--task-accent)!important;background-image:none!important;color:#fff!important;
  border-color:var(--task-accent)!important;box-shadow:none!important;
}
#tasksPage .task-card-v60 .workflow-primary,
#tasksPage .task-card-v60 .workflow-completed,
#tasksPage .task-actions-v60>.btn:not(.danger),
#tasksPage .admin-task-actions>.btn:not(.danger){
  background:var(--panel)!important;color:var(--task-accent)!important;
  border:1px solid color-mix(in srgb,var(--task-accent) 34%,var(--line))!important;box-shadow:none!important;
}
#tasksPage .task-card-v60 .workflow-primary,
#tasksPage .task-actions-v60>.btn.primary,
#tasksPage .admin-task-actions>.btn.primary{
  background:var(--task-accent)!important;background-image:none!important;color:#fff!important;border-color:var(--task-accent)!important;
}
#tasksPage .task-card-v60 .workflow-completed{font-weight:900!important}
@media(max-width:700px){
  #tasksPage .task-source-legend em{width:100%;margin-inline-start:0}
  #tasksPage .task-card-v60{padding:15px!important;border-radius:16px!important}
  #tasksPage .task-card-v60 .task-card-top{gap:8px!important}
}

/* Project cards: compact, intentionally sized dual dates. */
.v492-project-facts>span:first-child{min-width:0!important}
.v492-project-facts>span:first-child>b{font-size:inherit!important;font-weight:inherit!important}
.v492-project-facts .v733-project-date{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.v733-project-date{
  display:grid!important;
  gap:2px!important;
  width:100%!important;
  line-height:1.35!important;
}
.v733-project-date-hijri{
  display:block!important;
  margin:0!important;
  font-size:calc(.82rem * var(--font-scale))!important;
  line-height:1.4!important;
  font-weight:850!important;
  color:var(--text)!important;
  white-space:nowrap!important;
}
.v733-project-date-gregorian{
  display:block!important;
  margin:0!important;
  font-size:calc(.72rem * var(--font-scale))!important;
  line-height:1.4!important;
  font-weight:700!important;
  color:var(--muted)!important;
  white-space:nowrap!important;
}
.v733-project-date-empty{font-size:calc(.78rem * var(--font-scale))!important;color:var(--muted)!important;font-weight:750!important}
/* Legacy/admin date component uses the same compact scale. */
.project-date-meta .project-date-row{grid-template-columns:44px minmax(0,1fr)!important;gap:5px!important}
.project-date-meta .project-date-row em{font-size:calc(.62rem * var(--font-scale))!important}
.project-date-meta .project-date-hijri{font-size:calc(.82rem * var(--font-scale))!important;line-height:1.4!important}
.project-date-meta .project-date-gregorian{font-size:calc(.72rem * var(--font-scale))!important;line-height:1.4!important}

/* Projects retain the selected appearance theme. */
#projectsPage .project-card{
  border:1px solid var(--line)!important;
  background:var(--panel)!important;
  box-shadow:var(--shadow)!important;
}
#projectsPage .project-card.owner{border-inline-start:4px solid var(--primary)!important}
#projectsPage .project-card .project-role{
  background:var(--primary-soft)!important;
  color:var(--primary-strong)!important;
  border-color:color-mix(in srgb,var(--primary) 28%,var(--line))!important;
}
#projectsPage .project-card .project-type-chip{
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--panel)),color-mix(in srgb,var(--accent) 38%,var(--panel)))!important;
  color:color-mix(in srgb,var(--accent) 34%,var(--text))!important;
  border-color:color-mix(in srgb,var(--accent) 42%,var(--line))!important;
}
#projectsPage .project-card .project-compact-meta>span{
  background:var(--panel2)!important;
  border-color:var(--line)!important;
}
#projectsPage .project-card .progress i{background:var(--primary)!important}
#projectsPage .project-card .btn.primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-strong))!important;
  border-color:transparent!important;
  color:#fff!important;
}


/* Password preview: works on login, registration and password-change dialogs. */
.password-visibility-wrap{position:relative!important;display:block!important}
.password-visibility-wrap input[type="password"],.password-visibility-wrap input[type="text"]{padding-left:58px!important}
.password-visibility-toggle{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:11px;background:transparent;color:var(--muted,#6b7f82);cursor:pointer;z-index:3;padding:0}
.password-visibility-toggle:hover,.password-visibility-toggle:focus-visible{background:color-mix(in srgb,var(--primary,#177c72) 10%,transparent);color:var(--primary,#177c72)}
.password-visibility-toggle svg{position:static!important;width:21px!important;height:21px!important;transform:none!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;pointer-events:none!important}
.password-visibility-toggle .eye-slash{display:none}.password-visibility-toggle.is-visible .eye-slash{display:block}
.password-visibility-inline{margin-top:6px}.password-visibility-inline>input{width:100%}

/* v7.3.30 — onboarding styles live only in onboarding-tour-v725.css to avoid CSS conflicts. */

/* Riwaq v7.3.30 — source-color lock for task workflow buttons */
#tasksPage .task-card-v60.task-kind-project{--task-accent:#336fe6!important}
#tasksPage .task-card-v60.task-kind-course{--task-accent:#0b8f87!important}
#tasksPage .task-card-v60.task-kind-general{--task-accent:#c77715!important}
#tasksPage .task-card-v60 .task-state-segment button.active,
#tasksPage .task-card-v60 .task-state-segment button[data-state="done"].active{
  background:var(--task-accent)!important;
  background-image:none!important;
  border-color:var(--task-accent)!important;
  color:#fff!important;
  box-shadow:0 6px 16px color-mix(in srgb,var(--task-accent) 18%,transparent)!important;
}

/* Riwaq v7.3.30 — final card-language unification requested after visual review. */
/* 1) Dashboard: every repeated block follows the same clean My Courses language. */
body.v523-signature .sig-course-card,
body.v523-signature .sig-project-card,
body.v523-signature .sig-library-summary > div,
body.v523-signature .sig-task-row{
  --home-card-tint:color-mix(in srgb,var(--primary) 5%,var(--panel));
  position:relative!important;
  border:2px solid color-mix(in srgb,var(--primary) 28%,var(--line))!important;
  border-radius:20px!important;
  background:var(--panel)!important;
  box-shadow:0 9px 24px color-mix(in srgb,var(--text) 7%,transparent)!important;
  overflow:hidden!important;
}
body.v523-signature .sig-course-card::before,
body.v523-signature .sig-project-card::before,
body.v523-signature .sig-library-summary > div::before,
body.v523-signature .sig-task-row::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset-block:0!important;
  inset-inline-end:0!important;
  width:6px!important;
  background:var(--primary)!important;
  opacity:.9!important;
  z-index:0!important;
}
body.v523-signature .sig-course-card > *,
body.v523-signature .sig-project-card > *,
body.v523-signature .sig-library-summary > div > *,
body.v523-signature .sig-task-row > *{position:relative;z-index:1}
body.v523-signature .sig-course-card h3,
body.v523-signature .sig-project-card h3,
body.v523-signature .sig-task-copy strong,
body.v523-signature .sig-library-summary strong{
  color:var(--primary-strong)!important;
}
body.v523-signature .sig-course-week,
body.v523-signature .sig-project-facts span,
body.v523-signature .sig-library-summary > div{
  background:var(--home-card-tint)!important;
  border-color:color-mix(in srgb,var(--primary) 19%,var(--line))!important;
}
body.v523-signature .sig-project-card .btn.primary,
body.v523-signature .sig-library-actions .btn.primary{
  background:var(--primary)!important;
  background-image:none!important;
  border-color:var(--primary)!important;
  color:#fff!important;
  box-shadow:none!important;
}

/* 2) Projects page: same card structure for every project; status remains information, not a second design system. */
#projectsPage .v492-project-card{
  --project-card-tint:color-mix(in srgb,var(--primary) 5%,var(--panel));
  border:2px solid color-mix(in srgb,var(--primary) 28%,var(--line))!important;
  border-radius:22px!important;
  background:var(--panel)!important;
  box-shadow:0 9px 24px color-mix(in srgb,var(--text) 7%,transparent)!important;
}
#projectsPage .v492-project-card::before{
  width:6px!important;
  background:var(--primary)!important;
  opacity:.9!important;
}
#projectsPage .v492-project-card > h3{color:var(--primary-strong)!important}
#projectsPage .v492-project-facts > span,
#projectsPage .v492-project-progress,
#projectsPage .v492-open-project,
#projectsPage .v492-open-project.danger,
#projectsPage .v492-open-project.warn,
#projectsPage .v492-open-project.success{
  background:var(--project-card-tint)!important;
  border-color:color-mix(in srgb,var(--primary) 20%,var(--line))!important;
  color:var(--text)!important;
  box-shadow:none!important;
}
#projectsPage .v492-open-project strong,
#projectsPage .v492-open-project b{color:var(--primary-strong)!important}
#projectsPage .v492-open-project em,
#projectsPage .v492-open-project small{color:var(--muted)!important}
#projectsPage .v492-project-progress .progress i{background:var(--primary)!important}

/* 3) Tasks: keep source colours only for recognition; workflow buttons always use the selected appearance colour. */
#tasksPage .task-card-v60 .task-state-segment button.active,
#tasksPage .task-card-v60 .task-state-segment button[data-state="done"].active,
#tasksPage .task-card-v60 .workflow-primary,
#tasksPage .task-card-v60 .task-actions-v60 > .btn.primary,
#tasksPage .task-card-v60 .admin-task-actions > .btn.primary{
  background:var(--primary)!important;
  background-image:none!important;
  border-color:var(--primary)!important;
  color:#fff!important;
  box-shadow:none!important;
}
#tasksPage .task-card-v60 .task-state-segment button:hover{
  background:color-mix(in srgb,var(--primary) 9%,var(--panel))!important;
  border-color:color-mix(in srgb,var(--primary) 34%,var(--line))!important;
  color:var(--primary-strong)!important;
}
#tasksPage .task-card-v60 .task-actions-v60 > .btn:not(.danger),
#tasksPage .task-card-v60 .admin-task-actions > .btn:not(.danger),
#tasksPage .task-card-v60 .workflow-completed{
  border-color:color-mix(in srgb,var(--primary) 32%,var(--line))!important;
  color:var(--primary-strong)!important;
}

@media(max-width:700px){
  body.v523-signature .sig-course-card,
  body.v523-signature .sig-project-card,
  body.v523-signature .sig-library-summary > div,
  body.v523-signature .sig-task-row,
  #projectsPage .v492-project-card{border-radius:18px!important}
}

/* ===== Riwaq v7.3.30 — definitive visual unification ===== */
/* The dashboard renderer uses .sig-* cards. Keep the signature scope active and make
   every repeated dashboard block literally follow the My Courses card language. */
body.v523-signature .sig-course-card,
body.v523-signature .sig-project-card,
body.v523-signature .sig-task-row,
body.v523-signature .sig-library-summary > div{
  position:relative!important;
  border:2px solid color-mix(in srgb,var(--primary) 30%,var(--line))!important;
  border-radius:22px!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 6%,var(--panel)),var(--panel) 66%)!important;
  box-shadow:0 10px 26px color-mix(in srgb,var(--text) 7%,transparent)!important;
  overflow:hidden!important;
}
body.v523-signature .sig-course-card::before,
body.v523-signature .sig-project-card::before,
body.v523-signature .sig-task-row::before,
body.v523-signature .sig-library-summary > div::before{
  content:""!important;
  position:absolute!important;
  inset-block:0!important;
  inset-inline-end:0!important;
  width:6px!important;
  background:var(--primary)!important;
  opacity:1!important;
  pointer-events:none!important;
}
body.v523-signature .sig-course-card > *,
body.v523-signature .sig-project-card > *,
body.v523-signature .sig-task-row > *,
body.v523-signature .sig-library-summary > div > *{position:relative!important;z-index:1!important}
body.v523-signature .sig-course-card h3,
body.v523-signature .sig-project-card h3,
body.v523-signature .sig-task-copy strong,
body.v523-signature .sig-library-summary strong{color:var(--primary-strong)!important}
body.v523-signature .sig-course-week,
body.v523-signature .sig-project-facts span{
  background:color-mix(in srgb,var(--primary) 6%,var(--panel))!important;
  border:1px solid color-mix(in srgb,var(--primary) 24%,var(--line))!important;
}

/* Projects: one design only. Overdue changes the status badge, never the card/action block. */
#projectsPage .v492-project-card{
  position:relative!important;
  border:2px solid color-mix(in srgb,var(--primary) 30%,var(--line))!important;
  border-radius:22px!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 6%,var(--panel)),var(--panel) 66%)!important;
  box-shadow:0 10px 26px color-mix(in srgb,var(--text) 7%,transparent)!important;
  overflow:hidden!important;
}
#projectsPage .v492-project-card::before{
  content:""!important;position:absolute!important;inset-block:0!important;inset-inline-end:0!important;
  width:6px!important;background:var(--primary)!important;opacity:1!important;pointer-events:none!important;
}
#projectsPage .v492-project-card>h3{color:var(--primary-strong)!important}
#projectsPage .v492-project-facts>span,
#projectsPage .v492-open-project,
#projectsPage .v492-open-project.primary,
#projectsPage .v492-open-project.urgent,
#projectsPage .v492-open-project.danger,
#projectsPage .v492-open-project.warn,
#projectsPage .v492-open-project.success{
  background:color-mix(in srgb,var(--primary) 6%,var(--panel))!important;
  border:1px solid color-mix(in srgb,var(--primary) 24%,var(--line))!important;
  color:var(--text)!important;
  box-shadow:none!important;
}
#projectsPage .v492-open-project strong,
#projectsPage .v492-open-project.primary strong,
#projectsPage .v492-open-project.urgent strong{color:var(--primary-strong)!important}
#projectsPage .v492-open-project small,
#projectsPage .v492-open-project em{color:var(--muted)!important}
#projectsPage .v492-project-progress .progress i{background:var(--primary)!important}

/* Tasks: category colours identify the card only. Every workflow/status control belongs to the selected theme. */
#tasksPage .task-card-v60 .task-state-segment{
  background:color-mix(in srgb,var(--primary) 5%,var(--panel))!important;
  border-color:color-mix(in srgb,var(--primary) 22%,var(--line))!important;
}
#tasksPage .task-card-v60 .task-state-segment button,
#tasksPage .task-card-v60 .workflow-primary,
#tasksPage .task-card-v60 .workflow-completed,
#tasksPage .task-card-v60 .task-actions-v60>.btn:not(.danger),
#tasksPage .task-card-v60 .admin-task-actions>.btn:not(.danger){
  background:color-mix(in srgb,var(--primary) 7%,var(--panel))!important;
  background-image:none!important;
  color:var(--primary-strong)!important;
  border-color:color-mix(in srgb,var(--primary) 34%,var(--line))!important;
  box-shadow:none!important;
}
#tasksPage .task-card-v60 .task-state-segment button:hover,
#tasksPage .task-card-v60 .workflow-primary:hover,
#tasksPage .task-card-v60 .task-actions-v60>.btn:not(.danger):hover{
  background:color-mix(in srgb,var(--primary) 13%,var(--panel))!important;
  color:var(--primary-strong)!important;
  border-color:var(--primary)!important;
}
#tasksPage .task-card-v60 .task-state-segment button.active,
#tasksPage .task-card-v60 .task-state-segment button[data-state="done"].active,
#tasksPage .task-card-v60 .workflow-primary:not(:disabled),
#tasksPage .task-card-v60 .task-actions-v60>.btn.primary,
#tasksPage .task-card-v60 .admin-task-actions>.btn.primary{
  background:var(--primary)!important;
  background-image:none!important;
  color:#fff!important;
  border-color:var(--primary)!important;
  box-shadow:0 6px 16px color-mix(in srgb,var(--primary) 18%,transparent)!important;
}
#tasksPage .task-card-v60 .workflow-completed:disabled{
  opacity:1!important;
  background:color-mix(in srgb,var(--primary) 10%,var(--panel))!important;
  color:var(--primary-strong)!important;
}

@media(max-width:700px){
  body.v523-signature .sig-course-card,
  body.v523-signature .sig-project-card,
  body.v523-signature .sig-task-row,
  body.v523-signature .sig-library-summary > div,
  #projectsPage .v492-project-card{border-radius:19px!important}
}

/* ===== Riwaq v7.3.30 — theme-relative task palettes + viewport-fit login ===== */
/*
   One visual rule: the selected Riwaq appearance owns the colour family.
   Task type only chooses a nearby shade inside that family.
*/
#tasksPage .task-card-v60{
  /* v7.3.30: the first category must be clearly distinguishable from the base appearance,
     while remaining inside the same palette family. */
  /* v7.3.30: use three unmistakable shades already present in the active theme.
     Project leans toward the theme accent, course stays near the primary,
     and general leans toward the stronger primary. This keeps harmony without
     letting the first category disappear into the page chrome. */
  --task-project:color-mix(in srgb,var(--accent) 72%,var(--primary-strong) 28%);
  --task-course:color-mix(in srgb,var(--primary) 80%,var(--accent) 20%);
  --task-general:color-mix(in srgb,var(--primary-strong) 72%,var(--accent) 28%);
  --task-accent:var(--primary);
  --task-accent-strong:color-mix(in srgb,var(--task-accent) 78%,var(--text) 22%);
  --task-tint:color-mix(in srgb,var(--task-accent) 5%,var(--panel));
  --task-tint-strong:color-mix(in srgb,var(--task-accent) 10%,var(--panel));
  --task-line:color-mix(in srgb,var(--task-accent) 32%,var(--line));
  border:1.5px solid var(--task-line)!important;
  border-inline-end:5px solid var(--task-accent)!important;
  background:linear-gradient(145deg,var(--task-tint),var(--panel) 54%)!important;
  box-shadow:0 9px 24px color-mix(in srgb,var(--task-accent) 8%,transparent)!important;
}
#tasksPage .task-card-v60.task-kind-project{--task-accent:var(--task-project)!important}
#tasksPage .task-card-v60.task-kind-course{--task-accent:var(--task-course)!important}
#tasksPage .task-card-v60.task-kind-general{--task-accent:var(--task-general)!important}

/* Category is visible at card, title, chip, facts, progress and workflow controls — one coherent shade. */
#tasksPage .task-card-v60 h3,
#tasksPage .task-card-v60 .task-card-title,
#tasksPage .task-card-v60 .task-progress-row>b{
  color:var(--task-accent-strong)!important;
}
#tasksPage .task-card-v60 .task-kind-chip{
  background:var(--task-accent)!important;
  color:#fff!important;
  border:1px solid color-mix(in srgb,var(--task-accent) 72%,var(--panel))!important;
  box-shadow:none!important;
}
#tasksPage .task-card-v60 .task-fact{
  background:var(--task-tint)!important;
  border-color:var(--task-line)!important;
}
#tasksPage .task-card-v60 .task-fact small{color:color-mix(in srgb,var(--task-accent) 46%,var(--muted))!important}
#tasksPage .task-card-v60 .progress{background:color-mix(in srgb,var(--task-accent) 11%,var(--panel2))!important}
#tasksPage .task-card-v60 .progress i{background:var(--task-accent)!important}
#tasksPage .task-card-v60 .task-state-segment{
  background:var(--task-tint)!important;
  border-color:var(--task-line)!important;
  box-shadow:none!important;
}
#tasksPage .task-card-v60 .task-state-segment button,
#tasksPage .task-card-v60 .workflow-primary,
#tasksPage .task-card-v60 .workflow-completed,
#tasksPage .task-card-v60 .task-actions-v60>.btn:not(.danger),
#tasksPage .task-card-v60 .admin-task-actions>.btn:not(.danger){
  background:color-mix(in srgb,var(--task-accent) 4%,var(--panel))!important;
  background-image:none!important;
  color:var(--task-accent-strong)!important;
  border-color:color-mix(in srgb,var(--task-accent) 28%,var(--line))!important;
  box-shadow:none!important;
}
#tasksPage .task-card-v60 .task-state-segment button:hover,
#tasksPage .task-card-v60 .workflow-primary:hover,
#tasksPage .task-card-v60 .task-actions-v60>.btn:not(.danger):hover{
  background:var(--task-tint-strong)!important;
  color:var(--task-accent-strong)!important;
  border-color:color-mix(in srgb,var(--task-accent) 52%,var(--line))!important;
}
#tasksPage .task-card-v60 .task-state-segment button.active,
#tasksPage .task-card-v60 .task-state-segment button[data-state="done"].active,
#tasksPage .task-card-v60 .workflow-primary:not(:disabled),
#tasksPage .task-card-v60 .task-actions-v60>.btn.primary,
#tasksPage .task-card-v60 .admin-task-actions>.btn.primary{
  background:var(--task-accent)!important;
  background-image:none!important;
  color:#fff!important;
  border-color:var(--task-accent)!important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--task-accent) 18%,transparent)!important;
}
#tasksPage .task-card-v60 .workflow-completed:disabled{
  opacity:1!important;
  background:var(--task-tint-strong)!important;
  color:var(--task-accent-strong)!important;
  border-color:var(--task-line)!important;
}
#tasksPage .task-card-v60.is-completed,
#tasksPage .task-card-v60.completed{
  border-color:color-mix(in srgb,var(--task-accent) 42%,var(--line))!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--task-accent) 7%,var(--panel)),var(--panel) 58%)!important;
}

/* Desktop login: fit the viewport instead of introducing an internal scrollbar. */
@media (min-width:900px){
  .login-v24{height:100dvh!important;min-height:100dvh!important;overflow:hidden!important}
  .login-v24__identity,.login-v24__access{height:100dvh!important;min-height:0!important;overflow:hidden!important}
  .login-v24__access{display:flex!important;align-items:center!important;justify-content:center!important;padding:clamp(12px,2.1vh,28px) clamp(18px,3vw,52px)!important}
  .login-v24__access-inner{width:min(500px,100%)!important;max-height:calc(100dvh - 24px)!important;display:grid!important;align-content:center!important;gap:clamp(8px,1.25vh,16px)!important}
  .login-v24__access-heading{margin-bottom:clamp(6px,1vh,12px)!important}
  .login-v24__access-heading h2{font-size:clamp(30px,4.2vh,52px)!important;margin:4px 0!important;line-height:1.15!important}
  .login-v24__access-heading p{font-size:clamp(13px,1.7vh,18px)!important;line-height:1.55!important}
  .login-card-v24{padding:clamp(14px,2vh,24px)!important;gap:clamp(10px,1.45vh,18px)!important;border-radius:clamp(18px,2.4vh,28px)!important}
  .login-card-v24 .login-field{font-size:clamp(13px,1.55vh,17px)!important;gap:7px!important}
  .login-card-v24 .login-input-wrap input{min-height:clamp(48px,6.5vh,66px)!important;font-size:clamp(15px,1.8vh,18px)!important}
  #loginSubmitBtn{min-height:clamp(48px,6.2vh,60px)!important}
}
@media (min-width:900px) and (max-height:760px){
  .login-riwaq-logo{width:min(210px,18vw)!important;max-height:25dvh!important}
  .login-v24__message h1{font-size:clamp(28px,4.4vh,38px)!important}
  .login-v24__feature-grid{padding:6px!important;gap:5px!important}
  .login-feature-card{padding:5px 4px!important;gap:5px!important}
  .login-feature-icon{width:34px!important;height:34px!important}
  .auth-mode-tabs{margin-bottom:7px!important}
  .auth-mode-tabs button{padding:8px 10px!important}
}
@media (min-width:900px) and (max-height:640px){
  .login-v24__identity{padding:12px 20px!important}
  .login-riwaq-logo{width:150px!important;max-height:20dvh!important}
  .login-v24__slogan{padding:5px 10px!important;font-size:calc(12px * var(--font-scale))!important}
  .login-v24__message h1{font-size:calc(27px * var(--font-scale))!important}
  .login-feature-icon{display:none!important}
  .login-v24__feature-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .login-card-v24{padding:12px!important;gap:8px!important}
  .login-v24__access-heading p{display:none!important}
}

@media(max-width:700px){
  #tasksPage .task-card-v60{border-inline-end-width:4px!important}
}

/* ===== Riwaq v7.3.30 — curated task-card palettes per appearance =====
   Art direction: each appearance gets its own coordinated three-colour family.
   The task type is expressed across the card, title, facts, progress and controls
   without introducing a foreign colour that fights the selected Riwaq theme. */

/* Curated palettes — none of the three task colours equals the appearance primary,
   primary-strong, accent, or sidebar colour. Each is deliberately offset in hue/value
   while remaining harmonious with its appearance family. */
html[data-riwaq-theme="classic"] #tasksPage{
  --task-project-color:#2f6878;
  --task-course-color:#56806c;
  --task-general-color:#9b7040;
}
html[data-riwaq-theme="navy"] #tasksPage{
  --task-project-color:#4a568d;
  --task-course-color:#527789;
  --task-general-color:#987044;
}
html[data-riwaq-theme="burgundy"] #tasksPage{
  --task-project-color:#754164;
  --task-course-color:#a05f55;
  --task-general-color:#96703f;
}
html[data-riwaq-theme="sand"] #tasksPage{
  --task-project-color:#75633f;
  --task-course-color:#9a654c;
  --task-general-color:#68765c;
}
html[data-riwaq-theme="violet"] #tasksPage{
  --task-project-color:#795b82;
  --task-course-color:#5b6f9a;
  --task-general-color:#957043;
}
html[data-riwaq-theme="charcoal"] #tasksPage{
  --task-project-color:#3e6870;
  --task-course-color:#5e708c;
  --task-general-color:#8e7046;
}
/* Defensive fallback while the saved appearance is still being applied. */
#tasksPage{
  --task-project-color:#2f6878;
  --task-course-color:#56806c;
  --task-general-color:#9b7040;
}

#tasksPage #taskResults>.cards{
  align-items:start!important;
  gap:16px!important;
}
#tasksPage .task-card-v60{
  --task-accent:var(--task-project-color);
  --task-accent-deep:color-mix(in srgb,var(--task-accent) 76%,var(--text) 24%);
  --task-wash:color-mix(in srgb,var(--task-accent) 5.5%,var(--panel));
  --task-wash-2:color-mix(in srgb,var(--task-accent) 9%,var(--panel));
  --task-line:color-mix(in srgb,var(--task-accent) 34%,var(--line));
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  border:1px solid var(--task-line)!important;
  border-inline-end:1px solid var(--task-line)!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 94% 4%,color-mix(in srgb,var(--task-accent) 10%,transparent) 0,transparent 30%),
    linear-gradient(145deg,var(--task-wash),var(--panel) 58%)!important;
  box-shadow:0 10px 28px color-mix(in srgb,var(--task-accent) 8%,transparent)!important;
  padding:18px!important;
}
#tasksPage .task-card-v60::after{
  content:"";
  position:absolute;
  inset-inline:0;
  top:0;
  height:4px;
  z-index:2;
  background:linear-gradient(90deg,var(--task-accent),color-mix(in srgb,var(--task-accent) 58%,var(--panel)));
}
#tasksPage .task-card-v60.task-kind-project{--task-accent:var(--task-project-color)!important}
#tasksPage .task-card-v60.task-kind-course{--task-accent:var(--task-course-color)!important}
#tasksPage .task-card-v60.task-kind-general{--task-accent:var(--task-general-color)!important}

/* Type chip: coloured, compact, and visually tied to the card instead of looking pasted on. */
#tasksPage .task-card-v60 .task-kind-chip{
  background:color-mix(in srgb,var(--task-accent) 12%,var(--panel))!important;
  color:var(--task-accent-deep)!important;
  border:1px solid color-mix(in srgb,var(--task-accent) 38%,var(--line))!important;
  box-shadow:none!important;
  padding:5px 10px!important;
  font-weight:900!important;
}
#tasksPage .task-card-v60.task-kind-project .task-kind-chip::before{content:"◇";font-size:.9em}
#tasksPage .task-card-v60.task-kind-course .task-kind-chip::before{content:"▤";font-size:.82em}
#tasksPage .task-card-v60.task-kind-general .task-kind-chip::before{content:"✦";font-size:.78em}

/* Title and date inherit the category's tone, with the body copy remaining neutral for readability. */
#tasksPage .task-card-v60 h3,
#tasksPage .task-card-v60 .task-card-title{
  color:var(--task-accent-deep)!important;
  font-weight:900!important;
  letter-spacing:0!important;
}
#tasksPage .task-card-v60 .task-dual-date{
  color:color-mix(in srgb,var(--task-accent) 58%,var(--muted))!important;
  font-weight:800!important;
}
#tasksPage .task-card-v60 .task-description{color:var(--muted)!important}
#tasksPage .task-card-v60 .task-card-top{
  border-bottom:1px solid color-mix(in srgb,var(--task-accent) 18%,var(--line))!important;
  padding-bottom:10px!important;
}

/* Facts feel like part of the same card, not three unrelated grey boxes. */
#tasksPage .task-card-v60 .task-fact,
#tasksPage .task-card-v60.is-completed .task-fact,
#tasksPage .task-card-v60 .task-fact.workflow-state,
#tasksPage .task-card-v60 .task-fact.workflow-state.idle,
#tasksPage .task-card-v60 .task-fact.workflow-state.working,
#tasksPage .task-card-v60 .task-fact.workflow-state.success,
#tasksPage .task-card-v60 .task-fact.workflow-state.danger{
  background:var(--task-wash)!important;
  border:1px solid color-mix(in srgb,var(--task-accent) 21%,var(--line))!important;
  box-shadow:none!important;
}
#tasksPage .task-card-v60 .task-fact small{
  color:color-mix(in srgb,var(--task-accent) 52%,var(--muted))!important;
}
#tasksPage .task-card-v60 .task-fact strong{color:var(--text)!important}

/* Progress is category-coloured but restrained. */
#tasksPage .task-card-v60 .task-progress-row>b{color:var(--task-accent-deep)!important}
#tasksPage .task-card-v60 .progress{
  height:7px!important;
  background:color-mix(in srgb,var(--task-accent) 10%,var(--panel2))!important;
  border:1px solid color-mix(in srgb,var(--task-accent) 18%,var(--line))!important;
}
#tasksPage .task-card-v60 .progress i,
#tasksPage .task-card-v60.is-completed .progress i{background:var(--task-accent)!important}

/* Workflow buttons: all three belong to the card palette. Active = solid; inactive = tinted. */
#tasksPage .task-card-v60 .task-state-segment{
  background:color-mix(in srgb,var(--task-accent) 6%,var(--panel2))!important;
  border:1px solid color-mix(in srgb,var(--task-accent) 24%,var(--line))!important;
  padding:4px!important;
  box-shadow:none!important;
}
#tasksPage .task-card-v60 .task-state-segment button,
#tasksPage .task-card-v60 .workflow-primary,
#tasksPage .task-card-v60 .workflow-completed,
#tasksPage .task-card-v60 .task-actions-v60>.btn:not(.danger),
#tasksPage .task-card-v60 .admin-task-actions>.btn:not(.danger){
  background:color-mix(in srgb,var(--task-accent) 6%,var(--panel))!important;
  background-image:none!important;
  color:var(--task-accent-deep)!important;
  border:1px solid color-mix(in srgb,var(--task-accent) 28%,var(--line))!important;
  box-shadow:none!important;
  font-weight:900!important;
}
#tasksPage .task-card-v60 .task-state-segment button:hover,
#tasksPage .task-card-v60 .workflow-primary:hover,
#tasksPage .task-card-v60 .task-actions-v60>.btn:not(.danger):hover{
  background:var(--task-wash-2)!important;
  border-color:color-mix(in srgb,var(--task-accent) 52%,var(--line))!important;
  color:var(--task-accent-deep)!important;
}
#tasksPage .task-card-v60 .task-state-segment button.active,
#tasksPage .task-card-v60 .task-state-segment button[data-state="done"].active,
#tasksPage .task-card-v60 .workflow-primary:not(:disabled),
#tasksPage .task-card-v60 .task-actions-v60>.btn.primary,
#tasksPage .task-card-v60 .admin-task-actions>.btn.primary{
  background:var(--task-accent)!important;
  background-image:none!important;
  color:#fff!important;
  border-color:var(--task-accent)!important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--task-accent) 18%,transparent)!important;
}
#tasksPage .task-card-v60 .workflow-completed:disabled{
  opacity:1!important;
  background:var(--task-wash-2)!important;
  color:var(--task-accent-deep)!important;
  border-color:var(--task-line)!important;
}
#tasksPage .task-card-v60 .task-completed-mark{
  background:color-mix(in srgb,var(--task-accent) 10%,var(--panel))!important;
  color:var(--task-accent-deep)!important;
  border-color:color-mix(in srgb,var(--task-accent) 34%,var(--line))!important;
}
#tasksPage .task-card-v60.is-completed,
#tasksPage .task-card-v60.completed{
  border-color:color-mix(in srgb,var(--task-accent) 40%,var(--line))!important;
  background:
    radial-gradient(circle at 94% 4%,color-mix(in srgb,var(--task-accent) 11%,transparent) 0,transparent 30%),
    linear-gradient(145deg,color-mix(in srgb,var(--task-accent) 7%,var(--panel)),var(--panel) 60%)!important;
}

/* Compact desktop rhythm: more content on screen without feeling cramped. */
@media(min-width:1181px){
  #tasksPage .task-card-v60{padding:16px!important;gap:10px!important}
  #tasksPage .task-card-v60 .task-description{line-height:1.55!important}
  #tasksPage .task-card-v60 .task-fact{padding:9px 10px!important}
  #tasksPage .task-card-v60 .task-state-segment button{min-height:38px!important}
}
@media(max-width:700px){
  #tasksPage .task-card-v60{padding:15px!important;border-radius:17px!important}
  #tasksPage .task-card-v60::after{height:3px}
}


/* ===== Riwaq v7.3.30 — decisive task colour separation + overdue red =====
   Design rule: no task-type colour may equal the selected appearance colour.
   Each appearance owns a coordinated TRIAD with visible hue/value separation.
   Overdue is semantic red only, independent of appearance and task type. */
html[data-riwaq-theme="classic"] #tasksPage{--task-project-color:#315E78;--task-course-color:#667A52;--task-general-color:#986044}
html[data-riwaq-theme="navy"] #tasksPage{--task-project-color:#52639A;--task-course-color:#3F7E83;--task-general-color:#9B6642}
html[data-riwaq-theme="burgundy"] #tasksPage{--task-project-color:#684F82;--task-course-color:#A75A4F;--task-general-color:#8A7543}
html[data-riwaq-theme="sand"] #tasksPage{--task-project-color:#6B6848;--task-course-color:#A06450;--task-general-color:#58786A}
html[data-riwaq-theme="violet"] #tasksPage{--task-project-color:#685C96;--task-course-color:#4E7890;--task-general-color:#9A6945}
html[data-riwaq-theme="charcoal"] #tasksPage{--task-project-color:#426D7B;--task-course-color:#677296;--task-general-color:#94704A}
#tasksPage{--task-project-color:#315E78;--task-course-color:#667A52;--task-general-color:#986044}

/* Make the category genuinely readable at CARD level — not just a tiny chip. */
#tasksPage .task-card-v60{
  --task-wash:color-mix(in srgb,var(--task-accent) 9%,var(--panel));
  --task-wash-2:color-mix(in srgb,var(--task-accent) 15%,var(--panel));
  --task-line:color-mix(in srgb,var(--task-accent) 48%,var(--line));
  border-color:var(--task-line)!important;
  background:
    radial-gradient(circle at 92% 3%,color-mix(in srgb,var(--task-accent) 15%,transparent) 0,transparent 31%),
    linear-gradient(145deg,var(--task-wash),var(--panel) 66%)!important;
  box-shadow:0 10px 28px color-mix(in srgb,var(--task-accent) 12%,transparent)!important;
}
#tasksPage .task-card-v60::after{
  height:5px!important;
  background:linear-gradient(90deg,var(--task-accent),color-mix(in srgb,var(--task-accent) 66%,white))!important;
}
#tasksPage .task-card-v60 .task-kind-chip{
  background:var(--task-accent)!important;color:#fff!important;border-color:var(--task-accent)!important;
}
#tasksPage .task-card-v60 .task-fact{
  background:color-mix(in srgb,var(--task-accent) 7%,var(--panel2))!important;
  border-color:color-mix(in srgb,var(--task-accent) 31%,var(--line))!important;
}
#tasksPage .task-card-v60 .task-state-segment{
  background:color-mix(in srgb,var(--task-accent) 8%,var(--panel2))!important;
  border-color:color-mix(in srgb,var(--task-accent) 34%,var(--line))!important;
}
#tasksPage .task-card-v60 .task-state-segment button,
#tasksPage .task-card-v60 .workflow-primary,
#tasksPage .task-card-v60 .workflow-completed,
#tasksPage .task-card-v60 .task-actions-v60>.btn:not(.danger),
#tasksPage .task-card-v60 .admin-task-actions>.btn:not(.danger){
  background:color-mix(in srgb,var(--task-accent) 8%,var(--panel))!important;
  color:var(--task-accent-deep)!important;
  border-color:color-mix(in srgb,var(--task-accent) 36%,var(--line))!important;
}

/* Overdue: exactly the semantic treatment requested — pale red chip with dark red text. */
#tasksPage .task-overdue-chip,
#tasksPage .task-card-v60.is-overdue .workflow-state.danger{
  background:#fff0ef!important;
  color:#b42318!important;
  border:1px solid #f2c5c1!important;
}
#tasksPage .task-overdue-chip{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:30px!important;padding:5px 11px!important;border-radius:999px!important;
  font-size:calc(.78rem * var(--font-scale))!important;font-weight:950!important;line-height:1!important;white-space:nowrap!important;
}
#tasksPage .task-card-v60.is-overdue .workflow-state.danger small,
#tasksPage .task-card-v60.is-overdue .workflow-state.danger strong{color:#b42318!important}
/* Keep overdue red semantic status from repainting the task-type identity. */
#tasksPage .task-card-v60.is-overdue{border-color:var(--task-line)!important}
#tasksPage .task-card-v60.is-overdue::after{background:linear-gradient(90deg,var(--task-accent),color-mix(in srgb,var(--task-accent) 66%,white))!important}

/* Legend follows the same three category colours. */
#tasksPage .task-source-legend .project i{background:var(--task-project-color)!important}
#tasksPage .task-source-legend .course i{background:var(--task-course-color)!important}
#tasksPage .task-source-legend .general i{background:var(--task-general-color)!important}

/* ===== Riwaq v7.3.30 — final task palette correction =====
   The three task identities are intentionally distinct from the active appearance.
   In particular, the navy appearance MUST NOT use blue for Project tasks. */
html[data-riwaq-theme="classic"] #tasksPage{--task-project-color:#586C8A;--task-course-color:#3F8580;--task-general-color:#A66D43}
html[data-riwaq-theme="navy"] #tasksPage{--task-project-color:#745D86;--task-course-color:#3F8580;--task-general-color:#A66D43}
html[data-riwaq-theme="burgundy"] #tasksPage{--task-project-color:#536F8C;--task-course-color:#47857A;--task-general-color:#A57643}
html[data-riwaq-theme="sand"] #tasksPage{--task-project-color:#536F8C;--task-course-color:#3F8078;--task-general-color:#A45F54}
html[data-riwaq-theme="violet"] #tasksPage{--task-project-color:#496F88;--task-course-color:#438277;--task-general-color:#A66B42}
html[data-riwaq-theme="charcoal"] #tasksPage{--task-project-color:#6F5D87;--task-course-color:#3F817C;--task-general-color:#A66D43}
#tasksPage{--task-project-color:#586C8A;--task-course-color:#3F8580;--task-general-color:#A66D43}

/* Slightly stronger card tint so all three categories read as clearly as the lower examples. */
#tasksPage .task-card-v60{
  --task-wash:color-mix(in srgb,var(--task-accent) 11%,var(--panel));
  --task-wash-2:color-mix(in srgb,var(--task-accent) 17%,var(--panel));
  --task-line:color-mix(in srgb,var(--task-accent) 52%,var(--line));
}
/* Semantic overdue red stays independent from the category palette. */
#tasksPage .task-overdue-chip,
#tasksPage .task-card-v60.is-overdue .workflow-state.danger{
  background:#fff0ef!important;color:#b42318!important;border-color:#f2c5c1!important;
}

/* ===== Riwaq v7.3.30 — companion task palettes, never the theme primary =====
   Design rule:
   - Each appearance gets a curated three-colour companion palette.
   - No task category reuses the appearance primary/strong/sidebar hue.
   - Colours remain harmonious with the appearance rather than copying it.
   - Overdue remains semantic red and independent from category identity. */
html[data-riwaq-theme="classic"] #tasksPage{
  --task-project-color:#5F6F92;
  --task-course-color:#A86655;
  --task-general-color:#9A7A45;
}
html[data-riwaq-theme="navy"] #tasksPage{
  --task-project-color:#7B5F83;
  --task-course-color:#3D8572;
  --task-general-color:#A66D43;
}
html[data-riwaq-theme="burgundy"] #tasksPage{
  --task-project-color:#55748F;
  --task-course-color:#6D8054;
  --task-general-color:#A67A3F;
}
html[data-riwaq-theme="sand"] #tasksPage{
  --task-project-color:#536F8C;
  --task-course-color:#3F8078;
  --task-general-color:#9C5267;
}
html[data-riwaq-theme="violet"] #tasksPage{
  --task-project-color:#3E817A;
  --task-course-color:#6F7D50;
  --task-general-color:#A56B42;
}
html[data-riwaq-theme="charcoal"] #tasksPage{
  --task-project-color:#765E84;
  --task-course-color:#3F817B;
  --task-general-color:#9C7248;
}
/* Fallback mirrors the classic companion palette, not the classic primary. */
#tasksPage{
  --task-project-color:#5F6F92;
  --task-course-color:#A86655;
  --task-general-color:#9A7A45;
}
/* Keep the whole category card coherent while preserving semantic overdue red. */
#tasksPage .task-card-v60.task-kind-project{--task-accent:var(--task-project-color)!important}
#tasksPage .task-card-v60.task-kind-course{--task-accent:var(--task-course-color)!important}
#tasksPage .task-card-v60.task-kind-general{--task-accent:var(--task-general-color)!important}
#tasksPage .task-card-v60.is-overdue .task-overdue-chip,
#tasksPage .task-card-v60.is-overdue .workflow-state.danger{
  background:#fff1f0!important;
  border-color:#ffc9c5!important;
  color:#b42318!important;
}

/* ===== Riwaq v7.3.30 — workflow buttons must belong to their task card =====
   Final rule: the card category owns EVERY workflow control.
   No appearance/theme colour is allowed to leak into task-state buttons. */
#tasksPage .task-card-v60.task-kind-project .task-state-segment button.active,
#tasksPage .task-card-v60.task-kind-project .task-state-segment button[aria-pressed="true"],
#tasksPage .task-card-v60.task-kind-project .workflow-primary:not(:disabled),
#tasksPage .task-card-v60.task-kind-project .task-actions-v60>.btn.primary,
#tasksPage .task-card-v60.task-kind-project .admin-task-actions>.btn.primary{
  background:var(--task-project-color)!important;
  background-image:none!important;
  border-color:var(--task-project-color)!important;
  color:#fff!important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--task-project-color) 20%,transparent)!important;
}
#tasksPage .task-card-v60.task-kind-course .task-state-segment button.active,
#tasksPage .task-card-v60.task-kind-course .task-state-segment button[aria-pressed="true"],
#tasksPage .task-card-v60.task-kind-course .workflow-primary:not(:disabled),
#tasksPage .task-card-v60.task-kind-course .task-actions-v60>.btn.primary,
#tasksPage .task-card-v60.task-kind-course .admin-task-actions>.btn.primary{
  background:var(--task-course-color)!important;
  background-image:none!important;
  border-color:var(--task-course-color)!important;
  color:#fff!important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--task-course-color) 20%,transparent)!important;
}
#tasksPage .task-card-v60.task-kind-general .task-state-segment button.active,
#tasksPage .task-card-v60.task-kind-general .task-state-segment button[aria-pressed="true"],
#tasksPage .task-card-v60.task-kind-general .workflow-primary:not(:disabled),
#tasksPage .task-card-v60.task-kind-general .task-actions-v60>.btn.primary,
#tasksPage .task-card-v60.task-kind-general .admin-task-actions>.btn.primary{
  background:var(--task-general-color)!important;
  background-image:none!important;
  border-color:var(--task-general-color)!important;
  color:#fff!important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--task-general-color) 20%,transparent)!important;
}
/* Inactive workflow buttons are a soft tint of the SAME category colour. */
#tasksPage .task-card-v60.task-kind-project .task-state-segment button:not(.active),
#tasksPage .task-card-v60.task-kind-project .workflow-completed:disabled{
  background:color-mix(in srgb,var(--task-project-color) 8%,var(--panel))!important;
  border-color:color-mix(in srgb,var(--task-project-color) 30%,var(--line))!important;
  color:color-mix(in srgb,var(--task-project-color) 78%,var(--text))!important;
}
#tasksPage .task-card-v60.task-kind-course .task-state-segment button:not(.active),
#tasksPage .task-card-v60.task-kind-course .workflow-completed:disabled{
  background:color-mix(in srgb,var(--task-course-color) 8%,var(--panel))!important;
  border-color:color-mix(in srgb,var(--task-course-color) 30%,var(--line))!important;
  color:color-mix(in srgb,var(--task-course-color) 78%,var(--text))!important;
}
#tasksPage .task-card-v60.task-kind-general .task-state-segment button:not(.active),
#tasksPage .task-card-v60.task-kind-general .workflow-completed:disabled{
  background:color-mix(in srgb,var(--task-general-color) 8%,var(--panel))!important;
  border-color:color-mix(in srgb,var(--task-general-color) 30%,var(--line))!important;
  color:color-mix(in srgb,var(--task-general-color) 78%,var(--text))!important;
}

/* ===== Riwaq v7.3.30 — ONE-TONE task cards =====
   Non-negotiable visual rule:
   1) Each task card has exactly ONE category hue.
   2) The hue is curated for the active appearance, but deliberately NOT the appearance's own primary hue.
   3) Every category-bearing element uses that same hue; only opacity/lightness changes.
   4) Semantic overdue remains red as the sole exception. */

/* Curated companion hues by appearance. Each trio is harmonized with, but separated from, the theme. */
html[data-riwaq-theme="classic"] #tasksPage{
  --task-project-color:#6B5F88; --task-course-color:#3E7C72; --task-general-color:#9B6B42;
}
html[data-riwaq-theme="navy"] #tasksPage{
  --task-project-color:#806080; --task-course-color:#477D69; --task-general-color:#9B7046;
}
html[data-riwaq-theme="burgundy"] #tasksPage{
  --task-project-color:#55728B; --task-course-color:#647B58; --task-general-color:#9A7041;
}
html[data-riwaq-theme="sand"] #tasksPage{
  --task-project-color:#596F8D; --task-course-color:#4D7D76; --task-general-color:#98586D;
}
html[data-riwaq-theme="violet"] #tasksPage{
  --task-project-color:#397B75; --task-course-color:#6D7950; --task-general-color:#9B6844;
}
html[data-riwaq-theme="charcoal"] #tasksPage{
  --task-project-color:#775F82; --task-course-color:#477E78; --task-general-color:#94704B;
}
#tasksPage{
  --task-project-color:#6B5F88; --task-course-color:#3E7C72; --task-general-color:#9B6B42;
}
#tasksPage .task-card-v60.task-kind-project{--task-accent:var(--task-project-color)!important}
#tasksPage .task-card-v60.task-kind-course{--task-accent:var(--task-course-color)!important}
#tasksPage .task-card-v60.task-kind-general{--task-accent:var(--task-general-color)!important}

/* Card shell: one hue, softly washed — no theme primary leakage. */
#tasksPage .task-card-v60{
  --task-ink:color-mix(in srgb,var(--task-accent) 86%,#172433);
  --task-wash:color-mix(in srgb,var(--task-accent) 7%,var(--panel));
  --task-wash-strong:color-mix(in srgb,var(--task-accent) 12%,var(--panel));
  --task-line:color-mix(in srgb,var(--task-accent) 34%,var(--line));
  background:linear-gradient(145deg,var(--task-wash),var(--panel) 72%)!important;
  border:1px solid var(--task-line)!important;
  box-shadow:0 8px 22px color-mix(in srgb,var(--task-accent) 9%,transparent)!important;
}
#tasksPage .task-card-v60::before{display:none!important;content:none!important}
#tasksPage .task-card-v60::after{
  content:""!important;display:block!important;position:absolute!important;
  inset-inline:0!important;top:0!important;height:5px!important;
  background:var(--task-accent)!important;border-radius:inherit!important;
}

/* Every identity element uses the exact same category hue. */
#tasksPage .task-card-v60 .task-kind-chip{
  background:var(--task-accent)!important;border-color:var(--task-accent)!important;color:#fff!important;
}
#tasksPage .task-card-v60 h3,
#tasksPage .task-card-v60 .task-dual-date,
#tasksPage .task-card-v60 .task-progress-row b{
  color:var(--task-ink)!important;
}
#tasksPage .task-card-v60 .task-description,
#tasksPage .task-card-v60 .task-progress-row small{
  color:color-mix(in srgb,var(--task-ink) 58%,var(--muted))!important;
}
#tasksPage .task-card-v60 .task-fact,
#tasksPage .task-card-v60.is-completed .task-fact,
#tasksPage .task-card-v60 .task-fact.workflow-state:not(.danger){
  background:var(--task-wash-strong)!important;
  border-color:var(--task-line)!important;
}
#tasksPage .task-card-v60 .task-fact small{color:color-mix(in srgb,var(--task-ink) 54%,var(--muted))!important}
#tasksPage .task-card-v60 .task-fact strong{color:var(--task-ink)!important}

/* Progress: the same exact hue. */
#tasksPage .task-card-v60 .progress{
  background:color-mix(in srgb,var(--task-accent) 8%,var(--panel2))!important;
  border-color:color-mix(in srgb,var(--task-accent) 26%,var(--line))!important;
}
#tasksPage .task-card-v60 .progress i,
#tasksPage .task-card-v60.is-completed .progress i{
  background:var(--task-accent)!important;background-image:none!important;
}

/* Workflow container + ALL buttons: one hue only. */
#tasksPage .task-card-v60 .task-state-segment{
  background:color-mix(in srgb,var(--task-accent) 7%,var(--panel2))!important;
  border-color:var(--task-line)!important;
}
#tasksPage .task-card-v60 .task-state-segment button,
#tasksPage .task-card-v60 .task-actions-v60>.btn:not(.danger),
#tasksPage .task-card-v60 .admin-task-actions>.btn:not(.danger),
#tasksPage .task-card-v60 .workflow-completed{
  background:color-mix(in srgb,var(--task-accent) 6%,var(--panel))!important;
  background-image:none!important;
  color:var(--task-ink)!important;
  border-color:color-mix(in srgb,var(--task-accent) 30%,var(--line))!important;
  box-shadow:none!important;
}
#tasksPage .task-card-v60 .task-state-segment button:hover,
#tasksPage .task-card-v60 .task-actions-v60>.btn:not(.danger):hover,
#tasksPage .task-card-v60 .admin-task-actions>.btn:not(.danger):hover{
  background:color-mix(in srgb,var(--task-accent) 13%,var(--panel))!important;
  color:var(--task-ink)!important;
}
#tasksPage .task-card-v60 .task-state-segment button.active,
#tasksPage .task-card-v60 .task-state-segment button[aria-pressed="true"],
#tasksPage .task-card-v60 .task-state-segment button[data-state="done"].active,
#tasksPage .task-card-v60 .workflow-primary:not(:disabled),
#tasksPage .task-card-v60 .task-actions-v60>.btn.primary,
#tasksPage .task-card-v60 .admin-task-actions>.btn.primary{
  background:var(--task-accent)!important;background-image:none!important;
  border-color:var(--task-accent)!important;color:#fff!important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--task-accent) 20%,transparent)!important;
}
#tasksPage .task-card-v60 .task-completed-mark{
  background:color-mix(in srgb,var(--task-accent) 8%,var(--panel))!important;
  color:var(--task-ink)!important;border-color:color-mix(in srgb,var(--task-accent) 32%,var(--line))!important;
}

/* Semantic exception: overdue is red, and ONLY overdue is red. */
#tasksPage .task-overdue-chip,
#tasksPage .task-card-v60.is-overdue .workflow-state.danger{
  background:#fff1f0!important;color:#b42318!important;border-color:#ffc9c5!important;
}
#tasksPage .task-card-v60.is-overdue .workflow-state.danger small,
#tasksPage .task-card-v60.is-overdue .workflow-state.danger strong{color:#b42318!important}

/* ===== Riwaq v7.3.30 — hard lock: project workflow button = project card colour =====
   This deliberately uses the same literal companion colour for the project card identity
   and its active workflow state, so no theme primary/accent rule can leak into the button. */
/* v7.3.33 cleanup: removed obsolete project-only theme hard-locks.
   Project, course and general cards now all inherit their accent ONLY from
   the three page-level palette variables in the authoritative block below. */

/* ===== Riwaq v7.3.33 — FINAL / SINGLE-SOURCE task card colour system =====
   Locked design contract:
   - Every appearance owns exactly THREE coordinated task colours.
   - None of those colours is the appearance primary/strong/sidebar colour.
   - Each task card uses ONE hue end-to-end: shell, title, chip, facts, progress, and ALL buttons.
   - Only semantic overdue status is red.
   - This block is intentionally last and authoritative. */

/* Curated companion palettes: harmonious with each appearance, never identical to it. */
html[data-riwaq-theme="classic"] #tasksPage{--task-project-color:#6B5F88;--task-course-color:#3E7C72;--task-general-color:#9B6B42}
html[data-riwaq-theme="navy"] #tasksPage{--task-project-color:#806080;--task-course-color:#477D69;--task-general-color:#9B7046}
html[data-riwaq-theme="burgundy"] #tasksPage{--task-project-color:#55728B;--task-course-color:#647B58;--task-general-color:#9A7041}
html[data-riwaq-theme="sand"] #tasksPage{--task-project-color:#596F8D;--task-course-color:#4D7D76;--task-general-color:#98586D}
html[data-riwaq-theme="violet"] #tasksPage{--task-project-color:#397B75;--task-course-color:#6D7950;--task-general-color:#9B6844}
html[data-riwaq-theme="charcoal"] #tasksPage{--task-project-color:#775F82;--task-course-color:#477E78;--task-general-color:#94704B}
#tasksPage{--task-project-color:#6B5F88;--task-course-color:#3E7C72;--task-general-color:#9B6B42}

#tasksPage .task-card-v60.task-kind-project{--task-accent:var(--task-project-color)!important}
#tasksPage .task-card-v60.task-kind-course{--task-accent:var(--task-course-color)!important}
#tasksPage .task-card-v60.task-kind-general{--task-accent:var(--task-general-color)!important}

#tasksPage .task-card-v60{
  --task-ink:color-mix(in srgb,var(--task-accent) 88%,#172433);
  --task-soft:color-mix(in srgb,var(--task-accent) 7%,var(--panel));
  --task-soft-2:color-mix(in srgb,var(--task-accent) 13%,var(--panel));
  --task-border:color-mix(in srgb,var(--task-accent) 38%,var(--line));
  position:relative!important;
  border:1.5px solid var(--task-border)!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,var(--task-soft),var(--panel) 70%)!important;
  box-shadow:0 9px 24px color-mix(in srgb,var(--task-accent) 10%,transparent)!important;
  overflow:hidden!important;
}
#tasksPage .task-card-v60::before{display:none!important;content:none!important}
#tasksPage .task-card-v60::after{
  content:""!important;display:block!important;position:absolute!important;
  inset-inline:0!important;top:0!important;height:5px!important;background:var(--task-accent)!important;
}

/* Identity / content */
#tasksPage .task-card-v60 .task-kind-chip{
  background:var(--task-accent)!important;background-image:none!important;
  border-color:var(--task-accent)!important;color:#fff!important;box-shadow:none!important;
}
#tasksPage .task-card-v60 h3,
#tasksPage .task-card-v60 .task-card-title,
#tasksPage .task-card-v60 .task-dual-date,
#tasksPage .task-card-v60 .task-progress-row b{color:var(--task-ink)!important}
#tasksPage .task-card-v60 .task-description,
#tasksPage .task-card-v60 .task-progress-row small{color:color-mix(in srgb,var(--task-ink) 58%,var(--muted))!important}
#tasksPage .task-card-v60 .task-card-top{border-bottom-color:color-mix(in srgb,var(--task-accent) 20%,var(--line))!important}

#tasksPage .task-card-v60 .task-fact,
#tasksPage .task-card-v60.is-completed .task-fact,
#tasksPage .task-card-v60 .task-fact.workflow-state:not(.danger){
  background:var(--task-soft-2)!important;border-color:var(--task-border)!important;box-shadow:none!important;
}
#tasksPage .task-card-v60 .task-fact small{color:color-mix(in srgb,var(--task-ink) 54%,var(--muted))!important}
#tasksPage .task-card-v60 .task-fact strong{color:var(--task-ink)!important}

/* Progress */
#tasksPage .task-card-v60 .progress{
  background:color-mix(in srgb,var(--task-accent) 8%,var(--panel2))!important;
  border-color:color-mix(in srgb,var(--task-accent) 28%,var(--line))!important;
}
#tasksPage .task-card-v60 .progress i,
#tasksPage .task-card-v60.is-completed .progress i{
  background:var(--task-accent)!important;background-image:none!important;
}

/* Workflow — every button belongs to the card hue. No theme primary leakage. */
#tasksPage .task-card-v60 .task-state-segment{
  background:color-mix(in srgb,var(--task-accent) 7%,var(--panel2))!important;
  border-color:var(--task-border)!important;box-shadow:none!important;
}
#tasksPage .task-card-v60 .task-state-segment button,
#tasksPage .task-card-v60 .workflow-primary,
#tasksPage .task-card-v60 .workflow-completed,
#tasksPage .task-card-v60 .task-actions-v60>.btn:not(.danger),
#tasksPage .task-card-v60 .admin-task-actions>.btn:not(.danger){
  background:color-mix(in srgb,var(--task-accent) 7%,var(--panel))!important;
  background-image:none!important;color:var(--task-ink)!important;
  border-color:color-mix(in srgb,var(--task-accent) 32%,var(--line))!important;
  box-shadow:none!important;
}
#tasksPage .task-card-v60 .task-state-segment button:hover,
#tasksPage .task-card-v60 .workflow-primary:hover,
#tasksPage .task-card-v60 .task-actions-v60>.btn:not(.danger):hover,
#tasksPage .task-card-v60 .admin-task-actions>.btn:not(.danger):hover{
  background:var(--task-soft-2)!important;color:var(--task-ink)!important;
  border-color:color-mix(in srgb,var(--task-accent) 56%,var(--line))!important;
}
#tasksPage .task-card-v60 .task-state-segment button.active,
#tasksPage .task-card-v60 .task-state-segment button[aria-pressed="true"],
#tasksPage .task-card-v60 .task-state-segment button[data-state="done"].active,
#tasksPage .task-card-v60 .workflow-primary:not(:disabled),
#tasksPage .task-card-v60 .task-actions-v60>.btn.primary,
#tasksPage .task-card-v60 .admin-task-actions>.btn.primary{
  background:var(--task-accent)!important;background-image:none!important;
  border-color:var(--task-accent)!important;color:#fff!important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--task-accent) 20%,transparent)!important;
}
#tasksPage .task-card-v60 .workflow-completed:disabled,
#tasksPage .task-card-v60 .task-completed-mark{
  opacity:1!important;background:var(--task-soft-2)!important;color:var(--task-ink)!important;
  border-color:var(--task-border)!important;
}

/* Semantic exception only: overdue = red. */
#tasksPage .task-overdue-chip,
#tasksPage .task-card-v60.is-overdue .workflow-state.danger{
  background:#fff1f0!important;color:#b42318!important;border-color:#ffc9c5!important;
}
#tasksPage .task-card-v60.is-overdue .workflow-state.danger small,
#tasksPage .task-card-v60.is-overdue .workflow-state.danger strong{color:#b42318!important}

/* ===== Riwaq v7.3.33 — hard single-hue lock for task cards =====
   The task card now receives --task-accent as a literal inline value from app.js.
   Every visual part reads that exact value; no theme primary can leak in. */
#tasksPage .task-card-v60{
  --task-ink:color-mix(in srgb,var(--task-accent) 86%,#172433)!important;
  --task-soft:color-mix(in srgb,var(--task-accent) 7%,var(--panel))!important;
  --task-soft-2:color-mix(in srgb,var(--task-accent) 13%,var(--panel))!important;
  --task-border:color-mix(in srgb,var(--task-accent) 40%,var(--line))!important;
  border-color:var(--task-border)!important;
  background:linear-gradient(145deg,var(--task-soft),var(--panel) 72%)!important;
}
#tasksPage .task-card-v60::after{background:var(--task-accent)!important;background-image:none!important}
#tasksPage .task-card-v60 .task-kind-chip{background:var(--task-accent)!important;border-color:var(--task-accent)!important;color:#fff!important}
#tasksPage .task-card-v60 h3,
#tasksPage .task-card-v60 .task-card-title,
#tasksPage .task-card-v60 .task-dual-date,
#tasksPage .task-card-v60 .task-progress-row>b{color:var(--task-ink)!important}
#tasksPage .task-card-v60 .task-fact:not(.danger){background:var(--task-soft-2)!important;border-color:var(--task-border)!important}
#tasksPage .task-card-v60 .task-fact:not(.danger) small,
#tasksPage .task-card-v60 .task-fact:not(.danger) strong{color:var(--task-ink)!important}
#tasksPage .task-card-v60 .progress i{background:var(--task-accent)!important;background-image:none!important}
#tasksPage .task-card-v60 .task-state-segment{background:var(--task-soft)!important;border-color:var(--task-border)!important}
#tasksPage .task-card-v60 .task-state-segment button{
  background:color-mix(in srgb,var(--task-accent) 7%,var(--panel))!important;
  background-image:none!important;
  border:1px solid color-mix(in srgb,var(--task-accent) 32%,var(--line))!important;
  color:var(--task-ink)!important;
  box-shadow:none!important;
}
#tasksPage .task-card-v60 .task-state-segment button.active,
#tasksPage .task-card-v60 .task-state-segment button[aria-pressed="true"]{
  background:var(--task-accent)!important;
  background-image:none!important;
  border-color:var(--task-accent)!important;
  color:#fff!important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--task-accent) 20%,transparent)!important;
}
#tasksPage .task-card-v60 .task-actions-v60>.btn:not(.danger),
#tasksPage .task-card-v60 .admin-task-actions>.btn:not(.danger){
  background:color-mix(in srgb,var(--task-accent) 7%,var(--panel))!important;
  background-image:none!important;
  border-color:color-mix(in srgb,var(--task-accent) 32%,var(--line))!important;
  color:var(--task-ink)!important;
}
#tasksPage .task-card-v60 .task-actions-v60>.btn.primary,
#tasksPage .task-card-v60 .admin-task-actions>.btn.primary{
  background:var(--task-accent)!important;background-image:none!important;border-color:var(--task-accent)!important;color:#fff!important;
}
/* Semantic red is the only permitted exception. */
#tasksPage .task-overdue-chip,
#tasksPage .task-card-v60.is-overdue .workflow-state.danger{background:#fff1f0!important;border-color:#ffc9c5!important;color:#b42318!important}
#tasksPage .task-card-v60.is-overdue .workflow-state.danger small,
#tasksPage .task-card-v60.is-overdue .workflow-state.danger strong{color:#b42318!important}

/* Project list: visible destructive action without entering the workspace. */
.v492-card-delete-project{margin-top:8px;justify-self:end}

/* v7.5.26 — لوحة «يحتاج تدخّلك» في صفحة الإدارة.
   التصميم يخدم القاعدة: كل بطاقة عدد + سبب + أسماء. لا رسوم ولا ترتيب أشخاص. */
.admin-attention{margin-bottom:18px}
.admin-attention .attention-head{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
.admin-attention .attention-head h3{margin:0;font-size:calc(1.15rem * var(--font-scale))}
.admin-attention .attention-term{font-size:calc(.78rem * var(--font-scale));opacity:.6}
.admin-attention .attention-clear{margin:10px 0 0;padding:14px 16px;border-radius:14px;
  background:color-mix(in srgb,var(--success,#2f7d5f) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--success,#2f7d5f) 22%,transparent);font-size:calc(.9rem * var(--font-scale))}
.admin-attention .attention-grid{display:grid;gap:12px;margin-top:12px;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.admin-attention .attention-row{border:1px solid var(--line,#e3e8e6);border-radius:16px;padding:14px 16px;
  background:var(--panel,#fff);display:flex;flex-direction:column;gap:8px}
.admin-attention .attention-row header{display:flex;align-items:baseline;gap:10px}
.admin-attention .attention-row header b{font-size:calc(1.7rem * var(--font-scale));line-height:1;font-variant-numeric:tabular-nums}
.admin-attention .attention-row header span{font-size:calc(.9rem * var(--font-scale));font-weight:600}
.admin-attention .attention-why{margin:0;font-size:calc(.76rem * var(--font-scale));opacity:.62;line-height:1.5}
.admin-attention .attention-row ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.admin-attention .attention-row li{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  font-size:calc(.84rem * var(--font-scale));padding-inline-start:12px;position:relative}
.admin-attention .attention-row li::before{content:'';position:absolute;inset-inline-start:0;top:.5em;
  width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.45}
.admin-attention .attention-row li em{font-style:normal;font-size:calc(.74rem * var(--font-scale));opacity:.6;white-space:nowrap}
.admin-attention .attention-more{margin:0;font-size:calc(.74rem * var(--font-scale));opacity:.55}
.admin-attention .attention-row.bad{border-color:color-mix(in srgb,var(--danger,#b3261e) 32%,var(--line,#e3e8e6))}
.admin-attention .attention-row.bad header b{color:var(--danger,#b3261e)}
.admin-attention .attention-row.warn{border-color:color-mix(in srgb,var(--warn,#a8761b) 30%,var(--line,#e3e8e6))}
.admin-attention .attention-row.warn header b{color:var(--warn,#a8761b)}
.admin-attention .attention-row.info header b{color:var(--primary,#1f6f52)}
@media(max-width:640px){.admin-attention .attention-grid{grid-template-columns:1fr}}

/* v7.5.27 — المكتبة الرسمية في وضع المدير: التغطية لا الملكية. */
.admin-library-stats{display:grid;gap:10px;margin:14px 0 6px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.admin-library-stats article{border:1px solid var(--line,#e3e8e6);border-radius:14px;
  padding:12px 14px;background:var(--panel,#fff);display:flex;flex-direction:column;gap:2px}
.admin-library-stats article b{font-size:calc(1.6rem * var(--font-scale));line-height:1;font-variant-numeric:tabular-nums}
.admin-library-stats article span{font-size:calc(.76rem * var(--font-scale));opacity:.62}
.admin-library-stats article.bad{border-color:color-mix(in srgb,var(--danger,#b3261e) 34%,var(--line,#e3e8e6))}
.admin-library-stats article.bad b{color:var(--danger,#b3261e)}
.admin-library-stats article.ok b{color:var(--success,#2f7d5f)}
.admin-coverage-table{width:100%;border-collapse:collapse;font-size:calc(.88rem * var(--font-scale))}
.admin-coverage-table th{text-align:start;font-size:calc(.74rem * var(--font-scale));opacity:.6;font-weight:600;
  padding:6px 10px;border-bottom:1px solid var(--line,#e3e8e6)}
.admin-coverage-table td{padding:9px 10px;border-bottom:1px solid color-mix(in srgb,var(--line,#e3e8e6) 55%,transparent)}
.admin-coverage-table td.num,.admin-coverage-table td.size{font-variant-numeric:tabular-nums;opacity:.8;width:1%;white-space:nowrap}
.admin-coverage-table td.state{width:1%;white-space:nowrap}
.admin-coverage-table tr.is-empty td.course{font-weight:700}
.admin-coverage-table tr.is-empty{background:color-mix(in srgb,var(--danger,#b3261e) 5%,transparent)}
.admin-coverage-table .pill{font-size:calc(.72rem * var(--font-scale));padding:3px 9px;border-radius:999px;display:inline-block}
.admin-coverage-table .pill.ok{background:color-mix(in srgb,var(--success,#2f7d5f) 12%,transparent);color:var(--success,#2f7d5f)}
.admin-coverage-table .pill.bad{background:color-mix(in srgb,var(--danger,#b3261e) 12%,transparent);color:var(--danger,#b3261e)}
.admin-library-note{margin:12px 0 0;font-size:calc(.8rem * var(--font-scale));opacity:.68}
.admin-shared-refs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.admin-shared-refs li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:9px 12px;border:1px solid var(--line,#e3e8e6);border-radius:12px}
.admin-shared-refs li em{font-style:normal;font-size:calc(.76rem * var(--font-scale));opacity:.6;white-space:nowrap}
@media(max-width:640px){
  .admin-coverage-table td.size,.admin-coverage-table th:nth-child(4){display:none}
  .admin-shared-refs li{flex-direction:column;gap:3px}
}

/* v7.5.28 — الإشراف على المحتوى ومتابعة الطلاب. */
.admin-duplicates{margin-bottom:14px;border-color:color-mix(in srgb,var(--warn,#a8761b) 35%,var(--line,#e3e8e6))}
.admin-duplicates h4{margin:0 0 4px;font-size:calc(.95rem * var(--font-scale))}
.admin-duplicates .dup-group{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line,#e3e8e6)}
.admin-duplicates .dup-group ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.admin-duplicates .dup-group li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:calc(.82rem * var(--font-scale))}
.admin-file-list{margin-top:16px}
.admin-file-list h4{margin:0 0 8px;font-size:calc(.9rem * var(--font-scale));opacity:.75}
.admin-file-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.admin-file-list li,.admin-shared-refs li{display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:9px 12px;border:1px solid var(--line,#e3e8e6);border-radius:12px}
.admin-file-list li em{display:block;font-style:normal;font-size:calc(.74rem * var(--font-scale));opacity:.6;margin-top:2px}
.admin-followup-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.admin-followup-list li{display:flex;align-items:center;gap:10px;padding:10px 13px;
  border:1px solid var(--line,#e3e8e6);border-radius:13px}
.admin-followup-list li div{flex:1;min-width:0}
.admin-followup-list li em{display:block;font-style:normal;font-size:calc(.74rem * var(--font-scale));opacity:.58;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-followup .pill{font-size:calc(.73rem * var(--font-scale));padding:3px 10px;border-radius:999px;white-space:nowrap;
  background:color-mix(in srgb,var(--line,#e3e8e6) 60%,transparent)}
.admin-followup .pill.bad{background:color-mix(in srgb,var(--danger,#b3261e) 12%,transparent);color:var(--danger,#b3261e)}
.admin-followup-plans{margin-top:16px;padding-top:14px;border-top:1px solid var(--line,#e3e8e6)}
.admin-followup-plans h4{margin:0 0 8px;font-size:calc(.9rem * var(--font-scale));opacity:.75}
.admin-followup-plans ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.admin-followup-plans li{display:flex;justify-content:space-between;gap:10px;font-size:calc(.83rem * var(--font-scale))}
.admin-followup-plans li em{font-style:normal;font-size:calc(.75rem * var(--font-scale));opacity:.6}
.workspace-tabs.single-tab{display:none}
@media(max-width:640px){
  .admin-file-list li,.admin-shared-refs li,.admin-followup-list li{flex-wrap:wrap}
}

/* v7.5.32 — شريط التراجع عن تفعيل الفصل. */
.semester-undo{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:14px 16px;margin-bottom:14px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--warn,#a8761b) 40%,var(--line,#e3e8e6));
  background:color-mix(in srgb,var(--warn,#a8761b) 7%,transparent)}
.semester-undo strong{display:block;font-size:calc(.95rem * var(--font-scale));margin-bottom:3px}
.semester-undo p{margin:0;font-size:calc(.8rem * var(--font-scale));opacity:.75;line-height:1.6;max-width:62ch}

/* v7.5.34 — فترات الإجازة داخل نافذة مواعيد الدراسة. */
.study-holidays{border:1px solid var(--line,#e3e8e6);border-radius:14px;padding:12px 14px;
  display:flex;flex-direction:column;gap:10px}
.study-holidays-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.study-holidays-head strong{display:block;font-size:calc(.92rem * var(--font-scale))}
.study-holidays-head small{display:block;font-size:calc(.74rem * var(--font-scale));opacity:.62;margin-top:2px;max-width:52ch;line-height:1.5}
.study-holidays-rows{display:flex;flex-direction:column;gap:8px}
.study-holidays-empty{margin:0;font-size:calc(.78rem * var(--font-scale));opacity:.55}
.study-holiday-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.study-holiday-row label{display:flex;flex-direction:column;gap:3px;margin:0}
.study-holiday-row label.grow{flex:1;min-width:150px}
.study-holiday-row small{font-size:calc(.7rem * var(--font-scale));opacity:.6}
.study-holiday-row input{margin:0}
.preview-holidays{display:block;width:100%;margin-top:4px;font-size:calc(.74rem * var(--font-scale));opacity:.66}
@media(max-width:560px){.study-holiday-row{flex-direction:column;align-items:stretch}
  .study-holiday-row label.grow{min-width:0}}

/* v7.5.43 — لوحة تذكيرات المواعيد. */
.reminder-settings{margin-top:14px}
.reminder-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.reminder-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line,#e3e8e6);cursor:pointer;font-size:calc(.84rem * var(--font-scale));user-select:none;
  transition:background .15s,border-color .15s}
.reminder-chip input{margin:0;accent-color:var(--primary,#1f6f52)}
.reminder-chip.on{border-color:color-mix(in srgb,var(--primary,#1f6f52) 45%,var(--line,#e3e8e6));
  background:color-mix(in srgb,var(--primary,#1f6f52) 9%,transparent);font-weight:600}
.reminder-settings .field-help{display:block;margin-top:10px;font-size:calc(.75rem * var(--font-scale));opacity:.62;line-height:1.6}

/* v7.5.44 — إعادة حساب جمهور الملفات. */
.admin-library-repair{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:14px;padding:12px 14px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--warn,#a8761b) 32%,var(--line,#e3e8e6));
  background:color-mix(in srgb,var(--warn,#a8761b) 6%,transparent)}
.admin-library-repair strong{display:block;font-size:calc(.88rem * var(--font-scale))}
.admin-library-repair small{display:block;font-size:calc(.75rem * var(--font-scale));opacity:.68;margin-top:2px;max-width:56ch;line-height:1.55}

/* v7.5.49 — سجل المفردات: الحالة والمكان والعرض. */
.plan-strip{display:flex;gap:4px;margin:12px 0 6px;flex-wrap:wrap}
.plan-strip .plan-cell{flex:1;min-width:26px;height:34px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-style:normal;font-size:calc(.7rem * var(--font-scale));font-weight:700;position:relative;
  background:color-mix(in srgb,var(--line,#e3e8e6) 55%,transparent);color:inherit;opacity:.75}
.plan-strip .plan-cell.state-archived{background:color-mix(in srgb,var(--success,#2f7d5f) 26%,transparent);opacity:1}
.plan-strip .plan-cell.state-awaiting{background:color-mix(in srgb,var(--warn,#a8761b) 34%,transparent);opacity:1}
.plan-strip .plan-cell.state-today{background:color-mix(in srgb,var(--primary,#1f6f52) 40%,transparent);opacity:1;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--primary,#1f6f52) 45%,transparent)}
.plan-strip .plan-cell.is-remote::after{content:'';position:absolute;top:3px;inset-inline-end:3px;
  width:5px;height:5px;border-radius:50%;background:var(--primary,#1f6f52)}
.plan-strip-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:calc(.73rem * var(--font-scale));opacity:.7;margin-bottom:10px}
.plan-strip-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:4px;
  background:color-mix(in srgb,var(--line,#e3e8e6) 55%,transparent)}
.plan-strip-legend i.state-archived{background:color-mix(in srgb,var(--success,#2f7d5f) 26%,transparent)}
.plan-strip-legend i.state-awaiting{background:color-mix(in srgb,var(--warn,#a8761b) 34%,transparent)}
.plan-strip-legend i.state-today{background:color-mix(in srgb,var(--primary,#1f6f52) 40%,transparent)}
.week-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:7px;font-size:calc(.76rem * var(--font-scale))}
.week-state-badge{padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--line,#e3e8e6) 60%,transparent)}
.week-state-badge.state-awaiting{background:color-mix(in srgb,var(--warn,#a8761b) 16%,transparent);color:var(--warn,#a8761b);font-weight:600}
.week-state-badge.state-archived{background:color-mix(in srgb,var(--success,#2f7d5f) 14%,transparent);color:var(--success,#2f7d5f)}
.week-state-badge.state-today{background:color-mix(in srgb,var(--primary,#1f6f52) 16%,transparent);color:var(--primary,#1f6f52);font-weight:600}
.week-place{opacity:.75}.week-place.warn{color:var(--warn,#a8761b)}
.week-date{opacity:.6;font-variant-numeric:tabular-nums}
.week-deck{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:9px}
.week-deck small{font-size:calc(.73rem * var(--font-scale));opacity:.62}
.week-row.state-awaiting{border-inline-start:3px solid color-mix(in srgb,var(--warn,#a8761b) 60%,transparent)}
.week-row.state-archived{border-inline-start:3px solid color-mix(in srgb,var(--success,#2f7d5f) 45%,transparent)}
.live-lecture{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 18px;margin-bottom:14px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--primary,#1f6f52) 40%,transparent);
  background:color-mix(in srgb,var(--primary,#1f6f52) 9%,transparent)}
.live-lecture strong{display:block;font-size:calc(.98rem * var(--font-scale))}
.live-lecture small{display:block;font-size:calc(.78rem * var(--font-scale));opacity:.7;margin-top:2px}
@media(max-width:640px){.plan-strip .plan-cell{min-width:20px;height:28px}}

/* v7.5.50 — فترة الاختبارات النهائية. */
.study-exams{border:1px solid color-mix(in srgb,var(--primary,#1f6f52) 26%,var(--line,#e3e8e6));
  border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;
  background:color-mix(in srgb,var(--primary,#1f6f52) 5%,transparent)}

/* v7.5.52 — الشعبة غير المطروحة. */
.course-unoffered{background:color-mix(in srgb,var(--line,#e3e8e6) 70%,transparent);
  font-size:calc(.72rem * var(--font-scale));padding:3px 9px;border-radius:999px;opacity:.85}

/* v7.5.53 — أدوات تحديد المقدِّمين. */
.presenter-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.presenter-tools input[type="search"]{flex:1;min-width:160px;margin:0}

/* v7.5.74 — إصلاح تخطيط بطاقة المقرر.
   بطاقة المقرر لا تضع حشوًا على الحاوية؛ كل قسم يضع إزاحته بنفسه (الترويسة 20px،
   و«مطلوب منك الآن» margin:0 20px). وقواعدي في v7.5.67 أسقطت هذه الإزاحة، فامتدت
   عناصري من حافة إلى حافة وبدت **خارج** البطاقة. والأزرار فقدت شبكتها الرباعية معها.
   القاعدة: عنصر يُضاف إلى بطاقة لا يخترع إزاحته — يأخذ إزاحة إخوته. */

/* v7.5.80: الرقم هو الرسالة، والشريط تابع له.
   «2/15» كانت بحجم .78rem وبعتامة .7 — أي رمادية صغيرة — والشريط عند 13% يظهر نقطة
   لا خطًا. فالمعلومة الوحيدة في الترويسة كانت أصعب ما يُقرأ فيها.
   الآن: الرقم أكبر وأعتم وبلون المظهر، والشريط أطول وله حد أدنى فلا يصير نقطة. */
/* v7.5.82: أزلتُ الإطار — وهو أصل العلة.
   عدّلتُ flex ثلاث مرات: ملء العرض ← الفراغ داخل الصندوق · تقلّص ← الفراغ حوله.
   والسبب أن سطرًا واحدًا قصيرًا داخل إطار عرضه ألفا بكسل يبدو فارغًا مهما وُزِّع محتواه.
   فالسطر الآن **سطر** لا صندوق: بلا حد ولا خلفية، ملتصق بترويسة البطاقة كسطر معلومات
   ثالث بعد اسم الأستاذ. لا إطار ⇒ لا فراغ يُرى. والنقر باقٍ، والتمرير يلوّن النص. */
.course-week-line{display:flex;align-items:center;gap:9px;width:auto;text-align:start;
  margin:-2px 20px 8px;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit;
  transition:color .15s}
.course-week-line:hover{color:var(--primary)}
.course-week-line:hover strong{text-decoration:underline;text-underline-offset:3px}
.course-week-line b{flex:none;font-size:calc(.84rem * var(--font-scale));font-weight:700;padding:3px 10px;border-radius:99px;
  background:color-mix(in srgb,var(--primary) 13%,transparent);color:var(--primary);white-space:nowrap}
.course-week-line strong{flex:none;font-size:calc(1rem * var(--font-scale));font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:46ch}
.course-week-line small{flex:none;font-size:calc(.86rem * var(--font-scale));opacity:.65;white-space:nowrap}
.course-week-line small::before{content:'·';margin-inline-end:8px;opacity:.5}
.course-week-line i{flex:none;opacity:.4;font-style:normal;font-size:calc(.9rem * var(--font-scale))}
.course-week-line:not(.has-value) strong{opacity:.55;font-weight:500}
.course-week-line:not(.has-value) b{background:color-mix(in srgb,var(--line) 62%,transparent);
  color:inherit;opacity:.8}

/* السطر الثانوي: الإزاحة نفسها */
.course-week-detail{display:flex;flex-wrap:wrap;gap:5px 14px;margin:-4px 20px 10px;padding:0 4px;
  font-size:calc(.85rem * var(--font-scale));opacity:.7}
.course-week-detail span{position:relative;padding-inline-start:11px}
.course-week-detail span::before{content:'';position:absolute;inset-inline-start:0;top:.55em;
  width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5}

/* الأزرار: تبقى شبكة البطاقة الرباعية — أضبط النبرة فقط لا التخطيط */
@media(max-width:640px){
  .course-week-line{flex-wrap:wrap;gap:6px;margin:-2px 14px 8px}
  .course-week-line strong{white-space:normal;flex:1 1 100%;order:3}
  .course-week-line i{order:2}
  .course-week-detail{margin:-4px 14px 10px}
  }
.exam-readonly{font-size:calc(.8rem * var(--font-scale));opacity:.7;padding:5px 10px;border-radius:99px;
  background:color-mix(in srgb,var(--line) 55%,transparent)}

/* v7.5.80: «مطلوب منك الآن» كان .75rem — عنوانٌ لأهم صندوق في البطاقة، فلا يكون أصغر خطها */
/* v7.5.84 — معاينة استيراد المقررات. */
.course-import textarea{width:100%;font:inherit;font-size:calc(.86rem * var(--font-scale));line-height:1.6;resize:vertical}
.import-preview{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.import-line{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline;
  padding:10px 13px;border-radius:12px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--primary) 5%,transparent)}
.import-line b{font-size:calc(1.15rem * var(--font-scale));font-weight:800;color:var(--primary);grid-row:span 2}
.import-line span{font-size:calc(.9rem * var(--font-scale));font-weight:600}
.import-line small{font-size:calc(.8rem * var(--font-scale));opacity:.65;line-height:1.6}
.import-line.is-update{background:color-mix(in srgb,var(--line) 40%,transparent)}
.import-line.is-muted{background:transparent;opacity:.7}
.import-line.is-warn{background:color-mix(in srgb,var(--warn) 9%,transparent);
  border-color:color-mix(in srgb,var(--warn) 30%,var(--line))}
.import-line.is-warn b{color:var(--warn)}

/* v7.5.89 — مصدر واحد لشريط أزرار بطاقة المقرر.
   كانت 18 قاعدة تتنازع عليه (6 منها !important) عبر ملفين، فكل تعديل أكتبه يُدهس
   بقاعدة أقدم. ولهذا فشلت ثلاث محاولات: لم أكن أُصلح، كنت أضيف صوتًا إلى ضجيج.
   اقتُلعت كلها، وهذه القاعدة الوحيدة الباقية — بلا !important، فمن يأتي بعدي يعدّلها
   لا يصارعها. */
/* v7.5.91: العنصر يحمل **صنفين**: student-course-card-actions و course-essential-actions.
   وحّدتُ الثاني في v7.5.89 وتركتُ الأول يفرض display:flex وحشوه الخاص — فبقي الصراع.
   الدرس مكرَّرًا: حين تُوحّد قاعدة، وحّد **كل أصناف العنصر** لا الصنف الذي رأيته. */
.student-course-card-actions,
.course-essential-actions{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:9px;
  margin:0;
}
.student-course-card-actions .btn,
.course-essential-actions .btn{min-width:0;width:100%;min-height:46px;justify-content:center;
  font-size:calc(.88rem * var(--font-scale));gap:7px}
/* واحد مصمت وهو الأكثر نقرًا، واثنان بإطار — التسلسل بالثقل لا بالحجم */
.course-essential-actions .course-plan-persistent{
  background:var(--primary);color:#fff;border:1px solid var(--primary)}
.course-essential-actions .course-plan-persistent:hover{
  background:var(--primary-strong);border-color:var(--primary-strong)}
.course-essential-actions .course-resource-action{
  background:transparent;color:var(--text);border:1px solid var(--line);font-weight:600}
.course-essential-actions .course-resource-action:hover{
  border-color:var(--primary);color:var(--primary)}
.course-essential-actions .course-action-count{
  font-size:calc(.75rem * var(--font-scale));min-width:22px;padding:1px 7px;border-radius:99px;
  background:color-mix(in srgb,var(--line) 65%,transparent);font-variant-numeric:tabular-nums}
.course-essential-actions .course-plan-persistent .course-action-count{
  background:rgba(255,255,255,.2);color:#fff}
@media(max-width:640px){
  .course-essential-actions{grid-template-columns:1fr 1fr}
  .course-essential-actions .course-plan-persistent{grid-column:1 / -1}
}

/* v7.5.91 — إخراج البطاقة: تسلسل بالثقل، وحدٌّ واحد يجمعها.
   طلب إخراجًا أجمل، والجمال هنا ليس زخرفة بل **وحدة**: البطاقة كتلة واحدة لها إطار واحد،
   وما بداخلها يتدرّج من الأهم إلى الأقل. لا صناديق داخل صناديق. */
/* الترويسة: اسم المقرر هو البطل، والأستاذ تحته، والتقدم في الطرف */
#coursesPage .student-course-card-head{padding:16px 20px 10px}
#coursesPage .student-course-identity h3,
#coursesPage .student-course-identity strong{font-size:calc(1.06rem * var(--font-scale));line-height:1.45}
/* «مطلوب منك الآن»: شريط بلا إطار مستقل — خلفية خفيفة وحد علوي يفصله عمّا فوقه */
/* شريط الأزرار: داخل البطاقة، بحد علوي يفصله، وبحشو الترويسة نفسه */
#coursesPage .student-course-card-actions{
  margin:0;padding:12px 20px 14px;
  border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}
@media(max-width:640px){
  #coursesPage .student-course-card-head{padding:14px 14px 8px}
  #coursesPage .student-course-card-actions{padding:11px 14px 12px}
}

/* v7.5.92 — القسم لا يُقرأ، يُرى.
   كل مقرر يظهر مرتين باسم واحد (بنين وبنات)، والقسم كان كلمة رمادية صغيرة داخل سطر
   المستوى — فتشتبه الصفوف. الآن: شارة ملوّنة في طرف الصف، وشريط جانبي بلونها.
   اللون يُميّز قبل أن تُقرأ الكلمة — وهذا هو الفرق بين معلومة تُبحث وأخرى تُلمح. */
.gender-flag{flex:none;font-size:calc(.82rem * var(--font-scale));font-weight:700;padding:4px 12px;border-radius:99px;
  white-space:nowrap;margin-inline-start:auto}
.gender-boys{background:color-mix(in srgb,#2563eb 13%,transparent);color:#1d4ed8}
.gender-girls{background:color-mix(in srgb,#be185d 13%,transparent);color:#9d174d}
body[data-mode="dark"] .gender-boys{background:rgba(37,99,235,.24);color:#bfdbfe}
body[data-mode="dark"] .gender-girls{background:rgba(190,24,93,.24);color:#fbcfe8}
/* شريط جانبي يوسم الصف كله، فتُمسح القائمة بالعين لا بالقراءة */
#coursesPage .course-group[data-gender="بنين"]>summary{border-inline-start:4px solid color-mix(in srgb,#2563eb 55%,transparent)}
#coursesPage .course-group[data-gender="بنات"]>summary{border-inline-start:4px solid color-mix(in srgb,#be185d 55%,transparent)}
#coursesPage .course-group>summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* v7.5.93 — معاينة الفروق: ما سيتغيّر حرفًا بحرف. */
.import-diffs{padding:10px 13px;border-radius:12px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--primary) 4%,transparent);font-size:calc(.86rem * var(--font-scale))}
.import-diffs b{color:var(--primary);font-size:calc(1.05rem * var(--font-scale))}
.import-diffs ul{margin:8px 0 0;padding-inline-start:16px;display:flex;flex-direction:column;gap:5px}
.import-diffs li{line-height:1.7}
.import-diffs span{opacity:.7}
.import-diffs em{font-style:normal;font-weight:700;opacity:.85}
.import-diffs s{opacity:.55}
.import-diffs strong{color:var(--primary)}

/* v7.5.94 — اختيار أعمدة تصدير الخطة. */
.plan-column-picks{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.plan-column-pick{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;
  border:1px solid var(--line);border-radius:99px;cursor:pointer;font-size:calc(.88rem * var(--font-scale));
  transition:border-color .15s,background .15s}
.plan-column-pick:has(input:checked){border-color:var(--primary);
  background:color-mix(in srgb,var(--primary) 8%,transparent);font-weight:600}
.plan-column-pick.is-fixed{opacity:.75;cursor:default}
.plan-column-pick input{accent-color:var(--primary)}

/* v7.5.95 — مصدر واحد لشريط «مطلوب منك الآن».
   كانت 21 قاعدة عليه عبر ملفين، فيها !important تفرض خلفية وحدودًا وشبكة — ولهذا بدت
   بطاقة «الاتجاهات» (ولها شريط) مختلفة عن «إدارة التعليم العام» (ولا شريط لها).
   ثالث عنصر يقع في الفخ نفسه: قاعدة جديدة تُدهس بأقدم منها. اقتُلعت كلها.
   الشريط الآن **قسمٌ داخل البطاقة** كالأزرار تمامًا: بلا إطار ولا هامش، يفصله حد علوي. */
.student-course-next{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  margin:0;
  padding:12px 20px;
  border:0;
  border-radius:0;
  border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  background:color-mix(in srgb,var(--primary) 4%,transparent);
}
.student-course-next.attention{background:color-mix(in srgb,var(--primary) 8%,transparent)}
.student-course-next>div{display:grid;gap:3px;min-width:0}
.student-course-next span{color:var(--primary);font-size:calc(.86rem * var(--font-scale));font-weight:800}
.student-course-next strong{font-size:calc(1.02rem * var(--font-scale));color:var(--text)}
.student-course-next small{font-size:calc(.85rem * var(--font-scale));color:var(--muted)}
.student-course-next .course-current-task-action{min-width:132px;min-height:44px;white-space:nowrap;font-weight:700}
@media(max-width:640px){
  .student-course-next{grid-template-columns:1fr;align-items:stretch;padding:11px 14px}
  .student-course-next .course-current-task-action{width:100%}
}

/* v7.5.97 — البطاقة: مصدر واحد أخير.
   هذا رابع عنصر — ووعدتُ ألا أرقّع سابعًا. فحصتُ الحاوية نفسها فوجدت 10 قواعد عليها،
   منها ثلاث بـ !important وشريط ::before بعرض 7px داخل الحدود يزيح كل ما بعده.
   اقتُلعت كلها. البطاقة الآن: إطار واحد، شريط لوني رفيع، وأقسام يفصلها حدٌّ علوي —
   والحشو الأفقي واحد (20px) في الأقسام الثلاثة، فتستقيم الحواف بالبناء لا بالضبط. */
.student-course-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  box-shadow:0 1px 3px color-mix(in srgb,var(--primary) 7%,transparent);
  transition:border-color .18s,box-shadow .18s;
}
.student-course-card::before{
  content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:var(--primary);opacity:.5;
}
.student-course-card:hover{
  border-color:color-mix(in srgb,var(--primary) 32%,var(--line));
  box-shadow:0 8px 24px color-mix(in srgb,var(--primary) 10%,transparent);
}
.student-course-card:hover::before{opacity:.9}
.student-course-card + .student-course-card{margin-top:16px}

/* v7.5.99 — آخر صنفين في البطاقة: course-essential-card و student-course-progress.
   البطاقة تحمل صنفين على العنصر نفسه، ووحّدتُ أحدهما في v7.5.97 وتركتُ الآخر يحمل
   23 قاعدة — منها متغيّرات نبرة و::before بعرض 5px. والتقدم 14 قاعدة أخرى.
   المجموع على بطاقة واحدة: **103 قواعد**. وهذا جواب سؤاله «هل صعبة للدرجة؟» — لم تكن
   صعبة، كانت مدفونة. والحارس الجديد يفحص **الأصناف الستة معًا** فلا يبقى صنف مخبوء. */
.course-essential-card{
  --course-card-tint:color-mix(in srgb,var(--primary) 5%,var(--panel));
  --course-card-tint-strong:color-mix(in srgb,var(--primary) 10%,var(--panel));
  --course-card-line:color-mix(in srgb,var(--primary) 24%,var(--line));
  --course-card-line-strong:color-mix(in srgb,var(--primary) 46%,var(--line));
}
/* التقدم: سطر واحد في الترويسة — الرقم هو الرسالة والشريط تابع */
.student-course-progress{display:flex;align-items:center;justify-content:flex-end;gap:11px;min-width:0}
.student-course-progress small{font-size:calc(.92rem * var(--font-scale));font-weight:700;color:var(--text);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.student-course-progress small span{opacity:.5;font-weight:600}
.student-course-progress .progress{width:88px;height:8px;border-radius:99px;flex:none;
  background:color-mix(in srgb,var(--line) 78%,transparent);overflow:hidden}
.student-course-progress .progress i{display:block;height:100%;min-width:8px;border-radius:99px;
  background:var(--primary)}

/* v7.6.03 — البطاقة بعمودين: مرساة زمنية + محتوى.
   الرأسي وحده لا يملأ عرضًا؛ والمرساة تعطي البطاقة نقطة ثقل يبدأ منها المسح البصري:
   «الأسبوع 1 · الأحد · 18:00» في كتلة واحدة، ثم اسم المقرر وما يليه. */
#coursesPage .student-course-card-head{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:16px;
  align-items:stretch;
  padding:14px 18px 12px;
}
/* v7.6.15: بطاقات اليوم تُلمح ولا تُقرأ — الترتيب الزمني لا ينفع بلا نقطة انطلاق
   للعين. والقاعدة هنا لا في ملف يُحمَّل بعده: هذا الصنف مالكه واحد، وحارس البناء
   يرفض أي منافس له في ملف لاحق (درس المئة والثلاث قواعد). */
.student-course-card.is-today{box-shadow:0 0 0 2px color-mix(in srgb,var(--primary,#177c66) 34%,transparent)}
.course-rail-today{display:inline-block;margin-bottom:4px;padding:2px 9px;border-radius:999px;
  background:var(--primary,#177c66);color:#fff;font-size:calc(.7rem * var(--font-scale));font-weight:800;letter-spacing:.3px}
.course-rail{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:10px 6px;border-radius:14px;
  background:color-mix(in srgb,var(--primary) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--primary) 16%,transparent);
}
.course-rail-label{font-size:calc(.84rem * var(--font-scale));font-weight:700;opacity:.6;letter-spacing:.5px}
.course-rail-week{font-size:calc(1.9rem * var(--font-scale));font-weight:800;line-height:1.05;color:var(--primary);
  font-variant-numeric:tabular-nums}
.course-rail-when{margin-top:3px;font-size:calc(.9rem * var(--font-scale));font-weight:700}
.course-rail-time{font-size:calc(.84rem * var(--font-scale));opacity:.62;font-variant-numeric:tabular-nums;white-space:nowrap}
.course-body{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-width:0}
#coursesPage .student-course-identity{min-width:0;flex:1}
#coursesPage .student-course-identity h3{margin:5px 0 2px;font-size:calc(1.08rem * var(--font-scale));line-height:1.4}
#coursesPage .student-course-identity p{margin:0;font-size:calc(.9rem * var(--font-scale));opacity:.65}
/* السطر الذي يلي الترويسة لم يعد يكرر اليوم والوقت — المرساة تحملهما.
   وأُخفيا بالأنماط لا بالحذف من الشيفرة: الطباعة والقارئ الصوتي يستفيدان منهما،
   وما يُخفى عن العين قد يُحتاج في مكان آخر. */
.course-week-line b,
.course-week-line small{display:none}
.course-week-line{margin:0 18px 8px;padding:9px 13px;border-radius:11px;
  background:color-mix(in srgb,var(--line) 30%,transparent)}
.course-week-line strong{max-width:100%}
.course-week-line::before{content:"مفردة الأسبوع";font-size:calc(.84rem * var(--font-scale));font-weight:700;opacity:.55;
  flex:none;padding-inline-end:10px;border-inline-end:1px solid color-mix(in srgb,var(--line) 90%,transparent)}
@media(max-width:640px){
  #coursesPage .student-course-card-head{grid-template-columns:1fr;gap:11px;padding:13px 14px 10px}
  .course-rail{flex-direction:row;gap:10px;padding:8px 12px;justify-content:flex-start}
  .course-rail-week{font-size:calc(1.3rem * var(--font-scale))}
  .course-rail-label{order:-1}
  .course-body{flex-direction:column;gap:9px}
  .student-course-progress{justify-content:flex-start}
}


/* ===== v7.6.23: الرسالة تُقرأ فوق النافذة لا تحت ضبابها =====
   <dialog> المفتوح في الطبقة العليا، فوق كل z-index. الرسالة صارت ابنته حين تُفتح
   نافذة (انظر toastHost في app.js)، وهذه الأنماط تجعلها تُقرأ هناك: تباين أعلى،
   وموضع لا يختفي خلف حافة النافذة، وعرض لا يتجاوز الشاشة. */
#toast.toast{
  z-index:2147483000;
  background:#0f2f33;
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 18px 46px rgba(0,0,0,.42);
  font-weight:700;
}
#toast.toast.in-dialog{
  position:fixed;
  inset-inline:auto;
  left:50%;
  transform:translateX(-50%) translateY(10px);
  bottom:26px;
  max-width:min(560px,calc(100vw - 40px));
  text-align:center;
}
#toast.toast.in-dialog.show{transform:translateX(-50%)}
@media (max-width:720px){
  #toast.toast.in-dialog{left:14px;right:14px;transform:translateY(10px);max-width:none}
  #toast.toast.in-dialog.show{transform:none}
}

/* v7.6.24: مواد المقرر داخل نافذة الخطة — قائمة هادئة لا بطاقات تنافس صفوف الأسابيع */
.course-materials{margin:14px 0 4px;padding:14px 16px;border:1px solid var(--line);
  border-radius:16px;background:var(--panel2)}
.course-materials h4{margin:0 0 10px;font-size:calc(1rem * var(--font-scale));display:flex;align-items:center;gap:8px}
.course-materials.is-empty p{margin:0;font-size:calc(.88rem * var(--font-scale));line-height:1.7}
.course-materials-list{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:8px}
.course-materials-list li{display:flex;align-items:center;gap:10px;padding:9px 11px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.course-materials-list li>div{flex:1;min-width:0}
.course-materials-list strong{display:block;font-size:calc(.92rem * var(--font-scale))}
.course-materials-list small{display:block;color:var(--muted);font-size:calc(.78rem * var(--font-scale));margin-top:2px}
/* v7.6.24: تحذير الشعبة الفارغة يُرى قبل الحفظ لا بعده */
.content-course-scope.is-warning{border-color:color-mix(in srgb,var(--warn,#b7791f) 55%,transparent);
  background:color-mix(in srgb,var(--warn,#b7791f) 9%,var(--panel))}
/* v7.6.28: شارة الضيف — لونٌ ثالث يميّزه عن الطالب وعن أستاذ المقرر */
.deck-who.is-guest i{background:var(--accent,#8a6e4f)}
/* v7.6.34: سبب ظهور نافذة الموافقة — يُقال ولا يُترك للتخمين */
#legalConsentReason:empty{display:none}
#legalConsentReason{margin:10px 0 0;padding:9px 12px;border-radius:10px;font-size:calc(.85rem * var(--font-scale));line-height:1.7;
  background:color-mix(in srgb,var(--primary,#177c66) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--primary,#177c66) 20%,transparent);color:var(--muted)}
/* v7.6.36: فراغٌ سببه رفضُ القراءة يُعرض تحذيرًا لا نتيجةً محايدة */
.community-empty.is-blocked{border-color:color-mix(in srgb,var(--warn,#b7791f) 45%,transparent);
  background:color-mix(in srgb,var(--warn,#b7791f) 7%,var(--panel))}
.community-empty.is-blocked .empty-orbit{color:var(--warn,#b7791f)}
.community-empty.is-blocked .btn{margin-top:12px}