/* ══════════════════════════════════════════════════════════════
   app.css — shell / login / account menu / toolbar / modals
   "DEEP CHARCOAL PRO" — the approved Deep Teal Pro layout with the
   teal/green chrome swapped to a neutral charcoal / near-black, GOLD
   accent kept. Warm off-white canvas, white cards, coloured badges.

   IMPORTANT: theme.css owns the print/gallery tokens (--bg/--ink/
   --green/--gold/--black/--t-*…). This file does NOT redefine any of
   them. Instead it introduces its OWN namespaced palette (--c-*) and
   applies it ONLY to the shell chrome classes below, so the printed
   running-order (#ro-print-doc, styled by ro.css) is untouched.
   The --c-* vars are declared on the shell roots we own (.topbar,
   .login-overlay, .modal-overlay, .account-menu) — never on :root —
   so they cannot leak into #ro-editor-root or the print document.
   ══════════════════════════════════════════════════════════════ */

/* ── shared CHARCOAL-PRO palette (namespaced; shell-scoped) ────────
   Declared on every shell root we style so children can consume them.
   These names (--c-*) do not exist anywhere else in the codebase. */
.topbar,
.login-overlay,
.modal-overlay,
.ros-modal-ov,
.account-menu {
  /* pure-dark chrome (ثمانية-style) */
  --c-base:   #0B0D0F;   /* deepest — bar base */
  --c-primary:#15181B;   /* primary dark */
  --c-mid:    #20242A;   /* mid */
  --c-raise:  #2C3138;   /* raised / hover */
  --c-on:     #F4F5F6;   /* text on dark */
  --c-on-dim: #A6ABB2;   /* muted text on dark */
  --c-hair-d: rgba(255,255,255,0.12); /* hairline on dark */

  /* canvas / surfaces — DARK */
  --c-canvas:  #0E1012;
  --c-canvas2: #0A0C0E;
  --c-card:    #1A1D21;
  --c-inset:   #121519;
  --c-inset2:  #23282E;

  /* ink — light on dark */
  --c-ink:   #ECEEF0;
  --c-ink2:  #C4C9CE;
  --c-ink3:  #949AA1;
  --c-ink4:  #6E747B;

  /* accent — bright ثمانية green (was gold) */
  --c-gold:   #2BD46A;
  --c-gold-d: #1FB257;
  --c-gold-soft: rgba(43,212,106,0.15);
  --c-gold-line: rgba(43,212,106,0.42);
  --c-gold-ink: #05140B;   /* dark text on green */

  /* lines on dark */
  --c-line:   rgba(255,255,255,0.10);
  --c-line2:  rgba(255,255,255,0.16);
  --c-line-card: rgba(255,255,255,0.08);

  /* status */
  --c-live:   #F2685B;
  --c-live-soft: rgba(242,104,91,0.15);
  --c-ok:     #2BD46A;

  /* radii + soft shadows */
  --c-r-sm: 7px; --c-r: 11px; --c-r-lg: 16px; --c-r-pill: 999px;
  --c-sh-card: 0 1px 2px rgba(0,0,0,0.30), 0 10px 30px rgba(0,0,0,0.40);
  --c-sh-pop:  0 18px 50px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.40);
  --c-sh-bar:  0 6px 22px rgba(0,0,0,0.45);
  --c-sh-gold: 0 4px 16px rgba(43,212,106,0.30);
}

html { font-size: 13px; }
body {
  font-family: var(--font-sans);
  /* near-black canvas with two faint green radial washes (ثمانية dark theme) */
  background:
    radial-gradient(1200px 540px at 88% -10%, rgba(43,212,106,0.07), transparent 60%),
    radial-gradient(900px 480px at 6% 0%, rgba(43,212,106,0.05), transparent 55%),
    #0E1012;
  color: var(--ink);
  min-height: 100vh;
}
*[hidden] { display: none !important; }

button { font-family: var(--font-sans); }

/* ── shared gallery primitives ───────────────────────────────────
   A reusable 1px "engineered frame" (inset hairline) + corner
   registration ticks (small + crosses). Reused by the login sheet
   and the modal sheets via a `.has-frame` wrapper + `.reg-tick`
   spans placed in the markup. */
.has-frame { position: relative; }
.has-frame > .gframe {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--border);
  pointer-events: none;
  z-index: 0;
}
.reg-tick {
  position: absolute;
  width: 12px; height: 12px;
  pointer-events: none;
  z-index: 1;
}
.reg-tick::before,
.reg-tick::after { content: ""; position: absolute; background: var(--ink); }
.reg-tick::before { width: 100%; height: 1px; top: 50%; transform: translateY(-50%); }
.reg-tick::after  { height: 100%; width: 1px; left: 50%; transform: translateX(-50%); }
.reg-tick.tl { top: 4px;  left: 4px;  }
.reg-tick.tr { top: 4px;  right: 4px; }
.reg-tick.bl { bottom: 4px; left: 4px; }
.reg-tick.br { bottom: 4px; right: 4px; }

/* ════════════════════════════════════════════════════════════
   LOGIN OVERLAY — premium "sign in to the control room" sheet
   Warm off-white backdrop · white card with a CHARCOAL header band
   carrying the ثمانية wordmark · clean labelled inputs · GOLD submit.
   ════════════════════════════════════════════════════════════ */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background:
    radial-gradient(1100px 560px at 84% -10%, rgba(34,38,44,0.08), transparent 60%),
    radial-gradient(820px 460px at 8% 4%, rgba(43,212,106,0.08), transparent 56%),
    var(--c-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  position: relative;
  width: 100%;
  max-width: 408px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-lg);
  padding: 0 0 30px;
  box-shadow: var(--c-sh-pop);
  overflow: hidden;
}
/* engineered inner frame (1px hairline inset), kept subtle on the body.
   Top edge sits just below the charcoal header band. */
.login-card > .gframe {
  position: absolute;
  inset: 7px;
  top: 150px;
  border: 1px solid var(--c-line-card);
  pointer-events: none;
  z-index: 0;
}
/* keep real content above the frame + ticks */
.login-brand,
.login-form { position: relative; z-index: 2; }

/* CHARCOAL header band carrying the wordmark + thin GOLD seam */
.login-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  padding: 26px 28px 22px;
  background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-base) 100%);
  border-bottom: 1px solid var(--c-hair-d);
  z-index: 2;
}
.login-brand::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-gold) 18%, var(--c-gold) 82%, transparent);
  opacity: 0.85;
}
.login-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  line-height: 1;
}
.login-logo .brand-wordmark { font-size: 44px; color: #fff; }
.login-logo .flower { font-size: 24px; color: var(--c-gold); }
.login-brand-text { display: flex; flex-direction: column; }
.login-title { font-size: 18px; font-weight: 900; color: #fff; letter-spacing: -0.01em; font-family: var(--font-display); }
.login-sub {
  font-size: 9.5px; font-weight: 800; color: var(--c-gold); margin-top: 5px;
  text-transform: uppercase; letter-spacing: 0.22em;
}

.login-form  { display: flex; flex-direction: column; gap: 15px; padding: 0 28px; }
.login-field { display: flex; flex-direction: column; gap: 7px; }
.login-lbl {
  font-size: 11px; font-weight: 800; color: var(--c-ink3);
  letter-spacing: 0.04em;
}
.login-inp {
  background: var(--c-inset);
  border: 1.5px solid var(--c-line2);
  border-radius: var(--c-r);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 700;
  padding: 13px 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.login-inp:focus { border-color: var(--c-gold); background: var(--c-card); box-shadow: 0 0 0 3px rgba(43,212,106,0.18); }
.login-inp::placeholder { color: var(--c-ink4); font-weight: 600; }

.login-btn {
  margin-top: 10px;
  background: linear-gradient(180deg, var(--c-gold), var(--c-gold-d));
  color: var(--c-gold-ink);
  border: 1px solid transparent;
  border-radius: var(--c-r);
  font-size: 14px; font-weight: 800;
  letter-spacing: 0.02em;
  padding: 14px;
  cursor: pointer;
  box-shadow: var(--c-sh-gold);
  transition: filter 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.login-btn:hover { filter: brightness(1.04); }
.login-btn:active { background: var(--c-gold-d); }
.login-btn:disabled { opacity: 0.6; cursor: wait; }

.login-error {
  margin: 0 28px;
  background: var(--c-live-soft);
  border: 1px solid color-mix(in srgb, var(--c-live) 32%, transparent);
  border-inline-start: 3px solid var(--c-live);
  color: #9B2C22;
  font-size: 12.5px; font-weight: 700;
  border-radius: var(--c-r-sm);
  padding: 10px 12px;
}

/* ════════════════════════════════════════════════════════════
   TOP BAR — CHARCOAL gradient bar with a thin GOLD bottom seam.
   ثمانية wordmark in white + gold uppercase "RUNNING ORDER" tag.
   ════════════════════════════════════════════════════════════ */
.topbar {
  background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-base) 100%);
  padding: 11px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 300;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--c-hair-d);
  box-shadow: var(--c-sh-bar);
}
/* thin gold seam pinned to the very bottom edge */
.topbar::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-gold) 16%, var(--c-gold) 84%, transparent);
  opacity: 0.6;
  pointer-events: none;
}
.topbar-right { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.topbar-logo  { line-height: 1; display: inline-flex; align-items: center; }
.topbar-logo .brand-wordmark { font-size: 30px; color: #fff; letter-spacing: 0.5px; }
/* animated ثمانية logomark — transparent-bg animated WebP (alpha), so it needs no
   blend mode and shows no box edge during the glow. */
/* static ثمانية logomark (no animation) — black-on-transparent PNG whitened for the dark bar */
.topbar-logo-img { height: 62px; width: 62px; display: block; margin-block: -7px; object-fit: contain; filter: brightness(0) invert(1); }
/* label as the GOLD uppercase "RUNNING ORDER الذكي" tag */
.topbar-label {
  font-size: 10px; font-weight: 800; color: var(--c-gold);
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.16em;
  white-space: nowrap;
  padding: 4px 11px;
  border: 1px solid color-mix(in srgb, var(--c-gold) 45%, transparent);
  border-radius: var(--c-r-pill);
  background: rgba(43,212,106,0.10);
}
.topbar-mid   { flex: 1; display: flex; justify-content: center; min-width: 0; }

/* ── ghost button (secondary) on dark ── */
.tb-btn {
  padding: 8px 11px;
  border-radius: var(--c-r-pill);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid var(--c-hair-d);
  background: rgba(255,255,255,0.05);
  color: var(--c-on);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, filter 0.15s;
}
.tb-btn:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.18); }
/* GOLD primary buttons (طباعة via .dark + جديد via #btn-ro-new) */
.tb-btn.dark,
#btn-ro-new {
  background: linear-gradient(180deg, var(--c-gold), var(--c-gold-d));
  border-color: transparent; color: var(--c-gold-ink);
  font-weight: 800; letter-spacing: 0.02em;
  box-shadow: var(--c-sh-gold);
}
.tb-btn.dark:hover,
#btn-ro-new:hover { filter: brightness(1.04); background: linear-gradient(180deg, var(--c-gold), var(--c-gold-d)); border-color: transparent; }
.tb-btn.dark .flower { color: var(--c-gold-ink); font-size: 13px; }
/* delete reads as a soft danger ghost on dark */
#btn-ro-delete { color: #F4C9C2; border-color: rgba(210,74,62,0.45); background: rgba(210,74,62,0.12); }
#btn-ro-delete:hover { background: rgba(210,74,62,0.20); border-color: rgba(210,74,62,0.6); }
.tb-btn:disabled { opacity: 0.42; cursor: default; }

/* ── RO TOOLBAR — dark inset capsule holding the controls ── */
.ro-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: center;
  padding: 5px 6px;
  border: 1px solid var(--c-hair-d);
  border-radius: var(--c-r-pill);
  background: rgba(0,0,0,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
/* saved-RO selector as a dark inset pill */
.ro-select {
  -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--c-r-pill);
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  padding: 8px 12px;
  max-width: 300px;
  min-width: 104px;
  flex: 0 1 auto;
  outline: none;
  cursor: pointer;
  text-overflow: ellipsis;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color 0.15s, background 0.15s;
}
.ro-select option { background: var(--c-primary); color: #fff; }
.ro-select:hover { background: rgba(255,255,255,0.11); }
.ro-select:focus { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(43,212,106,0.20); }

/* autosave status — soft success pill with a dot (on "saved") */
.autosave-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  min-width: 76px;
  flex: 0 0 auto;
  padding: 6px 11px;
  border-radius: var(--c-r-pill);
  white-space: nowrap;
  border: 1px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.autosave-status::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.autosave-status:empty { min-width: 0; padding: 0; border: 0; }
.autosave-status:empty::before { display: none; }
.autosave-status[data-state="idle"]    { color: var(--c-on-dim); }
.autosave-status[data-state="pending"] { color: var(--c-on-dim); background: rgba(255,255,255,0.05); border-color: var(--c-hair-d); }
.autosave-status[data-state="saving"]  { color: var(--c-on-dim); background: rgba(255,255,255,0.05); border-color: var(--c-hair-d); }
.autosave-status[data-state="saved"]   {
  color: #BFE6CF;
  background: rgba(28,138,91,0.16);
  border-color: rgba(28,138,91,0.34);
}
.autosave-status[data-state="saved"]::before { background: #46D08A; box-shadow: 0 0 0 4px rgba(70,208,138,0.20); }
.autosave-status[data-state="error"]   {
  color: #F4C9C2;
  background: rgba(210,74,62,0.14);
  border-color: rgba(210,74,62,0.40);
}

/* ════════════════════════════════════════════════════════════
   ACCOUNT MENU — dark account chip with a GOLD avatar; the
   dropdown is a white sheet styled to match.
   ════════════════════════════════════════════════════════════ */
.account-wrap { position: relative; flex-shrink: 0; display: flex; align-items: center; }
.account-btn {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--c-r-pill);
  padding: 5px 13px 5px 8px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 700;
  transition: background 0.15s, border-color 0.15s;
}
.account-btn:hover { background: rgba(255,255,255,0.12); }
.account-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--c-gold), var(--c-gold-d));
  color: var(--c-gold-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900;
  font-family: var(--font-display);
  border: 1px solid rgba(255,255,255,0.22);
  flex-shrink: 0;
}
.account-name  { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.account-caret { font-size: 9px; color: var(--c-on-dim); }

.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 232px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r);
  box-shadow: var(--c-sh-pop);
  padding: 6px;
  z-index: 320;
}
/* charcoal head band on the dropdown */
.account-menu-head {
  padding: 12px 12px 13px;
  border-bottom: 1px solid var(--c-hair-d);
  margin-bottom: 6px;
  background: linear-gradient(180deg, var(--c-primary), var(--c-base));
  border-radius: var(--c-r-sm) var(--c-r-sm) 0 0;
  position: relative;
}
.account-menu-head::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-gold) 20%, var(--c-gold) 80%, transparent);
  opacity: 0.6;
}
.account-menu-name { font-size: 14px; font-weight: 800; color: #fff; font-family: var(--font-display); }
.account-menu-role {
  font-size: 9.5px; font-weight: 800; color: var(--c-gold); margin-top: 4px;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.account-menu-item {
  display: block;
  width: 100%;
  text-align: right;
  background: transparent;
  border: none;
  color: var(--c-ink);
  font-size: 13px; font-weight: 700;
  padding: 10px 11px;
  border-radius: var(--c-r-sm);
  cursor: pointer;
  transition: background 0.12s;
}
.account-menu-item:hover { background: var(--c-inset2); }
.account-menu-item.danger { color: var(--c-live); }
.account-menu-item.danger:hover { background: var(--c-live-soft); }
.account-menu-sep { height: 1px; background: var(--c-line-card); margin: 6px 4px; }

/* ════════════════════════════════════════════════════════════
   NOTIFICATION CENTER (🔔) — a bell button in the top bar with an
   unread-count badge + a charcoal dropdown panel listing rejection
   notices. Lives inside .account-wrap (before #account-btn), so it
   inherits the shell --c-* tokens declared on that root's siblings.
   ════════════════════════════════════════════════════════════ */
.notif-bell {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  margin-inline-end: 8px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px; line-height: 1;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.notif-bell:hover { background: rgba(255,255,255,0.12); }
.notif-bell[aria-expanded="true"] {
  background: rgba(255,255,255,0.14);
  border-color: var(--c-gold);
}
.notif-bell-ic { display: inline-block; line-height: 1; }

/* unread count — a red pill anchored to the bell's top-inline edge */
.notif-badge {
  position: absolute;
  top: -4px; inset-inline-start: -4px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--c-r-pill);
  background: var(--c-live); color: #fff;
  font-size: 9.5px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--c-base);
  box-shadow: 0 2px 6px rgba(210,74,62,0.45);
}

/* the dropdown panel — a charcoal card under the bell */
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 340px; max-width: 92vw;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r);
  box-shadow: var(--c-sh-pop);
  z-index: 330;
  overflow: hidden;
}
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 12px 13px;
  background: linear-gradient(180deg, var(--c-primary), var(--c-base));
  border-bottom: 1px solid var(--c-hair-d);
  position: relative;
}
.notif-head::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-gold) 20%, var(--c-gold) 80%, transparent);
  opacity: 0.6;
}
.notif-head-title {
  font-size: 13.5px; font-weight: 800; color: #fff;
  font-family: var(--font-display);
}
.notif-readall {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--c-gold);
  font-size: 11px; font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--c-r-pill);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.notif-readall:hover { background: rgba(255,255,255,0.1); border-color: var(--c-gold); }
.notif-head-acts { display: flex; align-items: center; gap: 7px; }
.notif-clear {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: #F0A8A0;
  font-size: 11px; font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--c-r-pill);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.notif-clear:hover { background: rgba(214,69,55,0.18); border-color: var(--c-live); color: #fff; }

.notif-list {
  max-height: 380px;
  overflow-y: auto;
  padding: 6px;
}
.notif-empty {
  padding: 26px 14px;
  text-align: center;
  font-size: 12.5px; font-weight: 600;
  color: var(--c-ink3);
}

/* one notification — a clickable card; rejects get a red accent rail */
.notif-item {
  display: block;
  width: 100%;
  text-align: right;
  background: var(--c-inset);
  border: 1px solid var(--c-line-card);
  border-radius: var(--c-r-sm);
  padding: 10px 11px;
  margin-bottom: 6px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.12s, border-color 0.12s;
}
.notif-item:last-child { margin-bottom: 0; }
.notif-item:hover { background: var(--c-inset2); border-color: var(--c-line2); }
.notif-item { position: relative; }
.notif-item-head { padding-inline-end: 22px; }
/* per-item × delete control (top-left in RTL) */
.notif-del {
  position: absolute; top: 6px; inset-inline-end: 6px; z-index: 2;
  width: 19px; height: 19px; line-height: 17px; text-align: center;
  border-radius: 50%; font-size: 14px; font-weight: 800;
  color: var(--c-ink3); background: var(--c-inset2);
  opacity: 0.5; cursor: pointer;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.notif-item:hover .notif-del { opacity: 0.85; }
.notif-del:hover { opacity: 1; background: var(--c-live-soft); color: var(--c-live); }
.notif-item.is-reject {
  border-inline-start: 3px solid var(--c-live);
}
/* awaiting-final-approval (for the final approver) → amber; approved → green */
.notif-item.is-await { border-inline-start: 3px solid #E6B84A; }
.notif-item.is-await .notif-item-ic { background: #D99A1F; }
.notif-item.is-approve { border-inline-start: 3px solid #1E9E5B; }
.notif-item.is-approve .notif-item-ic { background: #1E9E5B; }
/* unread → emphasised: soft red wash + a gold "unread" dot on the title */
.notif-item.is-unread {
  background: var(--c-live-soft);
  border-color: color-mix(in srgb, var(--c-live) 22%, transparent);
}
.notif-item.is-unread:hover { background: color-mix(in srgb, var(--c-live-soft) 80%, #fff); }

.notif-item-head {
  display: flex; align-items: center; gap: 7px;
}
.notif-item-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-live); color: #fff;
  font-size: 10px; font-weight: 900; line-height: 1;
}
.notif-item-title {
  font-size: 12.5px; font-weight: 800; color: var(--c-ink);
  line-height: 1.4;
}
.notif-item.is-unread .notif-item-title { color: #9B2C22; }
.notif-item-note {
  margin-top: 6px;
  font-size: 12px; line-height: 1.55; color: var(--c-ink2);
  background: var(--c-card);
  border: 1px solid var(--c-line-card);
  border-radius: var(--c-r-sm);
  padding: 7px 9px;
  white-space: pre-wrap; word-break: break-word;
}
.notif-item-meta {
  margin-top: 6px;
  font-size: 10.5px; font-weight: 700; color: var(--c-ink3);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════
   MODALS (shared) — white sheets with a CHARCOAL header band
   ════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(16,18,21,0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.modal {
  position: relative;
  width: 100%;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-lg);
  box-shadow: var(--c-sh-pop);
  overflow: hidden;
}
.admin-modal { max-width: 960px; }
.cpw-modal   { max-width: 432px; }

/* CHARCOAL header band with a thin gold seam */
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid var(--c-hair-d);
  background: linear-gradient(180deg, var(--c-primary), var(--c-base));
  position: relative;
}
.modal-head::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-gold) 16%, var(--c-gold) 84%, transparent);
  opacity: 0.55;
}
.modal-title {
  font-size: 15px; font-weight: 900; color: #fff;
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}
.modal-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--c-r-sm);
  color: var(--c-on);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  transition: background 0.15s, border-color 0.15s;
}
.modal-close:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.4); }
.modal-body { padding: 22px; position: relative; z-index: 1; }

/* registration ticks sit above the sheet; the two TOP ticks overlap the
   CHARCOAL header band, so render their crosses light there for contrast. */
.modal > .reg-tick { z-index: 5; }
.modal > .reg-tick::before, .modal > .reg-tick::after { background: var(--c-ink2); }
.modal > .reg-tick.tl::before, .modal > .reg-tick.tl::after,
.modal > .reg-tick.tr::before, .modal > .reg-tick.tr::after { background: var(--c-on); }

/* ════════════════════════════════════════════════════════════
   ADMIN — create form + users table (clean hairline gallery table)
   ════════════════════════════════════════════════════════════ */
.admin-create {
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--c-r);
  background: var(--c-inset);
}
.admin-create-row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr 0.8fr auto;
  gap: 9px;
}
.admin-inp {
  background: var(--c-card);
  border: 1.5px solid var(--c-line2);
  border-radius: var(--c-r-sm);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 700;
  padding: 9px 11px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-inp:focus { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(43,212,106,0.18); }
.admin-inp::placeholder { color: var(--c-ink4); }

.admin-btn {
  background: var(--c-card);
  border: 1px solid var(--c-line2);
  color: var(--c-ink);
  border-radius: var(--c-r-sm);
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 800;
  padding: 9px 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, filter 0.15s;
}
.admin-btn:hover { background: var(--c-inset2); border-color: var(--c-line2); }
.admin-btn.primary {
  background: linear-gradient(180deg, var(--c-gold), var(--c-gold-d));
  color: var(--c-gold-ink); border-color: transparent;
  letter-spacing: 0.02em;
  box-shadow: var(--c-sh-gold);
}
.admin-btn.primary:hover { filter: brightness(1.04); color: var(--c-gold-ink); }
.admin-btn.sm { font-size: 11px; padding: 6px 12px; }
.admin-btn.danger { color: var(--c-live); border-color: var(--c-line2); }
.admin-btn.danger:hover { border-color: var(--c-live); color: var(--c-live); background: var(--c-live-soft); }
.admin-btn:disabled { opacity: 0.4; cursor: default; border-color: var(--c-line2); color: var(--c-ink); }

.admin-inline-error {
  margin-top: 10px;
  background: var(--c-live-soft);
  border: 1px solid color-mix(in srgb, var(--c-live) 30%, transparent);
  border-inline-start: 3px solid var(--c-live);
  color: #9B2C22;
  font-size: 12px; font-weight: 700;
  border-radius: var(--c-r-sm);
  padding: 9px 11px;
}
.admin-inline-error.info {
  background: rgba(28,138,91,0.10);
  border-color: rgba(28,138,91,0.30);
  border-inline-start-color: var(--c-ok);
  color: #15743F;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-sm);
  overflow: hidden;
}
/* CHARCOAL header row */
.admin-table thead th {
  text-align: right;
  font-size: 9.5px; font-weight: 800;
  color: var(--c-on);
  background: linear-gradient(180deg, var(--c-primary), var(--c-base));
  text-transform: uppercase;
  letter-spacing: 0.13em;
  padding: 10px 11px;
  border-inline-start: 1px solid var(--c-hair-d);
  white-space: nowrap;
}
.admin-table thead th:first-child { border-inline-start: none; }
.admin-table tbody tr:nth-child(even) td { background: var(--c-inset); }
.admin-table tbody tr:hover td { background: var(--c-inset2); }
.admin-table tbody td {
  padding: 9px 11px;
  border-bottom: 1px solid var(--c-line-card);
  border-inline-start: 1px solid var(--c-line-card);
  vertical-align: middle;
  color: var(--c-ink2);
}
.admin-table tbody td:first-child { border-inline-start: none; }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-user-cell { font-weight: 800; color: var(--c-ink); }
.admin-you {
  color: var(--c-gold-d); font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.admin-muted { color: var(--c-ink3); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.admin-empty { text-align: center; color: var(--c-ink3); padding: 22px 0; }

.admin-mini-inp {
  width: 100%;
  background: var(--c-card);
  border: 1px solid var(--c-line2);
  border-radius: var(--c-r-sm);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 700;
  padding: 6px 9px;
  outline: none;
}
.admin-mini-inp:focus { border-color: var(--c-gold); box-shadow: 0 0 0 2px rgba(43,212,106,0.18); }
.admin-mini-sel {
  -webkit-appearance: none; appearance: none;
  background: var(--c-card);
  border: 1px solid var(--c-line2);
  border-radius: var(--c-r-sm);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 700;
  padding: 6px 9px;
  outline: none;
  cursor: pointer;
}
.admin-mini-sel:focus { border-color: var(--c-gold); box-shadow: 0 0 0 2px rgba(43,212,106,0.18); }
.admin-mini-sel:disabled { opacity: 0.6; cursor: default; }

/* state chip — squared-rounded, hairline */
.admin-chip {
  border-radius: var(--c-r-pill);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 11px;
  cursor: pointer;
  border: 1px solid var(--c-line2);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.admin-chip.on  { background: rgba(28,138,91,0.12); color: #15743F; border-color: rgba(28,138,91,0.35); }
.admin-chip.off { background: var(--c-live-soft); color: #9B2C22; border-color: color-mix(in srgb, var(--c-live) 32%, transparent); }
.admin-chip:disabled { opacity: 0.6; cursor: default; }

/* two-stage approver toggles (المعتمد الأول / النهائي) in the users table */
.admin-appr { display: inline-flex; gap: 5px; }
.admin-appr-chip {
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 800; cursor: pointer;
  padding: 3px 10px; border-radius: var(--c-r-pill);
  border: 1px solid var(--c-line2); background: transparent; color: var(--c-ink3);
  transition: background .15s, color .15s, border-color .15s;
}
.admin-appr-chip.on { background: rgba(230,184,74,0.16); color: #8A5A06; border-color: rgba(230,184,74,0.5); }
.admin-appr-chip:disabled { opacity: 0.6; cursor: default; }

.admin-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════
   CHANGE-PASSWORD MODAL
   ════════════════════════════════════════════════════════════ */
.cpw-form  { display: flex; flex-direction: column; gap: 14px; }
.cpw-field { display: flex; flex-direction: column; gap: 7px; }
.cpw-lbl {
  font-size: 11px; font-weight: 800; color: var(--c-ink3);
  letter-spacing: 0.04em;
}
.cpw-inp {
  background: var(--c-inset);
  border: 1.5px solid var(--c-line2);
  border-radius: var(--c-r);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 700;
  padding: 12px 13px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.cpw-inp:focus { border-color: var(--c-gold); background: var(--c-card); box-shadow: 0 0 0 3px rgba(43,212,106,0.18); }
.cpw-inp::placeholder { color: var(--c-ink4); }
.cpw-btn {
  margin-top: 6px;
  background: linear-gradient(180deg, var(--c-gold), var(--c-gold-d));
  color: var(--c-gold-ink);
  border: 1px solid transparent;
  border-radius: var(--c-r);
  font-size: 14px; font-weight: 800;
  letter-spacing: 0.02em;
  padding: 13px;
  cursor: pointer;
  box-shadow: var(--c-sh-gold);
  transition: filter 0.15s, opacity 0.15s;
}
.cpw-btn:hover { filter: brightness(1.04); }
.cpw-btn:active { background: var(--c-gold-d); }
.cpw-btn:disabled { opacity: 0.6; cursor: wait; }
.cpw-forced-note {
  background: var(--c-gold-soft);
  border: 1px solid var(--c-gold-line);
  border-inline-start: 3px solid var(--c-gold-d);
  color: #7A560F;
  font-size: 12.5px; font-weight: 700;
  border-radius: var(--c-r-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
}
.cpw-error {
  background: var(--c-live-soft);
  border: 1px solid color-mix(in srgb, var(--c-live) 30%, transparent);
  border-inline-start: 3px solid var(--c-live);
  color: #9B2C22;
  font-size: 12.5px; font-weight: 700;
  border-radius: var(--c-r-sm);
  padding: 10px 12px;
}
.cpw-ok {
  background: rgba(28,138,91,0.12);
  border: 1px solid rgba(28,138,91,0.30);
  border-inline-start: 3px solid var(--c-ok);
  color: #15743F;
  font-size: 12.5px; font-weight: 700;
  border-radius: var(--c-r-sm);
  padding: 10px 12px;
}

/* ════════════════════════════════════════════════════════════
   SAVED RUNNING ORDERS BROWSER  (#ros-modal · window.RosBrowser)
   White sheet with a CHARCOAL header band + gold seam (like the
   admin modal). Toolbar with tabs + search + date filter. Body =
   date-grouped record cards carrying created/edited/deleted
   traceability, a revision chip, and gold/ghost/danger actions.
   Consumes the shell-scoped --c-* palette (declared on .ros-modal-ov
   above) — no global theme tokens are redefined here.
   ════════════════════════════════════════════════════════════ */
.ros-modal-ov {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(16,18,21,0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.ros-modal-ov.ros-show { opacity: 1; }
.ros-modal {
  position: relative;
  width: 100%;
  max-width: 840px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-lg);
  box-shadow: var(--c-sh-pop);
  overflow: hidden;
  transform: translateY(10px) scale(0.985);
  transition: transform 0.22s cubic-bezier(0.2,0.9,0.3,1);
}
.ros-modal-ov.ros-show .ros-modal { transform: none; }

/* ── SERVER MANAGEMENT (إدارة الخادم) ── */
.srv-modal { max-width: 760px; }
.srv-body { padding: 18px 20px 22px; }
.srv-status { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 680px) { .srv-status { grid-template-columns: repeat(4, 1fr); } }
.srv-card {
  background: var(--c-inset); border: 1px solid var(--c-line);
  border-radius: var(--c-r); padding: 13px 14px; min-width: 0;
}
.srv-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.srv-card-lbl { font-size: 11px; font-weight: 800; color: var(--c-ink3); letter-spacing: 0.01em; white-space: nowrap; }
.srv-card-pct { font-size: 21px; font-weight: 900; color: var(--c-ink); font-variant-numeric: tabular-nums; line-height: 1; }
.srv-bar { height: 7px; border-radius: 99px; background: var(--c-line2); margin: 10px 0 8px; overflow: hidden; }
.srv-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--c-gold); transition: width 0.45s ease; }
.srv-card.is-warn .srv-bar > span { background: #E6B84A; }
.srv-card.is-warn .srv-card-pct { color: #E6B84A; }
.srv-card.is-hot .srv-bar > span { background: var(--c-live); }
.srv-card.is-hot .srv-card-pct { color: var(--c-live); }
.srv-card-sub { font-size: 10.5px; font-weight: 600; color: var(--c-ink4); line-height: 1.45; }
.srv-card-info .srv-card-lbl { display: block; }
.srv-card-big { font-size: 18px; font-weight: 900; color: var(--c-ink); margin: 4px 0 3px; line-height: 1.1; }

/* ── Live charts (CPU / RAM / sessions) ── */
.srv-charts {
  display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 10px;
}
@media (min-width: 680px) { .srv-charts { grid-template-columns: repeat(3, 1fr); } }
.srv-ch-card {
  background: var(--c-inset); border: 1px solid var(--c-line);
  border-radius: var(--c-r); padding: 12px 14px 10px; min-width: 0;
}
.srv-ch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.srv-ch-lbl { font-size: 11px; font-weight: 800; color: var(--c-ink3); letter-spacing: 0.01em; white-space: nowrap; }
.srv-ch-now { font-size: 22px; font-weight: 900; color: var(--c-ink); font-variant-numeric: tabular-nums; line-height: 1; }
.srv-ch-now small { font-size: 11px; font-weight: 700; color: var(--c-ink3); margin-inline-start: 2px; }
.srv-ch-svg { display: block; width: 100%; height: 60px; margin: 8px 0 6px; }
.srv-ch-foot { font-size: 10.5px; font-weight: 600; color: var(--c-ink4); line-height: 1.4; }
.srv-ch-empty { font-size: 12px; color: var(--c-ink4); padding: 14px 4px; text-align: center; }
.srv-ch-hint { font-size: 11px; color: var(--c-ink4); font-variant-numeric: tabular-nums; }

.srv-bk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 4px; }
.srv-h3 { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--c-ink); }
.srv-bk-btn {
  border: none; cursor: pointer; white-space: nowrap;
  background: linear-gradient(180deg, var(--c-gold), var(--c-gold-d)); color: var(--c-gold-ink);
  font-family: var(--font-sans); font-size: 12px; font-weight: 800; letter-spacing: 0.01em;
  padding: 8px 14px; border-radius: var(--c-r-pill); box-shadow: var(--c-sh-gold);
  transition: filter 0.15s;
}
.srv-bk-btn:hover { filter: brightness(1.05); }
.srv-bk-btn:disabled { opacity: 0.55; cursor: default; filter: none; }
.srv-note { font-size: 11px; font-weight: 600; color: var(--c-ink4); margin: 0 2px 11px; }
.srv-backups { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow: auto; }
.srv-bk-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 13px;
  background: var(--c-inset); border: 1px solid var(--c-line); border-radius: var(--c-r-sm);
}
.srv-bk-ic { font-size: 14px; flex: none; opacity: 0.8; }
.srv-bk-when { font-size: 12.5px; font-weight: 700; color: var(--c-ink); white-space: nowrap; }
.srv-bk-name { font-size: 10.5px; color: var(--c-ink3); font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 60px; }
.srv-bk-size { font-size: 11.5px; font-weight: 700; color: var(--c-ink2); font-variant-numeric: tabular-nums; white-space: nowrap; margin-inline-start: auto; }
.srv-empty { text-align: center; color: var(--c-ink4); font-size: 12.5px; padding: 18px; }

/* ── login sessions ── */
.srv-sessions { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow: auto; }
.srv-sess {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 13px;
  background: var(--c-inset); border: 1px solid var(--c-line); border-radius: var(--c-r-sm);
}
.srv-sess.is-on { border-color: rgba(43,212,106,0.30); }
.srv-sess-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--c-ink4); }
.srv-sess.is-on .srv-sess-dot { background: var(--c-gold); box-shadow: 0 0 0 3px rgba(43,212,106,0.18); }
.srv-sess.is-rev .srv-sess-dot { background: var(--c-live); }
.srv-sess-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.srv-sess-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.srv-sess-user { font-size: 13px; font-weight: 800; color: var(--c-ink); }
.srv-sess-badge { font-size: 10px; font-weight: 800; padding: 1px 8px; border-radius: var(--c-r-pill); background: rgba(255,255,255,0.07); color: var(--c-ink3); }
.srv-sess-badge.is-on { background: rgba(43,212,106,0.15); color: var(--c-gold); }
.srv-sess-badge.is-rev { background: var(--c-live-soft); color: var(--c-live); }
.srv-sess-you { font-size: 10px; font-weight: 800; color: var(--c-ink4); border: 1px dashed var(--c-line2); padding: 1px 7px; border-radius: var(--c-r-pill); }
.srv-sess-l2 { font-size: 11.5px; font-weight: 600; color: var(--c-ink2); overflow: hidden; text-overflow: ellipsis; }
.srv-sess-l3 { font-size: 11px; font-weight: 600; color: var(--c-ink4); font-variant-numeric: tabular-nums; }
.srv-sess-end {
  flex: none; align-self: center; cursor: pointer; font-family: var(--font-sans);
  font-size: 11.5px; font-weight: 800; color: #F4C9C2; padding: 5px 13px; border-radius: var(--c-r-pill);
  background: rgba(210,74,62,0.12); border: 1px solid rgba(210,74,62,0.45); white-space: nowrap;
}
.srv-sess-end:hover { background: rgba(210,74,62,0.22); }
.srv-sess-end:disabled { opacity: 0.5; cursor: default; }

/* ── admin announcement banner (shown to all users) ── */
.announce-bar {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 9px clamp(14px, 3vw, 24px); font-family: var(--font-sans);
  font-size: 13.5px; font-weight: 700; line-height: 1.5; z-index: 820;
}
.announce-bar.pos-top { position: relative; box-shadow: 0 5px 16px rgba(0,0,0,0.28); }
.announce-bar.pos-bottom { position: fixed; left: 0; right: 0; bottom: 0; box-shadow: 0 -5px 18px rgba(0,0,0,0.30); }
.announce-bar.lvl-info    { background: linear-gradient(95deg, #1AA653, #2BD46A); color: #04130A; }
.announce-bar.lvl-warning { background: linear-gradient(95deg, #E0951A, #F2B53C); color: #2a1c00; }
.announce-bar.lvl-urgent  { background: linear-gradient(95deg, #C92E25, #E84B41); color: #fff; }
.announce-ic { flex: none; font-size: 15px; line-height: 1; }
.announce-badge {
  flex: none; font-size: 10.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px;
  background: rgba(0,0,0,0.16); letter-spacing: .02em;
}
.announce-bar.lvl-urgent .announce-badge { background: rgba(255,255,255,0.22); }
.announce-text { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; }
.announce-x {
  flex: none; cursor: pointer; border: 0; background: rgba(0,0,0,0.13); color: inherit;
  width: 24px; height: 24px; border-radius: 50%; font-size: 17px; line-height: 1; font-family: var(--font-sans);
  display: inline-flex; align-items: center; justify-content: center; transition: background .12s;
}
.announce-bar.lvl-urgent .announce-x { background: rgba(255,255,255,0.2); }
.announce-x:hover { background: rgba(0,0,0,0.26); }

/* announcement editor (inside the server modal) */
.srv-ann { display: flex; flex-direction: column; gap: 9px; }
.srv-ann-text {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 56px;
  background: var(--c-inset); border: 1.5px solid var(--c-line2); border-radius: var(--c-r);
  color: var(--c-ink); font-family: var(--font-sans); font-size: 13px; font-weight: 600; line-height: 1.6; padding: 9px 11px;
}
.srv-ann-text:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(43,212,106,0.16); }
.srv-ann-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.srv-ann-sel {
  background: var(--c-inset); border: 1.5px solid var(--c-line2); border-radius: var(--c-r);
  color: var(--c-ink); font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; padding: 8px 10px;
}
.srv-ann-stop {
  cursor: pointer; font-family: var(--font-sans); font-size: 12.5px; font-weight: 800;
  color: #F4C9C2; padding: 8px 16px; border-radius: var(--c-r-pill);
  background: rgba(210,74,62,0.12); border: 1px solid rgba(210,74,62,0.45);
}
.srv-ann-stop:hover { background: rgba(210,74,62,0.22); }
.srv-ann-state { margin-inline-start: auto; font-size: 11.5px; font-weight: 800; color: var(--c-ink4); }
.srv-ann-state.is-on { color: var(--c-gold); }

/* registration ticks above the sheet; top two overlap the dark band */
.ros-modal > .reg-tick { z-index: 5; }
.ros-modal > .reg-tick::before, .ros-modal > .reg-tick::after { background: var(--c-ink2); }
.ros-modal > .reg-tick.tl::before, .ros-modal > .reg-tick.tl::after,
.ros-modal > .reg-tick.tr::before, .ros-modal > .reg-tick.tr::after { background: var(--c-on); }

/* CHARCOAL header band with a thin gold seam */
.ros-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid var(--c-hair-d);
  background: linear-gradient(180deg, var(--c-primary), var(--c-base));
  position: relative;
}
.ros-head::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-gold) 16%, var(--c-gold) 84%, transparent);
  opacity: 0.55;
}
.ros-title {
  font-size: 15px; font-weight: 900; color: #fff;
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}
.ros-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--c-r-sm);
  color: var(--c-on);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  transition: background 0.15s, border-color 0.15s;
}
.ros-close:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.4); }

/* ── TOOLBAR: tabs (left) + filters (right) on the warm inset ── */
.ros-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 20px;
  background: var(--c-inset);
  border-bottom: 1px solid var(--c-line-card);
  position: relative;
  z-index: 1;
}
.ros-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--c-inset2);
  border: 1px solid var(--c-line2);
  border-radius: var(--c-r-pill);
}
.ros-tab {
  background: transparent;
  border: none;
  color: var(--c-ink3);
  font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.01em;
  padding: 7px 16px;
  border-radius: var(--c-r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.ros-tab:hover { color: var(--c-ink); }
.ros-tab.is-active {
  background: linear-gradient(180deg, var(--c-primary), var(--c-base));
  color: #fff;
  box-shadow: 0 2px 8px rgba(16,18,21,0.18);
}

.ros-filters {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.ros-filters.is-hidden { visibility: hidden; }

.ros-search {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.ros-search-ic {
  position: absolute;
  inset-inline-start: 11px;
  font-size: 12px;
  opacity: 0.55;
  pointer-events: none;
}
.ros-search-inp {
  background: var(--c-card);
  border: 1.5px solid var(--c-line2);
  border-radius: var(--c-r-pill);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 700;
  padding: 9px 14px 9px 34px;
  min-width: 210px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ros-search-inp:focus { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(43,212,106,0.18); }
.ros-search-inp::placeholder { color: var(--c-ink4); font-weight: 600; }

.ros-datefilter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ros-date-inp {
  background: var(--c-card);
  border: 1.5px solid var(--c-line2);
  border-radius: var(--c-r-sm);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 700;
  padding: 8px 11px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ros-date-inp:focus { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(43,212,106,0.18); }
.ros-date-clear {
  background: var(--c-card);
  border: 1px solid var(--c-line2);
  color: var(--c-ink3);
  border-radius: var(--c-r-sm);
  font-family: var(--font-sans);
  font-size: 11.5px; font-weight: 800;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ros-date-clear:hover { background: var(--c-inset2); color: var(--c-ink); border-color: var(--c-line2); }

/* ── BODY: scroll region holding the date groups ── */
.ros-body {
  padding: 18px 20px 22px;
  max-height: calc(100vh - 290px);
  min-height: 200px;
  overflow-y: auto;
  outline: none;
}

/* loading / empty / error states */
.ros-state {
  text-align: center;
  color: var(--c-ink3);
  font-size: 13px; font-weight: 700;
  padding: 48px 12px;
}
.ros-state.ros-error {
  color: #9B2C22;
  background: var(--c-live-soft);
  border: 1px solid color-mix(in srgb, var(--c-live) 30%, transparent);
  border-inline-start: 3px solid var(--c-live);
  border-radius: var(--c-r-sm);
  padding: 16px 14px;
}

/* ── DATE GROUP ── */
.ros-group { margin-bottom: 22px; }
.ros-group:last-child { margin-bottom: 0; }
.ros-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--c-line2);
}
.ros-group-date {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 800;
  color: var(--c-ink);
  letter-spacing: 0.01em;
}
.ros-group-count {
  font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--c-gold-d);
  background: var(--c-gold-soft);
  border: 1px solid var(--c-gold-line);
  border-radius: var(--c-r-pill);
  min-width: 22px;
  text-align: center;
  padding: 2px 8px;
}

.ros-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
}

/* ── compact RECORD ROW (active / deleted list — replaces the big cards) ── */
.ros-rows { display: flex; flex-direction: column; gap: 6px; }
.ros-row {
  display: flex; align-items: center; gap: 10px; position: relative;
  background: var(--c-card); border: 1px solid var(--c-line-card);
  border-radius: var(--c-r-sm); padding: 8px 12px 8px 14px;
  transition: border-color 0.13s;
}
.ros-row::before {
  content: ""; position: absolute; inset-block: 8px; inset-inline-start: 0;
  width: 3px; border-radius: 99px;
  background: linear-gradient(180deg, var(--c-gold), var(--c-gold-d)); opacity: 0.8;
}
.ros-row.is-deleted::before { background: linear-gradient(180deg, #D2655B, #B5332D); }
.ros-row.is-deleted { background: var(--bg1); }
.ros-row:hover { border-color: var(--c-line2); }
.ros-row-main { flex: 1; min-width: 0; padding-inline-start: 6px; border-radius: 6px; }
.ros-row-main.is-open { cursor: pointer; }
.ros-row-main.is-open:hover .ros-row-title { color: var(--c-gold); }
.ros-row-main.is-open:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.ros-row-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ros-row-title {
  flex: 0 1 auto; min-width: 0;
  font-family: var(--font-display); font-size: 14px; font-weight: 800;
  color: var(--c-ink); line-height: 1.3; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.12s;
}
.ros-row .ros-review-chip { flex: 0 0 auto; white-space: nowrap; margin-inline-start: 0; }
.ros-row-sub {
  margin-top: 2px; font-size: 11px; color: var(--c-ink3); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ros-row-lbl { font-weight: 700; color: var(--c-ink4, var(--c-ink3)); }
.ros-row-sub b { font-weight: 800; color: var(--c-ink2); }
.ros-row-dot { margin: 0 4px; color: var(--c-ink4, var(--c-ink3)); }
.ros-row-acts { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.ros-row-x {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; min-width: 30px; padding: 0 9px; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 800;
  border-radius: var(--c-r-sm); border: 1px solid var(--c-line2);
  background: transparent; color: var(--c-ink3);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ros-row-del:hover { background: var(--c-live-soft); color: var(--c-live); border-color: color-mix(in srgb, var(--c-live) 40%, transparent); }
.ros-row-x.ros-x-gold:hover { background: var(--c-gold-soft); color: var(--c-gold); border-color: var(--c-gold-line); }
.ros-row .ros-admin-only { font-size: 15px; color: var(--c-ink4, var(--c-ink3)); padding: 0 6px; }

/* ── RECORD CARD ── */
.ros-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--c-card);
  border: 1px solid var(--c-line-card);
  border-radius: var(--c-r);
  box-shadow: var(--c-sh-card);
  padding: 14px 15px;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.ros-card:hover { border-color: var(--c-line2); box-shadow: 0 2px 6px rgba(16,18,21,0.08), 0 12px 30px rgba(16,18,21,0.09); }
/* gold accent rail on the inline-start edge */
.ros-card::before {
  content: "";
  position: absolute;
  inset-block: 12px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--c-gold), var(--c-gold-d));
  opacity: 0.85;
}
.ros-card.is-deleted::before { background: linear-gradient(180deg, #D2655B, #B5332D); }
.ros-card.is-deleted { background: var(--bg1); }

.ros-card-main { display: flex; flex-direction: column; gap: 8px; padding-inline-start: 8px; }
.ros-card-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 900;
  color: var(--c-ink);
  line-height: 1.3;
  letter-spacing: -0.01em;
  word-break: break-word;
}
.ros-card-eventdate {
  font-size: 12px; font-weight: 700;
  color: var(--c-ink3);
  letter-spacing: 0.01em;
}

/* traceability block */
.ros-trace {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
  padding: 9px 11px;
  background: var(--c-inset);
  border: 1px solid var(--c-line-card);
  border-radius: var(--c-r-sm);
}
.ros-trace-line {
  font-size: 11.5px;
  color: var(--c-ink2);
  line-height: 1.5;
}
.ros-trace-lbl { font-weight: 800; color: var(--c-ink3); }
.ros-trace-who { font-weight: 800; color: var(--c-ink); }
.ros-trace-dot { color: var(--c-ink4); margin: 0 5px; }
.ros-trace-when { font-variant-numeric: tabular-nums; color: var(--c-ink3); }
.ros-trace-del { color: #9B2C22; }
.ros-trace-del .ros-trace-lbl { color: #B5332D; }
.ros-trace-del .ros-trace-who { color: #9B2C22; }

.ros-card-meta { margin-top: 2px; }
.ros-rev-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--c-ink2);
  background: var(--c-inset2);
  border: 1px solid var(--c-line2);
  border-radius: var(--c-r-pill);
  padding: 4px 11px;
}

/* card actions */
.ros-card-acts {
  display: flex;
  gap: 8px;
  padding-inline-start: 8px;
}
.ros-x {
  border-radius: var(--c-r-sm);
  font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.01em;
  padding: 9px 16px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}
.ros-x-gold {
  background: linear-gradient(180deg, var(--c-gold), var(--c-gold-d));
  color: var(--c-gold-ink);
  box-shadow: var(--c-sh-gold);
}
.ros-x-gold:hover { filter: brightness(1.04); }
.ros-x-ghost-danger {
  background: transparent;
  border-color: var(--c-line2);
  color: var(--c-live);
}
.ros-x-ghost-danger:hover { background: var(--c-live-soft); border-color: var(--c-live); color: #9B2C22; }
/* non-admin note in the trash tab (recover is admin-only) */
.ros-admin-only {
  font-size: 11.5px; font-weight: 700; color: var(--c-ink4);
  background: var(--c-inset); border: 1px dashed var(--c-line2);
  border-radius: var(--c-r-sm); padding: 6px 11px; white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   REVIEW & APPROVAL — «تحت المراجعة» tab, pending list, before/after
   diff drilldown, and the row/button chips. Amber = pending/review,
   green = approve, red = reject. Consumes the shell --c-* tokens
   (declared on .ros-modal-ov) and stays RTL.
   ════════════════════════════════════════════════════════════ */

/* the review tab keeps an amber tint so it reads as a queue, with a
   small live count badge pinned to its label */
.ros-tab-review { position: relative; }
.ros-tab-review.is-active {
  background: linear-gradient(180deg, var(--c-gold), var(--c-gold-d));
  color: var(--c-gold-ink);
  box-shadow: 0 2px 8px rgba(43,212,106,0.32);
}
.ros-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px;
  margin-inline-start: 6px;
  border-radius: var(--c-r-pill);
  background: var(--c-live); color: #fff;
  font-size: 9.5px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(210,74,62,0.4);
}
/* on the active (gold) tab the red pill would clash → flip to dark ink */
.ros-tab-review.is-active .ros-tab-badge {
  background: var(--c-gold-ink); color: var(--c-gold-soft);
  box-shadow: none;
}

/* ── «تحت المراجعة» chip on active-tab rows (edit awaits approval) ── */
.ros-review-chip {
  display: inline-flex; align-items: center; gap: 5px;
  margin-inline-start: 7px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.01em;
  color: #8A5A06;
  background: var(--c-gold-soft);
  border: 1px solid var(--c-gold-line);
  border-radius: var(--c-r-pill);
  padding: 4px 11px;
  vertical-align: middle;
}
/* RED variant — a rejected (bounced) never-approved record. Its creator
   can still revise & resubmit, so the row stays visible with this chip. */
.ros-review-chip.is-rejected {
  color: #9B2C22;
  background: var(--c-live-soft);
  border-color: color-mix(in srgb, var(--c-live) 30%, transparent);
}
.ros-review-chip.is-rejected::before { content: "✕"; font-weight: 900; }
/* stage-2 (awaiting FINAL approval) chip — deeper gold than the stage-1 chip */
.ros-review-chip.is-final { color: #8A5A06; background: rgba(230,184,74,0.18); border-color: rgba(230,184,74,0.55); }

/* stage chip shown on the review-inbox cards (which approval stage it awaits) */
.ros-stage-chip {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .01em;
  padding: 2px 9px; border-radius: 999px; vertical-align: middle; margin-inline-start: 6px;
}
.ros-stage-chip.is-first { color: #8A5A06; background: var(--c-gold-soft); border: 1px solid var(--c-gold-line); }
.ros-stage-chip.is-final { color: #8A5A06; background: rgba(230,184,74,0.18); border: 1px solid rgba(230,184,74,0.55); }
.ros-stage-chip.is-mine { box-shadow: 0 0 0 2px rgba(230,184,74,0.28); }

/* diff drilldown — "awaiting the OTHER approver" (no actions for this viewer) */
.ros-diff-acts-wait { justify-content: center; }
.ros-wait-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 800; color: #8A5A06;
  background: rgba(230,184,74,0.14); border: 1px solid rgba(230,184,74,0.45);
  padding: 8px 16px; border-radius: 999px;
}

/* ── pending list cards ── */
.ros-pgroup .ros-group-date { color: var(--c-gold-d); }
.ros-pcard::before { background: linear-gradient(180deg, var(--c-gold), var(--c-gold-d)); }
.ros-ptrace {
  font-size: 11.5px; line-height: 1.5; color: var(--c-ink2);
  margin-top: 2px; padding: 9px 11px;
  background: var(--c-gold-soft);
  border: 1px solid var(--c-gold-line);
  border-radius: var(--c-r-sm);
}
.ros-ptrace .ros-trace-lbl { font-weight: 800; color: #8A5A06; }
.ros-ptrace .ros-trace-who { font-weight: 800; color: var(--c-ink); }
.ros-ptrace .ros-trace-dot { color: var(--c-ink4); margin: 0 5px; }
.ros-ptrace .ros-trace-when { font-variant-numeric: tabular-nums; color: var(--c-ink3); }

/* ════════════════════ DIFF DRILLDOWN ════════════════════ */
.ros-diff { display: flex; flex-direction: column; gap: 16px; }

.ros-diff-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--c-line2);
}
.ros-diff-back {
  flex-shrink: 0;
  background: var(--c-card);
  border: 1px solid var(--c-line2);
  color: var(--c-ink2);
  border-radius: var(--c-r-pill);
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 800;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ros-diff-back:hover { background: var(--c-inset2); color: var(--c-ink); border-color: var(--c-line2); }
.ros-diff-titles { min-width: 0; }
.ros-diff-h {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 900;
  color: var(--c-ink); line-height: 1.3; letter-spacing: -0.01em;
  word-break: break-word;
}
.ros-diff-sub { font-size: 12px; font-weight: 700; color: var(--c-ink3); margin-top: 4px; }
.ros-diff-sub b { color: var(--c-ink2); }

/* "brand-new record" + "no visible differences" notes */
.ros-diff-new, .ros-diff-none {
  text-align: center;
  font-size: 13.5px; font-weight: 800;
  border-radius: var(--c-r-sm);
  padding: 22px 16px;
}
.ros-diff-new {
  color: #8A5A06;
  background: var(--c-gold-soft);
  border: 1px solid var(--c-gold-line);
}
.ros-diff-none { color: var(--c-ink3); background: var(--c-inset); border: 1px solid var(--c-line-card); }

/* ── a diff section (المعلومات الأساسية / فريق العمل / الفقرات) ── */
.ros-dsec {
  border: 1px solid var(--c-line-card);
  border-radius: var(--c-r);
  overflow: hidden;
  background: var(--c-card);
  box-shadow: var(--c-sh-card);
}
.ros-dsec-head {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 900;
  color: #fff;
  background: linear-gradient(180deg, var(--c-primary), var(--c-base));
  padding: 9px 13px;
}
.ros-dsec-sum {
  font-family: var(--font-sans);
  font-size: 10.5px; font-weight: 800;
  color: var(--c-gold);
  background: rgba(43,212,106,0.14);
  border: 1px solid color-mix(in srgb, var(--c-gold) 40%, transparent);
  border-radius: var(--c-r-pill);
  padding: 2px 9px;
}
.ros-dsec-body { padding: 4px 0; }

/* ── a single field change row: label | old → new ── */
.ros-drow {
  display: grid;
  grid-template-columns: 116px 1fr auto 1fr;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--c-line-card);
}
.ros-drow:last-child { border-bottom: none; }
.ros-dlabel { font-size: 11.5px; font-weight: 800; color: var(--c-ink3); }
.ros-dold {
  font-size: 12.5px; font-weight: 700;
  color: #9B2C22;
  background: var(--c-live-soft);
  border: 1px solid color-mix(in srgb, var(--c-live) 26%, transparent);
  border-radius: var(--c-r-sm);
  padding: 5px 9px;
  text-decoration: line-through;
  text-decoration-color: rgba(155,44,34,0.5);
  word-break: break-word;
}
.ros-darrow { color: var(--c-ink4); font-weight: 900; font-size: 13px; }
.ros-dnew {
  font-size: 12.5px; font-weight: 800;
  color: #15743F;
  background: rgba(28,138,91,0.10);
  border: 1px solid rgba(28,138,91,0.30);
  border-radius: var(--c-r-sm);
  padding: 5px 9px;
  word-break: break-word;
}

/* ── segment change rows (added / removed / retimed / renamed) ── */
.ros-srow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 13px;
  border-bottom: 1px solid var(--c-line-card);
  font-size: 12px;
}
.ros-srow:last-child { border-bottom: none; }
.ros-stag {
  flex-shrink: 0;
  font-size: 10px; font-weight: 900;
  letter-spacing: 0.02em;
  border-radius: var(--c-r-pill);
  padding: 3px 10px;
  border: 1px solid transparent;
}
.ros-sadd .ros-stag { color: #15743F; background: rgba(28,138,91,0.12); border-color: rgba(28,138,91,0.32); }
.ros-sdel .ros-stag { color: #9B2C22; background: var(--c-live-soft); border-color: color-mix(in srgb, var(--c-live) 30%, transparent); }
.ros-schg .ros-stag { color: #8A5A06; background: var(--c-gold-soft); border-color: var(--c-gold-line); }
.ros-sname { font-weight: 800; color: var(--c-ink); word-break: break-word; }
.ros-sdel .ros-sname { text-decoration: line-through; text-decoration-color: rgba(155,44,34,0.45); color: var(--c-ink2); }
.ros-sbits {
  flex-basis: 100%;
  font-size: 11px; font-weight: 700;
  color: var(--c-ink3);
  font-variant-numeric: tabular-nums;
  padding-inline-start: 2px;
}

/* ── approve / reject action bar ── */
.ros-diff-acts {
  display: flex; gap: 10px; justify-content: flex-start;
  padding-top: 6px;
  border-top: 1px dashed var(--c-line2);
}
.ros-x-ok {
  background: linear-gradient(180deg, #21A56C, #1C8A5B);
  color: #fff;
  box-shadow: 0 6px 16px rgba(28,138,91,0.30);
}
.ros-x-ok:hover { filter: brightness(1.05); }

/* ── «سجل المراجعات» review-history log (inside the diff drilldown) ──
   One entry per ro_reviews row, newest first. A coloured action chip per
   kind (submit=neutral, approve=green, reject=red) + who/time, and the
   reviewer note rendered in a subtle quoted box when present. */
.ros-rev-log {
  border: 1px solid var(--c-line-card);
  border-radius: var(--c-r);
  overflow: hidden;
  background: var(--c-card);
  box-shadow: var(--c-sh-card);
}
.ros-rev-log-head {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 900;
  color: #fff;
  background: linear-gradient(180deg, var(--c-primary), var(--c-base));
  padding: 9px 13px;
}
.ros-rev-log-body { padding: 4px 0; }
.ros-rev-loading, .ros-rev-empty {
  font-size: 12px; font-weight: 700; color: var(--c-ink3);
  text-align: center; padding: 16px 12px;
}
.ros-rev-item {
  padding: 10px 13px;
  border-bottom: 1px solid var(--c-line-card);
}
.ros-rev-item:last-child { border-bottom: none; }
.ros-rev-line { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.ros-rev-chip2 {
  flex-shrink: 0;
  font-size: 10px; font-weight: 900;
  letter-spacing: 0.02em;
  border-radius: var(--c-r-pill);
  padding: 3px 11px;
  border: 1px solid transparent;
}
.ros-rev-item.is-submit  .ros-rev-chip2 { color: var(--c-ink2); background: var(--c-inset2); border-color: var(--c-line2); }
.ros-rev-item.is-approve .ros-rev-chip2 { color: #15743F; background: rgba(28,138,91,0.12); border-color: rgba(28,138,91,0.32); }
.ros-rev-item.is-reject  .ros-rev-chip2 { color: #9B2C22; background: var(--c-live-soft); border-color: color-mix(in srgb, var(--c-live) 30%, transparent); }
.ros-rev-who { font-weight: 800; color: var(--c-ink); font-size: 12px; }
.ros-rev-dot { color: var(--c-ink4); }
.ros-rev-when { font-size: 11px; font-weight: 700; color: var(--c-ink3); font-variant-numeric: tabular-nums; }
.ros-rev-note {
  margin-top: 7px;
  font-size: 12px; font-weight: 600; color: var(--c-ink2);
  line-height: 1.55;
  background: var(--c-inset);
  border: 1px solid var(--c-line-card);
  border-inline-start: 3px solid var(--c-line2);
  border-radius: var(--c-r-sm);
  padding: 7px 10px;
  word-break: break-word;
  white-space: pre-wrap;
}
.ros-rev-item.is-reject .ros-rev-note {
  background: var(--c-live-soft);
  border-color: color-mix(in srgb, var(--c-live) 22%, transparent);
  border-inline-start-color: var(--c-live);
  color: #9B2C22;
}

/* ── the pending count badge on the «السجلات» records button ── */
#btn-ro-browse { position: relative; }
.ro-review-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  margin-inline-start: 5px;
  border-radius: var(--c-r-pill);
  background: var(--c-live); color: #fff;
  font-size: 10px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(210,74,62,0.4);
}

/* ── RESPONSIVE ── */
@media (max-width: 720px) {
  .ros-toolbar { gap: 10px; }
  .ros-filters { width: 100%; }
  .ros-search { flex: 1; }
  .ros-search-inp { min-width: 0; width: 100%; }
  .ros-cards { grid-template-columns: 1fr; }
  .ros-body { max-height: calc(100vh - 320px); }
  /* stack the before→after diff rows so old/new each get a full line */
  .ros-drow {
    grid-template-columns: 1fr;
    gap: 5px;
    justify-items: stretch;
  }
  .ros-darrow { justify-self: center; transform: rotate(90deg); }
  .ros-diff-acts { flex-wrap: wrap; }
  .ros-diff-acts .ros-x { flex: 1; }
}

/* hide the browser while printing */
@media print {
  .ros-modal-ov { display: none !important; }
}

/* ════════════════════════════════════════════════════════════
   IN-APP DIALOGS (confirm / prompt) + TOASTS — window.UI (ui.js)
   Body-level, so colours are literal (the --c-* palette is scoped
   to other roots). Charcoal + gold, danger red, registration ticks.
   ════════════════════════════════════════════════════════════ */
.ui-modal-ov {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(18,16,10,0.52);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.18s ease;
}
.ui-modal-ov.ui-show { opacity: 1; }
.ui-dialog {
  position: relative; width: 100%; max-width: 384px;
  background: var(--bg1); border: 1px solid var(--bd2); border-radius: 16px;
  padding: 28px 24px 20px; text-align: center;
  box-shadow: 0 26px 70px rgba(16,18,21,0.34), 0 6px 18px rgba(16,18,21,0.14);
  transform: translateY(10px) scale(0.95); opacity: 0;
  transition: transform 0.22s cubic-bezier(0.2,0.9,0.3,1), opacity 0.22s;
}
.ui-modal-ov.ui-show .ui-dialog { transform: none; opacity: 1; }
.ui-dialog .reg-tick { position: absolute; width: 11px; height: 11px; pointer-events: none; }
.ui-dialog .reg-tick::before, .ui-dialog .reg-tick::after { content: ""; position: absolute; background: var(--bd2); }
.ui-dialog .reg-tick::before { width: 100%; height: 1px; top: 50%; transform: translateY(-50%); }
.ui-dialog .reg-tick::after { height: 100%; width: 1px; left: 50%; transform: translateX(-50%); }
.ui-dialog .reg-tick.tl { top: 7px; left: 7px; } .ui-dialog .reg-tick.tr { top: 7px; right: 7px; }
.ui-dialog .reg-tick.bl { bottom: 7px; left: 7px; } .ui-dialog .reg-tick.br { bottom: 7px; right: 7px; }
.ui-dialog-ic {
  width: 62px; height: 62px; margin: 2px auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.ui-dialog-ic svg { width: 28px; height: 28px; }
.ui-dialog-ic::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid currentColor; opacity: 0.16; }
.ui-dialog.is-danger .ui-dialog-ic { background: rgba(242,104,91,0.15); color: var(--danger); }
.ui-dialog.is-gold .ui-dialog-ic { background: rgba(43,212,106,0.15); color: #C2842A; }
.ui-dialog-title { font-family: var(--font-display); font-size: 20px; font-weight: 900; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; }
.ui-dialog-text { font-size: 13.5px; color: var(--g5); margin-top: 9px; line-height: 1.6; }
.ui-dialog-name {
  display: inline-block; max-width: 100%; margin-top: 13px;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink);
  background: var(--bg2); border: 1px solid var(--border); border-radius: 9px; padding: 6px 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-dialog-inp {
  width: 100%; margin-top: 16px; text-align: center; background: var(--bg2);
  border: 1.5px solid var(--border); border-radius: 9px; padding: 11px 12px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--ink); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ui-dialog-inp:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(43,212,106,0.16); }
/* multiline variant (UI.prompt {multiline:true}) — taller, vertically resizable,
   start-aligned RTL text. The danger dialog tints its focus ring red. */
.ui-dialog-area {
  width: 100%; margin-top: 16px; text-align: start; background: var(--bg2);
  border: 1.5px solid var(--border); border-radius: 9px; padding: 11px 12px;
  font-family: var(--font-sans); font-size: 14.5px; font-weight: 700; color: var(--ink);
  line-height: 1.6; outline: none; resize: vertical; min-height: 78px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ui-dialog-area::placeholder { color: var(--g4); font-weight: 600; }
.ui-dialog-area:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(43,212,106,0.16); }
.ui-dialog.is-danger .ui-dialog-area:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(200,54,43,0.16); }
.ui-dialog-err { margin-top: 9px; font-size: 12px; font-weight: 700; color: var(--danger); }
.ui-dialog-acts { display: flex; gap: 10px; margin-top: 22px; }
.ui-x {
  flex: 1; border-radius: 10px; padding: 12px; font-family: var(--font-sans);
  font-size: 14px; font-weight: 800; cursor: pointer; border: 1px solid transparent;
  transition: filter 0.15s, background 0.15s, border-color 0.15s;
}
.ui-x-ghost { background: transparent; border-color: var(--bd2); color: var(--g5); }
.ui-x-ghost:hover { background: var(--bg2); }
.ui-x-danger { background: linear-gradient(180deg, #E0534A, var(--danger)); color: #fff; box-shadow: 0 6px 16px rgba(200,54,43,0.32); }
.ui-x-danger:hover { filter: brightness(1.07); }
.ui-x-gold { background: linear-gradient(180deg, var(--green), #C2842A); color: #2A1B05; box-shadow: 0 6px 16px rgba(43,212,106,0.32); }
.ui-x-gold:hover { filter: brightness(1.05); }

.ui-toasts {
  position: fixed; z-index: 4100; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 9px; align-items: center; pointer-events: none;
}
.ui-toast {
  display: flex; align-items: center; gap: 9px;
  background: #22262C; color: #F4F5F6; border-radius: 11px; padding: 11px 17px;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 700;
  box-shadow: 0 12px 32px rgba(16,18,21,0.34); max-width: 90vw;
  opacity: 0; transform: translateY(12px); transition: opacity 0.24s, transform 0.24s;
}
.ui-toast.ui-show { opacity: 1; transform: none; }
.ui-toast-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--green); }
.ui-toast-error { background: #3A1F1C; }
.ui-toast-error .ui-toast-dot { background: #E0534A; }
.ui-toast-success .ui-toast-dot { background: #36B37E; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
/* The action toolbar (selector + 7 buttons + autosave) is ~960px. The «RUNNING
   ORDER» label was removed to free space, so it now shares ONE row with the logo
   + account down to ~1260px (the title selector shrinks to fit). Only below that
   does it drop to its own full-width row (clean, no overlap). */
@media (max-width: 1260px) {
  .topbar-mid { order: 3; flex-basis: 100%; justify-content: center; margin-top: 2px; }
}
/* On its own row, only wrap internally once it truly cannot fit (small laptops). */
@media (max-width: 1080px) {
  .ro-toolbar { flex-wrap: wrap; }
}
@media (max-width: 860px) {
  .topbar { gap: 8px; }
  .topbar-mid { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .ro-toolbar { justify-content: flex-start; flex-wrap: wrap; }
  .admin-create-row { grid-template-columns: 1fr 1fr; }
  .ro-select { min-width: 140px; }
}

/* ════════════════════════════════════════════════════════════
   PRINT — hide the entire on-screen app. The printed document is
   #ro-print-doc, built by ro-editor.js (styled in ro.css).
   ════════════════════════════════════════════════════════════ */
@media print {
  #login-overlay,
  #app-shell,
  .topbar,
  .account-wrap,
  .plan-view,
  .plan-formov,
  .modal-overlay { display: none !important; }
}

/* ════════════════════════════════════════════════════════════
   STUDIO PLANNING / ROSTER  (#plan-view · window.Plan · plan.js)
   A full-screen charcoal+gold sheet layered over the app. Owns its
   OWN namespaced palette (--p-*) declared on #plan-view + the
   body-level form overlay (.plan-formov) so nothing leaks into the
   print document or the RO editor. Charcoal chrome, gold accents,
   white cards, warm canvas — matching the rest of the shell.

   Sections below:
     · palette + full-screen sheet + header + month selector
     · admin tab strip + pending badge
     · shared: sections, states, studio chips, status pills, buttons
     · EMPLOYEE month calendar (emp-grid) + my-requests
     · ADMIN employees×days grid (sticky name col, day heads, accents)
     · ADMIN assign tab form
     · ADMIN approvals inbox + current→proposed diff
     · body-level form overlay (assign / edit / request)
   ════════════════════════════════════════════════════════════ */
.plan-view,
.plan-formov {
  /* pure-dark chrome */
  --p-base:    #0B0D0F;
  --p-primary: #15181B;
  --p-base2:   #181B1F;
  --p-on:      #F4F5F6;
  --p-on-dim:  #A6ABB2;
  --p-hair-d:  rgba(255,255,255,0.12);
  /* canvas / surfaces — DARK */
  --p-canvas:  #0E1012;
  --p-canvas2: #0A0C0E;
  --p-card:    #1A1D21;
  --p-inset:   #121519;
  --p-inset2:  #23282E;
  /* ink — light on dark */
  --p-ink:  #ECEEF0;
  --p-ink2: #C4C9CE;
  --p-ink3: #949AA1;
  --p-ink4: #6E747B;
  /* accent — bright ثمانية green */
  --p-gold:    #2BD46A;
  --p-gold-d:  #1FB257;
  --p-gold-soft: rgba(43,212,106,0.15);
  --p-gold-line: rgba(43,212,106,0.42);
  --p-gold-ink: #05140B;
  /* lines on dark */
  --p-line:  rgba(255,255,255,0.10);
  --p-line2: rgba(255,255,255,0.16);
  --p-line-card: rgba(255,255,255,0.08);
  /* status (bright ink on dark) */
  --p-live:  #F2685B;
  --p-live-soft: rgba(242,104,91,0.15);
  --p-live-ink:  #F2685B;
  --p-ok:    #2BD46A;
  --p-ok-soft: rgba(43,212,106,0.15);
  --p-ok-ink:  #2BD46A;
  --p-warn:  #E6B84A;
  --p-warn-soft: rgba(230,184,74,0.15);
  --p-warn-ink:  #E6B84A;
  /* radii + shadows */
  --p-r-sm: 7px; --p-r: 11px; --p-r-lg: 16px; --p-pill: 999px;
  --p-sh-card: 0 1px 2px rgba(0,0,0,0.30), 0 10px 30px rgba(0,0,0,0.40);
  --p-sh-pop:  0 18px 50px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.40);
  --p-sh-gold: 0 4px 16px rgba(43,212,106,0.30);
}

/* ── full-screen sheet ── */
.plan-view {
  position: fixed;
  inset: 0;
  z-index: 920;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 540px at 88% -6%, rgba(34,38,44,0.06), transparent 60%),
    radial-gradient(900px 460px at 6% 0%, rgba(43,212,106,0.06), transparent 55%),
    var(--p-canvas);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.plan-view.plan-show { opacity: 1; }
.plan-sheet {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
/* freeze background scroll while the plan is open */
body.plan-open { overflow: hidden; }

/* ── header: charcoal band + title + month selector + close ── */
.plan-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 22px;
  background: linear-gradient(180deg, var(--p-primary) 0%, var(--p-base) 100%);
  border-bottom: 1px solid var(--p-hair-d);
  position: relative;
  box-shadow: 0 6px 22px rgba(16,18,21,0.22);
}
.plan-head::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--p-gold) 16%, var(--p-gold) 84%, transparent);
  opacity: 0.6; pointer-events: none;
}
.plan-head-l { display: inline-flex; align-items: center; gap: 11px; }
.plan-flower { width: 22px; height: 22px; color: var(--p-gold); display: inline-flex; }
.plan-flower svg { width: 100%; height: 100%; }
.plan-title {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 900; color: #fff;
  letter-spacing: 0.01em;
}

.plan-monthsel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--p-hair-d);
  border-radius: var(--p-pill);
}
.plan-mbtn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--p-hair-d);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 800; line-height: 1;
  min-width: 32px; height: 32px;
  padding: 0 9px;
  border-radius: var(--p-pill);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.plan-mbtn:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.2); }
.plan-mtoday { font-size: 11.5px; font-weight: 800; letter-spacing: 0.02em; }
.plan-mlabel {
  min-width: 130px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums;
  padding: 0 6px;
}

.plan-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--p-pill);
  color: var(--p-on);
  font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.01em;
  padding: 8px 15px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.plan-close:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.4); }

/* ── admin tab strip ── */
.plan-tabs {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 11px 22px;
  background: var(--p-inset);
  border-bottom: 1px solid var(--p-line-card);
}
.plan-tab {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  color: var(--p-ink3);
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.01em;
  padding: 8px 18px;
  border-radius: var(--p-pill);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.plan-tab:hover { color: var(--p-ink); background: var(--p-inset2); }
.plan-tab.is-active {
  background: linear-gradient(180deg, var(--p-primary), var(--p-base));
  color: #fff;
  box-shadow: 0 2px 8px rgba(16,18,21,0.18);
}
.plan-tabbadge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--p-pill);
  background: var(--p-live);
  color: #fff;
  font-size: 10.5px; font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.plan-tab.is-active .plan-tabbadge { background: var(--p-gold); color: var(--p-gold-ink); }

/* ── body scroll region ── */
.plan-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
  outline: none;
}

/* loading / empty / error states */
.plan-state {
  text-align: center;
  color: var(--p-ink3);
  font-size: 14px; font-weight: 700;
  padding: 64px 16px;
}
.plan-state.plan-error {
  max-width: 560px; margin: 40px auto;
  color: var(--p-live-ink);
  background: var(--p-live-soft);
  border: 1px solid color-mix(in srgb, var(--p-live) 30%, transparent);
  border-inline-start: 3px solid var(--p-live);
  border-radius: var(--p-r-sm);
  padding: 18px 16px;
}
.plan-state.plan-empty { color: var(--p-ink3); }

/* ── shared sections ── */
.plan-section { max-width: 1180px; margin: 0 auto 26px; }
.plan-section:last-child { margin-bottom: 8px; }
.plan-section-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 9px;
  border-bottom: 1px dashed var(--p-line2);
}
.plan-section-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 800; color: var(--p-ink);
  letter-spacing: 0.01em;
}
.plan-section-sub {
  font-size: 12px; font-weight: 700; color: var(--p-ink3);
  font-variant-numeric: tabular-nums;
}
.plan-empty {
  text-align: center; color: var(--p-ink3);
  font-size: 13.5px; font-weight: 700;
  background: var(--p-card);
  border: 1px dashed var(--p-line2);
  border-radius: var(--p-r);
  padding: 34px 18px;
}
.plan-empty-sm { padding: 20px 16px; font-size: 12.5px; }

/* ── studio chip (shared employee calendar + legend) ── */
.studio-chip {
  display: inline-flex; align-items: center;
  max-width: 100%;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.01em;
  padding: 4px 11px;
  border-radius: var(--p-pill);
  border: 1px solid transparent;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── RO-crew "show" chip (employee «خطتي») ──
   The employee is named as crew on a running order whose broadcast date
   falls on this day. Distinct DASHED/OUTLINE look vs. the solid studio chip. */
.show-chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: var(--p-r-sm);
  background: var(--p-gold-soft);
  border: 1px dashed var(--p-gold-line);
  color: var(--p-warn-ink);
  overflow: hidden;
}
.show-chip-ic { font-size: 11px; line-height: 1; flex: none; }
.show-chip-role { font-weight: 900; white-space: nowrap; flex: none; }
.show-chip-title {
  font-weight: 700; color: var(--p-ink2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── «مهامي في السجلات» list (employee RO-crew tasks for the month) ── */
.show-list { display: flex; flex-direction: column; gap: 8px; }
.show-row {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  background: var(--p-card);
  border: 1px solid var(--p-line-card);
  border-inline-start: 3px dashed var(--p-gold-line);
  border-radius: var(--p-r-sm);
  box-shadow: var(--p-sh-card);
  padding: 9px 12px;
}
.show-row-role {
  font-size: 12px; font-weight: 900; color: var(--p-warn-ink);
  background: var(--p-gold-soft);
  border: 1px solid var(--p-gold-line);
  border-radius: var(--p-pill);
  padding: 2px 10px; white-space: nowrap;
}
.show-row-title {
  font-size: 13px; font-weight: 800; color: var(--p-ink);
  flex: 1; min-width: 120px; word-break: break-word;
}
.show-row-date {
  font-size: 11px; font-weight: 700; color: var(--p-ink3);
  font-variant-numeric: tabular-nums; margin-inline-start: auto; white-space: nowrap;
}
/* clickable shows → open the running order. The day-cell chip + the list row. */
.show-chip.is-clickable { cursor: pointer; transition: background 0.13s, border-color 0.13s; }
.show-chip.is-clickable:hover { background: var(--p-gold); border-style: solid; border-color: var(--p-gold); color: var(--p-gold-ink); }
.show-chip.is-clickable:hover .show-chip-title { color: var(--p-gold-ink); }
.show-row.is-clickable { cursor: pointer; transition: box-shadow 0.13s, border-color 0.13s, transform 0.13s; }
.show-row.is-clickable:hover { border-color: var(--p-gold-line); border-inline-start-style: solid; box-shadow: var(--p-sh-pop); transform: translateY(-1px); }
.show-row.is-clickable:focus-visible { outline: 2px solid var(--p-gold); outline-offset: 1px; }
.show-row-open {
  font-size: 11px; font-weight: 800; color: var(--p-warn-ink);
  white-space: nowrap; opacity: 0; transition: opacity 0.13s;
}
.show-row.is-clickable:hover .show-row-open { opacity: 1; }

/* ── RO-crew overlay chip in the ADMIN grid cell ──
   Outline/dashed so the planner reads it as different from the solid
   studio assignment chip. Sits below the studio chip when both exist. */
.grid-showchip {
  display: block;
  max-width: 100%;
  margin-top: 3px;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.25;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--p-gold-soft);
  border: 1px dashed var(--p-gold-line);
  color: var(--p-warn-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grid-cell.has-shows .grid-plus { opacity: 0.45; }
/* legend marker for the RO-crew chip */
.legend-item-show { color: var(--p-warn-ink); font-weight: 800; }
.legend-showsw {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 14px; margin-inline-end: 5px;
  border-radius: 4px;
  background: var(--p-gold-soft);
  border: 1px dashed var(--p-gold-line);
  font-size: 9px; line-height: 1;
}

/* ── status pill (request states) ── */
.status-pill {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 11px;
  border-radius: var(--p-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-pending  { background: var(--p-warn-soft); color: var(--p-warn-ink); border-color: var(--p-gold-line); }
.status-approved { background: var(--p-ok-soft);   color: var(--p-ok-ink);   border-color: rgba(28,138,91,0.35); }
.status-rejected { background: var(--p-live-soft); color: var(--p-live-ink); border-color: color-mix(in srgb, var(--p-live) 32%, transparent); }

/* ── shared buttons (gold / ghost / ghost-danger) ── */
.plan-x {
  border-radius: var(--p-r-sm);
  font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.01em;
  padding: 9px 16px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}
.plan-x:disabled { opacity: 0.55; cursor: default; }
.plan-x-gold {
  background: linear-gradient(180deg, var(--p-gold), var(--p-gold-d));
  color: var(--p-gold-ink);
  box-shadow: var(--p-sh-gold);
}
.plan-x-gold:hover { filter: brightness(1.04); }
.plan-x-ghost { background: transparent; border-color: var(--p-line2); color: var(--p-ink2); }
.plan-x-ghost:hover { background: var(--p-inset); }
.plan-x-ghost-danger { background: transparent; border-color: var(--p-line2); color: var(--p-live); }
.plan-x-ghost-danger:hover { background: var(--p-live-soft); border-color: var(--p-live); color: var(--p-live-ink); }

/* ════════════════════ EMPLOYEE — «خطتي» calendar ════════════════════ */
.emp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 11px;
}
.emp-cell {
  background: var(--p-card);
  border: 1px solid var(--p-line-card);
  border-radius: var(--p-r);
  box-shadow: var(--p-sh-card);
  padding: 11px 12px 12px;
  min-height: 92px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.emp-cell.is-filled { border-color: var(--p-line2); }
.emp-cell.is-weekend { background: var(--p-inset); }
.emp-cell.is-today {
  border-color: var(--p-gold);
  box-shadow: 0 0 0 2px rgba(43,212,106,0.22), var(--p-sh-card);
}
.emp-cell-head {
  display: flex; align-items: center; gap: 7px;
}
.emp-cell-dow {
  font-size: 11px; font-weight: 800; color: var(--p-ink3);
  letter-spacing: 0.02em;
}
.emp-cell-day {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 900; color: var(--p-ink);
  font-variant-numeric: tabular-nums;
  margin-inline-start: auto;
}
.emp-cell.is-today .emp-cell-day { color: var(--p-gold-d); }
.emp-cell-todaytag {
  font-size: 8.5px; font-weight: 900; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-gold-ink);
  background: var(--p-gold);
  border-radius: var(--p-pill);
  padding: 2px 7px;
}
.emp-cell-asg { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.emp-cell-asg + .emp-cell-asg { padding-top: 8px; border-top: 1px dashed var(--p-line-card); }
.emp-cell-shift {
  font-size: 11px; font-weight: 800; color: var(--p-ink2);
  background: var(--p-inset2);
  border: 1px solid var(--p-line2);
  border-radius: var(--p-pill);
  padding: 2px 9px;
}
.emp-cell-note {
  font-size: 11.5px; font-weight: 600; color: var(--p-ink3);
  line-height: 1.5;
  word-break: break-word;
}
.emp-cell-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--p-ink4); font-size: 18px; font-weight: 700;
  min-height: 30px;
}
.emp-cell-edit {
  margin-top: 2px;
  background: transparent;
  border: 1px solid var(--p-line2);
  color: var(--p-gold-d);
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.01em;
  padding: 5px 11px;
  border-radius: var(--p-pill);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.emp-cell-edit:hover { background: var(--p-gold-soft); border-color: var(--p-gold-line); color: var(--p-warn-ink); }

/* ── employee «طلباتي» + admin approvals share .req-* card styling ── */
.req-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 13px; }
.req-card {
  background: var(--p-card);
  border: 1px solid var(--p-line-card);
  border-radius: var(--p-r);
  box-shadow: var(--p-sh-card);
  padding: 14px 15px;
  display: flex; flex-direction: column; gap: 11px;
  position: relative;
}
.req-card::before {
  content: ""; position: absolute; inset-block: 12px; inset-inline-start: 0;
  width: 3px; border-radius: 99px;
  background: linear-gradient(180deg, var(--p-gold), var(--p-gold-d));
  opacity: 0.85;
}
.req-card.my-req::before { opacity: 0.5; }
.req-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding-inline-start: 8px;
}
.req-who { display: flex; flex-direction: column; gap: 3px; }
.req-who-name { font-family: var(--font-display); font-size: 14px; font-weight: 800; color: var(--p-ink); }
.req-who-sub { font-size: 11px; font-weight: 700; color: var(--p-ink3); }
.req-when { font-size: 10.5px; font-weight: 700; color: var(--p-ink4); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* current → proposed diff */
.req-diff {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 11px;
  margin-inline-start: 8px;
  background: var(--p-inset);
  border: 1px solid var(--p-line-card);
  border-radius: var(--p-r-sm);
}
.diff-line {
  display: grid;
  grid-template-columns: 64px 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.4;
}
.diff-lbl { font-weight: 800; color: var(--p-ink3); }
.diff-cur { color: var(--p-ink3); text-align: start; word-break: break-word; }
.diff-prop { color: var(--p-ink2); font-weight: 700; text-align: start; word-break: break-word; }
.diff-arrow { color: var(--p-ink4); font-weight: 800; }
.diff-line.is-changed { background: var(--p-warn-soft); border-radius: 6px; padding: 3px 6px; margin: -3px -6px; }
.diff-line.is-changed .diff-cur { color: var(--p-ink4); text-decoration: line-through; }
.diff-line.is-changed .diff-prop { color: var(--p-warn-ink); font-weight: 800; }
.diff-line.is-changed .diff-arrow { color: var(--p-gold-d); }

.req-reason, .req-review {
  font-size: 12px; color: var(--p-ink2); line-height: 1.55;
  padding-inline-start: 8px;
  word-break: break-word;
}
.req-reason-lbl { font-weight: 800; color: var(--p-ink3); }
.req-review {
  background: var(--p-inset2); border: 1px solid var(--p-line-card);
  border-radius: var(--p-r-sm); padding: 8px 10px; margin-inline-start: 8px;
}
.req-acts { display: flex; gap: 9px; padding-inline-start: 8px; }
.req-acts .plan-x { flex: 1; text-align: center; }

/* ════════════════════ ADMIN — employees × days GRID ════════════════════ */
.grid-wrap-head {
  max-width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.grid-legend { display: flex; flex-wrap: wrap; gap: 7px 13px; }
.legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: var(--p-ink2);
}
.legend-sw {
  width: 13px; height: 13px; border-radius: 4px;
  border: 1px solid transparent; flex-shrink: 0;
}

.grid-scroll {
  overflow: auto;
  border: 1px solid var(--p-line2);
  border-radius: var(--p-r);
  background: var(--p-card);
  box-shadow: var(--p-sh-card);
  max-height: calc(100vh - 230px);
}
.plan-grid {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-size: 12px;
}
/* sticky header row */
.plan-grid thead th {
  position: sticky; top: 0;
  z-index: 3;
  background: linear-gradient(180deg, var(--p-primary), var(--p-base));
  color: var(--p-on);
  border-inline-start: 1px solid var(--p-hair-d);
  padding: 0;
}
/* sticky top-inline-start corner (employee header) */
.grid-corner {
  inset-inline-start: 0;
  z-index: 5 !important;
  min-width: 140px; max-width: 180px;
  text-align: start;
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 13px !important;
  border-inline-start: none !important;
  box-shadow: 1px 0 0 var(--p-hair-d);
}
.grid-dh {
  min-width: 58px;
  text-align: center;
  padding: 7px 4px !important;
  vertical-align: middle;
}
.grid-dh-dow { display: block; font-size: 8.5px; font-weight: 800; color: var(--p-on-dim); letter-spacing: 0.02em; }
.grid-dh-num { display: block; font-size: 13px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; margin-top: 2px; }
.grid-dh.is-weekend { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); }
.grid-dh.is-weekend .grid-dh-num { color: var(--p-gold); }
.grid-dh.is-today {
  background: linear-gradient(180deg, var(--p-gold), var(--p-gold-d));
}
.grid-dh.is-today .grid-dh-dow,
.grid-dh.is-today .grid-dh-num { color: var(--p-gold-ink); }

/* sticky employee-name column */
.grid-name {
  position: sticky; inset-inline-start: 0;
  z-index: 2;
  background: var(--p-card);
  min-width: 140px; max-width: 180px;
  text-align: start;
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 800; color: var(--p-ink);
  padding: 9px 13px;
  border-bottom: 1px solid var(--p-line-card);
  box-shadow: 1px 0 0 var(--p-line2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grid-row:nth-child(even) .grid-name { background: var(--p-inset); }

.grid-cell {
  border-inline-start: 1px solid var(--p-line-card);
  border-bottom: 1px solid var(--p-line-card);
  padding: 5px 5px;
  text-align: center;
  vertical-align: middle;
  min-width: 58px;
  height: 46px;
  transition: background 0.12s;
}
.grid-row:nth-child(even) .grid-cell { background: rgba(255,255,255,0.03); }
.grid-cell.is-weekend { background: rgba(255,255,255,0.05); }
.grid-row:nth-child(even) .grid-cell.is-weekend { background: rgba(255,255,255,0.07); }
.grid-cell.is-today { box-shadow: inset 0 0 0 2px rgba(43,212,106,0.25); }
.grid-cell.is-empty { cursor: pointer; }
.grid-cell.is-empty:hover { background: var(--p-gold-soft); }
.grid-cell.is-filled { cursor: pointer; }
.grid-cell.is-filled:hover { background: var(--p-inset2); }
.grid-plus { color: var(--p-ink4); font-size: 15px; font-weight: 700; opacity: 0; transition: opacity 0.12s; }
.grid-cell.is-empty:hover .grid-plus { opacity: 1; color: var(--p-gold-d); }
.grid-chip {
  display: block;
  max-width: 100%;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.01em;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grid-chip-shift {
  display: block;
  margin-top: 2px;
  font-size: 9px; font-weight: 700; color: var(--p-ink3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ════════════════════ ADMIN — «إسناد» assign tab ════════════════════ */
.assign-form {
  background: var(--p-card);
  border: 1px solid var(--p-line);
  border-radius: var(--p-r);
  box-shadow: var(--p-sh-card);
  padding: 18px;
}
.assign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 13px;
}
.assign-note { grid-column: 1 / -1; }
.assign-acts { display: flex; justify-content: flex-end; margin-top: 16px; }
.assign-acts .plan-x { padding: 11px 22px; font-size: 13px; }
.assign-hint {
  max-width: 1180px; margin: 12px auto 0;
  font-size: 11.5px; font-weight: 600; color: var(--p-ink4);
  text-align: center;
}
.assign-err { margin-top: 13px; }

/* ── form fields (shared by assign tab + overlays) ── */
.plan-f { display: flex; flex-direction: column; gap: 6px; }
.plan-f-lbl { font-size: 11px; font-weight: 800; color: var(--p-ink3); letter-spacing: 0.02em; }
.plan-inp {
  background: var(--p-inset);
  border: 1.5px solid var(--p-line2);
  border-radius: var(--p-r-sm);
  color: var(--p-ink);
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 700;
  padding: 10px 12px;
  outline: none;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.plan-inp:focus { border-color: var(--p-gold); background: var(--p-card); box-shadow: 0 0 0 3px rgba(43,212,106,0.18); }
.plan-inp::placeholder { color: var(--p-ink4); font-weight: 600; }
.plan-ta { resize: vertical; min-height: 44px; line-height: 1.5; }
.plan-sel { -webkit-appearance: none; appearance: none; cursor: pointer; }
.plan-sel option { background: var(--p-card); color: var(--p-ink); }
.plan-static {
  background: var(--p-inset2);
  border: 1.5px solid var(--p-line2);
  border-radius: var(--p-r-sm);
  color: var(--p-ink);
  font-family: var(--font-display);
  font-size: 14px; font-weight: 800;
  padding: 10px 12px;
}

/* ════════════════════ body-level FORM OVERLAY (assign/edit/request) ════════════════════ */
.plan-formov {
  position: fixed; inset: 0;
  z-index: 3600;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(16,18,21,0.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.18s ease;
  overflow-y: auto;
}
.plan-formov.is-show { opacity: 1; }
.plan-form-card {
  width: 100%; max-width: 432px;
  background: var(--p-card);
  border: 1px solid var(--p-line);
  border-radius: var(--p-r-lg);
  box-shadow: var(--p-sh-pop);
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 13px;
  transform: translateY(10px) scale(0.97);
  transition: transform 0.22s cubic-bezier(0.2,0.9,0.3,1);
}
.plan-formov.is-show .plan-form-card { transform: none; }
.plan-form-head {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 900; color: var(--p-ink);
  letter-spacing: 0.01em;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--p-line-card);
}
.plan-form-sub { font-weight: 700; color: var(--p-gold-d); font-size: 14px; }
.plan-form-err {
  background: var(--p-live-soft);
  border: 1px solid color-mix(in srgb, var(--p-live) 30%, transparent);
  border-inline-start: 3px solid var(--p-live);
  color: var(--p-live-ink);
  font-size: 12px; font-weight: 700;
  border-radius: var(--p-r-sm);
  padding: 9px 11px;
}
.plan-form-acts { display: flex; gap: 10px; margin-top: 4px; }
.plan-form-acts .plan-x { flex: 1; text-align: center; padding: 11px; }
.plan-form-acts-edit { justify-content: space-between; }
.plan-form-acts-edit .plan-x[data-fact="delete"] { flex: 0 0 auto; }
.plan-form-acts-r { display: flex; gap: 10px; flex: 1; }
.plan-form-acts-r .plan-x { flex: 1; text-align: center; padding: 11px; }

/* ════════════════════ topbar «الخطة» button badge ════════════════════ */
#btn-plan { position: relative; }
.plan-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  margin-inline-start: 5px;
  border-radius: var(--c-pill, 999px);
  background: var(--c-live, #D24A3E);
  color: #fff;
  font-size: 10px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(210,74,62,0.4);
}

/* ════════════════════ responsive ════════════════════ */
@media (max-width: 720px) {
  .plan-head { gap: 10px; padding: 11px 16px; }
  .plan-monthsel { order: 3; flex-basis: 100%; justify-content: center; }
  .plan-tabs { padding: 9px 14px; overflow-x: auto; }
  .plan-tab { padding: 7px 13px; font-size: 12px; }
  .plan-body { padding: 16px 14px; }
  .emp-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .req-list { grid-template-columns: 1fr; }
  .grid-scroll { max-height: calc(100vh - 260px); }
}

/* ════════════════ «سجل التحديثات» — release notes ════════════════ */
/* top-bar updates / version icon */
.updates-btn {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 11px; margin-inline-end: 8px;
  background: var(--c-gold-soft); color: var(--c-gold);
  border: 1px solid var(--c-gold-line); border-radius: var(--c-r-pill, 999px);
  cursor: pointer; font-family: var(--font-sans, inherit);
  font-size: 12px; font-weight: 800; letter-spacing: 0.02em; flex-shrink: 0;
  transition: background 0.15s, filter 0.15s;
}
.updates-btn:hover { filter: brightness(1.12); background: rgba(43,212,106,0.22); }
.updates-ic { font-size: 13px; line-height: 1; }
.updates-ver { font-variant-numeric: tabular-nums; }
.updates-dot {
  position: absolute; top: -3px; inset-inline-end: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-live, #E0544A); border: 2px solid #0E1012;
}
@media (max-width: 1100px) { .updates-ver { display: none; } .updates-btn { padding: 0 9px; } }

/* modal */
.rn-ov {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(8,10,12,0.93); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.16s;
}
.rn-ov.rn-show { opacity: 1; }
.rn-modal {
  width: 100%; max-width: 640px; max-height: 84vh;
  display: flex; flex-direction: column; direction: rtl;
  background: #1A1D21; color: var(--c-ink, #ECEEF0);
  border: 1px solid var(--c-line2, rgba(255,255,255,0.14)); border-radius: 16px;
  overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,0.5);
  transform: translateY(8px); transition: transform 0.16s; font-family: var(--font-sans, inherit);
}
.rn-ov.rn-show .rn-modal { transform: none; }
.rn-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 15px 18px;
  background: linear-gradient(180deg, var(--c-primary), var(--c-base));
  border-bottom: 1px solid var(--c-hair-d, rgba(255,255,255,0.08));
}
.rn-head h2 { margin: 0; font-size: 17px; font-weight: 800; color: #fff; font-family: var(--font-display, inherit); }
.rn-cur { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700; color: var(--c-gold); }
.rn-close {
  width: 30px; height: 30px; flex-shrink: 0; cursor: pointer; font-size: 18px; line-height: 1;
  background: transparent; color: var(--c-ink3, #9aa3ab);
  border: 1px solid var(--c-line2, rgba(255,255,255,0.14)); border-radius: 8px;
}
.rn-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.rn-body { overflow-y: auto; padding: 16px 18px 20px; }
.rn-rel { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dashed var(--c-line, rgba(255,255,255,0.1)); }
.rn-rel:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.rn-rel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rn-ver {
  flex-shrink: 0; font-size: 14px; font-weight: 900; color: #06281A;
  background: var(--c-gold); padding: 4px 12px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.rn-rel-title { font-size: 14.5px; font-weight: 800; color: var(--c-ink); }
.rn-rel-date { font-size: 11.5px; font-weight: 600; color: var(--c-ink3, #8a9098); margin-top: 1px; }
.rn-group { margin-bottom: 12px; }
.rn-group:last-child { margin-bottom: 0; }
.rn-group-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 800; padding: 3px 11px; border-radius: 999px; margin-bottom: 7px;
}
.rn-group-ic { font-size: 11px; }
.rn-k-new { color: #1E9E5B; background: rgba(43,212,106,0.14); }
.rn-k-improve { color: #C79A2E; background: rgba(230,184,74,0.14); }
.rn-k-fix { color: #D8675C; background: rgba(214,69,55,0.14); }
.rn-items { margin: 0; padding: 0; list-style: none; }
.rn-items li {
  position: relative; padding-inline-start: 18px; margin-bottom: 6px;
  font-size: 13px; line-height: 1.6; color: var(--c-ink2, #c8ccd0);
}
.rn-items li::before { content: '•'; position: absolute; inset-inline-start: 2px; color: var(--c-gold); font-weight: 900; }