* { 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; }

#counter { margin-left: auto; color: #6c7086; }

#htmlSize { margin-left: 10px; color: #6c7086; }