:root { --bg:#f6f3ee; --text:#1c1915; --muted:#6d645b; --elev:#fffdf8; --border:#e4dccf; --accent:#1f6f5b; --accentText:#f6f3ee; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 Georgia, serif; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; }
.topbar, .page { max-width: 980px; margin: 0 auto; padding: 1rem; }
.topbar { display: flex; gap: 1rem; align-items: center; }
.who { margin-left: auto; }
.card { background: var(--elev); border: 1px solid var(--border); border-radius: 16px; padding: 1rem; margin: .7rem 0; }
.stack { display: flex; flex-direction: column; gap: .6rem; }
.row { display: flex; justify-content: space-between; gap: .7rem; align-items: center; }
.input { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: .7rem .8rem; background: #fff; color: var(--text); }
.btn { border: 0; border-radius: 12px; min-height: 42px; padding: 0 1rem; background: var(--accent); color: var(--accentText); cursor: pointer; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn:disabled { opacity: .6; }
.btn:focus-visible, .input:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--muted); }
.error { color: #9f1239; }
.grid { display: grid; grid-template-columns: 1fr 340px; gap: 1rem; align-items: start; }
.preview { position: sticky; top: 1rem; min-height: 520px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #fff; padding: .8rem; }
.field { display: flex; flex-direction: column; gap: .25rem; }
.field small { color: var(--muted); }
.preview-window { border-radius: 16px; overflow: hidden; min-height: 380px; display: flex; flex-direction: column; border: 1px solid var(--border); }
.preview-log { flex: 1; padding: .8rem; }
.bubble-row { display: flex; gap: .4rem; align-items: flex-end; margin: .45rem 0; }
.bubble-row.mine { flex-direction: row-reverse; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #ddd; }
.avatar.letter { display: grid; place-items: center; font-size: .8rem; }
@media (max-width: 800px) { .grid { grid-template-columns: 1fr; } body { overflow-x: hidden; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; transition: none !important; } }