/* Lunati Blog — 由 lunati-blog.html 内联样式抽取 */

:root {
  /* Modern SaaS Dashboard Theme */
  --bg:        #09090b;
  --bg2:       #18181b;
  --bg3:       #27272a;
  --bg4:       #3f3f46;
  --bg5:       #52525b;

  --text:      #fafafa;
  --text2:     #a1a1aa;
  --text3:     #71717a;
  --muted:     #52525b;

  --accent:    #8b5cf6;
  --accent2:   #a78bfa;
  --accent3:   #c4b5fd;
  --red:       #ef4444;
  --green:     #10b981;
  --orange:    #f59e0b;

  --glass:     rgba(24,24,27,.75);
  --glass2:    rgba(39,39,42,.65);
  --border:    rgba(255,255,255,.06);
  --border2:   rgba(255,255,255,.12);
  --border3:   rgba(255,255,255,.18);
  --glow:      rgba(139,92,246,.25);
  --glow-strong: rgba(139,92,246,.4);

  --nav-h:     56px;
  --radius:    16px;
  --radius-sm: 12px;
  --radius-xs: 8px;

  --spring:    cubic-bezier(.34,1.56,.64,1);
  --ease:      cubic-bezier(.4,0,.2,1);
}

[data-theme="light"] {
  --bg:     #fafafa;
  --bg2:    #ffffff;
  --bg3:    #f4f4f5;
  --bg4:    #e4e4e7;
  --bg5:    #d4d4d8;
  --text:   #18181b;
  --text2:  #52525b;
  --text3:  #a1a1aa;
  --muted:  #d4d4d8;
  --glass:  rgba(255,255,255,.85);
  --glass2: rgba(244,244,245,.7);
  --border: rgba(0,0,0,.06);
  --border2:rgba(0,0,0,.12);
  --border3:rgba(0,0,0,.18);
  --glow:   rgba(139,92,246,.15);
  --glow-strong: rgba(139,92,246,.25);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: -apple-system, 'SF Pro Text', 'Noto Sans SC', 'PingFang SC', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  transition: background .4s var(--ease), color .4s var(--ease);
  overflow-x: hidden;
}

#bgCanvas {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .35;
}
[data-theme="light"] #bgCanvas { opacity: .15; }

body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(110,94,247,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(90,200,250,.07) 0%, transparent 55%);
}
[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(110,94,247,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(90,200,250,.04) 0%, transparent 55%);
}

nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  padding: 0 24px;
  z-index: 500;
  transition: all .3s var(--ease);
}

.nav-logo {
  display: flex; align-items: center; gap: 3px;
  cursor: default; user-select: none;
}
.nav-logo-text {
  font-family: -apple-system, 'SF Pro Display', sans-serif;
  font-size: 1.2rem; font-weight: 700;
  color: var(--text); letter-spacing: -.04em;
}
.nav-logo-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  margin-bottom: -8px; flex-shrink: 0;
}

.nav-back-list {
  display: flex; align-items: center; gap: 5px;
  color: var(--accent); background: none; border: none; cursor: pointer;
  font-size: .875rem; font-weight: 500; letter-spacing: -.01em;
  padding: 5px 8px; border-radius: var(--radius-xs);
  transition: opacity .15s;
}
.nav-back-list:hover { opacity: .7; }
.nav-back-list svg { width: 14px; height: 14px; stroke-width: 2.5; }

.nav-spacer { flex: 1; }

.n-btn {
  height: 32px; min-width: 32px;
  display: flex; align-items: center; justify-content: center;
  gap: 5px; padding: 0 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2); border-radius: 10px;
  font-size: .8rem; font-weight: 500; cursor: pointer;
  font-family: inherit;
  transition: all .2s var(--ease);
  white-space: nowrap; letter-spacing: -.01em;
}
.n-btn:hover {
  background: var(--bg4); color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 8px var(--glow);
}
.n-btn.danger-active { color: var(--red); border-color: rgba(255,69,58,.3); background: rgba(255,69,58,.08); }
.n-btn.accent-active { color: var(--accent2); border-color: rgba(110,94,247,.35); background: rgba(110,94,247,.1); }
.n-btn-icon { font-size: .9rem; }

.nav-avatar {
  position: relative; width: 30px; height: 30px;
  cursor: pointer; flex-shrink: 0;
}
.nav-avatar-inner {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg3); border: 1.5px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: transform .2s var(--spring), border-color .2s;
  overflow: hidden;
}
.nav-avatar:hover .nav-avatar-inner { transform: scale(1.1); border-color: var(--accent); }
.nav-avatar-inner img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.user-logged .nav-avatar-inner { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(110,94,247,.25); }
.admin-mode .nav-avatar-inner { border-color: var(--green); }
.admin-badge {
  position: absolute; bottom: -1px; right: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-size: .45rem;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--bg); font-weight: 700;
}

.nav-notif { position: relative; }
.notif-btn { position: relative; display: flex; align-items: center; justify-content: center; }
.notif-badge {
  position: absolute; top: -3px; right: -4px;
  min-width: 16px; height: 16px; border-radius: 8px;
  background: var(--red); border: 1.5px solid var(--bg);
  color: #fff; font-size: .6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
  pointer-events: none;
}
.notif-panel {
  position: fixed; top: calc(var(--nav-h) + 6px); right: 4px;
  width: 320px; max-height: 440px; overflow-y: auto;
  background: var(--glass); backdrop-filter: blur(24px);
  border: .5px solid var(--border2);
  border-radius: var(--radius); box-shadow: 0 12px 48px rgba(0,0,0,.35);
  z-index: 9999;
}
.notif-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: .5px solid var(--border);
  font-size: .8rem; font-weight: 600;
}
.notif-read-all {
  background: none; border: none; cursor: pointer;
  font-size: .72rem; color: var(--accent); padding: 0;
}
.notif-tabs { display:flex; gap:6px; padding:8px 10px; border-bottom:.5px solid var(--border); position:sticky; top:0; background:var(--glass); backdrop-filter:blur(18px); z-index:1; }
.notif-tab { border:.5px solid var(--border2); background:var(--bg3); color:var(--text2); border-radius:999px; padding:4px 9px; font-size:.68rem; cursor:pointer; font-family:inherit; transition:all .15s; }
.notif-tab:hover { color:var(--accent); border-color:rgba(110,94,247,.4); }
.notif-tab.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.notif-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: .5px solid var(--border);
  cursor: pointer; transition: background .15s;
}
.notif-item:hover { background: rgba(255,255,255,.03); }
.notif-item.unread { background: rgba(110,94,247,.04); }
.notif-item.unread::before {
  content: ''; display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin-right: 6px; vertical-align: middle;
}
.notif-body { flex: 1; min-width: 0; }
.notif-meta-row { display:flex; align-items:center; gap:6px; margin-top:3px; }
.notif-chip { flex-shrink:0; border-radius:999px; padding:1px 6px; font-size:.6rem; font-weight:700; border:.5px solid rgba(110,94,247,.24); background:rgba(110,94,247,.10); color:var(--accent2); }
.notif-mark-one { flex-shrink:0; border:none; background:rgba(110,94,247,.10); color:var(--accent); border-radius:999px; padding:3px 7px; font-size:.65rem; cursor:pointer; font-family:inherit; }
.notif-mark-one:hover { background:rgba(110,94,247,.18); }
.notif-thumb-img { width: 72px; height: 72px; object-fit: cover; border-radius: 7px; flex-shrink: 0; }
.notif-actor { font-weight: 600; color: var(--accent); font-size: .78rem; }
.notif-preview { font-size: .73rem; color: var(--text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-post { font-size: .68rem; color: var(--text3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-time { font-size: .68rem; color: var(--text3); margin-top: 2px; }
.notif-empty { padding: 24px; text-align: center; color: var(--text3); font-size: .8rem; }
@media (max-width: 600px) {
  .notif-panel { width: 82vw; max-width: 300px; right: 4px; left: auto; max-height: 38vh; font-size: .88em; }
  .notif-header { padding: 5px 10px; font-size: .74rem; }
  .notif-item { padding: 5px 10px; }
  .notif-actor { font-size: .72rem; }
  .notif-preview { font-size: .66rem; }
  .notif-post { font-size: .63rem; }
  .notif-time { font-size: .62rem; }
  .notif-empty { padding: 14px; font-size: .74rem; }
}

.lang-drop {
  position: fixed; top: calc(var(--nav-h) + 6px); right: 80px;
  background: var(--glass); backdrop-filter: blur(24px);
  border: .5px solid var(--border2);
  border-radius: var(--radius-sm); padding: 4px;
  min-width: 120px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  display: none; z-index: 9999;
}
.lang-drop.open { display: block; animation: dropIn .15s var(--ease) both; }
@keyframes dropIn { from { opacity:0; transform:translateY(-6px) scale(.97); } to { opacity:1; transform:none; } }
.lang-opt {
  display: block; width: 100%;
  padding: 7px 12px; border-radius: var(--radius-xs);
  background: none; border: none; color: var(--text);
  font-size: .8rem; cursor: pointer; text-align: left;
  transition: background .1s;
}
.lang-opt:hover { background: rgba(110,94,247,.1); color: var(--accent); }
.lang-opt.active { color: var(--accent); font-weight: 600; }

.page {
  max-width: 680px; margin: 0 auto;
  padding: calc(var(--nav-h) + 32px) 20px 80px;
  position: relative; z-index: 1;
}

.list-header {
  margin-bottom: 24px;
}
.list-title {
  font-family: -apple-system, 'SF Pro Display', sans-serif;
  font-size: 2rem; font-weight: 700;
  color: var(--text); letter-spacing: -.04em;
  margin-bottom: 4px;
}
.list-count { font-size: .78rem; color: var(--text3); }

.search-wrap { position: relative; width: 100%; margin: 0 0 16px; transition: box-shadow .2s, border-color .2s; }
.search-wrap:focus-within, .search-wrap.has-value { width: 100%; }
.search-icon {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--text3); pointer-events:none; transition:color .2s;
}
.search-input {
  width: 100%;
  padding: 12px 20px 12px 44px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 14px; color: var(--text);
  font-size: .875rem; font-family: inherit; outline: none;
  transition: all .2s var(--ease);
}
.search-input:focus { border-color: var(--accent); background: var(--bg2); box-shadow: 0 0 0 3px var(--glow); }
.search-wrap:focus-within .search-icon, .search-wrap.has-value .search-icon { color:var(--accent); }
.search-input::placeholder { color: var(--text3); }

.tag-filter-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 16px; }
.tag-filter-btn {
  font-size: .75rem; padding: 6px 14px;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg3); color: var(--text2);
  cursor: pointer; transition: all .2s var(--ease); font-family: inherit;
  font-weight: 500; letter-spacing: -.01em;
}
.tag-filter-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(139,92,246,.08); }
.tag-filter-btn.active { background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: var(--accent); color: #fff; box-shadow: 0 4px 12px var(--glow); }

.post-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: all .3s var(--ease);
  position: relative; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.post-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(110,94,247,.04) 0%, transparent 60%);
  opacity: 0; transition: opacity .2s;
  pointer-events: none;
}
.post-card:hover {
  background: var(--bg3); border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,.3), 0 0 0 1px var(--accent);
}
.post-card:hover::before { opacity: 1; }
.post-card:hover .card-title { color: var(--accent2); }

.card-meta {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 8px;
}
.card-date {
  font-size: .68rem; color: var(--text3);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.card-tag {
  font-size: .65rem; padding: 2px 8px;
  background: rgba(110,94,247,.1);
  border: .5px solid rgba(110,94,247,.2);
  color: var(--accent2); border-radius: 20px;
  font-weight: 500; letter-spacing: -.01em;
}
.card-title {
  font-family: -apple-system, 'SF Pro Display', 'Noto Serif SC', serif;
  font-size: 1rem; font-weight: 600;
  color: var(--text); line-height: 1.4; margin-bottom: 6px;
  letter-spacing: -.02em;
  transition: color .2s;
}
.card-excerpt {
  font-size: .8rem; color: var(--text); line-height: 1.65;
  opacity: .88;
}
.card-content-wrap {
  position: relative;
  overflow: hidden;
  max-height: calc(1.65em * 5);
  margin-bottom: 2px;
}
.card-content-wrap.full {
  max-height: none;
}
.card-read-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--bg2));
  pointer-events: none;
}
[data-theme="light"] .card-read-overlay {
  background: linear-gradient(to bottom, transparent, var(--bg2));
}
.post-card:hover .card-read-overlay {
  background: linear-gradient(to bottom, transparent, var(--bg3));
}
.card-read-label {
  position: absolute;
  bottom: 4px; right: 0;
  font-size: .7rem; color: var(--accent2);
  font-weight: 500; letter-spacing: -.01em; opacity: .9;
}
.card-thumb {
  width: 100%; max-height: 180px; object-fit: cover;
  border-radius: var(--radius-sm); margin-top: 10px; display: block;
}
.card-hint {
  font-size: .7rem; color: var(--accent);
  margin-top: 10px; opacity: .8; font-weight: 500;
}
.card-admin-row {
  display: flex; gap: 6px;
  margin-top: 12px; padding-top: 12px;
  border-top: .5px solid var(--border);
}

.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 80px 20px; gap: 10px; color: var(--text3);
}
.empty-icon { font-size: 2.2rem; opacity: .3; filter: grayscale(1); }
.empty-text { font-size: .85rem; }

.view-detail { display: none; }
.view-detail.active { display: block; animation: fadeUp .35s var(--ease) both; }
.view-list.hidden { display: none; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.detail-back {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 0;
  color: var(--accent); font-size: .875rem; font-weight: 500;
  font-family: inherit; cursor: pointer;
  margin-bottom: 28px; transition: opacity .15s;
  letter-spacing: -.01em;
}
.detail-back:hover { opacity: .7; }

.detail-header {
  margin-bottom: 8px;
  padding: 14px 16px 12px;
  border-radius: 16px;
  border-bottom: none;
}
.detail-title {
  font-family: -apple-system, 'SF Pro Display', sans-serif;
  font-size: 1.75rem; font-weight: 700; line-height: 1.2;
  color: var(--text); margin-bottom: 12px;
  letter-spacing: -.04em;
}
.detail-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-admin {
  display: none; gap: 8px;
  margin-top: 16px; padding-top: 16px;
  border-top: .5px solid var(--border);
}
.detail-admin.show { display: flex; }
.detail-translate { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.translate-btn { font-size: .75rem; opacity: .8; }
.translate-btn:hover { opacity: 1; }
.translate-meta { font-size: .72rem; color: var(--text2); font-style: italic; }

.md {
  color: var(--text); line-height: 1.8;
  font-size: .9rem; letter-spacing: -.005em;
}
@media(min-width:769px) {
  .md { font-size: .82rem; line-height: 1.78; }
  .cmt-body { font-size: .78rem; }
}
.md h1, .md h2, .md h3 {
  font-family: -apple-system, 'SF Pro Display', sans-serif;
  color: var(--text); margin: 28px 0 10px;
  letter-spacing: -.03em; font-weight: 700;
}
.md h1 { font-size: 1.5rem; padding-bottom: 10px; border-bottom: .5px solid var(--border); }
.md h2 { font-size: 1.2rem; }
.md h3 { font-size: 1rem; color: var(--accent2); }
.md p { margin: 0; }
.md a { color: var(--accent); text-decoration: none; }
.md a:hover { text-decoration: underline; opacity: .8; }
.md strong { font-weight: 700; }
.md em { color: var(--accent2); font-style: italic; }
.md del { color: var(--text3); text-decoration: line-through; }
.md hr { border: none; border-top: .5px solid var(--border); margin: 28px 0; }
.md blockquote {
  border-left: 2px solid var(--accent); padding: 10px 18px;
  margin: 16px 0; background: rgba(110,94,247,.05);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  color: var(--text2);
}
.md code {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  background: var(--bg3); border: .5px solid var(--border2);
  padding: 2px 6px; border-radius: 4px;
  font-size: .82em; color: var(--accent2);
}
.md pre {
  background: var(--bg3); border: .5px solid var(--border2);
  border-radius: var(--radius-sm); padding: 16px;
  margin: 14px 0; overflow-x: auto;
}
.md pre code { background: none; border: none; padding: 0; font-size: .8rem; color: var(--text2); }
.md ul, .md ol { padding-left: 22px; margin-bottom: 14px; }
.md li { margin-bottom: 4px; }
.md img {
  max-width: 100%; width: 100%;
  border-radius: 0;
  display: block; margin: 0;
  cursor: zoom-in; transition: opacity .2s, transform .2s;
}
.md img + img { margin-top: 2px; }
.md p + img, .md br + img { margin-top: 8px; }
.md img + p, .md img + br { margin-top: 8px; }
.md img:hover { opacity: .88; transform: scale(1.005); }
.md table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: .83rem; }
.md th, .md td { border: .5px solid var(--border2); padding: 8px 12px; }
.md th { background: var(--bg3); color: var(--accent2); font-weight: 600; }

.sm-btn {
  font-size: .72rem; padding: 4px 12px;
  border-radius: 20px; border: .5px solid var(--border2);
  background: var(--bg3); color: var(--text2);
  font-family: inherit; font-weight: 500;
  transition: all .15s; cursor: pointer; letter-spacing: -.01em;
}
.sm-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(110,94,247,.06); }
.sm-btn.red:hover { border-color: var(--red); color: var(--red); background: rgba(255,69,58,.06); }

.comments {
  margin-top: 12px; padding-top: 12px;
  border-top: .5px solid var(--border);
}
.sec-title {
  font-family: -apple-system, 'SF Pro Display', sans-serif;
  font-size: .68rem; font-weight: 700;
  color: var(--text3); letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 20px;
}
.cmt-reply-indent { margin-left: 18px; border-left: 1.5px solid var(--border2); padding-left: 12px; }
.reply-box { display: none; }
.reply-box-actions { display: none; }

.cmt-item {
  background: var(--bg2); border: .5px solid var(--border2);
  border-radius: var(--radius-sm); padding: 14px 16px;
  margin-bottom: 8px; position: relative;
  transition: border-color .15s;
}
.cmt-item:hover { border-color: rgba(110,94,247,.2); }
.cmt-item.highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 1.5px rgba(110,94,247,.2);
}
.cmt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.cmt-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), #ec4899);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; overflow: hidden; border: .5px solid var(--border2);
}
.cmt-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cmt-nick { font-size: .75rem; font-weight: 700; color: var(--accent2); letter-spacing: -.01em; }
.cmt-date { font-size: .67rem; color: var(--text3); font-variant-numeric: tabular-nums; }
.cmt-body { font-size: .83rem; color: var(--text); line-height: 1.65; }
.cmt-body.clamped { display: -webkit-box; display: -moz-box; display: box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; box-orient: vertical; overflow: hidden; }
.cmt-toggle { font-size: .7rem; color: var(--accent); cursor: pointer; margin-top: 4px; display: inline-block; opacity: .8; }
.cmt-toggle:hover { opacity: 1; }
.cmt-actions { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.cmt-row-layout { display: flex; align-items: center; gap: 10px; }
.cmt-left { flex: 1; min-width: 0; }
.cmt-like-side {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex-shrink: 0; min-width: 36px;
}
.cmt-like-side-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer; padding: 8px 4px;
  color: var(--text3); font-size: .7rem; font-weight: 600;
  font-family: inherit; line-height: 1; border-radius: 8px;
  transition: color .15s, background .15s;
}
.cmt-like-side-btn .like-heart {
  width: 20px; height: 20px; stroke-width: 1.6;
  fill: none; stroke: currentColor;
  transition: fill .15s, transform .2s var(--spring);
}
.cmt-like-side-btn:hover { color: #f43f5e; background: rgba(244,63,94,.06); }
.cmt-like-side-btn:hover .like-heart { stroke: #f43f5e; }
.cmt-like-side-btn.liked { color: #f43f5e; }
.cmt-like-side-btn.liked .like-heart { fill: #f43f5e; stroke: #f43f5e; }
.cmt-like-side-btn:active .like-heart { transform: scale(1.4); }
.admin-del-btn { display: none; }
.admin-mode .admin-del-btn { display: inline-block; }
.cmt-empty { text-align: center; color: var(--text3); padding: 24px; font-size: .8rem; }

.cmt-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid var(--border2);
  z-index: 200;
}
.cmt-bar-inner {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 10px 16px; max-width: 720px; margin: 0 auto;
}
.cmt-bar-meta { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.cmt-bar-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #ec4899);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0;
}
.cmt-bar-name { font-size: .75rem; color: var(--text2); max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmt-bar-input-wrap { flex: 1; position: relative; }
.cmt-bar-input {
  width: 100%; background: var(--bg3); border: .5px solid var(--border2);
  border-radius: 18px; padding: 8px 14px; color: var(--text);
  font-size: .85rem; resize: none; line-height: 1.4;
  max-height: 100px; overflow-y: auto; outline: none;
  box-sizing: border-box; font-family: inherit;
  transition: border-color .2s;
}
.cmt-bar-input:focus { border-color: var(--accent); }
.cmt-bar-send {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: opacity .15s, transform .15s var(--spring);
}
.cmt-bar-send:hover { opacity: .9; transform: scale(1.08); }
.cmt-bar-send:disabled { opacity: .35; transform: none; }
.cmt-bar-send svg { width: 14px; height: 14px; stroke: #fff; }
/* Counter floats inside the textarea — zero layout impact */
.cmt-counter {
  position: absolute; bottom: 5px; right: 10px;
  font-size: .6rem; color: var(--text3); line-height: 1;
  transition: color .15s; pointer-events: none;
  background: var(--bg3); padding: 0 2px;
  border-radius: 3px; opacity: .75;
}
.cmt-counter.warn { color: var(--orange); opacity: 1; }
.cmt-counter.over { color: var(--red); font-weight: 700; opacity: 1; }
.cmt-bar-reply-hint {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 16px 0; max-width: 720px; margin: 0 auto;
  font-size: .72rem; color: var(--accent);
}
.cmt-reply-cancel {
  background: none; border: none; cursor: pointer;
  color: var(--text3); font-size: .8rem; padding: 2px 4px; line-height: 1;
}
.cmt-reply-cancel:hover { color: var(--text); }
.cmt-bar-expand { padding: 0 16px 10px; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.cmt-bar-expand .cmt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media(max-width:480px) { .cmt-bar-expand .cmt-row { grid-template-columns: 1fr; } }

.field {
  width: 100%; display: block; margin-bottom: 10px;
  background: var(--bg3); border: .5px solid var(--border2);
  color: var(--text); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: .85rem; font-family: inherit;
  outline: none; transition: border-color .2s, background .2s;
  letter-spacing: -.01em;
}
.field:focus { border-color: var(--accent); background: var(--bg2); }
textarea.field { height: 80px; resize: vertical; }
.cmt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.msg-inline {
  font-size: .75rem; padding: 6px 12px; border-radius: var(--radius-xs);
  margin-top: 8px; display: none; letter-spacing: -.01em;
}
.msg-inline.ok { background: rgba(48,209,88,.1); color: var(--green); display: block; border: .5px solid rgba(48,209,88,.2); }
.msg-inline.err { background: rgba(255,69,58,.1); color: var(--red); display: block; border: .5px solid rgba(255,69,58,.2); }

.overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  z-index: 800; align-items: center; justify-content: center; padding: 20px;
}
.overlay.open { display: flex; }

.modal-box {
  background: var(--bg2);
  border: .5px solid var(--border2);
  border-radius: 20px; padding: 0;
  width: 100%; max-width: 460px;
  box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.04);
  animation: sheetUp .3s var(--spring) both;
  overflow: hidden;
}
.modal-box.wide { max-width: 880px; max-height: 92vh; overflow-y: auto; padding: 0; }
@keyframes sheetUp {
  from { opacity:0; transform: translateY(20px) scale(.97); }
  to   { opacity:1; transform: none; }
}

.modal-box > *:not(.auth-tabs):not(.modal-title-bar),
.modal-box.auth-box > *:not(.auth-tabs) {
  padding-left: 28px; padding-right: 28px;
}
.modal-box.wide > * { padding-left: 28px; padding-right: 28px; }

.modal-title-bar {
  padding: 24px 28px 0;
}
.modal-title {
  font-family: -apple-system, 'SF Pro Display', sans-serif;
  font-size: 1.15rem; font-weight: 700;
  color: var(--text); margin-bottom: 20px;
  letter-spacing: -.03em;
}

.auth-box { padding-top: 0; }
.auth-tabs {
  display: flex;
  border-bottom: .5px solid var(--border);
  padding: 0 28px;
  margin-bottom: 0;
}
.auth-tab {
  flex: 1; padding: 16px 4px 12px; background: none; border: none;
  color: var(--text2); font-size: .82rem; font-weight: 500; cursor: pointer;
  border-bottom: 1.5px solid transparent; margin-bottom: -0.5px;
  transition: color .15s, border-color .15s; letter-spacing: -.01em;
}
.auth-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.auth-panel { display: flex; flex-direction: column; gap: 0; padding: 20px 0 4px; }

.auth-box .field { margin-bottom: 8px; }
.auth-box .auth-panel { padding: 20px 28px 4px; }
.auth-box .modal-footer { padding: 0 28px 24px; margin-top: 12px; }
.auth-box .modal-desc { padding: 0 28px; }

.modal-section-label { font-size: .72rem; color: var(--text3); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; font-weight: 600; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; padding: 0 28px 28px; }
.modal-desc { font-size: .82rem; color: var(--text2); margin: -8px 0 14px; line-height: 1.5; }

.m-btn {
  padding: 10px 22px; border-radius: 20px;
  border: none; font-size: .82rem; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all .15s; letter-spacing: -.01em;
}
.m-btn.primary { background: var(--accent); color: #fff; }
.m-btn.primary:hover { filter: brightness(1.1); }
.m-btn.secondary {
  background: var(--bg3); border: .5px solid var(--border2); color: var(--text2);
}
.m-btn.secondary:hover { border-color: var(--accent); color: var(--accent); background: rgba(110,94,247,.06); }
.m-btn.danger { background: var(--red); color: #fff; }
.m-btn.danger:hover { filter: brightness(1.1); }
.m-btn:active:not(:disabled) { transform: scale(.96); }
.m-btn:disabled { opacity: .4; cursor: not-allowed; filter: none; }
.m-btn.is-loading { position: relative; pointer-events: none; }
.m-btn.is-loading::after { content: ''; display: inline-block; width: .72em; height: .72em; margin-left: .45em; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.1em; animation: btnSpin .75s linear infinite; }
@keyframes btnSpin { to { transform: rotate(360deg); } }

.code-row { display: flex; gap: 6px; align-items: center; }
.send-code-btn {
  white-space: nowrap; padding: 0 8px; height: 28px;
  background: none; color: var(--accent);
  border: .5px solid rgba(110,94,247,.3);
  border-radius: 20px;
  cursor: pointer; font-size: .68rem; font-weight: 600;
  transition: opacity .15s, border-color .15s; letter-spacing: -.01em;
  flex-shrink: 0; line-height: 1;
}
.send-code-btn:hover { opacity: .8; border-color: rgba(110,94,247,.6); }
.send-code-btn:disabled { opacity: .35; cursor: default; }

.pw-field-wrap { position: relative; }
.pw-field-wrap .field { padding-right: 46px; width: 100%; }
.pw-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(110,94,247,.12); border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(110,94,247,.08));
  color: var(--text2); cursor: pointer; padding: 0; opacity: .74;
  transition: opacity .16s, color .16s, border-color .16s, background .16s, box-shadow .16s, transform .16s;
}
.pw-eye svg { width: 17px; height: 17px; display: block; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pw-eye:hover { opacity: 1; color: var(--accent); border-color: rgba(110,94,247,.38); background: linear-gradient(135deg, rgba(110,94,247,.16), rgba(6,182,212,.10)); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.pw-eye:active { transform: translateY(-50%) scale(.94); }
.pw-eye.is-visible { color: var(--accent); border-color: rgba(110,94,247,.42); background: rgba(110,94,247,.14); }

.avatar-upload-wrap { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 0 28px; }
.avatar-upload-hint { font-size: .78rem; color: var(--text2); line-height: 1.55; }
.profile-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #ec4899);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; flex-shrink: 0; overflow: hidden;
  border: 1.5px solid var(--border2); transition: opacity .15s; cursor: pointer;
}
.profile-avatar:hover { opacity: .8; }
.profile-email { font-size: .78rem; color: var(--text2); padding: 0 28px; margin-bottom: 16px; }
.nick-edit-wrap { display: flex; align-items: center; gap: 4px; }
.nick-edit-btn {
  background: none; border: none; cursor: pointer;
  font-size: .72rem; opacity: .45; padding: 0 2px; line-height: 1;
  color: var(--text2); transition: opacity .15s;
}
.nick-edit-btn:hover { opacity: 1; }
.nick-edit-input {
  font-size: .9rem; font-weight: 600; color: var(--text);
  background: var(--bg); border: .5px solid var(--accent);
  border-radius: 4px; padding: 2px 6px; width: 120px;
  font-family: inherit; outline: none;
}
.pw-change-section {
  border: .5px solid var(--border2); border-radius: var(--radius-sm);
  margin: 8px 28px; overflow: hidden;
}
.pw-change-section summary {
  padding: 10px 14px; cursor: pointer; font-size: .82rem; color: var(--text2);
  user-select: none;
}
.pw-change-section summary:hover { color: var(--text); }
.pw-change-body { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 8px; }

.crop-stage {
  position: relative; width: 100%; padding-bottom: 100%;
  background: #111; border-radius: 10px; overflow: hidden; cursor: grab;
  user-select: none; touch-action: none;
}
.crop-stage:active { cursor: grabbing; }
#cropCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.crop-circle-mask {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle 42% at 50% 50%, transparent 42%, rgba(0,0,0,.6) 42%);
  pointer-events: none;
}
.crop-ring {
  position: absolute; top: 50%; left: 50%;
  width: 84%; height: 84%; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.7);
  transform: translate(-50%,-50%);
  pointer-events: none; box-shadow: 0 0 0 9999px rgba(0,0,0,.45);
}
.crop-controls { margin: 10px 0 0; }

.editor-wrap { display: flex; flex-direction: column; gap: 0; }
.editor-toolbar {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px;
  background: var(--bg3); border: .5px solid var(--border2);
  border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.editor-toolbar button {
  background: none; border: none; color: var(--text2);
  padding: 4px 8px; border-radius: var(--radius-xs); cursor: pointer;
  font-size: .78rem; font-family: inherit; line-height: 1;
  transition: background .12s, color .12s;
}
.editor-toolbar button:hover { background: rgba(110,94,247,.12); color: var(--accent2); }
.editor-toolbar .tb-sep { width: .5px; background: var(--border2); margin: 2px 4px; }
.editor-toolbar button.tb-active { background: rgba(110,94,247,.15); color: var(--accent2); }
/* SECURITY FIX: toolbar 图标统一用 SVG,currentColor 继承主题色,无 emoji */
.editor-toolbar button .tb-icon { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.editor-toolbar button .tb-icon-fill { fill: currentColor; stroke: none; }
.editor-split {
  display: flex; border: .5px solid var(--border2);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  overflow: hidden; min-height: 320px;
}
.editor-split-left { flex: 1; display: flex; flex-direction: column; border-right: .5px solid var(--border2); }
.editor-split-label {
  font-size: .65rem; color: var(--text3); letter-spacing: .06em;
  padding: 4px 10px; background: var(--bg3); border-bottom: .5px solid var(--border2);
  text-transform: uppercase; user-select: none;
}
.editor-split-left textarea {
  flex: 1; width: 100%; resize: none;
  background: var(--bg2); border: none !important; outline: none;
  color: var(--text); font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: .78rem; line-height: 1.65; padding: 12px 14px;
  border-radius: 0 !important; min-height: 280px;
}
.editor-split-right { flex: 1; display: flex; flex-direction: column; background: var(--bg2); }
.editor-split-right .editor-preview-inner {
  flex: 1; padding: 14px 16px; overflow-y: auto;
  font-size: .82rem; line-height: 1.8; color: var(--text); min-height: 280px;
}
.editor-preview-inner .md-empty {
  color: var(--text3); font-size: .78rem;
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 200px;
}
@media(max-width:640px) {
  .editor-split { flex-direction: column; }
  .editor-split-left { border-right: none; border-bottom: .5px solid var(--border2); }
  .editor-split-left textarea { min-height: 160px; }
  .editor-split-right .editor-preview-inner { min-height: 140px; }
}
.editor-preview { display: none !important; }
.img-upload-status { font-size: .72rem; color: var(--text2); margin-top: 4px; min-height: 16px; }
/* Upload progress bar — 进度条组件 */
.img-upload-progress { margin-top: 6px; }
.img-upload-progress .iup-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 3px; }
.img-upload-progress .iup-label { font-size: .68rem; color: var(--text3); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.img-upload-progress .iup-pct { font-size: .68rem; color: var(--text2); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.img-upload-progress .iup-track { height: 5px; border-radius: 3px; background: var(--bg3); border: .5px solid var(--border2); overflow: hidden; }
.img-upload-progress .iup-fill { height: 100%; width: 0%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent2), var(--cyan)); background-size: 200% 100%; transition: width .18s cubic-bezier(.4,0,.2,1); animation: iup-shimmer 1.2s linear infinite; }
@keyframes iup-shimmer { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } }

.send-btn {
  background: var(--accent); color: #fff; border: none;
  border-radius: 20px; padding: 9px 22px;
  font-size: .82rem; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: opacity .15s, transform .15s var(--spring);
  letter-spacing: -.01em;
}
.send-btn:hover { opacity: .9; transform: scale(1.02); }
.send-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.captcha-wrap {
  display: flex; align-items: center; justify-content: space-between;
  border: .5px solid var(--bg4); border-radius: var(--radius-sm);
  padding: 12px 16px; background: var(--bg3);
  transition: border-color .2s; user-select: none;
}
.captcha-wrap.pass { border-color: rgba(48,209,88,.4); background: rgba(48,209,88,.04); }
.captcha-wrap.fail { border-color: rgba(255,69,58,.4); background: rgba(255,69,58,.04); }
.captcha-left { display: flex; align-items: center; gap: 12px; }
.captcha-checkbox {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 1.5px solid var(--bg4); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .2s; background: var(--bg2);
}
.captcha-wrap.idle .captcha-checkbox:hover { border-color: var(--accent); }
.captcha-wrap.pass .captcha-checkbox { border-color: var(--green); background: rgba(48,209,88,.1); }
.captcha-wrap.fail .captcha-checkbox { border-color: var(--red); background: rgba(255,69,58,.1); }
.captcha-wrap.scanning .captcha-checkbox,
.captcha-wrap.analyzing .captcha-checkbox { border-color: var(--accent); }
.captcha-label { font-size: .82rem; color: var(--text2); }
.captcha-wrap.pass .captcha-label { color: var(--text); }
.captcha-wrap.fail .captcha-label { color: var(--red); }
.captcha-brand { font-size: .58rem; color: var(--text3); text-align: right; line-height: 1.5; opacity: .5; }
.captcha-spin {
  width: 12px; height: 12px;
  border: 1.5px solid var(--accent); border-top-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes checkDraw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }

.dots { display: flex; gap: 6px; justify-content: center; padding: 48px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .25; animation: blink 1.2s ease-in-out infinite; }
.dot:nth-child(2) { animation-delay: .18s; }
.dot:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,80%,100%{opacity:.2;transform:scale(.8)} 40%{opacity:1;transform:scale(1)} }

#imgLightbox {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(0,0,0,.94);
  backdrop-filter: blur(16px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; visibility: hidden;
  transition: opacity .25s, visibility .25s;
  cursor: zoom-out;
}
#imgLightbox.open { opacity: 1; visibility: visible; }
#imgLightbox img {
  max-width: min(90vw, 960px); max-height: 88vh;
  border-radius: var(--radius-sm); box-shadow: 0 32px 80px rgba(0,0,0,.7);
  object-fit: contain;
  transform: scale(.94); transition: transform .28s var(--spring);
  user-select: none;
}
#imgLightbox.open img { transform: scale(1); }
#imgLbClose {
  position: fixed; top: 16px; right: 18px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: .5px solid rgba(255,255,255,.15);
  color: #fff; font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; z-index: 9991;
}
#imgLbClose:hover { background: rgba(255,255,255,.2); }
.card-post-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 0; border-bottom: .5px solid var(--border);
  cursor: pointer; transition: color .15s;
}
.card-post-item:last-child { border-bottom: none; }
.card-post-item:hover .card-post-title { color: var(--accent); }
.card-post-title { font-size: .82rem; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.card-post-vbadge { display: inline-flex; align-items: center; gap: 2px; font-size: .62rem; font-weight: 700; color: var(--cyan, #5ac8fa); flex-shrink: 0; margin: 0 6px 0 0; }\n.card-post-vbadge svg { width: 11px; height: 11px; }
.card-post-date { font-size: .68rem; color: var(--text3); flex-shrink: 0; }

.card-stat-btn{display:inline-flex;align-items:baseline;gap:4px;border:0;background:none;color:var(--text2);font:inherit;font-size:.72rem;padding:0;cursor:pointer;border-radius:10px}.card-stat-btn:hover{color:var(--accent)}.card-social-panel{padding:12px 24px 0;display:none}.card-social-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.card-social-title{font-size:.65rem;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;font-weight:700}.card-social-list{display:flex;flex-direction:column;gap:8px;max-height:210px;overflow:auto;padding-right:2px}.card-social-user{display:flex;align-items:center;gap:10px;padding:8px;border:.5px solid var(--border2);border-radius:16px;background:rgba(255,255,255,.03);cursor:pointer}.card-social-user:hover{border-color:rgba(124,106,247,.45);background:rgba(124,106,247,.08)}.card-social-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,var(--accent),#ec4899);font-size:1rem}.card-social-main{min-width:0;flex:1}.card-social-name{font-size:.82rem;color:var(--text);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-social-bio{font-size:.72rem;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.card-social-empty{font-size:.78rem;color:var(--text3);padding:12px 4px;text-align:center}.card-social-close{border:0;background:rgba(255,255,255,.06);color:var(--text2);border-radius:999px;width:24px;height:24px;cursor:pointer}.card-social-close:hover{color:var(--text);background:rgba(255,255,255,.12)}

#forgotPwLink:hover { opacity: 1; }

@media(max-width:640px) {
  .page { padding: calc(var(--nav-h) + 18px) 14px 64px; }
  .detail-title { font-size: 1.4rem; }
  .list-title { font-size: 1.6rem; }
  .cmt-row, .modal-grid { grid-template-columns: 1fr; }
  .modal-box { border-radius: 20px; }
}

.like-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: .5px solid var(--border2);
  color: var(--text3); border-radius: 20px;
  padding: 3px 10px; font-size: .72rem; font-weight: 500;
  cursor: pointer; font-family: inherit;
  transition: color .15s, border-color .15s, background .15s;
  letter-spacing: -.01em;
}
.like-btn:hover { color: #f43f5e; border-color: rgba(244,63,94,.35); background: rgba(244,63,94,.05); }
.like-btn.liked { color: #f43f5e; border-color: rgba(244,63,94,.4); background: rgba(244,63,94,.07); }
.like-btn.liked .like-heart { fill: #f43f5e; }
.like-heart { width: 12px; height: 12px; transition: fill .15s, transform .2s; fill: none; stroke: currentColor; stroke-width: 2; }
.like-btn:active .like-heart { transform: scale(1.35); }
.card-like-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

.load-more-wrap {
  display: flex; justify-content: center; padding: 20px 0 8px;
}
.load-more-btn {
  padding: 9px 28px; border-radius: 20px;
  background: var(--bg3); border: .5px solid var(--border2);
  color: var(--text2); font-size: .82rem; font-weight: 500;
  cursor: pointer; font-family: inherit; transition: all .15s;
  letter-spacing: -.01em;
}
.load-more-btn:hover { background: var(--bg4); color: var(--text); border-color: var(--accent); }
.load-more-btn:disabled { opacity: .4; cursor: not-allowed; }
.draft-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .68rem; color: var(--orange); background: rgba(255,159,10,.1);
  border: .5px solid rgba(255,159,10,.3); border-radius: 10px;
  padding: 2px 8px; margin-left: 8px; cursor: pointer;
  transition: opacity .15s;
}
.draft-badge:hover { opacity: .75; }
.editor-draft-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 10px; background: rgba(255,159,10,.06);
  border: .5px solid rgba(255,159,10,.2); border-radius: var(--radius-xs);
  margin: 0 28px 4px; font-size: .74rem; color: var(--orange);
}
.editor-draft-bar button {
  background: none; border: none; color: var(--text3); cursor: pointer;
  font-size: .72rem; padding: 0 4px; transition: color .15s;
}
.editor-draft-bar button:hover { color: var(--red); }

/* Desktop Large Screen Adaptation */
@media (min-width: 1200px) {
  .container { max-width: 960px; }
  .post-detail { max-width: 720px; }
  .cmt-list { max-width: 720px; }
  .modal-box { max-width: 520px; }
  .modal-box.wide { max-width: 900px; }
  .ai-chat-container { max-width: 900px; margin: 0 auto; }
}

@media (min-width: 1400px) {
  .container { max-width: 1080px; }
  .post-detail { max-width: 800px; }
  .cmt-list { max-width: 800px; }
  .modal-box { max-width: 560px; }
  .modal-box.wide { max-width: 1000px; }
  .ai-chat-container { max-width: 1000px; margin: 0 auto; }
}

/* Dark Mode Desktop Enhancement */
@media (min-width: 768px) {
  [data-theme="dark"] #bgCanvas { opacity: .45; }
  [data-theme="dark"] body::before {
    background:
      radial-gradient(ellipse 80% 60% at 20% 0%, rgba(110,94,247,.18) 0%, transparent 60%),
      radial-gradient(ellipse 60% 50% at 80% 100%, rgba(90,200,250,.1) 0%, transparent 55%);
  }
}


.click-fx-layer{position:fixed;inset:0;z-index:2147483000;pointer-events:none;overflow:hidden;contain:layout paint style}
.click-fx-ring{position:absolute;width:14px;height:14px;border-radius:50%;border:1px solid rgba(230,235,255,.38);background:rgba(255,255,255,.035);transform:translate(-50%,-50%) scale(.45);animation:clickFxRing .48s ease-out forwards}
[data-theme="light"] .click-fx-ring{border-color:rgba(70,80,120,.26);background:rgba(70,80,120,.025)}
@keyframes clickFxRing{0%{opacity:.62;transform:translate(-50%,-50%) scale(.45)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.1)}}
@media (prefers-reduced-motion:reduce){.click-fx-layer{display:none!important}}


/* Profile Center refresh — compact mobile glass card */
#profileOverlay .modal-box{max-width:520px;border-radius:30px;background:linear-gradient(160deg,rgba(124,106,247,.15),rgba(6,182,212,.055) 40%,rgba(255,255,255,.03)),var(--bg2);box-shadow:0 34px 100px rgba(0,0,0,.58),0 0 0 1px rgba(124,106,247,.14);overflow:hidden}
#profileOverlay .modal-title{font-size:1.22rem;font-weight:900;letter-spacing:-.04em;margin-bottom:8px}
#profileOverlay .avatar-upload-wrap{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:14px;margin:10px 28px 12px;padding:15px;border:1px solid rgba(124,106,247,.16);border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.055)}
#profileOverlay .profile-avatar{width:76px;height:76px;border-radius:24px;border:1px solid rgba(255,255,255,.20);box-shadow:0 14px 36px rgba(124,106,247,.28);position:relative;transition:transform .18s,border-color .18s,box-shadow .18s;contain:paint}
#profileOverlay .profile-avatar:hover{opacity:1;transform:translateY(-1px);border-color:rgba(255,255,255,.40);box-shadow:0 16px 44px rgba(124,106,247,.36)}
#profileOverlay .profile-avatar:active{transform:scale(.96)}
#profileOverlay .profile-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:24px}
#profileOverlay .profile-avatar::after{content:'更换';position:absolute;left:8px;right:8px;bottom:7px;height:22px;border-radius:999px;background:rgba(0,0,0,.50);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;backdrop-filter:blur(8px)}
#profileOverlay .avatar-upload-hint{min-width:0;font-size:.76rem;color:var(--text2);line-height:1.55}
#profileOverlay #profileNickDisplay{font-size:1rem;font-weight:900;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#profileOverlay #profileEmail,#profileOverlay #profileCreatedAt{padding-left:28px!important;padding-right:28px!important}
#profileOverlay #profileFollowers,#profileOverlay #profileFollowing{display:block;font-size:1.08rem;font-weight:900;margin-bottom:1px}
#profileOverlay .nick-edit-wrap:has(#profileBioDisplay){padding:12px 14px;border-radius:18px;background:linear-gradient(135deg,rgba(124,106,247,.10),rgba(6,182,212,.045));border:1px solid rgba(124,106,247,.12)}
#profileOverlay #profileBioDisplay{font-size:.82rem!important;min-height:1.5em}
#profileOverlay textarea.field,#profileOverlay .pw-field-wrap .field{border-radius:16px;background:rgba(255,255,255,.045);border-color:rgba(124,106,247,.14)}
#profileOverlay .pw-change-body{padding:12px 14px 14px!important;border-radius:20px;background:rgba(255,255,255,.028);border:1px solid rgba(124,106,247,.10)}
#profileOverlay .modal-footer{background:linear-gradient(180deg,transparent,rgba(0,0,0,.10));padding-top:12px;flex-wrap:wrap}
@media(max-width:560px){#profileOverlay.overlay{padding:12px}#profileOverlay .modal-box{border-radius:26px;max-height:92vh;overflow-y:auto}#profileOverlay .modal-box>*:not(.auth-tabs):not(.modal-title-bar){padding-left:18px!important;padding-right:18px!important}#profileOverlay .avatar-upload-wrap{grid-template-columns:72px minmax(0,1fr);gap:12px;margin:10px 18px 12px;padding:13px;border-radius:22px}#profileOverlay .profile-avatar{width:72px;height:72px;border-radius:22px}#profileOverlay .profile-avatar img{border-radius:22px}#profileOverlay .modal-footer{padding:10px 18px 20px}#profileOverlay .modal-footer .m-btn{flex:1;padding-left:12px;padding-right:12px}}



/* Profile Center fine tune — round avatar / compact stats / smaller bio */
#profileOverlay .avatar-upload-wrap{grid-template-columns:76px minmax(0,1fr);padding:14px;border-radius:24px}
#profileOverlay .profile-avatar{width:76px;height:76px;border-radius:50%;box-shadow:0 12px 30px rgba(124,106,247,.24)}
#profileOverlay .profile-avatar img{border-radius:50%;object-fit:cover}
#profileOverlay .profile-avatar::after{left:0;right:0;bottom:0;height:27px;border-radius:0 0 999px 999px;font-size:.66rem;background:rgba(0,0,0,.52)}
#profileOverlay .profile-stat-row{display:flex;gap:18px;padding:0 28px 10px!important;color:var(--text2);font-size:.76rem}
#profileOverlay .profile-stat-row span{display:inline-flex;align-items:baseline;gap:5px;padding:0;border:0;background:none!important;box-shadow:none}
#profileOverlay #profileFollowers,#profileOverlay #profileFollowing{display:inline;font-size:.98rem;line-height:1;margin:0;font-weight:900;color:var(--text)}
#profileOverlay #profileBioDisplay{font-size:.8rem!important;line-height:1.45!important}
#profileOverlay #profileBio{height:48px!important;min-height:48px!important;border-radius:15px;padding-top:9px;padding-bottom:9px}
#profileOverlay .nick-edit-wrap:has(#profileBioDisplay){padding:10px 12px;border-radius:16px}
@media(max-width:560px){#profileOverlay .avatar-upload-wrap{grid-template-columns:72px minmax(0,1fr);padding:13px}#profileOverlay .profile-avatar{width:72px;height:72px;border-radius:50%}#profileOverlay .profile-avatar img{border-radius:50%}#profileOverlay .profile-stat-row{padding:0 18px 8px!important;gap:16px}#profileOverlay #profileBio{height:46px!important;min-height:46px!important}}


/* ── 2026 visual polish: editorial aurora + SVG accents ── */
:root{--cyan:#5ac8fa;--pink:#ff5ea8;--gold:#ffd166;--surface-line:rgba(255,255,255,.09)}
/* ── Video: 正文里的 <video> 与 lightbox 详情 ── */
.md-video-wrap{margin:14px 0;position:relative;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.18);border:.5px solid var(--surface-line);background:transparent}
.md-video{display:block;width:100%;height:auto;object-fit:contain;cursor:pointer;background:transparent}

.card-video-badge{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:8px 14px;border-radius:10px;background:linear-gradient(135deg,rgba(110,94,247,.12),rgba(90,200,250,.08));border:.5px solid rgba(110,94,247,.25);color:var(--accent2);font-size:.82rem;font-weight:600}
.card-video-badge svg{width:18px;height:18px;flex-shrink:0}
.md-video-caption{padding:8px 12px;font-size:.82rem;color:var(--text-dim);background:rgba(0,0,0,.35);backdrop-filter:blur(8px)}
.video-card{display:flex;align-items:center;gap:10px;margin-top:8px;padding:10px 12px;border-radius:12px;background:linear-gradient(180deg,rgba(110,94,247,.10),rgba(110,94,247,.04));border:.5px solid var(--surface-line);font-size:.86rem;color:var(--text);cursor:pointer;transition:transform .2s var(--ease),background .2s}
.video-card:hover{transform:translateY(-1px);background:linear-gradient(180deg,rgba(110,94,247,.18),rgba(110,94,247,.06))}
.video-card-icon{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--cyan));display:flex;align-items:center;justify-content:center;color:#fff;font-size:.95rem;flex-shrink:0}
.video-card-meta{flex:1;min-width:0}
.video-card-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.video-card-sub{font-size:.74rem;color:var(--text-dim);margin-top:2px}
.video-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);z-index:9980;display:none;align-items:center;justify-content:center;flex-direction:column;padding:20px}
.video-overlay.open{display:flex;animation:fadein .2s var(--ease)}
.video-overlay .vo-stage{position:relative;max-width:min(1200px,96vw);max-height:84vh;width:100%;display:flex;flex-direction:column;gap:12px}
.video-overlay video{width:100%;max-height:78vh;background:#000;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6);outline:none}
.video-overlay .vo-meta{color:#e4e4e7;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:0 8px}
.video-overlay .vo-title{font-size:1.05rem;font-weight:600;flex:1;min-width:0}
.video-overlay .vo-close{position:absolute;top:-6px;right:-6px;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.18);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.video-overlay .vo-close:hover{background:rgba(110,94,247,.5)}
.video-overlay .vo-actions{display:flex;gap:8px;flex-wrap:wrap}
.video-overlay .vo-actions button{padding:7px 14px;border-radius:10px;background:rgba(255,255,255,.10);color:#fff;border:.5px solid rgba(255,255,255,.18);font-size:.85rem;cursor:pointer;transition:background .2s}
.video-overlay .vo-actions button:hover{background:rgba(110,94,247,.5)}
.video-overlay .vo-actions button.danger{background:rgba(255,80,80,.18);border-color:rgba(255,80,80,.4)}
.video-overlay .vo-actions button.danger:hover{background:rgba(255,80,80,.4)}
.video-overlay .vo-desc{color:#a1a1aa;font-size:.88rem;max-width:100%;white-space:pre-wrap;line-height:1.55;padding:0 8px}
.video-overlay .vo-stats{display:flex;gap:14px;font-size:.78rem;color:#a1a1aa;padding:0 8px}
.video-overlay .vo-stats span{display:inline-flex;align-items:center;gap:4px}
@keyframes fadein{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
/* SECURITY FIX: 自渲染 confirm/alert modal 替代 window.confirm/alert */
.video-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadein .15s var(--ease)}
.vo-confirm-box{background:var(--bg2);border:.5px solid var(--surface-line);border-radius:14px;padding:24px 22px 18px;max-width:min(420px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.5);font-size:.95rem;line-height:1.5;color:var(--text)}
.vo-confirm-msg{margin-bottom:18px;white-space:pre-wrap;word-break:break-word}
.vo-confirm-actions{display:flex;justify-content:flex-end;gap:8px}
.vo-confirm-actions button{padding:7px 16px;border-radius:8px;border:.5px solid var(--surface-line);background:rgba(255,255,255,.06);color:var(--text);font-size:.88rem;cursor:pointer;transition:background .15s}
.vo-confirm-actions button:hover{background:rgba(110,94,247,.35)}
.vo-confirm-actions button.danger{background:rgba(255,80,80,.18);border-color:rgba(255,80,80,.4);color:#fff}
.vo-confirm-actions button.danger:hover{background:rgba(255,80,80,.4)}

body{background:
  radial-gradient(circle at 14% 4%,rgba(110,94,247,.16),transparent 32%),
  radial-gradient(circle at 86% 12%,rgba(90,200,250,.10),transparent 28%),
  linear-gradient(180deg,var(--bg),#050506 58%,var(--bg));}
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000 0 42%,transparent 82%)}
nav{box-shadow:0 10px 34px rgba(0,0,0,.26)}
.nav-logo-dot{box-shadow:0 0 18px var(--accent)}
.page{position:relative;z-index:1}
.page::before{content:'';position:fixed;left:50%;top:72px;width:min(760px,92vw);height:220px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(ellipse at center,rgba(110,94,247,.14),transparent 68%);filter:blur(1px);z-index:-1}
.search-wrap{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 50px rgba(0,0,0,.18);background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.035))!important;border-color:rgba(110,94,247,.22)!important}
.search-wrap:focus-within{box-shadow:0 0 0 4px rgba(110,94,247,.14),0 20px 60px rgba(0,0,0,.24)}
.search-icon{filter:drop-shadow(0 0 8px rgba(110,94,247,.45))}
.tag-filter-btn,.load-more-btn,.sm-btn,.n-btn,.m-btn,.notif-tab{position:relative;overflow:hidden}
.tag-filter-btn::before,.load-more-btn::before,.sm-btn::before,.n-btn::before,.m-btn::before,.notif-tab::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.12),transparent);transform:translateX(-130%);transition:transform .55s var(--ease);pointer-events:none}.tag-filter-btn:hover::before,.load-more-btn:hover::before,.sm-btn:hover::before,.n-btn:hover::before,.m-btn:hover::before,.notif-tab:hover::before{transform:translateX(130%)}
.post-card{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.062),rgba(255,255,255,.028))!important;border-color:var(--surface-line)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 46px rgba(0,0,0,.18);backdrop-filter:blur(14px)}
.post-card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(110,94,247,.55),transparent 34%,rgba(90,200,250,.35));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s;pointer-events:none}.post-card:hover::before{opacity:1}
.post-card::after{content:'';position:absolute;width:180px;height:180px;right:-90px;top:-90px;border-radius:50%;background:radial-gradient(circle,rgba(110,94,247,.16),transparent 70%);pointer-events:none}
.card-tag,.notif-chip{background:rgba(110,94,247,.12)!important;border-color:rgba(110,94,247,.28)!important;color:var(--accent2)!important}
.detail-header,.comments,.modal-box,.notif-panel,.cmt-bar-inner,.card-social-panel{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 52px rgba(0,0,0,.20);backdrop-filter:blur(18px)}
.md{position:relative}.md::before{content:'';display:block;height:2px;width:84px;margin:0 0 18px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--cyan),transparent)}
.cmt-bar-send,.m-btn.primary,.load-more-btn{background:linear-gradient(135deg,var(--accent),var(--cyan) 60%,var(--accent2))!important;box-shadow:0 10px 30px rgba(110,94,247,.28)}
.cmt-like-side-btn .like-heart{filter:drop-shadow(0 0 8px rgba(255,94,168,.26))}
.overlay{background:rgba(0,0,0,.62);backdrop-filter:blur(12px)}
@media (prefers-reduced-motion:reduce){.tag-filter-btn::before,.load-more-btn::before,.sm-btn::before,.n-btn::before,.m-btn::before,.notif-tab::before{display:none}}

/* ========================================
   2026 Ultimate Visual Polish & Beautification
   ======================================== */
:root {
  --glow-color: rgba(110, 94, 247, 0.15);
  --card-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  --card-shadow-hover: 0 20px 45px rgba(110, 94, 247, 0.18);
}

[data-theme="light"] {
  --glow-color: rgba(110, 94, 247, 0.06);
  --card-shadow: 0 8px 30px rgba(120, 120, 150, 0.08);
  --card-shadow-hover: 0 20px 45px rgba(110, 94, 247, 0.1);
}

/* Global Typography & Smoothness */
body {
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}

/* Navigation Glassmorphism Enhancement */
nav {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] nav {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
}

.n-btn {
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.25s var(--ease);
}
.n-btn:hover {
  background: var(--bg4);
  color: var(--accent2);
  border-color: var(--accent);
  box-shadow: 0 2px 8px var(--glow);
}

/* Search Input Polish */
.search-wrap {
  border-radius: 20px;
  overflow: hidden;
}
.search-input {
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Tag Filter Buttons */
.tag-filter-btn {
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 20px;
  padding: 6px 14px;
}
.tag-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px var(--glow);
}

/* Post Card Polish */
.post-card {
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)) !important;
  box-shadow: var(--card-shadow);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.post-card:hover {
  border-color: var(--accent) !important;
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover), 0 0 20px rgba(110, 94, 247, 0.1);
}
[data-theme="light"] .post-card {
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: rgba(255, 255, 255, 0.6) !important;
}

.card-title {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.card-excerpt {
  opacity: 0.85;
  line-height: 1.7;
}

/* Comments Section Polish */
.cmt-item {
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.01);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s var(--ease);
}
[data-theme="light"] .cmt-item {
  border: 1px solid rgba(0, 0, 0, 0.04);
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 15px rgba(120, 120, 150, 0.02);
}
.cmt-item:hover {
  border-color: rgba(110, 94, 247, 0.25);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.cmt-avatar {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Modals Polish */
.overlay {
  background: rgba(0, 0, 0, 0.65) !important;
}

.modal-box {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: linear-gradient(160deg, rgba(110, 94, 247, 0.05), rgba(255, 255, 255, 0.01)), #18181b !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="light"] .modal-box {
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(110, 94, 247, 0.02)), #fff !important;
  box-shadow: 0 30px 80px rgba(120, 120, 150, 0.12) !important;
}

.field {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(0, 0, 0, 0.15) !important;
}
[data-theme="light"] .field {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: rgba(0, 0, 0, 0.02) !important;
}
.field:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(110, 94, 247, 0.15) !important;
}

.m-btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(110, 94, 247, 0.2) !important;
}
.m-btn.primary:hover {
  box-shadow: 0 6px 18px rgba(110, 94, 247, 0.35) !important;
}

.m-btn.secondary {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}
.m-btn.secondary:hover {
  border-color: var(--accent) !important;
  color: var(--accent2) !important;
}
[data-theme="light"] .m-btn.secondary {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: rgba(0, 0, 0, 0.01) !important;
}
[data-theme="light"] .m-btn.secondary:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Bottom Comment Bar Polish */
.cmt-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(13, 14, 18, 0.85) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
[data-theme="light"] .cmt-bar {
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(255, 255, 255, 0.85) !important;
}

.cmt-bar-input {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(0, 0, 0, 0.2) !important;
}
[data-theme="light"] .cmt-bar-input {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: rgba(255, 255, 255, 0.8) !important;
}
.cmt-bar-input:focus {
  border-color: var(--accent) !important;
}

.cmt-bar-send {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(110, 94, 247, 0.2) !important;
}
.cmt-bar-send:hover {
  box-shadow: 0 6px 18px rgba(110, 94, 247, 0.35) !important;
}


/* ── 2026 mobile repair: tighter blog list inside homepage iframe ── */
@media(max-width:640px){
  body{background:linear-gradient(180deg,var(--bg),#070709 58%,var(--bg))}
  body::after{opacity:.45;background-size:34px 34px}
  nav{height:52px;padding:0 12px;background:rgba(10,10,12,.78)}
  .page{padding:64px 12px 72px;max-width:100%}
  .page::before{top:42px;height:128px;width:96vw;opacity:.68}
  .list-header{margin-bottom:12px}
  .list-title{font-size:1.42rem;line-height:1.12;margin-bottom:3px;letter-spacing:-.035em}
  .list-sub{font-size:.78rem;line-height:1.45;max-width:92%}
  .search-wrap{width:100%;height:42px;margin:0 0 10px;border-radius:15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 26px rgba(0,0,0,.14)}
  .search-wrap:focus-within,.search-wrap.has-value{width:100%}
  .search-wrap input{height:42px;font-size:.86rem;padding-left:40px;padding-right:12px}
  .search-icon{left:13px;width:16px;height:16px}
  .tag-filter{gap:6px;margin:0 0 12px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .tag-filter::-webkit-scrollbar{display:none}
  .tag-filter-btn{flex:0 0 auto;padding:7px 10px;border-radius:999px;font-size:.72rem}
  .post-list{display:grid;gap:9px}
  .post-card{padding:14px 14px 12px;margin-bottom:0;border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 28px rgba(0,0,0,.14);backdrop-filter:blur(10px)}
  .post-card::after{width:120px;height:120px;right:-70px;top:-70px;opacity:.7}
  .card-title{font-size:1rem;line-height:1.28;margin-bottom:6px;letter-spacing:-.025em}
  .card-meta{font-size:.68rem;gap:7px;margin-bottom:8px;flex-wrap:wrap}
  .card-content-wrap{max-height:calc(1.55em * 3);margin-bottom:4px}
  .card-excerpt,.card-content-wrap{font-size:.82rem;line-height:1.55}
  .card-thumb{max-height:118px;margin-top:8px;border-radius:14px;object-position:center}
  .card-tags{gap:5px;margin-top:8px}.card-tag{font-size:.64rem;padding:3px 7px}
  .load-more-btn{margin:14px auto 0;padding:10px 14px;font-size:.82rem;border-radius:14px}
}
@media(max-width:380px){.page{padding-left:10px;padding-right:10px}.post-card{padding:12px}.card-thumb{max-height:96px}.list-title{font-size:1.32rem}}

/* ── 2026 theme sync repair: keep Blog aligned with global light mode ── */
[data-theme="light"] body{
  background:
    radial-gradient(circle at 16% 6%,rgba(124,106,247,.08),transparent 30%),
    radial-gradient(circle at 88% 14%,rgba(90,200,250,.06),transparent 28%),
    linear-gradient(180deg,#f5f5fa 0%,#eeeef6 56%,#f8f8fc 100%)!important;
  color:var(--text)!important;
}
[data-theme="light"] body::before{
  background:
    radial-gradient(ellipse 80% 60% at 18% 0%,rgba(110,94,247,.055),transparent 60%),
    radial-gradient(ellipse 60% 50% at 82% 100%,rgba(90,200,250,.04),transparent 55%)!important;
}
[data-theme="light"] body::after{opacity:.28;background-image:linear-gradient(rgba(80,80,110,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(80,80,110,.03) 1px,transparent 1px)}
[data-theme="light"] nav{background:rgba(245,245,250,.88)!important;border-bottom-color:rgba(0,0,0,.08)!important;box-shadow:0 10px 30px rgba(120,120,150,.10)}
[data-theme="light"] .page::before{background:radial-gradient(ellipse at center,rgba(110,94,247,.07),transparent 70%);opacity:.75}
[data-theme="light"] .search-wrap{background:rgba(255,255,255,.82)!important;border-color:rgba(110,94,247,.18)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 34px rgba(120,120,150,.13)!important}
[data-theme="light"] .search-input{background:transparent!important;color:#1d1d1f!important;border-color:rgba(0,0,0,.08)!important}
[data-theme="light"] .post-card{background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(250,250,255,.72))!important;border-color:rgba(0,0,0,.08)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 34px rgba(120,120,150,.12)!important;color:var(--text)!important}
[data-theme="light"] .detail-header,[data-theme="light"] .comments,[data-theme="light"] .modal-box,[data-theme="light"] .notif-panel,[data-theme="light"] .cmt-bar-inner,[data-theme="light"] .card-social-panel{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(248,248,253,.76))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 38px rgba(120,120,150,.14)!important}
@media(max-width:640px){
  [data-theme="light"] body{background:linear-gradient(180deg,#f5f5fa 0%,#eeeef6 58%,#f8f8fc 100%)!important}
  [data-theme="light"] nav{background:rgba(245,245,250,.88)!important}
  [data-theme="light"] body::after{opacity:.22}
}
:root{--text-dim:#a1a1aa}

/* 涟漪容器（配合 /js/motion-layer.js 点击反馈） */
.m-btn{position:relative;overflow:hidden}