/* ===== هوية بصرية موحدة: صناعي / مؤسسي رزين ===== */
:root {
  --brand-bg: #0e1a27;
  --brand-bg-alt: #14263a;
  --brand-bg-elevated: #1b2f47;
  --brand-accent: #c69a4e;
  --brand-accent-light: #dab671;
  --brand-text: #e9edf2;
  --brand-text-muted: #a9b6c4;
  --brand-border: rgba(255,255,255,0.08);

  --brand-bg-light: #f4f5f7;
  --brand-bg-light-card: #ffffff;
  --brand-text-light: #1c2733;
  --brand-text-light-muted: #5b6b7a;
  --brand-border-light: #e1e5ea;

  --brand-radius: .75rem;
  --brand-shadow: 0 10px 30px rgba(0,0,0,.25);
  --brand-shadow-soft: 0 4px 16px rgba(0,0,0,.12);
}

html, body {height:100%; scroll-behavior:smooth;}
body {
  font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
  background: var(--brand-bg);
  color: var(--brand-text);
  transition: background .5s ease, color .5s ease;
}
body.light-mode {background: var(--brand-bg-light); color: var(--brand-text-light);}

main {flex:1;}

h1, h2, h3, h5 {font-weight:700;}
h1::after, h2::after {
  content:""; display:block; position:absolute; bottom:-10px; right:50%; transform:translateX(50%);
  width:56px; height:3px; border-radius:3px; background: var(--brand-accent);
}
h1, h2 {position:relative;}

/* ---------- Navbar ---------- */
.navbar {
  background: rgba(14,26,39,.92);
  border-bottom: 1px solid var(--brand-border);
  backdrop-filter: blur(6px);
  transition: background .4s ease, box-shadow .4s ease;
}
.navbar.scrolled {box-shadow: 0 4px 20px rgba(0,0,0,.35);}
body.light-mode .navbar {background: rgba(255,255,255,.92); border-bottom-color: var(--brand-border-light);}
body.light-mode .navbar.scrolled {box-shadow: 0 4px 20px rgba(0,0,0,.08);}

.navbar-brand {
  font-size:1.6rem; font-weight:800; letter-spacing:.3px;
  color: var(--brand-text) !important;
}
.navbar-brand span {color: var(--brand-accent);}
body.light-mode .navbar-brand {color: var(--brand-text-light) !important;}

.nav-link {color: var(--brand-text-muted) !important; transition: color .25s ease;}
.nav-link:hover, .nav-link.active {color: var(--brand-accent) !important;}
body.light-mode .nav-link {color: var(--brand-text-light-muted) !important;}
body.light-mode .nav-link:hover, body.light-mode .nav-link.active {color: var(--brand-accent) !important;}

#theme-toggle {border-color: var(--brand-border); color: var(--brand-text);}
body.light-mode #theme-toggle {border-color: var(--brand-border-light); color: var(--brand-text-light);}

/* ---------- Buttons ---------- */
.btn {transition: all .3s ease; border-radius: .55rem;}
.btn-primary {
  background: var(--brand-accent); border-color: var(--brand-accent);
  color:#1a1305; font-weight:700;
  box-shadow: var(--brand-shadow-soft);
}
.btn-primary:hover {
  background: var(--brand-accent-light); border-color: var(--brand-accent-light);
  transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.25);
  color:#1a1305;
}
.btn-success, .btn-warning, .btn-danger, .btn-outline-danger, .btn-outline-light {border-radius:.55rem;}

/* ---------- Cards ---------- */
.card {
  background: var(--brand-bg-elevated);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  color: inherit;
  box-shadow: var(--brand-shadow-soft);
  transition: all .3s ease;
}
body.light-mode .card {
  background: var(--brand-bg-light-card);
  border-color: var(--brand-border-light);
  box-shadow: 0 4px 15px rgba(0,0,0,.06);
}

/* ---------- Footer ---------- */
footer {
  margin-top:auto; background: var(--brand-bg-alt); color: var(--brand-text-muted);
  border-top: 1px solid var(--brand-border);
}
body.light-mode footer {background: #eef0f3; color: var(--brand-text-light-muted); border-top-color: var(--brand-border-light);}

.footer-social a {
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:50%; border:1px solid var(--brand-border); color: var(--brand-text-muted);
  margin-inline:.3rem; text-decoration:none; transition: all .3s ease;
}
.footer-social a:hover {background: var(--brand-accent); border-color: var(--brand-accent); color:#1a1305;}
body.light-mode .footer-social a {border-color: var(--brand-border-light); color: var(--brand-text-light-muted);}
.footer-social i {margin-inline-end:.4rem; color: var(--brand-accent);}

/* ---------- Splash loader ---------- */
#splash-loader {
  position: fixed; inset:0; background: var(--brand-bg); color: var(--brand-accent);
  display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:9999;
  transition:opacity .6s ease, visibility .6s ease;
}
#splash-loader.hidden, #splash-loader.d-none {opacity:0; visibility:hidden;}
.loader-logo {font-size:1.9rem; font-weight:800; margin-bottom:20px; color: var(--brand-text);}
.loader-logo span {color: var(--brand-accent);}
.loader-circle {width:56px; height:56px; border:4px solid rgba(198,154,78,.25); border-top-color: var(--brand-accent); border-radius:50%; animation: spin 1s linear infinite;}
@keyframes spin {to {transform: rotate(360deg);}}

.fade-in {opacity:0; transform:translateY(16px); transition: all .8s ease;}
.fade-in.visible {opacity:1; transform:translateY(0);}