:root{
  --bg:#F3F4F1; --surface:#FFFFFF; --surface-2:#F8F7F3; --text:#1A2233; --muted:#5B6472;
  --border:#DDD9CE; --navy:#1F3864; --navy-dark:#16294A; --gold:#8A6633; --gold-bright:#B08D57;
  --green:#0F6A3D; --danger:#B3261E; --chip-bg:#FFFFFF; --chip-active:#1F3864;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14171C; --surface:#1C2028; --surface-2:#20242D; --text:#EDEEF0; --muted:#A6ACB6;
    --border:#333844; --chip-bg:#20242D;
  }
}
:root[data-theme="dark"]{
  --bg:#14171C; --surface:#1C2028; --surface-2:#20242D; --text:#EDEEF0; --muted:#A6ACB6;
  --border:#333844; --chip-bg:#20242D;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--text); font-family:'Cairo', sans-serif; line-height:1.6}
.wrap{max-width:1000px; margin:0 auto; padding:28px 20px 80px}
.app-header{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; margin-bottom:22px}
.app-header h1{font-size:clamp(22px,3.6vw,28px); margin:0; color:var(--navy)}
:root[data-theme="dark"] .app-header h1, :root:not([data-theme="light"]) .app-header h1{color:#9db3d9}
.app-header p{margin:0; color:var(--muted); font-size:var(--fs-base)}

.identity-bar{display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:14px; font-size:var(--fs-ctl); color:var(--muted)}
.identity-bar span{font-weight:700; color:var(--navy)}
:root[data-theme="dark"] .identity-bar span, :root:not([data-theme="light"]) .identity-bar span{color:#9db3d9}
.identity-bar a{color:var(--danger); text-decoration:underline; font-size:var(--fs-sm)}

.tabs{display:flex; gap:10px; justify-content:center; margin-bottom:24px; flex-wrap:wrap}
.tab-btn{border:2px solid var(--navy); background:var(--surface); color:var(--navy); padding:10px 26px; border-radius:999px; font-family:inherit; font-size:var(--fs-md); font-weight:700; cursor:pointer; transition:background .15s, color .15s}
.tab-btn.active{background:var(--navy); color:#fff}
:root[data-theme="dark"] .tab-btn, :root:not([data-theme="light"]) .tab-btn{border-color:#6f8fc2; color:#9db3d9}
:root[data-theme="dark"] .tab-btn.active, :root:not([data-theme="light"]) .tab-btn.active{background:#3a5a8f; color:#fff}

.card{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:26px 28px; margin-bottom:22px; box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card h2{margin:0 0 18px; font-size:var(--fs-xl); color:var(--navy)}
:root[data-theme="dark"] .card h2, :root:not([data-theme="light"]) .card h2{color:#9db3d9}

.field-row{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:16px}
.field{display:flex; flex-direction:column; gap:6px; flex:1; min-width:150px}
.field label{font-size:var(--fs-ctl); font-weight:600; color:var(--muted)}
.field input[type=text], .field input[type=date], .field input[type=number], .field input[type=email], .field input[type=password], .field input[type=tel], .field select, textarea{
  font-family:inherit; font-size:var(--fs-base); padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); width:100%;
}
textarea{resize:vertical; min-height:70px}
.field.grow{flex:2}

.sessions-wrap{display:flex; flex-direction:column; gap:10px}
.session-row, .section-editor-row{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px 14px}
.session-row .field, .section-editor-row .field{min-width:110px}
.session-row .field label, .section-editor-row .field label{font-size:var(--fs-xs)}
.session-row select{padding:8px 10px}
.section-editor-row{margin-bottom:10px}
.btn-remove-row{background:transparent; border:1px solid var(--danger); color:var(--danger); border-radius:8px; width:36px; height:36px; font-size:var(--fs-md); cursor:pointer; line-height:1}
.btn-add-row{align-self:flex-start; background:transparent; border:1.5px dashed var(--navy); color:var(--navy); border-radius:10px; padding:9px 18px; font-family:inherit; font-weight:700; font-size:var(--fs-ctl); cursor:pointer}
:root[data-theme="dark"] .btn-add-row, :root:not([data-theme="light"]) .btn-add-row{border-color:#6f8fc2; color:#9db3d9}
.sessions-hint{font-size:var(--fs-sm); color:var(--muted); margin:0 0 10px}

.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}
.btn{font-family:inherit; font-size:var(--fs-base); font-weight:700; padding:12px 22px; border-radius:12px; border:none; cursor:pointer}
.btn-primary{background:var(--navy); color:#fff}
.btn-secondary{background:var(--surface-2); color:var(--text); border:1px solid var(--border)}
.btn-gold{background:var(--gold-bright); color:#fff}
.btn-danger{background:transparent; color:var(--danger); border:1px solid var(--danger); padding:6px 12px; font-size:var(--fs-sm)}
.btn:disabled{opacity:.6; cursor:default}

.saved-list-header{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:0}
.saved-list-header h2{margin:0}
.saved-list{display:flex; flex-direction:column; gap:10px; margin-top:8px}
.saved-item{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:10px 16px; cursor:pointer}
.saved-item:hover{border-color:var(--navy)}
.saved-item .meta{font-size:var(--fs-sm); color:var(--muted)}
.saved-item .title{font-weight:700}
.empty-note{color:var(--muted); font-size:var(--fs-ctl); text-align:center; padding:14px 0}

table.overview{width:100%; border-collapse:collapse; margin-top:6px; font-size:var(--fs-ctl)}
table.overview th, table.overview td{border:1px solid var(--border); padding:8px 10px; text-align:center}
table.overview th{background:var(--surface-2)}
table.overview select{font-family:inherit; font-size:var(--fs-sm); padding:6px 8px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); width:100%; min-width:110px}
table.overview .role-badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:var(--fs-xs); font-weight:700; background:var(--surface-2); border:1px solid var(--border)}
table.overview .role-badge.role-admin{color:var(--gold-bright); border-color:var(--gold-bright)}
table.overview .role-badge.role-supervisor{color:var(--navy); border-color:var(--navy)}
:root[data-theme="dark"] table.overview .role-badge.role-supervisor, :root:not([data-theme="light"]) table.overview .role-badge.role-supervisor{color:#9db3d9; border-color:#6f8fc2}

.week-picker{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.week-picker select{font-family:inherit; padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-size:var(--fs-base)}

.hidden{display:none !important}

/* ---- التحضير الآلي: بنك التحضيرات المشترك وزر الذكاء الاصطناعي ---- */
.bank-result-card{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:10px 14px; margin-bottom:8px}
.bank-result-head{display:flex; flex-direction:column; gap:2px}
.bank-result-head .title{font-weight:700}
.bank-result-head .meta{font-size:var(--fs-xs); color:var(--muted)}

/* ---- تبويب الإعدادات: معاينة الشعارات وعناصر التحضير ---- */
.logo-preview{display:block; max-height:70px; max-width:180px; object-fit:contain; margin-top:8px; border:1px solid var(--border); border-radius:8px; padding:6px; background:#fff}
.field input[type=file]{font-family:inherit; font-size:var(--fs-sm); padding:6px 0; color:var(--text)}

/* ---- auth pages (login / register) ---- */
.auth-wrap{max-width:440px; margin:60px auto; padding:0 20px}
.auth-card{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:30px 28px; box-shadow:0 1px 3px rgba(0,0,0,.06)}
.auth-card h1{font-size:var(--fs-xl); color:var(--navy); margin:0 0 6px; text-align:center}
:root[data-theme="dark"] .auth-card h1, :root:not([data-theme="light"]) .auth-card h1{color:#9db3d9}
.auth-card p.sub{color:var(--muted); font-size:var(--fs-ctl); text-align:center; margin:0 0 22px}
.auth-error{background:#FBEAEA; color:var(--danger); border:1px solid var(--danger); border-radius:10px; padding:10px 14px; font-size:var(--fs-ctl); margin-bottom:16px}
:root[data-theme="dark"] .auth-error, :root:not([data-theme="light"]) .auth-error{background:#3a2222}
.auth-switch{text-align:center; font-size:var(--fs-ctl); color:var(--muted); margin-top:16px}
.auth-switch a{color:var(--navy); font-weight:700; text-decoration:none}
:root[data-theme="dark"] .auth-switch a, :root:not([data-theme="light"]) .auth-switch a{color:#9db3d9}

/* ---------- قوائم الاختيار (منسدلة متعددة الاختيار): الأهداف والوسائل والاستراتيجيات وأساليب التقويم ---------- */
.pick-wrap:empty{display:none}
.pick-wrap{margin:2px 0 6px; position:relative}
.pick-dd{position:relative}
.pick-dd > summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--text); font-size:var(--fs-ctl); cursor:pointer; user-select:none}
.pick-dd > summary::-webkit-details-marker{display:none}
.pick-dd > summary::after{content:"▾"; color:var(--muted); font-size:var(--fs-sm); transition:transform .15s}
.pick-dd[open] > summary{border-color:var(--navy)}
.pick-dd[open] > summary::after{transform:rotate(180deg)}
.pick-panel{margin-top:4px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:8px}
.pick-search{width:100%; padding:6px 10px; margin-bottom:6px; font-size:var(--fs-sm); border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--text); font-family:inherit}
.pick-list{max-height:220px; overflow-y:auto}
.pick-row{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:3px 6px; border-radius:6px}
.pick-row:hover{background:var(--surface-2)}
.pick-row label{display:flex; align-items:flex-start; gap:8px; flex:1; font-size:var(--fs-ctl); font-weight:400; cursor:pointer; margin:0}
.pick-row label input{margin-top:5px; flex-shrink:0}
.pick-row small{opacity:.7; font-size:var(--fs-xs)}
.pick-del{border:none; background:transparent; color:var(--muted); font-size:var(--fs-md); line-height:1; padding:0 4px; cursor:pointer}
.pick-del:hover{color:var(--danger)}
.pick-add{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; padding-top:8px; border-top:1px solid var(--border)}
.pick-add input[type=text]{flex:1; min-width:160px; padding:6px 10px; font-size:var(--fs-sm)}
.pick-add .btn-add-row{margin:0; padding:6px 14px; width:auto}
.pick-global{display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs); color:var(--muted); font-weight:400}

/* ==========================================================================
   الهوية البصرية الجديدة — بنك تحضير (تُطبَّق على الشاشة فقط، لا تؤثر على الطباعة)
   ألوان: بنفسجي نيلي + سماوي + زمردي + كهرماني — بطاقات ناعمة الظلال وخلفية متدرجة
   ========================================================================== */
@media screen {
  :root{
    --brand:#5B4BDB; --brand-2:#1E9BE8; --brand-3:#12B8A6; --warm:#F59E0B; --pink:#E94E8A;
    --grad:linear-gradient(135deg,#5B4BDB 0%,#4169E1 45%,#1E9BE8 100%);
    --grad-soft:linear-gradient(135deg,rgba(91,75,219,.10),rgba(30,155,232,.10));
    --bg:#F3F5FC; --surface:#FFFFFF; --surface-2:#F7F8FD; --text:#141A33; --muted:#66708A;
    --border:#E3E7F3; --heading:#2A2170;
    --navy:#5B4BDB; --navy-dark:#4536C7; --gold:#B7791F; --gold-bright:#F59E0B;
    --green:#0E9F6E; --danger:#E0445A; --chip-bg:#FFFFFF; --chip-active:#5B4BDB;
    --shadow:0 10px 30px rgba(38,40,90,.08), 0 2px 6px rgba(38,40,90,.05);
    --shadow-lg:0 18px 45px rgba(60,50,170,.18);
    --radius:20px;
  }
}
@media screen and (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1024; --surface:#171A35; --surface-2:#1E2244; --text:#ECEEFB; --muted:#A3A9C9;
    --border:#2B3060; --heading:#C9C3FF; --navy:#8B7DFF; --navy-dark:#7465F5; --chip-bg:#1E2244;
    --shadow:0 10px 30px rgba(0,0,0,.35); --shadow-lg:0 18px 45px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#0E1024; --surface:#171A35; --surface-2:#1E2244; --text:#ECEEFB; --muted:#A3A9C9;
  --border:#2B3060; --heading:#C9C3FF; --navy:#8B7DFF; --navy-dark:#7465F5; --chip-bg:#1E2244;
}

@media screen {
  /* ---------- الأساس ---------- */
  body{
    font-family:'Cairo', sans-serif; color:var(--text); letter-spacing:0;
    background:
      radial-gradient(900px 500px at 100% -10%, rgba(91,75,219,.13), transparent 60%),
      radial-gradient(700px 420px at -10% 10%, rgba(30,155,232,.12), transparent 60%),
      radial-gradient(600px 400px at 50% 110%, rgba(18,184,166,.10), transparent 60%),
      var(--bg);
    background-attachment:fixed;
  }
  .wrap{max-width:1040px; padding:22px 18px 80px}
  ::selection{background:rgba(91,75,219,.22)}

  /* ---------- رأس الصفحة: شريط متدرج جذاب ---------- */
  .app-header{
    position:relative; overflow:hidden; background:var(--grad); color:#fff;
    border-radius:28px; padding:34px 26px 30px; margin-bottom:16px; box-shadow:var(--shadow-lg);
  }
  .app-header::before, .app-header::after{content:''; position:absolute; border-radius:50%; background:rgba(255,255,255,.12); pointer-events:none}
  .app-header::before{width:260px; height:260px; top:-120px; inset-inline-start:-70px}
  .app-header::after{width:180px; height:180px; bottom:-90px; inset-inline-end:-40px; background:rgba(18,184,166,.35)}
  .app-header h1{color:#fff !important; font-size:clamp(22px,3.6vw,28px); font-weight:800; position:relative; z-index:1; text-shadow:0 2px 12px rgba(0,0,0,.15)}
  .app-header p{color:rgba(255,255,255,.88) !important; font-size:var(--fs-base); position:relative; z-index:1}

  /* ---------- شريط المستخدم والتنقل: أزرار كبسولية ---------- */
  .identity-bar{
    flex-wrap:wrap; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:999px;
    padding:8px 10px; box-shadow:var(--shadow); margin-bottom:22px; justify-content:center;
  }
  .identity-bar span{color:var(--heading) !important; font-weight:800; padding:4px 10px}
  .identity-bar a{
    color:var(--text) !important; text-decoration:none !important; font-size:var(--fs-sm); font-weight:700;
    padding:7px 14px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); transition:all .15s;
  }
  .identity-bar a:hover{background:var(--grad-soft); border-color:var(--navy); color:var(--navy) !important; transform:translateY(-1px)}
  .identity-bar a[href*="logout"]{color:var(--danger) !important; background:transparent; border-color:transparent}
  .identity-bar .btn{border-radius:999px !important}

  /* ---------- التبويبات ---------- */
  .tabs{background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:6px; box-shadow:var(--shadow); display:inline-flex; margin-inline:auto; gap:4px}
  .tabs{display:flex; width:fit-content; max-width:100%}
  .tab-btn{border:none !important; background:transparent !important; color:var(--muted) !important; padding:10px 22px; font-size:var(--fs-base); transition:all .2s}
  .tab-btn:hover{color:var(--navy) !important}
  .tab-btn.active{background:var(--grad) !important; color:#fff !important; box-shadow:0 6px 16px rgba(91,75,219,.35)}

  /* ---------- البطاقات ---------- */
  .card{border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); background:var(--surface); padding:24px 26px}
  .card h2{color:var(--heading) !important; font-weight:800; display:flex; align-items:center; gap:10px}
  .card h2::before{content:''; width:6px; height:22px; border-radius:6px; background:var(--grad); flex:none}
  .section-title{color:var(--heading) !important}
  .sessions-hint, .subtle{color:var(--muted)}

  /* ---------- الحقول ---------- */
  .field label{color:var(--muted); font-weight:700}
  .field input[type=text], .field input[type=date], .field input[type=number], .field input[type=email],
  .field input[type=password], .field input[type=tel], .field input[type=datetime-local], .field select, textarea{
    border-radius:12px !important; border:1.5px solid var(--border) !important; background:var(--surface-2) !important;
    padding:11px 14px; transition:border-color .15s, box-shadow .15s, background .15s;
  }
  input:focus, select:focus, textarea:focus{outline:none; border-color:var(--navy) !important; background:var(--surface) !important; box-shadow:0 0 0 4px rgba(91,75,219,.14) !important}
  input[type=checkbox], input[type=radio]{accent-color:var(--navy)}

  /* ---------- الأزرار ---------- */
  .btn{border-radius:14px; font-weight:800; transition:transform .12s, box-shadow .15s, filter .15s}
  .btn:hover:not(:disabled){transform:translateY(-1px)}
  .btn:active:not(:disabled){transform:translateY(0)}
  .btn-primary{background:var(--grad) !important; color:#fff !important; box-shadow:0 8px 20px rgba(91,75,219,.32)}
  .btn-primary:hover:not(:disabled){box-shadow:0 12px 26px rgba(91,75,219,.42); filter:brightness(1.05)}
  .btn-secondary{background:var(--surface) !important; color:var(--text) !important; border:1.5px solid var(--border) !important}
  .btn-secondary:hover:not(:disabled){border-color:var(--navy) !important; color:var(--navy) !important}
  .btn-gold{background:linear-gradient(135deg,#F59E0B,#F97316) !important; color:#fff !important; box-shadow:0 8px 20px rgba(245,158,11,.32)}
  .btn-danger{border-radius:12px; border:1.5px solid var(--danger) !important; color:var(--danger) !important; background:transparent !important}
  .btn-danger:hover{background:rgba(224,68,90,.08) !important}
  .mini-btn{border-radius:10px !important; transition:all .15s}
  .mini-btn:hover{border-color:var(--navy) !important; color:var(--navy)}
  .btn-add-row{border-color:var(--navy) !important; color:var(--navy) !important; border-radius:12px}

  /* ---------- القوائم والعناصر المحفوظة ---------- */
  .saved-item, .bank-result-card{
    background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:16px !important;
    padding:14px 18px !important; transition:transform .15s, box-shadow .15s, border-color .15s; position:relative; overflow:hidden;
  }
  .saved-item::before{content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:5px; background:var(--grad); opacity:.85}
  .saved-item:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:transparent !important}
  .saved-item .title{font-weight:800; color:var(--text)}

  /* ---------- الشارات ---------- */
  .badge, .badge-ok, .badge-warn, .badge-soft{border-radius:999px !important; padding:3px 12px !important; font-weight:800}
  .badge.open, .badge.ok, .badge-ok{background:rgba(14,159,110,.10) !important; color:var(--green) !important; border-color:rgba(14,159,110,.35) !important}
  .badge.upcoming, .badge.warn, .badge-warn{background:rgba(245,158,11,.12) !important; color:#B45309 !important; border-color:rgba(245,158,11,.4) !important}
  .badge.err{background:rgba(224,68,90,.10) !important}

  /* ---------- الجداول ---------- */
  table.overview{border-collapse:separate !important; border-spacing:0; border:1px solid var(--border); border-radius:14px; overflow:hidden}
  table.overview th{background:var(--grad-soft) !important; color:var(--heading); font-weight:800; border:none !important; border-bottom:1px solid var(--border) !important; padding:11px 10px !important}
  table.overview td{border:none !important; border-bottom:1px solid var(--border) !important; padding:10px !important}
  table.overview tr:last-child td{border-bottom:none !important}
  table.overview tr:hover td{background:var(--surface-2)}

  /* ---------- الأقسام المطوية ---------- */
  details.fold > summary{padding:18px 24px}
  details.fold > summary::after{width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--grad-soft); color:var(--navy) !important}
  details.fold[open] > summary{border-bottom:1px solid var(--border); margin-bottom:16px}

  /* ---------- الإحصاءات ---------- */
  .stat{background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:16px !important; position:relative; overflow:hidden}
  .stat::after{content:''; position:absolute; inset:auto 0 0 0; height:4px; background:var(--grad)}
  .stat .v{color:var(--heading) !important; font-size:var(--fs-2xl) !important}

  /* ---------- صفحات الدخول والتسجيل ---------- */
  .auth-wrap{max-width:460px; margin:48px auto}
  .auth-card{border:none; border-radius:26px; box-shadow:var(--shadow-lg); padding:0 28px 28px; overflow:hidden; position:relative}
  .auth-card::before{content:''; display:block; height:8px; margin:0 -28px 26px; background:var(--grad)}
  .auth-card h1{color:var(--heading) !important; font-size:var(--fs-xl); font-weight:800}
  .auth-switch a{color:var(--navy) !important}
  .auth-error{border-radius:14px; background:rgba(224,68,90,.08) !important}

  /* ---------- رمز الفصل والمؤقت والدرجة ---------- */
  .cls-code{border-radius:14px !important; border:2px dashed var(--navy) !important; color:var(--navy) !important; background:var(--grad-soft) !important}
  .timer{color:var(--navy) !important} .timer.low{color:var(--danger) !important}
  .score-big{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent !important; font-size:44px !important; font-weight:900}
  .exam-bar{border-radius:18px !important; box-shadow:var(--shadow) !important; backdrop-filter:blur(8px)}

  /* ---------- أسئلة الاختبار عند الطالب ---------- */
  .q{border-radius:20px !important; box-shadow:var(--shadow); border:1px solid var(--border) !important}
  .q-text{font-size:var(--fs-lg) !important}
  .opt{border-radius:14px !important; border:1.5px solid var(--border) !important; background:var(--surface-2) !important; transition:all .15s; padding:12px 14px !important}
  .opt:hover{border-color:var(--navy) !important; background:var(--surface) !important}
  .opt.sel{border-color:var(--navy) !important; background:var(--grad-soft) !important; box-shadow:0 0 0 3px rgba(91,75,219,.15) !important}
  .res-ok{border-inline-start:6px solid var(--green) !important}
  .res-bad{border-inline-start:6px solid var(--danger) !important}
  .res-pending{border-inline-start:6px solid var(--warm) !important}

  /* ---------- مربعات متفرقة كانت تستخدم ألوانًا ثابتة ---------- */
  .count-type-label, .expected-total-line b, .scope-book{color:var(--heading) !important}
  .count-type-box, .scope-box, .qa, .q-card{border-radius:16px !important; border-color:var(--border) !important}
  .q-type-badge{background:var(--grad) !important}
  .empty-note{color:var(--muted)}
  a{color:var(--navy)}

  /* ---------- حركة لطيفة عند ظهور البطاقات ---------- */
  @media (prefers-reduced-motion: no-preference){
    .card, .auth-card{animation:tb-rise .35s ease both}
    @keyframes tb-rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
  }

  /* ---------- الجوال ---------- */
  @media (max-width: 640px){
    .wrap{padding:14px 12px 60px}
    .app-header{border-radius:22px; padding:26px 18px 22px}
    .card{padding:18px 16px; border-radius:18px}
    details.fold > summary{padding:16px}
    details.fold > .fold-body{padding:0 16px 18px}
    .identity-bar{border-radius:20px}
  }
}
@media screen {
  .auth-card .field-row{margin-bottom:6px}
  .auth-card .field-row + small{margin:0 0 12px !important}
}

/* ==========================================================================
   مساعد المعلم — شريط التنقّل الموحّد والتذييل
   ========================================================================== */
@media screen {
  .site-nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid var(--border)}
  .site-nav-inner{max-width:1440px; margin:0 auto; padding:10px 24px; display:flex; align-items:center; gap:16px}
  .site-nav .brand, .site-footer .brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:900; font-size:var(--fs-xl); color:var(--heading); white-space:nowrap}
  .brand-logo{border-radius:12px; display:block}
  .nav-panel{display:flex; align-items:center; gap:14px; flex:1}
  .nav-links{display:flex; gap:4px; flex-wrap:wrap; flex:1; justify-content:center}
  .nav-links a{text-decoration:none; color:var(--muted); font-weight:700; font-size:var(--fs-ctl); padding:8px 13px; border-radius:12px; transition:all .15s}
  .nav-links a:hover{color:var(--navy); background:var(--grad-soft)}
  .nav-links a.active{color:#fff; background:var(--grad); box-shadow:0 6px 16px rgba(91,75,219,.3)}
  .nav-end{display:flex; align-items:center; gap:8px}
  .nav-lang{font-family:inherit; font-size:var(--fs-sm); font-weight:700; color:var(--muted); background:transparent; border:1px solid var(--border); border-radius:10px; padding:6px 10px; cursor:pointer; text-decoration:none}
  .nav-user{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text); font-weight:700; font-size:var(--fs-ctl); padding:4px 10px 4px 4px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); max-width:190px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
  [dir="rtl"] .nav-user{padding:4px 4px 4px 10px}
  .nav-user .avatar{width:30px; height:30px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-weight:900; flex:none}
  .nav-out{color:var(--danger); text-decoration:none; font-weight:700; font-size:var(--fs-sm); padding:6px 8px}
  .nav-btn{text-decoration:none; font-weight:800; font-size:var(--fs-ctl); padding:9px 16px; border-radius:12px; background:var(--grad); color:#fff; box-shadow:0 6px 16px rgba(91,75,219,.3); white-space:nowrap}
  .nav-btn.ghost{background:transparent; color:var(--navy); border:1.5px solid var(--border); box-shadow:none}
  .nav-toggle{display:none}
  .nav-burger{display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--border); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; margin-inline-start:auto; background:var(--surface)}
  .nav-burger i{display:block; width:20px; height:2px; border-radius:2px; background:var(--heading)}

  /* الشريط القديم داخل الصفحات يختفي لأن الشريط الموحّد يغني عنه */
  .site-nav ~ .wrap .identity-bar, .site-nav ~ .auth-wrap .auth-top-links{display:none !important}
  .site-nav ~ .wrap{padding-top:18px}
  .site-nav ~ .auth-wrap{margin-top:34px}

  /* شاشات اللابتوب: السطر نفسه بمسافات أصغر حتى تظهر كل الروابط والأزرار دون أن يختفي شيء */
  @media (max-width: 1439px){
    .site-nav-inner{gap:12px; padding-inline:16px}
    .nav-panel{gap:10px}
    .nav-links{gap:2px}
    .nav-links a, .site-nav .nav-more > summary{padding:8px 9px}
    .nav-end{gap:6px}
    .nav-btn{padding:9px 12px}
    .site-nav .site-nav-inner .brand.brand-lg .brand-logo{width:44px; height:44px}
    .site-nav .brand-tag{display:none}
  }

  @media (max-width: 1279px){
    .nav-burger{display:flex}
    .nav-panel{display:none; position:absolute; top:100%; inset-inline:0; flex-direction:column; align-items:stretch; background:var(--surface); border-bottom:1px solid var(--border); padding:12px 18px 18px; box-shadow:var(--shadow)}
    .nav-toggle:checked ~ .nav-panel{display:flex}
    .nav-links{flex-direction:column; align-items:stretch}
    .nav-links a{padding:11px 14px}
    .nav-end{flex-wrap:wrap; justify-content:space-between; border-top:1px solid var(--border); padding-top:12px}
  }

  .site-footer{margin-top:40px; background:#12103A; color:#C9CBE8}
  .site-footer-inner{max-width:1180px; margin:0 auto; padding:44px 18px 26px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:28px}
  .site-footer .brand{color:#fff}
  .site-footer p{line-height:1.9; margin:12px 0 0; font-size:var(--fs-ctl)}
  .site-footer h4{color:#fff; margin:4px 0 12px; font-size:var(--fs-md)}
  .site-footer .f-col{display:flex; flex-direction:column; gap:8px}
  .site-footer .f-col a{color:#C9CBE8; text-decoration:none; font-size:var(--fs-ctl)}
  .site-footer .f-col a:hover{color:#fff}
  .f-social{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
  .f-social a{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:5px 12px; font-size:var(--fs-sm) !important}
  .f-copy{text-align:center; font-size:var(--fs-sm); padding:16px; border-top:1px solid rgba(255,255,255,.08)}
  @media (max-width: 760px){ .site-footer-inner{grid-template-columns:1fr} }
}
@media screen and (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .site-nav{background:rgba(23,26,53,.85)}
}
@media screen {
  .nav-links{flex-wrap:wrap; align-items:center; row-gap:4px}
  .nav-more{position:relative}
  .nav-more > summary{list-style:none; cursor:pointer; color:var(--muted); font-weight:700; font-size:var(--fs-ctl); padding:8px 13px; border-radius:12px; white-space:nowrap}
  .nav-more > summary::-webkit-details-marker{display:none}
  .nav-more > summary::after{content:' ▾'; font-size:var(--fs-xs)}
  .nav-more > summary:hover{color:var(--navy); background:var(--grad-soft)}
  .nav-more > summary.active{color:var(--navy); background:var(--grad-soft)}
  .nav-more-menu{position:absolute; top:calc(100% + 6px); inset-inline-end:0; min-width:190px; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-lg); padding:6px; display:flex; flex-direction:column; z-index:60}
  .nav-more-menu a{text-decoration:none; color:var(--text); font-weight:700; font-size:var(--fs-ctl); padding:9px 12px; border-radius:10px}
  .nav-more-menu a:hover, .nav-more-menu a.active{background:var(--grad-soft); color:var(--navy)}
  .nav-links a{white-space:nowrap}
  @media (max-width: 1279px){
    .nav-links{flex-wrap:wrap}
    .nav-more{width:100%}
    .nav-more > summary{display:none}
    .nav-more-menu{position:static; box-shadow:none; border:none; padding:0; min-width:0; display:flex !important}
    .nav-more-menu a{padding:11px 14px; color:var(--muted)}
  }
}
@media screen and (max-width: 1279px){
  .nav-links{flex-direction:column; align-items:stretch !important; flex-wrap:nowrap}
}
@media screen {
  /* الأقسام المطوية — قاعدة عامة لكل الصفحات */
  details.fold{padding:0 !important; overflow:hidden}
  details.fold > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; user-select:none}
  details.fold > summary::-webkit-details-marker{display:none}
  details.fold > summary h2{margin:0}
  details.fold > summary::after{content:'▾'; margin-inline-start:auto; transition:transform .2s}
  details.fold[open] > summary::after{transform:rotate(180deg)}
  details.fold > .fold-body{padding:0 24px 22px}
}


/* ============================================================================
   نظام الخطوط الموحّد للمنصة — كل الصفحات تأخذ مقاساتها من هنا
   عنوان الصفحة 28 · عنوان البطاقة 20 · عنوان عنصر 16 · النص 15 · الأزرار والقوائم 14 · المساعد 13 · الصغير 12
   القاعدة: العنصر الفرعي أصغر من أصله أو يساويه، والعناصر في نفس المستوى بنفس المقاس
   ========================================================================== */
:root{
  --fs-xs:12px; --fs-sm:13px; --fs-ctl:14px; --fs-base:15px; --fs-md:16px; --fs-lg:18px; --fs-xl:20px; --fs-2xl:28px;
}
body{font-size:var(--fs-base); line-height:1.75; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
h1{font-size:var(--fs-2xl); line-height:1.35}
h2{font-size:var(--fs-xl); line-height:1.45}
h3{font-size:var(--fs-md); line-height:1.5}
h4, h5, h6{font-size:var(--fs-base); line-height:1.5}
.card h2{font-size:var(--fs-xl)}
.card h3{font-size:var(--fs-md)}
p, li, td, th, label, summary{line-height:1.75}
th{font-size:var(--fs-sm)}
td{font-size:var(--fs-ctl)}
b, strong{font-size:inherit}
button, select, input, textarea{font-family:inherit}
.btn{font-size:var(--fs-ctl)}
.field label{font-size:var(--fs-sm)}
.field input[type=text], .field input[type=date], .field input[type=number], .field input[type=email], .field input[type=password],
.field input[type=tel], .field input[type=datetime-local], .field select, textarea{font-size:var(--fs-base)}
.sessions-hint, .empty-note, .note{font-size:var(--fs-sm)}
.app-header p{font-size:var(--fs-base)}

/* ============ أرشيف التحضيرات (صفحة التحضير) ============ */
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.pa-tabs{display:inline-flex; gap:4px; padding:5px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); margin:4px 0 12px; max-width:100%; flex-wrap:wrap}
.pa-tabs button{font-family:inherit; font-size:var(--fs-ctl); font-weight:700; border:0; background:transparent; color:var(--muted); padding:8px 16px; border-radius:999px; cursor:pointer; min-height:40px}
.pa-tabs button.on{background:var(--navy); color:#fff}
.pa-cnt{font-size:var(--fs-sm); font-weight:600; opacity:.85}
.pa-bar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px}
.pa-bar input,.pa-bar select{font-family:inherit; font-size:var(--fs-ctl); padding:8px 12px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); min-height:40px; min-width:0; max-width:100%}
.pa-bar input{flex:1 1 200px}
.pa-n{font-size:var(--fs-sm); color:var(--muted); margin-inline-start:auto}
.pa-list{display:flex; flex-direction:column; gap:10px}
.pa-item{background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:12px 14px}
.pa-item.same{border-inline-start:4px solid var(--green)}
.pa-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap}
.pa-head .title{font-weight:700; font-size:var(--fs-md)}
.pa-head .meta{font-size:var(--fs-sm); color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:2px}
.pa-badge{display:inline-block; font-size:var(--fs-xs); font-weight:700; padding:1px 8px; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--text)}
.pa-badge.mine{border-color:var(--navy); color:var(--navy)}
.pa-badge.ai{border-color:var(--gold-bright); color:var(--gold)}
.pa-badge.same{border-color:var(--green); color:var(--green)}
.pa-acts{display:flex; gap:6px; flex-wrap:wrap}
.pa-acts .btn{padding:7px 12px; font-size:var(--fs-ctl); min-height:38px}
.pa-preview{margin-top:10px; border-top:1px dashed var(--border); padding-top:10px; display:grid; gap:8px}
.pa-preview .sec b{display:block; font-size:var(--fs-ctl); color:var(--heading, var(--navy))}
.pa-preview .sec div{white-space:pre-wrap; font-size:var(--fs-base); line-height:1.75}
.pa-pager{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center; margin-top:12px}
.pa-pager:empty{display:none}
.pa-pager button{min-width:40px; min-height:40px; border-radius:12px; border:1.5px solid var(--border); background:var(--surface); color:var(--heading, var(--text)); font-family:inherit; font-weight:700; cursor:pointer}
.pa-pager button.on{background:var(--navy); border-color:var(--navy); color:#fff}
.pa-pager button:disabled{opacity:.4; cursor:default}
.pa-pager span{color:var(--muted)}
.pa-ways{margin-top:14px; padding-top:12px; border-top:1px solid var(--border)}
@media (max-width:600px){ .pa-acts{width:100%} .pa-acts .btn{flex:1 1 auto} .pa-bar select{flex:1 1 45%} }

/* ============ الخطة الأسبوعية (تبويب التحضير الأسبوعي) ============ */
.wk-top{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.wk-nav{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.wk-icon{width:44px; height:44px; border-radius:12px; border:1.5px solid var(--border); background:var(--surface); color:var(--heading, var(--navy)); display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.wk-label{min-width:260px; text-align:center; padding:4px 14px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border)}
.wk-label-t{font-size:var(--fs-md); font-weight:800; color:var(--heading, var(--navy))}
.wk-label-s{font-size:var(--fs-sm); color:var(--muted)}
.wk-tag{font-size:var(--fs-xs); font-weight:700; border-radius:999px; padding:1px 8px; margin-inline-start:6px; background:var(--surface); border:1px solid var(--border); color:var(--muted)}
.wk-tag.up{background:#FDF3DC; border-color:#EDC77A; color:#8A5A0F}
.wk-tag.now{background:#E7F6EF; border-color:#9FD9C2; color:#0B6E4D}
.wk-date{display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--muted)}
.wk-date input,.wk-filters select{font-family:inherit; font-size:var(--fs-ctl); min-height:42px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); padding:0 10px}
.wk-filters{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border)}
.wk-chips{display:flex; gap:6px; flex-wrap:wrap}
.wk-chips button{font-family:inherit; font-size:var(--fs-ctl); font-weight:700; min-height:42px; padding:0 14px; border-radius:999px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer}
.wk-chips button.st-done{border-color:#0E9F6E; color:#0B6E4D}
.wk-chips button.st-plan{border-color:#D49A2A; color:#8A5A0F}
.wk-chips button.st-slot{border-style:dashed; border-color:#8B93AB; color:#4E5670}
.wk-chips button.on{background:var(--navy); border-color:var(--navy); color:#fff}
.wk-link{font-family:inherit; font-size:var(--fs-sm); font-weight:700; color:var(--navy); background:none; border:0; text-decoration:underline; cursor:pointer; padding:6px 4px; margin-inline-start:auto}
.wk-tiles{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:16px}
.wk-tile{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:12px 16px; display:flex; flex-direction:column; gap:4px}
.wk-tile .k{font-size:var(--fs-sm); font-weight:700; color:var(--muted); display:flex; align-items:center; gap:8px}
.wk-tile .v{font-size:var(--fs-2xl); font-weight:800; line-height:1.1; color:var(--heading, var(--navy))}
.wk-tile .h{font-size:var(--fs-xs); color:var(--muted)}
.wk-tile .dot{width:10px; height:10px; border-radius:3px; display:inline-block}
.wk-bar{height:8px; border-radius:99px; background:var(--border); display:flex; overflow:hidden}
.wk-bar i{display:block; height:100%}
.wk-grid{display:flex; flex-direction:column; gap:8px; overflow-x:auto}
.wk-row{display:grid; grid-template-columns:110px repeat(7, minmax(108px,1fr)); gap:8px}
.wk-row.head{font-size:var(--fs-sm); font-weight:700; color:var(--muted); text-align:center}
.wk-day{border-radius:14px; background:var(--surface-2); display:flex; flex-direction:column; justify-content:center; padding:0 12px; min-height:92px}
.wk-day b{font-size:var(--fs-md); color:var(--heading, var(--navy))}
.wk-day span{font-size:var(--fs-xs); color:var(--muted)}
.wk-cell{font-family:inherit; text-align:start; width:100%; min-height:92px; box-sizing:border-box; border-radius:14px; padding:8px 10px; display:flex; flex-direction:column; gap:2px; cursor:pointer; border:1.5px solid transparent; background:var(--surface)}
.wk-cell .c{font-size:var(--fs-xs); font-weight:700}
.wk-cell .l{font-size:var(--fs-sm); font-weight:700; color:var(--text); line-height:1.45}
.wk-cell .s{font-size:var(--fs-xs); color:var(--muted)}
.wk-cell.done{background:#E7F6EF; border-color:#9FD9C2} .wk-cell.done .c{color:#0B6E4D}
.wk-cell.plan{background:#FDF3DC; border-color:#EDC77A} .wk-cell.plan .c{color:#8A5A0F}
.wk-cell.plan .go{margin-top:auto; align-self:flex-start; background:#8A5A0F; color:#fff; font-size:var(--fs-xs); font-weight:700; border-radius:8px; padding:1px 10px}
.wk-cell.slot{border:1.5px dashed #8B93AB} .wk-cell.slot .c{color:#4E5670} .wk-cell.slot .l{color:var(--navy)}
.wk-cell.off{background:var(--surface-2); border:1.5px dashed var(--border)} .wk-cell.off .l{color:var(--muted); text-decoration:line-through}
.wk-cell.free{background:var(--surface-2); border:1px solid var(--border); color:var(--muted); align-items:center; justify-content:center; font-size:22px; opacity:.6}
.wk-cell.dim{opacity:.22}
.wk-extras{grid-column:2 / -1; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:var(--fs-xs); color:var(--muted)}
.wk-extras button{font-family:inherit; font-size:var(--fs-xs); font-weight:700; border-radius:999px; border:1.5px solid #9FD9C2; background:#E7F6EF; color:#0B6E4D; padding:3px 10px; cursor:pointer}
.wk-bottom{display:grid; grid-template-columns:2fr 1fr; gap:14px}
.wk-cover h3{margin:0 0 8px; font-size:var(--fs-md); color:var(--heading, var(--navy))}
.wk-cover-list{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 24px; font-size:var(--fs-sm)}
.wk-cover-list div{display:flex; justify-content:space-between; gap:10px}
.wk-cover-list b{white-space:nowrap}
.wk-cover-list span{color:var(--muted); text-align:end}
.wk-actions{display:flex; flex-direction:column; gap:8px}
.wk-actions .btn{width:100%}
.wk-two{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.wk-ov{position:fixed; inset:0; background:rgba(20,26,51,.45); z-index:1000; display:flex; align-items:center; justify-content:center; padding:16px}
.wk-ov.hidden{display:none}
.wk-modal{background:var(--surface); border-radius:22px; width:min(640px, 100%); max-height:calc(100vh - 32px); overflow:auto; padding:22px; box-sizing:border-box; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-lg, 0 18px 45px rgba(0,0,0,.2))}
.wk-modal.wide{width:min(1000px, 100%)}
.wk-modal h3{margin:0; font-size:var(--fs-xl); color:var(--heading, var(--navy))}
.wk-modal .sub{font-size:var(--fs-sm); color:var(--muted)}
.wk-modal .mhead{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.wk-modal .grid2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.wk-modal label{display:flex; flex-direction:column; gap:4px; font-size:var(--fs-sm); color:var(--muted)}
.wk-modal select,.wk-modal input{font-family:inherit; font-size:var(--fs-base); min-height:44px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); padding:0 10px}
.wk-sug{border:1.5px solid #9FD9C2; background:#E7F6EF; border-radius:16px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.wk-sug .k{font-size:var(--fs-xs); font-weight:700; color:#0B6E4D}
.wk-sug .t{font-size:var(--fs-md); font-weight:800}
.wk-mbtns{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.wk-mbtns .btn{flex:1 1 auto}
.wk-tt{display:flex; flex-direction:column; gap:6px; overflow-x:auto}
.wk-tt .wk-row{grid-template-columns:90px repeat(7, minmax(96px,1fr))}
.wk-tt select{min-height:44px; font-size:var(--fs-sm); width:100%; min-width:0}
.wk-tt .d{display:flex; align-items:center; font-weight:800; color:var(--heading, var(--navy))}
.wk-cls{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.wk-cls span{font-size:var(--fs-sm); font-weight:700; padding:5px 12px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border)}
@media (max-width: 900px){
  .wk-tiles{grid-template-columns:repeat(2, minmax(0,1fr))}
  .wk-bottom{grid-template-columns:1fr}
}
@media (max-width: 700px){
  .wk-label{min-width:0; flex:1 1 160px}
  .wk-grid .wk-row.head{display:none}
  .wk-grid .wk-row{display:flex; flex-direction:column; gap:6px}
  .wk-grid .wk-day{min-height:0; flex-direction:row; justify-content:space-between; align-items:baseline; padding:8px 4px; background:none}
  .wk-grid .wk-cell{min-height:56px}
  .wk-grid .wk-cell.free{display:none}
  .wk-grid .wk-cell .p{display:inline}
  .wk-cover-list{grid-template-columns:1fr}
  .wk-modal .grid2{grid-template-columns:1fr}
}
.wk-cell .p{display:none; font-weight:800}

/* ============ لغة التحضير ============ */
.prep-lang{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 10px; font-size:var(--fs-sm); color:var(--muted); font-weight:700}
.prep-lang button{font-family:inherit; font-size:var(--fs-ctl); font-weight:700; min-height:38px; padding:0 14px; border-radius:999px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer}
.prep-lang button.on{background:var(--navy); border-color:var(--navy); color:#fff}
.section-input[dir=ltr]{text-align:left}
.wk-clsbox{display:flex; flex-direction:column; gap:8px; border:1px solid var(--border); border-radius:16px; padding:12px 14px; background:var(--surface-2)}
.wk-clsbox > b{font-size:var(--fs-sm); color:var(--heading, var(--navy))}
.wk-clsgrp{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.wk-clsgrp .gname{font-size:var(--fs-sm); font-weight:800; color:var(--text); margin-inline-end:4px}
.wk-chip{display:inline-flex; align-items:center; gap:2px; font-family:inherit; font-size:var(--fs-sm); font-weight:700; padding:2px 4px 2px 10px; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--text)}
[dir=rtl] .wk-chip{padding:2px 10px 2px 4px}
.wk-chip button{width:30px; height:30px; border-radius:50%; border:0; background:transparent; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:14px}
.wk-chip button:hover{background:var(--surface-2); color:var(--text)}
.wk-chip.add{padding:6px 12px; cursor:pointer; border-style:dashed}
.wk-link.danger{color:var(--danger); margin-inline-start:0}