.drawing-tools{padding:6px;max-width:calc(100% - 24px)}
.annotation-tool-row{display:flex;gap:2px;align-items:center}
.drawing-tools .pen-tool,.drawing-tools .finish-drawing{width:auto;gap:5px;padding:0 8px;font-size:12px;font-weight:600}
.drawing-tools #pen-color-menu{width:45px;gap:3px}
#pen-color-menu>svg{width:11px;height:11px}
.pen-color-preview{display:block;width:21px;height:21px;border-radius:50%;border:2px solid white;box-shadow:0 0 0 1px #d7d1e3;flex:none}
.drawing-tools button:disabled{opacity:.4;cursor:not-allowed}
.pen-color-panel{position:absolute;bottom:calc(100% + 10px);right:0;width:258px;padding:14px;background:white;border:1px solid #e0daeb;border-radius:12px;box-shadow:0 10px 35px #30204525;line-height:1.5;color:#554b62;max-height:calc(100dvh - 240px);overflow-y:auto}
.pen-panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:13px}
.pen-panel-heading .icon-button{width:23px;height:23px}
.pen-palette{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin:4px 0 17px}
.pen-swatch{width:22px;height:22px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #ded9e6;padding:0}
.pen-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px #6652d2;transform:scale(1.08)}
.pen-custom-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pen-custom-row label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:500}
.pen-custom-row input{width:100%;height:34px;border:1px solid #e2ddea;border-radius:6px;background:#fff;padding:6px;color:#544962;font:12px ui-monospace,monospace}
.pen-custom-row input[type="color"]{padding:4px;cursor:pointer}
.pen-custom-row input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.pen-custom-row input[type="color"]::-webkit-color-swatch{border:0;border-radius:3px}
.pen-size-label{display:flex;align-items:center;justify-content:space-between;font-size:12px;gap:12px;margin:13px 0}
.pen-size-label select{border:1px solid #e2ddea;border-radius:5px;padding:6px;font-size:12px;background:white;color:#544962}
.pen-color-panel .pick-image-color{width:100%;justify-content:center;font-size:12px;padding:8px;gap:7px}
.pen-color-panel>p{font-size:10px;line-height:1.6;color:#94869f;margin:10px 0 0}
.color-pick-notice{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:290px;padding:10px 12px;border-radius:8px;background:#34295b;color:white;box-shadow:0 5px 16px #30204522;font-size:12px;line-height:1.6;display:flex;align-items:center;justify-content:space-between;gap:10px}
.color-pick-notice button{color:white;background:transparent;border:1px solid #ffffff66;border-radius:4px;font-size:11px;padding:2px 6px}
.annotation-layer.picking-color{cursor:crosshair}
.annotation-layer.pen-active .canvas-pin,.annotation-layer.picking-color .canvas-pin{pointer-events:none}
.annotation-layer.pen-active .canvas-pin.draft{display:none}
.drawing-summary{font-size:11px;line-height:1.6;color:#8b7ca0;margin:0 0 10px}
.drawing-tools button:focus-visible,.pen-color-panel input:focus-visible,.pen-color-panel select:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
@media(max-width:1000px){.drawing-tools .icon-button{width:29px}.drawing-tools .pen-tool,.drawing-tools .finish-drawing{width:auto;padding:0 5px}.drawing-tools #pen-color-menu{width:39px}.annotation-tool-row{gap:1px}}
@media(max-width:760px){.drawing-tools{bottom:65px}.drawing-tools .icon-button{height:34px}.pen-color-panel{width:256px;max-width:calc(100vw - 40px);max-height:calc(100dvh - 220px)}.color-pick-notice{max-width:calc(100vw - 42px)}.canvas-stage{padding-bottom:110px}}
@media(max-width:360px){.drawing-tools .pen-tool>span,.drawing-tools .finish-drawing>span{display:none}}