.faq-page { background: #f5f4f8; color: var(--text); }
.faq-hero { background: radial-gradient(circle at 80% 30%, rgba(198,151,235,.2), transparent 30%), #f7f6fa; }
.faq-hero-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(330px,.75fr); gap: clamp(50px,9vw,120px); align-items: start; }
.faq-hero-grid > div { max-width: 700px; }
.faq-hero h1 { margin: 0 0 20px; }
.faq-hero-grid > div > p { margin: 0; font-size: var(--type-lead); line-height: 1.65; color: var(--muted); }
.faq-quick-topics { padding: 28px; border-radius: 26px; background: linear-gradient(145deg,#34216a,#6548ad); color: #fff; box-shadow: 0 24px 55px rgba(42,28,61,.18); }
.faq-quick-topics h2 { margin: 0 0 8px; }
.faq-quick-topics a { display: block; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 12px; font-weight: 700; }
.faq-content { padding: 0 0 var(--section-edge-space); }
.faq-content-grid { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 24px; align-items: start; }
.faq-topic-nav { position: sticky; top: 112px; margin-top: 0; padding: 24px; border: 1px solid var(--border); border-radius: 22px; background: #fff; }
.faq-topic-nav > strong { display: block; margin-bottom: 10px; }
.faq-topic-nav a { display: block; padding: 11px 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; line-height: 1.4; }
.faq-topic-nav a:hover, .faq-topic-nav a:focus-visible { color: #6d35a5; }
.faq-topic-jump { display: none; }
.faq-groups { padding: 12px 34px 36px; border: 1px solid var(--border); border-radius: 26px; background: #fff; }
.faq-group { padding-top: 34px; scroll-margin-top: 120px; }
.faq-group + .faq-group { margin-top: 18px; }
.faq-group h2 { margin: 0 0 14px; }
.faq-accordion { border-top: 1px solid var(--border); }
.faq-accordion details { border-bottom: 1px solid var(--border); }
.faq-accordion summary { display: grid; grid-template-columns: 1fr 34px; gap: 20px; align-items: center; padding: 18px 0; cursor: pointer; list-style: none; font-weight: 750; line-height: 1.4; }
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: #eee5fa; color: #7136ac; font-size: 16px; }
.faq-accordion details[open] summary span { transform: rotate(45deg); }
.faq-answer { padding: 0 48px 20px 0; }
.faq-answer > p { margin: 0; color: var(--muted); line-height: 1.65; }
.faq-room-logos { display: grid; grid-template-columns: repeat(9,minmax(0,1fr)); gap: 9px; margin-top: 20px; }
.faq-room-card { min-width: 0; min-height: 104px; padding: 9px 5px 8px; display: grid; grid-template-rows: 64px auto; align-items: center; justify-items: center; border: 1px solid var(--border); border-radius: 16px; background: #f8f7fa; color: var(--text); text-align: center; }
.faq-room-logo { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid var(--border); border-radius: 16px; background: #fff; overflow: hidden; }
.faq-room-logos img { width: 46px; height: 46px; object-fit: contain; }
.faq-room-logo.on-dark { border-color: #251e3f; background: #251e3f; }
.faq-room-logo.is-wide img { width: 52px; height: auto; }
.faq-room-logo.fit-crop-start img { object-fit: cover; object-position: left center; }
.faq-room-name { max-width: 100%; display: inline-flex; align-items: center; gap: 3px; overflow: hidden; font-size: 9px; font-weight: 750; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.faq-room-name .direction-arrow { width: 11px; height: 11px; flex-basis: 11px; }
.faq-status-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 20px; }
.faq-status-card { min-width: 0; margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: 16px; background: #f7f6f9; color: var(--text); cursor: zoom-in; font: inherit; text-align: left; }
.faq-status-thumbnail { display: block; aspect-ratio: 4/5; overflow: hidden; border-radius: 11px; background: #17121c; }
.faq-status-grid img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.faq-status-caption { padding: 8px 2px 2px; display: grid; gap: 2px; }
.faq-status-caption strong { font-size: 10px; font-weight: 750; }
.faq-status-caption small { color: var(--primary-dark); font-size: 9px; font-weight: 750; }
.faq-lightbox { position: fixed; z-index: 900; inset: 0; padding: 24px; display: grid; place-items: center; background: rgba(25,20,30,.78); backdrop-filter: blur(10px); }
.faq-lightbox-panel { width: min(680px,100%); max-height: calc(100vh - 48px); padding: 18px; display: grid; grid-template-rows: auto minmax(0,1fr); gap: 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 24px; background: #fff; box-shadow: 0 36px 100px rgba(18,13,23,.42); }
.faq-lightbox-panel header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.faq-lightbox-panel header span { display: block; margin-bottom: 3px; color: var(--primary-dark); font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.faq-lightbox-panel h3 { margin: 0; }
.faq-lightbox-panel header button { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 14px; background: #f4eff8; color: var(--primary-dark); cursor: pointer; font: inherit; font-size: 24px; line-height: 1; }
.faq-lightbox-panel header button:hover { background: #ebe1f4; }
.faq-lightbox-media { min-height: 0; display: grid; place-items: center; overflow: auto; border-radius: 16px; background: #17121c; }
.faq-lightbox-media picture { display: contents; }
.faq-lightbox-media img { width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 190px); object-fit: contain; }
.faq-final { padding: var(--section-edge-space) 0 var(--footer-adjacent-space); background: #241d2b; color: #fff; }
.faq-final .shell { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 40px; align-items: center; }
.faq-final h2 { margin: 0 0 10px; }
.faq-final p { margin: 0; color: #d0c9d5; }
@media (max-width: 900px) {
  .faq-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .faq-quick-topics { max-width: 600px; }
  .faq-content-grid { grid-template-columns: 1fr; }
  .faq-topic-nav { display: none; }
  .faq-topic-jump { display: grid; gap: 8px; }
  .faq-topic-jump span { font-weight: 750; }
  .faq-topic-jump select { min-height: 48px; padding: 0 46px 0 14px; border: 1px solid var(--border); border-radius: 14px; background: #fff; color: var(--text); font: inherit; }
  .faq-status-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 1100px) and (min-width: 781px) {
  .faq-room-logos { grid-template-columns: repeat(5,1fr); }
}
@media (max-width: 780px) {
  .faq-quick-topics { padding: 23px; border-radius: 23px; }
  .faq-content { padding-top: 22px; }
  .faq-groups { padding: 0 20px 26px; border-radius: 22px; }
  .faq-group { padding-top: 28px; }
  .faq-accordion summary { grid-template-columns: 1fr 32px; gap: 12px; padding: 17px 0; font-size: 13px; }
  .faq-answer { padding-right: 0; }
  .faq-room-logos { grid-template-columns: repeat(4,1fr); }
  .faq-room-card { min-height: 100px; }
  .faq-final .shell { grid-template-columns: 1fr; gap: 24px; }
  .faq-final .button { width: 100%; }
}
@media (max-width: 390px) {
  .faq-room-logos { grid-template-columns: repeat(2,1fr); }
  .faq-lightbox { padding: 12px; }
  .faq-lightbox-panel { max-height: calc(100vh - 24px); padding: 14px; border-radius: 20px; }
  .faq-lightbox-media img { max-height: calc(100vh - 170px); }
}