:root{--azul:#4c97d3;--verde:#1aa84f;--negro:#222;--bg:#f4f1ea;}
*{box-sizing:border-box;}
body{margin:0;font-family:'Segoe UI',Arial,sans-serif;background:#e9e6df;color:#222;}
header{background:#1f2630;color:#fff;padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
header h1{font-size:16px;margin:0;font-weight:600;}
header .sub{font-size:12px;color:#9fb2c4;}
#dbstate{font-size:11px;padding:2px 8px;border-radius:10px;background:#39434f;color:#9fb2c4;}
#dbstate.ok{background:#1d5a32;color:#bff0cd;}
.tabs{display:flex;gap:6px;margin-left:auto;}
.tabs button{background:#39434f;color:#cfd8e2;border:none;padding:8px 13px;border-radius:6px;cursor:pointer;font-size:13px;}
.tabs button.active{background:#4c97d3;color:#fff;}
.wrap{display:flex;height:calc(100vh - 52px);}
.panel{width:272px;background:#fff;border-right:1px solid #ddd;padding:14px;overflow-y:auto;}
.panel h2{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:#666;margin:16px 0 8px;}
.panel h2:first-child{margin-top:0;}
.tool{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #e2e2e2;border-radius:8px;margin-bottom:7px;cursor:pointer;font-size:13px;background:#fafafa;}
.tool:hover{background:#f0f0f0;}
.tool.active{border-color:#4c97d3;box-shadow:0 0 0 2px rgba(76,151,211,.25);background:#eef6fd;}
.swatch{width:18px;height:18px;border-radius:4px;flex:0 0 auto;border:2px solid rgba(0,0,0,.25);}
.sw-azul{background:var(--azul);}.sw-verde{background:var(--verde);}.sw-negro{background:var(--negro);}
.sw-cam{background:#fff;border:2px solid #15558c;display:flex;align-items:center;justify-content:center;font-size:10px;}
.sw-col{background:#888;}.sw-cctv{background:#b8002e;}.sw-door{background:linear-gradient(135deg,#a0522d 40%,#d2a679 40%,#d2a679 60%,#a0522d 60%);border:2px solid #6b3a1f;}
.sw-sel{background:repeating-linear-gradient(45deg,#ccc,#ccc 3px,#fff 3px,#fff 6px);}
.hint{font-size:11px;color:#888;line-height:1.5;margin:6px 0;}
.btn{display:block;width:100%;padding:8px;border:none;border-radius:7px;background:#4c97d3;color:#fff;font-size:13px;cursor:pointer;margin-bottom:7px;}
.btn.gray{background:#5a6470;}.btn.red{background:#c0473b;}
.stage{flex:1;position:relative;overflow:hidden;background:#e9e6df;}
canvas{display:block;}
#c2d{background:var(--bg);cursor:crosshair;}
.legend{position:absolute;bottom:12px;left:12px;background:rgba(255,255,255,.92);border-radius:8px;padding:8px 12px;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.legend div{display:flex;align-items:center;gap:8px;margin:3px 0;}
.legend .swatch{width:13px;height:13px;}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:7px 0;font-size:13px;}
.row input[type=number]{width:78px;padding:4px;border:1px solid #ccc;border-radius:5px;}
.row select{padding:4px;border:1px solid #ccc;border-radius:5px;font-size:13px;max-width:150px;}
.val{font-variant-numeric:tabular-nums;color:#15558c;font-weight:600;min-width:48px;text-align:right;}
#view3d,#viewbod{width:100%;height:100%;display:none;}
.hidden{display:none !important;}
.topinfo{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.9);padding:5px 12px;border-radius:20px;font-size:12px;box-shadow:0 1px 4px rgba(0,0,0,.15);}
.kbd{background:#eee;border:1px solid #ccc;border-radius:4px;padding:1px 5px;font-size:11px;}
.sep-item{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:12px;}
.sep-item label{width:62px;color:#555;}
.sep-item input[type=number]{flex:1;width:60px;}
.block{border:1px solid #e4e4e4;border-radius:8px;padding:8px;margin-bottom:8px;background:#fafafa;}
.block .bname{font-size:12px;font-weight:600;color:#15558c;margin-bottom:4px;}
.block .grid4{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
.block label{font-size:11px;color:#666;display:flex;flex-direction:column;gap:2px;}
.block input{width:100%;padding:3px;border:1px solid #ccc;border-radius:4px;font-size:12px;}
table.cbl{width:100%;border-collapse:collapse;font-size:12px;}
table.cbl td{padding:3px 4px;border-bottom:1px solid #eee;}
table.cbl td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:#15558c;}
.tot{font-weight:700;color:#b8002e;}