/* Personal blog, Astro + Hono edition. Dark editorial magazine style. Original stylesheet. */
:root{
  --serif:Georgia,"MiSans","MiSans-Fallback","Songti SC","STSong","Noto Serif CJK SC",serif;
  --sans:"MiSans","MiSans-Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --code-bg:#211d18; --code-text:#ece5d3; --danger:#a63a4b;
  --shadow:none;
}
/* MiSans webfont (2026-11-06, approach 3: preload + swap + metric match).
   The font CSS is loaded from the Xiaomi font CDN (font-display: swap is
   set by that stylesheet) and preloaded in the layouts. "MiSans-Fallback"
   is a local-system fallback whose metrics are overridden to match MiSans
   (hhea ascent 1044 / descent 282 / lineGap 0 at 1000 upm, verified from
   the 400 + 700 woff2 files), so the swap from fallback to webfont does
   not shift the layout. Serif headings keep the --serif stack (国风）. */
@font-face{
  font-family:"MiSans-Fallback";
  src:local("PingFang SC"),local("Hiragino Sans GB"),local("Microsoft YaHei"),local("Noto Sans SC");
  font-weight:400;
  ascent-override:104.4%;
  descent-override:28.2%;
  line-gap-override:0%;
  size-adjust:100%;
}
@font-face{
  font-family:"MiSans-Fallback";
  src:local("PingFang SC"),local("Hiragino Sans GB"),local("Microsoft YaHei"),local("Noto Sans SC");
  font-weight:700;
  ascent-override:104.4%;
  descent-override:28.2%;
  line-gap-override:0%;
  size-adjust:100%;
}
/* paper themes (2026-11-06): each paper defines light values; the
   [data-theme="dark"] blocks define the matching dark variant. --accent is
   the theme's main color; the custom sliders override it with inline
   --accent/--accent-soft on <html>. --surface-rgb/--paper-rgb let translucent
   layers (masthead, home panels, ink overlay) follow the theme too. */
[data-paper="sujian"]{--bg:#f6f1e7;--surface:#fbf8f1;--text:#2a251c;--muted:#6f6656;--title:#16130e;--accent:#a97c2f;--accent-soft:#f3ead2;--border:#d8cfbc;--rule:#c9bda2;--surface-rgb:251,248,241;--paper-rgb:246,241,231}
[data-paper="xuanzhi"]{--bg:#fafaf7;--surface:#ffffff;--text:#262626;--muted:#6e6e6e;--title:#111111;--accent:#4a6b8a;--accent-soft:#e8edf2;--border:#dcdcd6;--rule:#c6c6bf;--surface-rgb:255,255,255;--paper-rgb:250,250,247}
[data-paper="qingci"]{--bg:#edf2ea;--surface:#f7faf5;--text:#22312a;--muted:#5c6e62;--title:#16211b;--accent:#2e7d5b;--accent-soft:#dcebe2;--border:#c6d4c9;--rule:#aec2b2;--surface-rgb:247,250,245;--paper-rgb:237,242,234}
[data-paper="dailan"]{--bg:#e9eef4;--surface:#f4f7fa;--text:#1f2a38;--muted:#5a6a7d;--title:#141d29;--accent:#3f6396;--accent-soft:#dfe7f1;--border:#c4d0de;--rule:#a9bccd;--surface-rgb:244,247,250;--paper-rgb:233,238,244}
[data-paper="qianse"]{--bg:#f7ecea;--surface:#fdf6f4;--text:#33241f;--muted:#7d5c55;--title:#241612;--accent:#b03a2e;--accent-soft:#f3dcd8;--border:#e2c9c2;--rule:#d0afa6;--surface-rgb:253,246,244;--paper-rgb:247,236,234}
[data-paper="ziteng"]{--bg:#f0ebf5;--surface:#f8f5fb;--text:#2a2333;--muted:#6a5f7d;--title:#1c1626;--accent:#7a5aa0;--accent-soft:#e8e0f2;--border:#d5cbe0;--rule:#bfaed2;--surface-rgb:248,245,251;--paper-rgb:240,235,245}
[data-theme="dark"][data-paper="sujian"]{--bg:#16130f;--surface:#1d1913;--text:#ece5d3;--muted:#a89a7d;--title:#f6efdd;--accent:#d9a441;--accent-soft:#2e2614;--border:#3a3226;--rule:#4a4030;--code-bg:#100d0a;--surface-rgb:29,25,19;--paper-rgb:22,19,15}
[data-theme="dark"][data-paper="xuanzhi"]{--bg:#171717;--surface:#1f1f1f;--text:#e8e8e8;--muted:#9a9a9a;--title:#f5f5f5;--accent:#8fb4d4;--accent-soft:#1e2833;--border:#333333;--rule:#444444;--code-bg:#100d0a;--surface-rgb:31,31,31;--paper-rgb:23,23,23}
[data-theme="dark"][data-paper="qingci"]{--bg:#101a14;--surface:#16211a;--text:#dfe9e0;--muted:#93a89a;--title:#eef5ef;--accent:#5cb892;--accent-soft:#16281f;--border:#2c3d33;--rule:#3d5245;--code-bg:#100d0a;--surface-rgb:22,33,26;--paper-rgb:16,26,20}
[data-theme="dark"][data-paper="dailan"]{--bg:#10151d;--surface:#161d28;--text:#dbe4ef;--muted:#8b9bb0;--title:#eef3f9;--accent:#7ea6d4;--accent-soft:#1a2436;--border:#2b3648;--rule:#3a4a61;--code-bg:#100d0a;--surface-rgb:22,29,40;--paper-rgb:16,21,29}
[data-theme="dark"][data-paper="qianse"]{--bg:#1a1210;--surface:#221715;--text:#f0ddd8;--muted:#a98d85;--title:#f9efec;--accent:#d4695c;--accent-soft:#2e1a16;--border:#3d2a25;--rule:#523a33;--code-bg:#100d0a;--surface-rgb:34,23,21;--paper-rgb:26,18,16}
[data-theme="dark"][data-paper="ziteng"]{--bg:#15121d;--surface:#1c1826;--text:#e3ddf0;--muted:#9a8fb0;--title:#f0eaf8;--accent:#a98fd0;--accent-soft:#241d36;--border:#322a44;--rule:#443a5c;--code-bg:#100d0a;--surface-rgb:28,24,38;--paper-rgb:21,18,29}
*{box-sizing:border-box}
/* [hidden] must always win: a display rule (flex/grid) on an element
   otherwise overrides the hidden attribute. This bug class has recurred
   on .appearance-overlay, .index-row and now .ink-list-head, so keep one
   global rule instead of adding a scoped one per element. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.75 var(--sans)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button{font:inherit;min-height:40px;border:1px solid var(--border);border-radius:0;background:var(--surface);color:var(--text);padding:0 16px;cursor:pointer}
button:hover{border-color:var(--accent)}
button:active{transform:translateY(1px)}
button.primary,form button[type="submit"]{background:var(--accent);border-color:var(--accent);color:#fff}
button.danger{color:var(--danger);border-color:var(--danger)}
input,textarea,select{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:0;padding:10px 12px;width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
label{font-weight:600;display:block;margin:0 0 4px}
label .req{color:var(--danger)}
::selection{background:var(--accent);color:#fff}

/* masthead: compact sticky 国风 bar — frosted rice-paper, double ink rule */
:root{--masthead-h:64px}
.masthead{position:sticky;top:0;z-index:50;background:rgba(var(--surface-rgb),.86);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);border-bottom:3px double var(--rule)}
.masthead-inner{max-width:880px;margin:0 auto;padding:0 20px;min-height:var(--masthead-h);display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand-seal{width:34px;height:34px;background:var(--accent);color:#fdf6e9;font-family:var(--serif);font-size:19px;font-weight:700;display:flex;align-items:center;justify-content:center;transform:rotate(-3deg);border-radius:2px;box-shadow:0 2px 6px rgba(0,0,0,.28);flex:0 0 auto}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-word{font-family:var(--serif);font-size:1.45rem;font-weight:700;color:var(--title);letter-spacing:.12em}
.brand:hover .brand-word{color:var(--accent)}
.brand-sub{font-size:11px;letter-spacing:.26em;color:var(--muted)}
.masthead-nav{margin-left:auto;display:flex;gap:2px;align-items:center;min-width:0}
.masthead-nav a{position:relative;display:inline-flex;align-items:center;gap:6px;line-height:1;color:var(--text);font-family:var(--serif);font-size:15px;letter-spacing:.14em;padding:10px 12px;white-space:nowrap}
.masthead-nav a svg{width:16px;height:16px;flex:none}
.masthead-nav a:hover{color:var(--accent);text-decoration:none}
.masthead-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent) 14%,var(--accent) 86%,transparent);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.masthead-nav a:hover::after,.masthead-nav a.active::after{transform:scaleX(1)}
.masthead-nav a.active{color:var(--accent);font-weight:700}
#search-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;border:0;border-radius:0;padding:0;background:transparent;margin-left:6px;flex:0 0 auto}
#search-btn:hover{color:var(--accent)}
#search-btn svg{width:18px;height:18px;flex:none}
/* nav toggle: mobile only, hamburger after the search icon */
#nav-toggle{display:none}
#nav-toggle .icon-close{display:none}
.masthead.nav-open #nav-toggle .icon-menu{display:none}
.masthead.nav-open #nav-toggle .icon-close{display:block}
/* theme button: dark round button with a pale half-moon, per the reference */
#appearance-btn{background:var(--title);color:var(--bg);border:1px solid var(--title)}
#appearance-btn:hover{border-color:var(--accent);color:var(--accent)}
/* layout */
main{max-width:880px;margin:0 auto;padding:40px 20px 72px}
footer{border-top:1px solid var(--rule)}
.footer-inner{max-width:880px;margin:0 auto;padding:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.footer-copy{white-space:nowrap}
.kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.page-title{font-family:var(--serif);font-size:2rem;color:var(--title);margin:0 0 8px;line-height:1.3}
.section-label{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--rule);padding-bottom:10px;margin:40px 0 0}
.empty{border:1px dashed var(--border);padding:28px;text-align:center;color:var(--muted)}
.flash{padding:10px 14px;margin:12px 0;border:1px solid var(--border)}
.flash-success{background:var(--accent-soft);color:var(--title)}
.flash-error{background:#f3dfe2;color:#7c2230}
[data-theme="dark"] .flash-error{background:#2e1a1d;color:#f0a8b2}

/* home: featured + index list */
.feature{border-bottom:3px double var(--rule);padding:8px 0 32px;margin-bottom:8px}
.feature .kicker{margin-bottom:14px}
.feature-title{font-family:var(--serif);font-size:2.6rem;line-height:1.25;color:var(--title);margin:0 0 16px;font-weight:700}
.feature-title a{color:var(--title)}
.feature-title a:hover{color:var(--accent);text-decoration:none}
.feature-excerpt{font-family:var(--serif);font-size:1.15rem;line-height:1.9;color:var(--text);margin:0 0 16px;max-width:640px}
.feature-meta{margin:0;font-size:13px;color:var(--muted);letter-spacing:.06em}
.index-list{list-style:none;margin:0;padding:0;counter-reset:idx}
.index-row{display:flex;align-items:baseline;gap:16px;padding:16px 4px;border-bottom:1px solid var(--border)}
.index-row:hover{background:var(--surface)}
.index-num{font-family:var(--serif);color:var(--muted);font-size:13px;flex:0 0 28px}
.index-date{flex:0 0 92px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.index-row h2{margin:0;font-family:var(--serif);font-size:1.2rem;line-height:1.4;flex:1}
.index-row h2 a{color:var(--title)}
.index-row h2 a:hover{color:var(--accent);text-decoration:none}
.index-type{flex:0 0 auto;font-size:12px;letter-spacing:.12em;color:var(--accent);text-transform:uppercase}
.index-comments{flex:0 0 auto;font-size:13px;color:var(--muted)}
.index-excerpt{margin:4px 0 0;color:var(--muted);font-size:14px}
/* archive */
/* archive: year groups, current year open by default, others collapsed */
.archive-year{margin:24px 0 0}
details.archive-year[hidden]{display:none}
.archive-year summary{cursor:pointer;display:flex;align-items:baseline;gap:12px;border-bottom:3px double var(--rule);padding-bottom:8px;list-style:none}
.archive-year summary::-webkit-details-marker{display:none}
.archive-year-title{font-family:var(--serif);font-size:1.4rem;color:var(--title)}
.archive-count{color:var(--muted);font-size:13px;letter-spacing:.14em}
.archive-toggle{margin-left:auto;color:var(--accent);transition:transform .2s ease}
details.archive-year[open] .archive-toggle{transform:rotate(90deg)}
/* article */
.post-head{margin-bottom:28px;border-bottom:1px solid var(--rule);padding-bottom:24px}
.post-head h1{font-family:var(--serif);font-size:2.4rem;color:var(--title);line-height:1.3;margin:12px 0 16px}
.post-meta-line{margin:0;font-size:13px;color:var(--muted);letter-spacing:.08em}
.post-standfirst{font-family:var(--serif);font-size:1.2rem;line-height:1.9;color:var(--text);border-left:3px solid var(--accent);padding:4px 0 4px 18px;margin:0 0 28px}
.content{font-family:var(--serif);font-size:1.08rem;line-height:2}
.content > p:first-of-type::first-letter{font-size:3.2em;float:left;line-height:.85;padding:6px 10px 0 0;color:var(--accent);font-weight:700}
.content h1{font-size:1.6rem;color:var(--title)}
.content h2{font-size:1.35rem;color:var(--title);margin-top:36px}
.content h3{font-size:1.15rem;color:var(--title)}
.content ul,.content ol{padding-left:24px}
.content li::marker{color:var(--accent)}
.content blockquote{border-left:3px solid var(--accent);margin:20px 0;padding:4px 0 4px 18px;color:var(--muted);font-style:italic}
.content hr{border:none;border-top:1px solid var(--rule);margin:36px 0}
.content table{border-collapse:collapse;display:block;overflow-x:auto}
.content th,.content td{border:1px solid var(--border);padding:8px 12px;text-align:left;font-family:var(--sans);font-size:15px}
.content th{background:var(--accent-soft)}
.content img{max-width:100%;display:block;margin:20px auto}
.content code{background:var(--accent-soft);padding:1px 6px;font-size:.9em;font-family:var(--sans)}
.content pre{background:var(--code-bg);padding:16px;overflow-x:auto;line-height:1.6}
.content pre code{background:none;color:var(--code-text);padding:0}
.post-nav{display:flex;justify-content:space-between;gap:16px;margin:36px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0;flex-wrap:wrap}
.post-nav a{font-family:var(--serif);font-size:1.05rem;color:var(--title)}
.post-nav a:hover{color:var(--accent);text-decoration:none}
.comments-title{font-family:var(--serif);font-size:1.4rem;color:var(--title);border-bottom:1px solid var(--rule);padding-bottom:10px}
.comment{display:flex;gap:12px;padding:14px 0}
.comment p{margin:4px 0}
.comment-meta{font-size:13px;color:var(--muted)}
/* comment avatars: rounded-rectangle initial chip; a replier's is one size smaller */
.comment-avatar{flex:0 0 auto;width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:18px;font-weight:700;line-height:1;position:relative;overflow:hidden}
.comment-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.comment-body{flex:1;min-width:0}
.comment-reply .comment-avatar{width:32px;height:32px;border-radius:6px;font-size:15px}
/* comment threads: dashed line between threads only; replies nest inside their thread */
.comment-thread + .comment-thread{border-top:1px dashed var(--border)}
.comment-reply{margin-left:28px;padding-left:14px;border-left:2px solid var(--accent-soft)}
.reply-btn{background:none;border:0;min-height:0;padding:0 4px;color:var(--accent);font-size:13px;cursor:pointer}
.reply-btn:hover{color:var(--title)}
.replying-to{font-size:13px;color:var(--muted);margin:0 0 8px}
.replying-to button{background:none;border:0;min-height:0;padding:0 4px;color:var(--accent);font-size:13px;cursor:pointer}
/* fab + appearance */
.fab-stack{position:fixed;right:20px;bottom:24px;display:flex;flex-direction:column;gap:10px;z-index:30}
.fab-stack button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;padding:0;background:var(--surface);box-shadow:0 2px 10px rgba(0,0,0,.25)}
.fab-stack button svg{width:20px;height:20px;flex:none}
#back-to-top{display:none}
#back-to-top.show{display:block}
#comment-btn{display:none}
#comment-btn.show{display:block}
.appearance-overlay{position:fixed;inset:0;background:rgba(10,8,5,.55);display:flex;align-items:flex-end;justify-content:flex-end;z-index:60}
.appearance-overlay[hidden]{display:none}
.appearance-panel{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:22px;margin:0 0 88px;max-width:360px;width:calc(100vw - 32px)}
.appearance-head{display:flex;justify-content:space-between;align-items:center}
.appearance-head h2{margin:0;font-family:var(--serif);font-size:1.2rem;color:var(--title)}
.appearance-head button{min-height:32px;padding:0 10px}
.appearance-label{font-weight:600;margin:18px 0 8px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* mode: three icon buttons in a row (half-moon = auto, sun = light, moon = dark) */
.mode-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mode-options button{display:flex;align-items:center;justify-content:center;min-height:44px;line-height:1;background:var(--accent-soft);border:1px solid var(--border);border-radius:10px;padding:0}
.mode-options button svg{width:20px;height:20px;flex:none}
.mode-options button[aria-pressed="true"]{border-color:var(--accent);color:var(--title);box-shadow:inset 0 0 0 1px var(--accent)}
/* paper themes: 2-col cards, two-tone swatch + name, check on the selected one */
.paper-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.paper-card{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:10px}
.paper-card:hover{border-color:var(--accent)}
.paper-card[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.paper-swatch{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.18)}
.paper-swatch[data-paper-swatch="sujian"]{background:linear-gradient(135deg,#a97c2f 50%,#f6f1e7 50%)}
.paper-swatch[data-paper-swatch="xuanzhi"]{background:linear-gradient(135deg,#4a6b8a 50%,#fafaf7 50%)}
.paper-swatch[data-paper-swatch="qingci"]{background:linear-gradient(135deg,#2e7d5b 50%,#edf2ea 50%)}
.paper-swatch[data-paper-swatch="dailan"]{background:linear-gradient(135deg,#3f6396 50%,#e9eef4 50%)}
.paper-swatch[data-paper-swatch="qianse"]{background:linear-gradient(135deg,#b03a2e 50%,#f7ecea 50%)}
.paper-swatch[data-paper-swatch="ziteng"]{background:linear-gradient(135deg,#7a5aa0 50%,#f0ebf5 50%)}
.paper-name{flex:1;font-family:var(--serif);font-size:15px;color:var(--title)}
.paper-check{display:none;color:var(--accent);font-weight:700}
.paper-card[aria-pressed="true"] .paper-check{display:inline}
/* custom sliders: hue (rainbow), lightness (dark->light), saturation (gray->accent) */
.custom-divider{border-top:1px solid var(--border);margin:20px 0 0}
.custom-slider{margin:14px 0 0}
.custom-row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--text);margin-bottom:6px}
.custom-val{color:var(--muted);font-variant-numeric:tabular-nums}
.custom-slider input[type="range"]{width:100%;height:22px;min-height:0;padding:0;border:0;background:transparent;-webkit-appearance:none;appearance:none}
.custom-slider input[type="range"]::-webkit-slider-runnable-track{height:8px;border-radius:4px}
.custom-slider input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-6px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer}
.custom-slider input[type="range"]::-moz-range-track{height:8px;border-radius:4px}
.custom-slider input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer}
#custom-hue::-webkit-slider-runnable-track{background:linear-gradient(90deg,#d43d2a,#d4a017,#4caf50,#2196f3,#7a5aa0,#d43d2a)}
#custom-hue::-moz-range-track{background:linear-gradient(90deg,#d43d2a,#d4a017,#4caf50,#2196f3,#7a5aa0,#d43d2a)}
#custom-light::-webkit-slider-runnable-track{background:linear-gradient(90deg,#3a2f26,#8a7a5f,#e8ddc4,#faf6ea)}
#custom-light::-moz-range-track{background:linear-gradient(90deg,#3a2f26,#8a7a5f,#e8ddc4,#faf6ea)}
#custom-sat::-webkit-slider-runnable-track{background:linear-gradient(90deg,#b8b0a2,var(--accent))}
#custom-sat::-moz-range-track{background:linear-gradient(90deg,#b8b0a2,var(--accent))}

/* admin: vertical sidebar, no frontend topbar */
/* Admin: dark theme (restored 2026-11-07 at Casper's request — the light
   theme hid selected text, see the ::selection note below; dark is the
   look he prefers). Hardcoded warm-dark palette. */
.admin-body{margin:0;background:#14110d;color:#ece5d3;font:15px/1.7 var(--sans)}
.admin-shell{display:flex;min-height:100vh}
.admin-sidebar{flex:0 0 236px;background:#100d0a;border-right:1px solid #2e2718;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.admin-brand{display:block;padding:26px 22px 20px;color:#f6efdd;font-family:var(--serif);font-size:1.35rem;font-weight:700;line-height:1.3;border-bottom:1px solid #2e2718}
.admin-brand:hover{text-decoration:none;color:#d9a441}
.admin-brand small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#a89a7d;margin-top:4px}
.admin-nav{padding:14px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.admin-nav-link{display:flex;align-items:center;gap:12px;padding:11px 12px;color:#cfc5ab;font-size:15px;border-left:3px solid transparent}
.admin-nav-link:hover{color:#f6efdd;text-decoration:none;background:#1d1913}
.admin-nav-link.active{color:#f6efdd;background:#1d1913;border-left-color:#d9a441;font-weight:700}
.admin-nav-link svg{flex:0 0 20px;width:20px;height:20px}
/* admin nav groups: collapsible, overview stays standalone above them */
.admin-nav-group{display:flex;flex-direction:column;gap:2px}
.admin-nav-group-title{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;padding:12px 12px 6px;color:#a89a7d;font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-align:left}
.admin-nav-group-title:hover{color:#f6efdd}
.admin-nav-arrow{display:inline-block;transition:transform .15s ease;font-size:11px;letter-spacing:0}
.admin-nav-group:not(.collapsed) .admin-nav-arrow{transform:rotate(90deg)}
.admin-nav-group-items{display:flex;flex-direction:column;gap:2px}
.admin-nav-group.collapsed .admin-nav-group-items{display:none}
.admin-side-foot{padding:14px 12px;border-top:1px solid #2e2718;display:flex;flex-direction:column;gap:2px}
.admin-side-foot .admin-nav-link{width:100%;background:none;border-left:3px solid transparent;text-align:left;cursor:pointer;font:inherit;color:#cfc5ab;padding:11px 12px}
.admin-side-foot .admin-nav-link:hover{color:#f6efdd;background:#1d1913}
/* Text selection in the admin (2026-11-07 root cause): the global
   ::selection uses var(--accent), which is undefined in the admin (the
   admin <html> carries no data-paper), so its background fell back to the
   browser default light blue while color:#fff still applied — white text
   on light blue, unreadable when selected. Explicit colors here so
   selected text stays readable on the dark fields. */
.admin-body ::selection{background:#d9a441;color:#16130e}
.admin-body input::selection,.admin-body textarea::selection{background:#d9a441;color:#16130e}
/* Focus outline in the admin: same undefined-var reason as ::selection. */
.admin-body a:focus-visible,.admin-body button:focus-visible,.admin-body input:focus-visible,.admin-body textarea:focus-visible,.admin-body select:focus-visible{outline:2px solid #d9a441;outline-offset:2px}
.admin-main{flex:1;min-width:0;padding:32px 36px 64px;max-width:960px}
.admin-main h1{font-family:var(--serif);font-size:1.8rem;color:#f6efdd;margin:0 0 6px}
.admin-sub{color:#a89a7d;margin:0 0 24px;font-size:14px}
.admin-main .card{background:#1d1913;border:1px solid #3a3226;padding:20px 22px;margin:16px 0}
.admin-main .card h2{font-family:var(--serif);font-size:1.2rem;color:#f6efdd;margin:0 0 12px}
.admin-main label{color:#cfc5ab}
.admin-main input,.admin-main textarea,.admin-main select{background:#14110d;border-color:#3a3226;color:#ece5d3}
.admin-main input:focus,.admin-main textarea:focus,.admin-main select:focus{border-color:#d9a441;box-shadow:0 0 0 3px #2e2614}
/* Text caret in the admin: bright green so it stands out on the dark fields */
.admin-main input,.admin-main textarea,.admin-auth-card input,.media-modal input{caret-color:#4ade80}
.admin-main button{background:#1d1913;border-color:#3a3226;color:#ece5d3}
.admin-main button.primary, .admin-main form button[type="submit"]{background:#b4552d;border-color:#b4552d;color:#fff}
.admin-main button.danger{color:#e07a86;border-color:#a63a4b}
.admin-main a{color:#d9a441}
.admin-main .row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #2e2718;flex-wrap:wrap}
.admin-main .row:last-child{border-bottom:none}
.admin-main .actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-main .actions button{min-height:34px;padding:0 12px;font-size:14px}
.admin-main .empty{border-color:#3a3226;color:#a89a7d}
.admin-main .flash{border:1px solid #3a3226}
.admin-main .flash-success{background:#22301c;color:#a8d08a}
.admin-main .flash-error{background:#2e1a1d;color:#f0a8b2}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.stat-card{background:#1d1913;border:1px solid #3a3226;padding:18px}
.stat-card .stat-num{font-family:var(--serif);font-size:2rem;color:#f6efdd;line-height:1.1}
.stat-card .stat-label{color:#a89a7d;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
.stat-card .stat-sub{color:#a89a7d;font-size:12px;margin-top:6px}
.admin-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.admin-toolbar input,.admin-toolbar select{width:auto;flex:1;min-width:160px}
.tag{padding:1px 8px;font-size:12px}
.tag-green{background:#22301c;color:#a8d08a}
.tag-yellow{background:#3a2f10;color:#fde68a}
.tag-red{background:#3a1414;color:#fca5a5}
.tag-gray{background:#2c3642;color:#cbd5e1}
/* write form: large editor + markdown toolbar + slug hint.
   (The old .admin-page rules never matched anything — the form has no such class.) */
.write-form .field{margin:0 0 18px}
.write-form input[name="title"]{font-size:1.3rem;font-weight:700;font-family:var(--serif)}
.write-form textarea[name="body"]{min-height:640px;min-height:70vh;line-height:1.9;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;resize:vertical}
.slug-hint{display:block;margin-top:6px;font-size:13px;color:#a89a7d}
.md-toolbar{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px}
.md-toolbar button{min-height:32px;padding:0 10px;font-size:13px;border-color:#3a3226;background:#14110d;color:#cfc5ab}
.md-toolbar button:hover{border-color:#d9a441;color:#f6efdd}
.md-toolbar button b{font-weight:700}
/* write page: two-column editor layout (2026-11-07, Casper's reference
   screenshot) — main column (title/body/summary/AI cover) + sticky right
   sidebar (status/slug/date/type/save). Dark admin palette, hardcoded. */
.admin-main.write-wide{max-width:1180px}
.write-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.write-main{min-width:0}
.write-main .card{margin:0 0 20px}
.write-side{position:sticky;top:20px}
.write-side .field{margin:0 0 16px}
.write-side button[type="submit"]{width:100%}
.body-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 8px}
.body-head label{margin:0}
.body-tabs{display:flex;gap:4px}
.body-tabs button{min-height:32px;padding:0 14px;font-size:13px}
.body-tabs button.active{background:#d9a441;border-color:#d9a441;color:#16130e;font-weight:700}
.body-preview{min-height:640px;min-height:70vh;border:1px solid #3a3226;background:#14110d;padding:20px 22px;line-height:1.9}
.body-preview p{margin:0 0 1.1em}
.body-preview li{margin:5px 0}
.body-preview a{color:#d9a441}
.body-preview h1{font-size:1.6rem;font-family:var(--serif);margin:24px 0 12px}
.body-preview h2{font-size:1.35rem;font-family:var(--serif);border-left:3px solid #d9a441;padding-left:12px;margin:24px 0 12px}
.body-preview h3{font-size:1.15rem;font-family:var(--serif);margin:20px 0 10px}
.body-preview blockquote{background:#2e2614;padding:12px 18px;margin:20px 0}
.body-preview code{background:#2e2614;padding:1px 6px;font-size:13px}
.body-preview pre{background:#100d0a;border:1px solid #3a3226;padding:14px;overflow-x:auto}
.body-preview pre code{background:none;padding:0}
.body-preview img{max-width:100%;height:auto}
.body-preview hr{margin:20px 0;border:none;border-top:1px solid #3a3226}
.body-preview table{border-collapse:collapse;margin:16px 0}
.body-preview th,.body-preview td{border:1px solid #3a3226;padding:6px 10px}
@media (max-width:900px){
  .write-layout{grid-template-columns:1fr}
  .write-side{position:static}
}
/* admin auth (login / setup): centred card, no sidebar */
.admin-auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:#14110d}
.admin-auth-card{width:100%;max-width:420px;background:#1d1913;border:1px solid #3a3226;padding:32px 30px}
.admin-auth-card h1{font-family:var(--serif);font-size:1.6rem;color:#f6efdd;margin:0 0 4px;text-align:center}
.admin-auth-card .admin-sub{text-align:center}
.admin-auth-card label{color:#cfc5ab}
.admin-auth-card input{background:#14110d;border-color:#3a3226;color:#ece5d3}
.admin-auth-card input:focus{border-color:#d9a441;box-shadow:0 0 0 3px #2e2614}
.admin-auth-card button{width:100%}
.admin-auth-card .flash{border:1px solid #3a3226}
.admin-auth-card .flash-success{background:#22301c;color:#a8d08a}
.admin-auth-card .flash-error{background:#2e1a1d;color:#f0a8b2}
.captcha-row{display:flex;gap:10px;align-items:stretch}
.captcha-row input{flex:1}
.captcha-box{flex:0 0 120px;height:44px;border:1px solid #3a3226;cursor:pointer;background:#f4efe4}
.captcha-box svg{display:block;width:120px;height:44px}
.captcha-hint{font-size:12px;color:#a89a7d;margin:4px 0 0}
body.admin-locked .admin-sidebar{display:none}
body.admin-locked .admin-main{max-width:480px;margin:0 auto;padding:48px 20px}
@media (max-width:900px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .admin-sidebar{flex-basis:200px}
  .admin-main{padding:24px 20px 56px}
}
@media (max-width:640px){
  .feature-title{font-size:1.9rem}
  .post-head h1{font-size:1.8rem}
  .index-date{display:none}
  .admin-shell{flex-direction:column}
  .admin-sidebar{flex-basis:auto;position:static;height:auto;border-right:none;border-bottom:1px solid #2e2718}
  .admin-nav{flex-direction:row;flex-wrap:wrap}
  .admin-nav-group{display:contents}
  .admin-nav-group-title{display:none}
  .admin-nav-group-items{display:contents}
  .admin-nav-group.collapsed .admin-nav-group-items{display:contents}
  .admin-nav-link{border-left:none;border-bottom:2px solid transparent}
  .admin-nav-link.active{border-bottom-color:#d9a441}
  .admin-side-foot{flex-direction:row;flex-wrap:wrap}
  .appearance-panel{margin-bottom:88px;padding:16px}
}

/* ---- deep polish, 2026-11-05: same dark editorial direction, finer details ---- */
/* frontend: transitions + list hover */
button{transition:border-color .15s ease,background .15s ease,color .15s ease,transform .1s ease}
a{transition:color .15s ease}
.index-row{transition:background .15s ease,padding .15s ease}
.index-row:hover{padding-left:10px}
.index-row:hover .index-num{color:var(--accent)}
.index-row:hover h2 a{color:var(--accent)}
.masthead-nav a{transition:color .15s ease,box-shadow .15s ease}
.brand-word{transition:color .15s ease}
/* frontend: article typography */
.content p{margin:0 0 1.1em}
.content li{margin:5px 0}
.content h1{margin:36px 0 14px}
.content h2{border-left:3px solid var(--accent);padding-left:12px;margin:36px 0 14px}
.content h3{letter-spacing:.04em;margin:28px 0 10px}
.content blockquote{background:var(--accent-soft);padding:12px 18px;margin:24px 0}
.content table{margin:20px 0}
.content tbody tr:nth-child(even){background:var(--accent-soft)}
.content img{border:1px solid var(--border);padding:6px;background:var(--surface)}
.content pre{border:1px solid var(--border);margin:20px 0}
.content hr{margin:40px 0}
/* frontend: footer + appearance popup depth */
.footer-inner{padding:24px 20px}
.footer-inner a{letter-spacing:.08em}
.footer-links{display:flex;gap:18px;margin-left:auto}
.appearance-panel{box-shadow:0 14px 44px rgba(0,0,0,.35)}
/* archive: type filter tabs */
.filter-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 8px}
.filter-tabs button{min-height:36px;padding:0 14px;font-size:14px;letter-spacing:.06em}
.filter-tabs button .count{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:4px}
.filter-tabs button.active{border-color:var(--accent);background:var(--accent-soft);color:var(--title);font-weight:700}
.filter-tabs button.active .count{color:var(--accent)}
.index-row[hidden]{display:none}
.ink-entry[hidden]{display:none}
/* admin polish */
.admin-main .row{transition:background .15s ease}
.admin-main .row:hover{background:#1a160f}
.stat-card{transition:border-color .15s ease,transform .15s ease}
.stat-card:hover{border-color:#d9a441;transform:translateY(-2px)}
.admin-nav-link svg{opacity:.85}
.admin-nav-link.active svg{opacity:1}
.admin-main .flash{border-left:3px solid #3a3226}
.admin-main .flash-success{border-left-color:#5b8a3c}
.admin-main .flash-error{border-left-color:#a63a4b}
.admin-main .empty{padding:32px}
.admin-auth-card{border-top:3px solid #d9a441}
.tag{letter-spacing:.06em}
.admin-main input,.admin-main select{transition:border-color .15s ease,box-shadow .15s ease}
@media (max-width:640px){
  .index-row{flex-wrap:wrap;gap:6px 12px;padding:14px 4px}
  .index-row h2{flex:1 1 100%;order:3}
  .index-comments{display:none}
  .feature-excerpt{font-size:1.05rem}
}

/* ---- comments: three fields in one row + emoji picker, 2026-11-06 ---- */
.comment-row{display:flex;gap:12px}
.comment-row p{flex:1;min-width:0;margin:0}
.comment-actions{position:relative;display:flex;align-items:center;gap:10px;margin-top:12px}
.comment-actions button[type="submit"]{flex:1}
#emoji-btn{flex:0 0 auto;width:44px;min-height:44px;padding:0;font-size:22px;line-height:1;background:var(--surface);border:1px solid var(--border);border-radius:8px;cursor:pointer}
#emoji-btn:hover{border-color:var(--accent)}
.emoji-panel{position:absolute;left:0;bottom:calc(100% + 8px);z-index:30;width:min(320px,calc(100vw - 48px));background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.25);padding:10px}
.emoji-panel[hidden]{display:none}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.emoji-grid button{min-height:40px;padding:0;font-size:22px;line-height:1;background:transparent;border:0;border-radius:8px;cursor:pointer}
.emoji-grid button:hover{background:var(--accent-soft)}
.comment p{overflow-wrap:break-word}
.comment a{overflow-wrap:anywhere}
.content a{overflow-wrap:break-word}
.notify-card h2{border-bottom:1px solid #3a3226;padding-bottom:10px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.switch-row{display:flex !important;align-items:center;gap:8px;font-weight:600}
.test-result{font-size:13px;margin-left:8px}
/* Rebuild progress bar (admin quick entry + posts page). Hardcoded dark
   admin colors — the theme vars are undefined in the admin (no data-paper),
   so var(--border)/var(--accent) left this bar invisible. */
.rebuild-progress{margin:10px 0 2px}
.rebuild-bar{height:8px;background:#3a3226;border-radius:4px;overflow:hidden}
.rebuild-bar-fill{height:100%;width:0%;background:#d9a441;border-radius:4px;transition:width 1s linear}
.rebuild-meta{display:flex;justify-content:space-between;font-size:13px;color:#a89a7d;margin-top:4px}

/* ---- mobile pass, frontend first, 2026-11-05 ---- */
html,body{overflow-x:clip}
img,video{max-width:100%;height:auto}
@media (max-width:900px){
  main{padding:32px 18px 64px}
  .masthead-inner{padding:0 18px}
  .feature-title{font-size:2.1rem}
  .post-head h1{font-size:2rem}
}
@media (max-width:640px){
  body{font-size:15px}
  main{padding:28px 16px 56px}
  /* masthead: one row — brand, search, hamburger; nav folds down when opened */
  :root{--masthead-h:56px}
  .masthead-inner{flex-wrap:wrap;gap:0 10px;padding:6px 16px;min-height:0}
  .brand{flex:1;min-width:0;order:1}
  .brand-seal{width:32px;height:32px;font-size:18px}
  .brand-word{font-size:1.25rem}
  .brand-sub{display:none}
  #search-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;padding:0;background:transparent;order:2}
  #nav-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;border:0;border-radius:0;padding:0;background:transparent;order:3;flex:0 0 auto}
  #nav-toggle:hover{color:var(--accent)}
  #nav-toggle svg{width:20px;height:20px;flex:none}
  .masthead-nav{display:none;flex:1 1 100%;order:4;flex-direction:column;align-items:stretch;margin-left:0;padding:4px 0 8px}
  .masthead.nav-open .masthead-nav{display:flex}
  .masthead-nav a{justify-content:flex-end;text-align:right;padding:12px 4px;font-size:15px;border-bottom:1px solid var(--border)}
  .masthead-nav a:last-child{border-bottom:0}
  .masthead-nav a::after{display:none}
  /* home: tighter index rows, title on its own line */
  .feature{padding:4px 0 24px}
  .feature-title{font-size:1.7rem;line-height:1.3}
  .feature-excerpt{font-size:1.05rem;line-height:1.8}
  .index-row{padding:14px 2px}
  .index-num{flex-basis:22px}
  .index-row h2{font-size:1.1rem}
  .index-excerpt{font-size:13px}
  /* home on mobile: no ink background, full-bleed list */
  .ink-bg{display:none}
  body.page-home main{padding:0 0 56px}
  .home-intro{margin:0;padding:14px 16px}
  .ink-list{padding:24px 16px 8px;box-shadow:none}
  .ink-entry{gap:14px;padding:18px 0}
  .ink-date{flex-basis:44px;padding-right:12px}
  /* pager on mobile: compact */
  .pager{gap:4px;padding:16px 0 20px}
  .pager a{min-width:32px;min-height:32px;padding:0 8px;font-size:13px}
  .pager-ellipsis{min-width:32px;min-height:32px}
  .filter-tabs button{min-height:44px;padding:0 16px}
  /* article: readable type, no overflow from code/tables/drop cap */
  .post-head{margin-bottom:20px;padding-bottom:18px}
  .post-head h1{font-size:1.7rem;line-height:1.35}
  .post-standfirst{font-size:1.05rem;line-height:1.8;margin-bottom:20px}
  .content{font-size:1rem;line-height:1.9}
  .content > p:first-of-type::first-letter{font-size:2.4em;padding:4px 8px 0 0}
  .content pre{padding:12px;font-size:13px}
  .content table{font-size:14px}
  .post-nav a{font-size:1rem}
  /* comments form: fields stack, big tap targets */
  .comment-row{flex-direction:column}
  .comment-reply{margin-left:16px;padding-left:10px}
  .comment-avatar{width:36px;height:36px;font-size:16px}
  .comment-reply .comment-avatar{width:28px;height:28px;border-radius:6px;font-size:13px}
  .comment-actions button[type="submit"]{min-height:48px}
  .comment-meta{line-height:1.7}
  /* appearance popup becomes a full-width bottom sheet */
  .appearance-overlay{align-items:flex-end;justify-content:center}
  .appearance-panel{width:100%;max-width:none;margin:0;border-radius:16px 16px 0 0;max-height:82vh;overflow-y:auto;padding:20px 20px calc(20px + env(safe-area-inset-bottom))}
  .mode-options button,.paper-card{min-height:44px}
  /* search modal on mobile: top sheet, roomy input */
  .search-overlay{padding:64px 12px 12px}
  .search-panel{max-height:80vh;padding:16px}
  /* fab: clear of the sheet, thumb-sized */
  .fab-stack{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
  .fab-stack button{width:48px;height:48px}
  /* footer: one row on mobile; the footer text stays desktop-only */
  .footer-inner{flex-direction:row;justify-content:space-between;align-items:center;gap:10px;flex-wrap:nowrap}
  #footer-text{display:none}
  button{min-height:44px}
  /* admin (secondary): toolbar fields full width, tighter main */
  .admin-main{padding:20px 16px 48px}
  .admin-toolbar input,.admin-toolbar select{flex:1 1 100%;min-width:0}
  .field-grid{grid-template-columns:1fr}
  .admin-main .actions button{min-height:40px}
}

/* ---- media library + storage settings, 2026-11-05 ---- */
.media-dropzone{border:1px dashed #3a3226;padding:28px;text-align:center;color:#a89a7d}
.media-dropzone.drag-over{border-color:#d9a441;background:#2e2614}
.upload-btn{display:inline-block;margin:12px 0 8px;padding:10px 18px;border:1px solid #3a3226;background:#14110d;color:#ece5d3;cursor:pointer}
.upload-btn:hover{border-color:#d9a441}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.media-item{border:1px solid #3a3226;background:#14110d;padding:10px;display:flex;flex-direction:column;gap:6px}
.media-item img{width:100%;height:110px;object-fit:cover;display:block;background:#2e2614}
.media-file-icon{height:110px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.6rem;color:#a89a7d;background:#2e2614;border:1px solid #3a3226}
.media-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-meta{font-size:12px;color:#a89a7d;line-height:1.5}
.media-actions{display:flex;gap:8px}
.media-actions button{flex:1;min-height:34px;padding:0 8px;font-size:13px}
.media-pick{cursor:pointer}
.media-pick:hover{border-color:#d9a441}
.media-modal-overlay{position:fixed;inset:0;background:rgba(10,8,5,.6);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.media-modal{background:#1d1913;border:1px solid #3a3226;max-width:720px;width:100%;max-height:82vh;overflow-y:auto;padding:22px}
.media-modal h2{margin:0;font-family:var(--serif);font-size:1.2rem;color:#f6efdd}
.media-modal input{background:#14110d;border-color:#3a3226;color:#ece5d3}
@media (max-width:640px){
  .media-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .media-modal{max-height:86vh;padding:16px}
}

/* ---- home: 国风 guofeng, 2026-11-06 (homepage only, .page-home) ---- */
body.page-home{--paper:var(--bg);--paper-deep:var(--accent-soft);--ink:var(--text);--ink-soft:var(--muted)}
body.page-home{background:var(--paper)}
body.page-home main{padding:0 20px 72px}
/* fixed fullscreen ink-wash background behind all home content */
.ink-bg{position:fixed;inset:0;z-index:-1;background:url(/ink-landscape.jpg) center 30%/cover no-repeat var(--bg);pointer-events:none}
.ink-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--paper-rgb),.12),rgba(var(--paper-rgb),0) 30%,rgba(var(--paper-rgb),0) 55%,rgba(var(--paper-rgb),.34))}
/* ---- home intro line above the list, 2026-11-06 (homepage only, .page-home) ---- */
.home-intro{margin:24px 0 16px;padding:12px 16px;text-align:center;font-size:13px;letter-spacing:.14em;color:var(--ink-soft);background:rgba(var(--surface-rgb),.92);border-bottom:3px double var(--rule)}
.ink-list{margin-top:0;background:rgba(var(--surface-rgb),.92);border-top:3px double var(--rule);padding:36px 28px 8px;box-shadow:0 -14px 44px rgba(43,38,32,.22)}
.ink-list-head{display:flex;align-items:baseline;gap:16px;border-bottom:3px double var(--rule);padding-bottom:12px}
.ink-list-head h2{font-family:var(--serif);font-size:1.9rem;color:var(--title);margin:0;letter-spacing:.12em}
.ink-list-head .count{color:var(--muted);font-size:13px;letter-spacing:.14em;white-space:nowrap}
.brush-rule{flex:1;height:2px;background:linear-gradient(90deg,transparent,var(--rule) 20%,var(--rule) 80%,transparent);position:relative}
.brush-rule::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;background:var(--accent);transform:translate(-50%,-50%) rotate(45deg)}
.ink-entries{list-style:none;margin:0;padding:0}
.ink-entry{display:flex;gap:20px;padding:22px 4px;border-bottom:1px solid var(--border)}
.ink-entry:hover{background:var(--surface)}
.ink-date{flex:0 0 56px;text-align:center;border-right:1px solid var(--border);padding-right:16px}
.ink-date b{display:block;font-family:var(--serif);font-size:1.7rem;line-height:1.1;color:var(--title)}
.ink-date span{font-size:12px;color:var(--muted);letter-spacing:.1em}
.ink-entry-main{flex:1;min-width:0}
.ink-entry-main h3{margin:0 0 6px;font-family:var(--serif);font-size:1.3rem;line-height:1.4}
.ink-entry-main h3 a{color:var(--title)}
.ink-entry-main h3 a:hover{color:var(--accent);text-decoration:none}
.ink-entry-main>p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.ink-meta{margin:8px 0 0;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.ink-meta .ink-type{color:var(--accent);letter-spacing:.14em}
/* pager: prev/next + page numbers under a paginated list */
.pager{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;padding:24px 0 28px}
.pager a{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;font-family:var(--serif);color:var(--text);border:1px solid var(--border);background:var(--surface)}
.pager a:hover{text-decoration:none;border-color:var(--accent);color:var(--accent)}
.pager a.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.pager a.disabled{opacity:.4;pointer-events:none}
.pager-numbers{display:contents}
.pager-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;color:var(--muted)}
/* admin pager: same windowed numbers, dark admin colors */
.admin-main .pager a{background:#1d1913;border-color:#3a3226;color:#ece5d3}
.admin-main .pager a:hover{border-color:#d9a441;color:#f6efdd;text-decoration:none}
.admin-main .pager a.active{background:#b4552d;border-color:#b4552d;color:#fff}
.admin-main .pager-ellipsis{color:#a89a7d}
/* 404 page: same guofeng language as the homepage */
.not-found{text-align:center;padding:48px 24px 56px}
.not-found-seal{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:10px;background:var(--accent);color:#fff;font-family:var(--serif);font-size:28px;font-weight:700;margin:0 0 8px}
.not-found-code{font-family:var(--serif);font-size:64px;font-weight:700;color:var(--text);margin:0;line-height:1.1}
.not-found h2{font-family:var(--serif);font-size:24px;margin:12px 0 8px}
.not-found-text{color:var(--muted);margin:0 0 24px;line-height:1.8}
.not-found-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0}
.not-found-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 20px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);text-decoration:none}
.not-found-actions a:hover{border-color:var(--accent);color:var(--accent)}
.not-found-actions a:first-child{background:var(--accent);border-color:var(--accent);color:#fff}
/* Commenter level badge (Renegade Immortal realms): a small seal with the
   full realm name; one colour per level, deepening with rank. lv-21 is the
   blogger's 踏天境, a gold gradient with dark text. Font is an explicit Song
   stack (SimSun on Windows, Songti SC on macOS) — system fonts, no download.
   Light gold backgrounds use dark text so the name stays readable. */
.comment-level{display:inline-flex;align-items:center;height:20px;padding:0 7px;margin-left:6px;border-radius:4px;background:#6b7d6e;color:#fff;font-size:12px;line-height:1;font-family:"SimSun","Songti SC","STSong","Noto Serif CJK SC",serif;font-weight:600;vertical-align:middle;white-space:nowrap}
.comment-level.lv-1{background:#6b7d6e}
.comment-level.lv-2{background:#6f9a76}
.comment-level.lv-3{background:#4e8a5f}
.comment-level.lv-4{background:#3d8a7a}
.comment-level.lv-5{background:#3a6a8a}
.comment-level.lv-6{background:#4a6b9e}
.comment-level.lv-7{background:#5b5fa8}
.comment-level.lv-8{background:#7a5aa8}
.comment-level.lv-9{background:#9e5a92}
.comment-level.lv-10{background:#a85a5a}
.comment-level.lv-11{background:#b07a3a}
.comment-level.lv-12{background:#c0922e;color:#3a2a00}
.comment-level.lv-13{background:#8a6d2e}
.comment-level.lv-14{background:#7a6a3a}
.comment-level.lv-15{background:#6b5a8a}
.comment-level.lv-16{background:#5a4a8a}
.comment-level.lv-17{background:#a67c00}
.comment-level.lv-18{background:#b8860b;color:#3a2a00}
.comment-level.lv-19{background:#cf9a1e;color:#3a2a00}
.comment-level.lv-20{background:#c0392b}
.comment-level.lv-21{background:linear-gradient(135deg,#f0c040,#c9920e);color:#3a2a00;border:1px solid #a67c00}
/* friends page (/friends): one rice-paper block per blog, latest 3 posts each */
.friend-circle{margin-top:36px;background:rgba(var(--surface-rgb),.92);border-top:3px double var(--rule);padding:36px 28px 8px;box-shadow:0 -14px 44px rgba(43,38,32,.22)}
.friend-circle[hidden]{display:none}
.friend-circle-loading{padding:20px 4px;color:var(--muted);margin:0}
.friend-groups[hidden]{display:none}
.friend-group{padding:22px 0 14px;border-bottom:3px double var(--rule)}
.friend-group:last-child{border-bottom:none}
.friend-group-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.friend-group-icon{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid var(--border);flex:0 0 auto;background:var(--surface)}
.friend-group-head h2{font-family:var(--serif);font-size:1.35rem;color:var(--title);margin:0;letter-spacing:.06em;min-width:0}
.friend-group-count{margin-left:auto;flex:0 0 auto;font-size:13px;color:var(--muted);white-space:nowrap}
.friend-group-list{list-style:none;margin:0;padding:0}
.friend-group-row{display:flex;align-items:baseline;gap:16px;padding:10px 4px;border-bottom:1px solid var(--border)}
.friend-group-row:last-child{border-bottom:none}
.friend-group-row h3{margin:0;font-family:var(--serif);font-size:1.1rem;line-height:1.4;flex:1;min-width:0}
.friend-group-row h3 a{color:var(--title)}
.friend-group-row h3 a:hover{color:var(--accent);text-decoration:none}
.friend-meta{flex:0 0 auto;font-size:13px;color:var(--muted);white-space:nowrap}
/* links page: card grid, same rice-paper language */
.link-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.link-grid[hidden]{display:none}
.link-intro{color:var(--muted);font-size:14px;letter-spacing:.1em;margin:0 0 18px}
.link-comments{margin-top:28px;padding-top:20px;border-top:3px double var(--rule)}
/* Link cards, guofeng style: rice-paper card, ink double-rule divider,
   seal-style avatar (accent ground, paper character). The avatar image sits
   over the seal fallback, so a broken image reveals the seal instead of a gap. */
.link-card{background:rgba(var(--surface-rgb),.92);border:1px solid var(--border);border-radius:6px;padding:16px 18px}
.link-card-top{display:flex;align-items:center;gap:12px}
.link-card-avatar{flex:0 0 auto;line-height:0}
.link-card-icon-wrap{position:relative;display:block;width:48px;height:48px;flex:0 0 auto}
.link-card-icon{width:48px;height:48px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}
.link-card-img{position:absolute;inset:0;background:var(--surface)}
.link-card-fallback{display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.3rem;font-weight:700;color:#fdf6e9;background:var(--accent);transform:rotate(-2deg)}
.link-card-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.link-card-text strong{font-family:var(--serif);font-size:1.05rem}
.link-card-text strong a{color:var(--title);text-decoration:none}
.link-card-text strong a:hover{color:var(--accent)}
.link-card-text span{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-card-latest{margin:12px 0 0;padding-top:10px;border-top:3px double var(--rule);font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-card-latest a{color:var(--text);text-decoration:none}
.link-card-latest a:hover{color:var(--accent);text-decoration:underline}
.link-latest-label{font-family:var(--serif);color:var(--accent);margin-right:6px}
.link-latest-none{color:var(--muted)}
@media (max-width:640px){
  .friend-circle{padding:28px 16px 8px;margin-top:28px}
  .friend-group-row{flex-wrap:wrap;gap:4px 12px}
  .friend-group-row h3{flex:1 1 100%}
  .link-grid{grid-template-columns:1fr}
}
/* search modal: same backdrop language as the appearance overlay */
.search-overlay{position:fixed;inset:0;background:rgba(10,8,5,.55);display:flex;align-items:flex-start;justify-content:center;padding:96px 16px 16px;z-index:60}
.search-overlay[hidden]{display:none}
.search-panel{background:var(--surface);border:1px solid var(--rule);padding:22px;max-width:560px;width:100%;max-height:70vh;overflow-y:auto;box-shadow:0 14px 44px rgba(0,0,0,.35)}
.search-panel form p{margin:0}
.search-modal-more{margin:12px 0 0;text-align:right;font-size:14px}
@media (max-width:640px){
  .home-intro{font-size:12px;padding:10px 12px;margin-top:16px}
  .ink-list{padding:28px 16px 8px}
  .ink-entry{gap:14px;padding:18px 2px}
  .ink-date{flex-basis:44px;padding-right:12px}
  .ink-date b{font-size:1.4rem}
  .ink-entry-main h3{font-size:1.15rem}
}

/* ---- AI settings + write-page AI tools, 2026-11-06 ---- */
/* action rows: test + save side by side, wrapping on narrow screens */
.btn-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn-row .test-result{margin-left:0}
.btn-row button{flex:0 0 auto}
/* write page: summary input + AI button in one row */
.ai-summary-row{display:flex;gap:10px;align-items:flex-start}
.ai-summary-row input{flex:1;min-width:0}
.ai-summary-row button{flex:0 0 auto;white-space:nowrap}
.cover-preview{margin-top:10px}
.cover-preview:empty{display:none}
.cover-preview img{max-width:100%;max-height:240px;display:block;border:1px solid #3a3226;padding:6px;background:#14110d}
/* AI image style picker: 2-col radio cards */
.ai-styles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}
.ai-style-card{display:flex;flex-direction:column;gap:2px;border:1px solid #3a3226;padding:12px 14px;cursor:pointer;font-weight:400;margin:0}
.ai-style-card:hover{border-color:#d9a441}
.ai-style-card:has(input:checked){border-color:#d9a441;background:#2e2614}
.ai-style-card input{width:auto;accent-color:#d9a441}
.ai-style-card strong{color:#f6efdd;font-size:15px}
.ai-style-card span{font-size:13px;color:#a89a7d}
/* post cover image */
.post-cover{margin:0 0 24px}
.post-cover img{width:100%;max-height:420px;object-fit:cover;display:block;border:1px solid var(--border);padding:6px;background:var(--surface)}
/* search page: input and button share one row instead of stacking */
.search-form p{display:flex;gap:10px;align-items:center}
.search-form input{flex:1;min-width:0}
.search-form button{flex:0 0 auto;white-space:nowrap}
@media (max-width:640px){
  .ai-summary-row{flex-direction:column}
  .ai-summary-row button{align-self:flex-start}
  .ai-styles{grid-template-columns:1fr}
}