.draw-page{max-width:1400px;margin:0 auto;padding:28px 18px 70px}.draw-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px;border:1px solid rgba(19,156,255,.22);border-radius:28px;background:radial-gradient(circle at top right,rgba(19,156,255,.20),transparent 38%),linear-gradient(135deg,rgba(16,24,39,.96),rgba(7,11,20,.98));box-shadow:0 30px 90px rgba(0,0,0,.35)}.draw-kicker{color:#58c7ff;font-weight:800;letter-spacing:.12em;font-size:12px}.draw-hero h1{font-size:clamp(30px,4vw,58px);line-height:1;margin:8px 0 12px}.draw-hero p{color:#a9b8cc;max-width:680px;margin:0}.draw-actions-top{display:flex;gap:12px;flex-wrap:wrap}.draw-actions-top button,.draw-panel button{border:1px solid rgba(255,255,255,.12);background:#101827;color:#fff;border-radius:14px;padding:12px 16px;font-weight:800;cursor:pointer}.draw-actions-top .primary,.draw-panel .primary{background:linear-gradient(135deg,#139cff,#16d5ff);border-color:transparent;color:#06111d}.draw-panel .danger{background:rgba(255,79,79,.13);border-color:rgba(255,79,79,.32);color:#ffb5b5}.draw-workspace{display:grid;grid-template-columns:320px 1fr;gap:18px;margin-top:18px}.draw-panel{background:rgba(13,18,30,.94);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:18px;position:sticky;top:18px;align-self:start}.draw-panel h2{font-size:17px;margin:8px 0 14px}.tool-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:22px}.draw-panel label{display:block;color:#b9c8da;font-size:13px;margin:10px 0}.draw-panel input{width:100%;margin-top:7px;border:1px solid rgba(255,255,255,.10);background:#090e19;color:#fff;border-radius:12px;padding:11px}.draw-panel input[type=color]{height:44px;padding:4px}.draw-panel .full{width:100%;margin-top:10px}.draw-note{margin-top:16px;padding:14px;border-radius:16px;background:rgba(19,156,255,.08);border:1px solid rgba(19,156,255,.16);color:#aebed1;font-size:13px;line-height:1.55}.draw-canvas-wrap{min-height:720px;border:1px solid rgba(255,255,255,.08);border-radius:24px;background:#070b13;overflow:hidden;position:relative}.draw-toolbar{height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;background:rgba(10,16,28,.96);border-bottom:1px solid rgba(255,255,255,.08);color:#dcecff}.draw-toolbar small{color:#7f90a8}#drawCanvas{height:666px;width:100%;display:block}.draw-help{position:absolute;left:16px;bottom:16px;color:#8fa4bd;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 12px}@media(max-width:900px){.draw-hero{align-items:flex-start;flex-direction:column;padding:22px}.draw-workspace{grid-template-columns:1fr}.draw-panel{position:relative;top:auto}.draw-canvas-wrap{min-height:520px}#drawCanvas{height:466px}.draw-toolbar{height:auto;min-height:54px;align-items:flex-start;flex-direction:column;padding:12px 14px}}
.draw-error{position:absolute;inset:70px 16px auto 16px;z-index:20;background:rgba(255,70,70,.12);border:1px solid rgba(255,70,70,.35);color:#ffd4d4;border-radius:14px;padding:14px;font-weight:700}.draw-panel button.full:not(.primary):not(.danger){width:100%;margin-top:10px;background:#0b1324}.draw-panel button:hover,.draw-actions-top button:hover{filter:brightness(1.12);transform:translateY(-1px)}#drawCanvas canvas{display:block;outline:none}.draw-canvas-wrap{box-shadow:inset 0 0 0 1px rgba(19,156,255,.05),0 30px 80px rgba(0,0,0,.28)}