:root {
      --bg: #f4f6f3;
      --panel: #ffffff;
      --soft: #edf5f1;
      --text: #1c2722;
      --muted: #66746d;
      --line: #d8e2dc;
      --primary: #0d8a73;
      --primary-dark: #096b5a;
      --danger: #a93e3e;
      --code-bg: #16221d;
      --code-text: #edf7f2;
      --shadow: 0 14px 34px rgba(25, 42, 35, .1);
      --radius: 8px;
      --ui: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
      --doc: "Microsoft YaHei", "SimSun", serif;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      min-height: 100%;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: var(--ui);
      letter-spacing: 0;
    }

    /* 工具站统一主题自带的深色遮罩会压暗本页浅色背景，这里关掉 */
    body::before {
      display: none;
    }

    /* 顶部工具条内的「返回工具站」按钮：本页是浅色主题，用黑色实底保证看得清 */
    .nav-home {
      background: #1c2722;
      border-color: #1c2722;
      color: #fff;
    }

    .nav-home:hover {
      background: #000;
      border-color: #000;
      color: #fff;
    }

    /* 本页是浅色主题，统一页脚改用深色文字 + 浅色底，保证可读 */
    .hy-footer {
      --stroke: rgba(28, 39, 34, 0.14);
      --text: #1c2722;
      --text-faint: #66746d;
      --footer-bg: rgba(255, 255, 255, 0.55);
    }

    /* 内容区撑开剩余高度，内容不足一屏时页脚也贴底 */
    .app {
      flex: 1 0 auto;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button,
    .file-button {
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      color: var(--text);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 12px;
      font-weight: 700;
      cursor: pointer;
      user-select: none;
      transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
    }

    button:hover,
    .file-button:hover {
      border-color: #a8cbc0;
      box-shadow: 0 8px 18px rgba(22, 64, 52, .1);
      transform: translateY(-1px);
    }

    button:active,
    .file-button:active {
      transform: translateY(0);
      box-shadow: none;
    }

    button.primary {
      color: #fff;
      border-color: var(--primary);
      background: var(--primary);
    }

    button.primary:hover {
      border-color: var(--primary-dark);
      background: var(--primary-dark);
    }

    button.danger {
      color: var(--danger);
    }

    .app {
      min-height: 100vh;
      /* 纵向弹性：设置区上移到顶部后，编辑区自动撑开剩余高度 */
      display: flex;
      flex-direction: column;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 10;
      /* 液态玻璃：半透明渐变 + 背景模糊 + 顶部内高光 + 柔和投影 */
      background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .42) 100%);
      border-bottom: 1px solid rgba(255, 255, 255, .6);
      backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 30px rgba(25, 42, 35, .08);
    }

    .topbar-inner,
    .workspace,
    .bottom {
      width: min(1560px, calc(100vw - 32px));
      margin: 0 auto;
    }

    .topbar-inner {
      min-height: 72px;
      display: grid;
      grid-template-columns: minmax(230px, 1fr) auto;
      gap: 18px;
      align-items: center;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      border: 1px solid #b9dad1;
      border-radius: var(--radius);
      background: #e4f3ee;
      color: var(--primary-dark);
      display: grid;
      place-items: center;
      font-weight: 900;
    }

    h1 {
      margin: 0;
      font-size: 18px;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .brand p {
      margin: 3px 0 0;
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }

    /* 导航栏按钮统一：胶囊形状，尺寸/内距/字号一致 */
    .actions button,
    .actions .file-button,
    .actions .nav-home {
      min-height: 38px;
      padding: 0 16px;
      border-radius: 999px;
      gap: 7px;
      font-size: 0.92rem;
      font-weight: 700;
    }

    /* 导航栏图标统一：Font Awesome，尺寸与基线一致 */
    .actions i {
      font-size: 14px;
      line-height: 1;
    }

    .file-input {
      position: absolute;
      width: 1px;
      height: 1px;
      clip: rect(0 0 0 0);
      overflow: hidden;
      white-space: nowrap;
    }

    .icon {
      width: 18px;
      height: 18px;
      display: inline-grid;
      place-items: center;
      font-weight: 900;
      flex: 0 0 auto;
      line-height: 1;
    }

    .mobile-tabs {
      display: none;
      width: min(1560px, calc(100vw - 32px));
      margin: 12px auto 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: #fff;
    }

    .mobile-tabs button {
      flex: 1;
      border: 0;
      border-right: 1px solid var(--line);
      border-radius: 0;
      box-shadow: none;
    }

    .mobile-tabs button:last-child {
      border-right: 0;
    }

    .mobile-tabs button.active {
      background: var(--soft);
      color: var(--primary-dark);
    }

    .workspace {
      /* 撑开剩余高度，编辑区始终占满一屏 */
      flex: 1 0 auto;
      margin-top: 18px;
      margin-bottom: 16px;
      display: grid;
      grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
      gap: 16px;
      align-items: stretch;
    }

    .panel {
      min-width: 0;
      /* 减去顶部工具条 72px + 设置区 38px + 各处间距，保证整屏刚好放下不出现多余滚动条 */
      min-height: calc(100vh - 214px);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: var(--shadow);
      display: grid;
      grid-template-rows: auto 1fr;
      overflow: hidden;
    }

    .panel-head {
      min-height: 56px;
      padding: 12px 14px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
      border-bottom: 1px solid var(--line);
      background: #fbfcfb;
    }

    .panel-title {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 8px;
      font-weight: 800;
    }

    .panel-title span:last-child {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .panel-meta {
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
    }

    #markdownInput {
      width: 100%;
      height: 100%;
      min-height: 560px;
      display: block;
      border: 0;
      outline: 0;
      resize: none;
      padding: 20px;
      color: #15201b;
      background:
        linear-gradient(transparent 31px, rgba(13, 138, 115, .06) 32px),
        #fff;
      background-size: 100% 32px;
      line-height: 32px;
      font-family: Consolas, "Cascadia Mono", "Microsoft YaHei", monospace;
      font-size: 15px;
      tab-size: 2;
    }

    #markdownInput::placeholder {
      color: #87958e;
    }

    .preview-scroll {
      height: 100%;
      min-height: 560px;
      overflow: auto;
      padding: 24px;
      background: #eef2ef;
    }

    .paper {
      width: min(100%, 840px);
      min-height: 1020px;
      margin: 0 auto;
      padding: 56px;
      border: 1px solid #dde5e0;
      background: #fff;
      box-shadow: 0 16px 30px rgba(24, 39, 34, .11);
      color: #000;
      font-family: Calibri, Arial, sans-serif;
      font-size: 11pt;
      line-height: 1.5;
      overflow-wrap: anywhere;
    }

    .empty {
      height: 360px;
      border: 1px dashed #bdcbc5;
      border-radius: var(--radius);
      display: grid;
      place-items: center;
      color: var(--muted);
      text-align: center;
      font-family: var(--ui);
    }

    .empty strong {
      display: block;
      color: #2f3b35;
      margin-bottom: 8px;
      font-size: 18px;
    }

    .doc h1,
    .doc h2,
    .doc h3,
    .doc h4,
    .doc h5,
    .doc h6 {
      color: #000;
      line-height: 1.25;
      margin: .85em 0 .45em;
      font-weight: 700;
      page-break-after: avoid;
    }

    .doc h1 {
      margin-top: 0;
      font-size: 24pt;
    }

    .doc h2 {
      font-size: 18pt;
    }

    .doc h3 {
      font-size: 14pt;
    }

    .doc h4 {
      font-size: 12pt;
    }

    .doc p,
    .doc li,
    .doc td,
    .doc th {
      font-size: 11pt;
      line-height: 1.5;
    }

    .doc p {
      margin: 12pt 0;
    }

    .doc a {
      color: #0563c1;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .doc ul,
    .doc ol {
      margin-left: 36pt;
      padding-left: 0;
    }

    .doc li {
      margin-bottom: 6pt;
    }

    .doc li.task {
      list-style: none;
      margin-left: -1.35em;
    }

    .doc .box {
      display: inline-block;
      width: 14px;
      height: 14px;
      margin-right: 8px;
      border: 1.6px solid #6d7a73;
      vertical-align: -2px;
      text-align: center;
      line-height: 12px;
      font: 800 12px Arial, sans-serif;
      color: #000;
    }

    .doc blockquote {
      margin-left: 0;
      padding-left: 12pt;
      border-left: 4px solid #dddddd;
      background: transparent;
      color: #666666;
    }

    .doc code {
      padding: 2px 4px;
      border: 0;
      border-radius: 3px;
      background: #f5f5f5;
      color: inherit;
      font-family: inherit;
      font-size: 10.5pt;
    }

    .doc pre {
      margin: 12pt 0;
      padding: 12pt;
      overflow: auto;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      background: #f5f5f5;
      color: #000;
      line-height: 1.5;
      white-space: pre-wrap;
      font-family: inherit;
    }

    .doc pre code {
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      font-family: inherit;
      font-size: 10.5pt;
    }

    .doc .code-lang {
      display: block;
      margin-bottom: 6pt;
      color: #666666;
      font-family: var(--ui);
      font-size: 12px;
      font-weight: 700;
    }

    /* —— 代码样式预设 —— */
    .paper.code-dark pre {
      background: #1E1E1E;
      color: #D4D4D4;
      border-color: #333333;
    }
    .paper.code-dark pre code { color: #D4D4D4; }
    .paper.code-dark .code-lang { color: #888888; }
    .paper.code-dark code:not(pre code) {
      background: #3C3C3C;
      color: #D4D4D4;
    }

    .paper.code-minimal pre {
      background: #FFFFFF;
      color: #000000;
      border-color: #CCCCCC;
    }
    .paper.code-minimal pre code { color: #000000; }
    .paper.code-minimal .code-lang { color: #888888; }
    .paper.code-minimal code:not(pre code) {
      background: #F2F2F2;
      color: #000000;
    }

    .paper.code-bluegray pre {
      background: #F0F4F8;
      color: #1A365D;
      border-color: #CBD5E0;
    }
    .paper.code-bluegray pre code { color: #1A365D; }
    .paper.code-bluegray .code-lang { color: #718096; }
    .paper.code-bluegray code:not(pre code) {
      background: #E2E8F0;
      color: #1A365D;
    }

    .paper.code-warm pre {
      background: #FFF8F0;
      color: #4A3728;
      border-color: #E8D5C4;
    }
    .paper.code-warm pre code { color: #4A3728; }
    .paper.code-warm .code-lang { color: #A08070; }
    .paper.code-warm code:not(pre code) {
      background: #FFF0E0;
      color: #4A3728;
    }

    .doc table {
      width: 100%;
      margin-bottom: 1em;
      border-collapse: collapse;
      table-layout: fixed;
    }

    .doc th,
    .doc td {
      padding: 8px;
      border: 1px solid #cccccc;
      vertical-align: top;
      text-align: left;
    }

    .doc th {
      background: #f2f2f2;
      font-weight: 700;
    }

    .doc tr:nth-child(even) td {
      background: transparent;
    }

    .doc hr {
      margin: 18pt 0;
      border: 0;
      border-top: 1px solid #cccccc;
    }

    .doc img {
      max-width: 100%;
      height: auto;
    }

    .doc mark {
      padding: 2px 4px;
      background: #f5f5f5;
    }

    .bottom {
      /* 已移至顶部：与顶部工具条留出间距，下方间距由 .workspace 的 margin-top 提供 */
      margin-top: 18px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
    }

    .settings {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .field {
      min-height: 38px;
      padding: 0 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .field label {
      color: #52615a;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .field input,
    .field select {
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--text);
      font-weight: 700;
    }

    .field input {
      width: 180px;
    }

    .status {
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      color: var(--muted);
      font-size: 13px;
      text-align: right;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--primary);
      box-shadow: 0 0 0 4px rgba(13, 138, 115, .14);
      flex: 0 0 auto;
    }

    @media (max-width: 980px) {
      .topbar-inner {
        grid-template-columns: 1fr;
        padding: 12px 0;
      }

      .actions {
        justify-content: flex-start;
      }

      .mobile-tabs {
        display: flex;
      }

      .workspace {
        grid-template-columns: 1fr;
        margin-top: 12px;
      }

      .preview-panel {
        display: none;
      }

      body.show-preview .editor-panel {
        display: none;
      }

      body.show-preview .preview-panel {
        display: grid;
      }

      .bottom {
        grid-template-columns: 1fr;
      }

      .status {
        justify-content: flex-start;
        text-align: left;
      }
    }

    @media (max-width: 620px) {
      .topbar-inner,
      .workspace,
      .bottom,
      .mobile-tabs {
        width: min(100vw - 20px, 1560px);
      }

      .actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
      }

      /* 小屏两列排布时按钮偏大，收小内距和字号；标签过长会自己折行，不会把按钮撑宽 */
      .actions button,
      .actions .file-button,
      .actions .nav-home {
        min-height: 34px;
        padding: 0 10px;
        font-size: 0.84rem;
      }

      button,
      .file-button {
        width: 100%;
      }

      .panel-head {
        grid-template-columns: 1fr;
      }

      #markdownInput,
      .preview-scroll {
        min-height: 480px;
      }

      .preview-scroll {
        padding: 12px;
      }

      .paper {
        min-height: 760px;
        padding: 30px 22px;
      }

      .field {
        width: 100%;
      }

      .field input,
      .field select {
        width: 100%;
      }
    }

    @media print {
      body {
        background: #fff;
      }

      .topbar,
      .mobile-tabs,
      .bottom,
      .editor-panel,
      .panel-head {
        display: none !important;
      }

      .workspace,
      .panel,
      .preview-scroll,
      .paper {
        display: block;
        width: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: #fff;
      }
    }