:root{
  --bg:#fbf4e6;
  --panel:rgba(255,252,245,.92);
  --panel2:rgba(255,252,245,.78);
  --text:#2b1a12;
  --muted:#7a5c4a;
  --brand:#c2410c;
  --brand2:#b45309;
  --danger:#b91c1c;
  --ok:#15803d;
  --line:rgba(122,92,74,.18);
  --shadow:0 18px 40px rgba(43,26,18,.12);
  --r:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-serif,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Serif SC","Songti SC","STSong","SimSun","Noto Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(1200px 800px at 8% -10%, rgba(194,65,12,.14), transparent 55%),
    radial-gradient(900px 700px at 95% 0%, rgba(180,83,9,.12), transparent 55%),
    radial-gradient(1200px 800px at 30% 120%, rgba(185,28,28,.06), transparent 60%),
    linear-gradient(180deg, rgba(255,248,235,1), rgba(251,244,230,1));
  color:var(--text);
}
h1{margin:0;font-size:inherit;font-weight:600}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 16px}
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(251,244,230,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;gap:10px;align-items:center}
.logo{
  width:34px;height:34px;border-radius:10px;
  object-fit:cover;display:block;
  box-shadow:var(--shadow);
}
.brand-title{font-weight:700;letter-spacing:.4px;font-size:0.8rem;}
.nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.nav a{
  padding:8px 8px;border-radius:12px;
  color:var(--muted);
  border:1px solid transparent;
}
.nav a.active{
  color:var(--text);
  background:rgba(194,65,12,.10);
  border-color:rgba(194,65,12,.25);
}
.main{padding:18px 0 34px}
.hero{
  background:linear-gradient(180deg, rgba(194,65,12,.10), rgba(180,83,9,.06));
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:18px;
  box-shadow:var(--shadow);
}
.hero h1{margin:0 0 8px 0}
.hero p{margin:0;color:var(--muted);line-height:1.7}
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
  margin-top:14px;
}
.col-12{grid-column:span 12}
.col-8{grid-column:span 8}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}
.col-3{grid-column:span 3}
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel-h{
  padding:12px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--line);
}
.panel-h h2{margin:0;font-size:14px;color:var(--text)}
.panel-b{padding:14px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  background:rgba(255,252,245,.92);
  border:1px solid var(--line);
}
.chip b{font-size:13px}
.chip span{color:var(--muted);font-size:12px}
.searchbar{
  display:flex;gap:10px;align-items:center;
  padding:10px;border-radius:16px;
  background:rgba(255,252,245,.92);
  border:1px solid var(--line);
}
.searchbar input{
  flex:1;
  background:transparent;border:0;outline:0;
  color:var(--text);font-size:14px;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(194,65,12,.25);
  background:rgba(194,65,12,.10);
  color:var(--text);
  cursor:pointer;
  user-select:none;
}
.btn.secondary{
  border-color:rgba(148,163,184,.25);
  background:rgba(122,92,74,.06);
  color:var(--muted);
}
.btn.danger{
  border-color:rgba(239,68,68,.25);
  background:rgba(185,28,28,.10);
}
.btn.ok{
  border-color:rgba(34,197,94,.25);
  background:rgba(21,128,61,.10);
}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn svg{width:16px;height:16px;display:block}
.alink{
  color:var(--brand);
  border-bottom:1px solid rgba(194,65,12,.25);
  text-decoration: none;
}
.alink:hover{
  border-bottom-color:rgba(194,65,12,.6);
}
.intro{
  white-space:pre-wrap;
  color:var(--muted);
  line-height:1.75;
  font-size:13px;
}
.cards{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}
.card{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:190px;
}
.thumb{
  width:100%;
  aspect-ratio:16/10;
  background:rgba(122,92,74,.08);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s}
.thumb img.lazyload{opacity:0}
.thumb img.lazyload[src]{opacity:1}
.thumb{
  position:relative;
  background:rgba(122,92,74,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E") no-repeat center;
  background-size:24px;
}
.thumb::after{
  content:'';position:absolute;inset:0;
  background:inherit;
  animation:spin 1s linear infinite;
  display:none;
}
.thumb:has(img.lazyload:not([src]))::after{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.card-b{padding:10px 10px 12px 10px;display:flex;flex-direction:column;gap:10px;flex:1}
.title{font-size:13px;line-height:1.35;max-height:2.7em;overflow:hidden}
.meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.meta b{color:var(--text);font-weight:600}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.22);
  color:var(--muted);
  background:rgba(122,92,74,.06);
}
.player{
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:16px;
  border:1px solid var(--line);
  overflow:hidden;
}
.player iframe{width:100%;height:100%;border:0}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.kvs{display:flex;gap:12px;flex-wrap:wrap}
.kv{
  padding:10px 12px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,252,245,.92);
  min-width:130px;
}
.kv div:first-child{font-size:12px;color:var(--muted)}
.kv div:last-child{font-size:15px;font-weight:700;margin-top:4px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left}
.table th{font-size:12px;color:var(--muted);font-weight:600}
.table td{font-size:13px}
.foot{padding:16px 0;color:var(--muted);font-size:12px}
.muted{color:var(--muted)}
.badge{
  font-size:11px;padding:4px 8px;border-radius:999px;
  border:1px solid rgba(148,163,184,.22);
  color:var(--muted);
  background:rgba(255,252,245,.86);
}
@media (max-width: 980px){
  .col-8{grid-column:span 12}
  .col-4{grid-column:span 12}
  .cards{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 640px){
  .topbar-inner{gap:10px}
  .nav{gap:6px}
  .nav a{padding:8px 9px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .kv{min-width:calc(50% - 6px)}
}