:root {
  --bg: #0f141b;
  --panel-border: #253244;
  --text: #f2f6fa;
  --muted: #9fb2c8;
  --accent: #e24f3d;
  --accent-alt: #f0b85b;
  --ok: #31c48d;
  --danger: #ff6b6b;
  --shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
}

.onboarding-dialog { width: min(760px, calc(100% - 28px)); max-height: calc(100dvh - 32px); overflow: auto; padding: clamp(24px, 5vw, 40px); color: var(--text); background: radial-gradient(ellipse at top left, #e24f3d16, transparent 60%), #111923; border: 1px solid #394658; border-radius: 20px; box-shadow: 0 24px 100px #0009; }
.onboarding-dialog::backdrop { background: #05090ed9; }
.onboarding-dialog h2 { max-width: 540px; margin: .6rem 0 1rem; font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.15; letter-spacing: -.035em; }
.onboarding-dialog > p:not(.review-eyebrow) { max-width: 580px; margin: 0 0 1.8rem; color: var(--muted); line-height: 1.6; }
.onboarding-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.onboarding-choice { display: flex; flex-direction: column; align-items: start; text-align: left; padding: 24px; border: 1px solid #344458; border-radius: 13px; background: linear-gradient(145deg, #192535, #101923); color: var(--text); font: inherit; cursor: pointer; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.onboarding-import { border-color: #a17b4780; background: linear-gradient(145deg, #f0b85b12, #101923 80%); }
.onboarding-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 24px; border-radius: 11px; background: #9fb2c814; color: var(--muted); }
.onboarding-import .onboarding-icon { color: var(--accent-alt); background: #f0b85b18; }
.onboarding-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.onboarding-choice-note { color: var(--muted); font-size: .75rem; margin-bottom: .55rem; }
.onboarding-choice-title { font-weight: 600; font-size: 1.15rem; line-height: 1.35; }
.onboarding-choice-copy { color: var(--muted); font-size: .875rem; line-height: 1.65; margin: .85rem 0 1.5rem; }
.onboarding-choice-link { display: flex; justify-content: space-between; gap: 16px; width: 100%; margin-top: auto; font-size: .875rem; font-weight: 500; color: var(--accent-alt); }
.onboarding-choice:hover { transform: translateY(-3px); border-color: var(--accent-alt); box-shadow: 0 10px 24px #0004; }
.onboarding-dialog button:focus-visible { outline: 2px solid var(--accent-alt); outline-offset: 4px; }
.onboarding-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--panel-border); }
.onboarding-footer p { margin: 0; color: var(--muted); font-size: .8rem; }
.onboarding-footer .btn { font-size: .8rem; min-height: 42px; }
@media (max-width: 600px) { .onboarding-choices { grid-template-columns: 1fr; } .onboarding-choice { padding: 20px; } .onboarding-icon { margin-bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .onboarding-choice { transition: none; } .onboarding-choice:hover { transform: none; } }

.site-footer {
  position: relative;
  max-width: 1120px;
  margin: 2rem auto 0;
  padding: 1.4rem 1rem 2rem;
  border-top: 1px solid var(--panel-border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.site-footer p { margin: 0; }
.site-footer strong { color: var(--text); font-weight: 500; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer a, .auth-policy-note a { color: var(--muted); text-underline-offset: 0.2em; }
.site-footer a:hover, .auth-policy-note a:hover { color: var(--text); }
.site-footer a:focus-visible, .legal-content a:focus-visible, .auth-policy-note a:focus-visible {
  outline: 2px solid var(--accent-alt);
  outline-offset: 4px;
}
.auth-policy-note { margin: 1rem 0 0; color: var(--muted); font-size: 0.875rem; line-height: 1.6; }
.legal-layout { position: relative; width: min(100%, 800px); margin: 0 auto; padding: 3.5rem 1.5rem 1rem; }
.legal-heading { padding-bottom: 2rem; border-bottom: 1px solid var(--panel-border); }
.legal-heading h1 { margin: 0.5rem 0 1rem; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.035em; }
.legal-heading > p:last-child { margin: 0; color: var(--muted); font-size: 0.875rem; }
.legal-content { font-size: 1rem; line-height: 1.8; overflow-wrap: anywhere; }
.legal-content section { margin: 2.5rem 0; }
.legal-content h2 { margin: 0 0 0.8rem; font-size: 1.25rem; line-height: 1.4; color: var(--text); }
.legal-content p, .legal-content ul { margin: 0 0 1rem; color: var(--muted); }
.legal-content ul { padding-left: 1.4rem; }
.legal-content li { margin: 0.6rem 0; }
.legal-content strong { color: var(--text); font-weight: 500; }
.legal-content a { color: var(--accent-alt); text-underline-offset: 0.2em; }
.legal-page .site-footer { max-width: 800px; padding-inline: 1.5rem; }
.legal-page .site-header > .btn { font-size: 0.875rem; text-decoration: none; }
@media (max-width: 600px) {
  .legal-layout { padding: 2rem 1rem 1rem; }
  .legal-page .site-footer { padding-inline: 1rem; }
  .legal-page .site-header { gap: 1rem; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(226, 79, 61, 0.2), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(240, 184, 91, 0.16), transparent 38%),
    var(--bg);
  min-height: 100vh;
}

.bg-grid {
  position: fixed;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.7;
}

.toast-container {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 40;
  display: grid;
  gap: 0.55rem;
  width: min(360px, calc(100vw - 24px));
}

.toast {
  border: 1px solid #2f556f;
  background: linear-gradient(135deg, rgba(17, 34, 49, 0.98), rgba(17, 22, 32, 0.98));
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
  animation: toast-in 180ms ease-out;
}

.toast-title {
  font-weight: 700;
  font-size: 0.9rem;
}

.toast-text {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.82rem;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--panel-border);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  background-color: rgba(10, 14, 20, 0.8);
}

.brand {
  font-family: "Bebas Neue", sans-serif;
  margin: 0;
  font-size: clamp(2rem, 5vw, 2.5rem);
  letter-spacing: 1px;
  line-height: 1;
}

.brand-wrap {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.tagline {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.header-right {
  display: flex;
  gap: 0.7rem;
  align-items: center;
}

.app-nav {
  display: flex;
  gap: 0.5rem;
}

.nav-btn.active {
  border-color: var(--accent);
  color: #ffd4cb;
}

.layout {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1rem;
  display: grid;
  gap: 1rem;
}

.panel {
  border: 1px solid var(--panel-border);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  border-radius: 14px;
  padding: 1rem;
  box-shadow: var(--shadow);
}

.account-panel {
  max-width: 580px;
}

.auth-form,
.profile-form {
  display: grid;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.95rem;
}

.field-hint {
  color: #8195aa;
  font-size: 0.7rem;
  line-height: 1.4;
}

input,
textarea {
  background-color: #0a1017;
  border: 1px solid #2a3a50;
  color: var(--text);
  border-radius: 8px;
  padding: 0.65rem 0.7rem;
  font-family: inherit;
}

input:focus,
textarea:focus {
  outline: 2px solid rgba(226, 79, 61, 0.55);
  border-color: var(--accent);
}

.profile-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #0a1017;
  border: 1px solid #2a3a50;
  color: var(--text);
  border-radius: 8px;
  padding: 0.65rem 2.2rem 0.65rem 0.7rem;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.2;
  background-image:
    linear-gradient(45deg, transparent 50%, #9fb2c8 50%),
    linear-gradient(135deg, #9fb2c8 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.profile-form select:focus {
  outline: 2px solid rgba(226, 79, 61, 0.55);
  border-color: var(--accent);
}

.profile-privacy-option {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid #2a3a50;
  border-radius: 10px;
  background: rgba(10, 16, 23, 0.72);
}

.profile-privacy-option input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--accent);
}

.data-import-card {
  position: relative;
  overflow: hidden;
  margin-top: 1.1rem;
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid #34485e;
  border-radius: 13px;
  background:
    radial-gradient(circle at 100% 0%, rgba(240, 184, 91, 0.1), transparent 36%),
    linear-gradient(145deg, rgba(15, 24, 35, 0.96), rgba(8, 14, 21, 0.94));
}

.data-import-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.data-import-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.data-import-badge {
  border: 1px solid #52708e;
  border-radius: 999px;
  padding: 0.22rem 0.48rem;
  color: #bcd0e4;
  background: rgba(17, 31, 44, 0.8);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.data-import-copy {
  margin: 0;
  color: #a6b8cb;
  font-size: 0.8rem;
  line-height: 1.55;
}

.data-import-copy strong {
  color: #dce8f4;
}

.data-import-picker {
  padding: 0.8rem;
  border: 1px dashed #4b647e;
  border-radius: 10px;
  background: rgba(7, 13, 20, 0.58);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.data-import-picker:hover,
.data-import-picker:focus-within {
  border-color: #d39c3f;
  background: rgba(39, 29, 13, 0.34);
}

.data-import-picker-title {
  color: #e7eef6;
  font-size: 0.86rem;
  font-weight: 750;
}

.data-import-picker-hint {
  color: #8196ab;
  font-size: 0.7rem;
}

.data-import-picker input {
  margin-top: 0.45rem;
  width: 100%;
  padding: 0.42rem;
  font-size: 0.76rem;
}

.data-import-picker input::file-selector-button {
  margin-right: 0.6rem;
  border: 0;
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  color: #10141a;
  background: #d9a649;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.data-import-preview {
  display: grid;
  gap: 0.18rem;
  padding: 0.65rem 0.7rem;
  border-left: 3px solid var(--ok);
  border-radius: 6px;
  background: rgba(28, 95, 70, 0.16);
}

.data-import-preview strong {
  font-size: 0.8rem;
}

.data-import-preview span {
  color: #8fa7ba;
  font-size: 0.7rem;
}

.data-import-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #1d2a39;
}

.data-import-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-alt));
  transition: width 220ms ease;
}

.data-import-card > .hint {
  min-height: 1.1em;
  margin: 0;
  font-size: 0.74rem;
}

.data-import-results {
  border-top: 1px solid #304155;
  padding-top: 0.6rem;
}

.data-import-results > summary {
  color: #d6e3ef;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.data-import-results section {
  margin-top: 0.65rem;
}

.data-import-results h4 {
  margin: 0;
  color: #dce8f4;
  font-size: 0.76rem;
}

.data-import-results ul {
  max-height: 180px;
  overflow: auto;
  margin: 0.35rem 0 0;
  padding-left: 1rem;
  color: #93a8bc;
  font-size: 0.7rem;
}

textarea {
  resize: vertical;
  min-height: 96px;
}

.btn {
  border: none;
  border-radius: 999px;
  padding: 0.6rem 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-primary {
  color: #0a0c11;
  background: linear-gradient(100deg, var(--accent), var(--accent-alt));
}

.btn-ghost {
  color: var(--text);
  background-color: transparent;
  border: 1px solid #3f4e62;
}

.auth-actions {
  display: flex;
  gap: 0.6rem;
}

/* The signed-out experience stays scoped away from the member dashboard. */
.welcome-page { width: 100%; max-width: none; padding: 2.5rem 0 1rem; }
.welcome-main { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; min-height: 540px; padding: 1rem 0 3rem; }
.welcome-copy { min-width: 0; }
.welcome-eyebrow { margin: 0 0 1.2rem; color: var(--accent-alt); font-size: .875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.welcome-copy h2 { margin: 0; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: clamp(4.5rem, 8vw, 7rem); line-height: .97; letter-spacing: .01em; }
.welcome-copy h2 span { color: #f0b85b; }
.welcome-description { max-width: 450px; margin: 1.6rem 0 1.8rem; color: #b4c1d1; font-size: 1.125rem; line-height: 1.75; }
.welcome-description strong { color: var(--text); font-weight: 500; }
.welcome-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.welcome-page .btn { min-height: 48px; padding: .8rem 1.5rem; font: 600 1rem "IBM Plex Sans", sans-serif; }
.welcome-actions .btn-primary span { display: inline-block; margin-left: 1rem; }
.welcome-actions .btn-primary:enabled:focus-visible { box-shadow: 0 6px 24px #e8793938; }
.welcome-actions .btn-ghost:enabled:focus-visible { border-color: var(--accent-alt); background-color: #f0b85b0d; }
.welcome-actions .btn:enabled:active { box-shadow: inset 0 2px 5px #0003; }
@media (hover: hover) and (pointer: fine) {
  .welcome-actions .btn-primary:enabled:hover { filter: brightness(1.08); box-shadow: 0 8px 26px #e8793938; }
  .welcome-actions .btn-ghost:enabled:hover { border-color: var(--accent-alt); background-color: #f0b85b0d; box-shadow: 0 6px 20px #0003; }
}
@media (prefers-reduced-motion: no-preference) {
  .welcome-actions .btn { transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease, filter 180ms ease; }
  .welcome-actions .btn-primary span { transition: transform 180ms ease; }
  .welcome-actions .btn:enabled:active { transform: translateY(1px) scale(.98); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .welcome-actions .btn:enabled:hover:not(:active) { transform: translateY(-3px); }
  .welcome-actions .btn-primary:enabled:hover:not(:active) span { transform: translateX(4px); }
}
.welcome-page button:focus-visible { outline: 2px solid var(--accent-alt); outline-offset: 4px; }
.welcome-page button:disabled { cursor: wait; opacity: .65; }
.welcome-footnote { color: #91a2b5; font-size: .875rem; margin: 1rem 0 0; }
.welcome-stage { min-width: 0; position: relative; }
.welcome-showcase { padding: 2rem 0 0; background: radial-gradient(ellipse at 50% 45%, #e6a24818, transparent 65%); }
.welcome-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: .8rem; padding: 1.5rem .5rem; }
.welcome-shelf figure { --poster-offset: 1rem; --poster-tilt: 0deg; margin: 0; min-width: 0; position: relative; transform: translateY(var(--poster-offset)) rotate(var(--poster-tilt)); }
.welcome-shelf figure:first-child { --poster-tilt: -5deg; }
.welcome-shelf figure:nth-child(2) { --poster-offset: -1rem; z-index: 1; }
.welcome-shelf figure:last-child { --poster-tilt: 5deg; }
.welcome-shelf img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border: 1px solid #65708580; border-radius: 8px; box-shadow: 0 20px 35px #0008; background: #1c2530; }
.welcome-shelf figcaption { margin-top: .8rem; color: #bac6d5; text-align: center; font-size: .875rem; line-height: 1.4; }
.welcome-shelf-caption { display: flex; align-items: center; gap: .9rem; margin: 2rem 0 0; }
.welcome-shelf-caption p { color: #98a9ba; font-size: .875rem; text-align: center; }
.welcome-rule { height: 1px; flex: 1; background: #344151; }
@media (hover: hover) and (pointer: fine) {
  .welcome-shelf figure:hover { z-index: 2; }
  .welcome-shelf figure:hover img { border-color: #e5b66e; box-shadow: 0 26px 42px #0009, 0 0 22px #f0b85b20; }
  .welcome-shelf figure:hover figcaption { color: #f6d9a8; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .welcome-shelf figure { transition: transform 240ms cubic-bezier(.2, .7, .3, 1); }
  .welcome-shelf img { transition: border-color 240ms ease, box-shadow 240ms ease; }
  .welcome-shelf figcaption { transition: color 240ms ease; }
  .welcome-shelf figure:hover { transform: translateY(calc(var(--poster-offset) - 12px)) rotate(var(--poster-tilt)) scale(1.035); }
}
.welcome-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; border-top: 1px solid #344151; padding-top: 2rem; }
.welcome-features article { padding-right: 1rem; }
.welcome-feature-number { font-size: .875rem; color: var(--accent-alt); font-weight: 500; }
.welcome-features h3 { font-size: 1.125rem; margin: .65rem 0; }
.welcome-features p { font-size: 1rem; color: var(--muted); line-height: 1.65; margin: 0; }
.welcome-import-note { margin: 2.3rem 0 0; padding: 1.3rem 0; border-top: 1px solid #253244; color: #93a5ba; font-size: .875rem; text-align: center; }
.welcome-auth-card { padding: 2rem; border: 1px solid #3b495b; border-radius: 16px; background: linear-gradient(145deg, #18212dea, #0c121bf5); box-shadow: var(--shadow); }
.welcome-auth-card .welcome-eyebrow { margin-bottom: .7rem; }
.welcome-auth-card h3 { font-size: 1.9rem; letter-spacing: -.025em; margin: 0; }
.auth-description { color: var(--muted); line-height: 1.6; margin: .6rem 0 1.7rem; }
.google-auth-button {
  width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: .75rem;
  padding: .75rem 1rem; border: 1px solid #dadce0; border-radius: 9px; background: #f8f9fa;
  color: #202124; font: 500 .9375rem "IBM Plex Sans", sans-serif; cursor: pointer;
}
.google-auth-button svg { flex-shrink: 0; }
.google-auth-button:enabled:hover { background: #fff; border-color: #f0b85b; box-shadow: 0 4px 18px #0003; }
.google-auth-button:focus-visible { outline: 2px solid var(--accent-alt); outline-offset: 4px; }
.google-auth-button:disabled { opacity: .65; cursor: wait; }
.auth-divider { display: flex; align-items: center; gap: .9rem; margin: 1.2rem 0; color: #8b9db1; font-size: .75rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #2c3b4d; }
@media (prefers-reduced-motion: no-preference) {
  .google-auth-button { transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
}
.welcome-page .auth-form { gap: .55rem; margin: 0; }
.welcome-page .auth-form label { font-size: .875rem; font-weight: 500; }
.welcome-page .auth-form > label:not(:first-child) { margin-top: .6rem; }
.welcome-page .auth-form input { width: 100%; min-width: 0; min-height: 48px; font-size: 1rem; }
.auth-password-field { position: relative; }
.welcome-page .auth-password-field input { padding-right: 4.3rem; }
.auth-password-field button { position: absolute; right: 5px; top: 4px; bottom: 4px; min-width: 52px; border: 0; background: transparent; color: #c4d1df; font: 500 .875rem "IBM Plex Sans", sans-serif; cursor: pointer; border-radius: 5px; }
.auth-password-field button:hover { background: #ffffff0c; }
.auth-password-hint { margin: 0; color: var(--muted); font-size: .875rem; }
.welcome-page .auth-form > .btn { margin-top: .8rem; width: 100%; }
.auth-switch { padding-top: 1.3rem; margin: 1.5rem 0 0; border-top: 1px solid #2c3b4d; text-align: center; color: var(--muted); font-size: .875rem; line-height: 1.7; }
.auth-switch button, .welcome-back { border: none; background: transparent; color: #f0b85b; cursor: pointer; font: 600 .875rem "IBM Plex Sans", sans-serif; padding: .35rem; }
.auth-switch button:hover, .welcome-back:hover { text-decoration: underline; }
.welcome-back { min-height: 44px; padding-left: 0; font-size: 1rem; }
.welcome-back span { margin-right: .4rem; }
.welcome-auth-status { margin: 1rem .25rem 0; font-size: .9375rem; line-height: 1.6; overflow-wrap: anywhere; }
.welcome-auth-status:empty { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .welcome-copy, .welcome-showcase, .welcome-auth-card { animation: welcome-reveal 450ms ease-out both; }
  .welcome-showcase { animation-delay: 90ms; }
  @keyframes welcome-reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 800px) {
  .welcome-page { padding-top: 1.8rem; }
  .welcome-main { gap: 2rem; min-height: auto; }
  .welcome-copy h2 { font-size: clamp(3.25rem, 8vw, 4.75rem); }
  .welcome-auth-card { padding: 1.5rem; }
  .welcome-features { gap: 1.4rem; }
}
@media (max-width: 640px) {
  .welcome-page { padding: 1.5rem .4rem 0; }
  .welcome-main { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; padding: 0 0 2rem; }
  .welcome-copy h2 { font-size: clamp(4.5rem, 16vw, 6rem); }
  .welcome-eyebrow { letter-spacing: .09em; font-size: .8125rem; }
  .welcome-description { margin: 1.2rem 0; font-size: 1rem; }
  .welcome-actions .btn { flex: 1; white-space: nowrap; padding-inline: 1rem; }
  .welcome-showcase { max-width: 460px; margin: 0 auto; padding-top: 0; }
  .welcome-shelf { padding-top: 1rem; }
  .welcome-shelf-caption { margin-top: 1rem; }
  .welcome-features { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .welcome-features article { padding-right: 0; }
  .welcome-auth-card { padding: 1.5rem 1.2rem; }
  .auth-mode-open .welcome-copy h2 { font-size: 3rem; }
  .auth-mode-open .welcome-description, .auth-mode-open .welcome-footnote { display: none; }
  .auth-mode-open .welcome-main { gap: .8rem; }
  .auth-mode-open .welcome-copy .welcome-eyebrow { margin-bottom: .7rem; }
}

.account-inner {
  display: flex;
  gap: 0.55rem;
  align-items: center;
}

.header-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.header-profile-link:hover .username-chip,
.header-profile-link:focus-visible .username-chip {
  border-color: #d59c3d;
  color: #fff0ce;
}

.header-profile-link:focus-visible {
  outline: 2px solid rgba(226, 79, 61, 0.55);
  outline-offset: 4px;
  border-radius: 999px;
}

.header-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid #3c536d;
}

.header-avatar-fallback {
  display: grid;
  place-items: center;
  color: #111820;
  background: linear-gradient(145deg, var(--accent-alt), var(--accent));
  font-weight: 800;
}

.username-chip {
  background-color: #1a2737;
  border: 1px solid #334760;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  color: #d4e2f4;
  font-weight: 600;
  transition: border-color 140ms ease, color 140ms ease;
}

.favorite-editor {
  display: grid;
  gap: 0.65rem;
  padding: 0.8rem;
  border: 1px solid #30445a;
  border-radius: 11px;
  background: rgba(9, 16, 24, 0.72);
}

.favorite-editor-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.favorite-editor-heading > div {
  display: grid;
  gap: 0.2rem;
}

.favorite-editor-count {
  flex: 0 0 auto;
  border: 1px solid #465f79;
  border-radius: 999px;
  padding: 0.18rem 0.42rem;
  color: #b8cadc;
  font-size: 0.68rem;
  font-weight: 750;
}

.favorite-editor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.favorite-editor-slot {
  position: relative;
  overflow: hidden;
  min-height: 108px;
  display: grid;
  align-content: end;
  gap: 0.35rem;
  border: 1px dashed #3b4f65;
  border-radius: 8px;
  padding: 0.48rem;
  color: #71869b;
  background: rgba(13, 21, 31, 0.72);
  font-size: 0.67rem;
}

.favorite-editor-slot.filled {
  border-style: solid;
  border-color: #4a6178;
  color: #f2f6fa;
  background-image:
    linear-gradient(0deg, rgba(5, 9, 14, 0.98) 0%, rgba(5, 9, 14, 0.2) 80%),
    var(--favorite-image, none);
  background-position: center;
  background-size: cover;
}

.favorite-editor-slot strong {
  position: relative;
  z-index: 1;
  font-size: 0.68rem;
  line-height: 1.2;
}

.favorite-remove-btn {
  position: relative;
  z-index: 1;
  justify-self: start;
  border: 0;
  padding: 0;
  color: #dfa1a1;
  background: transparent;
  font: inherit;
  font-size: 0.62rem;
  cursor: pointer;
}

.favorite-remove-btn:hover,
.favorite-remove-btn:focus-visible {
  color: #ffd0d0;
  text-decoration: underline;
}

.hidden {
  display: none !important;
}

.startup-panel { min-height: 36vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 2rem 1rem; text-align: center; color: var(--muted); }
.startup-panel p { margin: 0; line-height: 1.6; }
.startup-panel .btn { min-height: 44px; margin-top: .4rem; font: 500 .9375rem "IBM Plex Sans", sans-serif; }

.stats {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 0.9rem;
}

.stat {
  background-color: #0d141d;
  border: 1px solid #29384d;
  border-radius: 10px;
  padding: 0.65rem;
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 700;
}

.stat-label {
  font-size: 0.82rem;
  color: var(--muted);
}

.toolbar {
  margin-bottom: 0.95rem;
}

.dashboard-subnav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.toolbar-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
}

.section-title {
  margin: 1rem 0 0.7rem;
  font-size: 1rem;
  color: #d5e2f3;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.sort-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.sort-label select {
  background-color: #0a1017;
  border: 1px solid #2a3a50;
  color: var(--text);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
}

.home-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.franchise-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

#achievementsPanel { padding: clamp(1.1rem, 3vw, 2rem); background: linear-gradient(135deg, #16202aeb, #10161deb 60%); }
.achievement-heading { display: grid; grid-template-columns: 1fr minmax(220px, .5fr); gap: 2rem; align-items: center; padding-bottom: 1.8rem; border-bottom: 1px solid var(--panel-border); }
.achievement-eyebrow { margin: 0 0 .6rem; color: var(--accent-alt); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; }
.achievement-heading h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -.035em; }
.achievement-heading .hint { margin: .65rem 0 0; line-height: 1.6; }
.achievement-overview { display: grid; gap: .75rem; padding-left: 1.7rem; border-left: 1px solid var(--panel-border); }
.achievement-overview > strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.achievement-overview .hint { font-size: .8rem; margin: 0; }
.achievement-toolbar { display: flex; align-items: end; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0 .8rem; }
.achievement-toolbar label { display: grid; gap: .4rem; font-size: .75rem; color: var(--muted); }
.achievement-toolbar .achievement-search { flex: 1; min-width: 180px; }
.achievement-toolbar input, .achievement-toolbar select { min-height: 44px; font: inherit; font-size: .875rem; border-radius: 7px; }
#achievementCheckStatus { font-size: .8rem; line-height: 1.6; margin-bottom: 1.8rem; }
#achievementsGrid { display: grid; gap: 2rem; }
.achievement-group { display: grid; gap: .9rem; min-width: 0; }
.achievement-group-title { margin: 0; display: flex; align-items: center; gap: .75rem; font-size: 1rem; font-weight: 500; }
.achievement-group-title span { color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.achievement-group-title::after { content: ""; height: 1px; background: var(--panel-border); flex: 1; margin-left: .25rem; }
.achievements-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.achievement-card { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; min-width: 0; text-align: left; font: inherit; color: var(--text); border: 1px solid #2c3948; border-radius: 12px; padding: 1.25rem; background: #0c131ce6; cursor: pointer; }
.achievement-card.unlocked { border-color: #78603a80; background: radial-gradient(ellipse at 0 0, #dca64b14, transparent 80%), #0c131c; }
.achievement-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; }
.achievement-badge { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 16px; border: 1px solid #394656; background: linear-gradient(145deg, #25313f, #101720); font-size: 1.6rem; }
.unlocked .achievement-badge { border-color: #c3954580; background: linear-gradient(145deg, #6e512a66, #211d19); box-shadow: inset 0 1px 0 #f3d29d22; }
.achievement-state { color: #a9bbce; font-size: .68rem; font-weight: 500; border: 1px solid #2d3a4a; border-radius: 999px; padding: .25rem .55rem; }
.unlocked .achievement-state { border-color: #b78a414a; color: #f1c679; background: #e2b04f0a; }
.achievement-name { display: block; font-size: 1rem; line-height: 1.4; }
.achievement-desc { display: block; color: var(--muted); font-size: .82rem; line-height: 1.6; margin-bottom: auto; }
.achievement-progress { display: block; padding-top: .8rem; color: #ccd7e4; font-size: .75rem; font-variant-numeric: tabular-nums; }
.achievement-helper { display: block; padding-top: .3rem; color: #a7b6c7; font-size: .72rem; }
.achievement-progress-bar, #achievementOverallProgress { display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; width: 100%; height: 4px; border-radius: 4px; overflow: hidden; background: #25313e; }
.achievement-progress-bar::-webkit-progress-bar, #achievementOverallProgress::-webkit-progress-bar { background: #25313e; }
.achievement-progress-bar::-webkit-progress-value, #achievementOverallProgress::-webkit-progress-value { background: linear-gradient(90deg, var(--accent), var(--accent-alt)); border-radius: 4px; }
.achievement-progress-bar::-moz-progress-bar, #achievementOverallProgress::-moz-progress-bar { background: linear-gradient(90deg, var(--accent), var(--accent-alt)); border-radius: 4px; }
.achievement-empty { margin: 0; padding: 2rem 1rem; color: var(--muted); text-align: center; border: 1px dashed var(--panel-border); border-radius: 10px; }
.achievement-rules { margin-top: 2rem; border-top: 1px solid var(--panel-border); padding-top: 1rem; color: var(--muted); font-size: .8rem; }
.achievement-rules summary { cursor: pointer; padding: .5rem 0; color: #d6e0ec; }
.achievement-rules p { line-height: 1.7; max-width: 90ch; }
.achievement-detail { width: min(620px, calc(100% - 2rem)); max-height: 85dvh; margin: auto; padding: clamp(1.1rem, 4vw, 2rem); color: var(--text); background: #101923; border: 1px solid #425163; border-radius: 16px; box-shadow: 0 30px 100px #0009; }
.achievement-detail::backdrop { background: #03070cbd; }
.achievement-detail-header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.achievement-detail-header h3 { font-size: 1.4rem; }
.achievement-detail-header button { flex-shrink: 0; min-height: 40px; }
.achievement-detail > .hint { font-size: .875rem; line-height: 1.65; }
#achievementDetailProgress { color: var(--accent-alt); font-weight: 500; }
#achievementDetailRule { padding: .9rem; background: #182431; border-radius: 8px; font-size: .8rem; }
.achievement-franchise-list { display: grid; gap: 0; list-style: none; padding: 0; margin: .8rem 0 0; }
.achievement-franchise-list li { display: flex; gap: .8rem; align-items: center; padding: .8rem 0; border-top: 1px solid #2a3747; font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
.achievement-check { flex-shrink: 0; display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #415166; border-radius: 50%; color: var(--muted); }
.achievement-check.complete { border-color: #b18a46; color: #f3c875; background: #b18a4615; }
#achievementsPanel :is(button, input, select, summary):focus-visible { outline: 2px solid var(--accent-alt); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .achievement-card:hover { border-color: #ab884d; background-color: #16202b; } .achievement-card:hover .achievement-helper { color: var(--accent-alt); } }
@media (prefers-reduced-motion: no-preference) { .achievement-card { transition: border-color 160ms ease, transform 160ms ease; } .achievement-card:hover { transform: translateY(-3px); } }
@media (max-width: 900px) { .achievements-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .achievement-heading { grid-template-columns: 1fr; gap: 1rem; }
  .achievement-overview { border-left: 0; padding: 1rem 0 0; border-top: 1px solid var(--panel-border); }
  .achievement-toolbar { gap: .75rem; }
  .achievement-toolbar .achievement-search { flex-basis: 100%; }
  .achievement-toolbar .sort-label { flex: 1; min-width: 0; }
  .achievement-toolbar select { max-width: 100%; width: 100%; }
  .achievements-grid { grid-template-columns: 1fr; }
}

.admin-achievement-list {
  margin-top: 0.85rem;
  display: grid;
  gap: 0.55rem;
}

.admin-stats-heading { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.admin-stats-heading h3 { font-size: clamp(1.6rem, 3vw, 2.25rem); letter-spacing: -.035em; margin: .5rem 0; }
.admin-stats-heading .hint { margin: .6rem 0 0; }
.admin-stats-heading button { flex-shrink: 0; display: flex; align-items: center; gap: .6rem; }
.admin-stats-heading button span { font-size: 1.3rem; color: #f5b754; }
.admin-stats-heading button:disabled { opacity: .6; cursor: wait; }
.admin-stats-status { margin: 1.4rem 0; padding-left: .85rem; border-left: 2px solid #566b80; font-size: .8rem; line-height: 1.6; }
.admin-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.admin-site-metric { min-width: 0; padding: 1.4rem; border: 1px solid #2b3b4f; border-radius: 14px; background: linear-gradient(145deg, rgba(27, 40, 54, .55), rgba(9, 16, 24, .95)); }
.admin-site-metric.featured { border-color: #77613d; background: radial-gradient(ellipse at top right, rgba(245, 183, 84, .13), transparent 80%), #101923; }
.admin-site-metric .review-eyebrow { color: var(--muted); font-size: .65rem; margin: 0 0 1.6rem; letter-spacing: .11em; }
.admin-site-metric.featured .review-eyebrow { color: #f5b754; }
.admin-site-metric-value { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.admin-site-metric-value.unavailable { font-size: 1rem; letter-spacing: 0; color: var(--muted); min-height: 2.5rem; display: flex; align-items: center; }
.admin-site-metric h4 { margin: .65rem 0 .5rem; font-size: .9rem; }
.admin-site-metric .hint { margin: 0; font-size: .75rem; line-height: 1.65; }
.admin-stats-notes { border-top: 1px solid #2b3b4f; margin-top: 1.6rem; padding-top: 1.25rem; font-size: .8rem; line-height: 1.7; }
.admin-stats-notes summary { cursor: pointer; width: fit-content; color: #dbe8f6; }
.admin-stats-notes p { max-width: 88ch; color: var(--muted); }
@media (max-width: 1000px) { .admin-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) {
  .admin-stats-heading { align-items: start; flex-direction: column; gap: 1rem; }
  .admin-stats-grid { gap: .65rem; }
  .admin-site-metric { padding: 1rem; }
  .admin-site-metric .review-eyebrow { font-size: .6rem; margin-bottom: 1rem; }
}
@media (max-width: 360px) { .admin-stats-grid { grid-template-columns: minmax(0, 1fr); } }

/* The achievement workshop is scoped away from the other admin tabs. */
.achievement-workshop-heading { margin: 2rem 0 1.4rem; }
.achievement-workshop-heading h3 { margin: .45rem 0; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.035em; }
.achievement-workshop-heading .hint { margin: .5rem 0; max-width: 65ch; }
.achievement-workshop { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(240px, 1fr); gap: 1.5rem; align-items: start; }
.achievement-editor, .achievement-preview { border: 1px solid #2b3b4f; border-radius: 16px; padding: clamp(1rem, 2.5vw, 1.6rem); background: rgba(10, 17, 25, .8); min-width: 0; }
.achievement-editor-heading { display: flex; justify-content: space-between; align-items: center; }
.achievement-editor-heading h4 { font-size: 1.15rem; margin: 0; }
.achievement-templates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.achievement-templates .btn { border-radius: 10px; padding: .85rem .6rem; text-align: left; font-size: .78rem; white-space: normal; }
.achievement-templates span { display: block; margin-top: .4rem; color: var(--muted); font-size: .72rem; font-weight: 400; }
.achievement-step { margin: .8rem 0 0; padding-top: 1.25rem; border-top: 1px solid #293746; font-size: .75rem; color: #f5b754; text-transform: uppercase; letter-spacing: .12em; }
.achievement-text-action { padding: 0; border: 0; background: none; color: #f5b754; font: inherit; font-size: .8rem; text-align: left; width: fit-content; cursor: pointer; }
.achievement-text-action:hover { text-decoration: underline; }
.achievement-badge-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.achievement-badge-choices button { display: grid; place-items: center; min-width: 42px; min-height: 42px; border: 1px solid #34465a; border-radius: 10px; background: #131f2b; color: #f5b754; font-size: 1.3rem; cursor: pointer; }
.achievement-badge-choices button:hover { border-color: #f5b754; background: #26303a; }
.achievement-specific-fields { display: grid; gap: .85rem; }
.achievement-editor textarea { resize: vertical; }
.achievement-editor .auth-actions { padding-top: .75rem; flex-wrap: wrap; }
.achievement-preview { position: sticky; top: 1.5rem; background: radial-gradient(ellipse at top right, rgba(245, 183, 84, .09), transparent 65%), #101923; overflow-wrap: anywhere; }
.achievement-preview-badge { display: grid; place-items: center; width: 76px; min-height: 76px; padding: .5rem; margin: 1.6rem 0 1.25rem; border: 1px solid #76613a; border-radius: 20px; background: rgba(245, 183, 84, .07); color: #f5b754; font-size: 1.7rem; }
.achievement-preview h3 { font-size: 1.35rem; margin: 0 0 .6rem; }
.achievement-preview p { line-height: 1.65; }
.achievement-preview-goal { margin: 1.5rem 0 1rem; padding: 1rem 0; border-block: 1px solid #2b3b4f; }
.achievement-preview-goal p { margin-bottom: 0; }
.achievement-preview small { display: block; border-top: 1px solid #2b3b4f; padding-top: 1rem; margin-top: 1.25rem; }
.achievement-catalog { margin-top: 2.5rem; border-top: 1px solid #2b3b4f; padding-top: 1.75rem; }
.achievement-catalog-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.achievement-catalog-heading h3 { margin: 0 0 .5rem; }
.achievement-catalog-heading p { margin: 0; }
.achievement-catalog-filters { display: flex; gap: .75rem; flex-wrap: wrap; }
.achievement-catalog-filters label { display: grid; gap: .4rem; font-size: .75rem; color: var(--muted); }
.achievement-catalog-filters input { width: min(100%, 300px); }
#adminAchievementList { gap: .75rem; }
#adminAchievementList .admin-achievement-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; padding: 1rem; gap: 1rem; }
.achievement-catalog-badge { display: grid; place-items: center; border-radius: 12px; background: #1b2733; color: #f5b754; min-height: 48px; font-size: 1.25rem; overflow-wrap: anywhere; }
#adminAchievementList .admin-achievement-label { min-width: 0; overflow-wrap: anywhere; }
#adminAchievementList .admin-achievement-label strong { font-size: .95rem; }
.achievement-kind { display: inline-block; margin-left: .6rem; font-size: .65rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
#adminAchievementList .admin-achievement-label p { margin: .4rem 0; color: #bdc9d7; line-height: 1.5; }
#adminAchievementsSection :is(button, input, textarea, select):focus-visible { outline: 2px solid #f5b754; outline-offset: 3px; }
#adminAchievementsSection button:disabled { opacity: .55; cursor: wait; }
@media (max-width: 850px) {
  .achievement-workshop { grid-template-columns: minmax(0, 1fr); }
  .achievement-preview { position: static; }
  .achievement-preview-badge { float: right; margin: 0 0 1rem 1rem; }
}
@media (max-width: 520px) {
  .achievement-templates { grid-template-columns: minmax(0, 1fr); }
  .achievement-templates span { display: inline; margin-left: .5rem; }
  .achievement-catalog-filters, .achievement-catalog-filters label { width: 100%; }
  .achievement-catalog-filters input { width: 100%; }
  #adminAchievementList .admin-achievement-row { grid-template-columns: 38px minmax(0, 1fr); gap: .75rem; }
  #adminAchievementList .admin-achievement-actions { grid-column: 2; }
}

.admin-achievement-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid #2b3b4f;
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  background-color: rgba(11, 18, 28, 0.75);
}

.admin-achievement-row.selected {
  border-color: #4d6f92;
  box-shadow: 0 0 0 1px rgba(77, 111, 146, 0.28);
}

.social-layout {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.4fr);
  align-items: start;
}

#socialProfilePanel {
  padding: clamp(1.1rem, 3vw, 2rem);
  background: radial-gradient(ellipse at 100% 0%, rgba(226, 79, 61, 0.06), transparent 50%), #101720;
}

.profile-page-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.75rem;
}

.profile-page-toolbar .section-title {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 400;
}

.social-profile { min-width: 0; }

.social-profile-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
.collection-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.collection-toolbar .btn { background: rgba(10, 16, 24, .7); }
.share-dialog {
  width: min(620px, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  box-sizing: border-box;
  padding: 1.5rem;
  border: 1px solid #394b5d;
  border-radius: 20px;
  background: radial-gradient(ellipse at top right, #352821, #101923 65%);
  color: var(--text);
  box-shadow: 0 30px 100px #0009;
  overflow-y: auto;
}
.share-dialog::backdrop { background: #060b12c9; backdrop-filter: blur(5px); }
.share-dialog [hidden] { display: none !important; }
.share-dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.share-dialog-header h2 { margin: .35rem 0 1rem; font-size: 1.65rem; letter-spacing: -.03em; }
.share-dialog-header .review-eyebrow { margin: 0; }
.share-card-options { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.share-card-option { padding: .6rem .85rem; border: 1px solid var(--panel-border); border-radius: 8px; background: #101923; color: var(--muted); font: inherit; cursor: pointer; }
.share-card-option[aria-pressed="true"] { border-color: #f5bc5580; background: #f5bc5512; color: #f5bc55; }
.share-card-preview { width: min(100%, 420px); margin-inline: auto; border: 1px solid #ffffff20; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 30px #0004; }
.share-card-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.share-status { min-height: 1.4em; margin: .9rem 0; font-size: .82rem; }
.share-link-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.share-link-row input { width: 100%; box-sizing: border-box; font-size: .82rem; color: var(--muted); }
.share-link-row .btn, .share-download-actions .btn { min-height: 44px; font-size: .875rem; }
.share-download-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.share-download-actions a { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.share-download-disabled { pointer-events: none; filter: grayscale(1); }
.share-note { color: var(--muted); font-size: .75rem; line-height: 1.6; margin-bottom: 0; }
.share-privacy { padding: .85rem; border: 1px solid #f5bc5540; border-radius: 10px; color: #f5bc55; font-size: .82rem; line-height: 1.5; background: #f5bc5509; }
.share-dialog button:focus-visible, .share-dialog a:focus-visible { outline: 2px solid #f5bc55; outline-offset: 3px; }
@media (max-width: 600px) {
  .share-dialog { padding: 1rem; }
  .social-profile-actions { justify-content: flex-start; }
  .collection-toolbar .btn { font-size: .8rem; }
}

.social-profile-head {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.25rem;
  padding: 0.25rem 0 1.75rem;
}

.social-avatar {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #101720;
  outline: 1px solid #344355;
}

.social-avatar-fallback {
  display: grid;
  place-items: center;
  color: #111820;
  background: linear-gradient(145deg, var(--accent-alt), var(--accent));
  font-size: 2rem;
  font-weight: 700;
}

.social-profile-identity { min-width: 0; }

.social-profile-identity .section-title {
  margin: 0 0 0.15rem;
  font-size: clamp(1.6rem, 3vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

#socialProfileHandle { margin: 0; font-size: 0.875rem; }

#socialProfileBio {
  max-width: 54ch;
  margin: 0.75rem 0;
  font-size: 1rem;
  color: #d0dbe7;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.social-profile-joined {
  margin: 0.55rem 0;
  color: #91a3b7;
  font-size: 0.875rem;
}

.profile-connections {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.profile-connections strong { color: var(--text); font-weight: 500; }
.profile-connections button { border: 0; background: none; padding: .35rem 0; color: inherit; font: inherit; cursor: pointer; }
.profile-connections button:hover { color: var(--accent-alt); }
.profile-connections button:focus-visible { outline: 2px solid var(--accent-alt); outline-offset: 4px; border-radius: 3px; }
.connections-dialog { width: min(480px, calc(100% - 24px)); max-height: min(720px, calc(100dvh - 40px)); overflow: auto; padding: 1.5rem; color: var(--text); background: #111b26; border: 1px solid #38495c; border-radius: 16px; box-shadow: 0 24px 90px #0009; }
.connections-dialog::backdrop { background: #04080dcc; }
.connections-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.connections-heading h2 { margin: .3rem 0 0; font-size: 1.6rem; letter-spacing: -.025em; }
.connections-heading .review-eyebrow { font-size: .75rem; overflow-wrap: anywhere; }
.connections-dialog .hint { font-size: .875rem; line-height: 1.5; }
#profileConnectionsStatus:empty { display: none; }
.connections-list { display: grid; margin-top: 1rem; }
.connection-member { display: flex; align-items: center; gap: .85rem; width: 100%; padding: .9rem .2rem; text-align: left; border: 0; border-bottom: 1px solid #2c3a4a; background: none; color: var(--text); font: inherit; cursor: pointer; }
.connection-member:hover { background: #ffffff05; }
.connection-identity { display: grid; gap: .2rem; min-width: 0; flex: 1; }
.connection-identity strong { font-size: 1rem; overflow-wrap: anywhere; }
.connection-identity > span { color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }
.connection-arrow { color: var(--accent-alt); }
.connections-dialog button:focus-visible { outline: 2px solid var(--accent-alt); outline-offset: 3px; }
#profileConnectionsMore { margin-top: 1rem; width: 100%; min-height: 44px; }
@media (max-width: 480px) { .connections-dialog { padding: 1.15rem; } }
.social-profile-actions .btn { min-height: 42px; min-width: 112px; padding: 0.55rem 1rem; font-size: 0.875rem; }

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 1.25rem 0;
  border-block: 1px solid var(--panel-border);
}

.profile-stat { display: grid; gap: 0.3rem; min-width: 0; padding-left: 1.5rem; }
.profile-stat:first-child { padding-left: 0; }
.profile-stat + .profile-stat { border-left: 1px solid var(--panel-border); }
.profile-stat strong { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.profile-stat span { color: var(--muted); font-size: 0.875rem; }

.social-profile-section { margin-top: 1.75rem; }
.profile-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.profile-section-heading .section-title { margin: 0; font-size: 1rem; }
.profile-text-button { padding: 0.3rem 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.875rem; cursor: pointer; }
.profile-text-button:hover { color: var(--accent-alt); }

.social-favorites-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.5rem); width: 100%; }
.social-favorite-card { display: grid; align-content: start; gap: 0.65rem; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.social-favorite-poster { display: block; overflow: hidden; aspect-ratio: 2 / 3; border: 1px solid #344355; border-radius: 7px; background: linear-gradient(145deg, #233246, #131b26); transition: border-color 150ms ease; }
.social-favorite-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.social-favorite-name { font-size: 0.875rem; line-height: 1.4; overflow-wrap: anywhere; }
.social-favorite-card:hover .social-favorite-poster { border-color: var(--accent-alt); }
.social-favorite-card:hover .social-favorite-name { color: var(--accent-alt); }
.social-favorite-slot { min-width: 0; }
.social-favorite-slot .social-favorite-card { width: 100%; }
.profile-watchlist-button { margin-top: 12px; }
.profile-review-content .profile-watchlist-button { width: auto; padding-inline: 12px; }
.profile-favorites-prompt { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px dashed #344355; border-radius: 8px; }
.profile-favorites-prompt p { margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
.profile-favorites-prompt .btn { flex-shrink: 0; min-height: 42px; }

.profile-tabs { display: flex; gap: 1.75rem; margin-top: 1.75rem; border-bottom: 1px solid var(--panel-border); }
.profile-tabs button { position: relative; min-height: 48px; padding: 0.75rem 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.9375rem; cursor: pointer; }
.profile-tabs button[aria-selected="true"] { color: var(--text); }
.profile-tabs button[aria-selected="true"]::after { content: ""; position: absolute; bottom: -1px; height: 2px; inset-inline: 0; background: var(--accent); }
.profile-tab-panel { padding-top: 1.5rem; }
.profile-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 1.1rem; }

.profile-library-card { min-width: 0; border: 1px solid var(--panel-border); border-radius: 9px; overflow: hidden; background: #0d141d; }
.profile-library-art { display: block; width: 100%; aspect-ratio: 16 / 8; border: 0; padding: 0; background: linear-gradient(140deg, #28374a, #101923); cursor: pointer; overflow: hidden; }
.profile-library-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-library-info { padding: 1rem 0.9rem 0.9rem; }
.profile-library-info h3, .profile-review h3 { margin: 0; line-height: 1.4; }
.profile-library-title { display: inline; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 1rem; font-weight: 600; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.profile-library-title:hover:not(:disabled) { color: var(--accent-alt); }
.profile-library-title:disabled { cursor: default; }
.profile-library-meta { margin: 0.4rem 0 1rem; font-size: 0.875rem; color: var(--muted); }
.profile-library-progress-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem; font-size: 0.8125rem; color: var(--muted); }
.profile-library-progress-label strong { color: #d3dce7; font-weight: 500; }
.profile-library-progress-label.complete strong { color: var(--ok); }
.profile-library-progress { height: 3px; margin-top: 0.65rem; overflow: hidden; border-radius: 3px; background: #233244; }
.profile-library-progress span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-alt)); }
.profile-movie-details { border-top: 1px solid var(--panel-border); }
.profile-movie-details summary { padding: 0.7rem 0.9rem; color: var(--muted); font-size: 0.875rem; cursor: pointer; min-height: 42px; }
.profile-movie-details summary:hover { color: var(--text); }
.profile-movie-list { display: grid; gap: 0.9rem; list-style: none; margin: 0; padding: 0.3rem 0.9rem 1rem; }
.profile-movie-list li { display: grid; grid-template-columns: 17px minmax(0, 1fr) auto; align-items: start; gap: 0.5rem; font-size: 0.875rem; line-height: 1.45; overflow-wrap: anywhere; }
.profile-movie-year { color: var(--muted); font-size: 0.8125rem; }
.profile-watch-indicator { position: relative; width: 16px; height: 16px; margin-top: 2px; border: 1px solid #415166; border-radius: 50%; }
.profile-watch-indicator.watched { border-color: var(--ok); background: rgba(49, 196, 141, 0.12); }
.profile-watch-indicator.watched::after { content: ""; position: absolute; width: 4px; height: 7px; top: 2px; left: 5px; border: solid var(--ok); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.profile-load-more { display: block; margin: 1.5rem auto 0; min-height: 44px; padding: 0.65rem 1.5rem; }
.profile-empty { grid-column: 1 / -1; padding: 2.25rem 1rem; text-align: center; }
.profile-empty strong { font-size: 1rem; font-weight: 500; }
.profile-empty p { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--muted); line-height: 1.5; }

.profile-review-list { display: grid; gap: 0; }
.profile-review { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.25rem 0; border-bottom: 1px solid var(--panel-border); }
.profile-review:first-child { padding-top: 0; }
.profile-review:last-child { border-bottom: 0; }
.profile-review-poster { display: block; flex: 0 0 64px; width: 64px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 5px; border: 1px solid var(--panel-border); }
.profile-review-content { min-width: 0; flex: 1; }
.profile-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.55rem; color: var(--muted); font-size: 0.8125rem; }
.profile-review-text { max-width: 72ch; margin: 0.85rem 0 0; color: #d0dbe7; font-size: 1rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }

#socialProfilePanel button:focus-visible, .profile-movie-details summary:focus-visible, .profile-tab-panel:focus-visible { outline: 2px solid var(--accent-alt); outline-offset: 4px; }
.profile-library-art:focus-visible { outline-offset: -4px !important; }

@media (max-width: 800px) {
  .profile-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .profile-tabs { gap: 1rem; overflow-x: auto; }
  .profile-tabs button { font-size: .875rem; flex-shrink: 0; }
  .profile-tabs button[aria-selected="true"]::after { bottom: 0; }
  #socialProfilePanel { padding: 1rem; }
  .profile-page-toolbar { margin-bottom: 1.25rem; }
  .social-profile-head { grid-template-columns: 60px minmax(0, 1fr); gap: 1rem; padding-bottom: 1.25rem; }
  .social-avatar { width: 60px; height: 60px; }
  .social-avatar-fallback { font-size: 1.5rem; }
  .social-profile-actions { grid-column: 2; justify-self: start; }
  .social-profile-actions .btn { min-height: 44px; }
  .profile-connections { gap: 0.9rem; }
  .profile-stat { padding-left: 0.75rem; }
  .profile-stat span { font-size: 0.8125rem; }
  .social-favorites-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .social-favorite-name { font-size: 0.875rem; }
  .profile-favorites-prompt { flex-direction: column; align-items: flex-start; }
  .profile-library-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-review { gap: 0.8rem; }
  .profile-review-poster { width: 48px; flex-basis: 48px; }
}

@media (max-width: 380px) {
  .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.25rem; }
  .profile-stat:nth-child(3) { border: 0; padding-left: 0; }
  .social-favorites-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.admin-achievement-label {
  font-size: 0.88rem;
  color: #dbe8f6;
}

.admin-achievement-actions {
  display: flex;
  gap: 0.4rem;
}

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid #2b3b4f;
  border-radius: 10px;
  background: rgba(11, 18, 28, 0.72);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid #233548;
  font-size: 0.84rem;
}

.admin-table th {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9db3cc;
}

.franchise-card {
  border: 1px solid #2b3b4f;
  border-radius: 12px;
  background-color: rgba(8, 13, 19, 0.72);
  overflow: hidden;
}

.franchise-card.no-image {
  border-style: dashed;
}

.franchise-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid #29384d;
  background-color: #0f1724;
}

.franchise-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.9rem 0.9rem 0.5rem;
}

.franchise-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
}

.franchise-title {
  margin: 0;
  font-size: 1.1rem;
}

.franchise-title-link {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.franchise-title-link:hover,
.franchise-title-link:focus-visible {
  color: #ffd4cb;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.franchise-meta {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.completion-pill {
  font-size: 0.75rem;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  border: 1px solid #39516d;
  color: #cee2f7;
  white-space: nowrap;
}

.btn-compact {
  padding: 0.35rem 0.6rem;
  font-size: 0.75rem;
}

.movie-details {
  padding: 0 0.9rem 0.9rem;
}

.movie-details > summary {
  cursor: pointer;
  color: #d3dfec;
  font-weight: 600;
}

.details-actions {
  margin-top: 0.55rem;
}

.movie-list {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
  display: grid;
  gap: 0.45rem;
}

.movie-row {
  display: grid;
  gap: 0.5rem;
  padding: 0.45rem;
  border: 1px solid #2a3a50;
  border-radius: 9px;
  background-color: rgba(16, 22, 31, 0.7);
}

.movie-row-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.45rem;
  align-items: center;
}

.movie-row-right {
  display: grid;
  justify-items: end;
  gap: 0.1rem;
}

.movie-title {
  font-size: 0.9rem;
}

.movie-year {
  color: var(--muted);
  font-size: 0.82rem;
}

.watched-toggle {
  accent-color: var(--ok);
  transform: scale(1.1);
}

.rating-star-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  fill: rgba(151, 169, 188, 0.13);
  stroke: #778a9f;
  stroke-width: 1.35;
  transition: fill 130ms ease, stroke 130ms ease, filter 130ms ease, transform 130ms ease;
}

.rating-star-icon.filled,
.star-rating-button.active .rating-star-icon {
  fill: #f4bd4f;
  stroke: #ffd579;
  filter: drop-shadow(0 0 5px rgba(244, 189, 79, 0.28));
}

.star-display {
  display: inline-flex;
  align-items: center;
  gap: 0.16rem;
  color: #e9c570;
}

.star-display.compact {
  gap: 0.08rem;
}

.star-display.compact .rating-star-icon {
  width: 0.82rem;
  height: 0.82rem;
}

.star-display-value {
  margin-left: 0.35rem;
  color: #f1d28e;
  font-size: 0.78rem;
  font-weight: 750;
  white-space: nowrap;
}

.franchise-review-details {
  margin: 0.65rem 0 0;
  border: 1px solid #2d3d50;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(15, 23, 33, 0.94), rgba(8, 14, 21, 0.9));
}

.franchise-review-details > summary {
  cursor: pointer;
  list-style: none;
  min-height: 54px;
  padding: 0.65rem 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  color: #e5edf6;
  transition: background 140ms ease;
}

.franchise-review-details > summary::-webkit-details-marker {
  display: none;
}

.franchise-review-details > summary:hover,
.franchise-review-details > summary:focus-visible {
  background: rgba(54, 70, 88, 0.2);
  outline: none;
}

.franchise-review-details[open] > summary {
  border-bottom: 1px solid #293a4d;
}

.review-summary-main {
  min-width: 0;
  display: grid;
  gap: 0.14rem;
}

.review-summary-main strong {
  font-size: 0.8rem;
}

.review-summary-hint {
  overflow: hidden;
  color: #8fa4ba;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.franchise-review-editor {
  padding: 0.7rem;
}

.review-composer {
  display: grid;
  gap: 0.9rem;
}

.review-composer-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 1rem;
  padding: clamp(1rem, 2.8vw, 1.45rem);
  border: 1px solid #42536a;
  border-radius: 14px;
  background:
    radial-gradient(circle at 90% 0%, rgba(240, 184, 91, 0.12), transparent 38%),
    linear-gradient(145deg, rgba(19, 28, 39, 0.98), rgba(9, 15, 23, 0.98));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24), inset 3px 0 0 rgba(226, 79, 61, 0.72);
}

.review-composer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(84, 104, 126, 0.34);
}

.review-eyebrow {
  margin: 0 0 0.2rem;
  color: #e5ad47;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.review-composer-title {
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.review-composer-intro {
  max-width: 570px;
  margin: 0.28rem 0 0;
  color: #9eb1c5;
  font-size: 0.82rem;
  line-height: 1.45;
}

.review-saved-state {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  gap: 0.25rem;
  color: #8fa4b9;
  font-size: 0.7rem;
}

.review-rating-block {
  display: grid;
  justify-items: start;
  gap: 0.32rem;
}

.review-field-heading {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.review-field-label {
  color: #dce8f4;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.review-text-button {
  border: 0;
  padding: 0;
  color: #93a8bd;
  background: transparent;
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.review-text-button:hover,
.review-text-button:focus-visible {
  color: #f0c779;
  outline: none;
  text-decoration: underline;
}

.star-rating-control {
  display: flex;
  align-items: center;
  gap: 0.14rem;
}

.star-rating-button {
  border: 0;
  padding: 0.12rem;
  background: transparent;
  cursor: pointer;
}

.star-rating-button .rating-star-icon {
  width: clamp(1.8rem, 4vw, 2.35rem);
  height: clamp(1.8rem, 4vw, 2.35rem);
}

.star-rating-button:hover .rating-star-icon,
.star-rating-button:focus-visible .rating-star-icon {
  transform: scale(1.1);
}

.star-rating-button:focus-visible {
  outline: 2px solid rgba(244, 189, 79, 0.55);
  outline-offset: 1px;
  border-radius: 5px;
}

.review-rating-feedback {
  min-height: 1em;
  color: #e4c27b;
  font-size: 0.74rem;
  font-weight: 650;
}

.review-field {
  display: grid;
  gap: 0.42rem;
}

.review-character-count {
  color: #7f94aa;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.franchise-review-input {
  width: 100%;
  min-height: 88px;
  border-color: #34475c;
  border-radius: 10px;
  padding: 0.75rem;
  background: rgba(5, 10, 16, 0.76);
  font-size: 0.86rem;
  line-height: 1.5;
}

.review-composer-page .franchise-review-input {
  min-height: 128px;
}

.review-composer-footer {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.review-local-status {
  color: #8fa4b9;
  font-size: 0.72rem;
}

.review-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.review-save-btn {
  min-width: 112px;
  padding: 0.5rem 0.85rem;
  font-size: 0.76rem;
}

.review-save-btn:disabled {
  cursor: default;
  opacity: 0.55;
  filter: saturate(0.55);
}

.review-delete-btn {
  color: #d9a2a2;
  border: 1px solid rgba(207, 96, 96, 0.38);
  background: rgba(87, 28, 31, 0.18);
}

.review-delete-btn:hover,
.review-delete-btn:focus-visible {
  color: #ffd0d0;
  border-color: rgba(235, 111, 111, 0.68);
}

.franchise-films-heading {
  margin-top: 1.25rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid #2b3c50;
}

.franchise-films-heading .section-title {
  margin: 0;
}

.social-review-card {
  display: grid;
  gap: 0.55rem;
  border: 1px solid #304157;
  border-radius: 11px;
  padding: 0.75rem;
  background: linear-gradient(145deg, rgba(15, 23, 33, 0.92), rgba(9, 15, 22, 0.86));
}

.social-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.social-review-body {
  margin: 0;
  color: #d0deec;
  font-size: 0.84rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.social-review-date {
  margin: 0;
  color: #7f94aa;
  font-size: 0.68rem;
}

.franchise-page-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  justify-content: space-between;
}

.franchise-page-image {
  width: 100%;
  margin-top: 0.6rem;
  border-radius: 12px;
  border: 1px solid #2a3a50;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  background: #0f1724;
}

#entityPageImage.franchise-page-image {
  margin: 0.65rem 0 0.5rem auto;
  border-color: #355170;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

#entityPageImage.entity-image-director.franchise-page-image {
  width: clamp(170px, 20vw, 250px);
  aspect-ratio: 9 / 14;
  object-fit: cover;
}

#entityPageImage.entity-image-studio.franchise-page-image {
  width: clamp(280px, 42vw, 520px);
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: rgba(10, 16, 23, 0.95);
  padding: 0.75rem;
}

.franchise-page-meta {
  margin-top: 0.65rem;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.2fr);
  gap: 0.6rem;
  align-items: start;
}

.franchise-page-meta-col {
  display: grid;
  gap: 0.5rem;
}

.franchise-page-card {
  border: 1px solid #33516f;
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
  background: linear-gradient(160deg, rgba(14, 26, 40, 0.9), rgba(10, 18, 27, 0.88));
  box-shadow: inset 0 0 0 1px rgba(76, 132, 176, 0.12);
}

.franchise-page-card-label {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9eb9d4;
  font-weight: 600;
}

.franchise-page-kpi-value {
  margin: 0;
  font-size: 1.48rem;
  color: #f3f8ff;
  font-weight: 800;
  line-height: 1.05;
}

.franchise-page-kpi-label {
  margin: 0.22rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a9c0d8;
  font-weight: 650;
}

.franchise-page-card.wide {
  display: grid;
  gap: 0.45rem;
  border-color: #3a5a79;
}

.franchise-page-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: 100%;
}

.franchise-page-pill {
  border: 1px solid #446788;
  border-radius: 999px;
  padding: 0.22rem 0.48rem;
  font-size: 0.78rem;
  color: #d8e8f8;
  background: rgba(11, 22, 33, 0.92);
  line-height: 1.25;
  white-space: normal;
}

.franchise-page-pill-btn {
  cursor: pointer;
  font-family: inherit;
}

.franchise-page-pill-btn:hover,
.franchise-page-pill-btn:focus-visible {
  border-color: #5f8fbb;
  color: #ffffff;
}

.franchise-inline-link {
  border: none;
  background: none;
  color: #e9f2ff;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.franchise-inline-link:hover,
.franchise-inline-link:focus-visible {
  color: #ffd4cb;
  text-decoration: underline;
}

.entity-row-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.entity-franchise-row {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: rgba(11, 18, 28, 0.78);
  background-image:
    linear-gradient(
      90deg,
      rgba(8, 13, 20, 0.96) 0%,
      rgba(8, 13, 20, 0.93) 36%,
      rgba(8, 13, 20, 0.86) 62%,
      rgba(8, 13, 20, 0.74) 100%
    ),
    var(--entity-row-image, none);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center right;
  transition: border-color 140ms ease, box-shadow 160ms ease, transform 140ms ease, background-image 180ms ease;
}

.entity-franchise-row:hover {
  border-color: #49698a;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(88, 142, 191, 0.22);
  transform: translateY(-1px);
  background-image:
    linear-gradient(
      90deg,
      rgba(8, 13, 20, 0.94) 0%,
      rgba(8, 13, 20, 0.88) 34%,
      rgba(8, 13, 20, 0.78) 60%,
      rgba(8, 13, 20, 0.62) 100%
    ),
    var(--entity-row-image, none);
}

.entity-franchise-row:focus-within {
  border-color: #5a84ac;
  box-shadow: 0 0 0 1px rgba(90, 132, 172, 0.3), 0 0 0 4px rgba(56, 84, 112, 0.18);
}

.entity-watch-pill {
  font-size: 0.76rem;
  border: 1px solid #3f5c7a;
  border-radius: 999px;
  padding: 0.24rem 0.5rem;
  color: #d9e8f7;
  white-space: nowrap;
}

.entity-movies-details {
  margin-top: 0.35rem;
}

.entity-movies-details > summary {
  cursor: pointer;
  color: #b5c9de;
  font-size: 0.8rem;
}

.entity-movies-list {
  margin: 0.35rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  color: #d7e6f5;
  font-size: 0.8rem;
  list-style: none;
}

.entity-movie-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.32rem 0.45rem;
  border-left: 2px solid rgba(88, 122, 156, 0.42);
  background: rgba(7, 13, 20, 0.48);
}

.entity-movie-title {
  min-width: 0;
}

.entity-movie-status {
  flex: 0 0 auto;
  border: 1px solid #334960;
  border-radius: 999px;
  padding: 0.12rem 0.42rem;
  color: #91a7bc;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.entity-movie-status.watched {
  border-color: rgba(48, 171, 120, 0.5);
  background: rgba(22, 111, 77, 0.22);
  color: #8ee0b9;
}

.entity-movie-status.unreleased {
  border-color: rgba(211, 164, 83, 0.45);
  background: rgba(116, 76, 21, 0.18);
  color: #d8b978;
}

.franchise-movie-grid {
  margin-top: 0.85rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.7rem;
}

.franchise-movie-card {
  border: 1px solid #2a3a50;
  border-radius: 11px;
  overflow: hidden;
  background: rgba(12, 19, 29, 0.7);
  display: grid;
}

.franchise-movie-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: #0f1724;
}

.franchise-movie-body {
  padding: 0.58rem;
  display: grid;
  gap: 0.28rem;
}

.franchise-movie-name {
  margin: 0;
  font-size: 0.92rem;
}

.franchise-movie-meta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.franchise-movie-actions {
  margin-top: 0.35rem;
}

.franchise-movie-watch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #d6e5f4;
}

.hint {
  color: var(--muted);
}

@media (max-width: 900px) {
  .layout {
    padding: 0.9rem;
  }

  .franchise-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  .stats {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}

@media (max-width: 700px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.9rem;
  }

  .header-right {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .layout {
    padding: 0.8rem;
  }

  .panel {
    padding: 0.85rem;
  }

  .brand {
    font-size: clamp(1.75rem, 9vw, 2.3rem);
  }

  .account {
    width: 100%;
  }

  .account-inner {
    justify-content: space-between;
    width: 100%;
  }

  .header-profile-link {
    min-width: 0;
  }

  .app-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .app-nav .btn {
    width: 100%;
    min-height: 42px;
  }

  .toolbar-grid {
    grid-template-columns: 1fr;
  }

  .social-layout {
    grid-template-columns: 1fr;
  }

  .toolbar-grid .btn {
    width: 100%;
    min-height: 42px;
  }

  input,
  textarea,
  .profile-form select,
  .sort-label select {
    font-size: 16px;
  }

  .auth-actions {
    flex-direction: column;
  }

  .auth-actions .btn {
    width: 100%;
    min-height: 42px;
  }

  .section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
  }

  .home-controls {
    width: 100%;
    justify-content: flex-start;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .home-controls .sort-label {
    display: grid;
    gap: 0.25rem;
    width: 100%;
  }

  .home-controls .sort-label select {
    width: 100%;
  }

  .franchise-grid {
    grid-template-columns: 1fr;
  }

  .franchise-header {
    gap: 0.55rem;
  }

  .franchise-title {
    font-size: 1.02rem;
  }

  .franchise-title-link {
    font-size: 1.02rem;
  }

  .movie-row {
    padding: 0.4rem;
  }

  .movie-row-top {
    grid-template-columns: auto 1fr;
    align-items: start;
  }

  .movie-row-right {
    grid-column: 1 / -1;
    justify-items: start;
    display: flex;
    gap: 0.45rem;
  }

  .achievement-detail-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .toast-container {
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
  }

  .franchise-page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .franchise-page-meta {
    grid-template-columns: 1fr;
  }

  .review-composer-header {
    flex-direction: column;
  }

  .review-saved-state {
    justify-items: start;
  }

  .review-composer-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .review-actions {
    width: 100%;
  }

  .review-actions .btn {
    flex: 1;
    min-height: 42px;
  }

  .social-review-header {
    align-items: flex-start;
    flex-direction: column;
  }

  #entityPageImage.franchise-page-image {
    width: min(82vw, 360px);
    margin-left: auto;
    margin-right: auto;
  }

  #entityPageImage.entity-image-director.franchise-page-image {
    width: min(58vw, 240px);
  }

  .franchise-movie-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  .layout {
    padding: 0.65rem;
  }

  .panel {
    padding: 0.75rem;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
  }

  .favorite-editor-grid {
    grid-template-columns: 1fr 1fr;
  }

  .social-profile > .stats {
    grid-template-columns: 1fr 1fr;
  }

  .stat-value {
    font-size: 1.2rem;
  }

  .franchise-meta {
    font-size: 0.84rem;
  }

  .movie-title {
    font-size: 0.86rem;
  }

  .movie-year {
    font-size: 0.78rem;
  }

  .franchise-actions {
    min-width: 98px;
  }

  .franchise-review-details > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .review-summary-hint {
    max-width: calc(100vw - 90px);
  }

  .review-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
}
.admin-user-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.admin-user-toolbar label:first-child { flex: 1 1 260px; }
.admin-user-toolbar label, .admin-user-form label { display: grid; gap: 7px; color: var(--muted); font-size: .9rem; }
.admin-user-toolbar input, .admin-user-toolbar select,
.admin-user-form input, .admin-user-form select, .admin-user-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 9px;
  background: #0c131b;
  color: var(--text);
  font: inherit;
}
.admin-user-form textarea { resize: vertical; }
.admin-user-toolbar :focus-visible, .admin-user-dialog :focus-visible { outline: 2px solid #f5b658; outline-offset: 3px; }
#adminUsersTable td small { display: block; color: var(--muted); margin-top: 5px; overflow-wrap: anywhere; }
.admin-user-status { display: inline-block; padding: 4px 9px; border-radius: 20px; color: #b4d7c6; background: #24423655; font-size: .8rem; }
.admin-user-status.is-banned { color: #ffb6ae; background: #73332955; }
.admin-user-pagination { display: flex; gap: 18px; align-items: center; justify-content: end; margin: 16px 0; }
.admin-setup-note { padding: 14px 16px; border-left: 3px solid #efad56; border-radius: 6px; background: #48372555; color: #edcfaa; font-size: .9rem; line-height: 1.6; }
.admin-user-dialog { box-sizing: border-box; width: min(600px, calc(100% - 24px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 26px; border: 1px solid var(--panel-border); border-radius: 16px; color: var(--text); background: #111923; box-shadow: 0 24px 90px #0009; }
.admin-user-dialog::backdrop { background: #04080dc9; }
.admin-user-dialog .section-heading { align-items: start; }
.admin-user-eyebrow { margin: 0 0 6px; color: #efad56; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; }
#adminUserIdentity { overflow-wrap: anywhere; font-size: .85rem; }
.admin-user-form fieldset { display: grid; gap: 16px; border: 0; padding: 0; margin: 24px 0 0; min-width: 0; }
.admin-user-form legend { padding: 0; margin-bottom: 14px; font-weight: 700; }
.admin-user-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-user-form-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.admin-ban-form { margin-top: 28px; border-top: 1px solid var(--panel-border); }
.admin-ban-form p { margin: 0; line-height: 1.5; }
.admin-danger-action { color: #ffb6ae; border-color: #88483f; justify-self: start; }
.admin-user-dialog fieldset:disabled { opacity: .55; }
.admin-user-dialog button:disabled, .admin-user-pagination button:disabled { cursor: not-allowed; opacity: .5; }
@media (max-width: 560px) {
  .admin-user-dialog { padding: 20px; }
  .admin-user-fields { grid-template-columns: 1fr; }
  .admin-user-toolbar label { flex: 1 1 100%; }
  .admin-user-pagination { justify-content: space-between; gap: 8px; }
}
#socialPanel, #activityPanel {
  padding: clamp(20px, 3vw, 36px);
  background: radial-gradient(ellipse at 0 0, #e24f3d0d, transparent 55%), #101720;
}
.community-header { padding-bottom: 26px; border-bottom: 1px solid var(--panel-border); }
.community-eyebrow { margin: 0 0 12px; color: var(--accent-alt); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.community-header h2 { margin: 0 0 10px; font-size: clamp(1.65rem, 3vw, 2.2rem); letter-spacing: -.035em; line-height: 1.15; }
.community-header .hint { margin: 0; line-height: 1.6; }
.community-layout { display: grid; grid-template-columns: minmax(0, 1fr) 245px; gap: 30px; align-items: start; padding-top: 26px; }
#activityPanel .community-header { max-width: 850px; margin-inline: auto; }
.activity-page-body { max-width: 850px; margin: 26px auto 0; }
.notification-bell { position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 8px; flex-shrink: 0; border: 1px solid var(--panel-border); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.notification-bell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.notification-bell:hover { color: var(--accent-alt); border-color: var(--accent-alt); }
.notification-count { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; display: grid; place-items: center; padding-inline: 3px; border: 2px solid #101720; border-radius: 20px; background: var(--accent-alt); color: #101720; font-size: .65rem; font-weight: 700; }
.new-chapter-banner { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 16px 18px; margin: 0 0 20px; border: 1px solid #dbaa5155; border-radius: 10px; color: var(--text); background: linear-gradient(110deg, #ad6b2320, #18212b); text-align: left; font: inherit; cursor: pointer; }
.new-chapter-banner > span:first-child { display: grid; gap: 5px; }
#newChapterBannerNote { color: var(--muted); font-size: .8rem; }
.new-chapter-banner-action { color: var(--accent-alt); white-space: nowrap; font-size: .8rem; }
.card-release-notice { display: block; margin: 0 14px 12px; padding: 6px 9px; border: 1px solid #dbaa513a; border-radius: 5px; background: #dbaa5114; color: var(--accent-alt); font: inherit; font-size: .75rem; text-align: left; cursor: pointer; }
.notifications-dialog { box-sizing: border-box; width: min(590px, calc(100% - 24px)); max-height: calc(100dvh - 40px); padding: 24px; border: 1px solid #3d4b5d; border-radius: 16px; background: radial-gradient(ellipse at top right, #c8772320, transparent 65%), #101923; color: var(--text); overflow-y: auto; box-shadow: 0 30px 100px #0009; }
.notifications-dialog::backdrop { background: #03070dc9; backdrop-filter: blur(4px); }
.notification-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.notifications-list { display: grid; gap: 10px; }
.release-notification { overflow: hidden; border: 1px solid var(--panel-border); border-radius: 9px; background: #0c141e; }
.release-notification.is-unread { border-color: #dbaa5150; background: #dbaa5109; }
.release-notification-open { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 16px; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.release-notification-open img { width: 55px; aspect-ratio: 2 / 3; object-fit: cover; flex-shrink: 0; border: 1px solid var(--panel-border); border-radius: 5px; }
.release-notification-open > span { display: grid; gap: 8px; min-width: 0; }
.release-notification-open .review-eyebrow { margin: 0; font-size: .65rem; }
.release-notification-open strong { line-height: 1.4; }
.release-notification-copy { color: var(--muted); font-size: .85rem; line-height: 1.6; overflow-wrap: anywhere; }
.release-notification-open time { color: #8192a7; font-size: .7rem; }
.release-notification-actions { display: flex; justify-content: flex-end; gap: 7px; padding: 0 12px 12px; }
.notification-empty { padding: 22px; border: 1px dashed var(--panel-border); border-radius: 9px; }
.notification-empty p { color: var(--muted); line-height: 1.6; font-size: .85rem; }
@media (max-width: 600px) { .new-chapter-banner { align-items: flex-start; flex-direction: column; } .notifications-dialog { padding: 18px; } }
#activityFeed { min-width: 0; }
#discoverPanel { padding: clamp(20px, 3vw, 36px); background: radial-gradient(ellipse at top right, #ad742618, transparent 55%), #101720; }
.discover-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--panel-border); }
.discover-header h2 { margin: 0 0 10px; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.04em; line-height: 1.1; }
.discover-header .hint { margin: 0; line-height: 1.6; }
.discover-presets { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.discover-presets button { padding: 8px 12px; border: 1px solid #3a4858; border-radius: 20px; color: var(--muted); background: #131c25; font: inherit; font-size: .75rem; white-space: nowrap; cursor: pointer; }
.discover-presets button:hover, .discover-presets button[aria-pressed="true"] { color: var(--accent-alt); border-color: #dbaa5166; background: #dbaa5110; }
.discover-filters { display: grid; grid-template-columns: minmax(190px, 1.5fr) repeat(4, minmax(110px, 1fr)) auto; gap: 12px; align-items: end; padding: 24px 0; }
.discover-filters label { display: grid; gap: 7px; min-width: 0; color: var(--muted); font-size: .75rem; }
.discover-filters input, .discover-filters select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 42px; padding: 10px; font-size: .85rem; }
#discoverPanel select {
  appearance: none;
  color-scheme: dark;
  background-color: #0a1017;
  color: var(--text);
  border: 1px solid #2a3a50;
  border-radius: 8px;
  min-height: 42px;
  padding: 10px 34px 10px 12px;
  font: inherit;
  font-size: .85rem;
  line-height: 1.3;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #9fb2c8 50%),
    linear-gradient(135deg, #9fb2c8 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
#discoverPanel select:hover { background-color: #111923; border-color: #465569; }
#discoverPanel select:focus-visible { border-color: var(--accent-alt); }
#discoverPanel select option { background-color: #111923; color: var(--text); }
@media (forced-colors: active) { #discoverPanel select { appearance: auto; background-image: none; } }
.discover-filters .btn { min-height: 42px; border-radius: 7px; font-size: .8rem; padding-inline: 13px; }
.discover-results-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 8px 0 16px; }
.discover-results-heading h3 { margin: 0 0 7px; font-size: 1.1rem; }
.discover-results-heading .hint { margin: 0; font-size: .8rem; }
.discover-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.discover-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--panel-border); border-radius: 10px; background: #0c141e; }
.discover-art { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; border: 0; padding: 0; background: radial-gradient(ellipse at top left, #36566b, #152030 65%); cursor: pointer; }
.discover-art img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.discover-art-fallback { display: grid; place-items: center; height: 100%; box-sizing: border-box; padding: 22px; color: #bacbdd; font-family: "Bebas Neue", sans-serif; font-size: 2rem; text-align: center; }
.discover-card-body { display: flex; flex: 1; flex-direction: column; padding: 15px; }
.discover-card-body h3 { margin: 0 0 8px; font-size: .95rem; line-height: 1.4; }
.discover-card-body .franchise-title-link { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: inherit; }
.discover-card-meta, .discover-card-genres { color: var(--muted); font-size: .75rem; line-height: 1.5; margin: 0 0 8px; }
.discover-card-genres { font-size: .7rem; color: #8298ad; }
.discover-duration { align-self: flex-start; padding: 5px 8px; margin: 3px 0 8px; border: 1px solid #dbaa5136; border-radius: 5px; background: #dbaa510a; color: var(--accent-alt); font-size: .75rem; }
.discover-upcoming { color: #8298ad; font-size: .7rem; margin-bottom: 9px; }
.discover-card-action { margin-top: auto; padding-top: 8px; }
.discover-tracked { display: block; padding: 8px; border: 1px solid var(--panel-border); border-radius: 7px; color: var(--muted); text-align: center; font-size: .75rem; }
.discover-empty { grid-column: 1 / -1; padding: 35px; border: 1px dashed var(--panel-border); border-radius: 10px; text-align: center; }
.discover-empty p { color: var(--muted); line-height: 1.6; }
.discover-pagination { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.discover-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--panel-border); }
.discover-footer p { margin: 0 0 8px; color: #8298ad; font-size: .75rem; line-height: 1.7; max-width: 650px; }
.discover-footer .btn { flex-shrink: 0; font-size: .8rem; }
#discoverPanel :focus-visible { outline: 2px solid var(--accent-alt); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .discover-art img { transition: transform 250ms ease; } .discover-art:hover img { transform: scale(1.035); } }
@media (max-width: 1050px) { .discover-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .discover-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } .discover-query { grid-column: span 2; } .discover-header { flex-direction: column; align-items: flex-start; } .discover-presets { justify-content: flex-start; } }
@media (max-width: 700px) { .discover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .discover-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .discover-footer { flex-direction: column; align-items: flex-start; } .discover-card-body { padding: 11px; } }
.activity-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.activity-toolbar .community-eyebrow { margin: 0 0 6px; }
.activity-toolbar h3 { margin: 0; font-size: 1.3rem; }
.activity-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0 12px; }
.activity-filters button { padding: 7px 12px; border: 1px solid var(--panel-border); border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: .8rem; cursor: pointer; }
.activity-filters button[aria-pressed="true"] { border-color: #f4b85255; color: var(--accent-alt); background: #f4b8520d; }
.activity-list { display: grid; gap: 14px; }
.activity-card { min-width: 0; padding: 20px; border: 1px solid var(--panel-border); border-radius: 12px; background: #0c141eaa; }
.activity-card-header { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 18px; color: var(--muted); font-size: .8rem; }
.activity-actor { display: inline-flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.activity-actor strong { overflow-wrap: anywhere; }
.activity-actor:hover { color: var(--accent-alt); }
.activity-actor .community-avatar { width: 30px; height: 30px; font-size: .75rem; flex-shrink: 0; }
.activity-card-header time { margin-left: auto; font-size: .75rem; }
.activity-card-body { display: flex; align-items: flex-start; gap: 18px; }
.activity-content { min-width: 0; flex: 1; }
.activity-content h3 { margin: 0 0 9px; line-height: 1.4; }
.activity-content .profile-library-title { font-size: 1.1rem; }
.activity-poster { width: 76px; flex-shrink: 0; padding: 0; border: 1px solid var(--panel-border); border-radius: 6px; overflow: hidden; background: #132030; cursor: pointer; }
.activity-poster img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.activity-review-body { margin: 12px 0 0; white-space: pre-line; overflow-wrap: anywhere; font-size: .9rem; line-height: 1.7; color: #becbda; }
.activity-review-details summary { margin-top: 12px; color: var(--accent-alt); font-size: .8rem; cursor: pointer; }
.activity-complete-badge { display: inline-block; font-size: .75rem; padding: 5px 8px; border-radius: 5px; background: #31c48d15; color: var(--ok); }
.activity-empty { padding: clamp(26px, 5vw, 50px); border: 1px dashed #344355; border-radius: 12px; background: radial-gradient(ellipse at top left, #c6762720, transparent 65%); }
.activity-empty h3 { margin: 12px 0; font-size: clamp(1.3rem, 3vw, 1.7rem); }
.activity-empty > p:not(.community-eyebrow) { max-width: 470px; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.activity-empty .btn { margin-top: 12px; }
@media (max-width: 600px) {
  .activity-card { padding: 15px; }
  .activity-card-header time { margin-left: 0; }
  .activity-card-body { gap: 12px; }
  .activity-poster { width: 58px; }
}
.community-directory { min-width: 0; }
.community-search > label { display: block; margin-bottom: 9px; color: var(--muted); font-size: .875rem; }
.community-search-controls { display: flex; align-items: stretch; gap: 10px; }
.community-search-controls input { min-width: 0; width: 100%; flex: 1; background: #0b121b; border: 1px solid #344256; border-radius: 10px; padding: 13px 15px; color: var(--text); font: inherit; }
.community-search-controls .btn { border-radius: 10px; padding-inline: 22px; }
.community-results-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 28px 0 16px; }
.community-results-heading h3 { font-size: 1rem; margin: 0 0 5px; }
.community-results-heading .hint { font-size: .8rem; margin: 0; line-height: 1.5; }
.community-sort { display: grid; gap: 4px; flex-shrink: 0; color: var(--muted); font-size: .75rem; }
.community-sort select { font: inherit; font-size: .875rem; background: #111923; color: var(--text); border: 1px solid var(--panel-border); border-radius: 8px; padding: 8px 10px; max-width: 100%; }
.community-member-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.community-member { display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0; padding: 22px 20px 16px; border: 1px solid #2a3748; border-radius: 13px; background: linear-gradient(145deg, #1a253180, #0c141dd9); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .18s, background-color .18s; animation: community-arrive .3s both; animation-delay: var(--member-delay, 0ms); }
.community-member:hover { border-color: #8c6446; background-color: #201c19; }
.community-member-head { display: flex; align-items: center; gap: 13px; min-width: 0; }
.community-avatar { position: relative; display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; overflow: hidden; border-radius: 50%; background: linear-gradient(140deg, #f0b85b, #e24f3d); color: #151a21; font-size: 1.4rem; font-weight: 700; border: 2px solid #334050; }
.community-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.community-member-identity { display: grid; gap: 5px; min-width: 0; }
.community-member-identity strong { font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.community-member-identity > span { font-size: .875rem; color: var(--muted); overflow-wrap: anywhere; }
.community-member-bio { color: #b5c2d3; line-height: 1.55; font-size: .9rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.community-member-meta { display: flex; gap: 8px 14px; flex-wrap: wrap; color: #96a6bc; font-size: .75rem; margin-top: auto; }
.community-member-meta:empty { display: none; }
.community-member-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #293545; padding-top: 12px; color: #edbd82; font-size: .875rem; }
.community-member-footer > :last-child { font-size: 1.2rem; }
.community-own-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 20px; border: 1px solid #654c3866; border-radius: 13px; background: radial-gradient(ellipse at top right, #f0b85b10, transparent 70%), #151b23; }
.community-own-card .community-eyebrow { margin: 0; }
.community-own-card .community-avatar { width: 64px; height: 64px; flex-basis: 64px; font-size: 1.75rem; }
.community-own-card h3 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; max-width: 100%; }
.community-own-card .hint { margin: -6px 0 2px; font-size: .9rem; line-height: 1.65; }
.community-own-card > .btn { width: 100%; border-radius: 9px; }
.community-edit-profile { align-self: center; background: none; border: 0; color: var(--muted); padding: 6px 0; font: inherit; font-size: .85rem; cursor: pointer; }
.community-edit-profile:hover { color: var(--text); }
.community-mini-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; width: 100%; }
.community-mini-shelf button { position: relative; aspect-ratio: 2/3; overflow: hidden; border: 1px solid #44505f; border-radius: 4px; background: #202b38; color: var(--muted); padding: 3px; font: inherit; font-size: .7rem; overflow-wrap: anywhere; cursor: pointer; }
.community-mini-shelf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.community-empty { grid-column: 1/-1; border: 1px dashed #374558; border-radius: 12px; padding: 36px 24px; }
.community-empty h3 { margin: 0 0 8px; font-size: 1.1rem; }
.community-empty p { color: var(--muted); line-height: 1.6; margin: 0; }
.community-empty .btn { margin-top: 18px; }
#socialPanel :focus-visible, #activityPanel :focus-visible { outline: 2px solid var(--accent-alt); outline-offset: 4px; }
@keyframes community-arrive { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1050px) {
  .community-layout { grid-template-columns: minmax(0, 1fr); }
  .community-own-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px 18px; }
  .community-own-card > .community-eyebrow { grid-column: 1/-1; }
  .community-own-card > .hint { grid-column: 2/-1; }
  .community-own-card > .btn { grid-column: 1/-1; width: auto; }
  .community-mini-shelf { display: none; }
  .community-edit-profile { grid-column: 1/-1; justify-self: center; }
}
@media (max-width: 600px) {
  .community-member-grid { grid-template-columns: minmax(0, 1fr); }
  .community-results-heading { align-items: flex-start; flex-direction: column; }
  .community-sort { display: flex; align-items: center; gap: 10px; }
  .community-search-controls .btn { padding-inline: 14px; }
  .community-search-controls input { padding-inline: 10px; }
  .community-layout { gap: 20px; }
  .community-own-card { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .community-member { animation: none; transition: none; } }
#accountPanel { width: 100%; max-width: 1120px; margin-inline: auto; padding: clamp(20px, 3vw, 36px); background: radial-gradient(ellipse at 100% 0, #f0b85b08, transparent 55%), #101720; }
.account-page-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 28px; border-bottom: 1px solid var(--panel-border); }
.account-page-header h2 { margin: 0 0 8px; font-size: 2rem; letter-spacing: -.03em; }
.account-page-header .hint { margin: 0; }
.account-page-header > .btn { flex-shrink: 0; }
.account-settings-layout { display: grid; grid-template-columns: 195px minmax(0, 1fr); gap: 40px; padding-top: 30px; }
.account-settings-nav { position: sticky; top: 24px; align-self: start; display: grid; gap: 6px; }
.account-settings-nav button { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; font: inherit; font-size: .9rem; color: #c5d1e0; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 12px; cursor: pointer; }
.account-settings-nav button:hover, .account-settings-nav button:focus-visible { color: var(--text); background: #1b2633; border-color: #344256; }
.account-settings-nav button span { color: #8091a8; font-size: .75rem; }
.account-settings-nav > p { border-top: 1px solid var(--panel-border); padding: 18px 12px 0; margin-top: 18px; color: #8f9eb2; font-size: .8rem; line-height: 1.8; }
.account-settings-content { min-width: 0; }
#accountPanel .profile-form { gap: 0; }
#accountProfileFields { border: 0; margin: 0; padding: 0; min-width: 0; }
#accountPanel .account-settings-section { display: grid; gap: 20px; scroll-margin-top: 28px; padding: 0 0 30px; margin: 0 0 30px; border: 0; border-bottom: 1px solid var(--panel-border); background: none; border-radius: 0; }
.account-section-title { display: flex; align-items: flex-start; gap: 13px; }
.account-delete-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px; border: 1px solid #d5787838; border-radius: 10px; background: #d5787806; }
.account-delete-row p { max-width: 560px; margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.7; }
.btn-danger { flex-shrink: 0; border: 1px solid #d5787880; color: #ffb5b5; background: #d5787812; }
.btn-danger:hover:not(:disabled) { background: #d5787826; border-color: #e99292; }
.btn-danger:disabled { opacity: .5; cursor: not-allowed; }
.delete-account-dialog { box-sizing: border-box; width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 30px; border: 1px solid var(--panel-border); border-radius: 16px; background: #111923; color: var(--text); box-shadow: 0 24px 90px #0009; }
.delete-account-dialog::backdrop { background: #02060dcc; }
.delete-account-dialog > .review-eyebrow { color: #ffb5b5; }
.delete-account-dialog h2 { margin: 0 0 16px; font-size: 1.65rem; }
.delete-account-dialog > p:not(.review-eyebrow) { color: var(--muted); line-height: 1.7; }
.delete-account-dialog form { display: grid; gap: 12px; margin-top: 24px; }
.delete-account-dialog input { width: 100%; box-sizing: border-box; }
.delete-account-dialog #deleteAccountStatus { margin: 0; line-height: 1.6; }
.delete-account-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 12px; }
@media (max-width: 600px) {
  .account-delete-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .delete-account-dialog { padding: 24px; }
  .delete-account-actions { flex-direction: column; }
  .delete-account-actions .btn { width: 100%; }
}
.account-section-title > span { color: var(--accent-alt); font-size: .8rem; font-weight: 600; padding-top: 4px; }
.account-section-title h3 { margin: 0 0 6px; font-size: 1.15rem; line-height: 1.3; }
.account-section-title p { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.6; }
#accountPanel .favorite-editor-heading > .account-section-title { display: flex; }
#accountPanel .profile-form label { font-size: .9rem; gap: 8px; }
#accountPanel .profile-form input:not([type="checkbox"]), #accountPanel .profile-form select, #accountPanel textarea { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid #334156; border-radius: 9px; color: var(--text); background-color: #0b121b; padding: 12px 14px; font: inherit; font-size: 1rem; }
#accountPanel .field-hint { font-size: .8rem; line-height: 1.5; color: #95a7bc; }
.account-avatar-editor { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px 0 6px; }
.account-avatar-preview { position: relative; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 3px solid #344154; color: #151b23; background: linear-gradient(145deg, var(--accent-alt), var(--accent)); font-size: 2rem; font-weight: 700; }
.account-avatar-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#accountPanel #avatarInput { border: 0; background: none; padding: 0; color: var(--muted); font-size: .8rem; }
#accountPanel input[type="file"]::file-selector-button { font: inherit; font-weight: 600; border: 1px solid #465569; border-radius: 7px; padding: 9px 12px; background: #1b2735; color: var(--text); margin-right: 12px; cursor: pointer; }
#accountPanel input[type="file"]::file-selector-button:hover { border-color: var(--accent-alt); }
.account-bio-label { display: flex; justify-content: space-between; gap: 10px; }
#accountBioCount { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
#accountPanel .favorite-editor-grid { gap: 10px; }
#accountPanel .favorite-editor-slot { aspect-ratio: 2/3; min-height: 0; padding: 12px; font-size: .85rem; border-radius: 9px; }
#accountPanel .favorite-editor-slot:not(.filled) { align-content: center; text-align: center; }
#accountPanel .favorite-editor-slot strong { font-size: .85rem; line-height: 1.35; }
#accountPanel .favorite-remove-btn { font-size: .8rem; min-height: 30px; }
#accountPanel .favorite-editor-count { font-size: .8rem; padding: 5px 9px; }
#accountPanel .profile-privacy-option { display: flex; align-items: center; gap: 15px; background: #17212c; border: 1px solid #2d3b4d; padding: 16px; border-radius: 10px; }
#accountPanel .profile-privacy-option input { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--accent); }
#accountPanel .profile-privacy-option strong { display: block; margin-bottom: 5px; font-size: .95rem; font-weight: 500; }
#accountPanel .profile-privacy-option small { display: block; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.account-save-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 20px; border: 1px solid #394454; border-radius: 11px; background: #17202b; }
.account-save-bar .hint { margin: 0; font-size: .875rem; line-height: 1.5; }
.account-save-bar .btn { flex-shrink: 0; min-height: 42px; padding-inline: 24px; border-radius: 8px; }
#accountPanel .account-import-section { margin: 36px 0 0; padding-bottom: 0; border-bottom: 0; }
#accountPanel .account-delete-section { margin-top: 32px; }
.random-franchise-controls { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.card-watchlist-action { padding: 0 14px 12px; }
.watchlist-save-button { width: 100%; border-radius: 7px; font-size: .8rem; min-height: 32px; color: var(--muted); }
.watchlist-save-button.is-saved, #franchiseWatchlistBtn.is-saved { color: var(--accent-alt); border-color: #dbaa514a; background: #dbaa510c; }
.watchlist-card .franchise-header { padding-bottom: 12px; }
.collection-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#watchlistSection > .section-heading { align-items: flex-start; gap: 16px; margin-top: 28px; }
#watchlistSection .section-heading .hint { max-width: 580px; font-size: .85rem; line-height: 1.6; }
@media (max-width: 600px) {
  .random-franchise-controls { width: 100%; justify-content: flex-start; }
  .collection-toolbar-actions { gap: 6px; }
  #watchlistSection > .section-heading { flex-wrap: wrap; }
}
.account-import-disclosure { border: 1px solid var(--panel-border); border-radius: 10px; background: #0e161f; }
.account-import-disclosure > summary { padding: 18px; cursor: pointer; font-size: .95rem; font-weight: 600; }
.account-import-disclosure > summary > .data-import-badge { float: right; }
.account-import-disclosure[open] > summary { border-bottom: 1px solid var(--panel-border); }
.account-import-body { padding: 0 18px 18px; display: grid; gap: 14px; }
#accountPanel .data-import-copy { font-size: .875rem; line-height: 1.7; }
#accountPanel .data-import-picker { margin: 0; }
#accountPanel .data-import-picker-title { font-size: .9rem; }
#accountPanel .data-import-picker-hint { font-size: .8rem; }
#accountPanel :focus-visible { outline: 2px solid var(--accent-alt); outline-offset: 3px; }
#accountSaveBtn:disabled { cursor: wait; opacity: .65; }
@media (max-width: 800px) {
  .account-settings-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .account-settings-nav { position: static; display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--panel-border); padding-bottom: 14px; }
  .account-settings-nav button { padding: 10px; font-size: .875rem; }
  .account-settings-nav button span, .account-settings-nav > p { display: none; }
  .account-page-header { align-items: flex-start; }
}
@media (max-width: 500px) {
  .account-page-header { flex-direction: column; gap: 16px; }
  .account-avatar-editor { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .account-avatar-preview { width: 64px; height: 64px; }
  #accountPanel .favorite-editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-save-bar { align-items: stretch; flex-direction: column; gap: 12px; }
  #accountPanel .account-section-title { gap: 9px; }
}

/* Primary navigation: quiet tabs, with account actions grouped separately. */
.site-header { gap: 2rem; padding: .9rem max(1.2rem, calc((100vw - 1280px) / 2)); background-color: rgba(10, 14, 20, .94); }
.site-header .brand-wrap { flex-shrink: 0; }
.site-header .header-right { min-width: 0; gap: 1.5rem; }
.site-header .app-nav { align-items: center; gap: .25rem; }
.site-header .app-nav .nav-btn { position: relative; min-height: 48px; padding: .8rem .9rem; border: 0; border-radius: 7px; color: #a6b5c7; font: 500 .9375rem "IBM Plex Sans", sans-serif; white-space: nowrap; }
.site-header .app-nav .nav-btn::after { content: ""; position: absolute; bottom: 2px; left: .9rem; right: .9rem; height: 2px; border-radius: 2px; background: transparent; }
.site-header .app-nav .nav-btn:hover { color: var(--text); background: #ffffff07; }
.site-header .app-nav .nav-btn.active { color: #fff1dd; background: #f0b85b08; }
.site-header .app-nav .nav-btn.active::after { background: linear-gradient(90deg, var(--accent), var(--accent-alt)); }
.site-header .account-inner { gap: .2rem; padding-left: 1.2rem; border-left: 1px solid #2b3746; }
.site-header .header-profile-link { min-height: 44px; min-width: 0; gap: .65rem; padding: .25rem .4rem; border-radius: 8px; }
.site-header .header-profile-link:hover { background: #ffffff07; }
.site-header .header-avatar { width: 34px; height: 34px; flex-shrink: 0; }
.header-profile-name { max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c6d3e2; font-size: .875rem; font-weight: 500; }
.header-account-menu { position: relative; }
.header-account-menu > summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; color: var(--muted); }
.header-account-menu > summary::-webkit-details-marker { display: none; }
.header-account-menu > summary:hover, .header-account-menu[open] > summary { background: #ffffff09; color: var(--accent-alt); }
.header-menu-chevron { width: 7px; height: 7px; border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.header-account-menu[open] .header-menu-chevron { transform: translateY(2px) rotate(225deg); }
.header-menu-panel { position: absolute; right: 0; top: calc(100% + 12px); width: 220px; padding: .6rem; border: 1px solid #354357; border-radius: 12px; background: #131c28; box-shadow: 0 18px 42px #0008; }
.header-menu-heading { margin: .3rem .65rem .6rem; color: #8d9fb4; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.header-menu-action { display: block; width: 100%; min-height: 44px; padding: .7rem .65rem; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: 500 .9375rem "IBM Plex Sans", sans-serif; text-align: left; cursor: pointer; }
.header-menu-action:hover, .header-menu-action.active { background: #ffffff08; color: var(--accent-alt); }
.header-menu-signout { margin-top: .4rem; border-top: 1px solid #2b384a; border-radius: 0 0 6px 6px; color: #f2ada4; }
.site-header button:focus-visible, .header-account-menu > summary:focus-visible { outline: 2px solid var(--accent-alt); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .site-header .nav-btn, .site-header .header-profile-link, .header-menu-action, .header-account-menu > summary { transition: color 150ms ease, background-color 150ms ease; }
  .header-menu-chevron { transition: transform 150ms ease; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .site-header { gap: 1rem; }
  .site-header .header-right { gap: .7rem; }
  .site-header .app-nav .nav-btn { padding-inline: .65rem; }
  .header-profile-name { max-width: 110px; }
  .site-header .account-inner { padding-left: .6rem; }
}
@media (max-width: 900px) {
  .site-header { padding: .85rem 1rem; gap: .6rem; }
  .site-header.member-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .site-header.member-header .brand-wrap { grid-column: 1; grid-row: 1; }
  .site-header.member-header .header-right { display: contents; }
  .site-header.member-header .account { width: auto; grid-column: 2; grid-row: 1; }
  .site-header .account-inner { width: auto; padding: 0; border: 0; justify-content: flex-end; }
  .site-header.member-header .app-nav { grid-column: 1 / -1; grid-row: 2; display: flex; width: 100%; gap: .15rem; overflow-x: auto; scrollbar-width: thin; border-top: 1px solid #273140; padding-top: .35rem; }
  .site-header .app-nav .nav-btn { flex: 1; width: auto; min-height: 44px; padding: .65rem .7rem; }
  .header-profile-name { max-width: 130px; }
}
@media (max-width: 420px) {
  .site-header .header-profile-name { display: none; }
  .site-header .app-nav .nav-btn { font-size: .875rem; padding-inline: .55rem; }
}

/* Library working surface. Scoped so profile and franchise pages stay unchanged. */
#dashboardPanel { padding: 1.2rem 0 2rem; border: 0; border-radius: 0; background: none; box-shadow: none; }
.library-header { margin-bottom: 1.7rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.library-eyebrow { margin: 0 0 .6rem; color: var(--accent-alt); font-size: .75rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.library-header h2 { margin: 0; font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing: -.045em; line-height: 1.2; }
.library-intro > p:last-child { margin: .55rem 0 0; font-size: 1rem; color: var(--muted); }
#dashboardPanel .library-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0 0 2rem; }
.library-stat { display: flex; flex-direction: column; padding: 1.25rem 1.4rem; background: linear-gradient(125deg, #18212cf0, #0e151ff5); border-color: #324052; border-radius: 12px; }
.library-stat:first-child { background: linear-gradient(130deg, #292127e8, #141b25f5 75%); border-color: #554048; }
.library-stat .stat-label { order: 0; color: #bdc9d8; font-size: .875rem; font-weight: 500; }
.library-stat .stat-value { margin-top: .55rem; font-size: clamp(2rem, 4vw, 2.75rem); letter-spacing: -.04em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.library-stat-hint { margin: .35rem 0 1.2rem; font-size: .875rem; color: #95a8bc; }
.library-stat-track { height: 4px; border-radius: 4px; background: #293644; overflow: hidden; margin-top: auto; }
.library-stat-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-alt)); border-radius: inherit; }
.library-stat:nth-child(2) .library-stat-track span { background: #5bc9a0; }
.library-stat-footer { display: flex; flex-wrap: wrap; gap: .4rem; margin: .65rem 0 0; color: #a4b5c8; font-size: .875rem; line-height: 1.4; }
.library-stat-footer strong { color: #e5ebf3; font-weight: 600; }
.library-stat:last-child .library-stat-footer { margin-top: auto; padding-top: .8rem; border-top: 1px solid #2b3847; }
.library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.15rem 0; border-top: 1px solid #344151; border-bottom: 1px solid #344151; }
#dashboardPanel .dashboard-subnav { margin: 0; gap: .25rem; padding: .25rem; border: 1px solid #303d4f; border-radius: 10px; background: #0c131d; }
#dashboardPanel .dashboard-subnav .btn { min-height: 40px; padding: .6rem 1.4rem; border: 0; border-radius: 7px; color: #96a9bf; font: 500 .9375rem "IBM Plex Sans", sans-serif; }
#dashboardPanel .dashboard-subnav .btn.active { background: #293442; color: #fff0dc; box-shadow: 0 2px 5px #0003; }
#dashboardPanel .dashboard-subnav .btn:hover { color: #fff0dc; }
#dashboardPanel .toolbar-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; flex: 0 1 490px; margin: 0; }
#dashboardPanel .toolbar input { width: 100%; min-width: 0; min-height: 46px; font-size: 1rem; border-color: #364356; background: #0c141ed9; }
#dashboardPanel .toolbar .btn { min-height: 46px; padding: .6rem 1.1rem; border-radius: 8px; font: 600 .9375rem "IBM Plex Sans", sans-serif; }
#dashboardPanel .library-status { margin: .8rem 0; font-size: .875rem; line-height: 1.5; }
.library-status:empty { display: none; }
#dashboardPanel .section-heading { margin: 1.3rem 0 1rem; align-items: flex-end; gap: 1rem; }
#dashboardPanel .section-title { margin: 0; font-size: 1.125rem; font-weight: 600; }
.library-count { display: inline-block; margin-left: .4rem; color: #9baec4; font-size: .875rem; font-weight: 400; font-variant-numeric: tabular-nums; }
#dashboardPanel .home-controls { display: flex; gap: .7rem; flex-wrap: wrap; }
#dashboardPanel .sort-label { display: grid; gap: .35rem; font-size: .8125rem; }
#dashboardPanel .sort-label select { min-height: 40px; font: 400 .875rem "IBM Plex Sans", sans-serif; border-color: #334155; padding: .5rem .7rem; background-color: #111923; }
#dashboardPanel .library-search-heading { margin: 1.4rem 0 1rem; }
#dashboardPanel .franchise-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 1.3rem; }
#dashboardPanel .franchise-card { min-width: 0; border: 1px solid #304054; border-radius: 12px; background: #111923f5; box-shadow: 0 6px 18px #0002; }
.franchise-artwork-button { position: relative; display: block; width: 100%; padding: 0; border: 0; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(ellipse at top right, #3b3040, transparent 80%), #1b293a; cursor: pointer; }
#dashboardPanel .franchise-image { display: block; width: 100%; height: 100%; border: 0; }
.franchise-open-arrow { display: grid; place-items: center; position: absolute; bottom: .7rem; right: .7rem; width: 30px; height: 30px; border: 1px solid #ffffff45; border-radius: 50%; background: #0d1526b5; color: #fff; font-size: 1.2rem; }
.franchise-artwork-fallback { display: none; font: 400 2.5rem "Bebas Neue", sans-serif; color: #899aaf; letter-spacing: .07em; }
.no-image .franchise-artwork-fallback { display: block; }
#dashboardPanel .franchise-header { display: block; padding: 1.1rem 1.1rem .8rem; }
#dashboardPanel .franchise-title { margin: 0; line-height: 1.4; }
#dashboardPanel .franchise-title-link { font: 600 1.0625rem/1.4 "IBM Plex Sans", sans-serif; overflow-wrap: anywhere; }
#dashboardPanel .franchise-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .875rem; margin-top: .45rem; }
#dashboardPanel .franchise-meta span + span { padding-left: .6rem; border-left: 1px solid #3c4a5c; }
.card-progress { padding: .1rem 1.1rem 1.1rem; }
.welcome-actions .welcome-browse {
  flex-basis: 100%;
  width: fit-content;
  padding: .4rem 0;
  border: 0;
  background: none;
  color: #b9c9da;
  font: inherit;
  font-size: .95rem;
  text-align: left;
  cursor: pointer;
}
.welcome-browse:hover, .welcome-browse:focus-visible { color: #f0b85b; }
.welcome-browse span { display: inline-block; margin-left: .5rem; transition: transform .2s ease; }
.welcome-browse:hover span { transform: translateX(4px); }
.guest-account { display: flex; align-items: center; gap: .5rem; }
.guest-account .btn { padding: .6rem .95rem; font-size: .875rem; white-space: nowrap; }
.guest-track-prompt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  background: linear-gradient(110deg, rgba(232, 117, 81, .07), rgba(15, 24, 33, .75));
}
.guest-track-prompt h3 { margin: 0 0 .35rem; }
.guest-track-prompt p { margin: 0; color: var(--muted); font-size: .9rem; }
.guest-track-prompt .btn { flex-shrink: 0; }
.collection-sidebar .guest-track-prompt { flex-direction: column; align-items: flex-start; gap: 1rem; }
.guest-movie-row { grid-template-columns: 1fr auto; }
@media (max-width: 600px) {
  .guest-track-prompt { align-items: flex-start; flex-direction: column; padding: 1.1rem; gap: 1rem; }
  .guest-account .btn { padding: .5rem .7rem; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-browse span { transition: none; }
}
.card-progress-labels { display: flex; align-items: center; justify-content: space-between; gap: .6rem; color: #a4b7cc; font-size: .8125rem; }
#dashboardPanel .completion-pill { border: none; padding: 0; color: #e8c185; font-size: .8125rem; font-weight: 600; }
.card-progress-track { margin-top: .6rem; height: 3px; border-radius: 4px; overflow: hidden; background: #2a3748; }
.card-progress-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e87551, #f0b85b); }
.is-complete .card-progress-fill { background: #59bc98; }
#dashboardPanel .is-complete .completion-pill { color: #72d2ac; }
#dashboardPanel .movie-details { border-top: 1px solid #2b3849; padding: 0 1.1rem; }
#dashboardPanel .movie-details > summary { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 48px; list-style: none; font-size: .875rem; font-weight: 500; }
#dashboardPanel .movie-details > summary::-webkit-details-marker { display: none; }
.movies-count { color: #8fA3bb; margin-left: .4rem; font-weight: 400; }
.card-details-chevron { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-right: 2px; }
.movie-details[open] .card-details-chevron { transform: rotate(225deg); }
#dashboardPanel .movie-details[open] { padding-bottom: 1rem; }
#dashboardPanel .details-actions { margin-top: 0; }
#dashboardPanel .movie-row { padding: .6rem; border-color: #29384c; }
#dashboardPanel .watched-toggle { width: 18px; height: 18px; accent-color: var(--ok); }
#dashboardPanel button:focus-visible, #dashboardPanel summary:focus-visible, #dashboardPanel select:focus-visible { outline: 2px solid var(--accent-alt); outline-offset: 3px; }
#dashboardPanel .franchise-artwork-button:focus-visible { outline-offset: -4px; }
.library-empty { grid-column: 1 / -1; padding: 3rem 1.5rem; margin: 0; text-align: center; line-height: 1.7; border: 1px dashed #425165; border-radius: 12px; background: #101823c9; }
@media (hover: hover) and (pointer: fine) {
  #dashboardPanel .franchise-card:hover { border-color: #61738c; }
  .franchise-artwork-button:hover .franchise-open-arrow { background: #e7b66b; color: #121820; }
}
@media (prefers-reduced-motion: no-preference) {
  #dashboardPanel .franchise-card { transition: border-color 180ms ease; }
  .franchise-open-arrow { transition: background-color 180ms ease, color 180ms ease; }
  .card-details-chevron { transition: transform 180ms ease; }
}
@media (max-width: 900px) {
  #dashboardPanel .franchise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-stat { padding: 1.1rem; }
  #dashboardPanel .section-heading { align-items: flex-start; flex-direction: column; }
  #dashboardPanel .home-controls { width: 100%; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
  #dashboardPanel .sort-label select { width: 100%; min-width: 0; }
}
@media (max-width: 600px) {
  #dashboardPanel { padding-top: .6rem; }
  .library-header { margin-bottom: 1.2rem; }
  #dashboardPanel .library-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1.3rem; }
  .library-stat { padding: .95rem; }
  .library-stat:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; }
  .library-stat:last-child .stat-value { grid-column: 1; grid-row: 1 / 3; margin: 0; }
  .library-stat:last-child .stat-label { grid-column: 2; }
  .library-stat:last-child .library-stat-hint { display: none; }
  .library-stat:last-child .library-stat-footer { grid-column: 2; border: 0; padding: 0; margin: .25rem 0 0; }
  .library-stat-footer { font-size: .8125rem; }
  .library-toolbar { flex-direction: column; align-items: stretch; gap: .8rem; padding: .9rem 0; }
  #dashboardPanel .dashboard-subnav .btn { flex: 1; }
  #dashboardPanel .toolbar-grid { flex-basis: auto; }
  #dashboardPanel .franchise-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  #dashboardPanel .home-controls { gap: .45rem; }
  #dashboardPanel .sort-label select { font-size: 1rem; padding-inline: .4rem; }
}

/* Collection detail: artwork stays atmospheric; progress and films stay usable. */
#franchisePanel {
  padding: 0;
  overflow: hidden;
  background: #101720;
}
#franchisePanel .collection-hero {
  position: relative;
  isolation: isolate;
  padding: 1.5rem 2rem 2rem;
  background: radial-gradient(ellipse at top right, #343340, #101720 75%);
}
#franchisePanel .franchise-page-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-position: center 35%;
}
#franchisePanel .collection-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 16, 24, .91), rgba(10, 16, 24, .38)),
    linear-gradient(0deg, #101720, rgba(16, 23, 32, .08) 90%);
}
#franchiseBackBtn { min-height: 40px; background: rgba(10, 16, 24, .7); }
#franchisePanel .collection-identity { display: flex; align-items: flex-end; gap: 1.75rem; margin-top: 2rem; min-height: 175px; }
#franchisePanel .collection-identity > div { min-width: 0; padding-bottom: .5rem; }
#franchisePanel .collection-poster { width: 120px; aspect-ratio: 2 / 3; object-fit: cover; flex-shrink: 0; border: 1px solid #ffffff30; border-radius: 8px; box-shadow: 0 12px 30px #0007; }
#franchisePageTitle { margin: .4rem 0 .85rem; font-size: clamp(1.8rem, 3.3vw, 3rem); line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; overflow-wrap: anywhere; max-width: 23ch; }
#franchisePanel .collection-subtitle { color: #c0cddd; margin: 0; font-size: .9375rem; }
#franchisePanel .review-eyebrow { font-size: .75rem; }
#franchisePanel .collection-content { padding: 0 2rem 2rem; }
#franchisePanel .franchise-page-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 1.5rem 0; border-block: 1px solid var(--panel-border); }
#franchisePanel .franchise-page-meta .franchise-page-card { min-width: 0; padding: 0 1.25rem; border: 0; border-radius: 0; background: none; box-shadow: none; }
#franchisePanel .franchise-page-meta .franchise-page-card:first-child { padding-left: 0; }
#franchisePanel .franchise-page-meta .franchise-page-card + .franchise-page-card { border-left: 1px solid var(--panel-border); }
#franchisePanel .franchise-page-kpi-value { font-size: clamp(1.35rem, 2.5vw, 2rem); line-height: 1.2; font-variant-numeric: tabular-nums; }
#franchisePanel .franchise-page-kpi-label { font-size: .8125rem; font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: .35rem; }
#franchisePanel progress { display: block; width: 100%; max-width: 160px; height: 4px; margin-top: .65rem; border: 0; border-radius: 5px; overflow: hidden; background: #293340; accent-color: var(--accent-alt); }
#franchisePanel progress::-webkit-progress-bar { background: #293340; }
#franchisePanel progress::-webkit-progress-value { background: linear-gradient(90deg, var(--accent), var(--accent-alt)); }
#franchisePanel progress::-moz-progress-bar { background: var(--accent-alt); }
#franchisePageHint { margin: .65rem 0; min-height: 1.3em; font-size: .875rem; }
#franchisePanel .collection-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .62fr); gap: 2rem; align-items: start; }
#franchisePanel .collection-filmography, #franchisePanel .collection-sidebar { min-width: 0; }
#franchisePanel .franchise-films-heading { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin: 0; padding-bottom: 1rem; border: 0; }
#franchisePanel .section-title { font-size: 1.25rem; margin: .3rem 0 0; }
#franchisePanel .collection-order { color: var(--muted); font-size: .8125rem; padding-bottom: .2rem; }
#franchisePanel .franchise-movie-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-top: 0; }
#franchisePanel .franchise-movie-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 1rem; padding: .85rem; background: #0c131c; border: 1px solid #263342; border-radius: 10px; align-items: start; transition: border-color 160ms ease, background 160ms ease; }
#franchisePanel .franchise-movie-card:hover { border-color: #475362; background: #101a25; }
#franchisePanel .collection-film-art { position: relative; aspect-ratio: 2 / 3; background: linear-gradient(135deg, #263442, #141e2a); border-radius: 5px; overflow: hidden; }
#franchisePanel .franchise-movie-poster { height: 100%; display: block; }
#franchisePanel .collection-film-number { position: absolute; bottom: 5px; left: 5px; padding: .12rem .35rem; border-radius: 4px; background: #0a111cdd; color: #d3dfed; font-size: .75rem; font-variant-numeric: tabular-nums; }
#franchisePanel .franchise-movie-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: .1rem 0; }
#franchisePanel .franchise-movie-name { font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
#franchisePanel .franchise-movie-meta { font-size: .8125rem; line-height: 1.5; }
#franchisePanel .collection-film-credits { color: var(--muted); font-size: .8125rem; line-height: 1.5; }
#franchisePanel .collection-film-credits summary { cursor: pointer; }
#franchisePanel .collection-film-credits p { margin: .35rem 0 0; }
#franchisePanel .franchise-movie-actions { margin-top: .3rem; }
#franchisePanel .franchise-movie-watch { position: relative; font-size: .875rem; cursor: pointer; }
#franchisePanel .franchise-movie-watch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#franchisePanel .franchise-movie-watch span { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; border: 1px solid #405063; border-radius: 7px; padding: .4rem .7rem; color: #dce5ef; transition: border-color 160ms ease, background 160ms ease; }
#franchisePanel .franchise-movie-watch span::before { content: ""; width: 14px; height: 14px; border: 1px solid #7c8fa4; border-radius: 50%; }
#franchisePanel .franchise-movie-watch input:checked + span { color: #f1c97e; background: #efb6570c; border-color: #a0783b80; }
#franchisePanel .franchise-movie-watch input:checked + span::before { width: 11px; height: 6px; border: 0; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 0; transform: rotate(-45deg); margin: 0 2px 4px 1px; }
#franchisePanel .franchise-movie-watch input:focus-visible + span { outline: 2px solid var(--accent-alt); outline-offset: 4px; }
#franchisePanel .franchise-movie-watch input:not(:disabled) + span:hover { border-color: var(--accent-alt); background: #efb65712; }
#franchisePanel .franchise-movie-watch input:disabled + span { cursor: default; color: var(--muted); border-style: dashed; }
#franchisePanel .franchise-movie-watch input:disabled:not(:checked) + span::before { display: none; }
#franchisePanel .collection-sidebar { display: grid; gap: 1.75rem; }
#franchisePanel .review-composer-page { margin: 0; padding: 1.25rem; box-shadow: none; border-color: #384453; background: linear-gradient(155deg, #21242b, #101923 65%); }
#franchisePanel .review-composer-header { flex-direction: column; gap: .6rem; }
#franchisePanel .review-composer-title { font-size: 1.125rem; }
#franchisePanel .review-composer-intro { font-size: .875rem; line-height: 1.5; }
#franchisePanel .review-saved-state { display: none; }
#franchisePanel .review-field-label, #franchisePanel .review-rating-feedback, #franchisePanel .review-text-button { font-size: .8125rem; }
#franchisePanel .franchise-review-input { min-height: 120px; font-size: 1rem; }
#franchisePanel .review-composer-footer { flex-direction: column; align-items: stretch; gap: .6rem; }
#franchisePanel .review-actions { flex-wrap: wrap; }
#franchisePanel .review-actions .btn { flex: 1; min-height: 42px; font-size: .875rem; }
#franchisePanel .collection-credits { padding: 0 .25rem; }
#franchisePanel #franchisePageCredits .franchise-page-card { border: 0; border-top: 1px solid var(--panel-border); border-radius: 0; padding: 1rem 0; margin-top: .75rem; box-shadow: none; background: none; }
#franchisePanel .franchise-page-card-label { font-size: .8125rem; color: var(--muted); text-transform: none; letter-spacing: 0; }
#franchisePanel .franchise-page-pill-list { gap: .45rem; }
#franchisePanel .franchise-page-pill { font-size: .8125rem; padding: .55rem .7rem; border-color: #344356; background: #0b131c; }
#franchisePanel .franchise-page-pill-btn:hover { color: var(--accent-alt); border-color: #b88b49; }
@media (max-width: 850px) {
  #franchisePanel .collection-layout { grid-template-columns: minmax(0, 1fr); }
  #franchisePanel .collection-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  #franchisePanel .collection-content { padding: 0 1.25rem 1.25rem; }
  #franchisePanel .collection-hero { padding: 1.25rem; }
}
@media (max-width: 560px) {
  #franchisePanel .collection-identity { gap: 1rem; min-height: 135px; margin-top: 1.5rem; align-items: center; }
  #franchisePanel .collection-poster { width: 80px; }
  #franchisePageTitle { font-size: 1.65rem; }
  #franchisePanel .collection-subtitle { font-size: .8125rem; }
  #franchisePanel .franchise-page-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0; }
  #franchisePanel .franchise-page-meta .franchise-page-card { padding: 0 .75rem; }
  #franchisePanel .franchise-page-meta .franchise-page-card:nth-child(odd) { border: 0; padding-left: 0; }
  #franchisePanel .collection-sidebar { grid-template-columns: minmax(0, 1fr); }
  #franchisePanel .franchise-movie-card { grid-template-columns: 64px minmax(0, 1fr); padding: .7rem; gap: .75rem; }
  #franchisePanel .collection-content { padding: 0 1rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  #franchisePanel .franchise-movie-card, #franchisePanel .franchise-movie-watch span { transition: none; }
}

/* Shared filmography surface, with separate treatments for portraits and logos. */
#entityPanel { padding: 0; overflow: hidden; background: #101720; }
#entityPanel .entity-header { padding: 1.5rem 2rem 2rem; background: radial-gradient(ellipse at top right, #e24f3d12, transparent 65%), linear-gradient(125deg, #16212d, #101720); }
#entityBackBtn { min-height: 40px; background: #0b121b80; }
#entityPanel .entity-identity { display: flex; align-items: center; gap: 2rem; margin-top: 1.75rem; }
#entityPanel .entity-artwork { position: relative; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid #384758; border-radius: 10px; background: linear-gradient(145deg, #263747, #131e2a); box-shadow: 0 12px 28px #0003; }
#entityPanel .entity-artwork-director { width: 132px; aspect-ratio: 3 / 4; }
#entityPanel .entity-artwork-studio { width: 190px; aspect-ratio: 3 / 2; background: #f0f2f4; border-color: #ffffff25; }
#entityPanel #entityPageImage { display: block; position: absolute; inset: 0; margin: 0; border: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
#entityPanel .entity-artwork-studio #entityPageImage { object-fit: contain; padding: 1rem; }
#entityPanel .entity-image-fallback { font-size: 2.5rem; font-weight: 700; color: #9eb0c3; letter-spacing: -.06em; }
#entityPanel .entity-artwork-studio .entity-image-fallback { color: #445262; }
#entityPanel .entity-intro { min-width: 0; max-width: 680px; }
#entityPageTitle { margin: .5rem 0 .85rem; font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; overflow-wrap: anywhere; }
#entityPageDescription { margin: 0; font-size: 1rem; line-height: 1.6; max-width: 46ch; }
#entityPanel .review-eyebrow { font-size: .75rem; }
#entityPanel .entity-content { padding: 0 2rem 2rem; }
#entityPanel .entity-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 1.5rem 0; border-block: 1px solid var(--panel-border); }
#entityPanel .entity-stats .franchise-page-card { padding: 0 1.5rem; min-width: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
#entityPanel .entity-stats .franchise-page-card:first-child { padding-left: 0; }
#entityPanel .entity-stats .franchise-page-card + .franchise-page-card { border-left: 1px solid var(--panel-border); }
#entityPanel .franchise-page-kpi-value { font-size: clamp(1.5rem, 2.5vw, 2rem); font-variant-numeric: tabular-nums; }
#entityPanel .franchise-page-kpi-label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .8125rem; margin-top: .45rem; line-height: 1.5; }
#entityPanel .entity-list-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
#entityPanel .section-title { font-size: 1.35rem; margin: .3rem 0 0; }
#entityPanel .entity-result-count { color: var(--muted); font-size: .875rem; white-space: nowrap; }
#entityPageHint { font-size: .875rem; line-height: 1.6; margin: .65rem 0 1.25rem; max-width: 80ch; }
#entityPanel .entity-franchise-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
#entityPanel .entity-franchise-grid[aria-busy="true"] { min-height: 150px; border-top: 1px solid var(--panel-border); }
#entityPanel .entity-franchise-row { padding: 1.25rem; border: 1px solid #2c3b4d; border-radius: 11px; }
#entityPanel .entity-row-main { align-items: flex-start; gap: 1rem; }
#entityPanel .franchise-inline-link { font: inherit; font-size: 1.0625rem; line-height: 1.4; font-weight: 650; min-height: 40px; overflow-wrap: anywhere; }
#entityPanel .franchise-inline-link:hover { color: #f0ca89; }
#entityPanel .entity-watch-pill { flex-shrink: 0; font-size: .8125rem; padding: .35rem .6rem; margin-top: .1rem; font-variant-numeric: tabular-nums; background: #0c141ecc; }
#entityPanel .entity-watch-pill.complete { border-color: #ab854a80; color: #f1c97e; background: #2b251dcc; }
#entityPanel .entity-row-meta { color: var(--muted); font-size: .8125rem; line-height: 1.5; margin: .5rem 0 .9rem; }
#entityPanel progress { display: block; width: 100%; height: 3px; border: 0; border-radius: 4px; overflow: hidden; background: #273343; accent-color: var(--accent-alt); }
#entityPanel progress::-webkit-progress-bar { background: #273343; }
#entityPanel progress::-webkit-progress-value { background: linear-gradient(90deg, var(--accent), var(--accent-alt)); }
#entityPanel progress::-moz-progress-bar { background: var(--accent-alt); }
#entityPanel .entity-movies-details { margin-top: .65rem; }
#entityPanel .entity-movies-details > summary { padding: .6rem 0 .15rem; min-height: 40px; font-size: .875rem; color: #c8d5e4; }
#entityPanel .entity-movies-details[open] > summary { color: #f1c97e; padding-bottom: .8rem; }
#entityPanel .entity-movies-list { gap: 0; border-top: 1px solid #ffffff14; }
#entityPanel .entity-movie-item { padding: .85rem 0; border: 0; border-bottom: 1px solid #ffffff14; gap: .65rem; background: none; }
#entityPanel .entity-movie-item:last-child { border-bottom: 0; padding-bottom: .15rem; }
#entityPanel .entity-movie-title { font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
#entityPanel .entity-movie-status { font-size: .75rem; padding: .25rem .5rem; font-weight: 400; letter-spacing: 0; }
#entityPanel .entity-movie-status.watched { color: #f1c97e; border-color: #ab854a65; background: #2b251dc9; }
#entityPanel .entity-movie-status.unwatched { border-color: #405063; background: #101925d9; }
#entityPanel button:focus-visible, #entityPanel summary:focus-visible { outline: 2px solid var(--accent-alt); outline-offset: 4px; }
@media (max-width: 800px) {
  #entityPanel .entity-header { padding: 1.25rem; }
  #entityPanel .entity-content { padding: 0 1.25rem 1.5rem; }
  #entityPanel .entity-franchise-grid { grid-template-columns: minmax(0, 1fr); }
  #entityPanel .entity-stats .franchise-page-card { padding-inline: .85rem; }
}
@media (max-width: 540px) {
  #entityPanel .entity-identity { gap: 1rem; align-items: flex-start; }
  #entityPanel .entity-artwork-director { width: 88px; }
  #entityPanel .entity-artwork-studio { width: 108px; }
  #entityPanel .entity-artwork-studio #entityPageImage { padding: .5rem; }
  #entityPageTitle { font-size: 1.65rem; }
  #entityPageDescription { font-size: .875rem; }
  #entityPanel .entity-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }
  #entityPanel .entity-stats .franchise-page-card:nth-child(odd) { border: 0; padding-left: 0; }
  #entityPanel .entity-list-heading { flex-wrap: wrap; gap: .5rem; }
  #entityPanel .entity-franchise-row { padding: 1rem; }
  #entityPanel .entity-movie-item { flex-wrap: wrap; }
  #entityPanel .entity-movie-title { flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) {
  #entityPanel .entity-franchise-row { transition: none; }
  #entityPanel .entity-franchise-row:hover { transform: none; }
}

.rating-filter details { position: relative; min-width: 116px; }
.rating-filter summary { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 40px; padding: .5rem .75rem; border: 1px solid #344356; border-radius: 8px; background: #0c141e; color: var(--text); cursor: pointer; font-size: .875rem; list-style: none; }
.rating-filter summary::-webkit-details-marker { display: none; }
.rating-filter-chevron { width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); margin-top: -4px; }
.rating-filter details[open] summary { border-color: #b18b50; }
.rating-filter details[open] .rating-filter-chevron { transform: rotate(225deg); margin-top: 3px; }
.rating-filter-popover { position: absolute; z-index: 8; top: calc(100% + 8px); right: 0; width: min(250px, calc(100vw - 3rem)); padding: .45rem; border: 1px solid #425268; border-radius: 12px; background: #18232f; box-shadow: 0 16px 40px #0008; }
.rating-filter-popover > button { display: block; width: 100%; min-height: 42px; text-align: left; padding: .65rem .8rem; border: 0; border-radius: 6px; background: none; color: #d5dfeb; font: inherit; font-size: .875rem; cursor: pointer; }
.rating-filter-popover > button:hover { background: #ffffff08; }
.rating-filter-popover > button[aria-pressed="true"] { color: #f0c77e; background: #f0b85b12; }
.rating-filter-picker { margin-top: .35rem; padding: 1rem .5rem .5rem; border-top: 1px solid #354354; }
.rating-filter-picker .review-eyebrow { color: var(--muted); font-size: .75rem; letter-spacing: .1em; margin: 0 .25rem .4rem; }
.rating-filter-stars { display: flex; }
.rating-filter-stars button { flex: 1; min-width: 0; height: 44px; padding: 4px; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.rating-filter-stars .rating-star-icon { width: 100%; height: 100%; stroke: #7f91a5; fill: #2b3a4b; transition: fill 120ms ease, stroke 120ms ease, transform 120ms ease; }
.rating-filter-stars .active .rating-star-icon { fill: var(--accent-alt); stroke: var(--accent-alt); }
.rating-filter-stars button:hover .rating-star-icon { transform: translateY(-2px); }
.rating-filter-hint { margin: .5rem .25rem .2rem; color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.rating-filter button:focus-visible, .rating-filter summary:focus-visible { outline: 2px solid var(--accent-alt); outline-offset: 2px; }
@media (max-width: 600px) {
  #dashboardPanel .home-controls { position: relative; }
  .rating-filter details { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .rating-filter-stars .rating-star-icon { transition: none; }
  .rating-filter-stars button:hover .rating-star-icon { transform: none; }
}

.random-franchise-button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 46px; padding: .7rem 1rem; border: 1px solid #b1874980; border-radius: 10px; background: linear-gradient(120deg, #e24f3d0e, #f0b85b14); color: #f2cf94; font: 500 .9375rem "IBM Plex Sans", sans-serif; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.random-franchise-button svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.random-franchise-button:not(:disabled):hover { border-color: var(--accent-alt); background: #f0b85b20; transform: translateY(-2px); }
.random-franchise-button:focus-visible { outline: 2px solid var(--accent-alt); outline-offset: 4px; }
.random-franchise-button:disabled { cursor: default; color: var(--muted); border-color: #405063; }
.random-franchise-button.is-picking { color: #f2cf94; }
.random-franchise-button.is-picking svg { animation: franchise-shuffle 650ms ease-in-out; }
.random-pick { display: flex; align-items: center; gap: 1.2rem; min-height: 132px; margin: -.25rem 0 1.75rem; padding: 1rem; border: 1px solid #80633c80; border-radius: 12px; background: radial-gradient(ellipse at right, #f0b85b0e, transparent 70%), #101a25; }
.random-pick img { width: 132px; aspect-ratio: 16 / 10; object-fit: cover; flex-shrink: 0; border-radius: 7px; background: #192535; }
.random-pick-copy { min-width: 0; flex: 1; }
.random-pick .review-eyebrow { font-size: .75rem; }
.random-pick h3 { font-size: 1.125rem; margin: .3rem 0 .4rem; line-height: 1.4; overflow-wrap: anywhere; }
.random-pick-copy > p:last-child { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.random-pick .btn { flex-shrink: 0; min-height: 44px; font-size: .875rem; }
.random-pick.is-revealed { animation: franchise-reveal 350ms ease-out both; }
@keyframes franchise-shuffle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-25deg) scale(.9); } 65% { transform: rotate(20deg) scale(1.15); } }
@keyframes franchise-reveal { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  .random-franchise-button { width: 100%; }
  .random-pick { flex-wrap: wrap; gap: .85rem; }
  .random-pick img { width: 85px; aspect-ratio: 1; }
  .random-pick .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .random-franchise-button { transition: none; }
  .random-franchise-button:not(:disabled):hover { transform: none; }
  .random-franchise-button.is-picking svg, .random-pick.is-revealed { animation: none; }
}