.drawing-dock,.drawing-editor,.drawing-status,.drawing-hint,.drawing-value{position:absolute;z-index:8;box-sizing:border-box;font:11px ui-monospace,SFMono-Regular,Consolas,monospace}
.drawing-dock[hidden],.drawing-editor[hidden],.drawing-status[hidden],.drawing-hint[hidden],.drawing-value[hidden]{display:none!important}
.drawing-dock{left:8px;top:8px;display:flex;flex-direction:column;gap:3px;padding:4px;background:rgba(24,27,31,.96);border:1px solid #363c45;border-radius:5px;max-height:calc(100% - 44px);overflow-y:auto;scrollbar-width:thin;box-shadow:0 2px 10px #0003}
.drawing-button{display:grid;place-items:center;flex:0 0 29px;width:29px;height:29px;min-height:29px;padding:5px;border:1px solid transparent;border-radius:3px;background:transparent;color:#9ea9b6;cursor:pointer;touch-action:manipulation}
.drawing-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.drawing-button:hover{background:#2b3440;color:#e1ebf5}.drawing-button.active{color:#8fc9fb;background:#263c50;border-color:#416583}
.drawing-button:focus-visible,.drawing-editor input:focus-visible,.drawing-editor select:focus-visible{outline:2px solid #8fc9fb;outline-offset:1px}
.drawing-button:disabled{opacity:.3;cursor:default}.drawing-separator{height:1px;background:#363c45;margin:3px 1px;flex-shrink:0}
.drawing-editor{left:55px;top:8px;display:flex;align-items:center;gap:4px;height:36px;padding:3px 5px;background:rgba(24,27,31,.97);border:1px solid #363c45;border-radius:4px;box-shadow:0 2px 10px #0003}
.drawing-editor input[type=color]{appearance:none;width:25px;height:25px;padding:2px;background:#20252c;border:1px solid #46505d;border-radius:3px;cursor:pointer}.drawing-editor input[type=color]::-webkit-color-swatch-wrapper{padding:1px}.drawing-editor input[type=color]::-webkit-color-swatch{border:0;border-radius:2px}
.drawing-editor select{height:25px;width:57px;color:#c0ccd8;border:1px solid #46505d;border-radius:3px;background:#20252c;font:11px ui-monospace,Consolas,monospace;padding:2px}
.drawing-editor input:disabled,.drawing-editor select:disabled{opacity:.4;cursor:default}
.drawing-status{left:55px;bottom:30px;color:#7e8e9f;background:rgba(18,22,27,.84);padding:3px 6px;pointer-events:none;border-radius:3px;font-size:10px}.drawing-status[data-error=true]{color:#e9b970}
.drawing-value{left:55px;bottom:54px;max-width:calc(100% - 145px);padding:5px 7px;color:#d5e6f5;background:rgba(24,32,41,.95);border:1px solid #34495e;border-radius:3px;pointer-events:none;line-height:1.5}
.drawing-hint{left:55px;top:51px;max-width:calc(100% - 140px);padding:4px 6px;color:#a1b1c1;background:rgba(18,22,27,.9);border-radius:3px;pointer-events:none;font-size:10px;line-height:1.5}
@media(max-width:720px){.drawing-dock{left:5px;top:5px;padding:3px;gap:2px}.drawing-button{width:28px;height:28px;min-height:28px;flex-basis:28px}.drawing-editor{left:47px;top:5px}.drawing-hint{left:47px;top:47px;max-width:calc(100% - 125px)}.drawing-status{left:47px;font-size:9px}.drawing-value{left:47px;font-size:10px}}
.drawing-account-controls{position:relative;flex-shrink:0}
.drawing-login,.drawing-account{display:flex;align-items:center;justify-content:center;height:28px;padding:0 8px;border:1px solid #3d4650;border-radius:3px;background:#1b2026;color:#a9c8e5;font:11px var(--num,monospace);text-decoration:none;white-space:nowrap}
.drawing-login:hover,.drawing-account:hover{background:#263443;color:#e1ebf5}
.drawing-login[hidden],.drawing-account[hidden],.drawing-account-menu[hidden]{display:none!important}
.drawing-account[data-state=saved]{border-color:#34533f;color:#9ac6a8}
.drawing-account[data-state=offline],.drawing-account[data-state=auth-required]{border-color:#695534;color:#e9b970}
.drawing-account-menu{position:absolute;right:0;top:calc(100% + 7px);z-index:70;width:254px;max-width:calc(100vw - 20px);padding:12px;border:1px solid #3d4650;border-radius:5px;background:#191e25;box-shadow:0 10px 30px #0008;font:12px var(--num,monospace);color:#c5d0dc}
.drawing-account-menu strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e1ebf5;font-size:12px}
.drawing-account-menu p{margin:8px 0 12px;font-size:11px;line-height:1.5;color:#a1b1c1}
.drawing-account-menu button{display:block;width:100%;margin-top:5px;padding:7px 9px;text-align:left;border:1px solid #3d4650;border-radius:3px;color:#c5d0dc;font:11px var(--num,monospace)}
.drawing-account-menu button:hover{background:#263443}.drawing-account-menu button:disabled{opacity:.5}
@media(max-width:720px){.drawing-login,.drawing-account{padding:0 5px;font-size:10px;height:26px}.drawing-account-menu{position:fixed;top:48px;right:7px}.drawing-status{max-width:calc(100% - 132px);white-space:normal;line-height:1.35}}
