:root {
  color-scheme:light;
  --bg:#f7f6f2;
  --panel:#fff;
  --line:#e1e4de;
  --text:#242824;
  --muted:#68716a;
  --accent:var(--brand-primary);
  --shadow:0 12px 36px #24302716;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --radius-control:6px;
  --radius-overlay:10px;
  --split:48%;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text);
  font-size:14px;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--bg);
  overflow:hidden;
}

button,input,textarea {
  font:inherit;
}

button {
  cursor:pointer;
  color:inherit;
}

button,input {
  accent-color:var(--accent);
}

button {
  border:0;
  background:transparent;
}

button:disabled {
  opacity:.45;
  cursor:not-allowed;
}

button,input,summary {
  touch-action:manipulation;
}

button:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}

button {
  transition:background .12s,color .12s,box-shadow .12s;
}

button:not(:disabled):hover {
  background:#eaf0eb;
}

button:not(:disabled):active {
  background:#dce9e1;
}

[hidden] {
  display:none!important;
}

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

.app-shell {
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  min-width:320px;
}

.topbar {
  height:64px;
  flex:none;
  display:flex;
  align-items:center;
  gap:20px;
  padding:0 var(--space-6);
  border-bottom:1px solid var(--line);
  background:var(--bg);
  position:relative;
  z-index:25;
}

.brand {
  flex:none;
  display:flex;
  align-items:center;
}

.brand-logo {
  width:145px;
  height:auto;
  display:block;
}

.file-anchor {
  border-left:1px solid var(--line);
  padding-left:16px;
}

.document-info {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-width:0;
  flex:1;
}

.document-info #documentTitle {
  font-size:14px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:380px;
}

.document-info #saveStatus {
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  min-width:74px;
}

#saveStatus[data-state=error],#saveStatus[data-state=partial] {
  color:#9e4934;
}

.top-actions {
  display:flex;
  gap:16px;
  align-items:center;
  flex:none;
}

.text-button,.ghost-button,.primary-button,.icon-button {
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:6px;
  white-space:nowrap;
  padding:0 12px;
}

.primary-button {
  background:var(--accent);
  color:#fff;
  font-weight:600;
  border:1px solid transparent;
  min-height:40px;
  padding:0 17px;
}

.primary-button:not(:disabled):hover {
  background:#086853;
}

.primary-button:not(:disabled):active {
  background:#075643;
}

.ghost-button {
  border:1px solid var(--line);
  background:#fff;
}

.icon-button {
  padding:0;
  width:36px;
  min-height:36px;
}

.icon {
  width:18px;
  height:18px;
  display:block;
  flex:none;
}

.icon.small {
  width:12px;
  height:12px;
}

.check-toggle {
  font-size:12px;
  gap:8px;
}

#checkSummary {
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

#checkSummary[data-blocked=true] {
  color:#a04632;
}

#checkSummaryCompact,.mobile-save-status {
  display:none;
}

.layout-preview-hint {
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}

.mobile-save-status[data-state=error] {
  color:#9e4934;
}

#copyBtn {
  min-width:122px;
}

.is-busy {
  opacity:.7;
  pointer-events:none;
}

.is-done {
  box-shadow:0 0 0 3px #087f6817;
}

.workspace-tools {
  height:48px;
  flex:none;
  display:grid;
  grid-template-columns:var(--split) 1fr;
  border-bottom:1px solid var(--line);
  background:#fcfcfa;
  position:relative;
  z-index:20;
}

.insert-bar {
  display:flex;
  align-items:center;
  padding:0 25px;
  gap:12px;
  min-width:0;
}

.insert-bar>button,.insert-bar>.menu-anchor>button {
  height:36px;
  border-radius:var(--radius-control);
  padding:0 10px;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  font-size:13px;
}

.view-tools {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 var(--space-6);
  border-left:1px solid var(--line);
  min-width:0;
}

.view-tabs {
  display:flex;
  padding:2px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#f6f6f3;
}

.view-tabs button {
  min-width:62px;
  min-height:36px;
  border-radius:4px;
  font-size:12px;
}

.view-tabs button[aria-pressed=true] {
  background:#fff;
  color:var(--accent);
  box-shadow:0 1px 3px #26332b12;
}

.style-toggle-button {
  font-size:13px;
  border:1px solid var(--line);
  background:#fff;
  min-height:36px;
}

.style-toggle-button[aria-expanded=true] {
  color:var(--accent);
  background:#eaf3ed;
}

.workspace {
  position:relative;
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:var(--split) minmax(0,1fr);
  overflow:hidden;
}

.workspace-pane {
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.editor-pane {
  background:#fff;
}

.preview-pane {
  border-left:1px solid var(--line);
}

#editor {
  width:100%;
  flex:1;
  min-height:0;
  resize:none;
  border:0;
  padding:32px 36px 44px;
  background:#fff;
  color:var(--text);
  font-family:"SFMono-Regular",Consolas,"PingFang SC","Microsoft YaHei",monospace;
  font-size:15px;
  line-height:1.85;
  tab-size:2;
  scrollbar-gutter:stable;
}

#editor::placeholder {
  color:#87918a;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
  font-size:15px;
  line-height:2;
}

#editor:focus-visible {
  outline:1px solid #087f6845;
  outline-offset:-1px;
}

.editor-paste-status {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:8px 16px;
  background:#fbf4e9;
  color:#875222;
  border-top:1px solid #eadfc9;
  font-size:12px;
  line-height:1.6;
}

.editor-paste-status:not([data-state]),.editor-paste-status[data-state=""] {
  display:none;
}

.editor-paste-status button {
  padding:4px 7px;
  background:#fff;
  border:1px solid #dccbb2;
  border-radius:4px;
  font-size:12px;
  white-space:nowrap;
}

.editor-paste-status[data-state=uploading] {
  background:#edf4ef;
  color:#306f56;
}

.editor-paste-status span {
  flex:1 1 180px;
}

.phone-frame {
  height:100%;
  overflow:auto;
  padding:26px 30px 40px;
  background:#f1f2ee;
  scrollbar-gutter:stable;
}

.wechat-preview {
  width:min(100%,580px);
  min-height:calc(100% - 1px);
  margin:0 auto;
  padding:30px 34px 42px;
  background:#fff;
  border:1px solid #e4e6e1;
  border-radius:3px;
  overflow-wrap:anywhere;
}

.preview-empty {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:12px;
  text-align:center;
  color:var(--muted);
}

.preview-empty h2 {
  font-size:22px;
  font-weight:500;
  color:#44544a;
  margin:0;
}

.preview-empty p {
  margin:0 0 12px;
  font-size:14px;
}

.statusbar {
  height:30px;
  flex:none;
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 var(--space-6);
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--muted);
}

.content-metrics {
  font-variant-numeric:tabular-nums;
}

#copyStatus {
  margin-left:auto;
  color:var(--accent);
}

.app-shell[data-view=editor] .workspace,.app-shell[data-view=preview] .workspace {
  grid-template-columns:1fr;
}

.app-shell[data-view=editor] .preview-pane,.app-shell[data-view=preview] .editor-pane {
  display:none;
}

.app-shell[data-view=editor] #editor {
  padding-left:max(36px,calc((100vw - 860px)/2));
  padding-right:max(36px,calc((100vw - 860px)/2));
}

.app-shell[data-view=preview] .insert-bar {
  visibility:hidden;
}

.app-shell[data-view=preview] .wechat-preview {
  max-width:640px;
}

.app-shell[data-view=preview] .preview-pane {
  border-left:0;
}

.menu-anchor {
  position:relative;
}

.popup-menu {
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  width:238px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:var(--radius-overlay);
  background:#fff;
  box-shadow:var(--shadow);
  z-index:40;
  animation:menu-in .14s ease-out;
}

.popup-menu button {
  min-height:40px;
  width:100%;
  border-radius:var(--radius-control);
  padding:8px 10px;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:13px;
}

.popup-menu button span {
  font-size:12px;
  color:var(--muted);
}

.popup-menu p {
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
  padding:10px 10px 4px;
  margin:0;
}

.popup-menu .menu-secondary {
  border-top:1px solid var(--line);
  border-radius:0;
  margin-top:7px;
  color:var(--muted);
}

.markdown-support {
  border-top:1px solid var(--line);
  margin-top:6px;
  padding:10px;
}

.markdown-support summary {
  font-size:12px;
  cursor:pointer;
}

.markdown-support p {
  padding:8px 0 0;
}

.side-panel {
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:298px;
  background:#fcfcfa;
  border-left:1px solid var(--line);
  z-index:15;
  display:flex;
  flex-direction:column;
  box-shadow:-10px 0 30px #283a2d0a;
  animation:panel-in .18s ease-out;
}

.panel-head {
  height:58px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--space-4);
  border-bottom:1px solid var(--line);
}

.panel-head h2 {
  font-size:16px;
  font-weight:600;
  margin:0;
}

.style-preview-button { display:none; }
@media(max-width:700px) {
  .style-preview-button { display:inline-flex; margin-left:auto; margin-right:8px; }
}

.panel-scroll {
  overflow:auto;
  flex:1;
  min-height:0;
  padding:var(--space-4);
}

.control-group {
  padding-bottom:var(--space-4);
  margin-bottom:var(--space-4);
  border-bottom:1px solid var(--line);
}

.control-group h3,.image-section h3 {
  font-size:13px;
  margin:0 0 12px;
  font-weight:600;
}

.control-group label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  margin-bottom:var(--space-2);
}

.control-group label span,.control-group output {
  color:var(--muted);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

.control-group input[type=range] {
  width:100%;
  height:22px;
  margin:0;
  cursor:pointer;
}

.control-group input[type=color] {
  width:100%;
  height:34px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:#fff;
  cursor:pointer;
}

.control-group small {
  display:block;
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}

.panel-note {
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  margin:14px 0;
}

.theme-total { font-size:12px; font-weight:400; color:var(--muted); margin-left:6px; }
.theme-filters { display:flex; flex-wrap:wrap; gap:4px; margin:0 0 8px; }
.theme-filters button { flex:1; min-width:44px; min-height:44px; padding:6px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--muted); font-size:12px; }
.theme-filters button[aria-pressed=true] { border-color:var(--accent); background:#f4f9f5; color:var(--accent); font-weight:600; }
.theme-status { margin:0 0 12px; color:var(--muted); font-size:12px; line-height:1.6; }

.theme-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.theme-card {
  position:relative;
  border:1px solid var(--line);
  background:#fff;
  border-radius:var(--radius-control);
  padding:var(--space-2);
  text-align:left;
  min-width:0;
  align-self:stretch;
}

.theme-sample {
  margin-bottom:var(--space-3);
  pointer-events:none;
  user-select:none;
}

.theme-card>strong {
  font-size:13px;
  display:block;
  padding-right:24px;
  margin:0 0 4px;
}

.theme-card>small {
  display:block;
  margin:0;
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
}

.theme-card.active {
  border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent);
  background:#f4f9f5;
}

.theme-selected {
  position:absolute;
  right:8px;
  top:8px;
  width:18px;
  height:18px;
  visibility:hidden;
}

.theme-card[aria-pressed=true] .theme-selected {
  visibility:visible;
}

.check-panel {
  width:348px;
}

.tips-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:13px;
}

.tips-heading>span {
  font-size:12px;
  color:var(--muted);
}

.copy-checks {
  padding:0;
  list-style:none;
  margin:14px 0 22px;
}

.copy-checks li {
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:12px;
  line-height:1.8;
  color:#815133;
}

.copy-checks .is-ok {
  color:#367355;
}

.image-section {
  margin-top:22px;
}

.image-section .tips-heading {
  margin-bottom:10px;
}

.image-section h3 {
  margin:0;
}

.image-section button {
  font-size:12px;
  padding:0 6px;
  min-height:36px;
}

.image-row {
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}

.image-row img {
  width:42px;
  height:42px;
  object-fit:cover;
  border:1px solid var(--line);
  border-radius:4px;
}

.image-row strong {
  display:block;
  overflow-wrap:anywhere;
  font-size:12px;
  font-weight:500;
}

.image-row small {
  display:block;
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
  overflow-wrap:anywhere;
}

.image-row button {
  color:var(--accent);
}

.image-empty {
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
}

.save-warning {
  padding:8px 24px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  background:#fff0db;
  color:#87491d;
  font-size:12px;
  flex:none;
}

.save-warning button {
  color:inherit;
  text-decoration:underline;
  white-space:nowrap;
}

@media(min-width:1380px) {
  .app-shell[data-panel=style] .workspace {
    padding-right:298px;
    grid-template-columns:46% minmax(0,1fr);
  }
  .app-shell[data-panel=check] .workspace {
    padding-right:348px;
    grid-template-columns:46% minmax(0,1fr);
  }
  .app-shell[data-view=preview] .workspace,.app-shell[data-view=editor] .workspace {
    grid-template-columns:1fr;
  }
}

.modal-backdrop {
  position:fixed;
  inset:0;
  z-index:60;
  padding:24px;
  display:grid;
  place-items:center;
  background:#1c29254d;
  backdrop-filter:blur(3px);
}

.confirm-card,.history-card,.copy-drawer-card {
  width:min(520px,100%);
  max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px);
  overflow:auto;
  padding:28px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 24px 80px #13251c26;
}

.history-card {
  width:min(760px,100%);
}

.copy-drawer-card {
  width:min(620px,100%);
}

.confirm-card h2,.copy-drawer-head h2 {
  font-size:20px;
  line-height:1.4;
  margin:0;
  font-weight:600;
}

.confirm-card p,.copy-drawer-card p,.dialog-copy {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  margin:14px 0 20px;
}

.confirm-card label {
  display:block;
  font-size:12px;
  margin:16px 0 8px;
}

.confirm-card input {
  display:block;
  width:100%;
  height:40px;
  border:1px solid var(--line);
  border-radius:6px;
  padding:0 12px;
  background:#fff;
}

.confirm-actions {
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:24px;
}

.confirm-actions button {
  min-width:100px;
}

.copy-drawer-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.copy-drawer-actions {
  display:flex;
  gap:8px;
}

.source-details {
  margin-top:16px;
  font-size:12px;
}

.source-details summary {
  cursor:pointer;
  color:var(--muted);
}

#manualHtml {
  margin-top:12px;
  width:100%;
  height:220px;
  padding:12px;
  resize:vertical;
  border:1px solid var(--line);
  font-family:monospace;
  font-size:12px;
  border-radius:6px;
}

.history-list {
  display:flex;
  flex-direction:column;
  margin-top:18px;
}

.history-item {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  padding:17px 0;
  border-top:1px solid var(--line);
  align-items:start;
}

.history-item strong {
  display:block;
  font-size:14px;
  font-weight:500;
}

.history-item small {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}

.history-item button {
  border:1px solid var(--line);
  background:#fff;
  padding:8px 10px;
  border-radius:var(--radius-control);
  font-size:12px;
}

.history-item p {
  margin:8px 0;
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  overflow-wrap:anywhere;
}

.history-item details {
  font-size:12px;
  color:var(--muted);
  margin-top:8px;
}

.history-item summary {
  cursor:pointer;
  display:list-item;
  width:fit-content;
}

.history-item pre {
  white-space:pre-wrap;
  max-height:220px;
  overflow:auto;
  background:#f7f8f5;
  padding:12px;
  font:12px/1.8 monospace;
  color:var(--text);
}

.history-empty {
  padding:32px 0;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

.feedback-toast {
  position:fixed;
  bottom:46px;
  left:50%;
  transform:translateX(-50%);
  z-index:90;
  max-width:calc(100vw - 32px);
  width:max-content;
  padding:12px 18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:var(--shadow);
  color:var(--text);
  font-size:13px;
  line-height:1.6;
  pointer-events:none;
}

.feedback-toast.is-visible {
  animation:menu-in .14s ease-out;
}

.undo-bar {
  position:fixed;
  left:50%;
  bottom:48px;
  z-index:95;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:16px;
  width:max-content;
  max-width:calc(100vw - 24px);
  padding:10px 12px 10px 18px;
  border-radius:8px;
  background:#253d31;
  color:#fff;
  box-shadow:var(--shadow);
  font-size:13px;
}

.undo-bar button {
  background:#fff;
  color:#234e39;
  border-radius:4px;
  padding:6px 12px;
  white-space:nowrap;
}

.has-open-modal .undo-bar {
  visibility:hidden;
  pointer-events:none;
}

.preview-focus-flash {
  outline:2px solid #087f6840;
  outline-offset:-2px;
}

@keyframes menu-in {
  from {
    opacity:0;
    translate:0 -4px;
  }
  to {
    opacity:1;
    translate:0 0;
  }
}

@keyframes panel-in {
  from {
    opacity:0;
    translate:12px 0;
  }
  to {
    opacity:1;
    translate:0 0;
  }
}

@media(max-width:1100px) {
  .topbar {
    padding:0 18px;
    gap:12px;
  }
  .brand-logo {
    width:125px;
  }
  .document-info {
    justify-content:flex-start;
    gap:12px;
  }
  .document-info #documentTitle {
    max-width:240px;
  }
  .top-actions {
    gap:8px;
  }
  .insert-bar {
    gap:2px;
    padding:0 14px;
  }
  .insert-bar>button,.insert-bar>.menu-anchor>button {
    padding:0 7px;
    font-size:12px;
  }
  .view-tools {
    padding:0 16px;
  }
  .phone-frame {
    padding:20px 18px;
  }
  .wechat-preview {
    padding:25px 24px;
  }
  #editor {
    padding:26px 26px 40px;
  }
  #checkSummaryFull {
    display:none;
  }
  #checkSummaryCompact {
    display:inline;
  }
  .document-info #saveStatus {
    font-size:12px;
    min-width:0;
  }
}

@media(max-width:820px) {
  .document-info #documentTitle {
    max-width:190px;
  }
  .document-info #saveStatus {
    display:none;
  }
  .mobile-save-status {
    display:inline;
    white-space:nowrap;
  }
  .statusbar .storage-note {
    display:none;
  }
  .brand-logo {
    width:112px;
  }
  .topbar {
    gap:12px;
  }
  .insert-bar>button,.insert-bar>.menu-anchor>button {
    gap:4px;
    padding:0 6px;
  }
  .insert-bar>button .icon,.insert-bar>.menu-anchor>button .icon {
    width:16px;
    height:16px;
  }
  .insert-bar button span {
    display:none;
  }
  .view-tabs button {
    min-width:52px;
  }
}

@media(max-width:700px) {
  .topbar {
    height:56px;
    padding:0 12px;
    gap:8px;
  }
  .brand-logo {
    width:104px;
  }
  .file-anchor {
    padding-left:6px;
    margin-left:1px;
  }
  .file-anchor>.text-button {
    font-size:12px;
    padding:0 6px;
    gap:3px;
  }
  .document-info {
    display:none;
  }
  .top-actions {
    margin-left:auto;
    gap:4px;
    min-width:0;
  }
  .check-toggle {
    padding:0 6px;
    font-size:12px;
    gap:4px;
  }
  #copyBtn {
    min-width:96px;
    padding:0 8px;
    font-size:12px;
    min-height:44px;
  }
  .topbar .text-button,.view-tools button,.insert-bar>button,.insert-bar>.menu-anchor>button {
    min-height:44px;
  }
  .icon-button {
    min-width:44px;
    min-height:44px;
  }
  #checkSummary {
    display:block;
    max-width:88px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .workspace-tools {
    height:88px;
    display:flex;
    flex-direction:column-reverse;
    z-index:20;
  }
  .view-tools {
    height:44px;
    flex:none;
    padding:0 12px;
    border-left:0;
    border-bottom:1px solid var(--line);
  }
  .view-tabs {
    padding:0;
    border:0;
    background:transparent;
    gap:2px;
  }
  .view-tabs button {
    font-size:13px;
    min-height:44px;
    min-width:62px;
  }
  .view-tabs #splitTab {
    display:none;
  }
  .style-toggle-button {
    min-height:44px;
  }
  .insert-bar {
    height:44px;
    flex:none;
    justify-content:space-between;
    gap:0;
    padding:0 10px;
  }
  .insert-bar>button,.insert-bar>.menu-anchor>button {
    padding:0 8px;
    min-width:36px;
    font-size:12px;
    min-height:44px;
  }
  .insert-bar button span {
    display:inline;
  }
  .insert-bar .icon {
    width:16px;
    height:16px;
  }
  .insert-bar #moreMenuBtn span {
    display:none;
  }
  .workspace,.app-shell[data-view=editor] .workspace,.app-shell[data-view=preview] .workspace {
    display:flex;
    flex-direction:column;
  }
  .workspace-pane {
    flex:1;
    width:100%;
  }
  .app-shell[data-mobile-view=editor] .editor-pane {
    display:flex;
  }
  .app-shell[data-mobile-view=editor] .preview-pane {
    display:none;
  }
  .app-shell[data-mobile-view=preview] .editor-pane {
    display:none;
  }
  .app-shell[data-mobile-view=preview] .preview-pane {
    display:flex;
  }
  .app-shell[data-mobile-view=preview] .workspace-tools {
    height:44px;
  }
  .app-shell[data-mobile-view=preview] .insert-bar {
    display:none;
  }
  .app-shell[data-mobile-view=editor] .insert-bar {
    visibility:visible;
  }
  .preview-pane {
    border-left:0;
  }
  .app-shell[data-mobile-view=editor] #editor {
    padding:22px 22px 36px;
    font-size:15px;
    line-height:1.85;
  }
  .phone-frame {
    padding:14px 12px 24px;
  }
  .wechat-preview {
    padding:24px 20px;
    min-height:100%;
    border-radius:2px;
    width:100%;
  }
  .statusbar {
    height:32px;
    padding:0 12px;
    gap:12px;
    font-size:12px;
  }
  .statusbar .storage-note {
    display:none;
  }
  .side-panel,.check-panel {
    width:min(340px,100%);
    z-index:30;
    box-shadow:-8px 0 26px #283a2d16;
  }
  .panel-head {
    height:50px;
  }
  .panel-scroll {
    padding:18px;
  }
  .popup-menu {
    position:fixed;
    top:calc(56px + 88px);
    left:12px;
    right:12px;
    width:auto;
    max-height:calc(100dvh - 160px);
    overflow:auto;
  }
  .file-anchor .popup-menu {
    top:56px;
  }
  .popup-menu button {
    min-height:44px;
  }
  .modal-backdrop {
    padding:14px;
  }
  .confirm-card,.history-card,.copy-drawer-card {
    padding:var(--space-4);
    max-height:calc(100dvh - 28px);
    border-radius:10px;
  }
  .copy-drawer-head {
    align-items:flex-start;
  }
  .copy-drawer-actions {
    flex-direction:column;
  }
  .copy-drawer-actions .ghost-button {
    min-width:70px;
    padding:0 9px;
  }
  .confirm-card h2,.copy-drawer-head h2 {
    font-size:18px;
  }
  .history-item {
    gap:8px;
  }
  .history-item strong {
    font-size:13px;
  }
  .history-item button {
    padding:8px;
    min-height:40px;
  }
  .history-item pre {
    font-size:12px;
  }
  .editor-paste-status {
    padding:8px 12px;
  }
  .save-warning {
    padding:8px 12px;
    font-size:12px;
  }
  .feedback-toast {
    bottom:38px;
    font-size:12px;
  }
  .undo-bar {
    bottom:40px;
    font-size:12px;
  }
  .topbar #fileMenuBtn {
    min-height:44px;
  }
  .view-tabs button[aria-pressed=true] {
    background:#eaf2ed;
    box-shadow:none;
  }
}

@media(max-width:360px) {
  .brand-logo {
    width:87px;
  }
  .topbar {
    padding:0 8px;
    gap:4px;
  }
  .file-anchor {
    border:0;
    padding:0;
  }
  .check-toggle {
    gap:3px;
  }
  .insert-bar {
    padding:0 6px;
  }
  .insert-bar>button,.insert-bar>.menu-anchor>button {
    padding:0 6px;
  }
  #copyBtn {
    min-width:94px;
    font-size:12px;
  }
  #checkSummary {
    max-width:64px;
  }
  #readingTime {
    display:none;
  }
  .statusbar {
    gap:8px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

@media(min-width:701px) and (max-width:1379px) {
  .app-shell[data-panel=style] .workspace {
    padding-right:298px;
    grid-template-columns:minmax(0,1fr);
  }
}

/* Wider workspaces use a comfortable reading scale without changing article styles. */
@media (min-width: 1101px) {
  :root { --split: 46%; }
  .topbar { height: 70px; gap: 24px; padding: 0 32px; }
  .brand-logo { width: 164px; }
  .document-info #documentTitle { font-size: 16px; }
  .document-info #saveStatus { font-size: 13px; }
  .workspace-tools { height: 54px; }
  .insert-bar { padding: 0 32px; gap: 8px; }
  .insert-bar > button, .insert-bar > .menu-anchor > button { font-size: 14px; }
  .view-tabs button { min-width: 78px; font-size: 13px; min-height: 36px; }
  .check-toggle { font-size: 13px; }
  #editor { font-size: 17px; padding: 34px 54px 44px; line-height: 1.8; }
  .phone-frame { padding: 26px 34px 40px; }
  .wechat-preview { width: min(100%, 640px); padding: 32px 38px 42px; }
  .statusbar { height: 32px; font-size: 12px; }
}

@media(min-width:701px) {
  .app-shell[data-view=preview] .workspace-tools {
    grid-template-columns:1fr;
  }
  .app-shell[data-view=preview] .insert-bar {
    display:none;
  }
  .app-shell[data-view=preview] .view-tools {
    border-left:0;
    justify-content:flex-end;
  }
  .app-shell[data-view=preview] .view-tabs {
    margin-right:auto;
  }
}

@media(max-width:700px) {
  .panel-head { height:56px; }
  .control-group input[type=range] { height:44px; }
  .side-panel .text-button,.side-panel .image-row button { min-height:44px; }
  .content-metrics { white-space:nowrap; }
  #copyStatus { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
}

/* Keep theme navigation visible independently of the scrolling catalog. */
.theme-picker-head { flex-shrink:0; padding:12px 16px 0; border-bottom:1px solid var(--line); }
.theme-picker-title { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.theme-picker-title h3 { font-size:13px; margin:0; }
.theme-picker-title button { min-height:44px; font-size:12px; }
.theme-compare-dialog { width:min(960px, calc(100vw - 32px)); max-height:90dvh; overflow:auto; background:#f6f7f5; border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 80px #0002; }
.theme-compare-dialog > .panel-head { position:sticky; top:0; z-index:1; background:#fff; }
.theme-compare-note { margin:16px 24px; font-size:13px; color:var(--muted); }
.theme-compare-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; padding:0 24px 24px; }
.theme-compare-grid > section { min-width:0; }
.theme-compare-grid label { font-size:13px; margin-right:8px; }
.theme-compare-grid select { min-height:44px; max-width:100%; border:1px solid var(--line); border-radius:6px; padding:8px 12px; background:#fff; font:inherit; }
.theme-compare-paper { margin-top:12px; padding:26px 22px; border:1px solid var(--line); }
@media(max-width:700px) {
  .theme-compare-grid { grid-template-columns:1fr; padding:0 12px 16px; }
  .theme-compare-note { margin:12px; }
  .theme-compare-paper { padding:22px 16px; }
  .theme-compare-dialog { width:calc(100vw - 16px); max-height:94dvh; }
}