/* Stooper V6.7.4 — unified direct-app visual layer.
   Presentation only: calculator IDs, JS hooks and calculation logic remain unchanged. */

.stooper-direct-app-page{max-width:1380px!important;padding-left:34px!important;padding-right:34px!important}
.stooper-direct-app-page .page-heading{max-width:980px;margin-bottom:30px}
.stooper-direct-app-page .page-heading h1{font-size:clamp(42px,5vw,66px)}
.stooper-direct-app-page .page-heading .lede{max-width:820px}
.stooper-direct-app-shell{margin-top:28px;border:1px solid #d2e1ec;background:#fff;border-radius:24px;padding:22px;box-shadow:0 22px 60px rgba(42,74,99,.09);overflow:hidden}
.stooper-direct-app-shell,.stooper-direct-app-shell *{box-sizing:border-box}
.stooper-direct-app-shell button,.stooper-direct-app-shell input,.stooper-direct-app-shell select,.stooper-direct-app-shell textarea{font-family:inherit}
.stooper-direct-app-shell button{min-height:42px}
.stooper-direct-app-shell input,.stooper-direct-app-shell select,.stooper-direct-app-shell textarea{font-size:15px}
.stooper-direct-app-note{display:flex;align-items:center;gap:10px;margin-top:18px;padding:12px 14px;border:1px solid #cfe0ec;border-radius:12px;background:#f2f8fc;color:#587087;font-size:13px}

/* -------------------------------------------------------
   Sea Container Loader / Cargo Planner
   ------------------------------------------------------- */
.stooper-cargo-modern .sr-wizard-container{max-width:none;margin:0;color:#203952;font-family:inherit}
.stooper-cargo-modern .sr-progress-bar{gap:7px;margin:0 0 24px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:thin}
.stooper-cargo-modern .sr-step{flex:1 0 92px;min-width:92px;border:1px solid #d6e3ec;border-radius:11px;padding:10px 8px;background:#f4f8fb;color:#6a8093;font-size:12px;font-weight:700;line-height:1.2}
.stooper-cargo-modern .sr-step+.sr-step::before{display:none}
.stooper-cargo-modern .sr-step.visited{background:#e7f2fa;color:#2865a1;border-color:#bdd6e9}
.stooper-cargo-modern .sr-step.active{background:#2865a1;color:#fff;border-color:#2865a1;box-shadow:0 7px 18px rgba(40,101,161,.18)}
.stooper-cargo-modern .sr-panel{padding:24px;border:1px solid #d8e4ec;border-radius:18px;margin:0 0 18px;background:#fff;box-shadow:0 8px 22px rgba(42,74,99,.035)}
.stooper-cargo-modern .sr-panel>h2{font-size:24px;letter-spacing:-.5px;font-weight:600;margin:0 0 18px;color:#203952}
.stooper-cargo-modern .container-options,.stooper-cargo-modern .cargo-mode-options{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px!important;justify-content:stretch!important}
.stooper-cargo-modern .sr-tile,.stooper-cargo-modern .sr-selectable{margin:0!important;padding:16px!important;border:1px solid #d6e3ec!important;border-radius:16px!important;background:#fbfdff!important;color:#203952!important;transition:.16s ease;min-height:130px;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.stooper-cargo-modern .sr-tile:hover,.stooper-cargo-modern .sr-selectable:hover{border-color:#9ec2de!important;box-shadow:0 8px 22px rgba(40,101,161,.08)}
.stooper-cargo-modern .sr-tile:has(input:checked),.stooper-cargo-modern .sr-selectable:has(input:checked){border-color:#2865a1!important;background:#eef6fc!important;box-shadow:0 0 0 3px rgba(40,101,161,.08)}
.stooper-cargo-modern .sr-tile img{max-height:68px;max-width:105px;object-fit:contain}
.stooper-cargo-modern .sr-tile span{font-weight:700;color:#284963}
.stooper-cargo-modern input[type="number"],.stooper-cargo-modern input[type="text"],.stooper-cargo-modern select{border:1px solid #bfd2e0;border-radius:10px;padding:10px 11px;background:#fff;color:#203952;outline:none;min-height:42px}
.stooper-cargo-modern input:focus,.stooper-cargo-modern select:focus{border-color:#2865a1;box-shadow:0 0 0 3px rgba(40,101,161,.11)}
.stooper-cargo-modern input[readonly]{background:#f4f7f9;color:#687e90}
.stooper-cargo-modern .sr-orient-block{padding:12px 14px!important;background:#f4f8fb;border:1px solid #d9e5ed;border-radius:12px;margin-bottom:10px!important;color:#49667f}
.stooper-cargo-modern .sr-orient-pill{background:#fff!important;border:1px solid #cedde8!important;border-radius:999px!important;padding:8px 11px!important;margin:3px!important;display:inline-flex!important;gap:6px;align-items:center}
.stooper-cargo-modern .sr-cargo-table,.stooper-cargo-modern .sr-pallet-table,.stooper-cargo-modern .sr-grand-table{border-collapse:separate!important;border-spacing:0;width:100%;min-width:740px;border:1px solid #d9e4eb;border-radius:14px;overflow:hidden;background:#fff}
.stooper-cargo-modern .sr-cargo-table th,.stooper-cargo-modern .sr-pallet-table th,.stooper-cargo-modern .sr-grand-table th{background:#edf5fa!important;color:#385872!important;border:0!important;border-bottom:1px solid #d5e2eb!important;padding:10px 8px!important;font-size:12px;font-weight:800}
.stooper-cargo-modern .sr-cargo-table td,.stooper-cargo-modern .sr-pallet-table td,.stooper-cargo-modern .sr-grand-table td{border:0!important;border-bottom:1px solid #edf1f4!important;padding:8px!important;background:#fff}
.stooper-cargo-modern .sr-cargo-table tfoot td,.stooper-cargo-modern .sr-pallet-table tfoot td{background:#f7fafc;font-weight:800;color:#385872}
.stooper-cargo-modern .sr-cargo-table input,.stooper-cargo-modern .sr-pallet-table input{width:100%!important;min-width:68px}
.stooper-cargo-modern .sr-add-btn,.stooper-cargo-modern #add-cargo-box,.stooper-cargo-modern #add-cargo-cylinder,.stooper-cargo-modern #add-cargo-bag{background:#eaf3fa!important;color:#24577f!important;border:1px solid #bed5e6!important;border-radius:10px!important;padding:10px 14px!important;font-weight:800}
.stooper-cargo-modern .sr-add-btn:hover,.stooper-cargo-modern #add-cargo-box:hover,.stooper-cargo-modern #add-cargo-cylinder:hover,.stooper-cargo-modern #add-cargo-bag:hover{background:#dcecf7!important}
.stooper-cargo-modern .remove-cargo,.stooper-cargo-modern .remove-pallet{width:36px;height:36px;border-radius:9px!important;background:#fff1f1!important;color:#b42318!important;border:1px solid #f0c9c9!important}
.stooper-cargo-modern .sr-grand-head{margin:26px 0 10px;color:#203952}
.stooper-cargo-modern .sr-wizard-nav{margin-top:18px;padding:16px 0 0;border-top:1px solid #e3eaef;gap:10px}
.stooper-cargo-modern .sr-btn{margin:0!important;border-radius:10px!important;padding:11px 18px!important;background:#2865a1!important;color:#fff!important;font-weight:800!important;box-shadow:none!important}
.stooper-cargo-modern .sr-btn:hover:not(:disabled){background:#225789!important}
.stooper-cargo-modern .sr-btn:disabled{background:#e7edf1!important;color:#94a5b3!important}
.stooper-cargo-modern .sr-back{background:#fff!important;color:#285273!important;border:1px solid #c8d8e4!important}
.stooper-cargo-modern #container-view,.stooper-cargo-modern #length-preview3d,.stooper-cargo-modern #cargo3d{border:1px solid #d8e3ea!important;border-radius:16px!important;background:#f8fbfd!important}
.stooper-cargo-modern canvas{max-width:100%;height:auto;border-color:#d8e3ea!important;border-radius:12px;background:#f8fbfd!important}
.stooper-cargo-modern #custom-dims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stooper-cargo-modern #custom-dims label{display:grid;gap:5px;font-size:13px;font-weight:700;color:#49667f}

/* -------------------------------------------------------
   3D CBM tool — convert legacy dark panel into Stooper light app
   ------------------------------------------------------- */
.stooper-cbm-modern .stp43{max-width:none!important;margin:0!important;padding:0!important;background:transparent!important;color:#203952!important;font-family:inherit!important;box-shadow:none!important;border:0!important}
.stooper-cbm-modern .stp43-header{padding:4px 2px 18px;border-bottom:1px solid #e0e8ee;margin-bottom:18px!important}
.stooper-cbm-modern .stp43-kicker{color:#5e7a92!important;font-size:11px!important;letter-spacing:.14em!important}
.stooper-cbm-modern .stp43 h2{color:#203952!important;font-size:clamp(26px,3vw,38px)!important;letter-spacing:-1px!important;font-weight:600!important}
.stooper-cbm-modern .stp43-header p{color:#60758a!important;line-height:1.65!important}
.stooper-cbm-modern .stp43-actions-top button,.stooper-cbm-modern .stp43-tabs button,.stooper-cbm-modern .stp43-toolbar button{background:#fff!important;color:#315b7c!important;border:1px solid #c7d8e5!important;border-radius:10px!important;padding:10px 13px!important;font-weight:800!important}
.stooper-cbm-modern .stp43-tabs{padding:6px;background:#eef5fa;border:1px solid #d7e4ed;border-radius:13px;margin-bottom:18px!important}
.stooper-cbm-modern .stp43-tabs button.active,.stooper-cbm-modern .stp43-tabs button:hover,.stooper-cbm-modern .stp43-toolbar button:hover,.stooper-cbm-modern .stp43-actions-top button:hover{background:#2865a1!important;color:#fff!important;border-color:#2865a1!important}
.stooper-cbm-modern .stp43-main{grid-template-columns:minmax(0,1.4fr) minmax(320px,.72fr)!important;gap:18px!important}
.stooper-cbm-modern .stp43-row,.stooper-cbm-modern .stp43-preview-card,.stooper-cbm-modern .stp43-container-card,.stooper-cbm-modern .stp43-load-card{background:#fff!important;border:1px solid #d8e4ec!important;border-radius:17px!important;box-shadow:0 8px 24px rgba(42,74,99,.04)!important;color:#203952!important}
.stooper-cbm-modern .stp43-row{padding:16px!important;margin-bottom:12px!important}
.stooper-cbm-modern .stp43-row:hover,.stooper-cbm-modern .stp43-row.active{border-color:#9fc4df!important;box-shadow:0 0 0 3px rgba(40,101,161,.08)!important}
.stooper-cbm-modern .stp43-row-name,.stooper-cbm-modern .stp43-preview-head strong,.stooper-cbm-modern .stp43-container-card h3,.stooper-cbm-modern .stp43-load-card h3{color:#203952!important}
.stooper-cbm-modern .stp43-row-chip{background:#edf5fa!important;border:1px solid #d4e4ee!important;color:#5c7890!important}
.stooper-cbm-modern .stp43-fields label,.stooper-cbm-modern .stp43-load-grid label{color:#536e85!important}
.stooper-cbm-modern .stp43-fields input,.stooper-cbm-modern .stp43-fields select,.stooper-cbm-modern .stp43-load-grid input,.stooper-cbm-modern .stp43-load-grid select{background:#fff!important;border:1px solid #bfd2e0!important;color:#203952!important;border-radius:10px!important;padding:10px!important}
.stooper-cbm-modern .stp43-fields input:focus,.stooper-cbm-modern .stp43-fields select:focus,.stooper-cbm-modern .stp43-load-grid input:focus,.stooper-cbm-modern .stp43-load-grid select:focus{border-color:#2865a1!important;box-shadow:0 0 0 3px rgba(40,101,161,.1)!important}
.stooper-cbm-modern .stp43-remove{background:#fff1f1!important;color:#b42318!important;border:1px solid #f0c9c9!important;border-radius:10px!important}
.stooper-cbm-modern .stp43-row-result div,.stooper-cbm-modern .stp43-load-result div,.stooper-cbm-modern .stp43-summary div{background:#f3f8fb!important;border:1px solid #dbe6ed!important;border-radius:13px!important;color:#203952!important}
.stooper-cbm-modern .stp43-row-result small,.stooper-cbm-modern .stp43-load-result small,.stooper-cbm-modern .stp43-summary small{color:#71879a!important}
.stooper-cbm-modern .stp43-row-result b,.stooper-cbm-modern .stp43-load-result b,.stooper-cbm-modern .stp43-summary b{color:#203952!important}
.stooper-cbm-modern .stp43-summary .stp43-gold{background:#fff7e8!important;border-color:#f1d7a5!important}
.stooper-cbm-modern .stp43-gold b{color:#8d5d12!important}
.stooper-cbm-modern .stp43-preview-head{border-bottom:1px solid #dde7ee!important}
.stooper-cbm-modern .stp43-preview-head small,.stooper-cbm-modern .stp43-preview-note,.stooper-cbm-modern .stp43-formula{color:#71879a!important}
.stooper-cbm-modern .stp43-preview-note{border-top:1px solid #dde7ee!important}
.stooper-cbm-modern .stp43-stage{background:radial-gradient(circle at center,#eaf4fb 0,#f8fbfd 52%,#f2f6f9 100%)!important}
.stooper-cbm-modern .stp43-container-top{color:#536f86!important}
.stooper-cbm-modern .stp43-bar{background:#e4ebf0!important}
.stooper-cbm-modern .stp43-bar span{background:linear-gradient(90deg,#2865a1,#75a8cf)!important}
.stooper-cbm-modern .stp43-load-visual{background:#f3f8fb!important;border-color:#dbe6ed!important}
.stooper-cbm-modern .stp43-label{background:#fff!important;color:#34566f!important;border:1px solid #cbdde9!important;box-shadow:0 4px 12px rgba(42,74,99,.08)!important}
.stooper-cbm-modern .stp43-line{border-color:#7899b3!important}

/* -------------------------------------------------------
   Stock Risk / Reward — same Stooper app language
   ------------------------------------------------------- */
.stooper-stock-modern #stooper-rr-calculator{max-width:none!important;margin:0!important;font-family:inherit!important;--rr-bg:#f8fbfd;--rr-card:#fff;--rr-text:#203952;--rr-muted:#60758a;--rr-border:#d7e3eb;--rr-soft:#f1f6f9;--rr-dark:#203952;--rr-blue:#2865a1;--rr-shadow:none!important}
.stooper-stock-modern #stooper-rr-calculator .rr-shell{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;overflow:visible!important}
.stooper-stock-modern #stooper-rr-calculator .rr-header{padding:4px 2px 18px;border-bottom:1px solid #e0e8ee;margin-bottom:18px!important}
.stooper-stock-modern #stooper-rr-calculator .rr-title h2{font-size:clamp(27px,3vw,40px)!important;color:#203952!important;font-weight:600!important;letter-spacing:-1px!important}
.stooper-stock-modern #stooper-rr-calculator .rr-badge-card,.stooper-stock-modern #stooper-rr-calculator .rr-panel{border:1px solid #d8e4ec!important;border-radius:17px!important;background:#fff!important;box-shadow:0 8px 24px rgba(42,74,99,.04)!important}
.stooper-stock-modern #stooper-rr-calculator input,.stooper-stock-modern #stooper-rr-calculator select{border-color:#bfd2e0!important;border-radius:10px!important;padding:11px!important;color:#203952!important}
.stooper-stock-modern #stooper-rr-calculator input:focus,.stooper-stock-modern #stooper-rr-calculator select:focus{border-color:#2865a1!important;box-shadow:0 0 0 3px rgba(40,101,161,.1)!important}
.stooper-stock-modern #stooper-rr-calculator .rr-toggle{background:#eef5fa!important;border-color:#d6e3ec!important;border-radius:12px!important}
.stooper-stock-modern #stooper-rr-calculator .rr-toggle button,.stooper-stock-modern #stooper-rr-calculator .rr-action-row button,.stooper-stock-modern #stooper-rr-calculator .rr-copy-btn{border-radius:10px!important}
.stooper-stock-modern #stooper-rr-calculator .rr-calc-btn,.stooper-stock-modern #stooper-rr-calculator .rr-copy-btn{background:#2865a1!important;color:#fff!important}
.stooper-stock-modern #stooper-rr-calculator .rr-reset-btn{background:#fff!important;color:#315b7c!important;border:1px solid #c7d8e5!important}
.stooper-stock-modern #stooper-rr-calculator .rr-result-card{border-color:#d8e4ec!important;border-radius:14px!important;background:#f3f8fb!important}
.stooper-stock-modern #stooper-rr-calculator .rr-result-card.highlight{background:#eaf4fb!important;border-color:#bed8e9!important}
.stooper-stock-modern #stooper-rr-calculator .rr-copy-output,.stooper-stock-modern #stooper-rr-calculator .rr-note,.stooper-stock-modern #stooper-rr-calculator .rr-message,.stooper-stock-modern #stooper-rr-calculator .rr-visual{border-radius:14px!important}

@media(max-width:1180px){
  .stooper-cbm-modern .stp43-main{grid-template-columns:1fr!important}
  .stooper-cbm-modern .stp43-right{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .stooper-cbm-modern .stp43-preview-card{grid-column:1/-1}
}
@media(max-width:920px){
  .stooper-direct-app-page{padding-left:22px!important;padding-right:22px!important}
  .stooper-direct-app-shell{padding:15px;border-radius:18px}
  .stooper-cargo-modern .sr-panel{padding:17px}
  .stooper-cargo-modern .sr-cargo-table,.stooper-cargo-modern .sr-pallet-table,.stooper-cargo-modern .sr-grand-table{display:table}
  .stooper-cargo-modern .sr-panel:has(table){overflow-x:auto}
  .stooper-cbm-modern .stp43-fields,.stooper-cbm-modern .stp43-fields.round{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stooper-cbm-modern .stp43-remove{grid-column:2;justify-self:end}
  .stooper-cbm-modern .stp43-summary{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:700px){
  .stooper-direct-app-page{padding-left:16px!important;padding-right:16px!important}
  .stooper-direct-app-page .page-heading{margin-bottom:20px}
  .stooper-direct-app-shell{padding:12px;border-radius:16px;margin-top:18px}
  .stooper-cargo-modern #custom-dims{grid-template-columns:1fr}
  .stooper-cargo-modern .container-options,.stooper-cargo-modern .cargo-mode-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stooper-cbm-modern .stp43-header,.stooper-stock-modern #stooper-rr-calculator .rr-header{grid-template-columns:1fr!important;display:grid!important}
  .stooper-cbm-modern .stp43-actions-top{justify-content:flex-start}
  .stooper-cbm-modern .stp43-right{grid-template-columns:1fr}
  .stooper-cbm-modern .stp43-preview-card{grid-column:auto}
  .stooper-cbm-modern .stp43-fields,.stooper-cbm-modern .stp43-fields.round,.stooper-cbm-modern .stp43-load-grid,.stooper-cbm-modern .stp43-load-result{grid-template-columns:1fr!important}
  .stooper-cbm-modern .stp43-remove{grid-column:auto;justify-self:start}
  .stooper-cbm-modern .stp43-summary{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .stooper-cbm-modern .stp43-summary div{padding:12px!important}
  .stooper-cbm-modern .stp43-summary b{font-size:21px!important}
  .stooper-stock-modern #stooper-rr-calculator .rr-grid,.stooper-stock-modern #stooper-rr-calculator .rr-form-grid,.stooper-stock-modern #stooper-rr-calculator .rr-results-grid{grid-template-columns:1fr!important}
}
@media(max-width:440px){
  .stooper-cargo-modern .container-options,.stooper-cargo-modern .cargo-mode-options{grid-template-columns:1fr}
  .stooper-cbm-modern .stp43-summary{grid-template-columns:1fr!important}
}