/*
 * Zimbazon Premium UI
 * Canonical visual layer for the marketplace and operational portals.
 * Loaded last so legacy page-level CSS can keep behaviour while this file
 * provides one accessible, responsive design system.
 */
:root {
  --zz-navy-950: #071b35;
  --zz-navy-900: #08213f;
  --zz-navy-800: #0b2d52;
  --zz-blue-700: #0a4fae;
  --zz-blue-600: #1267d6;
  --zz-blue-500: #1677ff;
  --zz-gold-500: #f8b51b;
  --zz-gold-400: #ffc33d;
  --zz-green-600: #07865d;
  --zz-red-500: #ef3340;
  --zz-bg: #f7f8fa;
  --zz-surface: #ffffff;
  --zz-surface-subtle: #fbfcfd;
  --zz-ink: #132238;
  --zz-muted: #667085;
  --zz-line: #e8ebf0;
  --zz-line-strong: #d7dde5;
  --zz-shadow-sm: 0 4px 16px rgba(7, 27, 53, .045);
  --zz-shadow-md: 0 14px 38px rgba(7, 27, 53, .085);
  --zz-shadow-lg: 0 28px 70px rgba(3, 16, 34, .2);
  --zz-radius-sm: 10px;
  --zz-radius: 14px;
  --zz-radius-lg: 18px;
  --zz-content: 1600px;
  --zz-max: 1600px;
  --max: 1600px;
  --blue900: var(--zz-navy-900);
  --blue800: var(--zz-navy-800);
  --blue700: var(--zz-blue-600);
  --blue600: var(--zz-blue-600);
  --blue500: var(--zz-blue-500);
  --blue100: #eaf3ff;
  --bg: var(--zz-bg);
  --panel: var(--zz-surface);
  --text: var(--zz-ink);
  --muted: var(--zz-muted);
  --line: var(--zz-line);
  --shadow: var(--zz-shadow-sm);
  --radius: var(--zz-radius);
  --radius2: var(--zz-radius-lg);
}

/* Premium information articulation and navigation interaction pass */
html[data-zz-area="admin"] .nav a,
html[data-zz-area="vendor"] .nav a,
html[data-zz-area="courier"][data-zz-page="courier"] .nav button {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent !important;
  outline: 0;
  box-shadow: none !important;
  transform: none !important;
}
html[data-zz-area="admin"] .nav a::after,
html[data-zz-area="vendor"] .nav a::after,
html[data-zz-area="courier"][data-zz-page="courier"] .nav button::after {
  display: none !important;
  content: none !important;
}
html[data-zz-area="admin"] .nav a:hover,
html[data-zz-area="vendor"] .nav a:hover,
html[data-zz-area="courier"][data-zz-page="courier"] .nav button:hover {
  border-color: transparent !important;
  background: linear-gradient(90deg,rgba(35,128,230,.18),rgba(35,128,230,.06)) !important;
  box-shadow: none !important;
}
html[data-zz-area="admin"] .nav a.active,
html[data-zz-area="vendor"] .nav a.active,
html[data-zz-area="courier"][data-zz-page="courier"] .nav button.active {
  border-color: transparent !important;
  background: linear-gradient(100deg,#1a78df 0%,#1264c5 100%) !important;
  box-shadow: 0 10px 24px rgba(3,66,144,.3) !important;
}
html[data-zz-area="admin"] .nav a.active .zz-nav-meta,
html[data-zz-area="vendor"] .nav a.active .zz-nav-meta { color: #b9dcff !important; }
html[data-zz-area="admin"] .nav a:focus-visible,
html[data-zz-area="vendor"] .nav a:focus-visible,
html[data-zz-area="courier"][data-zz-page="courier"] .nav button:focus-visible {
  outline: 2px solid rgba(248,181,27,.9);
  outline-offset: 2px;
}

html[data-zz-area="admin"][data-zz-page="orders"] #cards { grid-template-columns: repeat(5,minmax(0,1fr)); }
html[data-zz-area="admin"][data-zz-page="trust"] #cards { grid-template-columns: repeat(4,minmax(0,1fr)); }
html[data-zz-area="admin"][data-zz-page="orders"] #cards > .kpi,
html[data-zz-area="admin"][data-zz-page="trust"] #cards > .kpi {
  --zz-summary-color: #1672df;
  position: relative;
  grid-column: auto !important;
  min-width: 0;
  min-height: 156px;
  padding: 21px 20px 18px;
  overflow: hidden;
  border: 1px solid #dfe8f2;
  border-top: 3px solid var(--zz-summary-color);
  border-radius: 16px;
  background: radial-gradient(circle at 96% 4%,color-mix(in srgb,var(--zz-summary-color) 13%,transparent),transparent 7rem),linear-gradient(145deg,#fff,#fbfdff);
  box-shadow: 0 13px 30px rgba(7,42,82,.07);
}
html[data-zz-area="admin"] #cards > .kpi:nth-child(2) { --zz-summary-color: #079467; }
html[data-zz-area="admin"] #cards > .kpi:nth-child(3) { --zz-summary-color: #e99808; }
html[data-zz-area="admin"] #cards > .kpi:nth-child(4) { --zz-summary-color: #7a4de8; }
html[data-zz-area="admin"] #cards > .kpi:nth-child(5) { --zz-summary-color: #e54859; }
html[data-zz-area="admin"] #cards > .kpi:nth-child(6) { --zz-summary-color: #0c8fa0; }
html[data-zz-area="admin"] #cards > .kpi:nth-child(7) { --zz-summary-color: #315fcb; }
html[data-zz-area="admin"] #cards > .kpi:nth-child(8) { --zz-summary-color: #cc6b24; }
html[data-zz-area="admin"] #cards > .kpi::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb,var(--zz-summary-color) 18%,#fff);
  border-radius: 12px;
  background: linear-gradient(90deg,transparent 7px,var(--zz-summary-color) 8px 10px,transparent 11px 17px,var(--zz-summary-color) 18px 20px,transparent 21px 27px,var(--zz-summary-color) 28px 30px,transparent 31px),linear-gradient(180deg,transparent 12px,color-mix(in srgb,var(--zz-summary-color) 12%,#fff) 13px 25px,transparent 26px),color-mix(in srgb,var(--zz-summary-color) 8%,#fff);
  opacity: .9;
}
html[data-zz-area="admin"] #cards > .kpi > span { max-width: calc(100% - 48px); color: #617086; font-size: 11px; font-weight: 700; letter-spacing: .045em; line-height: 1.35; text-transform: uppercase; }
html[data-zz-area="admin"] #cards > .kpi > strong { margin-top: 5px; color: #061d3b; font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.035em; }
html[data-zz-area="admin"] #cards > .kpi > small { display: flex; align-items: center; gap: 7px; margin-top: auto; color: #697a90; font-size: 11px; line-height: 1.4; }
html[data-zz-area="admin"] #cards > .kpi > small::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--zz-summary-color); box-shadow: 0 0 0 4px color-mix(in srgb,var(--zz-summary-color) 10%,transparent); }

@media (max-width: 1320px) {
  html[data-zz-area="admin"][data-zz-page="orders"] #cards,
  html[data-zz-area="admin"][data-zz-page="trust"] #cards { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  html[data-zz-area="admin"][data-zz-page="orders"] #cards,
  html[data-zz-area="admin"][data-zz-page="trust"] #cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  html[data-zz-area="admin"][data-zz-page="orders"] #cards,
  html[data-zz-area="admin"][data-zz-page="trust"] #cards { grid-template-columns: minmax(0,1fr); }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  background: var(--zz-bg);
  font-size: 16px;
  overflow-x: clip;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: clip;
  background: var(--zz-bg);
  color: var(--zz-ink);
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body, button, input, select, textarea { font-size: 15px; }
button, input, select, textarea { font: inherit; }
img, svg { max-width: 100%; }
a { text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid rgba(22, 119, 255, .32);
  outline-offset: 2px;
}

::selection { background: rgba(248, 181, 27, .34); color: var(--zz-navy-950); }

/* Shared controls */
.btn,
button.btn,
a.btn,
.addBtn,
.searchBar button,
.searchBtn {
  min-height: 46px;
  border: 1px solid var(--zz-line-strong);
  border-radius: var(--zz-radius-sm);
  padding: 11px 18px;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .005em;
  box-shadow: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.btn:hover,
.addBtn:hover,
.searchBar button:hover,
.searchBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(7, 27, 53, .09);
}

.btn.primary,
.btn-primary,
button[type="submit"].primary {
  border-color: var(--zz-blue-600);
  background: var(--zz-blue-600);
  color: #fff;
  text-shadow: none;
}

.addBtn,
.searchBar button,
.searchBtn {
  border-color: var(--zz-gold-500);
  background: var(--zz-gold-500);
  color: var(--zz-navy-950);
}

.btn.primary:hover,
.btn-primary:hover,
.btn.primary:focus-visible,
.btn-primary:focus-visible {
  border-color: #0d58bb;
  background: #0d58bb;
  color: #fff;
}

.addBtn:hover,
.searchBar button:hover,
.searchBtn:hover {
  border-color: #eaa70e;
  background: #ffca45;
  color: var(--zz-navy-950);
}

.btn.danger { border-color: var(--zz-red-500); background: var(--zz-red-500); color: #fff; }
.btn:not(.primary):not(.danger):not(.btn-primary) { color: var(--zz-ink); background: #fff; }
.btn.sm { min-height: 40px; padding: 8px 13px; font-size: 13px; }
.btn:disabled,
button:disabled { cursor: not-allowed; opacity: .48; transform: none; box-shadow: none; }

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.input {
  min-height: 46px;
  border: 1px solid var(--zz-line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--zz-ink);
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 400;
  outline: 0;
}

textarea { min-height: 110px; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: #8b98aa; opacity: 1; }
input:focus, select:focus, textarea:focus, .input:focus {
  border-color: var(--zz-blue-500);
  box-shadow: 0 0 0 4px rgba(22, 119, 255, .11);
}

label, .formGrid label { color: #31445d; font-size: 14px; font-weight: 500; }

.card, .zz-card, .aiPanel, .vendorPanel, .promoPanel, .dealPanel,
.checkoutHero, .safeItem, .panel, .box {
  border-color: var(--zz-line);
  border-radius: var(--zz-radius);
  box-shadow: var(--zz-shadow-sm);
}

.card, .zz-card, .panel, .box { background: #fff; }
.cardHead, .modalHead, .modalFoot { padding: 18px 20px; }
.cardBody, .modalBody, .pad { padding: 20px; }
.muted, .meta, .sub, .pageNote { color: var(--zz-muted); }
.small, small { font-size: 13px; }

.badge, span.badge {
  position: static;
  min-width: auto;
  height: auto;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge.ok { color: #066849; border-color: #b9e5d6; background: #eaf8f3; }
.badge.warn { color: #875700; border-color: #f3d899; background: #fff8e8; }
.badge.bad, .badge.danger { color: #ae2430; border-color: #f4c2c7; background: #fff0f1; }

table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
th, td { height: 54px; padding: 12px 16px; border-bottom: 1px solid var(--zz-line); vertical-align: middle; }
th { background: var(--zz-surface-subtle); color: #475467; font-size: 13px; font-weight: 500; letter-spacing: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #f8fbff; }
.tableWrap { overflow: auto; border-radius: 0 0 var(--zz-radius) var(--zz-radius); }

.modalBackdrop { background: rgba(4, 16, 31, .42); backdrop-filter: blur(3px); }
.modal, .zzAlert {
  width: min(680px, calc(100vw - 32px));
  border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--zz-radius-lg);
  box-shadow: var(--zz-shadow-lg);
}

/* Marketplace header */
html[data-zz-area="marketplace"] .siteHeader,
html[data-zz-area="marketplace"] body > .topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: var(--zz-navy-950);
  color: #fff;
  box-shadow: 0 10px 30px rgba(3, 16, 34, .2);
}

html[data-zz-area="marketplace"] .siteHeader .utilityBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: min(100%, var(--zz-content));
  min-height: 30px;
  margin: 0 auto;
  padding: 5px 22px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: #041226;
  color: #c7d5e7;
  font-size: 12px;
}
html[data-zz-area="marketplace"] .utilityBar > div {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
html[data-zz-area="marketplace"] .utilityBar strong { color: var(--zz-gold-400); }
html[data-zz-area="marketplace"] .utilityBar a { color: #dbe6f2; }
html[data-zz-area="marketplace"] .utilityBar a:hover { color: var(--zz-gold-400); }

html[data-zz-area="marketplace"] .headerMain,
html[data-zz-area="marketplace"] .toprow {
  min-height: 76px;
  max-width: var(--zz-content);
  gap: 20px;
  padding: 12px 22px;
}

html[data-zz-area="marketplace"] .brand,
html[data-zz-area="marketplace"] .brandCopy strong,
html[data-zz-area="marketplace"] .brand small { color: #fff; }

html[data-zz-area="marketplace"] .brand img,
html[data-zz-area="marketplace"] .topbar .logo {
  width: 76px;
  height: 48px;
  max-width: 76px;
  padding: 3px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
  box-shadow: none;
}

html[data-zz-area="marketplace"] .brandCopy span,
html[data-zz-area="marketplace"] .brand small { color: #b9c9dc; font-size: 12px; }

html[data-zz-area="marketplace"] .searchBox,
html[data-zz-area="marketplace"] .searchBar {
  min-height: 52px;
  border: 2px solid var(--zz-gold-500);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
}

html[data-zz-area="marketplace"] .searchBox select,
html[data-zz-area="marketplace"] .searchBox input,
html[data-zz-area="marketplace"] .searchBar select,
html[data-zz-area="marketplace"] .searchBar input {
  min-height: 48px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html[data-zz-area="marketplace"] .searchBox select,
html[data-zz-area="marketplace"] .searchBar select { border-right: 1px solid var(--zz-line); }

html[data-zz-area="marketplace"] .searchBtn,
html[data-zz-area="marketplace"] .searchBar button {
  min-height: 48px;
  border: 0;
  border-radius: 0 9px 9px 0;
  padding-inline: 22px;
}

html[data-zz-area="marketplace"] .headerActions .btn,
html[data-zz-area="marketplace"] .rightActions .btn,
html[data-zz-area="marketplace"] .iconBtn {
  min-height: 44px;
  border-color: rgba(255,255,255,.17);
  background: rgba(255,255,255,.07);
  color: #fff;
}

html[data-zz-area="marketplace"] .headerActions .btn.primary,
html[data-zz-area="marketplace"] .rightActions .btn.primary { background: var(--zz-gold-500); color: var(--zz-navy-950); }

html[data-zz-area="marketplace"] .quickNav {
  border: 0;
  background: var(--zz-navy-900);
  color: #d9e5f2;
}

html[data-zz-area="marketplace"] .quickNav .shell { min-height: 46px; padding-block: 6px; }
html[data-zz-area="marketplace"] .quickNav a,
html[data-zz-area="marketplace"] .quickNav button { color: #d9e5f2; font-size: 14px; }
html[data-zz-area="marketplace"] .quickNav a:hover,
html[data-zz-area="marketplace"] .quickNav a.active { color: var(--zz-gold-400); }
html[data-zz-area="marketplace"] .currencySelect { min-height: 34px; background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }

html[data-zz-area="marketplace"] .accountMenu,
html[data-zz-area="marketplace"] .dropMenu { color: var(--zz-ink); }

/* Homepage */
html[data-zz-page="home"] body { background: #fff; }
html[data-zz-page="home"] main { padding: 24px 0 50px; background: #fff; }
html[data-zz-page="home"] main.shell { max-width: var(--zz-content); }
html[data-zz-page="home"] .zz-hero-module {
  min-height: 410px;
  margin-bottom: 26px;
  border: 0;
  border-radius: 18px;
  background: var(--zz-navy-950);
  box-shadow: var(--zz-shadow-md);
}

html[data-zz-page="home"] .zz-hero-module > .row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(310px, .8fr);
  min-height: 410px;
  margin: 0;
}

html[data-zz-page="home"] .zz-hero-module > .row > * { width: auto; max-width: none; padding: 0; }
html[data-zz-page="home"] .hero-main-pane {
  min-height: 410px;
  padding: 56px 48px 44px;
  color: #fff;
  background:
    radial-gradient(circle at 76% 50%, rgba(22,119,255,.29), transparent 31%),
    linear-gradient(120deg, #06162d 0%, #082a50 100%) !important;
}

html[data-zz-page="home"] .hero-main-pane::after {
  right: 0;
  top: 0;
  width: 53%;
  height: 100%;
  opacity: .95;
  background-position: center;
  background-size: cover;
  filter: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 24%);
}

html[data-zz-page="home"] .hero-copy { max-width: 54%; }
html[data-zz-page="home"] .hero-copy .greeting { color: var(--zz-gold-400); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
html[data-zz-page="home"] .hero-copy h1 {
  color: #fff;
  font-size: clamp(42px, 4vw, 58px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 600;
}
html[data-zz-page="home"] .hero-copy h1 strong { color: var(--zz-gold-400); }
html[data-zz-page="home"] .hero-copy p { max-width: 520px; color: #c8d7e8; font-size: 17px; font-weight: 500; }
html[data-zz-page="home"] .hero-pill { border-color: rgba(255,255,255,.17); background: rgba(255,255,255,.08); color: #e7eef7; font-size: 13px; box-shadow: none; }
html[data-zz-page="home"] .hero-pill i { color: var(--zz-gold-400); }
html[data-zz-page="home"] .hero-action-row .btn { min-height: 50px; }
html[data-zz-page="home"] .hero-action-row .btn-primary { border-color: var(--zz-gold-500); background: var(--zz-gold-500); color: var(--zz-navy-950); }
html[data-zz-page="home"] .hero-action-row .btn:not(.btn-primary) { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; }

html[data-zz-page="home"] .promo-slant { border-left: 1px solid rgba(255,255,255,.1); background: #07865d !important; }
html[data-zz-page="home"] .promo-pane { min-height: 410px; padding: 42px 30px; background: linear-gradient(145deg, #0c976c, #056e4c) !important; color: #fff; }
html[data-zz-page="home"] .promo-pane h2 { font-size: 31px; line-height: 1.1; }
html[data-zz-page="home"] .promo-pane p { color: rgba(255,255,255,.84); font-size: 15px; }
html[data-zz-page="home"] .promo-pane .btn { background: #fff; color: #075a40; border-color: #fff; }
html[data-zz-page="home"] .promoBenefits { display: grid; gap: 9px; margin: 5px 0 20px; color: #eefbf6; font-size: 14px; }
html[data-zz-page="home"] .promoBenefits span { display: flex; align-items: center; gap: 9px; }
html[data-zz-page="home"] .promoBenefits i { color: #d8fff0; }

html[data-zz-page="home"] .carousel-control-prev,
html[data-zz-page="home"] .carousel-control-next { width: 46px; opacity: .9; }
html[data-zz-page="home"] .carousel-control-prev-icon,
html[data-zz-page="home"] .carousel-control-next-icon { width: 36px; height: 36px; padding: 10px; border-radius: 50%; background-size: 52%; background-color: rgba(6,22,45,.7); }
html[data-zz-page="home"] .zz-hero-control,
html[data-zz-page="home"] .promo-control {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 50% !important;
  background: rgba(6,22,45,.78) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
}
html[data-zz-page="home"] .carousel-indicators { z-index: 6; gap: 6px; margin-bottom: 14px; }
html[data-zz-page="home"] .carousel-indicators [data-bs-target] { width: 9px; height: 9px; margin: 0; border: 0; border-radius: 99px; background: #fff; opacity: .55; transition: width .2s ease; }
html[data-zz-page="home"] .carousel-indicators .active { width: 28px; opacity: 1; background: var(--zz-gold-400); }

html[data-zz-page="home"] .content-shell { align-items: start; }
html[data-zz-page="home"] .section { margin-top: 34px; }
html[data-zz-page="home"] .sectionHead { margin-bottom: 17px; align-items: end; }
html[data-zz-page="home"] .sectionHead h2 { color: var(--zz-navy-950); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
html[data-zz-page="home"] .sectionHead p { font-size: 14px; }
html[data-zz-page="home"] .sectionHead a, html[data-zz-page="home"] .linkBtn { color: var(--zz-blue-600); }

html[data-zz-page="home"] .productGrid { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 18px; }
html[data-zz-page="home"] body:not(.resultsMode) #productGrid { grid-auto-columns: minmax(210px, 220px); gap: 16px; }
html[data-zz-page="home"] .productRail { grid-auto-columns: minmax(210px, 235px); gap: 18px; }
html[data-zz-page="home"] .productCard {
  border: 1px solid var(--zz-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html[data-zz-page="home"] .productCard:hover { transform: translateY(-2px); border-color: #d7dde5; box-shadow: var(--zz-shadow-sm); }
html[data-zz-page="home"] .productImage { aspect-ratio: 1.14 / 1; padding: 10px; background: #f3f6fa; }
html[data-zz-page="home"] .productImage img { object-fit: contain; }
html[data-zz-page="home"] .productInfo { gap: 9px; padding: 14px; }
html[data-zz-page="home"] .productName { min-height: 42px; color: var(--zz-navy-950); font-size: 15px; font-weight: 600; }
html[data-zz-page="home"] .productVendor { font-size: 13px; }
html[data-zz-page="home"] .price { color: var(--zz-navy-900); font-size: 18px; }
html[data-zz-page="home"] .stock, html[data-zz-page="home"] .ratingLine { font-size: 13px; }
html[data-zz-page="home"] .cardActions { grid-template-columns: 1fr 46px; }
html[data-zz-page="home"] .cardActions .addBtn, html[data-zz-page="home"] .cardActions .viewBtn { min-height: 44px; }

html[data-zz-page="home"] .aiPanel,
html[data-zz-page="home"] .vendorPanel { padding: 20px; border-radius: 16px; }
html[data-zz-page="home"] .aiTitle h2,
html[data-zz-page="home"] .vendorTitle h2 { color: var(--zz-navy-900); font-size: 19px; }
html[data-zz-page="home"] .aiTitle p,
html[data-zz-page="home"] .vendorTitle p { font-size: 13px; }
html[data-zz-page="home"] .aiMsg { font-size: 14px; }
html[data-zz-page="home"] .aiMsg.user, html[data-zz-page="home"] .aiAsk button { background: var(--zz-blue-600); }
html[data-zz-page="home"] .promoGrid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
html[data-zz-page="home"] .promoPanel { padding: 14px; }
html[data-zz-page="home"] .tileImg { width: 58px; height: 58px; }
html[data-zz-page="home"] .tileIcon { display: grid; place-items: center; width: 100%; height: 100%; color: var(--zz-blue-600); font-size: 25px; background: linear-gradient(145deg, #eef5ff, #f8fbff); }
html[data-zz-page="home"] .vendorTrustMini { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--zz-line); }
html[data-zz-page="home"] .vendorTrustMini div { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 9px; align-items: center; }
html[data-zz-page="home"] .vendorTrustMini i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #edf4ff; color: var(--zz-blue-600); }
html[data-zz-page="home"] .vendorTrustMini b { display: block; color: var(--zz-navy-950); font-size: 13px; }
html[data-zz-page="home"] .vendorTrustMini span { display: block; color: var(--zz-muted); font-size: 12px; }
html[data-zz-page="home"] .homeTrustBar { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0; margin-top: 20px; border: 1px solid var(--zz-line); border-radius: 14px; background: #fff; box-shadow: var(--zz-shadow-sm); }
html[data-zz-page="home"] .homeTrustItem { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; align-items: center; min-height: 72px; padding: 12px 18px; border-right: 1px solid var(--zz-line); }
html[data-zz-page="home"] .homeTrustItem:last-child { border-right: 0; }
html[data-zz-page="home"] .homeTrustItem i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #edf4ff; color: var(--zz-navy-900); font-size: 18px; }
html[data-zz-page="home"] .homeTrustItem b { display: block; color: var(--zz-navy-950); font-size: 13px; }
html[data-zz-page="home"] .homeTrustItem span { display: block; color: var(--zz-muted); font-size: 12px; }

html[data-zz-page="home"] footer { margin-top: 0; background: var(--zz-navy-950); color: #c5d2e1; }
html[data-zz-page="home"] .welcomeOverlay { overflow: auto; overscroll-behavior: contain; }
html[data-zz-page="home"] .welcomeCard { max-width: calc(100vw - 36px); }
html[data-zz-page="home"] .welcomeArt,
html[data-zz-page="home"] .welcomeBody,
html[data-zz-page="home"] .welcomeList,
html[data-zz-page="home"] .welcomeList > div { min-width: 0; }
html[data-zz-page="home"] .welcomeBody,
html[data-zz-page="home"] .welcomeList > div { overflow-wrap: anywhere; }
html[data-zz-page="home"] .welcomeList span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }

/* Public content pages */
html[data-zz-area="marketplace"] body > main.wrap,
html[data-zz-area="client"] main.wrap {
  width: min(100%, var(--zz-content));
  margin-inline: auto;
  padding: 30px 22px 56px;
}

html[data-zz-area="marketplace"] .crumbs { margin: 0 0 16px; font-size: 13px; color: var(--zz-muted); }
html[data-zz-area="marketplace"] .crumbs a { color: var(--zz-blue-600); }
html[data-zz-area="marketplace"] .checkoutHero { padding: 25px 28px; margin-bottom: 20px; background: linear-gradient(120deg, #fff, #f5f9ff); }
html[data-zz-area="marketplace"] .checkoutHero h1,
html[data-zz-area="marketplace"] .pageTitle { color: var(--zz-navy-950); font-size: clamp(28px, 3vw, 36px); line-height: 1.12; letter-spacing: -.025em; }
html[data-zz-area="marketplace"] .checkoutHero p { font-size: 15px; }
html[data-zz-area="marketplace"] .safeStrip { gap: 13px; margin-bottom: 22px; }
html[data-zz-area="marketplace"] .safeItem { min-height: 76px; padding: 15px; font-size: 13px; box-shadow: none; }
html[data-zz-area="marketplace"] .safeItem b { font-size: 14px; }
html[data-zz-area="marketplace"] .safeIcon { width: 38px; height: 38px; border-radius: 10px; background: #eaf3ff; color: var(--zz-blue-600); }
html[data-zz-area="marketplace"] .grid { gap: 20px; }
html[data-zz-area="marketplace"] .item { padding-block: 18px; }
html[data-zz-area="marketplace"] .name { color: var(--zz-navy-950); font-size: 16px; }
html[data-zz-area="marketplace"] .meta2 { font-size: 13px; }

/* Product detail: retain data hooks, present a clear three-column premium layout. */
html[data-zz-page="product"] .productShell,
html[data-zz-page="product"] .productGrid,
html[data-zz-page="product"] .detailGrid {
  gap: 24px;
}
html[data-zz-page="product"] .prodWrap {
  grid-template-columns: minmax(360px, 1.15fr) minmax(300px, .9fr) minmax(280px, .65fr);
  gap: 20px;
  align-items: start;
}
html[data-zz-page="product"] .gallery,
html[data-zz-page="product"] .productInfo,
html[data-zz-page="product"] .buyBox,
html[data-zz-page="product"] .purchaseCard { border-radius: var(--zz-radius); }
html[data-zz-page="product"] .mainImg,
html[data-zz-page="product"] .mainImage,
html[data-zz-page="product"] .heroImg { min-height: 500px; background: var(--zz-surface-subtle); border-color: var(--zz-line); }
html[data-zz-page="product"] h1 { color: var(--zz-navy-950); font-size: clamp(28px, 3vw, 38px); line-height: 1.16; letter-spacing: -.025em; }
html[data-zz-page="product"] .price { color: var(--zz-navy-900); font-size: 29px; }
html[data-zz-page="product"] .productDetailsCard .cardBody { display: flex; flex-direction: column; gap: 14px; }
html[data-zz-page="product"] .productDetailsCard .pageTitle,
html[data-zz-page="product"] .productDetailsCard .pageNote { margin-top: 0 !important; }
html[data-zz-page="product"] .productDetailsCard .infoGrid { grid-template-columns: 1fr; }
html[data-zz-page="product"] #buyCard { position: sticky; top: 154px; border-color: #d9e1ea; box-shadow: var(--zz-shadow-sm); }

/* Buyer authentication */
html[data-zz-page="login"], html[data-zz-page="register"] { background: var(--zz-navy-950); }
html[data-zz-page="login"] body, html[data-zz-page="register"] body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 24%, rgba(22,119,255,.24), transparent 28%),
    radial-gradient(circle at 36% 78%, rgba(248,181,27,.1), transparent 25%),
    var(--zz-navy-950);
  color: #fff;
}

html[data-zz-page="login"] body > .shell,
html[data-zz-page="register"] body > .shell {
  width: min(1180px, calc(100% - 40px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 54px 0;
  grid-template-columns: minmax(0, 1fr) minmax(440px, .92fr);
  gap: 60px;
  align-items: center;
}

html[data-zz-page="login"] .hero,
html[data-zz-page="register"] .hero { border: 0; background: transparent; box-shadow: none; }
html[data-zz-page="login"] .heroIn,
html[data-zz-page="register"] .heroIn { padding: 20px 4px; }
html[data-zz-page="login"] .hero .logo,
html[data-zz-page="register"] .hero .logo { width: 112px; height: 80px; border-radius: 0; background: transparent url('../brand/zimbazon-logo-white-v1.png') center / contain no-repeat; }
html[data-zz-page="login"] .hero h1,
html[data-zz-page="register"] .hero h1 { margin-top: 28px; color: #fff; font-size: clamp(40px, 5vw, 58px); line-height: 1.02; letter-spacing: -.04em; }
html[data-zz-page="login"] .hero p,
html[data-zz-page="register"] .hero p { max-width: 580px; color: #c5d4e5; font-size: 16px; }
html[data-zz-page="login"] .pill,
html[data-zz-page="register"] .pill { min-height: 42px; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.07); color: #eaf1f9; font-size: 13px; }
html[data-zz-page="login"] .card,
html[data-zz-page="register"] .card {
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 22px;
  background: #fff;
  color: var(--zz-ink);
  box-shadow: var(--zz-shadow-lg);
}
html[data-zz-page="login"] .head,
html[data-zz-page="register"] .head { padding: 24px 26px 18px; border-color: var(--zz-line); }
html[data-zz-page="login"] .title,
html[data-zz-page="register"] .title { color: var(--zz-navy-950); font-size: 25px; }
html[data-zz-page="login"] .sub,
html[data-zz-page="register"] .sub { color: var(--zz-muted); font-size: 14px; }
html[data-zz-page="login"] form,
html[data-zz-page="register"] form { gap: 15px; padding: 22px 26px 28px; }
html[data-zz-page="login"] form label,
html[data-zz-page="register"] form label { color: #344760; font-size: 14px; }
html[data-zz-page="login"] form input,
html[data-zz-page="register"] form input,
html[data-zz-page="register"] form select { background: #fff; color: var(--zz-ink); border-color: var(--zz-line-strong); }
html[data-zz-page="login"] .card .link,
html[data-zz-page="register"] .card .link { color: var(--zz-blue-600); }
html[data-zz-page="login"] .hero .link,
html[data-zz-page="register"] .hero .link { color: var(--zz-gold-400); }

/* Operational portals */
html[data-zz-area="admin"] body,
html[data-zz-area="vendor"] body,
html[data-zz-area="courier"] body,
html[data-zz-area="client"] body { background: var(--zz-bg); }

html[data-zz-area="admin"] body > .shell,
html[data-zz-area="vendor"] body > .shell {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  min-height: 100vh;
}

html[data-zz-area="admin"] .sidebar,
html[data-zz-area="vendor"] .sidebar {
  position: sticky;
  top: 0;
  z-index: 60;
  width: auto;
  height: 100vh;
  overflow-y: auto;
  padding: 24px 18px;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, var(--zz-navy-950), #071d37);
  color: #fff;
}

html[data-zz-area="admin"] .sidebar .brand,
html[data-zz-area="vendor"] .sidebar .brand {
  min-height: 54px;
  margin: 0 4px 18px;
  color: #fff;
  font-size: 17px;
}

html[data-zz-area="admin"] .sidebar .logo,
html[data-zz-area="vendor"] .sidebar .logo {
  width: 48px;
  height: 42px;
  border-radius: 9px;
  background: transparent url('../brand/zimbazon-logo-white-v1.png') center / contain no-repeat;
  box-shadow: none;
}

html[data-zz-area="admin"] .sideMeta,
html[data-zz-area="vendor"] .sideMeta { margin: 0 4px 20px; color: #aebed1; font-size: 13px; line-height: 1.55; }

html[data-zz-area="admin"] .nav,
html[data-zz-area="vendor"] .nav { gap: 4px; margin-top: 0; }
html[data-zz-area="admin"] .nav a,
html[data-zz-area="vendor"] .nav a {
  min-height: 47px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #c9d5e3;
  font-size: 14px;
  font-weight: 500;
}
html[data-zz-area="admin"] .nav a::before,
html[data-zz-area="vendor"] .nav a::before {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 7px;
  background: rgba(255,255,255,.08);
  color: #c9d5e3;
  font-size: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;
}

/* Small, dependency-free line icons. */
html[data-zz-area="admin"] .nav a::before,
html[data-zz-area="vendor"] .nav a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c9d5e3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E"); }
html[data-zz-area="admin"] .nav a[href$="products"]::before,
html[data-zz-area="vendor"] .nav a[href$="products"]::before,
html[data-zz-area="admin"] .nav a[href$="orders"]::before,
html[data-zz-area="vendor"] .nav a[href$="orders"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c9d5e3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5M12 22V12'/%3E%3C/svg%3E"); }
html[data-zz-area="admin"] .nav a[href$="users"]::before,
html[data-zz-area="admin"] .nav a[href$="vendors"]::before,
html[data-zz-area="vendor"] .nav a[href$="profile"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c9d5e3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
html[data-zz-area="admin"] .nav a[href$="payments"]::before,
html[data-zz-area="vendor"] .nav a[href$="payouts"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c9d5e3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); }
html[data-zz-area="admin"] .nav a[href$="config"]::before,
html[data-zz-area="admin"] .nav a[href$="audit"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c9d5e3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06-2.83 2.83-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21h-4v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06-2.83-2.83.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3v-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06L7.04 4.3l.06.06A1.65 1.65 0 0 0 8.92 4a1.65 1.65 0 0 0 1-1.51V2h4v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06 2.83 2.83-.06.06A1.65 1.65 0 0 0 19.4 9c.12.61.66 1.05 1.28 1.05H21v4h-.09c-.62 0-1.16.44-1.51 1z'/%3E%3C/svg%3E"); }

html[data-zz-area="admin"] .nav a span,
html[data-zz-area="vendor"] .nav a span { color: #8296ad; font-size: 11px; }
html[data-zz-area="admin"] .nav a:hover,
html[data-zz-area="vendor"] .nav a:hover { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.07); color: #fff; }
html[data-zz-area="admin"] .nav a.active,
html[data-zz-area="vendor"] .nav a.active {
  border-color: rgba(248,181,27,.4);
  background: linear-gradient(90deg, rgba(248,181,27,.2), rgba(248,181,27,.08));
  color: var(--zz-gold-400);
  box-shadow: inset 3px 0 var(--zz-gold-500);
}

html[data-zz-area="admin"] .main,
html[data-zz-area="vendor"] .main { min-width: 0; padding: 24px 28px 44px; }
html[data-zz-area="admin"] .topbar,
html[data-zz-area="vendor"] .topbar {
  top: 14px;
  min-height: 66px;
  margin-bottom: 26px;
  padding: 9px 12px 9px 18px;
  border: 1px solid var(--zz-line);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--zz-shadow-sm);
}
html[data-zz-area="admin"] .topbar .search,
html[data-zz-area="vendor"] .topbar .search { min-width: min(430px, 46vw); padding: 0; border: 0; border-radius: 0; }
html[data-zz-area="admin"] .topbar .search input,
html[data-zz-area="vendor"] .topbar .search input { min-height: 46px; border: 1px solid var(--zz-line); background: #f8fafc; }
html[data-zz-area="admin"] .pageHead,
html[data-zz-area="vendor"] .pageHead { margin: 0 0 20px; }
html[data-zz-area="admin"] .pageHead h1,
html[data-zz-area="vendor"] .pageHead h1 { color: var(--zz-navy-950); font-size: 31px; line-height: 1.15; letter-spacing: -.025em; }
html[data-zz-area="admin"] .pageHead p,
html[data-zz-area="vendor"] .pageHead p { margin-top: 8px; font-size: 14px; }

html[data-zz-area="admin"] .grid,
html[data-zz-area="vendor"] .grid { gap: 18px; margin-top: 0; }
html[data-zz-area="admin"] .card,
html[data-zz-area="vendor"] .card { border-radius: 15px; box-shadow: 0 8px 24px rgba(6,22,45,.055); }
html[data-zz-area="admin"] .kpi,
html[data-zz-area="vendor"] .kpi { min-height: 148px; padding: 21px; border: 0; box-shadow: none; }
html[data-zz-area="admin"] .kpi .label,
html[data-zz-area="vendor"] .kpi .label { color: var(--zz-muted); font-size: 13px; letter-spacing: .02em; text-transform: uppercase; }
html[data-zz-area="admin"] .kpi .value,
html[data-zz-area="vendor"] .kpi .value { color: var(--zz-navy-950); font-size: 32px; line-height: 1.1; }
html[data-zz-area="admin"] .kpi .sub,
html[data-zz-area="vendor"] .kpi .sub { font-size: 13px; }

.zz-portal-menu {
  display: none;
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border: 1px solid var(--zz-line);
  border-radius: 10px;
  background: #fff;
  color: var(--zz-navy-950);
  align-items: center;
  justify-content: center;
}
.zz-portal-menu svg { width: 22px; height: 22px; }
.zz-sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 54; background: rgba(3,16,34,.62); backdrop-filter: blur(3px); }

/* Courier/client panels */
html[data-zz-area="courier"] .app,
html[data-zz-area="client"] .wrap { width: min(100%, var(--zz-content)); margin-inline: auto; }
html[data-zz-area="courier"] .app { grid-template-columns: 260px minmax(0, 1fr); }
html[data-zz-area="courier"] .app > aside {
  border: 0;
  border-right: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, var(--zz-navy-950), #071d37);
  color: #fff;
}
html[data-zz-area="courier"] .app > aside .brand { color: #fff; font-weight: 600; }
html[data-zz-area="courier"] .app > aside .nav button,
html[data-zz-area="courier"] .app > aside .logout { min-height: 45px; color: #c9d5e3; font-weight: 500; }
html[data-zz-area="courier"] .app > aside .nav button.active { background: rgba(248,181,27,.16); color: var(--zz-gold-400); }
html[data-zz-area="courier"] main { min-width: 0; padding: 26px 32px 48px; }
html[data-zz-area="courier"] .card { min-width: 0; border-color: var(--zz-line); box-shadow: none; }
html[data-zz-area="courier"] .card .body { overflow-x: auto; }
html[data-zz-area="courier"] .stat b { font-size: 28px; font-weight: 600; }
html[data-zz-area="client"] .hero,
html[data-zz-area="client"] .card { border-color: var(--zz-line); border-radius: 14px; box-shadow: none; }
html[data-zz-area="client"] .hero h1 { font-size: 32px; font-weight: 600; }
html[data-zz-area="client"] .top { min-width: 0; }

/* Portal and utility authentication cards */
html[data-zz-area="admin"] .loginWrap,
html[data-zz-area="vendor"] .loginWrap,
html[data-zz-area="courier"] body:has(> main.card),
html[data-zz-page="forgot-password"] body {
  min-height: 100vh;
  background: radial-gradient(circle at 20% 20%, rgba(22,119,255,.25), transparent 30%), var(--zz-navy-950);
}
html[data-zz-area="admin"] .loginCard,
html[data-zz-area="vendor"] .loginCard,
html[data-zz-area="courier"] body > main.card,
html[data-zz-page="forgot-password"] body > main.card { border-radius: 22px; box-shadow: var(--zz-shadow-lg); }
html[data-zz-area="admin"] .loginHero .logo,
html[data-zz-area="vendor"] .loginHero .logo {
  width: 54px;
  height: 46px;
  border-radius: 9px;
  background: transparent url('../brand/zimbazon-logo-white-v1.png') center / contain no-repeat;
  box-shadow: none;
}

/* Premium correction pass: restrained type, spacing-led hierarchy, quiet surfaces. */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 { font-weight: 600; }
html body strong,
html body b { font-weight: 600; }

/* Older templates contain inline weight declarations; normalize only those extremes. */
[style*="font-weight:950"],
[style*="font-weight: 950"],
[style*="font-weight:900"],
[style*="font-weight: 900"],
[style*="font-weight:850"],
[style*="font-weight: 850"],
[style*="font-weight:800"],
[style*="font-weight: 800"] { font-weight: 600 !important; }

html body :is(.title, .name, .brand, .brandCopy, .sectionHead a, .linkBtn, .railTitle,
  .suggestion, .accountMenu a, .accountMenu button, .quickNav a, .quickNav button,
  .productBadge, .stock, .ratingLine, .beta, .vendorChip span, .checkline, .warnText,
  .msg, .toast, .emptyTitle, .crumbs, .liName, .payPill, .payOption, .courierTitle,
  .flowStep, .status, .qtyCtl button, .qtyCtl input) { font-weight: 600; }
html body :is(.sub, .muted, .meta, .meta2, .mini, .hint, .pageNote, .productVendor,
  .liMeta, .courierMeta, .method span, .sumLine, .line) { font-weight: 400; }
html body :is(.price, .sumTotal, .total, .kpi .value, .kpiBox .value) { font-weight: 700; }

html[data-zz-page="home"] #products,
html[data-zz-page="home"] #featured,
html[data-zz-page="home"] .categoryBand {
  padding-inline: 0 !important;
  border: 0;
  background: transparent;
  box-shadow: none;
}
html[data-zz-page="home"] #products,
html[data-zz-page="home"] #featured { padding-block: 0 !important; }
html[data-zz-page="home"] .section { margin-top: 30px; }
html[data-zz-page="home"] .productCard { border-radius: 12px; border-color: #edf0f4; }
html[data-zz-page="home"] .productImage { min-height: 188px; background: var(--zz-surface-subtle); }
html[data-zz-page="home"] .productVendor { color: var(--zz-muted); }
html[data-zz-page="home"] .ratingLine[title="Vendor rating"] { display: none; }
html[data-zz-page="home"] .price { font-size: 19px; font-weight: 700; }
html[data-zz-page="home"] .aiPanel { padding: 17px; background: var(--zz-surface-subtle); box-shadow: none; }
html[data-zz-page="home"] .vendorPanel { padding: 18px; box-shadow: none; }
html[data-zz-page="home"] .aiTitle h2,
html[data-zz-page="home"] .vendorTitle h2 { font-size: 17px; font-weight: 600; }
html[data-zz-page="home"] .aiTitle h2 { color: var(--zz-navy-950); }
html[data-zz-page="home"] .aiTitle p { color: var(--zz-muted); }
html[data-zz-page="home"] .aiMsg.bot { border-color: var(--zz-line); background: #fff; color: #475467; }
html[data-zz-page="home"] .aiAsk.input-group { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: stretch; gap: 8px; flex-wrap: nowrap; }
html[data-zz-page="home"] .aiAsk.input-group > .form-control { width: 100%; min-width: 0; flex: none; color: var(--zz-ink); background: #fff; }
html[data-zz-page="home"] .aiAsk.input-group > button { width: 44px; min-height: 46px; height: auto; border-radius: 10px; background: var(--zz-blue-600); color: #fff; }
html[data-zz-page="home"] .homeTrustBar { box-shadow: none; }

html[data-zz-page="product"] .trustStrip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--zz-ink);
}
html[data-zz-page="product"] .trustItem {
  border-color: var(--zz-line);
  border-radius: 10px;
  background: var(--zz-surface-subtle);
  color: #344054;
  font-weight: 500;
}
html[data-zz-page="product"] .infoBox span,
html[data-zz-page="product"] .review span { font-weight: 400; }

html[data-zz-area="marketplace"] .checkoutHero {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding-inline: 0;
}
html[data-zz-area="marketplace"] .checkoutHero h1,
html[data-zz-area="marketplace"] .pageTitle { font-size: clamp(30px, 3vw, 34px); font-weight: 600; }
html[data-zz-area="marketplace"] .safeItem { border-color: var(--zz-line); background: var(--zz-surface-subtle); }
html[data-zz-page="cart"] .safeStrip,
html[data-zz-page="checkout"] .secureRow { border: 0; background: transparent; color: var(--zz-ink); }
html[data-zz-page="cart"] .safeItem,
html[data-zz-page="checkout"] .secureItem { border-color: var(--zz-line); background: #fff; color: var(--zz-muted); }
html[data-zz-area="marketplace"] footer.zz-site-footer { margin-top: 48px; border-top: 1px solid rgba(255,255,255,.1); background: var(--zz-navy-950); color: #c8d3df; }
html[data-zz-area="marketplace"] .zz-footer-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.6fr) repeat(4, minmax(130px, 1fr));
  gap: 36px;
  width: min(100%, var(--zz-content));
  margin-inline: auto;
  padding: 44px 32px 34px;
}
html[data-zz-area="marketplace"] .zz-footer-brand { max-width: 390px; }
html[data-zz-area="marketplace"] .zz-footer-brand strong { display: block; margin-bottom: 10px; color: #fff; font-size: 20px; }
html[data-zz-area="marketplace"] .zz-footer-brand p { margin: 0; color: #9eb0c3; line-height: 1.7; }
html[data-zz-area="marketplace"] .zz-footer-column h2 { margin: 0 0 13px; color: #fff; font-size: 14px; font-weight: 600; }
html[data-zz-area="marketplace"] .zz-footer-column a { display: block; width: fit-content; margin: 9px 0; color: #b9c8d7; font-size: 13px; text-decoration: none; }
html[data-zz-area="marketplace"] .zz-footer-column a:hover { color: var(--zz-gold-400); }
html[data-zz-area="marketplace"] .zz-footer-bottom { width: min(100%, var(--zz-content)); margin-inline: auto; padding: 16px 32px 22px; border-top: 1px solid rgba(255,255,255,.09); color: #8fa3b7; font-size: 12px; }

html[data-zz-page="cart"] .empty {
  display: grid;
  justify-items: center;
  min-height: 290px;
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--zz-line-strong);
  border-radius: 14px;
  background: var(--zz-surface-subtle);
}
html[data-zz-page="cart"] .emptyIcon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: #edf4ff;
  color: var(--zz-blue-600);
  font-size: 26px;
}
html[data-zz-page="cart"] .emptyTitle { margin-bottom: 5px; color: var(--zz-ink); font-size: 19px; }
html[data-zz-page="cart"] .empty p { max-width: 440px; margin: 0 0 20px; color: var(--zz-muted); }

html[data-zz-page="login"] body > .shell { width: min(1260px, calc(100% - 64px)); grid-template-columns: minmax(360px, 1fr) minmax(480px, .82fr); }
html[data-zz-page="register"] body > .shell { width: min(1440px, calc(100% - 64px)); grid-template-columns: minmax(350px, .68fr) minmax(680px, 1.2fr); }
html[data-zz-page="register"] .card { width: 100%; max-width: 760px; justify-self: end; }
html[data-zz-page="login"] .card { width: 100%; max-width: 560px; justify-self: end; }
html[data-zz-page="login"] .hero h1,
html[data-zz-page="register"] .hero h1 { font-weight: 600; }

html[data-zz-area="admin"] .main,
html[data-zz-area="vendor"] .main { padding: 26px 32px 48px; }
html[data-zz-area="admin"] .topbar,
html[data-zz-area="vendor"] .topbar { box-shadow: none; }
html[data-zz-area="admin"] .pageHead h1,
html[data-zz-area="vendor"] .pageHead h1 { font-size: 32px; font-weight: 600; }
html[data-zz-area="admin"] .card,
html[data-zz-area="vendor"] .card { border-color: var(--zz-line); box-shadow: none; }
html[data-zz-area="admin"] .kpi,
html[data-zz-area="vendor"] .kpi,
html[data-zz-area="admin"] .kpiBox,
html[data-zz-area="vendor"] .kpiBox { min-height: 132px; border: 1px solid var(--zz-line); background: #fff; box-shadow: none; }
html[data-zz-area="admin"] .kpi .label,
html[data-zz-area="vendor"] .kpi .label,
html[data-zz-area="admin"] .kpiBox .label,
html[data-zz-area="vendor"] .kpiBox .label { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; }
html[data-zz-area="admin"] .kpi .value,
html[data-zz-area="vendor"] .kpi .value,
html[data-zz-area="admin"] .kpiBox .value,
html[data-zz-area="vendor"] .kpiBox .value { font-size: 28px; font-weight: 600; }
html[data-zz-area="admin"] .nav a,
html[data-zz-area="vendor"] .nav a { font-weight: 500; }
html[data-zz-area="admin"] :where(.modal, .zzAlert),
html[data-zz-area="vendor"] :where(.modal, .zzAlert),
.payModal { width: min(680px, calc(100vw - 32px)); border-radius: 16px; box-shadow: 0 24px 60px rgba(4,16,31,.2); }
.payModalBackdrop { background: rgba(4,16,31,.42); backdrop-filter: blur(3px); }

/* Responsive */
@media (max-width: 1100px) {
  html[data-zz-area="marketplace"] .zz-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-zz-area="marketplace"] .zz-footer-brand { grid-column: 1 / -1; max-width: 620px; }
  html[data-zz-page="home"] .zz-hero-module > .row { grid-template-columns: minmax(0, 1.75fr) minmax(280px, .8fr); }
  html[data-zz-page="home"] .hero-main-pane { padding: 46px 34px 38px; }
  html[data-zz-page="home"] .hero-copy { max-width: 62%; }
  html[data-zz-page="login"] body > .shell,
  html[data-zz-page="register"] body > .shell { gap: 34px; grid-template-columns: minmax(0, 1fr) minmax(400px, .9fr); }
  html[data-zz-page="home"] .promoGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html[data-zz-page="home"] .homeTrustBar { grid-template-columns: repeat(2, minmax(0,1fr)); }
  html[data-zz-page="home"] .homeTrustItem { border-bottom: 1px solid var(--zz-line); }
}

@media (max-width: 980px) {
  html[data-zz-area="marketplace"] .utilityBar { display: none !important; }
  html[data-zz-area="marketplace"] .headerMain,
  html[data-zz-area="marketplace"] .toprow { grid-template-columns: 1fr; gap: 10px; }
  html[data-zz-area="marketplace"] .headerActions,
  html[data-zz-area="marketplace"] .rightActions { justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
  html[data-zz-page="home"] .zz-hero-module > .row { grid-template-columns: 1fr; }
  html[data-zz-page="home"] .hero-main-pane { min-height: 410px; }
  html[data-zz-page="home"] .promo-pane { min-height: 270px; }
  html[data-zz-page="home"] .promo-slant { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
  html[data-zz-page="product"] .prodWrap,
  html[data-zz-page="cart"] .grid,
  html[data-zz-page="checkout"] .grid { grid-template-columns: minmax(0, 1fr); }
  html[data-zz-page="product"] #buyCard,
  html[data-zz-page="cart"] .grid > .card:last-child,
  html[data-zz-page="checkout"] .grid > .card:last-child { position: static; }
  html[data-zz-page="login"] body > .shell,
  html[data-zz-page="register"] body > .shell { grid-template-columns: 1fr; width: min(680px, calc(100% - 32px)); padding: 34px 0; }
  html[data-zz-page="login"] .hero,
  html[data-zz-page="register"] .hero { display: block; }

  html[data-zz-area="admin"] body > .shell,
  html[data-zz-area="vendor"] body > .shell { grid-template-columns: 1fr; }
  html[data-zz-area="admin"] .sidebar,
  html[data-zz-area="vendor"] .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 56;
    width: min(300px, 86vw);
    transform: translateX(-102%);
    transition: transform .22s ease;
    box-shadow: 20px 0 50px rgba(3,16,34,.28);
  }
  html[data-zz-area="admin"].zz-sidebar-open .sidebar,
  html[data-zz-area="vendor"].zz-sidebar-open .sidebar { transform: translateX(0); }
  html.zz-sidebar-open .zz-sidebar-backdrop { display: block; }
  .zz-portal-menu { display: inline-flex; flex: 0 0 auto; }
  html[data-zz-area="admin"] .main,
  html[data-zz-area="vendor"] .main { padding: 18px 18px 38px; }
  html[data-zz-area="admin"] .topbar,
  html[data-zz-area="vendor"] .topbar { top: 8px; }
  html[data-zz-area="admin"] .topbar .search,
  html[data-zz-area="vendor"] .topbar .search { min-width: 0; flex: 1; }
  html[data-zz-area="courier"] .app { grid-template-columns: minmax(0, 1fr); }
  html[data-zz-area="courier"] .app > aside {
    position: sticky;
    top: 0;
    z-index: 60;
    height: auto;
    padding: 11px 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.09);
  }
  html[data-zz-area="courier"] .app > aside .brand span { display: none; }
  html[data-zz-area="courier"] .app > aside .nav { display: flex; min-width: 0; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  html[data-zz-area="courier"] .app > aside .nav::-webkit-scrollbar { display: none; }
  html[data-zz-area="courier"] .app > aside .nav button { flex: 0 0 auto; white-space: nowrap; }
  html[data-zz-area="courier"] .app > aside .logout { margin: 0; white-space: nowrap; }
}

@media (max-width: 720px) {
  body { font-size: 15px; }
  html[data-zz-area="marketplace"] .siteHeader,
  html[data-zz-area="marketplace"] .headerMain,
  html[data-zz-area="marketplace"] .toprow,
  html[data-zz-area="marketplace"] .searchBox,
  html[data-zz-area="marketplace"] .searchBar,
  html[data-zz-page="home"] main.shell { width: 100%; max-width: 100%; min-width: 0; }
  .cardHead, .modalHead, .modalFoot, .cardBody, .modalBody, .pad { padding: 16px; }
  html[data-zz-area="marketplace"] .headerMain,
  html[data-zz-area="marketplace"] .toprow { padding-inline: 14px; }
  html[data-zz-area="marketplace"] .searchBox,
  html[data-zz-area="marketplace"] .searchBar { grid-template-columns: 1fr 58px; display: grid; }
  html[data-zz-area="marketplace"] .searchBox select,
  html[data-zz-area="marketplace"] .searchBar select { display: none; }
  html[data-zz-area="marketplace"] .searchBox input,
  html[data-zz-area="marketplace"] .searchBar input { min-width: 0; width: 100%; }
  html[data-zz-area="marketplace"] .headerActions .btn,
  html[data-zz-area="marketplace"] .rightActions .btn { min-height: 42px; padding: 9px 12px; white-space: nowrap; }
  html[data-zz-page="home"] main { padding-top: 14px; }
  html[data-zz-page="home"] main.shell { padding-inline: 12px; }
  html[data-zz-page="home"] .zz-hero-module { min-height: 0; border-radius: 14px; }
  html[data-zz-page="home"] .hero-main-pane { min-height: 430px; padding: 30px 24px 180px; }
  html[data-zz-page="home"] .hero-main-pane::after {
    top: auto;
    bottom: 0;
    width: 100%;
    height: 57%;
    opacity: .7;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%);
    mask-image: linear-gradient(180deg, transparent, #000 30%);
  }
  html[data-zz-page="home"] .hero-copy { max-width: none; }
  html[data-zz-page="home"] .hero-copy h1 { font-size: clamp(35px, 11vw, 46px); }
  html[data-zz-page="home"] .hero-copy p { font-size: 15px; }
  html[data-zz-page="home"] .hero-pill-row { display: none; }
  html[data-zz-page="home"] .promo-pane { min-height: 250px; padding: 30px 24px; }
  html[data-zz-page="home"] .welcomeOverlay { display: grid; align-items: center; padding: 8px; }
  html[data-zz-page="home"] .welcomeOverlay.show { display: grid; }
  html[data-zz-page="home"] .welcomeCard { position: relative; inset: auto; display: block; width: min(100%, 560px) !important; height: auto; min-height: 0; max-width: 560px !important; max-height: calc(100dvh - 16px); margin: 0 !important; border-radius: 21px; overflow-y: auto; }
  html[data-zz-page="home"] .welcomeArt { min-height: 238px; padding: 22px 22px 19px; }
  html[data-zz-page="home"] .welcomeBrand img { width: 126px; height: 74px; }
  html[data-zz-page="home"] .welcomeArtCopy h2 { font-size: 29px; }
  html[data-zz-page="home"] .welcomeBody { width: 100%; padding: 34px 22px 24px; overflow: visible; }
  html[data-zz-page="home"] .welcomeBody > :not(.welcomeClose) { width: 100%; max-width: 100%; }
  html[data-zz-page="home"] .welcomeBenefit { grid-template-columns: 43px minmax(0, 1fr); align-items: center; }
  html[data-zz-page="home"] .welcomeBody h3 { font-size: 29px; }
  html[data-zz-page="home"] .productGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  html[data-zz-page="home"] .promoGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-zz-page="home"] .productInfo { padding: 12px; }
  html[data-zz-page="home"] .productName { font-size: 14px; }
  html[data-zz-page="home"] .productRail { grid-auto-columns: minmax(170px, 72vw); }
  html[data-zz-page="home"] .sectionHead h2 { font-size: 23px; }
  html[data-zz-area="marketplace"] body > main.wrap,
  html[data-zz-area="client"] main.wrap { padding: 22px 14px 42px; }
  html[data-zz-area="marketplace"] .checkoutHero { align-items: flex-start; padding: 20px; }
  html[data-zz-area="marketplace"] .zz-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; padding: 36px 16px 28px; }
  html[data-zz-area="marketplace"] .zz-footer-brand { grid-column: 1 / -1; }
  html[data-zz-area="marketplace"] .zz-footer-bottom { padding: 15px 16px 20px; }
  html[data-zz-area="marketplace"] .safeStrip { grid-template-columns: 1fr 1fr; }
  html[data-zz-page="returns"] .grid,
  html[data-zz-page="returns"] .item { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-zz-page="returns"] .wrap,
  html[data-zz-page="returns"] .panel { min-width: 0; width: 100%; }
  html[data-zz-page="cart"] .grid,
  html[data-zz-page="checkout"] .grid,
  html[data-zz-page="product"] .prodWrap { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  html[data-zz-page="cart"] .grid > *,
  html[data-zz-page="checkout"] .grid > *,
  html[data-zz-page="product"] .prodWrap > * { min-width: 0; width: 100%; }
  html[data-zz-page="product"] .gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html[data-zz-page="product"] .thumbs { order: 2; display: flex; flex-direction: row; overflow-x: auto; }
  html[data-zz-page="product"] .heroImg { min-width: 0; min-height: 340px; width: 100%; }
  html[data-zz-page="product"] .heroImg img { width: 100%; height: 100%; object-fit: contain; }
  html[data-zz-page="cart"] .sumLine { align-items: flex-start; flex-wrap: wrap; }
  html[data-zz-page="cart"] .sumLine strong { max-width: 62%; text-align: right; white-space: normal; }
  html[data-zz-page="login"] body > .shell,
  html[data-zz-page="register"] body > .shell { width: min(100% - 24px, 620px); gap: 18px; padding: 18px 0 30px; }
  html[data-zz-page="login"] .hero h1,
  html[data-zz-page="register"] .hero h1 { font-size: 38px; }
  html[data-zz-page="login"] .hero .pills,
  html[data-zz-page="register"] .hero .pills { display: none; }
  html[data-zz-page="login"] .head,
  html[data-zz-page="register"] .head,
  html[data-zz-page="login"] form,
  html[data-zz-page="register"] form { padding-inline: 20px; }
  html[data-zz-area="admin"] .main,
  html[data-zz-area="vendor"] .main { padding-inline: 12px; }
  html[data-zz-area="courier"] main { padding: 18px 12px 38px; }
  html[data-zz-area="courier"] .top { align-items: flex-start; flex-wrap: wrap; }
  html[data-zz-area="courier"] .top > .row { width: 100%; }
  html[data-zz-area="courier"] .pill { max-width: 100%; overflow-wrap: anywhere; }
  html[data-zz-area="client"] .wrap { width: 100%; padding-inline: 14px; }
  html[data-zz-area="client"] .top > div:last-child { width: 100%; overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 3px; }
  html[data-zz-area="client"] .top > div:last-child > * { flex: 0 0 auto; }
  html[data-zz-area="client"] .grid > [style*="grid-column"] { grid-column: 1 / -1 !important; }
  html[data-zz-area="admin"] .topbar,
  html[data-zz-area="vendor"] .topbar { flex-wrap: wrap; margin-bottom: 20px; }
  html[data-zz-area="admin"] .topbar .search,
  html[data-zz-area="vendor"] .topbar .search { flex-basis: calc(100% - 58px); }
  html[data-zz-area="admin"] .topbar > div:last-child,
  html[data-zz-area="vendor"] .topbar > .actions { width: 100%; }
  html[data-zz-area="admin"] .grid > [style*="grid-column"],
  html[data-zz-area="vendor"] .grid > [style*="grid-column"] { grid-column: 1 / -1 !important; }
  html[data-zz-area="admin"] .pageHead h1,
  html[data-zz-area="vendor"] .pageHead h1 { font-size: 27px; }
  table { font-size: 14px; }
  th, td { min-width: 120px; padding: 12px 13px; }
}

@media (max-width: 520px) {
  html[data-zz-page="home"] .productGrid { grid-template-columns: 1fr; }
  html[data-zz-page="home"] .productImage { aspect-ratio: 1.35 / 1; }
  html[data-zz-area="marketplace"] .safeStrip { grid-template-columns: 1fr; }
  html[data-zz-area="marketplace"] .headerActions .desktopText { display: none; }
  html[data-zz-page="home"] .homeTrustBar { grid-template-columns: 1fr; }
  html[data-zz-page="home"] .homeTrustItem { border-right: 0; }
  html[data-zz-area="marketplace"] .zz-footer-grid { grid-template-columns: 1fr; }
  html[data-zz-area="marketplace"] .zz-footer-brand { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Reference-led premium composition: 1600px marketplace canvas */
html[data-zz-page="home"] main.shell { width: min(calc(100% - 32px), 1600px); }
html[data-zz-page="home"] .zz-market-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 3.25fr) minmax(320px, .85fr);
  gap: 14px;
  align-items: stretch;
}
html[data-zz-page="home"] .zz-market-hero-row .zz-hero-module { min-width: 0; margin: 0; }
html[data-zz-page="home"] .zz-market-hero-row .zz-hero-module > .row { grid-template-columns: minmax(0, 1fr); height: 100%; }
html[data-zz-page="home"] .zz-market-hero-row .hero-col { width: 100%; max-width: none; }
html[data-zz-page="home"] .zz-market-hero-row .promo-slant { display: none; }
html[data-zz-page="home"] .zz-market-hero-row .hero-main-pane { min-height: 418px; }
html[data-zz-page="home"] .zz-market-hero-row .hero-copy { max-width: 53%; }

html[data-zz-page="home"] .aiPanel.zz-ai-hero {
  display: flex;
  flex-direction: column;
  min-height: 418px;
  margin: 0;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(248,181,27,.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 95% 10%, rgba(22,119,255,.28), transparent 34%),
    linear-gradient(155deg, #061a35, #031126) !important;
  color: #fff;
  box-shadow: var(--zz-shadow-md);
}
html[data-zz-page="home"] .zz-ai-hero .aiTitle h2 { color: #fff; font-size: 19px; }
html[data-zz-page="home"] .zz-ai-hero .aiTitle h2 i { color: var(--zz-gold-400); }
html[data-zz-page="home"] .zz-ai-hero .aiTitle p { color: #b9c9dc; }
html[data-zz-page="home"] .zz-ai-hero .beta { border-color: rgba(248,181,27,.4); background: rgba(248,181,27,.13); color: var(--zz-gold-300); }
html[data-zz-page="home"] .zz-ai-hero .aiChat { flex: 1; max-height: 168px; margin: 18px 0 13px; overflow-y: auto; }
html[data-zz-page="home"] .zz-ai-hero .aiMsg.bot { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.075); color: #e4edf7; }
html[data-zz-page="home"] .zz-ai-hero .aiMsg.user { background: var(--zz-blue-600); color: #fff; }
html[data-zz-page="home"] .zz-ai-hero .aiAsk.input-group > .form-control { min-height: 49px; border-color: transparent; background: #fff; }
html[data-zz-page="home"] .zz-ai-hero .aiAsk.input-group > button { background: linear-gradient(135deg, #2c7dff, #1459db); }
html[data-zz-page="home"] .zz-ai-prompts { display: grid; gap: 7px; margin-top: 13px; }
html[data-zz-page="home"] .zz-ai-prompts button {
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  padding: 6px 11px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #dce8f5;
  font-size: 12px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-zz-page="home"] .zz-ai-prompts button:hover { border-color: rgba(248,181,27,.4); color: #fff; }

html[data-zz-page="home"] .zz-market-category-row {
  display: grid;
  grid-template-columns: minmax(0, 3.25fr) minmax(320px, .85fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 14px;
}
html[data-zz-page="home"] .zz-market-category-row .categoryBand {
  order: 0 !important;
  min-width: 0;
  margin: 0;
  padding: 16px !important;
  border: 1px solid var(--zz-line);
  border-radius: 16px;
  background: #fff;
}
html[data-zz-page="home"] .zz-market-category-row .sectionHead { margin-bottom: 12px; }
html[data-zz-page="home"] .zz-market-category-row .sectionHead h2 { font-size: 18px; }
html[data-zz-page="home"] .zz-market-category-row .promoGrid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
html[data-zz-page="home"] .zz-market-category-row .promoPanel {
  min-width: 0;
  min-height: 116px;
  padding: 10px 7px;
  border-color: transparent;
  border-radius: 12px;
  background: #fff;
}
html[data-zz-page="home"] .zz-market-category-row .promoPanel:hover { border-color: #dfe7f0; background: var(--zz-surface-subtle); }
html[data-zz-page="home"] .zz-market-category-row .tileImg { width: 54px; height: 50px; margin-bottom: 5px; }
html[data-zz-page="home"] .zz-market-category-row .promoPanel h3 { margin: 0; font-size: 12px; line-height: 1.25; }
html[data-zz-page="home"] .zz-market-category-row .promoPanel small { display: block; margin-top: 3px; color: var(--zz-muted); font-size: 10px; }

html[data-zz-page="home"] .zz-stats-panel {
  padding: 16px;
  border: 1px solid var(--zz-line);
  border-radius: 16px;
  background: #fff;
}
html[data-zz-page="home"] .zz-stats-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
html[data-zz-page="home"] .zz-stats-head h2 { margin: 0; color: var(--zz-navy-950); font-size: 17px; }
html[data-zz-page="home"] .zz-stats-head p { margin: 3px 0 0; color: var(--zz-muted); font-size: 11px; }
html[data-zz-page="home"] .zz-stats-head > span { color: var(--zz-muted); font-size: 11px; }
html[data-zz-page="home"] .zz-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-zz-page="home"] .zz-stats-grid > div { display: grid; grid-template-columns: 28px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-width: 0; padding: 9px; border-radius: 11px; background: var(--zz-surface-subtle); }
html[data-zz-page="home"] .zz-stats-grid i { display: block; grid-row: 1 / 3; margin: 0; color: var(--zz-blue-600); font-size: 18px; }
html[data-zz-page="home"] .zz-stats-grid span { display: block; overflow: hidden; color: var(--zz-muted); font-size: 10px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
html[data-zz-page="home"] .zz-stats-grid strong { display: block; margin: 1px 0 0; overflow-wrap: anywhere; color: var(--zz-navy-950); font-size: 15px; line-height: 1.15; }

html[data-zz-page="home"] .content-shell { margin-top: 14px; }
html[data-zz-page="home"] .content-shell #products { margin-top: 0; padding: 17px !important; border: 1px solid var(--zz-line); border-radius: 16px; background: #fff; }
html[data-zz-page="home"] .content-shell #featured { padding: 17px !important; border: 1px solid var(--zz-line); border-radius: 16px; background: #fff; }
html[data-zz-page="home"] .content-side { display: grid; gap: 12px; }
html[data-zz-page="home"] .zz-sell-banner {
  position: relative;
  min-height: 174px;
  padding: 22px;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(145deg, #061c3b, #082d58);
  color: #fff;
}
html[data-zz-page="home"] .zz-sell-banner span { color: var(--zz-gold-300); font-size: 13px; }
html[data-zz-page="home"] .zz-sell-banner h2 { position: relative; z-index: 1; max-width: 230px; margin: 7px 0 16px; color: #fff; font-size: 21px; line-height: 1.2; }
html[data-zz-page="home"] .zz-sell-banner .btn { position: relative; z-index: 1; border-color: var(--zz-gold-500); background: var(--zz-gold-500); color: var(--zz-navy-950); }
html[data-zz-page="home"] .zz-sell-art { position: absolute; right: -10px; bottom: -19px; color: rgba(255,255,255,.08); font-size: 112px; transform: rotate(-5deg); }
html[data-zz-page="home"] .zz-why-panel { padding: 20px; border: 1px solid var(--zz-line); border-radius: 16px; background: #fff; }
html[data-zz-page="home"] .zz-why-panel h2 { margin: 0 0 14px; color: var(--zz-navy-950); font-size: 18px; }
html[data-zz-page="home"] .zz-why-panel ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
html[data-zz-page="home"] .zz-why-panel li { display: flex; gap: 9px; align-items: center; color: #344054; font-size: 13px; }
html[data-zz-page="home"] .zz-why-panel li i { color: #16a05d; }
html[data-zz-page="home"] .content-side .vendorPanel { margin: 0; border: 1px solid var(--zz-line); background: #fff; }

html[data-zz-page="home"] .zz-brands-strip {
  margin-top: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(248,181,27,.14);
  border-radius: 16px;
  background: linear-gradient(140deg, #04142b, #071f41);
  color: #fff;
}
html[data-zz-page="home"] .zz-brands-head { display: flex; justify-content: space-between; gap: 14px; align-items: end; margin-bottom: 14px; }
html[data-zz-page="home"] .zz-brands-head h2 { margin: 0; color: #fff; font-size: 19px; }
html[data-zz-page="home"] .zz-brands-head p { margin: 3px 0 0; color: #9fb2c8; font-size: 12px; }
html[data-zz-page="home"] .zz-brands-head a { color: var(--zz-gold-300); font-size: 12px; }
html[data-zz-page="home"] .zz-brand-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
html[data-zz-page="home"] .zz-brand-grid a { display: grid; place-items: center; min-height: 50px; padding: 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: #fff; color: var(--zz-navy-950); font-size: 16px; text-decoration: none; }
html[data-zz-page="home"] .zz-brand-grid a:hover { border-color: var(--zz-gold-400); transform: translateY(-1px); }

/* Premium buyer authentication artwork and joined-card composition */
html[data-zz-page="login"] body,
html[data-zz-page="register"] body { background: #f4f6f9; color: var(--zz-ink); }
html[data-zz-page="login"] body > .shell,
html[data-zz-page="register"] body > .shell {
  width: min(1180px, calc(100% - 40px));
  min-height: 100vh;
  padding: 42px 0;
  grid-template-columns: minmax(330px, .78fr) minmax(470px, 1.22fr);
  gap: 0;
}
html[data-zz-page="login"] .hero,
html[data-zz-page="register"] .hero {
  min-height: 650px;
  border: 0;
  border-radius: 20px 0 0 20px;
  background:
    linear-gradient(180deg, rgba(2,15,35,.02) 40%, rgba(2,15,35,.88) 100%),
    url('../auth/zimbabwe-shoppers-v1.png') center bottom / 100% auto no-repeat,
    linear-gradient(145deg, #03152f, #072a55);
  box-shadow: 0 22px 55px rgba(5,22,44,.18);
}
html[data-zz-page="login"] .hero::before,
html[data-zz-page="register"] .hero::before { inset: 0; background: linear-gradient(180deg, rgba(3,20,44,.1), rgba(3,20,44,.03)); }
html[data-zz-page="login"] .heroIn,
html[data-zz-page="register"] .heroIn { padding: 34px; }
html[data-zz-page="login"] .hero .brand,
html[data-zz-page="register"] .hero .brand { color: #fff; font-size: 19px; }
html[data-zz-page="login"] .hero .logo,
html[data-zz-page="register"] .hero .logo { width: 44px; height: 38px; }
html[data-zz-page="login"] .hero h1,
html[data-zz-page="register"] .hero .h1 { margin: 28px 0 0; color: #fff; font-size: 28px; line-height: 1.15; letter-spacing: -.025em; }
html[data-zz-page="login"] .hero p,
html[data-zz-page="register"] .hero .p { max-width: 340px; color: #c9d7e7; font-size: 13px; line-height: 1.6; }
html[data-zz-page="login"] .hero .pills,
html[data-zz-page="register"] .hero .pills { display: grid; gap: 9px; margin-top: 22px; }
html[data-zz-page="login"] .hero .pill,
html[data-zz-page="register"] .hero .pill { width: fit-content; min-height: 0; padding: 8px 11px; border-color: rgba(255,255,255,.11); background: rgba(255,255,255,.075); color: #edf4fb; font-size: 12px; }
html[data-zz-page="login"] .card,
html[data-zz-page="register"] .card {
  width: 100%;
  max-width: none;
  min-height: 650px;
  justify-self: stretch;
  border: 1px solid #e3e8ef;
  border-left: 0;
  border-radius: 0 20px 20px 0;
  box-shadow: 0 22px 55px rgba(5,22,44,.11);
}
html[data-zz-page="login"] .head,
html[data-zz-page="register"] .cardHead { padding: 28px 32px 18px; border-color: var(--zz-line); }
html[data-zz-page="login"] form,
html[data-zz-page="register"] form { padding: 24px 32px 32px; }
html[data-zz-page="login"] .btn.primary,
html[data-zz-page="register"] .btn.primary { background: linear-gradient(135deg, #ffc329, #f2a90b); color: #07172d; box-shadow: 0 10px 24px rgba(242,169,11,.2); }

html[data-zz-page="cart"] .grid { grid-template-columns: minmax(0, 1.65fr) minmax(330px, .65fr); gap: 18px; }
html[data-zz-page="cart"] .grid > .card { border-radius: 17px; }
html[data-zz-page="cart"] .grid > aside.card { position: sticky; top: 150px; }
html[data-zz-page="cart"] .sumTotal { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--zz-line); font-size: 18px; }
html[data-zz-page="cart"] .zz-summary-checkout { width: 100%; min-height: 50px; margin-top: 18px; background: linear-gradient(135deg, #ffc329, #f2a90b); color: var(--zz-navy-950); }
html[data-zz-page="cart"] .zz-continue-shopping { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 14px; color: #344054; font-size: 13px; text-decoration: none; }
html[data-zz-page="cart"] .zz-continue-shopping:hover { color: var(--zz-blue-600); }

html[data-zz-area="vendor"] .topbar { min-height: 76px; border: 1px solid var(--zz-line); border-radius: 15px; background: rgba(255,255,255,.94); }
html[data-zz-area="vendor"] .zz-vendor-overview { min-height: 320px; }
html[data-zz-area="vendor"] .zz-vendor-overview .pad { height: 100%; }
html[data-zz-area="vendor"] .zz-dashboard-card-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
html[data-zz-area="vendor"] .zz-dashboard-card-head h3 { margin: 0; color: var(--zz-navy-950); font-size: 18px; }
html[data-zz-area="vendor"] .zz-dashboard-card-head p { margin: 4px 0 0; color: var(--zz-muted); font-size: 12px; }
html[data-zz-area="vendor"] .zz-dashboard-card-head > span { padding: 6px 9px; border: 1px solid var(--zz-line); border-radius: 8px; color: var(--zz-muted); font-size: 11px; }
html[data-zz-area="vendor"] .zz-dashboard-card-head a { color: var(--zz-blue-600); font-size: 12px; text-decoration: none; }
html[data-zz-area="vendor"] .zz-chart-total { display: flex; gap: 8px; align-items: baseline; }
html[data-zz-area="vendor"] .zz-chart-total strong { color: var(--zz-navy-950); font-size: 25px; }
html[data-zz-area="vendor"] .zz-chart-total span { color: var(--zz-muted); font-size: 11px; }
html[data-zz-area="vendor"] .zz-sales-chart svg { display: block; width: 100%; height: 165px; margin-top: 2px; }
html[data-zz-area="vendor"] .zz-chart-labels { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); color: var(--zz-muted); font-size: 10px; text-align: center; }
html[data-zz-area="vendor"] .zz-recent-orders { display: grid; }
html[data-zz-area="vendor"] .zz-order-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; align-items: center; min-height: 48px; border-bottom: 1px solid var(--zz-line); color: var(--zz-ink); text-decoration: none; }
html[data-zz-area="vendor"] .zz-order-row:last-child { border-bottom: 0; }
html[data-zz-area="vendor"] .zz-order-row span { min-width: 0; }
html[data-zz-area="vendor"] .zz-order-row b { display: block; font-size: 12px; }
html[data-zz-area="vendor"] .zz-order-row small { display: block; overflow: hidden; color: var(--zz-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
html[data-zz-area="vendor"] .zz-order-row > strong { color: var(--zz-navy-950); font-size: 12px; }
html[data-zz-area="vendor"] .zz-order-row em { padding: 4px 7px; border-radius: 999px; background: #fff5d9; color: #9a6700; font-size: 9px; font-style: normal; text-transform: capitalize; }
html[data-zz-area="vendor"] .zz-order-row em.ok { background: #e9f9ef; color: #137a42; }
html[data-zz-area="vendor"] .zz-order-row em.bad { background: #ffeded; color: #b42318; }
html[data-zz-area="vendor"] .zz-empty-mini { display: grid; place-items: center; min-height: 160px; padding: 20px; border: 1px dashed var(--zz-line-strong); border-radius: 12px; background: var(--zz-surface-subtle); color: var(--zz-muted); font-size: 13px; text-align: center; }

@media (max-width: 1180px) {
  html[data-zz-page="home"] .zz-market-hero-row,
  html[data-zz-page="home"] .zz-market-category-row { grid-template-columns: minmax(0, 2fr) minmax(300px, .85fr); }
  html[data-zz-page="home"] .zz-market-category-row .promoGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html[data-zz-page="home"] .zz-market-category-row .promoPanel:nth-child(n+9) { display: none; }
}

@media (max-width: 900px) {
  html[data-zz-page="home"] .zz-market-hero-row,
  html[data-zz-page="home"] .zz-market-category-row { grid-template-columns: minmax(0, 1fr); }
  html[data-zz-page="home"] .zz-ai-hero { min-height: 340px; }
  html[data-zz-page="home"] .zz-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html[data-zz-page="home"] .zz-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-zz-page="login"] body > .shell,
  html[data-zz-page="register"] body > .shell { grid-template-columns: minmax(0, 1fr); width: min(680px, calc(100% - 28px)); padding: 24px 0; }
  html[data-zz-page="login"] .hero,
  html[data-zz-page="register"] .hero { min-height: 410px; border-radius: 18px 18px 0 0; background-size: auto 85%, auto, auto; }
  html[data-zz-page="login"] .card,
  html[data-zz-page="register"] .card { min-height: 0; border-left: 1px solid #e3e8ef; border-top: 0; border-radius: 0 0 18px 18px; }
  html[data-zz-page="cart"] .grid { grid-template-columns: minmax(0, 1fr); }
  html[data-zz-page="cart"] .grid > aside.card { position: static; }
}

@media (max-width: 620px) {
  html[data-zz-page="home"] main.shell { width: 100%; }
  html[data-zz-page="home"] .zz-market-hero-row .hero-copy { max-width: none; }
  html[data-zz-page="home"] .hero-action-row .btn:not(.btn-primary) { display: none; }
  html[data-zz-page="home"] .zz-market-category-row .promoGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-zz-page="home"] .zz-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-zz-page="home"] .zz-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-zz-page="home"] .zz-brands-strip { padding: 16px; }
  html[data-zz-page="login"] .hero,
  html[data-zz-page="register"] .hero { min-height: 340px; }
  html[data-zz-page="login"] .heroIn,
  html[data-zz-page="register"] .heroIn { padding: 25px; }
  html[data-zz-page="login"] .hero .pills,
  html[data-zz-page="register"] .hero .pills { display: none; }
  html[data-zz-page="login"] .head,
  html[data-zz-page="register"] .cardHead,
  html[data-zz-page="login"] form,
  html[data-zz-page="register"] form { padding-inline: 22px; }
}

/* ================================================================
   Full application consistency refinement
   One surface, control, auth, table and portal language everywhere.
   ================================================================ */

/* Shared commercial control hierarchy */
.btn.primary,
.btn-primary,
.smallBtn.primary,
button[type="submit"].primary,
html[data-zz-area="admin"] .btn.primary,
html[data-zz-area="vendor"] .btn.primary,
html[data-zz-area="courier"] .btn.primary,
html[data-zz-area="client"] .btn.primary {
  border-color: #efa90d !important;
  background: linear-gradient(135deg, #ffc83d, #f5ad0b) !important;
  color: var(--zz-navy-950) !important;
  box-shadow: 0 9px 22px rgba(239, 169, 13, .16) !important;
}
.btn.primary:hover,
.btn-primary:hover,
.smallBtn.primary:hover,
button[type="submit"].primary:hover {
  border-color: #e39b00 !important;
  background: linear-gradient(135deg, #ffd25d, #f7b615) !important;
  color: var(--zz-navy-950) !important;
  box-shadow: 0 12px 27px rgba(239, 169, 13, .22) !important;
}
.btn.danger,
.btn.bad,
html[data-zz-area="admin"] .btn.danger,
html[data-zz-area="vendor"] .btn.danger,
html[data-zz-area="courier"] .btn.bad { border-color: var(--zz-red-500) !important; background: var(--zz-red-500) !important; color: #fff !important; box-shadow: none !important; }
.btn.good,
html[data-zz-area="courier"] .btn.good { border-color: var(--zz-green-600) !important; background: var(--zz-green-600) !important; color: #fff !important; }
.btn.warn,
html[data-zz-area="courier"] .btn.warn { border-color: var(--zz-gold-500) !important; background: #fff4d7 !important; color: #825600 !important; }

/* Shared card spacing and hierarchy */
.cardHead,
.modalHead,
.modalFoot { padding: 18px 24px; }
.cardBody,
.modalBody,
.pad { padding: 24px; }
.cardHead h2,
.cardHead h3,
.modalHead h2,
.modalHead h3 { margin: 0; color: var(--zz-navy-950); font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.card,
.panel,
.box,
.tableWrap,
.tableCard {
  border-color: var(--zz-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(7, 27, 53, .045);
}

/* Shared forms */
input:not([type="checkbox"]):not([type="radio"]),
select,
.input { min-height: 50px; }
textarea { padding: 13px 14px; }
.formGrid,
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 18px; }
.formGrid label,
.form-grid label,
.field label,
label { font-size: 14px; font-weight: 500; }
.formGrid label,
.form-grid label { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.formGrid label.wide,
.form-grid label.wide { grid-column: 1 / -1; }
.hint,
.help,
.helper,
.formHelp { color: var(--zz-muted); font-size: 13px; font-weight: 400; line-height: 1.55; }
.msg.ok,
.ok.msg { border: 1px solid #b9e8ce; background: #edf9f2; color: #087447; }
.msg.err,
.err.msg { border: 1px solid #f3c3c3; background: #fff1f1; color: #b42318; }

/* Shared data tables */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th {
  height: 50px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--zz-line);
  background: #fafbfc;
  color: #526077;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .005em;
  text-align: left;
}
td {
  min-height: 54px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--zz-line);
  color: #27364a;
  font-size: 14px;
  font-weight: 400;
  vertical-align: middle;
}
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: #fbfcfe; }
tbody tr:last-child td { border-bottom: 0; }
td[colspan] { padding-block: 28px; color: var(--zz-muted); }
.status,
.badge,
.pill { font-weight: 600; letter-spacing: 0; }

/* Shared modals, drawers and popups */
.modalBackdrop,
.payModalBackdrop,
.drawerMask { background: rgba(3, 16, 34, .48); backdrop-filter: blur(4px); }
.modal,
.payModal {
  width: min(680px, calc(100vw - 32px));
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 28px 76px rgba(3,16,34,.24);
}
.modalFoot { gap: 10px; border-top: 1px solid var(--zz-line); background: #fbfcfd; }
.drawer:not(#categoryDrawer) { box-shadow: -24px 0 64px rgba(3,16,34,.19); }
.drawerHead { padding: 20px 24px; }
.drawerBody { padding: 24px; }

/* Inner marketplace headings and dark premium bands */
html[data-zz-area="marketplace"] body > main.wrap,
html[data-zz-area="marketplace"] main.wrap { width: min(100%, var(--zz-content)); padding: 28px 28px 48px; }
html[data-zz-area="marketplace"] .pageTitle,
html[data-zz-area="marketplace"] .checkoutHero h1 { color: var(--zz-navy-950); font-size: clamp(28px, 3vw, 34px); font-weight: 600; letter-spacing: -.03em; }
html[data-zz-page="orders"] .hero,
html[data-zz-page="returns"] .hero,
html[data-zz-page="trust"] .hero {
  border: 1px solid rgba(248,181,27,.2);
  background: linear-gradient(135deg, #061a35, #0a3b4b);
  color: #fff;
  box-shadow: 0 15px 36px rgba(5,25,48,.12);
}
html[data-zz-page="orders"] .hero h1,
html[data-zz-page="returns"] .hero h1,
html[data-zz-page="trust"] .hero h1 { color: #fff; font-weight: 600; }
html[data-zz-page="orders"] .hero p,
html[data-zz-page="returns"] .hero p,
html[data-zz-page="trust"] .hero p { color: #c7d5e4 !important; font-weight: 400 !important; }
html[data-zz-page="orders"] .ordersTabs button { min-height: 50px; padding-inline: 16px; font-size: 14px; font-weight: 500; }
html[data-zz-page="orders"] .ordersTabs button.active { color: var(--zz-navy-900); border-color: var(--zz-gold-500); }
html[data-zz-page="orders"] .orderHead { min-height: 50px; padding-inline: 16px; background: #fafbfc; font-size: 13px; font-weight: 500; }
html[data-zz-page="orders"] .orderItem { min-height: 62px; padding: 16px; }

/* Admin and vendor workspaces */
html[data-zz-area="admin"] .main,
html[data-zz-area="vendor"] .main { max-width: none; padding: 26px 32px 52px; }
html[data-zz-area="admin"] .topbar,
html[data-zz-area="vendor"] .topbar {
  min-height: 76px;
  padding: 12px 14px 12px 18px;
  border: 1px solid var(--zz-line);
  border-radius: 15px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 7px 22px rgba(7,27,53,.035);
}
html[data-zz-area="admin"] .pageHead,
html[data-zz-area="vendor"] .pageHead { margin: 28px 0 20px; }
html[data-zz-area="admin"] .pageHead h1,
html[data-zz-area="vendor"] .pageHead h1,
html[data-zz-area="admin"] .main > h1,
html[data-zz-area="vendor"] .main > h1 { color: var(--zz-navy-950); font-size: clamp(28px, 3vw, 33px); font-weight: 600; letter-spacing: -.035em; }
html[data-zz-area="admin"] .pageHead p,
html[data-zz-area="vendor"] .pageHead p { max-width: 820px; color: var(--zz-muted); font-weight: 400; }
html[data-zz-area="admin"] .card,
html[data-zz-area="vendor"] .card { border-radius: 16px; box-shadow: 0 7px 24px rgba(7,27,53,.04); }
html[data-zz-area="admin"] .card:hover,
html[data-zz-area="vendor"] .card:hover { border-color: #dfe4ea; }
html[data-zz-area="admin"] table,
html[data-zz-area="vendor"] table { overflow: hidden; border-radius: 0 0 16px 16px; }
html[data-zz-area="admin"] .nav a,
html[data-zz-area="vendor"] .nav a { min-height: 47px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; }
html[data-zz-area="admin"] .nav a.active,
html[data-zz-area="vendor"] .nav a.active { border-color: rgba(248,181,27,.55); background: rgba(248,181,27,.13); color: var(--zz-gold-400); box-shadow: inset 3px 0 0 var(--zz-gold-500); }
html[data-zz-area="admin"] .nav a small,
html[data-zz-area="vendor"] .nav a small { color: #91a4ba; font-size: 11px; font-weight: 500; }

/* Consistent centered auth cards for operations roles */
html[data-zz-area="admin"][data-zz-page="login"] body,
html[data-zz-area="vendor"][data-zz-page="login"] body,
html[data-zz-area="vendor"][data-zz-page="register"] body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 20%, rgba(22,119,255,.15), transparent 28%),
    radial-gradient(circle at 84% 82%, rgba(248,181,27,.08), transparent 23%),
    var(--zz-navy-950);
}
html[data-zz-area="admin"] .loginWrap,
html[data-zz-area="vendor"] .loginWrap { width: 100%; min-height: 100vh; padding: 32px; }
html[data-zz-area="admin"] .loginCard,
html[data-zz-area="vendor"] .loginCard {
  display: grid;
  grid-template-columns: minmax(270px, .72fr) minmax(420px, 1.28fr);
  width: min(960px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(2,14,30,.3);
}
html[data-zz-area="admin"] .loginHero,
html[data-zz-area="vendor"] .loginHero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 390px;
  padding: 32px;
  border: 0;
  background:
    radial-gradient(circle at 80% 15%, rgba(22,119,255,.3), transparent 34%),
    linear-gradient(150deg, #06172f, #0a315d);
  color: #fff;
}
html[data-zz-area="admin"] .loginHero .brand,
html[data-zz-area="vendor"] .loginHero .brand { color: #fff; font-size: 19px; }
html[data-zz-area="admin"] .loginHero p,
html[data-zz-area="vendor"] .loginHero p { color: #c6d5e5; font-size: 14px; font-weight: 400; line-height: 1.65; }
html[data-zz-area="admin"] .loginCard > .pad,
html[data-zz-area="vendor"] .loginCard > .pad { align-self: center; padding: 36px; }
html[data-zz-area="admin"] .zz-auth-heading,
html[data-zz-area="vendor"] .zz-auth-heading { margin-bottom: 22px; }
html[data-zz-area="admin"] .zz-auth-heading h1,
html[data-zz-area="vendor"] .zz-auth-heading h1 { margin: 0; color: var(--zz-navy-950); font-size: 29px; font-weight: 600; letter-spacing: -.03em; }
html[data-zz-area="admin"] .zz-auth-heading p,
html[data-zz-area="vendor"] .zz-auth-heading p { margin: 5px 0 0; color: var(--zz-muted); font-size: 14px; font-weight: 400; }
html[data-zz-area="admin"] .loginCard .row2,
html[data-zz-area="vendor"] .loginCard .row2 { gap: 15px; }
html[data-zz-area="admin"] .loginCard .btn.primary,
html[data-zz-area="vendor"] .loginCard .btn.primary { width: auto !important; min-width: 150px; }
html[data-zz-area="vendor"][data-zz-page="register"] .loginCard { width: min(1080px, 100%); }
html[data-zz-area="vendor"][data-zz-page="register"] .loginHero { min-height: 580px; }

/* Forgot password and courier authentication share one polished centered system */
html[data-zz-page="forgot-password"] body,
html[data-zz-area="courier"][data-zz-page="login"] body,
html[data-zz-area="courier"][data-zz-page="register"] body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 18%, rgba(22,119,255,.16), transparent 28%),
    radial-gradient(circle at 82% 80%, rgba(248,181,27,.08), transparent 25%),
    var(--zz-navy-950);
}
html[data-zz-page="forgot-password"] body > main.card,
html[data-zz-area="courier"][data-zz-page="login"] body > main.card {
  width: min(540px, 100%);
  max-width: 540px;
  min-height: 0;
  justify-self: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.76);
  border-top: 4px solid var(--zz-gold-500);
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 28px 72px rgba(2,14,30,.28);
}
html[data-zz-page="forgot-password"] main.card .head { padding: 24px 28px; background: #fbfcfd; }
html[data-zz-page="forgot-password"] main.card .head img { width: 104px; }
html[data-zz-page="forgot-password"] main.card .body { padding: 26px 28px 30px; }
html[data-zz-area="courier"][data-zz-page="login"] body > main.card { padding: 30px; }
html[data-zz-area="courier"][data-zz-page="login"] .brand img { width: 112px; }
html[data-zz-area="courier"][data-zz-page="login"] h1 { margin-top: 18px; font-size: 28px; font-weight: 600; }
html[data-zz-area="courier"][data-zz-page="register"] body { padding: 28px; }
html[data-zz-area="courier"][data-zz-page="register"] body > main.card {
  width: min(1040px, 100%);
  max-width: none;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 78px rgba(2,14,30,.28);
}
html[data-zz-area="courier"][data-zz-page="register"] main.card > .head { padding: 22px 28px; border-color: rgba(255,255,255,.1); background: var(--zz-navy-900); }
html[data-zz-area="courier"][data-zz-page="register"] main.card > .head img { width: 112px; }
html[data-zz-area="courier"][data-zz-page="register"] main.card > .head .btn { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; }
html[data-zz-area="courier"][data-zz-page="register"] main.card > .body { padding: 28px 32px 34px; }

/* Courier workspace */
html[data-zz-area="courier"] .app { grid-template-columns: 268px minmax(0, 1fr); }
html[data-zz-area="courier"] .app > aside {
  padding: 22px 18px;
  border: 0;
  background: linear-gradient(180deg, #071b35, #06182f);
  color: #c9d6e4;
}
html[data-zz-area="courier"] .app > aside .brand { color: #fff; font-size: 17px; }
html[data-zz-area="courier"] .app > aside .nav { gap: 5px; }
html[data-zz-area="courier"] .app > aside .nav button,
html[data-zz-area="courier"] .app > aside .logout { min-height: 46px; padding: 10px 12px; border-radius: 10px; color: #c6d3e1; font-size: 14px; font-weight: 500; }
html[data-zz-area="courier"] .app > aside .nav button.active { background: rgba(248,181,27,.13); color: var(--zz-gold-400); box-shadow: inset 3px 0 0 var(--zz-gold-500); }
html[data-zz-area="courier"] .app > main { padding: 26px 32px 52px; }
html[data-zz-area="courier"] .top {
  min-height: 76px;
  margin-bottom: 22px;
  padding: 14px 16px 14px 20px;
  border: 1px solid var(--zz-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(7,27,53,.035);
}
html[data-zz-area="courier"] .top h1 { color: var(--zz-navy-950); font-size: 30px; font-weight: 600; letter-spacing: -.03em; }
html[data-zz-area="courier"] .top p { color: var(--zz-muted); font-size: 14px; font-weight: 400; }
html[data-zz-area="courier"] .card { border-radius: 16px; box-shadow: 0 7px 24px rgba(7,27,53,.04); }
html[data-zz-area="courier"] .card > .head { min-height: 58px; padding: 15px 20px; background: #fff; }
html[data-zz-area="courier"] .card > .body { padding: 20px; }
html[data-zz-area="courier"] .card > .body:empty::before { content: "No activity to show yet."; display: grid; place-items: center; min-height: 94px; color: var(--zz-muted); font-size: 13px; text-align: center; }
html[data-zz-area="courier"] #stats:empty::before { content: "Marketplace statistics will appear as delivery activity is recorded."; grid-column: 1 / -1; display: grid; place-items: center; min-height: 108px; padding: 20px; border: 1px dashed var(--zz-line-strong); border-radius: 16px; background: #fbfcfd; color: var(--zz-muted); font-size: 13px; text-align: center; }
html[data-zz-area="courier"] .stat { min-height: 126px; padding: 21px; }
html[data-zz-area="courier"] .stat b { color: var(--zz-navy-950); font-size: 28px; font-weight: 600; }

/* Buyer workspace */
html[data-zz-area="client"] header { border-color: rgba(255,255,255,.09); background: var(--zz-navy-950); }
html[data-zz-area="client"] header .brand { color: #fff; }
html[data-zz-area="client"] header .brand img { width: 64px; border-radius: 10px; }
html[data-zz-area="client"] .wrap { width: min(1280px, calc(100% - 32px)); max-width: none; padding: 22px 0; }
html[data-zz-area="client"] main.wrap { padding-bottom: 50px; }
html[data-zz-area="client"] .hero {
  min-height: 190px;
  padding: 30px 32px;
  border: 1px solid rgba(248,181,27,.2);
  background: linear-gradient(135deg, #061a35, #0a3b4b);
  color: #fff;
  box-shadow: 0 15px 36px rgba(5,25,48,.12);
}
html[data-zz-area="client"] .hero h1 { color: #fff; font-size: 32px; font-weight: 600; letter-spacing: -.03em; }
html[data-zz-area="client"] .hero p { color: #c8d6e5; font-weight: 400; }
html[data-zz-area="client"] .hero > .btn { align-self: flex-start; }
html[data-zz-area="client"] .grid { gap: 16px; margin-top: 16px; }
html[data-zz-area="client"] .card { padding: 22px; border-radius: 16px; box-shadow: 0 7px 24px rgba(7,27,53,.04); }
html[data-zz-area="client"] .card h2 { color: var(--zz-navy-950); font-size: 19px; font-weight: 600; }
html[data-zz-area="client"] .card .muted { min-height: 48px; font-weight: 400; }

@media (max-width: 980px) {
  html[data-zz-area="admin"] .loginCard,
  html[data-zz-area="vendor"] .loginCard { grid-template-columns: minmax(0,1fr); width: min(680px,100%); }
  html[data-zz-area="admin"] .loginHero,
  html[data-zz-area="vendor"] .loginHero,
  html[data-zz-area="vendor"][data-zz-page="register"] .loginHero { min-height: 230px; }
  html[data-zz-area="courier"] .app { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 720px) {
  .cardHead,
  .modalHead,
  .modalFoot,
  .cardBody,
  .modalBody,
  .pad { padding: 16px; }
  html[data-zz-area="marketplace"] body > main.wrap,
  html[data-zz-area="marketplace"] main.wrap { padding: 22px 15px 40px; }
  html[data-zz-area="admin"] .loginWrap,
  html[data-zz-area="vendor"] .loginWrap { padding: 15px; }
  html[data-zz-area="admin"] .loginHero,
  html[data-zz-area="vendor"] .loginHero { padding: 24px; }
  html[data-zz-area="admin"] .loginCard > .pad,
  html[data-zz-area="vendor"] .loginCard > .pad { padding: 24px; }
  html[data-zz-area="courier"][data-zz-page="register"] body { padding: 15px; }
  html[data-zz-area="courier"][data-zz-page="register"] main.card > .body { padding: 22px 18px 26px; }
  html[data-zz-area="courier"] .app > main { padding: 18px 15px 40px; }
  html[data-zz-area="courier"] .top { align-items: flex-start; }
  html[data-zz-area="client"] .wrap { width: min(100% - 30px, 680px); }
  html[data-zz-area="client"] .hero { min-height: 0; padding: 24px; }
  html[data-zz-area="client"] .hero h1 { font-size: 28px; }
  th, td { padding-inline: 13px; }
  .formGrid,
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Premium marketplace merchandising surfaces */
html[data-zz-page="home"] .content-shell #products,
html[data-zz-page="home"] .content-shell #featured {
  overflow: hidden;
  padding: 0 18px 18px !important;
  border: 1px solid #dce5ee;
  border-radius: 20px;
  background: linear-gradient(180deg, #f7faff 0%, #fff 54%);
  box-shadow: 0 18px 48px rgba(5, 27, 53, .08);
}

html[data-zz-page="home"] #products .sectionHead,
html[data-zz-page="home"] #featured .sectionHead {
  position: relative;
  isolation: isolate;
  min-height: 104px;
  margin: 0 -18px 20px;
  padding: 22px 24px;
  overflow: hidden;
  align-items: center;
  background:
    radial-gradient(circle at 82% -70%, rgba(248, 181, 27, .34), transparent 42%),
    linear-gradient(118deg, #061a35 0%, #082d52 60%, #06494d 100%);
  color: #fff;
}

html[data-zz-page="home"] #products .sectionHead::before,
html[data-zz-page="home"] #featured .sectionHead::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 16%;
  bottom: -54px;
  width: 180px;
  height: 110px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  transform: rotate(-12deg);
}

html[data-zz-page="home"] #products .sectionHead::after,
html[data-zz-page="home"] #featured .sectionHead::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, #ffd56a, var(--zz-gold-500));
}

html[data-zz-page="home"] #products .sectionHead h2,
html[data-zz-page="home"] #featured .sectionHead h2 {
  color: #fff;
  font-size: clamp(22px, 1.7vw, 27px);
  font-weight: 650;
  letter-spacing: -.025em;
}

html[data-zz-page="home"] #products .sectionHead p,
html[data-zz-page="home"] #featured .sectionHead p {
  margin-top: 5px;
  color: #b9cbe0;
  font-size: 13px;
}

html[data-zz-page="home"] #products .sectionHead a,
html[data-zz-page="home"] #featured .sectionHead a {
  min-height: 42px;
  padding: 10px 17px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

html[data-zz-page="home"] #products .sectionHead a:hover,
html[data-zz-page="home"] #featured .sectionHead a:hover {
  border-color: var(--zz-gold-400);
  background: var(--zz-gold-500);
  color: var(--zz-navy-950);
  transform: translateY(-1px);
}

html[data-zz-page="home"] .productGrid,
html[data-zz-page="home"] .productRail {
  padding-top: 4px;
  padding-bottom: 18px;
  scrollbar-color: #aab8c6 transparent;
}

html[data-zz-page="home"] .productCard {
  position: relative;
  isolation: isolate;
  border: 1px solid #e0e7ef;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #fff 80%, #fbfcfe 100%);
  box-shadow:
    0 1px 2px rgba(5, 27, 53, .04),
    0 12px 30px rgba(5, 27, 53, .08);
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

html[data-zz-page="home"] .productCard::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  height: 3px;
  opacity: 0;
  background: linear-gradient(90deg, var(--zz-gold-500), #ffd873, #0f8b87);
  transition: opacity .22s ease;
  pointer-events: none;
}

html[data-zz-page="home"] .productCard:hover {
  border-color: rgba(214, 154, 17, .58);
  box-shadow:
    0 2px 5px rgba(5, 27, 53, .05),
    0 24px 48px rgba(5, 27, 53, .15);
  transform: translateY(-6px);
}

html[data-zz-page="home"] .productCard:hover::after { opacity: 1; }

html[data-zz-page="home"] .productImage {
  min-height: 190px;
  padding: 15px;
  border-bottom: 1px solid #edf1f5;
  background:
    radial-gradient(circle at 50% 40%, #fff 0%, rgba(255,255,255,.72) 35%, transparent 68%),
    linear-gradient(145deg, #f4f7fb, #eaf0f6);
}

html[data-zz-page="home"] .productImage img {
  width: 100%;
  height: 100%;
  max-width: 94%;
  max-height: 94%;
  filter: drop-shadow(0 13px 12px rgba(5, 27, 53, .12));
  transition: transform .28s ease, filter .28s ease;
}

html[data-zz-page="home"] .productCard:hover .productImage img {
  filter: drop-shadow(0 16px 15px rgba(5, 27, 53, .18));
  transform: scale(1.045);
}

html[data-zz-page="home"] .productBadge {
  left: 11px;
  top: 11px;
  padding: 6px 10px;
  border: 1px solid rgba(248, 181, 27, .34);
  background: rgba(255, 250, 235, .94);
  color: #8b5d00;
  box-shadow: 0 5px 14px rgba(5, 27, 53, .08);
  backdrop-filter: blur(8px);
}

html[data-zz-page="home"] .wishBtn {
  right: 11px;
  top: 11px;
  width: 36px;
  height: 36px;
  border-color: rgba(193, 204, 216, .86);
  background: rgba(255, 255, 255, .92);
  color: #54657a;
  box-shadow: 0 7px 18px rgba(5, 27, 53, .1);
  backdrop-filter: blur(8px);
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

html[data-zz-page="home"] .wishBtn:hover {
  border-color: #f0a7a7;
  background: #fff5f5;
  color: #d92d20;
  transform: scale(1.06);
}

html[data-zz-page="home"] .productInfo { gap: 9px; padding: 16px; }
html[data-zz-page="home"] .productName { color: #0a2342; font-size: 15px; font-weight: 650; line-height: 1.35; }
html[data-zz-page="home"] .productVendor { color: #718096; font-size: 12px; }
html[data-zz-page="home"] .ratingLine { color: #e59a00; font-size: 12px; }
html[data-zz-page="home"] .priceLine { gap: 8px; padding-top: 2px; }
html[data-zz-page="home"] .price { color: #071f3d; font-size: 20px; letter-spacing: -.02em; }
html[data-zz-page="home"] .oldPrice { color: #99a5b4; }
html[data-zz-page="home"] .stock { color: #168653; font-size: 12px; }

html[data-zz-page="home"] .addBtn {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid #e4a514;
  border-radius: 13px;
  background: linear-gradient(145deg, #ffca45, #f5ad0a);
  color: #071f3d;
  box-shadow: 0 9px 19px rgba(232, 161, 0, .24), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

html[data-zz-page="home"] .addBtn:hover:not(:disabled) {
  box-shadow: 0 12px 24px rgba(232, 161, 0, .34), inset 0 1px 0 rgba(255,255,255,.6);
  filter: saturate(1.05);
  transform: translateY(-2px);
}

@media (max-width: 720px) {
  html[data-zz-page="home"] .content-shell #products,
  html[data-zz-page="home"] .content-shell #featured { padding: 0 13px 14px !important; border-radius: 17px; }
  html[data-zz-page="home"] #products .sectionHead,
  html[data-zz-page="home"] #featured .sectionHead { min-height: 92px; margin: 0 -13px 16px; padding: 18px; }
  html[data-zz-page="home"] #products .sectionHead h2,
  html[data-zz-page="home"] #featured .sectionHead h2 { font-size: 21px; }
  html[data-zz-page="home"] #products .sectionHead p,
  html[data-zz-page="home"] #featured .sectionHead p { font-size: 12px; }
  html[data-zz-page="home"] #products .sectionHead a,
  html[data-zz-page="home"] #featured .sectionHead a { min-height: 38px; padding: 8px 12px; font-size: 12px; }
  html[data-zz-page="home"] .productImage { min-height: 176px; }
}

/* Full-bleed premium homepage hero */
html[data-zz-page="home"] body { overflow-x: clip; }

html[data-zz-page="home"] .zz-hero-band {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: 32px 0 36px;
  overflow: hidden;
  border-top: 1px solid rgba(248, 181, 27, .22);
  border-bottom: 1px solid rgba(138, 169, 202, .18);
  background:
    radial-gradient(circle at 7% 18%, rgba(22, 92, 164, .25), transparent 27%),
    radial-gradient(circle at 87% 58%, rgba(10, 126, 119, .2), transparent 30%),
    linear-gradient(118deg, #020c1b 0%, #051a34 48%, #04172c 100%);
  box-shadow: inset 0 -28px 70px rgba(0, 0, 0, .15);
}

html[data-zz-page="home"] .zz-hero-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 37%, transparent 68%, #000);
  mask-image: linear-gradient(90deg, #000, transparent 37%, transparent 68%, #000);
  pointer-events: none;
}

html[data-zz-page="home"] .zz-hero-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -230px;
  width: min(76vw, 1320px);
  height: 330px;
  border: 1px solid rgba(248, 181, 27, .13);
  border-radius: 50%;
  box-shadow: 0 0 110px rgba(16, 104, 154, .16);
  transform: translateX(-50%);
  pointer-events: none;
}

html[data-zz-page="home"] .zz-hero-band-inner {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 32px), 1600px);
  max-width: none;
  margin-inline: auto;
}

html[data-zz-page="home"] .zz-hero-band .zz-market-hero-row {
  gap: 16px;
  align-items: stretch;
}

html[data-zz-page="home"] .zz-hero-band .zz-hero-module,
html[data-zz-page="home"] .zz-hero-band .aiPanel.zz-ai-hero {
  min-height: 458px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 24px;
  box-shadow:
    0 32px 80px rgba(0, 5, 15, .38),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

html[data-zz-page="home"] .zz-hero-band .zz-hero-module {
  background: linear-gradient(135deg, #061a35, #092f57);
}

html[data-zz-page="home"] .zz-hero-band .zz-hero-module::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0 auto auto 38px;
  width: 118px;
  height: 3px;
  border-radius: 0 0 99px 99px;
  background: linear-gradient(90deg, var(--zz-gold-500), #ffe18c);
  box-shadow: 0 0 24px rgba(248, 181, 27, .3);
  pointer-events: none;
}

html[data-zz-page="home"] .zz-hero-band .hero-main-pane {
  min-height: 458px;
  padding: 62px 50px 52px;
  background:
    radial-gradient(circle at 74% 42%, rgba(19, 118, 189, .27), transparent 31%),
    radial-gradient(circle at 9% 0%, rgba(248, 181, 27, .075), transparent 26%),
    linear-gradient(120deg, #06162d 0%, #082d54 100%) !important;
}

html[data-zz-page="home"] .zz-hero-band .hero-main-pane::before {
  content: "";
  position: absolute;
  left: 42%;
  top: 50%;
  width: 290px;
  height: 290px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 90px rgba(21, 116, 190, .08);
  pointer-events: none;
}

html[data-zz-page="home"] .zz-hero-band .hero-copy { max-width: 54%; }
html[data-zz-page="home"] .zz-hero-band .hero-copy .greeting {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 13px;
  color: #ffc84a;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .105em;
}

html[data-zz-page="home"] .zz-hero-band .hero-copy h1 {
  margin-bottom: 12px;
  font-size: clamp(44px, 3.55vw, 61px);
  font-weight: 580;
  line-height: 1.01;
  letter-spacing: -.045em;
  text-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}

html[data-zz-page="home"] .zz-hero-band .hero-copy h1 strong {
  color: #ffc43b;
  font-weight: 650;
}

html[data-zz-page="home"] .zz-hero-band .hero-copy p {
  max-width: 540px;
  color: #c6d5e6;
  font-size: 16px;
  line-height: 1.52;
}

html[data-zz-page="home"] .zz-hero-band .hero-pill {
  min-height: 43px;
  padding: 10px 14px;
  border-color: rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
}

html[data-zz-page="home"] .zz-hero-band .hero-action-row { gap: 11px; margin-top: 19px; }
html[data-zz-page="home"] .zz-hero-band .hero-action-row .btn {
  min-height: 50px;
  padding-inline: 21px;
  border-radius: 11px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}

html[data-zz-page="home"] .zz-hero-band .hero-action-row .btn-primary {
  background: linear-gradient(145deg, #ffca45, #f5ad0a);
  box-shadow: 0 13px 28px rgba(225, 151, 0, .25), inset 0 1px 0 rgba(255,255,255,.5);
}

html[data-zz-page="home"] .zz-hero-band .zz-hero-control {
  border-color: rgba(255, 255, 255, .2) !important;
  background: rgba(3, 17, 36, .62) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(10px);
}

html[data-zz-page="home"] .zz-hero-band .aiPanel.zz-ai-hero {
  position: relative;
  min-height: 458px;
  padding: 24px;
  border-color: rgba(255, 255, 255, .13);
  background:
    radial-gradient(circle at 100% 0%, rgba(38, 120, 220, .3), transparent 36%),
    linear-gradient(155deg, rgba(8, 35, 69, .96), rgba(2, 15, 31, .98)) !important;
}

html[data-zz-page="home"] .zz-hero-band .aiPanel.zz-ai-hero::before {
  content: "";
  position: absolute;
  inset: 0 24px auto;
  height: 2px;
  border-radius: 0 0 99px 99px;
  background: linear-gradient(90deg, transparent, rgba(248, 181, 27, .75), transparent);
  pointer-events: none;
}

html[data-zz-page="home"] .zz-hero-band .zz-ai-hero .aiMsg.bot {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

html[data-zz-page="home"] .zz-hero-band .zz-ai-hero .aiAsk.input-group {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
}

html[data-zz-page="home"] .zz-hero-band .zz-ai-hero .aiAsk.input-group > .form-control,
html[data-zz-page="home"] .zz-hero-band .zz-ai-hero .aiAsk.input-group > button {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html[data-zz-page="home"] .zz-hero-band .zz-ai-prompts button {
  background: rgba(255, 255, 255, .075);
  backdrop-filter: blur(7px);
}

@media (max-width: 1180px) {
  html[data-zz-page="home"] .zz-hero-band .hero-main-pane { padding-inline: 38px; }
  html[data-zz-page="home"] .zz-hero-band .hero-copy { max-width: 58%; }
}

@media (max-width: 900px) {
  html[data-zz-page="home"] .zz-hero-band { padding-block: 24px; }
  html[data-zz-page="home"] .zz-hero-band .zz-hero-module,
  html[data-zz-page="home"] .zz-hero-band .aiPanel.zz-ai-hero { min-height: 0; }
  html[data-zz-page="home"] .zz-hero-band .hero-main-pane { min-height: 440px; }
  html[data-zz-page="home"] .zz-hero-band .aiPanel.zz-ai-hero { min-height: 340px; }
}

@media (max-width: 620px) {
  html[data-zz-page="home"] .zz-hero-band { padding: 12px 0 18px; }
  html[data-zz-page="home"] .zz-hero-band-inner { width: 100%; padding-inline: 12px; }
  html[data-zz-page="home"] .zz-hero-band .zz-market-hero-row { gap: 12px; }
  html[data-zz-page="home"] .zz-hero-band .zz-hero-module,
  html[data-zz-page="home"] .zz-hero-band .aiPanel.zz-ai-hero { border-radius: 17px; }
  html[data-zz-page="home"] .zz-hero-band .hero-main-pane { min-height: 450px; padding: 30px 22px 184px; }
  html[data-zz-page="home"] .zz-hero-band .hero-copy { max-width: none; }
  html[data-zz-page="home"] .zz-hero-band .hero-copy .greeting { font-size: 11px; letter-spacing: .075em; }
  html[data-zz-page="home"] .zz-hero-band .hero-copy h1 { font-size: clamp(34px, 10.5vw, 44px); }
  html[data-zz-page="home"] .zz-hero-band .hero-copy p { font-size: 14px; }
  html[data-zz-page="home"] .zz-hero-band .aiPanel.zz-ai-hero { min-height: 330px; padding: 20px; }
}

/* Premium trusted-vendor and marketplace-guarantee card */
html[data-zz-page="home"] .content-side .vendorPanel {
  position: relative;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dce5ee;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  box-shadow: 0 18px 46px rgba(5, 27, 53, .1);
}

html[data-zz-page="home"] .vendorPanel .vendorTitle {
  position: relative;
  min-height: 96px;
  margin: 0;
  padding: 21px 20px;
  overflow: hidden;
  align-items: center;
  background:
    radial-gradient(circle at 88% -30%, rgba(248, 181, 27, .28), transparent 42%),
    linear-gradient(130deg, #061a35, #0a3656 70%, #07504f);
}

html[data-zz-page="home"] .vendorPanel .vendorTitle::before {
  content: "";
  position: absolute;
  left: 20px;
  bottom: 0;
  width: 62px;
  height: 3px;
  border-radius: 99px 99px 0 0;
  background: linear-gradient(90deg, var(--zz-gold-500), #ffe18c);
}

html[data-zz-page="home"] .vendorPanel .vendorTitle::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -54px;
  width: 126px;
  height: 126px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
}

html[data-zz-page="home"] .vendorPanel .vendorTitle h2 {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.02em;
}

html[data-zz-page="home"] .vendorPanel .vendorTitle p {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  color: #b9cbe0;
  font-size: 12px;
}

html[data-zz-page="home"] .vendorPanel .vendorTitle .linkBtn {
  position: relative;
  z-index: 2;
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  color: #fff;
  font-size: 11px;
  text-decoration: none;
  backdrop-filter: blur(8px);
}

html[data-zz-page="home"] .vendorPanel .vendorTitle .linkBtn:hover {
  border-color: var(--zz-gold-400);
  background: var(--zz-gold-500);
  color: var(--zz-navy-950);
}

html[data-zz-page="home"] .vendorPanel .vendorList {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  padding: 17px 18px 0;
  text-align: left;
}

html[data-zz-page="home"] .vendorPanel .vendorList::before {
  content: "Top verified sellers";
  grid-column: 1 / -1;
  margin-bottom: 1px;
  color: #748296;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .085em;
  text-transform: uppercase;
}

html[data-zz-page="home"] .vendorPanel .vendorChip {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  gap: 2px 9px;
  align-items: center;
  min-width: 0;
  min-height: 64px;
  padding: 9px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #fff;
  color: var(--zz-ink);
  text-decoration: none;
  box-shadow: 0 5px 16px rgba(5, 27, 53, .045);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

html[data-zz-page="home"] .vendorPanel .vendorChip:hover {
  border-color: rgba(214, 154, 17, .48);
  box-shadow: 0 11px 24px rgba(5, 27, 53, .1);
  transform: translateY(-2px);
}

html[data-zz-page="home"] .vendorPanel .vendorList:has(> .vendorChip:nth-child(5)) > .vendorChip:first-of-type {
  grid-column: 1 / -1;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  min-height: 68px;
  padding: 10px 12px;
  border-color: rgba(233, 174, 38, .3);
  background: linear-gradient(110deg, #fffaf0, #fff 62%);
}

html[data-zz-page="home"] .vendorPanel .vendorAvatar {
  display: grid;
  grid-row: auto;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  border: 1px solid #d5e2f0;
  border-radius: 12px;
  background: linear-gradient(145deg, #edf5ff, #dce9f8);
  color: #0b4c83;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  font-size: 13px;
  font-weight: 700;
}

html[data-zz-page="home"] .vendorPanel .vendorList:has(> .vendorChip:nth-child(5)) > .vendorChip:first-of-type .vendorAvatar {
  grid-row: auto;
  width: 46px;
  height: 46px;
  border-color: rgba(230, 169, 28, .35);
  background: linear-gradient(145deg, #fff2c9, #ffe09a);
  color: #805400;
}

html[data-zz-page="home"] .vendorPanel .vendorChip:nth-of-type(3n) .vendorAvatar {
  background: linear-gradient(145deg, #e9f8f1, #d6efe3);
  color: #147549;
}

html[data-zz-page="home"] .vendorPanel .vendorName {
  display: block;
  align-self: center;
  min-width: 0;
  overflow: hidden;
  color: #0b2341;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-zz-page="home"] .vendorPanel .vendorRating {
  display: flex;
  align-self: center;
  align-items: center;
  gap: 4px;
  color: #b57400 !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff7df;
}

html[data-zz-page="home"] .vendorPanel .vendorList:has(> .vendorChip:nth-child(5)) > .vendorChip:first-of-type .vendorRating {
  align-self: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff4d2;
}

html[data-zz-page="home"] .vendorPanel .vendorRating i { color: #efa600; font-size: 10px; }

html[data-zz-page="home"] .vendorTrustHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
  margin: 18px 18px 10px;
  padding-top: 16px;
  border-top: 1px solid #e4eaf0;
}

html[data-zz-page="home"] .vendorTrustHead span {
  color: #748296;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .075em;
  text-transform: uppercase;
}

html[data-zz-page="home"] .vendorTrustHead b {
  color: #0b2341;
  font-size: 11px;
  font-weight: 600;
}

html[data-zz-page="home"] .vendorPanel .vendorTrustMini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0 18px 19px;
  border: 0;
}

html[data-zz-page="home"] .vendorPanel .vendorTrustMini > div {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  min-height: 82px;
  padding: 11px 9px;
  border: 1px solid #e3e9f0;
  border-radius: 12px;
  background: linear-gradient(145deg, #f8fafc, #fff);
}

html[data-zz-page="home"] .vendorPanel .vendorTrustMini p { min-width: 0; margin: 0; }
html[data-zz-page="home"] .vendorPanel .vendorTrustMini i {
  width: 35px;
  height: 35px;
  border-radius: 10px;
  background: #eaf2ff;
  color: #1769d2;
  font-size: 15px;
}

html[data-zz-page="home"] .vendorPanel .vendorTrustMini > div:nth-child(2) i { background: #e8f7ef; color: #15824f; }
html[data-zz-page="home"] .vendorPanel .vendorTrustMini > div:nth-child(3) i { background: #fff3d6; color: #b57400; }
html[data-zz-page="home"] .vendorPanel .vendorTrustMini > div:nth-child(4) i { background: #e8f4f7; color: #087d83; }

html[data-zz-page="home"] .vendorPanel .vendorTrustMini b {
  color: #0b2341;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
}

html[data-zz-page="home"] .vendorPanel .vendorTrustMini span {
  margin-top: 3px;
  color: #748296;
  font-size: 10px;
  line-height: 1.3;
}

@media (max-width: 360px) {
  html[data-zz-page="home"] .vendorPanel .vendorList,
  html[data-zz-page="home"] .vendorPanel .vendorTrustMini { grid-template-columns: minmax(0, 1fr); }
  html[data-zz-page="home"] .vendorPanel .vendorList:has(> .vendorChip:nth-child(5)) > .vendorChip:first-of-type { grid-column: auto; }
}

/* Compact category discovery strip */
html[data-zz-page="home"] .zz-market-category-row .categoryBand {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 14px !important;
  border-color: #dce5ee;
  border-radius: 19px;
  background: linear-gradient(145deg, #fff, #f8fbff);
  box-shadow: 0 12px 34px rgba(5, 27, 53, .07);
}

html[data-zz-page="home"] .zz-market-category-row .categoryBand::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--zz-gold-500), #087f7c);
}

html[data-zz-page="home"] .zz-market-category-row .categoryBand .sectionHead {
  margin: 0 2px 13px;
  align-items: center;
}

html[data-zz-page="home"] .zz-market-category-row .categoryBand .sectionHead h2 {
  color: #071f3d;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.025em;
}

html[data-zz-page="home"] .zz-market-category-row .categoryBand .sectionHead p { color: #718096; font-size: 12px; }

html[data-zz-page="home"] .zz-category-view-all {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid #e3a30f;
  border-radius: 999px;
  background: linear-gradient(145deg, #ffcc4d, #f5af0c);
  color: #071f3d;
  box-shadow: 0 9px 20px rgba(226, 157, 0, .22), inset 0 1px 0 rgba(255,255,255,.55);
  font-size: 12px;
  font-weight: 650;
  transition: transform .18s ease, box-shadow .18s ease;
}

html[data-zz-page="home"] .zz-category-view-all:hover {
  box-shadow: 0 12px 25px rgba(226, 157, 0, .3), inset 0 1px 0 rgba(255,255,255,.6);
  transform: translateY(-2px);
}

html[data-zz-page="home"] .zz-category-scroll-shell { position: relative; min-width: 0; }

html[data-zz-page="home"] .zz-market-category-row .categoryBand .promoGrid {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(122px, 1fr);
  gap: 9px;
  max-width: 100%;
  padding: 2px 43px 9px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-color: #9caebe #edf1f5;
  scrollbar-width: thin;
}

html[data-zz-page="home"] .zz-market-category-row .categoryBand .promoGrid::-webkit-scrollbar { height: 6px; }
html[data-zz-page="home"] .zz-market-category-row .categoryBand .promoGrid::-webkit-scrollbar-track { border-radius: 99px; background: #edf1f5; }
html[data-zz-page="home"] .zz-market-category-row .categoryBand .promoGrid::-webkit-scrollbar-thumb { border-radius: 99px; background: #9caebe; }

html[data-zz-page="home"] .zz-market-category-row .categoryBand .promoPanel,
html[data-zz-page="home"] .zz-market-category-row .categoryBand .promoPanel:nth-child(n+9) {
  display: grid;
  grid-template-rows: 52px auto auto;
  place-items: center;
  min-width: 0;
  min-height: 112px;
  padding: 10px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(5, 27, 53, .045);
  scroll-snap-align: start;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

html[data-zz-page="home"] .zz-market-category-row .categoryBand .promoPanel:hover {
  border-color: rgba(214, 154, 17, .5);
  background: #fff;
  box-shadow: 0 11px 24px rgba(5, 27, 53, .1);
  transform: translateY(-2px);
}

html[data-zz-page="home"] .zz-market-category-row .categoryBand .tileImg {
  width: 52px;
  height: 52px;
  margin: 0;
  border: 1px solid #dce6f0;
  border-radius: 14px;
  background: linear-gradient(145deg, #f1f6fc, #e8f0f8);
}

html[data-zz-page="home"] .zz-market-category-row .categoryBand .promoPanel h3 {
  width: 100%;
  margin-top: 7px;
  overflow: hidden;
  color: #0b2341;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-zz-page="home"] .zz-market-category-row .categoryBand .promoPanel small {
  margin-top: 2px;
  color: #7a889b;
  font-size: 9px;
}

html[data-zz-page="home"] .zz-category-scroll-control {
  position: absolute;
  z-index: 5;
  top: 46%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid #d8e1eb;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #0a2b50;
  box-shadow: 0 8px 20px rgba(5,27,53,.13);
  transform: translateY(-50%);
  backdrop-filter: blur(8px);
}

html[data-zz-page="home"] .zz-category-scroll-control:hover { border-color: var(--zz-gold-500); color: #9a6700; }
html[data-zz-page="home"] .zz-category-scroll-control.prev { left: 3px; }
html[data-zz-page="home"] .zz-category-scroll-control.next { right: 3px; }

/* Category explorer modal */
body.category-explorer-open { overflow: hidden; }

.zz-category-explorer {
  position: fixed;
  z-index: 350;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 12, 27, .72);
  opacity: 0;
  backdrop-filter: blur(8px);
}

.zz-category-explorer.show { display: flex; opacity: 1; animation: zzCategoryBackdropIn .2s ease both; }

.zz-category-explorer-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1240px, calc(100vw - 40px));
  height: min(760px, calc(100vh - 40px));
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 42px 110px rgba(0, 6, 18, .48), inset 0 1px 0 rgba(255,255,255,.7);
  transform-origin: 50% 42%;
  animation: zzCategoryDialogIn .24s cubic-bezier(.2,.75,.25,1) both;
}

@keyframes zzCategoryBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zzCategoryDialogIn { from { opacity: 0; transform: translateY(18px) scale(.975); } to { opacity: 1; transform: none; } }

.zz-category-explorer-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  min-height: 92px;
  padding: 20px 24px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(circle at 80% -90%, rgba(248,181,27,.35), transparent 40%),
    linear-gradient(125deg, #04152d, #092f53 68%, #07504f);
  color: #fff;
}

.zz-category-explorer-header::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: 0;
  width: 82px;
  height: 3px;
  border-radius: 99px 99px 0 0;
  background: linear-gradient(90deg, var(--zz-gold-500), #ffe18c);
}

.zz-category-explorer-brand { display: flex; gap: 13px; align-items: center; min-width: 0; }
.zz-category-explorer-brand > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(248,181,27,.35);
  border-radius: 13px;
  background: rgba(248,181,27,.12);
  color: var(--zz-gold-300);
  font-size: 20px;
}

.zz-category-explorer-brand h2 { margin: 0; color: #fff; font-size: 22px; font-weight: 650; letter-spacing: -.025em; }
.zz-category-explorer-brand p { margin: 4px 0 0; color: #b9cbe0; font-size: 12px; }
.zz-category-explorer-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  backdrop-filter: blur(8px);
}

.zz-category-explorer-close:hover { border-color: var(--zz-gold-400); background: var(--zz-gold-500); color: var(--zz-navy-950); }

.zz-category-explorer-body { display: grid; grid-template-columns: 278px minmax(0, 1fr); min-height: 0; }
.zz-category-explorer-nav-wrap {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding: 18px 12px 16px;
  border-right: 1px solid #e1e7ee;
  background: linear-gradient(180deg, #f8fafc, #f2f6fa);
}

.zz-category-explorer-nav-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 0 8px 12px; }
.zz-category-explorer-nav-head span { color: #0b2341; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .075em; }
.zz-category-explorer-nav-head small { color: #7a889b; font-size: 10px; }
.zz-category-explorer-nav { display: grid; align-content: start; gap: 5px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #9aacbd transparent; scrollbar-width: thin; }
.zz-category-explorer-nav button {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 61px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #1f3550;
  text-align: left;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.zz-category-explorer-nav button:hover { border-color: #dde6ef; background: #fff; }
.zz-category-explorer-nav button.active {
  border-color: rgba(218,157,18,.35);
  background: linear-gradient(110deg, #fff7df, #fff);
  box-shadow: 0 7px 18px rgba(5,27,53,.07), inset 3px 0 0 var(--zz-gold-500);
}

.zz-category-nav-icon {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 1px solid #dce5ef;
  border-radius: 11px;
  background: #fff;
  color: #0b5e91;
  font-size: 16px;
}

.zz-category-explorer-nav button.active .zz-category-nav-icon { border-color: rgba(226,164,21,.35); background: #fff3cd; color: #916000; }
.zz-category-explorer-nav button > span:nth-child(2) { min-width: 0; }
.zz-category-explorer-nav b { display: block; overflow: hidden; color: #0b2341; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.zz-category-explorer-nav small { display: block; margin-top: 3px; overflow: hidden; color: #7a889b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.zz-category-explorer-nav button > i { color: #8795a7; font-size: 11px; }

.zz-category-explorer-results { min-width: 0; min-height: 0; padding: 23px 24px 26px; overflow-y: auto; overscroll-behavior: contain; background: #fff; }
.zz-category-explorer-results-head {
  position: sticky;
  z-index: 8;
  top: -23px;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: end;
  margin: -23px -24px 18px;
  padding: 23px 24px 16px;
  border-bottom: 1px solid #e7ecf1;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
}

.zz-category-explorer-results-head span { color: #a66d00; font-size: 10px; font-weight: 700; letter-spacing: .095em; text-transform: uppercase; }
.zz-category-explorer-results-head h3 { margin: 4px 0 0; color: #071f3d; font-size: 24px; font-weight: 650; letter-spacing: -.03em; }
.zz-category-explorer-results-head p { margin: 4px 0 0; color: #718096; font-size: 12px; }
.zz-category-explorer-results-head a {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 7px;
  align-items: center;
  min-height: 39px;
  padding: 9px 13px;
  border: 1px solid #dbe4ed;
  border-radius: 999px;
  color: #0c5eb3;
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
}

.zz-category-explorer-results-head a:hover { border-color: var(--zz-gold-500); background: #fff8e7; color: #8d5c00; }
.zz-category-explorer-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 14px; align-items: stretch; }
.zz-category-explorer-products .productCard { border-radius: 15px; box-shadow: 0 9px 24px rgba(5,27,53,.075); }
.zz-category-explorer-products .productCard:hover { transform: translateY(-4px); }
.zz-category-explorer-products .productImage { min-height: 145px; aspect-ratio: 1.18 / 1; padding: 12px; }
.zz-category-explorer-products .productInfo { gap: 7px; padding: 12px; }
.zz-category-explorer-products .productName { min-height: 37px; font-size: 13px; }
.zz-category-explorer-products .productVendor { font-size: 11px; }
.zz-category-explorer-products .price { font-size: 16px; }
.zz-category-explorer-products .stock,
.zz-category-explorer-products .ratingLine { font-size: 11px; }
.zz-category-explorer-products .addBtn { width: 40px; height: 40px; min-height: 40px; }

.zz-category-explorer-skeleton {
  min-height: 322px;
  padding: 12px;
  border: 1px solid #e6ebf0;
  border-radius: 15px;
  background: #fff;
  overflow: hidden;
}

.zz-category-explorer-skeleton span,
.zz-category-explorer-skeleton b,
.zz-category-explorer-skeleton i {
  display: block;
  border-radius: 9px;
  background: linear-gradient(90deg, #edf1f5 20%, #f7f9fb 48%, #edf1f5 76%);
  background-size: 220% 100%;
  animation: shine 1.2s linear infinite;
}

.zz-category-explorer-skeleton span { height: 145px; }
.zz-category-explorer-skeleton b { width: 84%; height: 14px; margin-top: 18px; }
.zz-category-explorer-skeleton i { width: 56%; height: 12px; margin-top: 12px; }
.zz-category-explorer-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 360px;
  padding: 36px;
  border: 1px dashed #cfd9e4;
  border-radius: 18px;
  background: #f8fafc;
  color: #718096;
  text-align: center;
}

.zz-category-explorer-empty > i { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: #eaf2fb; color: #0c65aa; font-size: 23px; }
.zz-category-explorer-empty h4 { margin: 14px 0 0; color: #0b2341; font-size: 18px; }
.zz-category-explorer-empty p { margin: 6px 0 0; }
.zz-category-explorer-empty a { margin-top: 14px; color: #0c5eb3; font-weight: 650; }

@media (max-width: 900px) {
  .zz-category-explorer { padding: 12px; }
  .zz-category-explorer-dialog { width: calc(100vw - 24px); height: calc(100vh - 24px); min-height: 0; border-radius: 19px; }
  .zz-category-explorer-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .zz-category-explorer-nav-wrap { display: block; padding: 11px 12px; border-right: 0; border-bottom: 1px solid #e1e7ee; }
  .zz-category-explorer-nav-head { padding: 0 2px 8px; }
  .zz-category-explorer-nav { display: flex; gap: 7px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .zz-category-explorer-nav::-webkit-scrollbar { display: none; }
  .zz-category-explorer-nav button { flex: 0 0 auto; grid-template-columns: 32px auto; min-height: 48px; width: auto; padding: 7px 10px; }
  .zz-category-explorer-nav button > i,
  .zz-category-explorer-nav small { display: none; }
  .zz-category-nav-icon { width: 32px; height: 32px; border-radius: 9px; }
  .zz-category-explorer-nav b { max-width: 150px; }
}

@media (max-width: 620px) {
  html[data-zz-page="home"] .zz-market-category-row .categoryBand { padding-inline: 14px !important; }
  html[data-zz-page="home"] .zz-market-category-row .categoryBand .promoGrid { grid-auto-columns: 116px; padding-inline: 39px; }
  html[data-zz-page="home"] .zz-category-view-all { min-height: 37px; padding: 8px 11px; }
  .zz-category-explorer { padding: 0; }
  .zz-category-explorer-dialog { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .zz-category-explorer-header { min-height: 82px; padding: 16px; }
  .zz-category-explorer-header::after { left: 16px; }
  .zz-category-explorer-brand > span { width: 39px; height: 39px; border-radius: 11px; }
  .zz-category-explorer-brand h2 { font-size: 18px; }
  .zz-category-explorer-brand p { display: none; }
  .zz-category-explorer-close { width: 39px; height: 39px; min-height: 39px; }
  .zz-category-explorer-nav-head { display: none; }
  .zz-category-explorer-nav-wrap { padding-block: 9px; }
  .zz-category-explorer-results { padding: 17px 14px 22px; }
  .zz-category-explorer-results-head { top: -17px; display: block; margin: -17px -14px 14px; padding: 17px 14px 13px; }
  .zz-category-explorer-results-head h3 { font-size: 21px; }
  .zz-category-explorer-results-head a { margin-top: 10px; min-height: 35px; }
  .zz-category-explorer-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .zz-category-explorer-products .productImage { min-height: 126px; }
  .zz-category-explorer-products .productInfo { padding: 10px; }
  .zz-category-explorer-products .productVendor { display: none; }
  .zz-category-explorer-products .oldPrice { display: none; }
  .zz-category-explorer-products .price { font-size: 15px; }
  .zz-category-explorer-products .wishBtn { width: 32px; height: 32px; }
  .zz-category-explorer-skeleton { min-height: 270px; padding: 9px; }
  .zz-category-explorer-skeleton span { height: 126px; }
}

/* World-class seller onboarding form */
html[data-zz-area="vendor"][data-zz-page="register"] { height: auto; min-height: 100%; overflow-y: auto; }
html[data-zz-area="vendor"][data-zz-page="register"] body {
  height: auto;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: visible;
  background:
    radial-gradient(circle at 8% 14%, rgba(18, 112, 182, .23), transparent 28%),
    radial-gradient(circle at 91% 84%, rgba(12, 122, 111, .16), transparent 27%),
    linear-gradient(135deg, #020c1c, #061c38 56%, #042238);
}

html[data-zz-area="vendor"][data-zz-page="register"] .loginWrap { padding: 34px; }
html[data-zz-area="vendor"][data-zz-page="register"] .loginCard {
  grid-template-columns: minmax(360px, .82fr) minmax(620px, 1.42fr);
  width: min(1240px, 100%);
  min-height: 720px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 26px;
  box-shadow: 0 42px 110px rgba(0, 5, 16, .46), inset 0 1px 0 rgba(255,255,255,.2);
}

html[data-zz-area="vendor"][data-zz-page="register"] .loginHero {
  position: relative;
  isolation: isolate;
  min-height: 720px;
  padding: 34px 36px 30px;
  overflow: hidden;
  justify-content: flex-start;
  background:
    radial-gradient(circle at 85% 17%, rgba(28, 127, 215, .3), transparent 30%),
    radial-gradient(circle at 6% 82%, rgba(10, 139, 124, .18), transparent 27%),
    linear-gradient(150deg, #06172f, #0a315d 72%, #07504f);
}

html[data-zz-area="vendor"][data-zz-page="register"] .loginHero::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -104px;
  top: 135px;
  width: 290px;
  height: 290px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(30,132,205,.13);
}

html[data-zz-area="vendor"][data-zz-page="register"] .loginHero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000);
}

html[data-zz-area="vendor"][data-zz-page="register"] .loginHero .brand {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-size: 18px;
  letter-spacing: -.015em;
}

html[data-zz-area="vendor"][data-zz-page="register"] .loginHero .logo {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 13px;
  background: transparent url("../brand/zimbazon-logo-white-v1.png") center / contain no-repeat;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.zz-seller-hero-copy { position: relative; z-index: 1; margin-top: 62px; }
.zz-seller-eyebrow,
.zz-form-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.zz-seller-eyebrow { border: 1px solid rgba(248,181,27,.3); background: rgba(248,181,27,.11); color: #ffd260; }
.zz-seller-hero-copy h2 { max-width: 430px; margin: 16px 0 13px; color: #fff; font-size: clamp(34px, 3vw, 46px); font-weight: 560; line-height: 1.04; letter-spacing: -.045em; }
.zz-seller-hero-copy h2 strong { color: #ffc43b; font-weight: 670; }
html[data-zz-area="vendor"][data-zz-page="register"] .zz-seller-hero-copy p { max-width: 390px; margin: 0; color: #c7d6e6; font-size: 14px; line-height: 1.65; }

.zz-seller-benefits { position: relative; z-index: 1; display: grid; gap: 10px; margin-top: 30px; }
.zz-seller-benefits > div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-height: 68px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 13px;
  background: rgba(255,255,255,.065);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
}

.zz-seller-benefits > div > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(248,181,27,.28); border-radius: 11px; background: rgba(248,181,27,.1); color: #ffd260; font-size: 10px; font-weight: 700; }
.zz-seller-benefits p { margin: 0 !important; }
.zz-seller-benefits b { display: block; color: #fff; font-size: 12px; font-weight: 650; }
.zz-seller-benefits small { display: block; margin-top: 3px; color: #aebfd1; font-size: 10px; line-height: 1.35; }

.zz-seller-progress { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 8px; align-items: center; margin-top: auto; padding-top: 24px; }
.zz-seller-progress span { display: inline-flex; gap: 6px; align-items: center; color: #91a7bd; font-size: 10px; font-weight: 600; white-space: nowrap; }
.zz-seller-progress span i { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; font-size: 9px; font-style: normal; }
.zz-seller-progress span.active { color: #fff; }
.zz-seller-progress span.active i { border-color: var(--zz-gold-500); background: var(--zz-gold-500); color: #071f3d; }
.zz-seller-progress > b { height: 1px; background: rgba(255,255,255,.15); }

html[data-zz-area="vendor"][data-zz-page="register"] .loginCard > .pad {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 42px 38px;
  background: linear-gradient(145deg, #fff, #fbfcfe);
}

html[data-zz-area="vendor"][data-zz-page="register"] .zz-auth-heading { margin-bottom: 20px; }
.zz-form-eyebrow { margin-bottom: 9px; border: 1px solid #dde7f0; background: #f3f7fb; color: #0c5d8b; }
html[data-zz-area="vendor"][data-zz-page="register"] .zz-auth-heading h1 { font-size: 31px; font-weight: 650; }
html[data-zz-area="vendor"][data-zz-page="register"] .zz-auth-heading p { margin-top: 6px; }

.zz-form-section {
  margin-top: 12px;
  padding: 17px 18px 18px;
  border: 1px solid #e0e7ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(5,27,53,.045);
}

.zz-form-section-head { display: flex; gap: 11px; align-items: center; margin-bottom: 14px; }
.zz-form-section-head > span { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(218,157,18,.3); border-radius: 10px; background: #fff6dd; color: #9a6500; font-size: 10px; font-weight: 700; }
.zz-form-section-head h2 { margin: 0; color: #0a2342; font-size: 15px; font-weight: 650; }
.zz-form-section-head p { margin: 3px 0 0; color: #758398; font-size: 10px; }
html[data-zz-area="vendor"][data-zz-page="register"] .zz-form-section .row2 { gap: 13px; }

.zz-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; color: #29415d; }
.zz-field > span { display: flex; justify-content: space-between; gap: 8px; align-items: center; color: #2d4560; font-size: 11px; font-weight: 650; }
.zz-field > span em { color: #d92d20; font-style: normal; }
.zz-field > span small { color: #8b98a8; font-size: 9px; font-weight: 500; }
.zz-field-wide { margin-top: 12px; }
html[data-zz-area="vendor"][data-zz-page="register"] .zz-field .input {
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #d7e0e9;
  border-radius: 11px;
  background: #fbfcfe;
  color: #0b2341;
  font-size: 13px;
  font-weight: 500;
  box-shadow: inset 0 1px 2px rgba(5,27,53,.025);
}

html[data-zz-area="vendor"][data-zz-page="register"] .zz-field .input:focus { border-color: #3a78b2; background: #fff; box-shadow: 0 0 0 4px rgba(27,103,168,.09); }
.zz-field-help { margin-top: -2px; color: #8b98a8; font-size: 9px; }
.zz-form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
html[data-zz-area="vendor"][data-zz-page="register"] .zz-form-actions .btn { min-height: 48px; padding-inline: 17px; border-radius: 11px; }
html[data-zz-area="vendor"][data-zz-page="register"] .zz-form-actions .btn.primary { min-width: 205px; border-color: #e2a10c; background: linear-gradient(145deg, #ffca45, #f3ad0d); color: #071f3d; box-shadow: 0 10px 23px rgba(224,155,0,.25), inset 0 1px 0 rgba(255,255,255,.52); }

.zz-form-assurance { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 9px; align-items: center; margin-top: 14px; padding: 10px 12px; border: 1px solid #dcece5; border-radius: 11px; background: #f4fbf7; }
.zz-form-assurance > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #dff4e7; color: #147a49; font-weight: 700; }
.zz-form-assurance p { margin: 0; }
.zz-form-assurance b { display: block; color: #174632; font-size: 10px; }
.zz-form-assurance small { display: block; margin-top: 2px; color: #668174; font-size: 9px; }
.zz-form-message:not(:empty) { margin-top: 12px; padding: 10px 12px; border: 1px solid #f1ceca; border-radius: 10px; background: #fff5f4; color: #b42318; font-size: 11px; }
.zz-form-success { margin-top: 14px; padding: 15px; border: 1px solid #bfe5ce; border-radius: 13px; background: #f0fbf4; }
.zz-form-success-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* Premium mobile-money payment workspace */
html[data-zz-page="payment-mobile"] body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 9% 15%, rgba(18,112,182,.11), transparent 27%),
    radial-gradient(circle at 91% 80%, rgba(13,131,115,.09), transparent 26%),
    linear-gradient(145deg, #f5f8fb, #fffaf0);
}

.zz-payment-wrap { width: min(1180px, calc(100% - 32px)); max-width: none; padding: 24px 0 54px; }
.zz-payment-top { min-height: 58px; margin-bottom: 18px; }
.zz-payment-brand { display: inline-flex; gap: 10px; align-items: center; color: #071f3d; }
.zz-payment-brand img { width: 48px; height: 48px; object-fit: contain; border: 1px solid #dbe4ed; border-radius: 12px; background: #fff; box-shadow: 0 7px 19px rgba(5,27,53,.1); }
.zz-payment-brand > span { display: block; color: #071f3d; font-size: 17px; font-weight: 700; }
.zz-payment-brand small { display: block; margin-top: 2px; color: #718096; font-size: 9px; font-weight: 550; letter-spacing: .06em; text-transform: uppercase; }
.zz-track-order { min-height: 43px; padding-inline: 15px; color: #173551; }

.zz-payment-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: center;
  min-height: 185px;
  padding: 29px 32px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 80% -50%, rgba(248,181,27,.33), transparent 42%),
    linear-gradient(125deg, #04152d, #092f53 68%, #07504f);
  color: #fff;
  box-shadow: 0 21px 52px rgba(4,25,48,.18);
}

.zz-payment-hero::before { content: ""; position: absolute; z-index: -1; right: 22%; bottom: -90px; width: 220px; height: 160px; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; transform: rotate(-12deg); }
.zz-payment-eyebrow { color: #ffc84a; font-size: 10px; font-weight: 700; letter-spacing: .105em; text-transform: uppercase; }
.zz-payment-hero h1 { margin: 8px 0 7px; color: #fff; font-size: clamp(27px, 3vw, 38px); font-weight: 620; letter-spacing: -.04em; }
.zz-payment-hero > div:first-child > p { max-width: 650px; margin: 0; color: #bfd0e1; font-size: 13px; line-height: 1.55; }
.zz-payment-security { display: grid; flex: 0 0 300px; grid-template-columns: 40px minmax(0,1fr); gap: 11px; align-items: center; padding: 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(255,255,255,.075); backdrop-filter: blur(9px); }
.zz-payment-security > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(248,181,27,.16); color: #ffd260; font-weight: 700; }
.zz-payment-security p { margin: 0; }
.zz-payment-security b { display: block; color: #fff; font-size: 11px; }
.zz-payment-security small { display: block; margin-top: 3px; color: #b5c7d9; font-size: 9px; line-height: 1.35; }

.zz-payment-grid { grid-template-columns: minmax(360px, .88fr) minmax(520px, 1.12fr); gap: 18px; margin-top: 18px; }
.zz-payment-grid > .card { border: 1px solid #dce4ed; border-radius: 20px; box-shadow: 0 16px 42px rgba(5,27,53,.08); }
.zz-payment-card-head { display: flex; gap: 12px; align-items: center; min-height: 79px; padding: 17px 19px; border-color: #e5eaf0; background: linear-gradient(145deg, #fff, #fafbfd); }
.zz-payment-card-head > span { display: grid; flex: 0 0 auto; place-items: center; width: 39px; height: 39px; border: 1px solid rgba(218,157,18,.3); border-radius: 11px; background: #fff5d9; color: #996400; font-size: 10px; font-weight: 700; }
.zz-payment-card-head h2 { margin: 0; color: #0a2342; font-size: 17px; font-weight: 650; }
.zz-payment-card-head p { margin: 3px 0 0; color: #758398; font-size: 10px; }
.zz-payment-grid .body { padding: 19px; }

.zz-payment-total { position: relative; padding: 19px; overflow: hidden; border: 1px solid rgba(248,181,27,.24); border-radius: 15px; background: linear-gradient(135deg, #071e3b, #0a3b50); color: #fff; }
.zz-payment-total::after { content: ""; position: absolute; right: -22px; top: -28px; width: 112px; height: 112px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.zz-payment-total span { display: block; color: #aebfd1; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.zz-payment-total strong { position: relative; display: block; margin-top: 7px; color: #fff; font-size: 29px; font-weight: 680; letter-spacing: -.035em; }
.zz-payment-total small { display: block; margin-top: 5px; color: #ffd260; font-size: 9px; }
.zz-order-reference { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-top: 10px; padding: 12px 14px; border: 1px solid #e1e7ee; border-radius: 12px; background: #f9fbfd; }
.zz-order-reference span { color: #718096; font-size: 10px; }
.zz-order-reference b { color: #0a2342; font-size: 12px; }
.zz-merchant-heading { display: flex; justify-content: space-between; gap: 10px; align-items: end; margin: 18px 1px 9px; }
.zz-merchant-heading span { color: #0a2342; font-size: 11px; font-weight: 650; }
.zz-merchant-heading small { color: #8794a4; font-size: 8px; }
.zz-merchant-list { display: grid; gap: 7px; }
.zz-merchant-row { display: grid; grid-template-columns: 35px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 58px; padding: 10px; border: 1px solid #e2e8ef; border-radius: 12px; background: #fff; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.zz-merchant-row.active { border-color: rgba(218,157,18,.38); background: #fffaf0; box-shadow: inset 3px 0 0 var(--zz-gold-500); }
.zz-merchant-row > span { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; background: #eaf2fb; color: #0b5d93; font-size: 11px; font-weight: 700; }
.zz-merchant-row.active > span { background: #fff0c3; color: #906000; }
.zz-merchant-row p { margin: 0; }
.zz-merchant-row b { display: block; color: #0b2341; font-size: 11px; }
.zz-merchant-row small { display: block; margin-top: 2px; color: #8190a2; font-size: 8px; }
.zz-merchant-row strong { color: #183752; font-size: 11px; }
.zz-payment-note { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 9px; align-items: center; margin-top: 12px; padding: 10px; border: 1px solid #dce9f4; border-radius: 11px; background: #f4f9fd; }
.zz-payment-note > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #dfeef9; color: #0b6598; font-size: 11px; font-weight: 700; }
.zz-payment-note p { margin: 0; }
.zz-payment-note b { display: block; color: #21445f; font-size: 9px; }
.zz-payment-note small { display: block; margin-top: 2px; color: #698195; font-size: 8px; }

.zz-provider-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.zz-provider-fieldset legend { margin-bottom: 9px; color: #29415d; font-size: 11px; font-weight: 650; }
.zz-provider-choices { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.zz-provider-choices button { display: grid; grid-template-columns: 34px minmax(0,1fr); grid-template-rows: auto auto; gap: 1px 8px; align-items: center; min-width: 0; min-height: 64px; padding: 9px; border: 1px solid #dfe6ee; border-radius: 12px; background: #fff; color: #29415d; text-align: left; }
.zz-provider-choices button:hover { border-color: #b8c7d7; background: #f9fbfd; }
.zz-provider-choices button.active { border-color: rgba(218,157,18,.44); background: linear-gradient(120deg, #fff7df, #fff); box-shadow: inset 3px 0 0 var(--zz-gold-500), 0 7px 18px rgba(5,27,53,.06); }
.zz-provider-choices button > span { display: grid; grid-row: 1 / 3; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #eaf2fb; color: #0b5d93; font-size: 10px; font-weight: 700; }
.zz-provider-choices button.active > span { background: #ffedb6; color: #8d5d00; }
.zz-provider-choices b { overflow: hidden; color: #0b2341; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.zz-provider-choices small { color: #8190a2; font-size: 8px; }
.zz-native-provider-label,
.zz-native-provider { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.zz-payment-fields { display: grid; gap: 12px; margin-top: 18px; }
.zz-payment-field { display: grid; gap: 6px; margin: 0; }
.zz-payment-field > span { color: #29415d; font-size: 11px; font-weight: 650; }
.zz-payment-field > span em { color: #d92d20; font-style: normal; }
.zz-payment-field > div { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: stretch; overflow: hidden; border: 1px solid #d8e1ea; border-radius: 12px; background: #fbfcfe; transition: border-color .18s ease, box-shadow .18s ease; }
.zz-payment-field > div:focus-within { border-color: #3478ad; background: #fff; box-shadow: 0 0 0 4px rgba(28,104,165,.09); }
.zz-payment-field i { display: grid; place-items: center; min-width: 54px; padding: 0 11px; border-right: 1px solid #e1e7ee; background: #f1f5f9; color: #587087; font-size: 10px; font-style: normal; font-weight: 650; }
.zz-payment-field input { min-height: 51px; padding: 12px; border: 0; border-radius: 0; outline: none; background: transparent; color: #0b2341; font-size: 12px; font-weight: 500; box-shadow: none; }
.zz-payment-field > small { color: #8794a4; font-size: 8px; }

.zz-payment-process { display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 8px; align-items: center; margin-top: 18px; padding: 13px; border: 1px solid #e3e9ef; border-radius: 12px; background: #f9fbfd; }
.zz-payment-process > div { display: flex; gap: 7px; align-items: center; }
.zz-payment-process > div > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #d7e0e9; border-radius: 50%; background: #fff; color: #748296; font-size: 9px; font-weight: 700; }
.zz-payment-process > div.active > span { border-color: var(--zz-gold-500); background: var(--zz-gold-500); color: #071f3d; }
.zz-payment-process p { margin: 0; }
.zz-payment-process b { display: block; color: #28435d; font-size: 8px; white-space: nowrap; }
.zz-payment-process small { display: block; margin-top: 1px; color: #8a98a8; font-size: 7px; white-space: nowrap; }
.zz-payment-process > i { height: 1px; background: #dce4ec; }
.zz-payment-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 17px; }
.zz-payment-actions .btn { min-height: 47px; padding-inline: 16px; border-radius: 11px; }
.zz-payment-actions .btn.primary { min-width: 210px; border-color: #e0a00c; background: linear-gradient(145deg, #ffca45, #f3ad0d); color: #071f3d; box-shadow: 0 10px 23px rgba(224,155,0,.25), inset 0 1px 0 rgba(255,255,255,.52); }
.zz-payment-message:not(:empty) { margin-top: 12px; padding: 11px 12px; border: 1px solid #dce6ef; border-radius: 10px; background: #f7fafc; color: #405b74; font-size: 10px; }
.zz-payment-message[data-state="error"] { border-color: #f1ceca; background: #fff5f4; color: #b42318; }
.zz-payment-message[data-state="success"] { border-color: #bfe5ce; background: #f0fbf4; color: #147a49; }

@media (max-width: 1100px) {
  html[data-zz-area="vendor"][data-zz-page="register"] .loginCard { grid-template-columns: minmax(320px,.75fr) minmax(560px,1.25fr); }
  html[data-zz-area="vendor"][data-zz-page="register"] .loginCard > .pad { padding-inline: 30px; }
  .zz-payment-grid { grid-template-columns: minmax(320px,.82fr) minmax(480px,1.18fr); }
}

@media (max-width: 920px) {
  html[data-zz-area="vendor"][data-zz-page="register"] .loginWrap { padding: 20px; }
  html[data-zz-area="vendor"][data-zz-page="register"] .loginCard { grid-template-columns: minmax(0,1fr); width: min(760px,100%); min-height: 0; }
  html[data-zz-area="vendor"][data-zz-page="register"] .loginHero { min-height: 0; padding: 28px; }
  .zz-seller-hero-copy { margin-top: 35px; }
  .zz-seller-hero-copy h2 { font-size: 36px; }
  .zz-seller-benefits { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .zz-seller-benefits > div { grid-template-columns: 34px minmax(0,1fr); }
  .zz-seller-benefits small { display: none; }
  .zz-seller-progress { margin-top: 24px; }
  html[data-zz-area="vendor"][data-zz-page="register"] .loginCard > .pad { padding: 30px; }
  .zz-payment-grid { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 680px) {
  html[data-zz-area="vendor"][data-zz-page="register"] .loginWrap { padding: 10px; }
  html[data-zz-area="vendor"][data-zz-page="register"] .loginCard { border-radius: 18px; }
  html[data-zz-area="vendor"][data-zz-page="register"] .loginHero { padding: 23px; }
  .zz-seller-hero-copy { margin-top: 28px; }
  .zz-seller-hero-copy h2 { font-size: 32px; }
  .zz-seller-benefits { grid-template-columns: minmax(0,1fr); gap: 7px; }
  .zz-seller-benefits > div { min-height: 55px; }
  .zz-seller-progress { gap: 5px; }
  .zz-seller-progress span { font-size: 8px; }
  html[data-zz-area="vendor"][data-zz-page="register"] .loginCard > .pad { padding: 24px 18px 27px; }
  html[data-zz-area="vendor"][data-zz-page="register"] .zz-auth-heading h1 { font-size: 27px; }
  .zz-form-section { padding: 15px; }
  .zz-form-actions { display: grid; grid-template-columns: minmax(0,1fr); }
  html[data-zz-area="vendor"][data-zz-page="register"] .zz-form-actions .btn { width: 100% !important; justify-content: center; }

  .zz-payment-wrap { width: min(100% - 24px, 620px); padding-top: 14px; }
  .zz-payment-top { margin-bottom: 12px; }
  .zz-payment-hero { display: block; min-height: 0; padding: 24px 20px; border-radius: 17px; }
  .zz-payment-security { margin-top: 18px; }
  .zz-payment-grid { gap: 12px; margin-top: 12px; }
  .zz-payment-grid > .card { border-radius: 16px; }
  .zz-provider-choices { gap: 6px; }
  .zz-provider-choices button { grid-template-columns: minmax(0,1fr); place-items: center; min-height: 78px; text-align: center; }
  .zz-provider-choices button > span { grid-row: auto; width: 30px; height: 30px; }
  .zz-provider-choices small { display: none; }
  .zz-payment-process { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .zz-payment-process > i { display: none; }
  .zz-payment-process > div { display: grid; justify-items: center; text-align: center; }
  .zz-payment-actions { display: grid; }
  .zz-payment-actions .btn { width: 100%; justify-content: center; }
}

/* Canonical Zimbazon identity — supplied production logo across every surface. */
:root {
  --zz-logo-primary: url('../brand/zimbazon-logo-primary-v1.png');
  --zz-logo-white: url('../brand/zimbazon-logo-white-v1.png');
}

html[data-zz-area="marketplace"] .siteHeader .brand img {
  content: var(--zz-logo-white);
  width: 108px;
  height: 70px;
  max-width: 108px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 7px 14px rgba(0,0,0,.22));
}

html[data-zz-area="marketplace"] .siteHeader .brandCopy strong { display: none; }
html[data-zz-area="marketplace"] .siteHeader .brandCopy span {
  display: block;
  max-width: 112px;
  color: #c9d8e8;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
}

html[data-zz-area="marketplace"] .drawerHeader img {
  content: var(--zz-logo-primary);
  width: 118px;
  height: 82px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

html[data-zz-area="marketplace"] .zz-footer-brand::before {
  content: "";
  display: block;
  width: 158px;
  height: 112px;
  margin: -18px 0 6px;
  background: var(--zz-logo-white) left center / contain no-repeat;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
}
html[data-zz-area="marketplace"] .zz-footer-brand > strong { display: none; }

html[data-zz-area="admin"] .sidebar .brand,
html[data-zz-area="vendor"] .sidebar .brand {
  gap: 10px;
  min-height: 82px;
  align-items: center;
}
html[data-zz-area="admin"] .sidebar .logo,
html[data-zz-area="vendor"] .sidebar .logo {
  flex: 0 0 110px;
  width: 110px;
  height: 78px;
  border: 0;
  border-radius: 0;
  background: var(--zz-logo-white) center / contain no-repeat;
  filter: drop-shadow(0 7px 14px rgba(0,0,0,.2));
}
html[data-zz-area="admin"] .sidebar .brand > div:last-child,
html[data-zz-area="vendor"] .sidebar .brand > div:last-child {
  max-width: 82px;
  color: #d9e5f2;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html[data-zz-area="admin"] .loginHero .logo,
html[data-zz-area="vendor"] .loginHero .logo,
html[data-zz-page="login"] .hero .logo,
html[data-zz-page="register"] .hero .logo {
  width: 122px;
  height: 88px;
  border: 0;
  border-radius: 0;
  background: var(--zz-logo-white) center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 9px 18px rgba(0,0,0,.24));
}

html[data-zz-area="vendor"][data-zz-page="register"] .loginHero .logo {
  width: 122px;
  height: 88px;
  border: 0;
  border-radius: 0;
  background: var(--zz-logo-white) center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 9px 18px rgba(0,0,0,.24));
}

html[data-zz-area="courier"] .brand img,
html[data-zz-area="client"] header .brand img,
html[data-zz-page="trust"] header .brand img {
  content: var(--zz-logo-white);
  width: 104px;
  height: 74px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  filter: drop-shadow(0 7px 15px rgba(0,0,0,.22));
}

html[data-zz-area="courier"] .logoPreview {
  object-fit: contain;
  background: #fff;
}

.zz-payment-brand { min-width: 220px; }
.zz-payment-brand img {
  width: 104px;
  height: 74px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  box-shadow: none;
}

html[data-zz-page="forgot-password"] .head img {
  width: 126px;
  height: 90px;
  object-fit: contain;
}

@media (max-width: 760px) {
  html[data-zz-area="marketplace"] .siteHeader .brand img {
    width: 84px;
    height: 60px;
    max-width: 84px;
  }
  html[data-zz-area="marketplace"] .siteHeader .brandCopy { display: none; }
  html[data-zz-area="admin"] .sidebar .logo,
  html[data-zz-area="vendor"] .sidebar .logo { width: 96px; height: 68px; flex-basis: 96px; }
  html[data-zz-area="admin"] .sidebar .brand > div:last-child,
  html[data-zz-area="vendor"] .sidebar .brand > div:last-child { display: none; }
  .zz-payment-brand { min-width: 0; }
  .zz-payment-brand img { width: 86px; height: 62px; }
}

/* ================================================================
   Premium portal unification
   The four role dashboards now share one 1600px workspace language.
   ================================================================ */

.portalEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--zz-blue-600);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .13em;
  line-height: 1.2;
  text-transform: uppercase;
}
.portalEyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--zz-gold-500);
}

html[data-zz-area="admin"] body,
html[data-zz-area="vendor"] body,
html[data-zz-area="courier"] body,
html[data-zz-area="client"] body {
  background:
    radial-gradient(circle at 92% 5%, rgba(18,103,214,.055), transparent 23rem),
    linear-gradient(180deg, #f5f7fa 0, #fafbfc 34rem, #f7f8fa 100%);
}

html[data-zz-area="admin"] body > .shell,
html[data-zz-area="vendor"] body > .shell,
html[data-zz-area="courier"] .app {
  width: min(100%, var(--zz-content));
  max-width: var(--zz-content);
  margin-inline: auto;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(7,27,53,.025), 0 18px 70px rgba(7,27,53,.05);
}

/* Admin and vendor: stronger hierarchy without changing page behaviour. */
html[data-zz-area="admin"] .sidebar,
html[data-zz-area="vendor"] .sidebar {
  background:
    radial-gradient(circle at 22% 6%, rgba(24,119,255,.18), transparent 17rem),
    linear-gradient(180deg, #061a34 0%, #071b35 58%, #041326 100%);
}
html[data-zz-area="admin"] .sidebar::after,
html[data-zz-area="vendor"] .sidebar::after,
html[data-zz-area="courier"] .app > aside::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, rgba(248,181,27,.62), rgba(255,255,255,.08) 24%, transparent 78%);
  pointer-events: none;
}
html[data-zz-area="admin"] .topbar,
html[data-zz-area="vendor"] .topbar {
  border-color: rgba(215,221,229,.9);
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 32px rgba(7,27,53,.055);
  backdrop-filter: blur(18px);
}
html[data-zz-area="admin"][data-zz-page="admin"] .grid > .card:nth-child(-n+4),
html[data-zz-area="vendor"][data-zz-page="vendor"] .grid > .card:nth-child(-n+4) {
  position: relative;
  overflow: hidden;
  border-color: #e2e7ee;
  background: linear-gradient(145deg, #fff 10%, #fbfdff 100%);
  box-shadow: 0 12px 30px rgba(7,27,53,.06);
}
html[data-zz-area="admin"][data-zz-page="admin"] .grid > .card:nth-child(-n+4)::before,
html[data-zz-area="vendor"][data-zz-page="vendor"] .grid > .card:nth-child(-n+4)::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--zz-gold-400), #e79d00);
}
html[data-zz-area="admin"] .card,
html[data-zz-area="vendor"] .card {
  border-color: #e3e7ed;
  box-shadow: 0 10px 28px rgba(7,27,53,.05);
}

/* Courier: full premium operational shell, navigation and data panels. */
html[data-zz-area="courier"][data-zz-page="courier"] .app {
  grid-template-columns: 278px minmax(0, 1fr);
  min-height: 100vh;
}
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside {
  position: sticky;
  top: 0;
  z-index: 60;
  width: auto;
  height: 100vh;
  padding: 25px 18px 22px;
  overflow-y: auto;
  border: 0;
  background:
    radial-gradient(circle at 20% 7%, rgba(22,119,255,.22), transparent 16rem),
    linear-gradient(180deg, #061a34 0%, #071b35 62%, #041326 100%);
  box-shadow: none;
}
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .brand {
  min-height: 84px;
  margin: 0 4px 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: #fff;
  text-decoration: none;
}
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .brand img {
  flex: 0 0 108px;
  width: 108px;
  height: 76px;
}
html[data-zz-area="courier"] .brandText {
  display: grid;
  gap: 3px;
  min-width: 0;
}
html[data-zz-area="courier"] .brandText strong { color: #fff; font-size: 13px; font-weight: 700; line-height: 1.25; }
html[data-zz-area="courier"] .brandText small { color: #91a5bc; font-size: 10px; font-weight: 550; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; }
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .nav {
  display: grid;
  gap: 5px;
}
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .nav::before {
  content: "Workspace";
  padding: 0 12px 7px;
  color: #71869e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .nav button,
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .logout {
  justify-content: flex-start;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #c7d4e2;
  font-size: 14px;
  font-weight: 520;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .nav button::before,
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .logout::before {
  content: "";
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E") center / 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E") center / 16px no-repeat;
}
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .nav button[data-tab="shipments"]::before,
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .nav button[data-tab="vehicles"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h13v11H3zM16 10h3l2 3v4h-5z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h13v11H3zM16 10h3l2 3v4h-5z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
}
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .nav button[data-tab="profile"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .nav button[data-tab="notifications"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M10 21h4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M10 21h4'/%3E%3C/svg%3E");
}
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .nav button[data-tab="integration"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.1.1l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.1-.1l-2 2A5 5 0 0 0 12 20l1.1-1.1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.1.1l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.1-.1l-2 2A5 5 0 0 0 12 20l1.1-1.1'/%3E%3C/svg%3E");
}
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .nav button[data-tab="trust"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4v5c0 5-3.4 8.2-8 9-4.6-.8-8-4-8-9V7z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4v5c0 5-3.4 8.2-8 9-4.6-.8-8-4-8-9V7z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E");
}
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .nav button:hover {
  border-color: rgba(255,255,255,.09);
  background: rgba(255,255,255,.07);
  color: #fff;
  transform: translateX(2px);
}
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .nav button.active {
  border-color: rgba(248,181,27,.28);
  background: linear-gradient(90deg, rgba(248,181,27,.21), rgba(248,181,27,.07));
  color: var(--zz-gold-400);
  box-shadow: inset 3px 0 0 var(--zz-gold-500);
}
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .navCount { margin-left: auto; }
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .logout {
  width: 100%;
  margin-top: auto;
  color: #f3a6ad;
}
html[data-zz-area="courier"][data-zz-page="courier"] .app > main {
  min-width: 0;
  max-width: 100%;
  padding: 27px 32px 52px;
}
html[data-zz-area="courier"][data-zz-page="courier"] .app > main > * { min-width: 0; max-width: 100%; }
html[data-zz-area="courier"][data-zz-page="courier"] .top {
  position: relative;
  min-height: 92px;
  margin-bottom: 22px;
  padding: 17px 18px 17px 23px;
  overflow: hidden;
  border: 1px solid #dfe4eb;
  border-radius: 17px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 32px rgba(7,27,53,.055);
  backdrop-filter: blur(18px);
}
html[data-zz-area="courier"][data-zz-page="courier"] .top::after {
  content: "";
  position: absolute;
  right: -48px;
  top: -70px;
  width: 210px;
  height: 210px;
  border: 38px solid rgba(18,103,214,.045);
  border-radius: 50%;
  pointer-events: none;
}
html[data-zz-area="courier"] .topCopy { position: relative; z-index: 1; }
html[data-zz-area="courier"] .top h1 { margin-top: 5px; font-size: 31px; line-height: 1.12; }
html[data-zz-area="courier"] .top p { margin-top: 5px; }
html[data-zz-area="courier"] .topActions { position: relative; z-index: 1; }
html[data-zz-area="courier"] .topActions .pill {
  min-height: 44px;
  padding: 11px 14px;
  border-color: #dce3eb;
  background: #f8fafc;
  color: #32445c;
  font-size: 13px;
}
html[data-zz-area="courier"] .grid { gap: 17px; }
html[data-zz-area="courier"] .card {
  border-color: #e1e6ed;
  background: rgba(255,255,255,.98);
  box-shadow: 0 11px 30px rgba(7,27,53,.055);
}
html[data-zz-area="courier"] .card > .head {
  border-color: #e9ecf1;
  background: linear-gradient(180deg, #fff, #fcfdfe);
}
html[data-zz-area="courier"] .card > .head h2 { color: var(--zz-navy-950); font-size: 17px; font-weight: 650; }
html[data-zz-area="courier"] .stat {
  position: relative;
  min-height: 142px;
  overflow: hidden;
  border-top: 3px solid var(--zz-gold-500);
  background: linear-gradient(145deg, #fff, #f9fbfe);
}
html[data-zz-area="courier"] .stat::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 20px;
  width: 38px;
  height: 38px;
  border: 8px solid rgba(18,103,214,.08);
  border-radius: 12px;
  transform: rotate(12deg);
}
html[data-zz-area="courier"] .stat > .muted { color: #516176; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
html[data-zz-area="courier"] .stat b { margin-top: 16px; font-size: 34px; }
html[data-zz-area="courier"] #readiness p {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--zz-line);
  color: #66758a;
  font-size: 13px;
}
html[data-zz-area="courier"] #readiness p:last-child { border-bottom: 0; }
html[data-zz-area="courier"] #readiness p b { color: var(--zz-navy-950); font-weight: 650; text-align: right; text-transform: capitalize; }

/* Client: premium buyer dashboard instead of the old utility-card page. */
html[data-zz-area="client"][data-zz-page="client"] .clientHeader {
  position: sticky;
  top: 0;
  z-index: 70;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(circle at 12% -90%, rgba(22,119,255,.38), transparent 22rem),
    linear-gradient(90deg, #041429, #071d39 58%, #06172d);
  box-shadow: 0 12px 34px rgba(3,16,34,.2);
}
html[data-zz-area="client"][data-zz-page="client"] .clientHeader .wrap {
  min-height: 92px;
  padding-block: 9px;
}
html[data-zz-area="client"] .clientHeader .brand { gap: 12px; }
html[data-zz-area="client"] .clientHeader .brand img { width: 112px; height: 76px; }
html[data-zz-area="client"] .brandText { display: grid; gap: 2px; }
html[data-zz-area="client"] .brandText strong { color: #fff; font-size: 14px; font-weight: 700; line-height: 1.25; }
html[data-zz-area="client"] .brandText small { color: #94a9bf; font-size: 10px; font-weight: 550; letter-spacing: .06em; text-transform: uppercase; }
html[data-zz-area="client"] .clientNav { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
html[data-zz-area="client"] .clientNav .btn {
  min-height: 41px;
  padding: 9px 13px;
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
  color: #dce6f0;
  font-size: 12px;
  box-shadow: none;
}
html[data-zz-area="client"] .clientNav .btn:hover { border-color: rgba(248,181,27,.48); background: rgba(248,181,27,.1); color: var(--zz-gold-400); }
html[data-zz-area="client"] .clientNav .btn.danger { border-color: rgba(239,51,64,.3) !important; background: rgba(239,51,64,.1) !important; color: #ffb2b8 !important; }
html[data-zz-area="client"][data-zz-page="client"] main.wrap { padding-top: 26px; }
html[data-zz-area="client"] .clientHero {
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(280px,.55fr);
  align-items: stretch;
  gap: 34px;
  min-height: 260px;
  padding: 38px 40px;
  overflow: hidden;
  border-color: rgba(248,181,27,.23);
  background:
    radial-gradient(circle at 78% 25%, rgba(18,103,214,.3), transparent 22rem),
    radial-gradient(circle at 98% 120%, rgba(248,181,27,.14), transparent 22rem),
    linear-gradient(130deg, #04162e, #082d55 70%, #073c4c);
  box-shadow: 0 20px 48px rgba(5,25,48,.15);
}
html[data-zz-area="client"] .clientHero .portalEyebrow { color: var(--zz-gold-400); }
html[data-zz-area="client"] .clientHero .portalEyebrow::before { background: #fff; opacity: .62; }
html[data-zz-area="client"] .heroCopy { align-self: center; }
html[data-zz-area="client"] .clientHero h1 { margin: 10px 0 0; font-size: clamp(32px,4vw,45px); font-weight: 650; line-height: 1.08; }
html[data-zz-area="client"] .clientHero p { max-width: 680px; margin: 13px 0 0; font-size: 15px; line-height: 1.65; }
html[data-zz-area="client"] .heroActions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 23px; }
html[data-zz-area="client"] .heroActions .heroSecondary { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; }
html[data-zz-area="client"] .heroAssurance {
  position: relative;
  display: grid;
  align-content: center;
  gap: 0;
  padding: 13px 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 15px;
  background: rgba(255,255,255,.075);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
html[data-zz-area="client"] .heroAssurance::before {
  content: "Shop with confidence";
  padding-bottom: 10px;
  color: var(--zz-gold-400);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
html[data-zz-area="client"] .heroAssurance span { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.1); color: #c2d1e0; font-size: 12px; }
html[data-zz-area="client"] .heroAssurance b { color: #fff; font-weight: 650; }
html[data-zz-area="client"] .portalSectionHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin: 31px 2px 17px;
}
html[data-zz-area="client"] .portalSectionHead h2 { margin: 5px 0 0; color: var(--zz-navy-950); font-size: 25px; font-weight: 650; letter-spacing: -.025em; }
html[data-zz-area="client"] .portalSectionHead p { max-width: 470px; margin: 0; color: var(--zz-muted); font-size: 13px; text-align: right; }
html[data-zz-area="client"] .dashboardGrid {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 17px;
  margin-top: 0;
}
html[data-zz-area="client"] .dashboardGrid > .card {
  padding: 25px;
  border-color: #e1e6ed;
  background: #fff;
  box-shadow: 0 11px 30px rgba(7,27,53,.055);
}
html[data-zz-area="client"] .portalAction {
  position: relative;
  grid-column: span 4;
  min-height: 235px;
  overflow: hidden;
  border-top: 3px solid var(--zz-gold-500) !important;
  background: linear-gradient(145deg,#fff,#fafcff) !important;
}
html[data-zz-area="client"] .portalAction::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -38px;
  width: 125px;
  height: 125px;
  border: 24px solid rgba(18,103,214,.045);
  border-radius: 50%;
}
html[data-zz-area="client"] .portalCardIcon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border: 1px solid #d8e6f7;
  border-radius: 11px;
  background: #edf5ff;
  color: var(--zz-blue-600);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .05em;
}
html[data-zz-area="client"] .portalAction h2 { margin-bottom: 7px; }
html[data-zz-area="client"] .portalAction .muted { max-width: 330px; min-height: 59px; margin-bottom: 18px; }
html[data-zz-area="client"] .portalAction .btn { position: relative; z-index: 1; }
html[data-zz-area="client"] .accountCard { grid-column: span 5; }
html[data-zz-area="client"] .passwordCard { grid-column: span 7; }
html[data-zz-area="client"] .cardTitle { padding-bottom: 17px; border-bottom: 1px solid var(--zz-line); }
html[data-zz-area="client"] .cardTitle h2 { margin: 5px 0 0; font-size: 21px; }
html[data-zz-area="client"] .cardTitle .muted { min-height: 0; margin: 6px 0 0; font-size: 13px; }
html[data-zz-area="client"] .clientForm,
html[data-zz-area="client"] .passwordGrid { display: grid; gap: 14px; margin: 18px 0; }
html[data-zz-area="client"] .clientForm { grid-template-columns: repeat(2,minmax(0,1fr)); }
html[data-zz-area="client"] .passwordGrid { grid-template-columns: repeat(3,minmax(0,1fr)); }
html[data-zz-area="client"] .clientForm label,
html[data-zz-area="client"] .passwordGrid label { display: grid; gap: 7px; margin: 0; color: #32445c; font-size: 13px; font-weight: 600; }
html[data-zz-area="client"] .clientForm input,
html[data-zz-area="client"] .passwordGrid input { background: #fbfcfe; }
html[data-zz-area="client"] .msg:not(:empty) { padding: 10px 12px; border-radius: 9px; background: #edf9f2; color: #087447; font-size: 13px; }

@media (max-width: 1100px) {
  html[data-zz-area="client"] .clientHero { grid-template-columns: minmax(0,1.25fr) minmax(250px,.75fr); }
  html[data-zz-area="client"] .accountCard,
  html[data-zz-area="client"] .passwordCard { grid-column: span 12; }
}

@media (max-width: 980px) {
  html[data-zz-area="courier"][data-zz-page="courier"] .app { grid-template-columns: minmax(0,1fr); }
  html[data-zz-area="courier"][data-zz-page="courier"] .app > aside {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 90;
    display: flex;
    width: min(310px,86vw);
    height: 100vh;
    padding: 23px 18px;
    transform: translateX(-104%);
    transition: transform .22s ease;
    box-shadow: 22px 0 55px rgba(3,16,34,.3);
  }
  html[data-zz-area="courier"].zz-sidebar-open .app > aside { transform: translateX(0); }
  html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .brand span { display: grid; }
  html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .nav { display: grid; overflow: visible; }
  html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .nav button { width: 100%; }
  html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .logout { margin-top: auto; }
  html[data-zz-area="courier"] .zz-portal-menu { display: inline-flex; }
  html[data-zz-area="client"] .clientHeader .top { flex-wrap: nowrap; }
  html[data-zz-area="client"] .clientNav { flex-wrap: nowrap; max-width: 62vw; overflow-x: auto; scrollbar-width: none; }
  html[data-zz-area="client"] .clientNav::-webkit-scrollbar { display: none; }
  html[data-zz-area="client"] .clientNav .btn { flex: 0 0 auto; }
  html[data-zz-area="client"] .clientHero { grid-template-columns: minmax(0,1fr); }
  html[data-zz-area="client"] .heroAssurance { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
  html[data-zz-area="client"] .heroAssurance::before { grid-column: 1/-1; }
  html[data-zz-area="client"] .heroAssurance span { border-top: 1px solid rgba(255,255,255,.1); }
  html[data-zz-area="client"] .portalAction { grid-column: span 12; min-height: 0; }
}

@media (max-width: 720px) {
  html[data-zz-area="admin"] .main,
  html[data-zz-area="vendor"] .main,
  html[data-zz-area="courier"][data-zz-page="courier"] .app > main { padding: 14px 12px 38px; }
  html[data-zz-area="courier"] .top { align-items: flex-start; padding: 15px; }
  html[data-zz-area="courier"] .top h1 { font-size: 27px; }
  html[data-zz-area="courier"] .topActions { width: 100%; }
  html[data-zz-area="courier"] .topActions .pill { max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-zz-area="client"] .wrap { width: min(680px, calc(100% - 24px)); }
  html[data-zz-area="client"] .clientHeader .wrap { width: calc(100% - 20px); flex-wrap: wrap; }
  html[data-zz-area="client"] .clientHeader .brand img { width: 84px; height: 59px; }
  html[data-zz-area="client"] .clientHeader .brandText { display: none; }
  html[data-zz-area="client"] .clientNav { width: 100%; max-width: none; min-width: 0; padding-bottom: 2px; }
  html[data-zz-area="client"] .clientHero { padding: 27px 23px; }
  html[data-zz-area="client"] .clientHero h1 { font-size: 31px; }
  html[data-zz-area="client"] .heroAssurance { grid-template-columns: minmax(0,1fr); padding: 12px 18px; }
  html[data-zz-area="client"] .heroAssurance::before { grid-column: auto; }
  html[data-zz-area="client"] .portalSectionHead { display: block; margin-top: 25px; }
  html[data-zz-area="client"] .portalSectionHead p { margin-top: 7px; text-align: left; }
  html[data-zz-area="client"] .dashboardGrid > .card { padding: 21px; }
  html[data-zz-area="client"] .clientForm,
  html[data-zz-area="client"] .passwordGrid { grid-template-columns: minmax(0,1fr); }
}

/* ================================================================
   Enterprise authenticated experience
   Structural application shell, purpose-built workspaces and auth.
   ================================================================ */

html[data-zz-area="admin"],
html[data-zz-area="vendor"],
html[data-zz-area="courier"],
html[data-zz-area="client"] {
  --zz-portal-accent: var(--zz-blue-600);
  --zz-portal-accent-soft: #edf5ff;
  --zz-space-1: 8px;
  --zz-space-2: 12px;
  --zz-space-3: 16px;
  --zz-space-4: 20px;
  --zz-space-5: 24px;
  --zz-space-6: 32px;
  --zz-space-7: 40px;
  --zz-space-8: 48px;
}
html[data-zz-area="vendor"] { --zz-portal-accent: var(--zz-green-600); --zz-portal-accent-soft: #eaf8f2; }
html[data-zz-area="admin"][data-zz-page="products"],
html[data-zz-area="admin"][data-zz-page="payments"],
html[data-zz-area="vendor"][data-zz-page="promotions"],
html[data-zz-area="vendor"][data-zz-page="payouts"] { --zz-portal-accent: #b87900; --zz-portal-accent-soft: #fff7e4; }

html[data-zz-area="admin"] body > .shell,
html[data-zz-area="vendor"] body > .shell {
  grid-template-columns: 276px minmax(0, 1fr);
  min-height: 100vh;
}
html[data-zz-area="admin"] .sidebar,
html[data-zz-area="vendor"] .sidebar {
  padding: var(--zz-space-5) var(--zz-space-3) var(--zz-space-4);
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
html[data-zz-area="admin"] .sidebar .brand,
html[data-zz-area="vendor"] .sidebar .brand {
  gap: var(--zz-space-2);
  min-height: 88px;
  margin: 0 4px var(--zz-space-2);
  padding-bottom: var(--zz-space-3);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
html[data-zz-area="admin"] .sidebar .brand > div:last-child,
html[data-zz-area="vendor"] .sidebar .brand > div:last-child {
  max-width: 90px;
  color: #eef5fb;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: .11em;
}
html[data-zz-area="admin"] .sideMeta,
html[data-zz-area="vendor"] .sideMeta {
  min-height: 60px;
  margin: 0 6px var(--zz-space-3);
  padding: var(--zz-space-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: #9fb1c4;
  font-size: 12px;
  line-height: 1.5;
}
html[data-zz-area="admin"] .sideMeta b,
html[data-zz-area="vendor"] .sideMeta b { color: #fff; font-weight: 600; }

html[data-zz-area="admin"] .nav,
html[data-zz-area="vendor"] .nav { display: flex; flex-direction: column; gap: 3px; }
html[data-zz-area="admin"] .zz-nav-group,
html[data-zz-area="vendor"] .zz-nav-group {
  display: block;
  margin: var(--zz-space-3) 12px 5px;
  color: #6f859d;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}
html[data-zz-area="admin"] .zz-nav-group:first-child,
html[data-zz-area="vendor"] .zz-nav-group:first-child { margin-top: 2px; }
html[data-zz-area="admin"] .nav a,
html[data-zz-area="vendor"] .nav a {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 43px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 13px;
  text-decoration: none;
}
html[data-zz-area="admin"] .nav a::before,
html[data-zz-area="vendor"] .nav a::before { display: none !important; }
html[data-zz-area="admin"] .zz-nav-icon,
html[data-zz-area="vendor"] .zz-nav-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.055);
  color: #9eb2c7;
  margin-left: 0 !important;
}
html[data-zz-area="admin"] .zz-nav-icon svg,
html[data-zz-area="vendor"] .zz-nav-icon svg { width: 16px; height: 16px; }
html[data-zz-area="admin"] .zz-nav-label,
html[data-zz-area="vendor"] .zz-nav-label { overflow: hidden; margin-left: 0 !important; color: inherit !important; font-size: 13px !important; font-weight: 550 !important; text-overflow: ellipsis; white-space: nowrap; }
html[data-zz-area="admin"] .zz-nav-meta,
html[data-zz-area="vendor"] .zz-nav-meta { margin-left: auto !important; color: #72879f !important; font-size: 9px !important; font-weight: 600; letter-spacing: .02em; }
html[data-zz-area="admin"] .nav a:hover .zz-nav-icon,
html[data-zz-area="vendor"] .nav a:hover .zz-nav-icon { color: #fff; background: rgba(255,255,255,.09); }
html[data-zz-area="admin"] .nav a.active,
html[data-zz-area="vendor"] .nav a.active {
  border-color: rgba(248,181,27,.38);
  background: linear-gradient(100deg, rgba(248,181,27,.2), rgba(248,181,27,.055));
  box-shadow: inset 3px 0 0 var(--zz-gold-500), 0 8px 20px rgba(0,0,0,.08);
}
html[data-zz-area="admin"] .nav a.active .zz-nav-icon,
html[data-zz-area="vendor"] .nav a.active .zz-nav-icon { border-color: rgba(248,181,27,.3); background: rgba(248,181,27,.13); color: var(--zz-gold-400); }

.zz-sidebar-support {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  margin: auto 4px var(--zz-space-2);
  padding: 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(7,134,93,.18), rgba(255,255,255,.035));
  color: #d5e4ef;
  text-decoration: none;
}
.zz-sidebar-support > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(7,134,93,.24); color: #7ce0b8; }
.zz-sidebar-support svg { width: 17px; height: 17px; }
.zz-sidebar-support > span:last-child { display: grid; gap: 1px; }
.zz-sidebar-support strong { font-size: 11px; font-weight: 650; }
.zz-sidebar-support small { color: #8fa5ba; font-size: 9px; }
.zz-sidebar-logout { margin-top: 0 !important; }
.zz-sidebar-logout .btn { width: 100%; min-height: 40px; padding: 8px 12px; border-color: rgba(239,51,64,.24) !important; background: rgba(239,51,64,.09) !important; color: #ffafb5 !important; font-size: 12px; box-shadow: none !important; }

html[data-zz-area="admin"] .main,
html[data-zz-area="vendor"] .main {
  width: 100%;
  max-width: 1324px;
  padding: var(--zz-space-5) var(--zz-space-6) var(--zz-space-8);
  background: transparent;
}
html[data-zz-area="admin"] .zz-command-bar,
html[data-zz-area="vendor"] .zz-command-bar {
  position: sticky;
  top: 12px;
  z-index: 45;
  display: flex;
  gap: var(--zz-space-2);
  min-height: 76px;
  margin-bottom: var(--zz-space-5);
  padding: 11px 12px 11px 16px;
  border-color: rgba(215,221,229,.86);
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 32px rgba(7,27,53,.06);
  backdrop-filter: blur(18px);
}
html[data-zz-area="admin"] .zz-command-bar .search,
html[data-zz-area="vendor"] .zz-command-bar .search { position: relative; min-width: min(400px,38vw); }
html[data-zz-area="admin"] .zz-command-bar .search::before,
html[data-zz-area="vendor"] .zz-command-bar .search::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 15px;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 1.8px solid #718096;
  border-radius: 50%;
  transform: translateY(-58%);
  pointer-events: none;
}
html[data-zz-area="admin"] .zz-command-bar .search::after,
html[data-zz-area="vendor"] .zz-command-bar .search::after { content: ""; position: absolute; z-index: 1; left: 29px; top: 31px; width: 6px; height: 1.5px; background: #718096; transform: rotate(45deg); pointer-events: none; }
html[data-zz-area="admin"] .zz-command-bar .search input,
html[data-zz-area="vendor"] .zz-command-bar .search input { padding-left: 43px; border-color: #e5e9ef; background: #f7f9fb; }
.zz-role-context {
  display: grid;
  grid-template-columns: 36px auto;
  gap: 9px;
  align-items: center;
  min-width: 178px;
  margin-left: auto;
  padding: 6px 9px;
  border-left: 1px solid var(--zz-line);
}
.zz-role-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--zz-portal-accent-soft); color: var(--zz-portal-accent); }
.zz-role-mark svg { width: 18px; height: 18px; }
.zz-role-context > span:last-child { display: grid; }
.zz-role-context strong { color: var(--zz-navy-950); font-size: 12px; font-weight: 650; }
.zz-role-context small { color: var(--zz-muted); font-size: 9px; }

html[data-zz-area="admin"] .zz-purpose-head,
html[data-zz-area="vendor"] .zz-purpose-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--zz-space-5);
  min-height: 96px;
  margin: 0 0 var(--zz-space-5);
  padding: 0 2px var(--zz-space-4);
  border-bottom: 1px solid #dfe4eb;
}
.zz-page-eyebrow,
.zz-panel-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--zz-portal-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}
html[data-zz-area="admin"] .zz-purpose-head h1,
html[data-zz-area="vendor"] .zz-purpose-head h1 { margin: 0; font-size: 32px; font-weight: 650; line-height: 1.08; }
html[data-zz-area="admin"] .zz-purpose-head p,
html[data-zz-area="vendor"] .zz-purpose-head p { max-width: 760px; margin: 8px 0 0; color: #5e6d81; line-height: 1.55; }
.zz-page-context { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 8px 11px; border: 1px solid #dce3ea; border-radius: 999px; background: #fff; color: #526176; font-size: 11px; white-space: nowrap; }
.zz-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--zz-green-600); box-shadow: 0 0 0 4px rgba(7,134,93,.1); }

/* Purpose-built operational workspaces */
.zz-workspace-grid { gap: var(--zz-space-4) !important; }
.zz-workspace-card {
  overflow: hidden;
  border: 1px solid #e0e5eb !important;
  border-radius: 14px !important;
  background: #fff;
  box-shadow: 0 8px 24px rgba(7,27,53,.045) !important;
}
.zz-workspace-card > .pad:first-child { padding: var(--zz-space-4) var(--zz-space-5); border-bottom-color: #e7ebf0 !important; }
.zz-workspace-card > .pad:first-child h3,
.zz-workspace-card > .pad:first-child strong { color: var(--zz-navy-950) !important; font-size: 16px; font-weight: 650; }
.zz-data-workspace { box-shadow: 0 10px 28px rgba(7,27,53,.055) !important; }
.zz-primary-workspace { position: relative; }
.zz-primary-workspace::before { content: ""; position: absolute; z-index: 2; inset: 0 auto 0 0; width: 3px; background: var(--zz-portal-accent); }
.zz-workspace-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--zz-space-4); border-bottom: 1px solid var(--zz-line); }
.zz-workspace-heading h2 { margin: 0; color: var(--zz-navy-950); font-size: 18px; font-weight: 650; }
.zz-workspace-heading p { margin: 4px 0 0; color: var(--zz-muted); font-size: 12px; }
.zz-workspace-state { display: inline-flex; align-items: center; gap: 7px; color: #536276; font-size: 10px; white-space: nowrap; }
.zz-workspace-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--zz-green-600); }
.zz-premium-table { position: relative; overflow: auto; scrollbar-color: #c9d2dc transparent; }
.zz-premium-table table { min-width: 720px; }
.zz-premium-table th {
  height: 44px;
  padding: 11px 14px;
  border-bottom-color: #dde3ea;
  background: #f7f9fb;
  color: #526176;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.zz-premium-table td { height: 58px; padding: 12px 14px; color: #26384f; font-size: 13px; }
.zz-premium-table tbody tr:nth-child(even) td { background: #fcfdfe; }
.zz-premium-table tbody tr:hover td { background: #f4f8fc; }
.zz-premium-table .zz-numeric { font-variant-numeric: tabular-nums; text-align: right; }
.zz-premium-table .actions { flex-wrap: nowrap; }
.zz-premium-table .btn { min-height: 34px; padding: 7px 10px; border-radius: 8px; font-size: 11px; white-space: nowrap; }

/* Page-specific composition: same system, different operational purpose. */
html[data-zz-area="admin"][data-zz-page="vendors"] .zz-primary-workspace,
html[data-zz-area="admin"][data-zz-page="couriers"] .zz-primary-workspace { border-top: 3px solid var(--zz-green-600) !important; }
html[data-zz-area="admin"][data-zz-page="products"] .zz-primary-workspace { border-top: 3px solid var(--zz-gold-500) !important; }
html[data-zz-area="admin"][data-zz-page="payments"] .zz-primary-workspace,
html[data-zz-area="vendor"][data-zz-page="payouts"] .panel.active { border-top: 3px solid var(--zz-gold-500) !important; }
html[data-zz-area="admin"][data-zz-page="audit"] .zz-premium-table td:nth-child(1),
html[data-zz-area="admin"][data-zz-page="audit"] .zz-premium-table td:nth-child(5) { color: #55657a; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
html[data-zz-area="admin"][data-zz-page="config"] .zz-form-workspace { background: linear-gradient(145deg,#fff,#fbfcfe); }
html[data-zz-area="admin"][data-zz-page="config"] .row2 > div,
html[data-zz-area="vendor"][data-zz-page="profile"] .formGrid > div,
html[data-zz-area="vendor"][data-zz-page="profile"] .row2 > div { padding: 12px; border: 1px solid #e8ebf0; border-radius: 11px; background: #fbfcfd; }
html[data-zz-page="warehouses"] .zz-workspace-grid-1 { align-items: start; }
html[data-zz-page="warehouses"] .zz-workspace-grid-1 > .zz-workspace-card:last-child { border-top: 3px solid var(--zz-blue-600) !important; }
html[data-zz-page="returns"] .zz-workspace-grid-1 > .zz-workspace-card:nth-child(2) { border-top: 3px solid var(--zz-gold-500) !important; background: linear-gradient(145deg,#fff,#fffaf0); }
html[data-zz-page="trust"] #cards,
html[data-zz-page="orders"] #cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--zz-space-3); margin-bottom: var(--zz-space-4); }
html[data-zz-page="trust"] #cards > .card,
html[data-zz-page="orders"] #cards > .card { grid-column: auto !important; border: 1px solid #e1e6ec; border-top: 3px solid var(--zz-portal-accent); box-shadow: 0 8px 22px rgba(7,27,53,.045); }

/* Admin command centre */
html[data-zz-area="admin"][data-zz-page="admin"] .zz-purpose-head {
  min-height: 132px;
  padding: var(--zz-space-5) var(--zz-space-6);
  overflow: hidden;
  border: 1px solid rgba(248,181,27,.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 10%, rgba(22,119,255,.25), transparent 20rem),
    linear-gradient(125deg,#04172f,#082b50 72%,#073b4b);
  box-shadow: 0 16px 36px rgba(4,23,47,.13);
}
html[data-zz-area="admin"][data-zz-page="admin"] .zz-purpose-head h1 { color: #fff; }
html[data-zz-area="admin"][data-zz-page="admin"] .zz-purpose-head p { color: #c3d2e1; }
html[data-zz-area="admin"][data-zz-page="admin"] .zz-page-eyebrow { color: var(--zz-gold-400); }
html[data-zz-area="admin"][data-zz-page="admin"] .zz-page-context { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #d9e5ef; }
.zz-admin-command-grid,
.zz-vendor-command-grid { gap: var(--zz-space-4) !important; }
.zz-executive-metric {
  position: relative;
  min-height: 148px;
  overflow: hidden;
  border: 1px solid #dfe5ec !important;
  border-top: 3px solid var(--zz-portal-accent) !important;
  background: linear-gradient(145deg,#fff,#f9fbfd) !important;
  box-shadow: 0 10px 26px rgba(7,27,53,.055) !important;
}
.zz-executive-metric::before { display: none !important; }
.zz-executive-metric::after { content: ""; position: absolute; right: -25px; top: -28px; width: 90px; height: 90px; border: 18px solid color-mix(in srgb, var(--zz-portal-accent) 8%, transparent); border-radius: 50%; }
.zz-executive-metric .kpi { min-height: 145px !important; padding: var(--zz-space-4) !important; }
.zz-executive-metric .kpi .label { color: #526176 !important; font-size: 10px !important; font-weight: 650; letter-spacing: .08em; }
.zz-executive-metric .kpi .value { margin-top: 12px; font-size: 30px !important; font-weight: 650; }
.zz-executive-metric .kpi .sub { max-width: 210px; margin-top: 9px; color: #718096; font-size: 11px; line-height: 1.4; }
.zz-attention-panel { border: 1px solid #efdba9 !important; background: linear-gradient(145deg,#fffdf8,#fff8e9) !important; }
.zz-attention-panel > .pad:first-child { background: rgba(248,181,27,.075); }
.zz-attention-panel #queue { color: #34465c; font-size: 12px; line-height: 1.55; }
.zz-attention-panel #queue strong { color: #8a5c00; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.zz-intelligence-panel { background: #fff; }
.zz-intelligence-panel .chartBox { height: 280px; padding: var(--zz-space-3); border-color: #e2e7ed; border-radius: 12px; background: linear-gradient(180deg,#fff,#fbfcfe); }
.zz-intelligence-panel .chartBox canvas { height: 220px; }
.zz-finance-panel { border-left: 3px solid var(--zz-gold-500) !important; }
.zz-health-panel { min-height: 190px; box-shadow: none !important; }
.zz-health-panel:last-child { background: linear-gradient(145deg,#fff,#f3faf7); }

/* Seller control centre */
html[data-zz-area="vendor"][data-zz-page="vendor"] .zz-purpose-head {
  min-height: 118px;
  padding: var(--zz-space-5) var(--zz-space-6);
  border: 1px solid #dbe8e2;
  border-radius: 16px;
  background: linear-gradient(120deg,#fff 0%,#f5fbf8 70%,#edf7f2 100%);
  box-shadow: 0 12px 30px rgba(7,79,55,.06);
}
html[data-zz-area="vendor"][data-zz-page="vendor"] .zz-executive-metric { border-top-color: var(--zz-green-600) !important; }
.zz-business-performance { border-top: 3px solid var(--zz-green-600) !important; }
.zz-business-performance .zz-sales-chart { min-height: 205px; }
.zz-fulfilment-panel { border-top: 3px solid var(--zz-gold-500) !important; }

/* Premium authentication family */
.zz-auth-experience { min-height: 100vh; }
.zz-auth-proof { display: grid; gap: var(--zz-space-2); margin-top: auto; padding-top: var(--zz-space-5); }
.zz-auth-proof > span { display: flex; align-items: center; gap: 10px; color: #d8e5ef; font-size: 11px; }
.zz-auth-proof svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--zz-gold-400); }
.zz-auth-proof b { font-weight: 550; }
html[data-zz-area="admin"][data-zz-page="login"] .loginHero,
html[data-zz-area="vendor"][data-zz-page="login"] .loginHero,
html[data-zz-area="vendor"][data-zz-page="register"] .loginHero {
  background:
    linear-gradient(180deg,rgba(3,18,36,.2),rgba(3,18,36,.82)),
    url('../auth/zimbabwe-shoppers-v1.png') center / cover no-repeat,
    var(--zz-navy-950);
}
html[data-zz-page="login"] body > .shell > .hero,
html[data-zz-page="register"] body > .shell > .hero {
  background:
    linear-gradient(180deg,rgba(3,18,36,.15),rgba(3,18,36,.8)),
    url('../auth/zimbabwe-shoppers-v1.png') center / cover no-repeat,
    var(--zz-navy-950);
}
html[data-zz-page="login"] body > .shell > .hero .zz-auth-proof,
html[data-zz-page="register"] body > .shell > .hero .zz-auth-proof { padding: 24px 0 0; }

html[data-zz-area="courier"][data-zz-page="login"] body { padding: var(--zz-space-6); }
html[data-zz-area="courier"][data-zz-page="login"] body > main.zz-courier-auth-shell {
  display: grid;
  grid-template-columns: minmax(300px,.8fr) minmax(420px,1.2fr);
  width: min(980px,100%);
  max-width: 980px;
  min-height: 590px;
  padding: 0;
  border-top: 0;
  border-radius: 20px;
}
.zz-courier-auth-visual {
  display: flex;
  flex-direction: column;
  min-height: 590px;
  padding: var(--zz-space-6);
  background:
    linear-gradient(180deg,rgba(3,20,39,.12),rgba(3,20,39,.86)),
    url('../auth/zimbabwe-shoppers-v1.png') center / cover no-repeat,
    var(--zz-navy-950);
  color: #fff;
}
.zz-courier-auth-visual > img { width: 132px; height: 90px; object-fit: contain; filter: drop-shadow(0 9px 18px rgba(0,0,0,.25)); }
.zz-courier-auth-visual > div:not(.zz-auth-proof) { margin-top: auto; }
.zz-courier-auth-visual h2 { max-width: 300px; margin: 8px 0; color: #fff; font-size: 31px; font-weight: 650; line-height: 1.1; }
.zz-courier-auth-visual p { max-width: 320px; color: #c5d5e3; font-size: 13px; }
.zz-courier-login-panel { align-self: center; padding: var(--zz-space-7); }
.zz-courier-login-panel > .brand { display: none; }
.zz-courier-login-panel h1 { color: var(--zz-navy-950); font-size: 30px; font-weight: 650; }
.zz-courier-login-panel > p { max-width: 420px; color: var(--zz-muted); font-size: 13px; }
.zz-courier-login-panel label { margin-top: var(--zz-space-3); color: #34475f; font-weight: 600; }
.zz-courier-login-panel .row { margin-top: var(--zz-space-4); }

html[data-zz-area="courier"][data-zz-page="register"] body > main.zz-courier-register-shell {
  display: grid;
  grid-template-columns: 340px minmax(0,1fr);
  width: min(1180px,100%);
  max-width: 1180px;
}
.zz-courier-register-shell > .head {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  min-height: 720px;
  padding: var(--zz-space-6) !important;
  border: 0 !important;
  background:
    linear-gradient(180deg,rgba(3,20,39,.18),rgba(3,20,39,.88)),
    url('../auth/zimbabwe-shoppers-v1.png') center / cover no-repeat,
    var(--zz-navy-950) !important;
}
.zz-courier-register-shell > .head > a:first-child img { width: 132px !important; height: 90px; object-fit: contain; }
.zz-courier-register-shell > .head > .btn { order: 4; margin-top: var(--zz-space-4); }
.zz-courier-register-copy { margin-top: auto; }
.zz-courier-register-copy .zz-page-eyebrow { color: var(--zz-gold-400) !important; }
.zz-courier-register-copy h2 { margin: 8px 0; color: #fff !important; font-size: 28px; font-weight: 650; line-height: 1.12; }
.zz-courier-register-copy p { color: #c5d5e3 !important; font-size: 12px; }
.zz-courier-register-shell > .head .zz-auth-proof { margin-top: var(--zz-space-3); padding-top: var(--zz-space-3); }
.zz-courier-register-shell > .body { padding: var(--zz-space-6) var(--zz-space-7) !important; }
.zz-courier-register-shell > .body h1 { color: var(--zz-navy-950); font-size: 30px; font-weight: 650; }
.zz-courier-register-shell > .body > p { font-size: 13px; }
.zz-courier-register-shell > .body > .grid { gap: 8px var(--zz-space-3); }
.zz-courier-register-shell > .body label { color: #34475f; font-weight: 600; }

@media (max-width: 1280px) {
  html[data-zz-area="admin"] body > .shell,
  html[data-zz-area="vendor"] body > .shell { grid-template-columns: 258px minmax(0,1fr); }
  html[data-zz-area="admin"] .main,
  html[data-zz-area="vendor"] .main { padding-inline: var(--zz-space-5); }
  .zz-role-context { min-width: 150px; }
  .zz-role-context small { display: none; }
}

@media (max-width: 980px) {
  html[data-zz-area="admin"] body > .shell,
  html[data-zz-area="vendor"] body > .shell { grid-template-columns: minmax(0,1fr); }
  html[data-zz-area="admin"] .sidebar,
  html[data-zz-area="vendor"] .sidebar { width: min(310px,88vw); }
  html[data-zz-area="admin"] .zz-command-bar,
  html[data-zz-area="vendor"] .zz-command-bar { flex-wrap: wrap; }
  .zz-role-context { min-width: 0; margin-left: 0; border-left: 0; }
  html[data-zz-area="admin"] .zz-command-bar .search,
  html[data-zz-area="vendor"] .zz-command-bar .search { min-width: min(360px,calc(100vw - 110px)); flex: 1; }
  .zz-executive-metric { grid-column: span 4 !important; }
  html[data-zz-page="trust"] #cards,
  html[data-zz-page="orders"] #cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-zz-area="courier"][data-zz-page="login"] body > main.zz-courier-auth-shell { grid-template-columns: minmax(0,1fr); width: min(620px,100%); }
  .zz-courier-auth-visual { min-height: 310px; }
  .zz-courier-auth-visual > div:not(.zz-auth-proof) { margin-top: var(--zz-space-5); }
  .zz-courier-auth-visual .zz-auth-proof { display: none; }
  html[data-zz-area="courier"][data-zz-page="register"] body > main.zz-courier-register-shell { grid-template-columns: minmax(0,1fr); width: min(760px,100%); }
  .zz-courier-register-shell > .head { min-height: 300px; }
  .zz-courier-register-shell > .head .zz-auth-proof { display: none; }
}

@media (max-width: 720px) {
  html[data-zz-area="admin"] .main,
  html[data-zz-area="vendor"] .main { padding: 12px 12px var(--zz-space-7); }
  html[data-zz-area="admin"] .zz-command-bar,
  html[data-zz-area="vendor"] .zz-command-bar { top: 6px; min-height: 64px; margin-bottom: var(--zz-space-4); padding: 8px; }
  html[data-zz-area="admin"] .zz-command-bar .search,
  html[data-zz-area="vendor"] .zz-command-bar .search { order: 3; min-width: 100%; width: 100%; }
  .zz-role-context { margin-left: auto; }
  .zz-role-context > span:last-child { display: none; }
  html[data-zz-area="admin"] .zz-purpose-head,
  html[data-zz-area="vendor"] .zz-purpose-head { display: block; min-height: 0; padding: var(--zz-space-4); border: 1px solid #dfe4eb; border-radius: 14px; background: #fff; }
  html[data-zz-area="admin"][data-zz-page="admin"] .zz-purpose-head { padding: var(--zz-space-5); }
  html[data-zz-area="admin"] .zz-purpose-head h1,
  html[data-zz-area="vendor"] .zz-purpose-head h1 { font-size: 27px; }
  .zz-page-context { margin-top: var(--zz-space-3); }
  .zz-executive-metric { grid-column: span 6 !important; min-height: 136px; }
  .zz-executive-metric .kpi { min-height: 132px !important; }
  .zz-operations-feed,
  .zz-attention-panel,
  .zz-intelligence-panel,
  .zz-finance-panel,
  .zz-health-panel,
  .zz-business-performance,
  .zz-fulfilment-panel { grid-column: span 12 !important; }
  .zz-intelligence-panel > .pad:last-child { grid-template-columns: minmax(0,1fr) !important; }
  html[data-zz-page="trust"] #cards,
  html[data-zz-page="orders"] #cards { grid-template-columns: minmax(0,1fr); }
  .zz-workspace-heading { align-items: flex-start; }
  .zz-workspace-state { display: none; }
  html[data-zz-area="courier"][data-zz-page="login"] body { padding: 12px; }
  .zz-courier-auth-visual { min-height: 260px; padding: var(--zz-space-5); }
  .zz-courier-auth-visual h2 { font-size: 26px; }
  .zz-courier-login-panel { padding: var(--zz-space-5); }
  .zz-courier-register-shell > .head { min-height: 250px; padding: var(--zz-space-5) !important; }
  .zz-courier-register-shell > .body { padding: var(--zz-space-5) var(--zz-space-3) !important; }
}

@media (max-width: 430px) {
  .zz-executive-metric { grid-column: span 12 !important; }
  .zz-role-context { display: none; }
  html[data-zz-area="admin"] .zz-command-bar .btn,
  html[data-zz-area="vendor"] .zz-command-bar .btn { min-height: 40px; padding: 8px 10px; font-size: 11px; }
}

@media (max-width: 520px) {
  html[data-zz-area="marketplace"][data-zz-page="login"] body,
  html[data-zz-area="marketplace"][data-zz-page="register"] body { align-items: flex-start; padding: 10px !important; }
  html[data-zz-area="marketplace"][data-zz-page="login"] body > .shell,
  html[data-zz-area="marketplace"][data-zz-page="register"] body > .shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0;
  }
  html[data-zz-area="marketplace"][data-zz-page="login"] body > .shell > *,
  html[data-zz-area="marketplace"][data-zz-page="register"] body > .shell > *,
  html[data-zz-area="marketplace"][data-zz-page="login"] .head > *,
  html[data-zz-area="marketplace"][data-zz-page="register"] .head > *,
  html[data-zz-area="marketplace"][data-zz-page="login"] form > *,
  html[data-zz-area="marketplace"][data-zz-page="register"] form > * { min-width: 0; }
  html[data-zz-area="marketplace"] .rowActions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  html[data-zz-area="marketplace"] .rowActions .link { min-width: 0; overflow-wrap: anywhere; }
  html[data-zz-area="marketplace"] .rowActions .link:last-child:nth-child(odd) { grid-column: 1 / -1; }

  html[data-zz-area="courier"][data-zz-page="login"] body,
  html[data-zz-area="courier"][data-zz-page="register"] body { padding: 10px !important; }
  html[data-zz-area="courier"][data-zz-page="login"] body > main.zz-courier-auth-shell,
  html[data-zz-area="courier"][data-zz-page="register"] body > main.zz-courier-register-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
  }
  .zz-courier-register-shell > .head,
  .zz-courier-register-shell > .body,
  .zz-courier-register-shell > .body > .grid,
  .zz-courier-register-shell > .body > .grid > div { min-width: 0; }
  .zz-courier-register-shell > .body > .grid { grid-template-columns: minmax(0,1fr) !important; }
  .zz-courier-register-shell > .body input,
  .zz-courier-register-shell > .body select,
  .zz-courier-register-shell > .body textarea { min-width: 0; max-width: 100%; }
  .zz-courier-register-shell > .body .row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .zz-courier-register-shell > .body > .row { grid-template-columns: minmax(0,1fr); }
  .zz-courier-register-shell > .body h1 { font-size: 27px; line-height: 1.15; }

  html[data-zz-area="admin"] body > .shell,
  html[data-zz-area="vendor"] body > .shell,
  html[data-zz-area="admin"] .main,
  html[data-zz-area="vendor"] .main { min-width: 0; width: 100%; }
  html[data-zz-area="admin"] .zz-workspace-card,
  html[data-zz-area="vendor"] .zz-workspace-card { min-width: 0; }
}

/* ================================================================
   Full-view dashboard refinement
   Storefront content remains capped at 1600px; authenticated workspaces
   use the complete viewport like a modern operational application.
   ================================================================ */
html[data-zz-area="admin"] { --zz-portal-accent: var(--zz-green-600); --zz-portal-accent-soft: #e9f8f1; }
html[data-zz-area="courier"] { --zz-portal-accent: #d98600; --zz-portal-accent-soft: #fff6e4; }
html[data-zz-area="client"] { --zz-portal-accent: var(--zz-green-600); --zz-portal-accent-soft: #e9f8f1; }

html[data-zz-area="admin"] body > .shell,
html[data-zz-area="vendor"] body > .shell,
html[data-zz-area="courier"][data-zz-page="courier"] .app {
  width: 100%;
  max-width: none;
  margin: 0;
  box-shadow: none;
}
html[data-zz-area="admin"] .main,
html[data-zz-area="vendor"] .main {
  max-width: none;
  padding: 0 var(--zz-space-6) var(--zz-space-8);
}
html[data-zz-area="admin"] .zz-command-bar,
html[data-zz-area="vendor"] .zz-command-bar {
  top: 0;
  min-height: 78px;
  margin: 0 calc(var(--zz-space-6) * -1) var(--zz-space-5);
  padding: 12px var(--zz-space-6);
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: 0 7px 24px rgba(7,27,53,.045);
}
html[data-zz-area="vendor"][data-zz-page="vendor"] #topTitle { color: var(--zz-navy-950); font-size: 22px; font-weight: 650 !important; letter-spacing: -.025em; }
html[data-zz-area="vendor"][data-zz-page="vendor"] #topSub { color: #68778b; font-weight: 500; }

html[data-zz-area="admin"][data-zz-page="admin"] .zz-purpose-head {
  min-height: 104px;
  padding: var(--zz-space-4) var(--zz-space-5);
  border: 1px solid #dde6e2;
  background:
    radial-gradient(circle at 92% 12%, rgba(7,134,93,.09), transparent 18rem),
    linear-gradient(125deg,#fff,#f7fbf9);
  box-shadow: 0 10px 30px rgba(7,79,55,.05);
}
html[data-zz-area="admin"][data-zz-page="admin"] .zz-purpose-head h1 { color: var(--zz-navy-950); font-size: 31px; }
html[data-zz-area="admin"][data-zz-page="admin"] .zz-purpose-head p { color: var(--zz-muted); }
html[data-zz-area="admin"][data-zz-page="admin"] .zz-page-eyebrow { color: #a66b00; }
html[data-zz-area="admin"][data-zz-page="admin"] .zz-page-context {
  border-color: #cfe6db;
  background: #edf9f3;
  color: #166846;
}

.zz-executive-metric {
  min-height: 132px;
  border-top-color: var(--zz-metric-accent,var(--zz-portal-accent)) !important;
}
.zz-executive-metric::after { display: none; }
.zz-executive-metric .kpi { min-height: 129px !important; padding: 18px !important; }
.zz-executive-metric .kpi .label { max-width: calc(100% - 50px); color: #5b687b !important; }
.zz-executive-metric .kpi .value { margin-top: 10px; font-size: 31px !important; line-height: 1; }
.zz-executive-metric .kpi .sub { max-width: calc(100% - 26px); margin-top: 10px; line-height: 1.35; }
.zz-metric-icon {
  position: absolute;
  z-index: 2;
  right: 16px;
  top: 15px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb,var(--zz-metric-accent,var(--zz-portal-accent)) 17%,#fff);
  border-radius: 11px;
  background: color-mix(in srgb,var(--zz-metric-accent,var(--zz-portal-accent)) 10%,#fff);
  color: var(--zz-metric-accent,var(--zz-portal-accent));
}
.zz-metric-icon svg { width: 19px; height: 19px; }
.zz-admin-command-grid > .zz-executive-metric:nth-child(1),
.zz-vendor-command-grid > .zz-executive-metric:nth-child(1) { --zz-metric-accent:#07865d; }
.zz-admin-command-grid > .zz-executive-metric:nth-child(2),
.zz-vendor-command-grid > .zz-executive-metric:nth-child(2) { --zz-metric-accent:#1267d6; }
.zz-admin-command-grid > .zz-executive-metric:nth-child(3),
.zz-vendor-command-grid > .zz-executive-metric:nth-child(3) { --zz-metric-accent:#dd7b00; }
.zz-admin-command-grid > .zz-executive-metric:nth-child(4),
.zz-vendor-command-grid > .zz-executive-metric:nth-child(4) { --zz-metric-accent:#7b47c8; }
.zz-admin-command-grid > .zz-executive-metric:nth-child(5) { --zz-metric-accent:#ad7600; }
.zz-admin-command-grid > .zz-executive-metric:nth-child(6) { --zz-metric-accent:#d93d4b; }

html[data-zz-area="admin"][data-zz-page="admin"] .zz-admin-command-grid > .zz-executive-metric { order: 1; }
html[data-zz-area="admin"][data-zz-page="admin"] .zz-intelligence-panel { order: 2; }
html[data-zz-area="admin"][data-zz-page="admin"] .zz-operations-feed,
html[data-zz-area="admin"][data-zz-page="admin"] .zz-attention-panel { order: 3; }
html[data-zz-area="admin"][data-zz-page="admin"] .zz-finance-panel { order: 4; }
html[data-zz-area="admin"][data-zz-page="admin"] .zz-health-panel { order: 5; }
html[data-zz-area="admin"][data-zz-page="admin"] .zz-intelligence-panel .chartBox { height: 235px; }
html[data-zz-area="admin"][data-zz-page="admin"] .zz-intelligence-panel .chartBox canvas { height: 178px; }

html[data-zz-area="courier"][data-zz-page="courier"] .app > main {
  max-width: none;
  padding: 0 var(--zz-space-6) var(--zz-space-8);
}
html[data-zz-area="courier"][data-zz-page="courier"] .top {
  min-height: 82px;
  margin: 0 calc(var(--zz-space-6) * -1) var(--zz-space-5);
  padding: 14px var(--zz-space-6);
  border-width: 0 0 1px;
  border-radius: 0;
}

@media (min-width: 981px) {
  html[data-zz-area="client"][data-zz-page="client"] body {
    display: grid;
    grid-template-columns: 268px minmax(0,1fr);
    min-height: 100vh;
  }
  html[data-zz-area="client"][data-zz-page="client"] .clientHeader {
    position: sticky;
    top: 0;
    z-index: 50;
    grid-column: 1;
    grid-row: 1;
    width: 268px;
    height: 100vh;
    border: 0;
    background:
      radial-gradient(circle at 20% 7%,rgba(7,134,93,.2),transparent 17rem),
      linear-gradient(180deg,#061d31,#052b27 70%,#041d1c);
  }
  html[data-zz-area="client"][data-zz-page="client"] .clientHeader .wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: var(--zz-space-5) var(--zz-space-3);
    justify-content: flex-start !important;
  }
  html[data-zz-area="client"][data-zz-page="client"] .clientHeader .brand {
    min-height: 88px;
    padding: 0 5px var(--zz-space-3);
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  html[data-zz-area="client"][data-zz-page="client"] .clientHeader .brand img { width: 112px; height: 78px; }
  html[data-zz-area="client"][data-zz-page="client"] .clientHeader .brandText { display: grid; }
  html[data-zz-area="client"][data-zz-page="client"] .clientNav {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    margin-top: var(--zz-space-5);
  }
  html[data-zz-area="client"][data-zz-page="client"] .clientNav::before {
    content: "Buyer workspace";
    padding: 0 11px 7px;
    color: #789188;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  html[data-zz-area="client"][data-zz-page="client"] .clientNav .btn {
    display: flex;
    align-items: center;
    gap: 11px;
    justify-content: flex-start;
    min-height: 45px;
    padding: 10px 13px;
    border-color: transparent;
    background: transparent;
    color: #c6d9d1;
    box-shadow: none;
  }
  html[data-zz-area="client"][data-zz-page="client"] .clientNav .btn::before {
    content: "";
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E") center / 17px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E") center / 17px no-repeat;
  }
  html[data-zz-area="client"][data-zz-page="client"] .clientNav .btn:nth-of-type(2)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18H6zM9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18H6zM9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E");
  }
  html[data-zz-area="client"][data-zz-page="client"] .clientNav .btn:nth-of-type(3)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4v5c0 5-3.4 8-8 9-4.6-1-8-4-8-9V7z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4v5c0 5-3.4 8-8 9-4.6-1-8-4-8-9V7z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E");
  }
  html[data-zz-area="client"][data-zz-page="client"] .clientNav .btn:nth-of-type(4)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='19' cy='20' r='1'/%3E%3Cpath d='M3 4h2l2.6 11h10.8l2-7H7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='19' cy='20' r='1'/%3E%3Cpath d='M3 4h2l2.6 11h10.8l2-7H7'/%3E%3C/svg%3E");
  }
  html[data-zz-area="client"][data-zz-page="client"] .clientNav .btn:first-of-type {
    border-color: rgba(248,181,27,.3);
    background: linear-gradient(90deg,rgba(248,181,27,.18),rgba(248,181,27,.05));
    color: var(--zz-gold-400);
    box-shadow: inset 3px 0 0 var(--zz-gold-500);
  }
  html[data-zz-area="client"][data-zz-page="client"] .clientNav .btn.danger { margin-top: var(--zz-space-5); color: #ffadb4; }
  html[data-zz-area="client"][data-zz-page="client"] main.wrap {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--zz-space-5) var(--zz-space-6) var(--zz-space-8);
  }
  html[data-zz-area="client"][data-zz-page="client"] .clientHero { margin-top: 0; }
}

@media (max-width: 1280px) and (min-width: 981px) {
  html[data-zz-area="admin"] .main,
  html[data-zz-area="vendor"] .main,
  html[data-zz-area="courier"][data-zz-page="courier"] .app > main,
  html[data-zz-area="client"][data-zz-page="client"] main.wrap { padding-inline: var(--zz-space-5); }
  html[data-zz-area="admin"] .zz-command-bar,
  html[data-zz-area="vendor"] .zz-command-bar,
  html[data-zz-area="courier"][data-zz-page="courier"] .top { margin-inline: calc(var(--zz-space-5) * -1); padding-inline: var(--zz-space-5); }
}

@media (max-width: 980px) {
  html[data-zz-area="admin"] .main,
  html[data-zz-area="vendor"] .main,
  html[data-zz-area="courier"][data-zz-page="courier"] .app > main { padding-top: 0; }
  html[data-zz-area="admin"] .zz-command-bar,
  html[data-zz-area="vendor"] .zz-command-bar,
  html[data-zz-area="courier"][data-zz-page="courier"] .top {
    margin-inline: calc(var(--zz-space-5) * -1);
    padding-inline: var(--zz-space-5);
  }
  html[data-zz-area="vendor"][data-zz-page="vendor"] .zz-vendor-command-grid > .zz-executive-metric { grid-column: span 6 !important; }
  html[data-zz-area="vendor"][data-zz-page="vendor"] .zz-business-performance,
  html[data-zz-area="vendor"][data-zz-page="vendor"] .zz-fulfilment-panel { grid-column: span 12 !important; }
}

@media (min-width: 620px) and (max-width: 980px) {
  html[data-zz-area="courier"][data-zz-page="courier"] #stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  html[data-zz-area="courier"][data-zz-page="courier"] #stats .stat { min-height: 132px; }
}

@media (max-width: 720px) {
  html[data-zz-area="admin"] .zz-command-bar,
  html[data-zz-area="vendor"] .zz-command-bar,
  html[data-zz-area="courier"][data-zz-page="courier"] .top {
    margin-inline: -12px;
    padding-inline: 12px;
  }
}

/* Courier operational modules: designed workspaces instead of legacy forms. */
html[data-zz-area="admin"] .sidebar,
html[data-zz-area="vendor"] .sidebar,
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside {
  background:
    radial-gradient(circle at 12% 4%,rgba(7,134,93,.34),transparent 18rem),
    radial-gradient(circle at 92% 96%,rgba(248,181,27,.08),transparent 16rem),
    linear-gradient(180deg,#042f2a 0%,#03251f 58%,#021814 100%) !important;
}
html[data-zz-area="courier"][data-zz-page="courier"] .tab > .card,
html[data-zz-area="courier"][data-zz-page="courier"] .tab > .grid > .card {
  border-top: 3px solid var(--zz-portal-accent);
  box-shadow: 0 14px 38px rgba(7,27,53,.07);
}
html[data-zz-area="courier"][data-zz-page="courier"] .card > .head {
  min-height: 72px;
  padding: 17px 22px;
  background: linear-gradient(135deg,#fff,#f8fafc);
}
html[data-zz-area="courier"][data-zz-page="courier"] .card > .body { padding: 22px; }
html[data-zz-area="courier"][data-zz-page="courier"] input:not([type="checkbox"]),
html[data-zz-area="courier"][data-zz-page="courier"] select,
html[data-zz-area="courier"][data-zz-page="courier"] textarea {
  min-height: 49px;
  border-color: #d9e1ea;
  border-radius: 11px;
  background: #fbfcfe;
  color: var(--zz-navy-950);
  box-shadow: inset 0 1px 2px rgba(7,27,53,.025);
}
html[data-zz-area="courier"][data-zz-page="courier"] input:focus,
html[data-zz-area="courier"][data-zz-page="courier"] select:focus,
html[data-zz-area="courier"][data-zz-page="courier"] textarea:focus {
  border-color: rgba(18,103,214,.55);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(18,103,214,.09);
  outline: 0;
}
html[data-zz-area="courier"][data-zz-page="courier"] input[type="file"] {
  min-height: 45px;
  padding: 5px;
  border-style: dashed;
  background: #fff;
  color: #68778b;
  font-size: 11px;
}
html[data-zz-area="courier"][data-zz-page="courier"] input[type="file"]::file-selector-button {
  min-height: 33px;
  margin-right: 9px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: #edf4fb;
  color: #17436e;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
html[data-zz-area="courier"][data-zz-page="courier"] label {
  margin: 0 0 7px;
  color: #34465d;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .02em;
}

.zz-fleet-layout {
  display: grid;
  grid-template-columns: minmax(390px,.72fr) minmax(0,1.28fr);
  gap: 18px;
  align-items: start;
}
.zz-fleet-layout > .card { min-width: 0; border-top: 3px solid var(--zz-portal-accent); }
.zz-fleet-form { border-top-color: var(--zz-green-600) !important; }
.zz-fleet-register { border-top-color: var(--zz-gold-500) !important; }
.zz-card-heading { display: flex; align-items: center; gap: 13px; min-width: 0; }
.zz-card-heading > div { min-width: 0; }
.zz-card-heading > div > span {
  display: block;
  margin-bottom: 2px;
  color: #89703b;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.zz-card-heading h2 { margin: 0; font-size: 18px !important; }
.zz-card-heading p { margin: 2px 0 0; color: #748196; font-size: 11px; }
.zz-card-icon {
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #cfe5db;
  border-radius: 12px;
  background: #eaf8f2;
  color: var(--zz-green-600);
}
.zz-card-icon-gold { border-color: #efddb5; background: #fff7e7; color: #ae7200; }
.zz-card-icon svg { width: 21px; height: 21px; }
.zz-fleet-count {
  margin-left: auto;
  padding: 7px 10px;
  border: 1px solid #d9e2eb;
  border-radius: 999px;
  background: #fff;
  color: #536277;
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}
.zz-fleet-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.zz-fleet-form-grid > div { min-width: 0; }
.zz-fleet-form-grid .zz-field-wide { grid-column: 1 / -1; }
.zz-fleet-form textarea { min-height: 108px !important; }
.zz-form-actions {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--zz-line);
}
.zz-form-actions .btn.primary { min-width: 146px; }

.zz-vehicle-list { display: grid; gap: 16px; }
.zz-vehicle-card {
  overflow: hidden;
  border: 1px solid #dfe5ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(7,27,53,.045);
}
.zz-vehicle-summary {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--zz-line);
  background: linear-gradient(120deg,#f8fbfd,#fff 62%,#f5fbf8);
}
.zz-vehicle-visual {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid #dbe5ed;
  border-radius: 13px;
  background: #eef4f8;
  color: #426582;
}
.zz-vehicle-visual img { width: 100%; height: 100%; object-fit: cover; }
.zz-vehicle-visual svg { width: 31px; height: 31px; }
.zz-vehicle-title > span { color: #a66b00; font-size: 9px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.zz-vehicle-title h3 { margin: 3px 0 2px; color: var(--zz-navy-950); font-size: 18px; font-weight: 650; }
.zz-vehicle-title p { margin: 0; color: #758397; font-size: 11px; }
.zz-status-ready { border-color: #bfe5d3 !important; background: #ebf9f2 !important; color: #08734f !important; }
.zz-vehicle-facts {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr;
  gap: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--zz-line);
}
.zz-vehicle-facts > div { min-width: 0; padding: 15px 16px 15px 0; }
.zz-vehicle-facts > div + div { padding-left: 16px; border-left: 1px solid var(--zz-line); }
.zz-vehicle-facts span { display: block; color: #7a8798; font-size: 9px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.zz-vehicle-facts strong { display: block; margin-top: 4px; overflow: hidden; color: #263950; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.zz-document-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 16px 18px; background: #fbfcfd; }
.zz-upload-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 13px;
  border: 1px solid #e1e6ed;
  border-radius: 11px;
  background: #fff;
}
.zz-upload-card h4 { margin: 9px 0 3px; color: var(--zz-navy-950); font-size: 12px; font-weight: 650; }
.zz-upload-card p { min-height: 32px; margin: 0 0 10px; color: #758397; font-size: 10px; line-height: 1.5; }
.zz-upload-card input { width: 100%; margin-top: auto; }
.zz-upload-card .btn { width: 100%; min-height: 39px; margin-top: 8px; padding: 8px; font-size: 10px; }
.zz-upload-card small { margin-top: 8px; font-size: 10px; }
.zz-upload-state { padding: 4px 7px; border-radius: 999px; background: #fff3da; color: #9a6300; font-size: 8px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.zz-upload-state.complete { background: #e8f8f1; color: #08734f; }
.zz-vehicle-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-top: 1px solid #e8ecf1;
  background: #fff;
}
.zz-vehicle-footer > span { color: #718095; font-size: 10px; }
.zz-vehicle-footer .btn.bad { min-height: 36px; padding: 7px 10px; border-color: #f2c5ca; background: #fff3f4; color: #bf2f3c; font-size: 10px; }
.zz-premium-empty { display: grid; justify-items: center; min-height: 270px; align-content: center; padding: 30px; text-align: center; }
.zz-premium-empty > span { display: grid; place-items: center; width: 48px; height: 48px; border: 1px dashed #9eb4c8; border-radius: 14px; background: #f0f5f9; color: #58748d; font-size: 24px; }
.zz-premium-empty h3 { margin: 13px 0 4px; color: var(--zz-navy-950); font-size: 17px; }
.zz-premium-empty p { max-width: 330px; margin: 0; color: #758397; font-size: 12px; }

html[data-zz-area="courier"] #shipments > .card > .body { padding: 18px 20px 22px; }
html[data-zz-area="courier"] #shipments .tableWrap,
html[data-zz-area="courier"] #shipmentsBody { overflow-x: auto; }
html[data-zz-area="courier"] #shipments table { min-width: 860px; border: 1px solid #e4e9ef; border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
html[data-zz-area="courier"] #shipments th { padding: 13px 14px; background: #f3f6f9; color: #56667a; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
html[data-zz-area="courier"] #shipments td { padding: 15px 14px; background: #fff; }
html[data-zz-area="courier"] #profile > .card { border-top-color: var(--zz-green-600); }
html[data-zz-area="courier"] #profile .card .card { border: 1px solid #dfe6ed; background: #f8fafc; }
html[data-zz-area="courier"] #profile .card .card .grid > div { padding: 13px; border: 1px solid #e0e6ed; border-radius: 11px; background: #fff; }
html[data-zz-area="courier"] #profile .card .card input[type="file"] { margin-bottom: 9px; }
html[data-zz-area="courier"] #integration > .grid > .card:first-child { border-top-color: #1267d6; }
html[data-zz-area="courier"] #integration > .grid > .card:last-child { border-top-color: #7b47c8; }
html[data-zz-area="courier"] #integration .code { margin-bottom: 13px; border-color: #dbe4ed; background: #f5f8fb; color: #244561; font-size: 11px; }
.zz-notification-list { display: grid; gap: 10px; }
.zz-notification-item { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 13px; padding: 15px; border: 1px solid #e1e7ed; border-radius: 12px; background: linear-gradient(135deg,#fff,#fafcfd); }
.zz-notification-mark { display: grid; width: 38px; height: 38px; border-radius: 11px; background: #edf5ff; }
.zz-notification-mark::before { content: ""; width: 17px; height: 17px; margin: auto; border: 2px solid #1267d6; border-radius: 50% 50% 45% 45%; }
.zz-notification-item b { color: var(--zz-navy-950); font-size: 13px; }
.zz-notification-item p { margin: 3px 0 0; color: #66758a; font-size: 12px; }
.zz-notification-item small { display: block; margin-top: 6px; color: #8a6a25; font-size: 10px; }

@media (max-width: 1240px) {
  .zz-fleet-layout { grid-template-columns: minmax(0,1fr); }
  .zz-document-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .zz-fleet-form-grid,
  .zz-document-grid { grid-template-columns: minmax(0,1fr); }
  .zz-vehicle-summary { grid-template-columns: 60px minmax(0,1fr); }
  .zz-vehicle-summary > .status { grid-column: 1 / -1; justify-self: start; }
  .zz-vehicle-visual { width: 60px; height: 60px; }
  .zz-vehicle-facts { grid-template-columns: minmax(0,1fr); }
  .zz-vehicle-facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--zz-line); }
  .zz-vehicle-facts strong { white-space: normal; }
  .zz-vehicle-footer { align-items: flex-start; flex-direction: column; }
}

/* ================================================================
   Zimbazon blue portal art direction
   A single premium visual language for every authenticated workspace.
   ================================================================ */
html[data-zz-area="admin"],
html[data-zz-area="vendor"],
html[data-zz-area="courier"],
html[data-zz-area="client"] {
  --zz-portal-accent: #1267d6;
  --zz-portal-accent-soft: #eaf3ff;
  --zz-portal-navy: #061a35;
  --zz-portal-navy-2: #0a315d;
  --zz-portal-blue: #1672df;
}

html[data-zz-area="admin"] body,
html[data-zz-area="vendor"] body,
html[data-zz-area="courier"] body,
html[data-zz-area="client"] body {
  background:
    radial-gradient(circle at 91% 2%,rgba(44,139,239,.1),transparent 25rem),
    linear-gradient(145deg,#f4f8fd 0%,#f8fafd 48%,#eef5fc 100%) !important;
}

html[data-zz-area="admin"] .sidebar,
html[data-zz-area="vendor"] .sidebar,
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside {
  background:
    radial-gradient(circle at 18% 4%,rgba(29,126,232,.48),transparent 17rem),
    radial-gradient(circle at 92% 98%,rgba(248,181,27,.13),transparent 14rem),
    linear-gradient(180deg,#092a53 0%,#061d3b 48%,#041427 100%) !important;
  box-shadow: 14px 0 40px rgba(5,25,52,.12);
}
html[data-zz-area="admin"] .sidebar::after,
html[data-zz-area="vendor"] .sidebar::after,
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: auto 0 0;
  height: 96px;
  opacity: .38;
  background:
    linear-gradient(135deg,transparent 0 37%,rgba(22,114,223,.55) 38% 42%,transparent 43%),
    linear-gradient(160deg,transparent 0 55%,rgba(248,181,27,.55) 56% 60%,transparent 61%);
}

html[data-zz-area="admin"] .nav a,
html[data-zz-area="vendor"] .nav a,
html[data-zz-area="courier"][data-zz-page="courier"] .nav button {
  color: #ccdef2 !important;
}
html[data-zz-area="admin"] .nav a:hover,
html[data-zz-area="vendor"] .nav a:hover,
html[data-zz-area="courier"][data-zz-page="courier"] .nav button:hover {
  border-color: rgba(117,180,250,.2) !important;
  background: rgba(29,126,232,.12) !important;
  color: #fff !important;
}
html[data-zz-area="admin"] .nav a.active,
html[data-zz-area="vendor"] .nav a.active,
html[data-zz-area="courier"][data-zz-page="courier"] .nav button.active {
  border-color: rgba(85,164,249,.5) !important;
  background: linear-gradient(100deg,#1672df,#0f5fbe) !important;
  color: #fff !important;
  box-shadow: 0 9px 24px rgba(5,64,139,.34),inset 3px 0 0 #f8b51b !important;
}
html[data-zz-area="admin"] .nav a.active .zz-nav-icon,
html[data-zz-area="vendor"] .nav a.active .zz-nav-icon { background: rgba(255,255,255,.15) !important; color: #fff !important; }
html[data-zz-area="admin"] .zz-nav-group,
html[data-zz-area="vendor"] .zz-nav-group { color: #6fa8df !important; }
html[data-zz-area="admin"] .zz-sidebar-support,
html[data-zz-area="vendor"] .zz-sidebar-support {
  border-color: rgba(89,163,240,.23) !important;
  background: linear-gradient(135deg,rgba(23,112,210,.2),rgba(4,28,58,.28)) !important;
}

html[data-zz-area="admin"] .main,
html[data-zz-area="vendor"] .main,
html[data-zz-area="courier"][data-zz-page="courier"] .app > main {
  background:
    radial-gradient(circle at 96% 2%,rgba(51,143,239,.09),transparent 26rem),
    linear-gradient(145deg,#f5f8fc,#f9fbfd 55%,#eff5fb) !important;
}
html[data-zz-area="admin"] .zz-command-bar,
html[data-zz-area="vendor"] .zz-command-bar,
html[data-zz-area="courier"][data-zz-page="courier"] .top {
  border-bottom-color: #dce7f2 !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 9px 28px rgba(11,50,94,.07) !important;
  backdrop-filter: blur(16px);
}
html[data-zz-area="admin"] .zz-command-bar .search input,
html[data-zz-area="vendor"] .zz-command-bar .search input {
  border-color: #dce7f2 !important;
  background: #f3f7fc !important;
}
html[data-zz-area="admin"] .zz-command-bar .search input:focus,
html[data-zz-area="vendor"] .zz-command-bar .search input:focus {
  border-color: #80b7ee !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(18,103,214,.09) !important;
}

html[data-zz-area="admin"] .btn.primary,
html[data-zz-area="vendor"] .btn.primary,
html[data-zz-area="courier"] .btn.primary,
html[data-zz-area="client"] .btn.primary {
  border-color: #1267d6 !important;
  background: linear-gradient(135deg,#2282e9,#0d5fc4) !important;
  color: #fff !important;
  box-shadow: 0 9px 20px rgba(18,103,214,.2) !important;
}
html[data-zz-area="admin"] .btn.primary:hover,
html[data-zz-area="vendor"] .btn.primary:hover,
html[data-zz-area="courier"] .btn.primary:hover,
html[data-zz-area="client"] .btn.primary:hover { filter: brightness(1.05); transform: translateY(-1px); }

html[data-zz-area="admin"] .zz-purpose-head,
html[data-zz-area="vendor"] .zz-purpose-head {
  position: relative;
  isolation: isolate;
  min-height: 132px !important;
  overflow: hidden;
  padding: 25px 29px !important;
  border: 1px solid rgba(44,137,229,.4) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 86% 23%,rgba(74,164,255,.32),transparent 15rem),
    linear-gradient(123deg,#071c38 0%,#0a386a 58%,#0b5b9d 100%) !important;
  box-shadow: 0 18px 42px rgba(5,40,81,.16) !important;
}
html[data-zz-area="admin"] .zz-purpose-head::before,
html[data-zz-area="vendor"] .zz-purpose-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(90deg,transparent 45%,#000);
  mask-image: linear-gradient(90deg,transparent 45%,#000);
}
html[data-zz-area="admin"] .zz-purpose-head > div:first-child,
html[data-zz-area="vendor"] .zz-purpose-head > div:first-child { position: relative; z-index: 2; max-width: calc(100% - 300px); }
html[data-zz-area="admin"] .zz-purpose-head h1,
html[data-zz-area="vendor"] .zz-purpose-head h1,
html[data-zz-area="admin"][data-zz-page="admin"] .zz-purpose-head h1 {
  color: #fff !important;
  font-size: clamp(28px,2.5vw,36px) !important;
  letter-spacing: -.035em;
}
html[data-zz-area="admin"] .zz-purpose-head p,
html[data-zz-area="vendor"] .zz-purpose-head p,
html[data-zz-area="admin"][data-zz-page="admin"] .zz-purpose-head p {
  max-width: 760px;
  color: #c8dcf2 !important;
}
html[data-zz-area="admin"] .zz-page-eyebrow,
html[data-zz-area="vendor"] .zz-page-eyebrow,
html[data-zz-area="admin"][data-zz-page="admin"] .zz-page-eyebrow { color: #76baff !important; }
html[data-zz-area="admin"] .zz-page-context,
html[data-zz-area="vendor"] .zz-page-context,
html[data-zz-area="admin"][data-zz-page="admin"] .zz-page-context {
  position: relative;
  z-index: 3;
  border-color: rgba(151,202,255,.28) !important;
  background: rgba(4,30,61,.42) !important;
  color: #e7f2ff !important;
  backdrop-filter: blur(8px);
}
.zz-page-emblem {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 185px;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 22px;
  background: linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 18px 34px rgba(0,22,48,.2);
  transform: translateY(-50%) rotate(-4deg);
}
.zz-page-emblem svg { width: 38px; height: 38px; stroke-width: 1.5; }
.zz-live-dot { background: #65aefa !important; box-shadow: 0 0 0 4px rgba(101,174,250,.14) !important; }

html[data-zz-area="admin"] .zz-workspace-card,
html[data-zz-area="vendor"] .zz-workspace-card {
  border-color: #dbe6f1 !important;
  border-top: 3px solid #2580dd !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 12px 34px rgba(8,46,88,.075) !important;
}
html[data-zz-area="admin"] .zz-workspace-card:hover,
html[data-zz-area="vendor"] .zz-workspace-card:hover { border-color: #bfd7ee !important; box-shadow: 0 17px 42px rgba(8,46,88,.1) !important; }
html[data-zz-area="admin"] .zz-workspace-card > .pad:first-child,
html[data-zz-area="vendor"] .zz-workspace-card > .pad:first-child {
  background: linear-gradient(135deg,#fff,#f2f7fd) !important;
}
html[data-zz-area="admin"] .zz-primary-workspace::before,
html[data-zz-area="vendor"] .zz-primary-workspace::before { display: none !important; }
html[data-zz-area="admin"] .zz-data-workspace .zz-workspace-heading,
html[data-zz-area="vendor"] .zz-data-workspace .zz-workspace-heading {
  min-height: 86px;
  background:
    radial-gradient(circle at 92% 10%,rgba(38,130,226,.13),transparent 12rem),
    linear-gradient(135deg,#fff,#f1f7fd) !important;
}
.zz-panel-kicker { color: #1267d6 !important; }
.zz-workspace-state { border-color: #cde0f3 !important; background: #edf6ff !important; color: #15599c !important; }
.zz-workspace-state i { background: #2580dd !important; }

html[data-zz-area="admin"] .zz-premium-table table,
html[data-zz-area="vendor"] .zz-premium-table table {
  border-collapse: separate;
  border-spacing: 0;
}
html[data-zz-area="admin"] .zz-premium-table th,
html[data-zz-area="vendor"] .zz-premium-table th {
  border-bottom-color: #d9e6f3 !important;
  background: #edf4fb !important;
  color: #31506f !important;
}
html[data-zz-area="admin"] .zz-premium-table tbody tr:nth-child(even) td,
html[data-zz-area="vendor"] .zz-premium-table tbody tr:nth-child(even) td { background: #f9fbfe; }
html[data-zz-area="admin"] .zz-premium-table tbody tr:hover td,
html[data-zz-area="vendor"] .zz-premium-table tbody tr:hover td { background: #eef6ff !important; }
.zz-empty-cell {
  height: 190px !important;
  padding: 62px 24px 28px !important;
  color: #61758b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: center !important;
  background:
    radial-gradient(circle at 50% 38px,#fff 0 22px,transparent 23px),
    radial-gradient(circle at 50% 38px,#d8e9fa 0 23px,transparent 24px),
    linear-gradient(145deg,#f8fbff,#eef5fc) !important;
}

html[data-zz-area="admin"] .zz-form-workspace .pad,
html[data-zz-area="vendor"] .zz-form-workspace .pad { background: linear-gradient(145deg,#fff,#f8fbff) !important; }
html[data-zz-area="admin"] .zz-form-workspace input:not([type="checkbox"]),
html[data-zz-area="admin"] .zz-form-workspace select,
html[data-zz-area="admin"] .zz-form-workspace textarea,
html[data-zz-area="vendor"] .zz-form-workspace input:not([type="checkbox"]),
html[data-zz-area="vendor"] .zz-form-workspace select,
html[data-zz-area="vendor"] .zz-form-workspace textarea {
  border-color: #d5e1ee !important;
  background: #f9fbfe !important;
}
html[data-zz-area="vendor"] .zz-form-workspace .row2 > div,
html[data-zz-area="vendor"] .zz-form-workspace .row3 > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e1eaf3;
  border-radius: 12px;
  background: #fff;
}

.zz-executive-metric {
  border-color: #dce7f2 !important;
  border-top-color: var(--zz-metric-accent,var(--zz-portal-accent)) !important;
  background: linear-gradient(145deg,#fff,#f8fbff) !important;
  box-shadow: 0 11px 28px rgba(8,46,88,.075) !important;
}
.zz-admin-command-grid > .zz-executive-metric:nth-child(1),
.zz-vendor-command-grid > .zz-executive-metric:nth-child(1) { --zz-metric-accent:#1267d6; }
.zz-admin-command-grid > .zz-executive-metric:nth-child(2),
.zz-vendor-command-grid > .zz-executive-metric:nth-child(2) { --zz-metric-accent:#2b83df; }
.zz-admin-command-grid > .zz-executive-metric:nth-child(3),
.zz-vendor-command-grid > .zz-executive-metric:nth-child(3) { --zz-metric-accent:#0b9bd4; }
.zz-business-performance,
html[data-zz-area="vendor"][data-zz-page="vendor"] .zz-executive-metric { border-top-color: #1267d6 !important; }

html[data-zz-area="courier"][data-zz-page="courier"] .tab > .card,
html[data-zz-area="courier"][data-zz-page="courier"] .tab > .grid > .card,
.zz-fleet-form,
html[data-zz-area="courier"] #profile > .card {
  border-color: #dbe6f1 !important;
  border-top-color: #1672df !important;
  box-shadow: 0 13px 34px rgba(8,46,88,.075) !important;
}
html[data-zz-area="courier"][data-zz-page="courier"] .card > .head { background: linear-gradient(135deg,#fff,#eef6ff) !important; }
.zz-card-icon { border-color: #c9dff5 !important; background: #eaf4ff !important; color: #1267d6 !important; }
.zz-fleet-register { border-top-color: #2580dd !important; }
.zz-vehicle-summary { background: linear-gradient(120deg,#eef6ff,#fff 62%,#f7fbff) !important; }
.zz-document-grid { background: #f5f9fd !important; }
html[data-zz-area="courier"] #shipments th { background: #edf4fb !important; color: #31506f !important; }

html[data-zz-area="client"] .clientHero {
  border-color: rgba(62,145,231,.45) !important;
  background:
    radial-gradient(circle at 87% 25%,rgba(74,161,249,.35),transparent 18rem),
    linear-gradient(125deg,#071b37 0%,#0a3768 55%,#0a5a9e 100%) !important;
  box-shadow: 0 20px 46px rgba(5,39,79,.18) !important;
}
html[data-zz-area="client"] .portalAction,
html[data-zz-area="client"] .accountCard,
html[data-zz-area="client"] .passwordCard {
  border-color: #dbe6f1 !important;
  border-top: 3px solid #2580dd !important;
  background: linear-gradient(145deg,#fff,#f8fbff) !important;
  box-shadow: 0 12px 32px rgba(8,46,88,.075) !important;
}
html[data-zz-area="client"] .portalCardIcon { border-color: #c7def5 !important; background: #eaf4ff !important; color: #1267d6 !important; }

@media (min-width: 981px) {
  html[data-zz-area="client"][data-zz-page="client"] .clientHeader {
    background:
      radial-gradient(circle at 19% 6%,rgba(32,130,235,.46),transparent 17rem),
      radial-gradient(circle at 100% 98%,rgba(248,181,27,.1),transparent 13rem),
      linear-gradient(180deg,#092a53,#061d3b 64%,#041427) !important;
    box-shadow: 14px 0 40px rgba(5,25,52,.12);
  }
  html[data-zz-area="client"][data-zz-page="client"] .clientNav::before { color: #6fa8df !important; }
  html[data-zz-area="client"][data-zz-page="client"] .clientNav .btn { color: #ccdef2 !important; }
  html[data-zz-area="client"][data-zz-page="client"] .clientNav .btn:first-of-type {
    border-color: rgba(85,164,249,.5) !important;
    background: linear-gradient(100deg,#1672df,#0f5fbe) !important;
    color: #fff !important;
    box-shadow: 0 9px 24px rgba(5,64,139,.34),inset 3px 0 0 #f8b51b !important;
  }
}

@media (max-width: 820px) {
  html[data-zz-area="admin"] .zz-purpose-head,
  html[data-zz-area="vendor"] .zz-purpose-head { min-height: 0 !important; padding: 21px !important; }
  html[data-zz-area="admin"] .zz-purpose-head > div:first-child,
  html[data-zz-area="vendor"] .zz-purpose-head > div:first-child { max-width: 100%; }
  .zz-page-emblem { display: none; }
  html[data-zz-area="admin"] .zz-page-context,
  html[data-zz-area="vendor"] .zz-page-context { display: inline-flex; margin-top: 16px; }
}

html[data-zz-area="admin"][data-zz-page="categories"] .zz-workspace-grid-1 > .zz-workspace-card {
  grid-column: span 6 !important;
}
html[data-zz-area="admin"][data-zz-page="categories"] .zz-workspace-grid-1 > .zz-workspace-card:first-child table {
  min-width: 600px;
  table-layout: fixed;
}
html[data-zz-area="admin"][data-zz-page="categories"] .zz-workspace-grid-1 > .zz-workspace-card:last-child table {
  min-width: 520px;
  table-layout: fixed;
}
html[data-zz-area="admin"][data-zz-page="categories"] .zz-workspace-grid-1 > .zz-workspace-card:first-child th:nth-child(1) { width: 25%; }
html[data-zz-area="admin"][data-zz-page="categories"] .zz-workspace-grid-1 > .zz-workspace-card:first-child th:nth-child(2) { width: 26%; }
html[data-zz-area="admin"][data-zz-page="categories"] .zz-workspace-grid-1 > .zz-workspace-card:first-child th:nth-child(3) { width: 27%; }
html[data-zz-area="admin"][data-zz-page="categories"] .zz-workspace-grid-1 > .zz-workspace-card:first-child th:nth-child(4) { width: 22%; }
html[data-zz-area="admin"][data-zz-page="categories"] .zz-workspace-grid-1 > .zz-workspace-card:last-child th:nth-child(1),
html[data-zz-area="admin"][data-zz-page="categories"] .zz-workspace-grid-1 > .zz-workspace-card:last-child th:nth-child(2) { width: 38%; }
html[data-zz-area="admin"][data-zz-page="categories"] .zz-workspace-grid-1 > .zz-workspace-card:last-child th:nth-child(3) { width: 24%; }
.zz-category-media {
  display: inline-flex;
  max-width: 135px;
  align-items: center;
  gap: 10px;
  color: #526a83;
  font-size: 10px;
  font-weight: 600;
}
.zz-category-media img {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid #d7e4f1;
  border-radius: 10px;
  background: #eef5fc;
  object-fit: cover;
}
.zz-category-media img.is-missing { opacity: .22; }
.zz-category-media > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zz-category-no-image {
  display: inline-flex;
  padding: 6px 9px;
  border: 1px dashed #c7d9eb;
  border-radius: 8px;
  background: #f4f8fc;
  color: #71839a;
  font-size: 9px;
  font-weight: 650;
  text-transform: uppercase;
}

html[data-zz-area="admin"][data-zz-page="admin"] .chartBox {
  position: relative;
  overflow: hidden;
  border-color: #d9e5f1 !important;
  background:
    linear-gradient(rgba(130,169,208,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(130,169,208,.11) 1px,transparent 1px),
    radial-gradient(circle at 82% 20%,rgba(35,128,225,.1),transparent 13rem),
    linear-gradient(145deg,#fff,#f6faff) !important;
  background-size: 100% 36px,64px 100%,auto,auto !important;
  box-shadow: inset 0 1px 0 #fff;
}
html[data-zz-area="admin"][data-zz-page="admin"] .chartBox::after {
  content: "Live marketplace trend";
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: #8ca0b5;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html[data-zz-area="admin"][data-zz-page="admin"] .chartBox canvas { position: relative; z-index: 1; }

@media (max-width: 1120px) {
  html[data-zz-area="admin"][data-zz-page="categories"] .zz-workspace-grid-1 > .zz-workspace-card { grid-column: span 12 !important; }
}

/* Reference-matched command-centre composition and colour fusion. */
html[data-zz-area="admin"][data-zz-page="admin"] .zz-purpose-head {
  min-height: 178px !important;
  padding: 22px 28px !important;
  background:
    radial-gradient(circle at 58% 44%,rgba(13,126,236,.32),transparent 20rem),
    linear-gradient(114deg,#061a35 0%,#073260 54%,#072b54 100%) !important;
}
html[data-zz-area="admin"][data-zz-page="admin"] .zz-purpose-head > div:first-child {
  align-self: center;
  max-width: 50%;
}
html[data-zz-area="admin"][data-zz-page="admin"] .zz-page-emblem { display: none; }
html[data-zz-area="admin"][data-zz-page="admin"] .zz-page-context {
  position: absolute;
  z-index: 5;
  top: 16px;
  right: 17px;
}
.zz-hero-assurance {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 15px;
}
.zz-hero-assurance span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(113,184,250,.25);
  border-radius: 999px;
  background: rgba(4,28,59,.34);
  color: #d9ebfc;
  font-size: 9px;
  font-weight: 650;
  white-space: nowrap;
}
.zz-hero-assurance span::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 2px solid #f8b51b;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(248,181,27,.08);
}
.zz-dashboard-art {
  position: absolute;
  z-index: 1;
  inset: 0 20px 0 auto;
  display: flex;
  width: 55%;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}
.zz-dashboard-art svg {
  position: absolute;
  inset: 0 auto 0 -10px;
  width: 68%;
  height: 100%;
}
.zz-dashboard-art > div {
  position: relative;
  z-index: 2;
  width: 36%;
  margin: 18px 0 0 auto;
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,.18);
}
.zz-dashboard-art strong {
  display: block;
  color: #fff;
  font-size: clamp(18px,1.7vw,27px);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.zz-dashboard-art small {
  display: block;
  margin-top: 10px;
  color: #f8c653;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}

html[data-zz-area="admin"][data-zz-page="admin"] .zz-executive-metric {
  min-height: 204px;
  overflow: hidden;
}
html[data-zz-area="admin"][data-zz-page="admin"] .zz-executive-metric .kpi {
  display: flex;
  min-height: 201px !important;
  flex-direction: column;
  padding: 17px !important;
}
html[data-zz-area="admin"][data-zz-page="admin"] .zz-executive-metric .kpi .value {
  margin-top: 8px;
  font-size: 32px !important;
}
.zz-kpi-spark {
  display: block;
  width: 100%;
  height: 28px;
  margin: 5px 0 7px;
  border-bottom: 1px solid color-mix(in srgb,var(--zz-metric-accent) 16%,#edf2f7);
}
.zz-kpi-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.zz-kpi-spark polyline {
  fill: none;
  stroke: var(--zz-metric-accent,#1267d6);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
html[data-zz-area="admin"][data-zz-page="admin"] .zz-executive-metric .sub {
  flex: 1;
  margin-top: 0;
  font-size: 10px;
}
.zz-kpi-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  margin-top: 8px;
  color: var(--zz-metric-accent,#1267d6);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
}
.zz-kpi-link:hover { text-decoration: underline; }
.zz-kpi-link span { font-size: 14px; line-height: 1; }

html[data-zz-area="admin"][data-zz-page="admin"] .zz-intelligence-panel > .pad:first-child {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.zz-analytics-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border: 1px solid #d8e4f0;
  border-radius: 10px;
  background: #eef4fa;
  font-size: 9px;
  white-space: nowrap;
}
.zz-analytics-toolbar span { padding: 6px 8px; color: #17835e; font-weight: 700; }
.zz-analytics-toolbar b { padding: 7px 9px; border-radius: 7px; background: #1267d6; color: #fff; font-weight: 700; box-shadow: 0 5px 12px rgba(18,103,214,.18); }

html[data-zz-area="vendor"][data-zz-page="vendor"] .zz-vendor-command-grid > .zz-executive-metric:nth-child(3) { --zz-metric-accent:#dd8a00; }
html[data-zz-area="client"] .dashboardGrid > .portalAction:nth-child(2) { border-top-color: #7b47c8 !important; }
html[data-zz-area="client"] .dashboardGrid > .portalAction:nth-child(2) .portalCardIcon { border-color: #dfd2f5 !important; background: #f2ecfc !important; color: #7540c2 !important; }
html[data-zz-area="client"] .dashboardGrid > .portalAction:nth-child(3) { border-top-color: #dd8a00 !important; }
html[data-zz-area="client"] .dashboardGrid > .portalAction:nth-child(3) .portalCardIcon { border-color: #f2dfb7 !important; background: #fff6e5 !important; color: #ad6c00 !important; }
html[data-zz-area="courier"] #stats > .stat:nth-child(2) { border-top-color: #099bcf !important; }
html[data-zz-area="courier"] #stats > .stat:nth-child(3) { border-top-color: #7b47c8 !important; }
html[data-zz-area="courier"] #stats > .stat:nth-child(4) { border-top-color: #dd8a00 !important; }

@media (max-width: 1080px) {
  html[data-zz-area="admin"][data-zz-page="admin"] .zz-purpose-head > div:first-child { max-width: 64%; }
  .zz-dashboard-art { width: 42%; opacity: .62; }
  .zz-dashboard-art > div { display: none; }
}
@media (max-width: 720px) {
  html[data-zz-area="admin"][data-zz-page="admin"] .zz-purpose-head { min-height: 220px !important; }
  html[data-zz-area="admin"][data-zz-page="admin"] .zz-purpose-head > div:first-child { max-width: 100%; }
  html[data-zz-area="admin"][data-zz-page="admin"] .zz-page-context { position: static; }
  .zz-dashboard-art { display: none; }
  .zz-hero-assurance { margin-right: 0; }
  html[data-zz-area="admin"][data-zz-page="admin"] .zz-intelligence-panel > .pad:first-child { align-items: flex-start; flex-direction: column; }
}

/* ================================================================
   Unified premium access and portal component system
   ================================================================ */
html[data-zz-area="marketplace"][data-zz-page="login"] body {
  display: grid !important;
  min-height: 100vh;
  place-items: center;
  padding: 24px !important;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 10% 10%,rgba(33,131,231,.22),transparent 28rem),
    radial-gradient(circle at 92% 88%,rgba(11,90,173,.18),transparent 30rem),
    linear-gradient(145deg,#eaf2fb,#f8fafc 48%,#e8f2fc) !important;
  color: #10233e;
}
html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-login {
  display: grid !important;
  grid-template-columns: minmax(0,1.08fr) minmax(430px,.92fr) !important;
  gap: 0 !important;
  width: min(1280px,100%) !important;
  min-height: min(760px,calc(100vh - 48px));
  padding: 0 !important;
  align-items: stretch !important;
  overflow: hidden;
  border: 1px solid rgba(20,72,129,.16);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 34px 90px rgba(5,35,72,.2),0 2px 7px rgba(5,35,72,.08);
}
html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-visual {
  align-self: stretch;
  min-height: 100%;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 76% 42%,rgba(21,130,240,.34),transparent 24rem),
    radial-gradient(circle at 9% 95%,rgba(248,181,27,.1),transparent 18rem),
    linear-gradient(145deg,#04162e 0%,#082f59 58%,#073f70 100%) !important;
  box-shadow: none !important;
}
html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-visual::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 34px;
  right: 0;
  bottom: 34px;
  width: 1px;
  background: linear-gradient(transparent,rgba(102,185,255,.72),rgba(248,181,27,.52),transparent);
  pointer-events: none;
}
html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-visual::before {
  inset: 0;
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(135deg,#000,transparent 68%);
  mask-image: linear-gradient(135deg,#000,transparent 68%);
}
html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-visual .heroIn {
  display: flex;
  height: 100%;
  min-height: 720px;
  flex-direction: column;
  padding: 44px 46px 38px !important;
}
.zz-login-brand {
  width: max-content;
  color: #fff !important;
  text-decoration: none;
}
.zz-login-brand img {
  width: 88px !important;
  height: 62px !important;
  max-width: 88px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: contain;
  background: transparent !important;
}
.zz-login-brand > span { display: grid; gap: 2px; }
.zz-login-brand strong { color: #fff; font-size: 19px; font-weight: 750; letter-spacing: -.02em; }
.zz-login-brand small { color: #9fc5ea; font-size: 9px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.zz-login-eyebrow {
  display: block;
  margin-top: 46px;
  color: #f8bd35;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .15em;
  text-transform: uppercase;
}
html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-visual h1 {
  position: relative;
  z-index: 2;
  max-width: 580px;
  margin: 11px 0 0;
  color: #fff;
  font-size: clamp(39px,4.3vw,61px);
  font-weight: 680;
  line-height: 1.02;
  letter-spacing: -.05em;
}
html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-visual h1 span { color: #62b6ff; }
html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-visual p {
  position: relative;
  z-index: 2;
  max-width: 540px;
  margin-top: 17px;
  color: #c5d9ed;
  font-size: 15px;
  line-height: 1.65;
}
.zz-login-network {
  position: absolute;
  z-index: 1;
  top: 220px;
  right: -90px;
  width: 78%;
  opacity: .8;
  pointer-events: none;
}
.zz-login-network svg { display: block; width: 100%; }
.zz-login-roles {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
  margin-top: auto;
}
.zz-login-roles span {
  display: grid;
  min-height: 72px;
  place-items: end start;
  padding: 13px;
  border: 1px solid rgba(135,193,247,.2);
  border-radius: 13px;
  background: rgba(2,25,54,.42);
  color: #e6f2ff;
  font-size: 10px;
  font-weight: 700;
  backdrop-filter: blur(8px);
}
.zz-login-roles span::before { content: ""; width: 9px; height: 9px; border: 2px solid #f8b51b; border-radius: 50%; }
.zz-login-statement {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 3px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.13);
}
.zz-login-statement b { color: #fff; font-size: 12px; }
.zz-login-statement span { color: #9fb9d3; font-size: 10px; }
html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-visual > .zz-auth-proof { display: none; }

html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-card {
  display: flex;
  align-self: stretch;
  min-height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(145deg,#fff,#f9fbfe) !important;
  box-shadow: none !important;
}
html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-card > .head {
  min-height: 108px;
  padding: 22px 38px;
  border-bottom: 1px solid #e5edf5;
  background: linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}
.zz-login-card-brand img { width: 104px; height: 62px; object-fit: contain; }
.zz-login-home { color: #45617e; font-size: 10px; font-weight: 700; text-decoration: none; }
.zz-login-home::before { content: "←"; margin-right: 7px; color: #1267d6; }
html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-card form {
  display: flex;
  width: min(480px,100%);
  flex: 1;
  align-self: center;
  justify-content: center;
  gap: 17px;
  padding: 40px 34px 34px !important;
}
.zz-login-heading > span { color: #1267d6; font-size: 9px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.zz-login-heading h2 { margin: 8px 0 0; color: #071b35; font-size: 32px; font-weight: 680; letter-spacing: -.04em; }
.zz-login-heading p { margin: 8px 0 5px; color: #65778c; font-size: 12px; line-height: 1.55; }
.zz-auth-field { display: grid !important; gap: 7px; margin: 0 !important; color: #263c55 !important; font-size: 11px !important; font-weight: 700 !important; }
.zz-auth-control { position: relative; display: block; }
.zz-auth-control i {
  position: absolute;
  z-index: 2;
  left: 14px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #eaf3ff;
  color: #1267d6;
  font-style: normal;
  font-size: 10px;
  font-weight: 750;
  transform: translateY(-50%);
}
html[data-zz-area="marketplace"][data-zz-page="login"] .zz-auth-control input {
  min-height: 54px;
  padding: 13px 14px 13px 47px !important;
  border: 1px solid #d5e1ee !important;
  border-radius: 12px !important;
  background: #f9fbfe !important;
  color: #10233e !important;
  font: inherit;
  box-shadow: inset 0 1px 2px rgba(5,35,72,.025);
}
html[data-zz-area="marketplace"][data-zz-page="login"] .zz-auth-control input:focus { border-color: #6eaceb !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(18,103,214,.09) !important; }
.zz-login-form-meta { display: flex; justify-content: space-between; gap: 12px; color: #718198; font-size: 10px; font-weight: 650; }
.zz-login-form-meta span::before { content: "●"; margin-right: 6px; color: #14a275; }
.zz-login-form-meta a { color: #1267d6; text-decoration: none; }
.zz-login-submit { display: flex !important; width: 100%; min-height: 51px; align-items: center; justify-content: space-between; padding-inline: 18px !important; border-radius: 12px !important; }
.zz-login-submit span { font-size: 18px; }
.zz-login-divider { position: relative; height: 19px; margin-top: 4px; text-align: center; }
.zz-login-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #e2eaf2; }
.zz-login-divider span { position: relative; padding: 0 11px; background: #fbfcfe; color: #8492a3; font-size: 9px; font-weight: 650; }
.zz-login-account-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.zz-login-account-actions a {
  display: grid;
  min-height: 48px;
  place-items: center;
  padding: 8px;
  border: 1px solid #dce6f0;
  border-radius: 10px;
  background: #fff;
  color: #2d4661;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.zz-login-account-actions a:hover { border-color: #8dbbe8; background: #f3f8fe; color: #1267d6; }
.zz-login-security { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; color: #718198; font-size: 8px; font-weight: 650; }
.zz-login-security span::before { content: "✓"; margin-right: 4px; color: #15996f; }
html[data-zz-area="marketplace"][data-zz-page="login"] .msg { margin: 0; border-color: #d8e5f1; background: #f1f7fd; color: #284c70; font-size: 11px; }
html[data-zz-area="marketplace"][data-zz-page="login"] .msg.err { border-color: #f1c4ca; background: #fff3f4; color: #b52d3a; }
html[data-zz-area="marketplace"][data-zz-page="login"] .msg.ok { border-color: #bfe4d4; background: #edf9f3; color: #08734f; }

/* Dashboard welcome language shared by seller and courier workspaces. */
html[data-zz-area="vendor"][data-zz-page="vendor"] .zz-dashboard-welcome {
  min-height: 178px !important;
  margin-bottom: 22px;
  padding: 22px 28px !important;
  background:
    radial-gradient(circle at 58% 44%,rgba(13,126,236,.32),transparent 20rem),
    linear-gradient(114deg,#061a35 0%,#073260 54%,#072b54 100%) !important;
}
html[data-zz-area="vendor"][data-zz-page="vendor"] .zz-dashboard-welcome > div:first-child { align-self: center; max-width: 50%; }
html[data-zz-area="vendor"][data-zz-page="vendor"] .zz-dashboard-welcome .zz-page-emblem { display: none; }
html[data-zz-area="vendor"][data-zz-page="vendor"] .zz-dashboard-welcome .zz-page-context { position: absolute; z-index: 5; top: 16px; right: 17px; }
.zz-courier-welcome {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 178px;
  align-items: center;
  margin-bottom: 20px;
  padding: 24px 28px;
  overflow: hidden;
  border: 1px solid rgba(44,137,229,.4);
  border-radius: 18px;
  background: radial-gradient(circle at 58% 44%,rgba(13,126,236,.32),transparent 20rem),linear-gradient(114deg,#061a35,#073260 56%,#072b54);
  box-shadow: 0 18px 42px rgba(5,40,81,.16);
}
.zz-courier-welcome > div:first-child { position: relative; z-index: 3; max-width: 50%; }
.zz-courier-welcome h2 { margin: 7px 0 0; color: #fff; font-size: 34px; font-weight: 680; letter-spacing: -.04em; }
.zz-courier-welcome p { max-width: 590px; margin: 7px 0 0; color: #c8dcf2; font-size: 12px; line-height: 1.55; }
.zz-courier-welcome .zz-dashboard-art { width: 53%; }

html[data-zz-area="vendor"][data-zz-page="vendor"] .zz-executive-metric { min-height: 184px; }
html[data-zz-area="vendor"][data-zz-page="vendor"] .zz-executive-metric .kpi { display: flex; min-height: 181px !important; flex-direction: column; }
html[data-zz-area="vendor"][data-zz-page="vendor"] .zz-executive-metric .sub { flex: 1; }

/* Premium navigation finishing: stronger brand zone and quieter footer actions. */
html[data-zz-area="admin"] .sidebar > .brand,
html[data-zz-area="vendor"] .sidebar > .brand {
  min-height: 92px;
  padding: 10px 4px 20px !important;
  border-bottom: 1px solid rgba(144,194,241,.15);
}
html[data-zz-area="admin"] .sidebar > .brand > div:last-child,
html[data-zz-area="vendor"] .sidebar > .brand > div:last-child { color: #fff !important; font-size: 12px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
html[data-zz-area="admin"] .sideMeta,
html[data-zz-area="vendor"] .sideMeta {
  border-color: rgba(116,180,241,.18) !important;
  background: linear-gradient(145deg,rgba(25,105,190,.17),rgba(4,27,55,.2)) !important;
  color: #a9c4df !important;
}
html[data-zz-area="admin"] .zz-sidebar-logout .btn.danger,
html[data-zz-area="vendor"] .zz-sidebar-logout .btn.danger {
  border-color: rgba(239,94,108,.24) !important;
  background: rgba(184,44,58,.12) !important;
  color: #ffadb6 !important;
  box-shadow: none !important;
}

/* Every operational modal uses the same designed interaction surface. */
html[data-zz-area="admin"] .modalBackdrop,
html[data-zz-area="vendor"] .modalBackdrop,
html[data-zz-area="admin"] .zzAlertBackdrop,
html[data-zz-area="vendor"] .zzAlertBackdrop {
  padding: 24px !important;
  background: rgba(3,18,37,.68) !important;
  backdrop-filter: blur(10px) saturate(120%);
}
html[data-zz-area="admin"] .modalBackdrop.show,
html[data-zz-area="vendor"] .modalBackdrop.show { display: grid !important; place-items: center; }
html[data-zz-area="admin"] .modal,
html[data-zz-area="vendor"] .modal,
html[data-zz-area="vendor"] .zzAlert {
  position: relative;
  width: min(720px,100%) !important;
  max-height: min(820px,calc(100vh - 48px));
  margin: 0 !important;
  overflow: auto;
  border: 1px solid rgba(130,176,221,.48) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 35px 90px rgba(1,18,39,.34),0 2px 6px rgba(1,18,39,.13) !important;
}
html[data-zz-area="admin"] .modal::before,
html[data-zz-area="vendor"] .modal::before,
html[data-zz-area="vendor"] .zzAlert::before { content: ""; position: absolute; z-index: 3; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg,#1267d6,#16a2df 48%,#7b47c8 76%,#f8b51b); }
html[data-zz-area="admin"] .modalHead,
html[data-zz-area="vendor"] .modalHead,
html[data-zz-area="vendor"] .zzAlertHead {
  min-height: 76px;
  padding: 20px 24px !important;
  border-bottom: 1px solid #dfe8f1 !important;
  background: radial-gradient(circle at 90% 0,rgba(35,128,225,.11),transparent 13rem),linear-gradient(145deg,#fff,#f4f8fc) !important;
  color: #071b35 !important;
  font-size: 19px !important;
}
html[data-zz-area="admin"] .modalBody,
html[data-zz-area="vendor"] .modalBody,
html[data-zz-area="vendor"] .zzAlertBody { padding: 24px !important; background: #fbfdff; }
html[data-zz-area="admin"] .modalFoot,
html[data-zz-area="vendor"] .modalFoot,
html[data-zz-area="vendor"] .zzAlertFoot { min-height: 70px; padding: 14px 24px !important; border-top: 1px solid #dfe8f1 !important; background: #fff; }
html[data-zz-area="admin"] .modalBody :is(.formGrid,.row2,.row3) > :is(label,div),
html[data-zz-area="vendor"] .modalBody :is(.formGrid,.row2,.row3) > :is(label,div) {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e0e9f2;
  border-radius: 12px;
  background: #fff;
}

/* Rich, consistent information presentation throughout inner workspaces. */
html[data-zz-area="admin"] :is(.summaryBox,.vendorBlock,.acc,.panelBox),
html[data-zz-area="vendor"] :is(.summaryBox,.vendorBlock,.acc,.panelBox),
html[data-zz-area="courier"] :is(.vendorBlock,.code) {
  border-color: #dce7f2 !important;
  background: linear-gradient(145deg,#fff,#f5f9fd) !important;
  box-shadow: 0 7px 18px rgba(8,46,88,.045);
}
html[data-zz-area="admin"] :is(.badge,.pill),
html[data-zz-area="vendor"] :is(.badge,.pill),
html[data-zz-area="courier"] :is(.status,.pill) { font-weight: 700 !important; letter-spacing: .01em; }
html[data-zz-area="admin"] .modalBody :is(input,select,textarea),
html[data-zz-area="vendor"] .modalBody :is(input,select,textarea) { min-height: 48px; border-color: #d3e0ed !important; background: #f9fbfe !important; }
html[data-zz-area="admin"] .modalBody :is(input,select,textarea):focus,
html[data-zz-area="vendor"] .modalBody :is(input,select,textarea):focus { border-color: #70adeb !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(18,103,214,.09) !important; outline: 0; }

@media (max-width: 980px) {
  html[data-zz-area="marketplace"][data-zz-page="login"] body { padding: 16px !important; }
  html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-login { grid-template-columns: minmax(0,1fr) !important; min-height: 0; }
  html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-visual .heroIn { min-height: 510px; }
  .zz-login-network { top: 150px; width: 62%; }
  html[data-zz-area="vendor"][data-zz-page="vendor"] .zz-dashboard-welcome > div:first-child { max-width: 64%; }
}
@media (max-width: 720px) {
  html[data-zz-area="marketplace"][data-zz-page="login"] body { display: block !important; padding: 0 !important; }
  html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-login {
    width: 100vw !important;
    max-width: 100vw !important;
    border: 0;
    border-radius: 0;
  }
  html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-login > * {
    width: 100%;
    min-width: 0;
  }
  html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-visual .heroIn {
    width: 100%;
    min-width: 0;
    min-height: 420px;
    padding: 28px 22px !important;
  }
  .zz-login-eyebrow { margin-top: 25px; }
  html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-visual h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 35px;
  }
  html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-visual p { max-width: 100%; overflow-wrap: anywhere; }
  .zz-login-network { top: 132px; right: -100px; width: 90%; opacity: .48; }
  .zz-login-roles { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .zz-login-roles span { min-height: 48px; }
  html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-card > .head { min-width: 0; padding-inline: 22px; }
  .zz-login-card-brand img { width: 88px; }
  .zz-login-home { white-space: nowrap; }
  html[data-zz-area="marketplace"][data-zz-page="login"] .zz-universal-card form {
    width: 100%;
    min-width: 0;
    padding: 30px 22px 34px !important;
  }
  .zz-login-account-actions { grid-template-columns: minmax(0,1fr); }
  html[data-zz-area="vendor"][data-zz-page="vendor"] .zz-dashboard-welcome { min-height: 220px !important; }
  html[data-zz-area="vendor"][data-zz-page="vendor"] .zz-dashboard-welcome > div:first-child { max-width: 100%; }
  html[data-zz-area="vendor"][data-zz-page="vendor"] .zz-dashboard-welcome .zz-page-context { position: static; }
  .zz-courier-welcome { min-height: 220px; padding: 22px; }
  .zz-courier-welcome > div:first-child { max-width: 100%; }
  .zz-courier-welcome .zz-dashboard-art { display: none; }
  .zz-courier-welcome h2 { font-size: 29px; }
  html[data-zz-area="admin"] .modalBackdrop,
  html[data-zz-area="vendor"] .modalBackdrop { padding: 10px !important; }
}

/* Final sidebar state: clean premium pills without stray underlines. */
html[data-zz-area="admin"] .nav a,
html[data-zz-area="vendor"] .nav a,
html[data-zz-area="courier"][data-zz-page="courier"] .nav button {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent !important;
  outline: 0;
  box-shadow: none !important;
  transform: none !important;
}
html[data-zz-area="admin"] .nav a::after,
html[data-zz-area="vendor"] .nav a::after,
html[data-zz-area="courier"][data-zz-page="courier"] .nav button::after { display: none !important; content: none !important; }
html[data-zz-area="admin"] .nav a:hover,
html[data-zz-area="vendor"] .nav a:hover,
html[data-zz-area="courier"][data-zz-page="courier"] .nav button:hover {
  border-color: transparent !important;
  background: linear-gradient(90deg,rgba(35,128,230,.18),rgba(35,128,230,.06)) !important;
  box-shadow: none !important;
}
html[data-zz-area="admin"] .nav a.active,
html[data-zz-area="vendor"] .nav a.active,
html[data-zz-area="courier"][data-zz-page="courier"] .nav button.active {
  border-color: transparent !important;
  background: linear-gradient(100deg,#1a78df 0%,#1264c5 100%) !important;
  box-shadow: 0 10px 24px rgba(3,66,144,.3) !important;
}
html[data-zz-area="admin"] .nav a.active .zz-nav-meta,
html[data-zz-area="vendor"] .nav a.active .zz-nav-meta { color: #b9dcff !important; }
html[data-zz-area="admin"] .nav a:focus-visible,
html[data-zz-area="vendor"] .nav a:focus-visible,
html[data-zz-area="courier"][data-zz-page="courier"] .nav button:focus-visible { outline: 2px solid rgba(248,181,27,.9); outline-offset: 2px; }

@media (min-width: 981px) {
  html[data-zz-area="client"][data-zz-page="client"] .clientNav .btn {
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html[data-zz-area="client"][data-zz-page="client"] .clientNav .btn:hover {
    border-color: transparent !important;
    background: linear-gradient(90deg,rgba(35,128,230,.18),rgba(35,128,230,.06)) !important;
    color: #fff !important;
  }
  html[data-zz-area="client"][data-zz-page="client"] .clientNav .btn:first-of-type {
    border-color: transparent !important;
    background: linear-gradient(100deg,#1a78df 0%,#1264c5 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(3,66,144,.3) !important;
  }
}

html[data-zz-area="admin"][data-zz-page="quality"] #reviewsBody {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
  margin-top: 16px;
  color: #172b45;
}
.zz-review-card {
  display: flex;
  min-width: 0;
  min-height: 238px;
  flex-direction: column;
  padding: 19px;
  border: 1px solid #dfe8f2;
  border-radius: 16px;
  background: linear-gradient(145deg,#fff,#fbfdff);
  box-shadow: 0 10px 26px rgba(7,42,82,.055);
}
.zz-review-card > header,
.zz-review-card > footer,
.zz-review-identity,
.zz-review-flags,
.zz-review-rating { display: flex; align-items: center; }
.zz-review-card > header { justify-content: space-between; gap: 12px; }
.zz-review-identity { min-width: 0; gap: 11px; }
.zz-review-avatar { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border: 1px solid #cfe2f8; border-radius: 13px; background: linear-gradient(145deg,#eaf4ff,#dcecff); color: #1267d6; font-size: 14px; font-weight: 800; }
.zz-review-identity > span:last-child { display: grid; min-width: 0; gap: 2px; }
.zz-review-identity small { color: #77879a; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.zz-review-identity b { overflow: hidden; color: #092445; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.zz-review-flags { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.zz-purchase-state { padding: 5px 8px; border: 1px solid #e3e9f0; border-radius: 999px; background: #f7f9fc; color: #718095; font-size: 10px; font-weight: 700; }
.zz-purchase-state.verified { border-color: #bce7d4; background: #edf9f4; color: #087b55; }
.zz-review-rating { gap: 9px; margin-top: 16px; }
.zz-review-rating > span { color: #f3a709; font-size: 18px; letter-spacing: .08em; }
.zz-review-rating small { color: #78879a; font-size: 10px; font-weight: 650; }
.zz-review-copy { flex: 1; margin-top: 10px; }
.zz-review-copy h4 { margin: 0; color: #0a2240; font-size: 15px; font-weight: 700; }
.zz-review-copy p { margin: 6px 0 0; color: #5f7085; font-size: 12px; line-height: 1.55; }
.zz-review-card > footer { justify-content: space-between; gap: 12px; margin: 16px -19px -19px; padding: 13px 19px; border-top: 1px solid #e8eef5; background: #f9fbfe; }
.zz-review-card > footer > span { color: #7b899b; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.zz-review-card > footer .btn { min-height: 34px; padding: 7px 11px; font-size: 11px; }

.zz-requirement-row { display: grid; grid-template-columns: 9px minmax(0,1fr); gap: 10px; align-items: start; padding: 11px 0; border-top: 1px solid #e7edf4; }
.zz-requirement-mark { width: 8px; height: 8px; margin-top: 5px; border: 2px solid #2380e4; border-radius: 50%; }
.zz-requirement-row > span:last-child { display: grid; gap: 3px; }
.zz-requirement-row b { color: #17324f; font-size: 12px; }
.zz-requirement-row small { color: #74849a; font-size: 10px; line-height: 1.4; }
.zz-document-review { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid #e1e9f2; border-radius: 13px; background: #fbfdff; }
.zz-document-review + .zz-document-review { margin-top: 9px; }
.zz-document-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: #eaf4ff; color: #1267d6; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.zz-document-copy,
.zz-document-state { display: grid; min-width: 0; gap: 3px; }
.zz-document-copy b { overflow: hidden; color: #102a48; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.zz-document-copy small,
.zz-document-state small { color: #738398; font-size: 10px; }
.zz-document-state { justify-items: end; }
.zz-document-state a { color: #1267d6; font-size: 10px; font-weight: 700; text-decoration: none; }
.zz-document-actions { grid-column: 2 / -1; justify-content: flex-end; padding-top: 9px; border-top: 1px solid #e9eef4; }
.zz-document-actions .btn { min-height: 34px; padding: 7px 11px; font-size: 10px; }
.zz-premium-empty { display: grid; min-height: 120px; place-items: center; padding: 20px; border: 1px dashed #d8e3ee; border-radius: 14px; background: #f9fbfe; color: #708198; font-size: 12px; text-align: center; }

/* Compact animated checkout-to-doorstep journey on universal access. */
.zz-order-motion {
  position: relative;
  z-index: 4;
  width: min(500px,100%);
  margin-top: 20px;
  padding: 12px 14px 11px;
  overflow: hidden;
  border: 1px solid rgba(114,184,247,.22);
  border-radius: 15px;
  background: linear-gradient(135deg,rgba(2,29,61,.68),rgba(12,71,124,.45));
  box-shadow: inset 0 1px rgba(255,255,255,.055),0 14px 32px rgba(1,17,38,.15);
  backdrop-filter: blur(10px);
}
.zz-order-motion::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 120%,rgba(36,146,244,.2),transparent 56%);
}
.zz-motion-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.zz-motion-head > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #eef7ff;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.zz-motion-head > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #35d49a;
  box-shadow: 0 0 0 4px rgba(53,212,154,.11),0 0 14px rgba(53,212,154,.7);
  animation: zzJourneyLive 1.8s ease-in-out infinite;
}
.zz-motion-head small { color: #87aacd; font-size: 9px; font-weight: 600; }
.zz-motion-route {
  position: relative;
  height: 34px;
  margin: 7px 5px 0;
}
.zz-motion-line,
.zz-motion-line i {
  position: absolute;
  top: 16px;
  right: 8px;
  left: 8px;
  height: 2px;
  border-radius: 999px;
}
.zz-motion-line { overflow: hidden; background: rgba(130,184,232,.18); }
.zz-motion-line i {
  top: 0;
  right: 0;
  left: 0;
  background: linear-gradient(90deg,#2e97f1,#69c0ff 46%,#f8b51b 76%,#35d49a);
  box-shadow: 0 0 12px rgba(52,157,245,.58);
  transform: scaleX(.02);
  transform-origin: left center;
  animation: zzJourneyProgress 7.2s cubic-bezier(.42,0,.2,1) infinite;
}
.zz-motion-node {
  position: absolute;
  z-index: 3;
  top: 11px;
  width: 12px;
  height: 12px;
  border: 2px solid #65baff;
  border-radius: 50%;
  background: #082f59;
  box-shadow: 0 0 0 4px rgba(32,142,237,.1);
}
.zz-motion-node-order { left: 1%; animation: zzJourneyNode 7.2s ease-in-out infinite; }
.zz-motion-node-pack { left: calc(50% - 6px); animation: zzJourneyNode 7.2s 2.35s ease-in-out infinite; }
.zz-motion-node-deliver { right: 1%; border-color: #35d49a; animation: zzJourneyNodeGreen 7.2s 5.15s ease-in-out infinite; }
.zz-motion-package,
.zz-motion-courier {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  color: #061b35;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.24));
}
.zz-motion-package {
  top: 4px;
  left: 3%;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  background: linear-gradient(145deg,#ffd15a,#f5ab08);
  animation: zzPackageMove 7.2s cubic-bezier(.42,0,.2,1) infinite;
}
.zz-motion-package svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.zz-motion-courier {
  top: 5px;
  left: 44%;
  width: 32px;
  height: 24px;
  color: #fff;
  opacity: 0;
  animation: zzCourierMove 7.2s cubic-bezier(.42,0,.2,1) infinite;
}
.zz-motion-courier svg { width: 28px; height: 20px; fill: #1677e8; stroke: #dff1ff; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.zz-motion-labels {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  color: #9cb8d2;
  font-size: 8px;
  font-weight: 650;
}
.zz-motion-labels span:nth-child(2) { text-align: center; }
.zz-motion-labels span:last-child { color: #9adfc6; text-align: right; }
@keyframes zzJourneyProgress {
  0%,5% { transform: scaleX(.02); }
  82%,94% { transform: scaleX(1); }
  100% { transform: scaleX(.02); }
}
@keyframes zzPackageMove {
  0%,4% { left: 2%; opacity: 0; transform: translateY(2px) scale(.86); }
  9% { opacity: 1; transform: translateY(0) scale(1); }
  36% { left: calc(50% - 13px); opacity: 1; transform: translateY(0) scale(1); }
  42%,100% { left: calc(50% - 13px); opacity: 0; transform: translateY(-3px) scale(.82); }
}
@keyframes zzCourierMove {
  0%,36% { left: 43%; opacity: 0; transform: translateY(1px); }
  43% { opacity: 1; }
  80%,92% { left: calc(96% - 32px); opacity: 1; transform: translateY(1px); }
  98%,100% { left: calc(96% - 32px); opacity: 0; transform: translateY(-2px); }
}
@keyframes zzJourneyNode {
  0%,12%,100% { border-color: #65baff; background: #082f59; box-shadow: 0 0 0 4px rgba(32,142,237,.1); }
  6% { border-color: #f8b51b; background: #f8b51b; box-shadow: 0 0 0 7px rgba(248,181,27,.12),0 0 15px rgba(248,181,27,.5); }
}
@keyframes zzJourneyNodeGreen {
  0%,12%,100% { background: #082f59; box-shadow: 0 0 0 4px rgba(53,212,154,.1); }
  6% { background: #35d49a; box-shadow: 0 0 0 7px rgba(53,212,154,.12),0 0 15px rgba(53,212,154,.54); }
}
@keyframes zzJourneyLive { 50% { opacity: .5; transform: scale(.78); } }

@media (prefers-reduced-motion: reduce) {
  .zz-motion-head > span i,
  .zz-motion-line i,
  .zz-motion-node,
  .zz-motion-package,
  .zz-motion-courier { animation: none !important; }
  .zz-motion-line i { transform: scaleX(1); }
  .zz-motion-package { display: none; }
  .zz-motion-courier { left: calc(96% - 32px); opacity: 1; }
}

html[data-zz-area="vendor"][data-zz-page="quality"] #productsBody { display: grid; gap: 9px; margin-top: 14px; }
html[data-zz-area="vendor"][data-zz-page="quality"] #productsBody > div {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 6px 12px;
  align-items: center;
  padding: 13px !important;
  border: 1px solid #e1e9f2 !important;
  border-radius: 13px;
  background: #fbfdff;
}
html[data-zz-area="vendor"][data-zz-page="quality"] #productsBody > div > b { color: #102a48; font-size: 12px; }
html[data-zz-area="vendor"][data-zz-page="quality"] #productsBody > div > .muted { grid-column: 1; font-size: 10px; }
html[data-zz-area="vendor"][data-zz-page="quality"] #productsBody > div > .btn { grid-column: 2; grid-row: 1 / span 2; min-height: 35px; padding: 7px 11px; font-size: 10px; }
html[data-zz-area="vendor"][data-zz-page="quality"] #qualityBody > .card { margin: 14px 0 18px; border: 1px solid #cfe2f8; background: linear-gradient(145deg,#eef6ff,#fff); }
html[data-zz-area="vendor"][data-zz-page="quality"] #qualityBody > h3 { margin: 20px 0 9px; color: #102a48; font-size: 13px; }
html[data-zz-area="vendor"][data-zz-page="quality"] #qualityBody > .kv { margin-bottom: 8px; padding: 12px 13px; border: 1px solid #e2e9f1; border-radius: 12px; background: #fbfdff; }
html[data-zz-area="vendor"][data-zz-page="quality"] #qualityBody > .formGrid { margin-bottom: 14px; padding: 15px; border: 1px solid #e1e9f2; border-radius: 14px; background: #f9fbfe; }

html[data-zz-area="vendor"][data-zz-page="trust"] #riskBody > div,
html[data-zz-area="vendor"][data-zz-page="trust"] #qualityBody > div {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 !important;
  border-bottom: 1px solid #e7edf4 !important;
}
html[data-zz-area="vendor"][data-zz-page="trust"] #riskBody > div:last-child,
html[data-zz-area="vendor"][data-zz-page="trust"] #qualityBody > div:last-child { border-bottom: 0 !important; }
html[data-zz-area="vendor"][data-zz-page="trust"] #riskBody b,
html[data-zz-area="vendor"][data-zz-page="trust"] #qualityBody b { color: #17324f; font-weight: 700; }
html[data-zz-area="vendor"][data-zz-page="trust"] #actionsBody { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
html[data-zz-area="vendor"][data-zz-page="trust"] #actionsBody .btn { display: flex; min-height: 52px; align-items: center; justify-content: flex-start; border-color: #dce7f2; background: #f8fbff; color: #184673; font-size: 11px; text-align: left; }

@media (max-width: 900px) {
  html[data-zz-area="admin"][data-zz-page="quality"] #reviewsBody { grid-template-columns: minmax(0,1fr); }
  html[data-zz-area="vendor"][data-zz-page="trust"] #actionsBody { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .zz-review-card > header,
  .zz-review-card > footer { align-items: flex-start; flex-direction: column; }
  .zz-review-flags { justify-content: flex-start; }
  html[data-zz-area="vendor"][data-zz-page="trust"] #actionsBody { grid-template-columns: minmax(0,1fr); }
  .zz-order-motion { margin-top: 15px; padding-inline: 11px; }
  .zz-motion-head small { display: none; }
}

/* Navy + orange signature system: marketplace energy across every workspace. */
:root {
  --zz-orange-300: #ffc15a;
  --zz-orange-400: #ffad1f;
  --zz-orange-500: #ff8a00;
  --zz-orange-600: #ef6c00;
  --zz-orange-soft: #fff5e6;
  --zz-orange-line: #ffd59c;
  --zz-orange-shadow: 0 12px 28px rgba(239,108,0,.2);
}

/* Login: a warmer commerce accent while retaining the trusted navy foundation. */
html[data-zz-page="login"] body {
  background:
    radial-gradient(circle at 8% 8%, rgba(25,128,239,.2), transparent 30rem),
    radial-gradient(circle at 90% 88%, rgba(255,138,0,.12), transparent 27rem),
    linear-gradient(135deg,#eaf4ff 0%,#f8fbff 48%,#fff8ed 100%);
}
html[data-zz-page="login"] .zz-universal-login {
  box-shadow: 0 28px 80px rgba(4,24,49,.18),0 0 0 1px rgba(7,39,78,.06);
}
html[data-zz-page="login"] .zz-universal-visual {
  background:
    radial-gradient(circle at 94% 52%,rgba(255,138,0,.13),transparent 18rem),
    radial-gradient(circle at 68% 16%,rgba(31,135,241,.2),transparent 22rem),
    linear-gradient(145deg,#031831,#073765 72%,#0a4a75);
}
html[data-zz-page="login"] .zz-login-brand img { border-color: rgba(255,173,31,.34); box-shadow: 0 12px 32px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.06); }
html[data-zz-page="login"] .zz-login-eyebrow { color: var(--zz-orange-300); }
html[data-zz-page="login"] .zz-universal-visual h1 > span {
  color: transparent;
  background: linear-gradient(90deg,#59b2ff 4%,#9fd4ff 48%,#ffb326 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-zz-page="login"] .zz-auth-control:focus-within {
  border-color: var(--zz-orange-400);
  box-shadow: 0 0 0 4px rgba(255,138,0,.11),0 8px 22px rgba(9,51,94,.06);
}
html[data-zz-page="login"] .zz-auth-control:focus-within i { color: var(--zz-orange-600); }
html[data-zz-page="login"] .zz-login-submit,
html[data-zz-page="register"] .zz-register-submit,
html[data-zz-area="vendor"][data-zz-page="register"] .zz-form-actions .primary,
html[data-zz-area="courier"][data-zz-page="register"] .zz-form-actions .primary {
  border: 1px solid #f5a20b !important;
  background: linear-gradient(135deg,#ffc43d 0%,#ff9c08 55%,#f27a00 100%) !important;
  color: #13233a !important;
  box-shadow: 0 13px 28px rgba(239,108,0,.22),inset 0 1px rgba(255,255,255,.45) !important;
}
html[data-zz-page="login"] .zz-login-submit:hover,
html[data-zz-page="register"] .zz-register-submit:hover,
html[data-zz-area="vendor"][data-zz-page="register"] .zz-form-actions .primary:hover,
html[data-zz-area="courier"][data-zz-page="register"] .zz-form-actions .primary:hover { transform: translateY(-2px); filter: saturate(1.06); }
html[data-zz-page="login"] .zz-order-motion { border-color: rgba(255,173,31,.28); background: linear-gradient(135deg,rgba(2,29,61,.78),rgba(16,72,124,.56)); }
html[data-zz-page="login"] .zz-motion-package { background: linear-gradient(145deg,#ffd66a,#ff8500); }

/* Buyer registration: a complete premium split-screen onboarding experience. */
html[data-zz-page="register"] body {
  display: grid;
  min-height: 100vh;
  padding: 28px;
  color: var(--zz-ink);
  background:
    radial-gradient(circle at 5% 12%,rgba(39,139,236,.19),transparent 26rem),
    radial-gradient(circle at 95% 88%,rgba(255,138,0,.12),transparent 28rem),
    linear-gradient(135deg,#eaf4ff,#f9fbfe 48%,#fff9ef);
}
html[data-zz-page="register"] body > .zz-register-shell {
  display: grid;
  width: min(1320px,100%);
  min-height: min(880px,calc(100vh - 56px));
  margin: auto;
  padding: 0;
  grid-template-columns: minmax(390px,.88fr) minmax(600px,1.12fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(6,37,73,.08);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(3,28,57,.17);
}
html[data-zz-page="register"] .zz-register-visual {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  border-radius: 0;
  color: #fff;
  background:
    radial-gradient(circle at 84% 48%,rgba(255,138,0,.14),transparent 18rem),
    radial-gradient(circle at 20% 5%,rgba(34,139,238,.26),transparent 20rem),
    linear-gradient(155deg,#03162e 0%,#073765 72%,#0b5076 100%);
}
html[data-zz-page="register"] .zz-register-visual::after,
html[data-zz-area="courier"][data-zz-page="register"] .zz-courier-register-visual::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: 52px;
  width: 300px;
  height: 300px;
  opacity: .3;
  border: 1px solid rgba(89,178,255,.38);
  border-radius: 50%;
  background: repeating-radial-gradient(circle,transparent 0 22px,rgba(89,178,255,.1) 23px 24px);
}
html[data-zz-page="register"] .zz-register-visual .heroIn { display: flex; min-height: 100%; padding: 50px 48px 38px; flex-direction: column; }
.zz-register-brand { position: relative; z-index: 2; display: flex; width: fit-content; align-items: center; gap: 13px; color: #fff; text-decoration: none; }
html[data-zz-page="register"] .zz-register-brand img,
html[data-zz-area="courier"][data-zz-page="register"] .zz-register-brand img { content: var(--zz-logo-white); width: 92px; max-width: none; height: 68px; padding: 6px; object-fit: contain; border: 1px solid rgba(255,173,31,.28); border-radius: 13px; background: rgba(255,255,255,.04); box-shadow: none; }
.zz-register-brand > span { display: grid; gap: 2px; }
.zz-register-brand strong { color: #fff; font-size: 18px; }
.zz-register-brand small { color: #a9bdd3; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.zz-register-copy { position: relative; z-index: 2; margin-top: 55px; }
.zz-register-eyebrow { color: var(--zz-orange-300); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
html[data-zz-page="register"] .zz-register-copy h1,
html[data-zz-area="courier"][data-zz-page="register"] .zz-register-copy h1 { margin: 14px 0 0; color: #fff; font-size: clamp(38px,3.5vw,54px); font-weight: 700; line-height: 1.02; letter-spacing: -.045em; }
.zz-register-copy h1 strong { color: transparent; background: linear-gradient(90deg,#65baff,#b9dcff 48%,#ffb326); -webkit-background-clip: text; background-clip: text; }
html[data-zz-page="register"] .zz-register-copy p,
html[data-zz-area="courier"][data-zz-page="register"] .zz-register-copy p { max-width: 520px; margin: 17px 0 0; color: #c3d3e4; font-size: 14px; line-height: 1.7; }
.zz-register-benefits { position: relative; z-index: 2; display: grid; gap: 8px; margin-top: 30px; }
.zz-register-benefits > div { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 11px; align-items: center; padding: 11px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.055); backdrop-filter: blur(8px); }
.zz-register-benefits > div > span { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(255,173,31,.3); border-radius: 9px; background: rgba(255,138,0,.11); color: var(--zz-orange-300); font-size: 9px; font-weight: 800; }
.zz-register-benefits p { display: grid; gap: 2px; margin: 0 !important; }
.zz-register-benefits b { color: #fff; font-size: 12px; }
.zz-register-benefits small { color: #9fb4c9; font-size: 10px; line-height: 1.4; }
.zz-register-trust { position: relative; z-index: 2; display: flex; gap: 12px 18px; margin-top: auto; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.1); flex-wrap: wrap; }
.zz-register-trust span { color: #a9bdd1; font-size: 9px; font-weight: 700; }
.zz-register-trust span::before { content: "✓"; margin-right: 6px; color: var(--zz-orange-400); }
html[data-zz-page="register"] .zz-register-card { width: 100%; max-width: none; border: 0; border-radius: 0; box-shadow: none; }
html[data-zz-page="register"] .zz-register-head { min-height: 91px; padding: 13px 36px; border-bottom: 1px solid #e8edf3; }
.zz-register-card-logo img { width: 104px; height: 62px; object-fit: contain; }
html[data-zz-page="register"] .zz-register-head .link { color: #61748a; font-size: 11px; text-decoration: none; }
html[data-zz-page="register"] .zz-register-head .link strong { color: var(--zz-orange-600); }
html[data-zz-page="register"] .zz-register-card form { gap: 15px; padding: 30px 42px 34px; }
.zz-register-heading > span { color: #1877db; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.zz-register-heading h2 { margin: 7px 0 0; color: #071d3a; font-size: 30px; font-weight: 750; letter-spacing: -.035em; }
.zz-register-heading p { margin: 6px 0 0; color: #6a7c92; font-size: 12px; }
.zz-register-progress { display: grid; grid-template-columns: 22px 1fr 22px 1fr 22px; align-items: center; margin: 3px 0 1px; color: #8392a4; }
.zz-register-progress > span { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid #dce5ef; border-radius: 50%; background: #f8fafc; font-size: 9px; font-weight: 800; }
.zz-register-progress > span.active { border-color: var(--zz-orange-400); background: linear-gradient(145deg,#ffbd35,#ff8700); color: #142337; box-shadow: 0 0 0 5px rgba(255,138,0,.08); }
.zz-register-progress > i { height: 2px; background: linear-gradient(90deg,var(--zz-orange-400),#e5ebf2); }
.zz-register-progress > small { grid-row: 2; margin-top: 5px; font-size: 8px; font-weight: 700; }
.zz-register-progress > small:nth-of-type(1) { grid-column: 1 / 3; }
.zz-register-progress > small:nth-of-type(2) { grid-column: 3 / 5; text-align: center; }
.zz-register-progress > small:nth-of-type(3) { grid-column: 5; text-align: right; white-space: nowrap; }

/* Shared premium form language for buyer, seller and courier onboarding. */
html[data-zz-page="register"] .zz-form-section,
html[data-zz-area="vendor"][data-zz-page="register"] .zz-form-section,
html[data-zz-area="courier"][data-zz-page="register"] .zz-form-section { padding: 15px 16px 16px; border: 1px solid #e3eaf2; border-radius: 15px; background: linear-gradient(145deg,#fff,#fafcff); box-shadow: 0 8px 23px rgba(6,35,70,.035); }
.zz-form-section-head { display: grid; grid-template-columns: 31px minmax(0,1fr); gap: 10px; align-items: center; margin-bottom: 13px; }
.zz-form-section-head > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; background: var(--zz-orange-soft); color: var(--zz-orange-600); font-size: 9px; font-weight: 850; box-shadow: inset 0 0 0 1px var(--zz-orange-line); }
.zz-form-section-head h2,.zz-form-section-head h3 { margin: 0; color: #102b4b; font-size: 13px; font-weight: 750; }
.zz-form-section-head p { margin: 2px 0 0 !important; color: #7a8a9e !important; font-size: 9px !important; line-height: 1.35 !important; }
html[data-zz-page="register"] .zz-field,
html[data-zz-area="vendor"][data-zz-page="register"] .zz-field,
html[data-zz-area="courier"][data-zz-page="register"] .zz-field { display: grid; gap: 6px; margin: 0; color: #304761; font-size: 10px; font-weight: 750; }
.zz-field > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zz-field em { color: var(--zz-orange-600); font-style: normal; }
.zz-field small { color: #8a98aa; font-size: 8px; font-weight: 650; }
html[data-zz-page="register"] :is(input,select,textarea):focus,
html[data-zz-area="vendor"][data-zz-page="register"] :is(input,select,textarea):focus,
html[data-zz-area="courier"][data-zz-page="register"] :is(input,select,textarea):focus,
html[data-zz-area="admin"] :is(input,select,textarea):focus,
html[data-zz-area="vendor"] :is(input,select,textarea):focus,
html[data-zz-area="courier"] :is(input,select,textarea):focus {
  border-color: var(--zz-orange-400) !important;
  box-shadow: 0 0 0 4px rgba(255,138,0,.09) !important;
  outline: 0;
}
html[data-zz-page="register"] .zz-form-section .row { gap: 11px; }
html[data-zz-page="register"] .zz-register-submit { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 9px; border-radius: 12px; }
.zz-form-assurance { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: center; padding: 11px 13px; border: 1px solid #dce8e3; border-radius: 12px; background: #f3faf7; }
.zz-form-assurance > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: #daf4e8; color: #078454; font-weight: 900; }
.zz-form-assurance p { display: grid; gap: 2px; margin: 0 !important; }
.zz-form-assurance b { color: #193d31; font-size: 10px; }
.zz-form-assurance small { color: #698078; font-size: 9px; line-height: 1.4; }

/* Courier registration gets the same composed visual quality at a larger scale. */
html[data-zz-area="courier"][data-zz-page="register"] body { min-height: 100vh; padding: 28px; background: radial-gradient(circle at 5% 10%,rgba(30,133,233,.2),transparent 25rem),radial-gradient(circle at 94% 85%,rgba(255,138,0,.11),transparent 28rem),#f4f8fc; }
.zz-courier-register-shell { display: grid; width: min(1460px,100%); margin: 0 auto; grid-template-columns: minmax(360px,.7fr) minmax(700px,1.3fr); overflow: hidden; border: 1px solid rgba(8,40,76,.08); border-radius: 25px; background: #fff; box-shadow: 0 30px 80px rgba(3,28,57,.15); }
.zz-courier-register-visual { position: relative; display: flex; min-height: 100%; padding: 45px 38px 38px; overflow: hidden; flex-direction: column; color: #fff; background: radial-gradient(circle at 85% 42%,rgba(255,138,0,.16),transparent 18rem),linear-gradient(150deg,#03162e,#073765 72%,#0b5076); }
html[data-zz-area="courier"][data-zz-page="register"] .zz-register-copy { margin-top: 48px; }
.zz-courier-route { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 28px; padding-top: 3px; }
.zz-courier-route-line { position: absolute; top: 14px; right: 15%; left: 15%; height: 2px; background: linear-gradient(90deg,#48a7f7,var(--zz-orange-400),#36ca91); }
.zz-courier-route i { position: relative; z-index: 2; display: grid; width: 25px; height: 25px; place-items: center; justify-self: center; border: 2px solid #5db8ff; border-radius: 50%; background: #082e58; color: #fff; font-size: 8px; font-style: normal; }
.zz-courier-route i:nth-of-type(2) { border-color: var(--zz-orange-400); }
.zz-courier-route i:nth-of-type(3) { border-color: #36ca91; }
.zz-courier-route div { margin-top: 7px; color: #a9bed2; font-size: 8px; font-weight: 750; text-align: center; text-transform: uppercase; }
.zz-courier-register-visual .zz-register-benefits { margin-top: auto; padding-top: 30px; }
.zz-courier-register-card { max-width: none !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html[data-zz-area="courier"][data-zz-page="register"] .zz-courier-register-card > .head { min-height: 84px; padding: 11px 34px; border-color: #e7edf3; }
html[data-zz-area="courier"][data-zz-page="register"] .zz-courier-register-card > .head img { width: 105px; height: 62px; object-fit: contain; }
html[data-zz-area="courier"][data-zz-page="register"] .zz-courier-register-card > .head .btn { min-height: 37px; padding: 8px 16px; border-color: var(--zz-orange-line); color: var(--zz-orange-600); }
html[data-zz-area="courier"][data-zz-page="register"] .zz-courier-register-card > .body { padding: 28px 36px 34px; }
html[data-zz-area="courier"][data-zz-page="register"] .zz-register-heading { margin-bottom: 18px; }
html[data-zz-area="courier"][data-zz-page="register"] .zz-register-heading h2 { font-size: 30px; }
html[data-zz-area="courier"][data-zz-page="register"] .zz-form-section + .zz-form-section { margin-top: 12px; }
html[data-zz-area="courier"][data-zz-page="register"] .zz-form-section .grid { gap: 11px; }
html[data-zz-area="courier"][data-zz-page="register"] .zz-form-section input,
html[data-zz-area="courier"][data-zz-page="register"] .zz-form-section select,
html[data-zz-area="courier"][data-zz-page="register"] .zz-form-section textarea { min-height: 45px; border-color: #dbe4ee; background: #fbfdff; }
html[data-zz-area="courier"][data-zz-page="register"] .zz-pricing-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
html[data-zz-area="courier"][data-zz-page="register"] .zz-pricing-grid .zz-field-wide { grid-column: 1 / -1; }
html[data-zz-area="courier"][data-zz-page="register"] .zz-form-actions { margin-top: 17px; }
html[data-zz-area="courier"][data-zz-page="register"] .zz-form-actions .btn { min-height: 45px; }
html[data-zz-area="courier"][data-zz-page="register"] .zz-form-assurance { margin-top: 12px; }

/* Seller registration: retain its strong layout and add the orange commerce signature. */
html[data-zz-area="vendor"][data-zz-page="register"] .loginHero { background: radial-gradient(circle at 86% 44%,rgba(255,138,0,.16),transparent 17rem),linear-gradient(150deg,#03162e,#073765 72%,#0b5076); }
html[data-zz-area="vendor"][data-zz-page="register"] .zz-seller-eyebrow,
html[data-zz-area="vendor"][data-zz-page="register"] .zz-form-eyebrow { color: var(--zz-orange-500); }
html[data-zz-area="vendor"][data-zz-page="register"] .zz-seller-hero-copy strong { color: var(--zz-orange-300); }
html[data-zz-area="vendor"][data-zz-page="register"] .zz-seller-benefits > div > span,
html[data-zz-area="vendor"][data-zz-page="register"] .zz-seller-progress .active i { border-color: var(--zz-orange-line); background: rgba(255,138,0,.14); color: var(--zz-orange-300); }

/* Dashboards: orange highlights, richer surfaces, and consistent interaction states. */
html[data-zz-area="admin"] body,
html[data-zz-area="vendor"] body,
html[data-zz-area="courier"][data-zz-page="courier"] body,
html[data-zz-area="client"] body { background: radial-gradient(circle at 90% 2%,rgba(255,138,0,.075),transparent 27rem),radial-gradient(circle at 8% 4%,rgba(25,128,239,.075),transparent 24rem),linear-gradient(180deg,#f2f7fc,#f8fafc 36rem,#f5f8fb); }
html[data-zz-area="admin"] .sidebar,
html[data-zz-area="vendor"] .sidebar,
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside { background: radial-gradient(circle at 12% 4%,rgba(35,139,240,.26),transparent 16rem),radial-gradient(circle at 88% 86%,rgba(255,138,0,.1),transparent 14rem),linear-gradient(180deg,#03172f,#062d54 62%,#04182c); }
html[data-zz-area="admin"] .sidebar::before,
html[data-zz-area="vendor"] .sidebar::before,
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg,#168af0 0 58%,var(--zz-orange-500) 58% 82%,#ffc13d); }
html[data-zz-area="admin"] .nav a.active,
html[data-zz-area="vendor"] .nav a.active,
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .nav button.active { border-color: rgba(255,152,11,.35); background: linear-gradient(90deg,rgba(255,138,0,.27),rgba(255,173,31,.08)); color: #ffc04d; box-shadow: inset 3px 0 0 var(--zz-orange-500),0 8px 20px rgba(0,0,0,.08); }
html[data-zz-area="admin"] .nav a:hover,
html[data-zz-area="vendor"] .nav a:hover,
html[data-zz-area="courier"][data-zz-page="courier"] .app > aside .nav button:hover { border-color: rgba(255,173,31,.2); background: linear-gradient(90deg,rgba(255,138,0,.12),rgba(255,255,255,.05)); color: #fff; }
html[data-zz-area="admin"] .zz-purpose-head,
html[data-zz-area="vendor"] .zz-purpose-head,
html[data-zz-area="courier"] .zz-dashboard-welcome,
html[data-zz-area="client"] .clientHero { border-color: rgba(255,158,18,.25); background: radial-gradient(circle at 80% 20%,rgba(32,142,238,.34),transparent 25rem),radial-gradient(circle at 95% 110%,rgba(255,138,0,.18),transparent 22rem),linear-gradient(125deg,#03172f,#073865 72%,#0a4a73); }
html[data-zz-area="admin"] .zz-purpose-head::after,
html[data-zz-area="vendor"] .zz-purpose-head::after { content: ""; position: absolute; right: 70px; bottom: 0; width: 180px; height: 3px; border-radius: 999px 999px 0 0; background: linear-gradient(90deg,transparent,var(--zz-orange-500),#ffc13d,transparent); }
html[data-zz-area="admin"] .zz-page-eyebrow,
html[data-zz-area="vendor"] .zz-page-eyebrow,
html[data-zz-area="courier"] .portalEyebrow,
html[data-zz-area="client"] .portalEyebrow { color: var(--zz-orange-400); }
html[data-zz-area="admin"] .zz-page-emblem,
html[data-zz-area="vendor"] .zz-page-emblem { border-color: rgba(255,173,31,.27); background: linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,138,0,.1)); color: #fff; }
html[data-zz-area="admin"] :is(.card,.zz-workspace-card,.panel,.box),
html[data-zz-area="vendor"] :is(.card,.zz-workspace-card,.panel,.box),
html[data-zz-area="courier"][data-zz-page="courier"] .card,
html[data-zz-area="client"] .card { border-color: #dfe7f0; box-shadow: 0 12px 32px rgba(5,37,73,.06),inset 0 1px #fff; }
html[data-zz-area="admin"] .zz-workspace-card,
html[data-zz-area="vendor"] .zz-workspace-card,
html[data-zz-area="courier"][data-zz-page="courier"] .card,
html[data-zz-area="client"] .dashboardGrid > .card { position: relative; overflow: hidden; }
html[data-zz-area="admin"] .zz-workspace-card::before,
html[data-zz-area="vendor"] .zz-workspace-card::before,
html[data-zz-area="courier"][data-zz-page="courier"] .card::before,
html[data-zz-area="client"] .dashboardGrid > .card::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg,#187fe1 0 66%,var(--zz-orange-500) 66% 88%,#ffc13d); }
html[data-zz-area="admin"] .zz-card-icon,
html[data-zz-area="vendor"] .zz-card-icon,
html[data-zz-area="courier"] .zz-card-icon { border: 1px solid var(--zz-orange-line); background: var(--zz-orange-soft); color: var(--zz-orange-600); }
html[data-zz-area="admin"] .btn.primary,
html[data-zz-area="vendor"] .btn.primary,
html[data-zz-area="courier"] .btn.primary,
html[data-zz-area="client"] .btn.primary { border-color: #f3a00a; background: linear-gradient(135deg,#ffbb2e,#ff8500); color: #13243a; box-shadow: var(--zz-orange-shadow); }
html[data-zz-area="admin"] :is(.modal,.zzAlert),
html[data-zz-area="vendor"] :is(.modal,.zzAlert),
html[data-zz-area="courier"] :is(.modal,.zzAlert) { border-top: 4px solid var(--zz-orange-500); box-shadow: 0 28px 80px rgba(4,28,56,.22); }
html[data-zz-area="admin"] tbody tr:hover,
html[data-zz-area="vendor"] tbody tr:hover,
html[data-zz-area="courier"] tbody tr:hover { background: linear-gradient(90deg,#fff8ee,#f8fbff); }

@media (max-width: 1080px) {
  html[data-zz-page="register"] body > .zz-register-shell,
  .zz-courier-register-shell { grid-template-columns: minmax(0,1fr); }
  html[data-zz-page="register"] .zz-register-visual,
  .zz-courier-register-visual { min-height: auto; }
  html[data-zz-page="register"] .zz-register-visual .heroIn { padding: 34px; }
  .zz-register-copy { margin-top: 30px; }
  .zz-register-benefits { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .zz-register-benefits > div { grid-template-columns: 30px minmax(0,1fr); }
  .zz-register-benefits small { display: none; }
  .zz-register-trust { margin-top: 25px; }
  .zz-courier-register-visual { padding: 34px; }
  .zz-courier-register-visual .zz-register-benefits { margin-top: 25px; }
}
@media (max-width: 700px) {
  html[data-zz-page="register"] body,
  html[data-zz-area="courier"][data-zz-page="register"] body { padding: 0; }
  html[data-zz-page="register"] body > .zz-register-shell,
  .zz-courier-register-shell { min-height: 100vh; border: 0; border-radius: 0; }
  html[data-zz-page="register"] .zz-register-visual .heroIn,
  .zz-courier-register-visual { padding: 27px 22px; }
  .zz-register-copy h1,
  html[data-zz-page="register"] .zz-register-copy h1,
  html[data-zz-area="courier"][data-zz-page="register"] .zz-register-copy h1 { font-size: 34px; }
  .zz-register-benefits { grid-template-columns: minmax(0,1fr); }
  html[data-zz-page="register"] .zz-register-head,
  html[data-zz-area="courier"][data-zz-page="register"] .zz-courier-register-card > .head { padding-inline: 20px; }
  html[data-zz-page="register"] .zz-register-card form,
  html[data-zz-area="courier"][data-zz-page="register"] .zz-courier-register-card > .body { padding: 25px 20px 30px; }
  html[data-zz-page="register"] .zz-form-section .row,
  html[data-zz-area="courier"][data-zz-page="register"] .zz-form-section .grid,
  html[data-zz-area="courier"][data-zz-page="register"] .zz-pricing-grid { grid-template-columns: minmax(0,1fr); }
}

/* Designer registration refinements: keep the complete premium shell inside the viewport. */
html[data-zz-page="register"] body > .zz-register-shell { align-items: stretch; }
.zz-register-card-logo { display: block; width: 104px; height: 58px; background: var(--zz-logo-primary) center / contain no-repeat; }
.zz-register-card-logo img { display: none; }
.zz-register-heading-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.zz-register-heading-top > span { color: #1877db; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.zz-register-heading-top > a { color: #718297; font-size: 10px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.zz-register-heading-top > a strong { color: var(--zz-orange-600); }
.zz-register-heading-top > a:hover { color: #0a67bf; }

@media (min-width: 1081px) and (min-height: 650px) {
  html[data-zz-page="register"] body,
  html[data-zz-area="courier"][data-zz-page="register"] body { padding: 18px; overflow: hidden; }
  html[data-zz-page="register"] body > .zz-register-shell,
  html[data-zz-area="courier"][data-zz-page="register"] body > .zz-courier-register-shell { width: min(1400px,100%); height: calc(100vh - 36px); min-height: 0; max-height: 920px; }
  html[data-zz-area="courier"][data-zz-page="register"] body > main.zz-courier-register-shell { max-width: 1400px; padding: 0; }
  html[data-zz-page="register"] .zz-register-visual,
  html[data-zz-area="courier"][data-zz-page="register"] .zz-courier-register-visual { min-height: 0; }
  html[data-zz-page="register"] .zz-register-card,
  html[data-zz-area="courier"][data-zz-page="register"] .zz-courier-register-card { display: flex; min-width: 0; min-height: 0; flex-direction: column; }
  html[data-zz-page="register"] .zz-register-card form,
  html[data-zz-area="courier"][data-zz-page="register"] .zz-courier-register-card > .body { min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-color: #bdcce0 transparent; scrollbar-width: thin; }
  html[data-zz-page="register"] .zz-register-card form::-webkit-scrollbar,
  html[data-zz-area="courier"][data-zz-page="register"] .zz-courier-register-card > .body::-webkit-scrollbar { width: 7px; }
  html[data-zz-page="register"] .zz-register-card form::-webkit-scrollbar-thumb,
  html[data-zz-area="courier"][data-zz-page="register"] .zz-courier-register-card > .body::-webkit-scrollbar-thumb { border-radius: 999px; background: #bdcce0; }
  html[data-zz-page="register"] .zz-register-head { flex: 0 0 70px; min-height: 70px; padding-block: 7px; overflow: visible; }
  html[data-zz-page="register"] .zz-register-head .zz-register-card-logo { width: 92px; height: 52px; }
  html[data-zz-page="register"] .zz-register-card form { gap: 9px; padding: 18px 30px 20px; }
  html[data-zz-page="register"] .zz-register-heading h2 { margin-top: 4px; font-size: 26px; }
  html[data-zz-page="register"] .zz-register-heading p { margin-top: 3px; }
  html[data-zz-page="register"] .zz-register-progress { margin: 0; }
  html[data-zz-page="register"] .zz-form-section { padding: 11px 13px 12px; }
  html[data-zz-page="register"] .zz-form-section-head { margin-bottom: 8px; }
  html[data-zz-page="register"] .zz-form-section :is(input,select) { min-height: 42px; padding-block: 9px; }
  html[data-zz-page="register"] .zz-register-submit { min-height: 44px; }
  html[data-zz-page="register"] .zz-form-assurance { padding-block: 8px; }
  html[data-zz-area="courier"][data-zz-page="register"] .zz-courier-register-card > .head { flex: 0 0 70px; min-height: 70px; padding-block: 5px; }
  html[data-zz-area="courier"][data-zz-page="register"] .zz-courier-register-card > .body { padding: 20px 28px 24px; }
  html[data-zz-area="courier"][data-zz-page="register"] .zz-register-heading { margin-bottom: 12px; }
  html[data-zz-area="courier"][data-zz-page="register"] .zz-register-heading h2 { margin-top: 4px; font-size: 26px; }
  html[data-zz-area="courier"][data-zz-page="register"] .zz-form-section { padding: 11px 13px 12px; }
  html[data-zz-area="courier"][data-zz-page="register"] .zz-form-section + .zz-form-section { margin-top: 9px; }
  html[data-zz-area="courier"][data-zz-page="register"] .zz-form-section-head { margin-bottom: 8px; }
  html[data-zz-area="courier"][data-zz-page="register"] .zz-form-section input,
  html[data-zz-area="courier"][data-zz-page="register"] .zz-form-section select { min-height: 41px; padding-block: 8px; }
  html[data-zz-area="vendor"][data-zz-page="register"] body { overflow: hidden; }
  html[data-zz-area="vendor"][data-zz-page="register"] .loginWrap { min-height: 100vh; padding: 18px; }
  html[data-zz-area="vendor"][data-zz-page="register"] .loginCard { width: min(1240px,100%); height: calc(100vh - 36px); min-height: 0; max-height: 820px; overflow: hidden; }
  html[data-zz-area="vendor"][data-zz-page="register"] .loginCard > .pad { min-height: 0; padding: 26px 34px; overflow-y: auto; scrollbar-color: #bdcce0 transparent; scrollbar-width: thin; }
  html[data-zz-area="vendor"][data-zz-page="register"] .zz-auth-heading { margin-bottom: 15px; }
  html[data-zz-area="vendor"][data-zz-page="register"] .zz-form-section { padding: 13px 15px; }
  html[data-zz-area="vendor"][data-zz-page="register"] .zz-form-section + .zz-form-section { margin-top: 10px; }
  html[data-zz-area="vendor"][data-zz-page="register"] .zz-form-section-head { margin-bottom: 9px; }
  html[data-zz-area="vendor"][data-zz-page="register"] .zz-form-actions { margin-top: 12px; padding-top: 12px; }
  html[data-zz-area="vendor"][data-zz-page="register"] .zz-form-assurance { margin-top: 10px; }
  html[data-zz-page="register"] .zz-register-card form > .zz-form-assurance { display: none; }
}

@media (min-width: 1081px) and (max-height: 820px) {
  html[data-zz-page="register"] .zz-register-visual .heroIn { padding: 28px 36px 25px; }
  html[data-zz-page="register"] .zz-register-copy { margin-top: 24px; }
  html[data-zz-page="register"] .zz-register-copy h1 { font-size: 42px; }
  html[data-zz-page="register"] .zz-register-benefits { gap: 6px; margin-top: 18px; }
  html[data-zz-page="register"] .zz-register-benefits > div { padding-block: 8px; }
  html[data-zz-page="register"] .zz-register-trust { margin-top: auto; padding-top: 14px; }
  html[data-zz-page="register"] .zz-register-card form > .zz-form-assurance { display: none; }
  html[data-zz-page="register"] .zz-register-visual .zz-auth-proof,
  html[data-zz-area="vendor"][data-zz-page="register"] .loginHero .zz-auth-proof { display: none; }
  html[data-zz-area="courier"][data-zz-page="register"] .zz-courier-register-visual { padding: 27px 32px; }
  html[data-zz-area="courier"][data-zz-page="register"] .zz-register-copy { margin-top: 24px; }
  html[data-zz-area="courier"][data-zz-page="register"] .zz-register-copy h1 { font-size: 42px; }
  html[data-zz-area="courier"][data-zz-page="register"] .zz-courier-route { margin-top: 18px; }
  html[data-zz-area="courier"][data-zz-page="register"] .zz-courier-register-visual .zz-register-benefits { display: none; }
  html[data-zz-area="vendor"][data-zz-page="register"] .loginHero { padding: 26px 30px; }
  html[data-zz-area="vendor"][data-zz-page="register"] .zz-seller-hero-copy { margin-top: 24px; }
  html[data-zz-area="vendor"][data-zz-page="register"] .zz-seller-benefits { gap: 7px; margin-top: 17px; }
  html[data-zz-area="vendor"][data-zz-page="register"] .zz-seller-benefits > div { padding-block: 8px; }
}

@media (max-width: 520px) {
  .zz-register-heading-top { align-items: flex-start; flex-direction: column; gap: 5px; }
}