/* ============================ PACIGEA — base (dark aurora) ============================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--text-primary);
  background:
    radial-gradient(900px 500px at 88% -8%, rgba(245,128,10,0.10), transparent 60%),
    radial-gradient(800px 600px at 8% 12%, rgba(124,92,255,0.12), transparent 62%),
    var(--surface-page);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; color: var(--text-primary); }
h1 { font-size: var(--fs-30); }
h2 { font-size: var(--fs-24); }
h3 { font-size: var(--fs-18); }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: var(--z-toast);
  background: var(--violet-700); color:#fff; padding: var(--sp-2) var(--sp-4);
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

/* ---------- App shell ---------- */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  min-height: 100vh;
}
.sidebar { grid-area: sidebar; }
.topbar  { grid-area: topbar; }
.main {
  grid-area: main;
  padding: var(--sp-6) var(--sp-8);
  max-width: var(--container-max);
  width: 100%;
}

/* ---------- Sidebar ---------- */
.sidebar {
  /* Aurora treatment (matches the reference): the project's background.png
     bleeds through a deep indigo→violet scrim so the violet glow reads at
     the lower third near the brand card while nav labels stay legible. */
  background:
    linear-gradient(180deg, rgba(13,10,31,0.94) 0%, rgba(17,13,38,0.86) 42%, rgba(46,22,86,0.62) 78%, rgba(124,60,150,0.42) 100%),
    url('/assets/img/background.png');
  background-size: cover;
  background-position: left bottom;
  background-repeat: no-repeat;
  border-right: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  display: flex; flex-direction: column;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar__brand { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-2) var(--sp-6); }
.sidebar__brand img {
  width: 50px; height: 50px; border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), var(--elev-2);
}
.sidebar__brand-text { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-20); color:#fff; letter-spacing: 0.04em; }
.sidebar__brand-sub  { font-size: var(--fs-12); color: var(--lavender-300); line-height: 1.35; }

.sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar__group-label {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-muted); padding: var(--sp-5) var(--sp-3) var(--sp-2); font-weight: 700;
}
.sidebar__group-label:first-child { padding-top: var(--sp-2); }
.sidebar__link {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px var(--sp-3); border-radius: var(--r-md);
  color: var(--text-secondary); font-weight: 500; font-size: var(--fs-14);
  position: relative; transition: background var(--motion-ui), color var(--motion-ui);
}
.sidebar__link:hover { background: var(--surface-glass-hi); color:#fff; text-decoration: none; }
.sidebar__link.is-active {
  background: var(--grad-accent); color:#fff; font-weight: 600;
  box-shadow: var(--glow-accent);
}
.sidebar__link.is-active .sidebar__link-icon { color:#fff; }
.sidebar__link-icon { width: 19px; height: 19px; flex-shrink: 0; color: var(--lavender-500); stroke-width: 2; }
.sidebar__link:hover .sidebar__link-icon { color:#fff; }
/* Emphasised awareness tab — gold hairline + glow so it reads as priority */
.sidebar__link--accent {
  border: 1px solid rgba(245,180,0,0.30);
  background: linear-gradient(100deg, rgba(245,180,0,0.10), rgba(245,128,10,0.05));
}
.sidebar__link--accent .sidebar__link-icon { color: var(--gold-300); }
.sidebar__link--accent:hover { background: linear-gradient(100deg, rgba(245,180,0,0.18), rgba(245,128,10,0.10)); }
.sidebar__link--accent.is-active { border-color: transparent; }
.sidebar__pip {
  margin-left: auto; font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.08em;
  background: var(--grad-accent); color:#fff; padding: 2px 7px; border-radius: var(--r-pill);
  box-shadow: var(--glow-accent);
}
/* Info "?" hint — distinct from the orange NEW pip; signals "hover for a tip" */
.sidebar__pip--info {
  letter-spacing: 0; padding: 0; width: 18px; height: 18px;
  display: grid; place-items: center; font-size: 0.6875rem;
  background: var(--grad-stat-blue); box-shadow: 0 0 0 3px rgba(56,160,245,0.18);
  animation: pm-pip-pulse 2.6s var(--ease-standard) infinite;
}
@keyframes pm-pip-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(56,160,245,0.16); }
  50%     { box-shadow: 0 0 0 6px rgba(56,160,245,0.05); }
}
@media (prefers-reduced-motion: reduce) { .sidebar__pip--info { animation: none; } }

/* LIVE pip — green-leaf gradient + pulsing dot. Signals "this is the working
   interactive tool, click here". Used on the Lot Map sidebar entry. */
.sidebar__pip--live {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, #4aa42c 0%, #5fc83c 100%);
  color: #fff; letter-spacing: 0.10em; font-weight: 800;
  padding: 3px 8px; border-radius: var(--r-pill);
  box-shadow: 0 0 0 3px rgba(95,200,60,0.20), 0 0 14px rgba(95,200,60,0.40);
  animation: pm-pip-live 2.4s var(--ease-standard) infinite;
}
.sidebar__pip-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #d6f2c8;
  box-shadow: 0 0 0 2px rgba(214,242,200,0.35);
  animation: pm-pip-live-dot 1.4s var(--ease-standard) infinite;
}
@keyframes pm-pip-live {
  0%,100% { box-shadow: 0 0 0 3px rgba(95,200,60,0.22), 0 0 14px rgba(95,200,60,0.40); }
  50%     { box-shadow: 0 0 0 6px rgba(95,200,60,0.06), 0 0 22px rgba(95,200,60,0.55); }
}
@keyframes pm-pip-live-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.55; transform: scale(0.82); }
}

/* Lot Map sidebar entry — green-tinted hairline so users see the LIVE tab
   immediately, distinct from the gold "premium" accent links. */
.sidebar__link--live {
  border: 1px solid rgba(95,200,60,0.32);
  background: linear-gradient(100deg, rgba(95,200,60,0.10), rgba(74,164,44,0.04));
}
.sidebar__link--live .sidebar__link-icon { color: var(--leaf-300); }
.sidebar__link--live:hover {
  background: linear-gradient(100deg, rgba(95,200,60,0.18), rgba(74,164,44,0.08));
  border-color: rgba(95,200,60,0.55);
}
.sidebar__link--live.is-active { border-color: transparent; }
.sidebar__link--live.is-active .sidebar__link-icon { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .sidebar__pip--live, .sidebar__pip-dot { animation: none; }
}

/* Floating "what is this" tooltip — body-portal, dark glass, brand-aligned */
.pm-tip {
  position: fixed; z-index: var(--z-toast); left: -9999px; top: 0;
  max-width: 290px; padding: 10px 13px;
  background: rgba(23,19,46,0.97); color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: var(--r-md);
  font-size: var(--fs-12); line-height: 1.55;
  box-shadow: var(--elev-4); backdrop-filter: blur(10px);
  pointer-events: none; opacity: 0; transform: translateX(-4px);
  transition: opacity var(--motion-ui), transform var(--motion-ui);
}
.pm-tip--on { opacity: 1; transform: translateX(0); }
.pm-tip::before {
  content: ""; position: absolute; left: -5px; top: 50%; width: 9px; height: 9px;
  transform: translateY(-50%) rotate(45deg);
  background: rgba(23,19,46,0.97);
  border-left: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default);
}

.sidebar__card {
  margin-top: var(--sp-4);
  background: linear-gradient(150deg, rgba(124,92,255,0.16), rgba(224,69,126,0.12));
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg); padding: var(--sp-4);
}
.sidebar__card-icon {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--grad-violet); color:#fff; margin-bottom: var(--sp-3);
}
.sidebar__card-icon svg { width: 18px; height: 18px; fill:none; stroke: currentColor; stroke-width: 2; }
.sidebar__card-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-13); color:#fff; }
.sidebar__card-text { font-size: var(--fs-12); color: var(--lavender-300); margin-top: 2px; line-height: 1.45; }

/* ---------- Topbar ---------- */
.topbar {
  background: rgba(17,13,38,0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-8); position: sticky; top: 0; z-index: var(--z-nav);
}
.topbar__left { display: flex; align-items: center; gap: var(--sp-4); }
.topbar__burger {
  width: 42px; height: 42px; border-radius: var(--r-md);
  background: var(--surface-glass); border: 1px solid var(--border-default);
  display: grid; place-items: center; cursor: pointer; color: var(--text-secondary);
  transition: background var(--motion-ui), color var(--motion-ui);
}
.topbar__burger:hover { background: var(--surface-glass-hi); color:#fff; }
.topbar__burger svg { width: 18px; height: 18px; stroke-width: 2.2; }
.topbar__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-20); color: var(--text-primary); }
.topbar__crumbs { font-size: var(--fs-12); color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.topbar__crumbs .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--orange-400); display: inline-block; }
.topbar__right { display: flex; align-items: center; gap: var(--sp-4); }
.topbar__bell {
  position: relative; width: 42px; height: 42px; border-radius: var(--r-md);
  background: var(--surface-glass); border: 1px solid var(--border-default);
  display: grid; place-items: center; color: var(--text-secondary); cursor: pointer;
}
.topbar__bell:hover { background: var(--surface-glass-hi); color:#fff; }
.topbar__bell svg { width: 18px; height: 18px; stroke-width: 2; }
.topbar__bell-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--grad-stat-pink); color:#fff;
  font-size: 0.625rem; font-weight: 700; display: grid; place-items: center;
  border: 2px solid var(--surface-page);
}
.topbar__divider { width: 1px; height: 32px; background: var(--border-default); }
.topbar__user { display: flex; align-items: center; gap: var(--sp-3); }
.topbar__avatar {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--grad-violet); color:#fff; display: grid; place-items: center;
  font-weight: 700; font-size: var(--fs-13); box-shadow: var(--glow-violet);
}
.topbar__user-meta { text-align: right; }
.topbar__user-name { font-weight: 600; font-size: var(--fs-13); color: var(--text-primary); }
.topbar__user-role { font-size: var(--fs-12); color: var(--text-muted); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); box-shadow: var(--elev-2);
  position: relative;
}
.card::before {
  content:""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--grad-card-edge); border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.card__body { padding: var(--sp-5); }
.card__header {
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between;
}
.card__title { font-family: var(--font-display); font-size: var(--fs-16); font-weight: 700; color: var(--text-primary); }

/* ---------- Page header ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.page-head h1 { margin-bottom: var(--sp-1); }
.page-head__sub { color: var(--text-secondary); font-size: var(--fs-14); }

/* ---------- Grid helpers ---------- */
.grid { display: grid; gap: var(--sp-5); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width:1180px){ .grid--4{grid-template-columns:repeat(2,1fr);} .grid--3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:760px){ .grid--4,.grid--3,.grid--2{grid-template-columns:1fr;} }

/* ---------- Stat cards ---------- */
.stat {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--elev-2);
  position: relative; overflow: hidden;
}
.stat::before { content:""; position:absolute; inset:0 0 auto 0; height:1px; background: var(--grad-card-edge); }
.stat__label { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 700; }
.stat__value { font-family: var(--font-display); font-size: var(--fs-30); font-weight: 800; color: var(--text-primary); margin-top: var(--sp-1); }
.stat__hint  { font-size: var(--fs-12); color: var(--text-secondary); margin-top: var(--sp-1); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x:auto; border-radius: var(--r-lg); border:1px solid var(--border-subtle); }
table.data { width:100%; border-collapse:collapse; background: var(--surface-card); }
table.data th {
  text-align:left; font-size: var(--fs-12); text-transform:uppercase; letter-spacing:0.05em;
  color: var(--text-muted); font-weight:700; padding: var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--border-default); background: var(--surface-sunken);
}
table.data td { padding: var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border-subtle); font-size: var(--fs-14); color: var(--text-primary); }
table.data tr:last-child td { border-bottom:none; }
table.data tbody tr:hover { background: var(--surface-glass-hi); }
table.data tfoot td { font-weight:700; background: var(--surface-sunken); }
.num { text-align:right; font-variant-numeric: tabular-nums; }

/* ---------- Badges ---------- */
.badge { display:inline-flex; align-items:center; gap:4px; font-size: var(--fs-12); font-weight:600; padding:3px 10px; border-radius: var(--r-pill); background: var(--surface-glass-hi); color: var(--text-secondary); }
.badge--green{background:var(--success-50);color:var(--success-700);} .badge--orange{background:var(--warning-50);color:var(--warning-700);}
.badge--red{background:var(--danger-50);color:var(--danger-700);} .badge--blue{background:var(--info-50);color:var(--info-700);}
.badge--violet{background:rgba(124,92,255,0.18);color:#c3b1e8;}

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:var(--sp-2); font-weight:600; font-size:var(--fs-14);
  padding:var(--sp-3) var(--sp-5); border-radius:var(--r-md); border:1px solid transparent;
  cursor:pointer; transition:transform var(--motion-fast), box-shadow var(--motion-ui), background var(--motion-ui); text-decoration:none;
}
.btn:hover{text-decoration:none;} .btn:active{transform:translateY(1px);}
.btn--primary{background:var(--grad-accent);color:#fff;box-shadow:var(--glow-accent);}
.btn--primary:hover{box-shadow:var(--elev-3),var(--glow-accent);}
.btn--violet{background:var(--grad-violet);color:#fff;box-shadow:var(--glow-violet);}
.btn--ghost{background:var(--surface-glass);color:var(--text-secondary);border-color:var(--border-default);}
.btn--ghost:hover{background:var(--surface-glass-hi);color:#fff;}
.btn--danger{background:var(--danger-500);color:#fff;}
.btn--sm{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-13);}

/* ---------- Forms ---------- */
.field { margin-bottom: var(--sp-4); }
.field label { display:block; font-weight:600; font-size:var(--fs-13); margin-bottom:var(--sp-2); color:var(--text-secondary); }
.input,.select,.textarea {
  width:100%; padding:var(--sp-3); border:1px solid var(--border-default); border-radius:var(--r-md);
  background: var(--surface-sunken); color: var(--text-primary); font-size:var(--fs-14);
  transition:border-color var(--motion-ui), box-shadow var(--motion-ui);
}
.input::placeholder,.textarea::placeholder{color:var(--text-muted);}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px rgba(245,128,10,0.20);}

/* ---------- Neon search emphasis ----------------------------------
   Every type="search" input gets a violet→cyan neon border with a
   gentle pulsing halo so members notice immediately that the field
   is searchable. Focus brightens it to the brand orange.
   Applies wherever the .input class is used (members, lots, loans,
   benefits, ledger, gsis); the map page mirrors the same look via
   its inline .pm-search input styles. */
.input[type="search"],
input.input[type="search"] {
  border: 2px solid var(--violet-500);
  background:
    linear-gradient(var(--surface-sunken), var(--surface-sunken)) padding-box,
    linear-gradient(135deg, #7c5cff 0%, #2f8fed 50%, #f0608f 100%) border-box;
  box-shadow:
    0 0 0 3px rgba(124,92,255,0.14),
    0 0 18px rgba(124,92,255,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  padding-left: 2.4rem;
  background-image:
    linear-gradient(var(--surface-sunken), var(--surface-sunken)),
    linear-gradient(135deg, #7c5cff 0%, #2f8fed 50%, #f0608f 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237c5cff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
  background-origin: padding-box, border-box, padding-box;
  background-clip:   padding-box, border-box, padding-box;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0 0, 0 0, 12px center;
  background-size: auto, auto, 18px 18px;
  animation: pm-search-pulse 3.2s var(--ease-standard) infinite;
}
.input[type="search"]:hover,
input.input[type="search"]:hover {
  box-shadow:
    0 0 0 3px rgba(124,92,255,0.20),
    0 0 22px rgba(124,92,255,0.42),
    inset 0 0 0 1px rgba(255,255,255,0.05);
}
.input[type="search"]:focus,
input.input[type="search"]:focus {
  outline: none;
  background-image:
    linear-gradient(var(--surface-sunken), var(--surface-sunken)),
    linear-gradient(135deg, #f5980a 0%, #f5570a 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f5980a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
  box-shadow:
    0 0 0 3px rgba(245,128,10,0.26),
    0 0 22px rgba(245,128,10,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  animation: none;
}
@keyframes pm-search-pulse {
  0%,100% {
    box-shadow:
      0 0 0 3px rgba(124,92,255,0.14),
      0 0 18px rgba(124,92,255,0.28),
      inset 0 0 0 1px rgba(255,255,255,0.04);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(124,92,255,0.04),
      0 0 26px rgba(124,92,255,0.45),
      inset 0 0 0 1px rgba(255,255,255,0.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .input[type="search"], input.input[type="search"] { animation: none; }
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);}
@media(max-width:640px){.field-row{grid-template-columns:1fr;}}

/* ---------- Flash ---------- */
.flash{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);margin-bottom:var(--sp-4);font-size:var(--fs-14);font-weight:500;border:1px solid transparent;}
.flash--success{background:var(--success-50);color:var(--success-700);border-color:rgba(95,200,60,0.30);}
.flash--danger{background:var(--danger-50);color:var(--danger-700);border-color:rgba(240,96,79,0.34);}
.flash--info{background:var(--info-50);color:var(--info-700);border-color:rgba(91,155,237,0.30);}
.flash--warning{background:var(--warning-50);color:var(--warning-700);border-color:rgba(245,180,0,0.30);}

/* ---------- Misc ---------- */
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); font-size: var(--fs-13); }
.toolbar { display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; margin-bottom:var(--sp-4); }
.toolbar .input,.toolbar .select{width:auto;min-width:180px;}
.spacer{flex:1;}
.empty-state{text-align:center;padding:var(--sp-12) var(--sp-6);color:var(--text-muted);}
.empty-state h3{color:var(--text-secondary);margin-bottom:var(--sp-2);}
.pagination{display:flex;gap:var(--sp-2);margin-top:var(--sp-4);align-items:center;}
.section-title{font-family:var(--font-display);font-size:var(--fs-18);font-weight:700;margin:var(--sp-8) 0 var(--sp-4);color:var(--text-primary);}

/* ---------- Mobile shell ---------- */
.sidebar__scrim{display:none;}
@media (max-width: 980px) {
  /* minmax(0,1fr), NOT 1fr: a bare 1fr track is minmax(auto,1fr), so the
     topbar's min-content (one long no-wrap flex row) used to stretch the
     whole column past the viewport — every page got ~220px of horizontal
     pan/clip on phones. Clamp the track; compact the topbar instead. */
  .app-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topbar" "main"; }
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: var(--z-modal);
    width: var(--sidebar-w); transform: translateX(-100%);
    transition: transform var(--motion-med) var(--ease-standard);
  }
  .app-shell.nav-open .sidebar { transform: translateX(0); }
  .app-shell.nav-open .sidebar__scrim {
    display: block; position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1);
    background: var(--surface-overlay); backdrop-filter: blur(2px);
  }
  .main { padding: var(--sp-4); min-width: 0; }
  .topbar { padding: 0 var(--sp-4); min-width: 0; gap: var(--sp-2); }
  /* Only the LEFT side (title) may shrink — it ellipsizes. The right-side
     controls are fixed-size; letting .topbar__right shrink below content
     (min-width:0) made its buttons overflow the viewport on long titles
     (e.g. the Data Privacy gate). The title wrapper div needs min-width:0
     too or it refuses to shrink below the title's full text width. */
  .topbar__left { flex: 1 1 0; min-width: 0; }
  .topbar__left > div { min-width: 0; }
  .topbar__right { flex: 0 0 auto; }
  .topbar__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 760px) {
  /* Compact topbar: avatar + burger + bell carry the meaning on phones. */
  .topbar__crumbs, .topbar__user-meta, .theme-toggle__label, .topbar__divider { display: none; }
  .topbar__right { gap: var(--sp-2); }
}
@media (min-width: 981px) { .topbar__burger { display: none; } }