/* Shared design system for Home, SDK Testing and Survey Embed.
   Load this file AFTER each page's own stylesheet. */

:root {
  --shared-orange: #e88945;
  --shared-tile-light: #edf0f5;
  --shared-tile-light-border: #cbd3df;
  --shared-tile-dark: #292e37;
  --shared-tile-dark-border: #3c4350;
  --shared-card-radius: 16px;
  --shared-shadow: 0 12px 32px rgba(25,38,68,.08);
}

html[data-theme="dark"] body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 68% 52% at 88% 9%, rgba(202,104,53,.20), transparent 75%),
    radial-gradient(ellipse 65% 58% at 8% 75%, rgba(65,129,165,.19), transparent 78%),
    linear-gradient(135deg,#181d28 0%,#202634 55%,#2a2529 100%);
  background-attachment: fixed;
}

/* One set of surface colors for the account, SDK and survey tiles. */
:is(.panel,.status-card,.stat) {
  border-radius: var(--shared-card-radius);
  box-shadow: var(--shared-shadow);
}

html[data-theme="dark"] :is(.account-overview,.panel,.status-card,.stat) {
  background-color: var(--shared-tile-dark) !important;
  border-color: var(--shared-tile-dark-border) !important;
}
html[data-theme="dark"] :is(.panel,.status-card,.stat) {
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
}
:is(.status-card,.stat):hover {
  box-shadow: 0 18px 40px rgba(25,38,68,.13);
}

/* The sidebar determines the desktop content area on every page. */
@media (min-width: 901px) {
  body .page:is(.account-home,.testing-page) {
    width: auto;
    max-width: none;
    margin-left: 242px;
    padding-left: 52px;
    padding-right: 52px;
    box-sizing: border-box;
  }
  body.sidebar-collapsed .page:is(.account-home,.testing-page) {
    margin-left: 86px;
  }
  .page:is(.account-home,.testing-page) > :is(
    .page-heading,.account-overview,.status-grid,.stats,.main-grid,.panel,.footer
  ) {
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}

/* Every page title and subtitle has exactly the same typography and spacing.
   Older page-specific title declarations are deliberately superseded here. */
.page > .page-heading {
  margin-top: 0;
  margin-bottom: 36px;
}
.page > .page-heading h1 {
  margin: 0;
  color: var(--ink);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.035em;
}
.page > .page-heading p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.45;
}
.page > .page-heading > div {
  min-width: 0;
}
@media (max-width: 620px) {
  .page > .page-heading { margin-bottom: 28px; }
}

:is(.active-link,.top-link.active-link) {
  border-left-color: var(--shared-orange);
}

@media (prefers-reduced-motion: reduce) {
  :is(.panel,.status-card,.stat) { transition: none; }
}