/* === web_app/static/style.css === */


/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  --bg-0: #030711;
  --bg-1: #07101f;
  --bg-2: #0b1630;

  --panel: rgba(21, 31, 55, 0.76);
  --panel-raised: rgba(31, 43, 71, 0.84);
  --panel-soft: rgba(255, 255, 255, 0.055);
  --panel-dark: rgba(5, 11, 24, 0.36);

  --border: rgba(184, 204, 255, 0.14);
  --border-strong: rgba(184, 204, 255, 0.22);
  --border-cyan: rgba(112, 241, 255, 0.30);

  --cyan: #87f3ff;
  --cyan-strong: #63e9f8;
  --green: #78f6d0;
  --yellow: #ffd574;
  --red: #ff8197;
  --purple: #9478ff;
  --blue: #78a8ff;

  --text-primary: #f5f8ff;
  --text-secondary: #c4cce0;
  --text-muted: #99a5c0;

  --shadow-panel:
    0 24px 70px rgba(0, 0, 0, 0.34);

  --radius-panel: 24px;
  --radius-card: 18px;
  --radius-small: 13px;

  --workspace-gap: 24px;
}


/* ============================================================
   RESET
   ============================================================ */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  min-height: 100vh;

  color: var(--text-primary);

  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  font-size: 15px;
  line-height: 1.5;

  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(47, 116, 164, 0.30),
      transparent 34%
    ),
    radial-gradient(
      circle at 85% 3%,
      rgba(89, 65, 182, 0.27),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #0a1427 0%,
      #050a16 48%,
      #02050c 100%
    );

  overflow-x: hidden;
}


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


/* ============================================================
   BACKGROUND
   ============================================================ */

.scene-bg {
  position: fixed;
  inset: 0;

  pointer-events: none;

  z-index: 0;

  background:
    radial-gradient(
      ellipse at 25% 18%,
      rgba(69, 210, 224, 0.08),
      transparent 32%
    ),
    radial-gradient(
      ellipse at 76% 10%,
      rgba(126, 92, 255, 0.09),
      transparent 34%
    );
}


.grid-floor {
  position: fixed;

  inset:
    80px
    -20%
    -30%
    -20%;

  pointer-events: none;

  z-index: 0;

  opacity: 0.25;

  background-image:
    linear-gradient(
      rgba(96, 183, 238, 0.12) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96, 183, 238, 0.12) 1px,
      transparent 1px
    );

  background-size: 82px 82px;

  transform:
    perspective(900px)
    rotateX(66deg);

  transform-origin: top;
}


/* ============================================================
   APPLICATION
   ============================================================ */

.app-shell {
  position: relative;

  z-index: 1;

  width:
    min(
      calc(100% - 48px),
      1560px
    );

  margin: 0 auto;

  padding: 28px 0 56px;
}


/* ============================================================
   SHARED PANELS
   ============================================================ */

.hero-card,
.system-panel,
.fusion-panel,
.result-panel,
.diagnostics-panel {
  position: relative;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-panel);

  background:
    linear-gradient(
      145deg,
      rgba(45, 63, 96, 0.72),
      rgba(32, 35, 72, 0.74)
    );

  box-shadow:
    var(--shadow-panel);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  overflow: hidden;
}


.hero-card::before,
.system-panel::before,
.fusion-panel::before,
.result-panel::before,
.diagnostics-panel::before {
  content: "";

  position: absolute;

  inset:
    0
    0
    auto
    0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.27),
      transparent
    );

  pointer-events: none;
}


.system-panel,
.fusion-panel,
.result-panel,
.diagnostics-panel {
  padding: 28px;
}


.system-panel,
.diagnostics-panel {
  margin-top: 24px;
}


/* ============================================================
   HERO
   ============================================================ */

.hero-card {
  min-height: 150px;

  padding: 28px 36px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 34px;
}


.hero-identity {
  display: flex;

  align-items: center;

  gap: 23px;

  min-width: 0;
}


.orb {
  flex: 0 0 auto;

  width: 74px;
  height: 74px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 34% 27%,
      #ffffff 0%,
      #a9fbff 8%,
      #53e7f5 28%,
      #667df6 58%,
      #814cff 100%
    );

  box-shadow:
    0 0 38px rgba(95, 236, 255, 0.38),
    0 0 90px rgba(101, 90, 255, 0.20);

  animation:
    orbFloat
    5s
    ease-in-out
    infinite;
}


@keyframes orbFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}


.hero-copy {
  min-width: 0;
}


.hero-eyebrow,
.section-eyebrow {
  display: block;

  color: var(--cyan);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.35px;

  text-transform: uppercase;
}


.hero-eyebrow {
  margin-bottom: 5px;
}


.hero-copy h1 {
  margin: 0 0 7px;

  color: #9bf5ff;

  font-size:
    clamp(
      38px,
      4vw,
      52px
    );

  line-height: 1;

  letter-spacing: -1.4px;
}


.hero-copy p {
  margin: 0 0 12px;

  font-size: 16px;

  font-weight: 650;
}


.hero-modalities {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;
}


.hero-modalities span {
  padding: 5px 9px;

  border:
    1px solid
    rgba(180, 211, 255, 0.12);

  border-radius: 999px;

  color: var(--text-secondary);

  background:
    rgba(255, 255, 255, 0.045);

  font-size: 11px;
}


.hero-meta {
  flex: 0 0 300px;

  padding: 18px 20px;

  border:
    1px solid
    rgba(139, 234, 255, 0.16);

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      rgba(99, 229, 244, 0.07),
      rgba(116, 91, 255, 0.07)
    );
}


.research-label {
  display: block;

  margin-bottom: 8px;

  color: var(--cyan);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.3px;

  text-transform: uppercase;
}


.hero-meta strong {
  display: block;

  margin-bottom: 4px;

  font-size: 15px;
}


.hero-meta small {
  color: var(--text-muted);

  font-size: 11px;

  line-height: 1.5;
}


/* ============================================================
   SECTION HEADER
   ============================================================ */

.section-header {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 24px;

  margin-bottom: 23px;
}


.section-eyebrow {
  margin-bottom: 4px;
}


.section-header h2 {
  margin: 0 0 6px;

  font-size: 24px;

  line-height: 1.15;

  letter-spacing: -0.4px;
}


.section-header p {
  max-width: 590px;

  margin: 0;

  color: var(--text-muted);

  font-size: 13px;
}


.section-index {
  flex: 0 0 auto;

  color:
    rgba(133, 242, 255, 0.28);

  font-size: 28px;

  font-weight: 800;

  line-height: 1;
}


/* ============================================================
   READINESS
   ============================================================ */

.readiness-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 12px;
}


.ready-item {
  min-width: 0;

  min-height: 58px;

  padding: 13px 15px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  border:
    1px solid
    rgba(189, 205, 243, 0.12);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.05);

  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}


.ready-label {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 9px;

  color: var(--text-secondary);
}


.ready-dot {
  flex: 0 0 auto;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #6f7893;

  box-shadow:
    0 0 0 4px
    rgba(255, 255, 255, 0.025);
}


.ready-item b {
  flex: 0 0 auto;

  color: #ffabb8;

  font-size: 12px;

  font-weight: 750;
}


.ready-item.active {
  border-color:
    rgba(99, 246, 206, 0.43);

  background:
    linear-gradient(
      135deg,
      rgba(83, 234, 194, 0.09),
      rgba(255, 255, 255, 0.045)
    );
}


.ready-item.active .ready-dot {
  background: var(--green);

  box-shadow:
    0 0 10px
    rgba(103, 255, 214, 0.65);
}


.ready-item.active b {
  color: var(--green);
}


.ready-item.warning {
  border-color:
    rgba(255, 209, 102, 0.32);
}


.ready-item.warning .ready-dot {
  background: var(--yellow);
}


.ready-item.warning b {
  color: var(--yellow);
}


.system-message-area {
  margin-top: 16px;

  padding-left: 2px;
}


.system-message-area p {
  margin: 4px 0;
}


#modelStatusText {
  color: var(--text-secondary);

  font-size: 13px;

  font-weight: 650;
}


.sub-status {
  color: var(--text-muted);

  font-size: 12px;
}


/* ============================================================
   TEMPORAL STATUS
   ============================================================ */

.temporal-status-banner {
  margin-top: 18px;

  padding: 13px 15px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  border:
    1px solid
    var(--border-cyan);

  border-radius: 14px;

  background:
    linear-gradient(
      110deg,
      rgba(87, 102, 247, 0.12),
      rgba(63, 221, 237, 0.08)
    );
}


.temporal-status-main {
  display: flex;

  align-items: center;

  gap: 12px;
}


.temporal-icon {
  width: 35px;
  height: 35px;

  display: grid;

  place-items: center;

  border-radius: 10px;

  color: var(--cyan);

  background:
    rgba(100, 230, 244, 0.10);

  border:
    1px solid
    rgba(116, 242, 255, 0.16);

  font-size: 9px;

  font-weight: 900;
}


.small-label {
  display: block;

  margin-bottom: 2px;

  color: var(--text-muted);

  font-size: 10px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.65px;
}


.temporal-status-banner strong {
  color: var(--cyan);

  font-size: 13px;
}


.temporal-window-status {
  flex: 0 0 auto;

  text-align: right;
}


/* ============================================================
   WORKSPACE
   ============================================================ */

.live-workspace {
  margin-top: 24px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.16fr)
    minmax(460px, 0.84fr);

  gap: var(--workspace-gap);

  align-items: start;
}


.live-workspace > * {
  min-width: 0;
}


/* ============================================================
   MODALITY CARDS
   ============================================================ */

.modality-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 16px;
}


.modality-card {
  position: relative;

  min-width: 0;

  padding: 19px;

  border:
    1px solid
    rgba(184, 202, 239, 0.13);

  border-radius:
    var(--radius-card);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.065),
      rgba(255, 255, 255, 0.035)
    );

  overflow: hidden;

  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}


.modality-card:hover {
  border-color:
    rgba(163, 208, 255, 0.22);
}


.modality-card.active {
  border-color:
    rgba(101, 243, 206, 0.42);

  background:
    linear-gradient(
      145deg,
      rgba(90, 236, 200, 0.07),
      rgba(255, 255, 255, 0.04)
    );

  box-shadow:
    0 12px 32px
    rgba(0, 0, 0, 0.18);
}


.modality-card.streaming {
  border-color:
    rgba(99, 233, 248, 0.42);
}


.card-head {
  min-height: 48px;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 15px;
}


.card-head > div {
  min-width: 0;
}


.card-kicker {
  display: block;

  margin-bottom: 4px;

  color: var(--text-muted);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.75px;

  text-transform: uppercase;
}


.card-head h3 {
  margin: 0;

  color: var(--text-primary);

  font-size: 18px;

  line-height: 1.2;
}


.badge {
  flex: 0 0 auto;

  padding: 4px 9px;

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  border-radius: 999px;

  color: #d8deeb;

  background:
    rgba(255, 255, 255, 0.08);

  font-size: 10px;

  font-weight: 700;

  text-transform: lowercase;
}


.modality-card.active .badge {
  color: #071411;

  background: var(--green);

  border-color:
    rgba(100, 245, 207, 0.30);
}


.modality-card.streaming:not(.active) .badge {
  color: #08151a;

  background: var(--cyan);
}


/* ============================================================
   TEXT
   ============================================================ */

textarea {
  display: block;

  width: 100%;
  height: 170px;

  padding: 15px;

  border:
    1px solid
    transparent;

  border-radius: 13px;

  outline: none;

  resize: vertical;

  color: #162032;

  background: #f2f6fc;

  font-size: 14px;

  line-height: 1.5;
}


textarea::placeholder {
  color: #8791a3;
}


textarea:focus {
  border-color:
    rgba(109, 230, 244, 0.82);

  box-shadow:
    0 0 0 3px
    rgba(82, 221, 239, 0.13);
}


.metric-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;

  margin-top: 12px;
}


.metric-grid > div,
.audio-stream-grid > div {
  padding: 10px 12px;

  border-radius: 11px;

  background:
    rgba(3, 10, 24, 0.24);

  border:
    1px solid
    rgba(180, 207, 240, 0.06);
}


.metric-grid span,
.audio-stream-grid span {
  display: block;

  margin-bottom: 2px;

  color: var(--text-muted);

  font-size: 10px;
}


.metric-grid b {
  color: var(--cyan);

  font-size: 18px;
}


/* ============================================================
   VISUAL
   ============================================================ */

.video-frame {
  position: relative;

  width: 100%;

  min-height: 170px;

  overflow: hidden;

  border-radius: 13px;

  border:
    1px solid
    rgba(173, 203, 239, 0.09);

  background: #02050b;
}


video,
.static-image-preview {
  display: block;

  width: 100%;
  height: 170px;

  object-fit: cover;

  background: #000;
}


.modality-status {
  margin: 12px 0 0;

  color: var(--text-secondary);

  font-size: 12px;

  font-weight: 650;
}


.calibration-note {
  margin: 7px 0 0;

  color: var(--yellow);

  font-size: 10px;

  line-height: 1.45;
}


/* ============================================================
   SOURCE BUTTONS
   ============================================================ */

.source-action-row {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 12px;
}


.source-btn {
  min-height: 39px;

  padding: 9px 12px;

  border:
    1px solid
    rgba(156, 205, 244, 0.16);

  border-radius: 10px;

  color: var(--text-primary);

  background:
    rgba(255, 255, 255, 0.065);

  font-size: 11px;

  font-weight: 750;

  cursor: pointer;

  transition:
    transform 0.17s ease,
    border-color 0.17s ease,
    background 0.17s ease;
}


.source-btn:hover:not(:disabled) {
  transform: translateY(-1px);

  border-color:
    rgba(135, 243, 255, 0.32);

  background:
    rgba(135, 243, 255, 0.09);
}


.source-btn:disabled {
  opacity: 0.42;

  cursor: not-allowed;
}


/* ============================================================
   CONTINUOUS AUDIO
   ============================================================ */

.audio-visual {
  height: 78px;

  display: flex;

  align-items: center;

  padding: 0 16px;

  border:
    1px solid
    rgba(162, 195, 240, 0.08);

  border-radius: 13px;

  background:
    rgba(2, 7, 17, 0.20);
}


.audio-bars {
  width: 100%;
  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;
}


.audio-bars span {
  width: 4px;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      var(--cyan),
      rgba(135, 243, 255, 0.25)
    );

  opacity: 0.28;
}


.audio-bars span:nth-child(1) { height: 10px; }
.audio-bars span:nth-child(2) { height: 17px; }
.audio-bars span:nth-child(3) { height: 28px; }
.audio-bars span:nth-child(4) { height: 20px; }
.audio-bars span:nth-child(5) { height: 34px; }
.audio-bars span:nth-child(6) { height: 25px; }
.audio-bars span:nth-child(7) { height: 31px; }
.audio-bars span:nth-child(8) { height: 19px; }
.audio-bars span:nth-child(9) { height: 26px; }
.audio-bars span:nth-child(10) { height: 13px; }


.audio-card.streaming .audio-bars span {
  opacity: 0.86;

  animation:
    audioPulse
    0.9s
    ease-in-out
    infinite
    alternate;
}


.audio-card.streaming .audio-bars span:nth-child(2n) {
  animation-delay: -0.28s;
}


.audio-card.streaming .audio-bars span:nth-child(3n) {
  animation-delay: -0.51s;
}


@keyframes audioPulse {
  from {
    transform: scaleY(0.48);
  }

  to {
    transform: scaleY(1);
  }
}


.audio-stream-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 8px;

  margin-top: 12px;
}


.audio-stream-grid strong {
  display: block;

  color: var(--cyan);

  font-size: 12px;

  overflow-wrap: anywhere;
}


.audio-diagnostic {
  min-height: 32px;

  margin: 7px 0 0;

  color: var(--text-muted);

  font-size: 10px;

  line-height: 1.45;
}


.audio-control-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 8px;

  margin-top: 13px;
}


.source-btn-live {
  color: #061510;

  background:
    linear-gradient(
      120deg,
      #75edd9,
      #73bdf2
    );

  border-color: transparent;
}


.source-btn-stop {
  background:
    rgba(255, 113, 142, 0.10);

  border-color:
    rgba(255, 129, 151, 0.24);
}


.source-btn-wide {
  grid-column: 1 / -1;
}


/* ============================================================
   SESSION CONTROLS
   ============================================================ */

.control-stack {
  display: grid;

  gap: 9px;
}


.control-btn {
  width: 100%;

  min-height: 45px;

  padding: 11px 14px;

  border: 0;

  border-radius: 12px;

  color: #fff;

  font-size: 12px;

  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}


.control-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}


.control-btn.primary {
  background:
    linear-gradient(
      120deg,
      #65dff0,
      #7064ef
    );
}


.control-btn.danger {
  background:
    linear-gradient(
      120deg,
      #c65373,
      #6c54c8
    );
}


.control-btn.temporal {
  background:
    linear-gradient(
      120deg,
      #6971e9,
      #4fbad5
    );
}


.control-btn.neutral {
  color: var(--text-secondary);

  background:
    rgba(255, 255, 255, 0.07);

  border:
    1px solid
    rgba(185, 204, 235, 0.13);
}


.control-btn:disabled {
  opacity: 0.42;

  cursor: not-allowed;
}


.session-footer {
  margin-top: 13px;

  padding-top: 11px;

  display: flex;

  align-items: center;

  gap: 8px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.07);
}


.session-indicator {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #68758e;
}


.session-footer p {
  margin: 0;

  color: var(--text-muted);

  font-size: 10px;
}


/* ============================================================
   RESULT PANEL
   ============================================================ */

.result-panel {
  position: sticky;

  top: 22px;
}


.result-header {
  margin-bottom: 18px;
}


.result-status-bar {
  min-height: 42px;

  margin-bottom: 14px;

  padding: 10px 13px;

  display: flex;

  align-items: center;

  gap: 9px;

  border:
    1px solid
    rgba(182, 207, 242, 0.09);

  border-radius: 12px;

  background:
    rgba(5, 11, 25, 0.19);
}


.result-status-dot {
  flex: 0 0 auto;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #8290ab;
}


.result-status-bar p {
  margin: 0;

  color: var(--text-secondary);

  font-size: 11px;
}


/* ============================================================
   MAIN RESULT
   ============================================================ */

.state-display {
  padding: 27px 25px 22px;

  border:
    1px solid
    rgba(96, 226, 239, 0.27);

  border-radius: 18px;

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 5%,
      rgba(66, 218, 229, 0.13),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(49, 75, 96, 0.40),
      rgba(27, 39, 65, 0.47)
    );
}


.state-caption {
  display: block;

  color: var(--text-muted);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.72px;

  text-transform: uppercase;
}


.prediction-box {
  margin: 16px 0 20px;

  color: var(--cyan);

  font-size:
    clamp(
      46px,
      4vw,
      65px
    );

  font-weight: 900;

  line-height: 1;

  letter-spacing: -1.2px;

  overflow-wrap: anywhere;

  text-shadow:
    0 0 28px
    rgba(94, 234, 247, 0.25);
}


.confidence-block {
  width: 88%;

  margin: 0 auto 18px;
}


.confidence-heading {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 16px;

  margin-bottom: 9px;
}


.confidence-heading span {
  color: var(--text-muted);

  font-size: 10px;

  text-transform: uppercase;
}


.confidence-heading strong {
  color: var(--text-primary);

  font-size: 24px;

  line-height: 1;
}


.confidence-track {
  height: 9px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(188, 205, 232, 0.18);
}


.confidence-fill {
  height: 100%;

  width: 0%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #6ce8f5,
      #7ff1cf
    );

  transition:
    width
    0.8s
    ease;
}


.confidence-level-box {
  margin-top: 16px;
}


.confidence-level-box span {
  display: block;

  margin-bottom: 3px;

  color: var(--text-muted);

  font-size: 10px;

  text-transform: uppercase;
}


.confidence-level-box strong {
  font-size: 21px;
}


.confidence-high {
  color: var(--green) !important;
}


.confidence-medium {
  color: var(--yellow) !important;
}


.confidence-low {
  color: var(--red) !important;
}


.temporal-result-info {
  margin-top: 20px;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 8px;
}


.temporal-result-info > div {
  min-width: 0;

  padding: 10px 7px;

  border-radius: 11px;

  background:
    rgba(3, 9, 21, 0.24);
}


.temporal-result-info span {
  display: block;

  margin-bottom: 3px;

  color: var(--text-muted);

  font-size: 9px;

  text-transform: uppercase;
}


.temporal-result-info strong {
  display: block;

  color: var(--cyan);

  font-size: 12px;

  overflow-wrap: anywhere;
}


/* ============================================================
   RESULT SUBCARDS
   ============================================================ */

.result-subcard {
  margin-top: 14px;

  padding: 16px;

  border-radius: 15px;

  background:
    rgba(6, 10, 24, 0.19);
}


.raw-result-card {
  border:
    1px solid
    rgba(137, 105, 255, 0.26);

  background:
    linear-gradient(
      135deg,
      rgba(99, 80, 196, 0.10),
      rgba(8, 13, 26, 0.15)
    );
}


.webcam-result-card {
  border:
    1px solid
    rgba(255, 213, 116, 0.26);

  background:
    linear-gradient(
      135deg,
      rgba(206, 165, 66, 0.08),
      rgba(70, 184, 195, 0.055)
    );
}


.subcard-heading,
.webcam-result-heading {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 16px;
}


.small-caption {
  display: block;

  margin-bottom: 2px;

  color: var(--text-muted);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.55px;

  text-transform: uppercase;
}


.result-subcard h3 {
  margin: 0;

  color: var(--text-secondary);

  font-size: 13px;
}


.subcard-tag {
  padding: 3px 7px;

  border-radius: 999px;

  color: #b8aafd;

  background:
    rgba(129, 100, 244, 0.11);

  font-size: 9px;

  font-weight: 800;
}


.raw-result-grid {
  margin-top: 12px;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 8px;
}


.raw-result-grid > div {
  padding: 10px 11px;

  border-radius: 10px;

  background:
    rgba(0, 0, 0, 0.15);
}


.raw-result-grid span {
  display: block;

  color: var(--text-muted);

  font-size: 9px;

  text-transform: uppercase;
}


.raw-result-grid strong {
  display: block;

  margin-top: 2px;

  color: var(--text-primary);

  font-size: 16px;
}


.subcard-description {
  margin: 10px 0 0;

  color: var(--text-muted);

  font-size: 10px;

  line-height: 1.5;
}


.webcam-confidence {
  flex: 0 0 auto;

  text-align: right;
}


.webcam-confidence span {
  display: block;

  color: var(--text-muted);

  font-size: 9px;

  text-transform: uppercase;
}


.webcam-confidence strong {
  display: block;

  margin-top: 2px;

  font-size: 17px;
}


.webcam-prediction {
  display: block;

  margin-top: 13px;

  color: var(--yellow);

  font-size: 25px;
}


.mini-probabilities {
  margin-top: 13px;
}


/* ============================================================
   DIAGNOSTICS
   ============================================================ */

.diagnostics-panel {
  margin-top: 24px;
}


.technical-details summary {
  cursor: pointer;

  list-style: none;
}


.technical-details summary::-webkit-details-marker {
  display: none;
}


.summary-content {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;
}


.summary-content::after {
  content: "+";

  flex: 0 0 auto;

  width: 28px;
  height: 28px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(162, 210, 245, 0.14);

  border-radius: 9px;

  color: var(--cyan);

  background:
    rgba(255, 255, 255, 0.04);

  font-size: 18px;
}


.technical-details[open]
.summary-content::after {
  content: "−";
}


.summary-content strong {
  display: block;

  font-size: 18px;
}


.summary-hint {
  margin-left: auto;

  color: var(--text-muted);

  font-size: 11px;
}


.technical-content {
  margin-top: 24px;

  padding-top: 24px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.08);
}


.technical-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 12px;
}


.technical-grid > div {
  min-width: 0;

  padding: 14px 15px;

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.045);
}


.technical-grid span {
  display: block;

  margin-bottom: 4px;

  color: var(--text-muted);

  font-size: 10px;

  text-transform: uppercase;
}


.technical-grid strong {
  display: block;

  font-size: 14px;

  overflow-wrap: anywhere;
}


.validation-line {
  min-height: 24px;

  margin: 18px 0 0;

  color: var(--text-muted);

  font-size: 11px;
}


.distribution-grid {
  margin-top: 20px;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 18px;
}


.distribution-card {
  min-width: 0;

  padding: 18px;

  border:
    1px solid
    rgba(171, 203, 239, 0.08);

  border-radius: 14px;

  background:
    rgba(3, 9, 20, 0.17);
}


.distribution-card h3 {
  margin: 2px 0 18px;

  color: var(--text-secondary);

  font-size: 14px;
}


/* ============================================================
   PROBABILITY BARS
   ============================================================ */

.sf-prob-row {
  margin: 12px 0;
}


.sf-prob-label {
  display: flex;

  justify-content: space-between;

  gap: 14px;

  margin-bottom: 5px;

  color: var(--text-secondary);

  font-size: 10px;
}


.sf-prob-track {
  height: 8px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(195, 209, 234, 0.15);
}


.sf-prob-fill {
  height: 100%;

  width: 0%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #67e7f2,
      #8a72ff
    );

  transition:
    width
    0.8s
    ease;
}


.sf-prob-fill.raw {
  background:
    linear-gradient(
      90deg,
      #8068ef,
      #bc88f4
    );
}


.sf-prob-fill.webcam {
  background:
    linear-gradient(
      90deg,
      #ffd069,
      #73e5e9
    );
}


.sf-prob-sum {
  display: flex;

  justify-content: space-between;

  gap: 12px;

  margin-top: 10px;

  padding-top: 8px;

  border-top:
    1px solid
    rgba(148, 163, 184, 0.18);

  color: var(--text-muted);

  font-size: 10px;
}


/* ============================================================
   UTILITIES
   ============================================================ */

.hidden {
  display: none !important;
}


/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media (min-width: 1500px) {

  .app-shell {
    width:
      min(
        calc(100% - 80px),
        1620px
      );
  }


  .system-panel,
  .fusion-panel,
  .result-panel,
  .diagnostics-panel {
    padding: 31px;
  }


  .live-workspace {
    grid-template-columns:
      minmax(0, 1.18fr)
      minmax(500px, 0.82fr);
  }

}


/* ============================================================
   LAPTOP
   ============================================================ */

@media (max-width: 1220px) {

  .app-shell {
    width:
      min(
        calc(100% - 36px),
        1180px
      );
  }


  .live-workspace {
    grid-template-columns: 1fr;
  }


  .result-panel {
    position: static;
  }


  .result-panel .state-display,
  .result-panel .result-subcard {
    max-width: 900px;

    margin-left: auto;
    margin-right: auto;
  }


  .result-panel .result-subcard {
    margin-top: 14px;
  }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

  .hero-card {
    align-items: flex-start;
  }


  .hero-meta {
    flex-basis: 230px;
  }


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


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


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

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 720px) {

  .app-shell {
    width: calc(100% - 20px);

    padding: 10px 0 32px;
  }


  .hero-card,
  .system-panel,
  .fusion-panel,
  .result-panel,
  .diagnostics-panel {
    border-radius: 18px;
  }


  .hero-card {
    padding: 24px 20px;

    flex-direction: column;

    align-items: flex-start;
  }


  .hero-meta {
    width: 100%;

    flex-basis: auto;
  }


  .orb {
    width: 65px;
    height: 65px;
  }


  .system-panel,
  .fusion-panel,
  .result-panel,
  .diagnostics-panel {
    padding: 20px;
  }


  .section-index {
    display: none;
  }


  .readiness-grid,
  .modality-grid {
    grid-template-columns: 1fr;
  }


  .temporal-status-banner {
    align-items: flex-start;

    flex-direction: column;
  }


  .temporal-window-status {
    text-align: left;
  }


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


  .summary-hint {
    display: none;
  }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 520px) {

  .hero-identity {
    flex-direction: column;

    align-items: flex-start;

    gap: 16px;
  }


  .hero-copy h1 {
    font-size: 37px;
  }


  .section-header h2 {
    font-size: 21px;
  }


  .audio-stream-grid,
  .audio-control-grid {
    grid-template-columns: 1fr;
  }


  .source-btn-wide {
    grid-column: auto;
  }


  .state-display {
    padding: 23px 16px 18px;
  }


  .prediction-box {
    font-size: 42px;
  }


  .confidence-block {
    width: 100%;
  }


  .confidence-heading {
    align-items: flex-start;

    flex-direction: column;
  }


  .temporal-result-info,
  .raw-result-grid {
    grid-template-columns: 1fr;
  }


  .webcam-result-heading {
    flex-direction: column;
  }


  .webcam-confidence {
    text-align: left;
  }

}