* { box-sizing: border-box; }
body { margin: 0; background: #14161a; color: #e8e9eb; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
a { color: #8ab8ff; text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 10px 16px; background: #1b1e24; border-bottom: 1px solid #2b2f38; flex-wrap: wrap; }
.logo { font-size: 20px; font-weight: 700; color: #fff; }
.logo span { color: #ffb84d; font-size: 13px; font-weight: 400; }
.mainnav { display: flex; gap: 14px; }
.mainnav a { color: #cfd3da; font-size: 15px; }
.mainnav a.active { color: #ffb84d; font-weight: 700; }
.badge { background: #e5534b; color: #fff; border-radius: 9px; font-size: 11px; padding: 1px 6px; margin-left: 4px; }
.siteswitch { display: flex; gap: 0; border: 1px solid #3a3f4c; border-radius: 6px; overflow: hidden; }
.siteswitch button { background: #262a33; color: #cfd3da; border: none; padding: 7px 13px; font-size: 14px; cursor: pointer; }
.siteswitch button.active { background: #2b6cb0; color: #fff; }
.searchbox { margin-left: auto; }
.searchbox input { background: #0f1114; border: 1px solid #363b47; color: #eee; border-radius: 6px; padding: 7px 10px; width: 240px; }
.statusbar { background: #3a2f16; color: #ffd88a; padding: 6px 16px; font-size: 13px; }
.app { max-width: 1240px; margin: 0 auto; padding: 18px 14px 60px; }
h1.page-title { font-size: 21px; margin: 6px 0 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.card { background: #1e2128; border: 1px solid #2b2f38; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.card .thumb { aspect-ratio: 4 / 3; background: #0c0d10; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .thumb .ph { color: #7a8090; font-size: 13px; padding: 10px; text-align: center; }
.tagchip { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.72); color: #ffd88a; font-size: 12px; border-radius: 4px; padding: 2px 7px; }
.tagchip.video { color: #ff9d9d; }
.favbtn { position: absolute; right: 6px; top: 6px; background: rgba(0,0,0,.6); border: none; color: #ddd; font-size: 17px; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; }
.favbtn.on { color: #ffb84d; }
.card .meta { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 4px; }
.card .title { color: #f2f3f5; font-size: 14px; line-height: 1.35; word-break: break-word; }
.card .sub { color: #98a0ae; font-size: 12px; }
.pager { display: flex; gap: 10px; justify-content: center; margin: 22px 0; align-items: center; }
.btn { background: #2b6cb0; color: #fff; border: none; border-radius: 6px; padding: 8px 16px; font-size: 14px; cursor: pointer; }
.btn:hover { background: #3182ce; }
.btn.ghost { background: #262a33; color: #d6dae1; border: 1px solid #3a3f4c; }
.btn.warn { background: #975a16; }
.btn:disabled { opacity: .5; cursor: default; }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.artist-head { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.artist-head img.avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #0c0d10; }
.banner { width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; margin-bottom: 14px; background: #0c0d10; }
.tabs { display: flex; gap: 8px; margin: 12px 0; }
.tabs button { background: #262a33; color: #cfd3da; border: 1px solid #3a3f4c; padding: 7px 14px; border-radius: 6px; cursor: pointer; }
.tabs button.active { background: #2b6cb0; color: #fff; border-color: #2b6cb0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.gallery figure { margin: 0; background: #0c0d10; border-radius: 8px; overflow: hidden; }
.gallery img { width: 100%; height: 150px; object-fit: cover; display: block; cursor: zoom-in; }
.gallery figcaption { font-size: 11px; color: #98a0ae; padding: 5px 7px; word-break: break-all; }
video.player { width: 100%; max-height: 76vh; background: #000; border-radius: 10px; margin: 10px 0; }
.section { background: #1b1e24; border: 1px solid #2b2f38; border-radius: 10px; padding: 14px 16px; margin: 14px 0; }
.section h2 { font-size: 16px; margin: 0 0 8px; }
.filelist { width: 100%; border-collapse: collapse; font-size: 13px; }
.filelist td, .filelist th { padding: 6px 8px; border-bottom: 1px solid #2b2f38; text-align: left; word-break: break-all; }
.muted { color: #98a0ae; font-size: 13px; }
.error { background: #4a2326; color: #ffb4ab; border-radius: 8px; padding: 12px 14px; margin: 12px 0; white-space: pre-wrap; }
.loading { color: #98a0ae; padding: 30px 0; text-align: center; }
.dm { border-bottom: 1px solid #2b2f38; padding: 10px 2px; }
.dm .when { color: #98a0ae; font-size: 12px; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.93); z-index: 50; display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 88vh; }
.lightbox button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: none; font-size: 28px; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; }
.lb-close { right: 18px; top: 16px; }
.lb-prev { left: 14px; top: 50%; }
.lb-next { right: 14px; top: 50%; }
.lb-caption { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #cfd3da; font-size: 13px; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #262a33; border: 1px solid #3a3f4c; color: #eee; padding: 10px 18px; border-radius: 8px; z-index: 60; font-size: 14px; }
.progressline { height: 8px; background: #262a33; border-radius: 4px; overflow: hidden; margin: 6px 0; }
.progressline > div { height: 100%; background: #2b6cb0; }
@media (max-width: 640px) { .searchbox input { width: 160px; } .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }