.layout-main { display:flex; flex-direction:column; gap:16px; }
    .full-width {
      width: 100% !important;
      max-width: 100% !important;
    }

    /* Main layout: content + comments */
    .content-with-comments {
      display:flex;
      gap:16px;
      align-items:flex-start;
    }

    .content-main { flex:1 1 0; min-width:0; }

 
    @media (max-width:900px) {
      .content-with-comments { flex-direction:column; }
      .comments-sidebar { width:100%; flex:0 0 auto; }
    }

    /* Text compare grid */
    .compare-grid {
      display:grid;
      grid-template-columns:1fr auto 1fr;
      gap:16px;
      align-items:start;
    }

    @media (max-width:992px) {
      .compare-grid { grid-template-columns:1fr; }
    }

    .text-panel {
      background:var(--card);
      border-radius:12px;
      border:1px solid var(--border);
      padding:12px;
    }

    .panel-header {
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:8px;
      font-size:0.9rem;
    }

    .panel-label { font-weight:600; }

    .panel-helper {
      font-size:0.8rem;
      color:var(--muted);
    }

    .text-input {
      width:100%;
      min-height:380px;
      border-radius:8px;
      border:1px solid var(--border);
      padding:10px;
      font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;
      font-size:0.85rem;
      resize:vertical;
      background:#f9fafb;
    }

    .actions-column {
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:12px;
      min-width:140px;
    }

    .CodeMirror {
      font-size:0.85rem !important;
      height: 600px !important;
    }

    .CodeMirror-merge-pane { border:none !important; }

    /* Comments sidebar */
    #commentsSection {
      background:var(--card);
      border-radius:12px;
      border:1px solid var(--border);
      padding:12px;
    }

    #commentsSection h3 { margin:0 0 10px; font-size:1rem; }

    #commentList { margin-bottom:12px; font-size:0.9rem; }

    .comment-box {
      border-radius:8px;
      border:1px solid var(--border);
      padding:8px 10px;
      margin-bottom:8px;
      background:#f9fafb;
    }

    .input-text, .input-area {
      width:100%;
      padding:8px 10px;
      border-radius:8px;
      border:1px solid var(--border);
      font-size:0.9rem;
      margin-bottom:8px;
    }

    .input-area { resize:vertical; min-height:80px; }

    .loader {
      border:2px solid #fff;
      border-top:2px solid transparent;
      border-radius:50%;
      width:14px;
      height:14px;
      animation: spin 0.6s linear infinite;
      margin-left:6px;
    }
    .hidden {
      display: none !important;
    }
    .merge-container {
      padding: 0;
    }
    .editor-shell-result {
        display: none;
        flex-direction: row;
        align-items: stretch;
        gap: 3px;
        background: var(--card);
        border-radius: 5px;
        border: 1px solid var(--border);
    }
    .CodeMirror-merge, .CodeMirror-merge .CodeMirror{
      height:600px !important;
    }
    .cm-editor {
      border: 1px solid var(--border);
      border-radius: 8px;
      height: 600px !important;
    }

    .editor-actions {
      display: flex;
      gap: 6px;
    }

    .btn-xs {
      font-size: 0.75rem;
      padding: 4px 8px;
    }

    .merge-wrapper {
      position: relative;
    }

    #diffOverview {
      position: absolute;
      right: 4px;
      top: 10px;
      width: 10px;
      height: calc(100% - 20px);
      background: #f1f3f5;
      border-radius: 6px;
    }

    .diff-marker {
      position: absolute;
      width: 100%;
      cursor: pointer;
    }

    .diff-left {
      background: #e03131; /* red */
    }

    .diff-right {
      background: #2f9e44; /* green */
    }

    .merge-wrapper {
        display: flex;
        position: relative;
    }

    #mergeContainer {
        flex: 1;
        width: 100%;
    }

    /* Right vertical diff bar */
    #diffOverview {
        width: 8px;
        margin-left: 6px;
        position: relative;
        background: #f1f1f1;
        border-radius: 4px;
    }

    /* Diff markers */
    .diff-marker {
        position: absolute;
        left: 0;
        width: 100%;
        cursor: pointer;
        opacity: 0.9;
    }

    .diff-added {
        background: #6cc070; /* green */
    }

    .diff-removed {
        background: #e57373; /* red */
    }

.diff-toolbar {
  display: flex;
  gap: 6px;
  padding: 8px 3%;
  margin-bottom: 6px;
}

.diff-toolbar button {
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #F8F799;
  cursor: pointer;
}

.diff-toolbar button:hover {
  background: #e9ecef;
}

.compare-stats {
  display: none;
  gap: 16px;
  background: #f5f5f5;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  margin: 10px 3%;
  flex-wrap: wrap;
}

#diffOverview {
  position: relative;
  width: 8px;
  background: #eee;
  border-radius: 4px;
}

.diff-marker {
  position: absolute;
  width: 100%;
  cursor: pointer;
  opacity: 0.8;
}

.diff-added {
  background: #4caf50;
}

.diff-removed {
  background: #f44336;
}

.compare-stats {
  display: none;
  gap: 18px;
  background: #f7f7f7;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  margin: 10px 3%;
  flex-wrap: wrap;
}

.compare-stats .stat strong {
  font-weight: 600;
}

/* Default (0 state) */
.compare-stats .stat strong {
  color: #777;
}

/* Added lines */
.compare-stats .added strong {
  color: #2e7d32; /* green */
}

/* Removed lines */
.compare-stats .removed strong {
  color: #c62828; /* red */
}

/* Total lines */
.compare-stats .total strong {
  color: #1565c0; /* blue */
}
#toastContainer {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: #1f2937;
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  animation: slideIn 0.25s ease, fadeOut 0.25s ease 2.5s forwards;
}

.toast.success { background: #2e7d32; }
.toast.info    { background: #1565c0; }
.toast.warn    { background: #ed6c02; }
.toast.error   { background: #c62828; }

@keyframes slideIn {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
  to { opacity: 0; transform: translateX(20px); }
}


.line-comment {
  background: #f5f7fa;
  padding: 8px;
  border-left: 4px solid #4f46e5;
  margin-bottom: 8px;
  cursor: pointer;
}

    @keyframes spin { 100% { transform:rotate(360deg); } }