/* ================================================
   ESTOBI PORTAL — Shared Styles v2
   Single source of truth. --p-* variables only.
   Font weights: 400 and 500 only (per design spec).
   ================================================ */

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

/* ── CSS Variables (dark mode default) ───────────── */
:root{
  /* Backgrounds */
  --p-bg:#0a0a0a;
  --p-bg2:#111111;
  --p-bg3:#171717;
  --p-card:rgba(255,255,255,0.04);
  --p-surface:rgba(255,255,255,0.03);
  --p-nav-bg:#070a1a;
  /* Text */
  --p-text:#e8e8e8;
  --p-muted:#9ca3c0;
  --p-hint:#4b5563;
  /* Borders */
  --p-border:rgba(255,255,255,0.08);
  --p-border-inner:rgba(255,255,255,0.05);
  /* Accent */
  --p-accent:#00c48c;
  --p-accent-dark:#00a87a;
  --p-accent-glow:rgba(0,196,140,0.15);
  /* Status — green */
  --p-green:#00c48c;
  --p-green-bg:rgba(0,196,140,0.08);
  --p-green-border:rgba(0,196,140,0.2);
  /* Status — amber */
  --p-amber:#eab308;
  --p-amber-bg:rgba(234,179,8,0.08);
  --p-amber-border:rgba(234,179,8,0.2);
  /* Status — red */
  --p-red:#ef4444;
  --p-red-bg:rgba(239,68,68,0.08);
  --p-red-border:rgba(239,68,68,0.2);
  /* Status — blue */
  --p-blue:#3b82f6;
  --p-blue-bg:rgba(59,130,246,0.08);
  --p-blue-border:rgba(59,130,246,0.2);
  /* Radius */
  --p-radius:12px;
  --p-radius-sm:8px;
  --p-radius-lg:16px;

  /* Legacy aliases — keep old vars working during migration */
  --bg:var(--p-bg);
  --bg2:var(--p-bg2);
  --bg3:var(--p-bg3);
  --nav-bg:var(--p-nav-bg);
  --accent:var(--p-accent);
  --accent-dark:var(--p-accent-dark);
  --accent-glow:var(--p-accent-glow);
  --white:#fff;
  --text:var(--p-text);
  --muted:var(--p-muted);
  --border:var(--p-border);
  --green:var(--p-green);
  --amber:var(--p-amber);
  --red:var(--p-red);
  --blue:var(--p-blue);
  --gray:#9ca3af;
  --card-bg:var(--p-card);
  --radius:var(--p-radius);
  --card-radius:var(--p-radius);
}

/* ── Light mode overrides ────────────────────────── */
html.light-mode{
  --p-bg:#f5f7fa;
  --p-bg2:#ffffff;
  --p-bg3:#f0f2f5;
  --p-card:#ffffff;
  --p-surface:#f8f9fb;
  --p-nav-bg:#ffffff;
  --p-text:#1a1f3c;
  --p-muted:#6b7280;
  --p-hint:#9ca3af;
  --p-border:rgba(0,0,0,0.08);
  --p-border-inner:rgba(0,0,0,0.05);
  --p-green:#00a374;
  --p-green-bg:#f0faf4;
  --p-green-border:#b8deca;
  --p-amber:#92660a;
  --p-amber-bg:#fdfbf0;
  --p-amber-border:#e8d48a;
  --p-red:#a03030;
  --p-red-bg:#fdf4f4;
  --p-red-border:#f0d0d0;
  --p-blue:#1d4ed8;
  --p-blue-bg:#eff6ff;
  --p-blue-border:#bfdbfe;
  /* Legacy alias overrides for light mode */
  --card-bg:#ffffff;
  --bg:#f5f7fa;
  --bg2:#ffffff;
  --bg3:#f0f2f5;
  --text:#1a1f3c;
  --muted:#6b7280;
  --border:rgba(0,0,0,0.08);
  --green:#00a374;
  --amber:#92660a;
  --red:#a03030;
}

/* ── Base ────────────────────────────────────────── */
html{background:#0a0a0a;}
html.light-mode{background:#f5f7fa;}
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;
}

/* ── Navigation ──────────────────────────────────── */
.portal-nav{
  background:var(--p-nav-bg);
  border-bottom:1px solid var(--p-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  height:60px;
  position:sticky;
  top:0;
  z-index:100;
}
html.light-mode .portal-nav{background:#fff;border-bottom-color:rgba(0,0,0,0.08);}

/* Logo */
.portal-brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand-wordmark{font-weight:900;font-size:24px;color:#fff;letter-spacing:-0.5px;}
.brand-dot{color:#00c48c;}
html.light-mode .brand-wordmark{color:#1a1f3c;}
html.light-mode .brand-dot{color:#00c48c;}

/* Nav tabs */
.nav-tabs{display:flex;align-items:center;gap:2px;flex-shrink:0;}
.nav-tab{
  padding:7px 13px;
  border-radius:20px;
  font-size:14px;
  font-weight:400;
  color:var(--p-muted);
  text-decoration:none;
  transition:all 0.15s;
  white-space:nowrap;
  border:0.5px solid transparent;
}
.nav-tab:hover{color:#fff;background:rgba(255,255,255,0.06);}
.nav-tab.active{color:#1a1f3c;background:#f8f9fb;border-color:rgba(0,0,0,0.1);font-weight:500;}
html.light-mode .nav-tab{color:#4b5563;}
html.light-mode .nav-tab:hover{color:#1a1f3c;background:rgba(0,0,0,0.05);}
html.light-mode .nav-tab.active{color:#1a1f3c;background:#e8eaf0;border-color:rgba(0,0,0,0.12);font-weight:500;}

/* Nav right */
.nav-right{display:flex;align-items:center;gap:10px;}

/* Theme toggle */
.theme-toggle{
  background:#f8f9fb;
  border:0.5px solid rgba(0,0,0,0.1);
  color:#9aa0b8;
  font-size:15px;
  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{color:#1a1f3c;border-color:rgba(0,0,0,0.2);}

/* User dropdown button */
.user-menu{position:relative;}
.user-btn{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  padding:6px 12px;
  cursor:pointer;
  color:#e5e7eb;
  font-size:13px;font-weight:500;
  transition:all 0.15s;
  min-width:140px;
}
.user-btn:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);}
.user-btn-avatar{
  width:28px;height:28px;border-radius:50%;
  background:rgba(0,196,140,0.2);color:#00c48c;
  font-size:12px;font-weight:500;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.user-btn-caret{font-size:10px;color:#6b7280;transition:transform 0.2s;margin-left:2px;}
.user-btn-caret.open{transform:rotate(180deg);}
html.light-mode .user-btn{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.12);color:#1a1f3c;}

/* User dropdown panel */
.user-dropdown{
  display:none;position:absolute;top:calc(100% + 10px);right:0;
  background:#13192e;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;
  padding:0;min-width:280px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
  z-index:200;overflow:hidden;
}
.user-dropdown.open{display:block;animation:ddFadeIn 0.15s ease;}
@keyframes ddFadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.dd-header{
  padding:28px 20px 20px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.dd-avatar-lg{
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,rgba(0,196,140,0.3),rgba(0,196,140,0.1));
  border:2px solid rgba(0,196,140,0.3);
  color:#00c48c;font-size:28px;font-weight:500;
  display:flex;align-items:center;justify-content:center;letter-spacing:-0.5px;
  margin-bottom:4px;
}
.dd-name{font-size:16px;font-weight:500;color:#fff;text-align:center;letter-spacing:-0.2px;}
.dd-email{font-size:12px;color:#6b7280;text-align:center;margin-top:1px;}
.dd-menu{padding:6px 8px 10px;}
.dd-item{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;border-radius:10px;
  font-size:14px;font-weight:400;color:#d1d5db;
  text-decoration:none;cursor:pointer;
  background:none;border:none;width:100%;text-align:left;
  transition:all 0.12s;
}
.dd-item:hover{background:rgba(255,255,255,0.07);color:#fff;}
.dd-item-icon{
  font-size:16px;width:20px;text-align:center;flex-shrink:0;
  color:#6b7280;transition:color 0.12s;
}
.dd-item:hover .dd-item-icon{color:#fff;}
.dd-divider{height:1px;background:rgba(255,255,255,0.07);margin:4px 0;}
.dd-item.danger{color:#f87171;}
.dd-item.danger .dd-item-icon{color:#f87171;}
.dd-item.danger:hover{background:rgba(248,113,113,0.08);}
html.light-mode .user-dropdown{background:#fff;border-color:rgba(0,0,0,0.1);box-shadow:0 12px 40px rgba(0,0,0,0.12);}
html.light-mode .dd-header{background:#fff;}
html.light-mode .dd-avatar-lg{background:linear-gradient(135deg,rgba(0,166,116,0.15),rgba(0,166,116,0.05));border-color:rgba(0,166,116,0.3);color:#00a374;}
html.light-mode .dd-name{color:#1a1f3c;}
html.light-mode .dd-email{color:#6b7280;}
html.light-mode .dd-item{color:#374151;}
html.light-mode .dd-item:hover{background:rgba(0,0,0,0.04);color:#111827;}
html.light-mode .dd-item-icon{color:#9ca3af;}
html.light-mode .dd-item:hover .dd-item-icon{color:#111827;}
html.light-mode .dd-divider{background:rgba(0,0,0,0.08);}
html.light-mode .dd-item.danger{color:#dc2626;}
html.light-mode .dd-item.danger .dd-item-icon{color:#dc2626;}
html.light-mode .dd-item.danger:hover{background:rgba(220,38,38,0.06);}

/* ── 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:13px;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:11px;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:12px;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:14px;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:14px;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:11px;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:11px;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:13px;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:13px;}
.p-table th{
  padding:10px 16px;
  text-align:left;
  font-size:11px;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:14px;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:14px;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:11px;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:13px;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:13px;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:11px;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;}
}