/* Unwatchd 3.3.0 design-system bundle. Generated by scripts/build_css.py. */

/* source: css/tokens.css */
/* Unwatchd 3.3.0 — canonical design tokens. */
:root {
  color-scheme: dark;

  --uw-bg: #0b111a;
  --uw-bg-deep: #080c14;
  --uw-bg-elevated: #111a28;
  --uw-surface: #141b28;
  --uw-surface-raised: #182235;
  --uw-surface-glass: rgba(22, 28, 40, .88);
  --uw-surface-soft: rgba(255, 255, 255, .07);
  --uw-border: rgba(151, 177, 218, .18);
  --uw-border-strong: rgba(170, 194, 232, .28);

  --uw-text: #f7f9fc;
  --uw-text-muted: #9aa8bd;
  --uw-muted: var(--uw-text-muted);
  --uw-text-subtle: rgba(225, 232, 244, .62);
  --uw-accent: var(--tg-theme-button-color, #4e9cff);
  --uw-accent-strong: #2178ee;
  --uw-accent-text: var(--tg-theme-button-text-color, #fff);
  --uw-danger: #ff5d68;
  --uw-success: #66d19e;

  --uw-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --uw-font-size-xs: 10px;
  --uw-font-size-sm: 12px;
  --uw-font-size-md: 14px;
  --uw-font-size-lg: 16px;

  --uw-space-1: 4px;
  --uw-space-2: 8px;
  --uw-space-3: 12px;
  --uw-space-4: 16px;
  --uw-space-5: 20px;
  --uw-space-6: 24px;
  --uw-space-8: 32px;

  --uw-radius-xs: 9px;
  --uw-radius-sm: 12px;
  --uw-radius-md: 18px;
  --uw-radius-lg: 22px;
  --uw-radius-xl: 26px;
  --uw-radius-pill: 999px;

  --uw-control-height-sm: 36px;
  --uw-control-height: 52px;
  --uw-sidebar-width: 252px;
  --uw-app-viewport-height: var(--tg-viewport-stable-height, 100dvh);

  --uw-shadow-card: 0 16px 42px rgba(0, 0, 0, .22);
  --uw-shadow-elevated: 0 24px 80px rgba(0, 0, 0, .34);
  --uw-shadow-dialog: 0 28px 80px rgba(0, 0, 0, .52);

  --uw-duration-fast: 160ms;
  --uw-duration-normal: 260ms;
  --uw-ease-standard: cubic-bezier(.2, .8, .2, 1);

  --uw-z-topbar: 15;
  --uw-z-sidebar: 20;
  --uw-z-dialog: 9000;
  --uw-z-startup: 10000;
}

/* source: css/base/foundation.css */
/* Global reset, shell primitives and original component foundations. Source order is preserved from the validated previous build. */
/* Structural compatibility aliases. */
:root {
  --bg: var(--tg-theme-bg-color, var(--uw-bg));
  --panel: var(--tg-theme-secondary-bg-color, var(--uw-surface));
  --panel-2: var(--uw-surface-raised);
  --text: var(--tg-theme-text-color, var(--uw-text));
  --muted: var(--tg-theme-hint-color, var(--uw-text-muted));
  --link: var(--tg-theme-link-color, color-mix(in srgb, var(--uw-accent) 72%, white));
  --button: var(--uw-accent);
  --button-text: var(--uw-accent-text);
  --border: var(--uw-border);
  --danger: var(--tg-theme-destructive-text-color, var(--uw-danger));
  --radius: var(--uw-radius-lg);
  --shadow: var(--uw-shadow-elevated);
  --sidebar: var(--uw-sidebar-width);
  --app-viewport-height: var(--uw-app-viewport-height);
  font-family: var(--uw-font-sans);
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar); padding: 24px 18px;
  background: color-mix(in srgb, var(--panel) 90%, black 5%); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; z-index: 20;
}
.brand { border: 0; background: transparent; display: flex; align-items: center; gap: 12px; text-align: left; padding: 4px 7px 24px; cursor: pointer; }
.brand-mark, .mobile-brand { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--button); color: var(--button-text); font-weight: 950; font-size: 22px; transform: rotate(-4deg); }
.brand b { display: block; font-size: 20px; letter-spacing: -.04em; }
.brand small, .profile-card small { display: block; color: var(--muted); margin-top: 2px; }
.side-nav { display: grid; gap: 5px; }
.nav-item { width: 100%; min-height: 46px; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; border: 0; border-radius: 13px; padding: 0 12px; background: transparent; text-align: left; color: var(--muted); cursor: pointer; }
.nav-item:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
.nav-item.is-active { color: var(--text); background: color-mix(in srgb, var(--button) 12%, var(--panel)); }
.nav-item span { font-size: 22px; line-height: 1; }
.nav-item b { font-size: 14px; }
.nav-item em { font-style: normal; min-width: 24px; padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); text-align: center; font-size: 11px; }
.profile-card { margin-top: auto; display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; padding: 14px 10px 4px; border-top: 1px solid var(--border); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg, var(--button), var(--link)); color: var(--button-text); display: grid; place-items: center; font-weight: 900; background-size: cover; }
.profile-card b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-card small { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main-panel { margin-left: var(--sidebar); min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 15; min-height: 76px; display: grid; grid-template-columns: minmax(260px, 620px) 44px; justify-content: end; align-items: center; gap: 12px; padding: 14px clamp(20px, 4vw, 54px); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); }
.mobile-brand { display: none; border: 0; }
.global-search { height: 48px; border: 1px solid var(--border); border-radius: 15px; background: var(--panel); display: grid; grid-template-columns: 26px 1fr auto; align-items: center; padding: 0 13px; gap: 8px; }
.global-search:focus-within { border-color: color-mix(in srgb, var(--button) 48%, var(--border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--button) 8%, transparent); }
.global-search span { color: var(--muted); font-size: 23px; }
.global-search input { border: 0; outline: 0; background: transparent; color: var(--text); min-width: 0; }
.global-search input::placeholder { color: var(--muted); }
kbd { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--muted); border: 1px solid var(--border); border-radius: 7px; padding: 3px 7px; font-size: 10px; }
.icon-button { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); cursor: pointer; font-size: 22px; }
.icon-button:hover { border-color: color-mix(in srgb, var(--button) 50%, var(--border)); }

.content { max-width: 1540px; margin: 0 auto; padding: 34px clamp(20px, 4vw, 54px) 90px; }
.breadcrumbs { margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.breadcrumbs button { border: 0; background: transparent; color: var(--link); padding: 0; cursor: pointer; }
.view-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.eyebrow { margin: 0 0 7px; color: var(--button); font-size: 10px; line-height: 1.2; letter-spacing: .19em; font-weight: 900; }
h1 { margin: 0; font-size: clamp(34px, 5vw, 64px); line-height: .98; letter-spacing: -.055em; }
h2 { margin: 0; letter-spacing: -.035em; }
.view-subtitle { color: var(--muted); margin: 13px 0 0; max-width: 660px; }
.view-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.hero { display: grid; grid-template-columns: 1.35fr .65fr; gap: 14px; margin: 0 0 24px; }
.hero-main, .hero-stat { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-height: 180px; }
.hero-main { position: relative; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--button) 24%, transparent), transparent 35%), linear-gradient(145deg, var(--panel-2), var(--panel)); }
.hero-main::after { content: "UNWATCHD"; position: absolute; right: -18px; top: 8px; font-size: clamp(55px, 8vw, 120px); font-weight: 1000; letter-spacing: -.08em; color: color-mix(in srgb, var(--text) 4%, transparent); transform: rotate(-5deg); }
.hero-main h2 { max-width: 550px; font-size: clamp(24px, 4vw, 42px); line-height: 1.03; position: relative; z-index: 1; }
.hero-main p { color: var(--muted); margin: 10px 0 0; position: relative; z-index: 1; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hero-stat { display: flex; flex-direction: column; justify-content: space-between; padding: 18px; background: var(--panel); min-height: 180px; }
.hero-stat span { color: var(--muted); font-size: 12px; }
.hero-stat b { font-size: clamp(28px, 4vw, 52px); letter-spacing: -.07em; }
.hero-stat i { font-style: normal; color: var(--button); }

.quick-filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 18px; }
.quick-filters::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; height: 36px; border: 1px solid var(--border); border-radius: 999px; padding: 0 15px; background: var(--panel); color: var(--muted); cursor: pointer; font-size: 13px; }
.chip:hover, .chip.is-active { background: var(--text); color: var(--bg); border-color: var(--text); }
.results-meta { min-height: 28px; color: var(--muted); font-size: 12px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

.media-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 20px); }
.media-card { min-width: 0; cursor: pointer; }
.poster-wrap { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 17px; background: var(--panel); border: 1px solid var(--border); transform: translateZ(0); }
.poster-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease, filter .35s ease; }
.media-card:hover img { transform: scale(1.035); filter: saturate(1.08); }
.poster-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--button) 18%, transparent), transparent 35%), var(--panel); font-size: 40px; color: var(--muted); }
.badge { position: absolute; top: 9px; left: 9px; min-height: 27px; display: inline-flex; align-items: center; gap: 4px; border-radius: 9px; padding: 0 8px; background: rgba(8, 10, 12, .78); backdrop-filter: blur(8px); font-size: 11px; font-weight: 800; }
.badge.rating { left: auto; right: 9px; color: #fff; }
.card-status { position: absolute; left: 9px; right: 9px; bottom: 9px; display: flex; gap: 5px; }
.status-dot { min-width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(8, 10, 12, .82); backdrop-filter: blur(8px); font-size: 12px; }
.status-dot.is-on { background: var(--button); color: var(--button-text); }
.media-info { padding: 10px 2px 0; }
.media-info h3 { margin: 0; font-size: 14px; line-height: 1.25; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.media-info p { margin: 6px 0 0; color: var(--muted); font-size: 11px; display: flex; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skeleton .poster-wrap, .skeleton-line { background: linear-gradient(100deg, var(--panel) 25%, color-mix(in srgb, var(--text) 8%, var(--panel)) 40%, var(--panel) 60%); background-size: 300% 100%; animation: shimmer 1.4s infinite; }
.skeleton-line { height: 12px; margin-top: 10px; border-radius: 5px; }
.skeleton-line.short { width: 58%; height: 9px; }
@keyframes shimmer { to { background-position-x: -120%; } }
.empty-state { text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); padding: 70px 20px; color: var(--muted); }
.empty-state div { font-size: 54px; }
.empty-state h2 { color: var(--text); margin-top: 12px; }
.empty-state p { margin-bottom: 0; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 34px 0 0; }
.pagination button { min-width: 42px; height: 42px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); cursor: pointer; font-size: 13px; font-weight: 700; }
.pagination button:disabled { opacity: .35; cursor: default; }
.pagination button:not(:disabled):hover { border-color: rgba(219, 168, 71, .45); color: var(--amber); }
.pagination span { color: var(--muted); font-size: 12px; padding: 0 8px; }

.button { min-height: 42px; border-radius: 13px; border: 1px solid var(--border); padding: 0 16px; cursor: pointer; font-weight: 750; }
.button.primary { background: var(--button); color: var(--button-text); border-color: var(--button); }
.button.secondary { background: var(--text); color: var(--bg); border-color: var(--text); }
.button.ghost { background: var(--panel); color: var(--text); }
.button.danger { background: color-mix(in srgb, var(--danger) 14%, var(--panel)); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.button:disabled { opacity: .55; cursor: progress; }

.backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55); backdrop-filter: blur(5px); }
.filter-panel, .watch-panel { position: fixed; z-index: 50; top: 0; right: 0; width: min(430px, 100%); height: 100%; overflow-y: auto; background: var(--panel); border-left: 1px solid var(--border); padding: 24px; transform: translateX(105%); transition: transform .25s ease; box-shadow: var(--shadow); }
.filter-panel.is-open, .watch-panel.is-open { transform: translateX(0); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.filter-panel form { display: grid; gap: 20px; }
fieldset { border: 0; padding: 0; margin: 0; }
legend, .field, .field-row label { display: grid; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.segmented { display: flex; padding: 4px; border-radius: 13px; background: color-mix(in srgb, var(--bg) 62%, var(--panel)); border: 1px solid var(--border); }
.segmented label { flex: 1; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label span, .segmented button { min-height: 38px; border: 0; border-radius: 9px; display: grid; place-items: center; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 800; }
.segmented input:checked + span, .segmented button.is-active { background: var(--text); color: var(--bg); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input[type="text"], input[type="number"], select { width: 100%; height: 46px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--bg) 55%, var(--panel)); color: var(--text); padding: 0 12px; outline: 0; }
input:focus, select:focus { border-color: color-mix(in srgb, var(--button) 50%, var(--border)); }
.range-field { display: grid; grid-template-columns: 1fr 42px; align-items: center; gap: 12px; }
.range-field output { color: var(--text); text-align: right; font-size: 16px; }
input[type="range"] { accent-color: var(--button); width: 100%; }
.sheet-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; position: sticky; bottom: -24px; background: linear-gradient(transparent, var(--panel) 30%); padding: 34px 0 24px; }

.details-dialog, .rating-dialog { padding: 0; border: 1px solid var(--border); border-radius: 26px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.details-dialog { width: min(980px, calc(100% - 24px)); max-height: min(860px, calc(100vh - 24px)); overflow: hidden; }
.details-dialog::backdrop, .rating-dialog::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(8px); }
.details-layout { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); max-height: min(860px, calc(100vh - 24px)); }
.details-poster { min-height: 620px; background: var(--bg); position: relative; overflow: hidden; }
.details-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.details-poster::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.details-body { padding: clamp(22px, 4vw, 40px); overflow-y: auto; }
.details-close { float: right; margin: -5px -5px 10px 15px; }
.details-meta { display: flex; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 12px; margin: 10px 0 18px; }
.details-meta span { border: 1px solid var(--border); border-radius: 999px; padding: 5px 9px; }
.details-body h2 { font-size: clamp(30px, 5vw, 52px); line-height: .98; }
.details-overview { color: color-mix(in srgb, var(--text) 78%, var(--muted)); line-height: 1.65; font-size: 14px; }
.detail-list { display: grid; grid-template-columns: 115px 1fr; gap: 10px 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 18px 0; margin: 20px 0; font-size: 13px; }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.action-grid .wide { grid-column: 1 / -1; }
.link-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.rating-dialog { width: min(420px, calc(100% - 24px)); padding: 28px; }
.rating-value { display: flex; align-items: baseline; justify-content: center; margin: 30px 0 18px; }
.rating-value output { font-size: 72px; line-height: .9; font-weight: 950; letter-spacing: -.08em; }
.rating-value span { color: var(--muted); }
.rating-ticks { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; margin: 4px 1px 24px; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 9px; }

.watch-tabs { margin-bottom: 18px; }
.watch-tabs button { flex: 1; }
.season-picker { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.season-picker button { min-width: 42px; height: 36px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); cursor: pointer; }
.season-picker button.is-active { background: var(--button); color: var(--button-text); border-color: var(--button); }
.watch-results { display: grid; gap: 9px; }
.watch-item { border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 45%, var(--panel)); border-radius: 14px; padding: 13px; text-align: left; cursor: pointer; text-decoration: none; display: grid; gap: 6px; }
.watch-item:hover { border-color: color-mix(in srgb, var(--button) 45%, var(--border)); }
.watch-item b { font-size: 13px; line-height: 1.35; }
.watch-item span { color: var(--muted); font-size: 11px; }
.loading-row { color: var(--muted); padding: 40px 0; text-align: center; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: 30px; max-width: calc(100% - 32px); transform: translate(-50%, 30px); opacity: 0; pointer-events: none; background: var(--text); color: var(--bg); border-radius: 13px; padding: 11px 16px; box-shadow: var(--shadow); font-size: 13px; font-weight: 750; transition: .2s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error { background: var(--danger); color: white; }
.bottom-nav { display: none; }

@media (max-width: 1260px) { .media-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .hero { grid-template-columns: 1fr; } .hero-stat { min-height: 120px; } }
@media (max-width: 980px) { :root { --sidebar: 210px; } .media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .details-layout { grid-template-columns: 38% 62%; } }
@media (max-width: 760px) {
  .sidebar { display: none; }
  .main-panel { margin-left: 0; }
  .topbar { min-height: 64px; grid-template-columns: 38px 1fr 42px; padding: 9px 12px; }
  .mobile-brand { display: grid; width: 36px; height: 36px; border-radius: 11px; font-size: 18px; }
  .global-search { height: 42px; border-radius: 13px; padding: 0 9px; }
  .global-search kbd { display: none; }
  .icon-button { width: 42px; height: 42px; }
  .content { padding: 22px 14px calc(92px + env(safe-area-inset-bottom)); }
  .view-header { align-items: flex-start; margin-bottom: 18px; }
  h1 { font-size: 39px; }
  .view-subtitle { font-size: 13px; margin-top: 8px; }
  .view-actions { display: none; }
  .hero-main { min-height: 158px; padding: 20px; }
  .hero-main h2 { font-size: 26px; }
  .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-stat { min-height: 96px; padding: 12px; }
  .hero-stat b { font-size: 30px; }
  .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 9px; }
  .poster-wrap { border-radius: 13px; }
  .media-info h3 { font-size: 12px; }
  .media-info p { font-size: 10px; }
  .badge { top: 6px; left: 6px; min-height: 23px; padding: 0 6px; font-size: 9px; }
  .badge.rating { right: 6px; }
  .card-status { left: 6px; right: 6px; bottom: 6px; }
  .status-dot { min-width: 24px; height: 24px; border-radius: 7px; font-size: 10px; }
  .bottom-nav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: calc(66px + env(safe-area-inset-bottom)); padding: 5px 8px env(safe-area-inset-bottom); background: color-mix(in srgb, var(--panel) 93%, transparent); backdrop-filter: blur(18px); border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bottom-nav button { border: 0; background: transparent; color: var(--muted); border-radius: 12px; display: grid; place-items: center; align-content: center; gap: 2px; }
  .bottom-nav button span { font-size: 19px; line-height: 1; }
  .bottom-nav button small { font-size: 9px; font-weight: 700; }
  .bottom-nav button.is-active { color: var(--button); }
  .filter-panel, .watch-panel { top: auto; bottom: 0; width: 100%; height: min(86vh, 760px); border-left: 0; border-top: 1px solid var(--border); border-radius: 24px 24px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); transform: translateY(105%); }
  .filter-panel.is-open, .watch-panel.is-open { transform: translateY(0); }
  .details-dialog { width: 100%; max-width: none; height: 100%; max-height: 100%; border: 0; border-radius: 0; }
  .details-layout { display: block; max-height: 100%; overflow-y: auto; }
  .details-poster { min-height: 55vh; height: 55vh; }
  .details-body { overflow: visible; padding: 24px 18px calc(30px + env(safe-area-inset-bottom)); margin-top: -44px; position: relative; background: linear-gradient(transparent, var(--panel) 38px); }
  .details-close { position: sticky; top: 8px; z-index: 2; background: rgba(0,0,0,.65); }
  .details-body h2 { font-size: 38px; padding-top: 34px; }
}
@media (max-width: 420px) { .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; } .hero-stats { gap: 5px; } .hero-stat span { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.catalog-list-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog-list-card { min-height: 150px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 92%, var(--button)), var(--panel)); color: var(--text); padding: 20px; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; cursor: pointer; transition: transform .2s ease, border-color .2s ease; }
.catalog-list-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--button) 45%, var(--border)); }
.catalog-list-card > span { color: var(--button); font-size: 34px; font-weight: 900; line-height: 1; }
.catalog-list-card h3 { margin: 8px 0 18px; font-size: 20px; line-height: 1.12; }
.catalog-list-card small { color: var(--muted); font-weight: 750; }
@media (max-width: 980px) { .catalog-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .catalog-list-grid { grid-template-columns: 1fr; } .catalog-list-card { min-height: 118px; } }

/* source: css/components/feature-surfaces.css */
/* Feature surfaces used by current dynamic markup. Source order is preserved from the validated previous build. */
/* ===== Unwatchd 2.8 — graphite-blue cinema redesign ===== */
:root {
  --bg: #0a0e17;
  --panel: #131a29;
  --panel-2: #1a2436;
  --text: #f3f1ea;
  --muted: #909aad;
  --link: #3fd8cb;
  --button: #dba847;
  --button-text: #10131a;
  --border: #29334a;
  --danger: #e8544a;
  --amber: #dba847;
  --amber-soft: rgba(219, 168, 71, .15);
  --amber-glow: rgba(219, 168, 71, .38);
  --teal: #3fd8cb;
  --teal-soft: rgba(63, 216, 203, .15);
  --teal-glow: rgba(63, 216, 203, .45);
  --radius: 16px;
  --shadow: 0 28px 90px rgba(0, 0, 0, .48);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html, body { background: var(--bg); }
body {
  background:
    radial-gradient(circle at 86% -10%, rgba(219, 168, 71, .085), transparent 30rem),
    radial-gradient(circle at -10% 65%, rgba(63, 216, 203, .07), transparent 32rem),
    radial-gradient(circle at 50% 100%, rgba(41, 62, 110, .12), transparent 38rem),
    var(--bg);
}

.wordmark,
.view-header h1,
.hero-main h2,
.details-body h2,
.sheet-head h2,
.rating-dialog h2,
.catalog-list-card h3 {
  font-family: "Bebas Neue", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 400;
  letter-spacing: .035em;
}

.sidebar {
  background: linear-gradient(180deg, #0f1420, #0b0f1a);
  border-right-color: var(--border);
  padding-top: 17px;
}
.brand {
  position: relative;
  overflow: hidden;
  min-height: 78px;
  padding: 19px 7px 17px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.brand-bulbs,
.topbar-bulbs {
  position: absolute;
  display: block;
  height: 4px;
  background-image: radial-gradient(circle, var(--amber) 1.5px, transparent 1.7px);
  background-size: 15px 4px;
  background-repeat: repeat-x;
  opacity: .55;
  animation: unwBulbs 3.2s linear infinite;
}
.brand-bulbs { inset: 1px 7px auto; }
.topbar-bulbs { inset: 0 0 auto; }
@keyframes unwBulbs {
  0%, 100% { background-position-x: 0; opacity: .35; }
  50% { background-position-x: 15px; opacity: .78; }
}
.brand-mark,
.mobile-brand {
  position: relative;
  background: radial-gradient(circle at 32% 28%, #f0c876, var(--amber) 62%, #b3822f 100%);
  box-shadow:
    0 0 0 2px #0a0e17,
    0 0 0 3px rgba(63, 216, 203, .55),
    0 0 14px 2px var(--teal-glow),
    0 8px 20px rgba(0, 0, 0, .38);
  border-radius: 50%;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: .04em;
  overflow: hidden;
  transform: none;
}
.brand-mark::before,
.mobile-brand::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(10, 14, 23, .55) 1px, transparent 1.15px);
  background-size: 5px 100%;
  background-position: 0 0;
  background-repeat: repeat-x;
  mask-image: radial-gradient(circle at 50% 50%, transparent 58%, #000 62%);
}
.brand-mark::after,
.mobile-brand::after {
  content: "";
  position: absolute;
  right: 22%;
  bottom: 20%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent rgba(16, 19, 26, .55);
  transform: rotate(-4deg);
}
.brand-copy { min-width: 0; }
.wordmark { display: block; color: var(--text); font-size: 25px !important; line-height: .9; letter-spacing: .12em !important; }
.wordmark span { color: var(--amber); }
.brand small { margin-top: 7px; font-size: 10px; letter-spacing: .03em; }

.nav-item {
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.nav-item:hover { transform: translateX(2px); }
.nav-item.is-active {
  background: linear-gradient(90deg, var(--amber-soft), rgba(219, 168, 71, .04));
  border-color: rgba(219, 168, 71, .3);
  box-shadow: 0 0 0 1px rgba(63, 216, 203, .12), 0 0 16px rgba(63, 216, 203, .08);
  color: var(--text);
}
.nav-item.is-active > span { color: var(--amber); }
.nav-item em { font-family: "JetBrains Mono", ui-monospace, monospace; }
.profile-card { background: rgba(255,255,255,.015); border-radius: 14px; padding: 12px; border: 1px solid var(--border); }
.avatar { background: radial-gradient(circle at 32% 28%, #f0c876, var(--amber) 70%); box-shadow: 0 0 0 2px #0a0e17, 0 0 0 3px rgba(63, 216, 203, .4); }

.topbar {
  position: sticky;
  overflow: hidden;
  min-height: 82px;
  background: rgba(14, 18, 26, .9);
  border-bottom-color: var(--border);
  backdrop-filter: blur(22px);
}
.global-search {
  background: #16203a;
  border-color: var(--border);
  border-radius: 13px;
}
.global-search:focus-within {
  border-color: rgba(219, 168, 71, .55);
  box-shadow: 0 0 0 4px rgba(219, 168, 71, .08), 0 0 18px rgba(63, 216, 203, .1);
}
.icon-button { background: #16203a; border-color: var(--border); }
.icon-button:hover { color: var(--amber); border-color: rgba(219, 168, 71, .45); box-shadow: 0 0 12px rgba(63, 216, 203, .12); }
.search-submit {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(219, 168, 71, .5);
  border-radius: 10px;
  background: linear-gradient(145deg, #f0c876, var(--amber));
  color: var(--button-text);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(219, 168, 71, .22);
}
.search-submit:hover { box-shadow: 0 4px 14px rgba(219, 168, 71, .32), 0 0 12px rgba(63, 216, 203, .18); }
@media (max-width: 560px) {
  .search-submit { padding: 0 10px; font-size: 11px; }
}
.perf-strip {
  height: 9px;
  background-color: #0f1420;
  background-image: radial-gradient(circle, var(--bg) 3.8px, transparent 4px);
  background-size: 17px 9px;
  background-position: 0 -4px;
  border-bottom: 1px solid rgba(255,255,255,.02);
}

.content { padding-top: 28px; }
.eyebrow { color: var(--amber); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .2em; }
.view-header h1 { font-size: clamp(42px, 6vw, 76px); line-height: .88; letter-spacing: .025em; }
.view-subtitle { max-width: 720px; line-height: 1.55; }
.breadcrumbs { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; }
.breadcrumbs button { color: var(--amber); }

.hero-main,
.hero-stat,
.catalog-list-card,
.empty-state {
  border-color: var(--border);
  background-color: var(--panel);
}
.hero-main {
  background:
    radial-gradient(circle at 86% 16%, rgba(232,163,61,.19), transparent 38%),
    linear-gradient(145deg, #182236, #101728);
}
.hero-main::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 9px;
  background-image: radial-gradient(circle, var(--bg) 3.5px, transparent 3.7px);
  background-size: 17px 9px;
  background-position: 0 -4px;
}
.hero-main::after {
  font-family: "Bebas Neue", Impact, sans-serif;
  letter-spacing: .03em;
  color: rgba(243, 241, 234, .035);
}
.hero-main h2 { letter-spacing: .035em; }
.hero-stat { background: linear-gradient(180deg, #16203a, #101728); }
.hero-stat b { font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; letter-spacing: .04em; }
.hero-stat i { color: var(--amber); }

.chip,
.button,
.pagination button,
.pagination span {
  border-radius: 11px;
}
.chip { background: var(--panel); border-color: var(--border); }
.chip:hover,
.chip.is-active { background: var(--amber); color: var(--button-text); border-color: var(--amber); box-shadow: 0 7px 22px rgba(232, 163, 61, .18); }
.results-meta { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; }

.media-grid { gap: clamp(13px, 1.5vw, 20px); }
.media-card {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0 0 8px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  animation: cardIn .38s ease both;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.media-grid .media-card:nth-child(1) { animation-delay: 0ms; }
.media-grid .media-card:nth-child(2) { animation-delay: 40ms; }
.media-grid .media-card:nth-child(3) { animation-delay: 80ms; }
.media-grid .media-card:nth-child(4) { animation-delay: 120ms; }
.media-grid .media-card:nth-child(5) { animation-delay: 160ms; }
.media-grid .media-card:nth-child(6) { animation-delay: 200ms; }
.media-grid .media-card:nth-child(7) { animation-delay: 240ms; }
.media-grid .media-card:nth-child(8) { animation-delay: 280ms; }
.media-grid .media-card:nth-child(9) { animation-delay: 320ms; }
.media-grid .media-card:nth-child(10) { animation-delay: 360ms; }
.media-grid .media-card:nth-child(11) { animation-delay: 400ms; }
.media-grid .media-card:nth-child(n/**/+12) { animation-delay: 440ms; }
.catalog-list-card { animation: cardIn .38s ease both; }
.catalog-list-grid .catalog-list-card:nth-child(1) { animation-delay: 0ms; }
.catalog-list-grid .catalog-list-card:nth-child(2) { animation-delay: 40ms; }
.catalog-list-grid .catalog-list-card:nth-child(3) { animation-delay: 80ms; }
.catalog-list-grid .catalog-list-card:nth-child(4) { animation-delay: 120ms; }
.catalog-list-grid .catalog-list-card:nth-child(5) { animation-delay: 160ms; }
.catalog-list-grid .catalog-list-card:nth-child(n/**/+6) { animation-delay: 200ms; }

.view-enter { animation: viewEnter .32s ease both; }
@keyframes viewEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.media-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 163, 61, .28);
  background: rgba(255,255,255,.018);
}
.poster-wrap {
  border-radius: 14px;
  border-color: var(--border);
  background: #16203a;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.poster-wrap::before,
.poster-wrap::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 8px;
  right: 8px;
  height: 4px;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(11,14,20,.78) 1.5px, transparent 1.7px);
  background-size: 12px 4px;
}
.poster-wrap::before { top: 4px; }
.poster-wrap::after { bottom: 4px; }
.badge { font-family: "JetBrains Mono", ui-monospace, monospace; background: rgba(11,14,20,.78); border: 1px solid rgba(255,255,255,.08); }
.badge.rating { color: var(--amber); }
.status-dot { background: rgba(11,14,20,.84); border: 1px solid rgba(255,255,255,.08); }
.status-dot.is-on { background: var(--amber); color: var(--button-text); border-color: var(--amber); }
.media-info { padding: 10px 4px 0; }
.media-info h3 { font-weight: 700; }
.media-info p { font-family: "JetBrains Mono", ui-monospace, monospace; }

.button.primary { background: var(--amber); color: var(--button-text); border-color: var(--amber); box-shadow: 0 8px 24px rgba(232, 163, 61, .16); }
.button.secondary { background: var(--teal-soft); color: var(--teal); border-color: rgba(53, 196, 176, .35); }
.button.ghost { background: #16203a; border-color: var(--border); }
.button.ghost:hover { color: var(--amber); border-color: rgba(232, 163, 61, .42); }
.button.danger { background: rgba(232,84,74,.12); color: var(--danger); border-color: rgba(232,84,74,.32); }

.filter-panel,
.watch-panel {
  background: linear-gradient(180deg, #131a29, #0e1424);
  border-left-color: var(--border);
  box-shadow: -28px 0 80px rgba(0,0,0,.42);
}
.ticket-perf {
  height: 10px;
  flex: 0 0 auto;
  background-image: radial-gradient(circle, var(--bg) 3.7px, transparent 3.9px);
  background-size: 18px 10px;
  background-position: 0 -5px;
}
.sheet-head h2 { font-size: 36px; letter-spacing: .05em; }
.segmented { background: #0d1220; border-color: var(--border); }
.segmented input:checked + span,
.segmented button.is-active { background: var(--amber); color: var(--button-text); }
input[type="text"], input[type="number"], select { background: #0e1424; border-color: var(--border); }
input:focus, select:focus { border-color: rgba(232, 163, 61, .55); }
input[type="range"] { accent-color: var(--amber); }

.details-dialog {
  background: #0f1420;
  border-color: var(--border);
  overflow: hidden;
}
.details-dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.details-dialog .ticket-perf { position: relative; z-index: 3; }
.details-layout { background: #0f1420; }
.details-poster { background: #0f131a; }
.details-poster::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(11,14,20,.08), transparent 18%, transparent 82%, rgba(11,14,20,.12));
}
.details-body { background: linear-gradient(180deg, #131a29, #0e1424); }
.details-body h2 { font-size: clamp(38px, 6vw, 66px); line-height: .92; }
.details-meta { font-family: "JetBrains Mono", ui-monospace, monospace; }
.details-meta span { background: #16203a; border-color: var(--border); }
.details-overview { color: #b9bec8; }
.detail-list { border-color: var(--border); }

.rating-dialog { background: #131a29; border-color: var(--border); }
.rating-dialog::before,
.rating-dialog::after {
  content: "";
  display: block;
  height: 7px;
  margin: -10px -28px 20px;
  background-image: radial-gradient(circle, var(--bg) 2.8px, transparent 3px);
  background-size: 14px 7px;
  background-position: 0 -3px;
}
.rating-dialog::after { margin: 20px -28px -10px; }
.rating-value output { color: var(--amber); font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; letter-spacing: .02em; }

.watch-tabs { background: #0d1220; }
.season-picker button { background: #0e1424; border-color: var(--border); }
.season-picker button.is-active { background: var(--amber); color: var(--button-text); border-color: var(--amber); }
.watch-item {
  position: relative;
  overflow: hidden;
  background: #16203a;
  border-color: var(--border);
  padding-right: 44px;
}
.watch-item::after {
  content: "↓";
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--amber);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 18px;
}
.watch-item[data-online-url]::after { content: "↗"; color: var(--teal); }
.watch-item.torrent-item::after { content: "→ чат"; color: var(--amber); font-size: 10px; letter-spacing: .04em; }
.watch-item:hover { border-color: rgba(232, 163, 61, .42); }
.watch-item b { font-size: 13px; }
.watch-item span { font-family: "JetBrains Mono", ui-monospace, monospace; }

.catalog-list-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #182236, #101728);
}
.catalog-list-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 8px;
  background-image: radial-gradient(circle, var(--bg) 3.5px, transparent 3.7px);
  background-size: 17px 8px;
  background-position: 0 4px;
}
.catalog-list-card > span { color: var(--amber); font-family: "JetBrains Mono", ui-monospace, monospace; }

.toast { background: #242b37; color: var(--text); border: 1px solid var(--border); border-radius: 999px; }
.toast.is-error { background: var(--danger); }

@media (max-width: 760px) {
  .topbar { min-height: 71px; padding-top: 14px; }
  .content { padding-top: 20px; }
  .view-header h1 { font-size: 46px; }
  .bottom-nav {
    height: calc(70px + env(safe-area-inset-bottom));
    background: rgba(16,20,29,.95);
    border-top-color: var(--border);
  }
  .bottom-nav button.is-active { color: var(--amber); background: rgba(219,168,71,.08); box-shadow: inset 0 0 0 1px rgba(63,216,203,.15); }
  .filter-panel,
  .watch-panel {
    border-top-color: var(--border);
    background: linear-gradient(180deg, #16203a, #0d1220);
  }
  .details-dialog {
    height: min(94vh, 920px);
    max-height: min(94vh, 920px);
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
    border-top: 1px solid var(--border);
  }
  .details-dialog::backdrop { background: rgba(4,5,8,.72); }
  .details-layout { max-height: calc(min(94vh, 920px) - 10px); }
  .details-poster { min-height: 42vh; height: 42vh; }
  .details-body {
    margin-top: -58px;
    padding-top: 58px;
    background: linear-gradient(transparent, #131a29 52px);
  }
  .details-body h2 { font-size: 46px; }
  .details-close { border-radius: 50%; }
  .action-grid { grid-template-columns: 1fr 1fr; }
  .watch-item { min-height: 62px; }
}

@media (max-width: 420px) {
  .media-grid { gap: 16px 10px; }
  .media-info h3 { font-size: 13px; }
  .details-body h2 { font-size: 42px; }
}


html.is-watch-open, html.is-watch-open body { overflow: hidden; }

/* Torrent delivery to Telegram chat; visibility is permission-gated. */
.watch-item.torrent-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  cursor: default;
  border-left: 3px solid var(--amber);
}
.watch-item.torrent-item::after { display: none; }
.torrent-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}
.torrent-copy b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.torrent-meta {
  display: block;
  color: var(--muted);
  font-size: 10px;
}
.torrent-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.torrent-action {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(232, 163, 61, .34);
  border-radius: 11px;
  padding: 8px 12px;
  background: rgba(232, 163, 61, .12);
  color: var(--amber);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.torrent-action .ui-icon {
  width: 16px;
  height: 16px;
}
.torrent-action:hover,
.torrent-action:focus-visible {
  background: rgba(232, 163, 61, .20);
  border-color: rgba(232, 163, 61, .56);
}
.torrent-action:disabled {
  opacity: .55;
  cursor: progress;
}

@media (max-width: 560px) {
  .watch-item.torrent-item {
    grid-template-columns: 1fr;
  }
  .torrent-actions,
  .torrent-action {
    width: 100%;
  }
}

/* 2.9.0 — access paywall, cast, countries and embedded trailers */
.cast-block, .trailer-block { margin-top: 24px; }
.cast-block ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.cast-block li { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--panel) 88%, transparent); }
.cast-block li b { font-size: 13px; }
.cast-block li span { color: var(--muted); font-size: 11px; }
.trailer-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 10px; }
.trailer-head h3 { margin: 2px 0 0; }
.trailer-head > span { font: 10px/1 "JetBrains Mono", monospace; color: var(--amber); border: 1px solid var(--border); border-radius: 999px; padding: 6px 8px; }
.trailer-frame { overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: #000; aspect-ratio: 16 / 9; }
.trailer-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.paywall-dialog { width: min(560px, calc(100vw - 28px)); max-width: 560px; padding: 0; border: 1px solid var(--border); border-radius: 22px; background: var(--panel); color: var(--text); }
.paywall-dialog::backdrop { background: rgba(4, 7, 12, .78); backdrop-filter: blur(8px); }
.paywall-card { position: relative; padding: 30px; }
.paywall-card h2 { margin: 8px 44px 14px 0; font-size: clamp(28px, 7vw, 44px); line-height: .98; }
.paywall-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; }
.paywall-card ul { display: grid; gap: 8px; padding-left: 20px; }
.paywall-close { position: absolute; top: 18px; right: 18px; }
.paywall-actions { display: grid; gap: 10px; margin-top: 22px; }
@media (max-width: 560px) { .cast-block ul { grid-template-columns: 1fr; } .paywall-card { padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); } }

.club-placeholder {
  grid-column: 1 / -1;
  max-width: 720px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
}
.club-placeholder h2 { margin: 8px 0 12px; }
.club-placeholder p:last-child { color: var(--muted); line-height: 1.65; }

@media (max-width: 760px) { .bottom-nav button small { font-size: 8px; letter-spacing: -.02em; } }

.paywall-feature-list { list-style: none; padding: 0 !important; }
.paywall-feature-list li { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.paywall-feature-list li:last-child { border-bottom: 0; }
.paywall-feature-list b { color: var(--text); }
.paywall-feature-list span { color: var(--muted); line-height: 1.5; }

/* 2.10.0 — Cinema Club */
.club-grid { display: block; }
.club-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.club-summary > div,
.club-profile-stats > div { display: grid; gap: 5px; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }
.club-summary span,
.club-profile-stats span { color: var(--muted); font-size: 13px; }
.club-summary b,
.club-profile-stats b { font-family: var(--display); font-size: 30px; line-height: 1; letter-spacing: .03em; }
.club-section-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 16px; }
.club-section-head h2,
.club-section h2,
.club-profile-form h2,
.club-common h3 { margin: 5px 0 0; }
.club-people-list { display: grid; gap: 14px; }
.club-person { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 16px; padding: 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); }
.club-person:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.club-avatar { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, var(--panel)); color: var(--text); font: 700 15px/1 var(--mono); }
.club-avatar.is-large { width: 82px; height: 82px; font-size: 22px; }
.club-person-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.club-person h3 { margin: 0 0 5px; font-size: 20px; }
.club-person p { margin: 0; color: var(--muted); line-height: 1.5; }
.compatibility { min-width: 112px; text-align: right; }
.compatibility b { display: block; color: var(--accent); font: 800 13px/1.1 Inter, system-ui, sans-serif; }
.compatibility span { color: var(--muted); font-size: 11px; }
.club-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.club-tags span,
.club-status { display: inline-flex; align-items: center; width: fit-content; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 12px; }
.club-status { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.club-facts { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 13px; color: var(--muted); font-size: 13px; }
.club-facts b { color: var(--text); }
.club-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.club-empty { display: grid; justify-items: start; gap: 10px; padding: 28px; border: 1px dashed var(--border); border-radius: 20px; }
.club-empty > div { font-size: 38px; color: var(--accent); }
.club-empty h2, .club-empty p { margin: 0; }
.club-empty p, .club-muted { color: var(--muted); line-height: 1.6; }
.club-profile-view { display: grid; gap: 22px; }
.club-back { width: fit-content; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.club-back:hover { color: var(--text); }
.club-profile-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 22px; border: 1px solid var(--border); border-radius: 20px; background: var(--panel); }
.club-profile-hero h2 { margin: 4px 0 8px; font-size: clamp(30px, 6vw, 48px); }
.club-profile-hero > div > p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.6; }
.club-profile-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.club-profile-stats > div { padding: 14px; }
.club-common { display: grid; gap: 10px; }
.club-common-movie { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.club-common-movie:hover { background: var(--panel); }
.club-common-movie small { color: var(--muted); text-align: right; }
.club-section { display: grid; gap: 14px; margin-bottom: 28px; }
.club-request { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px; border: 1px solid var(--border); border-radius: 15px; background: var(--panel); }
.club-request > div:first-child { display: grid; gap: 4px; }
.club-request > div:last-child { display: flex; gap: 8px; }
.club-request span { color: var(--muted); font-size: 13px; }
.club-readonly { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 16px; margin-bottom: 18px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 15px; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.club-readonly > div { display: grid; gap: 4px; }
.club-readonly span { color: var(--muted); font-size: 13px; }
.club-chat-list { display: grid; gap: 8px; }
.club-chat-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; }
.club-chat-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.club-chat-row > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.club-chat-row small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.club-chat-row em { min-width: 25px; color: var(--accent); font-size: 12px; font-style: normal; text-align: right; }
.club-conversation { display: grid; gap: 16px; }
.club-conversation > header { display: flex; align-items: center; gap: 18px; }
.club-conversation h2 { margin: 3px 0 0; }
.club-messages { display: flex; flex-direction: column; gap: 8px; max-height: min(58vh, 620px); min-height: 280px; overflow-y: auto; padding: 18px; border: 1px solid var(--border); border-radius: 18px; background: color-mix(in srgb, var(--panel) 82%, transparent); }
.club-message { max-width: min(82%, 580px); padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; background: var(--panel); }
.club-message.is-me { align-self: flex-end; border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.club-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.club-message span { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; text-align: right; }
.club-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.club-compose textarea,
.club-profile-form input,
.club-profile-form textarea { width: 100%; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--text); font: inherit; }
.club-compose textarea { min-height: 48px; padding: 11px 13px; resize: vertical; }
.club-profile-form { display: grid; gap: 17px; max-width: 760px; }
.club-profile-form > label:not(.form-check) { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
.club-profile-form input,
.club-profile-form textarea { padding: 11px 13px; color: var(--text); }
.club-profile-form .club-profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 700px) {
  .club-summary, .club-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .club-person { grid-template-columns: 44px minmax(0, 1fr); padding: 14px; }
  .club-person-head { display: grid; }
  .compatibility { text-align: left; }
  .club-profile-hero { grid-template-columns: 1fr; }
  .club-request, .club-readonly { align-items: stretch; flex-direction: column; }
  .club-request > div:last-child { width: 100%; }
  .club-request > div:last-child .button { flex: 1; }
  .club-common-movie { display: grid; }
  .club-common-movie small { text-align: left; }
  .club-compose { grid-template-columns: 1fr; }
  .club-compose .button { width: 100%; }
}


/* 2.10.1 — mobile account, resilient scrolling and swipe navigation */
.profile-card { cursor: pointer; }
.sidebar { height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.side-nav { flex: 0 0 auto; }
.mobile-account { display: none; }
.account-dialog { width: min(520px, calc(100% - 24px)); max-height: min(88dvh, 760px); padding: 0; overflow: auto; border: 1px solid var(--border); border-radius: 22px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.account-dialog::backdrop { background: rgba(2, 4, 8, .76); backdrop-filter: blur(10px); }
.account-card { position: relative; display: grid; gap: 20px; padding: 26px; }
.account-close { position: absolute; top: 16px; right: 16px; }
.account-identity { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding-right: 48px; }
.account-avatar { width: 64px; height: 64px; font-size: 22px; }
.account-identity h2 { margin: 2px 0 5px; font-size: 34px; }
.account-identity p:last-child { margin: 0; color: var(--muted); }
.account-tier { display: grid; gap: 6px; padding: 16px; border: 1px solid color-mix(in srgb, var(--amber) 42%, var(--border)); border-radius: 16px; background: var(--amber-soft); }
.account-tier span { color: var(--amber); font: 700 12px/1.2 var(--mono, monospace); letter-spacing: .04em; text-transform: uppercase; }
.account-tier b { font-size: 15px; }
.account-details { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; margin: 0; padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 13px; }
.account-details dt { color: var(--muted); }
.account-details dd { margin: 0; text-align: right; }
.account-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

@media (max-width: 1023px) {
  :root { --sidebar: 0px; }
  .sidebar { display: none; }
  .main-panel { margin-left: 0; min-height: 100dvh; }
  .topbar { grid-template-columns: 38px minmax(0, 1fr) 42px; padding: 9px 12px 10px; }
  .mobile-brand { display: grid; width: 36px; height: 36px; border-radius: 11px; font-size: 18px; }
  .mobile-account { grid-column: 1 / -1; min-width: 0; min-height: 42px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--panel) 92%, transparent); color: var(--text); text-align: left; cursor: pointer; }
  .mobile-account-copy { min-width: 0; display: grid; gap: 1px; }
  .mobile-account-copy b, .mobile-account-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-account-copy b { font-size: 12px; }
  .mobile-account-copy small { color: var(--amber); font-size: 10px; font-weight: 700; }
  .mobile-account-arrow { color: var(--muted); font-size: 22px; }
  .bottom-nav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: calc(70px + env(safe-area-inset-bottom)); padding: 5px 6px env(safe-area-inset-bottom); display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; background: rgba(16,20,29,.95); backdrop-filter: blur(18px); border-top: 1px solid var(--border); }
  .bottom-nav::-webkit-scrollbar { display: none; }
  .bottom-nav button { flex: 1 0 68px; min-width: 68px; border: 0; background: transparent; color: var(--muted); border-radius: 12px; display: grid; place-items: center; align-content: center; gap: 2px; }
  .content { padding-bottom: calc(94px + env(safe-area-inset-bottom)); }
}

@media (min-width: 761px) and (max-width: 1023px) {
  .topbar { padding-inline: clamp(18px, 4vw, 42px); }
  .mobile-account { max-width: 620px; justify-self: center; }
  .content { padding-inline: clamp(18px, 4vw, 42px); }
}

@media (max-width: 560px) {
  .account-dialog { width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .account-card { padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); }
  .account-actions { grid-template-columns: 1fr; }
}


/* Cinema Club: recommendations for watching together */
.club-together { display: grid; gap: 10px; }
.club-together h3 { margin: 5px 0 2px; }
.club-together-movie { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; }
.club-together-movie:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.club-together-poster { width: 46px; aspect-ratio: 2 / 3; overflow: hidden; display: grid; place-items: center; border-radius: 8px; background: var(--bg); color: var(--muted); }
.club-together-poster img { width: 100%; height: 100%; object-fit: cover; }
.club-together-movie > span:nth-child(2) { min-width: 0; display: grid; gap: 5px; }
.club-together-movie small { color: var(--muted); line-height: 1.35; }
.club-together-movie em { color: var(--amber); font-style: normal; font-size: 12px; white-space: nowrap; }
@media (max-width: 560px) { .club-together-movie { grid-template-columns: 42px minmax(0, 1fr); } .club-together-movie em { grid-column: 2; } }


/* 2.11.0: social profile, friends and live notifications */
.nav-alert[hidden] { display: none !important; }
.nav-alert { min-width: 20px !important; padding: 2px 6px !important; border-radius: 999px !important; background: var(--amber, #dba847) !important; color: #11151d !important; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px !important; font-style: normal; text-align: center; }
.bottom-nav button { position: relative; }
.bottom-nav .nav-alert.mobile { position: absolute; top: 3px; right: max(4px, calc(50% - 25px)); line-height: 16px; z-index: 2; }
[data-view="club"].has-notification > span { animation: club-notification-pulse 1.8s ease-in-out infinite; }
@keyframes club-notification-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.club-avatar { overflow: hidden; flex: 0 0 auto; }
.club-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-demographics { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.club-avatar-editor { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--panel) 92%, transparent); }
.club-avatar-editor > div:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.club-avatar-editor small { flex-basis: 100%; color: var(--muted); }
.club-avatar-upload { cursor: pointer; }
.club-profile-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.club-profile-fields label { min-width: 0; }
.club-conversation > header { align-items: center; }
.club-conversation > header .club-avatar { width: 42px; height: 42px; }
@media (max-width: 560px) {
  .club-avatar-editor { align-items: flex-start; }
  .club-profile-fields { grid-template-columns: 1fr; }
  .club-avatar-editor > div:last-child { align-items: flex-start; }
}

/* 2.12.0: push, rich chat cards and compact mobile UX */
:root { --keyboard-inset: 0px; }

.share-dialog {
  width: min(92vw, 560px);
  max-height: min(82vh, 720px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg);
  color: var(--text);
}
.share-dialog::backdrop { background: rgba(4, 7, 12, .78); backdrop-filter: blur(8px); }
.share-shell { display: grid; max-height: min(82vh, 720px); }
.share-shell > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; border-bottom: 1px solid var(--border); }
.share-shell h2 { margin: 3px 0 0; }
.share-content { display: grid; gap: 8px; padding: 12px; overflow-y: auto; }
.share-person { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 11px; width: 100%; padding: 11px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; }
.share-person:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.share-person > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.share-person small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.share-person em { color: var(--accent); font-size: 12px; font-style: normal; }

.club-settings { display: grid; gap: 11px; padding: 14px; border: 1px solid var(--border); border-radius: 15px; background: color-mix(in srgb, var(--panel) 92%, transparent); }
.club-settings h3 { margin: 0 0 2px; }

.club-request { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; }
.club-request-profile { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.club-request-profile > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.club-request-profile small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.club-request-profile em { color: var(--accent); font-size: 12px; font-style: normal; white-space: nowrap; }
.club-request-actions { display: flex; gap: 7px; }

.club-library { display: grid; gap: 10px; }
.club-library .club-section-head { align-items: center; margin-bottom: 0; }
.club-library .club-section-head > span { color: var(--muted); font: 700 12px/1 var(--mono); }
.club-library-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 142px); gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; padding: 1px 1px 6px; scrollbar-width: none; }
.club-library-row::-webkit-scrollbar { display: none; }
.club-library-card { display: grid; gap: 6px; min-width: 0; padding: 0 0 9px; overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; }
.club-library-card > span { display: grid; place-items: center; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; background: var(--bg); color: var(--muted); }
.club-library-card img { width: 100%; height: 100%; object-fit: cover; }
.club-library-card b, .club-library-card small { margin: 0 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-library-card b { font-size: 13px; }
.club-library-card small { color: var(--muted); font-size: 10px; }

.club-conversation { gap: 10px; }
.club-conversation > header { position: sticky; z-index: 8; top: 0; gap: 8px; padding: 7px 0; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); }
.club-conversation > header .club-back { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 50%; font-size: 19px; }
.club-conversation-profile { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.club-conversation-profile > span { display: grid; min-width: 0; gap: 2px; }
.club-conversation-profile small { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.club-conversation-profile b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-messages { max-height: calc(var(--app-viewport-height, 100vh) - 255px); min-height: 260px; padding: 12px; scroll-padding-bottom: 90px; }
.club-message { max-width: min(88%, 580px); padding: 8px 10px; }
.club-message.has-media { width: min(92%, 390px); max-width: 390px; padding: 7px; }
.club-shared-media { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--text); text-align: left; cursor: pointer; }
.club-shared-poster { display: grid; place-items: center; width: 68px; aspect-ratio: 2 / 3; overflow: hidden; background: var(--bg); color: var(--muted); }
.club-shared-poster img { width: 100%; height: 100%; object-fit: cover; }
.club-shared-media > span:nth-child(2) { display: grid; min-width: 0; gap: 4px; }
.club-shared-media small { color: var(--accent); font: 700 9px/1 var(--mono); letter-spacing: .06em; }
.club-shared-media b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.club-shared-media em { color: var(--muted); font-size: 10px; font-style: normal; }
.club-shared-media strong { padding-right: 8px; color: var(--accent); font-size: 10px; white-space: nowrap; }
.club-message.has-media > p { margin: 7px 3px 1px; }

.club-compose { position: sticky; z-index: 15; bottom: max(4px, env(safe-area-inset-bottom)); grid-template-columns: minmax(0, 1fr) 44px; gap: 7px; padding: 7px; border: 1px solid var(--border); border-radius: 17px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(18px); box-shadow: 0 10px 34px rgba(0,0,0,.25); }
.club-compose-field { position: relative; min-width: 0; }
.club-compose textarea { display: block; min-height: 42px; max-height: 120px; padding: 10px 38px 10px 11px; resize: none; line-height: 1.35; }
.club-keyboard-close { position: absolute; right: 5px; bottom: 5px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
.club-send { display: grid; place-items: center; align-self: end; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--button); color: var(--button-text); font-size: 19px; cursor: pointer; }
.club-send:disabled { opacity: .5; }

@media (max-width: 1023px) {
  .bottom-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; height: calc(60px + env(safe-area-inset-bottom)); padding: 3px 2px env(safe-area-inset-bottom); overflow: hidden; }
  .bottom-nav button { min-width: 0; width: auto; padding: 2px 0; border-radius: 9px; gap: 1px; }
  .bottom-nav button span { font-size: 16px; }
  .bottom-nav button small { max-width: 100%; overflow: hidden; font-size: 7px; letter-spacing: -.035em; text-overflow: clip; white-space: nowrap; }
  .bottom-nav .nav-alert.mobile { top: 1px; right: 2px; min-width: 14px; height: 14px; padding: 0 3px; font-size: 8px; line-height: 14px; }
  .content { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  html.is-chat-composing .bottom-nav, html.has-soft-keyboard .bottom-nav { transform: translateY(115%); pointer-events: none; }
  html.is-chat-composing .content, html.has-soft-keyboard .content { padding-bottom: 10px; }
  html.is-chat-composing .club-compose, html.has-soft-keyboard .club-compose { bottom: 4px; }
  .view-header { margin-bottom: 15px; }
  .view-header h1 { font-size: clamp(30px, 10vw, 46px); }
  .hero { margin-bottom: 14px; }
  .quick-filters { margin-bottom: 13px; }
  .media-grid { gap: 10px; }
  .media-info { padding: 9px 8px 10px; }
  .media-info h3 { font-size: 13px; }
  .club-summary { gap: 7px; margin-bottom: 17px; }
  .club-summary > div, .club-profile-stats > div { padding: 10px; border-radius: 12px; }
  .club-summary b, .club-profile-stats b { font-size: 23px; }
  .club-person { gap: 10px; padding: 11px; border-radius: 14px; }
  .club-person h3 { font-size: 17px; }
  .club-profile-hero { gap: 13px; padding: 14px; }
  .club-profile-hero h2 { font-size: clamp(27px, 9vw, 39px); }
  .club-card-actions { gap: 6px; }
  .club-card-actions .button { min-height: 38px; padding: 8px 10px; }
  .club-section { gap: 10px; margin-bottom: 19px; }
  .club-profile-view { gap: 15px; }
  .club-messages { max-height: calc(var(--app-viewport-height, 100vh) - 205px); min-height: 210px; border-radius: 14px; }
}

@media (max-width: 560px) {
  .club-request { grid-template-columns: 1fr; }
  .club-request-profile { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .club-request-actions { width: 100%; }
  .club-request-actions .button { flex: 1; }
  .club-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .club-library-row { grid-auto-columns: 106px; }
  .club-shared-media { grid-template-columns: 60px minmax(0, 1fr); }
  .club-shared-poster { width: 60px; }
  .club-shared-media strong { display: none; }
  .share-dialog { width: calc(100vw - 18px); border-radius: 18px; }
  .share-shell > header { padding: 14px; }
}

/* 2.12.1: refined profile preferences */
.club-settings-panel {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 96%, var(--bg));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
}

.club-settings-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 15px 13px;
}

.club-settings-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

.club-settings-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.club-settings-head > div {
  min-width: 0;
}

.club-settings-head h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}

.club-settings-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.club-settings-list {
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.club-setting-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 11px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .16s ease;
}

.club-setting-row + .club-setting-row {
  border-top: 1px solid color-mix(in srgb, var(--border) 66%, transparent);
}

.club-setting-row:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.club-setting-row:active {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.club-setting-text {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.club-setting-text b {
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
}

.club-setting-text small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.38;
}

.club-setting-input {
  position: absolute;
  width: 1px !important;
  height: 1px;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.club-switch {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 21%, var(--bg));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.club-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, white 92%, var(--text));
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}

.club-setting-input:checked + .club-switch {
  border-color: color-mix(in srgb, var(--accent) 76%, transparent);
  background: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}

.club-setting-input:checked + .club-switch::after {
  transform: translateX(18px);
}

.club-setting-input:focus-visible + .club-switch {
  outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
  outline-offset: 2px;
}

.club-username-field {
  display: grid;
  gap: 7px;
  padding: 13px 14px 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  color: var(--muted);
  font-size: 12px;
}

.club-username-field > span {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.club-username-field > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 70%, var(--panel));
  transition: border-color .16s ease, box-shadow .16s ease;
}

.club-username-field > div:focus-within {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.club-username-field i {
  padding-left: 12px;
  color: var(--muted);
  font-style: normal;
  font-weight: 700;
}

.club-profile-form .club-username-field input {
  min-width: 0;
  padding: 10px 12px 10px 3px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
}

.club-username-field small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

@media (max-width: 560px) {
  .club-profile-form {
    gap: 14px;
  }

  .club-settings-panel {
    border-radius: 16px;
  }

  .club-settings-head {
    gap: 10px;
    padding: 12px 12px 11px;
  }

  .club-settings-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .club-settings-head h3 {
    font-size: 15px;
  }

  .club-settings-head p {
    font-size: 11px;
  }

  .club-setting-row {
    gap: 10px;
    min-height: 54px;
    padding: 10px 12px;
  }

  .club-setting-text b {
    font-size: 13.5px;
  }

  .club-setting-text small {
    font-size: 10.5px;
  }

  .club-switch {
    width: 40px;
    height: 23px;
  }

  .club-switch::after {
    width: 17px;
    height: 17px;
  }

  .club-setting-input:checked + .club-switch::after {
    transform: translateX(17px);
  }

  .club-username-field {
    padding: 12px;
  }
}

/* 2.13.0 — owner administration console */
.topbar { grid-template-columns: minmax(260px, 620px) 44px 44px; }
.admin-quick-button { color: var(--button); font-weight: 900; }
.admin-nav-item { margin-top: 8px; border-top: 1px solid var(--border); border-radius: 0 0 13px 13px; }
.admin-account-button { background: color-mix(in srgb, var(--button) 12%, var(--panel)); border-color: color-mix(in srgb, var(--button) 38%, var(--border)); }
.admin-account-button span { color: var(--button); font-size: 17px; }

.media-grid.admin-grid { display: block; }
.admin-overview { display: grid; gap: 18px; }
.admin-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.admin-metrics article {
  min-width: 0; min-height: 126px; display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px; border: 1px solid var(--border); border-radius: 17px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--panel) 94%, white 2%), var(--panel));
}
.admin-metrics article span { color: var(--muted); font-size: 11px; font-weight: 700; }
.admin-metrics article b { margin: 8px 0; font-size: clamp(30px, 3vw, 46px); line-height: .9; letter-spacing: -.07em; }
.admin-metrics article small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.admin-metrics article:nth-child(2), .admin-metrics article:nth-child(3), .admin-metrics article:nth-child(4) {
  border-color: color-mix(in srgb, var(--button) 28%, var(--border));
  background: linear-gradient(150deg, color-mix(in srgb, var(--button) 7%, var(--panel)), var(--panel));
}

.admin-panel { overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--panel); }
.admin-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; }
.admin-panel-head h2 { font-size: 22px; }
.admin-beta-panel { background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 92%, var(--button) 8%), var(--panel)); }
.admin-beta-state { display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border: 1px solid var(--border); border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.admin-beta-state.is-enabled { border-color: color-mix(in srgb, #39d98a 48%, var(--border)); background: color-mix(in srgb, #39d98a 13%, transparent); color: #71e7ad; }
.admin-beta-state.is-disabled { border-color: color-mix(in srgb, #ff6666 42%, var(--border)); background: color-mix(in srgb, #ff6666 10%, transparent); color: #ff9292; }
.admin-beta-control { padding: 0 22px 18px; }
.admin-beta-control > p { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.admin-global-switch { border-top: 0; padding: 4px 0 10px; }
.admin-count { min-width: 36px; height: 30px; display: grid; place-items: center; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--button) 13%, transparent); color: var(--button); font-size: 12px; font-weight: 800; }
.admin-toolbar { display: grid; grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(150px, .65fr)); gap: 9px; padding: 0 18px 18px; }
.admin-toolbar > label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.admin-toolbar select, .admin-toolbar input {
  width: 100%; min-width: 0; height: 42px; border: 1px solid var(--border); border-radius: 12px;
  padding: 0 12px; background: color-mix(in srgb, var(--bg) 52%, var(--panel)); color: var(--text); outline: 0;
}
.admin-toolbar select:focus, .admin-toolbar input:focus { border-color: color-mix(in srgb, var(--button) 55%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--button) 8%, transparent); }
.admin-search { align-self: end; position: relative; display: grid !important; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 0 !important; height: 42px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--bg) 52%, var(--panel)); overflow: hidden; }
.admin-search > span { display: grid; place-items: center; color: var(--muted); font-size: 18px; }
.admin-search input { height: 40px; border: 0; border-radius: 0; padding: 0 4px; background: transparent; box-shadow: none !important; }
.admin-search button { height: 32px; margin-right: 5px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--button); color: var(--button-text); font-size: 11px; font-weight: 800; cursor: pointer; }

.admin-users-list { border-top: 1px solid var(--border); }
.admin-user-row {
  width: 100%; display: grid; grid-template-columns: 42px minmax(180px, 1fr) 100px 132px 118px 20px;
  align-items: center; gap: 13px; min-height: 72px; padding: 10px 18px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: transparent; text-align: left; cursor: pointer; transition: background .16s ease, transform .16s ease;
}
.admin-user-row:hover { background: color-mix(in srgb, var(--button) 5%, transparent); }
.admin-user-row:active { transform: scale(.997); }
.admin-avatar { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--button) 35%, var(--border)); border-radius: 13px; background: color-mix(in srgb, var(--button) 11%, var(--bg)); color: var(--button); font-size: 13px; font-weight: 900; }
.admin-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-user-identity, .admin-user-period, .admin-user-registered { min-width: 0; display: grid; gap: 3px; }
.admin-user-identity b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.admin-user-identity small, .admin-user-period small, .admin-user-registered small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-period b, .admin-user-registered b { font-size: 12px; font-weight: 650; }
.admin-tier { display: inline-flex; align-items: center; justify-content: center; width: max-content; min-width: 72px; height: 28px; padding: 0 9px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--muted); font-size: 10px; font-weight: 850; }
.admin-tier.is-owner { border-color: color-mix(in srgb, var(--danger) 46%, var(--border)); background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.admin-tier.is-lifetime { border-color: color-mix(in srgb, var(--button) 55%, var(--border)); background: color-mix(in srgb, var(--button) 13%, transparent); color: var(--button); }
.admin-tier.is-premium { border-color: color-mix(in srgb, var(--link) 55%, var(--border)); background: color-mix(in srgb, var(--link) 12%, transparent); color: var(--link); }
.admin-tier.is-trial { border-color: color-mix(in srgb, #a98cff 55%, var(--border)); background: color-mix(in srgb, #a98cff 12%, transparent); color: #c8b7ff; }
.admin-row-arrow { color: var(--muted); font-size: 24px; text-align: right; }
.admin-pagination { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.admin-pagination button { min-height: 36px; border: 1px solid var(--border); border-radius: 11px; padding: 0 13px; background: transparent; color: var(--text); cursor: pointer; }
.admin-pagination button:disabled { opacity: .35; cursor: default; }
.admin-pagination span { color: var(--muted); font-size: 11px; }
.admin-empty { display: grid; justify-items: center; gap: 5px; padding: 44px 20px; color: var(--muted); text-align: center; }
.admin-empty > span { font-size: 32px; color: var(--button); }
.admin-empty b { color: var(--text); }
.admin-empty p { margin: 0; font-size: 12px; }

.admin-audit-panel { padding-bottom: 8px; }
.admin-audit-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; padding: 0 22px 18px; }
.admin-audit-list > div, .admin-timeline-item { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent); }
.admin-audit-dot, .admin-timeline-item > span { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--button); box-shadow: 0 0 0 4px color-mix(in srgb, var(--button) 9%, transparent); }
.admin-audit-list p, .admin-timeline-item p { display: grid; gap: 3px; margin: 0; }
.admin-audit-list b, .admin-timeline-item b { font-size: 12px; }
.admin-audit-list small, .admin-timeline-item small { color: var(--muted); font-size: 10px; }
.admin-audit-list em, .admin-timeline-item em { color: var(--muted); font-size: 10px; font-style: normal; line-height: 1.4; }
.admin-muted { color: var(--muted); font-size: 12px; }
.admin-error { display: grid; justify-items: center; gap: 8px; padding: 80px 20px; text-align: center; }
.admin-error > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); font-size: 24px; font-weight: 900; }
.admin-error p { margin: 0; color: var(--muted); }

.admin-user-dialog { width: min(1120px, calc(100% - 30px)); max-height: min(92dvh, 900px); padding: 0; overflow: auto; border: 1px solid var(--border); border-radius: 22px; background: var(--bg); color: var(--text); box-shadow: var(--shadow); }
.admin-user-dialog::backdrop { background: rgba(2, 4, 8, .78); backdrop-filter: blur(12px); }
.admin-user-sheet { padding: 24px; }
.admin-user-sheet-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; position: relative; padding: 0 52px 20px 0; border-bottom: 1px solid var(--border); }
.admin-user-sheet-head > .icon-button { position: absolute; top: 0; right: 0; }
.admin-user-title { min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 14px; }
.admin-user-title .admin-avatar { width: 58px; height: 58px; border-radius: 17px; font-size: 18px; }
.admin-user-title h2 { overflow: hidden; margin: 1px 0 4px; font-size: 28px; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-title p:last-child { overflow: hidden; margin: 0; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 16px 0; }
.admin-user-stats > div { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--panel); }
.admin-user-stats b { font-size: 22px; letter-spacing: -.04em; }
.admin-user-stats span { color: var(--muted); font-size: 10px; }
.admin-user-columns { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); gap: 14px; }
.admin-editor-card, .admin-history-card { padding: 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); }
.admin-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.admin-card-title h3 { font-size: 18px; }
.admin-card-title > span { padding: 5px 8px; border-radius: 8px; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--muted); font: 700 9px/1 monospace; text-transform: uppercase; }
.admin-mode-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0 0 15px; padding: 0; border: 0; }
.admin-mode-picker legend { margin-bottom: 8px; color: var(--muted); font-size: 10px; font-weight: 750; }
.admin-mode-picker label { position: relative; cursor: pointer; }
.admin-mode-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.admin-mode-picker span { min-height: 66px; display: grid; align-content: center; gap: 4px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--bg) 48%, var(--panel)); transition: border .16s ease, background .16s ease; }
.admin-mode-picker b { font-size: 12px; }
.admin-mode-picker small { color: var(--muted); font-size: 9px; line-height: 1.3; }
.admin-mode-picker input:checked + span { border-color: color-mix(in srgb, var(--button) 65%, var(--border)); background: color-mix(in srgb, var(--button) 11%, var(--panel)); }
.admin-mode-picker input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--button) 18%, transparent); }
.admin-duration { display: grid; gap: 10px; margin-bottom: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--bg) 42%, var(--panel)); }
.admin-duration-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-duration-presets button { min-height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.admin-duration-presets button:hover { border-color: color-mix(in srgb, var(--button) 50%, var(--border)); color: var(--text); }
.admin-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 10px; }
.admin-field-row label, .admin-textarea { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 650; }
.admin-field-row input, .admin-textarea textarea { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 11px; padding: 10px 11px; background: color-mix(in srgb, var(--bg) 55%, var(--panel)); color: var(--text); outline: 0; }
.admin-field-row input:focus, .admin-textarea textarea:focus { border-color: color-mix(in srgb, var(--button) 55%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--button) 8%, transparent); }
.admin-field-row input:disabled { opacity: .55; }
.admin-textarea { margin-top: 10px; }
.admin-textarea textarea { min-height: 72px; resize: vertical; line-height: 1.45; }
.admin-switch-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 12px; min-height: 58px; padding: 10px 2px; border-top: 1px solid color-mix(in srgb, var(--border) 74%, transparent); cursor: pointer; }
.admin-switch-row > span { display: grid; gap: 3px; }
.admin-switch-row b { font-size: 12px; }
.admin-switch-row small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.admin-switch-row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.admin-switch-row i { position: relative; width: 40px; height: 23px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--muted) 18%, var(--bg)); transition: .18s ease; }
.admin-switch-row i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--text); box-shadow: 0 2px 7px rgba(0,0,0,.3); transition: transform .18s ease; }
.admin-switch-row input:checked + i { border-color: var(--button); background: var(--button); }
.admin-switch-row input:checked + i::after { transform: translateX(17px); background: var(--button-text); }
.admin-switch-row input:focus-visible + i { outline: 3px solid color-mix(in srgb, var(--button) 20%, transparent); outline-offset: 2px; }
.admin-switch-row input:disabled + i { opacity: .55; }
.admin-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--border); }
.admin-editor-footer p { max-width: 430px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.admin-owner-notice { padding: 18px; border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--danger) 7%, var(--panel)); }
.admin-owner-notice b { color: var(--danger); }
.admin-owner-notice p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.admin-owner-notice code { color: var(--text); }
.admin-timeline { max-height: 580px; overflow: auto; padding-right: 4px; }
.admin-timeline-item > span.event { background: var(--link); box-shadow: 0 0 0 4px color-mix(in srgb, var(--link) 9%, transparent); }

@media (max-width: 1250px) {
  .admin-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-toolbar { grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(130px, .55fr)); }
}

@media (max-width: 1023px) {
  .admin-quick-button { display: none !important; }
  .topbar { grid-template-columns: 38px minmax(0, 1fr) 42px; }
  .admin-toolbar { grid-template-columns: 1fr 1fr; }
  .admin-search { grid-column: 1 / -1; }
  .admin-user-row { grid-template-columns: 42px minmax(140px, 1fr) 86px 112px 18px; }
  .admin-user-registered { display: none; }
  .admin-audit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-user-columns { grid-template-columns: 1fr; }
  .admin-timeline { max-height: none; }
}

@media (max-width: 650px) {
  .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .admin-metrics article { min-height: 104px; padding: 13px; border-radius: 14px; }
  .admin-metrics article b { font-size: 31px; }
  .admin-panel { border-radius: 16px; }
  .admin-panel-head { padding: 15px 14px 12px; }
  .admin-panel-head h2 { font-size: 18px; }
  .admin-toolbar { grid-template-columns: 1fr 1fr; gap: 7px; padding: 0 10px 12px; }
  .admin-toolbar > label span { display: none; }
  .admin-toolbar select { height: 38px; padding: 0 8px; font-size: 11px; }
  .admin-search { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; height: 40px; }
  .admin-search input { height: 38px; padding-left: 10px; font-size: 12px; }
  .admin-search button { width: auto; min-width: 72px; }
  .admin-user-row { grid-template-columns: 38px minmax(0, 1fr) auto 16px; gap: 9px; min-height: 66px; padding: 9px 11px; }
  .admin-avatar { width: 38px; height: 38px; border-radius: 12px; }
  .admin-user-period, .admin-user-registered { display: none; }
  .admin-tier { min-width: 58px; height: 25px; padding: 0 7px; font-size: 8px; }
  .admin-user-identity b { font-size: 12px; }
  .admin-user-identity small { font-size: 9px; }
  .admin-pagination { padding: 11px; }
  .admin-pagination button { min-height: 34px; padding: 0 10px; font-size: 10px; }
  .admin-audit-list { grid-template-columns: 1fr; padding: 0 14px 14px; }
  .admin-user-dialog { width: 100%; max-width: none; max-height: 94dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .admin-user-sheet { padding: 17px 12px calc(20px + env(safe-area-inset-bottom)); }
  .admin-user-sheet-head { grid-template-columns: 1fr; align-items: flex-start; padding-right: 48px; }
  .admin-user-sheet-head > .admin-tier { margin-left: 72px; }
  .admin-user-title { grid-template-columns: 60px minmax(0, 1fr); gap: 11px; }
  .admin-user-title h2 { font-size: 22px; }
  .admin-user-title p:last-child { white-space: normal; }
  .admin-user-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; overflow-x: auto; }
  .admin-user-stats > div { min-width: 66px; padding: 9px; }
  .admin-user-stats b { font-size: 18px; }
  .admin-editor-card, .admin-history-card { padding: 13px; border-radius: 15px; }
  .admin-mode-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-field-row { grid-template-columns: 1fr; }
  .admin-editor-footer { align-items: stretch; flex-direction: column; }
  .admin-editor-footer .button { width: 100%; }
}

/* 2.14.0 — compact social profile, full public libraries, removable friends */
.club-profile-view { gap: 14px; max-width: 980px; }
.club-profile-hero.compact { gap: 16px; padding: 16px; border-radius: 18px; }
.club-profile-hero.compact .club-avatar.is-large { width: 72px; height: 72px; }
.club-profile-copy { min-width: 0; }
.club-profile-title { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.club-profile-title h2 { margin: 2px 0 4px; font-size: clamp(27px, 5vw, 40px); line-height: .98; }
.club-profile-copy > p:not(.eyebrow) { margin: 7px 0 0; color: var(--muted); line-height: 1.45; }
.club-compatibility-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); color: var(--accent); font: 700 13px/1 var(--mono); }
.club-profile-stats.compact { gap: 7px; }
.club-profile-stats.compact > div { gap: 2px; padding: 10px 12px; border-radius: 13px; }
.club-profile-stats.compact b { font-size: 24px; }
.club-profile-stats.compact span { font-size: 11px; }
.club-profile-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 15px; background: color-mix(in srgb, var(--panel) 94%, transparent); }
.club-profile-primary { flex: 1 1 auto; min-width: 0; }
.club-profile-primary .button { width: 100%; }
.club-profile-secondary-actions { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 6px; }
.button.compact { min-height: 34px; padding: 7px 10px; border-radius: 10px; font-size: 11px; white-space: nowrap; }
.club-action-note { display: inline-flex; align-items: center; min-height: 34px; color: var(--muted); font-size: 12px; }
.club-compact-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.club-compact-head h3 { margin: 3px 0 0; font-size: 18px; }
.club-compact-head > span { color: var(--muted); font: 700 10px/1 var(--mono); }
.club-library-overview, .club-pair-panel { display: grid; gap: 10px; }
.club-library-summary-grid { display: grid; gap: 7px; }
.club-library-summary { display: grid; grid-template-columns: 34px minmax(130px, 1fr) minmax(100px, 160px) auto auto; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.club-library-summary:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.club-library-summary:active { transform: scale(.995); }
.club-library-summary-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 11%, var(--bg)); color: var(--accent); font: 700 16px/1 var(--mono); }
.club-library-summary-copy { display: grid; gap: 3px; min-width: 0; }
.club-library-summary-copy b { font-size: 14px; }
.club-library-summary-copy small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.club-library-summary > strong { color: var(--text); font: 700 18px/1 var(--display); }
.club-library-summary > em { color: var(--accent); font-size: 10px; font-style: normal; white-space: nowrap; }
.club-library-preview { display: flex; justify-content: flex-end; min-width: 0; padding-left: 10px; }
.club-library-preview > span { display: grid; place-items: center; width: 30px; height: 42px; margin-left: -9px; overflow: hidden; border: 2px solid var(--panel); border-radius: 7px; background: var(--bg); color: var(--muted); font-size: 10px; }
.club-library-preview > span:first-child { margin-left: 0; }
.club-library-preview img { width: 100%; height: 100%; object-fit: cover; }
.club-library-preview i { color: var(--muted); font-style: normal; }
.club-inline-state { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 13px; background: color-mix(in srgb, var(--panel) 72%, transparent); }
.club-inline-state > span { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; background: color-mix(in srgb, var(--accent) 9%, var(--panel)); color: var(--accent); }
.club-inline-state > div { display: grid; gap: 2px; }
.club-inline-state b { font-size: 13px; }
.club-inline-state small { color: var(--muted); line-height: 1.35; }
.club-pair-panel .club-together-movie { min-height: 58px; padding: 7px; border-radius: 12px; }
.club-pair-panel .club-together-poster { width: 38px; border-radius: 7px; }
.club-pair-panel .club-together-movie b { font-size: 13px; }
.club-pair-panel .club-together-movie small { font-size: 10px; }
.club-common-panel { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--panel) 88%, transparent); }
.club-common-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; list-style: none; cursor: pointer; }
.club-common-panel > summary::-webkit-details-marker { display: none; }
.club-common-panel > summary > span { display: grid; gap: 2px; }
.club-common-panel > summary b { font-size: 14px; }
.club-common-panel > summary small { color: var(--muted); font-size: 10px; }
.club-common-panel > summary em { min-width: 28px; padding: 5px 7px; border-radius: 999px; background: var(--bg); color: var(--muted); font: 700 10px/1 var(--mono); font-style: normal; text-align: center; }
.club-common-list { display: grid; gap: 6px; padding: 0 9px 9px; }
.club-common-list .club-common-movie { padding: 9px 10px; border-radius: 10px; font-size: 12px; }
.club-common-list .club-common-movie small { font-size: 10px; }
.club-chat-row.is-archived { opacity: .72; }
.club-chat-row b i { display: inline-flex; margin-left: 7px; padding: 3px 5px; border-radius: 999px; background: var(--bg); color: var(--muted); font: 700 8px/1 var(--mono); font-style: normal; text-transform: uppercase; }

@media (max-width: 760px) {
  .club-profile-view { gap: 10px; }
  .club-profile-hero.compact { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 11px; border-radius: 14px; }
  .club-profile-hero.compact .club-avatar.is-large { width: 52px; height: 52px; font-size: 17px; }
  .club-profile-title h2 { font-size: clamp(24px, 8vw, 33px); }
  .club-compatibility-pill { min-width: 46px; padding: 6px 7px; font-size: 11px; }
  .club-profile-copy > p:not(.eyebrow) { margin-top: 5px; font-size: 12px; line-height: 1.35; }
  .club-profile-copy .club-tags { gap: 4px; margin-top: 7px; }
  .club-profile-copy .club-tags span { padding: 4px 6px; font-size: 9px; }
  .club-profile-stats.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .club-profile-stats.compact > div { padding: 8px 5px; text-align: center; }
  .club-profile-stats.compact b { font-size: 20px; }
  .club-profile-stats.compact span { font-size: 8px; }
  .club-profile-actions { display: grid; gap: 7px; padding: 7px; }
  .club-profile-secondary-actions { grid-auto-flow: initial; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .club-profile-secondary-actions .button { min-width: 0; padding-inline: 4px; overflow: hidden; text-overflow: ellipsis; }
  .club-library-summary { grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 8px; padding: 8px 9px; }
  .club-library-summary-icon { width: 30px; height: 30px; border-radius: 9px; }
  .club-library-preview { display: none; }
  .club-library-summary > strong { font-size: 16px; }
  .club-library-summary > em { font-size: 9px; }
  .club-compact-head h3 { font-size: 16px; }
  .club-common-panel > summary { padding: 9px 10px; }
}

@media (max-width: 390px) {
  .club-profile-secondary-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .club-profile-secondary-actions .button { min-height: 32px; padding: 5px 4px; font-size: 10px; letter-spacing: 0; }
  .club-library-summary > em { display: none; }
  .club-library-summary { grid-template-columns: 30px minmax(0, 1fr) auto; }
}

/* 2.15.0 — mobile-first interaction system */
:root {
  --control-height: 40px;
  --control-radius: 12px;
  --surface-soft: color-mix(in srgb, var(--panel) 82%, var(--bg));
  --surface-strong: color-mix(in srgb, var(--panel) 92%, var(--text) 8%);
}

html, body, .main-panel, dialog[open] { touch-action: pan-y; }
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }

.ui-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.ui-icon.is-chevron { width: 17px; height: 17px; color: var(--muted); }

.button {
  min-height: var(--control-height);
  border-radius: var(--control-radius);
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: var(--surface-soft);
  color: var(--text);
  box-shadow: none;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.1;
  transition: transform .14s ease, border-color .14s ease, background-color .14s ease, color .14s ease;
}
.button:hover { border-color: color-mix(in srgb, var(--button) 32%, var(--border)); }
.button:active { transform: scale(.975); }
.button.primary {
  background: var(--button);
  color: var(--button-text);
  border-color: transparent;
  box-shadow: none;
}
.button.secondary { background: color-mix(in srgb, var(--teal-soft) 78%, var(--panel)); color: var(--teal); border-color: color-mix(in srgb, var(--teal) 25%, var(--border)); }
.button.ghost { background: color-mix(in srgb, var(--panel) 78%, transparent); }
.button.danger { background: color-mix(in srgb, var(--danger) 10%, var(--panel)); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, var(--border)); }
.button.compact { min-height: 34px; padding: 0 10px; border-radius: 10px; font-size: 11px; }

/* Film details: clear hierarchy instead of a 2xN wall of equal buttons. */
.media-action-panel { display: grid; gap: 10px; margin-top: 22px; }
.media-action-primary { display: grid; gap: 8px; }
.media-action-primary.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-action-primary.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.media-action {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform .14s ease, background-color .14s ease, border-color .14s ease;
}
.media-action:active, .media-action-row:active, .media-action-compact button:active { transform: scale(.975); }
.media-action > span { min-width: 0; display: grid; gap: 3px; }
.media-action b { overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 1.2; }
.media-action small { color: var(--muted); font-size: 9px; line-height: 1.25; }
.media-action.is-primary { background: var(--button); color: var(--button-text); border-color: transparent; }
.media-action.is-primary small { color: color-mix(in srgb, var(--button-text) 72%, transparent); }
.media-action.is-accent, .media-action.is-active { border-color: color-mix(in srgb, var(--teal) 38%, var(--border)); background: color-mix(in srgb, var(--teal) 10%, var(--panel)); color: var(--teal); }
.media-action.is-danger { border-color: color-mix(in srgb, var(--danger) 25%, var(--border)); background: color-mix(in srgb, var(--danger) 8%, var(--panel)); color: var(--danger); }
.media-action-list { display: grid; gap: 8px; }
.media-action-row {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.media-action-row-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--button) 12%, var(--panel)); color: var(--button); }
.media-action-row > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.media-action-row b { font-size: 12px; line-height: 1.25; }
.media-action-row small { overflow: hidden; color: var(--muted); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.media-action-compact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.media-action-compact button {
  min-width: 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 76%, transparent);
  color: var(--text);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}
.media-action-compact .ui-icon { width: 18px; height: 18px; color: var(--muted); }
.detail-external-links { margin-top: 12px; gap: 12px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 650; }
.text-link .ui-icon { width: 15px; height: 15px; }
.text-link:hover { color: var(--text); }

/* Compact and readable action groups across social cards. */
.club-card-actions, .club-request-actions { gap: 7px; }
.club-profile-secondary-actions { gap: 5px; }
.club-profile-secondary-actions .button { min-height: 33px; padding: 0 7px; border-radius: 10px; font-size: 10.5px; letter-spacing: 0; }

/* Admin form: native select with server-defined plans and keyboard-safe geometry. */
.admin-field-row select {
  width: 100%;
  min-width: 0;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 0 34px 0 11px;
  background-color: color-mix(in srgb, var(--bg) 55%, var(--panel));
  color: var(--text);
  outline: 0;
}
.admin-field-row select:focus { border-color: color-mix(in srgb, var(--button) 55%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--button) 8%, transparent); }
.admin-field-hint { color: var(--muted); font-size: 8.5px; font-weight: 500; line-height: 1.35; }
.admin-user-dialog { overscroll-behavior: contain; }
.admin-user-content { min-height: 0; }
html.has-soft-keyboard .admin-user-dialog,
html.has-soft-keyboard .account-dialog,
html.has-soft-keyboard .share-dialog,
html.has-soft-keyboard .rating-dialog,
html.has-soft-keyboard .details-dialog {
  max-height: calc(var(--app-viewport-height, 100dvh) - 4px);
}
dialog.has-focused-field { scroll-padding-bottom: max(18px, var(--keyboard-inset)); }
dialog.has-focused-field .admin-user-sheet { padding-bottom: max(28px, calc(var(--keyboard-inset) + 20px)); }

@media (max-width: 760px) {
  :root { --control-height: 38px; --control-radius: 11px; }
  .content { padding-inline: 12px; }
  .details-dialog {
    width: 100%;
    height: min(94dvh, var(--app-viewport-height, 94dvh));
    max-height: min(94dvh, var(--app-viewport-height, 94dvh));
  }
  .details-layout { max-height: inherit; }
  .details-body { padding-inline: 15px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .details-body h2 { font-size: clamp(32px, 10vw, 42px); }
  .details-overview { line-height: 1.55; }
  .media-action-panel { margin-top: 18px; }
  .media-action-primary { gap: 6px; }
  .media-action { min-height: 68px; grid-template-columns: 19px minmax(0, 1fr); gap: 7px; padding: 9px 8px; border-radius: 13px; }
  .media-action .ui-icon { width: 18px; height: 18px; }
  .media-action b { font-size: 10.5px; }
  .media-action small { font-size: 8px; }
  .media-action-row { min-height: 54px; border-radius: 13px; }
  .media-action-compact { gap: 6px; }
  .media-action-compact button { min-height: 48px; padding: 7px 4px; border-radius: 12px; font-size: 9px; flex-direction: column; gap: 4px; }
  .media-action-compact .ui-icon { width: 17px; height: 17px; }
  .button { padding-inline: 12px; font-size: 11.5px; }
  .admin-user-dialog {
    height: min(94dvh, var(--app-viewport-height, 94dvh));
    max-height: min(94dvh, var(--app-viewport-height, 94dvh));
    overflow-y: auto;
    scroll-padding-bottom: max(20px, var(--keyboard-inset));
  }
  .admin-user-sheet { padding: 14px 10px calc(18px + env(safe-area-inset-bottom)); }
  .admin-editor-card, .admin-history-card { padding: 12px; border-radius: 14px; }
  .admin-mode-picker span { min-height: 58px; padding: 8px; }
  .admin-field-row { gap: 8px; margin-bottom: 8px; }
  .admin-textarea textarea { min-height: 82px; }
  .admin-editor-footer { position: sticky; bottom: 0; z-index: 2; margin-inline: -12px; padding: 12px; background: linear-gradient(180deg, transparent, var(--panel) 22%); }
  .club-profile-secondary-actions .button { min-height: 32px; padding-inline: 5px; font-size: 10px; }
}

@media (max-width: 390px) {
  .media-action { grid-template-columns: 17px minmax(0, 1fr); padding-inline: 7px; }
  .media-action b { font-size: 9.5px; }
  .media-action small { display: none; }
  .media-action-compact button { font-size: 8.5px; }
  .club-profile-secondary-actions .button { font-size: 9.8px; }
}


/* 2.15.1 — dialog scroll hotfix and single-target profile libraries */
.details-dialog { overscroll-behavior: contain; }
.club-library-summary-chevron { color: var(--muted); transition: transform .18s ease, color .18s ease; }
.club-library-summary:hover .club-library-summary-chevron { color: var(--accent); transform: translateX(2px); }

@media (max-width: 760px) {
  .details-dialog { overflow: hidden; }
  .details-dialog #detailsContent {
    display: block;
    width: 100%;
    height: calc(100% - 10px);
    min-height: 0;
    overflow: hidden;
  }
  .details-dialog .details-layout {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scroll-behavior: auto;
  }
  .details-dialog .details-body {
    min-height: 0;
    overflow: visible;
  }
  .club-library-summary { grid-template-columns: 30px minmax(0, 1fr) auto 18px; }
  .club-library-summary > em { display: none; }
  .club-library-summary-chevron { width: 16px; height: 16px; }
}

@media (max-width: 390px) {
  .club-library-summary { grid-template-columns: 30px minmax(0, 1fr) auto 16px; }
}

/* 2.15.3 — cinema club profile 422 hotfix */


/* 2.16.0 — mobile navigation stack and list entry points */
button.hero-stat {
  width: 100%;
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: pan-y;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
button.hero-stat:hover { border-color: color-mix(in srgb, var(--amber) 46%, var(--border)); }
button.hero-stat:active { transform: scale(.975); background: color-mix(in srgb, var(--panel) 82%, var(--amber)); }
button.hero-stat:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.club-profile-stats.is-navigable { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.club-profile-stat {
  position: relative;
  min-width: 0;
  min-height: 76px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  text-align: left;
  touch-action: pan-y;
}
button.club-profile-stat { cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
button.club-profile-stat:hover { border-color: color-mix(in srgb, var(--amber) 46%, var(--border)); }
button.club-profile-stat:active { transform: scale(.97); background: color-mix(in srgb, var(--panel) 86%, var(--amber)); }
.club-profile-stat b { font-family: var(--display); font-size: 24px; line-height: 1; }
.club-profile-stat span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.club-profile-stat > i:not(.is-chevron) { position: absolute; right: 10px; top: 9px; color: var(--amber); font-style: normal; font-size: 12px; }
.club-profile-stat .is-chevron { position: absolute; right: 7px; bottom: 7px; width: 14px; height: 14px; color: var(--muted); }
.club-profile-stat.is-passive, .club-profile-stat.is-private { cursor: default; }
.club-profile-stat.is-private { opacity: .55; }

.is-swipe-tracking,
.is-swipe-settling {
  transform: translate3d(var(--swipe-x, 0), 0, 0) !important;
  opacity: var(--swipe-opacity, 1);
  will-change: transform, opacity;
}
.is-swipe-tracking { transition: none !important; }
.is-swipe-settling { transition: transform .2s cubic-bezier(.2,.72,.2,1), opacity .2s ease !important; }

@media (max-width: 1023px) {
  .bottom-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bottom-nav button { min-width: 0; }
}
@media (max-width: 520px) {
  .club-profile-stats.is-navigable { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .club-profile-stat { min-height: 68px; padding: 8px 7px; text-align: center; }
  .club-profile-stat b { font-size: 21px; }
  .club-profile-stat span { font-size: 8px; }
  .club-profile-stat > i:not(.is-chevron) { right: 6px; top: 5px; font-size: 9px; }
  .club-profile-stat .is-chevron { display: none; }
}

/* source: css/components/interaction-foundation.css */
/* Keyboard, autocomplete, onboarding and interaction foundations. Source order is preserved from the validated previous build. */
/* ========================================================================== 
   2.17.0 — isolated mobile-first design system
   Everything below is scoped to the active UI version so legacy rules above
   cannot leak into the current interface.
   ========================================================================== */

/* Old social-card internals are intentionally neutralized. */

@keyframes ui-dialog-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Native View Transitions with a no-op fallback in unsupported WebViews. */
@view-transition {
  navigation: none;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .22s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 520px) {
  

  

  

  

  

  

  

  

  

  
}

@media (prefers-reduced-motion: reduce) {
  
}

/* 2.18.0 — subscription control and referral profile panels */

@keyframes account-panel-loading {
  to { background-position: -220% 0; }
}

@media (max-width: 520px) {
  
  
  
  
  
  
  
  
}

/* 2.18.1 — profile list previews stay inside the existing clickable counters. */

@media (max-width: 520px) {
  

  

  
}

/* 2.19.1 — engagement, in-app actions and infinite catalog loading. */

@supports selector(:has(*)) {
  
}

@keyframes infinite-spin { to { transform: rotate(1turn); } }

@media (max-width: 520px) {
  
  
  
}

/* 2.19.3 — profile metrics and action rail */

@media (min-width: 720px) {
  

  
}

@media (max-width: 390px) {
  

  

  
}


/* 2.19.4 — owner moderation */

@media (max-width: 680px) {
  
  
  
  
  
  
}

/* 2.20.1 — keyboard continuity, autocomplete, Club skeletons and activity feed */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 1023px) {
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), textarea, select {
    font-size: 16px !important;
  }
  html.is-form-composing .bottom-nav { transform: translateY(110%); pointer-events: none; }
  html.has-soft-keyboard body { min-height: var(--app-viewport-height); }
}

.global-search { position: relative; }
.search-suggestions {
  position: absolute; z-index: 70; top: calc(100% + 8px); left: 0; right: 0;
  overflow: hidden; border: 1px solid var(--border); border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 96%, var(--bg)); box-shadow: 0 18px 44px rgba(0,0,0,.28);
}
.search-suggestion, .search-suggestion-all {
  width: 100%; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer;
}
.search-suggestion { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 58px; padding: 8px 11px; text-align: left; }
.search-suggestion:last-of-type { border-bottom: 0; }
.search-suggestion:hover, .search-suggestion:focus-visible { background: color-mix(in srgb, var(--button) 10%, transparent); outline: none; }
.search-suggestion img, .search-suggestion-poster { width: 38px; height: 46px; border-radius: 8px; object-fit: cover; background: var(--bg); display: grid; place-items: center; }
.search-suggestion span { min-width: 0; display: grid; gap: 3px; }
.search-suggestion b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.search-suggestion small, .search-suggestion em { color: var(--muted); font-size: 10px; font-style: normal; }
.search-suggestion-all { min-height: 42px; padding: 8px 12px; color: var(--button); font-size: 12px; font-weight: 800; }
.search-suggestion-state { padding: 14px; color: var(--muted); font-size: 12px; }

.club-skeleton-list { display: grid; gap: 12px; }
.club-skeleton-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.club-skeleton-summary span { display: block; height: 58px; border-radius: 14px; }
.club-skeleton-card { display: grid; grid-template-columns: 48px minmax(0,1fr) 38px; gap: 12px; align-items: center; min-height: 92px; padding: 14px; border-radius: 17px; }
.club-skeleton-card i { width: 48px; height: 48px; border-radius: 15px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.club-skeleton-card div { display: grid; gap: 8px; }
.club-skeleton-card b, .club-skeleton-card span, .club-skeleton-card small, .club-skeleton-card em { display: block; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.club-skeleton-card b { width: 42%; height: 11px; }.club-skeleton-card span { width: 78%; height: 9px; }.club-skeleton-card small { width: 58%; height: 8px; }.club-skeleton-card em { width: 38px; height: 34px; }

.club-activity-section { display: grid; gap: 12px; }
.club-activity-list { display: grid; gap: 8px; }
.club-activity-item { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 9px; align-items: start; }
.club-activity-person { width: 42px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.club-activity-person .club-avatar { width: 42px; height: 42px; border-radius: 13px; }
.club-activity-media { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 70px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 15px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; }
.club-activity-media:hover, .club-activity-media:focus-visible { border-color: color-mix(in srgb, var(--button) 50%, var(--border)); outline: none; }
.club-activity-media img, .club-activity-poster { width: 44px; height: 54px; border-radius: 9px; object-fit: cover; background: var(--bg); display: grid; place-items: center; }
.club-activity-media > span { min-width: 0; display: grid; gap: 2px; }
.club-activity-media b { font-size: 12px; }.club-activity-media small { color: var(--button); font-size: 10px; }.club-activity-media strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.club-activity-media time { color: var(--muted); font-size: 9px; white-space: nowrap; }

.onboarding-dialog { width: min(520px, calc(100vw - 24px)); border: 0; padding: 0; background: transparent; color: var(--text); }
.onboarding-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(10px); }
.onboarding-sheet { display: grid; gap: 18px; padding: 20px; border: 1px solid var(--border); border-radius: 24px; background: var(--panel); }
.onboarding-sheet header { display: flex; align-items: center; gap: 13px; }.onboarding-sheet h2 { margin: 2px 0 0; }
.onboarding-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--button); color: var(--button-text); font-family: "Bebas Neue", sans-serif; font-size: 28px; }
.onboarding-points { display: grid; gap: 8px; }
.onboarding-points article { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 11px; padding: 12px; border-radius: 15px; background: color-mix(in srgb, var(--text) 4%, transparent); }
.onboarding-points article > b { color: var(--button); font-family: "JetBrains Mono", monospace; font-size: 11px; }
.onboarding-points span { display: grid; gap: 4px; }.onboarding-points strong { font-size: 13px; }.onboarding-points small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.onboarding-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 520px) {
  .search-suggestions { position: fixed; top: 116px; left: 10px; right: 10px; max-height: min(380px, calc(var(--app-viewport-height) - 140px)); overflow-y: auto; }
  .club-activity-media { grid-template-columns: 40px minmax(0,1fr); }.club-activity-media time { grid-column: 2; }
  .onboarding-actions { grid-template-columns: 1fr; }.onboarding-actions .primary { order: -1; }
}


/* 2.20.1 — autocomplete portal: the dropdown is mounted under <body>, outside the sticky topbar clipping context. */

/* 2.20.2 — actionable Club navigation */

@media (max-width: 430px) {
  

  

  
}

/* source: css/layout/cinema-shell.css */
/* Current shell, header, sidebar and title layout. Source order is preserved from the validated previous build. */
/* ========================================================================
   Unwatchd 3.0 — cinematic mobile UI
   This scoped layer is the only active visual contract for core surfaces.
   Legacy declarations above remain for old markup fallbacks but cannot style
   the 3.0 shell without passing through this scope.
   ======================================================================== */
body[data-ui-version="3.3.0"] {
  --cinema-bg: var(--uw-bg-deep);
  --cinema-panel: var(--uw-surface-glass);
  --cinema-panel-strong: var(--uw-surface);
  --cinema-soft: var(--uw-surface-soft);
  --cinema-border: var(--uw-border);
  --cinema-text: var(--uw-text);
  --cinema-muted: var(--uw-text-subtle);
  --cinema-accent: var(--uw-accent);
  --cinema-accent-text: var(--uw-accent-text);
  --cinema-danger: var(--uw-danger);
  --cinema-radius-xl: 30px;
  --cinema-radius-lg: var(--uw-radius-lg);
  --cinema-radius-md: var(--uw-radius-md);
  --cinema-shadow: var(--uw-shadow-elevated);
  margin: 0;
  color: var(--cinema-text);
  background:
    radial-gradient(circle at 18% -10%, color-mix(in srgb, var(--cinema-accent) 22%, transparent), transparent 42%),
    linear-gradient(180deg, #0f1017 0%, var(--cinema-bg) 44%, #07080c 100%);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body[data-ui-version="3.3.0"] *,
body[data-ui-version="3.3.0"] *::before,
body[data-ui-version="3.3.0"] *::after { box-sizing: border-box; }

body[data-ui-version="3.3.0"] button,
body[data-ui-version="3.3.0"] input,
body[data-ui-version="3.3.0"] select,
body[data-ui-version="3.3.0"] textarea { font: inherit; }

body[data-ui-version="3.3.0"] .app-shell { min-height: var(--app-viewport-height, 100dvh); background: transparent; }
body[data-ui-version="3.3.0"] .main-panel { background: transparent; }
body[data-ui-version="3.3.0"] .content { max-width: 1480px; margin: 0 auto; padding-top: 26px; }
body[data-ui-version="3.3.0"] .perf-strip,
body[data-ui-version="3.3.0"] .topbar-bulbs,
body[data-ui-version="3.3.0"] .brand-bulbs,
body[data-ui-version="3.3.0"] .ticket-perf { display: none !important; }

/* Header and search */
body[data-ui-version="3.3.0"] .topbar {
  min-height: 76px;
  padding: 12px 22px;
  border: 0;
  background: linear-gradient(180deg, rgba(9, 10, 15, .92), rgba(9, 10, 15, .68));
  backdrop-filter: blur(26px) saturate(145%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
}
body[data-ui-version="3.3.0"] .global-search {
  min-height: 50px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255,255,255,.085);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
body[data-ui-version="3.3.0"] .global-search:focus-within {
  background: rgba(255,255,255,.13);
  border-color: color-mix(in srgb, var(--cinema-accent) 62%, transparent);
  transform: translateY(-1px);
}
body[data-ui-version="3.3.0"] .global-search input { color: var(--cinema-text); font-size: 15px; }
body[data-ui-version="3.3.0"] .global-search input::placeholder { color: rgba(235,237,247,.48); }
body[data-ui-version="3.3.0"] .search-submit { border-radius: 999px; min-height: 36px; padding: 0 16px; }
body[data-ui-version="3.3.0"] .icon-button,
body[data-ui-version="3.3.0"] .mobile-brand {
  border: 0;
  background: rgba(255,255,255,.08);
  color: var(--cinema-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Desktop navigation */
body[data-ui-version="3.3.0"] .sidebar {
  border: 0;
  background: rgba(10, 11, 17, .86);
  backdrop-filter: blur(28px) saturate(135%);
  -webkit-backdrop-filter: blur(28px) saturate(135%);
}
body[data-ui-version="3.3.0"] .brand,
body[data-ui-version="3.3.0"] .nav-item,
body[data-ui-version="3.3.0"] .profile-card { border: 0; }
body[data-ui-version="3.3.0"] .nav-item {
  min-height: 48px;
  border-radius: 15px;
  color: var(--cinema-muted);
}
body[data-ui-version="3.3.0"] .nav-item:hover { background: var(--cinema-soft); color: var(--cinema-text); }
body[data-ui-version="3.3.0"] .nav-item.is-active {
  background: color-mix(in srgb, var(--cinema-accent) 21%, rgba(255,255,255,.06));
  color: var(--cinema-text);
}

/* View title */
body[data-ui-version="3.3.0"] .view-header { margin-bottom: 22px; }
body[data-ui-version="3.3.0"] .view-header h1 {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
}
body[data-ui-version="3.3.0"] .eyebrow,
body[data-ui-version="3.3.0"] .cinema-kicker {
  color: var(--cinema-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body[data-ui-version="3.3.0"] .view-subtitle { color: var(--cinema-muted); max-width: 640px; }

/* source: css/screens/home-spotlight.css */
/* Spotlight and library summary components. Source order is preserved from the validated previous build. */
/* Dynamic spotlight */
body[data-ui-version="3.3.0"] .hero { display: grid; gap: 14px; margin-bottom: 28px; }
body[data-ui-version="3.3.0"] .cinema-spotlight {
  position: relative;
  isolation: isolate;
  min-height: min(52vw, 520px);
  overflow: hidden;
  border-radius: var(--cinema-radius-xl);
  background:
    linear-gradient(90deg, rgba(8,9,13,.98) 0%, rgba(8,9,13,.75) 40%, rgba(8,9,13,.05) 77%),
    radial-gradient(circle at 72% 30%, hsla(var(--spotlight-hue), 75%, 56%, .55), transparent 48%),
    var(--cinema-panel-strong);
  box-shadow: var(--cinema-shadow);
}
body[data-ui-version="3.3.0"] .cinema-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--spotlight-image);
  background-position: 78% 28%;
  background-size: min(44%, 450px) auto;
  background-repeat: no-repeat;
  filter: saturate(1.08) contrast(1.03);
  transform: scale(1.035);
}
body[data-ui-version="3.3.0"] .cinema-spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, transparent 55%, rgba(8,9,13,.75) 100%),
    linear-gradient(90deg, rgba(8,9,13,.98) 0%, rgba(8,9,13,.74) 44%, rgba(8,9,13,.03) 78%);
}
body[data-ui-version="3.3.0"] .cinema-spotlight-art { display: none; }
body[data-ui-version="3.3.0"] .cinema-spotlight-content {
  min-height: inherit;
  width: min(57%, 660px);
  padding: clamp(28px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}
body[data-ui-version="3.3.0"] .cinema-spotlight-content h2 {
  margin: 10px 0 12px;
  font-size: clamp(42px, 6vw, 78px);
  line-height: .92;
  letter-spacing: -.065em;
  font-weight: 900;
  text-wrap: balance;
}
body[data-ui-version="3.3.0"] .cinema-spotlight-content p { margin: 0; color: rgba(255,255,255,.72); font-weight: 600; }
body[data-ui-version="3.3.0"] .cinema-spotlight-actions { display: flex; gap: 10px; margin-top: 24px; }
body[data-ui-version="3.3.0"] .cinema-pill {
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  font-weight: 800;
  transition: transform .18s ease, background .18s ease;
}
body[data-ui-version="3.3.0"] .cinema-pill:active { transform: scale(.97); }
body[data-ui-version="3.3.0"] .cinema-pill.is-primary { color: var(--cinema-accent-text); background: var(--cinema-accent); }
body[data-ui-version="3.3.0"] .cinema-pill.is-glass { color: #fff; background: rgba(255,255,255,.14); backdrop-filter: blur(18px); }
body[data-ui-version="3.3.0"] .cinema-pill svg { width: 18px; height: 18px; }

body[data-ui-version="3.3.0"] .cinema-library-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
body[data-ui-version="3.3.0"] .cinema-library-stat {
  min-height: 88px;
  padding: 16px 18px;
  border: 0;
  border-radius: var(--cinema-radius-lg);
  background: var(--cinema-panel);
  color: var(--cinema-text);
  display: grid;
  grid-template-columns: 40px 1fr 18px;
  gap: 12px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  transition: transform .18s ease, background .18s ease;
}
body[data-ui-version="3.3.0"] .cinema-library-stat:hover { background: rgba(255,255,255,.105); transform: translateY(-2px); }
body[data-ui-version="3.3.0"] .cinema-library-stat > span {
  width: 40px; height: 40px; border-radius: 14px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--cinema-accent) 20%, rgba(255,255,255,.05));
  color: color-mix(in srgb, var(--cinema-accent) 76%, #fff);
}
body[data-ui-version="3.3.0"] .cinema-library-stat > span svg { width: 19px; }
body[data-ui-version="3.3.0"] .cinema-library-stat b { display: block; font-size: 25px; line-height: 1; letter-spacing: -.04em; }
body[data-ui-version="3.3.0"] .cinema-library-stat small { color: var(--cinema-muted); font-size: 12px; }
body[data-ui-version="3.3.0"] .cinema-library-stat .is-chevron { width: 16px; color: var(--cinema-muted); }

/* source: css/components/media-library.css */
/* Filters, poster grid and media cards. Source order is preserved from the validated previous build. */
/* Horizontal filters */
body[data-ui-version="3.3.0"] .quick-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  margin: 0 -4px 20px;
  padding: 2px 4px 8px;
}
body[data-ui-version="3.3.0"] .quick-filters::-webkit-scrollbar { display: none; }
body[data-ui-version="3.3.0"] .chip {
  flex: 0 0 auto;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.075);
  color: var(--cinema-muted);
  padding: 0 15px;
  scroll-snap-align: start;
}
body[data-ui-version="3.3.0"] .chip.is-active {
  background: var(--cinema-text);
  color: #0b0c11;
  box-shadow: none;
}

/* Poster grid */
body[data-ui-version="3.3.0"] .media-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px 14px;
}
body[data-ui-version="3.3.0"] .media-card {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
  color: var(--cinema-text);
  transform: translateZ(0);
}
body[data-ui-version="3.3.0"] .poster-wrap {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
}
body[data-ui-version="3.3.0"] .media-card:hover .poster-wrap,
body[data-ui-version="3.3.0"] .media-card:focus-visible .poster-wrap { transform: translateY(-5px) scale(1.015); box-shadow: 0 24px 48px rgba(0,0,0,.38); }
body[data-ui-version="3.3.0"] .poster-wrap img { width: 100%; height: 100%; object-fit: cover; }
body[data-ui-version="3.3.0"] .badge {
  top: 8px;
  left: 8px;
  min-height: 26px;
  border: 0;
  border-radius: 999px;
  padding: 0 8px;
  background: rgba(8,9,13,.68);
  color: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  font-size: 10px;
}
body[data-ui-version="3.3.0"] .badge.rating { left: auto; right: 8px; color: #fff1a8; }
body[data-ui-version="3.3.0"] .card-status { gap: 5px; }
body[data-ui-version="3.3.0"] .status-dot { border: 0; background: rgba(8,9,13,.68); backdrop-filter: blur(10px); }
body[data-ui-version="3.3.0"] .status-dot.is-on { color: #fff; background: var(--cinema-accent); }
body[data-ui-version="3.3.0"] .media-info { padding: 11px 3px 0; }
body[data-ui-version="3.3.0"] .media-info h3 { margin: 0 0 5px; font-size: 14px; line-height: 1.25; font-weight: 750; letter-spacing: -.02em; }
body[data-ui-version="3.3.0"] .media-info p { margin: 0; color: var(--cinema-muted); font-size: 11px; display: flex; gap: 6px; flex-wrap: wrap; }
body[data-ui-version="3.3.0"] .media-info p span:not(:last-child)::after { content: " ·"; color: rgba(255,255,255,.22); }

/* 3.10.0-r26 — compact persistent state badge for poster cards. */
body[data-ui-version="3.3.0"] .card-state-badge {
  position: absolute;
  z-index: 3;
  top: 42px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(8,9,13,.76);
  color: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  pointer-events: none;
  box-shadow: 0 5px 16px rgba(0,0,0,.22);
}
body[data-ui-version="3.3.0"] .card-state-badge .ui-icon { width: 13px; height: 13px; }
body[data-ui-version="3.3.0"] .card-state-badge small { font-size: 8px; line-height: 1; font-weight: 800; letter-spacing: .01em; }
body[data-ui-version="3.3.0"] .card-state-badge.is-watching {
  color: var(--cinema-accent-text);
  background: var(--cinema-accent);
}
body[data-ui-version="3.3.0"] .card-state-badge.is-watched { background: rgba(30,132,83,.88); }
body[data-ui-version="3.3.0"] .card-state-badge.is-wishlist { background: rgba(78,82,102,.88); }
body[data-ui-version="3.3.0"] .card-state-badge.is-top { color: #fff1a8; background: rgba(67,52,13,.88); }
@media (max-width: 560px) {
  body[data-ui-version="3.3.0"] .card-state-badge { top: 37px; right: 6px; min-width: 22px; height: 22px; padding: 0 5px; }
  body[data-ui-version="3.3.0"] .card-state-badge .ui-icon { width: 12px; height: 12px; }
}

/* source: css/screens/details-foundation.css */
/* Film details foundation. Source order is preserved from the validated previous build. */
/* Full-screen cinematic details */
body[data-ui-version="3.3.0"] .details-dialog {
  width: min(960px, calc(100% - 28px));
  max-height: min(920px, calc(var(--app-viewport-height, 100dvh) - 28px));
  border: 0;
  border-radius: 32px;
  padding: 0;
  overflow: hidden;
  background: #111219;
  color: var(--cinema-text);
  box-shadow: 0 40px 120px rgba(0,0,0,.7);
}
body[data-ui-version="3.3.0"] .details-dialog::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(14px); }
body[data-ui-version="3.3.0"] .details-layout {
  grid-template-columns: minmax(280px, 39%) 1fr;
  max-height: min(920px, calc(var(--app-viewport-height, 100dvh) - 28px));
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: #111219;
}
body[data-ui-version="3.3.0"] .details-poster { position: sticky; top: 0; height: min(920px, calc(var(--app-viewport-height, 100dvh) - 28px)); min-height: 640px; }
body[data-ui-version="3.3.0"] .details-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(17,18,25,.98)); pointer-events: none; }
body[data-ui-version="3.3.0"] .details-body { padding: 44px 38px 52px; overflow: visible; }
body[data-ui-version="3.3.0"] .details-close {
  position: sticky;
  top: 12px;
  z-index: 5;
  float: right;
  border-radius: 999px;
  background: rgba(255,255,255,.11);
  backdrop-filter: blur(16px);
}
body[data-ui-version="3.3.0"] .details-body h2 { margin: 14px 0 14px; font-size: clamp(42px, 5vw, 66px); line-height: .92; letter-spacing: -.06em; font-weight: 900; }
body[data-ui-version="3.3.0"] .details-meta { display: flex; flex-wrap: wrap; gap: 7px; }
body[data-ui-version="3.3.0"] .details-meta span { border: 0; border-radius: 999px; background: rgba(255,255,255,.075); color: rgba(255,255,255,.76); padding: 7px 10px; font-size: 11px; }
body[data-ui-version="3.3.0"] .details-overview { color: rgba(245,246,252,.76); font-size: 15px; line-height: 1.65; }
body[data-ui-version="3.3.0"] .detail-list { border: 0; background: rgba(255,255,255,.045); border-radius: 18px; padding: 16px; }
body[data-ui-version="3.3.0"] .media-action-panel { gap: 12px; margin-top: 14px; }
body[data-ui-version="3.3.0"] .details-overview + .media-action-panel { margin-top: 14px; }
body[data-ui-version="3.3.0"] .media-action-primary { gap: 8px; }
body[data-ui-version="3.3.0"] .media-action {
  min-height: 62px;
  border: 0;
  border-radius: 18px;
  background: rgba(255,255,255,.075);
}
body[data-ui-version="3.3.0"] .media-action.is-primary,
body[data-ui-version="3.3.0"] .media-action.is-accent { background: var(--cinema-accent); color: var(--cinema-accent-text); }
body[data-ui-version="3.3.0"] .media-action.is-active { background: color-mix(in srgb, var(--cinema-accent) 28%, rgba(255,255,255,.08)); }
body[data-ui-version="3.3.0"] .media-action-row,
body[data-ui-version="3.3.0"] .media-action-compact button { border: 0; background: rgba(255,255,255,.065); }
body[data-ui-version="3.3.0"] .trailer-frame { border-radius: 20px; overflow: hidden; }

/* 3.10.0-r16 — ordered details information and navigation flow. */
body[data-ui-version="3.3.0"] .media-detail-navigation {
  gap: 8px;
}
body[data-ui-version="3.3.0"] .media-action-trailer .media-action-row-icon {
  color: var(--cinema-accent);
  background: color-mix(in srgb, var(--cinema-accent) 16%, rgba(255,255,255,.05));
}
body[data-ui-version="3.3.0"] .cast-block + .comment-inline-panel {
  margin-top: 24px;
}
body[data-ui-version="3.3.0"] .media-detail-navigation + .comment-inline-panel {
  margin-top: 24px;
}

/* 3.10.0-r25 — compact TV progress tracking without a permanent episode grid. */
body[data-ui-version="3.3.0"] .series-progress-row.is-active {
  background: color-mix(in srgb, var(--cinema-accent) 14%, rgba(255,255,255,.065));
}
body[data-ui-version="3.3.0"] .series-progress-row.is-active .media-action-row-icon {
  color: var(--cinema-accent);
  background: color-mix(in srgb, var(--cinema-accent) 17%, rgba(255,255,255,.05));
}
body[data-ui-version="3.3.0"] .series-progress-editor {
  display: grid;
  gap: 12px;
  padding: 14px;
  margin-top: -4px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 17px;
  background: rgba(255,255,255,.038);
}
body[data-ui-version="3.3.0"] .series-progress-editor[hidden],
body[data-ui-version="3.3.0"] .series-progress-manual[hidden] { display: none !important; }
body[data-ui-version="3.3.0"] .series-progress-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body[data-ui-version="3.3.0"] .series-progress-editor-head .eyebrow { margin: 0 0 4px; }
body[data-ui-version="3.3.0"] .series-progress-editor-head b { color: var(--cinema-text); font-size: 12px; }
body[data-ui-version="3.3.0"] .series-progress-editor .button.wide { width: 100%; min-height: 46px; }
body[data-ui-version="3.3.0"] .series-progress-editor-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
body[data-ui-version="3.3.0"] .series-progress-editor-actions .button { min-height: 42px; }
body[data-ui-version="3.3.0"] .series-progress-editor-actions .is-danger { color: var(--danger); }
body[data-ui-version="3.3.0"] .series-progress-note { margin: 0; padding: 11px 12px; border-radius: 13px; background: rgba(255,255,255,.05); color: var(--cinema-muted); font-size: 11px; line-height: 1.45; }
body[data-ui-version="3.3.0"] .series-progress-note.is-complete { color: var(--cinema-text); background: color-mix(in srgb, var(--cinema-accent) 12%, rgba(255,255,255,.05)); }
body[data-ui-version="3.3.0"] .series-progress-manual { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; padding-top: 2px; }
body[data-ui-version="3.3.0"] .series-progress-manual label { min-width: 0; display: grid; gap: 6px; }
body[data-ui-version="3.3.0"] .series-progress-manual label > span { color: var(--cinema-muted); font-size: 10px; line-height: 1.25; }
body[data-ui-version="3.3.0"] .series-progress-manual select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: #191a22;
  color: var(--cinema-text);
  font: inherit;
  font-size: 12px;
}
body[data-ui-version="3.3.0"] .series-progress-manual .button { grid-column: 1 / -1; }
@media (max-width: 620px) {
  body[data-ui-version="3.3.0"] .series-progress-editor { padding: 12px; border-radius: 15px; }
  body[data-ui-version="3.3.0"] .series-progress-editor-actions,
  body[data-ui-version="3.3.0"] .series-progress-manual { grid-template-columns: 1fr; }
  body[data-ui-version="3.3.0"] .series-progress-manual .button { grid-column: auto; }
}

/* 3.10.0-r26 — localized TV lifecycle and next-air-date presentation. */
body[data-ui-version="3.3.0"] .series-status-value { display: grid; gap: 3px; }
body[data-ui-version="3.3.0"] .series-status-value b { color: var(--cinema-text); font-size: 13px; }
body[data-ui-version="3.3.0"] .series-status-value small { color: var(--cinema-muted); font-size: 11px; line-height: 1.35; }

/* 3.10.0-r28 — embedded explicit franchise rail inside movie details. */
body[data-ui-version="3.3.0"] .details-related {
  min-width: 0;
  margin-top: 26px;
}
body[data-ui-version="3.3.0"] .details-related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
body[data-ui-version="3.3.0"] .details-related-head h3 {
  margin: 0;
  color: var(--cinema-text);
  font-size: clamp(20px, 3.2vw, 28px);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 850;
}

body[data-ui-version="3.3.0"] .details-related-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}
body[data-ui-version="3.3.0"] .details-related-all {
  flex: 0 0 auto;
  padding: 6px 0 6px 12px;
  border: 0;
  background: transparent;
  color: var(--cinema-accent);
  font-size: 13px;
  font-weight: 850;
}
body[data-ui-version="3.3.0"] .details-related-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(122px, 31%);
  gap: 11px;
  overflow-x: auto;
  overflow-y: hidden;
  margin-right: -10px;
  padding: 2px 10px 9px 0;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
}
body[data-ui-version="3.3.0"] .details-related-track::-webkit-scrollbar { display: none; }
body[data-ui-version="3.3.0"] .details-related-tile {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cinema-text);
  text-align: left;
  scroll-snap-align: start;
}
body[data-ui-version="3.3.0"] .details-related-poster {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 15px;
  background: rgba(255,255,255,.055);
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
}
body[data-ui-version="3.3.0"] .details-related-poster img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .2s ease;
}
body[data-ui-version="3.3.0"] .details-related-tile:active .details-related-poster img { transform: scale(.975); }
body[data-ui-version="3.3.0"] .details-related-poster > i {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.42);
  font-style: normal;
  font-size: 28px;
  font-weight: 900;
}
body[data-ui-version="3.3.0"] .details-related-poster > em {
  position: absolute;
  right: 7px;
  top: 7px;
  z-index: 2;
  min-height: 23px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(8,9,13,.78);
  color: #ffe57b;
  font-size: 9px;
  line-height: 1;
  font-style: normal;
  font-weight: 850;
  backdrop-filter: blur(10px);
}
body[data-ui-version="3.3.0"] .details-related-poster .card-state-badge {
  top: 36px;
  right: 7px;
}
body[data-ui-version="3.3.0"] .details-related-copy {
  display: grid;
  gap: 3px;
  padding: 8px 2px 0;
}
body[data-ui-version="3.3.0"] .details-related-copy b {
  overflow: hidden;
  color: var(--cinema-text);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 760;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
body[data-ui-version="3.3.0"] .details-related-copy small {
  color: var(--cinema-muted);
  font-size: 10px;
  font-weight: 620;
}
body[data-ui-version="3.3.0"] .details-related-loading {
  grid-column: 1 / -1;
  min-width: 220px;
  padding: 22px 0;
  color: var(--cinema-muted);
  font-size: 11px;
}
body[data-ui-version="3.3.0"] .details-close.is-back {
  font-size: 22px;
  font-weight: 700;
}
@media (min-width: 761px) {
  body[data-ui-version="3.3.0"] .details-related-track { grid-auto-columns: minmax(126px, 25%); }
}
@media (max-width: 620px) {
  body[data-ui-version="3.3.0"] .details-related { margin-top: 22px; }
  body[data-ui-version="3.3.0"] .details-related-track { grid-auto-columns: minmax(112px, 34vw); margin-right: -15px; }
  body[data-ui-version="3.3.0"] .details-related-head h3 { font-size: 21px; }
}

/* source: css/screens/club-foundation.css */
/* Cinema Club foundation. Source order is preserved from the validated previous build. */
/* Club as a social media surface */
body[data-ui-version="3.3.0"] .club-grid { gap: 18px; }
body[data-ui-version="3.3.0"] .club-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
body[data-ui-version="3.3.0"] .club-summary-card {
  min-height: 94px;
  padding: 16px;
  border: 0;
  border-radius: 22px;
  background: var(--cinema-panel);
  color: var(--cinema-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}
body[data-ui-version="3.3.0"] .club-summary-card b { font-size: 29px; letter-spacing: -.04em; }
body[data-ui-version="3.3.0"] .club-people-list { display: grid; gap: 10px; }
body[data-ui-version="3.3.0"] .club-person {
  min-height: 96px;
  padding: 13px;
  border: 0;
  border-radius: 24px;
  background: var(--cinema-panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  transition: transform .18s ease, background .18s ease;
}
body[data-ui-version="3.3.0"] .club-person:hover { transform: translateY(-2px); background: rgba(255,255,255,.105); }
body[data-ui-version="3.3.0"] .club-avatar { border: 0; box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
body[data-ui-version="3.3.0"] .club-person-title strong {
  min-width: 52px;
  min-height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cinema-accent) 22%, rgba(255,255,255,.06));
  color: color-mix(in srgb, var(--cinema-accent) 70%, #fff);
}
body[data-ui-version="3.3.0"] .club-person-genres span { border: 0; background: rgba(255,255,255,.07); }
body[data-ui-version="3.3.0"] .club-person-action { border: 0; border-radius: 999px; }
body[data-ui-version="3.3.0"] .club-person-action.is-primary { background: var(--cinema-text); color: #0b0c11; }
body[data-ui-version="3.3.0"] .club-section-nav {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
body[data-ui-version="3.3.0"] .club-section-nav button { border-radius: 12px; }
body[data-ui-version="3.3.0"] .club-section-nav button.is-active {
  background: var(--cinema-text);
  color: #0b0c11;
}
body[data-ui-version="3.3.0"] .club-conversation { border: 0; border-radius: 28px; background: var(--cinema-panel-strong); overflow: hidden; }
body[data-ui-version="3.3.0"] .club-message { border: 0; border-radius: 20px; }
body[data-ui-version="3.3.0"] .club-message.is-me { background: var(--cinema-accent); color: var(--cinema-accent-text); }
body[data-ui-version="3.3.0"] .club-compose { background: rgba(17,18,25,.94); backdrop-filter: blur(20px); }
body[data-ui-version="3.3.0"] .club-compose-field { border: 0; border-radius: 22px; background: rgba(255,255,255,.08); }
body[data-ui-version="3.3.0"] .club-send { border: 0; background: var(--cinema-accent); color: var(--cinema-accent-text); }

/* source: css/components/forms-surfaces.css */
/* Generic controls and surfaces. Source order is preserved from the validated previous build. */
/* Forms, generic buttons and surfaces */
body[data-ui-version="3.3.0"] .button {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  font-weight: 750;
}
body[data-ui-version="3.3.0"] .button.primary { background: var(--cinema-accent); color: var(--cinema-accent-text); }
body[data-ui-version="3.3.0"] .button.ghost { background: rgba(255,255,255,.075); color: var(--cinema-text); }
body[data-ui-version="3.3.0"] .button.danger { background: rgba(255,93,104,.14); color: #ff939b; }
body[data-ui-version="3.3.0"] input,
body[data-ui-version="3.3.0"] textarea,
body[data-ui-version="3.3.0"] select { border-color: transparent; background: rgba(255,255,255,.075); color: var(--cinema-text); }
body[data-ui-version="3.3.0"] .empty-state,
body[data-ui-version="3.3.0"] .club-empty { border: 0; background: var(--cinema-panel); border-radius: 26px; }
body[data-ui-version="3.3.0"] .results-meta { color: var(--cinema-muted); }
body[data-ui-version="3.3.0"] .toast { border-radius: 999px; background: rgba(245,246,252,.94); color: #101116; box-shadow: 0 16px 50px rgba(0,0,0,.32); }

/* source: css/components/interaction-stability.css */
/* Overlay, quick-action and toast stability. */
html.is-overlay-scroll-locked,
html.is-overlay-scroll-locked body { overscroll-behavior: none; }
body[data-ui-version="3.3.0"] [data-carousel-clone] { pointer-events: none !important; }
body[data-ui-version="3.3.0"] .home-hero-slide.is-excluding,
body[data-ui-version="3.3.0"] .media-card.is-dismissing {
  opacity: 0;
  transform: scale(.98);
  transition: opacity .15s ease, transform .15s ease;
}
body[data-ui-version="3.3.0"] .toast.has-action { display: flex; align-items: center; gap: 12px; }
body[data-ui-version="3.3.0"] .toast [data-toast-action] {
  margin-left: auto;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--uw-radius-pill);
  background: rgba(255,255,255,.14);
  color: inherit;
  font-weight: 800;
}
body[data-ui-version="3.3.0"] .rating-dialog::backdrop {
  background: rgba(3,6,11,.54);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* source: css/layout/screen-shell.css */
/* Cross-screen shell. Home keeps its dedicated hero; all other views share one rhythm. */
body[data-ui-version="3.3.0"] .content {
  width: min(100%, 1480px);
  margin-inline: auto;
}
body[data-ui-version="3.3.0"] :is(.view-header, .quick-filters, .results-meta, .breadcrumbs) { width: 100%; }
body[data-ui-version="3.3.0"]:not([data-screen="discover"]) .content {
  background: linear-gradient(180deg, rgba(19,24,34,.34), transparent 360px);
}
body[data-ui-version="3.3.0"]:not([data-screen="discover"]) .view-header {
  min-height: 132px;
  margin: 0 0 18px;
  padding: 22px 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius-xl);
  background:
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--uw-accent) 16%, transparent), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--uw-bg-elevated) 96%, transparent), color-mix(in srgb, var(--uw-bg) 94%, transparent));
  box-shadow: 0 18px 48px rgba(0,0,0,.16);
  overflow: hidden;
}
body[data-ui-version="3.3.0"]:not([data-screen="discover"]) .view-header::before,
body[data-ui-version="3.3.0"]:not([data-screen="discover"]) .view-header::after { content: none !important; }
body[data-ui-version="3.3.0"]:not([data-screen="discover"]) .view-header h1 {
  margin: 4px 0 0;
  max-width: 100%;
  font-family: var(--uw-font-sans);
  font-size: clamp(34px, 4.4vw, 62px);
  font-weight: 850;
  line-height: .94;
  letter-spacing: -.035em;
  color: var(--uw-text);
  text-shadow: none;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
body[data-ui-version="3.3.0"]:not([data-screen="discover"]) .view-header .eyebrow { color: var(--uw-text-muted); }
body[data-ui-version="3.3.0"]:not([data-screen="discover"]) .view-subtitle {
  display: block;
  max-width: 58ch;
  margin-top: 10px;
  color: var(--uw-text-subtle);
  font-size: 13px;
  line-height: 1.45;
}
body[data-ui-version="3.3.0"]:not([data-screen="discover"]) .quick-filters { min-height: 44px; margin: 0 0 14px; padding-block: 2px; }
body[data-ui-version="3.3.0"]:not([data-screen="discover"]) .results-meta { min-height: 24px; margin: 0 0 14px; color: var(--uw-text-muted); }
body[data-ui-version="3.3.0"] :is(.media-grid, .club-grid, .admin-grid, .catalog-grid) {
  align-content: start;
  gap: clamp(12px, 1.6vw, 20px);
}
body[data-ui-version="3.3.0"] :is(.empty-state, .admin-error, .club-empty) {
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius-xl);
  background: color-mix(in srgb, var(--uw-bg-elevated) 92%, transparent);
}
body[data-ui-version="3.3.0"] .empty-state.is-error { min-height: 280px; }
body[data-ui-version="3.3.0"] .empty-state-retry { margin-top: 8px; }
body[data-ui-version="3.3.0"] .data-quality-note {
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--uw-accent) 28%, var(--uw-border));
  border-radius: var(--uw-radius-pill);
  background: color-mix(in srgb, var(--uw-accent) 8%, var(--uw-surface));
  color: var(--uw-text-subtle);
  font-size: 10px;
  line-height: 1.25;
}
@media (max-width: 720px) {
  body[data-ui-version="3.3.0"]:not([data-screen="discover"]) .view-header {
    min-height: 106px;
    margin-bottom: 14px;
    padding: 17px 16px;
    border-radius: 19px;
  }
  body[data-ui-version="3.3.0"]:not([data-screen="discover"]) .view-header h1 { font-size: clamp(30px, 10vw, 44px); }
  body[data-ui-version="3.3.0"]:not([data-screen="discover"]) .view-subtitle { margin-top: 7px; font-size: 12px; }
  body[data-ui-version="3.3.0"]:not([data-screen="discover"]) :is(.quick-filters, .results-meta) { margin-bottom: 11px; }
}

/* source: css/responsive/mobile-foundation.css */
/* Mobile and tablet adaptations. Source order is preserved from the validated previous build. */
/* Mobile: content-first, one-handed */
@media (max-width: 760px) {
  body[data-ui-version="3.3.0"] .topbar {
    min-height: 64px;
    padding: 8px 10px;
    grid-template-columns: 38px minmax(0, 1fr) 40px;
    background: rgba(9,10,15,.78);
  }
  body[data-ui-version="3.3.0"] .global-search { min-height: 44px; }
  body[data-ui-version="3.3.0"] .search-submit { display: none; }
  body[data-ui-version="3.3.0"] .content { padding: 18px 12px calc(82px + env(safe-area-inset-bottom)); }
  body[data-ui-version="3.3.0"] .view-header { margin-bottom: 15px; }
  body[data-ui-version="3.3.0"] .view-header h1 { font-size: 38px; }
  body[data-ui-version="3.3.0"] .view-subtitle { display: none; }
  body[data-ui-version="3.3.0"] .hero { margin: 0 -4px 22px; gap: 10px; }
  body[data-ui-version="3.3.0"] .cinema-spotlight {
    min-height: 420px;
    border-radius: 28px;
    background: #11131b;
  }
  body[data-ui-version="3.3.0"] .cinema-spotlight::before {
    background-position: center top;
    background-size: cover;
    filter: saturate(1.08);
  }
  body[data-ui-version="3.3.0"] .cinema-spotlight::after {
    background: linear-gradient(180deg, rgba(8,9,13,.04) 20%, rgba(8,9,13,.3) 48%, rgba(8,9,13,.98) 83%);
  }
  body[data-ui-version="3.3.0"] .cinema-spotlight-content {
    width: 100%;
    min-height: 420px;
    padding: 22px;
    justify-content: flex-end;
  }
  body[data-ui-version="3.3.0"] .cinema-spotlight-content h2 { max-width: 92%; font-size: 43px; }
  body[data-ui-version="3.3.0"] .cinema-spotlight-actions { width: 100%; }
  body[data-ui-version="3.3.0"] .cinema-pill { min-height: 46px; padding: 0 16px; }
  body[data-ui-version="3.3.0"] .cinema-pill.is-primary { flex: 1; }
  body[data-ui-version="3.3.0"] .cinema-pill span { white-space: nowrap; }
  body[data-ui-version="3.3.0"] .cinema-library-strip { gap: 7px; }
  body[data-ui-version="3.3.0"] .cinema-library-stat {
    min-height: 76px;
    padding: 12px;
    grid-template-columns: 34px 1fr;
    gap: 9px;
    border-radius: 19px;
  }
  body[data-ui-version="3.3.0"] .cinema-library-stat > span { width: 34px; height: 34px; border-radius: 12px; }
  body[data-ui-version="3.3.0"] .cinema-library-stat b { font-size: 22px; }
  body[data-ui-version="3.3.0"] .cinema-library-stat small { font-size: 10px; }
  body[data-ui-version="3.3.0"] .cinema-library-stat > .is-chevron { display: none; }
  body[data-ui-version="3.3.0"] .quick-filters { margin-right: -12px; padding-right: 12px; }
  body[data-ui-version="3.3.0"] .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; }
  body[data-ui-version="3.3.0"] .poster-wrap { border-radius: 16px; }
  body[data-ui-version="3.3.0"] .media-info h3 { font-size: 13px; }
  body[data-ui-version="3.3.0"] .bottom-nav {
    left: 10px;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    height: 62px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    grid-template-columns: repeat(4, minmax(0,1fr));
    background: rgba(20,21,29,.86);
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    box-shadow: 0 18px 50px rgba(0,0,0,.4);
  }
  body[data-ui-version="3.3.0"] .bottom-nav button { border-radius: 17px; color: var(--cinema-muted); }
  body[data-ui-version="3.3.0"] .bottom-nav button.is-active { background: rgba(255,255,255,.1); color: var(--cinema-text); }
  body[data-ui-version="3.3.0"] .bottom-nav button span { font-size: 18px; }
  body[data-ui-version="3.3.0"] .bottom-nav button small { font-size: 9px; }

  body[data-ui-version="3.3.0"] .details-dialog { width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  body[data-ui-version="3.3.0"] .details-layout { display: block; max-height: 100%; background: #111219; }
  body[data-ui-version="3.3.0"] .details-poster { position: relative; height: 68vh; min-height: 480px; }
  body[data-ui-version="3.3.0"] .details-poster::after { background: linear-gradient(180deg, transparent 46%, #111219 98%); }
  body[data-ui-version="3.3.0"] .details-body { margin-top: -88px; padding: 20px 16px calc(36px + env(safe-area-inset-bottom)); background: transparent; }
  body[data-ui-version="3.3.0"] .details-close { top: 8px; margin-bottom: 20px; }
  body[data-ui-version="3.3.0"] .details-body h2 { clear: both; padding-top: 8px; font-size: 45px; }
  body[data-ui-version="3.3.0"] .media-action-primary.is-two { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body[data-ui-version="3.3.0"] .media-action-primary.is-three { grid-template-columns: repeat(3, minmax(0,1fr)); }
  body[data-ui-version="3.3.0"] .media-action { min-height: 70px; padding: 10px 8px; flex-direction: column; text-align: center; }
  body[data-ui-version="3.3.0"] .media-action span small { display: none; }
  body[data-ui-version="3.3.0"] .media-action svg { width: 20px; height: 20px; }
  body[data-ui-version="3.3.0"] .media-action-compact { grid-template-columns: repeat(3, minmax(0,1fr)); }

  body[data-ui-version="3.3.0"] .club-summary { gap: 7px; }
  body[data-ui-version="3.3.0"] .club-summary-card { min-height: 82px; padding: 12px; border-radius: 18px; }
  body[data-ui-version="3.3.0"] .club-summary-card span { font-size: 10px; }
  body[data-ui-version="3.3.0"] .club-summary-card b { font-size: 25px; }
  body[data-ui-version="3.3.0"] .club-person { grid-template-columns: 56px 1fr 14px; padding: 12px; border-radius: 21px; }
  body[data-ui-version="3.3.0"] .club-person .club-avatar { width: 56px; height: 56px; }
  body[data-ui-version="3.3.0"] .club-person-bio { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
}

@media (min-width: 761px) and (max-width: 1120px) {
  body[data-ui-version="3.3.0"] .media-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  body[data-ui-version="3.3.0"] .cinema-spotlight-content { width: 65%; }
}

@media (prefers-reduced-motion: no-preference) {
  body[data-ui-version="3.3.0"] .cinema-spotlight { animation: cinemaReveal .5s cubic-bezier(.2,.8,.2,1) both; }
  body[data-ui-version="3.3.0"] .media-card { animation: cinemaCardIn .35s ease both; }
  body[data-ui-version="3.3.0"] .media-card:nth-child(2n) { animation-delay: .025s; }
  body[data-ui-version="3.3.0"] .media-card:nth-child(3n) { animation-delay: .05s; }
}
@keyframes cinemaReveal { from { opacity: 0; transform: translateY(12px) scale(.992); } to { opacity: 1; transform: none; } }
@keyframes cinemaCardIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
body[data-ui-version="3.3.0"] .nav-glyph svg,
body[data-ui-version="3.3.0"] .bottom-nav button span svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* One mobile topbar/account geometry across every screen. */
@media (max-width: 1023px) {
  body[data-ui-version="3.3.0"] .topbar { grid-template-columns: 38px minmax(0, 1fr) 42px 42px !important; }
  body[data-ui-version="3.3.0"] .notification-center-button { grid-column: 3 !important; grid-row: 1 !important; }
  body[data-ui-version="3.3.0"] .mobile-account {
    grid-column: 4 !important;
    grid-row: 1 !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 5px !important;
    display: grid !important;
    grid-template-columns: 32px !important;
    place-items: center !important;
    border-radius: var(--uw-radius-pill) !important;
  }
  body[data-ui-version="3.3.0"] .mobile-account .avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border: 0 !important;
    font-size: 12px !important;
    box-shadow: none !important;
  }
  body[data-ui-version="3.3.0"] :is(.mobile-account-copy, .mobile-account-arrow) { display: none !important; }
  body[data-ui-version="3.3.0"] #filterToggle { display: none !important; }
}

/* source: css/components/stability-contracts.css */
/* Navigation, scrolling and account stability contracts. Source order is preserved from the validated previous build. */
/* 3.0.17 — navigation and scroll restoration stability */
html.has-details-dialog,
html.has-details-dialog body {
  overscroll-behavior: none;
}

body[data-ui-version="3.3.0"] .cinema-spotlight::before {
  background-image: none;
  transform: none;
}
body[data-ui-version="3.3.0"] .cinema-spotlight-art {
  position: absolute;
  inset: 0;
  z-index: -3;
  display: block;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 24%, hsla(var(--spotlight-hue), 74%, 55%, .42), transparent 52%),
    #11131b;
}
body[data-ui-version="3.3.0"] .cinema-spotlight-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,9,13,.98) 0%, rgba(8,9,13,.72) 44%, rgba(8,9,13,.08) 82%);
  pointer-events: none;
}
body[data-ui-version="3.3.0"] .cinema-spotlight-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 70% 24%;
  filter: saturate(1.08) contrast(1.04);
}
body[data-ui-version="3.3.0"] .cinema-spotlight.is-art-missing .cinema-spotlight-art {
  background:
    radial-gradient(circle at 72% 25%, hsla(var(--spotlight-hue), 76%, 56%, .46), transparent 48%),
    linear-gradient(145deg, #171a25, #0b0c11 70%);
}

body[data-ui-version="3.3.0"] .details-dialog {
  overscroll-behavior: none;
  touch-action: pan-y;
}
body[data-ui-version="3.3.0"] .details-dialog #detailsContent {
  min-height: 0;
}
body[data-ui-version="3.3.0"] .details-layout {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scroll-behavior: auto;
}
body[data-ui-version="3.3.0"] .details-layout > * {
  min-width: 0;
}

/* The club is a constrained responsive layout, not a collection of inherited blocks. */
body[data-ui-version="3.3.0"] .club-grid {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 16px;
}
body[data-ui-version="3.3.0"] .club-grid > *,
body[data-ui-version="3.3.0"] .club-section,
body[data-ui-version="3.3.0"] .club-section-head,
body[data-ui-version="3.3.0"] .club-people-list,
body[data-ui-version="3.3.0"] .club-chat-list,
body[data-ui-version="3.3.0"] .club-profile-view,
body[data-ui-version="3.3.0"] .club-profile-form,
body[data-ui-version="3.3.0"] .club-conversation {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
body[data-ui-version="3.3.0"] .club-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}
body[data-ui-version="3.3.0"] .club-section-head > div {
  min-width: 0;
}
body[data-ui-version="3.3.0"] .club-section-head h2 {
  max-width: 100%;
  overflow-wrap: anywhere;
}
body[data-ui-version="3.3.0"] .club-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  gap: 8px;
  margin: 0;
}
body[data-ui-version="3.3.0"] .club-summary-card {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  min-height: 82px;
  padding: 13px 30px 13px 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  gap: 5px 8px;
  align-items: end;
  border: 0;
  border-radius: 19px;
  background: var(--cinema-panel);
  color: var(--cinema-text);
  text-align: left;
  overflow: hidden;
}
body[data-ui-version="3.3.0"] .club-summary-card span {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  color: var(--cinema-muted);
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-ui-version="3.3.0"] .club-summary-card b {
  min-width: 0;
  font: 800 25px/1 system-ui, sans-serif;
  letter-spacing: -.04em;
}
body[data-ui-version="3.3.0"] .club-summary-card .is-chevron {
  position: absolute;
  right: 11px;
  top: 50%;
  width: 15px;
  transform: translateY(-50%);
  color: var(--cinema-muted);
}
body[data-ui-version="3.3.0"] .club-person {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 18px;
  align-items: start;
  gap: 12px;
  padding: 13px;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: var(--cinema-panel);
}
body[data-ui-version="3.3.0"] .club-person.is-compact {
  grid-template-columns: 46px minmax(0, 1fr) 16px;
  gap: 10px;
  padding: 11px;
}
body[data-ui-version="3.3.0"] .club-person .club-avatar,
body[data-ui-version="3.3.0"] .club-person.is-compact .club-avatar {
  width: 50px;
  height: 50px;
  min-width: 50px;
  overflow: hidden;
  border-radius: 50%;
}
body[data-ui-version="3.3.0"] .club-person.is-compact .club-avatar {
  width: 46px;
  height: 46px;
  min-width: 46px;
}
body[data-ui-version="3.3.0"] .club-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
body[data-ui-version="3.3.0"] .club-person-main {
  min-width: 0;
  display: grid;
  gap: 7px;
}
body[data-ui-version="3.3.0"] .club-person-title {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}
body[data-ui-version="3.3.0"] .club-person-title > div {
  min-width: 0;
}
body[data-ui-version="3.3.0"] .club-person-title h3 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-ui-version="3.3.0"] .club-person-title small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--cinema-muted);
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-ui-version="3.3.0"] .club-person-title strong {
  min-width: 48px;
  min-height: 30px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
}
body[data-ui-version="3.3.0"] .club-person-bio {
  display: -webkit-box;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--cinema-muted);
  font-size: 12px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
body[data-ui-version="3.3.0"] .club-person-genres {
  display: flex;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}
body[data-ui-version="3.3.0"] .club-person-genres span {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 42%;
  padding: 4px 7px;
  overflow: hidden;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-ui-version="3.3.0"] .club-person-footer {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
body[data-ui-version="3.3.0"] .club-person-footer > span:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
body[data-ui-version="3.3.0"] .club-person-footer b,
body[data-ui-version="3.3.0"] .club-person-footer small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-ui-version="3.3.0"] .club-person-footer b {
  font-size: 11px;
  line-height: 1.2;
}
body[data-ui-version="3.3.0"] .club-person-footer small {
  color: var(--cinema-muted);
  font-size: 10px;
  line-height: 1.2;
}
body[data-ui-version="3.3.0"] .club-person-action {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 999px;
  white-space: nowrap;
}
body[data-ui-version="3.3.0"] .club-person-chevron {
  align-self: center;
  width: 16px;
  height: 16px;
  color: var(--cinema-muted);
}
body[data-ui-version="3.3.0"] .club-section-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  gap: 5px;
  margin: 0 0 2px;
  padding: 5px;
  overflow: hidden;
}
body[data-ui-version="3.3.0"] .club-section-nav.is-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body[data-ui-version="3.3.0"] .club-section-nav button {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--cinema-muted);
  font: 750 12px/1.15 Inter, ui-sans-serif, system-ui, sans-serif;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-version="3.3.0"] .club-section-nav button span {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
}
body[data-ui-version="3.3.0"] .club-request,
body[data-ui-version="3.3.0"] .club-chat-row,
body[data-ui-version="3.3.0"] .club-activity-item {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

@media (max-width: 760px) {
  body[data-ui-version="3.3.0"] .cinema-spotlight-art img {
    object-position: center 18%;
  }
  body[data-ui-version="3.3.0"] .cinema-spotlight-art::after {
    background: linear-gradient(180deg, rgba(8,9,13,.02) 14%, rgba(8,9,13,.30) 48%, rgba(8,9,13,.98) 84%);
  }
  body[data-ui-version="3.3.0"] .details-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--app-viewport-height, 100dvh);
    max-width: none;
    max-height: var(--app-viewport-height, 100dvh);
    margin: 0;
    border-radius: 0;
    overflow: hidden;
  }
  body[data-ui-version="3.3.0"] .details-dialog #detailsContent {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  body[data-ui-version="3.3.0"] .details-layout {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  body[data-ui-version="3.3.0"] .details-poster {
    position: relative;
    top: auto;
    height: min(68dvh, 660px);
    min-height: 430px;
  }
  body[data-ui-version="3.3.0"] .details-body {
    position: relative;
    min-height: 0;
    overflow: visible;
  }
  body[data-ui-version="3.3.0"] .club-grid {
    gap: 14px;
  }
  body[data-ui-version="3.3.0"] .club-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  body[data-ui-version="3.3.0"] .club-summary-card {
    min-height: 74px;
    padding: 10px 23px 10px 10px;
    border-radius: 16px;
  }
  body[data-ui-version="3.3.0"] .club-summary-card span {
    font-size: 9px;
  }
  body[data-ui-version="3.3.0"] .club-summary-card b {
    font-size: 21px;
  }
  body[data-ui-version="3.3.0"] .club-summary-card .is-chevron {
    right: 8px;
    width: 13px;
  }
  body[data-ui-version="3.3.0"] .club-person,
  body[data-ui-version="3.3.0"] .club-person.is-compact {
    grid-template-columns: 46px minmax(0, 1fr) 15px;
    gap: 10px;
    padding: 11px;
    border-radius: 19px;
  }
  body[data-ui-version="3.3.0"] .club-person .club-avatar,
  body[data-ui-version="3.3.0"] .club-person.is-compact .club-avatar {
    width: 46px;
    height: 46px;
    min-width: 46px;
  }
  body[data-ui-version="3.3.0"] .club-person-title h3 {
    font-size: 15px;
  }
  body[data-ui-version="3.3.0"] .club-person-title strong {
    min-width: 44px;
    min-height: 28px;
    font-size: 12px;
  }
  body[data-ui-version="3.3.0"] .club-person-footer {
    grid-template-columns: minmax(0, 1fr) 34px;
  }
  body[data-ui-version="3.3.0"] .club-person-action {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
  }
  body[data-ui-version="3.3.0"] .club-person-action span {
    display: none;
  }
  body[data-ui-version="3.3.0"] .club-person-action svg {
    width: 16px;
    height: 16px;
  }
  body[data-ui-version="3.3.0"] .club-section-nav button {
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  body[data-ui-version="3.3.0"] .club-summary-card span {
    max-width: 62px;
    white-space: normal;
  }
  body[data-ui-version="3.3.0"] .club-person {
    grid-template-columns: 42px minmax(0, 1fr) 14px;
    gap: 8px;
  }
  body[data-ui-version="3.3.0"] .club-person .club-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }
  body[data-ui-version="3.3.0"] .club-person-genres span:nth-child(n/**/+3) {
    display: none;
  }
}

/* 3.0.7 — actionable recommendations and actor filmography */
body[data-ui-version="3.3.0"] .cinema-spotlight[data-spotlight-open] {
  cursor: pointer;
  outline: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body[data-ui-version="3.3.0"] .cinema-spotlight[data-spotlight-open]:hover {
  border-color: color-mix(in srgb, var(--cinema-accent) 42%, var(--cinema-border));
}
body[data-ui-version="3.3.0"] .cinema-spotlight[data-spotlight-open]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cinema-accent) 32%, transparent), var(--cinema-shadow);
}
body[data-ui-version="3.3.0"] .cinema-spotlight-reason {
  display: block;
  max-width: 34rem;
  margin-top: 8px;
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}
body[data-ui-version="3.3.0"] .cinema-spotlight-actions button {
  position: relative;
  z-index: 2;
}

body[data-ui-version="3.3.0"] .cast-block ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body[data-ui-version="3.3.0"] .cast-block li {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--cinema-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--cinema-surface) 90%, transparent);
}
body[data-ui-version="3.3.0"] .cast-person {
  width: 100%;
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
}
body[data-ui-version="3.3.0"] button.cast-person {
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
body[data-ui-version="3.3.0"] button.cast-person:hover {
  background: color-mix(in srgb, var(--cinema-accent) 9%, transparent);
}
body[data-ui-version="3.3.0"] button.cast-person:active {
  transform: scale(.985);
}
body[data-ui-version="3.3.0"] .cast-person > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}
body[data-ui-version="3.3.0"] .cast-person b,
body[data-ui-version="3.3.0"] .cast-person small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-ui-version="3.3.0"] .cast-person b {
  font-size: 13px;
  line-height: 1.2;
}
body[data-ui-version="3.3.0"] .cast-person small {
  color: var(--cinema-muted);
  font-size: 11px;
  line-height: 1.2;
}
body[data-ui-version="3.3.0"] .cast-person-chevron {
  width: 17px;
  height: 17px;
  color: var(--cinema-muted);
}
body[data-ui-version="3.3.0"] .cast-person.is-static {
  grid-template-columns: minmax(0, 1fr);
}

body[data-ui-version="3.3.0"] .details-body h2 {
  max-width: 100%;
  line-height: .98;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
body[data-ui-version="3.3.0"] .club-section-head h2,
body[data-ui-version="3.3.0"] .club-person-title h3,
body[data-ui-version="3.3.0"] .cinema-spotlight-content h2 {
  line-height: 1.02;
}

@media (max-width: 760px) {
  body[data-ui-version="3.3.0"] .cast-block ul {
    grid-template-columns: 1fr;
  }
  body[data-ui-version="3.3.0"] .details-body {
    margin-top: -54px;
  }
  body[data-ui-version="3.3.0"] .details-body h2 {
    font-size: clamp(34px, 11vw, 46px);
    line-height: 1;
    letter-spacing: -.04em;
  }
  body[data-ui-version="3.3.0"] .cinema-spotlight-reason {
    max-width: 92%;
    font-size: 11px;
  }
}


/* 3.0.7 — single mobile card scroller, strict Club flow and compact shuffle */
body[data-ui-version="3.3.0"] .cinema-pill.is-icon-only {
  width: 48px;
  min-width: 48px;
  flex: 0 0 48px;
  padding: 0;
}
body[data-ui-version="3.3.0"] .cinema-pill.is-icon-only svg {
  width: 21px;
  height: 21px;
}

/* A flex column prevents inherited grid tracks from placing Club sections side by side. */
body[data-ui-version="3.3.0"] .media-grid.club-grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  grid-template-columns: none;
  grid-auto-flow: row;
  width: 100%;
  min-width: 0;
  gap: 16px;
}
body[data-ui-version="3.3.0"] .media-grid.club-grid > * {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
body[data-ui-version="3.3.0"] .club-summary,
body[data-ui-version="3.3.0"] .club-section,
body[data-ui-version="3.3.0"] .club-section-head,
body[data-ui-version="3.3.0"] .club-people-list,
body[data-ui-version="3.3.0"] .club-chat-list,
body[data-ui-version="3.3.0"] .club-activity-list,
body[data-ui-version="3.3.0"] .club-empty {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
body[data-ui-version="3.3.0"] .club-section-head {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

@media (max-width: 760px) {
  /* Telegram WebView is more reliable with one scroll owner directly under dialog. */
  body[data-ui-version="3.3.0"] .details-dialog {
    overflow: hidden;
    touch-action: pan-y;
  }
  body[data-ui-version="3.3.0"] .details-dialog #detailsContent {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  body[data-ui-version="3.3.0"] .details-dialog .details-layout {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100%;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    touch-action: pan-y;
  }
  body[data-ui-version="3.3.0"] .details-poster {
    height: min(62dvh, 600px);
    min-height: 390px;
  }
  body[data-ui-version="3.3.0"] .details-body {
    margin-top: -48px;
  }
  body[data-ui-version="3.3.0"] .cinema-spotlight-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: center;
  }
  body[data-ui-version="3.3.0"] .cinema-pill.is-primary {
    min-width: 0;
  }
  body[data-ui-version="3.3.0"] .cinema-pill.is-primary span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-ui-version="3.3.0"] .media-grid.club-grid {
    gap: 14px;
  }
}

@media (max-width: 390px) {
  body[data-ui-version="3.3.0"] .club-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  body[data-ui-version="3.3.0"] .club-summary-card {
    min-height: 72px;
    padding: 9px 20px 9px 9px;
  }
  body[data-ui-version="3.3.0"] .club-summary-card span {
    max-width: none;
    font-size: 8px;
    white-space: normal;
  }
  body[data-ui-version="3.3.0"] .club-summary-card b {
    font-size: 20px;
  }
}

/* 3.0.7 — native dialog scrolling and a quieter Kиноклуб */
body[data-ui-version="3.3.0"] .club-alert-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
body[data-ui-version="3.3.0"] .club-alert-chip {
  min-width: 0;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.075);
  color: var(--cinema-text);
  font-weight: 700;
}
body[data-ui-version="3.3.0"] .club-alert-chip svg {
  width: 17px;
  height: 17px;
}
body[data-ui-version="3.3.0"] .club-alert-chip b {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--cinema-accent);
  color: var(--cinema-accent-text);
  font-size: 11px;
  line-height: 1;
}
body[data-ui-version="3.3.0"] .club-recommendations-head {
  margin-top: 2px;
}
body[data-ui-version="3.3.0"] .club-person {
  min-height: 0;
}
body[data-ui-version="3.3.0"] .club-person-main {
  align-content: start;
}
body[data-ui-version="3.3.0"] .club-person-footer > span:empty {
  display: block;
}
body[data-ui-version="3.3.0"] .club-person-footer small {
  display: none;
}
body[data-ui-version="3.3.0"] .club-section {
  margin: 0;
}
body[data-ui-version="3.3.0"] .club-section-nav {
  position: static;
  top: auto;
  margin: 0;
}
body[data-ui-version="3.3.0"] .club-section-nav button b {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: var(--cinema-text);
  font-size: 10px;
  line-height: 1;
}
body[data-ui-version="3.3.0"] .club-section-nav button.is-active b {
  background: rgba(11,12,17,.12);
  color: #0b0c11;
}
body[data-ui-version="3.3.0"] .club-request-group {
  display: grid;
  gap: 9px;
}
body[data-ui-version="3.3.0"] .club-request-group + .club-request-group {
  margin-top: 14px;
}
body[data-ui-version="3.3.0"] .club-request-group > h3 {
  margin: 0;
  color: var(--cinema-muted);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  /* The top-layer dialog is the only vertical scroll owner. This avoids
     nested overflow bugs in Telegram Android/iOS WebView. */
  body[data-ui-version="3.3.0"] .details-dialog {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-width: none;
  }
  body[data-ui-version="3.3.0"] .details-dialog::-webkit-scrollbar {
    display: none;
  }
  body[data-ui-version="3.3.0"] .details-dialog #detailsContent {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow: visible !important;
    touch-action: auto;
  }
  body[data-ui-version="3.3.0"] .details-dialog .details-layout {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100%;
    max-height: none;
    overflow: visible !important;
    touch-action: auto;
  }
  body[data-ui-version="3.3.0"] .details-poster {
    height: min(60dvh, 570px);
    min-height: 370px;
  }
  body[data-ui-version="3.3.0"] .details-body {
    margin-top: -38px;
    padding-inline: 18px;
  }
  body[data-ui-version="3.3.0"] .content {
    padding-inline: 14px;
  }
  body[data-ui-version="3.3.0"] .view-header {
    margin-bottom: 14px;
  }
  body[data-ui-version="3.3.0"] .view-header h1 {
    font-size: 36px;
    line-height: 1;
  }
  body[data-ui-version="3.3.0"] .media-grid.club-grid {
    gap: 16px;
  }
  body[data-ui-version="3.3.0"] .club-alert-strip {
    gap: 7px;
  }
  body[data-ui-version="3.3.0"] .club-alert-chip {
    min-height: 38px;
    padding-inline: 12px;
    font-size: 12px;
  }
  body[data-ui-version="3.3.0"] .club-section-head {
    align-items: flex-start;
  }
  body[data-ui-version="3.3.0"] .club-section-head h2 {
    font-size: 27px;
    line-height: 1.05;
  }
  body[data-ui-version="3.3.0"] .club-person,
  body[data-ui-version="3.3.0"] .club-person.is-compact {
    grid-template-columns: 44px minmax(0, 1fr) 14px;
    gap: 10px;
    padding: 11px;
  }
  body[data-ui-version="3.3.0"] .club-person .club-avatar,
  body[data-ui-version="3.3.0"] .club-person.is-compact .club-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
  body[data-ui-version="3.3.0"] .club-person-main {
    gap: 6px;
  }
  body[data-ui-version="3.3.0"] .club-person-title h3 {
    font-size: 15px;
    line-height: 1.2;
  }
  body[data-ui-version="3.3.0"] .club-person-title strong {
    min-width: 43px;
    min-height: 27px;
    font-size: 11px;
  }
  body[data-ui-version="3.3.0"] .club-person-bio {
    font-size: 11px;
  }
  body[data-ui-version="3.3.0"] .club-person-footer {
    min-height: 34px;
  }
  body[data-ui-version="3.3.0"] .club-section-nav {
    gap: 3px;
    padding: 3px;
  }
  body[data-ui-version="3.3.0"] .club-section-nav button {
    min-height: 39px;
    gap: 5px;
    padding-inline: 7px;
    font-size: 11px;
  }
}

/* ========================================================================
   Unwatchd 3.0.7 — stability contract
   One mobile navigation grid, one details scroller and explicit account
   component geometry. This block intentionally wins over legacy fallbacks.
   ======================================================================== */
body[data-ui-version="3.3.0"] .account-card {
  display: grid;
  gap: 12px;
  min-width: 0;
}

body[data-ui-version="3.3.0"] .account-settings-panel {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--cinema-border);
  border-radius: 20px;
  background: rgba(255, 255, 255, .055);
}

body[data-ui-version="3.3.0"] .account-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 12px;
}

body[data-ui-version="3.3.0"] .account-settings-head > div,
body[data-ui-version="3.3.0"] .account-status-row > span,
body[data-ui-version="3.3.0"] .account-renewal-row > span {
  min-width: 0;
}

body[data-ui-version="3.3.0"] .account-settings-head .eyebrow {
  margin: 0;
}

body[data-ui-version="3.3.0"] .account-settings-head h3 {
  margin: 4px 0 0;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

body[data-ui-version="3.3.0"] .account-status-pill,
body[data-ui-version="3.3.0"] .account-referral-badge {
  flex: 0 0 auto;
  min-width: 42px;
  padding: 6px 9px;
  border: 1px solid var(--cinema-border);
  border-radius: 999px;
  color: var(--cinema-muted);
  background: rgba(255,255,255,.045);
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

body[data-ui-version="3.3.0"] .account-status-pill:empty {
  display: none;
}

body[data-ui-version="3.3.0"] .account-status-pill.is-active,
body[data-ui-version="3.3.0"] .account-referral-badge {
  border-color: color-mix(in srgb, var(--cinema-accent) 46%, var(--cinema-border));
  background: color-mix(in srgb, var(--cinema-accent) 17%, transparent);
  color: color-mix(in srgb, var(--cinema-accent) 74%, white);
}

body[data-ui-version="3.3.0"] .account-status-row,
body[data-ui-version="3.3.0"] .account-renewal-row {
  min-height: 58px;
  padding: 11px 14px;
  border-top: 1px solid var(--cinema-border);
}

body[data-ui-version="3.3.0"] .account-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-ui-version="3.3.0"] .account-status-row > span {
  display: grid;
  gap: 4px;
}

body[data-ui-version="3.3.0"] .account-status-row b,
body[data-ui-version="3.3.0"] .account-renewal-row b {
  display: block;
  font-size: 14px;
  line-height: 1.25;
}

body[data-ui-version="3.3.0"] .account-status-row small,
body[data-ui-version="3.3.0"] .account-renewal-row small,
body[data-ui-version="3.3.0"] .account-panel-note {
  display: block;
  color: var(--cinema-muted);
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

body[data-ui-version="3.3.0"] .account-status-row em {
  flex: 0 0 auto;
  color: var(--cinema-accent);
  font-size: 12px;
  line-height: 1;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

body[data-ui-version="3.3.0"] .account-panel-note {
  margin: 0;
  padding: 0 14px 13px;
}

body[data-ui-version="3.3.0"] .account-referral-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 14px 12px;
  overflow: hidden;
  border: 1px solid var(--cinema-border);
  border-radius: 14px;
  background: var(--cinema-border);
}

body[data-ui-version="3.3.0"] .account-referral-metrics > span {
  min-width: 0;
  min-height: 72px;
  padding: 10px 6px;
  display: grid;
  align-content: center;
  gap: 5px;
  background: rgba(18, 19, 27, .98);
  text-align: center;
}

body[data-ui-version="3.3.0"] .account-referral-metrics b {
  font-size: 18px;
  line-height: 1;
}

body[data-ui-version="3.3.0"] .account-referral-metrics small {
  min-width: 0;
  color: var(--cinema-muted);
  font-size: 9px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body[data-ui-version="3.3.0"] .account-referral-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px 14px;
}

body[data-ui-version="3.3.0"] .account-referral-actions .button {
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
}

body[data-ui-version="3.3.0"] .account-referral-actions .button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-ui-version="3.3.0"] .account-referral-actions .ui-icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

body[data-ui-version="3.3.0"] .account-panel-placeholder {
  height: 112px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.055), transparent);
  background-size: 220% 100%;
  animation: account-panel-loading 1.2s linear infinite;
}

/* Real backdrops can be bright. Keep the copy readable across the full card. */
body[data-ui-version="3.3.0"] .cinema-spotlight-art::after {
  background:
    linear-gradient(180deg, rgba(7,8,12,.08) 0%, rgba(7,8,12,.18) 52%, rgba(7,8,12,.72) 100%),
    linear-gradient(90deg, rgba(7,8,12,.99) 0%, rgba(7,8,12,.86) 42%, rgba(7,8,12,.32) 72%, rgba(7,8,12,.18) 100%);
}

body[data-ui-version="3.3.0"] .cinema-spotlight-content {
  text-shadow: 0 2px 22px rgba(0,0,0,.42);
}

/* Compatibility is supporting information, never the visual headline. */
body[data-ui-version="3.3.0"] .club-person-title strong,
body[data-ui-version="3.3.0"] .club-person .compatibility b {
  min-width: 42px;
  min-height: 26px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.075);
  color: color-mix(in srgb, var(--cinema-accent) 72%, white);
  font: 800 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0;
}

@media (max-width: 1023px) {
  body[data-ui-version="3.3.0"] .bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: column;
    justify-content: stretch;
    overflow: hidden;
  }

  body[data-ui-version="3.3.0"] .bottom-nav > button {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  /* The native dialog is the single vertical scroll owner on mobile. */
  body[data-ui-version="3.3.0"] .details-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--app-viewport-height, 100dvh);
    max-width: none;
    max-height: var(--app-viewport-height, 100dvh);
    margin: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 0;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-width: none;
  }

  body[data-ui-version="3.3.0"] .details-dialog::-webkit-scrollbar {
    display: none;
  }

  body[data-ui-version="3.3.0"] .details-dialog #detailsContent,
  body[data-ui-version="3.3.0"] .details-dialog .details-layout {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100%;
    max-height: none;
    overflow: visible !important;
    touch-action: auto;
  }

  body[data-ui-version="3.3.0"] .details-body h2 {
    font-size: clamp(34px, 10.5vw, 45px);
    line-height: 1.04;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
  }

  body[data-ui-version="3.3.0"] .cinema-spotlight-art::after {
    background:
      linear-gradient(180deg, rgba(7,8,12,.12) 0%, rgba(7,8,12,.20) 36%, rgba(7,8,12,.68) 66%, rgba(7,8,12,.99) 88%),
      linear-gradient(90deg, rgba(7,8,12,.22), rgba(7,8,12,.08));
  }

  body[data-ui-version="3.3.0"] .account-settings-head {
    padding: 12px 12px 10px;
  }

  body[data-ui-version="3.3.0"] .account-settings-head h3 {
    font-size: 15px;
  }

  body[data-ui-version="3.3.0"] .account-status-row,
  body[data-ui-version="3.3.0"] .account-renewal-row {
    min-height: 54px;
    padding: 10px 12px;
  }

  body[data-ui-version="3.3.0"] .account-panel-note {
    padding: 0 12px 11px;
  }

  body[data-ui-version="3.3.0"] .account-referral-metrics {
    margin: 0 12px 10px;
  }

  body[data-ui-version="3.3.0"] .account-referral-actions {
    padding: 0 12px 12px;
  }
}

@media (max-width: 420px) {
  body[data-ui-version="3.3.0"] .club-section-nav button {
    gap: 4px;
    padding: 0 6px;
    font-size: 11px;
  }

  body[data-ui-version="3.3.0"] .view-header h1 {
    font-size: clamp(34px, 11vw, 44px);
    letter-spacing: -.025em;
  }
}

@media (max-width: 370px) {
  body[data-ui-version="3.3.0"] .account-referral-actions {
    grid-template-columns: 1fr;
  }
}

/* 3.0.17 — stable same-document history restoration. */
html.is-route-restoring body {
  min-height: var(--route-restore-floor, 100vh) !important;
}
html.is-route-restoring .content,
html.is-route-restoring .content *,
html.is-route-restoring .media-card,
html.is-route-restoring .catalog-list-card,
html.is-route-restoring .club-person {
  animation: none !important;
  transition: none !important;
}
html.is-route-restoring .content {
  scroll-behavior: auto !important;
}
body[data-ui-version="3.3.0"] .details-dialog {
  overscroll-behavior-y: contain;
  overflow-anchor: none;
}
html.has-details-dialog body {
  overflow-anchor: none;
}

/* source: css/components/unified-components.css */
/* Unified current components and profile surfaces. Source order is preserved from the validated previous build. */
/* ========================================================================
   Unwatchd 3.0.17 — unified visual contract
   Every component rendered by the current JavaScript is explicitly styled
   inside the active version scope. No current screen depends on 2.20.4 rules.
   ======================================================================== */
body[data-ui-version="3.3.0"] {
  --cinema-surface: var(--uw-surface-glass);
  --cinema-surface-raised: var(--uw-surface-raised);
  --cinema-surface-soft: var(--uw-surface-soft);
  --cinema-stroke: var(--uw-border);
  --cinema-stroke-strong: var(--uw-border-strong);
  --cinema-radius-card: 20px;
  --cinema-radius-control: 13px;
  --cinema-radius-chip: var(--uw-radius-pill);
  --cinema-gap-xs: 6px;
  --cinema-gap-sm: 9px;
  --cinema-gap-md: 13px;
  --cinema-gap-lg: 18px;

  /* Legacy structural rules still read these names. Map them to one palette. */
  --bg: var(--cinema-bg);
  --panel: var(--cinema-panel-strong);
  --panel-2: var(--cinema-surface-raised);
  --text: var(--cinema-text);
  --muted: var(--cinema-muted);
  --border: var(--cinema-stroke);
  --button: var(--cinema-accent);
  --button-text: var(--cinema-accent-text);
  --accent: var(--cinema-accent);
  --amber: var(--cinema-accent);
  --amber-soft: color-mix(in srgb, var(--cinema-accent) 14%, transparent);
  --link: color-mix(in srgb, var(--cinema-accent) 72%, white);
  --danger: var(--cinema-danger);
  --display: Inter, ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Typography: one loaded family, predictable Cyrillic metrics. */
body[data-ui-version="3.3.0"] :where(
  .wordmark,
  .view-header h1,
  .cinema-spotlight-content h2,
  .details-body h2,
  .sheet-head h2,
  .rating-dialog h2,
  .catalog-list-card h3,
  .club-section-head h2,
  .club-profile-title h2,
  .club-compact-head h3,
  .account-identity h2,
  .paywall-card h2,
  .share-shell h2,
  .admin-card-title,
  .admin-user-title,
  .onboarding-sheet h2,
  .onboarding-mark,
  .rating-value output,
  .hero-stat b
) {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-style: normal;
}

body[data-ui-version="3.3.0"] :where(button, input, textarea, select) {
  appearance: none;
  -webkit-appearance: none;
}

/* Common raised surfaces used by account, paywall, share, onboarding and admin. */
body[data-ui-version="3.3.0"] :where(
  .account-settings-panel,
  .paywall-card,
  .share-shell,
  .rating-dialog form,
  .admin-panel,
  .admin-user-sheet,
  .onboarding-sheet,
  .club-settings-panel
) {
  border: 1px solid var(--cinema-stroke);
  border-radius: var(--cinema-radius-card);
  background: var(--cinema-surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

/* Autocomplete is portaled under body; active scope must position it. */
body[data-ui-version="3.3.0"] > .search-suggestions.is-portal {
  position: fixed !important;
  z-index: 1200;
  right: auto !important;
  bottom: auto !important;
  max-height: min(420px, calc(var(--app-viewport-height, 100dvh) - 100px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--cinema-stroke);
  background: rgba(23, 24, 32, .98);
  box-shadow: 0 22px 60px rgba(0,0,0,.42);
}
body[data-ui-version="3.3.0"] > .search-suggestions.is-portal[hidden] { display: none !important; }

/* Foreign Club profile: all metric, list and action classes are current UI. */
body[data-ui-version="3.3.0"] .club-profile-view {
  width: 100%;
  max-width: 820px;
  min-width: 0;
  display: grid;
  gap: 12px;
}

body[data-ui-version="3.3.0"] .club-back {
  width: max-content;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--cinema-radius-chip);
  background: transparent;
  color: var(--cinema-muted);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
body[data-ui-version="3.3.0"] .club-back:active { background: var(--cinema-surface-soft); color: var(--cinema-text); }

body[data-ui-version="3.3.0"] .club-profile-hero.compact {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid var(--cinema-stroke);
  border-radius: var(--cinema-radius-card);
  background: var(--cinema-surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
body[data-ui-version="3.3.0"] .club-profile-hero.compact .club-avatar.is-large {
  width: 64px;
  height: 64px;
  min-width: 64px;
}
body[data-ui-version="3.3.0"] .club-profile-copy { min-width: 0; }
body[data-ui-version="3.3.0"] .club-profile-title {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}
body[data-ui-version="3.3.0"] .club-profile-title > div { min-width: 0; }
body[data-ui-version="3.3.0"] .club-profile-title h2 {
  margin: 2px 0 4px;
  overflow: hidden;
  font-size: clamp(27px, 7vw, 38px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-ui-version="3.3.0"] .club-demographics {
  display: block;
  color: var(--cinema-muted);
  font-size: 12px;
  line-height: 1.35;
}
body[data-ui-version="3.3.0"] .club-profile-copy > p:not(.eyebrow) {
  margin: 5px 0 0;
  color: var(--cinema-muted);
  font-size: 12px;
  line-height: 1.4;
}
body[data-ui-version="3.3.0"] .club-compatibility-pill {
  min-width: 48px;
  min-height: 28px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  border: 0;
  border-radius: var(--cinema-radius-chip);
  background: color-mix(in srgb, var(--cinema-accent) 18%, var(--cinema-surface-soft));
  color: color-mix(in srgb, var(--cinema-accent) 72%, white);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}
body[data-ui-version="3.3.0"] .club-tags {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
body[data-ui-version="3.3.0"] .club-tags span {
  max-width: 100%;
  padding: 4px 7px;
  overflow: hidden;
  border: 0;
  border-radius: var(--cinema-radius-chip);
  background: var(--cinema-surface-soft);
  color: var(--cinema-muted);
  font-size: 9px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-ui-version="3.3.0"] .club-profile-insights {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
body[data-ui-version="3.3.0"] .club-profile-insight {
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid var(--cinema-stroke);
  border-radius: var(--cinema-radius-control);
  background: var(--cinema-surface);
}
body[data-ui-version="3.3.0"] .club-profile-insight .ui-icon {
  width: 16px;
  height: 16px;
  color: color-mix(in srgb, var(--cinema-accent) 72%, white);
}
body[data-ui-version="3.3.0"] .club-profile-insight span {
  min-width: 0;
  overflow: hidden;
  color: var(--cinema-muted);
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-ui-version="3.3.0"] .club-profile-insight b {
  color: var(--cinema-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
body[data-ui-version="3.3.0"] .club-profile-shared-genres {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 3px 2px 0;
}
body[data-ui-version="3.3.0"] .club-profile-shared-genres small {
  margin-right: 2px;
  color: var(--cinema-muted);
  font-size: 10px;
  line-height: 1.2;
}
body[data-ui-version="3.3.0"] .club-profile-shared-genres span {
  max-width: 130px;
  padding: 5px 8px;
  overflow: hidden;
  border-radius: var(--cinema-radius-chip);
  background: color-mix(in srgb, var(--cinema-accent) 11%, transparent);
  color: var(--cinema-text);
  font-size: 10px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-ui-version="3.3.0"] .club-profile-stats.is-navigable {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
body[data-ui-version="3.3.0"] .club-profile-stat {
  position: relative;
  min-width: 0;
  min-height: 86px;
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 10px 9px 8px;
  overflow: hidden;
  border: 1px solid var(--cinema-stroke);
  border-radius: var(--cinema-radius-control);
  background: var(--cinema-surface);
  color: var(--cinema-text);
  text-align: left;
}
body[data-ui-version="3.3.0"] button.club-profile-stat { cursor: pointer; }
body[data-ui-version="3.3.0"] button.club-profile-stat:active { transform: scale(.975); background: var(--cinema-surface-raised); }
body[data-ui-version="3.3.0"] .club-profile-stat b {
  position: relative;
  z-index: 2;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.035em;
}
body[data-ui-version="3.3.0"] .club-profile-stat > span:not(.club-profile-stat-previews) {
  position: relative;
  z-index: 2;
  min-width: 0;
  overflow: hidden;
  color: var(--cinema-muted);
  font-size: 9px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-ui-version="3.3.0"] .club-profile-stat > i:not(.is-chevron) {
  position: absolute;
  z-index: 3;
  right: 7px;
  top: 7px;
  color: color-mix(in srgb, var(--cinema-accent) 76%, white);
  font-style: normal;
  font-size: 10px;
}
body[data-ui-version="3.3.0"] .club-profile-stat .is-chevron { display: none; }
body[data-ui-version="3.3.0"] .club-profile-stat-previews {
  position: absolute;
  z-index: 1;
  right: 5px;
  bottom: 5px;
  left: 5px;
  height: 42px;
  display: flex;
  align-items: end;
  justify-content: flex-end;
  overflow: hidden;
  opacity: .88;
  pointer-events: none;
}
body[data-ui-version="3.3.0"] .club-profile-stat-previews :where(img, i) {
  width: 27px;
  height: 38px;
  flex: 0 0 27px;
  display: grid;
  place-items: center;
  margin-left: -7px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 6px;
  background: var(--cinema-panel-strong);
  box-shadow: 0 3px 10px rgba(0,0,0,.28);
  color: var(--cinema-muted);
  font-size: 9px;
  font-style: normal;
  object-fit: cover;
}
body[data-ui-version="3.3.0"] .club-profile-stat-previews :where(img, i):first-child { margin-left: 0; }
body[data-ui-version="3.3.0"] .club-profile-stat.is-common {
  border-color: color-mix(in srgb, var(--cinema-accent) 26%, var(--cinema-stroke));
  background: color-mix(in srgb, var(--cinema-accent) 7%, var(--cinema-surface));
}
body[data-ui-version="3.3.0"] .club-profile-stat.is-empty,
body[data-ui-version="3.3.0"] .club-profile-stat.is-private { opacity: .52; cursor: default; }

body[data-ui-version="3.3.0"] .club-profile-actions {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--cinema-stroke);
  border-radius: 16px;
  background: var(--cinema-surface);
}
body[data-ui-version="3.3.0"] .club-profile-primary,
body[data-ui-version="3.3.0"] .club-profile-main-action { width: 100%; min-width: 0; }
body[data-ui-version="3.3.0"] .club-profile-main-action { min-height: 40px; }
body[data-ui-version="3.3.0"] .club-profile-secondary-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}
body[data-ui-version="3.3.0"] .club-profile-secondary-actions::-webkit-scrollbar { display: none; }
body[data-ui-version="3.3.0"] .club-profile-icon-action {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--cinema-surface-soft);
  color: var(--cinema-text);
  cursor: pointer;
}
body[data-ui-version="3.3.0"] .club-profile-icon-action:active { transform: scale(.94); }
body[data-ui-version="3.3.0"] .club-profile-icon-action .ui-icon { width: 17px; height: 17px; }
body[data-ui-version="3.3.0"] .club-profile-icon-action > span { display: none; }
body[data-ui-version="3.3.0"] .club-profile-icon-action.is-danger { color: #ff8a93; background: rgba(255,93,104,.11); }
body[data-ui-version="3.3.0"] .club-action-note,
body[data-ui-version="3.3.0"] .club-status {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: var(--cinema-radius-chip);
  background: var(--cinema-surface-soft);
  color: var(--cinema-muted);
  font-size: 11px;
}

body[data-ui-version="3.3.0"] .club-pair-panel {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--cinema-stroke);
  border-radius: var(--cinema-radius-card);
  background: var(--cinema-surface);
}
body[data-ui-version="3.3.0"] .club-premium-inline {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 17px;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--cinema-accent) 24%, var(--cinema-stroke));
  border-radius: var(--cinema-radius-control);
  background: color-mix(in srgb, var(--cinema-accent) 7%, var(--cinema-surface));
  color: var(--cinema-text);
  text-align: left;
}
body[data-ui-version="3.3.0"] .club-premium-inline > .ui-icon:first-child {
  width: 18px;
  height: 18px;
  box-sizing: content-box;
  padding: 8px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--cinema-accent) 14%, transparent);
  color: color-mix(in srgb, var(--cinema-accent) 72%, white);
}
body[data-ui-version="3.3.0"] .club-premium-inline span { min-width: 0; display: grid; gap: 2px; }
body[data-ui-version="3.3.0"] .club-premium-inline b { font-size: 13px; }
body[data-ui-version="3.3.0"] .club-premium-inline small { color: var(--cinema-muted); font-size: 11px; line-height: 1.35; }
body[data-ui-version="3.3.0"] .club-premium-inline .is-chevron { width: 16px; height: 16px; color: var(--cinema-muted); }
body[data-ui-version="3.3.0"] .club-friends-block { scroll-margin-top: 82px; padding-top: 4px; }
body[data-ui-version="3.3.0"] .club-friends-block + .club-friends-block { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--cinema-stroke); }

/* Subscription choice and catalog loading use the same surface/control grammar. */
body[data-ui-version="3.3.0"] .subscription-plan-list { display: grid; gap: 8px; margin: 14px 0; }
body[data-ui-version="3.3.0"] .subscription-plan {
  width: 100%;
  min-width: 0;
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--cinema-stroke);
  border-radius: var(--cinema-radius-control);
  background: var(--cinema-surface);
  color: var(--cinema-text);
  text-align: left;
}
body[data-ui-version="3.3.0"] .subscription-plan span { min-width: 0; display: grid; gap: 3px; }
body[data-ui-version="3.3.0"] .subscription-plan b { font-size: 14px; }
body[data-ui-version="3.3.0"] .subscription-plan small { color: var(--cinema-muted); font-size: 11px; }
body[data-ui-version="3.3.0"] .subscription-plan strong { color: color-mix(in srgb, var(--cinema-accent) 72%, white); font-size: 14px; }
body[data-ui-version="3.3.0"] .subscription-plan .ui-icon { width: 17px; color: var(--cinema-muted); }

body[data-ui-version="3.3.0"] .infinite-status {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 18px 12px calc(18px + env(safe-area-inset-bottom));
  color: var(--cinema-muted);
  text-align: center;
  font-size: 12px;
}
body[data-ui-version="3.3.0"] .infinite-status::before {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255,255,255,.12);
  border-top-color: var(--cinema-accent);
  border-radius: 50%;
  content: "";
  animation: infinite-spin .8s linear infinite;
}
body[data-ui-version="3.3.0"] .infinite-status.is-complete::before { display: none; }
body[data-ui-version="3.3.0"] .infinite-status button {
  min-height: 36px;
  padding: 7px 14px;
  border: 0;
  border-radius: var(--cinema-radius-chip);
  background: var(--cinema-surface-soft);
  color: var(--cinema-text);
}

/* Owner moderation was another obsolete-scope leak. */
body[data-ui-version="3.3.0"] .admin-moderation-panel { overflow: hidden; }
body[data-ui-version="3.3.0"] .admin-report-tabs {
  display: flex;
  gap: 6px;
  padding: 0 14px 13px;
  overflow-x: auto;
  scrollbar-width: none;
}
body[data-ui-version="3.3.0"] .admin-report-tabs::-webkit-scrollbar { display: none; }
body[data-ui-version="3.3.0"] .admin-report-tabs button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 0;
  border-radius: var(--cinema-radius-chip);
  background: var(--cinema-surface-soft);
  color: var(--cinema-muted);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
body[data-ui-version="3.3.0"] .admin-report-tabs button.is-active { background: var(--cinema-text); color: #0b0c11; }
body[data-ui-version="3.3.0"] .admin-report-tabs em {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 50%;
  background: rgba(127,127,127,.15);
  font-size: 10px;
  font-style: normal;
}
body[data-ui-version="3.3.0"] .admin-report-list { display: grid; gap: 9px; padding: 0 14px 14px; }
body[data-ui-version="3.3.0"] .admin-report-card {
  overflow: hidden;
  border: 1px solid var(--cinema-stroke);
  border-radius: 17px;
  background: var(--cinema-surface);
}
body[data-ui-version="3.3.0"] .admin-report-card.is-new { border-color: rgba(255,93,104,.32); }
body[data-ui-version="3.3.0"] .admin-report-card.is-focused { border-color: color-mix(in srgb, var(--cinema-accent) 58%, var(--cinema-stroke)); }
body[data-ui-version="3.3.0"] .admin-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 13px 10px;
  border-bottom: 1px solid var(--cinema-stroke);
}
body[data-ui-version="3.3.0"] .admin-report-head > div { display: flex; align-items: center; gap: 8px; }
body[data-ui-version="3.3.0"] .admin-report-head b { font-size: 13px; }
body[data-ui-version="3.3.0"] .admin-report-head time { color: var(--cinema-muted); font-size: 11px; }
body[data-ui-version="3.3.0"] .admin-report-status {
  padding: 4px 7px;
  border-radius: var(--cinema-radius-chip);
  background: var(--cinema-surface-soft);
  color: var(--cinema-muted);
  font-size: 10px;
  font-weight: 800;
}
body[data-ui-version="3.3.0"] .admin-report-status.is-new { color: #ff8b93; background: rgba(255,93,104,.12); }
body[data-ui-version="3.3.0"] .admin-report-status.is-reviewing { color: color-mix(in srgb, var(--cinema-accent) 74%, white); background: color-mix(in srgb, var(--cinema-accent) 12%, transparent); }
body[data-ui-version="3.3.0"] .admin-report-status.is-resolved { color: #78d69f; background: rgba(112,211,154,.12); }
body[data-ui-version="3.3.0"] .admin-report-route {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
}
body[data-ui-version="3.3.0"] .admin-report-person {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 14px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: var(--cinema-surface-soft);
  color: var(--cinema-text);
  text-align: left;
}
body[data-ui-version="3.3.0"] .admin-report-person .admin-avatar { width: 34px; height: 34px; }
body[data-ui-version="3.3.0"] .admin-report-person span { min-width: 0; display: grid; gap: 1px; }
body[data-ui-version="3.3.0"] .admin-report-person b,
body[data-ui-version="3.3.0"] .admin-report-person small,
body[data-ui-version="3.3.0"] .admin-report-person em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-version="3.3.0"] .admin-report-person b { font-size: 12px; }
body[data-ui-version="3.3.0"] .admin-report-person small,
body[data-ui-version="3.3.0"] .admin-report-person em { color: var(--cinema-muted); font-size: 9px; font-style: normal; }
body[data-ui-version="3.3.0"] .admin-report-person .ui-icon { width: 14px; height: 14px; color: var(--cinema-muted); }
body[data-ui-version="3.3.0"] .admin-report-arrow { color: var(--cinema-muted); }
body[data-ui-version="3.3.0"] .admin-report-body { padding: 0 13px 11px; }
body[data-ui-version="3.3.0"] .admin-report-body span { display: inline-block; margin-bottom: 5px; color: color-mix(in srgb, var(--cinema-accent) 72%, white); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
body[data-ui-version="3.3.0"] .admin-report-body p { margin: 0; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
body[data-ui-version="3.3.0"] .admin-report-review { margin: 0; padding: 0 13px 10px; color: var(--cinema-muted); font-size: 10px; }
body[data-ui-version="3.3.0"] .admin-report-actions { display: grid; gap: 8px; padding: 11px 13px 13px; border-top: 1px solid var(--cinema-stroke); background: rgba(0,0,0,.08); }
body[data-ui-version="3.3.0"] .admin-report-actions textarea { width: 100%; min-height: 58px; max-height: 130px; resize: vertical; border: 0; border-radius: 11px; background: var(--cinema-surface-soft); color: var(--cinema-text); padding: 9px 10px; font-size: 12px; }
body[data-ui-version="3.3.0"] .admin-report-actions > div { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
body[data-ui-version="3.3.0"] .admin-report-actions .button { min-height: 36px; }
body[data-ui-version="3.3.0"] .admin-metrics article.is-alert { border-color: rgba(255,93,104,.30); }
body[data-ui-version="3.3.0"] .admin-metrics article.is-alert b,
body[data-ui-version="3.3.0"] .admin-count.is-alert { color: #ff8b93; }

@media (min-width: 720px) {
  body[data-ui-version="3.3.0"] .club-profile-icon-action {
    width: auto;
    min-width: 40px;
    padding: 0 10px;
    grid-auto-flow: column;
    gap: 6px;
  }
  body[data-ui-version="3.3.0"] .club-profile-icon-action > span { display: inline; font-size: 11px; font-weight: 700; }
}

@media (max-width: 680px) {
  body[data-ui-version="3.3.0"] .admin-report-route { grid-template-columns: 1fr; }
  body[data-ui-version="3.3.0"] .admin-report-arrow { display: none; }
  body[data-ui-version="3.3.0"] .admin-report-actions > div { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  body[data-ui-version="3.3.0"] .admin-report-actions .button { width: 100%; }
}

@media (max-width: 520px) {
  body[data-ui-version="3.3.0"] .club-profile-view { gap: 10px; }
  body[data-ui-version="3.3.0"] .club-profile-hero.compact { grid-template-columns: 52px minmax(0,1fr); gap: 10px; padding: 11px; border-radius: 16px; }
  body[data-ui-version="3.3.0"] .club-profile-hero.compact .club-avatar.is-large { width: 52px; height: 52px; min-width: 52px; }
  body[data-ui-version="3.3.0"] .club-profile-title h2 { font-size: clamp(25px, 8.5vw, 33px); }
  body[data-ui-version="3.3.0"] .club-profile-insight { min-height: 43px; grid-template-columns: 16px minmax(0,1fr) auto; padding: 8px; gap: 5px; }
  body[data-ui-version="3.3.0"] .club-profile-insight span { font-size: 9px; }
  body[data-ui-version="3.3.0"] .club-profile-stats.is-navigable { gap: 5px; }
  body[data-ui-version="3.3.0"] .club-profile-stat { min-height: 82px; padding: 9px 7px 7px; text-align: left; }
  body[data-ui-version="3.3.0"] .club-profile-stat b { font-size: 20px; }
  body[data-ui-version="3.3.0"] .club-profile-stat > span:not(.club-profile-stat-previews) { font-size: 8px; }
  body[data-ui-version="3.3.0"] .club-profile-stat-previews { height: 38px; }
  body[data-ui-version="3.3.0"] .club-profile-stat-previews :where(img, i) { width: 23px; height: 34px; flex-basis: 23px; }
  body[data-ui-version="3.3.0"] .club-profile-actions { grid-template-columns: minmax(0,1fr) auto; gap: 5px; padding: 6px; }
  body[data-ui-version="3.3.0"] .club-profile-icon-action { width: 35px; height: 35px; flex-basis: 35px; }
}

@media (max-width: 380px) {
  body[data-ui-version="3.3.0"] .club-profile-insights { grid-template-columns: 1fr; }
  body[data-ui-version="3.3.0"] .club-profile-shared-genres { grid-column: auto; }
  body[data-ui-version="3.3.0"] .club-profile-stat-previews :where(img, i):nth-child(n/**/+3) { display: none; }
}

/* source: css/screens/details-overlay.css */
/* Deterministic film-card overlay and gestures. Source order is preserved from the validated previous build. */
/* ========================================================================
   Unwatchd 3.0.17 — deterministic details overlay and scroll preservation
   The film card is deliberately NOT opened with dialog.showModal(). Telegram
   WebView can leave a native top-layer dialog in a broken white frame after
   close. The <dialog> is shown non-modally and acts as a regular fixed overlay.
   ======================================================================== */
body[data-ui-version="3.3.0"] .details-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5000;
  width: 100vw !important;
  height: var(--app-viewport-height, 100dvh) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 14px !important;
  border: 0 !important;
  background: rgba(2, 3, 7, .82) !important;
  color: var(--cinema-text);
  overflow: hidden !important;
  overscroll-behavior: contain;
  touch-action: none;
  box-sizing: border-box;
}
body[data-ui-version="3.3.0"] .details-overlay:not([open]) {
  display: none !important;
}
body[data-ui-version="3.3.0"] .details-overlay[open] {
  display: grid !important;
  place-items: center;
}
body[data-ui-version="3.3.0"] .details-overlay::backdrop {
  display: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
}
body[data-ui-version="3.3.0"] .details-overlay-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  appearance: none;
  touch-action: none;
}
body[data-ui-version="3.3.0"] .details-overlay > .details-dialog {
  position: relative !important;
  inset: auto !important;
  z-index: 1;
  display: block !important;
  width: min(960px, 100%) !important;
  height: auto !important;
  max-width: 960px !important;
  max-height: calc(var(--app-viewport-height, 100dvh) - 28px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background: #111219 !important;
  box-shadow: 0 36px 120px rgba(0, 0, 0, .72) !important;
  touch-action: pan-y;
}
body[data-ui-version="3.3.0"] .details-overlay > .details-dialog::before,
body[data-ui-version="3.3.0"] .details-overlay > .details-dialog::after {
  pointer-events: none;
}
body[data-ui-version="3.3.0"] .details-overlay #detailsContent {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: calc(var(--app-viewport-height, 100dvh) - 28px) !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-y;
}
body[data-ui-version="3.3.0"] .details-overlay #detailsContent::-webkit-scrollbar {
  display: none;
}
body[data-ui-version="3.3.0"] .details-overlay .details-layout {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  touch-action: auto !important;
}
html.has-details-dialog,
html.has-details-dialog body {
  overflow-anchor: none;
}
html.has-details-dialog body {
  /* Never freeze or reposition the document. The unchanged page remains at
     exactly the same window.scrollY underneath the fixed overlay. */
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
}

@media (max-width: 760px) {
  body[data-ui-version="3.3.0"] .details-overlay {
    padding: 0 !important;
    background: #111219 !important;
  }
  body[data-ui-version="3.3.0"] .details-overlay > .details-dialog {
    width: 100% !important;
    height: var(--app-viewport-height, 100dvh) !important;
    max-width: none !important;
    max-height: var(--app-viewport-height, 100dvh) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body[data-ui-version="3.3.0"] .details-overlay #detailsContent {
    height: 100% !important;
    max-height: 100% !important;
  }
}


/* 3.0.17 — deterministic film-card overlay. */
body[data-ui-version="3.3.0"] .details-overlay[hidden],
body[data-ui-version="3.3.0"] .details-overlay:not(.is-open) {
  display: none !important;
}
body[data-ui-version="3.3.0"] .details-overlay.is-open {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482000 !important;
  display: grid !important;
  place-items: center !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  background: rgba(3, 5, 9, .78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}
body[data-ui-version="3.3.0"] .details-overlay.is-open > .details-dialog {
  position: relative !important;
  z-index: 1 !important;
  width: min(960px, 100%) !important;
  height: auto !important;
  max-height: calc(var(--app-viewport-height, 100dvh) - 28px) !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: #111219 !important;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .76) !important;
}
body[data-ui-version="3.3.0"] .details-overlay.is-open #detailsContent {
  width: 100% !important;
  height: auto !important;
  max-height: inherit !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}
body[data-ui-version="3.3.0"] .details-overlay-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
}
html.has-details-dialog,
html.has-details-dialog body {
  overflow: visible !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
}
@media (max-width: 760px) {
  body[data-ui-version="3.3.0"] .details-overlay.is-open {
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
    background: rgba(3, 5, 9, .72) !important;
  }
  body[data-ui-version="3.3.0"] .details-overlay.is-open > .details-dialog {
    width: 100% !important;
    height: calc(var(--app-viewport-height, 100dvh) - 16px) !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 70px rgba(0, 0, 0, .72) !important;
  }
  body[data-ui-version="3.3.0"] .details-overlay.is-open #detailsContent {
    height: 100% !important;
    max-height: 100% !important;
  }
}

/* ========================================================================
   Unwatchd 3.0.17 — persistent parent surface + animated media overlay
   The parent page never unmounts, never changes route and never receives a
   scroll lock. Only the card's own scroller moves.
   ======================================================================== */
body[data-ui-version="3.3.0"] .details-overlay[hidden],
body[data-ui-version="3.3.0"] .details-overlay.is-suspended,
body[data-ui-version="3.3.0"] .details-overlay:not(.is-open):not(.is-mounting):not(.is-closing) {
  display: none !important;
}
body[data-ui-version="3.3.0"] .details-overlay.is-mounting,
body[data-ui-version="3.3.0"] .details-overlay.is-open,
body[data-ui-version="3.3.0"] .details-overlay.is-closing {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: grid !important;
  place-items: center !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  overflow: hidden !important;
  background: rgba(2, 4, 8, .74) !important;
  backdrop-filter: blur(12px) saturate(.82) !important;
  -webkit-backdrop-filter: blur(12px) saturate(.82) !important;
  overscroll-behavior: contain !important;
  touch-action: none !important;
  opacity: 0;
  transition: opacity 220ms ease;
}
body[data-ui-version="3.3.0"] .details-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
body[data-ui-version="3.3.0"] .details-overlay.is-closing {
  opacity: 0;
  pointer-events: none;
}
body[data-ui-version="3.3.0"] .details-overlay.is-mounting {
  opacity: 0;
  pointer-events: none;
}
body[data-ui-version="3.3.0"] .details-overlay > .details-dialog {
  transform: translate3d(0, 28px, 0) scale(.985);
  opacity: .94;
  transition: transform 240ms cubic-bezier(.2,.75,.2,1), opacity 180ms ease !important;
  will-change: transform, opacity;
}
body[data-ui-version="3.3.0"] .details-overlay.is-open > .details-dialog {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}
body[data-ui-version="3.3.0"] .details-overlay.is-closing > .details-dialog {
  transform: translate3d(0, 34px, 0) scale(.98);
  opacity: .88;
}
body[data-ui-version="3.3.0"] .details-overlay #detailsContent {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}
@media (max-width: 760px) {
  body[data-ui-version="3.3.0"] .details-overlay.is-mounting,
  body[data-ui-version="3.3.0"] .details-overlay.is-open,
  body[data-ui-version="3.3.0"] .details-overlay.is-closing {
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
    background: rgba(2, 4, 8, .68) !important;
  }
  body[data-ui-version="3.3.0"] .details-overlay > .details-dialog {
    width: 100% !important;
    height: calc(var(--app-viewport-height, 100dvh) - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.76) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui-version="3.3.0"] .details-overlay,
  body[data-ui-version="3.3.0"] .details-overlay > .details-dialog {
    transition-duration: 1ms !important;
  }
}
body[data-ui-version="3.3.0"] dialog.has-media-overlay {
  overflow: visible !important;
}


/* 3.0.17: close controls must not acquire touch focus or start swipe tracking. */
body[data-ui-version="3.3.0"] .details-overlay [data-detail-action="close"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ========================================================================
   Unwatchd 3.0.17 — deterministic taps and deliberate horizontal gestures
   Keep the closing overlay alive until the whole pointer sequence is over;
   allow native vertical scrolling, but reserve horizontal motion for back.
   ======================================================================== */
body[data-ui-version="3.3.0"] .details-overlay.is-open,
body[data-ui-version="3.3.0"] .details-overlay.is-mounting,
body[data-ui-version="3.3.0"] .details-overlay.is-closing,
body[data-ui-version="3.3.0"] .details-overlay > .details-dialog,
body[data-ui-version="3.3.0"] .details-overlay #detailsContent,
body[data-ui-version="3.3.0"] .content,
body[data-ui-version="3.3.0"] dialog[open],
body[data-ui-version="3.3.0"] .filter-panel,
body[data-ui-version="3.3.0"] .watch-panel {
  touch-action: pan-y !important;
  overscroll-behavior-x: none;
}

/* A closing overlay remains the pointer target during its 260 ms exit.
   Otherwise the remaining pointerup/click can land on the media card below
   and immediately reopen the card. */
body[data-ui-version="3.3.0"] .details-overlay.is-closing {
  pointer-events: auto !important;
}
body[data-ui-version="3.3.0"] .details-overlay.is-closing > .details-dialog {
  pointer-events: none !important;
}
body[data-ui-version="3.3.0"] .details-overlay.is-closing .details-overlay-backdrop {
  pointer-events: auto !important;
  cursor: default;
}

body[data-ui-version="3.3.0"] .details-overlay [data-detail-action="close"],
body[data-ui-version="3.3.0"] .details-overlay-backdrop {
  touch-action: manipulation !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* No visual movement until JS has classified the pointer path as horizontal.
   Once classified, only the card follows the finger; the parent page stays
   entirely stationary underneath. */
body[data-ui-version="3.3.0"] .details-overlay.is-details-swipe-tracking {
  opacity: var(--details-swipe-opacity, 1) !important;
  transition: none !important;
}
body[data-ui-version="3.3.0"] .details-overlay.is-details-swipe-settling {
  opacity: var(--details-swipe-opacity, 1) !important;
  transition: opacity 180ms ease !important;
}
body[data-ui-version="3.3.0"] .details-overlay > .details-dialog.is-swipe-tracking,
body[data-ui-version="3.3.0"] .details-overlay > .details-dialog.is-swipe-settling {
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui-version="3.3.0"] .details-overlay.is-details-swipe-settling,
  body[data-ui-version="3.3.0"] .details-overlay > .details-dialog.is-swipe-settling {
    transition-duration: 1ms !important;
  }
}

/* ========================================================================
   Unwatchd 3.0.17 — Telegram-safe back gesture engine
   Horizontal back gestures stay inside the web surface; native vertical
   scrolling remains untouched. The first physical edge pixels are left to
   the OS/Telegram container and page-back activation starts slightly inward.
   ======================================================================== */
html,
body {
  overscroll-behavior-x: none;
}

body[data-ui-version="3.3.0"] .content,
body[data-ui-version="3.3.0"] .details-overlay,
body[data-ui-version="3.3.0"] .details-overlay > .details-dialog,
body[data-ui-version="3.3.0"] .details-overlay #detailsContent,
body[data-ui-version="3.3.0"] dialog[open],
body[data-ui-version="3.3.0"] .filter-panel,
body[data-ui-version="3.3.0"] .watch-panel {
  touch-action: pan-y !important;
  overscroll-behavior-x: none !important;
}

body[data-ui-version="3.3.0"] .is-swipe-tracking {
  transform: translate3d(var(--swipe-x, 0), 0, 0) !important;
  opacity: var(--swipe-opacity, 1) !important;
  transition: none !important;
  will-change: transform, opacity;
  -webkit-user-select: none;
  user-select: none;
}

body[data-ui-version="3.3.0"] .is-swipe-settling {
  transform: translate3d(var(--swipe-x, 0), 0, 0) !important;
  opacity: var(--swipe-opacity, 1) !important;
  transition:
    transform var(--swipe-settle-duration, 210ms) cubic-bezier(.22, 1, .36, 1),
    opacity var(--swipe-settle-duration, 210ms) ease-out !important;
  will-change: transform, opacity;
}

body[data-ui-version="3.3.0"] .details-overlay.is-details-swipe-tracking,
body[data-ui-version="3.3.0"] .details-overlay.is-details-swipe-settling {
  transition: none !important;
}

body[data-ui-version="3.3.0"] .details-overlay.is-details-swipe-tracking > .details-dialog,
body[data-ui-version="3.3.0"] .details-overlay.is-details-swipe-settling > .details-dialog {
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui-version="3.3.0"] .is-swipe-settling {
    --swipe-settle-duration: 1ms;
  }
}


/* ========================================================================
   Unwatchd 3.0.17 — continuous poster-to-content fade

   The legacy rule left `height: 30%` on this pseudo-element and a later rule
   changed only `inset` to `0`. That over-constrained absolutely positioned
   box stayed 30% tall at the TOP of the poster, producing a dark horizontal
   strip with a hard lower edge. Keep the artwork untouched and fade only its
   lower part into the details body.
   ======================================================================== */
body[data-ui-version="3.3.0"] .details-poster::after {
  inset: auto 0 0 !important;
  width: 100% !important;
  height: 44% !important;
  background: linear-gradient(
    180deg,
    rgba(17, 18, 25, 0) 0%,
    rgba(17, 18, 25, .08) 30%,
    rgba(17, 18, 25, .48) 67%,
    rgba(17, 18, 25, .9) 91%,
    #111219 100%
  ) !important;
  pointer-events: none !important;
}

/* ========================================================================
   Unwatchd 3.0.17 — film-card action hierarchy
   ======================================================================== */
body[data-ui-version="3.3.0"] .media-action-watch {
  width: 100%;
  border-color: color-mix(in srgb, var(--cinema-accent) 28%, rgba(255,255,255,.08));
  background: color-mix(in srgb, var(--cinema-accent) 12%, rgba(255,255,255,.065));
}
body[data-ui-version="3.3.0"] .media-action-watch .media-action-row-icon {
  color: var(--cinema-accent);
  background: color-mix(in srgb, var(--cinema-accent) 18%, rgba(255,255,255,.05));
}
body[data-ui-version="3.3.0"] .media-action-compact.is-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
body[data-ui-version="3.3.0"] .media-action-compact.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body[data-ui-version="3.3.0"] .media-action-compact button {
  min-width: 0;
}
body[data-ui-version="3.3.0"] .media-action-compact button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  body[data-ui-version="3.3.0"] .media-action-watch {
    min-height: 58px;
  }
  body[data-ui-version="3.3.0"] .media-action-compact.is-four {
    gap: 6px;
  }
  body[data-ui-version="3.3.0"] .media-action-compact.is-four button {
    min-height: 52px;
    padding: 7px 3px;
    font-size: 8.5px;
  }
  body[data-ui-version="3.3.0"] .media-action-compact.is-four .ui-icon {
    width: 17px;
    height: 17px;
  }
}


/* 3.0.17 — interactive card actions and action feedback */
body[data-ui-version="3.3.0"] .card-status {
  z-index: 4;
  align-items: center;
}
body[data-ui-version="3.3.0"] .status-dot {
  appearance: none;
  -webkit-appearance: none;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
body[data-ui-version="3.3.0"] .status-dot:hover { border-color: rgba(255,255,255,.32); }
body[data-ui-version="3.3.0"] .status-dot:active { transform: scale(.88); }
body[data-ui-version="3.3.0"] .status-dot:focus-visible {
  outline: 2px solid rgba(255,255,255,.95);
  outline-offset: 2px;
}
body[data-ui-version="3.3.0"] .status-dot:disabled {
  cursor: wait;
  opacity: .58;
}
body[data-ui-version="3.3.0"] .status-checkin.is-on {
  background: #3aaee8;
  border-color: #3aaee8;
  color: #fff;
}
body[data-ui-version="3.3.0"] .status-wishlist.is-on {
  background: #2f9fd7;
  border-color: #2f9fd7;
  color: #fff;
}
body[data-ui-version="3.3.0"] .status-top.is-on {
  background: #f2b84b;
  border-color: #f2b84b;
  color: #111318;
}
body[data-ui-version="3.3.0"] .media-card.is-action-busy .poster-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 68%, rgba(5,7,11,.16));
}
body[data-ui-version="3.3.0"] .toast.has-icon {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 15px 8px 9px;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(18,21,29,.94);
  color: #f7f8fb;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
body[data-ui-version="3.3.0"] .toast-symbol {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #3aaee8;
}
body[data-ui-version="3.3.0"] .toast-symbol .ui-icon { width: 17px; height: 17px; }
body[data-ui-version="3.3.0"] .toast.is-wishlist .toast-symbol { background: #2f9fd7; }
body[data-ui-version="3.3.0"] .toast.is-top .toast-symbol { background: #f2b84b; color: #111318; }
body[data-ui-version="3.3.0"] .toast.is-removed .toast-symbol { background: #3a3f4c; color: #d5d8df; }
body[data-ui-version="3.3.0"] .toast.is-checkin .toast-symbol { background: #3aaee8; }
@media (max-width: 760px) {
  body[data-ui-version="3.3.0"] .status-dot {
    width: 29px;
    min-width: 29px;
    height: 29px;
    font-size: 11px;
  }
  body[data-ui-version="3.3.0"] .toast.has-icon {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100% - 24px);
    white-space: normal;
  }
}

/* source: css/screens/catalogs.css */
/* Catalogs, public lists and loading surfaces. Source order is preserved from the validated previous build. */
/* ========================================================================
   Unwatchd 3.0.22 — resilient catalogues and explicit search reset
   ======================================================================== */
body[data-ui-version="3.3.0"] .global-search {
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
}
body[data-ui-version="3.3.0"] .global-search input[type="search"]::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}
body[data-ui-version="3.3.0"] .search-clear {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  color: rgba(245,246,252,.78);
  font: 500 22px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-version="3.3.0"] .search-clear:hover,
body[data-ui-version="3.3.0"] .search-clear:focus-visible {
  background: rgba(255,255,255,.16);
  color: var(--cinema-text);
  outline: none;
}
body[data-ui-version="3.3.0"] .search-clear[hidden] { display: none !important; }

/* Public Trakt list: same visual grammar as the rest of the application. */
body[data-ui-version="3.3.0"][data-screen="catalog-list"] .content {
  --catalog-list-side: clamp(14px, 3vw, 28px);
}
body[data-ui-version="3.3.0"][data-screen="catalog-list"] .breadcrumbs {
  margin: 0 0 10px;
}
body[data-ui-version="3.3.0"][data-screen="catalog-list"] .breadcrumb-back {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--cinema-stroke);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: var(--cinema-text);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}





body[data-ui-version="3.3.0"][data-screen="catalog-list"] .view-actions,
body[data-ui-version="3.3.0"][data-screen="catalog-list"] .quick-filters:empty {
  display: none;
}
body[data-ui-version="3.3.0"][data-screen="catalog-list"] .results-meta {
  min-height: 0;
  margin: 0 2px 12px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0;
}
body[data-ui-version="3.3.0"][data-screen="catalog-list"] .results-meta small {
  color: inherit;
  font-size: inherit;
}
body[data-ui-version="3.3.0"][data-screen="catalog-list"] .media-grid {
  align-items: start;
}

@media (max-width: 760px) {
  body[data-ui-version="3.3.0"] .global-search {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 6px;
    padding-right: 7px;
  }
  body[data-ui-version="3.3.0"] .search-clear {
    width: 30px;
    height: 30px;
    font-size: 20px;
  }
  body[data-ui-version="3.3.0"][data-screen="catalog-list"] .breadcrumbs {
    margin-bottom: 9px;
  }
  
  
  
  body[data-ui-version="3.3.0"][data-screen="catalog-list"] .results-meta {
    display: flex;
    gap: 6px 12px;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
  }
}


/* ========================================================================
   Unwatchd 3.0.22 — catalog collection system
   Compact Inter typography, stable back affordance and a single visual
   grammar for list directory and opened collection screens.
   ======================================================================== */
body[data-ui-version="3.3.0"][data-screen="catalogs"] .catalog-list-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-ui-version="3.3.0"] .catalog-list-card {
  appearance: none;
  position: relative;
  min-width: 0;
  min-height: 96px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--cinema-stroke, var(--border));
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(25, 34, 52, .96), rgba(15, 21, 34, .98));
  color: var(--cinema-text, var(--text));
  text-align: left;
  box-shadow: none;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

body[data-ui-version="3.3.0"] .catalog-list-card::after {
  display: none !important;
}

body[data-ui-version="3.3.0"] .catalog-list-card:active {
  transform: scale(.985);
  border-color: color-mix(in srgb, var(--cinema-accent) 42%, var(--cinema-stroke));
}

body[data-ui-version="3.3.0"] .catalog-list-index {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--cinema-accent) 11%, transparent);
  color: color-mix(in srgb, var(--cinema-accent) 78%, white);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: -.02em;
}

body[data-ui-version="3.3.0"] .catalog-list-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

body[data-ui-version="3.3.0"] .catalog-list-copy small {
  color: var(--cinema-muted, var(--muted));
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 9px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body[data-ui-version="3.3.0"] .catalog-list-copy strong {
  min-width: 0;
  color: var(--cinema-text, var(--text));
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

body[data-ui-version="3.3.0"] .catalog-list-arrow {
  color: var(--cinema-muted, var(--muted));
  font-size: 24px;
  line-height: 1;
  font-weight: 400;
}

body[data-ui-version="3.3.0"][data-screen="catalog-list"] .breadcrumbs {
  position: sticky;
  top: calc(var(--tg-content-safe-area-inset-top, 0px) + 6px);
  z-index: 12;
  width: fit-content;
  margin: 0 0 14px;
  padding: 0;
  background: transparent;
}

body[data-ui-version="3.3.0"] .catalog-return {
  appearance: none;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--cinema-stroke, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--cinema-surface, var(--panel)) 90%, transparent);
  color: var(--cinema-text, var(--text));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
  font: inherit;
}

body[data-ui-version="3.3.0"] .catalog-return span {
  color: var(--cinema-accent);
  font-size: 17px;
  line-height: 1;
}

body[data-ui-version="3.3.0"] .catalog-return b {
  font-size: 12px;
  line-height: 1;
  font-weight: 750;
}







body[data-ui-version="3.3.0"][data-screen="catalog-list"] .results-meta {
  margin-block: 8px 13px;
}

body[data-ui-version="3.3.0"][data-screen="catalog-list"] .content {
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

body[data-ui-version="3.3.0"][data-screen="catalog-list"] .content.is-swipe-tracking,
body[data-ui-version="3.3.0"][data-screen="catalog-list"] .content.is-swipe-settling {
  border-radius: 22px 0 0 22px;
  background: var(--bg);
  box-shadow: -18px 0 36px rgba(0, 0, 0, .18);
}

@media (max-width: 640px) {
  body[data-ui-version="3.3.0"][data-screen="catalogs"] .catalog-list-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body[data-ui-version="3.3.0"] .catalog-list-card {
    min-height: 78px;
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 16px;
  }

  body[data-ui-version="3.3.0"] .catalog-list-index {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 15px !important;
  }

  body[data-ui-version="3.3.0"] .catalog-list-copy strong {
    font-size: 14px;
    line-height: 1.18;
  }

  
}

/* ========================================================================
   Unwatchd 3.0.22 — universal nested-screen back swipe
   The gesture may start across the usable content surface, not only inside a
   narrow left-edge rail. Physical edge gutters remain available to Telegram
   and the operating system. Vertical scrolling stays native until JS has
   positively classified a rightward horizontal gesture.
   ======================================================================== */
html.is-back-swipe-active,
html.is-back-swipe-active body {
  overscroll-behavior-x: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

body[data-ui-version="3.3.0"] .content,
body[data-ui-version="3.3.0"] .club-profile-view,
body[data-ui-version="3.3.0"] .club-conversation,
body[data-ui-version="3.3.0"] .club-profile-form,
body[data-ui-version="3.3.0"][data-screen="catalog-list"] .content,
body[data-ui-version="3.3.0"] .details-overlay,
body[data-ui-version="3.3.0"] dialog[open],
body[data-ui-version="3.3.0"] .filter-panel,
body[data-ui-version="3.3.0"] .watch-panel {
  touch-action: pan-y !important;
  overscroll-behavior-x: none !important;
}

body[data-ui-version="3.3.0"] .content.is-swipe-tracking,
body[data-ui-version="3.3.0"] .content.is-swipe-settling,
body[data-ui-version="3.3.0"] .details-dialog.is-swipe-tracking,
body[data-ui-version="3.3.0"] .details-dialog.is-swipe-settling,
body[data-ui-version="3.3.0"] dialog.is-swipe-tracking,
body[data-ui-version="3.3.0"] dialog.is-swipe-settling,
body[data-ui-version="3.3.0"] .filter-panel.is-swipe-tracking,
body[data-ui-version="3.3.0"] .filter-panel.is-swipe-settling,
body[data-ui-version="3.3.0"] .watch-panel.is-swipe-tracking,
body[data-ui-version="3.3.0"] .watch-panel.is-swipe-settling {
  transform-origin: left center;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}


/* 3.0.25: safe spotlight shelf on top of the restored 3.0.22 visual system. */

body[data-ui-version="3.3.0"] .cinema-spotlight-actions {
  max-width: 240px;
}
body[data-ui-version="3.3.0"] .cinema-spotlight-actions .cinema-pill.is-primary {
  width: 100%;
}
body[data-ui-version="3.3.0"] .spotlight-shelf {
  margin: 12px 0 4px;
  min-width: 0;
}
body[data-ui-version="3.3.0"] .spotlight-shelf-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(152px, 44%);
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
}
body[data-ui-version="3.3.0"] .spotlight-shelf-track::-webkit-scrollbar { display: none; }
body[data-ui-version="3.3.0"] .spotlight-shelf-card {
  min-width: 0;
  min-height: 84px;
  padding: 8px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(126, 179, 255, .18);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(17, 24, 39, .98), rgba(10, 15, 27, .98));
  color: var(--text);
  text-align: left;
  scroll-snap-align: start;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
body[data-ui-version="3.3.0"] .spotlight-shelf-card.is-active {
  border-color: color-mix(in srgb, var(--cinema-accent) 72%, white);
  background: linear-gradient(180deg, rgba(21, 39, 64, .98), rgba(12, 22, 38, .98));
}
body[data-ui-version="3.3.0"] .spotlight-shelf-card:active { transform: scale(.985); }
body[data-ui-version="3.3.0"] .spotlight-shelf-poster {
  width: 52px;
  height: 68px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 11px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.74);
  font-weight: 800;
}
body[data-ui-version="3.3.0"] .spotlight-shelf-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body[data-ui-version="3.3.0"] .spotlight-shelf-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
body[data-ui-version="3.3.0"] .spotlight-shelf-copy b {
  min-width: 0;
  color: #fff;
  font: 800 13px/1.15 Inter, system-ui, sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body[data-ui-version="3.3.0"] .spotlight-shelf-copy small {
  min-width: 0;
  color: rgba(255,255,255,.6);
  font: 600 10px/1.2 Inter, system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 680px) {
  body[data-ui-version="3.3.0"] .spotlight-shelf-track {
    grid-auto-columns: minmax(142px, 62vw);
  }
  body[data-ui-version="3.3.0"] .spotlight-shelf-card {
    min-height: 78px;
    grid-template-columns: 48px minmax(0, 1fr);
  }
  body[data-ui-version="3.3.0"] .spotlight-shelf-poster {
    width: 48px;
    height: 64px;
  }
}

/* source: css/screens/home.css */
/* Current cinematic home screen and hero carousel. Source order is preserved from the validated previous build. */
/* ========================================================================
   Unwatchd 3.0.26 — cinematic home polish
   ======================================================================== */
body[data-ui-version="3.3.0"][data-screen="discover"] .view-header { display: none; }
body[data-ui-version="3.3.0"][data-screen="discover"] .hero { margin: 0 0 24px; gap: 0; }
body[data-ui-version="3.3.0"][data-screen="discover"] .results-meta { margin-top: 26px; }
body[data-ui-version="3.3.0"] .home-screen { min-width: 0; display: grid; gap: 24px; }
body[data-ui-version="3.3.0"] .home-showcase { position: relative; min-width: 0; overflow: hidden; border-radius: 30px; background: #050609; box-shadow: 0 26px 80px rgba(0,0,0,.38); }
body[data-ui-version="3.3.0"] .home-hero-track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
body[data-ui-version="3.3.0"] .home-hero-track::-webkit-scrollbar { display: none; }
body[data-ui-version="3.3.0"] .home-hero-slide { position: relative; flex: 0 0 100%; min-width: 100%; min-height: clamp(470px, 64vw, 690px); overflow: hidden; scroll-snap-align: start; isolation: isolate; background: #07090e; }
body[data-ui-version="3.3.0"] .home-hero-media, body[data-ui-version="3.3.0"] .home-hero-shade { position: absolute; inset: 0; }
body[data-ui-version="3.3.0"] .home-hero-media { z-index: -3; overflow: hidden; background: radial-gradient(circle at 70% 18%, hsla(var(--spotlight-hue),70%,52%,.32), transparent 48%), #07090e; }
body[data-ui-version="3.3.0"] .home-hero-media > img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; filter: saturate(1.08) contrast(1.02); transform: scale(1.015); transition: opacity .45s ease; }
body[data-ui-version="3.3.0"] .home-hero-video { position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease; overflow: hidden; background: #000; }
body[data-ui-version="3.3.0"] .home-hero-slide.has-video .home-hero-video { opacity: 1; }
body[data-ui-version="3.3.0"] .home-hero-slide.has-video .home-hero-media > img { opacity: 0; }
body[data-ui-version="3.3.0"] .home-hero-video iframe { position: absolute; inset: 50% auto auto 50%; width: 120%; height: 120%; min-width: 100%; min-height: 100%; border: 0; transform: translate(-50%,-50%); pointer-events: none; }
body[data-ui-version="3.3.0"] .home-hero-shade { z-index: -1; background: linear-gradient(180deg, rgba(4,5,8,.08) 0%, rgba(4,5,8,.08) 28%, rgba(4,5,8,.48) 58%, rgba(4,5,8,.98) 91%), linear-gradient(90deg, rgba(4,5,8,.52), transparent 68%); }
body[data-ui-version="3.3.0"] .home-hero-copy { min-height: inherit; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: clamp(28px,5vw,54px) clamp(20px,6vw,72px) 62px; color: #fff; }
body[data-ui-version="3.3.0"] .home-hero-kicker { margin-bottom: 12px; color: #d8b8ff; font-size: 13px; line-height: 1; font-weight: 850; letter-spacing: .02em; text-transform: uppercase; }
body[data-ui-version="3.3.0"] .home-hero-copy h2 { max-width: 15ch; margin: 0; font: 900 clamp(38px,7vw,78px)/.94 Inter,system-ui,sans-serif; letter-spacing: -.065em; text-wrap: balance; text-shadow: 0 8px 30px rgba(0,0,0,.5); }
body[data-ui-version="3.3.0"] .home-hero-copy p { margin: 18px 0 0; color: rgba(255,255,255,.82); font-size: 15px; font-weight: 750; }
body[data-ui-version="3.3.0"] .home-hero-copy small { max-width: 48ch; margin-top: 12px; color: rgba(255,255,255,.76); font-size: 13px; line-height: 1.4; font-weight: 650; }
body[data-ui-version="3.3.0"] .home-hero-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; }
body[data-ui-version="3.3.0"] .home-hero-primary { min-height: 54px; min-width: 190px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; background: linear-gradient(110deg,#ff4a18,#ff9a18); color: #fff; font-weight: 850; box-shadow: 0 14px 36px rgba(255,79,25,.28); }
body[data-ui-version="3.3.0"] .home-hero-primary .ui-icon { width: 23px; height: 23px; }
body[data-ui-version="3.3.0"] .home-hero-circle { width: 54px; height: 54px; display: inline-grid; place-items: center; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(27,28,33,.84); color: #fff; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
body[data-ui-version="3.3.0"] .home-hero-circle.is-active { background: rgba(61,154,255,.95); color: #fff; }
body[data-ui-version="3.3.0"] .home-hero-circle .ui-icon { width: 24px; height: 24px; }
body[data-ui-version="3.3.0"] .home-hero-dots { position: absolute; z-index: 4; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 8px; }
body[data-ui-version="3.3.0"] .home-hero-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.28); transition: width .2s ease, background .2s ease; }
body[data-ui-version="3.3.0"] .home-hero-dots button.is-active { width: 28px; background: #fff; }
body[data-ui-version="3.3.0"] .home-hero-empty { min-height: 420px; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 30px; text-align: center; }
body[data-ui-version="3.3.0"] .home-media-shelf { min-width: 0; }
body[data-ui-version="3.3.0"] .home-media-shelf header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
body[data-ui-version="3.3.0"] .home-media-shelf h2 { margin: 0; font: 850 clamp(20px,4vw,30px)/1.05 Inter,system-ui,sans-serif; letter-spacing: -.035em; }
body[data-ui-version="3.3.0"] .home-media-shelf-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(132px, 15%); gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 10px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
body[data-ui-version="3.3.0"] .home-media-shelf-track::-webkit-scrollbar { display: none; }
body[data-ui-version="3.3.0"] .home-media-tile { min-width: 0; padding: 0; border: 0; background: transparent; color: var(--cinema-text); text-align: left; scroll-snap-align: start; }
body[data-ui-version="3.3.0"] .home-media-tile-poster { position: relative; display: block; aspect-ratio: 2/3; overflow: hidden; border-radius: 17px; background: rgba(255,255,255,.06); box-shadow: 0 12px 28px rgba(0,0,0,.22); }
body[data-ui-version="3.3.0"] .home-media-tile-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
body[data-ui-version="3.3.0"] .home-media-tile:active .home-media-tile-poster img { transform: scale(.975); }
body[data-ui-version="3.3.0"] .home-media-tile-poster em { position: absolute; right: 7px; top: 7px; min-height: 24px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(10,11,15,.78); color: #ffe57b; font-size: 10px; font-style: normal; font-weight: 850; backdrop-filter: blur(12px); }
body[data-ui-version="3.3.0"] .home-media-tile-copy { display: grid; gap: 3px; padding: 9px 3px 0; }
body[data-ui-version="3.3.0"] .home-media-tile-copy b { overflow: hidden; color: var(--cinema-text); font-size: 13px; line-height: 1.2; font-weight: 780; white-space: nowrap; text-overflow: ellipsis; }
body[data-ui-version="3.3.0"] .home-media-tile-copy small { overflow: hidden; color: var(--cinema-muted); font-size: 10px; font-weight: 620; white-space: nowrap; text-overflow: ellipsis; }
body[data-ui-version="3.3.0"] .home-library-strip { margin-top: -4px; }
@media (max-width:760px) {
  body[data-ui-version="3.3.0"][data-screen="discover"] .content { padding-top: 8px; }
  body[data-ui-version="3.3.0"][data-screen="discover"] .topbar { grid-template-columns: 38px minmax(0,1fr) 42px; }
  
  
  body[data-ui-version="3.3.0"] .home-screen { gap: 22px; }
  body[data-ui-version="3.3.0"] .home-showcase { margin-inline: -12px; border-radius: 0 0 30px 30px; }
  body[data-ui-version="3.3.0"] .home-hero-slide { min-height: min(72vh, 650px); }
  body[data-ui-version="3.3.0"] .home-hero-video iframe { width: 205%; height: 116%; }
  body[data-ui-version="3.3.0"] .home-hero-copy { padding: 30px 20px 60px; }
  body[data-ui-version="3.3.0"] .home-hero-copy h2 { max-width: 12ch; font-size: clamp(39px,12vw,58px); }
  body[data-ui-version="3.3.0"] .home-hero-copy small { max-width: 31ch; }
  body[data-ui-version="3.3.0"] .home-hero-primary { min-width: 0; flex: 1; padding-inline: 22px; }
  body[data-ui-version="3.3.0"] .home-hero-circle { flex: 0 0 54px; }
  body[data-ui-version="3.3.0"] .home-hero-actions { width: min(100%, 390px); }
  body[data-ui-version="3.3.0"] .home-media-shelf-track { grid-auto-columns: minmax(116px, 34vw); gap: 10px; margin-right: -12px; }
  body[data-ui-version="3.3.0"] .home-media-tile-poster { border-radius: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-ui-version="3.3.0"] .home-hero-track { scroll-behavior: auto; }
  body[data-ui-version="3.3.0"] .home-hero-video { display: none; }
}
@media (max-width:760px) {
  body[data-ui-version="3.3.0"][data-screen="discover"] #filterToggle { display: none !important; }
}


/* 3.0.26 cinematic home corrections */
body[data-ui-version="3.3.0"] .avatar.has-photo { color: transparent; background-color: #101722; background-repeat: no-repeat; background-size: cover; background-position: center; }
body[data-ui-version="3.3.0"] .home-hero-track,
body[data-ui-version="3.3.0"] .home-media-shelf-track { touch-action: pan-x pan-y; }
body[data-ui-version="3.3.0"] .home-hero-video,
body[data-ui-version="3.3.0"] .home-hero-video iframe { width: 100%; height: 100%; }
body[data-ui-version="3.3.0"] .home-hero-copy h2 { max-width: 17ch; font-size: clamp(34px, 5.8vw, 64px); line-height: .98; letter-spacing: -.05em; }
body[data-ui-version="3.3.0"] .home-hero-slide.is-title-long .home-hero-copy h2 { max-width: 18ch; font-size: clamp(31px, 5.1vw, 54px); }
body[data-ui-version="3.3.0"] .home-hero-slide.is-title-very-long .home-hero-copy h2 { max-width: 19ch; font-size: clamp(28px, 4.5vw, 46px); line-height: 1; letter-spacing: -.035em; }
body[data-ui-version="3.3.0"] .home-hero-copy p { margin-top: 12px; }
body[data-ui-version="3.3.0"] .home-hero-copy small { margin-top: 9px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body[data-ui-version="3.3.0"] .home-hero-actions { margin-top: 18px; }
@media (max-width: 760px) {
  body[data-ui-version="3.3.0"] .home-hero-slide { min-height: min(66vh, 590px); }
  body[data-ui-version="3.3.0"] .home-hero-copy { padding: 26px 18px 56px; }
  body[data-ui-version="3.3.0"] .home-hero-copy h2 { max-width: 15ch; font-size: clamp(33px, 9.8vw, 46px); line-height: .98; letter-spacing: -.045em; }
  body[data-ui-version="3.3.0"] .home-hero-slide.is-title-long .home-hero-copy h2 { max-width: 16ch; font-size: clamp(29px, 8.4vw, 39px); }
  body[data-ui-version="3.3.0"] .home-hero-slide.is-title-very-long .home-hero-copy h2 { max-width: 17ch; font-size: clamp(26px, 7.5vw, 34px); line-height: 1.02; }
  body[data-ui-version="3.3.0"] .home-hero-kicker { margin-bottom: 9px; font-size: 11px; }
  body[data-ui-version="3.3.0"] .home-hero-copy p { margin-top: 10px; font-size: 14px; }
  body[data-ui-version="3.3.0"] .home-hero-copy small { max-width: 34ch; margin-top: 8px; font-size: 12px; }
  body[data-ui-version="3.3.0"] .home-hero-actions { margin-top: 16px; }
  body[data-ui-version="3.3.0"] .home-hero-primary { min-height: 50px; }
  body[data-ui-version="3.3.0"] .home-hero-circle { width: 50px; height: 50px; flex-basis: 50px; }
}


/* Mindful intro and resilient trailer baseline. */
body[data-ui-version="3.3.0"] .home-intro { padding: 8px 4px 18px; }
body[data-ui-version="3.3.0"] .home-intro > span { display: block; margin-bottom: 8px; color: var(--accent, #4ab5ff); font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: .18em; }
body[data-ui-version="3.3.0"] .home-intro h2 { margin: 0; max-width: 720px; color: var(--text, #fff); font-family: Inter, system-ui, sans-serif; font-size: clamp(28px, 6vw, 52px); line-height: .98; letter-spacing: -.055em; font-weight: 900; }
body[data-ui-version="3.3.0"] .home-intro p { margin: 12px 0 0; max-width: 620px; color: var(--muted, rgba(255,255,255,.64)); font-size: 13px; line-height: 1.45; font-weight: 600; }
body[data-ui-version="3.3.0"] .home-hero-direct-player { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); border: 0; pointer-events: none; }
body[data-ui-version="3.3.0"] .home-screen,
body[data-ui-version="3.3.0"] .home-showcase,
body[data-ui-version="3.3.0"] .home-hero-track { touch-action: pan-y pinch-zoom; }
body[data-ui-version="3.3.0"] .home-hero-track { scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
@media (max-width: 680px) {
  body[data-ui-version="3.3.0"] .home-intro { padding: 4px 4px 16px; }
  body[data-ui-version="3.3.0"] .home-intro h2 { font-size: clamp(30px, 10vw, 42px); }
  body[data-ui-version="3.3.0"] .home-intro p { font-size: 12px; margin-top: 10px; }
}


/* Mindful header panel: watermark is isolated to the intro. */
body[data-ui-version="3.3.0"] .home-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 168px;
  padding: 30px 26px 28px;
  border: 1px solid rgba(111, 151, 211, .28);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(22, 34, 55, .98), rgba(12, 18, 31, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    inset 0 -24px 60px rgba(0, 0, 0, .16),
    0 16px 42px rgba(0, 0, 0, .22);
}
body[data-ui-version="3.3.0"] .home-intro::before {
  content: "UNWATCHD";
  position: absolute;
  z-index: -1;
  right: -16px;
  top: 12px;
  color: rgba(255, 255, 255, .035);
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(66px, 16vw, 138px);
  line-height: .82;
  font-weight: 900;
  letter-spacing: -.085em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
body[data-ui-version="3.3.0"] .home-intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8px 14px auto;
  height: 7px;
  opacity: .35;
  background: radial-gradient(circle, rgba(3, 7, 13, .95) 0 3px, transparent 3.4px) 0 0 / 18px 7px repeat-x;
  pointer-events: none;
}
body[data-ui-version="3.3.0"] .home-intro > span {
  position: relative;
  display: block;
  margin: 0 0 10px;
  color: rgba(214, 224, 241, .68);
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .24em;
}
body[data-ui-version="3.3.0"] .home-intro h2 {
  position: relative;
  max-width: 690px;
  font-size: clamp(28px, 5.8vw, 50px);
  line-height: 1.02;
  letter-spacing: -.045em;
  text-decoration: none !important;
  border: 0 !important;
  background: none !important;
}
body[data-ui-version="3.3.0"] .home-intro h2::before,
body[data-ui-version="3.3.0"] .home-intro h2::after {
  content: none !important;
  display: none !important;
}
body[data-ui-version="3.3.0"] .home-intro p {
  position: relative;
  max-width: 540px;
  margin-top: 14px;
  color: rgba(205, 214, 231, .72);
}
@media (max-width: 680px) {
  body[data-ui-version="3.3.0"] .home-intro {
    min-height: 146px;
    padding: 27px 20px 22px;
    border-radius: 21px;
  }
  body[data-ui-version="3.3.0"] .home-intro::before {
    right: -9px;
    top: 18px;
    font-size: clamp(58px, 22vw, 92px);
  }
  body[data-ui-version="3.3.0"] .home-intro h2 {
    max-width: 17ch;
    font-size: clamp(27px, 8.5vw, 38px);
    line-height: 1.03;
    letter-spacing: -.035em;
  }
  body[data-ui-version="3.3.0"] .home-intro p {
    max-width: 32ch;
    margin-top: 11px;
    font-size: 12px;
  }
}


/* Shared film header panels, native hero swipes and inline trailers. */







/* Native horizontal carousel: global back-swipe ignores data-no-swipe surfaces. */
body[data-ui-version="3.3.0"] .home-hero-track {
  touch-action: pan-x pan-y pinch-zoom !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
body[data-ui-version="3.3.0"] .home-hero-slide { scroll-snap-stop: always; }
body[data-ui-version="3.3.0"] .home-media-shelf-track { touch-action: pan-x pan-y pinch-zoom; }

/* Reduced Motion must not disable the video itself. Only animations are reduced. */
@media (prefers-reduced-motion: reduce) {
  body[data-ui-version="3.3.0"] .home-hero-video { display: block !important; transition: none !important; }
  body[data-ui-version="3.3.0"] .home-hero-media > img { transition: none !important; }
}



/* 3.10.0-r25 — lightweight Continue watching shelf. */
body[data-ui-version="3.3.0"] .home-media-shelf.is-continue-watching .eyebrow { margin: 0 0 5px; }
body[data-ui-version="3.3.0"] .home-media-tile.is-progress .home-media-tile-poster em {
  width: 30px;
  min-height: 30px;
  padding: 0;
  justify-content: center;
  color: var(--cinema-accent-text);
  background: var(--cinema-accent);
}
body[data-ui-version="3.3.0"] .home-media-tile.is-progress .home-media-tile-poster em .ui-icon { width: 15px; height: 15px; }

/* source: css/components/startup-rating-trailer.css */
/* Startup, rating and trailer components. Source order is preserved from the validated previous build. */
/* Unwatchd 3.3.0 — startup, rating and trailer components. */
body.is-booting { overflow: hidden; }
body.is-booting #app { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.992); }
body.is-ready #app { opacity: 1; visibility: visible; transform: none; transition: opacity .46s ease, transform .46s cubic-bezier(.2,.8,.2,1); }

.startup-screen {
  position: fixed;
  z-index: var(--uw-z-startup);
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 58% 32%, rgba(66, 132, 226, .16), transparent 40%),
    linear-gradient(145deg, #111b2b, #070b12 68%);
  color: var(--uw-text);
  opacity: 1;
  transition: opacity .5s ease, visibility .5s ease;
}
body.is-ready .startup-screen { opacity: 0; visibility: hidden; pointer-events: none; }
.startup-content { position: relative; display: grid; justify-items: center; gap: 18px; text-align: center; }
.startup-logo {
  display: block;
  font-size: clamp(48px, 15vw, 92px);
  line-height: .9;
  font-weight: 900;
  letter-spacing: -.08em;
  transform-origin: center;
  will-change: transform, opacity, filter;
  animation: uw-startup-logo-pulse 1s cubic-bezier(.45,0,.25,1) 3 both;
}
.startup-content p { max-width: 300px; margin: 0; color: rgba(225, 233, 246, .78); font-size: 14px; font-weight: 650; }
.startup-content p[hidden] { display: none; }
.startup-has-error .startup-logo { animation: none; opacity: 1; }
#startupRetry { min-height: 44px; margin-top: 2px; padding: 0 20px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-weight: 750; }
@keyframes uw-startup-logo-pulse {
  0%, 100% { opacity: .62; transform: scale(.985); filter: brightness(.88); }
  50% { opacity: 1; transform: scale(1.035); filter: brightness(1.16); }
}

body[data-ui-version="3.3.0"] .avatar.is-loading-photo { color: transparent; background-image: none !important; background-color: #111a28; }
body[data-ui-version="3.3.0"] .avatar.has-photo { color: transparent; background-repeat: no-repeat; background-size: cover; background-position: center; }

/* Rating is a clean component, intentionally unrelated to film headers. */
body[data-ui-version="3.3.0"] .rating-dialog {
  width: min(440px, calc(100% - 28px));
  max-width: 440px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--uw-radius-lg) !important;
  background: transparent !important;
  color: var(--uw-text);
  overflow: visible;
  box-shadow: var(--uw-shadow-dialog);
}
body[data-ui-version="3.3.0"] .rating-dialog::before,
body[data-ui-version="3.3.0"] .rating-dialog::after,
body[data-ui-version="3.3.0"] .rating-sheet::before,
body[data-ui-version="3.3.0"] .rating-sheet::after { content: none !important; display: none !important; }
body[data-ui-version="3.3.0"] .rating-dialog::backdrop { background: rgba(2, 5, 10, .72); backdrop-filter: blur(10px); }
body[data-ui-version="3.3.0"] .rating-sheet {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius-lg);
  background: linear-gradient(155deg, #182235, #0f1623 68%);
}
body[data-ui-version="3.3.0"] .rating-sheet-head { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start; gap: 14px; }
body[data-ui-version="3.3.0"] .rating-sheet-head p { margin: 0 0 7px; color: var(--uw-muted); font-size: 10px; font-weight: 800; letter-spacing: .2em; }
body[data-ui-version="3.3.0"] .rating-sheet-head h2 { max-width: 100%; margin: 0; overflow: hidden; color: var(--uw-text); font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-version="3.3.0"] .rating-close { width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: rgba(255,255,255,.06); color: var(--uw-text); font-size: 25px; line-height: 1; }
body[data-ui-version="3.3.0"] .rating-value { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 2px 0 0; }
body[data-ui-version="3.3.0"] .rating-value output { color: var(--uw-text); font-family: inherit; font-size: clamp(58px, 18vw, 78px); line-height: .9; font-weight: 850; letter-spacing: -.065em; }
body[data-ui-version="3.3.0"] .rating-value span { color: var(--uw-muted); font-size: 17px; font-weight: 700; }
body[data-ui-version="3.3.0"] .rating-control { display: grid; gap: 12px; padding: 4px 2px 0; }
body[data-ui-version="3.3.0"] #ratingRange {
  --rating-progress: 80%;
  width: 100%;
  height: 30px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}
body[data-ui-version="3.3.0"] #ratingRange::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--uw-accent) 0 var(--rating-progress), rgba(255,255,255,.14) var(--rating-progress) 100%); }
body[data-ui-version="3.3.0"] #ratingRange::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,.14); }
body[data-ui-version="3.3.0"] #ratingRange::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--uw-accent); }
body[data-ui-version="3.3.0"] #ratingRange::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; appearance: none; -webkit-appearance: none; border: 4px solid var(--uw-accent); border-radius: 50%; background: #fff; box-shadow: 0 5px 18px rgba(0,0,0,.35); }
body[data-ui-version="3.3.0"] #ratingRange::-moz-range-thumb { width: 18px; height: 18px; border: 4px solid var(--uw-accent); border-radius: 50%; background: #fff; box-shadow: 0 5px 18px rgba(0,0,0,.35); }
body[data-ui-version="3.3.0"] .rating-scale { display: flex; justify-content: space-between; color: var(--uw-muted); font-size: 11px; font-weight: 650; }
body[data-ui-version="3.3.0"] .rating-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body[data-ui-version="3.3.0"] .rating-button { min-width: 0; height: var(--uw-control-height); padding: 0 16px; border-radius: 15px; font: 750 14px/1 inherit; }
body[data-ui-version="3.3.0"] .rating-button.secondary { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: var(--uw-text); }
body[data-ui-version="3.3.0"] .rating-button.primary { border: 1px solid transparent; background: linear-gradient(135deg, var(--uw-accent), var(--uw-accent-strong)); color: #fff; box-shadow: 0 12px 28px rgba(33,120,238,.25); }

/* One muted inline trailer player at a time, shared by desktop and mobile. */


body[data-ui-version="3.3.0"] .home-hero-track {
  touch-action: pan-x pan-y pinch-zoom !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: auto !important;
}
body[data-ui-version="3.3.0"] .home-hero-slide { scroll-snap-align: start; scroll-snap-stop: always; }
body[data-ui-version="3.3.0"] .home-hero-actions button { min-width: 50px; min-height: 50px; touch-action: manipulation; }
body[data-ui-version="3.3.0"] .home-hero-video { display: block !important; }
body[data-ui-version="3.3.0"] .home-hero-video iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 122%;
  height: 122%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

@media (pointer: coarse), (max-width: 900px) {
  body[data-ui-version="3.3.0"] .home-hero-video iframe { width: 210%; height: 118%; }
}

@media (max-width: 600px) {
  body[data-ui-version="3.3.0"] .rating-dialog { width: 100%; max-width: none; margin: auto 0 0; border-radius: 24px 24px 0 0 !important; }
  body[data-ui-version="3.3.0"] .rating-sheet { padding: 22px max(18px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); border-radius: 24px 24px 0 0; }
  body[data-ui-version="3.3.0"] .rating-sheet-head h2 { font-size: 18px; }
  body[data-ui-version="3.3.0"] .rating-actions { gap: 9px; }
  body[data-ui-version="3.3.0"] .rating-button { height: 50px; padding-inline: 10px; }
  body[data-ui-version="3.3.0"] .cinema-library-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  body[data-ui-version="3.3.0"] .cinema-library-stat { min-width: 0; padding: 10px 7px !important; gap: 7px !important; }
  body[data-ui-version="3.3.0"] .cinema-library-stat small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .startup-logo { animation: none; opacity: 1; transform: none; filter: none; }
  body.is-ready #app, .startup-screen { transition: none; }
}

/* Muted background trailers start automatically; the carousel exposes no dead play control. */
body[data-ui-version="3.3.0"] .home-hero-direct-player {
  opacity: 0;
  transition: opacity .32s ease;
  background: #05070a;
}
body[data-ui-version="3.3.0"] .home-hero-slide.has-video .home-hero-direct-player { opacity: 1; }
body[data-ui-version="3.3.0"] .home-hero-slide.is-trailer-loading .home-hero-media img { opacity: 1; }
body[data-ui-version="3.3.0"] .home-hero-slide.has-video .home-hero-media img { opacity: 0; transition: opacity .35s ease; }

body[data-ui-version="3.3.0"] .home-hero-other {
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--uw-radius-pill);
  background: rgba(21,24,31,.76);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
body[data-ui-version="3.3.0"] .home-hero-actions { flex-wrap: wrap; }
body[data-ui-version="3.3.0"] .home-hero-primary .ui-icon { display: none; }

/* source: css/responsive/compact-mobile.css */
/* Compact mobile rhythm and shared graphite surfaces. Source order is preserved from the validated previous build. */
/* ========================================================================
   Compact mobile rhythm and unified graphite surfaces
   ======================================================================== */
body[data-ui-version="3.3.0"][data-screen="club"],
body[data-ui-version="3.3.0"][data-screen="search"],
body[data-ui-version="3.3.0"][data-screen="catalogs"] {
  --cinema-bg: #0b111a;
  --cinema-panel: rgba(22, 28, 40, .94);
  --cinema-panel-strong: #141b28;
  background:
    radial-gradient(circle at 14% -8%, rgba(62, 122, 184, .19), transparent 34%),
    linear-gradient(180deg, #111a28 0%, #0d141f 42%, #0a0f17 100%);
  background-attachment: fixed;
}

body[data-ui-version="3.3.0"][data-screen="club"] .app-shell,
body[data-ui-version="3.3.0"][data-screen="search"] .app-shell,
body[data-ui-version="3.3.0"][data-screen="catalogs"] .app-shell,
body[data-ui-version="3.3.0"][data-screen="club"] .main-panel,
body[data-ui-version="3.3.0"][data-screen="search"] .main-panel,
body[data-ui-version="3.3.0"][data-screen="catalogs"] .main-panel {
  background: transparent;
}

body[data-ui-version="3.3.0"][data-screen="club"] .results-meta:empty,
body[data-ui-version="3.3.0"][data-screen="search"] .results-meta:empty {
  display: none;
}

body[data-ui-version="3.3.0"][data-screen="club"] .club-grid {
  gap: 10px;
}

body[data-ui-version="3.3.0"][data-screen="club"] .club-people-list {
  gap: 8px;
}

body[data-ui-version="3.3.0"][data-screen="club"] .club-section-head {
  margin-bottom: 8px;
}

body[data-ui-version="3.3.0"][data-screen="club"] .club-section {
  gap: 8px;
}

body[data-ui-version="3.3.0"][data-screen="club"] .club-section-nav {
  border: 1px solid rgba(151, 177, 218, .12);
  border-radius: 15px;
  background: rgba(255,255,255,.045);
}

body[data-ui-version="3.3.0"][data-screen="club"] .club-section-nav button.is-active {
  border-radius: 11px;
  background: rgba(247,249,252,.96);
  color: #10141c;
}

body[data-ui-version="3.3.0"][data-screen="club"] .club-person {
  border: 1px solid rgba(151, 177, 218, .09);
  background: rgba(20, 25, 37, .92);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}

body[data-ui-version="3.3.0"][data-screen="search"] .empty-state {
  max-width: 620px;
  margin-inline: auto;
  border: 1px solid rgba(151, 177, 218, .08);
  background: rgba(20, 25, 37, .78);
  box-shadow: 0 16px 38px rgba(0,0,0,.16);
}

@media (max-width: 760px) {
  body[data-ui-version="3.3.0"][data-screen="club"] .content,
  body[data-ui-version="3.3.0"][data-screen="search"] .content,
  body[data-ui-version="3.3.0"][data-screen="catalogs"] .content {
    padding-top: 10px;
    padding-inline: 14px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .view-header,
  body[data-ui-version="3.3.0"][data-screen="search"] .view-header,
  body[data-ui-version="3.3.0"][data-screen="catalogs"] .view-header {
    margin-bottom: 10px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .quick-filters,
  body[data-ui-version="3.3.0"][data-screen="search"] .quick-filters,
  body[data-ui-version="3.3.0"][data-screen="catalogs"] .quick-filters {
    gap: 7px;
    margin: 0 -2px 8px;
    padding: 0 2px 4px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .chip,
  body[data-ui-version="3.3.0"][data-screen="search"] .chip,
  body[data-ui-version="3.3.0"][data-screen="catalogs"] .chip {
    min-height: 34px;
    padding-inline: 14px;
    font-size: 12.5px;
  }

  body[data-ui-version="3.3.0"][data-screen="catalogs"] .results-meta {
    min-height: 20px;
    margin-bottom: 5px;
    font-size: 9.5px;
  }

  body[data-ui-version="3.3.0"][data-screen="catalogs"] .media-grid {
    gap: 16px 9px;
  }

  body[data-ui-version="3.3.0"][data-screen="catalogs"] .media-info {
    padding-top: 7px;
  }

  body[data-ui-version="3.3.0"][data-screen="catalogs"] .media-info h3 {
    font-size: 13px;
  }

  body[data-ui-version="3.3.0"][data-screen="catalogs"] .media-info p {
    margin-top: 4px;
    font-size: 9.5px;
  }

  body[data-ui-version="3.3.0"][data-screen="catalogs"] .card-status {
    left: 7px;
    right: 7px;
    bottom: 7px;
    gap: 4px;
  }

  body[data-ui-version="3.3.0"][data-screen="catalogs"] .status-dot {
    min-width: 27px;
    height: 27px;
    border-radius: 8px;
  }

  body[data-ui-version="3.3.0"][data-screen="search"] .empty-state {
    min-height: 0;
    margin-top: 7px;
    padding: 32px 18px 34px;
    border-radius: 21px;
  }

  body[data-ui-version="3.3.0"][data-screen="search"] .empty-state div {
    font-size: 35px;
    line-height: 1;
  }

  body[data-ui-version="3.3.0"][data-screen="search"] .empty-state h2 {
    margin-top: 10px;
    font-size: 24px;
  }

  body[data-ui-version="3.3.0"][data-screen="search"] .empty-state p {
    max-width: 290px;
    margin: 10px auto 0;
    font-size: 13px;
    line-height: 1.45;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-grid {
    gap: 8px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-section-nav {
    gap: 3px;
    margin: 0 0 4px;
    padding: 3px;
    border-radius: 14px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-section-nav button {
    min-height: 34px;
    padding-inline: 6px;
    font-size: 10.5px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-section-nav button b {
    min-width: 18px;
    height: 18px;
    font-size: 9px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-section-head {
    margin: 4px 0 6px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-section-head .eyebrow {
    margin-bottom: 4px;
    font-size: 8.5px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-section-head h2 {
    font-size: 25px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-people-list {
    gap: 7px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-person,
  body[data-ui-version="3.3.0"][data-screen="club"] .club-person.is-compact {
    grid-template-columns: 40px minmax(0, 1fr) 32px;
    gap: 9px;
    padding: 9px 9px 9px 10px;
    border-radius: 16px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-person .club-avatar,
  body[data-ui-version="3.3.0"][data-screen="club"] .club-person.is-compact .club-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-person-main {
    gap: 4px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-person-title {
    gap: 6px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-person-title h3 {
    font-size: 14px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-person-title small {
    margin-top: 2px;
    font-size: 9.5px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-person-title strong {
    min-width: 40px;
    min-height: 24px;
    padding-inline: 6px;
    font-size: 10px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-person-bio {
    display: none;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-person-genres {
    gap: 4px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-person-genres span {
    max-width: 46%;
    padding: 3px 6px;
    font-size: 8.5px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-person-footer {
    min-height: 28px;
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 6px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-person-footer b {
    font-size: 9.5px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-person-action {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-person-action svg {
    width: 15px;
    height: 15px;
  }

  body[data-ui-version="3.3.0"][data-screen="club"] .club-person-chevron {
    display: none;
  }
}

/* source: css/responsive/desktop.css */
/* Desktop header, fullscreen and wide-screen refinements. Source order is preserved from the validated previous build. */
/* ========================================================================
   Unwatchd 3.3.0 — frontend core architecture and explicit desktop fullscreen
   ======================================================================== */
body[data-ui-version="3.3.0"] .home-intro {
  min-height: 148px;
  padding: 25px 24px 21px;
}
body[data-ui-version="3.3.0"] .home-intro > span { margin-bottom: 8px; }
body[data-ui-version="3.3.0"] .home-intro h2 { line-height: 1; }
body[data-ui-version="3.3.0"] .home-intro p { margin-top: 10px; line-height: 1.38; }

.desktop-fullscreen-button { display: none; }
.desktop-fullscreen-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.desktop-fullscreen-button .fullscreen-exit-icon { display: none; }
.desktop-fullscreen-button.is-active .fullscreen-enter-icon { display: none; }
.desktop-fullscreen-button.is-active .fullscreen-exit-icon { display: block; }

@media (min-width: 1024px) {
  body[data-ui-version="3.3.0"] .topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-height: 76px;
    padding: 12px clamp(22px, 3vw, 46px);
  }
  body[data-ui-version="3.3.0"] .global-search {
    flex: 0 1 620px;
    width: min(620px, calc(100vw - var(--sidebar) - 210px));
    min-width: 320px;
  }
  body[data-ui-version="3.3.0"] .search-submit {
    width: 82px;
    min-width: 82px;
    padding-inline: 0;
  }
  body[data-ui-version="3.3.0"] .topbar > .icon-button {
    flex: 0 0 44px;
  }
  body[data-ui-version="3.3.0"] .desktop-fullscreen-button:not([hidden]) {
    display: grid;
    place-items: center;
  }
  body[data-ui-version="3.3.0"] .desktop-fullscreen-button.is-active {
    color: var(--cinema-accent, #5dc8ff);
    background: rgba(93, 200, 255, .13);
  }
  body[data-ui-version="3.3.0"] .brand {
    width: 100%;
    min-width: 0;
  }
  body[data-ui-version="3.3.0"] .brand-mark { flex: 0 0 42px; }
  body[data-ui-version="3.3.0"] .brand-copy { flex: 1 1 auto; min-width: 0; }
}

@media (max-width: 680px) {
  body[data-ui-version="3.3.0"] .home-intro {
    min-height: 0;
    padding: 22px 18px 18px;
  }
  body[data-ui-version="3.3.0"] .home-intro::before {
    top: 15px;
    font-size: clamp(56px, 20vw, 84px);
  }
  body[data-ui-version="3.3.0"] .home-intro > span {
    margin-bottom: 7px;
    font-size: 9px;
  }
  body[data-ui-version="3.3.0"] .home-intro h2 {
    max-width: 17ch;
    font-size: clamp(27px, 8.1vw, 36px);
    line-height: 1;
  }
  body[data-ui-version="3.3.0"] .home-intro p {
    max-width: 31ch;
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 1.36;
  }
}

/* source: css/components/notification-center.css */
/* Notification inbox: one focused graphite modal with isolated scrolling. */
body[data-ui-version="3.3.0"] .notification-center-button {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}
body[data-ui-version="3.3.0"] .notification-center-button > svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body[data-ui-version="3.3.0"] .notification-alert {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 2px solid var(--uw-bg-elevated);
  border-radius: var(--uw-radius-pill);
  background: var(--uw-danger);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}
body[data-ui-version="3.3.0"] .notification-dialog {
  position: fixed;
  inset: 0;
  z-index: 2147481000;
  width: 100vw;
  height: var(--uw-app-viewport-height, 100dvh);
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 12px;
  display: none;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: rgba(3, 6, 11, .92);
  color: var(--uw-text);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overscroll-behavior: none;
  touch-action: pan-y;
  box-sizing: border-box;
}
body[data-ui-version="3.3.0"] .notification-dialog[hidden] { display: none !important; }
body[data-ui-version="3.3.0"] .notification-dialog.is-open { display: grid; }
html.is-notification-center-open { overscroll-behavior: none; }
body[data-ui-version="3.3.0"] .notification-shell {
  width: min(580px, 100%);
  height: min(780px, calc(var(--uw-app-viewport-height, 100dvh) - 24px));
  max-height: calc(var(--uw-app-viewport-height, 100dvh) - 24px);
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--uw-border-strong);
  border-radius: var(--uw-radius-xl);
  background:
    radial-gradient(circle at 100% 0, rgba(78, 156, 255, .06), transparent 34%),
    linear-gradient(180deg, #121b29 0%, #0d141f 100%);
  box-shadow: var(--uw-shadow-dialog);
  touch-action: pan-y;
}
body[data-ui-version="3.3.0"] .notification-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uw-space-3);
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--uw-border);
}
body[data-ui-version="3.3.0"] .notification-head h2,
body[data-ui-version="3.3.0"] .notification-head p { margin: 0; }
body[data-ui-version="3.3.0"] .notification-head h2 { margin-top: 3px; font-size: 22px; line-height: 1.05; }
body[data-ui-version="3.3.0"] .notification-head-actions { display: flex; align-items: center; gap: var(--uw-space-2); }
body[data-ui-version="3.3.0"] .notification-content {
  min-height: 0;
  overflow: hidden auto;
  padding: 10px;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
body[data-ui-version="3.3.0"] .notification-list { display: grid; gap: 8px; overflow: hidden; }
body[data-ui-version="3.3.0"] .notification-row {
  --notification-swipe-progress: 0;
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--uw-border) 72%, transparent);
  border-radius: var(--uw-radius-md);
  background: #141d2b;
  contain: layout paint;
}
body[data-ui-version="3.3.0"] .notification-dismiss-backdrop {
  position: absolute;
  z-index: 1;
  inset: 0 0 0 auto;
  width: 112px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ef4b58, var(--uw-danger));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  opacity: var(--notification-swipe-progress);
  transition: opacity .08s linear;
  pointer-events: none;
}
body[data-ui-version="3.3.0"] .notification-dismiss-backdrop span { opacity: var(--notification-swipe-progress); transition: opacity .08s linear; }
body[data-ui-version="3.3.0"] .notification-item-main {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, #182231, #141c29);
  color: var(--uw-text);
  text-align: left;
  cursor: pointer;
  will-change: transform;
  transition: transform .18s ease, opacity .18s ease, background var(--uw-duration-fast);
  touch-action: pan-y;
}
body[data-ui-version="3.3.0"] .notification-item-main:hover { background: linear-gradient(145deg, #1b2738, #16202e); }
body[data-ui-version="3.3.0"] .notification-item-main:active { transform: scale(.992); }
body[data-ui-version="3.3.0"] .notification-item-main.is-unread {
  background: linear-gradient(145deg, color-mix(in srgb, var(--uw-accent) 15%, #182231), color-mix(in srgb, var(--uw-accent) 7%, #141c29));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--uw-accent) 70%, transparent);
}
body[data-ui-version="3.3.0"] .notification-row.is-swipe-ready .notification-item-main { transition-duration: .08s; }
body[data-ui-version="3.3.0"] .notification-row.is-dismissing { --notification-swipe-progress: 1; animation: uw-notification-dismiss .18s ease forwards; }
body[data-ui-version="3.3.0"] .notification-item-media {
  width: 52px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--uw-surface-raised);
  color: var(--uw-text-muted);
  font-size: 20px;
}
body[data-ui-version="3.3.0"] .notification-item-media img { width: 100%; height: 100%; object-fit: cover; }
body[data-ui-version="3.3.0"] .notification-item-copy { min-width: 0; display: grid; gap: 4px; }
body[data-ui-version="3.3.0"] .notification-item-copy :where(b, span, small) { overflow: hidden; text-overflow: ellipsis; }
body[data-ui-version="3.3.0"] .notification-item-copy b { font-size: 14px; white-space: nowrap; }
body[data-ui-version="3.3.0"] .notification-item-copy span { color: var(--uw-text-subtle); font-size: 12px; line-height: 1.35; }
body[data-ui-version="3.3.0"] .notification-item-copy small { color: var(--uw-text-muted); font-size: 10px; white-space: nowrap; }
body[data-ui-version="3.3.0"] .notification-item-arrow { color: var(--uw-text-muted); font-size: 22px; }
body[data-ui-version="3.3.0"] .notification-item-delete {
  position: absolute;
  z-index: 3;
  right: 7px;
  top: 7px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--uw-radius-pill);
  background: rgba(7, 10, 16, .72);
  color: rgba(255,255,255,.72);
  font-size: 18px;
  opacity: 0;
  transition: opacity .15s ease;
}
body[data-ui-version="3.3.0"] .notification-row:hover .notification-item-delete,
body[data-ui-version="3.3.0"] .notification-item-delete:focus-visible { opacity: 1; }
body[data-ui-version="3.3.0"] :is(.notification-empty, .notification-loading) {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--uw-text-muted);
  text-align: center;
}
body[data-ui-version="3.3.0"] .notification-empty b { color: var(--uw-text); font-size: 17px; }
body[data-ui-version="3.3.0"] .notification-pagination { min-height: 0; display: flex; justify-content: center; gap: 8px; padding: 0 14px 14px; }
body[data-ui-version="3.3.0"] .notification-pagination:empty { display: none; }
body[data-ui-version="3.3.0"] :is(.notification-loading-more, .notification-end) { color: var(--uw-text-muted); font-size: 11px; }
@keyframes uw-notification-dismiss { to { max-height: 0; margin: 0; opacity: 0; transform: translateX(-40px); } }
@media (max-width: 720px) {
  body[data-ui-version="3.3.0"] .notification-dialog {
    padding: 0;
  }
  body[data-ui-version="3.3.0"] .notification-shell {
    width: 100%;
    height: var(--uw-app-viewport-height, 100dvh);
    max-height: none;
    border: 0;
    border-radius: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body[data-ui-version="3.3.0"] .notification-head { flex-wrap: wrap; padding: 16px 14px 12px; }
  body[data-ui-version="3.3.0"] .notification-head-actions { max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }
  body[data-ui-version="3.3.0"] .notification-head-actions .button { min-height: 36px; padding-inline: 10px; font-size: 11px; }
  body[data-ui-version="3.3.0"] .notification-content { padding: 8px; }
  body[data-ui-version="3.3.0"] .notification-item-main { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; padding: 10px; }
  body[data-ui-version="3.3.0"] .notification-item-media { width: 46px; }
  body[data-ui-version="3.3.0"] .notification-item-delete { opacity: .72; }
}

/* source: css/components/brand.css */
/* Unwatchd brand asset component. */
.brand-mark,
.mobile-brand,
.onboarding-mark {
  overflow: hidden;
  padding: 0;
  transform: none;
  background: transparent;
  color: transparent;
}
.brand-logo,
.mobile-brand-logo,
.onboarding-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.brand-mark { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; }
.mobile-brand { padding: 2px; border-radius: 50%; }
.onboarding-mark { width: 48px; height: 48px; border-radius: 50%; }
.startup-logo {
  display: block;
  width: clamp(132px, 34vw, 208px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(55, 151, 255, .28));
}
.startup-has-error .startup-logo { animation: none; opacity: 1; transform: none; }
@media (max-width: 760px) {
  .brand-mark { width: 40px; height: 40px; flex-basis: 40px; }
  .startup-logo { width: clamp(128px, 42vw, 184px); }
}
@media (prefers-reduced-motion: reduce) {
  .startup-logo { animation: none; opacity: 1; transform: none; filter: drop-shadow(0 0 18px rgba(55, 151, 255, .24)); }
}
@keyframes uw-startup-logo-pulse {
  0%, 100% {
    opacity: .64;
    transform: scale(.975);
    filter: brightness(.86) drop-shadow(0 0 10px rgba(55, 151, 255, .18));
  }
  50% {
    opacity: 1;
    transform: scale(1.035);
    filter: brightness(1.12) drop-shadow(0 0 28px rgba(55, 151, 255, .48));
  }
}

/* source: css/components/open-beta-controls.css */
/* Unwatchd 3.6.0 — open beta controls, recommendation exclusions and shared surfaces. */
body[data-ui-version="3.3.0"] .home-library-strip {
  margin-top: -8px;
  margin-bottom: 2px;
}
body[data-ui-version="3.3.0"] .home-hero-circle.is-dismiss,
body[data-ui-version="3.3.0"] .status-dot.status-dismiss {
  color: rgba(255,255,255,.82);
  background: rgba(16,20,28,.76);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 18px;
  font-weight: 400;
}
body[data-ui-version="3.3.0"] .home-hero-circle.is-dismiss:hover,
body[data-ui-version="3.3.0"] .status-dot.status-dismiss:hover {
  color: #fff;
  background: rgba(184,66,77,.72);
}
body[data-ui-version="3.3.0"] .status-dot.status-dismiss { margin-left: auto; }

body[data-ui-version="3.3.0"] .recommendation-exclusion-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
body[data-ui-version="3.3.0"] .recommendation-exclusion-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
}
body[data-ui-version="3.3.0"] .recommendation-exclusion-item > button:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  text-align: left;
}
body[data-ui-version="3.3.0"] .recommendation-exclusion-item img,
body[data-ui-version="3.3.0"] .recommendation-exclusion-item > button:first-child > span:first-child {
  width: 42px;
  height: 58px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  object-fit: cover;
  background: rgba(255,255,255,.07);
}
body[data-ui-version="3.3.0"] .recommendation-exclusion-item > button:first-child > span:last-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}
body[data-ui-version="3.3.0"] .recommendation-exclusion-item b,
body[data-ui-version="3.3.0"] .recommendation-exclusion-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-ui-version="3.3.0"] .recommendation-exclusion-item small { color: var(--cinema-muted); }
body[data-ui-version="3.3.0"] .recommendation-exclusion-item > .button { min-height: 36px; padding-inline: 13px; }

body[data-ui-version="3.3.0"] .admin-feature-access {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  padding: 15px;
  border: 1px solid rgba(83,171,255,.18);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(25,43,68,.58), rgba(13,20,32,.64));
}
body[data-ui-version="3.3.0"] .admin-feature-access > .eyebrow { margin: 0 0 3px; }
body[data-ui-version="3.3.0"] .admin-tier.is-beta {
  color: #bdeaff;
  border-color: rgba(83,190,255,.36);
  background: rgba(42,133,188,.18);
}

/* Non-home views use the same graphite depth and rounded visual language as the home screen. */
body[data-ui-version="3.3.0"]:not([data-screen="discover"]) .main-panel {
  background:
    radial-gradient(circle at 78% 0%, rgba(45,83,130,.13), transparent 34%),
    linear-gradient(180deg, rgba(14,20,31,.84), rgba(7,10,16,.96));
}
body[data-ui-version="3.3.0"]:not([data-screen="discover"]):not([data-screen="details"]) .quick-filters,
body[data-ui-version="3.3.0"]:not([data-screen="discover"]):not([data-screen="details"]) .results-meta {
  border-radius: 18px;
}
body[data-ui-version="3.3.0"]:not([data-screen="discover"]) .chip {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.055);
}
body[data-ui-version="3.3.0"]:not([data-screen="discover"]) .chip.is-active {
  border-color: rgba(91,190,255,.32);
  background: rgba(91,190,255,.15);
  color: #eaf7ff;
}

@media (max-width: 680px) {
  body[data-ui-version="3.3.0"] .home-library-strip { margin-top: -12px; }
  body[data-ui-version="3.3.0"] .recommendation-exclusion-item { grid-template-columns: minmax(0,1fr); }
  body[data-ui-version="3.3.0"] .recommendation-exclusion-item > .button { width: 100%; }
  body[data-ui-version="3.3.0"] .card-status { gap: 3px; }
  body[data-ui-version="3.3.0"] .status-dot.status-dismiss { font-size: 15px; }
}

/* source: css/components/profile-news.css */
/* Unwatchd 3.9.0 — profile management and cinema news. */
body[data-ui-version="3.3.0"] .account-management-panel {
  display: grid;
  gap: 12px;
}
body[data-ui-version="3.3.0"] .account-management-links {
  display: grid;
  gap: 8px;
}
body[data-ui-version="3.3.0"] .account-management-links > button {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius-md);
  background: linear-gradient(145deg, rgba(25,35,51,.92), rgba(17,25,38,.96));
  color: var(--uw-text);
  text-align: left;
}
body[data-ui-version="3.3.0"] .account-management-links > button:hover {
  border-color: var(--uw-border-strong);
  background: linear-gradient(145deg, rgba(30,43,62,.96), rgba(20,30,45,.98));
}
body[data-ui-version="3.3.0"] .account-management-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(78,156,255,.11);
  color: #bcd8ff;
}
body[data-ui-version="3.3.0"] .account-management-icon .ui-icon { width: 20px; height: 20px; }
body[data-ui-version="3.3.0"] .account-management-links > button > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
body[data-ui-version="3.3.0"] .account-management-links b { font-size: 14px; }
body[data-ui-version="3.3.0"] .account-management-links small { color: var(--uw-text-muted); font-size: 11px; line-height: 1.35; }
body[data-ui-version="3.3.0"] .account-management-links em {
  min-width: 31px;
  height: 26px;
  display: grid;
  place-items: center;
  padding-inline: 8px;
  border-radius: var(--uw-radius-pill);
  background: var(--uw-surface-soft);
  color: var(--uw-text);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
body[data-ui-version="3.3.0"] .account-management-links .is-chevron { width: 17px; height: 17px; color: var(--uw-text-muted); }

body[data-ui-version="3.3.0"] .account-dialog.is-management {
  width: min(760px, calc(100vw - 28px));
  max-height: min(820px, calc(var(--uw-app-viewport-height) - 28px));
  overflow: hidden;
}
body[data-ui-version="3.3.0"] .account-dialog.is-management > div,
body[data-ui-version="3.3.0"] .account-dialog.is-management .account-management-screen {
  min-height: 0;
  height: min(820px, calc(var(--uw-app-viewport-height) - 28px));
}
body[data-ui-version="3.3.0"] .account-management-screen {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px;
  background:
    radial-gradient(circle at 100% 0, rgba(78,156,255,.08), transparent 34%),
    linear-gradient(180deg, #121b29 0%, #0c131e 100%);
}
body[data-ui-version="3.3.0"] .account-management-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
}
body[data-ui-version="3.3.0"] .account-management-head :where(h2,p) { margin: 0; }
body[data-ui-version="3.3.0"] .account-management-head h2 { margin-top: 3px; font-size: 21px; }
body[data-ui-version="3.3.0"] .account-management-head > div p:last-child { margin-top: 4px; color: var(--uw-text-muted); font-size: 11px; }
body[data-ui-version="3.3.0"] .account-management-search {
  min-height: 46px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid var(--uw-border);
  border-radius: 15px;
  background: rgba(255,255,255,.045);
}
body[data-ui-version="3.3.0"] .account-management-search .ui-icon { width: 18px; height: 18px; color: var(--uw-text-muted); }
body[data-ui-version="3.3.0"] .account-management-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--uw-text); font: inherit; }
body[data-ui-version="3.3.0"] .account-management-list {
  min-height: 0;
  overflow: auto hidden;
  display: grid;
  align-content: start;
  gap: 8px;
  padding-right: 3px;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
body[data-ui-version="3.3.0"] .account-management-item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--uw-border);
  border-radius: 16px;
  background: linear-gradient(145deg, #172232, #121a27);
}
body[data-ui-version="3.3.0"] .account-management-media {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  color: inherit;
  text-align: left;
}
body[data-ui-version="3.3.0"] .account-management-item.is-person { grid-template-columns: 44px minmax(0,1fr) auto; }
body[data-ui-version="3.3.0"] .account-management-item.is-person .account-management-poster { border-radius: 50%; aspect-ratio: 1; }
body[data-ui-version="3.3.0"] .account-management-poster {
  width: 44px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--uw-surface-raised);
  color: var(--uw-text-muted);
  font-weight: 800;
}
body[data-ui-version="3.3.0"] .account-management-poster img { width: 100%; height: 100%; object-fit: cover; }
body[data-ui-version="3.3.0"] .account-management-copy { min-width: 0; display: grid; gap: 4px; }
body[data-ui-version="3.3.0"] .account-management-copy :where(b,small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-version="3.3.0"] .account-management-copy b { font-size: 13px; }
body[data-ui-version="3.3.0"] .account-management-copy small { color: var(--uw-text-muted); font-size: 10px; }
body[data-ui-version="3.3.0"] .account-management-more { justify-self: center; }

body[data-ui-version="3.3.0"][data-screen="news"] .results-meta { margin-bottom: 12px; }
body[data-ui-version="3.3.0"] .news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
body[data-ui-version="3.3.0"] .news-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius-lg);
  background: linear-gradient(155deg, #182333, #101824);
  box-shadow: var(--uw-shadow-card);
}
body[data-ui-version="3.3.0"] .news-card.is-opened { opacity: .76; }
body[data-ui-version="3.3.0"] .news-card-main { width: 100%; display: grid; grid-template-columns: minmax(128px, 38%) minmax(0,1fr); min-height: 176px; color: inherit; text-align: left; }
body[data-ui-version="3.3.0"] .news-card-art { min-height: 176px; overflow: hidden; display: grid; place-items: center; background: var(--uw-surface-raised); color: var(--uw-text-muted); }
body[data-ui-version="3.3.0"] .news-card-art img { width: 100%; height: 100%; object-fit: cover; }
body[data-ui-version="3.3.0"] .news-card-copy { min-width: 0; display: flex; flex-direction: column; gap: 9px; padding: 16px 42px 15px 15px; }
body[data-ui-version="3.3.0"] .news-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--uw-text-muted); font-size: 10px; }
body[data-ui-version="3.3.0"] .news-card-meta b { color: #bcd8ff; letter-spacing: .05em; text-transform: uppercase; }
body[data-ui-version="3.3.0"] .news-card-meta time { margin-left: auto; }
body[data-ui-version="3.3.0"] .news-personalized { padding: 3px 7px; border-radius: var(--uw-radius-pill); background: rgba(78,156,255,.13); color: #c8dfff; font-style: normal; }
body[data-ui-version="3.3.0"] .news-card-copy > strong { font-size: clamp(16px, 1.8vw, 21px); line-height: 1.18; }
body[data-ui-version="3.3.0"] .news-card-copy > p { display: -webkit-box; overflow: hidden; color: var(--uw-text-subtle); font-size: 12px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
body[data-ui-version="3.3.0"] .news-card-copy > small { margin-top: auto; color: var(--uw-text-muted); font-size: 10px; }
body[data-ui-version="3.3.0"] .news-card-hide {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  background: rgba(7,11,18,.76);
  color: rgba(255,255,255,.76);
  font-size: 17px;
  backdrop-filter: blur(8px);
}
body[data-ui-version="3.3.0"] .news-infinite-status { display: grid; justify-items: center; gap: 8px; color: var(--uw-text-muted); font-size: 11px; }
body[data-ui-version="3.3.0"] .news-infinite-status.is-complete { padding: 8px; }
body[data-ui-version="3.3.0"] .news-load-more { margin-inline: auto; }
body[data-ui-version="3.3.0"] .news-card.is-dismissing { animation: uw-news-dismiss .16s ease forwards; }
@keyframes uw-news-dismiss { to { opacity: 0; transform: scale(.97); } }

body[data-ui-version="3.3.0"] .admin-news-panel { overflow: hidden; }
body[data-ui-version="3.3.0"] .admin-news-control { display: grid; gap: 12px; }
body[data-ui-version="3.3.0"] .admin-news-categories { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
body[data-ui-version="3.3.0"] .admin-news-categories .admin-switch-row { min-height: 88px; align-items: start; }
body[data-ui-version="3.3.0"] .admin-news-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--uw-border);
}
body[data-ui-version="3.3.0"] .admin-news-status > span { min-width: 130px; display: grid; gap: 2px; }
body[data-ui-version="3.3.0"] .admin-news-status b { font-size: 14px; }
body[data-ui-version="3.3.0"] .admin-news-status small { color: var(--uw-text-muted); font-size: 10px; }
body[data-ui-version="3.3.0"] .admin-news-status .button { margin-left: auto; }

@media (max-width: 900px) {
  body[data-ui-version="3.3.0"] .news-grid { grid-template-columns: minmax(0,1fr); }
  body[data-ui-version="3.3.0"] .admin-news-categories { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 700px) {
  body[data-ui-version="3.3.0"] .account-dialog.is-management {
    inset: 0;
    width: 100vw;
    height: var(--uw-app-viewport-height);
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  body[data-ui-version="3.3.0"] .account-dialog.is-management > div,
  body[data-ui-version="3.3.0"] .account-dialog.is-management .account-management-screen { height: var(--uw-app-viewport-height); max-height: none; }
  body[data-ui-version="3.3.0"] .account-management-screen { padding: calc(12px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom)); }
  body[data-ui-version="3.3.0"] .account-management-item,
  body[data-ui-version="3.3.0"] .account-management-item.is-person { grid-template-columns: minmax(0,1fr); }
  body[data-ui-version="3.3.0"] .account-management-item.is-person { display: grid; grid-template-columns: 42px minmax(0,1fr); }
  body[data-ui-version="3.3.0"] .account-management-item.is-person > .button { grid-column: 1 / -1; width: 100%; }
  body[data-ui-version="3.3.0"] .account-management-item > .button { width: 100%; }
  body[data-ui-version="3.3.0"] .news-card-main { grid-template-columns: 112px minmax(0,1fr); min-height: 158px; }
  body[data-ui-version="3.3.0"] .news-card-art { min-height: 158px; }
  body[data-ui-version="3.3.0"] .news-card-copy { padding: 13px 38px 12px 12px; }
  body[data-ui-version="3.3.0"] .news-card-copy > p { -webkit-line-clamp: 3; }
}

/* source: css/components/comment-bubbles.css */
.comment-bubbles-block {
  margin: 18px 0 20px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.comment-bubbles-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.comment-bubbles-head h3 {
  margin: 4px 0 0;
  font-size: 1.05rem;
}
.comment-bubbles-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.comment-bubble-subtitle {
  margin: 6px 0 0;
  color: rgba(255,255,255,.72);
  font-size: .88rem;
}
.comment-mini-button {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}
.comment-mini-button.is-ghost {
  background: transparent;
}
.comment-lock-banner {
  width: 100%;
  border: 1px dashed rgba(255,214,10,.45);
  background: rgba(255,214,10,.08);
  color: #ffe680;
  border-radius: 16px;
  padding: 10px 12px;
  font: inherit;
  text-align: left;
  margin-bottom: 12px;
}
.comment-bubble-stage-wrap {
  position: relative;
}
.comment-bubble-stage {
  position: relative;
  min-height: 250px;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1px, transparent 0) 0 0/12px 12px,
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.1);
}
.comment-bubble-stage.is-empty {
  display: grid;
  place-items: center;
}
.comment-bubble-empty {
  text-align: center;
  color: rgba(255,255,255,.72);
  display: grid;
  gap: 6px;
}
.comment-bubble {
  position: absolute;
  width: 190px;
  min-height: 128px;
  border: none;
  background:
    radial-gradient(circle at 25% 24%, rgba(255,255,255,.95) 0, rgba(255,255,255,.95) 48%, rgba(229,229,229,.94) 48.5%, rgba(229,229,229,.94) 100%),
    radial-gradient(circle, rgba(0,0,0,.12) 0 1px, transparent 1.4px) 0 0/11px 11px;
  box-shadow: 0 14px 26px rgba(0,0,0,.26), inset 0 0 0 3px #111, inset 0 0 0 6px rgba(255,255,255,.5);
  padding: 18px 16px 18px;
  color: #111;
  text-align: left;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  transition: transform .22s ease, opacity .22s ease, box-shadow .22s ease;
}
.comment-bubble:hover,
.comment-bubble.is-expanded {
  box-shadow: 0 18px 34px rgba(0,0,0,.34), inset 0 0 0 3px #111, inset 0 0 0 6px rgba(255,255,255,.5);
}
.comment-bubble.shape-cloud-a { border-radius: 42% 38% 40% 48% / 42% 42% 38% 36%; }
.comment-bubble.shape-cloud-b { border-radius: 46% 34% 44% 40% / 38% 46% 34% 44%; }
.comment-bubble.shape-oval-a { border-radius: 48% 52% 38% 44% / 38% 36% 44% 52%; }
.comment-bubble.shape-oval-b { border-radius: 54% 42% 46% 40% / 40% 48% 42% 46%; }
.comment-bubble-tail {
  position: absolute;
  width: 28px;
  height: 34px;
  right: 24px;
  bottom: -15px;
  background: linear-gradient(180deg, rgba(245,245,245,.98), rgba(229,229,229,.98));
  border-left: 3px solid #111;
  border-bottom: 3px solid #111;
  border-bottom-left-radius: 26px;
  transform: skewX(-16deg) rotate(16deg);
  box-shadow: -4px 8px 14px rgba(0,0,0,.18);
}
.comment-bubble-body {
  display: grid;
  gap: 8px;
}
.comment-bubble-author {
  font-size: .73rem;
  line-height: 1.1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.comment-bubble-text {
  font-size: .95rem;
  line-height: 1.12;
  font-weight: 800;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.comment-bubble-text.is-full {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.comment-bubble-reaction-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.comment-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(17,17,17,.08);
  font-size: .72rem;
  font-weight: 800;
}
.comment-reaction-pill.is-mine {
  background: rgba(255,214,10,.32);
}
.comment-bubble-reaction-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.comment-reaction-choice {
  border: 1px solid rgba(17,17,17,.16);
  background: rgba(255,255,255,.82);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 1rem;
  cursor: pointer;
}
.comment-reaction-choice.is-selected {
  background: rgba(255,214,10,.45);
  border-color: rgba(17,17,17,.35);
}
.comment-bubble.is-expanded {
  z-index: 3;
  width: min(280px, calc(100% - 20px));
  min-height: 190px;
}
.comment-bubble.is-popped {
  opacity: 0;
  transform: scale(.78);
}
.comment-bubble-pop {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  font-size: 1.6rem;
  transition: transform .22s ease, opacity .22s ease;
}
.comment-bubble.is-popped .comment-bubble-pop {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.private-note-card {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.07);
}
.private-note-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.private-note-head b {
  margin-right: auto;
}
.private-note-card p {
  margin: 0;
  color: rgba(255,255,255,.82);
}
.text-entry-dialog {
  width: min(540px, calc(100vw - 24px));
  border: none;
  background: transparent;
  padding: 0;
}
.text-entry-dialog::backdrop {
  background: rgba(0,0,0,.58);
}
.text-entry-sheet {
  display: grid;
  gap: 14px;
  background: linear-gradient(180deg, rgba(20,24,32,.98), rgba(11,14,20,.98));
  color: #fff;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 22px;
}
.text-entry-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.text-entry-head h2 {
  margin: 3px 0;
}
.text-entry-head small {
  color: rgba(255,255,255,.68);
}
.text-entry-field textarea {
  width: 100%;
  resize: vertical;
  min-height: 118px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #fff;
  padding: 14px 16px;
  font: inherit;
}
.text-entry-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.text-entry-actions {
  display: flex;
  gap: 10px;
}
@media (max-width: 720px) {
  .comment-bubbles-head,
  .text-entry-foot {
    flex-direction: column;
  }
  .comment-bubbles-head-actions,
  .text-entry-actions {
    width: 100%;
    justify-content: stretch;
  }
  .comment-mini-button,
  .text-entry-actions .rating-button {
    flex: 1;
  }
}

/* 3.10.0-r3 comments overlay hotfix */
body[data-ui-version="3.3.0"] .details-dialog,
.details-dialog {
  position: relative;
}
body[data-ui-version="3.3.0"] .details-close,
.details-close {
  position: relative;
  z-index: 6;
}
body[data-ui-version="3.3.0"] .details-layout,
.details-layout {
  position: relative;
}
.details-screen-overlay-hint {
  display: none;
}
.comment-inline-panel {
  display: grid;
  gap: 12px;
  margin: 18px 0 22px;
  padding: 14px 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}
.comment-inline-panel.is-note-only {
  padding: 0;
  border: 0;
  background: transparent;
}
.comment-inline-copy p:last-child {
  margin: 6px 0 0;
  color: rgba(255,255,255,.72);
}
.comment-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.comment-inline-lock {
  justify-self: start;
  border: 1px dashed rgba(255,214,10,.42);
  background: rgba(255,214,10,.07);
  color: #ffe07a;
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
}
.private-note-card.is-inline-note {
  margin-top: 0;
}
.details-comments-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.details-comments-overlay .comment-bubble {
  pointer-events: auto;
}
.comment-bubble {
  z-index: 2;
}
.comment-bubble.shape-cloud-a { border-radius: 40% 36% 44% 42% / 46% 40% 38% 34%; }
.comment-bubble.shape-cloud-b { border-radius: 48% 34% 42% 38% / 40% 48% 34% 44%; }
.comment-bubble.shape-oval-a { border-radius: 54% 42% 44% 36% / 40% 36% 46% 50%; }
.comment-bubble.shape-oval-b { border-radius: 46% 50% 40% 44% / 38% 46% 44% 48%; }
.comment-bubble.is-expanded {
  z-index: 7;
  width: min(300px, calc(100% - 20px));
}
.comment-bubble-author,
.comment-bubble-text,
.comment-reaction-pill,
.comment-reaction-choice {
  text-shadow: none;
}
.comment-bubble-tail {
  z-index: -1;
}
@media (max-width: 720px) {
  .details-comments-overlay {
    inset: 0 0 env(safe-area-inset-bottom) 0;
  }
  .comment-inline-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .comment-bubble {
    width: 172px;
    min-height: 122px;
    padding: 16px 14px 16px;
  }
  .comment-bubble.is-expanded {
    width: min(270px, calc(100% - 22px));
  }
}

/* 3.10.0-r4 bubble polish */
.comment-inline-panel {
  gap: 10px;
}
.comment-inline-actions.is-single {
  display: flex;
}
.comment-mini-button.is-single-line {
  white-space: nowrap;
}
.comment-inline-actions.is-single .comment-mini-button {
  width: auto;
  min-width: 0;
}
.private-note-head .comment-mini-button {
  flex: 0 0 auto;
}
.comment-bubble {
  position: absolute;
  width: 204px;
  min-height: 138px;
  padding: 18px 18px 18px 20px;
  background: linear-gradient(180deg, #fafafa 0%, #ededed 100%);
  border: 3px solid #111;
  box-shadow: 0 12px 24px rgba(0,0,0,.26);
  overflow: visible;
  isolation: isolate;
}
.comment-bubble-ink,
.comment-bubble-shade {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.comment-bubble-ink {
  background-image: radial-gradient(circle, rgba(0,0,0,.11) 0 1.4px, transparent 1.7px);
  background-size: 12px 12px;
  background-position: 0 2px;
  opacity: .45;
  clip-path: ellipse(72% 44% at 44% 34%);
}
.comment-bubble-shade {
  background: linear-gradient(120deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.3) 46%, rgba(0,0,0,.06) 47%, rgba(0,0,0,.06) 100%);
  opacity: .55;
}
.comment-bubble-body {
  position: relative;
  z-index: 1;
  gap: 7px;
}
.comment-bubble-author {
  padding-right: 10px;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", "Avenir Next", system-ui, sans-serif;
  font-size: .8rem;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .06em;
}
.comment-bubble-text {
  padding-right: 8px;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", "Avenir Next", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.08;
  font-weight: 900;
}
.comment-bubble-tail {
  position: absolute;
  width: 34px;
  height: 40px;
  right: 22px;
  bottom: -20px;
  background: linear-gradient(180deg, #f5f5f5 0%, #e9e9e9 100%);
  border: 3px solid #111;
  border-top: 0;
  border-radius: 0 0 24px 4px;
  clip-path: polygon(18% 0, 100% 0, 62% 100%, 0 60%);
  transform: rotate(10deg);
  box-shadow: 0 10px 16px rgba(0,0,0,.18);
  z-index: 0;
}
.comment-bubble.shape-cloud-a { border-radius: 42% 34% 38% 40% / 40% 46% 34% 36%; }
.comment-bubble.shape-cloud-b { border-radius: 46% 32% 40% 44% / 34% 44% 38% 42%; }
.comment-bubble.shape-oval-a { border-radius: 50% 44% 42% 34% / 40% 38% 48% 52%; }
.comment-bubble.shape-oval-b { border-radius: 48% 50% 36% 40% / 36% 42% 46% 50%; }
.comment-bubble.is-expanded {
  width: min(320px, calc(100% - 28px));
  min-height: 200px;
}
.comment-bubble-reaction-stack {
  position: relative;
  z-index: 1;
}
.details-comments-overlay {
  z-index: 5;
}
@media (max-width: 720px) {
  .comment-inline-actions.is-single {
    display: block;
  }
  .comment-inline-actions.is-single .comment-mini-button {
    width: auto;
  }
  .comment-bubble {
    width: 194px;
    min-height: 132px;
    padding: 16px 16px 16px 18px;
  }
}

/* 3.10.0-r5: SVG speech bubbles and runtime safety. */
.comment-inline-panel {
  gap: 10px;
}
.comment-inline-actions.is-single {
  display: flex;
}
.comment-inline-actions.is-single .comment-mini-button {
  width: auto;
  min-width: 0;
}
.comment-mini-button.is-single-line {
  white-space: nowrap;
}
.private-note-head .comment-mini-button {
  flex: 0 0 auto;
}
.details-comments-overlay {
  z-index: 5;
}
.comment-bubble {
  position: absolute;
  width: 210px;
  height: 150px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #111;
  overflow: visible;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .28));
  isolation: isolate;
}
.comment-bubble:hover,
.comment-bubble.is-expanded {
  box-shadow: none;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .34));
}
.comment-bubble-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}
.comment-bubble-body {
  position: absolute;
  z-index: 2;
  inset: 25px 30px 31px 31px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: visible;
}
.comment-bubble.shape-cloud-b .comment-bubble-body {
  inset: 27px 31px 31px 34px;
}
.comment-bubble.shape-oval-a .comment-bubble-body,
.comment-bubble.shape-oval-b .comment-bubble-body {
  inset: 29px 31px 30px 35px;
}
.comment-bubble-author {
  display: block;
  width: 100%;
  padding: 0 4px 0 1px;
  margin: 0;
  overflow: visible;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  font-size: .76rem;
  line-height: 1.08;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.comment-bubble-text {
  width: 100%;
  padding: 0 3px 0 1px;
  overflow: hidden;
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  font-size: .98rem;
  line-height: 1.08;
  font-weight: 850;
  letter-spacing: -.018em;
  -webkit-line-clamp: 3;
}
.comment-bubble-tail,
.comment-bubble-ink,
.comment-bubble-shade {
  display: none !important;
}
.comment-bubble-reaction-stack {
  gap: 5px;
  margin-top: auto;
}
.comment-reaction-pill {
  background: rgba(255, 222, 86, .88);
  border: 1px solid rgba(17, 17, 17, .08);
  padding: 4px 8px;
  font-family: ui-rounded, system-ui, sans-serif;
}
.comment-bubble.is-expanded {
  width: min(320px, calc(100% - 28px));
  height: 214px;
  min-height: 0;
  z-index: 8;
}
.comment-bubble.is-expanded .comment-bubble-body {
  inset: 34px 40px 40px 42px;
}
.comment-bubble.is-expanded .comment-bubble-text {
  -webkit-line-clamp: unset;
  overflow: visible;
  font-size: 1rem;
}
.comment-bubble-reaction-picker {
  margin-top: auto;
  gap: 6px;
}
.comment-reaction-choice {
  padding: 5px 8px;
}
@media (max-width: 720px) {
  .comment-inline-actions.is-single {
    display: block;
  }
  .comment-inline-actions.is-single .comment-mini-button {
    width: auto;
  }
  .comment-bubble {
    width: 198px;
    height: 143px;
  }
  .comment-bubble-body {
    inset: 24px 28px 29px 29px;
  }
  .comment-bubble.shape-cloud-b .comment-bubble-body {
    inset: 25px 29px 29px 31px;
  }
  .comment-bubble.shape-oval-a .comment-bubble-body,
  .comment-bubble.shape-oval-b .comment-bubble-body {
    inset: 27px 29px 29px 32px;
  }
  .comment-bubble.is-expanded {
    width: min(292px, calc(100% - 24px));
    height: 206px;
  }
}


/* 3.10.0-r6 bubble drag polish */
.details-comments-overlay {
  touch-action: none;
}
.comment-bubble {
  width: 210px;
  height: 150px;
}
.comment-bubble-body {
  inset: 31px 30px 27px 31px;
}
.comment-bubble.shape-cloud-b .comment-bubble-body {
  inset: 32px 31px 27px 34px;
}
.comment-bubble.shape-oval-a .comment-bubble-body,
.comment-bubble.shape-oval-b .comment-bubble-body {
  inset: 34px 31px 26px 35px;
}
.comment-bubble-author {
  padding-top: 2px;
}
.comment-bubble-text {
  padding-top: 2px;
}
.comment-bubble-tail {
  display: none !important;
}
.comment-bubble.is-expanded {
  width: min(320px, calc(100% - 28px));
  height: 214px;
}
.comment-bubble.is-expanded .comment-bubble-body {
  inset: 40px 40px 36px 42px;
}
@media (max-width: 720px) {
  .comment-bubble {
    width: 198px;
    height: 143px;
  }
  .comment-bubble-body {
    inset: 29px 28px 25px 29px;
  }
  .comment-bubble.shape-cloud-b .comment-bubble-body {
    inset: 30px 29px 25px 31px;
  }
  .comment-bubble.shape-oval-a .comment-bubble-body,
  .comment-bubble.shape-oval-b .comment-bubble-body {
    inset: 31px 29px 24px 32px;
  }
  .comment-bubble.is-expanded {
    width: min(292px, calc(100% - 24px));
    height: 206px;
  }
}

/* 3.10.0-r7 comment presentation controls */
.comment-display-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}
.comment-display-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.82);
  border-radius: 17px;
  padding: 10px 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.comment-display-toggle.is-active {
  border-color: rgba(130,156,255,.34);
  background: rgba(94,119,219,.13);
  color: #fff;
}
.comment-display-toggle > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.comment-display-toggle b {
  font-size: .84rem;
  line-height: 1.1;
}
.comment-display-toggle small {
  overflow: hidden;
  color: rgba(255,255,255,.57);
  font-size: .72rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-display-eye {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  font-size: 1.12rem;
}
.comment-display-toggle.is-active .comment-display-eye {
  background: rgba(112,137,244,.24);
  color: #aebdff;
}
.comment-style-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-self: stretch;
  overflow: hidden;
  min-width: 178px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 17px;
  background: rgba(0,0,0,.16);
  padding: 3px;
}
.comment-style-switch button {
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: rgba(255,255,255,.62);
  padding: 8px 11px;
  font: inherit;
  font-size: .77rem;
  font-weight: 750;
  cursor: pointer;
}
.comment-style-switch button.is-active {
  background: rgba(255,255,255,.11);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

/* Instagram-like floating message style */
.comment-bubble.style-instagram {
  width: 244px;
  height: auto;
  min-height: 108px;
  border-radius: 25px;
  background:
    linear-gradient(#16171c, #16171c) padding-box,
    linear-gradient(135deg, #833ab4, #fd1d1d 48%, #fcb045) border-box;
  border: 2px solid transparent;
  padding: 10px;
  color: #fff;
  filter: drop-shadow(0 13px 18px rgba(0,0,0,.3));
}
.comment-bubble.style-instagram .comment-bubble-art {
  display: none;
}
.instagram-comment-shell {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.instagram-comment-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(135deg, #833ab4, #fd1d1d 48%, #fcb045);
  color: #fff;
  font-size: .88rem;
  font-weight: 850;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.86);
}
.instagram-comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.instagram-comment-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  padding: 3px 4px 3px 0;
}
.comment-bubble.style-instagram .comment-bubble-author {
  color: rgba(255,255,255,.68);
  font-family: system-ui, -apple-system, "SF Pro Text", sans-serif;
  font-size: .7rem;
  letter-spacing: .02em;
  text-transform: none;
}
.comment-bubble.style-instagram .comment-bubble-text {
  color: #fff;
  font-family: system-ui, -apple-system, "SF Pro Text", sans-serif;
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -.006em;
}
.comment-bubble.style-instagram .comment-bubble-reaction-stack {
  margin-top: 3px;
}
.comment-bubble.style-instagram .comment-reaction-pill {
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.1);
  color: #fff;
}
.comment-bubble.style-instagram .comment-reaction-pill.is-mine {
  background: rgba(203,83,255,.28);
}
.comment-bubble.style-instagram.is-expanded {
  width: min(330px, calc(100% - 24px));
  min-height: 190px;
  height: auto;
  padding: 14px;
}
.comment-bubble.style-instagram.is-expanded .instagram-comment-shell {
  grid-template-columns: 42px minmax(0,1fr);
}
.comment-bubble.style-instagram .comment-reaction-choice {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.1);
  color: #fff;
}
.comment-bubble.style-instagram .comment-reaction-choice.is-selected {
  background: rgba(219,80,255,.32);
}

@media (max-width: 720px) {
  .comment-display-toolbar {
    grid-template-columns: 1fr;
  }
  .comment-style-switch {
    min-width: 0;
  }
  .comment-bubble.style-instagram {
    width: 228px;
    min-height: 104px;
  }
}

/* 3.10.0-r8 bubble motion and sizing */
.details-comments-overlay {
  touch-action: none;
}
.comment-bubble {
  width: 204px;
  height: 146px;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .24));
}
.comment-bubble-body {
  inset: 30px 30px 20px 31px;
  gap: 6px;
}
.comment-bubble.shape-cloud-b .comment-bubble-body {
  inset: 31px 31px 20px 34px;
}
.comment-bubble.shape-oval-a .comment-bubble-body,
.comment-bubble.shape-oval-b .comment-bubble-body {
  inset: 33px 31px 19px 35px;
}
.comment-bubble-author {
  font-size: .69rem;
  line-height: 1.06;
}
.comment-bubble-text {
  font-size: .9rem;
  line-height: 1.06;
}
.comment-bubble-reaction-stack {
  margin-top: auto;
  padding-top: 4px;
}
.comment-bubble.style-instagram {
  width: 214px;
  min-height: 88px;
  padding: 8px;
  border-radius: 22px;
}
.instagram-comment-shell {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-height: 72px;
}
.instagram-comment-avatar {
  width: 32px;
  height: 32px;
  font-size: .78rem;
}
.instagram-comment-content {
  gap: 4px;
  min-height: 72px;
  padding: 2px 2px 2px 0;
}
.comment-bubble.style-instagram .comment-bubble-author {
  font-size: .62rem;
}
.comment-bubble.style-instagram .comment-bubble-text {
  font-size: .84rem;
  line-height: 1.18;
}
.comment-bubble.style-instagram .comment-bubble-reaction-stack {
  margin-top: auto;
  padding-top: 6px;
}
.comment-bubble.style-instagram .comment-reaction-pill {
  padding: 3px 7px;
  font-size: .68rem;
}
.comment-bubble.style-instagram.is-expanded {
  width: min(300px, calc(100% - 22px));
  min-height: 168px;
  padding: 12px;
}
.comment-bubble.style-instagram.is-expanded .instagram-comment-shell {
  grid-template-columns: 36px minmax(0,1fr);
  min-height: 132px;
}
.comment-bubble.is-expanded .comment-bubble-text {
  font-size: .93rem;
}
@media (max-width: 720px) {
  .comment-bubble {
    width: 192px;
    height: 138px;
  }
  .comment-bubble-body {
    inset: 27px 27px 18px 28px;
  }
  .comment-bubble.shape-cloud-b .comment-bubble-body {
    inset: 28px 28px 18px 30px;
  }
  .comment-bubble.shape-oval-a .comment-bubble-body,
  .comment-bubble.shape-oval-b .comment-bubble-body {
    inset: 30px 28px 17px 31px;
  }
  .comment-bubble.style-instagram {
    width: 202px;
    min-height: 84px;
    padding: 7px;
  }
}


/* 3.10.0-r10 gesture ownership */
.comment-bubble,
.comment-bubble * {
  -webkit-user-select: none;
  user-select: none;
}
.comment-bubble {
  touch-action: none;
  cursor: grab;
}
.comment-bubble:active {
  cursor: grabbing;
}
html.is-comment-dragging,
html.is-comment-dragging body {
  overscroll-behavior: none;
}
.details-dialog.is-comment-dragging,
.details-dialog.is-comment-dragging #detailsContent,
.details-dialog.is-comment-dragging .details-layout {
  overscroll-behavior: none !important;
  touch-action: none !important;
}
.details-dialog.is-comment-dragging #detailsContent,
.details-dialog.is-comment-dragging .details-layout {
  overflow: hidden !important;
}

/* 3.10.0-r11 denser typography and lower text baseline */
.comment-bubble-body {
  inset: 42px 30px 12px 31px;
  gap: 5px;
}
.comment-bubble.shape-cloud-b .comment-bubble-body {
  inset: 43px 31px 12px 34px;
}
.comment-bubble.shape-oval-a .comment-bubble-body,
.comment-bubble.shape-oval-b .comment-bubble-body {
  inset: 45px 31px 11px 35px;
}
.comment-bubble-author {
  font-size: .61rem;
  line-height: 1.04;
}
.comment-bubble-text {
  font-size: .81rem;
  line-height: 1.04;
}
.comment-bubble.style-instagram .instagram-comment-content {
  padding-top: 12px;
}
.comment-bubble.style-instagram .comment-bubble-author {
  font-size: .56rem;
}
.comment-bubble.style-instagram .comment-bubble-text {
  font-size: .75rem;
  line-height: 1.14;
}
.comment-bubble.is-expanded .comment-bubble-body {
  inset: 50px 40px 30px 42px;
}
.comment-bubble.is-expanded .comment-bubble-text {
  font-size: .84rem;
}
.comment-bubble.style-instagram.is-expanded .instagram-comment-content {
  padding-top: 14px;
}
@media (max-width: 720px) {
  .comment-bubble-body {
    inset: 38px 27px 10px 28px;
  }
  .comment-bubble.shape-cloud-b .comment-bubble-body {
    inset: 39px 28px 10px 30px;
  }
  .comment-bubble.shape-oval-a .comment-bubble-body,
  .comment-bubble.shape-oval-b .comment-bubble-body {
    inset: 41px 28px 9px 31px;
  }
}

/* source: css/components/achievements.css */
/* ========================================================================
   3.10.0-r32 — graded illustrated achievement collection
   Runtime families use square contact-sheet cards; grade state is shown by the surrounding UI.
   ======================================================================== */
body[data-ui-version="3.3.0"] .account-achievements-entry {
  width: 100%; min-width: 0; display: grid; grid-template-columns: 44px minmax(0,1fr) auto;
  align-items: center; gap: 11px; padding: 12px 13px; border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px; background:
    radial-gradient(circle at 12% 20%, rgba(255,194,71,.16), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  color: var(--cinema-text); text-align: left;
}
body[data-ui-version="3.3.0"] .account-achievements-entry:hover { border-color: rgba(255,194,71,.34); }
body[data-ui-version="3.3.0"] .account-achievements-mark {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px;
  background: linear-gradient(145deg, #f6bd60, #f28482 60%, #6d597a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 8px 24px rgba(0,0,0,.22);
  font-size: 20px;
}
body[data-ui-version="3.3.0"] .account-achievements-entry > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
body[data-ui-version="3.3.0"] .account-achievements-entry b { font-size: 14px; }
body[data-ui-version="3.3.0"] .account-achievements-entry small { color: var(--cinema-muted); font-size: 10px; line-height: 1.3; }
body[data-ui-version="3.3.0"] .account-achievements-entry em { color: #f6bd60; font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }

body[data-ui-version="3.3.0"] .account-dialog.is-achievements {
  width: min(980px, calc(100% - 24px)); max-height: min(92dvh, 920px); overflow: auto;
}
body[data-ui-version="3.3.0"] .account-dialog.is-achievements > div { min-width: 0; }
body[data-ui-version="3.3.0"] .achievements-screen { gap: 16px; padding: 20px; }
body[data-ui-version="3.3.0"] .achievement-screen-head {
  position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: 42px minmax(0,1fr) 42px;
  align-items: start; gap: 12px; margin: -20px -20px 0; padding: 18px 20px 13px;
  border-bottom: 1px solid rgba(255,255,255,.08); background: color-mix(in srgb, var(--cinema-panel) 92%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
}
body[data-ui-version="3.3.0"] .achievement-screen-head > div { min-width: 0; }
body[data-ui-version="3.3.0"] .achievement-screen-head .eyebrow { margin: 0 0 3px; }
body[data-ui-version="3.3.0"] .achievement-screen-head h2 { margin: 0; font-size: 27px; line-height: 1; }
body[data-ui-version="3.3.0"] .achievement-screen-head p:last-child { margin: 5px 0 0; color: var(--cinema-muted); font-size: 10px; }

body[data-ui-version="3.3.0"] .achievement-detail-close {
  display: grid; place-items: center; padding: 0; line-height: 1; text-align: center;
  border-radius: 999px; background: rgba(255,255,255,.11); backdrop-filter: blur(16px);
}

body[data-ui-version="3.3.0"] .achievement-scoreboard {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px;
}
body[data-ui-version="3.3.0"] .achievement-scoreboard > div,
body[data-ui-version="3.3.0"] .achievement-scoreboard > button {
  min-width: 0; display: grid; gap: 3px; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  background: linear-gradient(150deg, rgba(255,255,255,.065), rgba(255,255,255,.018)); color: var(--cinema-text); text-align: left;
}
body[data-ui-version="3.3.0"] .achievement-scoreboard > button { cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
body[data-ui-version="3.3.0"] .achievement-scoreboard > button:active { transform: scale(.985); }
body[data-ui-version="3.3.0"] .achievement-scoreboard > button.is-active { border-color: rgba(246,189,96,.42); background: rgba(246,189,96,.08); }
body[data-ui-version="3.3.0"] .achievement-scoreboard b { font-size: 23px; line-height: 1; letter-spacing: -.04em; }
body[data-ui-version="3.3.0"] .achievement-scoreboard span { color: var(--cinema-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }

body[data-ui-version="3.3.0"] .achievement-filters { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
body[data-ui-version="3.3.0"] .achievement-filters::-webkit-scrollbar { display: none; }
body[data-ui-version="3.3.0"] .achievement-filter {
  flex: 0 0 auto; min-height: 34px; padding: 0 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px;
  background: rgba(255,255,255,.04); color: var(--cinema-muted); font-size: 10px; font-weight: 800;
}
body[data-ui-version="3.3.0"] .achievement-filter.is-active { background: var(--cinema-text); color: #0b0c11; border-color: var(--cinema-text); }

body[data-ui-version="3.3.0"] .achievement-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
body[data-ui-version="3.3.0"] .achievement-empty { grid-column: 1 / -1; padding: 32px; text-align: center; color: var(--cinema-muted); }
body[data-ui-version="3.3.0"] .achievement-card {
  --ach-accent: #8d99ae; --ach-secondary: #edf2f4; --ach-deep: #11151c; --ach-progress: 0%;
  position: relative; isolation: isolate; min-width: 0; min-height: 174px; display: grid; grid-template-columns: 104px minmax(0,1fr); gap: 13px;
  overflow: hidden; padding: 12px; border: 1px solid color-mix(in srgb, var(--ach-accent) 24%, rgba(255,255,255,.08)); border-radius: 19px;
  background:
    radial-gradient(circle at 10% 15%, color-mix(in srgb, var(--ach-accent) 18%, transparent), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--ach-deep) 92%, #111), color-mix(in srgb, var(--ach-deep) 70%, #050609));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.13);
  color: inherit; text-align: left; font: inherit; cursor: pointer;
}
body[data-ui-version="3.3.0"] .achievement-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .34; mix-blend-mode: screen;
}
body[data-ui-version="3.3.0"] .achievement-card.is-locked { filter: saturate(.42); opacity: .66; }
body[data-ui-version="3.3.0"] .achievement-card.is-unlocked { border-color: color-mix(in srgb, var(--ach-accent) 44%, rgba(255,255,255,.10)); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-grade="2"] { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 34px color-mix(in srgb, var(--ach-accent) 8%, transparent); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-grade="3"] { border-width: 1.5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 38px color-mix(in srgb, var(--ach-accent) 12%, transparent); }
body[data-ui-version="3.3.0"] .achievement-card.is-legendary { border-color: var(--ach-secondary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ach-accent) 45%, transparent), 0 14px 42px color-mix(in srgb, var(--ach-accent) 18%, transparent); }
body[data-ui-version="3.3.0"] .achievement-card.is-legendary::before {
  content: ""; position: absolute; inset: -80% -30%; z-index: -1; background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.14) 50%, transparent 58%); transform: rotate(8deg); animation: achievementLegendSweep 8s linear infinite;
}
@keyframes achievementLegendSweep { to { transform: translateX(55%) rotate(8deg); } }

body[data-ui-version="3.3.0"] .achievement-art {
  position: relative; min-width: 0; min-height: 148px; display: grid; place-items: center; overflow: hidden; border-radius: 15px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--ach-accent) 56%, var(--ach-deep)), color-mix(in srgb, var(--ach-secondary) 34%, var(--ach-deep)));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
body[data-ui-version="3.3.0"] .achievement-art::before,
body[data-ui-version="3.3.0"] .achievement-art::after { content: ""; position: absolute; pointer-events: none; }
body[data-ui-version="3.3.0"] .achievement-symbol { position: relative; z-index: 2; color: #fff; font-size: 47px; font-weight: 900; line-height: 1; text-shadow: 0 4px 18px rgba(0,0,0,.28); }
body[data-ui-version="3.3.0"] .achievement-art > b { position: absolute; right: 8px; bottom: 7px; z-index: 3; color: rgba(255,255,255,.82); font: 800 9px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; }
body[data-ui-version="3.3.0"] .achievement-art > i { position: absolute; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; opacity: .7; }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-grade="2"] .achievement-art > i { width: 58px; height: 58px; border-width: 2px; }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-grade="3"] .achievement-art > i { width: 68px; height: 68px; border-style: double; border-width: 4px; }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-grade="4"] .achievement-art > i { width: 76px; height: 76px; border: 2px solid var(--ach-secondary); box-shadow: 0 0 22px color-mix(in srgb, var(--ach-secondary) 50%, transparent), inset 0 0 15px rgba(255,255,255,.12); }

body[data-ui-version="3.3.0"] .achievement-copy { min-width: 0; display: grid; align-content: start; gap: 7px; padding: 3px 2px 1px 0; }
body[data-ui-version="3.3.0"] .achievement-title-row { min-width: 0; display: grid; gap: 3px; }
body[data-ui-version="3.3.0"] .achievement-title-row h3 { margin: 0; color: #fff; font-size: 16px; line-height: 1.05; letter-spacing: -.025em; overflow-wrap: anywhere; }
body[data-ui-version="3.3.0"] .achievement-title-row > span { color: var(--ach-secondary); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
body[data-ui-version="3.3.0"] .achievement-copy > p { margin: 0; color: rgba(255,255,255,.62); font-size: 10px; line-height: 1.35; }
body[data-ui-version="3.3.0"] .achievement-progress { display: grid; gap: 4px; margin-top: 2px; }
body[data-ui-version="3.3.0"] .achievement-progress > span { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.11); }
body[data-ui-version="3.3.0"] .achievement-progress > span > i { display: block; width: var(--ach-progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ach-accent), var(--ach-secondary)); }
body[data-ui-version="3.3.0"] .achievement-progress small { color: rgba(255,255,255,.52); font: 700 8px/1.25 "JetBrains Mono", ui-monospace, monospace; }
body[data-ui-version="3.3.0"] .achievement-grade-row { min-width: 0; display: flex; align-items: center; gap: 4px; margin-top: auto; }
body[data-ui-version="3.3.0"] .achievement-grade-dot { min-width: 20px; height: 18px; display: grid; place-items: center; padding: 0 4px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: rgba(255,255,255,.32); }
body[data-ui-version="3.3.0"] .achievement-grade-dot b { font: 800 7px/1 "JetBrains Mono", ui-monospace, monospace; }
body[data-ui-version="3.3.0"] .achievement-grade-dot.is-unlocked { border-color: color-mix(in srgb, var(--ach-accent) 60%, white); background: color-mix(in srgb, var(--ach-accent) 34%, transparent); color: #fff; }
body[data-ui-version="3.3.0"] .achievement-grade-row em { min-width: 0; margin-left: 3px; color: rgba(255,255,255,.50); font-size: 8px; font-style: normal; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 30 distinct motifs: visual identity stays recognizable across all grades. */
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="reel"] .achievement-art::before { width: 76px; height: 76px; border: 8px dotted rgba(255,255,255,.16); border-radius: 50%; }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="marquee"] .achievement-art::before { inset: 7px; border: 2px dotted rgba(255,255,255,.28); border-radius: 11px; }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="scanlines"] .achievement-art::before { inset: 0; background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(255,255,255,.11) 7px); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="leather"] .achievement-art::before { inset: 0; background: radial-gradient(circle at 20% 20%, transparent 0 2px, rgba(255,255,255,.08) 3px, transparent 4px); background-size: 12px 12px; }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="fog"] .achievement-art::before { inset: 48% -30% -20%; filter: blur(8px); background: rgba(255,255,255,.18); border-radius: 50%; }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="stars"] .achievement-art::before { inset: 0; background: radial-gradient(circle at 18% 20%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 72% 28%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 28% 75%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 82% 82%, #fff 0 1px, transparent 1.5px); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="grid"] .achievement-art::before { inset: 0; background-image: linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px); background-size: 18px 18px; transform: perspective(90px) rotateX(14deg); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="petals"] .achievement-art::before { width: 86px; height: 86px; border: 12px double rgba(255,255,255,.14); border-radius: 48% 52% 46% 54%; transform: rotate(35deg); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="confetti"] .achievement-art::before { inset: 0; background: linear-gradient(25deg, transparent 45%, rgba(255,255,255,.15) 46% 49%, transparent 50%), linear-gradient(115deg, transparent 45%, rgba(255,255,255,.10) 46% 48%, transparent 49%); background-size: 22px 18px; }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="cells"] .achievement-art::before { inset: -10px; border: 1px solid rgba(255,255,255,.16); box-shadow: 20px 20px 0 rgba(255,255,255,.05), -20px 40px 0 rgba(255,255,255,.06); transform: rotate(-12deg); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="paper"] .achievement-art::before { inset: 0; background: repeating-linear-gradient(0deg, transparent 0 14px, rgba(255,255,255,.10) 15px); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="map"] .achievement-art::before { inset: -20px; border: 2px dashed rgba(255,255,255,.17); border-radius: 46% 54% 58% 42%; transform: rotate(18deg); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="clapper"] .achievement-art::before { left: -10%; right: -10%; top: 18px; height: 22px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.20) 0 10px, transparent 10px 20px); transform: rotate(-8deg); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="festival"] .achievement-art::before { width: 94px; height: 94px; border: 1px solid rgba(255,255,255,.16); transform: rotate(45deg); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="strata"] .achievement-art::before { inset: 0; background: repeating-linear-gradient(165deg, transparent 0 15px, rgba(255,255,255,.11) 16px 18px); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="noir"] .achievement-art::before { inset: 0; background: linear-gradient(105deg, rgba(255,255,255,.23) 0 12%, transparent 12% 24%, rgba(0,0,0,.25) 24% 38%, transparent 38%); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="portal"] .achievement-art::before { width: 84px; height: 84px; border: 7px double rgba(255,255,255,.20); border-radius: 50%; box-shadow: 0 0 22px rgba(255,255,255,.14); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="score"] .achievement-art::before { inset: 12px; border-top: 3px solid rgba(255,255,255,.16); border-bottom: 3px solid rgba(255,255,255,.16); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="halo"] .achievement-art::before { width: 72px; height: 72px; border: 3px solid rgba(255,255,255,.28); border-radius: 50%; box-shadow: 0 0 28px rgba(255,255,255,.18); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="slash"] .achievement-art::before { width: 180%; height: 12px; background: rgba(255,255,255,.16); transform: rotate(-38deg); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="split"] .achievement-art::before { inset: 0 50% 0 0; background: rgba(255,255,255,.10); border-right: 2px solid rgba(255,255,255,.28); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="loop"] .achievement-art::before { width: 88px; height: 52px; border: 5px solid rgba(255,255,255,.16); border-radius: 50%; transform: rotate(-18deg); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="stack"] .achievement-art::before { width: 64px; height: 84px; border: 2px solid rgba(255,255,255,.17); border-radius: 8px; box-shadow: 9px -9px 0 -1px rgba(255,255,255,.08), 18px -18px 0 -1px rgba(255,255,255,.05); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="crown"] .achievement-art::before { width: 92px; height: 44px; border-top: 10px double rgba(255,255,255,.16); border-radius: 50%; transform: translateY(-22px); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="ink"] .achievement-art::before { width: 86px; height: 86px; background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.15), transparent 46%); border-radius: 58% 42% 64% 36%; transform: rotate(22deg); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="memo"] .achievement-art::before { inset: 14px; border-left: 2px solid rgba(255,255,255,.20); background: repeating-linear-gradient(0deg, transparent 0 13px, rgba(255,255,255,.09) 14px); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="timeline"] .achievement-art::before { width: 2px; height: 78%; background: rgba(255,255,255,.18); box-shadow: -20px 22px 0 -0.5px rgba(255,255,255,.10), 20px -18px 0 -0.5px rgba(255,255,255,.10); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="waves"] .achievement-art::before { inset: 0; background: repeating-radial-gradient(ellipse at 50% 120%, transparent 0 18px, rgba(255,255,255,.10) 19px 21px); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="network"] .achievement-art::before { width: 76px; height: 76px; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; box-shadow: 28px -20px 0 -25px #fff, -30px 18px 0 -25px #fff, 24px 30px 0 -25px #fff; }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-motif="signal"] .achievement-art::before { width: 26px; height: 26px; border: 3px solid transparent; border-top-color: rgba(255,255,255,.25); border-right-color: rgba(255,255,255,.25); border-radius: 50%; transform: rotate(-45deg); box-shadow: 11px -11px 0 -8px rgba(255,255,255,.12); }

@media (max-width: 760px) {
  body[data-ui-version="3.3.0"] .account-dialog.is-achievements { width: 100%; max-width: none; height: var(--uw-app-viewport-height, 100dvh); max-height: none; margin: 0; border-radius: 0; }
  body[data-ui-version="3.3.0"] .account-dialog.is-achievements > div,
  body[data-ui-version="3.3.0"] .account-dialog.is-achievements .achievements-screen { min-height: 100%; }
  body[data-ui-version="3.3.0"] .achievements-screen { padding: 16px 12px calc(24px + env(safe-area-inset-bottom)); }
  body[data-ui-version="3.3.0"] .achievement-screen-head { margin: -16px -12px 0; padding: calc(12px + env(safe-area-inset-top)) 12px 12px; }
  body[data-ui-version="3.3.0"] .achievement-grid { grid-template-columns: 1fr; gap: 9px; }
  body[data-ui-version="3.3.0"] .achievement-card { grid-template-columns: 94px minmax(0,1fr); min-height: 158px; padding: 10px; }
  body[data-ui-version="3.3.0"] .achievement-art { min-height: 138px; }
  body[data-ui-version="3.3.0"] .achievement-title-row h3 { font-size: 15px; }
  body[data-ui-version="3.3.0"] .achievement-symbol { font-size: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui-version="3.3.0"] .achievement-card.is-legendary::before { animation: none; }
}

/* r31 — square illustrated achievement cards cut from the approved 6×6 contact sheets. */
body[data-ui-version="3.3.0"] .achievement-card {
  grid-template-columns: 132px minmax(0,1fr);
  min-height: 156px;
  background: linear-gradient(145deg, rgba(24,22,18,.98), rgba(8,10,12,.98));
  border-color: rgba(214,181,111,.18);
}
body[data-ui-version="3.3.0"] .achievement-art {
  min-height: 0;
  aspect-ratio: 1 / 1;
  align-self: start;
  background: #17140f;
  border-radius: 12px;
}
body[data-ui-version="3.3.0"] .achievement-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
body[data-ui-version="3.3.0"] .achievement-card.is-locked .achievement-art img {
  filter: grayscale(.92) brightness(.58) sepia(.18);
}
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-grade="1"] { border-color: rgba(177,153,111,.30); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-grade="2"] { border-color: rgba(190,121,63,.42); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-grade="3"] { border-color: rgba(191,198,199,.46); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-grade="4"] { border-color: rgba(220,169,54,.56); }
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-grade="5"] {
  border-color: rgba(202,219,205,.64);
  box-shadow: inset 0 0 0 1px rgba(202,219,205,.10), 0 12px 38px rgba(0,0,0,.18);
}
body[data-ui-version="3.3.0"] .achievement-card[data-achievement-grade="6"] {
  border-color: rgba(241,193,76,.82);
  box-shadow: inset 0 0 0 1px rgba(241,193,76,.22), 0 14px 42px rgba(111,78,18,.24);
}
body[data-ui-version="3.3.0"] .achievement-grade-row { flex-wrap: wrap; }
body[data-ui-version="3.3.0"] .achievement-grade-dot { min-width: 26px; }
body[data-ui-version="3.3.0"] .achievement-metadata-note {
  margin: -4px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(255,194,71,.14);
  border-radius: 12px;
  background: rgba(255,194,71,.055);
  color: var(--cinema-muted);
  font-size: 9px;
  line-height: 1.35;
}
@media (max-width: 760px) {
  body[data-ui-version="3.3.0"] .achievement-card { grid-template-columns: 116px minmax(0,1fr); min-height: 148px; }
  body[data-ui-version="3.3.0"] .achievement-art { min-height: 0; }
  body[data-ui-version="3.3.0"] .achievement-grade-dot { min-width: 23px; padding: 0 3px; }
}

/* r32 — direct home entry and full achievement detail screen. */
body[data-ui-version="3.3.0"] .home-achievements-entry {
  width: 100%; min-width: 0; min-height: 64px; display: grid; grid-template-columns: 44px minmax(0,1fr) auto;
  align-items: center; gap: 12px; margin-top: -14px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px; background: linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  color: var(--cinema-text); text-align: left;
}
body[data-ui-version="3.3.0"] .home-achievements-entry-mark {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px;
  background: rgba(255,255,255,.07); font-size: 20px;
}
body[data-ui-version="3.3.0"] .home-achievements-entry > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
body[data-ui-version="3.3.0"] .home-achievements-entry b { font-size: 14px; }
body[data-ui-version="3.3.0"] .home-achievements-entry small { color: var(--cinema-muted); font-size: 10px; }
body[data-ui-version="3.3.0"] .home-achievements-entry em { color: var(--cinema-muted); font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }

body[data-ui-version="3.3.0"] .achievement-detail-screen { align-content: start; }
body[data-ui-version="3.3.0"] .achievement-detail-hero {
  display: grid; grid-template-columns: minmax(180px, 320px) minmax(0,1fr); gap: 20px; align-items: center;
  padding: 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 22px; background: rgba(255,255,255,.025);
}
body[data-ui-version="3.3.0"] .achievement-detail-art {
  aspect-ratio: 1/1; overflow: hidden; border-radius: 18px; background: rgba(255,255,255,.045);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 16px 44px rgba(0,0,0,.26);
}
body[data-ui-version="3.3.0"] .achievement-detail-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
body[data-ui-version="3.3.0"] .achievement-detail-hero.is-secret .achievement-detail-art img { filter: grayscale(1) brightness(.58); }
body[data-ui-version="3.3.0"] .achievement-detail-copy { min-width: 0; display: grid; gap: 9px; align-content: center; }
body[data-ui-version="3.3.0"] .achievement-detail-copy > span { color: var(--cinema-muted); font-size: 9px; font-weight: 900; letter-spacing: .10em; text-transform: uppercase; }
body[data-ui-version="3.3.0"] .achievement-detail-copy h3 { margin: 0; font-size: clamp(25px, 4vw, 42px); line-height: .98; letter-spacing: -.045em; }
body[data-ui-version="3.3.0"] .achievement-detail-copy p { margin: 0; max-width: 56ch; color: var(--cinema-muted); font-size: 12px; line-height: 1.5; }
body[data-ui-version="3.3.0"] .achievement-detail-progress { display: grid; gap: 7px; margin-top: 8px; }
body[data-ui-version="3.3.0"] .achievement-detail-progress > span { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.10); }
body[data-ui-version="3.3.0"] .achievement-detail-progress > span > i { display: block; width: var(--ach-progress); height: 100%; border-radius: inherit; background: currentColor; }
body[data-ui-version="3.3.0"] .achievement-detail-progress b { font-size: 11px; }
body[data-ui-version="3.3.0"] .achievement-secret-message {
  display: grid; gap: 7px; justify-items: center; padding: 18px; border: 1px dashed rgba(255,255,255,.12); border-radius: 18px;
  background: rgba(255,255,255,.02); text-align: center;
}
body[data-ui-version="3.3.0"] .achievement-secret-message b { font-size: 14px; }
body[data-ui-version="3.3.0"] .achievement-secret-message p { margin: 0; color: var(--cinema-muted); font-size: 10px; }
body[data-ui-version="3.3.0"] .achievement-secret-message span { margin-top: 5px; color: rgba(255,255,255,.44); font: 900 16px/1.2 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; }
body[data-ui-version="3.3.0"] .achievement-detail-section { display: grid; gap: 12px; }
body[data-ui-version="3.3.0"] .achievement-detail-section h3 { margin: 2px 0 0; font-size: 18px; }
body[data-ui-version="3.3.0"] .achievement-detail-grades { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
body[data-ui-version="3.3.0"] .achievement-detail-grade {
  min-width: 0; min-height: 48px; display: grid; grid-template-columns: 28px minmax(110px,.45fr) minmax(0,1fr); align-items: center; gap: 9px;
  padding: 9px 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.025);
}
body[data-ui-version="3.3.0"] .achievement-detail-grade > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.05); }
body[data-ui-version="3.3.0"] .achievement-detail-grade b { font-size: 11px; }
body[data-ui-version="3.3.0"] .achievement-detail-grade small { color: var(--cinema-muted); font-size: 9px; }
body[data-ui-version="3.3.0"] .achievement-detail-grade.is-unlocked { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.045); }
body[data-ui-version="3.3.0"] .achievement-detail-grade.is-locked { opacity: .62; }

@media (max-width: 760px) {
  body[data-ui-version="3.3.0"] .home-achievements-entry { margin-top: -12px; }
  body[data-ui-version="3.3.0"] .achievement-detail-hero { grid-template-columns: 1fr; gap: 14px; padding: 12px; }
  body[data-ui-version="3.3.0"] .achievement-detail-art { width: min(100%, 340px); justify-self: center; }
  body[data-ui-version="3.3.0"] .achievement-detail-copy { text-align: center; justify-items: center; }
  body[data-ui-version="3.3.0"] .achievement-detail-progress { width: 100%; }
  body[data-ui-version="3.3.0"] .achievement-detail-grade { grid-template-columns: 28px minmax(82px,.42fr) minmax(0,1fr); }
}

/* r33 — showcase, PSN-style rank counts, social comparison and legend prestige. */
body[data-ui-version="3.3.0"] .achievement-scoreboard.is-r33,
body[data-ui-version="3.3.0"] .achievement-scoreboard.is-compare {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
body[data-ui-version="3.3.0"] .achievement-tier-strip {
  display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 6px;
}
body[data-ui-version="3.3.0"] .achievement-tier-strip > button {
  min-width: 0; display: grid; grid-template-columns: auto auto; grid-template-areas: "icon value" "label label";
  justify-content: center; align-items: center; column-gap: 5px; row-gap: 3px; min-height: 54px; padding: 8px 5px;
  border: 1px solid rgba(255,255,255,.075); border-radius: 14px; background: rgba(255,255,255,.026); color: var(--cinema-text); text-align: center; cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
body[data-ui-version="3.3.0"] .achievement-tier-strip > button:active { transform: scale(.97); }
body[data-ui-version="3.3.0"] .achievement-tier-strip > button.is-active { border-color: rgba(246,189,96,.48); background: rgba(246,189,96,.10); }
body[data-ui-version="3.3.0"] .achievement-tier-strip i { grid-area: icon; font-style: normal; color: var(--cinema-muted); font-size: 11px; }
body[data-ui-version="3.3.0"] .achievement-tier-strip b { grid-area: value; font-size: 16px; line-height: 1; }
body[data-ui-version="3.3.0"] .achievement-tier-strip span { grid-area: label; color: var(--cinema-muted); font-size: 7.5px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
body[data-ui-version="3.3.0"] .achievement-tier-strip [data-tier="legend"] { border-color: rgba(241,193,76,.32); background: rgba(241,193,76,.055); }
body[data-ui-version="3.3.0"] .achievement-tier-strip [data-tier="platinum"] { border-color: rgba(202,219,205,.24); }
body[data-ui-version="3.3.0"] .achievement-tier-strip [data-tier="gold"] { border-color: rgba(220,169,54,.22); }
body[data-ui-version="3.3.0"] .achievement-compare-scoreboard {
  display: flex; flex-wrap: wrap; gap: 7px;
}
body[data-ui-version="3.3.0"] .achievement-compare-scoreboard span {
  min-height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px; background: rgba(255,255,255,.03); color: var(--cinema-muted); font-size: 9px;
}
body[data-ui-version="3.3.0"] .achievement-compare-scoreboard b { color: var(--cinema-text); font-size: 10px; }
body[data-ui-version="3.3.0"] .achievement-card-comparison {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; margin-top: 1px;
}
body[data-ui-version="3.3.0"] .achievement-card-comparison span {
  min-width: 0; padding: 5px 6px; border-radius: 8px; background: rgba(255,255,255,.045); color: var(--cinema-muted); font-size: 7.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-ui-version="3.3.0"] .achievement-card-comparison b { color: var(--cinema-text); }
body[data-ui-version="3.3.0"] .achievement-showcase-badge {
  position: absolute; right: 7px; top: 7px; z-index: 4; min-width: 24px; height: 24px; display: grid; place-items: center; padding: 0 6px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(8,11,16,.82); color: #f6bd60; font-size: 11px; font-weight: 900;
  backdrop-filter: blur(10px);
}
body[data-ui-version="3.3.0"] .achievement-showcase-toggle {
  width: fit-content; min-height: 38px; padding: 0 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  background: rgba(255,255,255,.05); color: var(--cinema-text); font-size: 10px; font-weight: 850;
}
body[data-ui-version="3.3.0"] .achievement-showcase-toggle.is-active { border-color: rgba(246,189,96,.38); background: rgba(246,189,96,.09); color: #f6bd60; }
body[data-ui-version="3.3.0"] .achievement-legend-prestige {
  display: grid; grid-template-columns: minmax(150px,.42fr) minmax(0,1fr); gap: 16px; align-items: center; padding: 14px 16px;
  border: 1px solid rgba(241,193,76,.20); border-radius: 17px; background: linear-gradient(135deg, rgba(241,193,76,.07), rgba(255,255,255,.02));
}
body[data-ui-version="3.3.0"] .achievement-legend-prestige h3 { margin: 3px 0 0; font-size: 20px; }
body[data-ui-version="3.3.0"] .achievement-legend-prestige p { margin: 0; color: var(--cinema-muted); font-size: 10px; line-height: 1.45; }
body[data-ui-version="3.3.0"] .achievement-legend-prestige p b { color: #f6bd60; }
body[data-ui-version="3.3.0"] .achievement-detail-compare {
  display: grid; grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr); gap: 9px; align-items: center; padding: 12px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(255,255,255,.025);
}
body[data-ui-version="3.3.0"] .achievement-detail-compare > div { display: grid; gap: 3px; text-align: center; }
body[data-ui-version="3.3.0"] .achievement-detail-compare small { color: var(--cinema-muted); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
body[data-ui-version="3.3.0"] .achievement-detail-compare b { font-size: 13px; }
body[data-ui-version="3.3.0"] .achievement-detail-compare > span { color: var(--cinema-muted); text-align: center; }

body[data-ui-version="3.3.0"] .home-achievement-showcase {
  min-width: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: -14px;
}
body[data-ui-version="3.3.0"] .home-achievement-showcase > button {
  min-width: 0; min-height: 62px; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 8px; align-items: center; padding: 7px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(255,255,255,.025); color: var(--cinema-text); text-align: left;
}
body[data-ui-version="3.3.0"] .home-achievement-showcase > button > span {
  width: 42px; height: 42px; overflow: hidden; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.05);
}
body[data-ui-version="3.3.0"] .home-achievement-showcase img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-ui-version="3.3.0"] .home-achievement-showcase div { min-width: 0; display: grid; gap: 3px; }
body[data-ui-version="3.3.0"] .home-achievement-showcase b,
body[data-ui-version="3.3.0"] .home-achievement-showcase small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-version="3.3.0"] .home-achievement-showcase b { font-size: 9.5px; }
body[data-ui-version="3.3.0"] .home-achievement-showcase small { color: var(--cinema-muted); font-size: 7.5px; text-transform: uppercase; letter-spacing: .04em; }

body[data-ui-version="3.3.0"] .club-profile-achievements {
  width: 100%; min-width: 0; min-height: 48px; display: grid; grid-template-columns: 34px minmax(0,1fr) 18px; gap: 9px; align-items: center;
  padding: 7px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.025); color: var(--cinema-text); text-align: left;
}
body[data-ui-version="3.3.0"] .club-profile-achievements > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(246,189,96,.09); font-size: 16px; }
body[data-ui-version="3.3.0"] .club-profile-achievements > div { min-width: 0; display: grid; gap: 2px; }
body[data-ui-version="3.3.0"] .club-profile-achievements b { font-size: 11px; }
body[data-ui-version="3.3.0"] .club-profile-achievements small { color: var(--cinema-muted); font-size: 8px; }
body[data-ui-version="3.3.0"] .club-profile-achievements .is-chevron { width: 14px; color: var(--cinema-muted); }

@media (max-width: 760px) {
  body[data-ui-version="3.3.0"] .achievement-tier-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body[data-ui-version="3.3.0"] .achievement-legend-prestige { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  body[data-ui-version="3.3.0"] .achievement-showcase-toggle { width: 100%; }
  body[data-ui-version="3.3.0"] .home-achievement-showcase > button { grid-template-columns: 1fr; justify-items: center; min-height: 78px; text-align: center; }
  body[data-ui-version="3.3.0"] .home-achievement-showcase > button > span { width: 46px; height: 46px; }
  body[data-ui-version="3.3.0"] .home-achievement-showcase > button div { width: 100%; }
}


/* r41 — achievement unlock presentation cards. */
body[data-ui-version="3.3.0"] .achievement-unlock-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147482600;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
  background: rgba(3, 5, 8, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .18s ease;
  overscroll-behavior: contain;
  touch-action: pan-x;
}
body[data-ui-version="3.3.0"] .achievement-unlock-overlay[hidden] { display: none !important; }
body[data-ui-version="3.3.0"] .achievement-unlock-overlay.is-open { opacity: 1; }
body[data-ui-version="3.3.0"] .achievement-unlock-panel {
  width: min(920px, 100%);
  max-height: min(760px, calc(var(--uw-app-viewport-height, 100dvh) - 28px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(226, 188, 104, .24);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(26,23,18,.99), rgba(9,11,14,.99));
  box-shadow: 0 24px 80px rgba(0,0,0,.58);
  transform: translateY(12px) scale(.985);
  transition: transform .18s ease;
}
body[data-ui-version="3.3.0"] .achievement-unlock-overlay.is-open .achievement-unlock-panel { transform: none; }
body[data-ui-version="3.3.0"] .achievement-unlock-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
body[data-ui-version="3.3.0"] .achievement-unlock-head :where(p,h2) { margin: 0; }
body[data-ui-version="3.3.0"] .achievement-unlock-head h2 { margin-top: 3px; font-size: 23px; line-height: 1.05; }
body[data-ui-version="3.3.0"] .achievement-unlock-head p:last-child { margin-top: 5px; color: var(--cinema-muted); font-size: 11px; }
body[data-ui-version="3.3.0"] .achievement-unlock-x { flex: 0 0 auto; }
body[data-ui-version="3.3.0"] .achievement-unlock-track {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(360px, calc(100vw - 64px));
  justify-content: center;
  gap: 12px;
  overflow: hidden auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
body[data-ui-version="3.3.0"] .achievement-unlock-overlay.is-multiple .achievement-unlock-track { justify-content: start; overflow: auto hidden; }
body[data-ui-version="3.3.0"] .achievement-unlock-card {
  scroll-snap-align: center;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(118px, 42%) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(226,188,104,.22);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(37,31,22,.96), rgba(14,16,19,.98));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 12px 34px rgba(0,0,0,.26);
}
body[data-ui-version="3.3.0"] .achievement-unlock-art { aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; border-radius: 14px; background: #17140f; }
body[data-ui-version="3.3.0"] .achievement-unlock-art :where(img,span) { width: 100%; height: 100%; }
body[data-ui-version="3.3.0"] .achievement-unlock-art img { display: block; object-fit: cover; }
body[data-ui-version="3.3.0"] .achievement-unlock-art span { display: grid; place-items: center; font-size: 54px; }
body[data-ui-version="3.3.0"] .achievement-unlock-copy { min-width: 0; display: grid; align-content: center; gap: 6px; }
body[data-ui-version="3.3.0"] .achievement-unlock-copy > span { color: #d6ae62; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
body[data-ui-version="3.3.0"] .achievement-unlock-copy h3 { margin: 0; font-size: 19px; line-height: 1.05; }
body[data-ui-version="3.3.0"] .achievement-unlock-copy b { color: #f0c76f; font-size: 12px; }
body[data-ui-version="3.3.0"] .achievement-unlock-copy p { margin: 2px 0 0; color: var(--cinema-muted); font-size: 11px; line-height: 1.4; }
body[data-ui-version="3.3.0"] .achievement-unlock-actions { display: flex; justify-content: flex-end; }
body[data-ui-version="3.3.0"] .achievement-unlock-actions .button { min-width: 132px; }
@media (max-width: 560px) {
  body[data-ui-version="3.3.0"] .achievement-unlock-overlay { place-items: end center; padding-inline: 10px; }
  body[data-ui-version="3.3.0"] .achievement-unlock-panel { width: 100%; max-height: calc(var(--uw-app-viewport-height, 100dvh) - 18px); padding: 13px; border-radius: 20px; }
  body[data-ui-version="3.3.0"] .achievement-unlock-track { grid-auto-columns: min(84vw, 330px); }
  body[data-ui-version="3.3.0"] .achievement-unlock-overlay:not(.is-multiple) .achievement-unlock-track { grid-auto-columns: 1fr; width: 100%; }
  body[data-ui-version="3.3.0"] .achievement-unlock-card { grid-template-columns: 112px minmax(0, 1fr); gap: 11px; padding: 10px; }
  body[data-ui-version="3.3.0"] .achievement-unlock-copy h3 { font-size: 17px; }
  body[data-ui-version="3.3.0"] .achievement-unlock-actions .button { width: 100%; }
}

/* source: css/screens/admin-console.css */
/* r61 — dedicated owner administration workspace. */
body[data-ui-version="3.3.0"][data-screen="admin"] .content {
  max-width: 1560px;
}

body[data-ui-version="3.3.0"] .admin-console {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

body[data-ui-version="3.3.0"] .admin-console-nav {
  position: sticky;
  top: 94px;
  display: grid;
  gap: 6px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
}

body[data-ui-version="3.3.0"] .admin-console-nav button {
  position: relative;
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
body[data-ui-version="3.3.0"] .admin-console-nav button:hover {
  border-color: color-mix(in srgb, var(--button) 22%, var(--border));
  background: color-mix(in srgb, var(--button) 5%, transparent);
  color: var(--text);
}
body[data-ui-version="3.3.0"] .admin-console-nav button:active { transform: scale(.985); }
body[data-ui-version="3.3.0"] .admin-console-nav button.is-active {
  border-color: color-mix(in srgb, var(--button) 36%, var(--border));
  background: color-mix(in srgb, var(--button) 11%, var(--panel));
  color: var(--text);
}
body[data-ui-version="3.3.0"] .admin-console-nav button > span { min-width: 0; display: grid; gap: 3px; }
body[data-ui-version="3.3.0"] .admin-console-nav button b { font-size: 12px; }
body[data-ui-version="3.3.0"] .admin-console-nav button small { color: var(--muted); font-size: 9px; line-height: 1.25; }
body[data-ui-version="3.3.0"] .admin-console-nav button em {
  min-width: 24px; height: 24px; display: grid; place-items: center; padding: 0 6px;
  border-radius: 999px; background: rgba(255,93,104,.14); color: #ff8b93; font-size: 9px; font-style: normal; font-weight: 850;
}

body[data-ui-version="3.3.0"] .admin-console-workspace,
body[data-ui-version="3.3.0"] .admin-section-stack { min-width: 0; display: grid; gap: 14px; }

body[data-ui-version="3.3.0"] .admin-overview-hero,
body[data-ui-version="3.3.0"] .admin-system-status {
  min-height: 128px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--button) 24%, var(--border));
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--button) 16%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 94%, var(--button) 6%), var(--panel));
}
body[data-ui-version="3.3.0"] .admin-overview-hero h2,
body[data-ui-version="3.3.0"] .admin-system-status h2 { margin: 2px 0 7px; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.045em; }
body[data-ui-version="3.3.0"] .admin-overview-hero p:last-child,
body[data-ui-version="3.3.0"] .admin-system-status p:last-child { max-width: 700px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
body[data-ui-version="3.3.0"] .admin-health-pill {
  flex: 0 0 auto; min-height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 999px; font-size: 10px; font-weight: 800;
}
body[data-ui-version="3.3.0"] .admin-health-pill i { width: 7px; height: 7px; border-radius: 50%; }
body[data-ui-version="3.3.0"] .admin-health-pill.is-ready { border-color: rgba(112,211,154,.28); color: #78d69f; background: rgba(112,211,154,.08); }
body[data-ui-version="3.3.0"] .admin-health-pill.is-ready i { background: #78d69f; box-shadow: 0 0 0 4px rgba(112,211,154,.09); }
body[data-ui-version="3.3.0"] .admin-health-pill.is-warning { border-color: rgba(255,139,147,.30); color: #ff8b93; background: rgba(255,93,104,.08); }
body[data-ui-version="3.3.0"] .admin-health-pill.is-warning i { background: #ff8b93; }

body[data-ui-version="3.3.0"] .admin-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
body[data-ui-version="3.3.0"] .admin-quick-grid button {
  min-height: 108px; display: grid; grid-template-rows: auto auto 1fr; gap: 5px;
  padding: 14px; border: 1px solid var(--border); border-radius: 17px;
  background: color-mix(in srgb, var(--panel) 96%, transparent); color: var(--text); text-align: left; cursor: pointer;
}
body[data-ui-version="3.3.0"] .admin-quick-grid button:hover { border-color: color-mix(in srgb, var(--button) 38%, var(--border)); background: color-mix(in srgb, var(--button) 6%, var(--panel)); }
body[data-ui-version="3.3.0"] .admin-quick-grid button > span { color: var(--button); font: 750 9px/1 var(--mono); }
body[data-ui-version="3.3.0"] .admin-quick-grid button b { font-size: 13px; }
body[data-ui-version="3.3.0"] .admin-quick-grid button small { align-self: end; color: var(--muted); font-size: 9px; line-height: 1.35; }

body[data-ui-version="3.3.0"] .admin-runtime-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; padding: 0 16px 16px;
}
body[data-ui-version="3.3.0"] .admin-runtime-strip > span {
  min-width: 0; display: grid; gap: 5px; padding: 12px; border-left: 1px solid var(--border);
}
body[data-ui-version="3.3.0"] .admin-runtime-strip > span:first-child { border-left: 0; }
body[data-ui-version="3.3.0"] .admin-runtime-strip small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
body[data-ui-version="3.3.0"] .admin-runtime-strip b { font-size: 15px; }

body[data-ui-version="3.3.0"] .admin-system-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-ui-version="3.3.0"] .admin-system-metrics article { min-height: 112px; }
body[data-ui-version="3.3.0"] .admin-system-metrics article b small,
body[data-ui-version="3.3.0"] .admin-metrics article b small { display: inline; margin: 0; font-size: .34em; letter-spacing: 0; color: var(--muted); }

body[data-ui-version="3.3.0"] .admin-health-grid,
body[data-ui-version="3.3.0"] .admin-cache-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 16px 16px;
}
body[data-ui-version="3.3.0"] .admin-health-grid article,
body[data-ui-version="3.3.0"] .admin-cache-grid article {
  min-width: 0; display: grid; gap: 6px; padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--bg) 34%, var(--panel));
}
body[data-ui-version="3.3.0"] .admin-health-grid article b,
body[data-ui-version="3.3.0"] .admin-cache-grid article span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
body[data-ui-version="3.3.0"] .admin-health-grid article span,
body[data-ui-version="3.3.0"] .admin-cache-grid article b { font-size: 20px; font-weight: 800; }
body[data-ui-version="3.3.0"] .admin-health-grid article small,
body[data-ui-version="3.3.0"] .admin-cache-grid article small { color: var(--muted); font-size: 9px; line-height: 1.35; }
body[data-ui-version="3.3.0"] .admin-health-grid article.is-ok { border-color: rgba(112,211,154,.22); }
body[data-ui-version="3.3.0"] .admin-health-grid article.is-ok span { color: #78d69f; }
body[data-ui-version="3.3.0"] .admin-health-grid article.is-bad { border-color: rgba(255,93,104,.25); }
body[data-ui-version="3.3.0"] .admin-health-grid article.is-bad span { color: #ff8b93; }

body[data-ui-version="3.3.0"] .admin-hot-list { display: grid; padding: 0 16px 16px; }
body[data-ui-version="3.3.0"] .admin-hot-list > div {
  min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 52px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
body[data-ui-version="3.3.0"] .admin-hot-list > div:first-child { border-top: 0; }
body[data-ui-version="3.3.0"] .admin-hot-list code { overflow: hidden; color: var(--text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-version="3.3.0"] .admin-hot-list > div > span { display: grid; justify-items: end; gap: 2px; }
body[data-ui-version="3.3.0"] .admin-hot-list b { font-size: 12px; }
body[data-ui-version="3.3.0"] .admin-hot-list small { color: var(--muted); font-size: 8px; }

body[data-ui-version="3.3.0"] .admin-audit-panel.is-compact .admin-audit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* The owner console has its own launcher. It is intentionally not part of the profile dialog. */
body[data-ui-version="3.3.0"] .admin-quick-button b { display: none; }
body[data-ui-version="3.3.0"] .admin-quick-button span { font-size: 17px; line-height: 1; }

@media (max-width: 1023px) {
  body[data-ui-version="3.3.0"] .topbar { grid-template-columns: 38px minmax(0, 1fr) 42px 42px 42px !important; }
  body[data-ui-version="3.3.0"] .admin-quick-button:not([hidden]) { display: grid !important; place-items: center; grid-column: 3 !important; grid-row: 1 !important; }
  body[data-ui-version="3.3.0"] .notification-center-button { grid-column: 4 !important; }
  body[data-ui-version="3.3.0"] .mobile-account { grid-column: 5 !important; }
  body[data-ui-version="3.3.0"] .admin-console { grid-template-columns: 1fr; gap: 10px; }
  body[data-ui-version="3.3.0"] .admin-console-nav {
    position: sticky; top: 64px; z-index: 9; display: flex; gap: 6px; margin: 0 -4px; padding: 7px;
    overflow-x: auto; scrollbar-width: none; border-radius: 15px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(20px);
  }
  body[data-ui-version="3.3.0"] .admin-console-nav::-webkit-scrollbar { display: none; }
  body[data-ui-version="3.3.0"] .admin-console-nav button { min-width: 132px; min-height: 48px; flex: 0 0 auto; padding: 7px 9px; }
  body[data-ui-version="3.3.0"] .admin-console-nav button small { display: none; }
}

@media (max-width: 650px) {
  body[data-ui-version="3.3.0"][data-screen="admin"] .view-header { margin-bottom: 9px; }
  body[data-ui-version="3.3.0"][data-screen="admin"] .view-header h1 { font-size: 31px; }
  body[data-ui-version="3.3.0"] .admin-overview-hero,
  body[data-ui-version="3.3.0"] .admin-system-status { min-height: 0; align-items: flex-start; flex-direction: column; padding: 16px; border-radius: 17px; }
  body[data-ui-version="3.3.0"] .admin-overview-hero h2,
  body[data-ui-version="3.3.0"] .admin-system-status h2 { font-size: 26px; }
  body[data-ui-version="3.3.0"] .admin-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  body[data-ui-version="3.3.0"] .admin-quick-grid button { min-height: 92px; padding: 11px; border-radius: 14px; }
  body[data-ui-version="3.3.0"] .admin-system-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-ui-version="3.3.0"] .admin-health-grid,
  body[data-ui-version="3.3.0"] .admin-cache-grid { grid-template-columns: 1fr; padding: 0 11px 11px; }
  body[data-ui-version="3.3.0"] .admin-runtime-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 10px 10px; }
  body[data-ui-version="3.3.0"] .admin-runtime-strip > span:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  body[data-ui-version="3.3.0"] .admin-runtime-strip > span:nth-child(4) { border-top: 1px solid var(--border); }
  body[data-ui-version="3.3.0"] .admin-audit-panel.is-compact .admin-audit-list { grid-template-columns: 1fr; }
}

/* source: css/components/interface-refinement.css */
/* Local Cyrillic variable font; no third-party font requests or blocking CSS. */
@font-face {
  font-family: Onest;
  src: url('/static/graphs/b9feebdc62240d7ecfef05b7c11ce12a701dda7cacdc8888ae64c20437d74dd3/assets/fonts/onest-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --uw-font-sans: Onest, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: var(--uw-font-sans);
}
body[data-ui-version="3.3.0"],
body[data-ui-version="3.3.0"] :is(button, input, textarea, select, h1, h2, h3, .eyebrow, .breadcrumbs, .results-meta, .media-info p, .details-meta, .watch-item span, .nav-item em, .badge) {
  font-family: var(--uw-font-sans) !important;
  font-variant-numeric: tabular-nums;
}
body[data-ui-version="3.3.0"] :is(.eyebrow, .breadcrumbs, .results-meta) { letter-spacing: .035em; }
body[data-ui-version="3.3.0"] :is(.media-info p, .details-meta) { line-height: 1.5; }
body[data-ui-version="3.3.0"] {
  --display: var(--uw-font-sans);
  font-weight: 450;
  background:
    radial-gradient(ellipse 90vw 600px at 0 0, rgba(64, 130, 218, .26), transparent 78%),
    radial-gradient(ellipse 75vw 540px at 100% 360px, rgba(121, 95, 174, .14), transparent 78%),
    #0a101c;
}
body[data-ui-version="3.3.0"] :is(.view-header h1, .details-body h2, .home-section-head h2, .home-intro h2, .sheet-head h2) {
  font-weight: 650;
  letter-spacing: -.035em;
}
body[data-ui-version="3.3.0"] :is(.media-info h3, .home-media-tile-info strong, .nav-item b) { font-weight: 600; }
/* One complete phrase at phone widths, including a 320px viewport. */
body[data-ui-version="3.3.0"] .home-intro { min-height: 0; padding: 24px 20px; }
body[data-ui-version="3.3.0"] .home-intro h2 {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(20px, 5.45vw, 44px);
  line-height: 1.2;
}
body[data-ui-version="3.3.0"] .home-intro::before { opacity: .4; }
body[data-ui-version="3.3.0"] .home-intro::after { display: none; }
@media (min-width: 761px) and (max-width: 1080px) {
  body[data-ui-version="3.3.0"] .home-intro h2 { font-size: clamp(26px, 3.4vw, 36px); }
}
/* Repeated poster badges use opaque surfaces instead of separate blur layers. */
body[data-ui-version="3.3.0"] :is(.badge, .status-dot, .card-state-badge) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: rgba(10, 15, 24, .93);
}
body[data-ui-version="3.3.0"] .media-card { transform: none; }
/* Static specular highlights and translucent chrome; no moving filters or per-poster blur. */
body[data-ui-version="3.3.0"] :is(.topbar, .bottom-nav, .sidebar, .share-dialog, .home-intro) {
  background: linear-gradient(130deg, rgba(255,255,255,.14), rgba(255,255,255,.025) 40%, transparent 72%), #152033;
  border: 1px solid rgba(217, 232, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 1px 0 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(255,255,255,.04), 0 12px 36px rgba(0,0,0,.25);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body[data-ui-version="3.3.0"] :is(.topbar, .bottom-nav, .sidebar, .share-dialog, .home-intro) {
    background: linear-gradient(130deg, rgba(255,255,255,.14), rgba(255,255,255,.025) 40%, transparent 72%), rgba(16, 26, 44, .58);
    backdrop-filter: blur(22px) saturate(155%);
    -webkit-backdrop-filter: blur(22px) saturate(155%);
  }
}
body[data-ui-version="3.3.0"] .topbar { border-width: 0 0 1px; }
body[data-ui-version="3.3.0"] .global-search {
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.045));
  border: 1px solid rgba(223,237,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
body[data-ui-version="3.3.0"] .bottom-nav button.is-active {
  background: linear-gradient(145deg, rgba(222,239,255,.22), rgba(157,201,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 3px 10px rgba(0,0,0,.12);
  border: 1px solid rgba(219,235,255,.19);
}
.export-dialog { width: min(580px, calc(100vw - 24px)); max-height: min(860px, calc(100dvh - 24px), calc(var(--app-viewport-height, 100dvh) - 24px)); }
.export-dialog[open] { display: flex; flex-direction: column; }
.export-dialog .share-shell { display: flex; flex-direction: column; width: 100%; min-height: 0; max-height: inherit; overflow: hidden; }
.export-dialog .share-shell > header { flex: 0 0 auto; }
.export-dialog .share-content {
  display: block; flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain;
  padding: 16px 18px max(20px, env(safe-area-inset-bottom)); scroll-padding-block: 16px;
}
.export-dialog .share-content > :first-child { margin-top: 0; }
.export-explanation { color: #b9c6d9; font-size: 14px; line-height: 1.65; }
.export-label { display: grid; gap: 8px; margin: 20px 0 14px; font-size: 13px; }
.export-dialog input { width: 100%; min-width: 0; padding: 12px; border: 1px solid #46536a; border-radius: 12px; color: #f4f7fc; background: #0e1724; font-size: 16px; }
.export-status { min-height: 2em; font-size: 13px; line-height: 1.5; color: #c5d7f0; margin: 14px 0; }
.export-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.export-link { display: grid; min-width: 0; gap: 10px; padding: 14px; border: 1px solid #364357; background: rgba(23,35,52,.72); border-radius: 18px; overflow-wrap: anywhere; }
.export-link.is-highlighted { border-color: #93c6ff; box-shadow: 0 0 0 1px rgba(147,198,255,.18); }
.export-link small { color: #abbdd4; }
.export-url { display: block; min-width: 0; padding: 12px; border: 1px solid #526680; border-radius: 12px; background: #0e1724; color: #b8dbff; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; word-break: break-word; text-decoration: none; user-select: text; }
.export-url:hover { border-color: #a6cfff; }
.export-link-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.export-link-actions > :is(button, a) { min-height: 44px; }
.export-link-actions a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
body[data-ui-version="3.3.0"] :is(.export-dialog, .export-dialog button, .export-dialog a):focus-visible { outline: 2px solid #a6cfff; outline-offset: 3px; }
@media (prefers-reduced-transparency: reduce) {
  body[data-ui-version="3.3.0"] :is(.topbar, .bottom-nav, .sidebar, .share-dialog, .home-intro, .watch-panel, .club-compose) {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background-color: #131d2b !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-ui-version="3.3.0"] :is(.poster-wrap, .media-card, .share-dialog, .bottom-nav) { animation: none !important; transition: none !important; }
}

/* Long achievement collections must not allocate a filtered layer per card.
   Keep the coloured borders/art, with static surfaces while scrolling. */
body[data-ui-version="3.3.0"] .account-dialog.is-achievements::backdrop,
body[data-ui-version="3.3.0"] .is-achievements :is(.achievement-screen-head, .achievement-detail-close) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-ui-version="3.3.0"] .is-achievements .achievement-screen-head { background: #151c29; }
body[data-ui-version="3.3.0"] .is-achievements .achievement-card {
  contain: layout paint;
  filter: none !important;
  opacity: 1;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
body[data-ui-version="3.3.0"] .is-achievements .achievement-card.is-locked { color: #a5a9b0; }
body[data-ui-version="3.3.0"] .is-achievements .achievement-card.is-locked .achievement-art img {
  filter: none;
  opacity: .48;
}
body[data-ui-version="3.3.0"] .is-achievements .achievement-card::before,
body[data-ui-version="3.3.0"] .is-achievements .achievement-card::after { display: none; animation: none; }