*{margin:0;padding:0;box-sizing:border-box}
    body{
      font-family: "Segoe UI","Microsoft JhengHei",system-ui,sans-serif;
      background: linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);
      min-height:100vh;color:#e0e0e0;overflow:hidden
    }
    .app-container{--leftW:520px;display:flex;height:100vh}
    .control-panel{
      width:560px;background:rgba(20,30,48,.95);
      border-right:1px solid rgba(100,150,255,.2);
      display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0
    }
    .panel-header{
      background:linear-gradient(90deg,#2563eb,#1d4ed8);
      padding:16px 20px;display:flex;align-items:center;gap:12px
    }
    .panel-header h1{font-size:15px;font-weight:700}
    .panel-section{padding:16px 20px;border-bottom:1px solid rgba(100,150,255,.1)}
    .section-title{
      font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#60a5fa;margin-bottom:12px
    }
    .input-group{margin-bottom:10px}
    .input-group label{display:block;font-size:12px;color:#94a3b8;margin-bottom:5px}
    .input-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
    input,textarea,select{
      width:100%;padding:8px 10px;background:rgba(30,41,59,.8);
      border:1px solid rgba(100,150,255,.2);border-radius:6px;color:#e0e0e0;font-size:13px
    }
    input:focus,textarea:focus,select:focus{outline:none;border-color:#3b82f6}
    textarea{min-height:140px;resize:vertical;font-family:Consolas,monospace;font-size:11px;line-height:1.4}
    .btn{
      padding:10px 16px;border:none;border-radius:6px;font-size:13px;font-weight:700;
      cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px;width:100%
    }
    .btn-primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}
    .btn-primary:hover{background:linear-gradient(135deg,#60a5fa,#3b82f6)}
    .btn-secondary{
      background:rgba(100,150,255,.1);color:#60a5fa;border:1px solid rgba(100,150,255,.3);margin-bottom:8px
    }

    .cargo-settings{margin-top:10px;max-height:230px;overflow-y:auto}
    .cargo-item{
      display:flex;justify-content:space-between;align-items:center;padding:8px;
      background:rgba(30,41,59,.5);border-radius:6px;margin-bottom:6px;font-size:12px
    }
    .cargo-item:hover{background:rgba(59,130,246,.15)}
    .cargo-info{display:flex;align-items:center;gap:8px;min-width:0}
    .cargo-color{width:12px;height:12px;border-radius:3px;flex:0 0 auto}
    .cargo-name{font-weight:600;color:#f1f5f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
    .cargo-qty{display:inline-block;background:rgba(59,130,246,.3);color:#60a5fa;padding:2px 6px;border-radius:3px;font-size:10px;font-weight:800;margin-left:6px}
    .cargo-size{font-size:10px;color:#64748b}
    .cargo-options{display:flex;gap:10px;align-items:center;flex:0 0 auto}
    .checkbox-wrap{display:flex;align-items:center;gap:4px}
    .checkbox-wrap input{width:14px;height:14px;accent-color:#3b82f6}
    .checkbox-wrap label{font-size:10px;color:#94a3b8}
    .select-all{display:flex;gap:16px;flex-wrap:wrap;padding:8px 10px;background:rgba(59,130,246,.1);border-radius:6px;margin-bottom:8px}
    .select-all label{color:#60a5fa;font-weight:600}
    .display-options{display:flex;flex-direction:column;gap:8px}
    .display-options .checkbox-wrap{padding:6px 10px;background:rgba(30,41,59,.5);border-radius:6px}
    .display-options .checkbox-wrap label{font-size:12px;color:#e0e0e0}

    .validation-box{margin-top:12px;padding:10px;border-radius:8px;font-size:11px;display:none}
    .validation-box.show{display:block}
    .validation-box.success{background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.4)}
    .validation-box.warning{background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.4)}
    .validation-box.error{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.4)}
    .validation-title{font-weight:800;margin-bottom:6px}
    .validation-box.success .validation-title{color:#34d399}
    .validation-box.warning .validation-title{color:#fbbf24}
    .validation-box.error .validation-title{color:#f87171}
    .validation-list{list-style:none;padding:0}
    .validation-list li{padding:3px 0;color:#cbd5e1}

    .main-view{flex:1;display:flex;flex-direction:column;min-width:0}
    .dashboard{
      background:rgba(20,30,48,.9);border-bottom:1px solid rgba(100,150,255,.2);
      padding:12px 20px;display:flex;align-items:center;gap:24px;flex-wrap:wrap
    }
    .metric{display:flex;align-items:center;gap:10px}
    .metric-icon{
      width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px
    }
    .metric-icon.blue{background:linear-gradient(135deg,#3b82f6,#2563eb)}
    .metric-icon.green{background:linear-gradient(135deg,#10b981,#059669)}
    .metric-icon.orange{background:linear-gradient(135deg,#f59e0b,#d97706)}
    .metric-icon.purple{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
    .metric-icon.cyan{background:linear-gradient(135deg,#06b6d4,#0891b2)}
    .metric-content{display:flex;flex-direction:column}
    .metric-label{font-size:10px;color:#94a3b8;text-transform:uppercase}
    .metric-value{font-size:18px;font-weight:900;color:#f1f5f9}
    .metric-unit{font-size:11px;color:#64748b}

    .alert-banner{
      background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.4);
      border-radius:8px;padding:10px 14px;margin:12px 16px;display:none;font-size:12px;color:#fbbf24
    }
    .alert-banner.show{display:block}

    .viewer-container{flex:1;position:relative;background:radial-gradient(ellipse at center,#1e293b 0%,#0f172a 100%)}
    #threejs-canvas{width:100%;height:100%;display:block}
    .view-buttons{
      position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
      display:flex;gap:8px;background:rgba(20,30,48,.9);padding:8px 12px;border-radius:10px;border:1px solid rgba(100,150,255,.2)
    }
    .view-btn{
      padding:6px 14px;background:rgba(100,150,255,.1);border:1px solid rgba(100,150,255,.2);
      border-radius:6px;color:#94a3b8;font-size:11px;cursor:pointer
    }
    .view-btn:hover,.view-btn.active{background:rgba(59,130,246,.3);color:#60a5fa;border-color:#3b82f6}

    .legend-box{
      position:absolute;top:16px;left:16px;background:rgba(20,30,48,.9);
      padding:10px 12px;border-radius:8px;border:1px solid rgba(100,150,255,.2);font-size:11px
    }
    .legend-title{color:#60a5fa;font-weight:800;margin-bottom:6px}
    .legend-item{display:flex;align-items:center;gap:6px;margin-bottom:3px;color:#94a3b8}
    .legend-color{width:10px;height:10px;border-radius:2px}
    .tooltip{
      position:absolute;background:rgba(15,23,42,.95);border:1px solid rgba(100,150,255,.3);
      border-radius:8px;padding:10px 12px;font-size:12px;pointer-events:none;z-index:1000;display:none;max-width:280px
    }
    .tooltip-title{font-weight:800;color:#f1f5f9;margin-bottom:4px}
    .tooltip-info{color:#cbd5e1;font-size:11px;line-height:1.5;white-space:pre-line}

    .loading-overlay{
      position:absolute;inset:0;background:rgba(15,23,42,.9);display:flex;align-items:center;justify-content:center;
      z-index:100;opacity:0;pointer-events:none;transition:opacity .3s
    }
    .loading-overlay.active{opacity:1;pointer-events:auto}
    .spinner{width:40px;height:40px;border:3px solid rgba(100,150,255,.2);border-top-color:#3b82f6;border-radius:50%;animation:spin 1s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}

    ::-webkit-scrollbar{width:5px}
    ::-webkit-scrollbar-track{background:rgba(30,41,59,.5)}
    ::-webkit-scrollbar-thumb{background:rgba(100,150,255,.3);border-radius:3px}
    .hint{font-size:11px;color:#94a3b8;line-height:1.6}
  
    .cargo-form-table{width:100%;border-collapse:separate;border-spacing:0 8px}
    .cargo-form-table th{font-size:10px;color:#94a3b8;text-transform:uppercase;letter-spacing:0.8px;text-align:left;padding:0 6px}
    .cargo-form-table td{padding:0 6px}
    .cargo-form-table input, .cargo-form-table select{padding:8px 8px;font-size:12px}
    .cargo-form-table .tiny{width:100%}
    .cargo-form-actions{display:flex;gap:8px;margin-top:10px}
    .btn-small{padding:8px 10px;font-size:12px;border-radius:6px}
    .btn-danger{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.4);color:#fecaca}
    .btn-danger:hover{background:rgba(239,68,68,.25)}
    .btn-outline{background:rgba(100,150,255,.08);border:1px solid rgba(100,150,255,.25);color:#93c5fd}
    .btn-outline:hover{background:rgba(59,130,246,.2);border-color:#3b82f6;color:#dbeafe}
    .color-input{width:42px;height:34px;padding:0;border-radius:6px;border:1px solid rgba(100,150,255,.2);background:transparent}
    .row-remove{white-space:nowrap}
    /* --- UX cải thiện cho form nhập hàng --- */
    .cargo-form-table{display:block;overflow-x:auto;border-spacing:0 10px}
    .cargo-form-table thead, .cargo-form-table tbody{display:table;width:100%;table-layout:fixed;min-width:720px}
    .cargo-form-table th{font-size:11px}
    .cargo-form-table input.tiny{height:38px;font-size:13px;padding:8px 10px}
    .cargo-form-table input.color-input{height:38px;width:52px}
    .cargo-form-actions{position:sticky;bottom:0;background:rgba(20,30,48,.95);padding-top:10px}


  
    select#containerPreset{width:100%;padding:10px 12px;border-radius:10px;
      border:1px solid rgba(100,150,255,.25);background:rgba(15,25,45,.8);color:#e5e7eb}
    select#containerPreset:focus{outline:none;border-color:rgba(59,130,246,.8);box-shadow:0 0 0 2px rgba(59,130,246,.15)}

  
    .validation-box{max-height:240px;overflow:hidden}
    .validation-list{max-height:190px;overflow:auto;padding-right:6px}
    .validation-list::-webkit-scrollbar{width:8px}
    .validation-list::-webkit-scrollbar-thumb{background:rgba(148,163,184,.35);border-radius:8px}

  
    .splitter{
      cursor: col-resize;
      background: linear-gradient(to bottom, rgba(59,130,246,.15), rgba(59,130,246,.05));
      border-left: 1px solid rgba(255,255,255,.06);
      border-right: 1px solid rgba(0,0,0,.35);
      position: relative;
    }
    .splitter:after{
      content:'';
      position:absolute;left:50%;top:50%;
      width:3px;height:46px;transform:translate(-50%,-50%);
      border-radius:3px;
      background: rgba(148,163,184,.45);
      box-shadow: 0 0 0 1px rgba(0,0,0,.25);
    }
    .right-panel{display:flex;flex-direction:column;min-width:0}

    .control-panel{flex:0 0 var(--leftW); width:var(--leftW);}
    .right-panel{flex:1 1 auto; min-width:0; display:flex; flex-direction:column;}
    .splitter{flex:0 0 10px; width:10px;}


  
/* Step-by-step compact bar */
.stepbar{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.stepbar-left{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:rgba(255,255,255,.85);
  user-select:none;
}
.stepbar-left input{ transform: translateY(1px); }
.stepbar-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  justify-content:center;
}
.stepbtn{
  width:34px;height:30px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:#fff;
  cursor:pointer;
}
.stepbtn:hover{ background:rgba(255,255,255,.09); }
.stepbtn:disabled{ opacity:.45; cursor:not-allowed; }
.stepspeed{
  display:flex;
  align-items:center;
  gap:8px;
  padding-left:8px;
  border-left:1px solid rgba(255,255,255,.08);
  margin-left:4px;
  font-size:12px;
  color:rgba(255,255,255,.75);
}
.stepspeed input[type="range"]{ width:140px; }
.stepbar-right{
  font-size:12px;
  color:rgba(255,255,255,.75);
  min-width:60px;
  text-align:right;
}

/* v21: Light theme */
:root{
  --bg:#0b1220;
  --panel:#0f1b33;
  --panel2:#101c35;
  --text:#e8eefc;
  --muted:#98a6c7;
  --border:rgba(255,255,255,0.10);
}
body.light{
  --bg:#f6f8fc;
  --panel:#ffffff;
  --panel2:#ffffff;
  --text:#0b1220;
  --muted:#44506b;
  --border:rgba(0,0,0,0.10);
}
body{ background: var(--bg) !important; color: var(--text) !important; }
.card, .panel, .leftPanel, .rightPanel{ background: var(--panel) !important; color: var(--text) !important; border-color: var(--border) !important; }
input, select, textarea{ background: rgba(127,127,127,0.08) !important; color: var(--text) !important; border-color: var(--border) !important; }
.helpText, .muted{ color: var(--muted) !important; }

/* Toggle switch */
.switch{ position:relative; display:inline-block; width:44px; height:24px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:rgba(127,127,127,0.35); transition:.2s; border-radius:24px; }
.slider:before{ position:absolute; content:""; height:18px; width:18px; left:3px; top:3px; background:white; transition:.2s; border-radius:50%; }
.switch input:checked + .slider{ background:#2563eb; }
.switch input:checked + .slider:before{ transform:translateX(20px); }
.toolbarRow{ display:flex; gap:10px; align-items:center; margin:10px 0 14px; flex-wrap:wrap; }
.toolbarLabel{ font-size:13px; color:var(--muted); }



/* ------------------------------
   Popup replacement for dropdowns
------------------------------ */
.hidden-select{
  position:absolute !important;
  left:-99999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.popup-btn{
  width:100%;
  text-align:left;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 10px;
  cursor:pointer;
}
.popup-btn:hover{ border-color: rgba(255,255,255,0.22); }
.popup-selected{
  margin-top:6px;
  font-size:12px;
  color: var(--muted);
}

/* Modal */
.modal-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 9999;
  padding: 16px;
}
.modal-overlay.show{ display:flex; }

.modal{
  width: min(720px, 96vw);
  max-height: min(78vh, 720px);
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  overflow:hidden;
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.modal-title{
  font-weight:700;
  color: var(--text);
}
.modal-close{
  width:36px;
  height:36px;
  border-radius:10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor:pointer;
  font-size:20px;
  line-height:1;
}
.modal-close:hover{ border-color: rgba(255,255,255,0.22); }
.modal-body{ padding: 12px 14px; }
.modal-search{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  outline:none;
}
.modal-search::placeholder{ color: rgba(255,255,255,0.55); }

.modal-list{
  margin-top: 10px;
  overflow:auto;
  max-height: calc(78vh - 140px);
  padding-right: 4px;
}
.modal-row{
  width:100%;
  text-align:left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  cursor:pointer;
  margin-bottom: 8px;
}
.modal-row:hover{ border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); }
.modal-row.active{ border-color: rgba(34,197,94,0.65); background: rgba(34,197,94,0.10); }
.modal-row-main{ font-weight:600; }
.modal-row-sub{ font-size:12px; color: var(--muted); margin-top: 2px; }

/* Light mode for modal */
body.light .modal{
  background:#ffffff !important;
  border-color: rgba(0,0,0,0.14) !important;
}
body.light .modal-title{ color:#0b1220 !important; }
body.light .modal-close{
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.14) !important;
  color:#0b1220 !important;
}
body.light .modal-header{ border-bottom-color: rgba(0,0,0,0.08) !important; }
body.light .modal-search{
  background:#ffffff !important;
  border-color: rgba(0,0,0,0.14) !important;
  color:#0b1220 !important;
}
body.light .modal-search::placeholder{ color: rgba(0,0,0,0.45) !important; }
body.light .modal-row{
  background:#ffffff !important;
  border-color: rgba(0,0,0,0.10) !important;
  color:#0b1220 !important;
}
body.light .modal-row-sub{ color: rgba(0,0,0,0.55) !important; }
body.light .popup-btn{
  background:#ffffff !important;
  border-color: rgba(0,0,0,0.14) !important;
  color:#0b1220 !important;
}
body.light .popup-selected{ color: rgba(0,0,0,0.60) !important; }