#draw-app { --draw-border:var(--color-border,#b5beca); --draw-panel:var(--color-surface,#fff); --draw-ink:var(--color-text,#202938); color:var(--draw-ink); }
.draw-header h1 { margin-bottom:.3rem; }.draw-header .lead { margin:.25rem 0; }.draw-header { padding-block:1rem; }
#draw-app * { box-sizing:border-box; }#draw-app [hidden] { display:none !important; }
#draw-app button,#draw-app input,#draw-app select,#draw-app textarea { font:inherit; color:inherit; }
#draw-app button { border:1px solid var(--draw-border); background:var(--draw-panel); border-radius:.5rem; padding:.45rem .65rem; min-height:40px; cursor:pointer; }
#draw-app button[aria-pressed="true"],#draw-app button.primary { background:#175bc0; border-color:#175bc0; color:#fff; }
#draw-app button:disabled { opacity:.5; cursor:default; }
#draw-app :focus-visible { outline:3px solid #d87800; outline-offset:3px; }
.draw-actions,.draw-zoom { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }.draw-actions { margin-block:.5rem; }
.draw-main-actions { background:var(--draw-panel); padding:.35rem; border-radius:.5rem; }
#draw-status,#draw-dirty { min-height:1.2em; margin:.25rem 0; font-size:.875rem; }#draw-status[data-error="true"] { color:#b32121; }
.draw-layout { display:grid; grid-template-columns:112px minmax(0,1fr) 230px; gap:.7rem; align-items:start; }
.draw-layout>* { min-width:0; }.draw-tools { display:grid; gap:.35rem; }.draw-work { min-width:0; }
#draw-workspace { height:460px; min-height:420px; overflow:hidden; background:repeating-conic-gradient(#e3e7ec 0% 25%,#f4f6f8 0% 50%) 0 0/20px 20px; border:1px solid var(--draw-border); border-radius:.65rem; touch-action:none; user-select:none; }
#draw-canvas { width:100%; height:100%; display:block; touch-action:none; }
#draw-app #draw-workspace { box-sizing:content-box; min-height:320px; max-height:1200px; background:var(--color-surface-alt,#c3cad3); }
#draw-app .draw-paper-edge { stroke:var(--draw-ink); stroke-width:1; vector-effect:non-scaling-stroke; }
#draw-app .draw-creation { padding:.5rem; border:1px solid var(--draw-border); border-radius:.5rem; background:var(--draw-panel); margin-bottom:.5rem; }
#draw-app .draw-create-basic { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
#draw-app .draw-create-basic>span { display:flex; align-items:center; gap:.3rem; flex:1 1 140px; }
#draw-app .draw-create-basic input { width:5rem; min-width:3rem; }
#draw-app .draw-creation details { margin-top:.4rem; padding:.25rem; font-size:.85rem; }
#draw-app .draw-creation label,#draw-app .draw-hint { font-size:.85rem; }
#draw-app #draw-create-error:empty { display:none; }
#draw-app #draw-create-error { color:#b32121; }
#draw-app #draw-workspace-handle { height:28px; cursor:ns-resize; touch-action:none; display:flex; align-items:center; justify-content:center; }
#draw-app #draw-workspace-handle::after { content:""; width:64px; height:5px; border-radius:3px; background:var(--draw-border); }
#draw-app.draw-expanded .draw-layout { grid-template-columns:minmax(0,1fr); }
#draw-app.draw-expanded .draw-properties { grid-column:1/-1; max-height:none; }
#draw-app.draw-expanded .draw-main-actions { position:sticky; top:0; z-index:5; }
#draw-app.draw-expanded .draw-main-actions .draw-tools { grid-template-columns:repeat(10,minmax(0,1fr)); width:100%; }
#draw-app.draw-expanded :is(#draw-new,#draw-canvas-size,#draw-open-image,#draw-open-project,#draw-export) { display:none; }
#draw-app.draw-expanded .draw-creation { position:sticky; top:var(--draw-toolbar-height,100px); z-index:4; }
@media(max-width:600px) { #draw-app.draw-expanded .draw-main-actions .draw-tools { grid-template-columns:repeat(5,minmax(0,1fr)); } }
#draw-app .draw-zoom { margin-bottom:.4rem; }
.draw-zoom { justify-content:center; margin-top:.4rem; }#draw-zoom { min-width:4rem; text-align:center; }
.draw-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(65px,1fr); gap:.4rem; align-items:center; }
.draw-properties { max-height:520px; overflow:auto; }
body[data-page-id="draw"] .consent-reopen,body[data-page-id="draw"] .page-qr-fab { position:static; display:inline-flex; margin:.5rem 1rem; }
body[data-page-id="draw"] .consent-reopen.is-hidden { display:none; }
.draw-fields input,.draw-fields select,.draw-fields textarea { width:100%; min-width:0; }.draw-fields .draw-check { grid-column:1/-1; }
#draw-app input:not([type="checkbox"]),#draw-app select,#draw-app textarea { background:var(--draw-panel); border:1px solid var(--draw-border); border-radius:.3rem; padding:.35rem; max-width:100%; }
#draw-app textarea { width:100%; }.draw-check { display:flex; gap:.5rem; align-items:center; margin:.4rem 0; }.draw-check input { width:18px; height:18px; flex-shrink:0; }
#draw-app details { border:1px solid var(--draw-border); border-radius:.5rem; padding:.65rem; background:var(--draw-panel); }#draw-app summary { cursor:pointer; font-weight:600; padding:.2rem; }#draw-app details[open]>summary { margin-bottom:.7rem; }
.draw-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-block:.7rem; }.draw-panels>details { align-self:start; min-width:0; }.draw-panels p { font-size:.9rem; }
#draw-objects { max-height:240px; overflow:auto; }#draw-objects label { overflow-wrap:anywhere; }
#draw-app dialog { color:inherit; background:var(--draw-panel); border:1px solid var(--draw-border); border-radius:.75rem; max-width:min(480px,94vw); }#draw-app dialog::backdrop { background:#0007; }
.draw-outline { fill:none; stroke:#0969da; stroke-width:2; vector-effect:non-scaling-stroke; stroke-dasharray:5 3; pointer-events:none; }.draw-marker { fill:#fff; stroke:#0969da; stroke-width:2; vector-effect:non-scaling-stroke; pointer-events:none; }
:root[data-theme="dark"] #draw-app,body.dark #draw-app { --draw-panel:#1c2533; --draw-ink:#eef2fa; --draw-border:#68788e; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) #draw-app { --draw-panel:#1c2533; --draw-ink:#eef2fa; --draw-border:#68788e; } }
@media(max-width:1000px) { .draw-layout { grid-template-columns:100px minmax(0,1fr); }.draw-properties { grid-column:1/-1; }.draw-properties .draw-fields { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:600px) { .draw-layout { display:flex; flex-direction:column; }.draw-tools { grid-template-columns:repeat(5,minmax(0,1fr)); width:100%; gap:.25rem; }#draw-app .draw-tools button { font-size:.75rem; padding:.35rem .15rem; min-height:42px; }.draw-work,.draw-properties { width:100%; }#draw-workspace { height:430px; }.draw-panels { grid-template-columns:1fr; }.draw-properties .draw-fields { grid-template-columns:minmax(0,1fr) minmax(65px,1fr); }.draw-actions button { flex:1 0 auto; }.draw-zoom button { font-size:.85rem; } }