/* 小菲主题 — layout and color only; article/editor/comment behavior stays shared. */
:root {
  --ink: #302e3d;
  --muted: #79727f;
  --blue: #b94770;
  --line: #eedee5;
  --paper: #fff9fb;
  --rose: #f4bfd2;
  --rose-soft: #fff0f5;
  --navy: #36364e;
  --gold: #b18b4c;
}
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  background: radial-gradient(ellipse at 96% 4%, #fce3ec 0, transparent 34%), var(--paper);
  color: var(--ink);
}
header {
  height: 94px;
  max-width: 1260px;
  border-bottom: 1px solid var(--line);
}
.brand { font-size: 23px; letter-spacing: 1px; gap: 11px; }
.mark {
  width: 39px; height: 41px;
  border-radius: 13px 13px 13px 4px;
  background: var(--navy);
  color: #ffe2ed;
  box-shadow: 3px 3px 0 #efc4d3;
  font-family: serif;
}
.brand-sub { color: #ae7d8f; font-size: 10px; letter-spacing: 2px; margin-left: 9px; }
nav { gap: 32px; }
.nav-active { position: relative; font-weight: 600; }
.nav-active::after { content: ''; position: absolute; bottom: -9px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
main { max-width: 1190px; }
.taffy-intro {
  display: grid;
  grid-template-columns: minmax(0,1fr) 400px;
  align-items: center;
  gap: 36px;
  padding: 52px 0 44px;
  border-bottom: 1px solid var(--line);
}
.intro-copy { padding-bottom: 4px; }
.intro .eyebrow { color: #a0657c; font-size: 12px; letter-spacing: 2px; }
.intro .eyebrow .little-star { margin: 0 10px 0 0; color: var(--gold); display: inline; font-size: 21px; vertical-align: -1px; }
.intro h1 {
  font-size: clamp(44px,5.1vw,66px);
  font-family: "Noto Serif SC","Songti SC",SimSun,serif;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 5px;
  margin: 22px 0 20px;
}
.intro-description { margin: 0; color: #696372; font-size: 16px; line-height: 1.9; }
.intro-note { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #9b7888; margin-top: 18px; line-height: 1.8; }
.note-line { width: 26px; height: 1px; background: #cfa6b6; flex: 0 0 auto; }
.journal-shortcut { display: inline-flex; align-items: center; gap: 24px; margin-top: 28px; font-size: 14px; color: var(--blue); font-weight: 600; }
.journal-shortcut span { font-size: 20px; font-weight: 400; }
.taffy-hero-art { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; margin:0; padding:0 10px; isolation:isolate; }
.art-halo { position:absolute; z-index:-1; width:280px; height:235px; top:96px; border-radius:50%; background:radial-gradient(ellipse,#f8dce8 0,#fcecf3 65%,transparent 72%); }
.taffy-hero-art > img { position:relative; display:block; width:330px; max-width:100%; height:auto; aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 12px 14px #9d6d8214); }
.art-spark { position:absolute; color:#b9995c; font-family:serif; }
.art-spark-one { top:63px; right:30px; font-size:38px; transform:rotate(10deg); }
.art-spark-two { bottom:90px; left:25px; font-size:18px; }
.taffy-hero-art figcaption { color:#a2778c; font-size:12px; letter-spacing:2px; margin-top:0; text-align:center; }
.taffy-hero-art figcaption small { display:block; font-size:9px; letter-spacing:2px; color:#b99ca9; margin-top:7px; }
.journal { padding-top: 36px; }
.section-top h2 { font-size: 23px; }
.section-star { font-size: 21px; color: var(--gold); margin-right: 5px; vertical-align: 1px; }
.search { width: 250px; border: 1px solid #e9d7e1; border-radius: 24px; background: #fff; padding: 1px 14px; }
.search input { background: transparent; margin-top: 0; padding: 8px 0; box-shadow: none; }
.search input:focus { outline: 0; }
.search:focus-within { outline: 2px solid #cd809d55; border-color: #ce93aa; }
.search span { color: #b08b9a; font-size: 23px; }
.categories { margin: 25px 0 22px; gap: 8px; }
.chip { border: 1px solid transparent; border-radius: 18px; padding: 5px 17px; font-size: 13px; }
.chip:hover { background: #ffe9f1; color: var(--blue); }
.chip.active { background: #fce5ef; color: #9c3c60; border-color: #f0c6d7; font-weight: 600; }
.post { margin: 12px 0; padding: 27px 25px; border: 1px solid #efdee6; border-radius: 14px; background: #fff; grid-template-columns: 100px minmax(0,1fr) 32px; gap: 22px; transition: border-color .18s, box-shadow .18s; }
.post:hover { border-color: #dba6bc; box-shadow: 0 6px 20px #a6597810; }
.post h3 { font-size: 22px; margin-bottom: 9px; font-weight: 600; }
.post p { color: #817784; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-meta { font-size: 12px; padding-top: 4px; color: #a58c99; }
.post-meta span { color: #a05b77; font-size: 12px; margin-top: 8px; }
.post-arrow { color: #c38ca5; border-radius: 50%; background: #fff2f7; font-size: 21px; width: 32px; height: 32px; line-height: 32px; }
.post-controls { margin-top: 14px; }
.post-controls .plain { font-size: 12px; }
.primary { background: var(--blue); color: white; border: 1px solid transparent; border-radius: 9px; box-shadow: 0 3px 8px #ad406c14; }
.primary:hover { background: #a13b60; }
.secondary { background: #f6eaf0; color: #8d516b; border: 1px solid #ecd4df; border-radius: 9px; }
.secondary:hover { background: #f2dce7; }
.danger { border-radius: 9px; }
#admin-bar { background: #fff0f6; border-color: #efd0dd; border-radius: 12px; }
#admin-bar span { color: #9a7385; }
input,textarea { border-color: #e5d8e0; border-radius: 8px; }
input:focus,textarea:focus { outline-color: #c6679050; border-color: #bd6c8c; }
button:focus-visible,a:focus-visible { outline-color: #bb6b8c; }
dialog { border-color: #efd3df; border-radius: 18px; box-shadow: 0 20px 90px #55364830; }
dialog::backdrop { background: #332a3e66; }
.empty { border: 1px dashed #e3bdce; border-radius: 14px; background: #fffcfd; }
footer { border-color: var(--line); padding-top: 30px; }
footer .brand { color: var(--navy); font-size: 21px; }
footer p { font-size: 13px; }
.footer-theme { display: block; color: #ad8a9a; font-size: 11px; margin-top: 5px; }
.reading-main { max-width: 930px; padding-bottom: 50px; }
.reader-nav { margin-bottom: 28px; padding: 25px 0; font-size: 13px; }
.reader-nav > a:first-child { color: #9a6982; }
.reading-mood { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border: 1px solid #f0dbe5; border-radius: 12px; background: #fff0f6; margin-bottom: 34px; }
.reading-mood > img { width: 64px; height: 60px; object-fit: contain; border: 0; border-radius: 0; margin: -12px 0 -8px; }
.reading-mood div > span { display: block; color: #a36984; font-size: 10px; letter-spacing: 2px; }
.reading-mood p { margin: 2px 0 0; font-size: 13px; color: #8e6c7b; }
.mood-star { font-size: 24px; color: var(--gold); margin-left: auto; }
.article-title { font-size: 38px; color: #322c3c; font-weight: 650; line-height: 1.5; }
.reading-main .article-meta { font-size: 12px; color: #a08393; padding-bottom: 26px; margin-bottom: 32px; }
.reading-main .article-body { color: #423b48; font-size: 17px; line-height: 2; }
.article-body h2 { border-bottom: 1px solid #f1e3ea; padding-bottom: 10px; }
.article-body h2,.article-body h3 { color: #443443; }
.article-body blockquote { background: #fff0f5; border-color: #d28ba7; color: #876074; border-radius: 0 9px 9px 0; }
.article-body pre { border-radius: 12px; border: 1px solid #403d52; background: #272535; }
.article-body :not(pre)>code { background: #f9eaf1; color: #ac4d76; }
.article-body pre code { color: #e6edf3; }
.article-body th { background: #fbecf2; }
.article-body img { border-radius: 12px; }
.article-body .katex { color: #423b48; }
.reader-end { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; color: #a1778d; font-size: 13px; }
.reader-end > span { font-size: 12px; color: #b08b9d; }
.comments { position: relative; margin-top: 48px; padding-top: 32px; }
.comments h2::before { content: '✦'; color: var(--gold); font-size: 19px; margin-right: 9px; }
.comments > .section-top .muted { font-size: 12px; }
.comment-mood { display:flex; align-items:center; gap:18px; padding:0 12px 0 2px; margin:0 0 12px; min-height:100px; }
.comment-mood > img { width:100px; height:100px; object-fit:contain; flex:0 0 auto; }
.comment-mood p { font-size:13px; color:#9a7087; margin:0; line-height:1.9; }
.comment { border: 1px solid #eedee6; border-radius: 12px; padding: 20px; background: #fff; margin: 12px 0; }
.comment-meta a { color: #a34a72; }
.comment-meta a::before { content: '✧'; color: #c19a5b; margin-right: 7px; }
.comment-meta time { font-size: 12px; color: #a28c9a; }
.comment-text { color: #655465; font-size: 15px; }
.comments textarea { background: #fff; border-color: #e7ccd9; }
.comment-empty { border-radius: 12px; background: #fff1f6; padding: 22px; font-size: 14px; color: #a67d91; }
.editor-main { max-width: 1320px; }
.editor-mood { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.editor-mood img { width: 58px; height: 64px; object-fit: contain; border-radius: 0; border: 0; margin: -6px 0; }
.editor-mood > span { font-size: 14px; color: #9d617d; }
.editor-mood b { display: block; font-size: 9px; letter-spacing: 2px; font-weight: 500; color: #bb8a9f; margin-top: 3px; }
.editor-main .editor { background: #fff; border: 1px solid #eddbe4; border-radius: 16px; padding: 28px; box-shadow: 0 10px 40px #8d5b7510; }
.editor-main .dialog-heading h2 { font-size: 25px; }
.editor-main .dialog-heading { border-color: #f0dfe7; padding-bottom: 22px; }
.editor-main .writing-toolbar { background: #fff; }
.writing-grid { border-color: #e8d7e0; border-radius: 12px; }
.source-pane textarea { background: #fffafd; }
.preview-pane { border-color: #e8d7e0; background: #fff; }
.preview-heading { color: #a57d93; }
.view-switch { background: #fbebf3; border: 1px solid #f0d7e3; border-radius: 9px; }
.view-switch button { border-radius: 6px; color: #a27f90; }
.view-switch button[aria-pressed=true] { background: #fff; color: #b04773; box-shadow: 0 2px 6px #99637b12; }
.editor-main #editor-form>.actions { background: #fff; border-color: #efdee7; margin-bottom: -12px; }
.import-notice { background: #fff2f7; border-color: #edc9da; color: #965675; }
#save-state { color: #9f7c91; }
#toast { background: #563748; box-shadow: 0 8px 30px #63445426; }
@media(max-width:1000px) {
  .taffy-intro { grid-template-columns: minmax(0,1fr) 340px; gap: 24px; }
}
@media(max-width:760px) {
  header { height: 80px; padding: 0 22px; }
  .brand { font-size: 20px; gap: 10px; }
  .brand-sub { display: none; }
  nav { gap: 18px; font-size: 13px; }
  nav .plain { font-size: 12px; }
  main { padding: 0 23px; }
  .taffy-intro { grid-template-columns: minmax(0,1fr); gap: 30px; padding: 36px 0 30px; }
  .intro h1 { font-size: 47px; margin: 17px 0 18px; line-height: 1.4; letter-spacing: 4px; }
  .intro-description { font-size: 14px; }
  .intro-note { font-size: 12px; margin-top: 13px; }
  .journal-shortcut { margin-top: 16px; font-size: 13px; }
  .journal { padding-top: 28px; }
  .section-top { gap: 16px; }
  .section-top h2 { font-size: 21px; }
  .search { width: 100%; }
  .post { grid-template-columns: minmax(0,1fr) 28px; padding: 20px; gap: 4px 10px; }
  .post-meta { grid-column: 1/-1; gap: 12px; padding-top: 0; }
  .post-meta span { margin-top: 0; }
  .post h3 { font-size: 20px; margin-top: 8px; }
  .post p { font-size: 14px; }
  .post-arrow { width: 28px; height: 28px; line-height: 28px; font-size: 18px; }
  .reading-mood { margin-bottom: 25px; padding: 12px 14px; gap: 10px; }
  .reading-mood p { font-size: 12px; }
  .article-title { font-size: 29px; }
  .reading-main .article-body { font-size: 16px; }
  .reader-nav { margin-bottom: 22px; }
  .comment-mood { gap: 10px; }
  .comment-mood p { font-size: 12px; }
  .comment { padding: 16px; }
  .comments .section-top { align-items: flex-start; }
  .editor-main { padding-top: 24px; }
  .editor-main .editor { padding: 20px 16px; border-radius: 14px; }
  .editor-main .dialog-heading h2 { font-size: 21px; }
  .editor-main .dialog-heading a { font-size: 12px; }
  .editor-main #editor-form>.actions { gap: 12px; }
  .editor-mood { margin-bottom: 20px; }
  .editor-mood b { font-size: 8px; letter-spacing: 1px; }
  footer { padding-top: 24px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .post { transition: none; }
}


@media(max-width:1000px){.taffy-hero-art > img{width:300px}.art-halo{width:250px;height:210px}.art-spark-one{right:12px}}
@media(max-width:760px){.taffy-intro{gap:8px}.taffy-hero-art{justify-self:center;width:100%;max-width:330px;margin-top:-12px}.taffy-hero-art>img{width:260px}.art-halo{width:230px;height:180px;top:77px}.art-spark-one{font-size:30px;right:18px;top:40px}.art-spark-two{left:20px;bottom:65px}.taffy-hero-art figcaption{font-size:11px}.comment-mood>img{width:85px;height:85px}.comment-mood{gap:10px;min-height:85px}}