:root {
  --bs-body-bg: #11161d;
  --bs-tertiary-bg: #191f28;
  --review-accent: #63b5eb;
  --review-border: #303a46;
}

body {
  min-width: 320px;
  background:
    radial-gradient(ellipse at 16% -12%, rgba(45, 78, 108, .24), transparent 48%),
    #11161d;
}

.launch-screen { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; isolation: isolate; padding: clamp(1.1rem, 3vw, 2.4rem) clamp(1.25rem, 5vw, 5.5rem); background: #11161d url("/assets/optus-stadium.jpg") center 48% / cover no-repeat; }
.launch-screen::before { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, rgba(7, 12, 20, .86) 0%, rgba(7, 12, 20, .61) 43%, rgba(7, 12, 20, .2) 100%), linear-gradient(0deg, rgba(7, 12, 20, .68), transparent 47%, rgba(7, 12, 20, .28)); }
.launch-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.launch-wordmark { display: flex; align-items: center; gap: 1rem; color: #f4f7fb; font-size: .82rem; font-weight: 750; letter-spacing: .17em; }
.launch-wordmark .mos-brand { width: 66px; height: auto; }
.launch-wordmark > span { padding-left: 1rem; border-left: 1px solid rgba(244, 247, 251, .58); }
.launch-content { width: min(100%, 1280px); margin: auto 0; padding: clamp(3rem, 10vh, 7rem) 0; }
.launch-content h1 { max-width: 1200px; margin: 0; color: #fff; font-size: clamp(3.7rem, 8vw, 8rem); font-weight: 780; letter-spacing: -.065em; line-height: .95; }
.launch-description { max-width: 650px; margin: clamp(1.5rem, 3vh, 2.2rem) 0 2rem; color: #ecf1f6; font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.55; }
.launch-start { min-width: 190px; padding: .95rem 1.7rem; border: 1px solid #70b8e5; border-radius: 7px; background: #004b82; color: #fff; font-size: 1.08rem; font-weight: 800; box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .28); transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; }
.launch-start:hover, .launch-start:focus-visible { transform: translateY(-2px); filter: brightness(1.16); background: #075f9d; color: #fff; box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, .38); }
.launch-footnote { align-self: flex-end; color: rgba(244, 247, 251, .85); font-size: .84rem; font-weight: 650; letter-spacing: .05em; }
[hidden] { display: none !important; }

.player-app { min-height: 100vh; }
#player-app.is-choosing-type .app-header { display: none; }
.type-picker { min-height: 100svh; display: grid; align-items: center; padding: clamp(1.5rem, 5vw, 4.5rem); background: radial-gradient(ellipse at 50% 0%, rgba(39, 76, 103, .24), transparent 58%), #11161d; }
.type-picker-inner { width: min(100%, 1220px); margin: auto; }
.type-picker .eyebrow { color: #75bff0; }
.type-picker h1 { margin: 0; color: #f4f7fb; font-size: clamp(2.3rem, 5vw, 4.25rem); font-weight: 720; letter-spacing: -.045em; }
.type-picker-intro { margin: .65rem 0 2.2rem; color: #aab7c5; font-size: clamp(1rem, 1.6vw, 1.2rem); }
.category-grid.type-category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.type-category-grid .category-card { position: relative; min-height: 250px; grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; align-content: center; gap: 1.15rem; padding: 1.8rem .8rem; border-radius: 13px; text-align: center; }
.type-category-grid .category-card > i { grid-column: 1; grid-row: 1; width: 5rem; height: 5rem; display: grid; place-items: center; border: 1px solid rgba(131, 189, 240, .24); border-radius: 16px; background: rgba(73, 135, 187, .13); font-size: 2.5rem; }
.type-category-grid .category-card.is-selected > i { border-color: rgba(99, 181, 235, .44); background: rgba(0, 75, 130, .32); }
.type-category-grid .category-name { grid-column: 1; grid-row: 2; font-size: 1.2rem; font-weight: 650; }
.type-category-grid .category-count { position: absolute; top: .8rem; right: .8rem; min-width: 2rem; padding: .25rem .55rem; font-size: .78rem; }
.type-picker-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; color: #8190a0; font-size: .85rem; }
.type-picker-footer .btn { min-width: 112px; }
.progress-summary { color: #9cabbc; font-size: .78rem; font-variant-numeric: tabular-nums; }
.selected-type-bar { display: flex; align-items: center; gap: .65rem; margin: 0 0 .9rem; padding: .6rem .7rem; border: 1px solid #344252; border-radius: 8px; background: #141b23; }
.selected-type-label { color: #8a9aab; font-size: .64rem; font-weight: 750; letter-spacing: .09em; }
.selected-type-bar strong { color: #8ecdf5; font-size: .8rem; }
.selected-type-bar .btn { margin-left: auto; }

.app-header {
  min-height: 70px;
  background-color: rgba(25, 31, 40, .96) !important;
}

.mos-brand { width: 58px; height: auto; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; padding-left: 1rem; border-left: 1px solid rgba(244, 247, 251, .58); line-height: 1.2; }
.brand-title { font-size: .98rem; font-weight: 650; letter-spacing: .01em; }
.brand-subtitle { margin-top: 4px; color: var(--bs-secondary-color); font-size: .72rem; }
.status-indicator { width: 8px; height: 8px; border-radius: 50%; background: #8793a1; box-shadow: 0 0 0 3px rgba(135, 147, 161, .12); }
.status-indicator.is-ready { background: #45c77a; box-shadow: 0 0 0 3px rgba(69, 199, 122, .12); }
.status-indicator.is-error { background: #ef6060; box-shadow: 0 0 0 3px rgba(239, 96, 96, .12); }
.eyebrow { color: #a5b2c1; letter-spacing: .1em; }
.eyebrow .fa-tv { color: var(--review-accent); }
.page-heading { font-size: clamp(1.45rem, 2vw, 1.9rem); font-weight: 650; letter-spacing: -.025em; }
.form-select { min-height: 44px; border-color: #46515e; background-color: #1b222c; }
.form-select:focus { border-color: #68a9e8; box-shadow: 0 0 0 .2rem rgba(65, 145, 219, .2); }
.form-text { font-size: .75rem; }

.video-card, .scenario-card { border-radius: 13px; background: #191f28; }
.stacked-review-tools { display: none; }
.video-stage { --bs-aspect-ratio: 56.25%; position: relative; border-bottom: 1px solid var(--review-border); }
.video-stage video { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; cursor: pointer; background: #050607; }
.replay-transition { position: absolute; z-index: 5; inset: 0; display: flex; align-items: center; gap: clamp(.65rem, 2vw, 1.5rem); overflow: hidden; padding: clamp(1rem, 4vw, 3.5rem); background: linear-gradient(90deg, rgba(5, 10, 17, .9), rgba(5, 10, 17, .48)), linear-gradient(0deg, rgba(5, 10, 17, .42), transparent 72%), #071019 url("/assets/optus-stadium.jpg") center 52% / cover no-repeat; clip-path: inset(0 100% 0 0); opacity: 0; pointer-events: none; }
.replay-transition.is-transitioning { animation: replay-wipe-in .24s cubic-bezier(.2,.75,.25,1) forwards; }
.replay-transition.is-revealing { animation: replay-wipe-out .44s cubic-bezier(.65,0,.8,.25) forwards; }
.replay-transition-logo { width: clamp(4rem, 10vw, 8rem); height: auto; flex: 0 0 auto; filter: drop-shadow(0 .2rem .8rem rgba(0, 0, 0, .45)); }
.replay-transition-label { padding-left: clamp(.85rem, 2.5vw, 1.8rem); border-left: 1px solid rgba(244, 247, 251, .58); color: #f4f7fb; font-size: clamp(.9rem, 2.8vw, 1.8rem); font-weight: 780; letter-spacing: .16em; text-shadow: 0 2px 18px #000b; }
@keyframes replay-wipe-in { from { clip-path: inset(0 100% 0 0); opacity: .82; } to { clip-path: inset(0); opacity: 1; } }
@keyframes replay-wipe-out { from { clip-path: inset(0); opacity: 1; } to { clip-path: inset(0 0 0 100%); opacity: .82; } }
.video-overlay-badge { background-color: transparent; color: #fff; }
.video-counter { position: absolute; z-index: 2; left: 1rem; bottom: 1rem; padding: .55rem .75rem; letter-spacing: .08em; font-size: .65rem; pointer-events: none; }
.video-label { position: absolute; z-index: 3; right: 1rem; bottom: 1rem; padding: .6rem .85rem; font-size: .85rem; }
.counter { font-variant-numeric: tabular-nums; }
.video-stage .video-error { position: absolute; z-index: 6; inset: 1rem 1rem auto; width: auto; height: auto; transform: none; margin: 0 !important; padding: 1rem 1.25rem; border: 1px solid #ff8797; border-left-width: 4px; background: #421b25; color: #fff7f8; font-size: 1rem; font-weight: 600; line-height: 1.5; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .5); }

.transport-panel { padding: .9rem 1rem; }
.transport-button { min-width: 43px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-group .transport-button { min-width: 42px; }
.btn-primary { --bs-btn-bg: #004b82; --bs-btn-border-color: #17699e; --bs-btn-hover-bg: #075f9d; --bs-btn-hover-border-color: #398fc8; --bs-btn-active-bg: #003e6b; }
.frame-count { font-size: .66rem; font-weight: 700; }
.transport-extras { margin-left: auto; }
.speed-control { width: min(245px, 100%); }
.speed-control .form-range { width: 130px; }
.speed-value { min-width: 36px; text-align: right; }
.time-display { min-width: 76px; color: #dbe4ee; text-align: right; }

.scenario-card { min-height: 100%; }
.selection-flow { display: grid; gap: 1rem; }
.selection-step-title { display: flex; align-items: center; gap: .7rem; margin-bottom: .65rem; }
.step-number { width: 1.8rem; height: 1.8rem; display: inline-grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(121, 186, 250, .42); border-radius: 50%; background: rgba(31, 89, 131, .2); color: #9dccf8; font-size: .78rem; font-weight: 750; }
.selection-step-title h2 { margin: 0; color: #e6edf5; font-size: .95rem; font-weight: 650; }
.selection-step-title p { margin: .15rem 0 0; color: var(--bs-secondary-color); font-size: .72rem; }
.category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.category-card { min-width: 0; min-height: 56px; display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .55rem .65rem; border: 1px solid #344252; border-radius: 9px; background: linear-gradient(145deg, #202a36, #171e27); color: #d4dee9; text-align: left; transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease; }
.category-card > i { color: #83bdf0; font-size: 1rem; text-align: center; }
.category-card:hover { border-color: #648eb1; background: #222f3d; transform: translateY(-1px); }
.category-card.is-selected { border-color: #398fc8; background: linear-gradient(145deg, rgba(0, 75, 130, .36), rgba(33, 42, 51, .94)); color: #edf7ff; box-shadow: inset 0 0 0 1px rgba(99, 181, 235, .2), 0 .25rem .8rem rgba(0, 0, 0, .16); }
.category-card.is-selected > i { color: #8ecdf5; }
.category-card:focus-visible { outline: 2px solid #80c2ff; outline-offset: 2px; }
.category-name { overflow: hidden; font-size: .79rem; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.category-count { min-width: 1.55rem; padding: .15rem .35rem; border: 1px solid #465565; border-radius: 999px; color: #aebccc; font-size: .68rem; font-variant-numeric: tabular-nums; text-align: center; }
.category-card.is-selected .category-count { border-color: rgba(99, 181, 235, .45); color: #a7d9f8; }
.clip-picker { padding-top: .95rem; border-top: 1px solid var(--review-border); }
.clip-picker .form-select { font-size: .86rem; }
.scenario-dropdown-toggle, .scenario-dropdown-option { display: flex; align-items: center; gap: .65rem; text-align: left; }
.scenario-dropdown-toggle { padding-right: 2.5rem; }
.scenario-option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scenario-dropdown .badge { flex-shrink: 0; font-size: .68rem; }
.scenario-dropdown .dropdown-menu { max-height: min(360px, 50vh); overflow-y: auto; border-color: #46515e; background: #1b222c; }
.scenario-dropdown-option { min-height: 44px; font-size: .86rem; }
.scenario-title { max-width: 30ch; font-size: clamp(1.2rem, 1.8vw, 1.55rem); font-weight: 650; line-height: 1.3; letter-spacing: -.02em; overflow-wrap: anywhere; }
.control-section { padding-top: 1rem; border-top: 1px solid var(--review-border); }
.section-heading { display: flex; align-items: center; gap: .65rem; margin-bottom: .3rem; color: #79bafa; }
.section-heading i { width: 17px; text-align: center; }
.section-heading h3 { margin: 0; color: var(--bs-body-color); font-size: .92rem; font-weight: 650; }
.section-help { margin: 0 0 .7rem; color: var(--bs-secondary-color); font-size: .78rem; }
.button-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.decision-choice, .camera-choice { min-height: 44px; white-space: normal; line-height: 1.25; }
.camera-choice { --bs-btn-color: #8bc6ff; --bs-btn-border-color: #355975; --bs-btn-hover-bg: #183c57; --bs-btn-hover-border-color: #4e91c4; }
.button-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.delivery-choice { min-height: 48px; flex: 1 1 145px; border-width: 1px; font-size: .82rem; font-weight: 680; box-shadow: 0 .25rem .7rem rgba(0, 0, 0, .2); transition: filter .15s ease, transform .15s ease, box-shadow .15s ease; }
.delivery-choice:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 .4rem .9rem rgba(0, 0, 0, .28); }
.delivery-no-ball { --bs-btn-color: #fff7ed; --bs-btn-bg: #9e462b; --bs-btn-border-color: #d77a4e; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #b75835; --bs-btn-hover-border-color: #f0a070; --bs-btn-active-bg: #843820; --bs-btn-active-border-color: #d77a4e; }
.delivery-legitimate { --bs-btn-color: #e7fff7; --bs-btn-bg: #176052; --bs-btn-border-color: #359681; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1c7664; --bs-btn-hover-border-color: #57b49c; --bs-btn-active-bg: #124f44; --bs-btn-active-border-color: #359681; }
.delivery-choice.is-selected { outline: 2px solid #d8edf9; outline-offset: 2px; filter: brightness(1.22); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), 0 .35rem 1rem rgba(0, 0, 0, .28); }
.delivery-choice:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 1199.98px) {
  .stacked-review-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; padding: 0 1rem 1rem; border: 1px solid var(--review-border); border-radius: 12px; background: #191f28; }
  .stacked-review-tools:has(.control-section:not([hidden])) { display: grid; }
  .stacked-review-tools .control-section { min-width: 0; }
}

@media (min-width: 1500px) and (min-height: 1000px) {
  #review-workspace { padding-top: .5rem !important; padding-bottom: .5rem !important; }
  #review-workspace > .row:first-child { margin-bottom: .5rem !important; }
  #review-workspace > .row:last-child { --bs-gutter-y: .5rem; }
  .scenario-card .card-body { gap: .6rem !important; }
  .selection-flow { gap: .6rem; }
  .control-section { padding-top: .65rem; }
  .clip-picker { padding-top: .65rem; }
}

@media (max-width: 600px) {
  .launch-screen { min-height: 100vh; background-position: 58% center; }
  .launch-screen::before { background: linear-gradient(90deg, rgba(7, 12, 20, .82), rgba(7, 12, 20, .48)), linear-gradient(0deg, rgba(7, 12, 20, .72), transparent 70%); }
  .launch-wordmark { font-size: .68rem; letter-spacing: .1em; }
  .launch-wordmark .mos-brand { width: 54px; }
  .launch-topline .btn { padding: .4rem .55rem; font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .replay-transition.is-transitioning { animation: replay-fade-in .12s ease-out forwards; }
  .replay-transition.is-revealing { animation: replay-fade-out .16s ease-in forwards; }
  @keyframes replay-fade-in { from { clip-path: inset(0); opacity: 0; } to { clip-path: inset(0); opacity: 1; } }
  @keyframes replay-fade-out { from { clip-path: inset(0); opacity: 1; } to { clip-path: inset(0); opacity: 0; } }
}

@media (min-width: 600.01px) and (max-width: 1100px) {
  .category-grid.type-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.keyboard-help { padding-top: 1rem; border-top: 1px solid var(--review-border); color: var(--bs-secondary-color); }
.keyboard-help summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: .82rem; font-weight: 600; color: #b9c4d0; list-style: none; }
.keyboard-help summary::-webkit-details-marker { display: none; }
.keyboard-help[open] summary > .fa-chevron-down { transform: rotate(180deg); }
.keyboard-help summary > .fa-chevron-down { transition: transform .15s ease; font-size: .72rem; }
.shortcut-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: .9rem; font-size: .73rem; }
kbd { min-width: 1.45rem; display: inline-block; margin-right: .18rem; padding: .12rem .32rem; border: 1px solid #4a5664; border-radius: 4px; background: #222a34; color: #e7edf4; font-family: inherit; font-size: .68rem; text-align: center; }

.alert { border-radius: 8px; font-size: .84rem; line-height: 1.45; }
.alert .fw-semibold { font-size: .91rem; }
.alert-success { --bs-alert-bg: rgba(31, 102, 61, .22); --bs-alert-border-color: rgba(69, 173, 107, .55); --bs-alert-color: #d4f2dc; }
.alert-danger { --bs-alert-bg: rgba(125, 38, 45, .24); --bs-alert-border-color: rgba(213, 82, 92, .6); --bs-alert-color: #ffdadd; }
.alert-danger .fa-circle-xmark { color: #ff858d; }
.alert-success .fa-circle-check { color: #6cdd91; }

.help-open { overflow: hidden; }
.help-backdrop { position: fixed; z-index: 1050; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(4, 8, 12, .78); backdrop-filter: blur(7px); }
.help-backdrop[hidden] { display: none; }
.help-modal { width: min(100%, 690px); max-height: min(90vh, 820px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #3a4a5b; border-radius: 16px; background: #171e27; box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .58); }
.help-modal-header, .help-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; }
.help-modal-header { border-bottom: 1px solid var(--review-border); }
.help-modal-header h2 { margin: 0; font-size: 1.35rem; font-weight: 680; letter-spacing: -.02em; }
.help-close { width: 42px; height: 42px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.help-close i { display: block; width: 1em; font-size: 1.05rem; line-height: 1; text-align: center; }
.help-modal-body { overflow-y: auto; padding: 1.2rem 1.4rem; }
.help-modal-body > p { margin: 0 0 1.15rem; }
.help-steps { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.help-steps li { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); align-items: start; gap: .85rem; padding: .8rem; border: 1px solid #303d4b; border-radius: 10px; background: #1d2631; }
.help-step-number { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: rgba(121, 186, 250, .14); color: #9dccf8; font-weight: 750; }
.help-steps strong { display: block; margin: .1rem 0 .2rem; color: #edf3f9; font-size: .91rem; }
.help-steps p { margin: 0; color: #aab6c3; font-size: .81rem; line-height: 1.5; }
.help-shortcuts { margin-top: .85rem; padding: .8rem .9rem; border: 1px solid #303d4b; border-radius: 10px; color: #b9c4d0; }
.help-shortcuts summary { cursor: pointer; font-size: .82rem; font-weight: 650; }
.help-shortcuts p { margin: .75rem 0 0; font-size: .78rem; line-height: 2; }
.help-shortcuts p > span { margin: 0 .3rem; color: #647386; }
.help-modal-footer { border-top: 1px solid var(--review-border); }
.help-modal-footer .btn { min-width: 104px; }

button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #80c2ff; outline-offset: 2px; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }

@media (max-width: 1199.98px) {
  .scenario-card { min-height: 0; }
}

@media (max-width: 575.98px) {
  .app-header > .container-fluid { flex-wrap: wrap; }
  .app-header .container-fluid > [aria-live] { width: 100%; flex-wrap: wrap; margin-left: 0 !important; gap: .5rem !important; }
  .navbar-brand .mos-brand { display: none; }
  .brand-copy { padding-left: 0; border-left: 0; }
  .brand-title { font-size: .88rem; }
  #load-status { max-width: 120px; text-align: right; }
  .transport-panel { padding: .75rem; }
  .transport-panel > div { justify-content: center !important; }
  .transport-extras { margin-left: 0; }
  .speed-control { width: 100%; }
  .speed-control .form-range { flex: 1; }
  #time-display { margin-left: auto; }
  .button-grid, .shortcut-list { grid-template-columns: 1fr; }
  .help-backdrop { padding: .5rem; }
  .help-modal { max-height: 94vh; border-radius: 13px; }
  .help-modal-header, .help-modal-footer { padding: 1rem; }
  .help-modal-body { padding: 1rem; }
  .help-modal-header h2 { font-size: 1.1rem; }
  .help-modal-footer .small { max-width: 18ch; }
  .type-picker { min-height: 100vh; padding: 1.25rem; }
  .type-picker-intro { margin-bottom: 1.25rem; }
  .category-grid.type-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .type-category-grid .category-card { min-height: 170px; padding: 1rem .65rem; gap: .8rem; }
  .type-category-grid .category-card > i { width: 3.6rem; height: 3.6rem; font-size: 1.8rem; }
  .type-category-grid .category-name { font-size: .9rem; }
  .type-picker-footer { margin-top: 1rem; font-size: .75rem; }
  .type-picker-footer .progress-summary { font-size: .68rem; }
  .selected-type-bar { flex-wrap: wrap; }
}

/* Sign-in and recovery share the launch screen's spacing and typography. */
.auth-panel {
  display: flex; align-items: flex-start; gap: .85rem; text-align: left;
  width: min(100%, 32rem); margin: 1.5rem 0; padding: 1rem 1.2rem;
  border: 1px solid rgba(150, 188, 223, .24); border-radius: 1rem;
  background: rgba(12, 25, 39, .88); color: #d5e4f2;
}
.auth-panel[hidden] { display: none; }
.auth-panel[data-state="error"] { border-color: rgba(239, 183, 94, .5); }
.auth-indicator { color: #91c8f7; padding-top: .1rem; }
.auth-panel[data-state="error"] .auth-indicator { color: #efbd76; }
.auth-copy { min-width: 0; }
#auth-status { margin: 0; line-height: 1.55; font-size: .95rem; }
.launch-start:disabled { opacity: .55; cursor: wait; }
.launch-footnote { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .9rem; }
@media (prefers-reduced-motion: reduce) { .auth-indicator .fa-spin { animation: none; } }