:root {
  --ft-primary: var(--primary, #102a43);
  --ft-secondary: var(--secondary, #6b1e3f);
  --ft-gold: #c49a3a;
  --ft-ivory: #f7f3ea;
  --ft-success: #0f6b5a;
  --ft-info: #2563a6;
  --ft-warning: #b7791f;
  --ft-danger: #b42318;
  --ft-text: #172b3a;
  --ft-muted: #5b6b78;
  --ft-bg: #f5f7fa;
  --ft-surface: #fff;
  --ft-border: #dbe4ec;
  --ft-shadow-sm: 0 8px 24px rgba(16,42,67,.07);
  --ft-shadow-md: 0 20px 50px rgba(16,42,67,.12);
  --ft-radius-sm: 12px;
  --ft-radius-md: 18px;
  --ft-radius-lg: 24px;
  --ft-speed: 200ms;
}
html { scroll-behavior: smooth; }
body { background: var(--ft-bg); color: var(--ft-text); }
button, a, input, select, textarea { transition: border-color var(--ft-speed), box-shadow var(--ft-speed), background var(--ft-speed), transform var(--ft-speed); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--ft-gold) 55%, transparent); outline-offset: 2px; }
.app-shell { background: linear-gradient(180deg,#f8fafc 0,#f3f6f9 100%); }
.sidebar { background: linear-gradient(180deg,var(--ft-primary) 0%,#0b2136 100%); box-shadow: -12px 0 36px rgba(15,35,55,.14); }
.brand { min-height: 96px; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand-mark { border: 1px solid rgba(196,154,58,.42); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.sidebar nav { padding: 10px 12px 18px; }
.sidebar-nav-group { margin: 12px 0 4px; }
.sidebar-nav-label { display:block; padding: 7px 13px; color: rgba(255,255,255,.52); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.sidebar nav a { border-radius: 12px; margin: 4px 0; border: 1px solid transparent; }
.sidebar nav a:hover { background: rgba(255,255,255,.08); transform: translateX(-2px); }
.sidebar nav a.active { background: linear-gradient(135deg,rgba(196,154,58,.2),rgba(255,255,255,.1)); border-color: rgba(196,154,58,.32); box-shadow: inset -3px 0 0 var(--ft-gold); }
.topbar { min-height: 72px; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ft-border); box-shadow: 0 8px 25px rgba(16,42,67,.04); }
.topbar-identity strong { color: var(--ft-primary); }
.content { max-width: 1600px; width: 100%; margin-inline: auto; }
.page-header { position: relative; overflow: hidden; padding: 22px 24px; border: 1px solid var(--ft-border); border-radius: var(--ft-radius-md); background: linear-gradient(135deg,#fff 0%,#fbfcfd 72%,color-mix(in srgb,var(--ft-gold) 8%,#fff) 100%); box-shadow: var(--ft-shadow-sm); }
.page-header::before { content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:5px; background: linear-gradient(var(--ft-primary),var(--ft-gold)); }
.page-header h1 { color: var(--ft-primary); letter-spacing:-.02em; }
.page-header p { color: var(--ft-muted); max-width: 760px; }
.eyebrow { color: var(--ft-secondary); font-weight:800; }
.panel, .metric-card, .toolbar, .table-wrap { border: 1px solid var(--ft-border); border-radius: var(--ft-radius-md); background: var(--ft-surface); box-shadow: var(--ft-shadow-sm); }
.panel-head { border-bottom: 1px solid #edf1f5; }
.metric-card { position:relative; overflow:hidden; }
.metric-card::after { content:""; position:absolute; inset-inline-end:-24px; top:-24px; width:80px; height:80px; border-radius:50%; background: color-mix(in srgb,var(--ft-gold) 10%,transparent); }
.metric-icon { background: color-mix(in srgb,var(--ft-primary) 9%,#fff); color:var(--ft-primary); }
.metric-card strong { color:var(--ft-primary); }
.btn { border-radius: 12px; min-height: 42px; font-weight: 800; }
.btn-primary { background: linear-gradient(135deg,var(--ft-primary),color-mix(in srgb,var(--ft-primary) 78%,#284f70)); box-shadow: 0 8px 18px color-mix(in srgb,var(--ft-primary) 20%,transparent); }
.btn-primary:hover { transform: translateY(-1px); }
input,select,textarea { border-radius: 12px; border-color: var(--ft-border); background:#fff; }
input:focus,select:focus,textarea:focus { border-color:var(--ft-primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--ft-primary) 10%,transparent); }
table thead th { background: #f2f6f9; color: var(--ft-primary); border-bottom: 2px solid color-mix(in srgb,var(--ft-primary) 18%,var(--ft-border)); }
table tbody tr:hover { background:#f8fbfd; }
.status { border:1px solid currentColor; font-weight:800; }
.state-box { border:1px dashed color-mix(in srgb,var(--ft-primary) 28%,var(--ft-border)); border-radius:var(--ft-radius-md); background:#fff; }
.modal-backdrop { backdrop-filter: blur(5px); }
.modal-card { border-radius: 22px; border:1px solid var(--ft-border); box-shadow: var(--ft-shadow-md); }

/* بوابة الطالب الأكاديمية */
.student-academic-hero { position:relative; overflow:hidden; display:grid; grid-template-columns: 1.5fr .8fr; gap:24px; padding:30px; border-radius:28px; color:#fff; background: radial-gradient(circle at 15% 10%,rgba(196,154,58,.24),transparent 28%),linear-gradient(135deg,var(--ft-primary),#173e60 62%,var(--ft-secondary)); box-shadow:0 24px 60px rgba(16,42,67,.2); }
.student-academic-hero::after { content:""; position:absolute; width:340px; height:340px; border:1px solid rgba(255,255,255,.12); border-radius:50%; inset-inline-end:-120px; top:-160px; }
.student-hero-content,.student-digital-id { position:relative; z-index:1; }
.student-hero-kicker { display:flex; align-items:center; gap:8px; color:#f2d991; font-weight:800; }
.student-hero-content h1 { margin:10px 0 6px; font-size:clamp(28px,4vw,44px); }
.student-hero-content p { color:rgba(255,255,255,.78); max-width:720px; }
.student-hero-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.student-hero-badges span { padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); }
.student-digital-id { padding:18px; border-radius:20px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(10px); }
.student-id-top { display:flex; align-items:center; gap:14px; }
.student-id-photo { width:82px; height:82px; border-radius:18px; overflow:hidden; display:grid; place-items:center; background:rgba(255,255,255,.12); border:2px solid rgba(242,217,145,.6); }
.student-id-photo img { width:100%; height:100%; object-fit:cover; }
.student-id-number { font-family:monospace; direction:ltr; text-align:right; color:#f8e9b3; }
.training-journey { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin:22px 0; }
.journey-step { position:relative; min-height:104px; padding:14px; border-radius:16px; background:#fff; border:1px solid var(--ft-border); box-shadow:var(--ft-shadow-sm); }
.journey-step b { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#eef3f7; color:var(--ft-muted); }
.journey-step strong { display:block; margin-top:10px; font-size:13px; }
.journey-step span { color:var(--ft-muted); font-size:12px; }
.journey-step.done { border-color:color-mix(in srgb,var(--ft-success) 35%,var(--ft-border)); }
.journey-step.done b { background:var(--ft-success); color:#fff; }
.journey-step.current { border-color:var(--ft-gold); box-shadow:0 10px 30px rgba(196,154,58,.18); }
.journey-step.current b { background:var(--ft-gold); color:#fff; }
.portal-section-title { display:flex; align-items:center; justify-content:space-between; margin:26px 0 12px; }
.portal-section-title h2 { margin:0; color:var(--ft-primary); }
.portal-quick-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.portal-quick-card { padding:18px; border-radius:18px; background:#fff; border:1px solid var(--ft-border); box-shadow:var(--ft-shadow-sm); }
.portal-quick-card svg { color:var(--ft-gold); }
.portal-quick-card span { display:block; color:var(--ft-muted); font-size:13px; margin:8px 0 4px; }
.portal-quick-card strong { color:var(--ft-primary); }
.portal-periods { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.portal-period-card { padding:16px; border-radius:16px; text-align:center; background:#fff; border:1px solid var(--ft-border); }
.portal-period-card b { display:grid; place-items:center; width:36px; height:36px; margin:0 auto 8px; border-radius:50%; background:#edf3f7; color:var(--ft-primary); }
.portal-period-card span { color:var(--ft-muted); font-size:12px; }
.student-portal-layout { gap:20px; }
.student-profile-card { display:none; }

.settings-center { display:grid; grid-template-columns:260px minmax(0,1fr); gap:18px; align-items:start; }
.settings-tabs { position:sticky; top:88px; display:flex; flex-direction:column; align-items:stretch; padding:10px; border:1px solid var(--ft-border); border-radius:18px; background:#fff; box-shadow:var(--ft-shadow-sm); }
.settings-tabs button { justify-content:flex-start; border-radius:12px; min-height:46px; }
.settings-tabs button.active { background:color-mix(in srgb,var(--ft-primary) 10%,#fff); color:var(--ft-primary); box-shadow:inset -3px 0 0 var(--ft-gold); }

@media (max-width: 1100px) {
  .student-academic-hero { grid-template-columns:1fr; }
  .training-journey { grid-template-columns:repeat(3,1fr); }
  .portal-quick-grid { grid-template-columns:repeat(2,1fr); }
  .portal-periods { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 760px) {
  .page-header { padding:18px; }
  .student-academic-hero { padding:22px 18px; border-radius:22px; }
  .training-journey { display:flex; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; }
  .journey-step { min-width:150px; scroll-snap-align:start; }
  .portal-quick-grid { grid-template-columns:1fr 1fr; }
  .portal-periods { grid-template-columns:repeat(2,1fr); }
  .settings-center { grid-template-columns:1fr; }
  .settings-tabs { position:static; flex-direction:row; overflow-x:auto; }
  .settings-tabs button { min-width:max-content; }
}
@media (max-width: 480px) {
  .portal-quick-grid { grid-template-columns:1fr; }
  .student-id-top { align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}