:root {
    --bg: #f4f6f8;
    --panel: #ffffff;
    --panel-2: #eef1f4;
    --text: #1d252c;
    --muted: #66727d;
    --border: #cfd6dc;
    --accent: #2d5f86;
    --accent-2: #214965;
    --danger: #a73b36;
    --shadow: 0 8px 24px rgba(0,0,0,.10);
    --editor-font-size: 16px;
    --editor-padding: 0.5in;
    --ruler-height: 30px;
    --ruler-width: 30px;
  }

  * { box-sizing: border-box; }
  html, body { height: 100%; min-height: 100dvh; margin: 0; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
  body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
  }
  body.dark {
    --bg: #181c20;
    --panel: #22272c;
    --panel-2: #2b3137;
    --text: #eef2f5;
    --muted: #a8b2ba;
    --border: #414950;
    --accent: #6ba0c8;
    --accent-2: #8eb6d4;
    --danger: #e47d76;
    --shadow: 0 8px 24px rgba(0,0,0,.35);
  }
  body.purple {
    --bg: #17121f;
    --panel: #21182c;
    --panel-2: #2d203b;
    --text: #f5eff9;
    --muted: #c1b0cc;
    --border: #4d3b5d;
    --accent: #7b4da8;
    --accent-2: #61398b;
    --danger: #ef858f;
    --shadow: 0 8px 24px rgba(0,0,0,.38);
  }
  body.emerald {
    --bg: #0d1c18;
    --panel: #122720;
    --panel-2: #19362c;
    --text: #f0f7f3;
    --muted: #acc4b8;
    --border: #4c5845;
    --accent: #126b4c;
    --accent-2: #0d563d;
    --danger: #ed8581;
    --shadow: 0 8px 24px rgba(0,0,0,.40);
  }
  body.emerald .brand,
  body.emerald .dialog-head {
    color: #d8bd68;
  }
  body.emerald .tab.active {
    box-shadow: inset 0 -2px 0 #d8bd68;
  }
  body.purple #editor a { color:#cda8f0; }
  body.emerald #editor a { color:#7fd7b1; }


  button, input, select { font: inherit; }
  button {
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    border-radius: 5px;
    padding: 6px 10px;
    cursor: pointer;
  }
  button:hover { background: var(--panel-2); }
  button { touch-action: manipulation; }
  button:disabled { opacity: .5; cursor: not-allowed; }
  button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
  button.primary:hover { background: var(--accent-2); }
  button.danger { color: var(--danger); }

  #app { height: 100%; height: 100dvh; display: grid; grid-template-rows: auto auto auto 1fr auto; }
  .topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));
    background: var(--panel);
    border-bottom: 1px solid var(--border);
  }
  .brand { font-weight: 700; margin-right: 8px; white-space: nowrap; }
  .spacer { flex: 1; }
  .toolbar {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 5px 10px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
  }
  .toolbar .sep { width: 1px; height: 24px; background: var(--border); margin: 0 3px; }
  .toolbar button { min-width: 34px; height: 34px; min-height: 34px; padding: 5px 8px; display: inline-flex; align-items: center; justify-content: center; }
  .toolbar .format-text { font-weight: 600; min-width: 34px; }
  .align-icon {
    width: 17px; height: 14px; display: inline-flex; flex-direction: column;
    justify-content: space-between; vertical-align: middle;
  }
  .align-icon i { display: block; height: 2px; border-radius: 1px; background: currentColor; }
  .align-icon.left i:nth-child(2), .align-icon.left i:nth-child(4),
  .align-icon.right i:nth-child(2), .align-icon.right i:nth-child(4),
  .align-icon.center i:nth-child(2), .align-icon.center i:nth-child(4) { width: 11px; }
  .align-icon.left i { align-self: flex-start; }
  .align-icon.right i { align-self: flex-end; }
  .align-icon.center i { align-self: center; }
  .bullet-icon { font-size: 22px; line-height: 1; display: inline-block; transform: translateY(-1px); }
  .numeric-icon {
    display: inline-flex; align-items: center; justify-content: center;
    height: 18px; min-width: 13px;
    font-size: 12px; line-height: 1; font-weight: 700;
    overflow: hidden;
  }
  .icon-btn { width: 36px; min-width: 36px; padding: 5px; display: inline-flex; align-items: center; justify-content: center; }
  .icon-btn svg { width: 18px; height: 18px; display: block; }
  .toolbar-menu-wrap { position: relative; display: inline-flex; }
  .color-button { gap: 4px; position: relative; display: inline-flex; align-items: center; justify-content: center; }
  .color-tool-icon { width: 19px; height: 19px; display: block; }
  .color-wheel-icon { width: 18px; height: 18px; border-radius: 50%; display: block; background: conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); border: 1px solid rgba(0,0,0,.28); box-shadow: inset 0 0 0 3px rgba(255,255,255,.38); }
  .color-history-icon { position: relative; width: 20px; height: 18px; display: inline-block; }
  .color-history-icon i { position: absolute; width: 11px; height: 7px; border-radius: 2px; border: 1px solid rgba(0,0,0,.22); }
  .color-history-icon i:nth-child(1) { left: 1px; top: 1px; background: #e53935; }
  .color-history-icon i:nth-child(2) { left: 4px; top: 5px; background: #fbc02d; }
  .color-history-icon i:nth-child(3) { left: 7px; top: 9px; background: #1e88e5; }
  .color-history-icon b { position: absolute; right: -1px; top: -4px; font-size: 11px; line-height: 1; font-weight: 700; }
  .mobile-expand-btn { display: none; align-items: center; justify-content: center; min-width: 38px !important; font-weight: 700; }
  .toolbar-popover {
    position: absolute; z-index: 80; top: calc(100% + 5px); left: 0;
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: var(--shadow); padding: 8px;
  }
  .toolbar-popover[hidden] { display: none; }
  .color-grid { width: 184px; display: grid; grid-template-columns: repeat(8, 18px); gap: 5px; }
  .color-swatch { width: 18px; height: 18px; min-width: 18px !important; padding: 0 !important; border-radius: 3px; border: 1px solid rgba(0,0,0,.28); }
  .history-popover { width: min(310px, calc(100vw - 20px)); padding: 6px; }
  .history-title { font-size: 11px; color: var(--muted); padding: 4px 5px 7px; }
  .color-history-list { display: grid; gap: 2px; }
  .history-color-row {
    width: 100%; display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 8px;
    padding: 6px; border: 0; background: transparent; text-align: left; border-radius: 5px;
  }
  .history-color-row:hover { background: var(--panel-2); }
  .history-chip { width: 18px; height: 18px; border-radius: 3px; border: 1px solid rgba(0,0,0,.28); }
  .history-hex { font: 12px/1.2 Consolas, "Courier New", monospace; overflow: hidden; text-overflow: ellipsis; }
  .history-pct { color: var(--muted); font-size: 11px; white-space: nowrap; }
  .history-empty { padding: 9px 6px; color: var(--muted); font-size: 12px; }
  .color-wheel-popover { position: fixed; width: 236px; padding: 10px; z-index: 95; }
  .wheel-canvas-wrap { display: flex; justify-content: center; padding: 2px 0 8px; }
  #colorWheelCanvas { width: 184px; height: 184px; border-radius: 50%; display: block; touch-action: none; cursor: crosshair; box-shadow: 0 0 0 1px rgba(0,0,0,.24); }
  .wheel-control { display: grid; gap: 5px; margin-top: 7px; }
  .wheel-control label { font-size: 11px; color: var(--muted); }
  .wheel-control input[type="range"] { width: 100%; accent-color: var(--accent); }
  .wheel-value-row { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 7px; align-items: center; margin-top: 8px; }
  .wheel-preview { width: 30px; height: 30px; border-radius: 5px; border: 1px solid var(--border); }
  #colorHexInput { width: 100%; min-width: 0; padding: 6px 7px; border: 1px solid var(--border); border-radius: 5px; background: var(--panel); color: var(--text); font: 12px/1.2 Consolas, "Courier New", monospace; text-transform: uppercase; }
  .wheel-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 9px; }
  .toolbar button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

  .tabsbar {
    display: flex;
    align-items: end;
    min-height: 36px;
    gap: 2px;
    padding: 4px 8px 0;
    background: var(--panel-2);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .tab {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 125px;
    max-width: 240px;
    padding: 7px 8px 7px 10px;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 7px 7px 0 0;
    background: transparent;
    cursor: pointer;
    user-select: none;
  }
  .tab.active { background: var(--panel); }
  .tab-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
  .dirty-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); visibility: hidden; }
  .tab.dirty .dirty-dot { visibility: visible; }
  .tab-close { border: 0; background: transparent; padding: 0 2px; border-radius: 3px; color: var(--muted); }
  .tab-close:hover { color: var(--text); background: var(--panel-2); }

  .workspace {
    min-height: 0;
    min-width: 0;
    position: relative;
    display: grid;
    grid-template-columns: 0 minmax(0, 1fr);
    transition: grid-template-columns .18s ease;
  }
  .workspace.files-open { grid-template-columns: 260px minmax(0, 1fr); }
  .sidebar {
    min-width: 0;
    width: 260px;
    background: var(--panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .18s ease, visibility .18s;
    overflow: hidden;
    z-index: 20;
  }
  .workspace.files-open .sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  .drawer-backdrop { display: none; }
  .sidebar-head { padding: 10px; border-bottom: 1px solid var(--border); }
  .sidebar-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .sidebar-title strong { font-size: 14px; }
  .sidebar-title-right { display: flex; align-items: center; gap: 6px; }
  .drawer-close { padding: 2px 7px; line-height: 1.2; }
  #fileSearch {
    width: 100%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    padding: 7px 8px;
    border-radius: 5px;
    outline: none;
  }
  #fileSearch:focus { border-color: var(--accent); }
  #fileList { overflow: auto; padding: 5px; flex: 1; }
  .file-row {
    border-radius: 5px;
    padding: 8px;
    cursor: pointer;
    display: grid;
    gap: 3px;
  }
  .file-row:hover, .file-row.selected { background: var(--panel-2); }
  .file-row[draggable="true"] { cursor: grab; }
  .file-row.dragging { opacity: .45; cursor: grabbing; }
  .file-row.drag-over-before { box-shadow: inset 0 2px 0 var(--accent); }
  .file-row.drag-over-after { box-shadow: inset 0 -2px 0 var(--accent); }
  .file-context-menu {
    position: fixed; z-index: 1200; min-width: 150px; padding: 5px;
    border: 1px solid var(--border); border-radius: 7px; background: var(--panel);
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
  }
  .file-context-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; }
  .file-context-menu button:hover, .file-context-menu button:focus { background: var(--panel-2); }
  .file-context-menu .danger { color: var(--danger); }
  .file-row .name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .file-row .meta { font-size: 11px; color: var(--muted); }
  .empty-list { padding: 14px 8px; color: var(--muted); font-size: 13px; text-align: center; }
  .sidebar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 8px; border-top: 1px solid var(--border); }

  .editor-shell {
    min-width: 0; min-height: 0; background: var(--panel);
    display: grid; grid-template-rows: var(--ruler-height) minmax(0, 1fr);
  }
  .top-ruler-row, .editor-stage {
    min-width: 0; min-height: 0;
    display: grid; grid-template-columns: var(--ruler-width) minmax(0, 1fr);
  }
  .ruler-corner {
    border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
    background: var(--panel-2);
  }
  .ruler-wrap {
    min-width: 0; min-height: 0;
    border-bottom: 1px solid var(--border);
    background: var(--panel-2);
    overflow: hidden; user-select: none;
  }
  .ruler-wrap.horizontal {
    height: var(--ruler-height);
    padding: 0 var(--editor-padding);
  }
  #ruler {
    height: 100%; position: relative; overflow: hidden;
    color: var(--muted); font-size: 9px; line-height: 1;
  }
  .ruler-tick {
    position: absolute; bottom: 0; width: 1px; background: var(--muted); opacity: .72;
  }
  .ruler-label {
    position: absolute; top: 3px; transform: translateX(-50%);
    color: var(--muted); font-size: 9px;
  }
  .vertical-ruler-wrap {
    width: var(--ruler-width); min-height: 0;
    padding: var(--editor-padding) 0;
    border-right: 1px solid var(--border);
    background: var(--panel-2); overflow: hidden; user-select: none;
  }
  #verticalRuler {
    width: 100%; height: 100%; position: relative; overflow: hidden;
    color: var(--muted); font-size: 9px; line-height: 1;
  }
  .vertical-ruler-tick {
    position: absolute; right: 0; height: 1px; background: var(--muted); opacity: .72;
  }
  .vertical-ruler-label {
    position: absolute; left: 3px; transform: translateY(-50%);
    color: var(--muted); font-size: 9px;
  }
  #editor {
    min-height: 0; min-width: 0; overflow: auto;
    padding: var(--editor-padding); outline: none;
    font-family: Consolas, "Courier New", monospace;
    font-size: var(--editor-font-size); line-height: 1.55;
    white-space: pre-wrap; overflow-wrap: anywhere;
    tab-size: 4; -moz-tab-size: 4;
    background: var(--panel); color: var(--text); caret-color: var(--text);
  }
  #editor ul, #editor ol { margin-top: .35em; margin-bottom: .35em; padding-left: 2em; }
  #editor p, #editor div { max-width: 100%; }
  #editor a { color: #1467b8; text-decoration: underline; cursor: pointer; text-underline-offset: 2px; }
  body.dark #editor a { color: #7db9ed; }
  #editor.no-wrap { white-space: pre; overflow-wrap: normal; }
  #editor:empty::before { content: "Start typing…"; color: var(--muted); pointer-events: none; }

  .statusbar {
    min-height: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 10px;
    border-top: 1px solid var(--border);
    background: var(--panel);
    color: var(--muted);
    font-size: 12px;
  }
  #statusMessage { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  dialog {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    box-shadow: var(--shadow);
    padding: 0;
    width: min(460px, calc(100vw - 24px));
  }
  dialog::backdrop { background: rgba(0,0,0,.35); }
  .dialog-head { padding: 14px 16px; font-weight: 700; border-bottom: 1px solid var(--border); }
  .dialog-body { padding: 16px; display: grid; gap: 12px; }
  .dialog-actions { padding: 12px 16px; display: flex; justify-content: flex-end; gap: 7px; border-top: 1px solid var(--border); }
  .field { display: grid; gap: 5px; }
  .field label { font-size: 12px; color: var(--muted); }
  .field input, .field select {
    width: 100%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    border-radius: 5px;
    padding: 8px;
  }
  .small-note { font-size: 12px; color: var(--muted); line-height: 1.4; }
  .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .checkbox-row { display: flex; align-items: center; gap: 8px; }

  /* PWA update notice: intentionally independent of the transient toast. */
  #pwaUpdateNotice {
    position: fixed;
    right: 16px;
    bottom: 42px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(460px, calc(100vw - 24px));
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--panel);
    color: var(--text);
    box-shadow: var(--shadow);
  }
  #pwaUpdateNotice[hidden] { display: none !important; }
  #pwaUpdateNotice .pwa-update-copy { min-width: 0; flex: 1 1 auto; }
  #pwaUpdateNotice strong { display: block; font-size: 13px; }
  #pwaUpdateNotice span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
  #pwaUpdateNotice .pwa-update-actions { display: flex; gap: 6px; flex: 0 0 auto; }
  @media (max-width:760px) {
    #pwaUpdateNotice { left: 12px; right: 12px; bottom: 40px; max-width: none; }
  }

  #toast {
    position: fixed;
    right: 16px;
    bottom: 42px;
    background: var(--text);
    color: var(--panel);
    padding: 9px 12px;
    border-radius: 6px;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .15s, transform .15s;
    max-width: 420px;
    z-index: 99;
  }
  #toast.show { opacity: 1; transform: translateY(0); }

  @media (max-width: 760px) {
    :root { --editor-padding: 16px; --ruler-height: 28px; --ruler-width: 28px; }
    .brand { display: none; }
    .topbar, .toolbar {
      overflow: visible;
      flex-wrap: wrap;
      align-content: flex-start;
      -webkit-overflow-scrolling: auto;
      scrollbar-width: none;
    }
    .topbar::-webkit-scrollbar, .toolbar::-webkit-scrollbar { display: none; }
    .topbar button, .toolbar button { white-space: nowrap; min-height: 40px; height: 40px; }
    .toolbar { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
    .mobile-expand-btn { display: inline-flex; }
    .topbar .spacer { display: none; }
    .topbar:not(.mobile-expanded) .mobile-extra, .toolbar:not(.mobile-expanded) .mobile-extra { display: none !important; }
    .topbar.mobile-expanded .mobile-expand-btn, .toolbar.mobile-expanded .mobile-expand-btn { order: 999; }
    .topbar.mobile-expanded, .toolbar.mobile-expanded { padding-bottom: 7px; }
    #editor { padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); font-size: max(16px, var(--editor-font-size)); }
    input, select { font-size: 16px; }
    .toolbar-popover:not(.color-wheel-popover) { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(40px + env(safe-area-inset-bottom)); width: auto; max-width: none; }
    .color-wheel-popover { width: min(236px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto; }
    .color-grid { width: 100%; grid-template-columns: repeat(8, minmax(22px, 1fr)); gap: 7px; }
    .color-swatch { width: 100%; min-width: 0 !important; height: 30px; }
    .workspace, .workspace.files-open { grid-template-columns: minmax(0, 1fr); }
    .sidebar {
      position: absolute;
      inset: 0 auto 0 0;
      width: min(86vw, 320px);
      max-width: 320px;
      box-shadow: var(--shadow);
      transform: translateX(-102%);
    }
    .workspace.files-open .sidebar { transform: translateX(0); }
    .drawer-backdrop {
      display: block;
      position: absolute;
      inset: 0;
      z-index: 15;
      background: rgba(0,0,0,.28);
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease;
    }
    .workspace.files-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
    .top-ruler-row { display: none; }
    .editor-shell { grid-template-rows: minmax(0, 1fr); }
    .editor-stage { grid-template-columns: minmax(0, 1fr); }
    .vertical-ruler-wrap { display: none; }
    .statusbar { overflow-x: auto; white-space: nowrap; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
    #toast { left: 12px; right: 12px; bottom: 40px; max-width: none; }
  }
  @media (hover: none) and (pointer: coarse) {
    .top-ruler-row { display: none; }
    .editor-shell { grid-template-rows: minmax(0, 1fr); }
    .editor-stage { grid-template-columns: minmax(0, 1fr); }
    .vertical-ruler-wrap { display: none; }
  }
  @media (max-width: 560px) {
    .settings-grid { grid-template-columns: 1fr; }
    .tabsbar { min-height: 38px; }
    .tab { min-width: 112px; max-width: 190px; }
    dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; }
  }

  /* v0.8.0 */
  .sidebar-actions { flex-wrap: wrap; }
  .file-row.folder { font-weight: 650; }
  .file-row.folder .name::before { content:"📁"; margin-right:7px; }
  .file-row.file-child { padding-left: 28px; }
  .file-row .drag-hint { opacity:.45; font-size:11px; margin-left:auto; }
  .findbar { display:flex; gap:6px; align-items:center; padding:6px 8px; border-bottom:1px solid var(--border); background:var(--panel); flex-wrap:wrap; }
  .findbar[hidden] { display:none; }
  .findbar input { min-width:120px; flex:1 1 160px; }
  .findbar .match-count { min-width:62px; text-align:center; font-size:12px; color:var(--muted); }
  .zoom-control { display:inline-flex; align-items:center; gap:4px; }
  .zoom-control button { min-width:26px; height:24px; padding:0 6px; }
  #zoomLabel { min-width:42px; text-align:center; }
  .ruler-marker { position:absolute; z-index:5; width:0; height:0; cursor:ew-resize; }
  .ruler-marker.left { top:15px; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:9px solid var(--accent); transform:translateX(-6px); }
  .ruler-marker.first { top:2px; border-left:6px solid transparent; border-right:6px solid transparent; border-top:9px solid var(--accent); transform:translateX(-6px); }
  .ruler-marker.right { top:15px; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:9px solid var(--danger); transform:translateX(-6px); }
  .tab-stop-marker { position:absolute; top:2px; width:8px; height:8px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:translateX(-4px) rotate(-45deg); cursor:pointer; z-index:4; }
  #editor { transform-origin: top left; }
  .autosave-note { font-size:12px; color:var(--muted); }
  @media (max-width:760px) {
    .findbar { padding:5px; }
    .findbar input { flex-basis:130px; }
  }


  .type-control { height:30px; min-height:30px; border:1px solid var(--border); border-radius:6px; background:var(--button); color:var(--text); padding:0 24px 0 7px; max-width:150px; }
  .type-control.size { width:76px; min-width:76px; padding-left:9px; padding-right:26px; }
  .mobile-expand-btn { display:none; }
  @media (max-width:760px) {
    .mobile-expand-btn { display:inline-flex; }
    .type-control { height:36px; min-height:36px; font-size:16px; }
  }
  


  /* v0.9.2: expansion controls are width-responsive, never pointer-responsive. */
  @media (min-width: 761px) {
    #topbarExpandBtn, #toolbarExpandBtn { display:none !important; }
    .topbar .mobile-extra, .toolbar .mobile-extra { display:inline-flex; }
    .toolbar select.mobile-extra { display:inline-block; }
    .toolbar span.mobile-extra { display:inline-block; }
  }
  @media (max-width:760px) {
    #topbarExpandBtn, #toolbarExpandBtn { display:inline-flex !important; }

    /* Keep the primary file controls on one row on narrower phones.
       Only the top-bar expander is compacted; the formatting expander keeps
       its larger touch target. */
    #topbarExpandBtn {
      flex: 0 0 28px;
      width: 28px;
      min-width: 28px !important;
      padding-left: 0;
      padding-right: 0;
    }
  }

  #printSurface { display:none; }
  


  #printSurface { display:none; }
  @media print {
    @page { margin:0.5in; }
    html, body {
      margin:0 !important; padding:0 !important; width:auto !important; height:auto !important;
      min-height:0 !important; overflow:visible !important; background:white !important;
    }
    body > *:not(#printSurface) { display:none !important; }
    body > #printSurface {
      display:block !important; position:static !important; inset:auto !important;
      margin:0 !important; padding:0 !important; width:auto !important; height:auto !important;
      min-height:0 !important; overflow:visible !important; background:white !important; color:black !important;
    }
    #printSurface .print-document {
      display:block !important; position:static !important;
      margin:0 !important; border:0 !important; box-shadow:none !important;
      background:white !important; color:black; white-space:pre-wrap;
      overflow:visible !important; min-height:0 !important; height:auto !important; width:auto !important;
    }
    #printSurface a { color:inherit !important; text-decoration:underline !important; }
  }


  .file-row .snippet { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
  #recentMenu { min-width:230px; max-width:min(360px,calc(100vw - 16px)); }
  #recentMenu .empty-recent { padding:8px 10px; color:var(--muted); font-size:12px; }


  .type-control option,
  #themeSelect option,
  #moveFolderSelect option {
    background:#ffffff;
    color:#17202a;
  }
  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .type-control option,
    html:not([data-theme="light"]) #themeSelect option,
    html:not([data-theme="light"]) #moveFolderSelect option {
      background:#20262d;
      color:#f3f6f9;
    }
  }
  html[data-theme="dark"] .type-control option,
  html[data-theme="dark"] #themeSelect option,
  html[data-theme="dark"] #moveFolderSelect option {
    background:#20262d;
    color:#f3f6f9;
  }
  html[data-theme="purple"] .type-control option,
  html[data-theme="purple"] #themeSelect option,
  html[data-theme="purple"] #moveFolderSelect option {
    background:#21182c;
    color:#f5eff9;
  }
  html[data-theme="emerald"] .type-control option,
  html[data-theme="emerald"] #themeSelect option,
  html[data-theme="emerald"] #moveFolderSelect option {
    background:#122720;
    color:#f0f7f3;
  }
  .editor-context-menu { min-width:205px; }
  .file-context-menu .context-sep { height:1px; background:var(--border); margin:4px 3px; }
  .file-context-menu button:disabled { opacity:.42; cursor:default; background:transparent !important; }


  .file-row.folder { border-left:3px solid transparent; }
  .file-row.folder.drag-folder-target { border-left-color:var(--accent); background:color-mix(in srgb, var(--accent) 15%, var(--panel)); outline:1px dashed var(--accent); outline-offset:-2px; }
  .file-row .folder-count { margin-left:6px; font-size:11px; color:var(--muted); font-weight:500; }
  .file-row.file-child { position:relative; }
  .file-row.file-child::before { content:""; position:absolute; left:18px; top:0; bottom:0; width:1px; background:var(--border); opacity:.65; }


  .root-drop-zone {
    position:sticky; top:0; z-index:4; margin:4px 6px 6px; padding:7px 9px;
    border:1px dashed var(--border); border-radius:6px; background:var(--panel);
    color:var(--muted); font-size:12px; text-align:center;
  }
  .root-drop-zone.root-drop-active {
    border-color:var(--accent); color:var(--text);
    background:color-mix(in srgb, var(--accent) 15%, var(--panel));
    outline:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  }


  .edit-tools-menu { min-width:236px; width:max-content; max-width:min(320px,calc(100vw - 16px)); }
  .edit-tools-menu > button {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    width:100%; min-height:36px; height:auto; padding:7px 10px;
    white-space:nowrap; line-height:1.2; text-align:left;
  }
  .edit-tools-menu > button > span { margin-left:auto; flex:0 0 auto; font-size:11px; }
  .edit-tools-menu .context-sep { margin:5px 2px; }
  @media(max-width:420px) {
    .edit-tools-menu { min-width:220px; max-width:calc(100vw - 12px); }
    .edit-tools-menu > button { white-space:normal; }
  }
  .edit-tools-menu button { width:100%; display:flex; justify-content:space-between; gap:16px; text-align:left; }
  .edit-tools-menu button span { color:var(--muted); font-size:11px; }

  .tabs-shell { display:flex; min-width:0; background:var(--panel-2); border-bottom:1px solid var(--border); }
  .tabs-shell .tabsbar { flex:1; min-width:0; border-bottom:0; }
  .all-tabs-btn { flex:0 0 auto; align-self:stretch; border-radius:0; border-top:0; border-bottom:0; border-right:0; white-space:nowrap; }
  .tab-context-menu { min-width:220px; }
  .tab-context-menu button span { float:right; margin-left:18px; color:var(--muted); font-size:11px; }
  .all-tabs-menu { min-width:220px; max-width:min(360px,calc(100vw - 20px)); max-height:60vh; overflow:auto; }
  .all-tabs-menu button.active { font-weight:700; }

  .wide-dialog { width:min(650px,calc(100vw - 24px)); }
  .backup-summary { padding:10px; border:1px solid var(--border); border-radius:6px; background:var(--bg); line-height:1.6; }
  .backup-warnings { padding:9px; border:1px solid #b87a00; border-radius:6px; background:color-mix(in srgb,#f0a000 12%,var(--panel)); }
  .choice-row { display:flex; flex-wrap:wrap; gap:16px; }
  .restore-item-list { max-height:190px; overflow:auto; border:1px solid var(--border); border-radius:5px; margin-top:7px; padding:6px; }
  .restore-item-list label { display:flex; gap:7px; align-items:center; padding:4px; }
.line-number-gutter{display:none;flex:0 0 46px;width:46px;box-sizing:border-box;padding:var(--editor-padding) 8px var(--editor-padding) 4px;text-align:right;color:var(--muted);background:var(--panel-2);border-right:1px solid var(--border);font:12px/1.5 monospace;user-select:none;overflow:hidden;white-space:pre}.editor-stage.show-line-numbers .line-number-gutter{display:block}.special-char-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;max-width:420px}.special-char-grid button{min-width:38px;min-height:36px;font-size:18px}.properties-grid{display:grid;grid-template-columns:max-content 1fr;gap:7px 14px;align-items:start}.properties-grid .prop-label{color:var(--muted)}@media(max-width:760px){.line-number-gutter{flex-basis:36px;width:36px;padding-left:2px;padding-right:5px;font-size:10px}}
.editor img[data-asset-id]{max-width:100%;height:auto;display:block;margin:8px 0;cursor:pointer;border-radius:2px}.editor img[data-asset-id].image-selected{outline:2px solid var(--accent);outline-offset:3px}.editor img[data-align="center"]{margin-left:auto;margin-right:auto}.editor img[data-align="right"]{margin-left:auto;margin-right:0}.editor img[data-align="left"]{margin-left:0;margin-right:auto}
@media(max-width:760px){.editor img[data-asset-id]{max-width:100%!important}}
.sidebar-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.sidebar-actions button{min-width:0}.file-list-root-active,#fileList.root-drop-active{outline:2px dashed var(--accent);outline-offset:-3px}

#fileList{position:relative}
#rootDropZone{position:sticky;top:0;z-index:12;box-sizing:border-box}
#rootDropZone[hidden]{display:none!important}
body.files-dragging #rootDropZone:not([hidden]){display:block}

.app-confirm-dialog{width:min(430px,calc(100vw - 28px));padding:0;overflow:hidden}
.app-confirm-dialog .dialog-body{padding:16px 18px;line-height:1.45;white-space:pre-line}
.app-confirm-dialog .dialog-actions{padding:10px 14px 14px}
.app-confirm-dialog .danger{background:#b42318;color:#fff;border-color:#8f1c13}
.app-confirm-dialog .danger:hover{filter:brightness(.96)}

.markdown-mode-toggle{display:inline-flex;align-items:center;gap:2px;margin-left:4px}
.markdown-mode-toggle[hidden]{display:none!important}
.markdown-mode-toggle button{min-width:58px}
.markdown-mode-toggle button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
#markdownSource{box-sizing:border-box;width:100%;min-height:100%;height:100%;resize:none;border:0;outline:0;background:var(--paper);color:var(--ink);padding:var(--editor-padding);font:16px/1.5 monospace;tab-size:4;overflow:auto}
#markdownPreview{box-sizing:border-box;width:100%;min-height:100%;height:100%;overflow:auto;background:var(--paper);color:var(--ink);padding:var(--editor-padding);line-height:1.55}
#markdownPreview h1,#markdownPreview h2,#markdownPreview h3,#markdownPreview h4,#markdownPreview h5,#markdownPreview h6{line-height:1.25;margin:1.1em 0 .45em}
#markdownPreview h1{font-size:2em;border-bottom:1px solid var(--border);padding-bottom:.2em}
#markdownPreview h2{font-size:1.55em;border-bottom:1px solid var(--border);padding-bottom:.15em}
#markdownPreview p{margin:.7em 0} #markdownPreview ul,#markdownPreview ol{padding-left:1.8em}
#markdownPreview blockquote{margin:.8em 0;padding:.15em .9em;border-left:4px solid var(--border);opacity:.9}
#markdownPreview code{font-family:monospace;background:color-mix(in srgb,var(--paper) 80%,var(--ink) 20%);padding:.08em .3em;border-radius:3px}
#markdownPreview pre{overflow:auto;padding:.8em;background:color-mix(in srgb,var(--paper) 88%,var(--ink) 12%);border:1px solid var(--border);border-radius:5px}
#markdownPreview pre code{background:none;padding:0}
#markdownPreview table{border-collapse:collapse;max-width:100%} #markdownPreview th,#markdownPreview td{border:1px solid var(--border);padding:.35em .55em;text-align:left}
#markdownPreview img{max-width:100%}
body.markdown-active #formatToolbar .rich-only:not(.md-supported){display:none!important}
@media(max-width:760px){.markdown-mode-toggle button{min-width:52px;padding-left:7px;padding-right:7px}}

body.markdown-active #fontSizeSelect,body.markdown-active #justifyLeftBtn,body.markdown-active #justifyCenterBtn,body.markdown-active #justifyRightBtn,
body.markdown-active #colorPaletteBtn,body.markdown-active #colorWheelBtn,body.markdown-active #colorHistoryBtn,
body.markdown-active #colorPaletteMenu,body.markdown-active #colorWheelMenu,body.markdown-active #colorHistoryMenu{display:none!important}

.trash-dialog{width:min(720px,94vw);max-height:82vh}
.trash-toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}
.trash-list{display:flex;flex-direction:column;gap:7px;max-height:52vh;overflow:auto}
.trash-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--border);border-radius:6px;padding:9px 10px}
.trash-name{font-weight:600;overflow-wrap:anywhere}.trash-meta{font-size:12px;opacity:.72;margin-top:3px}
.trash-actions{display:flex;gap:6px;align-items:center}.trash-empty{padding:28px 12px;text-align:center;opacity:.7}
@media(max-width:560px){.trash-row{grid-template-columns:1fr}.trash-actions{justify-content:flex-end}.trash-toolbar{align-items:flex-start;flex-direction:column}}

.open-file-dialog{width:min(680px,94vw);max-height:82vh}
#openFileSearch{box-sizing:border-box;width:100%;margin-bottom:10px}
.open-file-list{min-height:220px;max-height:52vh;overflow:auto;border:1px solid var(--border);border-radius:6px;padding:4px}
.open-file-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:8px 9px;border-radius:5px;cursor:default;align-items:center}
.open-file-row:hover{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.open-file-row.selected{background:color-mix(in srgb,var(--accent) 18%,transparent);outline:1px solid color-mix(in srgb,var(--accent) 50%,transparent)}
.open-file-row .open-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.open-file-row .open-location{font-size:11px;color:var(--muted);white-space:nowrap}
.open-file-empty{padding:30px 12px;text-align:center;color:var(--muted)}

/* Markdown shares the editor's document column. Without an explicit grid column, these
   siblings become implicit grid columns and can collapse to a character-wide strip. */
.editor-stage{position:relative}
#editor,#markdownSource,#markdownPreview{grid-column:2;grid-row:1;min-width:0;min-height:0}
.editor-stage:has(.line-number-gutter:not([hidden])) #editor,
.editor-stage:has(.line-number-gutter:not([hidden])) #markdownSource,
.editor-stage:has(.line-number-gutter:not([hidden])) #markdownPreview{grid-column:3}
body.markdown-active .editor-stage{grid-template-columns:0 minmax(0,1fr)}
body.markdown-active #markdownSource,body.markdown-active #markdownPreview{width:100%;max-width:none}

.new-document-dialog{width:min(520px,94vw)}
.new-type-grid{display:grid;gap:8px}
.new-type-grid button{text-align:left;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.new-type-grid button span{font-size:12px;color:var(--muted);font-weight:400}
#markdownSource[hidden],#markdownPreview[hidden],#editor[hidden]{display:none!important}
body.plain-active #formatToolbar .rich-only,
body.plain-active #fontSizeSelect,body.plain-active #justifyLeftBtn,body.plain-active #justifyCenterBtn,body.plain-active #justifyRightBtn,
body.plain-active #unorderedListBtn,body.plain-active #orderedListBtn,body.plain-active #outdentBtn,body.plain-active #indentBtn,
body.plain-active #colorPaletteBtn,body.plain-active #colorWheelBtn,body.plain-active #colorHistoryBtn{display:none!important}
.doc-type-badge{font-size:10px;line-height:1;padding:2px 4px;border:1px solid var(--border);border-radius:3px;color:var(--muted);margin-left:5px;vertical-align:middle}

/* `hidden` must override authored grid/flex display rules. This is especially important
   for source-mode documents: Markdown/Plain Text must not leave rich-text rulers visible. */
.top-ruler-row[hidden],
.vertical-ruler-wrap[hidden],
.line-number-gutter[hidden],
#markdownSource[hidden],
#markdownPreview[hidden],
#editor[hidden] { display:none !important; }

/* v2.1.3 document-surface contract.
   The stage owns scrolling. Exactly one document surface is visible at a time. */
.editor-stage{
  position:relative !important;
  display:block !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:auto !important;
}
#editor,
#markdownSource,
#markdownPreview{
  box-sizing:border-box !important;
  display:block;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:100% !important;
  height:auto !important;
  grid-column:auto !important;
  grid-row:auto !important;
}
#editor{overflow:visible !important}
#markdownSource{
  overflow:auto !important;
  resize:none;
  height:100% !important;
}
#markdownPreview{
  overflow:visible !important;
  padding:var(--editor-padding) !important;
  white-space:normal !important;
}
#markdownPreview > :first-child{margin-top:0}
#markdownPreview > :last-child{margin-bottom:0}
#editor[hidden],
#markdownSource[hidden],
#markdownPreview[hidden],
.top-ruler-row[hidden],
.vertical-ruler-wrap[hidden],
.line-number-gutter[hidden]{display:none !important}

/* Rich text can reserve gutter space internally; source/preview documents do not. */
body.markdown-active .editor-stage,
body.plain-active .editor-stage{padding:0 !important}

/* v2.1.4: documentHost is the single occupant of the document grid cell.
   This preserves the original vertical ruler column and gives every document mode
   exactly the same available width/height. */
.editor-stage{
  display:grid !important;
  grid-template-columns:var(--ruler-width) minmax(0,1fr) !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.editor-stage > .vertical-ruler-wrap{
  grid-column:1 !important;
  grid-row:1 !important;
  min-height:0 !important;
}
.editor-stage > .line-number-gutter:not([hidden]){
  grid-column:1 !important;
  grid-row:1 !important;
  z-index:2;
}
.document-host{
  grid-column:2 !important;
  grid-row:1 !important;
  position:relative !important;
  min-width:0 !important;
  min-height:0 !important;
  height:100% !important;
  overflow:hidden !important;
  background:var(--panel);
}
.document-host > #editor,
.document-host > #markdownSource,
.document-host > #markdownPreview{
  position:absolute !important;
  inset:0 !important;
  box-sizing:border-box !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:0 !important;
  grid-column:auto !important;
  grid-row:auto !important;
}
.document-host > #editor{overflow:auto !important}
.document-host > #markdownSource{
  overflow:auto !important;
  resize:none !important;
}
.document-host > #markdownPreview{
  overflow:auto !important;
  padding:var(--editor-padding) !important;
  white-space:normal !important;
}
.document-host > #editor[hidden],
.document-host > #markdownSource[hidden],
.document-host > #markdownPreview[hidden],
.top-ruler-row[hidden],
.vertical-ruler-wrap[hidden],
.line-number-gutter[hidden]{display:none !important}

/* Source documents intentionally have no rulers, so reclaim the ruler column. */
body.markdown-active .editor-stage,
body.plain-active .editor-stage{
  grid-template-columns:minmax(0,1fr) !important;
}
body.markdown-active .document-host,
body.plain-active .document-host{
  grid-column:1 !important;
}

/* Preserve the existing mobile/touch behavior: rulers are omitted and the document fills the stage. */
@media (max-width:760px), (hover:none) and (pointer:coarse){
  .editor-stage{grid-template-columns:minmax(0,1fr) !important}
  .document-host{grid-column:1 !important}
}

/* v2.1.5: Markdown/Plain Text hide the top ruler, so their editor shell must have one row.
   Keeping the normal two-row template would place editor-stage into the old ruler-height row. */
body.markdown-active .editor-shell,
body.plain-active .editor-shell{
  grid-template-rows:minmax(0,1fr) !important;
}
/* Rich Text keeps the original ruler row + full editor row. */
body:not(.markdown-active):not(.plain-active) .editor-shell{
  grid-template-rows:var(--ruler-height) minmax(0,1fr) !important;
}

/* v2.2.0 Files multi-selection */
.file-row.selected{
  background:color-mix(in srgb,var(--accent) 18%,var(--panel-2)) !important;
  outline:1px solid color-mix(in srgb,var(--accent) 48%,transparent);
}
.file-row.selection-anchor{
  outline:1px solid color-mix(in srgb,var(--accent) 78%,transparent);
}
#appConfirmMessage{white-space:pre-line}

/* Integrated Help / Manual ------------------------------------------------- */
.help-menu{min-width:210px}
.help-menu button{display:flex;justify-content:space-between;gap:18px}
.help-menu button span{color:var(--muted);font-size:11px}
.manual-dialog{
  width:min(1120px,calc(100vw - 24px));
  max-width:none;
  height:min(88dvh,900px);
  max-height:calc(100dvh - 24px);
  overflow:hidden;
}
.manual-dialog[open]{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
}
.manual-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 16px;border-bottom:1px solid var(--border);background:var(--panel);
}
.manual-title{font-size:17px;font-weight:700}
.manual-version{font-size:11px;color:var(--muted);margin-top:2px}
.manual-close{font-size:22px;line-height:1;padding:4px 9px}
.manual-tools{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:10px 14px;border-bottom:1px solid var(--border);background:var(--panel-2);
}
.manual-search-wrap{display:flex;align-items:center;gap:10px;min-width:0}
#manualSearch{width:min(440px,100%);background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:5px;padding:8px 10px}
.manual-section-select{display:none;max-width:100%;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:5px;padding:8px}
.manual-layout{display:grid;grid-template-columns:260px minmax(0,1fr);min-width:0;min-height:0;overflow:hidden}
.manual-nav{min-width:0;min-height:0;overflow:auto;padding:8px;border-right:1px solid var(--border);background:var(--panel-2)}
.manual-nav button{
  display:block;width:100%;border:0;background:transparent;text-align:left;
  padding:8px 9px;border-radius:5px;color:var(--text);font-size:13px;line-height:1.25;
}
.manual-nav button:hover{background:var(--panel)}
.manual-nav button.active{background:var(--accent);color:#fff}
.manual-nav button[hidden]{display:none!important}
.manual-content{
  min-width:0;min-height:0;overflow:auto;padding:24px clamp(20px,4vw,52px) 40px;
  line-height:1.62;background:var(--panel);color:var(--text);
}
.manual-content h2{font-size:1.55rem;margin:0 0 18px}
.manual-content h3{font-size:1.12rem;margin:26px 0 10px}
.manual-content p{max-width:82ch;margin:0 0 14px}
.manual-content ul,.manual-content ol{max-width:82ch;padding-left:26px}
.manual-content li{margin:5px 0}
.manual-content code{font-family:Consolas,"Courier New",monospace;background:var(--panel-2);padding:1px 4px;border-radius:3px}
.manual-content pre{
  max-width:100%;overflow:auto;padding:12px 14px;border:1px solid var(--border);
  border-radius:6px;background:var(--panel-2);font-family:Consolas,"Courier New",monospace;
}
.manual-content pre code{background:transparent;padding:0}
.manual-content table{border-collapse:collapse;max-width:100%;margin:12px 0 20px}
.manual-content th,.manual-content td{border:1px solid var(--border);padding:7px 9px;text-align:left;vertical-align:top}
.manual-content th{background:var(--panel-2)}
.manual-content hr{border:0;border-top:1px solid var(--border);margin:28px 0}
.manual-content a{color:var(--accent-2)}
.manual-footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-top:1px solid var(--border);background:var(--panel-2);
  color:var(--muted);font-size:11px;
}
.manual-footer kbd{
  display:inline-block;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;
  padding:1px 5px;background:var(--panel);color:var(--text);font:inherit;
}
#manualSectionStore{display:none!important}
@media(max-width:760px){
  .manual-dialog{width:calc(100vw - 12px);height:calc(100dvh - 12px);max-height:none}
  .manual-tools{grid-template-columns:1fr}
  .manual-section-select{display:block;width:100%}
  .manual-layout{grid-template-columns:minmax(0,1fr)}
  .manual-nav{display:none}
  .manual-content{padding:18px 16px 32px}
  .manual-footer span{display:none}
}

/* Backup & Restore hub ----------------------------------------------------- */
.backup-restore-dialog{width:min(720px,94vw)}
.backup-restore-body{display:grid;gap:10px}
.backup-restore-section{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;
  padding:14px;border:1px solid var(--border);border-radius:7px;background:var(--panel-2);
}
.backup-restore-section h3{margin:0 0 5px;font-size:14px}
.backup-restore-section p{margin:0;line-height:1.45}
.backup-restore-section .small-note{margin-top:7px}
.restore-safety-section{border-style:dashed}
.restore-safety-section button:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:620px){
  .backup-restore-section{grid-template-columns:1fr}
  .backup-restore-section button{justify-self:start}
}

.manual-callout{
  max-width:82ch;
  margin:16px 0;
  padding:12px 14px;
  border:1px solid var(--border);
  border-left-width:4px;
  border-radius:6px;
  background:var(--panel-2);
  line-height:1.55;
}

/* v2.3.4 line-number gutter: visibility and grid geometry are synchronized in JS.
   Rich Text replaces the vertical ruler column with the gutter. Source editors gain
   a gutter column only while line numbers are enabled. */
.editor-stage.show-line-numbers{
  grid-template-columns:46px minmax(0,1fr) !important;
}
.editor-stage.show-line-numbers > .line-number-gutter:not([hidden]){
  width:46px !important;
  min-width:46px !important;
  height:100% !important;
  overflow:hidden !important;
}
body.markdown-active .editor-stage.show-line-numbers,
body.plain-active .editor-stage.show-line-numbers{
  grid-template-columns:46px minmax(0,1fr) !important;
}
body.markdown-active .editor-stage.show-line-numbers .document-host,
body.plain-active .editor-stage.show-line-numbers .document-host{
  grid-column:2 !important;
}
@media(max-width:760px){
  .editor-stage.show-line-numbers,
  body.markdown-active .editor-stage.show-line-numbers,
  body.plain-active .editor-stage.show-line-numbers{
    grid-template-columns:36px minmax(0,1fr) !important;
  }
  .editor-stage.show-line-numbers > .line-number-gutter:not([hidden]){
    width:36px !important;
    min-width:36px !important;
  }
}

/* v2.3.6: line-number counts come from logical editor lines rather than innerText.
   Newline delimiters use actual JS newline escapes, and gutter metrics match the active editor. */

/* v2.3.7: the Markdown Edit/Preview control obeys its hidden attribute. */

/* v2.3.8: Purple and Emerald application themes. */

/* v2.4.1 Markdown-aware formatting --------------------------------------- */
.md-only[hidden]{display:none!important}
body.markdown-active #fontSizeSelect,
body.markdown-active #justifyLeftBtn,
body.markdown-active #justifyCenterBtn,
body.markdown-active #justifyRightBtn,
body.markdown-active #colorPaletteBtn,
body.markdown-active #colorWheelBtn,
body.markdown-active #colorHistoryBtn{display:none!important}
body.markdown-active #formatToolbar .sep.mobile-extra{display:none!important}
body.markdown-preview-active #formatToolbar .md-edit-control,
body.markdown-preview-active #markdownToolsWrap{display:none!important}
.markdown-tools-menu{max-height:min(68vh,520px);overflow:auto}

/* v2.4.1: shared Bold/Italic/List/Indent controls remain visible in Markdown Edit. */

/* v2.4.2 mobile document layout -------------------------------------------
   Mobile hides the Rich Text rulers. The shell must therefore have ONE row.
   A later desktop Rich Text rule previously restored the ruler-height row,
   causing editor-stage to auto-place into that ~30px row when the ruler was
   display:none — the same structural failure previously fixed for Markdown. */
@media (max-width:760px){
  .top-ruler-row,
  .vertical-ruler-wrap{
    display:none !important;
  }

  .editor-shell,
  body:not(.markdown-active):not(.plain-active) .editor-shell,
  body.markdown-active .editor-shell,
  body.plain-active .editor-shell{
    grid-template-rows:minmax(0,1fr) !important;
    min-width:0 !important;
    min-height:0 !important;
  }

  .editor-stage,
  body.markdown-active .editor-stage,
  body.plain-active .editor-stage{
    grid-template-columns:minmax(0,1fr) !important;
    min-width:0 !important;
    min-height:0 !important;
  }

  .document-host,
  body.markdown-active .document-host,
  body.plain-active .document-host{
    grid-column:1 !important;
    min-width:0 !important;
    min-height:0 !important;
    width:auto !important;
    max-width:100% !important;
  }

  /* Line numbers intentionally keep a small gutter. The document must occupy
     column 2 for Rich Text as well as source documents. */
  .editor-stage.show-line-numbers,
  body.markdown-active .editor-stage.show-line-numbers,
  body.plain-active .editor-stage.show-line-numbers{
    grid-template-columns:36px minmax(0,1fr) !important;
  }
  .editor-stage.show-line-numbers .document-host,
  body.markdown-active .editor-stage.show-line-numbers .document-host,
  body.plain-active .editor-stage.show-line-numbers .document-host{
    grid-column:2 !important;
  }

  /* Mobile status bar: keep only status, cursor position, and version. */
  #wordCount,
  #charCount,
  .zoom-control{
    display:none !important;
  }
  .statusbar{
    min-width:0;
    overflow:hidden !important;
    white-space:nowrap;
    gap:8px;
    padding:4px max(8px,env(safe-area-inset-right))
            max(4px,env(safe-area-inset-bottom))
            max(8px,env(safe-area-inset-left));
  }
  #statusMessage{
    flex:1 1 auto;
    min-width:0;
  }
  #cursorPosition,
  .statusbar > span:last-child{
    flex:0 0 auto;
  }
}

/* v2.4.3 mobile top-bar space conservation.
   Files provides access to the saved library on mobile, so the dedicated Open
   button is hidden at phone widths. Ctrl/Cmd+O and the Open dialog remain intact. */
@media (max-width:760px){
  #openBtn{display:none !important}
}

/* v2.5.0: Rich Text uses Notepad's built-in spelling engine and context-menu suggestions. */

/* v2.5.0 built-in spelling ------------------------------------------------ */
::highlight(notepad-spelling-errors){
  text-decoration-line:underline;
  text-decoration-style:wavy;
  text-decoration-color:#d93025;
  text-decoration-thickness:1.5px;
  text-underline-offset:2px;
}
.spell-context-section{display:grid;gap:2px}
.spell-context-section[hidden]{display:none!important}
.spell-context-word{padding:7px 10px 5px;font-size:12px;font-weight:700;color:var(--muted);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spell-suggestion-list{display:grid;gap:2px}
.spell-no-suggestions{padding:7px 10px;color:var(--muted);font-size:12px;font-style:italic}
.spell-suggestion-list button{font-weight:600}

/* v2.6.0 — desktop split workspace ---------------------------------------
   One live editor is mounted into the active pane. The other pane renders a
   synchronized in-memory view of its tab, so the existing command surface
   always has exactly one target. */
.split-workspace{
  min-width:0;
  min-height:0;
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  overflow:hidden;
  background:var(--panel);
}
.split-workspace.split-enabled{
  grid-template-columns:minmax(0,var(--split-left,50fr)) 7px minmax(0,var(--split-right,50fr));
}
.split-pane{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
  background:var(--panel);
  position:relative;
}
.split-workspace:not(.split-enabled) .split-pane{
  grid-template-rows:minmax(0,1fr);
}
.split-pane[hidden],
.split-divider[hidden],
.split-pane-header[hidden]{display:none!important}
.split-pane-header{
  min-width:0;
  height:31px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 9px;
  border-bottom:1px solid var(--border);
  background:var(--panel-2);
  color:var(--muted);
  user-select:none;
  cursor:pointer;
}
.split-pane.active .split-pane-header{
  color:var(--text);
  background:color-mix(in srgb,var(--accent) 11%,var(--panel));
  box-shadow:inset 0 -2px 0 var(--accent);
}
.split-pane-side{
  flex:0 0 auto;
  font-size:10px;
  line-height:1;
  letter-spacing:.08em;
  font-weight:700;
  color:var(--muted);
}
.split-pane-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  font-weight:600;
}
.split-pane-body{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.split-live-mount,
.split-snapshot{
  position:absolute;
  inset:0;
  min-width:0;
  min-height:0;
}
.split-live-mount{
  display:grid;
  overflow:hidden;
}
.split-live-mount:empty{display:none}
.split-live-mount > .editor-shell{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.split-snapshot{
  overflow:auto;
  background:var(--panel);
  color:var(--text);
  cursor:text;
  outline:none;
}
.split-snapshot[hidden]{display:none!important}
.split-snapshot:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}
.split-snapshot-content{
  box-sizing:border-box;
  min-width:0;
  min-height:100%;
  padding:var(--editor-padding);
  font-family:Consolas,"Courier New",monospace;
  font-size:var(--editor-font-size);
  line-height:1.55;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  tab-size:4;
}
.split-snapshot-content.rich{white-space:pre-wrap}
.split-snapshot-content.rich ul,
.split-snapshot-content.rich ol{margin-top:.35em;margin-bottom:.35em;padding-left:2em}
.split-snapshot-content.rich p,
.split-snapshot-content.rich div{max-width:100%}
.split-snapshot-content.rich img{max-width:100%;height:auto}
.split-snapshot-content.source{font-family:monospace;line-height:1.5}
.split-snapshot-content.markdown-preview{
  font-family:"Segoe UI",Arial,sans-serif;
  white-space:normal;
}
.split-snapshot-content.markdown-preview h1,
.split-snapshot-content.markdown-preview h2,
.split-snapshot-content.markdown-preview h3,
.split-snapshot-content.markdown-preview h4,
.split-snapshot-content.markdown-preview h5,
.split-snapshot-content.markdown-preview h6{line-height:1.25;margin:1.1em 0 .45em}
.split-snapshot-content.markdown-preview h1{font-size:2em;border-bottom:1px solid var(--border);padding-bottom:.2em}
.split-snapshot-content.markdown-preview h2{font-size:1.55em;border-bottom:1px solid var(--border);padding-bottom:.15em}
.split-snapshot-content.markdown-preview p{margin:.7em 0}
.split-snapshot-content.markdown-preview ul,
.split-snapshot-content.markdown-preview ol{padding-left:1.8em}
.split-snapshot-content.markdown-preview blockquote{margin:.8em 0;padding:.15em .9em;border-left:4px solid var(--border);opacity:.9}
.split-snapshot-content.markdown-preview code{font-family:monospace;background:color-mix(in srgb,var(--panel) 80%,var(--text) 20%);padding:.08em .3em;border-radius:3px}
.split-snapshot-content.markdown-preview pre{overflow:auto;padding:.8em;background:var(--panel-2);border:1px solid var(--border);border-radius:5px}
.split-snapshot-content.markdown-preview pre code{background:none;padding:0}
.split-snapshot-content.markdown-preview table{border-collapse:collapse;max-width:100%}
.split-snapshot-content.markdown-preview th,
.split-snapshot-content.markdown-preview td{border:1px solid var(--border);padding:.35em .55em;text-align:left}
.split-snapshot-content.markdown-preview img{max-width:100%}
.split-divider{
  min-width:7px;
  width:7px;
  min-height:0;
  cursor:col-resize;
  background:var(--panel-2);
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
  position:relative;
  touch-action:none;
}
.split-divider::after{
  content:"";
  position:absolute;
  left:2px;
  top:calc(50% - 22px);
  width:1px;
  height:44px;
  background:var(--muted);
  opacity:.55;
}
.split-divider:hover,
.split-divider.dragging{background:color-mix(in srgb,var(--accent) 16%,var(--panel-2))}
.split-tab-side{
  flex:0 0 auto;
  min-width:18px;
  padding:2px 4px;
  border-radius:3px;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:9px;
  line-height:1;
  text-align:center;
  font-weight:700;
}
.tab.active .split-tab-side{color:var(--text);border-color:var(--accent)}
#splitViewBtn.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
@media(max-width:900px){
  .desktop-split-control{display:none!important}
  .split-workspace.split-enabled{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .split-workspace.split-enabled #splitDivider{display:none!important}
  .split-workspace.split-enabled #leftPane,
  .split-workspace.split-enabled #rightPane{display:none!important}
  .split-workspace.split-enabled .split-pane.active{display:grid!important}
}

/* v2.6.1 — explicit tab-to-pane assignment --------------------------------
   Split View starts with only the current document on the left. Tabs are
   deliberately dragged onto either pane; ordinary tab clicks do not replace
   pane assignments. */
.tab[draggable="true"]{cursor:grab}
.tab[draggable="true"]:active{cursor:grabbing}
.split-pane.tab-drop-target{
  outline:2px solid var(--accent);
  outline-offset:-3px;
}
.split-pane.tab-drop-target::after{
  content:"Drop document here";
  position:absolute;
  z-index:12;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:8px 12px;
  border:1px solid var(--accent);
  border-radius:6px;
  background:var(--panel-2);
  color:var(--text);
  font-size:12px;
  font-weight:700;
  box-shadow:var(--shadow);
  pointer-events:none;
}
.split-pane.empty .split-snapshot{
  display:grid;
  place-items:center;
}
.split-pane.empty .split-snapshot-content{
  min-height:0;
  padding:20px;
  color:var(--muted);
  text-align:center;
  font-family:"Segoe UI",Arial,sans-serif;
}
.split-divider{touch-action:none}
.split-divider[title]{}


/* v2.6.2 — split pane header close controls; v2.6.3 makes × a real tab close. */
.split-pane-close{
  flex:0 0 auto;
  width:22px;
  height:22px;
  min-width:22px;
  margin-left:auto;
  padding:0;
  border:0;
  border-radius:4px;
  background:transparent;
  color:var(--muted);
  font-size:18px;
  line-height:20px;
  text-align:center;
}
.split-pane-close:hover,
.split-pane-close:focus-visible{
  background:color-mix(in srgb,var(--danger) 16%,var(--panel-2));
  color:var(--text);
}
.split-pane.empty .split-pane-close{visibility:hidden}


/* v2.6.3 — Split View remains a workspace even with zero visible documents. */
.editor-shell[hidden]{display:none!important}


/* v2.6.5 — neutral Split View destination cards for Files double-click. */
.split-override-current{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.split-override-choice{
  display:block;
  width:100%;
  min-width:0;
  padding:12px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--panel-2);
  color:var(--text);
  text-align:left;
  font:inherit;
  cursor:pointer;
  box-shadow:none;
}
.split-override-choice:hover{
  background:color-mix(in srgb,var(--panel-2) 84%,white 16%);
}
.split-override-choice:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}
.split-override-choice strong,
.split-override-choice span{display:block}
.split-override-choice span{
  margin-top:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted);
}
.split-override-actions{
  justify-content:center;
}
@media(max-width:520px){
  .split-override-current{grid-template-columns:minmax(0,1fr)}
}


/* v2.7.0 — per-file password protection and lock indicators. */
/* v2.7.1 — upward Files menus and corrected Rich Text clipboard boundaries. */
/* v2.7.2 — exact Select All Rich Text clipboard serialization and same-app paste path. */
/* v2.7.3 — internal Rich paste uses DOM Range insertion to prevent empty host paragraphs. */
/* v2.7.4 — full-document Cut clears contenteditable placeholders before internal paste. */
/* v2.7.5 — reliable same-app Rich clipboard detection via standard HTML marker. */
/* v2.7.6 — in-memory clipboard fingerprint and text-grounded Rich boundary cleanup. */
/* v2.7.7 — count-aware Rich clipboard boundary blank-line normalization. */
/* v2.8.0 — Split View hardening and formatting-preserving Rich Find/Replace. */
/* v2.8.1 — stabilization sweep: empty Split guards, recovery, Rich replace barriers/cleanup. */
/* v2.8.2 — protected-file passwords may be seven characters or longer. */
/* v2.8.3 — compact mobile top-bar expander for narrow phone widths. */
/* v2.9.0 — modular GitHub/PWA build plus generated single-file standalone. */
/* v2.9.1 — responsibility-based JavaScript source modules with generated runtime bundle. */
.protection-indicator{
  display:inline-block;
  margin-right:4px;
  font-size:.92em;
  line-height:1;
  vertical-align:baseline;
}
.protection-dialog input{
  width:100%;
}
.protection-error{
  min-height:18px;
  margin-top:8px;
  color:var(--danger);
  font-size:12px;
}
.protection-unlock-actions,
.recovery-key-actions{
  flex-wrap:wrap;
}
.recovery-key-dialog{
  width:min(540px,calc(100vw - 24px));
}
#recoveryKeyValue{
  width:100%;
  resize:none;
  margin-top:6px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:5px;
  background:var(--panel-2);
  color:var(--text);
  font:600 13px/1.55 Consolas,"Courier New",monospace;
  letter-spacing:.03em;
  overflow-wrap:anywhere;
}
.locked-document-note{
  color:var(--muted);
  font-size:12px;
}