:root{
  --bg:#0f1117; --surface:#171a23; --surface2:#1e222e; --border:#2a2f3a;
  --text:#e6e6e6; --muted:#9aa3b2; --accent:#5dc7a5; --accent2:#85b7eb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif}
header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;
  padding:14px 22px;background:rgba(15,17,23,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border)}
.brand{font-size:18px;font-weight:700;letter-spacing:.5px}
.brand span{color:var(--accent);font-weight:500}
#search{flex:1;max-width:420px;margin-left:auto;padding:9px 14px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:14px;outline:none}
#search:focus{border-color:var(--accent)}
.hint{font-size:11px;color:var(--muted)}
nav#tabs{position:sticky;top:57px;z-index:19;display:flex;gap:8px;flex-wrap:wrap;
  padding:10px 22px;background:var(--bg);border-bottom:1px solid var(--border)}
.tab{padding:6px 14px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);color:var(--muted);font-size:13px;cursor:pointer;transition:.15s}
.tab:hover{color:var(--text)}
.tab.active{background:var(--accent);color:#06231c;border-color:var(--accent);font-weight:600}
main{max-width:1280px;margin:0 auto;padding:22px}
.meta{color:var(--muted);font-size:13px;margin-bottom:16px}
.feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;
  cursor:pointer;transition:.15s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.card .thumb{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surface2);display:block}
.card .thumb.err{display:none}
.card .body{padding:10px 12px}
.card .title{font-size:13px;line-height:1.4;max-height:2.8em;overflow:hidden}
.card .date{font-size:11px;color:var(--muted);margin-top:6px}
.card .badges{margin-top:6px;display:flex;gap:6px}
.badge{font-size:10px;padding:2px 7px;border-radius:999px;background:var(--surface2);color:var(--accent2)}
.badge.v{color:var(--accent)}
.more{display:block;margin:26px auto;padding:10px 28px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:14px;cursor:pointer}
.more:hover{border-color:var(--accent)}
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.modal.hidden{display:none}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px)}
.modal-card{position:relative;width:min(920px,100%);background:var(--surface);
  border:1px solid var(--border);border-radius:16px;padding:22px;margin-top:20px}
.close{position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:20px;cursor:pointer;line-height:1}
.modal h2{margin:0 0 4px;font-size:18px}
.modal .mdate{color:var(--muted);font-size:12px;margin-bottom:14px}
.vid{margin:14px 0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#000}
.vid iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:10px}
.gallery img{width:100%;border-radius:8px;border:1px solid var(--border);cursor:zoom-in}
.orig{display:inline-block;margin-top:14px;padding:9px 18px;border-radius:999px;
  background:var(--accent);color:#06231c;font-size:13px;text-decoration:none;font-weight:600}
.ptext{white-space:normal;word-break:break-word;line-height:1.75;font-size:14px;
  margin:14px 0;padding:14px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:10px}
.ptext img{max-width:100%;height:auto;border-radius:8px;margin:8px 0}
.ptext a{color:var(--accent2)}
.ptext iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:8px;margin:8px 0}
.text-loading{color:var(--muted);font-size:13px;margin:14px 0}
.empty{color:var(--muted);text-align:center;padding:60px 0}
@media(max-width:600px){.hint{display:none}header{flex-wrap:wrap}#search{order:3;max-width:none;margin-left:0}}
