:root{color-scheme:dark;--bg:#0d0d0f;--panel:#1c1c20;--panel-2:#242429;--text:#f8f6f7;--muted:#9b979f;--pink:#ff91ab;--pink-soft:#ffb2c6;--lime:#ccea7b;--line:#29282d;--radius:12px;--shell-width:440px;--nav-height:72px;--gutter:16px;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom,0px))}body{margin:0;background:var(--bg);color:var(--text);min-height:100vh}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--pink);outline-offset:3px}svg{width:22px;height:22px;display:block}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.desktop-glow{position:fixed;inset:0;background:radial-gradient(circle at 40% 10%,#35212c 0,transparent 44%);pointer-events:none}.app-shell{position:relative;width:min(100%,var(--shell-width));min-height:100vh;padding-top:env(safe-area-inset-top,0px);margin:auto;background:var(--bg);overflow:hidden;box-shadow:0 24px 80px #0008}main{padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom,0px) + 26px)}.view{display:none;min-height:calc(100vh - 125px);animation:appear .25s ease}.view.active{display:block}@keyframes appear{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.search-box input::-webkit-search-cancel-button{filter:grayscale(1) brightness(3)}.icon-button{position:relative;flex:none;background:none;color:#f5f3f7;border:0;padding:8px}.icon-button svg{width:23px;height:23px}.channel-scroll::-webkit-scrollbar,.filter-scroll::-webkit-scrollbar{display:none}.primary-button{border:0;background:var(--pink);color:#311d25;border-radius:9px;font-size:12px;font-weight:750;padding:10px 14px;display:inline-flex;align-items:center;gap:5px}.primary-button svg{width:14px;height:14px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin:25px 18px 15px}.section-kicker{display:block;color:#ff68a3;font-size:9px;letter-spacing:.19em;font-weight:800;margin-bottom:4px}.section-heading h2{font-size:20px;line-height:1.2;margin:0;font-weight:800}.section-meta{font-size:11px;color:#93919c;padding-bottom:2px}.poster-card{min-width:0}.poster-image-button{display:block;position:relative;width:100%;aspect-ratio:3/4.05;padding:0;border:0;border-radius:10px;overflow:hidden;background:var(--panel);text-align:left}.poster-image-button img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.poster-image-button:hover img{transform:scale(1.035)}.poster-image-button:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#07060ad9)}.poster-title-row{display:flex;align-items:start;justify-content:space-between;gap:3px;margin-top:8px}.poster-title{font-size:14px;line-height:1.3;font-weight:730;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.save-button{border:0;background:none;color:#9c9aa5;padding:0 1px;flex:none}.save-button svg{width:17px;height:17px}.save-button.saved{color:var(--pink)}.save-button.saved svg{fill:#ff91ab55}.empty-state{grid-column:1/-1;text-align:center;background:#18181f;border:1px solid #292933;border-radius:16px;padding:38px 16px;color:#a5a2ae;font-size:13px}.empty-state strong{display:block;color:#fff;font-size:16px;margin-bottom:6px}.page-header{display:flex;justify-content:space-between;align-items:center;padding:26px 20px 17px}.page-header h1{font-size:28px;margin:3px 0 4px}.page-header p{font-size:12px;margin:0;color:#a7a4ae}.header-accent{font-size:37px;color:var(--pink);text-shadow:0 0 20px #ff3f8c77}.genre-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 18px 23px}.genre-tile{border:1px solid #343039;border-radius:12px;background:linear-gradient(145deg,#27212c,#171820);padding:17px 9px 14px;color:#f5f3f6;text-align:left;min-height:86px}.genre-tile span{display:block;color:#ff79ac;font-size:18px;margin-bottom:8px}.genre-tile strong{font-size:12px}.genre-tile.active{border-color:#ff3f8c;background:#391d31}.collection-stack{margin:7px 18px 24px;display:grid;gap:14px}.collection-card{position:relative;overflow:hidden;border:1px solid #39323d;border-radius:16px;height:190px;display:flex;align-items:end;padding:17px;background:#25202a;color:white;text-align:left}.collection-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 34%;filter:brightness(.62)}.collection-card:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#09070ddf,transparent 88%),linear-gradient(0deg,#09070dc9,transparent 62%)}.collection-copy{position:relative;z-index:1}.collection-copy span{font-size:10px;color:#ff99bd;font-weight:800;letter-spacing:.13em}.collection-copy h2{font-size:21px;margin:6px 0}.collection-copy p{font-size:11px;color:#e4dce2;margin:0}.community-intro{margin:4px 18px 16px;padding:17px;display:flex;gap:13px;align-items:center;border-radius:15px;background:linear-gradient(110deg,#422039,#201c2b);border:1px solid #5b2a48}.community-orbit{font-size:32px;color:#ff91ab}.community-intro strong{font-size:15px}.community-intro p{font-size:11px;color:#c6b4c2;line-height:1.5;margin:4px 0 0}.discussion-list{display:grid;gap:10px;margin:0 18px}.discussion{background:#1b1b22;border:1px solid #292933;border-radius:15px;padding:15px;display:flex;align-items:start;gap:10px}.discussion-avatar{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;font-weight:800;flex:none}.discussion-avatar.coral{background:#a94b61}.discussion-avatar.lilac{background:#7765ae}.discussion-avatar.teal{background:#3d8d91}.discussion>div:last-child{min-width:0}.discussion-top{display:flex;gap:9px;align-items:center}.discussion-top strong{font-size:12px}.discussion-top span{font-size:10px;color:#777581}.discussion h3{font-size:14px;line-height:1.45;margin:9px 0 5px}.discussion p{font-size:11px;line-height:1.6;color:#aaa7b1;margin:0 0 12px}.discussion-count{font-size:10px;color:#ff91ab}.profile-person h1{font-size:22px;margin:0 0 5px}.profile-person p{font-size:11px;color:#c9bac5;margin:0}.profile-stats strong{font-size:19px}.profile-stats span{font-size:11px;color:#a7a4ae}.profile-shortcuts{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin:12px var(--gutter);padding:14px 7px;background:var(--panel);border:1px solid var(--line);border-radius:16px}.profile-shortcuts button{display:grid;justify-items:center;gap:8px;color:#efedf0;background:none;border:0;padding:0;font-size:10px}.profile-shortcuts button span{width:42px;height:42px;background:#2b2a33;border-radius:50%;display:grid;place-items:center}.profile-shortcuts svg{width:19px;height:19px}.profile-shortcuts strong{font-weight:600}.profile-heading{margin-top:28px}.text-button{display:flex;align-items:center;border:0;background:none;color:#aaa6b0;font-size:11px}.text-button svg{width:14px;height:14px}.profile-list{margin:0 18px;display:grid;gap:9px}.profile-row{width:100%;display:flex;gap:12px;align-items:center;text-align:left;padding:8px;background:#1b1b22;border:1px solid #292933;border-radius:12px;color:#fff}.profile-row img{height:68px;width:54px;object-fit:cover;border-radius:7px}.profile-row strong{display:block;font-size:13px;margin-bottom:5px}.profile-row span{font-size:10px;color:#8e8b96}.profile-list .empty-state{padding:28px 12px}.profile-footer{text-align:center;color:#595762;font-size:10px;line-height:1.8;margin:36px 0}.bottom-nav{position:fixed;bottom:0;left:0;right:0;width:min(100%,var(--shell-width));margin-inline:auto;height:calc(var(--nav-height) + env(safe-area-inset-bottom,0px));padding:7px 6px calc(8px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(5,1fr);background:#070708f5;backdrop-filter:blur(14px);border-top:1px solid #28272b;z-index:10}.nav-item{display:grid;justify-items:center;align-content:center;gap:3px;color:#7d7b86;border:0;background:none;padding:0}.nav-item span{width:34px;height:34px;display:grid;place-items:center;border-radius:11px}.nav-item svg{width:21px;height:21px}.nav-item small{font-size:10px}.nav-item.active{color:var(--pink)}.nav-item.active span{color:#2b1821;background:var(--pink)}.detail-body{padding:0 20px 30px;position:relative;margin-top:-18px}.detail-kicker{font-size:10px;color:#ff91ab;font-weight:800;letter-spacing:.12em}.detail-body h1{font-size:25px;margin:5px 0}.detail-meta{font-size:11px;color:#aaa7b0}.detail-body>p:not(.demo-note){font-size:12px;line-height:1.7;color:#c9c5ce;margin:16px 0}.detail-tags{display:flex;gap:6px;flex-wrap:wrap}.detail-tags span{font-size:10px;color:#d8c8d1;border:1px solid #49333f;background:#30202b;border-radius:5px;padding:5px 7px}.detail-actions{display:flex;gap:8px;margin:20px 0 24px}.detail-actions .primary-button{flex:1;justify-content:center}.outline-button{display:flex;align-items:center;gap:5px;background:#27252e;color:#f6f3f7;border:1px solid #46414c;border-radius:10px;padding:10px 13px;font-size:12px}.outline-button svg{width:16px;height:16px}.outline-button.saved{color:#ff91ab;border-color:#bb6b84}.episode-heading{display:flex;align-items:center;justify-content:space-between}.episode-heading strong{font-size:15px}.episode-heading span{font-size:10px;color:#9995a1}.episode-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0}.episode-grid button{border:1px solid #34323b;background:#24232b;color:#d4d1d7;border-radius:8px;padding:12px 2px;font-size:12px}.episode-grid button:first-child{border-color:#ff91ab;color:#ff91ab;background:#3a2732}.demo-note{color:#6e6b76;font-size:10px;margin-top:16px}.toast{position:fixed;left:50%;bottom:calc(var(--nav-height) + env(safe-area-inset-bottom,0px) + 28px);transform:translate(-50%,15px);background:#f0eaf0;color:#19151b;padding:10px 15px;border-radius:9px;z-index:50;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap;box-shadow:0 8px 25px #0006}.toast.show{opacity:1;transform:translate(-50%,0)}@media(min-width:600px){body{padding:26px 0}.app-shell{min-height:calc(100vh - 52px);border:1px solid #3c2a39;border-radius:28px}.bottom-nav{border-radius:0 0 28px 28px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

.home-header {
  display: flex; height: 66px; align-items: center; gap: 8px; padding: 0 var(--gutter);
}
.brand {
  display: flex; flex: none; align-items: center; gap: 6px;
  color: var(--lime); font-size: 16px; font-weight: 800; letter-spacing: -.055em; white-space: nowrap;
}
.brand small { color: var(--pink); font-size: inherit; }
.brand-mark {
  display: grid; width: 32px; height: 32px; place-items: center;
  border-radius: 10px; background: #39232c;
}
.brand-mark svg { width: 27px; height: 27px; }
.search-box {
  display: flex; flex: 1; min-width: 0; height: 36px; align-items: center; gap: 7px;
  padding: 0 10px; border: 1px solid #3d3c40; border-radius: 20px; background: #19191b;
}
.search-box svg { flex: none; width: 16px; height: 16px; color: #d6d3d8; }
.search-box input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font-size: 13px; }
.search-box input:focus-visible { outline: none; }
.search-box:focus-within { border-color: var(--pink); }
.search-box input::placeholder { color: #99959d; }
.notification-btn {
  display: grid; width: 34px; min-height: 44px; place-content: center; justify-items: center;
  gap: 2px; padding: 0; color: var(--pink-soft); font-size: 10px;
}
.notification-btn svg { width: 19px; height: 19px; }
.quick-menu { position: relative; z-index: 12; }
.quick-menu summary { display: grid; width: 33px; min-height: 44px; padding: 0; place-items: center; list-style: none; cursor: pointer; }
.quick-menu summary::-webkit-details-marker { display: none; }
.quick-menu summary:focus-visible { outline: 2px solid var(--pink); outline-offset: -2px; border-radius: 8px; }
.quick-menu-panel {
  position: absolute; top: calc(100% + 4px); right: 0; display: grid; min-width: 118px;
  padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 8px 24px #0008;
}
.quick-menu-panel button { padding: 10px 12px; border: 0; border-radius: 7px; background: none; color: var(--text); text-align: left; }
.quick-menu-panel button:hover { background: var(--panel-2); }
.channel-scroll, .filter-scroll { display: flex; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.channel-scroll { gap: 16px; justify-content: space-between; padding: 0 var(--gutter); }
.channel {
  position: relative; flex: none; min-width: 37px; min-height: 46px; padding: 5px 0 12px;
  border: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 650;
}
.channel.active { color: var(--pink); }
.channel.active::after {
  content: ""; position: absolute; bottom: 5px; left: 50%; width: 15px; height: 3px;
  transform: translateX(-50%); border-radius: 3px; background: var(--pink);
}
.filter-scroll { gap: 8px; padding: 10px var(--gutter) 16px; }
.filter-chip {
  flex: none; min-height: 34px; padding: 5px 11px; border: 1px solid #29282b; border-radius: 5px;
  background: #1a1a1d; color: #b5b0b7; font-size: 13px; font-weight: 650;
}
.filter-chip span { margin-right: 4px; color: #a7a2aa; }
.filter-chip.active { border-color: var(--pink); background: #321e29; color: var(--pink); }
.filter-chip.active span { color: var(--lime); }
.hero-card {
  position: relative; aspect-ratio: 16 / 9; margin: 0 var(--gutter) 12px;
  overflow: hidden; border-radius: 11px; background: var(--panel);
}
.hero-link { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: var(--text); text-align: left; }
.hero-link:focus-visible { outline-offset: -3px; }
.hero-link img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg,#0003,transparent 45%,#060508e6 100%); }
.episode-label {
  position: absolute; top: 10px; left: 10px; display: flex; overflow: hidden; border-radius: 5px;
  background: #0d0a10cf; color: #fff; font-size: 12px; font-weight: 700;
}
.episode-label span { padding: 4px 6px; }
#hero-count { background: var(--pink); color: #321c26; }
.hero-title {
  position: absolute; left: 12px; right: 80px; bottom: 12px; overflow: hidden;
  color: #fff; font-size: 18px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap;
}
.hero-dots { position: absolute; right: 7px; bottom: 7px; display: flex; }
.hero-dots button { display: grid; width: 20px; height: 28px; padding: 0; place-items: center; border: 0; background: none; }
.hero-dots button::after { content: ""; width: 5px; height: 5px; border-radius: 5px; background: #fff9; }
.hero-dots button.active::after { width: 13px; background: var(--pink); }
.section-heading[hidden] { display: none; }
#home-results-heading { margin: 2px var(--gutter) 12px; }
#home-results-heading h2 { font-size: 17px; }
.poster-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 7px; margin: 0 var(--gutter) 24px; }
.poster-bottom {
  position: absolute; z-index: 1; left: 9px; bottom: 9px; display: flex; align-items: center;
  gap: 4px; color: var(--text); font-size: 11px;
}
.poster-bottom svg { width: 12px; height: 12px; }
.poster-subtitle { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; color: #b5b0b7; font-size: 10px; }
.poster-subtitle span { padding: 3px 6px; border-radius: 4px; background: var(--panel); }
.profile-hero {
  min-height: 174px; padding: 10px var(--gutter) 24px;
  background: linear-gradient(0deg,var(--bg) 1%,#21101bb8 67%,#120e16b0), url("./assets/hero-city.webp") center 42% / cover;
}
.profile-topline { display: flex; justify-content: space-between; align-items: center; }
.profile-person { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.avatar {
  display: grid; width: 61px; height: 61px; flex: none; place-items: center;
  border: 1px solid #ff91ab60; border-radius: 50%; background: #39232c;
}
.avatar svg { width: 44px; height: 44px; }
.profile-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0 var(--gutter); }
.profile-shortcuts { grid-template-columns: repeat(3,minmax(0,1fr)); }
.profile-stats div { display: grid; place-items: center; gap: 5px; padding: 15px 4px; border-radius: 12px; background: var(--panel); }
.profile-stats strong { color: var(--lime); }
@media (max-width: 360px) {
  :root { --gutter: 12px; }
  .home-header { gap: 5px; }
  .brand { font-size: 14px; }
  .brand-mark { width: 29px; height: 29px; }
  .brand-mark svg { width: 25px; height: 25px; }
  .search-box { gap: 5px; padding-inline: 8px; }
  .channel-scroll { gap: 13px; }
}

.content-tabs { justify-content: flex-start; gap: 25px; }
.search-action { flex: none; display: grid; width: 20px; min-height: 28px; place-items: center; padding: 0; border: 0; background: none; color: var(--muted); }
.search-action[hidden], .content-tabs[hidden], #home-filters[hidden] { display: none; }
.search-box input::-webkit-search-cancel-button { display: none; }
@media (max-width: 600px) { .search-box input { font-size: 16px; } }
.topic-tabs { justify-content: flex-start; gap: 7px; padding-top: 3px; padding-bottom: 3px; }
.topic-tabs[hidden] { display: none; }
.topic-tabs .channel {
  min-height: 30px; padding: 4px 10px; border-radius: 15px; background: var(--panel); font-size: 12px;
}
.topic-tabs .channel.active { background: #321e29; color: var(--pink); }
.topic-tabs .channel::after { display: none; }
.profile-identity { min-width: 0; flex: 1; }
.profile-identity h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#account-open { flex: none; padding-inline: 9px; }
.video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #09090b; }
.player-stage { position: relative; width: 100%; height: 100%; }
.video-wrap video { display: block; width: 100%; height: 100%; object-fit: contain; }
.player-back {
  display: none; position: absolute; top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left));
  width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: #0009; color: #fff;
}
.player-back svg { transform: rotate(180deg); }
.is-expanded .player-back { display: grid; }
.player-controls {
  position: absolute; inset: auto 0 0; display: flex; align-items: center; gap: 4px;
  padding-inline: 4px; background: linear-gradient(transparent, #000c); color: #fff;
}
.player-controls button {
  flex: none; display: grid; width: 44px; height: 44px; place-items: center;
  padding: 0; border: 0; background: transparent; color: inherit;
}
.player-controls button:focus-visible { outline-offset: -4px; }
.player-controls button:disabled { opacity: .45; }
.player-controls svg { width: 19px; height: 19px; }
.player-controls input { flex: 1; min-width: 0; margin: 0 4px; accent-color: var(--pink); touch-action: none; }
#video-time { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
html.player-expanded { overflow: hidden; }
.video-wrap.is-expanded {
  position: fixed; z-index: 60; inset: 0; width: 100%; height: 100%; height: 100dvh;
  aspect-ratio: auto; overflow: hidden; background: #000;
}
.is-expanded .player-controls {
  padding: 0 max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
}
@media (orientation: portrait) {
  .is-expanded.is-landscape .player-stage {
    position: absolute; top: 50%; left: 50%; width: 100vh; height: 100vw;
    width: 100dvh; height: 100dvw; transform: translate(-50%, -50%) rotate(90deg);
  }
  .is-expanded.is-landscape .player-controls {
    padding: 0 max(8px, env(safe-area-inset-bottom)) env(safe-area-inset-left) max(8px, env(safe-area-inset-top));
  }
  .is-expanded.is-landscape .player-back {
    top: max(8px, env(safe-area-inset-right)); left: max(8px, env(safe-area-inset-top));
  }
}
.detail-page {
  position: relative; width: min(100%, var(--shell-width)); min-height: 100vh; margin: auto;
  padding: env(safe-area-inset-top, 0px) 0 max(16px, env(safe-area-inset-bottom, 0px)); background: var(--bg);
}
.detail-header {
  display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 700;
}
.detail-back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0; border: 0; background: none; color: var(--pink); }
.detail-back svg { width: 16px; height: 16px; transform: rotate(180deg); }
.detail-with-player { margin-top: 0; }
.detail-with-player #player-status { margin: 0 0 12px; padding-top: 10px; color: var(--muted); }
.episode-grid button:first-child { border-color: #34323b; background: #24232b; color: #d4d1d7; }
.episode-grid button[aria-pressed="true"] { border-color: var(--pink); background: #3a2732; color: var(--pink); }
.account-dialog {
  width: min(100% - 30px, 400px); max-height: 88dvh; padding: 18px; overflow: auto;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text);
}
.account-dialog::backdrop { background: #000a; }
.account-heading, .account-mode { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.account-heading h2 { margin: 0; font-size: 19px; overflow-wrap: anywhere; }
.account-mode { margin: 10px 0; justify-content: flex-start; }
.account-mode button { padding: 7px 8px; border: 0; border-radius: 6px; background: var(--panel-2); color: var(--pink); font-size: 12px; }
.account-dialog form, #account-extra { display: grid; gap: 10px; }
.account-dialog [hidden] { display: none; }
.account-dialog label { display: grid; gap: 4px; color: var(--text); font-size: 12px; }
.account-dialog input { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid #46414c; border-radius: 7px; background: #111114; color: var(--text); font-size: 16px; }
#account-logout { margin-top: 10px; }
#account-message { margin: 10px 0 0; color: var(--pink-soft); font-size: 12px; }