/* Sign-in, profile picker and profile editor, in the TV's style. */
.account-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  align-items: center;
  overflow: auto;
  padding: 110px var(--inset) 60px;
  color: var(--text);
  background:
    radial-gradient(60% 50% at 75% 10%, var(--mood-glow, color-mix(in srgb, var(--accent) 14%, transparent)), transparent 72%),
    var(--bg);
}
.account-screen:focus {
  outline: none;
}
.account-brand {
  position: absolute;
  left: var(--inset);
  top: 34px;
}
.account-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
}
.account-form {
  position: relative;
  width: min(440px, 100%);
  margin: auto;
  display: grid;
  gap: 18px;
}
.account-form h1,
.profile-picker h1 {
  font-size: var(--fs-page);
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 6px;
}
.profile-picker h1 {
  user-select: none;
}
.account-form label {
  display: grid;
  gap: 8px;
  color: var(--desc);
  font-size: 14px;
}
/* Fields as words on a hairline that turns to the accent, like Settings. */
.account-form input {
  width: 100%;
  min-height: 48px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: none;
  font-size: 16px;
  transition: border-color var(--motion-control) var(--ease);
}
.account-form input:focus-visible {
  outline: none;
  border-bottom-color: var(--accent);
}
.account-form .button {
  min-height: 50px;
  justify-content: center;
}
.account-link {
  background: transparent;
  color: var(--muted);
  min-height: 44px;
  font-size: 14px;
}
.account-link:hover {
  color: var(--accent);
}
#account-message {
  min-height: 20px;
  margin: 0;
  color: var(--accent-hover);
  font-size: 14px;
}
.account-intro {
  margin: -8px 0 4px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
.account-help {
  margin-top: -8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.profile-picker {
  position: relative;
  text-align: center;
  max-width: 980px;
  margin: auto;
}
.profile-choices {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  margin: 40px 0 28px;
}
.profile-choice {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: 140px;
  background: transparent;
  color: var(--nav);
  font-size: 18px;
}
.profile-choice > span:last-child {
  overflow-wrap: anywhere;
}
.profile-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 140px;
  height: 140px;
  border-radius: calc(var(--r-tile) + 10px);
  transition:
    transform var(--motion-card) var(--ease),
    box-shadow var(--motion-card);
}
.profile-art > svg {
  width: 52px;
  height: 52px;
  stroke-width: 1.3;
}
.profile-choice:focus-visible {
  outline: none;
}
.profile-choice:hover,
.profile-choice:focus-visible {
  color: var(--text);
  font-weight: 600;
}
.profile-choice:hover .profile-art,
.profile-choice:focus-visible .profile-art {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--accent), 0 10px 30px -6px var(--accent-glow);
}
.avatar-0 { background: #284b57 !important; color: #daf0f2; }
.avatar-1 { background: #664545 !important; color: #f6e2df; }
.avatar-2 { background: #71622d !important; color: #fff2b7; }
.avatar-3 { background: #335744 !important; color: #d7f0df; }
.avatar-4 { background: #544763 !important; color: #eee1f5; }
.avatar-5 { background: #474749 !important; color: #f3f3f3; }
.profile-add {
  background: transparent;
  border: 2px dashed var(--hairline);
  color: var(--muted);
}
.profile-footer {
  display: flex;
  justify-content: center;
  gap: 24px;
  align-items: center;
}
.profile-edit-mark {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
}
.profile-edit-mark svg {
  width: 15px;
}
.account-screen.profile-sheet-mode {
  justify-items: end;
  align-items: stretch;
  padding: 0;
  background: #0009;
}
.profile-sheet-mode .account-brand {
  display: none;
}
.profile-sheet-mode #account-content {
  width: min(440px, 100%);
  min-height: 100%;
  padding: 34px 28px;
  overflow: auto;
  background: var(--surface);
  border-left: 1px solid var(--hairline);
  box-shadow: -24px 0 60px #0008;
}
.profile-sheet-mode .profile-picker {
  text-align: left;
}
.profile-sheet-mode .profile-choices {
  justify-content: flex-start;
  gap: 22px;
  margin: 28px 0;
}
.profile-sheet-mode .profile-choice,
.profile-sheet-mode .profile-art {
  width: 104px;
}
.profile-sheet-mode .profile-art {
  height: 104px;
}
.profile-sheet-mode .profile-footer {
  justify-content: flex-start;
}
.profile-sheet-close {
  float: right;
  margin-bottom: 12px;
}
.avatar-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.avatar-option {
  width: 52px;
  height: 52px;
  border-radius: var(--r-button);
  display: grid;
  place-items: center;
}
.avatar-option[aria-pressed="true"] {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
}

/* Native playback (mpv) draws under the transparent window: everything else steps aside. */
.native-playback,
.native-playback body,
.native-playback #player-panel {
  background: transparent !important;
  color-scheme: normal;
}
.native-playback :is(#player, #browse, .topbar, #shade, #stage, #info-header, #quick-menu, #details, #collection, .mobile-navigation, .player-loading.revealed) {
  visibility: hidden;
}
.native-playback #player-panel {
  opacity: 1 !important;
  translate: none !important;
  scale: none !important;
}

@media (max-width: 600px) {
  .profile-choices { gap: 22px; }
  .profile-choice { width: 104px; font-size: 16px; }
  .profile-art { width: 104px; height: 104px; }
  .account-form { padding: 26px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-art { transition: none; }
  .plan-modal, .plan-card { animation: none; }
  .tour-spot { transition: none; }
}
/* The closed beta: a small gold label above the sign-in and sign-up pages, and their two tabs. */
.beta-pill {
  justify-self: start;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 99px;
  color: var(--accent-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.account-tabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--hairline-soft);
}
.account-tabs button {
  min-height: 44px;
  padding: 0;
  background: none;
  color: var(--meta);
  font-size: 15px;
  font-weight: 600;
  box-shadow: inset 0 -2px transparent;
}
.account-tabs [aria-selected="true"] {
  color: var(--text);
  box-shadow: inset 0 -2px var(--accent);
}
.account-tabs button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
/* Profiles like Netflix: the Kids and lock marks, and the editor's parental controls. */
.profile-marks{position:absolute;left:8px;bottom:8px;display:flex;gap:4px}
.profile-mark{display:inline-flex;padding:2px 7px;border-radius:99px;background:rgb(0 0 0 / .6);color:var(--accent-light);font-size:11px}
.profile-mark svg{width:12px;height:12px}
.profile-editor .security-check{display:flex;gap:12px;color:var(--text)}
.profile-editor .security-check input{width:20px;min-height:20px;margin-top:2px;accent-color:var(--accent)}
.security-check small{display:block;color:var(--meta)}
.maturity-choice{display:flex;flex-wrap:wrap;gap:8px;padding:0;border:0}
.maturity-choice legend{margin-bottom:8px;color:var(--desc)}
.maturity-choice input{position:absolute;opacity:0;width:0}
.maturity-choice span{display:block;padding:8px 14px;border:1px solid var(--hairline);border-radius:99px}
.maturity-choice :checked+span{border-color:var(--accent);color:var(--accent-light)}
.maturity-choice :focus-visible+span{outline:var(--focus-ring);outline-offset:3px}
.avatar-6{background:#5a3d2b!important;color:#f7e4d6}
.avatar-7{background:#2d4a63!important;color:#dceaf7}
.avatar-8{background:#4f2f4f!important;color:#f3dcf2}
.avatar-9{background:#2f5a55!important;color:#d9f2ee}
.avatar-10{background:#5c5420!important;color:#fbf2c4}
.avatar-11{background:#61333b!important;color:#f8dde1}

/* Plans (plans-ui.js): the bundle at sign-up, the free month card, keeping one profile. */
.plan-choose {
  width: min(680px, 100%);
}
.plan-choose-actions,
.plan-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 16px;
}
.plan-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: rgb(0 0 0 / .62);
  animation: plan-in var(--motion-view) var(--ease);
}
.plan-card {
  width: min(460px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 32px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: 0 30px 80px rgb(0 0 0 / .5);
  animation: plan-in var(--motion-view) var(--ease);
}
.plan-card h2 {
  margin: 4px 0 10px;
  font-size: 26px;
  font-weight: 800;
}
.plan-lead,
.plan-fine {
  margin: 0 0 18px;
  color: var(--desc);
  line-height: 1.55;
}
.plan-fine {
  font-size: 12px;
  color: var(--muted);
}
.plan-perks,
.plan-changes {
  display: grid;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.plan-perks li {
  display: flex;
  gap: 10px;
}
.plan-perks svg {
  flex: none;
  width: 18px;
  color: var(--accent);
}
.plan-summary {
  margin: 0 0 18px;
}
.plan-summary div {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--desc);
}
.plan-summary dd {
  margin: 0;
}
.plan-due {
  color: var(--text) !important;
  font-size: 18px;
  font-weight: 700;
}
.plan-pay {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-tile);
  opacity: .7;
}
.plan-pay span,
.plan-pay small {
  display: grid;
  color: var(--muted);
}
.plan-error {
  margin: 0;
  color: var(--accent-light);
}
.plan-done {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
@keyframes plan-in {
  from { opacity: 0; transform: translateY(8px); }
}
.move-to-free {
  width: min(620px, 100%);
}
.plan-changes li {
  padding-left: 18px;
  border-left: 2px solid var(--accent);
  color: var(--desc);
}
.plan-keep-title {
  margin: 12px 0 0;
  font-size: 18px;
}
.move-to-free .profile-choices {
  margin: 8px 0;
  gap: 18px;
}
.move-to-free :is(.profile-choice, .profile-art) {
  width: 104px;
}
.move-to-free .profile-art {
  height: 104px;
}
.profile-choice[aria-checked="true"] {
  color: var(--text);
  font-weight: 600;
}
.profile-choice[aria-checked="true"] .profile-art {
  box-shadow: 0 0 0 3px var(--accent), 0 10px 30px -6px var(--accent-glow);
}
@media (max-width: 560px) {
  .plan-card { padding: 24px 20px; }
}
/* The first-run walkthrough (tour.js): a soft spotlight on the real element, a small card beside it. */
.tour {
  position: fixed;
  inset: 0;
  z-index: 130;
}
.tour-through {
  pointer-events: none;
}
.tour-spot {
  position: fixed;
  border-radius: var(--r-tile);
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 100vmax rgb(0 0 0 / .62);
  transition: all var(--motion-view) var(--ease);
  pointer-events: none;
}
.tour:has(.tour-spot[hidden]) {
  background: rgb(0 0 0 / .62);
}
.tour-card {
  position: fixed;
  width: min(380px, calc(100vw - 32px));
  padding: 22px 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: 0 24px 60px rgb(0 0 0 / .5);
  pointer-events: auto;
}
.tour-card.centered {
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.tour-card h2 {
  margin: 6px 0 8px;
  font-size: 22px;
}
.tour-card p {
  margin: 0 0 14px;
  color: var(--desc);
  line-height: 1.55;
}
.tour-count {
  display: flex;
  gap: 10px;
  color: var(--muted) !important;
  font-size: 12px;
  margin: 0 !important;
}
.tour-badge {
  display: inline-flex;
  gap: 4px;
  color: var(--accent-light);
  font-weight: 600;
}
.tour-badge svg {
  width: 14px;
  height: 14px;
}
.tour-trial {
  margin: -6px 0 12px;
  color: var(--accent-light);
}
.tour-actions,
.tour-actions span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}