@font-face{font-family:Noto;src:url('/assets/NotoSansCJKsc-Regular.otf') format('opentype');font-weight:400;font-display:swap}@font-face{font-family:Noto;src:url('/assets/NotoSansCJKsc-Bold.otf') format('opentype');font-weight:700;font-display:swap}
:root{--bg:#0e1422;--panel:#181f34;--line:#2c3556;--muted:#a4b0dc;--purple:#a897ff;--gap:12px;--rail:128px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 0,#1c233d77,transparent 55%),var(--bg);color:#f5f4ff;font-family:Noto,'Microsoft YaHei',sans-serif;font-size:13px;height:100dvh;overflow:hidden}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select{cursor:pointer}button{display:inline-flex;align-items:center;justify-content:center;gap:10px;color:inherit;background:linear-gradient(120deg,#1e2641,#192036);border:1px solid var(--line);border-radius:16px;min-height:42px;padding:0 18px;transition:border-color .18s,background .18s,transform .18s}button:hover{border-color:#8274c2;background-color:#252b46}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #b3a4ff;outline-offset:3px}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button span[data-icon]{display:flex}input,select{color:#ededff;background:#1b2339;border:1px solid #303c60;border-radius:11px;min-width:0;height:42px;padding:0 16px}input::placeholder{color:#9ba7ce}input{width:100%}select{padding-right:24px}::selection{background:#6454b1;color:white}.topbar{height:72px;display:flex;align-items:center;padding:0 26px;gap:18px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:white;white-space:nowrap;font-size:22px}.monster{display:block;width:42px;height:46px;background:url('/assets/xiaoyaoguai-logo.png') center/contain no-repeat;flex-shrink:0}.edition{color:#8e99be;border-left:1px solid var(--line);padding-left:16px;font-size:11px;white-space:nowrap}.topnav{display:flex;margin:auto;min-width:360px;width:450px;max-width:35vw;border:1px solid #282e4c;background:linear-gradient(110deg,#212642,#171d30);border-radius:30px;padding:4px}.topnav button{background:none;border:0;min-height:38px;padding:0;flex:1;color:#bac3ed}.topnav button.active{background:#f8f5ff;color:#111625;box-shadow:0 2px 13px #a18aff66;font-weight:700;border-radius:24px}.toptools{display:flex;align-items:center;gap:18px}.global-search{display:flex;align-items:center;border:1px solid #282f4a;background:#191f32;border-radius:26px;padding:0 16px;width:235px;color:#bdc8f4}.global-search input{padding:0 0 0 10px;border:0;background:none;font-size:12px}.icon-button{background:none;border:0;padding:5px;min-height:35px;color:#c3ccef}.avatar{border:0;width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;background:linear-gradient(135deg,#b1a6ff,#6654c9)}.rail{position:absolute;top:72px;bottom:0;width:var(--rail);border-right:1px solid #252b4344;display:flex;flex-direction:column;justify-content:space-between;padding:10px 13px 28px}.rail nav{display:flex;flex-direction:column;gap:18px}.rail button{display:flex;flex-direction:column;gap:10px;height:84px;width:100%;border-color:transparent;background:none;color:#bec8f4;border-radius:18px}.rail button:hover{background:#252a46;border-color:#393c66}.rail svg{width:25px;height:25px}.rail p{color:#9caddd;font-size:12px;line-height:2;margin:0 16px}main{height:calc(100dvh - 72px);margin-left:var(--rail);padding:7px 26px 14px 30px;display:flex;flex-direction:column;gap:12px;min-height:0}.heading{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;height:84px}h1{font-size:36px;line-height:1.2;letter-spacing:.01em;margin:0 0 8px;font-weight:700}.heading p{margin:0;color:#adbaf2;font-size:18px}.head-actions{text-align:right}.head-actions>div{display:flex;gap:16px}.head-actions small{display:block;color:var(--muted);font-size:11px;margin-top:7px;max-width:530px}.primary{background:linear-gradient(100deg,#55e7ce,#caff86);color:#10251f;border:0;border-radius:28px;box-shadow:0 4px 18px #52d9ab12;font-weight:700}.primary:hover{background:linear-gradient(100deg,#76efd9,#d4ffa8)}.summary{flex-shrink:0;height:86px;display:flex;align-items:center;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:linear-gradient(110deg,#202744,#141c30)}.folder-art{width:180px;height:84px;flex-shrink:0;background:url('/assets/content-reference.png') -159px -176px/1586px 992px no-repeat}.summary>div:not(.folder-art){flex:1;padding-left:44px;position:relative}.summary>div:not(.folder-art):not(:last-child):after{content:'';position:absolute;right:0;top:15px;width:1px;height:25px;background:#546397}.summary span{display:block;color:#bcc7f6;font-size:14px}.summary strong{font-size:27px;line-height:1.4;font-variant-numeric:tabular-nums}.library{min-height:0;flex:1;display:flex;flex-direction:column;gap:12px;background:linear-gradient(115deg,#1c2339,#121a2c);border:1px solid var(--line);border-radius:17px;padding:11px}.platforms{display:flex;gap:10px;flex-shrink:0;align-items:center;overflow:auto;scrollbar-width:none}.platforms button{background:none;border:0;border-radius:10px;white-space:nowrap;padding:0 14px;min-height:40px;font-weight:700}.platforms button.selected{background:linear-gradient(125deg,#5146a8,#3d358b)}.platform-icon{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;color:#b9a6ff;width:26px;height:28px;flex-shrink:0}.platform-icon.sprite{background-image:url('/assets/content-reference.png');background-size:1586px 992px}.filters{display:flex;gap:12px;flex-shrink:0}.search{position:relative;flex:2;min-width:190px}.search>span{position:absolute;left:14px;top:11px;color:#d8dffe}.search input{padding-left:45px}.filters select{flex:1;width:120px}.filters #sort{margin-left:auto}.view-toggle{display:flex;background:#1b2238;border:1px solid var(--line);border-radius:11px;flex-shrink:0}.view-toggle button{padding:0 11px;border:0;background:none;border-radius:10px;min-height:40px}.view-toggle .selected{background:linear-gradient(130deg,#514a8b,#2b2854);color:#c1aaff}.cards{min-height:0;flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:11px}.content-card{min-height:0;overflow:hidden;border:1px solid #35405f;border-radius:14px;background:linear-gradient(120deg,#20273e,#131b2c);display:flex;flex-direction:column;position:relative;transition:border-color .18s,box-shadow .18s}.content-card:hover{border-color:#a18aff;box-shadow:0 0 0 1px #9b82ed,0 5px 16px #090c1966}.cover{position:relative;flex:1;min-height:55px;overflow:hidden;background:#30394b;cursor:pointer}.cover .blur{position:absolute;inset:-12px;background-size:cover;background-position:center;filter:blur(14px);opacity:.5}.cover img{position:relative;display:block;object-fit:contain;width:100%;height:100%;margin:auto}.cover.demo-cover{background-size:100% 100%}.cover .sample-photo{height:100%;width:100%;background-image:url('/assets/content-reference.png');background-size:1586px 992px;background-repeat:no-repeat;position:absolute;left:50%;width:338px;transform:translateX(-50%)}.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:45px;height:45px;border:1px solid #edf0ff;border-radius:50%;background:#0e142780;display:grid;place-items:center;color:white}.play svg{fill:white;stroke:white;width:23px}.duration{position:absolute;bottom:8px;right:9px;background:#0b0c16ce;border-radius:5px;padding:2px 6px;font-size:11px}.card-menu{position:absolute;top:7px;right:9px;background:#161b2b99;border:0;min-height:24px;padding:0 7px;color:white;letter-spacing:2px}.card-body{flex-shrink:0;padding:9px 14px 10px;height:124px}.card-body h3{font-size:15px;line-height:21px;height:42px;margin:0 0 3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:700}.meta{display:flex;align-items:center;gap:7px;font-size:11px;color:#b2bee8;white-space:nowrap}.meta .platform-icon{font-size:12px;width:16px;height:16px}.badge{margin-left:auto;background:#64dcc511;color:#a0efd6;border:1px solid #38645f77;border-radius:7px;font-size:10px;padding:2px 8px}.date{font-size:11px;letter-spacing:.03em;color:#a5b6e5;margin:4px 0}.metrics{display:flex;justify-content:space-between;color:#c5d0ff;font-size:11px}.metrics span{display:flex;align-items:center;gap:5px}.metrics svg{width:16px;height:16px}.pagination{display:flex;justify-content:space-between;align-items:center;min-height:38px;flex-shrink:0;font-size:12px}.pagination>div{display:flex;align-items:center;gap:24px}.pagination span{color:#99abdd}.pagination nav{display:flex;gap:7px}.pagination button{min-height:31px;min-width:32px;border-radius:7px;padding:0 9px;background:transparent}.pagination button.current{background:#5142a5;border-color:#6758c2}.empty{grid-column:1/-1;grid-row:1/-1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:#a5b4df;text-align:center}.empty svg{width:42px;height:42px;color:#a08cfa}.empty h3,.empty p{margin:0}.cards.list{grid-template-columns:1fr;grid-template-rows:repeat(4,minmax(0,1fr))}.cards.list .content-card{flex-direction:row}.cards.list .cover{flex:0 0 180px}.cards.list .card-body{flex:1;height:auto;display:grid;grid-template-columns:2fr 1fr;align-content:center;gap:5px 20px}.cards.list .card-body h3{height:auto;grid-row:span 2}.cards.list .metrics{max-width:300px}.bulk-check{position:absolute;left:10px;top:10px;z-index:2;accent-color:#a896ff;width:20px;height:20px}#bulkbar{display:flex;gap:16px;align-items:center;height:34px;flex-shrink:0;color:#c8bdff}#bulkbar[hidden]{display:none}#bulkbar button{min-height:30px;font-size:11px}dialog{color:#f2f0ff;background:linear-gradient(125deg,#222941,#101726);border:1px solid #485273;border-radius:22px;padding:32px;width:min(460px,90vw);max-height:90dvh;box-shadow:0 30px 80px #0009}dialog::backdrop{background:#030813bb;backdrop-filter:blur(7px)}dialog form{display:flex;flex-direction:column;gap:15px}dialog h2{margin:0;font-size:28px}dialog p,dialog small{color:#adbce8;margin:0;line-height:1.8}dialog small{text-align:center;font-size:11px}dialog label{display:flex;flex-direction:column;gap:8px}.dialog-close{position:absolute;right:12px;top:10px;min-height:30px;padding:0 10px;background:none;border:0;font-size:24px}#loginError{color:#ffacb6;min-height:0;font-size:12px}#details{width:min(780px,90vw)}#detailBody h2{padding-right:22px;font-size:23px}#detailBody p{margin:12px 0}#detailBody video{width:100%;max-height:55vh}#detailBody a{color:#c4b5ff}#toast{position:fixed;bottom:65px;left:50%;transform:translateX(-50%);max-width:80vw;padding:14px 24px;background:#30364e;color:white;border:1px solid #686389;border-radius:12px;z-index:10;opacity:0;pointer-events:none;transition:opacity .2s}#toast.visible{opacity:1}
@media(min-width:1800px){main{padding-left:38px;padding-right:38px}.heading{height:95px}.summary{height:95px}.library{gap:16px;padding:15px}.card-body{height:136px;padding:12px 16px}.card-body h3{font-size:16px}.meta,.metrics,.date{font-size:12px}.cards{gap:16px}.heading h1{font-size:40px}}
@media(max-height:850px) and (min-width:901px){.topbar{height:60px}.rail{top:60px}.rail nav{gap:7px}.rail button{height:72px}main{height:calc(100dvh - 60px);gap:9px}.heading{height:68px}h1{font-size:29px}.heading p{font-size:15px}.summary{height:70px}.folder-art{height:70px}.summary strong{font-size:24px}.library{gap:9px}.card-body{height:118px;padding:6px 10px}.card-body h3{font-size:13px;line-height:19px;height:38px}}
@media(max-width:1250px){:root{--rail:90px}.edition{display:none}.topnav{min-width:300px}.global-search{width:185px}.topbar{padding:0 16px;gap:10px}.brand{font-size:18px}.toptools{gap:10px}.rail{padding:8px}.rail p{margin:0 8px}.filters{gap:8px}.filters select{width:85px}.filters #period{display:none}main{padding:5px 18px 12px}.summary>div:not(.folder-art){padding-left:22px}.folder-art{width:160px}.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){body{overflow:auto;height:auto;min-height:100dvh}.topbar{height:65px;flex-wrap:wrap}.edition,.global-search,.rail,.icon-button{display:none}.topnav{min-width:0;max-width:none;flex:1}.topnav button{font-size:12px}.monster{width:38px}.brand strong{display:none}main{height:auto;min-height:calc(100dvh - 65px);margin:0;padding:15px}.heading{height:auto;gap:15px;margin-bottom:8px}.heading h1{font-size:28px}.heading p{font-size:13px}.head-actions>div{gap:7px}.head-actions button{padding:0 12px;min-height:36px;font-size:11px}.head-actions button svg{display:none}.head-actions small{max-width:260px;font-size:10px}.summary{height:80px}.folder-art{display:none}.summary>div:not(.folder-art){padding-left:15px}.summary span{font-size:12px}.summary strong{font-size:23px}.filters{flex-wrap:wrap}.filters .search{flex:1 0 100%}.filters select{flex:1;width:90px}.filters #kind,.filters #period{display:none}.cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}.content-card{height:295px}.library{flex:none}.pagination{gap:12px;flex-wrap:wrap}.pagination>div{gap:10px}.pagination #footnote{font-size:10px}.cards.list .content-card{height:165px}.cards.list .cover{flex-basis:110px}.cards.list .card-body{display:block}.cards.list .card-body h3{height:42px}.cards.list .metrics{margin-top:8px}}
@media(max-width:520px){.topnav button{font-size:10px}.toptools{gap:0}.heading{align-items:flex-start;flex-direction:column}.head-actions{width:100%}.head-actions>div{justify-content:space-between}.head-actions small{text-align:left;max-width:none}.cards{gap:9px}.content-card{height:270px}.card-body{padding:8px;height:129px}.card-body h3{font-size:12px;line-height:19px;height:38px}.meta{font-size:9px;gap:3px}.badge{padding:2px 4px;font-size:9px}.metrics{font-size:9px}.metrics svg{width:13px}.date{font-size:9px}.summary>div:not(.folder-art){padding-left:10px}.summary span{font-size:10px}.platforms button{font-size:12px}.view-toggle button{padding:0 8px}.filters select{font-size:11px;padding-left:9px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.cover .sample-photo{height:130px;top:50%;transform:translate(-50%,-50%)}.cover:has(.sample-photo) .play,.cover:has(.sample-photo) .duration{visibility:hidden}.content-card:has(.sample-photo) .card-menu{opacity:0}.content-card:has(.sample-photo) .card-menu:focus-visible{opacity:1}