/* OMILI WEB v0.9.4 — AUTHORITATIVE STATIC STYLESHEET */
/* Served directly from /public to avoid Next/Turbopack CSS pipeline regressions. */

@font-face {
  font-family: 'Omili League Gothic';
  src: url('/fonts/LeagueGothic-Variable.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #000000;
  --card: #070707;
  --card-2: #0d0d0d;
  --border: #292929;
  --white: #ffffff;
  --muted: #9a9a9f;
  --red: #ff1024;
  --purple: #8b00ff;
  --blue: #2454ff;
  --yellow: #ffc400;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #000;
  color: #fff;
}

body {
  font-family: var(--omili-body-font), Arial, Helvetica, sans-serif;
}

button,
a {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

.omili-logo,
.section-title,
.feature-grid h2,
.reward-line,
.primary-yellow,
.side-button,
.join-show,
.hot-take-main,
.eyebrow-row,
.short-copy h3,
.upcoming-cta {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
}

/* APP SHELL */
.app-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 0, 36, 0.04), transparent 30%),
    #000;
  padding-bottom: 88px;
}

.phone-content {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 16px 18px 30px;
}

/* HEADER */
.top-header {
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.circle-button {
  justify-self: start;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #282828;
  background: #080808;
  color: #e8e8e8;
  font-size: 21px;
}

.omili-logo {
  font-size: 37px;
  line-height: 1;
  font-weight: 950;
  font-style: italic;
  letter-spacing: -2px;
  transform: skewX(-5deg);
}

.coin-balance {
  justify-self: end;
  border: 1px solid #252525;
  background: #080808;
  color: white;
  min-width: 104px;
  height: 43px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
}

.coin-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  background: radial-gradient(circle, #ffe368, #ff9d00);
  color: #7a4800;
  border: 2px solid #ffcf31;
}

.plus {
  font-size: 22px;
  color: #adadad;
}

/* FILTERS */
.club-filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0 9px;
  scrollbar-width: none;
}

.club-filter-row::-webkit-scrollbar,
.score-row::-webkit-scrollbar,
.show-row::-webkit-scrollbar,
.diagonal-shorts-row::-webkit-scrollbar,
.top-takes-row::-webkit-scrollbar,
.past-debate-row::-webkit-scrollbar {
  display: none;
}

.club-filter {
  flex: none;
  height: 38px;
  padding: 0 17px;
  border: 1px solid #303030;
  border-radius: 22px;
  background: #070707;
  color: #ddd;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.club-filter img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.club-filter.active {
  border-color: #e5001e;
  background: linear-gradient(180deg, #230003, #080808);
  box-shadow: 0 0 16px rgba(255, 0, 28, 0.18);
}

/* COMMON SECTIONS */
.section {
  margin-top: 12px;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 34px;
  margin-bottom: 8px;
}

.section-heading > div:first-child {
  flex: 1;
}

.section-title {
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.5px;
  font-size: 15px;
}

.purple-title {
  color: #e9d7ff;
}

.live-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 7px;
  border-radius: 50%;
  background: red;
  box-shadow: 0 0 9px rgba(255, 0, 0, 0.7);
}

.see-all {
  border: 0;
  background: transparent;
  color: #1ca1ff;
  white-space: nowrap;
}

/* SCORES */
.score-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 134px;
  overflow-x: auto;
  gap: 8px;
  scrollbar-width: none;
}

.score-card {
  height: 103px;
  border: 1px solid #313131;
  border-radius: 9px;
  background: linear-gradient(180deg, #090909, #050505);
  padding: 10px;
}

.score-top,
.score-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.score-top {
  font-size: 12px;
  color: #ddd;
}

.score-minute {
  color: var(--red);
}

.score-middle {
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.score-middle strong {
  font-size: 20px;
}

.score-bottom {
  font-size: 12px;
  color: #cfcfcf;
}

.team-crest {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* FEATURE CARDS */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 15px;
}

.neon-card {
  padding: 1px;
  border-radius: 11px;
  background: linear-gradient(
    110deg,
    #ff001f 0%,
    #ff001f 20%,
    #c0005b 45%,
    #5900ff 75%,
    #214eff 100%
  );
  box-shadow:
    0 0 16px rgba(255, 0, 32, 0.06),
    0 0 18px rgba(72, 0, 255, 0.05);
}

.red-card {
  background: linear-gradient(120deg, #ff001f, #ff0066 65%, #6900ff);
}

.card-inner {
  height: 100%;
  border-radius: 10px;
  background:
    radial-gradient(circle at 90% 0%, rgba(68, 0, 255, 0.08), transparent 38%),
    #050505;
  padding: 13px;
}

.eyebrow-row {
  min-height: 25px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  font-style: italic;
  font-size: 12px;
  white-space: nowrap;
}

.eyebrow-row > span:first-child {
  flex: 1;
}

.timer-pill,
.new-pill {
  border: 1px solid #4a4a4a;
  border-radius: 13px;
  padding: 4px 7px;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
}

.new-pill {
  border-color: #c29f2c;
}

.feature-grid h2 {
  font-size: clamp(19px, 4vw, 30px);
  line-height: 1.03;
  margin: 14px 0 9px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.8px;
}

.feature-grid p {
  color: #bbb;
  font-size: 12px;
  margin: 0 0 9px;
}

.hot-takes {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #bfbfbf;
  font-size: 11px;
}

.green-ring {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #42ff4d;
  box-shadow: 0 0 6px rgba(66, 255, 77, 0.5);
}

.mini-faces {
  letter-spacing: -6px;
  margin-left: 3px;
  margin-right: 4px;
}

.reward-line {
  margin-top: 13px;
  font-size: 16px;
  font-weight: 950;
  color: #ffd32e;
  font-style: italic;
}

.reward-sub {
  margin-top: 3px;
  font-size: 11px;
  color: #d8d8d8;
}

.primary-yellow {
  border: 0;
  height: 43px;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffd62b, #ffa800);
  color: #070707;
  font-size: 15px;
  font-weight: 950;
  font-style: italic;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 0 15px rgba(255, 175, 0, 0.17);
}

.debate-card .primary-yellow {
  width: 100%;
  margin-top: 10px;
}

.debate-link-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.debate-cta-span {
  width: 100%;
  margin-top: 10px;
  display: grid;
  place-items: center;
}

/* TAKE BATTLE */
.battle-people {
  display: grid;
  grid-template-columns: 1fr 32px 1fr;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
}

.battle-person {
  min-width: 0;
  text-align: center;
}

.person-circle {
  position: relative;
  width: 70px;
  height: 70px;
  max-width: 100%;
  margin: auto;
  border-radius: 50%;
  overflow: hidden;
}

.red-person {
  border: 1px solid red;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
  background: radial-gradient(circle, #380000, #090000);
}

.purple-person {
  border: 1px solid #9400ff;
  box-shadow: 0 0 20px rgba(148, 0, 255, 0.45);
  background: radial-gradient(circle, #260038, #080008);
}

.battle-photo {
  object-fit: cover;
}

.vs {
  text-align: center;
  color: #dc1176;
  font-size: 22px;
  font-weight: 950;
  font-style: italic;
}

.side-button {
  width: 100%;
  height: 31px;
  border-radius: 18px;
  background: #080808;
  color: white;
  margin: 7px 0 5px;
  font-size: 10px;
  font-weight: 900;
  font-style: italic;
}

.red-side {
  border: 1px solid #ff001f;
}

.purple-side {
  border: 1px solid #8e00ff;
  background: linear-gradient(180deg, #5f009e, #240042);
}

.battle-person strong {
  display: block;
  font-size: 9px;
  color: #d0d0d0;
  white-space: nowrap;
}

.take-deck-card {
  touch-action: pan-y;
  transition: transform .22s ease, opacity .22s ease, filter .22s ease;
  will-change: transform;
}

.take-card-out-left {
  transform: translateX(-135%) rotate(-10deg) !important;
  opacity: 0;
}

.take-card-out-right {
  transform: translateX(135%) rotate(10deg) !important;
  opacity: 0;
}

.take-deck-header .take-view-all {
  color: #29a7ff;
  text-decoration: none;
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
}

.take-deck-instruction {
  min-height: 1.2em;
}

.stats-locked {
  opacity: .55;
}

.chosen-side .person-circle {
  transform: scale(1.05);
  filter: brightness(1.12);
}

.chosen-side .side-button {
  box-shadow: 0 0 16px rgba(255, 0, 99, .28);
}

.swipe-hints {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  color: #64646c;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.swipe-hints span.active {
  color: #fff;
}

.vote-confirmation {
  margin-top: 5px;
  text-align: center;
  color: #51ff80;
  font-size: 9px;
  font-weight: 900;
}

.next-take-battle {
  display: block;
  margin: 5px auto 0;
  border: 0;
  background: transparent;
  color: #a9a9af;
  font-size: 9px;
  font-weight: 900;
}

/* TABS */
.tabs {
  display: flex;
  border: 1px solid #202020;
  border-radius: 17px;
  padding: 1px;
  overflow: hidden;
}

.tabs button {
  border: 0;
  background: transparent;
  color: #aaa;
  height: 27px;
  border-radius: 15px;
  padding: 0 22px;
  font-size: 11px;
}

.tabs button.selected {
  color: white;
  border: 1px solid #a0002b;
  background: linear-gradient(180deg, #300007, #090909);
}

/* LIVE + UPCOMING SHOW CARDS */
.show-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 168px;
  overflow-x: auto;
  gap: 8px;
  scrollbar-width: none;
  align-items: stretch;
}

.show-card {
  border: 1px solid #303030;
  border-radius: 8px;
  overflow: hidden;
  background: #060606;
}

.aligned-show-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.show-image {
  position: relative;
  height: 128px;
  background: #090909;
  overflow: hidden;
}

.show-photo {
  object-fit: cover;
  z-index: 0;
}

.show-stats {
  position: absolute;
  z-index: 2;
  top: 6px;
  left: 6px;
  right: 6px;
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 9px;
}

.live-badge {
  background: #e80018;
  padding: 4px 6px;
  border-radius: 4px;
  font-weight: 800;
}

.show-card-body {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

.show-card h3 {
  margin: 8px 8px 5px;
  min-height: 2.1em;
  font-size: 14px;
  line-height: 1.06;
  font-style: italic;
  font-weight: 850;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.host-line {
  margin: 0 8px 7px;
  color: #c8c8c8;
  font-size: 9px;
}

.aligned-show-card .host-line {
  margin-top: auto;
}

.verified {
  display: inline-grid;
  place-items: center;
  width: 12px;
  height: 12px;
  margin-left: 2px;
  border-radius: 50%;
  background: #7b22ff;
  color: white;
}

.join-show {
  border: 0;
  height: 36px;
  width: calc(100% - 12px);
  margin: 0 6px 6px;
  border-radius: 5px;
  background: linear-gradient(90deg, #d90022, #fd0035 45%, #2338f3);
  color: white;
  font-weight: 900;
  font-style: italic;
  font-size: 12px;
}

.upcoming-section {
  margin-bottom: 10px;
}

.schedule-pill {
  position: absolute;
  z-index: 3;
  top: 6px;
  left: 6px;
  max-width: calc(100% - 12px);
  padding: 4px 6px;
  border-radius: 5px;
  background: rgba(0,0,0,.78);
  border: 1px solid rgba(255,255,255,.22);
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}

.upcoming-cta {
  border: 1px solid #343434;
  height: 36px;
  width: calc(100% - 12px);
  margin: 0 6px 6px;
  border-radius: 5px;
  background: #0d0d0d;
  color: white;
  font-weight: 900;
  font-style: italic;
  font-size: 11px;
}

/* DIAGONAL SHORTS */
.shorts-section {
  margin-top: 10px;
}

.diagonal-shorts-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 104px;
  gap: 4px;
  overflow-x: auto;
  padding: 2px 10px 5px 4px;
  scrollbar-width: none;
}

.diagonal-short-card {
  position: relative;
  height: 136px;
  transform: skewX(-7deg);
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #2e2e35;
  background: #080808;
  box-shadow: 0 0 12px rgba(255,0,80,.05);
}

.diagonal-short-media {
  position: absolute;
  inset: 0;
  transform: skewX(7deg) scale(1.10);
  overflow: hidden;
}

.diagonal-short-media > .short-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.diagonal-short-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(0,0,0,.86) 100%);
}

.short-profile {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 22px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 3px;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}

.short-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 1px solid #ffcf1d;
  flex: 0 0 auto;
}

.short-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.diagonal-short-views {
  position: absolute;
  z-index: 3;
  left: 8px;
  bottom: 7px;
  font-size: 10px;
  font-weight: 900;
}

/* BOTTOM NAV */
.bottom-nav {
  position: fixed;
  z-index: 50;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.74), rgba(0,0,0,0.98) 22%),
    #000;
  border-top: 1px solid #1d1d1d;
  display: grid;
  grid-template-columns: 1fr 1fr minmax(180px, 250px) 1fr 1fr;
  align-items: center;
  padding: 4px max(10px, calc((100vw - 760px) / 2));
}

.nav-item {
  position: relative;
  border: 0;
  background: transparent;
  color: #777;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.nav-item > span:first-child {
  font-size: 26px;
}

.nav-item small {
  font-size: 10px;
}

.active-nav {
  color: white;
}

.active-nav::after {
  content: "";
  position: absolute;
  bottom: -13px;
  width: 35px;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
}

.hot-take-main {
  width: min(100%, 235px);
  justify-self: center;
  border: 0;
  height: 50px;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffd42b, #ffaa00);
  color: #080808;
  font-weight: 950;
  font-style: italic;
  font-size: 15px;
  box-shadow: 0 0 15px rgba(255, 180, 0, 0.14);
}

.inbox-item i {
  position: absolute;
  top: 0;
  right: 22%;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  background: red;
  border-radius: 50%;
  color: white;
  font-size: 10px;
  font-style: normal;
}

.avatar-small {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #ffc400;
}

/* SECONDARY PAGES */
.secondary-page {
  min-height: 100vh;
  background: #000;
  color: #fff;
  padding: 12px 14px 90px;
  font-family: var(--omili-body-font), Arial, Helvetica, sans-serif;
}

.secondary-header {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  max-width: 860px;
  margin: 0 auto 16px;
}

.secondary-header > div:nth-child(2) {
  text-align: center;
}

.secondary-header h1 {
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-size: 24px;
}

.secondary-kicker {
  color: #aaa;
  font-size: 10px;
  font-weight: 800;
}

.back-circle,
.share-circle {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #2b2b2b;
  background: #0a0a0a;
  color: white;
  text-decoration: none;
  font-size: 18px;
}

.share-circle {
  justify-self: end;
}

.header-spacer {
  width: 38px;
}

/* TAKE BATTLES LIST */
.take-list-intro,
.take-list-grid {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.take-list-intro {
  margin-bottom: 14px;
}

.take-list-intro h2 {
  margin: 0 0 4px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 28px;
  font-style: italic;
}

.take-list-intro p {
  margin: 0;
  color: #9d9da4;
  font-size: 12px;
  line-height: 1.45;
}

.take-list-grid {
  display: grid;
  gap: 10px;
}

.take-list-card {
  border: 1px solid #2b2b30;
  border-radius: 14px;
  padding: 12px;
  background:
    radial-gradient(circle at 85% 0%, rgba(80,0,255,.10), transparent 34%),
    #070707;
}

.take-list-question {
  margin-bottom: 10px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 20px;
  font-weight: 900;
  font-style: italic;
}

.take-list-sides {
  display: grid;
  grid-template-columns: 1fr 32px 1fr;
  align-items: center;
  gap: 8px;
}

.take-list-side {
  min-width: 0;
  border: 1px solid #333;
  border-radius: 12px;
  background: #0b0b0b;
  color: #fff;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.take-list-side.left {
  border-color: #d90022;
}

.take-list-side.right {
  border-color: #7d00ff;
}

.take-list-side.selected {
  box-shadow: 0 0 18px rgba(113,0,255,.22);
}

.take-list-side:disabled {
  opacity: 1;
}

.take-list-image {
  width: 46px;
  height: 46px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
}

.take-list-image img {
  object-fit: cover;
}

.take-list-side strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-size: 12px;
}

.take-list-vs {
  text-align: center;
  color: #e00076;
  font-weight: 950;
  font-style: italic;
}

.take-locked-stats {
  margin-top: 10px;
  border-radius: 8px;
  padding: 10px;
  background: #0c0c0d;
  color: #8d8d94;
  font-size: 10px;
  text-align: center;
}

.take-unlocked-stats {
  margin-top: 11px;
}

.take-stat-labels {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 9px;
  font-weight: 800;
}

.take-stat-track {
  display: flex;
  height: 7px;
  overflow: hidden;
  margin: 6px 0;
  border-radius: 8px;
  background: #191919;
}

.take-stat-left {
  background: linear-gradient(90deg, #ff1024, #ff0064);
}

.take-stat-right {
  background: linear-gradient(90deg, #6d00ff, #174cff);
}

.take-vote-count {
  color: #777;
  font-size: 10px;
  text-align: center;
}

/* TODAY'S DEBATE PAGE */
.debate-page {
  max-width: 900px;
  margin: 0 auto;
}

.debate-header h1 {
  text-align: center;
  font-size: 21px;
}

.debate-hero {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border-radius: 16px;
  padding: 22px;
  border: 1px solid #ff0074;
  background:
    radial-gradient(circle at 80% 45%, rgba(255,0,0,.28), transparent 32%),
    radial-gradient(circle at 60% 100%, rgba(255,80,0,.18), transparent 38%),
    #080000;
}

.debate-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.72) 44%, rgba(0,0,0,.12) 100%);
  pointer-events: none;
}

.debate-hero-copy {
  position: relative;
  z-index: 5;
  width: 48%;
}

.debate-hero-copy h2 {
  margin: 22px 0 16px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-size: 40px;
  line-height: 1.15;
}

.debate-timer {
  display: inline-block;
  padding: 5px 8px;
  border-radius: 12px;
  background: rgba(0,0,0,.72);
  color: #ddd;
  font-size: 10px;
}

.debate-hot-count {
  margin-bottom: 18px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 18px;
  font-style: italic;
}

.debate-prize {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  color: #ffd51a;
  font-size: 21px;
  font-style: italic;
  font-weight: 900;
}

.debate-hero-copy > span:last-child {
  color: #d6d6d6;
  font-size: 10px;
}

.debate-hero-players {
  position: absolute;
  z-index: 2;
  inset: 0 0 0 40%;
}

.hero-player {
  position: absolute;
  bottom: -8px;
  width: 42%;
  height: 82%;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.65));
}

.hero-player img {
  object-fit: cover;
  object-position: top center;
}

.hero-player-one {
  left: 0;
  transform: scale(.88);
  opacity: .92;
}

.hero-player-two {
  left: 20%;
  z-index: 2;
}

.hero-player-three {
  left: 43%;
  transform: scale(1.05);
}

.debate-section {
  margin-top: 18px;
}

.debate-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.debate-section-heading h3 {
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-size: 17px;
}

.debate-section-heading button {
  border: 0;
  background: transparent;
  color: #ddd;
  font-size: 10px;
}

.top-takes-row,
.past-debate-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 24%;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 3px;
}

.top-take-card {
  position: relative;
  min-height: 260px;
}

.top-take-image {
  position: relative;
  height: 225px;
  overflow: hidden;
  border-radius: 13px;
  border: 1px solid #444;
  transform: skewX(-4deg);
  background: #101010;
}

.top-take-image img {
  object-fit: cover;
  transform: skewX(4deg) scale(1.05);
}

.rank-1 .top-take-image {
  border-color: #ffb000;
  box-shadow: 0 0 13px rgba(255,170,0,.16);
}

.rank-2 .top-take-image {
  border-color: #7b17ff;
}

.rank-3 .top-take-image {
  border-color: #0075ff;
}

.rank-4 .top-take-image {
  border-color: #ff006c;
}

.rank-badge {
  position: absolute;
  z-index: 4;
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #080808;
  border: 1px solid #fff;
  font-weight: 900;
}

.top-take-overlay {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 39px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
}

.top-take-overlay strong {
  color: #ffdf18;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 13px;
  font-style: italic;
}

.top-take-name {
  margin-top: 7px;
  color: #d7d7da;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
}

.debate-stats-grid {
  display: grid;
  grid-template-columns: .8fr 1.4fr 1.2fr;
  gap: 10px;
}

.debate-stat-card {
  min-height: 170px;
  border-radius: 12px;
  border: 1px solid #28282c;
  background: #0a0a0a;
  padding: 16px;
}

.debate-stat-card > span {
  display: block;
  margin-bottom: 12px;
  color: #ddd;
  font-size: 11px;
}

.total-card > strong,
.engagement-card > strong {
  display: block;
  font-size: 36px;
  margin: 8px 0;
}

.debate-stat-card small {
  color: #888;
}

.fanbase-card ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fanbase-card li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid #1d1d1f;
  font-size: 10px;
}

.fanbase-card li b {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e4e4e4;
  color: #111;
}

.engagement-mini {
  margin-top: 18px;
  color: #bfbfc5;
  font-size: 10px;
}

.ai-summary-card {
  display: grid;
  grid-template-columns: 1.7fr .9fr;
  gap: 10px;
  border: 1px solid #26262b;
  border-radius: 14px;
  padding: 16px;
  background: #0a0a0a;
}

.ai-summary-card p {
  margin: 0;
  color: #e5e5e8;
  line-height: 1.6;
  font-size: 12px;
}

.most-liked-take {
  display: flex;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ff5400;
  border-radius: 11px;
  background: linear-gradient(120deg, rgba(255,80,0,.09), rgba(255,0,100,.04));
}

.most-liked-take img {
  object-fit: cover;
  border-radius: 8px;
}

.most-liked-take div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 9px;
}

.most-liked-take strong {
  color: #ffba19;
}

.most-liked-take small {
  color: #ff4f80;
}

.past-debate-card {
  min-height: 170px;
  border: 1px solid #2b2b2f;
  border-radius: 10px;
  overflow: hidden;
  background: #080808;
}

.past-debate-image {
  height: 105px;
  position: relative;
}

.past-debate-image img {
  object-fit: cover;
}

.past-debate-card h4 {
  margin: 7px 7px 4px;
  min-height: 2.2em;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-size: 12px;
  line-height: 1.05;
}

.past-debate-card > span {
  display: block;
  margin: 0 7px 8px;
  color: #aaa;
  font-size: 10px;
}

.floating-hot-take {
  position: fixed;
  z-index: 40;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(280px, 70vw);
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  background: linear-gradient(180deg, #ffd42b, #ffaa00);
  color: #080808;
  text-decoration: none;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-weight: 950;
  box-shadow: 0 0 22px rgba(255,170,0,.20);
}

/* MOBILE */
@media (max-width: 620px) {
  .app-shell {
    padding-bottom: 74px;
  }

  .phone-content {
    width: 100%;
    padding: 8px 10px 16px;
  }

  .top-header {
    height: 54px;
  }

  .circle-button {
    width: 36px;
    height: 36px;
    font-size: 17px;
  }

  .omili-logo {
    font-size: 30px;
    letter-spacing: -1.5px;
  }

  .coin-balance {
    min-width: 92px;
    height: 36px;
    font-size: 13px;
    gap: 6px;
  }

  .coin-icon {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .plus {
    font-size: 18px;
  }

  .club-filter-row {
    gap: 6px;
    padding: 5px 0 8px;
  }

  .club-filter {
    height: 31px;
    padding: 0 12px;
    font-size: 11px;
  }

  .club-filter img {
    width: 18px;
    height: 18px;
  }

  .section {
    margin-top: 7px;
  }

  .section-heading {
    min-height: 25px;
    margin-bottom: 5px;
    gap: 5px;
  }

  .section-title {
    font-size: 12px;
  }

  .see-all {
    font-size: 11px;
  }

  .live-dot {
    width: 8px;
    height: 8px;
    margin-right: 5px;
  }

  .score-row {
    grid-auto-columns: 98px;
    gap: 5px;
  }

  .score-card {
    height: 67px;
    padding: 6px;
    border-radius: 6px;
  }

  .score-top {
    font-size: 10px;
  }

  .score-middle {
    height: 31px;
  }

  .score-middle strong {
    font-size: 14px;
  }

  .score-bottom {
    font-size: 10px;
  }

  .team-crest {
    width: 21px;
    height: 21px;
  }

  .feature-grid {
    gap: 6px;
    margin-top: 8px;
  }

  .neon-card {
    border-radius: 8px;
  }

  .card-inner {
    border-radius: 7px;
    padding: 8px;
  }

  .feature-grid > .neon-card,
  .feature-grid > a.neon-card {
    height: 195px;
  }

  .eyebrow-row {
    min-height: 17px;
    font-size: 10px;
    gap: 3px;
  }

  .timer-pill,
  .new-pill {
    border-radius: 9px;
    padding: 2px 4px;
    font-size: 9px;
  }

  .feature-grid h2 {
    font-size: 17px;
    line-height: 0.98;
    margin: 8px 0 6px;
    letter-spacing: -0.5px;
  }

  .feature-grid p {
    font-size: 10px;
    margin-bottom: 5px;
  }

  .hot-takes {
    gap: 3px;
    font-size: 10px;
  }

  .green-ring {
    width: 9px;
    height: 9px;
  }

  .mini-faces {
    font-size: 10px;
  }

  .reward-line {
    margin-top: 7px;
    font-size: 11px;
  }

  .reward-sub {
    margin-top: 1px;
    font-size: 10px;
  }

  .debate-card .primary-yellow,
  .debate-cta-span {
    height: 29px;
    margin-top: 6px;
    font-size: 9px;
  }

  .battle-people {
    grid-template-columns: 1fr 22px 1fr;
    gap: 2px;
    margin-top: 4px;
  }

  .person-circle {
    width: 43px;
    height: 43px;
  }

  .vs {
    font-size: 17px;
  }

  .side-button {
    height: 23px;
    margin: 4px 0 2px;
    font-size: 10px;
  }

  .battle-person strong {
    font-size: 9px;
  }

  .take-deck-card .card-inner {
    padding: 8px;
  }

  .take-deck-card .battle-people {
    margin-top: 5px;
  }

  .take-deck-card h2 {
    margin-bottom: 4px;
  }

  .tabs {
    height: 23px;
  }

  .tabs button {
    height: 21px;
    padding: 0 12px;
    font-size: 10px;
  }

  .show-row {
    grid-auto-columns: 98px;
    gap: 5px;
  }

  .aligned-show-card {
    height: 157px;
  }

  .aligned-show-card .show-image {
    flex: 0 0 86px;
    height: 86px;
  }

  .show-stats {
    top: 4px;
    left: 4px;
    right: 4px;
    gap: 3px;
    font-size: 9px;
  }

  .live-badge {
    padding: 2px 3px;
    font-size: 9px;
  }

  .aligned-show-card h3 {
    margin: 4px 5px 2px;
    min-height: 18px;
    max-height: 18px;
    font-size: 9px;
    line-height: 1;
  }

  .aligned-show-card .host-line {
    min-height: 9px;
    margin: 0 5px 3px;
    font-size: 9px;
  }

  .verified {
    width: 8px;
    height: 8px;
    font-size: 9px;
  }

  .aligned-show-card .join-show,
  .aligned-show-card .upcoming-cta {
    flex: 0 0 22px;
    height: 22px;
    width: calc(100% - 8px);
    margin: 0 4px 4px;
    font-size: 10px;
  }

  .schedule-pill {
    top: 4px;
    left: 4px;
    max-width: calc(100% - 8px);
    padding: 3px 4px;
    font-size: 9px;
  }

  .diagonal-shorts-row {
    grid-auto-columns: 86px;
    gap: 3px;
  }

  .diagonal-short-card {
    height: 118px;
  }

  .short-profile {
    left: 5px;
    right: 5px;
    bottom: 20px;
    font-size: 9px;
  }

  .short-avatar {
    width: 16px;
    height: 16px;
  }

  .diagonal-short-views {
    left: 6px;
    bottom: 6px;
    font-size: 9px;
  }

  .bottom-nav {
    height: 72px;
    padding: 2px 7px;
    grid-template-columns: 1fr 1fr minmax(135px, 1.65fr) 1fr 1fr;
  }

  .nav-item {
    gap: 1px;
  }

  .nav-item > span:first-child {
    font-size: 20px;
  }

  .nav-item small {
    font-size: 10px;
  }

  .active-nav::after {
    bottom: -9px;
    width: 27px;
    height: 2px;
  }

  .hot-take-main {
    width: 145px;
    height: 38px;
    font-size: 9px;
  }

  .avatar-small {
    width: 24px;
    height: 24px;
  }

  .inbox-item i {
    width: 13px;
    height: 13px;
    font-size: 10px;
  }

  .secondary-page {
    padding: 10px 10px 82px;
  }

  .secondary-header {
    margin-bottom: 10px;
  }

  .secondary-header h1,
  .debate-header h1 {
    font-size: 18px;
  }

  .back-circle,
  .share-circle {
    width: 34px;
    height: 34px;
  }

  .take-list-question {
    font-size: 17px;
  }

  .take-list-side {
    padding: 6px;
  }

  .take-list-image {
    width: 38px;
    height: 38px;
  }

  .take-list-side strong {
    font-size: 9px;
  }

  .debate-hero {
    min-height: 244px;
    padding: 14px;
  }

  .debate-hero-copy {
    width: 58%;
  }

  .debate-hero-copy h2 {
    margin: 15px 0 10px;
    font-size: 27px;
    line-height: 1.08;
  }

  .debate-hot-count {
    margin-bottom: 10px;
    font-size: 13px;
  }

  .debate-prize {
    font-size: 15px;
  }

  .debate-hero-players {
    left: 43%;
  }

  .hero-player {
    width: 52%;
    height: 76%;
  }

  .hero-player-two {
    left: 16%;
  }

  .hero-player-three {
    left: 39%;
  }

  .top-takes-row,
  .past-debate-row {
    grid-auto-columns: 45%;
    gap: 7px;
  }

  .top-take-card {
    min-height: 190px;
  }

  .top-take-image {
    height: 160px;
  }

  .top-take-overlay {
    bottom: 34px;
  }

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

  .debate-stat-card {
    min-height: 0;
  }

  .ai-summary-card {
    grid-template-columns: 1fr;
  }
}


/* === OMILI V0.6 CREATOR + SHORTS EXPERIENCE === */
.creator-shorts-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 116px;
  gap: 3px;
  overflow-x: auto;
  padding: 2px 7px 5px 5px;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}
.creator-shorts-row::-webkit-scrollbar { display: none; }

.creator-short-card {
  position: relative;
  height: 165px;
  overflow: hidden;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  background: #090909;
  text-decoration: none;
  color: white;
  border: 1px solid transparent;
  filter: drop-shadow(0 0 7px rgba(0,0,0,.65));
}
.creator-short-card-0 { background: linear-gradient(#ffb400, #ff5b00); }
.creator-short-card-1 { background: linear-gradient(#811bff, #34007c); }
.creator-short-card-2 { background: linear-gradient(#0074ff, #001b70); }
.creator-short-card-3 { background: linear-gradient(#ff006b, #74002e); }

.creator-short-inner {
  position: absolute;
  inset: 1px;
  overflow: hidden;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  background: #050505;
}
.creator-short-photo {
  object-fit: cover;
  object-position: 50% 18%;
  transform: scale(1.06);
}
.creator-short-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.04) 30%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.92) 100%);
}
.creator-short-top {
  position: absolute;
  z-index: 3;
  top: 6px;
  left: 11px;
}
.creator-short-rank {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.76);
  border: 1px solid rgba(255,255,255,.82);
  font-size: 10px;
  font-weight: 900;
}
.creator-short-bottom {
  position: absolute;
  z-index: 3;
  left: 10px;
  right: 14px;
  bottom: 7px;
}
.creator-short-name {
  min-height: 1.1em;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 10px;
  font-style: italic;
  font-weight: 900;
}
.creator-short-name .verified {
  width: 8px;
  height: 8px;
  font-size: 9px;
  vertical-align: 1px;
}
.creator-short-views {
  font-size: 10px;
  font-weight: 900;
}

.creator-host {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 8px 7px;
  color: #cfcfd4;
  text-decoration: none;
  font-size: 9px;
  min-width: 0;
}
.creator-host > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.creator-host-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #ffbe00;
}
.creator-host-avatar img { object-fit: cover; }
.creator-host-compact { margin-top: auto; }

.creator-profile-page {
  width: min(100%, 720px);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 34px;
  background: #000;
  color: #fff;
}
.creator-profile-hero {
  position: relative;
  min-height: 690px;
  overflow: hidden;
  background: #0a0a0a;
}
.creator-profile-bg {
  object-fit: cover;
  object-position: center 10%;
}
.creator-profile-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.03) 45%, rgba(0,0,0,.16) 66%, rgba(0,0,0,.93) 100%);
}
.creator-back {
  position: absolute;
  z-index: 5;
  top: 20px;
  left: 20px;
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-radius: 9px;
  background: rgba(0,0,0,.48);
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(7px);
}
.creator-flag {
  position: absolute;
  z-index: 5;
  top: 88px;
  left: 22px;
  font-size: 50px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.creator-hero-copy {
  position: absolute;
  z-index: 5;
  left: 30px;
  right: 30px;
  bottom: 30px;
  padding-top: 80px;
}
.creator-hero-copy h1 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 31px;
  line-height: 1;
  font-style: italic;
  letter-spacing: .3px;
}
.creator-hero-copy p {
  margin: 0;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.4;
}
.creator-verified-large {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #7700ff;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
}
.creator-action-row {
  display: grid;
  grid-template-columns: 1fr 82px 82px;
  gap: 12px;
  padding: 16px 30px 10px;
}
.creator-follow-button,
.creator-square-action {
  height: 62px;
  border: 1px solid #33353c;
  border-radius: 10px;
  background: #0b0b0d;
  color: white;
  font-weight: 800;
}
.creator-follow-button { font-size: 19px; }
.creator-follow-button:not(.following) {
  background: linear-gradient(100deg, #ff162b, #9e00ff 53%, #2f6cff);
  border-color: transparent;
}
.creator-square-action { font-size: 25px; }

.creator-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 20px 22px 24px;
  gap: 8px;
  text-align: center;
}
.creator-stats div { min-width: 0; }
.creator-stats strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 26px;
  font-style: italic;
}
.creator-stats span {
  display: block;
  color: #f0f0f2;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 13px;
  line-height: 1.15;
  font-style: italic;
}
.creator-content-section { padding: 8px 30px 30px; }
.creator-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #1e1e22;
}
.creator-tabs button {
  position: relative;
  height: 48px;
  border: 0;
  background: transparent;
  color: #aaaab0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 17px;
  font-style: italic;
  font-weight: 900;
}
.creator-tabs button.active { color: white; }
.creator-tabs button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, #f22a2a, #a600ff, #2874ff);
}
.creator-recorded-list {
  display: grid;
  gap: 10px;
  padding-top: 18px;
}
.creator-recorded-card {
  min-height: 88px;
  display: grid;
  grid-template-columns: 46% 1fr;
  gap: 14px;
  align-items: center;
}
.creator-recorded-thumb {
  position: relative;
  height: 86px;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #2a2a2f;
}
.creator-recorded-thumb img { object-fit: cover; }
.creator-recorded-card h2 {
  margin: 0 0 6px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 18px;
  line-height: 1.1;
  font-style: italic;
}
.creator-recorded-card span {
  color: #77777e;
  font-size: 9px;
}

.bottom-nav {
  grid-template-columns: 1fr 1fr minmax(125px, 1.45fr) 1fr 1fr;
}

@media (max-width: 620px) {
  .creator-shorts-row {
    grid-auto-columns: 88px;
    gap: 2px;
    padding-left: 3px;
  }
  .creator-short-card { height: 129px; }
  .creator-short-top { top: 4px; left: 8px; }
  .creator-short-rank {
    width: 16px;
    height: 16px;
    font-size: 9px;
  }
  .creator-short-bottom {
    left: 8px;
    right: 10px;
    bottom: 5px;
  }
  .creator-short-name {
    margin-bottom: 3px;
    font-size: 9px;
  }
  .creator-short-views { font-size: 10px; }

  .creator-host {
    gap: 3px;
    margin: 0 5px 3px;
    font-size: 9px;
  }
  .creator-host-avatar {
    width: 13px;
    height: 13px;
  }

  .creator-profile-hero { min-height: 610px; }
  .creator-back {
    top: 14px;
    left: 14px;
    height: 42px;
    padding: 0 13px;
    font-size: 16px;
  }
  .creator-flag {
    top: 72px;
    left: 17px;
    font-size: 42px;
  }
  .creator-hero-copy {
    left: 22px;
    right: 22px;
    bottom: 24px;
  }
  .creator-hero-copy h1 { font-size: 24px; }
  .creator-hero-copy p { font-size: 14px; }
  .creator-verified-large {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }

  .creator-action-row {
    grid-template-columns: 1fr 54px 54px;
    gap: 8px;
    padding: 12px 16px 7px;
  }
  .creator-follow-button,
  .creator-square-action {
    height: 52px;
    border-radius: 8px;
  }
  .creator-follow-button { font-size: 15px; }
  .creator-square-action { font-size: 20px; }

  .creator-stats {
    padding: 16px 9px 20px;
    gap: 3px;
  }
  .creator-stats strong { font-size: 21px; }
  .creator-stats span { font-size: 9px; }

  .creator-content-section {
    padding: 7px 16px 26px;
  }
  .creator-tabs button {
    height: 42px;
    font-size: 14px;
  }
  .creator-recorded-card {
    grid-template-columns: 52% 1fr;
    gap: 10px;
  }
  .creator-recorded-thumb { height: 74px; }
  .creator-recorded-card h2 { font-size: 14px; }

  .bottom-nav {
    grid-template-columns: .8fr .8fr minmax(132px, 1.55fr) .8fr .8fr;
  }
}
/* === END OMILI V0.6 CREATOR + SHORTS EXPERIENCE === */


/* === OMILI V0.6.1 IMAGE SAFETY HOTFIX === */

/* Do not rely on Next/Image fill for creator cards/avatars.
   Explicit image dimensions prevent any image from escaping its card. */

.creator-short-photo {
  position: absolute !important;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 18%;
  transform: scale(1.06);
}

.creator-host-avatar img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.creator-profile-bg {
  position: absolute !important;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center 10%;
}

.creator-recorded-thumb img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* Hard containment guard */
.creator-short-inner,
.creator-host-avatar,
.creator-profile-hero,
.creator-recorded-thumb {
  position: relative;
  overflow: hidden;
  contain: paint;
}

/* === END OMILI V0.6.1 IMAGE SAFETY HOTFIX === */


/* === OMILI V0.7 AUTH + WALLET + GROUP BATTLES === */

.coin-balance-link {
  text-decoration: none;
}

.tabs a {
  border: 0;
  background: transparent;
  color: #aaa;
  height: 27px;
  border-radius: 15px;
  padding: 0 22px;
  font-size: 11px;
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* AUTH */
.auth-page,
.account-page,
.wallet-page,
.leaderboard-page {
  width: min(100%, 760px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px 18px 90px;
  background: #000;
  color: #fff;
}

.auth-page > .back-circle {
  margin-bottom: 18px;
}

.auth-card,
.account-card,
.wallet-login-required {
  max-width: 520px;
  margin: 42px auto 0;
  padding: 24px;
  border: 1px solid #29292e;
  border-radius: 18px;
  background:
    radial-gradient(circle at 85% 0%, rgba(112,0,255,.13), transparent 32%),
    #090909;
}

.auth-logo {
  margin-bottom: 18px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 38px;
  font-style: italic;
  font-weight: 950;
  text-align: center;
}

.auth-card h1,
.account-card h1,
.wallet-login-required h2 {
  margin: 0 0 8px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
}

.auth-card > p,
.wallet-login-required p {
  color: #a9a9af;
  line-height: 1.55;
}

.auth-card label {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  color: #bbb;
  font-size: 12px;
}

.auth-card input {
  height: 46px;
  border: 1px solid #35353b;
  border-radius: 10px;
  background: #050505;
  color: #fff;
  padding: 0 12px;
  outline: none;
}

.auth-card input:focus {
  border-color: #7c18ff;
  box-shadow: 0 0 0 2px rgba(124,24,255,.12);
}

.auth-primary {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffd62b, #ffa800);
  color: #080808;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-weight: 950;
}

.auth-link {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.auth-switch {
  width: 100%;
  margin-top: 14px;
  border: 0;
  background: transparent;
  color: #a8a8b0;
  font-size: 11px;
}

.auth-message {
  margin-top: 12px;
  padding: 10px;
  border-radius: 8px;
  background: #171717;
  color: #ddd;
  font-size: 11px;
}

.backend-badge {
  display: inline-flex;
  margin-top: 14px;
  padding: 5px 8px;
  border: 1px solid #4a4a4f;
  border-radius: 12px;
  color: #aaa;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .4px;
}

.backend-badge.live {
  border-color: #14bf7a;
  color: #4dffad;
}

/* ACCOUNT */
.account-topbar,
.wallet-topbar,
.leaderboard-topbar {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 8px;
}

.account-topbar .backend-badge {
  grid-column: 3;
  margin: 0;
  justify-self: end;
  white-space: nowrap;
}

.account-card {
  text-align: center;
}

.account-avatar {
  width: 82px;
  height: 82px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #ffbe00;
  background: #111;
  font-size: 36px;
}

.account-card > p {
  margin: 0 0 20px;
  color: #898991;
  font-size: 12px;
}

.account-balance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 18px 0;
}

.account-balance-grid a {
  padding: 14px 8px;
  border: 1px solid #2b2b30;
  border-radius: 12px;
  background: #070707;
  text-decoration: none;
  color: #fff;
}

.account-balance-grid span {
  display: block;
  color: #8f8f97;
  font-size: 9px;
}

.account-balance-grid strong {
  display: block;
  margin-top: 5px;
  font-size: 18px;
}

.account-actions {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.account-actions a {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid #29292f;
  border-radius: 9px;
  background: #090909;
  color: #fff;
  text-decoration: none;
  text-align: left;
  font-size: 11px;
}

.account-signout {
  margin-top: 20px;
  border: 0;
  background: transparent;
  color: #ff5b6d;
  font-size: 10px;
}

/* WALLET */
.wallet-topbar h1,
.leaderboard-topbar h1 {
  margin: 0;
  text-align: center;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-size: 22px;
}

.wallet-leaderboard-link {
  justify-self: end;
  color: #fff;
  text-decoration: none;
}

.wallet-hero {
  margin-top: 18px;
  padding: 24px 18px;
  border: 1px solid #2c2c31;
  border-radius: 16px;
  background:
    radial-gradient(circle at 80% 0%, rgba(255,182,0,.18), transparent 35%),
    #080808;
}

.wallet-hero span,
.wallet-hero small {
  display: block;
  color: #9898a0;
}

.wallet-hero strong {
  display: block;
  margin: 5px 0 7px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 40px;
  font-style: italic;
  color: #ffcf28;
}

.wallet-hero small {
  font-size: 9px;
}

.wallet-section {
  margin-top: 24px;
}

.wallet-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.wallet-section-title h2 {
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-size: 18px;
}

.wallet-section-title span {
  color: #787881;
  font-size: 9px;
}

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

.group-game-card {
  border: 1px solid #422257;
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(87,0,255,.13), transparent 33%),
    #070707;
  padding: 14px;
}

.group-game-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #8f8f96;
  font-size: 10px;
}

.group-live-pill {
  color: #fff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-weight: 900;
}

.group-game-card h2 {
  margin: 11px 0 12px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-size: 22px;
}

.group-game-sides {
  display: grid;
  grid-template-columns: 1fr 36px 1fr;
  gap: 8px;
  align-items: center;
}

.group-game-side {
  min-width: 0;
  border: 1px solid #333;
  border-radius: 12px;
  background: #090909;
  color: #fff;
  padding: 9px;
  display: grid;
  justify-items: center;
  gap: 5px;
}

.group-game-side.left {
  border-color: #c71937;
}

.group-game-side.right {
  border-color: #741cff;
}

.group-game-side.selected {
  box-shadow: 0 0 18px rgba(123,0,255,.22);
  transform: translateY(-1px);
}

.group-game-image {
  position: relative;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 50%;
  background: #111;
}

.group-game-image img {
  object-fit: cover;
}

.group-game-side strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-size: 12px;
}

.group-game-side small {
  color: #bbb;
  font-size: 9px;
}

.group-game-vs {
  text-align: center;
  color: #e30a78;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 950;
}

.group-pool-line {
  display: flex;
  justify-content: space-between;
  margin: 8px 2px 12px;
  color: #71717a;
  font-size: 10px;
}

.stake-selector {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.stake-selector button {
  height: 32px;
  border: 1px solid #2f2f34;
  border-radius: 8px;
  background: #0b0b0b;
  color: #ddd;
  font-size: 9px;
}

.stake-selector button.selected {
  border-color: #ffb800;
  color: #ffcd24;
  background: #1d1600;
}

.stake-selector button:disabled {
  opacity: .3;
}

.stake-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 10px 0;
}

.stake-summary div {
  padding: 8px;
  border-radius: 8px;
  background: #0d0d0e;
  text-align: center;
}

.stake-summary span {
  display: block;
  color: #74747c;
  font-size: 10px;
}

.stake-summary strong {
  display: block;
  margin-top: 3px;
  font-size: 10px;
}

.locked-entry {
  margin: 8px 0;
  color: #61ff87;
  font-size: 10px;
  text-align: center;
  font-weight: 800;
}

.group-confirm {
  width: 100%;
  height: 38px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffd62b, #ffa800);
  color: #080808;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-weight: 950;
}

.group-message {
  margin-top: 8px;
  padding: 8px;
  border-radius: 7px;
  font-size: 10px;
  text-align: center;
}

.group-message.error,
.take-battle-error,
.take-list-global-error {
  color: #ff8a97;
  background: #25070b;
}

.group-message.success {
  color: #64ff8d;
  background: #06210e;
}

.take-battle-error {
  margin-top: 5px;
  padding: 4px;
  border-radius: 5px;
  font-size: 9px;
  text-align: center;
}

.take-list-global-error {
  padding: 9px;
  border-radius: 8px;
  font-size: 9px;
}

.transaction-list {
  display: grid;
  gap: 7px;
}

.transaction-row {
  min-height: 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #252529;
  border-radius: 9px;
  background: #080808;
}

.transaction-row > div:first-child strong,
.transaction-row > div:first-child span {
  display: block;
}

.transaction-row > div:first-child strong {
  font-size: 10px;
}

.transaction-row > div:first-child span {
  margin-top: 3px;
  color: #74747c;
  font-size: 10px;
}

.transaction-row > div:last-child {
  text-align: right;
  font-weight: 800;
  font-size: 10px;
}

.transaction-row > div:last-child small {
  display: block;
  margin-top: 2px;
  color: #777;
  font-size: 10px;
}

.transaction-row .positive {
  color: #58f37d;
}

.transaction-row .negative {
  color: #ff6576;
}

.transaction-empty {
  color: #777;
  font-size: 10px;
}

/* LEADERBOARD */
.leaderboard-list {
  display: grid;
  gap: 7px;
  margin-top: 20px;
}

.leader-row {
  min-height: 62px;
  display: grid;
  grid-template-columns: 30px 42px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid #27272c;
  border-radius: 10px;
  background: #080808;
}

.leader-row.current-user {
  border-color: #ffb000;
}

.leader-rank {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 17px;
  font-style: italic;
  text-align: center;
}

.leader-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #151515;
}

.leader-avatar.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leader-copy strong,
.leader-copy span {
  display: block;
}

.leader-copy strong {
  font-size: 10px;
}

.leader-copy span {
  margin-top: 3px;
  color: #777;
  font-size: 10px;
}

.leader-score {
  color: #ffce24;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 11px;
  font-style: italic;
}

@media (max-width: 620px) {
  .auth-page,
  .account-page,
  .wallet-page,
  .leaderboard-page {
    padding: 12px 10px 82px;
  }

  .auth-card,
  .account-card,
  .wallet-login-required {
    margin-top: 28px;
    padding: 18px;
  }

  .auth-logo {
    font-size: 31px;
  }

  .tabs a {
    height: 21px;
    padding: 0 12px;
    font-size: 10px;
  }

  .wallet-hero strong {
    font-size: 32px;
  }

  .group-game-card h2 {
    font-size: 18px;
  }

  .group-game-image {
    width: 48px;
    height: 48px;
  }

  .group-game-side strong {
    font-size: 9px;
  }

  .stake-summary strong {
    font-size: 9px;
  }

  .leader-row {
    grid-template-columns: 25px 34px 1fr auto;
  }

  .leader-avatar {
    width: 32px;
    height: 32px;
  }

  .leader-score {
    font-size: 9px;
  }
}
/* === END OMILI V0.7 AUTH + WALLET + GROUP BATTLES === */


/* === OMILI V0.7.1 VISUAL HOTFIX === */
.creator-short-inner {
  position: absolute !important;
  inset: 1px !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden;
  contain: paint;
}

.creator-short-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 18% !important;
  transform: scale(1.06);
}

.creator-short-gradient,
.creator-short-top,
.creator-short-bottom {
  position: absolute;
  z-index: 3;
}

.bottom-nav {
  overflow: hidden;
}

@media (max-width: 620px) {
  .bottom-nav {
    grid-template-columns: 0.75fr 0.75fr minmax(130px, 1.5fr) 0.75fr 0.75fr !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .hot-take-main {
    width: 100% !important;
    max-width: 145px;
  }

  .creator-short-card {
    height: 129px;
  }
}
/* === END OMILI V0.7.1 VISUAL HOTFIX === */


/* === OMILI V0.7.2 SHORTS BACKGROUND-IMAGE HOTFIX === */

/* Render creator portraits as CSS backgrounds instead of Next/Image.
   This is intentionally simple and robust for the prototype carousel. */
.creator-short-inner.creator-short-bg {
  position: absolute !important;
  inset: 1px !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  background-color: #080808;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 18%;
  overflow: hidden;
  contain: paint;
}

/* Remove any leftover rules intended for the old <Image> element. */
.creator-short-photo {
  display: none !important;
}

.creator-short-gradient {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}

.creator-short-top,
.creator-short-bottom {
  z-index: 3 !important;
}

/* A thin inner outline gives the cards the same polished 'Trending Takes' feel. */
.creator-short-inner.creator-short-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.13);
  clip-path: inherit;
}

/* === END OMILI V0.7.2 SHORTS BACKGROUND-IMAGE HOTFIX === */


/* === OMILI V0.8 ECONOMY + IDENTITY === */

/* PP as visible credibility in content surfaces */
.creator-host-identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.creator-host-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-host-pp {
  color: #36b8ff;
  font-size: 0.82em;
  font-weight: 900;
  white-space: nowrap;
}

.creator-short-pp {
  display: inline-flex;
  height: 18px;
  align-items: center;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(0,0,0,.76);
  border: 1px solid #21a7ff;
  color: #dff5ff;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .2px;
}

/* Creator profile — knowledge and community are separate signals */
.creator-credibility-strip {
  display: grid;
  grid-template-columns: 1.65fr .75fr;
  gap: 10px;
  padding: 4px 30px 12px;
}

.creator-pp-block,
.creator-rep-block {
  min-height: 91px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #2c2d33;
  border-radius: 12px;
  padding: 12px 14px;
  background: #09090b;
}

.creator-pp-block {
  background:
    radial-gradient(circle at 95% 20%, rgba(0,125,255,.18), transparent 38%),
    #09090b;
  border-color: #164b75;
}

.creator-rep-block {
  background:
    radial-gradient(circle at 95% 20%, rgba(138,0,255,.20), transparent 40%),
    #09090b;
  border-color: #522175;
}

.creator-pp-block > span,
.creator-rep-block > span {
  color: #aeb0b7;
  font-size: 9px;
  font-weight: 900;
}

.creator-pp-block strong,
.creator-rep-block strong {
  margin: 4px 0 2px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-size: 25px;
}

.creator-pp-block strong {
  color: #4cc5ff;
}

.creator-rep-block strong {
  color: #cf79ff;
}

.creator-rep-block strong em {
  color: #707078;
  font-size: 12px;
  font-style: normal;
}

.creator-pp-block small,
.creator-rep-block small {
  color: #85858c;
  font-size: 10px;
}

/* Own account: three concepts, deliberately different visual roles */
.economy-explainer {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 12px 0;
  color: #777b84;
  font-size: 10px;
}

.economy-explainer span {
  padding: 5px 7px;
  border-radius: 10px;
  background: #0b0b0d;
  border: 1px solid #24252a;
}

.economy-explainer b {
  color: #fff;
}

.account-economy-grid {
  display: grid;
  grid-template-columns: .9fr 1.25fr .9fr;
  gap: 8px;
  margin: 12px 0 18px;
}

.economy-card {
  min-height: 105px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid #2a2b31;
  background: #09090b;
  color: #fff;
  text-decoration: none;
}

.economy-card > span {
  color: #acadb4;
  font-size: 10px;
  font-weight: 900;
}

.economy-card strong {
  margin: 6px 0 3px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 24px;
  font-style: italic;
}

.economy-card strong em {
  color: #707078;
  font-size: 10px;
  font-style: normal;
}

.economy-card small {
  color: #7d7e86;
  font-size: 10px;
  line-height: 1.25;
}

.tokens-card {
  border-color: #6e5213;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,188,0,.16), transparent 40%),
    #09090b;
}

.tokens-card strong {
  color: #ffca28;
}

.pp-card {
  border-color: #164b75;
  background:
    radial-gradient(circle at 90% 10%, rgba(0,137,255,.18), transparent 40%),
    #09090b;
}

.pp-card strong {
  color: #4cc5ff;
}

.rep-card {
  border-color: #522175;
  background:
    radial-gradient(circle at 90% 10%, rgba(138,0,255,.20), transparent 40%),
    #09090b;
}

.rep-card strong {
  color: #cf79ff;
}

/* PP vs Rep leaderboard */
.leaderboard-tabs {
  width: min(100%, 700px);
  margin: 0 auto 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 4px;
  border-radius: 13px;
  background: #08080a;
  border: 1px solid #27282e;
}

.leaderboard-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #8d8e95;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 900;
}

.leaderboard-tabs button.active {
  color: #fff;
  background: linear-gradient(110deg, #1b2541, #15101e);
  box-shadow: inset 0 0 0 1px #43454d;
}

.leaderboard-definition {
  width: min(100%, 700px);
  margin: 0 auto 12px;
  padding: 0 8px;
  color: #777a83;
  text-align: center;
  font-size: 9px;
}

.leader-score.pp {
  color: #42bfff;
}

.leader-score.rep {
  color: #ca70ff;
}

/* Token Wallet */
.wallet-hero strong {
  color: #ffca28;
}

/* Mobile */
@media (max-width: 620px) {
  .creator-host-pp {
    font-size: 9px;
  }

  .creator-short-pp {
    height: 14px;
    padding: 0 4px;
    font-size: 9px;
  }

  .creator-credibility-strip {
    grid-template-columns: 1.55fr .8fr;
    gap: 7px;
    padding: 2px 16px 10px;
  }

  .creator-pp-block,
  .creator-rep-block {
    min-height: 72px;
    padding: 8px 9px;
  }

  .creator-pp-block > span,
  .creator-rep-block > span {
    font-size: 9px;
  }

  .creator-pp-block strong,
  .creator-rep-block strong {
    font-size: 19px;
  }

  .creator-pp-block small,
  .creator-rep-block small {
    font-size: 9px;
  }

  .economy-explainer {
    gap: 3px;
    font-size: 9px;
  }

  .economy-explainer span {
    padding: 4px 5px;
  }

  .account-economy-grid {
    grid-template-columns: 1fr;
  }

  .economy-card {
    min-height: 78px;
  }

  .leaderboard-tabs button {
    min-height: 32px;
    font-size: 10px;
  }

  .leaderboard-definition {
    font-size: 10px;
  }
}
/* === END OMILI V0.8 ECONOMY + IDENTITY === */


/* === OMILI V0.9 PREDICTION INTELLIGENCE + HOT TAKES === */

.hot-take-main {
  text-decoration: none;
  display: grid;
  place-items: center;
}

.prediction-home-section { margin-top: 8px; }

.prediction-intel-strip {
  min-height: 82px;
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #174f78;
  border-radius: 11px;
  background:
    radial-gradient(circle at 90% 20%, rgba(0,146,255,.18), transparent 38%),
    linear-gradient(110deg, #071017, #07070a 56%, #0b0710);
  color: white;
  text-decoration: none;
}

.prediction-intel-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.prediction-intel-kicker {
  color: #49c5ff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 10px;
  font-style: italic;
  font-weight: 900;
}

.prediction-intel-copy strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 18px;
  font-style: italic;
}

.prediction-intel-copy small {
  color: #8e939b;
  font-size: 10px;
}

.prediction-intel-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  text-align: center;
}

.prediction-intel-metrics div {
  border-radius: 8px;
  padding: 7px 4px;
  background: rgba(0,0,0,.34);
  border: 1px solid #1f333f;
}

.prediction-intel-metrics strong {
  display: block;
  color: #54c8ff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 14px;
  font-style: italic;
}

.prediction-intel-metrics span {
  color: #747982;
  font-size: 9px;
}

.prediction-intel-metrics b {
  grid-column: 1 / -1;
  color: #c6ebff;
  font-size: 10px;
}

.predictions-page,
.hot-take-page {
  width: min(100%, 760px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 12px 14px 70px;
  background: #000;
  color: #fff;
}

.prediction-page-header,
.hot-take-header {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  margin-bottom: 14px;
}

.prediction-page-header > div,
.hot-take-header h1 {
  text-align: center;
}

.prediction-page-header span {
  color: #43c5ff;
  font-size: 10px;
  font-weight: 900;
}

.prediction-page-header h1,
.hot-take-header h1 {
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 22px;
  font-style: italic;
}

.prediction-leader-link {
  justify-self: end;
  color: #fff;
  text-decoration: none;
  font-size: 22px;
}

.prediction-identity-hero {
  min-height: 120px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 12px;
  align-items: center;
  padding: 17px;
  border: 1px solid #195579;
  border-radius: 14px;
  background:
    radial-gradient(circle at 85% 30%, rgba(0,136,255,.20), transparent 37%),
    #090b0e;
}

.prediction-identity-hero > div:first-child > span {
  color: #a3a7af;
  font-size: 10px;
  font-weight: 900;
}

.prediction-identity-hero > div:first-child > strong {
  display: block;
  margin: 5px 0 2px;
  color: #4ec7ff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 30px;
  font-style: italic;
}

.prediction-identity-hero small {
  color: #747983;
  font-size: 10px;
}

.prediction-identity-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.prediction-identity-stats div {
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 9px;
  background: rgba(0,0,0,.35);
  border: 1px solid #252d34;
}

.prediction-identity-stats strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 19px;
  font-style: italic;
}

.prediction-identity-stats span {
  color: #7e838b;
  font-size: 10px;
}

.prediction-rules {
  display: flex;
  gap: 7px;
  align-items: center;
  overflow-x: auto;
  margin: 9px 0 15px;
  scrollbar-width: none;
}

.prediction-rules strong,
.prediction-rules span {
  flex: none;
  border: 1px solid #24272d;
  border-radius: 12px;
  padding: 6px 8px;
  background: #09090b;
  font-size: 10px;
}

.prediction-rules strong { color: #4ec7ff; }

.prediction-section { margin-top: 16px; }

.prediction-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.prediction-section-heading h2 {
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 17px;
  font-style: italic;
}

.prediction-section-heading span,
.prediction-section-heading a {
  color: #29a7ff;
  text-decoration: none;
  font-size: 10px;
}

.prediction-market-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.prediction-market-card {
  padding: 11px;
  border: 1px solid #2a2c32;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,94,255,.08), transparent 42%),
    #08080a;
}

.prediction-market-top {
  display: flex;
  justify-content: space-between;
  color: #9a9ca4;
  font-size: 10px;
}

.prediction-fixture {
  min-height: 80px;
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  gap: 6px;
  align-items: center;
  text-align: center;
}

.prediction-fixture > div {
  display: grid;
  place-items: center;
  gap: 3px;
}

.prediction-fixture img { object-fit: contain; }

.prediction-fixture strong { font-size: 10px; }

.prediction-fixture > span {
  color: #d60076;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-weight: 900;
}

.prediction-pick-buttons {
  display: grid;
  grid-template-columns: 1fr .8fr 1fr;
  gap: 5px;
}

.prediction-pick-buttons button {
  min-height: 31px;
  border: 1px solid #30323a;
  border-radius: 8px;
  background: #0b0b0d;
  color: #fff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 9px;
  font-style: italic;
  font-weight: 900;
}

.prediction-pick-buttons button.selected {
  border-color: #29a7ff;
  background: #082032;
  box-shadow: 0 0 12px rgba(0,136,255,.13);
}

.prediction-pick-buttons button:disabled { opacity: .65; }
.prediction-pick-buttons button.selected:disabled { opacity: 1; }

.prediction-pick-status {
  margin-top: 7px;
  padding: 5px 6px;
  border-radius: 7px;
  background: #111217;
  color: #aeb1b8;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
}

.prediction-pick-status.correct {
  color: #55ef85;
  background: #07170c;
}

.prediction-pick-status.wrong {
  color: #ff6a79;
  background: #1a080b;
}

.prediction-demo-controls {
  margin-top: 11px;
  padding: 11px;
  border: 1px dashed #705d1c;
  border-radius: 11px;
  background: #0d0c07;
}

.prediction-demo-controls > span {
  color: #ffcf3b;
  font-size: 10px;
  font-weight: 900;
}

.prediction-demo-controls p {
  margin: 3px 0 8px;
  color: #8d8b81;
  font-size: 10px;
}

.prediction-demo-controls button {
  min-height: 34px;
  width: 100%;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffd42b, #ffaa00);
  color: #080808;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 9px;
  font-style: italic;
  font-weight: 950;
}

.prediction-message {
  margin-top: 8px;
  color: #c6eefe;
  text-align: center;
  font-size: 10px;
}

.prediction-voices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.prediction-voice-card {
  min-width: 0;
  padding: 8px;
  border: 1px solid #2a2c32;
  border-radius: 10px;
  background: #08080a;
  color: #fff;
  text-decoration: none;
}

.prediction-voice-avatar {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  margin-bottom: 6px;
  border-radius: 8px;
}

.prediction-voice-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prediction-voice-card div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.prediction-voice-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 9px;
  font-style: italic;
}

.prediction-voice-card span {
  color: #4ec7ff;
  font-size: 10px;
  font-weight: 900;
}

.prediction-voice-card small {
  color: #777b84;
  font-size: 9px;
  line-height: 1.2;
}

.hot-take-question {
  padding: 17px;
  border: 1px solid #b70043;
  border-radius: 14px;
  background:
    radial-gradient(circle at 90% 30%, rgba(255,0,70,.16), transparent 38%),
    #0b0708;
}

.hot-take-question > span {
  color: #ff3e64;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 9px;
  font-style: italic;
  font-weight: 900;
}

.hot-take-question h2 {
  margin: 8px 0 6px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 29px;
  line-height: 1.03;
  font-style: italic;
}

.hot-take-question p {
  margin: 0;
  color: #999aa0;
  font-size: 9px;
  line-height: 1.4;
}

.hot-take-composer {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #28292f;
  border-radius: 13px;
  background: #08080a;
}

.hot-take-author {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.hot-take-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #ffbf00;
  border-radius: 50%;
  background: #111;
}

.hot-take-author div {
  display: flex;
  flex-direction: column;
}

.hot-take-author strong { font-size: 11px; }
.hot-take-author small { color: #8c8d94; font-size: 10px; }

.hot-take-composer textarea {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  border: 1px solid #303139;
  border-radius: 11px;
  padding: 12px;
  outline: none;
  background: #050506;
  color: #fff;
  font-family: var(--font-inter), sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.hot-take-composer textarea:focus { border-color: #d2004b; }

.hot-take-counter {
  margin: 5px 2px 8px;
  color: #666970;
  text-align: right;
  font-size: 10px;
}

.hot-take-composer > button {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(100deg, #ed001f, #ff005c 53%, #2939ff);
  color: white;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 950;
}

.hot-take-message {
  margin-top: 8px;
  color: #ff8592;
  text-align: center;
  font-size: 10px;
}

.hot-take-format-note {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  color: #5f6269;
}

.hot-take-format-note strong,
.hot-take-format-note span {
  padding: 5px 7px;
  border: 1px solid #1d1f23;
  border-radius: 10px;
  font-size: 10px;
}

.your-hot-take {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #8f1546;
  border-radius: 12px;
  background:
    radial-gradient(circle at 95% 20%, rgba(255,0,94,.12), transparent 40%),
    #09080a;
  color: #fff;
  text-decoration: none;
}

.your-hot-take > span {
  color: #ff4f80;
  font-size: 10px;
  font-weight: 900;
}

.your-hot-take p {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}

.your-hot-take b {
  justify-self: end;
  color: #cba6ff;
  font-size: 10px;
}

.your-hot-take.empty strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 15px;
  font-style: italic;
}

@media (max-width: 620px) {
  .prediction-intel-strip {
    min-height: 66px;
    padding: 8px 9px;
  }

  .prediction-intel-kicker { font-size: 10px; }
  .prediction-intel-copy strong { font-size: 13px; }
  .prediction-intel-copy small { font-size: 9px; }
  .prediction-intel-metrics strong { font-size: 11px; }

  .predictions-page,
  .hot-take-page {
    padding: 10px 10px 65px;
  }

  .prediction-page-header h1,
  .hot-take-header h1 {
    font-size: 17px;
  }

  .prediction-identity-hero {
    min-height: 94px;
    padding: 11px;
  }

  .prediction-identity-hero > div:first-child > strong {
    font-size: 22px;
  }

  .prediction-identity-stats div { min-height: 46px; }
  .prediction-identity-stats strong { font-size: 15px; }

  .prediction-market-list { grid-template-columns: 1fr; }
  .prediction-fixture { min-height: 68px; }
  .prediction-voices { grid-template-columns: repeat(2, 1fr); }

  .hot-take-question h2 { font-size: 23px; }

  .hot-take-composer textarea {
    min-height: 135px;
    font-size: 12px;
  }
}
/* === END OMILI V0.9 PREDICTION INTELLIGENCE + HOT TAKES === */

/* === OMILI V0.9.3 GLOBAL IMAGE CONTAINMENT === */

/*
  All remaining Next/Image `fill` usages have been removed.
  These rules guarantee that every media image is physically constrained
  to its card, even if an older CSS rule changes a parent's positioning.
*/

.person-circle,
.show-image,
.group-game-image,
.take-list-image,
.hero-player,
.top-take-image,
.past-debate-image {
  overflow: hidden !important;
  contain: paint;
}

.battle-photo,
.show-photo,
.group-game-image > img,
.take-list-image > img,
.hero-player > img,
.top-take-image > img,
.past-debate-image > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
}

.group-game-image > img,
.take-list-image > img {
  border-radius: 50%;
}

.hero-player > img {
  object-position: top center !important;
}

/* v1.6: preserve both dimensions set by each image component.
   The previous single-dimension override caused Next/Image warnings. */

/* === END OMILI V0.9.3 GLOBAL IMAGE CONTAINMENT === */


/* =========================================================
   OMILI v1.0 — HOT TAKE PLAYBACK + PORTRAIT LIVE ARENA
   ========================================================= */

/* ---------- HOT TAKE PLAYBACK ---------- */
.hot-playback {
  width: min(100vw, 520px);
  height: 100dvh;
  min-height: 620px;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
  color: #fff;
}

.hot-playback-media {
  position: relative;
  width: 100%;
  height: 100%;
  background-position: center 16%;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.hot-playback-media-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.04) 55%, rgba(0,0,0,.92) 100%),
    radial-gradient(circle at 10% 55%, rgba(255,0,0,.12), transparent 34%);
}

.hot-playback-top {
  position: absolute;
  z-index: 5;
  top: 18px;
  left: 18px;
  right: 18px;
  display: grid;
  grid-template-columns: 42px 1fr 42px 42px;
  gap: 7px;
  align-items: start;
}

.hot-playback-close,
.hot-playback-top > button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(0,0,0,.58);
  color: #fff;
  text-decoration: none;
  font-size: 17px;
  backdrop-filter: blur(9px);
}

.hot-playback-top > button {
  padding: 0;
}

.hot-playback-debate {
  min-width: 0;
  text-align: center;
}

.hot-playback-debate strong {
  display: block;
  color: #fff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 15px;
  font-style: italic;
}

.hot-playback-debate span {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #f3f3f5;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hot-playback-author {
  position: absolute;
  z-index: 5;
  top: 104px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.hot-playback-avatar {
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 2px solid #ff3151;
  border-radius: 50%;
}

.hot-playback-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hot-playback-author > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hot-playback-author strong {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}

.hot-playback-author > div > span {
  color: #c4c5ca;
  font-size: 10px;
}

.hot-playback-duration {
  position: absolute;
  z-index: 5;
  top: 112px;
  right: 20px;
  padding: 7px 11px;
  border-radius: 18px;
  background: rgba(0,0,0,.72);
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 15px;
}

.hot-playback-actions {
  position: absolute;
  z-index: 6;
  right: 15px;
  bottom: 270px;
  display: grid;
  gap: 8px;
}

.hot-playback-actions button {
  width: 54px;
  min-height: 63px;
  display: grid;
  place-items: center;
  padding: 5px 2px;
  border: 0;
  border-radius: 27px;
  background: rgba(0,0,0,.72);
  color: #fff;
  backdrop-filter: blur(8px);
}

.hot-playback-actions i {
  font-size: 20px;
  font-style: normal;
}

.hot-playback-actions b {
  font-size: 10px;
}

.hot-playback-actions span {
  color: #dedee2;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 10px;
}

.hot-playback-quote {
  position: absolute;
  z-index: 5;
  left: 55px;
  right: 76px;
  bottom: 302px;
  text-align: center;
}

.hot-playback-quote strong,
.hot-playback-quote b {
  display: block;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-weight: 900;
  text-shadow: 0 2px 9px rgba(0,0,0,.82);
}

.hot-playback-quote strong {
  font-size: 25px;
  line-height: 1.15;
}

.hot-playback-quote b {
  margin-top: 8px;
  font-size: 20px;
}

.hot-playback-meta {
  position: absolute;
  z-index: 5;
  left: 18px;
  right: 72px;
  bottom: 210px;
}

.hot-playback-viewers {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hot-playback-viewers > span {
  display: flex;
}

.hot-playback-viewers img {
  width: 23px;
  height: 23px;
  margin-left: -5px;
  object-fit: cover;
  border: 1px solid #fff;
  border-radius: 50%;
}

.hot-playback-viewers img:first-child {
  margin-left: 0;
}

.hot-playback-viewers b {
  font-size: 10px;
}

.hot-playback-tags {
  display: flex;
  gap: 5px;
  margin-top: 9px;
  overflow-x: auto;
  scrollbar-width: none;
}

.hot-playback-tags span {
  flex: none;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 13px;
  background: rgba(0,0,0,.38);
  font-size: 10px;
}

.hot-playback-progress {
  position: absolute;
  z-index: 5;
  left: 18px;
  right: 18px;
  bottom: 164px;
  display: grid;
  grid-template-columns: 30px 1fr 58px;
  gap: 8px;
  align-items: center;
}

.hot-playback-progress > button {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 15px;
}

.hot-playback-progress > div {
  position: relative;
  height: 4px;
  border-radius: 3px;
  background: rgba(255,255,255,.30);
}

.hot-playback-progress i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: #ff1839;
}

.hot-playback-progress em {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.hot-playback-progress > span {
  font-size: 10px;
  text-align: right;
}

.hot-playback-reply {
  position: absolute;
  z-index: 5;
  left: 18px;
  right: 18px;
  bottom: 98px;
  min-height: 48px;
  display: grid;
  grid-template-columns: 34px 1fr 42px auto;
  gap: 7px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 25px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(9px);
}

.hot-playback-reply img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 50%;
}

.hot-playback-reply > span {
  color: #c5c5ca;
  font-size: 10px;
}

.hot-playback-reply button {
  min-height: 34px;
  border: 0;
  border-radius: 18px;
  background: #ffc400;
  color: #111;
}

.hot-playback-drop {
  position: absolute;
  z-index: 5;
  left: 22px;
  right: 22px;
  bottom: 32px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: linear-gradient(100deg,#ffd42b,#ffb100 58%,#ff5b46);
  color: #080808;
  text-decoration: none;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 950;
  box-shadow: 0 0 22px rgba(255,166,0,.16);
}

.hot-playback-swipe-hint {
  position: absolute;
  z-index: 5;
  right: 18px;
  top: 164px;
  color: rgba(255,255,255,.45);
  font-size: 9px;
  writing-mode: vertical-rl;
}

.hot-replies-backdrop,
.live-battle-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}

.hot-replies-sheet {
  width: min(100%,520px);
  max-height: 58dvh;
  overflow-y: auto;
  border: 1px solid #28282d;
  border-radius: 20px 20px 0 0;
  padding: 10px 16px 18px;
  background: #09090b;
}

.hot-replies-handle {
  width: 38px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 2px;
  background: #4c4c52;
}

.hot-replies-sheet header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.hot-replies-sheet header button {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 24px;
}

.hot-replies-sheet article {
  display: grid;
  gap: 3px;
  padding: 10px 0;
  border-bottom: 1px solid #202026;
}

.hot-replies-sheet article b {
  color: #ff4f75;
  font-size: 9px;
}

.hot-replies-sheet article span {
  color: #dfdfe4;
  font-size: 10px;
}

.hot-replies-input {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  background: #121216;
  color: #777;
  font-size: 9px;
}

/* ---------- PORTRAIT LIVE ARENA ---------- */
.live-arena {
  width: min(100vw, 520px);
  height: 100dvh;
  min-height: 620px;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
  color: #fff;
}

.live-arena-stream {
  position: relative;
  width: 100%;
  height: calc(100dvh - 60px);
  min-height: 560px;
  background-position: center 14%;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.live-arena-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.08) 26%,rgba(0,0,0,.10) 54%,rgba(0,0,0,.88) 100%);
}

.live-arena-header {
  position: absolute;
  z-index: 7;
  top: 14px;
  left: 13px;
  right: 13px;
  display: grid;
  grid-template-columns: 38px 1fr auto 35px;
  gap: 7px;
  align-items: start;
}

.live-back,
.live-more {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  text-decoration: none;
}

.live-more {
  padding: 0;
}

.live-header-copy {
  min-width: 0;
}

.live-header-copy > div {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #ddd;
  font-size: 10px;
}

.live-header-copy h1 {
  margin: 5px 0 4px;
  overflow: hidden;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 21px;
  line-height: 1;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-header-copy > a {
  display: flex;
  min-width: 0;
  gap: 5px;
  align-items: center;
  color: #e8e8eb;
  text-decoration: none;
  font-size: 10px;
}

.live-header-copy > a img {
  width: 25px;
  height: 25px;
  object-fit: cover;
  border-radius: 50%;
}

.live-follow {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #fff;
  border-radius: 16px;
  background: rgba(0,0,0,.44);
  color: #fff;
  font-size: 10px;
}

.live-follow.following {
  border-color: #5b5c63;
  color: #b7b8bd;
}

.live-arena-actions {
  position: absolute;
  z-index: 7;
  right: 11px;
  top: 160px;
  display: grid;
  gap: 8px;
}

.live-arena-actions button {
  width: 48px;
  min-height: 57px;
  display: grid;
  place-items: center;
  padding: 4px 2px;
  border: 0;
  border-radius: 25px;
  background: rgba(0,0,0,.70);
  color: #fff;
  backdrop-filter: blur(7px);
}

.live-arena-actions i {
  font-size: 18px;
  font-style: normal;
}

.live-arena-actions b {
  font-size: 9px;
}

.live-arena-actions span {
  font-family: var(--font-oswald),sans-serif;
  font-size: 10px;
}

.live-comment-stack {
  position: absolute;
  z-index: 7;
  left: 13px;
  right: 68px;
  bottom: 228px;
  display: grid;
  gap: 5px;
}

.live-comment-stack > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px;
  font-size: 10px;
  text-shadow: 0 1px 5px #000;
}

.live-comment-stack strong {
  font-weight: 900;
}

.live-comment-stack .tone-red strong { color: #ff3955; }
.live-comment-stack .tone-green strong { color: #54e36c; }
.live-comment-stack .tone-gold strong { color: #ffc43b; }
.live-comment-stack .tone-blue strong { color: #5fb6ff; }

.live-stream-controls {
  position: absolute;
  z-index: 7;
  left: 13px;
  right: 13px;
  bottom: 195px;
  display: grid;
  grid-template-columns: 24px auto 1fr 26px;
  gap: 7px;
  align-items: center;
}

.live-stream-controls button {
  border: 0;
  background: transparent;
  color: #fff;
}

.live-stream-controls > span {
  font-size: 10px;
}

.live-stream-controls > div {
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255,255,255,.25);
}

.live-stream-controls i {
  display: block;
  width: 34%;
  height: 100%;
  background: #ff1739;
}

.battle-dock {
  position: absolute;
  z-index: 8;
  left: 10px;
  right: 10px;
  bottom: 98px;
  min-height: 90px;
  display: grid;
  gap: 5px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 13px;
  background:
    linear-gradient(#08080a,#08080a) padding-box,
    linear-gradient(100deg,#ff1024,#a500ff,#2454ff) border-box;
  color: #fff;
  text-align: left;
  box-shadow: 0 0 17px rgba(0,0,0,.28);
}

.battle-dock-top {
  display: flex;
  justify-content: space-between;
  color: #a8a8af;
  font-size: 9px;
}

.battle-dock-top > span {
  color: #fff;
  font-family: var(--font-oswald),sans-serif;
  font-style: italic;
  font-weight: 900;
}

.battle-dock > strong {
  overflow: hidden;
  font-family: var(--font-oswald),sans-serif;
  font-size: 13px;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-dock-result {
  display: grid;
  grid-template-columns: auto 1fr 25px 25px auto;
  gap: 4px;
  align-items: center;
  font-size: 9px;
}

.battle-dock-result > div {
  height: 5px;
  overflow: hidden;
  border-radius: 3px;
  background: #541193;
}

.battle-dock-result i {
  display: block;
  height: 100%;
  background: #ef103a;
}

.battle-dock-result b:first-of-type {
  color: #ff3653;
}

.battle-dock-result b:last-of-type {
  color: #a836ff;
}

.battle-dock small {
  color: #8d8e95;
  font-size: 9px;
  text-align: center;
}

.live-chat-box {
  position: absolute;
  z-index: 7;
  left: 13px;
  right: 13px;
  bottom: 52px;
  min-height: 37px;
  display: grid;
  grid-template-columns: 1fr 30px;
  align-items: center;
  padding-left: 11px;
  border: 1px solid #2a2a30;
  border-radius: 20px;
  background: rgba(0,0,0,.72);
  color: #8d8d94;
  font-size: 10px;
}

.live-chat-box button {
  border: 0;
  background: transparent;
  color: #ddd;
}

.live-hot-take-cta {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 6px;
  width: 190px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 21px;
  background: linear-gradient(180deg,#ffd42b,#ffaa00);
  color: #080808;
  text-decoration: none;
  transform: translateX(-50%);
  font-family: var(--font-oswald),sans-serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 950;
}

.live-bottom-nav {
  height: 60px;
  display: grid;
  grid-template-columns: repeat(5,1fr);
  align-items: center;
  border-top: 1px solid #17171a;
  background: #020202;
}

.live-bottom-nav > * {
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 0;
  background: transparent;
  color: #78787e;
  text-decoration: none;
  font-size: 18px;
}

.live-bottom-nav small {
  font-size: 9px;
}

.live-bottom-nav .active {
  color: #ffc400;
}

.live-battle-sheet {
  position: relative;
  width: min(100%,520px);
  max-height: 72dvh;
  overflow-y: auto;
  border: 1px solid #37373c;
  border-radius: 20px 20px 0 0;
  padding: 12px 12px 18px;
  background: #050506;
  box-shadow: 0 -16px 50px rgba(0,0,0,.55);
}

.live-battle-close {
  position: sticky;
  z-index: 3;
  top: 0;
  left: calc(50% - 24px);
  width: 48px;
  height: 24px;
  border: 0;
  border-radius: 12px;
  background: #242429;
  color: #aaa;
}

.live-battle-sheet-heading {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 4px 8px;
}

.live-battle-sheet-heading span {
  color: #ff5b2d;
  font-family: var(--font-oswald),sans-serif;
  font-size: 10px;
  font-style: italic;
  font-weight: 900;
}

.live-battle-sheet-heading b {
  color: #6e7078;
  font-size: 9px;
  font-weight: 500;
}

.live-arena-error {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #000;
  color: #fff;
}

/* Existing Join Show buttons can now be links. */
a.join-show {
  display: grid;
  place-items: center;
  text-decoration: none;
}

/* ---------- MOBILE ---------- */
@media (max-width:620px) {
  .hot-playback,
  .live-arena {
    width: 100vw;
  }

  .hot-playback-quote strong {
    font-size: 21px;
  }

  .hot-playback-quote b {
    font-size: 17px;
  }

  .live-header-copy h1 {
    font-size: 18px;
  }
}
/* === END OMILI v1.0 LIVE EXPERIENCE === */


/* =========================================================
   OMILI v1.0.2 — FONT AUTHORITY
   ========================================================= */

/* Body/UI typography */
body,
button,
input,
textarea,
select {
  font-family: var(--omili-body-font), Arial, Helvetica, sans-serif !important;
}

/* Omili's condensed editorial / football typography */
.omili-logo,
.section-title,
.eyebrow-row,
.feature-grid h2,
.reward-line,
.primary-yellow,
.side-button,
.join-show,
.hot-take-main,
.upcoming-cta,
.show-card h3,
.take-list-question,
.take-list-side strong,
.secondary-header h1,
.debate-header h1,
.debate-hero-copy h2,
.debate-prize,
.debate-section-heading h3,
.top-take-overlay strong,
.top-take-name,
.past-debate-card h4,
.creator-short-name,
.creator-hero-copy h1,
.creator-stats strong,
.creator-stats span,
.creator-tabs button,
.creator-recorded-card h2,
.creator-pp-block strong,
.creator-rep-block strong,
.economy-card strong,
.leaderboard-tabs button,
.prediction-intel-copy strong,
.prediction-intel-kicker,
.prediction-intel-metrics strong,
.prediction-page-header h1,
.hot-take-header h1,
.prediction-identity-hero strong,
.prediction-section-heading h2,
.prediction-fixture > span,
.prediction-pick-buttons button,
.prediction-demo-controls button,
.prediction-voice-card strong,
.hot-take-question h2,
.hot-take-question > span,
.hot-take-composer > button,
.your-hot-take.empty strong,
.hot-playback-debate strong,
.hot-playback-debate span,
.hot-playback-duration,
.hot-playback-actions span,
.hot-playback-quote strong,
.hot-playback-quote b,
.hot-playback-drop,
.live-header-copy h1,
.live-arena-actions span,
.battle-dock-top > span,
.battle-dock > strong,
.live-hot-take-cta,
.live-battle-sheet-heading span {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif !important;
}

/* Keep the editorial treatment strong and consistent. */
.section-title,
.eyebrow-row,
.feature-grid h2,
.reward-line,
.primary-yellow,
.side-button,
.join-show,
.hot-take-main,
.show-card h3,
.upcoming-cta,
.take-list-question,
.debate-hero-copy h2,
.debate-section-heading h3,
.creator-short-name,
.creator-hero-copy h1,
.creator-stats strong,
.creator-tabs button,
.creator-recorded-card h2,
.prediction-intel-copy strong,
.prediction-page-header h1,
.hot-take-header h1,
.prediction-section-heading h2,
.hot-take-question h2,
.hot-playback-debate strong,
.hot-playback-quote strong,
.hot-playback-quote b,
.hot-playback-drop,
.live-header-copy h1,
.battle-dock-top > span,
.battle-dock > strong,
.live-hot-take-cta,
.live-battle-sheet-heading span {
  font-style: italic;
  font-weight: 800;
}

/* Logo remains the strongest condensed mark. */
.omili-logo {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif !important;
  font-style: italic;
  font-weight: 900;
}
/* === END OMILI v1.0.2 FONT AUTHORITY === */


/* =========================================================
   OMILI v1.1 — SOCIAL + DISCOVERY
   ========================================================= */

.club-filter {
  text-decoration: none;
}

/* Shared discovery pages */
.discovery-page {
  width: min(100%, 760px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 12px 14px 70px;
  background: #000;
  color: #fff;
}

.discovery-header {
  display: grid;
  grid-template-columns: 42px 1fr 60px;
  gap: 8px;
  align-items: center;
  margin-bottom: 13px;
}

.discovery-header h1 {
  margin: 0;
  text-align: center;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 21px;
  font-style: italic;
  font-weight: 900;
}

.search-shell {
  min-height: 45px;
  display: grid;
  grid-template-columns: 28px 1fr 30px;
  gap: 4px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid #2a2c31;
  border-radius: 23px;
  background: #0a0a0c;
}

.search-shell > span {
  color: #9ea1a9;
  text-align: center;
  font-size: 18px;
}

.search-shell input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 12px;
}

.search-shell input::placeholder {
  color: #676a72;
}

.search-shell button {
  border: 0;
  background: transparent;
  color: #aaa;
  font-size: 19px;
}

.search-tabs,
.inbox-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 9px 0 14px;
  padding: 3px;
  border: 1px solid #24262b;
  border-radius: 12px;
  background: #070708;
}

.search-tabs button,
.inbox-tabs button {
  min-height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #777a82;
  font-size: 10px;
  font-weight: 900;
}

.search-tabs button.active,
.inbox-tabs button.active {
  background: linear-gradient(100deg, #4d0018, #20002e 55%, #061c38);
  color: #fff;
  box-shadow: inset 0 0 0 1px #4b2941;
}

.discovery-section {
  margin-top: 17px;
}

.discovery-heading {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.discovery-heading h2 {
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 15px;
  font-style: italic;
}

.discovery-heading span,
.discovery-heading a {
  color: #20a7ff;
  text-decoration: none;
  font-size: 10px;
}

.creator-search-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.creator-search-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid #292a30;
  border-radius: 10px;
  background: #08080a;
  color: #fff;
  text-decoration: none;
}

.creator-search-card > img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border: 1px solid #ffb600;
  border-radius: 50%;
}

.creator-search-card > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.creator-search-card strong {
  display: flex;
  gap: 3px;
  align-items: center;
  overflow: hidden;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 10px;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-search-card span {
  color: #54c8ff;
  font-size: 10px;
  font-weight: 900;
}

.creator-search-card small {
  color: #777b84;
  font-size: 9px;
}

.search-show-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.search-show-card {
  overflow: hidden;
  border: 1px solid #292a30;
  border-radius: 10px;
  background: #08080a;
  color: #fff;
  text-decoration: none;
}

.search-show-card > div {
  position: relative;
  height: 105px;
  overflow: hidden;
}

.search-show-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-show-card .live-badge {
  position: absolute;
  top: 6px;
  left: 6px;
}

.search-show-card > strong {
  display: block;
  min-height: 2.1em;
  margin: 7px 7px 3px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 11px;
  line-height: 1.02;
  font-style: italic;
}

.search-show-card > small {
  display: block;
  margin: 0 7px 8px;
  color: #888b92;
  font-size: 9px;
}

.search-take-row,
.following-take-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 112px;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.search-take-card {
  position: relative;
  height: 150px;
  overflow: hidden;
  border: 1px solid #31323a;
  border-radius: 9px;
  color: #fff;
  text-decoration: none;
}

.search-take-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-take-card > div {
  position: absolute;
  inset: auto 0 0;
  padding: 24px 7px 7px;
  background: linear-gradient(transparent, rgba(0,0,0,.94));
}

.search-take-card strong {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 9px;
  line-height: 1.05;
  font-style: italic;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.search-take-card small {
  color: #b4b5ba;
  font-size: 9px;
}

.search-battle-list {
  display: grid;
  gap: 5px;
}

.search-battle-list a {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid #292a30;
  border-radius: 9px;
  background: #08080a;
  color: #fff;
  text-decoration: none;
}

.search-battle-list strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 11px;
  font-style: italic;
}

.search-battle-list span {
  color: #8c8e95;
  font-size: 10px;
}

.search-battle-list b {
  color: #da0572;
}

.search-empty,
.inbox-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: #686b73;
  text-align: center;
}

.search-empty strong,
.inbox-empty strong {
  color: #b5b6bb;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
}

/* Inbox */
.inbox-page .discovery-header {
  grid-template-columns: 42px 1fr 60px;
}

.inbox-mark-read {
  border: 0;
  background: transparent;
  color: #25aaff;
  font-size: 10px;
}

.inbox-summary {
  min-height: 82px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid #292b31;
  border-radius: 12px;
  background:
    radial-gradient(circle at 10% 50%, rgba(255,0,74,.12), transparent 45%),
    #08080a;
}

.inbox-summary > div {
  display: grid;
  place-items: center;
}

.inbox-summary strong {
  color: #ff4768;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 29px;
  font-style: italic;
}

.inbox-summary span {
  color: #777a82;
  font-size: 10px;
}

.inbox-summary p {
  margin: 0;
  color: #a3a5ab;
  font-size: 10px;
  line-height: 1.4;
}

.inbox-tabs {
  grid-template-columns: 1fr 1fr;
}

.inbox-list {
  display: grid;
  gap: 5px;
}

.inbox-row {
  position: relative;
  min-height: 68px;
  display: grid;
  grid-template-columns: 38px 1fr 28px;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid #24262b;
  border-radius: 10px;
  background: #08080a;
  color: #fff;
  text-decoration: none;
}

.inbox-row.unread {
  border-color: #5b1931;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,0,77,.10), transparent 38%),
    #0a0809;
}

.inbox-row.unread::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff1846;
}

.inbox-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #121217;
  font-size: 17px;
}

.inbox-row > div {
  display: grid;
  gap: 3px;
}

.inbox-row strong {
  font-size: 9px;
}

.inbox-row p {
  margin: 0;
  color: #8d8f97;
  font-size: 10px;
  line-height: 1.35;
}

.inbox-row > small {
  color: #666971;
  font-size: 9px;
}

/* Following */
.following-search {
  justify-self: end;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
}

.following-creators {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 64px;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: none;
}

.following-creators a {
  display: grid;
  place-items: center;
  gap: 4px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}

.following-creators img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border: 2px solid #9d00ff;
  border-radius: 50%;
}

.following-creators span {
  width: 62px;
  overflow: hidden;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 10px;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.following-live-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.following-live-grid > a {
  overflow: hidden;
  border: 1px solid #2a2b31;
  border-radius: 10px;
  background: #08080a;
  color: #fff;
  text-decoration: none;
}

.following-live-grid > a > div {
  position: relative;
  height: 116px;
  overflow: hidden;
}

.following-live-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.following-live-grid .live-badge {
  position: absolute;
  top: 5px;
  left: 5px;
}

.following-live-grid strong,
.following-live-grid small {
  display: block;
  margin: 6px 7px 0;
}

.following-live-grid strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 10px;
  font-style: italic;
}

.following-live-grid small {
  margin-bottom: 7px;
  color: #85878e;
  font-size: 9px;
}

.following-take-row > a {
  position: relative;
  height: 162px;
  overflow: hidden;
  border: 1px solid #2b2c32;
  border-radius: 9px;
  color: #fff;
  text-decoration: none;
}

.following-take-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.following-take-row strong,
.following-take-row span {
  position: absolute;
  left: 7px;
  right: 7px;
  z-index: 2;
  text-shadow: 0 1px 6px #000;
}

.following-take-row strong {
  bottom: 29px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 10px;
  font-style: italic;
}

.following-take-row span {
  bottom: 8px;
  display: -webkit-box;
  overflow: hidden;
  font-size: 10px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.following-take-row > a::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(0,0,0,.94));
}

.following-recommendations {
  display: grid;
  gap: 5px;
}

.following-recommendations article {
  min-height: 59px;
  display: grid;
  grid-template-columns: 1fr 64px;
  gap: 8px;
  align-items: center;
  padding: 6px 7px;
  border: 1px solid #282a2f;
  border-radius: 9px;
  background: #08080a;
}

.following-recommendations article > a {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px;
  align-items: center;
  color: #fff;
  text-decoration: none;
}

.following-recommendations img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 50%;
}

.following-recommendations article > a > div {
  display: grid;
  gap: 3px;
}

.following-recommendations strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 9px;
  font-style: italic;
}

.following-recommendations span {
  color: #52c7ff;
  font-size: 9px;
}

.following-recommendations article > button {
  min-height: 28px;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(100deg,#ef1239,#8c00ff,#2e5fff);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

/* Live Arena comment input */
.live-chat-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 10px;
}

.live-chat-box input::placeholder {
  color: #8d8d94;
}

@media (max-width: 620px) {
  .discovery-page {
    padding: 10px 10px 64px;
  }

  .discovery-header h1 {
    font-size: 17px;
  }

  .creator-search-grid,
  .search-show-grid,
  .following-live-grid {
    grid-template-columns: 1fr 1fr;
  }

  .creator-search-card {
    grid-template-columns: 42px 1fr;
    padding: 6px;
  }

  .creator-search-card > img {
    width: 42px;
    height: 42px;
  }

  .search-show-card > div {
    height: 90px;
  }

  .search-take-row,
  .following-take-row {
    grid-auto-columns: 94px;
  }

  .search-take-card {
    height: 135px;
  }
}
/* === END OMILI v1.1 SOCIAL + DISCOVERY === */


/* =========================================================
   OMILI v1.2 — CONTROL ROOM + BATTLE LIFECYCLE
   ========================================================= */

.circle-button {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.battle-status-pill {
  display: inline-grid;
  place-items: center;
  min-height: 18px;
  padding: 0 6px;
  border: 1px solid #44464e;
  border-radius: 9px;
  color: #b5b6bc;
  font-size: 9px;
  font-weight: 900;
  font-style: normal;
}

.battle-status-pill.status-open {
  border-color: #245b34;
  background: #07170c;
  color: #62e58b;
}

.battle-status-pill.status-locked {
  border-color: #685719;
  background: #191506;
  color: #ffd65a;
}

.battle-status-pill.status-settled {
  border-color: #1f5272;
  background: #06131c;
  color: #5fc8ff;
}

.battle-status-pill.status-void {
  border-color: #673037;
  background: #19090b;
  color: #ff7783;
}

.group-settlement-banner {
  margin-top: 8px;
  padding: 7px;
  border: 1px solid #1d6138;
  border-radius: 8px;
  background: #07170c;
  color: #62e58b;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
}

.group-settlement-banner.void {
  border-color: #69323a;
  background: #1a080a;
  color: #ff7a86;
}

.admin-page {
  width: min(100%, 860px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 13px 14px 60px;
  background: #000;
  color: #fff;
}

.admin-header {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 9px;
  align-items: center;
  margin-bottom: 13px;
}

.admin-header > div {
  text-align: center;
}

.admin-header > div > span {
  color: #a0a3aa;
  font-size: 10px;
  font-weight: 900;
}

.admin-header h1 {
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 23px;
  font-style: italic;
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.admin-summary-grid article {
  min-height: 74px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 1px solid #292b31;
  border-radius: 10px;
  background: #08080a;
  text-align: center;
}

.admin-summary-grid span {
  color: #777a82;
  font-size: 9px;
  font-weight: 900;
}

.admin-summary-grid strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 18px;
  font-style: italic;
}

.admin-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 10px;
  padding: 3px;
  border: 1px solid #282a30;
  border-radius: 11px;
  background: #070708;
}

.admin-tabs button {
  min-height: 33px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #777a82;
  font-size: 10px;
  font-weight: 900;
}

.admin-tabs button.active {
  color: #fff;
  background: linear-gradient(100deg,#4b0017,#1f002e 55%,#061b35);
  box-shadow: inset 0 0 0 1px #4e2942;
}

.admin-message {
  margin-bottom: 9px;
  padding: 8px 10px;
  border: 1px solid #285171;
  border-radius: 9px;
  background: #06131c;
  color: #75d2ff;
  font-size: 10px;
}

.admin-panel {
  padding: 13px;
  border: 1px solid #292b31;
  border-radius: 12px;
  background: #08080a;
}

.admin-panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
  margin-bottom: 12px;
}

.admin-panel-heading h2 {
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 16px;
  font-style: italic;
}

.admin-panel-heading p {
  margin: 3px 0 0;
  color: #777a82;
  font-size: 10px;
}

.admin-panel-heading a {
  color: #25aaff;
  text-decoration: none;
  font-size: 10px;
}

.admin-field {
  display: grid;
  gap: 5px;
  margin-bottom: 9px;
}

.admin-field > span {
  color: #a4a6ad;
  font-size: 10px;
  font-weight: 900;
}

.admin-field input {
  min-height: 38px;
  width: 100%;
  border: 1px solid #30323a;
  border-radius: 8px;
  padding: 0 10px;
  outline: none;
  background: #050506;
  color: #fff;
  font-size: 10px;
}

.admin-toggle-list {
  display: grid;
  gap: 5px;
  margin: 11px 0;
}

.admin-toggle-list label {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border: 1px solid #24262b;
  border-radius: 8px;
  background: #0b0b0d;
  font-size: 10px;
}

.admin-toggle-list input {
  width: 17px;
  height: 17px;
  accent-color: #ff1744;
}

.admin-primary {
  width: 100%;
  min-height: 39px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(100deg,#f01b39,#8d00ff,#2761ff);
  color: #fff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 9px;
  font-style: italic;
  font-weight: 900;
}

.admin-battle-list {
  display: grid;
  gap: 7px;
}

.admin-battle-list article {
  display: grid;
  grid-template-columns: minmax(0,1fr) 1.4fr;
  gap: 9px;
  align-items: center;
  padding: 9px;
  border: 1px solid #292b31;
  border-radius: 9px;
  background: #060607;
}

.admin-battle-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.admin-battle-copy strong {
  overflow: hidden;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 11px;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-battle-copy small {
  color: #777a82;
  font-size: 9px;
}

.admin-battle-actions {
  display: grid;
  grid-template-columns: .7fr 1fr 1fr .6fr;
  gap: 4px;
}

.admin-battle-actions button {
  min-height: 32px;
  border: 1px solid #353740;
  border-radius: 7px;
  background: #0d0d10;
  color: #c8c9ce;
  font-size: 9px;
  font-weight: 900;
}

.admin-battle-actions button.left {
  border-color: #6f1d29;
  color: #ff6c7c;
}

.admin-battle-actions button.right {
  border-color: #4d1c78;
  color: #c173ff;
}

.admin-battle-actions button.void {
  border-color: #5d5f68;
}

.admin-battle-actions button:disabled {
  opacity: .3;
}

.admin-economy-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.admin-economy-grid article {
  min-height: 82px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 1px solid #2a2c32;
  border-radius: 9px;
  background: #060607;
  text-align: center;
}

.admin-economy-grid span {
  color: #777a82;
  font-size: 9px;
  font-weight: 900;
}

.admin-economy-grid strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 20px;
  font-style: italic;
}

.admin-economy-grid small {
  color: #676a71;
  font-size: 9px;
}

.admin-transaction-list {
  display: grid;
  gap: 4px;
}

.admin-transaction-list > div {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  border-bottom: 1px solid #1d1f23;
  font-size: 10px;
}

.admin-transaction-list b.positive {
  color: #5de885;
}

.admin-transaction-list b.negative {
  color: #ff6676;
}

.admin-danger-zone {
  display: grid;
  gap: 5px;
  margin-top: 11px;
  padding: 11px;
  border: 1px dashed #62333a;
  border-radius: 10px;
  background: #0c0708;
}

.admin-danger-zone strong {
  color: #ff7a87;
  font-size: 10px;
}

.admin-danger-zone span {
  color: #7d7073;
  font-size: 10px;
}

.admin-danger-zone button {
  justify-self: start;
  min-height: 28px;
  border: 1px solid #67343b;
  border-radius: 14px;
  padding: 0 9px;
  background: #16090b;
  color: #ff7784;
  font-size: 9px;
  font-weight: 900;
}

@media (max-width:620px) {
  .admin-page {
    padding: 10px 10px 56px;
  }

  .admin-summary-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .admin-battle-list article {
    grid-template-columns: 1fr;
  }

  .admin-battle-actions {
    grid-template-columns: repeat(2,1fr);
  }
}
/* === END OMILI v1.2 CONTROL ROOM + BATTLE LIFECYCLE === */


/* =========================================================
   OMILI v1.3 — SWIPEABLE TAKE BATTLE DECK
   ========================================================= */

.feature-grid > .tb-deck-shell {
  min-width: 0;
}

.tb-deck-shell {
  position: relative;
  min-height: 100%;
  isolation: isolate;
  perspective: 700px;
}

.tb-card,
.tb-caught-up {
  position: relative;
  z-index: 3;
  height: 100%;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 11px;
  background:
    linear-gradient(#050506,#050506) padding-box,
    linear-gradient(115deg,#ff1024,#d70066,#8500ff,#2454ff) border-box;
  color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.36);
  touch-action: pan-y;
  user-select: none;
  will-change: transform;
}

.tb-card {
  cursor: grab;
}

.tb-card:active {
  cursor: grabbing;
}

.tb-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 11px 8px;
  background:
    radial-gradient(circle at 90% 10%,rgba(80,0,255,.09),transparent 34%),
    #050506;
}

.tb-back {
  position: absolute;
  left: 7px;
  right: 7px;
  height: calc(100% - 2px);
  border: 1px solid #252631;
  border-radius: 11px;
  background: #08080b;
  pointer-events: none;
}

.tb-back span {
  position: absolute;
  right: 9px;
  bottom: 6px;
  color: #353740;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 9px;
  font-style: italic;
  font-weight: 900;
}

.tb-back-1 {
  z-index: 2;
  top: 5px;
  opacity: .74;
  transform: scale(.966) translateY(4px);
}

.tb-back-2 {
  z-index: 1;
  top: 10px;
  opacity: .40;
  transform: scale(.93) translateY(7px);
}

.tb-header {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  min-height: 24px;
}

.tb-header > div:first-child,
.tb-header > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tb-header > div:last-child {
  align-items: flex-end;
}

.tb-header span {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 9px;
  font-style: italic;
  font-weight: 900;
}

.tb-header small,
.tb-header strong,
.tb-header a {
  font-size: 9px;
}

.tb-header small {
  color: #747780;
}

.tb-header strong {
  color: #a5a8b0;
}

.tb-header a {
  color: #28aaff;
  text-decoration: none;
  font-weight: 900;
}

.tb-progress {
  height: 3px;
  overflow: hidden;
  margin: 1px 0 5px;
  border-radius: 3px;
  background: #18191e;
}

.tb-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#ff173a,#d9007a,#7500ff,#236aff);
  transition: width .25s ease;
}

.tb-card h2 {
  margin: 2px 0 3px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 19px;
  line-height: .98;
  font-style: italic;
  font-weight: 900;
}

.tb-card > .tb-inner > p {
  min-height: 13px;
  margin: 0 0 4px;
  color: #a3a6ad;
  font-size: 9px;
}

.tb-matchup {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  gap: 4px;
  align-items: center;
  margin-top: auto;
}

.tb-side {
  display: grid;
  min-width: 0;
  place-items: center;
}

.tb-face {
  position: relative;
  width: 64px;
  height: 64px;
  overflow: hidden;
  padding: 0;
  border-radius: 50%;
  background: #080809;
}

.tb-side-left .tb-face {
  border: 1px solid #ff1638;
  box-shadow: 0 0 15px rgba(255,0,45,.20);
}

.tb-side-right .tb-face {
  border: 1px solid #8c00ff;
  box-shadow: 0 0 15px rgba(139,0,255,.22);
}

.tb-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tb-face b {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #48e97d;
  color: #06100a;
  font-size: 9px;
}

.tb-choice {
  width: 100%;
  min-height: 25px;
  margin-top: 4px;
  border-radius: 14px;
  color: #fff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 10px;
  font-style: italic;
  font-weight: 900;
}

.tb-side-left .tb-choice {
  border: 1px solid #ff1537;
  background: #120004;
}

.tb-side-right .tb-choice {
  border: 1px solid #8e00ff;
  background: linear-gradient(#6300a6,#260040);
}

.tb-side-left.selected .tb-choice {
  background: #a9001e;
}

.tb-side-right.selected .tb-choice {
  background: #7300be;
}

.tb-side.selected .tb-face {
  transform: scale(1.05);
}

.tb-stat {
  min-height: 19px;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  opacity: .44;
}

.tb-stat.visible {
  opacity: 1;
}

.tb-stat strong {
  font-size: 10px;
}

.tb-stat span {
  color: #858890;
  font-size: 9px;
  white-space: nowrap;
}

.tb-vs {
  color: #df0874;
  text-align: center;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 21px;
  font-style: italic;
  font-weight: 900;
}

.tb-legend {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 4px;
  align-items: center;
  min-height: 18px;
  color: #53565f;
  font-size: 9px;
  font-weight: 900;
}

.tb-legend b {
  color: #7b7e86;
  font-size: 9px;
}

.tb-legend span:last-child {
  text-align: right;
}

.tb-confirm {
  min-height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  border: 1px solid #215c36;
  border-radius: 8px;
  background: #06110a;
  animation: tbConfirmPop .28s ease both;
}

.tb-confirm span {
  color: #55e77f;
  font-size: 9px;
  font-weight: 900;
}

.tb-confirm strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 10px;
  font-style: italic;
}

.tb-next {
  min-height: 27px;
  border: 0;
  background: transparent;
  color: #92959d;
  font-size: 9px;
  font-weight: 900;
}

.tb-swipe-stamp {
  position: absolute;
  z-index: 10;
  top: 35px;
  width: 76px;
  min-height: 46px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 8px;
  pointer-events: none;
  backdrop-filter: blur(6px);
}

.tb-swipe-stamp span {
  font-size: 9px;
  font-weight: 900;
}

.tb-swipe-stamp strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 12px;
  line-height: .95;
  font-style: italic;
  text-align: center;
}

.tb-swipe-left {
  left: 8px;
  border: 2px solid #ff183a;
  background: rgba(72,0,12,.76);
  color: #ff7890;
  transform: rotate(-7deg);
}

.tb-swipe-right {
  right: 8px;
  border: 2px solid #8e13ff;
  background: rgba(43,0,72,.78);
  color: #d39aff;
  transform: rotate(7deg);
}

.tb-exit-left {
  animation: tbExitLeft .30s ease forwards;
}

.tb-exit-right {
  animation: tbExitRight .30s ease forwards;
}

@keyframes tbExitLeft {
  to { transform: translateX(-145%) rotate(-13deg); opacity: 0; }
}

@keyframes tbExitRight {
  to { transform: translateX(145%) rotate(13deg); opacity: 0; }
}

@keyframes tbConfirmPop {
  from { transform: scale(.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.tb-loading {
  min-height: 100%;
  display: grid;
  place-items: center;
  border: 1px solid #292b32;
  border-radius: 11px;
  background: #070709;
  color: #70737b;
  font-size: 10px;
}

.tb-caught-up {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 12px;
  text-align: center;
}

.tb-caught-up > div {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #27633c;
  border-radius: 50%;
  background: #07170c;
  color: #56e982;
  font-size: 17px;
  font-weight: 900;
}

.tb-caught-up > span {
  color: #73767e;
  font-size: 9px;
  font-weight: 900;
}

.tb-caught-up h2 {
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 19px;
  font-style: italic;
}

.tb-caught-up p {
  margin: 0;
  color: #898c94;
  font-size: 9px;
}

.tb-caught-up > i {
  width: 80%;
  height: 4px;
  overflow: hidden;
  border-radius: 3px;
  background: #18191e;
}

.tb-caught-up > i > b {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,#ff1538,#8500ff,#2670ff);
}

.tb-caught-up > strong {
  color: #58e982;
  font-size: 9px;
}

.tb-caught-up > a {
  color: #29aaff;
  text-decoration: none;
  font-size: 9px;
  font-weight: 900;
}

/* All Take Battles progress */
.take-list-summary {
  display: grid;
  gap: 6px;
  margin: 0 auto 12px;
  padding: 12px;
  border: 1px solid #292b31;
  border-radius: 11px;
  background: #08080a;
}

.take-list-summary > div:first-child {
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.take-list-summary span {
  color: #777a82;
  font-size: 10px;
  font-weight: 900;
}

.take-list-summary strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 20px;
  font-style: italic;
}

.take-list-summary > div:nth-child(2) {
  height: 5px;
  overflow: hidden;
  border-radius: 4px;
  background: #191a20;
}

.take-list-summary i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg,#ff1538,#a600ff,#2470ff);
}

.take-list-summary p {
  margin: 0;
  color: #777a82;
  font-size: 10px;
}

.take-list-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.take-list-card-header > div {
  display: flex;
  gap: 6px;
  align-items: center;
}

.take-list-card-header span,
.take-list-card-header b {
  color: #777a82;
  font-size: 9px;
}

.take-list-card-header > strong {
  padding: 3px 6px;
  border: 1px solid #3b3d45;
  border-radius: 8px;
  color: #8e9198;
  font-size: 9px;
}

.take-list-card.completed .take-list-card-header > strong {
  border-color: #215b36;
  background: #07170c;
  color: #5de984;
}

@media (max-width:620px) {
  .feature-grid > .tb-deck-shell {
    height: 195px;
  }

  .tb-inner {
    padding: 7px 8px 5px;
  }

  .tb-header {
    min-height: 18px;
  }

  .tb-header span {
    font-size: 10px;
  }

  .tb-header small,
  .tb-header strong,
  .tb-header a {
    font-size: 9px;
  }

  .tb-progress {
    margin-bottom: 3px;
  }

  .tb-card h2 {
    font-size: 15px;
  }

  .tb-card > .tb-inner > p {
    min-height: 11px;
    margin-bottom: 2px;
    font-size: 9px;
  }

  .tb-matchup {
    grid-template-columns: 1fr 21px 1fr;
  }

  .tb-face {
    width: 48px;
    height: 48px;
  }

  .tb-choice {
    min-height: 20px;
    margin-top: 2px;
    font-size: 9px;
  }

  .tb-stat {
    min-height: 14px;
  }

  .tb-stat strong {
    font-size: 9px;
  }

  .tb-stat span {
    font-size: 9px;
  }

  .tb-vs {
    font-size: 16px;
  }

  .tb-legend {
    min-height: 12px;
    font-size: 9px;
  }

  .tb-legend b {
    font-size: 9px;
  }

  .tb-confirm {
    min-height: 22px;
  }

  .tb-confirm span,
  .tb-confirm strong {
    font-size: 9px;
  }

  .tb-swipe-stamp {
    top: 27px;
    width: 60px;
    min-height: 36px;
  }

  .tb-swipe-stamp span {
    font-size: 9px;
  }

  .tb-swipe-stamp strong {
    font-size: 9px;
  }

  .tb-caught-up h2 {
    font-size: 15px;
  }

  .tb-caught-up p,
  .tb-caught-up > strong,
  .tb-caught-up > a {
    font-size: 9px;
  }
}
/* === END OMILI v1.3 SWIPEABLE TAKE BATTLE DECK === */


/* =========================================================
   OMILI v1.4 — UX HARDENING / READABILITY / LIVE PLACEMENT
   ========================================================= */

:root {
  --omili-text-xs: 10px;
  --omili-text-sm: 12px;
  --omili-text-md: 14px;
  --omili-title-sm: 16px;
  --omili-title-md: 20px;
  --omili-title-lg: 25px;
}

/* Base readability: never let normal app copy collapse into micro-text. */
body {
  font-size: var(--omili-text-md);
  line-height: 1.25;
}

button,
input,
textarea,
select {
  line-height: 1.2;
}

/* Reusable metadata scale. */
.score-card .league,
.score-card .minute,
.score-team-name,
.prediction-intel-kicker,
.prediction-intel-metrics span,
.hot-takes,
.reward-sub,
.creator-pp-label,
.creator-rep-label,
.show-meta,
.upcoming-time,
.wallet-tx-time,
.take-list-card-header,
.inbox-row small,
.following-live-grid small,
.creator-search-card small,
.search-show-card small {
  font-size: var(--omili-text-xs) !important;
}

/* Main body/supporting text. */
.feature-grid p,
.show-card p,
.creator-hero-copy p,
.creator-recorded-card p,
.prediction-card p,
.hot-take-question p,
.hot-playback-meta,
.live-comment-stack,
.live-chat-box,
.group-game-card p,
.take-list-summary p,
.inbox-summary p,
.inbox-row p,
.admin-panel-heading p {
  font-size: var(--omili-text-sm) !important;
}

/* Editorial titles: enough presence without becoming oversized. */
.feature-grid h2,
.show-card h3,
.take-list-question,
.creator-recorded-card h2,
.prediction-section-heading h2,
.hot-take-question h2,
.live-header-copy h1,
.battle-dock > strong,
.group-game-card h2 {
  font-size: clamp(17px, 4vw, 22px) !important;
  line-height: 1.02;
}

.section-title,
.debate-section-heading h3,
.discovery-heading h2 {
  font-size: clamp(14px, 3.2vw, 18px) !important;
}

/* Buttons/CTAs should always be legible and tappable. */
.primary-yellow,
.join-show,
.upcoming-cta,
.hot-take-main,
.live-hot-take-cta,
.hot-playback-drop,
.group-confirm,
.admin-primary {
  min-height: 40px;
  font-size: clamp(12px, 2.8vw, 15px) !important;
  line-height: 1;
}

/* Bottom navigation is important UI, not footnote text. */
.bottom-nav small,
.live-bottom-nav small,
.nav-item small {
  font-size: 10px !important;
}

.bottom-nav > *,
.live-bottom-nav > * {
  min-height: 56px;
}

/* ---------------------------------------------------------
   LIVE SHOW: KEEP PORTRAIT VIDEO, MOVE VOTING TOWARD THE TOP
   --------------------------------------------------------- */

.live-arena {
  --live-safe-x: 14px;
}

/*
  Header remains where it is.
  Group Battle moves below the show header toward the upper part of the
  portrait stream, instead of sitting above chat / Hot Take at the bottom.
*/
.live-battle-dock-top {
  top: 112px !important;
  bottom: auto !important;
  left: var(--live-safe-x) !important;
  right: 66px !important;
  min-height: 86px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(rgba(5,5,7,.92),rgba(5,5,7,.92)) padding-box,
    linear-gradient(100deg,#ff1739,#a100ff,#2864ff) border-box !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.34),
    0 0 18px rgba(100,0,255,.10) !important;
  backdrop-filter: blur(12px);
}

.live-battle-dock-top .battle-dock-top {
  font-size: 10px !important;
}

.live-battle-dock-top .battle-dock-top > span {
  font-size: 11px !important;
}

.live-battle-dock-top > strong {
  margin: 2px 0;
  font-size: clamp(16px, 3.8vw, 20px) !important;
}

.live-battle-dock-top .battle-dock-result {
  grid-template-columns: auto minmax(50px,1fr) 32px 32px auto;
  gap: 6px;
  font-size: 10px !important;
}

.live-battle-dock-top .battle-dock-result > div {
  height: 7px;
}

.live-battle-dock-top small {
  font-size: 10px !important;
  line-height: 1.1;
}

/* Reaction rail now starts below the upper Group Battle dock. */
.live-arena-actions {
  top: 220px !important;
}

.live-arena-actions button {
  width: 50px;
  min-height: 58px;
}

.live-arena-actions b {
  font-size: 11px !important;
}

.live-arena-actions span {
  font-size: 10px !important;
}

/*
  With voting removed from the lower third, comments regain the space that
  resembles the existing Omili live show.
*/
.live-comment-stack {
  left: var(--live-safe-x) !important;
  right: 68px !important;
  bottom: 154px !important;
  max-height: 170px;
  overflow: hidden;
  gap: 7px !important;
}

.live-comment-stack > div {
  grid-template-columns: auto minmax(0,1fr);
  gap: 8px !important;
  font-size: 12px !important;
  line-height: 1.22;
}

.live-stream-controls {
  left: var(--live-safe-x) !important;
  right: var(--live-safe-x) !important;
  bottom: 116px !important;
  min-height: 26px;
}

.live-stream-controls > span {
  font-size: 10px !important;
}

.live-stream-controls > div {
  height: 5px !important;
}

.live-chat-box {
  left: var(--live-safe-x) !important;
  right: var(--live-safe-x) !important;
  bottom: 61px !important;
  min-height: 43px !important;
  padding-left: 14px !important;
  font-size: 12px !important;
}

.live-chat-box input {
  font-size: 12px !important;
}

.live-hot-take-cta {
  bottom: 9px !important;
  width: min(250px, 66vw) !important;
  height: 43px !important;
}

/* Header readability. */
.live-header-copy > div {
  font-size: 10px !important;
}

.live-header-copy > a {
  font-size: 11px !important;
}

.live-header-copy h1 {
  font-size: clamp(19px, 4.5vw, 24px) !important;
}

.live-follow {
  min-height: 34px !important;
  padding: 0 12px !important;
  font-size: 11px !important;
}

.live-back,
.live-more {
  width: 38px !important;
  height: 38px !important;
}

/* Expanded battle bottom sheet gets a comfortable reading scale too. */
.live-battle-sheet-heading span {
  font-size: 13px !important;
}

.live-battle-sheet-heading b {
  font-size: 10px !important;
}

/* ---------------------------------------------------------
   TAKE BATTLE: preserve swipe mechanic while making text clear
   --------------------------------------------------------- */

.tb-header span {
  font-size: 11px !important;
}

.tb-header small,
.tb-header strong,
.tb-header a {
  font-size: 9px !important;
}

.tb-card h2 {
  font-size: clamp(17px, 4vw, 21px) !important;
}

.tb-card > .tb-inner > p {
  font-size: 10px !important;
}

.tb-choice {
  min-height: 28px !important;
  font-size: 10px !important;
}

.tb-stat strong {
  font-size: 11px !important;
}

.tb-stat span,
.tb-legend,
.tb-legend b {
  font-size: 9px !important;
}

.tb-confirm span,
.tb-confirm strong,
.tb-next {
  font-size: 9px !important;
}

/* ---------------------------------------------------------
   HOT TAKE / SHORT PLAYBACK
   --------------------------------------------------------- */

.hot-playback-author strong {
  font-size: 12px !important;
}

.hot-playback-author > div > span {
  font-size: 10px !important;
}

.hot-playback-actions b {
  font-size: 12px !important;
}

.hot-playback-actions span {
  font-size: 10px !important;
}

.hot-playback-viewers b,
.hot-playback-tags span,
.hot-playback-progress > span,
.hot-playback-reply > span {
  font-size: 10px !important;
}

/* ---------------------------------------------------------
   SEARCH / FOLLOWING / INBOX / ADMIN
   --------------------------------------------------------- */

.discovery-header h1,
.admin-header h1 {
  font-size: clamp(20px, 5vw, 26px) !important;
}

.search-shell input,
.admin-field input {
  font-size: 13px !important;
}

.search-tabs button,
.inbox-tabs button,
.inbox-mark-read,
.following-recommendations article > button,
.admin-tabs button,
.admin-battle-actions button {
  font-size: 10px !important;
}

.creator-search-card strong,
.following-recommendations strong,
.inbox-row strong {
  font-size: 12px !important;
}

.creator-search-card span,
.following-recommendations span {
  font-size: 10px !important;
}

.admin-summary-grid span,
.admin-field > span,
.admin-danger-zone strong,
.admin-danger-zone span {
  font-size: 10px !important;
}

/* ---------------------------------------------------------
   430px MOBILE TARGET
   --------------------------------------------------------- */

@media (max-width: 620px) {
  /*
    Do not re-introduce the v1.3 3–6px mobile typography. The mobile view is
    the main experience and therefore gets a deliberate minimum size.
  */
  .feature-grid > .tb-deck-shell {
    height: 220px !important;
  }

  .tb-inner {
    padding: 9px 9px 7px !important;
  }

  .tb-face {
    width: 54px !important;
    height: 54px !important;
  }

  .live-battle-dock-top {
    top: 108px !important;
    right: 62px !important;
    min-height: 82px !important;
  }

  .live-arena-actions {
    top: 208px !important;
  }

  .live-comment-stack {
    bottom: 153px !important;
    max-height: 145px;
  }

  .live-stream-controls {
    bottom: 116px !important;
  }

  .live-chat-box {
    bottom: 61px !important;
  }

  .live-hot-take-cta {
    bottom: 9px !important;
  }
}

/* Very short screens: compact vertical spacing, never shrink text below readable size. */
@media (max-height: 700px) {
  .live-battle-dock-top {
    top: 100px !important;
    min-height: 74px !important;
  }

  .live-arena-actions {
    top: 188px !important;
  }

  .live-comment-stack {
    max-height: 105px;
    bottom: 143px !important;
  }

  .live-stream-controls {
    bottom: 108px !important;
  }

  .live-chat-box {
    bottom: 57px !important;
    min-height: 39px !important;
  }

  .live-hot-take-cta {
    height: 39px !important;
    bottom: 8px !important;
  }
}
/* === END OMILI v1.4 UX HARDENING === */


/* v1.4 internal QA route */
.qa-page {
  width: min(100%, 620px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 14px 14px 60px;
  background: #000;
  color: #fff;
}

.qa-page > header {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
}

.qa-page > header span {
  color: #ff3153;
  font-size: 10px;
  font-weight: 900;
}

.qa-page > header h1 {
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 24px;
  font-style: italic;
}

.qa-intro {
  margin: 16px 0;
  color: #999ca4;
  font-size: 12px;
  line-height: 1.45;
}

.qa-page > section {
  display: grid;
  gap: 7px;
}

.qa-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #292b31;
  border-radius: 10px;
  background: #08080a;
  color: #fff;
  text-decoration: none;
}

.qa-row > div {
  display: grid;
  gap: 4px;
}

.qa-row strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 14px;
  font-style: italic;
}

.qa-row span {
  color: #7f828a;
  font-size: 10px;
}

.qa-row b {
  color: #25aaff;
  font-size: 10px;
}

.qa-note {
  margin-top: 14px;
  padding: 10px;
  border: 1px dashed #4c3658;
  border-radius: 9px;
  color: #a8a0ae;
  font-size: 10px;
  line-height: 1.4;
}

/* =========================================================
   OMILI v1.5 — PROFILE RATING / IDENTITY LAYER
   ========================================================= */
.creator-profile-v15 .creator-profile-hero{border-bottom:1px solid #202127}
.creator-ovr-badge{position:absolute;z-index:6;top:85px;right:22px;width:94px;min-height:98px;display:grid;place-items:center;align-content:center;border:1px solid transparent;border-radius:18px;background:linear-gradient(rgba(4,4,5,.72),rgba(4,4,5,.86)) padding-box,linear-gradient(145deg,#e6e8ef,#858995,#3a3d47) border-box;color:#fff;text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.35),0 0 24px rgba(255,255,255,.05);backdrop-filter:blur(9px)}
.creator-ovr-badge.rating-gold{background:linear-gradient(rgba(13,10,3,.72),rgba(5,5,6,.9)) padding-box,linear-gradient(145deg,#fff0a3,#d9a51e,#6f4a00) border-box}
.creator-ovr-badge.rating-elite{background:linear-gradient(rgba(6,5,10,.72),rgba(4,4,6,.92)) padding-box,linear-gradient(145deg,#fff7ba,#f4b622,#a30eff,#2a78ff) border-box;box-shadow:0 12px 30px rgba(0,0,0,.35),0 0 28px rgba(158,0,255,.13)}
.creator-ovr-badge strong{display:block;font-family:var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;font-size:46px;line-height:.9;font-style:italic;letter-spacing:-1px}.creator-ovr-badge>span{margin-top:4px;color:#f0f0f3;font-size:11px;font-weight:950;letter-spacing:1.5px}.creator-ovr-badge>small{width:82px;margin-top:5px;overflow:hidden;color:#a6a8af;font-size:9px;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}
.creator-rating-wrap{padding:7px 30px 14px}.omili-rating-card{position:relative;overflow:hidden;border:1px solid transparent;border-radius:18px;background:linear-gradient(#08080a,#08080a) padding-box,linear-gradient(125deg,#777b86,#30333c 44%,#737782) border-box;color:#fff;box-shadow:0 14px 38px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.02)}.omili-rating-card.rating-gold{background:linear-gradient(#080807,#08080a) padding-box,linear-gradient(125deg,#f4d45d,#916812 38%,#552500 68%,#d19b24) border-box}.omili-rating-card.rating-elite{background:linear-gradient(#070709,#07070a) padding-box,linear-gradient(120deg,#f5d96b,#ff5d24 24%,#b308e8 53%,#2f78ff 80%,#dff4ff) border-box;box-shadow:0 14px 38px rgba(0,0,0,.32),0 0 28px rgba(107,0,255,.11)}.omili-rating-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 9% 28%,rgba(255,214,54,.09),transparent 27%),radial-gradient(circle at 91% 15%,rgba(91,41,255,.11),transparent 30%),linear-gradient(110deg,transparent 50%,rgba(255,255,255,.015) 50%)}
.rating-card-header{position:relative;z-index:2;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px 8px;border-bottom:1px solid #22242a}.rating-card-header>div{display:flex;align-items:center;gap:8px}.rating-card-header span{font-family:var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;font-size:13px;font-style:italic;font-weight:950}.rating-card-header strong{padding:4px 8px;border:1px solid #454752;border-radius:11px;background:#111216;color:#c2c4ca;font-size:10px;letter-spacing:.4px}.rating-info-button{width:30px;height:30px;display:grid;place-items:center;border:1px solid #41434b;border-radius:50%;background:#111216;color:#c8cad0;font-family:Georgia,serif!important;font-size:14px!important;font-weight:900}
.rating-card-main{position:relative;z-index:2;display:grid;grid-template-columns:138px 1fr;gap:0}.rating-overall-panel{min-height:262px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 12px;border-right:1px solid #22242a;text-align:center}.rating-overall-label{color:#b2b4ba;font-size:11px;font-weight:950;letter-spacing:2px}.rating-overall-number{margin:2px 0 7px;font-family:var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;font-size:72px;line-height:.84;font-style:italic;letter-spacing:-2px;text-shadow:0 3px 18px rgba(255,255,255,.07)}.rating-gold .rating-overall-number{color:#f1cf58}.rating-elite .rating-overall-number{background:linear-gradient(135deg,#fff2a5,#ffc52f 30%,#f372ff 62%,#69a7ff);-webkit-background-clip:text;background-clip:text;color:transparent}.rating-archetype{display:block;max-width:110px;font-family:var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;font-size:14px;line-height:1.05;font-style:italic;font-weight:900}.rating-overall-panel small{margin-top:6px;color:#686b73;font-size:10px}
.rating-card-detail{min-width:0;padding:12px}.rating-primary-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.rating-metric{min-width:0;min-height:70px;display:grid;place-items:center;align-content:center;gap:2px;border:1px solid #2b2d34;border-radius:10px;background:#0c0c0f;text-align:center}.rating-metric>span{color:#858890;font-size:10px;font-weight:950}.rating-metric>strong{overflow:hidden;font-family:var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;font-size:19px;line-height:1;font-style:italic;text-overflow:ellipsis;white-space:nowrap}.rating-metric>small{color:#666971;font-size:9px;white-space:nowrap}.rating-metric.rep{border-color:#512470;background:radial-gradient(circle at 80% 15%,rgba(166,40,255,.13),transparent 40%),#0c0c0f}.rating-metric.rep>strong{color:#cb76ff}.rating-metric.pp{border-color:#185376;background:radial-gradient(circle at 80% 15%,rgba(23,165,255,.14),transparent 40%),#0c0c0f}.rating-metric.pp>strong{color:#4dc8ff}.rating-metric.accuracy>strong{color:#6ce896}.rating-metric.tokens>strong{color:#ffcc34}
.rating-attribute-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.rating-attribute{min-width:0;min-height:72px;padding:8px;border:1px solid #24262c;border-radius:10px;background:#0a0a0d}.rating-attribute>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:5px}.rating-attribute>div:first-child>span{color:#c8cad0;font-family:var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;font-size:11px;font-style:italic;font-weight:950}.rating-attribute>div:first-child>strong{font-family:var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;font-size:18px;font-style:italic}.rating-attribute-track{height:5px;overflow:hidden;margin:6px 0 5px;border-radius:4px;background:#1c1d22}.rating-attribute-track>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff203f,#b600d9,#246fff)}.rating-gold .rating-attribute-track>i{background:linear-gradient(90deg,#9d5c00,#f0c43d,#fff0a1)}.rating-elite .rating-attribute-track>i{background:linear-gradient(90deg,#ff1f42,#f5c232,#a811ef,#2e78ff)}.rating-attribute>small{display:block;overflow:hidden;color:#696c74;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.rating-card-footer{position:relative;z-index:2;min-height:39px;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;padding:0 13px;border-top:1px solid #22242a;background:rgba(0,0,0,.22);color:#777a82;font-size:9px;text-align:center}.rating-card-footer span+span{border-left:1px solid #24262c}.rating-card-footer b{color:#d9dadd}
.rating-info-backdrop{position:fixed;z-index:180;inset:0;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.68);backdrop-filter:blur(6px)}.rating-info-sheet{width:min(100%,620px);max-height:78dvh;overflow-y:auto;padding:10px 18px 20px;border:1px solid #353740;border-radius:22px 22px 0 0;background:radial-gradient(circle at 90% 5%,rgba(112,0,255,.11),transparent 34%),#08080a;color:#fff}.rating-info-handle{width:40px;height:4px;margin:0 auto 11px;border-radius:3px;background:#555861}.rating-info-sheet>header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:11px;border-bottom:1px solid #23252b}.rating-info-sheet>header span{color:#9872ff;font-size:10px;font-weight:950}.rating-info-sheet>header h2{margin:3px 0 0;font-family:var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;font-size:21px;font-style:italic}.rating-info-sheet>header button{width:34px;height:34px;border:1px solid #383a42;border-radius:50%;background:#111216;color:#fff;font-size:20px!important}.rating-info-overview{display:grid;gap:7px;margin-top:12px}.rating-info-overview article{display:grid;grid-template-columns:54px 1fr;gap:9px;align-items:start;padding:9px;border:1px solid #26282e;border-radius:9px;background:#0b0b0e}.rating-info-overview strong{color:#fff;font-family:var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;font-size:14px;font-style:italic}.rating-info-overview span{color:#999ca4;font-size:11px;line-height:1.35}.rating-info-attributes{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px}.rating-info-attributes>div{min-height:62px;display:grid;grid-template-columns:40px 1fr;gap:8px;align-items:start;padding:9px;border:1px solid #24262c;border-radius:9px;background:#0a0a0c}.rating-info-attributes b{color:#68caff;font-family:var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;font-size:13px;font-style:italic}.rating-info-attributes span{color:#777a82;font-size:10px;line-height:1.25}.rating-info-attributes span strong{display:block;margin-bottom:2px;color:#d8d9dd;font-size:11px}.rating-info-close{width:100%;min-height:42px;margin-top:13px;border:0;border-radius:22px;background:linear-gradient(100deg,#f31d3d,#9800f0,#2768ff);color:#fff;font-family:var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;font-size:13px!important;font-style:italic;font-weight:950}
.creator-career-section{margin:3px 30px 4px;border-top:1px solid #202127}.creator-career-section>header{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0 2px}.creator-career-section>header>div{display:flex;align-items:center;gap:8px}.creator-career-section>header span{font-family:var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;font-size:15px;font-style:italic;font-weight:950}.creator-career-section>header strong{padding:4px 8px;border:1px solid #31333a;border-radius:10px;color:#8e9198;font-size:9px}.creator-career-section>header small{color:#676a72;font-size:10px}.creator-career-section .creator-stats{padding:13px 0 20px}.creator-career-section .creator-stats>div{position:relative}.creator-career-section .creator-stats>div+div::before{content:"";position:absolute;top:6px;bottom:6px;left:0;width:1px;background:#1f2025}
.creator-channel-list{display:grid;gap:8px;padding-top:16px}.creator-channel-list article{min-height:72px;display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:9px;border:1px solid #292b31;border-radius:10px;background:#08080a}.creator-channel-mark{width:46px;height:46px;display:grid;place-items:center;border:1px solid #af00ff;border-radius:50%;background:radial-gradient(circle,#2f0052,#070708 70%);color:#fff;font-family:var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;font-size:22px;font-style:italic}.creator-channel-mark.alt{border-color:#ff2747;background:radial-gradient(circle,#51000d,#070708 70%);font-family:inherit;font-style:normal}.creator-channel-list article>div:nth-child(2){display:grid;gap:3px}.creator-channel-list article>div:nth-child(2)>strong{font-family:var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;font-size:13px;font-style:italic}.creator-channel-list article>div:nth-child(2)>span{color:#777a82;font-size:10px;line-height:1.25}.creator-channel-list article>button{min-height:32px;padding:0 11px;border:1px solid #4a2a64;border-radius:16px;background:#150a1d;color:#d68bff;font-size:10px!important;font-weight:900}
@media(max-width:620px){.creator-ovr-badge{top:76px;right:17px;width:78px;min-height:84px;border-radius:15px}.creator-ovr-badge strong{font-size:39px}.creator-ovr-badge>span{font-size:10px}.creator-ovr-badge>small{width:68px;font-size:9px}.creator-rating-wrap{padding:7px 16px 12px}.omili-rating-card{border-radius:15px}.rating-card-header{min-height:42px;padding:8px 10px 7px}.rating-card-header span{font-size:11px}.rating-card-header strong{padding:3px 7px;font-size:9px}.rating-info-button{width:28px;height:28px}.rating-card-main{grid-template-columns:102px 1fr}.rating-overall-panel{min-height:242px;padding:12px 7px}.rating-overall-label{font-size:10px}.rating-overall-number{font-size:57px}.rating-archetype{max-width:90px;font-size:12px}.rating-overall-panel small{font-size:9px}.rating-card-detail{padding:8px}.rating-primary-metrics{grid-template-columns:repeat(2,1fr);gap:5px}.rating-metric{min-height:57px;border-radius:8px}.rating-metric>span{font-size:9px}.rating-metric>strong{font-size:16px}.rating-metric>small{font-size:9px}.rating-attribute-grid{grid-template-columns:repeat(3,1fr);gap:5px;margin-top:7px}.rating-attribute{min-height:60px;padding:6px;border-radius:8px}.rating-attribute>div:first-child>span{font-size:9px}.rating-attribute>div:first-child>strong{font-size:15px}.rating-attribute-track{height:4px;margin:5px 0 4px}.rating-attribute>small{font-size:9px}.rating-card-footer{min-height:35px;padding:0 8px;font-size:9px}.creator-career-section{margin:1px 16px 3px}.creator-career-section>header{min-height:46px}.creator-career-section>header span{font-size:13px}.creator-career-section>header small{display:none}.creator-career-section .creator-stats{padding:10px 0 17px}.creator-career-section .creator-stats strong{font-size:19px!important}.creator-career-section .creator-stats span{font-size:9px!important}.creator-channel-list article{grid-template-columns:42px 1fr auto;gap:8px;padding:8px}.creator-channel-mark{width:40px;height:40px;font-size:19px}.creator-channel-list article>div:nth-child(2)>strong{font-size:12px}.creator-channel-list article>div:nth-child(2)>span{font-size:9px}.creator-channel-list article>button{min-height:30px;padding:0 8px;font-size:9px!important}}
@media(max-width:620px) and (max-height:760px){.creator-profile-hero{min-height:560px!important}.creator-rating-wrap{padding-top:5px}}
/* === END OMILI v1.5 PROFILE RATING / IDENTITY LAYER === */


/* =========================================================
   OMILI v1.6 — BACKEND ACTIVATION
   ========================================================= */

.following-empty-state {
  min-height: 126px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  margin-top: 6px;
  padding: 14px;
  border: 1px dashed #343640;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%,rgba(95,0,255,.11),transparent 52%),
    #08080a;
  text-align: center;
}

.following-empty-state strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 16px;
  font-style: italic;
}

.following-empty-state span {
  max-width: 330px;
  color: #8b8e96;
  font-size: 11px;
  line-height: 1.35;
}

.following-empty-state a {
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0 16px;
  border-radius: 18px;
  background: linear-gradient(100deg,#f11a3a,#8f00ed,#2867ff);
  color: #fff;
  text-decoration: none;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 900;
}

.backend-status-page {
  width: min(100%, 720px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 14px 14px 64px;
  background: #000;
  color: #fff;
}

.backend-status-page > header {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
}

.backend-status-page > header span {
  color: #6dcbff;
  font-size: 10px;
  font-weight: 900;
}

.backend-status-page > header h1 {
  margin: 1px 0 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 24px;
  font-style: italic;
}

.backend-status-hero {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 6px;
  margin-top: 14px;
}

.backend-status-hero > div {
  min-height: 74px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid #292b31;
  border-radius: 10px;
  background: #08080a;
  text-align: center;
}

.backend-status-hero span {
  color: #777a82;
  font-size: 9px;
  font-weight: 900;
}

.backend-status-hero strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 17px;
  font-style: italic;
}

.backend-status-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 10px 0;
}

.backend-status-actions > * {
  min-height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #32343c;
  border-radius: 20px;
  background: #0b0b0e;
  color: #fff;
  text-decoration: none;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 900;
}

.backend-status-actions button {
  background: linear-gradient(100deg,#12283d,#14101d);
}

.backend-check-list {
  display: grid;
  gap: 6px;
}

.backend-check-list article {
  min-height: 64px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 9px;
  align-items: center;
  padding: 9px;
  border: 1px solid #30323a;
  border-radius: 10px;
  background: #08080a;
}

.backend-check-list article > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
}

.backend-check-list article.passed > span {
  border: 1px solid #26603a;
  background: #07170c;
  color: #5be987;
}

.backend-check-list article.failed > span {
  border: 1px solid #68343b;
  background: #19090b;
  color: #ff7784;
}

.backend-check-list article > div {
  display: grid;
  gap: 3px;
}

.backend-check-list strong {
  font-size: 12px;
}

.backend-check-list p {
  margin: 0;
  color: #858890;
  font-size: 10px;
  line-height: 1.3;
}

.backend-setup-note {
  display: grid;
  gap: 5px;
  margin-top: 11px;
  padding: 11px;
  border: 1px solid #5d4916;
  border-radius: 10px;
  background: #151004;
}

.backend-setup-note strong {
  color: #ffd861;
  font-size: 10px;
}

.backend-setup-note p {
  margin: 0;
  color: #ae9e71;
  font-size: 10px;
  line-height: 1.4;
}

.backend-status-footnote {
  margin-top: 12px;
  padding: 10px;
  border: 1px dashed #343640;
  border-radius: 9px;
  color: #858890;
  font-size: 10px;
  line-height: 1.45;
}

@media (max-width:620px) {
  .backend-status-page {
    padding: 10px 10px 60px;
  }

  .backend-status-hero {
    grid-template-columns: repeat(2,1fr);
  }
}
/* === END OMILI v1.6 BACKEND ACTIVATION === */


/* =========================================================
   OMILI v1.7 — REAL USER ONBOARDING + EDITABLE PROFILES
   ========================================================= */

/* Bottom-nav uploaded avatar */
.account-nav-avatar-photo {
  display: block !important;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ---------------- ONBOARDING ---------------- */
.onboarding-page,
.profile-editor-page {
  width: min(100%, 680px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 14px 14px 76px;
  background:
    radial-gradient(circle at 80% 0%, rgba(108,0,255,.09), transparent 26%),
    #000;
  color: #fff;
}

.onboarding-loading,
.profile-editor-loading {
  min-height: 70vh;
  display: grid;
  place-items: center;
  color: #8c8f97;
  font-size: 12px;
}

.onboarding-auth-required,
.profile-editor-auth {
  max-width: 500px;
  min-height: 420px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  margin: 80px auto 0;
  padding: 22px;
  border: 1px solid #292b31;
  border-radius: 18px;
  background: #08080a;
  text-align: center;
}

.onboarding-auth-required > span {
  color: #a96cff;
  font-size: 10px;
  font-weight: 900;
}

.onboarding-auth-required h1,
.profile-editor-auth h1 {
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 26px;
  font-style: italic;
}

.onboarding-auth-required p {
  max-width: 390px;
  margin: 0;
  color: #8f929a;
  font-size: 12px;
  line-height: 1.45;
}

.onboarding-auth-required a,
.profile-editor-auth a {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 0 22px;
  border-radius: 22px;
  background: linear-gradient(100deg,#ff193d,#9800ef,#2868ff);
  color: #fff;
  text-decoration: none;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 900;
}

.onboarding-topbar,
.profile-editor-header {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
}

.onboarding-topbar > div,
.profile-editor-header > div {
  display: grid;
  gap: 2px;
  text-align: center;
}

.onboarding-topbar > div > span,
.profile-editor-header > div > span {
  color: #8b61ff;
  font-size: 9px;
  font-weight: 900;
}

.onboarding-topbar > div > strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 16px;
  font-style: italic;
}

.profile-editor-header h1 {
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 21px;
  font-style: italic;
}

.onboarding-topbar > button,
.profile-editor-header > button {
  border: 0;
  background: transparent;
  color: #80838b;
  font-size: 10px;
  font-weight: 900;
}

.onboarding-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 14px 0 12px;
}

.onboarding-progress i {
  height: 4px;
  border-radius: 3px;
  background: #1e1f24;
}

.onboarding-progress i.active {
  background: linear-gradient(90deg,#ff193b,#9a00ef,#276bff);
}

.onboarding-card,
.profile-editor-card {
  padding: 18px;
  border: 1px solid #2b2d34;
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 8%,rgba(105,0,255,.10),transparent 32%),
    #08080a;
}

.onboarding-kicker {
  color: #b878ff;
  font-size: 10px;
  font-weight: 900;
}

.onboarding-card > h1 {
  margin: 5px 0 6px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: clamp(25px, 6vw, 34px);
  line-height: .98;
  font-style: italic;
}

.onboarding-card > p {
  max-width: 540px;
  margin: 0 0 18px;
  color: #90939a;
  font-size: 12px;
  line-height: 1.45;
}

.onboarding-card label,
.profile-editor-card > label,
.profile-editor-grid label {
  position: relative;
  display: grid;
  gap: 6px;
  margin-top: 13px;
  color: #aeb1b8;
  font-size: 10px;
  font-weight: 900;
}

.onboarding-card input,
.onboarding-card select,
.onboarding-card textarea,
.profile-editor-card input,
.profile-editor-card select,
.profile-editor-card textarea {
  width: 100%;
  border: 1px solid #34363e;
  border-radius: 10px;
  outline: none;
  background: #050506;
  color: #fff;
  font-family: var(--omili-body-font), Arial, sans-serif !important;
  font-size: 13px;
}

.onboarding-card input,
.onboarding-card select,
.profile-editor-card input,
.profile-editor-card select {
  min-height: 45px;
  padding: 0 11px;
}

.onboarding-card textarea,
.profile-editor-card textarea {
  min-height: 110px;
  resize: vertical;
  padding: 11px;
  line-height: 1.4;
}

.onboarding-card input:focus,
.onboarding-card select:focus,
.onboarding-card textarea:focus,
.profile-editor-card input:focus,
.profile-editor-card select:focus,
.profile-editor-card textarea:focus {
  border-color: #8c22ff;
  box-shadow: 0 0 0 2px rgba(139,24,255,.09);
}

.onboarding-card label > small,
.profile-editor-card label > small {
  justify-self: end;
  color: #656870;
  font-size: 9px;
}

.onboarding-username-input {
  display: grid;
  grid-template-columns: 35px 1fr;
  overflow: hidden;
  border: 1px solid #34363e;
  border-radius: 10px;
  background: #050506;
}

.onboarding-username-input:focus-within {
  border-color: #8c22ff;
  box-shadow: 0 0 0 2px rgba(139,24,255,.09);
}

.onboarding-username-input > span {
  display: grid;
  place-items: center;
  border-right: 1px solid #292b31;
  color: #777a82;
  font-size: 14px;
}

.onboarding-username-input > input {
  min-height: 43px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.onboarding-preview-name {
  display: grid;
  gap: 3px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid #292b31;
  border-radius: 10px;
  background: #0a0a0d;
}

.onboarding-preview-name > span {
  color: #666971;
  font-size: 9px;
  font-weight: 900;
}

.onboarding-preview-name > strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 20px;
  font-style: italic;
}

.onboarding-preview-name > small {
  color: #4fc5ff;
  font-size: 10px;
}

.onboarding-club-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 7px;
}

.onboarding-club-grid > button {
  position: relative;
  min-height: 114px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid #2c2e35;
  border-radius: 12px;
  background: #09090b;
  color: #fff;
}

.onboarding-club-grid > button.selected {
  border-color: #8b2fff;
  background:
    radial-gradient(circle at 50% 20%,rgba(138,31,255,.17),transparent 58%),
    #0c0810;
  box-shadow: inset 0 0 0 1px rgba(137,47,255,.16);
}

.onboarding-club-grid > button > span {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  font-size: 29px;
}

.onboarding-club-grid img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.onboarding-club-grid > button > strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 11px;
  line-height: 1;
  font-style: italic;
  text-align: center;
}

.onboarding-club-grid > button > b {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #58e985;
  color: #041008;
  font-size: 11px;
}

.onboarding-avatar-row {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 7px;
}

.onboarding-avatar-picker {
  position: relative;
  width: 106px;
  height: 124px;
  display: grid;
  place-items: center;
  margin: 0 !important;
  border: 1px solid #373943;
  border-radius: 18px;
  background: #0b0b0e;
  cursor: pointer;
}

.onboarding-avatar-picker input,
.profile-editor-avatar input {
  display: none;
}

.onboarding-avatar-photo,
.onboarding-avatar-initials {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border: 2px solid #8d24ff;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  color: #fff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 28px;
  font-style: italic;
}

.onboarding-avatar-picker > b {
  color: #b88aff;
  font-size: 9px;
}

.onboarding-avatar-row > div {
  display: grid;
  gap: 4px;
}

.onboarding-avatar-row > div > strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 20px;
  font-style: italic;
}

.onboarding-avatar-row > div > span {
  color: #4ec7ff;
  font-size: 11px;
}

.onboarding-avatar-row > div > small {
  color: #686b73;
  font-size: 9px;
}

.onboarding-final-card {
  overflow: hidden;
}

.onboarding-identity-preview {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 14px;
  align-items: center;
  margin: 13px 0;
  padding: 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(#09090c,#09090c) padding-box,
    linear-gradient(120deg,#ff1c3f,#9d00ef,#2970ff) border-box;
}

.onboarding-final-avatar {
  position: relative;
  width: 100px;
  height: 122px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background:
    radial-gradient(circle,#30204a,#0a0a0d 70%);
  background-position: center;
  background-size: cover;
  font-size: 38px;
}

.onboarding-final-avatar > span {
  position: absolute;
  top: 7px;
  left: 7px;
  font-size: 25px;
}

.onboarding-identity-preview > div:last-child {
  display: grid;
  gap: 4px;
}

.onboarding-identity-preview strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 23px;
  font-style: italic;
}

.onboarding-identity-preview span {
  color: #4cc8ff;
  font-size: 11px;
}

.onboarding-identity-preview small {
  color: #9b9ea5;
  font-size: 10px;
}

.onboarding-identity-preview p {
  margin: 6px 0 0;
  color: #c2c4c9;
  font-size: 11px;
  line-height: 1.35;
}

.onboarding-starting-economy {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 7px;
  margin-top: 11px;
}

.onboarding-starting-economy article {
  min-height: 82px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 1px solid #2d2f36;
  border-radius: 10px;
  background: #09090c;
  text-align: center;
}

.onboarding-starting-economy span {
  color: #777a82;
  font-size: 9px;
  font-weight: 900;
}

.onboarding-starting-economy strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 23px;
  font-style: italic;
}

.onboarding-starting-economy article:first-child strong {
  color: #ffd13c;
}

.onboarding-starting-economy article:nth-child(2) strong {
  color: #4ec8ff;
}

.onboarding-starting-economy article:nth-child(3) strong {
  color: #c56eff;
}

.onboarding-starting-economy small {
  color: #63666e;
  font-size: 9px;
}

.onboarding-card-message {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 9px;
  align-items: center;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #393041;
  border-radius: 10px;
  background: #0d0910;
}

.onboarding-card-message > span {
  font-size: 22px;
}

.onboarding-card-message p {
  margin: 0;
  color: #9c95a1;
  font-size: 10px;
  line-height: 1.4;
}

.onboarding-message,
.profile-editor-message {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #6c3740;
  border-radius: 9px;
  background: #17090b;
  color: #ff919c;
  font-size: 10px;
}

.onboarding-footer {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 8px;
  margin-top: 10px;
}

.onboarding-primary,
.onboarding-secondary {
  min-height: 44px;
  border-radius: 22px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 12px !important;
  font-style: italic;
  font-weight: 900;
}

.onboarding-primary {
  border: 0;
  background: linear-gradient(100deg,#ff1b3d,#9b00ed,#286cff);
  color: #fff;
}

.onboarding-secondary {
  border: 1px solid #35373e;
  background: #09090b;
  color: #a8aab1;
}

/* ---------------- EDIT PROFILE ---------------- */
.profile-editor-card {
  margin-top: 12px;
}

.profile-editor-avatar {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 14px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid #22242a;
}

.profile-editor-avatar > label {
  position: relative;
  width: 105px;
  display: grid;
  place-items: center;
  gap: 6px;
  cursor: pointer;
}

.profile-editor-avatar > label > span {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border: 2px solid #8e24ff;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
}

.profile-editor-avatar-empty {
  background: #111217 !important;
  font-size: 34px;
}

.profile-editor-avatar > label > b {
  color: #bf87ff;
  font-size: 9px;
}

.profile-editor-avatar > div {
  display: grid;
  gap: 4px;
}

.profile-editor-avatar > div > strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 22px;
  font-style: italic;
}

.profile-editor-avatar > div > span {
  color: #4cc8ff;
  font-size: 11px;
}

.profile-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.profile-editor-clubs {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.profile-editor-clubs > span {
  color: #aeb1b8;
  font-size: 10px;
  font-weight: 900;
}

.profile-editor-clubs > div {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 6px;
}

.profile-editor-clubs button {
  min-height: 73px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 1px solid #2d2f36;
  border-radius: 9px;
  background: #09090b;
  color: #fff;
}

.profile-editor-clubs button.selected {
  border-color: #8d27ff;
  background: #110819;
}

.profile-editor-clubs img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.profile-editor-clubs button > i {
  font-size: 25px;
  font-style: normal;
}

.profile-editor-clubs button > span {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 9px;
  font-style: italic;
}

.profile-editor-save {
  width: 100%;
  min-height: 44px;
  margin-top: 15px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(100deg,#ff1a3e,#9700ef,#286cff);
  color: #fff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 12px !important;
  font-style: italic;
  font-weight: 900;
}

/* ---------------- REAL SIGNED-IN PROFILE ---------------- */
.my-profile-page {
  --my-profile-accent: #9828ff;
}

.my-profile-hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  border-bottom: 1px solid #202127;
  background:
    radial-gradient(circle at 50% 32%,#35204e 0%,#101218 32%,#030304 72%);
  background-position: center 18%;
  background-repeat: no-repeat;
  background-size: cover;
}

.my-profile-hero-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.02) 45%,rgba(0,0,0,.94) 100%),
    radial-gradient(circle at 50% 40%,transparent 20%,rgba(0,0,0,.15) 80%);
}

.my-profile-hero .creator-back,
.my-profile-hero .creator-flag,
.my-profile-hero .creator-ovr-badge,
.my-profile-hero .creator-hero-copy {
  z-index: 3;
}

.my-profile-avatar-empty {
  position: absolute;
  z-index: 2;
  top: 180px;
  left: 50%;
  width: 270px;
  height: 360px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 40% 40% 18% 18%;
  background:
    radial-gradient(circle at 50% 20%,rgba(156,47,255,.20),transparent 36%),
    linear-gradient(180deg,#17151d,#08080a);
  transform: translateX(-50%);
  font-size: 100px;
}

.my-profile-hero-copy {
  bottom: 44px !important;
}

.my-profile-username {
  display: block;
  margin-top: -2px;
  color: #51c8ff;
  font-size: 12px;
  font-weight: 800;
}

.my-profile-club-chip {
  width: fit-content;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  padding: 4px 10px 4px 5px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(7px);
}

.my-profile-club-chip img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.my-profile-club-chip > span {
  font-size: 20px;
}

.my-profile-club-chip strong {
  font-size: 10px;
}

.my-profile-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 13px 30px 6px;
}

.my-profile-action-row > * {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #353740;
  border-radius: 12px;
  background: #09090b;
  color: #fff;
  text-decoration: none;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 900;
}

.my-profile-action-row > a {
  border-color: #61347e;
  background:
    radial-gradient(circle at 50% 0%,rgba(151,36,255,.13),transparent 70%),
    #0a090d;
}

.my-profile-onboarding-banner {
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 7px 30px 4px;
  padding: 10px 12px;
  border: 1px solid #6a4f14;
  border-radius: 10px;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,192,34,.11),transparent 45%),
    #100d05;
  color: #fff;
  text-decoration: none;
}

.my-profile-onboarding-banner > div {
  display: grid;
  gap: 3px;
}

.my-profile-onboarding-banner strong {
  color: #ffd559;
  font-size: 10px;
}

.my-profile-onboarding-banner span {
  color: #93886a;
  font-size: 10px;
}

.my-profile-onboarding-banner > b {
  color: #ffda66;
  font-size: 10px;
}

.my-career-section .creator-stats {
  grid-template-columns: repeat(5,1fr);
}

.my-profile-development {
  margin: 5px 30px 50px;
  padding-top: 14px;
  border-top: 1px solid #202127;
}

.my-profile-development-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.my-profile-development-heading > div > span {
  color: #777a82;
  font-size: 9px;
  font-weight: 900;
}

.my-profile-development-heading h2 {
  margin: 2px 0 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 20px;
  font-style: italic;
}

.my-profile-development-heading > strong {
  color: #c76eff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 18px;
  font-style: italic;
}

.my-profile-development-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.my-profile-development-grid a {
  min-height: 86px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid #292b31;
  border-radius: 10px;
  background: #08080a;
  color: #fff;
  text-decoration: none;
}

.my-profile-development-grid > a > span {
  font-size: 24px;
}

.my-profile-development-grid > a > div {
  display: grid;
  gap: 3px;
}

.my-profile-development-grid strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 12px;
  font-style: italic;
}

.my-profile-development-grid small {
  color: #797c84;
  font-size: 10px;
  line-height: 1.3;
}

.my-profile-loading,
.my-profile-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  background: #000;
  color: #fff;
  text-align: center;
}

.my-profile-auth > span {
  color: #8d5cff;
  font-size: 10px;
  font-weight: 900;
}

.my-profile-auth h1 {
  max-width: 420px;
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 28px;
  font-style: italic;
}

.my-profile-auth a {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 0 20px;
  border-radius: 22px;
  background: linear-gradient(100deg,#ff1c3d,#9400ed,#286aff);
  color: #fff;
  text-decoration: none;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 900;
}

/* Account prompt after first real sign-in */
.account-avatar-photo {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.account-onboarding-banner {
  min-height: 62px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  align-items: center;
  margin: 0 0 14px;
  padding: 9px 11px;
  border: 1px solid #624a14;
  border-radius: 10px;
  background: #100d05;
  color: #fff;
  text-decoration: none;
  text-align: left;
}

.account-onboarding-banner > div {
  display: grid;
  gap: 2px;
}

.account-onboarding-banner strong {
  color: #ffd55e;
  font-size: 10px;
}

.account-onboarding-banner span {
  color: #92866a;
  font-size: 9px;
}

.account-onboarding-banner > b {
  color: #ffd960;
  font-size: 9px;
}

@media (max-width:620px) {
  .onboarding-page,
  .profile-editor-page {
    padding: 10px 10px 70px;
  }

  .onboarding-card,
  .profile-editor-card {
    padding: 14px;
    border-radius: 14px;
  }

  .onboarding-card > h1 {
    font-size: 27px;
  }

  .onboarding-club-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .onboarding-club-grid > button {
    min-height: 94px;
  }

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

  .profile-editor-clubs > div {
    grid-template-columns: repeat(2,1fr);
  }

  .my-profile-hero {
    min-height: 610px;
  }

  .my-profile-avatar-empty {
    top: 148px;
    width: 225px;
    height: 300px;
    font-size: 82px;
  }

  .my-profile-action-row {
    padding: 10px 16px 5px;
  }

  .my-profile-onboarding-banner {
    margin: 7px 16px 3px;
  }

  .my-profile-development {
    margin: 5px 16px 40px;
  }

  .my-profile-development-grid {
    grid-template-columns: 1fr;
  }

  .my-career-section .creator-stats {
    grid-template-columns: repeat(5,1fr);
  }

  .my-career-section .creator-stats strong {
    font-size: 16px !important;
  }

  .my-career-section .creator-stats span {
    font-size: 9px !important;
  }
}
/* === END OMILI v1.7 REAL USER PROFILES === */


/* =========================================================
   OMILI v1.8 — PROTECTED SUPABASE CMS
   ========================================================= */

.cms-loading {
  min-height: 70vh;
  display: grid;
  place-items: center;
  color: #8d9098;
  font-size: 12px;
}

.cms-access-card {
  width: min(100%, 520px);
  min-height: 390px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  margin: 70px auto 0;
  padding: 24px;
  border: 1px solid #353740;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(93,0,255,.12), transparent 50%),
    #08080a;
  color: #fff;
  text-align: center;
}

.cms-access-card.denied {
  border-color: #5c343a;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,31,65,.08), transparent 52%),
    #0b0809;
}

.cms-access-card > span {
  color: #9c69ff;
  font-size: 10px;
  font-weight: 900;
}

.cms-access-card.denied > span {
  color: #ff7e8a;
}

.cms-access-card h1 {
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 29px;
  font-style: italic;
}

.cms-access-card p {
  max-width: 390px;
  margin: 0;
  color: #8d9098;
  font-size: 12px;
  line-height: 1.45;
}

.cms-access-card a {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 0 20px;
  border-radius: 22px;
  background: linear-gradient(100deg,#ff1a3e,#9700ef,#286cff);
  color: #fff;
  text-decoration: none;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 900;
}

.cms-admin-page {
  width: min(100%, 1120px);
}

.cms-header {
  grid-template-columns: 42px 1fr auto;
}

.cms-admin-identity {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
  margin-bottom: 11px;
}

.cms-admin-identity > div {
  min-height: 64px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid #2a2c33;
  border-radius: 10px;
  background: #08080a;
  text-align: center;
}

.cms-admin-identity span {
  color: #777a82;
  font-size: 9px;
  font-weight: 900;
}

.cms-admin-identity strong {
  overflow: hidden;
  max-width: 100%;
  color: #f2f2f4;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cms-tabs {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 4px;
  margin-bottom: 10px;
  padding: 3px;
  border: 1px solid #282a30;
  border-radius: 12px;
  background: #070708;
}

.cms-tabs button {
  min-height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #74777f;
  font-size: 9px;
  font-weight: 900;
}

.cms-tabs button.active {
  background:
    linear-gradient(110deg,#4f0018,#22002f 55%,#071b35);
  color: #fff;
  box-shadow: inset 0 0 0 1px #4d2942;
}

.cms-message {
  position: sticky;
  z-index: 20;
  top: 8px;
}

.cms-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 7px;
}

.cms-dashboard-grid article {
  min-height: 145px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border: 1px solid #292b31;
  border-radius: 12px;
  background:
    radial-gradient(circle at 88% 10%,rgba(112,0,255,.09),transparent 38%),
    #08080a;
  text-align: center;
}

.cms-dashboard-grid article > span {
  color: #787b83;
  font-size: 9px;
  font-weight: 900;
}

.cms-dashboard-grid article > strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 33px;
  font-style: italic;
}

.cms-dashboard-grid article > strong.cms-small-number {
  font-size: 27px;
}

.cms-dashboard-grid article > small {
  color: #777a82;
  font-size: 10px;
}

.cms-dashboard-grid article > button {
  min-height: 30px;
  margin-top: 3px;
  padding: 0 13px;
  border: 1px solid #3f3150;
  border-radius: 15px;
  background: #100b14;
  color: #c788ff;
  font-size: 9px;
  font-weight: 900;
}

.cms-publish-note {
  display: grid;
  gap: 5px;
  margin-top: 9px;
  padding: 11px;
  border: 1px solid #245537;
  border-radius: 10px;
  background: #07130a;
}

.cms-publish-note strong {
  color: #62e589;
  font-size: 10px;
}

.cms-publish-note p {
  margin: 0;
  color: #819486;
  font-size: 10px;
  line-height: 1.4;
}

.cms-two-column,
.cms-editor-layout {
  display: grid;
  grid-template-columns: minmax(300px,.9fr) minmax(0,1.35fr);
  gap: 9px;
  align-items: start;
}

.cms-two-column {
  grid-template-columns: 1fr 1fr;
}

.cms-form-panel {
  position: sticky;
  top: 8px;
}

.cms-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.admin-field select {
  min-height: 38px;
  width: 100%;
  border: 1px solid #30323a;
  border-radius: 8px;
  padding: 0 10px;
  outline: none;
  background: #050506;
  color: #fff;
  font-size: 11px;
}

.cms-form-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  align-items: center;
}

.cms-form-actions > button:last-child {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid #34363d;
  border-radius: 19px;
  background: #09090b;
  color: #9699a0;
  font-size: 9px;
  font-weight: 900;
}

.cms-record-list {
  display: grid;
  gap: 6px;
}

.cms-record-list article {
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #292b31;
  border-radius: 10px;
  background: #08080a;
}

.cms-record-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.cms-record-copy > span:not(.battle-status-pill) {
  color: #7e81a0;
  font-size: 9px;
  font-weight: 900;
}

.cms-record-copy > strong {
  overflow: hidden;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 14px;
  line-height: 1.05;
  font-style: italic;
  text-overflow: ellipsis;
}

.cms-record-copy > small {
  overflow: hidden;
  color: #777a82;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cms-record-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.cms-record-actions button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #353740;
  border-radius: 7px;
  background: #0d0d10;
  color: #c5c7cd;
  font-size: 9px;
  font-weight: 900;
}

.cms-record-actions button.left {
  border-color: #70202d;
  color: #ff7382;
}

.cms-record-actions button.right {
  border-color: #4c2371;
  color: #c684ff;
}

.cms-record-actions button.void {
  border-color: #5f343b;
  color: #ff7d89;
}

.cms-record-actions button:disabled {
  opacity: .32;
}

.cms-group-actions {
  max-width: 355px;
}

.cms-prediction-actions {
  max-width: 300px;
}

.cms-show-status {
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid #41434b;
  border-radius: 9px;
  font-size: 9px !important;
}

.cms-show-status.status-live {
  border-color: #6d1e2b;
  background: #19070a;
  color: #ff5f72;
}

.cms-show-status.status-upcoming {
  border-color: #284f6b;
  background: #07121a;
  color: #62c8ff;
}

.cms-show-status.status-ended {
  color: #898c94;
}

/* ---------------------------------------------------------
   Dynamic show details for CMS-created upcoming shows
   --------------------------------------------------------- */

.show-detail-page {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 40px;
  background: #000;
  color: #fff;
}

.show-detail-hero {
  position: relative;
  min-height: 72vh;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.show-detail-hero > div:first-child {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,.07) 36%,rgba(0,0,0,.94) 100%);
}

.show-detail-status {
  position: absolute;
  z-index: 4;
  top: 29px;
  right: 18px;
  padding: 6px 10px;
  border: 1px solid #3f444e;
  border-radius: 14px;
  background: rgba(0,0,0,.65);
  font-size: 10px;
  font-weight: 900;
}

.show-detail-status.status-upcoming {
  border-color: #27628b;
  color: #61caff;
}

.show-detail-status.status-ended {
  color: #999ca4;
}

.show-detail-copy {
  position: absolute;
  z-index: 3;
  left: 20px;
  right: 20px;
  bottom: 34px;
  display: grid;
  gap: 7px;
}

.show-detail-copy > span {
  color: #ff536d;
  font-size: 10px;
  font-weight: 900;
}

.show-detail-copy h1 {
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: clamp(31px,8vw,46px);
  line-height: .95;
  font-style: italic;
}

.show-detail-copy > strong {
  color: #d0d1d5;
  font-size: 12px;
}

.show-detail-copy > a {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 11px;
}

.show-detail-copy > a img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 50%;
}

.show-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 12px 16px;
}

.show-detail-actions a {
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #34363d;
  border-radius: 21px;
  background: #09090b;
  color: #fff;
  text-decoration: none;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 11px;
  font-style: italic;
}

.show-detail-note {
  display: grid;
  gap: 5px;
  margin: 0 16px;
  padding: 11px;
  border: 1px dashed #34363e;
  border-radius: 10px;
}

.show-detail-note strong {
  color: #8f65ff;
  font-size: 10px;
}

.show-detail-note p {
  margin: 0;
  color: #868991;
  font-size: 10px;
  line-height: 1.45;
}

.show-detail-missing {
  min-height: 70vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
}

.show-detail-missing h1 {
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 27px;
  font-style: italic;
}

.show-detail-missing a {
  color: #54c7ff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .cms-admin-identity {
    grid-template-columns: 1fr;
  }

  .cms-tabs {
    grid-template-columns: repeat(3,1fr);
  }

  .cms-dashboard-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .cms-two-column,
  .cms-editor-layout {
    grid-template-columns: 1fr;
  }

  .cms-form-panel {
    position: static;
  }

  .cms-record-list article {
    grid-template-columns: 1fr;
  }

  .cms-record-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 460px) {
  .cms-dashboard-grid,
  .cms-form-grid {
    grid-template-columns: 1fr;
  }

  .cms-tabs {
    grid-template-columns: repeat(2,1fr);
  }
}
/* === END OMILI v1.8 SUPABASE CMS === */


/* === OMILI v1.8.1 ADMIN IMAGE PICKER === */
.admin-image-field {
  display: grid;
  gap: 8px;
}

.admin-image-field-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-image-field-top > span {
  color: #9ea1a8;
  font-size: 10px;
  font-weight: 900;
}

.admin-image-actions-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-mini-button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #3a3d45;
  border-radius: 14px;
  background: #0b0b0d;
  color: #d2d4da;
  font-size: 9px;
  font-weight: 900;
}

.admin-mini-button:disabled {
  opacity: .55;
}

.admin-image-field-body {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.admin-image-preview-shell {
  width: 92px;
}

.admin-image-preview {
  width: 92px;
  height: 92px;
  display: block;
  object-fit: cover;
  border: 1px solid #2f3238;
  border-radius: 12px;
  background: #070709;
}

.admin-image-preview-empty {
  display: grid;
  place-items: center;
  color: #666971;
  font-size: 10px;
  font-weight: 900;
}

.admin-image-meta {
  display: grid;
  gap: 6px;
}

.admin-image-meta input {
  min-height: 38px;
  width: 100%;
  border: 1px solid #30323a;
  border-radius: 8px;
  padding: 0 10px;
  outline: none;
  background: #050506;
  color: #fff;
  font-size: 11px;
}

.admin-image-meta small {
  color: #787b83;
  font-size: 9px;
  line-height: 1.45;
}

.admin-image-error {
  color: #ff7e8a !important;
}

.admin-media-library {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid #272930;
  border-radius: 12px;
  background: #08080a;
}

.admin-media-tile {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #2f3238;
  border-radius: 12px;
  background: #0a0a0d;
  text-align: left;
}

.admin-media-tile.selected {
  border-color: #7a49ff;
  box-shadow: inset 0 0 0 1px rgba(122,73,255,.35);
}

.admin-media-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 9px;
  background: #050506;
}

.admin-media-tile strong {
  color: #fff;
  font-size: 10px;
  line-height: 1.2;
}

.admin-media-tile span {
  color: #80838b;
  font-size: 9px;
}

@media (max-width: 760px) {
  .admin-image-field-body {
    grid-template-columns: 1fr;
  }

  .admin-image-preview-shell {
    width: 100%;
  }

  .admin-image-preview {
    width: 100%;
    max-width: 180px;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .admin-media-library {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* === END OMILI v1.8.1 ADMIN IMAGE PICKER === */

/* =========================================================
   OMILI v1.9 — REAL FOOTBALL DATA
   ========================================================= */

.football-data-live-source {
  margin-left: 7px;
  padding: 3px 6px;
  border: 1px solid #175c3a;
  border-radius: 9px;
  background: #06150d;
  color: #58e98a;
  font-size: 9px;
  font-weight: 900;
}

.football-score-card .team-crest {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.team-crest-fallback {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 17px;
}

.score-minute.status-in_play,
.score-minute.status-paused,
.score-minute.status-extra_time,
.score-minute.status-penalty_shootout,
.status-in_play,
.status-paused,
.status-extra_time,
.status-penalty_shootout {
  color: #ff3d59 !important;
}

.score-minute.status-finished,
.status-finished {
  color: #9da0a7 !important;
}

.matches-page {
  width: min(100%, 720px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 14px 14px 72px;
  background: #000;
  color: #fff;
}

.matches-header,
.football-admin-header {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
}

.matches-header > div,
.football-admin-header > div {
  text-align: center;
}

.matches-header span,
.football-admin-header span {
  color: #51c8ff;
  font-size: 9px;
  font-weight: 900;
}

.matches-header h1,
.football-admin-header h1 {
  margin: 1px 0 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 24px;
  font-style: italic;
}

.matches-header > button,
.football-admin-header > button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #31506a;
  border-radius: 17px;
  background: #08131c;
  color: #60c9ff;
  font-size: 10px;
  font-weight: 900;
}

.matches-filters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 12px 0;
  padding: 3px;
  border: 1px solid #282a30;
  border-radius: 11px;
  background: #070708;
}

.matches-filters button {
  min-height: 33px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #777a82;
  font-size: 9px;
  font-weight: 900;
}

.matches-filters button.active {
  background: linear-gradient(110deg,#4e0017,#1f002d 55%,#071b34);
  color: #fff;
}

.matches-list {
  display: grid;
  gap: 7px;
}

.match-centre-card {
  padding: 11px;
  border: 1px solid #292b31;
  border-radius: 12px;
  background: #08080a;
}

.match-centre-card > header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: #858891;
  font-size: 10px;
}

.match-centre-card > header b {
  font-size: 10px;
}

.match-centre-team {
  min-height: 50px;
  display: grid;
  grid-template-columns: 36px 1fr 38px;
  gap: 9px;
  align-items: center;
  border-top: 1px solid #1d1f23;
}

.match-centre-team img,
.match-centre-team > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  object-fit: contain;
}

.match-centre-team strong {
  font-size: 12px;
}

.match-centre-team > b {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 20px;
  font-style: italic;
  text-align: right;
}

.match-centre-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid #1d1f23;
  color: #72757d;
  font-size: 9px;
}

.match-centre-card > footer a {
  color: #42bfff;
  text-decoration: none;
  font-size: 9px;
  font-weight: 900;
}

.matches-loading,
.matches-empty {
  min-height: 160px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 1px dashed #34363d;
  border-radius: 11px;
  color: #777a82;
  text-align: center;
  font-size: 10px;
}

.matches-empty strong {
  color: #c0c2c8;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 15px;
  font-style: italic;
}

.football-admin-page {
  width: min(100%, 1120px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 14px 14px 70px;
  background: #000;
  color: #fff;
}

.football-admin-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 12px 0;
}

.football-admin-summary article {
  min-height: 78px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 1px solid #292b31;
  border-radius: 10px;
  background: #08080a;
  text-align: center;
}

.football-admin-summary span {
  color: #777a82;
  font-size: 9px;
  font-weight: 900;
}

.football-admin-summary strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 20px;
  font-style: italic;
}

.football-admin-summary small {
  color: #686b73;
  font-size: 9px;
}

.football-admin-message {
  margin-bottom: 10px;
}

.football-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: 10px;
  align-items: start;
}

.football-fixture-list,
.football-sync-history {
  display: grid;
  gap: 7px;
}

.football-sync-history {
  position: sticky;
  top: 8px;
}

.football-admin-section-heading {
  min-height: 46px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #23252b;
}

.football-admin-section-heading span {
  color: #6ccaff;
  font-size: 9px;
  font-weight: 900;
}

.football-admin-section-heading h2 {
  margin: 2px 0 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 18px;
  font-style: italic;
}

.football-admin-section-heading a {
  color: #4fc6ff;
  text-decoration: none;
  font-size: 9px;
  font-weight: 900;
}

.football-admin-fixture {
  padding: 10px;
  border: 1px solid #292b31;
  border-radius: 11px;
  background: #08080a;
}

.football-admin-fixture-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #777a82;
  font-size: 9px;
}

.football-admin-fixture-teams {
  display: grid;
  grid-template-columns: 1fr 50px 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
}

.football-admin-fixture-teams > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: center;
}

.football-admin-fixture-teams > div:last-child {
  grid-template-columns: 1fr 34px;
  text-align: right;
}

.football-admin-fixture-teams > div:last-child img,
.football-admin-fixture-teams > div:last-child span {
  grid-column: 2;
  grid-row: 1;
}

.football-admin-fixture-teams > div:last-child strong {
  grid-column: 1;
  grid-row: 1;
}

.football-admin-fixture-teams img,
.football-admin-fixture-teams > div > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  object-fit: contain;
}

.football-admin-fixture-teams strong {
  font-size: 11px;
}

.football-admin-fixture-teams > b {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 18px;
  font-style: italic;
  text-align: center;
}

.football-admin-fixture > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 7px;
  border-top: 1px solid #202228;
  color: #71747c;
  font-size: 9px;
}

.football-admin-fixture > footer button,
.football-admin-fixture > footer a {
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid #2b5c78;
  border-radius: 15px;
  background: #07151e;
  color: #5bc8ff;
  text-decoration: none;
  font-size: 9px;
  font-weight: 900;
}

.football-sync-history > article {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #292b31;
  border-radius: 10px;
  background: #08080a;
}

.football-sync-history > article.ok {
  border-color: #245438;
}

.football-sync-history > article.failed {
  border-color: #60353b;
}

.football-sync-history > article > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.football-sync-history article strong {
  font-size: 11px;
}

.football-sync-history article small,
.football-sync-history article p {
  margin: 0;
  color: #777a82;
  font-size: 9px;
  line-height: 1.35;
}

.football-provider-note {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px dashed #365265;
  border-radius: 10px;
  background: #071017;
}

.football-provider-note strong {
  color: #63cbff;
  font-size: 9px;
}

.football-provider-note p {
  margin: 0;
  color: #7e8e98;
  font-size: 9px;
  line-height: 1.4;
}

.cms-football-data-link {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.cms-football-data-link > div {
  display: grid;
  gap: 4px;
}

.cms-football-data-link > a {
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid #245b78;
  border-radius: 17px;
  background: #07151e;
  color: #5bc9ff;
  text-decoration: none;
  font-size: 9px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .football-admin-summary {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .football-sync-history {
    position: static;
  }
}

@media (max-width: 460px) {
  .matches-page,
  .football-admin-page {
    padding: 10px 10px 64px;
  }

  .matches-filters {
    grid-template-columns: repeat(2, 1fr);
  }

  .football-admin-fixture-teams {
    grid-template-columns: 1fr 38px 1fr;
  }

  .football-admin-fixture-teams > div {
    grid-template-columns: 1fr;
    place-items: center;
    text-align: center;
  }

  .football-admin-fixture-teams > div:last-child {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .football-admin-fixture-teams > div:last-child img,
  .football-admin-fixture-teams > div:last-child span,
  .football-admin-fixture-teams > div:last-child strong {
    grid-column: auto;
    grid-row: auto;
  }
}
/* === END OMILI v1.9 REAL FOOTBALL DATA === */

/* =========================================================
   OMILI v2.0 — PRIVATE BETA / PWA / TELEMETRY
   ========================================================= */

.beta-gate-page,
.beta-access-page,
.offline-page {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(116,0,255,.18), transparent 34%),
    radial-gradient(circle at 10% 80%, rgba(255,24,62,.08), transparent 36%),
    #000;
  color: #fff;
}

.beta-gate-card,
.beta-access-card,
.offline-card {
  width: min(100%, 540px);
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 28px 22px;
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    linear-gradient(#08080a,#08080a) padding-box,
    linear-gradient(120deg,#ff173d,#9d00ef,#2a6dff) border-box;
  text-align: center;
  box-shadow: 0 20px 70px rgba(0,0,0,.5);
}

.beta-gate-logo,
.offline-card > span {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 31px;
  font-style: italic;
  font-weight: 950;
}

.beta-gate-card > span,
.beta-access-card > span {
  color: #a97bff;
  font-size: 10px;
  font-weight: 900;
}

.beta-gate-card h1,
.beta-access-card h1,
.offline-card h1 {
  max-width: 470px;
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: clamp(28px, 7vw, 42px);
  line-height: .98;
  font-style: italic;
}

.beta-gate-card p,
.beta-access-card p,
.offline-card p {
  max-width: 470px;
  margin: 0;
  color: #9699a0;
  font-size: 12px;
  line-height: 1.5;
}

.beta-gate-actions {
  width: 100%;
  display: grid;
  gap: 7px;
  margin-top: 5px;
}

.beta-gate-actions a,
.beta-access-card > a:not(.back-circle),
.offline-card a {
  min-height: 44px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(100deg,#ff183d,#9a00ef,#296cff);
  color: #fff;
  text-decoration: none;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 900;
}

.beta-gate-actions a.secondary {
  border: 1px solid #34363d;
  background: #0a0a0d;
  color: #b8bbc2;
}

.beta-gate-footnote {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 6px;
  margin-top: 7px;
  padding-top: 13px;
  border-top: 1px solid #25272d;
  text-align: left;
}

.beta-gate-footnote strong {
  grid-column: 1 / -1;
  color: #73767e;
  font-size: 9px;
}

.beta-gate-footnote span {
  padding: 7px 8px;
  border: 1px solid #24262c;
  border-radius: 8px;
  background: #0a0a0d;
  color: #c5c7cd;
  font-size: 10px;
}

.beta-access-card {
  position: relative;
  text-align: left;
  place-items: stretch;
}

.beta-access-card .back-circle {
  position: absolute;
  top: 16px;
  left: 16px;
}

.beta-access-card > span,
.beta-access-card h1,
.beta-access-card p {
  text-align: center;
  justify-self: center;
}

.beta-access-card label {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  color: #a6a9b0;
  font-size: 10px;
  font-weight: 900;
}

.beta-access-card input {
  min-height: 48px;
  width: 100%;
  border: 1px solid #353740;
  border-radius: 12px;
  padding: 0 14px;
  outline: none;
  background: #050506;
  color: #fff;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.beta-access-card > button {
  min-height: 46px;
  border: 0;
  border-radius: 23px;
  background: linear-gradient(100deg,#ff183d,#9a00ef,#296cff);
  color: #fff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 900;
}

.beta-access-message {
  padding: 9px;
  border: 1px solid #344a58;
  border-radius: 9px;
  background: #071017;
  color: #8bd7ff;
  font-size: 10px;
  text-align: center;
}

.pwa-install-button {
  width: 100%;
  min-height: 42px;
  margin: 9px 0;
  border: 1px solid #31546a;
  border-radius: 21px;
  background: #07131b;
  color: #5dcbff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 11px !important;
  font-style: italic;
  font-weight: 900;
}

.beta-admin-page {
  width: min(100%, 1100px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 14px 14px 70px;
  background: #000;
  color: #fff;
}

.beta-admin-header {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
}

.beta-admin-header > div {
  text-align: center;
}

.beta-admin-header span {
  color: #a46fff;
  font-size: 9px;
  font-weight: 900;
}

.beta-admin-header h1 {
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 24px;
  font-style: italic;
}

.beta-admin-header > a:last-child {
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid #31546a;
  border-radius: 16px;
  background: #07131b;
  color: #5bcaff;
  text-decoration: none;
  font-size: 9px;
  font-weight: 900;
}

.beta-admin-summary {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 6px;
  margin: 12px 0;
}

.beta-admin-summary article {
  min-height: 82px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid #292b31;
  border-radius: 10px;
  background: #08080a;
}

.beta-admin-summary span {
  color: #777a82;
  font-size: 9px;
  font-weight: 900;
}

.beta-admin-summary strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 24px;
  font-style: italic;
}

.beta-admin-layout {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr);
  gap: 10px;
  align-items: start;
}

.beta-invite-panel,
.beta-errors-panel {
  display: grid;
  gap: 8px;
}

.beta-errors-panel {
  position: sticky;
  top: 8px;
}

.beta-invite-creator {
  display: grid;
  grid-template-columns: 1fr 120px auto;
  gap: 7px;
  align-items: end;
  padding: 10px;
  border: 1px solid #292b31;
  border-radius: 10px;
  background: #08080a;
}

.beta-invite-creator label {
  display: grid;
  gap: 5px;
  color: #92959d;
  font-size: 9px;
  font-weight: 900;
}

.beta-invite-creator input {
  min-height: 38px;
  width: 100%;
  border: 1px solid #33353c;
  border-radius: 8px;
  padding: 0 9px;
  outline: none;
  background: #050506;
  color: #fff;
  font-size: 11px;
}

.beta-invite-creator > button {
  min-height: 38px;
  padding: 0 13px;
  border: 0;
  border-radius: 19px;
  background: linear-gradient(100deg,#ff183d,#9b00ef,#296cff);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.beta-invite-list {
  display: grid;
  gap: 6px;
}

.beta-invite-list article {
  min-height: 70px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #292b31;
  border-radius: 10px;
  background: #08080a;
}

.beta-invite-list article > div:first-child {
  display: grid;
  gap: 3px;
}

.beta-invite-list strong {
  color: #fff;
  font-size: 13px;
  letter-spacing: .7px;
}

.beta-invite-list span,
.beta-invite-list small {
  color: #777a82;
  font-size: 9px;
}

.beta-invite-list article > div:last-child {
  display: flex;
  gap: 5px;
}

.beta-invite-list button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #34363d;
  border-radius: 15px;
  background: #0b0b0e;
  color: #b5b8bf;
  font-size: 9px;
  font-weight: 900;
}

.beta-invite-list button.active {
  border-color: #245b39;
  color: #61e78a;
}

.beta-invite-list button.inactive {
  border-color: #60363c;
  color: #ff7a87;
}

.beta-errors-panel > article {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #553139;
  border-radius: 9px;
  background: #0c0809;
}

.beta-errors-panel article strong {
  overflow: hidden;
  color: #ff9ba5;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.beta-errors-panel article span,
.beta-errors-panel article small {
  color: #7d7275;
  font-size: 9px;
}

.beta-no-errors {
  min-height: 100px;
  display: grid;
  place-items: center;
  border: 1px solid #245338;
  border-radius: 10px;
  background: #07120a;
  color: #61e688;
  font-size: 10px;
}

@media (max-width: 760px) {
  .beta-admin-summary {
    grid-template-columns: repeat(2,1fr);
  }

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

  .beta-errors-panel {
    position: static;
  }

  .beta-invite-creator {
    grid-template-columns: 1fr 1fr;
  }

  .beta-invite-creator > button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 460px) {
  .beta-gate-footnote {
    grid-template-columns: 1fr;
  }

  .beta-gate-footnote strong {
    grid-column: auto;
  }

  .beta-admin-page {
    padding: 10px 10px 62px;
  }

  .beta-invite-list article {
    grid-template-columns: 1fr;
  }
}
/* === END OMILI v2.0 PRIVATE BETA === */

/* =========================================================
   OMILI v2.1 — HOMEPAGE REAL DATA + UI POLISH
   ========================================================= */

/* ---------------- SCORES ---------------- */
.v21-score-section {
  margin-top: 8px;
}

.v21-score-topline {
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 2px;
}

.v21-score-row {
  padding-bottom: 3px;
}

/* ---------------- LIVE / UPCOMING CAROUSELS ---------------- */
.v21-section-subtitle {
  display: block;
  margin-top: 2px;
  color: #72757e;
  font-size: 10px;
}

.v21-live-heading > div:first-child,
.v21-upcoming-section .section-heading > div:first-child {
  min-width: 0;
}

.v21-show-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 320px);
  gap: 10px;
  overflow-x: auto;
  padding: 3px 18px 7px 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.v21-show-carousel::-webkit-scrollbar {
  display: none;
}

.v21-show-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #2d3037;
  border-radius: 14px;
  background: #08080a;
  scroll-snap-align: start;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}

.v21-show-media {
  position: relative;
  height: 184px;
  display: block;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: #0b0b0d;
}

.v21-show-media > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .28s ease;
}

.v21-show-card:hover .v21-show-media > img {
  transform: scale(1.025);
}

.v21-show-media-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.32),transparent 34%,rgba(0,0,0,.88) 100%),
    linear-gradient(90deg,rgba(0,0,0,.12),transparent 45%);
}

.v21-show-topline {
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 9px;
  right: 9px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.v21-live-pill,
.v21-upcoming-pill {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 13px;
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.v21-live-pill {
  background: #e51130;
  color: #fff;
  box-shadow: 0 0 14px rgba(255,19,54,.26);
}

.v21-upcoming-pill {
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(0,0,0,.70);
  color: #fff;
  backdrop-filter: blur(5px);
}

.v21-real-show-stats {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #f1f2f4;
  font-size: 10px;
  text-shadow: 0 2px 8px #000;
}

.v21-show-more {
  margin-left: auto;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  text-shadow: 0 2px 8px #000;
}

.v21-show-title-overlay {
  position: absolute;
  z-index: 2;
  left: 12px;
  right: 12px;
  bottom: 10px;
}

.v21-show-title-overlay h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 22px;
  line-height: .98;
  font-style: italic;
  font-weight: 900;
  text-shadow: 0 2px 12px rgba(0,0,0,.92);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.v21-show-card-bottom {
  display: grid;
  gap: 9px;
  padding: 10px;
}

.v21-host-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 8px;
  align-items: center;
  color: #fff;
  text-decoration: none;
}

.v21-host-row > img,
.v21-host-avatar-fallback {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  object-fit: cover;
  border: 1px solid #7c26ff;
  border-radius: 50%;
  background: #111217;
}

.v21-host-row > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.v21-host-row strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v21-host-row strong .verified {
  margin-left: 4px;
}

.v21-host-row small {
  overflow: hidden;
  color: #6ecfff;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v21-join-debate {
  min-height: 39px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(100deg,#e71235 0%,#da0968 37%,#8b00ed 70%,#2868ff 100%);
  color: #fff;
  text-decoration: none;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 950;
  letter-spacing: .15px;
}

.v21-show-carousel-upcoming .v21-join-debate {
  border: 1px solid #353840;
  background: #0b0b0d;
  color: #fff;
}

/* ---------------- REAL SHORTS ---------------- */
.v21-real-shorts-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 145px;
  gap: 7px;
  overflow-x: auto;
  padding: 3px 10px 6px 0;
  scrollbar-width: none;
}

.v21-real-shorts-row::-webkit-scrollbar {
  display: none;
}

.v21-real-short-card {
  height: 196px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 10px 18px 10px 18px;
  background:
    linear-gradient(#08080a,#08080a) padding-box,
    linear-gradient(135deg,#ff1b3e,#9b00ee,#2c6dff) border-box;
  color: #fff;
  text-decoration: none;
  transform: skewY(-1.4deg);
}

.v21-real-short-media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 22%,rgba(122,24,255,.28),transparent 38%),
    #12131a;
  background-position: center;
  background-size: cover;
  transform: skewY(1.4deg) scale(1.025);
}

.v21-short-avatar-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 64px;
}

.v21-real-short-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(0,0,0,.06),transparent 38%,rgba(0,0,0,.93) 100%);
}

.v21-real-short-metric {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 7px;
  padding: 4px 6px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 9px;
  background: rgba(0,0,0,.68);
  color: #e9e9ed;
  font-size: 9px;
  font-weight: 900;
  backdrop-filter: blur(5px);
}

.v21-real-short-copy {
  position: absolute;
  z-index: 2;
  left: 8px;
  right: 8px;
  bottom: 9px;
  display: grid;
  gap: 4px;
}

.v21-real-short-copy strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 12px;
  font-style: italic;
}

.v21-real-short-copy p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #dedfe3;
  font-size: 10px;
  line-height: 1.25;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.v21-empty-shorts {
  min-height: 92px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 10px 12px;
  border: 1px dashed #3a3043;
  border-radius: 12px;
  background: #09080b;
  color: #fff;
  text-decoration: none;
}

.v21-empty-shorts > span {
  font-size: 25px;
}

.v21-empty-shorts > div {
  display: grid;
  gap: 3px;
}

.v21-empty-shorts strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 13px;
  font-style: italic;
}

.v21-empty-shorts small {
  color: #82858d;
  font-size: 10px;
}

.v21-empty-shorts > b {
  color: #c878ff;
  font-size: 10px;
}

/* ---------------- BOTTOM NAV / OMILI CTA ---------------- */
.v21-bottom-nav {
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr 118px 1fr 1fr;
  align-items: center;
  border-top: 1px solid #1d1f24;
  background:
    linear-gradient(180deg,rgba(0,0,0,.84),rgba(0,0,0,.99) 26%),
    #000;
}

.v21-bottom-nav-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 88px;
  padding: 4px max(10px, calc((100vw - 760px) / 2));
}

.v21-bottom-nav-live {
  position: relative;
  min-height: 72px;
  padding: 3px 8px;
}

.v21-nav-link {
  position: relative;
  min-height: 64px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  color: #8b8e96;
  text-decoration: none;
}

.v21-nav-link.active {
  color: #fff;
}

.v21-nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 1px;
  width: 36px;
  height: 4px;
  border-radius: 3px;
  background: #ff173d;
}

.v21-nav-icon {
  position: relative;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
}

.v21-nav-icon > svg {
  width: 29px;
  height: 29px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v21-profile-nav-icon {
  overflow: visible;
}

.v21-profile-nav-icon > img {
  width: 31px;
  height: 31px;
  object-fit: cover;
  border: 1.5px solid #9e23ff;
  border-radius: 50%;
}

.v21-nav-icon > i {
  position: absolute;
  top: -5px;
  right: -8px;
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 10px;
  background: #f31936;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.v21-nav-link small {
  color: inherit;
  font-size: 12px !important;
  line-height: 1;
}

.v21-center-take {
  position: relative;
  height: 78px;
  display: grid;
  place-items: center;
  color: #fff;
  text-decoration: none;
}

.v21-logo-orbit {
  position: absolute;
  width: 75px;
  height: 75px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 10px rgba(124,18,255,.24));
}

.v21-logo-orbit::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(0,0,0,.96) 48%,rgba(0,0,0,.55) 72%,transparent 74%);
}

.v21-logo-orbit img {
  width: 75px;
  height: 75px;
  display: block;
  object-fit: contain;
  animation: v21Orbit 14s linear infinite;
}

.v21-center-take strong {
  position: relative;
  z-index: 2;
  width: 56px;
  color: #fff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 12px;
  line-height: .96;
  font-style: italic;
  font-weight: 950;
  text-align: center;
  text-shadow: 0 1px 7px #000;
}

.v21-center-take::after {
  content: "";
  position: absolute;
  width: 53px;
  height: 53px;
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(255,23,61,.10), 0 0 25px rgba(115,24,255,.12);
  animation: v21Pulse 2.6s ease-in-out infinite;
}

@keyframes v21Orbit {
  to { transform: rotate(360deg); }
}

@keyframes v21Pulse {
  0%,100% { transform: scale(.94); opacity: .45; }
  50% { transform: scale(1.08); opacity: 1; }
}

/* ---------------- PUBLIC REAL PROFILES ---------------- */
.v21-public-profile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 12px 30px 5px;
}

.v21-public-profile-actions button {
  min-height: 44px;
  border: 1px solid #353740;
  border-radius: 12px;
  background: #09090b;
  color: #fff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 900;
}

.v21-public-profile-actions button:first-child {
  border-color: #713494;
  background: #100a14;
}

.v21-public-profile .my-profile-club-chip img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

/* ============================================================
   OMILI 8M.3 — GLOBAL FOOTBALL IDENTITY
   ============================================================ */

.creator-flag {
  min-width: 58px;
  min-height: 42px;
  display: grid;
  align-items: center;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  letter-spacing: 0;
  text-transform: none;
}

.football-team-picker {
  display: grid;
  gap: 9px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #24262c;
}

.football-team-picker-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.football-team-picker-heading > div {
  display: grid;
  gap: 3px;
}

.football-team-picker-heading span {
  color: #e9e9ee;
  font-size: 10px;
  font-weight: 950;
}

.football-team-picker-heading small,
.football-team-picker-heading b {
  color: #777b85;
  font-size: 9px;
}

.football-team-picker-heading b { color: #68efd2; }

.football-team-search {
  min-height: 46px !important;
  padding: 0 13px !important;
  border-color: #3b3e48 !important;
  background: #030405 !important;
}

.football-team-scope-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.football-team-scope-tabs button {
  min-height: 36px;
  border: 1px solid #30323a;
  border-radius: 18px;
  background: #08090b;
  color: #858993;
  font-size: 9px;
  font-weight: 950;
}

.football-team-scope-tabs button.selected {
  border-color: #8351ff;
  background: linear-gradient(110deg,rgba(122,39,255,.25),rgba(35,196,209,.12));
  color: #fff;
}

.football-team-picker > select {
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #30323a;
  border-radius: 10px;
  background: #050506;
  color: #d9dbe2;
  font-size: 10px;
  font-weight: 850;
}

.football-team-catalog-note,
.football-team-empty {
  padding: 11px;
  border: 1px dashed #49404f;
  border-radius: 10px;
  background: #0d0910;
  color: #9da0a8;
  font-size: 10px;
  line-height: 1.45;
}

.football-team-grid {
  max-height: 420px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 3px 5px 1px;
  scrollbar-color: #5b2d78 #111217;
}

.football-team-grid > button {
  position: relative;
  min-width: 0;
  min-height: 108px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 8px 5px;
  border: 1px solid #2c2f37;
  border-radius: 12px;
  background: linear-gradient(180deg,#0c0d10,#070709);
  color: #fff;
}

.football-team-grid > button.selected {
  border-color: #62e7d2;
  background:
    radial-gradient(circle at 50% 20%,rgba(93,237,210,.16),transparent 55%),
    linear-gradient(180deg,#10131a,#090a0d);
  box-shadow: inset 0 0 0 1px rgba(98,231,210,.18), 0 0 22px rgba(104,67,255,.12);
}

.football-team-grid > button > i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 25px;
  font-style: normal;
}

.football-team-grid > button > i img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.football-team-grid > button > strong {
  width: 100%;
  overflow: hidden;
  color: #f5f5f7;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 10px;
  font-style: italic;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.football-team-grid > button > small {
  width: 100%;
  overflow: hidden;
  color: #71757f;
  font-size: 7px;
  font-weight: 850;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.football-team-grid > button > b {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #68efd2;
  color: #04110e;
  font-size: 10px;
}

.leader-team-chip {
  max-width: 150px;
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 3px auto 0;
  padding: 2px 7px;
  border: 1px solid #30323a;
  border-radius: 13px;
  background: #07080a;
}

.leader-team-chip img { width: 18px; height: 18px; object-fit: contain; }
.leader-team-chip > span { font-size: 13px; }
.leader-team-chip strong {
  overflow: hidden;
  color: #a8abb3;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rating-card-identity-marks {
  display: flex;
  align-items: center;
  gap: 7px;
}

.rating-team-crest {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid #393c46;
  border-radius: 10px;
  background: rgba(5,6,8,.82);
}

.rating-team-crest img { width: 27px; height: 27px; object-fit: contain; }
.rating-team-crest > span { font-size: 19px; }
.rating-country-flag {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 22px;
}

.football-admin-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.football-admin-header-actions > button {
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid #353944;
  border-radius: 11px;
  background: #0b0d11;
  color: #fff;
  font-size: 10px;
  font-weight: 950;
}

.football-admin-header-actions > button:first-child {
  border-color: #62e7d2;
  background: #63e8d2;
  color: #03100d;
}

.football-identity-admin-card {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(320px,.8fr);
  gap: 16px;
  align-items: center;
  margin: 14px 0;
  padding: 18px;
  border: 1px solid #275b54;
  border-radius: 17px;
  background:
    radial-gradient(circle at 90% 20%,rgba(94,234,208,.13),transparent 35%),
    linear-gradient(115deg,#0d1215,#0b0b0f);
}

.football-identity-admin-card > div:first-child span {
  color: #65ead3;
  font-size: 9px;
  font-weight: 950;
}

.football-identity-admin-card h2 {
  margin: 4px 0 5px;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
}

.football-identity-admin-card p {
  max-width: 720px;
  margin: 0;
  color: #9599a3;
  font-size: 11px;
  line-height: 1.5;
}

.football-identity-admin-card > small {
  grid-column: 1 / -1;
  color: #737781;
  font-size: 9px;
}

.football-identity-admin-stats {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 6px;
}

.football-identity-admin-stats article {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 76px;
  border: 1px solid #292d35;
  border-radius: 11px;
  background: rgba(4,5,7,.72);
}

.football-identity-admin-stats strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 24px;
}

.football-identity-admin-stats span {
  color: #737781;
  font-size: 7px;
  font-weight: 900;
}

@media (max-width: 720px) {
  .football-team-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .football-admin-header-actions { flex-direction: column; align-items: stretch; }
  .football-identity-admin-card { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .football-team-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .football-team-grid > button { min-height: 96px; }
  .football-identity-admin-stats { grid-template-columns: repeat(2,1fr); }
}

/* ---------------- SEARCH / FOLLOWING REAL USERS ---------------- */
.v21-search-avatar,
.v21-following-people img,
.v21-follow-avatar-empty {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  object-fit: cover;
  border: 1px solid #8f24ff;
  border-radius: 50%;
  background: #101116;
}

.v21-search-avatar-empty,
.v21-follow-avatar-empty {
  font-size: 21px;
}

.search-show-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v21-search-show-status {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 6px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  background: rgba(0,0,0,.70);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.v21-search-take-empty,
.v21-follow-take-empty {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #13141a;
  font-size: 38px;
}

.v21-following-people img,
.v21-follow-avatar-empty {
  width: 54px;
  height: 54px;
}

/* ---------------- REAL HOT TAKE PLAYBACK ---------------- */
.v21-real-hot-playback .hot-playback-media {
  background:
    radial-gradient(circle at 50% 28%,rgba(104,29,255,.22),transparent 34%),
    #09090b;
  background-position: center;
  background-size: cover;
}

.v21-hot-avatar-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 130px;
}

.v21-real-hot-playback .hot-playback-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.v21-real-hot-playback .hot-playback-avatar > span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #111217;
}

.v21-real-hot-quote {
  bottom: 180px !important;
}

.v21-real-hot-meta {
  position: absolute;
  z-index: 5;
  left: 28px;
  bottom: 120px;
  color: #9b9ea6;
  font-size: 10px;
}

/* ---------------- MOBILE 430 TARGET ---------------- */
@media (max-width: 620px) {
  .v21-show-carousel {
    grid-auto-columns: min(82vw, 330px);
    gap: 9px;
  }

  .v21-show-media {
    height: 198px;
  }

  .v21-show-title-overlay h3 {
    font-size: 22px;
  }

  .v21-real-show-stats {
    font-size: 10px;
  }

  .v21-real-shorts-row {
    grid-auto-columns: 135px;
  }

  .v21-real-short-card {
    height: 186px;
  }

  .v21-bottom-nav-fixed {
    min-height: 90px;
    grid-template-columns: 1fr 1fr 110px 1fr 1fr;
    padding-left: 4px;
    padding-right: 4px;
  }

  .v21-bottom-nav-live {
    min-height: 76px;
    grid-template-columns: 1fr 1fr 102px 1fr 1fr;
  }

  .v21-nav-icon,
  .v21-nav-icon > svg {
    width: 30px;
    height: 30px;
  }

  .v21-nav-link small {
    font-size: 11px !important;
  }

  .v21-logo-orbit,
  .v21-logo-orbit img {
    width: 70px;
    height: 70px;
  }

  .v21-center-take strong {
    font-size: 11px;
  }

  .v21-public-profile-actions {
    padding: 10px 16px 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v21-logo-orbit img,
  .v21-center-take::after {
    animation: none;
  }
}
/* === END OMILI v2.1 === */

/* v2.1 final identity / navigation authority */
.phone-content {
  padding-bottom: 102px !important;
}

.v21-live-host-avatar {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: cover;
  border: 1px solid #8f24ff;
  border-radius: 50%;
}

.v21-bottom-nav-fixed {
  padding-bottom: max(4px, env(safe-area-inset-bottom));
}

.v21-bottom-nav-live {
  padding-bottom: max(3px, env(safe-area-inset-bottom));
}

/* v2.1 real Today's Debate */
.v21-real-debate-count {
  align-items: center;
}

.v21-debate-avatars {
  display: flex;
  align-items: center;
  margin-left: 3px;
}

.v21-debate-avatars img {
  width: 22px;
  height: 22px;
  object-fit: cover;
  border: 2px solid #08080a;
  border-radius: 50%;
  margin-left: -6px;
}

.v21-debate-avatars img:first-child {
  margin-left: 0;
}

.v21-debate-real-takes {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}

.v21-debate-take-card {
  min-height: 94px;
  display: grid;
  grid-template-columns: 62px minmax(0,1fr);
  gap: 9px;
  align-items: center;
  padding: 9px;
  border: 1px solid #2d3037;
  border-radius: 11px;
  background: #08080a;
  color: #fff;
  text-decoration: none;
}

.v21-debate-take-card > img,
.v21-debate-take-card > span {
  width: 60px;
  height: 72px;
  display: grid;
  place-items: center;
  object-fit: cover;
  border-radius: 9px;
  background: #111218;
}

.v21-debate-take-card > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.v21-debate-take-card strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v21-debate-take-card small {
  overflow: hidden;
  color: #59c9ff;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v21-debate-take-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 2px 0 0;
  color: #d1d3d8;
  font-size: 10px;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.v21-debate-empty {
  min-height: 104px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border: 1px dashed #43334d;
  border-radius: 12px;
  background: #09080b;
  color: #fff;
  text-decoration: none;
  text-align: center;
}

.v21-debate-empty strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 15px;
  font-style: italic;
}

.v21-debate-empty span {
  color: #858891;
  font-size: 10px;
}

.v21-debate-empty b {
  color: #c976ff;
  font-size: 10px;
}

.v21-real-debate-stats .engagement-card strong {
  color: #5de68a;
}

.v21-ai-summary-real {
  border-color: #2e3137;
  background: #08080a;
}

.past-debate-card .past-debate-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 620px) {
  .v21-debate-real-takes {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   OMILI v2.2 — UNIVERSAL CREATE / SHORTS / STREAMLINED SHOWS
   ========================================================= */

/* ---------------- UNIVERSAL CREATE NAV ---------------- */
.v21-center-take strong {
  width: 62px;
  font-size: 12px;
  letter-spacing: .45px;
}

/* ---------------- SHARED CREATE LAYOUT ---------------- */
.v22-create-page,
.v22-show-create-page,
.v22-short-form-page {
  width: min(100%, 680px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 14px 14px 112px;
  background:
    radial-gradient(circle at 80% 0%,rgba(120,0,255,.10),transparent 28%),
    #000;
  color: #fff;
}

.v22-create-loading {
  min-height: 70vh;
  display: grid;
  place-items: center;
  color: #8d9098;
  font-size: 12px;
}

.v22-create-auth {
  max-width: 520px;
  min-height: 440px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  margin: 70px auto 0;
  padding: 24px;
  border: 1px solid #34363e;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%,rgba(108,0,255,.13),transparent 52%),
    #08080a;
  text-align: center;
}

.v22-create-auth > span {
  color: #a86cff;
  font-size: 10px;
  font-weight: 900;
}

.v22-create-auth h1 {
  margin: 0;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 29px;
  font-style: italic;
}

.v22-create-auth p {
  max-width: 390px;
  margin: 0;
  color: #8e9199;
  font-size: 12px;
  line-height: 1.45;
}

.v22-create-auth a {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 0 22px;
  border-radius: 22px;
  background: linear-gradient(100deg,#f7173c,#9900ee,#286cff);
  color: #fff;
  text-decoration: none;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 950;
}

.v22-create-header,
.v22-flow-header {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 10px;
  align-items: center;
}

.v22-create-header > div:nth-child(2),
.v22-flow-header > div:nth-child(2) {
  display: grid;
  gap: 2px;
  text-align: center;
}

.v22-create-header > div:nth-child(2) > span,
.v22-flow-header > div:nth-child(2) > span {
  color: #9c69ff;
  font-size: 9px;
  font-weight: 900;
}

.v22-create-header h1,
.v22-flow-header h1 {
  margin: 0;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 22px;
  line-height: 1;
  font-style: italic;
}

.v22-flow-header > button,
.v22-create-header > button {
  min-width: 38px;
  min-height: 38px;
  border: 0;
  background: transparent;
  color: #a0a3aa;
  font-size: 10px;
  font-weight: 900;
}

.v22-create-user-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1.5px solid #9e23ff;
  border-radius: 50%;
  background: #111218 center/cover no-repeat;
  font-size: 18px;
}

.v22-create-intro {
  display: grid;
  gap: 4px;
  margin: 18px 0 12px;
  text-align: center;
}

.v22-create-intro strong {
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 18px;
  font-style: italic;
}

.v22-create-intro span {
  color: #898c94;
  font-size: 11px;
}

.v22-create-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.v22-create-option {
  min-height: 420px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1.2fr .8fr;
  border: 1px solid transparent;
  border-radius: 18px;
  color: #fff;
  text-decoration: none;
  background:
    linear-gradient(#08080a,#08080a) padding-box,
    linear-gradient(145deg,#f1193b,#9300ee,#286cff) border-box;
  box-shadow: 0 18px 45px rgba(0,0,0,.34);
}

.v22-create-option-visual {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  background:
    radial-gradient(circle at 50% 45%,rgba(159,34,255,.30),transparent 38%),
    linear-gradient(160deg,#151525,#050506 70%);
}

.v22-create-short-option .v22-create-option-visual {
  background:
    radial-gradient(circle at 50% 45%,rgba(255,26,61,.24),transparent 38%),
    linear-gradient(160deg,#211018,#050506 70%);
}

.v22-create-option-visual::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
}

.v22-create-play,
.v22-create-live-dot {
  position: relative;
  z-index: 2;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border: 2px solid #a424ff;
  border-radius: 50%;
  background: rgba(0,0,0,.56);
  color: #fff;
  font-size: 35px;
  box-shadow: 0 0 28px rgba(137,22,255,.20);
}

.v22-create-live-dot {
  border-color: #ff2849;
  color: #ff2747;
  font-size: 46px;
}

.v22-create-option-visual i {
  position: relative;
  z-index: 2;
  color: #d0d2d7;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 1px;
}

.v22-create-option-copy {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 18px;
}

.v22-create-option-copy > span {
  color: #9a6bff;
  font-size: 9px;
  font-weight: 900;
}

.v22-create-short-option .v22-create-option-copy > span {
  color: #ff7381;
}

.v22-create-option-copy h2 {
  margin: 0;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 28px;
  line-height: .98;
  font-style: italic;
}

.v22-create-option-copy p {
  margin: 0;
  color: #9699a1;
  font-size: 11px;
  line-height: 1.42;
}

.v22-create-option-copy strong {
  margin-top: 6px;
  color: #fff;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 12px;
  font-style: italic;
}

.v22-create-format-note {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.v22-create-format-note > div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #282a31;
  border-radius: 10px;
  background: #08080a;
}

.v22-create-format-note b {
  color: #d6d7dc;
  font-size: 10px;
}

.v22-create-format-note span {
  color: #767981;
  font-size: 9px;
  line-height: 1.35;
}

.v22-flow-progress {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 5px;
  margin: 13px 0 12px;
}

.v22-flow-progress i {
  height: 4px;
  border-radius: 3px;
  background: #1d1f24;
}

.v22-flow-progress i.active {
  background: linear-gradient(90deg,#ff183d,#9b00ee,#286cff);
}

.v22-create-message {
  padding: 10px 11px;
  border: 1px solid #713a43;
  border-radius: 10px;
  background: #18090b;
  color: #ff929d;
  font-size: 10px;
  line-height: 1.35;
}

.v22-flow-primary,
a.v22-flow-primary {
  width: 100%;
  min-height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 23px;
  background: linear-gradient(100deg,#f31a3d,#a000e9 55%,#286bff);
  color: #fff;
  text-decoration: none;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 950;
}

.v22-flow-primary:disabled {
  opacity: .56;
}

.v22-flow-secondary {
  width: 100%;
  min-height: 44px;
  border: 1px solid #383a42;
  border-radius: 22px;
  background: #09090b;
  color: #fff;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 900;
}

.v22-create-field {
  position: relative;
  display: grid;
  gap: 6px;
  color: #aeb1b8;
  font-size: 10px;
  font-weight: 900;
}

.v22-create-field > span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.v22-create-field > span small {
  color: #676a72;
  font-size: 9px;
  font-weight: 700;
}

.v22-create-field input,
.v22-create-field select,
.v22-create-field textarea,
.v22-cohost-picker > input,
.v22-schedule-input {
  width: 100%;
  border: 1px solid #34363e;
  border-radius: 10px;
  outline: none;
  background: #050506;
  color: #fff;
  font-family: var(--omili-body-font),Arial,sans-serif;
  font-size: 13px;
}

.v22-create-field input,
.v22-create-field select,
.v22-cohost-picker > input,
.v22-schedule-input {
  min-height: 44px;
  padding: 0 11px;
}

.v22-create-field textarea {
  min-height: 104px;
  padding: 11px;
  resize: vertical;
  line-height: 1.4;
}

.v22-create-field > small {
  justify-self: end;
  color: #666971;
  font-size: 9px;
}

.v22-create-field input:focus,
.v22-create-field select:focus,
.v22-create-field textarea:focus,
.v22-cohost-picker > input:focus,
.v22-schedule-input:focus {
  border-color: #9129ff;
  box-shadow: 0 0 0 2px rgba(145,41,255,.09);
}

/* ---------------- CREATOR IMAGE PICKER ---------------- */
.v22-image-field {
  display: grid;
  gap: 8px;
}

.v22-image-field-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.v22-image-field-heading > span {
  color: #aeb1b8;
  font-size: 10px;
  font-weight: 900;
}

.v22-image-field-heading > div {
  display: flex;
  gap: 5px;
}

.v22-image-field-heading button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #363840;
  border-radius: 14px;
  background: #0b0b0e;
  color: #c8cad0;
  font-size: 9px;
  font-weight: 900;
}

.v22-image-field-main {
  display: grid;
  grid-template-columns: 92px minmax(0,1fr);
  gap: 10px;
  align-items: start;
}

.v22-image-preview {
  width: 92px;
  height: 92px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid #30323a;
  border-radius: 12px;
  background: #09090b;
  color: #777a82;
  font-size: 26px;
}

.v22-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v22-image-field-main > div:last-child {
  display: grid;
  gap: 6px;
}

.v22-image-field-main input {
  min-height: 38px;
  width: 100%;
  border: 1px solid #30323a;
  border-radius: 8px;
  padding: 0 10px;
  outline: none;
  background: #050506;
  color: #fff;
  font-size: 11px;
}

.v22-image-field-main small {
  color: #777a82;
  font-size: 9px;
  line-height: 1.4;
}

.v22-field-error {
  color: #ff7c89 !important;
}

.v22-image-library {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 7px;
  padding: 9px;
  border: 1px solid #292b31;
  border-radius: 12px;
  background: #08080a;
}

.v22-image-library > button {
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid #30323a;
  border-radius: 10px;
  background: #0b0b0e;
  color: #fff;
  text-align: left;
}

.v22-image-library > button.selected {
  border-color: #8b2cff;
  box-shadow: inset 0 0 0 1px rgba(139,44,255,.22);
}

.v22-image-library img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 7px;
}

.v22-image-library strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v22-image-library span {
  color: #73767e;
  font-size: 9px;
}

/* ---------------- SHORT RECORDER ---------------- */
.v22-short-page {
  width: min(100%, 520px);
  min-height: 100dvh;
  margin: 0 auto;
  background: #000;
  color: #fff;
}

.v22-recorder-screen {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 25%,rgba(89,19,178,.28),transparent 38%),
    #050506;
}

.v22-camera-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.v22-camera-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(0,0,0,.34),transparent 32%,rgba(0,0,0,.12) 65%,rgba(0,0,0,.87) 100%);
}

.v22-recorder-top {
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 12px;
  right: 12px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
}

.v22-recorder-top > a,
.v22-recorder-top > button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background: rgba(0,0,0,.58);
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  backdrop-filter: blur(8px);
}

.v22-recorder-top > strong {
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 16px;
  font-style: italic;
  text-align: center;
}

.v22-recorder-author {
  position: absolute;
  z-index: 4;
  top: 72px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.v22-recorder-author > div {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1.5px solid #9628ff;
  border-radius: 50%;
  background: #111218 center/cover no-repeat;
}

.v22-recorder-author span {
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.55);
  font-size: 10px;
  font-weight: 900;
}

.v22-countdown {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 130px;
  font-style: italic;
  text-shadow: 0 0 35px rgba(153,28,255,.62),0 5px 24px #000;
  animation: v22Countdown .72s ease-out;
}

@keyframes v22Countdown {
  from { transform: scale(.55); opacity: 0; }
  55% { transform: scale(1.1); opacity: 1; }
  to { transform: scale(1); opacity: 1; }
}

.v22-recording-time {
  position: absolute;
  z-index: 4;
  top: 78px;
  right: 16px;
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border-radius: 15px;
  background: rgba(0,0,0,.65);
  font-size: 11px;
  font-weight: 900;
}

.v22-recording-time i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff173d;
  box-shadow: 0 0 10px rgba(255,23,61,.8);
  animation: v22Blink 1s steps(2,end) infinite;
}

@keyframes v22Blink { 50% { opacity: .25; } }

.v22-camera-error {
  position: absolute;
  z-index: 4;
  top: 126px;
  left: 16px;
  right: 16px;
  padding: 10px;
  border: 1px solid #703741;
  border-radius: 10px;
  background: rgba(26,8,11,.88);
  color: #ff929d;
  font-size: 10px;
  line-height: 1.4;
}

.v22-recorder-bottom {
  position: absolute;
  z-index: 4;
  left: 16px;
  right: 16px;
  bottom: max(24px,env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr 108px 1fr;
  gap: 12px;
  align-items: center;
}

.v22-add-media {
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 25px;
}

.v22-add-media span {
  font-size: 9px;
  font-weight: 900;
}

.v22-record-button {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  justify-self: center;
  border: 4px solid #fff;
  border-radius: 50%;
  background: rgba(0,0,0,.25);
  box-shadow: 0 0 0 4px rgba(0,0,0,.42);
}

.v22-record-button i {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #f0183a;
  transition: .18s ease;
}

.v22-record-button.recording i {
  width: 42px;
  height: 42px;
  border-radius: 9px;
}

.v22-record-limit {
  display: grid;
  gap: 3px;
  text-align: center;
}

.v22-record-limit strong {
  font-size: 9px;
}

.v22-record-limit span {
  color: #a2a5ab;
  font-size: 9px;
}

.v22-short-form-page {
  display: grid;
  align-content: start;
  gap: 14px;
}

.v22-short-details-layout {
  display: grid;
  grid-template-columns: 122px minmax(0,1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid #2a2c33;
  border-radius: 14px;
  background: #08080a;
}

.v22-short-mini-preview {
  width: 122px;
  height: 178px;
  object-fit: cover;
  border: 1px solid #34363e;
  border-radius: 11px;
  background: #000;
}

.v22-short-details-layout label {
  display: grid;
  gap: 6px;
  color: #aeb1b8;
  font-size: 10px;
  font-weight: 900;
}

.v22-short-details-layout textarea {
  min-height: 125px;
  width: 100%;
  padding: 10px;
  border: 1px solid #34363e;
  border-radius: 10px;
  resize: none;
  outline: none;
  background: #050506;
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
}

.v22-short-details-layout small {
  justify-self: end;
  color: #696c74;
  font-size: 9px;
}

.v22-reference-picker {
  display: grid;
  gap: 8px;
}

.v22-reference-picker > span {
  color: #aeb1b8;
  font-size: 10px;
  font-weight: 900;
}

.v22-topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.v22-topic-chips button {
  max-width: 100%;
  min-height: 32px;
  overflow: hidden;
  padding: 0 11px;
  border: 1px solid #30323a;
  border-radius: 16px;
  background: #09090b;
  color: #aeb1b8;
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v22-topic-chips button.selected {
  border-color: #8b2cff;
  background: #13091c;
  color: #d69aff;
}

.v22-short-review-card {
  position: relative;
  width: min(100%,360px);
  overflow: hidden;
  justify-self: center;
  border: 1px solid #383a42;
  border-radius: 16px;
  background: #000;
}

.v22-short-review-video {
  width: 100%;
  aspect-ratio: 9/16;
  display: block;
  object-fit: cover;
  background: #000;
}

.v22-short-review-overlay {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 52px;
  display: grid;
  gap: 5px;
  pointer-events: none;
}

.v22-short-review-overlay > span {
  width: fit-content;
  padding: 4px 7px;
  border-radius: 9px;
  background: #16288f;
  font-size: 9px;
  font-weight: 900;
}

.v22-short-review-overlay strong {
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 23px;
  line-height: 1.02;
  font-style: italic;
  text-shadow: 0 2px 10px #000;
}

.v22-short-review-overlay small {
  justify-self: end;
  padding: 3px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,.68);
  font-size: 9px;
}

.v22-review-details {
  display: grid;
  gap: 6px;
}

.v22-review-details > div {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 8px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid #282a31;
  border-radius: 9px;
  background: #08080a;
}

.v22-review-details span {
  color: #777a82;
  font-size: 9px;
  font-weight: 900;
}

.v22-review-details strong {
  font-size: 11px;
  line-height: 1.35;
}

.v22-posting-screen,
.v22-posted-screen {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 38%,rgba(114,0,255,.13),transparent 35%),
    #000;
  color: #fff;
  text-align: center;
}

.v22-upload-orbit {
  position: relative;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
}

.v22-upload-orbit img {
  position: absolute;
  width: 150px;
  height: 150px;
  animation: v21Orbit 5s linear infinite;
}

.v22-upload-orbit span {
  position: relative;
  z-index: 2;
  font-size: 45px;
}

.v22-posting-screen h1,
.v22-posted-screen h1 {
  margin: 0;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 31px;
  font-style: italic;
}

.v22-posting-screen p,
.v22-posted-screen p {
  max-width: 400px;
  margin: 0;
  color: #999ca4;
  font-size: 12px;
  line-height: 1.45;
}

.v22-posting-screen small {
  color: #686b73;
  font-size: 9px;
}

.v22-posted-check {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  border: 4px solid #58e983;
  border-radius: 50%;
  color: #58e983;
  font-size: 43px;
  box-shadow: 0 0 30px rgba(88,233,131,.18);
}

.v22-posted-screen > span {
  color: #57e982;
  font-size: 10px;
  font-weight: 900;
}

.v22-posted-card {
  width: min(250px,70vw);
  overflow: hidden;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #34363e;
  border-radius: 14px;
  background: #08080a;
  text-align: left;
}

.v22-posted-card video {
  width: 100%;
  aspect-ratio: 9/13;
  object-fit: cover;
  border-radius: 10px;
}

.v22-posted-card strong {
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 15px;
  font-style: italic;
}

.v22-posted-card span {
  color: #797c84;
  font-size: 9px;
}

/* ---------------- SHORT FEED / PLAYBACK ---------------- */
.v22-short-type-badge {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 7px;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.v22-short-duration {
  position: absolute;
  z-index: 3;
  right: 7px;
  bottom: 8px;
  padding: 3px 5px;
  border-radius: 7px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.v22-feed-short .v21-real-short-card,
.v22-feed-short {
  border-radius: 12px 20px 12px 20px;
}

.v22-short-playback {
  position: relative;
  width: min(100%,520px);
  min-height: 100dvh;
  overflow: hidden;
  margin: 0 auto;
  background: #000;
  color: #fff;
}

.v22-short-playback-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #000;
}

.v22-short-playback-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,rgba(0,0,0,.45),transparent 30%,transparent 58%,rgba(0,0,0,.92) 100%);
}

.v22-short-playback-top {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 14px;
  right: 14px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 8px;
  align-items: center;
}

.v22-short-playback-top > a,
.v22-short-playback-top > button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background: rgba(0,0,0,.58);
  color: #fff;
  text-decoration: none;
  font-size: 19px;
}

.v22-short-playback-top > div {
  display: grid;
  gap: 2px;
  text-align: center;
}

.v22-short-playback-top strong {
  font-size: 11px;
}

.v22-short-playback-top span {
  color: #bdc0c6;
  font-size: 9px;
}

.v22-short-playback-author {
  position: absolute;
  z-index: 4;
  top: 73px;
  left: 16px;
  max-width: calc(100% - 84px);
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
}

.v22-short-playback-author > div {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 1.5px solid #9e23ff;
  border-radius: 50%;
  background: #111218 center/cover no-repeat;
}

.v22-short-playback-author > span {
  display: grid;
  gap: 2px;
}

.v22-short-playback-author strong {
  font-size: 12px;
}

.v22-short-playback-author small {
  color: #d0d2d7;
  font-size: 9px;
}

.v22-short-playback-actions {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 172px;
  display: grid;
  gap: 10px;
}

.v22-short-playback-actions button {
  width: 54px;
  min-height: 66px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 0;
  border-radius: 27px;
  background: rgba(0,0,0,.62);
  color: #fff;
}

.v22-short-playback-actions i {
  font-size: 24px;
  font-style: normal;
}

.v22-short-playback-actions b,
.v22-short-playback-actions span {
  font-size: 9px;
}

.v22-short-playback-copy {
  position: absolute;
  z-index: 4;
  left: 18px;
  right: 78px;
  bottom: 98px;
  display: grid;
  gap: 7px;
}

.v22-short-playback-copy h1 {
  margin: 0;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 28px;
  line-height: 1.02;
  font-style: italic;
  text-shadow: 0 2px 12px #000;
}

.v22-short-playback-copy p {
  margin: 0;
  color: #e3e4e7;
  font-size: 12px;
  line-height: 1.4;
}

.v22-short-playback-copy > span {
  color: #9fa2a9;
  font-size: 9px;
}

.v22-short-create-cta {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(10px,env(safe-area-inset-bottom));
  width: 94px;
  height: 82px;
  display: grid;
  place-items: center;
  color: #fff;
  text-decoration: none;
  transform: translateX(-50%);
}

.v22-short-create-cta strong {
  position: relative;
  z-index: 2;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 11px;
  font-style: italic;
}

.v22-short-not-found {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
}

.v22-short-not-found h1 {
  margin: 0;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 27px;
  font-style: italic;
}

.v22-short-not-found a {
  color: #5dcaff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 900;
}

/* ---------------- STREAMLINED SHOW CREATION ---------------- */
.v22-show-create-page {
  padding-bottom: 52px;
}

.v22-show-step {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #2b2d34;
  border-radius: 17px;
  background:
    radial-gradient(circle at 88% 5%,rgba(105,0,255,.10),transparent 34%),
    #08080a;
}

.v22-step-intro {
  display: grid;
  gap: 5px;
}

.v22-step-intro > span {
  color: #a86bff;
  font-size: 9px;
  font-weight: 900;
}

.v22-step-intro h2 {
  margin: 0;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 29px;
  line-height: .98;
  font-style: italic;
}

.v22-step-intro p {
  max-width: 560px;
  margin: 0;
  color: #8d9098;
  font-size: 11px;
  line-height: 1.45;
}

.v22-show-card-preview,
.v22-launch-summary {
  min-height: 118px;
  display: grid;
  grid-template-columns: 118px minmax(0,1fr);
  gap: 11px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 13px;
  background:
    linear-gradient(#09090c,#09090c) padding-box,
    linear-gradient(120deg,#f31a3c,#9700ee,#286cff) border-box;
}

.v22-show-card-preview-image,
.v22-launch-cover {
  min-height: 118px;
  background:
    radial-gradient(circle at 50% 30%,rgba(140,35,255,.22),transparent 38%),
    #111219 center/cover no-repeat;
}

.v22-show-card-preview > div:last-child,
.v22-launch-summary > div:last-child {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 10px 11px 10px 0;
}

.v22-show-card-preview span,
.v22-launch-summary span {
  color: #9d6eff;
  font-size: 9px;
  font-weight: 900;
}

.v22-show-card-preview strong,
.v22-launch-summary strong {
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 19px;
  line-height: 1.04;
  font-style: italic;
}

.v22-show-card-preview small,
.v22-launch-summary small {
  color: #81848c;
  font-size: 10px;
  line-height: 1.35;
}

.v22-format-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.v22-format-options > button {
  position: relative;
  min-height: 190px;
  display: grid;
  grid-template-columns: 44px 1fr 24px;
  gap: 9px;
  align-items: start;
  padding: 14px;
  border: 1px solid #30323a;
  border-radius: 14px;
  background: #09090b;
  color: #fff;
  text-align: left;
}

.v22-format-options > button.selected {
  border-color: #932dff;
  background:
    radial-gradient(circle at 85% 8%,rgba(145,37,255,.13),transparent 40%),
    #0e0912;
  box-shadow: inset 0 0 0 1px rgba(147,45,255,.15);
}

.v22-format-options > button > i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #393b43;
  border-radius: 50%;
  background: #111217;
  font-size: 22px;
  font-style: normal;
}

.v22-format-options > button > div {
  display: grid;
  gap: 5px;
}

.v22-format-options span {
  color: #7d8088;
  font-size: 9px;
  font-weight: 900;
}

.v22-format-options strong {
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 20px;
  font-style: italic;
}

.v22-format-options p {
  margin: 0;
  color: #8e9199;
  font-size: 10px;
  line-height: 1.42;
}

.v22-format-options > button > b {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #54e881;
  color: #051009;
  font-size: 11px;
}

.v22-quick-battle-editor {
  display: grid;
  gap: 11px;
  padding: 13px;
  border: 1px solid #412a54;
  border-radius: 13px;
  background:
    radial-gradient(circle at 85% 0%,rgba(132,31,255,.12),transparent 42%),
    #0b080e;
}

.v22-quick-battle-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.v22-quick-battle-heading span {
  color: #cc86ff;
  font-size: 10px;
  font-weight: 900;
}

.v22-quick-battle-heading small {
  color: #767981;
  font-size: 9px;
}

.v22-side-fields,
.v22-side-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.v22-open-chat-preview {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #28445b;
  border-radius: 12px;
  background: #071017;
}

.v22-open-chat-preview > span {
  font-size: 27px;
}

.v22-open-chat-preview > div {
  display: grid;
  gap: 3px;
}

.v22-open-chat-preview strong {
  color: #65caff;
  font-size: 10px;
}

.v22-open-chat-preview p {
  margin: 0;
  color: #8093a1;
  font-size: 10px;
  line-height: 1.4;
}

.v22-host-summary {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #2c2e35;
  border-radius: 11px;
  background: #09090b;
}

.v22-host-summary-avatar {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1.5px solid #9828ff;
  border-radius: 50%;
  background: #111218 center/cover no-repeat;
}

.v22-host-summary > div:last-child {
  display: grid;
  gap: 2px;
}

.v22-host-summary span {
  color: #777a82;
  font-size: 9px;
  font-weight: 900;
}

.v22-host-summary strong {
  font-size: 13px;
}

.v22-host-summary small {
  color: #55c8ff;
  font-size: 10px;
}

.v22-cohost-picker,
.v22-launch-control {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #2c2e35;
  border-radius: 12px;
  background: #09090b;
}

.v22-control-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.v22-control-heading > div {
  display: grid;
  gap: 2px;
}

.v22-control-heading strong {
  font-size: 10px;
}

.v22-control-heading span {
  color: #74777f;
  font-size: 9px;
}

.v22-control-heading > button {
  border: 0;
  background: transparent;
  color: #ff7986;
  font-size: 9px;
  font-weight: 900;
}

.v22-selected-cohost,
.v22-cohost-results button {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 9px;
  align-items: center;
  padding: 8px;
  border: 1px solid #30323a;
  border-radius: 9px;
  background: #0b0b0e;
  color: #fff;
  text-align: left;
}

.v22-selected-cohost > div,
.v22-cohost-results button > div {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #8f27ff;
  border-radius: 50%;
  background: #111218 center/cover no-repeat;
}

.v22-selected-cohost > span,
.v22-cohost-results button > span {
  display: grid;
  gap: 2px;
}

.v22-selected-cohost strong,
.v22-cohost-results strong {
  font-size: 11px;
}

.v22-selected-cohost small,
.v22-cohost-results small {
  color: #5bc9ff;
  font-size: 9px;
}

.v22-cohost-results {
  display: grid;
  gap: 5px;
}

.v22-segmented-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  border: 1px solid #292b31;
  border-radius: 10px;
  background: #050506;
}

.v22-segmented-control button {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #7f828a;
  font-size: 9px;
  font-weight: 900;
}

.v22-segmented-control button.selected {
  background: linear-gradient(100deg,#3b0715,#23082f 55%,#091c37);
  color: #fff;
  box-shadow: inset 0 0 0 1px #4b2940;
}

.v22-token-bid-field {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}

.v22-token-bid-field span,
.v22-token-bid-field b {
  color: #8e9199;
  font-size: 9px;
}

.v22-token-bid-field input {
  min-height: 40px;
  width: 100%;
  border: 1px solid #34363e;
  border-radius: 9px;
  padding: 0 10px;
  background: #050506;
  color: #ffd348;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
}

.v22-control-copy {
  margin: 0;
  color: #7d8088;
  font-size: 9px;
  line-height: 1.4;
}

.v22-record-toggle {
  min-height: 70px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #2c2e35;
  border-radius: 12px;
  background: #09090b;
}

.v22-record-toggle > div {
  display: grid;
  gap: 3px;
}

.v22-record-toggle strong {
  font-size: 10px;
}

.v22-record-toggle span {
  color: #7d8088;
  font-size: 9px;
  line-height: 1.35;
}

.v22-record-toggle input {
  width: 22px;
  height: 22px;
  accent-color: #9b24ff;
}

.v22-go-live-button {
  background: linear-gradient(100deg,#ff173d,#ff4034 38%,#9b00ef 72%,#286cff);
}

/* ---------------- SHOW CARDS / DETAIL META ---------------- */
.v22-show-format-pill {
  padding: 4px 6px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px;
  background: rgba(0,0,0,.62);
  color: #dedfe3;
  font-size: 9px;
  font-weight: 900;
  backdrop-filter: blur(5px);
}

.v22-show-detail-meta,
.v22-live-format-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.v22-show-detail-meta span,
.v22-live-format-meta span {
  min-height: 21px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 11px;
  background: rgba(0,0,0,.52);
  color: #c7c9ce;
  font-size: 9px;
}

/* ---------------- IN-SHOW TAKE BATTLE ---------------- */
.v22-live-take-dock {
  position: absolute;
  z-index: 13;
  top: 122px;
  left: 14px;
  right: 68px;
  min-height: 96px;
  display: grid;
  gap: 5px;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(rgba(5,5,7,.93),rgba(5,5,7,.93)) padding-box,
    linear-gradient(110deg,#ff173d,#a000ed,#286cff) border-box;
  color: #fff;
  text-align: left;
  box-shadow: 0 10px 30px rgba(0,0,0,.34);
  backdrop-filter: blur(12px);
}

.v22-live-take-dock-top {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 6px;
  align-items: center;
}

.v22-live-take-dock-top > span {
  color: #e4b5ff;
  font-size: 9px;
  font-weight: 900;
}

.v22-live-take-dock-top > b {
  padding: 3px 6px;
  border-radius: 8px;
  background: #630016;
  color: #ff7684;
  font-size: 9px;
}

.v22-live-take-dock-top > small {
  justify-self: end;
  color: #8e9199;
  font-size: 9px;
}

.v22-live-take-dock > strong {
  overflow: hidden;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 17px;
  line-height: 1;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v22-live-take-dock-split {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: center;
}

.v22-live-take-dock-split > span {
  max-width: 90px;
  overflow: hidden;
  font-size: 9px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v22-live-take-dock-split > div {
  height: 7px;
  display: flex;
  overflow: hidden;
  border-radius: 5px;
  background: #202127;
}

.v22-live-take-dock-split i {
  height: 100%;
  background: linear-gradient(90deg,#ff183d,#df0a6d);
}

.v22-live-take-dock-split b {
  height: 100%;
  background: linear-gradient(90deg,#8500ed,#286cff);
}

.v22-live-take-dock > small {
  color: #898c94;
  font-size: 9px;
  text-align: center;
}

.v22-take-overlay {
  position: fixed;
  z-index: 220;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,.70);
  backdrop-filter: blur(7px);
}

.v22-take-sheet {
  width: min(100%,620px);
  max-height: 88dvh;
  overflow-y: auto;
  padding: 9px 16px 20px;
  border: 1px solid #393b43;
  border-radius: 23px 23px 0 0;
  background:
    radial-gradient(circle at 85% 0%,rgba(112,0,255,.13),transparent 34%),
    #070709;
  color: #fff;
}

.v22-sheet-handle {
  width: 42px;
  height: 4px;
  margin: 0 auto 11px;
  border-radius: 3px;
  background: #565960;
}

.v22-take-sheet > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.v22-take-sheet > header > div {
  display: grid;
  gap: 2px;
}

.v22-take-sheet > header span {
  color: #b876ff;
  font-size: 10px;
  font-weight: 900;
}

.v22-take-sheet > header small {
  color: #777a82;
  font-size: 9px;
}

.v22-take-sheet > header button {
  width: 34px;
  height: 34px;
  border: 1px solid #383a42;
  border-radius: 50%;
  background: #111216;
  color: #fff;
  font-size: 20px;
}

.v22-take-sheet h2 {
  margin: 15px 0 6px;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 27px;
  line-height: .98;
  font-style: italic;
}

.v22-take-sheet > p {
  margin: 0 0 13px;
  color: #8e9199;
  font-size: 10px;
  line-height: 1.4;
}

.v22-live-take-sides {
  display: grid;
  grid-template-columns: 1fr 42px 1fr;
  gap: 7px;
  align-items: center;
}

.v22-live-take-sides > button {
  min-height: 210px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 10px;
  border: 1px solid #34363e;
  border-radius: 14px;
  background: #09090b;
  color: #fff;
}

.v22-live-take-sides > button.left {
  border-color: #6b2430;
}

.v22-live-take-sides > button.right {
  border-color: #4c2770;
}

.v22-live-take-sides > button.selected {
  box-shadow: inset 0 0 0 2px rgba(92,226,127,.30);
}

.v22-live-take-image {
  width: 96px;
  height: 96px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 2px solid #ff2747;
  border-radius: 50%;
  background: #111218;
}

.v22-live-take-sides .right .v22-live-take-image {
  border-color: #9229ff;
}

.v22-live-take-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v22-live-take-image i {
  font-size: 28px;
  font-style: normal;
}

.v22-live-take-sides strong {
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 15px;
  font-style: italic;
  text-align: center;
}

.v22-live-take-sides small {
  color: #858890;
  font-size: 9px;
  text-align: center;
}

.v22-live-take-sides > button > b {
  color: #61e989;
  font-size: 9px;
}

.v22-live-take-vs {
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 23px;
  font-style: italic;
  text-align: center;
}

.v22-live-take-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 12px;
}

.v22-live-take-results > div {
  grid-column: 1/-1;
  height: 8px;
  display: flex;
  overflow: hidden;
  border-radius: 5px;
  background: #202127;
}

.v22-live-take-results i {
  background: linear-gradient(90deg,#ff173d,#df0b6c);
}

.v22-live-take-results b {
  background: linear-gradient(90deg,#8500ec,#286cff);
}

.v22-live-take-results span {
  color: #9c9fa6;
  font-size: 9px;
  font-weight: 900;
}

.v22-live-take-results span:last-child {
  text-align: right;
}

.v22-sheet-close {
  width: 100%;
  min-height: 42px;
  margin-top: 13px;
  border: 1px solid #34363e;
  border-radius: 21px;
  background: #0b0b0d;
  color: #fff;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 900;
}

/* Keep reactions below the new in-show Take Battle dock. */
.live-arena-actions {
  top: 235px !important;
}

/* ---------------- MOBILE ---------------- */
@media (max-width:620px) {
  .v22-create-page,
  .v22-show-create-page,
  .v22-short-form-page {
    padding: 10px 10px 104px;
  }

  .v22-create-options {
    grid-template-columns: 1fr;
  }

  .v22-create-option {
    min-height: 330px;
    grid-template-rows: 1fr .78fr;
  }

  .v22-create-option-visual {
    min-height: 176px;
  }

  .v22-create-format-note {
    grid-template-columns: 1fr;
  }

  .v22-image-library {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .v22-image-field-main {
    grid-template-columns: 78px minmax(0,1fr);
  }

  .v22-image-preview {
    width: 78px;
    height: 78px;
  }

  .v22-short-details-layout {
    grid-template-columns: 104px minmax(0,1fr);
    padding: 9px;
  }

  .v22-short-mini-preview {
    width: 104px;
    height: 155px;
  }

  .v22-format-options,
  .v22-side-image-grid {
    grid-template-columns: 1fr;
  }

  .v22-format-options > button {
    min-height: 146px;
  }

  .v22-quick-battle-heading {
    align-items: start;
    flex-direction: column;
  }

  .v22-show-step {
    padding: 13px;
  }

  .v22-show-card-preview,
  .v22-launch-summary {
    grid-template-columns: 102px minmax(0,1fr);
  }

  .v22-live-take-dock {
    top: 119px;
    right: 62px;
    min-height: 91px;
    padding: 9px;
  }

  .v22-live-take-dock > strong {
    font-size: 15px;
  }

  .v22-live-take-sides {
    grid-template-columns: 1fr 34px 1fr;
  }

  .v22-live-take-sides > button {
    min-height: 184px;
    padding: 7px;
  }

  .v22-live-take-image {
    width: 76px;
    height: 76px;
  }

  .v22-short-playback-copy h1 {
    font-size: 24px;
  }
}

@media (max-width:390px) {
  .v22-recorder-bottom {
    grid-template-columns: 1fr 96px 1fr;
    gap: 6px;
  }

  .v22-record-button {
    width: 82px;
    height: 82px;
  }

  .v22-record-button i {
    width: 63px;
    height: 63px;
  }

  .v22-side-fields {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v22-upload-orbit img,
  .v22-countdown,
  .v22-recording-time i {
    animation: none;
  }
}
/* === END OMILI v2.2 CREATE SYSTEM === */

/* v2.2 co-host identity authority */
.v22-live-format-meta .v22-live-cohost-chip {
  min-height: 21px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 7px 0 3px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 11px;
  background: rgba(0,0,0,.52);
  color: #c7c9ce;
  text-decoration: none;
}

.v22-live-format-meta .v22-live-cohost-chip img {
  width: 17px;
  height: 17px;
  object-fit: cover;
  border-radius: 50%;
}

.v22-live-format-meta .v22-live-cohost-chip span {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* v2.2 recorded Shorts in Search */
.v22-search-short-card {
  position: relative;
}

.v22-search-short-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-bottom: 3px;
  padding: 0 7px;
  border: 1px solid #5a286f;
  border-radius: 10px;
  background: #14091a;
  color: #d08aff;
  font-size: 9px;
  font-weight: 900;
}

/* v2.2 creator-owned Show lifecycle controls */
.show-detail-actions .v22-owner-launch-show {
  min-height: 42px;
  border: 1px solid #8f1b41;
  border-radius: 21px;
  background: linear-gradient(100deg,#ef173f,#9a00ef,#286cff);
  color: #fff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 900;
}

.v22-owner-end-show {
  min-width: 52px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #7a2836;
  border-radius: 17px;
  background: rgba(29,5,9,.78);
  color: #ff7886;
  font-size: 10px;
  font-weight: 900;
}

.v22-owner-end-show:disabled,
.show-detail-actions .v22-owner-launch-show:disabled {
  opacity: .55;
}

.show-detail-owner-message {
  margin: 0 16px 10px;
}

/* v2.2 universal Create bottom sheet */
.v21-center-take {
  border: 0;
  cursor: pointer;
}

.v22-create-sheet-backdrop {
  position: fixed;
  z-index: 260;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(7px);
}

.v22-create-sheet {
  width: min(100%, 620px);
  display: grid;
  gap: 9px;
  padding: 9px 14px calc(18px + env(safe-area-inset-bottom));
  border: 1px solid #34363f;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background:
    radial-gradient(circle at 50% 0%,rgba(114,0,255,.14),transparent 34%),
    #08080a;
  color: #fff;
  box-shadow: 0 -20px 55px rgba(0,0,0,.55);
}

.v22-create-sheet > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 7px;
}

.v22-create-sheet > header > div {
  display: grid;
  gap: 2px;
}

.v22-create-sheet > header span {
  color: #b66cff;
  font-size: 9px;
  font-weight: 900;
}

.v22-create-sheet > header h2 {
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 20px;
  font-style: italic;
}

.v22-create-sheet > header > button {
  width: 34px;
  height: 34px;
  border: 1px solid #373942;
  border-radius: 50%;
  background: #101115;
  color: #fff;
  font-size: 18px;
}

.v22-create-sheet-option {
  min-height: 94px;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 12px;
  border: 1px solid #30323a;
  border-radius: 14px;
  background: #0a0a0d;
  color: #fff;
  text-decoration: none;
}

.v22-create-sheet-option.short {
  border-color: #633147;
  background:
    radial-gradient(circle at 0 50%,rgba(255,26,65,.13),transparent 42%),
    #0a0a0d;
}

.v22-create-sheet-option.show {
  border-color: #3d3369;
  background:
    radial-gradient(circle at 0 50%,rgba(70,48,255,.13),transparent 42%),
    #0a0a0d;
}

.v22-create-sheet-option > i {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid #484a54;
  border-radius: 50%;
  background: #111218;
  font-size: 22px;
  font-style: normal;
}

.v22-create-sheet-option.short > i {
  color: #ff3154;
}

.v22-create-sheet-option.show > i {
  color: #8074ff;
}

.v22-create-sheet-option > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.v22-create-sheet-option span {
  color: #7d8088;
  font-size: 9px;
  font-weight: 900;
}

.v22-create-sheet-option strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 17px;
  line-height: 1;
  font-style: italic;
}

.v22-create-sheet-option small {
  color: #8c8f97;
  font-size: 10px;
  line-height: 1.3;
}

.v22-create-sheet-option > b {
  color: #d7d9de;
  font-size: 9px;
  white-space: nowrap;
}

.v22-create-studio-link {
  min-height: 34px;
  display: grid;
  place-items: center;
  color: #8d9098;
  text-decoration: none;
  font-size: 9px;
  font-weight: 900;
}

@media (max-width:390px) {
  .v22-create-sheet-option {
    grid-template-columns: 46px minmax(0,1fr);
  }

  .v22-create-sheet-option > i {
    width: 44px;
    height: 44px;
  }

  .v22-create-sheet-option > b {
    grid-column: 2;
  }
}


/* =========================================================
   OMILI v2.3 — CREATOR STUDIO / ENGAGEMENT / MATCH HUBS
   ========================================================= */

/* Definitive Create-button white-patch repair. */
.v21-center-take,
.v21-center-take:hover,
.v21-center-take:focus,
.v21-center-take:active,
.v21-center-take::before,
.v21-logo-orbit,
.v21-logo-orbit::before {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.v21-center-take { padding: 0 !important; outline: 0; }
.v21-logo-orbit img { background: transparent !important; mix-blend-mode: normal; }
.v21-bottom-nav { overflow: visible; }

.v23-match-selector{display:grid;gap:8px;margin:14px 0}.v23-match-selector-heading{display:flex;justify-content:space-between;gap:8px;align-items:center}.v23-match-selector-heading>div{display:grid;gap:2px}.v23-match-selector-heading span{font-size:10px;font-weight:900;color:#bbb}.v23-match-selector-heading small{font-size:9px;color:#737780}.v23-match-selector-heading button{border:0;background:transparent;color:#ff7b89;font-size:9px;font-weight:900}.v23-add-match,.v23-selected-match{width:100%;min-height:64px;border:1px solid #343741;border-radius:12px;background:#08080b;color:#fff;display:grid;align-items:center;gap:8px;padding:9px;text-align:left}.v23-add-match{grid-template-columns:34px 1fr auto}.v23-add-match>i{width:30px;height:30px;display:grid;place-items:center;border:1px solid #7543ff;border-radius:50%;font-style:normal}.v23-add-match>span{display:grid;gap:2px}.v23-add-match strong{font-size:11px}.v23-add-match small,.v23-add-match>b{font-size:9px;color:#7d8089}.v23-add-match>b{color:#bd7bff}.v23-selected-match{grid-template-columns:auto 1fr auto 1fr auto;text-align:center}.v23-selected-match>div{display:flex;align-items:center;justify-content:center;gap:5px}.v23-selected-match img,.v23-match-context-team img{width:26px;height:26px;object-fit:contain}.v23-selected-match>strong{font-size:17px}.v23-selected-match>small{font-size:9px;color:#7c7f87}.v23-match-state,.v23-match-context-state{width:fit-content;padding:3px 7px;border:1px solid #325d78;border-radius:9px;color:#62caff;font-size:9px;font-weight:900}.state-live,.state-paused{border-color:#8b2434!important;color:#ff6677!important;background:#1a070b!important}.state-finished{border-color:#4c4f58!important;color:#b7bac2!important}.v23-match-picker-backdrop,.v23-comments-backdrop,.v23-modal-backdrop{position:fixed;z-index:350;inset:0;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.76);backdrop-filter:blur(7px)}.v23-match-picker,.v23-comments-sheet,.v23-modal{width:min(100%,650px);max-height:86dvh;overflow:auto;padding:10px 14px calc(18px + env(safe-area-inset-bottom));border:1px solid #343741;border-bottom:0;border-radius:24px 24px 0 0;background:#08080b;color:#fff}.v23-sheet-handle{width:42px;height:4px;margin:0 auto 10px;border-radius:4px;background:#555964}.v23-match-picker header,.v23-comments-sheet header,.v23-modal header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.v23-match-picker header span,.v23-comments-sheet header span{font-size:9px;color:#9c65ff;font-weight:900}.v23-match-picker h2,.v23-comments-sheet h2,.v23-modal h2{margin:2px 0 0;font-family:var(--omili-heading-font);font-style:italic;font-size:22px}.v23-match-picker header button,.v23-comments-sheet header button,.v23-modal header button{width:34px;height:34px;border:1px solid #343741;border-radius:50%;background:#0e0e11;color:#fff}.v23-match-picker nav,.v23-studio-tabs,.v23-moderation-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:11px 0}.v23-match-picker nav button,.v23-studio-tabs button,.v23-moderation-tabs button{min-height:35px;border:1px solid #282b32;border-radius:9px;background:#09090b;color:#7c7f87;font-size:9px;font-weight:900}.v23-match-picker nav button.active,.v23-studio-tabs button.active,.v23-moderation-tabs button.active{border-color:#663292;background:#15091d;color:#fff}.v23-match-picker>input{width:100%;min-height:40px;padding:0 11px;border:1px solid #30333b;border-radius:10px;background:#050506;color:#fff}.v23-match-picker-list{display:grid;gap:6px;margin-top:9px}.v23-match-picker-list>button{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:7px;align-items:center;padding:9px;border:1px solid #292c33;border-radius:10px;background:#09090b;color:#fff}.v23-match-picker-list>button>div{display:flex;align-items:center;gap:6px}.v23-match-picker-list img{width:30px;height:30px;object-fit:contain}.v23-match-picker-list>button>small{grid-column:1/-1;color:#777b83;font-size:9px}.v23-no-matches,.v23-empty{min-height:110px;display:grid;place-items:center;align-content:center;gap:6px;border:1px dashed #343741;border-radius:12px;text-align:center;color:#858992}.v23-no-matches strong,.v23-empty strong{color:#fff;font-family:var(--omili-heading-font);font-style:italic}.v23-no-matches span{font-size:10px}.v23-match-context-bar{display:grid;grid-template-columns:auto 1fr auto 1fr auto;gap:7px;align-items:center;min-height:48px;padding:7px 9px;border:1px solid #343741;border-radius:11px;background:rgba(5,5,7,.82);color:#fff;text-decoration:none}.v23-match-context-team{display:flex;align-items:center;gap:5px}.v23-match-context-team.away{justify-content:flex-end}.v23-match-context-bar>strong{font-size:15px}.v23-match-context-bar>small{font-size:9px;color:#9699a1}.v23-match-context-bar.compact{min-height:38px;padding:5px 7px}.v23-short-match-wrap{position:absolute;z-index:5;top:98px;left:16px;right:72px}.v23-live-match{position:absolute;z-index:8;top:168px;left:14px;right:74px}.v23-upload-progress{width:min(78vw,360px);height:8px;border-radius:8px;background:#202229;overflow:hidden}.v23-upload-progress i{display:block;height:100%;background:linear-gradient(90deg,#ff183d,#9600ef,#286cff)}.v23-upload-percent{font-family:var(--omili-heading-font);font-size:26px;font-style:italic}.v23-short-actions{position:absolute;z-index:7;right:13px;top:34%;display:grid;gap:9px}.v23-short-actions button{width:54px;min-height:58px;display:grid;place-items:center;align-content:center;gap:2px;border:0;border-radius:22px;background:rgba(0,0,0,.66);color:#fff}.v23-short-actions button.active{box-shadow:inset 0 0 0 1px #ff3152}.v23-short-actions i{font-size:20px;font-style:normal}.v23-short-actions b,.v23-short-actions span{font-size:9px}.v23-short-message{position:absolute;z-index:8;left:15px;right:80px;bottom:185px;padding:8px;border-radius:8px;background:rgba(33,7,12,.9);color:#ff909a;font-size:10px}.v23-comment-list{display:grid;gap:8px;margin:12px 0;max-height:52vh;overflow:auto}.v23-comment-list article{padding:10px;border:1px solid #282b32;border-radius:10px;background:#0a0a0d}.v23-comment-list article.pinned{border-color:#78551b}.v23-comment-list article>span{color:#ffd15e;font-size:9px}.v23-comment-list article>strong{display:block;margin-top:4px;font-size:11px}.v23-comment-list p{margin:5px 0;color:#c1c3c9;font-size:11px;line-height:1.4}.v23-comment-list article>div{display:flex;gap:6px}.v23-comment-list button{border:0;background:transparent;color:#9e72ff;font-size:9px;font-weight:900}.v23-comments-sheet form{display:grid;grid-template-columns:1fr auto;gap:7px;position:sticky;bottom:0;padding-top:8px;background:#08080b}.v23-comments-sheet form input{min-height:40px;padding:0 10px;border:1px solid #30333b;border-radius:20px;background:#050506;color:#fff}.v23-comments-sheet form button{padding:0 16px;border:0;border-radius:20px;background:linear-gradient(100deg,#f7193d,#9100ec,#296aff);color:#fff;font-weight:900}.v23-studio-page,.v23-match-hub,.v23-admin-page{width:min(100%,980px);min-height:100vh;margin:0 auto;padding:14px 14px 100px;background:#000;color:#fff}.v23-loading,.v23-auth{min-height:70vh;display:grid;place-items:center;align-content:center;gap:8px}.v23-studio-header,.v23-admin-header{display:grid;grid-template-columns:42px 1fr auto;gap:9px;align-items:center}.v23-studio-header span,.v23-admin-header span{font-size:9px;color:#9866ff;font-weight:900}.v23-studio-header h1,.v23-admin-header h1{margin:2px 0 0;font-family:var(--omili-heading-font);font-style:italic;font-size:24px}.v23-studio-header>a:last-child{min-height:34px;display:grid;place-items:center;padding:0 12px;border:1px solid #4d2b68;border-radius:17px;color:#d68cff;text-decoration:none;font-size:9px;font-weight:900}.v23-studio-identity{display:grid;grid-template-columns:54px 1fr auto;gap:9px;align-items:center;margin:12px 0;padding:9px;border:1px solid #292c33;border-radius:12px;background:#08080a}.v23-studio-identity>div{width:50px;height:50px;border-radius:50%;background-position:center;background-size:cover}.v23-studio-identity span{display:grid;gap:2px}.v23-studio-identity small{color:#4fc8ff}.v23-studio-identity>a{color:#c67dff;font-size:9px;font-weight:900}.v23-studio-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.v23-studio-summary article{min-height:70px;display:grid;place-items:center;align-content:center;gap:3px;border:1px solid #292c33;border-radius:10px;background:#08080a}.v23-studio-summary span{font-size:9px;color:#777b83}.v23-studio-summary strong{font-family:var(--omili-heading-font);font-size:20px;font-style:italic}.v23-studio-tabs{grid-template-columns:1fr 1fr}.v23-message{padding:9px;border:1px solid #30506b;border-radius:9px;background:#07121a;color:#69c8ff;font-size:10px}.v23-studio-list{display:grid;gap:7px}.v23-studio-list>article{display:grid;grid-template-columns:100px 1fr auto;gap:10px;align-items:center;padding:9px;border:1px solid #292c33;border-radius:11px;background:#08080a}.v23-studio-thumb{height:92px;border-radius:9px;background-position:center;background-size:cover;color:#fff;text-decoration:none;position:relative}.v23-studio-thumb span{position:absolute;top:6px;left:6px;padding:3px 6px;border-radius:8px;background:rgba(0,0,0,.75);font-size:9px}.v23-studio-list>article>div{display:grid;gap:4px}.v23-studio-list>article>div>span{font-size:9px;color:#8a69ca}.v23-studio-list>article>div>strong{font-family:var(--omili-heading-font);font-style:italic;font-size:16px}.v23-studio-list>article>div>small{color:#777b83;font-size:9px}.v23-studio-list footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}.v23-studio-list footer button,.v23-studio-list footer a{min-height:30px;padding:0 9px;border:1px solid #353840;border-radius:8px;background:#0d0d10;color:#fff;text-decoration:none;font-size:9px;font-weight:900}.v23-studio-list footer .danger{border-color:#6b313a;color:#ff7b88}.v23-modal-backdrop{align-items:flex-end}.v23-modal{display:grid;gap:9px}.v23-modal label{display:grid;gap:5px;font-size:9px;color:#aaa}.v23-modal input,.v23-modal textarea,.v23-modal select{width:100%;min-height:40px;padding:8px;border:1px solid #30333b;border-radius:9px;background:#050506;color:#fff}.v23-save{min-height:42px;border:0;border-radius:21px;background:linear-gradient(100deg,#f7193d,#9100ec,#296aff);color:#fff;font-family:var(--omili-heading-font);font-weight:900}.v23-match-hero{margin-top:12px;padding:16px;border:1px solid #353842;border-radius:16px;background:radial-gradient(circle at 50% 15%,rgba(91,0,255,.12),transparent 55%),#08080a}.v23-match-hero>div:first-child{display:flex;justify-content:space-between}.v23-match-score{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin:22px 0;text-align:center}.v23-match-score article{display:grid;place-items:center;gap:6px}.v23-match-score img{width:76px;height:76px;object-fit:contain}.v23-match-score>b{font-family:var(--omili-heading-font);font-size:35px;font-style:italic}.v23-match-hero>footer{display:grid;grid-template-columns:1fr 1fr;gap:7px}.v23-match-hero>footer button{min-height:42px;border:1px solid #42304f;border-radius:21px;background:#100a14;color:#fff;font-family:var(--omili-heading-font);font-style:italic}.v23-hub-section{margin-top:18px}.v23-hub-section>header{display:flex;justify-content:space-between;align-items:center}.v23-hub-section h2{font-family:var(--omili-heading-font);font-style:italic}.v23-hub-cards,.v23-hub-shorts{display:flex;gap:8px;overflow:auto;padding-bottom:6px}.v23-hub-cards>a,.v23-hub-shorts>a{min-width:220px;padding:7px;border:1px solid #292c33;border-radius:11px;background:#08080a;color:#fff;text-decoration:none}.v23-hub-cards>a>div,.v23-hub-shorts>a>div{height:125px;border-radius:8px;background-position:center;background-size:cover;position:relative}.v23-hub-cards span{position:absolute;top:5px;left:5px;padding:3px 6px;border-radius:8px;background:#e7193a;font-size:9px}.v23-hub-cards strong,.v23-hub-shorts strong{display:block;margin-top:6px;font-family:var(--omili-heading-font);font-style:italic}.v23-hub-cards small,.v23-hub-shorts small{color:#777b83;font-size:9px}.v23-hub-battles{display:grid;gap:6px}.v23-hub-battles>a{display:grid;gap:3px;padding:10px;border:1px solid #292c33;border-radius:10px;background:#08080a;color:#fff;text-decoration:none}.v23-hub-battles span{color:#bf72ff;font-size:9px}.v23-admin-layout{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(0,1.2fr);gap:9px;margin-top:12px}.v23-admin-list,.v23-report-list{display:grid;gap:6px}.v23-admin-list>article,.v23-report-list>article{display:grid;grid-template-columns:1fr auto;gap:9px;padding:10px;border:1px solid #292c33;border-radius:10px;background:#08080a}.v23-admin-list>article>div{display:grid;gap:4px}.v23-admin-list footer,.v23-report-list footer{display:flex;gap:5px;flex-wrap:wrap}.v23-admin-list a,.v23-admin-list button,.v23-report-list button{min-height:30px;padding:0 9px;border:1px solid #353840;border-radius:8px;background:#0d0d10;color:#fff;text-decoration:none;font-size:9px}.v23-report-list>article{grid-template-columns:1fr}.v23-report-list code{color:#65caff;font-size:9px}.v23-report-list .danger{border-color:#69323a;color:#ff7b88}.v23-moderation-tabs{grid-template-columns:repeat(5,1fr)}.v23-show-replay{margin:12px 16px;padding:10px;border:1px solid #343741;border-radius:12px;background:#08080a}.v23-show-replay video{width:100%;max-height:65vh;border-radius:9px;background:#000}.v23-show-replay>div{display:flex;gap:7px;margin-top:8px}.v23-show-replay a{min-height:36px;display:grid;place-items:center;flex:1;border:1px solid #49305e;border-radius:18px;color:#fff;text-decoration:none;font-size:9px;font-weight:900}.v23-profile-actions{grid-template-columns:repeat(3,1fr)!important}
@media(max-width:650px){.v23-studio-summary{grid-template-columns:repeat(2,1fr)}.v23-studio-list>article{grid-template-columns:88px 1fr}.v23-studio-list footer{grid-column:1/-1;justify-content:flex-start}.v23-admin-layout{grid-template-columns:1fr}.v23-match-score img{width:54px;height:54px}.v23-match-score>b{font-size:27px}.v23-match-picker-list>button{grid-template-columns:1fr auto 1fr}.v23-match-picker-list .v23-match-state{grid-column:1/-1}.v23-selected-match{grid-template-columns:auto 1fr auto 1fr}.v23-selected-match>small{grid-column:1/-1}.v23-profile-actions{grid-template-columns:1fr!important}}
/* === END OMILI v2.3 === */


/* =========================================================
   OMILI v2.3.7 — HOME SCORE + SHORT TILE UX RESTORATION
   ========================================================= */

/* SCORE STRIP — restore the original compact Omili visual language. */
.v237-score-section {
  margin-top: 10px;
}

.v237-score-topline {
  min-height: 18px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 5px;
}

.v237-score-row {
  grid-auto-columns: 134px !important;
  gap: 8px !important;
  padding-bottom: 2px;
}

.v237-score-card {
  height: 103px !important;
  display: block;
  padding: 10px !important;
  border: 1px solid #313131 !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg,#090909,#050505) !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.v237-score-card:hover,
.v237-score-card:focus,
.v237-score-card:visited {
  color: #fff !important;
  text-decoration: none !important;
}

.v237-score-card .score-top {
  min-height: 16px;
  gap: 7px;
  color: #ddd !important;
  font-size: 11px !important;
  white-space: nowrap;
}

.v237-score-status {
  overflow: hidden;
  max-width: 78px;
  color: #aeb1b8 !important;
  font-size: 9px !important;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Red means genuinely live only. Scheduled dates/times are neutral. */
.v237-score-card.is-live .v237-score-status {
  color: #ff3d59 !important;
}

.v237-score-card.is-finished .v237-score-status {
  color: #9da0a7 !important;
}

.v237-score-card .score-middle {
  height: 47px !important;
}

.v237-score-card .score-middle strong {
  color: #fff !important;
  font-size: 20px !important;
  font-style: normal;
  text-transform: lowercase;
}

.v237-score-card .score-bottom {
  color: #cfcfcf !important;
  font-size: 11px !important;
}

.v237-score-card .team-crest,
.v237-score-card .team-crest-fallback {
  width: 28px !important;
  height: 28px !important;
}

.v237-score-card .team-crest {
  object-fit: contain;
}

/* SHORT CARDS — stronger diagonal silhouette and collision-free copy. */
.v237-real-shorts-row {
  grid-auto-columns: 156px !important;
  gap: 10px !important;
  padding-top: 7px !important;
  padding-bottom: 11px !important;
}

.v237-real-short-card {
  position: relative;
  height: 220px !important;
  overflow: visible !important;
  border-radius: 10px 20px 10px 20px !important;
  transform: skewY(-2.5deg) !important;
  transform-origin: center;
}

.v237-real-short-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px -3px -4px 3px;
  border-radius: inherit;
  background: linear-gradient(140deg,rgba(255,24,63,.22),rgba(151,0,239,.15),rgba(40,108,255,.22));
  filter: blur(6px);
}

.v237-real-short-media {
  border-radius: 9px 19px 9px 19px;
  transform: skewY(2.5deg) scale(1.035) !important;
  transform-origin: center;
}

.v237-real-short-gradient {
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.10) 0%,
      rgba(0,0,0,.02) 30%,
      rgba(0,0,0,.38) 58%,
      rgba(0,0,0,.96) 100%
    ) !important;
}

.v237-short-metric {
  top: 9px !important;
  left: 8px !important;
  max-width: 82px;
  overflow: hidden;
  padding: 4px 6px !important;
  font-size: 9px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v237-short-type-badge {
  top: 9px !important;
  right: 7px !important;
  left: auto !important;
  bottom: auto !important;
  max-width: 86px;
  overflow: hidden;
  padding: 4px 6px !important;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 9px !important;
  background: rgba(0,0,0,.72) !important;
  color: #fff !important;
  font-size: 9px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(5px);
}

/* v2.2 duration badge used to overlap the headline. Never show it separately
   on the homepage card — duration now lives inside SHORT badge. */
.v237-real-short-card .v22-short-duration {
  display: none !important;
}

.v237-short-match-badge,
.v237-short-topic-badge {
  position: absolute;
  z-index: 3;
  top: 39px;
  left: 8px;
  right: 8px;
  overflow: hidden;
  padding: 4px 7px;
  border: 1px solid #315b78;
  border-radius: 9px;
  background: rgba(6,20,29,.86);
  color: #e9f7ff;
  font-size: 9px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(5px);
}

.v237-short-topic-badge {
  right: auto;
  max-width: calc(100% - 16px);
  border-color: #4e2f70;
  background: rgba(20,8,28,.84);
  color: #d4a6ff;
}

.v237-real-short-copy {
  left: 9px !important;
  right: 9px !important;
  bottom: 13px !important;
  min-height: 53px;
  align-content: end;
  gap: 4px !important;
  padding-top: 4px;
}

.v237-real-short-copy strong {
  overflow: hidden;
  color: #fff;
  font-size: 12px !important;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v237-real-short-copy p {
  display: -webkit-box !important;
  min-height: 27px;
  max-height: 29px;
  overflow: hidden !important;
  margin: 0 !important;
  padding-right: 1px;
  color: #f0f0f3 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2 !important;
}

/* Do not let old global link styles recolor homepage score metadata. */
.v237-score-card *,
.v237-real-short-card * {
  text-decoration: none;
}

@media (max-width: 620px) {
  .v237-score-row {
    grid-auto-columns: 128px !important;
  }

  .v237-score-card {
    height: 100px !important;
    padding: 9px !important;
  }

  .v237-real-shorts-row {
    grid-auto-columns: 150px !important;
  }

  .v237-real-short-card {
    height: 212px !important;
  }
}
/* === END OMILI v2.3.7 HOME UX RESTORATION === */

/* =========================================================
   OMILI v2.4 — REAL LIVE ROOMS, FIXED OMILI STAGE & REPLAY
   ========================================================= */

.v24-livekit-setup-banner {
  position: fixed;
  z-index: 500;
  top: 0;
  left: 50%;
  width: min(100%,520px);
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid #4a315c;
  background: #13091a;
  color: #d7a4ff;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 900;
  text-align: center;
}

.v24-live-loading,
.v24-live-error {
  width: min(100vw,520px);
  min-height: 100dvh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  margin: 0 auto;
  padding: 24px;
  background: #000;
  color: #fff;
  text-align: center;
}

.v24-live-orbit {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border: 3px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(#050506,#050506) padding-box,
    conic-gradient(#ff173c,#9d00ef,#286cff,#ff173c) border-box;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 17px;
  font-style: italic;
  animation: v24-orbit 2.6s linear infinite;
}

.v24-live-loading strong,
.v24-live-error h1 {
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 24px;
  font-style: italic;
}

.v24-live-loading span,
.v24-live-error p {
  max-width: 350px;
  margin: 0;
  color: #858890;
  font-size: 11px;
  line-height: 1.45;
}

.v24-live-error > a,
.v24-live-error > button {
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 0 18px;
  border: 1px solid #3b3d45;
  border-radius: 20px;
  background: #0a0a0c;
  color: #fff;
  text-decoration: none;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 11px;
  font-style: italic;
}

@keyframes v24-orbit {
  to { transform: rotate(360deg); }
}

/* ---------------- REAL LIVE ROOM SHELL ---------------- */
.v24-live-room {
  width: min(100vw,520px);
  height: 100dvh;
  min-height: 640px;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
  color: #fff;
}

.v24-live-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%,rgba(73,24,101,.15),transparent 35%),
    #000;
}

.v24-live-header {
  position: relative;
  z-index: 40;
  min-height: 76px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  gap: 9px;
  align-items: center;
  padding: max(10px,env(safe-area-inset-top)) 14px 8px;
  background: linear-gradient(180deg,#050506,rgba(0,0,0,.88));
}

.v24-room-back {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #292b31;
  border-radius: 10px;
  background: #0c0c0f;
  color: #fff;
  text-decoration: none;
  font-size: 21px;
}

.v24-room-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  gap: 8px;
  align-items: center;
}

.v24-room-identity img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border: 1px solid #6a2d87;
  border-radius: 8px;
}

.v24-room-identity > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.v24-room-identity strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v24-room-identity span {
  overflow: hidden;
  color: #8d9098;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v24-end-show,
.v24-follow-host {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #5a1f2b;
  border-radius: 10px;
  background: #ff321f;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.v24-follow-host {
  border-color: #474a52;
  background: #0a0a0c;
}

.v24-follow-host.following {
  color: #8b8e95;
}

.v24-live-topic-row {
  position: relative;
  z-index: 38;
  min-height: 36px;
  display: grid;
  grid-template-columns: 1fr auto 36px;
  gap: 7px;
  align-items: center;
  padding: 0 14px 7px;
  background: #000;
}

.v24-live-topic-row > span {
  overflow: hidden;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 12px;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v24-live-topic-row > b {
  color: #ff465d;
  font-size: 9px;
}

.v24-live-topic-row > button {
  width: 34px;
  height: 30px;
  border: 1px solid #2d2f36;
  border-radius: 8px;
  background: #111216;
  color: #fff;
}

.v24-match-context {
  position: relative;
  z-index: 37;
  padding: 0 14px 7px;
  background: #000;
}

/* The existing Take Battle component keeps its modal, but its compact dock
   becomes part of normal room flow above the stage rather than an absolute
   overlay that covers video. */
.v24-take-battle-zone {
  position: relative;
  z-index: 36;
  min-height: 98px;
  padding: 0 14px 7px;
  background: #000;
}

.v24-take-battle-zone .v22-live-take-dock {
  position: relative !important;
  inset: auto !important;
  width: 100%;
  min-height: 88px;
  box-sizing: border-box;
}

/* ---------------- FIXED OMILI STAGE ---------------- */
.v24-live-stage {
  position: relative;
  z-index: 20;
  display: grid;
  overflow: hidden;
  background: #050506;
}

.v24-live-stage.host-only {
  grid-template-rows: minmax(250px,1fr) auto;
}

.v24-live-stage.has-cohost {
  grid-template-rows: minmax(210px,1fr) auto;
}

.v24-video-row {
  position: relative;
  display: grid;
  overflow: hidden;
  background: #050506;
}

.v24-live-stage.host-only .v24-video-row {
  grid-template-columns: 1fr;
}

.v24-live-stage.has-cohost .v24-video-row {
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: linear-gradient(90deg,#8625ff,#ff263e);
}

.v24-media-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%,rgba(123,34,190,.22),transparent 38%),
    #0a0a0d;
}

.v24-live-stage.has-cohost .v24-video-row > .v24-media-tile:first-child {
  clip-path: polygon(0 0,100% 0,88% 100%,0 100%);
  margin-right: -8%;
  border-bottom: 3px solid #6d28ff;
}

.v24-live-stage.has-cohost .v24-video-row > .v24-media-tile:last-child {
  clip-path: polygon(12% 0,100% 0,100% 100%,0 100%);
  margin-left: -8%;
  border-bottom: 3px solid #ff293f;
}

.v24-participant-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scaleX(-1);
}

.v24-participant-profile {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 22%,rgba(135,37,255,.30),transparent 38%),
    linear-gradient(150deg,#17131f,#08080a 62%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.v24-participant-profile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.08) 58%,rgba(0,0,0,.82));
}

.v24-participant-profile > span {
  position: relative;
  z-index: 2;
  font-size: 58px;
}

.v24-audio-orbit {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 54px;
  width: 50px;
  height: 50px;
  border: 2px solid rgba(177,91,255,.56);
  border-radius: 50%;
  transform: translateX(-50%);
  opacity: 0;
}

.v24-media-tile.is-speaking .v24-audio-orbit {
  opacity: 1;
  animation: v24-audio-pulse 1.2s ease-out infinite;
}

@keyframes v24-audio-pulse {
  0% { transform: translateX(-50%) scale(.72); opacity: .9; }
  100% { transform: translateX(-50%) scale(1.55); opacity: 0; }
}

.v24-role-ribbon {
  position: absolute;
  z-index: 8;
  top: 9px;
  left: 8px;
  min-height: 25px;
  display: grid;
  place-items: center;
  padding: 0 13px;
  clip-path: polygon(8% 0,100% 0,92% 100%,0 100%);
  background: linear-gradient(90deg,#7f26ff,#ff2b42);
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 900;
}

.v24-live-stage.has-cohost .v24-video-row > .v24-media-tile:last-child .v24-role-ribbon {
  right: 8px;
  left: auto;
  background: linear-gradient(90deg,#ff2b42,#6d27ff);
}

.v24-tile-footer {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  align-items: center;
  padding: 5px 9px;
  background: linear-gradient(90deg,rgba(47,47,54,.97),rgba(16,16,19,.94));
}

.v24-tile-footer > div {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 16px;
  gap: 2px 4px;
  align-items: center;
}

.v24-tile-footer strong {
  overflow: hidden;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 12px;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v24-tile-footer b {
  color: #ad45ff;
  font-size: 11px;
}

.v24-tile-footer small {
  grid-column: 1/-1;
  overflow: hidden;
  color: #8c8f96;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v24-tile-footer > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(0,0,0,.60);
  font-size: 14px;
}

.v24-tile-footer > span.muted {
  color: #ff5d6c;
}

.v24-media-tile.is-speaking {
  box-shadow: inset 0 0 0 2px #a33bff, inset 0 0 24px rgba(142,43,255,.25);
}

.v24-audio-guest-row {
  min-height: 126px;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 3px;
  padding-top: 3px;
  background: #050506;
}

.v24-audio-guest-row .v24-media-tile {
  min-height: 124px;
  clip-path: polygon(0 0,94% 0,100% 100%,5% 100%);
}

.v24-audio-guest-row .v24-media-tile:nth-child(2) {
  clip-path: polygon(6% 0,100% 0,95% 100%,0 100%);
}

.v24-audio-guest-row .v24-role-ribbon {
  font-size: 9px;
  min-height: 21px;
}

.v24-audio-guest-row .v24-participant-profile {
  background-size: cover;
}

.v24-audio-guest-row .v24-participant-profile > span {
  font-size: 34px;
}

.v24-host-tile-actions {
  position: absolute;
  z-index: 14;
  top: 40px;
  right: 7px;
  display: flex;
  gap: 4px;
}

.v24-host-tile-actions button {
  min-height: 25px;
  padding: 0 7px;
  border: 1px solid #41434b;
  border-radius: 7px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.v24-host-tile-actions button.danger {
  border-color: #662732;
  color: #ff7685;
}

.v24-host-muted-label {
  min-height: 25px;
  display: grid;
  place-items: center;
  padding: 0 7px;
  border: 1px solid #5d3f18;
  border-radius: 7px;
  background: rgba(25,16,5,.84);
  color: #ffd369;
  font-size: 9px;
  font-weight: 900;
}

/* ---------------- ROOM ACTIONS / COMMENTS ---------------- */
.v24-live-actions {
  position: absolute;
  z-index: 50;
  top: 225px;
  right: 8px;
  display: grid;
  gap: 7px;
}

.v24-live-actions button {
  width: 44px;
  min-height: 51px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  border: 0;
  border-radius: 11px;
  background: rgba(5,5,7,.80);
  color: #fff;
  backdrop-filter: blur(8px);
}

.v24-live-actions button.active {
  color: #ff724c;
}

.v24-live-actions span {
  font-size: 17px;
}

.v24-live-actions b {
  font-size: 9px;
}

.v24-live-comments {
  position: absolute;
  z-index: 45;
  right: 62px;
  bottom: 126px;
  left: 12px;
  display: grid;
  gap: 6px;
  pointer-events: none;
}

.v24-live-comments > div {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 7px;
  color: #f2f2f4;
  font-size: 10px;
  text-shadow: 0 1px 5px #000;
}

.v24-live-comments strong {
  color: #b868ff;
  font-size: 10px;
}

.v24-live-chat {
  position: absolute;
  z-index: 52;
  right: 72px;
  bottom: 66px;
  left: 12px;
  min-height: 43px;
  display: grid;
  grid-template-columns: 1fr auto 34px;
  gap: 7px;
  align-items: center;
  padding: 0 7px 0 12px;
  border: 1px solid #282a30;
  border-radius: 9px;
  background: #1c1c21;
}

.v24-live-chat input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-size: 11px;
}

.v24-live-chat > span {
  color: #d0d1d5;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 11px;
  font-style: italic;
}

.v24-live-chat button {
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: 50%;
  background: #101115;
  color: #fff;
}

.v24-local-controls {
  position: absolute;
  z-index: 55;
  right: 12px;
  bottom: 65px;
  display: grid;
  gap: 6px;
}

.v24-local-controls button {
  width: 48px;
  height: 43px;
  border: 1px solid #3d3f46;
  border-radius: 9px;
  background: #111216;
  color: #ff6071;
}

.v24-local-controls button.active {
  color: #fff;
}

.v24-live-toast,
.v24-live-message {
  padding: 9px 11px;
  border: 1px solid #65313a;
  border-radius: 9px;
  background: #19090c;
  color: #ff919d;
  font-size: 10px;
  line-height: 1.35;
}

.v24-live-toast {
  position: absolute;
  z-index: 90;
  right: 12px;
  bottom: 118px;
  left: 12px;
}

/* ---------------- GUEST REQUEST BAR / SHEET ---------------- */
.v24-guest-request-bar {
  position: absolute;
  z-index: 57;
  right: 12px;
  bottom: max(10px,env(safe-area-inset-bottom));
  left: 12px;
  min-height: 49px;
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(#070709,#070709) padding-box,
    linear-gradient(100deg,#2b70ff,#a200ed,#ff342a) border-box;
  color: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.40);
}

.v24-guest-request-bar span {
  display: grid;
  place-items: center;
  font-size: 16px;
}

.v24-guest-request-bar strong {
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 14px;
  font-style: italic;
  text-align: center;
}

.v24-stage-sheet-backdrop {
  position: fixed;
  z-index: 600;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(7px);
}

.v24-stage-sheet {
  width: min(100%,520px);
  max-height: 84dvh;
  overflow-y: auto;
  padding: 9px 14px max(20px,env(safe-area-inset-bottom));
  border: 1px solid #383a42;
  border-radius: 22px 22px 0 0;
  background:
    radial-gradient(circle at 85% 0%,rgba(109,0,255,.12),transparent 32%),
    #070709;
  color: #fff;
}

.v24-stage-sheet-handle {
  width: 45px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 3px;
  background: #575960;
}

.v24-stage-sheet > header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.v24-stage-sheet > header > div {
  display: grid;
  gap: 2px;
}

.v24-stage-sheet > header span {
  color: #b871ff;
  font-size: 9px;
  font-weight: 900;
}

.v24-stage-sheet > header h2 {
  margin: 0;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 23px;
  font-style: italic;
}

.v24-stage-sheet > header button {
  width: 35px;
  height: 35px;
  border: 1px solid #363840;
  border-radius: 50%;
  background: #111216;
  color: #fff;
  font-size: 19px;
}

.v24-request-list {
  display: grid;
  gap: 7px;
  margin-top: 13px;
}

.v24-request-list article {
  display: grid;
  grid-template-columns: 50px minmax(0,1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 9px;
  border: 1px solid #292b31;
  border-radius: 11px;
  background: #0a0a0d;
}

.v24-request-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid #63378b;
  border-radius: 10px;
  background-position: center;
  background-size: cover;
}

.v24-request-list article > div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.v24-request-list strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v24-request-list span,
.v24-request-list small {
  color: #858890;
  font-size: 9px;
}

.v24-request-actions {
  display: grid;
  gap: 4px;
}

.v24-request-actions button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #4f2d6d;
  border-radius: 7px;
  background: #170b20;
  color: #cf89ff;
  font-size: 9px;
  font-weight: 900;
}

.v24-request-actions button.decline {
  border-color: #5f2e37;
  background: #17090c;
  color: #ff7d89;
}

.v24-stage-self-panel,
.v24-stage-request-form {
  display: grid;
  place-items: center;
  gap: 10px;
  margin-top: 17px;
  padding: 18px;
  border: 1px solid #2b2d34;
  border-radius: 14px;
  background: #0a0a0c;
  text-align: center;
}

.v24-stage-self-panel > span {
  font-size: 34px;
}

.v24-stage-self-panel strong {
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 20px;
  font-style: italic;
}

.v24-stage-self-panel p,
.v24-stage-rule p {
  margin: 0;
  color: #858890;
  font-size: 10px;
  line-height: 1.4;
}

.v24-stage-self-panel button,
.v24-stage-request-form > button {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 21px;
  background: linear-gradient(100deg,#e72d4c,#9c00ed,#3168ff);
  color: #fff;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 900;
}

.v24-stage-rule {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 9px;
  align-items: center;
  text-align: left;
}

.v24-stage-rule > span {
  font-size: 28px;
}

.v24-stage-rule > div {
  display: grid;
  gap: 3px;
}

.v24-stage-request-form label {
  width: 100%;
  display: grid;
  gap: 6px;
  text-align: left;
}

.v24-stage-request-form label span {
  color: #aeb0b7;
  font-size: 9px;
  font-weight: 900;
}

.v24-stage-request-form input {
  min-height: 44px;
  padding: 0 11px;
  border: 1px solid #33353c;
  border-radius: 9px;
  background: #050506;
  color: #fff;
  font-size: 13px;
}

.v24-stage-request-form small {
  color: #777a82;
  font-size: 9px;
}

.v24-free-request {
  width: 100%;
  min-height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #285b3b;
  border-radius: 10px;
  background: #07130a;
  color: #5ee989;
  font-size: 10px;
  font-weight: 900;
}

.v24-empty-requests {
  min-height: 120px;
  display: grid;
  place-items: center;
  color: #777a82;
  font-size: 11px;
}

/* ---------------- PRE-LIVE LOBBY ---------------- */
.v24-lobby-page {
  width: min(100vw,520px);
  min-height: 100dvh;
  margin: 0 auto;
  padding-bottom: 24px;
  background: #000;
  color: #fff;
}

.v24-lobby-header {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: max(12px,env(safe-area-inset-top)) 14px 10px;
}

.v24-lobby-header > a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #2c2e35;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
}

.v24-lobby-header > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.v24-lobby-header span {
  color: #9d61ff;
  font-size: 9px;
  font-weight: 900;
}

.v24-lobby-header h1 {
  overflow: hidden;
  margin: 0;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 20px;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v24-lobby-header > b {
  padding: 5px 9px;
  border: 1px solid #4c2e68;
  border-radius: 12px;
  color: #c681ff;
  font-size: 9px;
}

.v24-lobby-preview {
  min-height: 400px;
  margin: 0 12px;
  overflow: hidden;
  border: 1px solid #30323a;
  border-radius: 15px;
  background: #08080a;
}

.v24-lobby-preview .v24-live-stage {
  min-height: 400px;
}

.v24-lobby-settings {
  display: grid;
  gap: 10px;
  margin: 12px;
}

.v24-lobby-status-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
}

.v24-lobby-status-grid article {
  min-height: 68px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid #2a2c33;
  border-radius: 10px;
  background: #09090b;
  text-align: center;
}

.v24-lobby-status-grid span {
  color: #777a82;
  font-size: 9px;
  font-weight: 900;
}

.v24-lobby-status-grid strong {
  font-size: 11px;
}

.v24-device-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.v24-device-controls label {
  display: grid;
  gap: 5px;
}

.v24-device-controls span {
  color: #a7aab1;
  font-size: 9px;
  font-weight: 900;
}

.v24-device-controls select {
  min-height: 40px;
  width: 100%;
  border: 1px solid #30323a;
  border-radius: 9px;
  padding: 0 9px;
  background: #08080a;
  color: #fff;
  font-size: 10px;
}

.v24-lobby-toggle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.v24-lobby-toggle-row button {
  min-height: 42px;
  border: 1px solid #51313b;
  border-radius: 10px;
  background: #16090c;
  color: #ff7180;
  font-size: 10px;
  font-weight: 900;
}

.v24-lobby-toggle-row button.active {
  border-color: #28553a;
  background: #07130a;
  color: #62e98b;
}

.v24-launch-live {
  min-height: 52px;
  border: 0;
  border-radius: 26px;
  background: linear-gradient(100deg,#ff283b,#bd00ed,#2d6cff);
  color: #fff;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 900;
}

.v24-cohost-waiting {
  min-height: 62px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid #2b4e64;
  border-radius: 12px;
  background: #071119;
  text-align: center;
}

.v24-cohost-waiting strong {
  color: #62c9ff;
  font-size: 11px;
}

.v24-cohost-waiting span {
  color: #7e8f99;
  font-size: 9px;
}

/* ---------------- LIVE OPERATIONS ADMIN ---------------- */
.v24-live-ops-page {
  width: min(100%,1050px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 14px 14px 60px;
  background: #000;
  color: #fff;
}

.v24-live-ops-page > header {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
}

.v24-live-ops-page > header > a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #30323a;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
}

.v24-live-ops-page > header span {
  color: #a667ff;
  font-size: 9px;
  font-weight: 900;
}

.v24-live-ops-page > header h1 {
  margin: 1px 0 0;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 26px;
  font-style: italic;
}

.v24-live-ops-page > header button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #48305d;
  border-radius: 18px;
  background: #100b14;
  color: #c982ff;
  font-size: 9px;
  font-weight: 900;
}

.v24-live-ops-summary {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 7px;
  margin: 13px 0;
}

.v24-live-ops-summary article {
  min-height: 88px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid #2b2d34;
  border-radius: 11px;
  background: #08080a;
}

.v24-live-ops-summary span {
  color: #777a82;
  font-size: 9px;
  font-weight: 900;
}

.v24-live-ops-summary strong {
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 25px;
  font-style: italic;
}

.v24-live-ops-list {
  display: grid;
  gap: 7px;
}

.v24-live-ops-list > article {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 11px;
  border: 1px solid #2b2d34;
  border-radius: 11px;
  background: #08080a;
}

.v24-live-ops-list > article > div:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.v24-live-ops-list > article span {
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid #5c2532;
  border-radius: 9px;
  color: #ff6f7e;
  font-size: 9px;
  font-weight: 900;
}

.v24-live-ops-list > article strong {
  overflow: hidden;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 15px;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v24-live-ops-list > article small {
  color: #777a82;
  font-size: 9px;
}

.v24-live-ops-list dl {
  display: flex;
  gap: 10px;
  margin: 0;
}

.v24-live-ops-list dl > div {
  display: grid;
  gap: 2px;
  text-align: center;
}

.v24-live-ops-list dt {
  color: #777a82;
  font-size: 9px;
  font-weight: 900;
}

.v24-live-ops-list dd {
  margin: 0;
  font-size: 11px;
  font-weight: 900;
}

.v24-live-ops-actions {
  display: flex;
  gap: 5px;
}

.v24-live-ops-actions > * {
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 0 9px;
  border: 1px solid #34363e;
  border-radius: 8px;
  background: #0c0c0f;
  color: #fff;
  text-decoration: none;
  font-size: 9px;
  font-weight: 900;
}

.v24-live-ops-actions .danger {
  border-color: #65313a;
  color: #ff7e8b;
}

@media (max-width:620px) {
  .v24-live-header {
    min-height: 69px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .v24-live-stage.host-only {
    grid-template-rows: minmax(230px,1fr) auto;
  }

  .v24-live-stage.has-cohost {
    grid-template-rows: minmax(190px,1fr) auto;
  }

  .v24-audio-guest-row {
    min-height: 112px;
  }

  .v24-live-actions {
    top: 212px;
  }

  .v24-lobby-preview,
  .v24-lobby-preview .v24-live-stage {
    min-height: 350px;
  }

  .v24-device-controls {
    grid-template-columns: 1fr;
  }

  .v24-live-ops-summary {
    grid-template-columns: repeat(2,1fr);
  }

  .v24-live-ops-list > article {
    grid-template-columns: 1fr;
  }

  .v24-live-ops-list dl,
  .v24-live-ops-actions {
    justify-content: flex-start;
  }
}

@media (max-width:390px) {
  .v24-room-identity img {
    display: none;
  }

  .v24-room-identity {
    grid-template-columns: 1fr;
  }

  .v24-live-topic-row {
    padding-right: 10px;
    padding-left: 10px;
  }

  .v24-match-context,
  .v24-take-battle-zone {
    padding-right: 10px;
    padding-left: 10px;
  }

  .v24-request-list article {
    grid-template-columns: 44px 1fr;
  }

  .v24-request-actions {
    grid-column: 1/-1;
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion:reduce) {
  .v24-live-orbit,
  .v24-media-tile.is-speaking .v24-audio-orbit {
    animation: none;
  }
}
/* === END OMILI v2.4 REAL LIVE ROOMS === */

/* v2.4 lobby readiness refinements */
.v24-lobby-status-grid {
  grid-template-columns: repeat(4,minmax(0,1fr));
}

.v24-lobby-audio-check > div {
  width: 72%;
  height: 5px;
  overflow: hidden;
  border-radius: 4px;
  background: #24262c;
}

.v24-lobby-audio-check > div > i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg,#2ce477,#ffd34d,#ff405d);
  transition: width .12s linear;
}

.v24-lobby-toggle-row {
  grid-template-columns: repeat(3,minmax(0,1fr));
}

@media (max-width:620px) {
  .v24-lobby-status-grid,
  .v24-lobby-toggle-row {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

/* ---------------- OMILI COMPOSITE RECORDING VIEW ---------------- */
.v24-recording-page {
  position: relative;
  width: 720px;
  height: 1280px;
  overflow: hidden;
  margin: 0;
  background:
    radial-gradient(circle at 50% 0%,rgba(104,0,255,.15),transparent 32%),
    #000;
  color: #fff;
}

.v24-recording-page > header {
  height: 112px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 25px 32px 16px;
  background: linear-gradient(180deg,#08080b,rgba(0,0,0,.82));
}

.v24-recording-page > header span {
  color: #ff4d61;
  font-size: 15px;
  font-weight: 900;
}

.v24-recording-page > header h1 {
  overflow: hidden;
  margin: 0;
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 34px;
  line-height: 1;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v24-recording-page .v24-live-stage {
  height: 1060px;
  min-height: 1060px;
  max-height: 1060px;
}

.v24-recording-page .v24-role-ribbon {
  font-size: 14px;
}

.v24-recording-page .v24-tile-footer strong {
  font-size: 20px;
}

.v24-recording-page .v24-tile-footer small {
  font-size: 13px;
}

.v24-recording-page .v24-host-tile-actions {
  display: none;
}

.v24-recording-page > footer {
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  border-top: 1px solid #24262c;
  background: #050506;
}

.v24-recording-page > footer strong {
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 30px;
  font-style: italic;
}

.v24-recording-page > footer span {
  color: #84878f;
  font-size: 13px;
  font-weight: 900;
}

.v24-recording-connecting {
  position: absolute;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
  color: #a66cff;
  font-size: 18px;
  font-weight: 900;
}

.v24-recording-page.error {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
}

/* =========================================================
   OMILI v2.5 — LEADERBOARDS, REACTIONS & SHORTS POLISH
   ========================================================= */

.v25-show-card .v21-show-media > img {
  object-position: center 24%;
}

.v25-upcoming-cta {
  min-height: 54px !important;
  display: grid !important;
  justify-items: start;
  align-content: center;
  gap: 2px;
}

.v25-upcoming-cta small {
  color: #f5c5ff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .3px;
}

.v25-real-shorts-row {
  grid-auto-columns: 164px !important;
  gap: 12px !important;
}

.v25-real-short-card {
  height: 232px !important;
  transform: none !important;
  border-radius: 16px !important;
}

.v25-real-short-card::after {
  inset: 6px -3px -6px 3px;
  border-radius: 18px;
}

.v25-real-short-media {
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
  transform: none !important;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 76% 100%, 0 100%);
  background-position: center 18%;
  background-size: cover;
}

.v25-real-short-gradient {
  background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.03) 30%, rgba(0,0,0,.34) 58%, rgba(0,0,0,.96) 100%) !important;
}

.v25-short-top-row {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.v25-short-type-badge,
.v25-short-topic-badge,
.v25-short-rating,
.v25-short-duration {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(5,9,14,.74);
  backdrop-filter: blur(8px);
}

.v25-short-type-badge {
  padding: 5px 8px;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.v25-short-topic-badge {
  max-width: 86px;
  overflow: hidden;
  padding: 5px 8px;
  color: #ecc8ff;
  font-size: 9px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v25-short-match-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid rgba(81,136,171,.5);
  border-radius: 999px;
  background: rgba(5,17,28,.8);
  backdrop-filter: blur(8px);
}

.v25-short-match-badges span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}

.v25-short-match-badges img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.v25-short-match-badges b,
.v25-short-match-badges small {
  color: #f2f9ff;
  font-size: 8px;
}

.v25-real-short-copy {
  left: 10px !important;
  right: 10px !important;
  bottom: 34px !important;
  min-height: 58px;
}

.v25-real-short-copy strong {
  font-size: 12px !important;
}

.v25-real-short-copy p {
  min-height: 30px;
  max-height: 30px;
  font-size: 10px !important;
  line-height: 1.4 !important;
}

.v25-short-footer-meta {
  position: absolute;
  z-index: 4;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.v25-short-rating,
.v25-short-duration {
  padding: 5px 8px;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.v25-short-rating {
  max-width: 98px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v25-leaderboard-definition {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #26262d;
  border-radius: 14px;
  background: radial-gradient(circle at 100% 0%, rgba(112,0,255,.12), transparent 32%), #09090b;
  color: #bbbbc4;
  font-size: 11px;
  line-height: 1.45;
}

.v25-leaderboard-window-tabs,
.v25-leaderboard-metric-tabs {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.v25-leaderboard-window-tabs {
  grid-template-columns: repeat(4, minmax(0,1fr));
}

.v25-leaderboard-metric-tabs {
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.v25-leaderboard-window-tabs button,
.v25-leaderboard-metric-tabs button {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid #292a31;
  border-radius: 12px;
  background: #0a0a0d;
  color: #9fa2ae;
  font-size: 10px;
  font-weight: 900;
}

.v25-leaderboard-window-tabs button.active,
.v25-leaderboard-metric-tabs button.active {
  border-color: #8c32ff;
  background: linear-gradient(180deg, rgba(151,0,239,.24), rgba(35,8,44,.95));
  color: #fff;
}

.v25-leaderboard-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 18px;
  align-items: end;
}

.v25-podium-card {
  min-height: 148px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  padding: 14px 10px 12px;
  border: 1px solid #2f2f36;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 0%, rgba(119,0,255,.16), transparent 34%), #0a0a0d;
  text-align: center;
}

.v25-podium-card.pos-1 {
  min-height: 172px;
  border-color: #ffb82d;
}

.v25-podium-card.pos-2,
.v25-podium-card.pos-3 {
  margin-top: 16px;
}

.v25-podium-rank {
  color: #ffcb37;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 18px;
  font-style: italic;
}

.v25-podium-avatar {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #16161c;
  border: 2px solid rgba(255,255,255,.12);
}

.v25-podium-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v25-podium-card strong {
  font-size: 11px;
}

.v25-podium-card small {
  color: #888b97;
  font-size: 9px;
}

.v25-podium-card b {
  color: #ffd247;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 12px;
  font-style: italic;
}

.v25-leaderboard-list {
  margin-top: 14px;
}

.v25-current-position {
  position: sticky;
  bottom: 10px;
  z-index: 6;
  box-shadow: 0 12px 24px rgba(0,0,0,.32);
}

.v25-live-reaction-layer {
  pointer-events: none;
  position: absolute;
  z-index: 24;
  inset: 86px 0 140px;
  overflow: hidden;
}

.v25-live-burst {
  position: absolute;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,.44);
  backdrop-filter: blur(6px);
  font-size: 18px;
  animation: v25Burst 1.5s ease-out forwards;
}

.v25-live-burst.kind-flame { box-shadow: 0 0 18px rgba(255,128,0,.32); }
.v25-live-burst.kind-red_card { box-shadow: 0 0 18px rgba(255,44,69,.26); }
.v25-live-burst.kind-clown { box-shadow: 0 0 18px rgba(193,104,255,.22); }
.v25-live-burst.kind-hundred { box-shadow: 0 0 18px rgba(255,90,90,.28); }

@keyframes v25Burst {
  0% { transform: translate(-50%, 20px) scale(.7); opacity: 0; }
  14% { opacity: 1; }
  100% { transform: translate(-50%, -84px) scale(1.18); opacity: 0; }
}

.v25-live-reaction-tray {
  position: absolute;
  z-index: 44;
  left: 12px;
  right: 12px;
  bottom: 92px;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(73,74,83,.6);
  border-radius: 16px;
  background: rgba(8,10,14,.76);
  backdrop-filter: blur(10px);
}

.v25-live-reaction-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.v25-live-reaction-summary strong {
  font-size: 10px;
  letter-spacing: .5px;
}

.v25-live-reaction-summary span {
  color: #b1b6c3;
  font-size: 9px;
}

.v25-live-reaction-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
}

.v25-live-reaction-buttons button {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  color: #fff;
  font-size: 18px;
}

.v25-live-reaction-buttons button small {
  display: block;
  margin-top: 2px;
  color: #b6bac7;
  font-size: 9px;
  font-weight: 900;
}

@media (max-width: 620px) {
  .v25-real-shorts-row {
    grid-auto-columns: 156px !important;
  }

  .v25-real-short-card {
    height: 224px !important;
  }

  .v25-leaderboard-window-tabs {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .v25-leaderboard-podium {
    gap: 8px;
  }

  .v25-podium-card {
    min-height: 140px;
    padding: 12px 8px;
  }

  .v25-podium-card.pos-1 {
    min-height: 160px;
  }
}

/* =========================================================
   OMILI v2.5.2 — REAL LEADERBOARDS, SHOW ART & DISCOVERY
   ========================================================= */

.v252-show-art-preview {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(220px,.85fr);
  gap: 12px;
  margin: 12px 0 16px;
  padding: 12px;
  border: 1px solid #2d2f37;
  border-radius: 14px;
  background: #08080b;
}

.v252-show-art-image,
.v252-studio-cover-preview {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid #353740;
  border-radius: 14px;
  background-color: #0b0b0e;
  background-repeat: no-repeat;
  color: #fff;
}

.v252-show-art-image::after,
.v252-studio-cover-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.82));
}

.v252-show-art-image > span,
.v252-show-art-image > strong,
.v252-studio-cover-preview > strong {
  position: absolute;
  z-index: 2;
  left: 14px;
  right: 14px;
}

.v252-show-art-image > span {
  bottom: 52px;
  color: #a5a8b4;
  font-size: 9px;
  font-weight: 900;
}

.v252-show-art-image > strong,
.v252-studio-cover-preview > strong {
  bottom: 16px;
  overflow: hidden;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v252-show-art-controls {
  display: grid;
  align-content: start;
  gap: 12px;
}

.v252-show-art-controls > label:not(.admin-field),
.v23-modal label:has(input[type="range"]) {
  display: grid;
  gap: 7px;
  color: #a7a9b3;
  font-size: 10px;
  font-weight: 800;
}

.v252-show-art-controls input[type="range"],
.v23-modal input[type="range"] {
  width: 100%;
  accent-color: #9e35ff;
}

.v252-studio-cover-preview {
  min-height: 180px;
  margin: 8px 0 12px;
}

.v252-studio-summary {
  grid-template-columns: repeat(6,minmax(0,1fr)) !important;
}

.v252-reaction-breakdown {
  display: grid;
  gap: 9px;
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid #332c3d;
  border-radius: 14px;
  background: radial-gradient(circle at 100% 0%,rgba(151,0,239,.13),transparent 42%),#09090b;
}

.v252-reaction-breakdown > strong {
  color: #c7c9d2;
  font-size: 10px;
  letter-spacing: .4px;
}

.v252-reaction-breakdown > div {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
}

.v252-reaction-breakdown span {
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #2e3038;
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.v252-rising-section {
  margin-top: 4px;
}

.v252-rising-creators-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 146px;
  gap: 10px;
  overflow-x: auto;
  padding: 5px 1px 11px;
  scrollbar-width: none;
}

.v252-rising-creators-row::-webkit-scrollbar {
  display: none;
}

.v252-rising-creator-card {
  position: relative;
  min-height: 185px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  padding: 14px 10px 11px;
  border: 1px solid #30263d;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 0%,rgba(142,30,255,.18),transparent 38%),#09090c;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

.v252-rising-rank {
  position: absolute;
  top: 9px;
  left: 9px;
  color: #ffcc3d;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 11px;
  font-style: italic;
}

.v252-rising-avatar {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-top: 6px;
  border: 2px solid #8533ff;
  border-radius: 50%;
  background: #17141d;
}

.v252-rising-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v252-rising-creator-card > strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v252-rising-creator-card > small {
  max-width: 100%;
  overflow: hidden;
  color: #858895;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v252-rising-creator-card > div:not(.v252-rising-avatar) {
  display: flex;
  gap: 5px;
}

.v252-rising-creator-card > div:not(.v252-rising-avatar) span {
  padding: 4px 6px;
  border: 1px solid #2d3040;
  border-radius: 8px;
  background: #0b0b10;
  color: #d7d9e0;
  font-size: 8px;
  font-weight: 900;
}

.v252-rising-creator-card p {
  margin: 2px 0 0;
  color: #ae8fc8;
  font-size: 9px;
  line-height: 1.25;
}

.v252-leaderboard-metric-tabs {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}

.v252-current-position {
  position: sticky;
  z-index: 8;
  bottom: 10px;
  margin-top: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
}

@media (max-width: 760px) {
  .v252-show-art-preview {
    grid-template-columns: 1fr;
  }

  .v252-studio-summary {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
}

@media (max-width: 460px) {
  .v252-show-art-image,
  .v252-studio-cover-preview {
    min-height: 165px;
  }

  .v252-studio-summary {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  .v252-rising-creators-row {
    grid-auto-columns: 140px;
  }
}
/* === END OMILI v2.5.2 === */

/* =========================================================
   OMILI v2.5.2 — DISCOVERY, EXACT METRICS & CREATOR ANALYTICS
   ========================================================= */

.v252-discovery-section {
  margin-top: 10px;
  padding-bottom: 18px;
}

.v252-trending-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 188px;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 1px 12px;
  scrollbar-width: none;
}

.v252-trending-row::-webkit-scrollbar {
  display: none;
}

.v252-trending-row > a {
  display: grid;
  gap: 6px;
  color: #fff;
  text-decoration: none;
}

.v252-trending-image {
  position: relative;
  min-height: 116px;
  overflow: hidden;
  border: 1px solid #2f3038;
  border-radius: 14px;
  background: #0b0b0e center/cover no-repeat;
}

.v252-trending-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.78));
}

.v252-trending-image > span,
.v252-trending-image > b {
  position: absolute;
  z-index: 2;
  left: 8px;
  right: 8px;
}

.v252-trending-image > span {
  top: 8px;
  width: fit-content;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.68);
  font-size: 8px;
  font-weight: 900;
}

.v252-trending-image > b {
  bottom: 8px;
  color: #ffcf3f;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 11px;
  font-style: italic;
}

.v252-trending-row > a > strong {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 13px;
  line-height: 1.05;
  font-style: italic;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.v252-trending-row > a > small {
  overflow: hidden;
  color: #858995;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v252-discovery-rankings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.v252-ranking-panel {
  overflow: hidden;
  border: 1px solid #2d2f36;
  border-radius: 14px;
  background: radial-gradient(circle at 100% 0%,rgba(113,0,255,.12),transparent 38%),#09090b;
}

.v252-ranking-panel > header {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #24262d;
}

.v252-ranking-panel > header > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.v252-ranking-panel > header strong,
.v252-ranking-panel > header a {
  font-size: 9px;
  font-weight: 900;
}

.v252-ranking-panel > header a {
  color: #5acaff;
  text-decoration: none;
}

.v252-ranking-panel > div > a {
  min-height: 54px;
  display: grid;
  grid-template-columns: 22px 36px minmax(0,1fr) auto;
  gap: 7px;
  align-items: center;
  padding: 7px 9px;
  border-bottom: 1px solid #1d1f25;
  color: #fff;
  text-decoration: none;
}

.v252-ranking-panel > div > a:last-child {
  border-bottom: 0;
}

.v252-ranking-panel > div > a > b {
  color: #ffcf3f;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 13px;
  font-style: italic;
  text-align: center;
}

.v252-ranking-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #52306d;
  border-radius: 50%;
  background: #141219;
}

.v252-ranking-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v252-ranking-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.v252-ranking-copy strong,
.v252-ranking-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v252-ranking-copy strong {
  font-size: 9px;
}

.v252-ranking-copy strong i {
  color: #9d36ff;
  font-style: normal;
}

.v252-ranking-copy small {
  color: #7e818d;
  font-size: 8px;
}

.v252-ranking-panel em {
  color: #a87cff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 9px;
  font-style: italic;
  white-space: nowrap;
}

.v252-creator-analytics {
  display: grid;
  gap: 11px;
  margin: 12px 0 16px;
  padding: 13px;
  border: 1px solid #302c39;
  border-radius: 16px;
  background: radial-gradient(circle at 100% 0%,rgba(151,0,239,.13),transparent 38%),#09090b;
}

.v252-creator-analytics > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.v252-creator-analytics > header span {
  color: #9a7bb4;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .5px;
}

.v252-creator-analytics > header h2 {
  margin: 2px 0 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 20px;
  font-style: italic;
}

.v252-creator-analytics > header nav {
  display: flex;
  gap: 5px;
}

.v252-creator-analytics > header button {
  min-width: 38px;
  min-height: 28px;
  border: 1px solid #30323a;
  border-radius: 999px;
  background: #0b0b0e;
  color: #8d909a;
  font-size: 8px;
  font-weight: 900;
}

.v252-creator-analytics > header button.active {
  border-color: #8f32ff;
  color: #fff;
}

.v252-analytics-state {
  color: #8d909a;
  font-size: 9px;
}

.v252-analytics-state.error {
  color: #ff7585;
}

.v252-analytics-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 7px;
}

.v252-analytics-grid article {
  min-height: 72px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 8px;
  border: 1px solid #292b32;
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  text-align: center;
}

.v252-analytics-grid span {
  color: #7f828c;
  font-size: 8px;
  font-weight: 900;
}

.v252-analytics-grid strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 19px;
  font-style: italic;
}

.v252-creator-analytics .v252-reaction-breakdown {
  margin: 0;
}

.v252-reaction-breakdown small {
  color: #777b87;
  font-size: 8px;
  line-height: 1.4;
}

.v252-creator-analytics > footer {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.v252-creator-analytics > footer span {
  padding: 5px 8px;
  border: 1px solid #292c34;
  border-radius: 999px;
  color: #a8abb4;
  font-size: 8px;
  font-weight: 800;
}

.v252-focal-editor {
  display: grid;
  gap: 10px;
  margin: 8px 0 12px;
  padding: 10px;
  border: 1px solid #2d3038;
  border-radius: 13px;
  background: #09090c;
}

.v252-focal-preview {
  position: relative;
  min-height: 170px;
  overflow: hidden;
  border: 1px solid #343640;
  border-radius: 12px;
  background: #111 center/cover no-repeat;
}

.v252-focal-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.8));
}

.v252-focal-preview strong {
  position: absolute;
  z-index: 2;
  left: 12px;
  right: 12px;
  bottom: 12px;
  overflow: hidden;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 19px;
  line-height: 1;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v252-focal-editor label {
  display: grid;
  gap: 6px;
  color: #a6a8b1;
  font-size: 9px;
  font-weight: 800;
}

.v252-focal-editor input[type="range"] {
  width: 100%;
  accent-color: #9635ff;
}

.v252-leaderboard-error {
  border: 1px solid #67313a;
  background: #170a0c;
  color: #ff8793;
}

.v252-current-position {
  width: 100%;
}

@media (max-width: 680px) {
  .v252-discovery-rankings {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 460px) {
  .v252-trending-row {
    grid-auto-columns: 176px;
  }

  .v252-ranking-panel > div > a {
    grid-template-columns: 20px 34px minmax(0,1fr) auto;
  }
}
/* === END OMILI v2.5.2 DISCOVERY === */

/* OMILI v2.5.2 — consolidated Show Image Studio */
.v252-show-image-editor {
  display: grid;
  gap: 12px;
  margin: 12px 0 16px;
  padding: 12px;
  border: 1px solid #2d2f37;
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 0%,rgba(151,0,239,.10),transparent 36%),
    #08080b;
}

.v252-show-image-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.v252-show-image-quick-actions button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #383b45;
  border-radius: 18px;
  background: #0b0b0f;
  color: #d5d7df;
  font-size: 9px;
  font-weight: 900;
}

.v252-show-image-quick-actions button:disabled {
  opacity: .45;
}

.v252-show-focal-controls {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}

.v252-show-focal-controls label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  align-items: center;
  color: #a7aab4;
  font-size: 9px;
  font-weight: 800;
}

.v252-show-focal-controls label input,
.v252-show-focal-controls label select {
  grid-column: 1 / -1;
  width: 100%;
}

.v252-show-focal-controls input[type="range"] {
  accent-color: #9836ff;
}

.v252-show-focal-controls select {
  min-height: 36px;
  border: 1px solid #32343d;
  border-radius: 9px;
  padding: 0 9px;
  background: #07070a;
  color: #fff;
  font-size: 9px;
}

.v252-show-image-previews {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(170px,.75fr);
  gap: 10px;
}

.v252-show-image-previews article {
  display: grid;
  gap: 7px;
}

.v252-show-image-previews article > span {
  color: #8d909b;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .4px;
}

.v252-show-image-previews article > div {
  min-height: 180px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #343741;
  border-radius: 13px;
  background: #0d0d11;
}

.v252-show-image-previews article > div.portrait {
  min-height: 240px;
}

.v252-show-image-previews img {
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.v252-show-image-previews strong {
  color: #6f727c;
  font-size: 10px;
}

.v252-show-image-note {
  margin: 0;
  color: #7f828d;
  font-size: 9px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .v252-show-focal-controls,
  .v252-show-image-previews {
    grid-template-columns: 1fr;
  }

  .v252-show-image-previews article > div.portrait {
    min-height: 210px;
  }
}

/* =========================================================
   OMILI v2.5.3 — PERSONALISED COMPETITION & SPEAKER REACTIONS
   ========================================================= */

.v253-leaderboard-scope-tabs,
.v253-discovery-scope-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.v253-leaderboard-scope-tabs {
  margin-top: 14px;
}

.v253-discovery-scope-tabs {
  margin: 10px 0 12px;
}

.v253-leaderboard-scope-tabs button,
.v253-discovery-scope-tabs button {
  min-width: 0;
  min-height: 38px;
  overflow: hidden;
  padding: 0 8px;
  border: 1px solid #2b2d35;
  border-radius: 12px;
  background: #09090c;
  color: #9296a2;
  font-size: 9px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v253-leaderboard-scope-tabs button.active,
.v253-discovery-scope-tabs button.active {
  border-color: #7f33ff;
  background: linear-gradient(120deg, rgba(235, 0, 70, .20), rgba(127, 0, 255, .24), rgba(37, 105, 255, .16));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.v253-leaderboard-page .v25-leaderboard-definition {
  display: grid;
  gap: 4px;
}

.v253-leaderboard-page .v25-leaderboard-definition strong {
  color: #a96dff;
  font-size: 9px;
  letter-spacing: .5px;
}

.v253-leaderboard-page .v25-leaderboard-definition span {
  color: #b9bbc4;
}

.v253-discovery-empty {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 112px;
  padding: 16px;
  border: 1px dashed #353740;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 0%, rgba(99, 0, 255, .10), transparent 54%), #08080a;
  text-align: center;
}

.v253-discovery-empty strong {
  color: #fff;
  font-size: 10px;
}

.v253-discovery-empty small {
  max-width: 360px;
  color: #80838d;
  font-size: 9px;
  line-height: 1.45;
}

.v253-live-reaction-tray {
  gap: 6px !important;
  padding: 8px !important;
}

.v253-reaction-targets {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 1px 1px 4px;
  scrollbar-width: none;
}

.v253-reaction-targets::-webkit-scrollbar {
  display: none;
}

.v253-reaction-targets button {
  flex: 0 0 54px;
  min-height: 48px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid #343640;
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  color: #fff;
}

.v253-reaction-targets button.active {
  border-color: #9b38ff;
  background: linear-gradient(145deg, rgba(232,0,68,.18), rgba(122,0,255,.26), rgba(30,93,255,.16));
  box-shadow: 0 0 16px rgba(124, 22, 255, .16);
}

.v253-reaction-targets button:disabled {
  opacity: .45;
}

.v253-reaction-targets button > img,
.v253-reaction-targets button > span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  object-fit: cover;
  border-radius: 50%;
  background: #17171c;
  font-size: 12px;
}

.v253-reaction-targets button small {
  max-width: 48px;
  overflow: hidden;
  color: #b9bbc6;
  font-size: 7px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v253-reaction-target-label {
  color: #8e929d;
  font-size: 8px;
  text-align: center;
}

.v253-reaction-target-label strong {
  color: #fff;
}

.v25-live-burst {
  width: auto !important;
  min-width: 42px;
  height: auto !important;
  min-height: 42px;
  grid-template-columns: auto;
  gap: 2px;
  padding: 6px 9px;
  border-radius: 16px !important;
}

.v25-live-burst b {
  font-size: 19px;
  line-height: 1;
}

.v25-live-burst small {
  max-width: 92px;
  overflow: hidden;
  color: #fff;
  font-size: 7px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.v253-creator-analytics {
  display: grid;
  gap: 12px;
}

.v253-reaction-moments {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid #2c2e36;
  border-radius: 14px;
  background: radial-gradient(circle at 100% 0%, rgba(115,0,255,.11), transparent 42%), #09090b;
}

.v253-reaction-moments > header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 10px;
}

.v253-reaction-moments > header div {
  display: grid;
  gap: 3px;
}

.v253-reaction-moments > header span,
.v253-reaction-moments > header small {
  color: #7f8290;
  font-size: 8px;
}

.v253-reaction-moments > header strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 15px;
  font-style: italic;
}

.v253-reaction-moments > div {
  display: grid;
  gap: 6px;
}

.v253-reaction-moments a {
  min-height: 54px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid #262830;
  border-radius: 10px;
  background: #070709;
  color: #fff;
  text-decoration: none;
}

.v253-reaction-moments a > b {
  color: #cb8bff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 13px;
  font-style: italic;
  text-align: center;
}

.v253-reaction-moments a > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.v253-reaction-moments a > span strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v253-reaction-moments a > span small {
  color: #7d808a;
  font-size: 8px;
}

.v253-reaction-moments a > em {
  min-width: 46px;
  color: #ffd34c;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.v253-reaction-moments-empty {
  padding: 14px 6px;
  color: #747781;
  font-size: 9px;
  text-align: center;
}

@media (max-width: 620px) {
  .v253-leaderboard-scope-tabs,
  .v253-discovery-scope-tabs {
    gap: 5px;
  }

  .v253-leaderboard-scope-tabs button,
  .v253-discovery-scope-tabs button {
    min-height: 35px;
    padding: 0 5px;
    font-size: 8px;
  }

  .v253-reaction-targets button {
    flex-basis: 50px;
  }

  .v253-live-reaction-tray {
    bottom: 88px !important;
  }
}
/* === END OMILI v2.5.3 === */

/* =========================================================
   OMILI v2.5D — MOBILE BETA, PARTNER SHARING & QA
   ========================================================= */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh;
  overscroll-behavior-y: none;
}

button,
a,
input,
select,
textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.v25d-auth-invite,
.v25d-beta-code-preview {
  margin: 10px 0;
  padding: 9px 11px;
  border: 1px solid #563071;
  border-radius: 10px;
  background: #120a18;
  color: #dca4ff;
  font-size: 10px;
  font-weight: 800;
}

.v25d-auth-tip {
  margin-top: 9px;
  color: #9da0aa;
  font-size: 10px;
  line-height: 1.45;
}

.v25d-join-page {
  width: min(100%, 560px);
  min-height: 100dvh;
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: max(22px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 10%, rgba(126, 0, 255, .18), transparent 34%),
    radial-gradient(circle at 0 100%, rgba(255, 26, 62, .12), transparent 30%),
    #000;
  color: #fff;
}

.v25d-join-card {
  width: 100%;
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid #343640;
  border-radius: 24px;
  background: rgba(8, 8, 11, .94);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

.v25d-join-logo {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 42px;
  font-style: italic;
  font-weight: 950;
  text-align: center;
}

.v25d-join-card > span {
  color: #a76cff;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.v25d-join-card h1 {
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 30px;
  font-style: italic;
  line-height: 1.02;
  text-align: center;
}

.v25d-join-card > p,
.v25d-join-footnote {
  margin: 0;
  color: #a5a8b1;
  font-size: 11px;
  line-height: 1.55;
  text-align: center;
}

.v25d-invite-code {
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 14px;
  border: 1px solid #385b80;
  border-radius: 14px;
  background: #07131d;
}

.v25d-invite-code small {
  color: #7d8592;
  font-size: 9px;
  font-weight: 900;
}

.v25d-invite-code strong {
  color: #66ceff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 24px;
  font-style: italic;
  letter-spacing: 1px;
}

.v25d-join-steps {
  display: grid;
  gap: 7px;
}

.v25d-join-steps article {
  min-height: 46px;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #282b31;
  border-radius: 11px;
  background: #0b0b0e;
}

.v25d-join-steps b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff1a3e, #8900ef, #276cff);
  font-size: 11px;
}

.v25d-join-steps span {
  color: #c7c9cf;
  font-size: 11px;
}

.v25d-join-primary,
.v25d-join-share {
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 24px;
  text-decoration: none;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 900;
}

.v25d-join-primary {
  background: linear-gradient(105deg, #ff1c42, #9900ed, #276cff);
  color: #fff;
}

.v25d-join-share {
  border: 1px solid #373943;
  background: #0a0a0d;
  color: #c9cbd2;
}

.v25d-join-loading {
  min-height: 44px;
  display: grid;
  place-items: center;
  color: #9da0a8;
  font-size: 11px;
}

.v25d-mobile-qa-page {
  width: min(100%, 780px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 14px max(100px, calc(24px + env(safe-area-inset-bottom)));
  background: #000;
  color: #fff;
}

.v25d-mobile-qa-header {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 9px;
  align-items: center;
}

.v25d-mobile-qa-header > div {
  display: grid;
  gap: 2px;
}

.v25d-mobile-qa-header span,
.v25d-mobile-qa-section header span {
  color: #9b67ff;
  font-size: 9px;
  font-weight: 900;
}

.v25d-mobile-qa-header h1,
.v25d-mobile-qa-section h2 {
  margin: 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-style: italic;
}

.v25d-mobile-qa-header h1 {
  font-size: 26px;
}

.v25d-mobile-qa-header > button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #4c2c64;
  border-radius: 19px;
  background: #100a14;
  color: #d58cff;
  font-size: 10px;
  font-weight: 900;
}

.v25d-mobile-qa-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 13px 0;
}

.v25d-mobile-qa-summary article {
  min-height: 66px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid #292c33;
  border-radius: 11px;
  background: #08080a;
}

.v25d-mobile-qa-summary span {
  color: #777b84;
  font-size: 9px;
  font-weight: 900;
}

.v25d-mobile-qa-summary strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 22px;
  font-style: italic;
}

.v25d-mobile-qa-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.v25d-mobile-qa-actions > button,
.v25d-mobile-qa-actions .pwa-install-button {
  min-height: 42px;
  margin: 0;
  border: 1px solid #343741;
  border-radius: 21px;
  background: #0b0b0e;
  color: #fff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 10px;
  font-style: italic;
  font-weight: 900;
}

.v25d-mobile-qa-actions .pwa-install-button {
  grid-column: 1 / -1;
}

.v25d-mobile-qa-message {
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid #64432b;
  border-radius: 10px;
  background: #180f08;
  color: #ffc37b;
  font-size: 10px;
}

.v25d-mobile-qa-message.good {
  border-color: #26563a;
  background: #07150d;
  color: #68e895;
}

.v25d-mobile-qa-section {
  margin-top: 18px;
}

.v25d-mobile-qa-section header {
  display: grid;
  gap: 2px;
  margin-bottom: 8px;
}

.v25d-mobile-qa-section h2 {
  font-size: 21px;
}

.v25d-mobile-checks,
.v25d-mobile-routes {
  display: grid;
  gap: 7px;
}

.v25d-mobile-checks article {
  min-height: 62px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid #2a2d34;
  border-radius: 11px;
  background: #08080b;
}

.v25d-mobile-checks article > b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #3f424b;
  border-radius: 50%;
  color: #bbbfc9;
}

.v25d-mobile-checks article > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.v25d-mobile-checks strong {
  font-size: 11px;
}

.v25d-mobile-checks span {
  overflow-wrap: anywhere;
  color: #81858f;
  font-size: 10px;
  line-height: 1.35;
}

.v25d-mobile-checks .state-pass {
  border-color: #245437;
}

.v25d-mobile-checks .state-pass > b {
  border-color: #208346;
  color: #54ef85;
}

.v25d-mobile-checks .state-warn {
  border-color: #5a4425;
}

.v25d-mobile-checks .state-warn > b {
  border-color: #936726;
  color: #ffbd55;
}

.v25d-mobile-checks .state-fail {
  border-color: #642b35;
}

.v25d-mobile-checks .state-fail > b {
  border-color: #9b3143;
  color: #ff6b7b;
}

.v25d-mobile-qa-help {
  margin: 0 0 9px;
  color: #848892;
  font-size: 10px;
}

.v25d-mobile-routes article {
  min-height: 62px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #292c33;
  border-radius: 11px;
  background: #08080a;
}

.v25d-mobile-routes article.passed {
  border-color: #27573a;
}

.v25d-mobile-routes > article > button {
  width: 34px;
  height: 34px;
  border: 1px solid #3b3f48;
  border-radius: 50%;
  background: #0e0f12;
  color: #fff;
  font-size: 18px;
}

.v25d-mobile-routes article.passed > button {
  border-color: #27874c;
  color: #56ef86;
}

.v25d-mobile-routes a {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: #fff;
  text-decoration: none;
}

.v25d-mobile-routes a strong {
  font-size: 11px;
}

.v25d-mobile-routes a span {
  color: #7f838c;
  font-size: 9px;
  line-height: 1.35;
}

.v25d-mobile-routes article > b {
  color: #b076ff;
  font-size: 9px;
}

.v25d-mobile-qa-note,
.v25d-beta-share-overview {
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed #3b3d46;
  border-radius: 12px;
  background: #070709;
}

.v25d-mobile-qa-note strong {
  color: #74cfff;
  font-size: 10px;
}

.v25d-mobile-qa-note p {
  margin: 5px 0 0;
  color: #8d919a;
  font-size: 10px;
  line-height: 1.45;
}

.v25d-qa-hero-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.v25d-qa-hero-actions a {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #4b2d63;
  border-radius: 22px;
  background: #100a14;
  color: #fff;
  text-decoration: none;
  font-size: 10px;
  font-weight: 900;
}

.v25d-beta-admin-links {
  display: flex;
  gap: 5px;
}

.v25d-beta-admin-links a,
.beta-invite-list article > div:last-child a {
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 0 9px;
  border: 1px solid #343741;
  border-radius: 8px;
  background: #0d0d10;
  color: #fff;
  text-decoration: none;
  font-size: 9px;
  font-weight: 900;
}

.v25d-beta-share-overview {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.v25d-beta-share-overview > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.v25d-beta-share-overview span {
  color: #9870ff;
  font-size: 9px;
  font-weight: 900;
}

.v25d-beta-share-overview strong {
  overflow: hidden;
  color: #fff;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v25d-beta-share-overview small {
  color: #858993;
  font-size: 9px;
}

.v25d-beta-share-overview > a {
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid #4d2f65;
  border-radius: 18px;
  color: #d597ff;
  text-decoration: none;
  font-size: 9px;
  font-weight: 900;
}

@media (max-width: 620px) {
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  .v25d-join-card {
    padding: 18px;
  }

  .v25d-join-card h1 {
    font-size: 26px;
  }

  .v25d-mobile-qa-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v25d-qa-hero-actions,
  .v25d-beta-share-overview {
    grid-template-columns: 1fr;
  }

  .v25d-beta-share-overview > a {
    justify-self: stretch;
  }
}
/* === END OMILI v2.5D === */

/* =========================================================
   OMILI v2.5D — PARTNER BETA, MOBILE QA & FEEDBACK
   ========================================================= */

:root {
  --v25d-safe-bottom: max(12px, env(safe-area-inset-bottom));
}

.v25d-qa-page,
.v25d-admin-qa {
  width: min(100%, 980px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 16px calc(34px + var(--v25d-safe-bottom));
  background:
    radial-gradient(circle at 100% 0%, rgba(88,0,171,.13), transparent 31%),
    #000;
  color: #fff;
}

.v25d-qa-header,
.v25d-admin-qa-header {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
}

.v25d-qa-header > div,
.v25d-admin-qa-header > div {
  min-width: 0;
}

.v25d-qa-header span,
.v25d-admin-qa-header span,
.v25d-section-heading span {
  color: #8c5cff;
  font-size: 10px;
  font-weight: 900;
}

.v25d-qa-header h1,
.v25d-admin-qa-header h1,
.v25d-section-heading h2 {
  margin: 2px 0 0;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 27px;
  font-style: italic;
  line-height: 1;
}

.v25d-qa-header small {
  display: block;
  margin-top: 4px;
  color: #7e818b;
  font-size: 10px;
}

.v25d-qa-header > button,
.v25d-admin-qa-header > a,
.v25d-beta-admin-links a {
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 0 13px;
  border: 1px solid #49305e;
  border-radius: 20px;
  background: #100817;
  color: #d9a2ff;
  text-decoration: none;
  font-size: 10px;
  font-weight: 900;
}

.v25d-qa-hero,
.v25d-admin-summary {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  margin-top: 14px;
}

.v25d-admin-summary {
  grid-template-columns: repeat(4,minmax(0,1fr));
}

.v25d-qa-hero > div,
.v25d-admin-summary article {
  min-height: 78px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 10px;
  border: 1px solid #292b32;
  border-radius: 13px;
  background: #09090b;
  text-align: center;
}

.v25d-qa-hero span,
.v25d-admin-summary span {
  color: #7d8089;
  font-size: 9px;
  font-weight: 900;
}

.v25d-qa-hero strong,
.v25d-admin-summary strong {
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 22px;
  font-style: italic;
}

.v25d-device-card,
.v25d-install-card,
.v25d-save-panel,
.v25d-feedback-card {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #2c2e35;
  border-radius: 15px;
  background: #09090b;
}

.v25d-device-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
}

.v25d-device-card.secure {
  border-color: #175c37;
  background: #07120b;
}

.v25d-device-card.warning {
  border-color: #76561f;
  background: #161006;
}

.v25d-device-card > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.v25d-device-card strong,
.v25d-install-card strong {
  font-size: 12px;
}

.v25d-device-card span,
.v25d-install-card p {
  margin: 0;
  color: #8f929b;
  font-size: 10px;
  line-height: 1.45;
}

.v25d-device-card b {
  color: #5ff18c;
  font-size: 9px;
  white-space: nowrap;
}

.v25d-device-card.warning b {
  color: #ffc767;
}

.v25d-device-card p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: #c6a867;
  font-size: 10px;
  line-height: 1.45;
}

.v25d-install-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
}

.v25d-install-card > div {
  display: grid;
  gap: 5px;
}

.v25d-install-card > div > span {
  color: #6cc8ff;
  font-size: 9px;
  font-weight: 900;
}

.v25d-install-card .pwa-install-button {
  min-height: 44px;
  margin: 0;
  padding: 0 15px;
  border-radius: 22px;
  white-space: nowrap;
}

.v25d-qa-groups,
.v25d-admin-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin-top: 14px;
  padding: 2px 0 7px;
  scrollbar-width: none;
}

.v25d-qa-groups::-webkit-scrollbar,
.v25d-admin-tabs::-webkit-scrollbar {
  display: none;
}

.v25d-qa-groups button,
.v25d-admin-tabs button {
  min-height: 38px;
  flex: 0 0 auto;
  padding: 0 13px;
  border: 1px solid #2f3138;
  border-radius: 19px;
  background: #09090b;
  color: #8d9099;
  font-size: 9px;
  font-weight: 900;
}

.v25d-qa-groups button.active,
.v25d-admin-tabs button.active {
  border-color: #8633ff;
  background: linear-gradient(100deg,#4e0017,#23002f 58%,#071b34);
  color: #fff;
}

.v25d-test-list,
.v25d-feedback-list,
.v25d-session-list {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.v25d-test-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) 112px;
  gap: 12px;
  padding: 13px;
  border: 1px solid #292b32;
  border-radius: 14px;
  background: #08080a;
}

.v25d-test-card.status-pass { border-color: #185a34; }
.v25d-test-card.status-issue { border-color: #805c21; }
.v25d-test-card.status-blocked { border-color: #77303b; }

.v25d-test-copy {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
}

.v25d-test-copy > span,
.v25d-feedback-area {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 8px;
  background: #16111e;
  color: #b686ff;
  font-size: 9px;
  font-weight: 900;
}

.v25d-test-copy strong {
  font-size: 12px;
}

.v25d-test-copy p,
.v25d-admin-feedback p {
  margin: 0;
  color: #92959f;
  font-size: 10px;
  line-height: 1.45;
}

.v25d-test-copy a,
.v25d-admin-feedback > a,
.v25d-screenshot-link {
  width: fit-content;
  color: #58c7ff;
  text-decoration: none;
  font-size: 9px;
  font-weight: 900;
}

.v25d-test-statuses {
  display: grid;
  gap: 5px;
}

.v25d-test-statuses button {
  min-height: 32px;
  border: 1px solid #30323a;
  border-radius: 8px;
  background: #0d0d10;
  color: #777a84;
  font-size: 9px;
  font-weight: 900;
}

.v25d-test-statuses button.active {
  border-color: #6e36a3;
  color: #fff;
}

.v25d-test-card.status-pass .v25d-test-statuses button.active {
  border-color: #16713d;
  background: #07170d;
  color: #5ff18c;
}

.v25d-test-card.status-issue .v25d-test-statuses button.active {
  border-color: #91651f;
  background: #181105;
  color: #ffcb65;
}

.v25d-test-card.status-blocked .v25d-test-statuses button.active {
  border-color: #8d3240;
  background: #1c080c;
  color: #ff7e8d;
}

.v25d-save-panel {
  display: grid;
  gap: 7px;
}

.v25d-save-panel button,
.v25d-feedback-card > button {
  min-height: 46px;
  border: 0;
  border-radius: 23px;
  background: linear-gradient(100deg,#ed174b,#8b00ff,#3765ff);
  color: #fff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 900;
}

.v25d-save-panel p {
  margin: 0;
  color: #9da0aa;
  font-size: 10px;
  text-align: center;
}

.v25d-section-heading {
  margin-bottom: 12px;
}

.v25d-feedback-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.v25d-feedback-card label,
.v25d-admin-feedback label {
  display: grid;
  gap: 6px;
  margin: 10px 0;
  color: #a3a6af;
  font-size: 9px;
  font-weight: 900;
}

.v25d-feedback-card input,
.v25d-feedback-card select,
.v25d-feedback-card textarea,
.v25d-admin-feedback textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid #30323a;
  border-radius: 10px;
  padding: 10px 11px;
  outline: none;
  background: #050506;
  color: #fff;
  font: inherit;
  font-size: 11px;
}

.v25d-feedback-card textarea,
.v25d-admin-feedback textarea {
  min-height: 108px;
  resize: vertical;
}

.v25d-feedback-card input[type="file"] {
  padding: 9px;
  color: #9da0aa;
}

.v25d-qa-footer {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 7px;
  margin-top: 15px;
}

.v25d-qa-footer a {
  min-height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #292b32;
  border-radius: 10px;
  color: #9da0aa;
  text-decoration: none;
  font-size: 9px;
  font-weight: 900;
}

.v25d-admin-qa-layout {
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(280px,.75fr);
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}

.v25d-admin-feedback {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #292b32;
  border-radius: 14px;
  background: #08080a;
}

.v25d-admin-feedback.severity-blocker { border-color: #a62b3e; }
.v25d-admin-feedback.severity-high { border-color: #8a5a20; }

.v25d-admin-feedback > header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.v25d-admin-feedback > header > div:last-child {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.v25d-admin-feedback > header > div:last-child b {
  color: #ff9a67;
  font-size: 9px;
}

.v25d-admin-feedback > header > div:last-child span {
  color: #9699a3;
  font-size: 9px;
}

.v25d-admin-feedback-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.v25d-admin-feedback-user > img,
.v25d-admin-feedback-user > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  object-fit: cover;
  overflow: hidden;
  border-radius: 50%;
  background: #16161b;
}

.v25d-admin-feedback-user > div {
  display: grid;
  gap: 3px;
}

.v25d-admin-feedback-user strong {
  font-size: 11px;
}

.v25d-admin-feedback-user small {
  color: #777a84;
  font-size: 9px;
}

.v25d-admin-feedback h3 {
  margin: 0;
  font-size: 15px;
}

.v25d-feedback-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.v25d-feedback-meta span {
  padding: 4px 7px;
  border: 1px solid #292b32;
  border-radius: 8px;
  color: #8f929c;
  font-size: 9px;
}

.v25d-admin-feedback footer {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 5px;
}

.v25d-admin-feedback footer button {
  min-height: 34px;
  border: 1px solid #30323a;
  border-radius: 8px;
  background: #0d0d10;
  color: #8f929c;
  font-size: 9px;
  font-weight: 900;
}

.v25d-admin-feedback footer button.active {
  border-color: #7437a7;
  color: #fff;
}

.v25d-session-list {
  position: sticky;
  top: 12px;
}

.v25d-session-list article {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid #292b32;
  border-radius: 12px;
  background: #08080a;
}

.v25d-session-list article > strong {
  font-size: 11px;
}

.v25d-session-list article > span,
.v25d-session-list article > small,
.v25d-session-list article > time {
  color: #858892;
  font-size: 9px;
}

.v25d-session-list article > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #fff;
}

.v25d-session-list article em {
  color: #ffad69;
  font-size: 9px;
  font-style: normal;
}

.v25d-beta-admin-links {
  display: flex;
  gap: 5px;
}

.v25d-invite-preview,
.v25d-auth-invite-note {
  padding: 10px;
  border: 1px solid #47305b;
  border-radius: 10px;
  background: #100817;
  color: #d9a2ff;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.v25d-device-matrix {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 7px;
  margin: 12px 0;
}

.v25d-device-matrix article {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid #292b32;
  border-radius: 10px;
  background: #08080a;
}

.v25d-device-matrix strong,
.v25d-device-matrix b {
  font-size: 10px;
}

.v25d-device-matrix span {
  color: #838690;
  font-size: 9px;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .v25d-admin-qa-layout {
    grid-template-columns: 1fr;
  }

  .v25d-session-list {
    position: static;
  }

  .v25d-admin-summary,
  .v25d-device-matrix {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 520px) {
  .v25d-qa-page,
  .v25d-admin-qa {
    padding-left: 10px;
    padding-right: 10px;
  }

  .v25d-qa-header h1,
  .v25d-admin-qa-header h1 {
    font-size: 23px;
  }

  .v25d-qa-hero {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .v25d-qa-hero strong {
    font-size: 17px;
  }

  .v25d-device-card,
  .v25d-install-card,
  .v25d-test-card {
    grid-template-columns: 1fr;
  }

  .v25d-device-card > b {
    justify-self: start;
  }

  .v25d-install-card .pwa-install-button {
    width: 100%;
  }

  .v25d-test-statuses {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }

  .v25d-feedback-grid {
    grid-template-columns: 1fr;
  }

  .v25d-qa-footer {
    grid-template-columns: 1fr;
  }

  .v25d-admin-feedback footer {
    grid-template-columns: repeat(2,1fr);
  }

  .v25d-beta-admin-links {
    display: grid;
  }
}

@media (display-mode: standalone) {
  .app-shell,
  .v25d-qa-page,
  .v25d-admin-qa {
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }
}
/* === END OMILI v2.5D PARTNER QA === */

/* === OMILI v2.5D.8M.2 SHOW RELIABILITY + REPLAY === */
.debate-card.has-debate-hero .card-inner{position:relative;overflow:hidden;isolation:isolate}
.debate-hero-art{position:absolute;z-index:-1;inset:0 0 0 38%;background-image:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.76) 26%,rgba(5,5,5,.12) 72%),var(--debate-hero);background-position:center;background-size:cover;filter:saturate(.92) contrast(1.05)}
.debate-hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,5,5,.72),transparent 58%),linear-gradient(90deg,#050505,transparent 58%)}
.debate-card-content{position:relative;z-index:1;max-width:min(72%,780px)}
.v8m2-replay{margin:12px 16px 24px;padding:12px;border:1px solid #343741;border-radius:16px;background:radial-gradient(circle at 85% 0,rgba(92,30,255,.12),transparent 35%),#08080a;color:#fff}
.v8m2-replay>header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}.v8m2-replay>header span{color:#7debd4;font-size:9px;font-weight:950;letter-spacing:.08em}.v8m2-replay>header h2{margin:2px 0 0;font-family:var(--omili-heading-font);font-size:23px;font-style:italic}.v8m2-replay>header>b{padding:6px 9px;border:1px solid #3b3d46;border-radius:10px;background:#050506;font-variant-numeric:tabular-nums}
.v8m2-replay video{width:100%;max-height:70vh;border-radius:12px;background:#000}
.v8m2-replay-actions{display:grid;grid-template-columns:repeat(4,52px) minmax(120px,1fr);gap:7px;margin-top:9px}.v8m2-replay-actions button{min-height:46px;border:1px solid #32343c;border-radius:12px;background:#0d0d11;color:#fff}.v8m2-replay-actions button span{font-size:19px}.v8m2-replay-actions button b{display:block;font-size:9px}.v8m2-replay-actions .share{border-color:#355878;color:#65caff;font-size:9px;font-weight:950}
.v8m2-replay-comments{display:grid;gap:6px;margin-top:12px}.v8m2-replay-comments>strong{font-family:var(--omili-heading-font);font-style:italic}.v8m2-replay-comments>button{display:grid;grid-template-columns:42px 1fr;gap:8px;align-items:start;padding:8px;border:1px solid #292b32;border-radius:10px;background:#0a0a0d;color:#fff;text-align:left}.v8m2-replay-comments>button small{color:#67d4ff;font-size:9px;font-weight:900}.v8m2-replay-comments>button span{display:grid;gap:2px;font-size:11px}.v8m2-replay-comments>button span b{color:#d5a4ff;font-size:9px}.v8m2-replay-comments>p{color:#858892;font-size:11px}
.v8m2-replay>form{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:10px}.v8m2-replay>form input{min-height:42px;padding:0 12px;border:1px solid #333640;border-radius:21px;background:#050506;color:#fff}.v8m2-replay>form button,.v8m2-replay>footer button,.v8m2-replay>footer a{min-height:40px;padding:0 15px;border:0;border-radius:20px;background:linear-gradient(105deg,#f31a41,#9d12e8,#2d68ff);color:#fff;font-size:9px;font-weight:950;text-decoration:none}.v8m2-replay>footer{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.v8m2-replay>footer button,.v8m2-replay>footer a{display:grid;place-items:center;border:1px solid #3d3153;background:#0d0d11}.v8m2-replay-message{margin-top:8px;padding:8px;border:1px solid #375568;border-radius:9px;background:#07131a;color:#70d3ff;font-size:10px}
.v24-live-topic-row .recording-warning{color:#ff8491;background:#23080d;border:1px solid #6d2732}
@media(max-width:600px){.debate-hero-art{left:26%}.debate-card-content{max-width:84%}.v8m2-replay{margin-left:10px;margin-right:10px}.v8m2-replay-actions{grid-template-columns:repeat(4,1fr)}.v8m2-replay-actions .share{grid-column:1/-1}.v8m2-replay>header h2{font-size:19px}}
/* === END OMILI v2.5D.8M.2 === */

/* === BEGIN OMILI v2.5D.8M.3.1 SHORTS STYLE RECOVERY ===
   Restores the compact homepage Shorts contract used by RealShortsCarousel.
   This is intentionally namespaced so it cannot affect Shows, Fantasy,
   Predictor, Discover, profiles, or dedicated Short playback pages. */

.v25d4-shorts-shell {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.v25d4-short-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}

.v25d4-short-filters::-webkit-scrollbar,
.v25d4-short-match-filter::-webkit-scrollbar,
.v25d4-short-row::-webkit-scrollbar {
  display: none;
}

.v25d4-short-filters button {
  min-height: 29px;
  flex: 0 0 auto;
  padding: 0 11px;
  border: 1px solid #292a31;
  border-radius: 999px;
  background: #09090b;
  color: #838690;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 9px;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  appearance: none;
}

.v25d4-short-filters button.active {
  border-color: #8d20ff;
  background: linear-gradient(90deg, rgba(207,0,79,.28), rgba(80,18,175,.42));
  color: #fff;
}

.v25d4-short-match-filter {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 1px 0 2px;
  scrollbar-width: none;
}

.v25d4-short-match-filter button {
  min-height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid #2b3540;
  border-radius: 999px;
  background: #071018;
  color: #dcefff;
  cursor: pointer;
  appearance: none;
}

.v25d4-short-match-filter button.active {
  border-color: #40a7e6;
  box-shadow: 0 0 15px rgba(38,157,226,.16);
}

.v25d4-short-match-filter button span {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
}

.v25d4-short-match-filter button img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.v25d4-short-match-filter button small {
  color: #8bcdf3;
  font-size: 8px;
  font-weight: 900;
}

.v25d4-no-match-shorts {
  padding: 7px 10px;
  border: 1px dashed #31333b;
  border-radius: 9px;
  color: #777a83;
  font-size: 9px;
}

.v25d4-short-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(112px, 14vw, 156px);
  gap: 8px;
  overflow-x: auto;
  padding: 2px 26px 5px 0;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.v25d4-short-card {
  aspect-ratio: 112 / 164;
  min-width: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(#070708, #070708) padding-box,
    linear-gradient(145deg, #ff1641, #8c17ff, #255cff) border-box;
  color: #fff;
  text-decoration: none;
  scroll-snap-align: start;
}

.v25d4-short-card:focus-visible {
  outline: 2px solid #65cfff;
  outline-offset: 3px;
}

.v25d4-short-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #101116;
  background-position: center 18%;
  background-repeat: no-repeat;
  background-size: cover;
}

.v25d4-short-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.02) 45%, rgba(0,0,0,.91) 100%);
}

.v25d4-short-top {
  position: absolute;
  z-index: 2;
  top: 6px;
  left: 6px;
  right: 6px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 5px;
}

.v25d4-short-top > b {
  width: 25px;
  height: 25px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 50%;
  background: rgba(0,0,0,.68);
  color: #fff;
  font-size: 9px;
  backdrop-filter: blur(6px);
}

.v25d4-short-crests {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  border: 1px solid rgba(83,153,196,.45);
  border-radius: 999px;
  background: rgba(3,13,22,.76);
  backdrop-filter: blur(6px);
}

.v25d4-short-crests span {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 7px;
  font-weight: 900;
}

.v25d4-short-crests img {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

.v25d4-short-crests small {
  color: #a1d7f5;
  font-size: 6px;
  font-weight: 900;
}

.v25d4-short-identity {
  position: absolute;
  z-index: 2;
  left: 8px;
  right: 34px;
  bottom: 8px;
  display: grid;
  gap: 3px;
}

.v25d4-short-identity strong {
  overflow: hidden;
  color: #fff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 12px;
  font-style: italic;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v25d4-short-identity strong i {
  display: inline-grid;
  width: 12px;
  height: 12px;
  place-items: center;
  margin-left: 3px;
  border-radius: 50%;
  background: #8b15ff;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 7px;
  font-style: normal;
}

.v25d4-short-identity span {
  color: #5dccff;
  font-size: 9px;
  font-weight: 900;
  text-decoration: none;
}

.v25d4-short-card time {
  position: absolute;
  z-index: 3;
  right: 7px;
  bottom: 7px;
  padding: 3px 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  text-decoration: none;
}

.v25d4-short-empty {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px;
  border: 1px dashed #31323a;
  border-radius: 11px;
  color: #7e818a;
}

.v25d4-short-empty strong {
  color: #fff;
  font-family: var(--omili-heading-font), "Arial Narrow", Impact, sans-serif;
  font-size: 13px;
  font-style: italic;
}

.v25d4-short-empty span {
  font-size: 9px;
}

@media (max-width: 620px) {
  .v25d4-short-row {
    grid-auto-columns: 106px;
    gap: 7px;
  }

  .v25d4-short-identity strong {
    font-size: 11px;
  }

  .v25d4-short-identity span {
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v25d4-short-row {
    scroll-behavior: auto;
  }
}

/* === END OMILI v2.5D.8M.3.1 SHORTS STYLE RECOVERY === */

/* === BEGIN OMILI v2.5D.8N.1 LIVE PARTICIPATION ACTIONS === */
.v24-guest-request-bar.v26-join-live-pulse {
  right: 12px;
  bottom: max(8px,env(safe-area-inset-bottom));
  left: auto;
  width: 76px;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  overflow: visible;
  border-radius: 50%;
  background: rgba(4,5,9,.96);
  box-shadow: 0 0 0 1px rgba(112,248,213,.35), 0 0 28px rgba(121,37,255,.48);
  animation: v26GuestButtonPulse 1.55s ease-in-out infinite;
}

.v24-guest-request-bar.v26-join-live-pulse strong {
  font-size: 9px;
  line-height: 1;
  letter-spacing: .04em;
}

.v26-guest-orbit {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
}

.v26-guest-orbit img {
  width: 43px;
  height: 43px;
  object-fit: contain;
  animation: v26GuestOrbit 5s linear infinite;
}

.v26-guest-pulse {
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(112,248,213,.5);
  border-radius: 50%;
  animation: v26GuestRing 1.55s ease-out infinite;
  pointer-events: none;
}

.v26-live-show-take {
  position: absolute;
  z-index: 58;
  right: 100px;
  bottom: max(12px,env(safe-area-inset-bottom));
  left: 12px;
  min-height: 49px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,191,39,.55);
  border-radius: 14px;
  color: #090805;
  background: linear-gradient(110deg,#ffd52c,#ff9f0a);
  box-shadow: 0 12px 28px rgba(0,0,0,.42);
  font-family: var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 1000;
  letter-spacing: .04em;
  text-decoration: none;
}

.v26-guest-orbit-button {
  position: absolute;
  z-index: 59;
  right: 15px;
  bottom: 5px;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  overflow: visible;
  border: 1px solid rgba(112,248,213,.42);
  border-radius: 50%;
  color: #fff;
  background: rgba(4,5,9,.96);
  box-shadow: 0 0 28px rgba(121,37,255,.5);
  animation: v26GuestButtonPulse 1.55s ease-in-out infinite;
}

.v26-guest-orbit-button span,
.v26-guest-orbit-button img { width: 42px; height: 42px; }
.v26-guest-orbit-button img { object-fit: contain; animation: v26GuestOrbit 5s linear infinite; }
.v26-guest-orbit-button strong { margin-top: -3px; font-size: 8px; letter-spacing: .04em; }

.live-arena-stream > .live-hot-take-cta {
  right: 96px;
  bottom: 10px !important;
  left: 14px;
  width: auto !important;
  height: 48px !important;
  transform: none;
}

.v26-guest-preview-message {
  position: absolute;
  z-index: 80;
  right: 14px;
  bottom: 88px;
  left: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(112,248,213,.3);
  border-radius: 11px;
  color: #e7fff9;
  background: rgba(6,18,16,.95);
  box-shadow: 0 12px 35px rgba(0,0,0,.5);
  font-size: 10px;
  text-align: center;
}

@keyframes v26GuestButtonPulse {
  0%,100% { transform: scale(.96); box-shadow: 0 0 0 0 rgba(112,248,213,.18),0 0 20px rgba(121,37,255,.32); }
  50% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(112,248,213,0),0 0 34px rgba(121,37,255,.6); }
}

@keyframes v26GuestRing {
  from { opacity: .8; transform: scale(.86); }
  to { opacity: 0; transform: scale(1.2); }
}

@keyframes v26GuestOrbit {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .v24-guest-request-bar.v26-join-live-pulse,
  .v26-guest-orbit-button,
  .v26-guest-orbit img,
  .v26-guest-orbit-button img,
  .v26-guest-pulse { animation: none; }
}
/* === END OMILI v2.5D.8N.1 LIVE PARTICIPATION ACTIONS === */
/* BEGIN OMILI v2.5D.8O RECORDED SHOW RECEIPTS */
.v8o-open-receipt{width:100%;min-height:68px;display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;align-items:center;gap:1px 10px;margin-top:14px;padding:12px 15px;border:1px solid rgba(124,243,215,.55);border-radius:17px;background:linear-gradient(110deg,rgba(81,29,155,.42),rgba(11,114,95,.27));color:#fff;text-align:left;box-shadow:0 0 0 rgba(124,243,215,0);transition:.2s}.v8o-open-receipt:hover{transform:translateY(-1px);box-shadow:0 0 28px rgba(124,243,215,.14)}.v8o-open-receipt>span{grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;border-radius:999px;background:#7cf3d7;color:#07110f;font-size:23px}.v8o-open-receipt>b{font-family:var(--omili-heading-font),sans-serif;font-size:18px;font-style:italic;letter-spacing:.02em}.v8o-open-receipt>small{color:#aeb5ba;font-size:10px;font-weight:800}
.v8o-receipt-backdrop{position:fixed;z-index:10050;inset:0;display:grid;align-items:end;justify-items:center;padding:20px;background:rgba(0,0,0,.78);backdrop-filter:blur(13px)}.v8o-receipt-sheet{width:min(720px,100%);max-height:min(900px,94dvh);overflow:auto;padding:20px;border:1px solid rgba(124,243,215,.42);border-radius:26px;background:linear-gradient(160deg,#11121a,#08090d 68%);box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 50px rgba(104,40,229,.16);color:#fff}.v8o-receipt-sheet>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.v8o-receipt-sheet>header span{color:#7cf3d7;font-size:9px;font-weight:950;letter-spacing:.13em}.v8o-receipt-sheet>header h2{margin:4px 0 0;font-family:var(--omili-heading-font),sans-serif;font-size:32px;font-style:italic;line-height:.95}.v8o-receipt-sheet>header button{width:40px;height:40px;border:1px solid #353741;border-radius:999px;background:#111218;color:#fff;font-size:24px}.v8o-receipt-auth{display:grid;gap:12px;padding:26px;border:1px dashed #3b3d47;border-radius:18px;text-align:center}.v8o-receipt-auth strong{font-family:var(--omili-heading-font),sans-serif;font-size:23px;font-style:italic}.v8o-receipt-auth p{margin:0;color:#a5a8b1;font-size:12px;line-height:1.5}.v8o-receipt-auth a{padding:13px;border-radius:13px;background:#7cf3d7;color:#06110f;font-weight:950;text-decoration:none}
.v8o-receipt-window{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-bottom:16px}.v8o-receipt-window>div{display:grid;gap:4px;padding:14px;border:1px solid #31343e;border-radius:15px;background:#14151b}.v8o-receipt-window span,.v8o-range>span,.v8o-receipt-field>span{color:#999da8;font-size:8px;font-weight:950;letter-spacing:.12em}.v8o-receipt-window strong{font-family:var(--omili-heading-font),sans-serif;font-size:27px}.v8o-receipt-window button{padding:0;border:0;background:none;color:#7cf3d7;font-size:8px;font-weight:950;text-align:left}.v8o-receipt-window>i{color:#7cf3d7;font-style:normal}.v8o-range,.v8o-receipt-field{display:grid;gap:7px;margin:12px 0}.v8o-range input{width:100%;accent-color:#7cf3d7}.v8o-receipt-field input,.v8o-receipt-field select,.v8o-receipt-field textarea{width:100%;box-sizing:border-box;padding:13px;border:1px solid #353741;border-radius:13px;outline:none;background:#111218;color:#fff;font:inherit}.v8o-receipt-field textarea{min-height:82px;resize:vertical}.v8o-receipt-field input:focus,.v8o-receipt-field select:focus,.v8o-receipt-field textarea:focus{border-color:#7cf3d7;box-shadow:0 0 0 3px rgba(124,243,215,.08)}.v8o-receipt-field small{font-size:7px;color:#686c76}.v8o-receipt-note,.v8o-receipt-message{margin:12px 0;padding:11px 12px;border:1px solid #30333c;border-radius:12px;background:#0d0e13;color:#aeb1ba;font-size:10px;line-height:1.45}.v8o-receipt-message{border-color:rgba(124,243,215,.3);color:#d8fff6}.v8o-receipt-primary,.v8o-receipt-secondary{width:100%;display:block;box-sizing:border-box;padding:15px;border:0;border-radius:14px;background:linear-gradient(90deg,#7cf3d7,#62cdfa);color:#06100f;font-family:var(--omili-heading-font),sans-serif;font-size:17px;font-style:italic;font-weight:950;text-align:center;text-decoration:none}.v8o-receipt-primary:disabled{opacity:.4}.v8o-receipt-secondary{margin-top:8px;border:1px solid #353741;background:#101116;color:#fff}
.v8o-receipt-processing{min-height:390px;display:grid;place-items:center;align-content:center;gap:9px;text-align:center}.v8o-receipt-processing img{width:96px;height:96px;animation:v8o-spin 2.4s linear infinite}.v8o-receipt-processing>span{color:#7cf3d7;font-size:9px;font-weight:950;letter-spacing:.14em}.v8o-receipt-processing>strong{font-family:var(--omili-heading-font),sans-serif;font-size:44px}.v8o-receipt-processing>div{width:min(330px,90%);height:7px;overflow:hidden;border-radius:999px;background:#242631}.v8o-receipt-processing>div i{height:100%;display:block;background:linear-gradient(90deg,#ff2c69,#ad28ff,#4eeed7);transition:width .2s}.v8o-receipt-processing p{max-width:380px;color:#a8abb4;font-size:11px}.v8o-receipt-preview{display:grid;gap:12px}.v8o-receipt-preview>video{width:min(310px,80%);max-height:52dvh;justify-self:center;border:1px solid #3b3d47;border-radius:19px;background:#000;box-shadow:0 18px 45px rgba(0,0,0,.45)}.v8o-receipt-preview>div:not(.v8o-receipt-message):not(.v8o-receipt-export-actions){display:grid;gap:4px}.v8o-receipt-preview>div>span{color:#7cf3d7;font-size:8px;font-weight:950;letter-spacing:.13em}.v8o-receipt-preview>div>strong{font-family:var(--omili-heading-font),sans-serif;font-size:22px;font-style:italic}.v8o-receipt-preview>div>small{color:#999da7;font-size:9px}.v8o-receipt-export-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.v8o-receipt-export-actions button{padding:12px;border:1px solid #3a3c46;border-radius:12px;background:#111218;color:#fff;font-weight:950}
.v8o-feed-receipt-speaker{display:block;margin-top:4px;color:#7cf3d7!important;font-size:7px!important;font-weight:950!important;letter-spacing:.08em}.v8o-receipt-short .v22-short-playback-top strong{color:#7cf3d7}.v8o-receipt-speaker{position:absolute;z-index:4;right:18px;top:116px;max-width:210px;display:grid;gap:2px;padding:10px 12px;border:1px solid rgba(124,243,215,.5);border-radius:13px;background:rgba(5,7,10,.82);backdrop-filter:blur(10px);color:#fff;text-align:right;text-decoration:none}.v8o-receipt-speaker span{color:#7cf3d7;font-size:7px;font-weight:950;letter-spacing:.12em}.v8o-receipt-speaker strong{font-size:12px}.v8o-receipt-speaker small{color:#a8abb4;font-size:8px}.v8o-receipt-source{display:grid;gap:3px;margin:10px 0;padding:10px 12px;border:1px solid rgba(124,243,215,.4);border-radius:12px;background:rgba(8,15,16,.72);color:#fff;text-decoration:none}.v8o-receipt-source span{color:#7cf3d7!important;font-size:7px!important;font-weight:950;letter-spacing:.11em}.v8o-receipt-source strong{font-size:11px}.v8o-receipt-source small{color:#b3b7bf;font-size:8px}.v8o-receipt-share-message{display:block;margin:7px 0;color:#7cf3d7;font-size:9px;font-style:normal;font-weight:850}
@keyframes v8o-spin{to{transform:rotate(360deg)}}
@media(min-width:760px){.v8o-receipt-backdrop{align-items:center}.v8o-receipt-sheet{padding:25px}.v8o-receipt-sheet>header h2{font-size:38px}}
@media(max-width:560px){.v8o-receipt-backdrop{padding:0}.v8o-receipt-sheet{max-height:95dvh;padding:17px;border-radius:24px 24px 0 0}.v8o-receipt-sheet>header h2{font-size:27px}.v8o-receipt-window>div{padding:11px}.v8o-receipt-window strong{font-size:23px}.v8o-receipt-speaker{top:100px;right:12px;max-width:165px}.v8o-receipt-export-actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.v8o-receipt-processing img{animation:none}.v8o-open-receipt{transition:none}}
/* END OMILI v2.5D.8O RECORDED SHOW RECEIPTS */

/* 8S73: consistent post actions and compact match context. */
.v22-posted-screen>.v22-flow-primary,.v22-posted-screen>.v22-flow-secondary{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;padding:12px 18px;margin:0;text-align:center;text-decoration:none;font:900 italic 16px/1.15 var(--omili-heading-font),"Arial Narrow",Impact,sans-serif;letter-spacing:.02em;cursor:pointer;font-family:var(--omili-heading-font),"Arial Narrow",Impact,sans-serif!important}
.v22-posted-screen>.v22-flow-secondary:focus-visible,.v22-posted-screen>.v22-flow-primary:focus-visible{outline:2px solid #ffe173;outline-offset:3px}
.v73-short-match-stack{display:grid;justify-items:start;align-content:start;gap:4px;min-width:0;max-width:100%}
.v25-short-top-row .v73-short-match-stack{flex:0 1 auto}.v73-short-match-stack>a{position:static;inset:auto;margin:0}