:root{--bg:#0a0a0a;--s:#111;--b:#222;--t:#e5e5e5;--tm:#888;--a:#6366f1;--r:8px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--t);overflow:hidden;height:100vh;display:flex;flex-direction:column}
nav{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--s);border-bottom:1px solid var(--b);z-index:10;flex-shrink:0}
.logo{font-size:16px;font-weight:700;color:var(--a);margin-right:8px}
.tools{display:flex;gap:2px}
.tool{background:none;border:1px solid transparent;color:var(--tm);padding:6px 10px;border-radius:var(--r);cursor:pointer;font-size:14px;transition:.15s}
.tool:hover{background:var(--b);color:var(--t)}
.tool.active{background:var(--a);color:#fff;border-color:var(--a)}
.controls{display:flex;align-items:center;gap:8px;margin-left:12px}
.controls input[type="color"]{width:28px;height:28px;border:1px solid var(--b);border-radius:4px;cursor:pointer;background:none;padding:0}
.controls input[type="range"]{width:60px;accent-color:var(--a)}
.size-label{font-size:11px;color:var(--tm);min-width:16px}
.controls button{background:none;border:1px solid var(--b);color:var(--tm);padding:4px 8px;border-radius:4px;cursor:pointer;font-size:13px;transition:.15s}
.controls button:hover{border-color:var(--a);color:var(--a)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.status{font-size:11px;color:var(--tm)}
.logout-btn{background:none;border:1px solid var(--b);color:var(--tm);padding:4px 12px;border-radius:4px;font-size:12px;cursor:pointer}
.logout-btn:hover{border-color:#ef4444;color:#ef4444}
main{flex:1;position:relative;overflow:hidden}
#canvas{position:absolute;top:0;left:0;cursor:crosshair}