/* Panel shell — colours from designs/brand/admin.md and tokens.md.
   The UniQAIDAR fonts are not in the repo yet; system fonts stand in. */
:root {
  --bar: #3A2F23;
  --surface: #FFFCF5;
  --page: #F3EEE4;
  --line: #E6DFD0;
  --text: #382D21;
  --muted: #775F46;
  --accent: #E0A526;
  --primary: #7A9A4F;
  --danger: #B51A12;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 15px/1.6 "Noto Sans Arabic", Tahoma, "Segoe UI", sans-serif;
}
.topbar {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  min-height: 54px; padding: 0 30px; background: var(--bar); color: #fff;
}
.brand { font-weight: 700; }
.brand small { font-weight: 400; opacity: .75; margin-inline-start: 6px; }
.sections { display: flex; gap: 18px; flex-wrap: wrap; }
.section { color: #fff; opacity: .55; text-decoration: none; }
.section::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--dot, transparent); margin-inline-end: 6px;
}
.section.active { opacity: 1; font-weight: 700; }
.who { margin-inline-start: auto; display: flex; gap: 10px; align-items: center; opacity: .9; }
.who form { margin: 0; }
.link { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.subbar { min-height: 44px; padding: 0 30px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.tab.active { font-weight: 700; border-bottom: 2px solid var(--accent); padding-bottom: 4px; }
.page { padding: 30px; }
h1 { font-size: 28px; margin: 0 0 4px; }
.lead { font-size: 13.5px; color: var(--muted); margin: 0 0 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.stat { border-top: 3px solid var(--accent); display: flex; flex-direction: column; }
.stat strong { font-size: 32px; }
.login { max-width: 380px; margin: 8vh auto; display: flex; flex-direction: column; gap: 12px; }
.login label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.login input { padding: 10px 12px; border: 1px solid #D8CDB8; border-radius: 10px; font: inherit; }
.primary { background: var(--primary); color: #fff; border: 0; border-radius: 10px; padding: 11px; font: inherit; font-weight: 700; cursor: pointer; }
.error { color: var(--danger); margin: 0; }
@media (max-width: 640px) {
  .topbar, .subbar, .page { padding-inline: 16px; }
}