.drawing-workspace-backdrop{position:fixed;inset:0;z-index:10080;background:rgba(8,12,18,.78);display:flex;align-items:center;justify-content:center;padding:28px}.drawing-workspace-backdrop.hidden{display:none}.drawing-workspace-shell{width:min(980px,94vw);height:min(760px,90vh);background:#202833;border:1px solid #44505e;box-shadow:0 24px 70px rgba(0,0,0,.45);display:flex;flex-direction:column;color:#e7edf5}.drawing-workspace-header{display:flex;align-items:flex-start;padding:18px 20px;border-bottom:1px solid #3b4653}.drawing-workspace-header span{font-size:10px;letter-spacing:.14em;color:#8fa0b4}.drawing-workspace-header h2{font-size:19px;margin:3px 0}.drawing-workspace-header p{margin:0;color:#aab5c2;font-size:12px}.drawing-workspace-header button{margin-left:auto;background:none;border:0;color:#cbd5df;font-size:27px;cursor:pointer}.drawing-workspace-body{display:grid;grid-template-columns:minmax(0,1fr) 245px;min-height:0;flex:1}.drawing-canvas-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;background:#171d25;min-width:0}.drawing-canvas-frame{position:relative;overflow:hidden;max-width:100%;max-height:100%;background-color:#fff;background-image:linear-gradient(45deg,#e9edf1 25%,transparent 25%),linear-gradient(-45deg,#e9edf1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9edf1 75%),linear-gradient(-45deg,transparent 75%,#e9edf1 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;border:1px solid #697787;box-shadow:0 5px 24px rgba(0,0,0,.3);touch-action:none}.drawing-reference{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}.drawing-reference img{position:absolute;max-width:none;max-height:none;object-fit:fill;transform-origin:center center}.drawing-reference.frame-rounded{border-radius:12%}.drawing-reference.frame-circle{border-radius:50%}.drawing-reference.frame-heart{clip-path:path("M 0.5 0.92 C 0.42 0.84 0.08 0.58 0.08 0.31 C 0.08 0.12 0.22 0.02 0.38 0.02 C 0.47 0.02 0.55 0.07 0.5 0.15 C 0.45 0.07 0.53 0.02 0.62 0.02 C 0.78 0.02 0.92 0.12 0.92 0.31 C 0.92 0.58 0.58 0.84 0.5 0.92 Z")}.drawing-canvas-frame canvas{position:relative;z-index:2;display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.drawing-canvas-wrap>small{color:#8996a5}.drawing-controls{padding:18px;border-left:1px solid #3b4653;overflow:auto}.drawing-controls h3{font-size:12px;color:#b8c3cf;margin:18px 0 8px}.drawing-target{padding:12px;border:1px solid #45515e;background:#1a212a}.drawing-target span,.drawing-target small{display:block;font-size:11px;color:#94a1af}.drawing-target strong{display:block;margin:4px 0;font-size:14px}.drawing-tool-buttons,.drawing-widths,.drawing-edit-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}.drawing-edit-buttons{grid-template-columns:1fr}.drawing-controls button{height:34px;border:1px solid #4c5968;background:#29333e;color:#dce4ec;cursor:pointer}.drawing-controls button:hover,.drawing-controls button.active{border-color:#72a7e8;background:#31465d}.drawing-colors{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.drawing-colors button{width:30px;height:30px;border-radius:50%;background:var(--draw-color);border:2px solid #667383}.drawing-colors button.active{outline:2px solid #8fc0ff;outline-offset:2px}.drawing-colors input{width:36px;height:32px;padding:1px;border:1px solid #536171;background:#202833}.drawing-workspace-footer{display:flex;align-items:center;gap:8px;padding:13px 18px;border-top:1px solid #3b4653}.drawing-workspace-footer span{font-size:11px;color:#97a4b2;margin-right:auto}.drawing-workspace-footer button{height:36px;min-width:82px;border:1px solid #52606e;background:#2a3440;color:#e6edf5;cursor:pointer}.drawing-workspace-footer button.primary{background:#246ec4;border-color:#3987de;color:#fff}.tool.optional-tool-module[data-module-feature="drawing"]{display:flex}@media(max-width:760px){.drawing-workspace-backdrop{padding:8px}.drawing-workspace-body{grid-template-columns:1fr}.drawing-controls{border-left:0;border-top:1px solid #3b4653}.drawing-workspace-shell{height:96vh}.drawing-canvas-wrap{min-height:330px}.drawing-workspace-footer span{display:none}}

/* DRAW37 - making experience enhancements */
.drawing-controls h3{display:flex;align-items:center;justify-content:space-between;gap:8px}.drawing-controls h3 b{font-size:10px;font-weight:600;color:#8fc0ff}.drawing-tool-grid{grid-template-columns:1fr 1fr}.drawing-tool-grid button{font-size:11px;text-align:left;padding:0 9px}.drawing-width-control,.drawing-opacity-control{display:grid;gap:8px}.drawing-width-control>input,.drawing-opacity-control>input{width:100%;accent-color:#3a8ee6}.drawing-opacity-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.drawing-opacity-presets button{height:30px;font-size:10px}.drawing-opacity-presets button.active{border-color:#72a7e8;background:#31465d}.drawing-colors button[style*="#ffffff"]{box-shadow:inset 0 0 0 1px #98a5b2}.drawing-canvas-frame canvas[data-tool="eraser"]{cursor:cell}.drawing-canvas-frame canvas[data-tool="line"],.drawing-canvas-frame canvas[data-tool="rect"],.drawing-canvas-frame canvas[data-tool="ellipse"]{cursor:crosshair}.drawing-workspace-shell{width:min(1040px,95vw)}.drawing-workspace-body{grid-template-columns:minmax(0,1fr) 280px}@media(max-width:760px){.drawing-tool-grid{grid-template-columns:repeat(3,1fr)}.drawing-tool-grid button{text-align:center;padding:0 4px}.drawing-workspace-body{grid-template-columns:1fr}}

/* DRAW101 - tablet pen / pressure support */
.drawing-pen-options{display:grid;gap:7px;padding:10px;border:1px solid #45515e;background:#1a212a}.drawing-pen-options label{display:flex;align-items:center;gap:8px;color:#d5dee8;font-size:11px}.drawing-pen-options input[type="checkbox"]{accent-color:#3a8ee6}.drawing-pen-options button{height:36px;border-color:#5a7595;background:#263d56;color:#e8f2ff;text-align:center}.drawing-pen-options button:hover{background:#315578;border-color:#78aeea}.drawing-pen-options small{font-size:10px;line-height:1.5;color:#8493a3}


/* DRAW102 - wide compact workspace / no desktop control scrollbar */
@media (min-width: 761px){
  .drawing-workspace-backdrop{padding:14px}
  .drawing-workspace-shell{width:min(1240px,97vw);height:min(850px,94vh)}
  .drawing-workspace-header{padding:12px 18px}
  .drawing-workspace-header h2{font-size:18px;margin:2px 0}
  .drawing-workspace-header p{font-size:11px}
  .drawing-workspace-header button{font-size:24px;line-height:1}
  .drawing-workspace-body{grid-template-columns:minmax(0,1fr) 300px}
  .drawing-canvas-wrap{padding:18px;gap:7px}
  .drawing-canvas-wrap>small{font-size:10px}
  .drawing-controls{padding:12px 14px;overflow:hidden}
  .drawing-target{padding:8px 10px}
  .drawing-target span,.drawing-target small{font-size:10px}
  .drawing-target strong{font-size:13px;margin:2px 0}
  .drawing-controls h3{font-size:11px;margin:9px 0 5px}
  .drawing-controls h3 b{font-size:9px}
  .drawing-tool-grid{grid-template-columns:repeat(3,1fr);gap:4px}
  .drawing-tool-grid button{height:27px;font-size:10px;text-align:center;padding:0 4px}
  .drawing-controls button{height:28px;font-size:10px}
  .drawing-colors{gap:5px;flex-wrap:nowrap}
  .drawing-colors button{width:24px;height:24px;min-width:24px}
  .drawing-colors input{width:30px;height:26px}
  .drawing-width-control,.drawing-opacity-control{gap:5px}
  .drawing-widths{grid-template-columns:repeat(3,1fr);gap:4px}
  .drawing-widths button,.drawing-opacity-presets button{height:25px;font-size:9px}
  .drawing-opacity-presets{gap:4px}
  .drawing-pen-options{gap:5px;padding:7px 8px}
  .drawing-pen-options label{font-size:10px}
  .drawing-pen-options button{height:28px;font-size:10px}
  .drawing-pen-options small{font-size:9px;line-height:1.35}
  .drawing-edit-buttons{grid-template-columns:repeat(3,1fr);gap:4px}
  .drawing-edit-buttons button{height:27px;font-size:9px;padding:0 2px}
  .drawing-workspace-footer{padding:9px 16px}
  .drawing-workspace-footer button{height:32px;min-width:74px}
}
@media (min-width:761px) and (max-height:760px){
  .drawing-workspace-shell{height:96vh}
  .drawing-controls{overflow:auto}
}