/* CMSPro public theme */
:root {
  --accent: #ff3d6e;
  --bg: #0a0a0f;
  --bg-2: #12121a;
  --surface: #17171f;
  --surface-2: #1f1f2a;
  --line: rgba(255, 255, 255, 0.08);
  --text: #f4f4f7;
  --muted: #9a9aab;
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --radius: 14px;
  --radius-sm: 10px;
  --wrap: 1480px;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 45%, transparent);
  color-scheme: dark;
}
[data-theme='midnight'] {
  --bg: #070b17;
  --bg-2: #0c1224;
  --surface: #111a30;
  --surface-2: #18233e;
  --line: rgba(148, 178, 255, 0.1);
  --muted: #8d9bbd;
}
[data-theme='light'] {
  --bg: #f6f6f9;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #eeeef3;
  --line: rgba(15, 15, 30, 0.09);
  --text: #15151c;
  --muted: #6b6b7b;
  --shadow: 0 10px 30px -14px rgba(20, 20, 40, 0.25);
  color-scheme: light;
}

:root { --font-head: Inter, ui-sans-serif, system-ui, sans-serif; --font-body: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
[data-font='serif'] { --font-head: 'Playfair Display', Georgia, serif; }
[data-font='display'] { --font-head: 'Playfair Display', Georgia, serif; }
[data-font='mono'] { --font-head: 'Space Grotesk', ui-monospace, monospace; --font-body: 'Space Grotesk', ui-monospace, monospace; }

*, *::before, *::after { box-sizing: border-box; }
/* Components set their own display (grid/flex), which would otherwise override the hidden attribute. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .logo-word, .hero-text strong, .watch-title, .section-head h2, .page-head h1 { font-family: var(--font-head); }
[data-font='display'] .logo-word { letter-spacing: 0; font-weight: 800; }
[data-font='display'] .hero-text strong, [data-font='display'] .page-head h1 { font-weight: 900; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
button, input, textarea { font: inherit; color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.main { padding-top: 24px; padding-bottom: 60px; min-height: 60vh; }
.main > section { margin-top: 40px; }
.main > section:first-child { margin-top: 0; }

/* ---------- Header ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; gap: 22px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; white-space: nowrap; }
.logo-mark {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7c3aed));
  box-shadow: 0 6px 18px -6px var(--accent-glow);
  position: relative;
}
.logo-mark::after {
  content: ''; position: absolute; left: 11px; top: 8px;
  border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
/* Chosen icon / letter (Settings → Logo & CTA). A custom colour beats the skin's mark styling. */
.logo-mark[data-icon] { display: grid; place-items: center; color: #fff; font-size: 16px; font-weight: 900; line-height: 1; letter-spacing: 0; }
.logo-mark[data-icon]::after { display: none; }
.logo-mark svg { width: 17px; height: 17px; display: block; }
[data-skin='noir'] .logo-mark[data-icon] { color: #000; }
[data-theme='light'][data-skin='noir'] .logo-mark[data-icon] { color: #fff; }
.logo-mark[style*='--mark'] { background: var(--mark) !important; box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--mark) 70%, transparent) !important; color: #fff !important; }
.logo-mark[style*='--mark']::after { border-left-color: #fff !important; }
.logo-img { height: 34px; width: auto; max-width: 220px; object-fit: contain; display: block; }
.btn-cta { margin-left: 8px; flex: none; height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 700; background: var(--accent); color: #fff; box-shadow: 0 8px 22px -8px var(--accent-glow); text-transform: uppercase; letter-spacing: .04em; font-size: 13px; align-self: center; transition: transform .15s, filter .15s; }
.btn-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.mainnav { display: flex; gap: 4px; }
.mainnav a { padding: 8px 12px; border-radius: 999px; color: var(--muted); font-weight: 500; font-size: 14px; transition: color .15s, background .15s; }
.mainnav a:hover { color: var(--text); background: var(--surface); }
.mainnav a.active { color: var(--text); background: var(--surface-2); }
.search { margin-left: auto; position: relative; flex: 0 1 380px; }
.search input {
  width: 100%; height: 42px; padding: 0 46px 0 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); outline: none; transition: border-color .15s, box-shadow .15s;
}
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.search button {
  position: absolute; right: 4px; top: 4px; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.icon-btn { background: none; border: 0; padding: 6px; cursor: pointer; display: none; }
.chips-row { border-top: 1px solid var(--line); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips-row .chips { flex-wrap: nowrap; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; }
.chips-row .chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: var(--surface); border: 1px solid var(--line); transition: all .15s;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip small { color: var(--muted); }
.chip-accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }
.hero-main { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface); box-shadow: var(--shadow); }
.hero-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.hero-main:hover img { transform: scale(1.04); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.85)); }
.hero-text { position: absolute; left: 24px; right: 24px; bottom: 22px; display: grid; gap: 8px; color: #fff; }
.hero-text strong { font-size: clamp(20px, 2.4vw, 32px); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.hero-text small { opacity: .8; }
.hero-play {
  position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 26px; color: #fff; padding-left: 5px;
  background: color-mix(in srgb, var(--accent) 85%, transparent); box-shadow: 0 0 0 10px var(--accent-soft), 0 20px 40px -10px var(--accent-glow);
  opacity: 0; transform: scale(.85); transition: all .25s;
}
.hero-main:hover .hero-play { opacity: 1; transform: scale(1); }
.pill { justify-self: start; padding: 4px 10px; border-radius: 999px; background: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.hero-side { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px; align-content: start; }
.hero-side .card-meta span:last-child { display: none; }

/* ---------- Sections ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.section-head h2 { font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.section-head h2::before { content: ''; width: 4px; height: 20px; border-radius: 4px; background: var(--accent); }
.link-more { color: var(--muted); font-size: 14px; font-weight: 600; }
.link-more:hover { color: var(--accent); }
.page-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 6px 0 18px; }
.page-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.lead { max-width: 760px; margin: -6px 0 20px; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ---------- Video cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px 18px; }
.card { min-width: 0; }
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); isolation: isolate; }
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .3s; }
.thumb video { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .25s; }
.card:hover .thumb img { transform: scale(1.06); filter: brightness(1.08); }
.thumb::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); pointer-events: none; }
.card:hover .thumb { box-shadow: 0 14px 30px -14px var(--accent-glow); }
.badge { position: absolute; z-index: 2; font-size: 12px; font-weight: 700; padding: 3px 7px; border-radius: 6px; line-height: 1.2; }
.badge-time { right: 8px; bottom: 8px; background: rgba(0,0,0,.78); color: #fff; }
.badge-hd { left: 8px; top: 8px; background: var(--accent); color: #fff; font-size: 11px; letter-spacing: .04em; }
.thumb-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent); z-index: 3; }
.card:hover .thumb-progress { width: 100%; transition: width 6s linear; }
.card-body { padding: 10px 2px 0; }
.card-title { font-size: 15px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-title a:hover { color: var(--accent); }
.card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.rating.good { color: #22c55e; }

/* ---------- Card / grid styles (gallery vs tube looks) ---------- */
/* OVERLAY: title & meta float over the thumbnail (magazine / gallery look) */
[data-cards='overlay'] .card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; z-index: 3; pointer-events: none; background: linear-gradient(transparent, rgba(0,0,0,.82)); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
[data-cards='overlay'] .card { position: relative; }
[data-cards='overlay'] .badge-time { top: 8px; bottom: auto; } /* keep clear of the overlaid title/meta */
[data-cards='overlay'] .card-title, [data-cards='overlay'] .card-title a { color: #fff; }
[data-cards='overlay'] .card-meta { color: rgba(255,255,255,.82); }
[data-cards='overlay'] .card-meta .muted { color: rgba(255,255,255,.6); }
[data-cards='overlay'] .card-title a:hover { color: #fff; text-decoration: underline; }

/* POSTER: tall 2:3 cards for model / gallery sites */
[data-cards='poster'] .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px 16px; }
[data-cards='poster'] .thumb { aspect-ratio: 2 / 3; }
[data-cards='poster'] .card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 12px; z-index: 3; pointer-events: none; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
[data-cards='poster'] .card { position: relative; }
[data-cards='poster'] .card-title, [data-cards='poster'] .card-title a { color: #fff; }
[data-cards='poster'] .card-meta { color: rgba(255,255,255,.8); }
[data-cards='poster'] .badge-time { display: none; }

/* COMPACT: dense classic-tube grid */
[data-cards='compact'] .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 12px; }
[data-cards='compact'] .card-title { font-size: 13px; }
[data-cards='compact'] .card-meta { font-size: 12px; }
[data-cards='compact'] .card-body { padding-top: 7px; }

/* MINIMAL: clean editorial — no badges, square corners, hairline */
[data-cards='minimal'] .thumb { border-radius: 4px; box-shadow: none; }
[data-cards='minimal'] .thumb::after { box-shadow: inset 0 0 0 1px var(--line); }
[data-cards='minimal'] .badge-hd, [data-cards='minimal'] .badge-prem { display: none; }
[data-cards='minimal'] .card:hover .thumb { box-shadow: none; }
[data-cards='minimal'] .card:hover .thumb img { transform: none; filter: brightness(1.03); }
[data-cards='minimal'] .card-title { font-weight: 500; }
[data-cards='minimal'] .gal-title { background: none; position: static; padding: 10px 2px 0; color: var(--text); }
[data-cards='minimal'] .gal-card { aspect-ratio: auto; background: none; }
[data-cards='minimal'] .gal-card img { border-radius: 4px; aspect-ratio: 4/3; }

/* ---------- Categories ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.cat-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface-2); }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.cat-card:hover img { transform: scale(1.08); }
.cat-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; color: #fff; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.8)); }
.cat-overlay strong { font-size: 18px; font-weight: 800; }
.cat-overlay small { opacity: .8; }
.cat-card:hover { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Toolbar / tabs ---------- */
.toolbar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.active { background: var(--accent); color: #fff; box-shadow: 0 6px 16px -8px var(--accent-glow); }
.tabs-sm .tab { font-size: 13px; padding: 6px 12px; }
.tabs-sm .tab.active { background: var(--surface-2); color: var(--text); box-shadow: none; }

/* ---------- Pagination ---------- */
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 40px 0 10px; flex-wrap: wrap; }
.pager a, .pager-gap { min-width: 42px; height: 42px; padding: 0 14px; display: grid; place-items: center; border-radius: 12px; font-weight: 600; }
.pager a { background: var(--surface); border: 1px solid var(--line); }
.pager a:hover { border-color: var(--accent); }
.pager a.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager-gap { color: var(--muted); }

/* ---------- Watch page ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.crumbs a:hover { color: var(--accent); }
.crumb-sep { opacity: .5; }
.watch { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; }
.player { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.player iframe, .player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-fluid .fluid_video_wrapper { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }
.player-empty { background-size: cover; background-position: center; display: grid; place-items: center; }
.player-empty span { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; color: #fff; background: var(--accent); padding-left: 6px; }
.watch-title { font-size: 24px; font-weight: 800; margin: 18px 0 12px; letter-spacing: -0.02em; }
.watch-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.watch-stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.watch-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rating-bar { height: 4px; border-radius: 4px; background: var(--surface-2); margin: 14px 0 0; overflow: hidden; }
.rating-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #22c55e); }
.stars { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.stars-set { display: inline-flex; }
.star-btn { background: none; border: 0; cursor: pointer; font-size: 22px; line-height: 1; color: var(--surface-2); padding: 0 1px; transition: color .1s, transform .1s; }
.star-btn.on { color: #f5c451; }
.star-btn:hover { transform: scale(1.15); }
.stars-meta { font-size: 13px; }
.comments { margin-top: 30px; }
.comment-form { display: grid; gap: 10px; margin: 14px 0 24px; max-width: 640px; }
.comment-form .btn { justify-self: start; }
.comment-list { display: grid; gap: 18px; }
.comment { display: flex; gap: 12px; }
.comment-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--accent); }
.comment-head { display: flex; align-items: baseline; gap: 8px; }
.comment p { margin: 4px 0 0; white-space: pre-line; color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
.interstitial { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 20px; background: rgba(4,4,10,.92); }
.interstitial-inner { max-width: 90vw; max-height: 80vh; overflow: auto; }
.interstitial-skip { position: absolute; top: 18px; right: 18px; padding: 9px 16px; border: 0; border-radius: 8px; background: rgba(255,255,255,.14); color: #fff; font-weight: 700; cursor: pointer; }
.interstitial-skip:not(:disabled):hover { background: var(--accent); }
.watch-info { margin-top: 18px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 14px; }
.watch-desc { margin: 0; white-space: pre-line; color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
.side-title { font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.side-list { display: grid; gap: 16px; }
.side-list .card { display: grid; grid-template-columns: 168px 1fr; gap: 12px; }
.side-list .card-body { padding: 0; }
.side-list .card-title { font-size: 14px; }
.side-list .badge-hd { display: none; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 14px; cursor: pointer; transition: all .15s; white-space: nowrap; }
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 8px 20px -10px var(--accent-glow); }
.btn-accent:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-soft { background: var(--surface-2); border-color: var(--line); }
.btn-soft:hover { border-color: var(--accent); }
.btn-soft.voted { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.btn-ghost { border-color: var(--line); }

/* ---------- Tag cloud, empty, prose ---------- */
.tag-cloud { margin-top: 48px; }
.tag-cloud h2 { font-size: 18px; margin-bottom: 12px; }
.tag-cloud div { display: flex; flex-wrap: wrap; gap: 8px; }
.empty { text-align: center; padding: 80px 20px; display: grid; justify-items: center; gap: 10px; }
.empty-icon { font-size: 56px; color: var(--accent); line-height: 1; }
.empty h2 { font-size: 26px; }
.prose { max-width: 760px; margin: 0 auto; }
.prose h1 { font-size: 32px; margin-bottom: 6px; }
.prose h3 { margin-top: 26px; }
.prose p { color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
.records-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.records-table th, .records-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.records-table th { color: var(--muted); font-weight: 600; }
.form { display: grid; gap: 14px; margin-top: 20px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.form select { padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: inherit; font-weight: 400; }
.form label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.form h2 { margin: 0; font-size: 20px; }
.account-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.account .prose, .prose.account { max-width: 900px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; margin: 18px 0 8px; }
.plan { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 8px; align-content: start; }
.plan h3 { margin: 0; }
.plan-price { font-size: 26px; font-weight: 800; color: var(--accent); }
.plan-pay { display: flex; flex-wrap: wrap; gap: 8px; }
.account-card { display: grid; gap: 12px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin: 16px 0; }
.account-card > div { display: grid; gap: 2px; }
.account-card .ok { color: #22c55e; }
address.custodian { font-style: normal; padding: 14px 18px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 8px; margin: 12px 0 18px; }
.form input, .form textarea { padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); outline: none; font-weight: 400; }
.form input:focus, .form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; }
.notice { padding: 12px 16px; border-radius: 10px; margin: 16px 0; font-weight: 500; }
.notice-ok { background: rgba(34,197,94,.12); color: #22c55e; }
.notice-err { background: rgba(239,68,68,.12); color: #ef4444; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--bg-2); padding: 34px 0 26px; }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.footer-inner p { margin: 8px 0 0; max-width: 420px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; align-content: start; }
.footer-links a { color: var(--muted); font-size: 14px; }
.footer-links a:hover { color: var(--accent); }

/* ---------- Age gate ---------- */
.agegate { display: none; }
.age-pending .agegate { display: grid; position: fixed; inset: 0; z-index: 100; place-items: center; padding: 20px; background: rgba(5,5,10,.72); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.age-pending body { overflow: hidden; }
.agegate-card { max-width: 460px; text-align: center; padding: 34px 30px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); display: grid; gap: 12px; justify-items: center; animation: pop .35s cubic-bezier(.2,.9,.3,1.2); }
.agegate-card h2 { font-size: 24px; }
.agegate-card p { color: var(--muted); margin: 0 0 8px; }
.agegate-actions { display: grid; gap: 10px; width: 100%; }
.agegate-actions .btn { height: 48px; }
@keyframes pop { from { opacity: 0; transform: scale(.92) translateY(10px); } }

/* ---------- Galleries & photos ---------- */
.gal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 460px)); gap: 20px; justify-content: start; }
.gal-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-2); display: block; }
.gal-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gal-card:hover img { transform: scale(1.06); }
.gal-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 14px 12px; color: #fff; font-weight: 700; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
.gal-count { position: absolute; top: 8px; right: 8px; z-index: 2; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.7); color: #fff; }

/* Gallery card title placement: below / above the image (default = overlay, above rules) */
[data-galtitle='below'] .gal-card,
[data-galtitle='above'] .gal-card { aspect-ratio: auto; overflow: visible; background: none; display: flex; flex-direction: column; }
[data-galtitle='below'] .gal-card img,
[data-galtitle='above'] .gal-card img { aspect-ratio: 4 / 3; border-radius: var(--radius); }
[data-galtitle='below'] .gal-title,
[data-galtitle='above'] .gal-title { position: static; background: none; color: var(--text); padding: 0; font-size: 15px; line-height: 1.35; }
[data-galtitle='below'] .gal-title { padding-top: 10px; }
[data-galtitle='above'] .gal-title { order: -1; padding-bottom: 10px; }
[data-galtitle='above'] .gal-count { top: auto; bottom: 8px; }
/* Image has rounded corners and no clipping container here, so drop the zoom to avoid spill. */
[data-galtitle='below'] .gal-card:hover img,
[data-galtitle='above'] .gal-card:hover img { transform: none; }
.photo-grid { columns: 4 240px; column-gap: 12px; }
.photo-grid .photo { display: block; margin: 0 0 12px; break-inside: avoid; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.photo-grid .photo img { width: 100%; display: block; transition: filter .2s, transform .4s; }
.photo-grid .photo:hover img { filter: brightness(1.08); transform: scale(1.02); }
.photo-single { margin: 0; text-align: center; }
.photo-single img { display: inline-block; width: auto; max-width: min(100%, 960px); max-height: 82vh; border-radius: 12px; background: var(--surface-2); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(0,0,0,.92); }
.lightbox img { max-width: 92vw; max-height: 90vh; border-radius: 8px; }
.lb-close, .lb-prev, .lb-next { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 52px; height: 52px; border-radius: 50%; font-size: 30px; cursor: pointer; display: grid; place-items: center; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--accent); }
.lb-close { top: 18px; right: 18px; font-size: 26px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.lb-close[hidden], .lb-prev[hidden], .lb-next[hidden] { display: none; }
.lb-count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.8); font-size: 14px; font-variant-numeric: tabular-nums; }
.gal-card.is-loading { opacity: .6; cursor: progress; }
@media (max-width: 640px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } .photo-grid { columns: 2 140px; } }

/* ============================================================
   PREMIUM SKINS — layered on top of the light/dark base.
   ============================================================ */

/* ---- PREMIUM: black & gold luxe ---- */
[data-skin='premium'] { --gold: #e3c27e; --radius: 10px; --radius-sm: 8px; }
:root:not([data-theme='light'])[data-skin='premium'] {
  --bg: #0a090c; --bg-2: #100d14; --surface: #16131c; --surface-2: #1e1a26;
  --line: rgba(212, 175, 120, 0.14); --muted: #a99fb0;
}
[data-theme='light'][data-skin='premium'] { --bg: #faf7f0; --bg-2: #fff; --surface: #fff; --surface-2: #f3ecdd; --line: rgba(169,130,47,0.2); --gold: #a9822f; }
:root:not([data-theme='light'])[data-skin='premium'] body { background:
  radial-gradient(1000px 500px at 50% -10%, rgba(227, 194, 126, 0.08), transparent 60%), var(--bg); }
[data-theme='light'][data-skin='premium'] body { background:
  radial-gradient(1000px 500px at 50% -10%, rgba(169,130,47,0.08), transparent 60%), var(--bg); }
[data-skin='premium'] .topbar { background: rgba(10, 9, 12, 0.75); border-bottom: 1px solid var(--line); }
[data-skin='premium'] .mainnav a { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 600; }
[data-skin='premium'] .mainnav a.active { background: none; color: var(--gold); }
[data-skin='premium'] .mainnav a.active::after { content: ''; display: block; height: 2px; background: var(--gold); margin-top: 3px; border-radius: 2px; }
[data-skin='premium'] .logo-mark { background: linear-gradient(135deg, var(--gold), #a9822f); box-shadow: 0 6px 18px -6px rgba(227,194,126,.5); }
[data-skin='premium'] .logo-word { background: linear-gradient(90deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; letter-spacing: .02em; }
[data-skin='premium'] .section-head h2::before { background: linear-gradient(var(--gold), #a9822f); }
[data-skin='premium'] .chip { border-radius: 4px; }
[data-skin='premium'] .chip:hover { border-color: var(--gold); color: var(--gold); }
[data-skin='premium'] .badge-hd { background: linear-gradient(135deg, var(--gold), #a9822f); color: #241a06; }
[data-skin='premium'] .card:hover .thumb { box-shadow: 0 16px 34px -16px rgba(227,194,126,.4); }
[data-skin='premium'] .thumb, [data-skin='premium'] .cat-card, [data-skin='premium'] .gal-card { border: 1px solid var(--line); }
[data-skin='premium'] .pill { background: linear-gradient(135deg, var(--gold), #a9822f); color: #241a06; }
[data-skin='premium'] .hero-main { border: 1px solid var(--line); }
[data-skin='premium'] .btn-accent, [data-skin='premium'] .btn-cta { background: linear-gradient(135deg, var(--gold), #b98f37); color: #241a06; box-shadow: 0 10px 28px -10px rgba(227,194,126,.6); }

/* ---- VELVET: aubergine & magenta, glassy ---- */
[data-skin='velvet'] { --radius: 18px; --radius-sm: 14px; }
:root:not([data-theme='light'])[data-skin='velvet'] {
  --bg: #120611; --bg-2: #1a0a1b; --surface: rgba(40, 16, 42, 0.6); --surface-2: rgba(58, 22, 60, 0.7);
  --line: rgba(255, 120, 200, 0.14); --muted: #c39dc0;
}
[data-theme='light'][data-skin='velvet'] { --bg: #fdf0f7; --bg-2: #fff; --surface: #fff; --surface-2: #fbe6f2; --line: rgba(236,72,153,0.18); }
:root:not([data-theme='light'])[data-skin='velvet'] body { background:
  radial-gradient(900px 500px at 15% -5%, rgba(236, 72, 153, 0.18), transparent 55%),
  radial-gradient(800px 600px at 100% 10%, rgba(139, 92, 246, 0.16), transparent 55%), var(--bg); }
[data-theme='light'][data-skin='velvet'] body { background:
  radial-gradient(900px 500px at 15% -5%, rgba(236, 72, 153, 0.1), transparent 55%), var(--bg); }
[data-skin='velvet'] .topbar { background: rgba(18, 6, 17, 0.55); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
[data-skin='velvet'] .card-body, [data-skin='velvet'] .watch-info, [data-skin='velvet'] .search input { backdrop-filter: blur(8px); }
[data-skin='velvet'] .logo-mark { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
[data-skin='velvet'] .logo-word { background: linear-gradient(90deg, #fff, #ffb3e6); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-skin='velvet'] .thumb, [data-skin='velvet'] .cat-card, [data-skin='velvet'] .gal-card { box-shadow: 0 12px 30px -16px rgba(236,72,153,.4); }
[data-skin='velvet'] .btn-accent, [data-skin='velvet'] .btn-cta { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
[data-skin='velvet'] .section-head h2::before { background: linear-gradient(#ec4899, #8b5cf6); }

/* ---- NOIR: monochrome editorial ---- */
[data-skin='noir'] { --radius: 2px; --radius-sm: 2px; }
:root:not([data-theme='light'])[data-skin='noir'] {
  --bg: #000; --bg-2: #0a0a0a; --surface: #0e0e0e; --surface-2: #161616;
  --line: rgba(255,255,255,0.14); --text: #f7f7f7; --muted: #8c8c8c;
}
[data-theme='light'][data-skin='noir'] { --bg: #fff; --bg-2: #fff; --surface: #fff; --surface-2: #f2f2f2; --line: rgba(0,0,0,0.14); --text: #0a0a0a; --muted: #666; }
[data-theme='light'][data-skin='noir'] .topbar { background: #fff; }
[data-theme='light'][data-skin='noir'] .logo-mark { background: #000; }
[data-theme='light'][data-skin='noir'] .logo-mark::after { border-left-color: #fff; }
[data-theme='light'][data-skin='noir'] .logo-word { color: #000; }
[data-theme='light'][data-skin='noir'] .mainnav a:hover, [data-theme='light'][data-skin='noir'] .mainnav a.active { color: #000; }
[data-theme='light'][data-skin='noir'] .badge-hd, [data-theme='light'][data-skin='noir'] .pill, [data-theme='light'][data-skin='noir'] .btn-accent, [data-theme='light'][data-skin='noir'] .btn-cta { background: #000; color: #fff; }
[data-theme='light'][data-skin='noir'] .card:hover .thumb { box-shadow: 0 0 0 2px #000; }
[data-skin='noir'] .topbar { background: #000; border-bottom: 1px solid var(--line); }
[data-skin='noir'] .mainnav a { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; border-radius: 0; }
[data-skin='noir'] .mainnav a:hover, [data-skin='noir'] .mainnav a.active { background: none; color: #fff; }
[data-skin='noir'] .logo-mark { background: #fff; border-radius: 0; }
[data-skin='noir'] .logo-mark::after { border-left-color: #000; }
[data-skin='noir'] .logo-word { color: #fff; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; }
[data-skin='noir'] .thumb, [data-skin='noir'] .cat-card, [data-skin='noir'] .gal-card, [data-skin='noir'] .search input, [data-skin='noir'] .chip { border-radius: 0; }
[data-skin='noir'] .section-head h2 { text-transform: uppercase; letter-spacing: .12em; font-size: 18px; }
[data-skin='noir'] .section-head h2::before { display: none; }
[data-skin='noir'] .badge-hd, [data-skin='noir'] .pill { background: #fff; color: #000; border-radius: 0; }
[data-skin='noir'] .btn-accent, [data-skin='noir'] .btn-cta { background: #fff; color: #000; border-radius: 0; box-shadow: none; }
[data-skin='noir'] .btn-accent:hover, [data-skin='noir'] .btn-cta:hover { background: var(--accent); color: #fff; }
[data-skin='noir'] .card:hover .thumb { box-shadow: 0 0 0 2px #fff; }

/* ---- NEON: cyber glow (dark only; light falls back to base + neon accents) ---- */
:root:not([data-theme='light'])[data-skin='neon'] {
  --bg: #05060f; --bg-2: #080a18; --surface: #0c0f22; --surface-2: #12162e; --line: rgba(80, 200, 255, 0.16); --muted: #8ea3c8;
}
:root:not([data-theme='light'])[data-skin='neon'] body { background:
  radial-gradient(800px 500px at 20% 0%, rgba(0, 200, 255, 0.12), transparent 55%),
  radial-gradient(700px 500px at 90% 20%, var(--accent-soft), transparent 55%), var(--bg); }
[data-skin='neon'] .topbar { border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 var(--accent-soft); }
[data-skin='neon'] .logo-mark { box-shadow: 0 0 18px var(--accent-glow), 0 0 4px #35e0ff; }
[data-skin='neon'] .logo-word { text-shadow: 0 0 14px var(--accent-glow); }
[data-skin='neon'] .mainnav a.active { color: #fff; box-shadow: inset 0 0 0 1px var(--accent-glow), 0 0 14px -4px var(--accent-glow); background: none; }
[data-skin='neon'] .card:hover .thumb { box-shadow: 0 0 0 1px var(--accent), 0 0 26px -6px var(--accent-glow); }
[data-skin='neon'] .thumb::after { box-shadow: inset 0 0 0 1px var(--accent-soft); }
[data-skin='neon'] .badge-hd { box-shadow: 0 0 12px var(--accent-glow); }
[data-skin='neon'] .btn-accent, [data-skin='neon'] .btn-cta { box-shadow: 0 0 0 1px var(--accent), 0 0 22px -4px var(--accent-glow); }
[data-skin='neon'] .hero-text strong { text-shadow: 0 0 24px rgba(0,0,0,.6); }
[data-skin='neon'] .section-head h2::before { box-shadow: 0 0 12px var(--accent-glow); }

/* ============================================================
   PRO SKINS (Theme Studio)
   ============================================================ */

/* ---- CINEMA: streaming-service look — pure black, big type, poster rows ---- */
:root:not([data-theme='light'])[data-skin='cinema'] {
  --bg: #050505; --bg-2: #0d0d0d; --surface: #141414; --surface-2: #1f1f1f; --line: rgba(255,255,255,0.07); --muted: #a3a3a3;
}
[data-theme='light'][data-skin='cinema'] { --bg: #f5f5f5; --surface: #fff; --surface-2: #e9e9e9; }
[data-skin='cinema'] { --radius: 6px; --radius-sm: 4px; }
[data-skin='cinema'] .topbar { background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.55)); border-bottom: 0; }
[data-theme='light'][data-skin='cinema'] .topbar { background: rgba(255,255,255,.9); }
[data-skin='cinema'] .logo-word { text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 800; }
[data-skin='cinema'] .logo-mark { border-radius: 4px; }
[data-skin='cinema'] .mainnav a { border-radius: 4px; }
[data-skin='cinema'] .mainnav a.active { background: none; color: var(--text); font-weight: 700; }
[data-skin='cinema'] .section-head h2 { text-transform: uppercase; letter-spacing: .04em; font-size: 20px; }
[data-skin='cinema'] .section-head h2::before { display: none; }
[data-skin='cinema'] .chip { border-radius: 4px; background: transparent; }
[data-skin='cinema'] .card { transition: transform .3s cubic-bezier(.2,.7,.2,1); position: relative; }
[data-skin='cinema'] .card:hover { transform: scale(1.04); z-index: 5; }
[data-skin='cinema'] .card:hover .thumb img { transform: none; }
[data-skin='cinema'] .hero-shade { background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 55%, transparent), linear-gradient(0deg, var(--bg), transparent 35%); }
[data-skin='cinema'] .hero-text strong { font-size: clamp(24px, 3.4vw, 48px); text-transform: uppercase; letter-spacing: .01em; max-width: 70%; }
[data-skin='cinema'] .btn-accent, [data-skin='cinema'] .btn-cta { border-radius: 4px; }
[data-skin='cinema'] .pill { border-radius: 3px; }

/* ---- STUDIO: clean product UI — tiles, soft shadows, generous whitespace ---- */
[data-skin='studio'] { --radius: 18px; --radius-sm: 12px; }
[data-theme='light'][data-skin='studio'] { --bg: #f4f5f7; --bg-2: #fff; --surface: #fff; --surface-2: #eef0f3; --line: rgba(15,23,42,.08); --text: #0f172a; --muted: #64748b; --shadow: 0 1px 2px rgba(15,23,42,.06), 0 12px 32px -18px rgba(15,23,42,.25); }
:root:not([data-theme='light'])[data-skin='studio'] { --bg: #0b0d12; --bg-2: #11141b; --surface: #151922; --surface-2: #1c212c; --line: rgba(148,163,184,.12); --muted: #94a3b8; }
[data-skin='studio'] .topbar { background: color-mix(in srgb, var(--bg-2) 88%, transparent); }
[data-skin='studio'] .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 8px 12px; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
[data-skin='studio'] .card-body { padding: 10px 6px 0; }
[data-skin='studio'] .card:hover { transform: translateY(-3px); }
[data-skin='studio'] .card:hover .thumb { box-shadow: none; }
[data-skin='studio'] .section-head h2::before { width: 8px; height: 8px; border-radius: 50%; }
[data-skin='studio'] .mainnav a.active { background: var(--accent-soft); color: var(--accent); }
[data-skin='studio'] .hero-main, [data-skin='studio'] .cat-card, [data-skin='studio'] .gal-card { box-shadow: var(--shadow); }
[data-skin='studio'] .chip { background: var(--surface); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
[data-skin='studio'] .pager a, [data-skin='studio'] .tabs { box-shadow: 0 1px 2px rgba(15,23,42,.05); }

/* ---- AURORA: glass panels over a slow-moving colour field ---- */
[data-skin='aurora'] { --radius: 20px; --radius-sm: 14px; }
:root:not([data-theme='light'])[data-skin='aurora'] { --bg: #07061a; --bg-2: #0d0b26; --surface: rgba(255,255,255,.05); --surface-2: rgba(255,255,255,.09); --line: rgba(255,255,255,.1); --muted: #a5a3c9; }
[data-theme='light'][data-skin='aurora'] { --bg: #f3f1ff; --surface: rgba(255,255,255,.7); --surface-2: rgba(255,255,255,.9); --line: rgba(76,29,149,.12); }
[data-skin='aurora'] body { background: var(--bg); }
[data-skin='aurora'] body::before { content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 40% at 20% 20%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%),
              radial-gradient(35% 35% at 80% 30%, rgba(34,211,238,.28), transparent 70%),
              radial-gradient(45% 45% at 50% 90%, rgba(236,72,153,.22), transparent 70%);
  filter: blur(40px); animation: aurora-drift 24s ease-in-out infinite alternate; }
@keyframes aurora-drift { to { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.08); } }
[data-skin='aurora'] .topbar { background: rgba(10,8,30,.35); border-bottom: 1px solid var(--line); }
[data-theme='light'][data-skin='aurora'] .topbar { background: rgba(255,255,255,.55); }
[data-skin='aurora'] .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 8px 12px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
[data-skin='aurora'] .card-body { padding: 10px 6px 0; }
[data-skin='aurora'] .logo-word { background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--accent) 60%, #22d3ee)); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme='light'][data-skin='aurora'] .logo-word { background: linear-gradient(90deg, #1e1b4b, var(--accent)); -webkit-background-clip: text; background-clip: text; }
[data-skin='aurora'] .btn-accent, [data-skin='aurora'] .btn-cta, [data-skin='aurora'] .tab.active, [data-skin='aurora'] .pill { background: linear-gradient(135deg, var(--accent), #22d3ee); }
[data-skin='aurora'] .section-head h2::before { background: linear-gradient(var(--accent), #22d3ee); }
[data-skin='aurora'] .chip, [data-skin='aurora'] .search input, [data-skin='aurora'] .tabs { backdrop-filter: blur(10px); }

/* ---- RETRO: 80s synthwave — chrome type, neon grid ---- */
[data-skin='retro'] { --radius: 4px; --radius-sm: 3px; }
:root:not([data-theme='light'])[data-skin='retro'] { --bg: #120524; --bg-2: #1a0833; --surface: #200b3d; --surface-2: #2b1150; --line: rgba(255,43,214,.22); --muted: #c7a8e8; }
[data-theme='light'][data-skin='retro'] { --bg: #fff4fb; --surface: #fff; --surface-2: #ffe3f6; --line: rgba(190,24,93,.2); }
:root:not([data-theme='light'])[data-skin='retro'] body { background:
  linear-gradient(180deg, transparent 62%, rgba(255,43,214,.10) 100%),
  repeating-linear-gradient(90deg, rgba(34,211,238,.07) 0 1px, transparent 1px 64px),
  radial-gradient(900px 400px at 50% -10%, rgba(255,120,40,.22), transparent 60%), var(--bg); background-attachment: fixed; }
[data-skin='retro'] .logo-word, [data-skin='retro'] .page-head h1, [data-skin='retro'] .section-head h2 { text-transform: uppercase; font-style: italic; letter-spacing: .04em; }
:root:not([data-theme='light'])[data-skin='retro'] .logo-word { background: linear-gradient(180deg, #fff 10%, #9ce8ff 45%, #ff2bd6 52%, #ffd166 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-skin='retro'] .topbar { border-bottom: 2px solid var(--accent); box-shadow: 0 0 24px -6px var(--accent-glow); }
[data-skin='retro'] .section-head h2::before { width: 18px; height: 4px; background: linear-gradient(90deg, #22d3ee, var(--accent)); }
[data-skin='retro'] .thumb { border: 1px solid var(--line); }
[data-skin='retro'] .card:hover .thumb { box-shadow: 0 0 0 2px var(--accent), 6px 6px 0 #22d3ee; }
[data-skin='retro'] .btn-accent, [data-skin='retro'] .btn-cta { box-shadow: 4px 4px 0 #22d3ee; text-transform: uppercase; font-style: italic; }
[data-skin='retro'] .badge-hd { background: #22d3ee; color: #120524; }
[data-skin='retro'] .chip { border-radius: 3px; }

/* ---- MAGAZINE: editorial — serif headlines, hairlines, no chrome ---- */
[data-skin='magazine'] { --radius: 2px; --radius-sm: 2px; }
[data-theme='light'][data-skin='magazine'] { --bg: #faf8f3; --bg-2: #fff; --surface: #fff; --surface-2: #f0ece2; --line: rgba(20,17,10,.14); --text: #16130d; --muted: #6b6457; --shadow: none; }
:root:not([data-theme='light'])[data-skin='magazine'] { --bg: #141311; --bg-2: #1a1916; --surface: #1d1c19; --surface-2: #26241f; --line: rgba(255,248,230,.12); --muted: #a8a193; --shadow: none; }
[data-skin='magazine'] .topbar { background: var(--bg); backdrop-filter: none; border-bottom: 3px double var(--line); }
[data-skin='magazine'] .logo-mark:not([data-icon]):not([style*='--mark']) { display: none; }
[data-skin='magazine'] .logo-word { font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: 26px; letter-spacing: -.01em; }
[data-skin='magazine'] .mainnav a { text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; font-weight: 600; border-radius: 0; }
[data-skin='magazine'] .mainnav a.active { background: none; color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
[data-skin='magazine'] .section-head { border-top: 2px solid var(--text); padding-top: 10px; }
[data-skin='magazine'] .section-head h2 { text-transform: uppercase; letter-spacing: .1em; font-size: 15px; font-family: var(--font-body); }
[data-skin='magazine'] .section-head h2::before { display: none; }
[data-skin='magazine'] .card-title { font-family: 'Playfair Display', Georgia, serif; font-size: 17px; font-weight: 700; }
[data-skin='magazine'] .thumb::after { box-shadow: none; }
[data-skin='magazine'] .card:hover .thumb { box-shadow: none; }
[data-skin='magazine'] .chip, [data-skin='magazine'] .search input, [data-skin='magazine'] .tabs, [data-skin='magazine'] .tab, [data-skin='magazine'] .pager a { border-radius: 0; }
[data-skin='magazine'] .chip { background: none; text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; }
[data-skin='magazine'] .hero-text strong { font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: clamp(26px, 3.2vw, 44px); }
[data-skin='magazine'] .btn-accent, [data-skin='magazine'] .btn-cta { border-radius: 0; box-shadow: none; }

/* ---- BRUTAL: neo-brutalist — thick borders, hard shadows, loud colour ---- */
[data-skin='brutal'] { --radius: 6px; --radius-sm: 6px; --ink: #0a0a0a; }
[data-theme='light'][data-skin='brutal'] { --bg: #fff8e7; --bg-2: #fff; --surface: #fff; --surface-2: #ffeec2; --line: #0a0a0a; --text: #0a0a0a; --muted: #3f3f3f; --shadow: 5px 5px 0 #0a0a0a; }
:root:not([data-theme='light'])[data-skin='brutal'] { --ink: #f5f5f5; --bg: #161616; --bg-2: #1e1e1e; --surface: #222; --surface-2: #2c2c2c; --line: #f5f5f5; --muted: #cfcfcf; --shadow: 5px 5px 0 var(--accent); }
[data-skin='brutal'] .topbar { background: var(--bg); backdrop-filter: none; border-bottom: 3px solid var(--ink); }
[data-skin='brutal'] .logo-mark { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); border-radius: 4px; }
[data-skin='brutal'] .logo-word { font-weight: 900; text-transform: uppercase; }
[data-skin='brutal'] .thumb, [data-skin='brutal'] .hero-main, [data-skin='brutal'] .cat-card, [data-skin='brutal'] .gal-card, [data-skin='brutal'] .player { border: 3px solid var(--ink); box-shadow: var(--shadow); }
[data-skin='brutal'] .thumb::after { box-shadow: none; }
[data-skin='brutal'] .thumb { transition: transform .15s, box-shadow .15s; }
[data-skin='brutal'] .card:hover .thumb { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
[data-skin='brutal'] .card:hover .thumb img { transform: none; }
[data-skin='brutal'] .chip, [data-skin='brutal'] .search input, [data-skin='brutal'] .tabs, [data-skin='brutal'] .pager a { border: 2px solid var(--ink); border-radius: 6px; }
[data-skin='brutal'] .chip:hover { box-shadow: 3px 3px 0 var(--ink); color: var(--text); }
[data-skin='brutal'] .btn-accent, [data-skin='brutal'] .btn-cta, [data-skin='brutal'] .tab.active, [data-skin='brutal'] .search button { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); border-radius: 6px; color: #0a0a0a; }
[data-skin='brutal'] .section-head h2 { text-transform: uppercase; font-weight: 900; }
[data-skin='brutal'] .section-head h2::before { width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 2px; }
[data-skin='brutal'] .badge-hd, [data-skin='brutal'] .pill { border: 2px solid var(--ink); color: #0a0a0a; }
[data-skin='brutal'] .badge-time { background: var(--ink); color: var(--bg); }

/* ============================================================
   LAYOUT OPTIONS (Theme Studio) — after the skins so explicit choices win
   ============================================================ */

/* Corners */
[data-radius='sharp'] { --radius: 2px; --radius-sm: 2px; }
[data-radius='sharp'] .chip, [data-radius='sharp'] .search input, [data-radius='sharp'] .tabs, [data-radius='sharp'] .tab, [data-radius='sharp'] .mainnav a, [data-radius='sharp'] .pager a { border-radius: 3px; }
[data-radius='soft'] { --radius: 12px; --radius-sm: 9px; }
[data-radius='round'] { --radius: 24px; --radius-sm: 16px; }

/* Card hover */
[data-hover='lift'] .card { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
[data-hover='lift'] .card:hover { transform: translateY(-5px); }
[data-hover='lift'] .card:hover .thumb img { transform: none; }
[data-hover='glow'] .card:hover .thumb { box-shadow: 0 0 0 2px var(--accent), 0 0 34px -6px var(--accent-glow); }
[data-hover='glow'] .card:hover .thumb img { transform: scale(1.02); }
[data-hover='none'] .card:hover .thumb img { transform: none; filter: none; }
[data-hover='none'] .card:hover .thumb { box-shadow: none; }
[data-hover='none'] .card:hover .thumb-progress { width: 0; }

/* ---- Galleries follow the skin + card options, same as video thumbs ---- */
.gal-card { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.gal-card:hover { box-shadow: 0 14px 30px -14px var(--accent-glow); }
.photo-grid .photo, .photo-single img { border-radius: var(--radius-sm); background: var(--surface-2); }
[data-hover='lift'] .gal-card:hover { transform: translateY(-5px); }
[data-hover='lift'] .gal-card:hover img { transform: none; }
[data-hover='glow'] .gal-card:hover { box-shadow: 0 0 0 2px var(--accent), 0 0 34px -6px var(--accent-glow); }
[data-hover='glow'] .gal-card:hover img { transform: scale(1.02); }
[data-hover='none'] .gal-card:hover { box-shadow: none; }
[data-hover='none'] .gal-card:hover img, [data-hover='none'] .photo-grid .photo:hover img { transform: none; filter: none; }
[data-galtitle='below'] .gal-card:hover, [data-galtitle='above'] .gal-card:hover { box-shadow: none; }
[data-galtitle='below'] .gal-card:hover img, [data-galtitle='above'] .gal-card:hover img { box-shadow: 0 14px 30px -14px var(--accent-glow); }
[data-galtitle='below'] .gal-title, [data-galtitle='above'] .gal-title { font-family: var(--font-head); }

[data-skin='premium'] .gal-card:hover, [data-skin='premium'] .photo-grid .photo:hover { box-shadow: 0 16px 34px -16px rgba(227,194,126,.4); }
[data-skin='premium'] .gal-count { background: linear-gradient(135deg, var(--gold), #a9822f); color: #241a06; }
[data-skin='premium'] .photo-grid .photo { border: 1px solid var(--line); }
[data-skin='velvet'] .photo-grid .photo { box-shadow: 0 12px 30px -18px rgba(236,72,153,.5); }
[data-skin='velvet'] .gal-count { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
[data-skin='noir'] .gal-card:hover, [data-skin='noir'] .photo-grid .photo:hover { box-shadow: 0 0 0 2px var(--text); }
[data-skin='noir'] .gal-count { background: var(--text); color: var(--bg); border-radius: 0; }
[data-skin='noir'] .gal-title { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
[data-skin='neon'] .gal-card:hover, [data-skin='neon'] .photo-grid .photo:hover { box-shadow: 0 0 0 1px var(--accent), 0 0 26px -6px var(--accent-glow); }
[data-skin='neon'] .gal-card, [data-skin='neon'] .photo-grid .photo { outline: 1px solid var(--accent-soft); outline-offset: -1px; }
[data-skin='cinema'] .gal-card:hover { transform: scale(1.04); z-index: 5; }
[data-skin='cinema'] .gal-card:hover img { transform: none; }
[data-skin='cinema'] .gal-title { text-transform: uppercase; letter-spacing: .03em; }
[data-skin='cinema'] .gal-count { border-radius: 3px; background: var(--accent); }
[data-skin='studio'] .gal-card, [data-skin='studio'] .photo-grid .photo { box-shadow: var(--shadow); border: 1px solid var(--line); }
[data-skin='studio'] .gal-card:hover { transform: translateY(-3px); }
[data-skin='studio'] .gal-card:hover img { transform: none; }
[data-skin='aurora'] .gal-card, [data-skin='aurora'] .photo-grid .photo { border: 1px solid var(--line); }
[data-skin='aurora'] .gal-count { background: linear-gradient(135deg, var(--accent), #22d3ee); }
[data-skin='aurora'] .gal-card:hover { box-shadow: 0 0 0 1px var(--accent), 0 18px 40px -16px var(--accent-glow); }
[data-skin='retro'] .gal-card, [data-skin='retro'] .photo-grid .photo { border: 1px solid var(--line); }
[data-skin='retro'] .gal-card:hover, [data-skin='retro'] .photo-grid .photo:hover { box-shadow: 0 0 0 2px var(--accent), 6px 6px 0 #22d3ee; }
[data-skin='retro'] .gal-title { text-transform: uppercase; font-style: italic; }
[data-skin='retro'] .gal-count { background: #22d3ee; color: #120524; border-radius: 3px; }
[data-skin='magazine'] .gal-card:hover { box-shadow: none; }
[data-skin='magazine'] .gal-card:hover img { transform: none; filter: brightness(1.04); }
[data-skin='magazine'] .gal-title { font-family: 'Playfair Display', Georgia, serif; }
[data-skin='magazine'] .gal-count { border-radius: 0; background: var(--bg); color: var(--text); }
[data-skin='magazine'] .gal-head { border-bottom: 3px double var(--line); padding-bottom: 12px; }
[data-skin='magazine'] .gal-head h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 900; }
[data-skin='brutal'] .photo-grid .photo { border: 3px solid var(--ink); box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
[data-skin='brutal'] .gal-card:hover, [data-skin='brutal'] .photo-grid .photo:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
[data-skin='brutal'] .gal-card:hover img, [data-skin='brutal'] .photo-grid .photo:hover img { transform: none; }
[data-skin='brutal'] .gal-count { border: 2px solid var(--ink); background: var(--accent); color: #0a0a0a; border-radius: 4px; }
[data-skin='brutal'] .gal-title { text-transform: uppercase; font-weight: 900; }
[data-skin='brutal'] .gal-head h1 { text-transform: uppercase; font-weight: 900; }

/* ---- Gallery page layouts (Theme Studio → Video & gallery) ---- */
.photo-grid { --g: 12px; column-gap: var(--g); counter-reset: photo; }
.photo-grid .photo { margin-bottom: var(--g); position: relative; counter-increment: photo; }
[data-ggap='tight'] .photo-grid { --g: 4px; }
[data-ggap='loose'] .photo-grid { --g: 24px; }
[data-gcols='2'] .photo-grid { columns: 2; }
[data-gcols='3'] .photo-grid { columns: 3; }
[data-gcols='4'] .photo-grid { columns: 4; }
[data-gcols='5'] .photo-grid { columns: 5; }

[data-gview='grid'] .photo-grid, [data-gview='rows'] .photo-grid, [data-gview='feed'] .photo-grid { columns: auto; }
[data-gview='grid'] .photo-grid { display: grid; gap: var(--g); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
[data-gview='grid'][data-gcols='2'] .photo-grid { grid-template-columns: repeat(2, 1fr); }
[data-gview='grid'][data-gcols='3'] .photo-grid { grid-template-columns: repeat(3, 1fr); }
[data-gview='grid'][data-gcols='4'] .photo-grid { grid-template-columns: repeat(4, 1fr); }
[data-gview='grid'][data-gcols='5'] .photo-grid { grid-template-columns: repeat(5, 1fr); }
[data-gview='grid'] .photo-grid .photo { margin: 0; aspect-ratio: 1; }
[data-gview='grid'] .photo-grid .photo img { height: 100%; object-fit: cover; }

[data-gview='rows'] .photo-grid { display: flex; flex-wrap: wrap; gap: var(--g); --row: 240px; }
[data-gview='rows'][data-gcols='2'] .photo-grid { --row: 420px; }
[data-gview='rows'][data-gcols='3'] .photo-grid { --row: 320px; }
[data-gview='rows'][data-gcols='5'] .photo-grid { --row: 190px; }
[data-gview='rows'] .photo-grid::after { content: ''; flex-grow: 999; }
[data-gview='rows'] .photo-grid .photo { margin: 0; height: var(--row); flex: 1 1 auto; min-width: 140px; max-width: 100%; }
[data-gview='rows'] .photo-grid .photo img { height: 100%; width: 100%; object-fit: cover; }

[data-gview='feed'] .photo-grid { display: flex; flex-direction: column; align-items: center; gap: calc(var(--g) * 2); }
[data-gview='feed'] .photo-grid .photo { margin: 0; width: min(100%, 880px); }

[data-gnum='on'] .photo-grid .photo::before { content: counter(photo); position: absolute; top: 8px; left: 8px; z-index: 2; min-width: 24px; padding: 3px 7px; border-radius: 999px; background: rgba(0,0,0,.62); color: #fff; font-size: 11.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); pointer-events: none; }
[data-skin='brutal'][data-gnum='on'] .photo-grid .photo::before { background: var(--accent); color: #0a0a0a; border: 2px solid var(--ink); border-radius: 4px; }

[data-ghead='cover'] .gal-head { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; min-height: 220px; margin: 6px 0 24px; padding: 28px; border-radius: var(--radius); background: var(--surface-2); }
[data-ghead='cover'] .gal-head::before { content: ''; position: absolute; inset: -30px; z-index: -2; background: var(--cover) center / cover; filter: blur(22px) saturate(1.2); transform: scale(1.1); }
[data-ghead='cover'] .gal-head::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,.15) 70%); }
[data-ghead='cover'] .gal-head h1 { color: #fff; font-size: clamp(26px, 3.4vw, 42px); }
[data-ghead='cover'] .gal-head .muted { color: rgba(255,255,255,.8); }
[data-skin='brutal'][data-ghead='cover'] .gal-head { border: 3px solid var(--ink); box-shadow: var(--shadow); }

@media (max-width: 640px) {
  [data-gcols] .photo-grid { columns: 2; }
  [data-gview='grid'][data-gcols] .photo-grid { grid-template-columns: repeat(2, 1fr); }
  [data-gview='rows'][data-gcols] .photo-grid { --row: 150px; }
  [data-gview='feed'] .photo-grid, [data-gview='rows'] .photo-grid, [data-gview='grid'] .photo-grid { columns: auto; }
  [data-ghead='cover'] .gal-head { min-height: 160px; padding: 18px; }
}

/* Category chips row */
[data-chips='off'] .chips-row { display: none; }

@media (min-width: 641px) {
  /* Grid density */
  [data-density='spacious'] .grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 34px 24px; }
  [data-density='cozy'] .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px 14px; }
  [data-density='dense'] .grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px 10px; }
  [data-density='dense'] .card-title { font-size: 13px; }
  [data-density='dense'] .card-meta { font-size: 12px; }
}

@media (min-width: 961px) {
  /* Header: logo on its own line, navigation centred beneath */
  [data-header='centered'] .topbar-inner { flex-wrap: wrap; justify-content: center; height: auto; padding-top: 14px; padding-bottom: 10px; row-gap: 10px; }
  [data-header='centered'] .topbar-inner > .logo { flex-basis: 100%; justify-content: center; font-size: 26px; }
  [data-header='centered'] .search { margin-left: 12px; flex: 0 1 300px; }

  /* Header: transparent over the page, solid once scrolled (site.js toggles .is-scrolled) */
  [data-header='floating'] .topbar { position: fixed; left: 0; right: 0; background: linear-gradient(180deg, rgba(0,0,0,.65), transparent); border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .3s; }
  [data-header='floating'] .topbar:not(.is-scrolled) .logo, [data-header='floating'] .topbar:not(.is-scrolled) .mainnav a { color: #fff; }
  [data-header='floating'] .topbar.is-scrolled { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(16px); border-bottom-color: var(--line); }
  [data-header='floating'] .main { padding-top: 130px; }
  [data-header='floating'][data-hero='billboard'] .main { padding-top: 0; }

  /* Hero: full-width billboard with a row of picks under it */
  [data-hero='billboard'] .hero { grid-template-columns: 1fr; }
  [data-hero='billboard'] .hero-main { aspect-ratio: 21 / 8; }
  [data-hero='billboard'] .hero-text { left: 48px; bottom: 48px; right: 40%; }
  [data-hero='billboard'] .hero-text strong { font-size: clamp(28px, 3.4vw, 52px); }
  [data-hero='billboard'] .hero-side { grid-template-columns: repeat(4, 1fr); }
  [data-header='floating'][data-hero='billboard'] .hero-main { border-radius: 0; margin: 0 calc(50% - 50vw); aspect-ratio: auto; height: min(78vh, 760px); }
  [data-header='floating'][data-hero='billboard'] .hero-text { left: max(48px, calc(50vw - var(--wrap) / 2 + 20px)); }

  /* Hero: mosaic — one large tile and four small ones */
  [data-hero='mosaic'] .hero { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 1fr; }
  [data-hero='mosaic'] .hero-main { grid-row: span 2; aspect-ratio: auto; height: 100%; min-height: 440px; }
  [data-hero='mosaic'] .hero-side { display: contents; }
  [data-hero='mosaic'] .hero-side .card { padding: 0; border: 0; background: none; box-shadow: none; }
  [data-hero='mosaic'] .hero-side .card-body { display: none; }
  [data-hero='mosaic'] .hero-side .thumb { height: 100%; aspect-ratio: auto; border-radius: var(--radius); }
}
[data-hero='none'] .hero { display: none; }
.account-btn { display: inline-grid; place-items: center; color: var(--muted); }
.account-btn:hover { color: var(--text); }

/* Fonts added with Theme Studio */
[data-font='condensed'] { --font-head: 'Oswald', 'Arial Narrow', sans-serif; }
[data-font='condensed'] .page-head h1, [data-font='condensed'] .section-head h2, [data-font='condensed'] .hero-text strong, [data-font='condensed'] .watch-title { text-transform: uppercase; letter-spacing: .01em; }
[data-font='rounded'] { --font-head: 'Nunito', ui-rounded, system-ui, sans-serif; --font-body: 'Nunito', ui-rounded, system-ui, sans-serif; }

/* ============================================================
   PAGE BUILDER: homepage sections, promo banners, watch layouts, mini-player
   ============================================================ */
.home-section[hidden] { display: none; }
.tag-cloud-inline { display: flex; flex-wrap: wrap; gap: 8px; }

/* Promo banner */
.promo { position: relative; display: grid; grid-template-columns: 1fr; align-items: center; min-height: 160px; border-radius: var(--radius); overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 60%), linear-gradient(135deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); }
.promo.has-image { min-height: 220px; }
.promo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.promo.has-image::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.35) 60%, transparent); }
.promo-body { padding: 28px 32px; display: grid; gap: 10px; justify-items: start; max-width: 640px; }
.promo.has-image .promo-body { color: #fff; }
.promo-title { font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.promo-text { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.promo.has-image .promo-text { color: rgba(255,255,255,.85); }
.promo-btn { margin-top: 4px; }

/* Watch page: sidebar on the left */
@media (min-width: 1181px) {
  [data-watch='left'] .watch { grid-template-columns: 380px minmax(0, 1fr); }
  [data-watch='left'] .watch-side { order: -1; }
}

/* Watch page: theater — full-width cinema band, info and related below */
[data-watch='theater'] .watch { grid-template-columns: minmax(0, 1fr); }
[data-watch='theater'] .player-slot { background: #000; box-shadow: 0 0 0 100vmax #000; clip-path: inset(0 -100vmax); padding: 8px 0 18px; margin-bottom: 8px; }
[data-watch='theater'] .player-slot .player, [data-watch='theater'] .player-slot .paywall { max-width: min(100%, calc((100vh - 150px) * 16 / 9)); margin: 0 auto; border-radius: 0; box-shadow: none; }
[data-watch='theater'] .watch-side .side-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
[data-watch='theater'] .watch-side .side-list .card { display: block; }
[data-watch='theater'] .watch-side .side-list .card-body { padding-top: 10px; }
[data-watch='theater'] .crumbs { position: relative; z-index: 1; }
.theater-btn[aria-pressed='true'] { background: var(--accent); color: #fff; border-color: transparent; }

/* Sticky mini-player */
.player-slot { position: relative; }
.mini-close { display: none; }
.player-dock.is-mini { position: fixed; right: 18px; bottom: 18px; z-index: 95; width: min(380px, 62vw); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px -14px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08); animation: mini-pop .25s cubic-bezier(.2,.7,.2,1); }
.player-dock.is-mini .player { border-radius: 0; box-shadow: none; max-width: none; }
.player-dock.is-mini .mini-close { display: grid; place-items: center; position: absolute; top: 6px; right: 6px; z-index: 20; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0,0,0,.75); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.player-dock.is-mini .mini-close:hover { background: var(--accent); }
@keyframes mini-pop { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@media (max-width: 640px) { .player-dock.is-mini { right: 10px; bottom: 10px; } .promo-body { padding: 22px 20px; } }

/* ============================================================
   THEME STUDIO FOR GALLERY SITES — the same density, hover, card and skin choices, applied to gallery cards
   ============================================================ */
.gal-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (min-width: 641px) {
  [data-density='spacious'] .gal-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 30px 24px; }
  [data-density='cozy'] .gal-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
  [data-density='dense'] .gal-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
}
/* Card styles */
[data-cards='poster'] .gal-card, [data-cards='poster'] .gal-card img { aspect-ratio: 2 / 3; }
[data-cards='compact'] .gal-title { font-size: 13px; padding: 18px 10px 8px; }
[data-cards='overlay'] .gal-title { font-size: 16px; padding: 40px 14px 14px; }
/* Hover */
.gal-card { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
[data-hover='lift'] .gal-card:hover { transform: translateY(-5px); }
[data-hover='lift'] .gal-card:hover img { transform: none; }
[data-hover='glow'] .gal-card:hover { box-shadow: 0 0 0 2px var(--accent), 0 0 34px -6px var(--accent-glow); }
[data-hover='glow'] .gal-card:hover img { transform: scale(1.02); }
[data-hover='none'] .gal-card:hover img { transform: none; }
/* Skins */
[data-skin='cinema'] .gal-card:hover { transform: scale(1.03); z-index: 2; }
[data-skin='cinema'] .gal-title { text-transform: uppercase; letter-spacing: .03em; font-family: var(--font-head); }
[data-skin='studio'] .gal-card, [data-skin='aurora'] .gal-card { border: 1px solid var(--line); }
[data-skin='aurora'] .gal-card { box-shadow: 0 18px 40px -22px var(--accent-glow); }
[data-skin='retro'] .gal-card { border: 1px solid var(--line); }
[data-skin='retro'] .gal-card:hover { box-shadow: 0 0 0 2px var(--accent), 6px 6px 0 #22d3ee; }
[data-skin='retro'] .gal-title { text-transform: uppercase; font-style: italic; }
[data-skin='magazine'] .gal-title { font-family: 'Playfair Display', Georgia, serif; font-size: 17px; }
[data-skin='magazine'] .gal-card { box-shadow: none; }
[data-skin='brutal'] .gal-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
[data-skin='brutal'] .gal-count { border: 2px solid var(--ink); background: var(--accent); color: #0a0a0a; }
[data-skin='neon'] .gal-card:hover { box-shadow: 0 0 0 1px var(--accent), 0 0 26px -6px var(--accent-glow); }
[data-skin='premium'] .gal-count { background: linear-gradient(135deg, var(--gold), #a9822f); color: #241a06; }
[data-skin='noir'] .gal-title { text-transform: uppercase; letter-spacing: .1em; font-size: 13px; }
/* Photo pages use the chosen corners too */
.photo-grid .photo img, .photo-single img { border-radius: var(--radius-sm); }

/* Video without any playable source: say so instead of a dead play button */
.player-empty { position: relative; }
.player-empty .player-note { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; font-size: 13px; white-space: nowrap; }

/* ---------- Fast-loading player (thumbnail facade until play) ---------- */
.player-facade { cursor: pointer; isolation: isolate; }
.player-facade:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.facade-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .3s; }
.player-facade:hover .facade-img { transform: scale(1.02); filter: brightness(.9); }
.facade-shade { position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(0,0,0,.15), rgba(0,0,0,.55)); pointer-events: none; }
.facade-play { position: absolute; top: 50%; left: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; display: grid; place-items: center; color: #fff; padding-left: 5px;
  background: color-mix(in srgb, var(--accent) 88%, transparent); box-shadow: 0 0 0 12px var(--accent-soft), 0 24px 50px -12px var(--accent-glow); transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s; }
.player-facade:hover .facade-play { transform: scale(1.08); box-shadow: 0 0 0 16px var(--accent-soft), 0 28px 60px -12px var(--accent-glow); }
.facade-time { position: absolute; right: 12px; bottom: 12px; padding: 4px 9px; border-radius: 7px; background: rgba(0,0,0,.75); color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.player.is-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: facade-spin .8s linear infinite; pointer-events: none; }
@keyframes facade-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .facade-play { width: 66px; height: 66px; margin: -33px 0 0 -33px; } }

/* ---------- Ads, theme toggle, cookie bar, adblock ---------- */
.sp-slot { margin: 18px auto; text-align: center; max-width: 100%; overflow: hidden; }
.sp-slot img { display: inline-block; height: auto; }
.sp-below_header, .sp-footer { padding: 6px 20px; }
.sp-under_player { margin: 14px 0; }
.watch-side .sp-slot { margin-top: 0; margin-bottom: 18px; }
.ad-bait { height: 8px; width: 300px; position: absolute; left: -9999px; top: -9999px; pointer-events: none; }
.badge-prem { left: 8px; top: 8px; background: linear-gradient(135deg, #f5c451, #d99a1c); color: #3a2607; font-weight: 800; }
.paywall { aspect-ratio: 16 / 9; border-radius: var(--radius); background: linear-gradient(135deg, var(--surface-2), var(--surface)); display: grid; place-items: center; text-align: center; border: 1px solid var(--line); }
.paywall-inner { display: grid; gap: 12px; justify-items: center; padding: 30px; max-width: 460px; }
.paywall-lock { font-size: 44px; }
.paywall-inner h2 { font-size: 24px; }
.paywall-inner p { color: var(--muted); margin: 0; }
.paywall-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.player-wrap { position: relative; }
.preroll-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: #000; border-radius: var(--radius); overflow: hidden; }
.preroll-overlay .sp-slot { margin: 0; max-height: 100%; }
.preroll-skip { position: absolute; right: 12px; bottom: 12px; z-index: 6; padding: 8px 14px; border: 0; border-radius: 8px; background: rgba(0,0,0,.8); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.preroll-skip:disabled { cursor: default; opacity: .8; }
.preroll-skip:not(:disabled):hover { background: var(--accent); }
.player-wrap.preroll-done .preroll-overlay { display: none; }
.tag-hub { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.tag-hub .chip { line-height: 1.4; }
.theme-btn { display: inline-grid; place-items: center; color: var(--muted); }
.theme-btn:hover { color: var(--text); }
.theme-btn .ic-moon { display: none; }
:root:not([data-theme='light']) .theme-btn .ic-sun,
[data-theme='dark'] .theme-btn .ic-sun { display: none; }
:root:not([data-theme='light']) .theme-btn .ic-moon,
[data-theme='dark'] .theme-btn .ic-moon { display: block; }
[data-theme='light'] .theme-btn .ic-sun { display: block; }
[data-theme='light'] .theme-btn .ic-moon { display: none; }

.cookiebar { position: fixed; bottom: 18px; z-index: 130; max-width: 560px; display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 14px; background: var(--cbg, #111118); color: #fff; box-shadow: 0 20px 50px -18px rgba(0,0,0,.7); font-size: 13.5px; line-height: 1.5; }
.cookiebar-left { left: 18px; }
.cookiebar-right { right: 18px; }
.cookiebar-center { left: 50%; transform: translateX(-50%); }
.cookiebar-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.cookiebar-actions a { color: #fff; opacity: .7; text-decoration: underline; font-size: 12px; }
.cookiebar .btn-accent { background: var(--cacc, var(--accent)); height: 34px; padding: 0 16px; }
.adblock-modal { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 20px; background: rgba(4,4,10,.85); backdrop-filter: blur(16px); }
.adblock-card { max-width: 440px; text-align: center; padding: 34px 30px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 12px; justify-items: center; }
.adblock-card h2 { font-size: 22px; }
.adblock-card p { color: var(--muted); margin: 0 0 6px; }
@media (max-width: 640px) { .cookiebar { left: 12px; right: 12px; bottom: 12px; max-width: none; transform: none; flex-wrap: wrap; } }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 600; transition: all .25s; z-index: 120; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .watch { grid-template-columns: 1fr; }
  .side-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .side-list .card { display: block; }
  .side-list .card-body { padding-top: 10px; }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .mainnav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; padding: 10px 16px 16px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
  .mainnav.open { display: flex; }
  .icon-btn { display: inline-grid; }
  .search { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 14px; }
  .topbar-inner { gap: 10px; }
  .logo { font-size: 17px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .card-title { font-size: 13px; }
  .card-meta { font-size: 12px; }
  .hero-side { grid-template-columns: 1fr 1fr; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .page-head h1 { font-size: 24px; }
  .watch-title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Scraper trap link: off-screen for people, skipped by crawlers via robots.txt */
.hp-link { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Free-account paywall (membership access: registered) ---------- */
.paywall-free { background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), linear-gradient(135deg, var(--surface-2), var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.paywall-free h2 { font-size: clamp(20px, 2.6vw, 28px); }
.paywall-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.paywall-perks li::before { content: '✓'; color: var(--accent); font-weight: 800; margin-right: 6px; }
.paywall-free .paywall-actions .btn-accent { padding-inline: 22px; box-shadow: 0 10px 26px -10px var(--accent-glow); }
@media (max-width: 640px) { .paywall { aspect-ratio: auto; min-height: 260px; } .paywall-perks { flex-direction: column; align-items: center; } }

/* ---------- Refine bar (videos listing: category / niche / keyword pickers) ---------- */
.refine { display: grid; gap: 10px; margin: -4px 0 18px; }
.refine-pickers { display: flex; flex-wrap: wrap; gap: 8px; }
.fpick { position: relative; }
.fpick > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer; user-select: none; transition: border-color .15s, color .15s, background .15s; }
.fpick > summary::-webkit-details-marker { display: none; }
.fpick > summary:hover, .fpick[open] > summary { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.fpick-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--accent); }
.fpick > summary b { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 700; }
.fpick.is-set > summary { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--text); }
.fpick.is-set .fpick-label { color: var(--muted); font-weight: 500; }
.fpick-caret { transition: transform .15s; opacity: .7; }
.fpick[open] .fpick-caret { transform: rotate(180deg); }
.fpick-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: min(320px, calc(100vw - 32px)); padding: 8px; border-radius: 14px; background: var(--bg-2, var(--surface)); border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgb(0 0 0 / .55); animation: fpick-in .14s ease-out; }
@keyframes fpick-in { from { opacity: 0; transform: translateY(-4px); } }
.fpick-q { width: 100%; height: 36px; margin-bottom: 6px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; outline: none; }
.fpick-q:focus { border-color: var(--accent); }
.fpick-list { display: grid; gap: 1px; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.fpick-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--text); }
.fpick-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fpick-opt small { flex: none; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fpick-opt:hover { background: var(--surface-2); }
.fpick-opt.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 700; }
.fpick-opt:first-child { color: var(--muted); }
.fpick-opt:first-child.on { color: var(--accent); }
.fpick-opt[hidden] { display: none; }
.fpick-empty { padding: 12px; text-align: center; font-size: 13px; color: var(--muted); }
.refine-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.refine-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 12px; border-radius: 999px; font-size: 12.5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }
.refine-chip b { color: var(--text); }
.refine-chip span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); font-size: 14px; line-height: 1; }
.refine-chip:hover span { background: var(--accent); color: #fff; }
.refine-clear { font-size: 12.5px; font-weight: 600; color: var(--accent); margin-left: 4px; }
[data-skin='brutal'] .fpick > summary, [data-skin='brutal'] .fpick-pop { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
[data-skin='noir'] .fpick > summary, [data-skin='magazine'] .fpick > summary { border-radius: 2px; }
@media (max-width: 640px) {
  .refine-pickers { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .fpick { position: static; }
  .fpick-pop { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; }
  .fpick-list { max-height: 50vh; }
}
.badge-members { background: linear-gradient(135deg, #34d399, #0ea5e9); color: #04232b; }

/* ---------- Member sign-in / sign-up (premium) ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); min-height: min(760px, calc(100vh - 140px)); margin: 6px 0 28px; border-radius: calc(var(--radius) + 10px); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 40px 100px -50px rgb(0 0 0 / .7); }
.auth-art { position: relative; isolation: isolate; overflow: hidden; display: flex; background: #07070b; color: #fff; }
.auth-mosaic { position: absolute; inset: -6%; z-index: -2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; transform: rotate(-8deg) scale(1.15); }
.auth-mosaic span { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 10; background: #15151d; animation: auth-float 16s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.3s); }
.auth-mosaic span:nth-child(3n + 2) { transform: translateY(-30%); }
.auth-mosaic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1); }
@keyframes auth-float { to { translate: 0 -18px; } }
.auth-art-shade { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(120% 80% at 0% 100%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 55%),
  linear-gradient(180deg, rgb(7 7 11 / .55), rgb(7 7 11 / .82) 55%, rgb(7 7 11 / .96)); }
.auth-art-body { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: clamp(24px, 4vw, 44px); width: 100%; }
.auth-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.auth-brand img { height: 34px; width: auto; }
.auth-brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent); box-shadow: 0 10px 30px -8px var(--accent-glow); }
.auth-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 55%, #fff); }
.auth-kicker::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); }
.auth-title { margin: 12px 0 0; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05; font-weight: 900; letter-spacing: -.03em; font-family: var(--font-head); }
.auth-title em { font-style: normal; background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--accent) 70%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.auth-perks li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgb(255 255 255 / .88); }
.auth-perks li span { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .12); color: color-mix(in srgb, var(--accent) 60%, #fff); backdrop-filter: blur(8px); }
.auth-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.auth-stats div { display: grid; padding: 10px 16px; border-radius: 14px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); backdrop-filter: blur(10px); min-width: 92px; }
.auth-stats strong { font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.auth-stats small { font-size: 11.5px; color: rgb(255 255 255 / .6); text-transform: uppercase; letter-spacing: .08em; }

.auth-panel { display: grid; place-items: center; padding: clamp(20px, 4vw, 48px); background: radial-gradient(90% 60% at 100% 0%, var(--accent-soft), transparent 60%), var(--surface); }
.auth-card { width: 100%; max-width: 420px; display: grid; gap: 18px; }
.auth-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: var(--bg-2, var(--bg)); border: 1px solid var(--line); }
.auth-tab { position: relative; z-index: 1; text-align: center; padding: 10px; font-size: 14px; font-weight: 700; color: var(--muted); border-radius: 10px; transition: color .2s; }
.auth-tab[aria-selected="true"] { color: var(--text); }
.auth-tab-ink { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px; background: var(--surface-2); box-shadow: 0 6px 18px -10px rgb(0 0 0 / .5), inset 0 0 0 1px var(--line); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.auth[data-mode="register"] .auth-tab-ink { transform: translateX(100%); }
.auth-alert { padding: 11px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; animation: auth-shake .4s; }
.auth-alert-err { background: rgb(239 68 68 / .12); color: #f87171; border: 1px solid rgb(239 68 68 / .3); }
.auth-alert-ok { background: rgb(34 197 94 / .12); color: #4ade80; border: 1px solid rgb(34 197 94 / .3); }
@keyframes auth-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.auth-form { display: grid; gap: 14px; animation: auth-in .35s ease-out; }
@keyframes auth-in { from { opacity: 0; transform: translateY(8px); } }
.auth[data-js] .auth-form { display: none; }
.auth[data-js][data-mode="login"] [data-auth-form="login"], .auth[data-js][data-mode="register"] [data-auth-form="register"] { display: grid; }
.auth:not([data-js]) .auth-form + .auth-form { border-top: 1px solid var(--line); padding-top: 18px; }
.auth-head h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.auth-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.auth-field { display: grid; gap: 7px; }
.auth-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; color: var(--muted); }
.auth-label small { font-weight: 700; font-size: 11.5px; }
.auth-input { position: relative; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 12px 0 14px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--bg-2, var(--bg)); color: var(--muted); transition: border-color .15s, box-shadow .15s, background .15s; }
.auth-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); color: var(--accent); background: var(--surface); }
.auth-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 15px; }
.auth-input input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.auth-eye { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; }
.auth-eye:hover, .auth-eye[aria-pressed="true"] { color: var(--text); background: var(--surface-2); }
.auth-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.auth-meter i { height: 4px; border-radius: 4px; background: var(--line); transition: background .25s; }
.auth-meter[data-score="1"] i:nth-child(-n+1) { background: #ef4444; }
.auth-meter[data-score="2"] i:nth-child(-n+2) { background: #f59e0b; }
.auth-meter[data-score="3"] i:nth-child(-n+3) { background: #84cc16; }
.auth-meter[data-score="4"] i { background: #22c55e; }
.auth-check { position: relative; display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--muted); line-height: 1.5; cursor: pointer; }
.auth-check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; }
.auth-box { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--bg-2, var(--bg)); color: transparent; transition: all .15s; }
.auth-check input:checked + .auth-box { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 14px -6px var(--accent-glow); }
.auth-check input:focus-visible + .auth-box { box-shadow: 0 0 0 4px var(--accent-soft); }
.auth-check a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.auth-submit { position: relative; overflow: hidden; height: 52px; border: 0; border-radius: 13px; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #7c3aed)); color: #fff; font: inherit; font-size: 15.5px; font-weight: 800; letter-spacing: .01em; cursor: pointer; box-shadow: 0 16px 36px -14px var(--accent-glow); transition: transform .15s, filter .15s, box-shadow .15s; }
.auth-submit::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .28) 50%, transparent 70%); transform: translateX(-100%); transition: transform .7s; }
.auth-submit:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 20px 40px -14px var(--accent-glow); }
.auth-submit:hover::after { transform: translateX(100%); }
.auth-submit:active { transform: translateY(0) scale(.99); }
.auth-submit[data-busy] span { opacity: 0; }
.auth-submit[data-busy]::before { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2.5px solid rgb(255 255 255 / .35); border-top-color: #fff; animation: auth-spin .7s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-switch { margin: 0; text-align: center; font-size: 13.5px; color: var(--muted); }
.auth-switch a { color: var(--accent); font-weight: 700; }
.auth-plans { display: grid; gap: 8px; }
.auth-plan { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg-2, var(--bg)); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.auth-plan input { accent-color: var(--accent); width: 18px; height: 18px; }
.auth-plan:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--surface); }
.auth-plan-body { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; flex: 1; }
.auth-plan-body strong { font-size: 15px; }
.auth-plan-body em { font-style: normal; font-weight: 900; font-size: 16px; grid-row: span 2; align-self: center; }
.auth-plan-body small { color: var(--muted); font-size: 12px; }
.auth-plan-tag { position: absolute; top: -9px; right: 14px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: var(--accent); color: #fff; }
.auth-trust { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; color: var(--muted); text-align: center; }
.auth-trust svg { color: #22c55e; flex: none; }
[data-skin='brutal'] .auth, [data-skin='brutal'] .auth-input, [data-skin='brutal'] .auth-plan { border: 2px solid var(--ink); }
[data-skin='brutal'] .auth-submit { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); color: #0a0a0a; }
[data-skin='noir'] .auth, [data-skin='magazine'] .auth { border-radius: 4px; }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; min-height: 0; border-radius: var(--radius); }
  .auth-art-body { gap: 18px; padding: 22px; }
  .auth-perks, .auth-stats { display: none; }
  .auth-title { font-size: 28px; }
  .auth-panel { padding: 22px 16px 26px; }
}
@media (prefers-reduced-motion: reduce) { .auth-mosaic span { animation: none; } }
.auth-err { font-size: 12px; font-weight: 600; color: #f87171; }
.auth-check .auth-err { flex-basis: 100%; }
.auth-check { flex-wrap: wrap; } .auth-check > span:last-of-type { flex: 1; }
.auth[data-mode='login'] .auth-t-register, .auth[data-mode='register'] .auth-t-login { display: none; }
.auth-title > span { display: block; animation: auth-in .35s ease-out; }

/* ---------- Minimal member sign-in / sign-up ---------- */
.auth.auth-min { display: grid; place-items: center; grid-template-columns: 1fr; min-height: min(640px, calc(100vh - 180px)); margin: 24px 0 40px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.auth-min .auth-panel { display: block; width: 100%; max-width: 380px; padding: 0; background: none; }
.auth-min .auth-card { max-width: none; gap: 16px; padding: 28px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 24px 60px -40px rgb(0 0 0 / .6); }
.auth-min-brand { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 2px; font-weight: 800; font-size: 18px; letter-spacing: -.01em; color: var(--text); }
.auth-min-brand img { height: 32px; width: auto; }
.auth-min-brand .auth-brand-mark { width: 28px; height: 28px; border-radius: 8px; color: #fff; }
.auth-min .auth-brand-mark svg { width: 14px; height: 14px; }
.auth-min .auth-tabs { border-radius: 11px; }
.auth-min .auth-tab { padding: 8px; font-size: 13.5px; }
.auth-min .auth-head { display: none; }
.auth-min .auth-form { gap: 12px; }
.auth-min .auth-label { font-size: 12.5px; }
.auth-min .auth-input { height: 44px; border-radius: 10px; border-width: 1px; }
.auth-min .auth-input svg { display: none; }
.auth-min .auth-input input { font-size: 14.5px; }
.auth-min .auth-submit { height: 44px; border-radius: 10px; font-size: 14.5px; font-weight: 700; background: var(--accent); box-shadow: none; }
.auth-min .auth-submit::after { display: none; }
.auth-min .auth-submit:hover { transform: none; box-shadow: none; filter: brightness(1.08); }
.auth-min .auth-meter { gap: 4px; }
.auth-min .auth-meter i { height: 3px; }
.auth-min .auth-check { font-size: 12.5px; }
.auth-min .auth-plan { padding: 11px 13px; border-radius: 11px; border-width: 1px; }
.auth-min .auth-switch { font-size: 13px; }
.auth-min .auth-alert { animation: none; border-radius: 10px; font-size: 13px; }
@media (max-width: 640px) { .auth.auth-min { margin: 8px 0 24px; min-height: 0; } .auth-min .auth-card { padding: 22px 18px; } }

/* =====================================================================
   Pro layout options (Settings → Layout & features)
   ===================================================================== */

/* Page width */
[data-width='wide'] { --wrap: 1920px; }
[data-width='full'] { --wrap: 100%; }
[data-width='full'] .wrap { padding: 0 clamp(16px, 2.2vw, 40px); }

/* Fixed grid columns on desktop */
@media (min-width: 1100px) {
  [data-cols='3'] .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-cols='4'] .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-cols='5'] .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  [data-cols='6'] .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  [data-cols='5'] .grid, [data-cols='6'] .grid { gap: 20px 12px; }
  [data-cols='6'] .card-title { font-size: 13.5px; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  [data-cols]:not([data-cols='auto']) .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Thumbnail shape */
[data-ratio='4-3'] .card .thumb { aspect-ratio: 4 / 3; }
[data-ratio='1-1'] .card .thumb { aspect-ratio: 1 / 1; }
[data-ratio='3-4'] .card .thumb { aspect-ratio: 3 / 4; }

/* Card details */
[data-mv='off'] .cm-views, [data-mr='off'] .cm-rating, [data-md='off'] .cm-date { display: none; }
[data-mv='off'][data-mr='off'][data-md='off'] .card-meta { display: none; }

/* NEW badge */
.badge-new { right: 8px; top: 8px; background: #22c55e; color: #04230f; font-size: 10.5px; letter-spacing: .06em; font-weight: 800; }
.card .badge-prem + .badge-new, .card .badge-hd ~ .badge-new { right: 8px; }

/* Sticky header off */
[data-sticky='off'] .topbar { position: relative; }

/* Navigation styles */
[data-navstyle='underline'] .mainnav a { border-radius: 0; background: none !important; position: relative; padding-left: 4px; padding-right: 4px; margin: 0 6px; }
[data-navstyle='underline'] .mainnav a::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform .2s; }
[data-navstyle='underline'] .mainnav a:hover::after, [data-navstyle='underline'] .mainnav a.active::after { transform: scaleX(1); }
[data-navstyle='underline'] .mainnav a.active { color: var(--text); }
[data-navstyle='caps'] .mainnav a { text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 700; border-radius: 6px; }
[data-navstyle='caps'] .mainnav a.active { background: var(--accent); color: #fff; }

/* Announcement bar */
.announce { --an-bg: var(--accent); background: var(--an-bg); color: #fff; font-size: 13.5px; font-weight: 600; }
.announce-inner { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 38px; position: relative; text-align: center; }
.announce a, .announce span { color: inherit; padding: 8px 32px; }
.announce a b { display: inline-block; transition: transform .15s; }
.announce a:hover b { transform: translateX(3px); }
.announce-x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(0,0,0,.18); color: inherit; font-size: 17px; line-height: 1; cursor: pointer; }
.announce-x:hover { background: rgba(0,0,0,.3); }
.announce.is-hidden { display: none; }

/* Category sidebar (big-tube layout) */
.rail-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.rail-layout > .main { min-width: 0; }
.rail { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; padding: 24px 0 40px; scrollbar-width: thin; }
[data-sticky='off'] .rail { top: 16px; }
.rail-block { display: grid; gap: 1px; }
.rail-block a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 9px; font-size: 14px; color: var(--muted); transition: background .15s, color .15s; }
.rail-block a:hover { background: var(--surface); color: var(--text); }
.rail-block a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.rail-block a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-block small { font-size: 11.5px; color: var(--muted); opacity: .7; font-variant-numeric: tabular-nums; }
.rail-title { margin: 18px 12px 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.rail-all { display: block; margin: 8px 12px 0; font-size: 13px; font-weight: 600; color: var(--accent); }
[data-rail='on'] .chips-row { display: none; }
@media (max-width: 1000px) {
  .rail-layout { grid-template-columns: 1fr; gap: 0; }
  .rail { display: none; }
  [data-rail='on'] .chips-row { display: block; }
}

/* Footer columns + RTA badge */
.footer-cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; margin-bottom: 26px; }
.footer-cols .fc-brand p { margin: 10px 0 14px; max-width: 360px; }
.fc-col { display: grid; align-content: start; gap: 9px; }
.fc-col strong { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--text); margin-bottom: 4px; }
.fc-col a { color: var(--muted); font-size: 14px; }
.fc-col a:hover { color: var(--accent); }
.rta-badge { display: inline-block; margin-top: 12px; line-height: 0; opacity: .92; transition: opacity .15s; }
.rta-badge:hover { opacity: 1; }
.rta-badge svg { display: block; border-radius: 3px; }
@media (max-width: 800px) { .footer-cols { grid-template-columns: 1fr 1fr; } .fc-brand { grid-column: 1 / -1; } }

/* Load more / infinite scroll */
.load-more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 34px 0 8px; }
.load-more-btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 28px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 700; font-size: 14px; cursor: pointer; transition: border-color .15s, transform .15s; }
.load-more-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.load-more-btn.is-busy { pointer-events: none; opacity: .7; }
.load-more-btn.is-busy::after { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: lm-spin .7s linear infinite; }
.load-more small { color: var(--muted); font-size: 12.5px; }
@keyframes lm-spin { to { transform: rotate(360deg); } }

/* Gallery list header with sort tabs */
.gal-list-head { justify-content: space-between; align-items: center; }
.gal-list-head > div { display: grid; gap: 4px; }
.gal-list-head p { margin: 0; }

/* =====================================================================
   New skins
   ===================================================================== */

/* HUB — pitch black, bold orange, dense big-tube energy */
[data-skin='hub'] { --radius: 6px; --radius-sm: 4px; }
:root:not([data-theme='light'])[data-skin='hub'] { --bg: #000; --bg-2: #0d0d0d; --surface: #161616; --surface-2: #222; --line: rgba(255,255,255,.09); --text: #fff; --muted: #a3a3a3; }
[data-theme='light'][data-skin='hub'] { --bg: #f2f2f2; --bg-2: #fff; --surface: #fff; --surface-2: #e5e5e5; --line: rgba(0,0,0,.1); --text: #111; --muted: #555; }
[data-skin='hub'] .topbar { background: var(--bg-2); backdrop-filter: none; border-bottom: 1px solid var(--line); }
[data-skin='hub'] .logo-word { font-weight: 900; letter-spacing: -.03em; }
[data-skin='hub'] .logo-mark { border-radius: 5px; box-shadow: none; background: var(--accent); }
[data-skin='hub'] .mainnav a { border-radius: 4px; font-weight: 700; font-size: 13.5px; }
[data-skin='hub'] .mainnav a.active { background: var(--accent); color: #000; }
[data-skin='hub'] .search input { border-radius: 4px; }
[data-skin='hub'] .chip { border-radius: 3px; font-weight: 600; background: var(--surface); border-color: transparent; }
[data-skin='hub'] .chip:hover { background: var(--accent); color: #000; }
[data-skin='hub'] .section-head h2 { font-size: 20px; font-weight: 900; letter-spacing: -.01em; }
[data-skin='hub'] .section-head h2::before { width: 6px; height: 22px; border-radius: 1px; }
[data-skin='hub'] .badge-hd { background: var(--accent); color: #000; border-radius: 3px; }
[data-skin='hub'] .badge-time { border-radius: 3px; background: rgba(0,0,0,.85); }
[data-skin='hub'] .card:hover .thumb { box-shadow: 0 0 0 2px var(--accent); }
[data-skin='hub'] .card:hover .card-title a { color: var(--accent); }
[data-skin='hub'] .btn-accent, [data-skin='hub'] .btn-cta { border-radius: 4px; color: #000; }
[data-skin='hub'] .tabs .tab.active, [data-skin='hub'] .pager-num.current { background: var(--accent); color: #000; }
[data-skin='hub'] .rail-block a.active { background: var(--accent); color: #000; }

/* CLEAN — bright, flat, generous; familiar video-platform feel */
[data-skin='clean'] { --radius: 14px; --radius-sm: 12px; }
[data-theme='light'][data-skin='clean'], :root[data-skin='clean']:not([data-theme]) { --bg: #fff; --bg-2: #fff; --surface: #f2f2f2; --surface-2: #e8e8e8; --line: rgba(0,0,0,.08); --text: #0f0f0f; --muted: #606060; --shadow: none; }
:root:not([data-theme='light'])[data-skin='clean'] { --bg: #0f0f0f; --bg-2: #0f0f0f; --surface: #272727; --surface-2: #3a3a3a; --line: rgba(255,255,255,.1); --text: #f1f1f1; --muted: #aaa; --shadow: none; }
[data-skin='clean'] .topbar { background: var(--bg); backdrop-filter: none; border-bottom-color: transparent; }
[data-skin='clean'] .search input { border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
[data-skin='clean'] .chips-row { border-top: 0; }
[data-skin='clean'] .chip { background: var(--surface); border: 0; border-radius: 8px; font-weight: 500; }
[data-skin='clean'] .chip:hover { background: var(--surface-2); }
[data-skin='clean'] .mainnav a.active { background: var(--text); color: var(--bg); }
[data-skin='clean'] .section-head h2 { font-size: 20px; font-weight: 700; }
[data-skin='clean'] .section-head h2::before { display: none; }
[data-skin='clean'] .thumb::after { box-shadow: none; }
[data-skin='clean'] .card:hover .thumb { box-shadow: none; border-radius: 6px; }
[data-skin='clean'] .card:hover .thumb img { transform: none; filter: none; }
[data-skin='clean'] .card-title { font-weight: 600; }
[data-skin='clean'] .badge-time { border-radius: 4px; font-size: 11.5px; }
[data-skin='clean'] .hero-main { box-shadow: none; }

/* OCEAN — deep navy glass with cyan light */
[data-skin='ocean'] { --radius: 16px; --radius-sm: 12px; }
:root:not([data-theme='light'])[data-skin='ocean'] { --bg: #04111f; --bg-2: #071a2e; --surface: #0b243d; --surface-2: #11304f; --line: rgba(125,211,252,.12); --text: #e6f6ff; --muted: #86a8c3; }
[data-theme='light'][data-skin='ocean'] { --bg: #eef7fc; --bg-2: #fff; --surface: #fff; --surface-2: #dcedf7; --line: rgba(2,74,120,.12); --text: #062238; --muted: #4b6b82; }
:root:not([data-theme='light'])[data-skin='ocean'] body { background: radial-gradient(1200px 600px at 80% -10%, rgba(34,211,238,.13), transparent 60%), radial-gradient(900px 500px at 0% 20%, rgba(59,130,246,.12), transparent 60%), var(--bg); background-attachment: fixed; }
[data-skin='ocean'] .topbar { background: color-mix(in srgb, var(--bg) 70%, transparent); }
[data-skin='ocean'] .logo-mark { background: linear-gradient(135deg, var(--accent), #3b82f6); }
[data-skin='ocean'] .mainnav a.active { background: var(--accent-soft); color: var(--accent); }
[data-skin='ocean'] .chip { background: color-mix(in srgb, var(--surface) 70%, transparent); border-color: var(--line); backdrop-filter: blur(8px); }
[data-skin='ocean'] .section-head h2::before { background: linear-gradient(var(--accent), #3b82f6); }
[data-skin='ocean'] .card:hover .thumb { box-shadow: 0 18px 40px -18px var(--accent-glow), 0 0 0 1px var(--accent-soft); }
[data-skin='ocean'] .badge-hd { background: linear-gradient(135deg, var(--accent), #3b82f6); }

/* MONO — editorial grayscale; colour returns on hover */
[data-skin='mono'] { --radius: 2px; --radius-sm: 2px; }
:root:not([data-theme='light'])[data-skin='mono'] { --bg: #0b0b0b; --bg-2: #0b0b0b; --surface: #151515; --surface-2: #1f1f1f; --line: rgba(255,255,255,.12); --text: #f5f5f5; --muted: #8a8a8a; }
[data-theme='light'][data-skin='mono'] { --bg: #fafafa; --bg-2: #fafafa; --surface: #fff; --surface-2: #ececec; --line: rgba(0,0,0,.12); --text: #0a0a0a; --muted: #6b6b6b; }
[data-skin='mono'] .topbar { background: var(--bg); backdrop-filter: none; }
[data-skin='mono'] .logo-word { text-transform: uppercase; letter-spacing: .18em; font-weight: 700; font-size: 17px; }
[data-skin='mono'] .logo-mark { background: var(--text); box-shadow: none; border-radius: 0; }
[data-skin='mono'] .logo-mark::after { border-left-color: var(--bg); }
[data-skin='mono'] .mainnav a { text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; border-radius: 0; }
[data-skin='mono'] .mainnav a.active { background: none; color: var(--text); box-shadow: inset 0 -1px 0 var(--text); }
[data-skin='mono'] .chip { border-radius: 0; background: none; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
[data-skin='mono'] .chip:hover { background: var(--text); color: var(--bg); }
[data-skin='mono'] .section-head { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
[data-skin='mono'] .section-head h2 { text-transform: uppercase; letter-spacing: .14em; font-size: 14px; font-weight: 700; }
[data-skin='mono'] .section-head h2::before { display: none; }
[data-skin='mono'] .thumb img { filter: grayscale(1) contrast(1.05); transition: filter .4s, transform .45s; }
[data-skin='mono'] .card:hover .thumb img { filter: none; transform: scale(1.03); }
[data-skin='mono'] .card:hover .thumb { box-shadow: none; }
[data-skin='mono'] .badge-hd, [data-skin='mono'] .badge-new { background: var(--text); color: var(--bg); border-radius: 0; }
[data-skin='mono'] .badge-time { border-radius: 0; }
[data-skin='mono'] .btn-accent, [data-skin='mono'] .btn-cta { border-radius: 0; background: var(--text); color: var(--bg); box-shadow: none; }
[data-skin='mono'] .gal-card img { filter: grayscale(1); transition: filter .4s; }
[data-skin='mono'] .gal-card:hover img { filter: none; }

/* SUNSET — warm gradients, soft glow, rounded */
[data-skin='sunset'] { --radius: 20px; --radius-sm: 14px; }
:root:not([data-theme='light'])[data-skin='sunset'] { --bg: #140a0f; --bg-2: #1c0f16; --surface: #26141d; --surface-2: #331b27; --line: rgba(255,180,150,.1); --text: #fff3ec; --muted: #c09a91; }
[data-theme='light'][data-skin='sunset'] { --bg: #fff6f0; --bg-2: #fff; --surface: #fff; --surface-2: #ffe8dc; --line: rgba(160,60,30,.12); --text: #2a120b; --muted: #8a5a4c; }
[data-skin='sunset'] body { background: radial-gradient(1000px 520px at 10% -10%, color-mix(in srgb, #fb7185 22%, transparent), transparent 60%), radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, #f59e0b 16%, transparent), transparent 60%), var(--bg); background-attachment: fixed; }
[data-skin='sunset'] .topbar { background: color-mix(in srgb, var(--bg) 65%, transparent); }
[data-skin='sunset'] .logo-mark { background: linear-gradient(135deg, #fb7185, #f59e0b); }
[data-skin='sunset'] .logo-word { background: linear-gradient(90deg, #fb7185, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-skin='sunset'] .mainnav a.active { background: linear-gradient(135deg, #fb7185, #f59e0b); color: #fff; }
[data-skin='sunset'] .chip { border-radius: 999px; }
[data-skin='sunset'] .chip:hover { border-color: #fb7185; color: #fb7185; }
[data-skin='sunset'] .section-head h2::before { background: linear-gradient(#fb7185, #f59e0b); }
[data-skin='sunset'] .badge-hd { background: linear-gradient(135deg, #fb7185, #f59e0b); }
[data-skin='sunset'] .card:hover .thumb { box-shadow: 0 18px 40px -18px rgba(251,113,133,.55); }
[data-skin='sunset'] .btn-accent, [data-skin='sunset'] .btn-cta { background: linear-gradient(135deg, #fb7185, #f59e0b); }

/* =====================================================================
   1.30 — models, channels, follows, instant search, reports, levels, native tiles
   ===================================================================== */

/* ---------- Instant search dropdown ---------- */
.search { position: relative; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 320px; max-height: min(70vh, 560px); overflow-y: auto; padding: 8px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 24px 60px -18px rgba(0,0,0,.55); scrollbar-width: thin; }
.sg-sec + .sg-sec, .sg-term + .sg-sec, .sg-dym + .sg-sec { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.sg-title { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.sg-clear { border: 0; background: none; color: var(--muted); font-size: 11px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.sg-clear:hover { color: var(--accent); }
.sg-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--text); font-size: 14px; }
.sg-opt:hover, .sg-opt.on { background: var(--surface); }
.sg-opt svg { flex: none; color: var(--muted); }
.sg-term span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-row { gap: 12px; }
.sg-thumb { width: 72px; height: 42px; flex: none; object-fit: cover; border-radius: 7px; background: var(--surface-2); }
.sg-av { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.sg-ph { display: grid; place-items: center; font-weight: 700; color: var(--muted); background: var(--surface-2); }
.sg-main { display: grid; min-width: 0; }
.sg-main strong { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-main small { color: var(--muted); font-size: 12px; }
.sg-models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.sg-model { flex-direction: column; gap: 6px; text-align: center; font-size: 12.5px; }
.sg-model img, .sg-model .sg-ph { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.sg-model span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 6px; }
.sg-chip { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; }
.sg-dym { color: var(--muted); }
.sg-dym b { color: var(--accent); }
.sg-all { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; padding-top: 10px; color: var(--accent); font-weight: 600; }
.sg-all span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-all kbd { font: 600 11px/1 inherit; padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line); color: var(--muted); }
@media (max-width: 640px) { .suggest { position: fixed; left: 10px; right: 10px; top: 64px; min-width: 0; } .sg-models { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Follow ---------- */
.follow-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.follow-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.follow-btn small { font-weight: 600; color: var(--muted); }
.follow-btn .follow-on { display: none; }
.follow-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.follow-btn.on svg { fill: currentColor; }
.follow-btn.on small { color: rgba(255,255,255,.8); }
.follow-btn.on .follow-on { display: inline; }
.follow-btn.on .follow-off { display: none; }
.follow-link { position: relative; }
.follow-link svg { color: var(--accent); }
.follow-dot { position: absolute; top: 4px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; }

/* Starring row (watch + gallery pages) */
.starring { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.star-chip { display: inline-flex; align-items: center; gap: 2px; padding: 4px 6px 4px 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.star-chip > a { display: inline-flex; align-items: center; gap: 9px; padding-right: 6px; color: var(--text); }
.star-chip > a span { display: grid; line-height: 1.15; font-weight: 700; font-size: 13.5px; }
.star-chip small { font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.star-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.star-av.mdl-av-ph, .mdl-av-ph { display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--muted); background: var(--surface-2); }
.star-follow { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.star-follow:hover { color: var(--accent); background: var(--accent-soft); }
.star-follow.on { color: var(--accent); }
.star-follow.on svg { fill: currentColor; }
.star-channel { padding-right: 12px; }

/* ---------- Models directory ---------- */
.mdl-head { justify-content: space-between; align-items: center; }
.mdl-head > div { display: grid; gap: 2px; }
.mdl-head p { margin: 0; }
.mdl-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); min-width: min(320px, 100%); }
.mdl-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font-size: 14px; }
.mdl-toolbar { flex-wrap: wrap; gap: 12px; }
.az { display: flex; flex-wrap: wrap; gap: 2px; }
.az a { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 7px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.az a:hover { background: var(--surface); color: var(--text); }
.az a.on { background: var(--accent); color: #fff; }
.mdl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 22px 16px; }
.mdl-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.mdl-row-sm { grid-auto-columns: minmax(120px, 150px); margin-bottom: 18px; }
.mdl-featured { margin-bottom: 26px; }
.mdl-card { display: grid; gap: 10px; color: var(--text); min-width: 0; }
.mdl-photo { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.mdl-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.mdl-card:hover .mdl-photo img { transform: scale(1.05); }
.mdl-ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 34px; font-weight: 800; color: var(--muted); background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
.mdl-star { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; }
.mdl-meta { display: grid; gap: 1px; min-width: 0; }
.mdl-meta strong { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdl-card:hover .mdl-meta strong { color: var(--accent); }
.mdl-meta small { color: var(--muted); font-size: 12.5px; }

/* ---------- Profile header (model / channel) ---------- */
.profile { position: relative; overflow: hidden; margin: 6px 0 18px; border-radius: calc(var(--radius) + 6px); border: 1px solid var(--line); background: var(--surface); isolation: isolate; }
.profile-bg { position: absolute; inset: 0; z-index: -1; background: var(--cover, none) center / cover; filter: blur(38px) saturate(1.3); opacity: .45; transform: scale(1.25); }
.profile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 88%, transparent)); }
.profile-inner { display: flex; align-items: center; gap: 24px; padding: 34px 30px; flex-wrap: wrap; }
.profile-av { width: 132px; height: 132px; flex: none; border-radius: 50%; object-fit: cover; border: 4px solid color-mix(in srgb, var(--bg) 70%, transparent); box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); }
.profile-av.mdl-av-ph { font-size: 38px; }
.profile-logo { border-radius: 24px; object-fit: contain; background: var(--bg-2); }
.profile-main { flex: 1; min-width: 220px; display: grid; gap: 6px; }
.profile-main h1 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.025em; }
.profile-aka { margin: 0; color: var(--muted); font-size: 14px; }
.profile-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 14px; }
.profile-stats b { color: var(--text); font-weight: 700; }
.profile-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.profile-bio { max-width: 880px; margin: -4px 0 20px; color: var(--muted); line-height: 1.65; }
.profile-bio p { margin: 0 0 12px; }
.profile-tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--line); }
.profile-tabs a { padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 700; }
.profile-tabs a.on { color: var(--text); border-bottom-color: var(--accent); }
.profile-tabs small { color: var(--muted); font-weight: 600; margin-left: 4px; }
.profile-costars { margin-top: 36px; }
.more-from { margin-top: 30px; }
@media (max-width: 640px) { .profile-inner { padding: 24px 18px; gap: 16px; } .profile-av { width: 96px; height: 96px; } }

/* ---------- Channels ---------- */
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.ch-card { display: grid; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); color: var(--text); transition: transform .2s, box-shadow .2s; }
.ch-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px var(--accent-glow); }
.ch-cover { display: block; aspect-ratio: 16 / 7; background: linear-gradient(135deg, var(--surface-2), var(--accent-soft)) center / cover; }
.ch-body { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-top: -26px; }
.ch-body > span:last-child { display: grid; min-width: 0; padding-top: 22px; }
.ch-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-body small { color: var(--muted); font-size: 12.5px; }
.ch-logo { width: 52px; height: 52px; flex: none; border-radius: 14px; object-fit: contain; background: var(--bg-2); border: 3px solid var(--surface); }

/* ---------- Following ---------- */
.follow-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.follow-empty { display: grid; justify-items: center; gap: 12px; padding: 60px 20px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); }
.follow-empty-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.follow-empty-ic svg { width: 28px; height: 28px; }
.follow-empty p { margin: 0; color: var(--muted); max-width: 420px; }
.follow-empty-actions { display: flex; gap: 10px; }

/* ---------- Search landing ---------- */
.search-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.search-chips .chip { display: inline-flex; align-items: center; gap: 6px; }
.search-chips .chip svg { color: var(--muted); }
.search-related { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.did-you-mean { margin: -8px 0 16px; font-size: 15px; color: var(--muted); }
.did-you-mean a { color: var(--accent); font-weight: 700; }

/* ---------- Report ---------- */
.report-btn svg { vertical-align: -2px; }
.gal-actions { display: flex; justify-content: flex-end; margin: -8px 0 12px; }
.report-dialog { width: min(520px, calc(100vw - 24px)); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); color: var(--text); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
.report-dialog::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.report-form { display: grid; gap: 14px; padding: 22px; }
.report-head { display: flex; align-items: center; justify-content: space-between; font-size: 18px; }
.report-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--surface); color: var(--text); font-size: 20px; cursor: pointer; }
.report-form > p { margin: -6px 0 0; }
.report-reasons { display: grid; gap: 6px; }
.report-reason { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; font-size: 14px; }
.report-reason:hover { border-color: var(--muted); }
.report-reason input { accent-color: var(--accent); }
.report-reason:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.report-reason.is-severe span::before { content: '⚠ '; color: #ef4444; }
.report-field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.report-field em { font-style: normal; font-weight: 400; color: var(--muted); }
.report-field textarea, .report-field input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; }
.report-actions { display: flex; justify-content: flex-end; gap: 10px; }
.report-done { display: grid; gap: 8px; justify-items: start; }
.report-done strong { font-size: 18px; }

/* ---------- Native ad tiles ---------- */
.badge-ad { left: 8px; top: 8px; background: rgba(0,0,0,.72); color: #fff; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.card-native .card-title a { color: var(--text); }
.native-sponsor { color: var(--accent); font-weight: 600; }
.card-native-html { display: grid; place-items: center; min-height: 180px; border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.gal-native .gal-count { background: rgba(0,0,0,.72); }
.badge-4k { background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; }

/* ---------- Member levels ---------- */
.lvl-chip { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; vertical-align: 1px; background: var(--surface-2); color: var(--muted); }
.lvl-1 { background: color-mix(in srgb, #22c55e 18%, transparent); color: #22c55e; }
.lvl-2 { background: color-mix(in srgb, #3b82f6 18%, transparent); color: #60a5fa; }
.lvl-3 { background: color-mix(in srgb, #a855f7 18%, transparent); color: #c084fc; }
.lvl-4 { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #f59e0b; }
.lvl-5 { background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; }
.lvl-premium { background: var(--accent); color: #fff; }
.lvl-card { display: grid; gap: 14px; margin: 20px 0; padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.lvl-top { display: flex; align-items: center; gap: 14px; }
.lvl-emblem { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-size: 22px; font-weight: 900; }
.lvl-emblem.lvl-0 { background: var(--surface-2); color: var(--text); }
.lvl-text { display: grid; }
.lvl-text strong { font-size: 22px; }
.lvl-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.lvl-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #f59e0b)); }
.lvl-steps { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.lvl-steps .on { color: var(--text); font-weight: 700; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.badge-item { display: grid; gap: 2px; padding: 12px; border-radius: 14px; border: 1px dashed var(--line); opacity: .45; filter: grayscale(1); }
.badge-item.on { opacity: 1; filter: none; border-style: solid; background: var(--accent-soft); }
.badge-ic { font-size: 22px; line-height: 1; margin-bottom: 4px; }
.badge-item strong { font-size: 13.5px; }
.badge-item small { font-size: 11.5px; color: var(--muted); }

/* ---------- Plans: badge, trial, coupons ---------- */
.plan { position: relative; }
.plan-hot { border-color: var(--accent) !important; box-shadow: 0 18px 40px -22px var(--accent-glow); }
.plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.plan-price s { color: var(--muted); font-size: .6em; font-weight: 600; }
.plan-trial { display: inline-block; margin: 4px 0; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, #22c55e 16%, transparent); color: #22c55e; font-size: 12.5px; font-weight: 700; }
.plan-coupon { margin: 4px 0; padding: 6px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 700; }
.plan-pay { display: grid; gap: 8px; }
.redeem, .profile-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.redeem label, .profile-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; flex: 1; min-width: 200px; }
.redeem label em, .profile-form label em { font-style: normal; font-weight: 400; color: var(--muted); }
.redeem input { text-transform: uppercase; letter-spacing: .08em; }
.redeem p { flex-basis: 100%; margin: 0; }


/* =====================================================================
   1.40 — premium skins & engagement
   ===================================================================== */

/* ---------- Hero carousel ---------- */
.hero-stage { position: relative; min-width: 0; }
.hero-stage > .hero-main { display: block; }
.hero-stage .hero-slide { transition: opacity .7s ease, transform 1.2s ease; }
.hero-stage .hero-slide:not(.is-active) { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.hero-stage .hero-slide.is-active img { animation: hero-zoom 7s ease-out both; }
@keyframes hero-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero-dots { position: absolute; right: 18px; bottom: 16px; z-index: 4; display: flex; gap: 6px; }
.hero-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.45); cursor: pointer; transition: width .3s, background .3s; }
.hero-dots button.on { width: 26px; background: #fff; }
.hero-progress { position: absolute; left: 0; bottom: 0; z-index: 4; height: 3px; width: 0; background: var(--accent); border-radius: 0 3px 3px 0; }
.hero-stage.is-running .hero-progress { animation: hero-bar var(--hero-ms, 6500ms) linear forwards; }
@keyframes hero-bar { to { width: 100%; } }

/* ---------- Continue watching ---------- */
.home-continue .section-head { align-items: center; }
.cw-clear { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.cw-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.cw-card { scroll-snap-align: start; display: grid; gap: 8px; color: var(--text); min-width: 0; }
.cw-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.cw-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cw-card:hover .cw-thumb img { transform: scale(1.05); }
.cw-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.25); }
.cw-bar i { display: block; height: 100%; background: var(--accent); }
.cw-resume { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s; color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.cw-card:hover .cw-resume { opacity: 1; }
.cw-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.is-watched .thumb::before { content: 'Watched'; position: absolute; left: 8px; bottom: 8px; z-index: 3; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.75); color: #fff; font-size: 11px; font-weight: 700; }
.card.is-watched .thumb img { filter: saturate(.75) brightness(.9); }

/* ---------- Top 10 numbers (Trending) ---------- */
[data-top10='on'] .top10-wrap .grid { counter-reset: rank; }
[data-top10='on'] .top10-wrap .grid > .card:nth-child(-n+10) { counter-increment: rank; position: relative; }
[data-top10='on'] .top10-wrap .grid > .card:nth-child(-n+10) .thumb::after { content: counter(rank); position: absolute; left: 6px; top: -6px; z-index: 3; box-shadow: none; inset: auto; font: 900 64px/1 var(--font-head); color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.9); text-shadow: 0 6px 24px rgba(0,0,0,.6); pointer-events: none; }
[data-top10='on'] .top10-wrap .grid > .card:nth-child(-n+3) .thumb::after { color: var(--accent); -webkit-text-stroke: 0; }

/* ---------- Thumbnail shimmer & fade-in ---------- */
html.js[data-shimmer='on'] .thumb:not(.is-loaded), html.js[data-shimmer='on'] .gal-card:not(.is-loaded), html.js[data-shimmer='on'] .mdl-photo:not(.is-loaded) {
  background: linear-gradient(100deg, var(--surface-2) 30%, color-mix(in srgb, var(--surface-2) 70%, var(--text) 8%) 50%, var(--surface-2) 70%) 0 0 / 250% 100%;
  animation: shimmer 1.4s linear infinite;
}
html.js[data-shimmer='on'] .thumb:not(.is-loaded) img, html.js[data-shimmer='on'] .gal-card:not(.is-loaded) img, html.js[data-shimmer='on'] .mdl-photo:not(.is-loaded) img { opacity: 0; }
html.js[data-shimmer='on'] .thumb img, html.js[data-shimmer='on'] .gal-card img, html.js[data-shimmer='on'] .mdl-photo img { transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1), filter .3s; }
@keyframes shimmer { to { background-position: -250% 0; } }

/* ---------- Header shrink ---------- */
[data-hdrshrink='on'] .topbar-inner { transition: height .25s ease; }
[data-hdrshrink='on'] .topbar.is-scrolled .topbar-inner { height: 54px; }
[data-hdrshrink='on'] .topbar.is-scrolled { box-shadow: 0 10px 30px -20px rgba(0,0,0,.6); }
[data-hdrshrink='on'] .topbar.is-scrolled .logo { font-size: 18px; }

/* ---------- Hover info ---------- */
[data-hoverinfo='on'] .card .thumb::before { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.7)); opacity: 0; transition: opacity .25s; pointer-events: none; }
[data-hoverinfo='on'] .card:hover .thumb::before { opacity: 1; }
[data-hoverinfo='on'] .card .thumb .play-hint { position: absolute; left: 50%; top: 50%; z-index: 3; width: 54px; height: 54px; margin: -27px 0 0 -27px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 90%, transparent); color: #fff; font-size: 18px; transform: scale(.6); opacity: 0; transition: transform .25s cubic-bezier(.2,.8,.2,1.4), opacity .2s; pointer-events: none; box-shadow: 0 10px 30px -8px var(--accent-glow); }
[data-hoverinfo='on'] .card:hover .thumb .play-hint { transform: scale(1); opacity: 1; }
.play-hint { display: none; }
[data-hoverinfo='on'] .play-hint { display: grid; }

/* ---------- Scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js[data-reveal='on'] .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  html.js[data-reveal='on'] .reveal.in { opacity: 1; transform: none; }
}

/* ---------- Back to top ---------- */
.to-top { position: fixed; right: 18px; bottom: 22px; z-index: 55; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--bg-2) 85%, transparent); color: var(--text); cursor: pointer; backdrop-filter: blur(10px); box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .25s, transform .25s; display: none; }
[data-totop='on'] .to-top { display: grid; place-items: center; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top circle { fill: none; stroke-width: 3; }
.to-top-track { stroke: var(--line); }
.to-top-ring { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 106.8; stroke-dashoffset: 106.8; transition: stroke-dashoffset .1s linear; }
.to-top span { position: relative; font-size: 18px; font-weight: 800; }

/* ---------- Mobile bottom bar ---------- */
.bottom-nav { display: none; }
@media (max-width: 760px) {
  [data-bottomnav='on'] .bottom-nav { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 58; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px; border-radius: 22px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 82%, transparent); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); }
  [data-bottomnav='on'] .bottom-nav a, [data-bottomnav='on'] .bottom-nav button { display: grid; justify-items: center; gap: 2px; padding: 6px 0; border: 0; border-radius: 16px; background: none; color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 600; }
  [data-bottomnav='on'] .bottom-nav .on { color: var(--accent); background: var(--accent-soft); }
  [data-bottomnav='on'] body { padding-bottom: 86px; }
  [data-bottomnav='on'] .to-top { bottom: 96px; }
  [data-bottomnav='on'] .cookiebar { bottom: 90px; }
}

/* ---------- Up next (self-hosted player) ---------- */
.up-next { position: absolute; right: 16px; bottom: 16px; z-index: 20; display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; width: min(420px, calc(100% - 32px)); padding: 10px; border-radius: 16px; background: rgba(8,8,12,.86); backdrop-filter: blur(12px); color: #fff; box-shadow: 0 20px 50px -20px #000; animation: up-in .35s cubic-bezier(.2,.8,.2,1); }
@keyframes up-in { from { opacity: 0; transform: translateY(14px); } }
.up-next img { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.up-next small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.up-next strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; margin: 2px 0 8px; }
.up-next-actions { display: flex; gap: 8px; }
.up-next-actions a, .up-next-actions button { height: 32px; padding: 0 14px; border-radius: 999px; border: 0; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; }
.up-next-actions a { background: var(--accent); color: #fff; }
.up-next-actions button { background: rgba(255,255,255,.14); color: #fff; }

/* =====================================================================
   Premium skins
   ===================================================================== */

/* OBSIDIAN — black glass, violet-to-cyan light, luxury streaming */
[data-skin='obsidian'] { --radius: 18px; --radius-sm: 14px; }
:root:not([data-theme='light'])[data-skin='obsidian'] { --bg: #06060a; --bg-2: #0c0c13; --surface: rgba(255,255,255,.045); --surface-2: rgba(255,255,255,.08); --line: rgba(255,255,255,.08); --text: #f5f5fa; --muted: #9a9aae; }
[data-theme='light'][data-skin='obsidian'] { --bg: #f3f3f8; --bg-2: #fff; --surface: #fff; --surface-2: #ebebf3; --line: rgba(20,20,40,.08); --text: #121220; --muted: #62627a; }
:root:not([data-theme='light'])[data-skin='obsidian'] body { background: radial-gradient(1100px 600px at 85% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), radial-gradient(900px 520px at -5% 10%, rgba(34,211,238,.10), transparent 60%), var(--bg); background-attachment: fixed; }
[data-skin='obsidian'] .topbar { background: color-mix(in srgb, var(--bg) 60%, transparent); border-bottom-color: var(--line); }
[data-skin='obsidian'] .logo-mark { background: conic-gradient(from 200deg, var(--accent), #22d3ee, var(--accent)); }
[data-skin='obsidian'] .logo-word { letter-spacing: -.03em; }
[data-skin='obsidian'] .mainnav a.active { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), rgba(34,211,238,.18)); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
[data-skin='obsidian'] .search input { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
[data-skin='obsidian'] .chip { background: var(--surface); border-color: var(--line); backdrop-filter: blur(8px); }
[data-skin='obsidian'] .chip:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 3px var(--accent-soft); }
[data-skin='obsidian'] .section-head h2 { font-weight: 700; letter-spacing: -.02em; }
[data-skin='obsidian'] .section-head h2::before { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #22d3ee); box-shadow: 0 0 16px var(--accent-glow); }
[data-skin='obsidian'] .thumb { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
[data-skin='obsidian'] .card:hover .thumb { box-shadow: 0 22px 50px -22px var(--accent-glow), 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-3px); }
[data-skin='obsidian'] .thumb { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
[data-skin='obsidian'] .hero-main { box-shadow: 0 40px 90px -40px var(--accent-glow); }
[data-skin='obsidian'] .btn-accent, [data-skin='obsidian'] .btn-cta { background: linear-gradient(135deg, var(--accent), #22d3ee); box-shadow: 0 12px 30px -12px var(--accent-glow); }
[data-skin='obsidian'] .badge-hd { background: linear-gradient(135deg, var(--accent), #22d3ee); }

/* CRYSTAL — bright frosted glass, airy and clean */
[data-skin='crystal'] { --radius: 20px; --radius-sm: 16px; }
[data-theme='light'][data-skin='crystal'] { --bg: #eef2fb; --bg-2: rgba(255,255,255,.7); --surface: rgba(255,255,255,.72); --surface-2: rgba(255,255,255,.9); --line: rgba(40,60,120,.10); --text: #0f1733; --muted: #5a6788; --shadow: 0 1px 2px rgba(15,23,51,.05), 0 18px 40px -24px rgba(15,23,51,.35); }
:root:not([data-theme='light'])[data-skin='crystal'] { --bg: #0b1020; --bg-2: rgba(20,28,52,.7); --surface: rgba(255,255,255,.06); --surface-2: rgba(255,255,255,.1); --line: rgba(160,180,255,.12); --muted: #93a0c4; }
[data-skin='crystal'] body { background: radial-gradient(900px 500px at 10% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%), radial-gradient(800px 500px at 100% 0%, rgba(236,72,153,.12), transparent 60%), radial-gradient(900px 600px at 50% 110%, rgba(56,189,248,.14), transparent 60%), var(--bg); background-attachment: fixed; }
[data-skin='crystal'] .topbar { background: var(--bg-2); backdrop-filter: saturate(180%) blur(20px); }
[data-skin='crystal'] .card { padding: 8px 8px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(12px); transition: transform .3s, box-shadow .3s; }
[data-skin='crystal'] .card-body { padding: 10px 6px 0; }
[data-skin='crystal'] .card:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -28px color-mix(in srgb, var(--accent) 50%, transparent); }
[data-skin='crystal'] .card:hover .thumb { box-shadow: none; }
[data-skin='crystal'] .chip { background: var(--surface); border-color: var(--line); }
[data-skin='crystal'] .mainnav a.active { background: var(--surface-2); box-shadow: var(--shadow); color: var(--accent); }
[data-skin='crystal'] .section-head h2::before { width: 8px; height: 22px; border-radius: 8px; }
[data-skin='crystal'] .hero-main, [data-skin='crystal'] .cat-card, [data-skin='crystal'] .gal-card { box-shadow: var(--shadow); }

/* CARBON — performance dark, red race stripe, dense big tube */
[data-skin='carbon'] { --radius: 8px; --radius-sm: 6px; }
:root:not([data-theme='light'])[data-skin='carbon'] { --bg: #0d0e10; --bg-2: #141518; --surface: #1a1c20; --surface-2: #24262b; --line: rgba(255,255,255,.07); --text: #f2f3f5; --muted: #9b9ea6; }
[data-theme='light'][data-skin='carbon'] { --bg: #f0f1f3; --bg-2: #fff; --surface: #fff; --surface-2: #e4e6ea; --line: rgba(0,0,0,.08); --text: #111317; --muted: #5d6068; }
:root:not([data-theme='light'])[data-skin='carbon'] body { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px); }
[data-skin='carbon'] .topbar { background: var(--bg-2); border-bottom: 2px solid var(--accent); backdrop-filter: none; }
[data-skin='carbon'] .logo-word { font-weight: 900; font-style: italic; letter-spacing: -.02em; text-transform: uppercase; }
[data-skin='carbon'] .logo-mark { border-radius: 4px; transform: skewX(-8deg); }
[data-skin='carbon'] .mainnav a { border-radius: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; }
[data-skin='carbon'] .mainnav a.active { background: var(--accent); color: #fff; }
[data-skin='carbon'] .section-head { border-left: 4px solid var(--accent); padding-left: 12px; }
[data-skin='carbon'] .section-head h2 { text-transform: uppercase; font-style: italic; font-weight: 900; letter-spacing: .01em; }
[data-skin='carbon'] .section-head h2::before { display: none; }
[data-skin='carbon'] .chip { border-radius: 4px; background: var(--surface); border-color: var(--line); font-weight: 600; }
[data-skin='carbon'] .card:hover .thumb { box-shadow: 0 0 0 2px var(--accent), 0 16px 30px -14px var(--accent-glow); }
[data-skin='carbon'] .badge-hd { border-radius: 3px; transform: skewX(-8deg); }
[data-skin='carbon'] .btn-accent, [data-skin='carbon'] .btn-cta { border-radius: 6px; }

/* ROYAL — deep purple and gold, members-club luxury */
[data-skin='royal'] { --radius: 14px; --radius-sm: 10px; --gold: #e8c46a; }
:root:not([data-theme='light'])[data-skin='royal'] { --bg: #0e0818; --bg-2: #150d24; --surface: #1d1330; --surface-2: #281a40; --line: rgba(232,196,106,.14); --text: #f6f0ff; --muted: #b3a5cc; }
[data-theme='light'][data-skin='royal'] { --bg: #f8f4ff; --bg-2: #fff; --surface: #fff; --surface-2: #efe6ff; --line: rgba(80,40,140,.14); --text: #1d1030; --muted: #6d5a88; --gold: #a47b20; }
:root:not([data-theme='light'])[data-skin='royal'] body { background: radial-gradient(1000px 520px at 50% -20%, rgba(232,196,106,.14), transparent 60%), var(--bg); }
[data-skin='royal'] .topbar { background: color-mix(in srgb, var(--bg) 75%, transparent); border-bottom: 1px solid var(--line); }
[data-skin='royal'] .logo-mark { background: linear-gradient(135deg, var(--gold), #b8862b); box-shadow: 0 6px 20px -6px rgba(232,196,106,.55); }
[data-skin='royal'] .logo-word { background: linear-gradient(90deg, var(--text), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--font-head); }
[data-skin='royal'] .mainnav a.active { background: none; color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
[data-skin='royal'] .section-head h2 { font-family: var(--font-head); }
[data-skin='royal'] .section-head h2::before { background: linear-gradient(var(--gold), #b8862b); }
[data-skin='royal'] .chip:hover { border-color: var(--gold); color: var(--gold); }
[data-skin='royal'] .thumb { box-shadow: inset 0 0 0 1px var(--line); }
[data-skin='royal'] .card:hover .thumb { box-shadow: 0 18px 44px -20px rgba(232,196,106,.45), 0 0 0 1px rgba(232,196,106,.5); }
[data-skin='royal'] .badge-hd, [data-skin='royal'] .pill { background: linear-gradient(135deg, var(--gold), #b8862b); color: #1d1030; }
[data-skin='royal'] .btn-accent, [data-skin='royal'] .btn-cta { background: linear-gradient(135deg, var(--gold), #b8862b); color: #1d1030; box-shadow: 0 12px 30px -12px rgba(232,196,106,.5); }

/* TOKYO — night-city magenta & cyan, vibrant and playful */
[data-skin='tokyo'] { --radius: 16px; --radius-sm: 12px; }
:root:not([data-theme='light'])[data-skin='tokyo'] { --bg: #0a0614; --bg-2: #120a22; --surface: #1a0f30; --surface-2: #26164a; --line: rgba(255,70,200,.14); --text: #fff; --muted: #b9a8d9; }
[data-theme='light'][data-skin='tokyo'] { --bg: #fff5fc; --bg-2: #fff; --surface: #fff; --surface-2: #fde4f5; --line: rgba(200,0,140,.12); --text: #22102e; --muted: #7a5b86; }
:root:not([data-theme='light'])[data-skin='tokyo'] body { background: linear-gradient(180deg, transparent 60%, rgba(255,43,214,.06)), radial-gradient(900px 500px at 100% 0%, rgba(34,211,238,.14), transparent 60%), radial-gradient(900px 500px at 0% 0%, rgba(255,43,214,.16), transparent 60%), var(--bg); background-attachment: fixed; }
[data-skin='tokyo'] .topbar { background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, #ff2bd6, #22d3ee) 1; }
[data-skin='tokyo'] .logo-word { background: linear-gradient(90deg, #ff2bd6, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
[data-skin='tokyo'] .logo-mark { background: linear-gradient(135deg, #ff2bd6, #22d3ee); }
[data-skin='tokyo'] .mainnav a.active { background: linear-gradient(135deg, #ff2bd6, #7c3aed); color: #fff; }
[data-skin='tokyo'] .chip { border-radius: 999px; }
[data-skin='tokyo'] .chip:hover { background: linear-gradient(135deg, rgba(255,43,214,.2), rgba(34,211,238,.2)); border-color: transparent; }
[data-skin='tokyo'] .section-head h2::before { background: linear-gradient(#ff2bd6, #22d3ee); }
[data-skin='tokyo'] .card:hover .thumb { box-shadow: -6px 0 24px -10px #ff2bd6, 6px 0 24px -10px #22d3ee; transform: translateY(-2px); }
[data-skin='tokyo'] .badge-hd { background: linear-gradient(135deg, #ff2bd6, #22d3ee); }
[data-skin='tokyo'] .btn-accent, [data-skin='tokyo'] .btn-cta { background: linear-gradient(135deg, #ff2bd6, #7c3aed); }

/* BLOSSOM — soft light pink, rounded, warm and inviting */
[data-skin='blossom'] { --radius: 22px; --radius-sm: 18px; }
[data-theme='light'][data-skin='blossom'] { --bg: #fff7f9; --bg-2: #fff; --surface: #fff; --surface-2: #ffe8ee; --line: rgba(190,60,100,.12); --text: #2b1520; --muted: #8b6573; --shadow: 0 14px 34px -22px rgba(190,60,100,.4); }
:root:not([data-theme='light'])[data-skin='blossom'] { --bg: #170b10; --bg-2: #1f1016; --surface: #28141d; --surface-2: #351b27; --line: rgba(255,160,190,.12); --muted: #c49aa8; }
[data-skin='blossom'] .topbar { background: color-mix(in srgb, var(--bg-2) 85%, transparent); }
[data-skin='blossom'] .logo-mark { border-radius: 50%; background: linear-gradient(135deg, #fb7185, #f9a8d4); }
[data-skin='blossom'] .logo-word { font-weight: 800; letter-spacing: -.01em; }
[data-skin='blossom'] .mainnav a { border-radius: 999px; }
[data-skin='blossom'] .mainnav a.active { background: var(--surface-2); color: var(--accent); }
[data-skin='blossom'] .chip { border-radius: 999px; background: var(--surface); }
[data-skin='blossom'] .section-head h2::before { width: 10px; height: 10px; border-radius: 50%; }
[data-skin='blossom'] .thumb { border-radius: var(--radius); }
[data-skin='blossom'] .card:hover .thumb { box-shadow: var(--shadow); transform: translateY(-3px) rotate(-.4deg); }
[data-skin='blossom'] .thumb { transition: transform .35s cubic-bezier(.2,.8,.2,1.2), box-shadow .3s; }
[data-skin='blossom'] .btn-accent, [data-skin='blossom'] .btn-cta { border-radius: 999px; }

/* ---------- Legal pages (Terms, Privacy, 2257) ---------- */
.legal { max-width: 1120px; margin: 8px auto 40px; }
.lg-hero { display: flex; gap: 18px; align-items: flex-start; padding: 30px 32px; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 60%), var(--surface); box-shadow: var(--shadow); }
.lg-ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.lg-ic svg { width: 26px; height: 26px; }
.lg-ic.sm { width: 36px; height: 36px; border-radius: 10px; }
.lg-ic.sm svg { width: 18px; height: 18px; }
.lg-kicker { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.lg-hero h1 { margin: 0; font-size: clamp(26px, 4vw, 38px); line-height: 1.15; letter-spacing: -.02em; }
.lg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.lg-meta > span + span::before { content: '·'; margin-right: 16px; }
.lg-print { margin-left: auto; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.lg-print:hover { border-color: var(--accent); color: var(--accent); }
.lg-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 36px; margin-top: 28px; align-items: start; }
.lg-layout.lg-no-toc { grid-template-columns: minmax(0, 1fr); max-width: 780px; }
.lg-toc { position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow: auto; }
.lg-toc strong { display: block; margin-bottom: 10px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lg-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); counter-reset: lg; }
.lg-toc li { counter-increment: lg; }
.lg-toc a { display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; color: var(--muted); font-size: 13.5px; line-height: 1.35; text-decoration: none; transition: color .15s, border-color .15s; }
.lg-toc a::before { content: counter(lg, decimal-leading-zero) '  '; font-variant-numeric: tabular-nums; opacity: .55; white-space: pre; }
.lg-toc a:hover, .lg-toc a.on { color: var(--text); border-left-color: var(--accent); }
.lg-body { max-width: 760px; margin: 0; font-size: 15.5px; line-height: 1.75; }
.lg-body h2 { position: relative; margin: 38px 0 10px; padding-top: 6px; font-size: 21px; letter-spacing: -.01em; scroll-margin-top: 90px; }
.lg-body h2:first-child { margin-top: 0; }
.lg-anchor { position: absolute; left: -22px; color: var(--accent); opacity: 0; text-decoration: none; transition: opacity .15s; }
.lg-body h2:hover .lg-anchor { opacity: .8; }
.lg-body p, .lg-body li { color: color-mix(in srgb, var(--text) 86%, var(--muted)); }
.lg-body ul { padding-left: 0; list-style: none; }
.lg-body li { position: relative; padding-left: 22px; margin: 7px 0; }
.lg-body li::before { content: ''; position: absolute; left: 4px; top: .72em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); opacity: .85; }
.lg-body a { color: var(--accent); text-underline-offset: 3px; }
.lg-body h2:first-child + p, .lg-body > p:first-child { font-size: 16.5px; color: var(--text); }
.lg-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.lg-related a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 600; text-decoration: none; transition: border-color .15s, transform .15s; }
.lg-related a span:nth-child(2) { flex: 1; }
.lg-related a:hover { border-color: var(--accent); transform: translateY(-2px); }
@media (max-width: 860px) {
  .lg-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lg-toc { position: static; max-height: none; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
  .lg-hero { padding: 22px 18px; }
  .lg-ic { width: 44px; height: 44px; }
  .lg-anchor { display: none; }
}
@media print {
  .topbar, .footer, .rail, .lg-toc, .lg-related, .lg-print, .bottom-nav, .to-top, .announce, .cookiebar { display: none !important; }
  .legal, .lg-body { max-width: none; }
  .lg-hero { box-shadow: none; background: none; border: 0; padding: 0; }
  .lg-layout { display: block; }
  body { background: #fff; color: #000; }
  .lg-body p, .lg-body li { color: #111; }
}

/* ---------- Font: Rubik ---------- */
[data-font='rubik'] { --font-head: 'Rubik', system-ui, sans-serif; --font-body: 'Rubik', system-ui, sans-serif; }

/* ---------- Menu style: icons (icon tile + label), works with every skin ---------- */
.nav-ic { display: none; }
[data-navstyle='icons'] .mainnav { gap: 6px; }
[data-navstyle='icons'] .mainnav a { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border-radius: 10px; background: none; font-size: 14.5px; }
[data-navstyle='icons'] .nav-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: var(--surface); color: var(--muted); transition: background .15s, color .15s; }
[data-navstyle='icons'] .nav-ic svg { width: 16px; height: 16px; }
[data-navstyle='icons'] .mainnav a:hover { background: none; color: var(--text); }
[data-navstyle='icons'] .mainnav a:hover .nav-ic { color: var(--text); background: var(--surface-2); }
[data-navstyle='icons'] .mainnav a.active { background: none; color: var(--text); }
[data-navstyle='icons'] .mainnav a.active .nav-ic { background: var(--accent); color: #fff; box-shadow: 0 6px 16px -8px var(--accent-glow); }

/* ======================================================================
   Skin: Graphite — charcoal tube, soft periwinkle accent, two-row header
   ====================================================================== */
[data-skin='graphite'] { --radius: 8px; --radius-sm: 6px; }
:root:not([data-theme='light'])[data-skin='graphite'] { --bg: #131415; --bg-2: #0e0f10; --surface: #1d2124; --surface-2: #25292d; --line: rgba(255,255,255,.06); --text: #f0f3f6; --muted: #a3a3a3; }
[data-theme='light'][data-skin='graphite'] { --bg: #eef0f3; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #e5e8ec; --line: rgba(0,0,0,.08); --text: #16181b; --muted: #6b7078; }
[data-skin='graphite'] .topbar { background: var(--bg-2); border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-skin='graphite'] .topbar-inner { height: 76px; gap: 26px; }
@media (min-width: 1000px) {
  [data-skin='graphite'] .topbar-inner { flex-wrap: wrap; height: auto; padding-top: 16px; row-gap: 0; }
  [data-skin='graphite'] .topbar-inner .logo { order: 1; }
  [data-skin='graphite'] .topbar-inner .search { order: 2; flex: 1 1 auto; max-width: 900px; margin-left: 12px; }
  [data-skin='graphite'] .topbar-inner > .icon-btn, [data-skin='graphite'] .topbar-inner > .btn-cta { order: 3; }
  [data-skin='graphite'] .mainnav { order: 10; flex-basis: 100%; margin: 14px 0 0; padding: 12px 0 14px; border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
}
[data-skin='graphite'] .search input { height: 46px; border-radius: 10px; background: #000; border-color: #212427; padding-left: 20px; font-size: 14px; }
[data-theme='light'][data-skin='graphite'] .search input { background: var(--surface-2); border-color: transparent; }
[data-skin='graphite'] .search button { top: 0; right: 0; width: 72px; height: 46px; border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--muted); }
[data-skin='graphite'] .search button:hover { color: var(--accent); }
[data-skin='graphite'] .chips-row { border-top: 1px solid var(--line); background: var(--bg-2); }
[data-skin='graphite'] .chip { border-radius: 5px; background: var(--bg); border-color: transparent; color: var(--muted); font-size: 12.5px; }
[data-skin='graphite'] .chip:hover { color: var(--accent); }
[data-skin='graphite'] .page-head h1, [data-skin='graphite'] .section-head h2 { font-size: 24px; font-weight: 700; letter-spacing: 0; text-transform: capitalize; }
[data-skin='graphite'] .section-head h2::before { display: none; }
[data-skin='graphite'] .grid { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
[data-skin='graphite'] .card { display: flex; flex-direction: column; background: var(--surface); border-radius: 5px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
[data-skin='graphite'] .card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(0,0,0,.8); }
[data-skin='graphite'] .thumb { border-radius: 5px 5px 0 0; }
[data-skin='graphite'] .card-body { padding: 10px 14px 13px 11px; }
[data-skin='graphite'] .card-title { font-size: 15px; font-weight: 500; -webkit-line-clamp: 1; }
[data-skin='graphite'] .card-meta { font-size: 11.5px; gap: 4px 18px; color: #757575; }
[data-skin='graphite'] .badge-time { background: rgba(29,33,36,.9); color: #d0d0d0; border-radius: 5px; font-weight: 400; }
[data-skin='graphite'] .badge-hd { background: var(--accent); color: #0e0f10; border-radius: 5px; }
[data-skin='graphite'] .cat-grid { gap: 10px; }
[data-skin='graphite'] .cat-card { aspect-ratio: auto; display: flex; flex-direction: column; border-radius: 5px; background: var(--surface); }
[data-skin='graphite'] .cat-card img { aspect-ratio: 16 / 9; height: auto; }
[data-skin='graphite'] .cat-card .cat-overlay { position: static; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: none; color: var(--text); }
[data-skin='graphite'] .cat-card .cat-overlay strong { font-size: 17px; font-weight: 500; }
[data-skin='graphite'] .cat-card .cat-overlay small { font-size: 13px; font-weight: 300; color: #757575; opacity: 1; }
[data-skin='graphite'] .cat-card:hover { outline: 0; box-shadow: 0 0 0 1px var(--accent); }
[data-skin='graphite'] .tabs { background: none; border: 0; padding: 0; gap: 10px; }
[data-skin='graphite'] .tab { border-radius: 5px; padding: 0 22px; height: 44px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; color: #757575; }
[data-skin='graphite'] .tab.active { background: var(--surface-2); color: var(--accent); box-shadow: none; }
[data-skin='graphite'] .pager { gap: 10px; }
[data-skin='graphite'] .pager a, [data-skin='graphite'] .pager-gap { min-width: 54px; height: 54px; border-radius: 18px; font-size: 17px; font-weight: 700; }
[data-skin='graphite'] .pager a { background: var(--surface); border: 0; color: var(--muted); }
[data-skin='graphite'] .pager a:hover { color: var(--accent); }
[data-skin='graphite'] .pager a.current { background: var(--accent); color: var(--bg); }
[data-skin='graphite'] .footer { background: transparent; border-top: 1px solid var(--line); padding-top: 70px; }
[data-skin='graphite'] .footer a:hover { color: var(--accent); }
[data-skin='graphite'] .btn-accent, [data-skin='graphite'] .btn-cta { border-radius: 10px; color: #0e0f10; }
[data-skin='graphite'] .to-top { border-radius: 12px; }

/* ======================================================================
   Skin: Frame — dark slate frame around a light content panel, mint accent
   ====================================================================== */
[data-skin='frame'] { --radius: 6px; --radius-sm: 4px; --frame: #272d35; --frame-deep: #0d131d; }
[data-skin='frame'] { --bg: #dfe2e7; --bg-2: #f0f3f6; --surface: #ffffff; --surface-2: #f0f3f7; --line: rgba(39,45,53,.1); --text: #272d35; --muted: #5f6772; color-scheme: light; }
:root[data-theme='dark'][data-skin='frame'] { --frame: #0b0f15; --frame-deep: #05080c; --bg: #171c23; --bg-2: #1e242c; --surface: #222932; --surface-2: #2a323c; --line: rgba(255,255,255,.07); --text: #eef1f5; --muted: #98a1ad; color-scheme: dark; }
[data-skin='frame'] body { background: var(--frame); }
[data-skin='frame'] .topbar { background: var(--frame); border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; color: #eef1f5; }
[data-skin='frame'] .topbar-inner { height: 88px; gap: 36px; }
[data-skin='frame'] .logo, [data-skin='frame'] .topbar .icon-btn { color: #fff; }
[data-skin='frame'] .search { flex: 0 1 460px; margin-left: 0; }
[data-skin='frame'] .search input { height: 50px; border-radius: 100px; border: 0; background: var(--frame-deep); color: #dfe2e7; padding: 0 76px 0 22px; font-size: 14px; }
[data-skin='frame'] .search input::placeholder { color: rgba(223,226,231,.55); }
[data-skin='frame'] .search input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
[data-skin='frame'] .search button { top: 10px; right: 10px; width: 54px; height: 30px; border-radius: 42px; background: var(--accent); }
@media (min-width: 1000px) {
  [data-skin='frame'] .topbar-inner { flex-wrap: wrap; height: auto; padding-top: 18px; row-gap: 0; }
  [data-skin='frame'] .topbar-inner .logo { order: 1; }
  [data-skin='frame'] .topbar-inner .search { order: 2; }
  [data-skin='frame'] .topbar-inner > .icon-btn, [data-skin='frame'] .topbar-inner > .btn-cta { order: 3; }
  [data-skin='frame'] .mainnav { order: 10; flex-basis: 100%; margin-top: 16px; padding: 12px 20px 8px; border-radius: 11px 11px 0 0; background: var(--bg-2); overflow-x: auto; scrollbar-width: none; }
  [data-skin='frame'] .chips-row { background: var(--bg-2); }
  [data-skin='frame'] .chips-row .wrap { border-radius: 0; }
}
[data-skin='frame'] .mainnav a { color: var(--muted); }
[data-skin='frame'] .chips-row { border-top: 1px solid var(--line); }
[data-skin='frame'] .chip { border-radius: 4px; background: var(--surface); border-color: var(--line); color: var(--muted); }
[data-skin='frame'] .chip:hover { color: var(--text); border-color: var(--accent); }
[data-skin='frame'][data-navstyle='icons'] .nav-ic { background: transparent; width: 22px; }
[data-skin='frame'][data-navstyle='icons'] .mainnav a { flex-direction: column; gap: 4px; padding: 5px 10px; font-size: 14px; }
[data-skin='frame'][data-navstyle='icons'] .mainnav a.active { color: var(--text); }
[data-skin='frame'][data-navstyle='icons'] .mainnav a.active .nav-ic { background: transparent; color: var(--accent); box-shadow: none; }
[data-skin='frame'] .main { background: var(--bg); padding-top: 22px; padding-bottom: 70px; }
@media (min-width: 1000px) { [data-skin='frame'] .main { border-radius: 0 0 11px 11px; } }
[data-skin='frame'] .rail-layout { background: var(--bg); }
[data-skin='frame'] .page-head h1, [data-skin='frame'] .section-head h2 { font-size: clamp(24px, 3vw, 33px); font-weight: 700; letter-spacing: 0; text-transform: capitalize; color: var(--text); }
[data-skin='frame'] .section-head h2::before { display: none; }
[data-skin='frame'] .grid { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
[data-skin='frame'] .card { background: var(--surface); border-radius: 4px; overflow: hidden; box-shadow: 0 1px 1px rgba(0,0,0,.06); transition: box-shadow .2s, transform .2s; }
[data-skin='frame'] .card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(13,19,29,.45); }
[data-skin='frame'] .thumb { border-radius: 4px 4px 0 0; }
[data-skin='frame'] .card-body { padding: 8px 10px 11px; }
[data-skin='frame'] .card-title { font-size: 15px; font-weight: 500; -webkit-line-clamp: 1; }
[data-skin='frame'] .card-title a:hover { color: var(--accent); }
[data-skin='frame'] .card-meta { font-size: 12px; }
[data-skin='frame'] .badge-time { background: rgba(39,45,53,.88); border-radius: 3px; }
[data-skin='frame'] .badge-hd { background: var(--accent); border-radius: 3px; }
[data-skin='frame'] .cat-grid { gap: 10px; }
[data-skin='frame'] .cat-card { aspect-ratio: auto; display: flex; flex-direction: column; border-radius: 4px; background: var(--surface); box-shadow: 0 1px 1px rgba(0,0,0,.06); }
[data-skin='frame'] .cat-card img { aspect-ratio: 16 / 9; height: auto; }
[data-skin='frame'] .cat-card .cat-overlay { position: static; flex-direction: row; align-items: center; justify-content: space-between; padding: 7px 10px; background: none; color: var(--text); }
[data-skin='frame'] .cat-card .cat-overlay strong { font-size: 18px; font-weight: 700; }
[data-skin='frame'] .cat-card .cat-overlay small { padding: 1px 5px; border-radius: 2px; background: var(--surface-2); color: var(--muted); font-size: 13px; font-weight: 300; opacity: 1; }
[data-skin='frame'] .cat-card:hover { outline: 0; box-shadow: 0 0 0 2px var(--accent); }
[data-skin='frame'] .tabs { background: var(--surface); border-color: var(--line); border-radius: 6px; }
[data-skin='frame'] .tab { border-radius: 4px; }
[data-skin='frame'] .pager a, [data-skin='frame'] .pager-gap { border-radius: 50%; min-width: 46px; height: 46px; padding: 0; }
[data-skin='frame'] .pager a.pager-btn { border-radius: 100px; padding: 0 18px; }
[data-skin='frame'] .pager a { background: var(--surface); border: 0; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
[data-skin='frame'] .pager a.current { background: var(--accent); color: #fff; }
[data-skin='frame'] .footer { background: var(--frame-deep); border-top: 0; color: rgba(223,226,231,.7); }
[data-skin='frame'] .footer a { color: rgba(223,226,231,.8); }
[data-skin='frame'] .footer a:hover { color: var(--accent); }
[data-skin='frame'] .footer .logo { color: #fff; }
[data-skin='frame'] .btn-accent, [data-skin='frame'] .btn-cta { border-radius: 100px; }
[data-skin='frame'] .announce { background: var(--frame-deep); }

/* ---------- Comments (minimal premium, theme-driven) ---------- */
.cm2 { margin-top: 28px; max-width: 820px; }
.cm2-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cm2-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.cm2-count { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cm2-sort { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.cm2-sort button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.cm2-sort button.on { background: var(--surface-2); color: var(--text); }

.cm2-flash { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; }
.cm2-flash.ok { background: color-mix(in srgb, #22c55e 13%, transparent); color: color-mix(in srgb, #22c55e 80%, var(--text)); }
.cm2-flash.err { background: color-mix(in srgb, #ef4444 13%, transparent); color: color-mix(in srgb, #ef4444 80%, var(--text)); }

.cm2-form { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 22px; }
.cm2-box { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.cm2-box:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 0 0 4px var(--accent-soft); }
.cm2-box textarea { display: block; width: 100%; min-height: 48px; max-height: 260px; padding: 13px 16px 6px; border: 0; outline: 0; resize: none; background: transparent; color: var(--text); font: inherit; font-size: 14.5px; line-height: 1.55; }
.cm2-box textarea::placeholder, .cm2-bar input::placeholder { color: var(--muted); opacity: .85; }
.cm2-bar { display: flex; align-items: center; gap: 10px; padding: 6px 8px 8px 16px; }
.cm2-bar input { flex: 1 1 140px; min-width: 0; max-width: 240px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; outline: 0; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; transition: border-color .15s; }
.cm2-bar input:focus { border-color: var(--accent); }
.cm2-chars { margin-left: auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .15s; }
.cm2-box:focus-within .cm2-chars, .cm2-chars.near { opacity: 1; }
.cm2-chars.near { color: #f59e0b; }
.cm2-send { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 16px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .15s, opacity .15s, box-shadow .15s; }
.cm2-send:hover { box-shadow: 0 8px 18px -10px var(--accent-glow); transform: translateY(-1px); }
.cm2-send:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.cm2-chars:not(.near) + .cm2-send { margin-left: 0; }

.cm2-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 15px; font-weight: 700; color: hsl(var(--h, 250) 70% 96%); background: linear-gradient(135deg, hsl(var(--h, 250) 62% 58%), hsl(calc(var(--h, 250) + 40) 62% 46%)); }
.cm2-av-me { color: var(--muted); background: var(--surface-2); }

.cm2-list { list-style: none; margin: 0; padding: 0; }
.cm2-item { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); animation: cm2-in .3s ease both; }
.cm2-item:first-child { border-top: 0; padding-top: 4px; }
@keyframes cm2-in { from { opacity: 0; transform: translateY(4px); } }
.cm2-main { flex: 1; min-width: 0; }
.cm2-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cm2-meta strong { font-size: 14px; font-weight: 600; }
.cm2-meta time { font-size: 12px; color: var(--muted); }
.cm2-meta time::before { content: '·'; margin-right: 8px; opacity: .6; }
.cm2-main p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
.cm2-list.is-collapsed .cm2-item:nth-child(n+7) { display: none; }
.cm2-more { display: block; width: 100%; margin-top: 6px; padding: 10px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cm2-more:hover { color: var(--accent); border-color: var(--accent); }

.cm2-empty { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.cm2-empty strong { display: block; color: var(--text); font-size: 14px; font-weight: 600; }
.cm2-empty span:not(.cm2-empty-ic) { font-size: 13px; }
.cm2-empty-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }

@media (max-width: 560px) {
  .cm2-form .cm2-av-me { display: none; }
  .cm2-bar { flex-wrap: wrap; padding-left: 10px; }
  .cm2-bar input { max-width: none; flex-basis: 100%; }
  .cm2-chars { margin-left: 0; }
  .cm2-send { margin-left: auto; }
}

.gal-comments { max-width: 820px; margin: 34px auto 0; }
.gal-comments .cm2 { margin-top: 0; }

/* ---------- Sign in / Create account (premium split, /login and /register) ---------- */
.auth.auth-pro { grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr); min-height: min(720px, calc(100vh - 130px)); margin: 10px 0 34px; border-radius: calc(var(--radius) + 12px); border: 1px solid var(--line); background: var(--surface); box-shadow: 0 50px 120px -60px rgb(0 0 0 / .75); }
.auth-pro .auth-art { min-height: 100%; }
.auth-pro .auth-mosaic { inset: -12% -8%; gap: 10px; transform: rotate(-9deg) scale(1.08); }
.auth-pro .auth-mosaic span { border-radius: 14px; box-shadow: 0 18px 40px -20px rgb(0 0 0 / .8); }
.auth-pro .auth-mosaic img { opacity: 0; transition: opacity .8s ease; }
.auth-pro .auth-mosaic img.is-in { opacity: 1; }
.auth-pro .auth-art-shade { background:
  radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--accent) 60%, transparent), transparent 60%),
  radial-gradient(70% 50% at 100% 0%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 60%),
  linear-gradient(180deg, rgb(6 6 10 / .45), rgb(6 6 10 / .8) 50%, rgb(6 6 10 / .97)); }
.auth-pro .auth-art-body { padding: clamp(26px, 4vw, 48px); }
.auth-pro .auth-brand { color: #fff; }
.auth-pro .auth-title { max-width: 520px; text-wrap: balance; }
.auth-pro .auth-perks li { font-size: 14.5px; }
.auth-pro .auth-stats div { transition: transform .2s, background .2s; }
.auth-pro .auth-stats div:hover { transform: translateY(-2px); background: rgb(255 255 255 / .1); }

.auth-pro .auth-panel { position: relative; padding: clamp(24px, 4vw, 52px); background:
  radial-gradient(80% 50% at 100% 0%, var(--accent-soft), transparent 60%),
  radial-gradient(60% 40% at 0% 100%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
  var(--surface); }
.auth-pro .auth-card { max-width: 410px; gap: 18px; }
.auth-pro .auth-min-brand { display: none; }
.auth-pro .auth-head { display: block; }
.auth-pro .auth-head h2 { font-size: 26px; }
.auth-pro .auth-input { height: 52px; }
.auth-pro .auth-caps { display: inline-flex; align-items: center; gap: 4px; color: #f59e0b; }
.auth-pro .auth-caps[hidden] { display: none; }
.auth-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.auth-trust-row span { display: inline-flex; align-items: center; gap: 6px; }
.auth-trust-row span + span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .45; margin-right: 10px; }
.auth-trust-row svg { color: #22c55e; }

@media (max-width: 900px) {
  .auth.auth-pro { grid-template-columns: 1fr; min-height: 0; margin: 4px 0 24px; }
  .auth-pro .auth-art { min-height: 210px; }
  .auth-pro .auth-art-body { justify-content: flex-end; gap: 10px; padding: 20px; }
  .auth-pro .auth-brand, .auth-pro .auth-perks, .auth-pro .auth-stats { display: none; }
  .auth-pro .auth-title { font-size: 26px; margin-top: 8px; }
  .auth-pro .auth-panel { padding: 22px 16px 26px; }
  .auth-pro .auth-head { display: none; }
}
@media (prefers-reduced-motion: reduce) { .auth-pro .auth-mosaic img { transition: none; } }
.auth-pro .auth-tile-empty { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, #15151d), #0c0c12 70%); }
.auth-pro .auth-mosaic span:nth-child(odd) img { filter: saturate(1.1) brightness(.92); }

/* ---------- Sign in / Create account: minimalist centered card ---------- */
.auth.auth-solo { position: relative; display: grid; place-items: center; grid-template-columns: 1fr; min-height: min(680px, calc(100vh - 170px)); margin: 18px 0 40px; padding: 24px 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; isolation: isolate; }
.auth-solo::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 46%; width: min(620px, 92vw); height: 420px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--accent-soft), transparent 72%); filter: blur(20px); pointer-events: none; }
.auth-solo .auth-panel { display: block; width: 100%; max-width: 400px; padding: 0; background: none; }
.auth-solo .auth-card { max-width: none; gap: 18px; padding: 34px 32px 26px; border-radius: 22px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgb(255 255 255 / .04) inset, 0 30px 70px -40px rgb(0 0 0 / .55); animation: auth-in .45s cubic-bezier(.2,.8,.2,1); }
.auth-solo .auth-min-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 4px; font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--text); }
.auth-solo .auth-min-brand img { height: 34px; width: auto; }
.auth-solo .auth-brand-mark { width: 32px; height: 32px; border-radius: 10px; color: #fff; box-shadow: 0 8px 20px -8px var(--accent-glow); }
.auth-solo .auth-brand-mark svg { width: 15px; height: 15px; }
.auth-solo .auth-tabs { padding: 3px; border-radius: 12px; }
.auth-solo .auth-tab { padding: 8px; font-size: 13.5px; font-weight: 600; }
.auth-solo .auth-tab-ink { top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 9px; }
.auth-solo .auth-head { display: block; text-align: center; margin: 4px 0 2px; }
.auth-solo .auth-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.auth-solo .auth-head p { font-size: 13.5px; }
.auth-solo .auth-form { gap: 13px; }
.auth-solo .auth-label { font-size: 12.5px; font-weight: 500; }
.auth-solo .auth-input { height: 46px; border-width: 1px; border-radius: 11px; padding: 0 10px 0 13px; }
.auth-solo .auth-input svg { width: 16px; height: 16px; opacity: .7; }
.auth-solo .auth-input input { font-size: 14.5px; }
.auth-solo .auth-submit { height: 46px; margin-top: 2px; border-radius: 11px; font-size: 14.5px; font-weight: 700; background: var(--accent); box-shadow: 0 10px 24px -14px var(--accent-glow); }
.auth-solo .auth-submit::after { display: none; }
.auth-solo .auth-submit:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 14px 28px -14px var(--accent-glow); }
.auth-solo .auth-meter { gap: 4px; }
.auth-solo .auth-meter i { height: 3px; }
.auth-solo .auth-check { font-size: 12.5px; }
.auth-solo .auth-plan { padding: 11px 13px; border-radius: 11px; border-width: 1px; }
.auth-solo .auth-switch { font-size: 13px; }
.auth-solo .auth-alert { animation: none; border-radius: 10px; font-size: 13px; text-align: center; }
.auth-solo .auth-caps { display: inline-flex; align-items: center; gap: 4px; color: #f59e0b; }
.auth-solo .auth-caps[hidden] { display: none; }
.auth-solo .auth-trust-row { padding-top: 14px; font-size: 11.5px; }
@media (max-width: 520px) {
  .auth.auth-solo { margin: 4px 0 24px; min-height: 0; padding: 8px 0; }
  .auth-solo .auth-card { padding: 26px 18px 20px; border-radius: 18px; }
}

/* Frame skin fix: menu panel and content panel share exactly the same edges; menu is one clean row. */
[data-skin='frame'] .wrap { --gut: 20px; padding-left: var(--gut); padding-right: var(--gut); }
[data-skin='frame'][data-width='full'] .wrap { --gut: clamp(16px, 2.2vw, 40px); }
@media (min-width: 1000px) {
  [data-skin='frame'] .mainnav { margin: 18px calc(-1 * var(--gut)) 0; padding: 10px calc(var(--gut) - 4px); gap: 4px; border-radius: 14px 14px 0 0; border-bottom: 1px solid var(--line); align-items: center; }
  [data-skin='frame'] .main { border-radius: 0 0 14px 14px; }
  [data-skin='frame'] .chips-row { margin: 0 auto; max-width: var(--wrap); }
}
[data-skin='frame'][data-navstyle='icons'] .mainnav a { flex-direction: row; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--muted); }
[data-skin='frame'][data-navstyle='icons'] .nav-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--surface); color: var(--muted); box-shadow: 0 1px 1px rgba(0,0,0,.05); }
[data-skin='frame'][data-navstyle='icons'] .nav-ic svg { width: 15px; height: 15px; }
[data-skin='frame'][data-navstyle='icons'] .mainnav a:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 70%, transparent); }
[data-skin='frame'][data-navstyle='icons'] .mainnav a.active { color: var(--text); font-weight: 600; background: var(--surface); box-shadow: 0 1px 2px rgba(13,19,29,.08); }
[data-skin='frame'][data-navstyle='icons'] .mainnav a.active .nav-ic { background: var(--accent); color: #fff; box-shadow: 0 4px 12px -6px var(--accent); }
[data-skin='frame'] .main { padding-top: 26px; }
[data-skin='frame'] .section-head { align-items: center; margin-bottom: 14px; }
[data-skin='frame'] .section-head h2 { font-size: 26px; }
[data-skin='frame'] .link-more { font-weight: 600; color: var(--muted); }
[data-skin='frame'] .link-more:hover { color: var(--accent); }
@media (min-width: 1000px) { [data-skin='frame'] .mainnav { flex-basis: calc(100% + 2 * var(--gut)); max-width: none; box-sizing: border-box; } }

.cw-row { grid-auto-columns: clamp(220px, 23%, 320px); }