/* ===========================================================
   Dustの个人空间 · 液态玻璃主题（蓝 / 白 / 粉）
   =========================================================== */
:root {
  --blue-500: #4f8cff;
  --blue-600: #3576f0;
  --blue-300: #9dc0ff;
  --blue-100: #dfe9ff;
  --pink-500: #ff8fb1;
  --pink-400: #ffa9c4;
  --pink-100: #ffe4ec;
  --violet: #9a8cff;

  --ink-900: #1f2a44;
  --ink-700: #3c4a68;
  --ink-500: #64708c;
  --ink-300: #93a0bb;

  --glass-bg: linear-gradient(140deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .46));
  --glass-bg-strong: linear-gradient(140deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .66));
  --glass-border: rgba(255, 255, 255, .8);
  --glass-shadow: 0 10px 34px rgba(58, 92, 160, .13), 0 2px 6px rgba(58, 92, 160, .06);
  --glass-shadow-lg: 0 24px 60px rgba(58, 92, 160, .18);
  --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .35);

  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --blur: 18px;

  --page: 1180px;
  --grad-main: linear-gradient(120deg, var(--blue-500), var(--violet) 45%, var(--pink-500));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  color: var(--ink-900);
  background: #f2f6ff;
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}

/* ---------- 背景：柔和流动光斑 ---------- */
.bg-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; background:
  linear-gradient(170deg, #f7faff 0%, #eef4ff 45%, #fdf1f6 100%); }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.blob-1 { width: 46vw; height: 46vw; background: radial-gradient(circle at 30% 30%, #8fb6ff, rgba(143,182,255,0) 70%); top: -12vw; left: -8vw; animation: float1 24s ease-in-out infinite; }
.blob-2 { width: 40vw; height: 40vw; background: radial-gradient(circle at 60% 40%, #ffb4cb, rgba(255,180,203,0) 70%); top: 22vh; right: -10vw; animation: float2 28s ease-in-out infinite; }
.blob-3 { width: 34vw; height: 34vw; background: radial-gradient(circle at 50% 50%, #bcc6ff, rgba(188,198,255,0) 70%); bottom: -12vw; left: 22vw; animation: float3 32s ease-in-out infinite; }
.bg-grain { position: absolute; inset: 0; background-image: radial-gradient(rgba(120,150,220,.08) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(#000 40%, transparent 85%); }
@keyframes float1 { 50% { transform: translate3d(6vw, 4vh, 0) scale(1.12); } }
@keyframes float2 { 50% { transform: translate3d(-7vw, -5vh, 0) scale(1.08); } }
@keyframes float3 { 50% { transform: translate3d(4vw, -6vh, 0) scale(1.14); } }

/* ---------- 玻璃基类 ---------- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur)) saturate(165%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(165%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--inner-highlight);
  border-radius: var(--radius-lg);
}

.container { width: min(100% - 40px, var(--page)); margin: 0 auto; padding: 24px 0 40px; }

/* ---------- 顶栏 ---------- */
.topbar { position: sticky; top: 14px; z-index: 50; width: min(100% - 32px, var(--page)); margin: 14px auto 0; border-radius: var(--radius-xl); }
.topbar-inner { display: flex; align-items: center; gap: 18px; padding: 12px 18px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex: none; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; overflow: hidden;
  background: var(--grad-main); color: #fff; font-weight: 800; font-size: 20px;
  box-shadow: 0 8px 20px rgba(79, 140, 255, .35), inset 0 1px 0 rgba(255,255,255,.6);
  flex: none;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text b { font-size: 16px; letter-spacing: .3px; }
.brand-text i { font-style: normal; font-size: 12px; color: var(--ink-500); }

.nav { display: flex; gap: 4px; flex: 1; }
.nav a {
  position: relative; text-decoration: none; color: var(--ink-700); font-size: 14px;
  padding: 8px 15px; border-radius: 999px; transition: .25s; white-space: nowrap; font-weight: 500;
}
.nav a:hover { color: var(--blue-600); background: rgba(255,255,255,.7); }
.nav a.active { color: #fff; background: var(--grad-main); box-shadow: 0 8px 18px rgba(79,140,255,.3); }

.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.searchbox {
  display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.85); transition: .25s;
}
.searchbox:focus-within { border-color: var(--blue-300); box-shadow: 0 0 0 4px rgba(79,140,255,.12); background: #fff; }
.searchbox input { border: 0; outline: 0; background: transparent; font-size: 13px; width: 150px; color: var(--ink-900); }
.ico { width: 16px; height: 16px; stroke: var(--ink-500); stroke-width: 2; fill: none; stroke-linecap: round; }

.nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink-700); border-radius: 2px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.8); cursor: pointer;
  font-size: 14px; font-weight: 500; font-family: inherit; color: var(--ink-900);
  background: var(--glass-bg-strong); backdrop-filter: blur(10px); transition: .22s;
  box-shadow: 0 4px 14px rgba(58,92,160,.1); text-decoration: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(58,92,160,.16); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--grad-main); color: #fff; border-color: transparent; box-shadow: 0 10px 24px rgba(79,140,255,.32); }
.btn-pink { background: linear-gradient(120deg, var(--pink-500), #ffb3cd); color: #fff; border-color: transparent; box-shadow: 0 10px 24px rgba(255,143,177,.32); }
.btn-ghost { background: rgba(255,255,255,.5); }
.btn-danger { background: linear-gradient(120deg, #ff7a94, #ff9db1); color: #fff; border-color: transparent; }
.btn-sm { padding: 6px 13px; font-size: 13px; }
.btn-icon { padding: 7px; width: 34px; height: 34px; border-radius: 50%; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- 工具条/标题区 ---------- */
.page-head { padding: 26px 30px; margin-bottom: 22px; position: relative; overflow: hidden; }
.page-head::after {
  content: ''; position: absolute; width: 220px; height: 220px; right: -70px; top: -90px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,143,177,.35), transparent 70%); filter: blur(10px);
  pointer-events: none;
}
/* 页头一行放得下「栏目信息 + 右侧快捷入口」，并压在装饰光斑之上（否则光斑会挡住按钮点击） */
.page-head-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
.page-head-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.page-head h1 { margin: 0 0 6px; font-size: 28px; letter-spacing: .5px; }
.page-head p { margin: 0; color: var(--ink-500); font-size: 14px; }
.section-title { display: flex; align-items: center; gap: 10px; margin: 34px 0 16px; font-size: 18px; font-weight: 600; }
.section-title .line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(120,150,220,.35), transparent); }

/* ---------- Hero ---------- */
.hero { padding: 46px 42px; margin-bottom: 26px; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 220px at 85% 10%, rgba(255,169,196,.35), transparent 70%),
              radial-gradient(500px 200px at 10% 90%, rgba(157,192,255,.4), transparent 70%);
}
.hero-inner { position: relative; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 12.5px;
  background: rgba(255,255,255,.75); border: 1px solid #fff; color: var(--ink-700); box-shadow: var(--glass-shadow);
}
.hero-badge .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--pink-500); box-shadow: 0 0 0 4px rgba(255,143,177,.2); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(255,143,177,.06); } }
.hero h1 { margin: 18px 0 8px; font-size: 42px; line-height: 1.25; letter-spacing: 1px; }
.hero h1 .grad { background: var(--grad-main); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { margin: 0 0 22px; color: var(--ink-500); font-size: 15.5px; max-width: 620px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 28px; margin-top: 30px; flex-wrap: wrap; }
.hero-stats div b { display: block; font-size: 24px; background: var(--grad-main); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-stats div span { font-size: 12.5px; color: var(--ink-500); }

/* ---------- 分类卡 ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; }
.cat-card {
  position: relative; overflow: hidden; padding: 22px; text-decoration: none; color: inherit;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--glass-shadow-lg); }
.cat-card::before {
  content: ''; position: absolute; width: 150px; height: 150px; border-radius: 50%; right: -50px; bottom: -60px;
  background: var(--cat-color, rgba(79,140,255,.25)); filter: blur(18px); transition: .4s;
}
.cat-card:hover::before { transform: scale(1.25); }
.cat-card[data-theme="blue"] { --cat-color: rgba(79,140,255,.3); }
.cat-card[data-theme="pink"] { --cat-color: rgba(255,143,177,.3); }
.cat-card[data-theme="violet"] { --cat-color: rgba(154,140,255,.3); }
.cat-icon { width: 46px; height: 46px; display: grid; place-items: center; font-size: 22px; border-radius: 15px; background: rgba(255,255,255,.75); border: 1px solid #fff; box-shadow: var(--glass-shadow); }
.cat-card h3 { margin: 14px 0 6px; font-size: 18px; }
.cat-card p { margin: 0 0 14px; font-size: 13px; color: var(--ink-500); min-height: 40px; }
.cat-meta { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--ink-500); }
.cat-arrow { font-size: 18px; transition: .3s; }
.cat-card:hover .cat-arrow { transform: translateX(5px); }

/* ---------- 文章卡片 ---------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.post-card { padding: 22px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s; position: relative; overflow: hidden; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--glass-shadow-lg); }
.post-top { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-500); }
.tag-pill { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.tag-blue { background: var(--blue-100); color: var(--blue-600); }
.tag-pink { background: var(--pink-100); color: #e35d86; }
.tag-violet { background: #ece8ff; color: #6b56d6; }
.post-card h3 { margin: 0; font-size: 17.5px; line-height: 1.5; }
.post-card p.sum { margin: 0; font-size: 13.5px; color: var(--ink-500); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px dashed rgba(120,150,220,.25); font-size: 12px; color: var(--ink-300); }
.post-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.lock-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #fff4f7; color: #e35d86; font-size: 11px; }
.pin-chip { position: absolute; right: 0; top: 0; padding: 4px 14px 6px; border-radius: 0 0 0 14px; background: var(--grad-main); color: #fff; font-size: 11px; }

/* 列表型卡片 */
.post-list { display: flex; flex-direction: column; gap: 14px; }
.post-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 18px; padding: 18px 22px; align-items: center; transition: .25s; text-decoration: none; color: inherit; }
.post-row:hover { transform: translateX(4px); box-shadow: var(--glass-shadow-lg); }
.post-row .thumb { width: 92px; height: 66px; border-radius: 12px; object-fit: cover; background: var(--blue-100); }
.post-row .thumb-ph { display: grid; place-items: center; font-size: 26px; background: linear-gradient(135deg, var(--blue-100), var(--pink-100)); }

/* ---------- 文章详情 ---------- */
.article-wrap { max-width: 830px; margin: 0 auto; }
.article-head { padding: 32px 34px 26px; }
.article-head h1 { margin: 12px 0 10px; font-size: 32px; line-height: 1.35; }
.article-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-500); align-items: center; }
.article-body { padding: 14px 34px 34px; margin-top: 16px; }
.attachments { margin-top: 30px; padding: 20px; border-radius: var(--radius-md); background: rgba(255,255,255,.55); border: 1px solid #fff; box-shadow: var(--glass-shadow); }
.attachments h4 { margin: 0 0 14px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.att-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; background: #fff; border: 1px solid rgba(120,150,220,.14); margin-bottom: 9px; transition: .2s; }
.att-item:hover { border-color: var(--blue-300); box-shadow: 0 6px 16px rgba(58,92,160,.1); }
.att-item .ext { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--grad-main); flex: none; letter-spacing: .5px; }
.att-item.locked { background: linear-gradient(120deg, rgba(255,241,245,.95), #fff); border-color: rgba(255,143,177,.45); }
.att-item.locked .ext.locked-ext { background: linear-gradient(120deg, #ff8fb1, #ffb3cd); font-size: 15px; }
.att-item.locked .meta b { color: #a3496b; }
.att-item .meta { flex: 1; min-width: 0; }
.att-item .meta b { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-item .meta span { font-size: 11.5px; color: var(--ink-300); }

/* ---------- Markdown 排版 ---------- */
.md-body { font-size: 15.5px; color: var(--ink-700); word-wrap: break-word; }
.md-body > *:first-child { margin-top: 0; }
.md-body h1, .md-body h2, .md-body h3, .md-body h4 { color: var(--ink-900); line-height: 1.4; margin: 30px 0 14px; scroll-margin-top: 90px; }
.md-body h1 { font-size: 25px; }
.md-body h2 { font-size: 21px; padding-left: 12px; border-left: 4px solid transparent; border-image: var(--grad-main) 1; }
.md-body h3 { font-size: 17.5px; }
.md-body p { margin: 14px 0; }
.md-body a { color: var(--blue-600); text-decoration: none; border-bottom: 1px solid rgba(79,140,255,.35); }
.md-body a:hover { background: rgba(79,140,255,.08); }
.md-body ul, .md-body ol { padding-left: 24px; }
.md-body li { margin: 7px 0; }
.md-body li::marker { color: var(--pink-500); }
.md-body blockquote { margin: 18px 0; padding: 14px 18px; border-radius: 12px; background: linear-gradient(120deg, rgba(222,233,255,.6), rgba(255,228,236,.6)); border: 1px solid rgba(255,255,255,.9); color: var(--ink-700); }
.md-body blockquote p { margin: 6px 0; }
.md-body hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(120,150,220,.4), transparent); margin: 30px 0; }
.md-body img { max-width: 100%; border-radius: 14px; cursor: zoom-in; box-shadow: var(--glass-shadow); display: block; }
.md-body table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 18px 0; font-size: 14px; overflow: hidden; border-radius: 12px; box-shadow: var(--glass-shadow); }
.md-body th { background: linear-gradient(120deg, var(--blue-100), var(--pink-100)); padding: 11px 14px; text-align: left; font-weight: 600; color: var(--ink-900); }
.md-body td { padding: 11px 14px; background: rgba(255,255,255,.75); border-top: 1px solid rgba(120,150,220,.15); }
.md-body code { padding: 2px 6px; border-radius: 6px; background: rgba(79,140,255,.1); color: #2f6ad9; font-size: 13.5px; font-family: "JetBrains Mono", Consolas, Menlo, monospace; }
.md-body pre { position: relative; margin: 20px 0; padding: 18px 18px 16px; border-radius: 16px; overflow-x: auto; background: rgba(246,249,255,.9); border: 1px solid rgba(255,255,255,.9); box-shadow: var(--glass-shadow), var(--inner-highlight); }
.md-body pre code { background: none; padding: 0; color: var(--ink-700); font-size: 13.5px; line-height: 1.75; }
.md-body .copy-btn { position: absolute; right: 10px; top: 10px; opacity: 0; transition: .2s; font-size: 11.5px; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(120,150,220,.25); background: rgba(255,255,255,.9); cursor: pointer; color: var(--ink-500); }
.md-body pre:hover .copy-btn { opacity: 1; }
.md-body .task-item { list-style: none; margin-left: -18px; }
.md-body input[type="checkbox"] { accent-color: var(--pink-500); margin-right: 8px; }
.tok-key { color: #c24189; font-weight: 600; }
.tok-str { color: #15803d; }
.tok-com { color: #94a3b8; font-style: italic; }
.tok-num { color: #d97706; }
.tok-func { color: #7c3aed; }
.tok-type { color: #0284c7; }

/* ---------- 关于页 ---------- */
.about-wrap { max-width: 780px; margin: 0 auto; }
.about-profile { display: flex; gap: 22px; align-items: center; padding: 28px 30px; margin-bottom: 18px; flex-wrap: wrap; }
.about-profile .about-me { min-width: 0; }
.avatar { width: 82px; height: 82px; border-radius: 26px; display: grid; place-items: center; font-size: 32px; background: var(--grad-main); color: #fff; box-shadow: 0 12px 26px rgba(79,140,255,.32); flex: none; overflow: hidden; }
.avatar img, .avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-profile h2 { margin: 0 0 4px; }
.about-profile .sign { color: var(--ink-500); font-size: 14px; }

/* ---------- 侧栏小组件 ---------- */
.layout-2col { display: grid; grid-template-columns: 1fr 290px; gap: 22px; align-items: start; }
@media (max-width: 940px) { .layout-2col { grid-template-columns: 1fr; } }
.side-card { padding: 20px; margin-bottom: 16px; }
.side-card h4 { margin: 0 0 14px; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a { padding: 4px 11px; border-radius: 999px; font-size: 12.5px; text-decoration: none; background: rgba(255,255,255,.72); border: 1px solid #fff; color: var(--ink-700); box-shadow: 0 2px 8px rgba(58,92,160,.07); transition: .2s; }
.tag-cloud a:hover { background: var(--grad-main); color: #fff; transform: translateY(-2px); }
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li { padding: 9px 0; border-bottom: 1px dashed rgba(120,150,220,.22); font-size: 13.5px; }
.mini-list li:last-child { border: 0; }
.mini-list a { text-decoration: none; color: var(--ink-700); }
.mini-list a:hover { color: var(--blue-600); }

/* ---------- 表单 ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--ink-500); margin-bottom: 7px; font-weight: 500; }
.input, .textarea, select.input {
  width: 100%; padding: 11px 15px; border-radius: 13px; font-family: inherit; font-size: 14px; color: var(--ink-900);
  background: rgba(255,255,255,.8); border: 1px solid rgba(120,150,220,.2); outline: none; transition: .22s;
}
.input:focus, .textarea:focus { border-color: var(--blue-300); box-shadow: 0 0 0 4px rgba(79,140,255,.12); background: #fff; }
.textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.switch-line { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-700); cursor: pointer; }
.check input { accent-color: var(--blue-500); width: 16px; height: 16px; }

/* ---------- 登录 ---------- */
.auth-wrap { max-width: 400px; margin: 60px auto; padding: 34px 32px; text-align: center; }
.auth-wrap h2 { margin: 0 0 6px; font-size: 24px; }
.auth-wrap .sub { color: var(--ink-500); font-size: 13.5px; margin-bottom: 24px; }
.auth-wrap .field { text-align: left; }
.hint-box { margin-top: 18px; padding: 12px 14px; border-radius: 12px; font-size: 12.5px; background: rgba(255,228,236,.7); border: 1px solid rgba(255,255,255,.9); color: #a3496b; text-align: left; }

/* ---------- 后台 ---------- */
.admin-layout { display: grid; grid-template-columns: 210px 1fr; gap: 22px; align-items: start; }
@media (max-width: 860px) { .admin-layout { grid-template-columns: 1fr; } }
.admin-nav { padding: 14px; position: sticky; top: 96px; }
.admin-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; text-decoration: none; color: var(--ink-700); font-size: 14px; transition: .2s; }
.admin-nav a:hover { background: rgba(255,255,255,.75); }
.admin-nav a.active { background: var(--grad-main); color: #fff; box-shadow: 0 8px 18px rgba(79,140,255,.28); }
.admin-panel { padding: 26px 28px; }
.admin-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.admin-title h2 { margin: 0; font-size: 20px; }

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th { text-align: left; padding: 11px 12px; font-size: 12.5px; color: var(--ink-500); font-weight: 600; border-bottom: 1px solid rgba(120,150,220,.2); white-space: nowrap; }
table.data td { padding: 11px 12px; border-bottom: 1px dashed rgba(120,150,220,.18); vertical-align: middle; }
table.data tr:hover td { background: rgba(255,255,255,.5); }
.badge { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.badge-ok { background: #dcfce7; color: #15803d; }
.badge-draft { background: #fef3c7; color: #b45309; }
.badge-lock { background: var(--pink-100); color: #e35d86; }
.badge-admin { background: var(--blue-100); color: var(--blue-600); }

.editor-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .editor-layout { grid-template-columns: 1fr; } }
textarea.code-editor { min-height: 460px; font-family: "JetBrains Mono", Consolas, Menlo, monospace; font-size: 13.5px; line-height: 1.8; }
.editor-preview { border-radius: 13px; padding: 20px; background: rgba(255,255,255,.66); border: 1px solid rgba(120,150,220,.2); max-height: 560px; overflow: auto; }
.editor-preview .md-body { font-size: 14.5px; }
.tool-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tool-bar button { padding: 5px 11px; font-size: 12.5px; border-radius: 9px; border: 1px solid rgba(120,150,220,.2); background: rgba(255,255,255,.8); cursor: pointer; color: var(--ink-700); }
.tool-bar button:hover { border-color: var(--blue-300); color: var(--blue-600); }

.drop-zone { border: 2px dashed rgba(79,140,255,.35); border-radius: 14px; padding: 26px; text-align: center; color: var(--ink-500); font-size: 13.5px; transition: .2s; cursor: pointer; background: rgba(255,255,255,.5); }
.drop-zone:hover, .drop-zone.over { border-color: var(--pink-500); background: rgba(255,228,236,.5); color: #e35d86; }
.file-list { margin-top: 12px; }

/* ---------- 在线答题 ---------- */
.exam-wrap { max-width: 920px; margin: 0 auto; }
.exam-head { padding: 26px 30px; margin-bottom: 16px; }
.exam-head h1 { margin: 10px 0 6px; font-size: 26px; line-height: 1.35; }
.exam-head p { margin: 0; color: var(--ink-500); font-size: 14px; }
.exam-head p b { color: var(--blue-600); }

.exam-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; margin: 14px 0; position: relative; overflow: hidden;
}
.exam-cta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 160px at 92% 20%, rgba(255,169,196,.3), transparent 70%);
}
.exam-cta h4 { margin: 0 0 4px; font-size: 16px; }
.exam-cta p { margin: 0; font-size: 13px; color: var(--ink-500); }

.paper-frame { margin-bottom: 18px; overflow: hidden; }
.paper-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid rgba(120,150,220,.18); font-size: 13.5px; }
.paper-bar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paper-frame iframe { width: 100%; height: 78vh; border: 0; display: block; background: #fff; }

.q-section { padding: 20px 22px; margin-bottom: 16px; }
.q-section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.q-section-head h3 { margin: 0; font-size: 17px; }
.q-meta { font-size: 12.5px; color: var(--ink-500); }

.audio-box {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 14px; border-radius: 14px;
  background: linear-gradient(120deg, rgba(222,233,255,.65), rgba(255,228,236,.65));
  border: 1px solid rgba(255,255,255,.9);
}
.audio-box .audio-title { font-size: 13px; font-weight: 600; flex: 1; min-width: 160px; }
.audio-box audio { height: 36px; flex: 2; min-width: 220px; }

.q-group { margin-bottom: 12px; }
.q-group-label { font-size: 12.5px; color: var(--ink-500); margin-bottom: 6px; font-weight: 600; }
.q-rows { display: flex; flex-direction: column; gap: 4px; }
.q-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px;
  transition: background .2s;
}
.q-row:hover { background: rgba(255,255,255,.6); }
.q-no { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: rgba(255,255,255,.85); border: 1px solid rgba(120,150,220,.2); color: var(--ink-700); }
.opt {
  width: 32px; height: 32px; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600;
  border: 1px solid rgba(120,150,220,.25); background: rgba(255,255,255,.8); color: var(--ink-700); transition: .18s;
}
.opt:hover { border-color: var(--blue-300); transform: translateY(-1px); }
.opt.active { background: var(--grad-main); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgba(79,140,255,.3); }
.opt.correct { outline: 2px solid #34d399; outline-offset: 1px; }
.q-ans { font-size: 12px; color: var(--ink-500); margin-left: auto; }

/* 填空题（完形填空） */
.q-row.q-text { gap: 10px; }
.fill-input {
  flex: 1; min-width: 0; max-width: 320px; padding: 8px 12px; border-radius: 10px; font-family: inherit; font-size: 14px;
  border: 1px solid rgba(120,150,220,.28); background: rgba(255,255,255,.9); color: var(--ink-900); outline: none; transition: .18s;
}
.fill-input:focus { border-color: var(--blue-300); box-shadow: 0 0 0 4px rgba(79,140,255,.12); background: #fff; }
.fill-input:disabled { opacity: .9; }
.q-row.is-right .fill-input { border-color: rgba(52,211,153,.7); background: rgba(226,246,234,.85); }
.q-row.is-wrong .fill-input { border-color: rgba(255,143,177,.8); background: rgba(255,237,242,.9); }
.q-row.is-miss .fill-input { border-style: dashed; }
.q-row.is-right { background: rgba(52,211,153,.12); }
.q-row.is-wrong { background: rgba(255,143,177,.14); }
.q-row.is-miss { background: rgba(148,163,184,.12); }
.q-row.is-right .q-ans { color: #15803d; }
.q-row.is-wrong .q-ans { color: #c2415f; }

.exam-bar {
  position: sticky; bottom: 12px; z-index: 20; padding: 12px 18px; margin-top: 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.bar-info { font-size: 13.5px; color: var(--ink-700); }
.bar-info b { color: var(--blue-600); font-size: 15px; }
.bar-time { margin-left: 14px; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.bar-actions { display: flex; gap: 8px; }

.result-panel { padding: 26px 28px; margin-top: 6px; }
.result-top { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 18px; }
.score-big {
  font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: 1px;
  background: var(--grad-main); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.score-big small { font-size: 16px; font-weight: 600; color: var(--ink-500); -webkit-text-fill-color: var(--ink-500); }
.result-side { font-size: 14px; color: var(--ink-700); }
.result-side b { font-size: 17px; }
.result-side .comment { margin-top: 6px; color: var(--pink-500); font-weight: 600; }
.rate-bar { display: inline-block; width: 70px; height: 7px; border-radius: 999px; background: rgba(120,150,220,.2); overflow: hidden; vertical-align: middle; }
.rate-bar i { display: block; height: 100%; background: var(--grad-main); border-radius: 999px; }
.result-note { font-size: 12.5px; color: var(--ink-500); margin: 14px 0 0; }

/* 做完试卷 → 解锁答案 */
.exam-tip {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 13.5px;
  background: linear-gradient(120deg, rgba(255,241,245,.9), rgba(255,255,255,.7));
  border: 1px solid rgba(255,143,177,.4); color: #a3496b;
}
.unlock-box {
  margin-top: 20px; padding: 18px 20px; border-radius: 16px;
  background: linear-gradient(120deg, rgba(226,246,234,.85), rgba(255,255,255,.75));
  border: 1px solid rgba(52,211,153,.35);
}
.unlock-box h4 { margin: 0 0 6px; font-size: 15.5px; color: #15803d; }
.unlock-box p { margin: 0 0 12px; font-size: 13px; color: var(--ink-500); }
.unlock-box .att-item { background: #fff; margin-bottom: 8px; }
.unlock-box .att-item:last-child { margin-bottom: 0; }
.unlock-box .ext { background: linear-gradient(120deg, #34d399, #6ee7b7); }
.unlock-box.locked-hint {
  background: linear-gradient(120deg, rgba(255,246,227,.9), rgba(255,255,255,.75));
  border-color: rgba(240,180,41,.4);
}
.unlock-box.locked-hint h4 { color: var(--warn, #b45309); }

/* ---------- 后台：答案录入 ---------- */
.ans-section { padding: 16px 18px; margin-bottom: 14px; border-radius: var(--radius-md); background: rgba(255,255,255,.55); border: 1px solid #fff; box-shadow: var(--glass-shadow); }
.ans-section-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 12px; }
.ans-section-head h4 { margin: 0; font-size: 15px; }
.ans-section-head small { font-weight: 400; color: var(--ink-500); font-size: 12.5px; }
.ans-paste { display: flex; gap: 8px; flex: 1; min-width: 280px; }
.ans-paste .input { flex: 1; }
.ans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; }
.ans-cell { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.75); border: 1px solid rgba(120,150,220,.15); }
.ans-cell.filled { border-color: var(--blue-300); background: rgba(223,233,255,.5); }
.ans-no { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; background: #fff; border: 1px solid rgba(120,150,220,.2); }
.ans-opt { width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 600; font-family: inherit; border: 1px solid rgba(120,150,220,.22); background: #fff; color: var(--ink-700); transition: .15s; }
.ans-opt:hover { border-color: var(--blue-300); }
.ans-opt.active { background: var(--grad-main); color: #fff; border-color: transparent; }

/* 答案录入：填空题 */
.ans-text-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ans-text-cell { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.75); border: 1px solid rgba(120,150,220,.15); }
.ans-text-cell .ans-no { flex: none; }
.ans-text-input { padding: 7px 11px; font-size: 13.5px; }
.ans-text-input.filled { border-color: var(--blue-300); background: rgba(223,233,255,.5); }
.ans-tip { font-size: 12.5px; color: var(--ink-500); margin: 10px 0 0; }
.ans-tip code { background: rgba(79,140,255,.1); color: #2f6ad9; padding: 1px 6px; border-radius: 6px; font-size: 12px; }

/* ---------- 通用状态 ---------- */
.empty { text-align: center; padding: 54px 20px; color: var(--ink-300); }
.empty .emo { font-size: 40px; display: block; margin-bottom: 10px; }
.skeleton { padding: 22px; text-align: center; color: var(--ink-300); }
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 26px; }
.pager button { min-width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(120,150,220,.2); background: rgba(255,255,255,.75); cursor: pointer; color: var(--ink-700); }
.pager button.active { background: var(--grad-main); color: #fff; border-color: transparent; }
.pager button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Toast / Modal / Lightbox ---------- */
.toast-wrap { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.toast { padding: 11px 20px; border-radius: 14px; font-size: 14px; color: var(--ink-900); background: var(--glass-bg-strong); backdrop-filter: blur(16px); border: 1px solid #fff; box-shadow: var(--glass-shadow-lg); animation: toastIn .3s cubic-bezier(.2,.9,.2,1); }
.toast.err { background: linear-gradient(120deg, #ffe4e8, #fff); border-color: #ffc7d1; color: #c2415f; }
.toast.ok { background: linear-gradient(120deg, #e2f6ea, #fff); border-color: #b8e6c8; color: #15803d; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } }

.modal-root:not(:empty) { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: rgba(90,110,160,.28); backdrop-filter: blur(6px); }
.modal-card { width: min(92vw, 420px); padding: 26px; animation: modalIn .28s cubic-bezier(.2,.9,.2,1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }

.lightbox:not(:empty) { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; background: rgba(40,55,90,.55); backdrop-filter: blur(10px); cursor: zoom-out; }
.lightbox img { max-width: 92vw; max-height: 90vh; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.3); }

.locked-note { text-align: center; padding: 40px 24px; }
.locked-note .ico-lock { font-size: 44px; }
.locked-note p { color: var(--ink-500); margin: 12px 0 20px; }

.ghost-link { color: var(--ink-500); text-decoration: none; font-size: 13px; }
.ghost-link:hover { color: var(--blue-600); }
.footer { text-align: center; padding: 10px 0 34px; }
.footer-card { display: inline-flex; gap: 10px; align-items: center; padding: 10px 20px; font-size: 12.5px; color: var(--ink-500); border-radius: 999px; }
.footer .dot { opacity: .5; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .topbar { width: calc(100% - 20px); }
  .topbar-inner { flex-wrap: wrap; gap: 12px; }
  .nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 4px; display: none; }
  .nav.open { display: flex; }
  .nav-toggle { display: flex; }
  .searchbox input { width: 100px; }
  .hero { padding: 32px 24px; }
  .hero h1 { font-size: 30px; }
  .post-row { grid-template-columns: 1fr; }
  .post-row .thumb, .post-row .thumb-ph { display: none; }
  .article-head, .article-body, .admin-panel { padding-left: 20px; padding-right: 20px; }
  .article-head h1 { font-size: 24px; }
  .editor-layout { grid-template-columns: 1fr; }
}

/* ===========================================================
   轻量动效：光标波纹 / 按钮果冻回弹 / 点击跳动
   触屏设备与「减少动效」偏好下自动关闭
   =========================================================== */
.cursor-glow {
  position: fixed; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; pointer-events: none; z-index: 8; opacity: 0;
  transition: opacity .25s ease;
  will-change: transform;
  background: radial-gradient(circle, rgba(79, 140, 255, .5) 0%, rgba(255, 143, 177, .32) 52%, rgba(255, 255, 255, 0) 72%);
  filter: blur(1.5px);
}
.cursor-glow.on { opacity: .95; }
.cursor-glow.dim { opacity: .28; }

.cursor-ripple {
  position: fixed; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; pointer-events: none; z-index: 7;
  border: 1.5px solid rgba(79, 140, 255, .45);
  animation: rippleOut .72s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes rippleOut {
  from { transform: scale(.32); opacity: .6; }
  to   { transform: scale(2.2); opacity: 0; }
}

/* 悬停：果冻回弹（末态保留轻微上浮） */
@keyframes jellyIn {
  0%   { transform: translateY(0) scale(1, 1); }
  28%  { transform: translateY(-3px) scale(1.14, .9); }
  42%  { transform: translateY(-1px) scale(.94, 1.08); }
  58%  { transform: translateY(-3px) scale(1.07, .96); }
  72%  { transform: translateY(-2px) scale(.98, 1.02); }
  86%  { transform: translateY(-2px) scale(1.02, .99); }
  100% { transform: translateY(-2px) scale(1, 1); }
}
.btn:hover,
.nav a:hover,
.admin-nav a:hover,
.tag-cloud a:hover,
.pager button:hover,
.tool-bar button:hover,
.opt:hover,
.ans-opt:hover { animation: jellyIn .46s cubic-bezier(.2, .8, .2, 1) both; }

/* 点击：先压下再弹起 */
@keyframes pressJump {
  0%   { transform: translateY(0) scale(1, 1); }
  26%  { transform: translateY(3px) scale(.92, 1.08); }
  55%  { transform: translateY(-6px) scale(1.06, .95); }
  78%  { transform: translateY(-1px) scale(1.01, 1.01); }
  100% { transform: translateY(0) scale(1, 1); }
}
.is-press { animation: pressJump .42s cubic-bezier(.2, .8, .2, 1) !important; }

/* 头像、Logo 呼吸感的轻微悬浮（只是一点点） */
.brand:hover .brand-mark { animation: jellyIn .5s cubic-bezier(.2, .8, .2, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .cursor-glow, .cursor-ripple { display: none !important; }
  .btn:hover, .nav a:hover, .admin-nav a:hover, .tag-cloud a:hover,
  .pager button:hover, .tool-bar button:hover, .opt:hover, .ans-opt:hover,
  .brand:hover .brand-mark { animation: none !important; }
  .is-press { animation: none !important; }
}

/* ---------- 排行榜 ---------- */
.lb-card h4 { justify-content: space-between; }
.lb-total { font-size: 11.5px; font-weight: 500; color: var(--ink-500); background: rgba(79, 140, 255, .1); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.lb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lb-table th { text-align: left; font-weight: 600; font-size: 11.5px; color: var(--ink-300); padding: 0 0 8px; border-bottom: 1px solid rgba(120, 150, 220, .18); }
.lb-table th:nth-child(2), .lb-table th:nth-child(3) { text-align: right; }
.lb-table td { padding: 9px 0; border-bottom: 1px dashed rgba(120, 150, 220, .16); vertical-align: middle; }
.lb-table tr:last-child td { border-bottom: none; }
.lb-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 8px; margin-right: 7px;
  background: rgba(120, 150, 220, .13); color: var(--ink-500);
  font-size: 11.5px; font-weight: 700; vertical-align: middle;
}
.lb-top1 .lb-rank { background: linear-gradient(120deg, #ffd76e, #ffb020); color: #7a4b00; }
.lb-top2 .lb-rank { background: linear-gradient(120deg, #e6ecf8, #c3cde0); color: #5a6478; }
.lb-top3 .lb-rank { background: linear-gradient(120deg, #ffd9b8, #f0ac70); color: #7a4a1e; }
.lb-user { font-weight: 600; color: var(--ink-900); vertical-align: middle; }
.lb-badge { font-size: 10px; font-weight: 700; color: #fff; background: var(--grad-main); padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.lb-paper { display: block; font-size: 11px; color: var(--ink-300); margin-top: 3px; padding-left: 29px; }
.lb-score { text-align: right; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-score small { font-weight: 500; color: var(--ink-300); }
.lb-time { text-align: right; color: var(--ink-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-me td { background: rgba(255, 143, 177, .1); }
.lb-me td:first-child { border-radius: 10px 0 0 10px; }
.lb-me td:last-child { border-radius: 0 10px 10px 0; }
.lb-empty { font-size: 12.5px; color: var(--ink-500); padding: 8px 0 2px; line-height: 1.8; }
.lb-empty span { color: var(--ink-300); }
.lb-foot { font-size: 11.5px; color: var(--ink-300); margin: 12px 0 0; line-height: 1.7; }
.lb-foot a { color: var(--blue-500); }

/* 成绩单里的名次条 */
.rank-box {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 16px 0 4px; padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(120deg, rgba(79, 140, 255, .13), rgba(255, 143, 177, .13));
  border: 1px solid rgba(255, 255, 255, .7);
}
.rank-ico { font-size: 24px; line-height: 1; }
.rank-body { flex: 1; min-width: 190px; font-size: 13.5px; color: var(--ink-700); }
.rank-sub { font-size: 12px; color: var(--ink-500); margin-top: 5px; }
.rank-new { color: #e2658f; font-weight: 600; }

/* ---------- 进站动画（小猫咪） ---------- */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(170deg, #f7faff 0%, #eef4ff 45%, #fdf1f6 100%);
  transition: opacity .62s ease, transform .62s ease;
}
.splash-card { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.splash-cat-wrap {
  display: grid; place-items: center; padding: 9px; border-radius: 16px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 12px 30px rgba(58, 92, 160, .15), inset 0 1px 0 rgba(255, 255, 255, .95);
  animation: catBob 1.6s ease-in-out infinite;
}
.splash-cat { display: block; width: 66px; height: auto; border-radius: 7px; }
.splash-dots { display: flex; gap: 6px; }
.splash-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-300); animation: dotPulse 1.05s ease-in-out infinite; }
.splash-dots i:nth-child(2) { animation-delay: .16s; background: var(--violet); }
.splash-dots i:nth-child(3) { animation-delay: .32s; background: var(--pink-400); }
.splash-text { margin: 0; font-size: 12.5px; letter-spacing: .5px; color: var(--ink-500); }
.splash-bar { width: 118px; height: 4px; border-radius: 999px; background: rgba(120, 150, 220, .18); overflow: hidden; }
.splash-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--grad-main); animation: splashBarGrow linear both; }
.splash-skip { margin: 2px 0 0; font-size: 11.5px; color: var(--ink-300); letter-spacing: .3px; }
@keyframes splashBarGrow { from { width: 0; } to { width: 100%; } }
body.splash-on { overflow: hidden; }   /* 开屏期间锁住滚动，关掉后恢复正常 */
.splash.is-hide { opacity: 0; transform: scale(1.03); pointer-events: none; }
@keyframes catBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes dotPulse { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes splashPageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.is-ready .topbar { animation: splashPageIn .5s ease both; }
body.is-ready #view { animation: splashPageIn .58s ease .04s both; }
body.is-ready .footer { animation: splashPageIn .58s ease .08s both; }
@media (prefers-reduced-motion: reduce) {
  .splash-cat-wrap, .splash-dots i { animation: none !important; }
  body.is-ready .topbar, body.is-ready #view, body.is-ready .footer { animation: none !important; }
}

/* ---------- 关于页：社交平台主页 ---------- */
.social-card { padding: 22px 24px; }
.social-card h4 { margin: 0 0 16px; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.social-row { display: flex; flex-wrap: wrap; gap: 12px; }
.social-btn {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 9px 16px 9px 11px; border-radius: 16px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 6px 18px rgba(58, 92, 160, .1), var(--inner-highlight);
  color: var(--ink-700); font-weight: 600; font-size: 13.5px;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s, background .22s, color .22s;
}
.social-btn:hover { transform: translateY(-3px); background: var(--brand); color: #fff; box-shadow: 0 14px 30px rgba(58, 92, 160, .22); }
.social-ico {
  width: 32px; height: 32px; border-radius: 11px; flex: none;
  display: grid; place-items: center; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(120, 150, 220, .18);
  transition: background .22s, box-shadow .22s;
}
.social-ico svg { width: 17px; height: 17px; fill: var(--brand); transition: fill .22s; }
.social-btn:hover .social-ico { background: rgba(255, 255, 255, .22); box-shadow: none; }
.social-btn:hover .social-ico svg { fill: #fff; }
.social-tip { font-size: 12px; color: var(--ink-300); margin: 14px 0 0; }

/* 关于页头像栏右侧的紧凑版（只有图标） */
.social-row-inline { margin-left: auto; flex: none; gap: 8px; align-items: center; }
.social-btn-icon { padding: 4px; background: transparent; border-color: transparent; box-shadow: none; }
.social-btn-icon .social-ico { width: 40px; height: 40px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(120, 150, 220, .2), 0 4px 12px rgba(58, 92, 160, .1); }
.social-btn-icon:hover { background: transparent; box-shadow: none; }
.social-btn-icon:hover .social-ico { background: var(--brand); box-shadow: 0 10px 22px rgba(58, 92, 160, .22); }
.social-btn-icon:hover .social-ico svg { fill: #fff; }
@media (max-width: 620px) {
  .social-row-inline { margin-left: 0; width: 100%; justify-content: flex-start; }
}

/* 后台：社交链接编辑行 */
.social-edit { display: flex; flex-direction: column; gap: 8px; }
.social-edit-row { display: grid; grid-template-columns: 34px 96px 1fr; gap: 10px; align-items: center; }
.social-edit-name { font-size: 13px; color: var(--ink-700); }
.social-ico.small { width: 30px; height: 30px; border-radius: 10px; }
@media (max-width: 620px) {
  .social-edit-row { grid-template-columns: 34px 1fr; }
  .social-edit-row .input { grid-column: 1 / -1; }
}

/* ---------- 后台：访问与下载日志 ---------- */
.log-h { margin: 26px 0 12px; font-size: 15px; }
.log-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.log-stat {
  padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
  box-shadow: var(--inner-highlight);
}
.log-stat b { display: block; font-size: 22px; background: var(--grad-main); -webkit-background-clip: text; background-clip: text; color: transparent; }
.log-stat span { font-size: 12.5px; color: var(--ink-700); }
.log-stat small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-300); }

.log-chart { padding: 20px; }
.log-trend { display: flex; align-items: flex-end; gap: 7px; height: 130px; }
.log-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; height: 100%; min-width: 0; }
.log-bar i, .log-bar u {
  display: block; width: 100%; max-width: 26px; border-radius: 6px 6px 2px 2px;
  transition: height .4s ease;
}
.log-bar i { background: linear-gradient(180deg, var(--blue-300), var(--blue-500)); opacity: .85; }
.log-bar u { position: absolute; }
.log-bar { position: relative; }
.log-bar u { bottom: 22px; width: 55%; left: 22%; background: linear-gradient(180deg, var(--pink-400), var(--pink-500)); opacity: .8; }
.log-bar span { font-size: 10px; color: var(--ink-300); white-space: nowrap; }

.log-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.log-toolbar .input { max-width: 260px; }
.log-tabs { display: flex; gap: 6px; }
.log-pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding: 12px 2px 2px; font-size: 12.5px; color: var(--ink-500); }
.log-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.log-chip {
  padding: 7px 12px; border-radius: 999px; font-size: 12.5px; color: var(--ink-700);
  background: rgba(255,255,255,.75); border: 1px solid rgba(120,150,220,.22);
}
.log-chip b { color: var(--blue-600); }
.log-sub { display: block; font-size: 11.5px; color: var(--ink-300); }
table.data td code { font-size: 12px; background: rgba(120,150,220,.12); padding: 2px 6px; border-radius: 6px; }
@media (max-width: 620px) {
  .log-toolbar .input { max-width: none; flex: 1; }
  .log-trend { gap: 3px; }
  .log-bar span { font-size: 9px; }
}

/* ---------- 使用说明与免责声明 ---------- */
.rules-body { line-height: 1.95; }
.rules-body h1 { margin-top: 0; }
.rules-edit-hint { margin-top: 16px; padding: 12px 16px; font-size: 12.5px; color: var(--ink-500); }
.about-rules-link { margin: 14px 4px 0; font-size: 13px; color: var(--ink-500); }

/* ---------- 试题资料：子版块页签与 JLPT 等级筛选 ---------- */
.sub-tabs {
  display: flex; gap: 8px; padding: 10px; margin-top: 14px; border-radius: 18px;
  overflow-x: auto; scrollbar-width: none;
}
.sub-tabs::-webkit-scrollbar { display: none; }
.sub-tab {
  flex: none; padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  color: var(--ink-500); background: rgba(255,255,255,.6);
  border: 1px solid transparent; white-space: nowrap;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), background .22s, color .22s, box-shadow .22s;
}
.sub-tab:hover { color: var(--blue-600); transform: translateY(-2px); }
.sub-tab.active {
  color: #fff; background: var(--grad-main);
  box-shadow: 0 8px 20px rgba(79,140,255,.35), inset 0 1px 0 rgba(255,255,255,.5);
}
.lvl-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; margin-top: 10px; border-radius: 16px;
}
.lvl-tip { font-size: 12.5px; color: var(--ink-500); flex: 1; min-width: 200px; }
.lvl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lvl-chip {
  padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: var(--ink-500); background: rgba(255,255,255,.7);
  border: 1px solid rgba(120,150,220,.25);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), background .22s, color .22s;
}
.lvl-chip:hover { color: var(--violet); transform: translateY(-2px); }
.lvl-chip.active { color: #fff; background: var(--violet); border-color: transparent; box-shadow: 0 6px 16px rgba(154,140,255,.4); }
.sub-desc { margin: 10px 4px 0; font-size: 13px; color: var(--ink-500); }

.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 620px) { .row-3 { grid-template-columns: 1fr; } }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(120,150,220,.35); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(79,140,255,.55); background-clip: content-box; }

/* ============================================================
   访客留言板 · 首页右侧半隐藏小球
   ============================================================ */
.msg-widget { position: fixed; right: 0; top: 55%; z-index: 920; display: flex; align-items: center; transform: translateY(-50%); }
.msg-widget.hidden { display: none; }

/* 小球：一半藏在屏幕外，hover / 点开时钻出来 */
.msg-ball {
  width: 58px; height: 58px; border: none; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff; user-select: none; padding: 0;
  background: linear-gradient(135deg, #8cb8ff, #3f7dff);
  box-shadow: -2px 6px 18px rgba(63, 125, 255, .38);
  transform: translateX(46%);            /* 半隐藏 */
  transition: transform .32s cubic-bezier(.2, .9, .25, 1.15), box-shadow .32s;
}
.msg-ball:hover { box-shadow: -2px 8px 24px rgba(63, 125, 255, .55); }
.msg-widget:hover .msg-ball, .msg-widget.open .msg-ball { transform: translateX(0); }
.msg-ball .pulse { position: absolute; width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(140, 184, 255, .7); animation: msgPulse 2.6s ease-out infinite; pointer-events: none; }
@keyframes msgPulse { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.65); opacity: 0; } }

/* 钻出的面板 */
.msg-panel {
  width: min(330px, 88vw); max-height: min(540px, 72vh);
  display: flex; flex-direction: column; border-radius: 20px; padding: 14px 14px 12px;
  opacity: 0; transform: translateX(28px); pointer-events: none;
  transition: opacity .28s ease, transform .3s cubic-bezier(.2, .9, .25, 1.1);
  box-shadow: 0 18px 50px rgba(50, 80, 160, .18);
}
.msg-widget:hover .msg-panel, .msg-widget.open .msg-panel { opacity: 1; transform: translateX(0); pointer-events: auto; }

.msg-head { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 4px 10px; border-bottom: 1px dashed rgba(120, 150, 220, .3); }
.msg-head b { font-size: 15.5px; }
.msg-head span { font-size: 12px; color: var(--ink-500); }

.msg-list { overflow-y: auto; flex: 1; padding: 4px 2px; }
.msg-item { padding: 10px 4px; border-bottom: 1px dashed rgba(120, 150, 220, .22); }
.msg-item:last-child { border-bottom: none; }
.msg-item-title { font-size: 13.5px; font-weight: 600; margin-bottom: 3px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.msg-item-title .msg-admin { display: inline-flex; gap: 4px; }
.msg-item-title .msg-admin button { border: none; background: none; cursor: pointer; font-size: 13px; opacity: .55; padding: 0 2px; }
.msg-item-title .msg-admin button:hover { opacity: 1; }
.msg-item-body { font-family: 'SimSun', '宋体', 'Songti SC', serif; font-size: 14px; line-height: 1.75; color: var(--ink-900, #333); word-break: break-word; }
.msg-item-img { display: block; max-width: 70%; max-height: 130px; border-radius: 10px; margin-top: 7px; cursor: zoom-in; box-shadow: 0 4px 14px rgba(60, 90, 160, .18); }
.msg-item-meta { font-size: 12px; color: var(--ink-500); margin-top: 6px; display: flex; justify-content: space-between; }
.msg-empty { text-align: center; color: var(--ink-500); font-size: 13px; padding: 30px 0; }

.msg-foot { display: flex; align-items: center; justify-content: space-between; padding: 9px 4px 0; border-top: 1px dashed rgba(120, 150, 220, .3); margin-top: 4px; }
.msg-hint { font-size: 11.5px; color: var(--ink-500); }

/* 留言编辑器（复用后台写文章的 field/input/textarea 风格，简化版） */
.msg-editor { width: min(92vw, 460px); }
.msg-editor .textarea { font-family: 'SimSun', '宋体', 'Songti SC', serif; font-size: 14.5px; }
.msg-char-count { text-align: right; font-size: 12px; color: var(--ink-500); margin-top: 4px; }
.msg-char-count.over { color: #e5484d; }
.msg-img-preview-wrap { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.msg-img-preview { max-width: 120px; max-height: 80px; border-radius: 8px; box-shadow: 0 3px 10px rgba(60, 90, 160, .2); }