styles.css

* { box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; height: 100vh; display: flex; flex-direction: column; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: #f3f3f3; border-bottom: 1px solid #ddd; position: sticky; top: 0; z-index: 10; }
.toolbar .group { display: flex; gap: 6px; align-items: center; }
.toolbar button { background: white; border: 1px solid #ccc; padding: 6px 8px; cursor: pointer; border-radius: 4px; }
.toolbar button:hover { background: #eee; }
.toolbar select, .toolbar input[type="color"] { padding: 6px 8px; border-radius: 4px; border: 1px solid #ccc; }
main { padding: 16px; flex: 1 1 auto; overflow: auto; }
#editor { min-height: 60vh; padding: 24px; border: 1px solid #ddd; background: white; max-width: 900px; margin: 12px auto; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
#editor:focus { outline: none; box-shadow: 0 0 0 3px rgba(21,156,228,0.15); }
.file-group input[type="file"] { display: inline-block; }
@media (max-width: 700px) { .toolbar { font-size: 14px; } }