:root {
  --orange: #f47a19;
  --orange-deep: #e85d0b;
  --orange-soft: #fff0df;
  --blue: #2f6fd6;
  --blue-soft: #eaf2ff;
  --ink: #24211f;
  --muted: #8e8882;
  --surface: #ffffff;
  --background: #f7f5f0;
  --border: #eee9e1;
  --success: #23966f;
  --danger: #c94a46;
  --shadow: 0 12px 34px rgba(79, 55, 36, 0.10);
  --shadow-soft: 0 6px 18px rgba(79, 55, 36, 0.08);
  --nav-height: 76px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--background);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(180deg, #f3efe8 0, #faf9f7 100%);
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(47, 111, 214, 0.25); outline-offset: 2px; }

.app-shell {
  position: relative;
  width: min(100%, 560px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--background);
  box-shadow: 0 0 70px rgba(52, 39, 29, 0.14);
}

.connection-banner {
  position: sticky;
  z-index: 90;
  top: 0;
  padding: 10px 18px;
  background: #fff5da;
  color: #6f5215;
  border-bottom: 1px solid #eed89b;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.page-stack { min-height: 100vh; min-height: 100dvh; }
.page { padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 18px); }
.page[hidden] { display: none !important; }
.page.is-active { animation: page-in 260ms ease both; }

.hero {
  position: relative;
  min-height: 345px;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--orange);
  background-image: linear-gradient(100deg, rgba(244, 122, 25, 0.14) 0 43%, rgba(232, 93, 11, 0.02) 70%), url("./assets/hero-pets.jpg");
  background-position: center center;
  background-size: cover;
  color: #fff;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(235, 93, 8, 0.10), transparent 55%);
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: 50%;
  padding: max(22px, env(safe-area-inset-top)) 0 26px 22px;
  text-shadow: 0 2px 10px rgba(136, 54, 7, 0.18);
}

.brand-mark { display: flex; align-items: flex-start; gap: 3px; margin-bottom: 2px; }
.brand-mark strong { font-size: clamp(34px, 10vw, 48px); line-height: 1; letter-spacing: -2.5px; font-weight: 850; }
.brand-paw { margin-top: -3px; font-size: 12px; transform: rotate(18deg); }
.brand-subtitle { margin-top: 8px; font-size: 8px; font-weight: 700; letter-spacing: 2.1px; white-space: nowrap; opacity: 0.96; }
.hero h1 { margin: 30px 0 0; font-size: clamp(24px, 7vw, 34px); line-height: 1.04; letter-spacing: -0.8px; font-weight: 850; }
.hero h1 span { display: inline; }
.hero p { margin: 8px 0 0; font-size: 13px; font-weight: 600; opacity: 0.92; }

.hero-dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 13px;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
}
.hero-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.60); }
.hero-dots span.active { background: var(--orange); box-shadow: 0 0 0 2px rgba(255,255,255,0.65); }

.home-content { padding: 14px; }
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.metric-card {
  position: relative;
  min-height: 148px;
  overflow: hidden;
  padding: 20px 17px 16px;
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 21px;
  background: rgba(255,255,255,0.96);
  box-shadow: var(--shadow);
}
.metric-label { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; color: #645e58; font-size: 12px; font-weight: 700; }
.metric-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 11px; font-size: 17px; font-weight: 850; }
.metric-sales .metric-icon { background: var(--orange-soft); color: var(--orange-deep); }
.metric-bonus .metric-icon { background: var(--blue-soft); color: var(--blue); }
.metric-value { position: relative; z-index: 2; display: block; margin-top: 12px; font-size: clamp(28px, 8vw, 38px); line-height: 1; letter-spacing: -1.4px; font-variant-numeric: tabular-nums; }
.metric-sales .metric-value { color: var(--orange-deep); }
.metric-bonus .metric-value { color: var(--blue); }
.metric-caption { position: relative; z-index: 2; display: block; margin-top: 8px; color: var(--muted); font-size: 11px; }
.metric-watermark { position: absolute; right: -6px; bottom: -16px; font-size: 72px; font-weight: 900; opacity: 0.10; transform: rotate(-14deg); }
.metric-sales .metric-watermark { color: var(--orange); }
.metric-bonus .metric-watermark { color: var(--blue); }
.metric-card.metric-pop::before {
  content: "";
  position: absolute;
  left: 27%;
  top: 38%;
  width: 38px;
  height: 38px;
  border: 3px solid rgba(244,122,25,0.40);
  border-radius: 50%;
  animation: ripple 850ms ease-out;
}

.referral-card {
  position: relative;
  margin-top: 14px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(238, 224, 207, 0.92);
  border-radius: 22px;
  background: rgba(255,255,255,0.96);
  box-shadow: var(--shadow-soft);
}
.referral-card::after {
  content: "";
  position: absolute;
  right: -54px;
  bottom: -80px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,122,25,0.13), transparent 68%);
  pointer-events: none;
}
.referral-heading { display: flex; align-items: center; gap: 11px; }
.referral-heading div { min-width: 0; }
.referral-heading strong { display: block; font-size: 14px; }
.referral-heading span:not(.share-icon) { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.share-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 12px; background: var(--orange-soft); color: var(--orange-deep); font-size: 20px; font-weight: 800; }
.referral-body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 96px;
  margin-top: 13px;
  padding: 12px 12px 12px 16px;
  border: 1px dashed #e7c89e;
  border-radius: 17px;
  background: linear-gradient(135deg, #fffaf4, #fff1df);
}
.referral-code { max-width: calc(100% - 104px); padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--orange-deep); font-size: clamp(21px, 6.5vw, 31px); font-weight: 850; letter-spacing: -0.6px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.referral-qr-button { flex: 0 0 auto; padding: 0; border: 0; border-radius: 13px; background: transparent; cursor: zoom-in; transition: transform 140ms ease, box-shadow 140ms ease; }
.referral-qr-button:active { transform: scale(0.96); }
.referral-qr { display: block; width: 78px; height: 78px; object-fit: contain; border: 7px solid #fff; border-radius: 11px; background: #fff; box-shadow: 0 4px 16px rgba(88,56,27,0.10); }
.referral-actions { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 13px; }

.button { min-height: 44px; padding: 10px 16px; border: 0; border-radius: 14px; font-weight: 800; cursor: pointer; transition: transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease; }
.button:active { transform: scale(0.98); }
.button:disabled { cursor: not-allowed; opacity: 0.46; }
.button-primary { background: linear-gradient(135deg, var(--orange), var(--orange-deep)); color: #fff; box-shadow: 0 8px 18px rgba(232,93,11,0.22); }
.button-soft { background: var(--orange-soft); color: var(--orange-deep); }
.button-wide { width: 100%; }

.page-inner { min-height: 100vh; min-height: 100dvh; padding-right: 14px; padding-left: 14px; background: var(--background); }
.inner-header { margin: 0 -14px 16px; padding: max(30px, calc(env(safe-area-inset-top) + 18px)) 20px 24px; border-radius: 0 0 28px 28px; background: linear-gradient(135deg, #fb871e, #ed650d); color: #fff; }
.inner-header .eyebrow { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; opacity: 0.82; }
.inner-header h2 { margin: 0; font-size: 31px; line-height: 1.05; letter-spacing: -1px; }
.inner-header p { margin: 8px 0 0; font-size: 13px; line-height: 1.4; opacity: 0.88; }
.section-title { margin: 22px 2px 10px; font-size: 17px; }

.summary-strip, .balance-card, .form-card, .profile-card, .info-list, .role-panel {
  border: 1px solid rgba(238, 233, 225, 0.9);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.summary-strip { display: flex; align-items: center; justify-content: space-between; padding: 17px 18px; color: var(--muted); font-size: 13px; }
.summary-strip strong { color: var(--orange-deep); font-size: 24px; }

.list { display: grid; gap: 10px; margin-top: 12px; }
.list-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 16px; border: 1px solid var(--border); border-radius: 17px; background: #fff; box-shadow: 0 4px 14px rgba(79,55,36,0.055); }
.list-card-main { min-width: 0; }
.list-card-main strong { display: block; font-size: 15px; }
.list-card-main span { display: block; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.list-card-value { flex: 0 0 auto; text-align: right; }
.list-card-value strong { color: var(--orange-deep); font-size: 15px; }
.list-card-value span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.empty-state { padding: 34px 22px; border: 1px dashed #e5d8c8; border-radius: 20px; background: rgba(255,255,255,0.7); text-align: center; }
.empty-state-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 18px; background: var(--orange-soft); color: var(--orange); font-size: 25px; }
.empty-state strong { display: block; }
.empty-state span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.45; }

/* Caviara staging catalog: exact package/weight clarity takes priority over decorative treatments. */
.filter-row { display: flex; gap: 8px; margin: 2px 0 14px; overflow-x: auto; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; min-height: 38px; padding: 8px 14px; border: 1px solid #eadfd2; border-radius: 999px; background: #fff; color: #6f6862; font-size: 12px; font-weight: 800; }
.chip.active { border-color: var(--orange); background: var(--orange); color: #fff; }
.page[data-page="catalog"] { padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 120px); }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.product-card { position: relative; display: flex; flex-direction: column; min-height: 300px; padding: 8px; overflow: hidden; border: 1px solid rgba(233, 171, 106, 0.58); border-radius: 28px; background: #fffdf9; box-shadow: var(--shadow-soft); cursor: pointer; transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.product-card:active { transform: scale(0.98); }
.product-card:focus-visible { outline: 3px solid rgba(255, 122, 16, 0.35); outline-offset: 2px; }
.product-art { position: relative; display: grid; place-items: center; flex: 0 0 235px; height: 235px; margin: 0; overflow: hidden; border-radius: 22px; background: linear-gradient(145deg, #fff7ed 0%, #ffe8cc 100%); }
.product-card[data-species="CAT"] .product-art { background: linear-gradient(145deg, #f4fafb 0%, #e4f2f0 100%); }
.product-packshot { display: block; width: 100%; height: 100%; box-sizing: border-box; padding: 8px 10px 18px; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(49, 36, 24, 0.17)); }
.product-art .packshot-bag { transform: translateY(-9px); }
.product-art-fallback { color: var(--orange-deep); font-size: 12px; font-weight: 900; letter-spacing: 2px; }
.product-art.is-missing { border: 1px dashed rgba(226, 126, 42, 0.40); background: #fffaf4; }
.product-weight-badge { position: absolute; z-index: 2; top: 12px; left: 12px; display: inline-flex; align-items: center; min-height: 23px; padding: 4px 8px; border: 1px solid rgba(180, 84, 0, 0.19); border-radius: 999px; background: rgba(255, 250, 243, 0.97); color: #9a4800; box-shadow: 0 3px 10px rgba(100, 59, 24, 0.14); font-size: 11px; font-weight: 950; letter-spacing: 0.01em; line-height: 1; }
.product-species { margin: 6px 2px 0; color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: 0.65px; text-transform: uppercase; }
.product-card h3 { display: -webkit-box; min-height: 33px; margin: 2px 2px 1px; overflow: hidden; font-size: 14px; line-height: 1.17; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-name-en { min-height: 10px; margin: 0 2px; overflow: hidden; color: #8c7868; font-size: 8px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.product-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; margin-top: auto; padding: 5px 2px 0; border-top: 1px solid #f1e5d8; }
.product-meta span { color: var(--muted); font-size: 10px; }
.product-meta strong { color: var(--orange-deep); font-size: 11px; text-align: right; white-space: nowrap; }
.product-open-mark { position: absolute; top: 11px; right: 11px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.93); color: var(--orange-deep); font-size: 16px; font-weight: 900; line-height: 1; }

.catalog-detail-layer { position: fixed; z-index: 70; top: 0; right: 0; bottom: 0; left: 50%; width: min(100%, 560px); height: 100dvh; min-height: 0; transform: translateX(-50%); }
.catalog-detail-layer[hidden] { display: none; }
.catalog-detail-backdrop { position: absolute; inset: 0; background: rgba(36, 36, 35, 0.36); }
.catalog-detail-sheet { position: absolute; inset: 0; box-sizing: border-box; height: 100dvh; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px calc(var(--nav-height) + env(safe-area-inset-bottom) + 18px); background: var(--background); }
.catalog-detail-close { position: absolute; z-index: 2; top: 15px; right: 16px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(236, 216, 196, 0.92); border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--ink); font-size: 24px; line-height: 1; }
.catalog-detail-back { min-height: 34px; padding: 0; border: 0; background: transparent; color: #5e5750; font-size: 13px; font-weight: 850; }
.catalog-detail-art { position: relative; display: grid; place-items: center; height: 214px; margin: 8px 0 13px; overflow: hidden; border-radius: 24px; background: linear-gradient(145deg, #fff7ed 0%, #ffe8cc 100%); }
.catalog-detail-art .product-packshot { max-height: 214px; padding: 8px 32px 16px; }
.catalog-detail-art:focus-visible { outline: 3px solid rgba(255, 122, 16, 0.35); outline-offset: 3px; }
.catalog-detail-art::after { content: "⌕"; position: absolute; right: 12px; bottom: 11px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--orange-deep); font-size: 19px; font-weight: 900; }
.catalog-detail-art.is-missing { border: 1px dashed rgba(226, 126, 42, 0.40); background: #fffaf4; }
.catalog-detail-zoom-tip { display: block; margin: -5px 0 10px; color: #8c7868; font-size: 10px; font-weight: 750; text-align: center; }
.catalog-detail-species { display: block; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: 0.75px; text-transform: uppercase; }
.catalog-detail-title { margin: 6px 0 4px; color: var(--ink); font-size: 21px; line-height: 1.12; letter-spacing: -0.35px; }
.catalog-detail-name-en { margin: 0; color: #8c7868; font-size: 11px; line-height: 1.35; }
.catalog-detail-price { display: block; margin: 13px 0; color: var(--orange-deep); font-size: 24px; line-height: 1; }
.catalog-detail-facts { display: grid; grid-template-columns: 98px minmax(0, 1fr); margin: 0; border-top: 1px solid #eadfd2; border-bottom: 1px solid #eadfd2; }
.catalog-detail-facts dt, .catalog-detail-facts dd { margin: 0; padding: 11px 0; font-size: 12px; line-height: 1.28; }
.catalog-detail-facts dt { color: var(--muted); }
.catalog-detail-facts dd { color: var(--ink); font-weight: 800; }
.catalog-detail-facts dt:nth-of-type(n+2), .catalog-detail-facts dd:nth-of-type(n+2) { border-top: 1px solid #f0e8de; }
.b2b-order-detail-sheet { padding-top: 20px; }
.b2b-order-detail-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 22px; padding: 12px 0; border-top: 1px solid #eadfd2; border-bottom: 1px solid #eadfd2; }
.b2b-order-detail-status strong { color: var(--orange-deep); font-size: 20px; line-height: 1.1; text-align: right; }
.b2b-order-detail-block { margin-top: 24px; }
.b2b-order-detail-block h3 { margin: 0 0 12px; color: var(--ink); font-size: 16px; line-height: 1.22; }
.b2b-order-detail-items { display: grid; gap: 10px; }
.b2b-order-detail-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid #ece3d8; border-radius: 16px; background: #fffdf9; }
.b2b-order-detail-product { display: grid; grid-template-columns: 56px minmax(0, 1fr); flex: 1 1 auto; min-width: 0; gap: 10px; align-items: center; }
.b2b-order-detail-copy { min-width: 0; }
.b2b-order-detail-item strong { display: block; color: var(--ink); font-size: 13px; line-height: 1.28; }
.b2b-order-detail-item small { display: block; margin-top: 3px; color: var(--muted); font-size: 10.5px; line-height: 1.3; }
.b2b-order-detail-name-en { display: -webkit-box !important; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #8c7868 !important; }
.b2b-order-detail-meta { display: block; margin-top: 5px; color: #847d76; font-size: 10.5px; font-weight: 800; line-height: 1.25; }
.b2b-order-detail-item output { flex: 0 0 auto; color: var(--orange-deep); font-size: 15px; font-weight: 900; white-space: nowrap; }
.b2b-order-detail-facts { grid-template-columns: 82px minmax(0, 1fr); }
.b2b-order-detail-comment { margin-top: 24px; padding: 15px 16px; border-radius: 16px; background: #fff5e9; color: var(--ink); }
.b2b-order-detail-comment strong { display: block; font-size: 12px; }
.b2b-order-detail-comment p { margin: 7px 0 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.b2b-order-detail-open { align-self: flex-start; margin-top: 10px; }
.catalog-image-viewer { position: fixed; isolation: isolate; z-index: 120; inset: 0; display: grid; grid-template-rows: 1fr auto; width: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; opacity: 1 !important; background: #121211 !important; }
.catalog-image-viewer[hidden] { display: none; }
.catalog-image-viewer-stage { display: grid; place-items: center; width: 100%; min-height: 0; padding: 56px 28px 16px; border: 0; opacity: 1; background: #121211 !important; }
.catalog-image-viewer-stage img { display: block; max-width: min(88vw, 540px); max-height: min(68dvh, 680px); object-fit: contain; object-position: center; filter: drop-shadow(0 18px 20px rgba(0,0,0,0.34)); }
.catalog-image-viewer.is-can .catalog-image-viewer-stage img { max-width: min(82vw, 460px); max-height: min(58dvh, 560px); }
.catalog-image-viewer-close { position: absolute; z-index: 1; top: calc(14px + env(safe-area-inset-top)); right: 16px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; font-size: 25px; line-height: 1; }
.catalog-image-viewer-title { display: block; padding: 0 26px calc(22px + env(safe-area-inset-bottom)); color: rgba(255,255,255,0.84); font-size: 12px; font-weight: 700; line-height: 1.35; text-align: center; }
/* KL-008 and KL-060: exact original packshots stay unframed and legible against one quiet, light field. */
.catalog-image-viewer.is-clean-target-packshot { background: #eef7f6 !important; }
.catalog-image-viewer.is-clean-target-packshot .catalog-image-viewer-stage { padding: 52px 22px 20px; background: linear-gradient(180deg, #f8fbfa 0%, #e5f2f0 100%) !important; }
.catalog-image-viewer.is-clean-target-packshot .catalog-image-viewer-stage img { width: min(78vw, 380px); max-width: 100%; max-height: min(66dvh, 620px); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; filter: drop-shadow(0 14px 16px rgba(36, 83, 77, 0.16)); }
.catalog-image-viewer.is-clean-target-packshot .catalog-image-viewer-close { border-color: rgba(25, 98, 94, 0.18); background: rgba(255,255,255,0.94); color: #176a6a; }
.catalog-image-viewer.is-clean-target-packshot .catalog-image-viewer-title { color: #245854; }

@media (min-width: 561px) {
  .page[data-page="catalog"] { padding-bottom: calc(var(--nav-height) + 150px); }
  .product-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .catalog-detail-sheet { max-width: 560px; margin: 0 auto; }
}

@media (max-width: 380px) {
  .product-grid { gap: 12px; }
  .product-card { min-height: 300px; padding: 7px; }
  .product-art { flex-basis: 235px; height: 235px; }
  .product-card h3 { font-size: 13px; }
  .product-meta strong { font-size: 10px; }
}

.balance-card { padding: 21px; background: linear-gradient(135deg, #fff, #fff5e9); }
.balance-card span { color: var(--muted); font-size: 12px; font-weight: 700; }
.balance-card strong { display: block; margin-top: 8px; color: var(--orange-deep); font-size: 30px; letter-spacing: -1px; }
.balance-card small { display: block; margin-top: 8px; color: #716b65; }
.form-card { margin-top: 12px; padding: 17px; }
.form-card label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 800; }
input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #e6ded4; border-radius: 14px; background: #fbfaf8; color: var(--ink); }
input::placeholder { color: #aaa39c; }
.form-card .button { margin-top: 10px; }
.form-note { min-height: 17px; margin: 9px 1px 0; color: var(--muted); font-size: 11px; }

.profile-card { display: flex; align-items: center; gap: 13px; padding: 17px; }
.avatar { display: grid; place-items: center; flex: 0 0 50px; width: 50px; height: 50px; border-radius: 18px; background: linear-gradient(135deg, var(--orange), var(--orange-deep)); color: #fff; font-size: 21px; font-weight: 900; }
.profile-card strong { display: block; }
.profile-card span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.info-list { margin-top: 12px; padding: 5px 17px; }
.info-list > div { display: flex; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f0ece6; }
.info-list > div:last-child { border-bottom: 0; }
.info-list span { color: var(--muted); font-size: 12px; }
.info-list strong { max-width: 62%; overflow: hidden; font-size: 12px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.info-link { max-width: 62%; padding: 0; border: 0; background: transparent; color: var(--orange-deep); font-size: 12px; font-weight: 850; text-align: right; cursor: pointer; }
.online-dot::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--success); }
.page-inner > .button-wide { margin-top: 12px; }

.role-panel { margin-top: 16px; padding: 17px; }
.role-panel h3 { margin: 0; font-size: 17px; }
.role-panel > p { margin: 5px 0 13px; color: var(--muted); font-size: 12px; }
.compact-form { display: grid; gap: 8px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-heading h4 { margin: 2px 0 0; font-size: 16px; }
.panel-heading .eyebrow { margin: 0; color: var(--orange-deep); font-size: 10px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.b2b-panel { border-color: rgba(22, 122, 128, 0.22); background: linear-gradient(150deg, #ffffff 0%, #f4fbfb 100%); }
.b2b-vat { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: #e4f6f4; color: #167a80; font-size: 10px; font-weight: 900; white-space: nowrap; }
.b2b-store-note { margin-bottom: 14px; border: 1px solid #d7ece9; background: #f4fbfa; }
.b2b-points-workspace { margin-top: 22px; padding-top: 20px; border-top: 1px solid #dce9e8; }
.b2b-points-workspace .b2b-section-head { margin-top: 0; }
.b2b-points-workspace > .section-note { margin: 9px 0 18px; font-size: 12px; line-height: 1.55; }
.b2b-points-list { display: grid; gap: 12px; }
.b2b-point-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px; border: 1px solid #d9eae8; border-radius: 16px; background: rgba(255,255,255,0.92); }
.b2b-point-card-main { min-width: 0; }
.b2b-point-card-main strong { display: block; font-size: 13px; line-height: 1.35; }
.b2b-point-card-main span, .b2b-point-card-main small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.b2b-point-select { min-height: 38px; padding: 8px 11px; border: 1px solid #c3dfda; border-radius: 11px; background: #effaf8; color: #14696d; font: inherit; font-size: 11px; font-weight: 900; cursor: pointer; touch-action: manipulation; }
.b2b-point-select:active { transform: scale(0.97); }
.b2b-point-select.is-selected, .b2b-point-select:disabled { border-color: transparent; background: #f0ece6; color: #77716b; cursor: default; }
.b2b-add-point { margin-top: 18px; border: 1px solid #d9eae8; border-radius: 16px; background: #fff; }
.b2b-add-point summary { display: flex; align-items: center; min-height: 54px; padding: 0 15px; color: #14696d; font-size: 13px; font-weight: 900; cursor: pointer; list-style: none; touch-action: manipulation; }
.b2b-add-point summary::-webkit-details-marker { display: none; }
.b2b-add-point summary::after { content: "+"; margin-left: auto; color: var(--orange-deep); font-size: 21px; line-height: 1; }
.b2b-add-point[open] summary::after { content: "−"; }
.b2b-add-point > .section-note, .b2b-add-point .stack-form { margin-inline: 15px; }
.b2b-add-point > .section-note { margin-top: 0; margin-bottom: 18px; font-size: 12px; line-height: 1.55; }
.b2b-add-point .stack-form { margin-top: 0; margin-bottom: 18px; gap: 11px; }
.b2b-point-request-list { display: grid; gap: 12px; margin-top: 20px; }
.b2b-point-request-heading { margin: 0 0 1px; color: var(--ink); font-size: 13px; font-weight: 900; }
.b2b-point-request-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 15px; border: 1px solid #ebe3d8; border-radius: 15px; background: #fffaf5; }
.b2b-point-request-card > div { min-width: 0; }
.b2b-point-request-card strong, .b2b-point-request-card span, .b2b-point-request-card small { display: block; }
.b2b-point-request-card strong { font-size: 12px; line-height: 1.35; }
.b2b-point-request-card span, .b2b-point-request-card small { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.admin-point-requests-head { margin-top: 28px !important; }
.b2b-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.b2b-section-head h4 { margin: 0; font-size: 15px; }
.b2b-section-head > span { display: inline-grid; place-items: center; min-width: 28px; min-height: 24px; padding: 3px 8px; border-radius: 999px; background: var(--orange-soft); color: var(--orange-deep); font-size: 11px; font-weight: 900; }
.b2b-product-list { display: grid; gap: 9px; margin-top: 10px; }
.b2b-product-row { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 13px; border: 1px solid #dce9e8; border-radius: 16px; background: rgba(255,255,255,0.92); }
.b2b-product-main { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 11px; align-items: center; min-width: 0; }
.b2b-product-copy { min-width: 0; }
.b2b-product-main strong { display: block; font-size: 13px; line-height: 1.35; }
.b2b-product-main small { display: block; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.b2b-product-weight { display: inline-flex; align-items: center; min-height: 23px; margin-top: 6px; padding: 4px 8px; border: 1px solid #b7ddd9; border-radius: 999px; background: #e9f8f6; color: #12656a; font-size: 11px; font-weight: 950; line-height: 1; }
.b2b-product-photo { position: relative; display: grid; place-items: center; width: 78px; height: 88px; padding: 4px; overflow: hidden; border: 1px solid #dce9e8; border-radius: 14px; background: linear-gradient(145deg, #fff8ef 0%, #e9f6f5 100%); cursor: zoom-in; touch-action: manipulation; }
.b2b-product-photo:active { transform: scale(0.97); }
.b2b-product-photo:focus-visible { outline: 3px solid rgba(22,122,128,0.30); outline-offset: 2px; }
.b2b-product-photo img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 7px 8px rgba(49,36,24,0.18)); }
.b2b-product-photo.is-missing { border-style: dashed; background: #fffaf4; }
.b2b-product-photo-fallback { color: var(--orange-deep); font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.b2b-product-photo-zoom { position: absolute; right: 5px; bottom: 5px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.94); color: #167a80; font-size: 15px; font-weight: 900; line-height: 1; pointer-events: none; }
/* Warehouse picking detail rows reuse the verified packshot component at a compact fixed size. */
.b2b-order-detail-photo { width: 56px; height: 60px; padding: 3px; border-radius: 13px; background: linear-gradient(145deg, #fff8ef 0%, #eef8f7 100%); }
.b2b-order-detail-photo .b2b-product-photo-zoom { right: 3px; bottom: 3px; width: 17px; height: 17px; font-size: 12px; }
.b2b-order-detail-photo .b2b-product-photo-fallback { font-size: 7px; letter-spacing: 0.7px; }
.b2b-product-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; width: 100%; }
.b2b-product-actions .b2b-price { grid-column: 1; color: var(--orange-deep); font-size: 13px; }
.b2b-quantity-control { display: grid; grid-template-columns: 36px 38px 36px; align-items: center; overflow: hidden; border: 1px solid #eadfd2; border-radius: 12px; background: #fff; }
.b2b-quantity-button { min-width: 36px; min-height: 36px; padding: 0; border: 0; background: #fff8ef; color: var(--orange-deep); font-size: 21px; font-weight: 800; line-height: 1; cursor: pointer; touch-action: manipulation; }
.b2b-quantity-button.is-plus { background: var(--orange-soft); }
.b2b-quantity-button:disabled { color: #b8b1aa; background: #f7f5f1; cursor: not-allowed; }
.b2b-quantity-value { display: grid; min-height: 36px; place-items: center; color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 800; }
.b2b-cart-list { margin-top: 0; }
.b2b-cart-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #e8efee; }
.b2b-cart-row:last-child { border-bottom: 0; }
.b2b-cart-row strong { display: block; font-size: 12px; }
.b2b-cart-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.b2b-cart-value { flex: 0 0 auto; text-align: right; }
.b2b-cart-value strong { color: var(--orange-deep); }
.b2b-orders-head { margin-top: 24px; }

/* Caviara staging B2B orders: generous mobile rhythm, with order facts separated from operational controls. */
.b2b-order-card { align-items: flex-start; padding: 19px 18px; }
.b2b-order-card .list-card-main { display: grid; gap: 7px; }
.b2b-order-card .list-card-main strong { line-height: 1.3; }
.b2b-order-card .list-card-main span { margin: 0; overflow: visible; font-size: 12px; line-height: 1.42; text-overflow: clip; white-space: normal; }
.b2b-order-card .list-card-main small { display: block; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.48; }
.b2b-order-card .list-card-value { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 138px; padding-top: 2px; }
.b2b-order-card .list-card-value strong { font-size: 17px; line-height: 1.2; }
.b2b-order-card .list-card-value span { margin: 0; }
.b2b-order-card .list-card-value button { min-height: 34px; padding: 7px 10px; border-radius: 10px; }
.b2b-repeat-order { max-width: none; border: 1px solid rgba(232,93,11,0.18); background: var(--orange-soft); color: var(--orange-deep); font-size: 11px; font-weight: 900; }

@media (max-width: 520px) {
  .b2b-order-card { display: block; }
  .b2b-order-card .list-card-value { justify-content: flex-start; min-width: 0; margin-top: 15px; padding-top: 14px; border-top: 1px solid #eee8df; }
  .b2b-order-card .list-card-value strong { margin-right: auto; font-size: 20px; }
  .b2b-order-card .list-card-value .status-pill { margin-left: 0; }
  .b2b-order-card .b2b-repeat-order { width: 100%; min-height: 40px; margin-top: 2px; }
}
.admin-b2b-section { margin: 20px -3px; padding: 16px 3px; border-top: 1px solid #ece6de; border-bottom: 1px solid #ece6de; }
.compact-admin-form { margin-top: 12px; }
.status-submitted { background: #fff3d8; color: #8c6511; }
.status-preparing { background: #e9effb; color: #315b9e; }
.status-out_for_delivery { background: #eee9fb; color: #6650a0; }
.status-delivered { background: #e4f6ee; color: #167352; }
.result-box { margin-top: 10px; padding: 12px; border-radius: 14px; background: #f8f4ee; color: #5d5751; font-size: 12px; line-height: 1.5; }
.admin-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.admin-stat { padding: 12px; border-radius: 14px; background: #f8f4ee; }
.admin-stat span { display: block; color: var(--muted); font-size: 10px; }
.admin-stat strong { display: block; margin-top: 5px; color: var(--orange-deep); font-size: 18px; }

/* Caviara staging management: Graphite task switcher with a deliberately spacious mobile reading rhythm. */
.manage-workspace { padding: 20px 16px 22px; }
.manage-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: -2px -2px 24px; padding: 5px; border-radius: 16px; background: #f1ece5; }
.manage-tab-button { min-width: 0; min-height: 38px; padding: 6px 4px; border: 0; border-radius: 12px; background: transparent; color: #716b65; font: inherit; font-size: 10px; font-weight: 900; line-height: 1.1; cursor: pointer; touch-action: manipulation; }
.manage-tab-button.is-active { background: var(--graphite); box-shadow: 0 6px 14px rgba(36,36,35,0.16); color: #fff; }
.manage-tab-button:active { transform: scale(0.97); }
.manage-tab-panel > .eyebrow { margin: 0 0 8px; color: var(--orange-deep); font-size: 10px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.manage-tab-panel > h3 { margin: 0 0 10px; line-height: 1.25; }
.manage-tab-panel > .section-note,
.manage-tab-panel .panel-heading + .section-note {
  margin: 0 0 20px;
  font-size: 12px;
  line-height: 1.55;
}
.manage-tab-panel .panel-heading h3 { margin: 5px 0 0; line-height: 1.25; }
.admin-order-search { margin: 0 0 14px; }
.admin-order-search input {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid #e5dcd3;
  border-radius: 14px;
  background: #fffdfa;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.25;
  outline: none;
}
.admin-order-search input::placeholder { color: #9d9690; }
.admin-order-search input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 122, 16, 0.13); }
.admin-order-filter-row { display: flex; gap: 8px; margin: -4px 0 20px; overflow-x: auto; padding: 2px 1px 5px; scrollbar-width: none; }
.admin-order-filter-row::-webkit-scrollbar { display: none; }
.admin-order-filter { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 38px; padding: 8px 11px; border: 1px solid #e9dfd4; border-radius: 12px; background: #fff; color: #716b65; font: inherit; font-size: 11px; font-weight: 900; line-height: 1; cursor: pointer; touch-action: manipulation; }
.admin-order-filter.is-active { border-color: var(--graphite); background: var(--graphite); box-shadow: 0 5px 12px rgba(36,36,35,0.12); color: #fff; }
.admin-order-filter:active { transform: scale(0.97); }
.admin-order-filter-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #f5eee5; color: var(--orange-deep); font-size: 10px; font-variant-numeric: tabular-nums; }
.admin-order-filter.is-active .admin-order-filter-count { background: rgba(255,255,255,0.16); color: #fff; }
.admin-order-filter-empty { margin-top: 4px; padding: 14px 2px 2px; }
.manage-tab-panel .b2b-section-head { margin-top: 24px; }
.manage-tab-panel .b2b-section-head + .section-note { margin: 8px 0 20px; }
.manage-tab-panel .list { gap: 14px; margin-top: 18px; }
.manage-attention-list { display: grid; gap: 12px; margin-top: 20px; }
.manage-attention-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; width: 100%; padding: 16px; border: 1px solid #ebe0d4; border-radius: 16px; background: #fffaf4; color: var(--ink); text-align: left; cursor: pointer; touch-action: manipulation; }
.manage-attention-card:active { transform: scale(0.985); }
.manage-attention-main { min-width: 0; }
.manage-attention-main strong { display: block; font-size: 14px; line-height: 1.3; }
.manage-attention-main small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.manage-attention-count { display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 9px; border-radius: 999px; background: var(--orange-soft); color: var(--orange-deep); font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 950; }
.manage-summary { margin-top: 22px; gap: 12px; }
.manage-summary .admin-stat { padding: 15px; }
.manage-subheading { margin: 30px 0 14px; font-size: 16px; line-height: 1.3; }
.manage-additional-tools { margin-top: 28px; border-top: 1px solid #eee5da; }
.manage-additional-tools summary { display: flex; align-items: center; min-height: 56px; color: var(--orange-deep); font-size: 13px; font-weight: 900; cursor: pointer; list-style: none; touch-action: manipulation; }
.manage-additional-tools summary::-webkit-details-marker { display: none; }
.manage-additional-tools summary::after { content: "+"; margin-left: auto; font-size: 20px; line-height: 1; }
.manage-additional-tools[open] summary::after { content: "−"; }
.manage-additional-tools > .section-note { margin: 0 0 20px; font-size: 12px; line-height: 1.55; }
.manage-additional-tools > h4 { margin: 24px 0 12px; font-size: 15px; line-height: 1.3; }
.manage-tab-panel .compact-admin-form { margin-top: 20px; }
.manage-tab-panel .compact-form { gap: 12px; }
.admin-actions { display: flex; gap: 6px; margin-top: 8px; }
.admin-actions button { min-height: 34px; padding: 6px 10px; border: 0; border-radius: 10px; font-size: 11px; font-weight: 800; cursor: pointer; }
.approve { background: #e5f7ef; color: #167352; }
.reject { background: #fdebea; color: #a83e3a; }

.status-pill { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; background: #f0ece6; color: #716b65; font-size: 10px; font-weight: 800; }
.status-confirmed, .status-paid, .status-approved { background: #e4f6ee; color: #167352; }
.status-pending, .status-new { background: #fff3d8; color: #8c6511; }
.status-rejected, .status-cancelled { background: #fdebea; color: #a83e3a; }

.bottom-nav {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: min(100%, 560px);
  height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  padding: 7px 5px env(safe-area-inset-bottom);
  transform: translateX(-50%);
  border-top: 1px solid rgba(227,220,211,0.92);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 -8px 28px rgba(67,49,34,0.09);
  backdrop-filter: blur(16px);
}
.nav-item { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; border: 0; border-radius: 14px; background: transparent; color: #969089; font-size: 10px; cursor: pointer; }
.nav-icon { font-size: 21px; line-height: 1; }
.nav-item.active { background: linear-gradient(180deg, rgba(244,122,25,0.12), rgba(244,122,25,0.02)); color: var(--orange-deep); font-weight: 800; }

/* Keep the page behind a modal still, but never disable touch events inside the modal itself. */
body.modal-open { overflow: hidden; overscroll-behavior: none; }
.modal-backdrop {
  position: fixed;
  z-index: 150;
  inset: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 560px);
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
}
.modal-kicker { display: block; color: var(--orange-deep); font-size: 10px; font-weight: 900; letter-spacing: 2px; }
.modal-brand { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 16px; border: 2px solid rgba(255,255,255,0.9); border-radius: 23px; color: #fff; font-size: 35px; font-weight: 900; box-shadow: 0 10px 30px rgba(123,49,5,0.16); }
.language-modal { z-index: 170; background: linear-gradient(155deg, #fb8d24 0%, #ee650e 52%, #df5107 100%); color: #fff; }
.language-sheet { width: 100%; max-width: 420px; text-align: center; }
.language-sheet .modal-kicker { color: rgba(255,255,255,0.82); }
.language-sheet h2 { margin: 9px 0 6px; font-size: clamp(28px, 8vw, 38px); line-height: 1.04; letter-spacing: -1px; }
.language-sheet > p { margin: 0; color: rgba(255,255,255,0.78); font-size: 13px; }
.language-options { display: grid; gap: 11px; margin-top: 28px; }
.language-option { display: flex; align-items: center; gap: 14px; min-height: 74px; padding: 12px 15px; border: 1px solid rgba(255,255,255,0.48); border-radius: 20px; background: rgba(255,255,255,0.96); color: var(--ink); text-align: left; box-shadow: 0 12px 30px rgba(104,41,5,0.14); cursor: pointer; transition: transform 130ms ease, box-shadow 130ms ease; }
.language-option:active { transform: scale(0.985); }
.language-code { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 16px; background: var(--orange-soft); color: var(--orange-deep); font-size: 14px; font-weight: 900; }
.language-option strong, .language-option small { display: block; }
.language-option strong { font-size: 16px; }
.language-option small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.language-option.is-saving { opacity: 0.65; pointer-events: none; }
.qr-modal { background: rgba(27,22,18,0.76); backdrop-filter: blur(10px); }
.qr-sheet { position: relative; width: 100%; max-width: 410px; padding: 30px 22px 24px; border-radius: 28px; background: #fff; box-shadow: 0 26px 70px rgba(18,13,9,0.32); text-align: center; }
.qr-sheet h2 { margin: 7px 0 7px; font-size: 28px; letter-spacing: -0.7px; }
.qr-sheet > p { max-width: 320px; margin: 0 auto; color: var(--muted); font-size: 13px; line-height: 1.45; }
.modal-close { position: absolute; top: 13px; right: 13px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 14px; background: #f4f0eb; color: #655e57; font-size: 25px; line-height: 1; cursor: pointer; }
.qr-full-frame { display: grid; place-items: center; width: min(78vw, 300px); height: min(78vw, 300px); margin: 20px auto 12px; padding: 13px; border: 1px solid #eee7de; border-radius: 25px; background: #fff; box-shadow: var(--shadow-soft); }
.qr-full-frame img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.qr-full-code { display: block; overflow-wrap: anywhere; color: var(--orange-deep); font-size: clamp(21px, 6vw, 30px); }
.qr-sheet > small { display: block; margin-top: 10px; color: var(--muted); font-size: 10px; }

.loading-overlay {
  position: fixed;
  z-index: 120;
  inset: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: min(100%, 560px);
  transform: translateX(-50%);
  background: linear-gradient(160deg, #f78a21, #ed620d);
  color: #fff;
  transition: opacity 280ms ease, visibility 280ms ease;
}
.loading-overlay.is-hidden { visibility: hidden; opacity: 0; }
.loader-mark { display: grid; place-items: center; width: 72px; height: 72px; border: 3px solid rgba(255,255,255,0.82); border-radius: 24px; font-size: 39px; font-weight: 900; animation: loader-pulse 1.25s ease-in-out infinite; }
.loading-overlay span { margin-top: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; }

.toast {
  position: fixed;
  z-index: 130;
  left: 50%;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 16px);
  max-width: calc(min(100vw, 560px) - 32px);
  padding: 11px 15px;
  transform: translate(-50%, 14px);
  border-radius: 13px;
  background: rgba(39,35,32,0.94);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: 180ms ease;
}
.toast.show { visibility: visible; opacity: 1; transform: translate(-50%, 0); }

@keyframes page-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ripple { from { opacity: 0.72; transform: scale(0.25); } to { opacity: 0; transform: scale(4); } }
@keyframes loader-pulse { 0%,100% { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(255,255,255,0.22); } 50% { transform: scale(1.03); box-shadow: 0 0 0 13px rgba(255,255,255,0); } }

@media (min-width: 561px) {
  body { padding: 18px 0; }
  .app-shell { min-height: calc(100vh - 36px); border-radius: 28px; }
  .bottom-nav { bottom: 18px; border-radius: 0 0 28px 28px; }
  .loading-overlay { top: 18px; bottom: 18px; height: auto; border-radius: 28px; }
}

@media (max-width: 380px) {
  .hero { min-height: 315px; }
  .hero-copy { padding-left: 18px; }
  .brand-mark strong { font-size: 34px; }
  .hero h1 { margin-top: 24px; font-size: 23px; }
  .metric-card { min-height: 139px; padding: 17px 14px 14px; }
  .metric-label { gap: 5px; font-size: 10px; }
  .metric-icon { width: 27px; height: 27px; }
  .referral-code { font-size: 20px; }
}

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

/* Caviara V2 global onboarding */
select { font: inherit; }
select:focus-visible { outline: 3px solid rgba(47, 111, 214, 0.25); outline-offset: 2px; }
.region-banner {
  position: sticky;
  z-index: 85;
  top: 0;
  padding: 11px 18px;
  border-bottom: 1px solid #dce7f7;
  background: #edf5ff;
  color: #30557d;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
  text-align: center;
}
.onboarding-modal {
  z-index: 180;
  align-items: flex-end;
  background: rgba(28, 22, 18, 0.66);
  backdrop-filter: blur(9px);
  touch-action: manipulation;
}
.onboarding-sheet {
  width: 100%;
  max-height: calc(100dvh - max(20px, env(safe-area-inset-top)));
  overflow-y: auto;
  padding: 20px 18px calc(22px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: #fff;
  box-shadow: 0 -18px 70px rgba(27, 19, 12, 0.28);
}
.onboarding-topline { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 11px; margin-bottom: 24px; }
.onboarding-topline .modal-brand { width: 44px; height: 44px; margin: 0; border: 0; border-radius: 15px; background: linear-gradient(135deg, var(--orange), var(--orange-deep)); font-size: 23px; box-shadow: 0 8px 20px rgba(232,93,11,0.24); }
.onboarding-topline strong { display: block; margin-top: 3px; font-size: 14px; }
.onboarding-progress { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 30px; padding: 5px 9px; border-radius: 999px; background: var(--orange-soft); color: var(--orange-deep); font-size: 11px; font-weight: 900; }
.onboarding-step h2 { margin: 0; font-size: clamp(25px, 7vw, 33px); line-height: 1.08; letter-spacing: -0.8px; }
.onboarding-step > p { margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.onboarding-step .language-options { margin-top: 18px; }
.onboarding-step .language-option { min-height: 68px; border-color: var(--border); box-shadow: var(--shadow-soft); }
.onboarding-field { display: grid; gap: 8px; margin: 22px 0 14px; color: #5c5650; font-size: 12px; font-weight: 850; }
.onboarding-field select { width: 100%; min-height: 52px; padding: 11px 42px 11px 14px; border: 1px solid #e4dbd0; border-radius: 15px; background: #fbfaf8; color: var(--ink); }
.onboarding-ios-action { position: relative; z-index: 3; pointer-events: auto; touch-action: manipulation; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.mode-options { display: grid; gap: 10px; margin-top: 20px; }
.mode-option { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; align-items: center; gap: 2px 13px; width: 100%; min-height: 78px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 19px; background: #fff; color: var(--ink); text-align: left; box-shadow: var(--shadow-soft); cursor: pointer; }
.mode-option:active { transform: scale(0.985); }
.mode-option.is-saving, .mode-option:disabled { opacity: 0.55; pointer-events: none; }
.mode-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--orange-soft); font-size: 24px; }
.mode-option strong { font-size: 15px; }
.mode-option small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.onboarding-note { margin-top: 14px !important; padding: 11px 13px; border-radius: 13px; background: #f8f5f1; color: #746e68 !important; font-size: 11px !important; }
.onboarding-step .stack-form { margin-top: 18px; }
.onboarding-step .stack-form input, .onboarding-step .stack-form textarea, .onboarding-step .stack-form select { min-height: 48px; border-radius: 14px; }
.form-divider { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--border); }
.phone-shield { display: grid; place-items: center; width: 82px; height: 82px; margin: 25px auto 20px; border-radius: 28px; background: linear-gradient(135deg, #e7f8f1, #d4f2e6); color: var(--success); font-size: 37px; font-weight: 900; box-shadow: 0 10px 26px rgba(35,150,111,0.14); }
.onboarding-step .button + .button { margin-top: 9px; }
.onboarding-step[data-onboarding-step="legal"] .button { margin-top: 20px; }
@media (min-width: 561px) {
  .onboarding-modal { align-items: center; }
  .onboarding-sheet { max-width: 460px; border-radius: 28px; }
}

/* V2 seller workflow and customer confirmation */
.stack-form { display: grid; gap: 10px; margin-top: 12px; }
.stack-form label { color: #6e665f; font-size: 11px; font-weight: 800; }
.field-optional { color: var(--muted); font-weight: 650; }
.stack-form textarea { resize: vertical; min-height: 78px; }
.stack-form select,
.stack-form textarea,
.stack-form input,
.compact-form select,
.compact-form textarea { width: 100%; min-height: 44px; border: 1px solid #e4ddd4; border-radius: 12px; padding: 10px 12px; background: #fff; color: var(--ink); font: inherit; }
.result-box.is-error { border: 1px solid #efb6ad; background: #fff0ee; color: #9d332b; }
.result-box.is-success { border: 1px solid #b8e7d0; background: #edf9f2; color: #17714e; }
.pending-sales { margin-bottom: 16px; padding: 14px; border: 1px solid #f3c48d; border-radius: 18px; background: #fff8ef; }
.section-note { margin: -5px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.seller-product-list { display: grid; gap: 8px; }
.seller-product-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; align-items: center; padding: 10px; border: 1px solid #eee5dc; border-radius: 14px; background: #fff; }
.seller-product-row strong { display: block; font-size: 12px; line-height: 1.3; }
.seller-product-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.seller-product-row input { min-height: 40px; padding: 8px; text-align: center; }
.quote-box { padding: 12px; border-radius: 14px; background: #fff3e8; border: 1px solid #ffd2a6; }
.quote-line { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; color: #62584f; font-size: 11px; }
.quote-line strong { color: var(--ink); text-align: right; }
.quote-line.quote-total { margin-top: 5px; padding-top: 9px; border-top: 1px solid #f3c48d; font-size: 13px; }
.sale-confirm-card { align-items: stretch; border-color: #f0c28e; background: #fffdf9; }
.sale-items-summary { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.sale-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.sale-actions button { min-height: 38px; border: 0; border-radius: 11px; font-size: 11px; font-weight: 850; cursor: pointer; }
.sale-actions .confirm { background: #e3f7ec; color: #116b49; }
.sale-actions .dispute { background: #fdebea; color: #9d3734; }
@media (min-width: 540px) {
  .compact-form { grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; }
}


/* V2 finance and biweekly rankings */
.ranking-card {
  margin-top: 14px;
  padding: 17px;
  border: 1px solid rgba(238, 224, 207, 0.92);
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, #fff8ef);
  box-shadow: var(--shadow-soft);
}
.ranking-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ranking-heading h2 { margin: 3px 0 0; font-size: 18px; }
.ranking-period { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: var(--orange-soft); color: var(--orange-deep); font-size: 10px; font-weight: 850; }
.ranking-tabs { margin-top: 13px; }
.ranking-list { display: grid; gap: 8px; }
.ranking-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #eee5da; border-radius: 15px; background: #fff; }
.ranking-place { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 11px; background: #f5f0e9; color: #635c55; font-size: 12px; font-weight: 900; }
.ranking-row:nth-child(1) .ranking-place { background: linear-gradient(135deg, #ffe6a3, #f7c95b); color: #6d4a00; }
.ranking-row:nth-child(2) .ranking-place { background: linear-gradient(135deg, #edf0f4, #cbd2dc); color: #46505e; }
.ranking-row:nth-child(3) .ranking-place { background: linear-gradient(135deg, #f4d0b0, #d89967); color: #6f351a; }
.ranking-person { min-width: 0; }
.ranking-person strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ranking-person span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.ranking-value { text-align: right; }
.ranking-value strong { display: block; color: var(--orange-deep); font-size: 13px; }
.ranking-value span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.form-card select { width: 100%; min-height: 48px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid #e6ded4; border-radius: 14px; background: #fbfaf8; color: var(--ink); }
.form-card input + label, .form-card select + label { margin-top: 12px; }
.payout-wallet-note { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.sensitive-reveal { margin-top: 8px; padding: 10px; border-radius: 12px; background: #fff4e5; color: #6e4a24; font-size: 11px; line-height: 1.45; word-break: break-word; }
.admin-actions { flex-wrap: wrap; }

/* V2 legal documents, consent and profile controls */
.legal-profile-panel { margin-top: 16px; }
.legal-document-list { display: grid; gap: 8px; margin: 14px 0; }
.legal-document-link { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 11px 13px; border: 1px solid #e8ded3; border-radius: 14px; background: #fff; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.legal-document-link strong { display: block; font-size: 12px; line-height: 1.35; }
.legal-document-link small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.legal-document-link::after { content: "›"; flex: 0 0 auto; color: var(--orange); font-size: 24px; font-weight: 700; }
.consent-row { display: grid; grid-template-columns: 24px 1fr; align-items: start; gap: 10px; margin: 10px 0; padding: 12px; border: 1px solid #e9dfd5; border-radius: 14px; background: #fff; color: #4a433e; font-size: 12px; font-weight: 700; line-height: 1.45; cursor: pointer; }
.consent-row input { width: 20px; height: 20px; margin: 0; accent-color: var(--orange); }
.consent-row:has(input:focus-visible) { outline: 3px solid rgba(244,122,25,0.2); outline-offset: 2px; }
.consent-optional { background: #faf8f5; color: #6e665f; font-weight: 600; }
.legal-modal { z-index: 190; align-items: stretch; padding: 0; background: #fff; }
.legal-sheet { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; max-width: 720px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); background: #fff; overflow: hidden; }
.legal-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-right: 2px; }
.legal-modal-header h2 { margin: 3px 40px 0 0; font-size: 19px; line-height: 1.25; }
.legal-modal-header .modal-close { position: static; flex: 0 0 auto; }
.legal-version { margin: 10px 0; padding: 8px 10px; border-radius: 10px; background: #fff4e8; color: #a64e08; font-size: 10px; font-weight: 800; overflow-wrap: anywhere; }
.legal-document-body { flex: 1 1 auto; min-height: 0; padding: 2px 4px 24px; overflow: auto; overscroll-behavior: contain; white-space: pre-wrap; color: #3f3935; font: 12px/1.58 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; word-break: break-word; }
.legal-document-body::selection { background: #ffe0c5; }
@media (min-width: 721px) {
  .legal-modal { align-items: center; padding: 28px; }
  .legal-sheet { height: min(88vh, 920px); border-radius: 24px; box-shadow: 0 24px 80px rgba(43,31,21,0.24); }
}

/* Selected owner direction: Graphite Premium */
:root {
  --background: #fbf4ea;
  --surface-warm: #fffaf2;
  --graphite: #242423;
  --graphite-deep: #171716;
  --graphite-soft: #343331;
  --gold: #efad45;
  --nav-height: 84px;
}

body {
  background: linear-gradient(180deg, #eee7de 0, #faf8f4 100%);
}

.app-shell {
  background: var(--background);
}

.page {
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 30px);
}

.hero {
  min-height: 355px;
  background-color: #ed650d;
  background-image: linear-gradient(100deg, rgba(244, 122, 25, 0.12) 0 42%, rgba(226, 76, 4, 0.02) 76%), url("./assets/hero-pets.jpg");
  background-position: center center;
  background-size: cover;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: url("./assets/paw-pattern.svg");
  background-size: 124px 124px;
  opacity: 0.48;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.hero::after {
  z-index: 1;
  background: linear-gradient(90deg, rgba(232, 82, 6, 0.08) 0%, rgba(232, 82, 6, 0.02) 48%, transparent 72%);
}

.hero-copy {
  z-index: 2;
  width: 54%;
  padding: max(22px, env(safe-area-inset-top)) 0 30px 22px;
}

.brand-mark {
  display: block;
  width: min(46vw, 246px);
  margin: 0 0 4px;
}

.brand-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(255, 170, 95, 0.10));
}

.brand-subtitle {
  margin-top: 7px;
  color: #fff7ed;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2.05px;
  text-shadow: 0 2px 8px rgba(89, 30, 3, 0.24);
}

.hero h1 {
  margin-top: 31px;
  text-shadow: 0 3px 14px rgba(93, 29, 1, 0.18);
}

.home-content {
  padding: 16px 14px 20px;
  background: linear-gradient(180deg, #fffaf4 0%, #fbf4ea 54%, #f8efe4 100%);
}

.metric-card {
  min-height: 146px;
  border: 1px solid rgba(234, 183, 126, 0.62);
  background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255,246,234,0.97));
  box-shadow: 0 13px 28px rgba(89, 54, 29, 0.11);
}

.metric-card::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 30px;
  height: 30px;
  background: url("./assets/paw-pattern.svg") center/68px 68px no-repeat;
  opacity: 0.18;
  pointer-events: none;
}

.metric-label {
  color: #4b4540;
}

.metric-icon,
.metric-sales .metric-icon,
.metric-bonus .metric-icon {
  background: linear-gradient(145deg, #fb7a14, #e75305);
  color: #fff;
  box-shadow: 0 7px 15px rgba(232, 93, 11, 0.22);
}

.metric-sales .metric-value,
.metric-bonus .metric-value {
  color: var(--ink);
}

.metric-sales .metric-watermark,
.metric-bonus .metric-watermark {
  color: var(--orange-deep);
}

.ranking-card {
  border: 1px solid rgba(255, 172, 87, 0.86);
  background: linear-gradient(140deg, #fb7a12 0%, #e95a08 58%, #cb4304 100%);
  color: #fff;
  box-shadow: 0 18px 36px rgba(128, 48, 5, 0.20);
}

.ranking-card .eyebrow,
.ranking-card .ranking-heading h2,
.ranking-card .section-note {
  color: #fff;
}

.ranking-card .section-note {
  opacity: 0.86;
}

.ranking-card .ranking-period {
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(44, 36, 31, 0.30);
  color: #fff;
}

.ranking-card .chip {
  border-color: rgba(255,255,255,0.34);
  background: rgba(94, 39, 8, 0.22);
  color: #fff;
}

.ranking-card .chip.active {
  border-color: #fff4e7;
  background: #fff4e7;
  color: #53230a;
}

.ranking-card .empty-state {
  border-color: rgba(255,255,255,0.34);
  background: rgba(255,255,255,0.94);
  color: var(--ink);
}

.ranking-card .ranking-row {
  border-color: rgba(255,255,255,0.56);
  background: rgba(255,255,255,0.96);
  color: var(--ink);
}

.bottom-nav {
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  bottom: max(9px, env(safe-area-inset-bottom));
  width: min(calc(100% - 20px), 540px);
  height: 78px;
  padding: 7px 5px;
  overflow: visible;
  border: 1px solid rgba(238, 126, 38, 0.82);
  border-radius: 29px;
  background: linear-gradient(145deg, var(--graphite-soft) 0%, var(--graphite) 48%, var(--graphite-deep) 100%);
  box-shadow: 0 14px 34px rgba(31, 26, 22, 0.32), 0 0 0 1px rgba(255, 188, 92, 0.12) inset;
  backdrop-filter: blur(18px);
}

.bottom-nav::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background-image: url("./assets/paw-pattern.svg");
  background-size: 112px 112px;
  opacity: 0.075;
  pointer-events: none;
}

.nav-item {
  position: relative;
  z-index: 1;
  min-width: 0;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: transparent;
  color: #fff8ef;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.nav-item[hidden] {
  display: none !important;
}

.nav-icon {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  font-size: 0;
}

.nav-svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item.active {
  transform: translateY(-8px);
  border-color: rgba(255, 193, 105, 0.82);
  background: linear-gradient(150deg, #ff851c 0%, #f36b0d 54%, #df5006 100%);
  color: #fff;
  font-weight: 850;
  box-shadow: 0 10px 22px rgba(208, 70, 3, 0.42), 0 0 0 2px rgba(255,255,255,0.08) inset;
}

.nav-item.active .nav-svg {
  stroke-width: 2.25;
}

.nav-item:active {
  transform: translateY(-2px) scale(0.97);
}

.nav-item.active:active {
  transform: translateY(-6px) scale(0.97);
}

@media (min-width: 561px) {
  .bottom-nav {
    bottom: calc(18px + max(9px, env(safe-area-inset-bottom)));
    border-radius: 29px;
  }
}

@media (max-width: 380px) {
  .hero {
    min-height: 324px;
  }

  .brand-mark {
    width: min(47vw, 176px);
  }

  .brand-subtitle {
    font-size: 7px;
    letter-spacing: 1.55px;
  }

  .bottom-nav {
    width: calc(100% - 14px);
    height: 74px;
    padding-inline: 3px;
    border-radius: 25px;
  }

  .nav-item {
    font-size: 9px;
  }

  .nav-svg {
    width: 23px;
    height: 23px;
  }
}


/* Production UI containment: seller applications must stay inside the viewport. */
#adminSellerList, #adminSellerList .list-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#adminSellerList .list-card {
  align-items: flex-start;
  overflow: hidden;
}
#adminSellerList .list-card-main {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
#adminSellerList .list-card-main strong,
#adminSellerList .list-card-main span {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
#adminSellerList .list-card-value {
  min-width: 0;
  max-width: 42%;
  flex: 0 1 auto;
  overflow-wrap: anywhere;
}
#adminSellerList .admin-actions {
  max-width: 100%;
  flex-wrap: wrap;
}
@media (max-width: 560px) {
  #adminSellerList .list-card { display: block; }
  #adminSellerList .list-card-value {
    max-width: 100%;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid #eee8df;
  }
  #adminSellerList .admin-actions button {
    max-width: 100%;
    white-space: normal;
  }
}


/* Production UI containment: seller applications must stay inside the viewport. */
#adminSellerList, #adminSellerList .list-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#adminSellerList .list-card {
  align-items: flex-start;
  overflow: hidden;
}
#adminSellerList .list-card-main {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
#adminSellerList .list-card-main strong,
#adminSellerList .list-card-main span {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
#adminSellerList .list-card-value {
  min-width: 0;
  max-width: 42%;
  flex: 0 1 auto;
  overflow-wrap: anywhere;
}
#adminSellerList .admin-actions {
  max-width: 100%;
  flex-wrap: wrap;
}
@media (max-width: 560px) {
  #adminSellerList .list-card { display: block; }
  #adminSellerList .list-card-value {
    max-width: 100%;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid #eee8df;
  }
  #adminSellerList .admin-actions button {
    max-width: 100%;
    white-space: normal;
  }
}


/* Production UI containment: seller applications must stay inside the viewport. */
#adminSellerList, #adminSellerList .list-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#adminSellerList .list-card {
  align-items: flex-start;
  overflow: hidden;
}
#adminSellerList .list-card-main {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
#adminSellerList .list-card-main strong,
#adminSellerList .list-card-main span {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
#adminSellerList .list-card-value {
  min-width: 0;
  max-width: 42%;
  flex: 0 1 auto;
  overflow-wrap: anywhere;
}
#adminSellerList .admin-actions {
  max-width: 100%;
  flex-wrap: wrap;
}
@media (max-width: 560px) {
  #adminSellerList .list-card { display: block; }
  #adminSellerList .list-card-value {
    max-width: 100%;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid #eee8df;
  }
  #adminSellerList .admin-actions button {
    max-width: 100%;
    white-space: normal;
  }
}

/* Production home visual contract restored for selective v33 release. */
.hero {
  position: relative;
  height: 320px;
  min-height: 320px;
  overflow: hidden;
  isolation: isolate;
  background: var(--orange);
  color: #fff;
}

.hero-track {
  display: flex;
  height: 320px;
  min-height: 320px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  background-color: var(--orange);
  background-image: linear-gradient(90deg, rgba(208, 69, 3, 0.68) 0%, rgba(232, 93, 11, 0.28) 50%, rgba(232, 93, 11, 0.02) 78%), url('./assets/caviara-banner-v5-welcome-textsafe.webp?v=20260818-welcome-textsafe-v10');
  background-position: 68% center;
  background-size: cover;
}
.hero-slide[data-banner-index="1"] { background-image: linear-gradient(90deg, rgba(208, 69, 3, 0.62) 0%, rgba(232, 93, 11, 0.22) 52%, rgba(232, 93, 11, 0.02) 80%), url('./assets/caviara-banner-v6-partner-textsafe.webp?v=20260818-partner-textsafe-v10'); }
.hero-slide[data-banner-index="2"] { background-image: linear-gradient(90deg, rgba(190, 58, 0, 0.86) 0%, rgba(226, 94, 14, 0.52) 54%, rgba(235, 129, 54, 0.26) 100%), url('./assets/caviara-banner-v5-health-fullproduct.webp?v=20260818-health-fullproduct-v11'); }
.hero-slide[data-banner-index="3"] { background-image: linear-gradient(90deg, rgba(208, 69, 3, 0.58) 0%, rgba(232, 93, 11, 0.20) 52%, rgba(232, 93, 11, 0.02) 80%), url('./assets/caviara-banner-v6-community.webp?v=20260818-banners-v6'); }
.hero-slide[data-banner-index="3"] h1 { font-size: clamp(22px, 5.8vw, 28px); letter-spacing: -0.9px; }
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(105, 41, 8, 0.12), transparent 32%, rgba(64, 27, 10, 0.14));
  pointer-events: none;
}
.hero-slide-content {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  height: 320px;
  width: 66%;
  min-height: 320px;
  padding: max(22px, env(safe-area-inset-top)) 0 48px 22px;
  text-shadow: 0 2px 10px rgba(94, 31, 4, 0.24);
}
.banner-logo { display: block; width: min(160px, 43vw); height: auto; filter: brightness(0) invert(1); }
.banner-eyebrow { display: block; margin-top: 6px; font-size: 8px; font-weight: 800; letter-spacing: 1.7px; white-space: nowrap; opacity: 0.95; }
.hero-slide h1 { max-width: 100%; margin: 18px 0 0; font-size: clamp(24px, 6.5vw, 31px); line-height: 1.05; letter-spacing: -0.7px; font-weight: 850; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.hero-slide h1 span { display: inline; }
.hero-slide p { max-width: 235px; min-height: 34px; margin: 9px 0 0; font-size: 12px; font-weight: 650; line-height: 1.3; opacity: 0.95; }
.banner-cta { position: absolute; left: 22px; bottom: 43px; min-height: 36px; padding: 8px 14px; border: 1px solid rgba(255,255,255,0.75); border-radius: 999px; background: rgba(255,255,255,0.94); color: var(--orange-deep); font-size: 11px; font-weight: 850; box-shadow: 0 6px 18px rgba(86, 34, 8, 0.16); cursor: pointer; }
.banner-cta:active { transform: scale(0.97); }

.hero-dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 13px;
  display: flex;
  gap: 7px;
  transform: translateX(-50%);
}
.hero-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.62); cursor: pointer; }
.hero-dots button.active { width: 20px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.26); }
@media (max-width: 390px) {
  .hero, .hero-track { min-height: 300px; height: 300px; }
  .hero-slide, .hero-slide-content { min-height: 300px; height: 300px; }
  .hero-slide-content { padding-left: 18px; width: 68%; }
  .banner-logo { width: 145px; }
  .hero-slide h1 { margin-top: 15px; font-size: 24px; }
  .hero-slide p { font-size: 12px; }
  .banner-cta { left: 18px; bottom: 40px; }
}

.home-content { padding: 14px; }