:root{--bg: #0f1115;--panel: #171a21;--panel2: #1e222b;--border: #2a2f3a;--text: #e6e9ef;--muted: #8b93a5;--accent: #4f8cff;--accent2: #2e6bd6;--ok: #3ddc84;--err: #ff5c5c;--warn: #ffb86c}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#app{min-height:100%}.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border)}.topbar .brand{font-weight:700;font-size:16px}.topbar .spacer{flex:1}.topbar button,.topbar .nav{background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:6px 12px;cursor:pointer;font-size:13px}.topbar button:hover{border-color:var(--accent)}.topbar .nav.active{background:var(--accent2);border-color:var(--accent)}.login-wrap{display:flex;align-items:center;justify-content:center;height:100vh}.login{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:28px;width:320px}.login h1{margin:0 0 6px;font-size:20px}.login p{color:var(--muted);margin:0 0 18px}.login input{width:100%;padding:9px 11px;border-radius:6px;background:var(--panel2);color:var(--text);border:1px solid var(--border);margin-bottom:12px;font-size:14px}.login button{width:100%;padding:9px;border:0;border-radius:6px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}.login button:hover{background:var(--accent2)}.login .err{color:var(--err);margin-top:10px;font-size:13px}.content{padding:16px;max-width:1100px;margin:0 auto}table{width:100%;border-collapse:collapse;background:var(--panel);border-radius:8px;overflow:hidden}th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)}th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em}td .tok{font-family:ui-monospace,monospace;font-size:12px;color:var(--muted)}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:middle}.dot.off{background:var(--muted)}.btn{background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:5px 10px;cursor:pointer;font-size:12px}.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.control{display:flex;gap:12px;padding:12px}.canvas-wrap{position:relative;background:#000;border:1px solid var(--border);border-radius:8px;overflow:hidden;flex:0 0 auto}canvas{display:block;touch-action:none}.toolbar{display:flex;flex-direction:column;gap:8px;width:220px}.toolbar h2{margin:0 0 4px;font-size:15px}.toolbar .row{display:flex;gap:6px;flex-wrap:wrap}.toolbar input.text{width:100%;padding:7px 9px;border-radius:6px;background:var(--panel2);color:var(--text);border:1px solid var(--border);font-size:13px}.log{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-family:ui-monospace,monospace;font-size:12px;color:var(--muted);max-height:160px;overflow:auto}.muted{color:var(--muted)}.tag{font-size:11px;padding:2px 6px;border-radius:4px;background:var(--panel2);border:1px solid var(--border)}.gen{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:18px;max-width:560px}.gen label{display:block;color:var(--muted);margin:10px 0 4px;font-size:12px}.gen input{width:100%;padding:8px 10px;border-radius:6px;background:var(--panel2);color:var(--text);border:1px solid var(--border);font-family:ui-monospace,monospace;font-size:12px}.gen .out{margin-top:14px}