/* 色彩一律走 CSS 自訂屬性,淺色(宣紙)為預設值,見 docs/spec.md §5.1 視覺識別。 */
:root {
    --mzq-paper: #F4F3EE;
    --mzq-paper-alt: #ECEBE5;
    --mzq-ink: #1C1B19;
    --mzq-ink-soft: #6E6C66;
    --mzq-rule: #DAD8D1;
    --mzq-indigo: #2F4B6E;
    --mzq-indigo-tint: #DCE4EE;
    --mzq-seal: #B8352A;
    --mzq-on-indigo: #F4F3EE;
    --mzq-kai: "LXGW WenKai TC", "DFKai-SB", "BiauKai", serif;
    --mzq-song: "Noto Serif TC", "PMingLiU", serif;
    --mzq-hei: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    /* 內文字級與行高獨立成變數,閱讀偏好膠囊只改這兩個值就能全頁生效。 */
    --mzq-prose-size: clamp(17px, 1rem + 0.5vw, 20px);
    --mzq-prose-line: 2;
}

/* 沒有手動選過底色時才跟隨系統;一旦 data-theme 存在就代表讀者已表態,系統偏好不得再覆蓋。 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --mzq-paper: #15171A;
        --mzq-paper-alt: #1C1F23;
        --mzq-ink: #E6E4DE;
        --mzq-ink-soft: #8E8C86;
        --mzq-rule: #2C2F34;
        --mzq-indigo: #8FAEDB;
        --mzq-indigo-tint: #22303F;
        --mzq-seal: #D9584B;
        --mzq-on-indigo: #15171A;
    }
}

/* 讀者在閱讀工具列選了夜間底色,以 localStorage 記住後由 JS 寫回這個屬性。 */
:root[data-theme="dark"] {
    --mzq-paper: #15171A;
    --mzq-paper-alt: #1C1F23;
    --mzq-ink: #E6E4DE;
    --mzq-ink-soft: #8E8C86;
    --mzq-rule: #2C2F34;
    --mzq-indigo: #8FAEDB;
    --mzq-indigo-tint: #22303F;
    --mzq-seal: #D9584B;
    --mzq-on-indigo: #15171A;
}

/* 米黃底色是長時間閱讀的折衷檔位,只換紙與界行,主色維持磁青不動。 */
:root[data-theme="sepia"] {
    --mzq-paper: #EFE6D2;
    --mzq-paper-alt: #E7DCC2;
    --mzq-ink: #2A2418;
    --mzq-ink-soft: #6E6353;
    --mzq-rule: #DBCEB2;
    --mzq-indigo: #33506F;
    --mzq-indigo-tint: #DFE0D6;
    --mzq-seal: #B8352A;
    --mzq-on-indigo: #EFE6D2;
}

/* 字級只給兩檔,避免膠囊工具列出現需要瞄準的細小刻度,見 docs/spec.md §2。 */
:root[data-font-size="large"] {
    --mzq-prose-size: clamp(19px, 1.15rem + 0.6vw, 23px);
}

/* 行距放寬檔位,給偏好疏朗版面的讀者,底線仍不低於規格要求的 2.0。 */
:root[data-line-height="loose"] {
    --mzq-prose-line: 2.4;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--mzq-paper);
    color: var(--mzq-ink);
    /* 介面文字一律黑體,內文與標題另行指定,見 docs/spec.md §5.1 三層字體。 */
    font-family: var(--mzq-hei);
    /* 介面基準 15px,是第二版把手機可讀性拉起來的主要調整。 */
    font-size: 15px;
    line-height: 1.75;
}

a {
    color: inherit;
    text-decoration: none;
}

/* 日期與章號等欄位一律等寬數字,清單才對得齊,見 docs/spec.md §5。 */
.mzq-num {
    font-variant-numeric: tabular-nums;
}

.mzq-kai {
    font-family: var(--mzq-kai);
}

.mzq-song {
    font-family: var(--mzq-song);
}

.mzq-soft {
    color: var(--mzq-ink-soft);
}

/* 次要說明文字的統一級距,規格定為 13px。 */
.mzq-sm {
    font-size: 13px;
}

/* 最小級距 12px,只用在日期、標籤這類輔助資訊。 */
.mzq-xs {
    font-size: 12px;
}

/* 硃砂只當印章用,連載中圓點與「新」標記是唯二例外,見 docs/spec.md §5.1。 */
.mzq-seal-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mzq-seal);
    vertical-align: middle;
}

/* 品牌方印,硃砂底加內縮白邊模擬鈐印效果。 */
.mzq-seal-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 2px;
    background: var(--mzq-seal);
    color: #F4F3EE;
    font-family: var(--mzq-kai);
    font-size: 17px;
    line-height: 1;
    box-shadow: inset 0 0 0 1.5px rgba(244, 243, 238, .6), inset 0 0 0 2.5px var(--mzq-seal);
}

/* 站頭 */
.mzq-site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px clamp(20px, 4vw, 48px);
    border-bottom: 1px solid var(--mzq-rule);
    /* 避開瀏海裝置的頂端安全區,見 docs/spec.md §5「手機閱讀細節」。 */
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
}

.mzq-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mzq-brand-name {
    font-family: var(--mzq-kai);
    font-size: 21px;
    letter-spacing: 3px;
}

/* 內容主欄,桌面最寬 1180px 與設計稿一致,再寬就會讓帳本欄離主欄太遠。 */
.mzq-shell {
    max-width: 1180px;
    margin-inline: auto;
    padding: 24px clamp(20px, 4vw, 48px) 64px;
}

/* 純內文頁(章節、錯誤頁)的欄寬:手機滿版、桌機置中,一條規則覆蓋所有裝置。 */
.mzq-content-column {
    max-width: 38em;
    margin-inline: auto;
}

/* 區塊標題列:左標題右輔助資訊,首頁與作品頁共用。 */
.mzq-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.mzq-section-title {
    font-family: var(--mzq-kai);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 0;
}

/* 主要行動按鈕,磁青底;高度守住 44px 的點擊目標下限。 */
.mzq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 18px;
    border-radius: 3px;
    background: var(--mzq-indigo);
    color: var(--mzq-on-indigo);
    font-size: 15px;
    font-weight: 500;
}

.mzq-btn-full {
    width: 100%;
}

/* 次要按鈕:同尺寸但只留邊框,避免和主按鈕搶視線。 */
.mzq-btn-ghost {
    background: transparent;
    color: var(--mzq-ink);
    border: 1px solid var(--mzq-rule);
}

/* 書封:沒有封面圖時以深色書布漸層加左緣亮邊模擬書脊,見 docs/spec.md §5.1。 */
.mzq-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    border-radius: 2px 4px 4px 2px;
    background: linear-gradient(165deg, #3E5673, #25364A);
    box-shadow: inset 4px 0 0 rgba(255, 255, 255, .14), 0 2px 6px rgba(0, 0, 0, .18);
    flex-shrink: 0;
    overflow: hidden;
}

/* 有封面圖時直接鋪滿,漸層書布只是它的 fallback。 */
.mzq-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 無封面圖時的直排書名,模擬書脊的字。 */
.mzq-cover-title {
    font-family: var(--mzq-kai);
    color: #F4F3EE;
    writing-mode: vertical-rl;
    letter-spacing: 4px;
    font-size: 17px;
}

/* 首頁 */
.mzq-home {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* 主推區:讀者回站的第一個點擊目標,底色用次紙區隔於一般清單。 */
.mzq-feature {
    display: flex;
    gap: 18px;
    padding: 18px;
    border-radius: 4px;
    background: var(--mzq-paper-alt);
}

.mzq-feature .mzq-cover {
    width: 96px;
}

.mzq-feature .mzq-cover-title {
    font-size: 15px;
}

/* 主推區右側資訊欄,min-width:0 讓過長書名能正常截斷而不撐破版面。 */
.mzq-feature-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mzq-feature-eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--mzq-ink-soft);
}

.mzq-feature-title {
    font-family: var(--mzq-kai);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.3;
    margin: 4px 0 2px;
}

.mzq-feature-chapter {
    font-size: 14px;
}

/* 簡介固定兩行,超出以省略號收尾,確保主推區高度可預期。 */
.mzq-feature-summary {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--mzq-ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mzq-feature .mzq-btn {
    margin-top: 12px;
    min-height: 40px;
    padding: 9px 14px;
    font-size: 14px;
    align-self: flex-start;
}

/* 最新更新帳本:日期、作品、章名三欄對齊,像一本流水帳。 */
.mzq-ledger-row {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    gap: 14px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--mzq-rule);
    /* 整列可點,寬鬆的點擊區比只點章名好按。 */
    min-height: 44px;
}

.mzq-ledger-date {
    font-size: 12.5px;
    color: var(--mzq-ink-soft);
    font-variant-numeric: tabular-nums;
}

.mzq-ledger-work {
    font-size: 15px;
}

.mzq-ledger-chapter {
    font-size: 13px;
    color: var(--mzq-ink-soft);
}

/* 24 小時內的更新才標「新」,用硃砂點出唯一的即時感。 */
.mzq-ledger-new {
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--mzq-seal);
}

/* 全部作品:欄數隨寬度自適應,不寫死裝置斷點,見 docs/spec.md §5。 */
.mzq-shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px 16px;
}

.mzq-work-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mzq-work-card-title {
    font-family: var(--mzq-kai);
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 1.3;
}

.mzq-work-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--mzq-ink-soft);
}

/* 作品頁 */
.mzq-work-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* 作品資訊欄:手機是頁面上半段,桌面會變成固定側欄。 */
.mzq-work-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 手機版封面與資訊左右並排,省下一整屏高度讓目錄進第一屏。 */
.mzq-work-head {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.mzq-work-head .mzq-cover {
    width: 108px;
}

.mzq-work-head-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.mzq-work-title {
    font-family: var(--mzq-kai);
    font-size: 27px;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1.25;
    margin: 0;
}

.mzq-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mzq-tag {
    padding: 3px 9px;
    border: 1px solid var(--mzq-rule);
    border-radius: 3px;
    font-size: 12px;
    color: var(--mzq-ink-soft);
}

/* 連載狀態是標籤列裡唯一要被一眼看到的,改用磁青淡底。 */
.mzq-tag-status {
    border-color: transparent;
    background: var(--mzq-indigo-tint);
    color: var(--mzq-indigo);
    font-weight: 500;
}

/* 作品簡介用宋體,與章節內文同一套閱讀質感。 */
.mzq-summary {
    margin: 0;
    font-family: var(--mzq-song);
    font-size: 14.5px;
    line-height: 1.9;
}

/* 上次讀到哪:文字、進度條、百分比一行帶過,資訊來自 localStorage。 */
.mzq-progress-line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--mzq-ink-soft);
    font-variant-numeric: tabular-nums;
}

.mzq-bar {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--mzq-rule);
    overflow: hidden;
}

.mzq-bar span {
    display: block;
    height: 100%;
    background: var(--mzq-indigo);
}

/* 目錄工具列:正序/倒序切換與總章數。 */
.mzq-toc-tools {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--mzq-ink-soft);
}

.mzq-toc-tools .mzq-on {
    color: var(--mzq-ink);
    font-weight: 500;
}

/* 章節列:章號、章名、日期三欄,整列為 44px 以上的點擊目標。 */
.mzq-chapter-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
    min-height: 44px;
    padding: 11px 0;
    border-bottom: 1px solid var(--mzq-rule);
    font-size: 15px;
}

.mzq-chapter-number {
    font-size: 13px;
    color: var(--mzq-ink-soft);
    font-variant-numeric: tabular-nums;
}

.mzq-chapter-date {
    font-size: 12px;
    color: var(--mzq-ink-soft);
    font-variant-numeric: tabular-nums;
}

/* 讀者上次停留的那一列以磁青淡底標示,由 JS 依 localStorage 加上。 */
.mzq-chapter-row.mzq-here {
    margin: 0 -8px;
    padding: 11px 8px;
    border-radius: 3px;
    border-bottom-color: transparent;
    background: var(--mzq-indigo-tint);
}

.mzq-chapter-row.mzq-here .mzq-chapter-number,
.mzq-chapter-row.mzq-here .mzq-chapter-date {
    color: var(--mzq-indigo);
}

/* 章節閱讀頁 */
/* 捲動進度線固定在頁面最頂,寬度由 JS 依捲動比例更新。 */
.mzq-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    width: 0;
    height: 2px;
    background: var(--mzq-indigo);
}

.mzq-chapter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0 2px;
}

.mzq-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: 13.5px;
    color: var(--mzq-ink-soft);
}

/* 章名區依書頁版心邏輯由上而下排列,見 docs/spec.md §2。 */
.mzq-chapter-title-block {
    padding-top: 6px;
}

.mzq-chapter-vol {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--mzq-ink-soft);
}

/* 章名區的 h1:章號與章名分兩行,但語意上仍是同一個標題。 */
.mzq-chapter-heading {
    margin: 0;
    font-weight: 400;
}

.mzq-chapter-num {
    display: block;
    font-family: var(--mzq-kai);
    font-size: 26px;
    letter-spacing: 2px;
    line-height: 1.3;
    margin-top: 8px;
}

.mzq-chapter-name {
    display: block;
    font-family: var(--mzq-kai);
    font-size: 20px;
    letter-spacing: 1px;
    margin-top: 2px;
}

/* 32px 短墨線收住章名區,再往下才是內文。 */
.mzq-rule {
    width: 32px;
    height: 1px;
    background: var(--mzq-ink);
    margin: 18px 0 22px;
}

/* 內文:宋體、不縮排、段距 1.1em,字級與行高吃閱讀偏好的變數。 */
.mzq-prose {
    font-family: var(--mzq-song);
    font-size: var(--mzq-prose-size);
    line-height: var(--mzq-prose-line);
}

.mzq-prose p {
    margin: 0 0 1.1em;
    text-indent: 0;
}

/* 章末兩張並排導覽卡,把「讀完就斷」的斷點接起來。 */
.mzq-end-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 28px;
}

.mzq-end-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 84px;
    padding: 14px;
    border: 1px solid var(--mzq-rule);
    border-radius: 4px;
}

.mzq-end-card small {
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--mzq-ink-soft);
}

.mzq-end-card b {
    font-size: 15px;
    font-weight: 400;
}

/* 最新章的「下一章」不是連結而是狀態說明,改灰底並弱化文字。 */
.mzq-end-card.mzq-pending {
    border-color: transparent;
    background: var(--mzq-paper-alt);
}

.mzq-end-card.mzq-pending b {
    color: var(--mzq-ink-soft);
}

/* 追更提示的版位:Phase 4 開放登入後才會顯示,現在先留樣式不渲染。 */
.mzq-notify {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 4px;
    background: var(--mzq-indigo-tint);
    color: var(--mzq-indigo);
    font-size: 13.5px;
}

/* 章末的次要連結列:回目錄與分享。 */
.mzq-chapter-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding-bottom: 72px;
    font-size: 13px;
    color: var(--mzq-ink-soft);
}

/* 需要腳本才能運作的動作(分享)用原生 button,但外觀維持與旁邊的文字連結一致。 */
.mzq-link-button {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

/* 閱讀偏好膠囊固定在底部拇指區,點內文即隱藏,見 docs/spec.md §2。 */
.mzq-pill {
    position: fixed;
    left: 50%;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    border: 1px solid var(--mzq-rule);
    border-radius: 30px;
    background: var(--mzq-paper-alt);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    font-size: 14px;
}

/* 膠囊上的每個控制項都是原生按鈕,無 JS 時整條膠囊不會被顯示出來。 */
.mzq-pill button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: 0 4px;
    border: none;
    border-radius: 16px;
    background: transparent;
    color: var(--mzq-ink);
    font-family: inherit;
    cursor: pointer;
}

/* 目前生效的檔位以磁青淡底標示,讓讀者知道自己選了哪一檔。 */
.mzq-pill button[aria-pressed="true"] {
    background: var(--mzq-indigo-tint);
    color: var(--mzq-indigo);
}

.mzq-pill-sep {
    width: 1px;
    height: 18px;
    background: var(--mzq-rule);
}

/* 底色切換用實際色塊呈現,比文字標籤直觀。 */
.mzq-swatch-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--mzq-rule);
}

.mzq-pill button.mzq-swatch-dot[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--mzq-indigo);
}

/* 會員入口與登入面板 */
/* 線條圖示共用外觀,尺寸與線寬統一才不會在 header 裡顯得雜亂。 */
.mzq-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 未登入的入口:手機只放人像圖示,桌面換成邊框按鈕。 */
.mzq-login-entry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--mzq-ink-soft);
}

/* 手機優先:預設隱藏文字版,只留圖示。 */
.mzq-login-entry-text {
    display: none;
}

/* 已登入的帳號區塊,用 details 承載下拉選單,無腳本也能展開。 */
.mzq-account {
    position: relative;
}

/* 暱稱首字頭像,同時是 details 的觸發點,拿掉原生三角形箭頭。 */
.mzq-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mzq-indigo-tint);
    color: var(--mzq-indigo);
    font-size: 15px;
    cursor: pointer;
    list-style: none;
}

/* Safari 的 summary 用另一個偽元素畫箭頭,一併關掉。 */
.mzq-avatar::-webkit-details-marker {
    display: none;
}

/* 下拉選單浮在頁面內容之上,靠右對齊頭像。 */
.mzq-account-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    width: 220px;
    padding: 6px 0;
    border: 1px solid var(--mzq-rule);
    border-radius: 4px;
    background: var(--mzq-paper);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
    font-size: 14.5px;
}

/* 選單最上方顯示登入的 Email,與下方動作以界行分隔。 */
.mzq-account-who {
    padding: 10px 16px;
    border-bottom: 1px solid var(--mzq-rule);
    font-size: 12.5px;
    color: var(--mzq-ink-soft);
    /* Email 可能很長,超出寬度就截斷而不是撐破選單。 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 選單項目統一內距,並守住 44px 的點擊目標。 */
.mzq-account-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    text-align: left;
}

/* 覆蓋視窗:登入不該把讀者從正在看的那一章帶走,所以蓋在畫面上。 */
.mzq-modal {
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 24px;
    border: 1px solid var(--mzq-rule);
    border-radius: 6px;
    background: var(--mzq-paper);
    color: var(--mzq-ink);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    overflow-y: auto;
}

/* 背幕壓暗底下的內容,讓視線集中在視窗上。 */
.mzq-modal::backdrop {
    background: rgba(0, 0, 0, .45);
}

/* 關閉鈕放右上角,尺寸同樣守住點擊目標下限。 */
.mzq-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    color: var(--mzq-ink-soft);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* 登入面板本體,覆蓋視窗與 /login 退路頁共用。 */
.mzq-login-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mzq-login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mzq-login-heading {
    font-family: var(--mzq-kai);
    font-size: 22px;
    letter-spacing: 1px;
}

/* 三項好處先講清楚登入能多得到什麼,再放表單。 */
.mzq-benefits {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mzq-benefits li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: start;
    font-size: 14px;
}

/* 好處清單的圖示用磁青,和內文的墨色區隔。 */
.mzq-benefits .mzq-icon {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    stroke: var(--mzq-indigo);
}

/* 每項好處的補充說明另起一行,字級降到最小級距。 */
.mzq-benefits small {
    display: block;
    font-size: 12.5px;
    color: var(--mzq-ink-soft);
}

.mzq-login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mzq-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    letter-spacing: 1px;
    color: var(--mzq-ink-soft);
}

/* 輸入框高度 46px,手指按得到;色彩全部走主題變數,夜間模式一起變。 */
.mzq-input {
    height: 46px;
    padding: 0 12px;
    border: 1px solid var(--mzq-rule);
    border-radius: 3px;
    background: var(--mzq-paper);
    color: var(--mzq-ink);
    font-family: inherit;
    font-size: 15px;
    letter-spacing: 0;
}

/* 對焦時以磁青描邊,鍵盤操作看得出焦點在哪。 */
.mzq-input:focus-visible {
    outline: 2px solid var(--mzq-indigo);
    outline-offset: 1px;
}

/* 登入失敗訊息用硃砂,是全站唯一允許硃砂出現在提示文字的例外。 */
.mzq-login-error {
    margin: 0;
    padding: 10px 12px;
    border-radius: 3px;
    background: var(--mzq-paper-alt);
    color: var(--mzq-seal);
    font-size: 13px;
}

/* 頁尾細則:明講不登入也能讀,匿名優先不因為有了會員而改變。 */
.mzq-fine {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--mzq-ink-soft);
}

/* /login 退路頁把面板置中,視覺上與覆蓋視窗一致。 */
.mzq-login-page {
    padding-top: 24px;
}

/* 桌面加寬:768px 以上才長出側欄與雙欄目錄,行動版維持單欄,見 docs/spec.md §5「斷點原則」。 */
@media (min-width: 768px) {
    /* 桌面空間夠,登入入口改回設計稿的文字邊框按鈕。 */
    .mzq-login-entry {
        padding: 7px 14px;
        border: 1px solid var(--mzq-ink);
        border-radius: 3px;
        color: var(--mzq-ink);
        font-size: 14px;
    }

    .mzq-login-entry-text {
        display: inline;
    }

    /* 有了文字就不需要人像圖示,兩者只留一個。 */
    .mzq-login-entry-icon {
        display: none;
    }

    /* 主推區與全部作品佔主欄,最新更新退為右側 360px 帳本欄,見 docs/spec.md §1.1。 */
    .mzq-home {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        column-gap: 56px;
        row-gap: 40px;
        align-items: start;
    }

    .mzq-home-feature {
        grid-column: 1;
        grid-row: 1;
    }

    .mzq-home-shelf {
        grid-column: 1;
        grid-row: 2;
    }

    /* 帳本欄跨滿兩列,視覺上與左側主欄等高起頭。 */
    .mzq-home-ledger {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    /* 帳本欄只有 360px,章名換行到作品名下方才不會被擠成兩三個字一行。 */
    .mzq-home-ledger .mzq-ledger-chapter {
        display: block;
    }

    .mzq-feature {
        padding: 28px;
        gap: 28px;
    }

    .mzq-feature .mzq-cover {
        width: 150px;
    }

    .mzq-feature .mzq-cover-title {
        font-size: 20px;
    }

    .mzq-feature-title {
        font-size: 34px;
        margin-top: 8px;
    }

    .mzq-feature-summary {
        font-size: 14.5px;
        max-width: 34em;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .mzq-shelf {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 28px 24px;
    }

    /* 作品頁改為固定側欄加目錄主欄。 */
    .mzq-work-page {
        display: flex;
        flex-direction: row;
        gap: 72px;
        align-items: flex-start;
    }

    .mzq-work-side {
        width: 280px;
        flex-shrink: 0;
        gap: 16px;
    }

    /* 桌面側欄改為封面在上、書名資訊在下的直向堆疊,不再左右並排。 */
    .mzq-work-head {
        flex-direction: column;
        gap: 16px;
    }

    .mzq-work-head .mzq-cover {
        width: 200px;
    }

    .mzq-work-head .mzq-cover-title {
        font-size: 22px;
    }

    .mzq-work-side .mzq-work-title {
        font-size: 32px;
    }

    .mzq-work-toc {
        flex: 1;
        min-width: 0;
    }

    /* 目錄雙欄,章節列本身的欄位配置不變。 */
    .mzq-toc-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 40px;
    }
}