[hidden] {
  display: none !important;
}

.show-password {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -7px 0 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.show-password input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.login-card button:disabled {
  cursor: wait;
  opacity: .6;
}

.summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.summary article {
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, #10253b, #0b192a);
}

.summary span,
.summary small {
  display: block;
  color: var(--muted);
}

.summary strong {
  display: block;
  margin: 7px 0 4px;
  font-size: 30px;
  line-height: 1.2;
}

.summary strong.ok { color: var(--green); background: transparent; }
.summary strong.warn { color: var(--yellow); background: transparent; }
.summary strong.bad { color: var(--red); background: transparent; }
.summary small { font-size: 12px; }

.stage-panel {
  margin-bottom: 20px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(12, 27, 45, .95);
}

.stage-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.stage-heading .eyebrow { margin: 0; }
.stage-heading h2 { margin: 3px 0 0; }
.stage-heading > p { margin: 0; color: var(--muted); }
.stage-bars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 26px; }
.stage-row { display: grid; grid-template-columns: 70px 1fr 62px; align-items: center; gap: 10px; }
.stage-row span { color: #b8cada; font-weight: 700; }
.stage-row strong { text-align: right; }
.stage-track { height: 10px; overflow: hidden; border-radius: 999px; background: #071522; }
.stage-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #35a7ff, #68d5ff); }

.leader:only-child {
  grid-column: 1 / -1;
}

.ai-assistant {
  position: fixed;
  right: 18px;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}

.assistant-visual {
  display: flex;
  align-items: flex-end;
}

.ai-assistant img,
.ai-assistant video {
  width: min(270px, 24vw);
  max-height: 52vh;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 18px 28px #0009);
  transform-origin: 50% 100%;
  animation: assistant-idle 4.8s ease-in-out infinite;
}

.ai-assistant video { border-radius: 18px 18px 0 0; }

.assistant-bubble {
  width: 280px;
  margin: 0 -24px 190px 0;
  padding: 16px;
  border: 1px solid #2b5678;
  border-radius: 16px 16px 4px 16px;
  background: rgba(9, 27, 44, .96);
  box-shadow: 0 18px 45px #0008;
  pointer-events: auto;
}

.assistant-bubble .eyebrow { margin: 0 0 4px; }
.assistant-bubble > p:not(.eyebrow) { margin: 8px 0 12px; color: #b5c8d8; }
.assistant-bubble > small { display: block; margin: -5px 0 12px; color: #6f96b4; }
.assistant-bubble button { width: 100%; }
.ai-assistant.speaking img,
.ai-assistant.speaking video { animation: assistant-talk .55s ease-in-out infinite alternate; }

@keyframes assistant-idle {
  0%, 100% { transform: translateY(0) rotate(-.25deg); }
  50% { transform: translateY(-7px) rotate(.35deg); }
}

@keyframes assistant-talk {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-8px) scale(1.008); }
}

@media (max-width: 1000px) {
  .summary { grid-template-columns: repeat(2, 1fr); }
  .stage-bars { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .summary { grid-template-columns: 1fr; }
  .login-card { padding: 26px 22px; }
  .stage-heading { align-items: flex-start; flex-direction: column; }
  .ai-assistant { right: 4px; }
  .ai-assistant img, .ai-assistant video { width: 145px; max-height: 37vh; }
  .assistant-bubble { width: min(245px, 72vw); margin: 0 -18px 112px 0; }
}