:root { --bg:#f6f4f0; --ink:#1c1a17; --mute:#777067; --acc:#d4561c; --line:#e3ddd2; --card:#fff; --add:#e3f6e6; --addInk:#1d6b2c; --del:#fbe6e3; --delInk:#a12a1c; }
@media (prefers-color-scheme: dark) { :root { --bg:#14120e; --ink:#efebe2; --mute:#9a9387; --line:#2c2921; --card:#1d1a15; --add:#16301c; --addInk:#8fdc9e; --del:#3a1a16; --delInk:#ff9b8c; } }
* { box-sizing:border-box }
html, body { height:100% }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.45 system-ui,sans-serif; display:flex; flex-direction:column; }
header { display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap }
h1 { font-size:19px; margin:0 } h1 span { color:var(--acc) }
.spacer { flex:1 }
.pill { font-size:12px; padding:2px 9px; border-radius:999px; border:1px solid var(--line); color:var(--mute) }
.pill.ok { color:var(--addInk); border-color:var(--addInk) } .pill.bad { color:var(--delInk); border-color:var(--delInk) }
button, .btn { font:inherit; font-size:13px; color:inherit; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:5px 11px; cursor:pointer }
button:hover, .btn:hover { border-color:var(--acc) }
.btn { border-color:var(--acc) }
main { flex:1; display:grid; grid-template-columns:minmax(260px,1fr) minmax(320px,1.3fr) minmax(320px,1.4fr); gap:12px; padding:12px 16px; min-height:0 }
@media (max-width:1000px) { main { grid-template-columns:1fr; } .pane { min-height:420px } }
.pane { display:flex; flex-direction:column; min-height:0; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px }
.panehead, label[for=cmd] { font-size:12px; font-weight:600; color:var(--mute); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px }
.panehead small { text-transform:none; font-weight:400; letter-spacing:0 }
textarea { font:inherit; color:inherit; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:9px 11px; width:100% }
#cmd { min-height:80px; resize:vertical; border-color:var(--acc); background:var(--card) }
#cmd:disabled { opacity:.55 }
#src { flex:1; resize:none; font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre; overflow:auto }
#src.flash { animation:f 1.2s } @keyframes f { from { box-shadow:0 0 0 3px var(--acc) } }
#pdf { flex:1; border:0; border-radius:6px; background:#fff; width:100% }
.hint { color:var(--mute); font-size:12px; margin:5px 0 8px }
.chips { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px }
.chips button { font-size:12px; border-radius:999px; padding:3px 9px }
#log { flex:1; overflow:auto; display:flex; flex-direction:column; gap:6px; min-height:0 }
.m { border:1px solid var(--line); border-radius:8px; padding:7px 9px; font-size:13px; background:var(--bg) }
.m.you { border-left:3px solid var(--acc); background:var(--card) } .m.err { color:var(--delInk) }
.diff { margin-top:5px; font:11.5px/1.4 ui-monospace,Menlo,monospace; white-space:pre-wrap; word-break:break-word }
.diff .d { background:var(--del); color:var(--delInk) } .diff .a { background:var(--add); color:var(--addInk) }
.diff div { padding:0 4px; border-radius:3px }
small { color:var(--mute) }

#mode { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden }
#mode button { border:0; border-radius:0; padding:4px 14px; background:var(--card) }
#mode button[aria-pressed=true] { background:var(--acc); color:#fff }
#mode button:disabled { opacity:.45; cursor:not-allowed }
.pill { max-width:46ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }