:root{
    --navy:#023047;
    --teal:#219EBC;
    --sky:#8ECAE6;
    --amber:#FFB703;
    --orange:#FB8500;
    --paper:#F5FAFC;
    --ink:#0B2733;
    --line: rgba(2,48,71,0.12);
    --radius: 14px;
    --shadow: 0 12px 32px rgba(2,48,71,0.14);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;overflow-x:hidden;}
  body{
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.serif{ font-family:'Amiri', serif; }
  img{max-width:100%;display:block;}
  button{font-family:inherit;cursor:pointer;}
  a{color:inherit;text-decoration:none;}
  .arabic{ font-family:'Amiri', serif; }
  html[dir="rtl"] body{ font-family:'Amiri', serif; }
  html[dir="rtl"] .navlinks, html[dir="rtl"] .drawer nav{ direction:rtl; }

  /* diagonal chevron brand motif, echoes the council banner artwork */
  .chevron-motif{
    position:absolute; inset:0; overflow:hidden; pointer-events:none;
    background:
      linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,0.05) 42% 44%, transparent 44% 100%),
      linear-gradient(115deg, transparent 0 48%, rgba(255,255,255,0.05) 48% 50%, transparent 50% 100%),
      linear-gradient(115deg, transparent 0 54%, rgba(255,255,255,0.04) 54% 56%, transparent 56% 100%);
  }

  /* ---------- NAV ---------- */
  .topnav{
    position:fixed; top:0; left:0; right:0; z-index:200;
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 28px;
    background:rgba(255,255,255,0.55);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    color:var(--navy);
    border-bottom:1px solid rgba(255,255,255,0.40);
    box-shadow:0 4px 22px rgba(2,48,71,0.12);
  }
  .topnav .brand{ display:flex; align-items:center; gap:12px; cursor:pointer; }
  .brand-logos{ display:flex; align-items:center; gap:14px; }
  .brand-logos img{
    height:58px; width:auto; object-fit:contain; background:none; border:none; border-radius:0; padding:0;
  }
  .brand-logos img.seal2{ margin-left:0; }
  .topnav .brand span{ font-family:'Amiri',serif; font-size:1.12rem; letter-spacing:.2px; color:var(--navy); font-weight:700; }
  .topnav .brand small{ display:block; font-family:'Inter'; font-weight:600; font-size:0.62rem; color:#5a7d8c; letter-spacing:.4px; }
  .topnav-right{ display:flex; align-items:center; gap:14px; }
  .navlinks{ display:flex; gap:22px; align-items:center; }
  .navlinks a, .navlinks button.linklike{ background:none;border:none;color:var(--navy);font-size:0.95rem;font-weight:700;padding:0;opacity:1; }
  .navlinks a:hover, .navlinks button.linklike:hover{ opacity:1; color:var(--teal); }
  .lang-pill{
    display:flex; align-items:center; gap:6px; border:1px solid rgba(2,48,71,0.25); color:var(--navy); background:rgba(2,48,71,0.03);
    border-radius:999px; padding:7px 14px; font-size:.8rem; font-weight:600;
  }
  .lang-pill:hover{ border-color:var(--sky); color:var(--sky); }
  .pill-btn{
    background:var(--amber); color:var(--navy); border:none; border-radius:999px;
    padding:9px 20px; font-weight:700; font-size:0.85rem; white-space:nowrap;
  }
  .pill-btn:hover{ background:var(--orange); color:#fff; }
  .burger{
    display:none; flex-direction:column; gap:4px; background:none; border:none; padding:6px;
  }
  .burger span{ width:22px; height:2px; background:var(--navy); display:block; }

  .drawer{
    position:fixed; top:0; right:-320px; width:290px; height:100%; background:var(--navy);
    z-index:300; padding:24px; transition:right .35s ease; color:#fff;
    box-shadow:-10px 0 30px rgba(0,0,0,.3);
  }
  .drawer.open{ right:0; }
  .drawer-close{ background:none;border:none;color:#fff;font-size:1.4rem;float:right; }
  .drawer nav{ display:flex; flex-direction:column; gap:22px; margin-top:50px; }
  .drawer nav a, .drawer nav button.linklike{ background:none;border:none;color:#fff;font-size:1.05rem;text-align:left;font-weight:500; }
  .drawer .socials{ display:flex; gap:14px; margin-top:34px; }
  .drawer .socials a{ width:36px;height:36px;border:1px solid rgba(255,255,255,.35); border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .scrim{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:250; opacity:0; pointer-events:none; transition:opacity .3s; }
  .scrim.show{ opacity:1; pointer-events:auto; }

  @media (max-width: 860px){
    .navlinks{ display:none; }
    .burger{ display:flex; }
  }

  /* ---- responsive: tablets & phones ---- */
  @media (max-width: 640px){
    .topnav{ padding:10px 16px; }
    .brand-logos{ gap:9px; }
    .brand-logos img{ height:44px; width:auto; }
    .topnav .brand{ gap:9px; }
    .topnav .brand span{ font-size:.92rem; line-height:1.1; }
    .topnav .brand small{ font-size:.5rem; }
    .hero{ padding:1px 5vw 44px; }
    /* MOBILE HERO IMAGE: show the whole building, scaled down proportionally.
       Forced so no cached/other rule can crop or zoom it. */
    .hero-banner{ margin-top:60px; height:auto !important; min-height:0 !important; overflow:visible !important; }
    .hero-banner img.bg{ width:100% !important; height:auto !important; max-height:none !important; object-fit:contain !important; object-position:center !important; transform:none !important; display:block !important; }
    .hero-banner .banner-logo.l{ height:30%; top:10%; left:2%; }
    .hero-banner .banner-logo.r{ height:34%; top:8%; right:2%; }
    .hero h1{ font-size:1.72rem; }
    .hero .arabic-title{ font-size:1.28rem; }
    .hero p.lead{ font-size:1.04rem; line-height:1.7; }
    .hero .iiu-tag{ font-size:.64rem; padding:6px 12px; line-height:1.3; }
    /* Portrait circle on phones: keep it LARGE (180px, white ring) but overlap
       ONLY the building's lower edge — like the desktop composition. It stays in
       normal flow (so the text below it flows past automatically); a gentle
       -70px top margin lifts ~40% of the circle over the building's bottom and
       drops the rest (~60%) into the dark section, leaving the building clearly
       visible above. margin auto keeps it centered. !important because the
       desktop .hero-photo rule appears later in the file. */
    .hero-photo{ width:132px !important; height:132px !important; margin:-50px auto 18px !important; border:4px solid #fff !important; box-shadow:var(--shadow) !important; }
    .stepheader h2{ font-size:1.5rem; }
    .success-wrap, .admin-wrap{ padding-top:130px; }
  }
  @media (max-width: 420px){
    .brand-logos img{ height:38px; width:auto; }
    .brand-logos{ gap:7px; }
    .topnav .brand small{ display:none; }
    .topnav .brand span{ font-size:.82rem; max-width:180px; }
    .formcard{ padding:26px 18px; }
    .btn-primary{ padding:14px 26px; font-size:.95rem; }
  }

  /* ---------- PAGES ---------- */
  .page{ display:none; min-height:100vh; }
  .page.active{ display:block; animation:fadein .5s ease; }
  @keyframes fadein{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

  /* HOME / HERO */
  #page-home{ position:relative; }
  .hero-banner{ position:relative; width:100%; background:var(--navy); line-height:0; margin-top:78px; }
  .hero-banner img.bg{ width:100%; height:auto; display:block; }
  .hero-banner .banner-logo{ position:absolute; top:9%; width:auto; }
  .hero-banner .banner-logo.l{ left:2%; height:19%; }
  .hero-banner .banner-logo.r{ right:2%; height:22%; }
  .hero{
    position:relative; text-align:center; color:#fff;
    background:linear-gradient(180deg, #023047 0%, #05445e 100%);
    padding: 1px 6vw 66px;   /* 1px stops margin-collapse so the dark bg starts at the banner bottom, not over the building */
  }
  /* floating academic icons drifting down behind the hero content */
  .hero-icons{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
  .hero-icons i{ position:absolute; top:0; display:block; opacity:0;
    animation-name:heroFloat; animation-timing-function:linear; animation-iteration-count:infinite; will-change:transform,opacity; }
  .hero-icons i svg{ width:100%; height:100%; display:block; fill:currentColor; }
  @keyframes heroFloat{
    0%{ transform:translateY(-40px) translateX(0) rotate(0deg); opacity:0; }
    12%{ opacity:.30; }
    50%{ transform:translateY(250px) translateX(16px) rotate(11deg); }
    88%{ opacity:.30; }
    100%{ transform:translateY(540px) translateX(-8px) rotate(22deg); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){ .hero-icons{ display:none; } }
  .hero-inner{ max-width:900px; margin:0 auto; text-align:center; width:100%; position:relative; z-index:2; }
  .hero-photo{
    width:180px; height:180px; border-radius:50%; margin:-107px auto 20px;
    border:5px solid #fff; box-shadow: var(--shadow); background:#fff; position:relative; z-index:3;
  }
  .hero-photo img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
  .hero .eyebrow-row{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
  .hero .iiu-tag{ display:inline-flex; flex-wrap:wrap; justify-content:center; white-space:normal; max-width:100%; align-items:center; gap:8px; font-size:.78rem; font-weight:700; color:#4a3f2a; letter-spacing:.4px; background:#e7dcc4; padding:7px 16px; border-radius:999px; }
  .hero h1{ font-size: clamp(2rem, 5vw, 3.4rem); margin:0 0 8px; line-height:1.15; }
  .hero .arabic-title{ font-size: clamp(1.4rem, 3.2vw, 2.15rem); color:var(--sky); margin:0 0 22px; font-family:'Amiri',serif; }
  .hero p.lead{ font-family:'Inter'; font-size:1.2rem; line-height:1.85; color:#fff; max-width:720px; margin:0 auto 32px; }
  .cta-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
  .btn-primary{
    background:var(--amber); color:var(--navy); border:none; padding:16px 38px; border-radius:999px;
    font-weight:800; font-size:1.02rem; box-shadow:0 10px 26px rgba(255,183,3,.4);
    display:inline-flex; align-items:center; gap:10px;
  }
  .btn-primary:hover{ background:var(--orange); color:#fff; transform:translateY(-1px); }
  .btn-secondary{
    background:transparent; border:1.5px solid rgba(255,255,255,.6); color:#fff;
    padding:14px 30px; border-radius:999px; font-weight:600; font-size:1rem;
  }
  .btn-secondary:hover{ border-color:var(--sky); color:var(--sky); }

  /* Section under hero */
  .section{ max-width:1100px; margin:0 auto; padding:76px 6vw; }
  .section h2{ font-size:1.9rem; color:var(--navy); margin-bottom:10px; }
  .section .subtitle{ color:#456; max-width:640px; line-height:1.6; margin-bottom:36px; }
  .info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  @media (max-width:760px){ .info-grid{ grid-template-columns:1fr; } }
  .info-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; position:relative; overflow:hidden; }
  .info-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--teal),var(--sky)); }
  .info-card .num{ color:var(--teal); font-weight:800; font-size:1.6rem; margin-bottom:8px; font-family:'Amiri',serif; }
  .info-card h3{ margin:0 0 8px; font-size:1.05rem; color:var(--navy); }
  .info-card p{ margin:0; font-size:.9rem; color:#4a5f6b; line-height:1.55; }
  footer.site-footer{ text-align:center; padding:26px; color:#6f8892; font-size:.82rem; background:#fff; border-top:1px solid var(--line); }

  /* ---------- STEP HEADER (brand banner motif) ---------- */
  .stepheader{
    --collage:url("../assets/section-collage.jpg");
    position:relative; overflow:hidden;
    min-height:360px; margin-top:78px;
    display:flex; flex-direction:column; justify-content:flex-end;
    background:
      var(--collage) center center / 100% 100% no-repeat,
      linear-gradient(120deg, var(--navy) 0%, #05445e 55%, var(--teal) 130%);
    color:#fff; padding:0 6vw 34px; text-align:left;
  }
  /* light cover only (no blur) — brightens the image; slim bottom fade just for text legibility */
  .stepheader::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(0deg, rgba(2,48,71,0.30) 0%, rgba(2,48,71,0.00) 24%),
      linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.08) 100%);
  }
  html[dir="rtl"] .stepheader{ text-align:right; }
  @media (max-width: 640px){
    /* Mobile: show the FULL banner image (no crop, no zoom, original aspect
       ratio). aspect-ratio makes the container height derive from its width
       exactly like width:100%;height:auto on the image, so the whole
       composition (left & right sides included) stays visible. The base
       background-size:100% 100% then fills it with no distortion because the
       container's ratio equals the image's. The title/description are overlaid
       on the lower part of the image; there is no separate block below it. */
    .stepheader{
      --collage:url("../assets/section-collage-m.jpg");
      margin-top:60px;
      min-height:0;
      aspect-ratio: 1600 / 600;   /* the banner image's own ratio (8:3) */
      padding:0 5vw 10px;
      overflow:hidden;            /* the image box never grows past its ratio */
    }
    /* keep the overlaid title/description compact so they sit within the image
       (its lower part) and never force the box taller than the image */
    .stepheader .sh-panel h2{ font-size:1.35rem; margin:0 0 3px; }
    .stepheader .sh-panel p, .stepheader > p{ font-size:.8rem; line-height:1.35; }
  }
  .stepheader > *{ position:relative; z-index:2; }
  .stepheader .kicker{ display:none; }
  .stepheader .sh-panel{ display:block; max-width:min(680px,100%); }
  .stepheader .sh-panel p, .stepheader > p{ color:var(--amber); font-weight:700; }
  .stepheader .sh-panel .kicker{ margin-bottom:8px; }
  .stepheader .sh-panel h2{ margin:0 0 8px; }
  .stepheader .sh-panel p{ margin:0; }
  .stepheader .kicker, .stepheader h2, .stepheader p, .stepheader .breadcrumb{ text-shadow:0 2px 10px rgba(2,20,30,0.85), 0 1px 3px rgba(0,0,0,0.6); }
  html[dir="rtl"] .stepheader .sh-panel{ text-align:right; margin-left:auto; }
  /* Arabic: clearer font + right alignment everywhere */
  html[dir="rtl"] body, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .serif, html[dir="rtl"] .arabic{ font-family:'Cairo','Amiri',sans-serif; }
  html[dir="rtl"] .stepheader{ text-align:right; }
  html[dir="rtl"] .stepheader .breadcrumb{ flex-direction:row-reverse; }
  /* Log Out only appears once signed in */
  .admin-logout{ display:none !important; }
  html.admin-authed .admin-logout{ display:inline-flex !important; }
  .stepheader .breadcrumb{ display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--sky); margin-bottom:18px; position:relative; z-index:2; flex-wrap:wrap; }
  .stepheader .breadcrumb button{ background:none;border:none;color:var(--sky); font-weight:600; font-size:.85rem; padding:0; }
  .stepheader .breadcrumb button:hover{ color:#fff; text-decoration:underline; }
  .stepheader .kicker{ position:relative; z-index:2; font-size:.75rem; font-weight:700; letter-spacing:1.5px; color:var(--amber); margin-bottom:10px; }
  .stepheader h2{ position:relative; z-index:2; font-size:2rem; margin:0 0 8px; }
  .stepheader p{ position:relative; z-index:2; color:rgba(255,255,255,0.82); max-width:560px; margin:0; font-size:.95rem; line-height:1.6; }

  .wrap-narrow{ max-width:900px; margin:0 auto; padding:44px 6vw 90px; }

  /* DEPARTMENTS */
  .dept-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
  @media (max-width:700px){ .dept-grid{ grid-template-columns:1fr; } }
  .dept-card{
    display:flex; align-items:center; gap:16px; background:#fff; border:1.5px solid var(--line);
    border-radius:var(--radius); padding:18px 20px; text-align:left; width:100%; transition:.2s;
    box-shadow:0 2px 10px rgba(2,48,71,0.04);
  }
  .dept-card .ic{ width:46px;height:46px;border-radius:12px;background:var(--paper); color:var(--teal); flex-shrink:0; display:flex;align-items:center;justify-content:center; border:1.5px solid var(--sky); }
  .dept-card .ic svg{ width:22px;height:22px; }
  .dept-card .txt{ flex:1; }
  .dept-card span.name{ font-weight:700; color:var(--navy); font-size:.95rem; display:block; }
  .dept-card span.namear{ font-size:.78rem; color:#7c94a0; font-family:'Amiri',serif; }
  .dept-card .chk{ width:22px;height:22px; border-radius:50%; border:1.5px solid var(--line); flex-shrink:0; display:flex;align-items:center;justify-content:center; }
  .dept-card:hover{ border-color:var(--teal); box-shadow:var(--shadow); transform:translateY(-2px); }
  .dept-card.selected{ border-color:var(--teal); background:linear-gradient(0deg, rgba(33,158,188,.06), rgba(33,158,188,.06)); box-shadow:var(--shadow); }
  .dept-card.selected .ic{ background:var(--teal); color:#fff; border-color:var(--teal); }
  .dept-card.selected .chk{ background:var(--teal); border-color:var(--teal); }
  .dept-card.selected .chk svg{ display:block; }
  .dept-card .chk svg{ display:none; width:13px;height:13px; }

  .continue-bar{ display:flex; justify-content:center; gap:12px; margin-top:36px; }
  .continue-bar button:disabled{ opacity:.4; cursor:not-allowed; }

  /* GENDER */
  .gender-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:8px; }
  @media (max-width:600px){ .gender-grid{ grid-template-columns:1fr; } }
  .gender-card{
    background:#fff; border:1.5px solid var(--line); border-radius:18px; padding:44px 24px;
    display:flex; flex-direction:column; align-items:center; gap:14px; position:relative; overflow:hidden;
    box-shadow:0 2px 10px rgba(2,48,71,0.04); transition:.2s;
  }
  .gender-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
  .gender-card:hover .icon{ transform:scale(1.03); }
  .gender-card .icon{ width:112px;height:112px;border-radius:50%; background:var(--paper); display:flex;align-items:center;justify-content:center; transition:.2s; overflow:hidden; border:3px solid var(--sky); box-shadow:0 8px 20px rgba(2,48,71,.14); }
  .gender-card .icon svg.avatar{ width:100%;height:100%; display:block; }
  .gender-card .selbadge{ position:absolute; top:16px; right:16px; width:28px;height:28px;border-radius:50%; background:var(--teal); display:none; align-items:center;justify-content:center; box-shadow:0 4px 10px rgba(2,48,71,.2); }
  .gender-card .selbadge svg{ width:15px;height:15px; }
  .gender-card h3{ margin:0; color:var(--navy); font-family:'Inter'; font-weight:800; font-size:1.15rem; }
  .gender-card p{ margin:0; font-size:.85rem; color:#5a7480; text-align:center; }
  .gender-card.selected{ border-color:var(--teal); box-shadow:var(--shadow); background:linear-gradient(0deg, rgba(33,158,188,.05), rgba(33,158,188,.05)); }
  .gender-card.selected .icon{ border-color:var(--teal); }
  .gender-card.selected .selbadge{ display:flex; }

  /* FORM */
  .stepper{ display:flex; justify-content:center; gap:0; margin:8px auto 40px; max-width:640px; }
  .stepper .st{ flex:1; text-align:center; position:relative; }
  .stepper .st .circ{
    width:44px;height:44px;border-radius:50%; background:#fff; border:2px solid var(--line); color:#7c94a0;
    display:flex; align-items:center; justify-content:center; font-weight:700; margin:0 auto 8px; font-size:.9rem;
    transition:.25s;
  }
  .stepper .st .circ svg{ width:19px;height:19px; }
  .stepper .st.active .circ{ background:var(--teal); border-color:var(--teal); color:#fff; }
  .stepper .st.done .circ{ background:var(--sky); border-color:var(--sky); color:var(--navy); }
  .stepper .st label{ font-size:.74rem; color:#5a7480; font-weight:600; }
  .stepper .st.active label{ color:var(--navy); }
  .stepper .line{ position:absolute; top:22px; left:-50%; width:100%; height:2px; background:var(--line); z-index:-1; }
  .stepper .st:first-child .line{ display:none; }
  .stepper .st.done .line, .stepper .st.active .line{ background:var(--sky); }

  .formcard{ background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:38px 36px; max-width:640px; margin:0 auto; }
  .formcard h3.stephead{ margin:0 0 4px; color:var(--navy); font-size:1.2rem; }
  .formcard p.stepsub{ margin:0 0 22px; color:#7c94a0; font-size:.85rem; }
  .field{ margin-bottom:20px; }
  .field label{ display:block; font-size:.85rem; font-weight:600; color:var(--navy); margin-bottom:6px; }
  .field label .opt{ font-weight:400; color:#8199a3; }
  .field input, .field select{
    width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line);
    font-size:.92rem; font-family:'Inter'; color:var(--ink); background:#fbfdfe;
  }
  .field input:focus, .field select:focus{ outline:none; border-color:var(--teal); background:#fff; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
  .readonly-chip{ display:inline-flex; align-items:center; gap:8px; background:var(--paper); border:1px dashed var(--sky); padding:9px 14px; border-radius:10px; font-size:.85rem; color:var(--navy); font-weight:600; }
  .form-actions{ display:flex; justify-content:space-between; margin-top:28px; }
  .btn-outline{ background:#fff; border:1.5px solid var(--line); color:var(--navy); padding:12px 26px; border-radius:999px; font-weight:600; }
  .btn-outline:hover{ border-color:var(--teal); color:var(--teal); }
  .btn-teal{ background:var(--teal); color:#fff; border:none; padding:12px 30px; border-radius:999px; font-weight:700; }
  .btn-teal:hover{ background:var(--navy); }

  .submit-panel{ text-align:center; padding:14px 0 4px; }
  .submit-panel .checkwrap{ width:80px;height:80px; border-radius:50%; background:var(--paper); border:2px solid var(--sky); display:flex;align-items:center;justify-content:center; margin:0 auto 22px; }
  .submit-panel h3{ color:var(--navy); margin:0 0 10px; }
  .submit-panel p{ color:#5a7480; font-size:.92rem; line-height:1.6; margin:0 0 26px; }
  .review-mini{ display:grid; grid-template-columns:1fr 1fr; gap:10px; text-align:left; background:var(--paper); border-radius:12px; padding:16px 18px; margin-bottom:20px; }
  .review-mini div{ font-size:.82rem; }
  .review-mini span{ display:block; color:#7c94a0; font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; }
  .review-mini b{ color:var(--navy); }

  .note-box{ background:var(--paper); border-left:3px solid var(--teal); padding:12px 16px; border-radius:8px; font-size:.82rem; color:#3a545f; margin-top:6px; text-align:left; }

  /* SUCCESS */
  .success-wrap{ max-width:560px; margin:0 auto; padding:170px 6vw 100px; text-align:center; }
  .success-icon{ width:92px;height:92px;border-radius:50%; background:var(--teal); display:flex;align-items:center;justify-content:center; margin:0 auto 26px; box-shadow:var(--shadow); }
  .success-wrap h2{ color:var(--navy); font-size:1.8rem; margin-bottom:12px; }
  .success-wrap p{ color:#51707c; line-height:1.7; margin-bottom:30px; }
  .success-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 24px; text-align:left; margin-bottom:30px; }
  .success-card .row{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--line); font-size:.88rem; }
  .success-card .row:last-child{ border-bottom:none; }
  .success-card .row span:first-child{ color:#7c94a0; }
  .success-card .row span:last-child{ font-weight:600; color:var(--navy); }

  /* ADMIN */
  .admin-wrap{ max-width:1080px; margin:0 auto; padding:150px 6vw 100px; }
  .admin-login{ max-width:380px; margin:120px auto; text-align:center; background:#fff; border:1px solid var(--line); border-radius:16px; padding:36px 30px; box-shadow:var(--shadow); }
  .admin-login h3{ color:var(--navy); margin-top:0; }
  .admin-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
  @media (max-width:700px){ .admin-stats{ grid-template-columns:1fr 1fr; } }
  .admin-stats .stat{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
  .admin-stats .stat b{ display:block; font-size:1.6rem; color:var(--navy); font-family:'Amiri',serif; }
  .admin-stats .stat span{ font-size:.78rem; color:#7c94a0; }
  .admin-table-wrap{ overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:14px; }
  table{ width:100%; border-collapse:collapse; font-size:.85rem; min-width:820px; }
  th{ text-align:left; background:var(--navy); color:#fff; padding:12px 14px; font-weight:600; white-space:nowrap; }
  td{ padding:12px 14px; border-bottom:1px solid var(--line); color:#3a545f; white-space:nowrap; }
  tr:last-child td{ border-bottom:none; }
  .admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:12px; }
  .empty-state{ text-align:center; padding:60px 20px; color:#7c94a0; }
  .tag{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:700; }
  .tag.male{ background:#e2f0fa; color:#1c6f8c; }
  .tag.female{ background:#fde8ee; color:#b13a63; }

  .back-link{ display:inline-flex; align-items:center; gap:6px; color:var(--teal); font-weight:600; font-size:.9rem; margin-bottom:18px; }
  .back-link:hover{ color:var(--navy); }

/* ---------- polished text + animations ---------- */
.hero h1{ font-weight:700; text-shadow:0 2px 14px rgba(2,48,71,.55); }
.hero .arabic-title{ text-shadow:0 2px 12px rgba(2,48,71,.5); }
.hero p.lead{ font-weight:600; color:#fff; text-shadow:0 1px 8px rgba(2,48,71,.6); }
.hero .iiu-tag{ font-weight:700; }
.section h2, .stepheader h2, .success-wrap h2{ font-weight:700; }
.info-card h3, .dept-card span.name, .gender-card h3{ font-weight:800; }

@keyframes riseIn{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none; } }
@keyframes softPop{ from{ opacity:0; transform:scale(.9);} to{ opacity:1; transform:scale(1);} }

.page.active .hero-photo{ animation:softPop .7s ease both; }
.page.active .hero .eyebrow-row{ animation:riseIn .6s ease both; }
.page.active .hero h1{ animation:riseIn .6s .10s ease both; }
.page.active .hero .arabic-title{ animation:riseIn .6s .20s ease both; }
.page.active .hero p.lead{ animation:riseIn .6s .30s ease both; }
.page.active .hero .cta-row{ animation:riseIn .6s .42s ease both; }

.info-card, .dept-card, .gender-card, .formcard, .btn-primary, .btn-teal, .btn-outline, .lang-pill, .pill-btn{
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary:hover, .btn-teal:hover{ transform:translateY(-2px); }
.info-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }

@media (prefers-reduced-motion: reduce){
  *, .page.active *{ animation:none !important; transition:none !important; }
}

/* ================= EXTENDED FEATURES ================= */
.empty-card{ background:#fff; border:1px dashed var(--sky); border-radius:14px; padding:40px 24px; text-align:center; color:#7c94a0; }

/* News */
.news-list{ display:flex; flex-direction:column; gap:16px; }
.news-card{ background:#fff; border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:14px; padding:20px 24px; box-shadow:0 2px 10px rgba(2,48,71,.05); }
.news-card .news-date{ font-size:.74rem; font-weight:700; letter-spacing:.4px; color:var(--teal); text-transform:uppercase; margin-bottom:6px; }
.news-card h3{ margin:0 0 6px; color:var(--navy); font-family:'Inter'; font-weight:800; font-size:1.1rem; }
.news-card p{ margin:0; color:#4a5f6b; line-height:1.6; font-size:.92rem; white-space:pre-wrap; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:22px; }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:0 2px 10px rgba(2,48,71,.05); }
.ci-item{ display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.ci-ic{ width:42px; height:42px; border-radius:12px; background:var(--paper); border:1px solid var(--sky); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.ci-item small{ display:block; font-size:.68rem; letter-spacing:.5px; color:#8199a3; font-weight:700; }
.ci-item b{ color:var(--navy); font-size:.95rem; }
.map-link{ display:inline-block; margin-top:6px; color:var(--teal); font-weight:700; font-size:.9rem; }
.map-link:hover{ color:var(--navy); }
.contact-form{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:0 2px 10px rgba(2,48,71,.05); }
.contact-form textarea{ width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line); font-family:'Inter'; font-size:.92rem; color:var(--ink); background:#fbfdfe; resize:vertical; }
.contact-form textarea:focus{ outline:none; border-color:var(--teal); background:#fff; }
.thanks-note{ background:#e7f7ef; border:1px solid #9fd9bd; color:#1f7a54; border-radius:10px; padding:10px 14px; font-size:.88rem; margin-bottom:14px; }

/* Representatives */
.reps-list{ display:flex; flex-direction:column; gap:26px; }
.rep-group h3{ margin:0 0 14px; color:var(--navy); font-family:'Inter'; font-weight:800; font-size:1.05rem; padding-bottom:8px; border-bottom:2px solid var(--sky); }
.rep-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.rep-card{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:0 2px 10px rgba(2,48,71,.05); }
.rep-avatar{ width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--sky)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; }
.rep-meta{ display:flex; flex-direction:column; }
.rep-meta b{ color:var(--navy); font-size:.95rem; }
.rep-meta span{ color:#7c94a0; font-size:.8rem; }

/* Admin tabs */
.admin-tabs{ display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:24px; }
.atab{ background:none; border:none; padding:12px 16px; font-weight:700; font-size:.9rem; color:#7c94a0; border-bottom:3px solid transparent; margin-bottom:-1px; }
.atab:hover{ color:var(--navy); }
.atab.active{ color:var(--teal); border-bottom-color:var(--teal); }
.panel-actions{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }

/* Charts */
.chart-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
@media (max-width:760px){ .chart-grid{ grid-template-columns:1fr; } }
.chart-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 22px; box-shadow:0 2px 10px rgba(2,48,71,.05); margin-bottom:18px; }
.chart-card h4{ margin:0 0 16px; color:var(--navy); font-size:.95rem; }
.bars{ display:flex; flex-direction:column; gap:10px; }
.bar-row{ display:flex; align-items:center; gap:10px; font-size:.82rem; }
.bar-label{ flex:0 0 46%; color:#3a545f; line-height:1.35; word-break:break-word; }
.bar-track{ flex:1; height:12px; background:var(--paper); border-radius:999px; overflow:hidden; }
.bar-fill{ display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--sky)); border-radius:999px; transition:width .5s ease; }
.bar-fill.male{ background:linear-gradient(90deg,#1c6f8c,#4aa3c3); }
.bar-fill.female{ background:linear-gradient(90deg,#b13a63,#e084a6); }
.bar-val{ flex:0 0 auto; font-weight:800; color:var(--navy); min-width:22px; text-align:right; }
.flow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.flow-step{ flex:1; min-width:120px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:16px; text-align:center; }
.flow-step b{ display:block; font-size:1.7rem; color:var(--navy); font-family:'Amiri',serif; }
.flow-step span{ font-size:.78rem; color:#7c94a0; }
.flow-step.pend{ border-color:var(--amber); }
.flow-step.ok{ border-color:var(--teal); background:linear-gradient(0deg,rgba(33,158,188,.06),rgba(33,158,188,.06)); }
.flow-arrow{ color:var(--sky); font-size:1.3rem; font-weight:700; }

/* Manage lists / forms */
.mng-form{ display:flex; gap:10px; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:18px; }
.mng-form.col{ flex-direction:column; }
.mng-form input, .mng-form select, .mng-form textarea{ flex:1; min-width:150px; padding:11px 13px; border-radius:10px; border:1.5px solid var(--line); font-family:'Inter'; font-size:.9rem; background:#fbfdfe; color:var(--ink); }
.mng-form input:focus, .mng-form select:focus, .mng-form textarea:focus{ outline:none; border-color:var(--teal); background:#fff; }
.mng-list{ display:flex; flex-direction:column; gap:10px; }
.mng-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.mng-body{ flex:1; }
.mng-body b{ color:var(--navy); }
.mng-body p{ margin:6px 0 0; color:#4a5f6b; font-size:.9rem; line-height:1.5; white-space:pre-wrap; }
.msg-subj{ font-weight:700; color:var(--teal); font-size:.85rem; margin-top:4px; }
.muted{ color:#8199a3; font-size:.8rem; }
.row-actions{ display:flex; gap:6px; white-space:nowrap; }
.mini{ border:none; border-radius:8px; padding:6px 12px; font-weight:700; font-size:.78rem; cursor:pointer; }
.mini.ok{ background:var(--teal); color:#fff; }
.mini.ok:hover{ background:var(--navy); }
.mini.danger{ background:#fde8ee; color:#b13a63; }
.mini.danger:hover{ background:#b13a63; color:#fff; }
.tag.ok{ background:#e7f7ef; color:#1f7a54; }
.tag.pend{ background:#fff3d6; color:#a9741a; }

/* Rich footer */
.site-footer-rich{ background:linear-gradient(180deg,#023047,#05304a); color:rgba(255,255,255,.85); padding:56px 6vw 0; }
.footer-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:30px; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:26px; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-about .brand-logos{ display:inline-flex; align-items:center; gap:12px; }
.footer-about .brand-logos img{ height:66px; width:66px; object-fit:contain; background:#fff; border-radius:50%; padding:7px; border:2px solid rgba(255,255,255,.9); }
.footer-about p{ font-size:.86rem; line-height:1.6; margin:14px 0 16px; color:rgba(255,255,255,.75); }
.footer-socials{ display:flex; gap:10px; }
.footer-socials a{ width:36px; height:36px; border:1px solid rgba(255,255,255,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; }
.footer-socials a:hover{ background:var(--teal); border-color:var(--teal); }
.footer-col h4{ color:#fff; font-size:.95rem; margin:0 0 14px; }
.footer-col a, .footer-col span{ display:block; color:rgba(255,255,255,.75); font-size:.86rem; margin-bottom:10px; }
.footer-col a:hover{ color:var(--sky); }
.footer-bottom{ max-width:1100px; margin:36px auto 0; padding:18px 0; border-top:1px solid rgba(255,255,255,.12); font-size:.78rem; color:rgba(255,255,255,.6); text-align:center; }

/* ===== analytics dashboard charts ===== */
.dash-grid{ display:grid; gap:18px; margin-bottom:18px; }
.dash-grid.a{ grid-template-columns:1.7fr 1fr; }
.dash-grid.b{ grid-template-columns:1fr 1fr 1.3fr; }
@media (max-width:900px){ .dash-grid.a, .dash-grid.b{ grid-template-columns:1fr; } }
.cc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.cc-sub{ font-size:.72rem; color:#8199a3; font-weight:600; }
.chart-card .svg-chart{ width:100%; height:auto; display:block; }
.svg-chart .ax{ font-size:9px; fill:#8199a3; font-family:'Inter',sans-serif; }
.svg-chart .grid{ stroke:#eef3f6; stroke-width:1; }
.donut{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.donut svg{ width:130px; height:130px; flex-shrink:0; }
.donut .dc-num{ font-size:26px; font-weight:800; fill:var(--navy); font-family:'Amiri',serif; }
.donut .dc-sub{ font-size:9px; fill:#8199a3; letter-spacing:.5px; text-transform:uppercase; }
.donut-legend{ display:flex; flex-direction:column; gap:8px; }
.donut-legend .lg{ font-size:.82rem; color:#3a545f; display:flex; align-items:center; gap:8px; }
.donut-legend .lg b{ color:var(--navy); }
.donut-legend .dot{ width:11px; height:11px; border-radius:3px; display:inline-block; }
.gauge{ text-align:center; }
.gauge svg{ width:170px; height:auto; }
.gauge .g-num{ font-size:26px; font-weight:800; fill:var(--navy); font-family:'Amiri',serif; }
.gauge .g-cap{ font-size:.76rem; color:#7c94a0; margin-top:2px; }

/* keep phone numbers / emails left-to-right even in Arabic (RTL) */
.ci-item b, .footer-col span, .contact-info [dir="ltr"]{ unicode-bidi:plaintext; }
html[dir="rtl"] .ci-item b[dir="ltr"], html[dir="rtl"] .footer-col span[dir="ltr"]{ direction:ltr; unicode-bidi:isolate; display:inline-block; }

/* ===== hero title colour (match the Arabic sky tone) ===== */
.hero h1{ color:#ffffff; }

/* ===== skills / hobbies chips ===== */
.group-label{ font-weight:800; color:var(--navy); font-size:.95rem; margin-bottom:10px; display:block; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.chips .chip{ position:relative; display:inline-flex; align-items:center; gap:9px; background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:10px 15px; font-size:.87rem; color:#37525d; cursor:pointer; transition:.18s ease; user-select:none; box-shadow:0 1px 2px rgba(2,48,71,.05); }
.chips .chip:hover{ border-color:var(--teal); background:#f3fbfd; transform:translateY(-1px); }
.chips .chip input{ position:absolute; opacity:0; width:0; height:0; margin:0; }
.chips .chip .chip-check{ width:18px; height:18px; border-radius:6px; border:1.5px solid #c2d3da; background:#fff; display:inline-flex; align-items:center; justify-content:center; flex:none; transition:.18s; }
.chips .chip .chip-check::after{ content:''; width:5px; height:9px; border:solid var(--teal); border-width:0 2px 2px 0; transform:rotate(45deg); margin-top:-2px; opacity:0; transition:.15s; }
.chips .chip .chip-label{ line-height:1.25; }
.chips .chip.checked{ background:var(--teal); border-color:var(--teal); color:#fff; font-weight:600; box-shadow:0 5px 14px rgba(33,158,188,.30); }
.chips .chip.checked .chip-check{ background:#fff; border-color:#fff; }
.chips .chip.checked .chip-check::after{ opacity:1; }
.other-input{ width:100%; padding:11px 14px; border-radius:10px; border:1.5px solid var(--line); font-family:'Inter'; font-size:.9rem; background:#fbfdfe; color:var(--ink); }
.other-input:focus{ outline:none; border-color:var(--teal); background:#fff; }

/* ===== full review on submit step ===== */
.review-full{ display:grid; grid-template-columns:1fr 1fr; gap:4px 28px; text-align:left; background:var(--paper); border-radius:14px; padding:20px 24px; margin-bottom:20px; }
@media (max-width:640px){ .review-full{ grid-template-columns:1fr; } }
.review-full .rf{ padding:10px 2px; border-bottom:1px dashed var(--line); }
.review-full .rf.full{ grid-column:1 / -1; }
.review-full .rf span{ display:block; color:#5b7683; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.review-full .rf b{ color:var(--navy); font-weight:700; font-size:1rem; line-height:1.4; word-break:break-word; }
html[dir="rtl"] .review-full{ text-align:right; }

/* RTL: flip flow arrows to point the correct way in Arabic */
html[dir="rtl"] .flow-arrow{ transform:scaleX(-1); display:inline-block; }
html[dir="rtl"] .admin-tabs{ direction:rtl; }

/* ===== admin View modal ===== */
.mini{ background:#eef4f7; color:var(--navy); }
.modal{ position:fixed; inset:0; z-index:400; background:rgba(2,48,71,.55); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; }
.modal[hidden]{ display:none; }
.modal-card{ background:#fff; border-radius:18px; padding:30px 28px 24px; max-width:760px; width:100%; box-shadow:var(--shadow); position:relative; }
.modal-close{ position:absolute; top:12px; right:16px; background:none; border:none; font-size:1.7rem; color:#7c94a0; line-height:1; cursor:pointer; }
html[dir="rtl"] .modal-close{ right:auto; left:16px; }
.modal-card h3{ margin:0 0 8px; color:var(--navy); font-size:1.35rem; }
.modal-actions{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.modal-actions .btn-teal, .modal-actions .btn-outline{ padding:9px 20px; font-size:.88rem; }

/* Admin page: hide the main nav links + Get Started (admin has its own Home/Log Out) */
html.on-admin .navlinks a{ display:none; }
html.on-admin .navlinks .pill-btn{ display:none; }
html.on-admin #langBtn{ display:none; }
.admin-only{ display:none !important; }
html.on-admin .admin-only{ display:flex !important; }
.admin-topnav{ align-items:center; gap:10px; }

/* ================= RBAC: auth, competitions, management ================= */
.auth-wrap{ min-height:70vh; display:flex; align-items:center; justify-content:center; padding:120px 20px 60px; }
.auth-card{ width:100%; max-width:420px; background:#fff; border:1px solid rgba(2,48,71,.10); border-radius:18px; padding:34px 30px; box-shadow:0 18px 50px rgba(2,48,71,.10); text-align:left; }
html[dir="rtl"] .auth-card{ text-align:right; }
.auth-card h2{ margin:0 0 6px; color:var(--navy); }
.auth-sub{ color:#5a7480; font-size:.9rem; margin:0 0 22px; }
.auth-card .field{ margin-bottom:16px; }
.auth-card .field label{ display:block; font-size:.82rem; font-weight:700; color:var(--navy); margin-bottom:6px; }
.auth-card .field input{ width:100%; padding:12px 14px; border:1px solid rgba(2,48,71,.18); border-radius:10px; font-size:.95rem; }
.auth-card .field input:focus{ outline:none; border-color:var(--sky); box-shadow:0 0 0 3px rgba(142,202,230,.35); }
.auth-err{ color:#c0392b; font-size:.85rem; min-height:18px; margin-bottom:8px; }

.portal-wrap{ max-width:1040px; margin:0 auto; padding:120px 6vw 70px; }
.portal-head{ margin-bottom:26px; }
.portal-head h2{ margin:0 0 6px; color:var(--navy); font-size:1.9rem; }
.portal-sub{ color:#5a7480; margin:0; font-weight:600; }
html[dir="rtl"] .portal-wrap{ text-align:right; }

.comp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.comp-card{ background:#fff; border:1px solid rgba(2,48,71,.10); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:12px; box-shadow:0 8px 26px rgba(2,48,71,.06); }
.comp-card h3{ margin:0; color:var(--navy); font-size:1.15rem; }
.comp-card p{ margin:0; color:#4a6270; font-size:.9rem; line-height:1.6; }
.comp-cat{ align-self:flex-start; background:#e7dcc4; color:#4a3f2a; font-size:.68rem; font-weight:800; letter-spacing:.4px; padding:4px 10px; border-radius:999px; text-transform:uppercase; }
.comp-body{ flex:1; display:flex; flex-direction:column; gap:10px; }
.comp-foot{ display:flex; }
.comp-done{ color:#1c7c4a; font-weight:800; font-size:.92rem; }

.council-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.council-card{ background:#fff; border:1px solid rgba(2,48,71,.10); border-radius:16px; padding:24px; box-shadow:0 8px 26px rgba(2,48,71,.06); }
.council-card h3{ margin:0 0 8px; color:var(--navy); }
.council-card p{ margin:0 0 16px; color:#4a6270; font-size:.9rem; line-height:1.6; }

/* management lists (admin: competitions + users) */
.rbac-manage{ display:flex; flex-direction:column; gap:18px; }
.rbac-list{ display:flex; flex-direction:column; gap:10px; }
.rbac-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:#fff; border:1px solid rgba(2,48,71,.10); border-radius:12px; padding:12px 16px; }
.rbac-info{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--navy); }
.rbac-sub{ color:#708995; font-size:.82rem; width:100%; }
.rbac-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.rbac-badge{ font-size:.66rem; font-weight:800; letter-spacing:.3px; padding:3px 9px; border-radius:999px; text-transform:uppercase; }
.rbac-badge.s-open{ background:#d8f2e2; color:#1c7c4a; }
.rbac-badge.s-draft{ background:#e7ebef; color:#5a7480; }
.rbac-badge.s-closed{ background:#f6dcdc; color:#b33b3b; }
.rbac-badge.r-admin{ background:#023047; color:#fff; }
.rbac-badge.r-council{ background:#036666; color:#fff; }
.rbac-badge.r-student{ background:#ffb703; color:#3a2e0a; }
.btn-outline.sm{ padding:6px 12px; font-size:.8rem; border-radius:8px; }
.btn-primary.sm{ padding:9px 20px; font-size:.85rem; }
.btn-outline.sm.danger{ border-color:#e0b4b4; color:#b33b3b; }
.btn-outline.sm.danger:hover{ background:#b33b3b; color:#fff; border-color:#b33b3b; }
.chk-line{ display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--navy); }
.mng-form.col{ flex-direction:column; align-items:stretch; }
@media (max-width:640px){ .portal-wrap{ padding:96px 5vw 50px; } .auth-wrap{ padding:96px 16px 40px; } }

/* ---- competition detail + admin entries + council add ---- */
.comp-card.comp-click{ cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; }
.comp-card.comp-click:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(2,48,71,.12); }
.comp-link{ color:var(--teal); font-weight:700; font-size:.9rem; }
.comp-detail{ background:#fff; border:1px solid rgba(2,48,71,.10); border-radius:16px; padding:26px; margin-top:16px; box-shadow:0 8px 26px rgba(2,48,71,.06); }
.comp-detail h2{ margin:.4rem 0 6px; color:var(--navy); display:inline-block; margin-right:10px; }
html[dir="rtl"] .comp-detail h2{ margin-right:0; margin-left:10px; }
.comp-detail h3{ margin:18px 0 6px; color:var(--navy); font-size:1.05rem; }
.comp-detail p{ color:#4a6270; line-height:1.7; margin:6px 0; }
.comp-detail-foot{ margin-top:20px; }
.entries-box{ width:100%; }
.entries-box:not(:empty){ margin-top:10px; padding-top:10px; border-top:1px dashed rgba(2,48,71,.15); display:flex; flex-direction:column; gap:8px; }
.entry-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; background:#f5fafc; border-radius:10px; padding:8px 12px; }
.sm-select{ padding:6px 10px; border:1px solid rgba(2,48,71,.2); border-radius:8px; font-size:.82rem; background:#fff; color:var(--navy); }
.fld-label{ font-size:.82rem; font-weight:700; color:var(--navy); }
.ok-card{ background:#d8f2e2; color:#1c7c4a; border-radius:10px; padding:12px 14px; font-weight:700; margin-top:12px; }

/* council-add: department chip row */
.deptchip-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.deptchip{ background:var(--sky); color:var(--navy); font-weight:700; font-size:.85rem; padding:7px 14px; border-radius:999px; }
#page-council-add .dept-grid{ margin-top:6px; }

/* competition image */
/* Show the FULL competition poster (no crop), but capped to a tidy height and
   centered so the title/status/button below it stay visible. width/height auto
   with max-width/max-height keeps the whole poster at its natural aspect. */
.comp-thumb{ display:block; width:auto; height:auto; max-width:100%; max-height:400px; margin:0 auto 14px; border-radius:12px; background:#f1f5f7; }
.comp-detail-img{ width:100%; max-height:340px; object-fit:cover; border-radius:14px; margin:6px 0 16px; }

/* ONE font for the WHOLE site (Cairo), in BOTH English and Arabic — so Arabic
   content keeps the exact same font and never changes when the UI language is
   switched (and the apparent size stays consistent everywhere). */
body, body *{ font-family:'Cairo','Segoe UI',sans-serif !important; }
html[dir="rtl"] body{ font-weight:500; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .hero h1, html[dir="rtl"] .stepheader h2{ font-weight:800 !important; }

/* pages that now have a section banner header don't need the big top padding */
#page-competitions .portal-wrap, #page-council .portal-wrap{ padding-top:36px; }


/* social media accounts (repeatable) */
.social-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.social-input{ flex:1; padding:12px 14px; border:1px solid rgba(2,48,71,.18); border-radius:10px; font-size:.92rem; }
.social-del{ width:34px; height:34px; min-width:34px; border:1px solid rgba(2,48,71,.2); background:#fff; border-radius:8px; font-size:1.1rem; color:#b33b3b; line-height:1; }

/* ============================================================
   Competition flow + detail two-column + admin analytics + home popup
   ============================================================ */
/* Competitor wizard: hide the academic & skills stepper dots (combined page) */
html.flow-competition .stepper .st[data-step="2"],
html.flow-competition .stepper .st[data-step="3"]{ display:none; }

/* Competition detail — image on the right, text on the left */
.comp-detail-2col{ display:flex; gap:24px; align-items:flex-start; background:#fff; border:1px solid rgba(2,48,71,.10); border-radius:16px; padding:26px; margin-top:16px; box-shadow:0 8px 26px rgba(2,48,71,.06); }
html[dir="rtl"] .comp-detail-2col{ flex-direction:row-reverse; }
.cd-text{ flex:1.15; min-width:0; }
.cd-media{ flex:.85; min-width:0; }
.cd-text h2{ margin:.2rem 0 6px; color:var(--navy); display:inline-block; margin-inline-end:10px; }
.cd-text h3{ margin:16px 0 6px; color:var(--navy); font-size:1.05rem; }
.cd-text p{ color:#4a6270; line-height:1.7; margin:6px 0; }
.cd-media img{ width:100%; object-fit:cover; border-radius:14px; box-shadow:0 8px 22px rgba(2,48,71,.10); }
.cd-media .comp-noimg{ width:100%; aspect-ratio:4/3; border-radius:14px; background:linear-gradient(135deg,#8ECAE6,#219EBC); display:flex; align-items:center; justify-content:center; color:#fff; font-size:2.4rem; }
.cd-foot{ margin-top:20px; }
.comp-msg{ display:inline-block; background:#fff4d6; color:#8a6d1a; border:1px solid #f3dc9b; padding:10px 16px; border-radius:10px; font-weight:700; }
.comp-msg.closed{ background:#fde3e3; color:#9c3232; border-color:#f3bdbd; }
@media (max-width:760px){ .comp-detail-2col, html[dir="rtl"] .comp-detail-2col{ flex-direction:column; } .cd-media{ order:-1; width:100%; } }

/* Admin overview — attractive stat tiles */
.stat-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:8px; }
.tile{ border-radius:16px; padding:18px 18px 16px; color:#fff; position:relative; overflow:hidden; box-shadow:0 10px 26px rgba(2,48,71,.12); }
.tile b{ font-size:1.9rem; font-weight:800; line-height:1; display:block; }
.tile span{ display:block; margin-top:6px; font-size:.82rem; opacity:.95; font-weight:600; }
.tile .ti{ position:absolute; inset-inline-end:12px; top:12px; opacity:.28; }
.tile .ti svg{ width:34px; height:34px; }
.tile.t1{ background:linear-gradient(135deg,#219EBC,#126782); }
.tile.t2{ background:linear-gradient(135deg,#2a9d63,#1c7c4a); }
.tile.t3{ background:linear-gradient(135deg,#FB8500,#e36414); }
.tile.t4{ background:linear-gradient(135deg,#8E5079,#6d3a5c); }
.tile.t5{ background:linear-gradient(135deg,#3d5a80,#293f5c); }
.tile.t6{ background:linear-gradient(135deg,#FFB703,#e6960a); }

/* Admin per-competition analytics */
.comp-analytics{ background:#f5fafc; border:1px solid rgba(2,48,71,.10); border-radius:12px; padding:14px; margin-top:10px; }
.cc-charts{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:8px; }
.cc-mini{ flex:1; min-width:180px; text-align:center; }
.cc-mini h5{ margin:0 0 6px; color:var(--navy); font-size:.85rem; }
.mini-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:10px; margin-bottom:12px; }
.mini-tile{ background:#fff; border:1px solid rgba(2,48,71,.10); border-radius:10px; padding:10px; text-align:center; }
.mini-tile b{ display:block; font-size:1.3rem; color:var(--navy); font-weight:800; }
.mini-tile span{ font-size:.72rem; color:#5a7480; }
.entry-name-btn{ background:none; border:none; padding:0; color:var(--navy); font-weight:700; cursor:pointer; text-align:start; text-decoration:underline dotted; }
.export-row{ display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 14px; }

/* Home featured announcement popup */
.home-pop-scrim{ position:fixed; inset:0; background:rgba(2,39,51,.55); display:flex; align-items:center; justify-content:center; z-index:120; padding:20px; animation:popfade .3s ease; }
@keyframes popfade{ from{opacity:0} to{opacity:1} }
@keyframes poprise{ from{opacity:0; transform:translateY(30px) scale(.96)} to{opacity:1; transform:none} }
.home-pop{ background:#fff; border-radius:18px; max-width:440px; width:100%; max-height:92vh; overflow-y:auto; box-shadow:0 24px 60px rgba(2,48,71,.35); animation:poprise .4s cubic-bezier(.2,.9,.3,1.2); position:relative; }
.home-pop .hp-badge{ position:absolute; top:14px; inset-inline-start:14px; background:var(--amber); color:var(--navy); font-weight:800; font-size:.72rem; padding:5px 12px; border-radius:999px; z-index:2; animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.08) } }
.home-pop .hp-close{ position:absolute; top:12px; inset-inline-end:12px; width:32px; height:32px; border:none; border-radius:50%; background:rgba(0,0,0,.4); color:#fff; font-size:1.2rem; cursor:pointer; z-index:2; }
/* Full announcement poster (no crop): centered image capped to the viewport so
   the whole poster shows and the title/buttons below stay visible. */
.home-pop .hp-img{ display:block; width:auto; height:auto; max-width:100%; max-height:62vh; margin:0 auto; background:#eef3f6; }
.home-pop .hp-img-empty{ height:170px; width:100%; background:#219EBC; }
/* Announcement popup: ONE fixed font (Cairo), a fixed direction (RTL) and
   centered alignment — so the text side and the button order never change with
   the site language (English/LTR or Arabic/RTL). */
.home-pop, .home-pop *{ font-family:'Cairo','Segoe UI',sans-serif !important; direction:rtl !important; }
.home-pop .hp-body{ padding:20px 22px 24px; text-align:center !important; }
.home-pop .hp-body h3{ margin:0 0 8px; color:var(--navy); font-size:1.25rem !important; font-weight:800 !important; text-align:center !important; }
.home-pop .hp-body p{ margin:0 0 16px; color:#4a6270; font-size:.92rem !important; font-weight:500 !important; line-height:1.6; max-height:120px; overflow:hidden; text-align:center !important; }
.home-pop .hp-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center !important; }
.home-pop .hp-actions button{ font-weight:700 !important; font-size:.95rem !important; }

/* admin: analytics scope bar + registrations export picker */
.ana-scope{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
.ana-scope-lbl{ font-weight:700; color:var(--navy); font-size:.9rem; }
.reg-export{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.reg-bulk{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
#adminTable .reg-check{ width:16px; height:16px; cursor:pointer; }
.hp-dots{ display:flex; gap:6px; justify-content:center; margin-top:14px; }
.hp-dot{ width:8px; height:8px; border-radius:50%; background:#cdd9e0; cursor:pointer; transition:all .2s; }
.hp-dot.on{ background:var(--teal); width:22px; border-radius:5px; }

/* ============================================================
   Arabic typography — clearer, larger, and better spaced
   ============================================================ */
html[dir="rtl"] body{ font-size:1.05rem; line-height:1.9; font-weight:500; }
html[dir="rtl"] p, html[dir="rtl"] label, html[dir="rtl"] .stepsub,
html[dir="rtl"] .portal-sub, html[dir="rtl"] .info-card p, html[dir="rtl"] .subtitle,
html[dir="rtl"] .rbac-sub, html[dir="rtl"] .cd-text p{ font-size:1.03rem; line-height:1.9; }
html[dir="rtl"] .hero p.lead{ font-size:1.32rem; line-height:2.05; font-family:'Cairo',sans-serif !important; }
html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea{ font-size:1.02rem; }
html[dir="rtl"] .navlinks a{ font-size:1.03rem; }
html[dir="rtl"] .field label, html[dir="rtl"] .stephead{ font-weight:700; }
html[dir="rtl"] .btn-primary, html[dir="rtl"] .btn-teal, html[dir="rtl"] .btn-outline, html[dir="rtl"] .pill-btn{ font-size:1.02rem; font-weight:700; }
html[dir="rtl"] .stepheader .sh-panel h2{ font-size:2.05rem; }
html[dir="rtl"] .info-card h3, html[dir="rtl"] .council-card h3{ font-size:1.14rem; }

/* ---- Competition eligibility / level-day admin controls + choose page ---- */
.day-picker{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px; }
.day-chk{ display:inline-flex; align-items:center; gap:6px; font-size:.9rem; color:#2a3f49; background:#f1f5f7; border:1px solid #dce6ea; border-radius:8px; padding:6px 10px; cursor:pointer; }
.day-chk input{ width:15px; height:15px; cursor:pointer; }
.reg-leveldar .chips{ display:flex; flex-wrap:wrap; gap:6px; }

/* ---- Admin calendar date picker (boys/girls dates) ---- */
.date-picker{ margin:4px 0 12px; }
.date-add{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.date-input{ padding:8px 10px; border:1px solid #dce6ea; border-radius:8px; font:inherit; }
.date-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.date-chip{ display:inline-flex; align-items:center; gap:6px; background:#e8f4f8; border:1px solid #bfe0ea; color:#15586b; border-radius:16px; padding:5px 10px; font-size:.86rem; }
.date-chip button{ border:none; background:#cfe6ee; color:#15586b; width:18px; height:18px; border-radius:50%; cursor:pointer; line-height:1; font-size:.95rem; }
.date-chip button:hover{ background:#b23b57; color:#fff; }

/* Locked date message (student's day hasn't arrived yet) */
.note-box.locked{ border-left-color:#d9822b; background:#fff6ec; color:#9a5a12; }
html[dir="rtl"] .note-box.locked{ border-left:none; border-right:4px solid #d9822b; }

/* "Choose" done screen — join + home buttons, centered and aligned */
.choose-actions{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:20px; }
.choose-actions > div, .choose-actions > button, .choose-actions .choose-join{ width:100%; max-width:340px; }
.choose-actions .choose-join{ display:block; text-align:center; text-decoration:none; }
.choose-actions > button{ display:block; }