.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px;
  background:#EFF6FF; border:1px solid #BFDBFE; color:var(--primaryDark);
  font-size:12px; font-weight:800; letter-spacing:.02em;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 16px; border-radius:var(--radiusMd); border:1px solid var(--border);
  font-weight:900; letter-spacing:.02em; cursor:pointer; user-select:none;
  background:var(--card); color:var(--text);
}
.btn.primary{background:var(--primary); border-color:var(--primary); color:#fff}
.btn.danger{border-color:var(--danger); color:var(--danger); background:#fff}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn.tiny{padding:8px 10px;border-radius:10px;font-weight:900;font-size:12px}
.btn.loading{position:relative;pointer-events:none;opacity:.75;}
.btn.loading:after{content:'…';position:relative;margin-left:6px;}

.nav{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:16px 18px;
}
.nav a{font-weight:800; color:var(--text)}
.nav .links{display:flex; gap:14px; align-items:center}

.kpi{padding:16px}
.kpi .value{font-size:26px; font-weight:900}
.hr{height:1px; background:var(--border); margin:16px 0}
.footer{padding:30px 0; color:var(--muted); font-size:14px}
.footer a{color:var(--muted)}

.badgeGrid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media (max-width:900px){.badgeGrid{grid-template-columns:repeat(2,1fr)}}
.badge{padding:14px; border:1px solid var(--border); border-radius:12px; background:#fff}
.badge b{display:block}

.input, select, textarea{
  width:100%; padding:14px 14px; border:1px solid var(--border); border-radius:12px;
  background:#fff; font-size:16px;
}
.field{display:flex; flex-direction:column; gap:8px}
.field label{display:block;font-weight:600;margin-bottom:6px;}
.field .help{display:block;font-size:12px;opacity:.85;margin-top:6px;}
input:disabled,textarea:disabled,select:disabled{opacity:.6;cursor:not-allowed;}
button:disabled,.btn:disabled{opacity:.55;cursor:not-allowed;}

.notice{
  padding:14px; border-radius:12px; border:1px solid #BFDBFE; background:#EFF6FF;
  color:var(--primaryDark); font-weight:700
}
.warn{
  padding:14px; border-radius:12px; border:1px solid #FECACA; background:#FEF2F2;
  color:#991B1B; font-weight:800
}

.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{padding:10px 12px; border-radius:999px; border:1px solid var(--border); background:#fff; font-weight:900; color:var(--text)}
.tab.active{border-color:#BFDBFE; background:#EFF6FF; color:var(--primaryDark)}

.modalOverlay{
  position:fixed; inset:0; background:rgba(17,24,39,.45); display:none; align-items:center; justify-content:center; padding:20px;
}
.modalOverlay.show{display:flex}
.modal{max-width:720px; width:100%; background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:0 16px 40px rgba(0,0,0,.22); padding:18px}
.modalHeader{display:flex; gap:12px; align-items:flex-start; margin-bottom:12px}
.modalIcon{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:900; border:1px solid var(--border); background:#F9FAFB}
.modalIcon.warn{border-color:#FECACA; background:#FEF2F2; color:#991B1B}
.modalIcon.info{border-color:#BFDBFE; background:#EFF6FF; color:var(--primaryDark)}
.modalTitle{font-size:20px; font-weight:950; margin:0; line-height:1.25}
.modalSub{margin-top:4px; color:var(--muted); line-height:1.55}
.modalBody{margin-top:10px}
.modal .actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; margin-top:16px}

.progress{height:10px; background:var(--border); border-radius:999px; overflow:hidden}
.progress > div{height:100%; background:var(--success); width:0%}

.chip{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid #E5E7EB;background:#F9FAFB;font-size:12px;color:#374151;margin-right:6px}

/* SW update banner */
.swUpdate{
  display:none;
  position:fixed;
  left:16px; right:16px; bottom:16px;
  z-index:9999;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px 14px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.swUpdate.show{display:block}
.swUpdateRow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.swUpdateText{font-size:13px;color:var(--text)}
.swUpdateMuted{color:var(--muted)}
.swUpdateActions{display:flex;align-items:center;gap:10px}
.swUpdateBtn{
  border:1px solid #D1D5DB;
  background:#111827;
  color:#fff;
  border-radius:10px;
  padding:8px 10px;
  font-size:13px;
  cursor:pointer;
}
.swUpdateBtn:hover{opacity:.92}

.swUpdateBtnSecondary{
  border:1px solid #D1D5DB;
  background:#fff;
  color:#111827;
  border-radius:10px;
  padding:8px 10px;
  font-size:13px;
  cursor:pointer;
}
.swUpdateBtnSecondary:hover{background:#F9FAFB}

.swUpdateIcon{
  width:34px;
  height:34px;
  line-height:32px;
  text-align:center;
  border-radius:10px;
  border:1px solid #E5E7EB;
  background:#fff;
  font-size:20px;
  cursor:pointer;
  color:#111827;
}
.swUpdateIcon:hover{background:#F9FAFB}

/* admin reauth banner (base component) */
.banner{
  border:1px solid #E5E7EB;
  background:#FFFFFF;
  border-radius:12px;
  padding:12px 14px;
}
.bannerWarn{border-color:#BFDBFE;background:#EFF6FF}
.bannerRow{display:flex;gap:10px;align-items:flex-start}

/* breadcrumbs (SEO + UX) */
.breadcrumbs{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--muted); }
.breadcrumbs a{ color:var(--muted); text-decoration:none; }
.breadcrumbs a:hover{ text-decoration:underline; }
.breadcrumbs .sep{ opacity:0.6; }

tr.rowActive{outline:2px solid rgba(47,93,140,0.35); outline-offset:-2px}
tr.rowClick{cursor:pointer}
tr.rowClick:hover{background:rgba(0,0,0,0.03)}

/* subtle pulse for L/R indicator */
.skeletonBar{height:20px;border-radius:8px;background:var(--border);transition:background .18s ease, box-shadow .18s ease}
.skeletonBar.pulseOn{background:var(--primary); box-shadow:0 0 0 3px rgba(47,93,140,0.18)}

.skipLink{
  position:absolute;
  left:-9999px;
  top:8px;
  background:var(--card);
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:12px;
  box-shadow:var(--shadow);
  z-index:9999;
}
.skipLink:focus{left:8px;}

/* Privacy table responsive */
.tableResponsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tableResponsive table {
  min-width: 600px;
}

/* Toast */
.toastWrap{position:fixed;left:12px;right:12px;bottom:12px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
@media(min-width:720px){.toastWrap{left:auto;right:16px;bottom:16px;max-width:420px;}}
.toast{pointer-events:auto;background:#fff;border-radius:16px;padding:12px 12px;box-shadow:0 10px 25px rgba(0,0,0,0.18);border:1px solid rgba(0,0,0,0.08);display:flex;gap:10px;align-items:flex-start;}
.toastIcon{width:24px;height:24px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto;}
.toastIcon.info{background:rgba(0,95,204,0.10);color:rgb(0,95,204);}
.toastIcon.warn{background:rgba(204,95,0,0.12);color:rgb(204,95,0);}
.toastIcon.ok{background:rgba(0,140,70,0.12);color:rgb(0,140,70);}
.toastTitle{font-weight:700;margin-top:1px;}
.toastMsg{font-size:13px;opacity:.92;margin-top:2px;line-height:1.3;}
.toastClose{margin-left:auto;flex:0 0 auto;border:none;background:transparent;opacity:.75;cursor:pointer;font-size:18px;line-height:1;padding:2px 6px;border-radius:10px;}
.toastClose:focus-visible{outline:none;box-shadow:0 0 0 2px #fff, 0 0 0 5px rgba(47,93,140,0.35);} 

/* ops metrics */
.taRight{text-align:right;}
.rowBetween{display:flex;align-items:center;justify-content:space-between;gap:10px;}