/* ============================================================
   BODI CONNECT — design system
   Premium, minimal, glassmorphic. Light surfaces, dark ink.
   One screen = one main purpose.
   ============================================================ */

/* ---------------------------------------------------- tokens */
:root {
  /* brand — cardamom green + gold */
  --brand-50:  #eefaf5;
  --brand-100: #d3f1e6;
  --brand-200: #a8e3cf;
  --brand-300: #6ecfb2;
  --brand-400: #35b492;
  --brand-500: #159a7a;
  --brand-600: #0d7d63;
  --brand-700: #0b6350;
  --brand-800: #0a4e40;
  --brand-900: #073a30;

  --gold-300: #e8c883;
  --gold-400: #d9ac52;
  --gold-500: #c9902f;
  --gold-600: #a97522;

  --ink-900: #0d1721;
  --ink-800: #16242f;
  --ink-700: #24384a;
  --ink-600: #3d566d;
  --ink-500: #5b7186;
  --ink-400: #8496a7;
  --ink-300: #b3c1cd;
  --ink-200: #d8e0e8;
  --ink-100: #eaeff4;
  --ink-50:  #f5f8fa;

  --ok-500: #17915f;
  --ok-50:  #e7f6ee;
  --warn-500: #b4791a;
  --warn-50: #fdf3e0;
  --bad-500: #cf3b41;
  --bad-50:  #fdecec;
  --info-500: #2a6fd6;
  --info-50: #eaf2fe;

  --surface: #ffffff;
  --surface-2: #f7fafb;
  --page-bg: #f2f6f8;
  --line: #e4ebf1;
  --line-strong: #d2dde6;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(13, 23, 33, .05);
  --shadow-sm: 0 2px 8px rgba(13, 23, 33, .06);
  --shadow: 0 6px 22px rgba(13, 23, 33, .08);
  --shadow-lg: 0 18px 48px rgba(13, 23, 33, .12);
  --shadow-brand: 0 10px 28px rgba(13, 125, 99, .22);

  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Noto Sans", Roboto, Arial, sans-serif;
  --font-display: "Inter", "Segoe UI", system-ui, sans-serif;

  --header-h: 68px;
  --bottomnav-h: 66px;
  --sidebar-w: 264px;
  --container: 1220px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .14s var(--ease);
  --t: .22s var(--ease);
}

/* ---------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-800);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5 { margin: 0 0 .5em; font-family: var(--font-display); color: var(--ink-900); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--brand-600); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--brand-700); }
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--brand-100); color: var(--brand-900); }
.ic { flex: none; vertical-align: middle; }

/* ---------------------------------------------------- layout */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 18px; }
.container--narrow { max-width: 780px; }
.container--wide { max-width: 1420px; }
.section { padding: 56px 0; }
.section--tight { padding: 34px 0; }
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap, 16px); }
.row { display: flex; flex-wrap: wrap; gap: 16px; }
.row--between { justify-content: space-between; align-items: center; }
.row--center { align-items: center; }
.row--end { justify-content: flex-end; }
.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.grid--sidebar { grid-template-columns: 290px minmax(0, 1fr); align-items: start; }
.grid--content { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
.spacer { flex: 1 1 auto; }

/* ---------------------------------------------------- typography helpers */
.eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--brand-600); margin-bottom: 10px; }
.lede { font-size: 1.05rem; color: var(--ink-600); }
.muted { color: var(--ink-500); }
.small { font-size: .84rem; }
.tiny { font-size: .76rem; }
.strong { font-weight: 650; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.gradient-text {
  background: linear-gradient(115deg, var(--brand-700), var(--brand-500) 45%, var(--gold-500));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------------------------------------------------- surfaces */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.card--pad { padding: 20px; }
.card--hover:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--brand-200); }
.card--flat { box-shadow: none; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.card__head h3, .card__head h2 { margin: 0; font-size: 1rem; }
.card__body { padding: 20px; }
.card__foot { padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }

.glass {
  background: linear-gradient(150deg, rgba(255,255,255,.9), rgba(255,255,255,.72));
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: var(--shadow);
}
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }

/* decorative background */
.aurora { position: relative; isolation: isolate; overflow: hidden; }
.aurora::before, .aurora::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .45; pointer-events: none;
}
.aurora::before { width: 460px; height: 460px; top: -180px; right: -120px; background: radial-gradient(circle, var(--brand-200), transparent 68%); }
.aurora::after { width: 380px; height: 380px; bottom: -170px; left: -110px; background: radial-gradient(circle, var(--gold-300), transparent 68%); }

/* ---------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--brand-600);
  --btn-fg: #fff;
  --btn-border: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; min-height: 44px;
  font-size: .92rem; font-weight: 600; line-height: 1;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-border); border-radius: var(--radius-pill);
  text-decoration: none; white-space: nowrap;
  transition: transform var(--t-fast), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }
.btn--primary { --btn-bg: linear-gradient(135deg, var(--brand-600), var(--brand-500)); box-shadow: var(--shadow-brand); }
.btn--primary:hover { box-shadow: 0 14px 32px rgba(13,125,99,.3); }
.btn--gold { --btn-bg: linear-gradient(135deg, var(--gold-600), var(--gold-400)); }
.btn--dark { --btn-bg: var(--ink-900); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink-700); --btn-border: var(--line-strong); }
.btn--ghost:hover { --btn-fg: var(--brand-700); --btn-border: var(--brand-300); background: var(--brand-50); }
.btn--soft { --btn-bg: var(--brand-50); --btn-fg: var(--brand-700); --btn-border: var(--brand-100); }
.btn--soft:hover { --btn-bg: var(--brand-100); }
.btn--danger { --btn-bg: var(--bad-500); }
.btn--quiet { --btn-bg: transparent; --btn-fg: var(--ink-600); --btn-border: transparent; box-shadow: none; }
.btn--quiet:hover { --btn-fg: var(--brand-700); background: var(--ink-50); box-shadow: none; }
.btn--sm { padding: 7px 13px; min-height: 36px; font-size: .82rem; }
.btn--lg { padding: 15px 26px; min-height: 52px; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: 0; width: 42px; height: 42px; min-height: 42px; border-radius: 50%; }
.btn--icon.btn--sm { width: 34px; height: 34px; min-height: 34px; }
.btn-group { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------- badges & chips */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: .74rem; font-weight: 650; letter-spacing: .01em; white-space: nowrap;
  background: var(--ink-100); color: var(--ink-600);
}
.badge--ok { background: var(--ok-50); color: var(--ok-500); }
.badge--warn { background: var(--warn-50); color: var(--warn-500); }
.badge--bad { background: var(--bad-50); color: var(--bad-500); }
.badge--info { background: var(--info-50); color: var(--info-500); }
.badge--muted { background: var(--ink-100); color: var(--ink-500); }
.badge--brand { background: var(--brand-50); color: var(--brand-700); }
.badge--gold { background: linear-gradient(135deg, #fbf1dc, #f6e6c4); color: var(--gold-600); }
.badge--verified { background: var(--ok-50); color: var(--ok-500); }
.badge--lg { padding: 6px 14px; font-size: .82rem; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line-strong);
  font-size: .84rem; font-weight: 550; color: var(--ink-600);
  transition: all var(--t-fast); text-decoration: none;
}
.chip:hover { border-color: var(--brand-300); color: var(--brand-700); background: var(--brand-50); }
.chip.is-active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.chip.is-active:hover { background: var(--brand-700); color: #fff; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chip-scroll::-webkit-scrollbar { display: none; }
.chip-scroll > * { flex: none; }

/* ---------------------------------------------------- forms */
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.label { display: block; margin-bottom: 7px; font-size: .85rem; font-weight: 600; color: var(--ink-700); }
.label .req { color: var(--bad-500); margin-left: 2px; }
.hint { margin-top: 6px; font-size: .78rem; color: var(--ink-500); }
.input, .select, .textarea {
  width: 100%; padding: 12px 14px; min-height: 46px;
  background: var(--surface); color: var(--ink-800);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  font-size: .95rem;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-300); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(21,154,122,.14);
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b7186' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--bad-500); background: var(--bad-50); }
.field-error { margin: 6px 0 0; font-size: .78rem; color: var(--bad-500); font-weight: 550; }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .input-addon {
  display: flex; align-items: center; padding: 0 14px;
  background: var(--ink-50); border: 1px solid var(--line-strong); border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm); color: var(--ink-600); font-size: .9rem; font-weight: 600;
}
.input-group .input-addon + .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: 0; }
.input-icon { position: relative; }
.input-icon .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-400); pointer-events: none; }
.input-icon .input { padding-left: 42px; }

.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 4px 0; }
.check input[type="checkbox"], .check input[type="radio"] { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--brand-600); flex: none; cursor: pointer; }
.check span { font-size: .9rem; color: var(--ink-700); }

/* selectable card option (used in registration and filters) */
.option-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; transition: all var(--t-fast); text-align: left; width: 100%;
}
.option-card:hover { border-color: var(--brand-300); background: var(--brand-50); }
.option-card input { position: absolute; opacity: 0; pointer-events: none; }
.option-card.is-selected, .option-card:has(input:checked) {
  border-color: var(--brand-500); background: var(--brand-50); box-shadow: 0 0 0 3px rgba(21,154,122,.12);
}
.option-card__icon {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: 12px; background: var(--brand-50); color: var(--brand-600);
}
.option-card.is-selected .option-card__icon, .option-card:has(input:checked) .option-card__icon { background: var(--brand-600); color: #fff; }
.option-card__title { font-weight: 600; font-size: .93rem; color: var(--ink-800); }
.option-card__sub { font-size: .78rem; color: var(--ink-500); }

.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track { width: 46px; height: 26px; border-radius: 999px; background: var(--ink-200); transition: background var(--t); flex: none; }
.switch__track::after { content: ""; display: block; width: 20px; height: 20px; margin: 3px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs); transition: transform var(--t); }
.switch input:checked + .switch__track { background: var(--brand-500); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }

/* file / image upload */
.upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 26px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink-500); cursor: pointer; text-align: center;
  transition: all var(--t-fast);
}
.upload:hover { border-color: var(--brand-400); background: var(--brand-50); color: var(--brand-700); }
.upload input[type="file"] { display: none; }
.upload__preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 12px; }
.upload__preview img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }

/* ---------------------------------------------------- avatars & media */
.avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--brand-50); border: 1px solid var(--line);
}
.avatar--sm { width: 34px; height: 34px; }
.avatar--lg { width: 64px; height: 64px; }
.avatar--xl { width: 96px; height: 96px; border-width: 3px; border-color: #fff; box-shadow: var(--shadow); }
.avatar-initials {
  display: grid; place-items: center; font-weight: 700; color: var(--brand-700);
  background: linear-gradient(140deg, var(--brand-100), var(--brand-50));
  font-size: .9rem; letter-spacing: .02em;
}
.avatar-stack { display: flex; }
.avatar-stack .avatar { margin-left: -12px; border: 2px solid #fff; }
.avatar-stack .avatar:first-child { margin-left: 0; }

.logo-tile {
  width: 56px; height: 56px; flex: none; border-radius: 14px; object-fit: cover;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-xs);
}
.thumb { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--ink-100); }
.thumb--square { aspect-ratio: 1; }
.cover-img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; background: linear-gradient(120deg, var(--brand-100), var(--brand-50)); }

/* ---------------------------------------------------- listing cards */
.listing {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.listing:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--brand-200); }
.listing__media { position: relative; }
.listing__media .badge { position: absolute; top: 10px; left: 10px; box-shadow: var(--shadow-xs); }
.listing__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.listing__title { font-size: 1rem; font-weight: 660; color: var(--ink-900); margin: 0; }
.listing__title a { color: inherit; }
.listing__title a:hover { color: var(--brand-600); }
.listing__meta { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ink-500); flex-wrap: wrap; }
.listing__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-300); }
.listing__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.listing__price { font-weight: 700; color: var(--brand-700); font-size: 1.02rem; }

/* horizontal media object row */
.media-row { display: flex; gap: 14px; align-items: flex-start; }
.media-row__body { min-width: 0; flex: 1; }

/* ---------------------------------------------------- stats */
.stat {
  padding: 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); display: flex; gap: 14px; align-items: center;
}
.stat__icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--brand-50); color: var(--brand-600); }
.stat__value { font-size: 1.55rem; font-weight: 750; color: var(--ink-900); line-height: 1.1; letter-spacing: -.02em; }
.stat__label { font-size: .8rem; color: var(--ink-500); margin-top: 2px; }
.stat__delta { font-size: .75rem; font-weight: 650; }
.stat__delta--up { color: var(--ok-500); }
.stat__delta--down { color: var(--bad-500); }

/* ---------------------------------------------------- progress */
.progress { height: 8px; border-radius: 999px; background: var(--ink-100); overflow: hidden; }
.progress__bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-500), var(--brand-400)); transition: width .5s var(--ease); }
.progress--gold .progress__bar { background: linear-gradient(90deg, var(--gold-500), var(--gold-400)); }

.ring { --pct: 0; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--brand-500) calc(var(--pct) * 1%), var(--ink-100) 0); }
.ring__inner { width: 60px; height: 60px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-weight: 750; font-size: .92rem; color: var(--brand-700); }

/* ---------------------------------------------------- tables */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 560px; }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { background: var(--surface-2); font-weight: 650; color: var(--ink-600); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--brand-50); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ---------------------------------------------------- tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button {
  padding: 12px 16px; font-size: .89rem; font-weight: 600; color: var(--ink-500);
  border: 0; background: transparent; border-bottom: 2.5px solid transparent; white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tabs a:hover, .tabs button:hover { color: var(--brand-600); }
.tabs a.is-active, .tabs button.is-active { color: var(--brand-700); border-bottom-color: var(--brand-600); }

/* ---------------------------------------------------- alerts, flash, toasts */
.alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: .9rem; border: 1px solid; }
.alert--info { background: var(--info-50); border-color: #c9dcfb; color: #1c4f9c; }
.alert--ok { background: var(--ok-50); border-color: #bfe6d1; color: #0f6c46; }
.alert--warn { background: var(--warn-50); border-color: #f2ddb2; color: #8a5c12; }
.alert--bad { background: var(--bad-50); border-color: #f7ccce; color: #a52c31; }
.alert .ic { margin-top: 2px; }

.toast-host { position: fixed; z-index: 1200; right: 18px; bottom: calc(var(--bottomnav-h) + 18px); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
@media (min-width: 900px) { .toast-host { bottom: 18px; } }
.toast {
  display: flex; align-items: flex-start; gap: 10px; min-width: 250px; max-width: min(94vw, 400px);
  padding: 13px 16px; border-radius: var(--radius-sm); background: var(--ink-900); color: #fff;
  box-shadow: var(--shadow-lg); font-size: .89rem; pointer-events: auto;
  animation: toast-in .3s var(--ease);
}
.toast--ok { background: #0e6b47; }
.toast--bad { background: #a32c32; }
.toast--warn { background: #8a5c12; }
.toast.is-leaving { animation: toast-out .25s var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(.98); } }

/* ---------------------------------------------------- empty state */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 48px 24px; border-radius: var(--radius);
  background: var(--surface); border: 1px dashed var(--line-strong);
}
.empty__icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; background: var(--brand-50); color: var(--brand-500); }
.empty__title { font-size: 1.08rem; font-weight: 680; color: var(--ink-800); margin: 0; }
.empty__text { font-size: .9rem; color: var(--ink-500); max-width: 420px; margin: 0; }

/* ---------------------------------------------------- skeletons */
.skeleton { position: relative; overflow: hidden; background: var(--ink-100); border-radius: 8px; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skeleton--text { height: 12px; margin-bottom: 8px; }
.skeleton--title { height: 18px; width: 60%; margin-bottom: 12px; }
.skeleton--thumb { aspect-ratio: 16/10; border-radius: 0; }
.skeleton--avatar { width: 44px; height: 44px; border-radius: 50%; }
.is-loading { pointer-events: none; opacity: .6; }

.spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.35); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; }
.spinner--dark { border-color: var(--ink-200); border-top-color: var(--brand-600); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------- modal & bottom sheet */
.overlay {
  position: fixed; inset: 0; z-index: 1000; display: none;
  background: rgba(13,23,33,.5); backdrop-filter: blur(3px);
  align-items: center; justify-content: center; padding: 20px;
}
.overlay.is-open { display: flex; animation: fade-in .18s var(--ease); }
@keyframes fade-in { from { opacity: 0; } }
.modal {
  width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: modal-in .24s var(--ease);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.modal--wide { max-width: 760px; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.modal__head h3 { margin: 0; font-size: 1.05rem; }
.modal__body { padding: 22px; }
.modal__foot { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; background: var(--surface-2); }

.sheet { position: fixed; inset: 0; z-index: 1100; display: none; }
.sheet.is-open { display: block; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(13,23,33,.45); backdrop-filter: blur(2px); animation: fade-in .18s var(--ease); }
.sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(13,23,33,.2);
  animation: sheet-up .28s var(--ease);
}
@keyframes sheet-up { from { transform: translateY(100%); } }
.sheet__handle { width: 42px; height: 4px; border-radius: 999px; background: var(--ink-200); margin: 6px auto 14px; }
@media (min-width: 900px) {
  .sheet__panel { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(560px, 92vw); border-radius: var(--radius-lg); animation: modal-in .24s var(--ease); }
}

/* ---------------------------------------------------- pagination */
.pagination { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.pagination a, .pagination span {
  min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface);
  font-size: .87rem; font-weight: 600; color: var(--ink-600);
}
.pagination a:hover { border-color: var(--brand-300); color: var(--brand-700); background: var(--brand-50); }
.pagination .is-current { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.pagination .is-disabled { opacity: .4; pointer-events: none; }

/* ---------------------------------------------------- breadcrumb */
.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .8rem; color: var(--ink-500); margin-bottom: 14px; }
.crumbs a { color: var(--ink-500); }
.crumbs a:hover { color: var(--brand-600); }
.crumbs .ic { color: var(--ink-300); }

/* ---------------------------------------------------- header (public + member) */
.appbar {
  position: sticky; top: 0; z-index: 500; height: var(--header-h);
  background: rgba(255,255,255,.86); backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.appbar__inner { height: 100%; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand__mark {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
  color: #fff; font-weight: 800; font-size: .95rem; letter-spacing: -.02em;
  box-shadow: var(--shadow-brand);
}
.brand__name { display: block; font-weight: 750; font-size: 1.06rem; color: var(--ink-900); letter-spacing: -.02em; line-height: 1.1; }
.brand__tag { display: block; font-size: .66rem; color: var(--brand-600); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.mainnav { display: flex; align-items: center; gap: 2px; }
.mainnav a {
  padding: 9px 14px; border-radius: var(--radius-pill); font-size: .89rem; font-weight: 600; color: var(--ink-600);
  transition: all var(--t-fast);
}
.mainnav a:hover { background: var(--brand-50); color: var(--brand-700); }
.mainnav a.is-active { background: var(--brand-600); color: #fff; }

.icon-btn {
  position: relative; width: 42px; height: 42px; display: grid; place-items: center; flex: none;
  border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--ink-600);
  transition: all var(--t-fast);
}
.icon-btn:hover { background: var(--ink-50); color: var(--brand-700); }
.icon-btn__dot {
  position: absolute; top: 7px; right: 7px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--bad-500); color: #fff;
  font-size: .63rem; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff;
}

/* dropdown menu */
.menu { position: relative; }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 232px; z-index: 600;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 7px; display: none;
}
.menu.is-open .menu__panel { display: block; animation: modal-in .16s var(--ease); }
.menu__panel a, .menu__panel button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px;
  border: 0; background: transparent; border-radius: var(--radius-xs);
  font-size: .88rem; font-weight: 550; color: var(--ink-700); text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
}
.menu__panel a:hover, .menu__panel button:hover { background: var(--brand-50); color: var(--brand-700); }
.menu__panel hr { margin: 6px 0; }
.menu__head { padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }

/* ---------------------------------------------------- mobile bottom nav */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 700;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255,255,255,.94); backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border-top: 1px solid var(--line);
}
.bottomnav a, .bottomnav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: transparent; color: var(--ink-500); font-size: .66rem; font-weight: 600;
  text-decoration: none; transition: color var(--t-fast); position: relative;
}
.bottomnav a.is-active { color: var(--brand-600); }
.bottomnav a.is-active::before { content: ""; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 0 0 4px 4px; background: var(--brand-600); }
.bottomnav__create { justify-content: flex-start !important; padding-top: 6px; }
.bottomnav__create .fab {
  width: 50px; height: 50px; border-radius: 17px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500)); color: #fff;
  box-shadow: var(--shadow-brand); margin-top: -18px; border: 3px solid #fff;
  transition: transform var(--t);
}
.bottomnav__create:hover .fab { transform: translateY(-2px) scale(1.04); }
.bottomnav__create span { margin-top: 2px; }
@media (min-width: 900px) { .bottomnav { display: none; } }

@media (max-width: 899px) {
  .appbar__inner { gap: 8px; }
  .appbar .brand__tag { display: none; }
}
@media (max-width: 360px) {
  .appbar__join, .appbar .brand__name { display: none; }
}

/* ---------------------------------------------------- member shell */
.shell { display: block; }
@media (min-width: 900px) {
  .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); align-items: start; gap: 24px; }
}
.sidebar { display: none; }
@media (min-width: 900px) {
  .sidebar {
    display: block; position: sticky; top: calc(var(--header-h) + 20px);
    max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto; padding-right: 4px;
  }
}
.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav__group { margin-top: 18px; }
.sidenav__group:first-child { margin-top: 0; }
.sidenav__label { padding: 0 12px 6px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); }
.sidenav a {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: .88rem; font-weight: 570; color: var(--ink-600); transition: all var(--t-fast);
}
.sidenav a:hover { background: var(--surface); color: var(--brand-700); box-shadow: var(--shadow-xs); }
.sidenav a.is-active { background: var(--brand-600); color: #fff; box-shadow: var(--shadow-brand); }
.sidenav a .ic { flex: none; }
.sidenav__count { margin-left: auto; font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--ink-100); color: var(--ink-600); }
.sidenav a.is-active .sidenav__count { background: rgba(255,255,255,.24); color: #fff; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { margin: 0 0 4px; font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.page-head p { margin: 0; color: var(--ink-500); font-size: .92rem; }

/* ---------------------------------------------------- hero */
.hero { position: relative; padding: clamp(44px, 8vw, 92px) 0; }
.hero__title { font-size: clamp(2rem, 5.2vw, 3.4rem); line-height: 1.08; letter-spacing: -.032em; margin-bottom: 18px; }
.hero__sub { font-size: clamp(1rem, 1.7vw, 1.16rem); color: var(--ink-600); max-width: 620px; margin-bottom: 28px; }
.hero__search { max-width: 620px; }
.hero-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 34px; }
.hero-stats__item .n { font-size: 1.6rem; font-weight: 780; color: var(--ink-900); letter-spacing: -.02em; }
.hero-stats__item .l { font-size: .78rem; color: var(--ink-500); }

.searchbar {
  display: flex; align-items: center; gap: 8px; padding: 7px 7px 7px 18px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm); transition: box-shadow var(--t), border-color var(--t);
}
.searchbar:focus-within { border-color: var(--brand-400); box-shadow: 0 0 0 4px rgba(21,154,122,.12); }
.searchbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: .95rem; padding: 10px 0; }
.searchbar .ic { color: var(--ink-400); flex: none; }

/* ---------------------------------------------------- action cards (home) */
.action-card {
  display: flex; flex-direction: column; gap: 10px; padding: 20px;
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  transition: all var(--t); text-decoration: none; height: 100%;
}
.action-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-200); }
.action-card__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--brand-50); color: var(--brand-600); }
.action-card h3 { margin: 0; font-size: .98rem; color: var(--ink-900); }
.action-card p { margin: 0; font-size: .82rem; color: var(--ink-500); }
.action-card--gold .action-card__icon { background: #fbf1dc; color: var(--gold-600); }

/* category tile */
.cat-tile {
  display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 18px 12px;
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  text-align: center; transition: all var(--t); text-decoration: none;
}
.cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-200); }
.cat-tile__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(140deg, var(--brand-100), var(--brand-50)); color: var(--brand-600); }
.cat-tile__name { font-size: .84rem; font-weight: 620; color: var(--ink-800); line-height: 1.3; }
.cat-tile__count { font-size: .72rem; color: var(--ink-400); }

/* ---------------------------------------------------- profile / business header */
.profile-hero { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.profile-hero__cover { position: relative; }
.profile-hero__body { padding: 0 22px 22px; }
.profile-hero__top { display: flex; align-items: flex-end; gap: 16px; margin-top: -38px; flex-wrap: wrap; }
.profile-hero__logo { width: 92px; height: 92px; border-radius: 22px; border: 4px solid #fff; box-shadow: var(--shadow); object-fit: cover; background: #fff; flex: none; }
.profile-hero__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-hero__name h1 { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.profile-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.info-list { display: grid; gap: 12px; }
.info-list__item { display: flex; gap: 11px; align-items: flex-start; font-size: .89rem; }
.info-list__item .ic { color: var(--brand-600); margin-top: 2px; flex: none; }
.info-list__item .k { color: var(--ink-500); font-size: .78rem; display: block; }
.info-list__item .v { color: var(--ink-800); font-weight: 550; }

/* ---------------------------------------------------- timeline */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline__item { position: relative; padding-bottom: 20px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute; left: -24px; top: 5px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--surface); border: 2.5px solid var(--brand-400);
}
.timeline__item.is-done::before { background: var(--brand-500); border-color: var(--brand-500); }
.timeline__time { font-size: .75rem; color: var(--ink-400); }

/* ---------------------------------------------------- pipeline board (CRM) */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(252px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 12px; }
.board__col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 180px; }
.board__head { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: 0; background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; }
.board__head h4 { margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-600); }
.board__items { padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.board__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; box-shadow: var(--shadow-xs); transition: all var(--t-fast); }
.board__card:hover { box-shadow: var(--shadow-sm); border-color: var(--brand-200); }
.board__card h5 { margin: 0 0 4px; font-size: .89rem; }

/* ---------------------------------------------------- chat */
.chat { display: grid; grid-template-rows: 1fr auto; height: min(72vh, 640px); }
.chat__list { overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.bubble { max-width: 76%; padding: 10px 14px; border-radius: 16px; font-size: .9rem; line-height: 1.5; box-shadow: var(--shadow-xs); }
.bubble--in { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.bubble--out { align-self: flex-end; background: linear-gradient(135deg, var(--brand-600), var(--brand-500)); color: #fff; border-bottom-right-radius: 5px; }
.bubble--system { align-self: center; background: var(--ink-100); color: var(--ink-600); font-size: .78rem; padding: 5px 12px; border-radius: 999px; box-shadow: none; }
.bubble__time { display: block; margin-top: 4px; font-size: .68rem; opacity: .7; }
.chat__composer { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--line); background: var(--surface); }
.chat__composer textarea { flex: 1; min-height: 44px; max-height: 130px; resize: none; }
.thread-item { display: flex; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); transition: background var(--t-fast); }
.thread-item:hover { background: var(--brand-50); }
.thread-item.is-active { background: var(--brand-50); border-left: 3px solid var(--brand-500); }
.thread-item.is-unread .thread-item__name { font-weight: 750; }

/* ---------------------------------------------------- QR / certificate */
.qr-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px; text-align: center; }
.qr-card img, .qr-card svg { width: 190px; height: 190px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; padding: 8px; }
.id-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--ink-900), var(--ink-700)); color: #fff;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; font-weight: 600; letter-spacing: .06em;
}

/* ---------------------------------------------------- filter bar */
.filterbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.filterbar .select, .filterbar .input { min-height: 42px; width: auto; min-width: 150px; flex: 1 1 150px; }
.filter-drawer { display: none; }
@media (min-width: 900px) { .filter-drawer { display: block; } .filter-toggle { display: none !important; } }

/* ---------------------------------------------------- footer */
.footer { background: var(--ink-900); color: var(--ink-300); padding: 54px 0 26px; margin-top: 64px; }
.footer h4 { color: #fff; font-size: .84rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.footer a { color: var(--ink-300); font-size: .87rem; display: block; padding: 4px 0; }
.footer a:hover { color: var(--brand-300); }
.footer__bottom { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; }
.footer .brand__name { color: #fff; }
.footer .brand__tag { color: var(--brand-300); }
.social-row { display: flex; gap: 10px; }
.social-row a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; padding: 0; }
.social-row a:hover { background: var(--brand-600); color: #fff; }

/* ---------------------------------------------------- misc utilities */
.hide { display: none !important; }
@media (max-width: 899px) { .hide-mobile { display: none !important; } }
@media (min-width: 900px) { .hide-desktop { display: none !important; } }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; }
.w-full { width: 100%; }
.flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.rounded { border-radius: var(--radius); }
.text-brand { color: var(--brand-600); }
.text-gold { color: var(--gold-600); }
.text-ok { color: var(--ok-500); }
.text-bad { color: var(--bad-500); }
.bg-soft { background: var(--surface-2); }
.divider { height: 1px; background: var(--line); margin: 18px 0; }
.scroll-x { overflow-x: auto; scrollbar-width: thin; }

/* main content spacing so the bottom nav never covers anything */
.app-main { min-height: 60vh; padding-bottom: calc(var(--bottomnav-h) + 28px); }
@media (min-width: 900px) { .app-main { padding-bottom: 44px; } }

/* prose (CMS pages) */
.prose { max-width: 76ch; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.6em; font-size: 1.08rem; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li { margin-bottom: .45em; }
.prose strong { color: var(--ink-900); font-weight: 650; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }

/* print — certificates, invoices, business cards */
@media print {
  .appbar, .bottomnav, .footer, .sidebar, .admin-topbar, .admin-sidebar, .no-print { display: none !important; }
  body { background: #fff; }
  .card, .panel { box-shadow: none; border-color: #ccc; }
  .app-main { padding-bottom: 0; }
}

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

/* ---------------------------------------------------- admin console */
.admin-body { background: #f4f7f6; color: var(--ink-800); }
.admin-topbar { position: sticky; top: 0; z-index: 50; height: 66px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.admin-topbar__inner { height: 100%; display: flex; align-items: center; gap: 12px; }
.admin-shell { min-height: calc(100vh - 66px); }
.admin-sidebar { background: #102e29; color: #fff; }
.admin-content { min-width: 0; padding: clamp(18px,3vw,38px); }
.admin-nav { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; scrollbar-width: thin; }
.admin-nav__group { display: contents; }
.admin-nav__label { display: none; }
.admin-nav a { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; color: #c2d6d2; font-size: .82rem; white-space: nowrap; }
.admin-nav a:hover,.admin-nav a.is-active { color: #fff; background: rgba(255,255,255,.12); }
.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(168px,1fr)); gap: 12px; }
.admin-stat { display: flex; align-items: center; gap: 13px; min-height: 92px; }
.admin-stat strong { display: block; font-size: 1.35rem; color: var(--ink-900); }
.admin-stat span { display: block; color: var(--ink-500); font-size: .78rem; }
.admin-stat--gold { background: linear-gradient(135deg,#fffaf0,#fff); border-color: #ead5a7; }
.mini-bars { height: 180px; display: flex; align-items: end; gap: 4px; padding-top: 20px; }
.mini-bars span { flex: 1; min-width: 3px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg,var(--brand-400),var(--brand-600)); }
.admin-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink-800); }
.admin-list-row:last-child { border-bottom: 0; }
.admin-list-row strong,.admin-list-row small,.data-table small { display: block; }
.admin-list-row small,.data-table small { margin-top: 2px; color: var(--ink-400); font-size: .72rem; }
.admin-filters { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.admin-filters .field { flex: 1 1 210px; margin: 0; }
.table-card { overflow: hidden; }
.table-scroll { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.data-table th { color: var(--ink-500); font-size: .69rem; letter-spacing: .055em; text-transform: uppercase; text-align: left; background: var(--surface-2); }
.data-table th,.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.data-table td { color: var(--ink-700); }
.data-table tbody tr:hover { background: var(--brand-50); }
.data-table a strong { color: var(--ink-900); }
.table-actions { display: flex; align-items: center; gap: 5px; }
.admin-bulk { display: flex; gap: 8px; align-items: center; padding: 12px 14px; background: var(--surface-2); }
.admin-bulk select,.select--compact,.input--tiny { width: auto; min-height: 34px; padding: 6px 9px; font-size: .78rem; }
.input--tiny { width: 64px !important; }
.status { display: inline-flex; align-items: center; justify-content: center; padding: 3px 8px; border-radius: 999px; background: var(--ink-100); color: var(--ink-600); font-size: .68rem; font-weight: 700; text-transform: capitalize; white-space: nowrap; }
.status--active,.status--approved,.status--paid,.status--published,.status--resolved,.status--completed { background: #ddf5ec; color: #087451; }
.status--pending,.status--created,.status--requested,.status--under_review,.status--waiting_user,.status--normal { background: #fff0cf; color: #8a5b00; }
.status--rejected,.status--blocked,.status--failed,.status--cancelled,.status--removed,.status--urgent { background: #ffe2e2; color: #a42424; }
.status--suspended,.status--inactive,.status--closed,.status--expired,.status--refunded,.status--high { background: #eee8f8; color: #67458f; }
.admin-form { max-width: 1040px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.form-grid .field { margin: 0; }
.field--wide { grid-column: 1/-1; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); }
.switch-row { display: flex; gap: 9px; align-items: center; font-size: .84rem; color: var(--ink-700); }
.switch-row input { width: 18px; height: 18px; accent-color: var(--brand-600); }
.switch-row small { display: block; color: var(--ink-400); }
.admin-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(270px,340px); gap: 20px; align-items: start; }
.detail-list { display: grid; grid-template-columns: minmax(100px,170px) 1fr; gap: 9px 16px; font-size: .86rem; }
.detail-list dt { color: var(--ink-500); }
.detail-list dd { margin: 0; color: var(--ink-900); }
.note { padding: 10px; border-radius: 9px; background: #fff9e8; border: 1px solid #f0dfb8; font-size: .78rem; }
.note p { margin: 4px 0 0; }
.timeline-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.timeline-row > span:first-child { width: 9px; height: 9px; margin-top: 5px; flex: none; border-radius: 50%; background: var(--brand-500); }
.timeline-row h3,.timeline-row p { margin: 2px 0; }
.support-message { padding: 15px 0; border-bottom: 1px solid var(--line); }
.support-message strong,.support-message small { display: block; }
.support-message small { color: var(--ink-400); font-size: .72rem; }
.support-message--staff { margin: 12px 0 12px 8%; padding: 14px; background: var(--brand-50); border-radius: 12px; border: 1px solid var(--brand-100); }
.support-message--internal { margin: 12px 0; padding: 14px; background: #fff8e4; border: 1px dashed #dbbd74; border-radius: 12px; }
.invoice-sheet { max-width: 860px; margin: auto; }
.invoice-head { display: flex; justify-content: space-between; gap: 24px; }
.brand-text { color: var(--brand-700); font-size: 1.25rem; letter-spacing: .08em; }
.text-right { text-align: right; }
.invoice-totals { margin: 28px 0 0 auto; width: min(100%,330px); }
.invoice-totals p { display: flex; justify-content: space-between; }
.invoice-totals .total { padding-top: 12px; border-top: 2px solid var(--ink-800); font-size: 1.1rem; }
.permission-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 14px; }
.permission-grid fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.permission-grid legend { padding: 0 6px; color: var(--ink-700); font-weight: 700; }
.permission-grid .switch-row { align-items: flex-start; padding: 7px 0; }
.settings-layout { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 18px; align-items: start; }
.settings-nav { position: sticky; top: 86px; display: flex; flex-direction: column; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.settings-nav a { padding: 9px 10px; border-radius: 8px; color: var(--ink-600); font-size: .82rem; }
.settings-nav a:hover { background: var(--brand-50); color: var(--brand-700); }
.sticky-actions { position: sticky; bottom: 12px; z-index: 10; display: flex; justify-content: flex-end; margin-top: 18px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.code-area { font: .8rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }
.progress--compact { width: 78px; height: 5px; }

@media (min-width: 1050px) {
  .admin-shell { display: grid; grid-template-columns: 244px minmax(0,1fr); }
  .admin-sidebar { position: sticky; top: 66px; height: calc(100vh - 66px); overflow-y: auto; }
  .admin-nav { display: block; padding: 18px 12px; }
  .admin-nav__group { display: block; margin-bottom: 19px; }
  .admin-nav__label { display: block; padding: 0 11px 6px; color: #75958f; font-size: .62rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
  .admin-nav a { margin: 2px 0; }
}
@media (max-width: 800px) {
  .admin-topbar__inner { gap: 6px; padding-inline: 12px; }
  .admin-topbar .brand__tag { display: none; }
  .admin-portal-link { width: 42px; padding: 0; }
  .admin-portal-link span { display: none; }
  .admin-content { padding: 18px 14px; }
  .admin-detail-grid,.settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; flex-direction: row; overflow-x: auto; }
  .form-grid { grid-template-columns: 1fr; }
  .field--wide { grid-column: auto; }
  .admin-filters .btn { flex: 1; }
  .invoice-head { flex-direction: column; }
  .text-right { text-align: left; }
}

/* ---------------------------------------------------- responsive grids */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--content, .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
  .section { padding: 38px 0; }
  .card--pad, .card__body { padding: 16px; }
  .page-head { margin-bottom: 16px; }
}
@media (max-width: 420px) {
  .grid--auto-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn { padding: 10px 15px; }
}

/* ============================================================
   EXPERIENCE REFRESH — app-first mobile + premium desktop web
   ============================================================ */
:root {
  --font-display: "Manrope", "Inter", "Segoe UI", system-ui, sans-serif;
  --page-bg: #f4f7f7;
  --surface-2: #f7faf9;
  --line: #e2eae7;
  --line-strong: #cfdbd7;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --shadow-xs: 0 1px 2px rgba(5, 34, 28, .04);
  --shadow-sm: 0 5px 16px rgba(5, 34, 28, .06);
  --shadow: 0 14px 34px rgba(5, 34, 28, .09);
  --shadow-lg: 0 24px 70px rgba(5, 34, 28, .15);
  --shadow-brand: 0 12px 30px rgba(13, 125, 99, .24);
}

body { background-color: var(--page-bg); }
h1, h2, h3, h4, h5 { font-family: var(--font-display); }
.btn { min-height: 42px; font-weight: 700; letter-spacing: -.01em; }
.btn--primary { border-color: transparent; }
.card, .listing, .panel { border-color: rgba(207, 219, 215, .8); }
.card, .listing { box-shadow: 0 1px 0 rgba(255,255,255,.8), var(--shadow-xs); }
.eyebrow { color: var(--brand-600); font-weight: 800; letter-spacing: .14em; }

/* top navigation */
.appbar { height: 72px; border-color: rgba(207,219,215,.75); background: rgba(255,255,255,.9); }
.appbar__inner { gap: 14px; }
.appbar__actions { display: flex; align-items: center; gap: 5px; }
.brand__mark { width: 40px; height: 40px; border-radius: 13px; box-shadow: 0 9px 22px rgba(13,125,99,.22); }
.brand__name { font-family: var(--font-display); font-weight: 800; }
.mainnav { padding: 4px; border-radius: 999px; background: rgba(244,247,247,.8); }
.mainnav a { padding: 8px 13px; }
.mainnav a.is-active { box-shadow: 0 7px 18px rgba(13,125,99,.18); }
.icon-btn { transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast); }
.icon-btn:hover { transform: translateY(-1px); }

/* public marketing home */
.marketing-home { overflow: clip; }
.marketing-home .hero {
  padding: clamp(56px, 7.5vw, 104px) 0 clamp(48px, 7vw, 88px);
  background:
    radial-gradient(circle at 82% 12%, rgba(168,227,207,.52), transparent 27%),
    radial-gradient(circle at 10% 90%, rgba(232,200,131,.2), transparent 26%),
    linear-gradient(145deg,#f7fbfa 0%,#edf6f3 54%,#f7f8f4 100%);
}
.public-hero__grid { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(390px,.92fr); gap: clamp(38px,6vw,82px); align-items: center; }
.public-hero__copy { min-width: 0; }
.marketing-home .hero__title { max-width: 720px; font-size: clamp(2.65rem,5.5vw,4.55rem); line-height: 1.01; letter-spacing: -.055em; }
.marketing-home .hero__sub { max-width: 650px; line-height: 1.75; }
.marketing-home .hero__search { max-width: 680px; padding: 8px 8px 8px 20px; background: rgba(255,255,255,.92); box-shadow: 0 16px 40px rgba(11,99,80,.11); }
.marketing-home .hero-stats { gap: 0; margin-top: 42px; padding-top: 24px; border-top: 1px solid rgba(13,125,99,.12); }
.marketing-home .hero-stats__item { padding: 0 25px; border-right: 1px solid rgba(13,125,99,.12); }
.marketing-home .hero-stats__item:first-child { padding-left: 0; }
.marketing-home .hero-stats__item:last-child { border-right: 0; }
.marketing-home .hero-stats__item .n { font-family: var(--font-display); font-size: 1.45rem; }

.network-preview {
  position: relative; isolation: isolate; min-height: 486px; padding: 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  border: 1px solid rgba(255,255,255,.82); border-radius: 34px;
  background: linear-gradient(145deg,rgba(255,255,255,.88),rgba(244,250,248,.66));
  box-shadow: 0 35px 85px rgba(7,58,48,.16); backdrop-filter: blur(18px);
}
.network-preview::before { content:""; position:absolute; inset:12px; z-index:-1; border:1px solid rgba(13,125,99,.08); border-radius:26px; }
.network-preview__glow { position:absolute; z-index:-2; width:250px; height:250px; right:-65px; top:-65px; border-radius:50%; background:radial-gradient(circle,rgba(53,180,146,.28),transparent 68%); }
.network-preview__top,.network-preview__foot,.network-preview__path { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.network-preview__top { padding:0 4px 6px; color:var(--ink-500); font-size:.76rem; }
.network-preview__top span { display:flex; align-items:center; gap:7px; font-weight:700; color:var(--brand-700); }
.network-preview__top i { width:8px; height:8px; border-radius:50%; background:var(--brand-400); box-shadow:0 0 0 5px rgba(53,180,146,.13); }
.network-preview__top strong { color:var(--ink-800); }
.network-preview__business,.network-preview__opportunity {
  display:flex; align-items:center; gap:13px; padding:16px; color:inherit;
  border:1px solid rgba(207,219,215,.78); border-radius:20px; background:rgba(255,255,255,.9); box-shadow:var(--shadow-sm);
  transition:transform var(--t),box-shadow var(--t);
}
.network-preview__business:hover,.network-preview__opportunity:hover { transform:translateY(-3px); box-shadow:var(--shadow); color:inherit; }
.network-preview__business img { width:54px; height:54px; border-radius:16px; object-fit:cover; border:1px solid var(--line); }
.network-preview__business > span,.network-preview__opportunity > span:not(.network-preview__opportunity-icon) { min-width:0; flex:1; display:flex; flex-direction:column; }
.network-preview small { color:var(--brand-600); font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.network-preview strong { color:var(--ink-900); font-family:var(--font-display); font-size:.9rem; line-height:1.35; }
.network-preview em { color:var(--ink-500); font-size:.72rem; font-style:normal; margin-top:3px; }
.network-preview__opportunity { margin-left:34px; }
.network-preview__opportunity-icon { width:46px; height:46px; display:grid; place-items:center; flex:none; border-radius:15px; background:linear-gradient(145deg,#fff4d9,#f5e3b8); color:var(--gold-600); }
.network-preview__path { justify-content:center; padding:4px 16px; color:var(--ink-500); font-size:.7rem; font-weight:700; }
.network-preview__path i { width:7px; height:7px; border-radius:50%; background:var(--brand-300); }
.network-preview__path i:nth-of-type(2) { width:54px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--brand-300),var(--gold-300)); }
.network-preview__foot { padding:8px 4px 0; color:var(--ink-500); font-size:.7rem; }
.network-preview__foot span { display:flex; align-items:center; gap:6px; }

.marketing-home .section { padding: clamp(52px,7vw,82px) 0; }
.marketing-home .section--tight { padding: 40px 0; }
.marketing-home .row--between h2 { font-size:clamp(1.55rem,2.6vw,2.15rem); letter-spacing:-.035em; }
.home-action-grid { position:relative; margin-top:-34px; z-index:3; }
.home-action-grid .action-card { min-height:176px; background:rgba(255,255,255,.92); backdrop-filter:blur(14px); box-shadow:0 15px 38px rgba(7,58,48,.08); }
.home-action-grid .action-card:nth-child(3) { color:#fff; border-color:transparent; background:linear-gradient(145deg,var(--brand-800),var(--brand-600)); }
.home-action-grid .action-card:nth-child(3) h3,.home-action-grid .action-card:nth-child(3) p { color:#fff; }
.home-action-grid .action-card:nth-child(3) p { opacity:.75; }

/* Digital Growth entry points on public and signed-in home pages */
.home-growth-showcase { color:#fff; background:linear-gradient(180deg,#fff,#f2f9f6); }
.home-growth-showcase__panel { position:relative; overflow:hidden; padding:clamp(28px,5vw,58px); display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.86fr); gap:clamp(32px,6vw,72px); align-items:center; border-radius:30px; background:radial-gradient(circle at 6% 5%,rgba(52,185,143,.2),transparent 25rem),linear-gradient(135deg,#062c25,#075b4a); box-shadow:0 24px 64px rgba(7,62,51,.18); }
.home-growth-showcase__panel::after { content:""; position:absolute; right:-180px; top:-220px; width:540px; height:540px; border:1px solid rgba(255,255,255,.07); border-radius:50%; box-shadow:0 0 0 72px rgba(255,255,255,.02),0 0 0 144px rgba(255,255,255,.014); pointer-events:none; }
.home-growth-showcase__copy,.home-growth-package-list { position:relative; z-index:1; }
.home-growth-showcase h2 { max-width:14ch; margin:18px 0 14px; color:#fff; font-size:clamp(2rem,4.5vw,3.65rem); line-height:1.03; letter-spacing:-.055em; }
.home-growth-showcase__copy > p { max-width:58ch; margin:0; color:rgba(235,255,248,.72); line-height:1.65; }
.home-growth-showcase__tamil { margin-top:13px !important; color:#fff !important; font-weight:700; }
.home-growth-showcase__benefits { margin-top:20px; display:flex; gap:8px 16px; flex-wrap:wrap; color:rgba(231,255,247,.72); font-size:.7rem; font-weight:700; }
.home-growth-showcase__benefits span { display:inline-flex; align-items:center; gap:5px; }
.home-growth-showcase__benefits .ic { color:#8de1c6; }
.home-growth-showcase .btn--ghost,.dashboard-growth-promo .btn--ghost { --btn-bg:rgba(255,255,255,.08); --btn-fg:#fff; --btn-border:rgba(255,255,255,.2); }
.home-growth-package-list { display:grid; gap:9px; }
.home-growth-package { --package-color:#159a7a; min-width:0; padding:13px 14px; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:11px; align-items:center; color:#fff; border:1px solid rgba(255,255,255,.13); border-radius:16px; background:rgba(255,255,255,.075); backdrop-filter:blur(12px); transition:transform var(--t-fast),background var(--t-fast); }
.home-growth-package:hover { color:#fff; transform:translateX(4px); background:rgba(255,255,255,.12); }
.home-growth-package.is-featured { border-color:color-mix(in srgb,var(--package-color) 65%,#fff); background:rgba(255,255,255,.12); }
.home-growth-package__icon { width:38px; height:38px; display:grid; place-items:center; color:#07382e; border-radius:12px; background:#8de1c6; }
.home-growth-package__body,.home-growth-package__price { min-width:0; }
.home-growth-package__body strong,.home-growth-package__body small,.home-growth-package__price strong,.home-growth-package__price small { display:block; }
.home-growth-package__body strong { font-size:.82rem; }
.home-growth-package__body small { overflow:hidden; color:rgba(255,255,255,.55); font-size:.62rem; text-overflow:ellipsis; white-space:nowrap; }
.home-growth-package__price { text-align:right; }
.home-growth-package__price strong { color:#fff; font-size:.88rem; }
.home-growth-package__price small { color:rgba(255,255,255,.5); font-size:.58rem; }
.home-growth-package-list__note { padding:5px 4px 0; display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.55); font-size:.62rem; }

.dashboard-growth-promo { position:relative; overflow:hidden; padding:clamp(22px,4vw,34px); display:grid; grid-template-columns:minmax(0,.9fr) minmax(350px,1.1fr); gap:clamp(24px,5vw,54px); align-items:center; color:#fff; border-radius:24px; background:radial-gradient(circle at 90% 10%,rgba(109,219,183,.22),transparent 22rem),linear-gradient(135deg,#073b32,#08735e); box-shadow:0 18px 44px rgba(7,75,62,.18); }
.dashboard-growth-promo__copy { position:relative; z-index:1; }
.dashboard-growth-promo h2 { margin:14px 0 7px; color:#fff; font-size:clamp(1.55rem,3vw,2.3rem); letter-spacing:-.045em; }
.dashboard-growth-promo__copy > p { margin:0; color:rgba(237,255,249,.72); font-size:.82rem; line-height:1.55; }
.dashboard-growth-promo__actions { margin-top:18px; display:flex; gap:9px; flex-wrap:wrap; }
.dashboard-growth-promo__plans { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.dashboard-growth-promo__plans a { min-width:0; padding:11px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; color:#fff; border:1px solid rgba(255,255,255,.12); border-radius:13px; background:rgba(255,255,255,.075); }
.dashboard-growth-promo__plans a:last-child { grid-column:1/-1; }
.dashboard-growth-promo__plans span { overflow:hidden; color:rgba(255,255,255,.7); font-size:.67rem; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-growth-promo__plans strong { flex:none; color:#fff; font-size:.75rem; }
.dashboard-growth-promo__plans small { color:rgba(255,255,255,.52); font-size:.55rem; }

/* member web workspace */
.app-v2 { background:radial-gradient(circle at 85% 0,rgba(168,227,207,.18),transparent 24%),var(--page-bg); }
.app-shell-container { padding-top:28px; padding-bottom:44px; }
.app-v2 .sidebar { padding:10px; border:1px solid rgba(207,219,215,.74); border-radius:22px; background:rgba(255,255,255,.7); box-shadow:var(--shadow-sm); backdrop-filter:blur(12px); }
.app-v2 .sidenav__group { margin-top:14px; }
.app-v2 .sidenav__label { padding-inline:10px; }
.app-v2 .sidenav a { padding:9px 10px; border-radius:11px; }

.dashboard-home { min-width:0; }
.dashboard-welcome {
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:22px;
  padding:28px 30px; margin-bottom:18px; border-radius:28px; color:#fff;
  background:
    radial-gradient(circle at 88% 18%,rgba(110,207,178,.34),transparent 28%),
    radial-gradient(circle at 5% 120%,rgba(201,144,47,.27),transparent 35%),
    linear-gradient(135deg,#082a25 0%,#0b5848 56%,#0d7d63 100%);
  box-shadow:0 22px 48px rgba(7,58,48,.18);
}
.dashboard-welcome::after { content:""; position:absolute; right:-44px; bottom:-75px; width:230px; height:230px; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 30px rgba(255,255,255,.035),0 0 0 66px rgba(255,255,255,.025); }
.dashboard-welcome__copy,.dashboard-welcome__actions { position:relative; z-index:1; }
.dashboard-welcome .eyebrow { color:var(--brand-200); }
.dashboard-welcome h1 { margin:3px 0 5px; color:#fff; font-size:clamp(1.7rem,3vw,2.4rem); letter-spacing:-.04em; }
.dashboard-welcome p { margin:0; color:rgba(255,255,255,.72); }
.dashboard-welcome__meta { display:flex; gap:14px; margin-top:13px; color:rgba(255,255,255,.72); font-size:.75rem; }
.dashboard-welcome__meta span { display:flex; align-items:center; gap:5px; }
.dashboard-welcome__actions { display:flex; align-items:center; gap:8px; }
.dashboard-welcome__actions .btn { background:#fff; color:var(--brand-800); box-shadow:0 12px 30px rgba(0,0,0,.16); }
.dashboard-bell { color:#fff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.16); }
.dashboard-bell:hover { color:#fff; background:rgba(255,255,255,.2); }

.command-search { min-height:60px; padding:8px 8px 8px 20px; border:0; box-shadow:0 12px 30px rgba(7,58,48,.07); }
.command-search__hint { color:var(--ink-400); font-size:.72rem; padding-right:8px; }
.completion-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px; padding:20px; background:linear-gradient(135deg,#fff,#f4fbf8); }
.completion-card__ring { width:70px; height:70px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--brand-500) calc(var(--completion) * 1%),var(--brand-100) 0); }
.completion-card__ring::before { content:""; grid-area:1/1; width:54px; height:54px; border-radius:50%; background:#fff; }
.completion-card__ring span { position:relative; grid-area:1/1; z-index:1; font-family:var(--font-display); font-size:.78rem; font-weight:800; color:var(--brand-700); }
.completion-card__body h3 { margin:1px 0 3px; font-size:1rem; }
.completion-card__body p { margin:0 0 9px; color:var(--ink-500); font-size:.78rem; }

.quick-action-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.quick-action-grid .action-card { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; min-height:112px; padding:17px; box-shadow:var(--shadow-xs); }
.quick-action-grid .action-card__icon { width:48px; height:48px; }
.quick-action-grid .action-card__arrow { position:absolute; top:12px; right:12px; color:var(--ink-300); opacity:0; transform:translateX(-5px); transition:all var(--t); }
.quick-action-grid .action-card:hover .action-card__arrow { opacity:1; transform:none; }
.quick-action-grid .action-card p { line-height:1.4; }
.action-card--need .action-card__icon { color:#2763c4; background:#edf3ff; }
.action-card--people .action-card__icon { color:#7e4db0; background:#f3edfa; }

.ad-banner { display:flex; align-items:center; gap:15px; padding:18px 20px; color:inherit; background:linear-gradient(120deg,#fffaf0,#fff); border-color:#ead8ae; }
.ad-banner:hover { color:inherit; box-shadow:var(--shadow-sm); }
.ad-banner__icon { width:46px; height:46px; display:grid; place-items:center; flex:none; border-radius:14px; color:var(--gold-600); background:#fff1cf; }
.ad-banner > div { min-width:0; flex:1; }
.ad-banner h3 { margin:1px 0 2px; font-size:.94rem; }
.ad-banner p { margin:0; color:var(--ink-500); font-size:.78rem; }

.app-feed-section { min-width:0; }
.section-head { align-items:end; }
.section-head__kicker { display:block; margin-bottom:4px; color:var(--brand-600); font-size:.64rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.section-head h2 { font-size:1.32rem; letter-spacing:-.035em; }
.section-head__link { display:inline-flex; align-items:center; gap:6px; color:var(--brand-700); font-size:.78rem; font-weight:800; white-space:nowrap; }
.app-content-rail > * { min-width:0; }
.updates-feed { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.update-card { padding:16px; }
.update-card h3 { margin:5px 0 3px; font-size:.9rem; }
.update-card p { margin:0; color:var(--ink-500); font-size:.78rem; }

/* richer shared cards */
.listing { border-radius:20px; background:rgba(255,255,255,.94); }
.listing__media { overflow:hidden; }
.listing__media img { transition:transform .45s var(--ease); }
.listing:hover .listing__media img { transform:scale(1.025); }
.listing__body { padding:17px; }
.listing__foot { border-color:rgba(226,234,231,.82); }
.cat-tile { border-radius:18px; background:rgba(255,255,255,.94); }

/* create sheet */
.create-sheet__head { align-items:flex-start; }
.create-sheet__head .eyebrow { display:block; margin-bottom:3px; }
.create-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.create-grid .option-card { min-width:0; }
.create-grid .option-card > span:nth-child(2),.create-grid .option-card__title,.create-grid .option-card__sub { display:block; width:100%; }

/* admin web workspace polish */
.admin-body { background:radial-gradient(circle at 85% 0,rgba(168,227,207,.18),transparent 25%),#f3f6f5; }
.admin-topbar { background:rgba(255,255,255,.92); }
.admin-sidebar { background:linear-gradient(180deg,#0d342e,#09251f); }
.admin-nav a { border-radius:11px; }
.admin-stat { border:0; box-shadow:0 8px 24px rgba(7,58,48,.07); }
.admin-content .card { border-color:rgba(207,219,215,.72); }

@media (min-width: 900px) {
  .app-v2 .shell { grid-template-columns:250px minmax(0,1fr); gap:26px; }
  .app-v2 .shell__content { max-width:1180px; }
  .appbar--member .container { max-width:1440px; }
}

@media (max-width: 899px) {
  :root { --header-h:62px; --bottomnav-h:72px; }
  body.app { padding-bottom:calc(94px + env(safe-area-inset-bottom)); }
  .appbar { height:62px; }
  .appbar__inner { padding-inline:16px; }
  .appbar--member { border-bottom:0; background:rgba(255,255,255,.93); }
  .appbar--member .brand__mark { width:36px; height:36px; border-radius:12px; }
  .appbar--member .brand__name { font-size:1rem; }
  .appbar__actions { gap:0; }
  .appbar__actions .icon-btn { width:38px; height:38px; }
  .app-shell-container { padding:16px 16px 24px; }
  .app-v2 .shell__content { width:100%; }

  .dashboard-welcome { padding:20px; border-radius:24px; margin-bottom:14px; }
  .dashboard-welcome h1 { font-size:1.48rem; }
  .dashboard-welcome p { max-width:28ch; font-size:.82rem; }
  .dashboard-welcome__meta { margin-top:10px; }
  .dashboard-welcome__actions { display:none; }
  .command-search { min-height:54px; padding-left:16px; }
  .command-search .btn { min-height:40px; padding-inline:17px; }
  .completion-card { grid-template-columns:auto minmax(0,1fr); gap:13px; padding:16px; }
  .completion-card__ring { width:58px; height:58px; }
  .completion-card__ring::before { width:44px; height:44px; }
  .completion-card__body p { display:none; }
  .completion-card__cta { grid-column:1/-1; width:100%; }
  .completion-card .chip-row { display:none; }

  .quick-action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .quick-action-grid .action-card { display:flex; flex-direction:column; align-items:flex-start; min-height:142px; padding:16px; gap:10px; }
  .quick-action-grid .action-card__icon { width:44px; height:44px; }
  .quick-action-grid .action-card__arrow { display:none; }
  .quick-action-grid .action-card h3 { font-size:.9rem; }
  .quick-action-grid .action-card p { font-size:.73rem; }
  .ad-banner { padding:15px; }
  .ad-banner > .btn { display:none; }

  .app-feed-section { margin-bottom:30px !important; }
  .app-feed-section .section-head { margin-bottom:12px; }
  .section-head h2 { font-size:1.2rem; }
  .section-head p { font-size:.76rem; }
  .section-head__link { padding:8px 0; }
  .app-content-rail {
    display:grid !important; grid-template-columns:none !important; grid-auto-flow:column;
    grid-auto-columns:min(82vw,315px); gap:12px; overflow-x:auto; overflow-y:hidden;
    margin-inline:0 -16px; padding:2px 16px 10px 0; scroll-padding-left:0;
    scroll-snap-type:x proximity; overscroll-behavior-inline:contain; scrollbar-width:none;
  }
  .app-content-rail::-webkit-scrollbar,.public-rail::-webkit-scrollbar { display:none; }
  .app-content-rail > * { scroll-snap-align:start; }
  .app-content-rail--compact { grid-auto-columns:132px; }
  .app-content-rail--people { grid-auto-columns:min(70vw,255px); }
  .app-content-rail .listing { height:100%; }
  .app-content-rail--compact .cat-tile { min-height:140px; padding:15px 9px; }
  .updates-feed { grid-template-columns:1fr; }

  .bottomnav {
    left:10px; right:10px; bottom:8px; height:calc(72px + env(safe-area-inset-bottom));
    padding:0 4px env(safe-area-inset-bottom); border:1px solid rgba(207,219,215,.85); border-radius:23px;
    background:rgba(255,255,255,.94); box-shadow:0 18px 50px rgba(7,58,48,.18);
  }
  .bottomnav a,.bottomnav button { min-width:0; border-radius:18px; font-size:.62rem; font-weight:700; }
  .bottomnav a.is-active { color:var(--brand-700); background:linear-gradient(180deg,var(--brand-50),rgba(238,250,245,.35)); }
  .bottomnav a.is-active::before { display:none; }
  .bottomnav a .ic { width:21px; height:21px; }
  .bottomnav__create { padding-top:5px !important; }
  .bottomnav__create .fab { width:54px; height:54px; margin-top:-20px; border-width:4px; border-color:var(--page-bg); border-radius:19px; box-shadow:0 13px 28px rgba(13,125,99,.32); }

  .sheet__panel { max-height:88vh; padding:10px 16px calc(20px + env(safe-area-inset-bottom)); }
  .create-grid .option-card { flex-direction:column; align-items:flex-start; min-height:128px; padding:15px; }
  .create-grid .option-card__icon { width:42px; height:42px; }
  .create-grid .option-card__sub { font-size:.68rem; line-height:1.35; }
  .create-grid > .option-card > .spacer,.create-grid > .option-card > .ic { display:none; }

  .marketing-home .hero { padding:42px 0 66px; }
  .public-hero__grid { grid-template-columns:1fr; }
  .network-preview { display:none; }
  .marketing-home .hero__title { max-width:10ch; font-size:clamp(2.45rem,12vw,3.6rem); }
  .marketing-home .hero__sub { font-size:.96rem; line-height:1.7; }
  .marketing-home .hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px 8px; }
  .marketing-home .hero-stats__item { padding:0; border:0; }
  .marketing-home .hero-stats__item .n { font-size:1.3rem; }
  .marketing-home .hero-stats__item .l { font-size:.68rem; }
  .home-action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:-26px; gap:10px; }
  .home-action-grid .action-card { min-height:155px; padding:16px; }
  .home-growth-showcase__panel { grid-template-columns:minmax(0,1fr); gap:26px; }
  .home-growth-showcase h2 { max-width:16ch; }
  .home-growth-package-list { width:min(100%,640px); }
  .dashboard-growth-promo { grid-template-columns:minmax(0,1fr); gap:22px; }
  .marketing-home .section { padding:48px 0; }
  .marketing-home .section--tight { padding:30px 0; }
  .public-rail {
    display:grid !important; grid-template-columns:none !important; grid-auto-flow:column;
    grid-auto-columns:min(82vw,320px); gap:12px; overflow-x:auto; overflow-y:hidden;
    margin-right:-18px; padding:2px 18px 12px 0; scroll-snap-type:x proximity; scrollbar-width:none;
  }
  .public-rail > * { scroll-snap-align:start; }
  .public-rail--compact { grid-auto-columns:138px; }
  .public-rail--product { grid-auto-columns:min(68vw,255px); }
  .public-rail--plans { grid-auto-columns:min(84vw,330px); }
}

@media (max-width: 760px) {
  .filterbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:0; border:0; background:transparent; }
  .filterbar .select,.filterbar .input { width:100%; min-width:0; min-height:48px; }
  .field input,.field select,.field textarea,.input,.select { min-height:48px; }
  .form-actions { position:sticky; bottom:92px; z-index:20; padding:10px; margin-inline:-4px; border:1px solid rgba(207,219,215,.85); border-radius:16px; background:rgba(255,255,255,.94); box-shadow:var(--shadow); backdrop-filter:blur(12px); }
  .form-actions .btn { flex:1; }
}

@media (display-mode: standalone) and (max-width: 899px) {
  .appbar { height:calc(62px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); }
  .bottomnav { bottom:max(8px,env(safe-area-inset-bottom)); }
}

@media (max-width: 560px) {
  .appbar--public .brand__name { font-size:.96rem; }
  .appbar--public .brand__mark { width:36px; height:36px; }
  .appbar--public .appbar__join { min-height:38px; padding:8px 13px; }
  .marketing-home .hero__search { padding-left:15px; }
  .marketing-home .hero__search input { font-size:.84rem; }
  .marketing-home .hero__search .btn { padding-inline:16px; }
  .marketing-home .btn-group { align-items:stretch; }
  .marketing-home .btn-group .btn { flex:1 1 100%; }
  .marketing-home .row--between { align-items:flex-end; }
  .marketing-home .row--between > .btn { padding-inline:10px; }
  .home-growth-showcase { padding-block:34px !important; }
  .home-growth-showcase__panel { padding:26px 18px; border-radius:24px; }
  .home-growth-showcase h2 { font-size:clamp(2rem,10vw,2.8rem); }
  .home-growth-package { padding:12px 11px; grid-template-columns:auto minmax(0,1fr) auto; gap:9px; }
  .home-growth-package > .ic:last-child { display:none; }
  .home-growth-package__body small { max-width:32vw; }
  .home-growth-package__price strong { font-size:.8rem; }
  .dashboard-growth-promo { padding:22px 17px; border-radius:21px; }
  .dashboard-growth-promo__actions { display:grid; grid-template-columns:minmax(0,1fr); }
  .dashboard-growth-promo__plans { grid-template-columns:minmax(0,1fr); }
  .dashboard-growth-promo__plans a:last-child { grid-column:auto; }
  .footer { padding:40px 0 105px; }
}

@media (min-width: 600px) and (max-width: 899px) {
  .app-content-rail { grid-auto-columns:min(44vw,340px); }
  .app-content-rail--compact { grid-auto-columns:155px; }
  .app-content-rail--people { grid-auto-columns:min(36vw,275px); }
  .public-rail { grid-auto-columns:min(44vw,340px); }
  .public-rail--compact { grid-auto-columns:155px; }
  .public-rail--product { grid-auto-columns:min(36vw,270px); }
  .public-rail--plans { grid-auto-columns:min(46vw,350px); }
}

@media (max-width: 360px) {
  .appbar--member .brand__name { display:none; }
  .quick-action-grid .action-card { min-height:136px; padding:14px; }
  .create-grid { gap:8px; }
  .create-grid .option-card { padding:13px; }
}

/* ============================================================
   MOBILE APP POLISH — native dock, compact shortcuts and rhythm
   ============================================================ */
@media (max-width: 899px) {
  :root { --bottomnav-h: 78px; }

  body.app {
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 0 4%, rgba(117,211,181,.18), transparent 26%),
      linear-gradient(180deg,#f4faf7 0,#f8faf9 44%,#f5f8f7 100%);
  }
  .app-main { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .app-shell-container { padding: 14px 15px 30px; }

  .appbar--member { box-shadow: 0 1px 0 rgba(14,52,44,.05), 0 8px 24px rgba(14,52,44,.035); }
  .appbar--member .brand__mark {
    box-shadow: 0 8px 18px rgba(13,125,99,.2), inset 0 1px rgba(255,255,255,.25);
  }
  .appbar--member .icon-btn { color: var(--ink-700); border-color: transparent; background: transparent; }
  .appbar--member .icon-btn:active { background: var(--brand-50); transform: scale(.94); }

  .dashboard-welcome {
    padding: 21px 20px 22px; border-radius: 26px;
    box-shadow: 0 18px 38px rgba(7,58,48,.2);
  }
  .dashboard-welcome::before {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 34%);
  }

  .command-search {
    margin-top: -1px; border: 1px solid rgba(207,219,215,.62);
    box-shadow: 0 12px 26px rgba(7,58,48,.08), inset 0 1px #fff;
  }
  .command-search .btn { border-radius: 16px; }

  .completion-card {
    grid-template-columns: 58px minmax(0,1fr) 42px;
    gap: 12px; min-height: 86px; padding: 13px 12px 13px 14px;
    border-color: rgba(103,181,155,.24); border-radius: 22px;
    box-shadow: 0 10px 28px rgba(7,58,48,.06);
  }
  .completion-card__body .eyebrow { font-size: .58rem; }
  .completion-card__body h3 { margin-top: 2px; font-size: .91rem; line-height: 1.2; }
  .completion-card__ring span { grid-area: 1 / 1; z-index: 1; }
  .completion-card__cta {
    grid-column: auto; width: 40px; height: 40px; min-height: 40px; padding: 0;
    display: grid; place-items: center; border-radius: 14px;
  }
  .completion-card__cta-label {
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }

  .quick-action-grid {
    grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px;
    margin: 2px -3px 22px !important;
  }
  .quick-action-grid .action-card {
    min-width: 0; min-height: 108px; padding: 7px 2px 5px; gap: 7px;
    align-items: center; text-align: center; border: 0; border-radius: 18px;
    background: transparent; box-shadow: none;
  }
  .quick-action-grid .action-card:active { transform: scale(.95); background: rgba(255,255,255,.58); }
  .quick-action-grid .action-card__icon {
    width: 52px; height: 52px; border-radius: 18px;
    box-shadow: 0 9px 20px rgba(7,58,48,.09), inset 0 1px rgba(255,255,255,.8);
  }
  .quick-action-grid .action-card__body { width: 100%; }
  .quick-action-grid .action-card h3 {
    max-width: 9ch; margin: 0 auto; color: var(--ink-800);
    font-size: .68rem; line-height: 1.18; letter-spacing: -.015em;
  }
  .quick-action-grid .action-card p { display: none; }

  .app-feed-section .section-head { align-items: center; }
  .section-head__kicker { font-size: .58rem; letter-spacing: .14em; }
  .section-head__link {
    min-height: 36px; padding: 7px 10px; border-radius: 12px;
    background: rgba(255,255,255,.78); box-shadow: inset 0 0 0 1px rgba(207,219,215,.7);
  }

  .bottomnav {
    left: 10px; right: 10px; bottom: max(9px,env(safe-area-inset-bottom));
    height: 76px; padding: 5px 5px 6px;
    align-items: stretch; overflow: visible; isolation: isolate;
    border: 1px solid rgba(255,255,255,.12); border-radius: 27px;
    background: linear-gradient(145deg,rgba(9,48,41,.97),rgba(5,33,29,.98));
    box-shadow: 0 22px 48px rgba(4,30,26,.3), 0 3px 12px rgba(4,30,26,.14), inset 0 1px rgba(255,255,255,.1);
    backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
    animation: mobileDockIn .42s cubic-bezier(.2,.8,.2,1) both;
  }
  .bottomnav::before {
    content:""; position:absolute; z-index:-1; left:28%; right:28%; top:-18px; height:28px;
    border-radius:50%; background:rgba(34,183,143,.2); filter:blur(15px); pointer-events:none;
  }
  .bottomnav .bottomnav__item {
    min-width: 0; min-height: 62px; padding: 6px 2px 3px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    color: rgba(228,243,238,.68); border-radius: 18px;
    font-size: .62rem; font-weight: 650; line-height:1; -webkit-tap-highlight-color:transparent;
    transition: color .18s ease, transform .18s ease;
  }
  .bottomnav .bottomnav__item:active { transform: scale(.92); }
  .bottomnav__icon {
    position:relative; width: 38px; height: 30px; display:grid; place-items:center;
    border-radius: 12px; transition: background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
  }
  .bottomnav__label { display:block; letter-spacing:-.01em; }
  .bottomnav .bottomnav__item.is-active { color:#fff; background:transparent; }
  .bottomnav .bottomnav__item.is-active .bottomnav__icon {
    color:#073d33; background:linear-gradient(145deg,#dff8ef,#a9e8d4);
    transform:translateY(-1px); box-shadow:0 7px 16px rgba(0,0,0,.2),inset 0 1px #fff;
  }
  .bottomnav .bottomnav__item.is-active .bottomnav__icon::after {
    content:""; position:absolute; bottom:-5px; width:4px; height:4px; border-radius:50%; background:#8fe2c8;
  }
  .bottomnav .bottomnav__item.is-active .bottomnav__label { font-weight:800; }

  .bottomnav .bottomnav__create { justify-content:flex-start; padding-top:0; color:rgba(235,248,244,.74); }
  .bottomnav__create .bottomnav__create-halo {
    width: 64px; height: 54px; margin-top:-20px; display:grid; place-items:center; border-radius:24px;
    background:var(--page-bg); box-shadow:0 -3px 0 var(--page-bg);
  }
  .bottomnav__create .fab {
    width: 56px; height: 56px; margin:0; display:grid; place-items:center; border:0; border-radius:20px;
    color:#fff; background:linear-gradient(145deg,#24ad89,#08735c 70%);
    box-shadow:0 13px 26px rgba(4,25,21,.38), inset 0 1px rgba(255,255,255,.28);
    transition:transform .18s ease,box-shadow .18s ease;
  }
  .bottomnav__create:active .fab { transform:scale(.9) rotate(8deg); box-shadow:0 7px 15px rgba(4,25,21,.3); }
  .bottomnav__create .bottomnav__label { margin-top:7px; font-weight:800; color:#fff; }
  .bottomnav__create.is-active .fab { background:linear-gradient(145deg,#dbb45f,#a96f14); }

  .sheet__panel {
    border-radius: 30px 30px 0 0; border-top: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 -24px 64px rgba(4,30,26,.2);
  }
  .sheet__handle { width: 42px; height: 5px; background: #ccd8d4; }
  .create-grid .option-card {
    border-radius: 20px; background: linear-gradient(145deg,#fff,#f6faf8);
    box-shadow: 0 8px 20px rgba(7,58,48,.055);
  }
  .create-grid .option-card:nth-child(1), .create-grid .option-card:nth-child(2) {
    border-color: rgba(74,176,143,.3); background: linear-gradient(145deg,#f3fcf8,#e9f8f2);
  }
  .create-grid .option-card:last-child:nth-child(odd) {
    grid-column: 1 / -1; min-height: 92px; flex-direction: row; align-items: center;
  }
  .create-grid .option-card:last-child:nth-child(odd) .option-card__icon { flex: 0 0 auto; }
}

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

@media (max-width: 360px) {
  .bottomnav { left:7px; right:7px; border-radius:24px; }
  .bottomnav .bottomnav__item { font-size:.57rem; }
  .bottomnav__icon { width:34px; }
  .bottomnav__create-halo { width:58px; }
  .bottomnav__create .fab { width:53px; height:53px; border-radius:19px; }
  .quick-action-grid .action-card { min-height:103px; padding-inline:0; }
  .quick-action-grid .action-card__icon { width:48px; height:48px; }
  .quick-action-grid .action-card h3 { font-size:.64rem; }
  .dashboard-welcome h1 { font-size:clamp(1.16rem,5.8vw,1.3rem); letter-spacing:-.045em; white-space:nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .bottomnav { animation:none; }
  .bottomnav *, .quick-action-grid .action-card { transition:none !important; }
}

/* ============================================================
   BUTTON + UPLOAD SYSTEM — consistent tactile controls everywhere
   ============================================================ */
.btn {
  --btn-shadow:0 7px 18px rgba(12,47,40,.09);
  position:relative; isolation:isolate; overflow:hidden;
  min-height:46px; padding:11px 18px; border-radius:14px;
  font-weight:750; letter-spacing:-.012em;
  box-shadow:var(--btn-shadow),inset 0 1px rgba(255,255,255,.24);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,filter .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover {
  transform:translateY(-2px); filter:saturate(1.04);
  box-shadow:0 12px 25px rgba(12,47,40,.13),inset 0 1px rgba(255,255,255,.26);
}
.btn:active { transform:translateY(1px) scale(.98); box-shadow:0 3px 9px rgba(12,47,40,.1),inset 0 1px rgba(255,255,255,.18); }
.btn:focus-visible,.icon-btn:focus-visible { outline:3px solid rgba(33,173,137,.24); outline-offset:3px; }
.btn .ic { flex:none; transition:transform .18s ease; }
.btn:hover .ic--arrow-right,.btn:hover .ic--chevron-right { transform:translateX(2px); }
.btn[disabled],.btn.is-disabled { opacity:.52; filter:grayscale(.15); cursor:not-allowed; transform:none; box-shadow:none; }
.btn--primary {
  --btn-bg:linear-gradient(135deg,#08745d 0%,#0d8f70 58%,#16a17f 100%);
  --btn-shadow:0 9px 22px rgba(7,116,92,.24);
  border-color:rgba(4,91,72,.25); text-shadow:0 1px 1px rgba(0,0,0,.08);
}
.btn--primary:hover { box-shadow:0 14px 30px rgba(7,116,92,.3),inset 0 1px rgba(255,255,255,.26); }
.btn--soft {
  --btn-bg:linear-gradient(145deg,#effaf6,#e2f5ed); --btn-fg:#08644f; --btn-border:#c5e8da;
  --btn-shadow:0 5px 15px rgba(7,116,92,.08);
}
.btn--ghost {
  --btn-bg:rgba(255,255,255,.84); --btn-fg:var(--ink-700); --btn-border:rgba(176,194,188,.82);
  --btn-shadow:0 4px 14px rgba(12,47,40,.055);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}
.btn--quiet { --btn-shadow:none; box-shadow:none; }
.btn--danger { --btn-bg:linear-gradient(135deg,#c93c43,#e45257); --btn-shadow:0 8px 20px rgba(201,60,67,.2); }
.btn--dark { --btn-bg:linear-gradient(145deg,#17342f,#081f1b); --btn-shadow:0 8px 20px rgba(8,31,27,.22); }
.btn--gold { --btn-bg:linear-gradient(135deg,#aa741d,#d2a347); --btn-shadow:0 8px 20px rgba(170,116,29,.2); }
.btn--sm { min-height:38px; padding:8px 13px; border-radius:11px; font-size:.8rem; }
.btn--lg { min-height:54px; padding:14px 24px; border-radius:16px; }
.btn--icon { border-radius:14px; }

.icon-btn {
  overflow:hidden; border-radius:14px; border-color:rgba(207,219,215,.72);
  background:rgba(255,255,255,.72); box-shadow:0 4px 13px rgba(12,47,40,.045),inset 0 1px rgba(255,255,255,.6);
}
.icon-btn:hover { background:#fff; transform:translateY(-2px); box-shadow:0 9px 20px rgba(12,47,40,.1); }
.icon-btn:active { transform:scale(.94); box-shadow:none; }
.btn-ripple {
  position:absolute; z-index:0; width:10px; height:10px; pointer-events:none; border-radius:50%;
  background:rgba(255,255,255,.3); transform:translate(-50%,-50%) scale(0);
  animation:btnRipple .5s ease-out forwards;
}
.btn--ghost .btn-ripple,.btn--soft .btn-ripple,.btn--quiet .btn-ripple,.icon-btn .btn-ripple { background:rgba(13,125,99,.13); }
@keyframes btnRipple { to { opacity:0; transform:translate(-50%,-50%) scale(18); } }

input[type="file"]:not(.hide) {
  width:100%; min-height:60px; padding:7px; overflow:hidden;
  color:var(--ink-500); font-size:.86rem; font-weight:600;
  border:1px solid rgba(176,194,188,.86); border-radius:16px;
  background:linear-gradient(145deg,#fff,#f7faf9); cursor:pointer;
  box-shadow:inset 0 1px #fff,0 4px 13px rgba(12,47,40,.045);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
input[type="file"]:not(.hide)::file-selector-button {
  min-height:44px; margin-right:12px; padding:10px 15px 10px 40px;
  color:#09634f; font:750 .84rem/1 var(--font); white-space:nowrap;
  border:1px solid #c5e8da; border-radius:12px;
  background-color:#e9f8f2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2309634f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V9'/%3E%3Cpath d='m7.5 13.5 4.5-4.5 4.5 4.5'/%3E%3Cpath d='M4 6V4.5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1V6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:14px center;
  cursor:pointer; transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
input[type="file"]:not(.hide):hover { border-color:var(--brand-300); background:#fff; box-shadow:0 0 0 4px rgba(21,154,122,.07); }
input[type="file"]:not(.hide):hover::file-selector-button { background-color:#dcf3ea; border-color:#a8ddca; }
input[type="file"]:not(.hide):focus-visible { outline:0; border-color:var(--brand-400); box-shadow:0 0 0 4px rgba(21,154,122,.13); }
input[type="file"]:not(.hide).has-file { color:var(--brand-700); border-color:var(--brand-300); background:#f2fbf7; }

.profile-photo-card { border-color:rgba(119,194,169,.28); background:linear-gradient(145deg,#fff,#f6fbf9); }
.profile-photo-card__head { display:flex; align-items:flex-start; gap:12px; }
.profile-photo-card__icon {
  width:44px; height:44px; display:grid; place-items:center; flex:none;
  color:var(--brand-700); border-radius:14px; background:var(--brand-50); box-shadow:inset 0 0 0 1px var(--brand-100);
}
.profile-photo-card__head h3 { margin:1px 0 3px; }
.profile-photo-card__head p { margin:0; color:var(--ink-500); font-size:.76rem; line-height:1.45; }
.profile-stats { gap:0; }
.profile-stats .metric { min-width:0; padding:6px 10px; text-align:center; }
.profile-stats .metric + .metric { border-left:1px solid var(--line); }
.profile-stats .metric strong { display:block; color:var(--ink-900); font-family:var(--font-display); font-size:1.28rem; line-height:1.1; }
.profile-stats .metric span { display:block; margin-top:4px; color:var(--ink-500); font-size:.68rem; }
.file-picker {
  position:relative; min-height:62px; padding:7px; display:flex; align-items:center; gap:12px; overflow:hidden;
  color:var(--ink-500); border:1px solid rgba(176,194,188,.86); border-radius:16px;
  background:linear-gradient(145deg,#fff,#f7faf9); cursor:pointer;
  box-shadow:inset 0 1px #fff,0 4px 13px rgba(12,47,40,.045);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.file-picker:hover { border-color:var(--brand-300); background:#fff; box-shadow:0 0 0 4px rgba(21,154,122,.07); }
.file-picker:focus-within { border-color:var(--brand-400); box-shadow:0 0 0 4px rgba(21,154,122,.13); }
.file-picker .file-picker__input { position:absolute; inset:0; z-index:2; width:100%; height:100%; min-height:0; padding:0; opacity:0; cursor:pointer; }
.file-picker__button {
  min-height:46px; padding:10px 14px; display:inline-flex; align-items:center; gap:8px; flex:none;
  color:#09634f; font-size:.83rem; font-weight:800; border:1px solid #c5e8da; border-radius:12px;
  background:#e9f8f2; box-shadow:inset 0 1px #fff;
}
.file-picker__name { min-width:0; overflow:hidden; color:var(--ink-500); font-size:.8rem; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:560px) {
  .btn { min-height:48px; border-radius:15px; }
  .btn--sm { min-height:42px; border-radius:12px; }
  .btn--lg { min-height:54px; }
  .page-head > .flex { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-head > .flex .btn { min-width:0; padding-inline:10px; }
  .profile-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  input[type="file"]:not(.hide) { min-height:62px; font-size:.8rem; }
  input[type="file"]:not(.hide)::file-selector-button { min-height:46px; padding-inline:39px 13px; margin-right:9px; }
  .profile-photo-card { padding:18px; border-radius:22px; }
  .file-picker { gap:9px; }
  .file-picker__button { padding-inline:12px; }
}

/* ---------------------------------------------------- shared page polish */
.section--compact { padding: 30px 0; }
.lead { color: var(--ink-600); font-size: 1.02rem; line-height: 1.7; }
.page-narrow { width: min(100%, 760px); margin-inline: auto; }
.meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; color: var(--ink-500); font-size: .84rem; }
.meta-row span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.chip--brand { color: var(--brand-700); border-color: var(--brand-200); background: var(--brand-50); }
.sticky-card { position: sticky; top: 92px; }

.notice { padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface-2); color: var(--ink-700); font-size: .86rem; }
.notice--info { color: #20579f; border-color: #cfe0f8; background: var(--info-50); }
.notice--ok { color: #0c6e48; border-color: #bde6d0; background: var(--ok-50); }
.notice--warn { color: #80500d; border-color: #ecd7ae; background: var(--warn-50); }
.notice--bad { color: #9e2e34; border-color: #f1c2c5; background: var(--bad-50); }
.field-hint { margin: 6px 0 0; color: var(--ink-500); font-size: .76rem; line-height: 1.45; }
.right { text-align: right; }
.k { display: block; margin-bottom: 3px; color: var(--ink-500); font-size: .74rem; font-weight: 650; }
.icon-btn.danger { color: var(--bad-500); }
.icon-btn.danger:hover { color: #fff; border-color: var(--bad-500); background: var(--bad-500); }

.check-row { display: flex; align-items: flex-start; gap: 10px; min-height: 42px; padding: 9px 1px; color: var(--ink-700); cursor: pointer; }
.check-row input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--brand-600); }
.check-row span { min-width: 0; line-height: 1.45; }
.field > span:first-child { display: block; margin-bottom: 7px; color: var(--ink-700); font-size: .82rem; font-weight: 700; }
.field > input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.field > select,
.field > textarea { width: 100%; min-height: 46px; padding: 11px 13px; color: var(--ink-800); border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.field > textarea { min-height: 112px; resize: vertical; }
.field > input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):focus,
.field > select:focus,
.field > textarea:focus { outline: 0; border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(21,154,122,.13); }
.metric { min-width: 0; padding: 8px; text-align: center; }
.metric strong { display: block; color: var(--ink-900); font-family: var(--font-display); font-size: 1.25rem; line-height: 1.1; }
.metric span { display: block; margin-top: 5px; color: var(--ink-500); font-size: .72rem; }
.badge-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: none; color: var(--brand-700); border-radius: 12px; background: var(--brand-50); }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); }
.product-main { width: 100%; max-height: 560px; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 16px; background: linear-gradient(145deg, #f7faf9, #eef4f2); }
.post-image { width: 100%; max-height: 560px; margin-top: 16px; object-fit: cover; border-radius: 16px; }
.empty-state { padding: 28px 18px; color: var(--ink-500); text-align: center; }
.empty-state h3 { margin-bottom: 4px; }
.empty.compact { padding: 28px 16px; text-align: center; }
.global-hero, .category-hero { overflow: hidden; border-color: rgba(110, 207, 178, .36); background: radial-gradient(circle at 90% 10%, rgba(168,227,207,.7), transparent 32%), linear-gradient(145deg, #fff, #eff8f5); }
.action-card--search .action-card__icon { color: var(--info-500); background: var(--info-50); }
.metric__icon { width: 40px; height: 40px; margin: 0 auto 10px; display: grid; place-items: center; color: var(--brand-700); border-radius: 13px; background: var(--brand-50); }
.mini-chart { height: 180px; padding: 18px 4px 4px; display: flex; align-items: end; gap: 5px; border-bottom: 1px solid var(--line); }
.mini-chart span { min-width: 4px; flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--brand-300), var(--brand-600)); }

/* profile completion and identity */
.profile-hero__body { position: relative; z-index: 1; }
.profile-hero__top > * { min-width: 0; }
.profile-hero__top { align-items: flex-start; }
.profile-hero__top > div { min-width: 0; padding: 46px 0 0 !important; }
.profile-hero__identity { min-width: 0; }
.profile-hero__identity h1 { overflow-wrap: anywhere; }
.profile-hero__identity > h1 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
.progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-600), var(--brand-400)); transition: width .45s var(--ease); }
.progress-ring { --value: 0; position: relative; width: 58px; height: 58px; display: grid; place-items: center; flex: none; border-radius: 50%; background: conic-gradient(var(--brand-500) calc(var(--value) * 1%), var(--ink-100) 0); }
.progress-ring::before { content: ""; grid-area: 1 / 1; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); }
.progress-ring span { z-index: 1; grid-area: 1 / 1; color: var(--ink-800); font-size: .74rem; font-weight: 800; }
.checklist-summary { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; color: var(--ink-500); font-size: .82rem; }
.checklist-summary .ic { color: var(--brand-600); }
.profile-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.checklist-row { min-width: 0; min-height: 58px; padding: 10px 12px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 10px; color: var(--ink-700); border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, #fff, #f7faf9); transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); }
.checklist-row:hover { color: var(--brand-700); border-color: var(--brand-200); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.checklist-row > .ic:first-child { width: 34px; height: 34px; padding: 8px; color: var(--brand-600); border-radius: 11px; background: var(--brand-50); }
.checklist-row > .ic:last-child { color: var(--brand-500); }
.checklist-row span { min-width: 0; overflow-wrap: anywhere; font-size: .84rem; font-weight: 700; }
.checklist-row.is-done { color: var(--ink-500); background: var(--surface-2); }

/* messaging and notifications */
.message-shell { min-height: 610px; display: grid; grid-template-columns: 310px minmax(0, 1fr); overflow: hidden; }
.thread-list { min-width: 0; border-right: 1px solid var(--line); background: var(--surface); }
.thread-list__head, .conversation-head { min-height: 64px; padding: 11px 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }
.conversation-pane { min-width: 0; background: linear-gradient(180deg, var(--surface), #f7faf9); }
.conversation-empty { min-height: 545px; display: grid; place-content: center; justify-items: center; padding: 28px; text-align: center; color: var(--ink-500); }
.conversation-empty .ic { color: var(--brand-300); }
.attachment { display: flex; align-items: center; gap: 5px; margin-top: 7px; color: inherit; font-size: .78rem; text-decoration: underline; }
.notification-list { overflow: hidden; }
.notification-row { position: relative; min-width: 0; padding: 15px 17px; display: flex; align-items: flex-start; gap: 12px; color: var(--ink-700); border-bottom: 1px solid var(--line); transition: background var(--t-fast); }
.notification-row:last-child { border-bottom: 0; }
.notification-row:hover, .notification-row.is-unread { color: var(--ink-800); background: var(--brand-50); }
.notification-row__icon { width: 42px; height: 42px; display: grid; place-items: center; flex: none; color: var(--brand-700); border-radius: 13px; background: #fff; box-shadow: var(--shadow-xs); }
.unread-dot { width: 8px; height: 8px; margin-top: 8px; flex: none; border-radius: 50%; background: var(--brand-500); box-shadow: 0 0 0 4px rgba(21,154,122,.1); }

/* pricing and standalone shareable pages */
.pricing-grid { align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; }
.price-card.is-popular { border-color: var(--brand-300); box-shadow: var(--shadow-brand); }
.price-card__popular { position: absolute; top: -12px; right: 18px; padding: 5px 11px; color: #fff; border-radius: 999px; background: linear-gradient(135deg, var(--brand-700), var(--brand-500)); font-size: .7rem; font-weight: 800; box-shadow: var(--shadow-sm); }
.price-card__price { margin: 8px 0 18px; color: var(--ink-900); font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 800; letter-spacing: -.03em; }
.price-card__price small { color: var(--ink-500); font-size: .72rem; font-weight: 600; letter-spacing: 0; }
.price-features { flex: 1; }
.price-features > div { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-600); font-size: .84rem; }

/* unified membership and done-for-you growth hub */
.membership-hub-hero { padding:28px 0 0; background:linear-gradient(180deg,#eef8f4,#f8fbfa); }
.membership-hub-hero__panel { position:relative; overflow:hidden; padding:clamp(30px,5vw,62px); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:clamp(30px,6vw,74px); align-items:center; color:#fff; border-radius:32px; background:radial-gradient(circle at 90% 12%,rgba(72,198,158,.28),transparent 30%),linear-gradient(135deg,#062d26,#0a5b4b); box-shadow:0 24px 64px rgba(7,62,51,.2); }
.membership-hub-hero__panel::after { content:""; position:absolute; right:-90px; bottom:-180px; width:420px; height:420px; border:1px solid rgba(255,255,255,.08); border-radius:50%; box-shadow:0 0 0 58px rgba(255,255,255,.025),0 0 0 116px rgba(255,255,255,.018); pointer-events:none; }
.membership-hub-hero__copy { position:relative; z-index:1; }
.membership-hub-hero h1 { max-width:13ch; margin:18px 0 16px; color:#fff; font-size:clamp(2.45rem,5vw,4.65rem); line-height:.98; letter-spacing:-.065em; }
.membership-hub-hero h1 span { color:#92e6ca; }
.membership-hub-hero__copy > p { max-width:62ch; margin:0; color:rgba(235,255,248,.75); font-size:clamp(.92rem,1.7vw,1.08rem); line-height:1.65; }
.membership-hub-hero__tamil { margin-top:14px !important; color:#fff !important; font-weight:700; }
.membership-hub-hero__actions { margin-top:26px; display:flex; gap:10px; flex-wrap:wrap; }
.membership-hub-hero .btn--ghost { --btn-bg:rgba(255,255,255,.08); --btn-fg:#fff; --btn-border:rgba(255,255,255,.2); }
.membership-hub-summary { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.membership-hub-summary__card { min-width:0; padding:18px; display:flex; align-items:center; gap:12px; border:1px solid rgba(255,255,255,.14); border-radius:19px; background:rgba(255,255,255,.09); backdrop-filter:blur(12px); }
.membership-hub-summary__card--gold { background:rgba(193,142,48,.14); }
.membership-hub-summary__card--wide { grid-column:1/-1; }
.membership-hub-summary__card > span { width:44px; height:44px; display:grid; place-items:center; flex:none; color:#082f28; border-radius:14px; background:#93e3c8; }
.membership-hub-summary__card--gold > span { background:#f1cf8d; }
.membership-hub-summary__card small,.membership-hub-summary__card strong,.membership-hub-summary__card em { display:block; }
.membership-hub-summary__card small { color:rgba(255,255,255,.58); font-size:.65rem; }
.membership-hub-summary__card strong { margin:2px 0; color:#fff; font-size:.94rem; }
.membership-hub-summary__card em { color:rgba(255,255,255,.68); font-size:.63rem; font-style:normal; }
.membership-section-nav { position:sticky; top:var(--appbar-h); z-index:20; padding:14px 0; border-bottom:1px solid rgba(198,216,210,.8); background:rgba(248,251,250,.9); backdrop-filter:blur(14px); }
.membership-section-nav .container { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.membership-section-nav a { min-width:0; padding:12px 15px; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; align-items:center; color:var(--ink-700); border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:var(--shadow-xs); }
.membership-section-nav a > .ic { grid-row:1/-1; color:var(--brand-600); }
.membership-section-nav a span,.membership-section-nav a small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.membership-section-nav a span { font-size:.8rem; font-weight:800; }
.membership-section-nav a small { color:var(--ink-500); font-size:.64rem; }
.membership-growth-section { scroll-margin-top:150px; background:linear-gradient(180deg,#f5faf8,#fff); }
.membership-plans-section { scroll-margin-top:150px; background:linear-gradient(180deg,#f3f7f6,#fafcfb); }
.membership-section-head { margin-bottom:28px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.membership-section-head > div { max-width:760px; }
.membership-section-head h2 { margin:7px 0 8px; font-size:clamp(1.8rem,3.6vw,2.75rem); letter-spacing:-.045em; }
.membership-section-head p { margin:0; color:var(--ink-500); }
.membership-section-head--center { justify-content:center; text-align:center; }
.membership-package-group-head { margin:24px 0 16px; padding:15px 17px; display:flex; align-items:center; justify-content:space-between; gap:18px; border:1px solid var(--brand-100); border-radius:17px; background:var(--brand-50); }
.membership-package-group-head > div { display:flex; align-items:center; gap:11px; }
.membership-package-group-head > div > span { width:42px; height:42px; display:grid; place-items:center; flex:none; color:#fff; border-radius:13px; background:var(--brand-600); }
.membership-package-group-head strong,.membership-package-group-head small { display:block; }
.membership-package-group-head small { color:var(--ink-500); }
.membership-package-group-head p { max-width:540px; margin:0; color:var(--ink-500); font-size:.74rem; text-align:right; }
.membership-package-group-head--monthly { margin-top:38px; border-color:#ead9b8; background:#fffaf0; }
.membership-package-group-head--monthly > div > span { color:#fff; background:#a97522; }
.membership-growth-grid { display:grid; gap:18px; align-items:stretch; }
.membership-growth-grid--launch { grid-template-columns:repeat(3,minmax(0,1fr)); }
.membership-growth-grid--monthly { width:min(100%,900px); margin-inline:auto; grid-template-columns:repeat(2,minmax(0,1fr)); }
.membership-growth-card { --package-color:var(--brand-600); position:relative; min-width:0; padding:24px; display:flex; flex-direction:column; border:1px solid var(--line); border-top:3px solid var(--package-color); border-radius:22px; background:#fff; box-shadow:0 10px 30px rgba(10,54,46,.07); }
.membership-growth-card.is-featured { border-color:var(--package-color); box-shadow:0 20px 48px rgba(11,114,91,.14); }
.membership-growth-card--monthly { background:linear-gradient(155deg,#fff,#fffaf1); }
.membership-growth-card__popular { position:absolute; top:-14px; right:16px; padding:6px 10px; color:#fff; font-size:.62rem; font-weight:850; letter-spacing:.05em; text-transform:uppercase; border-radius:999px; background:var(--package-color); }
.membership-growth-card__badge { color:var(--package-color); font-size:.65rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.membership-growth-card h3 { margin:8px 0 4px; font-size:1.4rem; }
.membership-growth-card > p { min-height:42px; margin:0; color:var(--ink-500); font-size:.78rem; }
.membership-growth-card__price { margin:18px 0; display:flex; align-items:baseline; gap:6px; }
.membership-growth-card__price strong { color:var(--ink-900); font:850 1.65rem/1 var(--font-display); letter-spacing:-.04em; }
.membership-growth-card__price span { color:var(--ink-500); font-size:.68rem; }
.membership-growth-card__features { display:grid; gap:9px; flex:1; }
.membership-growth-card__features > div { display:flex; align-items:flex-start; gap:8px; color:var(--ink-600); font-size:.74rem; line-height:1.4; }
.membership-growth-card__features .ic { margin-top:1px; flex:none; color:var(--package-color); }
.membership-growth-card > .btn { margin-top:22px; }
.membership-growth-note { width:min(100%,900px); margin:18px auto 0; padding:14px 16px; display:flex; align-items:flex-start; gap:9px; color:#80500d; font-size:.75rem; border:1px solid #ead9b8; border-radius:15px; background:#fffaf0; }
.membership-pricing-grid .price-card { padding:clamp(22px,3vw,32px); border-radius:22px; }
.membership-pricing-grid .price-card h3 { margin:10px 0 3px; font-size:1.45rem; }

@media (max-width:980px) {
  .membership-hub-hero__panel { grid-template-columns:minmax(0,1fr); }
  .membership-hub-summary { max-width:660px; }
  .membership-growth-grid--launch { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .membership-growth-grid--launch .membership-growth-card:last-child { grid-column:1/-1; width:min(100%,560px); justify-self:center; }
}

@media (max-width:680px) {
  .membership-hub-hero { padding:0; }
  .membership-hub-hero .container { padding:0; }
  .membership-hub-hero__panel { padding:30px 18px 28px; gap:24px; border-radius:0 0 28px 28px; }
  .membership-hub-hero h1 { margin-top:15px; font-size:clamp(2.15rem,11vw,3.1rem); }
  .membership-hub-hero__actions { display:grid; grid-template-columns:minmax(0,1fr); }
  .membership-hub-summary { grid-template-columns:minmax(0,1fr); }
  .membership-hub-summary__card--wide { grid-column:auto; }
  .membership-section-nav { top:var(--appbar-h-mobile); padding:9px 0; }
  .membership-section-nav .container { padding-inline:12px; gap:7px; }
  .membership-section-nav a { padding:10px; column-gap:7px; }
  .membership-section-nav a small { display:none; }
  .membership-section-head { align-items:flex-start; flex-direction:column; }
  .membership-section-head .btn { width:100%; }
  .membership-package-group-head { align-items:flex-start; flex-direction:column; }
  .membership-package-group-head p { text-align:left; }
  .membership-growth-grid--launch,.membership-growth-grid--monthly { grid-template-columns:minmax(0,1fr); }
  .membership-growth-grid--launch .membership-growth-card:last-child { grid-column:auto; width:100%; }
  .membership-growth-card { padding:22px 18px; }
  .membership-growth-card > p { min-height:0; }
  .membership-pricing-grid .price-card { padding:22px 18px; }
}
.card-page, .ticket-page, .certificate-page { min-height: 100svh; padding: 28px 16px; display: grid; place-items: center; background: radial-gradient(circle at 20% 10%, rgba(168,227,207,.7), transparent 32%), linear-gradient(145deg, #edf6f3, #f7f8f4); }
.digital-card, .event-ticket, .certificate { width: min(100%, 480px); padding: clamp(22px, 5vw, 34px); overflow: hidden; color: var(--ink-700); border: 1px solid rgba(207,219,215,.9); border-radius: 28px; background: rgba(255,255,255,.96); box-shadow: var(--shadow-lg); text-align: center; }
.digital-card__top, .event-ticket__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; color: var(--ink-500); font-size: .72rem; }
.digital-card__logo { width: 92px; height: 92px; margin: 0 auto 14px; object-fit: cover; border: 4px solid #fff; border-radius: 25px; box-shadow: var(--shadow); background: var(--surface-2); }
.digital-card__owner { margin: 15px 0; font-weight: 800; }
.digital-card__links { margin: 18px 0; display: grid; gap: 8px; }
.digital-card__links a { min-height: 44px; padding: 9px 13px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 13px; background: var(--brand-50); font-weight: 700; }
.digital-card__qr, .ticket-qr { width: 190px; height: 190px; margin: 18px auto; padding: 8px; object-fit: contain; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.event-ticket .grid > div { display: grid; gap: 2px; }
.event-ticket .grid strong { display: block; }
.certificate { width: min(100%, 820px); }
.certificate__border { padding: clamp(22px, 5vw, 48px); border: 2px solid var(--gold-400); outline: 1px solid #f0d8a7; outline-offset: -9px; border-radius: 20px; }
.certificate__meta { margin: 24px 0 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--ink-500); font-size: .78rem; }
.invoice-page { min-height: 100svh; padding: 28px 16px; background: var(--page-bg); }
.invoice { width: min(100%, 860px); margin: 0 auto; padding: clamp(22px, 5vw, 44px); overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.invoice .table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; }
.invoice .table th, .invoice .table td { padding: 11px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.invoice .table th:first-child, .invoice .table td:first-child { width: 66%; overflow-wrap: anywhere; white-space: normal; }
.invoice .table .right { text-align: right; }
.success-state { width: min(100%, 680px); margin: clamp(40px, 9vw, 100px) auto; padding: clamp(28px, 6vw, 54px); }
.success-state__icon { width: 82px; height: 82px; margin: 0 auto 18px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: linear-gradient(135deg, var(--brand-700), var(--brand-400)); box-shadow: var(--shadow-brand); }

@media (max-width:899px) {
  .sticky-card { position: static; }
  .message-shell { min-height: 0; grid-template-columns: 280px minmax(0, 1fr); }
  .profile-hero__cover { max-height: 180px; }
  .profile-hero__cover > img { height: 180px !important; }
}

.admin-content form > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.admin-content form > select,
.admin-content form > textarea { width: 100%; min-height: 44px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); }
.admin-content form > textarea { min-height: 90px; resize: vertical; }
.admin-content form > input:focus,
.admin-content form > select:focus,
.admin-content form > textarea:focus { outline: 0; border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(21,154,122,.13); }

@media (max-width:760px) {
  .profile-hero__body { padding: 0 16px 17px; }
  .profile-hero__top { margin-top: -34px; gap: 12px; flex-wrap: nowrap; }
  .profile-hero__logo { width: 76px; height: 76px; border-width: 3px; border-radius: 20px; }
  .profile-hero__top > div { padding-top: 39px !important; }
  .profile-hero__identity h1, .profile-hero__name h1 { font-size: 1.08rem; line-height: 1.2; }
  .profile-hero__identity p { font-size: .76rem; line-height: 1.35; }
  .profile-dashboard-hero .profile-hero__cover { height: 136px !important; }
  .profile-dashboard-hero .profile-hero__top { margin-top: -30px; }
  .profile-checklist { grid-template-columns: minmax(0, 1fr); }
  .message-shell { display: block; }
  .thread-list { max-height: 360px; overflow-y: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .conversation-empty { min-height: 310px; }
  .notification-row { padding: 14px; }
  .notification-row .flex.justify-between { align-items: flex-start; gap: 4px; flex-direction: column; }
  .admin-nav { scrollbar-width: none; }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-filters { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .admin-filters .field { width: 100%; }
  .admin-filters .btn { width: 100%; }
  .card-page, .ticket-page, .certificate-page { padding: 14px; }
  .digital-card, .event-ticket, .certificate { padding: 20px; border-radius: 23px; }
}

@media (max-width:420px) {
  .profile-hero__top { align-items: flex-end; }
  .profile-hero__logo { width: 68px; height: 68px; border-radius: 18px; }
  .profile-hero__identity h1, .profile-hero__name h1 { font-size: 1rem; }
  .profile-hero__identity p { font-size: .7rem; }
  .digital-card .flex.no-print, .event-ticket .no-print, .success-state > .flex { width: 100%; flex-direction: column; }
  .digital-card .flex.no-print .btn, .success-state > .flex .btn { width: 100%; }
  .invoice { padding: 18px; border-radius: 18px; }
  .invoice header { gap: 12px; flex-direction: column; }
  .invoice header .right { text-align: left; }
}

@media (prefers-reduced-motion:reduce) { .btn-ripple { display:none; } }

/* ============================================================
   BUSINESS MARKETPLACE DETAIL PAGES
   Clear commercial hierarchy, supplier identity and conversion actions.
   ============================================================ */
.marketplace-detail {
  min-height: calc(100svh - var(--header-h));
  background:
    radial-gradient(circle at 92% 4%, rgba(168,227,207,.35), transparent 24rem),
    linear-gradient(180deg, #f7fbf9 0, var(--page-bg) 34rem);
}
.marketplace-crumbs {
  margin-bottom: 18px;
  padding: 0 2px;
  color: var(--ink-500);
  font-size: .82rem;
}
.marketplace-crumbs a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-700);
  font-weight: 750;
}
.marketplace-crumbs > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opportunity-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 370px);
  gap: 24px;
  align-items: start;
}
.opportunity-layout__main,
.opportunity-layout__side { min-width: 0; }
.opportunity-layout__side {
  --gap: 16px;
  position: sticky;
  top: calc(var(--header-h) + 20px);
}

.opportunity-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(96,174,149,.32);
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 4%, rgba(110,207,178,.34), transparent 19rem),
    linear-gradient(145deg, #fff 10%, #f2faf7 100%);
  box-shadow: 0 18px 48px rgba(12,47,40,.08), inset 0 1px rgba(255,255,255,.8);
}
.opportunity-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 220px;
  height: 220px;
  top: -115px;
  right: -70px;
  border: 42px solid rgba(255,255,255,.38);
  border-radius: 50%;
}
.opportunity-hero--need {
  background:
    radial-gradient(circle at 92% 4%, rgba(232,200,131,.26), transparent 19rem),
    linear-gradient(145deg, #fff 10%, #faf8f1 100%);
}
.opportunity-hero__body { padding: clamp(24px, 4.2vw, 48px); }
.opportunity-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}
.opportunity-hero__badges,
.opportunity-hero__actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.opportunity-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 11px;
  color: var(--brand-700);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
  border: 1px solid rgba(110,207,178,.42);
  border-radius: 999px;
  background: rgba(238,250,245,.9);
}
.opportunity-hero--need .opportunity-type {
  color: #8b5d15;
  border-color: rgba(217,172,82,.32);
  background: rgba(253,243,224,.88);
}
.opportunity-hero h1 {
  max-width: 19ch;
  margin: 0;
  font-size: clamp(2rem, 4.2vw, 3.55rem);
  line-height: 1.08;
  letter-spacing: -.05em;
  overflow-wrap: anywhere;
}
.opportunity-hero__subtitle {
  max-width: 55ch;
  margin: 16px 0 0;
  color: var(--ink-600);
  font-size: clamp(1.02rem, 1.8vw, 1.22rem);
  line-height: 1.55;
}
.opportunity-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 30px;
}
.opportunity-fact {
  min-width: 0;
  min-height: 72px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(203,219,213,.72);
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 1px rgba(255,255,255,.9);
}
.opportunity-fact__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--brand-700);
  border-radius: 12px;
  background: var(--brand-50);
}
.opportunity-hero--need .opportunity-fact__icon { color: #936419; background: var(--warn-50); }
.opportunity-fact__copy { min-width: 0; display: block; }
.opportunity-fact__copy small,
.opportunity-fact__copy strong { display: block; }
.opportunity-fact__copy small {
  margin-bottom: 2px;
  color: var(--ink-500);
  font-size: .68rem;
  font-weight: 650;
}
.opportunity-fact__copy strong {
  color: var(--ink-800);
  font-size: .85rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.opportunity-copy {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(198,216,210,.72);
}
.opportunity-copy h2 { margin-bottom: 10px; font-size: 1.12rem; }
.opportunity-copy .prose { color: var(--ink-700); font-size: .98rem; line-height: 1.8; }

.opportunity-cta,
.seller-card,
.opportunity-gallery {
  border-color: rgba(173,202,192,.52);
  border-radius: 22px;
  box-shadow: 0 14px 38px rgba(12,47,40,.07), inset 0 1px rgba(255,255,255,.8);
}
.opportunity-cta { --gap: 13px; padding: 24px; }
.opportunity-cta h2 { margin: 2px 0 6px; font-size: 1.3rem; line-height: 1.25; }
.opportunity-cta p { color: var(--ink-500); font-size: .84rem; line-height: 1.55; }
.opportunity-cta__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 3px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
  box-shadow: var(--shadow-brand);
}
.opportunity-cta--owner {
  background: radial-gradient(circle at 95% 0, rgba(110,207,178,.3), transparent 12rem), #fff;
}
.opportunity-price {
  margin: 2px 0 5px;
  padding: 13px 15px;
  border: 1px solid var(--brand-100);
  border-radius: 15px;
  background: var(--brand-50);
}
.opportunity-price small,
.opportunity-price strong { display: block; }
.opportunity-price small { color: var(--brand-700); font-size: .7rem; font-weight: 700; }
.opportunity-price strong { margin-top: 2px; color: var(--brand-900); font: 800 1.2rem/1.25 var(--font-display); }
.opportunity-privacy {
  margin: 0 !important;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: .7rem !important;
}
.opportunity-privacy .ic { margin-top: 2px; color: var(--brand-600); }
.opportunity-form-row { gap: 10px; }

.seller-card { padding: 21px; }
.seller-card__identity {
  min-width: 0;
  margin-top: 6px;
  padding: 11px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
  transition: border-color var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
.seller-card__identity:hover { color: var(--brand-700); border-color: var(--brand-200); background: var(--brand-50); transform: translateY(-1px); }
.seller-card__identity img {
  width: 46px;
  height: 46px;
  flex: none;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.seller-card__identity > span:not(.logo-tile) { min-width: 0; flex: 1; }
.seller-card__identity > span:not(.logo-tile) strong,
.seller-card__identity > span:not(.logo-tile) small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seller-card__identity strong { font-size: .88rem; }
.seller-card__identity small { margin-top: 2px; color: var(--ink-500); font-size: .7rem; }
.seller-card__trust {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--brand-700);
}
.seller-card__trust .ic { margin-top: 2px; }
.seller-card__trust span { min-width: 0; }
.seller-card__trust strong,
.seller-card__trust small { display: block; }
.seller-card__trust strong { font-size: .76rem; }
.seller-card__trust small { margin-top: 2px; color: var(--ink-500); font-size: .68rem; line-height: 1.4; }
.opportunity-gallery .section-head { margin-bottom: 15px; }
.opportunity-gallery .section-head h2 { margin: 0; font-size: 1.18rem; }
.opportunity-gallery .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.opportunity-gallery .gallery-grid img { min-height: 180px; border-radius: 16px; }
.opportunity-responses { margin-top: 40px; }
.proposal-card__price { color: var(--brand-700); font-size: 1.05rem; font-weight: 800; }
.proposal-card__action { display: flex; gap: 8px; }
.proposal-card__action .select { min-width: 0; flex: 1; }

@media (max-width: 980px) {
  .opportunity-layout { grid-template-columns: minmax(0, 1fr); }
  .opportunity-layout__side { position: static; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); align-items: start; }
}
@media (max-width: 700px) {
  .marketplace-detail { padding-top: 20px; }
  .marketplace-detail > .container { padding-inline: 14px; }
  .marketplace-crumbs { margin-bottom: 12px; }
  .opportunity-layout { gap: 14px; }
  .opportunity-layout__side { display: flex; }
  .opportunity-hero { border-radius: 22px; }
  .opportunity-hero__body { padding: 22px 18px; }
  .opportunity-hero__top { margin-bottom: 17px; }
  .opportunity-hero__actions { width: 100%; }
  .opportunity-hero__actions .btn { width: 100%; }
  .opportunity-hero h1 { max-width: none; font-size: clamp(1.72rem, 8.4vw, 2.35rem); letter-spacing: -.045em; }
  .opportunity-hero__subtitle { margin-top: 12px; font-size: .97rem; }
  .opportunity-facts { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 23px; }
  .opportunity-fact { min-height: 66px; padding: 11px 12px; }
  .opportunity-copy { margin-top: 23px; padding-top: 21px; }
  .opportunity-copy .prose { font-size: .92rem; line-height: 1.72; }
  .opportunity-cta,
  .seller-card { padding: 19px; border-radius: 20px; }
  .opportunity-form-row { grid-template-columns: minmax(0, 1fr); }
  .opportunity-gallery .gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .opportunity-gallery .gallery-grid img { min-height: 0; }
  .opportunity-responses .grid--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .opportunity-type { font-size: .66rem; letter-spacing: .075em; }
  .opportunity-hero__top { flex-direction: column; }
  .proposal-card__action { flex-direction: column; }
  .proposal-card__action .btn { width: 100%; }
}

.product-detail-layout { gap: 24px; }
.product-gallery--business,
.product-copy-card,
.product-purchase-card > .card {
  border-color: rgba(173,202,192,.52);
  border-radius: 22px;
  box-shadow: 0 14px 38px rgba(12,47,40,.07), inset 0 1px rgba(255,255,255,.8);
}
.product-gallery__stage {
  min-height: 420px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 17px;
  background: radial-gradient(circle at 80% 10%, rgba(168,227,207,.4), transparent 40%), linear-gradient(145deg,#f7faf9,#edf5f2);
}
.product-gallery__stage .product-main { max-height: 560px; background: transparent; }
.product-copy-card h2 { margin-bottom: 12px; }
.product-purchase-card h1 {
  margin: 20px 0 12px;
  font-size: clamp(1.75rem, 2.7vw, 2.4rem);
  line-height: 1.13;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
.product-detail-price {
  color: var(--brand-700);
  font: 800 clamp(1.25rem, 2.2vw, 1.7rem)/1.25 var(--font-display);
}
.product-facts { display: grid; gap: 8px; margin-top: 20px; }
.product-facts .opportunity-fact { min-height: 66px; }
.product-purchase-card .logo-tile { width: 46px; height: 46px; border-radius: 14px; }
.related-marketplace .section-head { align-items: end; }

@media (max-width: 916px) {
  .product-detail-layout > div.stack { order: 2; }
  .product-detail-layout > aside { order: 1; position: static; }
  .product-purchase-card > .card { padding: clamp(20px, 4vw, 30px); }
  .product-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .product-gallery__stage { min-height: 280px; }
  .product-detail-page .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-facts { grid-template-columns: minmax(0, 1fr); }
  .related-marketplace .section-head { align-items: flex-start; }
}
@media (max-width: 420px) {
  .product-detail-page .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   DIGITAL GROWTH SERVICES
   Website launch packages + sustainable monthly marketing.
   ============================================================ */
.growth-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(54px, 8vw, 104px) 0;
  color: #fff;
  background:
    radial-gradient(circle at 78% 15%, rgba(53,180,146,.34), transparent 24rem),
    radial-gradient(circle at 20% 110%, rgba(201,144,47,.2), transparent 26rem),
    linear-gradient(135deg, #062d26 0%, #0a4e40 52%, #073a30 100%);
}
.growth-hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.1;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(90deg,transparent,#000 45%,#000);
}
.growth-hero__grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); gap:clamp(36px,7vw,84px); align-items:center; }
.growth-hero__copy { max-width:720px; }
.growth-kicker {
  display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:6px 11px;
  color:var(--brand-700); font-size:.7rem; font-weight:850; letter-spacing:.11em; text-transform:uppercase;
  border:1px solid var(--brand-200); border-radius:999px; background:var(--brand-50);
}
.growth-kicker--light { color:#d9fff1; border-color:rgba(168,227,207,.3); background:rgba(255,255,255,.08); }
.growth-hero h1 { max-width:13ch; margin:20px 0 18px; color:#fff; font-size:clamp(2.55rem,5.8vw,5.2rem); line-height:.98; letter-spacing:-.065em; }
.growth-hero h1 span { color:#8de1c6; }
.growth-hero__copy > p { max-width:62ch; color:rgba(235,255,248,.76); font-size:clamp(1rem,1.7vw,1.18rem); line-height:1.7; }
.growth-hero__tamil { color:#fff !important; font-weight:650; }
.growth-hero__actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.growth-hero .btn--ghost { --btn-bg:rgba(255,255,255,.08); --btn-fg:#fff; --btn-border:rgba(255,255,255,.22); backdrop-filter:blur(10px); }
.growth-trust-row { display:flex; gap:10px 20px; flex-wrap:wrap; margin-top:26px; color:rgba(235,255,248,.72); font-size:.75rem; font-weight:650; }
.growth-trust-row span { display:inline-flex; align-items:center; gap:6px; }
.growth-trust-row .ic { color:#83dabc; }

.growth-hero__visual { position:relative; min-height:470px; }
.growth-ai-core {
  position:absolute; left:50%; top:50%; width:200px; height:200px; padding:30px; display:grid; place-items:center; text-align:center;
  transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.25); border-radius:50%;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.26),transparent 38%),linear-gradient(145deg,#159a7a,#075444);
  box-shadow:0 30px 80px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.25);
}
.growth-ai-core::before,.growth-ai-core::after { content:""; position:absolute; inset:-38px; border:1px solid rgba(168,227,207,.18); border-radius:50%; }
.growth-ai-core::after { inset:-78px; border-style:dashed; }
.growth-ai-core > span { width:52px; height:52px; display:grid; place-items:center; border-radius:17px; background:rgba(255,255,255,.13); }
.growth-ai-core strong,.growth-ai-core small { display:block; }
.growth-ai-core strong { font:800 1.2rem/1.1 var(--font-display); }
.growth-ai-core small { color:rgba(255,255,255,.65); font-size:.66rem; }
.growth-orbit { position:absolute; z-index:2; width:112px; height:86px; display:grid; place-items:center; color:#d8fff2; font-size:.7rem; font-weight:750; border:1px solid rgba(255,255,255,.18); border-radius:23px; background:rgba(255,255,255,.09); backdrop-filter:blur(12px); box-shadow:0 16px 38px rgba(0,0,0,.14); }
.growth-orbit--website { left:1%; top:13%; }
.growth-orbit--social { right:0; top:16%; }
.growth-orbit--leads { right:5%; bottom:8%; }
.growth-visual-card { position:absolute; left:0; bottom:6%; z-index:3; min-width:180px; padding:17px 19px; border:1px solid rgba(255,255,255,.2); border-radius:20px; background:rgba(255,255,255,.1); backdrop-filter:blur(14px); box-shadow:0 18px 42px rgba(0,0,0,.16); }
.growth-visual-card span,.growth-visual-card strong,.growth-visual-card small { display:block; }
.growth-visual-card span,.growth-visual-card small { color:rgba(255,255,255,.64); font-size:.68rem; }
.growth-visual-card strong { margin:3px 0; color:#fff; font:800 1.55rem/1.2 var(--font-display); }

.growth-packages { background:linear-gradient(180deg,#f6fbf9,#fff); }
.growth-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; }
.growth-section-head > div { max-width:760px; }
.growth-section-head h2 { margin-bottom:8px; font-size:clamp(1.75rem,3.4vw,2.65rem); }
.growth-section-head p { margin:0; color:var(--ink-500); }
.growth-billing-chip { flex:none; padding:8px 13px; color:var(--brand-700); font-size:.74rem; font-weight:800; border:1px solid var(--brand-200); border-radius:999px; background:var(--brand-50); }
.growth-billing-chip--gold { color:#8d5c12; border-color:#ecd7ae; background:var(--warn-50); }
.growth-package-grid { display:grid; gap:20px; align-items:start; }
.growth-package-grid--launch { grid-template-columns:repeat(3,minmax(0,1fr)); }
.growth-package-grid--monthly { width:min(100%,900px); margin-inline:auto; grid-template-columns:repeat(2,minmax(0,1fr)); }
.growth-package-card {
  position:relative; min-width:0; padding:26px; display:flex; flex-direction:column; gap:20px;
  border:1px solid rgba(179,202,194,.66); border-top:4px solid var(--package-color); border-radius:24px; background:#fff;
  box-shadow:0 14px 40px rgba(12,47,40,.07); transition:transform .22s ease,box-shadow .22s ease;
}
.growth-package-card:hover { transform:translateY(-4px); box-shadow:0 22px 52px rgba(12,47,40,.12); }
.growth-package-card.is-featured { border-color:color-mix(in srgb,var(--package-color) 48%,#dce8e4); box-shadow:0 24px 58px rgba(7,116,92,.15); }
.growth-package-card__popular { position:absolute; right:18px; top:-15px; padding:6px 11px; color:#fff; font-size:.67rem; font-weight:850; letter-spacing:.05em; text-transform:uppercase; border-radius:999px; background:var(--package-color); box-shadow:0 8px 20px color-mix(in srgb,var(--package-color) 28%,transparent); }
.growth-package-card__badge { color:var(--package-color); font-size:.68rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.growth-package-card h3 { margin:8px 0 6px; font-size:1.55rem; }
.growth-package-card__top > p { min-height:50px; margin:0; color:var(--ink-500); font-size:.84rem; line-height:1.55; }
.growth-package-card__price { margin-top:18px; display:flex; align-items:baseline; gap:7px; }
.growth-package-card__price strong { color:var(--ink-900); font:850 2rem/1 var(--font-display); letter-spacing:-.04em; }
.growth-package-card__price span { color:var(--ink-500); font-size:.75rem; }
.growth-package-card__highlights { display:grid; gap:10px; }
.growth-package-card__highlights > div { display:flex; align-items:flex-start; gap:8px; color:var(--ink-700); font-size:.8rem; line-height:1.45; }
.growth-package-card__highlights .ic { margin-top:2px; color:var(--package-color); }
.growth-package-details { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.growth-package-details summary { padding:13px 0; display:flex; justify-content:space-between; align-items:center; color:var(--brand-700); font-size:.78rem; font-weight:750; cursor:pointer; list-style:none; }
.growth-package-details summary::-webkit-details-marker { display:none; }
.growth-package-details[open] summary .ic { transform:rotate(180deg); }
.growth-package-details__group { padding:4px 0 13px; }
.growth-package-details__group > strong { color:var(--ink-800); font-size:.78rem; }
.growth-package-details__group ul { margin:6px 0 0; color:var(--ink-500); font-size:.73rem; }
.growth-monthly-group > strong { display:block; margin-bottom:10px; color:var(--ink-800); font-size:.8rem; }
.growth-package-card > .btn { margin-top:auto; }
.growth-scope-note { margin-top:24px; padding:19px 22px; display:flex; align-items:flex-start; gap:13px; color:var(--brand-800); border:1px solid var(--brand-100); border-radius:19px; background:var(--brand-50); }
.growth-scope-note > span { width:42px; height:42px; display:grid; place-items:center; flex:none; color:#fff; border-radius:13px; background:var(--brand-600); }
.growth-scope-note p { margin:3px 0 0; color:var(--ink-600); font-size:.82rem; }

.growth-monthly-section { background:#fff; }
.growth-package-card--monthly { border-top-color:var(--package-color); background:linear-gradient(160deg,#fff,#fffcf5); }
.growth-ad-note { width:min(100%,900px); margin:22px auto 0; padding:14px 17px; display:flex; align-items:flex-start; gap:10px; color:#80500d; font-size:.8rem; border:1px solid #ecd7ae; border-radius:15px; background:var(--warn-50); }

.growth-ai-section { color:#fff; background:linear-gradient(135deg,#071f1b,#0a4e40); }
.growth-ai-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.8fr); gap:clamp(34px,7vw,80px); align-items:center; }
.growth-ai-copy h2 { margin:18px 0 12px; color:#fff; font-size:clamp(2rem,4vw,3.4rem); letter-spacing:-.05em; }
.growth-ai-copy > p { color:rgba(235,255,248,.7); font-size:1rem; }
.growth-ai-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }
.growth-ai-tags span { padding:7px 10px; color:#d8fff2; font-size:.7rem; font-weight:650; border:1px solid rgba(168,227,207,.2); border-radius:999px; background:rgba(255,255,255,.06); }
.growth-ai-panel { padding:22px; border:1px solid rgba(255,255,255,.16); border-radius:24px; background:rgba(255,255,255,.07); box-shadow:0 24px 60px rgba(0,0,0,.2); backdrop-filter:blur(14px); }
.growth-ai-panel__head { display:flex; align-items:center; gap:11px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.12); }
.growth-ai-panel__head > span { width:45px; height:45px; display:grid; place-items:center; color:#083c32; border-radius:14px; background:#8de1c6; }
.growth-ai-panel__head strong,.growth-ai-panel__head small { display:block; }
.growth-ai-panel__head small { color:rgba(255,255,255,.55); }
.growth-ai-recommendation { padding:13px 0; display:flex; gap:12px; }
.growth-ai-recommendation > span { width:32px; height:32px; display:grid; place-items:center; flex:none; color:#8de1c6; font-size:.72rem; font-weight:800; border:1px solid rgba(141,225,198,.22); border-radius:10px; background:rgba(141,225,198,.08); }
.growth-ai-recommendation strong { font-size:.86rem; }
.growth-ai-recommendation p { margin:3px 0 0; color:rgba(255,255,255,.58); font-size:.74rem; line-height:1.45; }

.growth-services-section { background:linear-gradient(180deg,#f7faf9,#fff); }
.growth-service-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.growth-service-card { min-width:0; padding:20px; border:1px solid rgba(179,202,194,.6); border-radius:19px; background:#fff; box-shadow:0 8px 24px rgba(12,47,40,.05); }
.growth-service-card > span { width:43px; height:43px; display:grid; place-items:center; color:var(--brand-700); border-radius:14px; background:var(--brand-50); }
.growth-service-card h3 { margin:14px 0 6px; font-size:.95rem; }
.growth-service-card p { margin:0; color:var(--ink-500); font-size:.76rem; line-height:1.5; }

.growth-request-section { background:radial-gradient(circle at 12% 5%,rgba(168,227,207,.35),transparent 24rem),linear-gradient(145deg,#eff8f5,#f8faf8); }
.growth-request-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(460px,1.2fr); gap:clamp(28px,6vw,72px); align-items:start; }
.growth-request-copy { position:sticky; top:92px; }
.growth-request-copy h2 { margin:12px 0; font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-.05em; }
.growth-request-copy > p { color:var(--ink-500); }
.growth-request-steps { display:grid; gap:14px; margin-top:28px; }
.growth-request-steps > div { display:flex; align-items:flex-start; gap:12px; }
.growth-request-steps > div > span { width:34px; height:34px; display:grid; place-items:center; flex:none; color:#fff; font-size:.72rem; font-weight:800; border-radius:11px; background:var(--brand-600); box-shadow:var(--shadow-brand); }
.growth-request-steps p,.growth-request-steps strong,.growth-request-steps small { display:block; margin:0; }
.growth-request-steps small { margin-top:2px; color:var(--ink-500); }
.growth-request-form { --gap:15px; padding:clamp(22px,4vw,34px); border-color:rgba(128,188,168,.5); border-radius:25px; box-shadow:0 22px 56px rgba(12,47,40,.12); }
.growth-request-form h3 { margin:10px 0 0; font-size:1.45rem; }
.growth-service-checks { margin:0; padding:0; border:0; }
.growth-service-checks legend { margin-bottom:8px; color:var(--ink-700); font-size:.82rem; font-weight:700; }
.growth-service-checks > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.growth-service-checks label { min-width:0; min-height:42px; padding:9px 10px; display:flex; align-items:center; gap:8px; color:var(--ink-700); font-size:.76rem; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); cursor:pointer; }
.growth-service-checks input { width:17px; height:17px; flex:none; accent-color:var(--brand-600); }
.growth-form-note { margin:0; display:flex; justify-content:center; gap:6px; color:var(--ink-500); text-align:center; font-size:.7rem; }
.growth-request-guest { padding:clamp(28px,5vw,48px); border-color:rgba(128,188,168,.5); border-radius:25px; box-shadow:0 22px 56px rgba(12,47,40,.12); }
.growth-request-guest__icon { width:58px; height:58px; margin-bottom:18px; display:grid; place-items:center; color:#fff; border-radius:18px; background:linear-gradient(135deg,var(--brand-700),var(--brand-500)); box-shadow:var(--shadow-brand); }
.growth-request-guest h3 { margin:10px 0; font-size:1.5rem; }
.growth-request-guest p { color:var(--ink-500); }
.growth-my-requests { margin-top:56px; }
.growth-request-card { padding:20px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; border-radius:18px; }
.growth-request-card h3 { margin:2px 0; }
.growth-request-card p { margin:0; color:var(--ink-500); font-size:.78rem; }
.growth-request-card__meta { display:flex; align-items:flex-end; flex-direction:column; gap:8px; color:var(--ink-500); font-size:.7rem; }
.growth-request-card__quote { grid-column:1/-1; padding-top:11px; border-top:1px solid var(--line); }
.growth-request-card__quote small,.growth-request-card__quote strong { display:block; }
.growth-request-card__quote small { color:var(--ink-500); }
.growth-request-card__quote strong { color:var(--brand-700); }

@media (max-width:1020px) {
  .growth-hero__grid { grid-template-columns:minmax(0,1fr) 360px; }
  .growth-package-grid--launch { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .growth-package-grid--launch .growth-package-card:last-child { grid-column:1/-1; width:min(100%,580px); justify-self:center; }
  .growth-service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px) {
  .growth-hero__grid,.growth-ai-grid,.growth-request-grid { grid-template-columns:minmax(0,1fr); }
  .growth-hero__copy { max-width:none; }
  .growth-hero h1 { max-width:14ch; }
  .growth-hero__visual { width:min(100%,500px); margin-inline:auto; }
  .growth-section-head { align-items:flex-start; flex-direction:column; }
  .growth-request-copy { position:static; }
}
@media (max-width:680px) {
  .growth-hero { padding:42px 0 48px; }
  .growth-hero__grid { gap:20px; }
  .growth-hero h1 { font-size:clamp(2.3rem,12vw,3.6rem); }
  .growth-hero__actions { display:grid; grid-template-columns:minmax(0,1fr); }
  .growth-hero__visual { min-height:390px; transform:scale(.9); transform-origin:center; }
  .growth-package-grid--launch,.growth-package-grid--monthly { grid-template-columns:minmax(0,1fr); }
  .growth-package-grid--launch .growth-package-card:last-child { grid-column:auto; width:100%; }
  .growth-package-card { padding:22px 19px; border-radius:21px; }
  .growth-package-card__top > p { min-height:0; }
  .growth-service-grid { grid-template-columns:minmax(0,1fr); }
  .growth-service-checks > div,.growth-request-form .grid--2,.growth-my-requests .grid--2 { grid-template-columns:minmax(0,1fr); }
  .growth-request-form { padding:20px 16px; border-radius:21px; }
  .growth-request-card { grid-template-columns:minmax(0,1fr); }
  .growth-request-card__meta { align-items:flex-start; flex-direction:row; justify-content:space-between; }
}
@media (max-width:420px) {
  .growth-hero__visual { min-height:340px; transform:scale(.78); margin-block:-30px; }
  .growth-scope-note { flex-direction:column; }
}

/* ============================================================
   SVG MOTION SYSTEM
   Lightweight brand and network movement with no JavaScript.
   ============================================================ */
.brand__mark:not(img) { position:relative; isolation:isolate; overflow:hidden; }
.brand__letters { position:relative; z-index:2; text-shadow:0 1px 6px rgba(0,45,37,.28); }
.brand__signal { position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.32; color:#d7fff1; }
.brand__signal-ring,.brand__signal-link { vector-effect:non-scaling-stroke; stroke:currentColor; stroke-width:1; }
.brand__signal-ring { stroke-dasharray:6 5; transform-origin:20px 20px; animation:svgBrandOrbit 12s linear infinite; }
.brand__signal-link { stroke-dasharray:28; stroke-dashoffset:28; animation:svgBrandTrace 4.8s ease-in-out infinite; }
.brand__signal-dot { fill:#fff; transform-box:fill-box; transform-origin:center; animation:svgBrandPulse 3.2s ease-in-out infinite; }
.brand__signal-dot--2 { animation-delay:.35s; }
.brand__signal-dot--3 { animation-delay:.7s; }
.brand__signal-dot--4 { animation-delay:1.05s; }
.brand:hover .brand__signal,.brand:focus-visible .brand__signal { opacity:.62; }

.svg-network { width:100%; height:100%; display:block; overflow:visible; color:var(--brand-500); }
.svg-network__grid path { stroke:currentColor; stroke-width:.7; opacity:.1; }
.svg-network__links path { stroke:currentColor; stroke-width:1.5; opacity:.24; vector-effect:non-scaling-stroke; }
.svg-network__flows path {
  stroke:currentColor; stroke-width:2.2; stroke-linecap:round; opacity:.58; vector-effect:non-scaling-stroke;
  stroke-dasharray:.045 .16; animation:svgNetworkFlow 6.5s linear infinite;
}
.svg-network__flows path:nth-child(2) { animation-duration:8s; animation-direction:reverse; }
.svg-network__flows path:nth-child(3) { animation-duration:5.5s; animation-delay:-2s; }
.svg-network__core { fill:currentColor; stroke:rgba(255,255,255,.9); stroke-width:2; vector-effect:non-scaling-stroke; }
.svg-network__halo { fill:currentColor; opacity:.12; transform-box:fill-box; transform-origin:center; animation:svgNetworkPulse 3.6s ease-out infinite; }
.svg-network__orbit {
  fill:none; stroke:currentColor; stroke-width:1.2; stroke-dasharray:5 7; opacity:.38;
  transform-origin:center; transform-box:fill-box; animation:svgNetworkOrbit 10s linear infinite;
}
.svg-network__node--2 .svg-network__halo { animation-delay:.55s; }
.svg-network__node--3 .svg-network__halo { animation-delay:1.1s; }
.svg-network__node--4 .svg-network__halo { animation-delay:1.65s; }
.svg-network__node--5 .svg-network__halo { animation-delay:2.2s; }
.svg-network__node--6 .svg-network__halo { animation-delay:2.75s; }
.svg-network__node { animation:svgNetworkFloat 5.6s ease-in-out infinite; }
.svg-network__node--2,.svg-network__node--4 { animation-delay:-1.8s; }
.svg-network__node--3,.svg-network__node--5 { animation-delay:-3.1s; }

.network-preview > :not(.network-preview__motion,.network-preview__glow) { position:relative; z-index:2; }
.network-preview__motion { position:absolute; inset:8px; z-index:-1; pointer-events:none; opacity:.3; color:var(--brand-500); }
.network-preview:hover .network-preview__motion { opacity:.42; }
.network-preview__motion,.brand__signal { transition:opacity .3s ease; }
.public-hero__ambient { position:absolute; width:620px; height:500px; right:-130px; top:-80px; z-index:0; pointer-events:none; opacity:.09; color:var(--brand-500); transform:rotate(-7deg); }
.marketing-home .hero > .container { position:relative; z-index:1; }

.auth-side__network { position:absolute; width:min(720px,90vw); height:580px; right:-180px; bottom:-100px; z-index:0; pointer-events:none; opacity:.2; color:#9ce7cd; transform:rotate(-8deg); }
.auth-side > *:not(.auth-side__network) { position:relative; z-index:1; }

.growth-hero__network { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.34; color:#8de1c6; }
.growth-hero__visual > :not(.growth-hero__network) { position:absolute; z-index:2; }
.growth-hero__visual .growth-ai-core { z-index:2; }
.growth-hero__visual .growth-visual-card { z-index:3; }
.growth-orbit { animation:svgGrowthFloat 5.2s ease-in-out infinite; }
.growth-orbit--social { animation-delay:-1.7s; }
.growth-orbit--leads { animation-delay:-3.4s; }

@keyframes svgBrandOrbit { to { transform:rotate(360deg); } }
@keyframes svgBrandTrace { 0%,18% { stroke-dashoffset:28; opacity:.25; } 48%,78% { stroke-dashoffset:0; opacity:.85; } 100% { stroke-dashoffset:-28; opacity:.25; } }
@keyframes svgBrandPulse { 0%,100% { transform:scale(.75); opacity:.45; } 50% { transform:scale(1.35); opacity:1; } }
@keyframes svgNetworkFlow { to { stroke-dashoffset:-1; } }
@keyframes svgNetworkPulse { 0% { transform:scale(.65); opacity:.2; } 70%,100% { transform:scale(1.55); opacity:0; } }
@keyframes svgNetworkOrbit { to { transform:rotate(360deg); } }
@keyframes svgNetworkFloat { 0%,100% { translate:0 0; } 50% { translate:0 -5px; } }
@keyframes svgGrowthFloat { 0%,100% { translate:0 0; } 50% { translate:0 -9px; } }

@media (max-width:899px) {
  .network-preview__motion { opacity:.24; }
  .public-hero__ambient { width:500px; height:410px; right:-210px; top:-25px; opacity:.15; }
  .auth-side__network { display:none; }
}
@media (max-width:520px) {
  .public-hero__ambient { width:420px; height:350px; right:-215px; top:10px; opacity:.13; }
}
@media (prefers-reduced-motion:reduce) {
  .brand__signal-ring,.brand__signal-link,.brand__signal-dot,
  .svg-network__flows path,.svg-network__halo,.svg-network__orbit,.svg-network__node,.growth-orbit { animation:none !important; }
  .svg-network__halo { opacity:.12; }
}

/* ============================================================
   UI / UX SYSTEM V3 — shared page, directory, form and console polish
   ============================================================ */
:root {
  --page-bg: #f3f7f5;
  --surface: #ffffff;
  --surface-2: #f7faf9;
  --line: #dfe9e5;
  --line-strong: #cbdad5;
  --shadow-xs: 0 2px 10px rgba(8, 55, 46, .045);
  --shadow-sm: 0 10px 30px rgba(8, 55, 46, .075);
  --shadow: 0 18px 48px rgba(8, 55, 46, .11);
}

html { scroll-padding-top: calc(var(--header-h) + 18px); }
body {
  color: var(--ink-800);
  background:
    radial-gradient(circle at 92% -8%, rgba(142, 224, 195, .2), transparent 28rem),
    var(--page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body:not(.app):not(.admin-body) .app-main { padding-bottom: 0; }
body:not(.app):not(.admin-body) .footer { margin-top: 0; }
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}
:where(a,button,input,select,textarea,summary):focus-visible {
  outline: 3px solid rgba(21, 154, 122, .25);
  outline-offset: 2px;
}
.container { padding-inline: clamp(16px, 3vw, 28px); }
.section { padding-block: clamp(42px, 6vw, 72px); }
.section--compact { padding-block: clamp(28px, 4vw, 48px); }
.card {
  border-color: rgba(203, 218, 213, .82);
  box-shadow: var(--shadow-xs);
}
.card--hover:hover { transform: translateY(-3px); border-color: var(--brand-200); box-shadow: var(--shadow-sm); }

/* Public navigation feels anchored while content scrolls. */
.appbar--public {
  box-shadow: 0 1px 0 rgba(8, 55, 46, .025), 0 8px 28px rgba(8, 55, 46, .035);
}
.appbar--public .appbar__inner { padding-inline: clamp(16px, 3vw, 28px); }
.appbar--public .appbar__join { box-shadow: 0 10px 24px rgba(13, 125, 99, .18); }

/* Shared listing page */
.listing-page { min-width: 0; }
.listing-page.section { padding-top: clamp(26px, 4vw, 46px); }
.listing-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 210px; padding: clamp(26px, 4.5vw, 46px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 28px;
  color: #fff; border: 1px solid rgba(255,255,255,.1); border-radius: 30px;
  background:
    radial-gradient(circle at 84% 20%, rgba(122, 224, 190, .27), transparent 18rem),
    linear-gradient(135deg, #082f29 0%, #075c4c 58%, #0a8067 100%);
  box-shadow: 0 24px 58px rgba(7, 62, 52, .18);
}
.listing-hero::before,.listing-hero::after {
  content: ""; position: absolute; z-index: -1; border: 1px solid rgba(255,255,255,.1); border-radius: 50%;
}
.listing-hero::before { width: 250px; height: 250px; right: -70px; top: -105px; box-shadow: 0 0 0 38px rgba(255,255,255,.025), 0 0 0 78px rgba(255,255,255,.018); }
.listing-hero::after { width: 110px; height: 110px; right: 23%; bottom: -68px; }
.listing-hero__copy { position: relative; z-index: 1; max-width: 760px; }
.listing-hero .eyebrow { display: block; margin-bottom: 9px; color: #aee8d5; font-size: .69rem; letter-spacing: .16em; }
.listing-hero h1 { margin: 0; color: #fff; font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.04; letter-spacing: -.052em; }
.listing-hero__copy > p { max-width: 690px; margin: 12px 0 0; color: rgba(241,255,250,.75); font-size: clamp(.92rem, 1.5vw, 1.05rem); line-height: 1.65; }
.listing-hero__meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
.listing-hero__meta span {
  min-height: 30px; padding: 5px 10px; display: inline-flex; align-items: center; gap: 6px;
  color: rgba(244,255,251,.82); font-size: .7rem; font-weight: 700;
  border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(255,255,255,.075);
  backdrop-filter: blur(8px);
}
.listing-hero__cta { position: relative; z-index: 1; flex: none; color: var(--brand-800) !important; background: #fff !important; border-color: #fff !important; box-shadow: 0 14px 32px rgba(0,0,0,.18) !important; }
.listing-hero__cta:hover { color: var(--brand-900) !important; background: #ecfff8 !important; transform: translateY(-2px); }

.filterbar.filterbar--directory {
  position: relative; z-index: 4; width: calc(100% - clamp(18px, 4vw, 48px)); margin: -22px auto 0; padding: 12px;
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; gap: 10px;
  border: 1px solid rgba(203, 218, 213, .9); border-radius: 20px; background: rgba(255,255,255,.96);
  box-shadow: 0 20px 46px rgba(8, 55, 46, .13); backdrop-filter: blur(18px);
}
.filterbar__fields { min-width: 0; display: grid; grid-template-columns: minmax(220px,1.55fr) repeat(auto-fit,minmax(128px,1fr)); gap: 8px; }
.filter-field { position: relative; min-width: 0; margin: 0; }
.filter-field .select,.filter-field .input {
  width: 100%; min-width: 0; min-height: 48px; margin: 0; font-size: .82rem;
  border-color: transparent; border-radius: 13px; background-color: var(--surface-2);
}
.filter-field .select:hover,.filter-field .input:hover { border-color: var(--line-strong); background-color: #fff; }
.filter-field .select:focus,.filter-field .input:focus { border-color: var(--brand-400); background-color: #fff; }
.filter-field__control { position: relative; display: block; }
.filter-field__control > .ic { position: absolute; left: 13px; top: 50%; z-index: 1; color: var(--ink-400); transform: translateY(-50%); pointer-events: none; }
.filter-field__control .input { padding-left: 40px; }
.filterbar__actions { display: flex; align-items: stretch; gap: 6px; }
.filterbar__actions .btn { min-height: 48px; white-space: nowrap; }
.filterbar__toggle { display: none; }
.listing-toolbar { min-height: 52px; margin-top: 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.listing-toolbar p { margin: 0; color: var(--ink-500); font-size: .79rem; }
.listing-toolbar p strong { color: var(--ink-800); font-size: .86rem; }
.listing-results { gap: 20px; }
.listing-results > * { min-width: 0; }

/* More useful, less wasteful empty states. */
.empty {
  position: relative; overflow: hidden; min-height: 250px; padding: clamp(34px, 6vw, 58px) 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; border: 1px dashed var(--line-strong); border-radius: 24px;
  background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(247,250,249,.92));
}
.empty--listing { min-height: 290px; }
.empty__art { position: relative; width: 92px; height: 92px; margin-bottom: 3px; display: grid; place-items: center; }
.empty__ring { position: absolute; border: 1px solid rgba(21,154,122,.16); border-radius: 50%; }
.empty__ring--outer { inset: 0; border-style: dashed; animation: emptyOrbit 18s linear infinite; }
.empty__ring--inner { inset: 13px; background: rgba(232,248,242,.65); }
.empty__icon {
  position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center;
  color: var(--brand-600); border: 1px solid rgba(21,154,122,.14); border-radius: 18px;
  background: #fff; box-shadow: 0 10px 26px rgba(8, 94, 74, .11);
}
.empty__title { margin: 0; color: var(--ink-900); font-size: clamp(1.1rem, 2vw, 1.28rem); letter-spacing: -.025em; }
.empty__text { max-width: 460px; margin: 0; color: var(--ink-500); font-size: .86rem; line-height: 1.6; }
.empty__actions { margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
@keyframes emptyOrbit { to { transform: rotate(360deg); } }

/* Listing cards share one visual language, including legacy card partials. */
.listing-results .listing,.listing-results > .card {
  height: 100%; border: 1px solid rgba(203,218,213,.8); border-radius: 21px;
  background: rgba(255,255,255,.97); box-shadow: 0 8px 28px rgba(8,55,46,.065);
}
.listing-results .listing:hover,.listing-results > .card:hover { border-color: var(--brand-200); box-shadow: 0 18px 42px rgba(8,55,46,.11); }
.listing__media { background: linear-gradient(145deg, var(--brand-50), #eef3f1); }
.listing__media .thumb { display: block; }
.listing__body { gap: 10px; padding: 18px; }
.listing__title { font-size: 1.02rem; letter-spacing: -.015em; }
.listing__foot { margin-top: auto; }

/* Public legacy indexes inherit the same clean page treatment. */
body:not(.app):not(.admin-body) .section--compact > .container > .page-head {
  padding: clamp(22px, 3.5vw, 34px); align-items: center; border: 1px solid rgba(203,218,213,.78);
  border-radius: 25px; background: linear-gradient(145deg, #fff, #f1f9f6); box-shadow: var(--shadow-sm);
}
body:not(.app):not(.admin-body) .section--compact > .container > .page-head h1 { font-size: clamp(1.75rem, 3vw, 2.35rem); letter-spacing: -.04em; }
body:not(.app):not(.admin-body) .section--compact > .container > .filterbar:not(.filterbar--directory) {
  padding: 12px; border-radius: 18px; box-shadow: var(--shadow-xs);
}
body:not(.app):not(.admin-body) .section--compact > .container > .filterbar:not(.filterbar--directory) .input,
body:not(.app):not(.admin-body) .section--compact > .container > .filterbar:not(.filterbar--directory) .select { min-height: 46px; border-radius: 12px; background: var(--surface-2); }

/* Shared create/edit forms */
.form-page { width: min(100%, 1040px); margin-inline: auto; }
.form-page__head {
  padding: clamp(20px, 3vw, 28px); align-items: center; border: 1px solid rgba(203,218,213,.8);
  border-radius: 24px; background: linear-gradient(145deg,#fff,#f1f9f6); box-shadow: var(--shadow-xs);
}
.form-page__head .eyebrow { display: block; margin-bottom: 5px; }
.form-shell { padding: clamp(20px, 4vw, 34px); border-radius: 24px; box-shadow: var(--shadow-sm); }
.form-shell .grid { gap: 19px; }
.form-shell .field > label:not(.check-row) { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; color: var(--ink-700); font-size: .78rem; font-weight: 720; }
.form-shell :is(.input,.select,.textarea) { min-height: 50px; border-radius: 13px; background: var(--surface-2); }
.form-shell .textarea { min-height: 128px; }
.form-shell :is(.input,.select,.textarea):focus { background: #fff; }
.form-shell .form-actions { margin-top: 4px; }

/* Member portal hierarchy */
.app-v2 .shell__content > .page-head:not(.form-page__head) {
  padding: 20px 22px; align-items: center; border: 1px solid rgba(203,218,213,.75);
  border-radius: 22px; background: linear-gradient(145deg,#fff,#f3f9f7); box-shadow: var(--shadow-xs);
}
.app-v2 .shell__content > .empty { min-height: 250px; }
.app-v2 .filterbar:not(.filterbar--directory) { padding: 11px; border-radius: 17px; box-shadow: var(--shadow-xs); }
.app .listing-page.section { padding: 0; }
.app .listing-page.section > .container { max-width: none; padding: 0; }
.app .listing-hero { min-height: 180px; padding: 28px; border-radius: 25px; }
.app .filterbar.filterbar--directory { width: calc(100% - 28px); }

/* Admin console: clearer hierarchy and denser, calmer data surfaces. */
.admin-topbar { box-shadow: 0 8px 28px rgba(8,55,46,.045); }
.admin-content { max-width: 1680px; width: 100%; }
.admin-content > .page-head {
  padding: 20px 22px; align-items: center; border: 1px solid rgba(203,218,213,.76);
  border-radius: 20px; background: rgba(255,255,255,.88); box-shadow: var(--shadow-xs);
}
.admin-content .table-card { border-radius: 18px; box-shadow: 0 10px 32px rgba(8,55,46,.065); }
.admin-content .data-table th { padding-block: 13px; background: #f4f8f6; }
.admin-content .data-table td { padding-block: 13px; }
.admin-content .data-table tbody tr:last-child td { border-bottom: 0; }
.admin-filters { padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow-xs); }
.admin-stat { min-height: 104px; border-radius: 17px; }

@media (max-width: 899px) {
  .container { padding-inline: clamp(14px, 3vw, 22px); }
  .listing-page.section { padding-top: 22px; }
  .listing-hero { min-height: 196px; padding: 28px 26px 42px; border-radius: 25px; }
  .listing-hero__copy { max-width: 650px; }
  .listing-hero__cta { align-self: flex-start; }
  .filterbar.filterbar--directory { width: calc(100% - 24px); margin-top: -25px; grid-template-columns: minmax(0,1fr); padding: 10px; }
  .filterbar__fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .filter-field--primary { grid-column: 1 / -1; }
  .filterbar__fields > .filter-field:last-child:nth-child(even) { grid-column: 1 / -1; }
  .filterbar__actions { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .filterbar__actions .btn--quiet { padding-inline: 14px; }
  .listing-toolbar { margin-top: 13px; }
  .listing-results { gap: 14px; }
  .app .listing-hero { min-height: 170px; }
}

@media (max-width: 640px) {
  .section--compact { padding-block: 18px 38px; }
  .listing-hero { min-height: 0; padding: 25px 20px 43px; display: block; border-radius: 22px; }
  .listing-hero h1 { font-size: clamp(1.8rem, 9vw, 2.45rem); }
  .listing-hero__copy > p { margin-top: 9px; font-size: .85rem; line-height: 1.55; }
  .listing-hero__meta { margin-top: 14px; }
  .listing-hero__meta span:last-child { display: none; }
  .listing-hero__cta { width: 100%; margin-top: 17px; }
  .filterbar.filterbar--directory { width: calc(100% - 18px); margin-top: -27px; border-radius: 18px; }
  .filterbar__fields { grid-template-columns: minmax(0,1fr); }
  .filter-field--primary { grid-column: auto; }
  .filterbar--directory:not(.is-expanded):not(.has-active-filters) .filter-field:not(.filter-field--primary) { display: none; }
  .filter-field .select,.filter-field .input { min-height: 47px; }
  .filterbar__actions { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
  .filterbar__toggle { display: inline-flex; }
  .filterbar__actions .btn { width: 100%; }
  .filterbar__actions .btn--quiet { grid-column: 1 / -1; }
  .listing-toolbar { min-height: 45px; }
  .listing-toolbar .badge { display: none; }
  .empty,.empty--listing { min-height: 250px; padding: 34px 17px; border-radius: 20px; }
  .empty__actions { width: 100%; }
  .empty__actions .btn { flex: 1 1 160px; }
  .listing-results.grid--4 { grid-template-columns: minmax(0,1fr); }
  body:not(.app):not(.admin-body) .section--compact > .container > .page-head { padding: 20px 18px; border-radius: 21px; }
  body:not(.app):not(.admin-body) .section--compact > .container > .filterbar:not(.filterbar--directory) { grid-template-columns: minmax(0,1fr); }
  body:not(.app):not(.admin-body) .section--compact > .container > .filterbar:not(.filterbar--directory) > * { width: 100%; }
  .form-page__head { padding: 18px; align-items: flex-start; border-radius: 20px; }
  .form-page__head .btn { min-height: 40px; }
  .form-shell { padding: 19px 16px; border-radius: 20px; }
  .app .listing-hero { min-height: 0; padding: 24px 19px 42px; }
  .app .filterbar.filterbar--directory { width: calc(100% - 16px); }
  .admin-content > .page-head { padding: 17px; border-radius: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .empty__ring--outer { animation: none; }
}