*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;
  --slate-400:#94a3b8;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;
  --slate-800:#1e293b;--slate-900:#0f172a;
  --blue-50:#eff6ff;--blue-100:#dbeafe;--blue-400:#60a5fa;--blue-500:#3b82f6;
  --blue-600:#2563eb;--blue-700:#1d4ed8;
  --red-500:#ef4444;--green-500:#22c55e;--green-600:#16a34a;--yellow-500:#eab308;--cyan-500:#06b6d4;
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --radius:8px;--radius-lg:12px;--radius-xl:16px;
}
body{font-family:var(--font);background:linear-gradient(135deg,var(--slate-50),var(--blue-50));color:var(--slate-900);min-height:100vh;font-size:.875rem}

/* Header — matches tools.promecad.com */
.header{background:var(--slate-900);border-bottom:1px solid var(--slate-700)}
.header__inner{max-width:1200px;margin:0 auto;padding:.625rem 1.5rem;display:flex;align-items:center;gap:1rem}
.header__brand{display:flex;align-items:center;gap:.5rem}
.header__title{font-size:1rem;font-weight:700;color:#fff;letter-spacing:.02em}
.header__badge{font-size:.625rem;font-weight:700;background:var(--blue-500);color:#fff;padding:1px 6px;border-radius:9999px;letter-spacing:.03em}
.header__desc{font-size:.75rem;color:var(--slate-400)}

/* Upload Screen */
.screen{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 45px);padding:1.5rem}
.upload-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-xl);padding:2rem;width:100%;max-width:420px;box-shadow:0 4px 6px -1px rgba(0,0,0,.05),0 10px 15px -3px rgba(0,0,0,.05)}
.upload-card__header{margin-bottom:1.5rem}
.upload-card__header h2{font-size:1.125rem;font-weight:700;color:var(--slate-900);margin-bottom:.25rem}
.upload-card__header p{font-size:.8125rem;color:var(--slate-500)}

/* Dropzone — like tools.promecad.com FileDropZone */
.dropzone{border:2px dashed var(--slate-300);border-radius:var(--radius-xl);padding:2rem;text-align:center;cursor:pointer;transition:all .2s;background:#fff;margin-bottom:1rem}
.dropzone:hover,.dropzone.dragover{border-color:var(--blue-400);background:var(--blue-50);transform:scale(1.01)}
.dropzone.has-file{border-color:var(--green-600);border-style:solid;background:#f0fdf4}
.dropzone__content{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.dropzone__icon{width:28px;height:28px;color:var(--slate-400)}
.dropzone:hover .dropzone__icon{color:var(--blue-500)}
.dropzone__text{font-size:.8125rem;color:var(--slate-600)}
.dropzone__text strong{color:var(--blue-600);font-weight:600}
.dropzone__hint{font-size:.6875rem;color:var(--slate-400)}
.dropzone__file{display:flex;align-items:center;gap:.5rem;justify-content:center}
.dropzone__file svg{width:20px;height:20px;color:var(--green-600)}
.dropzone__file span{font-size:.8125rem;font-weight:600;color:var(--slate-800)}
.dropzone__clear{background:none;border:none;font-size:1.125rem;color:var(--slate-400);cursor:pointer;padding:0 .25rem;line-height:1}
.dropzone__clear:hover{color:var(--red-500)}

/* Field */
.field{display:flex;flex-direction:column;gap:.25rem;margin-bottom:1rem}
.field label{font-size:.6875rem;font-weight:600;color:var(--slate-500);text-transform:uppercase;letter-spacing:.04em}
.field input{padding:.5rem .75rem;border:1px solid var(--slate-200);border-radius:var(--radius);font-size:.875rem;color:var(--slate-800);transition:all .15s}
.field input:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.field input::placeholder{color:var(--slate-400)}

/* Primary button — blue like tools */
.btn-primary{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.875rem;font-weight:600;background:var(--blue-600);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;transition:all .15s}
.btn-primary:hover{background:var(--blue-700);box-shadow:0 1px 3px rgba(37,99,235,.3)}
.btn-primary:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}
.btn-primary svg{width:16px;height:16px}

.btn-ghost{display:flex;align-items:center;gap:.375rem;padding:.4375rem .875rem;font-size:.8125rem;font-weight:500;background:transparent;color:var(--slate-600);border:1px solid var(--slate-200);border-radius:var(--radius);cursor:pointer;transition:all .15s}
.btn-ghost:hover{background:var(--slate-50);color:var(--slate-800)}
.btn-ghost svg{width:14px;height:14px}

/* Progress */
.progress-section{margin-top:1rem}
.progress-track{height:3px;background:var(--slate-200);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;width:0;background:var(--blue-500);border-radius:2px;transition:width .4s ease}
.progress-text{margin-top:.375rem;font-size:.75rem;color:var(--slate-500);text-align:center}

/* Editor */
.editor{display:flex;flex-direction:column;height:calc(100vh - 45px)}
.editor__toolbar{display:flex;align-items:center;justify-content:space-between;padding:.375rem .75rem;background:#fff;border-bottom:1px solid var(--slate-200)}
.toolbar__tools{display:flex;align-items:center;gap:2px}
.toolbar__sep{width:1px;height:20px;background:var(--slate-200);margin:0 .375rem}
.toolbar__actions{display:flex;gap:.5rem}
.toolbar__actions .btn-primary{width:auto;padding:.4375rem 1rem;font-size:.8125rem}

.tool-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--radius);background:transparent;cursor:pointer;transition:all .1s;color:var(--slate-500)}
.tool-btn svg{width:16px;height:16px}
.tool-btn:hover{background:var(--slate-100);color:var(--slate-700)}
.tool-btn.active{background:var(--blue-50);color:var(--blue-600)}

.editor__body{display:flex;flex:1;overflow:hidden}
.editor__canvas-wrap{flex:1;overflow:auto;background:var(--slate-100);position:relative}
#cad-canvas{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.04);display:block;margin:20px auto;border-radius:2px}

/* Sidebar */
.editor__sidebar{width:220px;background:#fff;border-left:1px solid var(--slate-200);overflow-y:auto;flex-shrink:0}
.panel{padding:.75rem;border-bottom:1px solid var(--slate-100)}
.panel__title{font-size:.625rem;text-transform:uppercase;letter-spacing:.08em;color:var(--slate-400);font-weight:700;margin-bottom:.5rem}
.panel__row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.375rem}
.panel__row label{font-size:.75rem;color:var(--slate-500);font-weight:500}
.input-unit{display:flex;align-items:center;gap:.25rem}
.input-unit input{width:70px;padding:.25rem .375rem;border:1px solid var(--slate-200);border-radius:4px;font-size:.75rem;text-align:right;font-variant-numeric:tabular-nums}
.input-unit input:focus{outline:none;border-color:var(--blue-400)}
.input-unit span{font-size:.625rem;color:var(--slate-400);min-width:18px}

.stat-row{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;font-size:.8125rem;color:var(--slate-600)}
.stat-val{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;font-size:.9375rem}
.stat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.stat-dot--red{background:var(--red-500)}
.stat-dot--green{background:var(--green-500)}
.stat-dot--yellow{background:var(--yellow-500)}

/* SVG */
.svg-button{fill:none;stroke:var(--red-500);stroke-width:1;cursor:move}
.svg-button:hover,.svg-button.selected{stroke-width:2;filter:drop-shadow(0 0 2px rgba(239,68,68,.35))}
.svg-camera{fill:none;stroke:var(--green-500);stroke-width:1;cursor:move}
.svg-audio{fill:none;stroke:var(--cyan-500);stroke-width:1;cursor:move}
.svg-anchor{fill:none;stroke:var(--yellow-500);stroke-width:1;cursor:move}
.svg-anchor:hover,.svg-anchor.selected{stroke-width:2;filter:drop-shadow(0 0 2px rgba(234,179,8,.35))}
.svg-perimeter{fill:none;stroke:var(--slate-800);stroke-width:.75}
.svg-dim{fill:none;stroke:var(--slate-300);stroke-width:.3}
.svg-dim-text{font-size:2.5px;fill:var(--slate-400);font-family:var(--font)}
.svg-center{fill:var(--blue-400)}

/* Toast */
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:var(--slate-800);color:#fff;padding:.5rem 1.25rem;border-radius:var(--radius);font-size:.8125rem;font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:1000;transition:opacity .3s}
.toast.hidden{opacity:0}

@media(max-width:640px){
  .editor__sidebar{display:none}
  .header__desc{display:none}
}
.svg-chapita{fill:none;stroke:#8b5cf6;stroke-width:.8;cursor:move}
.svg-camera-block{fill:none;stroke:var(--green-500);stroke-width:.4;stroke-dasharray:2,2;opacity:.5}