@charset "UTF-8";

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  min-height: 100%;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  line-height: 1.5;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

:root {
  --color-black: #151515;
  --color-panel: #343434;
  --color-panel-soft: #3c3c3c;
  --color-control: #4b4b4b;
  --color-control-hover: #595959;
  --color-text: #f4f4f4;
  --color-muted: #b3b3b3;
  --color-brand: #e5fe28;
  --color-accent: #6f00ff;
  --color-border: rgba(255, 255, 255, 0.14);
  --color-shadow: rgba(0, 0, 0, 0.35);

  --font-main: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --screen-max-w: 80rem;
  --screen-max-h: 50rem;
  --shell-inset: clamp(0.35rem, 1.1vw, 1rem);
  --status-h: clamp(2.5rem, 4.125vw, 3.3rem);
  --page-inset: clamp(0.85rem, 1.875vw, 1.5rem);
  --radius-sm: clamp(0.35rem, 0.45vw, 0.55rem);
  --radius-md: clamp(0.55rem, 0.7vw, 0.8rem);
  --focus-ring: 0 0 0 clamp(0.12rem, 0.2vw, 0.18rem) rgba(111, 0, 255, 0.45);

  --label-size: clamp(1.05rem, calc(0.8rem + 0.35vw), 1.08rem);
  --input-h: clamp(3.2rem, calc(2.5rem + 2vw), 4.1rem);
  --form-gap-x: clamp(0.95rem, calc(0.5rem + 1.25vw), 1.5rem);
  --form-gap-y: clamp(0.85rem, calc(0.55rem + 0.9vw), 1.25rem);
  --form-w: clamp(22rem, calc(12rem + 34vw), 36rem);

  --nav-btn-size: clamp(4.2rem, calc(3.25rem + 4vw), 5.5rem);
  --nav-gap: clamp(0.55rem, calc(0.2rem + 1.1vw), 1.05rem);
  --nav-label-size: clamp(0.68rem, calc(0.45rem + 0.45vw), 0.88rem);
}

body {
  display: grid;
  place-items: center;
  padding: var(--shell-inset);
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 15%, rgba(111, 0, 255, 0.22), transparent 35rem),
    radial-gradient(circle at 85% 85%, rgba(0, 180, 255, 0.15), transparent 40rem),
    radial-gradient(circle at 50% 45%, #2c364d 0%, #1e2338 78%); /* Significantly brightened slate-blue glow centered directly behind the header/panel for premium separation */
  color: var(--color-text);
  font-family: var(--font-main);
}

.device-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  width: min(calc(100vw - (var(--shell-inset) * 2)), var(--screen-max-w));
  height: min(calc(100svh - (var(--shell-inset) * 2)), var(--screen-max-h));
  overflow: hidden;
  background: var(--color-panel);
  box-shadow: 0 1.4rem 4rem var(--color-shadow);
  isolation: isolate;

  --label-size: clamp(1rem, calc(0.5rem + 0.9cqw), 1.08rem);
  --field-font-size: var(--label-size);
  --status-font-size: clamp(0.75rem, calc(0.45rem + 0.45cqw), 0.8rem);
  --input-h: clamp(3.2rem, calc(1.45rem + 4.75cqw), 4.1rem);
  --form-gap-x: clamp(0.95rem, calc(0.35rem + 1.2cqw), 1.5rem);
  --form-gap-y: clamp(0.85rem, calc(0.25rem + 1.25cqw), 1.25rem);
  --form-w: 36rem;
  --form-padding: clamp(1.1rem, calc(0.65rem + 2.95cqw), 1.8rem);
  --content-padding: clamp(1rem, 2.5cqw, 2.2rem);
  --login-button-min-w: clamp(8.8rem, 16cqw, 12rem);
  --login-button-min-h: clamp(3.15rem, calc(1.7rem + 3.5cqw), 3.8rem);
  --login-button-font-size: clamp(1rem, calc(0.5rem + 0.95cqw), 1.09rem);
  --nav-btn-size: clamp(4.5rem, calc(1.5rem + 8.5cqw), 7.5rem); /* Scales with container width up to 120px on FullHD (7.5rem) */
  --nav-gap: clamp(0.55rem, calc(0.2rem + 1.15cqw), 1.05rem);
  --nav-label-size: clamp(0.72rem, calc(0.35rem + 0.8cqw), 1rem); /* Proportional scaling for label */
  --nav-icon-size: clamp(1.85rem, calc(0.85rem + 3cqw), 3.2rem); /* Proportional scaling for icon */
  --brand-w: clamp(10.5rem, 20cqw, 16.2rem);
}

.device-shell::before {
  content: "";
  position: absolute;
  inset: var(--status-h) 0 0;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 42%),
    linear-gradient(315deg, rgba(21, 21, 21, 0.42), transparent 55%);
}

.status-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--status-h);
  padding-inline: var(--page-inset);
  background: var(--color-black);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.software-version {
  color: var(--color-muted);
  font-size: clamp(0.625rem, 1.1cqw, 0.875rem); /* Exactly matches logo height, up to 14px */
  line-height: 1; /* Pure net height, no extra line-height padding */
  font-weight: 700;
  letter-spacing: 0.03em;
}

.status-time {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-brand);
  white-space: nowrap;
  font-size: clamp(0.625rem, 1.1cqw, 0.875rem); /* Exactly matches software-version height */
  line-height: 1; /* Pure net height */
  font-weight: 700;
  letter-spacing: 0.03em;
}

.brand {
  position: absolute;
  top: 50%;
  right: var(--page-inset);
  height: clamp(0.625rem, 1.1cqw, 0.875rem); /* Up to exactly 14px */
  width: auto;
  transform: translateY(-50%);
  color: var(--color-text);
  opacity: 0.92;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Align narrow small logo to the right of bounding box on mobile */
}

.brand-logo {
  height: 100%;
  width: auto;
}

.brand-logo.small-logo {
  display: none;
}

.brand-logo .cls-1 {
  fill: currentColor;
}

.content {
  position: absolute;
  inset: var(--status-h) 0 0;
  display: grid;
  place-items: center;
  padding: var(--content-padding);
}

.login-form {
  display: grid;
  grid-template-columns: max-content minmax(13rem, 1fr);
  align-items: center;
  column-gap: var(--form-gap-x);
  row-gap: var(--form-gap-y);
  width: min(var(--form-w), calc(100% - (var(--page-inset) * 2)));
  padding: var(--form-padding);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: rgba(21, 21, 21, 0.14);
  backdrop-filter: blur(0.6rem);
}

.login-form label {
  color: var(--color-brand);
  font-size: var(--label-size);
  font-weight: 700;
  line-height: 1.1;
}

.login-form input {
  min-width: 0;
  width: 100%;
  height: var(--input-h);
  padding-inline: clamp(0.9rem, 1.6vw, 1.2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: none;
  background: #eeeeee;
  color: var(--color-black);
  font-size: var(--field-font-size);
  font-weight: 700;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.login-form input::placeholder {
  color: #777777;
  font-weight: 500;
}

.login-form input:focus-visible {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
  background: #ffffff;
}

.login-button {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: var(--login-button-min-w);
  min-height: var(--login-button-min-h);
  margin-top: clamp(0.35rem, 1vw, 0.8rem);
  border-radius: var(--radius-sm);
  background: var(--color-control);
  color: var(--color-text);
  font-size: var(--login-button-font-size);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.login-button:hover,
.icon-button:hover,
.nav-button:hover,
.side-button:hover,
.mode-card:hover {
  background: var(--color-control-hover);
  color: var(--color-brand);
}

.login-button:active,
.icon-button:active,
.nav-button:active,
.side-button:active,
.mode-card:active {
  transform: translateY(1px) scale(0.99);
}

.login-button:focus-visible,
.icon-button:focus-visible,
.nav-button:focus-visible,
.side-button:focus-visible,
.mode-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.icon-button,
.nav-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  background: var(--color-control);
  color: var(--color-muted);
  text-decoration: none !important; /* Premium button state reset, eliminates standard browser underlines */
  box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.18);
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.icon-button svg,
.nav-button svg,
.side-button svg,
.mode-card svg {
  width: var(--nav-icon-size);
  aspect-ratio: 1;
  fill: currentColor;
}

.settings-button {
  position: absolute;
  top: calc(var(--status-h) + var(--page-inset));
  right: var(--page-inset);
  z-index: 3;
  gap: clamp(0.25rem, 0.6vw, 0.45rem);
  color: var(--color-text);
}

.settings-button span,
.power-button span,
.nav-button span {
  font-size: var(--nav-label-size);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
}

.bottom-nav {
  position: absolute;
  left: 50%;
  bottom: var(--page-inset);
  z-index: 2;
  display: flex;
  max-width: calc(100% - (var(--page-inset) * 2));
  gap: var(--nav-gap);
  transform: translateX(-50%);
}

.settings-button,
.nav-button,
.power-button,
.bottom-left-btn,
.bottom-right-btn {
  width: var(--nav-btn-size);
  height: var(--nav-btn-size);
  aspect-ratio: 1;
  gap: 0.35rem; /* Slightly larger premium spacing between icon and text */
}

.bottom-left-btn {
  position: absolute;
  bottom: var(--page-inset);
  left: var(--page-inset);
  z-index: 3;
  color: var(--color-text);
}

.bottom-right-btn {
  position: absolute;
  bottom: var(--page-inset);
  right: var(--page-inset);
  z-index: 3;
  color: var(--color-text);
}

.bottom-right-btn.is-active-start {
  border-color: rgba(229, 254, 40, 0.7);
  background: var(--color-brand);
  color: var(--color-black);
  box-shadow: 0 0.7rem 1.8rem rgba(229, 254, 40, 0.16);
}

.bottom-right-btn.is-active-start:hover {
  background: var(--color-brand);
  color: var(--color-black);
}

.nav-button.is-active {
  border-color: rgba(229, 254, 40, 0.7);
  background: var(--color-brand);
  color: var(--color-black);
  box-shadow: 0 0.7rem 1.8rem rgba(229, 254, 40, 0.16);
}

.nav-button.is-active:hover,
.side-button.is-active:hover,
.mode-card.is-active:hover {
  background: var(--color-brand);
  color: var(--color-black);
}

.power-button {
  position: absolute;
  top: calc(var(--status-h) + var(--page-inset));
  left: var(--page-inset);
  right: auto;
  bottom: auto;
  z-index: 3;
  color: var(--color-text);
}

.power-button:hover {
  color: var(--color-brand);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 48rem) {
  :root {
    --status-h: clamp(2.35rem, 8vw, 3rem);
    --shell-inset: clamp(0.25rem, 1.25vw, 0.55rem);
  }

  .device-shell {
    --nav-btn-size: clamp(3.9rem, calc(3.1rem + 3.4cqw), 4.8rem);
    --nav-gap: clamp(0.34rem, 1.6cqw, 0.75rem);
    --nav-label-size: clamp(0.58rem, calc(0.45rem + 0.45cqw), 0.7rem);
    --nav-icon-size: clamp(1.75rem, calc(1.2rem + 1.8cqw), 2.25rem); /* Increased icon size */
    --brand-w: clamp(7.5rem, 28cqw, 11rem);
  }

  .brand {
    width: var(--brand-w);
  }

  .software-version {
    max-width: 35vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .login-form {
    grid-template-columns: 1fr;
    row-gap: clamp(0.28rem, 1cqw, 0.42rem);
  }

  .login-form label:not(:first-of-type) {
    margin-top: clamp(0.45rem, 2cqw, 0.8rem);
  }
}

@media (max-height: 38rem) {
  .device-shell {
    --input-h: clamp(2.8rem, 8vh, 3.35rem);
    --form-padding: clamp(0.85rem, 2vh, 1.2rem);
  }
}

@media (max-width: 26rem) {
  .device-shell {
    --nav-btn-size: clamp(3.45rem, calc(3rem + 1.75cqw), 3.8rem);
    --nav-gap: clamp(0.22rem, 1.1cqw, 0.4rem);
    --nav-label-size: clamp(0.54rem, calc(0.43rem + 0.34cqw), 0.62rem);
    --nav-icon-size: clamp(1.6rem, calc(1.2rem + 1.3cqw), 1.95rem); /* Increased icon size */
  }
}

/* Dedicated Content Area for Perfect Centering */
.content-area {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column; /* ALWAYS vertical flow for proper top-to-bottom layout hierarchy */
  align-items: center;
  justify-content: center; /* Center vertically by default (perfect for home streams page) */
  width: 100%;
  padding-inline: var(--content-padding);
  box-sizing: border-box;
  min-height: 0;
  gap: clamp(1.2rem, 3cqh, 2.5rem); /* Premium layout spacing between titles and grids */
}

/* Align content to the top on wizard pages containing titles. This locks titles to identical top positions, preventing any vertical shift or jiggling when swapping between steps. */
.content-area:has(.page-title-section) {
  justify-content: flex-start !important;
  padding-top: clamp(1.5rem, 5cqh, 3.2rem) !important;
  padding-bottom: clamp(1rem, 4cqh, 2.5rem) !important;
}

/* Streams grid in the center content area - expanded for maximum screen usage */
.streams-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.8rem, 2.5cqw, 1.8rem);
  width: 100%;
  max-width: clamp(24rem, 96cqw, 82rem); /* Starts shrinking immediately at 1280px, eliminating huge empty margins */
  padding-inline: 0; /* Removed left-right padding as requested */
  box-sizing: border-box;
}

@media (max-height: 48rem) {
  /* Safely restrict the total grid width on short/landscape screens so that the columns (and therefore the streams) shrink vertically to fit, preserving the exact 19:16 aspect ratio perfectly without any stretching or squishing */
  .streams-grid {
    max-width: calc((100svh - 15rem) * 2.2);
  }
}

.camera-stream {
  position: relative;
  aspect-ratio: 19 / 16;
  width: 100%; /* Force grid cells to determine width, ensuring they fill columns and touch the center gap perfectly */
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  box-shadow: 0 1rem 2.8rem rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

.camera-stream:hover {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 1.4rem 3.2rem rgba(0, 0, 0, 0.48);
}

.stream-badge {
  position: absolute;
  top: clamp(0.5rem, 1.5cqw, 0.85rem);
  left: clamp(0.5rem, 1.5cqw, 0.85rem);
  z-index: 2;
  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(4px);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--color-brand);
  font-size: clamp(0.68rem, 1.6cqw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(229, 254, 40, 0.15);
}

.stream-placeholder {
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.2) 50%), 
    linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.04));
  background-size: 100% 4px, 6px 100%;
  opacity: 0.85;
}

/* Dedicated Bottom Control Bar Container with side-by-side Back and Next navigation */
.bottom-control-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Push Back button left, wizard steps center, Next button right */
  width: 100%;
  height: calc(var(--nav-btn-size) + var(--page-inset) * 2);
  padding: var(--page-inset) var(--content-padding); /* Vertically padded with page-inset, horizontally aligned precisely with content columns! */
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Beautifully squeeze the wizard steps in the center on desktop/tablet */
.bottom-control-bar .wizard-steps {
  max-width: clamp(24rem, 50cqw, 38rem);
  margin-inline: auto; /* Symmetrically center the steps */
}

/* Ensure Back / Next arrow outline SVGs are transparent without any fill */
.bottom-control-bar .nav-button svg {
  fill: none !important;
  stroke: currentColor !important;
}

@media (max-width: 40rem) {
  .bottom-control-bar {
    padding-inline: var(--content-padding) !important; /* Keep aligned exactly with page content columns even on mobile! */
    padding-block: 0.65rem !important;
    height: auto !important;
    gap: 0.4rem !important;
  }

  /* Make Back/Next footer buttons more compact and pill-shaped on mobile to show both text and icon */
  .bottom-control-bar .nav-button {
    width: auto !important;
    height: clamp(2.6rem, 8cqw, 3rem) !important;
    padding-inline: clamp(0.5rem, 2cqw, 0.8rem) !important;
    border-radius: var(--radius-sm) !important;
    gap: 0.25rem !important;
  }

  /* Restore text labels on mobile with a compact font size so they easily fit */
  .bottom-control-bar .nav-button span {
    display: inline-block !important;
    font-size: clamp(0.72rem, 2.2cqw, 0.82rem) !important;
    font-weight: 700 !important;
  }

  /* Compact SVG arrows inside mobile footer buttons */
  .bottom-control-bar .nav-button svg {
    width: clamp(1rem, 3cqw, 1.2rem) !important;
    height: clamp(1rem, 3cqw, 1.2rem) !important;
  }

  /* Allow the middle wizard track to contract as much as possible */
  .bottom-control-bar .wizard-steps {
    max-width: none !important;
    flex: 1 1 auto !important;
    padding-inline: 0.15rem !important;
  }
}

@media (max-width: 40rem) {
  .device-shell {
    height: calc(100svh - (var(--shell-inset) * 2)); /* Force main box to take up full screen height, pushing header to the top and footer/gombok to the absolute bottom on mobile */
  }
  /* Remove overlay gradients on mobile to keep main panel background completely flat and uniform */
  .device-shell::before {
    display: none;
  }
  /* Disable box-shadow on mobile stacked streams to completely prevent shadow bleeding and darkening the gap */
  .camera-stream {
    box-shadow: none;
    justify-self: center; /* Center stacked stream boxes on mobile screen */
  }
  .brand-logo.standard-logo {
    display: none;
  }
  .brand-logo.small-logo {
    display: block;
  }
  
  /* Stacked camera streams layout for mobile transition - disabled height squeezing to prevent overlapping */
  .streams-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(0.8rem, 2cqh, 1.5rem) !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
  
  /* Bottom nav fills the bottom screen area proportionally like native tabs on mobile */
  .bottom-nav {
    position: static;
    transform: none;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    gap: clamp(0.3rem, 1.5cqw, 0.6rem);
  }
  .bottom-nav .nav-button {
    flex: 1 1 0;
    width: auto;
    height: var(--nav-btn-size);
    aspect-ratio: auto;
  }

  /* Content area scrollable and top-aligned on mobile to prevent overflows and overlaps */
  .content-area {
    justify-content: flex-start !important; /* Ensure scrolling begins from top */
    overflow-y: auto !important; /* Let the content scroll if it is too tall */
    padding-block: clamp(0.8rem, 2cqh, 1.5rem) !important; /* Compact padding */
    gap: 0.8rem !important;
    min-height: 0;
  }

  .limit-box {
    padding: 0.8rem 1.2rem;
    gap: 0.6rem;
  }

  /* Flawlessly aligned side-by-side auto-sized icon and label on mobile with same height and no extra margins */
  .limit-box-header {
    display: flex !important;
    flex-direction: row !important; /* Side-by-side [Icon] Label flow */
    align-items: center !important; /* Identical vertical baseline */
    justify-content: center !important;
    gap: 0.25rem !important; /* Halved from 0.5rem to 0.25rem as requested */
    margin-bottom: 0.4rem !important;
    width: 100% !important;
  }

  .limit-icon-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 1.95rem !important; /* Increased from 1.5rem to perfectly compensate for internal SVG padding */
    width: 2.3rem !important; /* Wider for car/truck horizontal inline alignment */
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }
  
  .limit-icon-container svg {
    height: 100% !important;
    width: auto !important;
    margin: 0 !important;
  }

  .vehicle-label {
    margin-bottom: 0 !important; /* No extra margin on mobile */
    font-size: 1.15rem !important; /* Perfect visual matching font size */
    font-weight: 700 !important;
    line-height: 1 !important; /* Perfect vertical matching alignment with the icon */
    color: var(--color-muted) !important;
  }

  .speed-sign {
    width: 5rem;
    height: 5rem;
    border-width: 0.45rem;
    margin-bottom: 0;
  }

  .speed-value {
    font-size: 2.1rem;
  }

  .page-title-section {
    padding-inline: 1rem;
    min-height: auto !important; /* Let title size to its natural height on mobile screens */
    margin-bottom: 0.8rem !important; /* Elegant spacing to push contents down and prevent any overlapping */
  }

  .page-title {
    font-size: 1.25rem;
  }

  .page-subtitle {
    font-size: 0.82rem;
  }

  /* Large tactile adjuster buttons for premium mobile touch experience with massive typography */
  .adjust-btn {
    width: 3.1rem !important;
    height: 3.1rem !important;
    font-size: 1.15rem !important; /* Noticeably larger typography inside buttons on mobile! */
    font-weight: 600 !important; /* Softened from 800 to a premium, sleek 600 weight */
  }
}

@media (max-width: 40rem) and (max-height: 46rem) {
  /* On narrow AND short mobile screens (like iPhone SE 375x667), limit the streams-grid max-width so that the stacked camera boxes automatically scale down in width and height to fit the vertical space perfectly without scrollbars, preserving 19:16 aspect ratio */
  .streams-grid {
    max-width: calc((100svh - 13.5rem) * 0.58);
  }
}

/* Page Header / Subtitle Info block */
.page-title-section {
  text-align: center;
  max-width: 38rem;
  margin-bottom: 0;
  box-sizing: border-box;
  min-height: clamp(4.5rem, 11cqh, 6rem); /* Locks identical title section height on both pages, even if subtitle takes 1 or 2 lines. This achieves perfect, pixel-stable text alignment. */
}

.page-title {
  color: var(--color-brand);
  font-size: clamp(1.4rem, 4cqh, 2.2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.page-subtitle {
  color: var(--color-muted);
  font-size: clamp(0.85rem, 2.2cqh, 1.15rem);
  line-height: 1.4;
  font-weight: 500;
}

/* Speed limits configuration page grid - expanded to match the home screen streams-grid width */
.limits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 3cqw, 2.5rem);
  width: 100%;
  max-width: clamp(24rem, 96cqw, 82rem); /* Set to 82rem to match .streams-grid exactly, ensuring perfect side-by-side alignment with the Back/Next footer buttons */
  box-sizing: border-box;
}

@media (max-width: 40rem) {
  .limits-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.limit-box {
  background: var(--color-panel-soft);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: clamp(1rem, 3.5cqh, 2.2rem) clamp(1rem, 3cqw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
  transition: border-color 200ms ease;
  box-sizing: border-box;
}

.limit-box:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.limit-box-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.limit-icon-container {
  height: clamp(3rem, 7cqh, 4.2rem);
  width: auto;
  color: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.2rem; /* Reduced to sit extremely close to the vehicle-label directly below it */
}

.limit-icon-container svg {
  height: 100%;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}

.adjuster-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4cqw, 2.2rem);
  width: 100%;
  margin-bottom: clamp(1rem, 2.5cqh, 1.8rem);
}

.adjuster-column {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.adjust-btn {
  width: clamp(3.3rem, 7cqw, 4.1rem); /* Markedly larger button size for premium click experience */
  height: clamp(3.3rem, 7cqw, 4.1rem);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--color-control);
  color: var(--color-text);
  font-weight: 600; /* Sleek, medium-bold 600 weight inside buttons */
  font-size: clamp(1.2rem, 2.5cqw, 1.45rem); /* Markedly larger text sizes! */
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 160ms ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.adjust-btn:hover {
  background: var(--color-control-hover);
  border-color: var(--color-brand);
  color: var(--color-brand);
  transform: scale(1.05);
}

.adjust-btn:active {
  transform: scale(0.95);
}

.adjust-btn.btn-minor {
  font-size: clamp(1.15rem, 2.4cqw, 1.4rem); /* Enlarged to match the major buttons perfectly */
  opacity: 0.9;
}

.adjust-btn.btn-major {
  background: rgba(255, 255, 255, 0.08);
  font-weight: 600; /* Sleek, medium-bold 600 weight */
}

.speed-sign {
  width: clamp(7.5rem, 15cqw, 10rem);
  height: clamp(7.5rem, 15cqw, 10rem);
  border-radius: 50%;
  background: #ffffff;
  border: clamp(0.55rem, 1.1cqw, 0.85rem) solid #e63946; /* Beautiful traffic red ring */
  display: grid;
  place-items: center;
  box-shadow: 0 0.8rem 2.2rem rgba(0, 0, 0, 0.35);
  user-select: none;
}

.speed-sign-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.speed-value {
  color: #111111;
  font-weight: 800;
  font-size: clamp(2.8rem, 6cqw, 3.8rem);
  line-height: 1;
  font-family: var(--font-main);
}

.vehicle-label {
  font-size: clamp(0.9rem, 2cqh, 1.15rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: clamp(1rem, 2.5cqh, 1.8rem); /* Push down the controls below */
}

/* Circular progress-based Wizard navigation */
.wizard-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 62rem;
  position: relative;
  padding-inline: 0.5rem;
  box-sizing: border-box;
}

.wizard-steps::before {
  content: '';
  position: absolute;
  top: clamp(1.4rem, 2.8cqw, 1.85rem);
  left: 2.2rem;
  right: 2.2rem;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  z-index: 1;
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  text-decoration: none; /* Make circular button steps non-underlined links */
}

.step-circle {
  width: clamp(2.8rem, 6cqw, 4rem); /* Slightly larger premium size */
  height: clamp(2.8rem, 6cqw, 4rem);
  border-radius: 50%;
  background: var(--color-panel);
  border: 2px solid rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  color: var(--color-muted);
  transition: all 220ms ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  margin-bottom: 0.5rem;
  box-sizing: border-box;
}

.step-circle svg {
  width: 55%; /* Noticeably larger SVG step-icons inside circle buttons */
  height: 55%;
}

.step-label {
  font-size: clamp(0.68rem, 1.25cqw, 0.78rem);
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
  transition: color 220ms ease;
}

.wizard-step.is-active .step-circle {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-black);
  box-shadow: 0 0 1.25rem rgba(229, 254, 40, 0.35);
  transform: scale(1.06);
}

.wizard-step.is-active .step-label {
  color: var(--color-brand);
  font-weight: 800;
}

@media (max-width: 44rem) {
  .wizard-steps::before {
    top: clamp(1.1rem, 4cqw, 1.4rem);
    left: 1.5rem;
    right: 1.5rem;
  }
  .step-circle {
    width: clamp(2.2rem, 8cqw, 2.8rem);
    height: clamp(2.2rem, 8cqw, 2.8rem);
  }
  .step-label {
    font-size: 0.6rem;
    letter-spacing: 0.02em;
    display: none; /* Hide standard labels on small widths to avoid overlapping */
  }
  .wizard-step.is-active .step-label {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    margin-top: 0.2rem;
  }
}

/* ==========================================
   Step 2 Tripod Setup Page Styles 
   ========================================== */
.setup-panel {
  background: var(--color-panel-soft);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: clamp(1rem, 3.5cqh, 2.2rem) clamp(1rem, 3cqw, 2rem); /* Exactly matches .limit-box padding for uniform container height and feel */
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: clamp(24rem, 96cqw, 82rem); /* Matches standard .limits-grid and .streams-grid width perfectly */
  min-height: 22.93rem; /* Exactly matches the 366.92px height of .limit-box on Step 1 at FullHD */
  box-sizing: border-box;
}

.setup-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4cqw, 3rem);
  width: 100%;
}

.indicator-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 2cqh, 1.2rem);
}

.status-indicator {
  position: relative;
  width: clamp(8.5rem, 18cqw, 12rem); /* Noticeably larger status circles on desktop */
  height: clamp(8.5rem, 18cqw, 12rem);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.8rem 2.5rem rgba(0, 0, 0, 0.4);
  transition: transform 220ms ease, box-shadow 220ms ease;
  user-select: none;
}

.status-indicator.is-good {
  background: linear-gradient(135deg, #2ecc71, #27ae60); /* Premium Emerald green gradient */
  box-shadow: 0 0.8rem 2.5rem rgba(46, 204, 113, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.status-indicator.is-bad {
  background: linear-gradient(135deg, #e63946, #c0392b); /* Premium Traffic Red gradient */
  box-shadow: 0 0.8rem 2.5rem rgba(230, 57, 70, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.status-indicator svg {
  width: 70%;
  height: 70%;
}

.status-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #111111; /* Solid high-contrast black text over status colors */
  font-weight: 800;
  font-size: clamp(1.2rem, 2.8cqw, 1.85rem);
  letter-spacing: -0.01em;
  font-family: var(--font-main);
  line-height: 1;
}

.indicator-label {
  font-size: clamp(0.95rem, 2.2cqh, 1.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.center-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.center-illustration {
  width: 100%;
  max-width: clamp(8rem, 18cqw, 11rem); /* Noticeably smaller tripod illustration to draw main attention to the indicators */
  height: auto;
  filter: drop-shadow(0 1rem 2.2rem rgba(0, 0, 0, 0.45));
  transition: transform 300ms ease;
}

@media (max-width: 40rem) {
  .setup-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(1rem, 4cqh, 1.8rem) !important;
  }
  
  .setup-panel {
    padding: clamp(1rem, 3cqh, 2rem) clamp(1rem, 3cqw, 1.5rem) !important;
    min-height: auto !important; /* Allow natural fluid height on mobile screen size */
  }

  .center-column {
    grid-column: 1 / -1 !important; /* Forces the illustration to span full width at top */
    order: -1 !important; /* Pushes central image to the top of the flex/grid order */
  }

  .center-illustration {
    max-width: clamp(5rem, 16cqh, 7rem) !important; /* Noticeably smaller central icon on mobile */
  }

  .status-indicator {
    width: clamp(7rem, 26cqw, 8.8rem) !important; /* Noticeably larger indicator circles on mobile */
    height: clamp(7rem, 26cqw, 8.8rem) !important;
  }

  .status-value {
    font-size: clamp(1rem, 3.8cqw, 1.35rem) !important;
  }

  .indicator-label {
    font-size: 0.85rem !important;
  }
}

/* ==========================================
   Step 3 Measure Page Styles 
   ========================================== */
.measure-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.65fr 1.65fr 0.7fr; /* Outer columns noticeably narrower, wide center columns */
  gap: clamp(1rem, 3cqw, 2rem);
  width: 100%;
  max-width: clamp(24rem, 96cqw, 82rem); /* Set to 82rem to match .streams-grid exactly */
  box-sizing: border-box;
}

.measure-box {
  background: var(--color-panel-soft);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: clamp(1rem, 3.5cqh, 2.2rem) clamp(1rem, 3cqw, 1.8rem);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; /* Spreads label, circular adjusters and values beautifully */
  min-height: 22.93rem; /* EXACTLY matches the 366.92px height of Steps 1 & 2 on desktop FullHD */
  transition: border-color 200ms ease;
  box-sizing: border-box;
}

.measure-box.narrow-box {
  padding-inline: clamp(0.4rem, 1.2cqw, 1.1rem); /* Reduced side padding to pull buttons and layout closely together */
}

.measure-box:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.measure-box-title {
  color: var(--color-muted);
  font-size: clamp(0.88rem, 2.2cqh, 1.15rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 0.8rem;
}

.measure-control-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.7rem, 2cqh, 1.3rem);
}

.adjust-btn svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke-width: 3px; /* Stronger weight for tactile clarity */
  fill: currentColor;
}

.measure-value-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1rem;
  user-select: none;
}

.measure-number {
  font-size: clamp(1.8rem, 5.5cqh, 2.8rem);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
}

.measure-unit {
  font-size: clamp(0.95rem, 2.2cqh, 1.25rem);
  font-weight: 700;
  color: var(--color-muted);
}

.wide-box-placeholder {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.01);
  color: rgba(255, 255, 255, 0.25);
  font-size: clamp(0.8rem, 2cqh, 1rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1rem;
  box-sizing: border-box;
}

@media (max-width: 40rem) {
  .measure-grid {
    grid-template-columns: 1fr !important; /* All 4 boxes are 100% wide on mobile, stacking vertically */
    gap: 1.2rem !important;
    width: 100% !important;
  }

  .measure-box {
    min-height: auto !important; /* Fluid, natural container height on mobile to save vertical space */
    padding: clamp(1rem, 3cqh, 1.5rem) !important;
  }

  .measure-box.narrow-box {
    padding: clamp(0.9rem, 2.5cqh, 1.2rem) clamp(1.2rem, 4cqw, 2rem) !important; /* Expanded horizontal padding on mobile for 100% wide row */
  }

  /* Swaps narrow outer columns from vertical flow to a perfect horizontal layout on mobile screens */
  .measure-box.narrow-box .measure-control-column {
    flex-direction: row !important;
    gap: clamp(1.5rem, 6cqw, 3.5rem) !important; /* Generous, premium gap on mobile */
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 0.6rem;
  }

  /* Logically arrange elements horizontally: Decrement (DOWN) on left, display in middle, Increment (UP) on right */
  .measure-box.narrow-box .adjust-btn[id$="-down"] {
    order: -1 !important; /* DOWN button shifts to the left of the value */
  }

  .measure-box.narrow-box .measure-value-display {
    order: 0 !important; /* Display stays in the middle */
    padding-inline: 0.5rem;
  }

  .measure-box.narrow-box .adjust-btn[id$="-up"] {
    order: 1 !important; /* UP button shifts to the right of the value */
  }

  /* Make center wider boxes stretch full horizontal span on mobile for proper structural focus */
  .measure-box.wide-box {
    grid-column: 1 / -1 !important;
  }

  .wide-box-placeholder {
    min-height: 6rem; /* Comfortable placeholder space on mobile view */
  }
}