/* 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); }
.section-tools { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.shuffle-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; background: none; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s; }
.shuffle-btn:hover { color: var(--accent); border-color: var(--accent); }
.shuffle-btn svg { transition: transform .4s; }
.shuffle-btn.is-busy svg { transform: rotate(180deg); }
.shuffle-btn:disabled { opacity: .6; cursor: default; }
.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; margin-right: auto; }
  [data-skin='graphite'] .topbar-inner > .icon-btn, [data-skin='graphite'] .topbar-inner > .btn-cta { order: 3; }
  [data-skin='graphite'] .topbar-inner > .icon-btn + .icon-btn, [data-skin='graphite'] .topbar-inner > .icon-btn + .btn-cta { margin-left: -16px; }
  [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; }
}
@media (max-width: 999px) {
  [data-skin='graphite'] .topbar-inner { gap: 6px; height: 64px; }
  [data-skin='graphite'] .topbar-inner .logo { margin-right: 8px; }
  [data-skin='graphite'] .topbar-inner .search { margin-left: auto; }
  [data-skin='graphite'] .topbar-inner .search input { height: 40px; }
  [data-skin='graphite'] .topbar-inner .search button { height: 40px; width: 48px; }
}
@media (max-width: 480px) { [data-skin='graphite'] .search input::placeholder { color: transparent; } }
/* Plain icons (no box), same 46px row height as the search bar so they stay centred on it. */
[data-skin='graphite'] .topbar-inner > .icon-btn:not(.menu-btn) { flex: none; width: 36px; height: 46px; padding: 0; place-items: center; background: none; border: 0; color: var(--muted); transition: color .15s; }
[data-skin='graphite'] .topbar-inner > .icon-btn:not(.menu-btn):hover { color: var(--accent); }
[data-skin='graphite'] .topbar-inner > .icon-btn:not(.menu-btn) svg { display: block; width: 19px; height: 19px; }
@media (max-width: 999px) { [data-skin='graphite'] .topbar-inner > .icon-btn:not(.menu-btn) { width: 34px; height: 40px; } }
[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); }

/* ======================================================================
   Anime sites (vertical = anime): spotlight, poster rows, series pages,
   schedule and news. Built on the skin's variables so every skin works.
   ====================================================================== */
.an-section { margin-top: 36px; }
.main > .an-section:first-child, .main > .an-spot + .an-section { margin-top: 28px; }
.an-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.an-head h2 { margin: 0; font-size: clamp(18px, 2.2vw, 22px); font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.an-head h2::before { content: ''; width: 4px; height: 1.05em; border-radius: 4px; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
.an-more { color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.an-more:hover { color: var(--accent); }
.an-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.an-hl { color: #fbbf24 !important; font-weight: 700; }
.an-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: color-mix(in srgb, var(--text) 80%, transparent); }
.an-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.an-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.an-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 14px; background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); backdrop-filter: blur(8px); transition: transform .15s, background-color .15s, box-shadow .15s; }
.an-btn:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--text) 18%, transparent); }
.an-btn.primary { background: var(--accent); border-color: transparent; color: #fff; box-shadow: 0 10px 24px -10px var(--accent-glow); }
.an-btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }

/* Spotlight carousel */
.an-spot { position: relative; height: clamp(360px, 46vw, 540px); border-radius: calc(var(--radius) + 6px); overflow: hidden; background: var(--surface); isolation: isolate; }
.an-slide { position: absolute; inset: 0; display: flex; align-items: flex-end; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.an-slide.on { opacity: 1; visibility: visible; }
.an-slide::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--cc, var(--surface)) var(--art) center 30% / cover no-repeat; transform: scale(1.04); transition: transform 8s ease-out; }
.an-slide.on::before { transform: scale(1); }
.an-slide[data-nobanner]::before { filter: blur(26px) saturate(1.3); transform: scale(1.3); }
.an-slide::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 32%, color-mix(in srgb, var(--bg) 20%, transparent) 70%, transparent 100%), linear-gradient(0deg, var(--bg) 0%, transparent 45%); }
.an-slide-inner { position: relative; max-width: min(620px, 62%); padding: clamp(22px, 4vw, 48px); }
.an-spot-rank { display: inline-block; color: var(--accent); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.an-slide h2 { margin: 0 0 12px; font-size: clamp(24px, 3.6vw, 44px); line-height: 1.08; font-weight: 900; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.an-slide p { margin: 14px 0 0; color: color-mix(in srgb, var(--text) 72%, transparent); font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.an-slide-cover { position: absolute; right: clamp(20px, 5vw, 64px); bottom: 50%; transform: translateY(50%) rotate(2deg); width: clamp(130px, 15vw, 210px); aspect-ratio: 2/3; object-fit: cover; border-radius: var(--radius); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
.an-dots { position: absolute; right: 22px; bottom: 18px; display: flex; gap: 6px; z-index: 2; }
.an-dots button { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: color-mix(in srgb, var(--text) 35%, transparent); cursor: pointer; transition: width .25s, background-color .25s; }
.an-dots button.on { width: 26px; background: var(--accent); }

/* Poster cards & rows */
.an-row { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(132px, 15vw, 186px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.an-row > * { scroll-snap-align: start; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 22px 14px; }
.an-card { display: block; color: inherit; min-width: 0; }
.an-poster { position: relative; aspect-ratio: 2/3; border-radius: var(--radius); overflow: hidden; background: var(--cc, var(--surface-2)); box-shadow: 0 10px 24px -16px rgba(0,0,0,.7); }
.an-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .35s; }
.an-card:hover .an-poster img { transform: scale(1.06); filter: brightness(.55); }
.an-hover-play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .2s; }
.an-hover-play svg { width: 44px; height: 44px; padding: 13px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 8px 24px -6px var(--accent-glow); }
.an-card:hover .an-hover-play { opacity: 1; }
.an-score { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 8px; font-size: 11.5px; font-weight: 800; color: #fbbf24; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); }
.an-rank { position: absolute; top: 6px; right: 8px; font-size: 26px; font-weight: 900; line-height: 1; color: #fff; -webkit-text-stroke: 1px rgba(0,0,0,.35); text-shadow: 0 2px 10px rgba(0,0,0,.6); font-style: italic; }
.an-badges { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.an-badges span { padding: 2px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; color: #fff; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); }
.an-badges span:last-child:not(:first-child) { background: var(--accent); }
.an-card-body { padding: 9px 2px 0; }
.an-card-body h3 { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.an-card:hover h3 { color: var(--accent); }
.an-card-body p { margin: 4px 0 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Genres */
.an-genres { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.an-genres a { position: relative; padding: 16px 14px; border-radius: var(--radius-sm); font-weight: 800; font-size: 14px; color: #fff; overflow: hidden; background: linear-gradient(135deg, hsl(var(--h) 70% 45%), hsl(calc(var(--h) + 40) 70% 30%)); transition: transform .15s, box-shadow .15s; }
.an-genres a:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px hsl(var(--h) 70% 40%); }

/* News */
.an-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.an-news-grid:has(.an-news.big) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.an-news-grid.wide:has(.an-news.big) { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.an-news { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); color: inherit; transition: transform .15s, border-color .15s; min-width: 0; }
.an-news:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.an-news.big { grid-column: span 2; grid-row: span 2; }
.an-news-img { aspect-ratio: 16/9; background: var(--surface-2); overflow: hidden; }
.an-news.big .an-news-img { aspect-ratio: 16/8; }
.an-news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.an-news:hover .an-news-img img { transform: scale(1.04); }
.an-news-ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--accent-soft), transparent); }
.an-news-body { padding: 12px 14px 14px; display: grid; gap: 6px; }
.an-news-src { font-size: 11.5px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.an-news h3 { margin: 0; font-size: 14.5px; line-height: 1.35; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.an-news.big h3 { font-size: clamp(17px, 2vw, 22px); }
.an-news p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.an-news-list { display: grid; gap: 12px; }
.an-news-list .an-news { flex-direction: row; }
.an-news-list .an-news-img { flex: 0 0 110px; aspect-ratio: 4/3; }
.an-news-list .an-news-body { padding: 8px 10px; }
.an-news-list h3 { font-size: 13px; }

/* Mini schedule on home */
.an-sched-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.an-sched-mini a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); color: inherit; }
.an-sched-mini a:hover { border-color: var(--accent); }
.an-sched-mini strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-sched-time { font-weight: 800; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Browse */
.an-browse-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.an-browse-head h1 { margin: 0; font-size: clamp(22px, 3vw, 30px); font-weight: 900; letter-spacing: -.02em; }
.an-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
.an-filters select { height: 38px; padding: 0 32px 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; color: var(--text); font: inherit; font-size: 13px; appearance: none; cursor: pointer; }
.an-sorts { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); margin-left: auto; }
.an-sorts a { padding: 6px 12px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--muted); }
.an-sorts a:hover { color: var(--text); }
.an-sorts a.on { background: var(--accent); color: #fff; }

/* Series page */
/* Full-bleed: the negative margin reaches the viewport edges; padding of 50vw - 50% puts the content back on the page grid (scrollbar included). */
.an-hero { position: relative; margin: -24px calc(50% - 50vw) 0; padding: 0 calc(50vw - 50%); isolation: isolate; overflow: hidden; }
.an-hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--art) center 25% / cover no-repeat; opacity: .55; }
.an-hero[data-nobanner]::before { filter: blur(40px) saturate(1.4); transform: scale(1.2); opacity: .45; }
.an-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--bg) 4%, color-mix(in srgb, var(--bg) 70%, transparent) 55%, color-mix(in srgb, var(--bg) 40%, transparent)); }
.an-hero-inner { display: grid; grid-template-columns: clamp(150px, 18vw, 230px) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: end; padding: clamp(40px, 8vw, 110px) 0 28px; }
.an-hero-cover { width: 100%; height: auto; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--radius); box-shadow: 0 30px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); }
.an-hero-text .crumbs { margin-bottom: 10px; }
.an-hero h1 { margin: 0; font-size: clamp(24px, 3.8vw, 42px); line-height: 1.08; font-weight: 900; letter-spacing: -.02em; }
.an-alt { margin: 6px 0 12px; color: var(--muted); font-size: 13.5px; }
.an-credits { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--text); font-weight: 600; }
.an-credits small { color: var(--muted); font-weight: 500; margin-right: 4px; }
.an-lang { margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-2); }
.an-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.an-tags a { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.an-tags a:hover { border-color: var(--accent); color: var(--accent); }
.an-synopsis { margin: 14px 0 0; max-width: 820px; font-size: 14px; line-height: 1.7; color: color-mix(in srgb, var(--text) 78%, transparent); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.an-synopsis.open { -webkit-line-clamp: unset; display: block; }
.an-more-btn { margin-top: 4px; background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.an-status.s-releasing { color: #34d399; font-weight: 700; }
.an-status.s-not_yet_released { color: #60a5fa; font-weight: 700; }
.an-countdown { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 14px; border-radius: 12px; font-size: 13px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.an-countdown b { font-variant-numeric: tabular-nums; color: var(--accent); }
.an-detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; margin-top: 26px; align-items: start; }
.an-main > :first-child { margin-top: 0; }
.an-player { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: #000 var(--thumb) center / cover no-repeat; cursor: pointer; box-shadow: var(--shadow); }
.an-player::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,.15) 60%); transition: background-color .2s; }
.an-player:hover::before { background-color: rgba(0,0,0,.2); }
.an-player-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent), 0 16px 40px -10px var(--accent-glow); transition: transform .2s; }
.an-player-btn svg { width: 30px; height: 30px; margin-left: 4px; }
.an-player:hover .an-player-btn { transform: translate(-50%, -50%) scale(1.07); }
.an-player-label { position: absolute; left: 18px; bottom: 14px; right: 18px; color: #fff; font-weight: 700; font-size: 15px; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.an-player.playing { cursor: default; }
.an-player.playing::before { display: none; }
.an-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.an-official { margin: 8px 2px 0; }
.an-eps { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.an-ep { display: grid; gap: 6px; color: inherit; }
.an-ep-thumb { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-sm); background: var(--surface-2) var(--thumb) center / cover no-repeat; overflow: hidden; }
.an-ep-thumb b { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.75); color: #fff; font-size: 12px; }
.an-ep.on .an-ep-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.an-ep.on .an-ep-thumb b, .an-ep:hover .an-ep-thumb b { background: var(--accent); }
.an-ep-title { font-size: 12.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.an-where { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.an-where a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); color: inherit; font-size: 13.5px; }
.an-where a:hover { border-color: var(--accent); color: var(--accent); }
.an-side { display: grid; gap: 16px; position: sticky; top: 90px; }
.an-facts { padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.an-facts h3 { margin: 0 0 12px; font-size: 15px; font-weight: 800; }
.an-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0 0 12px; font-size: 13px; }
.an-facts dt { color: var(--muted); }
.an-facts dd { margin: 0; font-weight: 600; text-align: right; }
.an-link { display: flex; align-items: center; gap: 7px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--muted); }
.an-link:hover { color: var(--accent); }

/* Schedule page */
.an-sched-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; }
.an-sched-days button { flex: none; display: grid; gap: 2px; min-width: 92px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: center; }
.an-sched-days button small { color: var(--muted); font-size: 11.5px; }
.an-sched-days button.on { background: var(--accent); border-color: transparent; color: #fff; }
.an-sched-days button.on small { color: rgba(255,255,255,.85); }
.an-sched-list { display: grid; gap: 8px; }
.an-sched-item { display: grid; grid-template-columns: 64px 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 14px 8px 10px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); color: inherit; }
.an-sched-item:hover { border-color: var(--accent); }
.an-sched-item img { width: 44px; aspect-ratio: 2/3; object-fit: cover; border-radius: 6px; }
.an-sched-text { display: grid; gap: 2px; min-width: 0; }
.an-sched-text strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-sched-text small { color: var(--muted); font-size: 12px; }

/* Article page */
.an-article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.an-article { max-width: 780px; }
.an-article h1 { margin: 10px 0 12px; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.15; font-weight: 900; letter-spacing: -.02em; }
.an-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.an-article-meta strong { color: var(--accent); }
.an-article-img { width: 100%; border-radius: var(--radius); margin-bottom: 18px; background: var(--surface-2); }
.an-article-lead { font-size: 17px; line-height: 1.75; margin: 0 0 22px; color: color-mix(in srgb, var(--text) 88%, transparent); }

@media (max-width: 1000px) {
  .an-detail, .an-article-wrap { grid-template-columns: 1fr; }
  .an-side { position: static; }
  .an-news-grid:has(.an-news.big) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .an-spot { height: auto; min-height: 420px; border-radius: var(--radius); }
  .an-slide-inner { max-width: 100%; padding: 22px 18px 44px; }
  .an-slide::after { background: linear-gradient(0deg, var(--bg) 10%, color-mix(in srgb, var(--bg) 70%, transparent) 60%, color-mix(in srgb, var(--bg) 30%, transparent)); }
  .an-slide-cover { display: none; }
  .an-slide p { -webkit-line-clamp: 2; }
  .an-btn { height: 40px; padding: 0 16px; font-size: 13px; }
  .an-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
  .an-hero-inner { grid-template-columns: 110px minmax(0, 1fr); align-items: start; padding-top: 28px; }
  .an-hero h1 { font-size: 22px; }
  .an-news-grid:has(.an-news.big), .an-news-grid { grid-template-columns: 1fr; }
  .an-news.big { grid-column: auto; grid-row: auto; }
  .an-sorts { margin-left: 0; width: 100%; overflow-x: auto; }
  .an-sched-item { grid-template-columns: 52px 36px minmax(0, 1fr) auto; gap: 10px; }
  .an-sched-item img { width: 36px; }
}
@media (max-width: 420px) { .an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ======================================================================
   Anime templates: Sakura Bloom · Neo Tokyo · Manga Ink
   Full skins (header to footer) with extra styling for the anime pages.
   ====================================================================== */

/* ---------------------------------------------------------------------
   SAKURA BLOOM — soft pink paper, glass header, framed posters, petals
   --------------------------------------------------------------------- */
[data-skin='sakura'] { --radius: 22px; --radius-sm: 16px; --sk-2: #a78bfa; }
[data-theme='light'][data-skin='sakura'] { --bg: #fff6f9; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #ffe6ef; --line: rgba(219,39,119,.13); --text: #3a1a2c; --muted: #97677f; --shadow: 0 18px 40px -24px rgba(219,39,119,.45); color-scheme: light; }
:root:not([data-theme='light'])[data-skin='sakura'] { --bg: #150a12; --bg-2: #1c0e18; --surface: #241320; --surface-2: #33192d; --line: rgba(249,168,212,.14); --text: #fff1f7; --muted: #c99bb3; }
[data-skin='sakura'] body { background: radial-gradient(700px 420px at 100% -5%, color-mix(in srgb, var(--sk-2) 22%, transparent), transparent 70%), radial-gradient(800px 460px at -5% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), var(--bg); background-attachment: fixed; }
[data-skin='sakura'] .topbar { background: color-mix(in srgb, var(--bg-2) 72%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line); }
[data-skin='sakura'] .logo-mark { border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--sk-2)); box-shadow: 0 6px 16px -6px var(--accent); }
[data-skin='sakura'] .logo-word { background: linear-gradient(90deg, var(--accent), var(--sk-2)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
[data-skin='sakura'] .mainnav a { border-radius: 999px; }
[data-skin='sakura'] .mainnav a.active, [data-skin='sakura'][data-navstyle='icons'] .mainnav a.active .nav-ic { background: linear-gradient(135deg, var(--accent), var(--sk-2)); color: #fff; }
[data-skin='sakura'] .chip { border-radius: 999px; background: var(--surface); border-color: var(--line); }
[data-skin='sakura'] .chip:hover { background: var(--accent); color: #fff; border-color: transparent; }
[data-skin='sakura'] .search input { border-radius: 999px; background: var(--surface); }
[data-skin='sakura'] .footer { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 40%, transparent); }
/* Anime pages */
[data-skin='sakura'] .an-head h2::before { content: '✿'; width: auto; height: auto; background: none; box-shadow: none; color: var(--accent); font-size: .9em; }
[data-skin='sakura'] .an-spot { border-radius: 30px; box-shadow: 0 30px 60px -36px var(--accent), inset 0 0 0 1px var(--line); }
[data-skin='sakura'] .an-spot::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5; background-size: 340px 340px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23f9a8d4'%3E%3Cpath d='M30 20c6-8 16-6 16 2s-10 12-16 6c-4 4-10 0-6-4 2-2 4-3 6-4z' opacity='.8'/%3E%3Cpath d='M150 60c5-7 14-5 14 2s-9 10-14 5c-3 4-9 0-5-3 1-2 3-3 5-4z' opacity='.6'/%3E%3Cpath d='M90 150c6-8 16-6 16 2s-10 12-16 6c-4 4-10 0-6-4 2-2 4-3 6-4z' opacity='.7'/%3E%3Cpath d='M190 170c4-6 12-4 12 2s-8 9-12 4c-3 3-8 0-4-3 1-1 2-2 4-3z' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
  animation: sk-petals 22s linear infinite; }
@keyframes sk-petals { from { background-position: 0 -340px; } to { background-position: 340px 340px; } }
[data-skin='sakura'] .an-spot-rank { background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 4px 12px; border-radius: 999px; }
[data-skin='sakura'] .an-slide-cover { border-radius: 24px; border: 6px solid var(--bg-2); transform: translateY(50%) rotate(3deg); }
[data-skin='sakura'] .an-btn { border-radius: 999px; }
[data-skin='sakura'] .an-btn.primary { background: linear-gradient(135deg, var(--accent), var(--sk-2)); }
[data-skin='sakura'] .an-poster { border-radius: 20px; border: 5px solid var(--bg-2); box-shadow: var(--shadow); transition: transform .35s cubic-bezier(.2,.8,.2,1.25), box-shadow .3s; }
[data-skin='sakura'] .an-card:hover .an-poster { transform: translateY(-5px) rotate(-1.2deg); box-shadow: 0 24px 40px -22px var(--accent); }
[data-skin='sakura'] .an-card:hover .an-poster img { filter: brightness(.8); transform: scale(1.04); }
[data-skin='sakura'] .an-badges span:last-child:not(:first-child), [data-skin='sakura'] .an-hover-play svg { background: linear-gradient(135deg, var(--accent), var(--sk-2)); }
[data-skin='sakura'] .an-score { border-radius: 999px; background: rgba(255,255,255,.92); color: #db2777; }
[data-skin='sakura'] .an-rank { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 2px 0 var(--accent), 0 6px 14px rgba(219,39,119,.6); }
[data-skin='sakura'] .an-genres a { color: var(--text); background: linear-gradient(135deg, hsl(var(--h) 85% 92%), hsl(calc(var(--h) + 40) 85% 86%)); border-radius: 18px; }
:root:not([data-theme='light'])[data-skin='sakura'] .an-genres a { color: #fff; background: linear-gradient(135deg, hsl(var(--h) 45% 30%), hsl(calc(var(--h) + 40) 45% 22%)); }
[data-skin='sakura'] .an-news, [data-skin='sakura'] .an-facts, [data-skin='sakura'] .an-sched-item, [data-skin='sakura'] .an-sched-mini a, [data-skin='sakura'] .an-where a { border-radius: 20px; box-shadow: var(--shadow); }
[data-skin='sakura'] .an-sorts, [data-skin='sakura'] .an-sorts a, [data-skin='sakura'] .an-filters select, [data-skin='sakura'] .an-tags a, [data-skin='sakura'] .an-sched-days button { border-radius: 999px; }
[data-skin='sakura'] .an-sorts a.on, [data-skin='sakura'] .an-sched-days button.on { background: linear-gradient(135deg, var(--accent), var(--sk-2)); }
[data-skin='sakura'] .an-hero-cover { border-radius: 24px; border: 6px solid var(--bg-2); transform: rotate(-2deg); }
[data-skin='sakura'] .an-player { border-radius: 26px; }
[data-skin='sakura'] .an-player-btn { background: linear-gradient(135deg, var(--accent), var(--sk-2)); }

/* ---------------------------------------------------------------------
   NEO TOKYO — cyberpunk: neon grid, cut corners, scanlines, glitch
   --------------------------------------------------------------------- */
[data-skin='neotokyo'] { --radius: 4px; --radius-sm: 3px; --neo-2: #f472b6; --neo-cut: 14px; --font-head: 'Chakra Petch', Inter, sans-serif; }
:root:not([data-theme='light'])[data-skin='neotokyo'] { --bg: #05050b; --bg-2: #090914; --surface: #0e0e1c; --surface-2: #161629; --line: rgba(34,211,238,.16); --text: #e6f6ff; --muted: #8398b3; }
[data-theme='light'][data-skin='neotokyo'] { --bg: #eef3f8; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #e2eaf3; --line: rgba(8,145,178,.18); --text: #0b1220; --muted: #5b6b80; }
:root:not([data-theme='light'])[data-skin='neotokyo'] body { background:
    linear-gradient(rgba(34,211,238,.05) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(34,211,238,.05) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(900px 500px at 100% 0%, rgba(244,114,182,.14), transparent 60%),
    radial-gradient(900px 500px at 0% 10%, rgba(34,211,238,.14), transparent 60%), var(--bg); background-attachment: fixed; }
[data-skin='neotokyo'] h1, [data-skin='neotokyo'] h2, [data-skin='neotokyo'] h3, [data-skin='neotokyo'] .logo-word, [data-skin='neotokyo'] .mainnav a, [data-skin='neotokyo'] .an-btn, [data-skin='neotokyo'] .an-spot-rank, [data-skin='neotokyo'] .an-sorts a { font-family: var(--font-head); }
[data-skin='neotokyo'] .topbar { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, var(--accent), var(--neo-2), transparent) 1; }
[data-skin='neotokyo'] .logo-mark { border-radius: 2px; background: var(--accent); box-shadow: 0 0 18px var(--accent); clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
[data-skin='neotokyo'] .logo-word { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
[data-skin='neotokyo'] .mainnav a { text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; }
[data-skin='neotokyo'] .mainnav a.active, [data-skin='neotokyo'][data-navstyle='icons'] .mainnav a.active .nav-ic { background: var(--accent); color: #041016; box-shadow: 0 0 16px -2px var(--accent); }
[data-skin='neotokyo'] .chip { border-radius: 0; background: transparent; border: 1px solid var(--line); text-transform: uppercase; font-size: 11.5px; letter-spacing: .06em; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
[data-skin='neotokyo'] .chip:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border-color: var(--accent); }
[data-skin='neotokyo'] .search input { border-radius: 2px; border: 1px solid var(--line); }
[data-skin='neotokyo'] .search input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 20px -4px var(--accent); }
[data-skin='neotokyo'] .footer { border-top: 1px solid var(--line); }
/* Anime pages */
[data-skin='neotokyo'] .an-head h2 { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
[data-skin='neotokyo'] .an-head h2::before { width: 10px; height: 10px; border-radius: 0; transform: rotate(45deg); background: var(--accent); box-shadow: 0 0 12px var(--accent); }
[data-skin='neotokyo'] .an-head { border-bottom: 1px solid var(--line); padding-bottom: 10px; position: relative; }
[data-skin='neotokyo'] .an-head::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 120px; height: 2px; background: linear-gradient(90deg, var(--accent), var(--neo-2)); box-shadow: 0 0 10px var(--accent); }
[data-skin='neotokyo'] .an-more { text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; color: var(--accent); }
[data-skin='neotokyo'] .an-spot { border-radius: 0; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 0 40px -18px var(--accent), inset 0 0 60px -30px var(--neo-2); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }
[data-skin='neotokyo'] .an-spot::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
[data-skin='neotokyo'] .an-spot-rank { color: var(--accent); font-weight: 700; }
[data-skin='neotokyo'] .an-spot-rank::before { content: '// '; color: var(--neo-2); }
[data-skin='neotokyo'] .an-slide h2 { -webkit-line-clamp: 3; font-size: clamp(22px, 3.1vw, 40px); text-transform: uppercase; letter-spacing: .02em; text-shadow: 2px 0 0 color-mix(in srgb, var(--neo-2) 70%, transparent), -2px 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
[data-skin='neotokyo'] .an-slide.on h2 { animation: neo-glitch 4.5s steps(1) infinite; }
@keyframes neo-glitch { 0%, 92%, 100% { transform: none; clip-path: none; } 93% { transform: translate(3px, -1px); clip-path: inset(10% 0 55% 0); } 95% { transform: translate(-3px, 1px); clip-path: inset(60% 0 8% 0); } 97% { transform: translate(1px, 0); clip-path: none; } }
[data-skin='neotokyo'] .an-slide-cover { border-radius: 0; transform: translateY(50%); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); box-shadow: none; outline: 1px solid var(--accent); }
[data-skin='neotokyo'] .an-dots button { border-radius: 0; height: 4px; }
[data-skin='neotokyo'] .an-btn { border-radius: 0; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
[data-skin='neotokyo'] .an-btn.primary { background: var(--accent); color: #041016; box-shadow: 0 0 24px -4px var(--accent); }
[data-skin='neotokyo'] .an-poster { border-radius: 0; clip-path: polygon(0 0, calc(100% - var(--neo-cut)) 0, 100% var(--neo-cut), 100% 100%, 0 100%); outline: 1px solid var(--line); outline-offset: -1px; }
[data-skin='neotokyo'] .an-card:hover .an-poster { outline-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 26px -6px var(--accent); }
[data-skin='neotokyo'] .an-card:hover .an-poster img { filter: brightness(.5) saturate(1.3) hue-rotate(-10deg); }
[data-skin='neotokyo'] .an-card:hover h3 { color: var(--accent); text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }
[data-skin='neotokyo'] .an-hover-play svg { border-radius: 0; background: var(--accent); color: #041016; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
[data-skin='neotokyo'] .an-score { border-radius: 0; background: rgba(4,8,16,.85); color: var(--accent); border-left: 2px solid var(--accent); font-family: var(--font-head); }
[data-skin='neotokyo'] .an-badges span { border-radius: 0; font-family: var(--font-head); letter-spacing: .06em; }
[data-skin='neotokyo'] .an-badges span:last-child:not(:first-child) { background: var(--neo-2); color: #1a0510; }
[data-skin='neotokyo'] .an-rank { font-family: var(--font-head); font-style: normal; color: transparent; -webkit-text-stroke: 1.5px var(--accent); text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); right: 18px; }
[data-skin='neotokyo'] .an-genres a { border-radius: 0; background: var(--surface); color: hsl(var(--h) 90% 70%); border: 1px solid hsl(var(--h) 90% 60% / .35); text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-head); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
[data-skin='neotokyo'] .an-genres a:hover { background: hsl(var(--h) 90% 60% / .12); box-shadow: inset 0 0 20px hsl(var(--h) 90% 60% / .25); text-shadow: 0 0 10px hsl(var(--h) 90% 60%); }
[data-theme='light'][data-skin='neotokyo'] .an-genres a { color: hsl(var(--h) 80% 35%); }
[data-skin='neotokyo'] .an-news, [data-skin='neotokyo'] .an-facts, [data-skin='neotokyo'] .an-sched-item, [data-skin='neotokyo'] .an-sched-mini a, [data-skin='neotokyo'] .an-where a { border-radius: 0; border-top: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); }
[data-skin='neotokyo'] .an-news:hover { box-shadow: 0 0 24px -8px var(--accent); }
[data-skin='neotokyo'] .an-news-src, [data-skin='neotokyo'] .an-sched-time { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; color: var(--accent); letter-spacing: .02em; }
[data-skin='neotokyo'] .an-pill { border-radius: 0; background: color-mix(in srgb, var(--neo-2) 18%, transparent); color: var(--neo-2); font-family: var(--font-head); }
[data-skin='neotokyo'] .an-sorts, [data-skin='neotokyo'] .an-sorts a, [data-skin='neotokyo'] .an-filters select, [data-skin='neotokyo'] .an-tags a, [data-skin='neotokyo'] .an-sched-days button, [data-skin='neotokyo'] .an-countdown { border-radius: 0; }
[data-skin='neotokyo'] .an-sorts a.on, [data-skin='neotokyo'] .an-sched-days button.on { background: var(--accent); color: #041016; box-shadow: 0 0 16px -4px var(--accent); }
[data-skin='neotokyo'] .an-hero-cover { border-radius: 0; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
[data-skin='neotokyo'] .an-hero h1 { text-transform: uppercase; letter-spacing: .02em; text-shadow: 2px 0 0 color-mix(in srgb, var(--neo-2) 60%, transparent), -2px 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
[data-skin='neotokyo'] .an-player { border-radius: 0; outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 0 40px -16px var(--accent); }
[data-skin='neotokyo'] .an-player-btn { border-radius: 0; color: #041016; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); box-shadow: none; }
[data-skin='neotokyo'] .an-countdown b { font-family: ui-monospace, Menlo, monospace; text-shadow: 0 0 10px var(--accent); }
@media (prefers-reduced-motion: reduce) { [data-skin='neotokyo'] .an-slide.on h2 { animation: none; } [data-skin='sakura'] .an-spot::after { animation: none; } }

/* ---------------------------------------------------------------------
   MANGA INK — paper, halftone, thick ink panels, hard shadows, Bangers
   --------------------------------------------------------------------- */
[data-skin='manga'] { --radius: 3px; --radius-sm: 2px; --ink: #111111; --paper: #fbf8ef; --dot: rgba(17,17,17,.09); --tone: #ffd400; --font-head: 'Bangers', 'Impact', sans-serif; }
[data-theme='light'][data-skin='manga'] { --bg: #f5f1e4; --bg-2: #fbf8ef; --surface: #fffdf6; --surface-2: #ece5d1; --line: rgba(17,17,17,.2); --text: #111111; --muted: #56524a; --shadow: 5px 5px 0 var(--ink); color-scheme: light; }
:root:not([data-theme='light'])[data-skin='manga'] { --ink: #f3eee0; --paper: #141414; --dot: rgba(243,238,224,.07); --bg: #101010; --bg-2: #161616; --surface: #1b1b1b; --surface-2: #262626; --line: rgba(243,238,224,.22); --text: #f3eee0; --muted: #b4ad9c; --shadow: 5px 5px 0 var(--ink); }
[data-skin='manga'] body { background: radial-gradient(var(--dot) 1.1px, transparent 1.5px) 0 0 / 12px 12px, var(--bg); }
[data-skin='manga'] h1, [data-skin='manga'] h2, [data-skin='manga'] .logo-word, [data-skin='manga'] .an-card-body h3, [data-skin='manga'] .an-news h3, [data-skin='manga'] .an-spot-rank, [data-skin='manga'] .an-btn, [data-skin='manga'] .an-rank, [data-skin='manga'] .an-sorts a { font-family: var(--font-head); letter-spacing: .04em; font-weight: 400; }
[data-skin='manga'] .an-card-body h3 { font-size: 16px; line-height: 1.1; }
[data-skin='manga'] .an-news h3 { font-size: 18px; line-height: 1.1; }
[data-skin='manga'] .topbar { background: var(--bg-2); border-bottom: 3px solid var(--ink); backdrop-filter: none; }
[data-skin='manga'] .logo-mark { border-radius: 2px; background: var(--ink); color: var(--paper); transform: rotate(-6deg); box-shadow: 3px 3px 0 var(--accent); }
[data-skin='manga'] .logo-word { font-size: 1.35em; color: var(--text); text-shadow: 2px 2px 0 var(--accent); }
[data-skin='manga'] .mainnav a { font-weight: 800; }
[data-skin='manga'] .mainnav a.active, [data-skin='manga'][data-navstyle='icons'] .mainnav a.active .nav-ic { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--accent); border-radius: 2px; }
[data-skin='manga'] .chip { border-radius: 2px; background: var(--surface); border: 2px solid var(--ink); color: var(--text); font-weight: 800; box-shadow: 2px 2px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
[data-skin='manga'] .chip:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); background: var(--tone); color: #111; }
[data-skin='manga'] .search input { border-radius: 2px; border: 2px solid var(--ink); background: var(--surface); }
[data-skin='manga'] .footer { border-top: 3px solid var(--ink); background: var(--bg-2); }
/* Anime pages */
[data-skin='manga'] .an-head h2 { font-size: clamp(24px, 3vw, 32px); }
[data-skin='manga'] .an-head h2::before { width: 16px; height: 16px; border-radius: 2px; background: var(--accent); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-8deg); }
[data-skin='manga'] .an-more { color: var(--text); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
[data-skin='manga'] .an-spot { border-radius: 2px; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); background: var(--surface); }
[data-skin='manga'] .an-slide::before { filter: grayscale(.35) contrast(1.1); }
[data-skin='manga'] .an-slide::after { background: linear-gradient(90deg, var(--bg-2) 0%, color-mix(in srgb, var(--bg-2) 92%, transparent) 36%, color-mix(in srgb, var(--bg-2) 25%, transparent) 70%, transparent), radial-gradient(var(--dot) 1.3px, transparent 1.7px) 0 0 / 8px 8px; }
/* Speech-bubble spotlight tag */
[data-skin='manga'] .an-spot-rank { position: relative; background: var(--surface); color: var(--text); border: 2.5px solid var(--ink); border-radius: 18px; padding: 4px 14px 2px; font-size: 16px; margin-bottom: 16px; }
[data-skin='manga'] .an-spot-rank::after { content: ''; position: absolute; left: 20px; bottom: -11px; width: 14px; height: 14px; background: var(--surface); border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: skewX(-30deg) rotate(45deg); }
[data-skin='manga'] .an-slide h2 { font-size: clamp(30px, 4.6vw, 58px); line-height: .95; text-shadow: 3px 3px 0 var(--accent); }
[data-skin='manga'] .an-slide-cover { border-radius: 2px; border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); transform: translateY(50%) rotate(4deg); }
[data-skin='manga'] .an-dots button { border-radius: 2px; border: 2px solid var(--ink); width: 12px; height: 12px; background: var(--surface); }
[data-skin='manga'] .an-dots button.on { width: 28px; background: var(--accent); }
[data-skin='manga'] .an-btn { border-radius: 2px; border: 2.5px solid var(--ink); background: var(--surface); color: var(--text); box-shadow: 4px 4px 0 var(--ink); font-size: 17px; backdrop-filter: none; transition: transform .12s, box-shadow .12s; }
[data-skin='manga'] .an-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); background: var(--tone); color: #111; }
[data-skin='manga'] .an-btn.primary { background: var(--accent); color: #fff; }
[data-skin='manga'] .an-poster { border-radius: 2px; border: 2.5px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
[data-skin='manga'] .an-card:hover .an-poster { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--accent); }
[data-skin='manga'] .an-card:hover .an-poster img { transform: scale(1.03); filter: grayscale(1) contrast(1.2) brightness(.7); }
[data-skin='manga'] .an-card:hover h3 { color: var(--accent); }
[data-skin='manga'] .an-hover-play svg { border-radius: 50%; background: var(--tone); color: #111; border: 2.5px solid #111; box-shadow: 3px 3px 0 #111; }
/* Starburst score badge */
[data-skin='manga'] .an-score { top: 4px; left: 4px; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 0; background: var(--tone); color: #111; font-family: var(--font-head); font-size: 14px; letter-spacing: .03em;
  clip-path: polygon(50% 0, 61% 18%, 82% 10%, 78% 32%, 100% 38%, 84% 54%, 96% 74%, 74% 74%, 70% 96%, 52% 82%, 34% 100%, 28% 78%, 6% 80%, 16% 60%, 0 44%, 20% 34%, 12% 12%, 34% 18%); transform: rotate(-8deg); }
[data-skin='manga'] .an-score svg { display: none; }
[data-skin='manga'] .an-badges span { border-radius: 2px; background: #111; font-weight: 800; }
[data-skin='manga'] .an-badges span:last-child:not(:first-child) { background: var(--accent); }
[data-skin='manga'] .an-rank { font-size: 38px; font-style: normal; color: #fff; -webkit-text-stroke: 2px #111; text-shadow: 3px 3px 0 #111; }
[data-skin='manga'] .an-card-body p { font-weight: 600; }
[data-skin='manga'] .an-genres a { border-radius: 2px; border: 2.5px solid var(--ink); color: #111; font-family: var(--font-head); font-size: 20px; letter-spacing: .04em; font-weight: 400; box-shadow: 4px 4px 0 var(--ink);
  background: radial-gradient(rgba(0,0,0,.18) 1.2px, transparent 1.6px) 0 0 / 7px 7px, hsl(var(--h) 90% 72%); }
[data-skin='manga'] .an-genres a:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
[data-skin='manga'] .an-news, [data-skin='manga'] .an-facts, [data-skin='manga'] .an-sched-item, [data-skin='manga'] .an-sched-mini a, [data-skin='manga'] .an-where a { border-radius: 2px; border: 2.5px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
[data-skin='manga'] .an-news:hover, [data-skin='manga'] .an-sched-item:hover, [data-skin='manga'] .an-where a:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--accent); border-color: var(--ink); }
[data-skin='manga'] .an-news-img { border-bottom: 2.5px solid var(--ink); }
[data-skin='manga'] .an-news-img img { filter: contrast(1.05); }
[data-skin='manga'] .an-news-src { color: var(--accent); font-weight: 800; }
[data-skin='manga'] .an-pill { border-radius: 2px; background: var(--tone); color: #111; border: 1.5px solid #111; }
[data-skin='manga'] .an-sorts { border: 2.5px solid var(--ink); border-radius: 2px; box-shadow: 3px 3px 0 var(--ink); }
[data-skin='manga'] .an-sorts a { border-radius: 1px; font-size: 16px; color: var(--text); }
[data-skin='manga'] .an-sorts a.on, [data-skin='manga'] .an-sched-days button.on { background: var(--ink); color: var(--paper); }
[data-skin='manga'] .an-filters select, [data-skin='manga'] .an-sched-days button, [data-skin='manga'] .an-tags a { border-radius: 2px; border: 2px solid var(--ink); }
[data-skin='manga'] .an-hero::before { filter: grayscale(.6) contrast(1.1); }
[data-skin='manga'] .an-hero::after { background: linear-gradient(0deg, var(--bg) 4%, color-mix(in srgb, var(--bg) 78%, transparent) 55%, color-mix(in srgb, var(--bg) 45%, transparent)), radial-gradient(var(--dot) 1.3px, transparent 1.7px) 0 0 / 8px 8px; }
[data-skin='manga'] .an-hero-cover { border-radius: 2px; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); transform: rotate(-2deg); }
[data-skin='manga'] .an-hero h1 { font-size: clamp(32px, 4.8vw, 56px); line-height: .95; text-shadow: 3px 3px 0 var(--accent); }
[data-skin='manga'] .an-player { border-radius: 2px; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
[data-skin='manga'] .an-player-btn { background: var(--tone); color: #111; border: 3px solid #111; box-shadow: 4px 4px 0 #111; }
[data-skin='manga'] .an-countdown { border-radius: 2px; border: 2.5px solid var(--ink); background: var(--tone); color: #111; box-shadow: 4px 4px 0 var(--ink); }
[data-skin='manga'] .an-countdown b { color: #111; }
[data-skin='manga'] .an-article h1 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1; }
[data-skin='manga'] .an-article-img { border: 3px solid var(--ink); border-radius: 2px; box-shadow: 8px 8px 0 var(--ink); }

/* ======================================================================
   News sites · Premium · Affiliates · Right-to-left languages
   ====================================================================== */

/* News front page */
.nw-top { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 18px; }
.nw-lead { position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: var(--surface); color: #fff; min-height: 420px; isolation: isolate; }
.nw-lead-img { position: absolute; inset: 0; z-index: -2; }
.nw-lead-img img, .nw-lead-img .an-news-ph { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.nw-lead:hover .nw-lead-img img { transform: scale(1.03); }
.nw-lead::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0,0,0,.88) 5%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.05) 75%); }
.nw-lead-body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 3vw, 32px); display: grid; gap: 8px; }
.nw-lead h2 { margin: 0; font-size: clamp(22px, 3vw, 36px); line-height: 1.12; font-weight: 900; letter-spacing: -.02em; }
.nw-lead p { margin: 0; color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 720px; }
.nw-kicker { display: inline-block; width: max-content; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.nw-lead .nw-kicker { background: var(--accent); color: #fff; padding: 3px 8px; border-radius: 4px; }
.nw-meta { font-size: 12.5px; color: rgba(255,255,255,.7); }
.nw-top-side { display: grid; grid-template-rows: repeat(4, 1fr); gap: 12px; }
.nw-side { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: center; color: inherit; padding: 8px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); transition: border-color .15s; }
.nw-side:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.nw-side img, .nw-side .an-news-ph { width: 132px; aspect-ratio: 16/10; object-fit: cover; border-radius: calc(var(--radius-sm) - 2px); display: block; }
.nw-side > span { display: grid; gap: 4px; min-width: 0; }
.nw-side strong { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-side small { color: var(--muted); font-size: 12px; }
.nw-columns { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; margin-top: 10px; align-items: start; }
.nw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.nw-grid .an-news.big { grid-column: span 2; grid-row: span 2; }
.nw-latest { position: sticky; top: 90px; margin-top: 36px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.nw-latest ol { list-style: none; margin: 0; padding: 0; display: grid; }
.nw-latest li a { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); color: inherit; }
.nw-latest li:first-child a { border-top: 0; }
.nw-latest time { font-size: 12px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; padding-top: 2px; }
.nw-latest strong { display: block; font-size: 13.5px; line-height: 1.35; }
.nw-latest a:hover strong { color: var(--accent); }
.nw-latest small { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; }
.nw-all { width: 100%; justify-content: center; margin-top: 12px; }
.chip.on { background: var(--accent); color: #fff; border-color: transparent; }
@media (max-width: 1100px) { .nw-columns { grid-template-columns: 1fr; } .nw-latest { position: static; } .nw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .nw-top { grid-template-columns: 1fr; } .nw-lead { min-height: 340px; } .nw-top-side { grid-template-rows: none; } }
@media (max-width: 520px) { .nw-side { grid-template-columns: 104px minmax(0, 1fr); } .nw-side img, .nw-side .an-news-ph { width: 104px; } .nw-grid .an-news.big { grid-column: span 2; grid-row: auto; } }

/* Premium */
.btn-premium { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; font-weight: 800; font-size: 13px; white-space: nowrap; color: #1a1300; background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 6px 18px -8px rgba(245,158,11,.7); }
.btn-premium:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-premium.is-on { background: var(--surface-2); color: #f59e0b; box-shadow: inset 0 0 0 1px rgba(245,158,11,.5); }
@media (max-width: 640px) { .btn-premium { height: 32px; width: 32px; padding: 0; justify-content: center; font-size: 14px; flex: none; } .btn-premium span { display: none; } }
.pm { display: grid; place-items: center; padding: clamp(24px, 6vw, 70px) 0; }
.pm-card { width: min(560px, 100%); text-align: center; padding: clamp(26px, 5vw, 44px); border-radius: calc(var(--radius) + 8px); background: radial-gradient(420px 220px at 50% 0%, rgba(245,158,11,.18), transparent 70%), var(--surface); border: 1px solid rgba(245,158,11,.35); box-shadow: 0 30px 70px -40px rgba(245,158,11,.6); }
.pm-crown { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-size: 30px; color: #1a1300; background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 12px 30px -10px rgba(245,158,11,.8); }
.pm-card h1 { margin: 16px 0 6px; font-size: clamp(26px, 4vw, 36px); font-weight: 900; letter-spacing: -.02em; }
.pm-lead { margin: 0 0 18px; color: var(--muted); }
.pm-perks { list-style: none; margin: 0 auto 22px; padding: 0; display: grid; gap: 10px; max-width: 380px; text-align: start; }
.pm-perks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.pm-perks li::before { content: '✓'; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: rgba(245,158,11,.18); color: #f59e0b; }
.pm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pm-active { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 800; color: #f59e0b; background: rgba(245,158,11,.14); }

/* Amazon affiliate button */
.an-buy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.an-amazon { background: #ff9900 !important; color: #111 !important; border-color: transparent !important; }
.an-amazon:hover { background: #ffad33 !important; }
.an-buy small { color: var(--muted); font-size: 11.5px; max-width: 320px; }

/* Right-to-left (Arabic) */
[dir='rtl'] .search { margin-left: 0; margin-right: auto; }
[dir='rtl'] .search input { padding: 0 16px 0 46px; }
[dir='rtl'] .search button { right: auto; left: 4px; }
[dir='rtl'] .an-sorts { margin-left: 0; margin-right: auto; }
[dir='rtl'] .an-slide::after { background: linear-gradient(-90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 32%, color-mix(in srgb, var(--bg) 20%, transparent) 70%, transparent 100%), linear-gradient(0deg, var(--bg) 0%, transparent 45%); }
[dir='rtl'] .an-slide-cover { right: auto; left: clamp(20px, 5vw, 64px); }
[dir='rtl'] .an-dots { right: auto; left: 22px; }
[dir='rtl'] .an-rank { right: auto; left: 8px; }
[dir='rtl'] .an-score { left: auto; right: 8px; }
[dir='rtl'] .an-facts dd { text-align: left; }
[dir='rtl'] .an-more, [dir='rtl'] .link-more { direction: rtl; }
[dir='rtl'] .nw-lead-body, [dir='rtl'] .an-card-body, [dir='rtl'] .an-news-body { text-align: right; }
[dir='rtl'] body { font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, var(--font-body); }

/* ======================================================================
   Recipe sites: "kitchen" skin (food magazine) + recipe components
   Templates: Fresh Kitchen (terracotta), Garden Fresh (green), Bistro Night (dark)
   ====================================================================== */
[data-skin='kitchen'] { --radius: 18px; --radius-sm: 14px; }
[data-theme='light'][data-skin='kitchen'] { --bg: #fbf7f1; --bg-2: #fffdf9; --surface: #ffffff; --surface-2: #f3ece1; --line: rgba(60,40,20,.1); --text: #2a1e14; --muted: #7a6a5a; --shadow: 0 18px 40px -26px rgba(80,50,20,.45); color-scheme: light; }
:root:not([data-theme='light'])[data-skin='kitchen'] { --bg: #14100c; --bg-2: #1b1611; --surface: #211a14; --surface-2: #2c231b; --line: rgba(255,230,200,.1); --text: #f6ede2; --muted: #bba894; }
[data-skin='kitchen'] body { background: radial-gradient(900px 480px at 100% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), var(--bg); }
[data-skin='kitchen'] .topbar { background: color-mix(in srgb, var(--bg-2) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
[data-skin='kitchen'] .logo-mark { border-radius: 50%; }
[data-skin='kitchen'] .logo-word { font-family: var(--font-head); font-weight: 800; letter-spacing: -.01em; }
[data-skin='kitchen'] .mainnav a { border-radius: 999px; }
[data-skin='kitchen'] .mainnav a.active { background: var(--accent); color: #fff; }
[data-skin='kitchen'] .chip { border-radius: 999px; background: var(--surface); }
[data-skin='kitchen'] .chip:hover { background: var(--accent); color: #fff; border-color: transparent; }
[data-skin='kitchen'] .search input { border-radius: 999px; background: var(--surface); }
[data-skin='kitchen'] .footer { background: var(--surface-2); border-top: 0; }

/* Shared recipe components (work with any skin) */
.rc-section { margin-top: 44px; }
.rc-head2 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.rc-head2 h2 { margin: 0; font-family: var(--font-head); font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.01em; }
.rc-head2 a { color: var(--accent); font-weight: 700; font-size: 14px; white-space: nowrap; }
.rc-kicker { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.rc-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; border: 0; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; background: var(--accent); color: #fff; box-shadow: 0 10px 24px -12px var(--accent); transition: transform .15s, filter .15s; }
.rc-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.rc-btn.ghost { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.rc-btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.rc-btn.full { width: 100%; justify-content: center; }

/* Cards */
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px 18px; }
.rc-row { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 22vw, 250px); gap: 18px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.rc-row > * { scroll-snap-align: start; }
.rc-card { display: block; color: inherit; min-width: 0; }
.rc-img { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow); }
.rc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.rc-card:hover .rc-img img { transform: scale(1.06); }
.rc-ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--accent) 20%, var(--surface-2))); }
.rc-cat { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: rgba(255,255,255,.92); color: #2a1e14; backdrop-filter: blur(6px); }
.rc-video { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 6px 16px -6px rgba(0,0,0,.5); }
.rc-body { padding: 12px 2px 0; }
.rc-body h3 { margin: 0; font-family: var(--font-head); font-size: 17px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-card:hover h3 { color: var(--accent); }
.rc-body p { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; font-size: 13px; color: var(--muted); }

/* Home hero */
.rc-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; }
.rc-hero-main { position: relative; display: block; border-radius: calc(var(--radius) + 6px); overflow: hidden; min-height: 460px; color: #fff; isolation: isolate; box-shadow: var(--shadow); }
.rc-hero-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 6s ease; }
.rc-hero-main:hover img { transform: scale(1.05); }
.rc-hero-main::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(20,12,6,.88) 8%, rgba(20,12,6,.35) 50%, rgba(20,12,6,0) 80%); }
.rc-hero-text { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 3.4vw, 38px); display: grid; gap: 10px; justify-items: start; }
.rc-hero-text .rc-kicker { color: #fff; background: var(--accent); padding: 4px 12px; border-radius: 999px; }
.rc-hero-text strong { font-family: var(--font-head); font-size: clamp(28px, 4vw, 48px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; max-width: 680px; }
.rc-hero-meta { color: rgba(255,255,255,.85); font-size: 14px; }
.rc-hero-text .rc-btn { margin-top: 6px; }
.rc-hero-side { display: grid; grid-template-rows: repeat(4, 1fr); gap: 12px; }
.rc-mini { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: inherit; transition: transform .15s; }
.rc-mini:hover { transform: translateX(3px); }
.rc-mini img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-sm); }
.rc-mini span { display: grid; gap: 4px; min-width: 0; }
.rc-mini small { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.rc-mini strong { font-family: var(--font-head); font-size: 16px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* "What's in your fridge?" */
.rc-fridge { margin-top: 30px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; align-items: center; padding: clamp(22px, 3.4vw, 34px); border-radius: calc(var(--radius) + 6px); background: radial-gradient(500px 240px at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--surface); box-shadow: var(--shadow); }
.rc-fridge h2 { margin: 0 0 6px; font-family: var(--font-head); font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.01em; }
.rc-fridge p { margin: 0; color: var(--muted); }
.rc-search { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px; border-radius: 999px; background: var(--bg); border: 2px solid var(--line); color: var(--muted); transition: border-color .15s, box-shadow .15s; }
.rc-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent); }
.rc-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font: inherit; font-size: 16px; color: var(--text); }
.rc-search.small { height: 44px; flex: 1 1 260px; max-width: 420px; }
.rc-try { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rc-try a { padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--surface-2); color: var(--text); }
.rc-try a:hover { background: var(--accent); color: #fff; }

/* Categories & cuisines */
.rc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 18px 12px; }
.rc-catile { display: grid; justify-items: center; gap: 6px; text-align: center; color: inherit; }
.rc-catimg { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.rc-catimg img { width: 88%; height: 88%; object-fit: contain; }
.rc-catile:hover .rc-catimg { transform: translateY(-4px) rotate(-3deg); box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
.rc-catile strong { font-size: 14px; }
.rc-catile small { color: var(--muted); font-size: 12px; margin-top: -4px; }
.rc-cuisines { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.rc-cuisines a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: inherit; transition: box-shadow .15s, transform .15s; }
.rc-cuisines a:hover { box-shadow: inset 0 0 0 2px var(--accent); transform: translateY(-2px); }
.rc-flag { font-size: 24px; line-height: 1; }
.rc-cuisines strong { font-size: 14px; }
.rc-cuisines small { color: var(--muted); font-size: 12px; }
.rc-cuisines.big { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.rc-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.rc-catcard { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: inherit; }
.rc-catcard img { width: 110px; height: 90px; object-fit: contain; }
.rc-catcard span { display: grid; gap: 4px; }
.rc-catcard strong { font-family: var(--font-head); font-size: 20px; }
.rc-catcard small { color: var(--accent); font-weight: 700; }
.rc-catcard em { font-style: normal; color: var(--muted); font-size: 12.5px; line-height: 1.45; }

/* Browse */
.rc-browse-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.rc-browse-head h1 { margin: 0; font-family: var(--font-head); font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; }
.rc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.rc-filters select { height: 44px; padding: 0 34px 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--text); font: inherit; font-size: 14px; appearance: none; }
.rc-toggle { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 600; cursor: pointer; }
.rc-toggle input { accent-color: var(--accent); }
.rc-pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 18px; scrollbar-width: thin; }
.rc-pills a { flex: none; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.rc-pills a.on, .rc-pills a:hover { background: var(--accent); color: #fff; box-shadow: none; }

/* Recipe page */
.rc-page .crumbs { margin-bottom: 14px; }
.rc-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.rc-top h1 { margin: 10px 0 12px; font-family: var(--font-head); font-size: clamp(32px, 4.6vw, 56px); line-height: 1.04; font-weight: 800; letter-spacing: -.025em; }
.rc-summary { margin: 0; font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 560px; }
.rc-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.rc-stats span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: var(--muted); }
.rc-stats b { color: var(--text); font-size: 16px; }
.rc-stats svg { color: var(--accent); }
.rc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rc-photo { margin: 0; aspect-ratio: 1; border-radius: calc(var(--radius) + 10px); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(60,30,10,.55); transform: rotate(1.5deg); }
.rc-photo img { width: 100%; height: 100%; object-fit: cover; }
.rc-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 28px; margin-top: 44px; align-items: start; scroll-margin-top: 90px; }
.rc-box-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.rc-box-head h2 { margin: 0; font-family: var(--font-head); font-size: 26px; font-weight: 800; }
.rc-box-head small { color: var(--muted); font-size: 13px; }
.rc-ingredients { position: sticky; top: 90px; padding: 22px; border-radius: calc(var(--radius) + 4px); background: var(--surface); box-shadow: var(--shadow); }
.rc-ingredients ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; }
.rc-ingredients li label { display: grid; grid-template-columns: auto 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 4px; border-bottom: 1px dashed var(--line); cursor: pointer; }
.rc-ingredients li:last-child label { border-bottom: 0; }
.rc-ingredients input { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
.rc-ingredients img { width: 40px; height: 40px; object-fit: contain; }
.rc-ingredients span { font-size: 15px; line-height: 1.35; }
.rc-ingredients b { color: var(--accent); font-weight: 700; }
.rc-ingredients input:checked ~ span { text-decoration: line-through; opacity: .45; }
.rc-ingredients input:checked ~ img { filter: grayscale(1); opacity: .5; }
.rc-method ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rc-method li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .15s, opacity .2s; }
.rc-method li:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.rc-num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-size: 20px; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.rc-method p { margin: 0; font-size: 16.5px; line-height: 1.7; }
.rc-method li.done { opacity: .5; }
.rc-method li.done .rc-num { background: var(--accent); color: #fff; font-size: 0; }
.rc-method li.done .rc-num::after { content: '✓'; font-size: 20px; }
.rc-video-box { margin-top: 28px; }
.rc-video-box h3 { margin: 0 0 12px; font-family: var(--font-head); font-size: 22px; }
.rc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.rc-tags a { padding: 5px 12px; border-radius: 999px; background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--text); }
.rc-source { margin-top: 18px; color: var(--muted); font-size: 14px; }
.rc-source a { color: var(--accent); font-weight: 600; }

/* Cook mode: big type, current step highlighted, screen kept awake (see site.js) */
html.cook-mode .rc-method p { font-size: 21px; }
html.cook-mode .rc-method li:not(.done) ~ li:not(.done) { opacity: .55; }
html.cook-mode .rc-method li:not(.done) { box-shadow: inset 0 0 0 2px var(--accent); }
html.cook-mode .rc-method li:not(.done) ~ li:not(.done) { box-shadow: inset 0 0 0 1px var(--line); }
html.cook-mode [data-cook-mode] { background: var(--accent); color: #fff; box-shadow: none; }

@media (max-width: 1000px) {
  .rc-hero, .rc-fridge, .rc-top { grid-template-columns: 1fr; }
  .rc-hero-side { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-layout { grid-template-columns: 1fr; }
  .rc-ingredients { position: static; }
  .rc-photo { transform: none; order: -1; }
}
@media (max-width: 640px) {
  .rc-hero-main { min-height: 360px; }
  .rc-hero-side { grid-template-columns: 1fr; }
  .rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .rc-body h3 { font-size: 15px; }
  .rc-method li { grid-template-columns: 36px minmax(0, 1fr); padding: 14px; gap: 12px; }
  .rc-num { width: 36px; height: 36px; font-size: 17px; }
  .rc-actions .rc-btn { flex: 1 1 auto; justify-content: center; padding: 0 14px; }
}

/* Print: just the recipe */
@media print {
  .topbar, .footer, .bottom-nav, .to-top, .cookiebar, .sp-slot, .chips-row, .rc-actions, .rc-video-box, .rc-section, .crumbs, .rc-ingredients .rc-btn, .announce, .rc-tags { display: none !important; }
  body { background: #fff !important; color: #000; }
  .rc-top { grid-template-columns: 1fr 220px; }
  .rc-photo { transform: none; box-shadow: none; }
  .rc-layout { grid-template-columns: 1fr 1.6fr; margin-top: 16px; }
  .rc-ingredients, .rc-method li { box-shadow: none; background: none; padding: 6px 0; }
  .rc-ingredients { position: static; }
  .rc-method p { font-size: 13px; }
}
.rc-flag-img { width: 20px; height: 15px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); vertical-align: -2px; display: inline-block; }
.rc-flag .rc-flag-img { width: 30px; height: 22px; border-radius: 4px; }
.rc-flag-plate { font-size: 1em; }

/* ======================================================================
   Content page options (Settings → Content pages): series, cards, articles, recipes
   ====================================================================== */
/* Series page: header style */
[data-cthero='split'] .an-hero { margin-top: 0; padding: 0; overflow: visible; }
[data-cthero='split'] .an-hero::before, [data-cthero='split'] .an-hero::after { display: none; }
[data-cthero='split'] .an-hero { margin-left: 0; margin-right: 0; }
[data-cthero='split'] .an-hero-inner { padding: clamp(18px, 3vw, 30px); border-radius: calc(var(--radius) + 6px); background: var(--surface); border: 1px solid var(--line); align-items: start; }
[data-cthero='compact'] .an-hero-inner { grid-template-columns: 120px minmax(0, 1fr); padding: 26px 0 18px; align-items: start; }
[data-cthero='compact'] .an-hero h1 { font-size: clamp(22px, 2.6vw, 30px); }
[data-cthero='compact'] .an-synopsis { -webkit-line-clamp: 2; }
@media (max-width: 640px) { [data-cthero='compact'] .an-hero-inner { grid-template-columns: 84px minmax(0, 1fr); } }
/* Series page: details panel and section order */
[data-ctside='left'] .an-detail { grid-template-columns: 300px minmax(0, 1fr); }
[data-ctside='left'] .an-side { order: -1; }
[data-ctside='below'] .an-detail { grid-template-columns: 1fr; }
[data-ctside='below'] .an-side { position: static; }
[data-ctside='below'] .an-facts dl { grid-template-columns: repeat(auto-fill, minmax(140px, auto) minmax(0, 1fr)); }
.an-main { display: flex; flex-direction: column; }
.an-main > * + * { margin-top: 36px; }
.an-main > .an-section { margin-top: 36px; }
.an-main > :first-child { margin-top: 0; }
[data-ctfirst='where'] #where { order: -1; margin-top: 0; }
[data-ctfirst='where'] .an-player-wrap { margin-top: 36px; }
/* Series page: blocks */
[data-ctplayer='off'] .an-player-wrap, [data-ctplayer='off'] #episodes, [data-ctplayer='off'] .an-hero .an-actions a[href='#watch'] { display: none; }
[data-ctwhere='off'] #where { display: none; }
[data-ctcount='off'] .an-countdown { display: none; }
[data-ctsyn='off'] .an-hero .an-synopsis, [data-ctsyn='off'] .an-hero .an-more-btn { display: none; }
[data-ctalt='off'] .an-hero .an-alt:not(.an-credits) { display: none; }
[data-cttags='off'] .an-hero .an-tags { display: none; }
[data-ctnews='off'] .an-main .an-section:has(.an-news-grid) { display: none; }
[data-ctsimilar='off'] .an-detail ~ .an-section { display: none; }
[data-ctscore='off'] .an-score, [data-ctscore='off'] .an-meta .an-hl { display: none; }
/* Cards */
[data-ctcards='clean'] .an-badges, [data-ctcards='clean'] .an-rank { display: none; }
[data-ctcards='compact'] .an-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px 10px; }
[data-ctcards='compact'] .an-row { grid-auto-columns: clamp(108px, 11vw, 140px); gap: 10px; }
[data-ctcards='compact'] .an-card-body h3 { font-size: 12.5px; }
[data-ctcards='compact'] .an-card-body p, [data-ctcards='compact'] .an-badges span:first-child { display: none; }
[data-ctcards='compact'] .an-rank { font-size: 20px; }
/* Article page */
[data-nwimg='off'] .an-article-img { display: none; }
[data-nwsum='off'] .an-article-lead { display: none; }
[data-nwside='below'] .an-article-wrap { grid-template-columns: 1fr; }
[data-nwside='below'] .an-article-wrap .an-side { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
[data-nwmore='off'] .an-article-wrap { grid-template-columns: 1fr; }
[data-nwmore='off'] .an-article-wrap > .an-side { display: none; }
/* Recipe page */
[data-rcphoto='banner'] .rc-top { grid-template-columns: 1fr; }
[data-rcphoto='banner'] .rc-photo { order: -1; aspect-ratio: 21 / 9; transform: none; border-radius: calc(var(--radius) + 6px); }
[data-rcphoto='none'] .rc-top { grid-template-columns: 1fr; }
[data-rcphoto='none'] .rc-photo { display: none; }
[data-rcsteps='cards'] .rc-method ol { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
[data-rcsteps='cards'] .rc-method li { grid-template-columns: 1fr; gap: 10px; }
[data-rcsteps='cards'] .rc-num { width: auto; height: auto; justify-self: start; padding: 3px 12px; border-radius: 999px; font-size: 14px; background: var(--accent); color: #fff; }
[data-rcsteps='cards'] .rc-num::before { content: 'Step '; }
[data-rcsteps='plain'] .rc-method ol { gap: 0; }
[data-rcsteps='plain'] .rc-method li { background: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--line); padding: 14px 0; grid-template-columns: 28px minmax(0, 1fr); }
[data-rcsteps='plain'] .rc-num { width: auto; height: auto; background: none; font-size: 18px; }
[data-rcingimg='off'] .rc-ingredients img { display: none; }
[data-rcingimg='off'] .rc-ingredients li label { grid-template-columns: auto minmax(0, 1fr); }
[data-rctools='off'] .rc-actions [data-cook-mode], [data-rctools='off'] .rc-actions [data-print], [data-rctools='off'] .rc-actions [data-share] { display: none; }
[data-rcvideo='off'] .rc-video-box { display: none; }
[data-rcrel='off'] .rc-page ~ .rc-section { display: none; }


/* ======================================================================
   Wave 2: homepage blocks, my list, seasons, guides, watch order, characters,
   breaking ticker, most read, ingredient shopping links
   ====================================================================== */
.hs { display: contents; }
.hs[hidden] { display: none; }
.mylist-link { position: relative; }
.mylist-link svg { color: var(--accent); }
.ml-btn.on { background: var(--accent-soft, color-mix(in srgb, var(--accent) 16%, transparent)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.rc-btn.ml-btn.on { color: var(--accent); border-color: var(--accent); }
.ml-item { position: relative; min-width: 0; }
.ml-x { position: absolute; top: 6px; right: 6px; z-index: 2; width: 28px; height: 28px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; opacity: .85; transition: opacity .15s, transform .15s; }
.ml-x:hover { opacity: 1; transform: scale(1.08); background: #e11d48; }
.ml-grid:empty { display: none; }
.ml-grid .an-poster img, .ml-grid .rc-img img { width: 100%; height: 100%; object-fit: cover; }

/* Seasonal chart */
.an-season-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.an-season-nav .an-sorts { margin: 0 auto; }
.an-season-nav .an-btn { height: 38px; padding: 0 14px; font-size: 13px; }
@media (max-width: 640px) { .an-season-nav .an-btn span { display: none; } .an-season-nav .an-sorts { order: -1; width: 100%; justify-content: space-between; } }

/* Guides */
.an-guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.an-guide { position: relative; display: flex; align-items: flex-end; min-height: 160px; padding: 16px; border-radius: var(--radius); overflow: hidden; color: #fff; isolation: isolate;
  background: linear-gradient(135deg, hsl(var(--h) 65% 38%), hsl(calc(var(--h) + 50) 70% 22%)); transition: transform .18s, box-shadow .18s; }
.an-guide:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -18px hsl(var(--h) 70% 35%); }
.an-guide-covers { position: absolute; right: 14px; top: 12px; display: flex; z-index: -1; }
.an-guide-covers img { width: 54px; aspect-ratio: 23 / 33; object-fit: cover; border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .45); margin-left: -22px; transform: rotate(6deg); border: 2px solid rgba(255, 255, 255, .85); }
.an-guide-covers img:first-child { transform: rotate(-8deg) translateY(6px); margin-left: 0; }
.an-guide-covers img:nth-child(2) { transform: rotate(-1deg) translateY(-2px); z-index: 1; }
.an-guide:hover .an-guide-covers img { transform: none; }
.an-guide-text { display: grid; gap: 4px; max-width: 62%; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.an-guide-text small { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.an-guide-text strong { font-size: 17px; line-height: 1.2; font-weight: 900; }
.an-guide-page { max-width: 920px; margin: 0 auto; }
.an-guide-page h1 { margin: 8px 0 6px; font-size: clamp(26px, 4vw, 40px); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.an-guide-lead { margin: 0 0 22px; color: var(--muted); font-size: 16px; }
.an-rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.an-rank-item { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.an-rank-cover { position: relative; align-self: start; }
.an-rank-cover img { width: 100%; aspect-ratio: 23 / 33; object-fit: cover; border-radius: calc(var(--radius) - 4px); display: block; }
.an-rank-no { position: absolute; left: -8px; top: -8px; min-width: 38px; height: 38px; padding: 0 8px; display: grid; place-items: center; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 900; font-size: 18px; box-shadow: 0 8px 18px -8px var(--accent-glow, var(--accent)); }
.an-rank-item:nth-child(-n+3) .an-rank-no { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1f1300; }
.an-rank-body h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; line-height: 1.25; }
.an-rank-body h2 a { color: inherit; }
.an-rank-body h2 a:hover { color: var(--accent); }
.an-rank-body .an-meta { color: var(--muted); }
.an-rank-body .an-tags { margin: 8px 0; }
.an-rank-body p { margin: 0 0 12px; color: color-mix(in srgb, var(--text) 82%, transparent); line-height: 1.6; font-size: 14.5px; }
.an-rank-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.an-rank-actions .an-btn { height: 38px; padding: 0 16px; font-size: 13px; }
.an-guide-links { display: flex; flex-wrap: wrap; gap: 8px; }
.an-guide-links a { padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--text); }
.an-guide-links a:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) { .an-rank-item { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 12px; } .an-rank-body h2 { font-size: 16px; } .an-rank-body p { display: none; } }

/* Watch order, related titles */
.an-wo { scrollbar-width: thin; list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 280px); gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; counter-reset: wo; }
.an-wo li { scroll-snap-align: start; position: relative; }
.an-wo li + li::before { content: ''; position: absolute; left: -12px; top: 50%; width: 12px; height: 2px; background: var(--line); }
.an-rels { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.an-rel { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: var(--radius-sm, 12px); background: var(--surface); border: 1px solid var(--line); color: inherit; height: 100%; transition: border-color .15s, transform .15s; }
a.an-rel:hover { border-color: var(--accent); transform: translateY(-1px); }
.an-rel img { width: 52px; aspect-ratio: 23 / 33; object-fit: cover; border-radius: 7px; background: var(--surface-2); }
.an-rel-text { display: grid; gap: 2px; min-width: 0; }
.an-rel-text small { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.an-rel-text strong { font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.an-rel-text em { font-style: normal; font-size: 12px; color: var(--muted); }
.an-rel > svg { color: var(--muted); }
.an-rel.self { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }

/* Characters & voice cast */
.an-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.an-char { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-sm, 12px); background: var(--surface); border: 1px solid var(--line); }
.an-char img { width: 52px; height: 68px; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.an-char-name, .an-char-va > span { display: grid; gap: 2px; min-width: 0; }
.an-char strong { font-size: 13.5px; line-height: 1.25; overflow-wrap: anywhere; }
.an-char small { font-size: 11.5px; color: var(--muted); }
.an-char-va { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 10px; align-items: center; text-align: right; }

/* News: breaking ticker, most read */
.nw-ticker { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 8px 8px 8px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.nw-live { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: #e11d48; color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.nw-live i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: nw-pulse 1.4s ease-in-out infinite; }
@keyframes nw-pulse { 50% { opacity: .25; transform: scale(.7); } }
.nw-tick { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.nw-tick-track { display: flex; width: max-content; animation: nw-marquee calc(var(--n, 6) * 7s) linear infinite; }
.nw-tick:hover .nw-tick-track, .nw-tick:focus-within .nw-tick-track { animation-play-state: paused; }
.nw-tick-track a { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; border-right: 1px solid var(--line); }
.nw-tick-track a:hover { color: var(--accent); }
.nw-tick-track time { color: var(--accent); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
@keyframes nw-marquee { to { transform: translateX(-50%); } }
[dir='rtl'] .nw-tick-track { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .nw-tick { overflow-x: auto; } .nw-tick-track { animation: none; } }
.nw-mostread { margin-bottom: 18px; }
.nw-mostread ol { list-style: none; margin: 0; padding: 0; display: grid; }
.nw-mostread li a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); color: inherit; }
.nw-mostread li:first-child a { border-top: 0; }
.nw-mostread b { font-size: 26px; line-height: 1; font-weight: 900; color: color-mix(in srgb, var(--accent) 75%, var(--text)); font-variant-numeric: tabular-nums; }
.nw-mostread strong { display: block; font-size: 13.5px; line-height: 1.35; }
.nw-mostread a:hover strong { color: var(--accent); }
.nw-mostread small { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; }
.an-facts .nw-mostread { margin: 0; }

/* Recipes: shop an ingredient */
.rc-ingredients li { display: flex; align-items: center; gap: 4px; }
.rc-ingredients li label { flex: 1; min-width: 0; }
.rc-buy { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; color: var(--muted); transition: background-color .15s, color .15s; }
.rc-buy:hover { background: var(--accent-soft, color-mix(in srgb, var(--accent) 14%, transparent)); color: var(--accent); }
.rc-aff-note { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }
@media print { .rc-buy, .rc-aff-note, .ml-btn { display: none !important; } }


/* ======================================================================
   Wave 3: reviews, article text, recipe scaler, shopping list
   ====================================================================== */
.rv { margin-top: 40px; max-width: 860px; }
.rv-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.rv-title { display: flex; align-items: center; gap: 10px; }
.rv-title h2 { margin: 0; font-size: clamp(19px, 2.2vw, 23px); font-weight: 800; letter-spacing: -.01em; }
.rv-count { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-size: 12px; font-weight: 800; }
.rv-avg { display: flex; align-items: center; gap: 10px; }
.rv-avg strong { font-size: 30px; font-weight: 900; line-height: 1; }
.rv-avg small { color: var(--muted); font-size: 12.5px; }
.rv-stars { position: relative; display: inline-block; line-height: 0; vertical-align: middle; }
.rv-stars svg { width: 18px; height: 18px; flex: none; }
.rv-stars.sm svg { width: 13px; height: 13px; }
.rv-stars-bg { color: color-mix(in srgb, var(--text) 18%, transparent); display: inline-flex; gap: 1px; }
.rv-stars-fg { position: absolute; inset: 0 auto 0 0; width: var(--pct); overflow: hidden; color: #fbbf24; display: inline-flex; gap: 1px; white-space: nowrap; }
[dir='rtl'] .rv-stars-fg { inset: 0 0 0 auto; }
.rv-flash { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; }
.rv-flash.ok { background: color-mix(in srgb, #22c55e 14%, transparent); color: #16a34a; }
.rv-flash.err { background: color-mix(in srgb, #ef4444 14%, transparent); color: #dc2626; }
.rv-form { display: grid; gap: 10px; padding: 14px; border-radius: var(--radius, 14px); background: var(--surface); border: 1px solid var(--line); }
.rv-pick { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; }
.rv-pick legend { float: left; margin-right: 12px; font-size: 13px; font-weight: 700; color: var(--muted); }
.rv-pick-stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.rv-pick-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-pick-stars label { cursor: pointer; color: color-mix(in srgb, var(--text) 20%, transparent); transition: color .12s, transform .12s; line-height: 0; }
.rv-pick-stars label svg { width: 28px; height: 28px; }
.rv-pick-stars label:hover, .rv-pick-stars label:hover ~ label, .rv-pick-stars input:checked ~ label { color: #fbbf24; }
.rv-pick-stars label:hover { transform: scale(1.12); }
.rv-pick-stars input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.rv-form textarea, .rv-form input[name='name'] { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: 14px; resize: vertical; }
.rv-form textarea:focus, .rv-form input[name='name']:focus { outline: none; border-color: var(--accent); }
.rv-bar { display: flex; gap: 10px; }
.rv-bar input { flex: 1; min-width: 0; }
.rv-bar button { flex: none; padding: 0 18px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; }
.rv-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.rv-list li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
.rv-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: hsl(var(--h) 55% 45%); color: #fff; font-weight: 800; }
.rv-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.rv-meta time { color: var(--muted); font-size: 12px; }
.rv-list p { margin: 4px 0 0; line-height: 1.55; font-size: 14.5px; white-space: pre-line; overflow-wrap: anywhere; }
.rv-empty { margin: 14px 0 0; color: var(--muted); font-size: 14px; }

/* Articles written in the admin */
.an-article-body { margin: 18px 0 22px; font-size: 16.5px; line-height: 1.75; }
.an-article-body > * { margin: 0 0 1em; }
.an-article-body h2 { margin-top: 1.6em; font-size: 1.4em; font-weight: 800; line-height: 1.25; }
.an-article-body h3 { margin-top: 1.4em; font-size: 1.15em; font-weight: 800; }
.an-article-body ul, .an-article-body ol { padding-left: 1.3em; }
.an-article-body li { margin: .3em 0; }
.an-article-body blockquote { padding: 4px 0 4px 16px; border-left: 3px solid var(--accent); color: color-mix(in srgb, var(--text) 80%, transparent); font-style: italic; }
.an-article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.an-article-body img { max-width: 100%; height: auto; border-radius: 12px; display: block; }
.an-article-body .an-player { margin: 1.2em 0; }

/* Recipe: times, servings scaler, shopping list */
.rc-scale { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.rc-scale button { width: 28px; height: 28px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; }
.rc-scale button:hover { background: var(--accent); color: #fff; }
.rc-scale span { min-width: 64px; text-align: center; }
.rc-scale.changed { border-color: var(--accent); color: var(--accent); }
[data-shop-add].done { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }
.sl-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.sl { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.sl-group { padding: 14px 16px; border-radius: var(--radius, 14px); background: var(--surface); border: 1px solid var(--line); }
.sl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sl-title { font-weight: 800; font-size: 16px; color: var(--text); }
a.sl-title:hover { color: var(--accent); }
.sl-x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; }
.sl-x:hover { background: #e11d48; color: #fff; }
.sl ul { list-style: none; margin: 0; padding: 0; }
.sl li label { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px dashed var(--line); cursor: pointer; font-size: 14.5px; }
.sl li:first-child label { border-top: 0; }
.sl li input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.sl li.done span { text-decoration: line-through; color: var(--muted); }
@media print { .rv, .rc-scale, [data-shop-add], [data-shop-view] { display: none !important; } }


/* ======================================================================
   Wave 4: airing reminders, newsletter box
   ====================================================================== */
.an-countdown-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.an-countdown-row .an-countdown { margin: 0; }
.an-remind { height: 40px; padding: 0 16px; font-size: 13px; }
.an-remind.on { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent); }
.an-remind.on svg { animation: an-ring 1.2s ease-in-out 1; transform-origin: 50% 10%; }
@keyframes an-ring { 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
.nl { margin-top: 48px; padding: 34px 0; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface)); border-top: 1px solid var(--line); }
.nl-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; }
.nl-text { display: grid; gap: 4px; max-width: 520px; }
.nl-text strong { font-size: clamp(19px, 2.4vw, 24px); font-weight: 900; letter-spacing: -.01em; }
.nl-text span { color: var(--muted); font-size: 14.5px; }
.nl-form { display: flex; gap: 8px; flex: 1; min-width: min(100%, 320px); max-width: 460px; }
.nl-form input[type='email'] { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: 15px; }
.nl-form input[type='email']:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.nl-form button { flex: none; height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; }
.nl-msg { margin: 0; font-weight: 700; color: #16a34a; }
.nl-msg.err { color: #dc2626; }
@media print { .nl, .an-remind { display: none !important; } }

/* Video news */
.an-news-img { position: relative; }
.an-news-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; backdrop-filter: blur(4px); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform .15s, background-color .15s; }
.an-news-play svg { width: 18px; height: 18px; margin-left: 2px; }
.an-news:hover .an-news-play { transform: translate(-50%, -50%) scale(1.1); background: var(--accent); }
.nw-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.an-article-video { margin: 16px 0; }