*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { color-scheme: dark; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #111827; color: #f3f4f6;
  min-height: 100vh;
}
body.light { background: #fff; color: #111827; }

.app { max-width: 768px; margin: 0 auto; padding: 32px 16px; position: relative; z-index: 1; }

.toolbar {
  display: flex; align-items: center; gap: 4px;
  padding: 8px;
  background: #1f2937; color: #f3f4f6;
  border: 1px solid #374151;
  border-radius: 8px 8px 0 0;
  position: sticky; top: 0; z-index: 10;
}
.light .toolbar { background: #f9fafb; color: #111827; border-color: #e5e7eb; }

.toolbar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
  opacity: .75; flex-shrink: 0;
  background: none; border: none; color: inherit;
  position: relative;
}
.toolbar-btn:hover { opacity: 1; background-color: rgba(140,149,159,.15); }
.toolbar-btn.active {
  opacity: 1;
  background-color: rgba(59, 130, 246, 0.2);
  color: rgb(59 130 246);
}
.toolbar-btn svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
#md-tooltip {
  position: fixed;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-family: inherit;
  white-space: nowrap;
  pointer-events: none;
  z-index: 99999;
  background: #374151;
  color: #e5e7eb;
  border: 1px solid #4b5563;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.1s;
}
#md-tooltip.show { opacity: 1; }
.light #md-tooltip {
  background: #f3f4f6;
  color: #1f2937;
  border-color: #d1d5db;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.sep {
  width: 1px; height: 20px;
  background: #4b5563; margin: 0 4px; flex-shrink: 0;
}
.light .sep { background: #d1d5db; }

.spacer { flex: 1; }

.overflow-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
  opacity: .75; flex-shrink: 0;
  background: none; border: none; color: inherit;
}
.overflow-btn:hover { opacity: 1; background-color: rgba(140,149,159,.15); }
.overflow-btn.active { opacity: 1; background-color: rgba(59, 130, 246, 0.2); color: rgb(59 130 246); }
.overflow-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.overflow-wrapper { flex-shrink: 0; }

.overflow-dropdown {
  position: fixed; z-index: 99999;
  min-width: 180px; padding: 4px;
  background: #1f2937; border: 1px solid #374151;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  flex-direction: column; gap: 2px;
  display: none;
  margin: 0;
}
.overflow-dropdown.open { display: flex; }
.overflow-dropdown .toolbar-btn {
  width: 100%; justify-content: flex-start; gap: 8px;
  padding: 6px 8px; height: auto; border-radius: 4px;
  font-size: 13px; font-family: inherit; opacity: .85;
}
.overflow-dropdown .toolbar-btn:hover { opacity: 1; background-color: rgba(140,149,159,.15); }
.overflow-dropdown .toolbar-btn .btn-label { white-space: nowrap; }
.light .overflow-dropdown { background: #f9fafb; border-color: #e5e7eb; }

textarea {
  width: 100%; padding: 12px; outline: none; resize: vertical;
  font-family: 'JetBrains Mono','Fira Code','Cascadia Code','Consolas',monospace;
  font-size: 14px; line-height: 1.5;
  background: #111827; color: #f3f4f6;
  border: 1px solid #374151; border-top: none;
  border-radius: 0 0 8px 8px; min-height: 400px;
}
.light textarea { background: #fff; color: #111827; border-color: #e5e7eb; }

.footer { font-size: 12px; color: #6b7280; margin-top: 8px; text-align: center; }

@media (max-width: 640px) {
  #undo-btn, #redo-btn { order: -1; }
}