/* ==========================================================================
   app.css —— 应用外壳：顶栏、工作区（大纲 / 编辑器 / 预览）、弹层、状态栏、响应式。
   预览区的 Markdown 排版在 markdown.css；主题变量在 themes.css（由 themes.mjs 生成）。
   ========================================================================== */

/* ---------- 字体（本地托管，见 scripts/build.js） ---------- */
@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter Variable';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-wght-italic.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono Variable';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('/assets/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono Variable';
    font-style: italic;
    font-weight: 100 800;
    font-display: swap;
    src: url('/assets/fonts/jetbrains-mono-latin-wght-italic.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Source Serif 4 Variable';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('/assets/fonts/source-serif-4-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Source Serif 4 Variable';
    font-style: italic;
    font-weight: 200 900;
    font-display: swap;
    src: url('/assets/fonts/source-serif-4-latin-wght-italic.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 全局 ---------- */
:root {
    --font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
    --font-serif: 'Source Serif 4 Variable', Georgia, 'Songti SC', 'Noto Serif SC', 'SimSun', serif;
    --font-mono: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    /* 阅读设置（settings 弹层写到 <html> 上） */
    --md-font: var(--font-sans);
    --md-size: 16px;
    --md-width: 860px;
    --editor-size: 14px;

    --radius: 8px;
    --shadow: 0 10px 30px -10px rgba(0, 0, 0, .35), 0 2px 8px -2px rgba(0, 0, 0, .2);
    --topbar-h: 48px;
    --statusbar-h: 28px;
    --pane-head-h: 34px;
}
:root[data-md-font="serif"] { --md-font: var(--font-serif); }
:root[data-md-font="mono"]  { --md-font: var(--font-mono); }
:root[data-md-size="s"]  { --md-size: 14px; }
:root[data-md-size="m"]  { --md-size: 16px; }
:root[data-md-size="l"]  { --md-size: 18px; }
:root[data-md-size="xl"] { --md-size: 20px; }
:root[data-md-width="narrow"] { --md-width: 680px; }
:root[data-md-width="normal"] { --md-width: 860px; }
:root[data-md-width="wide"]   { --md-width: 1100px; }
:root[data-md-width="full"]   { --md-width: 100%; }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body.is-app { height: 100dvh; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--fg);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.is-app { display: flex; flex-direction: column; overflow: hidden; position: fixed; inset: 0; height: auto; width: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--link); }
::selection { background: var(--selection); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 70%, transparent); background-clip: padding-box; border: 2px solid transparent; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- 顶栏 ---------- */
.topbar {
    flex: none;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 30;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    color: var(--heading);
    text-decoration: none;
    font-weight: 650;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.brand svg { width: 22px; height: 22px; color: var(--accent); }
.brand-tld { color: var(--muted); font-weight: 450; }
h1.brand-text { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.noscript { padding: 16px 20px; background: var(--mark); color: #333; font-size: 14px; }
.noscript p { margin: 0; }
.tb-spacer { flex: 1; }
.tb-divider { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.tb-group { display: inline-flex; align-items: center; gap: 2px; position: relative; }

.tb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--fg);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: background-color .12s ease, color .12s ease;
}
.tb-btn:hover { background: var(--code-bg); }
.tb-btn.is-active, .tb-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.tb-btn svg { width: 16px; height: 16px; flex: none; }
.tb-btn .caret { width: 12px; height: 12px; opacity: .6; margin-left: -2px; }
.tb-btn.is-icon { padding: 0 7px; }
.tb-btn.is-primary { background: var(--accent); color: var(--accent-fg); }
.tb-btn.is-primary:hover { filter: brightness(1.08); }
.tb-label { font-weight: 500; }

/* 分段控制（Editor / Split / Preview） */
.seg {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg);
}
.seg button {
    height: 26px;
    padding: 0 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.seg button svg { width: 15px; height: 15px; }
.seg button.is-active { background: var(--panel); color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

/* 下拉菜单 */
.menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    width: max-content;             /* 按最长的菜单项撑开，文本不换行（越南语 / 德语 / 葡语更长） */
    max-width: min(420px, calc(100vw - 20px));
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--elev);
    box-shadow: var(--shadow);
    z-index: 40;
}
.menu.is-right { left: auto; right: 0; }
.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    text-align: left;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
    cursor: pointer;
}
.menu-item:hover { background: var(--code-bg); }
.menu-item svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.menu-item kbd { margin-left: auto; }
.menu-item:has(kbd) { padding-right: 12px; }
.menu-item { flex-wrap: wrap; }
.menu-item .menu-sub { flex-basis: 100%; margin-top: -2px; padding-left: 26px; font-size: 12px; color: var(--muted); white-space: normal; } /* 第二行，与标签对齐（图标 16 + 间距 10） */
.menu-sep { height: 1px; margin: 6px 4px; background: var(--border-muted); }
.menu-title { padding: 6px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
kbd {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--bg);
    color: var(--muted);
}

/* 主题选择器 */
.theme-menu { width: 560px; max-width: calc(100vw - 20px); padding: 10px; }
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.theme-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--border-muted);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.theme-card:hover { border-color: var(--muted); }
.theme-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-card .name { font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.theme-card .name svg { width: 14px; height: 14px; color: var(--accent); margin-left: auto; }
.theme-swatch {
    height: 46px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, .12);
    padding: 7px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}
.theme-swatch i { display: block; height: 4px; border-radius: 2px; }
.theme-swatch .l1 { width: 55%; height: 6px; }
.theme-swatch .l2 { width: 90%; opacity: .7; }
.theme-swatch .l3 { width: 70%; opacity: .7; }
.theme-swatch .code { display: flex; gap: 3px; margin-top: auto; }
.theme-swatch .code i { width: 12px; }
.theme-system {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-muted);
    border-radius: 8px;
    background: transparent;
    width: 100%;
    cursor: pointer;
    text-align: left;
}
.theme-system:hover { border-color: var(--muted); }
.theme-system.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-system svg { width: 16px; height: 16px; color: var(--muted); }
.theme-system .sub { color: var(--muted); font-size: 12px; margin-left: auto; }

/* 阅读设置 */
.settings-menu { width: max-content; min-width: 320px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 10px; }
.settings-row > span { font-size: 13px; color: var(--muted); white-space: nowrap; }
.settings-row .seg { flex: none; }
.settings-row .seg button { white-space: nowrap; }
.settings-row .seg button { height: 24px; padding: 0 9px; font-size: 12px; }
.settings-row .switch { margin-left: auto; }

/* 开关 */
.switch {
    position: relative;
    width: 34px;
    height: 20px;
    border: 0;
    border-radius: 999px;
    background: var(--border);
    cursor: pointer;
    padding: 0;
    flex: none;
    transition: background-color .15s ease;
}
.switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: transform .15s ease;
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(14px); }

/* ---------- 工作区 ---------- */
.workspace { flex: 1; display: flex; min-height: 0; position: relative; }
.panes { flex: 1; display: flex; min-width: 0; min-height: 0; }

.pane { flex: 1 1 50%; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); }
.pane-editor { flex-basis: var(--split, 50%); flex-grow: 0; flex-shrink: 0; }
.pane-preview { flex: 1 1 auto; }
body[data-view="editor"] .pane-preview, body[data-view="editor"] .splitter { display: none; }
body[data-view="editor"] .pane-editor { flex-basis: 100%; }
body[data-view="preview"] .pane-editor, body[data-view="preview"] .splitter { display: none; }

.pane-head {
    flex: none;
    height: var(--pane-head-h);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px 0 14px;
    border-bottom: 1px solid var(--border-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--panel);
}
.pane-head .ph-title { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; }
.pane-head .ph-meta { font-weight: 450; letter-spacing: 0; text-transform: none; color: var(--subtle); }
.ph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.ph-btn:hover { background: var(--code-bg); color: var(--fg); }
.ph-btn.is-active { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ph-btn svg { width: 15px; height: 15px; }
.ph-sep { width: 1px; height: 16px; background: var(--border-muted); margin: 0 3px; }

/* 编辑器 */
.editor-wrap { flex: 1; position: relative; min-height: 0; }
.editor, .editor-mirror {
    width: 100%;
    margin: 0;
    padding: 20px 24px 50vh;
    border: 0;
    font-family: var(--font-mono);
    font-size: var(--editor-size);
    line-height: 1.65;
    tab-size: 4;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    color: var(--fg);
    background: var(--panel);
    caret-color: var(--accent);
}
.editor {
    height: 100%;
    resize: none;
    outline: none;
    overflow: auto;
    display: block;
}
.editor::placeholder { color: var(--subtle); }
.editor-mirror {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
}
.editor-mirror span { display: block; min-height: 1.65em; }
.editor-mirror .padtop { min-height: 0; height: 0; }

/* 分隔条 */
.splitter {
    flex: none;
    width: 6px;
    margin: 0 -1px;
    cursor: col-resize;
    touch-action: none;
    background: var(--border);
    background-clip: content-box;
    padding: 0 2px;
    position: relative;
    z-index: 5;
    transition: background-color .12s ease;
}
.splitter:hover, .splitter.is-dragging { background-color: var(--accent); background-clip: content-box; }
body.is-resizing { cursor: col-resize; user-select: none; }
body.is-resizing iframe, body.is-resizing .editor { pointer-events: none; }

/* 预览 */
.preview-scroll { flex: 1; overflow: auto; overscroll-behavior: contain; scroll-behavior: auto; }
.preview-inner { padding: 36px 40px 40vh; }
.markdown-body { max-width: var(--md-width); margin: 0 auto; }
body[data-view="preview"] .preview-inner { padding-top: 44px; padding-bottom: 15vh; }
.preview-empty {
    max-width: var(--md-width);
    margin: 10vh auto 0;
    text-align: center;
    color: var(--muted);
}
.preview-empty svg { width: 48px; height: 48px; opacity: .4; margin-bottom: 12px; }
.preview-empty p { margin: 4px 0; }

/* 大纲 */
.outline {
    flex: none;
    width: 240px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--border);
    background: var(--panel);
}
.outline .pane-head { padding-left: 14px; }
.outline-list { flex: 1; overflow: auto; padding: 8px 8px 24px; margin: 0; list-style: none; }
.outline-list a {
    display: block;
    padding: 4px 8px;
    border-radius: 5px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.outline-list a:hover { background: var(--code-bg); color: var(--fg); }
.outline-list a.is-active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.outline-list [data-level="1"] a { font-weight: 600; color: var(--fg); }
.outline-list [data-level="2"] a { padding-left: 16px; }
.outline-list [data-level="3"] a { padding-left: 28px; }
.outline-list [data-level="4"] a { padding-left: 40px; }
.outline-list [data-level="5"] a { padding-left: 52px; }
.outline-list [data-level="6"] a { padding-left: 64px; }
.outline-empty { padding: 20px 14px; font-size: 13px; color: var(--subtle); }

/* ---------- 状态栏 ---------- */
.statusbar {
    flex: none;
    height: var(--statusbar-h);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    border-top: 1px solid var(--border);
    background: var(--panel);
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
}
.statusbar .sb-spacer { flex: 1; }
.statusbar a { color: var(--muted); text-decoration: none; }
.statusbar a:hover { color: var(--fg); }
@media (max-width: 1100px) { .statusbar .sb-guide { display: none; } } /* 状态栏里的指南链接窄屏时先让位（手机抽屉里都有） */
.statusbar .sb-saved { display: inline-flex; align-items: center; gap: 5px; }
.statusbar .sb-saved::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--alert-tip); }
.statusbar .sb-saved.is-dirty::before { background: var(--alert-warning); }

/* ---------- 拖放遮罩 ---------- */
.drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    backdrop-filter: blur(2px);
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}
.drop-overlay.is-visible { opacity: 1; }
.drop-overlay > div {
    padding: 40px 60px;
    border: 2px dashed var(--accent);
    border-radius: 16px;
    background: var(--panel);
    font-size: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 14px;
}
.drop-overlay svg { width: 32px; height: 32px; color: var(--accent); }

/* ---------- 对话框 ---------- */
dialog.dlg {
    width: min(560px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--elev);
    color: var(--fg);
    box-shadow: var(--shadow);
}
dialog.dlg::backdrop { background: rgba(0, 0, 0, .45); }
dialog.dlg.is-wide { width: min(880px, calc(100vw - 32px)); }
.dlg-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px 0; }
.dlg-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.dlg-head .ph-btn { margin-left: auto; }
.dlg-body { padding: 14px 20px 20px; }
.dlg-body p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.dlg-body p:last-child { margin-bottom: 0; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.field {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--panel);
    color: var(--fg);
    font: inherit;
    outline: none;
}
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--panel);
    color: var(--fg);
    cursor: pointer;
    font-weight: 500;
    text-decoration: none; /* <a class="btn"> 也不带下划线 */
}
.btn:hover { background: var(--code-bg); }
.btn.is-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.is-primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn svg { width: 15px; height: 15px; }
.dlg-error { margin-top: 10px; color: var(--alert-caution); font-size: 13px; }

/* 帮助（速查表） */
.cheat { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; font-size: 13px; }
.cheat > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--border-muted); }
.cheat code { font-family: var(--font-mono); font-size: 12px; background: var(--code-bg); padding: 1px 6px; border-radius: 4px; }
.cheat .k { color: var(--muted); }
.dlg-section { margin: 14px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.share-link { display: flex; gap: 8px; }
.share-link .field { flex: 1; font-family: var(--font-mono); font-size: 12px; }

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 44px;
    transform: translate(-50%, 20px);
    z-index: 120;
    padding: 9px 16px;
    border-radius: 8px;
    background: var(--heading);
    color: var(--panel);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    max-width: calc(100vw - 32px);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error { background: var(--alert-caution); color: #fff; }

/* ---------- 静态页（About / Privacy） ---------- */
.page-wrap { max-width: 760px; margin: 0 auto; padding: 48px 24px 80px; }
.page-wrap .markdown-body { max-width: none; }
.page-foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border-muted); color: var(--muted); font-size: 13px; }
.page-foot-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; }
.page-foot-nav a { color: var(--muted); text-decoration: none; }
.page-foot-nav a:hover { color: var(--fg); }

/* ---------- 落地页（templates/_landing.php） ---------- */
body.is-landing { display: block; height: auto; overflow: auto; }
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.site-header-inner, .site-footer-inner { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.site-header-inner { display: flex; align-items: center; gap: 18px; height: 56px; }
.site-header .brand { font-size: 15px; }
.site-header .brand svg { width: 24px; height: 24px; }
.site-nav { display: flex; gap: 4px; margin-left: 8px; }
.site-nav a { padding: 6px 10px; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.site-nav a:hover { color: var(--fg); background: var(--code-bg); }
.site-nav a[aria-current="page"] { color: var(--accent); }
.site-header .btn { margin-left: auto; }

.landing { max-width: 1040px; margin: 0 auto; padding: 0 20px 40px; }
.landing-hero { padding: 56px 0 40px; text-align: center; max-width: 760px; margin: 0 auto; }
.crumbs { font-size: 13px; color: var(--subtle); margin-bottom: 18px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs span { margin: 0 4px; }
.landing-hero h1 { margin: 0 0 16px; font-family: var(--heading-font); font-size: clamp(30px, 5vw, 46px); line-height: 1.12; letter-spacing: -.02em; color: var(--heading); }
.landing-hero .lead { margin: 0 auto 26px; font-size: 18px; line-height: 1.6; color: var(--muted); }
.landing-hero .lead code, .landing-section code, .feature code { font-family: var(--font-mono); font-size: .9em; background: var(--code-bg); padding: .1em .35em; border-radius: 4px; }
.hero-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin: 16px 0 0; font-size: 13px; color: var(--subtle); }
.btn.is-lg { height: 44px; padding: 0 22px; font-size: 15px; text-decoration: none; }
.landing .btn { text-decoration: none; }

.landing-section { max-width: 760px; margin: 0 auto; padding: 28px 0; border-top: 1px solid var(--border-muted); }
.landing-section.is-wide { max-width: 760px; } /* 截图区与正文同宽（曾是 1000px，比上下段落宽出一截） */

/* 截图 */
.shot-hero { margin: 8px auto 44px; max-width: 760px; }
.shot-hero a { display: block; }
.shot-hero img, .shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45), 0 10px 24px -14px rgba(0, 0, 0, .25); background: var(--panel); }
.shot-hero figcaption, .shot figcaption { margin-top: 12px; text-align: center; font-size: 14px; color: var(--muted); }
.shot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 20px; align-items: start; }
.shot { margin: 0; }
.shot img { border-radius: 10px; }
.shot.is-phone img { width: min(100%, 240px); margin: 0 auto; border-radius: 22px; }
.shot figcaption { text-align: left; }
.shot a, .shot-hero a { display: block; cursor: zoom-in; }
/* 截图灯箱：点缩略图放大（_landing-bottom.php 里的小脚本） */
.lightbox { position: fixed; inset: 0; margin: auto; padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: fit-content; height: fit-content; overflow: visible; } /* 居中：宽高按内容，margin auto */
.lightbox-close { position: fixed; top: 16px; right: 16px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; transition: background-color .12s; }
.lightbox-close:hover { background: rgba(255, 255, 255, .18); }
.lightbox-close svg { width: 18px; height: 18px; }
.lightbox::backdrop { background: rgba(0, 0, 0, .78); backdrop-filter: blur(4px); }
.lightbox img { display: block; max-width: min(96vw, 1600px); max-height: 92vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); cursor: zoom-out; }
.lightbox figcaption { margin-top: 10px; text-align: center; color: #fff; font-size: 14px; opacity: .85; }
.shot.is-phone figcaption { text-align: center; }
@media (max-width: 720px) {
    .shot-grid { grid-template-columns: 1fr; gap: 24px; }
    .shot-hero { margin-bottom: 28px; }
    .shot-hero img { border-radius: 8px; }
}
.landing-section.markdown-body { font-size: 16.5px; }
.landing-section.markdown-body h2 { margin-top: 0; border: 0; padding: 0; font-size: 1.55em; }
.section-title { margin: 0 0 20px; font-family: var(--heading-font); font-size: 25px; letter-spacing: -.015em; color: var(--heading); }
.landing td code { white-space: pre-wrap; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.steps li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.55; }
.step-n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-weight: 650; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.steps code { font-family: var(--font-mono); font-size: .9em; background: var(--code-bg); padding: .1em .35em; border-radius: 4px; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.feature { padding: 16px 18px; border: 1px solid var(--border-muted); border-radius: 10px; background: color-mix(in srgb, var(--fg) 2.5%, transparent); }
.feature h3 { margin: 0 0 6px; font-size: 15px; color: var(--heading); }
.feature p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

.faq details { border: 1px solid var(--border-muted); border-radius: 10px; margin-bottom: 8px; background: color-mix(in srgb, var(--fg) 2%, transparent); }
.faq summary { padding: 14px 18px; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; color: var(--heading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ''; width: .45em; height: .45em; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .15s ease; flex: none; }
.faq details[open] > summary::before { transform: rotate(45deg); }
.faq-a { padding: 0 18px 16px 42px; color: var(--muted); line-height: 1.6; }

.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.related-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--border-muted); border-radius: 10px; text-decoration: none; color: inherit; transition: border-color .12s ease; }
.related-card:hover { border-color: var(--accent); }
.related-card strong { color: var(--heading); }
.related-card span { font-size: 13.5px; color: var(--muted); }

.landing-cta { margin: 36px auto 0; max-width: 760px; padding: 40px 24px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); text-align: center; }
.landing-cta h2 { margin: 0 0 8px; font-family: var(--heading-font); font-size: 26px; color: var(--heading); }
.landing-cta p { margin: 0 auto 20px; max-width: 520px; color: var(--muted); }

.site-footer { border-top: 1px solid var(--border-muted); padding: 28px 0 40px; color: var(--muted); font-size: 13px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--fg); }
.site-footer p { margin: 0; }

@media (max-width: 720px) {
    .site-nav { display: none; }
    .site-header-inner { height: 52px; }
    .landing-hero { padding: 36px 0 28px; }
    .feature-grid, .related-grid { grid-template-columns: 1fr; }
    .landing-section { padding: 22px 0; }
    .faq-a { padding-left: 18px; }
}

/* ---------- 响应式 ---------- */
.mobile-only { display: none !important; }

/* 手机底栏（≤720px 才显示，见下） */
.mobile-bar {
    flex: none;
    display: flex;
    align-items: stretch;
    height: calc(56px + env(safe-area-inset-bottom));
    padding: 0 4px env(safe-area-inset-bottom);
    background: var(--panel);
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 30;
}
.mobile-bar > button, .mobile-bar .tb-group > button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 56px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mobile-bar .tb-group { flex: 1; display: flex; position: static; }
.mobile-bar svg { width: 22px; height: 22px; }
.mobile-bar button.is-active, .mobile-bar button[aria-expanded="true"] { color: var(--accent); }
.mobile-bar button:active { background: var(--code-bg); }

/* 大纲浮层的遮罩（≤900px） */
.outline-backdrop { display: none; }

@media (max-width: 900px) {
    .theme-grid { grid-template-columns: repeat(2, 1fr); }
    .tb-label.is-optional { display: none; }
    .outline { position: absolute; inset: 0 auto 0 0; z-index: 25; width: min(300px, 84vw); box-shadow: var(--shadow); }
    .outline-backdrop { display: block; position: absolute; inset: 0; z-index: 24; background: rgba(0, 0, 0, .35); }
    .outline-backdrop[hidden] { display: none; }
    .outline-list a { padding: 8px 10px; font-size: 14px; }
}

@media (max-width: 720px) {
    :root { --topbar-h: 50px; }
    .mobile-only { display: flex !important; }
    .desktop-only { display: none !important; }

    /* 顶栏只留品牌 + 主题 + 设置；打开 / 导出 / 分享 / 布局 / 帮助都搬到底栏 */
    .topbar { padding: 0 8px 0 6px; gap: 4px; }
    .topbar .tb-divider, #mv-share, #mv-lang, #mv-help, #mv-view,
    .topbar [data-menu="open"], .topbar [data-menu="save"] { display: none; }
    .topbar [data-menu="open"] + .menu, .topbar [data-menu="save"] + .menu { display: none !important; }
    .tb-btn { height: 36px; padding: 0 10px; }
    .tb-btn .tb-label { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }

    /* 弹层改成贴着顶栏的全宽面板 */
    .topbar .menu, .topbar .menu.is-right {
        position: fixed;
        left: 8px;
        right: 8px;
        top: calc(var(--topbar-h) + 6px);
        width: auto;
        max-width: none;
        max-height: calc(100dvh - var(--topbar-h) - 80px);
        overflow: auto;
    }
    .theme-menu { padding: 10px; }
    .theme-swatch { height: 40px; }
    .settings-row { padding: 9px 10px; }
    .settings-row .seg button { height: 30px; padding: 0 12px; font-size: 13px; }
    .menu-item { padding: 12px 12px; font-size: 15px; }

    /* 底栏「更多」= 底部抽屉 */
    .menu.is-sheet {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(64px + env(safe-area-inset-bottom));
        top: auto;
        max-height: calc(100dvh - 140px);
        overflow: auto;
        padding: 4px 8px 10px;
        border-radius: 14px;
    }
    .sheet-grip { width: 36px; height: 4px; margin: 6px auto 8px; border-radius: 2px; background: var(--border); }
    .menu.is-sheet .menu-title { padding-top: 10px; }
    .menu.is-sheet a.menu-item { color: inherit; text-decoration: none; }

    /* 手机上只显示一个面板：split 显示预览 */
    body[data-view="split"] .pane-editor, body[data-view="split"] .splitter { display: none; }
    .statusbar { display: none; }

    /* 面板头：大触控目标，格式工具栏可横向滑动 */
    :root { --pane-head-h: 42px; }
    .pane-head { padding: 0 6px 0 12px; gap: 2px; }
    .ph-btn { width: 36px; height: 36px; }
    .ph-btn svg { width: 17px; height: 17px; }
    .pane-editor .pane-head { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .pane-editor .pane-head::-webkit-scrollbar { display: none; }
    .pane-head .ph-title { flex: none; }
    .ph-name { width: 120px; max-width: none; font-size: 16px; }
    #mv-sync-toggle { display: none; }

    /* 输入控件 ≥16px，避免 iOS 聚焦时自动放大页面 */
    .editor, .editor-mirror { font-size: max(16px, var(--editor-size)); padding: 14px 16px 30vh; line-height: 1.6; }
    .editor-mirror span { min-height: 1.6em; }
    .field { height: 44px; font-size: 16px; }
    .btn { height: 42px; }

    .preview-inner { padding: 20px 16px 25vh; }
    body[data-view="preview"] .preview-inner { padding-top: 20px; padding-bottom: 25vh; }
    .markdown-body { font-size: max(16px, var(--md-size)); }
    .preview-empty { margin-top: 6vh; padding: 0 12px; }

    .cheat { grid-template-columns: 1fr; }
    .cheat > div { flex-wrap: wrap; }
    dialog.dlg { width: calc(100vw - 24px); max-height: calc(100dvh - 40px); }
    .dlg-body { padding: 12px 16px 16px; overflow: auto; max-height: calc(100dvh - 120px); }
    .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
    .drop-overlay > div { padding: 28px 24px; font-size: 16px; }
}

/* 横屏手机：底栏更矮 */
@media (max-width: 720px) and (max-height: 450px) {
    .mobile-bar { height: calc(46px + env(safe-area-inset-bottom)); }
    .mobile-bar > button, .mobile-bar .tb-group > button { height: 46px; flex-direction: row; gap: 6px; }
    .mobile-bar svg { width: 18px; height: 18px; }
}

/* ---------- 打印：只留预览 ---------- */
@media print {
    body.is-app { display: block; overflow: visible; height: auto; background: #fff; color: #000; }
    .topbar, .statusbar, .mobile-bar, .outline, .outline-backdrop, .pane-editor, .splitter, .pane-head, .drop-overlay, .toast, .menu, dialog { display: none !important; }
    .pane-preview { display: block; }
    .preview-scroll { overflow: visible; }
    .preview-inner { padding: 0; }
    .markdown-body { max-width: none; }
    .code-block .code-copy { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* 编辑器面板头部的文件名输入框 */
.ph-name {
    width: 180px;
    max-width: 40vw;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fg);
    outline: none;
}
.ph-name:hover { background: var(--code-bg); }
.ph-name:focus { border-color: var(--accent); background: var(--panel); }

/* ---------- 语言切换 ---------- */
/* viewer 顶栏的语言菜单（分享按钮右侧）：两列，9 种语言不至于太长 */
.lang-menu-items { display: grid; grid-template-columns: 1fr 1fr; min-width: 260px; }
.lang-menu-items .menu-item { min-width: 0; }
.lang-switch { display: inline-flex; gap: 2px; margin-left: auto; padding: 2px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); }
.lang-switch a { padding: 4px 9px; border-radius: 5px; font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.lang-switch a:hover { color: var(--fg); }
.lang-switch a[aria-current="true"] { background: var(--panel); color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.site-header .lang-switch { margin-left: auto; }
.site-header .lang-switch + .btn { margin-left: 0; }
.site-footer .lang-switch { margin: 0 0 12px; }
.site-footer .lang-switch { flex-wrap: wrap; }
/* 紧凑下拉（站点头部 / 静态页导航，9 种语言排不下一排药丸） */
.lang-menu { position: relative; margin-left: auto; }
.lang-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap; user-select: none; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary svg { width: 14px; height: 14px; }
.lang-menu summary:hover, .lang-menu[open] summary { color: var(--fg); }
.lang-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; min-width: 150px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.lang-menu-list a { padding: 6px 10px; border-radius: 5px; font-size: 13px; color: var(--fg); text-decoration: none; white-space: nowrap; }
.lang-menu-list a:hover { background: var(--code-bg); }
.lang-menu-list a[aria-current="true"] { color: var(--accent); }
.lang-menu-list a[aria-current="true"]::after { content: ' ✓'; }
.menu-item.is-current { color: var(--accent); }
.menu-item .check-icon { width: 16px; height: 16px; margin-left: auto; color: var(--accent); flex: none; }
.dlg-more { margin: 14px 0 0; font-size: 13px; }
.dlg-more a { color: var(--accent); text-decoration: none; }