html, body, #react-entry-point {
  min-height: 100%;
}

:root {
  --brand-bg: #f3f7f6;
  --brand-surface: #ffffff;
  --brand-text: #1e2a2f;
  --brand-muted: #6a7a80;
  --brand-primary: #1f8a70;
  --brand-border: #d7e1df;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 10%, #d9efe8 0%, transparent 28%),
    radial-gradient(circle at 92% 88%, #d9e8ef 0%, transparent 30%),
    var(--brand-bg);
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--brand-text);
}

.page-shell {
  max-width: 1200px;
  padding-bottom: 48px;
}

.top-nav {
  background: linear-gradient(135deg, #143f46 0%, #1f8a70 100%);
  box-shadow: 0 12px 30px rgba(20, 63, 70, 0.22);
  position: relative;
  z-index: 3000;
  overflow: visible;
}

.top-nav .navbar-brand,
.top-nav .nav-link {
  color: #f7fbfa !important;
  font-weight: 600;
}

.top-nav .nav-link:hover {
  opacity: 0.86;
}

.user-menu-dropdown .dropdown-menu {
  position: absolute;
  right: 0;
  left: auto;
  transform-origin: top right;
  z-index: 3100;
}

.user-menu-dropdown {
  position: relative;
  z-index: 3101;
}

.surface-card {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(28, 63, 72, 0.08);
}

.auth-card {
  margin-top: 10vh;
}

.status-item {
  border-color: var(--brand-border);
}

.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-primary:hover {
  background-color: #17735d;
  border-color: #17735d;
}

.result-segment-group {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  /* width: min(100%, 680px); */
  margin: 0 auto;
}

.result-segment-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.result-segment-option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #b9c8c4;
  border-radius: 12px;
  background: #f8fbfa;
  color: var(--brand-text);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.result-segment-option:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.result-segment-option-active {
  border-color: var(--brand-primary);
  background: linear-gradient(135deg, #1f8a70 0%, #2ea285 100%);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(31, 138, 112, 0.22);
}

.result-segment-group .form-check {
  padding-left: 6px;
  padding-right: 6px;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .result-segment-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 420px);
  }

  .result-segment-option {
    min-height: 40px;
    font-size: 0.95rem;
  }
}

.field-label-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  margin-bottom: 6px;
}

.field-label-row .form-label {
  margin-bottom: 0;
  font-weight: 600;
}

.field-fix-check {
  margin-bottom: 0;
  justify-self: end;
  white-space: nowrap;
}

.surface-card pre {
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-tab-content {
  margin-top: 14px;
}

.status-save-btn {
  margin-bottom: 3px;
}

.pending-filter-wrap {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.admin-user-save-btn {
  min-height: 42px;
  font-weight: 700;
}

.admin-active-toggle-btn {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-active-toggle-btn.admin-active-on {
  background: linear-gradient(135deg, #1f6fd1 0%, #2f8cf0 100%);
  border-color: #1f6fd1;
  color: #ffffff;
}

.admin-active-toggle-btn.admin-active-off {
  background: linear-gradient(135deg, #c53232 0%, #e14a4a 100%);
  border-color: #c53232;
  color: #ffffff;
}

.admin-active-toggle-btn:disabled {
  opacity: 0.6;
}

.form-received-row > [class*="col-"] {
  margin-top: 4px !important;
}

@media (max-width: 768px) {
  .surface-card {
    padding: 16px;
  }
}

/* Enhanced ambient background motion (overrides previous simple float) */
html {
  position: relative;
}

body {
  position: relative;
  z-index: 0;
  overflow-x: hidden;
}

.page-shell,
.top-nav {
  position: relative;
}

.page-shell {
  z-index: 1;
}

html::before,
body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
}

html::before {
  width: 56vmax;
  height: 56vmax;
  top: -18vmax;
  left: -14vmax;
  border-radius: 43% 57% 58% 42% / 41% 45% 55% 59%;
  background: radial-gradient(circle at 35% 30%, rgba(31, 138, 112, 0.20) 0%, rgba(31, 138, 112, 0) 66%);
  filter: blur(84px);
  opacity: 0.24;
  z-index: -3;
  animation: ambient-orbit-a 37s ease-in-out infinite;
}

body::before {
  width: 48vmax;
  height: 48vmax;
  top: 18vh;
  right: -16vmax;
  border-radius: 57% 43% 45% 55% / 56% 43% 57% 44%;
  background: radial-gradient(circle at 60% 40%, rgba(47, 140, 240, 0.16) 0%, rgba(47, 140, 240, 0) 70%);
  filter: blur(96px);
  opacity: 0.2;
  z-index: -3;
  animation: ambient-orbit-b 53s ease-in-out infinite;
}

body::after {
  width: 40vmax;
  height: 40vmax;
  bottom: -14vmax;
  left: 22vw;
  border-radius: 48% 52% 39% 61% / 52% 36% 64% 48%;
  background: radial-gradient(circle at 45% 55%, rgba(32, 162, 132, 0.14) 0%, rgba(32, 162, 132, 0) 72%);
  filter: blur(92px);
  opacity: 0.18;
  z-index: -3;
  animation: ambient-orbit-c 41s ease-in-out infinite;
}

@keyframes ambient-orbit-a {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 0.20; }
  33% { transform: translate3d(5vmax, 3vmax, 0) rotate(4deg) scale(1.05); opacity: 0.28; }
  66% { transform: translate3d(2vmax, 8vmax, 0) rotate(-3deg) scale(0.98); opacity: 0.22; }
  100% { transform: translate3d(8vmax, 4vmax, 0) rotate(2deg) scale(1.03); opacity: 0.24; }
}

@keyframes ambient-orbit-b {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 0.16; }
  40% { transform: translate3d(-7vmax, 4vmax, 0) rotate(5deg) scale(1.08); opacity: 0.23; }
  75% { transform: translate3d(-3vmax, -5vmax, 0) rotate(-4deg) scale(0.96); opacity: 0.18; }
  100% { transform: translate3d(-9vmax, 2vmax, 0) rotate(2deg) scale(1.02); opacity: 0.2; }
}

@keyframes ambient-orbit-c {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 0.14; }
  30% { transform: translate3d(4vmax, -4vmax, 0) rotate(-3deg) scale(1.06); opacity: 0.2; }
  60% { transform: translate3d(-2vmax, -8vmax, 0) rotate(4deg) scale(0.95); opacity: 0.16; }
  100% { transform: translate3d(6vmax, -3vmax, 0) rotate(-2deg) scale(1.01); opacity: 0.18; }
}

@media (prefers-reduced-motion: reduce) {
  html::before,
  body::before,
  body::after {
    animation: none;
  }
}