:root{
  --bg1:#fff0f7; --bg2:#f3efff;
  --pink:#ff8fb3; --purple:#a78bfa; --ink:#4a3a4a; --card:#ffffff;
  --header-bg:rgba(255,255,255,.7);
  --tag-bg:#fff0f7; --tag-bg2:#f3efff;
  --border:#ffd9e6; --divider:#f0e6ee;
  --input-bg:#fff; --input-border:#ffd9e6;
  --shadow1:rgba(255,143,179,.15); --shadow2:rgba(167,139,250,.25);
  --btn-text:#fff; --muted:rgba(74,58,74,.55); --footer:rgba(74,58,74,.5);
}
[data-theme="dark"]{
  --bg1:#1a1320; --bg2:#140f1c;
  --ink:#f3e9f1; --card:#241b2e;
  --header-bg:rgba(28,20,36,.72);
  --tag-bg:#3a2a44; --tag-bg2:#2a2440;
  --border:#4a3a55; --divider:#33283f;
  --input-bg:#2a2133; --input-border:#4a3a55;
  --shadow1:rgba(0,0,0,.45); --shadow2:rgba(0,0,0,.55);
  --btn-text:#fff; --muted:rgba(243,233,241,.55); --footer:rgba(243,233,241,.5);
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:"PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  color:var(--ink); background:linear-gradient(135deg,var(--bg1),var(--bg2)); min-height:100vh;
  transition:background .25s,color .25s;
}
.site-header{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:14px 24px; background:var(--header-bg); backdrop-filter:blur(8px);
  box-shadow:0 4px 18px var(--shadow1); position:sticky; top:0; z-index:10;
}
.site-title{ font-weight:800; font-size:20px; color:var(--pink); text-decoration:none; letter-spacing:1px; }
.site-header nav a{ margin-left:16px; color:var(--ink); text-decoration:none; font-weight:600; opacity:.8; }
.site-header nav a:hover{ color:var(--purple); opacity:1; }
main{ max-width:980px; margin:0 auto; padding:24px 18px 60px; }
.site-footer{ text-align:center; padding:24px; opacity:.6; font-size:14px; color:var(--footer); }

.btn{
  display:inline-block; text-decoration:none; padding:11px 22px; border-radius:999px;
  background:var(--pink); color:var(--btn-text); font-weight:700; box-shadow:0 6px 14px var(--shadow1);
  transition:.15s;
}
.btn.alt{ background:var(--purple); box-shadow:0 6px 14px var(--shadow2); }
.btn:hover{ transform:translateY(-2px); }

.home{ display:grid; grid-template-columns:1fr 280px; gap:24px; }
@media(max-width:720px){ .home{ grid-template-columns:1fr; } }
.feed{ display:flex; flex-direction:column; gap:18px; }
.post{ display:flex; gap:16px; background:var(--card); border-radius:16px; padding:16px; box-shadow:0 6px 18px var(--shadow1); transition:.15s; }
.post:hover{ transform:translateY(-3px); box-shadow:0 10px 22px var(--shadow2); }
.cover{ flex:0 0 120px; border-radius:12px; min-height:96px; }
.post-body{ flex:1; }
.post-title{ margin:0 0 6px; font-size:19px; }
.post-title a{ color:var(--ink); text-decoration:none; }
.post-title a:hover{ color:var(--purple); }
.post-meta{ font-size:13px; opacity:.55; margin-bottom:8px; }
.post-excerpt{ font-size:14px; opacity:.78; line-height:1.6; margin:0 0 10px; }
.post-tags{ margin-bottom:8px; }
.tag{ display:inline-block; background:var(--tag-bg); color:var(--purple); border-radius:999px; padding:3px 10px; font-size:12px; text-decoration:none; margin:2px 4px 2px 0; }
.readmore{ color:var(--pink); font-weight:700; text-decoration:none; font-size:14px; }
.empty{ text-align:center; opacity:.5; padding:20px; }

.side{ display:flex; flex-direction:column; gap:16px; }
.widget{ background:var(--card); border-radius:16px; padding:16px; box-shadow:0 6px 18px var(--shadow1); }
.widget h4{ margin:0 0 10px; color:var(--purple); font-size:16px; }
.widget p{ margin:0; font-size:14px; opacity:.8; line-height:1.6; }
#searchBox{ width:100%; border:2px solid var(--input-border); border-radius:10px; padding:8px 10px; font-size:14px; font-family:inherit; background:var(--input-bg); color:var(--ink); }
.tags .tag{ background:var(--tag-bg2); }
.muted{ opacity:.55; font-size:13px; color:var(--muted); }
.msg-mini{ list-style:none; padding:0; margin:0; }
.msg-mini li{ font-size:13px; line-height:1.5; padding:6px 0; border-bottom:1px solid var(--divider); word-break:break-word; }
.msg-mini li:last-child{ border-bottom:none; }
.msg-mini b{ color:var(--pink); }

.post-list{ list-style:none; padding:0; }
.post-list li{ padding:12px 0; border-bottom:1px solid var(--divider); display:flex; justify-content:space-between; gap:12px; }
.post-list a{ color:var(--ink); text-decoration:none; font-weight:600; }
.post-list .meta{ opacity:.5; font-size:13px; }

.theme-toggle{ margin-left:14px; background:none; border:2px solid var(--border); color:var(--ink); border-radius:999px; padding:5px 12px; cursor:pointer; font-size:14px; font-weight:700; transition:.15s; }
.theme-toggle:hover{ color:var(--purple); border-color:var(--purple); }
