.app-shell {
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-wrap {
  width: var(--fluid-width);
  margin-inline: auto;
}


.app-main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: stretch;
  flex: 1 0 auto;
}

.site-module {
  flex: 1 1 100%;
  position: relative;
}


.plans-selector,
.workflow-view {
  flex: 1 1 calc(50% - 0.5rem);
  min-width: 300px;
}

.module-inner {
  width: var(--fluid-width);
  margin-inline: auto;
  padding-block: var(--fluid-space-lg);
}

.module-content {
  display: flex;
  flex-direction: column;
  gap: var(--fluid-space-md);
}


.features-panel {
  background: var(--surface-lilac);
  border-bottom: 1px solid var(--line);
}

.dashboard-header {
  background:
    radial-gradient(120% 90% at 12% 8%, #ffffff 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 80% at 88% 18%, var(--surface-blush) 0%, rgba(255, 228, 230, 0) 60%),
    linear-gradient(128deg, var(--surface-deep) 0%, var(--surface-lilac) 38%, var(--surface-blush) 72%, var(--surface) 100%);
  background-size: 180% 180%;
  animation: iridescent-drift 26s ease-in-out infinite;
}

.stats-dashboard {
  background: var(--night);
  color: var(--night-text);
}

.content-widget {
  background: var(--surface);
}

.info-panel {
  background: var(--surface-lilac);
}

.plans-selector {
  background: var(--surface-blush);
}

.workflow-view {
  background: var(--surface);
  border-left: 1px solid var(--line);
}

.message-module {
  background:
    linear-gradient(160deg, var(--surface-deep) 0%, var(--surface-lilac) 60%, var(--surface) 100%);
}

.help-widget {
  background: var(--surface);
}

.policy-viewer {
  background: var(--surface);
}


.panel-head {
  max-width: var(--measure);
}

.panel-head h2 {
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.panel-head p {
  color: var(--ink-soft);
}

.stats-dashboard .panel-head h2 {
  color: var(--paper);
}


.section-divider {
  position: relative;
  line-height: 0;
  flex: 1 1 100%;
  background: var(--surface-lilac);
}

.section-divider svg {
  display: block;
  width: 100%;
  height: 90px;
}

.section-divider .wave-back {
  fill: rgba(91, 45, 142, 0.2);
}

.section-divider .wave-front {
  fill: var(--surface-blush);
  margin-top: -60px;
}

.section-divider .wave-front-layer {
  transform: translateY(-30px);
}


.bottom-bar {
  display: none;
}


@media (max-width: 1024px) {
  .plans-selector,
  .workflow-view {
    flex: 1 1 100%;
  }

  .workflow-view {
    border-left: none;
    border-top: 1px solid var(--line);
  }

  .module-inner {
    padding-block: var(--fluid-space-md);
  }
}

@media (max-width: 768px) {
  .app-wrap,
  .module-inner {
    width: min(94%, 640px);
  }

  .module-content {
    gap: var(--space-3);
  }

  
  .bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    justify-content: space-around;
    align-items: stretch;
    background: var(--night);
    border-top: 1px solid rgba(226, 211, 245, 0.18);
    z-index: 900;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }

  
  body {
    padding-bottom: 84px;
  }

  .section-divider svg {
    height: 56px;
  }
}

@media (max-width: 560px) {
  .module-inner {
    padding-block: var(--space-5);
  }
}