:root {
  --Font_Family: "SF Pro Display", "SF Pro Text", "Avenir Next", "Segoe UI", sans-serif;
  --Mono_Font: "SF Mono", "JetBrains Mono", "Menlo", monospace;

  --Canvas_Base: #eef3fb;
  --Canvas_Deep: #dce6f4;
  --Canvas_Ink: #0b1624;

  --Text_Primary: #122238;
  --Text_Secondary: #4e6178;
  --Text_Muted: #73869e;

  --Surface_Primary: rgba(251, 253, 255, 0.82);
  --Surface_Secondary: rgba(242, 247, 255, 0.72);
  --Surface_Tertiary: rgba(235, 242, 252, 0.78);
  --Surface_Contrast: #ffffff;

  --Border_Subtle: rgba(134, 156, 184, 0.3);
  --Border_Medium: rgba(112, 137, 168, 0.45);
  --Border_Strong: rgba(76, 108, 146, 0.62);

  --Primary: #2a67be;
  --Primary_Deep: #194d9d;
  --Primary_Glow: rgba(48, 116, 214, 0.35);

  --Success_Background: rgba(228, 250, 237, 0.84);
  --Success_Border: rgba(90, 180, 122, 0.45);
  --Success_Text: #1e6a3e;

  --Warn_Background: rgba(255, 246, 224, 0.9);
  --Warn_Border: rgba(215, 163, 67, 0.5);
  --Warn_Text: #8e5d0e;

  --Error_Background: rgba(255, 237, 240, 0.92);
  --Error_Border: rgba(204, 104, 122, 0.5);
  --Error_Text: #8f1f31;

  --Queued_Background: rgba(241, 246, 252, 0.92);
  --Queued_Border: rgba(125, 149, 177, 0.45);
  --Queued_Text: #586f87;

  --Partial_Background: rgba(255, 248, 227, 0.9);
  --Partial_Border: rgba(222, 171, 76, 0.5);
  --Partial_Text: #8a5a0c;

  --Shadow_Edge: 0 18px 40px -30px rgba(12, 36, 68, 0.5);
  --Shadow_Float: 0 34px 60px -30px rgba(12, 38, 76, 0.45), 0 12px 28px -18px rgba(9, 31, 62, 0.26);
  --Shadow_Inner: inset 0 1px 0 rgba(255, 255, 255, 0.65);

  --Radius_L: 24px;
  --Radius_M: 18px;
  --Radius_S: 14px;

  --Transition_Fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --Transition_Main: 260ms cubic-bezier(0.2, 0.7, 0, 1);
}

html[data-theme='dark'] {
  --Canvas_Base: #08111f;
  --Canvas_Deep: #0d1c30;
  --Canvas_Ink: #f4f8ff;

  --Text_Primary: #e5edf9;
  --Text_Secondary: #a2b7cf;
  --Text_Muted: #8097b2;

  --Surface_Primary: rgba(16, 28, 44, 0.72);
  --Surface_Secondary: rgba(22, 36, 56, 0.72);
  --Surface_Tertiary: rgba(27, 44, 66, 0.75);
  --Surface_Contrast: rgba(17, 30, 48, 0.92);

  --Border_Subtle: rgba(96, 124, 160, 0.28);
  --Border_Medium: rgba(110, 145, 186, 0.38);
  --Border_Strong: rgba(130, 168, 214, 0.52);

  --Primary: #7cb0ff;
  --Primary_Deep: #9cc2ff;
  --Primary_Glow: rgba(104, 162, 255, 0.38);

  --Success_Background: rgba(21, 52, 38, 0.88);
  --Success_Border: rgba(78, 158, 107, 0.5);
  --Success_Text: #99e1b4;

  --Warn_Background: rgba(66, 50, 21, 0.9);
  --Warn_Border: rgba(194, 145, 60, 0.55);
  --Warn_Text: #f5c779;

  --Error_Background: rgba(68, 26, 38, 0.9);
  --Error_Border: rgba(180, 83, 106, 0.56);
  --Error_Text: #f2abbc;

  --Queued_Background: rgba(25, 40, 61, 0.88);
  --Queued_Border: rgba(86, 114, 146, 0.5);
  --Queued_Text: #a7bfd9;

  --Partial_Background: rgba(74, 56, 25, 0.88);
  --Partial_Border: rgba(201, 152, 64, 0.55);
  --Partial_Text: #f4cb80;

  --Shadow_Edge: 0 18px 42px -28px rgba(0, 0, 0, 0.76);
  --Shadow_Float: 0 34px 70px -28px rgba(0, 0, 0, 0.72), 0 16px 36px -18px rgba(0, 0, 0, 0.54);
  --Shadow_Inner: inset 0 1px 0 rgba(184, 212, 245, 0.18);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--Font_Family);
  color: var(--Text_Primary);
  background:
    radial-gradient(1000px 520px at 100% -8%, rgba(88, 146, 228, 0.26), transparent 60%),
    radial-gradient(900px 460px at -8% 0%, rgba(78, 121, 187, 0.2), transparent 60%),
    linear-gradient(160deg, var(--Canvas_Base) 0%, var(--Canvas_Deep) 100%);
}

.Canvas_Layers {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.Canvas_Grid,
.Canvas_Noise,
.Canvas_Aurora {
  position: absolute;
  inset: 0;
}

.Canvas_Grid {
  background-image:
    linear-gradient(to right, rgba(112, 138, 171, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(112, 138, 171, 0.08) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 45% 15%, rgba(0, 0, 0, 0.88), transparent 80%);
}

.Canvas_Noise {
  opacity: 0.08;
  background-image: radial-gradient(rgba(70, 93, 121, 0.55) 0.5px, transparent 0.5px);
  background-size: 2px 2px;
}

.Canvas_Aurora {
  filter: blur(65px);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.Canvas_Aurora_One {
  background: radial-gradient(circle at 22% 18%, rgba(101, 150, 226, 0.22), transparent 58%);
}

.Canvas_Aurora_Two {
  background: radial-gradient(circle at 82% 12%, rgba(77, 123, 200, 0.2), transparent 60%);
}

.Boot_Screen {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(900px 540px at 50% 18%, rgba(98, 154, 235, 0.18), transparent 62%),
    linear-gradient(160deg, rgba(236, 242, 251, 0.94), rgba(220, 230, 244, 0.98));
  backdrop-filter: blur(12px);
  transition: opacity 280ms ease, transform 280ms ease, visibility 0s linear 280ms;
}

html[data-theme='dark'] .Boot_Screen {
  background:
    radial-gradient(900px 540px at 50% 18%, rgba(96, 153, 241, 0.2), transparent 62%),
    linear-gradient(160deg, rgba(6, 12, 22, 0.95), rgba(11, 22, 39, 0.98));
}

.Boot_Screen[data-state='ready'] {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.01);
}

.Boot_Screen_Card {
  width: min(640px, 100%);
  border: 1px solid var(--Border_Medium);
  border-radius: 26px;
  background: color-mix(in srgb, var(--Surface_Contrast) 82%, transparent 18%);
  box-shadow: var(--Shadow_Float);
  padding: 22px 22px 20px;
  display: grid;
  gap: 14px;
}

.Boot_Screen_Header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.Boot_Screen_Kicker {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--Text_Muted);
  font-weight: 800;
}

.Boot_Screen_Signal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--Mono_Font);
  font-size: 12px;
  font-weight: 700;
  color: var(--Text_Secondary);
}

.Boot_Screen_Signal_Dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--Primary);
  box-shadow: 0 0 0 0 rgba(82, 138, 228, 0.45);
  animation: boot-pulse 1.35s ease-in-out infinite;
}

.Boot_Screen_Track {
  position: relative;
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--Primary) 12%, var(--Surface_Tertiary) 88%);
  border: 1px solid var(--Border_Subtle);
}

.Boot_Screen_Track_Fill {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(90, 145, 227, 0.1) 20%, rgba(90, 145, 227, 0.88) 50%, rgba(90, 145, 227, 0.1) 80%, transparent 100%);
  background-size: 180% 100%;
  animation: boot-sweep 1.2s linear infinite;
}

.Boot_Screen_Copy {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--Text_Primary);
  text-wrap: balance;
}

.Boot_Screen_Stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.Boot_Screen_Stat {
  border: 1px solid var(--Border_Subtle);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--Text_Secondary);
  background: color-mix(in srgb, var(--Surface_Contrast) 70%, transparent 30%);
}

.App_Layout {
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100% - 46px));
  margin: 20px auto 34px;
  display: grid;
  gap: 12px;
}

.Hero_Card,
.Panel_Card {
  position: relative;
  border: 1px solid var(--Border_Medium);
  background: var(--Surface_Primary);
  border-radius: var(--Radius_L);
  box-shadow: var(--Shadow_Edge), var(--Shadow_Inner);
  backdrop-filter: blur(14px);
}

.Hero_Card {
  overflow: hidden;
  padding: 26px 18px 14px;
  isolation: isolate;
}

.Hero_Atmosphere {
  position: absolute;
  inset: -22% -6% auto;
  height: 90%;
  background:
    radial-gradient(circle at var(--Hero_Light_X, 30%) var(--Hero_Light_Y, 35%), rgba(93, 153, 234, 0.28), transparent 45%),
    radial-gradient(circle at 80% 0%, rgba(163, 196, 240, 0.2), transparent 55%);
  pointer-events: none;
  z-index: -1;
}

.Hero_Card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--Radius_L) - 1px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.Hero_Header_Row {
  display: grid;
  grid-template-columns: 1.4fr minmax(260px, 0.9fr);
  gap: 14px;
  align-items: start;
}

.Hero_Identity {
  display: grid;
  gap: 10px;
}

.Hero_Reset_Action {
  display: inline-flex;
  align-items: flex-start;
}

.Eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 10px;
  font-weight: 700;
  color: var(--Text_Secondary);
}

h1 {
  margin: 0;
  font-size: clamp(24px, 3.1vw, 42px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--Text_Primary);
  text-wrap: balance;
}

.Hero_Copy {
  margin: 0;
  max-width: 72ch;
  color: var(--Text_Secondary);
  line-height: 1.42;
  font-size: 13px;
}

.Hero_Aside {
  position: relative;
  border: 1px solid var(--Border_Subtle);
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.2), transparent 55%), var(--Surface_Secondary);
  padding: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  display: grid;
  gap: 8px;
}

.Hero_Status_Chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.System_Chip {
  border-radius: 999px;
  border: 1px solid var(--Border_Subtle);
  background: var(--Surface_Tertiary);
  color: var(--Text_Secondary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
}

.System_Chip_Active {
  border-color: var(--Primary_Glow);
  color: var(--Primary_Deep);
  background: color-mix(in srgb, var(--Primary) 14%, var(--Surface_Tertiary) 86%);
  box-shadow: 0 0 0 1px rgba(68, 120, 198, 0.16);
}

.Hero_Telemetry_Grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.Telemetry_Block {
  border: 1px solid var(--Border_Subtle);
  border-radius: 12px;
  background: color-mix(in srgb, var(--Surface_Contrast) 62%, transparent 38%);
  padding: 8px;
  display: grid;
  gap: 5px;
}

.Telemetry_Label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--Text_Muted);
  font-weight: 700;
}

.Telemetry_Value {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--Mono_Font);
  color: var(--Text_Primary);
  overflow-wrap: anywhere;
}

.Preference_Sidebar {
  position: fixed;
  top: 16px;
  left: 10px;
  z-index: 20;
  border: 1px solid var(--Border_Subtle);
  border-radius: 14px;
  background: color-mix(in srgb, var(--Surface_Contrast) 76%, transparent 24%);
  box-shadow: var(--Shadow_Edge);
  padding: 8px;
  display: grid;
  gap: 8px;
}

.Preference_Sidebar .Preference_Block {
  gap: 5px;
}

.Segmented_Control_Vertical {
  display: grid;
  gap: 4px;
  padding: 4px;
}

.Segmented_Control_Vertical .Segmented_Option {
  justify-content: flex-start;
  width: 100%;
}

.Preference_Sidebar .Segmented_Option {
  padding: 6px 8px;
  font-size: 11px;
}

.Preference_Email_Reopen {
  grid-column: 1 / -1;
  width: 100%;
}

.Hero_Control_Row {
  position: absolute;
  top: 14px;
  left: 18px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--Border_Subtle);
  border-radius: 14px;
  background: color-mix(in srgb, var(--Surface_Contrast) 78%, transparent 22%);
  box-shadow: var(--Shadow_Inner);
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  gap: 8px;
  z-index: 3;
}

.Preference_Block {
  display: grid;
  gap: 6px;
}

.Preference_Label {
  margin: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--Text_Muted);
  font-weight: 700;
}

.Segmented_Control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--Border_Subtle);
  background: color-mix(in srgb, var(--Surface_Contrast) 66%, transparent 34%);
}

.Segmented_Option {
  border: none;
  cursor: pointer;
  border-radius: 9px;
  background: transparent;
  color: var(--Text_Secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 10px;
  transition: transform var(--Transition_Fast), background-color var(--Transition_Fast), color var(--Transition_Fast), box-shadow var(--Transition_Fast);
}

.Segmented_Option:hover {
  transform: translateY(-1px);
}

.Segmented_Option[data-active='true'] {
  color: #f7fbff;
  background: linear-gradient(135deg, #2d6fc8 0%, #4d88da 58%, #6ca1eb 100%);
  box-shadow: 0 8px 15px -8px rgba(28, 83, 157, 0.65);
}

.Control_Icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.Hero_Metadata {
  display: none;
}

.Workspace_Grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.18fr) minmax(340px, 0.82fr);
  gap: 16px;
  align-items: start;
}

body[data-view-mode='idle'] .Workspace_Grid,
body[data-view-mode='running'] .Workspace_Grid,
body[data-view-mode='finished'] .Workspace_Grid {
  grid-template-columns: 1fr;
}

.Panel_Card {
  padding: 13px;
}

.Query_Studio,
.Live_Console {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.15), transparent 45%), var(--Surface_Primary);
}

.Query_Studio {
  border-radius: var(--Radius_L) var(--Radius_M) var(--Radius_M) var(--Radius_L);
}

.Live_Console {
  border-radius: var(--Radius_M) var(--Radius_L) var(--Radius_L) var(--Radius_M);
}

body[data-view-mode='finished'] .Live_Console {
  border-color: color-mix(in srgb, var(--Success_Border) 58%, var(--Border_Strong) 42%);
  box-shadow: 0 0 0 1px rgba(74, 181, 118, 0.18), var(--Shadow_Edge), var(--Shadow_Inner);
}

.Panel_Kicker {
  margin: 0 0 4px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--Text_Muted);
  font-weight: 700;
}

.Panel_Header {
  margin-bottom: 14px;
}

.Panel_Header_With_Action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.Live_Console_Actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.Panel_Header h2 {
  margin: 0;
  font-size: 21px;
  letter-spacing: -0.02em;
}

.Panel_Header p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--Text_Secondary);
}

.Shared_Options {
  border-radius: 14px;
  border: 1px solid var(--Border_Medium);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.24), transparent 50%), var(--Surface_Secondary);
  padding: 11px;
  display: grid;
  gap: 11px;
}

.Shared_Options_Header {
  display: grid;
  gap: 4px;
}

.Shared_Options_Title {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--Text_Secondary);
}

.Shared_Options_Description {
  margin: 0;
  color: var(--Text_Muted);
  font-size: 12px;
}

.Shared_Options_Grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.Shared_Options_Secondary_Row {
  display: grid;
  grid-template-columns: minmax(260px, 380px);
}

.Search_Module_Header {
  margin-top: 14px;
  display: grid;
  gap: 4px;
}

.Search_Module_Header h3 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.Search_Module_Header p {
  margin: 0;
  font-size: 12px;
  color: var(--Text_Muted);
}

.Search_Rows {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

[hidden] {
  display: none !important;
}

.Search_Row {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--Border_Medium);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.22), transparent 55%), var(--Surface_Secondary);
  padding: 10px;
  box-shadow: var(--Shadow_Inner);
  transition: transform var(--Transition_Main), box-shadow var(--Transition_Main), border-color var(--Transition_Main), opacity var(--Transition_Main), filter var(--Transition_Main);
  transform: scale(0.965);
  opacity: 0.88;
  filter: saturate(0.8);
}

.Search_Row[data-active='true'] {
  transform: scale(1);
  opacity: 1;
  filter: none;
  z-index: 2;
  box-shadow: var(--Shadow_Float);
  border-color: var(--Border_Strong);
}

.Search_Row::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.32);
  pointer-events: none;
}

.Search_Row_Header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.Search_Row_Header h3 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.Search_Row_Actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.Search_Row_Grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.Field_Label {
  display: grid;
  gap: 5px;
  color: var(--Text_Secondary);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.Field_Label_Text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.Help_Marker {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--Primary_Deep) 72%, var(--Border_Medium) 28%);
  background: color-mix(in srgb, var(--Primary_Deep) 82%, #0e294d 18%);
  color: #f5f9ff;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  position: relative;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--Primary) 28%, transparent 72%);
  transition: transform var(--Transition_Fast), box-shadow var(--Transition_Fast), background-color var(--Transition_Fast);
}

.Help_Marker:hover,
.Help_Marker:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--Primary) 52%, transparent 48%);
}

.Help_Marker::before,
.Help_Marker::after {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--Transition_Fast);
  z-index: 20;
}

.Help_Marker::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: var(--Canvas_Ink) transparent transparent transparent;
}

.Help_Marker::after {
  content: attr(data-help-text);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 11px);
  transform: translateX(-50%);
  width: min(280px, 70vw);
  padding: 7px 9px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--Canvas_Ink) 90%, #001 10%);
  color: #f5f8ff;
  font-size: 11px;
  letter-spacing: normal;
  line-height: 1.3;
  text-transform: none;
}

.Help_Marker:hover::before,
.Help_Marker:hover::after,
.Help_Marker:focus-visible::before,
.Help_Marker:focus-visible::after {
  opacity: 1;
}

input[type='text'],
input[type='number'],
input[type='email'],
textarea,
select {
  width: 100%;
  border: 1px solid var(--Border_Medium);
  border-radius: 10px;
  padding: 8px 9px;
  background: color-mix(in srgb, var(--Surface_Contrast) 72%, transparent 28%);
  color: var(--Text_Primary);
  font-size: 12px;
  transition: border-color var(--Transition_Fast), box-shadow var(--Transition_Fast), background-color var(--Transition_Fast), transform var(--Transition_Fast);
}

textarea {
  min-height: 58px;
  resize: vertical;
  font-family: inherit;
}

select[multiple] {
  min-height: 134px;
}

.Form_Select_Control {
  display: grid;
  gap: 8px;
}

.Form_Chip_List {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.Form_Chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--Border_Medium);
  background: color-mix(in srgb, var(--Surface_Contrast) 72%, transparent 28%);
  color: var(--Text_Primary);
  padding: 4px 8px;
  font-size: 12px;
}

.Form_Chip_Icon {
  line-height: 1;
}

.Form_Chip_Remove {
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--Error_Background) 70%, transparent 30%);
  color: var(--Error_Text);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}

.Bad_Keywords_Control {
  display: grid;
  gap: 6px;
}

.Bad_Keywords_Entry_Row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.Bad_Keywords_Entry_Row .Bad_Keywords_Input {
  min-width: 0;
}

.Bad_Keywords_Chip_List {
  min-height: 22px;
}

.Bad_Keyword_Chip {
  gap: 0;
  transition: gap var(--Transition_Fast);
}

.Bad_Keyword_Chip .Form_Chip_Remove {
  width: 0;
  min-width: 0;
  opacity: 0;
  margin-left: 0;
  overflow: hidden;
  transform: scale(0.82);
  pointer-events: none;
  transition: width var(--Transition_Fast), opacity var(--Transition_Fast), margin-left var(--Transition_Fast), transform var(--Transition_Fast);
}

.Bad_Keyword_Chip:hover,
.Bad_Keyword_Chip:focus-within {
  gap: 6px;
}

.Bad_Keyword_Chip:hover .Form_Chip_Remove,
.Bad_Keyword_Chip:focus-within .Form_Chip_Remove {
  width: 18px;
  margin-left: 2px;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.Search_Row_Non_Query {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: var(--Primary);
}

input:focus,
textarea:focus,
select:focus,
button:focus-visible {
  outline: none;
  border-color: var(--Primary);
  box-shadow: 0 0 0 3px rgba(70, 136, 227, 0.2);
}

.Checkbox_Row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.Checkbox_Label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--Text_Primary);
  font-size: 13px;
}

.Shared_Checkbox_Label {
  min-height: 44px;
  align-self: end;
}

.Advanced_Details {
  margin-top: 8px;
  grid-column: 1 / -1;
  border: 1px solid var(--Border_Subtle);
  border-radius: 13px;
  background: color-mix(in srgb, var(--Surface_Tertiary) 82%, transparent 18%);
  overflow: hidden;
}

.Advanced_Summary {
  cursor: pointer;
  padding: 7px 10px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--Primary_Deep);
}

.Advanced_Grid {
  border-top: 1px solid var(--Border_Subtle);
  padding: 12px;
  display: grid;
  gap: 12px;
  align-items: start;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.Advanced_Grid .Field_Label {
  align-self: stretch;
}

.Advanced_Checkbox_Row {
  align-self: end;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.Control_Row {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.Command_Bar {
  border-top: 1px solid var(--Border_Subtle);
  padding-top: 12px;
}

.Button {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform var(--Transition_Fast), background-color var(--Transition_Fast), border-color var(--Transition_Fast), box-shadow var(--Transition_Fast), color var(--Transition_Fast);
}

.Button:hover {
  transform: translateY(-1px);
}

.Button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
}

.Button_Primary {
  margin-left: auto;
  background: linear-gradient(138deg, #215ba9 0%, #3e7fd7 48%, #67a3ee 100%);
  color: #f6faff;
  box-shadow: 0 12px 22px -12px rgba(26, 84, 159, 0.75);
}

.Button_Primary:hover {
  box-shadow: 0 16px 28px -10px rgba(26, 84, 159, 0.85);
}

.Button_Secondary {
  border-color: var(--Border_Medium);
  background: color-mix(in srgb, var(--Surface_Contrast) 68%, transparent 32%);
  color: var(--Text_Secondary);
}

.Button_Secondary:hover {
  border-color: var(--Border_Strong);
  color: var(--Text_Primary);
}

.Button_Danger {
  border-color: var(--Error_Border);
  background: var(--Error_Background);
  color: var(--Error_Text);
}

.Button_Small {
  padding: 6px 9px;
  font-size: 11px;
}

.Form_Status_Label {
  margin: 10px 0 0;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--Border_Medium);
  background: color-mix(in srgb, var(--Surface_Contrast) 74%, transparent 26%);
  color: var(--Text_Secondary);
  padding: 7px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.Form_Status_Label[data-tone='working'] {
  border-color: rgba(66, 126, 205, 0.56);
  color: var(--Primary_Deep);
  background: color-mix(in srgb, var(--Primary) 16%, var(--Surface_Contrast) 84%);
  animation: status-pulse 2.1s ease-in-out infinite;
}

.Form_Status_Label[data-tone='success'] {
  border-color: var(--Success_Border);
  color: var(--Success_Text);
  background: var(--Success_Background);
}

.Form_Status_Label[data-tone='warn'] {
  border-color: var(--Warn_Border);
  color: var(--Warn_Text);
  background: var(--Warn_Background);
}

.Form_Status_Label[data-tone='error'] {
  border-color: var(--Error_Border);
  color: var(--Error_Text);
  background: var(--Error_Background);
}

.Recent_Jobs_Section {
  border: 1px solid var(--Border_Medium);
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.18), transparent 48%), var(--Surface_Secondary);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.Runtime_Overview {
  margin-bottom: 12px;
  border: 1px solid var(--Border_Medium);
  border-radius: 14px;
  background: linear-gradient(152deg, rgba(255, 255, 255, 0.18), transparent 47%), var(--Surface_Secondary);
  padding: 10px;
  display: grid;
  gap: 10px;
}

.Job_Transition_Loader {
  border: 1px solid var(--Border_Subtle);
  border-radius: 14px;
  background:
    radial-gradient(560px 180px at 20% 0%, rgba(91, 144, 221, 0.18), transparent 58%),
    color-mix(in srgb, var(--Surface_Contrast) 74%, transparent 26%);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.Job_Transition_Header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.Job_Transition_Badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--Primary_Deep);
}

.Job_Transition_Badge_Dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--Primary);
  box-shadow: 0 0 0 0 rgba(82, 138, 228, 0.45);
  animation: status-pulse 1.2s ease-in-out infinite;
}

.Job_Transition_Clock {
  font-family: var(--Mono_Font);
  font-size: 11px;
  color: var(--Text_Muted);
}

.Job_Transition_Title {
  font-size: 18px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--Text_Primary);
  font-weight: 800;
}

.Job_Transition_Copy {
  font-size: 12px;
  line-height: 1.45;
  color: var(--Text_Secondary);
}

.Job_Transition_Track {
  position: relative;
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--Border_Subtle);
  background: color-mix(in srgb, var(--Primary) 10%, var(--Surface_Tertiary) 90%);
}

.Job_Transition_Fill {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(92, 146, 225, 0.12) 20%, rgba(92, 146, 225, 0.9) 50%, rgba(92, 146, 225, 0.12) 80%, transparent 100%);
  background-size: 200% 100%;
  animation: job-transition-sweep 1.05s linear infinite;
}

.Job_Transition_Phase_Row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.Job_Transition_Phase_Label {
  color: var(--Text_Muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.Job_Transition_Phase_Row strong {
  color: var(--Text_Primary);
}

.Job_Transition_Steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.Job_Transition_Step {
  border: 1px solid var(--Border_Subtle);
  border-radius: 10px;
  background: color-mix(in srgb, var(--Surface_Contrast) 76%, transparent 24%);
  padding: 8px 10px;
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: var(--Text_Secondary);
  overflow: hidden;
  position: relative;
}

.Job_Transition_Step::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(96, 146, 221, 0.18) 45%, transparent 100%);
  transform: translateX(-100%);
  opacity: 0;
}

.Job_Transition_Step_Label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9px;
  font-weight: 700;
  color: var(--Text_Muted);
}

.Job_Transition_Step_Name {
  margin: 0;
  font-size: 12px;
  color: var(--Text_Primary);
  line-height: 1.2;
  text-wrap: balance;
}

.Job_Transition_Step_Meta {
  font-size: 10px;
  color: var(--Text_Secondary);
}

.Job_Transition_Step.is-active {
  color: var(--Text_Primary);
  border-color: color-mix(in srgb, var(--Primary) 28%, var(--Border_Subtle) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.Job_Transition_Step.is-active::after {
  opacity: 1;
  animation: job-transition-step 1.35s ease-in-out infinite;
}

.Job_Transition_Summary {
  border: 1px solid var(--Border_Subtle);
  border-radius: 12px;
  background: color-mix(in srgb, var(--Surface_Contrast) 76%, transparent 24%);
  padding: 9px 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-size: 11px;
}

.Job_Transition_Summary_Label {
  color: var(--Text_Muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.Job_Transition_Summary_Value {
  font-family: var(--Mono_Font);
  color: var(--Primary_Deep);
  font-weight: 700;
}

.Runtime_Banner {
  border: 1px solid var(--Border_Medium);
  border-radius: 12px;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.Runtime_Banner[data-tone='working'],
.Runtime_Banner[data-tone='queued'],
.Runtime_Banner[data-tone='partial'] {
  border-color: rgba(76, 136, 217, 0.56);
  color: var(--Primary_Deep);
  background: color-mix(in srgb, var(--Primary) 14%, var(--Surface_Contrast) 86%);
}

.Runtime_Banner[data-tone='success'] {
  border-color: var(--Success_Border);
  color: var(--Success_Text);
  background: var(--Success_Background);
}

.Runtime_Banner[data-tone='error'] {
  border-color: var(--Error_Border);
  color: var(--Error_Text);
  background: var(--Error_Background);
}

.Runtime_Overview_Grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.Runtime_Chip {
  border: 1px solid var(--Border_Subtle);
  border-radius: 12px;
  background: color-mix(in srgb, var(--Surface_Contrast) 68%, transparent 32%);
  padding: 9px 10px;
  display: grid;
  gap: 4px;
}

.Runtime_Chip span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--Text_Muted);
  font-weight: 700;
}

.Runtime_Chip strong {
  font-size: 13px;
  color: var(--Text_Primary);
  font-family: var(--Mono_Font);
}

.Runtime_Progress {
  display: grid;
  gap: 6px;
}

.Runtime_Progress_Track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--Border_Subtle) 76%, transparent 24%);
}

.Runtime_Progress_Fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6ea6ee 0%, #3f88df 45%, #7fb4f2 100%);
  transition: width 320ms ease;
}

.Recent_Jobs_Title {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--Text_Secondary);
}

.Recent_Jobs_Hint {
  margin: -2px 0 0;
  font-size: 11px;
  color: var(--Text_Muted);
}

.Recent_Jobs_List {
  display: grid;
  gap: 8px;
}

.Recent_Job_Row {
  border: 1px solid var(--Border_Subtle);
  border-radius: 13px;
  background: color-mix(in srgb, var(--Surface_Contrast) 70%, transparent 30%);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  transition: border-color var(--Transition_Main), box-shadow var(--Transition_Main), transform var(--Transition_Main);
}

.Recent_Job_Row:hover {
  border-color: var(--Border_Strong);
  box-shadow: var(--Shadow_Edge);
  transform: translateY(-1px);
}

.Recent_Job_Row[data-loaded='true'] {
  border-color: rgba(82, 142, 223, 0.58);
  background: color-mix(in srgb, var(--Primary) 14%, var(--Surface_Contrast) 86%);
}

.Recent_Job_Info {
  display: grid;
  gap: 3px;
}

.Recent_Job_Id,
.Recent_Job_Meta {
  margin: 0;
}

.Recent_Job_Id {
  font-size: 13px;
  font-weight: 700;
}

.Recent_Job_Meta {
  font-size: 11px;
  color: var(--Text_Secondary);
}

.Recent_Job_Actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.Job_Summary {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(174px, 1fr));
  gap: 9px;
}

.Summary_Concurrency_Row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 9px;
}

.Summary_Chip {
  border: 1px solid var(--Border_Subtle);
  border-radius: 13px;
  background: color-mix(in srgb, var(--Surface_Contrast) 68%, transparent 32%);
  padding: 10px;
  display: grid;
  gap: 6px;
  transition: border-color var(--Transition_Main), box-shadow var(--Transition_Main), background-color var(--Transition_Main);
}

.Summary_Chip[data-summary-kind='progress'][data-active='true'] {
  border-color: rgba(85, 144, 222, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 12px 24px -18px rgba(48, 104, 181, 0.5);
}

.Summary_Chip[data-emphasis='active'] {
  border-color: rgba(87, 148, 225, 0.6);
  background: color-mix(in srgb, var(--Primary) 13%, var(--Surface_Contrast) 87%);
}

.Summary_List_Chip {
  border: 1px solid var(--Border_Subtle);
  border-radius: 13px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--Surface_Contrast) 76%, transparent 24%), color-mix(in srgb, var(--Surface_Contrast) 62%, transparent 38%));
  padding: 10px 11px;
  display: grid;
  gap: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.Summary_List_Chip[data-tone='running'] {
  border-color: rgba(87, 148, 225, 0.58);
  background: linear-gradient(180deg, color-mix(in srgb, var(--Primary) 18%, var(--Surface_Contrast) 82%), color-mix(in srgb, var(--Surface_Contrast) 68%, transparent 32%));
}

.Summary_List_Chip[data-tone='queued'] {
  border-color: var(--Queued_Border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--Queued_Background) 82%, var(--Surface_Contrast) 18%), color-mix(in srgb, var(--Surface_Contrast) 68%, transparent 32%));
}

.Summary_List_Chip_Label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--Text_Muted);
  font-weight: 700;
}

.Summary_List_Chip_Count {
  font-size: 14px;
  line-height: 1.1;
  color: var(--Text_Primary);
  font-family: var(--Mono_Font);
}

.Summary_List_Chip_Names {
  margin: 0;
  color: var(--Text_Secondary);
  font-size: 12px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
}

.Summary_Chip_Label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--Text_Muted);
  font-weight: 700;
}

.Summary_Chip_Value {
  font-size: 13px;
  color: var(--Text_Primary);
  font-family: var(--Mono_Font);
}

.Summary_Chip_Value[data-bool-tone='yes'],
.Info_Value[data-bool-tone='yes'],
.Inline_Boolean_Value[data-bool-tone='yes'] {
  color: var(--Success_Text);
}

.Summary_Chip_Value[data-bool-tone='no'],
.Info_Value[data-bool-tone='no'],
.Inline_Boolean_Value[data-bool-tone='no'] {
  color: var(--Error_Text);
}

.Inline_Boolean_Value {
  font-weight: 700;
}

.Progress_Track {
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--Border_Subtle) 76%, transparent 24%);
}

.Progress_Fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5b99ea 0%, #347fd9 46%, #78aeef 100%);
  transition: width 230ms ease;
}

.Summary_Chip[data-summary-kind='progress'][data-active='true'] .Progress_Fill {
  background-size: 145% 100%;
  animation: progress-wave 2.2s linear infinite;
}

.Email_Opt_In_Area {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 35;
  width: min(430px, calc(100vw - 24px));
  max-height: min(80vh, 560px);
  overflow: auto;
  border: 1px solid var(--Border_Medium);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 48%), var(--Surface_Tertiary);
  padding: 11px;
  display: grid;
  gap: 7px;
  box-shadow: var(--Shadow_Float);
}

.Email_Opt_In_Header_Row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.Email_Opt_In_Header {
  margin: 0;
  font-size: 13px;
}

.Email_Opt_In_Close {
  border: 1px solid var(--Border_Subtle);
  background: color-mix(in srgb, var(--Surface_Contrast) 76%, transparent 24%);
  color: var(--Text_Secondary);
  border-radius: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.Email_Opt_In_Close:hover {
  border-color: var(--Border_Medium);
  color: var(--Text_Primary);
}

html[dir='rtl'] .Email_Opt_In_Area {
  left: 50%;
  right: auto;
}

.Email_Opt_In_Message {
  margin: 0;
  font-size: 12px;
  color: var(--Text_Secondary);
}

.Email_Opt_In_Actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.Job_Completion_Popup_Overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(8, 18, 31, 0.42);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  padding: 16px;
}

.Job_Completion_Popup {
  width: min(460px, calc(100vw - 24px));
  border: 1px solid var(--Border_Medium);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 48%), var(--Surface_Tertiary);
  box-shadow: var(--Shadow_Float);
  padding: 12px;
  display: grid;
  gap: 9px;
}

.Job_Completion_Popup[data-tone='success'] {
  border-color: var(--Success_Border);
}

.Job_Completion_Popup[data-tone='error'] {
  border-color: var(--Error_Border);
}

.Job_Completion_Popup_Header_Row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.Job_Completion_Popup_Header {
  margin: 0;
  font-size: 14px;
}

.Job_Completion_Popup_Close {
  border: 1px solid var(--Border_Subtle);
  background: color-mix(in srgb, var(--Surface_Contrast) 76%, transparent 24%);
  color: var(--Text_Secondary);
  border-radius: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.Job_Completion_Popup_Close:hover {
  border-color: var(--Border_Medium);
  color: var(--Text_Primary);
}

.Job_Completion_Popup_Message {
  margin: 0;
  color: var(--Text_Secondary);
  font-size: 13px;
}

.Job_Completion_Popup_Meta {
  margin: 0;
  color: var(--Text_Muted);
  font-size: 12px;
  font-family: var(--Mono_Font);
}

.Job_Completion_Popup_Actions {
  display: flex;
  justify-content: flex-end;
}

.Item_Cards {
  margin-top: 13px;
  display: grid;
  gap: 12px;
}

.Item_Card {
  border: 1px solid var(--Border_Medium);
  border-left: 4px solid var(--Border_Strong);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), transparent 52%), var(--Surface_Secondary);
  padding: 10px;
  display: grid;
  gap: 0;
  transition: transform var(--Transition_Main), border-color var(--Transition_Main), box-shadow var(--Transition_Main);
}

.Item_Card:hover {
  transform: translateY(-2px);
  box-shadow: var(--Shadow_Edge);
}

.Item_Card[data-active='true'] {
  box-shadow: var(--Shadow_Float);
}

.Item_Card[data-item-tone='queued'] {
  border-left-color: var(--Queued_Border);
}

.Item_Card[data-item-tone='working'] {
  border-left-color: rgba(92, 150, 229, 0.7);
}

.Item_Card[data-item-tone='partial'] {
  border-left-color: var(--Partial_Border);
}

.Item_Card[data-item-tone='success'] {
  border-left-color: var(--Success_Border);
}

.Item_Card[data-item-tone='error'] {
  border-left-color: var(--Error_Border);
}

.Item_Card_Header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
}

.Item_Header_Left h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.Item_Subtitle {
  margin: 3px 0 0;
  font-size: 11px;
  color: var(--Text_Secondary);
}

.Item_Header_Right {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
}

.Item_Card:not(:hover):not(:focus-within):not([data-expanded='true']):not([data-finished='true']) .Item_Subtitle,
.Item_Card:not(:hover):not(:focus-within):not([data-expanded='true']):not([data-finished='true']) .Item_Progress_Row,
.Item_Card:not(:hover):not(:focus-within):not([data-expanded='true']):not([data-finished='true']) .Item_Info_Grid,
.Item_Card:not(:hover):not(:focus-within):not([data-expanded='true']):not([data-finished='true']) .Item_Subsection {
  display: none;
}

.Item_Card:hover,
.Item_Card:focus-within,
.Item_Card[data-expanded='true'],
.Item_Card[data-finished='true'] {
  gap: 11px;
}

.Item_Card:hover .Item_Card_Header,
.Item_Card:focus-within .Item_Card_Header,
.Item_Card[data-expanded='true'] .Item_Card_Header,
.Item_Card[data-finished='true'] .Item_Card_Header {
  align-items: flex-start;
}

.Item_Card:hover .Item_Header_Right,
.Item_Card:focus-within .Item_Header_Right,
.Item_Card[data-expanded='true'] .Item_Header_Right,
.Item_Card[data-finished='true'] .Item_Header_Right {
  flex-wrap: wrap;
}

.Status_Badge,
.Indicator_Badge {
  border-radius: 999px;
  border: 1px solid var(--Border_Medium);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 5px 9px;
}

.Status_Badge {
  color: var(--Text_Secondary);
  background: color-mix(in srgb, var(--Surface_Contrast) 70%, transparent 30%);
}

.Status_Badge[data-tone='working'] {
  color: var(--Primary_Deep);
  border-color: rgba(76, 136, 217, 0.56);
  background: color-mix(in srgb, var(--Primary) 16%, var(--Surface_Contrast) 84%);
}

.Status_Badge[data-tone='queued'] {
  color: var(--Queued_Text);
  border-color: var(--Queued_Border);
  background: var(--Queued_Background);
}

.Status_Badge[data-tone='partial'] {
  color: var(--Partial_Text);
  border-color: var(--Partial_Border);
  background: var(--Partial_Background);
}

.Status_Badge[data-tone='success'] {
  color: var(--Success_Text);
  border-color: color-mix(in srgb, var(--Success_Border) 58%, #2faf62 42%);
  background: linear-gradient(145deg, rgba(67, 182, 112, 0.2), var(--Success_Background));
  box-shadow: 0 0 0 1px rgba(76, 183, 119, 0.24);
}

.Status_Badge[data-tone='error'] {
  color: var(--Error_Text);
  border-color: var(--Error_Border);
  background: var(--Error_Background);
}

.Indicator_Badge[data-kind='active'] {
  color: var(--Primary_Deep);
  border-color: rgba(80, 143, 224, 0.56);
  background: color-mix(in srgb, var(--Primary) 15%, var(--Surface_Contrast) 85%);
  animation: status-pulse 2.25s ease-in-out infinite;
}

.Indicator_Badge[data-kind='queued'] {
  color: var(--Queued_Text);
  border-color: var(--Queued_Border);
  background: var(--Queued_Background);
}

.Indicator_Badge[data-kind='idle'] {
  color: var(--Text_Muted);
  border-color: var(--Border_Subtle);
  background: color-mix(in srgb, var(--Surface_Contrast) 67%, transparent 33%);
}

.Indicator_Badge[data-kind='final'] {
  color: var(--Success_Text);
  border-color: color-mix(in srgb, var(--Success_Border) 55%, #2caf5c 45%);
  background: linear-gradient(145deg, rgba(84, 198, 129, 0.22), var(--Success_Background));
}

.Indicator_Badge[data-kind='failed'] {
  color: var(--Error_Text);
  border-color: var(--Error_Border);
  background: var(--Error_Background);
}

.Item_Info_Grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.Item_Progress_Row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.Info_Row {
  border: 1px solid var(--Border_Subtle);
  border-radius: 12px;
  background: color-mix(in srgb, var(--Surface_Contrast) 68%, transparent 32%);
  padding: 9px 10px;
  display: grid;
  gap: 3px;
}

.Info_Row_Error {
  border-color: var(--Error_Border);
  background: var(--Error_Background);
}

.Info_Label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--Text_Muted);
}

.Info_Value {
  font-size: 12px;
  color: var(--Text_Primary);
  overflow-wrap: anywhere;
}

.Item_Subsection {
  border-top: 1px solid var(--Border_Subtle);
  padding-top: 10px;
}

.Subsection_Title {
  margin: 0 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--Text_Secondary);
}

.Subsection_Description {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--Text_Muted);
}

.Simple_List {
  margin: 0;
  padding-left: 17px;
  display: grid;
  gap: 4px;
  color: var(--Text_Secondary);
  font-size: 13px;
}

.Muted_Text {
  margin: 0;
  color: var(--Text_Muted);
  font-size: 12px;
}

.Best_Prices_Block {
  border: 1px solid var(--Border_Medium);
  border-radius: 16px;
  background: color-mix(in srgb, var(--Surface_Contrast) 78%, transparent 22%);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.Item_Subsection[data-block-variant='latest'] .Best_Prices_Block {
  border-color: rgba(90, 145, 222, 0.42);
  background: color-mix(in srgb, var(--Primary) 8%, var(--Surface_Contrast) 92%);
}

.Best_Prices_Summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.Mini_Chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--Border_Subtle);
  background: color-mix(in srgb, var(--Surface_Tertiary) 82%, transparent 18%);
  color: var(--Text_Primary);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
}

.Mini_Chip[data-metric='true'] {
  border-color: rgba(85, 144, 224, 0.54);
  color: var(--Primary_Deep);
}

.Mini_Chip[data-iherb-brand='true'] {
  border-color: rgba(66, 179, 129, 0.55);
  color: #3aa872;
}

.Metric_Help {
  margin: 0;
  color: var(--Text_Secondary);
  font-size: 12px;
  line-height: 1.4;
}

.Best_Prices_Grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.Product_Card {
  border: 1px solid var(--Border_Medium);
  border-radius: 14px;
  background: color-mix(in srgb, var(--Surface_Contrast) 84%, transparent 16%);
  padding: 13px;
  display: grid;
  gap: 11px;
  align-content: start;
  transition: transform var(--Transition_Fast), border-color var(--Transition_Fast), box-shadow var(--Transition_Fast);
}

.Product_Badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.Rank_Badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(244, 181, 69, 0.6);
  background: color-mix(in srgb, #f4b545 17%, var(--Surface_Contrast) 83%);
  color: var(--Text_Primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 8px;
}

.iHerb_Owned_Badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(66, 179, 129, 0.5);
  background: color-mix(in srgb, #42b381 18%, var(--Surface_Contrast) 82%);
  color: #2f9161;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 8px;
}

.Comparison_Delta_Row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--Border_Subtle);
}

.Delta_Pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(85, 144, 224, 0.42);
  background: color-mix(in srgb, var(--Primary) 14%, var(--Surface_Contrast) 86%);
  color: var(--Text_Primary);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
  padding: 5px 10px;
}

.Delta_Pill[data-value-tone='success'] {
  border-color: var(--Success_Border);
  background: var(--Success_Background);
  color: var(--Success_Text);
}

.Delta_Pill[data-value-tone='danger'] {
  border-color: var(--Error_Border);
  background: var(--Error_Background);
  color: var(--Error_Text);
}

.Delta_Pill_iHerb {
  border-color: rgba(66, 179, 129, 0.44);
  background: color-mix(in srgb, #42b381 14%, var(--Surface_Contrast) 86%);
}

.Product_Card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--Primary) 35%, var(--Border_Strong) 65%);
  box-shadow: var(--Shadow_Edge), 0 0 0 1px color-mix(in srgb, var(--Primary) 20%, transparent 80%);
}

.Product_Header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.Product_Title {
  margin: 0;
  color: var(--Text_Primary);
  font-size: 14px;
  line-height: 1.4;
}

.Open_Product_Link {
  display: inline-flex;
  align-items: center;
  align-self: start;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgba(79, 139, 220, 0.52);
  background: color-mix(in srgb, var(--Primary) 12%, var(--Surface_Contrast) 88%);
  color: var(--Primary_Deep);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
}

.Open_Product_Link:hover {
  text-decoration: underline;
}

.Product_Primary {
  border: 1px solid var(--Border_Medium);
  border-radius: 12px;
  padding: 10px;
  background: color-mix(in srgb, var(--Surface_Tertiary) 84%, transparent 16%);
}

.Product_Groups {
  display: grid;
  gap: 8px;
}

.Product_Group {
  border: 1px solid var(--Border_Subtle);
  border-radius: 10px;
  padding: 8px;
  background: color-mix(in srgb, var(--Surface_Contrast) 72%, transparent 28%);
}

.Product_Group[data-group='price'] {
  border-color: color-mix(in srgb, var(--Primary) 38%, var(--Border_Subtle) 62%);
}

.Product_Group[data-group='engagement'] {
  border-color: color-mix(in srgb, #42b381 34%, var(--Border_Subtle) 66%);
}

.Product_Group[data-group='specs'] {
  border-color: color-mix(in srgb, #f4b545 34%, var(--Border_Subtle) 66%);
}

.Product_Group_Title {
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--Text_Muted);
}

.Meta_List {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  gap: 6px 10px;
  align-items: start;
  font-size: 13px;
}

.Meta_List dt {
  color: var(--Text_Secondary);
  font-weight: 700;
}

.Meta_List dd {
  margin: 0;
  color: var(--Text_Primary);
  font-weight: 700;
  text-align: right;
  justify-self: end;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--Surface_Contrast) 58%, transparent 42%);
}

.Meta_List dd[data-field-group='price'] {
  color: var(--Primary_Deep);
  border-color: color-mix(in srgb, var(--Primary) 34%, transparent 66%);
  background: color-mix(in srgb, var(--Primary) 10%, var(--Surface_Contrast) 90%);
}

.Meta_List dd[data-field-group='engagement'] {
  color: #2f9161;
  border-color: color-mix(in srgb, #42b381 34%, transparent 66%);
  background: color-mix(in srgb, #42b381 11%, var(--Surface_Contrast) 89%);
}

.Meta_List dd[data-value-tone='success'] {
  border-color: var(--Success_Border);
  background: var(--Success_Background);
  color: var(--Success_Text);
}

.Meta_List dd[data-value-tone='warn'] {
  border-color: var(--Warn_Border);
  background: var(--Warn_Background);
  color: var(--Warn_Text);
}

.Meta_List dd[data-value-tone='danger'] {
  border-color: var(--Error_Border);
  background: var(--Error_Background);
  color: var(--Error_Text);
}

.Meta_List dd[data-value-tone='accent'] {
  border-color: color-mix(in srgb, var(--Primary) 42%, transparent 58%);
  background: color-mix(in srgb, var(--Primary) 14%, var(--Surface_Contrast) 86%);
  color: var(--Primary_Deep);
}

.Meta_List dd[data-value-tone='price'] {
  border-color: color-mix(in srgb, var(--Primary) 42%, transparent 58%);
  background: color-mix(in srgb, var(--Primary) 14%, var(--Surface_Contrast) 86%);
  color: var(--Primary_Deep);
}

.Meta_List_Primary dd {
  white-space: nowrap;
}

.Secondary_Details {
  border-top: 1px solid var(--Border_Subtle);
  padding-top: 8px;
}

.Secondary_Summary {
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--Text_Secondary);
  font-weight: 700;
}

.Star_Rating_Input {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.Star_Rating_Stars {
  display: inline-flex;
  gap: 2px;
}

.Star_Button {
  border: none;
  background: transparent;
  color: #bfd0e6;
  font-size: 23px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: transform var(--Transition_Fast), color var(--Transition_Fast);
}

.Star_Button:hover,
.Star_Button:focus-visible {
  color: #9dbde3;
  transform: translateY(-1px);
}

.Star_Button[data-fill='full'] {
  color: #f4b545;
}

.Star_Button[data-fill='half'] {
  color: transparent;
  background: linear-gradient(90deg, #f4b545 50%, #bfd0e6 50%);
  background-clip: text;
  -webkit-background-clip: text;
}

.Star_Rating_Value {
  min-width: 44px;
  font-size: 12px;
  color: var(--Text_Secondary);
}

.Star_Rating_Clear {
  border: 1px solid var(--Border_Medium);
  border-radius: 8px;
  background: color-mix(in srgb, var(--Surface_Contrast) 72%, transparent 28%);
  color: var(--Text_Secondary);
  font-size: 11px;
  padding: 5px 8px;
  cursor: pointer;
}

@keyframes status-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(73, 133, 214, 0.36);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(73, 133, 214, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(73, 133, 214, 0);
  }
}

@keyframes progress-wave {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 145% 0;
  }
}

@keyframes canvas-drift-one {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(22px, -10px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes canvas-drift-two {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-18px, 14px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes job-transition-sweep {
  0% {
    transform: translateX(-52%);
  }
  100% {
    transform: translateX(52%);
  }
}

@keyframes job-transition-step {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(160%);
  }
}

@keyframes boot-pulse {
  0% {
    transform: scale(0.92);
    box-shadow: 0 0 0 0 rgba(82, 138, 228, 0.42);
  }
  65% {
    transform: scale(1);
    box-shadow: 0 0 0 12px rgba(82, 138, 228, 0);
  }
  100% {
    transform: scale(0.92);
    box-shadow: 0 0 0 0 rgba(82, 138, 228, 0);
  }
}

@keyframes boot-sweep {
  0% {
    transform: translateX(-48%);
  }
  100% {
    transform: translateX(48%);
  }
}

html[data-motion='full'] .Canvas_Aurora_One {
  animation: canvas-drift-one 18s ease-in-out infinite;
}

html[data-motion='full'] .Canvas_Aurora_Two {
  animation: canvas-drift-two 22s ease-in-out infinite;
}

html[data-motion='full'] .Boot_Screen_Track_Fill {
  animation-duration: 1.05s;
}

html[data-motion='reduced'] .Boot_Screen_Signal_Dot,
html[data-motion='reduced'] .Boot_Screen_Track_Fill {
  animation: none;
}

html[data-motion='reduced'] .Job_Transition_Fill,
html[data-motion='reduced'] .Job_Transition_Step.is-active::after {
  animation: none;
}

body {
  padding-left: 166px;
}

html[dir='rtl'] body {
  padding-left: 0;
  padding-right: 166px;
}

html[dir='rtl'] .Preference_Sidebar {
  left: auto;
  right: 10px;
}

@media (max-width: 1160px) {
  body {
    padding-left: 0;
  }

  html[dir='rtl'] body {
    padding-right: 0;
  }

  .Preference_Sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .App_Layout {
    width: min(1400px, calc(100% - 26px));
  }

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

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

  .Query_Studio,
  .Live_Console {
    border-radius: var(--Radius_M);
  }
}

@media (max-width: 860px) {
  .Shared_Options_Grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .Search_Row_Grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .Search_Row_Non_Query {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .Advanced_Grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

@media (max-width: 640px) {
  .App_Layout {
    width: calc(100% - 14px);
    margin-top: 12px;
    gap: 12px;
  }

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

  .Hero_Card,
  .Panel_Card {
    padding: 13px;
    border-radius: 16px;
  }

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

  .Segmented_Control {
    flex-wrap: wrap;
  }

  .Shared_Options_Grid,
  .Search_Row_Grid,
  .Advanced_Grid {
    grid-template-columns: 1fr;
  }

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

  .Advanced_Grid .Field_Label:last-child {
    grid-column: auto;
  }

  .Product_Header,
  .Recent_Job_Row,
  .Panel_Header_With_Action {
    flex-direction: column;
    align-items: stretch;
  }

  .Recent_Job_Actions,
  .Item_Header_Right {
    justify-content: flex-start;
  }

  .Button,
  .Button_Small {
    width: 100%;
  }

  .Button_Primary {
    margin-left: 0;
  }

  .Email_Opt_In_Area {
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(430px, calc(100vw - 16px));
  }

  .Control_Row {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html[data-motion='reduced'] *,
html[data-motion='reduced'] *::before,
html[data-motion='reduced'] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}