/* =============================================================
   UTSAVCONNECT — Design System + Components
   Mobile-first. 390px reference. Desktop = centered phone shell.
============================================================= */

:root {
  --primary: #ff6a00;
  --primary-dark: #d95800;
  --primary-soft: #ffe2cc;
  --secondary: #4b148c;
  --secondary-soft: #ede4f9;
  --gold: #f5a623;
  --gold-soft: #fff2d6;
  --bg: #fff8f0;
  --card-bg: #ffffff;
  --text: #1f1726;
  --text-light: #7a6f85;
  --border: #eee1d5;
  --border-strong: #ddd0c2;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #f39c12;

  --gradient-primary: linear-gradient(135deg, #ff6a00 0%, #f5a623 100%);
  --gradient-purple: linear-gradient(135deg, #4b148c 0%, #8b3fd1 100%);
  --gradient-festive: linear-gradient(135deg, #ff6a00 0%, #4b148c 100%);

  --shadow-sm: 0 1px 2px rgba(31, 23, 38, 0.06);
  --shadow: 0 2px 12px rgba(31, 23, 38, 0.08);
  --shadow-lg: 0 8px 28px rgba(31, 23, 38, 0.12);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --phone-w: 430px;
  --phone-h: 900px;
  --bnav-h: 68px;
  --topbar-h: 56px;
}

/* RESET ==================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }
body {
  font-family: var(--font-body);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  background: linear-gradient(180deg, #fdf2e3, #f5e3d3 60%, #ead7c4);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button {
  font: inherit; color: inherit;
  border: none; background: none;
  cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.25; color: var(--text); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* DESKTOP BACKDROP ========================================= */
.desktop-bg {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 106, 0, 0.18), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(75, 20, 140, 0.18), transparent 40%),
    linear-gradient(135deg, #fdf2e3, #ead7c4);
}

/* PHONE SHELL ============================================== */
.phone-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone-notch { display: none; }

@media (min-width: 540px) {
  body { display: flex; align-items: center; justify-content: center; padding: 24px; }
  .phone-shell {
    width: var(--phone-w);
    height: min(var(--phone-h), calc(100vh - 48px));
    min-height: 0;
    border-radius: 44px;
    box-shadow:
      0 0 0 10px #1a1a1a,
      0 0 0 12px #2a2a2a,
      0 30px 80px rgba(0,0,0,0.35);
  }
  .phone-notch {
    display: block;
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 110px; height: 28px; background: #0a0a0a; border-radius: 16px;
    z-index: 50;
  }
  /* Reserve vertical space so the notch never overlaps header titles or buttons */
  .top-bar {
    height: calc(var(--topbar-h) + 38px);
    padding-top: 38px;
  }
  /* Topbar-hidden onboarding screens also need clearance under the notch */
  .screen[data-screen="facts"],
  .screen[data-screen="role-select"],
  .screen[data-screen="mandal-benefits"],
  .screen[data-screen="agency-benefits"] {
    padding-top: 38px;
  }
  /* Splash intentionally fills behind the notch (acts as status-bar wallpaper) */
}

.app-root {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* TOP BAR ================================================== */
.top-bar {
  height: var(--topbar-h);
  display: flex; align-items: center;
  padding: 0 12px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}
.top-bar__back {
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 28px; line-height: 1; color: var(--text);
  padding: 0;
}
.top-bar__back:active { background: var(--primary-soft); }
.top-bar__title {
  flex: 1; text-align: center;
  font-family: var(--font-display);
  font-weight: 600; font-size: 16px;
  /* Keep title visually centered in the whole topbar regardless of which side
     buttons are visible. Leaves consistent 40px gutters so back/action don't
     overlap and title doesn't drift when the action icon is hidden. */
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-bar__action {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
/* When the action button holds the unlock pill, let it grow so the pill isn't clipped */
.top-bar__action:has(.topbar-unlock-pill) { width: auto; min-width: 40px; padding: 0 6px; }
.topbar-unlock-pill {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 99px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
}

/* SCREEN CONTAINER ========================================= */
.screen-container {
  flex: 1; min-height: 0;
  position: relative;
  overflow: hidden;
}
.screen {
  position: absolute; inset: 0;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  padding-bottom: 24px;
}
.screen.active { display: block; animation: slideIn 280ms cubic-bezier(.25,.8,.35,1); }
.screen.active.back { animation: slideInBack 280ms cubic-bezier(.25,.8,.35,1); }

.bottom-nav--visible ~ .screen-container .screen,
.has-bnav .screen { padding-bottom: calc(var(--bnav-h) + 24px); }

.screen--center {
  display: none;
  place-items: center;
  padding: 24px;
}
.screen--center.active { display: grid; }

/* Splash fills entire screen — no padding, no centering wrapper */
.screen--splash { padding: 0; }
.screen--splash.active { display: block; }

.screen__inner {
  padding: 20px 20px 8px;
  max-width: 100%;
}
.screen__inner--flush { padding: 0 0 8px; }

.screen__cta {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 24px;
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: .8; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideInBack {
  from { transform: translateX(-30%); opacity: .8; }
  to   { transform: translateX(0); opacity: 1; }
}

/* TYPOGRAPHY UTILITIES ===================================== */
.screen-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin-bottom: 6px; }
.screen-sub { font-size: 14px; color: var(--text-light); margin-bottom: 4px; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 4px 10px; border-radius: 99px;
  margin-bottom: 12px;
}
.eyebrow--purple { color: var(--secondary); background: var(--secondary-soft); }
.eyebrow--orange { color: var(--primary); background: var(--primary-soft); }
.eyebrow--gold { color: #8a5800; background: var(--gold-soft); }

.onboard-header { margin-bottom: 20px; }

/* BUTTONS ================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 20px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600; font-size: 15px;
  transition: transform 120ms ease, box-shadow 120ms ease, background 150ms ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.btn--lg { height: 54px; font-size: 16px; }
.btn--sm { height: 38px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 6px 18px rgba(255, 106, 0, 0.32);
}
.btn--primary:disabled { background: var(--border-strong); color: #fff; box-shadow: none; cursor: not-allowed; }

.btn--secondary {
  background: var(--secondary);
  color: #fff;
  box-shadow: 0 6px 18px rgba(75, 20, 140, 0.25);
}
.btn--outline {
  background: #fff;
  color: var(--text);
  border: 1.5px solid var(--border-strong);
}
.btn--ghost {
  background: transparent;
  color: var(--text-light);
}
.btn--ghost:active { background: rgba(0,0,0,0.04); }

.btn--gold {
  background: linear-gradient(135deg, #f5a623, #ff8a00);
  color: #fff;
}

/* SPLASH =================================================== */
.splash {
  width: 100%;
  min-height: 100%;
  background: linear-gradient(165deg, #ff6a00 0%, #ff8a3d 35%, #4b148c 100%);
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 60px 24px 36px;
  color: #fff;
  overflow: hidden;
  border-radius: 0;
}
.splash__pattern {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.12;
  background-image:
    radial-gradient(circle at 12% 18%, #fff 1.5px, transparent 2px),
    radial-gradient(circle at 36% 8%, #fff 1px, transparent 1.5px),
    radial-gradient(circle at 70% 22%, #fff 2px, transparent 2.5px),
    radial-gradient(circle at 88% 70%, #fff 1.5px, transparent 2px),
    radial-gradient(circle at 22% 78%, #fff 1px, transparent 1.5px),
    radial-gradient(circle at 56% 92%, #fff 2px, transparent 2.5px);
  background-size: 200px 200px;
}
.splash__logo { text-align: center; margin-top: 60px; z-index: 1; }
.logo-mark {
  width: 110px; height: 110px;
  margin: 0 auto 20px;
  border-radius: 30px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.4);
  display: grid; place-items: center;
  font-size: 56px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.2);
}
.logo-mark__om { font-family: var(--font-display); font-weight: 700; line-height: 1; }
.logo-mark.logo-mark--image,
.auth-hero .logo-mark.logo-mark--image {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}
.logo-mark__img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  background: transparent;
}
.splash__brand {
  font-family: var(--font-display);
  font-weight: 800; font-size: 36px;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}
.splash__tagline {
  font-size: 14px;
  opacity: 0.92;
  max-width: 280px;
  margin: 0 auto;
}
.splash__footer { width: 100%; z-index: 1; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.splash__credit { font-size: 11px; opacity: 0.7; }
.splash .btn--primary {
  background: #fff; color: var(--primary);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  width: 100%;
}

/* STAT GRID (FACTS SCREEN) ================================= */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 20px;
}
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.stat-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-primary);
}
.stat-card--purple::before { background: var(--gradient-purple); }
.stat-card--gold::before { background: linear-gradient(135deg, #f5a623, #ffb703); }
.stat-card__value {
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; color: var(--text);
  letter-spacing: -0.5px;
}
.stat-card__label { font-size: 12px; color: var(--text-light); margin-top: 4px; }

/* BENEFIT LIST ============================================= */
.benefit-list { display: flex; flex-direction: column; gap: 10px; }
.benefit-row {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex; align-items: flex-start; gap: 12px;
}
.benefit-row__icon {
  width: 40px; height: 40px;
  background: var(--primary-soft);
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}
.benefit-row > div { display: flex; flex-direction: column; }
.benefit-row strong { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); }
.benefit-row span { font-size: 12.5px; color: var(--text-light); margin-top: 2px; }

/* ROLE CARD ================================================ */
.role-card {
  width: 100%;
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 12px;
  text-align: left;
  transition: border-color 150ms ease, transform 120ms ease;
}
.role-card:active { transform: scale(0.99); }
.role-card:hover { border-color: var(--primary); }
.role-card--purple:hover { border-color: var(--secondary); }
.role-card__emoji {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--primary-soft);
  display: grid; place-items: center;
  font-size: 28px;
  flex-shrink: 0;
}
.role-card--purple .role-card__emoji { background: var(--secondary-soft); }
.role-card__body h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.role-card__body p { font-size: 13px; color: var(--text-light); }
.role-card__chev { font-size: 28px; color: var(--text-light); margin-left: auto; flex-shrink: 0; }

/* FORMS ==================================================== */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row .form-group { margin-bottom: 0; }

.form-label {
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; color: var(--text);
}
.form-label .req { color: var(--danger); }
.form-help { font-size: 11.5px; color: var(--text-light); }

.input, .select, .textarea {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 14.5px;
  color: var(--text);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.textarea { height: auto; padding: 12px 14px; min-height: 96px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.input.error, .select.error, .textarea.error {
  border-color: var(--danger);
  background: #fef2f2;
}
.input::placeholder, .textarea::placeholder { color: #b9aebf; }
.select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%237a6f85' d='M6 8 0 0h12z'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; }

/* CHECKBOX CARDS =========================================== */
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check-card {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; cursor: pointer;
  transition: all 150ms ease;
}
.check-card input { position: absolute; opacity: 0; pointer-events: none; }
.check-card__icon { font-size: 24px; }
.check-card__label { font-size: 12.5px; font-weight: 500; color: var(--text); line-height: 1.2; }
.check-card.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.check-card.selected .check-card__label { color: var(--primary-dark); font-weight: 600; }

/* STEPPER ================================================== */
.stepper {
  display: flex; align-items: center;
  gap: 4px;
  margin-bottom: 20px;
}
.stepper__step {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  position: relative;
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px;
  color: var(--text-light);
}
.stepper__dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--border);
  display: grid; place-items: center;
  font-size: 12px; color: var(--text-light);
  margin-bottom: 4px;
  z-index: 1;
}
.stepper__step.active .stepper__dot {
  background: var(--gradient-primary);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(255, 106, 0, 0.3);
}
.stepper__step.done .stepper__dot {
  background: var(--success); color: #fff; border-color: transparent;
}
.stepper__step.active .stepper__label { color: var(--primary); }
.stepper__label { font-size: 10.5px; text-align: center; line-height: 1.15; white-space: nowrap; }
.stepper__line {
  flex: 0.35; height: 2px;
  background: var(--border);
  margin: 0 -2px;
  margin-top: -16px;
}
.stepper__line.done { background: var(--success); }

/* TOGGLE =================================================== */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.toggle-row__label { font-size: 14px; font-weight: 500; }
.toggle {
  width: 44px; height: 26px; background: var(--border-strong);
  border-radius: 99px; position: relative;
  transition: background 200ms ease;
  flex-shrink: 0;
}
.toggle::after {
  content: ""; position: absolute;
  width: 20px; height: 20px; background: #fff;
  border-radius: 50%; top: 3px; left: 3px;
  transition: transform 200ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle.on { background: var(--success); }
.toggle.on::after { transform: translateX(18px); }

/* UPLOAD CARD ============================================== */
.upload-card {
  background: var(--card-bg);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 14px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 150ms ease;
}
.upload-card:active { transform: scale(0.99); }
.upload-card__icon {
  width: 40px; height: 40px;
  background: var(--secondary-soft);
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.upload-card__body { flex: 1; }
.upload-card__title { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.upload-card__sub { font-size: 11.5px; color: var(--text-light); }
.upload-card__status { font-size: 11px; font-weight: 600; color: var(--text-light); }
.upload-card.uploaded {
  border-style: solid;
  border-color: var(--success);
  background: #ecfdf5;
}
.upload-card.uploaded .upload-card__icon { background: var(--success); color: #fff; }
.upload-card.uploaded .upload-card__status { color: var(--success); }

/* CARDS GENERIC ============================================ */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
}
.card--purple-tint { background: linear-gradient(180deg, var(--secondary-soft), #fff); }
.card--orange-tint { background: linear-gradient(180deg, var(--primary-soft), #fff); }
.card-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.card-sub { font-size: 13px; color: var(--text-light); }

/* MANDAL SEARCH RESULT CARD ================================ */
.mandal-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.mandal-card__top {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 12px;
}
.mandal-avatar {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700;
  color: #fff; font-size: 16px;
  flex-shrink: 0;
}
.mandal-card__info { flex: 1; min-width: 0; }
.mandal-card__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 15px; line-height: 1.3;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.mandal-card__loc { font-size: 12px; color: var(--text-light); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.mandal-card__bookmark {
  min-width: 44px; min-height: 44px;
  border-radius: 10px;
  background: var(--bg);
  display: grid; place-items: center;
  color: var(--text-light); font-size: 18px;
  flex-shrink: 0;
}
.mandal-card__bookmark.saved { color: var(--primary); background: var(--primary-soft); }
.mandal-card--compared { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft), var(--shadow-sm); }
.mandal-card__compare {
  min-width: 44px; min-height: 44px;
  border-radius: 10px;
  background: var(--bg);
  display: grid; place-items: center;
  font-size: 20px; font-weight: 700;
  color: var(--text-light);
  flex-shrink: 0;
}
.mandal-card__compare.on { background: var(--primary); color: #fff; }
.compare-bar {
  position: sticky; bottom: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-top: 12px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 -4px 16px rgba(31,23,38,0.08);
}
.compare-bar__count { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); }

/* Compare side-by-side table */
.cmp-table {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cmp-row { display: grid; grid-template-columns: 92px 1fr; border-bottom: 1px solid var(--border); }
.cmp-row:last-child { border-bottom: none; }
.cmp-row--head { background: var(--bg); }
.cmp-row__label {
  padding: 12px 10px;
  font-size: 11px; font-weight: 600;
  color: var(--text-light);
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex; align-items: center;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.cmp-row__cells { display: grid; }
.cmp-cell {
  padding: 10px 8px;
  font-size: 12.5px;
  border-right: 1px solid var(--border);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cmp-cell:last-child { border-right: none; }
.cmp-cell--head { position: relative; padding: 12px 6px 8px; }
.cmp-cell__remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  background: var(--card-bg);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; color: var(--text-light);
  border: 1px solid var(--border);
}

/* Campaign status timeline */
.timeline { display: flex; flex-direction: column; gap: 4px; }
.timeline__node {
  display: grid; grid-template-columns: 40px 1fr;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 0;
  position: relative;
}
.timeline__node:not(:last-child)::after {
  content: ""; position: absolute;
  left: 19px; top: 36px; bottom: -4px;
  width: 2px; background: var(--border);
}
.timeline__node.done::after { background: var(--success); }
.timeline__dot {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  display: grid; place-items: center;
  font-size: 14px;
  z-index: 1; position: relative;
}
.timeline__node.done .timeline__dot {
  background: var(--success); border-color: var(--success); color: #fff;
}
.timeline__node.active .timeline__dot {
  background: var(--gradient-primary); border-color: transparent; color: #fff;
  box-shadow: 0 0 0 4px var(--primary-soft);
}
.timeline__body { padding-top: 9px; }
.timeline__label {
  font-family: var(--font-display); font-weight: 600;
  font-size: 13.5px; color: var(--text);
}
.timeline__node:not(.active):not(.done) .timeline__label { color: var(--text-light); }
.timeline__time { font-size: 11px; color: var(--text-light); margin-top: 2px; }
.timeline__node.active .timeline__time { color: var(--primary); font-weight: 600; }

/* Messaging thread */
.msg-thread { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 12px; }
.msg-bubble {
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 16px;
  font-size: 13.5px; line-height: 1.45;
  box-shadow: var(--shadow-sm);
}
.msg-bubble__author { font-size: 10.5px; font-weight: 600; color: var(--text-light); margin-bottom: 4px; }
.msg-bubble__text { white-space: pre-wrap; }
.msg-bubble__time { font-size: 10.5px; color: var(--text-light); margin-top: 4px; text-align: right; }
.msg-bubble--sponsor {
  align-self: flex-start;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.msg-bubble--mandal {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--primary-soft), #fff);
  border: 1px solid var(--primary);
  color: var(--text);
  border-bottom-right-radius: 4px;
}
.msg-compose {
  position: sticky; bottom: 0;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  padding: 12px 4px 8px;
  margin: 12px -20px -8px;
  padding: 12px 20px 16px;
}
.mandal-card__stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  background: var(--bg);
  border-radius: var(--radius); padding: 10px 6px;
  margin-bottom: 12px;
}
.mandal-card__stat { text-align: center; }
.mandal-card__stat-val { display: block; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text); }
.mandal-card__stat-lbl { display: block; font-size: 10px; color: var(--text-light); margin-top: 2px; }
.mandal-card__cta { display: flex; gap: 8px; }
.mandal-card__cta .btn { flex: 1; }

.verified-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: linear-gradient(135deg, var(--gold), #ffb703);
  color: #fff;
  font-family: var(--font-display); font-weight: 600;
  font-size: 10.5px;
  padding: 2px 7px; border-radius: 99px;
  box-shadow: 0 1px 3px rgba(245, 166, 35, 0.4);
}

/* FILTER BAR =============================================== */
.filter-bar {
  display: flex; gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-chip {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 6px 12px;
  font-size: 12.5px; font-weight: 500;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.filter-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* SEARCH BAR =============================================== */
.search-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0 12px;
  height: 44px;
  margin-bottom: 14px;
}
.search-bar__input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px;
}
.search-bar__icon { font-size: 16px; color: var(--text-light); }

/* MANDAL PROFILE =========================================== */
.profile-hero {
  position: relative;
  height: 220px;
  background: var(--gradient-festive);
  display: flex; align-items: flex-end;
  padding: 16px 20px;
  color: #fff;
  overflow: hidden;
}
.profile-hero::before {
  content: ""; position: absolute; inset: 0;
  opacity: 0.18;
  background-image:
    radial-gradient(circle at 30% 30%, #fff 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, #fff 1.5px, transparent 2.5px),
    radial-gradient(circle at 50% 85%, #fff 2px, transparent 3px);
  background-size: 80px 80px;
}
.profile-hero__avatar {
  width: 72px; height: 72px;
  border-radius: 20px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,0.4);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 24px;
  color: #fff; flex-shrink: 0;
  z-index: 1;
}
.profile-hero__name-block { margin-left: 14px; z-index: 1; flex: 1; min-width: 0; }
.profile-hero__name { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.2; }
.profile-hero__popular { font-size: 13px; opacity: 0.92; margin-top: 2px; }
.profile-hero__meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; opacity: 0.95; flex-wrap: wrap; }
.profile-stats-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--card-bg);
  margin: -24px 16px 16px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 14px 8px;
  position: relative;
  z-index: 2;
}
.profile-stats-strip > div { text-align: center; border-right: 1px solid var(--border); }
.profile-stats-strip > div:last-child { border-right: none; }
.profile-stat-val { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text); display: block; }
.profile-stat-lbl { font-size: 10.5px; color: var(--text-light); margin-top: 3px; display: block; }

.profile-body { padding: 0 20px; }
.profile-section { margin-bottom: 20px; }
.profile-section h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.profile-section p { font-size: 13.5px; color: var(--text); line-height: 1.55; }

.media-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 8px;
}
.media-tile {
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--primary-soft), var(--gold-soft));
  display: grid; place-items: center;
  font-size: 22px;
  color: var(--primary);
}
.media-tile--purple { background: linear-gradient(135deg, var(--secondary-soft), #f3e8ff); color: var(--secondary); }
.media-tile--tile-c1 { background: linear-gradient(135deg, #ffe8d2, #ffd5a8); color: var(--primary); }
.media-tile--tile-c2 { background: linear-gradient(135deg, var(--secondary-soft), #f3e8ff); color: var(--secondary); }
.media-tile--tile-c3 { background: linear-gradient(135deg, #fef3c7, var(--gold-soft));  color: #92400e; }
.media-tile--tile-c4 { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.media-tile--tile-c5 { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; }
.media-tile--tile-c6 { background: linear-gradient(135deg, #fce7f3, #fbcfe8); color: #9d174d; }
.media-tile--add {
  background: transparent;
  border: 2px dashed var(--border-strong);
  color: var(--text-light);
  font-size: 28px;
  font-weight: 300;
  cursor: pointer;
}
.media-tile--add:hover { border-color: var(--primary); color: var(--primary); }

/* RESPONSE SLA + TRUST STRIP =============================== */
.response-sla {
  display: inline-flex; align-items: center; gap: 5px;
  background: #d1fae5;
  color: #065f46;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
}
.trust-strip {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start;
  margin-top: 8px;
}
.trust-strip__item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 56px; }
.trust-strip__name { font-size: 10px; color: var(--text-light); text-align: center; line-height: 1.2; max-width: 64px; }

/* PROPERTY CARD ============================================ */
.property-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 10px;
}
.property-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  overflow: hidden;
}
.property-card__icon {
  width: 40px; height: 40px;
  background: var(--primary-soft);
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 18px;
  margin-bottom: 8px;
}
.property-card__type {
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; line-height: 1.25;
  margin-bottom: 4px;
  min-height: 32px;
}
.property-card__size { font-size: 11.5px; color: var(--text-light); margin-bottom: 6px; }
.property-card__price {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; color: var(--primary);
}
.property-card__price--custom { color: var(--secondary); font-size: 12.5px; }
.property-card__chip {
  position: absolute; top: 8px; right: 8px;
  font-size: 9.5px; font-weight: 600;
  color: var(--success); background: #d1fae5;
  padding: 2px 6px; border-radius: 99px;
}
/* Locked cards show indicative price (no blur on price; size stays blurred) */
.property-card.locked .property-card__size {
  filter: blur(4px); user-select: none;
}
.property-card.locked .property-card__price {
  font-size: 12.5px; color: var(--text-light); font-weight: 600;
}
.property-card__band-tag {
  position: absolute; bottom: 8px; left: 8px;
  font-size: 9px; font-weight: 600;
  color: var(--text-light); background: var(--bg);
  padding: 2px 6px; border-radius: 99px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.property-card .lock-overlay {
  position: absolute; bottom: 8px; right: 8px;
  width: 26px; height: 26px;
  background: rgba(31, 23, 38, 0.65);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px;
}

/* CONTACT LOCK ============================================= */
.contact-card {
  background: linear-gradient(135deg, var(--primary-soft), #fff);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 18px;
  text-align: center;
  margin-bottom: 14px;
}
.contact-card--unlocked {
  background: #fff;
  border-color: var(--success);
  text-align: left;
}
.contact-lock-icon { font-size: 36px; margin-bottom: 8px; }
.contact-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.contact-card p { font-size: 12.5px; color: var(--text-light); margin-bottom: 12px; }
.unlock-meter {
  font-size: 11px; color: var(--text-light);
  padding: 4px 10px; background: #fff;
  border-radius: 99px; display: inline-block;
  margin-bottom: 12px;
}

.contact-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.contact-row:last-child { border-bottom: none; }
.contact-row__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--secondary-soft); display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }
.contact-row__body { flex: 1; }
.contact-row__lbl { font-size: 11px; color: var(--text-light); }
.contact-row__val { font-size: 14px; font-weight: 500; color: var(--text); }
.contact-row__cta {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--success); color: #fff;
  display: grid; place-items: center; font-size: 14px;
}

/* MODAL ==================================================== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(31, 23, 38, 0.55);
  z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn 200ms ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 540px) {
  .modal-backdrop { align-items: center; }
}
.modal {
  width: 100%; max-width: 430px;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 24px 20px 28px;
  position: relative;
  animation: slideUp 260ms cubic-bezier(.25,.8,.35,1);
  max-height: 88vh; overflow-y: auto;
}
@media (min-width: 540px) {
  .modal { border-radius: 24px; max-width: 400px; max-height: 80vh; }
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal__close {
  position: absolute; top: 10px; right: 10px;
  min-width: 44px; min-height: 44px;
  background: var(--bg);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px;
  z-index: 2;
}
.modal__body > h3:first-child,
.modal__body > h2:first-child { padding-right: 36px; }

/* TOAST ==================================================== */
.toast-container {
  position: fixed;
  bottom: calc(var(--bnav-h) + 20px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  width: calc(100vw - 32px);
  max-width: 400px;
}
@media (min-width: 540px) {
  .toast-container { bottom: 100px; width: auto; }
}
.toast {
  background: var(--text);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toastIn 220ms ease, toastOut 220ms ease 2.3s forwards;
  display: flex; align-items: center; gap: 8px;
}
.toast--success { background: var(--success); }
.toast--error { background: var(--danger); }
@keyframes toastIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toastOut { to { transform: translateY(20px); opacity: 0; } }

/* SUCCESS SCREEN =========================================== */
.success-screen {
  text-align: center;
  padding: 20px;
  max-width: 360px;
}
.success-screen h2 { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 16px 0 8px; }
.success-screen p { font-size: 14px; color: var(--text-light); margin-bottom: 8px; }
.success-check { width: 80px; height: 80px; margin: 0 auto; }
.success-check svg { width: 100%; height: 100%; }
.check-circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: drawCircle 600ms ease forwards; }
.check-tick { stroke-dasharray: 50; stroke-dashoffset: 50; animation: drawTick 400ms ease 500ms forwards; }
@keyframes drawCircle { to { stroke-dashoffset: 0; } }
@keyframes drawTick { to { stroke-dashoffset: 0; } }
.lock-emoji { font-size: 56px; margin-bottom: 12px; }

/* BOTTOM NAV =============================================== */
.bottom-nav {
  height: var(--bnav-h);
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(5, 1fr);
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav--3col { grid-template-columns: repeat(3, 1fr); }
.bottom-nav--4col { grid-template-columns: repeat(4, 1fr); }

/* Tappable availability chip on inventory list */
.avail-toggle {
  border: none;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease;
}
.avail-toggle:active { transform: scale(0.94); }
.bnav-item {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  font-size: 10.5px;
  color: var(--text-light);
  position: relative;
  font-family: var(--font-display); font-weight: 500;
}
.bnav-icon { font-size: 20px; filter: grayscale(0.4); opacity: 0.7; }
.bnav-item.active { color: var(--primary); }
.bnav-item.active .bnav-icon { filter: none; opacity: 1; }
.bnav-item.active::before {
  content: ""; position: absolute; top: 6px;
  width: 5px; height: 5px;
  background: var(--primary); border-radius: 50%;
}
.bnav-item[data-badge]::after {
  content: attr(data-badge);
  position: absolute;
  top: 8px; right: 50%;
  transform: translateX(18px);
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 99px; padding: 0 5px;
  display: grid; place-items: center;
}

/* PLAN CARDS =============================================== */
.plan-card {
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 12px;
  position: relative;
  cursor: pointer;
  transition: border-color 150ms ease, transform 120ms ease;
}
.plan-card.selected { border-color: var(--primary); background: linear-gradient(180deg, var(--primary-soft), #fff); }
.plan-card.popular { border-color: var(--secondary); }
.plan-card__badge {
  position: absolute; top: -10px; right: 14px;
  background: var(--gradient-purple);
  color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.1em;
  padding: 4px 10px; border-radius: 99px;
}
.plan-card__badge--gold { background: linear-gradient(135deg, var(--gold), #ffb703); }
.plan-card__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.plan-card__name { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.plan-card__price { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--primary); }
.plan-card__price small { font-size: 12px; font-weight: 500; color: var(--text-light); }
.plan-card__sub { font-size: 13px; color: var(--text-light); }
.plan-card__features { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 6px; }
.plan-card__features li { font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.plan-card__policy { margin-top: 10px; font-size: 11px; color: var(--text-light); line-height: 1.4; border-top: 1px dashed var(--border); padding-top: 8px; }

/* APPLIED FILTERS BAR ====================================== */
.applied-filters {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 10px;
  padding: 6px 0;
}
.applied-filters__label { font-size: 11px; color: var(--text-light); font-weight: 600; margin-right: 2px; }
.applied-filters__pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--secondary-soft); color: var(--secondary);
  font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 99px;
  cursor: pointer; user-select: none;
}
.applied-filters__pill:hover { background: var(--secondary); color: #fff; }
.applied-filters__x { opacity: 0.7; font-size: 10px; }
.applied-filters__clear {
  background: transparent; border: none;
  color: var(--primary); font-weight: 700; font-size: 11.5px;
  cursor: pointer; padding: 4px 6px;
  margin-left: auto;
}

/* UNLOCKS MATH (Sponsor profile) =========================== */
.unlocks-math { background: var(--bg); padding: 12px; margin: 8px 0; border-radius: 12px; box-shadow: none; border: 1px solid var(--border); }
.unlocks-math__head { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--primary); margin-bottom: 8px; }
.unlocks-math__row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; color: var(--text); }
.unlocks-math__row--minus { color: var(--text-light); }
.unlocks-math__row--total { font-weight: 700; border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 6px; color: var(--secondary); }

/* PROGRESS BAR ============================================= */
.progress {
  width: 100%; height: 8px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.progress__fill { height: 100%; background: var(--gradient-primary); border-radius: 99px; transition: width 300ms ease; }

/* DASHBOARD CARDS ========================================== */
.dash-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 14px;
}
/* When the tile count is odd, span the final orphan across both columns so it looks intentional */
.dash-grid > .dash-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dash-tile {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 12px;
  cursor: pointer;
  transition: transform 120ms ease;
}
.dash-tile:active { transform: scale(0.98); }
.dash-tile__icon {
  width: 40px; height: 40px;
  background: var(--primary-soft);
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 20px;
  margin-bottom: 8px;
}
.dash-tile--purple .dash-tile__icon { background: var(--secondary-soft); }
.dash-tile--gold .dash-tile__icon { background: var(--gold-soft); }
.dash-tile--purple-soft .dash-tile__icon { background: var(--secondary-soft); color: var(--secondary); }
.dash-tile__title { font-family: var(--font-display); font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.dash-tile__sub { font-size: 11.5px; color: var(--text-light); }

/* MINI BAR CHART =========================================== */
.bar-chart {
  display: flex; align-items: flex-end; gap: 6px;
  height: 100px;
  margin: 12px 0;
}
.bar-chart__bar {
  flex: 1;
  background: var(--gradient-primary);
  border-radius: 6px 6px 0 0;
  position: relative;
  min-height: 4px;
}
.bar-chart__bar span {
  position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
  font-size: 9.5px; color: var(--text-light);
}

/* SHOP ===================================================== */
.shop-banner {
  background: var(--gradient-festive);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.shop-banner h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.2; margin-bottom: 4px; }
.shop-banner p { font-size: 12.5px; opacity: 0.92; }
.shop-banner__emoji { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 48px; opacity: 0.5; }

.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.cat-tile {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 6px;
  text-align: center;
  cursor: pointer;
}
.cat-tile__icon { font-size: 24px; margin-bottom: 4px; }
.cat-tile__label { font-size: 10.5px; font-weight: 500; line-height: 1.2; }

.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.product-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
}
.product-card__img {
  height: 130px;
  display: grid; place-items: center;
  font-size: 48px;
  position: relative;
}
.product-card__discount {
  position: absolute; top: 8px; left: 8px;
  background: var(--danger); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; padding: 3px 7px; border-radius: 99px;
}
.product-card__body { padding: 10px; }
.product-card__name { font-size: 12.5px; font-weight: 600; line-height: 1.25; min-height: 32px; margin-bottom: 4px; }
.product-card__price { display: flex; align-items: baseline; gap: 6px; }
.product-card__price .now { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--primary); }
.product-card__price .was { font-size: 11px; color: var(--text-light); text-decoration: line-through; }

.product-hero {
  height: 240px;
  display: grid; place-items: center;
  font-size: 96px;
  position: relative;
}
.product-detail-body { padding: 20px; }
.price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.price-row .now { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--text); }
.price-row .was { font-size: 14px; color: var(--text-light); text-decoration: line-through; }
.price-row .off { background: var(--success); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; }

.opt-row { margin-bottom: 16px; }
.opt-row__lbl { font-family: var(--font-display); font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.chip-group { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  min-width: 44px; height: 38px; padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.chip.selected { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.swatch {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--border);
  cursor: pointer;
}
.swatch.selected { box-shadow: 0 0 0 2.5px var(--primary); }
.qty-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; }
.qty-stepper button { width: 36px; height: 38px; font-size: 18px; }
.qty-stepper button:active { background: var(--primary-soft); }
.qty-stepper span { width: 40px; text-align: center; font-weight: 600; }

/* CART ROW ================================================= */
.cart-row {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.cart-row__img {
  width: 60px; height: 60px;
  border-radius: var(--radius);
  display: grid; place-items: center;
  font-size: 28px;
  flex-shrink: 0;
}
.cart-row__body { flex: 1; min-width: 0; }
.cart-row__name { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; line-height: 1.25; }
.cart-row__meta { font-size: 11.5px; color: var(--text-light); margin-top: 2px; }
.cart-row__price { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--primary); margin-top: 4px; }
.cart-row__remove { color: var(--text-light); font-size: 18px; padding: 4px; }

.cart-summary {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-top: 16px;
}
.summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13.5px; }
.summary-row--total { font-family: var(--font-display); font-weight: 700; font-size: 16px; padding-top: 10px; border-top: 1px dashed var(--border); margin-top: 8px; }

/* EMPTY STATE ============================================== */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-light);
}
.empty-state__icon { font-size: 48px; margin-bottom: 8px; opacity: 0.6; }
.empty-state__title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text); margin-bottom: 4px; }
.empty-state__sub { font-size: 13px; }

/* SLIDER =================================================== */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  margin: 12px 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; background: var(--border); border-radius: 99px;
}
input[type="range"]::-moz-range-track {
  height: 6px; background: var(--border); border-radius: 99px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px;
  background: var(--gradient-primary);
  border-radius: 50%;
  margin-top: -8px;
  box-shadow: 0 2px 6px rgba(255, 106, 0, 0.4);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--primary);
  border-radius: 50%;
  border: none;
  box-shadow: 0 2px 6px rgba(255, 106, 0, 0.4);
}

/* MISC HELPERS ============================================= */
.flex-row { display: flex; align-items: center; gap: 8px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.text-light { color: var(--text-light); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-center { text-align: center; }
.fs-12 { font-size: 12px; } .fs-14 { font-size: 14px; }
.fw-600 { font-weight: 600; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.demo-note {
  background: var(--secondary-soft);
  color: var(--secondary);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px;
}

/* AVATAR COLORS (assigned via JS class) ==================== */
.avatar-c1 { background: linear-gradient(135deg, #ff6a00, #f5a623); }
.avatar-c2 { background: linear-gradient(135deg, #4b148c, #8b3fd1); }
.avatar-c3 { background: linear-gradient(135deg, #16a34a, #4ade80); }
.avatar-c4 { background: linear-gradient(135deg, #dc2626, #f87171); }
.avatar-c5 { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.avatar-c6 { background: linear-gradient(135deg, #db2777, #f472b6); }
.avatar-c7 { background: linear-gradient(135deg, #ca8a04, #facc15); }
.avatar-c8 { background: linear-gradient(135deg, #7c3aed, #a78bfa); }

/* PRODUCT COLOR BLOCKS ==================================== */
.prod-bg-tshirt { background: linear-gradient(135deg, #ff6a00, #ff8a3d); }
.prod-bg-id     { background: linear-gradient(135deg, #4b148c, #7c3aed); }
.prod-bg-banner { background: linear-gradient(135deg, #f5a623, #ffb703); }
.prod-bg-cap    { background: linear-gradient(135deg, #16a34a, #4ade80); }
.prod-bg-prasad { background: linear-gradient(135deg, #db2777, #f472b6); }
.prod-bg-led    { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.prod-bg-volunteer { background: linear-gradient(135deg, #ca8a04, #facc15); }
.prod-bg-default { background: linear-gradient(135deg, #7a6f85, #b9aebf); }

/* FOCUS RINGS ============================================== */
:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; border-radius: 4px; }
button:focus-visible { outline-offset: 3px; }

/* SCROLLBAR ================================================ */
.screen::-webkit-scrollbar { width: 0; }

/* ============================================================
   INVENTORY BUILDER — category grid, form, sponsor preview
============================================================ */

.inv-progress { display: block; }
.inv-progress__ring {
  width: 56px; height: 56px; border-radius: 50%;
  background: conic-gradient(var(--primary) 0%, var(--primary-soft) 0%);
  display: grid; place-items: center;
  position: relative;
}
.inv-progress__ring::before {
  content: ""; position: absolute;
  inset: 4px; background: #fff; border-radius: 50%;
}
.inv-progress__ring-val {
  position: relative;
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; color: var(--primary-dark);
}

.inv-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.inv-cat-card {
  position: relative;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  text-align: left;
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.inv-cat-card:active { transform: scale(0.985); }
.inv-cat-card__icon { font-size: 26px; line-height: 1; }
.inv-cat-card__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 13.5px; line-height: 1.25;
  color: var(--text);
}
.inv-cat-card__status {
  font-size: 11px; font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.inv-cat-card__status.is-added { color: var(--success); }
.inv-cat-card__summary {
  font-size: 11.5px; color: var(--text-light);
  margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 28px;
}
.inv-cat-card--added {
  border-color: var(--primary);
  background: linear-gradient(180deg, var(--primary-soft) 0%, #fff 80%);
}
.inv-cat-card__check {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px;
  background: var(--success); color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
}

/* Sticky bottom action bar (sits above bottom-nav when present) */
.inv-bottom-bar {
  position: sticky;
  bottom: 0;
  left: 0; right: 0;
  margin: 20px -20px -8px -20px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 248, 240, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: space-between;
  z-index: 5;
}
.inv-bottom-bar .btn { flex: 1; min-height: 40px; }

/* Inventory form header */
.inv-form-header {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, var(--primary-soft), #fff);
  margin: -20px -20px 16px -20px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.inv-form-header__back {
  width: 36px; height: 36px;
  background: #fff; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 700;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.inv-form-header__body { flex: 1; min-width: 0; }
.inv-form-header__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; line-height: 1.2;
}
.inv-form-header__sub {
  font-size: 12px; color: var(--text-light); line-height: 1.35;
  margin-top: 2px;
}

/* Quality score chip */
.quality-chip {
  font-family: var(--font-display); font-weight: 700;
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.quality-chip.q-good { background: #d1fae5; color: var(--success); }
.quality-chip.q-mid  { background: var(--gold-soft); color: #ca8a04; }
.quality-chip.q-low  { background: #fee2e2; color: var(--danger); }

/* Accordion section */
.acc-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.acc-section__head {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
}
.acc-section__head::-webkit-details-marker,
.acc-section__head::marker { display: none; content: ''; }
.acc-section__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 14.5px;
}
.acc-section__chev {
  font-size: 14px; color: var(--text-light);
  transition: transform 200ms ease;
}
.acc-section[open] .acc-section__chev { transform: rotate(180deg); }
.acc-section__body {
  padding: 0 16px 16px 16px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

/* Field error */
.field-error {
  font-size: 11.5px;
  color: var(--danger);
  font-weight: 600;
}

/* Multi-select / chip row inside forms */
.inv-chip-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.inv-chip {
  font-family: var(--font-body); font-weight: 500;
  font-size: 12.5px;
  padding: 8px 12px;
  border-radius: 99px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: all 120ms ease;
}
.inv-chip.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Dimension / size group */
.dim-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.dim-group--gate { grid-template-columns: 1fr; }
.dim-cell {
  display: flex; flex-direction: column; gap: 4px;
}
.dim-cell label {
  font-size: 11px; font-weight: 600; color: var(--text-light);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.dim-cell .input { height: 40px; font-size: 13.5px; }
.dim-row {
  display: grid;
  grid-template-columns: 90px 1fr 1fr;
  gap: 8px;
  align-items: end;
}
.dim-row__lbl {
  font-size: 12px; font-weight: 600; color: var(--text);
  padding-bottom: 12px;
}

/* Mock upload card variant */
.upload-grid {
  display: flex; flex-direction: column; gap: 8px;
}
.upload-card--mock { padding: 12px; cursor: pointer; }
.upload-card--filled {
  border-style: solid;
  border-color: var(--success);
  background: #ecfdf5;
}
.upload-card--filled .upload-card__icon { background: var(--success); color: #fff; }
.upload-card__remove {
  width: 28px; height: 28px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px;
  color: var(--danger);
  flex-shrink: 0;
}

/* Sponsor preview card */
.sponsor-preview-card {
  background: linear-gradient(180deg, #fff, var(--bg));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 8px;
}
.spc__top {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 10px;
}
.spc__icon {
  width: 40px; height: 40px;
  background: var(--primary-soft);
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.spc__name-block { flex: 1; min-width: 0; }
.spc__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; line-height: 1.25;
  color: var(--text);
}
.spc__cat { font-size: 11px; color: var(--text-light); margin-top: 2px; }
.spc__avail {
  font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 99px;
  background: #d1fae5; color: var(--success);
  white-space: nowrap;
  flex-shrink: 0;
}
.spc__avail--limited     { background: var(--gold-soft); color: #ca8a04; }
.spc__avail--sold-out    { background: #fee2e2; color: var(--danger); }
.spc__avail--on-request  { background: var(--secondary-soft); color: var(--secondary); }
.spc__row {
  font-size: 12.5px; color: var(--text);
  margin-bottom: 4px; line-height: 1.4;
}
.spc__row strong { font-weight: 600; color: var(--text-light); margin-right: 4px; }
.spc__price-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.spc__price {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; color: var(--primary);
}
.spc__chip {
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 99px;
  background: var(--secondary-soft); color: var(--secondary);
}
.spc__notes {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--gold-soft);
  border-radius: 8px;
  font-size: 12px; color: #92400e;
  line-height: 1.4;
}
.spc__quality { margin-top: 10px; }
.spc__cta {
  display: flex; gap: 6px;
  margin-top: 12px;
}
.spc__cta .btn { flex: 1; }

/* Inventory review groupings */
.spc-stack {
  display: flex; flex-direction: column; gap: 14px;
}
.spc-group {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow-sm);
}
.spc-group__head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.spc-group__icon { font-size: 18px; }
.spc-group__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px; flex: 1;
}
.spc-group__count {
  font-size: 11px; font-weight: 700;
  background: var(--primary-soft); color: var(--primary-dark);
  padding: 2px 8px; border-radius: 99px;
}
.spc-locked { position: relative; }
.spc-locked .sponsor-preview-card { position: relative; }
.spc-locked .spc__price,
.spc-locked .spc__cta { filter: blur(4px); user-select: none; pointer-events: none; }
.lock-overlay--inline {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  background: rgba(31, 23, 38, 0.7);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px;
  z-index: 2;
}

.inv-review-row {
  position: relative;
  margin-bottom: 8px;
}
.inv-review-row__actions {
  display: flex; gap: 4px;
  margin-top: -4px; margin-bottom: 8px;
  padding-left: 4px;
}

/* Committee/Sponsor view toggle */
.view-toggle {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 3px;
}
.view-toggle__btn {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11.5px;
  padding: 6px 12px;
  border-radius: 99px;
  color: var(--text-light);
  cursor: pointer;
}
.view-toggle__btn.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(255, 106, 0, 0.25);
}

/* ============================================================
   INVENTORY OVERVIEW (dashboard-side mandal-inventory page)
============================================================ */

.inv-section-h {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px;
  margin: 0;
  color: var(--text);
}

.inv-overview-hero {
  background: linear-gradient(135deg, var(--primary-soft) 0%, var(--gold-soft) 100%);
  border: 1px solid var(--primary-soft);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.inv-overview-hero__main { padding-right: 8px; border-right: 1px dashed rgba(255, 106, 0, 0.25); }
.inv-overview-hero__big {
  font-family: var(--font-display); font-weight: 800;
  font-size: 36px; line-height: 1;
  color: var(--primary-dark);
}
.inv-overview-hero__of {
  font-size: 18px; font-weight: 600;
  color: var(--text-light);
  margin-left: 4px;
}
.inv-overview-hero__lbl {
  font-size: 11.5px; font-weight: 600;
  color: var(--text); margin-top: 4px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.inv-overview-hero__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-content: center;
}
.inv-stat {
  display: flex; align-items: baseline; gap: 8px;
}
.inv-stat__val {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; line-height: 1;
  color: var(--text);
  min-width: 28px;
}
.inv-stat__lbl {
  font-size: 11.5px; font-weight: 600;
  color: var(--text-light);
}
.inv-stat--good .inv-stat__val { color: var(--success); }
.inv-stat--warn .inv-stat__val { color: var(--gold); }

/* Group of items under a category header */
.inv-group {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.inv-group__head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.inv-group__icon { font-size: 18px; }
.inv-group__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px; flex: 1; min-width: 0;
}
.inv-group__count {
  font-size: 11px; font-weight: 700;
  background: var(--primary-soft); color: var(--primary-dark);
  padding: 2px 8px; border-radius: 99px;
}

/* Compact item row */
.inv-item-row {
  display: flex; gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  align-items: stretch;
}
.inv-item-row:last-child { border-bottom: none; padding-bottom: 0; }
.inv-item-row__main {
  display: flex; gap: 10px; align-items: center;
  flex: 1; min-width: 0;
  background: transparent;
  text-align: left;
  padding: 0;
  cursor: pointer;
  transition: background 120ms ease;
  border-radius: 8px;
}
.inv-item-row__main:active { background: var(--primary-soft); }
.inv-item-row__icon {
  width: 36px; height: 36px;
  background: var(--primary-soft);
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
.inv-item-row__body { flex: 1; min-width: 0; }
.inv-item-row__top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 2px;
}
.inv-item-row__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 13.5px; line-height: 1.25;
  color: var(--text);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inv-item-row__cat {
  font-size: 10.5px; font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.inv-item-row__meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 11.5px; color: var(--text-light);
  margin-top: 4px;
}
.inv-item-row__foot {
  display: flex; gap: 6px; align-items: center;
  margin-top: 6px;
  flex-wrap: wrap;
}
.inv-item-row__price {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--primary);
}
.inv-item-row__chev {
  font-size: 22px; font-weight: 300;
  color: var(--text-light);
  align-self: center;
  flex-shrink: 0;
  padding: 0 4px;
}
.inv-item-row__actions {
  display: flex; flex-direction: column; gap: 2px;
  flex-shrink: 0;
}
.inv-item-row__actions .btn { padding: 4px 8px; min-height: 0; }

/* Item Detail screen */
.inv-detail-summary {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.inv-detail-summary__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.inv-detail-summary__row:last-child { border-bottom: none; }
.inv-detail-summary__lbl {
  font-size: 12px; font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.inv-detail-summary__val {
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.inv-detail-summary__val--price { color: var(--primary); font-weight: 700; font-size: 16px; }

.inv-detail-field {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.inv-detail-field:last-child { border-bottom: none; }
.inv-detail-field__label {
  font-size: 11.5px; font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase; letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.inv-detail-field__value {
  font-size: 14px; color: var(--text);
  line-height: 1.4;
  word-break: break-word;
}
.inv-detail-field--empty .inv-detail-field__value {
  color: var(--text-light);
  font-style: italic;
}

/* Logout button (danger-tinted outline variant) */
.btn--logout {
  border-color: var(--danger);
  color: var(--danger);
}
.btn--logout:active { background: #fef2f2; }

/* ============================================================
   AUTH (Login / Sign Up / OTP / Role Confirm)
   Full-page screens, no top bar, no bottom nav.
============================================================ */
.screen--auth .screen__inner {
  padding: 28px 20px 32px;
  background: var(--bg);
  min-height: 100%;
}

.auth-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 18px;
}
.auth-hero .logo-mark {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary), #ff8a3d);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(255, 106, 0, 0.28);
  margin-bottom: 12px;
}
.auth-hero .logo-mark__om {
  font-size: 32px;
  color: #fff;
  font-family: var(--font-display);
  line-height: 1;
}
.auth-hero__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.auth-hero__sub {
  font-size: 13px;
  color: var(--text-light);
  margin-top: 4px;
  max-width: 320px;
  line-height: 1.5;
}

/* Segmented control */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--primary-soft);
  border-radius: 14px;
  padding: 4px;
  margin: 6px 0 16px;
  gap: 4px;
}
.auth-tab {
  appearance: none;
  border: 0;
  background: transparent;
  min-height: 44px;
  height: 44px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--primary-dark);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.auth-tab--active {
  background: #fff;
  color: var(--primary-dark);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Form card */
.auth-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 16px 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.auth-card .form-group { margin-bottom: 12px; }
.auth-card .form-group:last-of-type { margin-bottom: 14px; }
.auth-card__sub {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 14px;
  line-height: 1.5;
}
.auth-card__sub--center { text-align: center; }
.auth-card__sub--tight { margin-bottom: 8px; }
.auth-card__below {
  text-align: center;
  font-size: 13px;
  color: var(--text-light);
  margin-top: 12px;
}
.auth-card__below a,
.auth-card__below button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--primary-dark);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.auth-forgot {
  display: block;
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  margin-top: -4px;
  margin-bottom: 8px;
}

/* Inline error */
.auth-error {
  display: block;
  color: var(--danger);
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.3;
}
.auth-error[hidden] { display: none; }
.auth-error--center { text-align: center; margin-top: 8px; }

/* Role picker cards (sign-up + role-confirm) */
.auth-role-grid {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}
.auth-role-grid--gap-top { margin-top: 14px; }
.auth-role-card__chev {
  margin-left: auto;
  font-size: 22px;
  color: var(--text-light);
  line-height: 1;
  align-self: center;
}
.auth-role-card {
  appearance: none;
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.12s;
  width: 100%;
  font-family: inherit;
}
.auth-role-card:active { transform: scale(0.99); }
.auth-role-card__radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: #fff;
  flex-shrink: 0;
  margin-top: 4px;
  position: relative;
  transition: border-color 0.18s, background 0.18s;
}
.auth-role-card__radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--primary);
  transform: scale(0);
  transition: transform 0.18s ease;
}
.auth-role-card--selected .auth-role-card__radio {
  border-color: var(--primary);
}
.auth-role-card--selected .auth-role-card__radio::after {
  transform: scale(1);
}
.auth-role-card--purple.auth-role-card--selected .auth-role-card__radio {
  border-color: var(--secondary);
}
.auth-role-card--purple.auth-role-card--selected .auth-role-card__radio::after {
  background: var(--secondary);
}
.auth-role-card__emoji {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.auth-role-card__body { flex: 1; min-width: 0; }
.auth-role-card__body h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 2px;
  color: var(--text);
}
.auth-role-card__body p {
  font-size: 12px;
  color: var(--text-light);
  margin: 0;
  line-height: 1.4;
}
.auth-role-card--selected {
  border-color: var(--primary);
  background: linear-gradient(180deg, var(--primary-soft) 0%, #fff 80%);
}
.auth-role-card--purple.auth-role-card--selected {
  border-color: var(--secondary);
  background: linear-gradient(180deg, var(--secondary-soft) 0%, #fff 80%);
}

/* Trust/badges row */
.auth-trust {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-light);
  margin-top: 18px;
  line-height: 1.5;
}
.auth-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 12px;
}
.auth-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 5px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.auth-badge--purple {
  color: var(--secondary);
  background: var(--secondary-soft);
}

/* OTP screen */
.otp-mobile {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--text);
  margin: 6px 0 14px;
}
.otp-input {
  width: 100%;
  height: 64px;
  text-align: center;
  font-size: 26px;
  letter-spacing: 10px;
  font-weight: 600;
  font-family: var(--font-display);
  border: 1.5px solid var(--border-strong);
  border-radius: 14px;
  background: #fff;
  color: var(--text);
  padding: 0 10px;
}
.otp-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.12);
}
.otp-input.error {
  border-color: var(--danger);
}
.otp-demo {
  text-align: center;
  font-size: 12px;
  color: var(--text-light);
  margin-top: 10px;
}
.otp-demo strong {
  color: var(--primary-dark);
  font-weight: 600;
}
.otp-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.otp-link {
  background: none;
  border: 0;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 14px;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.otp-link:active { opacity: 0.7; }

/* ============================================================
   Utility classes (replacing inline style hot-spots)
============================================================ */
.modal__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 8px;
  padding-right: 40px;
}
.modal__cta { margin-top: 14px; }

.toast-container--alert { /* same positioning rules as .toast-container apply via base */ }