/* ==========================================================================
 * cerivio-drawer.css · v0.17.0-vio-drawer-uniform · 2026-08-13
 *
 * Canonical right-side drill-down drawer skin (.ce-drawer-v2).
 * Every SPA (buyer / seller / admin / aegis) <link>s this file so all
 * right-side drawers look identical: header (eyebrow + title + subtitle
 * + close), body (structured label/value rows, chips, code), footer
 * (sticky, right-aligned actions + optional footnote), slide-in
 * animation, dark-mode support, size variants.
 *
 * Opened programmatically with window.openCeDrawerV2({ ... }).
 * ========================================================================== */

/* ---------- Backdrop -------------------------------------------------- */
.ce-drawer-v2-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.48);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  z-index:9994;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease-out;
}
.ce-drawer-v2-backdrop.open{
  opacity:1;
  pointer-events:auto;
}

/* ---------- Drawer shell --------------------------------------------- */
.ce-drawer-v2{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:min(480px, 96vw);
  background:#FFFFFF;
  color:#0F172A;
  border-left:1px solid #E5E7EB;
  box-shadow:-12px 0 40px rgba(15,23,42,0.18);
  z-index:9995;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(0.22, 1, 0.36, 1);
  overflow:hidden;
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Roboto', sans-serif;
}
.ce-drawer-v2.open{
  transform:translateX(0);
}

/* Size variants */
.ce-drawer-v2.ce-drawer-v2-sm{ width:min(320px, 96vw); }
.ce-drawer-v2.ce-drawer-v2-lg{ width:min(640px, 96vw); }
.ce-drawer-v2.ce-drawer-v2-xl{ width:min(800px, 96vw); }

/* ---------- Header ---------------------------------------------------- */
.ce-drawer-v2 .ce-drawer-v2-header{
  position:relative;
  padding:18px 56px 14px 22px;
  border-bottom:1px solid #F1F5F9;
  background:#FFFFFF;
  flex:0 0 auto;
}
.ce-drawer-v2 .ce-drawer-v2-eyebrow{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#2DD4A0;
  margin:0 0 6px;
  line-height:1.2;
}
.ce-drawer-v2 .ce-drawer-v2-title{
  font-size:18px;
  font-weight:700;
  color:#0F172A;
  margin:0 0 4px;
  line-height:1.3;
}
.ce-drawer-v2 .ce-drawer-v2-subtitle{
  font-size:12.5px;
  color:#64748B;
  margin:0;
  line-height:1.45;
}

/* Close button */
.ce-drawer-v2 .ce-drawer-v2-close{
  position:absolute;
  top:14px;
  right:14px;
  width:32px;
  height:32px;
  border-radius:8px;
  background:#F1F5F9;
  border:1px solid #E5E7EB;
  color:#64748B;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  padding:0;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.ce-drawer-v2 .ce-drawer-v2-close:hover{
  background:#FEE2E2;
  color:#DC2626;
  border-color:#FCA5A5;
}
.ce-drawer-v2 .ce-drawer-v2-close:focus-visible{
  outline:2px solid #2DD4A0;
  outline-offset:2px;
}

/* ---------- Body ------------------------------------------------------ */
.ce-drawer-v2 .ce-drawer-v2-body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:6px 0 12px;
  background:#FFFFFF;
}

.ce-drawer-v2 .ce-drawer-v2-row{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:14px;
  align-items:baseline;
  padding:11px 22px;
  border-bottom:1px solid #F1F5F9;
}
.ce-drawer-v2 .ce-drawer-v2-row:nth-child(odd){
  background:#FAFBFC;
}
.ce-drawer-v2 .ce-drawer-v2-row:last-child{
  border-bottom:none;
}
.ce-drawer-v2 .ce-drawer-v2-row-label{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#64748B;
  line-height:1.4;
}
.ce-drawer-v2 .ce-drawer-v2-row-value{
  font-size:13px;
  font-weight:500;
  color:#0F172A;
  line-height:1.55;
  word-break:break-word;
}
.ce-drawer-v2 .ce-drawer-v2-row-value code,
.ce-drawer-v2 .ce-drawer-v2-row-value.ce-drawer-v2-code{
  font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11.5px;
  background:#F1F5F9;
  padding:2px 6px;
  border-radius:4px;
  color:#0F172A;
}
.ce-drawer-v2 .ce-drawer-v2-row-value.ce-drawer-v2-code{
  display:block;
  padding:10px 12px;
  white-space:pre-wrap;
  line-height:1.5;
}
.ce-drawer-v2 .ce-drawer-v2-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 9px;
  border-radius:12px;
  background:rgba(45,212,160,0.12);
  color:#0F766E;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.02em;
  margin-right:4px;
  margin-bottom:2px;
}
.ce-drawer-v2 .ce-drawer-v2-chip.chip-amber{
  background:rgba(217,119,6,0.12);
  color:#B45309;
}
.ce-drawer-v2 .ce-drawer-v2-chip.chip-red{
  background:rgba(220,38,38,0.10);
  color:#B91C1C;
}
.ce-drawer-v2 .ce-drawer-v2-chip.chip-mute{
  background:#F1F5F9;
  color:#475569;
}

/* Optional pre block spanning both columns */
.ce-drawer-v2 .ce-drawer-v2-body pre{
  margin:12px 22px;
  padding:14px 16px;
  background:#0F172A;
  color:#E2E8F0;
  border-radius:8px;
  font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11.5px;
  line-height:1.55;
  overflow-x:auto;
  max-height:60vh;
}
.ce-drawer-v2 .ce-drawer-v2-callout{
  margin:12px 22px;
  padding:11px 14px;
  border-left:3px solid #2DD4A0;
  background:rgba(45,212,160,0.06);
  border-radius:0 6px 6px 0;
  font-size:12px;
  color:#0F172A;
  line-height:1.5;
}

/* ---------- Footer ---------------------------------------------------- */
.ce-drawer-v2 .ce-drawer-v2-footer{
  flex:0 0 auto;
  padding:12px 18px 14px;
  border-top:1px solid #E5E7EB;
  background:#FAFBFC;
  display:grid;
  grid-template-columns:minmax(0,60%) 1fr;
  gap:12px;
  align-items:center;
}
.ce-drawer-v2 .ce-drawer-v2-footer-note{
  font-size:10.5px;
  color:#64748B;
  line-height:1.45;
}
.ce-drawer-v2 .ce-drawer-v2-footer-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.ce-drawer-v2 .ce-drawer-v2-btn{
  appearance:none;
  border:1px solid transparent;
  padding:7px 14px;
  border-radius:6px;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
  font-family:inherit;
  line-height:1.4;
}
.ce-drawer-v2 .ce-drawer-v2-btn.primary{
  background:#2DD4A0;
  color:#0F172A;
  border-color:#2DD4A0;
}
.ce-drawer-v2 .ce-drawer-v2-btn.primary:hover{
  background:#22B489;
  border-color:#22B489;
}
.ce-drawer-v2 .ce-drawer-v2-btn.secondary{
  background:#FFFFFF;
  color:#334155;
  border-color:#E5E7EB;
}
.ce-drawer-v2 .ce-drawer-v2-btn.secondary:hover{
  background:#F1F5F9;
  border-color:#CBD5E1;
}
.ce-drawer-v2 .ce-drawer-v2-btn.ghost{
  background:transparent;
  color:#64748B;
  border-color:transparent;
}
.ce-drawer-v2 .ce-drawer-v2-btn.ghost:hover{
  background:#F1F5F9;
  color:#0F172A;
}

/* ---------- Dark mode ------------------------------------------------- */
body.theme-dark .ce-drawer-v2{
  background:#0F172A;
  color:#E2E8F0;
  border-left-color:#1E293B;
}
body.theme-dark .ce-drawer-v2 .ce-drawer-v2-header{
  background:#0F172A;
  border-bottom-color:#1E293B;
}
body.theme-dark .ce-drawer-v2 .ce-drawer-v2-title{
  color:#E2E8F0;
}
body.theme-dark .ce-drawer-v2 .ce-drawer-v2-subtitle{
  color:#94A3B8;
}
body.theme-dark .ce-drawer-v2 .ce-drawer-v2-close{
  background:#1E293B;
  border-color:#334155;
  color:#94A3B8;
}
body.theme-dark .ce-drawer-v2 .ce-drawer-v2-close:hover{
  background:#7F1D1D;
  color:#FEE2E2;
  border-color:#B91C1C;
}
body.theme-dark .ce-drawer-v2 .ce-drawer-v2-body{
  background:#0F172A;
}
body.theme-dark .ce-drawer-v2 .ce-drawer-v2-row{
  border-bottom-color:#1E293B;
}
body.theme-dark .ce-drawer-v2 .ce-drawer-v2-row:nth-child(odd){
  background:#111C33;
}
body.theme-dark .ce-drawer-v2 .ce-drawer-v2-row-label{
  color:#94A3B8;
}
body.theme-dark .ce-drawer-v2 .ce-drawer-v2-row-value{
  color:#E2E8F0;
}
body.theme-dark .ce-drawer-v2 .ce-drawer-v2-row-value code,
body.theme-dark .ce-drawer-v2 .ce-drawer-v2-row-value.ce-drawer-v2-code{
  background:#1E293B;
  color:#E2E8F0;
}
body.theme-dark .ce-drawer-v2 .ce-drawer-v2-footer{
  background:#0B1220;
  border-top-color:#1E293B;
}
body.theme-dark .ce-drawer-v2 .ce-drawer-v2-btn.secondary{
  background:#1E293B;
  color:#E2E8F0;
  border-color:#334155;
}
body.theme-dark .ce-drawer-v2 .ce-drawer-v2-btn.secondary:hover{
  background:#334155;
}

/* ---------- Motion-safety fallback ----------------------------------- */
@media (prefers-reduced-motion: reduce){
  .ce-drawer-v2,
  .ce-drawer-v2-backdrop{
    transition:none !important;
  }
}

/* ==========================================================================
 * Universal drawer chrome · v0.17.0-vio-drawer-chrome · 2026-08-14
 *
 * Injected by cerivio-drawer-chrome.js into every drawer/modal header.
 * Three buttons: ← Back · ⛶ Fullscreen · × Close (delegate).
 * ========================================================================== */
.ce-chrome-bar {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  position: absolute;
  top: 12px;
  right: 52px;
  z-index: 5;
}
.ce-chrome-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: #64748B;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .12s;
}
.ce-chrome-btn:hover {
  background: rgba(15,23,42,0.06);
  color: #0F172A;
}
.ce-chrome-btn:focus-visible {
  outline: 2px solid #2DD4A0;
  outline-offset: 2px;
}
.ce-chrome-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.ce-chrome-btn svg {
  width: 15px;
  height: 15px;
}
.ce-fs-mode {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  z-index: 99998 !important;
}

/* Dark-mode tweak for the chrome bar */
body.theme-dark .ce-chrome-btn {
  color: #94A3B8;
}
body.theme-dark .ce-chrome-btn:hover {
  background: rgba(226,232,240,0.10);
  color: #E2E8F0;
}

/* ══════════════════════════════════════════════════════════════
   CANONICAL DRAWER CONTENT NORMALISER · v0.17.0-vio-drawer-content · 2026-08-14
   Applies uniform section-headers / labels / form-controls / KV rows
   to every drawer type without HTML rewrites in call sites.
   Targets .ce-drawer-v2, .drawer, .modal, .modal-card
   ══════════════════════════════════════════════════════════════ */

/* Container padding */
.ce-drawer-v2 .ce-drawer-v2-body,
.drawer .drawer-body,
.modal .modal-body,
.modal-card .modal-body { padding: 20px 24px; font-family: inherit; color: var(--text, #0F172A); }

/* Section headers · "CURRENT STATE" / "ADJUSTMENT" etc. */
.ce-drawer-v2 .ce-drawer-v2-body h3,
.ce-drawer-v2 .ce-drawer-v2-body h4,
.ce-drawer-v2 .ce-drawer-v2-body .section-h,
.ce-drawer-v2 .ce-drawer-v2-body [data-section-header],
.drawer .drawer-body h3,
.drawer .drawer-body h4,
.drawer .drawer-body .section-h,
.drawer .drawer-body [data-section-header],
.modal .modal-body h3,
.modal .modal-body h4,
.modal .modal-body .section-h,
.modal .modal-body [data-section-header] {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #64748B !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  border: none !important;
}
/* Second-and-later section headers get extra top spacing */
.ce-drawer-v2 .ce-drawer-v2-body h3 + *,
.drawer .drawer-body h3 + *,
.modal .modal-body h3 + * { margin-top: 0 !important; }
.ce-drawer-v2 .ce-drawer-v2-body h3:not(:first-child),
.drawer .drawer-body h3:not(:first-child),
.modal .modal-body h3:not(:first-child) { margin-top: 22px !important; }

/* Label:value rows inside drawers · make ALL simple KV pairs look like ce-drawer-v2-row */
.drawer .drawer-body dl, .modal .modal-body dl { margin: 0; display: grid; grid-template-columns: 140px 1fr; gap: 8px 14px; }
.drawer .drawer-body dt, .modal .modal-body dt { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748B; align-self: baseline; }
.drawer .drawer-body dd, .modal .modal-body dd { margin: 0; font-size: 13px; color: #0F172A; font-weight: 500; }

/* Form fields inside drawers · uniform */
.ce-drawer-v2 .ce-drawer-v2-body label,
.drawer .drawer-body label,
.modal .modal-body label {
  display: block;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #64748B !important;
  margin-bottom: 6px !important;
}
.ce-drawer-v2 .ce-drawer-v2-body input:not([type=checkbox]):not([type=radio]),
.ce-drawer-v2 .ce-drawer-v2-body select,
.ce-drawer-v2 .ce-drawer-v2-body textarea,
.drawer .drawer-body input:not([type=checkbox]):not([type=radio]),
.drawer .drawer-body select,
.drawer .drawer-body textarea,
.modal .modal-body input:not([type=checkbox]):not([type=radio]),
.modal .modal-body select,
.modal .modal-body textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 7px;
  font-family: inherit;
  font-size: 13px;
  color: #0F172A;
  background: #FFFFFF;
  box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
  margin-bottom: 14px;
}
.ce-drawer-v2 .ce-drawer-v2-body input:focus,
.ce-drawer-v2 .ce-drawer-v2-body select:focus,
.ce-drawer-v2 .ce-drawer-v2-body textarea:focus,
.drawer .drawer-body input:focus,
.drawer .drawer-body select:focus,
.drawer .drawer-body textarea:focus,
.modal .modal-body input:focus,
.modal .modal-body select:focus,
.modal .modal-body textarea:focus {
  outline: none;
  border-color: #2DD4A0;
  box-shadow: 0 0 0 3px rgba(45,212,160,0.15);
}
.ce-drawer-v2 .ce-drawer-v2-body .form-help,
.ce-drawer-v2 .ce-drawer-v2-body .hint,
.drawer .drawer-body .form-help,
.drawer .drawer-body .hint,
.modal .modal-body .form-help,
.modal .modal-body .hint { font-size: 11.5px; color: #64748B; margin: -8px 0 14px 0; line-height: 1.4; }

/* Primary CTA button inside drawer body */
.ce-drawer-v2 .ce-drawer-v2-body button.btn-mint,
.ce-drawer-v2 .ce-drawer-v2-body button.btn-primary,
.drawer .drawer-body button.btn-mint,
.drawer .drawer-body button.btn-primary,
.modal .modal-body button.btn-mint,
.modal .modal-body button.btn-primary {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  background: #2DD4A0;
  color: #0D1117;
  border: 1px solid #2DD4A0;
  cursor: pointer;
  width: 100%;
  margin-top: 8px;
  transition: background .12s, transform .06s;
}
.ce-drawer-v2 .ce-drawer-v2-body button.btn-mint:hover,
.drawer .drawer-body button.btn-mint:hover,
.modal .modal-body button.btn-mint:hover { background: #22B98A; }

/* Section divider · thin rule between logical blocks */
.ce-drawer-v2 .ce-drawer-v2-body hr,
.drawer .drawer-body hr,
.modal .modal-body hr { border: none; border-top: 1px solid #F1F5F9; margin: 18px 0; }

/* Definition-list style callout inside drawer body */
.ce-drawer-v2 .ce-drawer-v2-body .kv-row,
.drawer .drawer-body .kv-row,
.modal .modal-body .kv-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 14px;
  padding: 6px 0;
  border-bottom: 1px solid #F8FAFC;
}
.ce-drawer-v2 .ce-drawer-v2-body .kv-row:last-child,
.drawer .drawer-body .kv-row:last-child,
.modal .modal-body .kv-row:last-child { border-bottom: none; }
.ce-drawer-v2 .ce-drawer-v2-body .kv-row .k,
.drawer .drawer-body .kv-row .k,
.modal .modal-body .kv-row .k {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748B;
}
.ce-drawer-v2 .ce-drawer-v2-body .kv-row .v,
.drawer .drawer-body .kv-row .v,
.modal .modal-body .kv-row .v { font-size: 13px; color: #0F172A; font-weight: 500; }

/* Dark-mode inversions */
body.theme-dark .ce-drawer-v2 .ce-drawer-v2-body,
body.theme-dark .drawer .drawer-body,
body.theme-dark .modal .modal-body { color: #E2E8F0; }
body.theme-dark .ce-drawer-v2 .ce-drawer-v2-body input,
body.theme-dark .ce-drawer-v2 .ce-drawer-v2-body select,
body.theme-dark .ce-drawer-v2 .ce-drawer-v2-body textarea,
body.theme-dark .drawer .drawer-body input,
body.theme-dark .drawer .drawer-body select,
body.theme-dark .drawer .drawer-body textarea {
  background: #0F172A; color: #E2E8F0; border-color: rgba(148,163,184,0.25);
}

/* ═════════════════════════════════════════════════════════════
   Chrome bar refinement · 2026-08-14
   Back always-visible, S/M/L/Full cluster with sidebar-picker styling
   ═════════════════════════════════════════════════════════════ */
.ce-chrome-bar {
  position: absolute;
  top: 12px;
  right: 60px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  z-index: 6;
  background: rgba(248, 250, 252, 0.85);
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  backdrop-filter: blur(4px);
}
.ce-chrome-bar .ce-chrome-divider {
  width: 1px;
  height: 20px;
  background: #E5E7EB;
  margin: 0 4px;
}
.ce-chrome-bar .ce-chrome-size-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #64748B;
  text-transform: uppercase;
  padding: 0 4px 0 2px;
}
.ce-chrome-btn.ce-chrome-back {
  padding: 4px 10px 4px 6px;
  width: auto;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
}
.ce-chrome-btn.ce-chrome-back .ce-chrome-btn-label {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
}
.ce-chrome-btn.ce-chrome-back[data-cci-no-history] {
  opacity: 0.55;
  cursor: default;
  color: #94A3B8;
}
.ce-chrome-btn.ce-chrome-back:not([data-cci-no-history]):hover {
  background: rgba(45, 212, 160, 0.10);
  color: #0F172A;
}
.ce-chrome-btn.ce-chrome-size {
  width: 26px;
  height: 26px;
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
  border-radius: 5px;
}
.ce-chrome-btn.ce-chrome-size:hover {
  background: rgba(45, 212, 160, 0.10);
  color: #0F172A;
}
.ce-chrome-btn.ce-chrome-size.ce-active {
  background: #2DD4A0;
  color: #0D1117;
}
.ce-chrome-btn.ce-chrome-close {
  padding: 4px 6px;
  color: #64748B;
}
.ce-chrome-btn.ce-chrome-close:hover {
  background: rgba(220, 38, 38, 0.10);
  color: #DC2626;
}

/* Discrete drawer size classes · applied by the SIZE picker */
.ce-drawer-v2.ce-sz-s { width: min(360px, 96vw) !important; }
.ce-drawer-v2.ce-sz-m { width: min(480px, 96vw) !important; }
.ce-drawer-v2.ce-sz-l { width: min(720px, 96vw) !important; }

/* Dark-mode variant of the chrome bar */
body.theme-dark .ce-chrome-bar {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(148, 163, 184, 0.2);
}
body.theme-dark .ce-chrome-bar .ce-chrome-divider { background: rgba(148, 163, 184, 0.2); }
body.theme-dark .ce-chrome-bar .ce-chrome-size-label { color: #94A3B8; }
body.theme-dark .ce-chrome-btn.ce-chrome-back { color: #E2E8F0; }
body.theme-dark .ce-chrome-btn.ce-chrome-back[data-cci-no-history] { color: #64748B; }
body.theme-dark .ce-chrome-btn.ce-chrome-back:not([data-cci-no-history]):hover { background: rgba(45, 212, 160, 0.20); color: #F8FAFC; }
body.theme-dark .ce-chrome-btn.ce-chrome-size { color: #94A3B8; }
body.theme-dark .ce-chrome-btn.ce-chrome-size:hover { background: rgba(45, 212, 160, 0.20); color: #F8FAFC; }
body.theme-dark .ce-chrome-btn.ce-chrome-close { color: #94A3B8; }
body.theme-dark .ce-chrome-btn.ce-chrome-close:hover { background: rgba(220, 38, 38, 0.20); color: #F87171; }

/* Header padding-right so drawer title doesn't collide with chrome */
.ce-drawer-v2 .ce-drawer-v2-header,
.drawer .drawer-header,
.modal .modal-h { padding-right: 260px !important; min-height: 40px; }

/* ==========================================================================
 * Global topbar "← Back" button · cerivio-topbar-back.js (2026-08-14)
 * Injected as first child of every SPA's .topbar just before the portal
 * switcher chip (BUYER PORTAL / SELLER PORTAL / ADMIN PORTAL / AEGIS).
 * Kept visible always · dimmed when there is no history.
 * ========================================================================== */
.ce-topbar-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 14px 0 6px; padding: 6px 12px 6px 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font: 600 12px/1.2 'Inter', 'SF Pro Text', -apple-system, sans-serif;
  border-radius: 999px;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, opacity .14s ease, transform .08s ease;
  height: 30px;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
}
.ce-topbar-back svg {
  width: 14px; height: 14px; flex-shrink: 0;
  color: currentColor;
}
.ce-topbar-back .ce-topbar-back-label {
  font-size: 12px; letter-spacing: 0.02em;
}
.ce-topbar-back:hover:not([disabled]) {
  background: rgba(45, 212, 160, 0.18);
  border-color: rgba(45, 212, 160, 0.55);
  color: #ffffff;
}
.ce-topbar-back:active:not([disabled]) {
  transform: translateY(1px);
}
.ce-topbar-back:focus-visible {
  outline: 2px solid rgba(45, 212, 160, 0.65);
  outline-offset: 2px;
}
.ce-topbar-back[disabled],
.ce-topbar-back[data-ce-no-history] {
  opacity: 0.55; cursor: not-allowed;
}
/* Light-theme SPA topbars (e.g. admin light bars) fall back to darker text */
body:not(.theme-dark) .topbar.topbar-light .ce-topbar-back,
body:not(.theme-dark) .topbar[data-theme="light"] .ce-topbar-back {
  color: #0F172A;
  border-color: rgba(15, 23, 42, 0.18);
}
body:not(.theme-dark) .topbar.topbar-light .ce-topbar-back:hover:not([disabled]),
body:not(.theme-dark) .topbar[data-theme="light"] .ce-topbar-back:hover:not([disabled]) {
  background: rgba(45, 212, 160, 0.14);
  border-color: rgba(45, 212, 160, 0.55);
  color: #0F172A;
}