:root{
  --split: 50%;
}

body { font-family: 'Inter', sans-serif; }

/* Textarea scrollbar */
textarea::-webkit-scrollbar { width: 8px; }
textarea::-webkit-scrollbar-track { background: #1f2937; }
textarea::-webkit-scrollbar-thumb {
  background-color: #4b5563;
  border-radius: 20px;
  border: 3px solid #1f2937;
}

/* Panes (use CSS var for resizable split) */
#main { display: flex; }
.pane { overflow: hidden; }
#editor-pane { flex: 0 0 var(--split); }
#preview-pane { flex: 1 1 auto; } /* rest */

/* Splitter */
.splitter{
  width: 10px;
  cursor: col-resize;
  position: relative;
  flex: 0 0 10px;
  background: linear-gradient(to right, rgba(55,65,81,0.0), rgba(55,65,81,0.35), rgba(55,65,81,0.0));
}
.splitter:hover{ background: linear-gradient(to right, rgba(59,130,246,0.0), rgba(59,130,246,0.45), rgba(59,130,246,0.0)); }
.splitter-grip{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 42px;
  border-radius: 999px;
  background: rgba(147, 197, 253, 0.9);
  box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.85);
}

/* While dragging */
.resizing, .resizing * { cursor: col-resize !important; user-select: none !important; }

/* Copy button */
.copy-btn{
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(17,24,39,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(229,231,235,0.95);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.copy-btn:hover{
  transform: translateY(-1px);
  background: rgba(17,24,39,0.75);
  border-color: rgba(147,197,253,0.35);
}
.copy-btn:active{ transform: translateY(0px); }
.copy-btn.copied{
  background: rgba(34,197,94,0.18);
  border-color: rgba(34,197,94,0.45);
}

/* Dropzone overlay */
.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.78); /* gray-900 */
  backdrop-filter: blur(3px);
}
.drop-overlay.show { display: flex; }

.drop-card {
  width: min(680px, 92vw);
  border: 2px dashed rgba(147, 197, 253, 0.9); /* blue-200 */
  border-radius: 16px;
  padding: 28px;
  background: rgba(31, 41, 55, 0.8); /* gray-800 */
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.kbd {
  border: 1px solid rgba(255,255,255,0.2);
  border-bottom-width: 2px;
  border-radius: 8px;
  padding: 2px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}