/* ═══ 弱电点位布局生成器 样式 ═══ */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --primary:#1e3a5f; --primary-dark:#152a45; --primary-light:#2d4a6f;
  --primary-gradient:linear-gradient(135deg,#152a45,#1e3a5f);
  --primary-bg:#e8f0f8; --primary-hover:#d1e0f0;
  --green:#2e7d32; --red:#c0392b; --orange:#e67e22;
  --gray:#f5f7fa; --border:#dde4f0;
  --brown:#1e3a5f; --brown2:#2d4a6f; --brown3:#e8f0f8;
}
body{font-family:"微软雅黑",Arial,sans-serif;background:#eef2f8;color:#222;height:100vh;display:flex;flex-direction:column;overflow:hidden;}

/* ═══ 顶栏 ═══ */
.topbar{background:linear-gradient(135deg,#152a45,#2d4a6f);color:#fff;padding:0 24px;height:48px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 3px 12px rgba(0,0,0,.2);flex-shrink:0;z-index:100;}
.topbar .topbar-left{display:flex;align-items:center;gap:12px;}
.topbar .topbar-logo{display:flex;align-items:center;gap:8px;}
.topbar .topbar-logo-icon{font-size:22px;}
.topbar .topbar-logo-text{font-size:16px;font-weight:800;letter-spacing:.5px;}
.topbar .topbar-logo-sub{font-size:10px;opacity:.75;margin-top:1px;}
.topbar .topbar-divider{width:1px;height:26px;background:rgba(255,255,255,.3);margin:0 4px;}
.topbar .page-title{font-size:14px;font-weight:700;opacity:.92;}
.topbar .topbar-right{display:flex;align-items:center;gap:6px;}
.tb-btn{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit;white-space:nowrap;}
.tb-btn:hover{background:rgba(255,255,255,.25);transform:translateY(-1px);}
.tb-btn-share{background:rgba(46,125,50,.5);border-color:rgba(46,125,50,.6);}

/* ═══ 工单信息区 ═══ */
.info-panel{background:#fff;border-bottom:1px solid var(--border);}
.info-panel-hd{background:linear-gradient(90deg,#1e3a5f,#152a45);color:#fff;padding:6px 16px;font-weight:700;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:nowrap;}
.info-panel-hd>span{flex-shrink:0;}
.info-panel-actions{display:flex;gap:3px;flex-wrap:nowrap;overflow:hidden;}
.ip-btn{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:4px 7px;font-size:10px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s;white-space:nowrap;flex-shrink:0;}
.ip-btn:hover{background:rgba(255,255,255,.3);}
.ip-btn-share{background:rgba(46,125,50,.5);border-color:rgba(46,125,50,.7);}
.ip-btn-danger{background:rgba(183,28,28,.4);border-color:rgba(183,28,28,.5);}
.info-panel-body{padding:8px 16px 10px;}
.info-row{display:flex;gap:10px;flex-wrap:wrap;}
.info-fg{display:flex;flex-direction:column;gap:3px;flex:1 1 160px;min-width:0;}
.info-fg-narrow{flex:0 0 140px;max-width:140px;}
.info-fg label{font-size:11px;color:#666;font-weight:600;}
.info-fg input,.info-fg select{padding:7px 10px;border:1.5px solid var(--border);border-radius:6px;font-size:12px;font-family:inherit;outline:none;transition:.2s;background:#fff;color:#111;}
.info-fg input:focus,.info-fg select:focus{border-color:#1e3a5f;box-shadow:0 0 0 2px rgba(30,58,95,.1);}
/* 客户下拉（对齐报价页面） */
.customer-dropdown{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1.5px solid #dde4f0;border-radius:9px;max-height:240px;overflow-y:auto;z-index:999;box-shadow:0 8px 28px rgba(0,0,0,.16);margin-top:2px;}
.customer-dropdown .cd-item{padding:10px 16px;cursor:pointer;border-bottom:1px solid #eee;transition:background .15s;}
.customer-dropdown .cd-item:hover{background:#f0f6ff;}
.customer-dropdown .cd-item .cd-name{font-size:13px;font-weight:600;color:#1a2e5a;}
.customer-dropdown .cd-item .cd-sub{font-size:11.5px;color:#888;margin-top:2px;}
.customer-dropdown .cd-nomatch{padding:14px 16px;color:#999;font-size:13px;}
.customer-dropdown .cd-addnew{padding:10px 16px;cursor:pointer;color:#0d9488;font-size:13px;font-weight:700;background:#f0fdfa;border-top:1px solid #eee;transition:background .15s;}
.customer-dropdown .cd-addnew:hover{background:#e6f7f5;}

/* ═══ 主布局 ═══ */
.main-layout{display:flex;flex:1;overflow:hidden;}

/* ═══ 左栏 ═══ */
.left-panel{width:235px;min-width:235px;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;}
.panel-hd{background:var(--brown);color:#fff;padding:7px 10px;font-weight:700;font-size:11px;display:flex;align-items:center;gap:5px;flex-shrink:0;}
.device-list{flex:1;overflow-y:auto;padding:3px 0;min-height:0;}
.device-group{margin-bottom:1px;}
.device-group-hd{display:flex;justify-content:space-between;align-items:center;padding:5px 10px;font-size:10px;font-weight:700;color:var(--brown);cursor:pointer;user-select:none;background:#f0f4ff;border-bottom:1px solid var(--border);}
.device-group-hd:hover{background:#e8f0f8;}
.device-group-hd .group-arrow{font-size:8px;transition:transform .2s;}
.device-group-hd.collapsed .group-arrow{transform:rotate(-90deg);}
.device-group-hd.collapsed+.device-group-body{display:none;}
.device-group-body{padding:2px 5px;}
.device-item{display:flex;align-items:center;gap:5px;padding:4px 6px;border-radius:4px;cursor:grab;font-size:10px;color:#333;transition:.15s;border:1px solid transparent;}
.device-item:hover{background:var(--primary-bg);border-color:var(--brown2);}
.device-item:active{cursor:grabbing;opacity:.7;}
.device-item .di-icon{font-size:13px;width:16px;text-align:center;flex-shrink:0;}
.device-item .di-name{font-weight:600;}
/* 绘图工具 */
.tool-section{border-top:1px solid var(--border);flex-shrink:0;}
.tool-list{display:flex;flex-wrap:wrap;gap:2px;padding:5px 6px;}
.tool-btn{padding:5px 8px;border:1px solid rgba(30,58,95,.15);border-radius:18px;background:rgba(255,255,255,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#444;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.tool-btn:hover{border-color:rgba(30,58,95,.4);color:#1e3a5f;box-shadow:0 2px 8px rgba(30,58,95,.15);transform:translateY(-1px);}
.tool-btn.active{background:linear-gradient(135deg,#1e3a5f,#2a5080);color:#fff;border-color:#1e3a5f;box-shadow:0 2px 10px rgba(30,58,95,.25);}

/* ═══ 中间 Canvas ═══ */
.canvas-area{flex:1;position:relative;overflow:hidden;background:#f0f2f5;}
#mainCanvas{display:block;width:100%;height:100%;cursor:crosshair;}
.canvas-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none;}
.canvas-placeholder.hidden{display:none;}
.cp-icon{font-size:56px;opacity:.3;}
.cp-title{font-size:16px;font-weight:700;color:#888;}
.cp-hint{font-size:12px;color:#aaa;max-width:320px;text-align:center;line-height:1.5;}
.cp-btn{pointer-events:auto;background:var(--brown);color:#fff;border:none;border-radius:8px;padding:10px 24px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s;}
.cp-btn:hover{background:var(--brown2);transform:translateY(-1px);}

/* ═══ 右栏 ═══ */
.right-panel{width:260px;min-width:260px;background:#fff;border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;}
.right-body{flex:1;overflow-y:auto;padding:0;}
.no-selection{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 16px;gap:6px;color:#bbb;}
.no-selection .ns-icon{font-size:28px;}
.no-selection p{font-size:11px;}

/* 属性编辑 */
.prop-form{padding:8px 10px;}
.prop-section{margin-bottom:6px;border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.prop-section-hd{background:var(--primary-bg);color:var(--brown);padding:5px 10px;font-size:11px;font-weight:700;}
.prop-row{display:flex;align-items:center;gap:4px;padding:4px 8px;border-bottom:1px solid #f5f5f5;font-size:11px;}
.prop-row:last-child{border-bottom:none;}
.prop-row label{width:60px;flex-shrink:0;color:#666;font-weight:600;}
.prop-row input,.prop-row select{flex:1;padding:4px 6px;border:1px solid var(--border);border-radius:3px;font-size:10px;font-family:inherit;outline:none;min-width:0;}
.prop-row input:focus,.prop-row select:focus{border-color:var(--brown2);}
.prop-row input[type="range"]{border:none;padding:0;flex:1;}
.range-val{font-size:10px;color:var(--brown);font-weight:700;min-width:28px;text-align:right;}
.prop-val-hl{font-weight:800;color:var(--brown);font-size:12px;}

.prop-actions{padding:6px 0;}
.prop-btn{padding:5px 10px;border:none;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s;}
.prop-btn-del{background:#ffeaea;color:#c0392b;border:1px solid #ffcccb;}
.prop-btn-del:hover{background:#c0392b;color:#fff;}
.prop-btn-sm{background:var(--brown3);color:var(--brown);border:1px solid var(--border);}
.prop-btn-sm:hover{background:var(--brown2);color:#fff;}

/* 比例尺区块 */
.prop-scale-section{margin:0 10px 6px;border:1px solid var(--border);border-radius:6px;overflow:hidden;}

/* 统计区块 */
.stats-content{padding:4px 8px;}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:11px;border-bottom:1px solid #f5f5f5;}
.stat-row:last-child{border-bottom:none;}
.stat-row b{color:var(--brown);font-size:12px;}
.stat-total{font-weight:800;border-top:1px solid var(--border);padding-top:4px;margin-top:3px;}
.stat-total b{font-size:13px;color:var(--red);}

/* ═══ 底栏 ═══ */
.statusbar{height:32px;background:#fff;border-top:1px solid var(--border);display:flex;align-items:center;gap:20px;padding:0 24px;font-size:11px;color:#888;flex-shrink:0;z-index:50;}
.statusbar span{display:inline-flex;align-items:center;gap:4px;}

/* ═══ Toast ═══ */
.toast-container{position:fixed;top:80px;right:20px;z-index:99999;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.toast{pointer-events:auto;padding:12px 20px;border-radius:10px;font-size:13px;font-weight:600;color:#fff;box-shadow:0 4px 20px rgba(0,0,0,.2);animation:toastIn .3s ease-out;max-width:360px;}
.toast.ok{background:#27ae60;}.toast.warn{background:#e67e22;}.toast.error{background:#e74c3c;}.toast.info{background:var(--brown2);}
@keyframes toastIn{from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:translateX(0);}}

/* ═══ 标定比例提示 ═══ */
.scale-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(30,58,95,.92);color:#fff;padding:16px 28px;border-radius:12px;font-size:14px;font-weight:700;z-index:200;pointer-events:none;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.3);}
.scale-hint .sh-sub{font-size:11px;font-weight:400;opacity:.8;margin-top:6px;}

/* ═══ 测距标签 ═══ */
.measure-label{position:absolute;background:rgba(30,58,95,.88);color:#fff;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:700;pointer-events:none;z-index:100;white-space:nowrap;}

/* ═══ 楼层标签栏 ═══ */
.floor-tabs{position:absolute;top:0;left:0;right:0;z-index:50;display:flex;gap:2px;padding:4px 6px;background:rgba(30,58,95,.85);overflow-x:auto;overflow-y:hidden;white-space:nowrap;}
.ftab{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:4px 4px 0 0;background:rgba(255,255,255,.15);color:rgba(255,255,255,.75);font-size:10px;cursor:pointer;transition:.15s;flex-shrink:0;}
.ftab:hover{background:rgba(255,255,255,.25);color:#fff;}
.ftab.active{background:#fff;color:var(--primary);font-weight:700;}
.ftab-add{padding:3px 8px;font-size:14px;font-weight:700;border-radius:4px;}
.ftab-del{font-style:normal;font-size:12px;opacity:.6;margin-left:2px;line-height:1;padding:0 2px;border-radius:50%;}
.ftab-del:hover{opacity:1;color:var(--red);background:rgba(255,255,255,.8);}
/* ═══ 打印 ═══ */
@media print{
  .topbar,.left-panel,.right-panel,.statusbar,.info-panel,.no-print,.floor-tabs{display:none!important;}
  body{display:block!important;overflow:visible!important;height:auto!important;background:#fff!important;}
  .canvas-area{position:static!important;width:100%!important;height:auto!important;}
  #mainCanvas{width:100%!important;height:auto!important;}
}

/* ═══ 显示控制面板 ═══ */
.vis-section{margin-top:4px;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:#fff;}
.vis-section .prop-section-hd{cursor:pointer;user-select:none;padding:5px 10px;font-size:11px;}
.vis-group{display:grid;grid-template-columns:1fr 1fr;gap:1px 4px;padding:3px 6px;}
.vis-item{display:flex;align-items:center;gap:4px;padding:1px 0;cursor:pointer;font-size:10px;color:#555;font-weight:400;transition:color .15s;white-space:nowrap;overflow:hidden;}
.vis-item:hover{color:var(--primary);}
.vis-item input[type="checkbox"]{width:12px;height:12px;accent-color:var(--primary);cursor:pointer;flex-shrink:0;margin:0;}
.vis-subtitle{font-size:10px;font-weight:700;color:var(--primary);padding:3px 6px 1px;background:#f8fafc;grid-column:1/-1;}
.vis-divider{height:1px;background:var(--border);margin:0;grid-column:1/-1;}
.vis-sub-group{padding-left:2px;background:#fafbfc;}
.vis-sub{font-size:10px;color:#666;}

/* ═══ Modal通用 ═══ */
.modal-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.45);z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s;}
.modal-mask.hidden{display:none;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{background:#fff;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.2);max-width:560px;width:90%;max-height:80vh;overflow-y:auto;animation:slideUp .2s;}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
.modal-header h3{margin:0;font-size:16px;color:var(--primary);}
.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:#999;padding:0 4px;line-height:1;}
.modal-close:hover{color:var(--red);}
.modal-body{padding:16px 20px;}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--border);}
.modal-footer .mbtn{padding:8px 20px;border:none;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;transition:background .15s;}
.mbtn-primary{background:var(--primary);color:#fff;}
.mbtn-primary:hover{background:var(--primary-dark);}
.mbtn-cancel{background:#f0f0f0;color:#555;}
.mbtn-cancel:hover{background:#e0e0e0;}
.mbtn-danger{background:var(--red);color:#fff;}
.mbtn-danger:hover{background:#a93226;}

/* ═══ 导出Modal ═══ */
.export-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.export-col-title{font-size:13px;font-weight:600;color:var(--primary);margin-bottom:8px;}
.export-col label{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:12px;cursor:pointer;color:#555;}
.export-col label input{accent-color:var(--primary);}
.export-presets{display:flex;flex-wrap:wrap;gap:6px;}
.export-presets .epbtn{padding:5px 12px;border:1px solid var(--border);border-radius:6px;background:#fff;cursor:pointer;font-size:11px;color:#555;transition:all .15s;}
.export-presets .epbtn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-bg);}

/* ═══ 方案列表Modal ═══ */
.scheme-search{display:flex;gap:8px;margin-bottom:12px;}
.scheme-search input{flex:1;padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:13px;outline:none;}
.scheme-search input:focus{border-color:var(--primary);}
.scheme-table{width:100%;border-collapse:collapse;font-size:12px;}
.scheme-table th{background:var(--primary-bg);color:var(--primary);font-weight:600;padding:8px 6px;text-align:left;border-bottom:2px solid var(--border);}
.scheme-table td{padding:7px 6px;border-bottom:1px solid #eee;vertical-align:middle;}
.scheme-table tr:hover td{background:var(--primary-bg);}
.scheme-table .scheme-actions{display:flex;gap:4px;}
.scheme-table .scheme-actions button{padding:3px 8px;border:1px solid var(--border);border-radius:4px;background:#fff;cursor:pointer;font-size:11px;color:#555;white-space:nowrap;}
.scheme-table .scheme-actions button:hover{border-color:var(--primary);color:var(--primary);}
.scheme-table .scheme-actions .sa-del:hover{border-color:var(--red);color:var(--red);}
.scheme-empty{text-align:center;color:#999;padding:30px 0;font-size:13px;}
.scheme-pager{text-align:center;padding:8px 0;font-size:12px;color:#777;}

/* ═══ 工具栏底部按钮组 ═══ */
.toolbar-footer{border-top:1px solid var(--border);padding:5px 6px;display:flex;gap:3px;background:#f8fafc;flex-shrink:0;}
.toolbar-footer .tf-btn{flex:1;min-width:0;padding:5px 2px;border:1px solid var(--border);border-radius:4px;background:#fff;color:#555;font-size:9px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s;text-align:center;white-space:nowrap;}
.toolbar-footer .tf-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-bg);}

/* ═══ 响应式 ═══ */
@media(max-width:1100px){
  .left-panel{width:200px;min-width:200px;}
  .right-panel{width:240px;min-width:240px;}
}
@media(max-width:768px){
  .info-panel-body{padding:8px 12px;}
  .info-row{gap:6px;}
  .info-fg{flex:1 1 140px;}
  .info-fg-narrow{flex:0 0 120px;max-width:120px;}
  .left-panel{width:180px;min-width:180px;}
  .right-panel{display:none;}
  .topbar-right .tb-btn span{display:none;}
}