#guidedModeBar{position:relative;z-index:120;display:flex;gap:2px;padding:2px;border:1px solid #486073;border-radius:8px;background:#102a3a}
#guidedModeBar button,#guidedPanel button,#guidedPanel a{font:inherit;cursor:pointer;border:1px solid #415c70;border-radius:8px;background:#173749;color:#eef6fb;padding:10px 12px;text-decoration:none}
#guidedModeBar button{font-size:9px;font-weight:800;white-space:nowrap;padding:5px 8px;border-radius:6px}
#guidedModeBar [aria-pressed=true],#guidedPanel #guidedNext{background:#f57832;border-color:#f57832;color:#102432;font-weight:800}
#guidedPanel{position:fixed;z-index:100;left:12px;top:64px;bottom:16px;width:380px;display:flex;flex-direction:column;border:1px solid #3d5e72;border-radius:16px;background:#0b2231;box-shadow:0 16px 50px #0005;color:#eaf2f7;font-size:13px;line-height:1.5;overflow:hidden}
#guidedPanel[hidden],#guidedPanel [hidden],#guidedMobileView[hidden]{display:none!important}
#guidedScroll{overflow:auto;padding:22px;flex:1;min-height:0;scrollbar-width:thin}
#guidedPanel header span{color:#ff9a60;font-size:10px;letter-spacing:.14em;font-weight:800}
#guidedPanel h2{font-size:25px;line-height:1.2;margin:8px 0 12px;color:#fff}
#guidedPanel p{color:#b3c6d2;margin:10px 0 16px;font-size:12px}
#guidedNav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:18px 0}
#guidedNav button{padding:7px 9px;text-align:left;font-size:10px}
#guidedNav small{display:block;color:#a6bdcd;font-size:9px}
#guidedNav [aria-current=step]{border-color:#f57832;background:#33404a}
#guidedPanel .field,#guidedPanel .range-row{margin:15px 0;min-width:0}
#guidedPanel label{display:block;font-weight:600;margin:6px 0}
#guidedPanel input:not([type=checkbox]):not([type=range]),#guidedPanel select{width:100%;min-height:40px;border:1px solid #456075;border-radius:7px;background:#061a28;color:#ecf3f8;padding:8px;box-sizing:border-box}
#guidedPanel input[type=range]{width:100%}
#guidedPanel input[type=checkbox]{accent-color:#f57832}
#guidedPanel small{color:#aabfcc;font-size:11px;line-height:1.4}
#guidedPanel .guided-note{padding:12px;background:#153445;border:1px solid #35566b;border-radius:9px;font-size:11px;margin:12px 0}
#guidedPanel .guided-note button{display:block;margin-top:9px;font-size:11px}
.guided-truck-tip{margin:14px 0;padding:13px;border:1px solid #f57832;border-radius:10px;background:rgba(245,120,50,.12);box-shadow:inset 3px 0 #f57832}.guided-truck-tip b{display:block;color:#ffad7e}.guided-truck-tip p{margin:5px 0 7px!important;color:#eef6fb!important;font-size:12px!important}.guided-truck-tip small{display:block;color:#adc2cf!important}
.guided-check{padding:12px;border:1px solid #46667a;border-radius:9px}
.guided-confirmation{padding:10px 12px;border-left:3px solid #f57832;background:rgba(245,120,50,.08);border-radius:6px;color:#d7e4eb!important}
.guided-diagram{margin:15px 0;font-size:11px;text-align:center}.guided-diagram>div{border:3px solid #718a9a;padding:10px}.guided-diagram>div>div{border:2px dashed #63c2cd;padding:20px;margin-top:8px;background:#18414c}.guided-diagram figcaption{margin-top:8px;color:#aec4d2}
.guided-dimensions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.guided-dimensions label{font-size:10px}
.guided-family-prompt{margin:14px 0 6px;font-weight:600}
/* Four options since "Not sure" joined rack/bin/tote: 2x2 keeps each card readable in the 380px panel. */
.guided-families{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
#guidedPanel .guided-families button{padding:10px 6px;text-align:left}.guided-families span{display:block;font-size:28px;line-height:1.1;color:#f79961}.guided-families b{display:block}.guided-families small{display:block;font-size:10px!important;margin-top:5px}
/* Three nesting sliders stack in a 380px panel, so each one is a single name/slider/value row.
   `#guidedPanel label{display:block}` above outranks the studio's own `.nesting-control-grid
   label` rule, which would otherwise break each row into three stacked lines. */
#guidedPanel .nesting-control-grid label{display:grid;grid-template-columns:minmax(54px,auto) minmax(0,1fr) 32px;align-items:center;gap:6px;margin:4px 0;font-size:11px}
#guidedPanel .nesting-control-grid .nesting-axis-value{text-align:right;color:#9fd8f2;font-weight:700}
#guidedPanel .guided-families [aria-pressed=true]{border-color:#ff9a60;background:#3c3f3f}
#guidedSummary{display:grid;gap:10px;margin:12px 0}#guidedSummary>div{padding:12px;background:#143344;border-radius:8px}#guidedSummary small,#guidedSummary strong{display:block}
/* The four tiles above answer "what will this cost"; this answers "how did you get that".
   Full width and directly under the Freight tile, because it belongs to the whole summary
   rather than to any one tile. */
.guided-estimate-toggle{width:100%;margin:2px 0 0;font-size:11px;font-weight:800;letter-spacing:.03em;border-color:#3a6b86!important;background:#14313f!important;color:#9fd8f2!important}
.guided-estimate-toggle:hover,.guided-estimate-toggle:focus-visible{border-color:#53b7e4!important;background:#1c3f52!important;color:#d3efff!important}
.guided-estimate-details{margin:10px 0 0;padding:12px;border:1px solid #35566b;border-radius:9px;background:#0d2635}
.guided-estimate-details section+section{margin-top:12px;padding-top:10px;border-top:1px solid #24455a}
.guided-estimate-details h4{margin:0 0 6px;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#ff9a60}
.guided-estimate-details dl{display:grid;grid-template-columns:1fr auto;gap:4px 10px;margin:0;font-size:11px}
.guided-estimate-details dt{color:#a8bdca;min-width:0}
.guided-estimate-details dd{margin:0;text-align:right;font-weight:700;color:#eaf2f7;font-variant-numeric:tabular-nums;white-space:nowrap}
.guided-estimate-caveat{margin:12px 0 0!important;padding-top:10px;border-top:1px solid #24455a;font-size:10px!important;color:#9db2c0!important;line-height:1.45}
.guided-review-form{margin:0 0 18px;padding:14px;border:1px solid #46667a;border-radius:10px;background:#123243}
.guided-review-form label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#bdd2df;margin:10px 0 4px}
.guided-review-form label:first-child{margin-top:0}
.guided-review-form label span{text-transform:none;letter-spacing:0;font-weight:400;color:#8fa9ba}
#guidedPanel .guided-review-form textarea{width:100%;box-sizing:border-box;border:1px solid #456075;border-radius:7px;background:#061a28;color:#ecf3f8;padding:8px;font:inherit;resize:vertical}
.guided-review-actions{display:flex;gap:8px;margin-top:14px}
#guidedPanel .guided-review-actions #guidedReviewSend{background:#f57832;border-color:#f57832;color:#102432;font-weight:800;flex:1}
#guidedPanel .guided-review-actions .guided-review-cancel{background:none;border:1px solid #46667a;color:#b9cdd9}
.guided-review-status{margin:10px 0 0!important;font-size:11px!important;line-height:1.45!important}
.guided-review-status[data-kind=error]{color:#ffbfa0!important}
.guided-review-status[data-kind=busy]{color:#ffd9a8!important}
.guided-actions{display:grid;gap:8px;margin:18px 0}#guidedAssumptions{margin:18px 0;color:#d5e2ea}#guidedAssumptions summary{cursor:pointer;font-weight:700}#guidedWarnings{padding-left:18px;font-size:11px}#guidedWarnings li{margin:8px 0}#guidedError{color:#ffbfa0!important}
#guidedPanel footer{border-top:1px solid #3a5567;background:#102c3d;padding:14px 18px}#guidedPanel footer>div:last-child{display:flex;justify-content:space-between;gap:10px;margin-top:12px}#guidedPanel footer strong{display:block;font-size:15px;color:#ffac79}#guidedPanel footer #guidedError{margin:8px 0 0;font-weight:700;line-height:1.25}
/* Start over sits at the top of the panel as well as the bottom. The bottom copy is an
   underlined 11px link below the fold of a scrolling panel, which is fine as a footnote
   and useless when someone wants to abandon a run. This one is a real outlined control in
   the header, warm-toned so it reads as an action without competing with the orange
   Continue button that drives the flow. Both call the same confirm-first restart(). */
#guidedPanel .guided-restart-row{display:flex;justify-content:space-between;gap:8px;margin:0 0 10px}
#guidedPanel .guided-tutorial-top{padding:6px 12px;font-size:10px;font-weight:800;letter-spacing:.04em;border-radius:999px;border-color:#3a6b86;background:#14313f;color:#9fd8f2}
#guidedPanel .guided-tutorial-top span{font-size:12px;line-height:1}
#guidedPanel .guided-tutorial-top:hover,#guidedPanel .guided-tutorial-top:focus-visible{border-color:#53b7e4;background:#1c3f52;color:#d3efff}
#guidedPanel .guided-restart-top{padding:6px 12px;font-size:10px;font-weight:800;letter-spacing:.04em;border-radius:999px;border-color:#7c5338;background:#1d3240;color:#ffc79f}
#guidedPanel .guided-restart-top span{font-size:12px;line-height:1}
#guidedPanel .guided-restart-top:hover,#guidedPanel .guided-restart-top:focus-visible{border-color:#f57832;background:#2a3d4a;color:#ffdcc4}
#guidedPanel .guided-reset{padding:0;border:0;background:none;text-decoration:underline;color:#a5bccb;font-size:11px}
.guided-mode .studio-sidebar,.guided-mode .studio-tuning-top,.guided-mode .packout-recommendation-dock,.guided-mode #studioPanelsRail,.guided-mode #showTutorialButton,.guided-mode #hideControlsButton,.guided-mode #mobileControlsButton{display:none!important}
/* Guided mode hides the Concept Summary dock, so the dimension pills no longer have anything
   to clear on the right. The base stylesheet carries seven stacked !important right-offsets
   written for that dock (the last one wins at right:364px), which strands the pills in open
   space well short of the viewer edge. Pin them to the edge here, and lift both HUD rows to
   the top of the stage so they sit directly under the mode bar rather than floating below it.
   These stay ahead of the responsive blocks at the end of this file, which still override the
   top offsets on short and narrow viewports. */
.guided-mode .viewer-overlay{left:410px!important;top:10px!important}.guided-mode .dimension-panel{top:10px!important;right:10px!important}.guided-mode .viewer-help{left:410px!important}
#guidedPanel :focus-visible,#guidedModeBar :focus-visible{outline:3px solid #84d4f5;outline-offset:3px}
#guidedPanel button:disabled{opacity:.4;cursor:default}
#guidedMobileView{display:none}
.guided-step-list{margin:14px 0;color:#c4d7e2}.guided-step-list summary{cursor:pointer;font-size:11px}
.guided-mode #cadImportGuidance{display:none!important}
.guided-mode #fullEditorSampleField{display:none!important}
.guided-mode #v1030RevisionBanner{margin-left:400px!important;margin-right:12px!important}
.guided-mode #conceptSummaryDock,.guided-mode #panelRailToggle{display:none!important}
.guided-mode #kitModeField{display:none!important}
.guided-part-types{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#guidedPanel .guided-part-types [aria-pressed=true]{border-color:#f79961;background:#3a4147}
#guidedPanel .guided-note summary{cursor:pointer;margin-bottom:8px}
.guided-dialog{width:min(440px,calc(100vw - 32px));padding:24px;border:1px solid #55778d;border-radius:14px;background:#0b2231;color:#eaf2f7;box-shadow:0 25px 100px #0008;font:14px/1.5 Inter,sans-serif}
.guided-dialog::backdrop{background:#00111bcc;backdrop-filter:blur(3px)}.guided-dialog h2{font-size:22px;margin:0 0 12px}.guided-dialog p{color:#b7cbd7}.guided-dialog label{display:block}.guided-dialog input,.guided-dialog select{display:block;box-sizing:border-box;width:100%;margin:8px 0 20px;padding:12px;background:#092032;color:white;border:1px solid #52758b;border-radius:7px}.guided-dialog form>div{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.guided-dialog button{padding:10px 16px;color:#f5f8fa;background:#26485c;border:1px solid #507185;border-radius:7px;cursor:pointer}.guided-dialog button[value=confirm]{background:#f57832;color:#102432;font-weight:700}
.guided-mode .studio-main{left:400px!important;width:calc(100% - 400px)!important}
.guided-mode .viewer-overlay{left:10px!important}
.guided-mode #threeStage{min-width:0!important}
.guided-mode .viewer-camera-tools{flex-wrap:wrap!important;max-width:calc(100% - 16px)!important;overflow:auto!important}
@media(max-width:1000px){.guided-mode .studio-main{left:0!important;width:100%!important}.guided-mode #guidedPanel{top:auto;bottom:8px;left:8px;right:8px;width:auto;height:56dvh}#guidedMobileView{display:block}.guided-preview #guidedPanel{display:none!important}.guided-mode .viewer-overlay{top:60px!important}.guided-mode .viewer-help{display:none!important}.guided-mode #v1030RevisionBanner{display:none!important}}
@media(max-width:800px){#guidedModeBar button{font-size:8px;padding:5px 6px}#guidedPanel{top:auto;bottom:8px;left:8px;right:8px;width:auto;height:56dvh}#guidedScroll{padding:16px}#guidedPanel h2{font-size:21px}#guidedNav{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}#guidedNav button{font-size:9px;padding:5px}#guidedPanel footer{padding:9px 15px}#guidedPanel footer>div:last-child{margin-top:7px}.guided-mode .viewer-overlay{left:10px!important;top:60px!important}.guided-mode .dimension-panel{top:90px!important}.guided-mode .viewer-help{display:none!important}#guidedMobileView{display:block}.guided-preview #guidedPanel{display:none!important}}
@media(max-width:1000px){body.guided-mode:not(.guided-preview) .studio-main{top:45px!important;height:calc(44dvh - 50px)!important}body.guided-mode:not(.guided-preview) .viewer-camera-tools{display:none!important}body.guided-mode:not(.guided-preview) .viewer-overlay{top:8px!important}body.guided-mode:not(.guided-preview) .dimension-panel{top:65px!important}}
#rotateRackDunnageViewer {
  border: 2px solid #ff7a2f !important;
  background: rgba(245, 120, 50, 0.14) !important;
  box-shadow: 0 0 0 1px rgba(255, 122, 47, 0.3), 0 0 12px rgba(255, 122, 47, 0.22) !important;
  color: #ffb083 !important;
  font-weight: 800 !important;
  cursor: pointer;
}

#rotateRackDunnageViewer:hover {
  background: #f57832 !important;
  border-color: #ffb083 !important;
  color: #fff !important;
}

#rotateRackDunnageViewer:focus-visible {
  outline: 2px solid #ffad7e;
  outline-offset: 2px;
}