/* FlyHigh: yuklanish ekrani va fan tanlash paneli */

.loader-error {
  position: relative;
}

.loader-retry {
  position: relative;
  background: #ffffff12;
}

.scene-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.subject-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: min(650px, 85vw);
  max-height: 60svh;
  overflow: auto;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;

  padding: 12px;
  border: 1px solid #ffffff70;
  border-radius: 23px;

  background:
    linear-gradient(135deg, #fffaf3f5, #f5e8d7f5);

  backdrop-filter: blur(24px);
  box-shadow: 0 20px 50px #0005;
  z-index: 12;
}

.subject-panel button {
  border: 0;
  padding: 13px 15px;
  border-radius: 13px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font: 600 16px/1.3 var(--font-ui);
}

.subject-panel button:hover {
  background: #0000000a;
}

.subject-panel button[aria-pressed="true"] {
  background: var(--scene-deep);
  color: #fff;
}

.hero h1,
.title-depth {
  overflow-wrap: normal;
}

.nav-indicator,
.telegram-link,
.register {
  transition:
    background-color 0.6s,
    color 0.6s,
    transform 0.52s,
    width 0.52s,
    height 0.52s;
}

@media (max-width: 600px) {
  .subject-panel {
    grid-template-columns: 1fr;
    width: min(320px, 85vw);
  }

  .hero h1 {
    max-width: 100%;
  }
}