:root {
      color-scheme: light;
      --bg: #f6f7f4;
      --panel: #ffffff;
      --panel-alt: #fbfcf9;
      --text: #202321;
      --muted: #626a66;
      --border: #d8ddd6;
      --border-strong: #b8c1ba;
      --accent: #0f766e;
      --accent-strong: #0b5f59;
      --focus: #d88d1e;
      --code-bg: #eef2ee;
      --shadow: 0 10px 30px rgba(23, 31, 28, 0.08);
      --radius: 8px;
      --toolbar-height: 148px;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-size: 15px;
      line-height: 1.55;
      overflow-x: hidden;
    }

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

    button,
    select {
      min-height: 36px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--panel);
      color: var(--text);
    }

    button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 36px;
      padding: 0 10px;
      font-weight: 650;
      cursor: pointer;
    }

    button:disabled,
    select:disabled {
      cursor: not-allowed;
      opacity: 0.45;
    }

    button:hover,
    select:hover {
      border-color: var(--border-strong);
      background: var(--panel-alt);
    }

    button:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [contenteditable="true"]:focus-visible {
      outline: 3px solid rgba(216, 141, 30, 0.32);
      outline-offset: 2px;
    }

    button[aria-pressed="true"],
    button.is-active {
      border-color: rgba(15, 118, 110, 0.45);
      background: #e6f3f1;
      color: var(--accent-strong);
    }

    .app {
      display: grid;
      grid-template-rows: auto 1fr;
      height: 100%;
      min-height: 100%;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      min-width: 0;
      width: 100%;
      min-height: var(--toolbar-height);
      padding: 10px 16px;
      border-bottom: 1px solid var(--border);
      background: rgba(246, 247, 244, 0.96);
      backdrop-filter: blur(12px);
    }

    .toolbar-row,
    .toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      width: 100%;
      overflow-x: auto;
      padding-bottom: 1px;
      scrollbar-width: thin;
    }

    .file-toolbar {
      justify-content: flex-start;
    }

    .brand {
      flex: 0 0 auto;
      font-weight: 760;
      color: #202321;
      white-space: nowrap;
    }

    .document-title {
      flex: 1 1 220px;
      min-width: 120px;
      max-width: 420px;
      overflow: hidden;
      color: var(--muted);
      font-size: 13px;
      font-weight: 650;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .toolbar {
      flex: 0 0 auto;
    }

    .tab-strip {
      display: flex;
      align-items: stretch;
      min-width: 0;
      width: 100%;
      min-height: 38px;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: rgba(255, 255, 255, 0.72);
    }

    .tab-viewport {
      flex: 1 1 0;
      width: 0;
      min-width: 0;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: thin;
    }

    .tab-list {
      display: flex;
      align-items: stretch;
      width: max-content;
      min-width: 100%;
    }

    .doc-tab-wrap {
      display: inline-flex;
      align-items: stretch;
      flex: 0 0 auto;
      min-width: 128px;
      max-width: 240px;
      border-right: 1px solid var(--border);
      background: transparent;
      user-select: none;
    }

    .doc-tab-wrap.is-active {
      background: var(--panel);
    }

    .doc-tab-wrap.is-dragging {
      opacity: 0.45;
    }

    .doc-tab-wrap.is-drop-before {
      box-shadow: inset 3px 0 0 var(--accent);
    }

    .doc-tab-wrap.is-drop-after {
      box-shadow: inset -3px 0 0 var(--accent);
    }

    .doc-tab {
      justify-content: flex-start;
      flex: 1 1 auto;
      min-width: 0;
      min-height: 36px;
      gap: 6px;
      padding: 0 8px 0 10px;
      border: 0;
      border-radius: 0;
      background: transparent;
      font-size: 13px;
      font-weight: 650;
    }

    .doc-tab:hover,
    .tab-close:hover,
    .tab-scroll-button:hover,
    .tab-new-button:hover {
      background: var(--panel-alt);
    }

    .doc-tab.is-active {
      background: transparent;
      color: var(--accent-strong);
    }

    .tab-title {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tab-dirty {
      flex: 0 0 9px;
      color: var(--focus);
      text-align: center;
    }

    .tab-close,
    .tab-scroll-button,
    .tab-new-button {
      flex: 0 0 36px;
      min-width: 36px;
      min-height: 36px;
      padding: 0;
      border: 0;
      border-left: 1px solid var(--border);
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      font-size: 18px;
      font-weight: 560;
      line-height: 1;
    }

    .tab-close {
      font-size: 20px;
    }

    .tab-scroll-button,
    .tab-new-button {
      border-left: 1px solid var(--border);
      font-size: 19px;
      font-weight: 650;
    }

    .tab-scroll-button:first-child {
      border-left: 0;
      border-right: 1px solid var(--border);
    }

    .tab-scroll-button:disabled {
      opacity: 0.35;
      cursor: default;
    }

    .group {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      flex: 0 0 auto;
    }

    .group+.group {
      padding-left: 8px;
      border-left: 1px solid var(--border);
    }

    .segmented {
      display: inline-flex;
      min-height: 36px;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--panel);
    }

    .segmented button {
      min-width: 84px;
      border: 0;
      border-radius: 0;
      background: transparent;
      font-weight: 700;
    }

    .segmented button+button {
      border-left: 1px solid var(--border);
    }

    .segmented button.is-active {
      background: var(--accent);
      color: #ffffff;
    }

    .format-select {
      width: 132px;
      padding: 0 30px 0 10px;
    }

    .file-button {
      min-width: 56px;
      font-size: 13px;
    }

    .recent-select {
      width: 128px;
      padding: 0 28px 0 10px;
      font-size: 13px;
    }

    .ai-toolbar-group {
      position: relative;
    }

    #aiAssistantButton::after {
      content: "";
      width: 0;
      height: 0;
      margin-left: 7px;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid currentColor;
    }

    .ai-status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 28px;
      max-width: 148px;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--panel-alt);
      padding: 0 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ai-status-badge::before,
    .ai-status-dot {
      content: "";
      flex: 0 0 auto;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #69716d;
    }

    .ai-status-badge[data-status="mock"]::before,
    .ai-status-panel[data-status="mock"] .ai-status-dot {
      background: #64748b;
    }

    .ai-status-badge[data-status="checking"]::before,
    .ai-status-panel[data-status="checking"] .ai-status-dot {
      background: #b7791f;
    }

    .ai-status-badge[data-status="connected"]::before,
    .ai-status-panel[data-status="connected"] .ai-status-dot {
      background: #15803d;
    }

    .ai-status-badge[data-status="unreachable"]::before,
    .ai-status-panel[data-status="unreachable"] .ai-status-dot,
    .ai-status-badge[data-status="auth-error"]::before,
    .ai-status-panel[data-status="auth-error"] .ai-status-dot {
      background: #b91c1c;
    }

    .ai-status-badge[data-status="model-error"]::before,
    .ai-status-panel[data-status="model-error"] .ai-status-dot {
      background: #c2410c;
    }

    .ai-status-badge[data-status="running"]::before,
    .ai-status-panel[data-status="running"] .ai-status-dot {
      background: #2563eb;
    }

    .ai-menu {
      z-index: 40;
      min-width: 260px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
      padding: 6px;
    }

    .ai-menu[hidden] {
      display: none;
    }

    .ai-toolbar-menu {
      position: fixed;
      width: min(360px, calc(100vw - 16px));
      max-height: calc(100vh - 16px);
      overflow: auto;
    }

    .ai-context-menu {
      position: fixed;
    }

    .ai-menu-title {
      padding: 6px 8px 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .ai-status-panel {
      display: grid;
      gap: 8px;
      margin: 0 2px 2px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--panel-alt);
      padding: 8px;
      font-size: 12px;
    }

    .ai-status-line {
      display: flex;
      align-items: center;
      gap: 7px;
      font-weight: 750;
    }

    .ai-status-detail,
    .ai-menu-guidance {
      color: var(--muted);
      line-height: 1.4;
    }

    .ai-status-meta {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .ai-status-meta-row {
      display: grid;
      grid-template-columns: 68px minmax(0, 1fr);
      gap: 8px;
      min-width: 0;
    }

    .ai-status-meta-row span:first-child {
      color: var(--muted);
      font-weight: 700;
    }

    .ai-status-meta-row span:last-child {
      min-width: 0;
      overflow-wrap: anywhere;
      font-weight: 650;
    }

    .ai-menu button.ai-menu-status-action {
      min-height: 30px;
      border: 1px solid var(--border);
      background: var(--panel);
      justify-content: center;
      padding: 0 8px;
    }

    .ai-menu-guidance {
      border-left: 3px solid var(--focus);
      padding-left: 8px;
    }

    .ai-menu button {
      width: 100%;
      min-height: 32px;
      justify-content: flex-start;
      border: 0;
      background: transparent;
      padding: 0 8px;
      font-size: 13px;
      font-weight: 600;
      text-align: left;
    }

    .ai-menu button:hover,
    .ai-menu button:focus-visible {
      background: var(--panel-alt);
    }

    .ai-menu-separator {
      height: 1px;
      margin: 6px 2px;
      background: var(--border);
    }

    .workspace {
      --editor-width: 55%;
      display: grid;
      grid-template-columns: minmax(280px, var(--editor-width)) 12px minmax(280px, 1fr);
      column-gap: 0;
      row-gap: 14px;
      min-height: 0;
      overflow: hidden;
      padding: 14px;
    }

    .workspace.preview-hidden {
      grid-template-columns: minmax(0, 1fr);
    }

    .workspace.preview-hidden .pane-resizer {
      display: none;
    }

    .pane-resizer {
      position: relative;
      display: flex;
      align-items: stretch;
      justify-content: center;
      min-width: 12px;
      cursor: col-resize;
      touch-action: none;
      user-select: none;
    }

    .pane-resizer::before {
      content: "";
      width: 2px;
      margin: 10px 0;
      border-radius: 999px;
      background: var(--border-strong);
    }

    .pane-resizer:hover::before,
    .pane-resizer:focus-visible::before,
    .pane-resizer.is-dragging::before {
      width: 4px;
      background: var(--accent);
    }

    body.is-resizing {
      cursor: col-resize;
      user-select: none;
    }

    body.is-resizing .wysiwyg,
    body.is-resizing .markdown-editor,
    body.is-resizing .preview {
      pointer-events: none;
    }

    .editor-pane,
    .preview-pane {
      min-width: 0;
      min-height: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .editor-pane {
      display: grid;
      grid-template-rows: auto 1fr;
    }

    .pane-status,
    .preview-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      min-height: 42px;
      padding: 8px 12px;
      border-bottom: 1px solid var(--border);
      color: var(--muted);
      font-size: 13px;
      font-weight: 650;
    }

    .status-meta {
      display: inline-flex;
      gap: 10px;
      margin-left: auto;
      flex-wrap: wrap;
      justify-content: flex-end;
      font-weight: 560;
    }

    .feedback-hint {
      flex: 1 1 260px;
      min-width: 0;
      color: var(--muted);
      font-weight: 560;
    }

    .feedback-hint a {
      color: var(--accent-strong);
      font-weight: 700;
      text-decoration: none;
    }

    .feedback-hint a:hover,
    .feedback-hint a:focus-visible {
      text-decoration: underline;
    }

    .editor-wrap {
      min-width: 0;
      min-height: 0;
      position: relative;
    }

    .wysiwyg,
    .markdown-editor {
      width: 100%;
      height: 100%;
      min-height: calc(100vh - var(--toolbar-height) - 86px);
      padding: 24px;
      border: 0;
      border-radius: 0 0 var(--radius) var(--radius);
      background: var(--panel);
      color: var(--text);
      overflow: auto;
      overflow-anchor: none;
    }

    .markdown-editor {
      display: block;
      resize: none;
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
      font-size: 14px;
      line-height: 1.65;
      white-space: pre;
      tab-size: 2;
    }

    .markdown-editor[hidden],
    .wysiwyg[hidden],
    .preview-pane[hidden] {
      display: none;
    }

    .wysiwyg:empty::before {
      content: attr(data-placeholder);
      color: #8a928e;
      pointer-events: none;
    }

    .wysiwyg h1,
    .wysiwyg h2,
    .wysiwyg h3,
    .preview h1,
    .preview h2,
    .preview h3 {
      line-height: 1.2;
      margin: 0.8em 0 0.35em;
    }

    .wysiwyg h1,
    .preview h1 {
      font-size: 2rem;
    }

    .wysiwyg h2,
    .preview h2 {
      font-size: 1.55rem;
    }

    .wysiwyg h3,
    .preview h3 {
      font-size: 1.25rem;
    }

    .wysiwyg h4,
    .wysiwyg h5,
    .wysiwyg h6,
    .preview h4,
    .preview h5,
    .preview h6 {
      margin: 0.8em 0 0.35em;
      line-height: 1.3;
    }

    .wysiwyg p,
    .preview p {
      margin: 0 0 0.8em;
    }

    .wysiwyg hr,
    .preview hr {
      height: 1px;
      margin: 1.1em 0;
      border: 0;
      background: var(--border-strong);
    }

    .wysiwyg ul,
    .wysiwyg ol,
    .preview ul,
    .preview ol {
      margin: 0 0 0.9em;
      padding-left: 1.4em;
    }

    .wysiwyg blockquote,
    .preview blockquote {
      margin: 0.9em 0;
      padding: 0.2em 0 0.2em 1em;
      border-left: 4px solid var(--accent);
      color: #3f4743;
    }

    .wysiwyg pre,
    .preview pre {
      overflow: auto;
      margin: 1em 0;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--code-bg);
    }

    .wysiwyg code,
    .preview code {
      border-radius: 5px;
      background: var(--code-bg);
      padding: 0.12em 0.34em;
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
      font-size: 0.92em;
    }

    .wysiwyg pre code,
    .preview pre code {
      padding: 0;
      border-radius: 0;
      background: transparent;
      white-space: pre;
    }

    .wysiwyg a,
    .preview a {
      color: var(--accent-strong);
      text-decoration-thickness: 0.08em;
      text-underline-offset: 0.18em;
      overflow-wrap: anywhere;
    }

    .wysiwyg img,
    .preview img {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 0.8em 0;
      border-radius: 6px;
    }

    .preview-pane {
      display: grid;
      grid-template-rows: auto 1fr;
    }

    .preview {
      min-height: 0;
      padding: 24px;
      overflow: auto;
      overflow-anchor: none;
      background: var(--panel);
      border-radius: 0 0 var(--radius) var(--radius);
    }

    .preview-empty {
      color: #89918d;
    }

    .icon-text {
      min-width: 36px;
      font-size: 14px;
      line-height: 1;
    }

    .wide-button {
      min-width: 98px;
      gap: 6px;
      font-size: 13px;
    }

    body.focus-mode .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      width: 100%;
      min-height: auto;
      padding: 8px;
      border-bottom: 1px solid var(--border);
      background: rgba(246, 247, 244, 0.96);
      box-shadow: none;
    }

    body.focus-mode .topbar .file-toolbar,
    body.focus-mode .topbar .toolbar .group:not(.focus-mode-group) {
      display: none;
    }

    body.focus-mode .topbar .toolbar {
      position: absolute;
      top: 8px;
      right: 8px;
      width: auto;
      padding-bottom: 0;
      overflow: visible;
    }

    body.focus-mode .topbar .tab-strip {
      width: 100%;
      padding-right: 116px;
    }

    body.focus-mode .topbar .focus-mode-group {
      padding-left: 0;
      border-left: 0;
    }

    body.focus-mode .workspace {
      padding: 8px;
    }

    body.focus-mode .wysiwyg,
    body.focus-mode .markdown-editor,
    body.focus-mode .preview {
      min-height: calc(100vh - 106px);
    }

    body.focus-mode .pane-status,
    body.focus-mode .preview-header {
      min-height: 32px;
      padding: 4px 10px;
    }

    .about-overlay {
      position: fixed;
      inset: 0;
      z-index: 30;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(25, 31, 28, 0.44);
      backdrop-filter: blur(8px);
    }

    .about-overlay[hidden] {
      display: none;
    }

    .about-dialog {
      width: min(100%, 560px);
      max-height: min(720px, calc(100vh - 48px));
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--panel);
      box-shadow: 0 20px 60px rgba(23, 31, 28, 0.22);
      outline: none;
      overflow: hidden;
    }

    .about-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 16px 12px;
      border-bottom: 1px solid var(--border);
    }

    .about-header h2 {
      margin: 0;
      font-size: 1rem;
      line-height: 1.3;
    }

    .about-close {
      min-width: 32px;
      padding: 0;
      font-size: 20px;
      font-weight: 500;
    }

    .about-body {
      max-height: calc(100vh - 150px);
      overflow: auto;
      padding: 16px;
      color: var(--text);
    }

    .about-body p {
      margin: 0 0 0.8em;
    }

    .about-body p:last-child {
      margin-bottom: 0;
    }

    .about-body a {
      color: var(--accent-strong);
      word-break: break-word;
    }

    .license-details {
      margin-top: 14px;
      border-top: 1px solid var(--border);
      padding-top: 12px;
    }

    .license-details summary {
      cursor: pointer;
      font-weight: 700;
    }

    .license-details pre {
      max-height: 260px;
      overflow: auto;
      margin: 12px 0 0;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--code-bg);
      padding: 12px;
      color: var(--text);
      font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
      font-size: 12px;
      line-height: 1.45;
      white-space: pre-wrap;
    }

    .ai-review-overlay {
      position: fixed;
      inset: 0;
      z-index: 35;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(25, 31, 28, 0.44);
      backdrop-filter: blur(8px);
    }

    .ai-review-overlay[hidden] {
      display: none;
    }

    .ai-review-dialog {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      width: min(100%, 1020px);
      max-height: min(780px, calc(100vh - 48px));
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--panel);
      box-shadow: 0 20px 60px rgba(23, 31, 28, 0.22);
      outline: none;
      overflow: hidden;
    }

    .ai-review-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 16px 12px;
      border-bottom: 1px solid var(--border);
    }

    .ai-review-header h2 {
      margin: 0;
      font-size: 1rem;
      line-height: 1.3;
    }

    .ai-review-close {
      min-width: 32px;
      padding: 0;
      font-size: 20px;
      font-weight: 500;
    }

    .ai-review-body {
      min-height: 0;
      overflow: auto;
      padding: 16px;
    }

    .ai-review-status {
      min-height: 22px;
      color: var(--muted);
      font-size: 13px;
    }

    .ai-review-status.is-error {
      color: #9f1239;
    }

    .ai-review-log {
      display: grid;
      gap: 4px;
      height: 36px;
      min-height: 36px;
      max-height: 36px;
      overflow: auto;
      resize: vertical;
      margin: 8px 0 14px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--panel-alt);
      padding: 8px;
      color: var(--text);
      font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
      font-size: 12px;
      line-height: 1.4;
      scrollbar-gutter: stable;
    }

    .ai-review-log:empty {
      display: none;
    }

    .ai-review-log-entry {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 8px;
      min-width: 0;
    }

    .ai-review-log-entry[data-type="success"] {
      color: #15803d;
    }

    .ai-review-log-entry[data-type="warning"] {
      color: #92400e;
    }

    .ai-review-log-entry[data-type="error"] {
      color: #9f1239;
    }

    .ai-review-log-time {
      color: var(--muted);
      white-space: nowrap;
    }

    .ai-review-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 12px;
      min-height: 320px;
    }

    .ai-review-panel {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      min-width: 0;
      min-height: 0;
    }

    .ai-review-panel h3 {
      margin: 0 0 8px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.3;
      text-transform: uppercase;
    }

    .ai-review-panel pre,
    .ai-review-panel textarea {
      min-height: 260px;
      margin: 0;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--code-bg);
      padding: 12px;
      color: var(--text);
      font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
      font-size: 13px;
      line-height: 1.45;
      white-space: pre-wrap;
    }

    .ai-review-panel pre {
      overflow: auto;
    }

    .ai-review-panel textarea {
      width: 100%;
      resize: vertical;
    }

    .ai-review-diff {
      margin-top: 14px;
    }

    .ai-review-diff-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }

    .ai-review-diff-header h3 {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.3;
      text-transform: uppercase;
    }

    .ai-review-diff-toolbar {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }

    .ai-review-diff-toolbar button {
      min-height: 32px;
      font-size: 12px;
    }

    .ai-review-diff-toolbar button.is-active {
      border-color: var(--accent);
      background: #e6f4f1;
      color: var(--accent-strong);
    }

    .ai-diff-option {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 32px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 650;
    }

    .ai-diff-summary {
      min-height: 20px;
      color: var(--muted);
      font-size: 13px;
    }

    .ai-diff-summary:empty {
      display: none;
    }

    .ai-diff-view {
      max-height: 260px;
      margin-top: 8px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--panel-alt);
      overflow: auto;
      font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
      font-size: 13px;
      line-height: 1.45;
    }

    .ai-diff-view:empty {
      display: none;
    }

    .ai-diff-row {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 8px;
      min-width: 0;
      padding: 4px 8px;
      border-bottom: 1px solid var(--border);
      white-space: pre-wrap;
    }

    .ai-diff-row:last-child {
      border-bottom: 0;
    }

    .ai-diff-split-row {
      grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr);
      min-width: 620px;
    }

    .ai-diff-header-row {
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--panel-alt);
      color: var(--muted);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      white-space: normal;
    }

    .ai-diff-row.is-added {
      background: #e8f7ed;
    }

    .ai-diff-row.is-removed {
      background: #fdeaea;
    }

    .ai-diff-row.is-changed {
      background: #fff7d6;
    }

    .ai-diff-prefix {
      color: var(--muted);
      font-weight: 700;
      white-space: pre;
    }

    .ai-diff-content {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .ai-diff-token-added {
      border-radius: 3px;
      background: #b7efc5;
    }

    .ai-diff-token-removed {
      border-radius: 3px;
      background: #f8b4b4;
      text-decoration: line-through;
    }

    .ai-diff-empty {
      padding: 8px;
      color: var(--muted);
    }

    .ai-patch-interactive {
      min-width: 780px;
    }

    .ai-patch-row {
      display: grid;
      grid-template-columns: 152px 84px minmax(0, 1fr) minmax(0, 1fr);
      gap: 8px;
      align-items: start;
      min-width: 0;
      padding: 6px 8px;
      border-bottom: 1px solid var(--border);
      white-space: pre-wrap;
    }

    .ai-patch-row:last-child {
      border-bottom: 0;
    }

    .ai-patch-header-row {
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--panel-alt);
      color: var(--muted);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      white-space: normal;
    }

    .ai-patch-row.is-added {
      background: #e8f7ed;
    }

    .ai-patch-row.is-removed {
      background: #fdeaea;
    }

    .ai-patch-row.is-changed {
      background: #fff7d6;
    }

    .ai-patch-row.is-accepted {
      box-shadow: inset 3px 0 0 #15803d;
    }

    .ai-patch-row.is-rejected {
      background: #f3f5f4;
      box-shadow: inset 3px 0 0 #8a928d;
      color: var(--muted);
    }

    .ai-patch-row.is-rejected .ai-diff-content:last-child {
      opacity: 0.62;
    }

    .ai-patch-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      min-width: 0;
    }

    .ai-patch-decision {
      min-height: 28px;
      padding: 0 8px;
      font-size: 12px;
    }

    .ai-patch-decision.is-active {
      border-color: var(--accent);
      background: #e6f4f1;
      color: var(--accent-strong);
    }

    .ai-patch-status {
      color: var(--muted);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 12px;
      font-weight: 700;
      white-space: normal;
    }

    .ai-review-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      padding: 12px 16px 16px;
      border-top: 1px solid var(--border);
    }

    .ai-settings-overlay {
      position: fixed;
      inset: 0;
      z-index: 36;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(25, 31, 28, 0.44);
      backdrop-filter: blur(8px);
    }

    .ai-settings-overlay[hidden] {
      display: none;
    }

    .ai-settings-dialog {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      width: min(100%, 560px);
      max-height: min(680px, calc(100vh - 48px));
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--panel);
      box-shadow: 0 20px 60px rgba(23, 31, 28, 0.22);
      outline: none;
      overflow: hidden;
    }

    .ai-settings-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 16px 12px;
      border-bottom: 1px solid var(--border);
    }

    .ai-settings-header h2 {
      margin: 0;
      font-size: 1rem;
      line-height: 1.3;
    }

    .ai-settings-close {
      min-width: 32px;
      padding: 0;
      font-size: 20px;
      font-weight: 500;
    }

    .ai-settings-body {
      display: grid;
      gap: 14px;
      min-height: 0;
      overflow: auto;
      padding: 16px;
    }

    .ai-settings-mode {
      display: grid;
      gap: 8px;
      margin: 0;
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 12px;
    }

    .ai-settings-mode legend {
      padding: 0 4px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .ai-settings-mode label {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      font-size: 13px;
      font-weight: 650;
    }

    .ai-settings-field {
      display: grid;
      gap: 6px;
      min-width: 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .ai-settings-field input,
    .ai-settings-field select {
      width: 100%;
      min-height: 36px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--panel);
      padding: 0 10px;
      color: var(--text);
      font-size: 13px;
      font-weight: 600;
      text-transform: none;
    }

    .ai-settings-field select {
      padding: 0 30px 0 10px;
    }

    .ai-settings-model-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      min-width: 0;
    }

    .ai-settings-model-row .file-button {
      min-width: 92px;
      white-space: nowrap;
    }

    .ai-settings-field input:disabled,
    .ai-settings-field select:disabled {
      cursor: not-allowed;
      opacity: 0.55;
    }

    .ai-settings-status {
      min-height: 22px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
    }

    .ai-settings-status[data-status="success"] {
      color: #15803d;
    }

    .ai-settings-status[data-status="error"] {
      color: #9f1239;
    }

    .ai-settings-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      padding: 12px 16px 16px;
      border-top: 1px solid var(--border);
    }

    @media (max-width: 940px) {
      .document-title {
        flex: 1 1 160px;
      }

      .workspace,
      .workspace.preview-hidden {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
      }

      .pane-resizer {
        display: none;
      }

      .wysiwyg,
      .markdown-editor,
      .preview {
        min-height: 48vh;
      }
    }

    @media (max-width: 620px) {
      body {
        font-size: 14px;
      }

      .topbar {
        gap: 8px;
        padding: 8px;
      }

      .workspace {
        gap: 8px;
        padding: 8px;
      }

      .brand {
        font-size: 14px;
      }

      .document-title {
        min-width: 0;
        max-width: none;
      }

      .group+.group {
        padding-left: 4px;
      }

      .segmented button {
        min-width: 72px;
        padding: 0 8px;
      }

      .format-select {
        width: 116px;
      }

      .file-button {
        min-width: 48px;
        padding: 0 8px;
      }

      .recent-select {
        width: 112px;
      }

      .wide-button {
        min-width: 84px;
        padding: 0 8px;
      }

      .about-overlay {
        padding: 12px;
      }

      .about-dialog {
        width: 100%;
      }

      .ai-review-overlay {
        padding: 12px;
      }

      .ai-review-dialog {
        max-height: calc(100vh - 24px);
      }

      .ai-settings-overlay {
        padding: 12px;
      }

      .ai-settings-dialog {
        max-height: calc(100vh - 24px);
      }

      .ai-settings-actions {
        flex-wrap: wrap;
      }

      .ai-settings-model-row {
        grid-template-columns: minmax(0, 1fr);
      }

      .ai-review-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .ai-review-diff-header {
        align-items: flex-start;
        flex-direction: column;
      }

      .wysiwyg,
      .markdown-editor,
      .preview {
        padding: 16px;
        min-height: 46vh;
      }
    }