.dashboard-page {
  --dashboard-surface: rgb(255 255 255 / 90%);
  --dashboard-surface-strong: rgb(255 255 255 / 96%);
  --dashboard-surface-soft: rgb(248 250 252 / 82%);
  --dashboard-border: rgb(148 163 184 / 18%);
  --dashboard-border-strong: rgb(148 163 184 / 28%);
  --dashboard-shadow: 0 18px 50px rgb(15 23 42 / 9%);
  --dashboard-shadow-soft: 0 10px 30px rgb(15 23 42 / 7%);
  --dashboard-text: #0f172a;
  --dashboard-text-muted: #475569;
  --dashboard-text-soft: #64748b;

  background:
    radial-gradient(circle at top left, rgb(31 58 153 / 12%), transparent 30%),
    radial-gradient(circle at top right, rgb(8 104 64 / 10%), transparent 32%), linear-gradient(180deg, #f8fbff 0%, #eef3fb 100%);
  min-height: 100%;
}

.dashboard-page--labs {
  --dashboard-surface: linear-gradient(180deg, rgb(15 23 42 / 94%), rgb(12 24 44 / 94%));
  --dashboard-surface-strong: rgb(15 23 42 / 86%);
  --dashboard-surface-soft: rgb(15 23 42 / 72%);
  --dashboard-border: rgb(96 165 250 / 18%);
  --dashboard-border-strong: rgb(125 211 252 / 26%);
  --dashboard-shadow: 0 22px 60px rgb(2 8 23 / 32%);
  --dashboard-shadow-soft: 0 14px 34px rgb(2 8 23 / 20%);
  --dashboard-text: #e2e8f0;
  --dashboard-text-muted: rgb(191 219 254 / 88%);
  --dashboard-text-soft: rgb(148 163 184 / 88%);
}

.dashboard-frame {
  padding-block: 1.75rem 3.5rem;
}

.dashboard-frame__inner {
  display: grid;
  gap: 1.25rem;
}

.dashboard-frame__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: fit-content;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgb(148 163 184 / 18%);
  border-radius: 999px;
  background: rgb(255 255 255 / 72%);
  box-shadow: 0 8px 24px rgb(15 23 42 / 5%);
  backdrop-filter: blur(12px);
  font-size: 0.8125rem;
  color: #5b647a;
}

.dashboard-frame__breadcrumb-link {
  color: #1f3a99;
  text-decoration: none;
  font-weight: 600;
}

.dashboard-frame__breadcrumb-link:hover {
  text-decoration: underline;
}

.dashboard-frame__breadcrumb-separator {
  color: #94a3b8;
}

.dashboard-frame__breadcrumb-current {
  color: #1f2937;
  font-weight: 600;
}

.dashboard-frame__hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.75rem;
  border: 1px solid var(--dashboard-border-strong);
  border-radius: 1.5rem;
  background: linear-gradient(145deg, rgb(255 255 255 / 94%), rgb(243 248 255 / 94%));
  box-shadow: var(--dashboard-shadow);
  overflow: hidden;
}

.dashboard-frame__hero::after {
  content: "";
  position: absolute;
  inset: auto -8% -38% auto;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(96 165 250 / 22%), transparent 68%);
  pointer-events: none;
}

.dashboard-page--community .dashboard-frame__hero {
  background: linear-gradient(145deg, rgb(255 255 255 / 95%), rgb(240 249 255 / 95%));
}

.dashboard-page--labs .dashboard-frame__hero {
  background: linear-gradient(145deg, rgb(19 26 41 / 96%), rgb(10 38 76 / 96%));
  border-color: rgb(96 165 250 / 24%);
}

.dashboard-page--labs .dashboard-frame__eyebrow,
.dashboard-page--labs .dashboard-frame__lead {
  color: rgb(191 219 254 / 88%);
}

.dashboard-page--labs .dashboard-frame__title {
  color: #fff;
}

.dashboard-frame__hero-copy {
  max-width: 52rem;
  position: relative;
  z-index: 1;
}

.dashboard-frame__eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #2563eb;
}

.dashboard-frame__title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.05;
  color: #0f172a;
}

.dashboard-frame__lead {
  margin: 0.85rem 0 0;
  max-width: 60ch;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--dashboard-text-muted);
}

.dashboard-frame__hero-meta {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 0.65rem;
  min-width: 11rem;
  position: relative;
  z-index: 1;
}

.dashboard-frame__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 16%);
  background: #1f3a99;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dashboard-frame__pill--subtle {
  background: rgb(15 23 42 / 6%);
  border-color: rgb(148 163 184 / 20%);
  color: #334155;
}

.dashboard-page--labs .dashboard-frame__pill {
  background: #0ea5e9;
  color: #082f49;
}

.dashboard-page--labs .dashboard-frame__pill--subtle {
  background: rgb(255 255 255 / 10%);
  color: rgb(226 232 240 / 88%);
}

.dashboard-frame__nav-stack {
  display: grid;
  gap: 0.85rem;
}

.dashboard-frame__nav-group {
  display: grid;
  gap: 0.7rem;
  padding: 1rem;
  border: 1px solid var(--dashboard-border);
  border-radius: 1.2rem;
  background: rgb(255 255 255 / 76%);
  box-shadow: 0 12px 28px rgb(15 23 42 / 5%);
  backdrop-filter: blur(12px);
}

.dashboard-page--labs .dashboard-frame__nav-group {
  background: rgb(15 23 42 / 74%);
}

.dashboard-frame__nav-label {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dashboard-text-soft);
}

.dashboard-frame__sections,
.dashboard-frame__page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.dashboard-frame__section-link,
.dashboard-frame__page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  border: 1px solid rgb(148 163 184 / 20%);
  background: var(--dashboard-surface-strong);
  color: #334155;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: 0 6px 18px rgb(15 23 42 / 4%);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.dashboard-frame__section-link:hover,
.dashboard-frame__page-link:hover {
  transform: translateY(-1px);
  border-color: rgb(59 130 246 / 40%);
  color: #1d4ed8;
  box-shadow: 0 12px 22px rgb(37 99 235 / 12%);
}

.dashboard-frame__section-link--active,
.dashboard-frame__page-link--active {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  border-color: #0f172a;
  color: #fff;
  box-shadow: 0 14px 28px rgb(15 23 42 / 18%);
}

.dashboard-page--labs .dashboard-frame__section-link,
.dashboard-page--labs .dashboard-frame__page-link {
  background: rgb(15 23 42 / 75%);
  border-color: rgb(96 165 250 / 15%);
  color: rgb(226 232 240 / 82%);
}

.dashboard-page--labs .dashboard-frame__section-link--active,
.dashboard-page--labs .dashboard-frame__page-link--active {
  background: #e0f2fe;
  border-color: #e0f2fe;
  color: #0c4a6e;
}

.dashboard-frame__body {
  display: grid;
  gap: 1.5rem;
}

.dashboard-surface,
.messages-shell,
.network-panel,
.highlights-list,
.chat-shell,
.founder-sandbox,
.bwc-test {
  border: 1px solid var(--dashboard-border);
  border-radius: 1.35rem;
  background: var(--dashboard-surface);
  box-shadow: var(--dashboard-shadow-soft);
  backdrop-filter: blur(14px);
}

.dashboard-page--labs .dashboard-surface,
.dashboard-page--labs .founder-sandbox,
.dashboard-page--labs .bwc-test {
  color: var(--dashboard-text);
}

.app-page-header {
  display: block;
}

.app-page-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--dashboard-border);
  border-radius: 1.15rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(248 250 252 / 92%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%);
}

.app-page-header__title {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--dashboard-text);
}

.app-page-header__desc {
  margin: 0.55rem 0 0;
  max-width: 60ch;
  color: var(--dashboard-text-muted);
  line-height: 1.7;
}

.tier-gate-banner,
.no-profile-gate {
  border: 1px solid transparent;
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: var(--dashboard-shadow-soft);
}

.tier-gate-banner {
  background:
    radial-gradient(circle at top right, rgb(251 191 36 / 26%), transparent 22%), linear-gradient(135deg, #10233f 0%, #173663 100%);
  color: #fff;
}

.tier-gate-banner__inner {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem;
}

.tier-gate-banner__content h2 {
  margin: 0 0 0.45rem;
  font-size: 1.35rem;
  line-height: 1.15;
}

.tier-gate-banner__content p {
  margin: 0;
  color: rgb(226 232 240 / 92%);
  line-height: 1.6;
}

.tier-gate-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  padding: 0.7rem 1rem;
  border-radius: 0.75rem;
  background: #fbbf24;
  color: #1e293b;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 10px 20px rgb(251 191 36 / 18%);
}

.no-profile-gate {
  background: linear-gradient(145deg, #fff 0%, #f8fafc 100%);
  border-color: var(--dashboard-border-strong);
}

.no-profile-gate__inner {
  display: grid;
  justify-items: start;
  gap: 0.85rem;
  padding: 1.6rem;
  text-align: center;
}

.no-profile-gate__heading {
  margin: 0;
  color: var(--dashboard-text);
}

.no-profile-gate__body,
.no-profile-gate__note {
  margin: 0;
  color: var(--dashboard-text-muted);
  line-height: 1.6;
}

.no-profile-gate__note {
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

.tab-bar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--dashboard-border);
  border-radius: 999px;
  background: rgb(241 245 249 / 78%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%);
}

.tab-bar__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.55rem 0.95rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--dashboard-text-muted);
  font-weight: 700;
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.tab-bar__tab--active {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
  box-shadow: 0 12px 22px rgb(15 23 42 / 16%);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
}

.badge--ruby {
  background: #fee2e2;
  color: #b91c1c;
}

.badge--muted {
  background: #e2e8f0;
  color: #475569;
}

.badge--sapphire {
  background: #dbeafe;
  color: #1d4ed8;
}

.badge--emerald {
  background: #dcfce7;
  color: #047857;
}

.messages-shell,
.network-panel,
.highlights-list {
  display: grid;
  gap: 1.1rem;
  padding: 1.5rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 94%), rgb(248 250 252 / 90%));
}

.messages-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.message-list,
.connection-list,
.highlights-grid {
  list-style: none;
  padding: 0;
  margin: 0;
}

.message-list,
.connection-list {
  display: grid;
  gap: 0.75rem;
}

.highlights-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.message-item,
.connection-item,
.highlight-card,
.message-detail,
.modal__inner,
.info-card,
.consent-gate {
  border: 1px solid var(--dashboard-border);
  border-radius: 1rem;
  background: var(--dashboard-surface-strong);
}

.message-item__btn {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.message-item--unread,
.connection-item,
.highlight-card,
.message-detail {
  box-shadow: 0 10px 24px rgb(15 23 42 / 5%);
}

.message-item--unread {
  border-color: rgb(59 130 246 / 28%);
  background: rgb(239 246 255 / 84%);
}

.message-item__from,
.connection-item__name,
.highlight-card__title {
  font-weight: 700;
  color: #0f172a;
}

.message-item__subject,
.message-item__date,
.connection-item__date,
.highlight-card__meta,
.highlight-card__summary,
.pagination__info,
.field-help,
.message-detail__date {
  color: #64748b;
}

.connection-item,
.highlight-card,
.message-detail {
  padding: 1rem 1.1rem;
}

.message-item,
.connection-item,
.highlight-card {
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.message-item:hover,
.connection-item:hover,
.highlight-card:hover {
  transform: translateY(-2px);
  border-color: rgb(96 165 250 / 34%);
  box-shadow: 0 18px 30px rgb(15 23 42 / 8%);
}

.connection-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.connection-item__info,
.connection-item__actions,
.highlight-card__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.highlight-card__header {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.highlight-card__title {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
}

.highlight-card__summary {
  margin: 0 0 1rem;
  line-height: 1.6;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.35rem;
}

.message-detail__body {
  display: grid;
  gap: 0.75rem;
}

.message-detail__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.modal {
  width: min(100%, 42rem);
  padding: 0;
  border: none;
  background: transparent;
}

.modal::backdrop {
  background: rgb(15 23 42 / 56%);
  backdrop-filter: blur(6px);
}

.modal--sm {
  width: min(100%, 28rem);
}

.modal__inner {
  padding: 1.35rem;
  box-shadow: 0 24px 60px rgb(15 23 42 / 18%);
}

.modal__header,
.modal__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.modal__header {
  margin-bottom: 1rem;
}

.modal__title {
  margin: 0;
  color: var(--dashboard-text);
}

.modal__close {
  border: none;
  background: transparent;
  color: #475569;
  cursor: pointer;
}

.modal__form,
.field-group {
  display: grid;
  gap: 0.45rem;
}

.modal__form {
  gap: 1rem;
}

.field-group label {
  font-weight: 700;
  color: var(--dashboard-text);
}

.field-group input,
.field-group textarea,
.field-group select {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--dashboard-border-strong);
  border-radius: 0.85rem;
  background: rgb(255 255 255 / 96%);
  color: var(--dashboard-text);
  font: inherit;
}

.field-group textarea {
  resize: vertical;
}

.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus {
  outline: none;
  border-color: rgb(37 99 235 / 60%);
  box-shadow: 0 0 0 4px rgb(59 130 246 / 12%);
}

.field-error {
  margin: 0;
  font-size: 0.875rem;
  color: #b91c1c;
}

.empty-state,
.message-list__empty,
.connection-list__empty {
  display: grid;
  gap: 0.55rem;
  justify-items: start;
  padding: 1.6rem;
  border: 1px dashed rgb(148 163 184 / 36%);
  border-radius: 1rem;
  background: rgb(248 250 252 / 86%);
}

.info-card,
.consent-gate {
  padding: 1rem 1.1rem;
}

.consent-gate__title {
  margin: 0 0 0.4rem;
  color: #0f172a;
}

.consent-gate__body {
  color: #475569;
  line-height: 1.6;
}

.consent-gate__warning {
  color: #92400e;
}

.consent-gate__checkbox-label {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 1rem;
  color: #0f172a;
}

.consent-gate__checkbox-label input {
  margin-top: 0.25rem;
}

.btn--danger,
.btn--danger-text {
  color: #b91c1c;
}

.page-body.founder-sandbox,
.page-body.bwc-test {
  display: grid;
  gap: 1.4rem;
  padding: 1.5rem;
}

.page-hero {
  padding: 1.5rem;
  border: 1px solid rgb(148 163 184 / 16%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 88%);
}

.page-hero__label {
  display: inline-flex;
  margin-bottom: 0.5rem;
  color: #2563eb;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-hero__title {
  margin: 0;
  color: #0f172a;
}

.page-hero__subtitle {
  margin: 0.75rem 0 0;
  color: #475569;
  line-height: 1.65;
}

.dashboard-page--labs .page-hero {
  background: rgb(15 23 42 / 78%);
  border-color: rgb(96 165 250 / 14%);
}

.dashboard-page--labs .page-hero__title,
.dashboard-page--labs .page-hero__subtitle {
  color: #e2e8f0;
}

.dashboard-page--labs .page-section,
.dashboard-page--labs .surface-panel,
.dashboard-page--labs .feature-card,
.dashboard-page--labs .docs-card {
  border: 1px solid var(--dashboard-border);
  border-radius: 1.15rem;
  background: rgb(15 23 42 / 58%);
  box-shadow: var(--dashboard-shadow-soft);
  backdrop-filter: blur(12px);
}

.dashboard-page--labs .page-section {
  padding: 1.45rem;
}

.dashboard-page--labs .page-section__title,
.dashboard-page--labs .feature-card h3,
.dashboard-page--labs .docs-card h3,
.dashboard-page--labs .surface-panel strong {
  color: var(--dashboard-text);
}

.dashboard-page--labs .page-section__subtitle,
.dashboard-page--labs .feature-card p,
.dashboard-page--labs .docs-card p,
.dashboard-page--labs .surface-panel p,
.dashboard-page--labs .data-table td,
.dashboard-page--labs .data-table small {
  color: var(--dashboard-text-muted);
}

.dashboard-page--labs .data-table th {
  color: #f8fafc;
}

.dashboard-page--labs .table-wrap {
  border: 1px solid rgb(148 163 184 / 12%);
  border-radius: 1rem;
  background: rgb(2 6 23 / 20%);
}

.dashboard-page--labs .feature-grid,
.dashboard-page--labs .docs-grid {
  gap: 1rem;
}

@media (width <= 900px) {
  .dashboard-frame__hero,
  .app-page-header__inner,
  .connection-item,
  .message-item__btn {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-frame__hero-meta {
    justify-content: flex-start;
    align-items: flex-start;
  }
}

@media (width <= 768px) {
  .dashboard-frame {
    padding-block: 1rem 2rem;
  }

  .dashboard-frame__hero,
  .messages-shell,
  .network-panel,
  .highlights-list,
  .dashboard-frame__nav-group,
  .page-body.founder-sandbox,
  .page-body.bwc-test {
    padding: 1rem;
  }

  .tier-gate-banner__inner,
  .pagination,
  .modal__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .tab-bar {
    width: 100%;
    border-radius: 1rem;
  }

  .tab-bar__tab {
    flex: 1 1 100%;
    justify-content: center;
  }

  .message-item__btn {
    display: flex;
    flex-direction: column;
  }

  .highlights-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-frame__section-link,
  .dashboard-frame__page-link,
  .message-item,
  .connection-item,
  .highlight-card,
  .tab-bar__tab {
    transition: none;
  }
}