:root{
    --navy:#1B3B78;
    --navy-dark:#0F2142;
    --amber:#F2A93B;
    --amber-dark:#D6871B;
    --cream:#FBF7EC;
    --cream-2:#F3ECDA;
    --ink:#232A33;
    --ink-soft:#5B6472;
    --green:#3F6B47;
    --green-light:#5D8C6E;
    --line:#E6D9B8;
    --red:#C0483F;
    --gradient-primary: linear-gradient(135deg, #1B3B78 0%, #0F2142 100%);
    --gradient-warm: linear-gradient(135deg, #F2A93B 0%, #D6871B 100%);
    --gradient-text: linear-gradient(135deg, #1B3B78 0%, #0F2142 100%);
    --surface:#ffffff;
    --bg-top:#FDFBF5;
    --bg-bottom:#FBF7EC;

    /* Design tokens: shared radius/shadow scale. Used by newer components
       (stats dashboard, AI assistant, empty states) so future additions stay
       consistent by default instead of each picking its own one-off value. */
    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:24px;
    --shadow-sm:0 2px 10px rgba(27,59,120,0.05);
    --shadow-md:0 10px 30px -14px rgba(27,59,120,0.16);
    --shadow-lg:0 20px 48px -18px rgba(27,59,120,0.22);
  }

  :root[data-theme="dark"]{
    --navy:#4C7CDE;
    --navy-dark:#0B1730;
    --amber:#F2A93B;
    --amber-dark:#D6871B;
    --cream:#1A1F29;
    --cream-2:#232A36;
    --ink:#E8E7E2;
    --ink-soft:#9BA3B0;
    --green:#6FAE81;
    --green-light:#8CC49E;
    --line:#333C4A;
    --red:#E17A70;
    --gradient-primary: linear-gradient(135deg, #2A4E9C 0%, #0B1730 100%);
    --gradient-warm: linear-gradient(135deg, #F2A93B 0%, #D6871B 100%);
    --gradient-text: linear-gradient(135deg, #8FB3F5 0%, #4C7CDE 100%);
    --surface:#1E2530;
    --bg-top:#12161D;
    --bg-bottom:#0D1015;

    --shadow-sm:0 2px 10px rgba(0,0,0,0.25);
    --shadow-md:0 10px 30px -14px rgba(0,0,0,0.5);
    --shadow-lg:0 20px 48px -18px rgba(0,0,0,0.6);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  
  body{
    margin:0;
    background:linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
    color:var(--ink);
    font-family:'Tajawal',sans-serif;
    line-height:1.7;
    position:relative;
    transition:background .3s ease, color .3s ease;
  }
  
  /* Background Pattern */
  body::before {
    content:"";
    position:fixed;
    top:0;right:0;width:400px;height:400px;
    background:radial-gradient(circle, rgba(61,107,71,0.05) 0%, transparent 70%);
    pointer-events:none;
    z-index:1;
  }
  
  h1,h2,h3,.display{
    font-family:'Lalezar','Tajawal',sans-serif;
    font-weight:700;
    letter-spacing:.5px;
  }
  
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;border:none;}
  img{max-width:100%;display:block;}

  /* ===================== Signature icon badge =====================
     One consistent wheat-spike glyph (.icon-spike), always shown inside
     a small round badge (.icon-badge), used everywhere a decorative
     mark is needed: eyebrows, stat numbers, the resume card. Replaces
     the old plain empty circle and the random emoji icons. */
  .icon-spike{
    width:16px;height:16px;
    flex:none;
    display:block;
  }

  .icon-badge{
    position:relative;
    display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;
    border-radius:50%;
    background:rgba(63,107,71,0.1);
    border:1px solid rgba(63,107,71,0.28);
    color:var(--green);
    flex:none;
    vertical-align:middle;
    margin-left:10px;
    transition:.25s;
  }
  .icon-badge.amber{
    background:rgba(242,169,59,0.14);
    border-color:rgba(242,169,59,0.4);
    color:var(--amber-dark);
  }
  .icon-badge.lg{width:44px;height:44px;}
  .icon-badge.lg .icon-spike{width:22px;height:22px;}

  /* Team logo shown inside the hero eyebrow badge. The logo itself is a
     wide wordmark, not a square icon, so object-fit:cover inside a tiny
     30px circle used to crop it into an unrecognizable sliver. We instead
     give the badge extra width, keep it a soft rounded pill with a little
     breathing room, and use object-fit:contain so the whole logo is
     visible and centered. */
  .icon-badge.has-logo{
    width:auto;
    min-width:34px;
    height:34px;
    padding:3px 8px;
    border-radius:17px;
    background:#fff;
    box-shadow:0 1px 4px rgba(27,59,120,0.12);
  }
  .icon-badge-logo{
    height:100%;
    width:auto;
    max-width:72px;
    object-fit:contain;
  }
  
  .eyebrow{
    display:flex;align-items:center;gap:8px;
    color:var(--green);
    font-weight:900;
    font-size:.8rem;
    letter-spacing:1.5px;
    margin-bottom:12px;
    text-transform:uppercase;
  }

  /* Header */
  header.site-header{
    position:sticky;top:0;z-index:65;
    background:var(--cream);
    opacity:.98;
    backdrop-filter:blur(10px);
    border-bottom:2px solid rgba(61,107,71,0.15);
    box-shadow:0 2px 16px rgba(27,59,120,0.08);
    transition:background .3s ease;
  }
  
  .nav-wrap{
    max-width:1200px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 28px;
  }
  
  .brand{
    display:flex;align-items:center;gap:12px;
    animation:slideIn 0.6s ease;
    cursor:pointer;
  }
  
  .brand-icon{
    height:46px;width:auto;
    object-fit:contain;
    display:block;
  }
  
  .brand span{
    font-family:'Lalezar';
    font-size:1.35rem;
    background:var(--gradient-text);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
  }
  
  nav.links{
    display:flex;gap:22px;align-items:center;
  }
  
  nav.links a{
    display:flex;align-items:center;gap:10px;
    font-weight:500;color:var(--ink-soft);font-size:.95rem;
    padding:8px 12px;
    border-bottom:3px solid transparent;
    transition:.3s cubic-bezier(0.4, 0, 0.2, 1);
    position:relative;
  }

  .nav-icon{display:none;flex:none;width:19px;height:19px;}

  nav.links a::after {
    content:"";
    position:absolute;
    bottom:-3px;right:0;width:0;height:3px;
    background:var(--gradient-warm);
    transition:.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  nav.links a:hover{
    color:var(--navy);
  }
  
  nav.links a:hover::after {
    width:100%;
  }

  /* "تواصل معنا" — styled as a standout CTA rather than a plain link */
  nav.links a.nav-cta{
    background:var(--gradient-warm);
    color:#fff;
    padding:9px 16px;
    border-radius:999px;
    font-weight:700;
    box-shadow:0 4px 12px rgba(242,169,59,0.3);
  }
  nav.links a.nav-cta:hover{
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(242,169,59,0.4);
  }
  nav.links a.nav-cta::after{display:none;}

  .nav-drawer-close{
    display:none;
  }
  
  .admin-btn{
    background:var(--gradient-primary);
    color:#fff;
    padding:10px 20px;
    border-radius:10px;
    font-weight:700;
    font-size:.85rem;
    transition:.3s;
    box-shadow:0 4px 12px rgba(27,59,120,0.2);
  }
  
  .admin-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(27,59,120,0.3);
  }
  
  .admin-btn.on{
    background:linear-gradient(135deg, #3F6B47 0%, #2D4A37 100%);
  }
  
  .burger{
    display:none;
    background:none;border:none;cursor:pointer;
    width:40px;height:40px;
    align-items:center;justify-content:center;
    border-radius:8px;
    color:var(--navy);
  }
  .burger:hover{background:rgba(27,59,120,0.08);}
  .burger svg{width:22px;height:22px;}

  /* Theme Toggle (sun/moon) */
  .auth-bubble{
    display:flex;align-items:center;gap:6px;flex:none;
    background:var(--cream-2);
    border:1.5px solid var(--line);
    color:var(--navy);
    padding:8px 16px 8px 8px;
    border-radius:999px;
    font-weight:700;font-size:.85rem;
    transition:.25s;
  }
  .auth-bubble .auth-bubble-icon{width:19px;height:19px;flex:none;}
  .auth-bubble:hover{
    background:var(--gradient-warm);
    color:#fff;
    border-color:transparent;
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(242,169,59,0.3);
  }
  .auth-bubble.on{
    background:linear-gradient(135deg, #3F6B47 0%, #2D4A37 100%);
    color:#fff;border-color:transparent;
  }
  .nav-search-btn{
    display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;flex:none;
    background:var(--cream-2);
    border:none;
    border-radius:50%;
    color:var(--navy);
    transition:.25s;
    cursor:pointer;
  }
  .nav-search-btn:hover{background:var(--line);}
  .nav-search-btn svg{width:19px;height:19px;}
  .nav-search-btn .icon-close{display:none;}
  .nav-search-btn.on{
    background:var(--gradient-warm);
    color:#fff;
  }
  .nav-search-btn.on .icon-search{display:none;}
  .nav-search-btn.on .icon-close{display:block;}

  .theme-toggle{
    display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;flex:none;
    background:var(--cream-2);
    border-radius:50%;
    color:var(--amber-dark);
    transition:.3s;
  }
  .theme-toggle:hover{
    background:var(--line);
    transform:rotate(20deg);
  }
  .theme-toggle svg{width:20px;height:20px;}
  .theme-toggle .icon-moon{display:none;}
  :root[data-theme="dark"] .theme-toggle{color:var(--amber);}
  :root[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
  :root[data-theme="dark"] .theme-toggle .icon-moon{display:block;}

  /* Year Navigation Bar (top banner) */
  .year-nav-bar{
    position:relative;
    background:var(--gradient-primary);
  }
  /* الحاوية الداخلية القابلة للتمرير أفقياً وللطيّ رأسياً — منفصلة عمداً
     عن .year-nav-bar الخارجي، لأن overflow-y:hidden هنا كان سيقطع مقبض
     الطيّ (.year-nav-toggle) الذي يبرز خارج حدود الشريط للأسفل لو كانا
     نفس العنصر. */
  .year-nav-scroll{
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    /* مطويّة افتراضياً: max-height بدل display:none كي يبقى الطيّ/الفتح
       متحرّكاً وسلساً بدل قفزة مفاجئة، ولأن display:none كان سيمنع
       centerActiveYearTab من العمل بشكل صحيح حتى بعد الفتح. */
    max-height:100px;
    transition:max-height .35s ease;
  }
  .year-nav-scroll.is-collapsed{
    max-height:0;
  }
  .year-nav-scroll::-webkit-scrollbar{display:none;}
  /* Fade the edges so it's visually obvious there are more years to scroll to,
     instead of tabs just running off-screen with no hint. */
  .year-nav-scroll{
    mask-image:linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  .year-nav-inner{
    max-width:1200px;margin:0 auto;
    display:flex;gap:8px;
    padding:10px 28px;
    white-space:nowrap;
    scroll-snap-type:x proximity;
    scroll-padding-inline:28px;
  }

  /* المقبض: نصف دائرة صغيرة بارزة من الطرف الأيمن لأسفل الشريط، مسطّحة من
     أعلى (متّصلة بالشريط) ومستديرة من أسفل، وبداخلها سهم صغير. النقر عليها
     يطوي/يفتح الشريط، والسهم يقلب اتجاهه (لأسفل = "اضغط للفتح"، لأعلى =
     "اضغط للطيّ") ليعكس الحالة الحالية بوضوح دون نص إضافي. طفلٌ مباشر
     لـ .year-nav-bar (وليس لـ .year-nav-scroll) عمداً كي لا يُقصّ عند
     الطيّ رغم أنه يبرز خارج حدود الشريط. */
  .year-nav-toggle{
    position:absolute;
    bottom:-15px;
    right:24px;
    width:34px;height:16px;
    padding:0;
    border:none;
    border-radius:0 0 17px 17px;
    background:var(--gradient-primary);
    box-shadow:0 3px 8px rgba(0,0,0,.2);
    display:flex;align-items:flex-end;justify-content:center;
    padding-bottom:2px;
    color:#fff;
    cursor:pointer;
    z-index:2;
    transition:.2s;
  }
  .year-nav-toggle:hover{background:var(--gradient-warm);}
  .year-nav-toggle-arrow{
    width:13px;height:13px;
    transition:transform .3s ease;
  }
  .year-nav-scroll:not(.is-collapsed) ~ .year-nav-toggle .year-nav-toggle-arrow{
    transform:rotate(180deg);
  }

  .year-tab{
    flex:none;
    scroll-snap-align:center;
    background:rgba(255,255,255,0.1);
    color:#fff;
    padding:10px 22px;
    min-height:40px;
    border-radius:999px;
    font-weight:700;
    font-size:.85rem;
    transition:.25s;
  }
  .year-tab:hover{background:rgba(255,255,255,0.2);}
  .year-tab.active{
    background:var(--gradient-warm);
    box-shadow:0 4px 12px rgba(242,169,59,0.35);
  }
  /* On narrower screens the 5 tabs don't fit their desktop size, which used
     to force horizontal drag-scrolling with a blurred fade on both edges.
     Instead, below this width the bar stops scrolling entirely and the tabs
     share the full width equally, so the whole row is visible at once and
     nothing looks cut off or "smudged". */
  @media(max-width:768px){
    .year-nav-bar{
      overflow-x:visible;
      mask-image:none;
      -webkit-mask-image:none;
    }
    .year-nav-inner{
      padding:8px 12px;gap:6px;
      white-space:normal;
    }
    .year-tab{
      flex:1 1 0;
      min-width:0;
      padding:9px 4px;
      font-size:.78rem;
      min-height:38px;
    }
  }
  @media(max-width:420px){
    .year-nav-inner{padding:7px 8px;gap:4px;}
    .year-tab{padding:8px 2px;font-size:.7rem;min-height:36px;}
    .year-nav-toggle{right:14px;}
  }

  .nav-overlay{
    display:none;
    position:fixed;inset:0;
    background:rgba(15,33,66,.45);
    z-index:55;
  }
  .nav-overlay.show{display:block;}

  /* Search Bubble — lives inside the sticky header, collapsed to nothing
     until the nav-search-btn icon toggles it open (see app.js) */
  .search-wrap{
    max-width:1200px;margin:0 auto;
    padding:0 28px;
    position:relative;
    display:none;
  }
  .search-wrap.open{
    display:block;
    padding:14px 28px 18px;
    animation:fadeInUp .25s ease;
  }
  .search-bubble{
    display:flex;align-items:center;
    background:var(--surface);
    border:2px solid var(--line);
    border-radius:999px;
    padding:6px 8px 6px 20px;
    box-shadow:0 4px 16px rgba(27,59,120,0.06);
    transition:.25s;
  }
  .search-bubble:focus-within{
    border-color:var(--green-light);
    box-shadow:0 6px 20px rgba(27,59,120,0.12);
  }
  .search-bubble input{
    flex:1;border:none;outline:none;background:transparent;
    font-family:inherit;font-size:.95rem;color:var(--ink);
    padding:8px 4px;
  }
  .search-bubble input::placeholder{color:var(--ink-soft);}
  .search-icon-btn{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;flex:none;
    border:none;border-radius:50%;
    background:var(--gradient-primary);
    color:#fff;cursor:pointer;
    transition:.25s;
  }
  .search-icon-btn:hover{transform:scale(1.06);}
  .search-icon-btn svg{width:18px;height:18px;}

  .search-results{
    display:none;
    position:absolute;
    left:28px;right:28px;top:calc(100% + 6px);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 12px 32px rgba(15,33,66,.14);
    max-height:340px;overflow-y:auto;
    z-index:45;
  }
  .search-results.show{display:block;}
  .search-result-item{
    display:flex;align-items:center;gap:12px;
    padding:14px 18px;
    border-bottom:1px solid var(--cream-2);
    cursor:pointer;
    transition:.2s;
  }
  .search-result-item:last-child{border-bottom:none;}
  .search-result-item:hover{background:var(--cream-2);}
  .search-result-item .sr-icon{font-size:1.2rem;flex:none;}
  .search-result-item .sr-text{min-width:0;}
  .search-result-item .sr-title{font-weight:700;color:var(--navy);font-size:.9rem;}
  .search-result-item .sr-sub{color:var(--ink-soft);font-size:.78rem;margin-top:2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .search-no-results{padding:18px;text-align:center;color:var(--ink-soft);font-size:.9rem;}

  @media(max-width:768px){
    .search-wrap.open{padding:12px 16px 16px;}
  }

  /* Announcements Carousel */
  .ann-carousel-admin-bar{
    max-width:1200px;margin:0 auto;
    padding:24px 28px 0;
    justify-content:flex-end;
  }
  .ann-carousel-wrap{
    max-width:1200px;margin:0 auto;
    padding:20px 28px 0;
  }
  .ann-carousel{
    position:relative;
    width:100%;
    aspect-ratio:16/6;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(15,33,66,.14);
    background:var(--cream-2);
    touch-action:pan-y;
    cursor:grab;
  }
  .ann-carousel.dragging{cursor:grabbing;}
  .ann-track{
    display:flex;
    height:100%;
    direction:ltr; /* keep slide order + translateX math consistent regardless of page RTL */
    transition:transform .45s cubic-bezier(0.4,0,0.2,1);
  }
  .ann-track.no-transition{transition:none;}
  .ann-slide{
    display:block;
    flex:0 0 100%;
    height:100%;
    position:relative;
    color:inherit;
    text-decoration:none;
    direction:rtl; /* restore normal RTL alignment for the caption text inside each slide */
  }
  .ann-slide-img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    z-index:0;
  }
  a.ann-slide{cursor:pointer;}
  .ann-slide-caption{
    position:absolute;inset:auto 0 0 0;
    padding:28px 24px 18px;
    background:linear-gradient(0deg, rgba(15,33,66,.82) 0%, rgba(15,33,66,0) 100%);
    color:#fff;
  }
  .ann-slide-caption h4{font-size:1.1rem;font-weight:800;margin-bottom:4px;}
  .ann-slide-caption p{font-size:.85rem;opacity:.9;}
  .ann-dots{
    display:flex;justify-content:center;gap:8px;
    margin-top:16px;
  }
  .ann-dot{
    width:9px;height:9px;border-radius:50%;
    background:var(--line);
    border:none;cursor:pointer;
    transition:.25s;
  }
  .ann-dot.active{
    background:var(--green);
    width:24px;border-radius:5px;
  }
  @media(max-width:768px){
    .ann-carousel-admin-bar{padding:20px 16px 0;}
    .ann-carousel-wrap{padding:16px 16px 0;}
    .ann-carousel{aspect-ratio:4/3;}
  }

  /* Per-section Year & Semester Filter Rows (like the reference design) */
  /* ===================== Materials step-by-step wizard =====================
     Reveals the year → semester → [specialization] → track rows one at a
     time (instead of all at once), with a back button to revisit a
     previous step. Logic lives in renderMaterialsWizard() /
     materialsWizardAdvance() / materialsWizardBack() in app.js. */
  .materials-wizard-bar{
    display:flex;align-items:center;gap:14px;
    margin-bottom:18px;
    min-height:38px;
  }

  .wizard-progress{
    display:flex;align-items:center;gap:6px;
    margin-inline-start:auto;
  }
  .wizard-dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--line);
    transition:.3s;
  }
  .wizard-dot.done{
    background:var(--green-light);
  }
  .wizard-dot.active{
    width:20px;border-radius:4px;
    background:var(--amber);
  }
  .wizard-back-btn{
    display:flex;align-items:center;gap:4px;
    background:var(--cream-2);
    color:var(--ink-soft);
    padding:9px 18px;
    border-radius:10px;
    font-weight:700;
    font-size:.85rem;
    transition:.2s;
    flex:none;
  }
  .wizard-back-btn:hover{background:var(--line);color:var(--navy);}
  .materials-wizard-label{
    font-size:.92rem;
    font-weight:800;
    color:var(--ink-soft);
  }
  .section-year-row,
  .section-semester-row,
  .section-specialization-row,
  .section-track-row{
    animation:fadeInUp 0.35s ease both;
  }

  .section-year-row{
    display:flex;flex-wrap:wrap;gap:12px;
    margin-bottom:28px;
  }
  .sec-year-btn{
    background:var(--cream-2);
    color:var(--ink);
    padding:14px 22px;
    border-radius:14px;
    font-weight:700;
    font-size:.95rem;
    min-width:78px;
    text-align:center;
    transition:.25s;
  }
  .sec-year-btn:hover{background:var(--line);}
  .sec-year-btn.active{
    background:var(--gradient-primary);
    color:#fff;
    box-shadow:0 4px 12px rgba(27,59,120,0.2);
  }
  .section-semester-row{
    display:flex;gap:10px;
    margin-bottom:28px;
  }
  .sec-sem-btn{
    background:var(--cream-2);
    color:var(--ink-soft);
    padding:10px 22px;
    border-radius:10px;
    font-weight:700;
    font-size:.88rem;
    transition:.25s;
  }
  .sec-sem-btn:hover{background:var(--line);}
  .sec-sem-btn.active{
    background:var(--gradient-warm);
    color:#fff;
  }

  /* Specialization row (years 4 & 5 only) — admin-managed pills with inline
     edit/delete icons, plus a dashed "add" tile matching the subject tile style. */
  .section-specialization-row{
    display:flex;flex-wrap:wrap;gap:10px;align-items:center;
    margin-bottom:28px;
  }
  .sec-spec-btn{
    position:relative;
    display:flex;align-items:center;gap:8px;
    background:var(--cream-2);
    color:var(--ink-soft);
    padding:10px 16px;
    border-radius:12px;
    font-weight:700;
    font-size:.88rem;
    transition:.25s;
  }
  .sec-spec-btn:hover{background:var(--line);}
  .sec-spec-btn.active{
    background:var(--gradient-primary);
    color:#fff;
    box-shadow:0 4px 12px rgba(27,59,120,0.2);
  }
  .sec-spec-actions{
    display:flex;gap:4px;
    margin-inline-start:2px;
  }
  .sec-spec-actions.is-visible{display:flex;}
  .sec-spec-edit, .sec-spec-del{
    width:20px;height:20px;border-radius:6px;
    display:flex;align-items:center;justify-content:center;
    font-size:.72rem;
    background:rgba(255,255,255,0.25);
    transition:.2s;
  }
  .sec-spec-btn:not(.active) .sec-spec-edit,
  .sec-spec-btn:not(.active) .sec-spec-del{
    background:var(--surface);
  }
  .sec-spec-edit:hover{transform:scale(1.12);}
  .sec-spec-del:hover{background:#FBE4E1;color:var(--red);}
  .spec-add-tile{
    display:flex;align-items:center;gap:8px;
    background:transparent;
    border:2px dashed var(--line);
    border-radius:12px;
    padding:9px 16px 9px 12px;
    color:var(--ink-soft);
    font-weight:700;font-size:.85rem;
    transition:.25s;
  }
  .spec-add-tile:hover{
    border-color:var(--amber);
    color:var(--amber-dark);
    background:rgba(242,169,59,0.05);
  }
  .spec-add-tile .plus-icon{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:1rem;font-weight:900;line-height:1;
    background:var(--cream-2);color:var(--ink-soft);
    transition:.25s;
  }
  .spec-add-tile:hover .plus-icon{background:var(--gradient-warm);color:#fff;}
  .spec-empty{
    color:var(--ink-soft);font-size:.85rem;font-weight:600;
    padding:8px 0;
  }

  /* Practical / Theoretical row — shown for every year, right after the
     semester row (and after the specialization row for years 4 & 5). */
  .section-track-row{
    display:flex;gap:10px;
    margin-bottom:28px;
  }
  .sec-track-btn{
    background:var(--cream-2);
    color:var(--ink-soft);
    padding:10px 22px;
    border-radius:10px;
    font-weight:700;
    font-size:.88rem;
    transition:.25s;
  }
  .sec-track-btn:hover{background:var(--line);}
  .sec-track-btn.active{
    background:var(--gradient-primary);
    color:#fff;
  }
  @media(max-width:768px){
    .sec-spec-btn{padding:8px 12px;font-size:.82rem;}
    .sec-track-btn{padding:8px 16px;font-size:.82rem;}
  }
  @media(max-width:768px){
    .sec-year-btn{padding:11px 16px;font-size:.85rem;min-width:64px;}
    .section-year-row{gap:8px;margin-bottom:22px;}
    .sec-sem-btn{padding:8px 16px;font-size:.82rem;}
  }

  /* Subject grouping inside summaries/tests grids */
  .subject-group{grid-column:1/-1;margin-bottom:8px;}
  .subject-heading{
    font-family:'Lalezar','Tajawal',sans-serif;
    color:var(--green);
    font-size:1.15rem;
    margin:0 0 18px;
    padding-bottom:10px;
    border-bottom:2px solid var(--line);
    display:flex;align-items:center;gap:8px;
  }
  .subject-cards{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:28px;
    margin-bottom:36px;
  }
  .subject-cards:last-child{margin-bottom:0;}

  /* Hero Section */
  .hero{
    max-width:1200px;margin:0 auto;
    padding:80px 28px 32px;
    display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;
    position:relative;
    z-index:2;
  }
  
  .hero h1{
    font-size:3.5rem;
    line-height:1.2;
    margin:0 0 20px;
    animation:slideInLeft 0.8s ease;
  }

  /* Lighter half of the title: plain weight, ink color, no gradient */
  .hero-title-light{
    font-family:'Tajawal',sans-serif;
    font-weight:500;
    color:var(--ink-soft);
    display:inline-block;
  }

  /* Heavy half: the only part that carries the brand gradient + weight,
     with a thin golden underline beneath it. */
  .hero-title-strong{
    position:relative;
    display:inline-block;
    font-family:'Lalezar','Tajawal',sans-serif;
    font-weight:700;
    background:var(--gradient-text);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    padding-bottom:.14em;
  }
  .hero-title-strong::after{
    content:"";
    position:absolute;
    right:2px;left:2px;bottom:0;
    height:3px;
    border-radius:3px;
    background:var(--gradient-warm);
  }
  
  .hero p.lede{
    font-size:1.15rem;
    color:var(--ink-soft);
    max-width:520px;
    margin:0 0 32px;
    line-height:1.8;
    animation:slideInLeft 0.8s ease 0.1s both;
  }
  
  .hero-ctas{
    display:flex;gap:16px;
    margin-bottom:48px;
    flex-wrap:wrap;
    animation:slideInLeft 0.8s ease 0.2s both;
  }
  
  .btn{
    padding:14px 32px;
    border-radius:12px;
    font-weight:700;
    font-size:.95rem;
    display:inline-block;
    transition:.3s cubic-bezier(0.4, 0, 0.2, 1);
    position:relative;
    overflow:hidden;
  }
  
  .btn::before {
    content:"";
    position:absolute;
    top:0;left:-100%;width:100%;height:100%;
    background:rgba(255,255,255,0.2);
    transition:.4s;
    z-index:-1;
  }
  
  .btn-primary{
    background:var(--gradient-warm);
    color:#fff;
    box-shadow:0 6px 20px rgba(242,169,59,0.3);
  }
  
  .btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 28px rgba(242,169,59,0.4);
  }
  
  .btn-ghost{
    border:2px solid var(--navy);
    color:var(--navy);
    background:transparent;
  }
  
  .btn-ghost:hover{
    background:var(--navy);
    color:#fff;
    transform:translateY(-3px);
  }
  
  /* ===================== Stats dashboard =====================
     A standalone card right below the hero, not a strip inside it — reads as
     a small "live dashboard" rather than a decorative line under the intro
     text. Two groups on purpose:
       - stat-group-content: admin-set, always-exact numbers (navy/amber
         gradient, matches the rest of the brand).
       - stat-group-live: numbers that move on their own in real time
         (green — the site's under-used agricultural accent colour — plus a
         small pulsing dot) so a visitor can tell at a glance these are
         "live" figures, not fixed content counts. */
  .stats-dash{
    max-width:1200px;
    margin:0 auto;
    padding:0 28px 56px;
  }

  .stats-dash-inner{
    display:flex;flex-wrap:wrap;
    gap:0;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:0 10px 30px -18px rgba(27,59,120,.18);
    overflow:hidden;
  }

  .stat-group{
    display:flex;flex-wrap:wrap;
    flex:1 1 240px;
    padding:22px 24px;
  }
  .stat-group-content{
    border-inline-end:1px solid var(--line);
  }
  .stat-group-live{
    background:color-mix(in srgb, var(--green) 6%, transparent);
  }

  .stat-item{
    flex:1 1 0;
    min-width:96px;
    display:flex;flex-direction:column;gap:4px;
    padding-inline-start:20px;
    padding-inline-end:20px;
    border-inline-start:1px solid var(--line);
  }
  .stat-item:first-child{
    padding-inline-start:0;
    border-inline-start:none;
  }

  .stat-item b{
    font-family:'Lalezar';
    font-size:1.85rem;
    background:var(--gradient-text);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
  }

  /* Live numbers get the green accent instead of the navy/amber content
     gradient — a deliberate, minimal use of the site's agricultural green. */
  .stat-group-live .stat-item b{
    background:none;-webkit-text-fill-color:initial;
    color:var(--green);
  }

  .stat-item span{
    font-size:.78rem;
    color:var(--ink-soft);
    font-weight:500;
    display:flex;align-items:center;gap:6px;
  }

  .live-dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--green-light);
    display:inline-block;
    animation:pulse-live-dot 1.6s ease-in-out infinite;
  }
  @keyframes pulse-live-dot{
    0%,100%{opacity:.4;transform:scale(.85);}
    50%{opacity:1;transform:scale(1);}
  }

  /* Shown while the real count loads from Firestore, instead of a
     misleading "0" that looks like the site has no content. */
  .stat-item b.stat-loading{
    opacity:.35;
    animation:pulse-stat 1.1s ease-in-out infinite;
  }
  @keyframes pulse-stat{
    0%,100%{opacity:.35;}
    50%{opacity:.75;}
  }

  @media (max-width: 640px){
    .stat-group-content{border-inline-end:none;border-bottom:1px solid var(--line);}
  }

  /* ===================== Scroll-reveal =====================
     Major sections start slightly lowered/faded and settle into place the
     first time they scroll into view (via IntersectionObserver in app.js),
     instead of the whole page being visible at once. Off by default for
     anyone with prefers-reduced-motion. */
  .scroll-reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .scroll-reveal.revealed{
    opacity:1;
    transform:none;
  }
  @media(prefers-reduced-motion: reduce){
    .scroll-reveal{opacity:1;transform:none;transition:none;}
  }

  /* ===================== In-app browser notice ===================== */
  .webview-notice{
    max-width:1200px;
    margin:0 auto 24px;
    padding:12px 20px;
    display:flex;flex-wrap:wrap;align-items:center;gap:12px;
    background:color-mix(in srgb, var(--amber) 14%, var(--surface));
    border:1px solid var(--amber);
    border-radius:14px;
  }
  .webview-notice-text{
    flex:1 1 260px;
    font-size:.85rem;
    color:var(--ink);
  }
  .webview-notice-btn{
    font-size:.8rem;
    font-weight:700;
    padding:8px 14px;
    border-radius:10px;
    border:1px solid var(--amber-dark);
    background:var(--amber);
    color:var(--navy-dark);
    cursor:pointer;
  }
  .webview-notice-close{
    background:none;border:none;
    color:var(--ink-soft);
    font-size:1rem;
    cursor:pointer;
    padding:4px 8px;
  }
  
  .hero-art{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    animation:slideInRight 0.8s ease;
  }
  
  .hero-art .ring{
    position:absolute;
    border-radius:50%;
    animation:spin-slow 20s linear infinite;
  }
  
  .hero-art .ring.large{
    width:380px;height:380px;
    border:3px solid var(--amber);
    opacity:.2;
  }
  
  .hero-art .ring.small{
    width:260px;height:260px;
    border:2px dashed var(--green);
    opacity:.3;
    animation-direction:reverse;
  }
  
  .hero-art img{
    position:relative;
    width:320px;
    z-index:2;
    filter:drop-shadow(0 20px 40px rgba(27,59,120,0.2));
  }
  
  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  @keyframes slideInLeft {
    from {
      opacity:0;
      transform:translateX(50px);
    }
  }
  
  @keyframes slideInRight {
    from {
      opacity:0;
      transform:translateX(-50px);
    }
  }

  /* Section Layout */
  section.block{
    max-width:1200px;
    margin:0 auto;
    padding:88px 28px;
    position:relative;
    z-index:2;
  }
  
  section.block.alt{
    background:linear-gradient(135deg, var(--cream-2) 0%, var(--cream) 100%);
    max-width:none;
    border-top:2px solid rgba(61,107,71,0.1);
    border-bottom:2px solid rgba(61,107,71,0.1);
  }
  
  section.block.alt > .inner{
    max-width:1200px;
    margin:0 auto;
  }
  
  .block-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    margin-bottom:48px;flex-wrap:wrap;gap:20px;
    animation:fadeInUp 0.6s ease;
  }
  
  .block-head h2{
    font-size:2.5rem;
    background:var(--gradient-text);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    margin:0;
  }
  
  .block-head p{
    color:var(--ink-soft);
    margin:8px 0 0;
    max-width:500px;
    font-size:.95rem;
    line-height:1.6;
  }
  
  .add-btn{
    background:var(--gradient-primary);
    color:#fff;
    padding:12px 24px;
    border-radius:12px;
    font-weight:700;
    font-size:.88rem;
    display:flex;align-items:center;gap:8px;
    box-shadow:0 4px 12px rgba(27,59,120,0.2);
    transition:.3s;
  }
  
  .add-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(27,59,120,0.3);
  }

  /* Grid & Cards */
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:28px;
    animation:fadeInUp 0.6s ease 0.2s both;
  }
  
  .card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:18px;
    padding:28px;
    position:relative;
    transition:.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:0 4px 20px rgba(27,59,120,0.06);
    overflow:hidden;
  }
  
  .card::before {
    content:"";
    position:absolute;
    top:0;left:0;right:0;height:4px;
    background:var(--gradient-warm);
    opacity:0;
    transition:.3s;
  }
  
  .card:hover{
    transform:translateY(-8px);
    box-shadow:0 16px 40px rgba(27,59,120,0.12);
    border-color:rgba(242,169,59,0.3);
  }
  
  .card:hover::before {
    opacity:1;
  }

  .card.search-highlight{
    animation:searchPulse 1.6s ease;
  }
  @keyframes searchPulse{
    0%, 100% { box-shadow:0 4px 20px rgba(27,59,120,0.06); border-color:var(--line); }
    20%, 60% { box-shadow:0 0 0 3px var(--amber), 0 16px 40px rgba(27,59,120,0.12); border-color:var(--amber); }
  }
  
  .card .tag{
    display:inline-block;
    font-size:.72rem;
    font-weight:900;
    color:#fff;
    background:linear-gradient(135deg, var(--green) 0%, var(--green-light) 100%);
    padding:6px 14px;
    border-radius:20px;
    margin-bottom:14px;
    box-shadow:0 2px 8px rgba(61,107,71,0.25);
    text-transform:uppercase;
    letter-spacing:0.5px;
  }
  
  .card h3{
    margin:0 0 12px;
    font-size:1.2rem;
    color:var(--navy);
    font-weight:700;
  }
  
  .card p{
    margin:0 0 16px;
    color:var(--ink-soft);
    font-size:.9rem;
    line-height:1.6;
  }
  
  .card .meta{
    font-size:.8rem;
    color:#9AA3AF;
    display:flex;justify-content:space-between;align-items:center;
  }
  
  .card a.file-link{
    color:var(--green);
    font-weight:700;
    font-size:.88rem;
    transition:.3s;
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  
  .card a.file-link:hover{
    color:var(--amber-dark);
    transform:translateX(-4px);
  }

  .card .ann-img-wrap{
    display:block;
    position:relative;
    margin:-28px -28px 16px;
    width:calc(100% + 56px);
  }

  /* بطاقات الأخبار المصوَّرة (ann-card-photo) ترتفع بارتفاع الصورة نفسها،
     فيختلف ارتفاع كل بطاقة عن جارتها في نفس الصف. align-items:start يمنع
     الشبكة من تمديد كل البطاقات لطول أطول بطاقة في الصف (وهو ما كان
     سيُفرغ الصور من مساحات بيضاء زائدة أسفلها). */
  #announcementsGrid.grid{align-items:start;}

  /* بطاقة الخبر ذات الصورة (ann-card-photo): البطاقة تأخذ أبعاد الصورة
     كما هي بالضبط — بلا قصّ (object-fit) وبلا نسبة عرض/ارتفاع مفروضة —
     وكل المحتوى (التصنيف، العنوان، الوصف، التاريخ، زر التحميل) مكتوب
     فوق الصورة نفسها داخل تدرّج (scrim) بلون كحلي داكن من هوية الموقع
     بدل الأسود المحايد، يبدأ شفافاً من الأعلى ويشتدّ تدريجياً أسفل
     الصورة فقط، فيبقى أعلى الصورة نظيفاً والنص أسفلها مقروءاً دائماً
     أياً كانت الصورة. العنوان والوصف مُحدَّدان بعدد أسطر (line-clamp)
     حتى لا تفيض الكتلة النصّية عن حدود الصورة عندما تكون قصيرة. */
  .ann-card-photo{padding:0;overflow:hidden;}
  .ann-photo-wrap{
    display:block;
    position:relative;
    width:100%;
    line-height:0; /* يمنع أي فراغ أسفل الصورة الناتج عن سطرها الأساسي كعنصر inline */
  }
  .ann-photo-wrap .card-img{
    width:100%;
    height:auto;
    aspect-ratio:auto;
    object-fit:unset;
    display:block;
  }
  .ann-photo-scrim{
    position:absolute;inset:0;
    background:linear-gradient(
      to top,
      rgba(11,23,48,.94) 0%,
      rgba(11,23,48,.82) 16%,
      rgba(11,23,48,.46) 34%,
      rgba(11,23,48,.12) 52%,
      rgba(11,23,48,0) 66%
    );
    pointer-events:none;
  }
  .ann-photo-controls{
    position:absolute;
    top:12px;
    inset-inline-end:12px;
    z-index:5;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .ann-photo-controls .card-admin-actions{
    /* لا تضع display:flex هنا مباشرة — لهذا المحدد خصوصية CSS أعلى من
       .admin-only{display:none} فيفوز عليها دائماً ويُظهر أزرار الأدمن
       للجميع. display فقط عند .is-visible (يضيفها JS بعد تأكيد الأدمن). */
    position:static;
    gap:8px;
  }
  .ann-photo-controls .card-admin-actions.is-visible{
    display:flex;
  }
  /* زر التكبير (.img-expand-btn) له تموضع مطلق خاص به في سياقات أخرى
     (البانرات وبطاقة الإعلان المميّزة)، لكن هنا هو عضو عادي داخل صفّ
     .ann-photo-controls المرن بجانب أزرار الأدمن، فنُلغي تموضعه المطلق
     كي لا يفلت من الصفّ ويتصادم مع شارة "جديد". */
  .ann-photo-controls .img-expand-btn{
    position:static;
    top:auto;right:auto;left:auto;bottom:auto;
    width:34px;height:34px;
    font-size:.92rem;
    background:rgba(11,23,48,.45);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  .ann-photo-controls .img-expand-btn:hover{
    background:rgba(11,23,48,.7);
  }
  .icon-btn-glass{
    width:34px;height:34px;border-radius:50%;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(11,23,48,.45);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:.92rem;
    cursor:pointer;
    transition:.25s;
  }
  .icon-btn-glass:hover{
    background:rgba(11,23,48,.7);
    transform:scale(1.08);
  }
  .icon-btn-glass.danger:hover{
    background:rgba(192,72,63,.75);
    border-color:rgba(255,255,255,.4);
  }
  .ann-photo-info{
    position:absolute;
    inset-inline:0;bottom:0;
    z-index:4;
    padding:40px 18px 16px;
    color:#fff;
  }
  .ann-photo-info .tag{
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:#fff;
    font-size:.7rem;
    font-weight:900;
    padding:5px 13px;
    border-radius:20px;
    margin-bottom:10px;
    border:1px solid rgba(255,255,255,.3);
    backdrop-filter:blur(4px);
    box-shadow:none;
  }
  .ann-photo-info .tag-general{background:rgba(63,107,71,.6);}
  .ann-photo-info .tag-test{background:rgba(214,135,27,.62);}
  .ann-photo-info .tag-lost{background:rgba(192,72,63,.62);}
  .ann-photo-info h3{
    color:#fff;
    margin:0 0 6px;
    font-size:1.12rem;
    text-shadow:0 1px 8px rgba(0,0,0,.55);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .ann-photo-info p{
    margin:0 0 12px;
    color:rgba(255,255,255,.88);
    font-size:.84rem;
    line-height:1.55;
    text-shadow:0 1px 6px rgba(0,0,0,.4);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .ann-photo-info .meta{
    font-size:.78rem;
    color:rgba(255,255,255,.78);
  }
  .file-link-glass{
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.3);
    backdrop-filter:blur(4px);
    padding:5px 12px;
    border-radius:20px;
    color:#fff !important;
  }
  .file-link-glass:hover{
    background:rgba(255,255,255,.3);
    color:#fff !important;
    transform:translateX(-4px);
  }

  .card .card-img{
    display:block;
    width:100%;
    max-width:none;
    aspect-ratio:16/9;
    object-fit:cover;
    transition:.3s;
  }

  .card .card-img:hover{
    filter:brightness(1.05);
  }

  .ann-new-badge{
    position:absolute;
    top:14px;
    inset-inline-start:14px;
    z-index:5;
    background:var(--red);
    color:#fff;
    font-size:.68rem;
    font-weight:900;
    padding:4px 12px;
    border-radius:20px;
    box-shadow:0 2px 8px rgba(192,72,63,.35);
    letter-spacing:.3px;
    animation:pulseBadge 1.8s ease-in-out infinite;
  }
  .ann-new-badge-noimg{
    position:static;
    display:inline-block;
    margin:0 0 12px;
  }
  @keyframes pulseBadge{
    0%,100%{box-shadow:0 2px 8px rgba(192,72,63,.35);}
    50%{box-shadow:0 2px 14px rgba(192,72,63,.6);}
  }
  @media(prefers-reduced-motion: reduce){
    .ann-new-badge{animation:none;}
  }

  /* Announcement type filter chips */
  .ann-filter-row{
    display:flex;flex-wrap:wrap;gap:10px;
    margin:22px 0 28px;
  }
  .ann-filter-chip{
    background:var(--cream-2);
    color:var(--ink-soft);
    padding:9px 18px;
    border-radius:30px;
    font-weight:700;
    font-size:.85rem;
    transition:.25s;
  }
  .ann-filter-chip:hover{background:var(--line);}
  .ann-filter-chip.active{
    background:var(--gradient-primary);
    color:#fff;
    box-shadow:0 4px 12px rgba(27,59,120,0.2);
  }

  /* Featured (latest) announcement card */
  .ann-featured{margin-bottom:28px;}
  .ann-featured-card{padding:24px;}
  .ann-featured-card h3{font-size:1.4rem;}
  .ann-featured-card .tag{
    background:linear-gradient(135deg, var(--amber) 0%, var(--amber-dark) 100%);
  }
  .ann-featured-card.ann-featured-with-img{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:24px;
    align-items:stretch;
  }
  .ann-featured-card.ann-featured-with-img .ann-img-wrap{
    margin:0;
    width:100%;
    height:100%;
    border-radius:14px;
    overflow:hidden;
  }
  .ann-featured-card.ann-featured-with-img .card-img{
    height:100%;
    aspect-ratio:auto;
    border-radius:14px;
  }
  @media(max-width:900px){
    .ann-featured-card.ann-featured-with-img{grid-template-columns:1fr;}
    .ann-featured-card.ann-featured-with-img .ann-img-wrap{
      margin:-24px -24px 16px;
      width:calc(100% + 48px);
      height:auto;
      border-radius:0;
    }
    .ann-featured-card.ann-featured-with-img .card-img{
      aspect-ratio:16/9;
      height:auto;
      border-radius:0;
    }
  }
  
  .card-admin-actions{
    position:absolute;top:16px;left:16px;display:flex;gap:8px;
    z-index:5; /* يبقيها دائماً فوق صورة البطاقة المجاورة، بغضّ النظر عن ترتيبهما في HTML — بدون هذا كانت الصورة (لها position أيضاً وتأتي لاحقاً في DOM) تُرسَم فوق أزرار ✏️🗑️ فتُخفيها وتمنع النقر عليها */
  }

  /* Admin-only controls (add/edit/delete buttons) stay hidden until JS confirms
     an authenticated admin session — prevents them from leaking to the public,
     including the brief flash before Firebase's auth check resolves. */
  .admin-only{display:none;}
  .admin-only.is-visible{display:flex;}
  /* This particular admin-only element is a stacked heading + grid, not a
     row of controls — override the generic flex back to a normal block. */
  #funAdminListWrap.is-visible{display:block;}

  /* Same idea as .admin-only, but for controls only a super_admin should
     see (right now: the "manage admins" button) — a regular admin never
     gets is-visible added to these, even though isAdmin is true for them too. */
  .superadmin-only{display:none;}
  .superadmin-only.is-visible{display:inline-flex;}
  
  .icon-btn{
    width:32px;height:32px;border-radius:10px;
    background:var(--cream-2);
    display:flex;align-items:center;justify-content:center;
    font-size:.9rem;color:var(--ink-soft);
    transition:.3s;
    cursor:pointer;
  }
  
  .icon-btn:hover{
    background:var(--line);
    transform:scale(1.1);
  }
  
  .icon-btn.danger:hover{
    background:#FBE4E1;
    color:var(--red);
  }
  :root[data-theme="dark"] .icon-btn.danger:hover{
    background:rgba(225,122,112,0.18);
  }

  /* Announcement Cards */
  .ann-card{
    border-right:5px solid var(--navy);
  }
  
  .ann-card.type-test{
    border-right-color:var(--amber);
  }
  
  .ann-card.type-lost{
    border-right-color:var(--red);
  }
  
  .ann-card.type-general{
    border-right-color:var(--green);
  }

  /* Empty State */
  .empty{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    text-align:center;
    padding:56px 30px;
    color:var(--ink-soft);
    border:2px dashed var(--line);
    border-radius:18px;
    background:var(--surface);
    transition:.3s;
  }

  .empty-icon{
    font-size:2.1rem;
    opacity:.7;
  }

  .empty-text{
    font-size:.92rem;
    font-weight:500;
  }
  
  .empty:hover {
    border-color:var(--amber);
    background:rgba(242,169,59,0.02);
  }
  .empty:hover .empty-icon{
    opacity:1;
  }

  /* Off-screen SEO fallback (kept in the DOM & crawlable, never visible) */
  .sr-only-seo{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }

  /* ===================== Materials: breadcrumb + resume chip ===================== */
  .materials-breadcrumb{
    display:flex;align-items:center;flex-wrap:wrap;gap:6px;
    margin:0 0 20px;
    font-size:.88rem;font-weight:700;color:var(--ink-soft);
  }
  .materials-breadcrumb .crumb{
    color:var(--ink-soft);cursor:pointer;transition:.2s;
    padding:4px 2px;
    text-decoration:underline;text-decoration-color:transparent;
    text-underline-offset:3px;
  }
  .materials-breadcrumb .crumb:hover{color:var(--navy);text-decoration-color:currentColor;}
  .materials-breadcrumb .crumb.current{color:var(--navy);cursor:default;text-decoration:none;}
  .materials-breadcrumb .crumb-sep{color:var(--line);}

  .resume-card{
    display:flex;align-items:center;gap:14px;
    background:var(--surface);
    border:1.5px solid var(--line);
    border-radius:18px;
    padding:10px;
    margin-bottom:20px;
    text-align:right;
    transition:.25s;
    width:fit-content;
    max-width:100%;
    box-shadow:0 4px 16px rgba(27,59,120,0.06);
  }
  .resume-card:hover{
    border-color:var(--amber);
    box-shadow:0 10px 26px rgba(242,169,59,0.18);
    transform:translateY(-2px);
  }
  .resume-card-text{
    display:flex;flex-direction:column;gap:2px;
    min-width:0;
  }
  .resume-card-title{
    font-size:.74rem;font-weight:800;color:var(--ink-soft);
    letter-spacing:.3px;
  }
  .resume-card-sub{
    font-size:.98rem;font-weight:900;color:var(--navy);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:320px;
  }
  /* Circular arrow button, flush against the card edge (not floating apart) */
  .resume-card-arrow{
    width:36px;height:36px;flex:none;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--gradient-warm);
    color:#fff;
    transition:.25s;
  }
  .resume-card-arrow svg{width:17px;height:17px;}
  .resume-card:hover .resume-card-arrow{transform:translateX(-4px);}

  /* ===================== Subject search bar ===================== */
  .subject-search-wrap{
    position:relative;
    max-width:420px;
    margin-bottom:24px;
  }
  .subject-search-wrap svg{
    position:absolute;top:50%;right:16px;transform:translateY(-50%);
    width:18px;height:18px;color:var(--ink-soft);pointer-events:none;
  }
  .subject-search-wrap input{
    width:100%;
    background:var(--surface);
    border:1.5px solid var(--line);
    border-radius:12px;
    padding:12px 44px 12px 16px;
    font-family:inherit;font-size:.92rem;color:var(--ink);
    transition:.25s;
  }
  .subject-search-wrap input:focus{border-color:var(--amber);}
  .subject-search-wrap input::placeholder{color:var(--ink-soft);}

  /* ===================== Subject cards: horizontal scroll row ===================== */
  .subjects-scroll-outer{position:relative;}
  .subjects-scroll-row{
    display:flex;gap:20px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scroll-behavior:smooth;
    padding:4px 4px 14px;
    margin:0 -4px;
    -webkit-overflow-scrolling:touch;
    cursor:grab;
    user-select:none;
  }
  .subjects-scroll-row.dragging{cursor:grabbing;scroll-behavior:auto;}
  .subjects-scroll-row::-webkit-scrollbar{height:6px;}
  .subjects-scroll-row::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;}
  .subjects-scroll-row::-webkit-scrollbar-track{background:transparent;}

  .subject-card{
    flex:0 0 auto;
    width:calc(50% - 10px);
    min-height:150px;
    scroll-snap-align:start;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:20px;
    padding:22px 20px;
    position:relative;
    cursor:pointer;
    transition:.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow:0 4px 20px rgba(27,59,120,0.06);
  }
  .subject-card:hover{
    transform:translateY(-6px);
    box-shadow:0 14px 32px rgba(27,59,120,0.12);
    border-color:var(--subject-color, var(--amber));
  }
  .subject-card-icon{
    width:52px;height:52px;border-radius:16px;
    display:flex;align-items:center;justify-content:center;
    font-size:1.5rem;margin-bottom:14px;
    background:color-mix(in srgb, var(--subject-color, var(--navy)) 15%, transparent);
    color:var(--subject-color, var(--navy));
  }
  .subject-card h4{
    margin:0 0 8px;font-size:1.05rem;color:var(--ink);font-weight:900;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .subject-card-counts{
    margin:0;font-size:.82rem;color:var(--ink-soft);font-weight:500;
  }
  @media(min-width:700px){
    .subject-card, .subject-add-tile{width:calc(33.333% - 14px);}
  }
  @media(min-width:1000px){
    .subject-card, .subject-add-tile{width:calc(20% - 16px);}
  }

  .subjects-scroll-arrow{
    position:absolute;
    top:50%;left:-14px;
    transform:translateY(-50%);
    width:40px;height:40px;border-radius:50%;
    background:var(--surface);
    border:1.5px solid var(--line);
    color:var(--navy);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 18px rgba(27,59,120,0.15);
    transition:.25s;
    z-index:3;
  }
  .subjects-scroll-arrow svg{width:18px;height:18px;}
  .subjects-scroll-arrow:hover{background:var(--gradient-warm);color:#fff;border-color:transparent;}
  .subjects-scroll-arrow.hidden{display:none;}
  @media(max-width:640px){
    .subjects-scroll-arrow{left:-8px;width:34px;height:34px;}
  }

  /* Admin "add subject" tile — a smooth near-circular rounded card with a plus sign */
  .subject-add-tile{
    flex:0 0 auto;
    width:calc(50% - 10px);
    scroll-snap-align:start;
    min-height:150px;
    background:transparent;
    border:2px dashed var(--line);
    border-radius:34px;
    /* display:flex أُزيل من هنا — كان بنفس خصوصية .admin-only فيفوز
       ويُظهر الزر للجميع. display يأتي فقط من
       .admin-only.is-visible{display:flex} عند تأكيد الأدمن. */
    flex-direction:column;align-items:center;justify-content:center;gap:8px;
    color:var(--ink-soft);
    font-weight:700;font-size:.9rem;
    transition:.25s;
  }
  .subject-add-tile:hover{
    border-color:var(--amber);
    color:var(--amber-dark);
    background:rgba(242,169,59,0.05);
  }
  .subject-add-tile .plus-icon{
    width:40px;height:40px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;font-weight:900;line-height:1;
    background:var(--cream-2);color:var(--ink-soft);
    transition:.25s;
  }
  .subject-add-tile:hover .plus-icon{background:var(--gradient-warm);color:#fff;}

  /* ===================== Subject detail (summaries + tests together) ===================== */
  .subject-detail{animation:fadeInUp 0.4s ease;}
  .subject-back-btn{
    color:var(--ink-soft);font-weight:700;font-size:.88rem;
    margin-bottom:18px;transition:.2s;
  }
  .subject-back-btn:hover{color:var(--navy);}
  .subject-detail-head{
    display:flex;align-items:center;gap:14px;margin-bottom:20px;
  }
  .subject-detail-icon{
    width:48px;height:48px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;
    background:color-mix(in srgb, var(--subject-color, var(--navy)) 15%, transparent);
    color:var(--subject-color, var(--navy));
    flex-shrink:0;
  }
  .subject-detail-head h3{margin:0;font-size:1.5rem;color:var(--ink);}
  .subject-inline-search{margin-bottom:8px;}
  .subject-detail-section{margin-top:32px;}
  .subject-detail-section-head{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:20px;gap:12px;flex-wrap:wrap;
  }
  .subject-detail-section-head h4{margin:0;font-size:1.15rem;color:var(--ink);}
  .subject-empty-small{
    text-align:center;padding:32px 20px;color:var(--ink-soft);
    border:2px dashed var(--line);border-radius:16px;font-size:.9rem;
    grid-column:1/-1;
  }

  @media(max-width:768px){
    .subject-detail-head h3{font-size:1.25rem;}
    .subject-card{padding:18px 16px;}
  }

  /* Fun Cards */
  .fun-card{cursor:pointer;}
  
  .fun-card .answer{
    margin-top:12px;
    padding-top:12px;
    border-top:2px dashed var(--amber);
    display:none;
    color:var(--green);
    font-weight:700;
    font-size:.95rem;
    animation:fadeIn 0.3s ease;
  }
  
  .fun-card.open .answer{display:block;}
  .fun-card .hint{font-size:.75rem;color:#9AA3AF;margin-top:8px;}

  /* ===================== Fun Content Random Stack =====================
     Swipeable stack above the full list. The front card reuses the exact
     .fun-card look (tag/answer/hint), only positioning + drag/exit
     animations are added on top via .fun-stack-card. */
  .fun-stack-wrap{margin-bottom:36px;}

  .fun-stack{
    position:relative;
    height:260px;
    touch-action:none;
    width:100%;
  }

  /* Nav row now sits under the orange progress bar instead of flanking the
     card, so the chevrons are exactly where a thumb naturally lands after
     looking at the progress line. */
  .fun-stack-nav-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-top:14px;
  }

  /* Translucent circular chevron buttons — same idea as the play/pause
     overlay button you see on video thumbnails on modern sites: a solid
     but semi-transparent filled circle, short chevron glyph, no long
     arrow shaft. */
  .fun-stack-nav-btn{
    flex:0 0 auto;
    width:44px;height:44px;
    border-radius:50%;
    border:none;
    background:rgba(15,23,42,.16);
    color:var(--navy);
    font-size:1.5rem;
    line-height:1;
    font-weight:700;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    backdrop-filter:blur(3px);
    transition:.2s;
  }
  .fun-stack-nav-btn:hover{
    background:rgba(15,23,42,.28);
    transform:scale(1.06);
  }
  .fun-stack-nav-btn:active{transform:scale(.96);}
  :root[data-theme="dark"] .fun-stack-nav-btn{
    background:rgba(255,255,255,.14);
    color:#fff;
  }
  :root[data-theme="dark"] .fun-stack-nav-btn:hover{background:rgba(255,255,255,.24);}

  @media(max-width:480px){
    .fun-stack-nav-btn{width:36px;height:36px;font-size:1.25rem;}
    .fun-stack-nav-row{gap:10px;margin-top:12px;}
  }

  .fun-stack .fun-stack-card{
    position:absolute;
    inset:0;
    margin:0;
    overflow:auto;
    cursor:grab;
    user-select:none;
    will-change:transform, opacity;
  }

  /* The front card is the only one users actually drag. Without this, the
     card inherits touch-action:pan-y from .fun-stack above, so as soon as a
     real finger drifts even slightly off-axis the browser decides "this is
     a page scroll" mid-gesture, fires pointercancel, and yanks the whole
     page — which is exactly the "moves a little then the page snaps back"
     bug. touch-action:none hands 100% of the gesture to our JS instead. */
  .fun-stack .fun-stack-card.front{touch-action:none;}

  .fun-stack .fun-stack-card.dragging{transition:none;cursor:grabbing;}
  .fun-stack .fun-stack-card.snap-back{
    transition:transform .3s cubic-bezier(0.34,1.56,0.64,1), opacity .3s ease;
  }

  .fun-stack .fun-stack-card.front{z-index:3;}
  .fun-stack .fun-stack-card.front:hover{
    transform:none;
    box-shadow:0 4px 20px rgba(27,59,120,0.06);
  }
  .fun-stack .fun-stack-card.front:hover::before{opacity:0;}

  .fun-stack .fun-stack-card.back1{
    z-index:2;
    transform:scale(.93) translateY(16px);
    opacity:.75;
    pointer-events:none;
  }
  .fun-stack .fun-stack-card.back2{
    z-index:1;
    transform:scale(.86) translateY(28px);
    opacity:.4;
    pointer-events:none;
  }

  .fun-stack .fun-stack-card.animate-out-right{
    transition:transform .3s ease, opacity .3s ease;
    transform:translateX(140%) rotate(16deg) !important;
    opacity:0 !important;
  }
  .fun-stack .fun-stack-card.animate-out-left{
    transition:transform .3s ease, opacity .3s ease;
    transform:translateX(-140%) rotate(-16deg) !important;
    opacity:0 !important;
  }

  .fun-stack-progress{
    height:3px;
    background:var(--line);
    border-radius:3px;
    margin-top:16px;
    overflow:hidden;
  }
  .fun-stack-progress-fill{
    height:100%;
    width:0%;
    background:var(--gradient-warm);
    border-radius:3px;
    transition:width .3s ease;
  }

  .fun-stack-counter{
    text-align:center;
    font-size:.8rem;
    font-weight:700;
    color:var(--navy);
    margin-top:8px;
  }

  .fun-stack-hint{
    text-align:center;
    font-size:.78rem;
    color:var(--ink-soft);
    margin-top:4px;
    opacity:.85;
  }

  .fun-list-heading{
    margin:8px 0 20px;
    font-size:1.05rem;
    color:var(--navy);
    font-weight:700;
  }

  @media(prefers-reduced-motion: reduce){
    .fun-stack .fun-stack-card{transition:none !important;}
    .fun-stack .fun-stack-card.animate-out-right,
    .fun-stack .fun-stack-card.animate-out-left{transform:none !important;opacity:0 !important;}
  }

  @media(max-width:768px){
    .fun-stack{height:280px;}
  }

  @keyframes fadeIn {
    from { opacity:0; }
    to { opacity:1; }
  }
  
  @keyframes fadeInUp {
    from {
      opacity:0;
      transform:translateY(20px);
    }
  }

  /* Toast Notification */
  .toast{
    position:fixed;bottom:24px;left:24px;
    background:var(--gradient-primary);
    color:#fff;
    padding:16px 24px;
    border-radius:12px;
    font-weight:600;
    z-index:1000;
    animation:slideInUp 0.3s ease;
    box-shadow:0 8px 24px rgba(27,59,120,0.3);
  }
  
  @keyframes slideInUp {
    from {
      opacity:0;
      transform:translateY(40px);
    }
  }

  /* Admin Banner */
  .admin-banner{
    display:none;
    background:linear-gradient(135deg, rgba(61,107,71,0.1) 0%, rgba(242,169,59,0.05) 100%);
    border:2px solid var(--green);
    border-radius:12px;
    padding:16px 20px;
    margin-bottom:24px;
    color:var(--green);
    font-weight:600;
    text-align:center;
    animation:slideInDown 0.3s ease;
  }
  
  .admin-banner.show{display:block;}

  .admin-banner-btn{
    margin-top:10px;border:none;cursor:pointer;
    background:var(--green);color:#fff;
    padding:8px 16px;border-radius:999px;
    font-weight:600;font-size:.9rem;
    align-items:center;gap:6px;
    transition:.25s;
  }
  .admin-banner-btn:hover{opacity:.88;transform:translateY(-1px);}
  /* لا تضبط display هنا بشكل غير مشروط — هذا الزر يُستخدم مع
     admin-only (صندوق أسئلة AI) و superadmin-only (إدارة حسابات
     الأدمن)، وكانت display:inline-flex هنا تُظهر الزرّين للجميع. */
  .admin-banner-btn.is-visible{display:inline-flex;}
  .ai-inbox-badge{
    background:#fff;color:var(--green);
    border-radius:999px;
    min-width:20px;height:20px;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:.75rem;font-weight:800;
    padding:0 5px;
    margin-inline-start:4px;
  }

  @keyframes slideInDown {
    from {
      opacity:0;
      transform:translateY(-20px);
    }
  }

  /* Modals */
  .overlay{
    display:none;position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);
    z-index:50;align-items:center;justify-content:center;
  }
  
  .overlay.show{display:flex;}
  
  .modal{
    background:var(--surface);border-radius:20px;padding:40px;
    width:90%;max-width:500px;
    box-shadow:0 20px 60px rgba(0,0,0,0.3);
    animation:popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position:relative;
  }
  
  @keyframes popIn {
    from {
      opacity:0;
      transform:scale(0.9);
    }
  }
  
  .modal-close{
    position:absolute;top:16px;left:16px;
    width:32px;height:32px;
    border-radius:50%;
    background:var(--cream-2);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    font-size:1.5rem;
    transition:.3s;
  }
  
  .modal-close:hover{
    background:var(--line);
    transform:rotate(90deg);
  }
  
  .modal h2{
    margin:0 0 4px;
    color:var(--navy);
    font-size:1.8rem;
  }
  
  .modal p{
    color:var(--ink-soft);
    margin:0 0 24px;
    font-size:.95rem;
  }
  
  .auth-tabs{
    display:flex;gap:8px;margin-bottom:18px;
    background:var(--cream-2);border-radius:10px;padding:4px;
  }
  .auth-tab{
    flex:1;background:transparent;padding:9px 10px;
    border-radius:8px;font-weight:700;font-size:.85rem;
    color:var(--ink-soft);transition:.2s;
  }
  .auth-tab.active{
    background:var(--surface);color:var(--navy);
    box-shadow:0 2px 8px rgba(27,59,120,0.12);
  }
  .btn-google{
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;background:var(--surface);
    border:1.5px solid var(--line);color:var(--ink);
    padding:11px 16px;border-radius:10px;font-weight:700;font-size:.9rem;
    transition:.2s;
  }
  .btn-google:hover{background:var(--cream-2);}
  .auth-divider{
    display:flex;align-items:center;gap:12px;
    margin:16px 0;color:var(--ink-soft);font-size:.78rem;
  }
  .auth-divider::before,.auth-divider::after{
    content:"";flex:1;height:1px;background:var(--line);
  }
  .notif-check{
    display:flex;align-items:center;gap:10px;
    padding:12px 14px;margin-bottom:10px;
    background:var(--cream-2);border-radius:10px;
    font-size:.9rem;cursor:pointer;
  }
  .notif-check input{width:18px;height:18px;flex:none;cursor:pointer;}
  .notif-section{
    margin:18px 0 4px;
    padding-top:14px;
    border-top:1px dashed var(--line);
  }
  .notif-section-title{
    font-weight:700;
    color:var(--navy);
    margin-bottom:4px;
    font-size:.92rem;
  }
  .notif-section-hint{
    font-size:.76rem;
    color:var(--ink-soft);
    margin:0 0 12px;
    line-height:1.5;
  }
  .notif-subjects-label{
    display:block;
    font-size:.82rem;
    color:var(--ink-soft);
    margin-bottom:8px;
  }
  .notif-subjects-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    max-height:160px;
    overflow-y:auto;
    padding:4px 2px;
  }
  .notif-subject-chip{
    display:flex;align-items:center;gap:6px;
    padding:6px 12px;
    background:var(--cream-2);
    border:1px solid var(--line);
    border-radius:999px;
    font-size:.8rem;
    cursor:pointer;
    transition:.15s;
  }
  .notif-subject-chip input{width:14px;height:14px;flex:none;cursor:pointer;}
  .notif-subject-chip.checked{
    background:rgba(63,107,71,.12);
    border-color:var(--green);
    color:var(--green);
    font-weight:700;
  }
  .account-email{
    font-size:.8rem;color:var(--ink-soft);
    text-align:center;margin:4px 0 0;
  }
  .field{margin-bottom:20px;}
  .field label{
    display:block;
    margin-bottom:8px;
    color:var(--navy);
    font-weight:600;
    font-size:.9rem;
  }
  
  .field input,
  .field textarea,
  .field select{
    width:100%;
    padding:12px 16px;
    border:2px solid var(--line);
    border-radius:12px;
    font-family:inherit;
    font-size:.9rem;
    transition:.3s;
    background:var(--surface);
    color:var(--ink);
  }
  
  .field input:focus,
  .field textarea:focus,
  .field select:focus{
    outline:none;
    border-color:var(--green);
    box-shadow:0 0 0 3px rgba(61,107,71,0.1);
  }

  .image-upload-preview{
    width:100%;
    aspect-ratio:16/6;
    border-radius:12px;
    overflow:hidden;
    margin-bottom:10px;
    border:2px solid var(--line);
  }
  .image-upload-preview img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  .image-upload-input.field-input,
  input.image-upload-input{
    width:100%;
    padding:10px 14px;
    border:2px dashed var(--line);
    border-radius:12px;
    font-family:inherit;
    font-size:.85rem;
    background:var(--surface);
    color:var(--ink);
  }
  .image-upload-status{
    font-size:.78rem;
    color:var(--ink-soft);
    margin-top:6px;
  }

  .error-msg{
    color:var(--red);
    font-weight:600;
    margin:16px 0;
    display:none;
  }

  .forgot-password-row{
    margin:-8px 0 4px;
    text-align:left;
  }
  .forgot-password-row a{
    color:var(--green);
    font-size:0.9em;
    text-decoration:none;
  }
  .forgot-password-row a:hover{
    text-decoration:underline;
  }
  
  .modal-actions{
    display:flex;gap:12px;margin-top:28px;
  }
  
  .btn-cancel{
    flex:1;background:var(--cream-2);color:var(--ink);
    padding:12px 20px;border-radius:12px;font-weight:600;
    transition:.3s;
  }
  
  .btn-cancel:hover{
    background:var(--line);
  }
  
  .modal-actions .btn-primary{flex:1;}

  /* Small confirmation modal (e.g. admin logout) */
  .modal.modal-sm{max-width:380px;text-align:center;}
  .modal.modal-sm h2{font-size:1.4rem;}

  /* ---- Manage-admins modal ---- */
  .modal.modal-lg{max-width:640px;}

  /* ---- صندوق وارد محادثات الذكاء الاصطناعي (أدمن) --------------------- */
  .ai-inbox-modal{max-width:720px;}

  /* شريط إعداد الحذف التلقائي أعلى قائمة المحادثات */
  .ai-inbox-settings-row{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:8px;
    padding:10px 12px;
    margin-top:8px;
    background:var(--cream-2);
    border:1px solid var(--line);
    border-radius:10px;
    font-size:.82rem;
    font-weight:700;
    color:var(--ink-soft);
  }
  .ai-inbox-settings-row select{
    font-family:inherit;font-size:.82rem;font-weight:700;
    color:var(--navy);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:8px;
    padding:6px 10px;
    cursor:pointer;
  }

  .ai-inbox-push-btn{
    display:block;
    width:100%;
    margin-top:8px;
    padding:9px 14px;
    border-radius:10px;
    border:1px dashed var(--green);
    background:rgba(63,107,71,.08);
    color:var(--green);
    font-weight:700;
    font-size:.85rem;
    cursor:pointer;
    transition:.2s;
  }
  .ai-inbox-push-btn:hover{background:rgba(63,107,71,.16);}

  .ai-inbox-list{
    max-height:60vh;
    overflow-y:auto;
    display:flex;flex-direction:column;
    gap:2px;
    margin-top:10px;
  }
  .ai-inbox-row{
    display:flex;align-items:center;justify-content:space-between;
    gap:10px;
    padding:12px 10px;
    border-radius:10px;
    cursor:pointer;
    transition:.15s;
  }
  .ai-inbox-row:hover{background:var(--cream-2);}
  .ai-inbox-row.is-unread{background:rgba(63,107,71,.08);}
  .ai-inbox-row-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .ai-inbox-row-main strong{font-size:.92rem;color:var(--navy);}
  .ai-inbox-awaiting-tag{
    display:inline-block;
    font-size:.68rem;font-weight:800;
    color:var(--amber-dark);
    background:rgba(242,169,59,.16);
    border:1px solid rgba(242,169,59,.4);
    border-radius:20px;
    padding:1px 9px;
    margin-inline-start:6px;
  }
  .ai-inbox-row-preview{
    font-size:.82rem;color:var(--ink-soft);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:60vw;
  }
  .ai-inbox-row-meta{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
  .ai-inbox-row-time{font-size:.72rem;color:var(--ink-soft);}
  .ai-inbox-row-dot{
    width:9px;height:9px;border-radius:50%;
    background:var(--green);
    display:inline-block;
  }
  .ai-inbox-row-del{
    border:none;background:none;
    font-size:.9rem;
    padding:5px;border-radius:8px;
    cursor:pointer;
    color:var(--ink-soft);
    transition:.2s;
    line-height:1;
  }
  .ai-inbox-row-del:hover{background:#FBE4E1;color:var(--red);}
  :root[data-theme="dark"] .ai-inbox-row-del:hover{background:rgba(225,122,112,0.18);}

  .ai-inbox-back-btn{
    border:none;background:none;cursor:pointer;
    color:var(--navy);font-weight:700;font-size:.88rem;
    padding:6px 0;margin-bottom:6px;
  }
  .ai-inbox-thread-head{
    display:flex;align-items:center;justify-content:space-between;
    gap:10px;
    font-weight:800;color:var(--navy);
    padding-bottom:8px;margin-bottom:8px;
    border-bottom:1px solid var(--line);
  }
  .ai-inbox-thread-head-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ai-inbox-thread-del{
    flex:0 0 auto;
    font-size:.78rem;font-weight:700;
    display:inline-flex;align-items:center;gap:4px;
    padding:6px 12px;
    border-radius:20px;
    background:rgba(192,72,63,.1);
    border:1px solid rgba(192,72,63,.3);
    color:var(--red);
  }
  .ai-inbox-thread-del:hover{background:rgba(192,72,63,.2);}
  .ai-inbox-thread-messages{max-height:48vh;}

  .ai-msg-correct-btn{
    display:block;
    margin-top:8px;
    border:none;background:none;
    color:var(--amber-dark);
    font-size:.76rem;font-weight:700;
    cursor:pointer;padding:0;
  }
  .ai-msg-correct-btn:hover{text-decoration:underline;}

  .ai-inbox-correction-tag{
    display:flex;align-items:center;justify-content:space-between;
    gap:8px;
    background:rgba(242,169,59,.14);
    border:1px solid rgba(242,169,59,.4);
    border-radius:8px;
    padding:6px 10px;
    font-size:.8rem;font-weight:700;
    color:var(--amber-dark);
    margin-bottom:8px;
  }
  .ai-inbox-correction-tag button{
    border:none;background:none;
    color:var(--red);font-weight:700;
    cursor:pointer;font-size:.78rem;
  }

  @media(max-width:480px){
    .ai-inbox-row-preview{max-width:48vw;}
  }


  .add-admin-form{
    display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;
  }
  .add-admin-form input[type="email"]{
    flex:1 1 220px;min-width:0;
    padding:10px 14px;border-radius:10px;
    border:1px solid var(--line);background:var(--cream-2);
    font-family:inherit;font-size:.95rem;
  }
  .add-admin-form select{
    padding:10px 12px;border-radius:10px;
    border:1px solid var(--line);background:var(--cream-2);
    font-family:inherit;font-size:.95rem;
  }
  .add-admin-form .btn{white-space:nowrap;}

  .admins-list{
    max-height:340px;overflow-y:auto;
    display:flex;flex-direction:column;gap:8px;
  }
  .admins-empty{color:var(--ink-soft);text-align:center;padding:20px 0;}
  .admin-row{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  }
  .admin-row-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .admin-row-you{color:var(--ink-soft);font-size:.85rem;}
  .admin-role-badge{
    font-size:.78rem;font-weight:700;
    padding:3px 10px;border-radius:999px;
    background:var(--cream-2);color:var(--ink-soft);
  }
  .admin-role-badge.is-super{background:var(--green);color:#fff;}
  .admin-row-actions{display:flex;gap:6px;flex:none;}
  .admin-row-actions .icon-btn:disabled{opacity:.35;cursor:not-allowed;}
  .modal-sm-icon{
    width:52px;height:52px;border-radius:50%;
    background:rgba(192,72,63,0.1);color:var(--red);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 14px;
  }
  .modal-sm-icon svg{width:26px;height:26px;}
  .btn-danger{
    flex:1;background:var(--red);color:#fff;
    padding:12px 20px;border-radius:12px;font-weight:700;
    transition:.3s;
  }
  .btn-danger:hover{background:#a53a32;}

  /* "Remember me" row in the login form */
  .remember-row{
    display:flex;align-items:center;gap:8px;
    margin:-8px 0 4px;
    font-size:.88rem;color:var(--ink-soft);font-weight:600;
    cursor:pointer;
    width:fit-content;
  }
  .remember-row input{width:16px;height:16px;cursor:pointer;flex:none;}

  /* Login logo */
  .login-logo{
    width:96px;height:auto;
    display:block;margin:0 auto 14px;
  }

  /* Footer */
  .site-footer{
    background:var(--gradient-primary);
    color:#fff;
    margin-top:60px;
    position:relative;
    z-index:2;
  }

  .footer-inner{
    max-width:1200px;margin:0 auto;
    padding:56px 28px 32px;
    display:grid;
    grid-template-columns:1.4fr .8fr;
    gap:48px;
  }

  .footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}

  .footer-logo{
    height:52px;width:auto;
    object-fit:contain;
    background:#fff;
    padding:8px 14px;
    border-radius:12px;
  }

  .footer-brand p{
    color:rgba(255,255,255,.75);
    font-size:.9rem;
    max-width:420px;
    margin:0;
  }

  .social-row{
    display:flex;gap:12px;margin-top:4px;
  }
  .social-btn{
    display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;flex:none;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.2);
    color:#fff;
    transition:.25s;
  }
  .social-btn svg{width:19px;height:19px;}
  .social-btn:hover{
    background:var(--gradient-warm);
    border-color:transparent;
    transform:translateY(-3px);
    box-shadow:0 6px 16px rgba(242,169,59,0.35);
  }

  .footer-links h4{
    font-family:'Lalezar','Tajawal',sans-serif;
    font-size:1.05rem;
    margin:0 0 14px;
    color:var(--amber);
  }

  .footer-links{display:flex;flex-direction:column;gap:10px;}

  .footer-links a{
    color:rgba(255,255,255,.8);
    font-size:.9rem;
    transition:.25s;
    width:fit-content;
  }

  .footer-links a:hover{color:var(--amber);}

  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.15);
    display:flex;align-items:center;justify-content:center;
    flex-wrap:wrap;gap:16px;
    padding:18px 28px 24px;
    font-size:.82rem;
    color:rgba(255,255,255,.6);
  }

  .footer-admin-btn{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.25);
    box-shadow:none;
  }
  .footer-admin-btn:hover{
    background:rgba(255,255,255,.2);
    box-shadow:none;
  }
  .footer-admin-btn.on{
    background:rgba(93,140,110,.35);
    border-color:rgba(93,140,110,.6);
  }

  /* Responsive */
  @media(max-width:768px){
    .footer-inner{grid-template-columns:1fr;gap:32px;padding:44px 24px 24px;}
    .footer-brand{align-items:flex-start;}
    .hero{
      grid-template-columns:1fr;
      padding:60px 20px;
      gap:40px;
    }
    
    .hero h1{font-size:2.5rem;}
    .hero-art {display:none;}
    .hero-ctas{flex-wrap:nowrap;}
    .hero-ctas .btn{flex:1 1 0;text-align:center;}

    .nav-wrap{padding:12px 16px;}
    .brand span{font-size:1.1rem;}
    .brand-icon{height:38px;}

    .burger{display:flex;}

    .auth-bubble{padding:8px;border-radius:50%;}
    .auth-bubble #authBubbleLabel{display:none;}
    .auth-bubble svg{margin:0;}

    nav.links{
      position:fixed;top:0;right:-85%;
      width:80%;max-width:300px;height:100vh;
      background:var(--cream);
      flex-direction:column;align-items:stretch;
      gap:4px;
      padding:90px 20px 24px;
      box-shadow:-10px 0 30px rgba(15,33,66,.18);
      transition:right .35s cubic-bezier(0.4,0,0.2,1);
      z-index:60;
      overflow-y:auto;
    }
    nav.links.open{right:0;}
    nav.links a{
      font-size:1rem;
      padding:14px 12px;
      border-radius:12px;
      width:100%;
      color:var(--ink);
    }
    nav.links a:hover{
      background:var(--cream-2);
      color:var(--navy);
    }
    nav.links a::after{display:none;}
    nav.links a .nav-icon{
      display:inline-flex;
      color:var(--green);
    }
    nav.links a.nav-cta{
      color:#fff;
      justify-content:center;
      margin-top:18px;
      position:relative;
    }
    nav.links a.nav-cta::before{
      content:"";
      position:absolute;
      top:-11px;right:12px;left:12px;
      height:1px;
      background:var(--line);
    }
    nav.links a.nav-cta .nav-icon{color:#fff;}

    .nav-drawer-close{
      display:flex;align-items:center;justify-content:center;
      position:absolute;top:18px;left:18px;
      width:38px;height:38px;
      border-radius:50%;
      background:var(--cream-2);
      color:var(--ink-soft);
      transition:.25s;
    }
    .nav-drawer-close:hover{background:var(--line);transform:rotate(90deg);}
    .nav-drawer-close svg{width:18px;height:18px;}

    .admin-btn{font-size:.78rem;padding:8px 14px;}

    .block-head{margin-bottom:32px;}
    .block-head h2{font-size:1.8rem;}
    
    .grid{grid-template-columns:1fr;gap:20px;}
    
    .modal{width:85%;padding:28px;}
    
    .admin-banner{margin:0 0 20px;}

    .stats-dash{padding:0 20px 40px;}
    .stat-item b{font-size:1.6rem;}
  }

  /* Small phones */
  @media(max-width:480px){
    .nav-wrap{padding:10px 14px;}
    .brand span{font-size:1rem;}
    .brand-icon{height:32px;}
    .admin-btn{font-size:.72rem;padding:7px 10px;border-radius:8px;}

    .hero{padding:36px 16px 20px;gap:28px;}
    .hero h1{font-size:1.9rem;}
    .hero p.lede{font-size:1rem;}
    .hero-ctas{gap:10px;flex-wrap:nowrap;}
    .hero-ctas .btn{padding:12px 14px;font-size:.85rem;flex:1 1 0;text-align:center;white-space:nowrap;}

    .stats-dash{padding:0 16px 32px;}
    .stat-group{padding:16px;}
    .stat-item{min-width:0;padding-inline-start:10px;padding-inline-end:10px;}
    .stat-item b{font-size:1.3rem;}
    .stat-item span{font-size:.66rem;}

    .block-head h2{font-size:1.5rem;}
    .eyebrow{font-size:.72rem;}

    .modal{width:94%;padding:18px;max-height:88vh;overflow-y:auto;}
  }

  /* ===================== AI Study Assistant chat ===================== */
  .ai-chat-box{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    padding:22px;
    display:flex;flex-direction:column;
    max-width:760px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
  }

  /* Thin brand-accent strip along the top — mirrors .card::before but in the
     green agricultural accent, marking this box as the site's flagship
     interactive feature rather than a plain form. */
  .ai-chat-box::before{
    content:"";
    position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg, var(--green) 0%, var(--green-light) 50%, var(--amber) 100%);
  }
  .ai-chat-messages{
    display:flex;flex-direction:column;gap:12px;
    max-height:420px;min-height:120px;
    overflow-y:auto;
    padding:4px 4px 8px;
    scroll-behavior:smooth;
  }
  .ai-msg{
    max-width:82%;
    padding:11px 15px;
    border-radius:14px;
    font-size:.92rem;
    line-height:1.65;
    white-space:pre-wrap;
    word-break:break-word;
    animation:fadeInUp .25s ease both;
  }
  .ai-msg-bot{
    align-self:flex-start;
    background:var(--cream-2);
    color:var(--ink);
    border-bottom-left-radius:4px;
  }
  .ai-msg-user{
    align-self:flex-end;
    background:var(--gradient-warm);
    color:#fff;
    border-bottom-right-radius:4px;
  }
  .ai-msg-error{
    align-self:flex-start;
    background:rgba(192,72,63,0.12);
    color:var(--red);
    border:1px solid rgba(192,72,63,0.3);
  }

  /* رسائل/تصحيحات الأدمن: لون مميّز (أخضر الموقع) يختلف واضحاً عن فقاعة
     المساعد الذكي الرمادية وفقاعة الطالب البرتقالية، مع شارة صغيرة توضّح
     أن هذا رد بشري من الإدارة وليس من الذكاء الاصطناعي. */
  .ai-msg-admin{
    align-self:flex-start;
    background:rgba(63,107,71,0.12);
    border:1px solid rgba(63,107,71,0.35);
    color:var(--ink);
    border-bottom-left-radius:4px;
  }
  .ai-msg-admin-tag{
    font-size:.72rem;font-weight:800;
    color:var(--green);
    margin-bottom:4px;
  }

  /* إشعار تلقائي (مثلاً: "انتهت حصتك اليومية، سيردّ عليك الدعم") — يُميَّز
     بلون كهرماني محايد، مختلف عن كل من رد الأدمن الأخضر ورد المساعد
     الرمادي، حتى يوضح فوراً أن هذه رسالة نظام وليست إجابة ذكاء اصطناعي
     ولا رداً بشرياً بعد. */
  .ai-msg-system{
    align-self:flex-start;
    background:rgba(242,169,59,0.14);
    border:1px solid rgba(242,169,59,0.4);
    color:var(--ink);
    border-bottom-left-radius:4px;
  }
  .ai-msg-system-tag{
    font-size:.72rem;font-weight:800;
    color:var(--amber-dark);
    margin-bottom:4px;
  }

  /* إجابة مساعد ذكي عليها تصحيح من الإدارة: تُخفَّت ويُشطب نصها بخط رفيع
     بدل حذفها، حتى يبقى للطالب سياق ما سأله وما كان الرد الأصلي. */
  .ai-msg-bot.ai-msg-corrected{
    opacity:.6;
    text-decoration:line-through;
    text-decoration-color:rgba(192,72,63,.5);
  }
  .ai-msg-corrected-note{
    margin-top:6px;
    font-size:.78rem;
    font-weight:700;
    text-decoration:none;
    color:var(--red);
  }

  /* فقاعة متفائلة محلية (قبل تأكيد الخادم) — شفافية خفيفة توحي أنها
     مؤقتة، تُستبدل تلقائياً بالنسخة النهائية عند وصولها من Firestore. */
  .ai-msg-pending{opacity:.7;}

  /* ---- ترقية شكل الفقاعات لتصبح أقرب لتطبيقات المحادثة (تيليجرام/
     واتساب): ذيل فقاعة صغير، وقت أسفل كل رسالة، تجميع الرسائل المتتالية
     من نفس الطرف بلا تكرار الشارة، وفاصل تاريخ بين الأيام المختلفة —
     بنفس هوية ألوان الموقع الحالية (أخضر/كريمي/ذهبي) دون تغيير جذري. */
  .ai-msg{position:relative;margin-bottom:2px;}
  .ai-msg.ai-msg-grouped{margin-top:-6px;}
  .ai-msg-time{
    display:block;
    margin-top:4px;
    font-size:.68rem;
    opacity:.6;
  }
  .ai-msg-user .ai-msg-time{color:rgba(255,255,255,.85);}

  .ai-msg-bot::after,
  .ai-msg-user::after,
  .ai-msg-admin::after,
  .ai-msg-system::after{
    content:"";
    position:absolute;
    bottom:0;
    width:10px;height:10px;
  }
  .ai-msg.ai-msg-grouped::after{display:none;}
  .ai-msg-bot::after{
    left:-5px;
    background:var(--cream-2);
    clip-path:polygon(100% 0, 0 100%, 100% 100%);
  }
  .ai-msg-user::after{
    right:-5px;
    background:var(--amber);
    clip-path:polygon(0 0, 100% 100%, 0 100%);
  }
  .ai-msg-admin::after{
    left:-5px;
    background:color-mix(in srgb, var(--green) 14%, var(--surface));
    clip-path:polygon(100% 0, 0 100%, 100% 100%);
  }
  .ai-msg-system::after{
    left:-5px;
    background:color-mix(in srgb, var(--amber) 16%, var(--surface));
    clip-path:polygon(100% 0, 0 100%, 100% 100%);
  }

  /* فاصل التاريخ بين مجموعات الرسائل ("اليوم"/"أمس"/تاريخ محدد) */
  .ai-chat-date-divider{
    align-self:center;
    margin:6px 0;
  }
  .ai-chat-date-divider span{
    display:inline-block;
    background:var(--cream-2);
    color:var(--ink-soft);
    font-size:.72rem;
    font-weight:700;
    padding:4px 12px;
    border-radius:999px;
  }

  /* علامات "أُرسل / شوهد" على رسائل الأدمن، بنفس أسلوب تطبيقات المحادثة */
  .ai-msg-ticks{
    display:inline-block;
    margin-inline-start:4px;
    font-size:.7rem;
    letter-spacing:-1px;
    color:var(--ink-soft);
  }
  .ai-msg-ticks.is-seen{color:var(--green);}

  .ai-chat-push-btn{
    display:block;
    width:100%;
    margin-bottom:10px;
    padding:9px 14px;
    border-radius:10px;
    border:1px dashed var(--amber);
    background:rgba(242,169,59,.08);
    color:var(--amber-dark);
    font-weight:700;
    font-size:.85rem;
    cursor:pointer;
    transition:.2s;
  }
  .ai-chat-push-btn:hover{background:rgba(242,169,59,.16);}

  .ai-msg-typing{
    align-self:flex-start;
    display:flex;align-items:center;gap:5px;
    background:var(--cream-2);
    padding:13px 16px;
    border-radius:14px;
    border-bottom-left-radius:4px;
  }
  .ai-msg-typing span{
    width:6px;height:6px;border-radius:50%;
    background:var(--ink-soft);
    display:inline-block;
    animation:aiTypingDot 1.1s infinite ease-in-out;
  }
  .ai-msg-typing span:nth-child(2){animation-delay:.15s;}
  .ai-msg-typing span:nth-child(3){animation-delay:.3s;}
  @keyframes aiTypingDot{
    0%, 60%, 100%{transform:translateY(0);opacity:.5;}
    30%{transform:translateY(-4px);opacity:1;}
  }
  .ai-chat-input-row{
    display:flex;align-items:center;gap:8px;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--line);
  }
  .ai-chat-input-row input{
    flex:1;
    min-width:0;
    background:var(--cream-2);
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px 14px;
    font-size:.92rem;
    color:var(--ink);
    font-family:inherit;
  }
  .ai-chat-input-row input:focus{border-color:var(--amber);}
  .ai-chat-send-btn{
    flex:none;
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    background:var(--gradient-warm);
    color:#fff;
    border-radius:12px;
    transition:.2s;
  }
  .ai-chat-send-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(242,169,59,0.35);}
  .ai-chat-send-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;}
  .ai-chat-send-btn svg{width:19px;height:19px;}
  .ai-chat-disclaimer{
    margin:12px 2px 0;
    font-size:.74rem;
    color:var(--ink-soft);
    text-align:center;
  }
  .ai-chat-intro{
    margin:0 0 16px;
    font-size:.85rem;
    line-height:1.7;
    color:var(--ink-soft);
    text-align:center;
    background:color-mix(in srgb, var(--green) 7%, transparent);
    border:1px solid color-mix(in srgb, var(--green) 20%, transparent);
    border-radius:var(--radius-md);
    padding:14px 16px;
  }
  .ai-chat-quota{
    margin:0 2px 12px;
    font-size:.8rem;
    font-weight:700;
    color:var(--navy);
    text-align:center;
  }
  .ai-chat-locked{
    display:none;
    text-align:center;
    padding:34px 8px;
  }
  .ai-chat-locked.show{display:block;}
  .ai-chat-locked::before{
    content:"🔒";
    display:block;
    font-size:1.8rem;
    margin-bottom:10px;
    opacity:.6;
  }
  .ai-chat-locked p{
    margin:0 0 14px;
    color:var(--ink-soft);
    font-size:.92rem;
  }
  .ai-chat-locked .btn-google{
    max-width:320px;
    margin:0 auto;
  }
  @media(max-width:480px){
    .ai-chat-box{padding:14px;}
    .ai-msg{max-width:90%;font-size:.88rem;padding:10px 13px;}
    .ai-chat-messages{max-height:340px;}
  }

  /* ---- Image expand button + full-screen lightbox ------------------
     A small ⤢ button that appears on banner slides and announcement
     images. It's deliberately separate from the slide/card's own click
     target (which may open a sponsored link) so tapping it never
     hijacks that link — it only ever opens a full-screen preview. */
  .img-expand-btn{
    position:absolute;
    z-index:5;
    top:12px;
    right:12px;
    width:36px;height:36px;
    border-radius:50%;
    border:none;
    background:rgba(15,23,42,.55);
    color:#fff;
    font-size:1.1rem;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    backdrop-filter:blur(2px);
    transition:.2s;
  }
  .img-expand-btn:hover{background:rgba(15,23,42,.78);transform:scale(1.06);}

  /* Announcement images have their own top-right "جديد" badge, so the
     expand button sits at the bottom-right there instead to avoid
     overlapping it. */
  .ann-img-wrap .img-expand-btn{
    top:auto;
    bottom:12px;
  }

  .img-lightbox{
    position:fixed;
    inset:0;
    z-index:2000;
    background:rgba(10,14,20,.92);
    display:none;
    align-items:center;
    justify-content:center;
    padding:32px;
    cursor:zoom-out;
  }
  .img-lightbox.show{display:flex;}
  .img-lightbox-img{
    max-width:100%;
    max-height:100%;
    border-radius:12px;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
    cursor:default;
    animation:lightboxIn .25s ease both;
    touch-action:none;
    transform-origin:center center;
    will-change:transform;
  }
  .img-lightbox-img.zoomed{cursor:grab;}
  .img-lightbox-img.panning{cursor:grabbing;}
  @keyframes lightboxIn{
    from{opacity:0;transform:scale(.96);}
    to{opacity:1;transform:scale(1);}
  }
  .img-lightbox-close{
    position:absolute;
    top:18px;left:18px;
    width:42px;height:42px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.12);
    color:#fff;
    font-size:1.6rem;
    line-height:1;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:.2s;
  }
  .img-lightbox-close:hover{background:rgba(255,255,255,.22);}

  @media(max-width:480px){
    .img-expand-btn{width:32px;height:32px;font-size:1rem;top:10px;right:10px;}
    .img-lightbox{padding:16px;}
  }