:root {
  color-scheme: light;
  --ink:#171717;
  --muted:#77736d;
  --paper:#f7f6f2;
  --white:#fff;
  --line:#d9d6cf;
  --accent:#e9ff5a;
  --accent-soft:#f4ffc0;
  --danger:#9d3434;
  --max:1080px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans TC",system-ui,sans-serif; line-height:1.7; }
a { color:inherit; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.site-header { position:fixed; z-index:1000; top:0; left:50%; width:min(100%,var(--max)); transform:translateX(-50%); min-height:72px; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); background:var(--paper); }
.site-title { margin:0; min-width:0; font-size:.92rem; line-height:1.2; letter-spacing:-.01em; font-weight:600; }
.site-title a { color:inherit; text-decoration:none; }
.site-title a:hover { text-decoration:underline; text-underline-offset:5px; }
.site-title a:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.header-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.admin-badge { font-size:.68rem; letter-spacing:.12em; padding:4px 7px; border:1px solid var(--ink); }
.button { border:1px solid var(--ink); border-radius:0; padding:8px 13px; background:transparent; color:var(--ink); font-weight:600; transition:transform .15s ease,background .15s ease; }
.button:hover { transform:translate(-2px,-2px); }
.button:disabled { opacity:.55; cursor:wait; transform:none; }
.button-primary { background:var(--accent); box-shadow:3px 3px 0 var(--ink); }
.button-primary:hover { background:var(--accent-soft); }
.button-quiet { background:var(--paper); }
main { max-width:var(--max); margin:auto; padding:72px 24px 0; }
.intro { padding:100px 0 36px; }
.intro h1 { margin:0; max-width:900px; font-size:clamp(2.7rem,7.5vw,6rem); line-height:1.08; letter-spacing:-.055em; font-weight:700; }
.intro-copy { margin:26px 0 0; color:#494743; font-size:1rem; }
.posts-section { padding:0 0 110px; border-top:1px solid var(--line); }
.section-heading { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--ink); }
.section-heading h2 { margin:0; font-size:.82rem; line-height:1; letter-spacing:.14em; font-weight:600; }
.post-count { margin:0; color:var(--muted); font-size:.78rem; }
.posts { border:0; }
.post-card { position:relative; padding:26px 0 28px; border-bottom:1px solid var(--line); }
.post-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.post-card h3 { margin:0; font-size:clamp(1.2rem,2.4vw,1.65rem); line-height:1.35; letter-spacing:-.02em; font-weight:600; }
.post-toggle { flex:0 0 auto; width:34px; height:34px; padding:0; border:0; background:transparent; color:var(--ink); font-size:1.25rem; line-height:1; transition:transform .18s ease; }
.post-card.is-open .post-toggle { transform:rotate(90deg); }
.post-details { display:none; padding-top:22px; }
.post-card.is-open .post-details { display:block; }
.post-meta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; color:var(--muted); font-size:.72rem; }
.post-reading-stats { white-space:nowrap; }
.draft { color:var(--ink); background:var(--accent); padding:1px 7px; font-weight:700; }
.post-content { max-width:760px; white-space:pre-wrap; overflow-wrap:anywhere; color:#45423e; }
.post-actions { display:flex; gap:8px; margin-top:22px; }
.post-actions button { padding:6px 12px; font-size:.8rem; }
.status { padding:34px 0; color:var(--muted); border-bottom:1px solid var(--line); }
.status.error,.form-error { color:var(--danger); }
.status[hidden] { display:none; }
footer { max-width:var(--max); margin:auto; min-height:110px; padding:30px 24px; border-top:1px solid var(--line); display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.footer-identity { margin:0; padding:0; border:0; background:none; color:var(--ink); text-decoration:none; font-size:.78rem; font-weight:500; line-height:1.5; }
button.footer-identity { text-align:left; }
a.footer-identity { text-align:right; }
.footer-identity:hover { text-decoration:underline; text-underline-offset:5px; }
dialog { width:min(92vw,470px); padding:0; border:1px solid var(--ink); border-radius:0; box-shadow:8px 8px 0 rgba(23,23,23,.18); }
dialog::backdrop { background:rgba(247,246,242,.82); backdrop-filter:blur(4px); }
.dialog-card { position:relative; padding:34px; background:var(--white); }
.dialog-card-wide { width:min(92vw,700px); }
.dialog-card h2 { margin:0 0 6px; font-size:1.8rem; letter-spacing:-.03em; }
.dialog-card .dialog-kicker { margin-bottom:8px; }
.dialog-kicker { margin:0 0 20px; color:var(--muted); font-size:.68rem; font-weight:700; letter-spacing:.18em; }
.dialog-close { position:absolute; right:15px; top:10px; border:0; background:none; color:var(--ink); font-size:1.7rem; }
.form-intro { color:var(--muted); margin:0 0 22px; }
label:not(.checkbox) { display:grid; gap:6px; margin:16px 0; font-weight:600; font-size:.85rem; }
input,textarea { width:100%; border:1px solid var(--ink); border-radius:0; background:var(--white); padding:10px 11px; color:var(--ink); }
textarea { resize:vertical; min-height:190px; }
input:focus,textarea:focus { outline:3px solid var(--accent); outline-offset:1px; }
.checkbox { display:flex; align-items:center; gap:9px; font-size:.85rem; }
.checkbox input { width:auto; accent-color:var(--ink); }
.button-wide { width:100%; margin-top:8px; }
.form-error { min-height:1.5em; margin:10px 0; font-size:.82rem; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

/* 軍火庫 AuthPermissionUI：沿用個人頁原本的直向登入表單。 */
#login-form[data-auth-form] { display:block; }

/* 軍火庫 Confirm：原生 confirm/alert 全部不再使用，延續本站直角風格。 */
.slowly-confirm.xiayian-confirm {
  --confirm-backdrop:rgba(247,246,242,.82);
  --confirm-surface:var(--white);
  --confirm-text:var(--ink);
  --confirm-muted:var(--muted);
  --confirm-border:var(--ink);
  --confirm-button-bg:var(--paper);
  --confirm-button-text:var(--ink);
  --confirm-confirm-bg:var(--accent);
  --confirm-confirm-text:var(--ink);
  --confirm-radius:0;
  --confirm-shadow:8px 8px 0 rgba(23,23,23,.18);
  font-family:"Noto Sans TC",system-ui,sans-serif;
}
.xiayian-confirm .slowly-confirm__button { font-weight:600; border-radius:0; }
.xiayian-confirm .slowly-confirm__button--confirm { border:1px solid var(--ink); }

/* 軍火庫 Toast 僅管顯示狀態；提示外觀由個人頁負責。 */
.site-toast {
  position:fixed;
  z-index:11000;
  right:24px;
  bottom:24px;
  max-width:min(420px,calc(100vw - 36px));
  padding:12px 16px;
  color:var(--white);
  background:var(--ink);
  border:1px solid var(--ink);
  box-shadow:4px 4px 0 var(--danger);
  font-size:.84rem;
  overflow-wrap:anywhere;
}

/* 真正分頁：資料切頁交給 FictionPaginate；這裡只處理排版。 */
.post-pages { display:flex; align-items:center; justify-content:flex-end; gap:14px; padding:22px 0 0; }
.post-pages[hidden] { display:none; }
.post-page-label { color:var(--muted); font-size:.82rem; font-variant-numeric:tabular-nums; }


/* 分類樹：TreeSelection 只管理狀態；宿主負責 DOM 和節點關係。 */
.category-section { border-bottom:1px solid var(--line); padding:18px 0 23px; }
.category-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; font-weight:700; font-size:.82rem; }
.category-status { margin:0 0 12px; color:var(--muted); font-size:.8rem; }
.category-status:empty { display:none; }
.category-tree { max-width:100%; overflow-x:auto; }
.category-list { margin:0; padding:0; list-style:none; }
.category-list .category-list { margin:0 0 0 21px; padding:0 0 0 13px; border-left:1px solid var(--line); }
.category-node { padding:2px 0; }
.category-row { display:flex; align-items:center; gap:6px; min-width:0; }
.category-expander { flex:0 0 27px; min-width:27px; height:30px; border:0; padding:0; background:none; color:var(--ink); }
.category-expander[disabled] { opacity:.24; cursor:default; }
.category-link { flex:1 1 auto; min-width:0; width:100%; padding:5px 8px; text-align:left; border:1px solid transparent; background:transparent; color:var(--ink); }
.category-link[aria-current="true"] { border-color:var(--ink); background:var(--accent-soft); font-weight:700; }
.category-count { flex:0 0 auto; color:var(--muted); font-size:.73rem; font-variant-numeric:tabular-nums; }
.category-node-actions { display:flex; flex:0 0 auto; gap:3px; }
.category-node-actions button { padding:3px 7px; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:.73rem; }
.category-node-actions button:hover { border-color:var(--ink); }
.category-empty { margin:10px 0 0; color:var(--muted); font-size:.78rem; }
.category-form-actions { flex-wrap:wrap; }
.button-danger { border-color:var(--danger); color:var(--danger); margin-right:auto; }
#category-dialog { overflow:visible; }
#category-dialog .slowly-select,
#editor-dialog .slowly-select { --ss-bg:var(--white); --ss-text:var(--ink); --ss-border:var(--ink); --ss-hover:var(--paper); --ss-selected-bg:var(--accent-soft); --ss-selected-text:var(--ink); --ss-focus:var(--ink); }
#category-dialog .slowly-select-trigger,
#editor-dialog .slowly-select-trigger { border-radius:0; font-weight:400; }
#category-dialog .slowly-select-menu,
#editor-dialog .slowly-select-menu { box-shadow:3px 3px 0 var(--ink); }
#category-dialog .slowly-select-option,
#editor-dialog .slowly-select-option { border-radius:0; }

/* 文章所見即所得／HTML 雙模式。只影響個人頁，不更動軍火庫樣式。 */
#editor-dialog { width:min(96vw,900px); max-width:94dvh; overflow-y:auto; }
#editor-dialog .dialog-card-wide { width:100%; }
.editor-field { margin:17px 0; }
.editor-field-title { display:block; margin-bottom:7px; font-size:.85rem; font-weight:700; }
.rich-editor { min-width:0; border:1px solid var(--ink); background:var(--white); }
.rich-mode { display:flex; gap:0; border-bottom:1px solid var(--line); background:var(--paper); }
.rich-mode button { flex:1 1 auto; min-width:0; padding:9px 10px; border:0; border-right:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink); font-size:.81rem; font-weight:600; }
.rich-mode button:last-child { border-right:0; }
.rich-mode button[aria-selected="true"] { background:var(--accent-soft); box-shadow:inset 0 -3px var(--ink); }
.rich-mode button:focus-visible,.rich-toolbar button:focus-visible { outline:2px solid var(--ink); outline-offset:-3px; }
.rich-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:3px; padding:8px; border-bottom:1px solid var(--line); background:var(--white); }
.rich-toolbar[hidden],.rich-surface[hidden],.rich-source[hidden] { display:none!important; }
.rich-toolbar button { min-width:33px; min-height:34px; padding:4px 7px; border:1px solid transparent; border-radius:0; background:transparent; color:var(--ink); font-size:.79rem; line-height:1.3; }
.rich-toolbar button:hover { border-color:var(--ink); background:var(--accent-soft); }
.rich-toolbar button:disabled { opacity:.45; cursor:wait; }
.rich-toolbar-divider { height:22px; width:1px; margin:0 3px; background:var(--line); }
.rich-image-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--line); background:var(--accent-soft); font-size:.79rem; }
.rich-image-tools[hidden] { display:none!important; }
.rich-image-tools span { margin-right:auto; font-weight:700; }
.rich-image-tools button { min-height:36px; padding:5px 11px; border:1px solid var(--ink); border-radius:0; background:var(--white); color:var(--ink); font:inherit; cursor:pointer; }
.rich-image-tools button:hover,.rich-image-tools button:focus-visible { background:var(--paper); outline:2px solid var(--ink); outline-offset:2px; }
.rich-image-tools .rich-image-delete { background:var(--ink); color:var(--white); }
.rich-image-tools .rich-image-delete:hover,.rich-image-tools .rich-image-delete:focus-visible { background:var(--ink); color:var(--accent); }
.rich-image-tools button:disabled { opacity:.45; cursor:wait; }
.rich-surface { min-height:300px; max-height:60dvh; overflow-y:auto; padding:18px; font-size:.94rem; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere; outline:none; }
.rich-surface:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
.rich-surface:empty::before { content:attr(data-placeholder); color:var(--muted); pointer-events:none; }
.rich-surface[contenteditable="false"] { background:var(--paper); }
.rich-source { display:block; width:100%; min-height:300px; max-height:60dvh; margin:0; padding:17px; resize:vertical; border:0; border-radius:0; outline:0; background:#f9f8f3; color:var(--ink); font:400 .85rem/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre; overflow:auto; }
.rich-source:focus { outline:3px solid var(--accent); outline-offset:-3px; }
.editor-help { margin:8px 0 0; color:var(--muted); font-size:.75rem; line-height:1.6; }
.editor-insert-dialog { width:min(92vw,520px); }
/* 在編輯器及閱讀畫面都用相同的文章排版規則。 */
.post-content { white-space:normal; line-height:1.85; }
.post-content :is(p,div,blockquote,ul,ol,pre,figure,table),
.rich-surface :is(p,div,blockquote,ul,ol,pre,figure,table) { margin:0 0 1em; }
.post-content :is(h2,h3,h4),.rich-surface :is(h2,h3,h4) { margin:1.2em 0 .5em; line-height:1.4; font-weight:700; }
.post-content h2,.rich-surface h2 { font-size:1.48em; }
.post-content h3,.rich-surface h3 { font-size:1.22em; }
.post-content h4,.rich-surface h4 { font-size:1.08em; }
.post-content :is(ul,ol),.rich-surface :is(ul,ol) { padding-left:1.5em; }
.post-content blockquote,.rich-surface blockquote { padding:6px 0 6px 14px; border-left:3px solid var(--ink); color:var(--muted); }
.post-content img,.rich-surface img { display:block; max-width:100%; height:auto; margin:16px 0; background:var(--paper); }
.rich-surface img { cursor:pointer; }
.rich-surface img.rich-image-selected { outline:3px solid var(--ink); outline-offset:3px; }
.post-content a,.rich-surface a { text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.post-content pre,.rich-surface pre { padding:12px; overflow:auto; border:1px solid var(--line); background:var(--paper); white-space:pre-wrap; }
.post-content :is(code,pre),.rich-surface :is(code,pre) { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.post-content table,.rich-surface table { width:100%; border-collapse:collapse; }
.post-content :is(td,th),.rich-surface :is(td,th) { padding:6px 9px; border:1px solid var(--line); text-align:left; }
.post-content :is(p,div,blockquote,ul,ol,pre,figure,table):last-child,
.rich-surface :is(p,div,blockquote,ul,ol,pre,figure,table):last-child { margin-bottom:0; }