:root { color-scheme: dark; --bg:#0e0f12; --card:#17191e; --line:#2a2d35; --text:#ececf1; --mut:#8b8f9a; --acc:#fe2c55; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif; }
header { display:flex; gap:16px; align-items:baseline; padding:16px 24px; border-bottom:1px solid var(--line); }
h1 { margin:0; font-size:20px; } h2 { margin:0 0 12px; font-size:16px; }
main { display:grid; grid-template-columns:minmax(320px,480px) 1fr; gap:20px; padding:20px 24px; align-items:start; }
@media (max-width: 900px) { main { grid-template-columns:1fr; } }
.col { display:flex; flex-direction:column; gap:20px; min-width:0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--mut); }
label.chk { flex-direction:row; align-items:center; gap:8px; align-self:end; color:var(--text); }
input, select, textarea { background:#0f1013; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font:inherit; width:100%; }
textarea { resize:vertical; font:13px/1.4 ui-monospace, Menlo, monospace; }
input[type=checkbox] { width:auto; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
button { background:#262932; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:9px 14px; font:inherit; cursor:pointer; }
button:hover:not(:disabled) { border-color:#444; }
button.primary { background:var(--acc); border-color:var(--acc); font-weight:600; }
button:disabled { opacity:.4; cursor:default; }
.muted { color:var(--mut); font-size:13px; }
.err { color:#ff6b6b; } .ok { color:#6bd68a; }
.slides { display:flex; gap:12px; overflow-x:auto; padding:6px 2px 12px; min-height:120px; }
.slides canvas { height:520px; width:auto; aspect-ratio:9/16; border-radius:12px; border:1px solid var(--line); flex:none; cursor:zoom-in; }
.slides canvas.warn { outline:2px solid #ff9800; }
.lib-item { display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); }
.lib-item button { padding:3px 8px; font-size:12px; }
label.file { flex-direction:row; cursor:pointer; background:#262932; border:1px solid var(--line); border-radius:8px; padding:9px 14px; color:var(--text); font-size:15px; }