:root {
  color-scheme: dark;
  --bg: #0b0b0d;
  --surface: #121216;
  --surface-2: #18181d;
  --surface-3: #202027;
  --text: #f5f2ed;
  --muted: #9c9aa2;
  --muted-2: #706f77;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .17);
  --accent: #e95c91;
  --accent-soft: rgba(233, 92, 145, .13);
  --gold: #cba86a;
  --success: #67d9a6;
  --shadow: 0 30px 80px rgba(0, 0, 0, .35);
  --radius: 18px;
  --shell: min(1400px, calc(100vw - 72px));
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f1ec;
  --surface: #fbfaf7;
  --surface-2: #ede9e2;
  --surface-3: #e3ded6;
  --text: #151418;
  --muted: #6d6a70;
  --muted-2: #8d8990;
  --line: rgba(16, 15, 18, .1);
  --line-strong: rgba(16, 15, 18, .19);
  --shadow: 0 30px 80px rgba(71, 61, 49, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  transition: background .3s ease, color .3s ease;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
svg { width: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shell { width: var(--shell); margin-inline: auto; }
.desktop-only { display: inline-flex; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .17em; line-height: 1.2; }
.eyebrow i { width: 22px; height: 1px; background: var(--accent); }

.site-header { position: relative; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(20px); }
.header-main { min-height: 82px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 42px; }
.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px 4px 12px 4px; background: var(--accent); color: white; font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 24px; box-shadow: 0 10px 25px rgba(233, 92, 145, .22); }
.brand-mark img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.brand-copy { display: grid; gap: 0; line-height: 1; }
.brand-copy strong { font-size: 16px; letter-spacing: .18em; }
.brand-copy small { margin-top: 6px; color: var(--muted); font-size: 8px; letter-spacing: .2em; }
.desktop-nav { justify-self: center; display: flex; align-items: center; gap: 32px; }
.desktop-nav a { position: relative; color: var(--muted); font-size: 14px; transition: color .2s; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--text); }
.desktop-nav a.active::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); transform: translateX(-50%); }
.header-actions { display: flex; gap: 8px; align-items: center; }
.icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; transition: .2s ease; }
.icon-button:hover { border-color: var(--line-strong); background: var(--surface-2); transform: translateY(-1px); }
.member-button { display: inline-flex; align-items: center; gap: 18px; height: 42px; margin-left: 4px; padding: 0 17px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 13px; font-weight: 700; }
.member-button b { font-size: 17px; }
.menu-button { display: none; }
.category-bar { border-top: 1px solid var(--line); }
.category-scroll { display: flex; align-items: center; min-height: 45px; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.category-scroll::-webkit-scrollbar { display: none; }
.category-scroll a { color: var(--muted); font-size: 12px; white-space: nowrap; transition: color .2s; }
.category-scroll a:hover { color: var(--text); }
.category-scroll sup { margin-left: 5px; color: var(--accent); font-size: 8px; }

.menu-drawer { position: fixed; z-index: 101; top: 0; right: 0; width: min(390px, 92vw); height: 100dvh; padding: 28px; background: var(--surface); transform: translateX(102%); transition: transform .35s cubic-bezier(.22,.8,.2,1); box-shadow: var(--shadow); }
.menu-drawer.open { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 28px; border-bottom: 1px solid var(--line); font-weight: 700; }
.menu-drawer nav { display: grid; margin-top: 18px; }
.menu-drawer nav a { display: flex; justify-content: space-between; padding: 16px 4px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 17px; }
.menu-drawer nav a:hover { color: var(--text); padding-left: 10px; }
.menu-drawer nav span { font-size: 10px; color: var(--accent); }
.page-scrim { position: fixed; z-index: 99; inset: 0; background: rgba(0,0,0,.62); opacity: 0; visibility: hidden; transition: .3s; backdrop-filter: blur(5px); }
.page-scrim.open { opacity: 1; visibility: visible; }

.search-overlay { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(8,8,10,.94); opacity: 0; visibility: hidden; transition: .28s; backdrop-filter: blur(24px); }
.search-overlay.open { opacity: 1; visibility: visible; }
.search-close { position: absolute; top: 28px; right: 32px; border: 0; background: none; color: white; font-size: 34px; font-weight: 200; cursor: pointer; }
.search-panel { width: min(820px, 90vw); }
.search-input-wrap { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto auto; border-bottom: 1px solid rgba(255,255,255,.3); }
.search-input-wrap input { width: 100%; padding: 23px 0; border: 0; outline: 0; background: none; color: white; font-size: clamp(28px, 5vw, 58px); font-weight: 300; letter-spacing: -.03em; }
.search-input-wrap input::placeholder { color: rgba(255,255,255,.27); }
.search-input-wrap button { width: 70px; border: 0; background: none; color: var(--accent); font-size: 35px; cursor: pointer; }
.search-panel p { color: rgba(255,255,255,.4); font-size: 13px; }
.search-input-wrap select { align-self: center; max-width: 150px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: #17171b; color: rgba(255,255,255,.72); font-size: 12px; }
.archive-search-form { width: min(680px, 100%); min-height: 64px; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 12px; margin-top: 30px; padding: 8px 9px 8px 18px; border: 1px solid color-mix(in srgb, var(--line-strong) 84%, var(--accent) 16%); border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 90%, transparent), color-mix(in srgb, var(--surface) 75%, transparent)); box-shadow: 0 18px 45px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.035); backdrop-filter: blur(18px); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.archive-search-form:focus-within { border-color: color-mix(in srgb, var(--accent) 66%, var(--line-strong)); box-shadow: 0 20px 48px rgba(0,0,0,.19), 0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent); transform: translateY(-1px); }
.archive-search-form, .search-panel, .tag-suggestion-anchor { position:relative; }
.tag-suggestion-panel { position:absolute; z-index:120; top:calc(100% + 8px); left:18px; right:18px; display:grid; max-height:320px; overflow:auto; padding:7px; border:1px solid var(--line-strong); border-radius:14px; background:var(--surface); box-shadow:0 18px 44px rgba(0,0,0,.32); }
.search-input-wrap > .tag-suggestion-panel { z-index:140; left:0; right:0; }
.tag-suggestion-panel[hidden] { display:none; }
.tag-suggestion-panel button { width:100%; min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 11px; border:0; border-radius:9px; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.tag-suggestion-panel button:hover, .tag-suggestion-panel button.active { background:var(--accent-soft); color:var(--accent); }
.tag-suggestion-panel small { color:var(--muted-2); font-size:10px; }
.tag-suggestion-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 7px 7px; color:var(--muted-2); font-size:9px; font-weight:750; letter-spacing:.13em; }
.tag-suggestion-heading > span { white-space:nowrap; }
.tag-suggestion-panel .tag-suggestion-clear { width:auto; min-height:27px; padding:3px 8px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:9px; font-weight:650; }
.tag-suggestion-panel .tag-suggestion-clear:hover { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); color:var(--accent); }
.tag-suggestion-empty { margin:0 0 5px; padding:10px 11px; border-radius:10px; background:color-mix(in srgb,var(--accent-soft) 68%,transparent); color:var(--muted); font-size:11px; line-height:1.55; }
.tag-history-list { display:flex; flex-wrap:wrap; gap:7px; padding:1px 4px 5px; }
.tag-suggestion-panel .tag-history-entry { width:auto; min-height:34px; max-width:100%; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--surface-2) 78%,transparent); }
.tag-suggestion-panel .tag-history-entry:hover { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); }
.tag-history-label { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:650; }
.tag-suggestion-panel .tag-history-entry small { padding-left:8px; border-left:1px solid var(--line); white-space:nowrap; }
.tag-suggestion-item { transition:background .18s ease,color .18s ease; }
.tag-suggestion-label { display:flex; align-items:center; gap:9px; min-width:0; }
.tag-suggestion-label svg { width:17px; height:17px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tag-suggestion-label strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:700; }
.archive-search-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:11px; background:var(--accent-soft); color:var(--accent); }
.archive-search-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; }
.archive-search-form input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 15px; font-weight:560; letter-spacing:.01em; }
.archive-search-form input::placeholder { color: var(--muted-2); }
.archive-search-form select { max-width: 150px; height:42px; padding: 0 34px 0 14px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--muted); font-size: 11px; font-weight:650; cursor:pointer; }
.archive-search-form > button[type="submit"] { min-width:94px; min-height: 46px; padding: 0 19px; border: 0; border-radius: 15px; background: linear-gradient(135deg, #ef6a9d, var(--accent)); color: #fff; font-size: 12px; font-weight: 750; cursor: pointer; box-shadow:0 10px 24px rgba(233,92,145,.22); transition:transform .2s ease,filter .2s ease; }
.archive-search-form > button[type="submit"]:hover { transform:translateY(-1px); filter:brightness(1.06); }
.archive-search-form > button[type="submit"] b { margin-left: 7px; }
.archive-search-inline { width: 100%; margin: 18px 0 36px; }
.search-syntax-help { display:block; margin:10px 0 24px; color:var(--muted-2); font-size:10px; line-height:1.7; letter-spacing:.03em; }
.library-search-inline { width: min(760px, 100%); margin: 26px 0 0; }
.search-results-hero { display:flex; align-items:end; justify-content:space-between; gap:28px; }
.search-results-hero h1 { margin:18px 0 8px; font-family:Georgia,"Songti SC",serif; font-size:clamp(38px,5vw,64px); font-weight:400; }
.search-results-hero p { max-width:650px; color:var(--muted); }
.search-result-summary { display:grid; justify-items:end; gap:14px; flex:0 0 auto; }
.search-reset-link { display:inline-flex; align-items:center; gap:9px; min-height:42px; padding:0 16px; border:1px solid var(--line-strong); border-radius:999px; background:color-mix(in srgb,var(--surface) 82%,transparent); color:var(--text); font-size:11px; transition:border-color .2s,color .2s,transform .2s; }
.search-reset-link:hover { border-color:var(--accent); color:var(--accent); transform:translateX(-2px); }
.search-reset-link svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.search-helper-row { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:10px 0 24px; }
.search-helper-row .search-syntax-help { margin:0; }
.search-helper-row > a { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; color:var(--accent); font-size:10px; }
.search-results-content { padding-bottom:90px; }
.search-result-group { margin-top:54px; }
.search-more-link { margin-top:20px; }

.hero { min-height: 690px; display: grid; grid-template-columns: .86fr 1.14fr; gap: 7vw; align-items: center; padding-block: 80px 100px; overflow: hidden; }
.hero-copy h1 { margin: 22px 0 28px; font-family: Georgia, "Songti SC", serif; font-size: clamp(54px, 5.6vw, 88px); font-weight: 400; line-height: 1.08; letter-spacing: -.055em; }
.hero-copy h1 em { position: relative; color: var(--accent); font-weight: inherit; }
.hero-copy h1 em::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -3px; height: 7px; background: url("data:image/svg+xml,%3Csvg width='100' height='7' viewBox='0 0 100 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5C24 1 68 7 99 2' fill='none' stroke='%23e95c91' stroke-width='1.5'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.hero-copy > p { max-width: 520px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 40px; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--accent); color: white; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 13px 30px rgba(233, 92, 145, .19); transition: .2s ease; }
.primary-button:hover { transform: translateY(-2px); filter: brightness(1.07); }
.primary-button.light { background: #f4f0e8; color: #131316; box-shadow: none; }
.primary-button.wide { width: 100%; }
.text-button { display: inline-flex; gap: 12px; border: 0; border-bottom: 1px solid var(--line-strong); padding: 9px 0; background: none; color: var(--text); font-size: 13px; cursor: pointer; }
.hero-stats { display: flex; gap: 38px; margin-top: 58px; }
.hero-stats div { display: grid; gap: 3px; padding-right: 38px; border-right: 1px solid var(--line); }
.hero-stats div:last-child { border: 0; }
.hero-stats b { font-family: Georgia, serif; font-size: 24px; font-weight: 400; }
.hero-stats span { color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.hero-visual { position: relative; min-height: 520px; }
.hero-card { position: absolute; overflow: hidden; border-radius: 4px; box-shadow: var(--shadow); }
.hero-card-main { z-index: 2; top: 10px; left: 10%; width: min(390px, 55%); height: 500px; transform: rotate(2.5deg); }
.hero-card-back { z-index: 1; top: 82px; right: 5%; width: min(300px, 45%); height: 390px; transform: rotate(-6deg); opacity: .86; }
.hero-card-caption { position: absolute; z-index: 4; left: 24px; right: 24px; bottom: 22px; display: grid; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.3); color: white; }
.hero-card-caption span { font-size: 9px; letter-spacing: .16em; opacity: .65; }
.hero-card-caption b { margin-top: 4px; font-family: Georgia, "Songti SC", serif; font-size: 23px; font-weight: 400; }
.hero-ring { position: absolute; z-index: 0; top: -20px; right: -90px; width: 450px; height: 450px; border: 1px solid var(--line-strong); border-radius: 50%; }
.hero-ring::before { content: ""; position: absolute; inset: 55px; border: 1px solid var(--line); border-radius: inherit; }
.hero-index { position: absolute; right: 0; bottom: 4px; color: var(--muted); font-size: 10px; letter-spacing: .19em; writing-mode: vertical-rl; }

.archive-hero { min-height: 690px; display: grid; grid-template-columns: .82fr 1.18fr; gap: 6vw; align-items: center; padding-block: 76px 92px; }
.archive-hero-copy h1 { margin: 22px 0 28px; font-family: Georgia, "Songti SC", serif; font-size: clamp(54px, 5.4vw, 86px); font-weight: 400; line-height: 1.08; letter-spacing: -.055em; }
.archive-hero-copy h1 em { color: var(--accent); font-weight: inherit; }
.archive-hero-copy > p { max-width: 520px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.9; }
.category-showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.category-tile { position: relative; display: block; min-height: 245px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.category-tile:nth-child(2), .category-tile:nth-child(4) { transform: translateY(28px); }
.category-tile img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.84) brightness(.82); transition: transform .5s ease, filter .3s ease; }
.category-tile:hover img { transform: scale(1.035); filter: saturate(1) brightness(.92); }
.category-tile-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,9,.08), rgba(7,7,9,.18) 45%, rgba(7,7,9,.9)); }
.category-tile > small { position: absolute; top: 15px; left: 16px; color: rgba(255,255,255,.68); font-size: 9px; letter-spacing: .16em; }
.category-tile > div { position: absolute; left: 18px; right: 18px; bottom: 17px; display: flex; align-items: end; justify-content: space-between; gap: 12px; color: white; }
.category-tile b { font-family: Georgia, "Songti SC", serif; font-size: 24px; font-weight: 400; }
.category-tile div span { color: rgba(255,255,255,.62); font-size: 9px; }

.announcement-line { border-block: 1px solid var(--line); background: var(--surface); }
.announcement-inner { min-height: 60px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; }
.announcement-label { padding: 4px 8px; border: 1px solid var(--accent); color: var(--accent); font-size: 9px; letter-spacing: .13em; }
.announcement-inner p { margin: 0; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.announcement-inner a { font-size: 11px; color: var(--text); }

.content-section { padding-block: 110px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 42px; }
.section-heading h2 { margin: 8px 0 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(34px, 4vw, 52px); font-weight: 400; letter-spacing: -.035em; }
.section-heading.compact h2 { font-size: 38px; }
.section-filters { display: flex; gap: 10px; }
.section-filters a, .section-filters button { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.section-filters .active, .section-filters a:hover { border-color: var(--text); color: var(--text); }
.section-link { display: inline-flex; align-items: center; gap: 13px; padding-bottom: 6px; border-bottom: 1px solid var(--line-strong); color: var(--muted); font-size: 11px; }
.section-link:hover { color: var(--text); }
.resource-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 18px; }
.resource-card { min-width: 0; transition: opacity .25s, transform .25s; }
.resource-card.is-extra { display: none; }
.resource-grid.expanded .is-extra { display: block; animation: cardIn .4s ease both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px); } }
.card-cover, .detail-cover, .hero-card, .mini-cover, .auth-art { position: relative; isolation: isolate; background: #24242a; }
.card-cover { display: block; overflow: hidden; aspect-ratio: .78; border-radius: 5px; }
.card-cover.has-real-cover { background: #16161a; }
.card-cover.has-real-cover::before, .card-cover.has-real-cover::after { display: none; }
.card-cover.has-real-cover > img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .6s cubic-bezier(.22,.8,.2,1), filter .35s; }
.resource-card:hover .card-cover.has-real-cover > img { transform: scale(1.035); filter: saturate(1.07); }
.real-cover-shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(7,7,9,.04), transparent 50%, rgba(7,7,9,.5)); }
.card-cover::before, .detail-cover::before, .hero-card::before, .auth-art::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 62% 32%, rgba(255,255,255,.35), transparent 2%), linear-gradient(132deg, transparent 32%, rgba(255,255,255,.17) 33%, transparent 47%); mix-blend-mode: screen; }
.card-cover::after, .detail-cover::after, .hero-card::after, .auth-art::after { content: ""; position: absolute; z-index: -1; width: 65%; aspect-ratio: 1; right: -15%; top: 18%; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; box-shadow: 0 0 0 32px rgba(255,255,255,.04), 0 0 0 75px rgba(255,255,255,.025); }
.cover-cobalt { background: radial-gradient(circle at 64% 22%, #7ab8e0 0, #2b5f92 22%, transparent 48%), linear-gradient(145deg, #05091a 25%, #132f5e 65%, #040613); }
.cover-amber { background: radial-gradient(circle at 72% 25%, #ffdd92 0, #c78239 25%, transparent 52%), linear-gradient(150deg, #1b0d08 20%, #6b3217 62%, #160b08); }
.cover-violet { background: radial-gradient(circle at 68% 23%, #d2b8ff 0, #7b5fc7 24%, transparent 51%), linear-gradient(150deg, #120c22 20%, #432c73 64%, #0a0710); }
.cover-jade { background: radial-gradient(circle at 65% 24%, #b7e0c5 0, #477e67 24%, transparent 52%), linear-gradient(150deg, #071510 20%, #244d3c 65%, #050d0a); }
.cover-ruby { background: radial-gradient(circle at 68% 22%, #ff9d9f 0, #a83146 24%, transparent 51%), linear-gradient(150deg, #19080b 20%, #661528 64%, #100407); }
.cover-aqua { background: radial-gradient(circle at 66% 22%, #c3f1f0 0, #4b9da3 23%, transparent 51%), linear-gradient(150deg, #061417 20%, #1d5e68 64%, #031012); }
.cover-obsidian { background: radial-gradient(circle at 66% 22%, #b9bac0 0, #4a4a50 23%, transparent 51%), linear-gradient(150deg, #050507 20%, #202026 64%, #020203); }
.cover-peach { background: radial-gradient(circle at 66% 22%, #ffe0d1 0, #d68974 23%, transparent 51%), linear-gradient(150deg, #27100c 20%, #8c4e3b 64%, #140806); }
.cover-silver { background: radial-gradient(circle at 68% 22%, #f3f5f8 0, #89939e 24%, transparent 51%), linear-gradient(150deg, #0c1014 20%, #414a54 64%, #06090c); }
.cover-forest { background: radial-gradient(circle at 66% 22%, #c9df9a 0, #547339 23%, transparent 51%), linear-gradient(150deg, #0b1207 20%, #2e4a1d 64%, #070b04); }
.cover-mauve { background: radial-gradient(circle at 68% 23%, #e3c7d9 0, #875d78 24%, transparent 51%), linear-gradient(150deg, #170e16 20%, #58394f 64%, #0d080c); }
.cover-indigo { background: radial-gradient(circle at 68% 23%, #b7c1ff 0, #505baf 24%, transparent 51%), linear-gradient(150deg, #090b1b 20%, #2e3678 64%, #050610); }
.cover-no { position: absolute; z-index: 2; top: 18px; left: 18px; color: rgba(255,255,255,.78); font-size: 10px; letter-spacing: .14em; }
.cover-word { position: absolute; z-index: 2; left: -8px; top: 42%; color: rgba(255,255,255,.2); font-family: Georgia, serif; font-size: clamp(30px, 3.5vw, 55px); font-style: italic; letter-spacing: -.06em; text-transform: uppercase; white-space: nowrap; transform: rotate(-90deg) translateX(-10%); transform-origin: left top; }
.cover-orbit { position: absolute; z-index: 2; width: 50%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; top: 29%; right: 9%; }
.cover-orbit::before, .cover-orbit::after { content: ""; position: absolute; border-radius: 50%; }
.cover-orbit::before { inset: 17%; border: 1px solid rgba(255,255,255,.18); }
.cover-orbit::after { width: 8px; height: 8px; left: 10%; top: 70%; background: rgba(255,255,255,.8); box-shadow: 0 0 18px white; }
.access-badge { position: absolute; z-index: 3; right: 13px; top: 13px; padding: 5px 8px; border-radius: 3px; background: rgba(6,6,8,.66); backdrop-filter: blur(8px); color: white; font-size: 8px; letter-spacing: .12em; }
.access-badge.free { background: rgba(58,151,117,.75); }
.access-badge.premium { background: rgba(197,152,76,.82); }
.cover-metrics { position: absolute; z-index: 3; right: 14px; bottom: 13px; padding: 4px 8px; border-radius: 3px; background: rgba(6,6,8,.55); color: rgba(255,255,255,.78); font-size: 9px; letter-spacing: .08em; backdrop-filter: blur(5px); }
.card-cover { transition: transform .45s cubic-bezier(.22,.8,.2,1), filter .45s; }
.resource-card:hover .card-cover { transform: translateY(-4px); filter: saturate(1.12); }
.resource-card:hover .cover-orbit { animation: slowspin 6s linear infinite; }
@keyframes slowspin { to { transform: rotate(360deg); } }
.card-body { padding: 16px 3px 0; }
.card-kicker { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.card-kicker a { color: var(--accent); }
.album-card-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.album-card-tags a { padding: 2px 7px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 999px; background: var(--accent-soft); }
.card-body h3 { margin: 10px 0 8px; font-family: Georgia, "Songti SC", serif; font-size: 19px; line-height: 1.45; font-weight: 500; letter-spacing: -.02em; }
.card-body h3 a:hover { color: var(--accent); }
.card-body p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.card-footer span { display: flex; align-items: center; gap: 6px; color: var(--muted-2); font-size: 10px; }
.card-footer svg { width: 13px; }
.card-footer button { border: 0; padding: 0; background: none; color: var(--muted-2); cursor: pointer; }
.card-footer button.active { color: var(--accent); }
.card-footer button.active svg { fill: currentColor; }
.load-more-wrap { display: flex; justify-content: center; margin-top: 52px; }
.load-more { display: flex; align-items: center; gap: 18px; padding: 13px 22px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.load-more:hover { color: var(--text); background: var(--surface); }
.album-category-nav { display: flex; gap: 9px; margin: -44px 0 42px; padding-bottom: 20px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.album-category-nav::-webkit-scrollbar { display: none; }
.album-category-nav a { flex: 0 0 auto; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; }
.album-category-nav a:hover, .album-category-nav a.active { border-color: var(--text); background: var(--text); color: var(--bg); }
.album-content-tag-nav { display: flex; align-items: center; gap: 9px; margin: -44px 0 42px; padding-bottom: 20px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.album-content-tag-nav::-webkit-scrollbar { display: none; }
.album-content-tag-nav > span { flex: 0 0 auto; margin-right: 8px; color: var(--muted-2); font-size: 8px; letter-spacing: .16em; }
.album-content-tag-nav a { flex: 0 0 auto; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; }
.album-content-tag-nav a:hover, .album-content-tag-nav a.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.album-content-tag-nav sup { margin-left: 6px; color: var(--muted-2); font-size: 7px; }
.numbered-pagination { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 60px; padding: 22px 0; border-block: 1px solid var(--line); }
.numbered-pagination p { flex: 0 0 auto; margin: 0; color: var(--muted); font-size: 11px; }
.numbered-pagination p b { color: var(--text); font-size: 13px; }
.numbered-pagination nav { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.numbered-pagination a, .numbered-pagination nav > span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding-inline: 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; }
.numbered-pagination a:hover, .numbered-pagination .page-number.active { border-color: var(--text); background: var(--text); color: var(--bg); }
.numbered-pagination .page-direction { min-width: 80px; }
.numbered-pagination .disabled { opacity: .32; cursor: not-allowed; }
.numbered-pagination .page-ellipsis { min-width: 24px; padding: 0; border-color: transparent; }
.page-size-control { display:flex; align-items:center; gap:8px; margin-left:auto; color:var(--muted); font-size:11px; white-space:nowrap; }
.page-size-control select { padding:8px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--text); }

.live-section { padding-bottom: 100px; }
.demo-section { padding-top: 80px; border-top: 1px solid var(--line); }
.source-status { display: flex; align-items: center; gap: 9px; margin: -22px 0 26px; color: var(--muted); font-size: 9px; letter-spacing: .05em; }
.source-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); }
.source-status.ok i { background: var(--success); box-shadow: 0 0 13px var(--success); }
.source-status b { margin-left: auto; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--success) 45%, transparent); border-radius: 999px; color: var(--success); font-size: 7px; letter-spacing: .12em; }
.integration-placeholder { min-height: 170px; display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 28px; padding: 32px 38px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(120deg, var(--surface), color-mix(in srgb, var(--surface) 90%, var(--accent-soft))); }
.integration-placeholder.large { min-height: 270px; grid-template-columns: 130px 1fr auto; }
.integration-placeholder > div:first-child { display: grid; justify-items: center; gap: 9px; }
.integration-icon { display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent); font-size: 23px; box-shadow: inset 0 0 25px var(--accent-soft); }
.integration-placeholder small { color: var(--muted-2); font-size: 7px; letter-spacing: .12em; }
.integration-placeholder h2, .integration-placeholder h3 { margin: 0 0 7px; font-family: Georgia, "Songti SC", serif; font-weight: 400; }
.integration-placeholder h2 { font-size: 32px; }.integration-placeholder h3 { font-size: 24px; }
.integration-placeholder p { max-width: 710px; margin: 0; color: var(--muted); font-size: 12px; }
.integration-placeholder code { display: inline-flex; margin-top: 14px; padding: 5px 8px; border-radius: 5px; background: var(--bg); color: var(--accent); font-size: 9px; }
.connection-badge { padding: 6px 9px; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold); font-size: 7px; letter-spacing: .12em; white-space: nowrap; }
.connection-badge.error { border-color: #e46d6d; color: #e46d6d; }

.editorial-band { padding-block: 105px; background: #17151a; color: #f5f1eb; }
html[data-theme="light"] .editorial-band { background: #242126; }
.editorial-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10vw; align-items: center; }
.editorial-copy h2 { margin: 14px 0 22px; font-family: Georgia, "Songti SC", serif; font-size: clamp(40px, 4.7vw, 67px); font-weight: 400; line-height: 1.16; letter-spacing: -.045em; }
.editorial-copy h2 em { color: var(--accent); font-weight: inherit; }
.editorial-copy p { margin: 0 0 33px; color: rgba(255,255,255,.55); max-width: 470px; }
.feature-list { border-top: 1px solid rgba(255,255,255,.12); }
.feature-list a { display: grid; grid-template-columns: 40px 1fr auto; gap: 18px; align-items: center; padding: 23px 4px; border-bottom: 1px solid rgba(255,255,255,.12); transition: padding .2s, background .2s; }
.feature-list a:hover { padding-inline: 12px; background: rgba(255,255,255,.025); }
.feature-list > a > span { color: var(--accent); font-family: Georgia, serif; font-size: 14px; }
.feature-list small { color: rgba(255,255,255,.38); font-size: 9px; letter-spacing: .1em; }
.feature-list h3 { margin: 5px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 18px; font-weight: 400; }
.feature-list b { font-size: 18px; font-weight: 300; }
.explore-section { padding-block: 105px; }
.tag-cloud { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 13px; padding: 36px 5vw; border-block: 1px solid var(--line); }
.tag-cloud a { padding: 8px 14px; color: var(--muted); font-family: Georgia, "Songti SC", serif; transition: color .2s, transform .2s; }
.tag-cloud a:hover { color: var(--accent); transform: translateY(-2px); }
.tag-cloud sup { margin-left: 5px; color: var(--muted-2); font-family: sans-serif; font-size: 8px; }
.tag-size-1 { font-size: 16px; }.tag-size-2 { font-size: 21px; }.tag-size-3 { font-size: 27px; }.tag-size-4 { font-size: 35px; }
.newsletter { display: grid; grid-template-columns: 1fr .8fr auto; align-items: center; gap: 60px; margin-bottom: 110px; padding: 50px 55px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(120deg, var(--surface), color-mix(in srgb, var(--surface) 80%, var(--accent-soft))); }
.newsletter h2 { margin: 9px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 31px; font-weight: 400; }
.newsletter p { color: var(--muted); font-size: 13px; }

.site-footer { padding: 75px 0 105px; border-top: 1px solid var(--line); background: var(--surface); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 7vw; }
.footer-grid h3 { margin: 0 0 20px; color: var(--muted); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.footer-grid > div:not(:first-child) { display: flex; flex-direction: column; align-items: start; gap: 11px; }
.footer-grid > div > a:not(.brand) { color: var(--muted); font-size: 12px; }
.footer-grid > div > a:hover { color: var(--text); }
.footer-brand p, .footer-note p { margin-top: 22px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.footer-note p { margin: 0; }
.footer-bottom { display: flex; justify-content: space-between; margin-top: 55px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 9px; letter-spacing: .12em; }
.mobile-dock { display: none; }

.page-hero { min-height: 340px; display: flex; justify-content: space-between; align-items: end; gap: 30px; padding-block: 90px 65px; border-bottom: 1px solid var(--line); }
.page-hero h1 { margin: 12px 0 10px; font-family: Georgia, "Songti SC", serif; font-size: clamp(45px, 6vw, 78px); font-weight: 400; letter-spacing: -.05em; }
.page-hero p { margin: 0; color: var(--muted); }
.page-count { display: grid; justify-items: end; color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.page-count b { font-family: Georgia, serif; color: var(--text); font-size: 44px; font-weight: 400; line-height: 1; }
.listing-section { padding-top: 55px; }
.album-browser-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px 28px; padding-block: clamp(42px, 6vw, 78px) 18px; }
.album-browser-title h1 { margin: 12px 0 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(44px, 6vw, 72px); font-weight: 400; letter-spacing: -.04em; }
.album-subcategory-tabs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 0; border-top: 1px solid var(--line); }
.album-subcategory-tabs a { padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.album-subcategory-tabs a:hover, .album-subcategory-tabs a.active { border-color: var(--text); color: var(--text); }
.album-browser-head > .archive-search-form { grid-column: 1 / -1; width: min(760px, 100%); margin: 0; }
.album-latest-section { padding-top: 24px; }
.album-category-sections { display: grid; gap: clamp(54px, 8vw, 100px); padding-block: 20px 110px; }
.album-category-section .section-heading { margin-bottom: 24px; }
.empty-state { display: grid; place-items: center; min-height: 430px; text-align: center; }
.empty-state > span { font-size: 60px; color: var(--line-strong); }
.empty-state > .no-data-icon { display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid var(--line); border-radius: 24px 8px 24px 8px; background: var(--surface); color: var(--muted-2); }
.no-data-icon svg { width: 34px; height: 34px; stroke-width: 1.35; }
.empty-state h2 { margin: 10px 0 4px; font-family: Georgia, "Songti SC", serif; font-size: 34px; font-weight: 400; }
.empty-state p { margin: 0 0 26px; color: var(--muted); }

.detail-hero { padding-block: 70px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), var(--bg)); }
.detail-hero-grid { display: grid; grid-template-columns: minmax(280px, 470px) 1fr; gap: 7vw; align-items: center; }
.detail-cover { overflow: hidden; aspect-ratio: .85; border-radius: 7px; box-shadow: var(--shadow); }
.detail-cover .cover-word { font-size: 58px; }
.detail-volume { position: absolute; right: 18px; bottom: 17px; color: rgba(255,255,255,.62); font-size: 9px; letter-spacing: .16em; }
.breadcrumbs { display: flex; gap: 9px; color: var(--muted); font-size: 11px; }
.breadcrumbs a:hover { color: var(--text); }
.access-label { display: inline-flex; margin-top: 34px; padding: 5px 9px; border: 1px solid var(--accent); color: var(--accent); font-size: 9px; letter-spacing: .1em; }
.access-label.free { border-color: var(--success); color: var(--success); }
.access-label.premium { border-color: var(--gold); color: var(--gold); }
.detail-intro h1 { max-width: 750px; margin: 18px 0 23px; font-family: Georgia, "Songti SC", serif; font-size: clamp(42px, 5vw, 68px); font-weight: 400; line-height: 1.18; letter-spacing: -.045em; }
.detail-intro > p { max-width: 680px; color: var(--muted); font-size: 15px; line-height: 1.9; }
.detail-meta { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 38px; padding-block: 20px; border-block: 1px solid var(--line); }
.detail-meta div { display: grid; gap: 6px; padding-left: 20px; border-left: 1px solid var(--line); }
.detail-meta div:first-child { padding-left: 0; border: 0; }
.detail-meta small { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.detail-meta b { font-size: 13px; font-weight: 600; }
.detail-actions { display: flex; gap: 10px; margin-top: 28px; }
.square-button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; cursor: pointer; }
.square-button.active { border-color: var(--accent); color: var(--accent); }
.square-button.active svg { fill: currentColor; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 55px; padding-block: 70px 110px; }
.download-note { padding: 38px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.note-label { color: var(--gold); font-size: 9px; letter-spacing: .14em; }
.download-note h2 { margin: 7px 0 12px; font-family: Georgia, "Songti SC", serif; font-size: 30px; font-weight: 400; }
.download-note > p { color: var(--muted); }
.note-grid { display: grid; gap: 12px; margin-top: 25px; padding-top: 22px; border-top: 1px solid var(--line); }
.note-grid span { color: var(--muted); font-size: 12px; }
.note-grid b { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px; border-radius: 50%; background: var(--surface-3); color: var(--accent); font-size: 9px; }
.article-copy { padding: 65px 26px 55px; }
.article-copy h2 { margin: 9px 0 24px; font-family: Georgia, "Songti SC", serif; font-size: 43px; font-weight: 400; }
.article-copy h3 { margin-top: 42px; font-size: 17px; }
.article-copy p, .article-copy li { color: var(--muted); line-height: 2; }
.article-copy blockquote { margin: 35px 0; padding: 28px 34px; border-left: 2px solid var(--accent); background: var(--surface); font-family: Georgia, "Songti SC", serif; font-size: 19px; line-height: 1.8; }
.article-copy ul { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.article-copy li { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); }
.article-copy li strong { color: var(--text); font-weight: 500; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.detail-tags a { padding: 6px 12px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 10px; }
.detail-tags a:hover { color: var(--accent); }
.sticky-block { position: sticky; top: 25px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.sidebar-block h2 { margin: 8px 0 20px; font-family: Georgia, "Songti SC", serif; font-size: 27px; font-weight: 400; }
.popular-list { display: grid; }
.popular-list a { display: grid; grid-template-columns: 32px 1fr; gap: 11px; padding: 14px 0; border-top: 1px solid var(--line); }
.popular-list > a > span { color: var(--accent); font-family: Georgia, serif; font-size: 13px; }
.popular-list div { display: grid; gap: 5px; }
.popular-list b { font-family: Georgia, "Songti SC", serif; font-size: 13px; font-weight: 400; line-height: 1.55; }
.popular-list small { color: var(--muted); font-size: 9px; }
.comments-section { padding-top: 30px; border-top: 1px solid var(--line); }
.comment-form { display: grid; grid-template-columns: 220px 1fr auto; gap: 10px; align-items: start; margin-bottom: 35px; }
.comment-form input, .comment-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: var(--surface); color: var(--text); }
.comment-form input { height: 48px; padding: 0 15px; }
.comment-form textarea { min-height: 92px; padding: 13px 15px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--accent); }
.comment-list { display: grid; }
.comment { display: grid; grid-template-columns: 38px 1fr; gap: 15px; padding: 22px 0; border-top: 1px solid var(--line); }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-family: Georgia, serif; }
.comment-head { display: flex; align-items: center; gap: 12px; }
.comment-head b { font-size: 12px; }
.comment-head time { color: var(--muted-2); font-size: 9px; }
.comment p { margin: 6px 0 0; color: var(--muted); }
.related-section { border-top: 1px solid var(--line); }

.live-album-hero { padding-block: 70px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), var(--bg)); }
.live-album-hero-grid { display: grid; grid-template-columns: minmax(310px, 520px) 1fr; gap: 7vw; align-items: center; }
.live-cover { position: relative; overflow: hidden; aspect-ratio: .9; border-radius: 7px; background: radial-gradient(circle at 65% 25%, #698dc3, #20334f 42%, #0a0e15 78%); box-shadow: var(--shadow); }
.live-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(5,5,7,.55)); }
.live-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.live-cover-label, .live-cover-index { position: absolute; z-index: 2; color: white; }
.live-cover-label { left: 19px; bottom: 19px; font-size: 8px; letter-spacing: .18em; }
.live-cover-index { right: 18px; top: 17px; font-family: Georgia, serif; font-size: 21px; }
.album-path { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px !important; }
.album-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.album-detail-tags a { padding: 6px 11px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 10px; }
.partial-note { margin-top: 14px !important; color: var(--gold) !important; font-size: 10px !important; }
.live-media-section { padding-block: 90px 120px; }
.media-legend { display: flex; gap: 20px; color: var(--muted); font-size: 9px; }
.media-legend span { display: flex; align-items: center; gap: 7px; }
.media-legend i { width: 6px; height: 6px; border-radius: 50%; }
.image-dot { background: var(--success); }.video-dot { background: var(--gold); }
.media-grid { columns: 4; column-gap: 12px; }
.media-tile { position: relative; overflow: hidden; width: 100%; display: block; margin: 0 0 12px; padding: 0; break-inside: avoid; border: 0; border-radius: 4px; background: var(--surface-2); color: white; cursor: zoom-in; }
.media-tile img { width: 100%; height: auto; min-height: 150px; display: block; object-fit: cover; transition: transform .45s ease, filter .3s; }
.media-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.63)); opacity: .65; transition: opacity .25s; }
.media-tile:hover img { transform: scale(1.025); filter: saturate(1.08); }
.media-tile:hover::after { opacity: 1; }
.media-index, .media-action, .video-badge { position: absolute; z-index: 2; }
.media-index { top: 10px; left: 10px; font-size: 8px; letter-spacing: .1em; text-shadow: 0 1px 5px #000; }
.media-action { right: 11px; bottom: 10px; font-size: 8px; letter-spacing: .04em; opacity: 0; transform: translateY(4px); transition: .25s; }
.media-tile:hover .media-action { opacity: 1; transform: none; }
.media-tile.is-video { cursor: pointer; }
.video-badge { left: 10px; bottom: 10px; padding: 4px 7px; border-radius: 3px; background: rgba(5,5,7,.7); font-size: 7px; letter-spacing: .1em; backdrop-filter: blur(5px); }
.gallery-lightbox { position: fixed; z-index: 180; inset: 0; display: grid; grid-template-rows: 1fr auto; padding: 35px; background: rgba(5,5,7,.96); opacity: 0; visibility: hidden; transition: .25s; backdrop-filter: blur(18px); }
.gallery-lightbox.open { opacity: 1; visibility: visible; }
.gallery-close { position: absolute; z-index: 3; top: 20px; right: 26px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(0,0,0,.3); color: white; font-size: 24px; cursor: pointer; }
.gallery-stage { position: relative; display: grid; place-items: center; min-height: 0; }
.gallery-stage img { z-index: 2; max-width: 100%; max-height: calc(100dvh - 120px); object-fit: contain; opacity: 0; transition: opacity .25s; }
.gallery-stage img.loaded { opacity: 1; }
.gallery-stage video { z-index: 2; width: min(100%, 1180px); max-height: calc(100dvh - 120px); border-radius: 10px; background: #000; box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.gallery-loader { position: absolute; z-index: 1; opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity .22s, visibility .22s, transform .22s; }
.gallery-loader.active { opacity: 1; visibility: visible; transform: none; }
.gallery-caption { display: flex; justify-content: space-between; gap: 25px; padding-top: 18px; color: rgba(255,255,255,.7); font-size: 10px; }
.gallery-caption a { color: var(--accent); }

.pipixia-loader { display: grid; justify-items: center; gap: 12px; min-width: 168px; padding: 18px 24px 16px; border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(18,19,27,.82)); color: rgba(255,255,255,.72); box-shadow: 0 24px 65px rgba(0,0,0,.28); backdrop-filter: blur(18px); }
.pipixia-loader.is-compact { min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; }
.pipixia-loader-core { position: relative; width: 76px; height: 76px; display: block; }
.pipixia-loader-orbit { position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,.14); border-top-color: #e95891; border-right-color: rgba(113,132,201,.58); border-radius: 50%; box-shadow: 0 0 20px rgba(232,88,145,.10); animation: pipixia-orbit 1.9s linear infinite; }
.pipixia-loader-orbit::after { content: ""; position: absolute; right: 5px; bottom: 8px; width: 5px; height: 5px; border-radius: 50%; background: #e95891; box-shadow: 0 0 9px rgba(232,88,145,.88); }
.pipixia-loader-shrimp-wrap { position: absolute; inset: 14px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(13,14,20,.72); box-shadow: 0 0 20px rgba(232,88,145,.28); }
.pipixia-loader-shrimp { width: 88%; height: 88%; overflow: visible; fill: #ff3f88; }
.pipixia-loader-shrimp .shrimp-eye { fill: #12131a; }
.pipixia-loader-shrimp .shrimp-antennae, .pipixia-loader-shrimp .shrimp-legs { fill: none; stroke: #ff3f88; stroke-width: 3.8; stroke-linecap: round; }
.pipixia-loader-shrimp .shrimp-body rect { transform-box: fill-box; transform-origin: center; animation: pipixia-body-wave 1.55s ease-in-out infinite alternate; }
.pipixia-loader-shrimp .shrimp-body rect:nth-child(2) { animation-delay: -.12s; }.pipixia-loader-shrimp .shrimp-body rect:nth-child(3) { animation-delay: -.24s; }.pipixia-loader-shrimp .shrimp-body rect:nth-child(4) { animation-delay: -.36s; }.pipixia-loader-shrimp .shrimp-body rect:nth-child(5) { animation-delay: -.48s; }.pipixia-loader-shrimp .shrimp-body rect:nth-child(6) { animation-delay: -.60s; }.pipixia-loader-shrimp .shrimp-body rect:nth-child(7) { animation-delay: -.72s; }
.pipixia-loader-shrimp .shrimp-tail { transform-box: fill-box; transform-origin: left center; animation: pipixia-tail-flick .72s ease-in-out infinite alternate; }
.pipixia-loader-shrimp .shrimp-antennae { transform-box: fill-box; transform-origin: left center; animation: pipixia-antenna-sweep 1.3s ease-in-out infinite alternate; }
.pipixia-loader-label { font-size: 9px; font-weight: 600; letter-spacing: .16em; }
.pipixia-loader-track { position: relative; overflow: hidden; width: 86px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.09); }
.pipixia-loader-track i { position: absolute; inset-block: 0; width: 34%; border-radius: inherit; background: linear-gradient(90deg, transparent, #e95891, rgba(113,132,201,.45), transparent); animation: pipixia-track 1.9s ease-in-out infinite; }
@keyframes pipixia-body-wave { from { transform: translateY(-.7px) rotate(-1.2deg); } to { transform: translateY(.9px) rotate(1.5deg); } }
@keyframes pipixia-tail-flick { from { transform: rotate(-8deg); } to { transform: rotate(12deg); } }
@keyframes pipixia-antenna-sweep { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
@keyframes pipixia-orbit { to { transform: rotate(360deg); } }
@keyframes pipixia-track {
  0% { left: -38%; opacity: 0; }
  18%, 72% { opacity: 1; }
  100% { left: 104%; opacity: 0; }
}

.help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding-block: 60px 110px; }
.help-grid article { min-height: 230px; padding: 35px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.help-grid article > span { color: var(--accent); font-family: Georgia, serif; }
.help-grid h2 { margin: 35px 0 10px; font-family: Georgia, "Songti SC", serif; font-size: 26px; font-weight: 400; }
.help-grid p { color: var(--muted); }
.auth-main { min-height: calc(100svh - 82px); display: grid; place-items: center; padding: clamp(36px, 5.5vw, 76px) 24px; }
.auth-card { width: min(1160px, 100%); min-height: 650px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.auth-art { min-height: 650px; padding: clamp(26px, 3vw, 42px); overflow: hidden; }
.auth-art p { position: absolute; z-index: 3; left: 35px; bottom: 34px; margin: 0; color: white; font-family: Georgia, "Songti SC", serif; font-size: 29px; line-height: 1.45; }
.auth-form { width: 100%; max-width: 560px; min-width: 0; justify-self: center; display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 5vw, 76px); }
.auth-form > .eyebrow { font-size: 11px; letter-spacing: .2em; }
.auth-form h1 { margin: 15px 0 10px; font-family: Georgia, "Songti SC", serif; font-size: clamp(36px, 3vw, 50px); font-weight: 400; line-height: 1.2; letter-spacing: .03em; word-break: keep-all; }
.auth-form > p { max-width: 30rem; margin: 0 0 34px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.auth-form label { display: grid; gap: 9px; margin-bottom: 20px; color: var(--muted); font-size: 12px; }
.auth-form input:not([type="checkbox"]) { width: 100%; min-width: 0; height: 54px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 12px; outline: 0; background: color-mix(in srgb, var(--bg) 82%, var(--surface-2)); color: var(--text); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.auth-form input:not([type="checkbox"])::placeholder { color: var(--muted-2); }
.auth-form input:not([type="checkbox"]):focus-visible { border-color: var(--accent); background: var(--bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.auth-form input[type="checkbox"] { accent-color: var(--accent); }
.email-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.email-code-row label { min-width: 0; }
.email-code-send { height: 54px; margin-bottom: 20px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-2); color: var(--text); cursor: pointer; transition: border-color .2s ease, color .2s ease, opacity .2s ease; }
.email-code-send:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.email-code-send:disabled { cursor: wait; opacity: .65; }
.email-code-status { min-height: 18px; margin: -10px 0 15px; color: var(--muted); font-size: 11px; }
.email-code-config-note { margin: -4px 0 18px; color: var(--muted-2); font-size: 11px; line-height: 1.7; }
.form-error { margin: 0 0 20px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 8px; background: var(--accent-soft); color: var(--text); font-size: 11px; }
.form-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; font-size: 11px; }
.form-row .checkbox { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 7px; margin: 0; }
.form-row a, .auth-form > small a { color: var(--accent); }
.auth-form .primary-button.wide { min-height: 56px; margin-top: 2px; border-radius: 14px; font-size: 14px; letter-spacing: .02em; }
.auth-form > small { margin-top: 24px; color: var(--muted); text-align: center; font-size: 12px; }
.account-main { padding-block: 54px 120px; }
.account-dashboard-hero { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 38px; overflow: hidden; padding: clamp(28px, 4vw, 52px); border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(circle at 88% 0, rgba(233,88,145,.2), transparent 34%), radial-gradient(circle at 12% 115%, rgba(74,95,161,.2), transparent 38%), linear-gradient(145deg, color-mix(in srgb,var(--surface) 95%,#302039), color-mix(in srgb,var(--bg) 88%,#151b2a)); box-shadow: 0 36px 90px -58px rgba(0,0,0,.95); }
.account-dashboard-hero::after { position:absolute; right:-100px; bottom:-190px; width:470px; height:470px; border:1px solid rgba(255,255,255,.055); border-radius:50%; box-shadow:0 0 0 55px rgba(255,255,255,.018),0 0 0 110px rgba(255,255,255,.012); content:""; pointer-events:none; }
.account-identity { position:relative; z-index:1; display:flex; align-items:center; gap:24px; min-width:0; }
.account-hero-avatar { width:104px; height:104px; flex:0 0 104px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:30px; background:linear-gradient(145deg,rgba(233,88,145,.32),rgba(77,55,119,.2)); box-shadow:0 22px 48px -24px rgba(233,88,145,.55); color:#fff; font:42px Georgia,serif; }
.account-hero-avatar img { width:100%; height:100%; object-fit:cover; }
.account-identity-copy { min-width:0; }
.account-identity-copy h1 { margin:12px 0 7px; overflow:hidden; font-family:Georgia,"Songti SC",serif; font-size:clamp(38px,5vw,68px); font-weight:400; line-height:1; text-overflow:ellipsis; white-space:nowrap; }
.account-identity-copy > p { margin:0; overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.account-identity-meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:15px; color:var(--muted-2); font-size:9px; }
.account-identity-meta span { display:inline-flex; align-items:center; gap:7px; }
.status-dot { width:6px; height:6px; border-radius:50%; background:#6ed6a5; box-shadow:0 0 12px rgba(110,214,165,.7); }
.account-hero-actions { position:relative; z-index:1; display:flex; align-items:center; align-self:start; gap:10px; }
.membership-badge { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 14px; border:1px solid var(--line-strong); border-radius:999px; background:rgba(255,255,255,.035); color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.08em; white-space:nowrap; }
.membership-badge svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.membership-badge.monthly, .membership-badge.annual, .membership-badge.lifetime { border-color: var(--gold); color: var(--gold); }
.account-edit-link,.account-logout-button { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 13px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.025); color:var(--muted); font-size:9px; cursor:pointer; }
.account-edit-link:hover { border-color:var(--accent); color:var(--accent); }
.account-logout-button:hover { border-color:rgba(255,255,255,.22); color:var(--text); }
.account-stat-strip { position:relative; z-index:1; grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:8px; border:1px solid rgba(255,255,255,.09); border-radius:18px; background:rgba(9,11,17,.42); backdrop-filter:blur(16px); }
.account-stat-strip article { position:relative; min-width:0; display:grid; gap:6px; padding:20px 22px 20px 64px; border-right:1px solid rgba(255,255,255,.075); }
.account-stat-strip article:last-child { border-right:0; }
.account-stat-icon { position:absolute; left:20px; top:22px; display:grid; place-items:center; width:30px; height:30px; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line)); border-radius:10px; background:var(--accent-soft); color:var(--accent); }
.account-stat-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.account-stat-icon.coins { border-color:color-mix(in srgb,var(--gold) 34%,var(--line)); background:color-mix(in srgb,var(--gold) 10%,transparent); color:var(--gold); }
.account-stat-icon.owned { border-color:rgba(113,149,231,.24); background:rgba(113,149,231,.09); color:#8ba9ed; }
.account-stat-icon.liked { border-color:rgba(233,88,145,.26); background:rgba(233,88,145,.1); color:#ee77a6; }
.account-stat-strip span { color:var(--muted-2); font-size:9px; letter-spacing:.08em; }
.account-stat-strip strong { overflow:hidden; color:var(--text); font:26px/1.05 Georgia,"Songti SC",serif; text-overflow:ellipsis; white-space:nowrap; }
.account-stat-strip small { color:var(--muted); font-size:9px; }
.account-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr); gap:18px; align-items:start; margin-top:18px; }
.account-side-stack { display:grid; gap:18px; }
.account-panel { padding:clamp(24px,3vw,38px); border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,#33233a),color-mix(in srgb,var(--surface) 98%,#111623)); box-shadow:0 25px 65px -50px rgba(0,0,0,.95); }
.account-panel-heading { display:flex; align-items:start; justify-content:space-between; gap:20px; margin-bottom:27px; }
.account-panel-heading.compact { align-items:center; margin-bottom:20px; }
.account-panel-heading h2,.account-panel h2 { margin:9px 0 0; font-family:Georgia,"Songti SC",serif; font-size:28px; font-weight:400; }
.account-panel-heading > p { max-width:220px; margin:3px 0 0; color:var(--muted-2); font-size:10px; line-height:1.7; text-align:right; }
.account-profile-form { display:grid; gap:20px; }
.account-profile-avatar-row { display:flex; align-items:center; gap:17px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.account-profile-form label { display:grid; align-content:start; gap:8px; color:var(--muted); font-size:10px; }
.account-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.account-form-grid > label { grid-template-rows:auto 48px auto; }
.account-profile-form input { width:100%; min-height:48px; padding:11px 14px; border:1px solid var(--line); border-radius:12px; outline:0; background:color-mix(in srgb,var(--bg) 80%,var(--surface-2)); color:var(--text); transition:border-color .2s,box-shadow .2s,background .2s; }
.account-profile-form input:focus { border-color:var(--accent); background:var(--bg); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent); }
.account-profile-form input[readonly] { opacity:.68; }
.account-profile-form input[type="file"] { position:absolute; width:1px; height:1px; min-height:0; overflow:hidden; opacity:0; }
.account-profile-form input[type="hidden"] { display:none; }
.account-profile-form label small { color:var(--muted-2); font-size:9px; line-height:1.5; }
.account-avatar-picker { position:relative; cursor:pointer; transition:transform .2s,border-color .2s,box-shadow .2s; }
.account-avatar-picker:hover { border-color:var(--accent); box-shadow:0 14px 34px -22px color-mix(in srgb,var(--accent) 70%,transparent); transform:translateY(-2px); }
.account-avatar-edit { position:absolute; right:6px; bottom:6px; width:28px; height:28px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:10px; background:rgba(10,10,15,.82); color:#fff; backdrop-filter:blur(12px); transition:background .2s,transform .2s; }
.account-avatar-picker:hover .account-avatar-edit { background:var(--accent); transform:scale(1.05); }
.account-avatar-edit svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.account-avatar-help { display:grid; gap:5px; }
.account-avatar-help b { color:var(--text); font-size:11px; font-weight:500; }
.account-avatar-help small { color:var(--muted-2); font-size:9px; }
.adult-content-setting { display:grid; gap:9px; margin:0; padding:16px 17px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.018); }
.adult-content-setting legend { padding:0 7px; color:var(--muted); font-size:10px; }
.adult-content-toggle { display:flex !important; align-items:center; justify-content:space-between; gap:18px !important; color:var(--text) !important; cursor:pointer; }
.adult-content-toggle > span { display:grid; gap:4px; }
.adult-content-toggle b { font-size:11px; font-weight:500; }
.account-profile-form .adult-content-toggle input { width:18px; min-height:18px; height:18px; margin:0; accent-color:var(--accent); }
.account-avatar-preview { width:78px; height:78px; flex:0 0 78px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line-strong); border-radius:24px; background:linear-gradient(145deg,var(--accent-soft),rgba(75,45,113,.14)); color:var(--accent); font:28px Georgia,serif; }
.account-avatar-preview img { width:100%; height:100%; object-fit:cover; }
.account-form-actions { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:4px; }
.account-form-actions > span { color:var(--muted-2); font-size:9px; }
.account-form-actions .primary-button { min-height:46px; padding-inline:20px; }
.wallet-symbol { display:grid; place-items:center; width:38px; height:38px; border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line)); border-radius:12px; background:var(--accent-soft); color:var(--accent); }
.wallet-symbol svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.wallet-balance-card { position:relative; display:grid; gap:7px; overflow:hidden; padding:24px; border:1px solid var(--line); border-radius:18px; background:radial-gradient(circle at 90% 10%,var(--accent-soft),transparent 45%),color-mix(in srgb,var(--bg) 88%,#171b29); }
.wallet-balance-card::after { position:absolute; right:-22px; bottom:-38px; color:rgba(255,255,255,.035); font:112px/1 Georgia,serif; content:"¥"; }
.wallet-balance-card span,.wallet-balance-secondary span { color:var(--muted); font-size:11px; }
.wallet-balance-card strong { color:var(--accent); font-family:Georgia,serif; font-size:46px; font-weight:400; }
.wallet-balance-card small,.account-wallet-note { color:var(--muted-2); font-size:10px; line-height:1.7; }
.wallet-balance-secondary { display:flex; justify-content:space-between; padding:15px 4px; border-bottom:1px solid var(--line); }
.wallet-balance-secondary b { color:var(--gold); }
.account-wallet-panel h3 { margin:25px 0 10px; font-size:14px; font-weight:500; }
.coin-transaction-list { margin:0; padding:0; list-style:none; }
.coin-transaction-list li { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line); font-size:11px; }
.coin-transaction-list li span { display:grid; gap:4px; }.coin-transaction-list small { color:var(--muted-2); font-size:9px; }
.coin-transaction-list b.positive { color:#75cba4; }.coin-transaction-list b.negative { color:var(--accent); }
.account-inline-empty { padding:15px; border:1px dashed var(--line); border-radius:12px; color:var(--muted-2); font-size:10px; text-align:center; }
.account-benefit-list { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.account-benefit-list li { display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); }
.account-benefit-list i { display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(110,214,165,.16); border-radius:9px; background:rgba(110,214,165,.1); color:#75cba4; font-style:normal; font-size:10px; }
.account-benefit-list i svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.account-benefit-list span { display:grid; gap:3px; }.account-benefit-list b { font-size:10px; font-weight:500; }.account-benefit-list small { color:var(--muted-2); font-size:9px; }
.account-membership-note { margin:18px 0 0; color:var(--gold); font-size:9px; }
.account-admin-link { display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding:13px 15px; border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line)); border-radius:12px; background:var(--accent-soft); color:var(--accent); font-size:10px; }
.purchased-products-section { padding-top:38px; }
.purchased-product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.purchased-product { min-height:145px; display:grid; align-content:space-between; gap:15px; padding:18px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,#302039),color-mix(in srgb,var(--surface) 98%,#131923)); transition:transform .2s,border-color .2s; }
.purchased-product:hover { border-color:color-mix(in srgb,var(--accent) 38%,var(--line)); transform:translateY(-3px); }
.purchased-product-kind { color:var(--accent); font-size:9px; letter-spacing:.08em; }.purchased-product b { font-family:Georgia,"Songti SC",serif; font-size:16px; font-weight:400; line-height:1.5; }.purchased-product small { color:var(--muted-2); font-size:9px; }
.compact-empty { padding:20px; }
.locked-page { min-height: 680px; display: grid; place-items: center; padding-block: 80px; }
.locked-panel { width: min(720px, 100%); padding: 65px; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(circle at 85% 20%, var(--accent-soft), transparent 42%), var(--surface); }
.lock-symbol { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 35px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent); font-size: 28px; }
.locked-panel h1 { margin: 18px 0 14px; font-family: Georgia, "Songti SC", serif; font-size: clamp(42px, 6vw, 66px); font-weight: 400; line-height: 1.15; }
.locked-panel > p { max-width: 580px; margin: 0; color: var(--muted); line-height: 1.9; }
.not-found { min-height: 620px; display: grid; place-content: center; justify-items: center; padding: 60px 24px; text-align: center; }
.not-found > span { color: var(--line-strong); font-family: Georgia, serif; font-size: 120px; line-height: 1; }
.not-found h1 { margin: 20px 0 5px; font-family: Georgia, "Songti SC", serif; font-size: 38px; font-weight: 400; }
.not-found p { margin: 0 0 28px; color: var(--muted); }

.notice-modal { position: fixed; z-index: 130; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.65); opacity: 0; visibility: hidden; transition: .3s; backdrop-filter: blur(9px); }
.notice-modal.open { opacity: 1; visibility: visible; }
.notice-card { position: relative; width: min(470px, 100%); padding: 45px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); background: #1a1a1f; color: #f5f2ed; box-shadow: var(--shadow); }
.notice-card > button:first-child { position: absolute; top: 15px; right: 17px; border: 0; background: none; color: #777; font-size: 22px; cursor: pointer; }
.notice-card h2 { margin: 15px 0 16px; font-family: Georgia, "Songti SC", serif; font-size: 36px; font-weight: 400; line-height: 1.35; }
.notice-card p { margin: 0 0 25px; color: #9998a0; }
.toast { position: fixed; z-index: 200; left: 50%; bottom: 30px; max-width: min(420px, calc(100vw - 32px)); padding: 12px 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--text); color: var(--bg); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: .25s; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Admin */
.admin-page { background: #0d0d10; }
html[data-theme="light"] .admin-page { background: var(--bg); }
.admin-shell { min-height: 100dvh; display: grid; grid-template-columns: 240px 1fr; }
.admin-sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; padding: 26px 18px 20px; border-right: 1px solid var(--line); background: var(--surface); }
.admin-sidebar .brand { padding: 0 8px 29px; border-bottom: 1px solid var(--line); }
.admin-sidebar nav { display: grid; gap: 5px; margin-top: 26px; }
.admin-sidebar nav a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; color: var(--muted); font-size: 12px; }
.admin-sidebar nav a span { width: 18px; color: var(--muted-2); text-align: center; }
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { background: var(--accent-soft); color: var(--text); }
.admin-sidebar nav a.active span { color: var(--accent); }
.admin-nav-group { display: grid; gap: 3px; }
.admin-sidebar nav .admin-nav-heading { font-weight: 600; }
.admin-subnav { display: grid; gap: 2px; margin: 0 0 4px 30px; padding-left: 10px; border-left: 1px solid var(--line); }
.admin-sidebar nav .admin-subnav a { padding: 8px 10px; color: var(--muted-2); font-size: 10px; }
.admin-sidebar nav .admin-subnav a.active { background: var(--accent-soft); color: var(--text); }
.admin-sidebar-bottom { display: grid; gap: 20px; margin-top: auto; }
.admin-sidebar-bottom > a { padding: 10px 12px; color: var(--muted); font-size: 11px; }
.admin-profile { display: flex; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.admin-profile > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: white; font-weight: 700; }
.admin-profile div { display: grid; }
.admin-profile b { font-size: 10px; }.admin-profile small { color: var(--muted); font-size: 8px; }
.admin-main { min-width: 0; }
.admin-topbar { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 34px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(15px); }
.admin-topbar > div { display: flex; align-items: center; gap: 15px; }
.admin-top-actions a { color: var(--muted); font-size: 11px; }
.admin-top-actions button { width: 33px; height: 33px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.admin-menu-button { display: none; border: 0; background: none; }
.admin-content { padding: 42px 38px 90px; }
.admin-title { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 32px; }
.admin-title h1 { margin: 10px 0 2px; font-family: Georgia, "Songti SC", serif; font-size: 38px; font-weight: 400; }
.admin-title p { margin: 0; color: var(--muted); font-size: 12px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-grid article { position: relative; overflow: hidden; min-height: 150px; display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.stat-grid article > span { color: var(--muted); font-size: 10px; }
.stat-grid article > b { margin-top: 11px; font-family: Georgia, serif; font-size: 31px; font-weight: 400; }
.stat-grid article > small { margin-top: auto; color: var(--muted-2); font-size: 9px; }
.stat-grid .positive { color: var(--success); }
.stat-icon { position: absolute; right: 16px; top: 17px; color: var(--accent); font-size: 21px; font-style: normal; opacity: .55; }
.admin-panels { display: grid; grid-template-columns: 1.45fr .8fr; gap: 12px; margin-top: 12px; }
.admin-panel { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 6px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 20px; font-weight: 400; }
.panel-head > button, .panel-head > a { border: 0; background: none; color: var(--muted); font-size: 9px; }
.chart-panel { min-height: 340px; }
.bar-chart { height: 245px; display: flex; align-items: end; justify-content: space-around; gap: 15px; padding: 35px 35px 22px; }
.bar-column { height: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 10px; }
.bar-column > span { position: relative; width: min(42px, 80%); min-height: 10px; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, var(--accent), #843954); }
.bar-column i { position: absolute; left: 50%; top: -20px; color: var(--muted); font-size: 8px; font-style: normal; transform: translateX(-50%); }
.bar-column small { color: var(--muted); font-size: 8px; }
.horizontal-bar-chart { height: auto; display: grid; align-content: center; gap: 17px; padding: 25px 28px; }
.bar-row { display: grid; grid-template-columns: minmax(62px, 105px) minmax(50px, 1fr) 54px; align-items: center; gap: 12px; }
.bar-row > small { color: var(--muted); font-size: 10px; }
.bar-row > b { color: var(--text); font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
.bar-track { display: block; height: 9px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.bar-track > i { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #a94a72); }
.quick-panel > a { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px; margin: 0 18px; padding: 15px 5px; border-bottom: 1px solid var(--line); }
.quick-panel > a > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; background: var(--surface-3); color: var(--accent); }
.quick-panel > a div { display: grid; }.quick-panel > a b { font-size: 11px; }.quick-panel > a small { color: var(--muted); font-size: 8px; }.quick-panel > a i { color: var(--muted); font-style: normal; }
.table-panel { margin-top: 12px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 10px; white-space: nowrap; }
.admin-table th { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted-2); text-align: left; font-size: 8px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.admin-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.admin-table tr:last-child td { border-bottom: 0; }
.table-resource { display: flex; align-items: center; gap: 11px; min-width: 250px; }
.mini-cover { flex: 0 0 36px; width: 36px; aspect-ratio: .8; border-radius: 3px; }
.table-resource div { display: grid; }
.table-resource b { max-width: 280px; overflow: hidden; color: var(--text); font-family: Georgia, "Songti SC", serif; font-size: 11px; font-weight: 400; text-overflow: ellipsis; }
.table-resource small { max-width: 220px; overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; }
.table-pill, .type-pill { display: inline-flex; padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 8px; text-transform: uppercase; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 8px; text-transform: uppercase; }
.status-pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.status-pill.published i { background: var(--success); }.status-pill.draft i { background: var(--gold); }
.collector-section { margin: 24px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.collector-section > .panel-head { align-items: end; gap: 18px; }
.collector-section > .panel-head > small { color: var(--muted-2); font-size: 9px; text-align: right; }
.collector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 10px; padding: 14px; }
.collector-empty { grid-column: 1 / -1; padding: 20px; color: var(--muted); font-size: 11px; }
.collector-card { min-width: 0; padding: 15px 16px 13px; }
.collector-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.collector-source { overflow: hidden; color: var(--muted-2); font-size: 9px; font-weight: 650; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.collector-state { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--muted); font-size: 9px; }
.collector-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }
.collector-state.healthy i, .collector-state.completed i { background: var(--success); }
.collector-state.running i { background: #e9bd65; box-shadow: 0 0 0 3px color-mix(in srgb, #e9bd65 15%, transparent); }
.collector-state.warning, .collector-state.failed { color: #ff8696; }
.collector-state.warning i, .collector-state.failed i { background: #ff5d71; }
.collector-state.untracked { color: var(--muted-2); }
.collector-card h3 { margin: 12px 0 7px; color: var(--text); font: 400 17px/1.2 Georgia, "Songti SC", serif; }
.collector-count { display: flex; align-items: baseline; gap: 6px; }
.collector-count b { color: var(--text); font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.collector-count small, .collector-meta { color: var(--muted-2); font-size: 9px; }
.collector-meta { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); }
.collector-meta > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collector-meta time { text-align: right; }
.collector-ok, .collector-running, .collector-untracked { display: block; min-height: 13px; color: var(--muted-2); font-size: 9px; }
.collector-running { color: #e9bd65; }
.collector-error-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #ff8294; font: inherit; font-size: 9px; cursor: pointer; }
.collector-error-trigger > span { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; font-weight: 700; }
.collector-error-trigger:hover { color: #ffb4bf; }
.collector-task-section { margin-top: 28px; }
.collector-task-grid { grid-template-columns: repeat(auto-fill, minmax(min(285px, 100%), 1fr)); }
.collector-task-card h3 { overflow: hidden; margin-bottom: 5px; text-overflow: ellipsis; white-space: nowrap; }
.collector-task-type, .collector-category { display: inline-flex; align-items: center; width: fit-content; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 9px; font-weight: 650; letter-spacing: .06em; }
.collector-task-type { padding: 4px 8px; color: var(--accent); text-transform: uppercase; }
.collector-category { padding: 3px 7px; }
.collector-task-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 9px; }
.collector-task-counts > div { display: grid; gap: 2px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--surface) 92%, var(--accent)); }
.collector-task-counts b { color: var(--text); font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.collector-task-counts small { color: var(--muted-2); font-size: 9px; }
.collector-error-toast[hidden] { display: none; }
.collector-error-toast { position: fixed; z-index: 220; right: 24px; bottom: 24px; width: min(580px, calc(100vw - 32px)); max-height: min(48vh, 420px); overflow: hidden; padding: 16px 18px 18px; border: 1px solid color-mix(in srgb, #ff5d71 55%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--surface) 96%, #ff5d71); color: var(--text); box-shadow: 0 18px 55px rgba(0,0,0,.48); animation: collector-toast-in .2s ease-out; }
.collector-error-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.collector-error-head > div { display: grid; gap: 5px; }
.collector-error-head strong { font-size: 12px; font-weight: 600; }
.collector-error-head button { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
.collector-error-toast pre { max-height: calc(min(48vh, 420px) - 78px); margin: 12px 0 0; overflow: auto; color: var(--muted); font: 10px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
@keyframes collector-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.resource-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.resource-toolbar label { width: min(320px, 45%); display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; }
.resource-toolbar input { width: 100%; height: 36px; border: 0; outline: 0; background: none; color: var(--text); font-size: 10px; }
.resource-toolbar > div { display: flex; gap: 6px; }
.filter-button { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 8px; }
.filter-button.active { background: var(--text); color: var(--bg); }
.filter-button b { margin-left: 5px; font-weight: 600; }
.content-filter-toolbar { align-items: flex-end; }
.content-filter-selects { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.content-filter-selects select, .content-filter-selects .tag-filter-input { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 10px; }
.content-filter-selects .tag-filter-input { width: 145px; }
.source-label { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 999px; color: var(--accent); font-size: 9px; white-space: nowrap; }
.analytics-section, .weekly-analytics-panel { margin: 22px 0; }
.analytics-section > .panel-head, .weekly-analytics-panel > .panel-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 12px; }
.analytics-section > .panel-head h2, .weekly-analytics-panel > .panel-head h2 { margin: 5px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 19px; font-weight: 400; }
.analytics-section > .panel-head > small { color: var(--muted-2); font-size: 9px; }
.analytics-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.analytics-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; padding: 16px 18px; }
.analytics-card > span { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.analytics-card > div { display: flex; align-items: baseline; gap: 7px; }
.analytics-card b { color: var(--text); font-size: 22px; font-weight: 500; }
.analytics-card small, .analytics-uv { color: var(--muted-2); font-size: 9px; }
.analytics-card .analytics-item-count { grid-column: 1 / -1; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.platform-metric-sub { grid-column: 1 / -1; justify-content: space-between !important; padding-top: 7px; border-top: 1px solid var(--line); }
.platform-metric-sub b { font-size: 12px; }
.platform-metric-sub small { text-align: right; }
.telegram-review-actions .secondary-button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text); text-decoration: none; cursor: pointer; }
.telegram-review-actions .secondary-button:hover { border-color: var(--accent); color: var(--accent); }
.weekly-analytics-panel { padding: 18px; }
.weekly-trends { margin: 22px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.analytics-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; }
.analytics-chart-card { min-width: 0; padding: 15px 16px 10px; }
.analytics-chart-card h3 { margin: 0 0 10px; color: var(--text); font-size: 11px; font-weight: 550; }
.analytics-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 13px; color: var(--muted-2); font-size: 9px; }
.analytics-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.analytics-chart-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--series-color); }
.analytics-line-chart { display: block; width: 100%; height: auto; margin-top: 9px; overflow: visible; }
.chart-grid-line { stroke: var(--line); stroke-width: 1; }
.chart-axis-label { fill: var(--muted-2); font-size: 10px; }
.dashboard-catalog { margin-top: 12px; }
.weekly-analytics-table td { min-width: 160px; }
.weekly-analytics-table td b { margin-right: 10px; color: var(--text); font-weight: 500; }
.analytics-footnote { margin: 12px 0 0; color: var(--muted-2); font-size: 9px; line-height: 1.7; }
.telegram-file-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 8px; }
.telegram-file-card { width: auto; min-width: 0; }
.telegram-file-card > a:first-child, .telegram-file-card > video { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.telegram-file-overflow { margin: 10px 0 16px; border-top: 1px solid var(--line); color: var(--muted); }
.telegram-file-overflow summary { width: fit-content; padding: 10px 0; color: var(--accent); font-size: 10px; cursor: pointer; }
.telegram-file-overflow .telegram-file-grid { margin-top: 0; }
.manager-table td { padding-block: 10px; }
.status-select { padding: 5px 22px 5px 8px; border: 1px solid var(--line); border-radius: 6px; outline: 0; background: var(--surface-2); color: var(--text); font-size: 9px; }
.admin-date-input { height: 31px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; outline: 0; background: var(--surface-2); color: var(--text); font-size: 9px; color-scheme: dark; }
.wallet-assets { display: grid; gap: 5px; }
.wallet-adjust { min-width: 166px; display: grid; grid-template-columns: 16px 34px 54px 42px; align-items: center; gap: 5px; }
.wallet-adjust > span { color: var(--muted-2); font-size: 8px; font-weight: 700; }
.wallet-adjust b { color: #e6b85c; font-size: 10px; text-align: right; }
.wallet-adjust input { width: 54px; height: 31px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; outline: 0; background: var(--surface-2); color: var(--text); font-size: 9px; }
.wallet-adjust button { height: 31px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 8px; font-weight: 700; cursor: pointer; }
.member-cell { min-width: 220px; display: flex; align-items: center; gap: 11px; }
.member-cell > span { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.member-cell > span img { width:100%; height:100%; border-radius:inherit; object-fit:cover; }
.member-cell div { display: grid; }.member-cell b { color: var(--text); font-size: 10px; }.member-cell small { color: var(--muted-2); font-size: 8px; }
.member-create-panel { margin-bottom:14px; padding:18px 22px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.member-create-panel > summary,.member-record-details > summary { color:var(--accent); font-size:11px; cursor:pointer; }
.member-create-panel > p { color:var(--muted-2); font-size:9px; }
.member-create-form { display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)) auto; align-items:end; gap:10px; margin-top:16px; }
.member-create-form label,.member-record-details form label { display:grid; gap:5px; color:var(--muted); font-size:9px; }
.member-create-form input,.member-record-details form input { width:100%; min-width:0; height:36px; padding:7px 9px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); color:var(--text); font-size:10px; }
.member-create-form .primary-button { min-height:36px; padding:0 14px; gap:8px; font-size:10px; }
.member-record-details { margin-top:8px; font-size:9px; }
.member-record-details form { display:grid; grid-template-columns:repeat(3,minmax(120px,1fr)) auto; gap:8px; align-items:end; padding:12px 0; }
.member-record-details form button { height:36px; padding:0 11px; border:1px solid var(--line-strong); border-radius:7px; background:transparent; color:var(--text); font-size:9px; cursor:pointer; }
.member-audit-block { margin-top:10px; padding-top:9px; border-top:1px solid var(--line); color:var(--muted); }
.member-audit-block ul { max-width:540px; max-height:150px; overflow:auto; margin:6px 0; padding-left:15px; color:var(--muted-2); }
.member-audit-block li { margin:5px 0; font-size:8px; line-height:1.5; overflow-wrap:anywhere; }
.member-country { display:inline; color:var(--muted-2); }
.mini-image { width: 36px; height: 44px; flex: 0 0 36px; overflow: hidden; border-radius: 4px; background: var(--surface-3); }
.mini-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.mini-image { position: relative; display: grid; place-items: center; }
.mini-image > i { display: none; padding: 3px; color: var(--muted-2); font-size: 7px; font-style: normal; line-height: 1.3; text-align: center; }
.mini-image:not(.has-cover) > i, .mini-image.image-unavailable > i { display: grid; }
.content-manager-table { min-width: 1080px; }
.taxonomy-cell { min-width: 210px; max-width: 340px; white-space: normal; }
.taxonomy-summary { display: block; max-width: 300px; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.5; text-overflow: ellipsis; }
.taxonomy-editor { margin-top: 6px; }
.taxonomy-editor summary { color: var(--accent); font-size: 9px; cursor: pointer; }
.taxonomy-editor form { display: grid; gap: 8px; width: min(240px, 74vw); padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: var(--shadow); white-space: normal; }
.taxonomy-editor label, .taxonomy-create-form label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; }
.taxonomy-editor select, .taxonomy-create-form input { width: 100%; min-height: 34px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--text); font-size: 10px; }
.taxonomy-editor select[multiple] { height: auto; }
.taxonomy-editor > form > small { color: var(--muted-2); font-size: 9px; }
.admin-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 9px; }
.admin-pagination > div { display: flex; flex-wrap: wrap; gap: 5px; }
.admin-pagination a { display: inline-flex; min-width: 28px; height: 28px; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); }
.admin-pagination a.active { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.taxonomy-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.taxonomy-admin-grid-single { grid-template-columns: minmax(0, 1fr); }
.admin-title-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.taxonomy-panel { min-width: 0; overflow: hidden; }
.taxonomy-create-form { display: grid; grid-template-columns: 1fr 1.2fr auto; align-items: end; gap: 10px; padding: 18px; border-bottom: 1px solid var(--line); }
.taxonomy-panel:nth-child(2) .taxonomy-create-form { grid-template-columns: 1fr auto; }
.taxonomy-create-form .primary-button { min-height: 34px; padding: 0 15px; border: 0; border-radius: 7px; background: var(--accent); color: #fff; font-size: 9px; white-space: nowrap; cursor: pointer; }
.taxonomy-search-form { display: flex; align-items: end; gap: 8px; padding: 14px 18px 4px; }
.taxonomy-search-form label { flex: 1; display: grid; gap: 5px; color: var(--muted); font-size: 9px; }
.taxonomy-search-form input { width: 100%; min-height: 34px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--text); font-size: 10px; }
.coin-price-editor { display:flex; align-items:center; gap:5px; min-width:115px; }
.coin-price-editor input { width:64px; min-width:0; padding:7px 5px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); color:var(--text); font-size:10px; }
.coin-price-editor button { padding:7px 9px; border:1px solid var(--line-strong); border-radius:7px; background:transparent; color:var(--text); font-size:9px; cursor:pointer; }
.coin-price-editor button:hover { border-color:var(--accent); color:var(--accent); }
.taxonomy-list { max-height: 520px; overflow: auto; }
.taxonomy-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.taxonomy-list > div:last-child { border-bottom: 0; }
.taxonomy-list > div > span { display: grid; gap: 3px; min-width: 0; }
.taxonomy-list b { color: var(--text); font-size: 10px; font-weight: 500; }
.taxonomy-list small, .taxonomy-list strong small { color: var(--muted-2); font-size: 8px; }
.taxonomy-list strong { display: grid; justify-items: end; gap: 3px; color: var(--text); font-size: 10px; font-weight: 500; }
.taxonomy-empty, .taxonomy-help { margin: 0; padding: 15px 18px; color: var(--muted-2); font-size: 9px; line-height: 1.7; }
.tag-taxonomy-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; max-height: none; padding: 12px; overflow: visible; background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.tag-taxonomy-list > .tag-taxonomy-item { min-width: 0; min-height: 58px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.tag-taxonomy-list > .tag-taxonomy-item:last-child { border-bottom: 1px solid var(--line); }
.tag-taxonomy-item > b { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.45; overflow-wrap: anywhere; }
.tag-taxonomy-item > strong { flex: 0 0 auto; padding-left: 8px; }
.tag-taxonomy-list > .taxonomy-empty { grid-column: 1 / -1; }
.taxonomy-notice, .taxonomy-error { margin: 0 0 14px; padding: 12px 15px; border-radius: 8px; background: var(--accent-soft); color: var(--text); font-size: 10px; }
.taxonomy-error { color: #ff9ca5; }
.row-action { color: var(--accent); }
.telegram-review-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.telegram-review-stats a { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 11px; }
.telegram-review-stats a.active { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); color: var(--text); background: var(--accent-soft); }
.telegram-review-stats b { color: var(--text); font-size: 20px; font-weight: 500; }
.telegram-review-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.telegram-review-filters a { padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; }
.telegram-review-filters a.active { border-color: var(--text); background: var(--text); color: var(--bg); }
.telegram-review-list { display: grid; gap: 14px; }
.telegram-review-card { padding: 20px; }
.telegram-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.telegram-review-head h2 { margin: 10px 0 4px; color: var(--text); font-size: 17px; font-weight: 550; }
.telegram-review-head small, .telegram-source { color: var(--muted-2); font-size: 9px; }
.telegram-source { margin-left: 9px; }
.telegram-source-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.telegram-source-tags span { padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 9px; }
.telegram-source-note { margin: 8px 0 0; color: var(--gold); font-size: 10px; }
.telegram-message-text { max-width: 900px; margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; white-space: pre-wrap; }
.telegram-file-strip { display: flex; gap: 10px; overflow-x: auto; margin: 18px 0; padding-bottom: 4px; }
.telegram-file-card { width: 138px; flex: 0 0 138px; display: grid; align-content: start; gap: 7px; }
.telegram-file-card > a:first-child, .telegram-file-card > video { width: 138px; height: 150px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); object-fit: cover; }
.telegram-file-card > a:first-child img { width: 100%; height: 100%; display: block; object-fit: cover; }
.telegram-file-grid .telegram-file-card { width: auto; min-width: 0; flex: initial; }
.telegram-file-grid .telegram-file-card > a:first-child, .telegram-file-grid .telegram-file-card > video { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.telegram-file-grid .telegram-file-card > a:first-child img { width: 100%; height: 100%; object-fit: cover; }
.telegram-file-card > small { overflow: hidden; color: var(--muted-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.telegram-file-preview { display: grid; place-items: center; align-content: center; gap: 10px; color: var(--muted); }
.telegram-file-preview span { color: var(--accent); font-family: Georgia, serif; font-size: 27px; }
.telegram-file-preview b { font-size: 9px; font-weight: 500; }
.telegram-doc-preview, .telegram-text-preview { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.telegram-doc-preview > summary, .telegram-text-preview > summary { min-height: 112px; display: grid; place-content: center; justify-items: center; gap: 10px; cursor: pointer; list-style: none; color: var(--muted); }
.telegram-doc-preview > summary::-webkit-details-marker, .telegram-text-preview > summary::-webkit-details-marker { display: none; }
.telegram-doc-preview summary span, .telegram-text-preview summary span { color: var(--accent); font-family: Georgia, serif; font-size: 27px; }
.telegram-doc-preview summary b, .telegram-text-preview summary b { font-size: 9px; font-weight: 500; }
.telegram-doc-preview iframe { display: block; width: 100%; height: min(62vh, 560px); border: 0; background: #111; }
.telegram-doc-preview > small, .telegram-text-preview > small { display: block; padding: 8px 10px; color: var(--muted-2); font-size: 9px; }
.telegram-text-preview pre { max-height: 360px; margin: 0; padding: 10px; overflow: auto; color: var(--text); font: 10px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.telegram-file-empty { color: var(--muted-2); font-size: 10px; }
.telegram-text-excerpt { min-height: 88px; max-height: 6.3em; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 11px; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; overflow: hidden; }
.telegram-pdf-preview { width: 100%; min-height: 178px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.telegram-pdf-preview > img { width: 100%; height: 148px; display: block; background: #fff; object-fit: contain; }
.telegram-pdf-preview > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 8px; }
.telegram-pdf-preview span, .telegram-pdf-preview a { color: var(--muted-2); font-size: 8px; }
.telegram-pdf-preview a { flex: 0 0 auto; color: var(--accent); }
.telegram-album-preview { display: grid; gap: 12px; margin: 18px 0 8px; }
.telegram-archive-link { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--text); }
.telegram-archive-link span { flex: 0 0 auto; color: var(--accent); font-size: 10px; font-weight: 650; }
.telegram-archive-link b { overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 450; text-overflow: ellipsis; white-space: nowrap; }
.telegram-archive-link i { flex: 0 0 auto; color: var(--accent); font-size: 9px; font-style: normal; }
.telegram-album-thumbnails { display: flex; flex-wrap: wrap; align-items: start; gap: 9px; }
.telegram-album-thumbnails > a { width: 116px; height: 116px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.telegram-album-thumbnails img { width: 100%; height: 100%; display: block; object-fit: cover; }
.telegram-view-all { min-width: 116px; height: 116px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 8px; background: var(--surface-2); color: var(--accent); font-size: 10px; cursor: pointer; }
.telegram-preview-dialog { width: min(920px, calc(100vw - 32px)); max-width: none; max-height: min(86vh, 900px); padding: 18px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--text); }
.telegram-preview-dialog::backdrop { background: rgb(0 0 0 / 76%); backdrop-filter: blur(5px); }
.telegram-preview-dialog-head { position: sticky; top: -18px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -18px -18px 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.telegram-preview-dialog-head b { font-size: 12px; }
.telegram-preview-dialog-head button { padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; }
.telegram-preview-dialog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; max-height: calc(86vh - 80px); overflow: auto; }
.telegram-preview-dialog-grid a { min-width: 0; color: var(--muted); }
.telegram-preview-dialog-grid img { width: 100%; aspect-ratio: 1; display: block; border-radius: 7px; background: var(--surface-2); object-fit: cover; }
.telegram-preview-dialog-grid small { display: block; padding-top: 5px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.telegram-review-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.telegram-review-form > label { display: grid; gap: 6px; color: var(--muted-2); font-size: 9px; }
.telegram-review-form select { min-width: 132px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--text); font-size: 10px; }
.telegram-review-form input { min-width:120px; height:36px; padding:0 10px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); color:var(--text); font-size:10px; }
.telegram-review-form .telegram-review-tags { flex:1 1 260px; }
.telegram-review-form .primary-button { min-height: 36px; padding: 0 16px; font-size: 10px; }
.telegram-review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.telegram-review-actions .primary-button, .telegram-review-actions .secondary-button { min-height: 36px; padding: 0 14px; font-size: 10px; }
.telegram-review-note { margin: 12px 0 0; color: var(--muted-2); font-size: 9px; }
.telegram-review-empty { padding: 55px 20px; text-align: center; }
.telegram-review-empty > span { color: var(--accent); font-size: 24px; }
.telegram-review-empty h2 { margin: 12px 0 6px; font-size: 16px; font-weight: 500; }
.telegram-review-empty p { color: var(--muted-2); font-size: 10px; }
@media (max-width: 720px) {
  .telegram-review-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .telegram-review-card { padding: 15px; }
  .telegram-review-head { flex-direction: column; gap: 10px; }
  .telegram-review-form { align-items: stretch; }
  .telegram-review-form > label { flex: 1 1 140px; }
  .telegram-review-form select { width: 100%; }
  .telegram-review-form .primary-button { flex: 1 1 100%; }
  .content-filter-toolbar { align-items: stretch; flex-direction: column; }
  .content-filter-toolbar label { width: 100%; }
  .content-filter-selects { width: 100%; }
  .content-filter-selects select { flex: 1 1 120px; }
  .analytics-cards { grid-template-columns: 1fr; }
  .analytics-chart-grid { grid-template-columns: 1fr; padding: 9px; }
  .analytics-section > .panel-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .weekly-analytics-panel { padding: 13px; }
  .telegram-file-grid { gap: 7px; }
  .telegram-album-thumbnails > a, .telegram-view-all { width: calc((100vw - 94px) / 3); height: calc((100vw - 94px) / 3); }
  .telegram-preview-dialog { padding: 12px; }
  .telegram-preview-dialog-head { top: -12px; margin: -12px -12px 10px; padding: 11px 12px; }
}
.database-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 25px; }
.database-summary a { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 11px; padding: 15px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.database-summary a > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); }
.database-summary a div { display: grid; }.database-summary b { font-family: ui-monospace, monospace; font-size: 10px; }.database-summary small { color: var(--muted); font-size: 8px; }.database-summary i { color: var(--muted); font-style: normal; }
.schema-list { display: grid; gap: 12px; }
.record-count { color: var(--muted); font-size: 8px; letter-spacing: .1em; }
.schema-card code { color: var(--text); font-size: 9px; }

@media (max-width: 1120px) {
  :root { --shell: min(100% - 42px, 1000px); }
  .desktop-nav { gap: 18px; }
  .hero { gap: 35px; }
  .archive-hero { gap: 35px; }
  .hero-card-main { left: 2%; width: 60%; }
  .hero-card-back { right: 0; }
  .resource-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .newsletter { grid-template-columns: 1fr 1fr; }.newsletter .primary-button { grid-column: 1 / -1; justify-self: start; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .media-grid { columns: 3; }
}

@media (max-width: 820px) {
  :root { --shell: min(100% - 28px, 720px); }
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .desktop-nav, .member-button, .desktop-only, .category-bar { display: none; }
  .header-main { min-height: 64px; grid-template-columns: 1fr auto; }
  .menu-button { display: inline-grid; }
  .brand-mark { width: 34px; height: 34px; font-size: 20px; }
  .brand-copy strong { font-size: 13px; }.brand-copy small { font-size: 6px; }
  .hero { min-height: 0; grid-template-columns: 1fr; gap: 55px; padding-block: 60px 80px; }
  .archive-hero { min-height: 0; grid-template-columns: 1fr; gap: 45px; padding-block: 60px 85px; }
  .archive-hero-copy h1 { font-size: clamp(48px, 12vw, 72px); }
  .category-tile { min-height: 230px; }
  .hero-copy h1 { font-size: clamp(48px, 13vw, 75px); }
  .hero-visual { min-height: 450px; }
  .hero-card-main { left: 9%; height: 430px; }.hero-card-back { height: 330px; }
  .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .archive-search-form { grid-template-columns: auto minmax(0,1fr) auto; gap:8px; min-height:58px; padding:7px 8px 7px 12px; border-radius:18px; }
  .archive-search-form select { display:none; }
  .archive-search-form > button[type="submit"] { grid-column:3; min-width:70px; min-height:42px; padding:0 14px; border-radius:13px; }
  .archive-search-icon { width:29px; height:29px; }
  .search-input-wrap { grid-template-columns:minmax(0,1fr) auto auto; }
  .search-input-wrap select { max-width:105px; font-size:10px; }
  .search-input-wrap button { width:44px; }
  .search-results-hero { align-items:flex-start; flex-direction:column; }
  .search-result-summary { width:100%; grid-template-columns:1fr auto; align-items:center; justify-items:start; }
  .search-result-summary .search-reset-link { justify-self:end; }
  .search-helper-row { align-items:flex-start; flex-direction:column; gap:9px; }
  .editorial-grid { grid-template-columns: 1fr; gap: 55px; }
  .newsletter { grid-template-columns: 1fr; gap: 20px; }.newsletter .primary-button { grid-column: auto; }
  .footer-grid { grid-template-columns: 1.3fr 1fr; }.footer-note { display: none !important; }
  .site-footer { padding-bottom: 35px; }
  .mobile-dock { position: fixed; z-index: 80; left: 12px; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom)); height: 72px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; padding:5px; border: 1px solid color-mix(in srgb, var(--line-strong) 78%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--surface) 87%, transparent); box-shadow: 0 20px 48px -16px rgba(0, 0, 0, .64), inset 0 1px rgba(255,255,255,.055); backdrop-filter: blur(28px) saturate(145%); -webkit-backdrop-filter: blur(28px) saturate(145%); }
  .mobile-dock a, .mobile-dock button { position: relative; isolation:isolate; display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 7px 3px 6px; border: 0; border-radius:18px; background: none; color: color-mix(in srgb, var(--muted) 86%, transparent); font-size: 10px; font-weight: 650; line-height: 1; cursor: pointer; transition: color .22s ease, transform .22s ease; -webkit-tap-highlight-color: transparent; }
  .mobile-dock a::before, .mobile-dock button::before { content: ""; position: absolute; z-index:-1; inset:1px 5px; border:1px solid transparent; border-radius:17px; background: transparent; transform:scale(.84); opacity:0; transition: background .22s ease, border-color .22s ease, transform .22s ease, opacity .22s ease; }
  .mobile-dock a::after, .mobile-dock button::after { content:""; position:absolute; z-index:2; bottom:3px; left:50%; width:4px; height:4px; border-radius:50%; background:var(--accent); opacity:0; transform:translateX(-50%) scale(.3); transition:.22s ease; }
  .mobile-dock svg { position: relative; z-index: 1; width: 21px; height: 21px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; transition: transform .22s ease, filter .22s ease, color .22s ease; }
  .mobile-dock span { position: relative; z-index: 1; white-space: nowrap; letter-spacing:.015em; }
  .mobile-dock a:active { transform:scale(.94); }
  .mobile-dock .active { color: var(--text); font-weight:780; }
  .mobile-dock .active::before { border-color:color-mix(in srgb, var(--accent) 24%, transparent); background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 7%, transparent)); opacity:1; transform:scale(1); }
  .mobile-dock .active::after { opacity:1; transform:translateX(-50%) scale(1); }
  .mobile-dock .active svg { color: var(--accent); transform: translateY(-1px); filter: drop-shadow(0 5px 9px rgba(233, 92, 145, .24)); }
  .page-hero { min-height: 270px; padding-block: 70px 42px; }
  .numbered-pagination { align-items: flex-start; flex-direction: column; }
  .numbered-pagination nav { width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .page-size-control { align-self:flex-end; margin-left:0; }
  .detail-hero-grid { grid-template-columns: 1fr; }.detail-cover { width: min(520px, 100%); margin-inline: auto; }.detail-layout { grid-template-columns: 1fr; }.detail-sidebar { display: none; }
  .live-album-hero-grid { grid-template-columns: 1fr; }.live-cover { width: min(520px, 100%); margin-inline: auto; }
  .media-grid { columns: 2; }
  .integration-placeholder { grid-template-columns: 85px 1fr; }.integration-placeholder .connection-badge { grid-column: 2; justify-self: start; }
  .comment-form { grid-template-columns: 1fr; }
  body.auth-page { padding-bottom: 0; }
  body.auth-page .mobile-dock { display: none; }
  .auth-main { min-height: calc(100svh - 64px); padding: 28px 14px 42px; }
  .auth-card { width: min(560px, 100%); min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .auth-art { display: none; }
  .auth-form { max-width: none; padding: clamp(28px, 7vw, 52px); }
  .auth-form h1 { font-size: clamp(36px, 8vw, 46px); }
  .admin-shell { grid-template-columns: 1fr; }.admin-sidebar { position: fixed; z-index: 110; left: 0; width: 240px; transform: translateX(-102%); transition: transform .25s; box-shadow: var(--shadow); }.admin-sidebar.open { transform: none; }.admin-menu-button { display: inline-block; }.admin-content { padding-inline: 20px; }.admin-topbar { padding-inline: 20px; }
  .admin-panels { grid-template-columns: 1fr; }.database-summary { grid-template-columns: repeat(2, 1fr); }
  .taxonomy-admin-grid { grid-template-columns: 1fr; }.taxonomy-create-form { grid-template-columns: 1fr; }.taxonomy-panel:nth-child(2) .taxonomy-create-form { grid-template-columns: 1fr; }.admin-pagination { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 540px) {
  :root { --shell: calc(100% - 20px); --radius: 13px; }
  .header-actions { gap: 5px; }.header-actions .icon-button { width: 36px; height: 36px; }
  .hero { padding-top: 46px; }
  .archive-hero { padding-top: 46px; }
  .archive-hero-copy h1 { margin-top: 17px; font-size: 46px; }
  .archive-hero-copy > p { font-size: 14px; }
  .category-showcase { gap: 7px; }
  .category-tile { min-height: 190px; }
  .category-tile:nth-child(2), .category-tile:nth-child(4) { transform: translateY(14px); }
  .category-tile b { font-size: 19px; }
  .category-tile div span { display: none; }
  .hero-copy h1 { margin-top: 17px; font-size: 48px; }
  .hero-copy > p { font-size: 14px; }
  .hero-actions { align-items: stretch; gap: 12px; }.hero-actions .primary-button { flex: 1; }.hero-actions .text-button { display: none; }
  .hero-stats { justify-content: space-between; gap: 10px; margin-top: 42px; }.hero-stats div { padding-right: 15px; }.hero-stats b { font-size: 20px; }
  .hero-visual { min-height: 365px; }.hero-card-main { left: 3%; width: 66%; height: 350px; }.hero-card-back { top: 50px; width: 48%; height: 280px; }.hero-ring { width: 330px; height: 330px; }
  .announcement-inner { grid-template-columns: auto 1fr; gap: 12px; }.announcement-inner a { display: none; }
  .content-section, .explore-section { padding-block: 72px; }
  .section-heading { align-items: start; flex-direction: column; margin-bottom: 28px; }.section-heading h2 { font-size: 36px; }.section-filters { width: 100%; overflow-x: auto; }
  .resource-grid { gap: 26px 8px; }
  .card-cover { aspect-ratio: .72; }
  .card-body { padding-top: 11px; }.card-body h3 { margin-top: 7px; font-size: 15px; line-height: 1.45; }.card-body p { display: none; }.card-kicker { font-size: 8px; }.card-footer { margin-top: 11px; }.cover-no { top: 11px; left: 11px; }.access-badge { right: 8px; top: 8px; font-size: 6px; }.cover-metrics { right: 8px; bottom: 8px; font-size: 7px; }.cover-word { font-size: 27px; }
  .editorial-band { padding-block: 72px; }.editorial-copy h2 { font-size: 42px; }.feature-list h3 { font-size: 15px; }
  .tag-cloud { padding-inline: 0; gap: 4px; }.tag-size-1 { font-size: 13px; }.tag-size-2 { font-size: 17px; }.tag-size-3 { font-size: 21px; }.tag-size-4 { font-size: 26px; }
  .newsletter { margin-bottom: 70px; padding: 32px 25px; }.newsletter h2 { font-size: 27px; }
  .footer-grid { grid-template-columns: 1fr; gap: 45px; }.footer-brand { grid-column: auto; }.footer-bottom { flex-direction: column; gap: 7px; }
  .page-hero { min-height: 245px; }.page-hero h1 { font-size: 43px; }.page-count { display: none; }
  .numbered-pagination { margin-top: 42px; }
  .numbered-pagination .page-direction { min-width: 70px; }
  .detail-hero { padding-block: 25px 55px; }.detail-hero-grid { gap: 38px; }.detail-intro h1 { font-size: 40px; }.detail-meta { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }.detail-meta div:nth-child(3) { padding-left: 0; border: 0; }.detail-actions .primary-button { flex: 1; }
  .live-album-hero { padding-block: 25px 55px; }.live-album-hero-grid { gap: 38px; }.live-media-section { padding-block: 65px 90px; }.media-legend { flex-direction: column; gap: 5px; }.media-grid { columns: 2; column-gap: 7px; }.media-tile { margin-bottom: 7px; }.gallery-lightbox { padding: 15px; }.gallery-caption { padding-inline: 5px; }
  .integration-placeholder, .integration-placeholder.large { grid-template-columns: 1fr; justify-items: start; padding: 27px 24px; }.integration-placeholder > div:first-child { justify-items: start; }.integration-placeholder .connection-badge { grid-column: auto; }.integration-placeholder h2 { font-size: 28px; }
  .detail-layout { padding-top: 35px; }.download-note { padding: 25px 20px; }.article-copy { padding: 48px 5px; }.article-copy h2 { font-size: 36px; }.article-copy blockquote { margin-inline: 0; padding: 20px; }.comments-section .section-heading { flex-direction: row; }
  .help-grid { grid-template-columns: 1fr; }.help-grid article { min-height: 200px; }
  .notice-card { padding: 38px 26px; }.notice-card h2 { font-size: 31px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }.stat-grid article { min-height: 130px; padding: 17px; }.admin-title { align-items: start; flex-direction: column; }.admin-title h1 { font-size: 33px; }.admin-title .primary-button { width: 100%; }.database-summary { grid-template-columns: 1fr; }.resource-toolbar { align-items: stretch; flex-direction: column; }.resource-toolbar label { width: 100%; }.admin-top-actions a { display: none; }
  .collector-section > .panel-head { align-items: start; flex-direction: column; }.collector-section > .panel-head > small { text-align: left; }
}

/* Homepage catalog and combined comics / novels navigation */
.home-hero-index {
  display: grid;
  padding: 12px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface) 66%, var(--accent-soft)));
}
.home-hero-index a {
  display: grid;
  grid-template-columns: 34px minmax(92px, .8fr) 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  border-bottom: 1px solid var(--line);
}
.home-hero-index a:last-child { border-bottom: 0; }
.home-hero-index small { color: var(--muted-2); font: 11px Georgia, serif; }
.home-hero-index b { color: var(--text); font: 400 20px Georgia, "Songti SC", serif; }
.home-hero-index span { color: var(--muted-2); font-size: 10px; }
.home-hero-index i { color: var(--muted-2); font-size: 15px; font-style: normal; transition: color .2s, transform .2s; }
.home-hero-index a:hover i { color: var(--accent); transform: translate(2px, -2px); }
.module-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.module-tab > strong { font-size: clamp(19px, 1.55vw, 25px); }
.home-catalog-section { padding-block: 70px; border-top: 1px solid var(--line); }
.home-heading-actions { display: flex; align-items: center; gap: 22px; }
.home-heading-actions > span { color: var(--muted-2); font-size: 10px; white-space: nowrap; }
.home-album-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.home-module-ai_video .video-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.novel-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.reading-type-tabs { display: flex; gap: 9px; padding-top: 22px; }
.reading-type-tabs a { min-width: 92px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-align: center; font-size: 12px; transition: color .2s, border-color .2s, background .2s; }
.reading-type-tabs a:hover, .reading-type-tabs a.active { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.home-empty-state { min-height: 230px; }

@media (max-width: 1100px) {
  .home-album-grid, .home-module-ai_video .video-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .novel-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .home-hero-index { padding-inline: 16px; }
  .home-hero-index a { grid-template-columns: 27px minmax(84px, .7fr) 1fr auto; gap: 9px; min-height: 57px; }
  .home-hero-index b { font-size: 17px; }
  .home-hero-index span { font-size: 9px; }
  .home-catalog-section { padding-block: 48px; }
  .home-heading-actions { gap: 10px; }
  .home-heading-actions > span { display: none; }
  .home-album-grid, .home-module-ai_video .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 11px; }
  .novel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 12px; }
}
@media (max-width: 540px) {
  .novel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reading-type-tabs { padding-top: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Multi-library modules */
.drawer-divider { padding: 18px 4px 7px; color: var(--muted-2); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.section-note { color: var(--muted); font-size: 11px; }
.module-section { padding-block: 18px 105px; }
.module-logo-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.module-logo-row > span { color: var(--muted-2); font-size: 9px; letter-spacing: .16em; }
.module-logo-row .brand-mark { width: 48px; height: 48px; font-size: 28px; }
.module-logo-row .brand-copy strong { font-size: 18px; }
.module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.module-card { position: relative; min-height: 245px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); transition: transform .35s, border-color .35s; }
.module-card::before { content: ""; position: absolute; inset: 0; opacity: .75; background: radial-gradient(circle at 90% 0%, var(--module-glow), transparent 50%); pointer-events: none; }
.module-card:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.module-card > span, .module-card > b, .module-card > div { position: relative; z-index: 1; }
.module-card > span { color: var(--muted-2); font-family: Georgia, serif; font-size: 13px; }
.module-card > b { position: absolute; top: 21px; right: 22px; font-size: 17px; font-weight: 400; }
.module-card small { color: var(--muted-2); font-size: 8px; letter-spacing: .15em; }
.module-card h3 { margin: 8px 0; font-family: Georgia, "Songti SC", serif; font-size: 31px; font-weight: 400; }
.module-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.module-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border: 0; }
.module-tab { position: relative; min-width: 0; min-height: 112px; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: 1fr 1fr; align-items: center; column-gap: 17px; overflow: hidden; padding: 18px 23px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: linear-gradient(145deg, color-mix(in srgb, var(--tab-glow) 32%, var(--surface)), var(--surface) 82%); transition: color .2s, background .2s, border-color .2s, transform .2s; }
.module-tab::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, var(--tab-glow), transparent 62%); opacity: .85; pointer-events: none; }
.module-tab > * { position: relative; z-index: 1; }
.module-tab::after { content: ""; position: absolute; right: 22px; bottom: -1px; left: 22px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.module-tab:hover { border-color: var(--line-strong); color: var(--text); transform: translateY(-3px); }
.module-tab:hover::after { transform: scaleX(1); }
.module-tab > span { grid-row: 1 / 3; color: var(--muted-2); font: 12px Georgia, serif; }
.module-tab > strong { align-self: end; color: var(--text); font: 400 28px/1.15 Georgia, "Songti SC", serif; }
.module-tab > small { align-self: start; margin-top: 6px; color: var(--muted-2); font-size: 9px; }
.module-tab > b { grid-column: 3; grid-row: 1 / 3; color: var(--muted-2); font-size: 16px; font-weight: 400; transition: transform .2s, color .2s; }
.module-tab:hover > b { color: var(--accent); transform: translate(2px,-2px); }
.module-tab:nth-child(1) { --tab-glow: rgba(58, 126, 202, .32); }
.module-tab:nth-child(2) { --tab-glow: rgba(61, 178, 139, .3); }
.module-tab:nth-child(3) { --tab-glow: rgba(224, 76, 133, .3); }
.module-tab:nth-child(4) { --tab-glow: rgba(205, 153, 67, .3); }
.module-tab:nth-child(5) { --tab-glow: rgba(118, 88, 205, .32); }
.module-album { --module-glow: rgba(45,104,186,.3); }.module-game { --module-glow: rgba(76,181,142,.26); }.module-comic { --module-glow: rgba(232,81,139,.26); }.module-novel { --module-glow: rgba(202,151,71,.25); }.module-video { --module-glow: rgba(97,73,202,.26); }
.library-preview-section { padding-top: 58px; border-top: 1px solid var(--line); }

.app-landing { overflow: hidden; }
.app-landing-hero { min-height: 760px; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, .78fr); align-items: center; gap: clamp(45px, 8vw, 130px); padding-block: 92px 105px; }
.app-landing-copy h1 { margin: 22px 0 24px; font-family: Georgia, "Songti SC", serif; font-size: clamp(58px, 7.2vw, 104px); font-weight: 400; line-height: .98; letter-spacing: -.065em; }
.app-landing-copy h1 em { color: var(--accent); font-style: normal; }
.app-landing-copy > p { max-width: 620px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.app-download-actions { display: flex; align-items: center; gap: 22px; margin-top: 38px; }
.app-download-button { min-width: 224px; display: flex; align-items: center; gap: 14px; padding: 13px 20px; }
.app-download-button > span:nth-child(2) { display: grid; }.app-download-button small { font-size: 7px; letter-spacing: .18em; opacity: .7; }.app-download-button b { font-size: 17px; font-weight: 600; }
.app-download-button.disabled { cursor: default; filter: saturate(.2); opacity: .58; }
.android-glyph { width: 30px; height: 30px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.android-glyph circle { fill: currentColor; stroke: none; }
.app-version-copy { display: grid; gap: 3px; }.app-version-copy b { font-family: ui-monospace, monospace; font-size: 12px; }.app-version-copy small { color: var(--muted-2); font-size: 8px; letter-spacing: .08em; }
.app-install-note { margin-top: 13px !important; font-size: 9px !important; }
.app-phone-stage { position: relative; min-height: 650px; display: grid; place-items: center; isolation: isolate; }
.app-phone-stage::before { content: ""; position: absolute; z-index: -2; width: 360px; height: 520px; border-radius: 48%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 19%, transparent), transparent 68%); filter: blur(28px); transform: translate(34px, 8px); }
.app-orbit { position: absolute; z-index: -1; border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); border-radius: 50%; box-shadow: inset 0 0 80px rgba(232,81,139,.025); }.orbit-one { width: 570px; height: 570px; }.orbit-two { width: 415px; height: 415px; border-style: dashed; opacity: .72; }
.app-phone { position: relative; z-index: 2; width: 318px; padding: 8px; border: 1px solid rgba(158,157,174,.48); border-radius: 50px; background: linear-gradient(145deg, #272730, #060608 32%, #101015 76%, #393844); box-shadow: 0 58px 140px rgba(0,0,0,.65), 0 0 90px rgba(232,81,139,.11), inset 0 1px 1px rgba(255,255,255,.14); transform: rotate(3.2deg); }
.app-phone::before { content: ""; position: absolute; inset: 3px; pointer-events: none; border: 1px solid rgba(255,255,255,.055); border-radius: 46px; }
.app-phone::after { content: ""; position: absolute; z-index: -1; left: 11%; right: 2%; bottom: -35px; height: 68px; border-radius: 50%; background: rgba(0,0,0,.72); filter: blur(24px); transform: rotate(-3.2deg); }
.app-phone-speaker { position: absolute; z-index: 5; left: 50%; top: 18px; width: 82px; height: 22px; border: 1px solid rgba(255,255,255,.035); border-radius: 999px; background: #030305; box-shadow: 0 2px 7px rgba(0,0,0,.55); transform: translateX(-50%); }
.app-phone-screen { position: relative; aspect-ratio: 9 / 20; overflow: hidden; border-radius: 42px; background: #0b0b0e; box-shadow: inset 0 0 0 1px rgba(255,255,255,.075), inset 0 -28px 58px rgba(0,0,0,.12); }
.app-screen-loader { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 43%, rgba(232,88,145,.12), transparent 42%), #0b0b0e; opacity: 1; visibility: visible; transition: opacity .38s ease, visibility .38s; }
.app-screen-loader .pipixia-loader { transform: scale(.78); }
.app-phone-screen.is-loaded .app-screen-loader { opacity: 0; visibility: hidden; pointer-events: none; }
.app-phone-screenshot { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; filter: saturate(1.055) contrast(1.025) brightness(.985); transform: scale(1.003); transform-origin: center top; }
.app-phone-glare { position: absolute; z-index: 3; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.075), transparent 20%, transparent 70%, rgba(255,255,255,.025)); mix-blend-mode: screen; }
.app-preview-chip { position: absolute; z-index: 3; top: 76px; right: -6px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 999px; background: rgba(16,15,20,.74); color: rgba(255,255,255,.74); font-size: 7px; letter-spacing: .16em; backdrop-filter: blur(16px); box-shadow: 0 12px 34px rgba(0,0,0,.32); transform: rotate(3deg); }
.app-preview-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.app-preview-caption { position: absolute; z-index: 3; left: -18px; bottom: 72px; display: flex; align-items: center; gap: 12px; min-width: 225px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(17,16,21,.78); backdrop-filter: blur(18px); box-shadow: 0 18px 45px rgba(0,0,0,.38); }
.app-preview-caption > span { color: var(--accent); font-family: Georgia, serif; font-size: 21px; }.app-preview-caption > div { display: grid; gap: 4px; }.app-preview-caption small { color: var(--muted-2); font-size: 6px; letter-spacing: .16em; }.app-preview-caption b { font-size: 10px; font-weight: 500; letter-spacing: .04em; }
.app-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-bottom: 110px; padding: 1px; background: var(--line); }
.app-feature-grid article { min-height: 210px; padding: 30px; background: var(--bg); }.app-feature-grid article > span { color: var(--accent); font-family: Georgia, serif; font-size: 11px; }.app-feature-grid h2 { margin: 37px 0 10px; font-family: Georgia, "Songti SC", serif; font-size: 25px; font-weight: 400; }.app-feature-grid p { max-width: 300px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
  .pipixia-loader-orbit, .pipixia-loader-shrimp *, .pipixia-loader-track i { animation: none !important; }
}

.novel-book-placeholder { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 18% 12%, rgba(232,88,145,.28), transparent 48%), linear-gradient(145deg, #30233b, #151822); }
.novel-book-placeholder svg { width: min(78%, 150px); height: 82%; overflow: visible; filter: drop-shadow(0 18px 24px rgba(0,0,0,.34)); }
.novel-book-placeholder .book-shadow { fill: rgba(0,0,0,.32); }.novel-book-placeholder .book-cover { stroke: rgba(255,255,255,.3); stroke-width: 2; }.novel-book-placeholder .book-spine { fill: none; stroke: rgba(0,0,0,.3); stroke-width: 5; }.novel-book-placeholder .book-lines { fill: none; stroke: rgba(255,255,255,.82); stroke-width: 4; stroke-linecap: round; }

.library-hero { min-height: 420px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 50px; padding-block: 100px 70px; border-bottom: 1px solid var(--line); }
.library-hero h1 { margin: 18px 0 16px; font-family: Georgia, "Songti SC", serif; font-size: clamp(68px, 9vw, 128px); font-weight: 400; line-height: .86; letter-spacing: -.065em; }
.library-hero > div > p { max-width: 660px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }
.library-hero aside { display: grid; justify-items: end; padding-bottom: 4px; }
.library-hero aside span { color: var(--accent); font-family: Georgia, serif; font-size: 54px; line-height: 1; }
.library-hero aside small { margin-top: 8px; color: var(--muted-2); font-size: 8px; letter-spacing: .15em; }
.library-hero-ai_video h1 { font-size: clamp(60px, 8vw, 110px); }
.library-list-section { padding-top: 74px; }
.library-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 42px 17px; }
.library-grid.compact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.library-grid.video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.library-card { min-width: 0; }
.library-cover { position: relative; display: block; overflow: hidden; aspect-ratio: .72; border-radius: 6px; background: linear-gradient(145deg, #221724, #0f0f13); box-shadow: 0 18px 44px rgba(0,0,0,.18); }
.video-grid .library-cover { aspect-ratio: 16/10; }
.library-cover img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .35s; }
.library-cover img[hidden], .content-detail-cover img[hidden] { display: none; }
.content-detail-cover.cover-image-failed { background: radial-gradient(circle at 24% 18%, rgba(233,92,145,.27), transparent 42%), linear-gradient(145deg, #30233b, #10141d); }
.library-card:hover .library-cover img { transform: scale(1.035); filter: saturate(1.07); }
.library-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5,5,8,.78)); }
.library-cover > span { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 11px; overflow: hidden; color: rgba(255,255,255,.78); font-size: 8px; letter-spacing: .07em; white-space: nowrap; text-overflow: ellipsis; }
.play-mark { position: absolute; z-index: 3; left: 50%; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(9,9,12,.42); color: white; font-size: 13px; backdrop-filter: blur(9px); transform: translate(-50%, -50%); }
.card-lock { position: absolute; z-index: 4; top: 10px; right: 10px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(8,8,11,.62); color: white; font-size: 7px; font-weight: 500; letter-spacing: .05em; backdrop-filter: blur(10px); }
.library-card-copy { padding: 15px 2px 0; }
.library-card-copy > div:first-child { display: flex; justify-content: space-between; gap: 8px; }
.library-card-copy small { overflow: hidden; color: var(--muted-2); font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.library-card-copy h3 { margin: 9px 0 7px; font-family: Georgia, "Songti SC", serif; font-size: 18px; font-weight: 400; line-height: 1.4; }
.library-card-copy h3 a:hover { color: var(--accent); }
.library-card-copy p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tag-line { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.tag-line span { padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted-2); font-size: 7px; }
.tag-line.large { gap: 7px; margin-top: 22px; }.tag-line.large span { padding: 6px 10px; font-size: 8px; }
.import-empty { min-height: 390px; }

.content-detail-hero { min-height: 710px; display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: clamp(55px, 8vw, 120px); align-items: center; padding-block: 80px 90px; }
.content-detail-cover { position: relative; overflow: hidden; aspect-ratio: .72; border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.content-detail-cover.wide { aspect-ratio: 16/10; align-self: center; }
.content-detail-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.content-detail-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(5,5,8,.8)); }
.content-detail-cover > span { position: absolute; z-index: 2; left: 19px; bottom: 18px; color: rgba(255,255,255,.75); font-size: 8px; letter-spacing: .14em; }
.platform-badge { position: absolute; z-index: 3; top: 14px; right: 14px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(9,9,13,.62); color: #fff; font-size: 8px; letter-spacing: .1em; backdrop-filter: blur(12px); }
.shelf-button { border: 0; cursor: pointer; }.shelf-button.saved { background: rgba(233,88,145,.18); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(233,88,145,.35); }
.detail-back { display: inline-flex; margin-bottom: 42px; padding-bottom: 7px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.content-detail-copy h1 { max-width: 800px; margin: 17px 0 24px; font-family: Georgia, "Songti SC", serif; font-size: clamp(45px, 6vw, 82px); font-weight: 400; line-height: 1.12; letter-spacing: -.05em; }
.content-meta { display: flex; flex-wrap: wrap; gap: 8px 25px; padding-block: 17px; border-block: 1px solid var(--line); }
.content-meta span { color: var(--muted); font-size: 9px; }.content-meta b { margin-left: 8px; color: var(--text); font-weight: 500; }
.content-summary { max-width: 760px; margin: 25px 0 0; color: var(--muted); font-size: 14px; line-height: 1.9; }
.novel-inline-preview { max-width:760px; margin-top:24px; padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb, var(--surface) 88%, transparent); }
.novel-inline-preview > span { color:var(--accent); font-size:10px; font-weight:700; letter-spacing:.14em; }
.novel-inline-preview p { display:-webkit-box; margin:10px 0 0; color:var(--text); font-size:13px; line-height:1.9; white-space:pre-line; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.inline-lock-panel { max-width: 680px; margin-top: 28px; padding: 24px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 12px; background: var(--accent-soft); }
.inline-lock-panel b { display: block; font-family: Georgia, "Songti SC", serif; font-size: 19px; font-weight: 400; }.inline-lock-panel p { margin: 8px 0 18px; color: var(--muted); font-size: 11px; }
.detail-lock-panel { max-width: none; margin: 0 0 35px; padding: 38px; }
.reader-preview { padding-block: 90px; background: #08080a; color: #f7f4ef; }
.reader-preview-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.12); }
.reader-preview-head h2 { margin: 9px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 42px; font-weight: 400; }
.reader-preview-head p { margin: 0; color: rgba(255,255,255,.48); font-size: 10px; }.reader-preview-head p b { color: #fff; }
.reader-strip { max-width: 780px; display: grid; gap: 3px; padding-top: 42px; }
.reader-strip figure { position: relative; margin: 0; background: #121216; }
.reader-strip img { width: 100%; display: block; }
.reader-strip figcaption { position: absolute; top: 12px; right: 12px; padding: 4px 7px; border-radius: 999px; background: rgba(0,0,0,.48); color: rgba(255,255,255,.58); font-size: 8px; backdrop-filter: blur(8px); }
.reader-strip.preview-three { max-width: 1100px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.reader-strip.preview-three figure { overflow: hidden; aspect-ratio: .72; border: 1px solid var(--line); border-radius: 14px; }
.reader-strip.preview-three img { height: 100%; object-fit: cover; }
.reader-boundary { max-width: 780px; margin-top: 24px; color: rgba(255,255,255,.4); font-size: 10px; text-align: center; }
.chapter-section { max-width: 1040px; }
.chapter-index { border-top: 1px solid var(--line); }
.chapter-index a { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 18px; padding: 20px 5px; border-bottom: 1px solid var(--line); transition: padding .2s, background .2s; }
.chapter-row { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 18px; padding: 20px 5px; border-bottom: 1px solid var(--line); }
.chapter-row.locked { color: var(--muted-2); }
.chapter-index a:hover { padding-inline: 14px; background: var(--surface); }
.chapter-index span, .chapter-row span { color: var(--accent); font-family: Georgia, serif; font-size: 12px; }.chapter-index b, .chapter-row b { font-size: 12px; font-weight: 400; }.chapter-index small, .chapter-row small { color: var(--muted-2); font-size: 8px; }
.chapter-document-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.chapter-document-actions a { display:inline-flex; grid-template-columns:none; padding:8px 12px; border:1px solid var(--line); border-radius:999px; font-size:9px; color:var(--text); white-space:nowrap; }
.chapter-document-actions a:first-child { border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); color:var(--accent); }
.chapter-document-actions a:hover { padding:8px 12px; background:var(--surface); }
.chapter-reader-page { background: color-mix(in srgb, var(--bg) 96%, var(--surface)); }
.text-reader { max-width: 860px; padding-block: 95px 130px; }
.text-reader header { padding-bottom: 42px; border-bottom: 1px solid var(--line); }
.text-reader header > a { display: inline-flex; margin-bottom: 55px; padding-bottom: 7px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.text-reader h1 { margin: 16px 0 12px; font-family: Georgia, "Songti SC", serif; font-size: clamp(42px, 6vw, 70px); font-weight: 400; letter-spacing: -.045em; }
.text-reader header > p { margin: 0; color: var(--muted-2); font-size: 9px; }
.text-reader-body { padding-block: 58px; color: var(--text); font-family: Georgia, "Songti SC", serif; font-size: 18px; line-height: 2.1; white-space: pre-wrap; }
.text-reader footer { padding-top: 32px; border-top: 1px solid var(--line); }
.reader-book { position: relative; margin-block: 42px 34px; }
.reader-book-viewport { position: relative; overflow: visible; }
.reader-page-control, .reader-page-number { display: none; }
.reader-page-body.reader-mode-paged { overflow-x: hidden; }
.reader-page-body.reader-mode-paged .text-reader { max-width: min(1180px, calc(100vw - 72px)); }
.reader-page-body.reader-mode-paged .reader-book { padding: 24px 56px 42px; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--surface) 88%, var(--bg)); box-shadow: 0 36px 90px -66px rgba(0,0,0,.9); }
.reader-page-body.reader-mode-paged .reader-book::before { position: absolute; z-index: 2; top: 22px; bottom: 38px; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent); box-shadow: 0 0 22px rgba(0,0,0,.22); content: ""; pointer-events: none; }
.reader-page-body.reader-mode-paged .reader-book-viewport { height: min(68dvh, 720px); min-height: 480px; overflow: hidden; border-radius: 11px; background: color-mix(in srgb, var(--bg) 94%, var(--surface)); box-shadow: inset 0 0 70px rgba(0,0,0,.08); touch-action: pan-y; }
.reader-page-body.reader-mode-paged .text-reader-body { height: 100%; min-width: 100%; padding: 46px clamp(30px,4.5vw,68px); column-count: auto; column-fill: auto; column-rule: 0; transition: transform .52s cubic-bezier(.22,.78,.22,1); will-change: transform; }
.reader-page-body.reader-mode-paged .reader-page-control { position: absolute; z-index: 4; top: 50%; display: grid; width: 42px; height: 62px; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface-2) 84%, transparent); color: var(--text); font-size: 18px; cursor: pointer; backdrop-filter: blur(16px); transform: translateY(-50%); transition: opacity .2s, border-color .2s, color .2s, transform .2s; }
.reader-page-body.reader-mode-paged .reader-page-control.previous { left: 8px; }
.reader-page-body.reader-mode-paged .reader-page-control.next { right: 8px; }
.reader-page-body.reader-mode-paged .reader-page-control:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-50%) scale(1.05); }
.reader-page-body.reader-mode-paged .reader-page-control:disabled { opacity: .2; cursor: default; }
.reader-page-body.reader-mode-paged .reader-page-number { position: absolute; right: 56px; bottom: 14px; display: block; color: var(--muted-2); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.reader-page-body.reader-mode-paged .reader-book-viewport::after { position: absolute; z-index: 3; inset: 0; background: linear-gradient(100deg, transparent 0 38%, rgba(255,255,255,.035) 48%, rgba(0,0,0,.22) 52%, transparent 64%); opacity: 0; content: ""; pointer-events: none; transform-origin: center; }
.reader-page-body.reader-mode-paged .reader-book.turning-next .reader-book-viewport::after { animation: reader-page-turn-next .62s ease; }
.reader-page-body.reader-mode-paged .reader-book.turning-previous .reader-book-viewport::after { animation: reader-page-turn-previous .62s ease; }
@keyframes reader-page-turn-next { 0% { opacity: 0; transform: translateX(-34%) scaleX(.5); } 42% { opacity: 1; } 100% { opacity: 0; transform: translateX(38%) scaleX(.42); } }
@keyframes reader-page-turn-previous { 0% { opacity: 0; transform: translateX(34%) scaleX(.5); } 42% { opacity: 1; } 100% { opacity: 0; transform: translateX(-38%) scaleX(.42); } }
.reader-progress { position: fixed; z-index: 20; top: 0; left: 0; width: 0; height: 3px; background: var(--accent); box-shadow: 0 0 14px rgba(233,88,145,.6); }
.reader-toolbar { position: fixed; z-index: 18; right: 18px; bottom: 20px; display: flex; gap: 7px; padding: 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(16,17,23,.74); box-shadow: 0 18px 44px rgba(0,0,0,.35); backdrop-filter: blur(20px); }
.reader-toolbar button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,.06); color: var(--text); cursor: pointer; }
.reader-page-body .mobile-dock { display: none !important; }
.reader-page-body .reader-toolbar { left: 50%; right: auto; bottom: max(20px, env(safe-area-inset-bottom)); gap: 5px; padding: 7px; transform: translateX(-50%); transition: opacity .22s ease, transform .22s ease; }
.reader-page-body .reader-toolbar button { width: auto; min-width: 48px; padding-inline: 10px; border-radius: 999px; font-size: 11px; white-space: nowrap; }
.reader-page-body.reader-ui-hidden .reader-toolbar { opacity: 0; pointer-events: none; transform: translate(-50%, 18px); }
.reader-page-body.reader-ui-hidden .reader-progress { opacity: .28; }
.reader-page-body.reader-immersive .site-header,
.reader-page-body.reader-immersive .text-reader > header { display: none; }
.reader-page-body.reader-immersive .text-reader { padding-top: 28px; }
.reader-dialog { width: min(560px, calc(100vw - 24px)); max-width: none; max-height: min(82dvh, 760px); padding: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.reader-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(6px); }
.reader-dialog-card { max-height: min(82dvh, 760px); display: grid; gap: 18px; padding: 25px; overflow: auto; }
.reader-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.reader-dialog-heading h2 { margin: 8px 0 0; font: 400 28px/1.2 Georgia, "Songti SC", serif; }
.reader-dialog-close { width: 36px; height: 36px; flex: none; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--text); font-size: 23px; cursor: pointer; }
.reader-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 13px; }
.reader-setting-row small { display: block; margin-top: 4px; color: var(--muted-2); font-size: 10px; }
.reader-setting-row select { min-width: 160px; height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--text); }
.reader-font-import input { width: min(260px, 55%); color: var(--muted); font-size: 10px; }
.reader-setting-slider { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
.reader-setting-slider output { color: var(--accent); font-variant-numeric: tabular-nums; }
.reader-setting-slider input { width: 100%; accent-color: var(--accent); }
.reader-settings-status, .reader-bookmark-note { min-height: 1em; margin: 0; color: var(--muted-2); font-size: 11px; }
.reader-toc-list { display: grid; max-height: min(58dvh, 520px); overflow: auto; }
.reader-toc-list a { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 13px 3px; border-bottom: 1px solid var(--line); color: var(--muted); }
.reader-toc-list a.active { color: var(--text); }
.reader-toc-list a > span { color: var(--accent); font: 12px Georgia, serif; }
.reader-toc-list a b { font-size: 12px; font-weight: 400; }
.reader-toc-list a small { color: var(--accent); font-size: 10px; }
.reader-bookmark-list { display: grid; max-height: min(58dvh, 520px); overflow: auto; }
.reader-bookmark-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.reader-bookmark-row a { display: grid; gap: 4px; min-width: 0; }
.reader-bookmark-row a b { overflow: hidden; color: var(--text); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.reader-bookmark-row a small { color: var(--muted-2); font-size: 10px; }
.reader-bookmark-row button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; }
.reader-bookmark-empty { margin: 8px 0; color: var(--muted); font-size: 12px; }
.reader-nav { display: flex; justify-content: space-between; gap: 16px; padding-top: 30px; border-top: 1px solid var(--line); }.reader-nav a { color: var(--accent); font-size: 11px; }
.account-bookshelf { padding:38px 0 12px; }
.account-bookshelf:last-of-type { padding-bottom:72px; }
.account-bookshelf .section-heading { margin-bottom:20px; }
.account-bookshelf .section-heading h2 { margin-top:8px; font-size:30px; }
.bookshelf-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; }
.bookshelf-item { display:grid; gap:9px; padding:10px; border:1px solid transparent; border-radius:18px; transition:transform .2s,border-color .2s,background .2s; }
.bookshelf-item:hover { border-color:var(--line); background:rgba(255,255,255,.025); transform:translateY(-3px); }
.bookshelf-cover { display:grid; aspect-ratio:.72; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:linear-gradient(145deg,rgba(233,88,145,.2),rgba(75,45,113,.14)); color:var(--accent); font-family:Georgia,serif; font-size:42px; }
.bookshelf-cover img { width:100%; height:100%; object-fit:cover; }
.bookshelf-item b { overflow:hidden; padding-inline:2px; font-size:12px; white-space:nowrap; text-overflow:ellipsis; }
.bookshelf-item small { padding-inline:2px; color:var(--muted); font-size:9px; }
.bookshelf-empty { padding:46px; border:1px dashed var(--line); border-radius:18px; background:rgba(255,255,255,.015); color:var(--muted); font-size:11px; text-align:center; }

@media (max-width: 1100px) {
  .module-grid { grid-template-columns: repeat(2, 1fr); }
  .module-tab { padding-inline: 16px; column-gap: 12px; }
  .library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .library-grid.video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .app-landing-hero { min-height: 0; grid-template-columns: 1fr; padding-block: 62px 75px; }.app-landing-copy h1 { font-size: 57px; }.app-download-actions { align-items: flex-start; flex-direction: column; }.app-phone-stage { min-height: 620px; margin-top: 22px; }.app-phone { width: 280px; }.app-orbit.orbit-one { width: 440px; height: 440px; }.app-orbit.orbit-two { width: 320px; height: 320px; }.app-preview-chip { top: 58px; right: 2px; }.app-preview-caption { left: 0; bottom: 58px; min-width: 205px; }.app-feature-grid { grid-template-columns: 1fr; margin-bottom: 70px; }.app-feature-grid article { min-height: 170px; }
  .account-hero { min-height: 240px; display: grid; align-content: end; padding: 30px; }.account-grid { grid-template-columns: 1fr; }.account-panel, .locked-panel { padding: 30px; }
  .purchased-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .member-create-form { grid-template-columns:1fr 1fr; }
  .member-record-details form { grid-template-columns:1fr 1fr; }
  .module-section { padding-bottom: 75px; }.module-logo-row > span { display: none; }.module-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }.module-tabs::-webkit-scrollbar { display: none; }.module-tab { min-width: 142px; min-height: 92px; flex: 1 0 142px; padding: 13px 14px; }.module-tab > strong { font-size: 22px; }.module-tab::after { right: 14px; left: 14px; }
  .library-hero { min-height: 350px; grid-template-columns: 1fr; gap: 35px; padding-block: 70px 45px; }.library-hero h1 { font-size: 68px; }.library-hero aside { justify-items: start; }
  .library-grid, .library-grid.compact-grid, .library-grid.video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 33px 11px; }
  .library-card-copy h3 { font-size: 16px; }.library-card-copy > div:first-child small:last-child { display: none; }
  .content-detail-hero { min-height: 0; grid-template-columns: 1fr; gap: 45px; padding-block: 45px 70px; }.content-detail-cover { width: min(350px, 82vw); justify-self: center; }.content-detail-cover.wide { width: 100%; }.detail-back { margin-bottom: 25px; }.content-detail-copy h1 { font-size: 45px; }
  .reader-preview { padding-block: 65px; }.reader-preview-head { align-items: start; flex-direction: column; }.reader-preview-head h2 { font-size: 34px; }.reader-strip { padding-inline: 0; }
  .chapter-index a { grid-template-columns: 36px 1fr; }.chapter-index small { grid-column: 2; }
  .bookshelf-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.text-reader { padding: 68px 20px 110px; }.text-reader-body { font-size: 17px; }
  .reader-page-body .reader-toolbar { bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100vw - 20px); justify-content: center; gap: 3px; }
  .reader-page-body .reader-toolbar button { min-width: 0; padding-inline: clamp(6px, 2.2vw, 10px); font-size: 10px; }
  .reader-dialog-card { padding: 19px; }
  .reader-setting-row { align-items: start; flex-direction: column; gap: 7px; }
  .reader-setting-row select { width: 100%; }
  .reader-font-import { flex-direction: row; align-items: center; }
}

/* A wide browser viewport (including an unfolded book-style device) reads as
   an open two-page spread; narrow phones retain the normal single column. */
@media (min-width: 700px) {
  .text-reader { width: min(100% - 48px, 1440px); max-width: 1440px; }
  .reader-page-body:not(.reader-mode-paged) .text-reader-body {
    column-count: 2;
    column-gap: clamp(44px, 6vw, 96px);
    column-rule: 1px solid var(--line);
    column-fill: balance;
  }
}

@media (max-width: 699px) {
  .reader-page-body.reader-mode-paged .text-reader { max-width: 100%; }
  .reader-page-body.reader-mode-paged .reader-book { margin-inline: -8px; padding: 10px 34px 34px; border-radius: 14px; }
  .reader-page-body.reader-mode-paged .reader-book::before { display: none; }
  .reader-page-body.reader-mode-paged .reader-book-viewport { height: min(72dvh, 680px); min-height: 430px; }
  .reader-page-body.reader-mode-paged .text-reader-body { padding: 30px 25px; }
  .reader-page-body.reader-mode-paged .reader-page-control { width: 34px; height: 54px; }
  .reader-page-body.reader-mode-paged .reader-page-control.previous { left: -2px; }
  .reader-page-body.reader-mode-paged .reader-page-control.next { right: -2px; }
  .reader-page-body.reader-mode-paged .reader-page-number { right: 35px; bottom: 11px; }
}

/* Flutter glass visual parity ------------------------------------------------ */
@media (max-width: 820px) {
body:not(.admin-page) {
  --bg: #090b11;
  --surface: rgba(23, 27, 36, .72);
  --surface-2: rgba(29, 34, 45, .74);
  --surface-3: rgba(38, 46, 67, .62);
  --text: #f7f4f0;
  --muted: #a6a5b2;
  --muted-2: #747584;
  --line: rgba(255, 255, 255, .13);
  --line-strong: rgba(255, 255, 255, .22);
  --accent: #e95891;
  --accent-soft: rgba(233, 88, 145, .16);
  --radius: 20px;
  min-height: 100dvh;
  background:
    radial-gradient(circle at -8% 8%, rgba(113, 132, 201, .24), transparent 31rem),
    radial-gradient(circle at 106% 38%, rgba(233, 88, 145, .17), transparent 34rem),
    radial-gradient(circle at 48% 105%, rgba(77, 100, 140, .14), transparent 32rem),
    linear-gradient(180deg, #171a24 0, #090b11 44%, #090b11 100%);
  background-attachment: fixed;
}

body:not(.admin-page) .site-header {
  position: sticky;
  top: 0;
  border-bottom-color: rgba(255, 255, 255, .11);
  background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(16, 20, 29, .68));
  box-shadow: 0 14px 38px -24px rgba(0, 0, 0, .9);
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
}

body:not(.admin-page) .brand-mark {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 13px;
  background: #0d0e14;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .34), 0 0 24px rgba(233, 88, 145, .14);
}

body:not(.admin-page) .icon-button {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .045);
  backdrop-filter: blur(15px);
}

body:not(.admin-page) .page-hero,
body:not(.admin-page) .library-hero {
  min-height: 300px;
  padding-block: 72px 42px;
  border-bottom: 0;
}

body:not(.admin-page) .page-hero h1,
body:not(.admin-page) .library-hero h1,
body:not(.admin-page) .section-heading h2,
body:not(.admin-page) .card-body h3,
body:not(.admin-page) .library-card-copy h3,
body:not(.admin-page) .detail-intro h1,
body:not(.admin-page) .content-detail-copy h1,
body:not(.admin-page) .empty-state h2 {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  letter-spacing: -.025em;
}

body:not(.admin-page) .page-hero h1 {
  margin: 14px 0 9px;
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 750;
  line-height: 1.08;
}

body:not(.admin-page) .library-hero h1 {
  margin: 14px 0 12px;
  font-size: clamp(48px, 7vw, 84px);
  font-weight: 750;
  line-height: 1;
}

body:not(.admin-page) .page-count,
body:not(.admin-page) .library-hero aside {
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(18, 21, 31, .62));
  box-shadow: 0 18px 35px -22px rgba(0, 0, 0, .9);
  backdrop-filter: blur(18px);
}

body:not(.admin-page) .page-count b,
body:not(.admin-page) .library-hero aside span {
  font-family: inherit;
  font-weight: 700;
}

body:not(.admin-page) .listing-section,
body:not(.admin-page) .library-list-section {
  padding-top: 24px;
}

body:not(.admin-page) .album-content-tag-nav,
body:not(.admin-page) .album-category-nav {
  gap: 8px;
  margin: 0 0 22px;
  padding: 4px 1px 8px;
  border-bottom: 0;
}

body:not(.admin-page) .album-content-tag-nav > span {
  display: none;
}

body:not(.admin-page) .album-content-tag-nav a,
body:not(.admin-page) .album-category-nav a,
body:not(.admin-page) .section-filters a,
body:not(.admin-page) .section-filters button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  font-weight: 600;
  backdrop-filter: blur(14px);
}

body:not(.admin-page) .album-content-tag-nav a:hover,
body:not(.admin-page) .album-content-tag-nav a.active,
body:not(.admin-page) .album-category-nav a:hover,
body:not(.admin-page) .album-category-nav a.active,
body:not(.admin-page) .section-filters .active {
  border-color: rgba(233, 88, 145, .55);
  background: rgba(233, 88, 145, .17);
  color: #fff;
}

body:not(.admin-page) .resource-grid {
  gap: 16px;
}

body:not(.admin-page) .resource-card,
body:not(.admin-page) .library-card,
body:not(.admin-page) .module-card,
body:not(.admin-page) .account-panel,
body:not(.admin-page) .help-grid article,
body:not(.admin-page) .auth-card,
body:not(.admin-page) .locked-panel,
body:not(.admin-page) .inline-lock-panel,
body:not(.admin-page) .integration-placeholder,
body:not(.admin-page) .newsletter {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .105), rgba(29, 41, 64, .055) 45%, rgba(16, 19, 27, .72));
  box-shadow: 0 28px 48px -28px rgba(0, 0, 0, .9);
  backdrop-filter: blur(22px) saturate(118%);
  -webkit-backdrop-filter: blur(22px) saturate(118%);
}

body:not(.admin-page) .resource-card,
body:not(.admin-page) .library-card {
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), border-color .28s, box-shadow .28s;
}

body:not(.admin-page) .resource-card:hover,
body:not(.admin-page) .library-card:hover {
  border-color: rgba(255, 255, 255, .22);
  box-shadow: 0 34px 58px -28px rgba(0, 0, 0, .94), 0 0 30px rgba(233, 88, 145, .06);
  transform: translateY(-4px);
}

body:not(.admin-page) .card-cover,
body:not(.admin-page) .library-cover {
  overflow: hidden;
  border-radius: 19px 19px 0 0;
  background: linear-gradient(145deg, rgba(51, 36, 53, .9), rgba(22, 30, 45, .95));
}

body:not(.admin-page) .card-cover {
  aspect-ratio: .82;
}

body:not(.admin-page) .resource-card:hover .card-cover,
body:not(.admin-page) .resource-card:hover .card-cover.has-real-cover > img {
  transform: none;
}

body:not(.admin-page) .resource-card:hover .card-cover.has-real-cover > img,
body:not(.admin-page) .library-card:hover .library-cover img {
  transform: scale(1.025);
}

body:not(.admin-page) .card-body,
body:not(.admin-page) .library-card-copy {
  padding: 13px 13px 14px;
}

body:not(.admin-page) .card-body h3,
body:not(.admin-page) .library-card-copy h3 {
  margin: 8px 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

body:not(.admin-page) .card-kicker,
body:not(.admin-page) .library-card-copy small {
  font-size: 9px;
}

body:not(.admin-page) .cover-metrics,
body:not(.admin-page) .access-badge,
body:not(.admin-page) .card-lock {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(10, 12, 18, .65);
  backdrop-filter: blur(14px);
}

body:not(.admin-page) .numbered-pagination {
  margin-top: 34px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: rgba(18, 21, 30, .55);
  backdrop-filter: blur(20px);
}

body:not(.admin-page) .numbered-pagination a,
body:not(.admin-page) .numbered-pagination nav > span {
  border-color: rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .035);
}

body:not(.admin-page) .numbered-pagination a:hover,
body:not(.admin-page) .numbered-pagination .page-number.active {
  border-color: rgba(233, 88, 145, .55);
  background: var(--accent);
  color: #fff;
}

body:not(.admin-page) .detail-hero,
body:not(.admin-page) .live-album-hero,
body:not(.admin-page) .reader-preview {
  border-bottom-color: rgba(255, 255, 255, .1);
  background: transparent;
}

body:not(.admin-page) .detail-cover,
body:not(.admin-page) .live-cover,
body:not(.admin-page) .content-detail-cover {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  box-shadow: 0 32px 70px -28px rgba(0, 0, 0, .9);
}

body:not(.admin-page) .site-footer {
  border-top-color: rgba(255, 255, 255, .1);
  background: rgba(13, 15, 22, .66);
  backdrop-filter: blur(24px);
}
}

@media (max-width: 820px) {
  .album-browser-head { grid-template-columns: 1fr; align-items: start; gap: 22px; padding-block: 34px 14px; }
  .album-subcategory-tabs { grid-column: auto; gap: 7px; padding-top: 14px; }
  .album-subcategory-tabs a { padding: 7px 12px; }
  .album-latest-section { padding-top: 24px; }
  .album-category-sections { gap: 58px; padding-bottom: 75px; }
  body:not(.admin-page) {
    --shell: min(100% - 28px, 720px);
    padding-bottom: calc(98px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at -20% 4%, rgba(113, 132, 201, .25), transparent 23rem),
      radial-gradient(circle at 115% 30%, rgba(233, 88, 145, .18), transparent 25rem),
      linear-gradient(180deg, #171a24 0, #090b11 42%, #090b11 100%);
    background-attachment: fixed;
  }

  body:not(.admin-page) .header-main {
    min-height: 62px;
  }

  body:not(.admin-page) .site-footer {
    display: none;
  }

  body:not(.admin-page) .page-hero,
  body:not(.admin-page) .library-hero {
    min-height: 0;
    display: block;
    padding-block: 30px 18px;
  }

  body:not(.admin-page) .page-hero h1,
  body:not(.admin-page) .library-hero h1 {
    margin: 9px 0 7px;
    font-size: 32px;
    font-weight: 750;
    line-height: 1.12;
  }

  body:not(.admin-page) .page-hero p,
  body:not(.admin-page) .library-hero > div > p {
    font-size: 13px;
    line-height: 1.55;
  }

  body:not(.admin-page) .page-count,
  body:not(.admin-page) .library-hero aside {
    display: none;
  }

  body:not(.admin-page) .listing-section,
  body:not(.admin-page) .library-list-section {
    padding-top: 4px;
    padding-bottom: 34px;
  }

  body:not(.admin-page) .content-section {
    padding-block: 34px;
  }

  body:not(.admin-page) .resource-grid {
    gap: 12px;
  }

  body:not(.admin-page) .card-body,
  body:not(.admin-page) .library-card-copy {
    padding: 11px 11px 12px;
  }

  body:not(.admin-page) .card-body h3,
  body:not(.admin-page) .library-card-copy h3 {
    margin-top: 7px;
    font-size: 14px;
  }

  body:not(.admin-page) .card-body p,
  body:not(.admin-page) .library-card-copy p,
  body:not(.admin-page) .card-footer {
    display: none;
  }

  body:not(.admin-page) .numbered-pagination {
    align-items: stretch;
    gap: 12px;
    margin-top: 24px;
    padding: 13px;
  }

  body:not(.admin-page) .numbered-pagination nav {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
  }

  body:not(.admin-page) .mobile-dock {
    left: 12px;
    right: 12px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    height: 76px;
  }
}

@media (max-width: 540px) {
  body:not(.admin-page) {
    --shell: calc(100% - 24px);
  }

  body:not(.admin-page) .eyebrow {
    font-size: 9px;
  }

  body:not(.admin-page) .resource-grid,
  body:not(.admin-page) .library-grid,
  body:not(.admin-page) .library-grid.compact-grid,
  body:not(.admin-page) .library-grid.video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body:not(.admin-page) .card-cover {
    aspect-ratio: .78;
  }

  body:not(.admin-page) .album-content-tag-nav,
  body:not(.admin-page) .album-category-nav {
    margin-bottom: 14px;
  }
}

@media (max-width: 820px) {
body:not(.admin-page) .archive-hero-copy h1,
body:not(.admin-page) .module-card h3,
body:not(.admin-page) .category-tile b {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  letter-spacing: -.025em;
}

body:not(.admin-page) .archive-hero-copy h1 {
  font-size: clamp(50px, 6vw, 78px);
  font-weight: 780;
  line-height: 1.04;
}

body:not(.admin-page) .archive-hero-copy h1 em {
  font-style: normal;
}

body:not(.admin-page) .category-tile {
  overflow: hidden;
  border-color: rgba(255, 255, 255, .13);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .1), rgba(23, 27, 38, .72));
  box-shadow: 0 28px 48px -28px rgba(0, 0, 0, .9);
  backdrop-filter: blur(20px);
}

body:not(.admin-page) .category-tile b {
  font-weight: 700;
}

body:not(.admin-page) .module-logo-row {
  border-bottom-color: rgba(255, 255, 255, .1);
}

body:not(.admin-page) .module-card {
  border-radius: 20px;
}

body:not(.admin-page) .module-card h3 {
  font-weight: 720;
}

body:not(.admin-page) .empty-state {
  min-height: 330px;
  align-content: center;
  padding: 42px 24px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(24, 31, 49, .055) 45%, rgba(14, 17, 25, .65));
  box-shadow: 0 28px 48px -30px rgba(0, 0, 0, .9);
  backdrop-filter: blur(22px);
}

body:not(.admin-page) .empty-state > .no-data-icon {
  border-color: rgba(255, 255, 255, .14);
  border-radius: 20px;
  background: rgba(255, 255, 255, .055);
}

body:not(.admin-page) .empty-state h2 {
  font-size: 28px;
  font-weight: 720;
}
}

@media (max-width: 820px) {
  body:not(.admin-page) .archive-hero {
    gap: 28px;
    padding-block: 34px 48px;
  }

  body:not(.admin-page) .archive-hero-copy h1 {
    margin: 14px 0 16px;
    font-size: clamp(40px, 10vw, 56px);
  }

  body:not(.admin-page) .archive-hero-copy > p {
    max-width: 560px;
    font-size: 14px;
    line-height: 1.7;
  }

  body:not(.admin-page) .category-showcase {
    gap: 12px;
  }

  body:not(.admin-page) .category-tile,
  body:not(.admin-page) .category-tile:nth-child(2),
  body:not(.admin-page) .category-tile:nth-child(4) {
    min-height: 180px;
    transform: none;
  }

  body:not(.admin-page) .module-section {
    padding-bottom: 48px;
  }

  body:not(.admin-page) .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body:not(.admin-page) .module-card {
    min-height: 170px;
    padding: 18px;
  }

  body:not(.admin-page) .module-card h3 {
    font-size: 25px;
  }

  body:not(.admin-page) .module-card > b {
    top: 17px;
    right: 18px;
  }

  body:not(.admin-page) .empty-state {
    min-height: 300px;
    padding: 34px 20px;
  }
}

@media (max-width: 540px) {
  body:not(.admin-page) .archive-hero {
    padding-top: 28px;
  }

  body:not(.admin-page) .archive-hero-copy h1 {
    font-size: 42px;
  }

  body:not(.admin-page) .category-showcase {
    gap: 10px;
  }

  body:not(.admin-page) .category-tile,
  body:not(.admin-page) .category-tile:nth-child(2),
  body:not(.admin-page) .category-tile:nth-child(4) {
    min-height: 155px;
  }

  body:not(.admin-page) .category-tile b {
    font-size: 17px;
  }

  body:not(.admin-page) .module-logo-row {
    margin-bottom: 18px;
    padding-bottom: 16px;
  }

  body:not(.admin-page) .module-card {
    min-height: 152px;
    padding: 16px;
  }

  body:not(.admin-page) .module-card h3 {
    font-size: 22px;
  }

  body:not(.admin-page) .module-card p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

/* Final responsive overrides for the refreshed homepage catalog. */
.module-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.home-album-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.home-module-ai_video .video-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.novel-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1120px) {
  .home-album-grid, .home-module-ai_video .video-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .novel-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .home-album-grid, .home-module-ai_video .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .novel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-catalog-section { padding-block: 34px; }
}
@media (max-width: 540px) {
  .home-album-grid, .home-module-ai_video .video-grid, .novel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-heading-actions { gap: 8px; }
  .home-heading-actions .section-link { font-size: 10px; }
}
.thumbnail-placeholder {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: none;
  place-items: center;
  padding: 14px;
  color: var(--muted-2);
  font-size: 10px;
  text-align: center;
  background: radial-gradient(circle at 76% 20%, rgba(233, 88, 145, .12), transparent 38%), linear-gradient(145deg, #242530, #11131a);
}
.card-cover.image-unavailable .thumbnail-placeholder,
.library-cover.cover-image-failed .thumbnail-placeholder,
.content-detail-cover.cover-image-failed .thumbnail-placeholder,
.media-tile.image-unavailable .thumbnail-placeholder { display: grid; }
.home-catalog-section .empty-state { border-radius: 14px; }

/* Anime catalog supports a compact, scan-friendly row layout as well as cards. */
.game-category-tabs, .game-system-tabs { display: flex; width: var(--shell); gap: 9px; margin-inline: auto; overflow-x: auto; scrollbar-width: none; }
.game-category-tabs::-webkit-scrollbar, .game-system-tabs::-webkit-scrollbar { display: none; }
.game-category-tabs { padding-top: 25px; }
.game-system-tabs { padding-top: 12px; }
.game-category-tabs a, .game-system-tabs a { flex: 0 0 auto; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; transition: border-color .2s, background .2s, color .2s; }
.game-category-tabs a.active, .game-category-tabs a:hover, .game-system-tabs a.active, .game-system-tabs a:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--accent-soft); color: var(--text); }
.content-tag-filters { display:flex; width:var(--shell); gap:8px; margin:20px auto 0; align-items:center; overflow-x:auto; scrollbar-width:none; }
.content-tag-filters::-webkit-scrollbar { display:none; }
.content-tag-filters > b { flex:0 0 auto; margin-right:4px; color:var(--muted-2); font-size:10px; letter-spacing:.12em; }
.content-tag-filters a { display:inline-flex; flex:0 0 auto; align-items:center; gap:7px; padding:8px 13px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:10px; transition:border-color .2s,background .2s,color .2s; }
.content-tag-filters a small { color:var(--muted-2); font-size:8px; }
.content-tag-filters a:hover, .content-tag-filters a.active { border-color:color-mix(in srgb, var(--accent) 60%, var(--line)); background:var(--accent-soft); color:var(--text); }
.video-watch-page { padding-block:38px 90px; }
.video-watch-page > .detail-back { display:inline-block; margin-bottom:18px; }
.video-watch-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; align-items:start; gap:22px; }
.video-watch-main { min-width:0; display:grid; gap:18px; }
.video-player-shell { position:relative; display:grid; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#000; box-shadow:0 28px 80px -52px rgba(0,0,0,.95); }
.video-player-shell video { width:100%; height:100%; display:block; object-fit:contain; background:#000; }
.video-player-locked { display:grid; place-content:center; justify-items:center; gap:20px; background:radial-gradient(circle at 50% 40%,rgba(233,88,145,.15),transparent 45%),#08080b; }
.video-player-locked strong { font:400 clamp(24px,3vw,38px)/1.2 Georgia,"Songti SC",serif; }
.video-description-card { padding:25px 27px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.video-description-heading { display:flex; align-items:start; justify-content:space-between; gap:18px; }
.video-description-heading h1 { max-width:760px; margin:12px 0 18px; font:400 clamp(28px,4vw,50px)/1.14 Georgia,"Songti SC",serif; letter-spacing:-.035em; }
.video-description-card .content-summary { margin:22px 0 0; padding-top:22px; border-top:1px solid var(--line); }
.video-related-panel { position:sticky; top:92px; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.video-related-heading { padding-bottom:15px; border-bottom:1px solid var(--line); }
.video-related-heading span { color:var(--accent); font-size:8px; letter-spacing:.18em; }
.video-related-heading h2 { margin:8px 0 0; font:400 25px/1.2 Georgia,"Songti SC",serif; }
.video-related-list { display:grid; gap:10px; padding-top:13px; }
.video-related-item { display:grid; grid-template-columns:116px minmax(0,1fr); align-items:center; gap:11px; padding:7px; border-radius:12px; transition:background .2s,transform .2s; }
.video-related-item:hover { background:var(--surface-2); transform:translateX(2px); }
.video-related-cover { position:relative; display:grid; aspect-ratio:16/9; place-items:center; overflow:hidden; border-radius:9px; background:linear-gradient(145deg,#211727,#101118); }
.video-related-cover img { width:100%; height:100%; object-fit:cover; }
.video-related-cover i { position:absolute; display:grid; width:27px; height:27px; place-items:center; border-radius:50%; background:rgba(0,0,0,.62); color:#fff; font-size:9px; font-style:normal; backdrop-filter:blur(8px); }
.video-related-item > span:last-child { min-width:0; display:grid; gap:7px; }
.video-related-item b { display:-webkit-box; overflow:hidden; font-size:11px; font-weight:500; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.video-related-item small,.video-related-empty { color:var(--muted-2); font-size:8px; }
.video-related-empty { margin:20px 0 4px; }
@media (max-width:1000px) { .video-watch-layout { grid-template-columns:1fr; }.video-related-panel { position:static; }.video-related-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .video-watch-page { padding-block:22px 70px; }.video-player-shell { margin-inline:-12px; border-radius:0; }.video-description-card,.video-related-panel { padding:18px; border-radius:14px; }.video-description-heading { display:grid; }.video-related-list { grid-template-columns:1fr; } }
.emulator-game-cover { position: relative; display: grid; min-height: 290px; align-content: end; gap: 13px; overflow: hidden; padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(circle at 75% 25%, rgba(76,181,142,.24), transparent 35%), linear-gradient(145deg, #171a25, #0c0c10 72%); }
.emulator-game-page { padding-block: 38px 90px; }.emulator-game-page > .detail-back { display: inline-block; margin-bottom: 18px; }.emulator-game-copy { max-width: 900px; margin: 26px auto 0; }
.emulator-game-cover::before, .emulator-game-cover::after { position: absolute; width: 190px; height: 190px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; content: ""; }
.emulator-game-cover::before { top: -64px; right: -30px; }.emulator-game-cover::after { top: -32px; right: 2px; width: 125px; height: 125px; }
.emulator-game-cover > * { position: relative; z-index: 1; }.emulator-game-cover small { color: var(--accent); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }.emulator-game-cover h1 { max-width: 650px; margin: 0; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.72); font: 400 clamp(34px, 5vw, 68px)/1.1 Georgia, "Songti SC", serif; letter-spacing: -.035em; overflow-wrap: anywhere; }
.emulator-game-cover .emulator-detail-art { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; filter:saturate(.8) contrast(1.04); }.emulator-game-cover::after { z-index:0; inset:0; width:auto; height:auto; border:0; border-radius:0; background:linear-gradient(90deg,rgba(5,6,10,.94) 0%,rgba(5,6,10,.74) 47%,rgba(5,6,10,.18) 100%),linear-gradient(0deg,rgba(5,6,10,.86),transparent 70%); }
.emulator-game-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }.emulator-game-details div { display: grid; gap: 7px; padding: 17px; border: 1px solid var(--line); border-radius: 13px; }.emulator-game-details small { color: var(--muted-2); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }.emulator-game-details b { font-size: 13px; font-weight: 500; }
.emulator-rom-notice { margin-top: 22px; padding: 19px 20px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); font-size: 12px; line-height: 1.8; }.emulator-rom-notice.ready { border-color: color-mix(in srgb, #64c99c 38%, var(--line)); }.emulator-rom-notice p { margin: 0; }
.emulator-play-actions { flex-wrap:wrap; align-items:center; gap:10px; }.secondary-button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; gap:18px; padding:0 21px; border:1px solid var(--line-strong); border-radius:999px; background:transparent; color:var(--text); font-size:12px; font-weight:650; cursor:pointer; }.secondary-button:hover { border-color:var(--accent); color:var(--accent); }.secondary-button.is-locked { color:var(--muted); }
.emulator-mode-actions { display:inline-flex; align-items:center; gap:10px; }
.emulator-mode-button { width:58px; height:58px; display:inline-grid; place-items:center; border:1px solid var(--line-strong); border-radius:18px; background:transparent; color:var(--text); cursor:pointer; transition:transform .2s,border-color .2s,background .2s,color .2s,box-shadow .2s; }
.emulator-mode-button svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.emulator-mode-button.floating { border-color:transparent; background:var(--accent); color:#fff; box-shadow:0 16px 34px -18px color-mix(in srgb,var(--accent) 75%,transparent); }
.emulator-mode-button:hover { transform:translateY(-2px); border-color:var(--accent); color:var(--accent); }
.emulator-mode-button.floating:hover { color:#fff; background:color-mix(in srgb,var(--accent) 86%,#fff); }
.emulator-inline-stage { position:relative; z-index:4; width:min(1100px,100%); margin:26px auto 0; overflow:hidden; border:1px solid rgba(255,255,255,.15); border-radius:20px; background:#050507; box-shadow:0 26px 75px -48px rgba(0,0,0,.92); }
.emulator-stage-header { height:50px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 10px 0 17px; border-bottom:1px solid rgba(255,255,255,.1); background:#101015; color:#fff; user-select:none; }
.emulator-stage-header > span { min-width:0; display:flex; align-items:center; gap:8px; }
.emulator-stage-header i { width:7px; height:7px; flex:none; border-radius:50%; background:#55d49b; box-shadow:0 0 12px rgba(85,212,155,.7); }
.emulator-stage-header strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:600; }
.emulator-stage-header small { flex:none; color:rgba(255,255,255,.46); font-size:9px; }
.emulator-stage-actions { display:flex; gap:7px; }
.emulator-stage-actions button { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.14); border-radius:11px; background:#19191f; color:#fff; cursor:pointer; }
.emulator-stage-actions button:hover { border-color:var(--accent); color:var(--accent); }
.emulator-stage-actions svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.emulator-dock-button { display:none !important; font-size:20px; }
.emulator-stage-screen { width:100%; aspect-ratio:16/9; min-height:390px; background:#000; }
.emulator-stage-screen iframe { width:100%; height:100%; display:block; border:0; background:#000; }
.emulator-inline-stage.is-floating { position:fixed; z-index:150; right:18px; bottom:18px; width:min(720px,calc(100vw - 36px)); height:min(520px,calc(100dvh - 80px)); margin:0; box-shadow:0 32px 100px rgba(0,0,0,.8); resize:both; }
.emulator-inline-stage.is-floating .emulator-stage-header { cursor:grab; touch-action:none; }
.emulator-inline-stage.is-floating .emulator-stage-header:active { cursor:grabbing; }
.emulator-inline-stage.is-floating .emulator-stage-screen { height:calc(100% - 50px); min-height:0; aspect-ratio:auto; }
.emulator-inline-stage.is-floating .emulator-dock-button { display:grid !important; }
@media (max-width: 760px) { .game-category-tabs { padding-top: 18px; }.emulator-game-cover { min-height: 260px; padding:22px; }.emulator-game-details { grid-template-columns:1fr; }.emulator-play-actions { align-items:center; }.emulator-play-actions > .secondary-button { width:100%; }.emulator-mode-actions { width:auto; }.emulator-stage-header small { display:none; }.emulator-stage-screen { min-height:230px; }.emulator-inline-stage.is-floating { inset:0; width:100vw; height:100dvh; max-width:none; border:0; border-radius:0; resize:none; }.emulator-inline-stage.is-floating .emulator-stage-header { height:calc(50px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); }.emulator-inline-stage.is-floating .emulator-stage-screen { height:calc(100% - 50px - env(safe-area-inset-top)); } }
.anime-view-switch { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: -18px 0 26px; }
.anime-view-switch > span { margin-right: 5px; color: var(--muted-2); font-size: 10px; }
.anime-view-switch a { min-width: 60px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; text-align: center; transition: border-color .2s, color .2s, background .2s; }
.anime-view-switch a:hover, .anime-view-switch a.active { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--accent-soft); color: var(--text); }
body:not(.admin-page) .library-grid.anime-list-view { display: flex; flex-direction: column; gap: 12px; }
body:not(.admin-page) .library-grid.anime-list-view .library-card { display: grid; grid-template-columns: 138px minmax(0, 1fr); align-items: center; gap: 18px; padding: 12px; }
body:not(.admin-page) .library-grid.anime-list-view .library-cover { height: 158px; aspect-ratio: auto; border-radius: 12px; }
body:not(.admin-page) .library-grid.anime-list-view .library-card-copy { padding: 4px 8px 4px 0; }
body:not(.admin-page) .library-grid.anime-list-view .library-card-copy h3 { margin: 7px 0; font-size: 19px; }
body:not(.admin-page) .library-grid.anime-list-view .library-card-copy p { display: -webkit-box; -webkit-line-clamp: 3; }
@media (max-width: 540px) {
  .anime-view-switch { margin-top: -8px; margin-bottom: 18px; }
  .anime-view-switch > span { margin-right: auto; }
  body:not(.admin-page) .library-grid.anime-list-view .library-card { grid-template-columns: 78px minmax(0, 1fr); gap: 10px; padding: 8px; }
  body:not(.admin-page) .library-grid.anime-list-view .library-cover { height: 108px; border-radius: 9px; }
  body:not(.admin-page) .library-grid.anime-list-view .library-card-copy { padding: 2px 2px 2px 0; }
  body:not(.admin-page) .library-grid.anime-list-view .library-card-copy h3 { margin: 5px 0; font-size: 13px; }
  body:not(.admin-page) .library-grid.anime-list-view .library-card-copy small { font-size: 8px; }
  body:not(.admin-page) .library-grid.anime-list-view .library-card-copy p { font-size: 10px; -webkit-line-clamp: 2; }
  body:not(.admin-page) .library-grid.anime-list-view .tag-line span { padding: 3px 5px; font-size: 6px; }
}

/* Mobile light theme must come after the Flutter-style dark glass overrides. */
@media (max-width: 820px) {
  html[data-theme="light"] body:not(.admin-page) {
    --bg: #f4f1ec;
    --surface: rgba(255, 253, 249, .84);
    --surface-2: rgba(237, 232, 224, .88);
    --surface-3: rgba(226, 220, 211, .8);
    --text: #17151a;
    --muted: #6c6870;
    --muted-2: #8d8790;
    --line: rgba(31, 26, 33, .11);
    --line-strong: rgba(31, 26, 33, .2);
    --accent-soft: rgba(233, 88, 145, .12);
    background:
      radial-gradient(circle at -18% 5%, rgba(124, 147, 210, .19), transparent 25rem),
      radial-gradient(circle at 112% 30%, rgba(233, 88, 145, .14), transparent 28rem),
      linear-gradient(180deg, #fffdfa 0, #f4f1ec 44%, #eee9e1 100%);
    background-attachment: fixed;
  }

  html[data-theme="light"] body:not(.admin-page) .site-header {
    border-bottom-color: rgba(31, 26, 33, .1);
    background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(245, 239, 232, .72));
    box-shadow: 0 14px 38px -28px rgba(65, 52, 43, .42);
  }

  html[data-theme="light"] body:not(.admin-page) .icon-button {
    border-color: rgba(31, 26, 33, .13);
    background: rgba(255, 255, 255, .58);
  }

  html[data-theme="light"] body:not(.admin-page) .page-count,
  html[data-theme="light"] body:not(.admin-page) .library-hero aside,
  html[data-theme="light"] body:not(.admin-page) .resource-card,
  html[data-theme="light"] body:not(.admin-page) .library-card,
  html[data-theme="light"] body:not(.admin-page) .module-card,
  html[data-theme="light"] body:not(.admin-page) .account-panel,
  html[data-theme="light"] body:not(.admin-page) .help-grid article,
  html[data-theme="light"] body:not(.admin-page) .auth-card,
  html[data-theme="light"] body:not(.admin-page) .locked-panel,
  html[data-theme="light"] body:not(.admin-page) .inline-lock-panel,
  html[data-theme="light"] body:not(.admin-page) .integration-placeholder,
  html[data-theme="light"] body:not(.admin-page) .newsletter {
    border-color: rgba(31, 26, 33, .11);
    background: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(245, 240, 233, .72));
    box-shadow: 0 25px 48px -34px rgba(65, 52, 43, .38);
  }

  html[data-theme="light"] body:not(.admin-page) .album-content-tag-nav a,
  html[data-theme="light"] body:not(.admin-page) .album-category-nav a,
  html[data-theme="light"] body:not(.admin-page) .section-filters a,
  html[data-theme="light"] body:not(.admin-page) .section-filters button {
    border-color: rgba(31, 26, 33, .12);
    background: rgba(255, 255, 255, .58);
  }

  html[data-theme="light"] body:not(.admin-page) .album-content-tag-nav a:hover,
  html[data-theme="light"] body:not(.admin-page) .album-content-tag-nav a.active,
  html[data-theme="light"] body:not(.admin-page) .album-category-nav a:hover,
  html[data-theme="light"] body:not(.admin-page) .album-category-nav a.active,
  html[data-theme="light"] body:not(.admin-page) .section-filters .active {
    border-color: rgba(233, 88, 145, .48);
    background: rgba(233, 88, 145, .12);
    color: #9a315d;
  }

  html[data-theme="light"] body:not(.admin-page) .numbered-pagination {
    border-color: rgba(31, 26, 33, .11);
    background: rgba(255, 255, 255, .62);
  }

  html[data-theme="light"] body:not(.admin-page) .numbered-pagination a,
  html[data-theme="light"] body:not(.admin-page) .numbered-pagination nav > span {
    border-color: rgba(31, 26, 33, .12);
    background: rgba(255, 255, 255, .5);
  }

  html[data-theme="light"] body:not(.admin-page) .detail-hero,
  html[data-theme="light"] body:not(.admin-page) .live-album-hero,
  html[data-theme="light"] body:not(.admin-page) .reader-preview {
    border-bottom-color: rgba(31, 26, 33, .1);
  }

  html[data-theme="light"] body:not(.admin-page) .detail-cover,
  html[data-theme="light"] body:not(.admin-page) .live-cover,
  html[data-theme="light"] body:not(.admin-page) .content-detail-cover {
    border-color: rgba(31, 26, 33, .12);
    box-shadow: 0 28px 60px -36px rgba(65, 52, 43, .45);
  }

  html[data-theme="light"] body:not(.admin-page) .mobile-dock {
    border-color: rgba(60, 47, 58, .13);
    background: rgba(250, 247, 245, .88);
    box-shadow: 0 20px 42px -19px rgba(65, 52, 43, .42), inset 0 1px rgba(255,255,255,.75);
  }
  html[data-theme="light"] body:not(.admin-page) .mobile-dock a { color:#817985; }
  html[data-theme="light"] body:not(.admin-page) .mobile-dock .active { color:#54283b; }
  html[data-theme="light"] body:not(.admin-page) .mobile-dock .active::before { border-color:rgba(226,77,132,.18); background:linear-gradient(155deg, rgba(241,116,163,.19), rgba(233,92,145,.08)); }
}

/* Member center — responsive dashboard */
@media (max-width: 1100px) {
  .account-dashboard-grid { grid-template-columns:1fr; }
  .account-side-stack { grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px) {
  .account-main { padding-block:24px 92px; }
  .account-dashboard-hero { grid-template-columns:1fr; gap:22px; padding:24px; border-radius:22px; }
  .account-identity { align-items:flex-start; gap:16px; }
  .account-hero-avatar { width:76px; height:76px; flex-basis:76px; border-radius:22px; font-size:32px; }
  .account-identity-copy h1 { margin-top:9px; font-size:34px; }
  .account-identity-copy > p { max-width:60vw; }
  .account-identity-meta { display:grid; gap:6px; }
  .account-hero-actions { flex-wrap:wrap; }
  .account-stat-strip { grid-template-columns:1fr 1fr; }
  .account-stat-strip article:nth-child(2) { border-right:0; }
  .account-stat-strip article:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.075); }
  .account-stat-strip article { padding:16px 14px 16px 52px; }
  .account-stat-icon { left:13px; top:17px; width:28px; height:28px; }
  .account-stat-strip strong { font-size:22px; }
  .account-dashboard-grid { gap:14px; margin-top:14px; }
  .account-side-stack { grid-template-columns:1fr; gap:14px; }
  .account-panel { padding:23px; border-radius:19px; }
  .account-panel-heading { display:grid; gap:8px; }
  .account-panel-heading > p { max-width:none; text-align:left; }
  .account-form-grid { grid-template-columns:1fr; }
  .account-form-actions { align-items:stretch; flex-direction:column; }
  .account-form-actions .primary-button { width:100%; justify-content:space-between; }
  .purchased-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .purchased-product { min-height:130px; }
}

@media (max-width: 420px) {
  .account-profile-avatar-row { align-items:flex-start; }
  .account-dashboard-hero { padding:20px; }
  .account-stat-strip article { padding:14px 10px 14px 44px; }
  .account-stat-icon { left:9px; top:15px; width:27px; height:27px; }
  .account-stat-strip span,.account-stat-strip small { font-size:8px; }
  .account-panel { padding:20px; }
  .adult-content-toggle { align-items:flex-start; }
}

html[data-theme="light"] body:not(.admin-page) .account-dashboard-hero {
  border-color:rgba(31,26,33,.11);
  background:radial-gradient(circle at 88% 0,rgba(233,88,145,.14),transparent 34%),radial-gradient(circle at 12% 115%,rgba(124,147,210,.17),transparent 38%),linear-gradient(145deg,rgba(255,255,255,.92),rgba(241,236,229,.82));
  box-shadow:0 30px 70px -50px rgba(65,52,43,.42);
}
html[data-theme="light"] body:not(.admin-page) .account-dashboard-hero::after { border-color:rgba(31,26,33,.05); box-shadow:0 0 0 55px rgba(31,26,33,.018),0 0 0 110px rgba(31,26,33,.012); }
html[data-theme="light"] body:not(.admin-page) .account-stat-strip { border-color:rgba(31,26,33,.09); background:rgba(255,255,255,.58); }
html[data-theme="light"] body:not(.admin-page) .account-stat-strip article { border-color:rgba(31,26,33,.075); }
html[data-theme="light"] body:not(.admin-page) .account-edit-link,
html[data-theme="light"] body:not(.admin-page) .account-logout-button,
html[data-theme="light"] body:not(.admin-page) .account-avatar-edit { border-color:rgba(31,26,33,.14); background:rgba(255,255,255,.86); color:#1f1a21; }
html[data-theme="light"] body:not(.admin-page) .account-profile-form input,
html[data-theme="light"] body:not(.admin-page) .wallet-balance-card { background:rgba(255,255,255,.58); }
html[data-theme="light"] body:not(.admin-page) .purchased-product { background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(245,240,233,.72)); }

/* Homepage previews always end on a complete row: 10 cards use 5 columns on
   desktop/tablet and 2 columns on compact screens. */
.home-album-grid,
.home-module-section .library-grid,
.home-module-section .library-grid.video-grid,
.home-module-section .novel-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 820px) {
  .home-album-grid,
  .home-module-section .library-grid,
  .home-module-section .library-grid.video-grid,
  .home-module-section .novel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}