*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Tahoma, sans-serif; overflow: hidden; height: 100vh; user-select: none; touch-action: pan-x pan-y; }

:root {
  --top-h: 78px;
  --sidebar-w: 280px;
  --outline-w: 280px;
  --draft-w: 280px;
  --lay-dur: 0.28s;
  --lay-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --panel-bg: #fff;
  --panel-text-color: #333;
  --panel-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.12);
  --panel-top-gap: 10px;
  --panel-bot-gap: 72px;
  --panel-side-gap: 10px;
  --peek-border: 24px;
  --panel-border-color: var(--panel-bg);
  --panel-border-w: 2.5px;
  --panel-peek-color: var(--panel-bg);
  --panel-peek-shadow: rgba(0,0,0,0.14);
  --panel-float-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

#drive-boot-overlay {
  position: fixed; inset: 0; z-index: 3200;
  background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
}
.drive-boot-spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid rgba(0,0,0,0.15); border-top-color: #4285f4;
  animation: drive-boot-spin 0.8s linear infinite;
}
@keyframes drive-boot-spin { to { transform: rotate(360deg); } }
.drive-boot-msg { font-size: 14px; color: #444; }

#confirm-overlay {
  position: fixed; inset: 0; z-index: 3400;
  background: rgba(0,0,0,0.45);
  display: none; align-items: center; justify-content: center;
}
#confirm-overlay.open { display: flex; }
#confirm-box {
  background: #fff; border-radius: 10px;
  min-width: 300px; max-width: 520px;
  padding: 22px 24px 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  animation: confirm-pop 0.14s ease-out;
}
@keyframes confirm-pop {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
#confirm-message {
  font-size: 14px; color: #333; line-height: 1.55;
  margin-bottom: 18px; white-space: pre-wrap;
}
#confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.confirm-btn {
  padding: 7px 16px; border-radius: 6px; font-size: 13px; cursor: pointer;
  border: 1px solid #ddd; background: #f4f4f4; color: #333; font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.confirm-btn:hover { background: #e8e8e8; }
.confirm-btn:focus-visible { outline: 2px solid #4a9eff; outline-offset: 1px; }
.confirm-btn.primary { background: #4a9eff; border-color: #4a9eff; color: #fff; }
.confirm-btn.primary:hover { background: #2f7dd8; }
.confirm-btn.danger { background: #fff; border-color: #e6b0b0; color: #cc3333; }
.confirm-btn.danger:hover { background: #fff0f0; border-color: #cc3333; }

.merge-overlay {
  position: fixed; inset: 0; z-index: 3400;
  background: rgba(0,0,0,0.45);
  display: none; align-items: center; justify-content: center;
}
.merge-overlay.open { display: flex; }
.merge-box {
  background: #fff; border-radius: 10px;
  width: min(96vw, 1200px); height: min(92vh, 840px);
  padding: 16px; box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; gap: 10px;
  animation: confirm-pop 0.14s ease-out;
}

.merge-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.merge-page-title { flex: 0 0 auto; font-size: 14px; font-weight: 600; color: #333; }

.merge-panes { flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; }
.merge-pane {
  flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column;
  border: 1px solid #ddd; border-radius: 6px; overflow: hidden; background: #fff;
}
.merge-pane-theirs { background: #fafafa; }
.merge-pane-disabled { opacity: 0.55; }
.merge-pane-label {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; color: #888; text-transform: uppercase;
  letter-spacing: 0.02em; padding: 6px 10px; border-bottom: 1px solid #eee;
}
.merge-final-close-btn {
  flex: 0 0 auto; width: 18px; height: 18px; line-height: 16px; padding: 0;
  border: 1px solid #e88; border-radius: 4px; background: #fee5e5; color: #c33;
  font-size: 13px; text-transform: none; letter-spacing: normal; cursor: pointer;
}
.merge-final-close-btn:hover { background: #fdd0d0; border-color: #d55; color: #a11; }
.merge-final-close-btn.merge-final-add-btn { border-color: #ccc; background: #fff; color: #999; }
.merge-final-close-btn.merge-final-add-btn:hover { background: #e5f3e5; border-color: #8c8; color: #383; }
.merge-pane-preview { flex: 1 1 auto; overflow-y: auto; padding: 10px; font-size: 13px; color: #333; line-height: 1.4; }
.merge-pane-deleted { color: #999; font-style: italic; }
.merge-pane-actions { flex: 0 0 auto; display: flex; gap: 8px; padding: 8px 10px; border-top: 1px solid #eee; }

.merge-content-editor {
  --node-content-pad: 12px;
  flex: 1 1 auto; min-width: 0; align-self: flex-start;
  position: relative; z-index: 1; outline: none;
  font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 14px; line-height: 1.6;
  color: #111; padding: var(--node-content-pad);
}
.merge-content-editor-readonly { cursor: default; user-select: text; }

.merge-editor-wrap {
  --merge-gutter-w: 40px;
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; overflow-y: auto;
}
.merge-linenos-col {
  position: relative; z-index: 1;
  flex: 0 0 auto; width: var(--merge-gutter-w);
  display: flex; flex-direction: column; align-items: flex-end;
  background: #f0f0ec; border-right: 1px solid #e8e8e8;
  user-select: none;
}
.merge-lineno {
  height: 22px;
  font-size: 11px; color: #bbb;
  font-family: 'Consolas', monospace;
  padding-right: 6px;
  display: flex; align-items: flex-start; justify-content: flex-end;
  white-space: nowrap; flex-shrink: 0;
}
.merge-diff-bands {
  position: absolute; top: 0; left: var(--merge-gutter-w); right: 0; height: 0;
  z-index: 0; pointer-events: none;
}
.merge-diff-band { position: absolute; left: 0; right: 0; }
.merge-diff-add { background: #e2f6e2; }
.merge-diff-del { background: #fbe1e1; }
.merge-pane-final .merge-content-editor { cursor: text; }
.merge-content-editor .node-image-block { z-index: auto; }
.merge-content-editor .node-inline-img img { cursor: default; }

.merge-bottom { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.merge-pagenav { display: flex; align-items: center; gap: 10px; }
.merge-nav-btn:disabled { opacity: 0.4; cursor: default; }
.merge-page-pos { font-size: 12px; color: #888; min-width: 3.5em; text-align: center; }
.merge-actions { display: flex; gap: 8px; }
.confirm-btn:disabled { opacity: 0.5; cursor: default; }
.confirm-btn.selected { outline: 2px solid #4a9eff; outline-offset: 1px; }