:root {
  --surface-calm-border: rgba(126, 224, 161, 0.78);
  --surface-calm-bg: linear-gradient(135deg, rgba(126, 224, 161, 0.26), rgba(126, 224, 161, 0.14));
  --surface-calm-text: #e9fff2;
  --surface-calm-shadow: 0 0 0 1px rgba(126, 224, 161, 0.18) inset, 0 10px 24px rgba(58, 154, 96, 0.18);
  --surface-focus-border: rgba(143, 184, 255, 0.78);
  --surface-focus-bg: linear-gradient(135deg, rgba(143, 184, 255, 0.26), rgba(126, 231, 200, 0.12));
  --surface-focus-text: #eef5ff;
  --surface-focus-shadow: 0 0 0 1px rgba(143, 184, 255, 0.18) inset, 0 10px 24px rgba(67, 116, 201, 0.18);
  --surface-urgent-border: rgba(247, 201, 108, 0.82);
  --surface-urgent-bg: linear-gradient(135deg, rgba(247, 201, 108, 0.24), rgba(255, 174, 92, 0.14));
  --surface-urgent-text: #fff3cf;
  --surface-urgent-shadow: 0 0 0 1px rgba(247, 201, 108, 0.16) inset, 0 10px 24px rgba(168, 112, 24, 0.18);
  --surface-fire-border: rgba(255, 112, 112, 0.88);
  --surface-fire-bg: linear-gradient(135deg, rgba(255, 112, 112, 0.28), rgba(255, 142, 130, 0.16));
  --surface-fire-text: #ffe8e8;
  --surface-fire-shadow: 0 0 0 1px rgba(255, 112, 112, 0.18) inset, 0 12px 26px rgba(177, 51, 51, 0.22);
}

.button.guide-orb,
.rail-link.guide-orb,
.icon-link.guide-orb,
a.guide-orb,
button.guide-orb {
  appearance: none;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid rgba(247, 201, 108, 0.38);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(86, 63, 15, 0.96), rgba(58, 40, 7, 0.94));
  color: #fff0c2;
  font-family: var(--display, "Iowan Old Style", "Palatino Linotype", Georgia, serif);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  box-shadow:
    0 10px 18px rgba(116, 79, 16, 0.2),
    0 5px 14px rgba(247, 201, 108, 0.14),
    0 0 12px rgba(242, 197, 109, 0.1),
    inset 0 1px 0 rgba(255, 244, 211, 0.18),
    inset 0 -1px 0 rgba(30, 21, 5, 0.28);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.24s ease,
    filter 0.24s ease;
}

.button.guide-orb::before,
.rail-link.guide-orb::before,
.icon-link.guide-orb::before,
a.guide-orb::before,
button.guide-orb::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 999px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 16%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(135deg, #ffe3a0 0%, #f7c96c 28%, #d7a63e 62%, #8f6613 100%);
  opacity: 0.96;
  z-index: -1;
  pointer-events: none;
}

.button.guide-orb::after,
.rail-link.guide-orb::after,
.icon-link.guide-orb::after,
a.guide-orb::after,
button.guide-orb::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 1px solid rgba(255, 229, 153, 0.18);
  box-shadow: 0 0 14px rgba(242, 197, 109, 0.14);
  pointer-events: none;
}

.button.guide-orb:hover,
.rail-link.guide-orb:hover,
.icon-link.guide-orb:hover,
a.guide-orb:hover,
button.guide-orb:hover {
  transform: translateY(-1px) scale(1.04);
  border-color: rgba(255, 228, 160, 0.44);
  box-shadow:
    0 12px 22px rgba(124, 85, 16, 0.28),
    0 6px 16px rgba(247, 201, 108, 0.2),
    0 0 16px rgba(242, 197, 109, 0.16),
    inset 0 1px 0 rgba(255, 245, 218, 0.24);
  filter: saturate(1.08) brightness(1.04);
}

.button.guide-orb:active,
.rail-link.guide-orb:active,
.icon-link.guide-orb:active,
a.guide-orb:active,
button.guide-orb:active {
  transform: translateY(0);
  box-shadow:
    0 12px 24px rgba(92, 63, 10, 0.26),
    inset 0 1px 0 rgba(255, 240, 201, 0.14);
}

.surface-loading-stack {
  display: grid;
  gap: 12px;
}

.surface-loading-card,
.surface-loading-line,
.surface-loading-pill {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.surface-loading-card {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.surface-loading-line,
.surface-loading-pill {
  border-radius: 999px;
}

.surface-loading-card::after,
.surface-loading-line::after,
.surface-loading-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  animation: surfaceLoadingShimmer 1.3s ease-in-out infinite;
}

.surface-loading-line {
  height: 12px;
}

.surface-loading-line.short {
  width: 34%;
}

.surface-loading-line.medium {
  width: 58%;
}

.surface-loading-line.long {
  width: 82%;
}

.surface-loading-pill {
  width: 110px;
  height: 28px;
}

.surface-loading-note {
  color: rgba(233, 240, 250, 0.78);
}

@keyframes surfaceLoadingShimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.pill.calm,
.tag.calm,
.chip.calm,
.badge.calm,
.status-pill.calm,
.rail-chip.calm,
.pill.good,
.tag.good,
.chip.good,
.badge.good,
.status-pill.good,
.pill.ok,
.tag.ok,
.chip.ok,
.badge.ok,
.status-pill.ok,
.chip.live,
.rail-chip.live {
  border-color: var(--surface-calm-border) !important;
  background: var(--surface-calm-bg) !important;
  color: var(--surface-calm-text) !important;
  box-shadow: var(--surface-calm-shadow) !important;
}

.pill.focus,
.tag.focus,
.chip.focus,
.badge.focus,
.status-pill.focus,
.rail-chip.focus,
.pill.blue,
.tag.blue,
.chip.blue,
.badge.blue,
.status-pill.blue,
.chip.secure,
.rail-chip.secure,
.chip.simulated,
.chip.muted,
.pill.muted,
.tag.muted,
.badge.muted,
.status-pill.muted {
  border-color: var(--surface-focus-border) !important;
  background: var(--surface-focus-bg) !important;
  color: var(--surface-focus-text) !important;
  box-shadow: var(--surface-focus-shadow) !important;
}

.pill.urgent,
.tag.urgent,
.chip.urgent,
.badge.urgent,
.status-pill.urgent,
.rail-chip.urgent,
.pill.warn,
.tag.warn,
.chip.warn,
.badge.warn,
.status-pill.warn,
.rail-chip.warn,
.pill.warning,
.tag.warning,
.chip.warning,
.badge.warning,
.status-pill.warning,
.chip.manual,
.badge.medium,
.badge.today,
.badge.sla_escalation,
.badge.limited,
.badge.planned,
.badge.simulated,
.badge.manual-review,
.badge.manual_review,
.badge.not_ready,
.badge.not-ready {
  border-color: var(--surface-urgent-border) !important;
  background: var(--surface-urgent-bg) !important;
  color: var(--surface-urgent-text) !important;
  box-shadow: var(--surface-urgent-shadow) !important;
}

.pill.fire,
.tag.fire,
.chip.fire,
.badge.fire,
.status-pill.fire,
.rail-chip.fire,
.pill.bad,
.tag.bad,
.chip.bad,
.badge.bad,
.status-pill.bad,
.chip.down,
.badge.high,
.badge.overdue,
.badge.promise_due,
.badge.critical {
  border-color: var(--surface-fire-border) !important;
  background: var(--surface-fire-bg) !important;
  color: var(--surface-fire-text) !important;
  box-shadow: var(--surface-fire-shadow) !important;
}

.status-surface.status-calm {
  border-color: rgba(126, 224, 161, 0.28) !important;
  background:
    radial-gradient(circle at top left, rgba(126, 224, 161, 0.12), transparent 38%),
    rgba(255, 255, 255, 0.04) !important;
  box-shadow:
    0 0 0 1px rgba(126, 224, 161, 0.06) inset,
    0 26px 64px rgba(19, 59, 37, 0.28) !important;
}

.status-surface.status-focus {
  border-color: rgba(143, 184, 255, 0.34) !important;
  background:
    radial-gradient(circle at top left, rgba(143, 184, 255, 0.14), transparent 40%),
    rgba(255, 255, 255, 0.04) !important;
  box-shadow:
    0 0 0 1px rgba(143, 184, 255, 0.06) inset,
    0 26px 64px rgba(35, 66, 122, 0.26) !important;
}

.status-surface.status-urgent {
  border-color: rgba(247, 201, 108, 0.34) !important;
  background:
    radial-gradient(circle at top left, rgba(247, 201, 108, 0.14), transparent 40%),
    rgba(255, 255, 255, 0.04) !important;
  box-shadow:
    0 0 0 1px rgba(247, 201, 108, 0.06) inset,
    0 26px 64px rgba(119, 77, 13, 0.26) !important;
}

.status-surface.status-fire {
  border-color: rgba(255, 112, 112, 0.4) !important;
  background:
    radial-gradient(circle at top left, rgba(255, 112, 112, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.04) !important;
  box-shadow:
    0 0 0 1px rgba(255, 112, 112, 0.07) inset,
    0 28px 66px rgba(126, 23, 23, 0.3) !important;
}

@keyframes surfacePearlDrift {
  0% {
    background-position: 0% 50%;
    transform: translate3d(-8%, 0, 0) scale(1);
  }
  50% {
    background-position: 100% 50%;
    transform: translate3d(8%, 0, 0) scale(1.03);
  }
  100% {
    background-position: 0% 50%;
    transform: translate3d(-8%, 0, 0) scale(1);
  }
}

@keyframes surfacePearlSweep {
  0%, 12% {
    transform: translateX(-190%) rotate(16deg);
    opacity: 0;
  }
  18% {
    opacity: 0.58;
  }
  28% {
    transform: translateX(345%) rotate(16deg);
    opacity: 0;
  }
  100% {
    transform: translateX(345%) rotate(16deg);
    opacity: 0;
  }
}

.button.surface-nav,
a.button.surface-nav,
button.surface-nav,
.pill.surface-nav,
a.pill.surface-nav,
.tag.surface-nav,
a.tag.surface-nav,
.button.surface-nav-primary,
a.button.surface-nav-primary,
button.surface-nav-primary,
.pill.surface-nav-primary,
a.pill.surface-nav-primary,
.tag.surface-nav-primary,
a.tag.surface-nav-primary {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.button.surface-nav,
a.button.surface-nav,
button.surface-nav,
.pill.surface-nav,
a.pill.surface-nav,
.tag.surface-nav,
a.tag.surface-nav {
  border-color: rgba(226, 244, 255, 0.2) !important;
  background: linear-gradient(180deg, rgba(20, 30, 38, 0.96), rgba(13, 20, 27, 0.92)) !important;
  color: #eef6ff !important;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.2),
    0 8px 18px rgba(118, 206, 237, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.button.surface-nav::before,
a.button.surface-nav::before,
button.surface-nav::before,
.pill.surface-nav::before,
a.pill.surface-nav::before,
.tag.surface-nav::before,
a.tag.surface-nav::before {
  content: "";
  position: absolute;
  inset: -48%;
  border-radius: inherit;
  background:
    linear-gradient(114deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 16%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(135deg, rgba(147, 246, 219, 0.34) 0%, rgba(111, 226, 241, 0.28) 24%, rgba(142, 189, 255, 0.3) 50%, rgba(194, 209, 255, 0.24) 74%, rgba(137, 231, 202, 0.22) 100%);
  background-size: 260% 260%;
  opacity: 0.22;
  pointer-events: none;
  z-index: -1;
  animation: surfacePearlDrift 6.4s linear infinite;
}

.button.surface-nav::after,
a.button.surface-nav::after,
button.surface-nav::after,
.pill.surface-nav::after,
a.pill.surface-nav::after,
.tag.surface-nav::after,
a.tag.surface-nav::after {
  content: "";
  position: absolute;
  top: -148%;
  left: -56%;
  width: 42%;
  height: 400%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
  transform: rotate(16deg);
  opacity: 0.46;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: -1;
  animation: surfacePearlSweep 6.2s ease-in-out infinite;
}

.button.surface-nav:hover,
a.button.surface-nav:hover,
button.surface-nav:hover,
.pill.surface-nav:hover,
a.pill.surface-nav:hover,
.tag.surface-nav:hover,
a.tag.surface-nav:hover {
  border-color: rgba(201, 235, 255, 0.34) !important;
  background: linear-gradient(180deg, rgba(26, 38, 50, 0.98), rgba(14, 22, 30, 0.94)) !important;
  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.24),
    0 10px 24px rgba(123, 210, 240, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
  filter: saturate(1.04) brightness(1.03) !important;
}

.button.surface-nav-primary,
a.button.surface-nav-primary,
button.surface-nav-primary,
.pill.surface-nav-primary,
a.pill.surface-nav-primary,
.tag.surface-nav-primary,
a.tag.surface-nav-primary {
  border-color: rgba(226, 244, 255, 0.26) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
  color: #061018 !important;
  box-shadow:
    0 18px 40px rgba(26, 60, 88, 0.34),
    0 8px 22px rgba(118, 206, 237, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(4, 12, 18, 0.12) !important;
}

.button.surface-nav-primary::before,
a.button.surface-nav-primary::before,
button.surface-nav-primary::before,
.pill.surface-nav-primary::before,
a.pill.surface-nav-primary::before,
.tag.surface-nav-primary::before,
a.tag.surface-nav-primary::before {
  content: "";
  position: absolute;
  inset: -34%;
  border-radius: inherit;
  background:
    linear-gradient(114deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.16) 12%, rgba(255, 255, 255, 0) 23%),
    linear-gradient(135deg, #93f6db 0%, #6fe2f1 24%, #8ebdff 50%, #c2d1ff 74%, #89e7ca 100%);
  background-size: 260% 260%;
  opacity: 0.98;
  pointer-events: none;
  z-index: -1;
  animation: surfacePearlDrift 4.8s linear infinite;
}

.button.surface-nav-primary::after,
a.button.surface-nav-primary::after,
button.surface-nav-primary::after,
.pill.surface-nav-primary::after,
a.pill.surface-nav-primary::after,
.tag.surface-nav-primary::after,
a.tag.surface-nav-primary::after {
  content: "";
  position: absolute;
  top: -138%;
  left: -46%;
  width: 46%;
  height: 380%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0));
  transform: rotate(16deg);
  opacity: 0.7;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: -1;
  animation: surfacePearlSweep 4.9s ease-in-out infinite;
}

.button.surface-nav-primary:hover,
a.button.surface-nav-primary:hover,
button.surface-nav-primary:hover,
.pill.surface-nav-primary:hover,
a.pill.surface-nav-primary:hover,
.tag.surface-nav-primary:hover,
a.tag.surface-nav-primary:hover {
  border-color: rgba(234, 247, 255, 0.42) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) !important;
  box-shadow:
    0 22px 46px rgba(31, 74, 106, 0.38),
    0 10px 28px rgba(123, 210, 240, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  filter: saturate(1.08) brightness(1.03) !important;
}

.button.surface-enter,
.button.enter-rich,
a.button.surface-enter,
a.button.enter-rich,
button.surface-enter,
button.enter-rich,
.pill.surface-enter,
a.pill.surface-enter,
.tag.surface-enter,
a.tag.surface-enter,
.topbar-login.surface-enter,
a.topbar-login.surface-enter,
.seo-button.surface-enter,
a.seo-button.surface-enter {
  border-color: rgba(131, 241, 198, 0.3) !important;
  background: linear-gradient(135deg, rgba(134, 231, 255, 0.98), rgba(131, 241, 198, 0.98)) !important;
  color: #03111b !important;
  box-shadow:
    0 18px 38px rgba(18, 90, 80, 0.28),
    0 0 24px rgba(131, 241, 198, 0.18) !important;
}

.button.surface-enter:hover,
.button.enter-rich:hover,
a.button.surface-enter:hover,
a.button.enter-rich:hover,
button.surface-enter:hover,
button.enter-rich:hover,
.pill.surface-enter:hover,
a.pill.surface-enter:hover,
.tag.surface-enter:hover,
a.tag.surface-enter:hover,
.topbar-login.surface-enter:hover,
a.topbar-login.surface-enter:hover,
.seo-button.surface-enter:hover,
a.seo-button.surface-enter:hover {
  border-color: rgba(131, 241, 198, 0.42) !important;
  background: linear-gradient(135deg, rgba(151, 237, 255, 0.98), rgba(147, 245, 206, 0.98)) !important;
  box-shadow:
    0 22px 42px rgba(18, 90, 80, 0.32),
    0 0 28px rgba(131, 241, 198, 0.22) !important;
}

.button.surface-urgent,
a.button.surface-urgent,
button.surface-urgent {
  border-color: rgba(247, 201, 108, 0.3) !important;
  background: rgba(247, 201, 108, 0.12) !important;
  color: #fff0c2 !important;
  box-shadow: 0 12px 28px rgba(168, 112, 24, 0.18) !important;
}

.button.surface-urgent:hover,
a.button.surface-urgent:hover,
button.surface-urgent:hover {
  border-color: rgba(247, 201, 108, 0.44) !important;
  background: rgba(247, 201, 108, 0.16) !important;
  box-shadow:
    0 16px 32px rgba(168, 112, 24, 0.2),
    0 0 18px rgba(247, 201, 108, 0.12) !important;
}

.button.surface-exit,
.button.exit-rich,
a.button.surface-exit,
a.button.exit-rich,
button.surface-exit,
button.exit-rich,
.pill.surface-exit,
a.pill.surface-exit,
.tag.surface-exit,
a.tag.surface-exit,
.topbar-login.surface-exit,
a.topbar-login.surface-exit,
.seo-button.surface-exit,
a.seo-button.surface-exit {
  border-color: rgba(255, 143, 134, 0.26) !important;
  background: rgba(255, 143, 134, 0.08) !important;
  color: #ffc7c2 !important;
  box-shadow: 0 10px 24px rgba(255, 143, 134, 0.16) !important;
}

.button.surface-exit:hover,
.button.exit-rich:hover,
a.button.surface-exit:hover,
a.button.exit-rich:hover,
button.surface-exit:hover,
button.exit-rich:hover,
.pill.surface-exit:hover,
a.pill.surface-exit:hover,
.tag.surface-exit:hover,
a.tag.surface-exit:hover,
.topbar-login.surface-exit:hover,
a.topbar-login.surface-exit:hover,
.seo-button.surface-exit:hover,
a.seo-button.surface-exit:hover {
  border-color: rgba(255, 143, 134, 0.42) !important;
  background: rgba(255, 143, 134, 0.14) !important;
  box-shadow:
    0 14px 28px rgba(255, 143, 134, 0.2),
    0 0 20px rgba(255, 143, 134, 0.1) !important;
}