/* ============================================================
   二次元风 · 升级版（动态光斑 / 发光卡片 / 黑胶播放器）
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --pink: #ff6fb0;
  --purple: #9a7bff;
  --blue: #5ec2ff;
  --grad: linear-gradient(120deg, #ff6fb0, #a27bff, #5ec2ff);
  --grad2: linear-gradient(135deg, #ff8fc8, #9a7bff);
  --text: #3a3352;
  --sub: #9a8fb5;
  --card: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.9);
  --shadow: 0 14px 44px rgba(170,130,255,.22);
  --radius: 24px;
  --glow: 0 0 24px rgba(255,130,200,.35);
}
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "HarmonyOS Sans", sans-serif;
  background: #f6efff;
  color: var(--text);
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
/* 动态渐变光斑背景 */
.bg-blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-blobs span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.bg-blobs .b1 { width: 420px; height: 420px; left: -80px; top: -60px; background: #ffb3dd;
  animation: float1 18s ease-in-out infinite; }
.bg-blobs .b2 { width: 480px; height: 480px; right: -100px; top: 10%; background: #c9b8ff;
  animation: float2 22s ease-in-out infinite; }
.bg-blobs .b3 { width: 380px; height: 380px; left: 22%; bottom: -90px; background: #a5dcff;
  animation: float1 26s ease-in-out infinite reverse; }
.bg-blobs .b4 { width: 300px; height: 300px; right: 30%; top: 45%; background: #ffd7a8;
  animation: float2 20s ease-in-out infinite reverse; }
@keyframes float1 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(60px,40px) scale(1.12);} }
@keyframes float2 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-50px,60px) scale(1.15);} }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.container { max-width: 880px; margin: 0 auto; padding: 0 20px; position: relative; }

/* 滚动条美化 */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(#ff9ecd,#a78bfa); border-radius: 999px; }

/* ===== 顶部导航 ===== */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.55);
  backdrop-filter: blur(20px) saturate(170%); border-bottom: 1px solid rgba(255,255,255,.85); }
.nav-inner { max-width: 880px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; }
.logo { font-size: 20px; font-weight: 900; letter-spacing: .5px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 12px rgba(255,120,190,.35)); }
.logo::before { content: "🌸 "; }
.nav-links { display: flex; align-items: center; gap: 18px; font-size: 14px; color: var(--sub); font-weight: 600; }
.nav-links a { position: relative; transition: color .2s; }
.nav-links a:hover { color: var(--pink); }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background: var(--grad); border-radius:2px; transition:width .25s; }
.nav-links a:hover::after { width:100%; }
.theme-btn { border:none; background: linear-gradient(135deg,#ff9ecd,#a78bfa); color:#fff; width:34px; height:34px;
  border-radius:50%; font-size:16px; cursor:pointer; box-shadow:0 4px 16px rgba(255,143,200,.5); line-height:1; transition:transform .2s; }
.theme-btn:hover { transform: rotate(20deg) scale(1.08); }
.like-btn { border:none; cursor:pointer; font-size:15px; font-weight:800; padding:12px 30px;
  border-radius:999px; background: linear-gradient(135deg,#ffd0e5,#d9c8ff); color:#a34e78;
  box-shadow:0 8px 24px rgba(255,143,200,.4); transition:all .25s; }
.like-btn:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 12px 30px rgba(255,120,190,.5); }
.like-btn:active { transform:scale(.95); }
.like-btn.liked { background:linear-gradient(135deg,#ff6fb0,#9a7bff); color:#fff; }
.avatar-chip { display:flex; align-items:center; gap:7px; font-weight:700; color:var(--text); }
.dot { width: 28px; height: 28px; border-radius: 50%; background: var(--grad2);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:800;
  box-shadow: 0 3px 12px rgba(255,143,200,.5); }

/* ===== Hero ===== */
.hero { text-align: center; padding: 64px 0 38px; position: relative; }
.hero h1 { font-size: 42px; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(120deg,#ff5fa8,#9a7bff,#4db8ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 28px rgba(255,110,180,.35)); animation: hue 8s linear infinite; }
@keyframes hue { to { filter: drop-shadow(0 6px 28px rgba(110,150,255,.45)) hue-rotate(20deg); } }
.hero p { color: var(--sub); margin-top: 14px; font-size: 15.5px; }
.hero .spark { font-size: 22px; letter-spacing: 10px; margin-bottom: 6px; animation: bob 3s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
.hero .badge { display:inline-block; margin-top:20px; padding:9px 24px; border-radius:999px;
  background: rgba(255,255,255,.85); color: var(--purple); font-size:13px; font-weight:700;
  box-shadow: var(--shadow); backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,.9); }

/* ===== 文章卡片 ===== */
.post-list { display: grid; gap: 22px; padding-bottom: 50px; }
.post-card { position: relative; background: var(--card); border-radius: var(--radius); padding: 28px 30px;
  box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.95);
  backdrop-filter: blur(14px); overflow: hidden;
  transition: transform .28s, box-shadow .28s; }
.post-card::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background: linear-gradient(120deg, rgba(255,111,176,.6), rgba(154,123,255,.5), rgba(94,194,255,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:0; transition:opacity .3s; }
.post-card:hover::before { opacity:1; }
.post-card::after { content:""; position:absolute; left:0; top:0; width:100%; height:6px;
  background: var(--grad); opacity:.9; }
.post-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(170,120,255,.32); }
.post-card h2 { font-size: 22px; font-weight: 800; }
.post-card h2 a { transition: color .2s; }
.post-card h2 a:hover { color: var(--pink); }
.meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--sub); font-size: 13px; margin: 12px 0 12px; }
.meta .tag { color: var(--purple); background: linear-gradient(120deg,#f3e8ff,#ffe9f5); padding: 3px 13px;
  border-radius: 999px; font-weight:700; }
.excerpt { color: #6b5f88; font-size: 14.5px; }
.read-more { display:inline-block; margin-top:14px; color: var(--pink); font-size:14px; font-weight:800; transition:letter-spacing .2s; }
.read-more:hover { letter-spacing:1px; }

/* ===== 文章详情 ===== */
.article { position: relative; background: var(--card); border-radius: var(--radius); padding: 40px 44px;
  margin:34px 0; box-shadow: var(--shadow); border:1px solid rgba(255,255,255,.95);
  backdrop-filter: blur(14px); overflow:hidden; }
.article::before { content:"✨"; position:absolute; top:-12px; right:26px; font-size:32px; animation:bob 3s infinite; }
.article::after { content:""; position:absolute; left:0; top:0; height:6px; width:100%; background:var(--grad); }
.article h1 { font-size: 30px; font-weight:900; }
.article .content { margin-top: 24px; font-size: 16px; white-space: pre-wrap; word-break: break-word; }

/* ===== 评论 ===== */
.comments { background: var(--card); border-radius: var(--radius); padding: 32px 36px; margin-bottom:34px;
  box-shadow: var(--shadow); border:1px solid rgba(255,255,255,.95); backdrop-filter: blur(14px); }
.comments h3 { font-size: 17px; margin-bottom: 18px; }
.comment { padding: 14px 0; border-bottom: 1px dashed rgba(170,150,210,.35); }
.comment:last-child { border-bottom: none; }
.comment .who { font-weight:800; font-size:14px; color:var(--purple); }
.comment .when { color:var(--sub); font-size:12px; margin-left:8px; }
.comment .txt { margin-top:5px; font-size:14.5px; color:#5c4f78; }
.comment-form textarea { width:100%; min-height:90px; border:1.5px solid rgba(170,150,210,.4); border-radius:14px;
  padding:13px; font-family:inherit; font-size:14px; resize:vertical; background:rgba(255,255,255,.85);
  transition:border .2s, box-shadow .2s; }
.comment-form textarea:focus { outline:none; border-color:var(--pink); box-shadow:0 0 0 4px rgba(255,143,200,.16); }

/* ===== 按钮 / 表单 ===== */
.btn { display:inline-block; padding:13px 30px; border:none; border-radius:999px;
  background: linear-gradient(135deg,#ff8fc8,#9a7bff); color:#fff; font-size:14.5px; font-weight:800; cursor:pointer;
  transition: all .25s; box-shadow: 0 8px 24px rgba(255,143,200,.45); letter-spacing:.3px; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(167,120,255,.55); }
.btn:active { transform: scale(.96); }
.btn.ghost { background: rgba(255,255,255,.85); color: var(--purple); border:1px solid rgba(170,150,210,.5); box-shadow:none; }
.btn-block { display:block; width:100%; }
.form-card { max-width:430px; margin:56px auto; background: var(--card); border-radius: var(--radius);
  padding: 38px; box-shadow: var(--shadow); border:1px solid rgba(255,255,255,.95);
  backdrop-filter: blur(14px); position:relative; overflow:hidden; }
.form-card::after { content:""; position:absolute; left:0; top:0; height:6px; width:100%; background:var(--grad); }
.form-card::before { content:"🌸"; position:absolute; top:-12px; left:26px; font-size:26px; animation:bob 3s infinite; }
.form-card h2 { text-align:center; margin-bottom:24px; font-size:24px; font-weight:900;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:13px; color:var(--sub); margin-bottom:6px; font-weight:600; }
.field input, .field textarea, .field select { width:100%; padding:13px 16px; border:1.5px solid rgba(170,150,210,.4);
  border-radius:13px; font-size:14px; font-family:inherit; background:rgba(255,255,255,.9); transition:border .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--pink); box-shadow:0 0 0 4px rgba(255,143,200,.16); }
.alert { padding:13px 17px; border-radius:12px; font-size:13.5px; margin-bottom:18px; }
.alert.err { background:#fde8ee; color:#d6336c; }
.alert.ok { background:#e6f9ee; color:#2e9e63; }
.form-foot { text-align:center; margin-top:18px; font-size:13.5px; color:var(--sub); }
.form-foot a { color:var(--pink); font-weight:800; }

/* ===== 侧边 / QQ 卡片 ===== */
.qq-card { display:flex; align-items:center; gap:16px; background: var(--card); border-radius: var(--radius);
  padding: 24px 28px; box-shadow: var(--shadow); margin-bottom:32px; border:1px solid rgba(255,255,255,.95);
  backdrop-filter: blur(14px); position:relative; overflow:hidden; transition:transform .25s; }
.qq-card:hover { transform:translateY(-3px); }
.qq-card::after { content:""; position:absolute; left:0; top:0; height:5px; width:100%; background:var(--grad); }
.qq-ico { width:56px; height:56px; border-radius:16px; background: var(--grad);
  display:flex; align-items:center; justify-content:center; font-size:28px; box-shadow:0 6px 20px rgba(255,143,200,.45); }
.qq-card .num { font-size:20px; font-weight:900; letter-spacing:.5px; }
.qq-card .lbl { color:var(--sub); font-size:13px; }

/* ===== 音乐播放器（黑胶唱片） ===== */
.music-player { position: fixed; right: 24px; bottom: 24px; z-index: 100;
  width: 244px; background: rgba(255,255,255,.78); backdrop-filter: blur(22px) saturate(160%);
  border-radius: 26px; padding: 18px; box-shadow: 0 20px 55px rgba(170,120,255,.4);
  border: 1.5px solid rgba(255,255,255,.95); overflow:hidden; }
.music-player::before { content:""; position:absolute; left:0; top:0; height:5px; width:100%; background:var(--grad); }
.music-top { display:flex; align-items:center; gap:13px; }
.cover { width:52px; height:52px; border-radius:50%; background: conic-gradient(from 0deg, #ff8fc8, #a78bfa, #7fd0ff, #ff8fc8);
  flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px;
  box-shadow: 0 6px 20px rgba(255,143,200,.5), inset 0 0 0 3px rgba(255,255,255,.25);
  position:relative; }
.cover::after { content:""; position:absolute; width:16px; height:16px; border-radius:50%;
  background:rgba(255,255,255,.7); box-shadow:0 0 6px rgba(0,0,0,.2); }
.cover.playing { animation: spin 5s linear infinite; box-shadow:0 6px 26px rgba(255,110,190,.6), 0 0 20px rgba(154,123,255,.5); }
@keyframes spin { to { transform: rotate(360deg); } }
.song-info { min-width:0; flex:1; }
.song-name { font-size:14px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.song-artist { font-size:12px; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.music-controls { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:15px; }
.mbtn { border:none; background:transparent; font-size:19px; cursor:pointer; color:var(--purple); width:40px; height:40px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.mbtn:hover { background:rgba(255,143,200,.16); transform:scale(1.08); }
.mbtn.play { background: linear-gradient(135deg,#ff8fc8,#9a7bff); color:#fff; width:50px; height:50px; font-size:18px;
  box-shadow: 0 8px 24px rgba(255,120,200,.5); }
.mbtn.play.playing { box-shadow:0 8px 30px rgba(255,90,180,.65), 0 0 16px rgba(154,123,255,.5); }
.progress { height:6px; background:rgba(170,150,210,.25); border-radius:999px; margin-top:14px; overflow:hidden; cursor:pointer; }
.progress-bar { height:100%; width:0; background: var(--grad); border-radius:999px; transition:width .2s linear; position:relative; }
.progress-bar::after { content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 6px rgba(255,120,200,.8); }
.song-idx { flex:none; font-size:11px; font-weight:800; color:#fff; background: linear-gradient(135deg,#ff8fc8,#9a7bff);
  border-radius:999px; padding:3px 9px; box-shadow:0 3px 10px rgba(255,120,200,.45); }
.mbtn.prev, .mbtn.next { width:34px; height:34px; font-size:15px; background:rgba(255,255,255,.65);
  color:var(--purple); border:1px solid rgba(255,255,255,.85); box-shadow:0 4px 12px rgba(170,130,255,.25); }
body.dark .mbtn.prev, body.dark .mbtn.next { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); color:#d9c8ff; }

/* ===== 后台 ===== */
.admin-wrap { max-width:1000px; margin:26px auto; padding:0 20px; }
.admin-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-bottom:26px; }
.stat-box { background: var(--card); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.95); backdrop-filter: blur(14px); position:relative; overflow:hidden; }
.stat-box::after { content:""; position:absolute; left:0; top:0; height:4px; width:100%; background:var(--grad); }
.stat-box .n { font-size:32px; font-weight:900; color: var(--purple); }
.stat-box .l { color:var(--sub); font-size:13.5px; margin-top:4px; }
.table-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden;
  margin-bottom:26px; border:1px solid rgba(255,255,255,.95); backdrop-filter: blur(14px); }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { padding:14px 18px; text-align:left; border-bottom:1px dashed rgba(170,150,210,.3); }
th { background:rgba(243,238,255,.75); color:var(--sub); font-weight:700; font-size:13px; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,220,240,.15); }
.admin-nav { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.admin-nav a { padding:9px 22px; border-radius:999px; background: rgba(255,255,255,.85); color:var(--sub);
  font-size:14px; box-shadow:var(--shadow); font-weight:600; transition:all .2s; }
.admin-nav a.active, .admin-nav a:hover { background: linear-gradient(135deg,#ff8fc8,#9a7bff); color:#fff; box-shadow:0 8px 22px rgba(255,143,200,.45); }
.op-link { color:var(--purple); font-weight:700; margin-right:12px; cursor:pointer; }
.op-link.danger { color:#e0556b; }

/* ===== 页脚 ===== */
.footer { text-align:center; padding:40px 20px; color:var(--sub); font-size:13.5px;
  border-top:1px solid rgba(255,255,255,.85); background: rgba(255,255,255,.5); backdrop-filter: blur(10px); }

/* ===== 响应式 ===== */
@media (max-width: 600px) {
  .hero h1 { font-size: 30px; }
  .article, .comments { padding: 28px 22px; }
  .music-player { width: 210px; right: 14px; bottom: 14px; }
  .nav-links { gap: 12px; font-size: 13px; }
  .hide-sm { display:none; }
}

/* ===== 深色模式 ===== */
body.dark {
  --text: #ece4f6;
  --sub: #a99cc2;
  --card: rgba(30,25,48,.82);
  --line: rgba(255,255,255,.10);
  --shadow: 0 14px 44px rgba(0,0,0,.5);
  background: #14101f;
  color: var(--text);
}
body.dark .bg-blobs span { opacity:.32; }
body.dark .bg-blobs .b1 { background:#7a2a55; }
body.dark .bg-blobs .b2 { background:#4c3a78; }
body.dark .bg-blobs .b3 { background:#234d7a; }
body.dark .bg-blobs .b4 { background:#6b4a26; }
body.dark .nav { background: rgba(20,16,34,.7); border-bottom:1px solid rgba(255,255,255,.08); }
body.dark .footer { background: rgba(20,16,34,.6); border-top:1px solid rgba(255,255,255,.08); }
body.dark .excerpt { color:#b6abc9; }
body.dark .post-card, body.dark .qq-card, body.dark .article, body.dark .comments,
body.dark .stat-box, body.dark .table-card, body.dark .form-card {
  background: var(--card); border-color: rgba(255,255,255,.10);
}
body.dark .field input, body.dark .field textarea, body.dark .comment-form textarea,
body.dark .field select { background: rgba(40,33,62,.9); color: var(--text); border-color: rgba(255,255,255,.15); }
body.dark .btn.ghost { background: rgba(255,255,255,.12); color:#d9c8ff; border-color: rgba(255,255,255,.18); }
body.dark th { background: rgba(255,255,255,.05); }
body.dark tr:hover td { background: rgba(255,255,255,.04); }
body.dark .admin-nav a { background: rgba(255,255,255,.10); }
body.dark .comment .txt { color:#c2b6d6; }
body.dark .hero .badge { background: rgba(255,255,255,.1); color:#e6c9ff; }
body.dark .music-player { background: rgba(30,25,48,.88); border-color: rgba(255,255,255,.12); }
body.dark .like-btn { background:linear-gradient(135deg,#6a3a5e,#4c3a78); color:#ffd0e5; }

/* ============================================================
   精致化增强（流光 / 光晕 / 装饰）
   ============================================================ */
/* 主按钮流光 */
.btn { position:relative; overflow:hidden; }
.btn::after { content:""; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-20deg); transition:left .5s; }
.btn:hover::after { left:130%; }
.like-btn { position:relative; overflow:hidden; }
.like-btn::after { content:""; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg); transition:left .5s; }
.like-btn:hover::after { left:130%; }

/* 卡片悬停光晕 */
.post-card:hover, .qq-card:hover { box-shadow: 0 24px 60px rgba(170,120,255,.34), 0 0 30px rgba(255,120,200,.14); }

/* hero 徽章渐变描边呼吸 */
.hero .badge { animation: breathe 3.5s ease-in-out infinite; }
@keyframes breathe { 0%,100%{ box-shadow:0 6px 22px rgba(170,130,255,.2);} 50%{ box-shadow:0 8px 30px rgba(255,120,200,.45), 0 0 18px rgba(154,123,255,.3);} }

/* 文章卡片标题小装饰 */
.post-card h2::before { content:"💗 "; font-size:16px; }

/* 卡片四角星光 */
.post-card::before, .form-card::before { filter: drop-shadow(0 0 6px rgba(255,150,210,.6)); }

/* 评论区头像圆 */
.comment .who::before { content:"🌸 "; }

/* 后台统计数字渐变 */
.stat-box .n { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* 页脚小心心 */
.footer div:first-child::after { content:" 🌸"; }

/* 表格卡片顶条 */
.table-card::before { content:""; display:block; height:5px; width:100%; background:var(--grad); }

/* 输入框自动填充颜色修正（浅色） */
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: var(--text); }
body.dark input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #28213e inset; -webkit-text-fill-color: var(--text); }

/* 移动端播放器更紧凑 */
@media (max-width: 600px) {
  .mbtn.prev, .mbtn.next { width:30px; height:30px; font-size:13px; }
  .mbtn.play { width:44px; height:44px; }
  .post-card h2 { font-size:19px; }
}

/* ============================================================
   液态玻璃（Liquid Glass）质感增强
   ============================================================ */
/* 主内容卡片 → 液态玻璃：高光斜射 + 半透明磨砂 + 内高光 */
.post-card, .qq-card, .article, .comments, .form-card, .stat-box, .table-card {
  background:
    linear-gradient(115deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.38) 26%, rgba(255,255,255,.12) 46%, rgba(255,255,255,.42) 100%);
  backdrop-filter: blur(26px) saturate(185%);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -10px 24px rgba(255,255,255,.20),
    0 18px 50px rgba(150,110,255,.24),
    0 0 0 .5px rgba(255,255,255,.35);
}
/* 卡片顶部内侧高光弧线（液态玻璃招牌细节） */
.post-card, .qq-card, .article, .comments, .form-card, .stat-box, .table-card {
  position: relative;
}
.post-card::before, .qq-card::before, .article::before, .comments::before, .form-card::before {
  filter: none;
}
/* 导航栏 / 页脚 / 播放器 → 液态玻璃 */
.nav {
  background:
    linear-gradient(115deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.35) 30%, rgba(255,255,255,.16) 55%, rgba(255,255,255,.4) 100%);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 34px rgba(140,100,255,.18);
}
.footer {
  background:
    linear-gradient(115deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.28) 40%, rgba(255,255,255,.42) 100%);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
}
.music-player {
  background:
    linear-gradient(145deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.38) 45%, rgba(255,255,255,.55) 100%);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -10px 26px rgba(255,255,255,.22),
    0 24px 60px rgba(150,110,255,.35),
    0 0 24px rgba(255,140,210,.18);
}
/* 输入框液态玻璃 */
.field input, .field textarea, .field select, .comment-form textarea {
  background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.68));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.9), 0 4px 14px rgba(150,110,255,.10);
  border-color: rgba(255,255,255,.8);
}
/* hero 徽章液态玻璃 */
.hero .badge {
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.85);
}
/* 管理侧按钮玻璃 */
.admin-nav a {
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.6));
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.8);
}
/* 表格表头玻璃 */
th { background: linear-gradient(145deg, rgba(245,238,255,.9), rgba(245,238,255,.65)); backdrop-filter: blur(10px); }

/* 深色模式液态玻璃适配 */
body.dark .post-card, body.dark .qq-card, body.dark .article, body.dark .comments,
body.dark .stat-box, body.dark .table-card, body.dark .form-card {
  background:
    linear-gradient(115deg, rgba(58,46,92,.88) 0%, rgba(42,33,72,.62) 30%, rgba(30,25,52,.5) 55%, rgba(46,36,80,.68) 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.16),
    inset 0 -10px 24px rgba(0,0,0,.28),
    0 18px 50px rgba(0,0,0,.5);
}
body.dark .nav {
  background: linear-gradient(115deg, rgba(34,27,58,.85) 0%, rgba(26,20,44,.6) 50%, rgba(34,27,58,.7) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 34px rgba(0,0,0,.4);
}
body.dark .footer {
  background: linear-gradient(115deg, rgba(28,22,48,.75), rgba(24,19,42,.6));
}
body.dark .music-player {
  background: linear-gradient(145deg, rgba(52,42,86,.9) 0%, rgba(34,27,58,.72) 50%, rgba(44,35,74,.8) 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.14),
    0 24px 60px rgba(0,0,0,.6),
    0 0 24px rgba(120,70,180,.22);
}
body.dark .field input, body.dark .field textarea, body.dark .field select, body.dark .comment-form textarea {
  background: linear-gradient(145deg, rgba(56,45,90,.9), rgba(44,35,74,.75));
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
body.dark .hero .badge { background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); }
body.dark .admin-nav a { background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); }
body.dark th { background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); }

/* ============================================================
   液态玻璃 · 强化版（更透 / 更强高光 / 虹彩折射）
   ============================================================ */
/* 背景光斑调亮，让玻璃下面透出颜色 */
.bg-blobs span { opacity:.8; filter: blur(80px); }
body.dark .bg-blobs span { opacity:.5; }

/* 主卡片：多层高光 + 虹彩折射 + 内描边 */
.post-card, .qq-card, .article, .comments, .form-card, .stat-box, .table-card {
  background:
    linear-gradient(115deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.65) 14%, rgba(255,255,255,.18) 34%, rgba(255,255,255,.03) 52%, rgba(255,255,255,.22) 100%),
    conic-gradient(from 210deg at 82% 12%, rgba(255,255,255,.10), rgba(255,170,225,.16), rgba(170,160,255,.16), rgba(130,205,255,.14), rgba(255,255,255,.10)),
    linear-gradient(0deg, rgba(255,185,230,.38) 0%, rgba(190,170,255,.14) 28%, rgba(255,255,255,.08) 100%),
    linear-gradient(145deg, rgba(255,255,255,.4), rgba(255,255,255,.16));
  backdrop-filter: blur(48px) saturate(230%) brightness(1.08);
  -webkit-backdrop-filter: blur(48px) saturate(230%) brightness(1.08);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,1),
    inset 0 -1px 1.5px rgba(255,255,255,.7),
    inset 0 0 0 1px rgba(255,255,255,.25),
    inset 0 -26px 44px rgba(255,165,220,.12),
    0 24px 60px rgba(135,95,255,.3),
    0 0 0 1px rgba(255,255,255,.4),
    0 0 34px rgba(255,150,215,.14);
}

/* 导航：液态玻璃强化 */
.nav {
  background:
    linear-gradient(115deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.5) 24%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.38) 100%),
    linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.14));
  backdrop-filter: blur(52px) saturate(230%) brightness(1.1);
  -webkit-backdrop-filter: blur(52px) saturate(230%) brightness(1.1);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.3),
    0 12px 40px rgba(130,95,255,.2);
}

/* 播放器：全玻璃 + 虹彩光晕 */
.music-player {
  background:
    linear-gradient(145deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 38%, rgba(255,255,255,.28) 62%, rgba(255,255,255,.6) 100%),
    conic-gradient(from 200deg at 85% 8%, rgba(255,255,255,.12), rgba(255,150,215,.2), rgba(150,140,255,.2), rgba(110,195,255,.18), rgba(255,255,255,.12));
  backdrop-filter: blur(56px) saturate(240%) brightness(1.12);
  -webkit-backdrop-filter: blur(56px) saturate(240%) brightness(1.12);
  border: 1.5px solid rgba(255,255,255,.95);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,1),
    inset 0 -1px 1.5px rgba(255,255,255,.7),
    inset 0 0 0 1px rgba(255,255,255,.3),
    0 28px 65px rgba(130,90,255,.4),
    0 0 30px rgba(255,130,205,.25),
    0 0 0 1px rgba(255,255,255,.5);
}

/* 页脚 / 徽章 / 后台按钮 同步强化 */
.footer {
  background:
    linear-gradient(115deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.34) 40%, rgba(255,255,255,.5) 100%),
    linear-gradient(145deg, rgba(255,255,255,.3), rgba(255,255,255,.12));
  backdrop-filter: blur(40px) saturate(200%) brightness(1.06);
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.06);
}
.hero .badge {
  background:
    linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.62) 45%, rgba(255,255,255,.35) 100%),
    linear-gradient(0deg, rgba(255,190,230,.18), transparent 60%);
  backdrop-filter: blur(34px) saturate(200%) brightness(1.1);
  -webkit-backdrop-filter: blur(34px) saturate(200%) brightness(1.1);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: inset 0 1px 1px rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.35), 0 12px 34px rgba(130,95,255,.28);
}
.admin-nav a {
  background:
    linear-gradient(145deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.62) 50%, rgba(255,255,255,.4) 100%);
  backdrop-filter: blur(30px) saturate(190%) brightness(1.08);
  -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.08);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 8px 24px rgba(130,95,255,.18);
}
th {
  background: linear-gradient(145deg, rgba(248,240,255,.95) 0%, rgba(245,238,255,.6) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* 深色模式：暗色玻璃强化 */
body.dark .post-card, body.dark .qq-card, body.dark .article, body.dark .comments,
body.dark .stat-box, body.dark .table-card, body.dark .form-card {
  background:
    linear-gradient(115deg, rgba(72,56,116,.95) 0%, rgba(52,42,88,.7) 24%, rgba(36,29,64,.52) 48%, rgba(48,38,86,.62) 100%),
    conic-gradient(from 210deg at 82% 12%, rgba(255,255,255,.06), rgba(200,110,180,.10), rgba(140,120,255,.10), rgba(90,160,255,.08), rgba(255,255,255,.06)),
    linear-gradient(0deg, rgba(120,60,140,.12), transparent 40%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.2),
    inset 0 -1px 1.5px rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 -26px 44px rgba(120,60,180,.10),
    0 24px 60px rgba(0,0,0,.55),
    0 0 30px rgba(120,80,220,.14);
}
body.dark .nav {
  background:
    linear-gradient(115deg, rgba(46,38,78,.92) 0%, rgba(34,28,60,.68) 45%, rgba(42,34,74,.8) 100%);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.05), 0 12px 40px rgba(0,0,0,.45);
}
body.dark .music-player {
  background:
    linear-gradient(145deg, rgba(62,50,100,.95) 0%, rgba(42,34,72,.72) 45%, rgba(52,42,88,.82) 100%),
    conic-gradient(from 200deg at 85% 8%, rgba(255,255,255,.05), rgba(180,90,160,.10), rgba(110,95,220,.10), rgba(70,140,220,.08), rgba(255,255,255,.05));
  border: 1.5px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.18),
    inset 0 -1px 1.5px rgba(255,255,255,.08),
    0 28px 65px rgba(0,0,0,.6),
    0 0 30px rgba(140,80,220,.2);
}
body.dark .footer {
  background: linear-gradient(115deg, rgba(36,30,62,.82) 0%, rgba(30,25,52,.66) 45%, rgba(36,30,62,.75) 100%);
}
body.dark .hero .badge {
  background: linear-gradient(145deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.07) 60%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.12), 0 12px 34px rgba(0,0,0,.4);
}
body.dark .admin-nav a {
  background: linear-gradient(145deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.06) 60%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.1);
}

/* ============================================================
   播放器收起 / 展开
   ============================================================ */
.music-player.hidden { display:none; }
.mbtn.collapse { position:absolute; top:8px; right:10px; width:26px; height:26px; font-size:14px;
  background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.9); color:var(--purple); border-radius:50%;
  box-shadow:0 3px 10px rgba(170,130,255,.2); line-height:1; z-index:2; }
.mbtn.collapse:hover { transform:scale(1.1); background:rgba(255,143,200,.2); }
body.dark .mbtn.collapse { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.14); color:#d9c8ff; }

/* 迷你展开按钮（液态玻璃小圆钮） */
.music-fab { position:fixed; right:24px; bottom:24px; z-index:100; width:56px; height:56px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.95); cursor:pointer; font-size:24px; line-height:1;
  display:none; align-items:center; justify-content:center;
  background:
    linear-gradient(145deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 45%, rgba(255,255,255,.65) 100%),
    conic-gradient(from 200deg at 85% 8%, rgba(255,255,255,.12), rgba(255,150,215,.25), rgba(150,140,255,.25), rgba(110,195,255,.22), rgba(255,255,255,.12));
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,1),
    inset 0 -1px 1.5px rgba(255,255,255,.6),
    0 18px 45px rgba(130,90,255,.4),
    0 0 24px rgba(255,130,205,.3),
    0 0 0 1px rgba(255,255,255,.5);
  animation: fabPulse 2.6s ease-in-out infinite; }
.music-fab.show { display:flex; }
.music-fab:hover { transform:scale(1.1); }
@keyframes fabPulse { 0%,100%{ box-shadow:inset 0 1.5px 1px rgba(255,255,255,1), 0 18px 45px rgba(130,90,255,.4), 0 0 24px rgba(255,130,205,.3); }
  50%{ box-shadow:inset 0 1.5px 1px rgba(255,255,255,1), 0 18px 45px rgba(130,90,255,.5), 0 0 34px rgba(255,130,205,.5); } }
body.dark .music-fab {
  background:
    linear-gradient(145deg, rgba(62,50,100,.95) 0%, rgba(42,34,72,.75) 50%, rgba(52,42,88,.85) 100%),
    conic-gradient(from 200deg at 85% 8%, rgba(255,255,255,.05), rgba(180,90,160,.12), rgba(110,95,220,.12), rgba(70,140,220,.1), rgba(255,255,255,.05));
  border:1.5px solid rgba(255,255,255,.16);
}
@media (max-width:600px){ .music-fab { right:14px; bottom:14px; width:50px; height:50px; font-size:21px; } }

/* ============================================================
   正文图片 + 灯箱 + UI 强化
   ============================================================ */
.article .content { line-height: 1.9; }
.article .content p { margin: 0 0 16px; }
.content-img { display:block; max-width:100%; margin:22px auto; border-radius:16px; cursor:zoom-in;
  box-shadow: 0 14px 34px rgba(130,90,255,.25), 0 4px 14px rgba(255,143,200,.18);
  border:3px solid rgba(255,255,255,.85);
  transition: transform .35s ease, box-shadow .35s ease; }
.content-img:hover { transform: scale(1.012); box-shadow: 0 20px 48px rgba(130,90,255,.35), 0 6px 20px rgba(255,143,200,.28); }

/* 灯箱 */
.lightbox { position:fixed; inset:0; z-index:999; display:none; align-items:center; justify-content:center;
  background:rgba(28,18,50,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  cursor:zoom-out; padding:24px; }
.lightbox.show { display:flex; animation: lbIn .25s ease; }
.lightbox img { max-width:94vw; max-height:90vh; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.5);
  border:3px solid rgba(255,255,255,.9); }
@keyframes lbIn { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:scale(1); } }

/* 文章 meta 徽章 */
.article .meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:14px 0 6px; }
.article .meta .tag { background:linear-gradient(135deg,#ff9ecd,#a78bfa); color:#fff; font-weight:700;
  padding:3px 12px; border-radius:20px; font-size:12.5px; box-shadow:0 4px 12px rgba(255,143,200,.35); }
.article .meta span { background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.9);
  padding:3px 11px; border-radius:20px; font-size:12.5px; color:#5c4f78;
  backdrop-filter: blur(8px); }
body.dark .article .meta span { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); color:#cdbfe8; }

/* 评论头像（用户名首字圆形徽标） */
.comment { display:flex; gap:12px; align-items:flex-start; }
.comment .avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px; color:#fff;
  background:linear-gradient(135deg,#ff9ecd,#a78bfa);
  box-shadow:0 6px 16px rgba(255,143,200,.35), inset 0 1px 0 rgba(255,255,255,.6); }
.comment .cmt-body { flex:1; min-width:0; }
.comment .cmt-head { display:flex; align-items:baseline; gap:8px; }
.comment .txt { margin-top:5px; font-size:14.5px; color:#5c4f78; }

/* 封面图悬停微放大 */
.article > div:first-child img { transition: transform .4s ease; }
.article > div:first-child:hover img { transform: scale(1.015); }

/* 按钮统一光晕 */
.btn { position:relative; overflow:hidden; }
.btn::after { content:""; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-20deg); transition:left .5s; pointer-events:none; }
.btn:hover::after { left:120%; }

/* 正文区块间距更透气 */
.article .content h2, .article .content h3 { margin:26px 0 10px; }
.article .content a { color:var(--primary); font-weight:600; text-decoration:underline; }

/* ============================================================
   修复：卡片装饰伪元素覆盖层不再拦截点击（阅读全文/标题/按钮）
   ============================================================ */
.post-card::before, .post-card::after,
.qq-card::before, .qq-card::after,
.article::before, .article::after,
.form-card::before, .form-card::after,
.comments::before, .comments::after,
.stat-box::before, .stat-box::after,
.table-card::before, .table-card::after,
.btn::after, .like-btn::after,
.music-player::before, .music-player::after,
.cover::after, .progress-bar::after {
  pointer-events: none;
}

/* ============================================================
   访客信息栏（时间 / IP / 天气 / 新闻）
   ============================================================ */
.visitor-card { margin: 0 0 22px; padding: 18px 20px; border-radius: 18px;
  background: linear-gradient(115deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.45) 40%, rgba(255,255,255,.6) 100%);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -8px 20px rgba(255,255,255,.18),
    0 14px 40px rgba(150,110,255,.22), 0 0 0 .5px rgba(255,255,255,.3); }
.visitor-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.v-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 4px 14px rgba(255,143,200,.16); font-size: 13px; font-weight: 600; color: #5c4f78; }
.v-chip b { color: var(--purple); }
.v-loc { color: var(--pink); font-weight: 800; }
.v-time { background: linear-gradient(135deg, rgba(255,158,205,.22), rgba(167,139,250,.2)); color: var(--purple); }
.visitor-news { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(170,150,210,.4); }
.v-news-title { display: inline-block; font-weight: 900; font-size: 13.5px; color: var(--purple); margin-bottom: 8px; }
.v-news-item { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 13.5px; color: #4a3f66;
  border-bottom: 1px dashed rgba(170,150,210,.18); transition: color .2s, padding-left .2s; }
.v-news-item:last-child { border-bottom: none; }
.v-news-item:hover { color: var(--pink); padding-left: 5px; }
.v-num { flex-shrink: 0; width: 19px; height: 19px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff9ecd, #a78bfa); }
.v-num:nth-child(2) { background: linear-gradient(135deg, #ff9ecd, #ff6fb0); }
.v-num:nth-child(3) { background: linear-gradient(135deg, #ffb36b, #ff8fa3); }
body.dark .visitor-card { background: linear-gradient(115deg, rgba(58,48,96,.85) 0%, rgba(44,36,74,.7) 50%, rgba(52,42,88,.78) 100%);
  border-color: rgba(255,255,255,.14); }
body.dark .v-chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #cdbfe8; }
body.dark .v-news-item { color: #b9abd8; border-color: rgba(255,255,255,.1); }
@media (max-width:600px){ .v-chip { font-size: 12px; padding: 5px 10px; } .visitor-card { padding: 14px 14px; } }

/* 精准定位 chip */
.v-locate { cursor: pointer; transition: transform .2s, box-shadow .2s; }
.v-locate:hover { transform: scale(1.04); box-shadow: 0 6px 18px rgba(255,143,200,.3); }
.v-locate .v-loc { color: var(--purple); font-weight: 800; }
.v-locate::before { content:""; width:7px; height:7px; border-radius:50%; background: #5ef27e;
  box-shadow: 0 0 8px rgba(94,242,126,.9); animation: locBlink 1.6s ease-in-out infinite; }
@keyframes locBlink { 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* https 提示条 */
.https-hint { position: fixed; top: 0; left: 0; right: 0; z-index: 999; text-align: center;
  padding: 10px 16px; font-size: 13.5px; color: #5a3d7a; font-weight: 600;
  background: linear-gradient(115deg, rgba(255,214,236,.96), rgba(224,208,255,.96));
  backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 6px 24px rgba(170,120,255,.25); }
.https-hint a { display: inline-block; margin-left: 10px; padding: 3px 14px; border-radius: 999px;
  color: #fff; font-size: 12.5px; font-weight: 800;
  background: linear-gradient(135deg, #ff9ecd, #a78bfa);
  box-shadow: 0 4px 12px rgba(255,143,200,.4); text-decoration: none; }
.https-hint a:active { transform: scale(.96); }
body.dark .https-hint { background: linear-gradient(115deg, rgba(70,52,110,.96), rgba(56,44,92,.96)); color: #e3d5ff; }

/* 访客卡定位说明 */
.v-hint { margin-top: 9px; font-size: 12px; color: var(--sub); }
.v-ip b { color: var(--purple); }
.v-locate { cursor: pointer; }
.v-locate .v-loc { color: var(--purple); font-weight: 800; }
.v-locate:hover { transform: scale(1.04); box-shadow: 0 6px 18px rgba(255,143,200,.3); }
.v-locate::before { content:""; width:7px; height:7px; border-radius:50%; background:#5ef27e;
  box-shadow: 0 0 8px rgba(94,242,126,.9); animation: locBlink 1.6s ease-in-out infinite; }
@keyframes locBlink { 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.v-locate::before { pointer-events: none; }
.v-locate::after { pointer-events: none; }

/* 定位开启指引 */
.loc-guide { margin-top: 12px; padding: 14px 16px; border-radius: 14px; font-size: 13px; line-height: 1.85;
  color: #4a3f66;
  background: linear-gradient(115deg, rgba(255,255,255,.92), rgba(255,255,255,.55));
  backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9), 0 8px 24px rgba(170,120,255,.18); }
.loc-guide b { color: var(--purple); }
.loc-guide ul { margin: 6px 0 0; padding-left: 18px; }
.loc-guide li { margin: 3px 0; }
body.dark .loc-guide { background: linear-gradient(115deg, rgba(58,48,96,.9), rgba(44,36,74,.7));
  border-color: rgba(255,255,255,.14); color: #cdbfe8; }