:root { --bg:#f6f7f9; --ink:#1c2126; --line:#dfe3e8; --accent:#2f6fed; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
       background:var(--bg); color:var(--ink); }
.bar { display:flex; align-items:center; gap:12px; padding:10px 16px; background:#fff;
       border-bottom:1px solid var(--line); }
.bar h1 { font-size:17px; margin:0; letter-spacing:.02em; }
.grow { flex:1; }
.cols { display:grid; grid-template-columns:260px 1fr; gap:16px; padding:16px; align-items:start; }
@media (max-width:820px){ .cols { grid-template-columns:1fr; } }
.jobs, .editor, .empty { background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px; }
.jobs ul { list-style:none; margin:8px 0 0; padding:0; }
.jobs li { display:flex; align-items:center; gap:4px; }
.jobs li.sel .jobbtn { background:#eef3ff; border-color:#c9d9ff; }
.jobbtn { flex:1; text-align:left; background:transparent; border:1px solid transparent;
          border-radius:8px; padding:7px 9px; cursor:pointer; font:inherit; }
.jobbtn strong { display:block; font-weight:600; font-size:14px; }
.jobbtn small { color:#6b7683; }
.del { background:transparent; border:0; color:#98a2ad; cursor:pointer; font-size:18px; padding:2px 6px; }
.del:hover { color:#c0392b; }
.row { display:flex; gap:10px; align-items:end; }
.row.wrap { flex-wrap:wrap; margin-bottom:10px; }
label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:#5a6773; }
label.check { flex-direction:row; align-items:center; gap:6px; font-size:13px; color:var(--ink); }
input, select { font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:7px; background:#fff; }
input[type=number] { width:88px; }
button { font:inherit; padding:7px 13px; border:1px solid var(--line); background:#fff;
         border-radius:8px; cursor:pointer; }
button:hover { border-color:#c3cad2; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.ghost { border:0; color:#5a6773; }
.canvaswrap { margin:8px 0; }
canvas { border:1px solid var(--line); border-radius:8px; background:
         repeating-conic-gradient(#f0f2f4 0% 25%, #fff 0% 50%) 0/16px 16px;
         max-width:100%; touch-action:none; }
.hint { color:#6b7683; font-size:12px; margin:6px 0 0; }
.warn { background:#fff7e6; border:1px solid #f0d9a8; color:#7a5a12; padding:8px 10px;
        border-radius:8px; font-size:13px; margin:0 0 10px; }
.status { font-size:13px; color:#5a6773; }
.status.ok { color:#1a7f37; } .status.bad { color:#c0392b; }
.log { background:#0f1419; color:#cfe3ff; padding:10px 12px; border-radius:8px;
       font:12px/1.5 ui-monospace,monospace; overflow:auto; margin-top:10px; }
.pill { font-size:12px; padding:3px 9px; border-radius:999px; background:#eef1f4; color:#5a6773; }
.pill.ok { background:#e6f6ec; color:#1a7f37; } .pill.bad { background:#fdecea; color:#c0392b; }
.signin { max-width:420px; margin:14vh auto; text-align:center; background:#fff;
          border:1px solid var(--line); border-radius:12px; padding:32px; }
.signin h1 { margin:0 0 6px; } .signin p { color:#5a6773; }