/* ========================================
   AI 学习笔记 — The Engineer’s Logbook
   Knowledge Base palette · Swiss grid · Typography-driven
   ======================================== */

/* ---------- Design tokens ---------- */
:root {
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;

  /* Light — neutral gray-blue + single blue accent */
  --color-bg:             oklch(96% 0.002 250);
  --color-surface:        oklch(99% 0.001 250);
  --color-surface-muted:  oklch(93% 0.003 250);
  --color-border:         oklch(88% 0.004 250);
  --color-border-light:   oklch(92% 0.003 250);
  --color-text-heading:   oklch(18% 0.003 250);
  --color-text:           oklch(30% 0.004 250);
  --color-text-secondary: oklch(48% 0.004 250);
  --color-text-muted:     oklch(60% 0.004 250);
  --color-accent:         oklch(50% 0.18 255);
  --color-accent-hover:   oklch(44% 0.19 255);
  --color-accent-soft:    oklch(92% 0.03 255);
  --color-success:        oklch(55% 0.15 155);
  --color-warning:        oklch(65% 0.12 80);
  --color-danger:         oklch(50% 0.18 25);

  --color-code-bg:        oklch(94% 0.004 250);
  --color-code-text:      oklch(45% 0.15 20);
  --color-blockquote-bg:  oklch(95% 0.005 250);

  /* Glass tokens — light: near-white translucent */
  --glass-bg:        oklch(99% 0.001 250 / 0.60);
  --glass-bg-strong: oklch(99% 0.001 250 / 0.82);
  --glass-border:     oklch(88% 0.004 250 / 0.70);
  --glass-shadow:     0 1px 3px oklch(0% 0 0 / 0.04);
  --glass-blur:       12px;
  --surface-elevated: oklch(99% 0.001 250);

  --radius-sm: 4px; --radius: 6px; --radius-lg: 10px; --radius-xl: 12px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms; --duration: 200ms;
}

[data-theme="dark"] {
  --color-bg:             oklch(18% 0.003 250);
  --color-surface:        oklch(24% 0.004 250);
  --color-surface-muted:  oklch(20% 0.003 250);
  --color-border:         oklch(30% 0.005 250);
  --color-border-light:   oklch(23% 0.004 250);
  --color-text-heading:   oklch(92% 0.002 250);
  --color-text:           oklch(82% 0.003 250);
  --color-text-secondary: oklch(65% 0.004 250);
  --color-text-muted:     oklch(50% 0.004 250);
  --color-accent:         oklch(65% 0.14 255);
  --color-accent-hover:   oklch(72% 0.13 255);
  --color-accent-soft:    oklch(25% 0.06 255);
  --color-success:        oklch(65% 0.13 155);
  --color-warning:        oklch(72% 0.10 80);
  --color-danger:         oklch(62% 0.18 25);

  /* Glass — dark: deep navy translucent */
  --glass-bg:        oklch(24% 0.004 250 / 0.55);
  --glass-bg-strong: oklch(24% 0.004 250 / 0.78);
  --glass-border:     oklch(30% 0.005 250 / 0.60);
  --glass-shadow:     0 1px 3px oklch(0% 0 0 / 0.20);
  --glass-blur:       12px;
  --surface-elevated: oklch(26% 0.005 250);

  --color-code-bg:        oklch(23% 0.005 250);
  --color-code-text:      oklch(70% 0.12 30);
  --color-blockquote-bg:  oklch(22% 0.005 250);
}

/* ---------- Reset & Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Manrope','PingFang SC','Noto Sans SC','Microsoft YaHei',system-ui,sans-serif;
  font-weight:400;line-height:1.75;color:var(--color-text);
  background:var(--color-bg);max-width:720px;margin:0 auto;
  padding:0 var(--space-lg) var(--space-3xl);
  transition:background-color var(--duration) var(--ease-out),color var(--duration) var(--ease-out);
}
/* Subtle static depth tint on body */
body::before{
  content:'';position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 60% 40% at 50% 0%,oklch(65% 0.05 255 / 0.06),transparent 70%),
             radial-gradient(ellipse 50% 30% at 80% 100%,oklch(50% 0.04 250 / 0.03),transparent 60%);
}
[data-theme="dark"] body::before{
  background:radial-gradient(ellipse 50% 30% at 50% 0%,oklch(70% 0.06 255 / 0.08),transparent 60%);
}

/* ---------- Focus ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,
summary:focus-visible,select:focus-visible,.chip:focus-visible{
  outline:2px solid var(--color-accent);outline-offset:2px;border-radius:2px;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--space-sm);padding:var(--space-md) var(--space-md);margin:0 calc(-1 * var(--space-md)) var(--space-2xl);
  background:var(--glass-bg-strong);border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  transition:background var(--duration) var(--ease-out),border-color var(--duration) var(--ease-out);
}
@supports not (backdrop-filter: blur(1px)){
  .site-header{background:var(--surface-elevated)}
}
.site-branding{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-md)}
.site-title{font-size:1.05rem;font-weight:700;letter-spacing:-0.01em;line-height:1.3}
.site-title a{text-decoration:none;color:var(--color-text-heading)}
.site-tagline{font-size:0.8rem;color:var(--color-text-muted)}
.site-nav{
  display:flex;align-items:center;gap:1px;font-size:0.82rem;font-weight:500;
}
.site-nav a{
  color:var(--color-text-secondary);text-decoration:none;
  padding:6px 10px;border-radius:var(--radius-sm);min-height:44px;display:flex;align-items:center;
  transition:color var(--duration-fast) var(--ease-out);
}
.theme-toggle{
  background:none;border:none;padding:6px 10px;min-height:44px;display:flex;align-items:center;
  cursor:pointer;font-size:0.82rem;color:var(--color-text-muted);
  border-radius:var(--radius-sm);font-family:inherit;
  transition:color var(--duration-fast) var(--ease-out);line-height:1;margin-left:2px;
}

/* ---------- Intro (glass panel + Swiss grid) ---------- */
.intro-block{
  display:grid;grid-template-columns:1fr;gap:var(--space-md) var(--space-2xl);
  margin-bottom:var(--space-2xl);padding:var(--space-lg);
  background:var(--glass-bg-strong);border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);box-shadow:var(--glass-shadow);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
}
@supports not (backdrop-filter:blur(1px)){
  .intro-block{background:var(--surface-elevated)}
}
@media(min-width:560px){
  .intro-block{grid-template-columns:1fr auto;align-items:start}
}
.intro-greeting{font-size:1.05rem;font-weight:700;color:var(--color-text-heading);letter-spacing:-0.01em;margin-bottom:var(--space-xs)}
.intro-desc{font-size:0.88rem;color:var(--color-text-secondary);line-height:1.65;max-width:52ch}
.intro-meta{display:flex;flex-direction:column;gap:var(--space-xs);font-size:0.76rem;color:var(--color-text-muted)}
.intro-meta strong{color:var(--color-text);font-weight:600}
.intro-focus{font-size:0.76rem;color:var(--color-text-muted)}
.intro-focus a{margin-left:3px;font-weight:500}

/* ---------- Content index (glass panel) ---------- */
.content-index{
  margin-bottom:var(--space-xl);padding:var(--space-md) var(--space-lg);
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);box-shadow:var(--glass-shadow);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
}
@supports not (backdrop-filter:blur(1px)){
  .content-index{background:var(--surface-elevated)}
}
.series-index{margin-top:var(--space-md)}
.index-group{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-sm);margin-bottom:var(--space-sm)}
.index-group:last-child{margin-bottom:0}
.index-label{
  font-size:0.7rem;font-weight:600;color:var(--color-text-muted);
  letter-spacing:0.06em;min-width:3em;flex-shrink:0;
}
.index-pills{display:flex;flex-wrap:wrap;gap:var(--space-xs);align-items:center}

/* ---------- Unified chip system ---------- */
.chip{
  display:inline-flex;align-items:center;font-size:0.7rem;font-weight:500;
  padding:3px 10px;border-radius:9999px;text-decoration:none;line-height:1.5;
  min-height:30px;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out);
}
.chip--category{background:oklch(93% 0.03 80);color:oklch(40% 0.08 80)}
.chip--tag{background:var(--color-accent-soft);color:var(--color-accent)}
.chip--series{background:oklch(93% 0.03 155);color:oklch(40% 0.08 155)}
[data-theme="dark"] .chip--category{background:oklch(25% 0.04 80);color:oklch(80% 0.08 80)}
[data-theme="dark"] .chip--tag{background:var(--color-accent-soft);color:var(--color-accent)}
[data-theme="dark"] .chip--series{background:oklch(24% 0.03 155);color:oklch(72% 0.07 155)}

.draft-badge{
  display:inline-flex;align-items:center;font-size:0.65rem;font-weight:600;
  padding:2px 8px;border-radius:9999px;
  background:oklch(92% 0.04 80);color:oklch(45% 0.08 80);min-height:24px;
}
[data-theme="dark"] .draft-badge{background:oklch(25% 0.04 80);color:oklch(80% 0.08 80)}

/* ---------- Section heading ---------- */
.section-heading{
  font-size:0.74rem;font-weight:600;color:var(--color-text-muted);
  letter-spacing:0.06em;margin-bottom:var(--space-md);
}

/* ---------- Post list (glass panels) ---------- */
.post-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-md)}
.post-item{
  padding:var(--space-lg);border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  background:var(--glass-bg);box-shadow:var(--glass-shadow);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  transition:border-color var(--duration-fast) var(--ease-out);
}
@supports not (backdrop-filter:blur(1px)){
  .post-item{background:var(--surface-elevated)}
}
.post-item:first-child{
  border-color:var(--color-accent-soft);
}
.post-item:first-child .post-date::after{
  content:' · 最新';color:var(--color-accent);font-weight:600;margin-left:2px;
}
.post-date{
  font-size:0.72rem;font-weight:500;color:var(--color-text-muted);
  letter-spacing:0.02em;margin-bottom:var(--space-sm);font-variant-numeric:tabular-nums;
}
.post-title{font-size:1.05rem;font-weight:600;line-height:1.5;letter-spacing:-0.01em}
.post-title a{color:var(--color-text-heading);text-decoration:none}
.post-excerpt{
  font-size:0.88rem;color:var(--color-text-secondary);margin-top:6px;line-height:1.6;max-width:60ch;
}
.post-meta-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);
  margin-top:var(--space-sm);font-size:0.7rem;font-weight:500;
}
.post-reading-time{color:var(--color-text-muted)}
.post-meta-sep{color:var(--color-border);user-select:none}
.meta-link{text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}
.meta-link--category{color:oklch(55% 0.08 80)}
.meta-link--tag{color:var(--color-accent)}
[data-theme="dark"] .meta-link--category{color:oklch(75% 0.07 80)}
[data-theme="dark"] .meta-link--tag{color:var(--color-accent)}

/* ---------- Article page ---------- */
.back-link{
  display:inline-flex;align-items:center;gap:4px;margin-bottom:var(--space-xl);
  font-size:0.82rem;font-weight:500;color:var(--color-text-muted);
  text-decoration:none;min-height:44px;transition:color var(--duration-fast) var(--ease-out);
}
.article-header{margin-bottom:var(--space-xl);padding-bottom:var(--space-lg);border-bottom:1px solid var(--color-border)}
.article-title{
  font-size:clamp(1.4rem,4vw,1.8rem);font-weight:800;color:var(--color-text-heading);
  line-height:1.35;letter-spacing:-0.02em;
}
.article-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);
  font-size:0.8rem;color:var(--color-text-muted);font-weight:500;margin-top:var(--space-sm);
}

/* TOC (glass panel) */
.toc{
  margin-bottom:var(--space-xl);padding:var(--space-md) var(--space-lg);
  background:var(--glass-bg);border-radius:var(--radius);border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
}
@supports not (backdrop-filter:blur(1px)){
  .toc{background:var(--surface-elevated)}
}
.toc-title{
  font-size:0.82rem;font-weight:600;color:var(--color-text);
  cursor:pointer;list-style:none;min-height:30px;display:flex;align-items:center;
}
.toc-title::-webkit-details-marker{display:none}
.toc-content{margin-top:var(--space-sm);font-size:0.86rem;line-height:1.8}
.toc-content ul{list-style:none;padding-left:0}
.toc-content li{margin-bottom:2px}
.toc-content ul ul{padding-left:var(--space-lg)}
.toc-content a{color:var(--color-text-secondary);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}

/* Article body */
.article-content{font-size:1rem;line-height:1.85}
.article-content p{margin-bottom:1.2em}
.article-content h2{font-size:1.22rem;font-weight:700;color:var(--color-text-heading);margin:2.2em 0 0.7em;letter-spacing:-0.01em}
.article-content h3{font-size:1.05rem;font-weight:600;color:var(--color-text-heading);margin:1.6em 0 0.5em}
.article-content h2+h3{margin-top:0.6em}
.article-content ul,.article-content ol{margin:0.7em 0 0.7em 1.6em}
.article-content li{margin-bottom:0.4em}
.article-content li::marker{color:var(--color-accent)}
.article-content blockquote{
  margin:1.3em 0;padding:var(--space-md) var(--space-lg);
  background:var(--color-blockquote-bg);color:var(--color-text-secondary);
  border-radius:var(--radius);
}
.article-content blockquote p:last-child{margin-bottom:0}
.article-content code{
  background:var(--color-code-bg);padding:2px 6px;border-radius:3px;
  font-family:'JetBrains Mono','SF Mono','Cascadia Code','Consolas','Courier New',monospace;
  font-size:0.84em;color:var(--color-code-text);font-weight:450;
}
.article-content pre{
  background:var(--color-blockquote-bg);border:1px solid var(--color-border);
  border-radius:var(--radius);padding:var(--space-lg);overflow-x:auto;
  margin:1.3em 0;font-size:0.84rem;line-height:1.65;
}
.article-content pre code{background:none;padding:0;color:var(--color-text);font-size:inherit}
.article-content a{color:var(--color-accent);text-decoration:none;font-weight:500}
.article-content img{max-width:100%;height:auto;display:block;margin:1.3em auto;border-radius:var(--radius-sm)}
.article-content hr{border:none;border-top:1px solid var(--color-border);margin:2em 0}

/* Footer tags */
.article-footer-meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-sm);
  margin-top:var(--space-2xl);padding-top:var(--space-lg);
  border-top:1px solid var(--color-border-light);
}
.footer-meta-label{
  font-size:0.7rem;font-weight:600;color:var(--color-text-muted);letter-spacing:0.05em;
}
.footer-meta-pills{display:flex;flex-wrap:wrap;gap:var(--space-xs)}

/* ---------- Reading progress ---------- */
.reading-progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:200;background:transparent;pointer-events:none}
.reading-progress-bar{height:100%;width:0;background:var(--color-accent);opacity:0.7;transition:width 0.1s linear}

/* ---------- Heading anchors ---------- */
.heading-anchor{
  opacity:0;font-size:0.75em;margin-left:5px;color:var(--color-text-muted);
  text-decoration:none;min-height:24px;min-width:24px;display:inline-flex;align-items:center;justify-content:center;
  transition:opacity var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out);
}
h2:hover .heading-anchor,h3:hover .heading-anchor,.heading-anchor:focus-visible{opacity:1}

/* ---------- Code copy ---------- */
.code-block-wrapper{position:relative}
.code-copy-btn{
  position:absolute;top:8px;right:8px;font-size:0.7rem;font-family:inherit;
  padding:4px 10px;min-height:32px;border:1px solid var(--color-border);
  border-radius:var(--radius-sm);background:var(--color-surface);
  color:var(--color-text-muted);cursor:pointer;
  transition:all var(--duration-fast) var(--ease-out);line-height:1;
}
.code-copy-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}

/* ---------- Series module (glass panel) ---------- */
.series-module{
  margin-bottom:var(--space-xl);padding:var(--space-md) var(--space-lg);
  border:1px solid var(--glass-border);border-radius:var(--radius);
  background:var(--glass-bg);box-shadow:var(--glass-shadow);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
}
@supports not (backdrop-filter:blur(1px)){
  .series-module{background:var(--surface-elevated)}
}
.series-label{font-size:0.76rem;font-weight:600;color:var(--color-text-muted);margin-bottom:var(--space-sm)}
.series-label a{color:var(--color-accent);text-decoration:none}
.series-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-xs);font-size:0.82rem}
.series-list li{display:inline}
.series-list li::after{content:" → ";color:var(--color-border);font-size:0.65rem}
.series-list li:last-child::after{content:""}
.series-list a{color:var(--color-text-secondary);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}
.series-current{color:var(--color-accent);font-weight:600}

/* ---------- Related posts (glass panel) ---------- */
.related-posts{
  margin-top:var(--space-2xl);padding:var(--space-md) var(--space-lg);
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);box-shadow:var(--glass-shadow);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
}
@supports not (backdrop-filter:blur(1px)){
  .related-posts{background:var(--surface-elevated)}
}
.related-posts .section-heading{margin-bottom:var(--space-sm)}
.related-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-sm)}
.related-item{display:flex;align-items:baseline;gap:var(--space-sm);font-size:0.86rem}
.related-title{color:var(--color-text);text-decoration:none;transition:color var(--duration-fast) var(--ease-out);line-height:1.4}

/* ---------- Prev / Next ---------- */
.prev-next{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);
  margin-top:var(--space-2xl);padding-top:var(--space-lg);border-top:1px solid var(--color-border-light);
}
.prev-next-link{text-decoration:none;display:block}
.prev-next-label{
  display:block;font-size:0.68rem;font-weight:600;color:var(--color-text-muted);
  letter-spacing:0.05em;margin-bottom:2px;
}
.prev-next-title{font-size:0.86rem;color:var(--color-text-secondary);line-height:1.4;transition:color var(--duration-fast) var(--ease-out)}
.next-link{text-align:right}

/* ---------- List header ---------- */
.list-header{margin-bottom:var(--space-2xl)}
.list-label{
  font-size:0.7rem;font-weight:600;color:var(--color-text-muted);
  letter-spacing:0.06em;margin-bottom:var(--space-xs);
}
.list-title{font-size:1.5rem;font-weight:700;color:var(--color-text-heading);letter-spacing:-0.01em;line-height:1.3}
.list-count{font-size:0.8rem;color:var(--color-text-muted);margin-top:var(--space-xs)}

/* ---------- Empty state ---------- */
.empty-state{text-align:center;padding:var(--space-2xl) 0;color:var(--color-text-muted);font-size:0.88rem}
.empty-link{display:inline-flex;align-items:center;margin-top:var(--space-sm);color:var(--color-accent);text-decoration:none;font-weight:600;font-size:0.86rem;min-height:44px}

/* ---------- Archive page ---------- */
.archive-year{margin-bottom:var(--space-2xl)}
.archive-year-heading{font-size:1.35rem;font-weight:700;color:var(--color-text-heading);margin-bottom:var(--space-md);letter-spacing:-0.01em}
.archive-month-group{margin-bottom:var(--space-lg)}
.archive-month-heading{
  font-size:0.76rem;font-weight:600;color:var(--color-text-muted);
  letter-spacing:0.04em;margin-bottom:var(--space-sm);
}
.archive-post-list{list-style:none;display:flex;flex-direction:column;gap:4px}
.archive-post-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-sm);font-size:0.86rem;padding:4px 0}
.archive-post-date{font-size:0.74rem;color:var(--color-text-muted);font-variant-numeric:tabular-nums;min-width:2.5em}
.archive-post-title{color:var(--color-text);text-decoration:none;transition:color var(--duration-fast) var(--ease-out);flex:1}
.archive-post-meta{display:flex;gap:var(--space-xs);font-size:0.68rem}

/* ---------- Search page ---------- */
.search-container{margin-bottom:var(--space-3xl)}
.search-input{
  width:100%;padding:var(--space-sm) var(--space-md);min-height:44px;
  border:1px solid var(--color-border);border-radius:var(--radius);
  font-size:1rem;font-family:inherit;background:var(--color-bg);color:var(--color-text);
  transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);
  margin-bottom:var(--space-lg);
}
.search-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px oklch(65% 0.14 255 / 0.15)}
.search-results{min-height:120px}
.search-hint,.search-empty,.search-error{color:var(--color-text-muted);font-size:0.86rem;text-align:center;padding:var(--space-2xl) 0}
.search-count{font-size:0.76rem;color:var(--color-text-muted);margin-bottom:var(--space-md)}
.search-results-list .post-item{border-bottom:1px solid var(--color-border-light)}

/* ---------- Footer ---------- */
.site-footer{
  margin-top:var(--space-3xl);padding-top:var(--space-lg);
  border-top:1px solid var(--color-border-light);
  font-size:0.76rem;color:var(--color-text-muted);text-align:left;
}

/* ---------- Write page (legacy) ---------- */
.write-page{max-width:720px;margin:0 auto}
.write-page h1{font-weight:700;font-size:1.3rem;margin-bottom:var(--space-xs);color:var(--color-text-heading);letter-spacing:-0.01em}
.write-page .hint{color:var(--color-text-secondary);font-size:0.82rem;margin-bottom:var(--space-lg);line-height:1.6}
.write-page .hint a{color:var(--color-accent);font-weight:500}
.write-page label{display:block;margin-bottom:var(--space-xs);font-size:0.82rem;color:var(--color-text);font-weight:600}
.write-page input,.write-page textarea{
  width:100%;padding:var(--space-sm) 14px;border:1px solid var(--color-border);
  border-radius:var(--radius-sm);font-size:0.9rem;font-family:inherit;margin-bottom:var(--space-md);
  background:var(--color-surface);color:var(--color-text);
  transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);
}
.write-page input:focus,.write-page textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px oklch(65% 0.14 255 / 0.18)}
.write-page textarea{min-height:400px;line-height:1.8;resize:vertical}
.write-page button{
  background:var(--color-accent);color:#fff;padding:var(--space-sm) var(--space-xl);
  border:none;border-radius:var(--radius-sm);font-size:0.9rem;font-weight:600;
  font-family:inherit;cursor:pointer;min-height:44px;
  transition:background var(--duration-fast) var(--ease-out);
}
.write-page button:disabled{background:var(--color-border);color:var(--color-text-muted);cursor:not-allowed}
.write-page .msg{margin-top:var(--space-sm);font-size:0.82rem}
.write-page .msg.success{color:var(--color-success)}
[data-theme="dark"] .write-page .msg.success{color:var(--color-success)}
.write-page .msg.error{color:var(--color-danger)}
[data-theme="dark"] .write-page .msg.error{color:var(--color-danger)}
.write-page hr{border:none;border-top:1px solid var(--color-border);margin:var(--space-lg) 0}

/* ---------- Responsive ---------- */
@media(max-width:640px){
  body{padding:0 14px var(--space-2xl)}
  .site-header{margin:0 calc(-1 * 10px) var(--space-xl);padding:var(--space-sm) 10px}
  .site-tagline{display:none}
  .site-nav{
    font-size:0.74rem;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;flex-wrap:nowrap;white-space:nowrap;padding-bottom:4px;
    mask-image:linear-gradient(to right,black 85%,transparent 98%);
    -webkit-mask-image:linear-gradient(to right,black 85%,transparent 98%);
  }
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a,.site-nav .theme-toggle{flex-shrink:0}
  .intro-block{padding:var(--space-md);margin-bottom:var(--space-xl)}
  .post-list{gap:var(--space-sm)}
  .post-item{padding:var(--space-md)}
  .content-index{padding:var(--space-sm) var(--space-md)}
  .index-pills{gap:4px}
  .post-title{font-size:1rem}
  .article-title{font-size:1.3rem}
  .article-content{font-size:0.95rem;line-height:1.8}
  .article-content h2{font-size:1.12rem}
  .list-title{font-size:1.25rem}
  .prev-next{grid-template-columns:1fr;gap:var(--space-md)}
  .prev-next .next-link{text-align:left}
  .search-input{font-size:16px}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;animation-iteration-count:1!important;
    transition-duration:0.01ms!important;scroll-behavior:auto!important;
  }
  .reading-progress-bar{transition:none}
}

/* ---------- Hover ---------- */
@media(hover:hover){
  .site-title a:hover{color:var(--color-accent)}
  .site-nav a:hover{color:var(--color-text-heading)}
  .theme-toggle:hover{color:var(--color-accent)}
  .post-title a:hover{color:var(--color-accent)}
  .back-link:hover{color:var(--color-accent)}
  .article-content a:hover{color:var(--color-accent-hover);text-decoration:underline}
  .chip:hover{opacity:0.82}
  .heading-anchor:hover{color:var(--color-accent)}
  .code-copy-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}
  .series-list a:hover{color:var(--color-accent)}
  .series-label a:hover{color:var(--color-accent-hover)}
  .archive-post-title:hover{color:var(--color-accent)}
  .related-title:hover{color:var(--color-accent)}
  .empty-link:hover{color:var(--color-accent-hover);text-decoration:underline}
  .toc-content a:hover{color:var(--color-accent)}
  .prev-next-link:hover .prev-next-title{color:var(--color-accent)}
  .meta-link--category:hover{opacity:0.75}
  .meta-link--tag:hover{opacity:0.75}
  .write-page button:hover:not(:disabled){background:var(--color-accent-hover)}
}