:root { --bg:#121212; --surface:#1e1e1e; --surface-2:#282828; --line:#343434; --ink:#f5f5f5; --muted:#969696; --blue:#2196f3; --blue-2:#64b5f6; --radius:12px; font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; } body { margin:0; background:#0d0d0d; min-width:320px; } button,input { font:inherit; } button { cursor:pointer; }
.app-shell { width:min(100%, 980px); min-height:100vh; margin:0 auto; position:relative; padding-bottom:86px; background:var(--bg); overflow:hidden; }
.topbar { height:64px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; background:rgba(18,18,18,.92); position:sticky; top:0; z-index:4; border-bottom:1px solid rgba(255,255,255,.04); }
.brand { display:flex; align-items:center; gap:9px; font-weight:750; letter-spacing:0; font-size:18px; }.brand-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:7px; background:var(--blue); color:white; font-family:Georgia,serif; font-weight:800; }
.icon-button,.close-button { width:38px; height:38px; border:0; border-radius:50%; background:transparent; color:var(--ink); font-size:29px; line-height:1; }.icon-button:hover,.close-button:hover { background:var(--surface-2); }
.notice { display:flex; gap:8px; align-items:center; min-height:35px; padding:7px 18px; color:#f1a239; font-size:12px; background:#202020; }.notice span { display:grid; place-items:center; width:15px; height:15px; border:1px solid currentColor; border-radius:50%; font-size:10px; font-family:serif; }
.view { display:none; min-height:calc(100vh - 185px); }.view.active { display:block; }.view-title { padding:22px 18px 12px; }.view-title h2,.profile-heading h2 { margin:0; font-size:22px; letter-spacing:0; }.view-title p,.profile-heading p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.hero { position:relative; height:300px; overflow:hidden; cursor:pointer; }.hero img { width:100%; height:100%; object-fit:cover; object-position:center 42%; }.hero-shade,.detail-art>div { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.68),rgba(0,0,0,.08) 64%),linear-gradient(0deg,var(--bg),transparent 54%); }.hero-copy { position:absolute; left:20px; bottom:24px; z-index:1; }.eyeline { font-size:12px; color:var(--blue-2); font-weight:700; }.hero h1 { margin:5px 0; font-size:30px; letter-spacing:0; }.hero p { margin:0 0 14px; color:#d0d0d0; font-size:13px; }.watch-button { background:var(--blue); color:white; border:0; border-radius:7px; padding:10px 14px; font-size:14px; font-weight:700; }.watch-button:hover { background:#42a5f5; }
.shelf { padding:22px 0 0; }.shelf-heading { display:flex; align-items:center; justify-content:space-between; padding:0 18px 11px; }.shelf-heading h2 { margin:0; font-size:17px; }.shelf-heading button { border:0; background:transparent; color:var(--muted); font-size:12px; }.poster-rail { display:flex; overflow-x:auto; gap:12px; padding:0 18px 4px; scrollbar-width:none; }.poster-rail::-webkit-scrollbar { display:none; }
.poster-card { flex:0 0 126px; width:126px; border:0; border-radius:var(--radius); overflow:hidden; padding:0; text-align:left; color:white; background:var(--surface-2); box-shadow:0 3px 10px rgba(0,0,0,.22); transition:transform .18s ease,box-shadow .18s ease; }.poster-card:hover { transform:translateY(-3px); box-shadow:0 8px 19px rgba(0,0,0,.38); }.poster-image { position:relative; height:174px; }.poster-image img { width:100%; height:100%; display:block; object-fit:cover; }.tag { position:absolute; top:7px; right:7px; padding:3px 5px; border-radius:4px; background:rgba(0,0,0,.72); color:white; font-size:10px; }.poster-info { padding:8px 8px 9px; }.poster-title { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; font-weight:650; }.poster-type { display:block; margin-top:4px; font-size:11px; color:var(--muted); }
.filter-row,.sub-filter-row { display:flex; gap:9px; overflow-x:auto; padding:7px 18px 9px; scrollbar-width:none; }.sub-filter-row { padding-top:0; }.filter-row button,.sub-filter-row button { border:0; color:var(--muted); white-space:nowrap; background:var(--surface-2); border-radius:18px; padding:8px 13px; font-size:13px; }.filter-row button.active { color:white; background:var(--blue); font-weight:700; }.sub-filter-row button { background:transparent; padding:6px 4px; }.sub-filter-row button.active { color:var(--blue-2); border-bottom:2px solid var(--blue); border-radius:0; }
.poster-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px 12px; padding:13px 18px 22px; }.poster-grid .poster-card { width:100%; flex-basis:auto; }.poster-grid .poster-image { height:clamp(145px, 38vw, 220px); }
.search-box { height:50px; margin:8px 18px 10px; padding:0 13px; display:flex; align-items:center; gap:9px; color:var(--muted); border:1px solid var(--line); border-radius:10px; background:var(--surface); }.search-box span { font-size:23px; }.search-box input { flex:1; min-width:0; color:white; outline:0; border:0; background:transparent; font-size:14px; }.search-box button { color:var(--muted); border:0; padding:3px 5px; background:transparent; font-size:24px; }.empty-state { min-height:330px; display:grid; place-content:center; justify-items:center; color:var(--muted); text-align:center; }.empty-state strong { font-size:36px; font-weight:400; color:#626262; }.empty-state p { margin:13px 0; font-size:14px; }
.search-box.loading { border-color:var(--blue); }.search-box.loading > span { color:var(--blue-2); animation:search-pulse 1s ease-in-out infinite; }.empty-state.error strong { color:#dc7777; }.empty-state.error p { color:#d8a0a0; } @keyframes search-pulse { 50% { opacity:.38; } }
.search-history { padding:0 18px 8px; }.search-history:empty { display:none; }.search-history-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }.search-history-head span { color:var(--muted); font-size:12px; }.search-history-head button { border:0; background:transparent; color:var(--muted); font-size:12px; padding:2px 4px; }.search-history-head button:hover { color:#fff; }.search-history-chips { display:flex; flex-wrap:wrap; gap:8px; }.search-history-chips button { border:0; color:#d6d6d6; background:var(--surface-2); border-radius:16px; padding:7px 13px; font-size:13px; }.search-history-chips button:hover { background:var(--surface); color:#fff; }
.profile-heading { padding:22px 18px 17px; display:flex; justify-content:space-between; gap:14px; align-items:center; }.source-button { color:#d9d9d9; background:var(--surface-2); border:0; border-radius:17px; padding:8px 10px; font-size:12px; white-space:nowrap; }.source-button span { padding-left:4px; color:var(--muted); }.history-list { padding:0 18px; display:grid; gap:11px; }.history-item { display:grid; grid-template-columns:78px 1fr auto; gap:12px; align-items:center; padding:10px; text-align:left; color:white; border:0; border-radius:10px; background:var(--surface); }.history-item img { width:78px; height:106px; object-fit:cover; border-radius:7px; }.history-item h3 { margin:0 0 7px; font-size:15px; }.history-item p { margin:4px 0; color:var(--muted); font-size:12px; }.progress { margin-top:11px; height:3px; overflow:hidden; border-radius:4px; background:#5a5a5a; }.progress b { display:block; width:42%; height:100%; background:var(--blue); }.continue-button { padding:7px 9px; border:0; border-radius:6px; color:white; background:var(--blue); font-size:12px; }.history-empty { min-height:380px; }
.bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,980px); height:72px; display:grid; grid-template-columns:repeat(4,1fr); background:rgba(30,30,30,.98); border-top:1px solid #282828; z-index:5; }.nav-item { display:grid; place-content:center; gap:3px; border:0; color:var(--muted); background:transparent; }.nav-item span { font-family:Arial,sans-serif; font-size:24px; line-height:19px; }.nav-item b { font-size:11px; font-weight:500; }.nav-item.active { color:white; }.nav-item.active span { color:var(--blue); }
.modal { position:fixed; inset:0; display:none; align-items:flex-end; justify-content:center; padding:0; background:rgba(0,0,0,.68); z-index:10; }.modal.open { display:flex; }.detail-sheet { width:min(100%,650px); max-height:92vh; overflow:auto; position:relative; border-radius:17px 17px 0 0; background:var(--bg); animation:up .22s ease-out; }.detail-art { height:260px; position:relative; }.detail-art img { width:100%; height:100%; object-fit:cover; }.round-play { position:absolute; inset:0; margin:auto; width:64px; height:64px; border:0; border-radius:50%; padding-left:5px; color:white; background:var(--blue); font-size:26px; }.close-button { position:absolute; z-index:2; top:11px; right:12px; color:white; background:rgba(0,0,0,.35); }.detail-copy { padding:0 18px 35px; }.detail-copy h2 { margin:1px 0 11px; font-size:24px; }.detail-copy h3 { margin:24px 0 12px; font-size:16px; }.detail-copy h3 small { color:var(--muted); font-weight:400; }.detail-copy>p { color:#a6a6a6; font-size:14px; line-height:1.7; }.meta { display:flex; gap:7px; flex-wrap:wrap; }.meta span { color:#b2b2b2; padding:4px 7px; background:#282828; border-radius:4px; font-size:11px; }.episode-row { display:flex; flex-wrap:wrap; gap:8px; }.episode-row button { min-width:48px; padding:9px 11px; border:0; border-radius:7px; color:#c5c5c5; background:#292929; font-size:13px; }.episode-row button.active { color:white; background:var(--blue); }.toast { pointer-events:none; position:fixed; left:50%; bottom:93px; z-index:12; opacity:0; transform:translate(-50%,10px); padding:10px 14px; border-radius:7px; color:white; background:#333; font-size:13px; transition:.2s ease; }.toast.show { opacity:1; transform:translate(-50%,0); } @keyframes up { from { transform:translateY(100%); } to { transform:translateY(0); } }
.player-screen { position:fixed; inset:0; z-index:30; display:none; flex-direction:column; background:#000; }.player-screen.open { display:flex; }.player-bar { height:58px; padding:0 13px; display:grid; grid-template-columns:42px 1fr 42px; align-items:center; gap:8px; color:white; background:#101010; }.player-bar button { width:38px; height:38px; border:0; border-radius:50%; color:white; background:transparent; font-size:29px; line-height:1; }.player-bar button:hover { background:#242424; }.player-bar div { min-width:0; display:grid; gap:2px; }.player-bar strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }.player-bar span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#9d9d9d; font-size:11px; }.player-fullscreen { font-size:22px !important; }.player-stage { position:relative; flex:1; display:grid; place-items:center; min-height:0; background:#000; }.player-stage video { width:100%; max-height:100%; background:#000; }.playback-status { position:absolute; left:50%; top:50%; max-width:80%; transform:translate(-50%,-50%); padding:9px 12px; border-radius:7px; color:#ddd; background:rgba(25,25,25,.82); font-size:13px; text-align:center; }.playback-status.hidden { display:none; }
@media (min-width:720px) { .topbar { padding:0 34px; } .notice { padding-left:34px; } .hero { height:360px; } .hero-copy { left:34px; bottom:38px; } .hero h1 { font-size:38px; }.shelf-heading { padding-left:34px; padding-right:34px; }.poster-rail { padding-left:34px; padding-right:34px; gap:15px; }.poster-card { flex-basis:142px; width:142px; }.poster-image { height:196px; }.view-title { padding-left:34px; }.filter-row,.sub-filter-row { padding-left:34px; }.poster-grid { grid-template-columns:repeat(5,1fr); padding-left:34px; padding-right:34px; }.poster-grid .poster-image { height:205px; }.search-box { margin-left:34px; margin-right:34px; }.profile-heading { padding-left:34px; padding-right:34px; }.history-list { max-width:640px; padding-left:34px; }.detail-sheet { border-radius:17px; margin-bottom:25px; }.modal { align-items:center; padding:25px; }.history-empty { min-height:420px; } }
@media (max-width:370px) { .poster-grid { gap:11px 9px; padding-left:13px; padding-right:13px; }.poster-grid .poster-image { height:137px; }.poster-info { padding:7px; }.hero { height:270px; } }
.profile-actions { display:flex; align-items:center; gap:9px; }.clear-history { border:0; color:var(--muted); background:transparent; font-size:12px; }.history-item { position:relative; }.history-delete { position:absolute; right:7px; top:6px; width:24px; height:24px; border:0; border-radius:50%; color:#9c9c9c; background:transparent; font-size:17px; }.history-delete:hover { color:#fff; background:#363636; }.page-action { display:grid; place-items:center; padding:3px 0 26px; }.page-action button { min-width:110px; border:1px solid var(--line); border-radius:7px; padding:9px 14px; color:#dedede; background:var(--surface); font-size:13px; }.page-action button:hover { border-color:var(--blue); color:white; }
.player-bar { grid-template-columns:42px 1fr auto; }.player-actions { display:flex !important; gap:3px; }.player-actions button { font-size:21px; }.player-episode-panel { position:absolute; top:0; right:0; width:min(330px,88vw); height:100%; display:none; grid-auto-rows:min-content; align-content:start; gap:8px; padding:16px; overflow:auto; background:rgba(23,23,23,.97); box-shadow:-8px 0 24px rgba(0,0,0,.35); }.player-episode-panel.open { display:grid; }.player-episode-panel button { border:0; border-radius:6px; padding:10px; text-align:left; color:#d6d6d6; background:#303030; font-size:13px; }.player-episode-panel button.active { color:white; background:var(--blue); }
.source-modal { align-items:center; padding:20px; }.source-sheet { width:min(100%,420px); position:relative; overflow:hidden; border-radius:12px; background:var(--surface); }.source-sheet header { padding:18px; border-bottom:1px solid var(--line); }.source-sheet h2 { margin:0; font-size:18px; }.source-sheet .close-button { position:absolute; right:10px; top:10px; color:#aaa; }.source-list { padding:8px 18px 18px; }.source-list button { width:100%; display:flex; align-items:center; justify-content:space-between; border:0; padding:14px 0; color:white; background:transparent; text-align:left; font-size:14px; }.source-list button small { color:var(--muted); font-size:12px; }.source-list button.active { color:var(--blue-2); font-weight:700; }
.history-item > [data-history-index] { width:100%; display:grid; grid-template-columns:78px 1fr auto; gap:12px; align-items:center; border:0; padding:0; color:white; text-align:left; background:transparent; }.history-item > [data-history-index] > img { width:78px; height:106px; object-fit:cover; border-radius:7px; }
.history-item { display:block; padding:10px; }.history-item > [data-history-index] > span:nth-child(2) { min-width:0; }.history-item > [data-history-index] h3 { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }