*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f0f4f9;--white:#fff;--border:#e1e8f0;
  --blue:#2563eb;--blue-d:#1d4ed8;--blue-l:#dbeafe;--blue-xl:#eff6ff;
  --text:#1e293b;--text-mid:#475569;--text-light:#94a3b8;
  --green:#059669;--green-l:#ecfdf5;--red:#dc2626;--red-l:#fef2f2;
  --shadow:0 2px 20px rgba(0,0,0,0.08);--r:14px;
}
body{background:var(--bg);font-family:'Quicksand',sans-serif;color:var(--text);min-height:100vh}
.page-hd{background:var(--white);border-bottom:1px solid var(--border);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.hd-title h1{font-size:1.1rem;font-weight:700;letter-spacing:-0.01em}
.hd-title p{font-size:0.73rem;color:var(--text-light);margin-top:2px}
.hbadge{font-family:'Fira Code',monospace;font-size:0.6rem;font-weight:600;letter-spacing:0.07em;padding:0.28rem 0.75rem;border-radius:6px;background:#eff6ff;border:1px solid #bfdbfe;color:var(--blue)}
.wizard-wrap{max-width:1100px;margin:1.5rem auto;padding:0 1.5rem}
/* STEPS */
.steps-bar{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr 1fr auto;overflow:hidden;margin-bottom:1.5rem}
.step-item{padding:1rem 1.5rem;border-right:1px solid var(--border);display:flex;align-items:center;gap:0.75rem;cursor:pointer;transition:background 0.15s;position:relative}
.step-item:last-child{border-right:none;flex:none;padding:1rem}
.step-item.active{background:var(--blue-xl)}
.step-item.done{background:var(--green-l)}
.step-item.locked{opacity:0.45;cursor:not-allowed}
.step-num{font-family:'Fira Code',monospace;font-size:0.75rem;font-weight:700;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--border);color:var(--text-mid);flex-shrink:0;transition:all 0.2s}
.step-item.active .step-num{background:var(--blue);color:#fff}
.step-item.done .step-num{background:var(--green);color:#fff}
.step-label{font-size:0.78rem;font-weight:700;color:var(--text-mid);letter-spacing:0.02em}
.step-item.active .step-label{color:var(--blue)}
.step-item.done .step-label{color:var(--green)}
.step-sub{font-size:0.65rem;color:var(--text-light);margin-top:0.1rem;font-weight:500}
.step-bar{position:absolute;bottom:0;left:0;right:0;height:3px;display:none}
.step-item.active .step-bar{display:block;background:var(--blue)}
.step-item.done .step-bar{display:block;background:var(--green)}
/* PANEL */
.panel{display:none}.panel.active{display:block}
/* CARD */
.card{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;margin-bottom:1rem}
.card-hd{padding:1rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem}
.card-title{font-size:0.85rem;font-weight:700}
.card-body{padding:1.25rem 1.5rem}
/* BTN */
.btn{font-family:'Quicksand',sans-serif;font-weight:700;font-size:0.82rem;padding:0.65rem 1.4rem;border-radius:9px;border:none;cursor:pointer;transition:all 0.18s;display:inline-flex;align-items:center;gap:0.4rem;letter-spacing:0.01em}
.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-d)}
.btn-secondary{background:var(--bg);color:var(--text-mid);border:1.5px solid var(--border)}.btn-secondary:hover{border-color:var(--blue);color:var(--blue)}
.btn-danger{background:var(--red-l);color:var(--red);border:1px solid #fca5a5}.btn-danger:hover{background:#fee2e2}
.btn-success{background:var(--green);color:#fff}
.btn-sm{padding:0.4rem 0.9rem;font-size:0.75rem;border-radius:7px}
/* PRODUCTS TABLE */
.prod-table{width:100%;border-collapse:collapse}
.prod-table th{font-family:'Fira Code',monospace;font-size:0.6rem;font-weight:700;letter-spacing:0.08em;color:var(--text-light);padding:0.5rem 0.6rem;text-align:left;border-bottom:2px solid var(--border);white-space:nowrap}
.prod-table td{padding:0.55rem 0.4rem;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.prod-table tr:last-child td{border-bottom:none}
.prod-table input{width:100%;border:1.5px solid var(--border);border-radius:7px;padding:0.45rem 0.6rem;font-family:'Quicksand',sans-serif;font-size:0.8rem;font-weight:600;color:var(--text);background:#fafbfd;outline:none}
.prod-table input:focus{border-color:var(--blue);background:#fff}
.form-input-unit{display:flex;align-items:stretch}
.form-input-unit input{border-radius:8px 0 0 8px;border-right:none}
.unit-tag{background:#f1f5f9;border:1.5px solid var(--border);border-left:none;border-radius:0 8px 8px 0;padding:0 0.65rem;font-family:'Fira Code',monospace;font-size:0.65rem;font-weight:700;color:var(--text-light);display:flex;align-items:center}
.color-wrap{position:relative;width:22px;height:22px}
.color-dot{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid rgba(0,0,0,0.1);flex-shrink:0}
.color-picker-input{width:22px;height:22px;border-radius:50%;border:none;padding:0;cursor:pointer;opacity:0;position:absolute;top:0;left:0}
/* TRANSPORT */
.transport-tabs{display:flex;gap:0;margin-bottom:1.2rem;background:var(--bg);border-radius:10px;padding:4px;width:fit-content}
.transport-tab{font-family:'Fira Code',monospace;font-size:0.7rem;font-weight:700;padding:0.45rem 1.2rem;border-radius:7px;border:none;background:transparent;color:var(--text-light);cursor:pointer;transition:all 0.15s;letter-spacing:0.05em}
.transport-tab.active{background:var(--white);color:var(--blue);box-shadow:0 1px 4px rgba(0,0,0,0.1)}
.transport-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0.75rem}
.transport-card{border:2px solid var(--border);border-radius:12px;padding:1rem;cursor:pointer;transition:all 0.18s;text-align:center;background:var(--white);position:relative}
.transport-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 4px 12px rgba(37,99,235,0.12)}
.transport-card.selected{border-color:var(--blue);background:var(--blue-xl)}
.transport-card.selected::after{content:'✓';position:absolute;top:6px;right:8px;color:var(--blue);font-weight:700;font-size:0.8rem}
.tc-svg{margin:0.5rem auto 0.6rem;display:flex;justify-content:center;height:55px}
.tc-label{font-size:0.72rem;font-weight:700;color:var(--text);letter-spacing:0.02em}
.tc-dims{font-family:'Fira Code',monospace;font-size:0.58rem;color:var(--text-light);margin-top:0.25rem}
.sel-tr-item{display:flex;align-items:center;gap:0.75rem;background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:0.75rem 1rem;margin-bottom:0.5rem}
.sel-tr-info{flex:1}
.sel-tr-name{font-size:0.82rem;font-weight:700}
.sel-tr-dims{font-family:'Fira Code',monospace;font-size:0.6rem;color:var(--text-light);margin-top:0.15rem}
.qty-ctrl{display:flex;align-items:center;gap:0.4rem}
.qty-btn{width:26px;height:26px;border-radius:6px;border:1.5px solid var(--border);background:var(--white);color:var(--text-mid);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;transition:all 0.13s;flex-shrink:0}
.qty-btn:hover{border-color:var(--blue);color:var(--blue)}
.qty-val{font-family:'Fira Code',monospace;font-size:0.85rem;font-weight:700;min-width:28px;text-align:center}
/* RESULT */
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
@media(max-width:700px){.result-grid{grid-template-columns:1fr}}
.stat-card{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);padding:1.1rem 1.25rem}
.stat-icon{font-size:1.4rem;margin-bottom:0.35rem}
.stat-label{font-family:'Fira Code',monospace;font-size:0.58rem;color:var(--text-light);letter-spacing:0.1em;margin-bottom:0.2rem}
.stat-val{font-size:1.4rem;font-weight:700;color:var(--blue);letter-spacing:-0.02em;line-height:1}
.stat-sub{font-size:0.72rem;color:var(--text-mid);margin-top:0.25rem}
.util-bar-wrap{margin-top:0.6rem}
.util-bar-track{height:8px;background:#f1f5f9;border-radius:4px;overflow:hidden;margin-top:0.3rem}
.util-bar-fill{height:100%;border-radius:4px;transition:width 0.6s cubic-bezier(.4,0,.2,1)}
.util-good{background:linear-gradient(90deg,var(--green),#34d399)}
.util-mid{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.util-low{background:linear-gradient(90deg,var(--red),#f87171)}
.util-label{display:flex;justify-content:space-between;font-size:0.7rem;color:var(--text-mid);font-weight:600}
.cargo-table{width:100%;border-collapse:collapse}
.cargo-table th{font-family:'Fira Code',monospace;font-size:0.6rem;font-weight:700;letter-spacing:0.08em;color:var(--text-light);padding:0.5rem 0.75rem;text-align:left;border-bottom:2px solid var(--border)}
.cargo-table td{padding:0.6rem 0.75rem;border-bottom:1px solid #f1f5f9;font-size:0.8rem}
.cargo-table tr:last-child td{border-bottom:none}
.cargo-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:0.5rem;vertical-align:middle}
/* 3D VIEWER */
.viewer-wrap{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;margin-bottom:1rem}
.viewer-hd{padding:0.85rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.5rem}
.viewer-title{font-size:0.82rem;font-weight:700}
.viewer-meta{font-family:'Fira Code',monospace;font-size:0.65rem;color:var(--text-light)}
#threeCanvas{width:100%;height:380px;display:block;background:linear-gradient(145deg,#f8fafc,#f0f4f9)}
.viewer-legend{padding:0.75rem 1.25rem;border-top:1px solid var(--border);display:flex;gap:1rem;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:0.4rem;font-size:0.73rem;color:var(--text-mid);font-weight:600}
.legend-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.viewer-controls{padding:0.5rem 1.25rem;background:#f8fafc;border-top:1px solid var(--border);font-size:0.7rem;color:var(--text-light);display:flex;gap:1.2rem;flex-wrap:wrap}
/* LOADING */
.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,0.5);display:flex;align-items:center;justify-content:center;z-index:9999;display:none}
.loading-box{background:var(--white);border-radius:var(--r);padding:2rem 2.5rem;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.2)}
.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 1rem}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:0.85rem;font-weight:600;color:var(--text-mid)}
/* DONUT */
.donut-wrap{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}
.donut-legend{display:flex;flex-direction:column;gap:0.4rem}
.dl-item{display:flex;align-items:center;gap:0.5rem;font-size:0.75rem;color:var(--text-mid)}
.dl-pct{font-family:'Fira Code',monospace;font-size:0.7rem;font-weight:700;color:var(--blue);margin-left:auto;padding-left:0.5rem}
.empty-state{text-align:center;padding:2.5rem 1.5rem;color:var(--text-light)}
.empty-icon{font-size:2.2rem;margin-bottom:0.6rem}
.empty-text{font-size:0.82rem;font-weight:600;color:var(--text-mid)}
.nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:1.5rem;flex-wrap:wrap;gap:0.75rem}
.page-ft{background:var(--white);border-top:1px solid var(--border);text-align:center;padding:1.25rem;font-size:0.72rem;color:var(--text-light);margin-top:1rem}
@media(max-width:640px){.steps-bar{grid-template-columns:1fr 1fr}.step-sub{display:none}.prod-table{display:block;overflow-x:auto}}