/* ================================================
   ESTOBI PORTAL — Shared Styles v3 (warm palette)
   Canonical tokens: --bg, --bg-card, --bg-soft, --bg-sunken,
                     --ink-1..5, --line-1..2, --brand,
                     --gold, --amber, --red, --blue, --r-*, --shadow-*
   Legacy --p-* names alias the canonical tokens for older pages.
   ================================================ */

/* ── Reset ───────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}

/* ── CSS Variables — DARK mode (default) ─────────── */
:root{
  /* Surfaces (warm dark) */
  --bg:#1c1a16;
  --bg-card:#242018;
  --bg-soft:#201e1a;
  --bg-sunken:#161410;

  /* Ink */
  --ink-1:#f0ede4;
  --ink-2:#c5c1b6;
  --ink-3:#8f8b82;
  --ink-4:#5e5b54;
  --ink-5:#3c3a34;

  /* Lines */
  --line-1:#2e2c26;
  --line-2:#3a3830;

  /* Brand (teal-green) */
  --brand:#0faa7a;
  --brand-soft:#0a2820;
  --brand-deep:#12c48e;

  /* Status accents */
  --gold:#c49830;
  --gold-soft:#2c1e08;
  --amber:#d4941c;
  --amber-soft:#2c1c08;
  --red:#c85040;
  --red-soft:#2c1008;
  --blue:#4a80b8;
  --blue-soft:#0e1e2c;

  /* Tint surfaces (status backgrounds) — dark */
  --tint-brand:var(--brand-soft);
  --tint-amber:var(--amber-soft);
  --tint-red:var(--red-soft);
  --tint-blue:var(--blue-soft);
  --tint-brand-border:var(--line-2);
  --tint-amber-border:var(--line-2);
  --tint-red-border:var(--line-2);
  --tint-blue-border:var(--line-2);

  /* Fonts */
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,monospace;
  --font-display:"Inter",system-ui,sans-serif;

  /* Shadows */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:0 1px 2px rgba(0,0,0,0.2),0 4px 12px rgba(0,0,0,0.2);
  --shadow-lg:0 1px 2px rgba(0,0,0,0.2),0 12px 32px rgba(0,0,0,0.3);

  /* Radii */
  --r-sm:6px;
  --r-md:10px;
  --r-lg:14px;
  --r-xl:20px;

  /* ── Legacy --p-* aliases (point at canonical tokens) ── */
  --p-bg:var(--bg);
  --p-bg2:var(--bg-soft);
  --p-bg3:var(--bg-sunken);
  --p-card:var(--bg-card);
  --p-surface:var(--bg-soft);
  --p-nav-bg:var(--bg-card);
  --p-text:var(--ink-1);
  --p-muted:var(--ink-3);
  --p-hint:var(--ink-4);
  --p-border:var(--line-1);
  --p-border-inner:var(--line-2);
  --p-accent:var(--brand);
  --p-accent-dark:var(--brand-deep);
  --p-accent-glow:rgba(15,170,122,0.18);
  --p-green:var(--brand);
  --p-green-bg:var(--tint-brand);
  --p-green-border:var(--tint-brand-border);
  --p-amber:var(--amber);
  --p-amber-bg:var(--tint-amber);
  --p-amber-border:var(--tint-amber-border);
  --p-red:var(--red);
  --p-red-bg:var(--tint-red);
  --p-red-border:var(--tint-red-border);
  --p-blue:var(--blue);
  --p-blue-bg:var(--tint-blue);
  --p-blue-border:var(--tint-blue-border);
  --p-radius:12px;
  --p-radius-sm:8px;
  --p-radius-lg:16px;

  /* ── Older legacy aliases (very old pages) ── */
  --bg2:var(--bg-soft);
  --bg3:var(--bg-sunken);
  --nav-bg:var(--bg-card);
  --accent:var(--brand);
  --accent-dark:var(--brand-deep);
  --accent-glow:var(--p-accent-glow);
  --white:#fff;
  --text:var(--ink-1);
  --muted:var(--ink-3);
  --border:var(--line-1);
  --green:var(--brand);
  --gray:var(--ink-3);
  --card-bg:var(--bg-card);
  --radius:var(--p-radius);
  --card-radius:var(--p-radius);
}

/* ── CSS Variables — LIGHT mode (cool white, share-page palette) ──
   2026-05-08: switched from warm-parchment to cool-white per Clint —
   matches the polished share-page look (pure-white cards on a slate-tinted
   body). The audit-page `.report` cream wrapper is also dropped globally
   so all pages line up flush at 1200px. */
html.light-mode{
  --bg:#f7f8fa;
  --bg-card:#ffffff;
  --bg-soft:#ffffff;
  --bg-sunken:#f3f4f7;

  --ink-1:#1a1f3c;
  --ink-2:#374151;
  --ink-3:#6b7280;
  --ink-4:#9ca3af;
  --ink-5:#d1d5db;

  --line-1:rgba(0,0,0,0.08);
  --line-2:rgba(0,0,0,0.12);

  --brand:#0e9268;
  --brand-soft:#d6efe4;
  --brand-deep:#086344;

  --gold:#b08322;
  --gold-soft:#f5ecd5;
  --amber:#c47e1c;
  --amber-soft:#fdecc8;
  --red:#b1442a;
  --red-soft:#fadccd;
  --blue:#2f6097;
  --blue-soft:#d8e4f3;

  /* Tint surfaces — light */
  --tint-brand:#f0faf5;
  --tint-amber:#fef7e6;
  --tint-red:#fbeee5;
  --tint-blue:#eef3f9;
  --tint-brand-border:#c4e3d0;
  --tint-amber-border:#f0d8a8;
  --tint-red-border:#f5c5b1;
  --tint-blue-border:#d8c8ed;

  /* Shadows — light */
  --shadow-sm:0 1px 2px rgba(20,18,12,0.04);
  --shadow-md:0 1px 2px rgba(20,18,12,0.04),0 4px 12px rgba(20,18,12,0.04);
  --shadow-lg:0 1px 2px rgba(20,18,12,0.05),0 12px 32px rgba(20,18,12,0.08);

  /* --p-* aliases inherit from above (--p-bg → var(--bg) etc.); only override
     where a different value is desired in light mode. */
  --p-accent-glow:rgba(14,146,104,0.18);
}

/* ── Base ────────────────────────────────────────── */
html{background:#f7f8fa;}            /* default → light (cool white) */
html.dark-mode{background:#1c1a16;}  /* opt-in dark via the nav toggle */
html.light-mode{background:#f7f8fa;}
body{
  background:var(--p-bg);
  font-family:'Inter',system-ui,sans-serif;
  color:var(--p-text);
  font-weight:400;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  transition:background 0.2s,color 0.2s;
}
/* Push footer to bottom on short pages */
body > main,
body > .page-wrap,
body > .portal-page,
body > .content-wrap{flex:1 0 auto;}
body > #portal-footer,
body > .portal-footer{flex-shrink:0;margin-top:auto;}

/* ── Navigation (Shared Nav v3 — warm-palette)
   portal-nav.js emits .topnav / .topnav-tab / .user-chip / .ucm-* structure.
   All portal pages use this via <div id="portal-nav"> mount point.
   ───────────────────────────────────────────────────── */

/* Theme toggle button (emitted by portal-nav.js into .topnav-right) */
.theme-toggle{
  background: var(--bg-soft);
  border: 1px solid var(--line-1);
  color: var(--ink-3);
  font-size: 15px;
  font-family: inherit;
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  line-height: 1;
}
.theme-toggle:hover { background: var(--bg-sunken); color: var(--ink-1); }

/* ── .topnav / .topnav-tab / .user-chip / .ucm-* styles ─────────────── */

.topnav {
  background: var(--bg-card);
  border-bottom: 1px solid var(--line-1);
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.brand-mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.5px;
  color: var(--ink-1);
  display: inline-flex;
  align-items: baseline;
}
.brand-mark::after {
  content: ".";
  color: #00c48c;
  margin-left: 1px;
}

.topnav-tabs {
  display: flex;
  gap: 2px;
  margin: 0 auto;
}
.topnav-tab {
  padding: 8px 14px;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.topnav-tab:hover { color: var(--ink-1); background: var(--bg-sunken); }
.topnav-tab.active {
  color: var(--ink-1);
  background: var(--bg-sunken);
  font-weight: 600;
}

.topnav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.icon-btn {
  width: 32px; height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--ink-3);
}
.icon-btn:hover { background: var(--bg-sunken); color: var(--ink-1); }

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--line-1);
  background: var(--bg-card);
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
}
.user-chip-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
}

.user-chip-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  overflow: hidden;
  font-size: 13px;
}
.ucm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-1);
  background: var(--bg-soft);
}
.ucm-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}
.ucm-name { font-weight: 600; color: var(--ink-1); margin-bottom: 2px; }
.ucm-email { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ucm-item {
  display: block;
  padding: 9px 16px;
  color: var(--ink-2);
  font-size: 13px;
  text-align: left;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.ucm-item:hover {
  background: var(--bg-soft);
  color: var(--ink-1);
}
.ucm-item.danger {
  color: var(--red);
  border-top: 1px solid var(--line-1);
}
.ucm-item.danger:hover {
  background: var(--red-soft);
}

/* ── Layout ──────────────────────────────────────── */
.portal-wrap{padding:32px 0 64px;}
.portal-container{max-width:1280px;margin:0 auto;padding:0 24px;}
@media(max-width:768px){.portal-container{padding:0 16px;}}

/* ── Page Header ─────────────────────────────────── */
.page-header{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;margin-bottom:24px;
}
.page-title{font-size:28px;font-weight:500;letter-spacing:-0.5px;color:var(--p-text);}
.page-subtitle,.page-sub,.data-cached-tag{font-size:14px;color:var(--p-muted);margin-top:5px;font-weight:400;}
html.light-mode .page-title{color:#1a1f3c;}
html.light-mode .page-subtitle,html.light-mode .page-sub{color:#6b7280;}

/* ── Grid helpers ────────────────────────────────── */
.p-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.p-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.p-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.p-grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
@media(max-width:900px){
  .p-grid-4,.p-grid-5{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .p-grid-2,.p-grid-3,.p-grid-4,.p-grid-5{grid-template-columns:1fr;}
}

/* ── Card ────────────────────────────────────────── */
.p-card{
  background:var(--p-card);
  border:1px solid var(--p-border);
  border-radius:var(--p-radius);
  padding:24px;
}
html.light-mode .p-card{background:#fff;border-color:rgba(0,0,0,0.08);}

/* ── Stat Card ───────────────────────────────────── */
.p-stat-card{
  background:var(--p-card);
  border:1px solid var(--p-border);
  border-radius:var(--p-radius);
  padding:20px 24px;
}
.p-stat-label{
  font-size:12px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.08em;
  color:var(--p-muted);margin-bottom:8px;
}
.p-stat-value{font-size:28px;font-weight:500;line-height:1;color:var(--p-text);}
.p-stat-sub{font-size:13px;color:var(--p-muted);margin-top:5px;}
.p-stat-value.green{color:var(--p-green);}
.p-stat-value.amber{color:var(--p-amber);}
.p-stat-value.red{color:var(--p-red);}
html.light-mode .p-stat-card{background:#fff;border-color:rgba(0,0,0,0.08);}
html.light-mode .p-stat-value{color:#1a1f3c;}

/* ── Panel ───────────────────────────────────────── */
.p-panel{
  background:var(--p-card);
  border:1px solid var(--p-border);
  border-radius:var(--p-radius);
  overflow:hidden;
  margin-bottom:16px;
}
.p-panel-header{
  padding:16px 20px;
  border-bottom:1px solid var(--p-border-inner);
  display:flex;align-items:center;justify-content:space-between;
}
.p-panel-title{font-size:15px;font-weight:500;color:var(--p-text);}
.p-panel-body{padding:20px;}
html.light-mode .p-panel{background:#fff;border-color:rgba(0,0,0,0.08);}
html.light-mode .p-panel-header{border-bottom-color:rgba(0,0,0,0.06);}
html.light-mode .p-panel-title{color:#1a1f3c;}

/* Legacy aliases */
.card,.summary-card{background:var(--p-card);border:1px solid var(--p-border);border-radius:var(--p-radius);}
.panel{background:var(--p-card);border:1px solid var(--p-border);border-radius:var(--p-radius);overflow:hidden;margin-bottom:16px;}
.panel-header{padding:16px 20px;border-bottom:1px solid var(--p-border-inner);}
.panel-title{font-size:15px;font-weight:500;color:var(--p-text);}
.panel-body{padding:20px;}
html.light-mode .panel{background:#fff;border-color:rgba(0,0,0,0.08);}
html.light-mode .panel-header{border-bottom-color:rgba(0,0,0,0.06);}

/* ── Badges ──────────────────────────────────────── */
.p-badge{display:inline-block;font-size:12px;font-weight:500;padding:3px 8px;border-radius:4px;}
.p-badge-green{background:var(--p-green-bg);color:var(--p-green);border:1px solid var(--p-green-border);}
.p-badge-amber{background:var(--p-amber-bg);color:var(--p-amber);border:1px solid var(--p-amber-border);}
.p-badge-red{background:var(--p-red-bg);color:var(--p-red);border:1px solid var(--p-red-border);}
.p-badge-blue{background:var(--p-blue-bg);color:var(--p-blue);border:1px solid var(--p-blue-border);}
.p-badge-neutral{background:var(--p-surface);color:var(--p-muted);border:1px solid var(--p-border);}

/* Legacy badge aliases */
.badge{display:inline-block;font-size:12px;font-weight:500;padding:3px 8px;border-radius:4px;}
.badge-green{background:rgba(0,196,140,0.15);color:#00c48c;}
.badge-yellow{background:rgba(251,191,36,0.15);color:#fbbf24;}
.badge-blue{background:rgba(59,130,246,0.15);color:#60a5fa;}
.badge-red{background:rgba(239,68,68,0.15);color:#f87171;}

/* ── Pills ───────────────────────────────────────── */
.p-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;padding:4px 10px;border-radius:20px;}
.p-pill-green{background:var(--p-green-bg);color:var(--p-green);border:1px solid var(--p-green-border);}
.p-pill-amber{background:var(--p-amber-bg);color:var(--p-amber);border:1px solid var(--p-amber-border);}
.p-pill-red{background:var(--p-red-bg);color:var(--p-red);border:1px solid var(--p-red-border);}
.p-pill-neutral{background:var(--p-surface);color:var(--p-muted);border:1px solid var(--p-border);}

/* ── Buttons ─────────────────────────────────────── */
.p-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:var(--p-radius-sm);
  font-size:14px;font-weight:500;
  cursor:pointer;border:none;transition:all 0.15s;
  text-decoration:none;
}
.p-btn-primary{background:var(--p-accent);color:#0a0e24;}
.p-btn-primary:hover{background:var(--p-accent-dark);}
.p-btn-outline{
  background:transparent;color:var(--p-muted);
  border:1px solid var(--p-border);
}
.p-btn-outline:hover{color:var(--p-text);border-color:rgba(255,255,255,0.25);}
html.light-mode .p-btn-outline{color:#4b5563;border-color:rgba(0,0,0,0.15);}
html.light-mode .p-btn-outline:hover{color:#1a1f3c;border-color:rgba(0,0,0,0.3);}

/* ── Table ───────────────────────────────────────── */
.p-table-wrap{
  background:var(--p-card);
  border:1px solid var(--p-border);
  border-radius:var(--p-radius);
  overflow:hidden;
}
.p-table{width:100%;border-collapse:collapse;font-size:14px;}
.p-table th{
  padding:10px 16px;
  text-align:left;
  font-size:12px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.06em;
  color:var(--p-muted);
  border-bottom:1px solid var(--p-border-inner);
  background:var(--p-surface);
  white-space:nowrap;
}
.p-table td{
  padding:12px 16px;
  border-bottom:1px solid var(--p-border-inner);
  color:var(--p-text);
  vertical-align:middle;
}
.p-table tr:last-child td{border-bottom:none;}
.p-table tbody tr:hover{background:rgba(255,255,255,0.02);}
html.light-mode .p-table-wrap{background:#fff;border-color:rgba(0,0,0,0.08);}
html.light-mode .p-table th{background:#f8f9fb;border-bottom-color:rgba(0,0,0,0.06);color:#6b7280;}
html.light-mode .p-table td{border-bottom-color:rgba(0,0,0,0.05);color:#1a1f3c;}
html.light-mode .p-table tbody tr:hover{background:rgba(0,0,0,0.02);}

/* Legacy table alias */
.table-wrap{background:var(--p-card);border:1px solid var(--p-border);border-radius:var(--p-radius);overflow:hidden;}

/* ── Toast ───────────────────────────────────────── */
.toast{
  position:fixed;bottom:24px;right:24px;
  background:#111827;border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--p-radius);padding:14px 20px;
  font-size:14px;color:#e5e7eb;
  z-index:9999;transform:translateY(100px);opacity:0;
  transition:all 0.3s;max-width:380px;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
}
.toast.show{transform:translateY(0);opacity:1;}

/* ── Empty state ─────────────────────────────────── */
.p-empty{color:var(--p-hint);font-size:15px;text-align:center;padding:32px 20px;}

/* ── Loading spinner ─────────────────────────────── */
.p-loading{
  display:flex;align-items:center;justify-content:center;
  padding:40px;color:var(--p-muted);font-size:15px;gap:10px;
}
.p-spinner{
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--p-border);
  border-top-color:var(--p-accent);
  animation:spin 0.7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Section label ───────────────────────────────── */
.p-section-label{
  font-size:12px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.08em;
  color:var(--p-hint);margin:28px 0 12px;
}

/* ── Divider ─────────────────────────────────────── */
.p-divider{height:1px;background:var(--p-border);margin:20px 0;}

/* ── Input / Search ──────────────────────────────── */
.p-input{
  background:var(--p-surface);
  border:1px solid var(--p-border);
  border-radius:var(--p-radius-sm);
  padding:8px 14px;
  color:var(--p-text);
  font-size:14px;font-family:'Inter',system-ui,sans-serif;
  outline:none;transition:border-color 0.15s;
  width:100%;
}
.p-input::placeholder{color:var(--p-hint);}
.p-input:focus{border-color:rgba(0,196,140,0.4);}
html.light-mode .p-input{background:#fff;border-color:rgba(0,0,0,0.1);color:#1a1f3c;}
html.light-mode .p-input::placeholder{color:#9ca3af;}

/* ── Mini Stat Boxes ──────────────────────────────────────────────── */
.p-mini-stats{
  display:flex;
  align-items:center;
  border-top:0.5px solid var(--p-border-inner);
  padding:10px 16px;
  gap:0;
}
.p-mini-stat{
  flex:1;
  text-align:center;
  padding:4px 0;
  border-right:0.5px solid var(--p-border-inner);
}
.p-mini-stat:last-child{border-right:none;}
.p-mini-stat-val{
  font-size:17px;
  font-weight:500;
  line-height:1;
  color:var(--p-text);
}
.p-mini-stat-val.amber{color:var(--p-amber);}
.p-mini-stat-val.red{color:var(--p-red);}
.p-mini-stat-label{
  font-size:10px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--p-hint);
  margin-top:3px;
}
html.light-mode .p-mini-stat{background:transparent;}
html.light-mode .p-mini-stats{background:transparent;}

/* ── Progress Bar ────────────────────────────────────────────────── */
.p-progress-track{
  height:4px;border-radius:2px;
  background:var(--p-border);
  flex:1;min-width:60px;overflow:hidden;
}
.p-progress-fill{
  height:100%;border-radius:2px;
  transition:width 0.4s ease;
}
.p-progress-fill.green{background:var(--p-green);}
.p-progress-fill.amber{background:var(--p-amber);}
.p-progress-fill.red{background:var(--p-red);}
html.light-mode .p-progress-track{background:rgba(0,0,0,0.08);}

/* ── ASIN Chip ──────────────────────────────────────────────────── */
.p-asin-chip{
  display:inline-block;
  font-family:'SF Mono','Fira Mono','Fira Code',monospace;
  font-size:10px;
  font-weight:500;
  letter-spacing:0.04em;
  padding:2px 7px;
  border-radius:4px;
  background:var(--p-green-bg);
  color:var(--p-green);
  border:1px solid var(--p-green-border);
  line-height:1.4;
  vertical-align:middle;
}
html.light-mode .p-asin-chip{background:#f0faf4;color:#00a374;border-color:#b8deca;}

/* ── Alert Banners (top of page, full-width) ────────────────────────────── */
.p-alert-banners{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.p-alert-banner{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;
  border-radius:var(--p-radius-sm);
  padding:14px 18px;
  border:1px solid;
  border-left-width:3px;
}
.p-alert-banner.critical{
  background:var(--p-red-bg);
  border-color:var(--p-red-border);
  border-left-color:var(--p-red);
}
.p-alert-banner.warning{
  background:var(--p-amber-bg);
  border-color:var(--p-amber-border);
  border-left-color:var(--p-amber);
}
.p-alert-banner-left{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0;}
.p-alert-banner-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px;
}
.p-alert-banner.critical .p-alert-banner-dot{background:var(--p-red);}
.p-alert-banner.warning  .p-alert-banner-dot{background:var(--p-amber);}
.p-alert-banner-body{flex:1;min-width:0;}
.p-alert-banner-title{
  font-size:14px;font-weight:500;line-height:1.4;
}
.p-alert-banner.critical .p-alert-banner-title{color:var(--p-red);}
.p-alert-banner.warning  .p-alert-banner-title{color:var(--p-amber);}
.p-alert-banner-sub{font-size:12px;color:var(--p-muted);margin-top:3px;line-height:1.5;}
.p-alert-banner-ts{font-size:11px;color:var(--p-hint);margin-top:4px;}
.p-alert-banner-right{display:flex;align-items:center;flex-shrink:0;}
.p-alert-banner-badge{
  font-size:12px;font-weight:500;
  padding:3px 10px;border-radius:20px;border:1px solid;
  white-space:nowrap;
}
.p-alert-banner.critical .p-alert-banner-badge{
  color:var(--p-red);background:var(--p-red-bg);border-color:var(--p-red-border);
}
.p-alert-banner.warning .p-alert-banner-badge{
  color:var(--p-amber);background:var(--p-amber-bg);border-color:var(--p-amber-border);
}
html.light-mode .p-alert-banner.critical{background:#fdf4f4;border-color:#f0d0d0;border-left-color:#a03030;}
html.light-mode .p-alert-banner.warning{background:#fdf8f0;border-color:#edd8b0;border-left-color:#8a5a1a;}

/* ── Profile Fields ─────────────────────────────────────────────── */
.profile-field{display:flex;flex-direction:column;gap:4px;}
.profile-field-label{
  font-size:10px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.08em;
  color:var(--p-hint);
}
.profile-field-value{
  font-size:14px;font-weight:400;color:var(--p-text);
}
html.light-mode .profile-field-value{color:#1a1f3c;}

/* ── Footer ─────────────────────────────────────────────── */
.portal-footer{
  background:var(--p-card);
  border-top:0.5px solid var(--p-border);
  padding:0 24px;
}
.portal-footer-inner{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:64px;
  flex-wrap:wrap;
  padding:12px 0;
}
.footer-left{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.footer-brand{
  font-size:17px;
  font-weight:900;
  color:var(--p-text);
  letter-spacing:-0.3px;
  text-decoration:none;
}
.footer-brand .brand-dot{color:var(--p-accent);}
.footer-tagline{
  font-size:11px;
  color:var(--p-hint);
  font-weight:400;
}
.footer-links{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.footer-link{
  font-size:12px;
  color:var(--p-muted);
  text-decoration:none;
  transition:color 0.15s;
}
.footer-link:hover{color:var(--p-accent);}
.footer-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
}
.footer-copy{
  font-size:11px;
  color:var(--p-hint);
}
.footer-contact{
  font-size:11px;
  color:var(--p-hint);
}
.footer-contact a{
  color:var(--p-hint);
  text-decoration:none;
  transition:color 0.15s;
}
.footer-contact a:hover{color:var(--p-muted);}
html.light-mode .portal-footer{background:#fff;border-top-color:rgba(0,0,0,0.08);}
html.light-mode .footer-brand{color:#1a1f3c;}
html.light-mode .footer-tagline,
html.light-mode .footer-copy,
html.light-mode .footer-contact,
html.light-mode .footer-contact a{color:#9ca3af;}
html.light-mode .footer-link{color:#6b7280;}
html.light-mode .footer-link:hover{color:#00a374;}
@media(max-width:600px){
  .portal-footer-inner{flex-direction:column;align-items:flex-start;gap:12px;padding:16px 0;}
  .footer-right{align-items:flex-start;}
}