:root {
  --bg: #100c29;
  --panel: #151a3b;
  --line: #30405f;
  --ink: #c8c8d6;
  --muted: #858095;
  --pink: #a94e91;
  --aqua: #3499b4;
  --lime: #d1b94f;
  --purple: #71518f;
  --red: #b84442;
  --navy: #11142f;
  --navy-deep: #0f0b27;
}

html,
body {
  background: var(--bg);
}

body {
  color: var(--ink);
}

.app-shell {
  grid-template-columns: 190px minmax(0, 1fr);
  background:
    radial-gradient(circle at 82% 8%, #26336166 0, transparent 35%),
    var(--bg);
}

.rail {
  width: 190px;
  padding: 20px 15px;
  background: var(--navy-deep);
  border-right: 1px solid #273854;
  box-shadow: 16px 0 45px #08071a40;
}

.mark {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  width: 160px;
  height: 119px;
  padding: 20px 18px;
  border: 1px solid #34415e;
  border-bottom: 3px solid var(--lime);
  background:
    linear-gradient(135deg, #3499b413, transparent 52%),
    #13102d;
}

.mark::before,
.mark::after {
  border-color: var(--aqua);
}

.mark span {
  color: #d0cfdb;
  text-shadow: 3px 0 var(--pink), -2px 0 var(--lime);
}

.mark small {
  color: var(--aqua);
}

.rail-nav {
  gap: 5px;
  margin-top: 14px;
}

.nav-item {
  position: relative;
  height: 54px;
  border-color: transparent;
  color: #8b879c;
  background: transparent;
}

.nav-item i {
  height: 25px;
  color: #77788e;
  font-size: 23px;
  transition: color .18s, transform .18s;
}

.nav-item:hover {
  border-color: #344967;
  background: #182042;
  color: var(--aqua);
  box-shadow: none;
}

.nav-item:hover i {
  color: var(--aqua);
  transform: translateY(-1px);
}

.nav-item.active,
.nav-item.active:hover {
  border-color: var(--lime);
  background: var(--lime);
  color: #111127;
  box-shadow: 0 9px 25px #08071b45;
}

.nav-item.active i,
.nav-item.active:hover i {
  color: #111127;
}

.topbar {
  min-height: 132px;
  background: #110d2a;
  border-bottom-color: #263958;
}

.topbar h1 {
  color: #d0cfda;
  text-shadow: 2px 0 var(--pink), -1px 0 var(--lime);
}

.topbar p {
  color: var(--pink);
}

.channel {
  color: #8d879d;
}

.channel::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aqua);
}

.channel .square {
  border-color: #34415d;
  color: #a6a3b3;
}

.channel em {
  color: var(--aqua);
}

.app {
  background:
    linear-gradient(115deg, #111630 0%, #121631 52%, #160f2f 100%);
}

footer {
  background: #100c27;
  border-top-color: #263958;
  color: #66647a;
}

.panel {
  border-color: var(--line);
  background: #151a39;
}

.feature {
  border-color: #405372;
  background:
    linear-gradient(90deg, #1b315b 0%, #224672 58%, #3b6f6a 100%);
}

.feature::before {
  background:
    radial-gradient(ellipse, #b45b8828 0%, transparent 63%),
    linear-gradient(100deg, transparent, #a94e9120);
  border-left-color: #a94e9138;
}

.feature h2,
.section-title h2,
.catalog-card h3,
.subhead {
  color: #c9c9d6;
}

.feature .meta,
.feature p,
.announcement p,
.recap-lead p,
.notes p {
  color: #aaa9ba;
}

.button.primary {
  border-color: var(--lime);
  background: var(--lime);
  color: #111127;
}

.button.lime {
  border-color: var(--aqua);
  background: transparent;
  color: var(--aqua);
}

.ledger {
  border-color: #315d7a;
  background: #151c3e;
}

.ledger strong {
  color: var(--lime);
}

.ledger div:nth-child(2) strong,
.ledger div:nth-child(3) strong {
  color: var(--aqua);
}

.ledger div:nth-child(4) strong {
  color: var(--red);
}

.announcement {
  border-color: #63395f;
  border-left-color: var(--pink);
  background: #231631;
  box-shadow: none;
}

.library-tools,
.review-card form,
.screening-form,
.member-form,
.add-movie {
  background: #11142e;
}

input,
textarea,
select,
.movie-search input,
.auth-form input,
.screening-form input,
.screening-form select,
.member-form input {
  background: #0f1228 !important;
  border-color: #3a4561 !important;
  color: var(--ink) !important;
}

.movie-filters button:hover,
.movie-filters button.active {
  border-color: var(--lime);
  background: #d1b94f17;
  color: var(--lime);
}

.movie-banner {
  border-color: #3c4967;
  background: #121731;
}

.review-button {
  border-color: var(--purple);
  background: #71518f13;
  color: #bba5cf;
}

.delete-review,
.button.danger,
[data-remove-movie] {
  border-color: var(--red) !important;
  color: #d36a66 !important;
}

.calendar-day {
  background: #151a39;
}

.calendar-day.outside {
  background: #10132b;
}

.calendar-day i {
  border-left-color: var(--purple);
  background: #71518f2b;
  color: #c2abd5;
}

.toast {
  background: var(--lime);
  color: #111127;
}

.has-home-art {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  padding: 0;
  background: #172745;
}

.feature .home-feature-art {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  inset: auto;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  filter: saturate(.86) contrast(1.05);
  border-left: 1px solid #405372;
  mask-image: none;
}

.feature .home-feature-copy {
  position: relative;
  z-index: 2;
}

.has-home-art .home-feature-copy {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  justify-content: center;
  min-width: 0;
  max-width: none;
  padding: 38px 32px;
  flex-direction: column;
  animation: home-feature-in .42s ease-out;
}

.home-feature-upper {
  display: flex;
  flex: 1;
  min-height: 0;
  justify-content: space-between;
  flex-direction: column;
}

.home-feature-heading,
.home-feature-controls {
  flex: 0 0 auto;
}

.home-feature-summary {
  align-self: stretch;
  margin-block: 0;
  font-size: 15px;
  line-height: 1.9;
}

@keyframes home-feature-in {
  from { opacity: .25; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

.home-grid {
  align-items: stretch;
}

.home-grid > .feature {
  height: 100%;
}

@media (min-width: 961px) {
  .home-grid > .side {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
}

.home-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.home-event-control {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
}

.home-event-control > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.home-event-control > header > small {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .12em;
}

.home-event-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  margin: 10px 0;
}

.home-event-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 7px 0;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid #49344e;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.home-event-row:first-child {
  border-top: 1px solid #49344e;
}

.home-event-row:hover {
  background: #a94e910d;
}

.home-event-row > img,
.home-event-row > i {
  width: 52px;
  height: 52px;
}

.home-event-row > img {
  object-fit: cover;
}

.home-event-row > i {
  display: grid;
  place-items: center;
  border: 1px solid #5b4160;
  color: var(--pink);
  font-style: normal;
}

.home-event-row span,
.home-event-row strong,
.home-event-row small {
  display: block;
  min-width: 0;
}

.home-event-row strong {
  overflow: hidden;
  font: 700 18px/1.05 Rajdhani;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-event-row small {
  margin-top: 3px;
  color: var(--aqua);
  font-size: 8px;
}

.home-event-row p {
  margin: 3px 0 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-event-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  border: 1px dashed #523b5d;
  color: var(--muted);
  text-align: center;
  flex-direction: column;
}

.home-event-empty strong {
  color: var(--ink);
  font: 700 19px Rajdhani;
}

.home-event-empty small {
  font-size: 9px;
}

.home-event-control .button {
  width: 100%;
}

.home-route-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 92px;
  padding: 15px;
  gap: 12px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform .18s, border-color .18s, background .18s;
}

.home-route-card:hover {
  transform: translateY(-2px);
  border-color: var(--aqua);
  background: #192344;
}

.home-route-card i {
  color: var(--aqua);
  font: normal 30px Rajdhani;
  text-align: center;
}

.home-route-card b,
.home-route-card small {
  display: block;
}

.home-route-card b {
  font: 700 20px Rajdhani;
}

.home-route-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.home-route-card > strong {
  color: var(--lime);
  font: 700 35px Rajdhani;
}

.home-route-card:nth-child(2) i,
.home-route-card:nth-child(2) > strong {
  color: var(--pink);
}

.home-route-card:nth-child(3) i,
.home-route-card:nth-child(3) > strong {
  color: #a981ca;
}

.home-route-card:nth-child(4) i,
.home-route-card:nth-child(4) > strong {
  color: #a981ca;
}

.home-lower-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr .8fr;
  gap: 18px;
  margin-top: 18px;
}

.home-upcoming,
.home-event,
.home-crew {
  min-height: 280px;
  padding: 22px;
}

.home-upcoming header,
.home-event header,
.home-crew header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 15px;
}

.home-upcoming header button,
.home-event header button,
.home-crew header button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--aqua);
  font-size: 10px;
  cursor: pointer;
}

.home-upcoming > div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.home-upcoming time {
  color: var(--pink);
  font-size: 10px;
}

.home-upcoming time b,
.home-upcoming span strong,
.home-upcoming span small {
  display: block;
}

.home-upcoming time b {
  margin-top: 4px;
  color: var(--lime);
}

.home-upcoming span strong {
  font: 700 21px Rajdhani;
}

.home-upcoming span small,
.home-event small,
.home-crew small {
  color: var(--muted);
  font-size: 10px;
}

.home-upcoming > p,
.home-event > p {
  margin-top: 34px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.home-event {
  display: grid;
  grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr);
  grid-template-rows: auto 1fr;
  gap: 0 17px;
}

.home-event header {
  grid-column: 1 / 3;
}

.home-event > img {
  width: 100%;
  height: 185px;
  object-fit: cover;
}

.home-event > div > strong {
  display: block;
  margin-bottom: 5px;
  font: 700 25px/1 Rajdhani;
}

.home-event > div p {
  display: -webkit-box;
  margin: 12px 0 0;
  overflow: hidden;
  color: #aaa8b6;
  font-size: 12px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.home-event > p {
  grid-column: 1 / 3;
}

.home-crew > div {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px 12px;
}

.home-crew .member-avatar {
  width: 42px;
  height: 42px;
}

.home-crew strong,
.home-crew small {
  display: block;
}

.home-crew strong {
  font: 700 18px Rajdhani;
}

.event-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .38fr);
  align-items: end;
  gap: 16px;
  margin: 0 0 22px;
  padding: 22px;
  background: #11142e;
}

.event-form label > span {
  display: block;
  margin-bottom: 8px;
  color: var(--aqua);
  font-size: 11px;
  letter-spacing: .14em;
}

.event-form input,
.event-form textarea {
  width: 100%;
  border: 1px solid #3a4561;
  outline: 0;
  background: #0f1228;
  color: var(--ink);
  font: 14px/1.6 'Space Mono';
}

.event-form input {
  height: 48px;
  padding: 0 13px;
}

.event-form textarea {
  min-height: 130px;
  padding: 13px;
  resize: vertical;
}

.event-form input:focus,
.event-form textarea:focus {
  border-color: var(--aqua);
}

.event-words {
  grid-column: 1 / 3;
}

.event-picture input {
  height: auto;
  padding: 10px;
  border-style: dashed;
}

.event-form .button {
  min-height: 48px;
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
}

.event-card {
  overflow: hidden;
  border-color: #45516e;
}

.event-card > img,
.event-art-fallback {
  width: 100%;
  height: 320px;
}

.event-card > img {
  display: block;
  object-fit: cover;
}

.event-art-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1c3157, #37203e);
  color: #777d96;
  font-size: 12px;
  letter-spacing: .22em;
}

.event-card-copy {
  padding: 25px;
}

.event-card-copy h3 {
  margin: 16px 0 3px;
  font: 700 34px/1 Rajdhani;
}

.event-card-copy > small {
  color: var(--muted);
  font-size: 10px;
}

.event-card-copy > p {
  margin: 20px 0;
  color: #afadba;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
}

.event-delete {
  border-color: var(--red);
  color: #d36a66;
}

.vote-meter {
  border-color: #53688a;
  background: linear-gradient(90deg, #d1b94f18, #3499b414 45%, #a94e9117);
  color: var(--lime);
}

.pips i:nth-child(1) {
  background: var(--lime);
}

.pips i:nth-child(2) {
  background: var(--aqua);
}

.pips i:nth-child(3) {
  background: var(--pink);
}

.pips i.spent {
  opacity: .2;
}

.ballot-row {
  grid-template-columns: 42px 62px minmax(0, 1fr) 86px minmax(116px, auto);
  min-height: 96px;
  padding-block: 9px;
  border-color: color-mix(in srgb, var(--vote-color) 50%, #30405f);
  border-left: 4px solid var(--vote-color);
  background: color-mix(in srgb, var(--vote-color) 7%, #151a39);
  transition: border-color .18s, background .18s, transform .18s;
}

.ballot-poster {
  display: block;
  width: 58px;
  height: 78px;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--vote-color) 55%, #30405f);
  background: #0d1026;
}

.ballot-poster-empty {
  display: grid;
  place-items: center;
  color: #697085;
  font-size: 8px;
  text-align: center;
}

.ballot-movie-copy {
  min-width: 0;
}

.ballot-movie-copy > strong {
  display: block;
  font-size: 24px;
  line-height: 1.05;
}

.ballot-movie-copy > small {
  font-size: 11px;
}

.ballot-row:hover,
.ballot-row.has-my-vote {
  border-color: var(--vote-color);
  background: color-mix(in srgb, var(--vote-color) 12%, #151a39);
}

.ballot-row .num,
.ballot-row .votes {
  color: var(--vote-color) !important;
}

.ballot-row .bar {
  height: 7px;
  overflow: hidden;
  background: #0d1026;
}

.ballot-row .bar i {
  background: var(--vote-color) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--vote-color) 55%, transparent);
}

.ballot-actions {
  display: grid;
  gap: 6px;
}

.ballot-actions .mini-button {
  display: block;
  min-width: 112px;
  border-color: var(--vote-color);
  color: var(--vote-color);
  font-weight: 700;
}

.ballot-actions .cast-vote:hover {
  background: var(--vote-color);
  color: #111127;
}

.ballot-actions .remove-vote {
  border-color: #b84442;
  color: #d96b67;
}

.ballot-actions .remove-vote:hover {
  background: #b84442;
  color: #fff;
}

.ballot-actions .mini-button:disabled {
  border-color: #50566a;
  color: #686d80;
}

/* Comfortable reading scale across every view. */
body {
  font-size: 17px;
  line-height: 1.6;
}

.nav-item {
  font-size: 13px;
}

.nav-item i {
  height: 31px;
  font-size: 26px;
}

.mark small,
.topbar p,
.channel,
.eyebrow,
.page-copy,
.ledger small,
.catalog-card p,
.movie-row small,
.rate-row small,
.link-policy,
.calendar-hint,
.movie-search span {
  font-size: 13px;
}

.button,
.mini-button,
.movie-filters button,
.tier-tabs button {
  font-size: 13px !important;
}

input,
textarea,
select,
.movie-search input,
.auth-form input,
.screening-form input,
.screening-form select,
.member-form input {
  font-size: 14px !important;
}

.section-title {
  align-items: flex-start;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 8px;
}

.section-title .eyebrow {
  color: var(--lime);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .25em;
}

.section-title h2 {
  margin: 0;
  font-size: clamp(40px, 4vw, 58px);
  line-height: .95;
  letter-spacing: .02em;
}

.page-copy {
  max-width: 920px;
  margin: 0 0 28px;
  color: #aaa9ba;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .035em;
}

.add-movie label span,
.auth-form > label > span,
.picture-field > span,
.screening-form label span,
.member-form label span,
.review-card form label > span {
  font-size: 11px;
}

.movie-banner .eyebrow {
  font-size: 11px !important;
}

.movie-banner .movie-card-body h3 {
  font-size: 32px !important;
}

.movie-banner .movie-card-body > p {
  font-size: 12px !important;
  display: -webkit-box;
  min-height: 96px;
  overflow: hidden;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.movie-banner .route-panel {
  margin: auto 0 13px !important;
}

.movie-banner .movie-links {
  margin: 0 !important;
}

.home-feature-summary {
  display: -webkit-box;
  max-width: 720px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.home-next-date {
  display: grid;
  grid-template-columns: 112px minmax(120px, auto) minmax(0, 1fr) 24px;
  align-items: center;
  width: 100%;
  flex: 0 0 112px;
  min-height: 112px;
  margin: 17px 0 0;
  padding: 17px 18px;
  gap: 12px;
  border: 1px solid #52617d;
  border-left: 4px solid var(--lime);
  background: #11162eaa;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.home-next-date:hover {
  border-color: var(--lime);
  background: #d1b94f10;
}

.home-next-date span {
  color: var(--lime);
  font-size: 10px;
  letter-spacing: .15em;
}

.home-next-date strong {
  font: 700 27px Rajdhani;
  white-space: nowrap;
}

.home-next-date small {
  overflow: hidden;
  color: #9795a7;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-next-date i {
  color: var(--aqua);
  font-style: normal;
  text-align: right;
}

.home-feature-vitals {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  flex: 0 0 112px;
  min-height: 112px;
  margin-top: 17px;
  padding: 14px 18px;
  gap: 20px;
  border-color: #315d7a;
  background: #121a38cc;
}

.home-feature-vitals .ledger-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  gap: 13px;
}

.home-feature-vitals .ledger-grid strong {
  font-size: 30px;
}

.home-feature-vitals .ledger-grid small {
  font-size: 8px;
}

.home-side-date {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 20px 22px;
  gap: 4px 12px;
  border-color: #766a3a;
  background: linear-gradient(135deg, #29243a, #171b38);
}

.home-side-date span,
.home-side-date strong,
.home-side-date small {
  grid-column: 1;
}

.home-side-date strong {
  margin-top: 7px;
  font-size: 33px;
}

.home-side-date small {
  align-self: end;
  white-space: normal;
}

.home-side-date i {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  font-size: 22px;
}

.watch-panel .watch-status,
.movie-banner .route-boxes span {
  font-size: 11px !important;
}

.watch-panel .watched-by b,
.watch-panel .watched-by span,
.route-panel > b {
  font-size: 10px !important;
}

.movie-banner .review-button {
  font-size: 11px !important;
}

.movie-banner .movie-links a,
.movie-banner .movie-links button {
  font-size: 11px !important;
}

.club-reviews article p,
.upcoming small,
.upcoming time,
.weekday-row span,
.calendar-day > span,
.calendar-day i,
.calendar-day small,
.member-status,
.founder-tag {
  font-size: 11px;
}

.review-card > header p,
.wheel-pool small {
  font-size: 10px;
}

.ranking-list {
  display: grid;
  gap: 12px;
}

.ranking-row {
  grid-template-columns: 76px minmax(220px, 1fr) 90px minmax(300px, auto);
  min-height: 126px;
  margin: 0;
  padding: 15px 22px;
  gap: 22px;
  border-color: #3c4b69;
  background: linear-gradient(90deg, #172040, #151932);
}

.ranking-row .poster {
  width: 70px;
  height: 96px;
  object-fit: cover;
}

.ranking-row strong {
  font-size: 29px;
  line-height: 1.05;
}

.ranking-row small {
  margin-top: 9px;
  font-size: 12px;
}

.ranking-row .score {
  font-size: 40px;
}

.ranking-row .stars {
  gap: 10px;
}

.ranking-row .stars button {
  width: 50px;
  height: 50px;
  border-color: #596683;
  font-size: 16px;
  font-weight: 700;
}

.tier-selection-note {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 12px;
  padding: 13px 17px;
  border-left: 4px solid var(--aqua);
  background: #3499b411;
}

.tier-selection-note span {
  color: var(--aqua);
  font-size: 11px;
  letter-spacing: .18em;
}

.tier-selection-note strong {
  font: 700 22px Rajdhani;
}

.tier-picker {
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px;
}

.tier-picker button {
  grid-template-columns: 76px minmax(0, 1fr);
  min-height: 118px;
  padding: 10px;
  gap: 5px 14px;
  border-color: #485675;
  background: #11152f;
}

.tier-picker img {
  width: 76px;
  height: 104px;
}

.tier-picker span {
  font: 700 21px/1.05 Rajdhani;
  white-space: normal;
}

.tier-picker small {
  font-size: 11px;
}

.interactive-tier {
  grid-template-columns: 76px minmax(0, 1fr);
  min-height: 82px;
  border-color: #3e4a66;
  background: #141933;
}

.interactive-tier b {
  font-size: 34px;
}

.interactive-tier span {
  min-height: 80px;
  padding: 14px 18px;
  gap: 10px;
  color: #918da2;
  font-size: 13px;
}

.interactive-tier i {
  padding: 9px 12px;
  border-color: #53617e;
  background: #0f132b;
  font-size: 13px;
}

.clear-tier {
  margin-top: 16px;
  padding: 12px 17px;
}

.tier-workspace {
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(500px, 1.18fr);
  flex: 1;
  min-height: 0;
  gap: 18px;
}

.tier-movie-column,
.tier-board {
  min-width: 0;
  min-height: 0;
}

.tier-movie-column {
  display: flex;
  flex-direction: column;
}

.tier-board {
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

@media (min-width: 901px) {
  .tier-stage {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }

  .tier-stage .topbar {
    min-height: 100px;
    padding-block: 18px;
  }

  .tier-stage footer {
    min-height: 54px;
    padding-block: 17px;
  }

  .tiers-view {
    display: flex;
    min-height: 0;
    padding: 17px 28px 20px;
    overflow: hidden;
    flex-direction: column;
  }

  .tiers-view .section-title {
    gap: 2px;
  }

  .tiers-view .section-title h2 {
    font-size: 42px;
  }

  .tiers-view .page-copy {
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.45;
  }

  .tiers-view .tier-selection-note {
    flex: 0 0 auto;
    margin-bottom: 8px;
    padding: 9px 13px;
  }

  .tiers-view .tier-selection-note strong {
    overflow: hidden;
    font-size: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tiers-view .tier-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 9px;
    gap: 8px;
    align-content: start;
    overflow: auto;
  }

  .tiers-view .tier-picker button {
    grid-template-columns: 54px minmax(0, 1fr);
    min-height: 82px;
    padding: 6px;
    gap: 2px 9px;
  }

  .tiers-view .tier-picker img {
    width: 54px;
    height: 72px;
  }

  .tiers-view .tier-picker span {
    font-size: 17px;
  }

  .tiers-view .tier-picker small {
    font-size: 9px;
  }

  .tiers-view .clear-tier {
    flex: 0 0 auto;
    width: 100%;
    margin-top: 8px;
    padding: 8px 11px;
    font-size: 10px !important;
  }

  .tiers-view .interactive-tier {
    min-height: 0;
    height: 100%;
    grid-template-columns: 67px minmax(0, 1fr);
  }

  .tiers-view .interactive-tier b {
    font-size: 30px;
  }

  .tiers-view .interactive-tier span {
    min-height: 0;
    height: 100%;
    padding: 8px 13px;
  }

  .tiers-view .interactive-tier i {
    padding: 6px 9px;
    font-size: 11px;
  }

  .home-stage {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }

  .home-stage .topbar {
    min-height: 100px;
    padding-block: 18px;
  }

  .home-stage footer {
    min-height: 54px;
    padding-block: 17px;
  }

  .home-view {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    padding: 17px 28px 20px;
    gap: 12px;
    overflow: hidden;
  }

  .home-view .home-grid,
  .home-view .feature,
  .home-view .side {
    min-height: 0;
    height: 100%;
  }

  .home-view .feature {
    min-height: 0;
  }

  .home-view .home-feature-art {
    min-height: 0;
  }

  .home-view .home-feature-copy {
    justify-content: flex-start;
    padding: 28px 30px;
  }

  .home-view .feature h2 {
    margin: 18px 0 12px;
    font-size: clamp(39px, 3.8vw, 58px);
  }

  .home-view .feature p {
    margin-block: 0;
    font-size: 14px;
    line-height: 1.85;
    -webkit-line-clamp: 4;
  }

  .home-view .feature-actions {
    margin-top: 0;
    padding-top: 0;
  }

  .home-view .pager {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    gap: 24px;
  }

  .home-view .home-feature-upper {
    flex: 1;
  }

  .home-view .side {
    grid-template-rows: minmax(160px, .68fr) minmax(280px, 1.32fr);
    gap: 12px;
  }

  .home-view .ledger,
  .home-view .announcement {
    padding: 18px;
  }

  .home-view .ledger-grid {
    margin-top: 10px;
    gap: 9px;
  }

  .home-view .home-feature-vitals .ledger-grid {
    margin: 0;
    gap: 13px;
  }

  .home-view .ledger strong {
    font-size: 31px;
  }

  .home-view .home-route-grid {
    margin: 0;
    gap: 10px;
  }

  .home-view .home-route-card {
    min-height: 78px;
    padding: 11px 13px;
  }
}

@media (max-width: 900px) {
  .tier-workspace {
    grid-template-columns: 1fr;
  }

  .tier-board {
    margin-top: 18px;
  }
}

.live-recap {
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
  align-items: stretch;
}

.live-recap .recap-lead,
.recap-notes,
.recap-ranking,
.recap-schedule {
  padding: 30px;
}

.live-recap .recap-lead {
  min-height: 390px;
  background: linear-gradient(125deg, #1a3159, #1d294b 62%, #35213f);
}

.live-recap .recap-lead h3 {
  max-width: 700px;
  margin: 34px 0 12px;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1;
}

.live-recap .recap-lead > p {
  max-width: 740px;
  font-size: 16px;
}

.live-recap .recap-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 52px;
}

.live-recap .recap-stats strong {
  font-size: 43px;
}

.live-recap .recap-stats small {
  font-size: 11px;
}

.recap-notes {
  border-color: #654063;
  background: #211731;
}

.recap-notes > article {
  padding: 18px 0;
  border-bottom: 1px solid #49344e;
}

.recap-notes > article:last-child {
  border-bottom: 0;
}

.recap-notes article > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.recap-notes article strong {
  font: 700 21px Rajdhani;
}

.recap-notes article b {
  color: var(--lime);
  white-space: nowrap;
}

.recap-notes article small {
  color: var(--aqua);
  font-size: 11px;
}

.recap-notes article p,
.recap-placeholder p {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  color: #aaa6b6;
  font-size: 13px;
  line-height: 1.6;
}

.recap-bottom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.recap-ranking > div,
.recap-schedule > div:not(.recap-placeholder) {
  display: grid;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.recap-ranking > div {
  grid-template-columns: 34px 44px minmax(0, 1fr) 56px;
}

.recap-ranking img {
  width: 44px;
  height: 60px;
  object-fit: cover;
}

.recap-ranking > div > b {
  color: #6f7891;
  font: 700 22px Rajdhani;
}

.recap-ranking span strong,
.recap-schedule strong {
  display: block;
  font: 700 21px Rajdhani;
}

.recap-ranking span small,
.recap-schedule small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.recap-ranking em {
  color: var(--lime);
  font: normal 700 27px Rajdhani;
  text-align: right;
}

.recap-schedule > div:not(.recap-placeholder) {
  grid-template-columns: 150px minmax(0, 1fr);
}

.recap-schedule time {
  grid-row: 1 / 3;
  color: var(--pink);
  font-size: 11px;
}

.recap-placeholder {
  margin-top: 20px;
  padding: 24px;
  border: 1px dashed #4b536e;
}

.recap-placeholder strong {
  font: 700 22px Rajdhani;
}

@media (max-width: 700px) {
  .app-shell {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .rail {
    width: 72px;
    padding: 8px 6px;
  }

  .mark {
    width: 60px;
    height: 94px;
    padding: 15px 3px;
  }

  .nav-item {
    height: 56px;
    font-size: 0;
  }

  .ballot-row {
    grid-template-columns: 29px 48px minmax(0, 1fr) 48px;
    padding-inline: 7px;
    gap: 7px;
  }

  .ballot-poster {
    width: 46px;
    height: 64px;
  }

  .ballot-movie-copy > strong {
    font-size: 20px;
  }

  .ballot-actions {
    grid-column: 3 / 5;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ballot-actions .mini-button {
    display: block;
    min-width: 0;
  }

  .section-title h2 {
    font-size: 40px;
  }

  .page-copy {
    font-size: 14px;
  }

  .ranking-row {
    grid-template-columns: 58px minmax(0, 1fr) 58px;
    padding: 14px;
    gap: 12px;
  }

  .ranking-row .poster {
    width: 54px;
    height: 76px;
  }

  .ranking-row strong {
    font-size: 23px;
  }

  .ranking-row .score {
    font-size: 31px;
  }

  .ranking-row .stars {
    grid-column: 1 / 4;
    justify-content: stretch;
  }

  .ranking-row .stars button {
    flex: 1;
    width: auto;
  }

  .tier-picker button {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .tier-picker img {
    width: 68px;
    height: 94px;
  }

  .interactive-tier {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .live-recap .recap-stats,
  .recap-bottom {
    grid-template-columns: 1fr;
  }

  .live-recap .recap-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recap-schedule > div:not(.recap-placeholder) {
    grid-template-columns: 1fr;
  }

  .recap-schedule time {
    grid-row: auto;
  }

  .has-home-art .home-feature-copy {
    display: block;
    max-width: none;
    padding: 0;
  }

  .feature .home-feature-art {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 0;
    opacity: .2;
    border-left: 0;
    mask-image: linear-gradient(90deg, #000, #000);
  }

  .has-home-art {
    display: block;
    padding: 25px 20px;
  }

  .home-next-date {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
  }

  .home-feature-vitals {
    grid-template-columns: 1fr;
    min-height: 150px;
  }

  .home-feature-vitals .ledger-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-next-date span {
    grid-column: 1;
  }

  .home-next-date strong {
    grid-column: 1;
  }

  .home-next-date small {
    grid-column: 1 / 3;
    white-space: normal;
  }

  .home-next-date i {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .home-route-grid,
  .home-lower-grid,
  .event-grid,
  .event-form {
    grid-template-columns: 1fr;
  }

  .event-words,
  .home-event header,
  .home-event > p {
    grid-column: auto;
  }

  .home-event {
    display: block;
  }

  .home-event > img {
    margin-bottom: 16px;
  }

  .event-card > img,
  .event-art-fallback {
    height: 240px;
  }

  .movie-banner .movie-card-body > p {
    min-height: 0;
  }
}

@media (min-width: 701px) {
  .home-event-control .home-event-slide {
    width: 100%;
    margin-right: 0;
  }

  .home-stage .home-event-control > footer,
  .home-event-control > footer {
    position: relative;
    display: block;
    padding: 18px 190px 18px 16px;
  }

  .home-event-control > footer button {
    position: absolute;
    top: 50%;
    right: 10px;
    bottom: auto;
    width: auto;
    min-width: 168px;
    min-height: 38px;
    padding: 8px 13px;
    border-width: 1px;
    writing-mode: horizontal-tb;
    transform: translateY(-50%);
  }
}

@media (min-width: 701px) and (max-width: 1050px) {
  .ranking-row {
    grid-template-columns: 70px minmax(0, 1fr) 76px;
  }

  .ranking-row .stars {
    grid-column: 2 / 4;
  }

  .live-recap,
  .recap-bottom {
    grid-template-columns: 1fr;
  }

  .home-route-grid,
  .home-lower-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.wheel-result-name {
  min-height: 58px;
  margin: 10px 0 18px;
  color: var(--aqua);
  font: 700 clamp(28px, 3vw, 42px)/1 Rajdhani;
  letter-spacing: .03em;
}

.home-view .home-event-control {
  padding: 0;
  overflow: hidden;
}

.home-event-control > header {
  flex: 0 0 auto;
  margin: 0;
  padding: 13px 16px;
  border-bottom: 1px solid #49344e;
  background: #17122c;
}

.home-event-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.home-event-nav small {
  margin-right: 3px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .12em;
}

.home-event-nav button {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 1px solid #62506c;
  background: transparent;
  color: var(--pink);
  font-size: 14px;
  cursor: pointer;
}

.home-event-nav button:hover:not(:disabled) {
  border-color: var(--pink);
  background: #a94e9118;
}

.home-event-nav button:disabled {
  opacity: .25;
  cursor: default;
}

.home-event-slide {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: linear-gradient(135deg, #233858, #321b3d);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  animation: home-event-in .4s ease-out;
}

.home-event-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 12%, #10142c44 42%, #0d1029f2 100%);
}

.home-event-slide > img,
.home-event-slide-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-event-slide > img {
  object-fit: cover;
  filter: saturate(.85) contrast(1.05);
}

.home-event-slide-fallback {
  display: grid;
  place-items: center;
  color: #ffffff18;
  font: normal 700 48px Rajdhani;
  letter-spacing: .1em;
}

.home-event-slide > span {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: 20px 18px 17px;
}

.home-event-slide > span > small {
  display: block;
  color: var(--lime);
  font-size: 9px;
  letter-spacing: .13em;
}

.home-event-slide > span > strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  font: 700 29px/1 Rajdhani;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-event-slide > span > p {
  display: -webkit-box;
  margin: 8px 0 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: #c1bfca;
  font-size: 11px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Keep the all-events action on the physical right edge of the card. */
.home-event-control {
  position: relative;
}

.home-event-control .home-event-slide {
  width: calc(100% - 48px);
  margin-right: 48px;
}

.home-stage .home-event-control > footer,
.home-event-control > footer {
  grid-template-columns: minmax(0, 1fr);
  padding-right: 60px;
}

.home-event-control > footer button {
  position: absolute;
  top: 54px;
  right: 0;
  bottom: 0;
  z-index: 4;
  width: 48px;
  min-width: 48px;
  min-height: 0;
  padding: 12px 8px;
  border-width: 0 0 0 1px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

@media (max-width: 700px) {
  .home-event-control .home-event-slide {
    width: 100%;
    margin-right: 0;
  }

  .home-stage .home-event-control > footer,
  .home-event-control > footer {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-right: 10px;
  }

  .home-event-control > footer button {
    position: static;
    width: auto;
    min-width: 150px;
    min-height: 38px;
    padding: 8px 12px;
    border-width: 1px;
    writing-mode: horizontal-tb;
    transform: none;
  }
}

.home-event-image {
  position: relative;
  display: grid;
  place-items: center;
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--panel);
  cursor: zoom-in;
}

.home-event-image > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  background: var(--panel);
}

.home-event-image > .home-event-image-bg {
  position: absolute;
  inset: -18px;
  z-index: 0;
  width: calc(100% + 36px);
  height: calc(100% + 36px);
  max-width: none;
  object-fit: cover;
  opacity: .62;
  filter: blur(15px) saturate(.9) brightness(.62);
  transform: scale(1.04);
}

.home-event-image > .home-event-image-main {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 10px 22px #0008);
}

.home-event-caption {
  display: block;
  grid-row: 2;
  width: 100%;
  padding: 15px 18px 16px;
  border: 0;
  border-top: 1px solid #49344e;
  background: #18132d;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.home-event-caption > small {
  display: block;
  color: var(--pink);
  font-size: 11px;
  letter-spacing: .13em;
}

.home-event-caption > strong {
  display: block;
  margin-top: 6px;
  font: 700 31px/1 Rajdhani;
}

.home-event-caption > p {
  display: -webkit-box;
  margin: 8px 0 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: #d0cdd6;
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-stage .home-event-control > footer > small,
.home-event-control > footer > small {
  color: #aaa5b5;
  font-size: 11px;
  font-weight: 700;
}

.home-event-control > footer button {
  padding: 8px 11px;
  border: 1px solid var(--aqua);
  color: var(--aqua);
  font-size: 11px;
  font-weight: 700;
}

.home-event-control > footer button:hover {
  background: #3499b415;
}

.event-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  padding: 30px;
  background: #080718ed;
  backdrop-filter: blur(10px);
}

.event-preview-modal > img {
  display: block;
  width: auto;
  max-width: min(1200px, calc(100vw - 60px));
  height: auto;
  max-height: calc(100vh - 155px);
  object-fit: contain;
  box-shadow: 0 22px 80px #000b;
}

.event-preview-modal > div {
  width: min(1200px, calc(100vw - 60px));
  padding: 14px 18px;
  border-top: 2px solid var(--pink);
  background: #15132c;
}

.event-preview-modal > div span,
.event-preview-modal > div strong,
.event-preview-modal > div small {
  display: block;
}

.event-preview-modal > div span {
  color: var(--pink);
  font-size: 10px;
  letter-spacing: .14em;
}

.event-preview-modal > div strong {
  margin-top: 3px;
  font: 700 26px Rajdhani;
}

.event-preview-modal > div small {
  color: var(--muted);
  font-size: 10px;
}

.event-preview-close {
  position: fixed;
  top: 22px;
  right: 25px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border: 1px solid var(--pink);
  background: #15132c;
  color: var(--pink);
  font-size: 29px;
  cursor: pointer;
}

.home-stage .home-event-control > footer,
.home-event-control > footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  min-height: 56px;
  padding: 8px 10px 8px 16px;
  gap: 12px;
  border-top: 1px solid #49344e;
  background: #15122b;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .08em;
}

.home-event-control > footer button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 168px;
  min-height: 38px;
  margin: 0;
  padding: 8px 13px;
  border: 1px solid var(--aqua);
  background: #3499b410;
  color: var(--aqua);
  font: 700 12px 'Space Mono';
  letter-spacing: .08em;
  white-space: nowrap;
  cursor: pointer;
  justify-self: end;
}

.home-event-control > footer button:hover {
  background: var(--aqua);
  color: #10132b;
}

.home-event-empty button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--aqua);
  font: 10px 'Space Mono';
  cursor: pointer;
}

.home-event-control .home-event-empty {
  width: calc(100% - 28px);
  margin: 14px;
}

.home-event-control .home-event-empty button {
  margin-top: 12px;
}

@keyframes home-event-in {
  from { opacity: .25; transform: scale(1.015); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 901px) {
  .home-view .side {
    grid-template-rows: minmax(98px, .28fr) minmax(360px, 1.72fr);
  }

  .home-side-date {
    padding: 14px 18px;
  }

  .home-side-date strong {
    margin-top: 2px;
    font-size: 27px;
  }

  .home-side-date small {
    font-size: 9px;
  }
}

.home-event-slide {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  background: var(--panel);
}

.home-event-slide::after {
  display: none;
}

.home-event-slide > img,
.home-event-slide-fallback {
  position: relative;
  inset: auto;
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.home-event-slide > img {
  object-fit: contain;
  object-position: center;
  background: var(--panel);
  filter: none;
}

.home-event-slide > span {
  position: relative;
  grid-row: 2;
  padding: 13px 17px 14px;
  border-top: 1px solid #49344e;
  background: #18132d;
}

.home-event-slide > span > small {
  color: var(--pink);
  font-size: 10px;
}

.home-event-slide > span > strong {
  margin-top: 6px;
  font-size: 27px;
  white-space: normal;
}

.home-event-slide > span > p {
  margin-top: 7px;
  color: #c8c5d0;
  font-size: 12px;
  line-height: 1.55;
  -webkit-line-clamp: 2;
}

/* Final home date layout: artwork, movie, and date are three clear zones. */
.home-view .home-side-date {
  display: grid !important;
  grid-template-columns: 84px minmax(0, 1fr) minmax(150px, .72fr) 22px !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  gap: 11px !important;
  overflow: hidden;
}

.home-side-date .home-date-poster,
.home-side-date .home-date-movie,
.home-side-date .home-date-day,
.home-side-date .home-date-arrow {
  grid-row: 1 !important;
  min-width: 0;
}

.home-side-date .home-date-poster {
  grid-column: 1 !important;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--aqua);
  background: #11162e;
}

.home-side-date .home-date-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-side-date .home-date-poster i {
  position: static;
  color: var(--aqua);
  font-size: 24px;
}

.home-side-date .home-date-movie,
.home-side-date .home-date-day {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  padding: 8px 13px;
  border: 1px solid #49546f;
  background: #13162d;
  text-align: left;
}

.home-side-date .home-date-movie {
  grid-column: 2 !important;
}

.home-side-date .home-date-day {
  grid-column: 3 !important;
  border-color: #766a3a;
  background: #d1b94f0d;
}

.home-side-date .home-date-movie small,
.home-side-date .home-date-day small {
  display: block;
  margin: 0 0 5px;
  color: var(--yellow);
  font-size: 8px !important;
  letter-spacing: .16em;
  white-space: nowrap;
}

.home-side-date .home-date-movie strong,
.home-side-date .home-date-day strong {
  display: block;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font: 700 22px/1 Rajdhani;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-side-date .home-date-movie em {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  color: #c8c5d0;
  font: normal 11px/1.2 'Space Mono';
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-side-date .home-date-day strong {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--lime);
  overflow: visible;
  white-space: normal;
}

.home-side-date .home-date-day strong b {
  color: var(--lime);
  font: 700 12px/1 Rajdhani;
  letter-spacing: .14em;
}

.home-side-date .home-date-day strong span {
  margin-top: 2px;
  color: var(--lime);
  font: 700 24px/.9 Rajdhani;
  letter-spacing: .03em;
  white-space: nowrap;
}

.home-side-date .home-date-day em {
  display: block;
  margin-top: 8px;
  color: var(--red);
  font: 700 15px/1 'Space Mono';
  letter-spacing: .12em;
  white-space: nowrap;
}

.home-side-date .home-date-arrow {
  position: static;
  grid-column: 4 !important;
  align-self: center !important;
  color: var(--aqua);
  font-size: 18px;
}

/* Keep the event action horizontal and anchored in the lower-right corner. */
.home-event-control .home-event-slide {
  width: 100% !important;
  margin: 0 !important;
}

.home-stage .home-event-control > footer,
.home-event-control > footer {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 9px 10px 9px 16px !important;
  gap: 12px !important;
}

.home-stage .home-event-control > footer > button,
.home-event-control > footer > button {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  place-items: center !important;
  width: auto !important;
  min-width: 168px !important;
  height: auto !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 9px 13px !important;
  border: 1px solid var(--aqua) !important;
  background: #3499b410 !important;
  color: var(--aqua) !important;
  font: 700 12px 'Space Mono' !important;
  letter-spacing: .08em !important;
  writing-mode: horizontal-tb !important;
  white-space: nowrap !important;
  transform: none !important;
  justify-self: end !important;
}

@media (max-width: 700px) {
  .home-view .home-side-date {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    grid-template-rows: minmax(76px, 1fr) auto !important;
  }

  .home-side-date .home-date-poster,
  .home-side-date .home-date-movie {
    grid-row: 1 !important;
  }

  .home-side-date .home-date-day {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
  }

  .home-side-date .home-date-arrow {
    display: none;
  }
}

/* Automatic top-movies leaderboard, calculated from member reviews. */
.movie-banner .route-boxes {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.movie-banner .route-boxes label:nth-child(3) input:checked + span {
  border-color: var(--purple);
  background: #7c3fe51c;
  color: #b38cf4;
}

.top-movies-board {
  display: grid;
  gap: 14px;
}

.top-movie-row {
  position: relative;
  display: grid;
  grid-template-columns: 76px 112px minmax(0, 1fr) 150px;
  align-items: stretch;
  min-height: 166px;
  padding: 0;
  overflow: hidden;
  border-color: #3c4b69;
  background: linear-gradient(90deg, #172040, #151932);
}

.top-movie-row::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--aqua);
}

.top-movie-row.top-place-1::before {
  background: var(--yellow);
  box-shadow: 0 0 20px #d1b94f88;
}

.top-rank {
  display: grid;
  place-items: center;
  color: #6f7891;
  font: 700 34px Rajdhani;
}

.top-place-1 .top-rank {
  color: var(--yellow);
}

.top-movie-poster {
  display: block;
  width: 112px;
  height: 166px;
  object-fit: cover;
  background: #0a0d19;
}

.top-movie-poster-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 9px;
}

.top-movie-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 20px 28px;
}

.top-movie-copy h3 {
  margin: 7px 0 6px;
  font: 700 34px/1 Rajdhani;
}

.top-movie-copy p {
  display: -webkit-box;
  max-width: 760px;
  margin: 0 0 12px;
  overflow: hidden;
  color: #aaa9ba;
  font-size: 12px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.top-movie-copy .mini-button {
  align-self: flex-start;
  min-width: 150px;
  color: var(--aqua);
}

.top-movie-score {
  display: flex;
  align-items: baseline;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 18px;
  border-left: 1px solid #3c4b69;
  background: #0e142bdd;
  color: var(--lime);
}

.top-movie-score strong {
  font: 700 52px/.9 Rajdhani;
}

.top-movie-score > span {
  margin-left: 5px;
  font: 700 17px Rajdhani;
}

.top-movie-score small {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}

@media (max-width: 800px) {
  .top-movie-row {
    grid-template-columns: 54px 82px minmax(0, 1fr);
  }

  .top-movie-poster {
    width: 82px;
    height: 132px;
  }

  .top-movie-copy {
    padding: 16px;
  }

  .top-movie-copy h3 {
    font-size: 27px;
  }

  .top-movie-score {
    grid-column: 1 / 4;
    min-height: 74px;
    border-top: 1px solid #3c4b69;
    border-left: 0;
  }

  .top-movie-score small {
    flex-basis: auto;
    margin-left: 14px;
  }
}

/* Home columns: shortcuts stay beneath Featured; the larger date pushes Events down. */
.home-main-column {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  gap: 12px;
}

.home-main-column > .feature {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.home-main-column > .home-route-grid {
  width: 100%;
  margin: 0;
}

@media (min-width: 901px) {
  .home-view {
    grid-template-rows: minmax(0, 1fr);
  }

  .home-view .home-grid,
  .home-view .home-main-column,
  .home-view .side {
    min-height: 0;
    height: 100%;
  }

  .home-view .side {
    grid-template-rows: minmax(176px, .48fr) minmax(300px, 1.52fr);
    gap: 12px;
  }

  .home-view .home-side-date {
    grid-template-columns: 96px minmax(0, 1fr) minmax(160px, .72fr) 22px !important;
    min-height: 176px !important;
    padding: 12px !important;
  }

  .home-view .home-side-date .home-date-poster {
    min-width: 92px;
  }
}

/* Calendar page: stable form, full month grid, and readable screening cards. */
.dates-view .screening-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(155px, .85fr) 125px minmax(210px, 1fr) 175px;
  align-items: end;
  width: 100%;
  margin: 20px 0;
  padding: 20px;
  gap: 14px;
}

.dates-view .screening-form label {
  min-width: 0;
}

.dates-view .screening-form label span {
  margin-bottom: 9px;
  font-size: 11px;
}

.dates-view .screening-form input,
.dates-view .screening-form select,
.dates-view .screening-submit {
  width: 100%;
  height: 50px;
  min-width: 0;
}

.dates-view .calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: stretch;
  width: 100%;
  gap: 18px;
}

.dates-view .calendar-panel {
  min-width: 0;
  overflow: hidden;
  border-color: #455676;
}

.dates-view .calendar-header {
  grid-template-columns: 48px minmax(0, 1fr) auto 48px;
  min-width: 0;
  padding: 17px 19px;
}

.dates-view .calendar-header h3 {
  font-size: 31px;
}

.dates-view .weekday-row,
.dates-view .calendar-grid {
  min-width: 0;
}

.dates-view .weekday-row span {
  padding: 12px 6px;
  color: #9ca7bb;
  font-size: 10px;
  font-weight: 700;
}

.dates-view .calendar-day {
  height: 112px;
  padding: 10px;
}

.dates-view .calendar-day > span {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
}

.dates-view .calendar-day i {
  padding: 5px 6px;
  font-size: 9px;
  line-height: 1.25;
}

.dates-view .upcoming {
  display: flex;
  min-width: 0;
  padding: 0;
  flex-direction: column;
  overflow: hidden;
  border-color: var(--aqua);
  background: #11142e;
}

.dates-view .upcoming > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 18px 20px;
  border-bottom: 1px solid #31506b;
}

.dates-view .upcoming > header > strong {
  color: var(--aqua);
  font: 700 32px/1 Rajdhani;
}

.dates-view .upcoming-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 7px 18px 14px;
}

.dates-view .upcoming-list > article {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  min-height: 96px;
  padding: 14px 0;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.dates-view .upcoming-list > article > img,
.dates-view .upcoming-poster-empty {
  grid-row: 1;
  width: 56px;
  height: 76px;
  object-fit: cover;
  background: #0b1020;
}

.dates-view .upcoming-poster-empty {
  display: grid;
  place-items: center;
  color: var(--aqua);
}

.dates-view .upcoming-list article > div {
  min-width: 0;
  padding-right: 55px;
}

.dates-view .upcoming-list time {
  color: var(--pink);
  font-size: 9px;
  letter-spacing: .05em;
}

.dates-view .upcoming-list strong {
  margin: 7px 0 4px;
  overflow: hidden;
  font-size: 21px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dates-view .upcoming-list small {
  padding: 0;
  color: #b4b2c0;
  font-size: 10px;
}

.dates-view .upcoming-list .mini-button {
  position: absolute;
  right: 0;
  bottom: 14px;
  padding: 6px 7px;
  font-size: 8px !important;
}

.dates-view .upcoming-list > article.upcoming-club-event {
  background: linear-gradient(90deg, #d01d7712, transparent 72%);
}

.dates-view .upcoming-list > article.upcoming-club-event > img,
.dates-view .upcoming-list > article.upcoming-club-event > .upcoming-poster-empty {
  border: 1px solid #8d3c78;
}

.dates-view .upcoming-list > article.upcoming-club-event time,
.dates-view .upcoming-list > article.upcoming-club-event .mini-button {
  color: var(--pink);
  border-color: var(--pink);
}

@media (max-width: 1250px) {
  .dates-view .screening-form {
    grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .8fr) 120px;
  }

  .dates-view .screening-location {
    grid-column: 1 / 3;
  }

  .dates-view .screening-submit {
    grid-column: 3;
  }

  .dates-view .calendar-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

@media (max-width: 980px) {
  .dates-view .calendar-layout {
    grid-template-columns: 1fr;
  }

  .dates-view .upcoming {
    min-height: 260px;
  }
}

@media (max-width: 700px) {
  .dates-view .screening-form {
    grid-template-columns: 1fr 1fr;
    padding: 15px;
  }

  .dates-view .screening-movie,
  .dates-view .screening-location,
  .dates-view .screening-submit {
    grid-column: 1 / 3;
  }

  .dates-view .calendar-panel {
    overflow-x: auto;
  }

  .dates-view .calendar-header,
  .dates-view .weekday-row,
  .dates-view .calendar-grid {
    min-width: 650px;
  }

  .dates-view .calendar-day {
    height: 92px;
  }
}

/* Final home date card: one continuous row with balanced, non-overlapping zones. */
@media (min-width: 701px) {
  .home-view .home-side-date {
    position: relative;
    display: grid !important;
    grid-template-columns: 118px minmax(150px, 1fr) 170px 42px !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden;
    background: #11152e;
  }

  .home-view .home-side-date .home-date-poster {
    grid-column: 1 !important;
    width: 118px;
    min-width: 0;
    height: 100%;
    border: 0;
    border-right: 1px solid #3f4c6a;
    background: #0a0e1e;
  }

  .home-view .home-side-date .home-date-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .home-view .home-side-date .home-date-movie {
    grid-column: 2 !important;
    justify-content: center;
    padding: 20px 22px;
    border: 0;
    background: #12162f;
  }

  .home-view .home-side-date .home-date-movie small {
    margin-bottom: 8px;
    color: var(--yellow);
    font-size: 9px !important;
  }

  .home-view .home-side-date .home-date-movie strong {
    margin: 0;
    font-size: 28px;
    line-height: 1;
  }

  .home-view .home-side-date .home-date-movie em {
    margin-top: 10px;
    color: #c6c4cf;
    font-size: 12px;
    line-height: 1.25;
  }

  .home-view .home-side-date .home-date-day {
    grid-column: 3 !important;
    align-items: flex-start;
    justify-content: center;
    padding: 18px 20px;
    border: 0;
    border-left: 1px solid #766a3a;
    background: linear-gradient(180deg, #242038, #17182f);
  }

  .home-view .home-side-date .home-date-day small {
    margin-bottom: 9px;
    color: var(--yellow);
    font-size: 9px !important;
  }

  .home-view .home-side-date .home-date-day strong b {
    font-size: 13px;
    line-height: 1;
  }

  .home-view .home-side-date .home-date-day strong span {
    margin-top: 4px;
    font-size: 29px;
    line-height: .85;
  }

  .home-view .home-side-date .home-date-day em {
    margin-top: 12px;
    font-size: 17px;
  }

  .home-view .home-side-date .home-date-arrow {
    grid-column: 4 !important;
    display: grid;
    place-items: center;
    width: 42px;
    height: 100%;
    border-left: 1px solid #31506b;
    background: #111831;
    color: var(--aqua);
    font-size: 22px;
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .home-view .home-side-date {
    grid-template-columns: 92px minmax(125px, 1fr) 145px 34px !important;
  }

  .home-view .home-side-date .home-date-poster {
    width: 92px;
  }

  .home-view .home-side-date .home-date-movie,
  .home-view .home-side-date .home-date-day {
    padding: 14px;
  }

  .home-view .home-side-date .home-date-movie strong {
    font-size: 23px;
  }

  .home-view .home-side-date .home-date-day strong span {
    font-size: 25px;
  }

  .home-view .home-side-date .home-date-arrow {
    width: 34px;
  }
}

/* Seven-day calendar. */
.dates-view .weekly-calendar-panel {
  min-width: 0;
  overflow-x: auto;
}

.dates-view .weekly-calendar-header,
.dates-view .week-grid {
  min-width: 850px;
}

.dates-view .weekly-calendar-header h3 {
  font-size: 27px;
  letter-spacing: .025em;
}

.dates-view .week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-height: 525px;
}

.dates-view .week-day-column {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 525px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-right: 1px solid var(--line);
  background: #111630;
  color: var(--ink);
  flex-direction: column;
  text-align: left;
  cursor: pointer;
  transition: background .16s, box-shadow .16s;
}

.dates-view .week-day-column:last-child {
  border-right: 0;
}

.dates-view .week-day-column:hover {
  z-index: 1;
  background: #182040;
  box-shadow: inset 0 0 0 1px var(--aqua);
}

.dates-view .week-day-column > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  min-height: 91px;
  padding: 15px 13px 13px;
  border-bottom: 1px solid #35415f;
  background: #0f142b;
}

.dates-view .week-day-column > header span {
  color: var(--pink);
  font-size: 10px;
  letter-spacing: .14em;
}

.dates-view .week-day-column > header strong {
  grid-column: 1;
  grid-row: 2;
  margin-top: 3px;
  font: 700 36px/.9 Rajdhani;
}

.dates-view .week-day-column > header small {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: end;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .1em;
}

.dates-view .week-day-column.today > header {
  background: #2b1b39;
  box-shadow: inset 0 3px 0 var(--pink);
}

.dates-view .week-day-column.today > header strong,
.dates-view .week-day-column.today > header small {
  color: var(--lime);
}

.dates-view .week-day-events {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 11px;
  gap: 10px;
  overflow-y: auto;
  flex-direction: column;
}

.dates-view .week-day-events > article {
  display: flex;
  padding-bottom: 11px;
  overflow: hidden;
  border-bottom: 1px solid #35415f;
  flex-direction: column;
}

.dates-view .week-day-events > article.week-club-event {
  padding: 9px;
  border: 1px solid #9b4c8d;
  border-left: 3px solid var(--pink);
  background: linear-gradient(145deg, #35152f, #171934);
}

.dates-view .week-day-events > article.week-club-event time {
  color: var(--pink);
  letter-spacing: .09em;
}

.dates-view .week-day-events > article.week-club-event small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.dates-view .week-day-events img {
  width: 100%;
  height: 126px;
  margin-bottom: 10px;
  object-fit: cover;
  object-position: center 22%;
  background: #090d1c;
}

.dates-view .week-day-events time,
.dates-view .week-day-events strong,
.dates-view .week-day-events small {
  display: block;
}

.dates-view .week-day-events time {
  color: var(--red);
  font-size: 11px;
  font-weight: 700;
}

.dates-view .week-day-events strong {
  margin-top: 6px;
  font: 700 18px/1.05 Rajdhani;
  overflow-wrap: anywhere;
}

.dates-view .week-day-events small {
  margin-top: 5px;
  color: #aaa8b6;
  font-size: 9px;
  line-height: 1.35;
}

.dates-view .week-empty {
  display: grid;
  flex: 1;
  place-items: center;
  color: #57617a;
  font-size: 9px;
  letter-spacing: .1em;
  text-align: center;
}

.dates-view .week-day-column > i {
  display: block;
  padding: 10px 7px;
  border-top: 1px solid #35415f;
  color: #69758d;
  font-size: 8px;
  font-style: normal;
  letter-spacing: .08em;
  text-align: center;
}

.dates-view .week-day-column.has-screening > i {
  color: var(--aqua);
}

@media (max-width: 1200px) {
  .dates-view .weekly-layout {
    grid-template-columns: 1fr;
  }

  .dates-view .weekly-layout .upcoming {
    min-height: 280px;
  }
}

@media (max-width: 700px) {
  .dates-view .weekly-calendar-header,
  .dates-view .week-grid {
    min-width: 770px;
  }

  .dates-view .week-grid,
  .dates-view .week-day-column {
    min-height: 440px;
  }

  .dates-view .week-day-events img {
    height: 100px;
  }
}

/* Shared profiles: equal members, public stats, Abdullah-only approvals. */
.profile-view .shared-profile-hero {
  grid-template-columns: minmax(300px, .65fr) minmax(0, 1.35fr);
  align-items: stretch;
}

.profile-view .shared-profile-hero .identity {
  min-height: 190px;
  background: linear-gradient(130deg, #241734, #151a38);
}

.profile-view .shared-profile-hero .identity p {
  margin: 4px 0 0;
  font-size: 10px;
  letter-spacing: .1em;
}

.profile-view .shared-profile-stats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  margin: 0;
  gap: 0;
  padding: 22px 14px;
}

.profile-view .shared-profile-stats > div {
  min-width: 0;
  padding: 15px 12px;
  border-right: 1px solid var(--line);
  text-align: center;
}

.profile-view .shared-profile-stats > div:last-child {
  border-right: 0;
}

.profile-view .shared-profile-stats strong {
  color: var(--lime);
  font-size: 37px;
}

.profile-view .shared-profile-stats small {
  display: block;
  margin-top: 5px;
  font-size: 9px;
}

.shared-members .section-title,
.pending-profiles .section-title {
  margin-top: 26px;
}

.member-directory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.member-profile-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 88px;
  padding: 16px;
  gap: 13px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.member-profile-card:hover,
.member-profile-card.selected {
  border-color: var(--aqua);
  background: #3499b410;
}

.member-profile-card.selected {
  box-shadow: inset 3px 0 var(--aqua);
}

.member-profile-card .member-avatar {
  width: 52px;
  height: 52px;
}

.member-profile-card span,
.member-profile-card strong,
.member-profile-card small {
  display: block;
  min-width: 0;
}

.member-profile-card strong {
  overflow: hidden;
  font: 700 23px/1 Rajdhani;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-profile-card small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 9px;
}

.member-profile-card > b {
  color: var(--pink);
  font-size: 9px;
}

.pending-profile-list {
  padding: 0 20px;
  border-color: var(--aqua);
}

.pending-profile-list > article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  align-items: center;
  min-height: 82px;
  gap: 13px;
  border-bottom: 1px solid var(--line);
}

.pending-profile-list > article:last-child {
  border-bottom: 0;
}

.pending-profile-list strong,
.pending-profile-list small {
  display: block;
}

.pending-profile-list strong {
  font: 700 22px Rajdhani;
}

.pending-profile-list small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.pending-profile-list .approve-profile {
  border-color: var(--lime);
  color: var(--lime);
}

.pending-profile-list .reject-profile {
  border-color: var(--red);
  color: var(--red);
}

.profile-activity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
  gap: 18px;
}

.member-watched,
.member-reviews {
  min-height: 250px;
  padding: 22px;
}

.member-watched > p,
.member-reviews > p {
  margin-top: 38px;
  color: var(--muted);
  font-size: 12px;
}

.member-watched > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 17px;
  gap: 10px;
}

.member-watched > div > button {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0d1228;
  color: var(--ink);
  cursor: pointer;
}

.member-watched img {
  display: block;
  width: 100%;
  height: 112px;
  object-fit: cover;
}

.member-watched button span {
  display: block;
  padding: 8px;
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-reviews > button {
  display: block;
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.member-reviews > button > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.member-reviews > button strong {
  font: 700 20px Rajdhani;
}

.member-reviews > button small {
  color: var(--lime);
}

.member-reviews > button p {
  display: -webkit-box;
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.auth-create-profile {
  width: 100%;
  margin-top: 14px;
  border-color: var(--aqua);
  color: var(--aqua);
}

.pending-login-note {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid #766a3a;
  background: #d1b94f0d;
  color: var(--yellow);
  font-size: 9px;
  letter-spacing: .08em;
  text-align: center;
}

@media (max-width: 1100px) {
  .profile-view .shared-profile-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-view .shared-profile-stats > div:nth-child(3) {
    border-right: 0;
  }

  .member-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 750px) {
  .profile-view .shared-profile-hero,
  .profile-activity-grid,
  .member-directory {
    grid-template-columns: 1fr;
  }

  .pending-profile-list > article {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 13px 0;
  }

  .pending-profile-list .mini-button {
    width: 100%;
  }

  .member-watched > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Explicit tier colors prevent the old nth-child palette from shifting rows. */
.tier-board .tier-rank-s {
  --tier-color: #df5a65;
  --tier-soft: #df5a6518;
}

.tier-board .tier-rank-a {
  --tier-color: #d8a84f;
  --tier-soft: #d8a84f18;
}

.tier-board .tier-rank-b {
  --tier-color: #78ad63;
  --tier-soft: #78ad6318;
}

.tier-board .tier-rank-c {
  --tier-color: #3499b4;
  --tier-soft: #3499b418;
}

.tier-board .tier-rank-f {
  --tier-color: #9366bd;
  --tier-soft: #9366bd1c;
}

.tier-board .interactive-tier {
  border-color: color-mix(in srgb, var(--tier-color) 55%, #27314c) !important;
  background: linear-gradient(90deg, var(--tier-soft), #121731 48%) !important;
}

.tier-board .interactive-tier > b {
  background: var(--tier-color) !important;
  color: #0d1020 !important;
  text-shadow: none;
}

.tier-board .interactive-tier > span {
  color: #9ca6b8;
}

.tier-board .interactive-tier i {
  border-color: var(--tier-color) !important;
  background: var(--tier-soft) !important;
  color: #f0edf3 !important;
}

.tier-board .interactive-tier .tier-movie-art {
  width: 58px;
  height: calc(100% - 4px);
  max-height: 82px;
  padding: 0;
  overflow: hidden;
  flex: 0 0 58px;
}

.tier-board .tier-movie-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tier-board .tier-movie-fallback {
  display: grid;
  min-height: 58px;
  place-items: center;
}

.tier-board .interactive-tier:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--tier-color) 22%, transparent), #18203d 55%) !important;
  box-shadow: inset 0 0 0 1px var(--tier-color) !important;
}

.tier-picker .tier-value-s small { color: #df5a65; }
.tier-picker .tier-value-a small { color: #d8a84f; }
.tier-picker .tier-value-b small { color: #78ad63; }
.tier-picker .tier-value-c small { color: #3499b4; }
.tier-picker .tier-value-f small { color: #a981ca; }

.tier-picker .tier-value-s.selected { border-color: #df5a65; box-shadow: inset 3px 0 #df5a65; }
.tier-picker .tier-value-a.selected { border-color: #d8a84f; box-shadow: inset 3px 0 #d8a84f; }
.tier-picker .tier-value-b.selected { border-color: #78ad63; box-shadow: inset 3px 0 #78ad63; }
.tier-picker .tier-value-c.selected { border-color: #3499b4; box-shadow: inset 3px 0 #3499b4; }
.tier-picker .tier-value-f.selected { border-color: #9366bd; box-shadow: inset 3px 0 #9366bd; }
.tier-picker .tier-value-unplaced.selected { border-color: #7c879d; box-shadow: inset 3px 0 #7c879d; }