/* === CelloDie Block Calculator theme === */
:root {
  --ok:#19b54a;
  --bad:#e53935;
  --brand:#f68528;
  --brand2:#d96f15;
  --ink:#061019;
  --panel:rgba(15,27,42,.92);
  --line:#1c3147;
  --muted:#9fb2c6;
  --text:#e7f0f8;
  --shadow:0 20px 60px rgba(0,0,0,.25);
  --radius:18px;
}

* { box-sizing:border-box; }

body {
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(1100px 550px at 20% -10%, rgba(246,133,40,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(246,133,40,.10), transparent 55%),
    var(--ink);
  padding-bottom:78px; /* prevent footer overlaying content */
}

header {
  background:#0d1a24;
  border-bottom:1px solid rgba(28,49,71,.9);
}

.header-inner {
  max-width:1200px;
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
}

.logo {
  width:44px;
  height:44px;
  border-radius:12px;
  background:#0b1420;
  border:1px solid rgba(28,49,71,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:rgba(255,255,255,.85);
  font-weight:900;
  font-size:12px;
  letter-spacing:.3px;
}

.title {
  margin:0;
  font-size:16px;
  font-weight:900;
  letter-spacing:.2px;
}

.sub {
  margin-top:2px;
  color:var(--muted);
  font-size:13px;
}

.tag {
  color:#fff;
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
}

.top-accent-bar {
  height:4px;
  width:100%;
  background:#f68528;
}

.container-wide {
  max-width:none;
  margin:0;
  padding:16px;
}

.card {
  background:var(--panel);
  border:1px solid rgba(28,49,71,.9);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.cardHead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  background:rgba(6,16,25,.25);
  border-bottom:1px solid rgba(28,49,71,.65);
}

.cardHead h2 {
  margin:0;
  font-size:14px;
  color:#f2fbff;
  letter-spacing:.2px;
}

.pill {
  font-size:12px;
  color:rgba(255,255,255,.86);
  background:rgba(6,16,25,.55);
  border:1px solid rgba(28,49,71,.9);
  padding:4px 8px;
  border-radius:999px;
}

.content {
  padding:14px;
}

.form {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

@media (max-width: 680px) {
  .form { grid-template-columns:1fr; }
}

label {
  display:block;
  font-size:12px;
  color:rgba(231,240,248,.86);
  margin:0 0 6px 2px;
}

input,
select {
  width:100%;
  font:inherit;
  color:rgba(231,240,248,.98);
  background:rgba(6,16,25,.55);
  border:1px solid rgba(28,49,71,.85);
  border-radius:12px;
  padding:10px 10px;
  min-height:40px;
  outline:none;
}

input:focus,
select:focus {
  border-color: rgba(246,133,40,.80);
  box-shadow: 0 0 0 4px rgba(246,133,40,.14);
}

.hint {
  margin-top:6px;
  color:rgba(159,178,198,.9);
  font-size:12px;
  line-height:1.35;
}

.btnbar {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}

.btn {
  border:1px solid rgba(28,49,71,.9);
  background:rgba(6,16,25,.35);
  color:rgba(255,255,255,.92);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
  user-select:none;
}

.btn.primary {
  border-color: rgba(246,133,40,.75);
  background: linear-gradient(135deg, rgba(246,133,40,.24), rgba(246,133,40,.14));
}

.btn:disabled {
  opacity:.55;
  cursor:not-allowed;
}

.kpis {
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.kpi {
  border:1px solid rgba(28,49,71,.65);
  background: rgba(6,16,25,.25);
  border-radius:14px;
  padding:10px 12px;
}

.kpi .k {
  font-size:12px;
  color:rgba(159,178,198,.9);
  margin-bottom:4px;
}

.kpi .v {
  font-size:18px;
  font-weight:950;
  color:#fff;
}

.kpi .s {
  margin-top:4px;
  font-size:12px;
  color:rgba(231,240,248,.78);
}

/* Preview panel */
.previewBox {
  border:1px solid rgba(28,49,71,.65);
  border-radius:14px;
  background:rgba(6,16,25,.18);
  overflow:hidden;
}

.previewHead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid rgba(28,49,71,.55);
  background:rgba(6,16,25,.25);
}

.previewTitle {
  font-weight:900;
  font-size:12px;
  letter-spacing:.2px;
  color:var(--text);
}

.mono {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.danger {
  border:1px solid rgba(255,180,70,.45);
  background:rgba(255,180,70,.10);
  color:rgba(255,236,200,.92);
  border-radius:12px;
  padding:10px 12px;
  margin-top:10px;
  font-size:12px;
  line-height:1.35;
}

/* Blocks list */
.blockRow {
  border:1px solid rgba(28,49,71,.65);
  background: rgba(6,16,25,.18);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.blockRow:hover {
  transform: translateY(-1px);
}

.blockRow.selected {
  border-color: rgba(246,133,40,.85);
  box-shadow: 0 0 0 3px rgba(246,133,40,.18), 0 10px 30px rgba(0,0,0,.22);
  background: linear-gradient(135deg, rgba(246,133,40,.16), rgba(6,16,25,.14));
}

.blockTop {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.blockName {
  font-weight:950;
  color:#fff;
}

.blockMeta {
  margin-top:6px;
  font-size:12px;
  color:rgba(231,240,248,.78);
}

.blockActions {
  display:flex;
  gap:8px;
  margin-top:10px;
}

.miniBtn {
  border:1px solid rgba(28,49,71,.85);
  background:rgba(6,16,25,.35);
  color:rgba(255,255,255,.92);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
  font-size:12px;
}

.miniBtn.dangerBtn {
  border-color: rgba(255,120,120,.45);
}

.miniBtn:disabled {
  opacity:.55;
  cursor:not-allowed;
}

/* Canvas */
canvas {
  display:block;
  width:100%;
  height:auto;
}

.canvasWrap {
  padding:12px;
}

.canvasHint {
  font-size:12px;
  color:rgba(159,178,198,.9);
  padding:0 12px 12px;
}

/* Right column layout */
.rightStack {
  display:grid;
  gap:14px;
}

.sep {
  height:1px;
  background:rgba(28,49,71,.65);
  margin:12px 0;
}

/* Layout: keep preview to the right (desktop) */
.split {
  display:grid !important;
  grid-template-columns: 420px 1fr !important;
  gap:14px !important;
  align-items:start !important;
}

.split > section.card,
.split > aside.rightStack {
  min-width:0;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr !important;
  }
}

/* Definitive 2-column layout */
.layout {
  display:grid !important;
  grid-template-columns:420px 1fr !important;
  gap:14px !important;
  align-items:start !important;
}

.layout > section.card,
.layout > aside.rightStack {
  min-width:0;
}

@media (max-width: 900px) {
  .layout {
    grid-template-columns:1fr !important;
  }
}

.miniWarn {
  margin-top:8px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.badgeBad {
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(229,57,53,.14);
  border:1px solid rgba(229,57,53,.45);
  color:rgba(255,220,220,.96);
  font-size:12px;
  font-weight:700;
}

.noteBar {
  margin:10px 0 12px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,140,0,.10);
  border:1px solid rgba(255,140,0,.35);
  color:rgba(255,255,255,.92);
  font-size:13px;
}

.totalsRow {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.priceBar {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:12px 16px;
  background:rgba(12,12,14,.92);
  border-top:3px solid var(--brandOrange, #ff7a00);
  box-shadow: 0 -6px 18px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  z-index: 50;
}

.priceBarLeft {
  display:flex;
  flex-direction:column;
  gap:2px;
}

.priceBarTitle {
  font-weight:800;
  letter-spacing:.2px;
}

.priceBarMeta {
  opacity:.8;
  font-size:13px;
}

.priceBarRight {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}

.priceBarPrice {
  font-size:18px;
  font-weight:900;
}

.priceBarNotes {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  opacity:.8;
}

.priceBarDot {
  opacity:.6;
}

.preflightBar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
}

.preflightTitle {
  font-weight:900;
}

.preflightMsg {
  font-size:13px;
  opacity:.85;
  margin-top:2px;
}

.preflightBadge {
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  opacity:.95;
}

.preflightPending {
  border-color: rgba(255,255,255,.14);
}

.preflightPass {
  border-color: rgba(46,204,113,.45);
  background: rgba(46,204,113,.06);
}

.preflightPass .preflightBadge {
  background: rgba(46,204,113,.18);
  border-color: rgba(46,204,113,.45);
}

.preflightFail {
  border-color: rgba(229,57,53,.55);
  background: rgba(229,57,53,.06);
}

.preflightFail .preflightBadge {
  background: rgba(229,57,53,.18);
  border-color: rgba(229,57,53,.55);
}

/* Strong error/warn bar */
#warnBar {
  padding:10px 12px;
  border-radius:12px;
  border:2px solid rgba(255,180,70,.65);
  background: rgba(255,180,70,.14);
  margin-bottom:12px;
  font-weight:700;
}

#warnBar a {
  color:inherit;
  text-decoration:underline;
}

#warnBar.errorStrong {
  border-color: rgba(229,57,53,.95);
  background: rgba(229,57,53,.22);
  color: rgba(255,245,245,.98);
}

/* Modal close button positioning */
#submitModal .modalCard {
  position:relative;
}

#btnCloseModal {
  position:absolute;
  top:12px;
  right:12px;
  z-index:5;
  pointer-events:auto;
}

/* Zoom lens */
.lensbar {
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  margin:10px 0 8px;
}

.lensbar .zbtn {
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:800;
}

.lensbar .hint {
  font-weight:700;
  color:rgba(0,0,0,.65);
  margin-right:auto;
}

#zoomLensWrap {
  position:absolute;
  right:16px;
  bottom:16px;
  width:360px;
  height:240px;
  border:3px solid #ff7a00;
  border-radius:12px;
  background:#fff;
  display:none;
  box-shadow:0 10px 22px rgba(0,0,0,.22);
  z-index:30;
}

#zoomLens {
  width:100%;
  height:100%;
}

/* Padding advanced (disabled look) */
#padTopMm:disabled,
#padRightMm:disabled,
#padBottomMm:disabled,
#padLeftMm:disabled {
  opacity:.65;
  cursor:not-allowed;
}

details#padDetails > summary::-webkit-details-marker {
  display:none;
}

/* Hide Smart selection UI (customer-facing) */
#tol,
#maxpix,
label[for="tol"],
label[for="maxpix"] {
  display:none !important;
}

/* Polished padding panel */
details#padDetails {
  border:1px solid rgba(28,49,71,.65) !important;
  border-radius:16px !important;
  padding:10px 12px !important;
  background: rgba(6,16,25,.18) !important;
}

details#padDetails[open] {
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

details#padDetails > summary {
  cursor:pointer !important;
  list-style:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  font-weight:950 !important;
  padding:2px 2px !important;
  user-select:none;
}

.chev {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  border:1px solid rgba(28,49,71,.65);
  background: rgba(6,16,25,.18);
  transition: transform .15s ease;
  flex: 0 0 auto;
}

details#padDetails[open] .chev {
  transform: rotate(90deg);
}

.padInputs {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:10px;
}

@media (min-width: 900px) {
  .padInputs {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.padInputs label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.unitTag {
  font-size:12px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(28,49,71,.65);
  background: rgba(6,16,25,.18);
  color: rgba(159,178,198,.95);
  font-weight: 800;
}

.switchRow {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(28,49,71,.65);
  background: rgba(6,16,25,.12);
  margin-top:10px;
}

.switch {
  position:relative;
  width:46px;
  height:26px;
  border-radius:999px;
  border:1px solid rgba(28,49,71,.65);
  background: rgba(10,22,35,.55);
  flex:0 0 auto;
}

.switch input {
  opacity:0;
  width:0;
  height:0;
  position:absolute;
}

.switch .knob {
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  transition: transform .15s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}

.switch input:checked + .knob {
  transform: translateX(20px);
}

.switch input:disabled + .knob {
  opacity:.55;
}

.switch:has(input:checked) {
  background: rgba(44,160,110,.55);
}

.padSelected {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(28,49,71,.65);
  background: rgba(6,16,25,.12);
  margin-top:10px;
}

.padSelected .name {
  font-weight:950;
  color:#fff;
}

.padSelected .meta {
  color: rgba(159,178,198,.9);
  font-size:12px;
  margin-top:4px;
}

.padHint {
  margin-top:6px;
  color: rgba(159,178,198,.9);
  font-size:12px;
}

/* Smart selection tidy */
#smartSel .s,
#smartSel .hint {
  display:none !important;
}

#smartSel .form {
  margin-top:8px !important;
}

#smartSel label {
  font-weight:850;
}

/* Thin detail warning banner (non-blocking) */
.thinWarnBanner {
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:2px solid rgba(255,200,80,.55);
  background: rgba(255, 120, 0, .28);
  color: rgba(255,255,255,.95);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  max-width: 720px;
}

.thinWarnTitle {
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 15px;
}

.thinWarnMsg {
  margin-top:6px;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 800;
}

/* ------------------------------------------------------------------------- */
/* Extracted styles from former inline <style> tags                           */
/* ------------------------------------------------------------------------- */

/* make the actual thin-detail hint obvious (non-blocking) */
.thin-detail-warn-box{
  display:block !important;
  margin:10px 0 12px 0 !important;
  padding:14px 16px !important;
  background:#b00020 !important;
  border:2px solid #ff5252 !important;
  border-radius:12px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
  color:#fff !important;
  font-weight:800 !important;
  line-height:1.25 !important;
}
.thin-detail-warn-box:before{
  content:"⚠ Artwork warning: fine detail below 0.1pt";
  display:block;
  font-weight:950;
  font-size:15px;
  margin-bottom:6px;
}
.thin-detail-warn-sub{
  display:block;
  margin-top:6px;
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.85);
}

.warnLine{
  margin-top:6px;
  padding:6px 8px;
  border-radius:10px;
  background:rgba(176,0,32,.12);
  border:1px solid rgba(176,0,32,.35);
  color:#b00020;
  font-weight:800;
  font-size:12px;
}

/* rotation controls in preview header */
.rotControls{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.rotBtn{
  border:1px solid rgba(28,49,71,.85);
  background:rgba(6,16,25,.35);
  color:rgba(255,255,255,.92);
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:950;
  font-size:12px;
  line-height:1;
}
.rotBtn:disabled{opacity:.55; cursor:not-allowed}
.rotLabel{ font-size:12px; color:rgba(231,240,248,.85); font-weight:850; margin-right:2px; }
.rotBtn{ pointer-events:auto !important; }

/* rotate stage */
#rotStage{
  position: relative;
  display: inline-block;
  transform-origin: center center;
  will-change: transform;
}

/* make rotated canvas fill preview window and stay centered */
.canvasWrap{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  overflow:hidden;
}

#rotStage{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  transform-origin:center center;
  margin:0 auto;
}

#rotStage canvas{
  max-width:100%;
  max-height:100%;
  height:auto;
  width:auto;
  display:block;
}

/* make preflight text warnings use the same obvious red treatment */
#warnBar.text-warn-box{
  display:block !important;
  margin:10px 0 12px 0 !important;
  padding:14px 16px !important;
  background:#b00020 !important;
  border:2px solid #ff5252 !important;
  border-radius:12px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
  color:#fff !important;
}
#warnBar.text-warn-box::before{
  content:"⚠ Artwork warning: text at 6pt or below";
  display:block;
  font-weight:950;
  font-size:15px;
  margin-bottom:6px;
}
#warnBar.text-warn-box .xbq-warn-sub{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:rgba(255,255,255,.85);
}

/* UI tidy */
#backendUrl, label[for="backendUrl"], #backendUrlBox, .backendUrlRow, .backend-url-row{
  display:none !important;
}

/* Shoulder UI */
#padDetails .padInputs,
#padDetails .switchRow,
#padDetails .padSelected,
#padDetails .padHint{
  display:none !important;
}
#padDetails summary{ font-size:14px; }
.shoulder-panel{
  margin-top:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(28,49,71,.65);
  background: rgba(6,16,25,.12);
  display:flex;
  align-items:center;
  gap:10px;
}
.shoulder-panel label{ font-weight:900; }
.shoulder-note{ font-size:12px; opacity:.85; margin-top:6px; }

.shoulder-panel, .shoulder-note { display:none !important; }

/* Hide legacy padding/shoulder labels that may still render */
#padDetails .padSelected,
#padDetails .padHint,
#padDetails .switchRow{
  display:none !important;
}

#padDetails .shoulder-grid-note{
  font-size:12px;
  opacity:.85;
  margin-top:6px;
}
#padDetails .shoulder-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:10px;
}
@media (min-width: 900px){
  #padDetails .shoulder-grid{ grid-template-columns:1fr 1fr 1fr 1fr; }
}
#padDetails .shoulder-grid label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#padDetails .shoulder-grid input{ max-width:110px; }
#padDetails .shoulder-edit{
  margin-left:auto;
  border:1px solid rgba(28,49,71,.65);
  background: rgba(6,16,25,.18);
  color: rgba(231,240,248,.95);
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

/* Simplify shoulder header */
#padDetails summary{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}
#padDetails summary .shoulder-edit,
#padDetails summary .legacyEditBtnA,
#padDetails summary .legacyEditBtnB{
  display:none !important;
}
#padDetails .legacyShoulderTitleA,
#padDetails .legacyShoulderTitleB,
#padDetails .legacyShoulderTitleC{
  display:none !important;
}

/* Make shoulder inputs fit neatly inside panel */
#padDetails .shoulder-wrap{ margin-top: 10px; }
#padDetails .shoulder-grid-note{ margin: 0 0 10px 0 !important; }
#padDetails .shoulder-grid{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:10px !important;
  width:100% !important;
}
@media (min-width: 900px){
  #padDetails .shoulder-grid{ grid-template-columns: 1fr 1fr !important; }
}
#padDetails .shoulder-grid label{
  display:grid !important;
  grid-template-columns: 64px minmax(0, 1fr) auto !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
  width:100% !important;
  min-width:0 !important;
}
#padDetails .shoulder-grid input{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}
#padDetails .unitTag{ white-space:nowrap !important; }
@media (max-width: 640px){
  #padDetails .shoulder-grid{ grid-template-columns: 1fr !important; }
}

/* Hide duplicate shoulder hint */
#padDetails .shoulder-grid-note:not(:first-of-type){
  display:none !important;
}

/* Hide CNC/milling areas before JS runs so there is no flicker */
#millingPanel,
#cncPanel,
#cncSummary,
#bottomCncInfo,
[data-cnc-info],
[data-milling-info],
.priceBar .cncInfo,
.priceBar .millingInfo{
  display:none !important;
  visibility:hidden !important;
}

/* Hide headerTag text if present */
.headerTag,
.tagAlt,
.badgeAlt,
#headerTag{
  display:none !important;
}

/* Hide any header text node wrappers commonly used for header labels */
header .tag,
.header-inner .tag{
  display:none !important;
}

/* preview cleanup: remove nested window effect */
.previewBox{
  background: rgba(6,16,25,.22) !important;
}
.previewBox .previewBox{
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.previewBox .card{
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.previewBox .content,
.previewBox .cardBody,
.previewBox .canvasWrap{
  padding: 8px !important;
}
.previewBox .previewHead{
  border-bottom: 1px solid rgba(28,49,71,.45) !important;
}
.previewBox canvas{
  margin: 0 auto !important;
}
.preview-flattened{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* tidy blocks list under preview */
#blocksList,
#rectList,
#diesList{
  display:grid;
  gap:10px;
}

.blockRow{
  border:1px solid rgba(28,49,71,.75) !important;
  background:linear-gradient(180deg, rgba(8,18,28,.55), rgba(6,16,25,.28)) !important;
  border-radius:14px !important;
  padding:12px 12px !important;
  box-shadow:none !important;
}

.blockRow:hover{
  transform:none !important;
  border-color:rgba(246,133,40,.38) !important;
}

.blockRow.selected{
  border-color:rgba(246,133,40,.9) !important;
  background:linear-gradient(180deg, rgba(246,133,40,.16), rgba(6,16,25,.22)) !important;
  box-shadow:0 0 0 2px rgba(246,133,40,.12) !important;
}

.blockTop{
  align-items:center !important;
  gap:12px !important;
}

.blockName{
  font-size:14px !important;
  line-height:1.2 !important;
  letter-spacing:.1px;
}

.blockMeta{
  margin-top:4px !important;
  font-size:12px !important;
  color:rgba(231,240,248,.72) !important;
  line-height:1.35 !important;
}

.blockActions{
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  margin-top:10px !important;
}

.miniBtn{
  border-radius:10px !important;
  padding:7px 10px !important;
  font-size:12px !important;
  line-height:1.1 !important;
}

.miniWarn{
  margin-top:8px !important;
}

.badgeBad{
  font-size:11px !important;
}

#blocksList .mono,
#rectList .mono,
#diesList .mono{
  font-size:12px;
}

.blockMeta br + span,
.blockMeta span{
  display:inline;
}

#blocksListWrap,
#rectListWrap,
#diesListWrap{
  padding-top:2px;
}

.previewBox + .card .content,
.previewBox + .card .cardBody{
  padding-top:10px !important;
}

/* End extracted styles */

/* ------------------------------------------------------------------------- */
/* Overlay/cart/shoulder tweaks (extracted late inline <style> tags)          */
/* ------------------------------------------------------------------------- */

/* hide hints + show/apply minimum charges in cart */
#xccRateNote, #xcdThicknessNote, #xcgRateNote, #xchRateNote { display:none !important; }

/* clean replacement: zoom overlay + review cart overlay */
#zoomLensWrap, #cartView { display:none !important; }

#xclZoomBtn{
  border:1px solid rgba(246,133,40,.72);
  background:linear-gradient(135deg, rgba(246,133,40,.24), rgba(246,133,40,.14));
  color:#fff;
  border-radius:12px;
  padding:8px 12px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
}
#xclOverlay, #xclZoomOverlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:100000;
  background:rgba(5,10,18,.72);
  padding:22px 14px;
  overflow:auto;
}
#xclOverlay.open, #xclZoomOverlay.open{ display:block; }
#xclCard, #xclZoomCard{
  max-width:1200px;
  margin:0 auto;
  background:rgba(15,27,42,.97);
  border:1px solid rgba(28,49,71,.9);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  overflow:hidden;
}
#xclZoomCard{ height:calc(100vh - 44px); display:flex; flex-direction:column; }
.xclHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(28,49,71,.72);
  background:rgba(6,16,25,.22);
}
.xclHeadTitle{ font-size:22px; font-weight:950; }
.xclBody{ padding:16px; }
.xclBtns{ display:flex; gap:10px; flex-wrap:wrap; }
.xclBtns .btn{
  border:1px solid rgba(28,49,71,.9);
  background:rgba(6,16,25,.35);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
}
#xclTableWrap{ overflow:auto; }
#xclTable{ width:100%; border-collapse:collapse; }
#xclTable th, #xclTable td{ padding:10px; border-bottom:1px solid rgba(255,255,255,.08); }
#xclTable th{ text-align:left; }
#xclTable td.num, #xclTable th.num{ text-align:right; }
.xclItemSummary{
  background:rgba(255,255,255,.05);
  font-size:13px;
}
.xclTotals{
  margin-top:16px;
  margin-left:auto;
  max-width:430px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  border-top:3px solid #f68528;
  border-radius:16px;
  padding:14px;
}
.xclTotalsRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin:6px 0;
}
#xclZoomBody{
  flex:1;
  overflow:auto;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:16px;
}
#xclZoomCanvas{
  background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.32);
}

/* ensure Review Cart button is visible */
#xcmReviewCartDock{
  position:fixed;
  right:16px;
  bottom:92px;
  z-index:100002;
  display:flex;
  gap:10px;
  align-items:center;
}
#xcmReviewCartBtn{
  border:1px solid rgba(246,133,40,.72);
  background:linear-gradient(135deg, rgba(246,133,40,.24), rgba(246,133,40,.14));
  color:#fff;
  border-radius:12px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
}
#xcmReviewCartBadge{
  min-width:24px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  background:#f68528;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
}

/* fix duplicate Review Cart and force overlay open */
#btnReviewCart{ display:none !important; }

/* move Review Cart button into bottom banner */
#xcmReviewCartDock{ display:none !important; }
#xcoBottomActions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
#xcoReviewCartBtn{
  border:1px solid rgba(28,49,71,.9);
  background:rgba(6,16,25,.35);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
}
#xcoReviewCartBtn .badge{
  margin-left:8px;
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  background:#f68528;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
}

/* Hide shoulder hint text */
#padDetails .shoulder-grid-note,
#padDetails .xcsNote,
#padDetails .xcrShoulderNote,
#padDetails .shoulder-note,
#padDetails .xctShoulderNote,
#padDetails .xcy-note,
#padDetails .xcz-note{
  display:none !important;
}

/* hide CNC milling info from bottom bar, keep payload export */
#millingPanel,
#cncPanel,
#cncSummary,
#bottomCncInfo,
[data-cnc-info],
[data-milling-info],
.priceBar .cncInfo,
.priceBar .millingInfo{
  display:none !important;
}