:root {
  --workspace-bg: #f3f6fa;
  --workspace-panel: #ffffff;
  --workspace-panel-soft: #f8fafc;
  --workspace-text: #152136;
  --workspace-muted: #65738a;
  --workspace-line: #dce4ee;
  --workspace-accent: #1769e0;
  --workspace-accent-soft: #eaf2ff;
  --workspace-sidebar: 268px;
  --workspace-radius: 16px;
  --workspace-shadow: 0 12px 34px rgba(30, 54, 90, 0.08);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--workspace-bg);
  color: var(--workspace-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

button, a, input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
button:disabled { cursor: not-allowed; opacity: 0.58; }

.workspace-app { min-height: 100vh; }

.workspace-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 76px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--workspace-line);
  backdrop-filter: blur(18px);
}

.workspace-brand {
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  color: var(--workspace-text);
  cursor: pointer;
  text-align: left;
}

.workspace-brand:focus-visible,
.workspace-utilities :focus-visible,
.object-navigation button:focus-visible,
.start-menu summary:focus-visible {
  outline: 3px solid rgba(23, 105, 224, 0.28);
  outline-offset: 3px;
}

.workspace-mark {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.workspace-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.workspace-brand strong,
.workspace-brand small { display: block; }
.workspace-brand strong { font-size: 18px; letter-spacing: -0.01em; }
.workspace-brand small { margin-top: 1px; color: var(--workspace-muted); font-size: 12px; }

.workspace-utilities { display: flex; align-items: center; gap: 6px; }
.workspace-utilities button,
.workspace-utilities a {
  height: 38px;
  min-height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #40516c;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.workspace-utilities button:hover,
.workspace-utilities a:hover { background: var(--workspace-accent-soft); color: var(--workspace-accent); }

.workspace-utilities .workspace-account {
  height: auto;
  min-height: 44px;
  padding-block: 5px;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.05;
}

.workspace-account strong,
.workspace-account span { display: block; }
.workspace-account strong { max-width: 180px; overflow: hidden; text-overflow: ellipsis; color: var(--workspace-text); }
.workspace-account span { color: var(--workspace-muted); font-size: 11px; font-weight: 650; }
.workspace-account:hover strong,
.workspace-account:hover span { color: var(--workspace-accent); }

.workspace-frame {
  min-height: calc(100vh - 76px);
  display: grid;
  grid-template-columns: var(--workspace-sidebar) minmax(0, 1fr);
}

.workspace-taskbar { display: flex; align-items: stretch; gap: 6px; margin-left: auto; padding-left: 18px; border-left: 1px solid var(--line); }
.workspace-taskbar button { display: grid; align-content: center; gap: 2px; min-height: 46px; padding: 5px 12px; text-align: left; border: 0; border-radius: 9px; background: #f7faff; color: var(--ink); }
.workspace-taskbar button:hover, .workspace-taskbar button:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13,103,223,.12); }
.workspace-taskbar strong { color: var(--primary); font-size: 1rem; }
.workspace-taskbar small { color: #60718a; font-weight: 600; }
@media (max-width: 1120px) {
  .workspace-topbar { flex-wrap: wrap; }
  .workspace-taskbar { order: 3; width: 100%; margin: 0; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .workspace-taskbar button { flex: 1 1 0; }
}
@media (max-width: 720px) { .workspace-taskbar { display: grid; grid-template-columns: 1fr; } }

.workspace-sidebar {
  padding: 14px 12px;
  background: #fbfcfe;
  border-right: 1px solid var(--workspace-line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 76px;
  height: calc(100vh - 76px);
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.sidebar-footer {
  margin-top: auto;
  padding-top: 10px;
}
.sidebar-platform-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid var(--workspace-line);
  background: #ffffff;
  color: var(--workspace-text);
  text-decoration: none;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.sidebar-platform-link:hover {
  background: #f8fafc;
  border-color: #0284c7;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}
.sidebar-platform-link .platform-link-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sidebar-platform-link .platform-home-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
  transition: all 0.16s ease;
}
.sidebar-platform-link .platform-home-icon svg {
  width: 14px;
  height: 14px;
}
.sidebar-platform-link:hover .platform-home-icon {
  background: #e0f2fe;
  color: #0284c7;
  border-color: #bae6fd;
}
.sidebar-platform-link .platform-link-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sidebar-platform-link .platform-link-copy strong {
  font-size: 12.5px;
  font-weight: 750;
  color: #0f172a;
  line-height: 1.2;
  white-space: nowrap;
}
.sidebar-platform-link .platform-link-copy small {
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.2;
  white-space: nowrap;
}
.sidebar-platform-link:hover .platform-link-copy small {
  color: #0284c7;
}
.sidebar-platform-link .platform-link-mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  padding: 4px 6px;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
}
.sidebar-platform-link .platform-link-mark img,
.sidebar-platform-link .platform-link-mark svg {
  width: 34px;
  height: auto;
  max-height: 16px;
  display: block;
  object-fit: contain;
}
.sidebar-platform-link:hover .platform-link-mark {
  border-color: #cbd5e1;
  background: #f1f5f9;
}

.sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; }
.sidebar-heading > span { color: var(--workspace-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.sidebar-toggle { width: 30px; height: 30px; border: 1px solid var(--workspace-line); border-radius: 8px; background: #fff; color: var(--workspace-muted); cursor: pointer; font-size: 18px; }

.start-menu { margin-bottom: 14px; }
.start-menu summary {
  min-height: 46px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  border-radius: 11px;
  background: var(--workspace-accent);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
}
.start-menu summary::-webkit-details-marker { display: none; }
.start-menu summary::after { content: "+"; font-size: 18px; }
.start-menu[open] summary::after { content: "–"; }
.start-actions { margin-top: 7px; padding: 7px; border: 1px solid var(--workspace-line); border-radius: 11px; background: #fff; box-shadow: var(--workspace-shadow); }
.start-actions a { display: block; padding: 9px 10px; border-radius: 7px; color: #40516c; font-size: 13px; font-weight: 650; }
.start-actions button { width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: #40516c; cursor: pointer; font-size: 13px; font-weight: 650; text-align: left; }
.start-actions a:hover, .start-actions button:hover { background: var(--workspace-panel-soft); color: var(--workspace-accent); }

.object-navigation { display: grid; gap: 2px; }
.object-navigation button {
  width: 100%;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #42516a;
  cursor: pointer;
  text-align: left;
}
.object-navigation button:hover,
.object-navigation button[aria-current="page"] { background: var(--workspace-accent-soft); color: #0d57ba; }
.tool-navigation { margin-top: 0; padding-top: 0; border-top: none; }
.nav-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 6px; flex-shrink: 0; }
.nav-icon svg { width: 16px; height: 16px; stroke: currentColor; }
.nav-copy strong, .nav-copy small { display: block; }
.nav-copy strong { font-size: 13px; }
.nav-copy small { margin-top: 1px; color: var(--workspace-muted); font-size: 11px; font-weight: 550; }

.workspace-main {
  min-width: 0;
  width: 100%;
  padding: 40px clamp(24px, 3vw, 56px) 70px;
  outline: none;
}
.workspace-main:focus,
.workspace-main:focus-visible {
  outline: none;
}
.workspace-view { width: 100%; margin: 0; }
.workspace-view[hidden] { display: none; }

.view-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.view-heading__actions { display: flex; align-items: center; gap: 10px; }
.eyebrow { margin: 0 0 6px; color: var(--workspace-accent); font-size: 10.5px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: 26px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 800; }
h2 { margin-bottom: 8px; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -0.02em; }
.view-heading p:last-child { max-width: 740px; margin-bottom: 0; color: var(--workspace-muted); font-size: 14px; line-height: 1.45; }
.primary-action { min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 11px; background: var(--workspace-accent); color: #fff; cursor: pointer; font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 20px rgba(23, 105, 224, 0.2); }
.danger-action { color: #9f1d20; border-color: #d8a0a2; background: #fff; }
.danger-action:hover { background: #fff1f1; }
.dml-geometry-viewer { position: relative; min-height: 420px; display: grid; grid-template-rows: 1fr auto auto; }
.dml-geometry-viewer canvas { width: 100%; min-height: 360px; cursor: grab; touch-action: none; }
.dml-geometry-viewer canvas:active { cursor: grabbing; }
.dml-geometry-viewer__status { padding: 10px 14px; color: var(--workspace-muted); font-size: 12px; }
.dml-geometry-viewer__controls { display: flex; gap: 8px; padding: 0 14px 14px; }
.secondary-action { min-height: 42px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--workspace-line); border-radius: 10px; background: #fff; color: #334761; cursor: pointer; font-size: 13px; font-weight: 800; }
.text-action { padding: 0; border: 0; background: transparent; color: var(--workspace-accent); cursor: pointer; font-weight: 750; }

.workspace-notice { margin: -10px 0 24px; padding: 13px 16px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid #cfe0f6; border-radius: 12px; background: #eef6ff; }
.workspace-notice[hidden] { display: none; }
.workspace-notice[data-kind="error"] { border-color: #f1c6c3; background: #fff3f2; }
.workspace-notice[data-kind="warning"] { border-color: #efdbaa; background: #fff9e9; }
.workspace-notice[data-kind="signed-out"] { border-color: #d5dce6; background: #f7f9fc; }
.notice-dot { width: 9px; height: 9px; margin-top: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--workspace-accent); }
.workspace-notice[data-kind="error"] .notice-dot { background: #c6332e; }
.workspace-notice[data-kind="warning"] .notice-dot { background: #b16a00; }
.workspace-notice p, .workspace-notice strong, .workspace-notice span { display: block; margin: 0; }
.workspace-notice span { margin-top: 2px; color: var(--workspace-muted); font-size: 13px; }

.status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.summary-card { min-height: 176px; padding: 20px; border: 1px solid var(--workspace-line); border-radius: var(--workspace-radius); background: var(--workspace-panel); box-shadow: var(--workspace-shadow); }
.summary-card.attention { border-color: #c8dcfb; background: linear-gradient(145deg, #fff 0%, #f1f7ff 100%); }
.summary-card .card-kicker { display: block; color: var(--workspace-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.summary-card strong { display: block; margin-top: 24px; font-size: 18px; }
.summary-card p { margin: 8px 0 0; color: var(--workspace-muted); font-size: 13px; }

.launch-section { margin-top: 28px; padding: 28px; border: 1px solid var(--workspace-line); border-radius: 20px; background: var(--workspace-panel); box-shadow: var(--workspace-shadow); }
.section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section-title p:last-child { max-width: 540px; margin-bottom: 7px; color: var(--workspace-muted); font-size: 13px; }
.launch-grid, .commerce-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.launch-grid a, .launch-grid button, .commerce-grid a { min-height: 150px; padding: 18px; border: 1px solid var(--workspace-line); border-radius: 13px; background: var(--workspace-panel-soft); color: inherit; cursor: pointer; text-align: left; transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease; }
.launch-grid a:hover, .launch-grid button:hover, .commerce-grid a:hover { transform: translateY(-2px); border-color: #a9c8f3; box-shadow: 0 12px 24px rgba(34, 67, 112, 0.09); }
.launch-grid span, .launch-grid button span, .commerce-grid span { color: var(--workspace-accent); font-size: 11px; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; }
.launch-grid strong, .launch-grid small, .commerce-grid strong, .commerce-grid small { display: block; }
.launch-grid strong, .commerce-grid strong { margin-top: 15px; font-size: 16px; }
.launch-grid small, .commerce-grid small { margin-top: 7px; color: var(--workspace-muted); line-height: 1.45; }

.architecture-strip { margin-top: 22px; padding: 18px 22px; display: grid; grid-template-columns: 1fr auto 2fr auto 1.3fr; align-items: center; gap: 18px; border: 1px solid #cfe0f6; border-radius: 14px; background: #eef6ff; }
.architecture-strip div { min-width: 0; }
.architecture-strip strong, .architecture-strip span { display: block; }
.architecture-strip strong { font-size: 13px; }
.architecture-strip span { margin-top: 3px; color: var(--workspace-muted); font-size: 11px; }
.architecture-strip i { color: var(--workspace-accent); font-size: 20px; font-style: normal; }

.empty-panel { min-height: 360px; padding: 50px; display: grid; place-items: center; align-content: center; text-align: center; border: 1px dashed #b9c8da; border-radius: 18px; background: rgba(255, 255, 255, 0.72); }
.empty-panel > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px; background: var(--workspace-accent-soft); color: var(--workspace-accent); font-size: 24px; }
.empty-panel h2 { margin: 18px 0 7px; }
.empty-panel p { max-width: 650px; margin-bottom: 0; color: var(--workspace-muted); }

.commerce-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.subsystem-note { margin-top: 22px; padding: 20px 22px; border-left: 4px solid var(--workspace-accent); border-radius: 0 12px 12px 0; background: #eef6ff; }
.subsystem-note p { margin: 5px 0 0; color: var(--workspace-muted); }

.manufacturing-workbench { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: 20px; }
.model-viewer-panel, .configuration-panel, .settings-editor, .destination-panel, .review-progress {
  padding: 22px; border: 1px solid var(--workspace-line); border-radius: 18px; background: #fff; box-shadow: var(--workspace-shadow);
}

[hidden] { display: none !important; }
.model-viewer { min-height: 520px; display: grid; place-content: center; justify-items: center; gap: 8px; border-radius: 14px;
  background: radial-gradient(circle at 50% 35%, #fff 0%, #f1f5fa 70%); color: var(--workspace-muted); text-align: center; }
.model-viewer > span { color: var(--workspace-accent); font-size: 54px; }
.model-viewer canvas { width: 100%; height: 100%; min-height: 520px; }
.viewer-controls { margin-top: 12px; display: flex; justify-content: flex-end; gap: 8px; }
.viewer-controls button, .configuration-panel button, .settings-editor button, .destination-panel button {
  min-height: 38px; padding: 0 13px; border: 1px solid var(--workspace-line); border-radius: 9px; background: #fff; cursor: pointer; font-weight: 750;
}
.configuration-panel { display: grid; align-content: start; gap: 14px; }
.configuration-panel label, .settings-editor label, .destination-panel label { display: grid; gap: 7px; color: #344761; font-size: 12px; font-weight: 800; }
.configuration-panel input, .configuration-panel select, .settings-editor input, .settings-editor select,
.destination-panel input, .destination-panel select { width: 100%; padding: 11px 12px; border: 1px solid #cbd7e5; border-radius: 9px; background: #fff; }
.calculation-status { padding: 13px 14px; border-radius: 10px; background: var(--workspace-panel-soft); color: #475a73; font-size: 13px; }
.calculation-status[data-state="error"] { background: #fff3f2; color: #9a302b; }
.calculation-status[data-state="success"] { background: #eaf8ef; color: #16663b; }
.quote-summary { padding: 15px; border: 1px solid #bdd5f4; border-radius: 11px; background: #eef6ff; }
.quote-summary[hidden] { display: none; }
.quote-summary strong, .quote-summary span { display: block; }
.quote-summary strong { font-size: 22px; }
.quote-summary span { margin-top: 5px; color: var(--workspace-muted); font-size: 12px; }
.settings-editor { max-width: 720px; margin-bottom: 20px; display: grid; gap: 14px; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 20px; align-items: start; }
.destination-panel { display: grid; gap: 12px; position: sticky; top: 92px; }
.destination-panel h2 { margin-bottom: 4px; }
.cart-line { grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: start; }
.cart-line input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; }
.record-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.record-actions button { min-height: 34px; padding: 0 11px; border: 1px solid #bfd1e8; border-radius: 8px; background: #fff; color: #145fc8; cursor: pointer; font-weight: 800; }
.record-actions .danger-action { color: #9f1d20; border-color: #d8a0a2; }
.record-actions .danger-action:hover { background: #fff1f1; }
.record-actions .danger-action:disabled { color: #8b98a8; border-color: #d9e2ec; background: #f4f7fb; cursor: not-allowed; }
.record-status-action { padding: 5px 8px; border: 0; border-radius: 999px; background: #fff0e6; color: #9f3e13; cursor: pointer; font-size: 10px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.record-status-action:hover { background: #ffe2cf; }
.draft-order-summary { margin-bottom: 24px; padding: 18px 20px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 16px; border: 1px solid var(--workspace-line); border-radius: 16px; background: #fff; box-shadow: var(--workspace-shadow); }
.draft-order-summary > div { min-width: 0; }
.draft-order-summary .card-kicker { display: block; color: var(--workspace-muted); font-size: 10px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.draft-order-summary strong { display: block; margin-top: 7px; overflow-wrap: anywhere; color: #14233b; font-size: 14px; }
.completed-order-summary { margin-bottom: 24px; padding: 18px 20px; display: grid; grid-template-columns: 1.2fr .8fr 1fr .8fr .8fr; gap: 16px; border: 1px solid var(--workspace-line); border-radius: 16px; background: #fff; box-shadow: var(--workspace-shadow); }
.completed-order-summary > div { min-width: 0; }
.completed-order-summary .card-kicker { display: block; color: var(--workspace-muted); font-size: 10px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.completed-order-summary strong { display: block; margin-top: 7px; overflow-wrap: anywhere; color: #14233b; font-size: 14px; }
.completed-order-line dl { margin: 14px 0 0; padding-top: 13px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 18px; border-top: 1px solid var(--workspace-line); }
.completed-order-line dl div { min-width: 0; }
.completed-order-line dt { color: var(--workspace-muted); font-size: 10px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.completed-order-line dd { margin: 3px 0 0; overflow-wrap: anywhere; color: #2d405b; font-size: 12px; }
.draft-order-lines-heading { margin-bottom: 14px; align-items: flex-start; }
.draft-order-lines-heading p { max-width: 680px; margin: 5px 0 0; color: var(--workspace-muted); font-size: 13px; }
.orders-subheading { margin-top: 32px; }
.review-progress ol { margin: 0; padding-left: 23px; display: grid; gap: 13px; color: #344761; }
.review-progress li::marker { color: var(--workspace-accent); font-weight: 850; }
.review-progress > p { margin: 20px 0; padding: 14px; border-radius: 10px; background: var(--workspace-panel-soft); color: #475a73; }

.object-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.object-grid > .empty-panel { grid-column: 1 / -1; }
.object-grid.is-condensed { display: none; }

/* ==================== MODULE: 3D MODEL CARD & GRID (S518) ==================== */
.models-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 0 20px;
  flex-wrap: wrap;
}

.models-toolbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-pills {
  display: inline-flex;
  padding: 3px;
  background: #f1f5f9;
  border-radius: 9px;
  gap: 2px;
  border: 1px solid #e2e8f0;
}

.filter-pills button {
  padding: 6px 14px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-pills button:hover {
  color: #00143c;
}

.filter-pills button[aria-pressed="true"] {
  background: #ffffff;
  color: #00143c;
  box-shadow: 0 1px 4px rgba(0, 20, 60, 0.08);
}

.models-search-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 36px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #64748b;
  width: 240px;
  transition: all 0.15s ease;
}

.models-search-bar:focus-within {
  border-color: #00aff8;
  box-shadow: 0 0 0 3px rgba(0, 175, 248, 0.15);
  color: #00143c;
}

.models-search-bar input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  width: 100%;
  color: #00143c;
}

.models-search-bar input::placeholder {
  color: #94a3b8;
}

.models-toolbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.view-switcher {
  display: inline-flex;
  padding: 2px;
  background: #f1f5f9;
  border-radius: 8px;
  gap: 2px;
  border: 1px solid #e2e8f0;
}

.view-switcher__btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.view-switcher__btn:hover {
  color: #00143c;
}

.view-switcher__btn.is-active {
  background: #ffffff;
  color: #00143c;
  box-shadow: 0 1px 4px rgba(0, 20, 60, 0.08);
}

/* --- Model Card Container --- */
.model-card {
  min-width: 0;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #d5e0ee;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 20, 60, 0.04);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}

.model-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 20, 60, 0.09);
  border-color: #00aff8;
}

/* --- 3D Viewport Stage --- */
.model-card__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, #f8fafd 0%, #eef3f9 100%);
  overflow: visible;
  border-bottom: 1px solid #e2eaf4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.model-card__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 3;
  pointer-events: none;
}

/* --- Format Badge (Atomic Component) --- */
.format-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
  pointer-events: auto;
}

.format-badge--inline {
  display: none;
  margin-right: 6px;
  flex-shrink: 0;
}

.format-badge--stl {
  background: #e0f2fe;
  color: #0284c7;
  border: 1px solid #bae6fd;
}

.format-badge--3mf {
  background: #ede9fe;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
}

.format-badge--step {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fde68a;
}

.format-badge--obj {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.format-badge--generic {
  background: #e0f2fe;
  color: #0284c7;
  border: 1px solid #bae6fd;
}

/* --- Status Pill (Atomic Component) --- */
.model-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
  pointer-events: auto;
}

.model-status-pill .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.model-status-pill--ready {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.model-status-pill--ready .status-dot {
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}

.model-status-pill--verify {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

.model-status-pill--verify .status-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

.model-status-pill--ineligible {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.model-status-pill--ineligible .status-dot {
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
}

/* --- Viewport & 3D Vector Geometry --- */
.model-card__viewport {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 13px 13px 0 0;
}

.model-viewport-svg,
.model-viewport-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.model-viewport-img {
  padding: 8px;
}

.model-card:hover .model-viewport-svg,
.model-card:hover .model-viewport-img {
  transform: scale(1.03) translateY(-2px);
}

.model-card__inspect-hint {
  position: absolute;
  bottom: 8px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(0, 20, 60, 0.76);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 11px;
  font-weight: 750;
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.2s ease;
  cursor: pointer;
  z-index: 2;
}

.model-card:hover .model-card__inspect-hint {
  opacity: 1;
  transform: translateY(0);
}

/* --- Model Card Body --- */
.model-card__body {
  padding: 16px 16px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.model-card__title-row {
  min-height: 40px;
  display: flex;
  align-items: flex-start;
}

.model-card__title {
  margin: 0 !important;
  font-size: 14.5px !important;
  font-weight: 750 !important;
  color: #00143c !important;
  line-height: 1.38 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}

.model-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f1f5f9;
  padding: 3px 7px;
  border-radius: 5px;
  font-weight: 650;
  color: #475569;
  font-size: 11px;
}

.meta-tag .meta-icon {
  font-size: 10px;
}

.meta-tag--time {
  margin-left: auto;
  color: #64748b;
}

.model-card__id-subtext {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #94a3b8;
}

.id-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  background: #f8fafc;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  color: #64748b;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Model Card Actions (Scheme C: Balanced 50/50 Dual Action Layout with Soft Tint) --- */
.model-card__actions {
  padding: 12px 14px 14px;
  border-top: 1px solid #edf2f7;
  background: #fafcff;
  display: grid;
  grid-template-columns: 1fr 1fr 36px;
  gap: 8px;
  align-items: center;
}

.btn-trash-model {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff !important;
  color: #94a3b8 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: none !important;
}

.btn-trash-model:hover {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
  transform: translateY(-1px);
}

.btn-trash-model svg {
  stroke: currentColor;
}

.btn-slice-quote {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #eff6ff !important;
  background-image: none !important;
  color: #0066cc !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: none !important;
}

.btn-slice-quote:hover {
  background: #0066cc !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #0066cc !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 102, 204, 0.22) !important;
}

.btn-slice-quote svg {
  color: #0066cc;
  stroke: #0066cc;
  transition: transform 0.15s ease, color 0.15s ease, stroke 0.15s ease;
}

.btn-slice-quote svg polygon {
  stroke: currentColor;
}

.btn-slice-quote:hover svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  transform: scale(1.08);
}

.btn-slice-quote:hover svg polygon {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.btn-open-model {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-open-model:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #00143c !important;
  transform: translateY(-1px);
}

.btn-model-action--primary {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #eff6ff !important;
  color: #0066cc !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-model-action--secondary {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* --- Model Upload Dropzone Card --- */
.model-upload-card {
  min-width: 0;
  border: 2px dashed #93c5fd;
  border-radius: 14px;
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 290px;
}

.model-upload-card:hover {
  border-color: #00aff8;
  background: #e0f2fe;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 175, 248, 0.15);
}

.upload-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  color: #00aff8;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0, 175, 248, 0.18);
  transition: transform 0.2s ease;
}

.model-upload-card:hover .upload-icon-circle {
  transform: scale(1.08) translateY(-2px);
}

.model-upload-card h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: #00143c;
}

.model-upload-card p {
  margin: 0 0 12px;
  font-size: 12px;
  color: #475569;
}

.upload-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ffffff;
  color: #0284c7;
  font-size: 11px;
  font-weight: 750;
  border: 1px solid #bae6fd;
}

/* --- List View Mode (High Density Table/Row View) --- */
.object-grid.is-list-view {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.object-grid.is-list-view .model-upload-card {
  display: none;
}

.object-grid.is-list-view .model-card {
  flex-direction: row !important;
  align-items: center !important;
  padding: 10px 16px !important;
  aspect-ratio: unset !important;
  min-height: 70px;
}

.object-grid.is-list-view .model-card__stage {
  width: 72px !important;
  height: 72px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 9px !important;
  flex-shrink: 0 !important;
  border: 1px solid #dbeafe !important;
}

.object-grid.is-list-view .model-card__badges,
.object-grid.is-list-view .model-card__inspect-hint {
  display: none !important;
}

.object-grid.is-list-view .model-card__body {
  padding: 0 16px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.object-grid.is-list-view .format-badge--inline {
  display: inline-flex !important;
}

.object-grid.is-list-view .model-card__title-row {
  min-height: unset !important;
  flex: 1;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.object-grid.is-list-view .model-card__title {
  -webkit-line-clamp: 1 !important;
  font-size: 14px !important;
}

.object-grid.is-list-view .model-card__actions {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  flex-shrink: 0 !important;
}

.object-card { min-width: 0; padding: 21px; border: 1px solid var(--workspace-line); border-radius: var(--workspace-radius); background: var(--workspace-panel); box-shadow: var(--workspace-shadow); }
.object-card__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.object-glyph { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--workspace-accent-soft); color: var(--workspace-accent); }
.status-pill { max-width: 100%; padding: 5px 8px; border-radius: 999px; background: #edf2f7; color: #58687e; font-size: 10px; font-weight: 850; letter-spacing: 0.04em; text-transform: uppercase; }
.status-pill[data-state*="READY"], .status-pill[data-state*="APPROVED"], .status-pill[data-state*="SELECTED"] { background: #e5f6ed; color: #16663b; }
.status-pill[data-state*="REVIEW"], .status-pill[data-state*="ATTENTION"], .status-pill[data-state*="BLOCKED"] { background: #fff0e6; color: #9f3e13; }
.object-card h2 { margin: 19px 0 7px; font-size: 20px; }
.object-card > p { min-height: 42px; color: var(--workspace-muted); font-size: 13px; }
.object-card dl { margin: 18px 0 0; padding-top: 15px; display: grid; gap: 8px; border-top: 1px solid var(--workspace-line); }
.object-card dl div { min-width: 0; display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; }
.object-card dt { color: var(--workspace-muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.object-card dd { margin: 0; overflow-wrap: anywhere; color: #2d405b; font-size: 12px; }
.card-actions { margin-top: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.card-actions button, .card-actions a { min-height: 34px; padding: 0 11px; display: inline-flex; align-items: center; border: 1px solid #bfd1e8; border-radius: 8px; background: #fff; color: #145fc8; cursor: pointer; font-size: 12px; font-weight: 800; }
.object-menu { position: relative; }
.object-menu summary { min-height: 34px; padding: 0 11px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #bfd1e8; border-radius: 8px; background: #fff; color: #145fc8; cursor: pointer; font-size: 12px; font-weight: 800; list-style: none; }
.object-menu summary::-webkit-details-marker { display: none; }
.object-menu__panel { width: min(260px, calc(100vw - 48px)); padding: 7px; position: absolute; z-index: 8; left: 0; top: calc(100% + 6px); display: grid; gap: 5px; border: 1px solid var(--workspace-line); border-radius: 10px; background: #fff; box-shadow: 0 14px 35px rgba(22, 48, 82, .16); }

.model-card .object-menu__panel {
  right: 0;
  left: auto;
  top: auto;
  bottom: calc(100% + 6px);
  z-index: 60;
  width: 220px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.16), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
  display: grid;
  gap: 4px;
}
.object-menu__panel button {
  width: 100%;
  justify-content: flex-start;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #334155;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.object-menu__panel button:hover, .object-menu__panel button:focus-visible {
  background: #f1f5f9;
  color: #0284c7;
}
.skeleton-card, .skeleton-row { border-radius: var(--workspace-radius); background: linear-gradient(90deg, #e9eef5 25%, #f6f8fb 37%, #e9eef5 63%); background-size: 400% 100%; animation: workspace-shimmer 1.25s ease infinite; }
.skeleton-card { min-height: 220px; }
.skeleton-row { min-height: 92px; }
@keyframes workspace-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.project-detail { padding: 26px; border: 1px solid var(--workspace-line); border-radius: 18px; background: #fff; box-shadow: var(--workspace-shadow); }
.project-detail[hidden] { display: none; }
.detail-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.project-detail > h2 { margin-top: 7px; font-size: 30px; }
.project-detail > p:not(.eyebrow) { max-width: 760px; color: var(--workspace-muted); }
.detail-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--workspace-line); }
.detail-source { color: var(--workspace-muted); font-size: 12px; }
.detail-section h3 { margin: 0 0 14px; font-size: 17px; }
.detail-section form, .workspace-dialog form { display: grid; gap: 14px; }
.detail-section label, .workspace-dialog label { display: grid; gap: 7px; color: #344761; font-size: 12px; font-weight: 800; }
.detail-section input, .detail-section textarea, .detail-section select, .workspace-dialog input, .workspace-dialog textarea, .workspace-dialog select { width: 100%; padding: 11px 12px; border: 1px solid #cbd7e5; border-radius: 9px; background: #fff; color: var(--workspace-text); resize: vertical; }
.detail-section input:focus, .detail-section textarea:focus, .detail-section select:focus, .workspace-dialog input:focus, .workspace-dialog textarea:focus, .workspace-dialog select:focus { border-color: var(--workspace-accent); outline: 3px solid rgba(23, 105, 224, 0.14); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.canonical-intake, .optional-fields { display: grid; gap: 14px; }
.optional-fields { padding: 13px 14px; border: 1px solid var(--workspace-line); border-radius: 11px; background: var(--workspace-panel-soft); }
.optional-fields summary { cursor: pointer; color: #344761; font-size: 12px; font-weight: 850; }
.optional-fields[open] summary { margin-bottom: 2px; }
.intake-summary { margin: 14px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 16px; }
.intake-summary div { min-width: 0; padding: 10px 12px; border-radius: 9px; background: var(--workspace-panel-soft); }
.intake-summary dt { color: var(--workspace-muted); font-size: 10px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.intake-summary dd { margin: 4px 0 0; overflow-wrap: anywhere; color: #2d405b; font-size: 12px; }
.reference-selector { margin: 0; padding: 12px; border: 1px solid var(--workspace-line); border-radius: 10px; display: grid; gap: 8px; }
.continuation-choice { margin: 0; padding: 14px; border: 1px solid var(--workspace-line); border-radius: 11px; display: grid; gap: 10px; background: var(--workspace-panel-soft); }
.continuation-choice legend { padding: 0 6px; color: #344761; font-size: 12px; font-weight: 850; }
.continuation-reference-option { grid-template-columns: auto minmax(0, 1fr) !important; align-items: start; padding: 9px 10px; border: 1px solid #dbe5ef; border-radius: 9px; background: #fff; }
.continuation-reference-option input, .continuation-confirmation__check input { width: auto; margin: 2px 0 0; padding: 0; }
.continuation-reference-option span { display: grid; gap: 3px; min-width: 0; }
.continuation-reference-option small { color: var(--workspace-muted); font-weight: 600; overflow-wrap: anywhere; }
.continuation-confirmation { padding: 13px 14px; border-left: 3px solid var(--workspace-accent); border-radius: 8px; background: #eef6ff; }
.continuation-confirmation > p { margin: 7px 0 10px; color: #344761; font-size: 12px; overflow-wrap: anywhere; }
.continuation-confirmation__check { grid-template-columns: auto minmax(0, 1fr) !important; align-items: start; }
.selection-warning { margin: 0; color: #8c3f16; font-size: 12px; font-weight: 700; }
.reference-selector legend { padding: 0 6px; color: #344761; font-size: 12px; font-weight: 800; }
.reference-annotation { padding: 11px; display: grid; gap: 10px; border-radius: 9px; background: #f7faff; }
.reference-draft { padding: 12px; display: grid; gap: 11px; border: 1px solid #d9e3ef; border-radius: 9px; background: #f7faff; }
.reference-annotation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.detail-section .reference-choice { grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 9px; padding: 0; }
.detail-section .reference-choice input { width: 16px; height: 16px; margin-top: 2px; padding: 0; }
.reference-choice span { display: grid; gap: 2px; }
.reference-choice small { color: var(--workspace-muted); font-weight: 500; overflow-wrap: anywhere; }
.detail-section .check-control { display: flex; grid-template-columns: none; align-items: center; gap: 7px; font-weight: 650; }
.detail-section .check-control input { width: 16px; height: 16px; padding: 0; }
.annotation-flags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.detail-section .annotation-flags label { display: flex; grid-template-columns: none; align-items: center; gap: 7px; font-weight: 650; }
.detail-section .annotation-flags input { width: 16px; height: 16px; padding: 0; }
.inline-upload { margin-top: 14px; grid-template-columns: minmax(130px, .55fr) minmax(220px, 1.45fr) auto; align-items: end; }
.inline-upload .form-status { grid-column: 1 / -1; }
.form-actions, .dialog-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.form-status { min-height: 20px; margin: 0; color: #a73a2f; font-size: 12px; }
.form-help, .quiet { margin: 0; color: var(--workspace-muted); font-size: 12px; }
.record-list { display: grid; gap: 10px; }
.record-list article { padding: 15px; border: 1px solid var(--workspace-line); border-radius: 11px; background: var(--workspace-panel-soft); }
.record-list article.is-deep-linked { border-color: var(--workspace-accent); box-shadow: 0 0 0 3px rgba(23, 105, 224, 0.14); }
.record-list article > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.record-list article > div:first-child span { color: var(--workspace-accent); font-size: 10px; font-weight: 850; }
.record-list p { margin: 7px 0; color: #475a73; font-size: 13px; }
.record-list small { color: var(--workspace-muted); }

/* S518: Slice History SaaS Data Table */
.slice-history-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.slice-history-toolbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.slice-search-bar {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 240px;
}

.slice-search-bar svg {
  position: absolute;
  left: 10px;
  color: #94a3b8;
  pointer-events: none;
}

.slice-search-bar input {
  width: 100%;
  height: 34px;
  padding: 0 12px 0 32px;
  border: 1px solid rgba(0, 20, 60, 0.12);
  border-radius: 999px;
  background: #ffffff;
  font-size: 13px;
  color: #00143c;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.slice-search-bar input:focus {
  border-color: #00aff8;
  box-shadow: 0 0 0 3px rgba(0, 175, 248, 0.12);
}

.slice-history-counter {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}

.record-list.slice-table-container {
  display: block;
  background: #ffffff;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0, 20, 60, 0.03);
  overflow: hidden;
}

.slice-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.slice-data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
  line-height: 1.4;
}

.slice-data-table thead {
  background: #f8fafc;
  border-bottom: 1px solid rgba(0, 20, 60, 0.08);
}

.slice-data-table th {
  padding: 12px 10px;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  white-space: nowrap;
}

.slice-data-table th.th-model { width: 22%; min-width: 170px; }
.slice-data-table th.th-specs { width: 34%; min-width: 240px; }
.slice-data-table th.th-quote { width: 11%; text-align: right; }
.slice-data-table th.th-status { width: 11%; }
.slice-data-table th.th-time { width: 10%; }
.slice-data-table th.th-actions { width: 12%; text-align: right; }

.slice-data-table tbody tr {
  border-bottom: 1px solid rgba(0, 20, 60, 0.05);
  transition: background 0.15s ease;
}

.slice-data-table tbody tr:last-child {
  border-bottom: none;
}

.slice-data-table tbody tr:hover {
  background: rgba(0, 175, 248, 0.025);
}

.slice-data-table td {
  padding: 12px 10px;
  vertical-align: middle;
}

.slice-data-table td:first-child {
  padding-left: 16px;
}

.slice-data-table td:last-child {
  padding-right: 16px;
}

.slice-model-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slice-model-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.slice-model-title {
  font-weight: 750;
  font-size: 13px;
  color: #00143c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.slice-sub-ids {
  display: flex;
  align-items: center;
  gap: 6px;
}

.slice-id-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: #64748b;
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 4px;
}

.slice-cfg-tag {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}

.slice-specs-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.material-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
}

.tech-tag {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 5px;
  background: #e2e8f0;
  color: #334155;
  border-radius: 4px;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.material-name {
  font-weight: 700;
  color: #1e293b;
  font-size: 13px;
  white-space: nowrap;
}

.specs-subtext {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
}

.qty-badge {
  font-weight: 750;
  color: #0284c7;
  background: rgba(0, 175, 248, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
}

.slice-quote-cell {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.quote-amount {
  font-weight: 850;
  font-size: 15px;
  color: #00143c;
  letter-spacing: -0.01em;
}

.quote-currency {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

.unit-price {
  font-size: 11.5px;
  color: #94a3b8;
}

.slice-date-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.slice-date-day {
  font-size: 12px;
  font-weight: 650;
  color: #1e293b;
  white-space: nowrap;
}

.slice-date-clock {
  font-size: 11px;
  font-weight: 550;
  color: #64748b;
  white-space: nowrap;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.status-pill--multiline {
  align-items: flex-start;
  padding: 4px 9px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
}

.status-pill--multiline .status-dot {
  margin-top: 3px;
  flex-shrink: 0;
}

.status-pill__text {
  display: flex;
  flex-direction: column;
}

.status-pill__text span {
  white-space: nowrap;
}

.status-pill .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-pill--purchased {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}
.status-pill--purchased .status-dot {
  background: #10b981;
}

.status-pill--draft {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}
.status-pill--draft .status-dot {
  background: #f59e0b;
}

.status-pill--ready {
  background: rgba(0, 175, 248, 0.1);
  color: #0284c7;
}
.status-pill--ready .status-dot {
  background: #00aff8;
}

.status-pill--removed {
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
}
.status-pill--removed .status-dot {
  background: #94a3b8;
}

.slice-time {
  font-size: 12.5px;
  color: #64748b;
  white-space: nowrap;
}

.slice-actions-cluster {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.table-badge-purchased {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 750;
  color: #059669;
  padding: 4px 8px;
}

.btn-table-primary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 7px;
  border: none;
  background: linear-gradient(135deg, #00aff8 0%, #0088ea 100%);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 175, 248, 0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  white-space: nowrap;
}

.btn-table-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 175, 248, 0.35);
}

.btn-table-action {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid rgba(0, 175, 248, 0.35);
  background: #ffffff;
  color: #0284c7;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}

.btn-table-action:hover {
  background: rgba(0, 175, 248, 0.06);
  border-color: #00aff8;
}

.btn-table-secondary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid rgba(0, 20, 60, 0.12);
  background: #f8fafc;
  color: #334155;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}

.btn-table-secondary:hover {
  background: #f1f5f9;
  border-color: rgba(0, 20, 60, 0.22);
}
.history-detail { margin-top: 18px; padding: 20px; border: 1px solid #bfd1e8; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px rgba(20, 52, 92, 0.08); }
.history-detail h2 { margin: 5px 0 10px; }
.history-detail dl { display: grid; grid-template-columns: minmax(130px, 0.5fr) minmax(220px, 1fr); gap: 8px 16px; margin: 16px 0; }
.history-detail dt { color: var(--workspace-muted); font-size: 12px; font-weight: 800; }
.history-detail dd { margin: 0; color: #23354d; overflow-wrap: anywhere; }

/* S518: Updates Dual-Column Dashboard Layout */
.updates-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(380px, 460px);
  gap: 28px;
  align-items: start;
}

@media (min-width: 1800px) {
  .updates-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(500px, 640px);
    gap: 36px;
  }
}

@media (max-width: 1024px) {
  .updates-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.updates-feed-column {
  min-width: 0;
}

.updates-sidebar-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 20px;
}

.updates-toolbar {
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.updates-toolbar button {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(0, 20, 60, 0.1);
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  transition: all 0.15s ease;
}

.updates-toolbar button:hover {
  border-color: #00aff8;
  color: #0284c7;
}

.updates-toolbar button[aria-pressed="true"],
.updates-toolbar button.is-active {
  border-color: #00aff8;
  background: rgba(0, 175, 248, 0.08);
  color: #0284c7;
}

.updates-overview-card {
  background: #ffffff;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 4px 18px rgba(0, 20, 60, 0.03);
}

/* S518: Print Farm Pipeline Status Card */
.updates-pipeline-card {
  background: #ffffff;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 4px 18px rgba(0, 20, 60, 0.03);
}

.pipeline-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.pipeline-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pipeline-pulse-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  display: inline-block;
}

.pipeline-card-header h4 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: #00143c;
}

.pipeline-status-badge {
  font-size: 11px;
  font-weight: 750;
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
  padding: 2px 7px;
  border-radius: 999px;
}

.pipeline-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.pipeline-metric-item {
  background: #f8fafc;
  border: 1px solid rgba(0, 20, 60, 0.05);
  border-radius: 8px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}

.pipeline-metric-val {
  font-size: 12.5px;
  font-weight: 800;
  color: #00143c;
  white-space: nowrap;
}

.pipeline-metric-lbl {
  font-size: 10.5px;
  font-weight: 650;
  color: #64748b;
  white-space: nowrap;
}

.pipeline-footer-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.4;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 20, 60, 0.05);
}

.pipeline-footer-tip svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #0284c7;
}

.overview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.overview-badge {
  font-size: 11px;
  font-weight: 750;
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
  padding: 2px 7px;
  border-radius: 999px;
}

.overview-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #00143c;
}

.overview-desc {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 16px;
  line-height: 1.45;
}

.overview-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.stat-box {
  background: #f8fafc;
  border: 1px solid rgba(0, 20, 60, 0.05);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-number {
  font-size: 20px;
  font-weight: 850;
  color: #00143c;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 11.5px;
  font-weight: 650;
  color: #64748b;
}

.overview-divider {
  height: 1px;
  background: rgba(0, 20, 60, 0.06);
  margin: 16px 0;
}

.overview-shortcuts h4 {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
}

.shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shortcut-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 20, 60, 0.07);
  border-radius: 8px;
  background: #ffffff;
  color: #1e293b;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
  transition: all 0.12s ease;
}

.shortcut-item svg {
  color: #00aff8;
  flex-shrink: 0;
}

.shortcut-item:hover {
  background: rgba(0, 175, 248, 0.04);
  border-color: #00aff8;
  color: #0284c7;
}

/* Activity Items */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-list > .empty-panel {
  min-height: 260px;
}

.activity-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 20px;
  background: #ffffff;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 20, 60, 0.025);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.activity-item:hover {
  border-color: rgba(0, 175, 248, 0.3);
  box-shadow: 0 4px 16px rgba(0, 175, 248, 0.08);
}

.activity-item.is-unread {
  border-left: 3px solid #00aff8;
}

.activity-item.is-read {
  background: #fbfcfd;
}

.activity-item__icon-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.activity-type-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-type-icon--order {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.activity-type-icon--slice {
  background: rgba(0, 175, 248, 0.12);
  color: #0284c7;
}

.activity-type-icon--project {
  background: rgba(147, 51, 234, 0.12);
  color: #7e22ce;
}

.activity-type-icon--model {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

.activity-marker {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00aff8;
}

.activity-item.is-read .activity-marker {
  display: none;
}

.activity-item__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.activity-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.activity-type-label {
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.activity-meta time {
  font-size: 12px;
  color: #94a3b8;
}

.activity-title {
  margin: 2px 0 4px;
  font-size: 15px;
  font-weight: 750;
  color: #00143c;
  line-height: 1.35;
}

.activity-summary {
  margin: 0 0 10px;
  font-size: 13px;
  color: #475569;
  line-height: 1.45;
}

.activity-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.activity-actions .btn-activity-open,
.card-actions .btn-activity-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 16px;
  border-radius: 6px;
  border: 1px solid #00aff8 !important;
  background: linear-gradient(135deg, #00aff8 0%, #0088ea 100%) !important;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 175, 248, 0.25);
  transition: all 0.15s ease;
}

.activity-actions .btn-activity-open:hover,
.card-actions .btn-activity-open:hover {
  background: linear-gradient(135deg, #009de0 0%, #0077ce 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(0, 175, 248, 0.35);
}

.activity-actions .btn-activity-mark,
.card-actions .btn-activity-mark {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid rgba(0, 20, 60, 0.12) !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.12s ease;
}

.activity-actions .btn-activity-mark:hover,
.card-actions .btn-activity-mark:hover {
  background: #f1f5f9 !important;
  border-color: rgba(0, 20, 60, 0.2) !important;
  color: #0f172a !important;
}

.workspace-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 18px; color: var(--workspace-text); box-shadow: 0 30px 90px rgba(15, 35, 65, 0.32); overflow: auto; }
.workspace-dialog::backdrop { background: rgba(20, 31, 50, 0.48); backdrop-filter: blur(3px); }
.workspace-dialog form { padding: 25px; }
.workspace-dialog fieldset { margin: 0; padding: 14px; border: 1px solid var(--workspace-line); border-radius: 11px; }
.workspace-dialog legend { padding: 0 6px; color: #344761; font-size: 12px; font-weight: 850; }
.scan-deliverables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; }
.workspace-dialog .scan-deliverables label { display: flex; align-items: center; gap: 9px; }
.workspace-dialog .scan-deliverables input { width: auto; margin: 0; }
.dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.dialog-heading h2 { margin: 0; }
.icon-action { width: 34px; height: 34px; border: 1px solid var(--workspace-line); border-radius: 9px; background: #fff; color: #58687e; cursor: pointer; font-size: 22px; }
.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: grid; gap: 8px; }
.toast { max-width: min(420px, calc(100vw - 40px)); padding: 12px 15px; border-radius: 10px; background: #23344d; color: #fff; box-shadow: 0 12px 32px rgba(15, 31, 55, 0.24); font-size: 13px; }
.toast--success { background: #18643d; }
.toast--error { background: #9a302b; }

.workspace-app.is-sidebar-collapsed .workspace-frame { grid-template-columns: 82px minmax(0, 1fr); }
.workspace-app.is-sidebar-collapsed .workspace-sidebar { padding-inline: 12px; }
.workspace-app.is-sidebar-collapsed .sidebar-heading > span,
.workspace-app.is-sidebar-collapsed .nav-copy,
.workspace-app.is-sidebar-collapsed .start-menu { display: none; }
.workspace-app.is-sidebar-collapsed .sidebar-heading { justify-content: center; padding-inline: 0; }
.workspace-app.is-sidebar-collapsed .sidebar-toggle { transform: rotate(180deg); }
.workspace-app.is-sidebar-collapsed .object-navigation button { grid-template-columns: 1fr; justify-items: center; padding-inline: 0; }

@media (max-width: 1050px) {
  .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .launch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .object-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manufacturing-workbench, .cart-layout { grid-template-columns: 1fr; }
  .draft-order-summary, .completed-order-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destination-panel { position: static; }
  .workspace-utilities a[data-commerce-link="orders"],
  .workspace-utilities a[data-commerce-link="cart"] { display: none; }
}

@media (max-width: 760px) {
  .form-grid, .inline-upload, .intake-summary, .scan-deliverables, .reference-annotation-grid { grid-template-columns: 1fr; }
  .workspace-topbar { width: 100%; min-width: 0; padding: 12px 16px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 10px; }
  .workspace-brand { min-width: 0; max-width: 100%; }
  .workspace-brand > span:last-child { min-width: 0; }
  .workspace-brand strong { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
  .workspace-brand small { display: none; }
  .workspace-utilities { width: 100%; min-width: 0; flex-wrap: wrap; justify-content: flex-start; gap: 2px; }
  .workspace-utilities button, .workspace-utilities a { min-height: 32px; padding-inline: 8px; }
  .workspace-utilities .session-action { display: none; }
  .workspace-taskbar { width: 100%; min-width: 0; }
  .workspace-frame { display: block; }
  .workspace-sidebar {
    position: relative;
    top: auto;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 10px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--workspace-line);
  }
  .sidebar-heading { display: none; }
  .start-menu { margin: 0 0 10px; }
  .object-navigation { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .object-navigation.action-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .object-navigation.tool-navigation { margin-top: 8px; padding-top: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .object-navigation button { display: flex; justify-content: center; padding: 9px 4px; }
  .object-navigation .nav-copy small, .object-navigation .nav-icon { display: none; }
  .object-navigation .nav-copy strong { font-size: 11px; text-align: center; }
  .workspace-main { padding: 28px 16px 50px; }
  .unified-workbench, .unified-workbench h2, .project-detail, .project-detail h2 { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .unified-workbench .detail-heading { align-items: flex-start; flex-wrap: wrap; }
  .view-heading, .section-title { display: block; }
  .view-heading__actions { margin-top: 18px; flex-wrap: wrap; }
  .view-heading .primary-action { margin-top: 18px; }
  .status-grid, .launch-grid, .commerce-grid, .object-grid { grid-template-columns: 1fr; }
  .draft-order-summary, .completed-order-summary, .completed-order-line dl { grid-template-columns: 1fr; }
  .architecture-strip { grid-template-columns: 1fr; }
  .architecture-strip i { transform: rotate(90deg); justify-self: start; }
  .empty-panel { min-height: 300px; padding: 30px 20px; }
  .model-viewer { min-height: 330px; }
  .project-detail { padding: 20px; }
  .activity-meta { display: block; }
  .activity-meta time { display: block; margin-top: 2px; }
}
.project-customer-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  gap: 24px;
  margin: 24px 0;
  padding: 24px;
  border: 1px solid var(--line, #d9e2ef);
  border-radius: 18px;
  background: linear-gradient(135deg, #f7faff 0%, #eef5ff 100%);
}
.project-next-action { display: grid; gap: 5px; margin: 12px 0 18px; }
.project-next-action span { color: #5f718c; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.project-next-action strong { color: #14213a; font-size: 1.08rem; }
.project-save-state { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0; color: #47617f; }
.project-save-state strong { color: #0d67df; }
.project-preview { min-height: 190px; overflow: hidden; border-radius: 14px; background: #fff; border: 1px solid #d6e1ef; }
.project-preview__image { width: 100%; height: 100%; min-height: 190px; max-height: 280px; object-fit: contain; display: block; }
.project-preview__empty { min-height: 190px; display: grid; place-content: center; justify-items: center; gap: 7px; padding: 24px; text-align: center; color: #667893; }
.project-preview__empty span { color: #0d67df; font-size: 2rem; }
.project-preview__empty strong { color: #1b2a43; }
.technical-details { margin: 12px 0 20px; color: #60718a; font-size: .9rem; }
.technical-details summary { cursor: pointer; font-weight: 750; color: #405571; }

@media (max-width: 760px) {
  .project-customer-overview { grid-template-columns: 1fr; padding: 18px; }
  .project-preview { min-height: 150px; }
  .project-preview__image, .project-preview__empty { min-height: 150px; }
}

/* Shared Configure Core: the Workspace and the established Shopify Configure page render this same component. */
.configure-context-bar { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 20px; }
.configure-context-bar label { display: grid; gap: 7px; min-width: min(100%, 280px); color: #405571; font-weight: 750; }
.configure-context-bar select { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.dml-config-workspace__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); gap: 24px; }
.dml-config-workspace__visual,
.dml-config-workspace__summary,
.dml-config-workspace__future { border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: #fff; }
.dml-config-workspace__visual { min-height: 420px; display: grid; place-items: center; overflow: hidden; background: #f8fafc; }
.dml-config-workspace__visual img { display: block; max-width: 100%; max-height: 520px; object-fit: contain; }
.dml-config-workspace__summary { display: grid; align-content: start; gap: 15px; }
.dml-config-workspace__summary h2,
.dml-config-workspace__future h3 { margin: 0; }
.dml-config-workspace__summary dl { overflow-wrap: anywhere; }
.dml-config-workspace__summary label { display: grid; gap: 6px; color: #405571; font-weight: 750; }
.dml-config-workspace__summary select,
.dml-config-workspace__summary input { min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.dml-config-workspace__regions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dml-config-workspace__future[aria-disabled="true"] { color: #61728a; background: #f8fafc; }
.dml-config-workspace__eyebrow { margin: 0; color: var(--primary); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 850; }
.dml-config-workspace__error { margin: 0; color: #a32121; font-weight: 700; }
.dml-config-workspace__core-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dml-config-workspace__core-actions button,
.dml-config-workspace__future button { min-height: 42px; padding: 9px 14px; border: 1px solid #17233a; background: #fff; color: #17233a; font: inherit; font-weight: 750; cursor: pointer; }
.dml-config-workspace__future .button--primary { background: #17233a; color: #fff; }
.dml-config-workspace__future button:disabled { cursor: not-allowed; opacity: .5; }
@media (max-width: 760px) {
  .dml-config-workspace__grid { grid-template-columns: 1fr; }
  .dml-config-workspace__visual { min-height: 280px; }
  .dml-config-workspace__regions { grid-template-columns: 1fr; }
}

/* S510 Project organizer and unified View/Edit workbench. */
.project-organizer { margin: 0 0 24px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 14px 34px rgba(20, 42, 78, .08); }
.workspace-view[data-workspace-view="projects"]:has(.project-organizer:not([hidden])) > .view-heading { display: none; }
.project-organizer__heading, .organizer-pane__heading, .project-workbench__heading, .organizer-confirmation { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.view-heading__actions, .organizer-pane__commands { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.organizer-pane__commands { position: sticky; top: 0; z-index: 2; margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.98); box-shadow: 0 6px 18px rgba(20,45,85,.06); }
.organizer-pane__commands button:disabled { cursor: not-allowed; opacity: .48; }
.organizer-pane__heading .eyebrow { margin: 0 0 4px; }
.organizer-pane__heading h3 { max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-organizer__heading h2, .organizer-pane__heading h3, .project-workbench__heading h3 { margin: 0; }
.project-organizer__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 20px; }
.project-organizer__grid.has-source-collapsed,
.project-organizer__grid:has(.organizer-pane:first-child.is-collapsed) { grid-template-columns: 54px minmax(0, 1fr) !important; }
.project-organizer__grid.has-projects-collapsed,
.project-organizer__grid:has(.organizer-pane:last-child.is-collapsed) { grid-template-columns: minmax(0, 1fr) 54px !important; }
.organizer-pane { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #f8fafc; }
.organizer-pane.is-collapsed {
  padding: 14px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: #f1f5f9 !important;
  border: 1px dashed var(--line) !important;
  overflow: hidden;
}
.organizer-pane.is-collapsed .organizer-pane__body,
.organizer-pane.is-collapsed .organizer-pane__commands,
.organizer-pane.is-collapsed .organizer-pane__heading > div { display: none !important; }
.organizer-pane.is-collapsed .organizer-pane__heading {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}
.organizer-pane.is-collapsed [data-action="toggle-organizer-source"],
.organizer-pane.is-collapsed [data-action="toggle-organizer-projects"] {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  padding: 16px 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: transparent;
  border: 0;
  color: var(--primary);
  cursor: pointer;
  width: 100%;
}
.organizer-pane__body { display: grid; gap: 14px; margin-top: 14px; }
.organizer-pane__body > label { display: grid; gap: 6px; font-weight: 750; color: #405571; }
.organizer-pane__body input[type="search"] { min-height: 42px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.organizer-choices { display: grid; gap: 8px; max-height: 360px; overflow: auto; }
.organizer-choice { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: flex-start; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.organizer-choice:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(13, 103, 223, .12); }
.organizer-choice span { display: grid; gap: 3px; min-width: 0; }
.organizer-choice small { color: #667893; overflow-wrap: anywhere; }
.organizer-object-card { margin: 0; padding: 0; }
.organizer-object-card.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(13, 103, 223, .12); }
.organizer-object-card__select { align-items: flex-start; background: transparent; border: 0; color: inherit; display: flex; flex-direction: column; gap: 4px; padding: 11px; text-align: left; width: 100%; }
.organizer-object-card__select small { color: #667893; overflow-wrap: anywhere; }
.organizer-object-card__select span { color: var(--primary); font-size: .78rem; font-weight: 750; }
.organizer-confirmation { align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.organizer-confirmation p { margin: 5px 0 0; color: #60718a; overflow-wrap: anywhere; }
.project-layout.is-organizing { display: none; }
.project-workbench { margin: 22px 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #f8fafc; }
.project-workbench__panes { display: grid; grid-template-columns: minmax(0, var(--workbench-view-share, 52%)) 28px minmax(0, 1fr); gap: 10px; align-items: stretch; }
.project-workbench__panes.is-focused-collapsed { grid-template-columns: minmax(0, 1fr) 54px; }
.project-workbench__panes.view-collapsed,
.project-workbench__panes:has(.project-workbench__pane:first-child.is-collapsed) { grid-template-columns: 54px minmax(0, 1fr) !important; }
.project-workbench__panes.edit-collapsed,
.project-workbench__panes.prepare-collapsed,
.project-workbench__panes:has(.project-workbench__pane:last-child.is-collapsed) { grid-template-columns: minmax(0, 1fr) 54px !important; }
.project-workbench__panes.view-collapsed .workbench-resizer,
.project-workbench__panes.edit-collapsed .workbench-resizer,
.project-workbench__panes:has(.is-collapsed) .workbench-resizer { display: none !important; }
.project-workbench__pane { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.project-workbench__pane.is-collapsed {
  padding: 14px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: #f1f5f9 !important;
  border: 1px dashed var(--line) !important;
  overflow: hidden;
}
.project-workbench__pane.is-collapsed .project-workbench__heading > div,
.project-workbench__pane.is-collapsed .project-workbench__body { display: none !important; }
.project-workbench__pane.is-collapsed .project-workbench__heading {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 !important;
}
.project-workbench__pane.is-collapsed [data-action="toggle-workbench-view"],
.project-workbench__pane.is-collapsed [data-action="toggle-workbench-edit"] {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  padding: 16px 8px;
  font-size: 13px;
  font-weight: 700;
  background: transparent;
  border: 0;
  color: var(--primary);
  cursor: pointer;
  width: 100%;
}
.project-workbench__body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.focused-prepare-rail { padding: 0; overflow: hidden; background: #eef5ff; }
.focused-prepare-rail > button { width: 100%; height: 100%; min-height: 320px; padding: 14px 8px; border: 0; background: transparent; color: var(--primary); font-weight: 800; cursor: pointer; writing-mode: vertical-rl; transform: rotate(180deg); }
.focused-prepare-rail > button span { font-size: 1.3rem; }
.project-workbench__preview { min-height: 320px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.project-workbench__preview > .quiet { margin: 0; padding: 22px; text-align: center; }
.project-workbench__preview .dml-geometry-viewer { width: 100%; min-height: 320px; }
.workbench-image-preview { width: 100%; min-height: 240px; display: grid; place-items: center; overflow: hidden; }
.workbench-image-stage { display: grid; place-items: stretch; max-width: 100%; }
.workbench-image-stage > * { grid-area: 1 / 1; }
.workbench-image-preview img { display: block; width: auto; max-width: 100%; max-height: 420px; object-fit: contain; }
.workbench-annotation-overlay { width: 100%; height: 100%; pointer-events: none; }
.workbench-annotation-summary { width: 100%; padding: 12px 14px; border-top: 1px solid var(--line); background: #fff8df; color: #5b4814; }
.workbench-annotation-summary p { margin: 6px 0; }
.workbench-annotation-summary ul { margin: 6px 0 0; padding-left: 20px; }
.workbench-resizer { display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 8px; color: #60718a; font-size: .72rem; text-align: center; }
.workbench-resizer input { writing-mode: vertical-lr; direction: rtl; width: 24px; min-height: 210px; }
.workbench-source-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.workbench-source-list label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; }
.workbench-source-list label span { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.workbench-main { padding: 12px; border: 1px solid #b8cff0; border-radius: 10px; background: #eef5ff; }
.workbench-main span, .workbench-main strong { display: block; }
.project-workbench pre { max-height: 300px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

/* The canonical continuation form lives inside the workbench, not a detail-section. */
[data-continuation-form] { min-width: 0; width: 100%; max-width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
[data-continuation-form] fieldset { min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
[data-continuation-form] > label,
[data-continuation-form] .form-grid > label { min-width: 0; display: grid; gap: 7px; color: #344761; font-size: 12px; font-weight: 800; }
[data-continuation-form] input,
[data-continuation-form] textarea,
[data-continuation-form] select { min-width: 0; width: 100%; padding: 10px 11px; border: 1px solid #cbd7e5; border-radius: 9px; background: #fff; color: var(--workspace-text); resize: vertical; }
[data-continuation-form] textarea { min-height: 92px; }
[data-continuation-form] .form-grid { grid-template-columns: 1fr; }
[data-continuation-form] .form-help,
[data-continuation-form] label,
[data-continuation-form] legend,
[data-continuation-form] p,
[data-continuation-form] strong,
[data-continuation-form] span { overflow-wrap: anywhere; }
.project-workbench__panes > .project-workbench__pane:last-child .project-embedded-engineering,
.project-workbench__panes > .project-workbench__pane:last-child .project-embedded-engineering .dml-ws,
.project-workbench__panes > .project-workbench__pane:last-child .project-embedded-engineering .dml-project__form { min-width: 0; width: 100%; max-width: 100%; }
.project-workbench__panes > .project-workbench__pane:last-child .project-embedded-engineering .dml-ws__basics-grid,
.project-workbench__panes > .project-workbench__pane:last-child .project-embedded-engineering .dml-ws__workspace-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; }
.project-workbench__panes > .project-workbench__pane:last-child .project-embedded-engineering .dml-ws__toolbar,
.project-workbench__panes > .project-workbench__pane:last-child .project-embedded-engineering .dml-ws__toolbar-left,
.project-workbench__panes > .project-workbench__pane:last-child .project-embedded-engineering .dml-ws__toolbar-right { min-width: 0; flex-wrap: wrap; }
.project-workbench__panes > .project-workbench__pane:last-child .project-embedded-engineering input,
.project-workbench__panes > .project-workbench__pane:last-child .project-embedded-engineering select,
.project-workbench__panes > .project-workbench__pane:last-child .project-embedded-engineering textarea { min-width: 0; max-width: 100%; }
.project-workbench__body .record-list,
.project-workbench__body .record-list article { min-width: 0; max-width: 100%; }
.project-workbench__body .record-list article * { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

@media (min-width: 861px) {
  .project-workbench__panes:not(.is-focused-collapsed) { height: min(760px, calc(100vh - 132px)); min-height: 520px; }
  .project-workbench__panes:not(.is-focused-collapsed) > .project-workbench__pane { display: flex; flex-direction: column; overflow: hidden; }
  .project-workbench__panes:not(.is-focused-collapsed) > .project-workbench__pane > .project-workbench__heading { flex: 0 0 auto; }
  .project-workbench__panes:not(.is-focused-collapsed) > .project-workbench__pane > .project-workbench__body { flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
}

@media (max-width: 860px) {
  .project-organizer__grid, .project-workbench__panes { grid-template-columns: 1fr; }
  .project-workbench__panes.is-focused-collapsed { grid-template-columns: minmax(0, 1fr); }
  .project-workbench__preview, .project-workbench__preview .dml-geometry-viewer { min-height: 240px; }
  .workbench-resizer { display: none; }
  .focused-prepare-rail { min-height: 48px; }
  .focused-prepare-rail > button { min-height: 48px; writing-mode: horizontal-tb; transform: none; }
  .project-organizer__heading, .organizer-confirmation { align-items: stretch; flex-direction: column; }
}

@media (max-width: 760px) {
  .object-grid, .object-card { min-width: 0; max-width: 100%; }
  .object-card { overflow: hidden; }
  .object-card h2 { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
  .organizer-pane__heading > div { min-width: 0; }
  .organizer-pane__heading h3 { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
  .organizer-object-card__select strong { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
}

.project-stage-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: #f1f5f9;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 12px 0 20px;
  font-size: 0.9rem;
}
.project-stage-banner__stage {
  font-weight: 600;
  color: #0f172a;
}
.project-stage-banner__step {
  color: #334155;
}
.project-stage-banner__status {
  margin-left: auto;
  color: #64748b;
  font-size: 0.85rem;
}

.organizer-project-switch {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.organizer-project-switch summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.92rem;
  user-select: none;
}
.organizer-project-switch summary strong {
  color: #0f172a;
}
.organizer-project-switch summary small {
  color: #2563eb;
  font-weight: 500;
}
.organizer-project-switch__panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.project-records-drawer {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 14px 20px;
}
.project-records-drawer__summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  user-select: none;
}
.project-records-drawer__summary strong {
  color: #1e293b;
}
.project-records-drawer__summary small {
  color: #64748b;
}
.project-records-drawer__content {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.project-organizer__grid > .organizer-pane:last-child .project-embedded-engineering,
.project-organizer__grid > .organizer-pane:last-child .project-embedded-engineering .dml-ws,
.project-organizer__grid > .organizer-pane:last-child .project-embedded-engineering .dml-project__form {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.project-organizer__grid > .organizer-pane:last-child .project-embedded-engineering .dml-ws__basics-grid,
.project-organizer__grid > .organizer-pane:last-child .project-embedded-engineering .dml-ws__workspace-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px;
}
.project-organizer__grid > .organizer-pane:last-child .project-embedded-engineering .dml-ws__toolbar,
.project-organizer__grid > .organizer-pane:last-child .project-embedded-engineering .dml-ws__toolbar-left,
.project-organizer__grid > .organizer-pane:last-child .project-embedded-engineering .dml-ws__toolbar-right {
  min-width: 0;
  flex-wrap: wrap;
}
.project-organizer__grid > .organizer-pane:last-child .project-embedded-engineering input,
.project-organizer__grid > .organizer-pane:last-child .project-embedded-engineering select,
.project-organizer__grid > .organizer-pane:last-child .project-embedded-engineering textarea {
  min-width: 0;
  max-width: 100%;
}

/* ============================================================
   TOPBAR DESIGN EXPERIMENTS (VARIANT A, B, C)
   ============================================================ */

/* Base icon & copy inside taskbar */
.taskbar-icon {
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.taskbar-copy {
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------
   Scheme A: Modern Minimalist Pill Style
   ------------------------------------------------------------ */
body[data-topbar-variant="A"] .workspace-taskbar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}
body[data-topbar-variant="A"] .workspace-taskbar button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: transparent;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
body[data-topbar-variant="A"] .workspace-taskbar button:hover {
  background: #ffffff;
  color: #0284c7;
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
body[data-topbar-variant="A"] .workspace-taskbar button:active {
  transform: scale(0.98);
}
body[data-topbar-variant="A"] .workspace-taskbar .taskbar-copy {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}
body[data-topbar-variant="A"] .workspace-taskbar strong {
  font-size: 13px;
  font-weight: 700;
  color: inherit;
}
body[data-topbar-variant="A"] .workspace-taskbar small {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  opacity: 0.85;
}

/* ------------------------------------------------------------
   Scheme B: Sidebar Task Cards + Clean Topbar
   ------------------------------------------------------------ */
body[data-topbar-variant="B"] .workspace-taskbar {
  display: none !important;
}
body[data-topbar-variant="B"] .workspace-topbar {
  justify-content: space-between;
}
.sidebar-group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--workspace-muted);
  padding: 6px 6px 3px;
  user-select: none;
}
.sidebar-group-title[data-work-group-title] {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--workspace-line);
}
.sidebar-group-title[data-tool-group-title] {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--workspace-line);
}
body[data-topbar-variant="B"] .sidebar-group-title {
  display: block !important;
}
body[data-topbar-variant="B"] .sidebar-task-cards {
  display: flex !important;
}
body[data-topbar-variant="B"] .start-menu {
  display: none !important;
}
body[data-topbar-variant="B"] .object-navigation .nav-copy small,
body[data-topbar-variant="B"] .sidebar-task-copy small {
  display: none !important;
}
body[data-topbar-variant="B"] .object-navigation button {
  padding: 6px 8px;
}
body[data-topbar-variant="B"] .object-navigation .nav-icon {
  border: none;
  background: transparent;
}
.sidebar-task-cards {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 6px;
  padding: 0 1px;
}
.sidebar-task-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
}
.sidebar-task-card:hover {
  border-color: #0284c7;
  background: #f0f9ff;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.08);
  transform: translateY(-1px);
}
.sidebar-task-card .sidebar-task-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.sidebar-task-card .sidebar-task-icon svg {
  width: 15px;
  height: 15px;
}
.sidebar-task-card:hover .sidebar-task-icon {
  background: #e0f2fe;
  border-color: #bae6fd;
}
.sidebar-task-copy strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}
.sidebar-task-copy small {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 1px;
}

/* ------------------------------------------------------------
   Scheme C: Industrial Mode Switcher
   ------------------------------------------------------------ */
body[data-topbar-variant="C"] .workspace-topbar {
  position: relative;
}
body[data-topbar-variant="C"] .workspace-taskbar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 4px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15), inset 0 1px 1px rgba(0, 0, 0, 0.3);
}
body[data-topbar-variant="C"] .workspace-taskbar button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
body[data-topbar-variant="C"] .workspace-taskbar button:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.08);
}
body[data-topbar-variant="C"] .workspace-taskbar strong {
  font-size: 13px;
  font-weight: 700;
  color: inherit;
}
body[data-topbar-variant="C"] .workspace-taskbar small {
  display: none;
}
body[data-topbar-variant="C"] .workspace-taskbar .taskbar-icon {
  font-size: 14px;
}
body[data-topbar-variant="C"]:has([data-workspace-view="projects"].is-active) .workspace-taskbar button[data-action="design-request"],
body[data-topbar-variant="C"]:has([data-workspace-view="slice-quote"].is-active) .workspace-taskbar button[data-action="slice-quote-entry"] {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.45);
}

/* ============================================================
   S518 Phase 4: Commerce, Tools, Scans, Credits & Account CSS
   ============================================================ */

/* --- 1. Topbar Credits Pill & Account Profile Drawer --- */
.credits-pill-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.08) 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 999px;
  color: #b45309;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.credits-pill-action:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(217, 119, 6, 0.16) 100%);
  border-color: rgba(245, 158, 11, 0.6);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}
.credits-pill-icon {
  font-size: 14px;
  color: #d97706;
}
.credits-pill-val {
  font-weight: 800;
  color: #92400e;
}
.credits-pill-lbl {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b45309;
  opacity: 0.85;
}

.account-menu-wrapper {
  position: relative;
  display: inline-block;
}
.workspace-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.user-avatar-badge {
  display: inline-grid;
  place-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}

.account-profile-drawer {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.16), 0 0 1px rgba(15, 23, 42, 0.1);
  padding: 18px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: drawerSlideDown 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes drawerSlideDown {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.account-profile-drawer[hidden] {
  display: none !important;
}
.drawer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}
.drawer-avatar {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #f8fafc;
  font-size: 16px;
  font-weight: 800;
}
.drawer-user-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.drawer-user-meta strong {
  font-size: 15px;
  font-weight: 750;
  color: #0f172a;
  line-height: 1.2;
}
.drawer-user-email {
  font-size: 12px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drawer-user-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #059669;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: fit-content;
}
.drawer-credits-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
}
.drawer-credits-lbl {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
.drawer-credits-val {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin-top: 2px;
}
.drawer-topup-btn {
  padding: 6px 12px;
  border-radius: 8px;
  background: #2563eb;
  color: #ffffff;
  border: 0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.drawer-topup-btn:hover {
  background: #1d4ed8;
}
.drawer-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drawer-menu-list li button,
.drawer-menu-list li a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.drawer-menu-list li button:hover,
.drawer-menu-list li a:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.drawer-menu-list svg {
  color: #64748b;
  flex-shrink: 0;
}
.drawer-footer {
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}
.drawer-signout-btn {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #fee2e2;
  border-radius: 8px;
  background: #fff5f5;
  color: #dc2626;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.drawer-signout-btn:hover {
  background: #fee2e2;
  color: #b91c1c;
}

/* --- 2. Billing & Credits Studio --- */
.dual-payment-notice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  line-height: 1.4;
}
.dual-payment-notice .payment-notice-icon {
  font-size: 14px;
  line-height: 1;
}

.ai-credits-explain-toggle {
  margin-top: 8px;
  font-size: 12.5px;
}
.ai-credits-explain-toggle summary {
  cursor: pointer;
  color: #0284c7;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
  outline: none;
  transition: color 0.15s ease;
}
.ai-credits-explain-toggle summary:hover {
  color: #0369a1;
  text-decoration: underline;
}
.ai-credits-explain-toggle .explain-body {
  margin-top: 8px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #475569;
  max-width: 680px;
}

.credits-dashboard-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 22px;
  margin: 0 0 28px;
  align-items: stretch;
}
@media (max-width: 980px) {
  .credits-dashboard-grid {
    grid-template-columns: 1fr;
  }
}
.credits-balance-card {
  padding: 26px 28px;
  border-radius: 18px;
  background: radial-gradient(120% 120% at 0% 0%, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.credits-rate-guide-card {
  padding: 24px 26px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
}
.rate-guide-header {
  margin-bottom: 12px;
}
.rate-guide-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 750;
  color: #0284c7;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}
.rate-guide-header h3 {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}
.rate-guide-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}
.rate-guide-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #f1f5f9;
}
.rate-service {
  display: flex;
  flex-direction: column;
}
.rate-service strong {
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
}
.rate-service span {
  font-size: 11px;
  color: #64748b;
}
.rate-cost {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px;
  font-weight: 800;
  color: #0284c7;
  white-space: nowrap;
}
.rate-cost small {
  font-size: 10px;
  color: #64748b;
  font-weight: 600;
}
.rate-guide-footer {
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}
.rate-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #166534;
}
.credits-balance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.credits-balance-label {
  font-size: 13px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}
.credits-balance-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  padding: 3px 10px;
  border-radius: 999px;
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.credits-balance-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 6px;
}
.credits-symbol {
  font-size: 32px;
  color: #d97706;
}
.credits-balance-amount strong {
  font-size: 44px;
  font-weight: 850;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1;
}
.credits-unit {
  font-size: 18px;
  font-weight: 700;
  color: #64748b;
}
.credits-balance-sub {
  color: #64748b;
  font-size: 14px;
  margin: 0 0 20px;
}
.credits-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}
.credits-stats-row .stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.credits-stats-row .card-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}
.credits-stats-row strong {
  font-size: 15px;
  font-weight: 750;
  color: #1e293b;
}

/* Credit Packages Grid */
.credit-packages-section {
  margin: 32px 0;
}
.credit-packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 340px));
  gap: 22px;
  margin-top: 20px;
  align-items: stretch;
}
.credit-package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
  border-radius: 18px;
  background: var(--card-bg, radial-gradient(circle at 85% 12%, rgba(30, 41, 59, 0.45) 0%, rgba(15, 23, 42, 0.98) 75%), #070d1e);
  border: 1px solid var(--card-border, rgba(56, 189, 248, 0.22));
  box-shadow: 0 10px 30px -5px rgba(2, 6, 23, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.credit-package-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--card-laser, linear-gradient(90deg, transparent 0%, #38bdf8 30%, #0284c7 70%, transparent 100%));
  opacity: 0.85;
}
.credit-package-card:hover {
  transform: translateY(-4px);
  border-color: var(--card-border-hover, rgba(56, 189, 248, 0.65));
  box-shadow: 0 18px 42px -6px rgba(2, 6, 23, 0.8), 0 0 24px var(--card-glow, rgba(56, 189, 248, 0.2)), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.credit-package-card.is-popular {
  border-color: var(--card-border-popular, rgba(56, 189, 248, 0.55));
  box-shadow: 0 12px 36px -6px rgba(2, 6, 23, 0.75), 0 0 24px var(--card-glow, rgba(14, 165, 233, 0.22)), inset 0 1px 0 var(--card-border-popular, rgba(56, 189, 248, 0.3));
}
.credit-package-card.is-popular::before {
  height: 3px;
  opacity: 1;
}

/* Microchip Pass Header */
.package-pass-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.5);
}
.pass-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pass-brand-code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--card-accent, #38bdf8);
  text-transform: uppercase;
}
.pass-brand-sub {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #94a3b8;
  text-transform: uppercase;
}
.pass-chip {
  width: 32px;
  height: 24px;
  border-radius: 4px;
  background: var(--card-chip-bg, linear-gradient(135deg, #cbd5e1 0%, #94a3b8 50%, #64748b 100%));
  border: 1px solid var(--card-chip-border, rgba(255, 255, 255, 0.4));
  position: relative;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
}
.pass-chip::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border: 1px solid rgba(15, 23, 42, 0.4);
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(15, 23, 42, 0.25) 4px, rgba(15, 23, 42, 0.25) 6px);
}

.package-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--card-accent, #38bdf8);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.package-kicker .kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--card-accent, #38bdf8);
  box-shadow: 0 0 8px var(--card-accent, #38bdf8);
}

.pass-header-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.popular-ribbon {
  display: inline-flex;
  align-items: center;
  background: var(--card-popular-badge, linear-gradient(135deg, #0284c7 0%, #2563eb 100%));
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: 0 0 10px var(--card-popular-glow, rgba(2, 132, 199, 0.45));
  border: 1px solid rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}
.package-header h3 {
  font-size: 20px;
  font-weight: 800;
  color: #f8fafc;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.package-tagline {
  font-size: 12.5px;
  color: #94a3b8;
  margin: 0 0 16px;
  min-height: 36px;
  line-height: 1.45;
}
.package-pricing {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 12px;
}
.package-pricing .currency {
  font-size: 22px;
  font-weight: 800;
  color: var(--card-accent, #38bdf8);
}
.package-pricing strong {
  font-size: 36px;
  font-weight: 850;
  color: #f8fafc;
  letter-spacing: -0.03em;
  line-height: 1;
}
.package-pricing .term {
  font-size: 13px;
  font-weight: 750;
  color: #94a3b8;
}
.package-pricing .package-per-unit {
  font-size: 11.5px;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 2px 7px;
  border-radius: 6px;
  margin-left: 6px;
}
.package-credits {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--card-credits-border, rgba(56, 189, 248, 0.25));
  font-size: 13px;
  margin-bottom: 18px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
.package-credits .credits-glyph {
  color: var(--card-glyph-color, #f59e0b);
  font-size: 15px;
  font-weight: 900;
  filter: drop-shadow(0 0 4px var(--card-glyph-glow, rgba(245, 158, 11, 0.4)));
}
.package-credits strong {
  font-size: 15px;
  font-weight: 800;
  color: #f8fafc;
}
.package-credits span {
  color: #94a3b8;
  font-weight: 600;
}
.package-features {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}
.package-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: #cbd5e1;
  line-height: 1.4;
}
.package-features svg {
  color: var(--card-accent, #38bdf8);
  flex-shrink: 0;
  margin-top: 2px;
  filter: drop-shadow(0 0 3px var(--card-accent, #38bdf8));
}
.package-features .package-feature-test {
  color: var(--card-accent, #38bdf8);
  font-weight: 650;
}
.package-features .package-feature-test svg {
  color: var(--card-accent, #38bdf8);
}
.package-buy-btn {
  width: 100%;
  padding: 12px 18px;
  border-radius: 11px;
  border: 1px solid var(--card-btn-border, rgba(56, 189, 248, 0.4));
  background: var(--card-btn-bg, linear-gradient(135deg, #0284c7 0%, #2563eb 100%));
  color: var(--card-btn-color, #ffffff);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--card-btn-shadow, 0 4px 14px rgba(2, 132, 199, 0.35));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.package-buy-btn:hover {
  background: var(--card-btn-hover-bg, linear-gradient(135deg, #0ea5e9 0%, #1d4ed8 100%));
  border-color: var(--card-accent, #38bdf8);
  box-shadow: var(--card-btn-hover-shadow, 0 6px 20px rgba(14, 165, 233, 0.55));
  transform: translateY(-1px);
}
.package-buy-btn.primary-action {
  background: var(--card-btn-bg, linear-gradient(135deg, #0284c7 0%, #2563eb 100%));
}

/* ============================================================
   SCHEME A THEMES: Precision Slate -> Midnight Sapphire -> Obsidian Gold
   ============================================================ */
.credit-package-card[data-card-theme="starter-slate"] {
  --card-bg: radial-gradient(circle at 85% 12%, rgba(30, 41, 59, 0.45) 0%, rgba(15, 23, 42, 0.98) 75%), #070d1e;
  --card-border: rgba(56, 189, 248, 0.22);
  --card-laser: linear-gradient(90deg, transparent 0%, #38bdf8 30%, #0284c7 70%, transparent 100%);
  --card-glow: rgba(56, 189, 248, 0.2);
  --card-accent: #38bdf8;
  --card-chip-bg: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 50%, #64748b 100%);
  --card-chip-border: rgba(255, 255, 255, 0.45);
  --card-btn-bg: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  --card-btn-border: rgba(56, 189, 248, 0.45);
  --card-btn-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
  --card-btn-color: #ffffff;
}

.credit-package-card[data-card-theme="pro-sapphire"] {
  --card-bg: radial-gradient(circle at 85% 15%, rgba(37, 99, 235, 0.32) 0%, rgba(8, 16, 48, 0.98) 70%), #04081c;
  --card-border: rgba(0, 240, 255, 0.38);
  --card-border-popular: rgba(0, 240, 255, 0.65);
  --card-border-hover: rgba(0, 240, 255, 0.85);
  --card-laser: linear-gradient(90deg, transparent 0%, #00f0ff 25%, #3b82f6 75%, transparent 100%);
  --card-glow: rgba(0, 240, 255, 0.32);
  --card-accent: #00f0ff;
  --card-chip-bg: linear-gradient(135deg, #fef08a 0%, #eab308 50%, #ca8a04 100%);
  --card-chip-border: rgba(254, 240, 138, 0.6);
  --card-popular-badge: linear-gradient(135deg, #00f0ff 0%, #2563eb 100%);
  --card-popular-glow: rgba(0, 240, 255, 0.5);
  --card-credits-border: rgba(0, 240, 255, 0.35);
  --card-btn-bg: linear-gradient(135deg, #0284c7 0%, #1d4ed8 100%);
  --card-btn-border: rgba(0, 240, 255, 0.55);
  --card-btn-shadow: 0 4px 16px rgba(0, 240, 255, 0.38);
  --card-btn-hover-bg: linear-gradient(135deg, #00f0ff 0%, #2563eb 100%);
  --card-btn-color: #ffffff;
}

.credit-package-card[data-card-theme="ent-obsidian-gold"] {
  --card-bg: radial-gradient(circle at 85% 15%, rgba(180, 83, 9, 0.22) 0%, rgba(14, 12, 16, 0.98) 65%), #09080c;
  --card-border: rgba(245, 158, 11, 0.38);
  --card-border-hover: rgba(251, 191, 36, 0.75);
  --card-laser: linear-gradient(90deg, transparent 0%, #fbbf24 25%, #f59e0b 75%, transparent 100%);
  --card-glow: rgba(245, 158, 11, 0.32);
  --card-accent: #fbbf24;
  --card-chip-bg: linear-gradient(135deg, #fffbeb 0%, #fde047 30%, #eab308 70%, #92400e 100%);
  --card-chip-border: rgba(253, 224, 71, 0.65);
  --card-credits-border: rgba(245, 158, 11, 0.35);
  --card-glyph-color: #fbbf24;
  --card-glyph-glow: rgba(251, 191, 36, 0.55);
  --card-btn-bg: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #92400e 100%);
  --card-btn-border: rgba(251, 191, 36, 0.65);
  --card-btn-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
  --card-btn-hover-bg: linear-gradient(135deg, #fde047 0%, #d97706 100%);
  --card-btn-color: #0f172a;
}

/* ============================================================
   SCHEME B THEMES: Aurora Cyan -> Quantum Violet -> Hyperion Amber
   ============================================================ */
.credit-package-card[data-card-theme="starter-cyan"] {
  --card-bg: radial-gradient(circle at 85% 15%, rgba(6, 78, 99, 0.35) 0%, rgba(6, 16, 24, 0.98) 75%), #050d14;
  --card-border: rgba(34, 211, 238, 0.3);
  --card-laser: linear-gradient(90deg, transparent 0%, #22d3ee 30%, #0891b2 70%, transparent 100%);
  --card-glow: rgba(34, 211, 238, 0.25);
  --card-accent: #22d3ee;
  --card-chip-bg: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 50%, #64748b 100%);
  --card-chip-border: rgba(255, 255, 255, 0.4);
  --card-btn-bg: linear-gradient(135deg, #0891b2 0%, #0284c7 100%);
  --card-btn-border: rgba(34, 211, 238, 0.45);
  --card-btn-shadow: 0 4px 14px rgba(8, 145, 178, 0.35);
  --card-btn-color: #ffffff;
}

.credit-package-card[data-card-theme="pro-violet"] {
  --card-bg: radial-gradient(circle at 85% 15%, rgba(109, 40, 217, 0.38) 0%, rgba(18, 10, 32, 0.98) 70%), #0d0617;
  --card-border: rgba(168, 85, 247, 0.4);
  --card-border-popular: rgba(192, 132, 252, 0.7);
  --card-border-hover: rgba(192, 132, 252, 0.85);
  --card-laser: linear-gradient(90deg, transparent 0%, #c084fc 25%, #a855f7 75%, transparent 100%);
  --card-glow: rgba(168, 85, 247, 0.32);
  --card-accent: #c084fc;
  --card-chip-bg: linear-gradient(135deg, #f5d0fe 0%, #c084fc 50%, #6b21a8 100%);
  --card-chip-border: rgba(245, 208, 254, 0.55);
  --card-popular-badge: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  --card-popular-glow: rgba(168, 85, 247, 0.55);
  --card-credits-border: rgba(168, 85, 247, 0.35);
  --card-glyph-color: #e879f9;
  --card-glyph-glow: rgba(232, 121, 249, 0.5);
  --card-btn-bg: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
  --card-btn-border: rgba(192, 132, 252, 0.55);
  --card-btn-shadow: 0 4px 16px rgba(147, 51, 234, 0.4);
  --card-btn-hover-bg: linear-gradient(135deg, #c084fc 0%, #9333ea 100%);
  --card-btn-color: #ffffff;
}

.credit-package-card[data-card-theme="ent-amber"] {
  --card-bg: radial-gradient(circle at 85% 15%, rgba(194, 65, 12, 0.32) 0%, rgba(24, 12, 4, 0.98) 70%), #140802;
  --card-border: rgba(249, 115, 22, 0.4);
  --card-border-hover: rgba(251, 146, 60, 0.8);
  --card-laser: linear-gradient(90deg, transparent 0%, #fb923c 25%, #f97316 75%, transparent 100%);
  --card-glow: rgba(249, 115, 22, 0.32);
  --card-accent: #fb923c;
  --card-chip-bg: linear-gradient(135deg, #ffedd5 0%, #fb923c 50%, #9a3412 100%);
  --card-chip-border: rgba(254, 215, 170, 0.55);
  --card-credits-border: rgba(249, 115, 22, 0.35);
  --card-glyph-color: #f97316;
  --card-glyph-glow: rgba(249, 115, 22, 0.5);
  --card-btn-bg: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  --card-btn-border: rgba(249, 115, 22, 0.55);
  --card-btn-shadow: 0 4px 16px rgba(234, 88, 12, 0.4);
  --card-btn-hover-bg: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
  --card-btn-color: #ffffff;
}  border-color: rgba(56, 189, 248, 0.4);
  color: #ffffff;
}
.package-buy-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  background: #334155;
  border-color: #475569;
}
.credit-packages-empty {
  padding: 36px 24px;
  text-align: center;
  background: #ffffff;
  border-radius: 14px;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  font-size: 14px;
}
.credit-packages-footer {
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 744px;
}
.credit-recovery-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.package-recover-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}
.package-recover-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}
.package-recovery-hint {
  font-size: 11.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}
.developer-credit-tools {
  margin-top: 36px;
  padding: 16px;
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
}
.developer-credit-tools summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  color: #475569;
}
.developer-tools-body {
  margin-top: 14px;
}

/* --- 3. Print Settings Studio --- */
.recipes-showcase-section {
  margin: 0 0 28px;
}
.print-recipes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.print-recipe-card {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.print-recipe-card:hover {
  border-color: #93c5fd;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.1);
}
.print-recipe-card.is-active {
  border-color: #2563eb;
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.recipe-card-header {
  margin-bottom: 8px;
}
.recipe-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0284c7;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.recipe-badge.creator-badge {
  background: #fef3c7;
  color: #d97706;
}
.recipe-card-header h3 {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}
.recipe-desc {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 14px;
  min-height: 48px;
  line-height: 1.35;
}
.recipe-specs {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}
.recipe-specs li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  padding-bottom: 4px;
  border-bottom: 1px dashed #f1f5f9;
}
.recipe-specs li span {
  color: #64748b;
}
.recipe-specs li strong {
  color: #1e293b;
  font-weight: 700;
}
.recipe-apply-btn {
  width: 100%;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.print-recipe-card.is-active .recipe-apply-btn {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}
.recipe-apply-btn:hover {
  background: #f1f5f9;
}
.print-recipe-card.is-active .recipe-apply-btn:hover {
  background: #1d4ed8;
}

/* Material Quoting Feasibility Panel */
.material-feasibility-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0;
  padding: 22px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.feasibility-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feasibility-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.feasibility-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  width: fit-content;
}
.pill-instant {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.pill-review {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}
.feasibility-header h4 {
  font-size: 15px;
  font-weight: 750;
  color: #0f172a;
  margin: 4px 0 0;
}
.feasibility-column p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}
.material-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.mat-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  font-size: 11px;
  font-weight: 700;
  color: #334155;
}
.mat-tag.tag-review {
  background: #fffdf5;
  border-color: #fef3c7;
  color: #92400e;
}

.modern-settings-editor {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.special-requirements-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 16px 0 12px;
}
.special-requirements-label .label-heading {
  font-size: 13px;
  font-weight: 750;
  color: #0f172a;
}
.special-requirements-label .label-hint {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
}
.special-requirements-label textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  font-family: inherit;
  font-size: 13px;
  color: #1e293b;
  resize: vertical;
  line-height: 1.4;
  box-sizing: border-box;
}
.special-requirements-label textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* --- 4. Scans Studio --- */
.scans-studio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 32px;
}
.scan-hero-card {
  padding: 26px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
.scan-mode-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.scan-mode-pill.beta-pill {
  background: #fdf2f8;
  color: #db2777;
}
.scan-card-top h3 {
  font-size: 19px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px;
}
.scan-card-top p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}
.scan-metrology-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.spec-pill {
  padding: 6px 12px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 12px;
  color: #475569;
}
.spec-pill strong {
  color: #0f172a;
  font-weight: 750;
}
.scan-workflow-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  font-size: 11px;
}
.step-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: #334155;
}
.step-num {
  display: grid;
  place-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
}
.step-arrow {
  color: #94a3b8;
  font-weight: 700;
}
.scan-waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.waitlist-input-group {
  display: flex;
  gap: 8px;
}
.waitlist-input-group input {
  flex-grow: 1;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  font-size: 13px;
  font-family: inherit;
}
.waitlist-submit-btn {
  padding: 10px 18px;
  border-radius: 10px;
  border: 0;
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.waitlist-submit-btn:hover {
  opacity: 0.9;
}
.waitlist-hint {
  font-size: 11px;
  color: #94a3b8;
  margin: 0;
}

/* --- 5. Explore Showcases --- */
.explore-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 28px;
}
.explore-showcase-card {
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
}
.showcase-card-media {
  height: 170px;
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 14px;
}
.showcase-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 11px;
  font-weight: 750;
}
.showcase-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 8px;
}
.showcase-category {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #2563eb;
}
.showcase-card-body h3 {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}
.showcase-card-body p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
  flex-grow: 1;
}
.showcase-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.showcase-tech {
  font-size: 11px;
  color: #475569;
  font-weight: 650;
}
.showcase-notify-btn {
  width: 100%;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.showcase-notify-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}
.explore-callout-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #bbf7d0;
}
.callout-content strong {
  display: block;
  font-size: 14px;
  font-weight: 750;
  color: #166534;
}
.callout-content p {
  font-size: 13px;
  color: #15803d;
  margin: 2px 0 0;
}

/* --- 6. Production Milestone Stepper --- */
.production-milestone-panel {
  padding: 20px 24px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  margin-bottom: 24px;
}
.stepper-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.stepper-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #475569;
}
.stepper-meta {
  font-size: 12px;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  padding: 3px 10px;
  border-radius: 999px;
}
.production-stepper {
  display: flex;
  align-items: center;
  position: relative;
}
.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.step-indicator {
  display: grid;
  place-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 2px solid #cbd5e1;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
  transition: all 0.2s ease;
}
.stepper-step.is-completed .step-indicator {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
}
.stepper-step.is-active .step-indicator {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}
.step-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  animation: stepPulse 1.4s infinite cubic-bezier(0.4, 0, 0.6, 1);
}
@keyframes stepPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.5; }
}
.stepper-step .step-label {
  font-size: 12px;
  font-weight: 750;
  color: #1e293b;
  white-space: nowrap;
}
.stepper-step small {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  margin-top: 1px;
}
.stepper-line {
  flex: 1 1 0;
  height: 3px;
  background: #e2e8f0;
  margin: -20px 8px 0;
  position: relative;
  z-index: 1;
}
.stepper-line.is-completed {
  background: #10b981;
}
.stepper-line.is-active {
  background: linear-gradient(90deg, #10b981 0%, #2563eb 100%);
}

@media (max-width: 1050px) {
  .print-recipes-grid,
  .explore-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .scans-studio-grid,
  .material-feasibility-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .credit-packages-grid,
  .print-recipes-grid,
  .explore-showcase-grid {
    grid-template-columns: 1fr;
  }
  .credits-stats-row {
    grid-template-columns: 1fr;
  }
  .account-profile-drawer {
    width: 290px;
    right: -10px;
  }
  .production-stepper {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .stepper-line {
    display: none;
  }
  .stepper-step {
    flex-direction: row;
    gap: 12px;
    text-align: left;
  }
  .stepper-step .step-indicator {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   S519: Slice & Instant Quote Dual-Column Workbench (Universal Adaptive)
   ========================================================================== */
.workspace-view[data-workspace-view="slice-quote"] {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.slice-view-subtitle {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 860px;
}

.slice-workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.618fr) minmax(380px, 1fr);
  gap: 30px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

@media (max-width: 1180px) {
  .slice-workbench-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}


.slice-stage-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.slice-controls-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: sticky;
  top: 92px;
  align-self: start;
}

.slice-card {
  background: #ffffff;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 18px;
  padding: 24px 26px;
  box-shadow: 0 4px 20px rgba(0, 20, 60, 0.035);
}

.slice-model-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.slice-model-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.slice-format-badge {
  display: inline-block;
  align-self: flex-start;
  background: #e0f2fe;
  color: #0284c7;
  font-size: 11px;
  font-weight: 750;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.slice-model-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #00143c;
  line-height: 1.25;
}

.slice-model-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  color: #64748b;
}

.slice-status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 750;
  color: #059669;
  background: #ecfdf5;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* 3D Viewport Stage: Elevated Height for True CAD Experience */
.slice-viewport-container {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #1e293b;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4);
}

.slice-viewport-stage {
  position: relative;
  width: 100%;
  height: clamp(520px, 56vh, 660px);
  min-height: 520px;
  background: radial-gradient(circle at 50% 40%, #17243c 0%, #0a0f1d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  overflow: hidden;
}

.slice-viewport-bg-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(0, 175, 248, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 175, 248, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

[data-configure-core-host] {
  display: none !important;
}

.slice-cad-render-host {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.slice-cad-render-host .dml-geometry-viewer {
  width: 100%;
  height: 100%;
  min-height: 520px;
  background: transparent;
  display: flex;
  flex-direction: column;
  position: relative;
}

.slice-cad-render-host .dml-geometry-viewer canvas {
  width: 100%;
  height: 100%;
  min-height: 480px;
  cursor: grab;
  touch-action: none;
}


.slice-cad-render-host .dml-geometry-viewer__status {
  position: absolute;
  bottom: 8px;
  right: 12px;
  padding: 3px 8px;
  background: rgba(10, 15, 29, 0.85);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 4px;
  color: #00e5ff;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  z-index: 5;
}

.slice-cad-render-host .dml-geometry-viewer__controls {
  position: absolute;
  bottom: 8px;
  left: 12px;
  display: flex;
  gap: 6px;
  z-index: 5;
}

.slice-cad-render-host .dml-geometry-viewer__controls button {
  background: rgba(10, 15, 29, 0.85);
  border: 1px solid rgba(0, 229, 255, 0.3);
  color: #00e5ff;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.slice-cad-render-host .dml-geometry-viewer__controls button:hover {
  background: rgba(0, 229, 255, 0.2);
  border-color: #00e5ff;
}

.slice-cad-preview-img {
  max-width: 90%;
  max-height: 280px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

.slice-cad-fallback-canvas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.wireframe-cube-visual svg {
  filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.4));
  animation: sliceCadHover 4s ease-in-out infinite alternate;
}

@keyframes sliceCadHover {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-8px) rotate(2deg); }
}

.slice-viewport-hint {
  color: #00e5ff;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(0, 229, 255, 0.1);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.25);
}

.slice-camera-toolbar {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  display: flex;
  gap: 4px;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(8px);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.camera-tool-btn {
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 750;
  color: #94a3b8;
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.camera-tool-btn:hover,
.camera-tool-btn.is-active {
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.15);
}

.slice-axis-gizmo {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 5;
  display: flex;
  gap: 8px;
  font-size: 11px;
  font-weight: 850;
  background: rgba(15, 23, 42, 0.8);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.slice-axis-gizmo .axis-x { color: #f87171; }
.slice-axis-gizmo .axis-y { color: #4ade80; }
.slice-axis-gizmo .axis-z { color: #38bdf8; }

/* Step Mini Counter & Badges */
.step-counter-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #00143c;
  color: #ffffff;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  flex-shrink: 0;
}

.step-quote-pill {
  background: linear-gradient(135deg, #0284c7, #00aff8);
}

.slice-title-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Integrated Compact Geometric Specs Bar (Below 3D Stage) */
.slice-compact-specs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid rgba(0, 20, 60, 0.07);
  border-radius: 10px;
  padding: 10px 16px;
  margin-top: 14px;
}

.specs-bar-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12.5px;
}

.specs-bar-lbl {
  color: #64748b;
  font-weight: 650;
  font-size: 11.5px;
}

.specs-bar-val {
  color: #00143c;
  font-weight: 800;
  font-size: 13px;
}

.specs-verified-pill {
  font-size: 10.5px;
  font-weight: 750;
  color: #059669;
  background: #dcfce7;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.text-success {
  color: #059669;
}

/* 3. Parameter Customization Card */
.slice-customizer-card {
  background: #ffffff;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 18px;
  padding: 32px 36px;
  box-shadow: 0 6px 24px rgba(0, 20, 60, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.slice-customizer-card .control-card-header {
  margin-bottom: 6px;
}

.slice-custom-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 20, 60, 0.06);
}

.slice-custom-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.slice-section-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.slice-field-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.slice-field-capsule-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #f8fafc;
  color: #00143c;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 12px 4px 9px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  width: fit-content;
}

.slice-field-capsule-badge .badge-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #00aff8;
  flex-shrink: 0;
}

.slice-field-capsule-badge .badge-icon {
  width: 12px;
  height: 12px;
  color: #00aff8;
  flex-shrink: 0;
}

.label-primary {
  font-size: 13px;
  font-weight: 800;
  color: #00143c;
}

.label-subtitle {
  font-size: 11px;
  font-style: italic;
  color: #64748b;
  font-weight: 500;
  line-height: 1.35;
}

.scale-live-factor-pill {
  font-size: 11px;
  font-weight: 750;
  color: #0284c7;
  background: #e0f2fe;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Uniform Scale: Row 1 Preset Dropdown, Row 2 Custom Stepper, Row 3 Stacked Geometry */
.scale-ctrl-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scale-custom-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.scale-sub-hint {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 500;
}

.scale-field-sublabel {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.scale-preset-dropdown {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: #ffffff;
  border: 1px solid rgba(0, 20, 60, 0.15);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 650;
  color: #00143c;
  cursor: pointer;
  transition: all 0.15s ease;
  appearance: auto;
}

.scale-preset-dropdown:hover,
.scale-preset-dropdown:focus {
  border-color: #00aff8;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 175, 248, 0.12);
}

.scale-stepper-wrap {
  display: flex;
  align-items: center;
  border: 1px solid rgba(0, 20, 60, 0.15);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
  height: 40px;
}

.scale-stepper-wrap--clean {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(0, 20, 60, 0.15);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.scale-stepper-wrap--clean .stepper-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border: 0;
  color: #334155;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
  flex-shrink: 0;
}

.scale-stepper-wrap--clean .stepper-btn:hover {
  background: #e2e8f0;
  color: #00143c;
}

.scale-stepper-wrap--clean .scale-input-addon-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 0;
}

.scale-input-addon-wrap {
  display: flex;
  align-items: center;
  position: relative;
}

.scale-number-input {
  width: 100%;
  height: 40px;
  text-align: center;
  border: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: #00143c;
  padding: 0 16px 0 6px;
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}

.scale-number-input::-webkit-inner-spin-button,
.scale-number-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.scale-number-input:focus {
  outline: none;
}

.scale-pct-symbol {
  position: absolute;
  right: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  pointer-events: none;
}

/* 2-Line Stacked Geometry Readout Box (Dimensions on Row 1, Volume on Row 2) */
.scale-geom-stacked-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 8px;
  margin-top: 4px;
}

.scale-geom-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
}

.geom-line-lbl {
  color: #64748b;
  font-weight: 600;
}

.geom-line-val {
  color: #00143c;
  font-weight: 750;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.scale-quick-presets {
  display: flex;
  align-items: center;
  gap: 6px;
}

.scale-pill-btn {
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 750;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.scale-pill-btn:hover {
  background: #e2e8f0;
  color: #00143c;
}

.scale-pill-btn.is-active {
  background: #00143c;
  color: #ffffff;
  border-color: #00143c;
}

.scale-feedback-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

.scale-feedback-row-top {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 8px;
  margin: 0;
}

.scale-feedback-row-top .scale-metric-tag {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: #f8fafc;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 8px;
}

.scale-presets-full-row {
  width: 100%;
}

.scale-quick-presets--full {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  width: 100%;
}

.scale-quick-presets--full .scale-pill-btn {
  width: 100%;
  text-align: center;
  padding: 8px 4px;
  font-size: 12px;
  border-radius: 8px;
}

.scale-stepper-full-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid rgba(0, 20, 60, 0.06);
  border-radius: 8px;
  padding: 6px 12px;
}

.scale-stepper-label {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

.scale-metric-tag {
  display: flex;
  align-items: baseline;
  gap: 5px;
  background: #f8fafc;
  border: 1px solid rgba(0, 20, 60, 0.06);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
}

.scale-metric-tag .tag-lbl {
  color: #64748b;
  font-weight: 600;
}

.scale-metric-tag .tag-val {
  color: #00143c;
  font-weight: 800;
}

/* 2. Presettings Card (Right Column Top) */
.slice-presets-card {
  background: #ffffff;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 20px;
  padding: 32px 34px;
  box-shadow: 0 4px 20px rgba(0, 20, 60, 0.035);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.presets-card-header {
  margin-bottom: 4px;
}

.presets-header-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.slice-presets-card .slice-recipes-selector-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.slice-recipe-card {
  position: relative;
  background: #ffffff;
  border: 1.5px solid rgba(0, 20, 60, 0.09);
  border-radius: 12px;
  padding: 16px 18px;
  min-width: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}

.slice-recipe-card:hover {
  border-color: #00aff8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 175, 248, 0.1);
}

.slice-recipe-card.is-selected {
  border-color: #00aff8;
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
  box-shadow: 0 0 0 2px rgba(0, 175, 248, 0.25), 0 4px 12px rgba(0, 175, 248, 0.12);
}

.recipe-radio-indicator {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  transition: all 0.15s ease;
}

.slice-recipe-card.is-selected .recipe-radio-indicator {
  border-color: #00aff8;
  background: #00aff8;
  box-shadow: inset 0 0 0 2px #ffffff;
}

.recipe-card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 20px;
}

.recipe-title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.recipe-title-row h4 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  color: #00143c;
  line-height: 1.3;
}

.recipe-cat-badge {
  font-size: 9px;
  font-weight: 750;
  color: #0284c7;
  background: rgba(0, 175, 248, 0.1);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

.recipe-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #475569;
}

.recipe-active-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 14px 18px;
}

.recipe-active-callout .callout-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.recipe-active-callout .callout-text strong {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #0369a1;
  margin-bottom: 2px;
}

.recipe-active-callout .callout-text p {
  margin: 0;
  font-size: 11px;
  color: #0284c7;
  line-height: 1.35;
}

/* Universal is-hidden utility for zero inline-style CSP compliance */
.is-hidden {
  display: none !important;
}

/* Control Card Headers General */
.control-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.step-counter {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #00143c;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 850;
  flex-shrink: 0;
}

.control-card-header h3 {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 800;
  color: #00143c;
}

.header-text-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.header-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.header-title-line h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #00143c;
}

.control-card-header p {
  margin: 0;
  font-size: 11px;
  font-style: italic;
  color: #64748b;
  line-height: 1.4;
}

.section-purpose-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 750;
  padding: 2.5px 8px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  line-height: 1;
}

.badge-optional {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.badge-recommended {
  background: #e0f2fe;
  color: #0284c7;
  border: 1px solid #bae6fd;
}

.dock-hint-badge {
  font-size: 10.5px;
  font-weight: 750;
  color: #0284c7;
  background: #e0f2fe;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Material Select & Feasibility Banner */
.slice-select-input {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 20, 60, 0.12);
  background: #ffffff;
  color: #00143c;
  font-size: 13px;
  font-weight: 650;
  box-sizing: border-box;
}

.slice-textarea-input {
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 20, 60, 0.12);
  background: #ffffff;
  color: #00143c;
  font-size: 12.5px;
  resize: vertical;
  box-sizing: border-box;
}

.slice-feasibility-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  margin-top: 12px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  transition: all 0.2s ease;
}

.slice-feasibility-banner.is-warning,
.slice-feasibility-banner.is-review-required {
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}

.feasibility-status-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.feasibility-status-copy strong {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  margin-bottom: 2px;
}

.feasibility-status-copy p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  opacity: 0.9;
}

/* 3.1 & 3.2 Side-by-Side: Uniform Scale (Left) & Manufacturing Material (Right) */
.slice-scale-material-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  padding: 14px 20px 28px 20px;
  border-bottom: 1px solid rgba(0, 20, 60, 0.055);
  align-items: start;
}

@media (max-width: 900px) {
  .slice-scale-material-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.scale-column-box,
.material-column-box {
  min-width: 0;
}

.scale-column-box {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.scale-sub-block {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0, 20, 60, 0.06);
}

.qty-sub-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qty-sub-block .qty-bulk-callout {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  background: #f8fafc;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 8px;
  font-size: 11px;
  color: #334155;
  line-height: 1.4;
  margin-top: 2px;
}

.qty-sub-block .qty-bulk-callout-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.qty-sub-block .qty-bulk-callout-text strong {
  color: #00143c;
}

.qty-sub-block .qty-bulk-callout-link {
  color: #00aff8;
  font-weight: 700;
  text-decoration: none;
  margin-left: 4px;
}

.qty-sub-block .qty-bulk-callout-link:hover {
  text-decoration: underline;
}

.material-column-box {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.material-stacked-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.material-group-card {
  background: #f8fafc;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.material-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 20, 60, 0.06);
}

.material-group-title {
  font-size: 11.5px;
  font-weight: 800;
  color: #00143c;
}

.material-group-badge {
  font-size: 9.5px;
  font-weight: 750;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.badge-instant {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.badge-review {
  background: rgba(234, 88, 12, 0.12);
  color: #ea580c;
}

.material-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.material-choice-btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 15px;
  background: #ffffff;
  border: 1px solid rgba(0, 20, 60, 0.1);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 0.14s ease;
}

.material-choice-btn:hover {
  border-color: #00aff8;
  background: #f0f9ff;
}

.material-choice-btn.is-selected {
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
  border-color: #00aff8;
  color: #00143c;
  box-shadow: 0 0 0 2px rgba(0, 175, 248, 0.22), 0 3px 10px rgba(0, 175, 248, 0.1);
}

.mat-radio-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #ffffff;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.14s ease;
}

.material-choice-btn.is-selected .mat-radio-dot {
  border-color: #00aff8;
  background: #00aff8;
  box-shadow: inset 0 0 0 2.5px #ffffff;
}

.mat-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mat-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.mat-title {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
}

.material-choice-btn.is-selected .mat-title {
  color: #00143c;
  font-weight: 850;
}

.mat-badge-tag {
  font-size: 9.5px;
  font-weight: 750;
  padding: 1px 5px;
  border-radius: 3px;
  background: #e2e8f0;
  color: #334155;
}

.material-choice-btn.is-selected .mat-badge-tag {
  background: rgba(0, 175, 248, 0.15);
  color: #0080ea;
  font-weight: 750;
}

.mat-desc {
  font-size: 10.5px;
  color: #64748b;
  line-height: 1.3;
}

.material-choice-btn.is-selected .mat-desc {
  color: #475569;
}

/* Interstitial Review Notice between Common and Engineering Materials */
.material-review-transition-note {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px dashed rgba(0, 20, 60, 0.12);
  border-radius: 7px;
  font-size: 11px;
  line-height: 1.35;
  color: #475569;
  font-weight: 500;
}

.material-review-transition-note .note-bullet {
  color: #ea580c;
  font-size: 10px;
  flex-shrink: 0;
}

/* Engineering Materials Dropdown Styling */
.engineering-select-card {
  background: #f8fafc;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
}

.engineering-dropdown-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.engineering-select-wrap {
  position: relative;
}

.engineering-material-dropdown {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: #ffffff;
  border: 1.5px solid rgba(0, 20, 60, 0.16);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #00143c;
  cursor: pointer;
  transition: all 0.15s ease;
  appearance: auto;
}

.engineering-material-dropdown:hover,
.engineering-material-dropdown:focus {
  border-color: #00aff8;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 175, 248, 0.12);
}

.engineering-material-dropdown.is-active {
  border-color: #ea580c;
  background: #fffaf0;
  color: #9a3412;
  font-weight: 700;
}

.engineering-review-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  background: #fff7ed;
  border: 1px dashed rgba(234, 88, 12, 0.4);
  border-radius: 6px;
  color: #9a3412;
  transition: all 0.2s ease;
}

.engineering-review-banner.is-hidden {
  display: none !important;
}

.engineering-review-banner strong {
  font-size: 11.5px;
  font-weight: 800;
  display: block;
}

.engineering-review-banner p {
  margin: 2px 0 0;
  font-size: 10.5px;
  line-height: 1.35;
  color: #c2410c;
}

.btn-dfm-inquiry-link {
  align-self: center;
  padding: 6px 12px;
  background: #ea580c;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
  margin-left: auto;
}

.btn-dfm-inquiry-link:hover {
  background: #c2410c;
}


.slice-qty-flex-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.qty-left-group {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 320px;
}

.qty-control-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.qty-control-stacked {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.quantity-stepper-wrap {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  border: 1.5px solid rgba(0, 20, 60, 0.16);
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 20, 60, 0.04);
}

.quantity-stepper-wrap--full {
  width: 100%;
}

.quantity-stepper-wrap .stepper-btn {
  width: 44px;
  height: 40px;
  background: #f8fafc;
  border: 0;
  color: #00143c;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
  flex-shrink: 0;
}

.quantity-stepper-wrap .stepper-btn:hover {
  background: #e2e8f0;
}

.quantity-stepper-wrap .stepper-input {
  flex: 1;
  width: auto;
  border: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: #00143c;
  padding: 0;
  -moz-appearance: textfield;
}

.quantity-stepper-wrap .stepper-input::-webkit-outer-spin-button,
.quantity-stepper-wrap .stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-badge-row {
  display: flex;
  align-items: center;
}

.volume-discount-badge {
  font-size: 11.5px;
  font-weight: 750;
  color: #0284c7;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.2);
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-block;
  white-space: nowrap;
}

.qty-bulk-callout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.06) 0%, rgba(0, 20, 60, 0.02) 100%);
  border: 1px solid rgba(2, 132, 199, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
}

.qty-bulk-callout-icon {
  font-size: 14px;
}

.qty-bulk-callout-text {
  font-size: 11px;
  color: #334155;
}

.qty-bulk-callout-text strong {
  color: #0f172a;
  font-weight: 800;
}

.qty-bulk-callout-link {
  font-size: 11px;
  font-weight: 750;
  color: #0284c7;
  text-decoration: none;
  margin-left: 4px;
}

.qty-bulk-callout-link:hover {
  text-decoration: underline;
  color: #0369a1;
}

/* 3.4 Infill Density: 2-Column Architecture */
.slice-infill-section {
  padding: 30px 24px;
  border-bottom: 1px solid rgba(0, 20, 60, 0.055);
}

.slice-infill-header {
  margin-bottom: 16px;
}

.slice-infill-header .slice-field-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.infill-subtitle {
  font-size: 11px;
  font-style: italic;
  color: #64748b;
  font-weight: normal;
  line-height: 1.35;
}

.infill-single-col-card {
  background: #f8fafc;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.infill-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 20, 60, 0.06);
}

.infill-list-title-wrap strong {
  font-size: 12px;
  font-weight: 750;
  color: #00143c;
}

.infill-list-subtitle {
  font-size: 11px;
  color: #64748b;
  display: block;
  margin-top: 1px;
}

.infill-col-badge {
  font-size: 9.5px;
  font-weight: 750;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.badge-recommended {
  background: rgba(2, 132, 199, 0.12);
  color: #0284c7;
}

.infill-tier-list-full {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.infill-tier-btn-full {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: #ffffff;
  border: 1.5px solid rgba(0, 20, 60, 0.1);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  width: 100%;
}

.infill-tier-btn-full:hover {
  border-color: #00aff8;
  background: #f0f9ff;
}

.infill-tier-btn-full.is-active {
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
  border-color: #00aff8;
  color: #00143c;
  box-shadow: 0 0 0 2px rgba(0, 175, 248, 0.22), 0 3px 10px rgba(0, 175, 248, 0.1);
}

.tier-left-col {
  min-width: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tier-left-col .tier-pct {
  font-size: 16px;
  font-weight: 800;
  color: #00143c;
}

.infill-tier-btn-full.is-active .tier-left-col .tier-pct {
  color: #0080ea;
}

.tier-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tier-header-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Softened font-weight for title as requested by user */
.tier-header-line .tier-title {
  font-size: 13px;
  font-weight: 650;
  color: #0f172a;
}

.infill-tier-btn-full.is-active .tier-header-line .tier-title {
  color: #00143c;
  font-weight: 750;
}

.tier-badge-pill {
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #334155;
}

.tier-badge-pill.pill-best {
  background: rgba(2, 132, 199, 0.15);
  color: #0284c7;
  font-weight: 700;
}

.infill-tier-btn-full.is-active .tier-badge-pill {
  background: rgba(0, 175, 248, 0.15);
  color: #0080ea;
  font-weight: 700;
}

.infill-tier-btn-full.is-active .tier-badge-pill.pill-best {
  background: #00aff8;
  color: #ffffff;
}

.tier-detail-desc {
  font-size: 11px;
  color: #64748b;
  line-height: 1.45;
  margin: 2px 0 0;
}

.infill-tier-btn-full.is-active .tier-detail-desc {
  color: #475569;
}

.tier-example-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.tier-example-tags .ex-label {
  font-size: 10px;
  font-weight: 650;
  color: #94a3b8;
}

.tier-example-tags .ex-tag {
  font-size: 10px;
  font-weight: 550;
  padding: 1px 6px;
  border-radius: 3px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid rgba(0, 20, 60, 0.06);
}

.infill-tier-btn-full.is-active .tier-example-tags .ex-tag {
  background: #e0f2fe;
  color: #0369a1;
  border-color: rgba(0, 175, 248, 0.2);
}

.tier-meta-aside {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  min-width: 90px;
}

.tier-meta-aside .meta-highlight {
  font-size: 11px;
  font-weight: 750;
  color: #0284c7;
}

.infill-tier-btn-full.is-active .tier-meta-aside .meta-highlight {
  color: #0080ea;
}

.tier-meta-aside .meta-sub {
  font-size: 10px;
  color: #94a3b8;
}

.infill-tier-btn-full.is-active .tier-meta-aside .meta-sub {
  color: #64748b;
}

/* Infill Utility Stacked Lines (Separate Rows for Custom and High-Density) */
.infill-utility-stacked-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 20, 60, 0.08);
}

.infill-util-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.infill-util-line--high {
  width: 100%;
}

.infill-util-line--high .infill-high-density-dropdown-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.infill-util-line--high .infill-high-density-select {
  flex: 1;
  height: 36px;
}

.infill-util-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
}

.infill-util-hint {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 500;
}

.infill-custom-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.infill-custom-input-wrap {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(0, 20, 60, 0.14);
  border-radius: 6px;
  padding: 0 6px;
  height: 32px;
  width: 72px;
}

.infill-custom-input {
  width: 40px;
  border: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: #00143c;
  padding: 0;
  outline: none;
}

.infill-custom-unit {
  font-size: 11px;
  font-weight: 750;
  color: #64748b;
}

.infill-custom-apply {
  height: 32px;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  background: #f1f5f9;
  border: 1px solid rgba(0, 20, 60, 0.12);
  border-radius: 6px;
  cursor: pointer;
  color: #00143c;
  transition: all 0.15s ease;
}

.infill-custom-apply:hover {
  background: #00aff8;
  color: #ffffff;
  border-color: #00aff8;
}

.infill-high-density-dropdown-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 280px;
}

.infill-high-density-select {
  flex: 1;
  height: 36px;
  padding: 0 10px;
  background: #ffffff;
  border: 1.5px solid rgba(0, 20, 60, 0.16);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #00143c;
  cursor: pointer;
  transition: all 0.15s ease;
  appearance: auto;
}

.infill-high-density-select:hover,
.infill-high-density-select:focus {
  border-color: #00aff8;
  outline: none;
}

.infill-high-density-select.is-active {
  border-color: #ea580c;
  background: #fffaf0;
  color: #9a3412;
  font-weight: 700;
}

.infill-high-warning-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  background: #fff7ed;
  border: 1px dashed rgba(234, 88, 12, 0.4);
  border-radius: 6px;
  color: #9a3412;
  font-size: 11px;
  margin-top: 4px;
}

.infill-high-warning-banner.is-hidden {
  display: none !important;
}

.infill-high-warning-banner strong {
  color: #9a3412;
  font-weight: 750;
}

.infill-high-warning-banner span {
  color: #c2410c;
  line-height: 1.35;
}


/* 3.5 Additional Notes (Full Width) */
.slice-notes-full-section {
  padding: 28px 24px;
}

.slice-notes-full-section .slice-field-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.slice-notes-full-section .slice-textarea-input {
  width: 100%;
  height: 88px;
  min-height: 88px;
  max-height: 160px;
  padding: 12px 16px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 10px;
  border: 1px solid rgba(0, 20, 60, 0.14);
  resize: vertical;
  font-family: inherit;
  background: #ffffff;
  color: #00143c;
}

/* Action Bar & Progress Bar */
.slice-action-bar {
  margin: 2px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.slice-calculate-btn {
  width: 100%;
  min-height: 52px;
  font-size: 15.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, #00aff8 0%, #0080ea 100%);
  color: #ffffff;
  border: 0;
  box-shadow: 0 4px 14px rgba(0, 175, 248, 0.3);
  cursor: pointer;
  transition: all 0.15s ease;
}

.slice-calculate-btn:hover {
  background: linear-gradient(135deg, #009de0 0%, #0072ce 100%);
  box-shadow: 0 6px 18px rgba(0, 175, 248, 0.4);
}

/* Live Engineering Slicing Progress Console (Streamlined Prompt Panel with Accordion) */
.slice-progress-panel {
  margin-top: 0;
  background: #f8fafc;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: fadeIn 0.2s ease-out;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.slice-progress-panel.is-standby {
  border-color: rgba(0, 20, 60, 0.08);
  background: #f8fafc;
}

.progress-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.engine-accordion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid rgba(0, 20, 60, 0.12);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.engine-accordion-toggle:hover {
  background: #f1f5f9;
  color: #00143c;
  border-color: #00aff8;
}

.engine-accordion-toggle svg {
  transition: transform 0.2s ease;
}

.slice-progress-panel.is-collapsed .engine-accordion-toggle svg {
  transform: rotate(0deg);
}

.slice-progress-panel:not(.is-collapsed) .engine-accordion-toggle svg {
  transform: rotate(180deg);
}

.slice-progress-panel.is-collapsed .slice-pipeline-lines,
.slice-progress-panel.is-collapsed .slice-progress-track {
  display: none !important;
}

.engine-live-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.engine-pulse-beacon {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: beacon-pulse 1.4s infinite cubic-bezier(0.66, 0, 0, 1);
}

.engine-pulse-beacon.is-standby {
  background: #94a3b8;
  box-shadow: none;
  animation: none;
}

@keyframes beacon-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.engine-status-title {
  font-size: 13px;
  font-weight: 750;
  color: #00143c;
}

.engine-telemetry {
  display: flex;
  align-items: center;
  gap: 8px;
}

.engine-timer {
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 700;
  color: #64748b;
  background: #edf2f7;
  padding: 2px 7px;
  border-radius: 4px;
}

.engine-pct-pill {
  font-size: 12px;
  font-weight: 800;
  color: #0080ea;
  background: #e0f2fe;
  padding: 2px 8px;
  border-radius: 999px;
}

.engine-pct-pill.is-standby {
  background: #f1f5f9;
  color: #64748b;
}

/* Track with continuous 60fps barber-pole shimmer motion */
.slice-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(0, 20, 60, 0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.slice-progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #00aff8 0%, #10b981 100%);
  background-size: 32px 32px;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.3) 75%,
    transparent 75%,
    transparent
  );
  animation: progress-shimmer 1s linear infinite;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes progress-shimmer {
  0% { background-position: 0 0; }
  100% { background-position: 32px 0; }
}

/* 4 Light, Understated Prompt Lines (No Heavy Box Frames) */
.slice-pipeline-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 20, 60, 0.05);
}

.pipeline-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #94a3b8;
  padding: 2px 0;
  transition: all 0.15s ease;
}

.pipeline-line .line-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #edf2f7;
  color: #94a3b8;
  font-size: 9px;
  font-weight: 750;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pipeline-line .line-label {
  flex: 1;
  color: #64748b;
  font-weight: 500;
}

.pipeline-line .line-status {
  font-size: 10.5px;
  color: #cbd5e1;
  font-weight: 600;
}

.pipeline-line.is-active {
  color: #0080ea;
}

.pipeline-line.is-active .line-dot {
  background: #00aff8;
  color: #ffffff;
}

.pipeline-line.is-active .line-label {
  color: #0080ea;
  font-weight: 700;
}

.pipeline-line.is-active .line-status {
  color: #0080ea;
  font-weight: 700;
}

.pipeline-line.is-done .line-dot {
  background: #10b981;
  color: #ffffff;
  font-size: 0;
}

.pipeline-line.is-done .line-dot::before {
  content: "✓";
  font-size: 10px;
  font-weight: 900;
}

.pipeline-line.is-done .line-label {
  color: #334155;
  font-weight: 600;
}

.pipeline-line.is-done .line-status {
  color: #10b981;
  font-weight: 700;
}

/* Slicing Button Active Spinner */
.slice-calculate-btn.is-slicing {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  cursor: wait;
}

.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.result-locked-badge.badge-standby {
  background: #f1f5f9;
  color: #64748b;
  border-color: rgba(0, 20, 60, 0.1);
}

.slice-quote-result-card.just-updated {
  animation: highlight-quote 1.2s ease-out;
}

@keyframes highlight-quote {
  0% {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.5), 0 8px 30px rgba(0, 175, 248, 0.2);
    border-color: #10b981;
  }
  100% {
    box-shadow: 0 8px 30px rgba(0, 175, 248, 0.12);
    border-color: #00aff8;
  }
}

/* Step 4: Slicing Results & Live Financial Quote Card */
.slice-quote-result-card {
  background: #ffffff;
  border: 2px solid #00aff8;
  border-radius: 20px;
  padding: 34px 34px;
  box-shadow: 0 8px 30px rgba(0, 175, 248, 0.12);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.result-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.result-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.result-locked-badge {
  font-size: 11px;
  font-weight: 800;
  color: #059669;
  background: #dcfce7;
  padding: 2px 8px;
  border-radius: 999px;
}

.result-header-left small {
  font-family: monospace;
  font-size: 11.5px;
  color: #64748b;
}

.result-timestamp {
  font-size: 11px;
  color: #94a3b8;
}

.slice-metrics-dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 18px 0;
  border-top: 1px solid rgba(0, 20, 60, 0.06);
  border-bottom: 1px solid rgba(0, 20, 60, 0.06);
}

.slice-metrics-dashboard--two-up {
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 22px 0;
}

.metric-tile {
  background: #f8fafc;
  border: 1px solid rgba(0, 20, 60, 0.05);
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.metric-label {
  font-size: 10.5px;
  font-weight: 750;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.metric-value {
  font-size: 18px;
  font-weight: 850;
  color: #00143c;
}

.metric-sub-val {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.slice-pricing-breakdown {
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(0, 20, 60, 0.06);
}

.slice-pricing-breakdown--card-only {
  background: #f8fafc;
  border-radius: 14px;
  padding: 20px 24px;
  border: 1px solid rgba(0, 20, 60, 0.08);
}

.pricing-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.pricing-headline-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pricing-sub {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #64748b;
  text-transform: uppercase;
}

.pricing-big-amount {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: 26px;
  font-weight: 900;
  color: #00143c;
  letter-spacing: -0.02em;
}

.currency-sign {
  font-size: 18px;
  font-weight: 750;
  color: #64748b;
}

.pricing-unit-rate {
  font-size: 12px;
  font-weight: 650;
  color: #64748b;
  margin-left: 6px;
}

.pricing-payment-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 750;
  color: #0284c7;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.2);
  padding: 5px 10px;
  border-radius: 6px;
}

.pricing-guarantee-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 20, 60, 0.08);
  font-size: 11px;
  color: #475569;
}

.pricing-guarantee-note .guarantee-icon {
  font-size: 13px;
}

/* S549D Applied Slicing Manifest (Collapsible Dropdown / Accordion) */
.slice-manifest-strip {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.slice-manifest-strip.is-expanded {
  gap: 10px;
  padding: 12px 14px;
}

.slice-manifest-strip .manifest-header-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.slice-manifest-strip .manifest-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.slice-manifest-strip .manifest-pulse-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
}

.slice-manifest-strip.is-standby .manifest-pulse-dot {
  background: #94a3b8;
}

.slice-manifest-strip .manifest-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #00143c;
}

.slice-manifest-strip .manifest-recipe-pill {
  font-size: 10px;
  font-weight: 700;
  background: #e2e8f0;
  color: #475569;
  padding: 2px 7px;
  border-radius: 999px;
}

.slice-manifest-strip .manifest-meta-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slice-manifest-strip .manifest-status-tag {
  font-size: 11px;
  font-weight: 700;
  color: #059669;
}

.slice-manifest-strip.is-standby .manifest-status-tag {
  color: #64748b;
}

.manifest-accordion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 3px 9px 3px 10px;
  font-size: 10.5px;
  font-weight: 750;
  color: #00143c;
  cursor: pointer;
  transition: all 0.15s ease;
}

.manifest-accordion-toggle:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.manifest-chevron-svg {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.slice-manifest-strip.is-expanded .manifest-chevron-svg {
  transform: rotate(180deg);
}

.manifest-expandable-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.slice-manifest-strip.is-expanded .manifest-expandable-body {
  max-height: 180px;
  opacity: 1;
}

.slice-manifest-strip .manifest-chips-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 4px;
}

.slice-manifest-strip .manifest-chip {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.slice-manifest-strip .manifest-chip .chip-lbl {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.03em;
}

.slice-manifest-strip .manifest-chip .chip-val {
  font-size: 11.5px;
  font-weight: 800;
  color: #00143c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slice-commerce-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.slice-credit-card-checkout-btn {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 0 !important;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 750;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.14s ease;
}

.slice-credit-card-checkout-btn:hover {
  background: #0369a1 !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.ghost-action {
  background: transparent;
  border: 1px solid rgba(0, 20, 60, 0.1);
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 12px;
  font-weight: 750;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.12s;
}

.ghost-action:hover {
  background: #f8fafc;
  border-color: rgba(0, 20, 60, 0.2);
}

.checkout-trust-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 20, 60, 0.06);
  margin-top: 4px;
}

.trust-badge-item {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
}

/* ==========================================================================
   S512 / S515 / S516: Design Request Studio (Dual-Pane Workbench)
   ========================================================================== */
.design-workbench-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  transition: grid-template-columns 0.22s ease;
}

.design-workbench-split-grid.is-left-collapsed {
  grid-template-columns: 54px minmax(0, 1fr);
}

.design-workbench-split-grid.is-left-collapsed .workbench-pane--left {
  display: none !important;
}

.design-workbench-split-grid.is-left-collapsed .workbench-rail--left {
  display: flex !important;
}

.design-workbench-split-grid.is-right-collapsed {
  grid-template-columns: minmax(0, 1fr) 54px;
}

.design-workbench-split-grid.is-right-collapsed .workbench-pane--right {
  display: none !important;
}

.design-workbench-split-grid.is-right-collapsed .workbench-rail--right {
  display: flex !important;
}

@media (max-width: 1050px) {
  .design-workbench-split-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.workbench-pane {
  background: #ffffff;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 18px rgba(0, 20, 60, 0.03);
  min-width: 0;
}

.workbench-pane--left {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 18px rgba(0, 20, 60, 0.02);
}

.workbench-pane--left .pane-kicker {
  color: #475569;
}

.workbench-pane--right {
  background: #ffffff;
  border: 1px solid rgba(2, 132, 199, 0.32);
  box-shadow: 0 6px 24px rgba(2, 132, 199, 0.06), 0 2px 6px rgba(0, 20, 60, 0.03);
}

.workbench-pane--right .pane-kicker {
  color: #0284c7;
}

.pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 20, 60, 0.06);
  min-height: 36px;
  height: 36px;
  box-sizing: border-box;
}

.pane-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pane-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  min-width: 0;
}

.pane-header-right,
.pane-header-right-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.pane-inline-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: #00143c;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pane-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #64748b;
  color: #ffffff;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  flex-shrink: 0;
}

.pane-step-badge--working {
  background: #0284c7;
}

.pane-kicker {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #475569;
  text-transform: uppercase;
  white-space: nowrap;
}

.pane-kicker--working {
  color: #0284c7;
}

/* Fallback for any legacy elements */
.pane-header-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.draft-save-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 750;
  color: #059669;
}

.pane-collapse-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid rgba(0, 20, 60, 0.1);
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
}

.pane-collapse-btn:hover {
  background: #f1f5f9;
  border-color: rgba(0, 20, 60, 0.2);
}

/* 54px Rails */
.workbench-rail {
  width: 54px;
  min-height: 480px;
  background: #f1f5f9;
  border: 1px dashed rgba(0, 20, 60, 0.15);
  border-radius: 14px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 0;
  overflow: hidden;
}

.rail-restore-btn {
  width: 100%;
  height: 100%;
  min-height: 420px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 8px 4px;
}

.rail-icon {
  font-size: 12px;
  color: #0284c7;
}

.rail-vertical-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0284c7;
  white-space: nowrap;
}

/* Left & Right Segmented Tabs (Placed outside of cutout box) */
.source-segmented-tabs,
.direction-segmented-tabs {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 9px;
  margin-top: 12px;
  margin-bottom: 14px;
}

.source-tab-btn {
  flex: 1;
  height: 28px;
  line-height: 1;
  box-sizing: border-box;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 750;
  color: #64748b;
  background: transparent;
  cursor: pointer;
  transition: all 0.12s ease;
}

.source-tab-btn:hover {
  color: #00143c;
}

.source-tab-btn.is-active {
  background: #ffffff;
  color: #00143c;
  box-shadow: 0 2px 6px rgba(0, 20, 60, 0.06);
}
/* ==========================================================================
   S520: Customer-First Design Request Unified Workbench Styles
   ========================================================================== */

/* Source Selectors Grid (Project & Revision Dropdowns side-by-side) */
.source-selectors-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

/* Aligned Twin Screens (Left & Right Viewports Aligned at Same Height & Twin Chassis) */
.aligned-screen-box {
  min-height: 275px;
  max-height: 275px;
  background: #f8fafc;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(0, 20, 60, 0.04);
  box-sizing: border-box;
}

.aligned-screen-box .preview-viewport-stage,
.aligned-screen-box .working-screen-viewport {
  height: 195px;
  background: radial-gradient(circle at 50% 40%, #1e293b 0%, #090d16 100%);
  border-radius: 8px;
  border: 1px solid rgba(0, 20, 60, 0.12);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Contained Version Items List with Checkboxes (Multi-select) */
.source-version-items-section {
  background: #ffffff;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 190px;
  overflow-y: auto;
}

.source-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 20, 60, 0.06);
}

.items-kicker {
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: 0.05em;
  color: #64748b;
  text-transform: uppercase;
}

.items-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.items-header-actions strong {
  font-size: 11.5px;
  color: #0284c7;
  font-weight: 750;
}

.select-all-link-btn {
  background: transparent;
  border: 0;
  color: #0284c7;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.source-version-items-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.source-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid rgba(0, 20, 60, 0.05);
  cursor: pointer;
  transition: all 0.12s ease;
}

.source-item-row:hover {
  background: #f1f5f9;
  border-color: rgba(0, 20, 60, 0.12);
}

.source-item-row.is-active-item {
  background: #e0f2fe;
  border-color: #38bdf8;
}

.source-item-row input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.source-item-name {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: #00143c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-item-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #334155;
}

.source-item-size {
  font-size: 10px;
  color: #94a3b8;
}

.version-card.is-active-item {
  border-color: #00aff8;
  background: rgba(0, 175, 248, 0.03);
}

.version-card-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.version-card-row input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.version-card-name {
  font-size: 12.5px;
  font-weight: 750;
  color: #00143c;
  flex: 1;
}

.version-badge {
  font-size: 10px;
  font-weight: 750;
  padding: 1px 6px;
  border-radius: 4px;
}

.version-badge.revisions {
  color: #4338ca;
  background: #e0e7ff;
}

.version-badge.requests {
  color: #047857;
  background: #d1fae5;
}

.version-badge.drafts {
  color: #b45309;
  background: #fef3c7;
}

.version-summary-text {
  font-size: 11px;
  color: #64748b;
  margin: 0;
  padding-left: 22px;
}

/* Contained Supporting Assets sublist */
.version-assets-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
  padding-left: 18px;
  border-left: 2px solid rgba(0, 20, 60, 0.06);
}

.version-asset-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  background: #f8fafc;
  font-size: 11.5px;
  cursor: pointer;
  transition: background 0.12s;
}

.version-asset-row:hover {
  background: #f1f5f9;
}

.version-asset-row.is-active-asset {
  background: #e0f2fe;
  color: #0369a1;
}

.asset-icon {
  font-size: 12px;
  opacity: 0.8;
}

.asset-name {
  flex: 1;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-badge {
  font-size: 9.5px;
  font-weight: 700;
  color: #475569;
  background: #e2e8f0;
  padding: 1px 4px;
  border-radius: 3px;
}

.asset-size {
  font-size: 10px;
  color: #94a3b8;
}

/* Left Preview Box & High-Vis Stage */
.source-preview-box {
  background: #f8fafc;
  border: 1px solid rgba(0, 20, 60, 0.07);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.preview-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #64748b;
  background: #e2e8f0;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.preview-box-header strong {
  font-size: 13px;
  font-weight: 750;
  color: #00143c;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-viewport-stage {
  height: 220px;
  background: radial-gradient(circle at 50% 40%, #1e293b 0%, #0b1329 100%);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-viewport-stage canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.preview-viewport-stage img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.preview-doc-card {
  padding: 16px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  max-width: 90%;
  color: #00143c;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.preview-doc-card h4 {
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 800;
  color: #0369a1;
}

.preview-doc-card p {
  margin: 0;
  font-size: 11.5px;
  color: #475569;
  line-height: 1.4;
}

.preview-doc-card--text {
  width: min(90%, 920px);
  max-height: 100%;
  overflow: auto;
  text-align: left;
}

.preview-doc-card--text pre {
  margin: 10px 0 0;
  padding: 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  font: 500 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.preview-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.preview-note {
  color: #64748b;
  font-style: italic;
}

.preview-meta-info {
  color: #0284c7;
  font-weight: 700;
}

.source-transfer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 20, 60, 0.06);
}

.add-selected-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 750;
}

.transfer-hint {
  font-size: 11px;
  color: #64748b;
}

/* S520 Notched Cutout Selector Box (Framing only the 2nd row dropdowns/inputs) */
.workbench-cutout-box {
  position: relative;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
  margin-bottom: 10px;
}

.workbench-cutout-box--source {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.workbench-cutout-box--target {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* S520 Mission Brief Strip (Position-Aligned context right above 3D Screens) */
.workbench-brief-strip {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  padding: 8px 12px 10px;
  margin-top: 0;
  margin-bottom: 12px;
  height: 168px;
  min-height: 168px;
  box-sizing: border-box;
}

.workbench-brief-strip--source {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.workbench-brief-strip--target {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.workbench-brief-strip--dossier {
  height: auto;
  min-height: 96px;
  padding: 10px 14px 12px;
}

.workbench-brief-strip .brief-meta-ribbon {
  margin: 4px 0 6px;
  padding: 5px 10px;
  gap: 3px;
}

.workbench-brief-strip .brief-meta-item {
  padding: 2px 0;
  font-size: 11.5px;
}

.brief-meta-inline-input {
  flex: 1;
  min-width: 0;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #0f172a;
  font-family: inherit;
  line-height: 1.35;
  height: 22px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.brief-meta-inline-input:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

.brief-meta-inline-input::placeholder {
  color: #94a3b8;
  font-weight: 400;
  font-style: italic;
}

.brief-meta-ribbon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 6px 0 10px;
  padding: 8px 12px;
  background: rgba(241, 245, 249, 0.95);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.brief-meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #334155;
  padding: 3px 0;
}

.brief-meta-item:not(:last-child) {
  border-bottom: 1px solid rgba(226, 232, 240, 0.75);
}

.brief-meta-label {
  display: inline-block;
  min-width: 135px;
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.brief-meta-val {
  font-weight: 600;
  color: #0f172a;
  word-break: break-word;
}

.brief-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.brief-strip-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #334155;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.workbench-brief-strip--target .brief-strip-kicker {
  color: #0284c7;
}

.brief-strip-pill {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  background: #e2e8f0;
  padding: 1.5px 7px;
  border-radius: 999px;
  line-height: 1.3;
}

.brief-strip-hint {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 500;
}

.brief-strip-body {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 0;
}

.brief-strip-text {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: #1e293b;
  font-weight: 500;
}

.brief-strip-input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11.5px;
  line-height: 1.35;
  color: #0f172a;
  background: #ffffff;
  font-family: inherit;
  resize: none;
  box-sizing: border-box;
  height: 48px;
}

.brief-strip-input:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

/* S520 Clean Key-Value Baseline Spec Table */
.baseline-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  line-height: 1.45;
  margin-top: 8px;
}

.baseline-spec-table tr {
  border-bottom: 1px solid #edf2f7;
}

.baseline-spec-table tr:last-child {
  border-bottom: none;
}

.baseline-spec-table th {
  text-align: left;
  padding: 6px 10px 6px 4px;
  font-weight: 700;
  color: #64748b;
  width: 38%;
  white-space: nowrap;
  vertical-align: top;
}

.baseline-spec-table td {
  padding: 6px 4px 6px 8px;
  color: #0f172a;
  font-weight: 500;
  vertical-align: top;
}

.baseline-spec-notes {
  white-space: pre-line;
  line-height: 1.4;
  color: #1e293b;
}

.empty-spec-placeholder {
  color: #94a3b8;
  font-style: italic;
}

.cutout-badge {
  position: absolute;
  top: -10px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  background: #ffffff;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #0f172a;
  line-height: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cutout-badge-icon {
  font-size: 12px;
  line-height: 1;
}

.cutout-badge-text {
  font-size: 11px;
  font-weight: 750;
  color: #00143c;
}

/* S520 Distinct Step 1 Selector Box (Backward Compatibility) */
.workbench-step-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 10px;
  margin-bottom: 12px;
}

.step-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #edf2f7;
  flex-wrap: wrap;
}

.step-box-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.step-number-badge {
  font-size: 9px;
  font-weight: 800;
  background: #0284c7;
  color: #ffffff;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

.step-box-kicker {
  font-size: 9.5px;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.step-box-annotation {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 500;
}

/* RIGHT PANE: Working Project Steps */
.workbench-cutout-box .workbench-direction-section,
.workbench-cutout-box .workbench-base-selection-section,
.workbench-step-box .workbench-direction-section,
.workbench-step-box .workbench-base-selection-section {
  display: contents;
}

.workbench-direction-section,
.workbench-base-selection-section,
.workbench-editor-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.direction-step-badge {
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.06em;
  color: #0284c7;
  text-transform: uppercase;
}

/* Step 1: Direction Choice (Compact Segmented Tabs) */
.direction-segmented-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f1f5f9;
  border-radius: 9px;
  padding: 3px;
  gap: 4px;
}

.direction-tab-btn {
  height: 28px;
  line-height: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 750;
  color: #64748b;
  background: transparent;
  cursor: pointer;
  transition: all 0.12s ease;
}

.direction-tab-btn:hover {
  color: #00143c;
}

.direction-tab-btn.is-active {
  background: #ffffff;
  color: #00143c;
  box-shadow: 0 2px 6px rgba(0, 20, 60, 0.08);
}

.direction-tab-icon {
  font-size: 13px;
}

/* Step 2: Target Project & Base Version Side-by-Side Dropdowns */
.workbench-project-version-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

@media (max-width: 720px) {
  .workbench-project-version-grid {
    grid-template-columns: 1fr;
  }
}

.base-version-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 7px;
  font-size: 11px;
  color: #166534;
  font-weight: 650;
  line-height: 1.35;
}

/* Step 3: Canonical Engineering Editor Section */
.editor-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 20, 60, 0.06);
}

.editor-mode-badge {
  font-size: 10.5px;
  font-weight: 750;
  color: #7e22ce;
  background: #f3e8ff;
  padding: 2px 8px;
  border-radius: 999px;
}

.embedded-engineering-editor-host {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* RIGHT WORKING SCREEN (Twin CAD Chassis Matching Left Inspection Screen) */
.working-screen-container {
  /* Inherits .aligned-screen-box: background #f8fafc, border 1px solid rgba(0, 20, 60, 0.08), padding 14px, gap 10px */
}

.working-screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
  padding: 0;
  background: transparent;
  border-bottom: none;
}

.working-screen-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.working-screen-kicker {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0284c7;
  background: #e0f2fe;
  padding: 1.5px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.working-screen-header strong {
  color: #00143c;
  font-size: 12.5px;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen-controls-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.screen-item-badge {
  font-size: 9.5px;
  font-weight: 800;
  color: #0369a1;
  background: #e0f2fe;
  padding: 1.5px 5px;
  border-radius: 4px;
  text-transform: uppercase;
}

.screen-ctrl-btn {
  background: #ffffff;
  border: 1px solid rgba(0, 20, 60, 0.12);
  color: #334155;
  border-radius: 5px;
  padding: 1.5px 6px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 20, 60, 0.04);
  transition: all 0.12s ease;
  line-height: 1.35;
}

.screen-ctrl-btn:hover {
  background: #f1f5f9;
  border-color: #0284c7;
  color: #0284c7;
}

.screen-ctrl-btn.is-active {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3);
}

.working-screen-viewport {
  position: relative;
  width: 100%;
  height: 195px;
  background: radial-gradient(circle at 50% 40%, #1e293b 0%, #090d16 100%);
  border-radius: 8px;
  border: 1px solid rgba(0, 20, 60, 0.12);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  box-sizing: border-box;
}

.working-screen-viewport:active {
  cursor: grabbing;
}

.working-screen-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.working-screen-pins-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.screen-pin-marker {
  position: absolute;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ef4444;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 850;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35), 0 3px 8px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}

.screen-pin-marker:hover, .screen-pin-marker.is-active {
  background: #f97316;
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow: 0 0 0 5px rgba(249, 115, 22, 0.45), 0 4px 10px rgba(0, 0, 0, 0.6);
}

.screen-pin-tooltip {
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  border: 1px solid #38bdf8;
  color: #f8fafc;
  font-size: 10.5px;
  padding: 3px 7px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.screen-pin-marker:hover .screen-pin-tooltip, .screen-pin-marker.is-active .screen-pin-tooltip {
  opacity: 1;
}

.working-screen-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  background: transparent;
  border-top: none;
  font-size: 11px;
  min-height: 16px;
}

.working-screen-footer .screen-hint {
  font-size: 10.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.working-screen-footer .screen-meta-badge {
  font-size: 10.5px;
  color: #0284c7;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Working Project Selector Bar */
.working-project-selector-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.selector-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.selector-field label {
  font-size: 11.5px;
  font-weight: 750;
  color: #475569;
}

/* Prepare Basics & Input fields */
.prepare-basics-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.prepare-basics-section .field-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.prepare-basics-section .field-item label {
  font-size: 11.5px;
  font-weight: 750;
  color: #475569;
}

/* Staged References Tray */
.prepare-references-tray {
  background: #f8fafc;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tray-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 20, 60, 0.06);
}

.tray-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tray-kicker {
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: 0.05em;
  color: #64748b;
  text-transform: uppercase;
}

.tray-count {
  font-size: 11.5px;
  color: #0284c7;
  font-weight: 750;
}

.tray-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: #00143c;
}

.add-ref-btn {
  font-size: 11.5px !important;
  padding: 4px 10px !important;
}

.reference-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ref-chip {
  background: #ffffff;
  border: 1px solid rgba(0, 20, 60, 0.1);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  box-shadow: 0 1px 3px rgba(0, 20, 60, 0.03);
  flex-wrap: wrap;
}

.ref-chip.is-main {
  border-color: #00aff8;
  background: rgba(0, 175, 248, 0.05);
}

.ref-chip.is-viewing {
  border-color: #0284c7;
  background: #eff6ff;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25);
}

.chip-viewing-tag {
  background: #0284c7;
  color: #ffffff;
  border-radius: 4px;
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 4px;
  text-transform: uppercase;
}

.chip-kind {
  font-size: 10px;
  font-weight: 800;
  color: #0284c7;
  background: #e0f2fe;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.chip-name {
  font-weight: 700;
  color: #00143c;
}

.chip-size {
  font-size: 11px;
  color: #64748b;
}

.chip-persistence {
  flex-basis: 100%;
  padding-left: 2px;
  color: #475569;
  font-size: 10px;
  font-weight: 650;
}

.chip-remove-btn {
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}

.chip-remove-btn:hover {
  color: #ef4444;
}

/* Spatial Coordinate Pins */
.surface-pins-box {
  background: #ffffff;
  border: 1px solid rgba(0, 20, 60, 0.07);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pin-item.is-active-pin {
  border-color: #f97316;
  background: #fff7ed;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
  border-radius: 6px;
  padding: 2px 4px;
}

.pin-coord-badge {
  font-size: 9.5px;
  color: #64748b;
  font-family: monospace;
  background: #f1f5f9;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

.pins-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pins-label {
  font-size: 11.5px;
  font-weight: 750;
  color: #475569;
}

.pin-add-link {
  font-size: 11.5px;
  font-weight: 750;
  color: #0284c7;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.pins-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pin-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pin-badge {
  font-size: 10px;
  font-weight: 800;
  color: #ffffff;
  background: #0284c7;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

.pin-text-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid rgba(0, 20, 60, 0.12);
  border-radius: 6px;
  font-size: 12px;
  color: #00143c;
}

.pin-del-btn {
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
}

.pin-del-btn:hover {
  color: #ef4444;
}

/* S520 Step 3 Dual-Column Lower Editor Section */
.editor-dual-columns-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.16fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.editor-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

@media (max-width: 1280px) {
  .design-workbench-split-grid:not(.is-left-collapsed) .editor-dual-columns-grid {
    grid-template-columns: 1fr;
  }
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.field-label-row label {
  margin-bottom: 0 !important;
}

.parent-project-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  border: 1px solid rgba(0, 20, 60, 0.08);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  margin-bottom: 6px;
  align-self: flex-start;
}

.parent-project-kicker {
  text-transform: uppercase;
  font-size: 9.5px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.05em;
}

.parent-project-name {
  color: #00143c;
  font-weight: 750;
}

.parent-project-code {
  color: #0284c7;
  font-weight: 800;
  background: #e0f2fe;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
}

/* Canonical Project Details Section (Aligned with Start a Project) */
.project-details-accordion {
  background: #f8fafc;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.project-details-accordion[open] {
  background: #ffffff;
  border-color: rgba(2, 132, 199, 0.25);
  box-shadow: 0 2px 10px rgba(0, 20, 60, 0.04);
}

.project-details-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #f8fafc;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.project-details-summary::-webkit-details-marker {
  display: none;
}

.project-details-summary .summary-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.project-details-summary .details-chevron {
  display: inline-grid;
  place-content: center;
  width: 16px;
  height: 16px;
  color: #0284c7;
  transition: transform 0.2s ease;
}

.project-details-accordion[open] .project-details-summary .details-chevron {
  transform: rotate(180deg);
}

.project-details-summary .details-title {
  font-size: 12px;
  font-weight: 750;
  color: #00143c;
}

.project-details-summary .details-subtitle {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

.project-details-body {
  padding: 14px;
  border-top: 1px solid rgba(0, 20, 60, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #ffffff;
}

.project-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

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

.project-details-body .field-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.project-details-body .field-item label {
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.project-details-body .slice-select-input {
  width: 100%;
  height: 38px;
  min-height: 38px;
  padding: 6px 11px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.project-details-body .slice-select-input:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

.project-details-body .slice-select-input::placeholder {
  color: #94a3b8;
  font-weight: 400;
  font-size: 12px;
}

.mfg-interest-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.mfg-interest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.mfg-interest-heading {
  font-size: 11.5px;
  font-weight: 750;
  color: #1e293b;
  margin: 0;
}

.mfg-interest-hint {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 500;
}

.mfg-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.mfg-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #334155;
  cursor: pointer;
  font-weight: 500;
  user-select: none;
}

.mfg-radio-label input[type="radio"] {
  accent-color: #0284c7;
  cursor: pointer;
  margin: 0;
}

.mfg-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

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

.is-mfg-hidden {
  display: none !important;
}

.details-extra-note {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.details-note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.details-extra-note .slice-textarea-input {
  width: 100%;
  min-height: 60px;
  height: 60px;
  padding: 8px 11px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.details-extra-note .slice-textarea-input:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

.details-extra-note .slice-textarea-input::placeholder {
  color: #94a3b8;
  font-weight: 400;
  font-size: 12px;
}

.details-extra-note .field-hint {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 500;
}

/* Submission & Safety Gateway Bar */
.prepare-submit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 20, 60, 0.08);
}

.submit-budget-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.budget-kicker {
  font-size: 10px;
  font-weight: 750;
  color: #64748b;
  text-transform: uppercase;
}

.submit-budget-meta strong {
  font-size: 13.5px;
  font-weight: 850;
  color: #0284c7;
}

.submit-budget-meta small {
  font-size: 10.5px;
  color: #64748b;
}

.submit-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.submit-request-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800 !important;
}

/* Compact Single-Row Workbench Heading with Dual-Capsule Guidance (S520 Space Optimization & Anti-Collision) */
.view-heading--compact {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.heading-title-group {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1;
}

.heading-title-group .eyebrow {
  margin: 0 0 2px 0;
  color: #0284c7;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.heading-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.view-heading--compact h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 850;
  letter-spacing: -0.025em;
  color: #00143c;
  line-height: 1.15;
  white-space: nowrap;
}

/* S520 Aligned Dual-Column Guidance Bar (Left Column aligns with Left Pane, Right Column aligns with Right Pane) */
.workbench-guidance-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 14px;
  align-items: center;
  transition: grid-template-columns 0.22s ease;
}

.workbench-guidance-bar .guidance-col {
  min-width: 0;
  display: flex;
  align-items: center;
}

.workbench-guidance-bar.is-left-collapsed {
  grid-template-columns: 54px minmax(0, 1fr);
}

.workbench-guidance-bar.is-left-collapsed .guidance-col--source {
  opacity: 0;
  pointer-events: none;
}

.workbench-guidance-bar.is-right-collapsed {
  grid-template-columns: minmax(0, 1fr) 54px;
}

.workbench-guidance-bar.is-right-collapsed .guidance-col--working {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1050px) {
  .workbench-guidance-bar {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.heading-guidance-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}

.guidance-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.35;
}

.guidance-arrow {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  user-select: none;
  width: 14px;
  display: inline-block;
  text-align: center;
}

.guidance-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 218px;
  min-width: 218px;
  padding: 2px 10px;
  background: #f1f5f9;
  border: 1px solid rgba(0, 20, 60, 0.09);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
  box-sizing: border-box;
}

.guidance-pill--working {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #0284c7;
}

.guidance-pill .phrase-step {
  display: inline-grid;
  place-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #94a3b8;
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 800;
  flex-shrink: 0;
}

.guidance-pill--working .phrase-step {
  background: #0284c7;
}

.pill-prefix {
  display: inline-block;
  width: 38px;
  font-weight: 800;
  color: inherit;
  flex-shrink: 0;
}

.pill-role {
  font-weight: 700;
  color: inherit;
}

.guidance-text {
  color: #475569;
  font-size: 12.5px;
  font-weight: 500;
}

.view-heading--compact .view-heading__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.view-heading--compact .view-heading__actions .secondary-action {
  min-height: 36px;
  padding: 0 12px;
  font-size: 12px;
}

/* S520 Source Inspection Lower Section (Single-Column Flow) */
.source-lower-section {
  margin-top: 14px;
}

/* Section 1: Contained References & Assets Tray (Directly Below Left Screen) */
.source-items-tray-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0, 20, 60, 0.03);
  margin-bottom: 14px;
}

.source-items-tray-card .tray-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* S520 Lightweight, Airy Source Inspection Card */
.source-light-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  box-shadow: 0 1px 3px rgba(0, 20, 60, 0.02);
  margin-bottom: 16px;
}

.source-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.source-card-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.source-card-kicker {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #0284c7;
  text-transform: uppercase;
}

.source-readonly-pill {
  font-size: 9.5px;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 1px 6px;
  border-radius: 4px;
}

.source-project-identity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.source-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.source-revision-badge-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.source-narrative-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.source-field-label {
  font-size: 10px;
  font-weight: 750;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.source-narrative-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #1e293b;
}

.source-constraints-section {
  background: #fffbeb;
  border: 1px solid #fef3c7;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #92400e;
}

.source-constraints-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.source-constraints-icon {
  font-size: 11px;
  line-height: 1.3;
}

.source-constraints-content {
  flex: 1;
}

.source-constraints-content strong {
  font-weight: 750;
  color: #78350f;
  margin-right: 4px;
}

/* 03 · Specs Accordion on Left Pane (Progressive Disclosure) */
.source-specs-accordion-wrapper {
  margin-top: 2px;
}

.source-specs-accordion {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  overflow: hidden;
  transition: all 0.18s ease;
}

.source-specs-accordion[open] {
  background: #ffffff;
  border-color: #cbd5e1;
}

.source-specs-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 11px;
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  color: #334155;
}

.source-specs-summary::-webkit-details-marker {
  display: none;
}

.source-specs-summary-content {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.source-chevron {
  color: #64748b;
  display: inline-flex;
  transition: transform 0.18s ease;
}

.source-specs-accordion[open] .source-chevron {
  transform: rotate(90deg);
}

.source-specs-title {
  font-weight: 750;
  color: #0f172a;
  font-size: 11px;
}

.source-specs-preview-chips {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.source-mini-chip {
  font-size: 10px;
  font-weight: 600;
  color: #0284c7;
  background: #e0f2fe;
  padding: 1px 6px;
  border-radius: 4px;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-accordion-hint {
  font-size: 10px;
  color: #64748b;
  font-weight: 600;
  margin-left: 8px;
  flex-shrink: 0;
}

.source-specs-accordion[open] .source-accordion-hint {
  display: none;
}

.source-specs-expanded-body {
  padding: 10px 12px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
}

.source-light-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
}

@media (max-width: 1100px) {
  .source-light-spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.source-spec-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.source-spec-cell--full {
  grid-column: 1 / -1;
  padding-top: 4px;
  border-top: 1px dashed #e2e8f0;
}

.source-spec-k {
  font-size: 9.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.source-spec-v {
  font-size: 11.5px;
  font-weight: 650;
  color: #0f172a;
  line-height: 1.4;
  word-break: break-word;
}

/* Backward-compatible fallback for any legacy source card references */
.source-dossier-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0, 20, 60, 0.04);
}

/* Simple, understated engineering data table (Left Upper Dossier) */
.dossier-simple-table {
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}

.dossier-table-row {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid #edf2f7;
  font-size: 11.5px;
  line-height: 1.45;
}

.dossier-table-row:last-child {
  border-bottom: 0;
}

.dossier-table-k {
  width: 140px;
  flex-shrink: 0;
  padding: 8px 10px;
  background: #f8fafc;
  color: #64748b;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-right: 1px solid #edf2f7;
}

.dossier-table-v {
  flex: 1;
  padding: 8px 12px;
  color: #0f172a;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dossier-header {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-bottom: 1px solid #edf2f7;
  padding-bottom: 9px;
}

.dossier-kicker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dossier-kicker {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0284c7;
}

.dossier-readonly-badge {
  font-size: 9.5px;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 2px 7px;
  border-radius: 4px;
}

.dossier-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dossier-project-name {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}

.dossier-version-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
}

.dossier-badge-pill {
  font-size: 9.5px;
  font-weight: 700;
  color: #0284c7;
  background: #e0f2fe;
  padding: 2px 6px;
  border-radius: 4px;
}

.dossier-time {
  font-size: 10px;
  color: #94a3b8;
  margin-left: auto;
}

.dossier-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dossier-field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dossier-field-label {
  font-size: 10px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Narrative text display: clean, straightforward, no cluttered tables */
.dossier-narrative-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dossier-narrative-p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.48;
  color: #1e293b;
}

.dossier-revision-note-pill {
  font-size: 11px;
  line-height: 1.4;
  color: #0369a1;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 4px;
  padding: 4px 8px;
}

.dossier-revision-note-pill .note-pill-tag {
  font-weight: 700;
  color: #0284c7;
  margin-right: 4px;
}

.dossier-constraints-box {
  background: #fffbeb;
  border: 1px solid #fef3c7;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  padding: 7px 11px;
  font-size: 11px;
  line-height: 1.42;
  color: #92400e;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.dossier-constraints-box p {
  margin: 0;
  flex: 1;
}

.dossier-lock-icon {
  font-size: 11px;
  line-height: 1.2;
}

/* Plain straightforward spec list (Non-overlapping Table) */
.dossier-spec-list {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 11px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dossier-spec-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  line-height: 1.4;
  border-bottom: 1px dashed #e2e8f0;
  padding-bottom: 4px;
}

.dossier-spec-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.dossier-spec-k {
  font-size: 10px;
  font-weight: 750;
  color: #64748b;
  min-width: 125px;
  flex-shrink: 0;
}

.dossier-spec-v {
  font-size: 11px;
  font-weight: 600;
  color: #0f172a;
  word-break: break-word;
}

.dossier-action-footer {
  margin-top: 2px;
}

.dossier-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  background: #ffffff;
  border: 1px solid #0284c7;
  color: #0284c7;
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 1px 2px rgba(2, 132, 199, 0.06);
}

.dossier-copy-btn:hover {
  background: #e0f2fe;
  border-color: #0369a1;
  color: #0369a1;
}

.dossier-copy-btn.is-copied {
  background: #ecfdf5;
  border-color: #10b981;
  color: #059669;
}
/* S520 Full-Width 03 · Project Details Specification Table (Left View) */
.source-fullwidth-details-section {
  margin-top: 14px;
}

.dossier-spec-table-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 20, 60, 0.03);
}

.spec-table-header {
  background: #f8fafc;
  padding: 8px 14px;
  border-bottom: 1px solid #e2e8f0;
}

.spec-table-kicker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dossier-copy-btn--inline {
  width: auto !important;
  padding: 4px 11px !important;
  font-size: 11px !important;
}

.spec-table-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #e2e8f0; /* produces crisp 1px borders between cells */
}

@media (max-width: 1100px) {
  .design-workbench-split-grid:not(.is-right-collapsed) .spec-table-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.spec-cell {
  background: #ffffff;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.spec-cell--full {
  grid-column: 1 / -1;
}

.spec-cell-k {
  font-size: 9.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.spec-cell-v {
  font-size: 11.5px;
  font-weight: 650;
  color: #0f172a;
  line-height: 1.4;
  word-break: break-word;
}

/* S520 Full-Width Lower 03 · Project Details Section (Right Workbench) */
.prepare-fullwidth-details-section {
  margin-top: 14px;
  margin-bottom: 16px;
}

.prepare-fullwidth-details-section .form-row--3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 960px) {
  .prepare-fullwidth-details-section .form-row--3col {
    grid-template-columns: 1fr;
  }
}

/* S520 Start a New Project: 01 · Project Basics Setup Box */
.new-project-basics-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 8px;
  margin-bottom: 12px;
}

.new-project-basics-badge-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.basics-capsule-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0284c7;
  background: #e0f2fe;
  padding: 2.5px 10px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
}

.new-project-fields-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

@media (max-width: 900px) {
  .new-project-fields-grid {
    grid-template-columns: 1fr;
  }
}

.field-label-with-inline-hint {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.field-inline-hint {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 500;
}

.field-sub-hint {
  display: block;
  font-size: 10px;
  color: #64748b;
  margin-top: 3px;
}

.field-sub-hint a {
  color: #0284c7;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.required-star {
  color: #dc2626;
  font-weight: 700;
  margin-left: 2px;
}

.optional-tag {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 500;
}

/* =========================================================================
   S521: Unified Project Detail View (Harmonized with Design Workbench View)
   Single Source of Truth, Structured 11 Specifications, Interactive CAD Viewport
   ========================================================================= */

.project-detail-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
}

.model-detail-back-link {
  font-weight: 600;
  color: #0284c7;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.model-detail-back-link:hover {
  background: #f0f9ff;
  color: #0369a1;
}

.model-detail-header-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-pill--verified {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

/* =========================================================================
   Sprint 568A: Compact Breadcrumb & Streamlined Executive Layout
   ========================================================================= */

.project-detail-breadcrumb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.project-detail-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.breadcrumb-link {
  font-weight: 600;
  color: #0284c7;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.breadcrumb-link:hover {
  color: #0369a1;
  text-decoration: underline;
}

.breadcrumb-separator {
  color: #94a3b8;
  font-weight: 500;
}

.breadcrumb-current {
  font-weight: 600;
  color: #0f172a;
}

.breadcrumb-back-subtle {
  margin-left: 10px;
  font-size: 12px;
  color: #64748b;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.breadcrumb-back-subtle:hover {
  color: #0f172a;
  background: #f1f5f9;
}

/* Right-Column Project Headline Card (P2) */
.project-headline-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-headline-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.project-headline-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

.project-headline-meta {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.project-headline-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

/* Version History Timeline (P6) */
.version-timeline-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.version-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.version-timeline-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.timeline-demo-toggle-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.timeline-demo-toggle-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #1e293b;
}

.version-timeline-kicker {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
}

.version-timeline-count {
  font-size: 12px;
  color: #64748b;
}

.version-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.version-timeline-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 9px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  width: 100%;
}

.version-timeline-row:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.version-timeline-row.is-active {
  background: #f8fafc;
  box-shadow: 0 2px 8px rgba(0, 20, 60, 0.06);
}

.version-timeline-row--draft.is-active {
  border-color: #f59e0b;
  border-left-width: 4px;
}

.version-timeline-row--model_revision.is-active {
  border-color: #10b981;
  border-left-width: 4px;
}

.version-timeline-row--request.is-active {
  border-color: #3b82f6;
  border-left-width: 4px;
}

.version-timeline-icon-badge {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  font-weight: 700;
}

.version-timeline-icon-badge--draft {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.version-timeline-icon-badge--model_revision {
  background: #dcfce7;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.version-timeline-icon-badge--request {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.version-timeline-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}

.version-timeline-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.version-timeline-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}

.version-timeline-meta-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.version-timeline-time {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
}

.version-timeline-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.version-timeline-badge--draft {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.version-timeline-badge--model_revision {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.version-timeline-badge--request {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.version-timeline-sub-row {
  display: flex;
  align-items: center;
}

.version-timeline-sub {
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
}

.version-frozen-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 12.5px;
  font-weight: 600;
}

.secondary-action--slice {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25) !important;
}

/* Selected Version Brief Card */
.version-brief-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.version-brief-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.version-brief-kicker {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.version-brief-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
}

.version-brief-text {
  margin: 0;
  font-size: 13px;
  color: #334155;
  line-height: 1.5;
}

.project-detail-view-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 26px;
  align-items: stretch;
}

@media (max-width: 1024px) {
  .project-detail-view-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.project-detail-visuals-col,
.project-detail-specs-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-detail-visuals-col {
  height: 100%;
}

/* Dedicated 3D Inspection Screen Studio */
.project-detail-view-grid .project-detail-visuals-col > .aligned-screen-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 560px;
  max-height: none;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.08);
  background: #ffffff;
  padding: 14px;
}

.project-detail-view-grid .project-detail-visuals-col > .aligned-screen-box .preview-viewport-stage {
  flex: 1 1 auto;
  height: clamp(520px, 62vh, 660px);
  min-height: 520px;
  background: radial-gradient(circle at 50% 50%, #0d1b2a 0%, #060d17 100%);
  border-radius: 8px;
}

@media (max-width: 1024px) {
  .project-detail-view-grid .project-detail-visuals-col > .aligned-screen-box .preview-viewport-stage {
    height: clamp(420px, 50vh, 520px);
    min-height: 420px;
  }
}

@media (max-width: 640px) {
  .project-detail-view-grid .project-detail-visuals-col > .aligned-screen-box .preview-viewport-stage {
    height: 340px;
    min-height: 340px;
  }
}

/* Model Identity & Intelligence Card on Right */
.model-identity-card {
  padding: 22px 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.model-identity-card h2 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
  letter-spacing: -0.015em;
  word-break: break-all;
}

.model-identity-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.model-identity-meta code {
  background: #f1f5f9;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 12px;
  color: #334155;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Unified Action Control Suite */
.unified-action-suite {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

.model-hero-slice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 13px 20px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
  transition: all 0.18s ease;
}

.model-hero-slice-btn:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.32);
}

.model-secondary-actions-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.model-secondary-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  background: #f8fafc;
  color: #1e293b;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}

.model-secondary-action-btn:hover {
  background: #ffffff;
  border-color: #94a3b8;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.model-utility-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
}

.model-danger-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: #dc2626;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.model-danger-link:hover {
  background: #fee2e2;
  text-decoration: underline;
}

.model-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #16a34a;
  font-weight: 600;
}

.project-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.item-inline-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0284c7;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: auto;
}

.item-inline-btn:hover {
  background: #f0f9ff;
  border-color: #38bdf8;
}

.item-inline-link {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}

.item-inline-link:hover {
  background: #ffffff;
  border-color: #94a3b8;
  color: #0f172a;
}

.project-detail-actions-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.project-records-drawer {
  margin-top: 20px;
}

.viewport-stage-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.viewport-stage-overlay {
  position: absolute;
  bottom: 8px;
  right: 10px;
  background: rgba(0, 0, 0, 0.65);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  color: #38bdf8;
  font-weight: 700;
  pointer-events: none;
}

.viewport-drawing-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.viewport-drawing-wrap--image {
  padding: 8px;
}

.project-detail-image-preview {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  background: #0b1329;
}

.viewport-drawing-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 16px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.drawing-card-title {
  color: #f8fafc;
  font-size: 13px;
}

.drawing-card-meta {
  color: #94a3b8;
  font-size: 11.5px;
}

.doc-card-note {
  margin-top: 8px;
  font-size: 11px;
  color: #0284c7;
  font-weight: 700;
}

/* S521 Dark CAD Stage Styling for 3D Geometry Viewer in Model Detail */
.preview-viewport-stage .model-viewer {
  width: 100%;
  height: 100%;
  min-height: 360px !important;
  background: transparent !important;
  color: #94a3b8;
}

.preview-viewport-stage .dml-geometry-viewer {
  width: 100%;
  height: 100%;
  min-height: 360px;
  background: transparent;
  display: flex;
  flex-direction: column;
  position: relative;
}

.preview-viewport-stage .dml-geometry-viewer canvas {
  width: 100%;
  height: 100%;
  min-height: 360px;
  cursor: grab;
  touch-action: none;
}

.preview-viewport-stage .dml-geometry-viewer__status {
  position: absolute;
  top: 10px;
  left: 12px;
  padding: 4px 10px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #38bdf8;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
}

.preview-viewport-stage .dml-geometry-viewer__controls {
  position: absolute;
  bottom: 10px;
  left: 12px;
  display: flex;
  gap: 6px;
  z-index: 10;
}

.preview-viewport-stage .dml-geometry-viewer__controls button {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f1f5f9;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.preview-viewport-stage .dml-geometry-viewer__controls button:hover {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
}

/* =========================================================================
   S541: Native Workspace Profile & Shipping Destinations Styles
   Integrated In-App Engineering Profile, Unified Credits, and Verified Addresses
   ========================================================================= */
.profile-view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.profile-view-card {
  background: var(--workspace-panel);
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius);
  box-shadow: var(--workspace-shadow);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--workspace-line);
}

.profile-card-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-card-icon {
  font-size: 24px;
  line-height: 1;
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  background: var(--workspace-accent-soft);
  border-radius: 12px;
}

.profile-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 750;
  color: var(--workspace-text);
  line-height: 1.25;
}

.profile-card-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--workspace-muted);
}

.profile-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.profile-verified-badge .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.profile-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  background: var(--workspace-panel-soft);
  border: 1px solid #edf2f7;
  border-radius: 10px;
}

.profile-field-row .field-label {
  font-size: 13px;
  color: var(--workspace-muted);
  font-weight: 600;
}

.profile-field-row .field-value {
  font-size: 14px;
  color: var(--workspace-text);
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}

.profile-field-row .field-value.text-accent {
  color: var(--workspace-accent);
  font-weight: 750;
}

.profile-field-row .field-value.text-gold {
  color: #b45309;
  font-weight: 800;
}

.saved-address-card {
  padding: 18px;
  border: 1px solid var(--workspace-line);
  border-radius: 12px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.saved-address-card.is-default {
  border-color: #93c5fd;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.05);
}

.address-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.address-tag-default {
  display: inline-block;
  padding: 3px 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 750;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.address-check {
  font-size: 12px;
  font-weight: 700;
  color: #059669;
}

.address-name {
  font-size: 16px;
  font-weight: 750;
  color: var(--workspace-text);
}

.address-lines {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #334155;
}

.address-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.btn-address-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--workspace-line);
  background: #ffffff;
  color: #334155;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-address-edit:hover {
  border-color: #94a3b8;
  background: #f8fafc;
  color: #0f172a;
}

.address-hygiene-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  font-size: 12px;
  line-height: 1.5;
  color: #475569;
}

.address-hygiene-notice .hygiene-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.address-hygiene-notice code {
  padding: 2px 6px;
  background: #e2e8f0;
  border-radius: 4px;
  font-family: monospace;
  font-size: 11px;
}

@media (max-width: 640px) {
  .profile-view-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .profile-field-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .profile-field-row .field-value {
    text-align: left;
  }
}

/* =========================================================================
   S544: Workspace Orders Hub Dual-Column Split Command Center
   ========================================================================= */

/* KPI Summary Cards Grid */
.orders-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 20px 0 28px;
}

.orders-kpi-card {
  background: var(--workspace-panel);
  border: 1px solid var(--workspace-line);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.orders-kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.orders-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.orders-kpi-icon.draft-icon {
  background: #fef3c7;
  color: #d97706;
}

.orders-kpi-icon.placed-icon {
  background: #ecfdf5;
  color: #059669;
}

.orders-kpi-icon.sync-icon {
  background: #eff6ff;
  color: var(--workspace-accent);
}

.orders-kpi-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--workspace-muted);
  margin-bottom: 2px;
}

.orders-kpi-value {
  display: block;
  font-size: 19px;
  font-weight: 800;
  color: var(--workspace-text);
  line-height: 1.2;
}

.orders-kpi-sub {
  display: block;
  font-size: 12px;
  color: var(--workspace-muted);
  margin-top: 2px;
}

/* Two-Column Grid */
.orders-columns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
  gap: 28px;
  align-items: start;
}

@media (max-width: 1080px) {
  .orders-columns-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.orders-column-panel {
  background: var(--workspace-panel);
  border: 1px solid var(--workspace-line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.orders-column-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--workspace-line);
  flex-wrap: wrap;
}

.orders-column-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.orders-column-title-row h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--workspace-text);
}

.orders-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.orders-count-badge.draft-badge {
  background: #fef3c7;
  color: #b45309;
}

.orders-count-badge.placed-badge {
  background: #ecfdf5;
  color: #047857;
}

.orders-column-desc {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--workspace-muted);
}

/* Segmented Filter Pills */
.orders-filter-segment {
  display: inline-flex;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 8px;
  gap: 2px;
}

.orders-filter-segment button {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--workspace-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.orders-filter-segment button[aria-pressed="true"] {
  background: #ffffff;
  color: var(--workspace-accent);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.orders-filter-segment button:hover:not([aria-pressed="true"]) {
  color: var(--workspace-text);
}

/* Orders Modern Card */
.orders-card-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.orders-modern-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.orders-modern-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}

.orders-modern-card.is-draft {
  border-left: 4px solid #f59e0b;
}

.orders-modern-card.is-paid {
  border-left: 4px solid #10b981;
}

.orders-modern-card .card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.orders-modern-card .card-id-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.orders-modern-card .card-type-icon {
  font-size: 18px;
  line-height: 1;
  padding: 6px;
  border-radius: 8px;
  background: #f8fafc;
  flex-shrink: 0;
}

.orders-modern-card .card-entity-title {
  display: block;
  font-size: 15px;
  font-weight: 750;
  color: var(--workspace-text);
  line-height: 1.3;
  word-break: break-word;
}

.orders-modern-card .card-sub-id {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orders-modern-card .card-kind-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  margin-top: 3px;
}

.orders-modern-card .card-kind-pill.kind-credits {
  background: #f3e8ff;
  color: #7e22ce;
}

.orders-modern-card .card-kind-pill.kind-make {
  background: #e0f2fe;
  color: #0369a1;
}

.orders-modern-card .card-kind-pill.kind-catalog {
  background: #f1f5f9;
  color: #475569;
}

.badge-draft-status {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 750;
  padding: 3px 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
}

.badge-paid-status {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 750;
  padding: 3px 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.card-metric-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
}

.card-price-callout {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.card-price-callout .currency-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--workspace-muted);
}

.card-price-callout .price-val {
  font-size: 18px;
  font-weight: 850;
  color: var(--workspace-text);
  letter-spacing: -0.02em;
}

.card-specs-pill {
  font-size: 12px;
  color: var(--workspace-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-specs-pill .dot-sep {
  color: #cbd5e1;
}

.card-desc-snippet {
  font-size: 13px;
  color: #475569;
  line-height: 1.4;
  word-break: break-word;
}

.card-date-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #94a3b8;
}

.card-action-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.card-action-toolbar .btn-action {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.card-action-toolbar .secondary-outline {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #334155;
}

.card-action-toolbar .secondary-outline:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.card-action-toolbar .primary-checkout {
  background: var(--workspace-accent);
  color: #ffffff;
}

.card-action-toolbar .primary-checkout:hover {
  background: var(--workspace-accent-hover);
  transform: translateY(-1px);
}

.card-action-toolbar .primary-details {
  background: #ffffff;
  border-color: var(--workspace-accent);
  color: var(--workspace-accent);
  width: 100%;
  justify-content: center;
}

.card-action-toolbar .primary-details:hover {
  background: var(--workspace-accent);
  color: #ffffff;
}

.card-action-toolbar .btn-action-delete {
  background: transparent;
  border: none;
  color: #94a3b8;
  padding: 6px;
  border-radius: 6px;
  margin-left: auto;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.card-action-toolbar .btn-action-delete:hover:not(:disabled) {
  background: #fee2e2;
  color: #ef4444;
}

.card-action-toolbar .btn-action-delete:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Empty State */
.orders-empty-state {
  text-align: center;
  padding: 32px 20px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.orders-empty-state .empty-icon {
  font-size: 28px;
  line-height: 1;
}

.orders-empty-state h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 750;
  color: var(--workspace-text);
}

.orders-empty-state p {
  margin: 0;
  font-size: 13px;
  color: var(--workspace-muted);
  max-width: 300px;
}

.column-footer-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--workspace-muted);
  line-height: 1.4;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #edf2f7;
}

.column-footer-note svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #94a3b8;
}

/* ==========================================================================
   SPRINT 543B: Production Telemetry & Logistics Tracking Ergonomics
   ========================================================================== */

/* Card Level: Mini Pipeline */
.card-mini-pipeline {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 10px 0 6px 0;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #f1f5f9;
}

.mini-step {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 650;
  color: #64748b;
  white-space: nowrap;
}

.mini-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cbd5e1;
  display: inline-block;
  transition: all 0.2s ease;
}

.mini-step.is-done .mini-dot {
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.mini-step.is-done {
  color: #0f172a;
}

.mini-step.is-active .mini-dot {
  background: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
  animation: miniPulse 1.5s infinite;
}

.mini-step.is-active {
  color: #1d4ed8;
}

.mini-step.is-pending {
  color: #94a3b8;
}

.mini-line {
  flex: 1;
  height: 2px;
  background: #e2e8f0;
  margin: 0 8px;
  min-width: 12px;
}

.mini-line.is-done {
  background: #10b981;
}

@keyframes miniPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

/* Card Level: Logistics Slot */
.card-tracking-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin: 6px 0 10px 0;
  font-size: 12px;
}

.card-tracking-slot.is-credit {
  background: #faf5ff;
  border-color: #f3e8ff;
}

.tracking-slot-left {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--workspace-text);
  overflow: hidden;
}

.tracking-slot-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.tracking-slot-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #475569;
}

.tracking-slot-text strong {
  color: #1e293b;
  font-weight: 650;
}

.tracking-placeholder {
  color: #64748b;
  font-style: italic;
}

.tracking-link {
  color: #2563eb;
  font-family: var(--font-mono, monospace);
  font-weight: 650;
  text-decoration: underline;
}

.tracking-status-pill {
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}

.tracking-status-pill.status-shipped {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.tracking-status-pill.status-queued {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.tracking-status-pill.status-delivered {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

/* Detail Level: Order Tracking Grid */
.order-tracking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0 28px 0;
}

.order-card-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.panel-header-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.panel-header-icon {
  font-size: 24px;
  line-height: 1;
  padding: 6px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #edf2f7;
}

.panel-header-title h3 {
  margin: 0 0 3px 0;
  font-size: 16px;
  font-weight: 750;
  color: #0f172a;
}

.panel-header-title p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

.logistics-status-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.logistics-status-badge.status-queued {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.logistics-status-badge.status-shipped {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #6ee7b7;
}

.telemetry-farm-tag {
  font-size: 11px;
  font-weight: 750;
  font-family: var(--font-mono, monospace);
  padding: 4px 8px;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  white-space: nowrap;
}

/* Logistics Details Grid */
.logistics-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.logistics-detail-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.detail-label {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.detail-value {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

.detail-value.monospace {
  font-family: var(--font-mono, monospace);
}

.tracking-value-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tracking-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
  font-weight: 600;
}

.tracking-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 6px;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  text-decoration: none;
  border: 1px solid #dbeafe;
}

.tracking-link-pill:hover {
  background: #dbeafe;
}

/* Logistics Timeline Bar */
.logistics-timeline-bar {
  display: flex;
  align-items: center;
  margin-top: 16px;
  padding: 12px 14px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #edf2f7;
}

.logistics-node {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 650;
  color: #94a3b8;
  white-space: nowrap;
}

.node-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
}

.logistics-node.is-done {
  color: #0f172a;
}

.logistics-node.is-done .node-dot {
  background: #10b981;
}

.logistics-node.is-active {
  color: #2563eb;
}

.logistics-node.is-active .node-dot {
  background: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.logistics-track {
  flex: 1;
  height: 2px;
  background: #e2e8f0;
  margin: 0 8px;
  min-width: 14px;
}

.logistics-track.is-done {
  background: #10b981;
}

/* Telemetry Checkpoints */
.telemetry-checkpoints {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkpoint-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #edf2f7;
}

.chk-status {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  background: #e2e8f0;
  color: #64748b;
  flex-shrink: 0;
}

.checkpoint-row.is-verified .chk-status {
  background: #10b981;
  color: #ffffff;
}

.checkpoint-row.is-active .chk-status {
  background: #2563eb;
  color: #ffffff;
}

.chk-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  animation: miniPulse 1.4s infinite;
}

.chk-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94a3b8;
}

.chk-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chk-body strong {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

.chk-body span {
  font-size: 11px;
  color: #64748b;
  line-height: 1.3;
}

.chk-badge {
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}

.chk-badge.verified {
  background: #ecfdf5;
  color: #059669;
}

.chk-badge.active {
  background: #eff6ff;
  color: #2563eb;
}

.chk-badge.pending {
  background: #f1f5f9;
  color: #94a3b8;
}

@media (max-width: 1080px) {
  .order-tracking-grid {
    grid-template-columns: 1fr;
  }
  .logistics-details-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   COMPACT DUAL-COLUMN ORDERS CARDS (S543B / S544 Ergonomics)
   ========================================================================== */

.orders-columns-grid .orders-card-list {
  gap: 10px;
}

.orders-modern-card.compact {
  padding: 12px 14px;
  gap: 8px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.orders-modern-card.compact:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
  border-color: #cbd5e1;
}

.card-compact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
}

.card-compact-header .header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.card-compact-header .card-type-icon {
  font-size: 15px;
  line-height: 1;
  padding: 4px;
  border-radius: 6px;
  background: #f8fafc;
  flex-shrink: 0;
}

.card-compact-header .card-entity-title {
  font-size: 14px;
  font-weight: 750;
  color: var(--workspace-text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.card-compact-header .card-kind-pill {
  margin-top: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}

.card-compact-header .badge-paid-status,
.card-compact-header .badge-draft-status {
  padding: 2px 7px;
  font-size: 10px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1.2;
}

.card-compact-header .header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.card-compact-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-feature-settings: "tnum";
}

.card-compact-price .currency-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--workspace-muted, #64748b);
}

.card-compact-price .price-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--workspace-text, #0f172a);
  letter-spacing: -0.01em;
}

.btn-compact-details {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--workspace-accent, #2563eb);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-compact-details:hover {
  background: var(--workspace-accent, #2563eb);
  border-color: var(--workspace-accent, #2563eb);
  color: #ffffff;
  transform: translateY(-1px);
}

.card-compact-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-compact-meta .dot-sep {
  color: #cbd5e1;
}

.card-compact-meta .meta-date {
  color: #94a3b8;
}

/* Row 3 for Draft Cards: Actions */
.card-compact-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid #f1f5f9;
}

.card-compact-actions .actions-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-compact-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.btn-compact-action.secondary {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #334155;
}

.btn-compact-action.secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.btn-compact-action.primary {
  background: var(--workspace-accent, #2563eb);
  color: #ffffff;
}

.btn-compact-action.primary:hover {
  background: var(--workspace-accent-hover, #1d4ed8);
}

.btn-compact-delete {
  background: transparent;
  border: none;
  color: #94a3b8;
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-compact-delete:hover:not(:disabled) {
  background: #fee2e2;
  color: #ef4444;
}

.btn-compact-delete:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Row 3 for Placed Orders: Unified Status Bar */
.card-compact-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #f1f5f9;
  font-size: 11px;
  min-height: 28px;
}

.card-compact-status-bar.is-credit {
  background: #faf5ff;
  border-color: #f3e8ff;
}

.mini-pipeline-track {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}

.mini-pipeline-track .mini-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 650;
  color: #64748b;
  white-space: nowrap;
}

.mini-pipeline-track .mini-step.is-done {
  color: #0f172a;
}

.mini-pipeline-track .mini-step.is-active {
  color: #1d4ed8;
  font-weight: 750;
}

.mini-pipeline-track .mini-arrow {
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  user-select: none;
}

.compact-tracking-pill {
  font-size: 10.5px;
  font-weight: 650;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.compact-tracking-pill .tracking-link {
  color: #2563eb;
  font-weight: 700;
  text-decoration: underline;
}

.compact-tracking-pill .tracking-placeholder {
  color: #64748b;
}

.compact-tracking-pill.status-shipped {
  color: #059669;
  font-weight: 700;
}

.compact-credit-badge {
  font-size: 11px;
  font-weight: 650;
  color: #7e22ce;
}

.compact-catalog-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #475569;
  font-weight: 600;
}

/* ==========================================================================
   SPRINT 549C: FLAGSHIP INDUSTRIAL CART & PRE-PAYMENT STUDIO
   ========================================================================== */

.modern-cart-header {
  margin-bottom: 24px;
}

.cart-header-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-mode-pill {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 3px 10px;
  border-radius: 999px;
}

.cart-security-pill {
  font-size: 11px;
  font-weight: 750;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 3px 10px;
  border-radius: 999px;
}

.modern-cart-header h1 {
  font-size: 26px;
  font-weight: 850;
  color: #00143c;
  margin: 0;
  letter-spacing: -0.02em;
}

.modern-cart-header p {
  color: #64748b;
  font-size: 13.5px;
  margin: 0;
}

.modern-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(380px, 1fr);
  gap: 24px;
  align-items: stretch;
  height: calc(100vh - 160px);
  min-height: 580px;
}

@media (max-width: 1024px) {
  .modern-cart-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: auto;
  }
}

.cart-runs-section {
  background: #ffffff;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 20, 60, 0.03);
  padding: 20px;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.cart-section-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(0, 20, 60, 0.06);
}

.cart-select-all-wrap {
  display: flex;
  align-items: center;
}

.custom-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
  user-select: none;
}

.custom-checkbox-label input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #2563eb;
  cursor: pointer;
}

.cart-toolbar-stats {
  font-size: 12.5px;
  font-weight: 650;
  color: #64748b;
}

.modern-cart-lines {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Modern Cart Card */
.modern-cart-card {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 20, 60, 0.02);
}

.modern-cart-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 16px rgba(0, 20, 60, 0.05);
}

.modern-cart-card.is-selected {
  border-color: #93c5fd;
  background: #fbfdff;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.06);
}

.modern-cart-card.is-disabled {
  opacity: 0.65;
  background: #f8fafc;
}

.cart-card-select-col {
  padding-top: 4px;
}

.cart-card-select-col input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
  cursor: pointer;
}

.cart-card-thumb-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-thumb-img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #0f172a;
}

.cart-thumb-placeholder {
  width: 76px;
  height: 76px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 26px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cart-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.cart-card-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.cart-model-title {
  font-size: 15px;
  font-weight: 800;
  color: #00143c;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-card-price {
  font-size: 17px;
  font-weight: 850;
  color: #0f172a;
  white-space: nowrap;
}

.cart-card-meta-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2.5px 8.5px;
  border-radius: 6px;
}

.material-pill {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}

.material-pill .pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3b82f6;
  display: inline-block;
}

.qty-pill {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.ready-pill {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.needs-update-pill {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.cart-card-alert-row {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 2px;
}

.cart-warning-note {
  font-size: 11.5px;
  color: #92400e;
  margin: 0;
  line-height: 1.4;
  font-weight: 600;
}

.cart-card-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

.btn-card-reconfigure {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: #f8fafc;
  color: #1e40af;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-card-reconfigure:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
  transform: translateY(-1px);
}

.btn-card-remove {
  background: transparent;
  color: #94a3b8;
  border: none;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.btn-card-remove:hover {
  color: #dc2626;
  background: #fee2e2;
}

/* Modern Cart Summary Panel */
.modern-cart-summary-panel {
  background: #ffffff;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 20, 60, 0.035);
  padding: 22px;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.cart-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 20, 60, 0.06);
  margin-bottom: 16px;
}

.cart-summary-header h2,
.cart-summary-header h3 {
  font-size: 15px;
  font-weight: 850;
  color: #00143c;
  margin: 0;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.cart-summary-badge,
.secure-badge {
  font-size: 10.5px;
  font-weight: 750;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cart-cost-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.cost-label {
  color: #64748b;
  font-weight: 650;
}

.cost-value {
  color: #0f172a;
  font-weight: 750;
}

.estimated-total-row {
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px dashed #cbd5e1;
}

.total-highlight {
  font-size: 22px;
  font-weight: 900;
  color: #1d4ed8;
  letter-spacing: -0.01em;
}

.cart-destination-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.dest-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.dest-section-title span {
  font-size: 12px;
  font-weight: 800;
  color: #00143c;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dest-badge {
  font-size: 10px;
  font-weight: 700;
  color: #059669;
  background: #dcfce7;
  padding: 2px 7px;
  border-radius: 999px;
}

.cart-dest-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.grid-col-full {
  grid-column: 1 / -1;
}

.cart-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-form-group label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}

.cart-form-group input,
.cart-form-group select {
  font-size: 12.5px;
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  transition: border-color 0.15s ease;
}

.cart-form-group input:focus,
.cart-form-group select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.modern-cart-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-calculate-shipping {
  width: 100%;
  padding: 10px 14px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 750;
  color: #1e293b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.15s ease;
}

.btn-calculate-shipping:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.btn-proceed-checkout {
  width: 100%;
  padding: 13px 18px;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  border: none;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 850;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.01em;
}

.btn-proceed-checkout:hover:not(:disabled) {
  background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

.btn-proceed-checkout:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.secondary-cart-actions-row {
  display: flex;
  gap: 8px;
}

.btn-cart-secondary {
  flex: 1;
  padding: 7px 10px;
  background: transparent;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-cart-secondary:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
}

.cart-security-badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 20, 60, 0.06);
}

.sec-item {
  font-size: 11px;
  font-weight: 650;
  color: #64748b;
}

/* Empty Cart State */
.cart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
}

.empty-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 16px;
}

.cart-empty-state h3 {
  font-size: 18px;
  font-weight: 800;
  color: #00143c;
  margin: 0 0 8px;
}

.cart-empty-state p {
  font-size: 13.5px;
  color: #64748b;
  margin: 0 0 20px;
  max-width: 320px;
}

.btn-cart-explore {
  padding: 9px 18px;
  background: #00143c;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-cart-explore:hover {
  background: #1e293b;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .modern-cart-layout {
    grid-template-columns: 1fr;
  }
  .modern-cart-summary-panel {
    position: static;
  }
}

/* ==========================================================================
   Sprint 551A: Customer Support & Internal Messages Center (Mailbox)
   ========================================================================== */

.nav-title-with-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nav-unread-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #0284c7;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  line-height: 1;
}

.support-center-view {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 82px);
  max-height: calc(100vh - 82px);
  overflow: hidden;
  padding: 10px 24px 14px;
  box-sizing: border-box;
}

.support-compact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 10px;
  flex-shrink: 0;
}

.support-compact-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.support-compact-title {
  font-size: 19px;
  font-weight: 850;
  color: #00143c;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1;
}

.support-desk-badge {
  font-size: 11px;
  font-weight: 700;
  color: #0284c7;
  background: #e0f2fe;
  padding: 2px 8px;
  border-radius: 999px;
}

.support-header-status-note {
  font-size: 11.5px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-pulse-dot-sm {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.support-mailbox-layout {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  background: #ffffff;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 20, 60, 0.04);
  flex: 1;
  height: calc(100vh - 140px);
  max-height: calc(100vh - 140px);
  min-height: 480px;
  overflow: hidden;
  margin-top: 0;
}

/* Left Column: Sidebar & Inquiries List */
.support-mailbox-sidebar {
  border-right: 1px solid rgba(0, 20, 60, 0.07);
  background: #fafcff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.mailbox-compose-header {
  padding: 12px 14px 8px;
  background: #ffffff;
}

.mailbox-new-message-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  background: #00143c;
  color: #ffffff;
  font-size: 13px;
  font-weight: 750;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 20, 60, 0.12);
}

.mailbox-new-message-btn:hover {
  background: #00aff8;
  transform: translateY(-1px);
}

.mailbox-channel-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0, 20, 60, 0.06);
  background: #ffffff;
  overflow-x: auto;
  scrollbar-width: none;
}

.mailbox-channel-tabs::-webkit-scrollbar {
  display: none;
}

.channel-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.channel-tab-btn:hover {
  background: #f1f5f9;
  color: #00143c;
}

.channel-tab-btn.is-active {
  background: #e0f2fe;
  color: #0284c7;
  border-color: #bae6fd;
}

.tab-count {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(0, 20, 60, 0.06);
  color: inherit;
}

.channel-tab-btn.is-active .tab-count {
  background: #0284c7;
  color: #ffffff;
}

.mailbox-search-strip {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0, 20, 60, 0.06);
  background: #ffffff;
}

.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrap .search-icon {
  position: absolute;
  left: 10px;
  color: #94a3b8;
  pointer-events: none;
}

.mailbox-search-input {
  width: 100%;
  padding: 6px 10px 6px 28px;
  font-size: 11.5px;
  border: 1px solid rgba(0, 20, 60, 0.1);
  border-radius: 7px;
  background: #f8fafc;
  color: #00143c;
  outline: none;
}

.mailbox-search-input:focus {
  border-color: #00aff8;
  background: #ffffff;
}

.mailbox-thread-list {
  flex: 1;
  overflow-y: auto;
}

.mailbox-thread-item {
  position: relative;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0, 20, 60, 0.05);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  gap: 10px;
  background: transparent;
}

.mailbox-thread-item:hover {
  background: #f8fafc;
}

.mailbox-thread-item.is-active {
  background: #f0f9ff;
  border-left: 3px solid #00aff8;
}

.thread-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0284c7;
  margin-top: 5px;
  flex-shrink: 0;
}

.thread-unread-dot.is-read {
  opacity: 0;
  visibility: hidden;
}

.thread-main-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.thread-top-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.thread-subject {
  margin: 0;
  font-size: 12px;
  font-weight: 750;
  color: #00143c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-time {
  font-size: 10.5px;
  color: #94a3b8;
  white-space: nowrap;
}

.thread-preview-text {
  margin: 0;
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.thread-badges-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 3px;
}

.thread-channel-text {
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.01em;
}

.thread-status-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.status-quote-ready { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.status-replied { background: #f0f9ff; color: #0284c7; border: 1px solid #bae6fd; }
.status-reviewing { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.status-in-production { background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe; }

/* Right Column: Reading, Conversation Stream & Pinned Engineering Sidecard */
.support-mailbox-detail {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  overflow: hidden;
  height: 100%;
}

.detail-header-bar {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(0, 20, 60, 0.07);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  background: #ffffff;
  flex-shrink: 0;
}

.detail-header-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.detail-ticket-id {
  font-size: 10.5px;
  font-weight: 800;
  color: #0284c7;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.detail-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-thread-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #00143c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-thread-rename {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-thread-rename:hover {
  color: #00143c;
  background: #e2e8f0;
}

.title-rename-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.title-rename-input {
  font-size: 14px;
  font-weight: 800;
  padding: 3px 8px;
  border: 1.5px solid #00aff8;
  border-radius: 6px;
  flex: 1;
  outline: none;
  color: #00143c;
  background: #ffffff;
}

.btn-save-title {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  background: #00143c;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-cancel-title {
  padding: 4px 6px;
  font-size: 11px;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
}

.detail-model-spec-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  background: #f8fafc;
  border-radius: 6px;
  font-size: 11px;
  color: #475569;
  border: 1px solid rgba(0, 20, 60, 0.06);
  margin-top: 2px;
}

.detail-model-spec-strip strong {
  color: #00143c;
}

/* Split Pane: Chat Stream (Left/Center) + Engineering Sidecard (Right) */
.detail-body-split {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  height: calc(100% - 64px);
}

.detail-chat-stream-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fafcff;
}

.detail-messages-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.message-item {
  display: flex;
  flex-direction: column;
  max-width: 86%;
  gap: 5px;
}

.message-item.is-user {
  align-self: flex-end;
}

.message-item.is-engineer {
  align-self: flex-start;
}

.message-header-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #64748b;
}

.message-item.is-user .message-header-line {
  justify-content: flex-end;
}

.engineer-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  color: #0284c7;
  background: #e0f2fe;
  padding: 1px 6px;
  border-radius: 4px;
}

.message-bubble {
  padding: 12px 16px;
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 20, 60, 0.03);
}

.message-item.is-user .message-bubble {
  background: #00143c;
  color: #ffffff;
  border-bottom-right-radius: 2px;
}

.message-item.is-engineer .message-bubble {
  background: #ffffff;
  color: #00143c;
  border: 1px solid rgba(0, 20, 60, 0.08);
  border-bottom-left-radius: 2px;
}

.attachment-download-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f1f5f9;
  border-radius: 7px;
  margin-top: 6px;
  border: 1px solid rgba(0, 20, 60, 0.07);
}

.attachment-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.attachment-name {
  font-size: 11.5px;
  font-weight: 750;
  color: #00143c;
}

.attachment-meta {
  font-size: 10px;
  color: #64748b;
}

.attachment-btn {
  padding: 3px 9px;
  background: #0284c7;
  color: #ffffff;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

/* Detail Bottom Reply Bar (PINNED AT BOTTOM) */
.detail-reply-bar {
  flex-shrink: 0;
  padding: 12px 20px;
  border-top: 1px solid rgba(0, 20, 60, 0.08);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 -2px 10px rgba(0, 20, 60, 0.02);
}

.reply-textarea-input {
  width: 100%;
  height: 56px;
  min-height: 56px;
  max-height: 90px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.45;
  border-radius: 7px;
  border: 1px solid rgba(0, 20, 60, 0.12);
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
}

.reply-textarea-input:focus {
  border-color: #00aff8;
  outline: none;
}

.reply-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reply-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 650;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
}

.reply-attach-btn:hover {
  color: #0284c7;
}

.reply-send-btn {
  padding: 6px 16px;
  background: #00143c;
  color: #ffffff;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 750;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.reply-send-btn:hover {
  background: #00aff8;
}

/* RIGHT ENGINEERING ACTION SIDEBAR (User proposal 🎯) */
.detail-action-side-col {
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid rgba(0, 20, 60, 0.07);
  background: #ffffff;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.side-panel-card-title {
  font-size: 11.5px;
  font-weight: 850;
  color: #00143c;
  letter-spacing: -0.01em;
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.quote-action-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1.5px solid #22c55e;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.1);
}

.quote-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quote-card-tag {
  font-size: 10.5px;
  font-weight: 850;
  color: #15803d;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.quote-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.quote-unit-price {
  font-size: 21px;
  font-weight: 900;
  color: #0f172a;
}

.quote-batch-details {
  font-size: 11.5px;
  color: #15803d;
  font-weight: 750;
}

.quote-specs-list {
  font-size: 11px;
  color: #334155;
  line-height: 1.45;
  margin: 0;
}

.quote-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.btn-apply-quote {
  width: 100%;
  padding: 8px 12px;
  background: #16a34a;
  color: #ffffff;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 750;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-apply-quote:hover {
  background: #15803d;
}

.btn-add-cart-quote {
  width: 100%;
  padding: 8px 12px;
  background: #00143c;
  color: #ffffff;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 750;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-add-cart-quote:hover {
  background: #00aff8;
}

/* In-Review Status in Side Panel */
.side-inquiry-status-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.side-inquiry-status-card .status-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.side-inquiry-status-card .status-card-badge {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.side-inquiry-status-card .status-card-desc {
  font-size: 11px;
  color: #475569;
  line-height: 1.4;
  margin: 0;
}

.side-milestones-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed #cbd5e1;
}

.side-milestones-list .milestone-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.side-milestones-list .milestone-icon {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 1px;
}

.side-milestones-list .milestone-item.is-done .milestone-icon {
  background: #dcfce7;
  color: #16a34a;
}

.side-milestones-list .milestone-item.is-active .milestone-icon {
  background: #ffedd5;
  color: #ea580c;
}

.side-milestones-list .milestone-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.side-milestones-list .milestone-text strong {
  color: #1e293b;
  font-size: 11px;
}

.side-milestones-list .milestone-text small {
  color: #64748b;
  font-size: 10px;
}

.status-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ea580c;
  display: inline-block;
  animation: statusPulse 1.8s infinite;
}

@keyframes statusPulse {
  0% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.45); }
  70% { box-shadow: 0 0 0 6px rgba(234, 88, 12, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); }
}

/* Support Inquiry Modal Styling */
.support-inquiry-dialog {
  width: min(640px, calc(100vw - 32px));
}

.field-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.field-hint {
  font-size: 11px;
  font-style: italic;
  color: #64748b;
  font-weight: 400;
}

.inquiry-attachment-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.attachment-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px dashed #94a3b8;
  border-radius: 8px;
  font-size: 11.5px;
  color: #475569;
  cursor: pointer;
  background: #f8fafc;
  font-weight: 650;
  transition: all 0.15s ease;
}

.attachment-upload-btn:hover {
  border-color: #00aff8;
  color: #0284c7;
  background: #f0f9ff;
}

.attachment-selected-name {
  font-size: 11.5px;
  color: #0284c7;
  font-weight: 750;
}

.dialog-actions-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--workspace-line);
}

@media (max-width: 900px) {
  .support-mailbox-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
}



/* ==========================================================================
   S551A Update: Support Attachment Preview, Slice Metrics, Demo Login
   ========================================================================== */

/* Support Attachment Box & Click to Preview */
.attachment-download-box {
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.attachment-download-box:hover {
  background: #e2e8f0;
  border-color: #0284c7;
}

.attachment-download-box.is-previewing {
  border-color: #0284c7;
  background: #f0f9ff;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

.attachment-preview-badge {
  font-size: 10px;
  font-weight: 700;
  color: #0284c7;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Side Panel Attachment Preview Card */
.side-panel-preview-card {
  background: #ffffff;
  border: 1px solid rgba(0, 20, 60, 0.1);
  border-radius: 9px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0, 20, 60, 0.04);
}

.side-panel-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.preview-badge {
  font-size: 11px;
  font-weight: 800;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 5px;
}

.preview-type {
  font-size: 10.5px;
  font-weight: 700;
  color: #0284c7;
  background: #f0f9ff;
  padding: 1px 6px;
  border-radius: 4px;
}

.side-panel-img-wrap {
  width: 100%;
  max-height: 200px;
  border-radius: 6px;
  overflow: hidden;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  border: 1px solid #cbd5e1;
}

.side-panel-img-preview {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  display: block;
}

.preview-zoom-hint {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(15, 23, 42, 0.75);
  color: #ffffff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
}

.preview-meta {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.preview-filename {
  font-size: 12px;
  font-weight: 750;
  color: #1e293b;
  word-break: break-all;
}

.preview-filesize {
  font-size: 11px;
  color: #64748b;
}

.preview-btn-row {
  margin-top: 10px;
}

.preview-download-action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: #00143c;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.preview-download-action:hover {
  background: #002266;
}

/* Slice History Table Enhancements */
.slice-data-table th.th-metrics {
  width: 24%;
  min-width: 190px;
}

.slice-metrics-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.slice-metrics-cell .metric-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #334155;
  white-space: nowrap;
}

.metric-chip svg {
  flex-shrink: 0;
  opacity: 0.75;
}

.metric-chip strong {
  font-weight: 750;
  color: #0f172a;
}

.metric-chip.metric-qty {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #dcfce7;
}
.metric-chip.metric-qty strong {
  color: #15803d;
}

.metric-chip.metric-weight {
  background: #f8fafc;
  color: #334155;
  border: 1px solid #e2e8f0;
}

.metric-chip.metric-time {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #dbeafe;
}
.metric-chip.metric-time strong {
  color: #1d4ed8;
}

/* Demo Sign In Dialog */
.demo-login-dialog {
  max-width: 440px;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid rgba(0, 20, 60, 0.15);
  box-shadow: 0 20px 40px rgba(0, 20, 60, 0.2);
}

.demo-login-content {
  margin-top: 14px;
}

.btn-demo-signin-primary {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, #00143c 0%, #032b70 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-demo-signin-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 20, 60, 0.25);
}

.btn-demo-signin-secondary {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  box-sizing: border-box;
  font-family: inherit;
}

.btn-demo-signin-secondary:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.btn-signin-icon {
  font-size: 20px;
  flex-shrink: 0;
}

/* ==========================================================================
   Sprint 552: Saved Links (Customer-Owned URL Bookmarks)
   ========================================================================== */

.saved-links-continuation-banner {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 1.25rem;
}

.saved-links-continuation-banner .continuation-banner-content {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.saved-links-continuation-banner .continuation-banner-icon {
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.saved-links-continuation-banner .continuation-banner-text {
  flex: 1;
  min-width: 200px;
}

.saved-links-continuation-banner .continuation-banner-text strong {
  display: block;
  font-size: 14px;
  color: #15803d;
  margin-bottom: 2px;
}

.saved-links-continuation-banner .continuation-banner-text p {
  font-size: 13px;
  color: #166534;
  margin: 0;
}

.saved-links-continuation-banner .continuation-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.saved-links-guest-notice {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.saved-links-guest-notice .guest-notice-icon {
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.saved-links-guest-notice .guest-notice-copy {
  flex: 1;
  min-width: 220px;
}

.saved-links-guest-notice .guest-notice-copy strong {
  display: block;
  font-size: 14px;
  color: #1e293b;
  margin-bottom: 2px;
}

.saved-links-guest-notice .guest-notice-copy p {
  font-size: 13px;
  color: #475569;
  margin: 0;
}

.saved-links-guest-notice .guest-notice-actions {
  flex-shrink: 0;
}

.saved-links-quick-save {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.saved-links-quick-save__row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.saved-links-quick-save__field {
  position: relative;
  display: flex;
  align-items: center;
}

.saved-links-quick-save__field.url-field {
  flex: 3;
  min-width: 280px;
}

.saved-links-quick-save__field.title-field {
  flex: 2;
  min-width: 180px;
}

.saved-links-quick-save__field .field-icon {
  position: absolute;
  left: 12px;
  color: #94a3b8;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.saved-links-quick-save__field input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  font-size: 13.5px;
  font-family: inherit;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.saved-links-quick-save__field.url-field input {
  padding-left: 36px;
}

.saved-links-quick-save__field input:focus {
  outline: none;
  border-color: #008060;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 128, 96, 0.12);
}

.saved-links-quick-save button[type="submit"] {
  height: 42px;
  padding: 0 20px;
  flex-shrink: 0;
  white-space: nowrap;
}

.saved-links-quick-save__feedback {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
}

.saved-links-quick-save__feedback.is-error {
  color: #b91c1c;
}

.saved-links-quick-save__feedback.is-success {
  color: #15803d;
}

.saved-links-count-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
}

.saved-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 1rem;
}

.saved-link-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.saved-link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
  border-color: #cbd5e1;
}

.saved-link-card__thumbnail-area {
  position: relative;
  width: 100%;
  height: 160px;
  background: #0f172a;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.saved-link-card__thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.saved-link-card__thumbnail-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #94a3b8;
}

.saved-link-card__thumbnail-fallback svg {
  opacity: 0.6;
}

.saved-link-card__thumbnail-fallback span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #cbd5e1;
}

.saved-link-card__provider-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.85);
  color: #f8fafc;
  backdrop-filter: blur(4px);
  letter-spacing: 0.02em;
}

.saved-link-card__provider-badge.makerworld {
  border-left: 3px solid #10b981;
}

.saved-link-card__provider-badge.printables {
  border-left: 3px solid #f97316;
}

.saved-link-card__provider-badge.thingiverse {
  border-left: 3px solid #06b6d4;
}

.saved-link-card__provider-badge.cults3d {
  border-left: 3px solid #8b5cf6;
}

.saved-link-card__content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.saved-link-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.saved-link-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 12px;
}

.saved-link-card__domain {
  font-weight: 600;
  color: #475569;
}

.saved-link-card__url-preview {
  font-size: 12px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 16px;
  display: block;
}

.saved-link-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.saved-link-card__actions .action-open {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.saved-link-card__actions .action-open:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0284c7;
}

.saved-link-card__actions .action-make {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff;
  background: #008060;
  border: 1px solid #006e52;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.saved-link-card__actions .action-make:hover {
  background: #006e52;
}

.saved-link-card__actions .action-remove {
  padding: 7px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.saved-link-card__actions .action-remove:hover {
  color: #dc2626;
  background: #fef2f2;
  border-color: #fecaca;
}

.saved-links-empty {
  text-align: center;
  padding: 48px 24px;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  margin-top: 1rem;
}

.saved-links-empty__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
}

.saved-links-empty h3 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
}

.saved-links-empty p {
  font-size: 13.5px;
  color: #64748b;
  max-width: 440px;
  margin: 0 auto 20px;
  line-height: 1.5;
}

.saved-links-empty__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 640px) {
  .saved-links-quick-save__row {
    flex-direction: column;
    align-items: stretch;
  }
  .saved-links-quick-save__field.url-field,
  .saved-links-quick-save__field.title-field {
    min-width: 100%;
  }
  .saved-links-quick-save button[type="submit"] {
    width: 100%;
  }
  .saved-links-grid {
    grid-template-columns: 1fr;
  }
}


/* --- Model Card Top-Right Kebab Menu --- */
.card-kebab-control {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 35;
}

.card-kebab-trigger {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(203, 213, 225, 0.85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.card-kebab-trigger:hover,
.card-kebab-control.is-open .card-kebab-trigger {
  background: #ffffff;
  color: #0284c7;
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  border-color: #94a3b8;
}

.card-kebab-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 215px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.18), 0 4px 10px -2px rgba(15, 23, 42, 0.06);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 60;
  animation: kebabDropIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-kebab-menu[hidden] {
  display: none !important;
}

@keyframes kebabDropIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.card-kebab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #334155;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.12s ease;
}

.card-kebab-item svg {
  flex-shrink: 0;
  color: #64748b;
  transition: color 0.12s ease;
}

.card-kebab-item:hover {
  background: #f1f5f9;
  color: #0284c7;
}

.card-kebab-item:hover svg {
  color: #0284c7;
}

.card-kebab-item--danger {
  color: #64748b;
  border-top: 1px solid #f1f5f9;
  margin-top: 2px;
  padding-top: 8px;
}

.card-kebab-item--danger:hover {
  background: #fef2f2;
  color: #ef4444;
}

.card-kebab-item--danger:hover svg {
  color: #ef4444;
}

.model-card:has(.card-kebab-control.is-open),
.model-card.has-kebab-open {
  z-index: 50;
}

.model-card__meta:empty {
  display: none;
}

.object-grid.is-list-view .card-kebab-control {
  display: none !important;
}


/* --- Inline View Heading with Side-by-Side Description --- */
.view-heading--inline-desc {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-bottom: 16px !important;
}

.models-header-title-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 16px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.models-header-title-row h1 {
  margin: 0 !important;
  font-size: 26px !important;
  font-weight: 850 !important;
  letter-spacing: -0.025em !important;
  color: #00143c !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.models-header-subtext {
  color: #64748b !important;
  font-size: 13.5px !important;
  font-weight: 450 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 1024px) {
  .view-heading--inline-desc {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .models-header-title-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .models-header-subtext {
    white-space: normal !important;
  }
}

/* ==========================================================================
   Sprint 563: Global Trash (Recycle Bin), Project Toolbars & Clean Minimal Header
   ========================================================================== */

/* Clean Minimal Header (Option 2) */
.workspace-view[data-workspace-view="models"] > .view-heading,
.workspace-view[data-workspace-view="projects"] > .view-heading,
.workspace-view[data-workspace-view="trash"] > .view-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

/* Sprint 568A: When project detail is active, hide outer projects view heading and toolbar so breadcrumb sits at the very top */
.workspace-view[data-workspace-view="projects"]:has([data-project-detail]:not([hidden]):not(:empty)) > .view-heading,
.workspace-view[data-workspace-view="projects"]:has([data-project-detail]:not([hidden]):not(:empty)) > .projects-toolbar,
.workspace-view[data-workspace-view="projects"].is-detail-view > .view-heading,
.workspace-view[data-workspace-view="projects"].is-detail-view > .projects-toolbar {
  display: none !important;
}

.workspace-view[data-workspace-view="models"] > .view-heading h1,
.workspace-view[data-workspace-view="projects"] > .view-heading h1,
.workspace-view[data-workspace-view="trash"] > .view-heading h1 {
  margin: 0 !important;
  font-size: 26px !important;
  font-weight: 850 !important;
  letter-spacing: -0.025em !important;
  color: #00143c !important;
  line-height: 1.15 !important;
}

/* Toolbars */
.projects-toolbar,
.trash-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 0 20px;
  flex-wrap: wrap;
}

.projects-toolbar__left,
.trash-toolbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.projects-search-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  padding: 6px 12px;
  min-width: 240px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.projects-search-bar:focus-within {
  border-color: #0066cc;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}

.projects-search-bar input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  color: #0f172a;
  width: 100%;
}

/* Trash Notice Card */
.trash-notice-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

.trash-notice-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.trash-notice-text strong {
  display: block;
  font-size: 14.5px;
  font-weight: 750;
  color: #1e40af;
  margin-bottom: 4px;
}

.trash-notice-text p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #1e3a8a;
}

/* Trash Grid & Cards */
.trash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
}

.trash-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.trash-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.trash-badge-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  letter-spacing: 0.02em;
}

.trash-project__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
}

.trash-project__header .object-glyph {
  font-size: 22px;
  color: #94a3b8;
}

.trash-card__title {
  font-size: 15px;
  font-weight: 750;
  color: #0f172a;
  margin: 0 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trash-card__summary {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 10px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trash-card__id {
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 8px;
}

.trash-card__id code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: #f1f5f9;
  padding: 2px 5px;
  border-radius: 4px;
  color: #475569;
}

.trash-card__actions,
.card-actions--trash {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  background: #fafcff !important;
  border-top: 1px solid #edf2f7 !important;
  align-items: center !important;
}

/* Action Buttons: Restore & Delete Forever */
.btn-trash-restore,
.btn-restore-model,
.btn-restore-project {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid #bfdbfe !important;
  background: #eff6ff !important;
  color: #0066cc !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.btn-trash-restore:hover,
.btn-restore-model:hover,
.btn-restore-project:hover {
  background: #0066cc !important;
  color: #ffffff !important;
  border-color: #0066cc !important;
}

.btn-trash-restore svg,
.btn-restore-model svg,
.btn-restore-project svg {
  stroke: currentColor !important;
}

.btn-trash-delete-forever,
.btn-delete-forever {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid #fecaca !important;
  background: #fff5f5 !important;
  color: #dc2626 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.btn-trash-delete-forever:hover,
.btn-delete-forever:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
}

.btn-trash-delete-forever svg,
.btn-delete-forever svg {
  stroke: currentColor !important;
}


/* Sprint 565: Reorganized Project Detail Grid & Revision UI */
.project-detail-view-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(380px, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

.project-detail-visuals-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  height: auto !important;
}

.project-detail-visuals-col > .aligned-screen-box {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 380px !important;
  max-height: none !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.08) !important;
  background: #ffffff !important;
  padding: 14px !important;
  margin-bottom: 0 !important;
}

.project-detail-visuals-col > .aligned-screen-box .preview-viewport-stage {
  flex: 1 1 auto !important;
  height: clamp(340px, 42vh, 440px) !important;
  min-height: 340px !important;
  background: radial-gradient(circle at 50% 50%, #0d1b2a 0%, #060d17 100%) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  position: relative !important;
}

.project-detail-visuals-col .source-light-card {
  margin-top: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 1.6rem 2rem !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.project-detail-specs-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.brief-revision-selector-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 6px 0 10px !important;
  padding: 8px 12px !important;
  background: rgba(2, 132, 199, 0.06) !important;
  border: 1px solid rgba(2, 132, 199, 0.22) !important;
  border-radius: 8px !important;
}

.brief-revision-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #0369a1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
}

.brief-revision-select {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  background: #ffffff !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.brief-revision-select:focus {
  outline: none !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;
}

.project-detail-actions-strip--inline {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 2px 0 4px !important;
  margin: 0 !important;
}

.project-detail-actions-strip--inline .primary-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0284c7 !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25) !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.project-detail-actions-strip--inline .primary-action:hover {
  background: #0369a1 !important;
  border-color: #0369a1 !important;
}

.project-detail-actions-strip--inline .secondary-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 15px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

.project-detail-actions-strip--inline .secondary-action:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

.source-items-tray-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03) !important;
}

.source-version-items-list {
  max-height: 400px !important;
  overflow-y: auto !important;
}



/* ==========================================================================
   Sprint 569B: AI Request Studio (Unified Projects + Design Request Drawer)
   ========================================================================== */

.project-headline-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.project-headline-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.project-detail-menu {
  position: relative !important;
}

.project-detail-menu summary {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #475569 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  user-select: none !important;
  list-style: none !important;
  transition: all 0.15s ease !important;
}

.project-detail-menu summary:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0284c7 !important;
}

.project-detail-menu .object-menu__panel {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 180px !important;
  padding: 6px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.05) !important;
  z-index: 50 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.project-detail-menu .object-menu__panel button {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 8px 12px !important;
  border: none !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 0.12s ease !important;
}

.project-detail-menu .object-menu__panel button:hover {
  background: #f1f5f9 !important;
  color: #0284c7 !important;
}

/* Studio Inspection Header Strip (Left Pane in State B) */
.studio-inspection-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  margin-bottom: 4px !important;
  gap: 12px !important;
}

.studio-history-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #0369a1 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.studio-history-toggle-btn:hover {
  background: #f0f9ff !important;
  border-color: #38bdf8 !important;
}

.studio-inspecting-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
}

.studio-inspecting-kicker {
  color: #64748b !important;
  font-weight: 500 !important;
}

.studio-inspecting-title {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* Left-to-Right Borrowing Toolbar */
.studio-borrowing-tray .tray-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.borrow-bulk-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.btn-copy-all-draft {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  border: 1px solid #bae6fd !important;
  background: #f0f9ff !important;
  color: #0284c7 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-copy-all-draft:hover {
  background: #e0f2fe !important;
  border-color: #38bdf8 !important;
}

.btn-add-selected-draft {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-add-selected-draft:not(:disabled) {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #059669 !important;
}

.btn-add-selected-draft:not(:disabled):hover {
  background: #d1fae5 !important;
  border-color: #34d399 !important;
}

.borrow-checkbox-wrap {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 6px !important;
  cursor: pointer !important;
}

.borrow-checkbox {
  width: 15px !important;
  height: 15px !important;
  cursor: pointer !important;
  accent-color: #0284c7 !important;
}

.item-inline-btn--borrow {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0284c7 !important;
  font-weight: 650 !important;
}

.item-inline-btn--borrow:hover:not(:disabled) {
  background: #f0f9ff !important;
  border-color: #38bdf8 !important;
}

.item-inline-btn--borrow:disabled {
  opacity: 0.6 !important;
  color: #059669 !important;
  border-color: #a7f3d0 !important;
  background: #ecfdf5 !important;
  cursor: default !important;
}

/* AI Request Studio Drawer Card (Right Column) */
.studio-drawer-card {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08) !important;
  overflow: hidden !important;
  position: relative !important;
}

.studio-drawer-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: 18px 20px !important;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  gap: 14px !important;
}

.studio-drawer-kicker {
  display: block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #0284c7 !important;
  margin-bottom: 3px !important;
}

.studio-drawer-title {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
}

.studio-drawer-sub {
  margin: 4px 0 0 !important;
  font-size: 12px !important;
  color: #64748b !important;
}

.studio-drawer-close-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.studio-drawer-close-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

.studio-drawer-body {
  padding: 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  max-height: calc(100vh - 280px) !important;
  overflow-y: auto !important;
}

/* Studio Step Cards */
.studio-step-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 16px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
}

.studio-step-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.studio-step-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.studio-step-num {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.studio-step-heading {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.studio-step-hint {
  margin: 0 !important;
  font-size: 12px !important;
  color: #64748b !important;
  line-height: 1.4 !important;
}

/* AI Polish Button */
.ai-polish-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(14, 165, 233, 0.4) !important;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  color: #0369a1 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 4px rgba(2, 132, 199, 0.12) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ai-polish-btn:hover {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
  border-color: #38bdf8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.2) !important;
}

.ai-sparkle-icon {
  font-size: 13px !important;
  line-height: 1 !important;
}

.studio-textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 100px !important;
  padding: 10px 12px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
  font-family: inherit !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.studio-textarea:focus {
  outline: none !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

.studio-constraints-details {
  border-top: 1px dashed #cbd5e1 !important;
  padding-top: 8px !important;
  margin-top: 4px !important;
}

.studio-constraints-details summary {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #0284c7 !important;
  cursor: pointer !important;
}

.studio-constraints-body {
  margin-top: 8px !important;
}

/* Staged Reference Chips in Studio Drawer */
.studio-staged-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.studio-staged-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 12px !important;
  color: #1e293b !important;
  max-width: 260px !important;
}

.studio-staged-chip .chip-title {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 140px !important;
}

.studio-staged-chip .chip-kind {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
}

.studio-staged-chip .chip-remove-btn {
  border: none !important;
  background: transparent !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 2px !important;
  transition: color 0.12s ease !important;
}

.studio-staged-chip .chip-remove-btn:hover {
  color: #dc2626 !important;
}

.studio-empty-staged {
  margin: 0 !important;
  padding: 8px !important;
  font-size: 12px !important;
  color: #64748b !important;
  font-style: italic !important;
}

/* Dropzone */
.studio-dropzone {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  border: 2px dashed #cbd5e1 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #64748b !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.studio-dropzone:hover {
  border-color: #0284c7 !important;
  background: #f0f9ff !important;
  color: #0284c7 !important;
}

.studio-browse-btn {
  background: none !important;
  border: none !important;
  color: #0284c7 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.studio-library-action-row {
  display: flex !important;
  justify-content: flex-end !important;
}

.btn-add-library {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 13px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Sticky Bottom Action Bar (R.4) */
.studio-sticky-bottom-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  gap: 12px !important;
  box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.04) !important;
}

.btn-discard-draft {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  border: 1px solid #fecaca !important;
  background: #fff5f5 !important;
  color: #dc2626 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-discard-draft:hover {
  background: #fee2e2 !important;
  border-color: #f87171 !important;
}

.studio-bottom-right-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.btn-save-draft {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

.btn-review-send {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 18px !important;
  border-radius: 8px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0284c7 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-review-send:hover {
  background: #0369a1 !important;
  border-color: #0369a1 !important;
}

/* Review & Send Modal Dialog */
.studio-modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
  padding: 16px !important;
}

.studio-modal-card {
  width: min(560px, 100%) !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 40px -8px rgba(15, 23, 42, 0.25) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.studio-modal-header {
  padding: 18px 24px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.studio-modal-header h3 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
}

.studio-modal-body {
  padding: 22px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.review-summary-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}

.review-summary-table th {
  text-align: left !important;
  width: 130px !important;
  padding: 8px 12px 8px 0 !important;
  color: #64748b !important;
  font-weight: 600 !important;
  vertical-align: top !important;
}

.review-summary-table td {
  padding: 8px 0 !important;
  color: #0f172a !important;
  font-weight: 500 !important;
}

.review-locked-notice {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  color: #475569 !important;
}

.studio-modal-footer {
  padding: 16px 24px !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

/* ==========================================================================
   Sprint 569: AI Request Studio - Exact Horizon Symmetry Dual-Pane Workbench
   ========================================================================== */
body:has([data-workspace-view="request-design"].is-active) .workspace-main,
.workspace-shell:has([data-workspace-view="request-design"].is-active) .workspace-main {
  padding: 0 !important;
  max-width: 100% !important;
}

.workspace-view[data-workspace-view="request-design"] {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - 56px) !important;
  height: auto !important;
  overflow: visible !important;
  background: #f8fafc !important;
}

.workspace-view[data-workspace-view="request-design"][hidden] {
  display: none !important;
}

.ai-request-studio-container {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow: visible !important;
  background: #f8fafc !important;
  width: 100% !important;
}

/* Project card buttons: View Project vs Edit in Studio */
.card-actions .btn-edit-studio {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}
.card-actions .btn-edit-studio:hover {
  background: #0369a1 !important;
  border-color: #0369a1 !important;
}
.card-actions .btn-view-project {
  background: #ffffff !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}
.card-actions .btn-view-project:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

    /* Top Bar */
    .proto-topbar {
      height: 52px;
      background: #ffffff;
      border-bottom: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      flex-shrink: 0;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    }
    .proto-asset-selector-group {
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .proto-asset-trigger {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .proto-asset-trigger:hover, .proto-asset-trigger.is-open {
      background: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
    }
    .proto-asset-pill {
      font-size: 10px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 4px;
      background: #e0f2fe;
      color: #0369a1;
      text-transform: uppercase;
    }
    /* Popover */
    .proto-popover {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      width: 440px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.16);
      z-index: 100;
      display: none;
      overflow: hidden;
    }
    .proto-popover.is-open {
      display: block;
    }
    .left-actions-popover {
      display: none;
      position: absolute;
      top: 100%;
      margin-top: 4px;
      background: #ffffff !important;
      border: 1px solid #cbd5e1 !important;
      border-radius: 8px !important;
      box-shadow: 0 10px 15px -3px rgba(0,0,0,0.15) !important;
      z-index: 1000 !important;
      overflow: hidden;
    }
    .left-actions-popover.is-open {
      display: block !important;
    }
    .popover-tabs {
      display: flex;
      border-bottom: 1px solid #e2e8f0;
      background: #ffffff;
    }
    .popover-tab {
      flex: 1;
      padding: 10px;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
    }
    .popover-tab.is-active {
      color: #0284c7;
      border-bottom-color: #0284c7;
      background: #f0f9ff;
    }
    .popover-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      border-bottom: 1px solid #f1f5f9;
      cursor: pointer;
    }
    .popover-item:hover, .popover-item.is-selected {
      background: #f8fafc;
    }
    /* Workbench Grid (Exact 50/50 Horizon Symmetry & Silky Smooth Transition) */
    .proto-workbench {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
      gap: 16px !important;
      padding: 12px 28px 48px 28px !important;
      box-sizing: border-box !important;
      overflow: visible !important;
      align-items: start !important;
      transition: grid-template-columns 0.38s cubic-bezier(0.16, 1, 0.3, 1), gap 0.35s ease !important;
    }
    .proto-workbench.is-view-mode {
      grid-template-columns: minmax(0, 1fr) 0fr !important;
      gap: 0px !important;
    }
    /* Columns */
    .proto-col {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      overflow: visible;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
      min-width: 0 !important;
      transition: all 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    /* Right Col Sliding Transition (Replaces jarring display:none) */
    #right-col {
      min-width: 0 !important;
      overflow: hidden !important;
      opacity: 1 !important;
      transform: translateX(0) !important;
      visibility: visible !important;
      transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s !important;
    }
    .proto-workbench.is-view-mode #right-col,
    #right-col.is-collapsed {
      opacity: 0 !important;
      transform: translateX(36px) !important;
      visibility: hidden !important;
      pointer-events: none !important;
      border: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    /* Left Col Auto-Expansion in View Mode */
    #left-col {
      min-width: 0 !important;
      transition: all 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .proto-workbench.is-view-mode .proto-row-2-left {
      height: 420px !important;
      transition: height 0.35s ease !important;
    }
    .proto-row-2-left {
      transition: height 0.35s ease !important;
    }
    /* Row 1: Header / Timeline (52px - Generous Breathing Room) */
    .proto-row-1 {
      height: 52px;
      box-sizing: border-box;
      padding: 0 16px;
      background: #f8fafc;
      border-bottom: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }
    .proto-row-1-group {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      white-space: nowrap !important;
      flex-shrink: 0 !important;
    }
    .proto-row-1-group > div {
      display: inline-flex !important;
      align-items: center !important;
      position: relative !important;
    }
    .lineage-capsule {
      display: inline-flex !important;
      align-items: center !important;
      background: #f8fafc !important;
      border: 1.5px solid #cbd5e1 !important;
      border-radius: 8px !important;
      padding: 3px 10px !important;
      gap: 8px !important;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
      flex-shrink: 0 !important;
    }
    .lineage-capsule > div {
      display: inline-flex !important;
      align-items: center !important;
      position: relative !important;
    }
    .left-actions-popover {
      display: none;
      position: absolute !important;
      top: 100% !important;
      left: 0 !important;
      margin-top: 4px !important;
      width: 320px !important;
      background: #ffffff !important;
      border: 1px solid #cbd5e1 !important;
      border-radius: 8px !important;
      box-shadow: 0 10px 15px -3px rgba(0,0,0,0.15) !important;
      z-index: 1000 !important;
      overflow: hidden !important;
      white-space: normal !important;
    }
    .left-actions-popover.is-open {
      display: block !important;
    }
    .left-actions-popover .action-menu-item {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      width: 100% !important;
      box-sizing: border-box !important;
      padding: 8px 12px !important;
      cursor: pointer !important;
    }
    .left-actions-popover .action-menu-item:hover {
      background: #f1f5f9 !important;
    }
    .timeline-chips {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .timeline-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 9px;
      border-radius: 6px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      font-size: 11px;
      font-weight: 650;
      color: #475569;
      cursor: pointer;
    }
    .timeline-chip.is-active {
      border-color: #0284c7;
      background: #f0f9ff;
      color: #0369a1;
      font-weight: 750;
    }
    /* Prominent Center-Split Studio Mode Capsule (两列分界正上方，醒目指导左右) */
    .proto-center-capsule {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 3px;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
      gap: 3px;
      z-index: 50;
    }
    .center-capsule-item {
      width: 320px;
      justify-content: center;
      padding: 5px 18px;
      border: none;
      background: transparent;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.15s ease;
      color: #64748b;
      box-sizing: border-box;
    }
    .center-capsule-item:hover {
      color: #0f172a;
      background: rgba(255, 255, 255, 0.6);
    }
    .center-capsule-item.is-active {
      background: #ffffff;
      color: #0284c7;
      font-weight: 750;
      box-shadow: 0 2px 4px rgba(15, 23, 42, 0.1);
    }
    .center-capsule-icon {
      font-size: 13px;
      display: inline-flex;
      align-items: center;
      line-height: 1;
    }
    .center-capsule-label {
      font-size: 11.5px;
      font-weight: 700;
      white-space: nowrap;
      line-height: 1.2;
    }
    .center-capsule-sub {
      font-size: 9.5px;
      font-weight: 600;
      color: #94a3b8;
      background: #f1f5f9;
      padding: 2px 6px;
      border-radius: 4px;
      white-space: nowrap;
      line-height: 1.2;
      display: inline-flex;
      align-items: center;
    }
    .center-capsule-item.is-active .center-capsule-sub {
      background: #e0f2fe;
      color: #0369a1;
    }
    .center-capsule-seam {
      width: 1px;
      height: 20px;
      background: #cbd5e1;
      margin: 0 2px;
    }
    .btn-rail-toggle {
      padding: 2px 7px;
      border: none;
      background: transparent;
      font-size: 10px;
      font-weight: 650;
      color: #64748b;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .btn-rail-toggle.is-active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    }
    /* Row 2: 3D Stage & Instructions (EXACT 260px Height) */
    .proto-row-2-left {
      height: 260px;
      background: #090d16;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      border-bottom: 1px solid #e2e8f0;
      overflow: hidden;
    }
    .screen-header-bar {
      height: 38px;
      box-sizing: border-box;
      padding: 0 12px;
      background: #0c1222;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }
    .screen-stage-badge {
      padding: 3px 8px;
      border-radius: 5px;
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #f8fafc;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
      max-width: 250px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .screen-stage-badge.is-draft-preview {
      border-color: #38bdf8;
      background: rgba(2, 132, 199, 0.9);
      color: #ffffff;
    }
    .screen-body-wrap {
      flex: 1;
      display: flex;
      min-height: 0;
      position: relative;
    }
    .screen-body-wrap {
      flex: 1;
      display: flex;
      position: relative;
      overflow: hidden;
    }
    .screen-body-wrap.rail-left {
      flex-direction: row-reverse;
    }
    .screen-body-wrap.rail-left .screen-vertical-rail {
      border-left: none;
      border-right: 1px solid rgba(255, 255, 255, 0.08);
    }
    .screen-hud-hint {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(4px);
      padding: 3px 12px;
      border-radius: 20px;
      color: #94a3b8;
      font-size: 10px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 6px;
      pointer-events: none;
      white-space: nowrap;
      z-index: 10;
    }
    .screen-canvas-area {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .screen-vertical-rail {
      width: 44px;
      background: #0b1120;
      border-left: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 0;
      gap: 6px;
      flex-shrink: 0;
    }
    .rail-btn {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.05);
      color: #94a3b8;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .rail-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      color: #ffffff;
    }
    .rail-btn.is-active {
      background: #0284c7;
      color: #ffffff;
      border-color: #38bdf8;
    }
    .rail-divider {
      width: 24px;
      height: 1px;
      background: rgba(255, 255, 255, 0.12);
      margin: 2px 0;
    }
    .screen-vertical-rail.is-grayed-out .rail-tool {
      opacity: 0.75;
      cursor: pointer;
    }
    /* Revision Note Card */
    .proto-revision-note-card {
      margin: 8px 14px;
      padding: 10px 14px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex-shrink: 0;
    }
    .rev-note-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 700;
      color: #1e40af;
    }
    .rev-note-date {
      font-size: 10px;
      font-weight: 500;
      color: #64748b;
    }
    .rev-note-body {
      font-size: 12px;
      line-height: 1.45;
      color: #1e3a8a;
    }

    /* Reference & Notes Split Shelves */
    .proto-shelf-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      padding: 10px 14px;
      overflow-y: auto;
      flex: 1;
    }
    .proto-subcard {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .proto-subcard-header {
      padding: 8px 12px;
      background: #f8fafc;
      border-bottom: 1px solid #e2e8f0;
      font-size: 11px;
      font-weight: 700;
      color: #334155;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .proto-subcard-body {
      padding: 10px 12px;
      font-size: 12px;
      color: #475569;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* Start a Project Details / Specs Accordion */
    .proto-specs-accordion {
      margin: 0 14px 10px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }
    .proto-specs-summary {
      padding: 8px 12px;
      background: #f1f5f9;
      font-size: 11px;
      font-weight: 700;
      color: #1e293b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      user-select: none;
    }
    .proto-specs-summary:hover {
      background: #e2e8f0;
    }
    .proto-specs-chips {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .spec-chip {
      padding: 2px 7px;
      border-radius: 4px;
      background: #e2e8f0;
      color: #334155;
      font-size: 10px;
      font-weight: 600;
    }
    .proto-specs-content {
      padding: 12px;
      display: none;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      background: #ffffff;
      border-top: 1px solid #e2e8f0;
    }
    .proto-specs-accordion.is-open .proto-specs-content {
      display: grid;
    }
    .spec-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .spec-field label {
      font-size: 10px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .spec-input, .spec-select {
      width: 100%;
      box-sizing: border-box;
      padding: 6px 8px;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      font-size: 11px;
      color: #0f172a;
      background: #f8fafc;
      font-family: inherit;
    }
    .spec-input:focus, .spec-select:focus {
      outline: none;
      border-color: #0284c7;
      background: #ffffff;
    }

    /* Modal / Popovers for Edit Title */
    .proto-edit-title-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.4);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }
    .proto-edit-title-modal.is-open {
      display: flex;
    }
    .proto-modal-card {
      width: 420px;
      background: #ffffff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* Studio Mode Switchers */
    .workbench-layout-toggle {
      display: flex;
      background: #e2e8f0;
      border-radius: 6px;
      padding: 2px;
      gap: 2px;
    }
    .layout-toggle-btn {
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 600;
      border: none;
      background: transparent;
      border-radius: 4px;
      color: #64748b;
      cursor: pointer;
    }
    .layout-toggle-btn.is-active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    }

    /* 3-PANE WORKBENCH (The CAD Standard "Breakthrough" Layout) */
    .proto-workbench.is-3pane {
      display: grid;
      grid-template-columns: 260px 1fr 380px;
      gap: 0;
      height: calc(100vh - 52px);
      overflow: hidden;
    }
    .pane-left-tree {
      background: #ffffff;
      border-right: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .pane-center-stage {
      background: #0f172a;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    }
    .pane-right-composer {
      background: #ffffff;
      border-left: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* Center Stage Elements (Start a Project 1:1 Polish) */
    .center-stage-toolbar {
      height: 46px;
      background: rgba(15, 23, 42, 0.95);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      backdrop-filter: blur(8px);
      z-index: 10;
    }
    .center-stage-viewport {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
    }
    .center-stage-hud-bottom {
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 20px;
      padding: 6px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      backdrop-filter: blur(8px);
      font-size: 11px;
      color: #cbd5e1;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }

    /* Right Inspector Tabs (Direction C) */
    .inspector-tabs {
      display: flex;
      border-bottom: 1px solid #e2e8f0;
      background: #f8fafc;
    }
    .inspector-tab {
      flex: 1;
      padding: 9px 8px;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      text-align: center;
      transition: all 0.15s ease;
    }
    .inspector-tab:hover {
      color: #0f172a;
      background: #f1f5f9;
    }
    .inspector-tab.is-active {
      color: #0284c7;
      border-bottom-color: #0284c7;
      background: #ffffff;
      font-weight: 700;
    }
    .inspector-content-pane {
      display: none;
      padding: 14px;
      flex: 1;
      overflow-y: auto;
      flex-direction: column;
      gap: 12px;
    }
    .inspector-content-pane.is-active {
      display: flex;
    }

    /* Paul's Slide-Down Drawer Tray Styling (Saves Visual Space!) */
    .file-drawer-tray {
      max-height: 0;
      overflow: hidden;
      transition: all 0.25s ease;
      opacity: 0;
      margin: 0 0 0 24px;
    }
    .file-drawer-tray.is-open {
      max-height: 200px !important;
      opacity: 1 !important;
      margin: 0 0 6px 24px !important;
    }
    .drawer-tray-inner {
      padding: 6px 12px;
      border-left: 2px solid #cbd5e1;
      font-size: 11px;
      line-height: 1.45;
      color: #64748b;
      background: #f8fafc;
      border-radius: 0 4px 4px 0;
    }
    .drawer-toggle-btn {
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      font-size: 10px;
      color: #64748b;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .drawer-toggle-btn:hover {
      background: #ffffff;
      color: #0284c7;
      border-color: #0284c7;
    }

    /* Start a Project 1:1 Step 03 Details Accordion Box */
    .dml-ws__details-box {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
      transition: all 0.2s ease;
    }
    .dml-ws__details-summary {
      padding: 7px 12px;
      background: #f8fafc;
      font-size: 11px !important;
      font-weight: 700 !important;
      color: #1e293b !important;
      cursor: pointer;
      user-select: none;
      list-style: none;
      display: flex;
      align-items: center;
      transition: background 0.15s ease;
    }
    .dml-ws__details-summary::-webkit-details-marker {
      display: none;
    }
    .dml-ws__details-summary:hover {
      background: #f1f5f9;
    }
    .dml-ws__details-summary-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }
    .dml-ws__details-summary-left {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .dml-ws__details-chevron {
      display: inline-flex;
      align-items: center;
      color: #64748b;
      transition: transform 0.2s ease;
    }
    .dml-ws__details-box[open] .dml-ws__details-chevron {
      transform: rotate(180deg);
    }
    .dml-ws__details-summary-title {
      font-weight: 750 !important;
      color: #0f172a !important;
      font-size: 11.5px !important;
    }
    .dml-ws__details-summary-sub {
      color: #64748b !important;
      font-weight: 500 !important;
      font-size: 10.5px !important;
    }
    .dml-ws__details-content {
      padding: 10px 12px;
      background: #ffffff;
      border-top: 1px solid #e2e8f0;
      font-size: 11px !important;
    }

    /* AI Request Studio Accordions (Bulletproof Isolation) */
    .studio-accordion-box {
      background: #ffffff !important;
      border: 1px solid #cbd5e1 !important;
      border-radius: 8px !important;
      overflow: hidden !important;
      flex-shrink: 0 !important;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
      transition: all 0.2s ease !important;
    }
    .studio-accordion-summary {
      padding: 6px 12px !important;
      min-height: 34px !important;
      background: #f8fafc !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      color: #1e293b !important;
      cursor: pointer !important;
      user-select: none !important;
      list-style: none !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      transition: background 0.15s ease !important;
    }
    .studio-accordion-summary::-webkit-details-marker {
      display: none !important;
    }
    .studio-accordion-summary:hover {
      background: #f1f5f9 !important;
    }
    .studio-accordion-title {
      font-weight: 750 !important;
      color: #0f172a !important;
      font-size: 11.5px !important;
    }
    .studio-accordion-sub {
      color: #64748b !important;
      font-weight: 500 !important;
      font-size: 10.5px !important;
    }
    /* Compact, sleek accordion chevron - replaces giant 41.6px circle */
    .studio-accordion-chevron,
    .studio-accordion-box .dml-ws__details-chevron {
      width: 18px !important;
      height: 18px !important;
      min-width: 18px !important;
      min-height: 18px !important;
      border-radius: 4px !important;
      background: #f8fafc !important;
      border: 1px solid #cbd5e1 !important;
      color: #64748b !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin-right: 6px !important;
      padding: 0 !important;
      transition: transform 0.2s ease, background 0.15s ease, border-color 0.15s ease !important;
    }
    .studio-accordion-chevron svg,
    .studio-accordion-box .dml-ws__details-chevron svg {
      width: 12px !important;
      height: 12px !important;
    }
    .studio-accordion-box[open] .dml-ws__details-chevron,
    .studio-accordion-box[open] .studio-accordion-chevron {
      transform: rotate(180deg) !important;
      background: #e0f2fe !important;
      border-color: #7dd3fc !important;
      color: #0284c7 !important;
    }
    .studio-accordion-content {
      padding: 10px 12px !important;
      background: #ffffff !important;
      border-top: 1px solid #e2e8f0 !important;
      font-size: 11px !important;
    }

    /* AI Request Studio Row 2 Strip & Draft Title */
    #proto-row-2, .draft-row-strip {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 12px !important;
      padding: 6px 20px !important;
      background: #fafbfd !important;
      border-bottom: 1px solid #e2e8f0 !important;
      flex-shrink: 0 !important;
    }
    #tree-connector-group, .draft-tree-connector {
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      flex-shrink: 0 !important;
      transition: margin-left 0.2s ease, padding-left 0.2s ease !important;
    }
    .draft-title-container {
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      flex: 1 !important;
      min-width: 0 !important;
    }
    #draft-title-input, .draft-title-input {
      font-size: 11.5px !important;
      font-weight: 700 !important;
      color: #0284c7 !important;
      background: #ffffff !important;
      border: 1px solid #cbd5e1 !important;
      border-radius: 5px !important;
      padding: 4px 10px !important;
      flex: 1 !important;
      min-width: 100px !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important;
    }
    #draft-title-input:focus, .draft-title-input:focus {
      border-color: #0284c7 !important;
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
    }

    /* Spatial Callout 3D Pins Clean Layout */
    .draft-pin-row {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 8px !important;
      padding: 5px 10px !important;
      background: #f8fafc !important;
      border-radius: 6px !important;
      border: 1px solid #e2e8f0 !important;
    }
    .draft-pin-badge {
      color: #0284c7 !important;
      font-weight: 750 !important;
      font-size: 11px !important;
      flex-shrink: 0 !important;
    }
    .draft-pin-input {
      flex: 1 !important;
      min-width: 0 !important;
      width: 100% !important;
      font-size: 11px !important;
      padding: 3px 8px !important;
      border: 1px solid #cbd5e1 !important;
      border-radius: 4px !important;
      background: #ffffff !important;
      color: #1e293b !important;
    }
    .draft-pin-input:focus {
      border-color: #0284c7 !important;
      outline: none !important;
    }
    .draft-pin-del {
      color: #94a3b8 !important;
      cursor: pointer !important;
      font-size: 15px !important;
      line-height: 1 !important;
      padding: 2px 4px !important;
      flex-shrink: 0 !important;
      transition: color 0.15s ease !important;
    }
    .draft-pin-del:hover {
      color: #ef4444 !important;
    }

    /* Left Viewport Stage Pill Text */
    #screen-stage-pill {
      max-width: 340px !important;
    }
    #screen-stage-text {
      max-width: 290px !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      display: inline-block !important;
    }

    /* Paul's Widescreen Left Note Layout Switcher (Side-by-Side vs Inline vs Drawer) */
    .note-layout-switcher {
      display: inline-flex;
      align-items: center;
      background: #e2e8f0;
      border-radius: 6px;
      padding: 2px;
      gap: 2px;
    }
    .note-layout-btn {
      padding: 2px 7px;
      border: none;
      background: transparent;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 650;
      color: #64748b;
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
    }
    .note-layout-btn:hover {
      color: #0f172a;
    }
    .note-layout-btn.is-active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
      font-weight: 750;
    }

    /* Mode E (Paul's Default): Note on Top ⬆️, Files on Bottom ⬇️ */
    .left-shelf-body-wrap.mode-note-top {
      flex-direction: column;
      padding: 8px 26px 12px;
      gap: 8px;
      overflow-y: auto;
    }
    .left-shelf-body-wrap.mode-note-top .shelf-note-top-panel {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
    }
    .left-shelf-body-wrap.mode-note-top .shelf-subcol-files {
      flex: 1;
      border: none;
      padding: 0;
      background: transparent;
      gap: 6px;
      overflow: visible;
    }
    .left-shelf-body-wrap.mode-note-top .shelf-subcol-notes {
      display: none !important;
    }
    .left-shelf-body-wrap:not(.mode-note-top) .shelf-note-top-panel {
      display: none !important;
    }

    /* Quiet Reference Dossier Styling (浅色、纯文本排版、安静不抢眼) */
    .quiet-reference-dossier {
      background: #fafbfd;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 9px 18px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .action-menu-item:hover {
      background: #f1f5f9;
    }

    /* Left Shelf Split Layouts */
    .left-shelf-body-wrap {
      flex: 1;
      display: flex;
      overflow: hidden;
      min-height: 0;
    }
    /* Mode A: Files Left (48%), Note Right (52%) */
    .left-shelf-body-wrap.mode-split-right {
      flex-direction: row;
      padding: 8px 26px 12px;
      gap: 12px;
    }
    /* Mode B: Note Left (50%), Files Right (50%) */
    .left-shelf-body-wrap.mode-split-left {
      flex-direction: row-reverse;
      padding: 8px 26px 12px;
      gap: 12px;
    }
    .shelf-subcol-files {
      flex: 0 0 calc(48% - 5px);
      box-sizing: border-box;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      overflow-y: auto;
      background: #ffffff;
    }
    .left-shelf-body-wrap.mode-split-left .shelf-subcol-files {
      flex: 0 0 calc(50% - 5px);
    }
    .shelf-subcol-notes {
      flex: 1;
      box-sizing: border-box;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      overflow-y: auto;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      min-width: 0;
    }
    .left-shelf-body-wrap.mode-split-left .shelf-subcol-notes {
      flex: 0 0 calc(50% - 5px);
    }

    /* Mode C: Wide Inline Row (Single Column, Note next to Item name) */
    .left-shelf-body-wrap.mode-inline {
      flex-direction: column;
      padding: 8px 26px;
      gap: 5px;
      overflow-y: auto;
    }
    .left-shelf-body-wrap.mode-inline .shelf-subcol-files {
      flex: 1;
      border: none;
      padding: 0;
      background: transparent;
      overflow: visible;
    }
    .left-shelf-body-wrap.mode-inline .shelf-subcol-notes {
      display: none !important;
    }
    .left-shelf-body-wrap.mode-inline .file-row-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 12px;
    }
    .inline-row-note-text {
      display: none;
    }
    .left-shelf-body-wrap.mode-inline .inline-row-note-text {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 1;
      font-size: 11px;
      color: #64748b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-left: 2px solid #e2e8f0;
      padding-left: 10px;
      margin-left: 4px;
    }

    /* Mode D: Vertical Drawer Mode (Full width items, drawer underneath) */
    .left-shelf-body-wrap.mode-drawer {
      flex-direction: column;
      padding: 8px 26px;
      gap: 4px;
      overflow-y: auto;
    }
    .left-shelf-body-wrap.mode-drawer .shelf-subcol-files {
      flex: 1;
      border: none;
      padding: 0;
      background: transparent;
      overflow: visible;
    }
    .left-shelf-body-wrap.mode-drawer .shelf-subcol-notes {
      display: none !important;
    }

    /* Quiet, Calm Left History Panel Styling */
    .quiet-history-header {
      padding: 10px 26px 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f1f5f9;
      background: #fafafa;
    }
    .quiet-rev-note {
      margin: 8px 26px;
      padding: 8px 18px;
      background: #f8fafc;
      border-left: 3px solid #94a3b8;
      border-radius: 0 6px 6px 0;
      font-size: 11px;
      line-height: 1.45;
      color: #475569;
    }

    /* Screen Top-Right Tool Cluster (Add files + New sketch + Vertical Tools) */
    .screen-top-tool-cluster {
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }
    .screen-top-tool-cluster.is-grayed-out {
      opacity: 0.35;
      filter: grayscale(1);
      pointer-events: none;
      cursor: not-allowed;
    }
    .screen-top-tool-cluster.is-grayed-out button {
      color: #94a3b8 !important;
      border-color: #cbd5e1 !important;
      background: #f1f5f9 !important;
    }

    /* Right Inspector Tab System (Direction C) */
    .proto-inspector-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #ffffff;
      border-top: 1px solid #e2e8f0;
    }
    .proto-tab-bar {
      display: flex;
      background: #f8fafc;
      border-bottom: 1px solid #e2e8f0;
      padding: 0 8px;
    }
    .proto-tab-item {
      padding: 9px 14px;
      font-size: 11px;
      font-weight: 650;
      color: #64748b;
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s ease;
    }
    .proto-tab-item:hover {
      color: #0f172a;
    }
    .proto-tab-item.is-active {
      color: #0284c7;
      border-bottom-color: #0284c7;
      background: #ffffff;
      font-weight: 750;
    }
    .proto-tab-badge {
      padding: 1px 5px;
      border-radius: 10px;
      background: #e2e8f0;
      color: #475569;
      font-size: 10px;
      font-weight: 700;
    }
    .proto-tab-item.is-active .proto-tab-badge {
      background: #e0f2fe;
      color: #0369a1;
    }
    .proto-tab-panel {
      display: none;
      flex: 1;
      overflow-y: auto;
      padding: 14px;
      flex-direction: column;
      gap: 12px;
    }
    .proto-tab-panel.is-active {
      display: flex;
    }

    .proto-row-2-right {
      height: 260px;
      box-sizing: border-box;
      padding: 14px 18px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex-shrink: 0;
      border-bottom: 1px solid #e2e8f0;
      background: #ffffff;
    }
    .proto-textarea {
      flex: 1;
      width: 100%;
      box-sizing: border-box;
      padding: 10px 12px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-size: 13px;
      line-height: 1.5;
      font-family: inherit;
      resize: none;
      outline: none;
    }
    .proto-textarea:focus {
      border-color: #0284c7;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
    }
    /* Row 3: THE PARALLEL FILE SHELVES (Starts at EXACT same vertical Y) */
    .proto-shelf-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #f8fafc;
      min-height: 0;
    }
    #shelf-collapsible-content {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
    }
    .proto-shelf-header {
      height: 40px;
      box-sizing: border-box;
      padding: 0 16px;
      background: #f1f5f9;
      border-bottom: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      font-size: 12px;
      font-weight: 700;
      color: #334155;
    }
    .proto-shelf-list {
      flex: 1;
      overflow-y: auto;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    /* File Row Cards (Calm, Elegant, Crisp) */
    .file-row-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 12px;
      border: 1px solid #e2e8f0;
      border-radius: 7px;
      background: #ffffff;
      font-size: 11.5px;
      transition: all 0.15s ease;
    }
    .file-row-card:hover {
      border-color: #cbd5e1;
      background: #fcfcfc;
    }
    /* The ONE & ONLY Active Hero Ring Across Entire Page */
    .file-row-card.is-projected-on-stage {
      border: 2px solid #0284c7 !important;
      border-left: 5px solid #0284c7 !important;
      background: #eff6ff !important;
      box-shadow: 0 1px 4px rgba(2, 132, 199, 0.15) !important;
    }
    .file-row-card.is-projected-on-stage .file-name {
      color: #0369a1 !important;
      font-weight: 650 !important;
    }
    /* Stage Floating HUD Toolbar */
    .screen-stage-hud {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .hud-btn-group {
      display: flex;
      align-items: center;
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 6px;
      padding: 2px;
      backdrop-filter: blur(4px);
    }
    .hud-btn {
      padding: 4px 8px;
      border: none;
      background: transparent;
      color: #cbd5e1;
      font-size: 11px;
      font-weight: 600;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.15s ease;
    }
    .hud-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      color: #ffffff;
    }
    .hud-btn.is-active {
      background: #0284c7;
      color: #ffffff;
    }
    /* When viewing Left Reference File: Tools are GRAYED OUT! */
    .hud-btn-group.is-grayed-out {
      opacity: 0.38;
      filter: grayscale(1);
      cursor: not-allowed;
      border-color: rgba(255, 255, 255, 0.08);
      background: rgba(15, 23, 42, 0.5);
    }
    .hud-btn-group.is-grayed-out .hud-btn {
      pointer-events: none;
      color: #64748b;
    }
    .hud-read-only-notice {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: 600;
      padding: 4px 8px;
      border-radius: 4px;
      background: rgba(245, 158, 11, 0.18);
      border: 1px solid rgba(245, 158, 11, 0.4);
      color: #fbbf24;
    }
    .hud-btn-add-draft {
      padding: 4px 10px;
      border-radius: 5px;
      border: 1px solid #38bdf8;
      background: rgba(2, 132, 199, 0.25);
      color: #38bdf8;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.15s ease;
    }
    .hud-btn-add-draft:hover {
      background: #0284c7;
      color: #ffffff;
    }
    .file-row-left {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .file-name {
      font-weight: 600;
      color: #334155;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 200px;
    }
    .file-tag {
      font-size: 9.5px;
      font-weight: 600;
      padding: 1px 5px;
      border-radius: 4px;
      background: #f1f5f9;
      color: #64748b;
      white-space: nowrap;
    }
    .btn-action-small {
      padding: 4px 9px;
      border-radius: 5px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      font-size: 11px;
      font-weight: 650;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .btn-action-small:hover {
      border-color: #0284c7;
      color: #0284c7;
    }
    .btn-action-borrow {
      border-color: #bae6fd;
      background: #f0f9ff;
      color: #0284c7;
    }
    .btn-action-borrow:hover {
      background: #e0f2fe;
    }
    /* Row 4: Bottom Utility / Footer */
    .proto-footer-left {
      height: 48px;
      padding: 0 16px;
      background: #f8fafc;
      border-top: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }
    .proto-footer-right {
      height: 48px;
      padding: 0 16px;
      background: #f8fafc;
      border-top: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }

/* =========================================================
   Sprint 570: Dedicated Project Showcase & Engineering Dossier
   Default Full-Width (Studio Parity), Zero Editing Clutter
   ========================================================= */

.project-showcase-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  min-height: 100vh;
}

.project-showcase-topbar {
  height: 52px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.project-showcase-topbar .breadcrumb-group {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.project-showcase-topbar .back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  background: transparent;
  border: none;
  font-weight: 650;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}

.project-showcase-topbar .back-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.project-showcase-topbar .breadcrumb-sep {
  color: #cbd5e1;
}

.project-showcase-topbar .project-code-tag {
  background: #f1f5f9;
  color: #334155;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.project-showcase-topbar .project-title-text {
  font-weight: 750;
  color: #0f172a;
  font-size: 14px;
}

.project-showcase-topbar .status-pill-delivered {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  font-size: 11px;
  font-weight: 750;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.project-showcase-topbar .topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-showcase-topbar .btn-action-primary {
  background: #0284c7;
  color: #ffffff;
  border: 1px solid #0284c7;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.25);
  transition: all 0.15s ease;
  text-decoration: none;
}

.project-showcase-topbar .btn-action-primary:hover {
  background: #0369a1;
  border-color: #0369a1;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.35);
  transform: translateY(-1px);
}

.project-showcase-topbar .btn-action-secondary {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.12s;
  text-decoration: none;
}

.project-showcase-topbar .btn-action-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.project-showcase-topbar .btn-action-danger {
  background: #ffffff;
  color: #dc2626;
  border: 1px solid #fecaca;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.12s;
}

.project-showcase-topbar .btn-action-danger:hover {
  background: #fff5f5;
  border-color: #f87171;
}

/* Showcase Container: Full Width by Default (Studio Parity) */
.project-showcase-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px 24px 64px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.showcase-dossier-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.showcase-hero-header {
  padding: 12px 20px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.showcase-canvas-wrap {
  width: 100%;
  height: 480px;
  background: radial-gradient(circle at 50% 40%, #172033 0%, #090d16 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-canvas-wrap .viewport-stage-wrap,
.showcase-canvas-wrap .viewport-drawing-wrap,
.showcase-canvas-wrap .preview-doc-card {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.showcase-timeline-bar {
  padding: 10px 20px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.showcase-timeline-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
}

.showcase-timeline-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  transition: all 0.12s;
  white-space: nowrap;
}

.showcase-timeline-pill:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.showcase-timeline-pill.is-active {
  background: #f0f9ff;
  border-color: #0284c7;
  color: #0284c7;
  font-weight: 750;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

.showcase-middle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.showcase-files-list {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #ffffff;
  flex: 1;
}

.showcase-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: all 0.12s;
}

.showcase-file-row:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.showcase-file-row.is-active-item {
  border-color: #0284c7;
  background: #f0f9ff;
}

.showcase-file-row .file-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.showcase-file-row .file-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.showcase-file-row .file-info-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.showcase-file-row .file-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.showcase-file-row .file-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #64748b;
}

.showcase-file-row .file-badge {
  font-size: 10px;
  font-weight: 750;
  padding: 1px 5px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #334155;
  text-transform: uppercase;
}

.showcase-file-row .file-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.showcase-file-row .btn-file-action {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 650;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.showcase-file-row .btn-file-action:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.showcase-file-row .btn-file-slice {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
  font-weight: 700;
}

.showcase-file-row .btn-file-slice:hover {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.showcase-note-box {
  padding: 14px 18px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.showcase-note-text {
  font-size: 12px;
  line-height: 1.6;
  color: #334155;
  background: #f8fafc;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.showcase-spatial-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.showcase-spatial-title {
  font-size: 11px;
  font-weight: 750;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.showcase-spatial-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: #334155;
}

.showcase-specs-body {
  padding: 18px 20px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.showcase-brief-banner {
  background: #f8fafc;
  border-left: 3px solid #0284c7;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #1e293b;
}

.showcase-specs-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.showcase-specs-grid-3col .spec-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.showcase-specs-grid-3col .spec-field-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
}

.showcase-specs-grid-3col .spec-label {
  font-size: 10px;
  font-weight: 750;
  color: #64748b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.showcase-specs-grid-3col .spec-value {
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
}

@media (max-width: 1024px) {
  .showcase-middle-grid {
    grid-template-columns: 1fr;
  }
  .showcase-specs-grid-3col {
    grid-template-columns: 1fr;
  }
}

.showcase-handoff-banner {
  margin-top: 4px;
  padding: 14px 20px;
  background: #f0f9ff;
  border: 1px dashed #7dd3fc;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}