/* ============ 海棠博客 · 樱花二次元主题 ============ */
:root {
  --bg: #fff7fa;
  --bg2: #ffeef4;
  --card: rgba(255,255,255,.68);
  --card-strong: rgba(255,255,255,.85);
  --line: rgba(255,78,106,.16);
  --text: #4d3f52;
  --dim: #87758f;
  --faint: #b3a4bd;
  --acc: #ff4e6a;          /* 樱红（主题主色） */
  --acc2: #a78bfa;         /* 紫 */
  --acc3: #38bdf8;         /* 天蓝 */
  --gold: #fbbf24;
  --grad: linear-gradient(120deg,#ff4e6a 0%,#f9a8d4 40%,#a78bfa 80%);
  --radius: 20px;
  --font: "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif;
  --mono: "JetBrains Mono","Cascadia Code",ui-monospace,Consolas,monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:
    radial-gradient(1200px 700px at 85% -10%, #ffe3ec 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 20%, #f3e8ff 0%, transparent 55%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%);
  background-attachment: fixed;
  color:var(--text); font-family:var(--font);
  min-height:100vh; overflow-x:hidden; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
::selection { background:rgba(255,78,106,.25); }
a { color:var(--acc); text-decoration:none; }

/* ---------- 春日柔光斑（替换极光，浅色系） ---------- */
.aurora { position:fixed; inset:-20%; z-index:-3; filter:blur(80px) saturate(140%); opacity:.7; pointer-events:none; }
.aurora i { position:absolute; border-radius:50%; animation:drift 24s ease-in-out infinite alternate; }
.aurora i:nth-child(1){ width:55vw; height:45vh; left:-8%; top:-5%;  background:radial-gradient(circle,#ffb7c5aa,transparent 65%); }
.aurora i:nth-child(2){ width:50vw; height:50vh; right:-10%; top:5%; background:radial-gradient(circle,#e9d5ffaa,transparent 65%); animation-delay:-6s; animation-duration:28s; }
.aurora i:nth-child(3){ width:45vw; height:40vh; left:25%; bottom:-12%; background:radial-gradient(circle,#bae6fd88,transparent 65%); animation-delay:-12s; animation-duration:32s; }
.aurora i:nth-child(4){ width:35vw; height:35vh; right:20%; bottom:-5%; background:radial-gradient(circle,#fbcfe899,transparent 65%); animation-delay:-18s; }
@keyframes drift {
  0%   { transform:translate(0,0) scale(1) rotate(0deg); }
  50%  { transform:translate(6vw,-4vh) scale(1.15) rotate(8deg); }
  100% { transform:translate(-5vw,5vh) scale(.92) rotate(-6deg); }
}
/* 樱花花瓣 canvas */
#stars { position:fixed; inset:0; z-index:-2; pointer-events:none; }
/* 纸纹噪点 */
.noise { position:fixed; inset:0; z-index:-1; opacity:.03; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- 头部 ---------- */
.site-head {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  max-width:1080px; margin:0 auto; padding:16px 24px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  background:linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.55));
  border-bottom:1px solid rgba(255,78,106,.10);
  border-radius:0 0 24px 24px;
}
.logo { font-size:22px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:8px; }
.logo span { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.site-head nav { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.site-head nav a {
  color:var(--dim); padding:8px 14px; border-radius:99px; font-size:14.5px; transition:.25s;
}
.site-head nav a:hover { color:var(--acc); background:rgba(255,78,106,.07); }
.site-head nav a.on { color:#fff; background:linear-gradient(120deg,var(--acc),#f472b6); box-shadow:0 6px 18px -6px rgba(255,78,106,.55); }
.admin-link { opacity:.55; }

/* ---------- 主区 ---------- */
main { max-width:1080px; margin:0 auto; padding:48px 24px 96px; min-height:60vh; position:relative; }
.view { animation:rise .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes rise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }

/* hero */
.hero { padding:52px 0 26px; }
.hero .kicker { font-family:var(--mono); font-size:13px; letter-spacing:.3em; color:var(--acc); text-transform:uppercase; }
.hero h1 { font-size:clamp(38px,7vw,72px); line-height:1.12; font-weight:900; margin:14px 0 22px; color:var(--text); }
.hero h1 .shine {
  background:linear-gradient(110deg,#ff4e6a,#f9a8d4,#a78bfa,#ff4e6a); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine 7s linear infinite;
}
@keyframes shine { to { background-position:300% 0; } }
.hero p.sub { color:var(--dim); font-size:18px; max-width:600px; }
.hero p.sub b { color:var(--acc); font-family:var(--mono); }
.hero-cta { display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }
.hero-cta .btn { font-size:15px; padding:12px 28px; }
.hero .stats { display:flex; gap:28px; margin-top:34px; flex-wrap:wrap; }
.hero .stat b { font-size:26px; font-weight:800; display:block; font-family:var(--mono); color:var(--acc); }
.hero .stat span { color:var(--faint); font-size:13px; }

/* 搜索 */
.searchbar { margin:26px 0 8px; position:relative; }
.searchbar input {
  width:100%; padding:14px 20px 14px 48px; border-radius:99px;
  background:var(--card); border:1px solid var(--line); color:var(--text);
  font-size:15px; outline:none; transition:.25s;
  box-shadow:0 4px 20px -8px rgba(255,78,106,.18);
}
.searchbar input:focus { border-color:var(--acc); box-shadow:0 0 0 4px rgba(255,78,106,.12); }
.searchbar::before { content:"🌸"; position:absolute; left:16px; top:50%; transform:translateY(-54%); font-size:17px; }

/* ---------- 文章卡片 ---------- */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; margin-top:26px; }
.card {
  position:relative; border-radius:var(--radius); padding:26px 24px;
  background:var(--card); border:1px solid var(--line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  cursor:pointer; overflow:hidden; transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s;
  display:flex; flex-direction:column; gap:12px;
  box-shadow:0 6px 24px -12px rgba(255,78,106,.18);
}
.card::before {
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,78,106,.10), transparent 45%);
}
.card:hover::before { opacity:1; }
.card:hover { transform:translateY(-6px); border-color:rgba(255,78,106,.45); box-shadow:0 18px 44px -16px rgba(255,78,106,.35); }
.card .date { font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.08em; }
.card h3 { font-size:20px; line-height:1.4; font-weight:800; color:var(--text); }
.card .excerpt { color:var(--dim); font-size:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.card .meta { display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip {
  font-size:12px; padding:3px 12px; border-radius:99px; font-family:var(--mono);
  background:rgba(255,78,106,.08); color:var(--acc); border:1px solid rgba(255,78,106,.22);
  cursor:pointer; transition:.2s;
}
.chip:hover { background:rgba(255,78,106,.16); }
.card .reads { font-size:12px; color:var(--faint); font-family:var(--mono); white-space:nowrap; }
.card .num { position:absolute; top:-14px; right:8px; font-size:110px; font-weight:900; font-family:var(--mono);
  color:rgba(255,78,106,.06); pointer-events:none; line-height:1; }
.card { animation:pop .5s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--i,0)*70ms); }
@keyframes pop { from { opacity:0; transform:translateY(20px) scale(.97); } to { opacity:1; transform:none; } }

/* ---------- 文章页 ---------- */
.article { max-width:760px; margin:0 auto; }
.article .back { color:var(--dim); font-size:14px; cursor:pointer; display:inline-flex; gap:6px; align-items:center; margin-bottom:18px; transition:.2s; }
.article .back:hover { color:var(--acc); transform:translateX(-3px); }
.article h1 { font-size:clamp(28px,5vw,44px); line-height:1.25; font-weight:900; margin:8px 0 14px; }
.article .head-meta { display:flex; gap:14px; align-items:center; color:var(--faint); font-size:13px; font-family:var(--mono); flex-wrap:wrap; }
.divider { height:1px; background:linear-gradient(90deg,transparent,rgba(255,78,106,.25) 20%,rgba(255,78,106,.25) 80%,transparent); margin:26px 0; }

/* markdown 正文 */
.prose { font-size:16.5px; }
.prose h2 { font-size:24px; margin:34px 0 14px; padding-left:14px; border-left:3px solid; border-image:var(--grad) 1; }
.prose h3 { font-size:19px; margin:26px 0 10px; }
.prose p { margin:14px 0; color:#5d4d66; }
.prose ul,.prose ol { margin:14px 0 14px 26px; color:#5d4d66; }
.prose li { margin:6px 0; }
.prose strong { color:#2f2536; }
.prose a { border-bottom:1px dashed rgba(255,78,106,.5); }
.prose code { font-family:var(--mono); font-size:.88em; background:rgba(255,78,106,.08); padding:2px 7px; border-radius:6px; color:#d6336c; }
.prose pre { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px; overflow-x:auto; margin:18px 0; box-shadow:0 4px 16px -8px rgba(255,78,106,.15); }
.prose pre code { background:none; padding:0; color:#7c3aed; font-size:13.5px; line-height:1.6; }
.prose blockquote { border-left:3px solid var(--acc2); background:rgba(167,139,250,.07); padding:10px 18px; border-radius:0 10px 10px 0; margin:18px 0; color:var(--dim); }
.prose img { max-width:100%; border-radius:12px; margin:14px 0; }
.prose hr { border:none; border-top:1px dashed var(--line); margin:28px 0; }
.prose table { border-collapse:collapse; width:100%; margin:16px 0; font-size:14px; background:#fff; border-radius:10px; overflow:hidden; }
.prose th,.prose td { border:1px solid var(--line); padding:8px 12px; text-align:left; }
.prose th { background:rgba(255,78,106,.06); color:var(--acc); }

.pv.bump { animation:bump .6s; }
@keyframes bump { 30% { transform:scale(1.35); color:var(--acc); } }

/* ---------- 评论区 ---------- */
.comments { max-width:760px; margin:44px auto 0; }
.comments h2 { font-size:20px; margin-bottom:18px; }
.comments h2 b { color:var(--acc); font-family:var(--mono); }
.cform { display:grid; gap:12px; margin-bottom:26px; }
.cform .row2 { display:grid; grid-template-columns:1fr 2fr; gap:12px; }
.cform input, .cform textarea {
  width:100%; padding:12px 16px; border-radius:14px; background:var(--card);
  border:1px solid var(--line); color:var(--text); font-family:var(--font); font-size:14.5px;
  outline:none; transition:.2s; resize:vertical;
}
.cform input:focus, .cform textarea:focus { border-color:var(--acc); box-shadow:0 0 0 4px rgba(255,78,106,.1); }
.btn {
  padding:11px 26px; border:none; border-radius:99px; cursor:pointer;
  background:var(--grad); background-size:200% 100%; color:#fff; font-weight:700; font-size:15px;
  transition:.3s; align-self:start;
}
.btn:hover { background-position:100% 0; transform:translateY(-2px); box-shadow:0 10px 28px -10px var(--acc); }
.btn:disabled { opacity:.5; cursor:wait; transform:none; }
.btn.ghost { background:var(--card-strong); color:var(--dim); border:1px solid var(--line); }
.comment { display:flex; gap:14px; padding:16px 0; border-bottom:1px dashed rgba(255,78,106,.12); animation:pop .45s both; }
.comment .avatar {
  width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-weight:800; color:#fff; font-size:17px;
  background:linear-gradient(135deg,hsl(var(--h,340) 75% 62%),hsl(calc(var(--h,340) + 45) 70% 52%));
  box-shadow:0 4px 14px -4px hsl(var(--h,340) 75% 62% / .6);
}
.comment .who { font-weight:700; font-size:14.5px; }
.comment .when { color:var(--faint); font-size:12px; font-family:var(--mono); margin-left:10px; }
.comment .text { color:var(--dim); font-size:14.5px; margin-top:4px; white-space:pre-wrap; word-break:break-word; }
.empty { text-align:center; color:var(--faint); padding:34px 0; }
.toast {
  position:fixed; left:50%; bottom:40px; transform:translateX(-50%) translateY(20px);
  background:var(--card-strong); border:1px solid var(--line); backdrop-filter:blur(14px);
  color:var(--text); padding:12px 24px; border-radius:99px; font-size:14px; z-index:99;
  opacity:0; pointer-events:none; transition:.35s cubic-bezier(.22,1,.36,1);
  box-shadow:0 12px 40px -12px rgba(255,78,106,.35);
}
.toast.show { opacity:1; transform:translateX(-50%); }
.toast.ok { border-color:rgba(255,78,106,.5); }
.toast.err { border-color:rgba(167,139,250,.6); }

/* ---------- 标签云 ---------- */
.tagcloud { display:flex; flex-wrap:wrap; gap:16px; margin-top:20px; }
.tagcloud .t {
  padding:10px 22px; border-radius:99px; background:var(--card); border:1px solid var(--line);
  cursor:pointer; transition:.25s; font-weight:600; color:var(--text);
}
.tagcloud .t:hover { transform:translateY(-3px) scale(1.04); border-color:var(--acc); box-shadow:0 8px 24px -10px rgba(255,78,106,.4); color:var(--acc); }
.tagcloud .t small { color:var(--faint); font-family:var(--mono); margin-left:6px; }
.tagcloud .t.active { background:linear-gradient(120deg,var(--acc),#f472b6); border-color:transparent; color:#fff; }

/* ---------- 工具集页 ---------- */
.tools-wrap { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:22px; margin-top:26px; }
.tool-card {
  background:var(--card); border:1px solid var(--line); border-radius:24px; padding:30px 28px;
  backdrop-filter:blur(12px); transition:.35s cubic-bezier(.22,1,.36,1);
  display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden;
  box-shadow:0 8px 30px -14px rgba(255,78,106,.25);
  animation:pop .5s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--i,0)*90ms);
}
.tool-card:hover { transform:translateY(-6px); border-color:rgba(255,78,106,.45); box-shadow:0 20px 50px -18px rgba(255,78,106,.4); }
.tool-card .ticon { font-size:40px; line-height:1; }
.tool-card h3 { font-size:21px; font-weight:900; }
.tool-card p { color:var(--dim); font-size:14.5px; flex:1; }
.tool-card .tfeat { display:flex; gap:8px; flex-wrap:wrap; }
.tool-card .tgo {
  align-self:flex-start; margin-top:6px; display:inline-flex; align-items:center; gap:8px;
  background:var(--grad); background-size:200% 100%; color:#fff; font-weight:700; font-size:14px;
  padding:9px 22px; border-radius:99px; transition:.3s;
}
.tool-card .tgo:hover { background-position:100% 0; transform:translateX(3px); }
.tool-card .ribbon { position:absolute; top:14px; right:-34px; transform:rotate(35deg);
  background:linear-gradient(90deg,var(--acc),#f472b6); color:#fff; font-size:11px; padding:3px 40px;
  font-family:var(--mono); letter-spacing:.1em; }

/* ---------- 火腿电台页 ---------- */
.ham-hero { display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-bottom:26px; }
.callsign {
  font-family:var(--mono); font-weight:900; font-size:clamp(40px,8vw,84px); letter-spacing:.06em;
  background:linear-gradient(110deg,#ff4e6a,#a78bfa,#38bdf8,#ff4e6a); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine 8s linear infinite;
}
.beacon { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:13px; color:var(--dim); }
.beacon i { width:10px; height:10px; border-radius:50%; background:#22c55e; animation:blink 2s infinite; box-shadow:0 0 12px #22c55e; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
.utc-clock { font-family:var(--mono); font-size:22px; color:var(--acc); font-weight:800; }
.ham-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; }
.ham-card {
  background:var(--card); border:1px solid var(--line); border-radius:22px; padding:24px;
  backdrop-filter:blur(12px); box-shadow:0 8px 30px -14px rgba(255,78,106,.2);
  animation:pop .5s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--i,0)*80ms);
}
.ham-card h3 { font-size:17px; margin-bottom:14px; }
.ham-card h3 small { color:var(--faint); font-weight:400; font-size:12px; margin-left:8px; }
.morse-box { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.morse-read { font-family:var(--mono); font-size:22px; letter-spacing:.3em; color:var(--acc); word-break:break-all; }
.morse-read .on { color:#fff; background:var(--acc); border-radius:6px; padding:0 6px; }
.qsl-card {
  border:2px solid var(--acc); border-radius:16px; padding:18px 22px; background:
    repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(255,78,106,.04) 12px, rgba(255,78,106,.04) 24px), #fff;
  font-family:var(--mono); position:relative;
}
.qsl-card .qsl-cs { font-size:26px; font-weight:900; color:var(--acc); letter-spacing:.05em; }
.qsl-card .qsl-meta { font-size:12.5px; color:var(--dim); margin-top:8px; line-height:1.9; }
.qsl-card .qsl-stamp { position:absolute; top:12px; right:14px; border:2px dashed var(--acc2); color:var(--acc2);
  border-radius:8px; padding:3px 10px; font-size:11px; transform:rotate(8deg); }
.freq-list td { padding:6px 4px; font-size:13.5px; }
.freq-list .fq { font-family:var(--mono); color:var(--acc); font-weight:700; }
.log-table { width:100%; border-collapse:collapse; font-size:12.5px; font-family:var(--mono); }
.log-table th { text-align:left; color:var(--faint); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line); }
.log-table td { padding:6px 8px; border-bottom:1px dashed rgba(255,78,106,.1); }
.note-tag { display:inline-block; font-size:11px; font-family:var(--mono); color:var(--gold);
  border:1px solid rgba(251,191,36,.4); background:rgba(251,191,36,.08); border-radius:6px; padding:1px 8px; margin-left:8px; }

/* ---------- 管理台 ---------- */
.admin { max-width:820px; margin:0 auto; }
.admin .panel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-bottom:20px; box-shadow:0 6px 24px -12px rgba(255,78,106,.18); }
.admin textarea { width:100%; min-height:220px; font-family:var(--mono); font-size:13px; background:#fff; color:#7c3aed; border:1px solid var(--line); border-radius:12px; padding:16px; outline:none; }
.admin .pend-item { border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:12px; background:#fff; }
.admin .pend-item .acts { margin-top:10px; display:flex; gap:10px; }
.admin .mini { padding:6px 18px; font-size:13px; border-radius:99px; border:1px solid var(--line); background:var(--card-strong); color:var(--text); cursor:pointer; transition:.2s; }
.admin .mini.ok:hover { border-color:var(--acc); color:var(--acc); }
.admin .mini.no:hover { border-color:var(--faint); color:var(--faint); }

/* ---------- 页脚 / 加载 / 响应式 ---------- */
.site-foot { text-align:center; padding:36px 20px; color:var(--faint); font-size:13px; border-top:1px solid rgba(255,78,106,.08); }
.foot-dim { margin-top:6px; }
.foot-admin { color:var(--faint); }
.loader { display:flex; gap:8px; justify-content:center; padding:80px 0; }
.loader span { width:10px; height:10px; border-radius:50%; background:var(--acc); animation:bounce 1s ease-in-out infinite; }
.loader span:nth-child(2){ animation-delay:.15s; background:var(--acc2); }
.loader span:nth-child(3){ animation-delay:.3s; background:var(--acc3); }
@keyframes bounce { 40% { transform:translateY(-14px) scale(1.2); } }
.cursor-glow { position:fixed; width:340px; height:340px; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle,rgba(255,78,106,.08),transparent 70%);
  transform:translate(-50%,-50%); left:50%; top:50%; transition:opacity .4s; }
@media (max-width:640px) {
  .site-head { padding:14px 16px; }
  .site-head nav a { padding:7px 10px; font-size:13.5px; }
  main { padding:28px 16px 70px; }
  .cform .row2 { grid-template-columns:1fr; }
  .hero { padding-top:30px; }
  .ham-hero { gap:14px; }
}