@font-face{font-family:'Alexandria';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/alexandria-ara-300-800.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/alexandria-lat-300-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plex-ara-400.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plex-lat-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plex-ara-500.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plex-lat-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plex-ara-600.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plex-lat-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/plex-ara-700.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/plex-lat-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ==========================================================================
   Career Forum 2027 design system (shared by public site + admin).
   Brand: KAU x Nitaq Al-Amal. Navy -> teal -> emerald, taken from the proposal deck.
   Shape rule: buttons & chips = pill; cards = 20px; inputs = 12px; media = arch (top pill) or 20px.
   ========================================================================== */
:root {
  --font-display: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'Alexandria', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  --navy-950: #09092e; --navy-900: #111144; --navy-800: #1a1a56; --navy-700: #29296b;
  --teal-900: #151548; --teal-800: #20205c; --teal-700: #323276;
  --emerald-700: #29296b; --emerald-600: #34347d; --emerald-500: #485994; --emerald-400: #adbce4; --emerald-300: #c8d3ee;

  --radius-card: 20px; --radius-input: 12px; --radius-pill: 999px;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur: .6s;

  /* light (default) */
  --bg: #f5f6fb; --bg-2: #e9edf7; --surface: #ffffff; --surface-2: #f7f8fc;
  --line: rgb(17 17 68 / .10); --line-strong: rgb(17 17 68 / .2);
  --text: #111144; --text-2: #46465f; --text-3: #67677d;
  --accent: #29296b; --accent-hover: #1c1c55; --on-accent: #ffffff; --accent-soft: #e8edf8; --accent-text: #1c1c55;
  --focus: #485994;
  --danger: #b42318; --danger-soft: #fdecea; --warning: #7a5000; --warning-soft: #fff3d1; --info: #1d4f91; --info-soft: #e7f0fb;
  --shadow-1: 0 1px 2px rgb(17 17 68 / .06), 0 10px 30px -14px rgb(17 17 68 / .22);
  --shadow-2: 0 2px 8px rgb(17 17 68 / .08), 0 30px 60px -28px rgb(17 17 68 / .38);
  --glass: rgb(255 255 255 / .72);
  --hero-ink: #111144;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #09092e; --bg-2: #0d0d39; --surface: #111144; --surface-2: #1a1a56;
  --line: rgb(255 255 255 / .09); --line-strong: rgb(255 255 255 / .18);
  --text: #edf0f8; --text-2: #bdc7df; --text-3: #a5b1cc;
  --accent: #adbce4; --accent-hover: #c6d3f2; --on-accent: #111144; --accent-soft: rgb(111 131 191 / .14); --accent-text: #c1cfed;
  --focus: #c6d3f2;
  --danger: #ff9b91; --danger-soft: rgb(255 120 110 / .13); --warning: #ffd27a; --warning-soft: rgb(255 207 107 / .12); --info: #9cc3ff; --info-soft: rgb(120 170 255 / .12);
  --shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 12px 30px -14px rgb(0 0 0 / .6);
  --shadow-2: 0 2px 8px rgb(0 0 0 / .35), 0 30px 60px -28px rgb(0 0 0 / .7);
  --glass: rgb(10 22 40 / .66);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09092e; --bg-2: #0d0d39; --surface: #111144; --surface-2: #1a1a56;
    --line: rgb(255 255 255 / .09); --line-strong: rgb(255 255 255 / .18);
    --text: #edf0f8; --text-2: #bdc7df; --text-3: #a5b1cc;
    --accent: #adbce4; --accent-hover: #c6d3f2; --on-accent: #111144; --accent-soft: rgb(111 131 191 / .14); --accent-text: #c1cfed;
    --focus: #c6d3f2;
    --danger: #ff9b91; --danger-soft: rgb(255 120 110 / .13); --warning: #ffd27a; --warning-soft: rgb(255 207 107 / .12); --info: #9cc3ff; --info-soft: rgb(120 170 255 / .12);
    --shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 12px 30px -14px rgb(0 0 0 / .6);
    --shadow-2: 0 2px 8px rgb(0 0 0 / .35), 0 30px 60px -28px rgb(0 0 0 / .7);
    --glass: rgb(10 22 40 / .66);
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text);
  font: 400 1.0625rem/1.8 var(--font-body); font-synthesis: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums;
}
html[lang="en"] body { font-size: 1rem; line-height: 1.65; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.3; margin: 0; letter-spacing: 0; text-wrap: balance; }
html[lang="en"] :is(h1, h2, h3) { letter-spacing: -0.02em; line-height: 1.12; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .2em; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--emerald-400) 35%, transparent); }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
[dir="rtl"] .icon.flip-rtl { transform: scaleX(-1); }
.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.container { width: min(100% - 32px, 1240px); margin-inline: auto; }
@media (min-width: 768px) { .container { width: min(100% - 64px, 1240px); } }
.skip-link { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: var(--radius-pill); transition: top .2s; }
.skip-link:focus { top: 12px; }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--surface); --btn-fg: var(--text); --btn-bd: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; white-space: nowrap;
  min-height: 48px; padding: 0 1.4em; border-radius: var(--radius-pill); border: 1px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none; cursor: pointer;
  transition: transform .35s var(--ease-out), background-color .25s, border-color .25s, box-shadow .35s var(--ease-out), color .25s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:hover { border-color: color-mix(in srgb, var(--btn-bd) 60%, var(--text)); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: transparent; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-primary:hover { --btn-bg: var(--accent-hover); box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn-ghost { --btn-bg: transparent; --btn-bd: transparent; }
.btn-ghost:hover { --btn-bg: color-mix(in srgb, var(--text) 6%, transparent); }
.btn-danger { --btn-bg: var(--danger-soft); --btn-fg: var(--danger); --btn-bd: transparent; }
.btn-sm { min-height: 38px; padding: 0 1em; font-size: .92rem; }
.btn-lg { min-height: 56px; padding: 0 1.8em; font-size: 1.06rem; }
.btn-icon { width: 44px; min-height: 44px; padding: 0; }
.btn .icon { width: 1.15em; height: 1.15em; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: auto 22% 45%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--btn-fg), transparent) 0 0 / 50% 100% no-repeat;
  animation: btn-load 1s var(--ease-in-out) infinite;
}
@keyframes btn-load { from { background-position: -50% 0; } to { background-position: 150% 0; } }

/* ---------- forms ---------- */
.field { display: grid; gap: 8px; min-width: 0; }
.field > label, .field .label { font-weight: 600; font-size: .95rem; color: var(--text); }
.field .req { color: var(--danger); margin-inline-start: 2px; }
.hint { font-size: .86rem; color: var(--text-3); line-height: 1.6; }
.field-error { font-size: .86rem; color: var(--danger); min-height: 0; }
.input, select.input, textarea.input {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: var(--radius-input);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  transition: border-color .2s, box-shadow .25s var(--ease-out), background-color .2s; appearance: none; -webkit-appearance: none;
}
textarea.input { min-height: 120px; resize: vertical; line-height: 1.7; }
.input::placeholder { color: var(--text-3); opacity: .85; }
.input:hover { border-color: color-mix(in srgb, var(--line-strong) 50%, var(--text)); }
.input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 22%, transparent); }
.input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
select.input {
  padding-inline-end: 44px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-size: 6px 6px; background-repeat: no-repeat;
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
}
[dir="rtl"] select.input { background-position: 22px 50%, 16px 50%; }
input[type="tel"].input, input[type="email"].input { direction: ltr; text-align: start; }
[dir="rtl"] input[type="tel"].input, [dir="rtl"] input[type="email"].input { text-align: right; }

/* choice chips (checkbox/radio) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 8px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); font-weight: 500; font-size: .95rem; line-height: 1.3;
  transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--ease-out);
}
.chip span::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex: none;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.chip input[type="checkbox"] + span::before { border-radius: 5px; }
.chip input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.chip input:checked + span::before { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }
.chip input:focus-visible + span { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.chip input:active + span { transform: scale(.97); }

.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: .95rem; line-height: 1.7; color: var(--text-2); }
.check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 2px 0 0; flex: none; border-radius: 7px; border: 1.5px solid var(--line-strong); background: var(--surface); display: grid; place-content: center; cursor: pointer; transition: background-color .2s, border-color .2s; }
.check input::after { content: ""; width: 11px; height: 6px; border: solid var(--on-accent); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .25s var(--ease-out); }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-1); }
.badge { display: inline-flex; align-items: center; gap: .4em; padding: 3px 10px; border-radius: var(--radius-pill); font-size: .8rem; font-weight: 600; line-height: 1.6; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-2); }
.badge-ok { background: var(--accent-soft); color: var(--accent-text); }
.badge-warn { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--info-soft); color: var(--text); font-size: .95rem; line-height: 1.7; }
.notice.warn { background: var(--warning-soft); }
.notice.danger { background: var(--danger-soft); }
.notice.ok { background: var(--accent-soft); }
.notice .icon { margin-top: 3px; }

.toast-region { position: fixed; inset-inline: 0; bottom: 20px; z-index: 90; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding-inline: 16px; }
.toast { pointer-events: auto; max-width: 520px; padding: 12px 18px; border-radius: 14px; background: var(--navy-900); color: #edf0f8; box-shadow: var(--shadow-2); font-size: .95rem; animation: toast-in .45s var(--ease-out); }
.toast.error { background: #5b1410; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}