:root{
  --bg:#e6eef6;
  /* #071019; */
  --panel:rgba(255,255,255,0.02);
  --accent:#06b6d4;
  --muted:#94a3b8;
  --text:#e6eef6;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(182deg, #071019, #ced3d7);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial}
#topbar{height:56px;display:flex;align-items:center;gap:12px;padding:8px 12px;background:rgba(0,0,0,0.35);backdrop-filter:blur(6px)}
#brand{font-weight:700}
#tools{display:flex;gap:8px;align-items:center;flex:1;flex-wrap:wrap}
#tools label, #tools select{font-size:13px;color:var(--muted)}
#tools input[type="color"]{width:36px;height:28px;padding:0;border-radius:6px;border:1px solid rgba(255,255,255,0.04)}
#tools input[type="range"]{width:120px}
#tools button{height:34px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit;padding:6px 10px;cursor:pointer}
#tools button.active{outline:2px solid var(--accent)}
#me{font-size:13px;color:var(--muted)}
#container{position:relative;height:calc(100vh - 56px);overflow:hidden}
#board{position:absolute;left:0;top:0;width:100%;height:100%;background:transparent;cursor:crosshair;display:block}
#overlay{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
#sidebar{position:absolute;right:12px;top:72px;width:340px;max-height:calc(100% - 96px);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:10px;padding:10px;backdrop-filter:blur(4px);overflow:hidden;display:flex;flex-direction:column;gap:8px}
#usersTitle{font-weight:700;margin-bottom:4px}
#users{display:flex;flex-direction:column;gap:8px;max-height:160px;overflow-y:auto;padding-right:6px}
.userRow{display:flex;align-items:center;gap:8px;padding:6px;border-radius:8px;background:rgba(255,255,255,0.01)}
.cursorDot{width:12px;height:12px;border-radius:50%;flex:0 0 12px}
#chatBox{display:flex;flex-direction:column;flex:1;background:rgba(0,0,0,0.12);padding:8px;border-radius:8px}
#messages{flex:1;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:6px}
.msg{font-size:13px;padding:6px;border-radius:6px;background:rgba(255,255,255,0.02)}
#composer{display:flex;gap:6px;margin-top:6px}
#composer input{flex:1;padding:8px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
#composer button{padding:8px 10px;border-radius:6px;background:var(--accent);border:none;color:#052026;cursor:pointer}
.element{position:absolute;box-shadow:0 8px 22px rgba(0,0,0,0.6);border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,0.03);background:rgba(0,0,0,0.18);pointer-events:auto}
.element img, .element video{display:block;width:100%;height:100%;object-fit:cover}
.element .controls{position:absolute;right:6px;top:6px;display:flex;gap:6px;z-index:5}
.element .controls button{background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.04);color:#fff;padding:4px 6px;border-radius:4px;font-size:12px;cursor:pointer}
.resize-handle{position:absolute;width:12px;height:12px;background:var(--accent);border-radius:2px;right:0;bottom:0;cursor:se-resize;transform:translate(50%,50%)}
[contenteditable]{outline:none}