:root{ --primary:#0f62fe; --dark:#161616; --panel:#ffffff; --border:#e0e0e0; --bg:#e0e0e0; --paper:#ffffff; --snap:#ff0000; --handle-txt:#fbbf24; }
*{box-sizing:border-box; user-select:none;}
input, textarea { user-select:text; font-family:'Inter',sans-serif; }

body{ margin:0; font-family:'Inter',sans-serif; background:var(--bg); display:flex; height:100vh; overflow:hidden; color:var(--dark); }

/* LAYOUT */
.app { display:flex; width:100%; height:100%; }
.sidebar { width:320px; background:var(--panel); border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:20; box-shadow:4px 0 10px rgba(0,0,0,0.05); }
.header { padding:16px; border-bottom:1px solid var(--border); background:#fff; }
.brand { font-weight:800; color:var(--primary); font-size:14px; margin-bottom:12px; display:block; letter-spacing:0.5px; }

.up-box { background:#f8f9fa; padding:10px; border-radius:6px; border:1px dashed #ccc; display:flex; gap:5px; }
.cat-sel { flex:1; font-size:10px; padding:4px; border:1px solid #ddd; border-radius:4px; }
.btn-up { font-size:10px; font-weight:700; cursor:pointer; text-align:center; color:#0f62fe; padding:4px 8px; border:1px solid #e0e0e0; background:#fff; border-radius:4px; white-space:nowrap; }
.btn-up:hover { background:#e5f0ff; border-color:#0f62fe; }
input[type=file] { display:none; }

/* LIB */
.search-box { width:100%; padding:6px; border:1px solid #ccc; border-radius:4px; font-size:12px; margin-bottom:8px; }
.lib-scroll { flex:1; overflow-y:auto; padding:15px; }
.lib-head { font-size:10px; font-weight:700; color:#888; text-transform:uppercase; margin:20px 0 8px 0; letter-spacing:0.5px; }
.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.card { 
  border:1px solid #eee; border-radius:6px; padding:8px 4px; cursor:grab; 
  display:flex; flex-direction:column; align-items:center; background:#fff; transition:all 0.1s ease;
  min-height:75px; touch-action:none; position:relative; justify-content:center;
}
.card:hover { border-color:var(--primary); box-shadow:0 4px 12px rgba(0,0,0,0.08); transform:translateY(-2px); z-index:2; }
.card:active { cursor:grabbing; transform:scale(0.98); border-color:#999; }
.card svg, .card img { width:32px; height:32px; pointer-events:none; object-fit:contain; margin-bottom:6px; }
.card span { 
  font-size:9px; font-weight:500; color:#444; text-align:center; line-height:1.2; width:100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal;
}

/* WORKSPACE */
.main { flex:1; position:relative; display:flex; flex-direction:column; background:var(--bg); overflow:hidden; }
.toolbar { height:50px; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 10px; gap:6px; z-index:10; }
.btn { padding:6px 10px; border:1px solid #ccc; background:#fff; border-radius:4px; font-size:11px; font-weight:600; cursor:pointer; color:#333; display:flex; gap:4px; align-items:center; transition:0.2s; white-space:nowrap; }
.btn:hover { background:#f3f3f3; border-color:#bbb; }
.btn-p { background:var(--primary); color:#fff; border:1px solid var(--primary); } .btn-p:hover{ background:#0043ce; border-color:#0043ce; }
.sep { width:1px; height:20px; background:#e0e0e0; margin:0 2px; }

#cad { width:100%; height:100%; cursor:default; touch-action:none; }
#cad * { pointer-events: all; }
.snap-line, .lbl-tag { pointer-events: none !important; }
.card { position: relative; }

.del-asset-btn {
  position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; background: red; color: white; border-radius: 50%;
  text-align: center; line-height: 16px; font-size: 12px; font-weight: bold; cursor: pointer; display: none; border: 1px solid #fff; z-index: 10;
}
.card:hover .del-asset-btn { display: block; }
.btn-up { cursor: pointer; }

/* PANELS */
.panel { position:absolute; top:65px; right:20px; width:240px; background:rgba(255,255,255,0.96); border:1px solid #ddd; border-radius:6px; padding:15px; box-shadow:0 8px 24px rgba(0,0,0,0.12); display:none; backdrop-filter:blur(5px); }
.p-row { margin-bottom:10px; }
.p-lbl { font-size:10px; font-weight:600; color:#666; display:flex; justify-content:space-between; margin-bottom:4px; }
.p-inp { width:100%; border:1px solid #ccc; padding:6px; font-size:11px; border-radius:4px; }
.p-txt { width:100%; border:1px solid #ccc; padding:6px; font-size:11px; border-radius:4px; min-height:60px; resize:vertical; }
.p-rng { width:100%; height:4px; accent-color:var(--primary); cursor:pointer; }
.p-clr { width:100%; height:25px; cursor:pointer; border:none; padding:0; }

.bom { position:absolute; top:65px; left:20px; width:260px; max-height:400px; background:#fff; border:1px solid #ddd; border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,0.12); display:none; flex-direction:column; }
.bom-h { background:#f9f9f9; padding:10px; font-size:11px; font-weight:700; border-bottom:1px solid #eee; display:flex; justify-content:space-between; border-radius:6px 6px 0 0; }
.bom-b { overflow-y:auto; padding:0; }
.bom-r { display:grid; grid-template-columns: 1fr 40px; font-size:11px; padding:8px 12px; border-bottom:1px solid #f0f0f0; color:#333; }

.tblock { position:absolute; bottom:20px; right:20px; width:320px; background:#fff; border:2px solid #000; display:grid; grid-template-columns: 70px 1fr; pointer-events:auto; }
.tb-l { background:#000; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; padding:5px; }
.tb-c { display:flex; flex-direction:column; }
.tb-r { display:flex; border-bottom:1px solid #000; } .tb-r:last-child { border:none; }
.tb-f { flex:1; padding:2px 5px; border-right:1px solid #000; } .tb-f:last-child { border:none; }
.tb-t { font-size:8px; color:#666; text-transform:uppercase; display:block; margin-bottom:1px; }
.tb-v { width:100%; border:none; font-size:10px; font-weight:600; color:#000; outline:none; background:transparent; padding:0; }

/* UI */
.ui-sel { fill:none; stroke:var(--primary); stroke-width:1; vector-effect:non-scaling-stroke; pointer-events:none; }
.ui-h { fill:#fff; stroke:var(--primary); stroke-width:1.5; vector-effect:non-scaling-stroke; cursor:nwse-resize; pointer-events:all; }
.ui-h:hover { fill:var(--primary); }
.ui-lbl { fill:var(--handle-txt); stroke:#fff; stroke-width:1.5; vector-effect:non-scaling-stroke; cursor:move; pointer-events:all; }
    
.snap-line { stroke:var(--snap); stroke-width:1; stroke-dasharray:4; vector-effect:non-scaling-stroke; display:none; pointer-events:none; }
body.pan-mode { cursor: grab; } body.pan-mode:active { cursor: grabbing; }

@media print {
  .sidebar, .toolbar, .panel, .bom { display:none !important; }
  .app, .main, #cad { width:100%; height:100%; background:#fff; }
  .tblock { bottom:0; right:0; }
  @page { margin:0; size: landscape; }
}