/* ── 在线文档编辑器（/doc）──
   仿 Word / WPS 的三段式界面：顶栏（文件操作）+ 功能区（选项卡 + 工具条）
   + 编辑区（灰底托白纸）+ 状态栏。编辑区正文样式一律走元素选择器
   （.de-editor h1 / table / img …），这样净化时剥掉 class 也不丢格式。 */

:root {
    --de-accent: #2563eb;
    --de-accent-soft: #dbeafe;
    --de-chrome: #f3f4f6;
    --de-chrome-line: #e2e5ea;
    --de-text: #1f2937;
    --de-text-dim: #6b7280;
    --de-danger: #dc2626;
    --de-shadow: 0 1px 3px rgb(0 0 0 / .08), 0 4px 14px rgb(0 0 0 / .06);
    /* 页面几何：由 JS 按「纸张 / 方向 / 边距」设置覆写 */
    --de-page-w: 210mm;
    --de-page-h: 297mm;
    --de-mt: 25.4mm;
    --de-mr: 31.8mm;
    --de-mb: 25.4mm;
    --de-ml: 31.8mm;
}

* { box-sizing: border-box; }

/* flex/grid 容器上的 hidden 属性会被 display 覆盖，这里统一拉回来 */
[hidden] { display: none !important; }

html, body { height: 100%; }

body.de-body {
    margin: 0;
    font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    color: var(--de-text);
    background: var(--de-chrome);
    overflow: hidden;
}

.de-app {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    height: 100vh;
    height: 100dvh;
}

/* ── 顶栏 ── */
.de-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    background: #fff;
    border-bottom: 1px solid var(--de-chrome-line);
}

.de-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.de-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--de-text);
    flex: none;
}

.de-brand-text { font-weight: 700; font-size: 15px; }

.de-title-input {
    min-width: 120px;
    max-width: 420px;
    flex: 0 1 320px;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--de-text);
    background: var(--de-chrome);
    border: 1px solid transparent;
    border-radius: 8px;
    outline: none;
    transition: border-color .15s, background .15s;
}
.de-title-input:hover { border-color: var(--de-chrome-line); }
.de-title-input:focus { border-color: var(--de-accent); background: #fff; }

.de-save-state {
    font-size: 12px;
    color: var(--de-text-dim);
    white-space: nowrap;
}
.de-save-state.is-dirty { color: #b45309; }
.de-save-state.is-error { color: var(--de-danger); }
.de-save-state.is-saving { color: var(--de-accent); }

.de-topbar-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

/* ── 按钮 ── */
.de-tbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    font-size: 13px;
    color: var(--de-text);
    background: #fff;
    border: 1px solid var(--de-chrome-line);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}
.de-tbtn:hover { background: var(--de-chrome); border-color: #d3d7dd; }
.de-tbtn:active { transform: translateY(1px); }
.de-tbtn-primary {
    color: #fff;
    background: var(--de-accent);
    border-color: var(--de-accent);
}
.de-tbtn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.de-tbtn-sm { padding: 5px 10px; font-size: 12px; }
.de-tbtn.is-active { color: var(--de-accent); background: var(--de-accent-soft); border-color: #bfdbfe; }
.de-tbtn[disabled] { opacity: .45; cursor: default; pointer-events: none; }

.de-ibtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--de-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.de-ibtn svg { width: 17px; height: 17px; }
.de-ibtn:hover { background: #e8ecf2; }
.de-ibtn.is-active {
    color: var(--de-accent);
    background: var(--de-accent-soft);
    border-color: #bfdbfe;
}
.de-ibtn[disabled] { opacity: .35; cursor: default; pointer-events: none; }

.de-select {
    height: 30px;
    padding: 0 6px;
    font-size: 13px;
    color: var(--de-text);
    background: #fff;
    border: 1px solid var(--de-chrome-line);
    border-radius: 7px;
    outline: none;
    cursor: pointer;
}
.de-select:focus { border-color: var(--de-accent); }
.de-select-size { width: 76px; }
.de-select-lh { width: 76px; }
.de-select-block { width: 96px; }

.de-btn-row { display: flex; align-items: center; gap: 2px; }

/* 顶栏「更多」菜单 */
.de-menu-wrap { position: relative; }
.de-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 168px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--de-chrome-line);
    border-radius: 10px;
    box-shadow: var(--de-shadow);
}
.de-menu button {
    display: block;
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    text-align: left;
    color: var(--de-text);
    background: none;
    border: none;
    border-radius: 7px;
    cursor: pointer;
}
.de-menu button:hover { background: var(--de-chrome); }
.de-menu button.de-danger { color: var(--de-danger); }
.de-menu button.de-danger:hover { background: #fef2f2; }
.de-menu-sep { height: 1px; margin: 5px 4px; background: var(--de-chrome-line); }

/* ── 功能区 ── */
.de-ribbon {
    background: #fff;
    border-bottom: 1px solid var(--de-chrome-line);
}

.de-tabs {
    display: flex;
    gap: 2px;
    padding: 0 12px;
    border-bottom: 1px solid var(--de-chrome-line);
}

.de-tab {
    padding: 8px 16px;
    font-size: 13px;
    color: var(--de-text-dim);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .15s;
}
.de-tab:hover { color: var(--de-text); }
.de-tab.is-active { color: var(--de-accent); border-bottom-color: var(--de-accent); font-weight: 600; }

.de-panels { position: relative; }

.de-panel {
    display: none;
    align-items: stretch;
    gap: 0;
    padding: 7px 10px;
    overflow-x: auto;
}
.de-panel.is-active { display: flex; }

.de-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0 12px;
    border-right: 1px solid var(--de-chrome-line);
}
.de-group:last-child { border-right: none; }

.de-group-body {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.de-group-label {
    font-size: 11px;
    color: var(--de-text-dim);
}

/* 颜色行 */
.de-color-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.de-color-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid var(--de-chrome-line);
    border-radius: 6px;
    background: #fff;
}
.de-color-tag-bg { font-size: 12px; }
.de-color-input {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--de-chrome-line);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}
.de-swatches { display: flex; gap: 3px; }
.de-swatch {
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid rgb(0 0 0 / .12);
    border-radius: 4px;
    cursor: pointer;
}
.de-swatch:hover { transform: scale(1.15); }

/* 页边距输入 */
.de-margin-inputs { display: flex; gap: 8px; }
.de-margin-inputs label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--de-text-dim);
}
.de-margin-inputs input {
    width: 52px;
    height: 26px;
    padding: 0 6px;
    font-size: 12px;
    border: 1px solid var(--de-chrome-line);
    border-radius: 6px;
    outline: none;
}
.de-margin-inputs input:focus { border-color: var(--de-accent); }

/* 帮助面板 */
.de-help {
    display: flex;
    gap: 36px;
    padding: 4px 8px 8px;
    font-size: 12.5px;
    line-height: 1.9;
}
.de-help h4 { margin: 0 0 4px; font-size: 13px; }
.de-help p { margin: 0; color: var(--de-text-dim); }
.de-help kbd {
    padding: 1px 5px;
    font-family: inherit;
    font-size: 11px;
    background: var(--de-chrome);
    border: 1px solid var(--de-chrome-line);
    border-bottom-width: 2px;
    border-radius: 5px;
}
.de-help code {
    padding: 1px 5px;
    font-size: 11.5px;
    background: var(--de-chrome);
    border-radius: 5px;
}

/* ── 主体 ── */
.de-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
}

/* 侧栏 */
.de-sidebar {
    display: flex;
    flex-direction: column;
    width: 264px;
    background: #fff;
    border-right: 1px solid var(--de-chrome-line);
    min-height: 0;
}

.de-side-tabs {
    display: flex;
    border-bottom: 1px solid var(--de-chrome-line);
}
.de-side-tabs button {
    flex: 1;
    padding: 9px 0;
    font-size: 13px;
    color: var(--de-text-dim);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.de-side-tabs button.is-active { color: var(--de-accent); border-bottom-color: var(--de-accent); font-weight: 600; }

.de-side-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
}

.de-side-search input {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    border: 1px solid var(--de-chrome-line);
    border-radius: 8px;
    outline: none;
}
.de-side-search input:focus { border-color: var(--de-accent); }

.de-new-doc {
    margin-top: 10px;
    padding: 9px 0;
    font-size: 13px;
    color: var(--de-accent);
    background: var(--de-accent-soft);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.de-new-doc:hover { background: #cfe4fe; }

.de-doc-list, .de-ver-list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.de-doc-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 9px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s;
}
.de-doc-item:hover { background: var(--de-chrome); }
.de-doc-item.is-current { background: var(--de-accent-soft); }

.de-doc-info { flex: 1; min-width: 0; }
.de-doc-name {
    display: block;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.de-doc-meta {
    display: block;
    font-size: 11px;
    color: var(--de-text-dim);
    margin-top: 2px;
}
.de-doc-acts { display: none; gap: 2px; flex: none; }
.de-doc-item:hover .de-doc-acts { display: inline-flex; }
.de-doc-acts button {
    width: 24px;
    height: 24px;
    font-size: 12px;
    color: var(--de-text-dim);
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.de-doc-acts button:hover { background: #e5e9ef; color: var(--de-text); }
.de-doc-acts button.de-danger:hover { background: #fef2f2; color: var(--de-danger); }

.de-side-hint {
    margin: 4px 2px 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--de-text-dim);
}

.de-ver-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    font-size: 12.5px;
    border: 1px solid var(--de-chrome-line);
    border-radius: 8px;
}
.de-ver-item .de-ver-info { flex: 1; min-width: 0; }
.de-ver-item time { display: block; }
.de-ver-item .de-ver-size { color: var(--de-text-dim); font-size: 11px; }
.de-ver-item button {
    padding: 4px 9px;
    font-size: 12px;
    color: var(--de-accent);
    background: var(--de-accent-soft);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.de-ver-item button:hover { background: #cfe4fe; }

/* 编辑区 */
.de-workspace {
    overflow: auto;
    padding: 26px 16px 60px;
    background:
        radial-gradient(circle at 20% 0%, #eef1f6 0%, transparent 60%),
        #e9ebf0;
}

.de-page-wrap {
    width: var(--de-page-w);
    margin: 0 auto;
}

.de-page {
    width: var(--de-page-w);
    min-height: var(--de-page-h);
    padding: var(--de-mt) var(--de-mr) var(--de-mb) var(--de-ml);
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgb(15 23 42 / .08), 0 8px 30px rgb(15 23 42 / .12);
}

.de-editor {
    outline: none;
    font-family: 宋体, SimSun, serif;
    font-size: 10.5pt;
    line-height: 1.6;
    color: #111827;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-height: 60vh;
}
.de-editor:focus { outline: none; }
.de-editor ::selection { background: #bfdbfe; }

/* ── 正文元素样式（净化剥掉 class 也不受影响）── */
.de-editor p { margin: 0 0 .5em; }
.de-editor h1, .de-editor h2, .de-editor h3,
.de-editor h4, .de-editor h5, .de-editor h6 {
    margin: .8em 0 .4em;
    font-weight: 700;
    line-height: 1.35;
    font-family: 黑体, SimHei, sans-serif;
}
.de-editor h1 { font-size: 2em; }
.de-editor h2 { font-size: 1.5em; }
.de-editor h3 { font-size: 1.25em; }
.de-editor h4 { font-size: 1.13em; }
.de-editor h5 { font-size: 1em; }
.de-editor h6 { font-size: 1em; color: #4b5563; }

.de-editor blockquote {
    margin: .6em 0;
    padding: .2em 0 .2em 1em;
    border-left: 3px solid #cbd5e1;
    color: #475569;
}

.de-editor pre {
    margin: .6em 0;
    padding: 10px 12px;
    font-family: 'Courier New', monospace;
    font-size: .92em;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    white-space: pre-wrap;
}

.de-editor ul, .de-editor ol { margin: .4em 0; padding-left: 1.8em; }
.de-editor li { margin: .15em 0; }

.de-editor a { color: #2563eb; text-decoration: underline; }

.de-editor img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border-radius: 2px;
}
.de-editor img.de-img-sel { outline: 2px solid var(--de-accent); outline-offset: 2px; }

.de-editor hr {
    height: 0;
    margin: 14px 0;
    border: none;
    border-top: 2px solid #d1d5db;
}
.de-editor hr[data-pagebreak] {
    height: auto;
    margin: 16px 0;
    border: none;
    border-top: 2px dashed #60a5fa;
}
.de-editor hr[data-pagebreak]::after {
    content: "分页符";
    display: block;
    margin-top: 3px;
    font-size: 11px;
    text-align: center;
    color: #60a5fa;
    font-family: 'Inter', sans-serif;
}

.de-editor table {
    width: 100%;
    margin: .6em 0;
    border-collapse: collapse;
}
.de-editor th, .de-editor td {
    min-width: 2em;
    padding: 6px 9px;
    border: 1px solid #9ca3af;
    vertical-align: middle;
}
.de-editor th {
    background: #f3f4f6;
    font-weight: 600;
    text-align: center;
}
.de-editor table.de-tbl-active th, .de-editor table.de-tbl-active td {
    border-color: var(--de-accent);
}

.de-editor mark.de-find { background: #fde047; color: inherit; padding: 0 1px; }
.de-editor mark.de-find.de-find-current { background: #fb923c; }

/* ── 状态栏 ── */
.de-statusbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 16px;
    font-size: 12px;
    color: var(--de-text-dim);
    background: #fff;
    border-top: 1px solid var(--de-chrome-line);
}
.de-status-flex { flex: 1; }
.de-status-dim { color: #9ca3af; font-family: ui-monospace, monospace; font-size: 11px; }
.de-zoom-btn {
    width: 22px;
    height: 22px;
    font-size: 14px;
    line-height: 1;
    color: var(--de-text);
    background: var(--de-chrome);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.de-zoom-btn:hover { background: #e5e9ef; }
.de-status-item { white-space: nowrap; }

/* ── 表格浮动工具条 ── */
.de-table-tools {
    position: fixed;
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 5px 7px;
    background: #1f2937;
    border-radius: 9px;
    box-shadow: 0 6px 22px rgb(0 0 0 / .28);
}
.de-table-tools button {
    padding: 4px 8px;
    font-size: 12px;
    color: #e5e7eb;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.de-table-tools button:hover { background: #374151; color: #fff; }
.de-table-tools button.de-danger:hover { background: #7f1d1d; color: #fff; }
.de-table-sep { width: 1px; height: 16px; margin: 0 4px; background: #4b5563; }

/* ── 弹层 ── */
.de-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgb(15 23 42 / .35);
}

.de-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 80;
    transform: translate(-50%, -50%);
    min-width: 300px;
    max-width: min(92vw, 560px);
    max-height: 84vh;
    overflow: auto;
    padding: 18px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgb(0 0 0 / .3);
}
.de-modal-title {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 700;
}
.de-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}
.de-modal-foot span { margin-right: auto; font-size: 12.5px; color: var(--de-text-dim); }
.de-modal-input {
    width: 100%;
    height: 36px;
    padding: 0 11px;
    font-size: 14px;
    border: 1px solid var(--de-chrome-line);
    border-radius: 8px;
    outline: none;
}
.de-modal-input:focus { border-color: var(--de-accent); }

/* 表格选择器 */
.de-table-grid {
    display: grid;
    grid-template-columns: repeat(10, 20px);
    gap: 3px;
    justify-content: center;
}
.de-table-cell {
    width: 20px;
    height: 20px;
    background: var(--de-chrome);
    border: 1px solid #d6dae1;
    border-radius: 3px;
    cursor: pointer;
}
.de-table-cell.is-hl { background: var(--de-accent-soft); border-color: var(--de-accent); }

/* 符号 */
.de-symbol-body { display: flex; flex-direction: column; gap: 12px; }
.de-symbol-cat { font-size: 12px; font-weight: 600; color: var(--de-text-dim); margin-bottom: 6px; }
.de-symbol-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.de-symbol-grid button {
    padding: 5px 0;
    font-size: 15px;
    background: var(--de-chrome);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.de-symbol-grid button:hover { background: var(--de-accent-soft); }

/* 日期时间 */
.de-dt-list { display: flex; flex-direction: column; gap: 6px; }
.de-dt-list button {
    padding: 9px 12px;
    font-size: 13.5px;
    text-align: left;
    background: var(--de-chrome);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.de-dt-list button:hover { background: var(--de-accent-soft); }

/* 模板 */
.de-tpl-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.de-tpl-card {
    padding: 16px 14px;
    text-align: left;
    background: var(--de-chrome);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
}
.de-tpl-card:hover { border-color: var(--de-accent); background: var(--de-accent-soft); }
.de-tpl-card b { display: block; font-size: 14px; margin-bottom: 4px; }
.de-tpl-card span { font-size: 12px; color: var(--de-text-dim); }

/* 查找替换 */
.de-find-row { display: flex; gap: 8px; margin-bottom: 10px; }
.de-find-row input {
    flex: 1;
    height: 34px;
    padding: 0 10px;
    font-size: 13.5px;
    border: 1px solid var(--de-chrome-line);
    border-radius: 8px;
    outline: none;
}
.de-find-row input:focus { border-color: var(--de-accent); }
.de-find-status { font-size: 12px; color: var(--de-text-dim); min-height: 16px; }

/* Toast */
.de-toast {
    position: fixed;
    bottom: 46px;
    left: 50%;
    z-index: 90;
    transform: translateX(-50%);
    max-width: 80vw;
    padding: 10px 18px;
    font-size: 13px;
    color: #fff;
    background: #1f2937;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgb(0 0 0 / .3);
    opacity: 0;
    transition: opacity .2s, transform .2s;
}
.de-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.de-toast.is-error { background: #7f1d1d; }

/* 滚动条 */
.de-workspace::-webkit-scrollbar, .de-side-body::-webkit-scrollbar,
.de-modal::-webkit-scrollbar { width: 10px; height: 10px; }
.de-workspace::-webkit-scrollbar-thumb, .de-side-body::-webkit-scrollbar-thumb,
.de-modal::-webkit-scrollbar-thumb {
    background: #c6ccd5;
    border: 2px solid transparent;
    border-radius: 8px;
    background-clip: content-box;
}
.de-workspace::-webkit-scrollbar-thumb:hover { background-color: #a8b1bd; }

/* 窄屏：侧栏变浮层 */
@media (max-width: 900px) {
    .de-topbar { flex-wrap: wrap; }
    .de-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 75;
        box-shadow: 0 0 40px rgb(0 0 0 / .25);
    }
    .de-margin-inputs { flex-wrap: wrap; }
}