* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif;
  background: #1e1e2e;
  color: #cdd6f4;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
header {
  padding: 10px 16px;
  background: #181825;
  border-bottom: 1px solid #313244;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
header h1 { font-size: 15px; margin: 0; color: #f5e0dc; }
header .spacer { flex: 1; }
button {
  background: #89b4fa;
  color: #11111b;
  border: none;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
button:hover { background: #74a8fc; }
button.ghost { background: #313244; color: #cdd6f4; }
button.ghost:hover { background: #45475a; }
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: #a6e3a1; color: #11111b; padding: 10px 20px; border-radius: 8px;
  font-weight: 600; opacity: 0; transition: opacity .25s; pointer-events: none;
}
.toast.show { opacity: 1; }

main { flex: 1; display: flex; min-height: 0; }
.pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pane + .pane { border-left: 1px solid #313244; }
.pane-label {
  padding: 6px 14px; font-size: 12px; color: #9399b2;
  background: #181825; border-bottom: 1px solid #313244;
  display: flex; align-items: center; gap: 8px;
}
textarea {
  flex: 1; border: none; resize: none; padding: 16px;
  background: #1e1e2e; color: #cdd6f4;
  font-family: "D2Coding", "Consolas", monospace; font-size: 14px;
  line-height: 1.6; outline: none;
}
#preview {
  flex: 1; overflow: auto; padding: 24px;
  background: #fff; color: #222;
}
#htmlSource {
  flex: 1; overflow: auto; margin: 0; padding: 16px;
  background: #11111b; color: #a6adc8;
  font-family: "Consolas", monospace; font-size: 12px;
  white-space: pre-wrap; word-break: break-all; display: none;
}
.tabs { display: flex; gap: 4px; margin-left: auto; }
.tabs button { padding: 3px 10px; font-size: 12px; }
.tabs button.active { background: #89b4fa; color: #11111b; }
.tabs button:not(.active) { background: #313244; color: #9399b2; }

/* Small helper styles (header counter & size indicator) — extracted from former inline styles */
#counter { margin-left: auto; color: #6c7086; }
#htmlSize { margin-left: 10px; color: #6c7086; }