/* Sheriff Portal — dark cinematic theme, CSS variables driven (editable via /admin/branding) */
:root {
  --sp-bg: #0b0d10;
  --sp-accent: #f97316;
  --sp-card: #15181d;
  --sp-text: #f4f4f5;
  --sp-border: rgba(255, 255, 255, 0.1);
  --sp-radius: 1rem;
  --sp-font: "Tajawal", "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --sp-overlay: 0.72;
  /* A few more tokens layered on TOP of the identity above (never replacing
     it) so the rest of this file has one place to tune shadow depth, the
     smaller radius used on compact controls (badges/buttons/inputs), and the
     focus ring color — same accent, just alpha'd for a visible-but-quiet
     outline instead of the browser's default blue. */
  --sp-radius-sm: 0.6rem;
  --sp-shadow-sm: 0 6px 16px rgba(0,0,0,0.28);
  --sp-shadow-md: 0 10px 30px rgba(0,0,0,0.35);
  --sp-shadow-lg: 0 20px 44px rgba(0,0,0,0.5);
  --sp-focus-ring: 0 0 0 3px rgba(249,115,22,0.35);
  /* A fixed 6-color palette so the wing/certificate grids read as varied and
     colorful instead of every card being the same accent tint — each card
     gets one of these (deterministic, by id — see hueClass() in public.ts),
     never a random one that changes on reload. */
  --hue-a: #f97316; /* برتقالي — نفس لون الهوية الأساسي */
  --hue-b: #3b82f6; /* أزرق */
  --hue-c: #a855f7; /* بنفسجي */
  --hue-d: #22c55e; /* أخضر */
  --hue-e: #ec4899; /* وردي */
  --hue-f: #eab308; /* ذهبي */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
/* Every interactive element gets ONE consistent, visible focus treatment
   (keyboard navigation, not just mouse hover) instead of relying on each
   browser's own default outline — a big part of what makes a UI read as
   "professional" rather than assembled ad hoc. :focus-visible so a mouse
   click doesn't show a ring, only actual keyboard/assistive navigation. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--sp-focus-ring);
  border-radius: 0.4rem;
}
/* Respect the OS-level "reduce motion" preference — kills the squad-title
   glow/blink loops and the final-warning blink, and drops hover/transition
   animation to an instant state change. Nothing here is load-bearing
   information (color/badge state is still shown), so turning the motion off
   loses nothing but the animation itself. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  background: var(--sp-bg);
  color: var(--sp-text);
  font-family: var(--sp-font);
  line-height: 1.7;
  min-height: 100vh;
  /* Sticky-footer layout: on a short page (few cards, like a single
     certificate) the footer must sit flush at the bottom of the viewport
     instead of floating right after the sparse content — otherwise the
     fixed video background peeks through as a dead gap between the footer
     and the bottom of the screen. main grows to fill the leftover space;
     header/footer keep their natural size. */
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > .site-header, body > .footer { flex: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0 0 0.5rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0 0 0.75rem; color: rgba(244,244,245,0.85); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }
@media (max-width: 480px) {
  /* A slightly tighter side gutter on very narrow phones — 1.25rem on a
     360px screen eats a noticeable slice of the readable width. */
  .wrap { padding: 0 1rem; }
}

/* Site-wide background — the configured video/image plays fixed behind
   every page (home, wings, certificates, admin…), not just one hero
   section. z-index:-1 keeps it behind all normal in-flow content while
   still painting above body's own solid background. Header and footer
   each carry their own opaque background so they stay a clean, readable
   band above the video. */
/* Promote the fixed video/image background to its own GPU compositing layer
   so scrolling a long page (e.g. the "جميع الأفراد" roster on /about) doesn't
   force the browser to repaint the video on every scroll frame — that
   repaint is what shows up as stutter/jank on a long page with a fixed
   background, independent of the video file's own size. */
.site-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #05070a; transform: translateZ(0); will-change: transform; contain: strict; }
.site-bg-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site-bg-iframe-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.site-bg-iframe-wrap iframe { position: absolute; top: 50%; left: 50%; width: 177.78vh; height: 56.25vw; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); border: 0; }
.site-bg-overlay { position: absolute; inset: 0; background: #05070a; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10,12,15,0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sp-border);
}
/* Header is now always TWO fixed rows instead of one flex row that tries to
   fit brand + nav + user-chip together and unpredictably wraps once nav has
   more items than fit (that's the "مو مرتب" bug — nav folding into a cramped
   second line inside its own pill). Row 1 (.bar-top): logo + user chip only,
   always one line. Row 2 (.bar-nav-row): the nav, alone, full width — it can
   now grow ("يقدر يصير طويل") to fit as many sections as needed, or scroll
   horizontally on the rare case it's still too wide, without ever touching
   row 1's layout. */
.site-header .bar-top { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 0 0.6rem; gap: 1rem; }
.site-header .bar-nav-row { padding: 0 0 0.85rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.05rem; }
.brand img, .brand .logo-fallback { width: 40px; height: 40px; border-radius: 0.6rem; }
.brand small { display:block; font-weight:400; color: rgba(244,244,245,0.6); font-size:0.72rem; }
/* Pill-style nav — a filled, rounded "active" tab (instead of a flat tinted
   background) is the single biggest thing that reads as "modern SaaS nav"
   rather than a plain link list. Inactive items stay quiet; only the current
   page gets the solid accent fill + dark text, same contrast pairing the
   accent buttons already use. */
/* flex-wrap: nowrap (was wrap) — adding more sections used to break the pill
   into two cramped internal rows ("ينزل"). Now the pill always stays ONE
   line and simply grows as wide as its items need ("يكبر"); if that's wider
   than the header itself has room for, .bar above wraps the whole pill onto
   its own row rather than letting it fold internally, and on the rare case
   it's still too wide for the viewport it scrolls horizontally instead of
   wrapping (scrollbar hidden below — it's still fully scrollable by touch/
   trackpad/shift+wheel, just visually clean). */
nav.main-nav { display: flex; width: fit-content; gap: 0.3rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; background: rgba(255,255,255,0.03); border: 1px solid var(--sp-border); border-radius: 999px; padding: 0.3rem; max-width: 100%; }
nav.main-nav::-webkit-scrollbar { display: none; }
nav.main-nav a { flex-shrink: 0; }
nav.main-nav a {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 1.05rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600; color: rgba(244,244,245,0.7);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}
nav.main-nav a:hover { color: var(--sp-text); background: rgba(255,255,255,0.06); transform: translateY(-1px); }
nav.main-nav a.active { background: var(--sp-accent); color: #1a1200; box-shadow: 0 4px 14px rgba(249,115,22,0.35); }
nav.main-nav a.active:hover { background: var(--sp-accent); color: #1a1200; transform: translateY(-1px); }
/* Small icon chip before each nav label — echoes the reference design's
   icon-led nav items instead of a plain text list. Sized to sit flush with
   the 0.9rem label text; currentColor so it follows the link's own
   normal/hover/active color automatically. */
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; transition: transform 0.15s ease, opacity 0.15s ease; }
nav.main-nav a.active .nav-icon { opacity: 1; }
nav.main-nav a:hover .nav-icon { transform: scale(1.15) rotate(-6deg); opacity: 1; }
@media (max-width: 900px) {
  /* Below ~900px the pill nav gets tight — drop the icons first and keep
     just the labels before the whole nav disappears entirely at 720px. */
  .nav-icon { display: none; }
}
.user-chip { position: relative; }
/* Native <button> elements get their own UA-default text color (typically
   black) that does NOT reliably inherit from the page just because the body
   sets a light color — same class of bug as the [hidden] CSS-specificity fix
   elsewhere in this file. Without this, the user's name in the top-right
   chip renders unreadably dark against the site's dark background. */
.user-chip-btn { display:flex; align-items:center; gap:0.5rem; background: rgba(255,255,255,0.04); border:1px solid var(--sp-border); padding:0.35rem 0.7rem; border-radius:999px; cursor:pointer; color: var(--sp-text); font-family:inherit; font-size:inherit; }
.user-chip-btn .avatar { width:28px;height:28px;border-radius:50%; background: var(--sp-accent); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.8rem;color:#1a1200; }
.user-chip-menu { position:absolute; inset-inline-end:0; top:calc(100% + 8px); background:var(--sp-card); border:1px solid var(--sp-border); border-radius:0.75rem; min-width:180px; padding:0.4rem; box-shadow:0 12px 30px rgba(0,0,0,0.4); display:none; color: var(--sp-text); }
.user-chip:hover .user-chip-menu, .user-chip:focus-within .user-chip-menu { display:block; }
/* Same fix as .user-chip-btn above: "تسجيل الخروج" is a native <button>, whose
   UA-default text color doesn't reliably follow `color: inherit` in every
   browser/rendering mode. Set the color explicitly (not just inherited) on
   both the menu and its items so this can't silently go dark again. */
.user-chip-menu a, .user-chip-menu button { display:block; width:100%; text-align:right; padding:0.55rem 0.7rem; border-radius:0.5rem; background:none; border:none; color: var(--sp-text); font-family:inherit; font-size:0.9rem; cursor:pointer; }
.user-chip-menu a:hover, .user-chip-menu button:hover { background: rgba(249,115,22,0.1); color: var(--sp-accent); }
.rank-badge { display:inline-block; font-size:0.72rem; padding:0.15rem 0.55rem; border-radius:999px; border:1px solid var(--sp-border); background: rgba(255,255,255,0.04); }

/* Hero — no longer carries its own background; the site-wide .site-bg video
   already shows through it (and the rest of the page) uniformly. Kept as a
   transparent, generously-padded band with a faint texture for depth. */
.hero {
  position: relative; padding: 5rem 0 4rem; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: none;
}
.hero .inner { position: relative; z-index: 2; text-align: center; }
.hero h1 { font-size: clamp(1.8rem, 4vw, 2.9rem); }
.hero p.sub { font-size: 1.05rem; color: rgba(244,244,245,0.7); max-width: 640px; margin: 0.5rem auto 1.5rem; }
.hero-actions { display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap; }

/* Homepage hero only — a soft radial glow behind the title (the wing/cert
   detail heroes reuse .hero without this so they stay understated) plus the
   "نظام حكومي" style badge pill above the title, echoing the entry-gate's
   in-universe framing right on the page itself instead of only in the
   one-time overlay. */
.hero-home::after {
  content:""; position:absolute; left:50%; right:auto; top:-10%; z-index:0; pointer-events:none;
  width:70vw; max-width:900px; height:420px; transform:translateX(-50%);
  background:
    radial-gradient(ellipse 55% 60% at 30% 35%, color-mix(in srgb, var(--hue-b) 16%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 60% at 72% 40%, color-mix(in srgb, var(--hue-c) 14%, transparent), transparent 70%),
    radial-gradient(ellipse at center, rgba(249,115,22,0.16), transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
  animation: hero-glow-drift 14s ease-in-out infinite alternate;
}
/* Slow, subtle multi-color drift behind the homepage title — the "عجيب"
   ask: a bit of life/color behind the hero without turning it into a loud
   animated banner. Reduced-motion users get the static gradient above via
   the global @media (prefers-reduced-motion) rule that freezes animations. */
@keyframes hero-glow-drift {
  0% { transform: translateX(-50%) scale(1) rotate(0deg); }
  100% { transform: translateX(-50%) scale(1.08) rotate(4deg); }
}
.hero-badge {
  position:relative; z-index:2; display:inline-flex; align-items:center; gap:0.5rem;
  background: rgba(249,115,22,0.1); border:1px solid rgba(249,115,22,0.35); color: var(--sp-accent);
  font-size:0.78rem; font-weight:700; padding:0.35rem 1rem; border-radius:999px; margin-bottom:1rem;
}
.hero-badge-dot { width:6px; height:6px; border-radius:50%; background: var(--sp-accent); box-shadow: 0 0 0 3px rgba(249,115,22,0.25); }

/* Buttons */
.btn { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:0.4rem; padding:0.6rem 1.2rem; border-radius:0.65rem; font-weight:700; font-size:0.92rem; border:1px solid transparent; cursor:pointer; font-family:inherit; transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
/* A light diagonal shine that sweeps across a button on hover — cheap (pure
   CSS, one pseudo-element) but it's the single biggest "this button feels
   alive" cue on a primary/outline button. */
.btn::before {
  content:""; position:absolute; inset-block:0; inset-inline-start:-60%; width:40%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg); transition: inset-inline-start 0.5s ease; pointer-events:none;
}
.btn:hover::before { inset-inline-start: 130%; }
.btn-accent { background: var(--sp-accent); color:#1a1200; box-shadow: 0 4px 14px rgba(249,115,22,0.22); }
.btn-accent:hover { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(249,115,22,0.32); }
.btn-outline { background: transparent; border-color: var(--sp-border); color: var(--sp-text); }
.btn-outline:hover { border-color: var(--sp-accent); color: var(--sp-accent); }
.btn-danger { background: #7f1d1d; color:#fff; }
.btn-danger:hover { filter: brightness(1.12); }
.btn-sm { padding:0.35rem 0.7rem; font-size:0.82rem; border-radius:0.5rem; }
.btn[disabled] { opacity:0.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* Sections & cards */
section.section { padding: 3rem 0; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.3rem; gap:1rem; flex-wrap:wrap; }
.section-head h2 { font-size:1.5rem; }
.muted { color: rgba(244,244,245,0.55); font-size:0.9rem; }

.grid { display:grid; gap:1.1rem; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

/* Cards float as frosted glass panels over the site-wide video — translucent
   with a blur so the background stays visible but content stays readable. */
.card {
  background: rgba(21,24,29,0.76); border:1px solid rgba(255,255,255,0.09); border-radius: var(--sp-radius);
  padding: 1.4rem; box-shadow: var(--sp-shadow-md); transition: transform .15s, box-shadow .15s, border-color .15s;
  /* 14px instead of the previous 18px — visually almost identical (the video
     behind it is already blurred by distance/motion) but noticeably cheaper
     to repaint on a page with many stacked cards, which is most admin pages
     and the /about roster. */
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  overflow: hidden;
}
a.card:hover, .card.hoverable:hover { transform: translateY(-4px); box-shadow: var(--sp-shadow-lg), 0 0 0 1px rgba(249,115,22,0.3); border-color: rgba(249,115,22,0.4); }
@media (max-width: 480px) {
  .card { padding: 1.1rem; }
}
.card-icon { width:52px;height:52px;border-radius:0.8rem; background: rgba(249,115,22,0.12); display:flex;align-items:center;justify-content:center; margin-bottom:0.9rem; }
.card h3 { font-size:1.1rem; }
.card .meta-row { display:flex; align-items:center; gap:0.5rem; margin-top:0.8rem; font-size:0.82rem; color:rgba(244,244,245,0.6); }

/* The card's bottom "responsible / status" band — flush to the card's
   edges (cancels the card's own padding) so it reads as a distinct footer
   strip, like a name plate under a portrait. */
.responsible {
  display:flex; align-items:center; gap:0.5rem;
  margin: 1rem -1.4rem -1.4rem; padding: 0.85rem 1.4rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.avatar-sm { width:26px;height:26px;border-radius:50%; background:#2a2e35; display:flex;align-items:center;justify-content:center; font-size:0.7rem; font-weight:700; overflow:hidden; flex-shrink:0; }

/* Wing / certificate showcase cards (used in الأقسام and الشهادات grids) —
   centered, icon-led layout with a status/responsible footer band. */
.wing-card { text-align: center; }
/* "شيل الخلفية مو الوان عبيطه" — the icon/logo circle used to carry a
   random per-card tint (a leftover rainbow palette, see the removed
   hue-a..f system below) that clashed with the real uploaded badge/crest
   images most wings and certificates actually use. Neutral at rest now —
   a plain glass circle that lets the logo's own colors read cleanly — and
   the ONE consistent brand accent (--sp-accent) is what shows up on hover,
   so the whole grid reads as one coherent system instead of a color grab
   bag, while still feeling alive as you browse ("انتراكت حلو والوان منطقية"). */
.wing-card-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.02);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease, background .25s ease;
}
.wing-card:hover .wing-card-icon {
  background: rgba(249,115,22,0.12); border-color: rgba(249,115,22,0.4);
  box-shadow: 0 0 0 8px rgba(249,115,22,0.08);
  transform: scale(1.08);
}
/* A thin gradient cap on every hoverable showcase card — echoes the colored
   left-bar treatment used on the stat tiles/announcements, so the whole
   homepage shares one consistent "accented edge" language instead of plain
   borders on some cards and colored ones on others. */
.card.hoverable { position: relative; }
.card.hoverable::before {
  content:""; position:absolute; inset-inline-start:0; top:0; right:0; height:3px;
  background: linear-gradient(90deg, transparent, var(--sp-accent), transparent);
  opacity:0; transition: opacity .25s ease;
}
.card.hoverable:hover::before { opacity:0.85; }
.wing-card-icon img { width: 34px; height: 34px; object-fit: contain; border-radius: 50%; }
.wing-card h3 { margin-bottom: 0.3rem; }
.wing-card .card-desc { font-size: 0.86rem; color: rgba(244,244,245,0.62); margin: 0 0 0.4rem; }
.wing-card .meta-row { justify-content: center; flex-wrap: wrap; }
.wing-card .responsible { justify-content: center; flex-wrap: wrap; }
.wing-card .responsible strong { font-weight: 700; }

/* Forms */
.form-card { max-width:520px; margin: 2.5rem auto; }
.field { margin-bottom: 1rem; }
.field label { display:block; margin-bottom:0.35rem; font-size:0.88rem; font-weight:700; }
.field .help { font-size:0.78rem; color:rgba(244,244,245,0.5); margin-top:0.3rem; }
input, select, textarea {
  width:100%; background:#0e1013; border:1px solid var(--sp-border); color:var(--sp-text);
  padding:0.6rem 0.75rem; border-radius:var(--sp-radius-sm); font-family:inherit; font-size:0.92rem;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input:hover, select:hover, textarea:hover { border-color: rgba(255,255,255,0.22); }
input:focus, select:focus, textarea:focus { outline:none; border-color: var(--sp-accent); box-shadow: var(--sp-focus-ring); }
input::placeholder, textarea::placeholder { color: rgba(244,244,245,0.35); }
textarea { min-height:100px; resize:vertical; }
.checkbox-row { display:flex; align-items:center; gap:0.5rem; }
.checkbox-row input { width:auto; }
fieldset { border:1px solid var(--sp-border); border-radius:0.6rem; padding:0.8rem; margin:0 0 1rem; }
legend { padding:0 0.4rem; font-size:0.85rem; font-weight:700; }

.alert { padding:0.8rem 1rem; border-radius:0.6rem; margin-bottom:1rem; font-size:0.9rem; border:1px solid var(--sp-border); }
.alert-error { background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,0.4); color:#fca5a5; }
.alert-success { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.4); color:#86efac; }
.alert-info { background: rgba(249,115,22,0.1); border-color: rgba(249,115,22,0.35); color:#fdba74; }

table { width:100%; border-collapse:collapse; font-size:0.9rem; }
th, td { padding:0.6rem 0.7rem; border-bottom:1px solid var(--sp-border); text-align:right; position:relative; transition: background 0.12s ease; }
th { color:rgba(244,244,245,0.6); font-weight:700; font-size:0.8rem; }
tbody tr { transition: background 0.12s ease; }
tbody tr:hover td { background: rgba(249,115,22,0.045); }
/* A thin accent bar that grows in on the first cell of a hovered row —
   small, but it makes a long admin table feel responsive instead of static
   text, without changing row height or layout. */
tbody tr td:first-child::before {
  content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:0;
  background: var(--sp-accent); transition: width 0.15s ease; border-radius:0 3px 3px 0;
}
tbody tr:hover td:first-child::before { width:3px; }
tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x:auto; background:var(--sp-card); border:1px solid var(--sp-border); border-radius:var(--sp-radius); -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width:640px; }
@media (max-width: 480px) {
  th, td { padding:0.5rem 0.55rem; font-size:0.85rem; }
}

.badge { display:inline-flex; align-items:center; padding:0.2rem 0.6rem; border-radius:999px; font-size:0.75rem; font-weight:700; border:1px solid var(--sp-border); white-space:nowrap; transition: transform 0.12s ease; }
.badge:hover { transform: translateY(-1px) scale(1.04); }
.badge-orange { background: rgba(249,115,22,0.15); color:#fb923c; border-color: rgba(249,115,22,0.35); }
.badge-green { background: rgba(34,197,94,0.15); color:#4ade80; border-color: rgba(34,197,94,0.35); }
.badge-red { background: rgba(239,68,68,0.15); color:#f87171; border-color: rgba(239,68,68,0.35); }
.badge-gray { background: rgba(255,255,255,0.07); color:#d4d4d8; }
.badge-blue { background: rgba(59,130,246,0.15); color:#93c5fd; border-color: rgba(59,130,246,0.35); }

/* The final warning/penalty in the 1-10 range (رقم 10) blinks/glows red to
   stand out as the last step before further escalation — see
   warningLevelBadge in admin/personnel.ts and warningLevelLabel in
   account.ts, which add this class only at level 10. */
.badge-final-blink { animation: badge-final-blink 1s ease-in-out infinite; }
@keyframes badge-final-blink {
  0%, 100% { background: rgba(239,68,68,0.18); box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
  50% { background: rgba(239,68,68,0.55); box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}

/* Squad card title highlight (/admin/squads) — the exact color comes from
   the --sq-glow custom property set inline per-squad, so one animation
   covers every color choice instead of one class per color. */
.squad-title-glow {
  animation: squad-title-blink 1.1s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes squad-title-blink {
  0%, 100% { color: var(--sq-glow); text-shadow: 0 0 6px var(--sq-glow); }
  50% { color: var(--sq-glow); text-shadow: 0 0 20px var(--sq-glow), 0 0 6px var(--sq-glow); }
}
.squad-color-swatch { display:inline-block; width:1.1rem; height:1.1rem; border-radius:50%; border:2px solid rgba(255,255,255,0.25); vertical-align:middle; }

.tabs { display:flex; gap:0.3rem; flex-wrap:wrap; border-bottom:1px solid var(--sp-border); margin-bottom:1.3rem; }
.tabs a { padding:0.6rem 0.9rem; font-size:0.88rem; border-bottom:2px solid transparent; color:rgba(244,244,245,0.6); }
.tabs a.active { color: var(--sp-accent); border-color: var(--sp-accent); }

.admin-layout { display:grid; grid-template-columns: 230px 1fr; gap:1.5rem; align-items:start; }
.admin-side { position:sticky; top:80px; background:var(--sp-card); border:1px solid var(--sp-border); border-radius:var(--sp-radius); padding:0.7rem; }
.admin-side a { display:block; padding:0.55rem 0.7rem; border-radius:0.5rem; font-size:0.88rem; color:rgba(244,244,245,0.75); margin-bottom:0.15rem; border-inline-start:2px solid transparent; transition: background .12s, color .12s, border-color .12s, transform .12s, padding-inline-start .12s; }
.admin-side a:hover, .admin-side a.active { background: rgba(249,115,22,0.12); color: var(--sp-accent); padding-inline-start:0.95rem; }
.admin-side a.active { border-inline-start-color: var(--sp-accent); font-weight:700; }
.admin-side .grp { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; color:rgba(244,244,245,0.35); padding:0.7rem 0.7rem 0.2rem; }
@media (max-width: 860px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-side { position:static; display:flex; flex-wrap:wrap; gap:0.2rem; }
  .admin-side .grp { display:none; }
}

.stat-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.stat-card { background:var(--sp-card); border:1px solid var(--sp-border); border-radius:var(--sp-radius); padding:1rem; position:relative; overflow:hidden; transition: border-color .15s, transform .15s; }
.stat-card::before { content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px; background:var(--sp-accent); opacity:0.7; }
.stat-card:hover { border-color: rgba(249,115,22,0.35); transform: translateY(-2px); }
.stat-card .num { font-size:1.8rem; font-weight:800; color: var(--sp-accent); }
.stat-card .lbl { font-size:0.82rem; color:rgba(244,244,245,0.6); }

.footer {
  border-top:1px solid var(--sp-border); padding:2rem 0; margin-top:3rem; text-align:center; font-size:0.85rem; color:rgba(244,244,245,0.5);
  background: rgba(10,12,15,0.92); backdrop-filter: blur(14px);
}
.footer a { color: var(--sp-accent); }

.toolbar { display:flex; gap:0.6rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; }
.toolbar input, .toolbar select { width:auto; min-width:160px; }
.pagination { display:flex; gap:0.4rem; margin-top:1rem; justify-content:center; }
.pagination a { padding:0.4rem 0.75rem; border:1px solid var(--sp-border); border-radius:0.5rem; font-size:0.85rem; }
.pagination a.active { background: var(--sp-accent); color:#1a1200; border-color:transparent; }

.avatar-lg { width:88px; height:88px; border-radius:1rem; background:#2a2e35; display:flex;align-items:center;justify-content:center; font-size:1.6rem; font-weight:800; overflow:hidden; flex-shrink:0; }
.profile-head { display:flex; gap:1.2rem; align-items:center; margin-bottom:1.5rem; flex-wrap:wrap; }
/* Self-service profile photo upload — a small round camera button pinned to
   the bottom-inline-end corner of the avatar, opening a hidden file input
   that auto-submits its own form on selection (see account.ts). */
.avatar-lg-wrap { position:relative; flex-shrink:0; }
.avatar-upload-form { position:absolute; inset:0; pointer-events:none; }
.avatar-upload-btn {
  position:absolute; bottom:-6px; inset-inline-end:-6px; width:30px; height:30px;
  border-radius:50%; background:var(--sp-accent); color:#1a1200; border:2px solid var(--sp-bg);
  display:flex; align-items:center; justify-content:center; font-size:0.9rem; line-height:1;
  cursor:pointer; pointer-events:auto; box-shadow:0 4px 10px rgba(0,0,0,0.4); transition:transform .12s;
}
.avatar-upload-btn:hover { transform:scale(1.08); }
.kv { display:grid; grid-template-columns: 140px 1fr; gap:0.4rem 1rem; font-size:0.9rem; }
.kv dt { color:rgba(244,244,245,0.5); }
.kv dd { margin:0; }

.color-row { display:flex; align-items:center; gap:0.6rem; }
.color-row input[type=color] { width:44px; height:38px; padding:2px; }
.swatch { width:20px;height:20px;border-radius:4px; border:1px solid var(--sp-border); display:inline-block; vertical-align:middle; }

/* Wing detail hero — same cinematic hero treatment as the homepage (video/
   image background from الإعدادات), tuned for a single department: icon
   badge, name, required-rank pill, short blurb, and a prominent تقديم CTA. */
.wing-hero { padding: 4.5rem 0 3.5rem; }
.wing-hero-icon {
  width: 86px; height: 86px; border-radius: 1.3rem; margin: 0 auto 1.3rem;
  display: flex; align-items: center; justify-content: center; font-size: 2.3rem;
  background: rgba(249,115,22,0.14); border: 1px solid rgba(249,115,22,0.4);
  box-shadow: 0 10px 28px rgba(249,115,22,0.18);
}
.wing-hero-icon img { width: 50px; height: 50px; object-fit: contain; }
.wing-hero-meta { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.btn-lg { padding: 0.9rem 2.4rem; font-size: 1.08rem; border-radius: 0.85rem; box-shadow: 0 10px 26px rgba(249,115,22,0.28); }
.btn-lg:hover { box-shadow: 0 12px 32px rgba(249,115,22,0.38); }

.wing-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; align-items: start; }
.staff-list { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 0.9rem; }
.staff-row { display: flex; align-items: center; gap: 0.65rem; }
.staff-row span:first-of-type { font-size: 0.92rem; }
.staff-row .badge { margin-inline-start: auto; }

@media (max-width: 720px) {
  nav.main-nav { display:none; }
  .hero { padding: 3.2rem 0 2.4rem; }
  .wing-hero { padding: 3rem 0 2.2rem; }
  .grid { gap: 0.85rem; }
  section.section { padding: 2.2rem 0; }
  .profile-head { gap: 0.8rem; }
}

/* Field-exam question bank (/admin/field-exams/:wingId) — a click-to-expand
   accordion instead of a plain table, so a trainer can keep the question
   list compact and only open the one they're checking mid-exam. */
.qa-list { display:flex; flex-direction:column; gap:0.6rem; margin-bottom:1rem; }
.qa-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--sp-border);
  border-radius: 0.85rem;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.qa-card:hover { border-color: rgba(249,115,22,0.35); }
.qa-card[open] { border-color: rgba(249,115,22,0.5); background: rgba(249,115,22,0.03); }
.qa-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
}
.qa-summary::-webkit-details-marker { display: none; }
.qa-num {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: rgba(249,115,22,0.14);
  color: var(--sp-accent);
  font-size: 0.82rem;
  font-weight: 800;
}
.qa-summary-text { flex: 1; }
.qa-chevron {
  flex-shrink: 0;
  color: rgba(244,244,245,0.45);
  font-size: 1rem;
  transform: rotate(0deg);
  transition: transform 0.18s ease, color 0.15s ease;
}
.qa-card[open] .qa-chevron { transform: rotate(180deg); color: var(--sp-accent); }
.qa-body { padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--sp-border); }
.qa-edit-form { padding-top: 0.9rem; }
.qa-edit-form textarea { resize: vertical; }
.qa-toolbar { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; }
.qa-add-form { display: flex; gap: 0.5rem; margin-top: 0.4rem; }

/* التعاميم والقرارات الرسمية — a decree-style card: a bold accent bar down
   the reading-start edge (RTL: the right edge) instead of a full colored
   border, so it reads as an official notice pinned to a board rather than
   just another content card. */
.announce-card { border-inline-start: 4px solid var(--sp-accent); padding: 1.6rem 1.8rem; }
.announce-card h3 { font-size: 1.25rem; }
.announce-divider { height:1px; background: linear-gradient(90deg, var(--sp-accent), transparent); opacity:0.4; margin: 0.6rem 0 0.9rem; }
.announce-approved { margin: 0.6rem 0 0; font-weight: 700; color: rgba(244,244,245,0.7); }
.badge-gold { background: linear-gradient(135deg, rgba(250,204,21,0.22), rgba(249,115,22,0.18)); color:#facc15; border-color: rgba(250,204,21,0.45); font-weight:800; }

/* Homepage quick-stats strip — a row of tall, colored-accent tiles right
   under the hero (active personnel / أقسام / شهادات / قيادة), each with its
   own top accent bar so the row reads as one glance-able dashboard rather
   than plain text. Same visual family as .stat-card (admin overview) but
   bigger numerals for a public-facing hero moment. */
.home-stats-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:1rem; }
/* Full colored border (not just a top bar) + a soft matching glow — this is
   the single closest match to the reference design's bordered stat tiles
   (الضباط / ضباط الصف / أفراد الشرطة). Label sits small at the top, the
   number large below it — same reading order as the reference. Still calm:
   one clean border + one soft shadow, no extra noise, so it stays easy on
   the eye at a glance. */
.home-stat-card {
  background: rgba(21,24,29,0.7); border:1.5px solid var(--stat-c, var(--sp-border)); border-radius: var(--sp-radius);
  padding: 1.3rem 1rem; text-align:center; position:relative; overflow:hidden;
  backdrop-filter: blur(10px); box-shadow: var(--sp-shadow-sm), 0 0 0 1px color-mix(in srgb, var(--stat-c, transparent) 14%, transparent);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-stat-card:hover { transform: translateY(-3px); box-shadow: var(--sp-shadow-md), 0 0 24px color-mix(in srgb, var(--stat-c, transparent) 28%, transparent); }
.home-stat-num { font-size:2.1rem; font-weight:800; line-height:1.2; color: var(--stat-c, var(--sp-text)); }
.home-stat-lbl { font-size:0.8rem; font-weight:700; color: rgba(244,244,245,0.65); margin-bottom:0.3rem; }
.home-stat-accent { --stat-c: var(--sp-accent); }
.home-stat-blue { --stat-c: #3b82f6; }
.home-stat-green { --stat-c: #22c55e; }
.home-stat-red { --stat-c: #ef4444; }

/* القيادة العامة homepage preview strip — circular command-staff portraits,
   the first two seats (order_num 1/2) marked with a small crown and a
   gold/silver ring instead of the plain square avatar used everywhere else,
   so the top of the chain of command reads distinctly at a glance. */
.leader-strip { display:flex; flex-wrap:wrap; gap:1.6rem; justify-content:center; }
.leader-chip { display:flex; flex-direction:column; align-items:center; text-align:center; width:150px; transition: transform 0.18s ease; }
.leader-chip:hover { transform: translateY(-4px); }
.leader-avatar-ring { position:relative; padding:4px; border-radius:50%; margin-bottom:0.7rem; transition: box-shadow 0.18s ease, transform 0.18s ease; }
.leader-chip:hover .leader-avatar-ring { transform: scale(1.05); }
.leader-avatar-ring .avatar-lg { width:96px; height:96px; border-radius:50%; }
.leader-rank-0 .leader-avatar-ring { background: linear-gradient(135deg, #facc15, #f97316); box-shadow: 0 0 0 3px rgba(250,204,21,0.15), 0 8px 24px rgba(250,204,21,0.2); }
.leader-rank-1 .leader-avatar-ring { background: linear-gradient(135deg, #cbd5e1, #94a3b8); box-shadow: 0 0 0 3px rgba(203,213,225,0.12), 0 8px 24px rgba(148,163,184,0.18); }
.leader-rank-2 .leader-avatar-ring, .leader-rank-3 .leader-avatar-ring { background: rgba(249,115,22,0.35); }
.leader-name { font-weight:700; font-size:0.95rem; }
.leader-title { font-size:0.78rem; margin-top:0.1rem; }
/* "DEV" — small accent-colored tag under whichever leadership card belongs
   to the site's registered developer (see isDevEntry() in public.ts). */
.leader-dev-tag {
  margin-top:0.35rem; font-size:0.68rem; font-weight:800; letter-spacing:0.06em;
  color: var(--sp-accent); background: rgba(249,115,22,0.12); border:1px solid rgba(249,115,22,0.35);
  padding:0.12rem 0.55rem; border-radius:999px;
}

/* صف القيادة: صندوقان مؤطّران جنب بعض — القيادة (برتقالي) وكرت المطوّر
   (أخضر). الموقع RTL، فأول عنصر بالـDOM يطلع يمينًا: القيادة يمينًا
   والمطوّر يسارًا، مطابقًا للتصميم المرجعي.
   المطوّر بعرض ثابت 290px والقيادة تاخذ الباقي، عشان الكرت ما يتمدد ويطلع
   فاضيًا حوله. وبدون مطوّر، عمود واحد يملأ العرض. */
.command-row { display:grid; grid-template-columns: 1fr 290px; gap:1.1rem; align-items:start; }
.command-row-solo { grid-template-columns: 1fr; }

.command-box { margin:0; padding:1.5rem 1.2rem 1.8rem; border-color: rgba(249,115,22,0.5); }
.command-box-title {
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
  font-size:1.05rem; font-weight:700; color:var(--sp-text); margin-bottom:1.8rem;
}
.command-box-title svg { color: var(--sp-accent); }

/* التاج فوق مقعدَي القائد ونائبه فقط — SVG بعرض ثابت، مو إيموجي */
.leader-crown {
  display:block; width:28px; height:18px; margin:0 auto 0.4rem;
  filter: drop-shadow(0 1px 3px rgba(246,195,67,0.45));
}

/* يوزر الديسكورد: سطر صغير خافت فوق الاسم مباشرة، بالاتجاه اللاتيني */
.leader-discord {
  font-size:0.72rem; color:rgba(244,244,245,0.5); direction:ltr;
  margin-bottom:0.15rem; letter-spacing:0.02em;
}
/* وسم المنصب تحت الاسم — كبسولة برتقالية */
.leader-pill {
  margin-top:0.5rem; font-size:0.72rem; font-weight:700;
  color:#fb923c; background:rgba(249,115,22,0.14); border:1px solid rgba(249,115,22,0.45);
  padding:0.2rem 0.75rem; border-radius:999px;
}

/* ===== كرت مطوّر الموقع ===== */
/* أخضر مقصود: يميّزه عن كل عناصر الموقع البرتقالية فيُقرأ كبطاقة منفصلة عن
   تسلسل القيادة، لا كمقعد ضمنه. والصورة مربعة بزوايا دائرية — مو دائرة —
   لنفس السبب: تفريق بصري فوري. */
.dev-card {
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:1.5rem 1.1rem; margin:0;
  border:1px solid rgba(34,197,94,0.5);
}
.dev-card-label {
  font-size:0.68rem; font-weight:800; letter-spacing:0.13em; text-transform:uppercase;
  color:#4ade80; margin-bottom:1.5rem;
}
.dev-avatar-square { margin-bottom:0.7rem; }
.dev-avatar-square .avatar-lg {
  width:86px; height:86px; border-radius:0.85rem;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.5);
}
.dev-discord {
  display:block; font-size:0.72rem; color:rgba(244,244,245,0.5);
  direction:ltr; text-decoration:none; margin-bottom:0.15rem;
}
a.dev-discord:hover { color:#5865F2; text-decoration:underline; }
.dev-card-name { font-size:1.02rem; font-weight:700; color:var(--sp-text); }
.dev-card-tag {
  margin-top:0.6rem; font-size:0.7rem; font-weight:800; letter-spacing:0.05em;
  color:#4ade80; background:rgba(34,197,94,0.14); border:1px solid rgba(34,197,94,0.45);
  padding:0.2rem 0.75rem; border-radius:0.4rem;
}

@media (max-width: 900px) {
  .command-row { grid-template-columns: 1fr; }
  .dev-card { max-width:320px; margin:0 auto; }
}

/* "خلي النظرة العامة للعساكر نفس حقت الموقع الثاني" — the full personnel
   roster (/about + the homepage's "الأفراد النشطين" mode) as circular
   avatar-photo cards, matching the reference site's "سجل العساكر
   المعتمدين" cards: photo on top, name, then rank + tier badge below —
   same avatar-ring/avatar-lg building blocks the leadership strip above
   already uses, just in a dense auto-fill grid instead of a flex strip. */
.roster-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:0.9rem; }
.roster-card {
  margin:0; padding:1.1rem 0.8rem 0.9rem; text-align:center; display:flex; flex-direction:column;
  align-items:center; text-decoration:none; color:inherit; transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.roster-card:hover { transform: translateY(-4px); }
.roster-avatar-ring {
  padding:3px; border-radius:50%; margin-bottom:0.65rem;
  background: linear-gradient(135deg, var(--sp-accent), var(--hue-b, #3b82f6));
  transition: transform 0.18s ease;
}
.roster-card:hover .roster-avatar-ring { transform: scale(1.06); }
.roster-avatar-ring .avatar-lg { width:72px; height:72px; border-radius:50%; font-size:1.2rem; }
.roster-name { font-weight:700; font-size:0.92rem; margin-bottom:0.4rem; }
.rank-badge-icon { display:inline-flex; align-items:center; gap:0.3rem; }
.rank-icon-img { width:16px; height:auto; max-height:20px; flex-shrink:0; object-fit:contain; }

/* "كسرة لون خفيفة" — the homepage's one configurable showcase section
   (leadership / active personnel / certificates / wings, see home_list_mode)
   gets a faint diagonal color wash behind it instead of sitting on the flat
   page background like every other section — a light break in the
   monotone, not a loud banner. ::before sits behind the content (z-index 0)
   and the wrap is lifted to z-index 1 so text/cards stay unaffected. */
.home-list-section { position: relative; overflow: hidden; }
.home-list-section::before {
  content: ""; position: absolute; inset: -10% -5%; z-index: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(249,115,22,0.07) 0%, transparent 45%, rgba(59,130,246,0.05) 100%);
}
.home-list-section > .wrap { position: relative; z-index: 1; }

/* Scrollbar theming (WebKit/Blink + Firefox's own two-property syntax) — a
   plain OS-default scrollbar is one of the more obvious "this wasn't
   designed" tells on a dark, otherwise fully-themed page. Thin, and the same
   translucent-white the rest of the UI already uses for subtle borders, so
   it recedes instead of competing with the accent color. */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); background-clip: padding-box; }

/* Selection color — default browser blue selection clashes hard with this
   theme's dark background + orange accent; use the accent instead. */
::selection { background: rgba(249,115,22,0.35); color: var(--sp-text); }

/* Small "loading" affordance for actions that trigger a background task
   (bulk DM, sheet sync, etc.) — a plain CSS spinner so no extra asset/JS
   library is needed. Opt-in via class="spinner" on any element. */
.spinner {
  display: inline-block; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25); border-top-color: var(--sp-accent);
  animation: spin 0.7s linear infinite; vertical-align: -0.15em;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ===== رصد غير المفعّلين ===== */
/* شبكة كروت: عرض أدنى 180px لكل كرت وتتمدد لملء السطر — تعرض عشرات
   الأعضاء بلا تمرير أفقي، وتنزل لعمود واحد بالجوال تلقائيًا. */
.unreg-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:1rem; }
.unreg-card { margin:0; padding:1.2rem 0.9rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:0.35rem; }
.unreg-avatar { width:72px; height:72px; border-radius:50%; object-fit:cover; background:#2a2e35; margin-bottom:0.4rem; }
.unreg-name { font-weight:700; font-size:0.98rem; color:var(--sp-text); }
.unreg-user { font-size:0.78rem; color:rgba(244,244,245,0.55); direction:ltr; }
/* الكوبي آيدي: خط ثابت العرض ليسهل قراءته ونسخه، ومسموح تحديده بالماوس */
.unreg-id { font-size:0.72rem; color:rgba(244,244,245,0.4); direction:ltr; font-family:ui-monospace,Consolas,monospace; user-select:all; margin-bottom:0.5rem; }
.unreg-card form { margin:0; width:100%; }
.unreg-card .btn { width:100%; }
.unreg-form-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; }
.unreg-form-head .unreg-avatar { margin:0; }
@media (max-width: 520px) { .unreg-grid { grid-template-columns: 1fr 1fr; } }

/* مسافة بين الهيدر وبداية المحتوى — كانت البطاقات تلتصق بالهيدر في صفحات (نظرة عامة، العمليات...) */
body > main.wrap, body > main.ops-wide { padding-top: 1.5rem; }