/* =========================================================
   夜航星 · 主题样式
   颜色/尺寸都来自 config.js 写入的 CSS 变量，
   这里只写结构与组件，不要在组件里写死颜色。
   ========================================================= */

:root{
  --bg:#0b1015;
  --ink:#f4f6f8;
  --ink-soft:rgba(244,246,248,.72);
  --ink-mute:rgba(244,246,248,.45);
  --accent:#b9a6f2;
  --accent-ink:#191424;
  --accent2:#8fe3c8;
  --glass:rgba(14,19,26,.55);
  --glass-blur:18px;
  --border:rgba(255,255,255,.08);
  --card:rgba(255,255,255,.035);
  --radius:16px;
  --radius-sm:10px;
  --radius-pill:999px;
  --max-w:1100px;
  --hero-max:760px;
  --hero-min:86vh;
  --gap:18px;
  --dur:.2s;
  --font-display:ui-monospace,Menlo,Consolas,serif;
  --font-body:-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --wallpaper:none;
  --wallpaper-dim:0.45;
  --wallpaper-blur:0px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; overflow-x:hidden;
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:15px; line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

/* ---------- 背景层 ---------- */
.bg{position:fixed; inset:0; z-index:-2; overflow:hidden; background:var(--bg)}
.bg .wall{
  position:absolute; inset:-40px;
  background-image:var(--wallpaper);
  background-size:cover; background-position:center;
  filter:blur(var(--wallpaper-blur));
  opacity:0;
  transition:opacity .6s ease;
}
.bg.has-wall .wall{opacity:1}
.bg.has-video .wall{opacity:0}
.bg .wall-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  filter:blur(var(--wallpaper-blur));
  transition:opacity .6s ease;
}
.bg.has-video .wall-video{opacity:1}
/* 动态壁纸：静态图缓慢漂移、渐变缓慢流动（视频本身就是动的） */
body[data-wall="image"][data-wall-motion="1"] .bg .wall{animation:wallDrift 46s ease-in-out infinite alternate}
body[data-wall="gradient"][data-wall-motion="1"] .bg .tint{background-size:190% 190%; animation:tintFlow 34s ease-in-out infinite alternate}
@keyframes wallDrift{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.09) translate3d(-1.6%,-1.4%,0)}
}
@keyframes tintFlow{
  from{background-position:8% 0%}
  to{background-position:92% 100%}
}
@media (prefers-reduced-motion:reduce){
  .bg .wall,.bg .tint,.bg .wall-video{animation:none !important}
}
.bg .tint{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 78% 8%, #24333f 0%, rgba(36,51,63,0) 55%),
    radial-gradient(90% 80% at 12% 22%, #1b2733 0%, rgba(27,39,51,0) 60%),
    radial-gradient(120% 100% at 50% 120%, #05080b 0%, rgba(5,8,11,0) 65%),
    linear-gradient(160deg,#111a22 0%,#0a1015 45%,#05080b 100%);
}
/* 有壁纸时，tint 变成「压暗层」：dim=0 完全透出壁纸，dim=1 全黑 */
.bg.has-wall .tint,.bg.has-video .tint{opacity:var(--wallpaper-dim)}
.bg .bokeh{position:absolute; inset:0; opacity:.22; filter:blur(26px)}
.bg .bokeh i{position:absolute; display:block; border-radius:50%;
  background:radial-gradient(circle at 38% 36%, rgba(198,224,236,.55), rgba(198,224,236,0) 68%)}
.bg .bokeh i:nth-child(1){width:150px;height:150px; left:8%;  top:26%}
.bg .bokeh i:nth-child(2){width:80px; height:80px;  left:18%; top:62%}
.bg .bokeh i:nth-child(3){width:170px;height:170px; right:7%; top:20%;
  background:radial-gradient(circle at 38% 36%, rgba(206,186,238,.5), rgba(206,186,238,0) 68%)}
.bg .bokeh i:nth-child(4){width:64px; height:64px;  right:24%; top:58%}
.bg .bokeh i:nth-child(5){width:110px;height:110px; left:40%; top:6%; opacity:.55}
.bg .veil{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,8,11,.25) 0%, rgba(5,8,11,.10) 35%, rgba(5,8,11,.72) 100%)}
.bg .grain{position:absolute; inset:0; opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.5'/></svg>")}

/* ---------- 导航 ---------- */
.nav-wrap{position:sticky; top:20px; z-index:30; display:flex; justify-content:center; padding:0 20px}
.nav{
  width:100%; max-width:var(--max-w);
  display:flex; align-items:center; gap:14px;
  padding:10px 18px; border-radius:var(--radius);
  background:var(--glass); border:1px solid var(--border);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto}
.brand .avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(255,255,255,.18); background:#2b3a47; flex:none}
.brand .name{font-size:15px; font-weight:700; letter-spacing:.02em}
.nav-links{display:flex; align-items:center; gap:2px}
.nav-links a{display:inline-flex; align-items:center; gap:6px; padding:7px 11px;
  border-radius:var(--radius-sm); font-size:13px; color:var(--ink-soft);
  transition:background var(--dur) ease,color var(--dur) ease}
.nav-links a:hover{background:rgba(255,255,255,.07); color:var(--ink)}
.nav-links a.active{color:var(--ink); background:rgba(255,255,255,.09)}
.nav-links .ico{opacity:.75; font-size:12px; width:14px; text-align:center}

/* ---------- 通用容器 ---------- */
.section{max-width:var(--max-w); margin:0 auto 96px; padding:0 20px}
.section-head{display:flex; align-items:baseline; gap:12px; margin-bottom:20px}
.section-head .kicker{font-family:var(--font-display); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--accent2)}
.section-head h2{margin:0; font-size:20px; font-weight:600}
.section-head .line{flex:1; height:1px; background:var(--border)}
.section-head .more{margin-left:auto; font-size:13px; color:var(--ink-mute); white-space:nowrap}
.section-head .more:hover{color:var(--ink)}

/* ---------- Hero ---------- */
.hero{min-height:calc(var(--hero-min) - 92px); display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center; padding:40px 24px 110px}
.eyebrow{margin:0 0 26px; font-family:var(--font-display); font-size:12px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--accent2)}
.hero h1{margin:0; font-family:var(--font-display); font-weight:500;
  font-size:clamp(56px,9vw,104px); line-height:1.02; letter-spacing:.01em;
  color:#fff; text-shadow:0 10px 40px rgba(0,0,0,.45)}
.hero-lede{margin:34px auto 0; width:100%; max-width:560px;
  font-size:15px; line-height:2.05; color:var(--ink-soft)}
.cta{margin-top:44px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.btn{display:inline-flex; align-items:center; justify-content:center; min-width:104px;
  padding:12px 26px; border-radius:var(--radius-pill); font-size:14px;
  transition:transform var(--dur) ease, box-shadow var(--dur) ease, background var(--dur) ease}
.btn-primary{background:var(--accent); color:var(--accent-ink); font-weight:600;
  box-shadow:0 10px 28px rgba(133,110,220,.3)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 14px 34px rgba(133,110,220,.42)}
.btn-ghost{color:var(--ink); border:1px solid rgba(255,255,255,.42);
  background:rgba(255,255,255,.04); backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.10); transform:translateY(-1px)}

/* 内页页头（非首页） */
.page-head{max-width:var(--max-w); margin:0 auto; padding:56px 20px 32px}
.page-head .kicker{font-family:var(--font-display); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--accent2)}
.page-head h1{margin:10px 0 10px; font-size:clamp(28px,4vw,40px); font-weight:600; line-height:1.25}
.page-head p{margin:0; color:var(--ink-soft); font-size:14px}

/* ---------- 卡片 ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--gap)}
.card{padding:20px; border-radius:var(--radius); background:var(--card);
  border:1px solid var(--border); backdrop-filter:blur(10px);
  transition:transform var(--dur) ease,border-color var(--dur) ease,background var(--dur) ease}
.card:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.06)}
.card .meta{font-family:var(--font-display); font-size:11px; letter-spacing:.12em;
  color:var(--ink-mute); text-transform:uppercase}
.card h3{margin:10px 0 8px; font-size:16px; font-weight:600; line-height:1.5}
.card p{margin:0; font-size:13px; line-height:1.8; color:var(--ink-soft)}
.card .tags{margin-top:12px; display:flex; gap:6px; flex-wrap:wrap}
.tag{font-size:11px; padding:2px 9px; border-radius:var(--radius-pill);
  border:1px solid var(--border); color:var(--ink-mute)}

/* ---------- 工具栏（搜索/筛选） ---------- */
.toolbar{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:0 0 24px}
.search{flex:1; min-width:220px; display:flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.05); border:1px solid var(--border)}
.search input{flex:1; background:none; border:0; outline:none; color:var(--ink); font-size:14px}
.search input::placeholder{color:var(--ink-mute)}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{padding:7px 14px; border-radius:var(--radius-pill); font-size:12.5px;
  border:1px solid var(--border); color:var(--ink-soft); background:rgba(255,255,255,.03);
  transition:all var(--dur) ease}
.chip:hover{color:var(--ink); background:rgba(255,255,255,.08)}
.chip.active{background:var(--accent); color:var(--accent-ink); border-color:transparent; font-weight:600}

/* ---------- 文章列表行 ---------- */
.list{display:flex; flex-direction:column}
.row{display:grid; grid-template-columns:120px 1fr auto; gap:20px; align-items:baseline;
  padding:20px 4px; border-bottom:1px solid var(--border); transition:background var(--dur) ease}
.row:hover{background:rgba(255,255,255,.03)}
.row .date{font-family:var(--font-display); font-size:12px; color:var(--ink-mute); letter-spacing:.06em}
.row h3{margin:0; font-size:17px; font-weight:600; line-height:1.5}
.row p{margin:6px 0 0; font-size:13px; color:var(--ink-soft); line-height:1.7}
.row .right{font-size:12px; color:var(--ink-mute); display:flex; gap:10px; align-items:center}

/* ---------- 文章正文 ---------- */
.article{max-width:760px; margin:0 auto; padding:0 20px 100px}
.article-head{margin-bottom:36px; padding-bottom:24px; border-bottom:1px solid var(--border)}
.article-head h1{margin:8px 0 14px; font-size:clamp(26px,4vw,36px); line-height:1.35; font-weight:600}
.article-meta{display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  font-size:12.5px; color:var(--ink-mute); font-family:var(--font-display); letter-spacing:.04em}
.prose{font-size:15.5px; line-height:1.95; color:rgba(244,246,248,.9)}
.prose h2,.prose h3{margin:2.2em 0 .8em; line-height:1.4; color:#fff; font-weight:600}
.prose h2{font-size:22px; padding-left:12px; border-left:3px solid var(--accent)}
.prose h3{font-size:18px}
.prose p{margin:1.1em 0}
.prose a{color:var(--accent2); border-bottom:1px solid rgba(143,227,200,.35)}
.prose img{border-radius:var(--radius-sm); margin:1.4em auto}
.prose blockquote{margin:1.4em 0; padding:12px 18px; border-left:3px solid var(--border);
  background:rgba(255,255,255,.04); border-radius:0 var(--radius-sm) var(--radius-sm) 0; color:var(--ink-soft)}
.prose code{font-family:var(--font-display); font-size:.92em; padding:2px 6px;
  border-radius:6px; background:rgba(255,255,255,.09)}
.prose pre{margin:1.4em 0; padding:16px 18px; border-radius:var(--radius-sm);
  background:rgba(0,0,0,.45); border:1px solid var(--border); overflow:auto}
.prose pre code{padding:0; background:none; font-size:13px; line-height:1.7}
.prose ul,.prose ol{padding-left:1.3em; margin:1.1em 0}
.prose li{margin:.4em 0}
.prose hr{margin:2.4em 0; border:0; border-top:1px solid var(--border)}
.prose table{width:100%; border-collapse:collapse; margin:1.4em 0; font-size:13.5px}
.prose th,.prose td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--border)}
.prose th{font-weight:600; color:var(--ink-soft); background:rgba(255,255,255,.04)}
.prose tr:last-child td{border-bottom:0}
.article-foot{margin-top:48px; padding-top:24px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--ink-mute)}

/* ---------- 图片网格 + 灯箱 ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px}
.tile{position:relative; border-radius:var(--radius); overflow:hidden; cursor:zoom-in;
  background:rgba(255,255,255,.05); aspect-ratio:4/3}
.tile img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.tile:hover img{transform:scale(1.04)}
.tile .cap{position:absolute; inset:auto 0 0 0; padding:30px 14px 14px; font-size:12px;
  color:#fff; background:linear-gradient(180deg,transparent,rgba(0,0,0,.78)); line-height:1.5}
.album{margin-bottom:40px}
.album h3{font-size:15px; font-weight:600; margin:0 0 12px; color:var(--ink-soft)}
.lightbox{position:fixed; inset:0; z-index:90; display:none; place-items:center;
  background:rgba(4,6,9,.92); backdrop-filter:blur(6px); padding:24px}
.lightbox.open{display:grid}
.lightbox img{max-width:min(92vw,1200px); max-height:82vh; border-radius:var(--radius-sm); object-fit:contain}
.lightbox .cap{margin-top:14px; text-align:center; font-size:13px; color:var(--ink-soft)}
.lightbox .close{position:absolute; top:18px; right:24px; font-size:26px; color:var(--ink-soft)}
.lightbox .nav-btn{position:absolute; top:50%; transform:translateY(-50%); font-size:30px;
  padding:10px 16px; color:var(--ink-soft)}
.lightbox .prev{left:10px} .lightbox .next{right:10px}

/* ---------- 音乐 ---------- */
.music{display:flex; flex-direction:column; gap:8px}
.track{display:grid; grid-template-columns:34px 1fr auto auto; gap:14px; align-items:center;
  padding:9px 16px; border-radius:var(--radius-sm); border:1px solid transparent; line-height:1.45;
  transition:all var(--dur) ease}
.track:hover{background:rgba(255,255,255,.05); border-color:var(--border)}
.track .idx{font-family:var(--font-display); font-size:12px; color:var(--ink-mute)}
.track.playing .idx{color:var(--accent2)}
.track .t-title{font-size:14.5px}
.track .t-artist{font-size:12.5px; color:var(--ink-mute)}
.track .t-dur{font-family:var(--font-display); font-size:12px; color:var(--ink-mute)}
.track .t-play{width:30px;height:30px;border-radius:50%; border:1px solid var(--border);
  display:grid; place-items:center; font-size:11px; color:var(--ink-soft)}
.track:hover .t-play{border-color:var(--accent2); color:var(--accent2)}
.player{position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(120%);
  z-index:60; width:min(560px,calc(100% - 32px)); padding:12px 16px;
  display:flex; align-items:center; gap:14px; border-radius:var(--radius);
  background:var(--glass); border:1px solid var(--border);
  backdrop-filter:blur(var(--glass-blur)); box-shadow:0 18px 50px rgba(0,0,0,.5);
  transition:transform .3s ease}
.player.on{transform:translateX(-50%) translateY(0)}
.player .p-info{flex:1; min-width:0}
.player .p-title{font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.player .p-artist{font-size:11.5px; color:var(--ink-mute)}
.player audio{max-width:220px; height:34px}
.player .p-close{color:var(--ink-mute); font-size:18px; padding:0 6px}

/* ---------- 视频 ---------- */
.vgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--gap)}
.vcard{border-radius:var(--radius); overflow:hidden; background:var(--card);
  border:1px solid var(--border); transition:all var(--dur) ease; display:block}
.vcard:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.16)}
.vcard .thumb{aspect-ratio:16/9; background:#131b22 center/cover no-repeat; position:relative}
.vcard .thumb::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.18)}
.vcard .thumb .play{position:absolute; inset:0; display:grid; place-items:center; font-size:26px;
  color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.6); z-index:1}
.vcard .body{padding:14px 16px 16px}
.vcard h3{margin:0 0 6px; font-size:15px; font-weight:600; line-height:1.5}
.vcard .src{font-size:11.5px; color:var(--ink-mute); font-family:var(--font-display); letter-spacing:.08em; text-transform:uppercase}
.frame{position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
  background:#000; border:1px solid var(--border)}
.frame iframe,.frame video{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ---------- 时间线 ---------- */
.timeline{position:relative; padding-left:22px}
.timeline::before{content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--border)}
.tl-item{position:relative; padding:0 0 26px}
.tl-item::before{content:""; position:absolute; left:-21px; top:8px; width:7px; height:7px;
  border-radius:50%; background:var(--accent2); box-shadow:0 0 0 4px rgba(143,227,200,.12)}
.tl-item .when{font-family:var(--font-display); font-size:11.5px; color:var(--ink-mute); letter-spacing:.1em}
.tl-item .what{margin-top:4px; font-size:14.5px}
.tl-item .what a:hover{color:var(--accent2)}

/* ---------- 空状态 / 页脚 ---------- */
.empty{padding:48px 0; text-align:center; color:var(--ink-mute); font-size:14px}
footer.site{border-top:1px solid var(--border); margin-top:40px; padding:34px 20px 44px;
  text-align:center; color:var(--ink-mute); font-size:12.5px}
footer.site .links{display:flex; gap:16px; justify-content:center; margin-bottom:12px; flex-wrap:wrap}
footer.site a:hover{color:var(--ink)}

/* ---------- 响应式 ---------- */
@media (max-width:860px){
  .row{grid-template-columns:1fr; gap:6px}
  .row .date{order:1}
  .row .right{display:none}
}
@media (max-width:720px){
  .nav-links a span.txt{display:none}
  .nav-links a{padding:8px 10px}
  .hero{padding-bottom:80px}
  .hero-lede{font-size:14px}
  .page-head{padding-top:40px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .track{grid-template-columns:26px 1fr auto}
  .track .t-dur{display:none}
  .player audio{max-width:150px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
}

/* ==================================================================
   卡通风格层（body[data-mood="cartoon"]）：圆角贴纸、彩色图标、
   轻微歪斜和弹跳，和「极简玻璃」的 plain 模式共用同一套结构
   ================================================================== */
.sec-ico{
  display:inline-grid; place-items:center;
  width:42px; height:42px; flex:0 0 42px;
  border-radius:14px; font-size:21px; line-height:1;
  background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent2) 30%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow:0 6px 18px rgba(0,0,0,.32);
  transform:rotate(-4deg);
}

body[data-mood="cartoon"] .section-head{gap:12px}
body[data-mood="cartoon"] .section-head .kicker{letter-spacing:.16em}
body[data-mood="cartoon"] .section-head h2{font-size:26px}

body[data-mood="cartoon"] .nav{
  border-width:1.5px; border-color:rgba(255,255,255,.14);
  box-shadow:0 14px 34px rgba(0,0,0,.42), 0 4px 0 -1px rgba(255,255,255,.05) inset;
}
body[data-mood="cartoon"] .nav-links a{
  border-radius:999px; padding:6px 12px 6px 8px; transition:transform .18s, background .18s;
}
body[data-mood="cartoon"] .nav-links a .ico{
  display:inline-grid; place-items:center; width:26px; height:26px; border-radius:9px;
  background:color-mix(in srgb, var(--accent) 16%, transparent); font-size:14px;
}
body[data-mood="cartoon"] .nav-links a:hover{background:color-mix(in srgb, var(--accent) 14%, transparent); transform:translateY(-1px)}
body[data-mood="cartoon"] .nav-links a.active{background:var(--accent); color:var(--accent-ink)}
body[data-mood="cartoon"] .nav-links a.active .ico{background:rgba(0,0,0,.16)}

body[data-mood="cartoon"] .card,
body[data-mood="cartoon"] .tile,
body[data-mood="cartoon"] .vcard,
body[data-mood="cartoon"] .track{
  border-width:1.5px; border-color:rgba(255,255,255,.14);
  border-radius:calc(var(--radius) + 6px);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body[data-mood="cartoon"] .card:hover,
body[data-mood="cartoon"] .tile:hover,
body[data-mood="cartoon"] .vcard:hover{
  transform:translateY(-6px) rotate(-.7deg);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 18px 34px rgba(0,0,0,.38);
}
body[data-mood="cartoon"] .card:hover h3{color:var(--accent)}

body[data-mood="cartoon"] .btn{
  border-width:1.5px; font-weight:600;
  box-shadow:0 4px 0 rgba(0,0,0,.35);
}
body[data-mood="cartoon"] .btn:hover{transform:translateY(-2px); box-shadow:0 6px 0 rgba(0,0,0,.35)}
body[data-mood="cartoon"] .btn:active{transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.35)}
body[data-mood="cartoon"] .btn-primary{
  background:linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 62%, var(--accent2)));
}

body[data-mood="cartoon"] .chip,
body[data-mood="cartoon"] .tag{
  border-width:1px; border-color:rgba(255,255,255,.16);
  background:color-mix(in srgb, var(--accent) 13%, rgba(255,255,255,.04));
}
body[data-mood="cartoon"] .chip.active{background:var(--accent); color:var(--accent-ink); border-color:transparent}
body[data-mood="cartoon"] .tag:nth-child(2n){background:color-mix(in srgb, var(--accent2) 16%, rgba(255,255,255,.04))}
body[data-mood="cartoon"] .tag:nth-child(3n){background:color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.04))}

body[data-mood="cartoon"] .row{
  border-radius:calc(var(--radius) + 2px);
  transition:background .16s, transform .16s;
}
body[data-mood="cartoon"] .row:hover{
  background:color-mix(in srgb, var(--accent) 9%, transparent);
  transform:translateX(4px);
}

body[data-mood="cartoon"] .timeline .tl-item::before{
  width:12px; height:12px; border-width:3px;
  border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

body[data-mood="cartoon"] .page-head.has-ico,
body[data-mood="cartoon"] .article-head.has-ico{display:block}
.page-head .sec-ico, .article-head .sec-ico{margin-bottom:14px; width:50px; height:50px; font-size:25px; border-radius:16px}

/* 首页大标题周围的贴纸 */
.stickers{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.stickers span{
  position:absolute; font-size:26px; line-height:1;
  color:color-mix(in srgb, var(--accent) 80%, white);
  text-shadow:0 6px 18px rgba(0,0,0,.45);
  opacity:.85;
}
.stickers .s1{left:14%; top:26%; font-size:30px; transform:rotate(-12deg)}
.stickers .s2{right:13%; top:22%; font-size:22px; color:color-mix(in srgb, var(--accent2) 85%, white); transform:rotate(14deg)}
.stickers .s3{left:20%; bottom:22%; font-size:20px; color:color-mix(in srgb, var(--accent2) 80%, white); transform:rotate(8deg)}
.stickers .s4{right:19%; bottom:26%; font-size:26px; transform:rotate(-8deg)}
body[data-mood="cartoon"] .stickers span{animation:floaty 7s ease-in-out infinite alternate}
body[data-mood="cartoon"] .stickers .s2{animation-duration:8.6s; animation-delay:-1.4s}
body[data-mood="cartoon"] .stickers .s3{animation-duration:9.4s; animation-delay:-3s}
body[data-mood="cartoon"] .stickers .s4{animation-duration:7.8s; animation-delay:-2.2s}
@keyframes floaty{
  from{translate:0 0}
  to{translate:0 -12px}
}
body[data-mood="plain"] .stickers{display:none}

body[data-mood="cartoon"] footer.site .links a{
  padding:4px 10px; border-radius:999px; border:1px solid var(--border);
  transition:background .16s, transform .16s;
}
body[data-mood="cartoon"] footer.site .links a:hover{background:color-mix(in srgb, var(--accent) 14%, transparent); transform:translateY(-1px)}

body[data-mood="cartoon"] .hero h1{letter-spacing:.02em}
body[data-mood="cartoon"] .eyebrow{
  padding:4px 12px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent2) 34%, transparent);
  background:color-mix(in srgb, var(--accent2) 10%, transparent);
}

@media (prefers-reduced-motion:reduce){
  body[data-mood="cartoon"] .stickers span{animation:none !important}
}
@media (max-width:720px){
  .sec-ico{width:36px;height:36px;flex-basis:36px;font-size:18px;border-radius:12px}
  body[data-mood="cartoon"] .section-head h2{font-size:22px}
  .stickers .s1,.stickers .s3{left:6%}
  .stickers .s2,.stickers .s4{right:6%}
}

body[data-mood="cartoon"] .section-head{align-items:center}
.hero{position:relative}
.hero > .stickers{z-index:0}
.hero > *:not(.stickers){position:relative; z-index:1}

/* 更卡通的细节：卡片顶端渐变、标题手绘下划线、圆角更明显 */
body[data-mood="cartoon"] .card,
body[data-mood="cartoon"] .vcard{
  background-image:linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 55%),
                   linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03));
}
body[data-mood="cartoon"] .card::before,
body[data-mood="cartoon"] .vcard::before{
  content:""; position:absolute; left:16px; top:-7px; width:34px; height:10px; border-radius:3px;
  background:color-mix(in srgb, var(--accent2) 55%, transparent);
  transform:rotate(-6deg); box-shadow:0 2px 6px rgba(0,0,0,.3);
}
body[data-mood="cartoon"] .card,
body[data-mood="cartoon"] .vcard{position:relative; overflow:visible}
body[data-mood="cartoon"] .card > *,
body[data-mood="cartoon"] .vcard > *{position:relative; z-index:1}
body[data-mood="cartoon"] .section-head h2{
  position:relative; padding-bottom:8px;
}
body[data-mood="cartoon"] .section-head h2::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:radial-gradient(closest-side at 8px 50%, color-mix(in srgb, var(--accent) 65%, transparent) 0 100%, transparent 0) repeat-x;
  background-size:14px 6px; opacity:.75;
}
body[data-mood="cartoon"] .hero h1{
  text-shadow:0 12px 40px rgba(0,0,0,.5), 0 0 0.5px color-mix(in srgb, var(--accent) 30%, transparent);
}
body[data-mood="cartoon"] .section{padding-top:26px}

/* 图集说明文字别贴边 */
body[data-mood="cartoon"] .tile .cap{padding:22px 14px 16px}

/* =========================================================
   音乐板块：工具栏 + 四种布局（瀑布流 / 海报墙 / 列表 / 唱片架）
   ========================================================= */
.music-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 22px;flex-wrap:wrap}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid var(--border)}
.seg-btn{
  appearance:none;border:0;cursor:pointer;padding:7px 15px;border-radius:999px;
  background:transparent;color:var(--ink-soft);font:inherit;font-size:13px;line-height:1;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.seg-btn:hover{color:var(--ink);transform:translateY(-1px)}
.seg-btn.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
.music-count{font-size:13px;color:var(--ink-soft)}

.mlist{--mc-gap:18px}
.mtile{cursor:pointer;outline:none}
.mtile:focus-visible{box-shadow:0 0 0 2px var(--accent);border-radius:calc(var(--radius) + 4px)}
.mcover{
  position:relative;background-size:cover;background-position:center;background-color:#121821;
  border-radius:calc(var(--radius) + 4px);overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease;
}
.mtile.no-cover .mcover{background-image:linear-gradient(135deg,var(--accent),var(--accent2))}
.mtile:hover .mcover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.mrank{
  position:absolute;left:10px;top:10px;z-index:2;font-size:12px;font-weight:700;letter-spacing:.04em;
  padding:3px 8px;border-radius:999px;background:rgba(6,9,13,.62);color:#fff;backdrop-filter:blur(6px);
}
.mplay{
  position:absolute;right:10px;bottom:10px;z-index:2;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;color:#0b0f14;background:var(--accent);
  opacity:0;transform:translateY(6px) scale(.9);transition:opacity .25s ease,transform .25s ease;
}
.mtile:hover .mplay,.mtile:focus-visible .mplay{opacity:1;transform:none}
.mtext{padding:10px 2px 0}
.m-title{margin:0;font-size:15px;line-height:1.35;font-weight:650;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.m-artist{margin:3px 0 0;font-size:12.5px;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-album{display:block;font-size:12px;color:var(--ink-soft);opacity:.72;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-dur{font-size:12px;color:var(--ink-soft);opacity:.8}

/* 瀑布流：多列 + 封面比例循环，制造错落 */
.mlist[data-music-layout="waterfall"]{columns:4 210px;column-gap:var(--mc-gap)}
.mlist[data-music-layout="waterfall"] .mtile{break-inside:avoid;margin:0 0 calc(var(--mc-gap) + 6px);display:block}
.mlist[data-music-layout="waterfall"] .mcover{aspect-ratio:1/1}
.mlist[data-music-layout="waterfall"] .mtile:nth-child(4n+2) .mcover{aspect-ratio:4/5}
.mlist[data-music-layout="waterfall"] .mtile:nth-child(4n+3) .mcover{aspect-ratio:5/6}
.mlist[data-music-layout="waterfall"] .mtile:nth-child(4n+4) .mcover{aspect-ratio:3/4}

/* 海报墙：竖版封面，信息压在封面上 */
.mlist[data-music-layout="poster"]{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:var(--mc-gap)}
.mlist[data-music-layout="poster"] .mtile{position:relative}
.mlist[data-music-layout="poster"] .mcover{aspect-ratio:3/4}
.mlist[data-music-layout="poster"] .mtext{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:44px 13px 13px;
  background:linear-gradient(180deg,rgba(6,9,13,0) 0%,rgba(6,9,13,.86) 62%,rgba(6,9,13,.95) 100%);
  border-radius:0 0 calc(var(--radius) + 4px) calc(var(--radius) + 4px);
}
.mlist[data-music-layout="poster"] .m-album{display:none}
.mlist[data-music-layout="poster"] .m-dur{
  position:absolute;right:12px;top:12px;z-index:2;padding:2px 8px;border-radius:999px;
  background:rgba(6,9,13,.62);backdrop-filter:blur(6px);color:#fff;opacity:.9
}

/* 列表：一行一首 */
.mlist[data-music-layout="list"]{display:flex;flex-direction:column;gap:6px}
.mlist[data-music-layout="list"] .mtile{
  display:grid;grid-template-columns:46px 1fr 190px 66px;align-items:center;gap:14px;
  padding:9px 14px 9px 10px;border-radius:14px;background:rgba(255,255,255,.035);
  border:1px solid transparent;transition:background .2s ease,border-color .2s ease
}
.mlist[data-music-layout="list"] .mtile:hover{background:rgba(255,255,255,.07);border-color:var(--border)}
.mlist[data-music-layout="list"] .mtile:hover .mcover{transform:none;box-shadow:none}
.mlist[data-music-layout="list"] .mcover{aspect-ratio:auto;width:46px;height:46px;border-radius:10px;box-shadow:none}
.mlist[data-music-layout="list"] .mrank{position:static;background:none;backdrop-filter:none;color:var(--ink-soft);
  font-size:12px;padding:0;order:-1;text-align:center;grid-column:1}
.mlist[data-music-layout="list"] .mcover{grid-column:1;grid-row:1}
.mlist[data-music-layout="list"] .mrank{grid-column:1;grid-row:1;justify-self:start;align-self:start;
  margin:-6px 0 0 -4px;font-size:10px;opacity:.55}
.mlist[data-music-layout="list"] .mtext{padding:0;grid-column:2;min-width:0}
.mlist[data-music-layout="list"] .m-album{grid-column:3;margin:0}
.mlist[data-music-layout="list"] .m-dur{grid-column:4;text-align:right}
.mlist[data-music-layout="list"] .mplay{right:6px;bottom:auto;top:50%;width:28px;height:28px;margin-top:-14px}

/* 唱片架：横向滚动，圆形唱片 */
.mlist[data-music-layout="shelf"]{
  display:flex;gap:20px;overflow-x:auto;padding:6px 2px 22px;
  scroll-snap-type:x mandatory;scrollbar-width:thin
}
.mlist[data-music-layout="shelf"] .mtile{flex:0 0 168px;scroll-snap-align:start;text-align:center;position:relative}
.mlist[data-music-layout="shelf"] .mcover{
  aspect-ratio:1/1;border-radius:50%;box-shadow:0 12px 30px rgba(0,0,0,.45);
  animation:shelfSpin 26s linear infinite paused;
}
.mlist[data-music-layout="shelf"] .mtile:hover .mcover{animation-play-state:running;transform:none}
.mlist[data-music-layout="shelf"] .mcover::after{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  border-radius:50%;background:#0b1016;box-shadow:inset 0 0 0 4px rgba(255,255,255,.12)
}
.mlist[data-music-layout="shelf"] .mrank{left:50%;top:-2px;transform:translateX(-50%)}
.mlist[data-music-layout="shelf"] .mtext{padding:12px 4px 0}
.mlist[data-music-layout="shelf"] .m-album{display:none}
.mlist[data-music-layout="shelf"] .m-dur{display:block;margin-top:2px}
@keyframes shelfSpin{to{transform:rotate(360deg)}}

/* 首页「常听」迷你版 */
.mmini{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mmini .mtile .mtext{padding:8px 0 0}
.mmini .mtile .m-title{font-size:14px}
.mmini .mmini-hide,.mmini .m-album,.mmini .m-dur,.mmini .mplay{display:none}
.mmini .mtile .mcover{aspect-ratio:1/1}

/* 详情弹层 */
.mmask{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(4,7,10,.62);backdrop-filter:blur(10px);
  animation:mmFade .22s ease
}
.mmask[hidden]{display:none}
.mmodal{
  position:relative;display:grid;grid-template-columns:246px 1fr;gap:26px;max-width:660px;width:100%;
  padding:26px;border-radius:22px;border:1px solid var(--border);
  background:linear-gradient(160deg,rgba(24,30,40,.96),rgba(12,16,22,.98));
  box-shadow:0 30px 80px rgba(0,0,0,.6);animation:mmIn .26s cubic-bezier(.2,.8,.3,1)
}
.mm-close{
  position:absolute;right:12px;top:10px;width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.08);color:var(--ink);font-size:17px;line-height:1
}
.mm-cover{
  aspect-ratio:1/1;border-radius:16px;background-size:cover;background-position:center;background-color:#121821;
  box-shadow:0 16px 40px rgba(0,0,0,.5)
}
.mm-body{min-width:0;padding-top:4px}
.mm-rank{margin:0 0 8px;font-size:12px;letter-spacing:.06em;color:var(--accent)}
.mm-title{margin:0;font-size:24px;line-height:1.25;font-weight:700}
.mm-artist{margin:6px 0 16px;color:var(--ink-soft);font-size:14px}
.mm-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 14px;font-size:13px}
.mm-facts dt{color:var(--ink-soft);opacity:.75}
.mm-facts dd{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-note{margin:0 0 16px;font-size:13px;color:var(--ink-soft);line-height:1.7}
.mm-link{
  display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:600;text-decoration:none
}
.mm-link:hover{filter:brightness(1.06)}
@keyframes mmFade{from{opacity:0}to{opacity:1}}
@keyframes mmIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* 音乐板块响应式 */
@media (max-width:860px){
  .mlist[data-music-layout="waterfall"]{columns:3 180px}
  .mlist[data-music-layout="list"] .mtile{grid-template-columns:46px 1fr 66px}
  .mlist[data-music-layout="list"] .m-album{display:none}
  .mmini{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .mlist[data-music-layout="waterfall"]{columns:2 150px}
  .mlist[data-music-layout="poster"]{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .mmodal{grid-template-columns:1fr;gap:16px;max-height:86vh;overflow:auto;padding:20px}
  .mm-cover{max-width:200px}
  .mask,.mmask{align-items:flex-end;padding:0}
  .mmask .mmodal{border-radius:20px 20px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .mlist[data-music-layout="shelf"] .mcover{animation:none}
  .mtile:hover .mcover{transform:none}
  .mmask,.mmodal{animation:none}
}

/* 卡片定位基准：瀑布流/海报墙的角标都相对卡片 */
.mtile{position:relative}

/* 列表布局：底色更实一些，避免被壁纸吃掉；序号不叠在封面上 */
.mlist[data-music-layout="list"] .mtile{
  background:rgba(8,12,17,.55);backdrop-filter:blur(8px);border-color:rgba(255,255,255,.06)
}
.mlist[data-music-layout="list"] .mtile:hover{background:rgba(16,22,31,.78)}
.mlist[data-music-layout="list"] .mrank{display:none}
.mlist[data-music-layout="list"] .m-title{font-size:14.5px}
.mlist[data-music-layout="list"] .m-artist{font-size:12px}

/* 海报墙时长胶囊对比度 */
.mlist[data-music-layout="poster"] .m-dur{background:rgba(4,7,10,.72)}

/* 瀑布流按列流动，序号会跳着出现，这里不显示序号（弹层里仍有） */
.mlist[data-music-layout="waterfall"] .mrank{display:none}

/* 播放按钮（真实按钮）与播放中状态 */
.mplay{appearance:none;border:0;padding:0;cursor:pointer;font-family:inherit;line-height:1}
.mplay.off{background:rgba(10,14,20,.72);color:#e8eef6;font-size:13px;cursor:pointer}
.mplay.playing{background:var(--accent2);color:#0b1016}
.mtile.playing .mcover{box-shadow:0 0 0 2px var(--accent2),0 18px 40px rgba(0,0,0,.45)}
.mtile.playing .m-title{color:var(--accent2)}
.mm-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mm-play{
  appearance:none;border:0;cursor:pointer;padding:9px 18px;border-radius:999px;font:inherit;font-size:13px;font-weight:600;
  background:var(--accent2);color:#0b1016
}
.mm-play[hidden]{display:none}

/* [hidden] 一律不显示（否则 display:inline-flex 会覆盖） */
.mm-link[hidden]{display:none}

/* 有音频的曲目：播放键常驻，不用等 hover */
.mtile.has-audio .mplay{opacity:1;transform:none}

/* ================= 阅读主题（文章页） ================= */
:root{--code-bg:rgba(255,255,255,.09);--pre-bg:rgba(0,0,0,.45);--soft-bg:rgba(255,255,255,.04)}
.prose code{background:var(--code-bg)}
.prose pre{background:var(--pre-bg)}
.prose blockquote,.prose th{background:var(--soft-bg)}

.read-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:18px 0 0}
.read-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-right:2px}
.read-bar button{
  appearance:none;cursor:pointer;font:inherit;font-size:12.5px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--border);background:transparent;color:var(--ink-soft);transition:all var(--dur,.2s) ease;
}
.read-bar button:hover{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.read-bar button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.read-hint{font-size:11.5px;color:var(--ink-soft);margin-left:auto;opacity:.75}

/* 浅色主题下让壁纸退到很后面，保证对比度 */
body[data-read="paper"] .bg,body[data-read="sepia"] .bg{opacity:.07}
body[data-read="contrast"] .bg{opacity:0}

body[data-read="paper"]{
  --bg:#f7f2e8;--ink:#2a2521;--ink-soft:#5c5346;
  --glass:rgba(255,255,255,.82);--border:rgba(42,37,33,.14);--card:rgba(255,255,255,.72);
  --accent:#6b4bd6;--accent-ink:#fff;
  --code-bg:rgba(42,37,33,.07);--pre-bg:rgba(42,37,33,.055);--soft-bg:rgba(42,37,33,.045)
}
body[data-read="sepia"]{
  --bg:#efe2c8;--ink:#3a2e1f;--ink-soft:#6b5a42;
  --glass:rgba(252,246,233,.85);--border:rgba(58,46,31,.18);--card:rgba(255,250,240,.72);
  --accent:#a4653a;--accent-ink:#fff;
  --code-bg:rgba(58,46,31,.08);--pre-bg:rgba(58,46,31,.06);--soft-bg:rgba(58,46,31,.05)
}
body[data-read="contrast"]{
  --bg:#000;--ink:#fff;--ink-soft:#d6d6d6;
  --glass:rgba(0,0,0,.85);--border:rgba(255,255,255,.34);--card:rgba(255,255,255,.06);
  --accent:#ffe066;--accent-ink:#111;
  --code-bg:rgba(255,255,255,.14);--pre-bg:#0b0b0b;--soft-bg:rgba(255,255,255,.08)
}
/* 浅色主题里玻璃导航/卡片要有影子，否则和纸色糊在一起 */
body[data-read="paper"] .nav,body[data-read="sepia"] .nav,
body[data-read="paper"] .card,body[data-read="sepia"] .card{box-shadow:0 10px 30px rgba(80,60,30,.10)}
body[data-read="paper"] .prose a,body[data-read="sepia"] .prose a,body[data-read="contrast"] .prose a{
  color:var(--accent);text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent)
}

/* 阅读主题：正文和次要文字原本写死了浅色，改成变量后浅色主题才读得清 */
:root{--prose-ink:rgba(244,246,248,.9);--prose-strong:#fff}
.prose{color:var(--prose-ink)}
.prose h2,.prose h3{color:var(--prose-strong)}
body[data-read="paper"]{--ink-mute:#8a7d6d;--accent2:#a94f28;--prose-ink:#332c25;--prose-strong:#17130f}
body[data-read="sepia"]{--ink-mute:#8d7a5e;--accent2:#8a5423;--prose-ink:#382b1b;--prose-strong:#221a0e}
body[data-read="contrast"]{--ink-mute:#b9b9b9;--accent2:#ffe066;--prose-ink:#fff;--prose-strong:#fff}

/* 代码块、标签在浅色主题下再压深一档 */
.prose pre,.prose pre code{color:var(--prose-ink)}
body[data-read="paper"] .tag,body[data-read="paper"] .chip{color:#584f40}
body[data-read="sepia"] .tag,body[data-read="sepia"] .chip{color:#5a4830}
body[data-read="paper"] .prose blockquote,body[data-read="sepia"] .prose blockquote{color:#4a4238}

/* ---------- 影视 ---------- */
.films-toolbar{display:flex;flex-direction:column;gap:10px;margin:0 0 22px}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip.small{padding:6px 12px;font-size:12.5px}
.films-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.fsearch{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);
  border:1px solid var(--border);border-radius:999px;padding:8px 14px;min-width:230px}
.fsearch span{opacity:.55}
.fsearch input{background:none;border:0;outline:none;color:var(--ink);font:inherit;font-size:13px;width:100%}

.filmsgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.filmsgrid.mini{grid-template-columns:repeat(4,minmax(0,1fr))}
.fcard{display:block;color:inherit;text-decoration:none;transition:transform .22s ease}
.fcard:hover{transform:translateY(-5px)}
.fposter{position:relative;aspect-ratio:2/3;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid var(--border);box-shadow:0 10px 26px rgba(0,0,0,.28)}
.fposter img{width:100%;height:100%;object-fit:cover;display:block}
.fnopost{display:grid;place-items:center;height:100%;font-size:34px;opacity:.5}
.fstat{position:absolute;left:8px;top:8px;font-size:11px;line-height:1;padding:5px 8px;border-radius:999px;
  background:rgba(8,12,17,.72);backdrop-filter:blur(6px);color:#e9eef5;border:1px solid rgba(255,255,255,.14)}
.fstat.st-watching{background:color-mix(in srgb,var(--accent) 78%,transparent);color:var(--accent-ink);border-color:transparent}
.fstat.st-wish{background:rgba(143,227,200,.82);color:#0f2a22;border-color:transparent}
.frating{position:absolute;right:8px;bottom:8px;font:600 12px/1 var(--font-display);
  padding:5px 7px;border-radius:8px;background:rgba(8,12,17,.74);color:#ffe066;backdrop-filter:blur(6px)}
.fmeta{padding:10px 2px 0}
.fmeta h3{margin:0;font-size:14.5px;line-height:1.35}
.fmeta p{margin:4px 0 0;font-size:12px;color:var(--ink-soft)}

.film{max-width:var(--max-w);margin:0 auto}
.film-top{display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px;align-items:start}
.film-poster{position:relative;aspect-ratio:2/3;border-radius:16px;overflow:hidden;
  border:1px solid var(--border);box-shadow:0 18px 40px rgba(0,0,0,.4);background:rgba(255,255,255,.04)}
.film-poster img{width:100%;height:100%;object-fit:cover;display:block}
.film-info h1{margin:6px 0 10px;font-size:34px;line-height:1.25}
.film-line{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.film-line .fstat{position:static}
.fbigstars{display:inline-flex;align-items:center;gap:8px;color:#ffe066;font-size:14px;letter-spacing:1px}
.fbigstars b{font-family:var(--font-display);color:var(--ink);font-size:13px;opacity:.8}
.film-meta{display:flex;flex-wrap:wrap;gap:14px;margin:4px 0 12px;color:var(--ink-soft);font-size:13px}
.film-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.film-tags.soft .tag{opacity:.75}
.film-link{margin:8px 0 0;font-size:13px}
.film-block{margin:34px 0 0}
.film-block h2{margin:0 0 12px;font-size:17px}
.film-quote{margin:0;padding:16px 18px;border-left:3px solid var(--accent);border-radius:0 12px 12px 0;
  background:rgba(255,255,255,.045);color:var(--prose-ink,var(--ink));font-size:15px;line-height:1.85}
.fcaption{margin-top:8px;font-size:12.5px;color:var(--ink-soft)}
.film-back{margin:38px 0 0;font-size:13px}
@media (max-width:860px){
  .filmsgrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}
  .filmsgrid.mini{grid-template-columns:repeat(4,minmax(0,1fr))}
  .film-top{grid-template-columns:130px minmax(0,1fr);gap:16px}
  .film-info h1{font-size:22px}
  .film-poster{border-radius:12px}
}
@media (max-width:720px){
  .filmsgrid.mini{grid-template-columns:repeat(2,minmax(0,1fr))}
  .film-top{grid-template-columns:minmax(0,1fr)}
  .film-poster{max-width:180px}
}

/* 影视工具栏在亮壁纸上也要看得清 */
.films-toolbar .chip{background:rgba(8,12,17,.55);backdrop-filter:blur(8px)}
.films-toolbar .chip.on{background:color-mix(in srgb,var(--accent) 82%,transparent);color:var(--accent-ink)}
.fsearch{background:rgba(8,12,17,.55);backdrop-filter:blur(8px)}
.fhint{margin:8px 0 0;font-size:12.5px;color:var(--ink-soft)}

/* ---- 影视：四种布局 ---- */
.filmsgrid[data-fl]{align-items:start}

/* 瀑布流：多列流式，封面比例轮换制造高低错落 */
.filmsgrid[data-fl="waterfall"]{display:block;columns:5 168px;column-gap:18px}
.filmsgrid[data-fl="waterfall"] .fcard{break-inside:avoid;margin:0 0 18px;display:inline-block;width:100%}
.filmsgrid[data-fl="waterfall"] .fposter{aspect-ratio:auto}
.filmsgrid[data-fl="waterfall"] .fcard:nth-child(5n+1) .fposter{height:300px}
.filmsgrid[data-fl="waterfall"] .fcard:nth-child(5n+2) .fposter{height:250px}
.filmsgrid[data-fl="waterfall"] .fcard:nth-child(5n+3) .fposter{height:330px}
.filmsgrid[data-fl="waterfall"] .fcard:nth-child(5n+4) .fposter{height:270px}
.filmsgrid[data-fl="waterfall"] .fcard:nth-child(5n) .fposter{height:310px}
.filmsgrid[data-fl="waterfall"] .fcard:nth-child(5n) .fposter{height:310px}

/* 列表：一行一部，海报小、信息横排 */
.filmsgrid[data-fl="list"]{display:flex;flex-direction:column;gap:8px}
.filmsgrid[data-fl="list"] .fcard{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;
  padding:9px 14px;border:1px solid var(--border);border-radius:14px;
  background:rgba(8,12,17,.5);backdrop-filter:blur(8px)}
.filmsgrid[data-fl="list"] .fcard:hover{transform:none;background:rgba(16,22,31,.78)}
.filmsgrid[data-fl="list"] .fposter{aspect-ratio:2/3;width:52px;border-radius:8px}
.filmsgrid[data-fl="list"] .fstat{display:none}
.filmsgrid[data-fl="list"] .frating{position:static;justify-self:end;font-size:12px;color:var(--ink-soft)}
.filmsgrid[data-fl="list"] .fmeta{padding:0;display:flex;flex-direction:column;gap:3px;min-width:0}
.filmsgrid[data-fl="list"] .fmeta h3{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filmsgrid[data-fl="list"] .fmeta p{font-size:12px}

/* 紧凑：小封面铺满，只看图，标题悬停显示 */
.filmsgrid[data-fl="compact"]{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px}
.filmsgrid[data-fl="compact"] .fposter{border-radius:10px}
.filmsgrid[data-fl="compact"] .fmeta{display:none}
.filmsgrid[data-fl="compact"] .fstat{font-size:10px;padding:4px 6px;left:6px;top:6px}
.filmsgrid[data-fl="compact"] .frating{font-size:11px;right:6px;bottom:6px}

@media (max-width:860px){
  .filmsgrid[data-fl="waterfall"]{columns:3 140px;column-gap:14px}
  .filmsgrid[data-fl="waterfall"] .fcard{margin-bottom:14px}
  .filmsgrid[data-fl="compact"]{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
}
@media (max-width:720px){
  .filmsgrid[data-fl="waterfall"]{columns:2 140px}
  .filmsgrid[data-fl="list"] .fcard{grid-template-columns:44px 1fr auto;gap:10px;padding:8px 10px}
  .filmsgrid[data-fl="list"] .fposter{width:44px}
}

/* 布局切换器在亮壁纸上要有个底 */
.films-tools .seg{background:rgba(8,12,17,.55);backdrop-filter:blur(8px);border:1px solid var(--border);padding:4px;border-radius:999px}
.films-tools .seg .seg-btn{background:transparent}
/* 列表布局要占满宽度（父级 align-items:start 会让它缩成内容宽） */
.filmsgrid[data-fl="list"]{align-items:stretch}

/* 列表布局右侧的来源标签 */
.ftagline{display:none}
.filmsgrid[data-fl="list"] .ftagline{display:block;justify-self:end;font-size:12px;color:var(--ink-soft);text-align:right;max-width:40%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filmsgrid[data-fl="list"] .fcard{grid-template-columns:46px 1fr auto;padding:8px 12px}
.filmsgrid[data-fl="list"] .fposter{width:46px}

/* 影视页工具条在亮壁纸下要更实 */
.films-toolbar .chip{background:rgba(10,14,20,.7)}
.films-toolbar .chip.on{background:color-mix(in srgb,var(--accent) 88%,transparent);border-color:transparent}
.films-tools .seg{background:rgba(10,14,20,.7)}

/* 窄屏：导航 7 项时品牌名不要折行 */
.brand .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:720px){
  .brand{flex:0 1 auto;min-width:0;max-width:40%}
  .brand .name{font-size:14px}
  .nav-links{gap:4px}
}

/* 窄屏：工具条纵向排列，布局切换四等分 */
@media (max-width:720px){
  .brand .name{display:none}
  .films-tools{flex-direction:column;align-items:stretch;gap:8px}
  .films-tools .seg{display:flex;width:100%}
  .films-tools .seg .seg-btn{flex:1 1 0;text-align:center;justify-content:center}
  .films-tools .fsearch{width:100%}
}

/* 窄屏：布局切换退化成 chip 行，避免 seg 被挤压 */
@media (max-width:720px){
  .films-tools .seg{display:flex;flex-wrap:wrap;width:100%;gap:6px;background:transparent;border:0;padding:0;backdrop-filter:none}
  .films-tools .seg .seg-btn{flex:0 0 auto;background:rgba(10,14,20,.7);border:1px solid var(--border);border-radius:999px;padding:7px 14px}
  .films-tools .seg .seg-btn.on{background:color-mix(in srgb,var(--accent) 88%,transparent);border-color:transparent;color:var(--accent-ink,#191424)}
}

/* 修正：上面的 .films-tools .seg .seg-btn 透明度规则盖掉了选中态 */
.films-tools .seg .seg-btn.on{background:var(--accent);color:var(--accent-ink);border-color:transparent}

/* ---------- 每日运势 ---------- */
.fortune{max-width:var(--max-w);margin:0 auto;padding:24px 20px 60px;display:grid;gap:18px}
.f-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:center;
  border:1px solid var(--border);border-radius:calc(var(--radius) + 8px);overflow:hidden;
  background:var(--f-bg, radial-gradient(120% 90% at 20% 10%, #1d3b34 0%, #0d1418 60%));
  padding:34px 36px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.f-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.42));pointer-events:none}
.f-hero-text{position:relative;z-index:1}
.f-kicker{font-family:var(--font-display);font-size:11px;letter-spacing:.22em;color:rgba(180,235,215,.85);margin:0 0 14px}
.f-hero h1{font-family:var(--font-display);font-size:clamp(30px,4.4vw,46px);line-height:1.18;margin:0 0 14px;color:#fff}
.f-desc{margin:0 0 22px;color:rgba(240,246,250,.82);font-size:14.5px;line-height:1.85;max-width:46ch}
.f-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.f-note{font-size:11.5px;line-height:1.6;color:rgba(226,236,242,.62)}
.f-hero-art{position:relative;z-index:1;justify-self:end;width:280px;height:280px;border-radius:24px;overflow:hidden;
  background:rgba(255,255,255,.06);box-shadow:0 18px 46px rgba(0,0,0,.4)}
.f-hero-art img{width:100%;height:100%;object-fit:cover;display:block}

.f-card{border:1px solid var(--border);border-radius:calc(var(--radius) + 6px);background:var(--glass);
  backdrop-filter:blur(var(--glass-blur));padding:22px 26px 20px;display:grid;gap:12px}
.f-card.shake{animation:fshake .5s ease}
@keyframes fshake{0%{transform:translateX(0)}20%{transform:translateX(-6px) rotate(-.4deg)}40%{transform:translateX(5px) rotate(.4deg)}60%{transform:translateX(-3px)}100%{transform:translateX(0)}}
.f-card-top{display:flex;align-items:baseline;gap:12px}
.f-date{font-family:var(--font-display);font-size:15px;color:var(--ink);letter-spacing:.04em}
.f-week{font-size:12px;color:var(--ink-soft)}
.f-level{margin-left:auto;font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--accent);
  text-shadow:0 0 22px color-mix(in srgb,var(--accent) 45%,transparent)}
.f-luck{display:flex;align-items:center;gap:10px}
.f-luck-num{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--ink)}
.f-luck-label{font-size:10.5px;letter-spacing:.18em;color:var(--ink-soft)}
.f-bar{flex:1;height:10px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.f-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent2),var(--accent))}
.f-copy{margin:2px 0 0;font-size:14.5px;line-height:1.9;color:var(--ink)}
.f-line{margin:0;font-size:12.5px;color:var(--ink-soft)}
.f-yiji{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.f-yiji span{font-size:12px;padding:5px 11px;border-radius:999px;border:1px solid var(--border)}
.f-yiji .ok{color:#9fe3c6;border-color:rgba(159,227,198,.34)}
.f-yiji .no{color:#f2b8b8;border-color:rgba(242,184,184,.34)}
.f-switch{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;padding-top:12px;border-top:1px dashed var(--border)}
.f-switch>span:first-child,.f-switch .sep{font-size:11.5px;color:var(--ink-soft);margin-right:2px}
.f-switch .sep{margin-left:12px}
.fchip{border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--ink-soft);
  border-radius:999px;padding:5px 12px;font-size:12px;cursor:pointer;transition:.16s}
.fchip:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.fchip.on{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600}

@media (max-width:860px){
  .f-hero{grid-template-columns:1fr;padding:24px 20px}
  .f-hero-art{justify-self:start;width:180px;height:180px;border-radius:18px}
  .f-card{padding:18px 18px 16px}
  .f-level{font-size:24px}
}

/* 运势页：大背景与人物立绘支持动态 */
.f-hero-art{animation:fFloat 9s ease-in-out infinite alternate}
@keyframes fFloat{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.f-hero-art img,.f-hero-art video{width:100%;height:100%;object-fit:cover;display:block}
.f-char-video{border-radius:24px}
body[data-wall="video"] .bg .wall-video{filter:blur(var(--wallpaper-blur,0px))}
@media (prefers-reduced-motion:reduce){
  .f-hero-art{animation:none}
}

/* ---------- 投稿 ---------- */
.submit{max-width:var(--max-w);margin:0 auto;padding:26px 20px 70px;display:grid;gap:20px}
.sub-head{padding:6px 2px 0}
.sub-head .kicker{margin:0 0 8px}
.sub-head h1{font-family:var(--font-display);font-size:clamp(30px,4vw,44px);margin:0 0 12px;line-height:1.2}
.sub-lede{margin:0;max-width:60ch;color:var(--ink-soft);font-size:14.5px;line-height:1.9}
.sub-card{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.sub-form{border:1px solid var(--border);border-radius:calc(var(--radius) + 6px);background:var(--glass);
  backdrop-filter:blur(var(--glass-blur));padding:22px 24px;display:grid;gap:12px}
.sub-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sub-form .f{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink-soft)}
.sub-form input,.sub-form select,.sub-form textarea{
  width:100%;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;color:var(--ink);font-size:14px;font-family:inherit
}
.sub-form textarea{resize:vertical;line-height:1.8}
.sub-form input:focus,.sub-form select:focus,.sub-form textarea:focus{
  outline:none;border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:rgba(255,255,255,.08)
}
.sub-note{margin:0;font-size:11.5px;color:var(--ink-soft);line-height:1.7}
.sub-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.sub-tip{font-size:11.5px;color:var(--ink-soft)}
.sub-tip.warn{color:#f2b8b8}
.sub-side{border:1px solid var(--border);border-radius:calc(var(--radius) + 6px);background:rgba(8,12,17,.42);
  backdrop-filter:blur(10px);padding:20px 20px 18px}
.sub-side h3{margin:0 0 12px;font-size:14px}
.sub-chs{display:grid;gap:8px}
.sub-ch{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--border);
  border-radius:12px;background:rgba(255,255,255,.04);transition:.16s}
a.sub-ch:hover{background:rgba(255,255,255,.09);transform:translateY(-1px)}
.sub-ch b{font-size:13px;font-weight:600}
.sub-ch i{font-style:normal;font-size:11.5px;color:var(--ink-soft)}
.sub-mini{margin:12px 0 0;font-size:11.5px;line-height:1.75;color:var(--ink-soft)}
@media (max-width:860px){
  .sub-card{grid-template-columns:1fr}
  .sub-grid{grid-template-columns:1fr}
}

/* 投稿附件 */
.sub-attach{display:flex;flex-direction:column;gap:8px}
.sub-attach-head{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-soft)}
.sub-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.sub-files:empty{display:none}
.sub-file{margin:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.04)}
.sub-file img,.sub-file video{display:block;width:100%;height:76px;object-fit:cover;background:#0b0f14}
.sub-file figcaption{display:flex;align-items:center;gap:6px;padding:6px 8px;font-size:10.5px;color:var(--ink-soft)}
.sub-file figcaption span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.sub-file figcaption button{background:none;border:0;color:var(--ink-soft);cursor:pointer;font-size:14px;line-height:1;padding:0 2px}
.sub-file figcaption button:hover{color:#f2b8b8}