/* ============================================================
   Quentin · 玻璃拟态卡片墙  v4
   ------------------------------------------------------------
   层级：
     0  背景舞台（图片 / 视频 / 渐变 / 粒子）
     1  内容
     2  浮层（设置抽屉 / 歌词全屏 / 播放条 / 命令面板）
   设计变量集中在 :root，笔记页 / 后台复用同一套 token。
   ============================================================ */

/* ---------- 1. token ---------- */
:root{
  color-scheme: dark;
  --bg:#05070d;
  --bg2:#0b1120;
  --fg:#eaf0fc;
  --mut:#94a0b8;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --card:rgba(16,22,36,.52);
  --card2:rgba(16,22,36,.72);
  --card-2:rgba(16,22,36,.72);
  --glass:rgba(14,19,32,.46);
  --cyan:#5eead4;
  --violet:#8b5cf6;
  --pink:#f472b6;
  --amber:#fbbf24;
  --sky:#38bdf8;
  --blue:#38bdf8;
  --grad:linear-gradient(120deg,var(--cyan),var(--blue) 45%,var(--violet));
  --ring:0 0 0 3px rgba(94,234,212,.18);
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --shadow-sm:0 8px 24px rgba(0,0,0,.28);
  --r:18px;
  --r-lg:24px;
  --r-md:18px;
  --r-sm:12px;
  --max:1320px;
  --nav-h:64px;
  --blur:16px;
  --dim:.34;
  --sat:1;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
}
[data-theme="light"]{
  color-scheme: light;
  --bg:#e9eef8;
  --bg2:#dfe6f4;
  --fg:#101827;
  --mut:#5a657a;
  --line:rgba(16,24,39,.12);
  --line-2:rgba(16,24,39,.22);
  --card:rgba(255,255,255,.62);
  --card2:rgba(255,255,255,.82);
  --card-2:rgba(255,255,255,.82);
  --glass:rgba(255,255,255,.55);
  --shadow:0 18px 44px rgba(21,40,80,.16);
  --shadow-sm:0 8px 20px rgba(21,40,80,.12);
}

/* ---------- 2. 基础 ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{min-height:100%}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:15px;
  line-height:1.6;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
::selection{background:rgba(94,234,212,.28)}
.mut{color:var(--mut)}
.mono{font-family:var(--mono)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}

/* 滚动条 */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3);background-clip:content-box}

/* ---------- 3. 背景舞台 ---------- */
#bg-stage{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:var(--bg);
  pointer-events:none;
}
#bg-stage .bg-layer{
  position:absolute;
  inset:-6%;
  opacity:0;
  transition:opacity .8s ease;
  will-change:opacity;
}
#bg-stage .bg-layer.on{opacity:1}
#bg-stage .bg-layer img,
#bg-stage .bg-layer video{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:blur(var(--blur)) saturate(var(--sat));
  transform:scale(1.06);
}
#bg-stage.mode-image .bg-layer img{filter:blur(calc(var(--blur) * .35)) saturate(var(--sat))}
#bg-stage.mode-video .bg-layer video{filter:blur(calc(var(--blur) * .2)) saturate(var(--sat))}
#bg-stage .bg-veil{
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(5,7,13,0) 0%,rgba(5,7,13,calc(var(--dim) + .12)) 100%),
    linear-gradient(180deg,rgba(5,7,13,calc(var(--dim) * .5)) 0%,rgba(5,7,13,calc(var(--dim) * .78)) 100%);
}
[data-theme="light"] #bg-stage .bg-veil{
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(233,238,248,0) 0%,rgba(233,238,248,calc(var(--dim) + .18)) 100%),
    linear-gradient(180deg,rgba(233,238,248,calc(var(--dim) * .55)) 0%,rgba(233,238,248,calc(var(--dim) * .8)) 100%);
}
#bg-stage .bg-noise{
  position:absolute;inset:0;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
#bg-stage .bg-grid{
  position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 60% at 50% 40%,#000 0%,transparent 100%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 0%,transparent 100%);
}
#bg-stage .bg-glow{
  position:absolute;inset:0;
  background:
    radial-gradient(38% 38% at 18% 22%,rgba(94,234,212,.16),transparent 70%),
    radial-gradient(42% 42% at 82% 18%,rgba(139,92,246,.18),transparent 70%),
    radial-gradient(50% 40% at 60% 88%,rgba(56,189,248,.12),transparent 70%);
  transition:opacity .6s;
}
#bg-particles{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
#bg-stage.lyric-mode .bg-glow{opacity:.3}
#bg-stage.lyric-mode .bg-grid{opacity:.06}

/* 无图时的默认渐变 */
#bg-stage .bg-base{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 50% at 20% 15%,#123b47 0%,transparent 60%),
    radial-gradient(55% 45% at 80% 20%,#2a1b4d 0%,transparent 62%),
    radial-gradient(70% 60% at 50% 95%,#0b2540 0%,transparent 65%),
    linear-gradient(160deg,#05070d 0%,#0a1020 45%,#060b16 100%);
  transition:background .6s;
}
[data-theme="light"] #bg-stage .bg-base{
  background:
    radial-gradient(60% 50% at 20% 15%,#bfe9f2 0%,transparent 60%),
    radial-gradient(55% 45% at 80% 20%,#d9ccf6 0%,transparent 62%),
    radial-gradient(70% 60% at 50% 95%,#c6ddf7 0%,transparent 65%),
    linear-gradient(160deg,#eef3fb 0%,#e3ebf7 45%,#e9eef8 100%);
}

/* ---------- 4. 导航 ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:60;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 clamp(14px,3vw,32px);
  background:linear-gradient(180deg,rgba(5,7,13,.55),rgba(5,7,13,0));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
[data-theme="light"] .nav{background:linear-gradient(180deg,rgba(233,238,248,.7),rgba(233,238,248,0))}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
.brand .dot,.brand-text .dot{color:var(--cyan)}
.logo{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;
  background:linear-gradient(140deg,rgba(94,234,212,.16),rgba(139,92,246,.18));
  border:1px solid var(--line);}
.links{display:flex;align-items:center;gap:4px;margin-left:auto}
.links a{
  padding:7px 12px;border-radius:999px;font-size:13.5px;color:var(--mut);
  transition:color .2s,background .2s;
}
.links a:hover,.links a.on,.links a.active{color:var(--fg);background:rgba(255,255,255,.07)}
.tools{display:flex;align-items:center;gap:6px}
.nav.sub .links{margin-left:auto}
.nav.sub .tools{margin-left:0}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;min-width:34px;padding:0 10px;border-radius:11px;
  border:1px solid var(--line);background:var(--glass);
  color:var(--fg);font-size:13px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .2s,background .2s,transform .2s;
}
.icon-btn:hover{border-color:var(--line-2);background:rgba(255,255,255,.1);transform:translateY(-1px)}
.burger{display:none}

/* ---------- 5. 通用控件 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:12px;
  border:1px solid var(--line-2);
  background:var(--glass);
  font-size:13.5px;font-weight:600;letter-spacing:.2px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .18s,border-color .18s,background .18s,box-shadow .18s;
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(94,234,212,.55)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.primary{
  border-color:transparent;
  background:linear-gradient(135deg,rgba(94,234,212,.95),rgba(139,92,246,.95));
  color:#04121a;
  box-shadow:0 10px 26px rgba(94,234,212,.22);
}
.btn.primary:hover{box-shadow:0 14px 32px rgba(94,234,212,.3)}
.btn.ghost{background:transparent}
.input{
  width:100%;padding:10px 12px;border-radius:11px;
  border:1px solid var(--line);background:var(--card2);color:var(--fg);
  outline:none;font-size:13.5px;
}
.input:focus{border-color:var(--cyan);box-shadow:var(--ring)}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;font-size:12px;
  border:1px solid var(--line);color:var(--mut);background:rgba(255,255,255,.04);
}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 6. 首页骨架 ---------- */
.home{
  position:relative;
  z-index:1;
  max-width:var(--max);
  margin:0 auto;
  padding:6px clamp(14px,3vw,30px) 130px;
  display:grid;
  gap:18px;
  grid-template-columns:300px minmax(0,1fr);
  grid-template-areas:
    "side head"
    "side wall";
  align-items:start;
}
.home-side{grid-area:side;display:grid;gap:16px;position:sticky;top:calc(var(--nav-h) + 8px)}
.home-head{grid-area:head;display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 246px}
.home-wall{grid-area:wall;display:grid;gap:16px}

/* 玻璃卡 */
.glass{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--card);
  backdrop-filter:blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(140%);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,0) 38%);
  opacity:.7;
}
.pad{padding:16px 18px}
.hoverable{transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s,box-shadow .28s}
.hoverable:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow)}

/* 头卡 */
.hero-card{
  padding:22px clamp(18px,2.4vw,30px);
  display:grid;
  gap:14px;
  align-content:center;
  min-height:190px;
}
.hero-card .quote-line{
  font-size:clamp(17px,2.1vw,24px);
  font-weight:700;
  line-height:1.5;
  letter-spacing:.3px;
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.55),0 0 40px rgba(94,234,212,.25);
  transition:opacity .3s;
}
[data-theme="light"] .hero-card .quote-line{color:#0d1522;text-shadow:0 2px 16px rgba(255,255,255,.7)}
.hero-card .quote-sub{font-size:13px;color:var(--mut);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.quote-actions{display:flex;gap:8px;flex-wrap:wrap}

/* 逐字出现（旧版那个打字机的感觉） */
.quote-line .ch{
  display:inline-block;
  white-space:pre;
  opacity:1;
  animation:chIn .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes chIn{
  from{opacity:0;transform:translateY(10px);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.q-caret{
  display:inline-block;width:2px;height:1em;margin-left:3px;
  vertical-align:-.12em;background:var(--cyan);
  box-shadow:0 0 10px rgba(94,234,212,.7);
  animation:blink 1s steps(1) infinite;
}
.typed-line{
  font-family:var(--mono);
  color:var(--cyan);
  font-size:13.5px;
  line-height:1.6;
  margin:0;
  min-height:22px;
  display:flex;
  align-items:center;
  gap:8px;
}
.typed-line .prompt{color:var(--violet);flex:none}
.typed-line .caret{
  display:inline-block;width:8px;height:1.05em;flex:none;
  background:var(--cyan);animation:blink 1s steps(2) infinite;
}

/* 时钟卡 */
.clock-card{padding:16px;display:grid;gap:8px;justify-items:center;text-align:center;min-height:190px;align-content:center}
.clock-time{font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:1px;line-height:1}
.clock-time .sep{opacity:.45;animation:blink 2s steps(1) infinite}
@keyframes blink{50%{opacity:.12}}
.clock-date{font-size:11.5px;color:var(--mut);letter-spacing:.4px}
.clock-ring{position:relative;width:74px;height:74px;margin-top:4px;display:grid;place-items:center}
.clock-ring::before,.clock-ring::after{content:"";position:absolute;border-radius:50%}
.clock-ring::before{
  inset:0;
  background:conic-gradient(from 0deg,rgba(94,234,212,0),rgba(94,234,212,.85),rgba(56,189,248,.25),rgba(94,234,212,0));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  animation:spin 6s linear infinite;
}
.clock-ring::after{
  inset:12px;
  border:1px solid rgba(94,234,212,.35);
  box-shadow:inset 0 0 18px rgba(94,234,212,.25);
  animation:spin 9s linear infinite reverse;
}
.clock-ring i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
@keyframes spin{to{transform:rotate(1turn)}}

/* 头像卡 */
.avatar-card{padding:18px;display:grid;gap:14px;justify-items:center;text-align:center}
.avatar{
  width:104px;height:104px;border-radius:50%;
  padding:3px;
  background:conic-gradient(from 210deg,var(--cyan),var(--violet),var(--pink),var(--cyan));
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.avatar > *{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--bg2);display:grid;place-items:center;font-size:28px;font-weight:700;color:var(--fg)}
.avatar-card h1{font-size:19px;margin:0;letter-spacing:.3px}
.avatar-card .role{font-size:12px;color:var(--mut);margin:0}
.avatar-card .socials{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.soc{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--mut);
  transition:color .18s,border-color .18s,transform .18s,background .18s;
  cursor:pointer;
}
span.soc{cursor:default;opacity:.5}
span.soc:hover{transform:none;border-color:var(--line);background:rgba(255,255,255,.05);color:var(--mut)}
.soc:hover{color:var(--fg);border-color:var(--line-2);background:rgba(255,255,255,.12);transform:translateY(-2px)}
.soc svg{width:17px;height:17px}

/* Tags 卡 + 饼图 */
.tags-card{padding:16px 16px 18px}
.tags-card h2{font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--mut);margin:0 0 12px}
.tag-cloud{display:flex;flex-wrap:wrap;gap:7px}
.tag-cloud span{
  font-size:12px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line);color:var(--fg);
  background:linear-gradient(140deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  transition:transform .18s,border-color .18s;
}
.tag-cloud span:hover{transform:translateY(-2px);border-color:rgba(94,234,212,.5)}
.pie-wrap{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:center;margin-top:16px}
.pie-wrap canvas{width:104px;height:104px}
.pie-legend{display:grid;gap:6px;font-size:11.5px;color:var(--mut)}
.pie-legend div{display:flex;align-items:center;gap:7px}
.pie-legend i{width:8px;height:8px;border-radius:3px;flex:none}
.pie-legend b{color:var(--fg);font-weight:600;margin-left:auto;font-family:var(--mono);font-size:11px}

/* 状态卡 */
.status-card{padding:14px 16px;display:grid;gap:8px}
.status-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mut)}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 2.4s ease-in-out infinite;flex:none}
@keyframes pulse{50%{opacity:.35;transform:scale(.85)}}

/* ---------- 7. 卡片墙 ---------- */
.wall{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.wall.w2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wall.w4{grid-template-columns:repeat(4,minmax(0,1fr))}
.wall.w4 .pcard:nth-child(1),
.wall.w4 .pcard:nth-child(2){grid-column:span 2}

/* 分块标题 */
.block{display:grid;gap:14px}
.block + .block{margin-top:10px}
.block-head{display:flex;align-items:baseline;gap:12px}
.block-head h2{
  font-size:15px;margin:0;letter-spacing:.4px;
  display:flex;align-items:center;gap:9px;
}
.block-head h2::before{
  content:"";width:4px;height:16px;border-radius:3px;
  background:linear-gradient(180deg,var(--cyan),var(--violet));
}
.block-head .mut{font-size:12px}
.block-more{margin-left:auto;font-size:12.5px;color:var(--mut);transition:color .18s}
.block-more:hover{color:var(--cyan)}

/* 项目笔记卡片 */
.notes-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.note-card{
  display:grid;gap:7px;align-content:start;
  padding:16px 16px 18px;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:var(--card);
  backdrop-filter:blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(140%);
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.note-card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.nc-date{font-family:var(--mono);font-size:11px;color:var(--mut)}
.nc-title{font-size:14.5px;font-weight:600;line-height:1.45}
.nc-sum{font-size:12.5px;color:var(--mut);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nc-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.nc-tags span{font-size:11px;color:var(--cyan);opacity:.85}
.notes-empty{
  grid-column:1/-1;padding:22px;text-align:center;font-size:13px;color:var(--mut);
  border:1px dashed var(--line);border-radius:var(--r-md);
}
.pcard{
  position:relative;
  display:flex;flex-direction:column;
  min-height:196px;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--card);
  backdrop-filter:blur(calc(var(--blur) + 4px)) saturate(140%);
  -webkit-backdrop-filter:blur(calc(var(--blur) + 4px)) saturate(140%);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s,box-shadow .28s;
}
.pcard:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow)}
.pcard-cover{
  position:relative;height:104px;flex:none;
  background:linear-gradient(135deg,#101a2c,#1b2740);
  overflow:hidden;
}
.pcard-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pcard:hover .pcard-cover img{transform:scale(1.05)}
.pcard-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,13,0) 30%,rgba(9,13,22,.85) 100%)}
.pcard-cover::before{
  content:"";position:absolute;right:-34px;top:-58px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,rgba(255,255,255,.30),rgba(255,255,255,.07) 52%,transparent 72%);
  filter:blur(3px);opacity:.5;
  transition:transform .6s ease;
}
.pcard:hover .pcard-cover::before{transform:translate(-8px,10px) scale(1.08)}
.cover-1{background:
  radial-gradient(90% 70% at 12% 6%,rgba(45,212,191,.30),transparent 62%),
  radial-gradient(80% 70% at 88% 16%,rgba(14,165,233,.28),transparent 64%),
  linear-gradient(135deg,#061e26 0%,#0b2c3a 48%,#0a1520 100%)}
.cover-2{background:
  radial-gradient(90% 70% at 18% 4%,rgba(168,85,247,.34),transparent 62%),
  radial-gradient(80% 70% at 84% 22%,rgba(244,114,182,.26),transparent 64%),
  linear-gradient(135deg,#1a0f26 0%,#33174a 48%,#120f22 100%)}
.cover-3{background:
  radial-gradient(90% 70% at 16% 6%,rgba(52,211,153,.30),transparent 62%),
  radial-gradient(80% 70% at 86% 20%,rgba(14,116,144,.32),transparent 64%),
  linear-gradient(135deg,#0a1f19 0%,#14402f 48%,#0a1a1c 100%)}
.cover-4{background:
  radial-gradient(90% 70% at 14% 8%,rgba(251,113,133,.30),transparent 62%),
  radial-gradient(80% 70% at 86% 18%,rgba(251,191,36,.22),transparent 64%),
  linear-gradient(135deg,#2a1420 0%,#4d2230 48%,#180f16 100%)}
.cover-5{background:
  radial-gradient(90% 70% at 16% 6%,rgba(96,165,250,.32),transparent 62%),
  radial-gradient(80% 70% at 84% 20%,rgba(139,92,246,.30),transparent 64%),
  linear-gradient(135deg,#0e1630 0%,#22305e 48%,#0d1224 100%)}
.cover-6{background:
  radial-gradient(90% 70% at 16% 6%,rgba(251,191,36,.30),transparent 62%),
  radial-gradient(80% 70% at 86% 20%,rgba(217,119,6,.30),transparent 64%),
  linear-gradient(135deg,#2a1e0d 0%,#4a3614 48%,#191410 100%)}
.cover-7{background:
  radial-gradient(90% 70% at 14% 6%,rgba(56,189,248,.30),transparent 62%),
  radial-gradient(80% 70% at 86% 22%,rgba(94,234,212,.26),transparent 64%),
  linear-gradient(135deg,#08202c 0%,#124459 48%,#08161f 100%)}
.cover-8{background:
  radial-gradient(90% 70% at 16% 6%,rgba(139,92,246,.32),transparent 62%),
  radial-gradient(80% 70% at 84% 20%,rgba(236,72,153,.22),transparent 64%),
  linear-gradient(135deg,#161029 0%,#2c2154 48%,#100e1e 100%)}
/* 斜线纹理走覆盖层，避免覆盖掉每张卡的渐变 */
.pcard-cover > .tex{
  position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 10px);
  mix-blend-mode:overlay;opacity:.55;
}
.pcard-badge{
  position:absolute;left:12px;top:12px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:999px;font-size:11px;
  background:rgba(8,12,20,.55);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);color:#fff;
}
.pcard-body{padding:12px 14px 14px;display:grid;gap:6px;align-content:start;flex:1}
.pcard h3{font-size:15px;margin:0;letter-spacing:.2px}
.pcard p{margin:0;font-size:12.5px;line-height:1.55;color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px}
.pcard-foot .go{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;padding:6px 11px;border-radius:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--fg);
  transition:background .18s,border-color .18s;
}
.pcard-foot .go:hover{background:rgba(94,234,212,.16);border-color:rgba(94,234,212,.5)}
.pcard-foot .more{
  margin-left:auto;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--mut);transition:transform .2s,border-color .2s;
}
.pcard-foot .more[aria-expanded="true"]{transform:rotate(180deg);border-color:var(--line-2)}
.pcard-detail{
  display:none;margin:0 14px;padding:10px 0 14px;font-size:12.5px;color:var(--mut);
  border-top:1px dashed var(--line);
}
.pcard-detail.open{display:block}
.pcard-detail ul{margin:0;padding-left:16px;display:grid;gap:5px}
.pcard-detail code{font-family:var(--mono);font-size:11.5px;color:var(--cyan);background:rgba(94,234,212,.1);padding:1px 5px;border-radius:5px}

/* ---------- 8. 内页 ---------- */
.page{
  position:relative;z-index:1;
  max-width:1080px;margin:0 auto;
  padding:14px clamp(14px,3vw,28px) 120px;
}
.page-head{display:grid;gap:8px;margin:8px 0 20px}
.page-head h1{font-size:clamp(24px,3.4vw,34px);margin:0;letter-spacing:.4px}
.page-head p{margin:0;color:var(--mut);font-size:14px}
.prose{font-size:14.8px;line-height:1.85}
.prose h2{font-size:19px;margin:1.6em 0 .6em}
.prose h3{font-size:16px;margin:1.4em 0 .5em}
.prose p{margin:.8em 0;color:var(--fg)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.3em 0}
.prose a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.prose code{font-family:var(--mono);font-size:.88em;background:rgba(255,255,255,.08);padding:2px 6px;border-radius:6px;color:#9be7ff}
.prose pre{background:rgba(4,8,14,.7);border:1px solid var(--line);border-radius:14px;padding:14px;overflow:auto}
.prose pre code{background:none;padding:0}
.prose blockquote{margin:1em 0;padding:.6em 1em;border-left:3px solid var(--cyan);background:rgba(94,234,212,.07);border-radius:0 12px 12px 0;color:var(--mut)}

/* Markdown 里的自定义块：提示框 / 折叠 / 任务清单（笔记页与后台预览共用） */
.md .callout{border-radius:12px;padding:10px 14px;margin:1em 0;border:1px solid var(--line);border-left:3px solid var(--cyan);background:rgba(255,255,255,.04)}
.md .callout-t{font-weight:700;font-size:13px;margin-bottom:4px;display:flex;gap:6px;align-items:center}
.md .callout-b > :first-child{margin-top:0}
.md .callout-b > :last-child{margin-bottom:0}
.md .callout.info{border-left-color:#38bdf8;background:rgba(56,189,248,.07)}
.md .callout.tip{border-left-color:#a78bfa;background:rgba(167,139,250,.08)}
.md .callout.warn{border-left-color:#fbbf24;background:rgba(251,191,36,.08)}
.md .callout.danger{border-left-color:#f87171;background:rgba(248,113,113,.09)}
.md .md-details{border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:1em 0;background:rgba(255,255,255,.03)}
.md .md-details summary{cursor:pointer;font-weight:600;font-size:13.5px;list-style:none}
.md .md-details summary::-webkit-details-marker{display:none}
.md .md-details summary::before{content:"▸ ";color:var(--mut)}
.md .md-details[open] summary::before{content:"▾ "}
.md .md-details-body{padding-top:8px}
.md ul li.task{list-style:none;margin-left:-1.1em;display:flex;gap:8px;align-items:flex-start}
.md ul li.task .tick{width:15px;height:15px;border-radius:4px;border:1px solid var(--line-2);flex:none;margin-top:3px;display:grid;place-items:center;font-size:10px;color:#04121a}
.md ul li.task.done .tick{background:var(--cyan);border-color:var(--cyan)}
.md ul li.task.done{color:var(--mut);text-decoration:line-through}
.md mark{background:rgba(251,191,36,.30);color:inherit;padding:0 3px;border-radius:4px}
.md del{opacity:.6}
.prose table{border-collapse:collapse;width:100%;font-size:13.5px;margin:1em 0}
.prose th,.prose td{border:1px solid var(--line);padding:8px 12px;text-align:left}
.prose th{background:rgba(255,255,255,.04)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.metric{border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-align:center;background:var(--card)}
.metric b{display:block;font-size:19px;color:var(--cyan);font-family:var(--mono)}
.metric span{font-size:11.5px;color:var(--mut)}

/* ---------- 9. 设置抽屉 ---------- */
.drawer-mask{
  position:fixed;inset:0;z-index:90;background:rgba(3,5,10,.5);
  backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .28s;
}
.drawer-mask.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:91;
  width:min(380px,92vw);
  padding:18px 18px 24px;
  background:rgba(9,13,22,.86);
  border-left:1px solid var(--line);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:-24px 0 60px rgba(0,0,0,.45);
  transform:translateX(102%);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
  overflow:auto;
}
[data-theme="light"] .drawer{background:rgba(245,248,254,.9)}
.drawer.on{transform:none}
.drawer-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.drawer-head h2{font-size:16px;margin:0}
.drawer-head .x{margin-left:auto;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;color:var(--mut)}
.drawer section{margin-bottom:20px}
.drawer h3{font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--mut);margin:0 0 10px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg.two{grid-template-columns:repeat(2,1fr)}
.seg button{
  padding:8px 6px;border-radius:10px;border:1px solid var(--line);
  font-size:12px;color:var(--mut);background:rgba(255,255,255,.03);
  transition:all .18s;
}
.seg button.on{color:#04121a;background:linear-gradient(135deg,rgba(94,234,212,.95),rgba(139,92,246,.9));border-color:transparent;font-weight:600}
[data-theme="light"] .seg button.on{color:#062029}
.field{display:grid;gap:6px;margin-bottom:12px}
.field label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mut)}
.field label b{color:var(--fg);font-family:var(--mono);font-weight:500;font-size:11.5px}
.field input[type="range"]{
  -webkit-appearance:none;appearance:none;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));outline:none;
}
.field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid rgba(94,234,212,.9);box-shadow:0 2px 8px rgba(0,0,0,.4);cursor:pointer;
}
.field input[type="range"]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--cyan);cursor:pointer}
.drawer .row{display:flex;gap:8px;flex-wrap:wrap}
.drawer .hint{font-size:11.5px;color:var(--mut);line-height:1.6}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches button{width:30px;height:30px;border-radius:9px;border:1px solid var(--line-2);cursor:pointer}
.swatches button.on{box-shadow:0 0 0 2px var(--cyan)}

/* ---------- 10. 播放条 + 歌词 ---------- */
.player{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%) translateY(8px);
  z-index:70;
  width:min(620px,calc(100vw - 24px));
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:12px;
  padding:9px 12px;
  border-radius:16px;
  background:rgba(9,13,22,.62);
  border:1px solid var(--line);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:var(--shadow);
  opacity:0;visibility:hidden;
  transition:opacity .3s,transform .3s,visibility .3s;
}
[data-theme="light"] .player{background:rgba(255,255,255,.7)}
.player.on{opacity:1;visibility:visible;transform:translateX(-50%)}
.player-cover{
  width:40px;height:40px;border-radius:11px;flex:none;overflow:hidden;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  display:grid;place-items:center;font-size:16px;
}
.player-cover img{width:100%;height:100%;object-fit:cover}
.player-meta{min-width:0;display:grid;gap:2px}
.player-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-sub{font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-bar{position:relative;height:3px;border-radius:99px;background:rgba(255,255,255,.14);cursor:pointer;margin-top:5px}
.player-bar > i{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--violet))}
.player-actions{display:flex;align-items:center;gap:4px}
.pbtn{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--fg);border:1px solid transparent;transition:background .18s,color .18s}
.pbtn:hover{background:rgba(255,255,255,.1)}
.pbtn.main{background:rgba(255,255,255,.12)}
.pbtn svg{width:16px;height:16px}

/* Folia 歌词舞台 */
#lyric-stage{
  position:fixed;inset:0;z-index:85;
  display:grid;place-items:center;
  background:
    radial-gradient(90% 80% at 50% 40%,rgba(6,10,18,.72),rgba(3,6,11,.96)),
    linear-gradient(180deg,rgba(4,7,12,.85),rgba(3,5,9,.98));
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  opacity:0;visibility:hidden;
  transition:opacity .45s,visibility .45s;
}
#lyric-stage.on{opacity:1;visibility:visible}
#lyric-canvas{position:absolute;inset:0;width:100%;height:100%}
.lyric-lines{position:relative;z-index:2;display:grid;justify-items:center;gap:14px;padding:0 6vw;text-align:center}
.lyric-now{
  font-size:clamp(26px,5vw,54px);
  font-weight:800;line-height:1.35;letter-spacing:.5px;
  color:#fff;
  text-shadow:0 4px 30px rgba(0,0,0,.6),0 0 48px rgba(94,234,212,.35);
  transition:opacity .3s,transform .3s;
}
.lyric-next{font-size:clamp(14px,1.8vw,20px);color:rgba(255,255,255,.5);min-height:1.5em}
.lyric-hint{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-size:12px;color:rgba(255,255,255,.45);z-index:2}
#lyric-stage .lyric-close{position:absolute;top:18px;right:18px;z-index:3}

/* Folia 背景（封面模糊铺底） */
.folia-veil{
  position:fixed;inset:-8%;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .8s;
  background-size:cover;background-position:center;
  filter:blur(30px) saturate(1.3);
  transform:scale(1.1);
}
.folia-veil.on{opacity:.5}

/* ---------- 11. 页脚 ---------- */
.foot{
  position:relative;z-index:1;
  max-width:var(--max);margin:0 auto;
  padding:26px clamp(14px,3vw,30px) 90px;
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  font-size:12px;color:var(--mut);flex-wrap:wrap;
}
.foot-right{display:flex;align-items:center;gap:10px}
.edit-dot{width:28px;height:28px;border-radius:9px;display:none;place-items:center;border:1px solid var(--line);color:var(--mut)}
.edit-dot:hover{color:var(--fg);border-color:var(--line-2)}
.foot a{color:var(--mut)}
.foot a:hover{color:var(--cyan)}

/* 页脚统计：访问量 + 点赞 */
.foot-stats{display:inline-flex;align-items:center;gap:10px;font-size:12px;color:var(--mut)}
.foot-stats .fs-sep{width:1px;height:11px;background:var(--line-2);display:inline-block;margin-right:4px}
.fs-views{white-space:nowrap}
.foot-stats .fs-like{
  display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--mut);
  font-size:12px;cursor:pointer;transition:color .18s,border-color .18s,background .18s;
}
.foot-stats .fs-like:hover{color:var(--pink);border-color:rgba(244,114,182,.5)}
.foot-stats .fs-like.on{color:var(--pink);border-color:rgba(244,114,182,.55);background:rgba(244,114,182,.10);cursor:default}
.foot-stats .fs-like b{font-weight:600}

/* ---------- 12. 命令面板 ---------- */
.cmdk{
  position:fixed;inset:0;z-index:120;
  display:grid;place-items:start center;
  padding-top:14vh;
  background:rgba(3,5,10,.55);
  backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;
}
.cmdk.on{opacity:1;visibility:visible}
.cmdk-box{
  width:min(560px,92vw);
  border-radius:18px;border:1px solid var(--line-2);
  background:rgba(10,14,24,.92);
  box-shadow:var(--shadow);overflow:hidden;
}
[data-theme="light"] .cmdk-box{background:rgba(255,255,255,.95)}
.cmdk-box input{
  width:100%;padding:16px 18px;border:0;border-bottom:1px solid var(--line);
  background:transparent;color:var(--fg);font-size:15px;outline:none;
}
.cmdk-box ul{list-style:none;margin:0;padding:8px;max-height:46vh;overflow:auto}
.cmdk-box li{padding:10px 12px;border-radius:10px;font-size:13.5px;color:var(--mut);cursor:pointer;display:flex;gap:10px;align-items:center}
.cmdk-box li.on,.cmdk-box li:hover{background:rgba(94,234,212,.12);color:var(--fg)}
.cmdk-box li b{color:var(--cyan);font-weight:600}
.cmdk-hint{padding:8px 14px 12px;font-size:11px;color:var(--mut)}

/* ---------- 13. 移动菜单 ---------- */
.mobile-menu{
  position:fixed;inset:0;z-index:80;
  background:rgba(5,8,14,.86);
  backdrop-filter:blur(18px);
  display:grid;place-content:center;gap:6px;
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
}
.mobile-menu.on{opacity:1;visibility:visible}
.mobile-menu a{font-size:20px;padding:10px 18px;border-radius:12px;text-align:center;color:var(--fg)}
.mobile-menu a:hover{background:rgba(255,255,255,.08)}

/* ---------- 14. 通用动效 ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.05s}
.reveal:nth-child(3){transition-delay:.1s}
.reveal:nth-child(4){transition-delay:.15s}

/* ---------- 15. 响应式 ---------- */
@media (max-width:1180px){
  .home{grid-template-columns:270px minmax(0,1fr)}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall.w4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall.w4 .pcard:nth-child(1),.wall.w4 .pcard:nth-child(2){grid-column:span 1}
  .notes-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .home{grid-template-columns:1fr;grid-template-areas:"head" "side" "wall"}
  .home-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-side > .tags-card{grid-column:span 2}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .links{display:none}
  .burger{display:inline-flex}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  :root{--blur:10px;--nav-h:58px}
  .home-head{grid-template-columns:1fr}
  .clock-card{min-height:auto;grid-template-columns:1fr auto;justify-items:start;text-align:left;align-items:center;gap:6px 14px}
  .clock-ring{width:56px;height:56px;grid-row:1 / span 2;grid-column:2;justify-self:end;margin:0}
  .wall{grid-template-columns:1fr}
  .home-side{grid-template-columns:1fr}
  .home-side > .tags-card{grid-column:span 1}
  .pie-wrap{grid-template-columns:90px 1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .notes-row{grid-template-columns:1fr}
  .foot{padding-bottom:110px}
  .reveal{transition-delay:0s !important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}
/* ---------- 16. 背景歌词层（Folia 风格） ---------- */
#lyric-bg{
  position:fixed;inset:0;z-index:1;
  display:grid;place-items:center;
  pointer-events:none;
  padding:0 6vw;
  opacity:0;
  transition:opacity .6s ease;
  mix-blend-mode:screen;
}
#lyric-bg.on{opacity:1}
#lyric-bg .lb-line{
  font-size:clamp(28px,5.4vw,78px);
  font-weight:800;
  line-height:1.28;
  text-align:center;
  letter-spacing:.5px;
  color:rgba(255,255,255,.30);
  text-shadow:0 0 70px rgba(94,234,212,.35),0 2px 24px rgba(0,0,0,.45);
  transition:opacity .4s,transform .5s;
  transform:translateY(6px);
}
#lyric-bg.on .lb-line{transform:none}
[data-theme="light"] #lyric-bg{mix-blend-mode:multiply}
[data-theme="light"] #lyric-bg .lb-line{color:rgba(16,24,39,.16);text-shadow:0 0 60px rgba(94,234,212,.35)}

/* ---------- 17. AI 对话 ---------- */
.ai-wrap{position:fixed;right:20px;bottom:22px;z-index:75;font-family:inherit}
.ai-fab{
  width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg,#5eead4,#8b5cf6);color:#04120f;cursor:pointer;
  display:grid;place-items:center;
  box-shadow:0 16px 40px rgba(94,234,212,.28),0 4px 14px rgba(0,0,0,.4);
  transition:transform .2s,box-shadow .2s;
}
.ai-fab:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 22px 50px rgba(94,234,212,.4)}
.ai-box{
  position:absolute;right:0;bottom:66px;
  width:min(360px,88vw);height:min(520px,72vh);
  display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  background:rgba(12,17,27,.94);border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  animation:aiIn .22s ease;
}
[data-theme="light"] .ai-box{background:rgba(255,255,255,.96)}
.ai-box[hidden]{display:none !important}
@keyframes aiIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.ai-head{display:flex;align-items:center;gap:8px;padding:13px 15px;border-bottom:1px solid var(--line)}
.ai-head b{font-size:14px}
.ai-tag{font-size:10.5px;padding:2px 7px;border-radius:999px;color:var(--cyan);border:1px solid rgba(94,234,212,.35)}
.ai-x{margin-left:auto;background:none;border:0;color:var(--mut);font-size:20px;line-height:1;cursor:pointer}
.ai-x:hover{color:var(--fg)}
.ai-msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:9px}
.ai-m{max-width:86%;padding:9px 13px;border-radius:13px;font-size:13.5px;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.ai-sys,.ai-bot{background:rgba(255,255,255,.055);color:var(--fg);border:1px solid var(--line);align-self:flex-start}
[data-theme="light"] .ai-sys,[data-theme="light"] .ai-bot{background:rgba(16,24,39,.05)}
.ai-me{background:linear-gradient(120deg,rgba(94,234,212,.9),rgba(139,92,246,.85));color:#04120f;align-self:flex-end;font-weight:500}
.ai-err{background:rgba(255,107,107,.12);color:#ff9d9d}
.ai-form{display:flex;gap:8px;padding:11px;border-top:1px solid var(--line)}
.ai-form input{flex:1;padding:10px 13px;border-radius:11px;border:1px solid var(--line);background:var(--card2);color:var(--fg);font-size:13.5px;outline:none}
.ai-form input:focus{border-color:rgba(94,234,212,.55);box-shadow:var(--ring)}
.ai-form button{width:40px;border:0;border-radius:11px;cursor:pointer;font-size:16px;color:#04120f;background:linear-gradient(135deg,#5eead4,#8b5cf6)}
@media (max-width:600px){.ai-wrap{right:14px;bottom:16px}.ai-box{width:min(340px,92vw)}}
/* 播放条出现时把 AI 气泡抬起来，避免叠在一起 */
body:has(.player.on) .ai-wrap{bottom:86px}

/* ---------- 18. 旧壳兼容（笔记页 / 后台还在用 #bg 与 .grid-overlay） ---------- */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.55;pointer-events:none}
.grid-overlay{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 20%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 20%,#000 0%,transparent 78%);
}
.top-btn{
  position:fixed;right:18px;bottom:18px;z-index:40;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:var(--card2);color:var(--fg);
  opacity:0;pointer-events:none;transition:.25s;backdrop-filter:blur(8px);
}
.top-btn.show{opacity:1;pointer-events:auto}
.top-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;background:var(--grad)}

/* ---------- 15b. 站内编辑器 ---------- */
#editor .drawer-head{gap:8px}
.edit-list{display:grid;gap:8px;margin-bottom:10px}
.edit-row{display:grid;gap:6px;align-items:center}
.edit-row.social{grid-template-columns:78px minmax(0,1fr) minmax(0,1.4fr) 26px}
.edit-row.tag{grid-template-columns:minmax(0,1fr) 86px 22px}
.edit-row .del{
  width:26px;height:26px;border-radius:8px;border:1px solid var(--line);
  color:var(--mut);display:grid;place-items:center;font-size:12px;
}
.edit-row .del:hover{color:#ff8d8d;border-color:rgba(255,120,120,.5)}
.edit-row select.input{padding:8px 6px;font-size:12.5px}
.edit-row input[type="range"]{
  -webkit-appearance:none;appearance:none;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));outline:none;
}
.edit-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;
  border:2px solid rgba(94,234,212,.9);cursor:pointer;
}
.edit-row .w-val{font-family:var(--mono);font-size:11px;color:var(--mut);text-align:center}
.avatar-preview{
  width:64px;height:64px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--bg2);border:1px solid var(--line);
  display:grid;place-items:center;
}
.avatar-preview img{width:100%;height:100%;object-fit:cover}
.edit-avatar-row{display:flex;gap:10px;align-items:center}
.edit-note{font-size:11.5px;color:var(--mut);line-height:1.6;margin:6px 0 0}
.edit-note b{color:var(--cyan);font-weight:600}
.ed-ok{color:var(--cyan)}
.ed-err{color:#ff8d8d}

/* 返回键 */
.btn-back{display:inline-flex;align-items:center;gap:5px;padding:0 10px;height:34px;
  border-radius:11px;border:1px solid var(--line);background:var(--glass);color:var(--mut);font-size:13px}
.btn-back:hover{color:var(--fg);border-color:var(--line-2)}
@media (max-width:980px){.btn-back .lbl{display:none}}

/* ---------- 15c. 音乐页 / 审核 ---------- */
.track-list{display:grid;gap:10px}
.track{
  display:grid;grid-template-columns:38px minmax(0,1fr) 34px;align-items:center;gap:12px;
  padding:10px 12px;border-radius:14px;
  border:1px solid var(--line);background:var(--card);
  backdrop-filter:blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(140%);
  transition:border-color .2s,background .2s;
}
.track:hover{border-color:var(--line-2)}
.track.on{border-color:rgba(94,234,212,.5);background:rgba(94,234,212,.08)}
.track audio{display:none}
.tr-play{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--fg);
}
.track.on .tr-play{background:linear-gradient(135deg,var(--cyan),var(--violet));color:#04121a;border-color:transparent}
.tr-main{display:grid;gap:2px;min-width:0}
.tr-main b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-main .mut{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-dl{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--line);color:var(--mut);font-size:14px}
.tr-dl:hover{color:var(--cyan);border-color:rgba(94,234,212,.5)}
.up-bar{position:relative;height:4px;border-radius:99px;background:rgba(255,255,255,.12);margin-top:12px;overflow:hidden}
.up-bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width .2s}

/* 编辑器里的待审核列表 */
.pending-row{
  display:grid;gap:8px;padding:10px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
}
.pending-row .pr-top{display:flex;gap:8px;align-items:center;font-size:12.5px}
.pending-row .pr-top b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pending-row .pr-top span{color:var(--mut);font-size:11px;flex:none}
.pending-row audio{width:100%;height:32px}
.pending-row .pr-act{display:flex;gap:6px}
.btn-xs{padding:5px 10px;border-radius:9px;font-size:12px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--fg)}
.btn-xs.ok{border-color:rgba(94,234,212,.5);color:var(--cyan)}
.btn-xs.no{border-color:rgba(255,120,120,.4);color:#ff9d9d}
.btn-xs:hover{background:rgba(255,255,255,.1)}

[data-motion="off"] #bg-particles{display:none}
[data-motion="off"] .clock-ring::before,[data-motion="off"] .clock-ring::after{animation:none}
[data-motion="off"] .pcard:hover{transform:none}