/* [project]/apps/web/app/styles/app-shell.css [app-client] (css) */
:root {
  --paper: #eef3f8;
  --panel: #fff;
  --panel-properties: #fff;
  --workspace: #f5f8fc;
  --field: #f8fafc;
  --chrome: #fffffff0;
  --drawing-paper: #fff;
  --ink: #172033;
  --muted: #5f6b7c;
  --rule: #e4e9f1;
  --accent: #2f6df6;
  --accent-dark: #1e56d6;
  --soft-blue: #eef4ff;
}

:root[data-theme="dark"] {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --paper: #101722;
  --panel: #172231;
  --panel-properties: #172231;
  --workspace: #121b28;
  --field: #1d2a3b;
  --chrome: #172231f0;
  --drawing-paper: #f7f9fc;
  --ink: #e8eef8;
  --muted: #9aa9bd;
  --rule: #304054;
  --soft-blue: #1b396c;
}

:root[data-theme="dark"] .technical-grid {
  background-color: #1f2a39;
  background-image: radial-gradient(#34465d .65px, #0000 .65px);
}

:root[data-theme="dark"] .drawing-edit-grid {
  background-image: linear-gradient(to right, #0000 calc(100% - 1px), #9db4d338 100%), linear-gradient(#0000 calc(100% - 1px), #9db4d338 100%);
}

:root[data-theme="dark"] .drawing-list-item.is-current {
  background: #1c355f;
}

:root[data-theme="dark"] .settings-nav button {
  color: #b2bfd1;
}

:root[data-theme="dark"] .layer-row, :root[data-theme="dark"] .property-check {
  color: #b1bfd2;
}

:root[data-theme="dark"] .view-cube-face text, :root[data-theme="dark"] .view-cube-isometric {
  fill: #b8c6d9;
  color: #b8c6d9;
}

:root[data-theme="dark"] .upgrade-plan-premium {
  background: #1a2c49;
}

:root[data-theme="dark"] .upgrade-plan-premium-plus {
  background: #202d40;
}

:root[data-theme="dark"] .export-warning {
  color: #e3c484;
  background: #392f1e;
  border-color: #755b2e;
}

:root[data-theme="dark"] :is(.rail-item.is-active, .drawing-list-item.is-current, .dimension-unit-options button.is-active, .dimension-unit-options button:hover:not(:disabled), .glb-viewer-mode-toggle label:has(input:checked), .viewer-projection-toggle button.is-active, .help-links a, .export-format) {
  color: #9dbcff;
}

:root[data-theme="dark"] .avatar {
  color: #cfe0ff;
  background: var(--soft-blue);
}

:root[data-theme="dark"] :is(.edited-pill, .recalculate-button, .share-button, .model-viewer-status) {
  color: #9dbcff;
  border-color: #3a5a94;
}

:root[data-theme="dark"] :is(.recalculate-button:hover:not(:disabled), .share-button:hover) {
  background: #22457f;
}

:root[data-theme="dark"] .save-button.is-saved, :root[data-theme="dark"] .save-button.is-saved:hover:not(:disabled) {
  color: #7fd1a8;
  background: #173026;
  border-color: #2f5a47;
}

:root[data-theme="dark"] .save-button.is-dirty {
  color: #e3c484;
  background: #392f1e;
  border-color: #755b2e;
}

:root[data-theme="dark"] .save-button.is-dirty:hover:not(:disabled) {
  background: #43371f;
  border-color: #9a7a3c;
}

:root[data-theme="dark"] :is(.quality-choice-heading small, .plan-badge) {
  color: #cfe0ff;
  background: var(--soft-blue);
}

:root[data-theme="dark"] .upgrade-plan {
  border-color: var(--rule);
}

:root[data-theme="dark"] .upgrade-plan ul {
  color: #b8c4d4;
}

:root[data-theme="dark"] .upgrade-note {
  color: #cfe0ff;
  border-color: #3a5a94;
}

:root[data-theme="dark"] .upgrade-plan-premium-plus .plan-check {
  color: #9fb0c8;
}

:root[data-theme="dark"] .plan-action:not(.is-premium-plus) {
  color: #cfe0ff;
  background: var(--soft-blue);
  border-color: #3a5a94;
}

:root[data-theme="dark"] .plan-action:not(.is-premium-plus):hover {
  border-color: var(--accent);
  background: #22457f;
}

:root[data-theme="dark"] :is(.plan-action.is-current, .plan-action.is-current:disabled) {
  border-color: var(--rule);
  color: var(--muted);
  background: var(--field);
}

:root[data-theme="dark"] .export-option {
  border-color: var(--rule);
}

:root[data-theme="dark"] .export-option:hover {
  background: #1b2740;
}

:root[data-theme="dark"] .upload-quota-track {
  background: #2b3a4e;
}

:root[data-theme="dark"] .conversion-quota-ring:not(.is-unlimited) {
  background: conic-gradient(var(--accent) var(--quota-progress), #2b3a4e 0);
}

:root[data-theme="dark"] .tier-locked-section .property-field input {
  background: var(--field);
}

:root[data-theme="dark"] .danger-button {
  color: #f0a5ad;
  background: #3b252c;
  border-color: #8e5961;
}

:root[data-theme="dark"] .danger-button:hover {
  background: #4a2a33;
  border-color: #b8757d;
}

:root[data-theme="dark"] .analysis-status.is-loading {
  color: #b8d0ff;
  background: #1e3150;
  border-color: #486a9d;
}

:root[data-theme="dark"] .analysis-status.is-error {
  color: #f0a5ad;
  background: #3b252c;
  border-color: #8e5961;
}

:root[data-theme="dark"] .analysis-status.is-ready {
  color: #a7dfbf;
  background: #1e3a2c;
  border-color: #4e866b;
}

:root[data-theme="dark"] .analysis-loader {
  border-color: #314968;
}

:root[data-theme="dark"] .workspace-empty {
  color: var(--muted);
}

:root[data-theme="dark"] .workspace-empty strong {
  color: #dbe5f2;
}

* {
  box-sizing: border-box;
}

html, body {
  background: var(--paper);
  min-height: 100%;
  color: var(--ink);
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

body {
  overflow: hidden;
}

button, input, select {
  font: inherit;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app-shell[data-pointer-focus="true"] :focus-visible {
  outline: none;
}

button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.app-shell {
  background: var(--workspace);
  min-width: 0;
  height: 100vh;
}

.site-banner {
  color: #7a4b00;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #fff8e6;
  border-bottom: 1px solid #f3d38b;
  height: 34px;
  padding: 0 28px;
  font-size: 13px;
  font-weight: 600;
  line-height: 34px;
  overflow: hidden;
}

.app-shell.has-banner .app-layout {
  height: calc(100vh - 107px);
}

.site-banner.is-preview {
  color: var(--accent-dark);
  background: var(--soft-blue);
  border-bottom-color: #a9c2f4;
}

:root[data-theme="dark"] .site-banner.is-preview {
  color: #cfe0ff;
  border-bottom-color: #3a5a94;
}

.site-banner a {
  color: inherit;
  text-underline-offset: 2px;
  text-decoration: underline;
}

.app-topbar {
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
  justify-content: space-between;
  align-items: center;
  height: 72px;
  padding: 0 24px 0 28px;
  display: flex;
}

.brand {
  color: var(--ink);
  letter-spacing: -.02em;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  display: flex;
}

.brand-mark {
  width: 24px;
  height: 24px;
  color: var(--accent);
  place-items: center;
  font-size: 31px;
  font-weight: 800;
  line-height: 1;
  display: grid;
  transform: translateY(-2px);
}

.brand-version {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.topbar-status {
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.topbar-document {
  color: var(--muted);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: flex;
}

.topbar-activity {
  align-items: center;
  gap: 6px;
  display: flex;
}

.topbar-activity-item {
  color: var(--accent-dark);
  background: var(--soft-blue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
}

.topbar-activity-item b {
  font-weight: 600;
}

.topbar-activity-item i {
  background: conic-gradient(currentColor var(--activity-progress, 20%), transparent 0);
  border: 1px solid;
  border-radius: 50%;
  flex: none;
  width: 12px;
  height: 12px;
  animation: 1.4s ease-in-out infinite topbar-activity-pulse;
  display: block;
}

.topbar-activity-item i[style] {
  animation: none;
}

.topbar-activity-item.is-model3d {
  color: #6b4bb8;
  background: #f1ecfb;
}

.topbar-activity-item.is-analysis {
  color: #3f7a45;
  background: #eef7ee;
}

:root[data-theme="dark"] .topbar-activity-item.is-drawing {
  color: #9dbcff;
  background: #1c355f;
}

:root[data-theme="dark"] .topbar-activity-item.is-model3d {
  color: #c4b0ee;
  background: #2c2542;
}

:root[data-theme="dark"] .topbar-activity-item.is-analysis {
  color: #a7dfbf;
  background: #1e3a2c;
}

@keyframes topbar-activity-pulse {
  0%, 100% {
    opacity: .4;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar-activity-item i {
    animation: none;
  }
}

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

.conversion-quota {
  cursor: help;
  align-items: center;
  gap: 8px;
  width: 154px;
  min-width: 0;
  display: flex;
  position: relative;
}

.conversion-quota-ring {
  background: conic-gradient(var(--accent) var(--quota-progress), #e8edf5 0);
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
  position: relative;
}

.conversion-quota-ring:before {
  border-radius: inherit;
  background: var(--panel);
  content: "";
  position: absolute;
  inset: 4px;
}

.conversion-quota-ring span {
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
  position: relative;
}

.conversion-quota-ring.is-unlimited {
  background: conic-gradient(var(--accent), #b9cff8);
}

.conversion-quota-copy {
  min-width: 0;
}

.conversion-quota-copy strong {
  color: var(--ink);
  font-size: 10px;
  font-weight: 650;
  display: block;
}

.conversion-quota-copy small {
  color: var(--muted);
  white-space: nowrap;
  margin-top: 2px;
  font-size: 9px;
  display: block;
}

.conversion-quota:after {
  z-index: 10;
  border: 1px solid var(--rule);
  width: max-content;
  max-width: 240px;
  color: var(--ink);
  background: var(--panel);
  content: attr(data-quota-info);
  opacity: 0;
  pointer-events: none;
  border-radius: 5px;
  padding: 7px 9px;
  font-size: 10px;
  transition: opacity .15s, transform .15s;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px #18264129;
}

.conversion-quota:hover:after, .conversion-quota:focus-within:after {
  opacity: 1;
  transform: translateY(0);
}

.topbar-separator {
  background: var(--rule);
  width: 1px;
  height: 28px;
}

.avatar {
  color: #265fd7;
  background: #eef3ff;
  border: 0;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 12px;
  font-weight: 700;
}

.icon-button {
  width: 32px;
  height: 32px;
  color: var(--muted);
  background: none;
  border: 0;
  place-items: center;
  display: inline-grid;
}

.icon-button:hover {
  color: var(--ink);
  background: var(--soft-blue);
}

.app-layout {
  grid-template-columns: 72px var(--file-panel-width, 260px) minmax(0, 1fr) var(--properties-panel-width, 264px);
  height: calc(100vh - 72px);
  min-height: 0;
  display: grid;
  overflow: hidden;
}

.app-layout[data-workspace-tab="uploads"] {
  grid-template-columns: 72px minmax(0, 1fr);
}

.app-layout[data-workspace-tab="uploads"] .file-panel, .app-layout[data-workspace-tab="uploads"] .properties-panel {
  display: none;
}

.app-layout[data-workspace-tab="uploads"] .workspace {
  grid-column: 2;
}

.app-layout[data-workspace-tab="analysis"] {
  grid-template-columns: 72px var(--file-panel-width, 260px) minmax(0, 1fr);
}

.app-layout[data-workspace-tab="analysis"] .properties-panel {
  display: none;
}

.app-layout[data-workspace-tab="analysis"] .workspace {
  grid-column: 3;
}

.app-rail, .file-panel, .workspace, .properties-panel {
  min-height: 0;
}

.app-rail {
  border-right: 1px solid var(--rule);
  background: var(--panel);
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 8px;
  display: flex;
}

.rail-main, .rail-bottom {
  gap: 8px;
  display: grid;
}

.rail-item {
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 7px;
  justify-items: center;
  gap: 4px;
  padding: 10px 4px;
  font-size: 10px;
  text-decoration: none;
  display: grid;
  position: relative;
}

.rail-item svg {
  width: 19px;
  height: 19px;
}

.rail-item:hover {
  color: var(--accent);
  background: var(--field);
}

.rail-item.is-active {
  color: var(--accent);
  background: var(--soft-blue);
}

.rail-item.is-active:before {
  background: var(--accent);
  content: "";
  border-radius: 0 3px 3px 0;
  width: 3px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
}

.rail-new {
  color: var(--accent);
}

.rail-new:hover {
  background: var(--soft-blue);
}

.file-panel {
  border-right: 1px solid var(--rule);
  background: var(--panel);
  flex-direction: column;
  min-width: 0;
  display: flex;
  position: relative;
  overflow: auto;
}

.sidebar-resize-handle {
  z-index: 4;
  cursor: col-resize;
  width: 7px;
  position: absolute;
  top: 0;
  bottom: 0;
}

.sidebar-resize-handle:after {
  content: "";
  background: none;
  border-radius: 2px;
  width: 2px;
  height: 34px;
  transition: background .15s;
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
}

.sidebar-resize-handle:hover:after, .sidebar-resize-handle:active:after {
  background: #b6c8ee;
}

.sidebar-resize-right {
  right: 0;
}

.file-panel-form {
  padding: 24px 20px 0;
}

.panel-title h2, .properties-header h2 {
  letter-spacing: -.01em;
  margin: 0;
  font-size: 14px;
  font-weight: 650;
}

.file-dropzone {
  min-height: 76px;
  color: var(--muted);
  background: var(--field);
  text-align: left;
  cursor: pointer;
  border: 1px dashed #b6c8ee;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  display: flex;
}

.file-dropzone > svg {
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex: none;
}

.file-drop-copy {
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: grid;
}

.file-dropzone strong {
  max-width: 210px;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
}

.file-dropzone > span:not(.file-browse) {
  font-size: 11px;
}

.file-browse {
  white-space: nowrap;
  color: #fff;
  background: var(--accent);
  border-radius: 5px;
  flex: none;
  padding: 9px 11px;
  font-size: 11px;
  font-weight: 600;
}

.file-dropzone:hover {
  border-color: var(--accent);
  background: var(--soft-blue);
}

.sample-load-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
  display: grid;
}

.sample-load-button {
  border: 1px solid var(--rule);
  min-width: 0;
  min-height: 27px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border-radius: 4px;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  font-size: 10px;
  display: flex;
}

.sample-load-button span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.sample-load-button:hover:not(:disabled) {
  color: var(--accent);
  background: var(--soft-blue);
  border-color: #a9c2f4;
}

.sample-load-button:disabled {
  cursor: wait;
  opacity: .6;
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.file-section {
  border-top: 1px solid var(--rule);
  gap: 12px;
  padding: 22px 0;
  display: grid;
}

.file-section h3, .property-section h3 {
  color: var(--ink);
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 650;
}

.field-note {
  color: var(--muted);
  margin: -2px 0 8px;
  font-size: 10px;
  line-height: 1.45;
}

.select-field {
  gap: 6px;
  display: grid;
}

.select-field > span {
  color: var(--muted);
  font-size: 10px;
}

.select-field select {
  border: 1px solid var(--rule);
  width: 100%;
  min-height: 34px;
  color: var(--ink);
  background: var(--panel);
  border-radius: 5px;
  padding: 0 10px;
  font-size: 12px;
}

.select-field select:disabled {
  color: var(--muted);
  background: var(--field);
}

.primary-button, .export-button {
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 5px;
  min-height: 36px;
  font-size: 12px;
  font-weight: 650;
}

.primary-button:hover, .export-button:hover {
  background: var(--accent-dark);
}

.primary-button:disabled, .export-button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.drawings-list {
  margin: 0 20px;
  padding-bottom: 18px;
}

.drawing-list-item {
  width: 100%;
  min-width: 0;
  color: var(--muted);
  text-align: left;
  background: none;
  border-radius: 7px;
  align-items: stretch;
  font-size: 12px;
  display: flex;
  position: relative;
}

.drawing-list-item:hover {
  background: var(--field);
}

.drawing-list-item.is-current {
  color: #245ccf;
  background: #f1f5ff;
}

.drawing-list-main {
  min-width: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  flex: 1;
  align-items: center;
  gap: 10px;
  padding: 12px 5px 12px 9px;
  display: flex;
}

.drawing-list-main > svg {
  flex: none;
}

.drawing-list-main > span {
  flex: 1;
  min-width: 0;
}

.drawing-list-item strong, .drawing-list-item small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.drawing-list-item strong {
  color: inherit;
  font-size: 12px;
  font-weight: 600;
}

.drawing-list-item small {
  color: var(--muted);
  margin-top: 4px;
  font-size: 10px;
}

.drawing-menu-button {
  width: 34px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
  flex: 0 0 34px;
  place-items: center;
  margin: 4px 3px 4px 0;
  display: grid;
}

.drawing-menu-button:hover, .drawing-menu-button[aria-expanded="true"] {
  color: var(--accent);
  background: var(--soft-blue);
}

.drawing-file-menu {
  z-index: 5;
  border: 1px solid var(--rule);
  background: var(--chrome);
  border-radius: 7px;
  width: 178px;
  padding: 5px;
  position: absolute;
  top: calc(100% - 2px);
  right: 4px;
  box-shadow: 0 6px 18px #29395229;
}

.drawing-file-menu button {
  width: 100%;
  min-height: 30px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  font-size: 11px;
  display: flex;
}

.drawing-file-menu button:hover {
  color: var(--accent);
  background: var(--soft-blue);
}

.drawing-file-menu button.is-danger {
  color: #b23b43;
}

.uploads-list {
  order: 2;
  gap: 10px;
  margin: auto 20px 0;
  padding-top: 18px;
}

.panel-message {
  order: 1;
}

.uploads-list-heading {
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.uploads-list-heading h3 {
  margin: 0;
}

.text-button {
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: 10px;
  font-weight: 600;
}

.text-button:hover {
  color: var(--accent-dark);
  text-underline-offset: 2px;
  text-decoration: underline;
}

.upload-list {
  gap: 2px;
  display: grid;
}

.upload-list-item {
  width: 100%;
  min-width: 0;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 6px;
  display: grid;
}

.upload-list-item[draggable="true"] {
  cursor: grab;
}

.upload-list-item[draggable="true"]:active {
  cursor: grabbing;
}

.upload-list-item:hover, .upload-list-item.is-current {
  color: var(--accent);
  background: var(--field);
}

.upload-list-item > svg {
  color: currentColor;
  opacity: .75;
}

.upload-list-item strong, .upload-list-item small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.upload-list-item strong {
  min-width: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 550;
}

.upload-list-item small {
  color: var(--muted);
  font-size: 9px;
}

.upload-list-item em {
  color: var(--muted);
  white-space: nowrap;
  font-size: 9px;
  font-style: normal;
}

.upload-list-item.is-current strong, .upload-list-item.is-current em {
  color: var(--accent);
}

.upload-list-item em:before {
  content: "";
  opacity: .75;
  background: currentColor;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  margin: 0 4px 1px 0;
  display: inline-block;
}

.upload-progress {
  gap: 7px;
  padding: 3px 6px 6px;
  display: grid;
}

.upload-progress-heading {
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.upload-progress-heading span {
  min-width: 0;
}

.upload-progress-heading strong, .upload-progress-heading small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.upload-progress-heading strong {
  color: var(--ink);
  font-size: 10px;
  font-weight: 600;
}

.upload-progress-heading small, .upload-progress-heading em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
}

.upload-progress-heading small {
  margin-top: 3px;
}

.upload-progress-track {
  background: #e8edf5;
  border-radius: 999px;
  height: 5px;
  overflow: hidden;
}

.upload-progress-track span {
  border-radius: inherit;
  background: var(--accent);
  min-width: 2px;
  height: 100%;
  transition: width .2s;
  display: block;
}

.upload-progress-track.is-processing span {
  will-change: background-position;
  background: linear-gradient(90deg, var(--accent) 0%, #9ebdf5 45%, var(--accent) 70%);
  background-size: 200% 100%;
  width: 100%;
  animation: 1.1s linear infinite upload-progress-sweep;
}

@keyframes upload-progress-sweep {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .upload-progress-track.is-processing span {
    animation: none;
  }
}

.muted-copy, .panel-message {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.panel-message {
  color: var(--accent-dark);
  margin: 0 20px 18px;
}

.panel-message.is-error {
  color: #a43636;
}

:root[data-theme="dark"] .panel-message.is-error {
  color: #f0a5ad;
}

/* [project]/apps/web/app/styles/modals.css [app-client] (css) */
.danger-button {
  color: #a43636;
  cursor: pointer;
  background: #fff7f7;
  border: 1px solid #d59a9a;
  border-radius: 5px;
  min-width: 94px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 650;
}

.danger-button:hover {
  background: #fff0f0;
  border-color: #c26d6d;
}

.danger-button-critical {
  color: #fff;
  background: #a43636;
  border-color: #be4e4e;
}

.danger-button-critical:hover {
  background: #8d2525;
  border-color: #8d2525;
}

.settings-overlay {
  z-index: 30;
  background: #111b2d57;
  place-items: center;
  padding: 28px;
  display: grid;
  position: fixed;
  inset: 0;
}

.settings-modal {
  background: var(--panel);
  border: 1px solid #dce3ed;
  border-radius: 8px;
  grid-template-columns: 226px minmax(0, 1fr);
  width: min(70vw, 980px);
  min-width: 640px;
  height: min(72vh, 720px);
  min-height: 500px;
  display: grid;
  overflow: hidden;
  box-shadow: 0 2px 8px #1826412e;
}

.settings-sidebar {
  border-right: 1px solid var(--rule);
  background: var(--field);
  flex-direction: column;
  min-width: 0;
  padding: 12px;
  display: flex;
}

.settings-close, .quality-close {
  box-sizing: border-box;
  cursor: pointer;
  place-items: center;
  padding: 0;
  font-family: inherit;
  line-height: 1;
  display: grid;
}

.settings-close {
  width: 38px;
  height: 38px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid #cbd4e0;
  border-radius: 9px;
  margin-bottom: 14px;
  font-size: 22px;
  font-weight: 400;
}

.settings-close:hover {
  color: var(--accent);
  background: var(--soft-blue);
  border-color: #a9c2f4;
}

.settings-search {
  color: #8b96a6;
  background: var(--panel);
  border: 1px solid #dfe5ed;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 11px;
  display: flex;
}

.settings-search span {
  font-size: 22px;
  line-height: 1;
  transform: rotate(-20deg);
}

.settings-search input {
  width: 100%;
  color: var(--ink);
  background: none;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.settings-nav {
  gap: 4px;
  margin-top: 12px;
  display: grid;
}

.settings-nav button {
  color: #4f5b6e;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  min-height: 36px;
  padding: 0 12px;
  font-size: 12px;
}

.settings-nav button:hover, .settings-nav button.is-active {
  color: var(--ink);
  background: var(--soft-blue);
}

.settings-main {
  background: var(--panel);
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.settings-main-header {
  border-bottom: 1px solid var(--rule);
  justify-content: space-between;
  align-items: center;
  min-height: 86px;
  padding: 0 26px;
  display: flex;
}

.settings-main-header h2 {
  color: var(--ink);
  letter-spacing: -.02em;
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.settings-main-header p {
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 11px;
}

.settings-status {
  color: var(--muted);
  margin: 0;
  font-size: 11px;
}

.settings-content {
  overscroll-behavior: contain;
  flex: auto;
  min-height: 0;
  padding: 4px 26px 30px;
  overflow: auto;
}

.settings-row {
  border-bottom: 1px solid var(--rule);
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 82px;
  padding: 16px 0;
  display: flex;
}

.settings-row-copy {
  min-width: 0;
}

.settings-row-copy strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  display: block;
}

.settings-row-copy p {
  max-width: 470px;
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.45;
}

.settings-control {
  flex: none;
}

.settings-inline-control {
  color: var(--muted);
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  display: inline-flex;
}

.settings-select {
  border: 1px solid var(--rule);
  min-width: 150px;
  min-height: 34px;
  color: var(--ink);
  background: var(--field);
  border-radius: 5px;
  padding: 0 10px;
  font-size: 12px;
}

.settings-input {
  border: 1px solid var(--rule);
  width: 150px;
  min-height: 34px;
  color: var(--ink);
  background: var(--field);
  border-radius: 5px;
  padding: 0 10px;
  font: 12px ui-monospace, monospace;
}

.settings-value {
  color: var(--muted);
  white-space: nowrap;
  font-size: 11px;
}

.settings-toggle {
  width: 38px;
  height: 22px;
  accent-color: var(--accent);
  cursor: pointer;
}

.settings-tab-note {
  color: var(--muted);
  margin: 16px 0 2px;
  font-size: 11px;
  line-height: 1.45;
}

.settings-pair {
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  display: flex;
}

.settings-pair label:not(.settings-inline-control) {
  color: var(--muted);
  gap: 4px;
  font-size: 10px;
  display: grid;
}

.settings-pair .settings-input {
  width: 120px;
}

.settings-range {
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.settings-range input {
  width: 160px;
  accent-color: var(--accent);
  cursor: pointer;
}

.settings-range output {
  min-width: 40px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 11px;
}

.settings-search-note {
  color: var(--muted);
  margin: 18px 0 0;
  font-size: 11px;
}

.locked-control {
  min-height: 32px;
  color: var(--muted);
  background: var(--field);
  cursor: pointer;
  border: 1px solid #d7dee9;
  border-radius: 5px;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  font-size: 10px;
  display: inline-flex;
}

.locked-control:hover {
  color: var(--accent);
  background: var(--soft-blue);
  border-color: #a9c2f4;
}

.help-overlay {
  z-index: 40;
  background: #111b2d61;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.help-modal {
  background: var(--panel);
  border: 1px solid #dce3ed;
  border-radius: 8px;
  flex-direction: column;
  width: min(760px, 92vw);
  max-height: min(86vh, 760px);
  display: flex;
  overflow: hidden;
  box-shadow: 0 8px 26px #18264133;
}

.help-modal-header {
  border-bottom: 1px solid var(--rule);
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 28px 20px;
  display: flex;
}

.help-kicker {
  color: var(--accent);
  letter-spacing: .04em;
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 700;
}

.help-modal-header h2 {
  color: var(--ink);
  letter-spacing: -.02em;
  margin: 0;
  font-size: 22px;
  font-weight: 550;
}

.help-modal-header p:last-child {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 12px;
}

.help-modal-header .settings-close {
  flex: none;
  margin: -5px -7px 0 0;
}

.help-modal-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  padding: 4px 28px 22px;
  display: grid;
  overflow: auto;
}

.help-section {
  border-bottom: 1px solid var(--rule);
  padding: 18px 0 16px;
}

.help-section:nth-last-child(-n+2) {
  border-bottom: 0;
}

.help-section h3 {
  color: var(--ink);
  margin: 0 0 9px;
  font-size: 13px;
  font-weight: 650;
}

.help-section p, .help-section li, .help-shortcuts {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.help-section p {
  margin: 0 0 9px;
}

.help-section p:last-child {
  margin-bottom: 0;
}

.help-section ol, .help-section ul {
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  display: grid;
}

.help-section :is(ol, ul) + p {
  margin-top: 12px;
}

.help-shortcuts {
  gap: 7px;
  margin: 0;
  display: grid;
}

.help-shortcuts div {
  grid-template-columns: minmax(104px, .8fr) 1.2fr;
  gap: 10px;
  display: grid;
}

.help-shortcuts dt {
  color: var(--ink);
  font-weight: 600;
}

.help-shortcuts dd {
  margin: 0;
}

.help-links {
  padding-left: 17px !important;
}

.help-versions {
  color: var(--muted);
  gap: 7px;
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  display: grid;
}

.help-versions div {
  grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr);
  gap: 10px;
  display: grid;
}

.help-versions dt {
  color: var(--ink);
  font-weight: 600;
}

.help-versions dd {
  overflow-wrap: anywhere;
  margin: 0;
}

.help-links a {
  color: var(--accent-dark);
  text-decoration: none;
}

.help-links a:hover {
  text-decoration: underline;
}

.help-links code {
  border: 1px solid var(--rule);
  color: var(--ink);
  background: var(--field);
  border-radius: 3px;
  padding: 1px 3px;
  font-size: 10px;
}

.help-legal-note {
  color: var(--muted);
  font-size: 10px !important;
}

.help-modal-footer {
  border-top: 1px solid var(--rule);
  color: var(--muted);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 28px 18px;
  font-size: 10px;
  display: flex;
}

.help-modal-footer .secondary-button {
  flex: none;
}

.tier-locked-section {
  color: var(--muted);
  position: relative;
}

.tier-locked-section .property-field input {
  color: var(--muted);
  background: #f6f8fb;
}

.tier-locked-section .section-heading, .rail-item.is-locked {
  color: var(--muted);
}

.rail-lock {
  width: 15px;
  height: 15px;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--rule);
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  top: 5px;
  right: 9px;
}

.upgrade-overlay {
  z-index: 45;
  background: #111b2d61;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.upgrade-modal {
  background: var(--panel);
  border: 1px solid #dce3ed;
  border-radius: 10px;
  width: min(68vw, 1120px);
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 10px 30px #18264133;
}

.upgrade-modal-header {
  border-bottom: 1px solid var(--rule);
  justify-content: space-between;
  align-items: flex-start;
  min-height: 126px;
  padding: 28px 32px 22px;
  display: flex;
}

.upgrade-kicker {
  color: var(--accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 750;
  display: block;
}

.upgrade-modal-header h2 {
  color: var(--ink);
  letter-spacing: -.025em;
  margin: 7px 0 0;
  font-size: 20px;
  font-weight: 600;
}

.upgrade-modal-header p {
  color: var(--muted);
  margin: 7px 0 0;
  font-size: 12px;
}

.upgrade-modal-header .settings-close {
  margin: -7px -8px 0 0;
}

.upgrade-modal-body {
  color: var(--muted);
  gap: 16px;
  padding: 24px 32px 28px;
  font-size: 12px;
  line-height: 1.5;
  display: grid;
}

.upgrade-intro {
  max-width: 700px;
  margin: 0;
}

.upgrade-plans {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: stretch;
  gap: 12px;
  display: grid;
}

.upgrade-plan li.is-missing {
  color: var(--muted);
}

.upgrade-note {
  color: var(--accent-dark);
  background: var(--soft-blue);
  border: 1px solid #a9c2f4;
  border-radius: 6px;
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
}

.upgrade-compare summary {
  width: fit-content;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.upgrade-compare-scroll {
  border: 1px solid var(--rule);
  border-radius: 6px;
  margin-top: 12px;
  overflow-x: auto;
}

.upgrade-compare table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 12px;
}

.upgrade-compare :is(th, td) {
  border-bottom: 1px solid var(--rule);
  text-align: left;
  padding: 7px 10px;
}

.upgrade-compare td {
  text-align: center;
  white-space: nowrap;
}

.upgrade-compare thead th {
  color: var(--ink);
  background: var(--panel, #fff);
  font-weight: 650;
  position: sticky;
  top: 0;
}

.upgrade-compare tbody th {
  color: var(--ink);
  font-weight: 500;
}

.upgrade-compare tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}

.upgrade-plan {
  background: var(--panel);
  border: 1px solid #dfe5ee;
  border-radius: 8px;
  flex-direction: column;
  min-width: 0;
  min-height: 320px;
  padding: 20px;
  display: flex;
}

.upgrade-plan-premium {
  background: #fbfdff;
  border-color: #a9c2f4;
  box-shadow: 0 3px 12px #2f6df61a;
}

.upgrade-plan-premium-plus {
  background: #f6f8fb;
  border-color: #52647f;
}

.upgrade-plan.is-requested {
  border-width: 2px;
  padding: 19px;
}

.upgrade-plan-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  min-height: 54px;
  display: flex;
}

.upgrade-plan-note {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.upgrade-plan h3 {
  color: var(--ink);
  letter-spacing: -.02em;
  margin: 5px 0 0;
  font-size: 20px;
  font-weight: 600;
}

.upgrade-plan-tagline {
  min-height: 36px;
  color: var(--muted);
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.45;
}

.upgrade-plan ul {
  color: #4f5b6e;
  gap: 10px;
  margin: 18px 0 22px;
  padding: 0;
  font-size: 11px;
  list-style: none;
  display: grid;
}

.upgrade-plan li {
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.plan-check {
  color: var(--accent);
  flex: none;
  font-weight: 750;
}

.upgrade-plan-premium-plus .plan-check {
  color: #34445e;
}

.plan-badge {
  color: var(--accent-dark);
  background: #e8f0ff;
  border-radius: 4px;
  flex: none;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 700;
}

.upgrade-plan-premium-plus .plan-badge {
  color: #fff;
  background: #34445e;
}

.plan-action {
  min-height: 38px;
  color: var(--accent-dark);
  cursor: pointer;
  background: #eef4ff;
  border: 1px solid #a9c2f4;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.plan-action:hover {
  border-color: var(--accent);
  background: #e4edff;
}

.plan-action.is-premium-plus {
  color: #fff;
  background: #34445e;
  border-color: #34445e;
}

.plan-action.is-premium-plus:hover {
  background: #172033;
  border-color: #172033;
}

.plan-action.is-current, .plan-action.is-current:disabled {
  border-color: var(--rule);
  color: var(--muted);
  cursor: default;
  opacity: 1;
  background: #f8fafc;
}

.plan-action.is-included {
  color: #7d8999;
  cursor: default;
  background: none;
  border: 0;
}

.upgrade-modal-footer {
  color: var(--muted);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 32px 26px;
  font-size: 10px;
  display: flex;
}

.secondary-button {
  border: 1px solid var(--rule);
  min-height: 36px;
  color: var(--ink);
  background: var(--field);
  cursor: pointer;
  border-radius: 5px;
  padding: 0 12px;
  font-size: 11px;
}

.secondary-button:hover {
  color: var(--accent);
  background: var(--soft-blue);
  border-color: #a9c2f4;
}

a.secondary-button {
  align-items: center;
  text-decoration: none;
  display: inline-flex;
}

.export-overlay {
  z-index: 35;
  background: #111b2d61;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.export-modal {
  background: var(--panel);
  border: 1px solid #dce3ed;
  border-radius: 8px;
  width: min(100%, 560px);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  box-shadow: 0 2px 8px #18264133;
}

.export-modal-header {
  border-bottom: 1px solid var(--rule);
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 24px;
  display: flex;
}

.export-modal-header h2 {
  color: var(--ink);
  letter-spacing: -.025em;
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 600;
}

.export-modal-header p {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 12px;
}

.export-modal-header .settings-close {
  margin: -4px -8px 0 0;
}

.export-modal-body {
  gap: 16px;
  padding: 16px 24px 20px;
  display: grid;
}

.export-modal-body > p {
  margin: 0;
  font-size: 12px;
}

.export-warning {
  background: #fffaf0;
  border: 1px solid #f0d29a;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 15px 17px;
  display: flex;
}

.export-warning strong {
  color: #8a5a08;
  font-size: 12px;
}

.export-warning p {
  color: #8b6e38;
  max-width: 660px;
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.45;
}

.export-warning .primary-button {
  flex: none;
  min-width: 132px;
}

.export-options {
  grid-template-columns: 1fr;
  gap: 14px;
  display: grid;
}

.export-option {
  min-height: 84px;
  color: var(--ink);
  background: var(--panel);
  text-align: left;
  cursor: pointer;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  grid-template-columns: 54px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 14px;
  padding: 14px;
  font-family: inherit;
  text-decoration: none;
  transition: border-color .15s, background-color .15s;
  display: grid;
}

.export-option:hover {
  background: #fbfdff;
  border-color: #a9c2f4;
}

.export-format {
  width: 54px;
  height: 54px;
  color: var(--accent);
  background: var(--soft-blue);
  border-radius: 8px;
  place-items: center;
  font-size: 13px;
  font-weight: 750;
  display: grid;
}

.export-option strong, .export-option small {
  display: block;
}

.export-option strong {
  font-size: 13px;
  font-weight: 650;
}

.export-option small {
  color: var(--muted);
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.4;
}

.export-option > svg {
  color: var(--accent);
}

.export-modal-footer {
  color: var(--muted);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
  font-size: 10px;
  display: flex;
}

.export-modal-footer a {
  color: var(--accent);
  text-decoration: none;
}

.export-modal-footer a:hover {
  text-decoration: underline;
}

.quality-choice-grid {
  border: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  display: grid;
}

.quality-choice-grid legend {
  color: var(--ink);
  grid-column: 1 / -1;
  margin-bottom: 2px;
  padding: 0;
  font-size: 12px;
  font-weight: 650;
}

.quality-choice {
  border: 1px solid var(--rule);
  min-height: 104px;
  color: var(--muted);
  background: var(--panel);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 7px;
  align-content: start;
  gap: 7px;
  padding: 13px 14px;
  font-size: 11px;
  line-height: 1.45;
  display: grid;
}

.quality-choice:hover {
  background: #fbfdff;
  border-color: #a9c2f4;
}

.quality-choice.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  color: var(--ink);
  background: var(--soft-blue);
}

.quality-choice-heading {
  color: var(--ink);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.quality-choice-heading strong {
  font-size: 12px;
  font-weight: 650;
}

.quality-choice-heading small {
  color: #2857a6;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #dce8fb;
  border-radius: 999px;
  padding: 2px 5px;
  font-size: 8px;
  font-weight: 700;
}

.quality-choice:disabled {
  cursor: wait;
  opacity: .6;
}

.export-option:disabled {
  opacity: .65;
  cursor: wait;
}

/* [project]/apps/web/app/styles/workspace.css [app-client] (css) */
.workspace {
  background: var(--workspace);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.workspace-bar {
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
  justify-content: space-between;
  align-items: center;
  min-height: 70px;
  padding: 0 22px 0 26px;
  display: flex;
}

.document-title {
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-right: 10px;
  display: flex;
}

.document-title > div {
  min-width: 0;
}

.document-title > svg {
  color: var(--accent);
  flex: none;
}

.document-title h1 {
  max-width: 420px;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  overflow: hidden;
}

.document-title span:not(.edited-pill) {
  color: var(--muted);
  margin-top: 4px;
  font-size: 11px;
  display: block;
}

.edited-pill {
  color: #245ccf;
  background: var(--soft-blue);
  border: 1px solid #bcd2ff;
  border-radius: 4px;
  flex: none;
  margin-left: 4px;
  padding: 4px 8px;
  font-size: 10px;
}

.edited-pill.is-source-removed {
  color: #7a4b00;
  background: #fff8e6;
  border-color: #f3d38b;
}

:root[data-theme="dark"] .edited-pill.is-source-removed {
  color: #f6dfa4;
  background: #2c2412;
  border-color: #7a5a14;
}

.workspace-actions {
  flex: none;
  align-items: center;
  gap: 5px;
  display: flex;
}

.export-button {
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-width: 82px;
  padding: 0 12px;
  display: inline-flex;
}

.export-button svg {
  width: 14px;
  height: 14px;
}

.save-button {
  border: 1px solid var(--rule);
  min-width: 76px;
  min-height: 30px;
  color: var(--muted);
  background: none;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 650;
  display: inline-flex;
}

.save-button.is-dirty {
  color: #886a12;
  background: #fffaf0;
  border-color: #d8b75c;
}

.save-button.is-dirty:hover:not(:disabled) {
  background: #fff5d9;
  border-color: #b99530;
}

.save-button.is-saved {
  color: #2f7b5c;
  background: #f1fbf5;
  border-color: #bfe2d0;
}

.save-button.is-saved:hover:not(:disabled) {
  color: #2f7b5c;
  background: #e8f7ee;
}

.save-button:disabled, .icon-button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.recalculate-button, .share-button {
  min-height: 36px;
  color: var(--accent-dark);
  background: var(--soft-blue);
  border: 1px solid #bcd2ff;
  border-radius: 5px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 650;
}

.recalculate-button:hover:not(:disabled), .share-button:hover {
  border-color: var(--accent);
  background: #e4edff;
}

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

.workspace-content {
  flex: 1;
  min-height: 0;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.workspace-empty {
  border: 1px solid var(--rule);
  height: 100%;
  min-height: 560px;
  color: var(--muted);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  display: flex;
}

.workspace-empty.is-upload-drop-target {
  border-color: var(--accent);
  background: var(--soft-blue);
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

.workspace-empty svg {
  color: var(--accent);
}

.workspace-empty strong {
  color: var(--ink);
  font-size: 14px;
}

.workspace-empty span {
  max-width: 320px;
  font-size: 12px;
  line-height: 1.5;
}

.analysis-page {
  background: var(--workspace);
  flex-direction: column;
  height: 100%;
  min-height: 0;
  display: flex;
  overflow: auto;
}

.analysis-page-header {
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 104px;
  padding: 24px 30px;
  display: flex;
}

.analysis-page-kicker {
  color: var(--accent);
  margin: 0 0 5px;
  font-size: 10px;
  font-weight: 650;
}

.analysis-page-header h1 {
  color: var(--ink);
  letter-spacing: -.02em;
  margin: 0;
  font-size: 23px;
  font-weight: 550;
}

.analysis-page-header p:last-child {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 12px;
}

.analysis-status {
  border: 1px solid var(--rule);
  color: var(--muted);
  background: var(--field);
  border-radius: 5px;
  flex: none;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 650;
}

.analysis-status.is-loading {
  color: var(--accent-dark);
  background: var(--soft-blue);
  border-color: #bcd2ff;
}

.analysis-status.is-error {
  color: #a43636;
  background: #fff7f7;
  border-color: #e1b9bc;
}

.analysis-status.is-ready {
  color: #2f7b5c;
  background: #f1fbf5;
  border-color: #bfe2d0;
}

.analysis-page-body {
  gap: 18px;
  padding: 22px 30px 30px;
  display: grid;
}

.analysis-section {
  border: 1px solid var(--rule);
  background: var(--panel);
  min-width: 0;
}

.analysis-section-heading {
  border-bottom: 1px solid var(--rule);
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 68px;
  padding: 14px 20px;
  display: flex;
}

.analysis-section-heading p {
  color: var(--accent);
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 650;
}

.analysis-section-heading h2 {
  color: var(--ink);
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}

.analysis-section-heading > span {
  color: var(--muted);
  text-align: right;
  flex: none;
  font-size: 10px;
}

.analysis-metric-grid {
  background: var(--rule);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  display: grid;
}

.analysis-metric-card {
  background: var(--panel);
  min-width: 0;
  min-height: 116px;
  padding: 16px;
}

.analysis-metric-card > span {
  color: var(--muted);
  font-size: 10px;
  display: block;
}

.analysis-metric-card > strong {
  color: var(--ink);
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 9px;
  font-size: 17px;
  font-weight: 600;
  display: block;
  overflow: hidden;
}

.analysis-metric-card > small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 6px;
  font-size: 9px;
  line-height: 1.45;
  display: block;
  overflow: hidden;
}

.analysis-column-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 18px;
  display: grid;
}

.analysis-section-note {
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  margin: 0;
  padding: 14px 20px;
  font-size: 11px;
  line-height: 1.5;
}

.analysis-rows {
  margin: 0;
  padding: 2px 20px;
  display: grid;
}

.analysis-rows > div {
  border-bottom: 1px solid var(--rule);
  grid-template-columns: minmax(145px, .75fr) minmax(0, 1.25fr);
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  display: grid;
}

.analysis-rows > div:last-child {
  border-bottom: 0;
}

.analysis-rows dt {
  color: var(--muted);
  font-size: 11px;
}

.analysis-rows dd {
  min-width: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}

.analysis-rows dd small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 9px;
  font-weight: 400;
  display: block;
}

.analysis-notes {
  border-top: 1px solid var(--rule);
  color: var(--muted);
  gap: 7px;
  margin: 0;
  padding: 14px 20px 16px 34px;
  font-size: 10px;
  line-height: 1.45;
  display: grid;
}

.analysis-disclaimer {
  color: var(--muted);
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
}

.analysis-empty {
  min-height: 560px;
  color: var(--muted);
  text-align: center;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 30px;
  display: flex;
}

.analysis-empty strong {
  color: var(--ink);
  font-size: 14px;
}

.analysis-empty > span {
  max-width: 390px;
  font-size: 12px;
  line-height: 1.5;
}

.analysis-empty-icon {
  color: var(--accent);
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
}

.analysis-loader {
  border: 3px solid #dce6f8;
  border-top-color: var(--accent);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  animation: .8s linear infinite analysis-spin;
}

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

.parts-page {
  overflow: hidden;
}

.parts-progress {
  min-width: 180px;
  color: var(--muted);
  text-align: right;
  gap: 6px;
  font-size: 11px;
  display: grid;
}

.parts-progress-track {
  background: var(--rule);
  border-radius: 2px;
  height: 4px;
  overflow: hidden;
}

.parts-progress-track > div {
  background: var(--accent);
  height: 100%;
  transition: width .3s;
}

.parts-body {
  flex: 1;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: 18px;
  min-height: 0;
  padding: 18px 30px 24px;
  display: grid;
}

.parts-list-panel {
  border: 1px solid var(--rule);
  background: var(--panel);
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.parts-list-tools {
  border-bottom: 1px solid var(--rule);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}

.parts-list-tools input {
  border: 1px solid var(--rule);
  min-width: 0;
  height: 30px;
  color: var(--ink);
  background: var(--field);
  font: inherit;
  border-radius: 6px;
  flex: 1;
  padding: 0 10px;
  font-size: 12px;
}

.parts-list-tools input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.parts-list-tools > span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: 11px;
}

.parts-list {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
}

.parts-list > li + li {
  border-top: 1px solid var(--rule);
}

.parts-row {
  width: 100%;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 10px;
  display: grid;
}

.parts-row:hover {
  background: var(--field);
}

.parts-row.is-selected {
  background: var(--soft-blue);
  box-shadow: inset 3px 0 0 var(--accent);
}

.parts-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.parts-thumb {
  border: 1px solid var(--rule);
  width: 64px;
  height: 52px;
  color: var(--muted);
  background: var(--drawing-paper);
  border-radius: 4px;
  place-items: center;
  display: grid;
  overflow: hidden;
}

.parts-thumb img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  padding: 3px;
}

.parts-thumb.is-pending, .parts-detail-placeholder.is-pending {
  background: linear-gradient(100deg, var(--field) 30%, var(--rule) 50%, var(--field) 70%) 0 0 /
    300% 100%;
  animation: 1.4s ease-in-out infinite parts-pending;
}

@keyframes parts-pending {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0 0;
  }
}

.parts-row-text {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.parts-row-text strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
}

.parts-row-text small {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.parts-quantity {
  min-width: 34px;
  color: var(--muted);
  background: var(--field);
  font-variant-numeric: tabular-nums;
  text-align: center;
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 11px;
}

.parts-detail {
  border: 1px solid var(--rule);
  background: var(--panel);
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: auto;
}

.parts-detail-view {
  border-bottom: 1px solid var(--rule);
  background: var(--drawing-paper);
  flex: none;
  place-items: center;
  height: clamp(200px, 36vh, 320px);
  padding: 16px;
  display: grid;
  overflow: hidden;
}

.parts-detail-view img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.parts-detail-placeholder {
  width: 100%;
  height: 100%;
  color: var(--muted);
  border-radius: 4px;
  place-items: center;
  font-size: 12px;
  display: grid;
}

.parts-detail-text h2 {
  overflow-wrap: anywhere;
  color: var(--ink);
  margin: 0;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 650;
}

.parts-detail-text > .analysis-page-kicker {
  padding: 16px 20px 0;
}

.parts-detail-summary {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin: 6px 0 4px;
  padding: 0 20px;
  font-size: 12px;
}

.parts-detail-error {
  color: #a43636;
  margin: 8px 20px 0;
  font-size: 11px;
}

.parts-detail-actions {
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 14px 20px;
  display: flex;
}

.parts-detail-actions .primary-button {
  cursor: pointer;
  padding: 0 16px;
}

.parts-detail-actions span {
  min-width: 0;
  color: var(--muted);
  flex: 180px;
  font-size: 11px;
  line-height: 1.4;
}

.parts-detail-text .analysis-section-note {
  border-top: 1px solid var(--rule);
  border-bottom: 0;
}

@media (max-width: 900px) {
  .parts-page {
    overflow: auto;
  }

  .parts-body {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 16px 20px;
  }

  .parts-detail {
    order: -1;
    overflow: visible;
  }

  .parts-list {
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .parts-thumb.is-pending, .parts-detail-placeholder.is-pending {
    animation: none;
  }
}

.uploads-page {
  background: var(--workspace);
  flex-direction: column;
  height: 100%;
  min-height: 0;
  display: flex;
  overflow: auto;
}

.uploads-page-header {
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 104px;
  padding: 24px 30px;
  display: flex;
}

.uploads-page-kicker {
  color: var(--accent);
  margin: 0 0 5px;
  font-size: 10px;
  font-weight: 650;
}

.uploads-page-header h1 {
  color: var(--ink);
  letter-spacing: -.02em;
  margin: 0;
  font-size: 23px;
  font-weight: 550;
}

.uploads-page-header p:last-child {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 12px;
}

.uploads-page-body {
  flex: 1;
  gap: 18px;
  min-height: 0;
  padding: 22px 30px 30px;
  display: grid;
}

.uploads-selected-file {
  background: var(--soft-blue);
  border: 1px solid #bcd2ff;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  display: flex;
}

.uploads-selected-file > svg {
  color: var(--accent);
  flex: none;
}

.uploads-selected-file > div {
  flex: 1;
  min-width: 0;
}

.uploads-selected-file strong, .uploads-selected-file span {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.uploads-selected-file strong {
  color: var(--ink);
  font-size: 13px;
}

.uploads-selected-file span {
  color: var(--muted);
  margin-top: 1px;
  font-size: 11px;
}

.uploads-page-grid {
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 18px;
  min-height: 0;
  display: grid;
}

.uploads-table-panel, .upload-details-panel {
  border: 1px solid var(--rule);
  background: var(--panel);
  min-width: 0;
}

.uploads-table-panel {
  overflow: hidden;
}

.uploads-section-heading {
  border-bottom: 1px solid var(--rule);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  display: flex;
}

.uploads-section-heading h2, .upload-details-heading h2 {
  max-width: 100%;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  overflow: hidden;
}

.uploads-section-heading p {
  color: var(--muted);
  margin: 4px 0 0;
  font-size: 11px;
}

.upload-quota {
  width: 190px;
  min-width: 0;
}

.upload-quota-heading {
  color: var(--muted);
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 10px;
  display: flex;
}

.upload-quota-heading strong {
  color: var(--ink);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 650;
}

.upload-quota-track {
  background: #e8edf5;
  border-radius: 999px;
  height: 5px;
  margin: 7px 0 5px;
  overflow: hidden;
}

.upload-quota-track span {
  border-radius: inherit;
  background: var(--accent);
  min-width: 2px;
  height: 100%;
  transition: width .2s;
  display: block;
}

.upload-quota small {
  color: var(--muted);
  font-size: 9px;
  display: block;
}

.uploads-dropzone {
  min-height: 78px;
  color: var(--muted);
  background: var(--field);
  border: 1px dashed #b6c8ee;
  align-items: center;
  gap: 12px;
  margin: 16px 20px;
  padding: 13px 14px;
  display: flex;
}

.uploads-dropzone > svg {
  color: var(--accent);
  flex: none;
}

.uploads-dropzone > div {
  flex: 1;
  min-width: 0;
}

.uploads-dropzone strong, .uploads-dropzone span {
  display: block;
}

.uploads-dropzone strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.uploads-dropzone span {
  margin-top: 4px;
  font-size: 10px;
}

.uploads-dropzone:hover {
  border-color: var(--accent);
  background: var(--soft-blue);
}

.uploads-table {
  border-top: 1px solid var(--rule);
}

.uploads-table-head, .upload-record {
  grid-template-columns: 22px minmax(170px, 1.7fr) minmax(60px, .55fr) minmax(72px, .6fr) minmax(78px, .65fr) minmax(130px, 1fr) 32px;
  align-items: center;
  gap: 12px;
  display: grid;
}

.uploads-table-head {
  border-bottom: 1px solid var(--rule);
  min-height: 34px;
  color: var(--muted);
  padding: 0 20px;
  font-size: 10px;
  font-weight: 600;
}

.upload-record {
  border-bottom: 1px solid var(--rule);
  min-height: 70px;
  color: var(--muted);
  cursor: grab;
  padding: 12px 20px;
}

.upload-record:active {
  cursor: grabbing;
}

.upload-record:last-child {
  border-bottom: 0;
}

.upload-record:hover, .upload-record:focus-visible, .upload-record.is-selected {
  background: var(--field);
  outline: 0;
}

.upload-record > svg {
  color: var(--accent);
}

.upload-record-name, .upload-record-type, .upload-record-version, .upload-record-size, .upload-record-date {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.upload-record-name strong, .upload-record-name span {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.upload-record-name strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.upload-record-name span {
  color: var(--muted);
  margin-top: 4px;
  font-size: 10px;
}

.upload-record-type, .upload-record-version, .upload-record-size, .upload-record-date {
  color: var(--muted);
  font-size: 10px;
}

.upload-record-open {
  margin-left: auto;
}

.uploads-empty, .upload-details-empty {
  min-height: 240px;
  color: var(--muted);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding: 30px;
  display: flex;
}

.uploads-empty svg, .upload-details-empty svg {
  color: var(--accent);
}

.uploads-empty strong, .upload-details-empty strong {
  color: var(--ink);
  font-size: 13px;
}

.uploads-empty span, .upload-details-empty span {
  max-width: 270px;
  font-size: 11px;
  line-height: 1.5;
}

.upload-details-panel {
  flex-direction: column;
  min-height: 0;
  display: flex;
}

.upload-details-heading {
  border-bottom: 1px solid var(--rule);
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  display: flex;
  overflow: hidden;
}

.upload-details-heading > div {
  flex: auto;
  min-width: 0;
  overflow: hidden;
}

.upload-details-heading p {
  color: var(--accent);
  margin: 0 0 5px;
  font-size: 10px;
  font-weight: 650;
}

.upload-details-heading .icon-button {
  color: #a43636;
  flex: none;
}

.upload-details-heading .icon-button:hover {
  color: #8e2828;
  background: #fff0f0;
}

.upload-details-list {
  gap: 0;
  margin: 0;
  padding: 4px 18px;
  display: grid;
}

.upload-details-list > div {
  border-bottom: 1px solid var(--rule);
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  display: flex;
}

.upload-details-list dt {
  color: var(--muted);
  font-size: 10px;
}

.upload-details-list dd {
  max-width: 150px;
  color: var(--ink);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 11px;
  overflow: hidden;
}

.upload-details-list .upload-detail-error {
  display: block;
}

.upload-detail-error dd {
  color: #a43636;
  text-align: left;
  white-space: normal;
  max-width: none;
  margin-top: 5px;
}

.upload-details-actions {
  gap: 8px;
  margin-top: auto;
  padding: 18px;
  display: grid;
}

.upload-details-actions .primary-button, .upload-details-actions .danger-button {
  width: 100%;
}

.upload-related-drawings {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--rule);
  gap: 1px;
  display: grid;
}

.upload-related-drawings button {
  min-width: 0;
  color: var(--ink);
  background: var(--panel);
  text-align: left;
  cursor: pointer;
  border: 0;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  display: flex;
}

.upload-related-drawings button:hover {
  background: var(--soft-blue);
}

.upload-related-drawings span {
  min-width: 0;
}

.upload-related-drawings strong, .upload-related-drawings small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.upload-related-drawings strong {
  font-size: 11px;
}

.upload-related-drawings small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 10px;
}

.workspace-notices {
  z-index: 4;
  pointer-events: none;
  gap: 8px;
  width: min(560px, 100% - 32px);
  display: grid;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
}

.workspace-notices > * {
  pointer-events: auto;
}

.conversion-status, .source-pmi-offer {
  box-sizing: border-box;
  border: 1px solid var(--rule);
  background: var(--panel);
  border-radius: 6px;
  padding: 11px 16px;
  box-shadow: 0 4px 14px #2034541f;
}

.conversion-status {
  gap: 10px;
  display: grid;
}

.source-pmi-offer {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 16px;
  display: flex;
}

.source-pmi-offer-copy {
  flex: 260px;
  min-width: 0;
}

.source-pmi-offer-copy strong, .source-pmi-offer-copy span {
  display: block;
}

.source-pmi-offer-copy strong {
  font-size: 12px;
}

.source-pmi-offer-copy span {
  color: var(--muted);
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.4;
}

.source-pmi-offer-actions {
  flex: none;
  gap: 8px;
  display: flex;
}

.source-pmi-offer-actions button {
  white-space: nowrap;
  min-height: 32px;
  padding: 0 12px;
}

.workspace-content.is-converting > .loading-preview {
  padding-top: 72px;
}

.conversion-status strong, .conversion-status span {
  display: block;
}

.conversion-status strong {
  font-size: 12px;
}

.conversion-status span {
  color: var(--muted);
  margin-top: 4px;
  font-size: 11px;
}

.progress-track {
  background: #e8edf5;
  height: 3px;
  overflow: hidden;
}

.progress-sweep {
  will-change: transform;
  background: var(--accent);
  width: 33%;
  height: 100%;
  animation: 1.4s linear infinite progress-sweep;
}

.conversion-error {
  color: #a43636;
  background: #fff7f7;
  border: 1px solid #f0c9c9;
  border-radius: 6px;
  padding: 16px;
  font-size: 12px;
}

.model-viewer-panel {
  border: 1px solid var(--rule);
  background: var(--panel);
  border-radius: 6px;
  flex-direction: column;
  height: 100%;
  min-height: 560px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 1px 4px #2939520a;
}

/* [project]/apps/web/app/styles/viewer.css [app-client] (css) */
.model-viewer-header {
  border-bottom: 1px solid var(--rule);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  padding: 16px 20px;
  display: flex;
}

.model-viewer-header h2 {
  color: var(--ink);
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 650;
}

.model-viewer-status {
  color: var(--accent-dark);
  background: var(--soft-blue);
  border: 1px solid #dce6fb;
  border-radius: 5px;
  flex: none;
  padding: 6px 9px;
  font-size: 10px;
}

.model-viewer-empty {
  min-height: 0;
  color: var(--muted);
  text-align: center;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.model-viewer-empty svg {
  color: var(--accent);
}

.model-viewer-empty strong {
  color: var(--ink);
  font-size: 14px;
}

.model-viewer-empty span {
  max-width: 370px;
  font-size: 11px;
  line-height: 1.5;
}

.model-viewer-stage {
  background: var(--workspace);
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.model-viewer-stage > .glb-viewer {
  position: absolute;
  inset: 0;
}

.model-viewer-skeleton {
  z-index: 20;
  background: var(--workspace);
  place-items: center;
  display: grid;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.model-viewer-skeleton:before {
  background: repeating-linear-gradient(0deg,
      transparent 0,
      transparent 31px,
      color-mix(in srgb, var(--rule) 28%, transparent) 32px),
    repeating-linear-gradient(90deg,
      transparent 0,
      transparent 31px,
      color-mix(in srgb, var(--rule) 22%, transparent) 32px);
  content: "";
  opacity: .35;
  position: absolute;
  inset: 0;
}

.model-viewer-skeleton-content {
  color: var(--muted);
  justify-items: center;
  gap: 26px;
  display: grid;
  position: relative;
}

.model-viewer-skeleton-cube {
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--rule));
  background: color-mix(in srgb, var(--soft-blue) 38%, var(--workspace));
  width: 104px;
  height: 104px;
  box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 4%, transparent);
  border-radius: 6px;
  animation: 1.4s ease-in-out infinite model-skeleton-breathe;
  position: relative;
  transform: rotate(30deg)skew(-8deg, -8deg);
}

.model-viewer-skeleton-cube:before, .model-viewer-skeleton-cube:after, .model-viewer-skeleton-cube span {
  background: color-mix(in srgb, var(--accent) 25%, var(--rule));
  content: "";
  display: block;
  position: absolute;
}

.model-viewer-skeleton-cube:before {
  height: 1px;
  top: 50%;
  left: -1px;
  right: -1px;
}

.model-viewer-skeleton-cube:after {
  width: 1px;
  top: -1px;
  bottom: -1px;
  left: 50%;
}

.model-viewer-skeleton-cube span:first-child {
  width: 1px;
  height: 76%;
  top: 22%;
  right: 13%;
  transform: rotate(30deg);
}

.model-viewer-skeleton-cube span:nth-child(2) {
  width: 76%;
  height: 1px;
  top: 13%;
  right: 23%;
  transform: rotate(-30deg);
}

.model-viewer-skeleton-cube span:nth-child(3) {
  width: 76%;
  height: 1px;
  bottom: 13%;
  right: 22%;
  transform: rotate(30deg);
}

.model-viewer-skeleton-copy {
  justify-items: center;
  gap: 7px;
  display: grid;
}

.model-viewer-skeleton-copy strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.model-viewer-skeleton-copy span {
  font-size: 11px;
}

.model-viewer-skeleton-copy i {
  background: var(--rule);
  border-radius: 99px;
  width: 150px;
  height: 3px;
  display: block;
  overflow: hidden;
}

.model-viewer-skeleton-copy i:after {
  will-change: transform;
  border-radius: inherit;
  background: var(--accent);
  content: "";
  width: 45%;
  height: 100%;
  animation: 1.1s linear infinite model-skeleton-progress;
  display: block;
}

@keyframes model-skeleton-breathe {
  0%, 100% {
    opacity: .72;
    transform: rotate(30deg)skew(-8deg, -8deg)scale(.96);
  }

  50% {
    opacity: 1;
    transform: rotate(30deg)skew(-8deg, -8deg)scale(1);
  }
}

@keyframes model-skeleton-progress {
  0% {
    transform: translateX(-110%);
  }

  100% {
    transform: translateX(330%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .model-viewer-skeleton-cube, .model-viewer-skeleton-copy i:after {
    animation: none;
  }
}

.viewer-rotation-offsets {
  border: 1px solid var(--rule);
  background: var(--field);
  border-radius: 5px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 6px;
  display: grid;
}

.viewer-rotation-offset {
  --axis-color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--axis-color) 28%, var(--rule));
  min-width: 0;
  color: var(--axis-color);
  background: color-mix(in srgb, var(--axis-color) 8%, var(--field));
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  padding: 4px 5px;
  font-size: 10px;
  display: flex;
}

.viewer-rotation-offset:first-child {
  --axis-color: #b24d55;
}

.viewer-rotation-offset:nth-child(2) {
  --axis-color: #347a50;
}

.viewer-rotation-offset:nth-child(3) {
  --axis-color: var(--accent);
}

.viewer-rotation-offset strong {
  color: var(--axis-color);
  font: 10px ui-monospace, monospace;
}

.viewer-rotation-grid {
  gap: 4px;
  display: grid;
}

.viewer-rotation-inputs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  display: grid;
}

.viewer-rotation-input {
  --axis-color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--axis-color) 28%, var(--rule));
  min-width: 0;
  min-height: 29px;
  color: var(--axis-color);
  background: color-mix(in srgb, var(--axis-color) 8%, var(--field));
  border-radius: 4px;
  align-items: center;
  gap: 3px;
  padding: 0 4px 0 5px;
  font-size: 10px;
  display: flex;
}

.viewer-rotation-input:first-child {
  --axis-color: #b24d55;
}

.viewer-rotation-input:nth-child(2) {
  --axis-color: #347a50;
}

.viewer-rotation-input:nth-child(3) {
  --axis-color: var(--accent);
}

.viewer-rotation-input input {
  width: 100%;
  min-width: 0;
  color: var(--ink);
  text-align: right;
  -moz-appearance: textfield;
  background: none;
  border: 0;
  padding: 0;
  font: 10px ui-monospace, monospace;
}

.viewer-rotation-input input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.viewer-rotation-input input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.viewer-rotation-input input:focus {
  outline: 0;
}

.viewer-rotation-stepper {
  border-left: 1px solid color-mix(in srgb, var(--axis-color) 24%, var(--rule));
  flex: 0 0 17px;
  grid-template-rows: 1fr 1fr;
  width: 17px;
  height: 27px;
  margin: 0 -4px 0 1px;
  display: grid;
}

.viewer-rotation-stepper button {
  min-width: 0;
  min-height: 0;
  color: var(--axis-color);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.viewer-rotation-stepper button:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--axis-color) 14%, transparent);
}

.viewer-rotation-grid-row {
  grid-template-columns: 14px repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 4px;
  display: grid;
}

.viewer-rotation-grid-row > strong {
  color: var(--muted);
  text-align: center;
  font-size: 10px;
}

.viewer-rotation-grid-row button {
  border: 1px solid var(--rule);
  min-width: 0;
  min-height: 26px;
  color: var(--ink);
  background: var(--field);
  cursor: pointer;
  border-radius: 4px;
  place-items: center;
  padding: 0 2px;
  display: grid;
}

.viewer-rotation-grid-row button svg {
  width: 15px;
  height: 15px;
  display: block;
}

.viewer-rotation-grid-row button:hover {
  color: var(--accent);
  background: var(--soft-blue);
  border-color: #a9c2f4;
}

.viewer-projection-toggle {
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  display: grid;
}

.viewer-projection-toggle button {
  border: 1px solid var(--rule);
  min-height: 29px;
  color: var(--muted);
  background: var(--field);
  cursor: pointer;
  border-radius: 4px;
  font-size: 10px;
}

.viewer-projection-toggle button:hover, .viewer-projection-toggle button.is-active {
  color: var(--accent);
  background: var(--soft-blue);
  border-color: #9bb8ef;
}

.glb-viewer {
  --chrome: var(--panel);
  background: var(--workspace);
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}

.glb-viewer canvas {
  cursor: grab;
  touch-action: none;
  width: 100%;
  height: 100%;
  display: block;
}

.glb-viewer canvas:active {
  cursor: grabbing;
}

.glb-viewer-message {
  border: 1px solid var(--rule);
  color: var(--muted);
  background: var(--chrome);
  border-radius: 6px;
  padding: 10px 13px;
  font-size: 11px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.glb-viewer-message.is-error {
  color: #a43636;
  background: #fff7f7;
  border-color: #f0c9c9;
}

.glb-viewer-controls {
  border: 1px solid var(--rule);
  background: var(--chrome);
  border-radius: 5px;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  font-size: 10px;
  display: flex;
  position: absolute;
  top: 14px;
  left: 14px;
  overflow: hidden;
}

.view-cube-wrap {
  z-index: 2;
  pointer-events: none;
  width: 112px;
  height: 132px;
  position: absolute;
  top: 10px;
  right: 10px;
}

.view-cube {
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
  width: 104px;
  height: 104px;
  margin: 0 4px;
  overflow: visible;
}

.view-cube:active, .view-cube:active .view-cube-face, .view-cube:active .view-cube-edge, .view-cube:active .view-cube-corner {
  cursor: grabbing;
}

.view-cube-face, .view-cube-edge, .view-cube-corner {
  cursor: pointer;
  pointer-events: auto;
}

.view-cube-face polygon {
  fill: var(--field);
  stroke: #aebbd0;
  stroke-width: 1.4px;
}

.view-cube-face text {
  fill: #53647b;
  pointer-events: none;
  font-size: 7px;
  font-weight: 650;
}

.view-cube-face:hover polygon, .view-cube-face:focus-visible polygon {
  fill: var(--soft-blue);
  stroke: #aebbd0;
  stroke-width: 1.4px;
}

.view-cube-face:hover text, .view-cube-face:focus-visible text {
  fill: var(--accent);
}

.view-cube-edge line {
  stroke: #0000;
  stroke-width: 10px;
  pointer-events: stroke;
}

.view-cube-edge .view-cube-edge-highlight {
  stroke: var(--muted);
  stroke-width: 1px;
  opacity: 0;
  pointer-events: none;
}

.view-cube-edge:hover .view-cube-edge-highlight, .view-cube-edge:focus-visible .view-cube-edge-highlight {
  opacity: 1;
}

.view-cube-corner circle {
  fill: #0000;
  stroke: #0000;
}

.view-cube-corner:hover circle, .view-cube-corner:focus-visible circle {
  fill: var(--accent);
  stroke: var(--field);
  stroke-width: 1.5px;
}

.view-cube-face:focus, .view-cube-edge:focus, .view-cube-corner:focus {
  outline: none;
}

.view-cube-isometric {
  border: 1px solid var(--rule);
  min-width: 52px;
  min-height: 20px;
  color: var(--muted);
  background: var(--field);
  cursor: pointer;
  pointer-events: auto;
  border-radius: 4px;
  margin: 1px auto 0;
  padding: 0 5px;
  font-size: 8px;
  display: block;
}

.view-cube-isometric:hover {
  color: var(--accent);
  background: var(--soft-blue);
}

.glb-viewer-pivot {
  z-index: 2;
  border: 1px solid var(--accent);
  background: var(--field);
  opacity: 0;
  pointer-events: none;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px #2f6df62e;
}

.glb-viewer-pivot.is-visible {
  opacity: 1;
}

.glb-viewer-components {
  z-index: 5;
  border: 1px solid var(--rule);
  background: var(--chrome);
  border-radius: 5px;
  width: min(210px, 100% - 28px);
  position: absolute;
  top: 145px;
  right: 14px;
  overflow: hidden;
}

.glb-viewer-components-toggle {
  width: 100%;
  min-height: 29px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 650;
}

.glb-viewer-components-toggle:hover {
  color: var(--accent);
  background: var(--soft-blue);
}

.glb-viewer-component-tree {
  border-top: 1px solid var(--rule);
  max-height: min(260px, 100vh - 250px);
  overflow: auto;
}

.glb-viewer-component-tree > div {
  border-bottom: 1px solid var(--rule);
  min-width: 0;
  color: var(--muted);
  align-items: center;
  gap: 8px;
  padding: 6px 7px 6px 10px;
  font-size: 10px;
  display: flex;
}

.glb-viewer-component-tree > div:last-child {
  border-bottom: 0;
}

.glb-viewer-component-tree > div[aria-selected="true"] {
  color: var(--accent);
  background: var(--soft-blue);
}

.glb-viewer-component-tree span {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.glb-viewer-component-tree button {
  border: 1px solid var(--rule);
  min-width: 37px;
  min-height: 22px;
  color: var(--muted);
  background: var(--field);
  cursor: pointer;
  border-radius: 3px;
  padding: 0 5px;
  font-size: 9px;
}

.glb-viewer-component-tree button:hover {
  color: var(--accent);
  background: var(--soft-blue);
  border-color: #9bb8ef;
}

.glb-viewer-footer {
  pointer-events: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  display: flex;
  position: absolute;
  bottom: 72px;
  left: 14px;
  right: 14px;
}

.glb-viewer-dimensions {
  border: 1px solid var(--rule);
  color: var(--muted);
  background: var(--chrome);
  border-radius: 5px;
  padding: 7px 9px;
  font: 10px ui-monospace, monospace;
}

.glb-viewer-controls button {
  min-height: 29px;
  color: var(--ink);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0 10px;
  font-size: 10px;
}

.glb-viewer-controls button:hover, .glb-viewer-controls button.is-active {
  color: var(--accent);
  background: var(--soft-blue);
}

.glb-viewer.is-editing canvas {
  cursor: move;
}

.glb-viewer.is-selecting canvas {
  cursor: pointer;
}

.glb-viewer.is-measuring canvas {
  cursor: crosshair;
}

.glb-viewer-measurements {
  z-index: 3;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.glb-viewer-measurements line {
  stroke: #c86b14;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.glb-viewer-measurements line.measurement-leader {
  stroke-dasharray: 4 3;
  stroke-width: 1.25px;
}

.glb-viewer-measurements line.measurement-extension {
  stroke-width: 1px;
  stroke-opacity: .7;
}

.glb-viewer-measurements circle {
  fill: #fff;
  stroke: #c86b14;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.glb-viewer-measurements circle.is-pending {
  fill: #f2a14b;
}

.glb-viewer-measurements text {
  fill: #7a3e0d;
  paint-order: stroke;
  stroke: var(--chrome);
  stroke-width: 4px;
  stroke-linejoin: round;
  text-anchor: middle;
  font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.glb-viewer-measurements .is-draggable {
  pointer-events: auto;
  cursor: grab;
}

.glb-viewer-measurements .is-draggable:active {
  cursor: grabbing;
}

.glb-viewer-measurements line.measurement-line-hit {
  stroke: #0000;
  stroke-width: 12px;
  pointer-events: stroke;
  cursor: move;
}

.glb-viewer-measurements .measurement-label-box {
  fill: var(--chrome);
  stroke: #c86b1473;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.glb-viewer-measurements .measurement-label text {
  stroke: none;
}

.glb-viewer-measurements .is-ghost {
  opacity: .3;
}

.glb-viewer-measure-toolbar {
  z-index: 5;
  box-sizing: border-box;
  background: var(--chrome);
  min-width: 238px;
  color: var(--ink);
  border: 1px solid #9bb8ef;
  border-radius: 6px;
  gap: 7px;
  padding: 9px 11px;
  display: grid;
  position: absolute;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 14px #2034542e;
}

.glb-viewer-measure-heading {
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  font-size: 10px;
  display: flex;
}

.glb-viewer-measure-heading strong {
  color: var(--accent);
}

.glb-viewer-measure-heading span {
  color: var(--muted);
  font-size: 9px;
}

.glb-viewer-measure-mode, .glb-viewer-measure-options {
  color: var(--muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 10px;
  display: flex;
}

.glb-viewer-measure-mode label, .glb-viewer-measure-options label {
  cursor: pointer;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.glb-viewer-measure-mode input, .glb-viewer-measure-options input {
  accent-color: var(--accent);
  margin: 0;
}

.glb-viewer-measure-slider {
  color: var(--muted);
  grid-template-columns: auto minmax(100px, 1fr) auto;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  display: grid;
}

.glb-viewer-measure-slider input {
  width: 100%;
  accent-color: var(--accent);
  cursor: ew-resize;
}

.glb-viewer-measure-actions {
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  display: grid;
}

.glb-viewer-measure-actions button {
  min-height: 26px;
  color: var(--accent);
  cursor: pointer;
  background: #fff;
  border: 1px solid #8ca8db;
  border-radius: 4px;
  padding: 0 7px;
  font-size: 9px;
  font-weight: 700;
}

.glb-viewer-measure-actions button:first-child {
  color: #fff;
  background: var(--accent);
  border-color: #3476e8;
}

.glb-viewer-measure-actions button:hover {
  background: #e8f0ff;
  border-color: #174bb4;
}

.glb-viewer-measure-actions button:first-child:hover {
  background: #174bb4;
}

.glb-viewer-explode-toolbar {
  z-index: 5;
  box-sizing: border-box;
  border: 1px solid var(--rule);
  background: var(--chrome);
  border-radius: 6px;
  gap: 6px;
  width: min(300px, 100% - 30px);
  padding: 8px 10px;
  display: grid;
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 8px #2939521a;
}

.glb-viewer-explode-heading {
  color: var(--ink);
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 10px;
  display: flex;
}

.glb-viewer-explode-heading strong {
  color: var(--accent);
}

.glb-viewer-explode-heading span {
  color: var(--muted);
  font-size: 9px;
}

.glb-viewer-explode-slider {
  color: var(--muted);
  grid-template-columns: auto minmax(92px, 1fr) auto;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  display: grid;
}

.glb-viewer-explode-slider input {
  width: 100%;
  accent-color: var(--accent);
  cursor: ew-resize;
  margin: 0;
}

.glb-viewer-explode-stages {
  color: var(--muted);
  text-align: center;
  font-size: 9px;
}

.glb-viewer-mode-toggle {
  z-index: 4;
  border: 1px solid var(--rule);
  background: var(--chrome);
  border-radius: 6px;
  align-items: center;
  gap: 2px;
  padding: 3px;
  display: flex;
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 8px #2939521a;
}

.glb-viewer-mode-toggle label {
  min-width: 58px;
  min-height: 27px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  display: inline-flex;
}

.glb-viewer-mode-toggle label:has(input:checked) {
  color: var(--accent);
  background: var(--soft-blue);
}

.glb-viewer-mode-toggle input {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
}

.glb-viewer-selection-toolbar {
  z-index: 5;
  box-sizing: border-box;
  background: var(--chrome);
  border: 1px solid #9bb8ef;
  border-radius: 6px;
  width: min(300px, 100% - 30px);
  padding: 8px 10px 7px;
  transition: opacity .12s;
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 14px #2034542e;
}

.glb-viewer:has(.glb-viewer-explode-toolbar) .glb-viewer-selection-toolbar {
  bottom: 154px;
}

.glb-viewer-selection-heading {
  color: var(--ink);
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 10px;
  display: flex;
}

.glb-viewer-selection-heading strong {
  max-width: 125px;
  color: var(--accent);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  overflow: hidden;
}

.glb-viewer-selection-heading span {
  color: var(--muted);
  white-space: nowrap;
  font-size: 9px;
}

.glb-viewer-selection-slider {
  color: var(--muted);
  grid-template-columns: auto minmax(100px, 1fr) auto;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  font-size: 9px;
  display: grid;
}

.glb-viewer-selection-slider input {
  width: 100%;
  accent-color: var(--accent);
  cursor: ew-resize;
}

.glb-viewer-selection-scale {
  color: var(--muted);
  justify-content: space-between;
  margin-top: 1px;
  font-size: 8px;
  display: flex;
}

.glb-viewer-selection-actions {
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 8px;
  display: grid;
}

.glb-viewer-selection-export, .glb-viewer-selection-measure {
  cursor: pointer;
  border-radius: 4px;
  min-height: 27px;
  padding: 0 7px;
  font-size: 9px;
  font-weight: 700;
}

.glb-viewer-selection-export {
  color: #fff;
  background: var(--accent);
  border: 1px solid #3476e8;
}

.glb-viewer-selection-export:hover {
  background: #174bb4;
  border-color: #174bb4;
}

.glb-viewer-selection-measure {
  color: var(--accent);
  background: var(--soft-blue);
  border: 1px solid #9bb8ef;
}

.glb-viewer-selection-measure:hover {
  background: #dceaff;
  border-color: #3476e8;
}

.viewer-measurement-list {
  gap: 6px;
  display: grid;
}

.viewer-measurement-row {
  border: 1px solid var(--rule);
  background: var(--field);
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  display: flex;
}

.viewer-measurement-row div {
  gap: 1px;
  min-width: 0;
  display: grid;
}

.viewer-measurement-row strong {
  color: var(--ink);
  font-size: 10px;
}

.viewer-measurement-row span {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 9px ui-monospace, monospace;
  overflow: hidden;
}

.viewer-measurement-row button {
  border: 1px solid var(--rule);
  width: 20px;
  height: 20px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border-radius: 3px;
}

.viewer-measurement-row button:hover {
  color: #b33333;
  background: #fff4f4;
  border-color: #d88080;
}

.viewer-edit-corners {
  z-index: 3;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.viewer-edit-corner {
  cursor: nwse-resize;
  pointer-events: auto;
  background: #fff;
  border: 1px solid #3476e8;
  border-radius: 2px;
  width: 11px;
  height: 11px;
  padding: 0;
  position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 2px #162c502e;
}

.glb-viewer-edit-notice {
  z-index: 2;
  box-sizing: border-box;
  color: #2457ad;
  pointer-events: none;
  background: #eff6fff0;
  border: 1px solid #b8cdf5;
  border-radius: 5px;
  max-width: calc(100% - 28px);
  padding: 7px 9px;
  font-size: 10px;
  position: absolute;
  top: 112px;
  left: 14px;
}

.glb-viewer-calculate {
  z-index: 4;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
  border: 1px solid #1c58d2;
  border-radius: 6px;
  min-width: 160px;
  min-height: 40px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  position: absolute;
  bottom: 72px;
  right: 14px;
  box-shadow: 0 3px 10px #1c58d23d;
}

.glb-viewer-calculate:hover {
  background: #174bb4;
  border-color: #174bb4;
}

.glb-viewer-hint {
  box-sizing: border-box;
  border: 1px solid var(--rule);
  max-width: 100%;
  color: var(--muted);
  background: var(--chrome);
  pointer-events: none;
  border-radius: 5px;
  padding: 7px 9px;
  font-size: 10px;
  line-height: 1.5;
}

.glb-viewer-selection-toolbar ~ .glb-viewer-footer {
  bottom: 184px;
}

.glb-viewer-explode-toolbar ~ .glb-viewer-footer {
  bottom: 144px;
}

.glb-viewer:has(.glb-viewer-explode-toolbar) .glb-viewer-selection-toolbar ~ .glb-viewer-footer {
  bottom: 266px;
}

.glb-viewer-explode-toolbar ~ .glb-viewer-calculate {
  bottom: 182px;
}

@container (max-width: 550px) {
  .tool-dock-button span, .tool-dock-option {
    display: none;
  }

  .tool-dock-button {
    padding: 0 8px;
  }

  .tool-hint {
    white-space: normal;
    flex-wrap: wrap;
  }
}

/* [project]/apps/web/app/styles/properties.css [app-client] (css) */
.properties-panel {
  border-left: 1px solid var(--rule);
  background: var(--panel-properties);
  flex-direction: column;
  min-width: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.sidebar-resize-left {
  left: 0;
}

.properties-header {
  border-bottom: 1px solid var(--rule);
  justify-content: space-between;
  align-items: center;
  min-height: 70px;
  padding: 0 18px;
  display: flex;
}

.properties-header svg {
  color: var(--muted);
}

.properties-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.property-section {
  border-bottom: 1px solid var(--rule);
  gap: 12px;
  padding: 18px;
  display: grid;
}

.property-empty {
  color: var(--muted);
  margin: 0;
  font-size: 11px;
}

.property-hint {
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  margin: 0;
  padding: 14px 18px;
  font-size: 11px;
  line-height: 1.45;
}

.properties-settings {
  width: 30px;
  height: 30px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  place-items: center;
  padding: 0;
  display: grid;
}

.properties-settings:hover, .properties-settings:focus-visible {
  border-color: var(--rule);
  color: var(--accent);
  background: var(--field);
}

.properties-settings svg {
  width: 18px;
  height: 18px;
}

.property-group-body, .property-group-fields {
  gap: 12px;
  display: grid;
}

.property-group-body[hidden] {
  display: none;
}

.property-group-toggle {
  color: inherit;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  align-items: center;
  gap: 6px;
  margin: 0 0 0 -4px;
  padding: 2px 4px;
  display: inline-flex;
}

.property-group-toggle:hover {
  color: var(--accent);
}

.property-group-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.property-group-toggle svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
  transition: transform .12s;
}

.property-group.is-folded .property-group-toggle svg {
  transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
  .property-group-toggle svg {
    transition: none;
  }
}

.property-pair {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
  display: grid;
}

.property-more {
  border: 1px solid var(--rule);
  width: 100%;
  color: var(--ink);
  background: var(--field);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}

.property-more:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.property-more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.property-more svg {
  color: var(--muted);
  flex: none;
  margin-top: 1px;
}

.property-more span {
  gap: 2px;
  display: grid;
}

.property-more small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
}

.section-heading {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.section-heading > span {
  color: var(--muted);
  font-size: 10px;
}

.add-viewport-select {
  border: 1px solid var(--rule);
  min-height: 26px;
  color: var(--accent);
  background: var(--panel);
  border-radius: 4px;
  padding: 0 5px;
  font-size: 10px;
}

.layer-row {
  color: #596477;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  display: flex;
}

.layer-visibility {
  color: #a1abba;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  padding: 0;
  display: inline-flex;
}

.layer-visibility:hover, .layer-visibility:focus-visible {
  color: var(--accent);
  background: var(--accent-soft);
}

.layer-visibility.is-hidden {
  color: #c4ccd7;
  opacity: .65;
}

.layer-visibility svg {
  width: 15px;
  height: 15px;
}

.layer-row.is-selected {
  color: var(--accent);
  font-weight: 650;
}

.layer-swatch {
  background: #99a4b5;
  width: 13px;
  height: 1px;
}

.property-field {
  gap: 5px;
  display: grid;
}

.property-field > span {
  color: var(--muted);
  font-size: 10px;
}

.dimension-unit-picker {
  gap: 7px;
  display: grid;
}

.dimension-unit-picker.is-disabled {
  opacity: .62;
}

.dimension-unit-picker > .field-label {
  color: var(--muted);
  font-size: 10px;
}

.dimension-unit-row {
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  display: grid;
}

.dimension-unit-row-label {
  color: var(--muted);
  font-size: 10px;
}

.dimension-unit-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  display: grid;
}

.dimension-unit-row:last-child .dimension-unit-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dimension-unit-options button {
  border: 1px solid var(--rule);
  min-width: 0;
  min-height: 29px;
  color: var(--muted);
  background: var(--field);
  cursor: pointer;
  border-radius: 4px;
  padding: 0 4px;
  font-size: 10px;
}

.dimension-unit-options button:hover:not(:disabled), .dimension-unit-options button.is-active {
  color: var(--accent);
  background: var(--soft-blue);
  border-color: #9bb8ef;
}

.dimension-unit-options button:disabled {
  cursor: not-allowed;
}

.property-check {
  color: #596477;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  display: flex;
}

.property-check input {
  accent-color: var(--accent);
}

.property-check small {
  color: var(--muted);
  font-size: 10px;
}

.axis-flips {
  gap: 6px;
  padding-top: 3px;
  display: grid;
}

.axis-flips-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.axis-flips-row .property-check {
  justify-content: center;
}

.field-label {
  color: var(--muted);
  font-size: 10px;
}

.property-field input {
  border: 1px solid var(--rule);
  width: 100%;
  min-height: 32px;
  color: var(--ink);
  background: var(--panel);
  border-radius: 4px;
  padding: 0 8px;
  font-size: 11px;
}

.dimension-scale-control > span {
  justify-content: space-between;
  gap: 8px;
  display: flex;
}

.dimension-scale-control output {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.dimension-scale-control input[type="range"] {
  min-height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

.dimension-scale-control small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.view-scale-control {
  gap: 7px;
  display: grid;
}

.view-scale-number {
  border: 1px solid var(--rule);
  width: fit-content;
  min-height: 30px;
  color: var(--muted);
  background: var(--field);
  border-radius: 999px;
  align-items: center;
  display: inline-flex;
}

.view-scale-number input {
  font-variant-numeric: tabular-nums;
  background: none;
  border: 0;
  width: 66px;
  min-height: 28px;
  padding: 0 0 0 11px;
}

.view-scale-number input:focus {
  outline: 0;
}

.view-scale-number span {
  color: var(--muted);
  padding-right: 10px;
  font-size: 11px;
}

.view-scale-slider {
  appearance: none;
  cursor: pointer;
  background: none;
  width: 100%;
  min-height: 18px;
  margin: 0;
  padding: 0;
}

.view-scale-slider::-webkit-slider-runnable-track {
  background: var(--rule);
  border-radius: 999px;
  height: 4px;
}

.view-scale-slider::-webkit-slider-thumb {
  appearance: none;
  border: 2px solid var(--panel);
  background: var(--accent);
  width: 14px;
  height: 14px;
  box-shadow: 0 0 0 1px var(--accent);
  border-radius: 50%;
  margin-top: -5px;
}

.view-scale-slider::-moz-range-track {
  background: var(--rule);
  border-radius: 999px;
  height: 4px;
}

.view-scale-slider::-moz-range-progress {
  background: var(--accent);
  border-radius: 999px;
  height: 4px;
}

.view-scale-slider::-moz-range-thumb {
  border: 2px solid var(--panel);
  background: var(--accent);
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 1px var(--accent);
  border-radius: 50%;
}

.view-scale-range {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  display: flex;
}

.view-scale-range output {
  color: var(--accent);
  font-size: 10px;
  font-weight: 650;
}

.property-field small {
  color: var(--muted);
  font-size: 10px;
}

.property-field.is-located input {
  animation: 1.2s ease-out property-located;
}

@keyframes property-located {
  from {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px #2f6df640;
  }
}

@media (prefers-reduced-motion: reduce) {
  .property-field.is-located input {
    animation-duration: 10ms;
  }
}

.property-field .property-warning {
  color: #7a4b00;
  line-height: 1.35;
}

:root[data-theme="dark"] .property-field .property-warning {
  color: #f6dfa4;
}

.properties-footer {
  border-top: 1px solid var(--rule);
  color: var(--muted);
  gap: 9px;
  padding: 14px 18px;
  font-size: 10px;
  display: grid;
}

.properties-footer > div {
  gap: 15px;
  display: flex;
}

.properties-footer a {
  color: var(--accent);
  align-items: center;
  gap: 5px;
  font-size: 11px;
  text-decoration: none;
  display: inline-flex;
}

.properties-footer a:hover {
  text-decoration: underline;
}

.properties-footer svg {
  width: 14px;
  height: 14px;
}

.properties-panel[data-workspace-tab="3d"] .properties-footer {
  display: none;
}

/* [project]/apps/web/app/styles/canvas.css [app-client] (css) */
.technical-grid {
  isolation: isolate;
  background-color: var(--drawing-paper);
  background-image: radial-gradient(#e6ebf2 .65px, #0000 .65px);
  background-size: 18px 18px;
  position: relative;
  overflow: hidden;
}

.technical-grid:before {
  z-index: 0;
  content: "";
  background-image: radial-gradient(#5b79a62e .8px, #0000 .8px);
  background-size: 20px 20px;
  animation: 16s ease-in-out infinite alternate technical-grid-drift;
  position: absolute;
  inset: -24px;
}

.technical-grid > * {
  z-index: 1;
  position: relative;
}

@keyframes technical-grid-drift {
  from {
    opacity: .55;
    transform: translate3d(-2px, 1px, 0);
  }

  to {
    opacity: .9;
    transform: translate3d(3px, -2px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .technical-grid:before {
    animation: none;
  }
}

.drawing-editor {
  flex-direction: column;
  height: 100%;
  min-height: 560px;
  display: flex;
}

.drawing-stage {
  border: 1px solid var(--rule);
  background: #f4f7fb;
  border-radius: 6px;
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px #2939520a;
}

[data-theme="dark"] .drawing-stage, .drawing-stage.is-dark-sheet, .drawing-stage.is-dark-sheet .drawing-svg > svg {
  background: #1f2a39;
}

.drawing-stage.is-dark-sheet .drawing-svg > svg > rect[fill="white"] {
  fill: #1f2a39 !important;
}

.drawing-stage.is-dark-sheet .drawing-svg .drawing-group line, .drawing-stage.is-dark-sheet .drawing-svg .drawing-group path, .drawing-stage.is-dark-sheet .drawing-svg .drawing-group polyline, .drawing-stage.is-dark-sheet .drawing-svg .drawing-group polygon, .drawing-stage.is-dark-sheet .drawing-svg .drawing-group rect:not(.group-hit-target):not([data-toolbar-anchor]), .drawing-stage.is-dark-sheet .drawing-svg .drawing-group circle, .drawing-stage.is-dark-sheet .drawing-svg .drawing-group ellipse {
  stroke: #f2f6fb !important;
}

.drawing-stage.is-dark-sheet .drawing-svg .drawing-text-group text {
  fill: #f2f6fb !important;
  stroke: none !important;
}

.drawing-stage.is-dark-sheet .drawing-svg .drawing-group.is-selected .object-line {
  stroke: var(--accent) !important;
}

.drawing-stage.is-dark-sheet .drawing-edit-grid line {
  stroke: #a8c1e03d !important;
}

.drawing-viewport {
  resize: none;
  touch-action: none;
  overscroll-behavior: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.drawing-viewport:focus:not(:focus-visible) {
  outline: none;
}

.drawing-surface {
  width: min(100%, 1150px, var(--sheet-fit-width, 1150px));
  min-width: 0;
  margin: 68px auto 80px;
  position: relative;
}

.drawing-zoom, .drawing-renderer-stack {
  width: 100%;
  position: relative;
}

.drawing-edit-grid {
  z-index: 0;
  pointer-events: none;
  opacity: .34;
  background-image: linear-gradient(to right, #0000 calc(100% - 1px), #7f91a847 100%), linear-gradient(#0000 calc(100% - 1px), #7f91a847 100%);
  background-repeat: repeat-x, repeat-y;
  background-position: var(--grid-left) 0,
    0 var(--grid-top);
  background-size: var(--grid-column) 100%,
    100% var(--grid-row);
  position: absolute;
  inset: 0;
}

.drawing-svg .drawing-edit-grid {
  opacity: 1;
}

.drawing-svg .drawing-edit-grid line {
  stroke: #7f91a82e;
  stroke-width: .28px;
  vector-effect: non-scaling-stroke;
}

.drawing-svg {
  z-index: 1;
  width: 100%;
  line-height: 0;
  position: relative;
}

.ruler-preview {
  z-index: 2;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.ruler-preview-line {
  stroke: var(--accent);
  stroke-width: 1.1px;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}

.ruler-preview-feature {
  fill: #2f6df61a;
  stroke: var(--accent);
  stroke-width: 1.2px;
  stroke-dasharray: 5 3;
  vector-effect: non-scaling-stroke;
}

.ruler-preview-point {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
}

.ruler-preview-point.is-anchor {
  fill: var(--accent);
}

.ruler-preview-point.is-unsnapped {
  fill: #fff;
  stroke: #94a3b8;
  stroke-dasharray: 1.5 1.5;
}

.ruler-preview-label text {
  fill: var(--ink);
  text-anchor: start;
  dominant-baseline: middle;
  font: 10px / 1 ui-monospace, monospace;
}

.crop-overlay {
  z-index: 3;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.crop-overlay-ghost {
  opacity: .28;
}

.section-placement-overlay {
  z-index: 3;
  cursor: crosshair;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.section-placement-catch {
  fill: #0000;
}

.section-placement-line {
  stroke: var(--accent);
  stroke-width: 2px;
  stroke-dasharray: 10 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.section-placement-snap {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.section-placement-hint {
  fill: var(--accent);
  pointer-events: none;
  font-size: 9px;
}

.crop-overlay-ghost path {
  stroke: #64748b;
  stroke-width: .7px;
  vector-effect: non-scaling-stroke;
}

.crop-overlay-ghost .hidden-line {
  stroke-dasharray: 5 3;
  opacity: .55;
}

.crop-overlay-frame {
  fill: #2563eb14;
  stroke: var(--accent);
  stroke-width: 1.1px;
  stroke-dasharray: 7 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.crop-overlay-handle {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 1.1px;
  vector-effect: non-scaling-stroke;
  cursor: nwse-resize;
  pointer-events: all;
}

.crop-overlay-handle:hover {
  fill: #dbe8ff;
}

.drawing-stage.is-dark-sheet .ruler-preview-point {
  fill: #1f2a39;
}

.drawing-stage.is-dark-sheet .ruler-preview-point.is-anchor {
  fill: var(--accent);
}

.drawing-stage.is-dark-sheet .ruler-preview-point.is-unsnapped {
  fill: #1f2a39;
  stroke: #94a3b8;
}

.drawing-stage.is-dark-sheet .ruler-preview-label text {
  fill: #f2f6fb;
}

.drawing-svg {
  --dimension-scale-preview: 1;
  --outline-scale-preview: 1;
  --drawing-outline-scale-preview: 1;
}

.drawing-svg .object-line {
  stroke-width: calc(.42 * var(--outline-scale-preview));
}

.drawing-svg .object-line.hidden-line {
  stroke-width: calc(.21 * var(--outline-scale-preview));
}

.drawing-svg .border-line {
  stroke-width: calc(1.5 * var(--drawing-outline-scale-preview));
}

.drawing-svg .section-lining {
  stroke-width: .25px;
}

.drawing-svg .cutting-plane-line {
  stroke-width: calc(.42 * var(--outline-scale-preview));
}

.drawing-svg .title-line {
  stroke-width: calc(.336 * var(--drawing-outline-scale-preview));
}

.drawing-svg .hidden-line {
  display: none;
}

.drawing-svg g.drawing-group.is-level-2 .hidden-line {
  display: inline;
}

.drawing-svg g.drawing-group.is-level-2 .deep-hidden-line {
  display: none;
}

.drawing-svg g.drawing-group.is-xray .hidden-line {
  display: inline;
}

.drawing-svg.is-depth-shaded .hidden-line {
  stroke-opacity: .55;
}

.drawing-svg.is-depth-shaded .deep-hidden-line {
  stroke-opacity: .28;
}

.drawing-svg .dimension-line {
  stroke-width: calc(.35 * var(--dimension-scale-preview));
}

.drawing-svg .dimension-text {
  font-size: calc(var(--dimension-base-size) * var(--dimension-scale-preview));
}

.dimension-color-control {
  gap: 5px;
}

.dimension-color-picker {
  align-items: center;
  gap: 8px;
  min-height: 30px;
  display: flex;
}

.dimension-color-picker input[type="color"] {
  border: 1px solid var(--rule);
  background: var(--field);
  cursor: pointer;
  border-radius: 4px;
  width: 34px;
  height: 28px;
  padding: 2px;
}

.dimension-color-picker output {
  color: var(--muted);
  font: 10px ui-monospace, monospace;
}

.drawing-style-control {
  gap: 6px;
  display: grid;
}

.manufacturing-properties {
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
}

.manufacturing-properties summary {
  cursor: pointer;
  font-size: 11px;
  line-height: 1.5;
}

.manufacturing-properties form {
  gap: 7px;
  margin-top: 10px;
  display: grid;
}

.manufacturing-values {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.manufacturing-values input {
  width: 100%;
  min-width: 0;
}

.drawing-style-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.drawing-style-buttons button {
  border: 1px solid var(--rule);
  min-width: 0;
  min-height: 44px;
  color: var(--ink);
  background: var(--field);
  overflow-wrap: anywhere;
  text-align: left;
  cursor: pointer;
  border-radius: 5px;
  align-content: center;
  gap: 3px;
  padding: 7px 8px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  display: grid;
}

.drawing-style-buttons button span {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 500;
}

.drawing-style-buttons button[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: #eef4ff;
}

.drawing-style-buttons button[data-presentation="production"][aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.drawing-style-buttons button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[data-theme="dark"] .drawing-style-buttons button[aria-pressed="true"] {
  background: #2f6df629;
}

[data-theme="dark"] .drawing-style-buttons button[data-presentation="production"][aria-pressed="true"] {
  background: var(--panel);
}

.drawing-svg [data-dimension-drag-source] {
  visibility: hidden;
}

.canvas-measure-toolbar {
  z-index: 5;
  box-sizing: border-box;
  background: var(--chrome);
  min-width: 238px;
  color: var(--ink);
  border: 1px solid #9bb8ef;
  border-radius: 6px;
  gap: 7px;
  padding: 9px 11px;
  display: grid;
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 14px #2034542e;
}

.canvas-measure-heading {
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  font-size: 10px;
  display: flex;
}

.canvas-measure-heading strong {
  color: var(--accent);
}

.canvas-measure-heading span {
  color: var(--muted);
  font-size: 9px;
}

.canvas-measure-modes, .canvas-measure-options {
  color: var(--muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 10px;
  display: flex;
}

.canvas-measure-modes label, .canvas-measure-options label {
  cursor: pointer;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.canvas-measure-modes button {
  border: 1px solid var(--rule);
  color: var(--muted);
  background: var(--field);
  cursor: pointer;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 10px;
}

.canvas-measure-modes button.is-active {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: var(--soft-blue);
}

.canvas-measure-modes input, .canvas-measure-options input {
  accent-color: var(--accent);
  margin: 0;
}

.canvas-measure-slider {
  color: var(--muted);
  grid-template-columns: auto minmax(100px, 1fr) auto;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  display: grid;
}

.canvas-measure-slider input {
  width: 100%;
  accent-color: var(--accent);
  cursor: ew-resize;
}

.canvas-auto-dimension-toolbar {
  z-index: 5;
  border: 1px solid var(--rule);
  background: var(--chrome);
  border-radius: 6px;
  width: 230px;
  max-width: calc(100% - 32px);
  padding: 9px 12px;
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 14px #2034542e;
}

.canvas-measure-actions {
  gap: 6px;
  display: flex;
}

.canvas-measure-actions button {
  min-height: 25px;
  color: var(--accent-dark);
  cursor: pointer;
  background: #f5f8ff;
  border: 1px solid #9bb8ef;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 10px;
}

.canvas-measure-actions button:first-child {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.canvas-measure-actions button:hover {
  filter: brightness(.97);
}

.drawing-svg > svg {
  background: none;
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  box-shadow: 0 2px 12px #29395217;
}

.drawing-svg g.drawing-group[data-group]:not([data-group="sheet"]):not([data-group="title-block"]) {
  cursor: grab;
  touch-action: none;
}

.drawing-svg .group-hit-target {
  cursor: grab;
  pointer-events: all;
  touch-action: none;
}

.drawing-svg .view-resize-handles [data-resize-group] {
  cursor: nwse-resize;
  pointer-events: all;
}

.drawing-svg .view-resize-handles [data-resize-group][data-resize-corner="top-left"], .drawing-svg .view-resize-handles [data-resize-group][data-resize-corner="bottom-right"] {
  cursor: nwse-resize;
}

.drawing-svg .view-resize-handles [data-resize-group][data-resize-corner="top-right"], .drawing-svg .view-resize-handles [data-resize-group][data-resize-corner="bottom-left"] {
  cursor: nesw-resize;
}

.drawing-svg .drawing-group.is-selected .object-line {
  stroke: var(--accent);
}

.drawing-svg .view-selection-box {
  pointer-events: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: .8px;
  stroke-dasharray: 4 3;
  opacity: .52;
  vector-effect: non-scaling-stroke;
}

.drawing-svg .drawing-text-group[data-group="title-block"] text[data-title-field], .drawing-svg [data-inline-editable="true"] {
  cursor: text;
  pointer-events: all;
}

.canvas-inline-editor {
  z-index: 8;
  box-sizing: border-box;
  border: 1px solid var(--accent);
  min-width: 120px;
  color: var(--ink);
  background: var(--field);
  resize: both;
  border-radius: 4px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.35;
  position: absolute;
  box-shadow: 0 3px 12px #14285033;
}

.canvas-inline-editor:focus {
  outline-offset: 1px;
  outline: 2px solid #2563eb47;
}

.drawing-svg .title-field-selection {
  pointer-events: none;
  fill: #dbeafe73;
  stroke: #93c5fd;
  stroke-width: 1px;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}

.drawing-svg.is-dragging g.drawing-group[data-group]:not([data-group="sheet"]):not([data-group="title-block"]) {
  cursor: grabbing;
}

.drawing-viewport.is-navigating .drawing-svg > svg {
  shape-rendering: optimizespeed;
}

.drawing-viewport.is-navigating.is-zoom-promoted .drawing-zoom, .drawing-viewport.is-navigating .drawing-surface {
  will-change: transform;
}

.drawing-viewport.space-pan {
  cursor: grab;
}

.drawing-viewport.is-panning {
  cursor: grabbing;
}

.drawing-viewport.is-ruler {
  cursor: crosshair;
}

.drawing-viewport.is-ruler .drawing-svg g.drawing-group[data-group]:not([data-group="sheet"]):not([data-group="title-block"]), .drawing-viewport.is-ruler .drawing-svg .group-hit-target, .canvas-tool-rail, .canvas-zoom-controls, .canvas-bottom-bar {
  z-index: 2;
  border: 1px solid var(--rule);
  background: var(--chrome);
  border-radius: 7px;
  position: absolute;
  box-shadow: 0 3px 12px #2939521a;
}

.view-context-toolbar {
  z-index: 4;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100% - 16px);
  min-height: 38px;
  color: var(--ink);
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px 7px;
  padding: 4px 6px;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 4px 12px #29395229;
}

.view-context-row {
  display: contents;
}

.view-context-toolbar.is-two-row {
  grid-template-columns: auto auto;
  gap: 4px 8px;
  display: grid;
}

.view-context-toolbar.is-two-row .view-context-row {
  align-items: center;
  gap: 4px 7px;
  display: flex;
}

.view-context-toolbar.is-two-row .view-context-placements {
  grid-area: 1 / 1 / span 2;
}

.view-context-toolbar.is-two-row .view-context-row:first-child {
  grid-area: 1 / 2;
}

.view-context-toolbar.is-two-row .view-context-row:last-child {
  grid-area: 2 / 2;
}

.view-context-toolbar.is-two-row .is-between-groups {
  display: none;
}

.view-context-toolbar.is-compact input[name^="view_label_"] {
  width: 92px;
}

.view-context-toolbar.is-compact .view-context-depth select {
  max-width: 116px;
}

.view-context-toolbar.is-cramped .view-context-row {
  flex-wrap: wrap;
}

.view-context-toolbar.is-position-flipping {
  animation: .15s ease-out view-context-toolbar-relocate;
}

@keyframes view-context-toolbar-relocate {
  from {
    translate: var(--toolbar-move-x) var(--toolbar-move-y);
  }

  to {
    translate: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-context-toolbar.is-position-flipping {
    animation: none;
  }
}

.view-context-toolbar input {
  width: 144px;
  height: 28px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #b8c4d3;
  border-radius: 4px;
  padding: 0 7px;
  font-size: 11px;
}

.view-context-depth select {
  height: 28px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #b8c4d3;
  border-radius: 4px;
  padding: 0 6px;
  font-size: 10px;
}

.view-context-placements {
  border: 0;
  gap: 3px;
  margin: 0;
  padding: 0;
  display: grid;
}

.view-context-edge-picker {
  background: #e8edf4;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  grid-template: 8px 20px 8px / 8px 20px 8px;
  gap: 2px;
  width: 46px;
  height: 46px;
  padding: 2px;
  transition: transform .2s;
  display: grid;
}

@media (prefers-reduced-motion: reduce) {
  .view-context-edge-picker {
    transition: none;
  }
}

.view-context-edge {
  cursor: pointer;
  background: #fff;
  border: 1px solid #9eacbd;
  border-radius: 1px;
  min-width: 0;
  min-height: 0;
  padding: 0;
}

.view-context-edge:hover, .view-context-edge.is-active {
  border-color: var(--accent);
  background: #dbe8ff;
}

.view-context-edge.edge-top {
  grid-area: 1 / 2;
}

.view-context-edge.edge-right {
  grid-area: 2 / 3;
}

.view-context-edge.edge-bottom {
  grid-area: 3 / 2;
}

.view-context-edge.edge-left {
  grid-area: 2 / 1;
}

.view-context-edge-center {
  color: #52647a;
  cursor: pointer;
  background: #fff;
  border: 1px solid #9eacbd;
  border-radius: 1px;
  grid-area: 2 / 2;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: grid;
  position: relative;
}

.view-context-edge-center:before {
  content: "+";
  place-items: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  display: grid;
  position: absolute;
  inset: 0;
}

.view-context-edge-center:hover, .view-context-edge-center.is-active {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: #dbe8ff;
}

.view-context-divider {
  background: #cbd5e1;
  width: 1px;
  height: 22px;
}

.view-context-clear-measurements {
  color: #b45353;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d8a7a7;
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 7px;
  font-size: 10px;
  display: inline-flex;
}

.view-context-clear-measurements:hover:not(:disabled) {
  color: #991b1b;
  background: #fff4f4;
  border-color: #b91c1c;
}

.view-context-clear-measurements:disabled {
  color: #aeb7c5;
  cursor: default;
  background: #f6f8fb;
  border-color: #d8dee8;
}

.view-context-crop, .view-context-reset-crop {
  height: 28px;
  color: var(--accent-dark);
  white-space: nowrap;
  cursor: pointer;
  background: #f5f8ff;
  border: 1px solid #9bb7e4;
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
  font-size: 10px;
  display: inline-flex;
}

.view-context-rotate {
  background: #f5f8ff;
  border: 1px solid #9bb7e4;
  border-radius: 4px;
  align-items: center;
  height: 28px;
  display: inline-flex;
  overflow: hidden;
}

.view-context-rotate button {
  width: 25px;
  height: 100%;
  color: var(--accent-dark);
  cursor: pointer;
  background: none;
  border: 0;
  place-items: center;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  display: grid;
}

.view-context-rotate button:hover {
  background: #dbe8ff;
}

.view-context-section {
  background: #f5f8ff;
  border: 1px solid #9bb7e4;
  border-radius: 4px;
  align-items: stretch;
  height: 28px;
  display: inline-flex;
  overflow: hidden;
}

.view-context-section button {
  min-width: 26px;
  color: var(--accent-dark);
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: center;
  align-items: center;
  padding: 0 6px;
  font-size: 10px;
  display: inline-flex;
}

.view-context-section button + button {
  border-left: 1px solid #c7d7f2;
}

.view-context-section button:hover:not(:disabled) {
  background: #dbe8ff;
}

.view-context-section button:disabled {
  color: #aeb7c5;
  cursor: default;
}

.view-context-rotate output {
  min-width: 31px;
  color: var(--muted);
  text-align: center;
  font-size: 9px;
}

.view-context-crop:hover, .view-context-crop.is-active {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: #dbe8ff;
}

.view-context-reset-crop {
  color: var(--muted);
  background: #fff;
  border-color: #cbd5e1;
}

.view-context-reset-crop:hover {
  color: var(--ink);
  background: #f6f8fb;
  border-color: #94a3b8;
}

.markup-context-toolbar {
  visibility: hidden;
}

.markup-context-title {
  color: var(--muted);
  white-space: nowrap;
  padding: 0 2px 0 4px;
  font-size: 10px;
  font-weight: 650;
}

.markup-context-button {
  height: 28px;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  align-items: center;
  padding: 0 8px;
  font-size: 10px;
  display: inline-flex;
}

.markup-context-button:hover, .markup-context-button[aria-pressed="true"] {
  color: var(--accent-dark);
  background: #f5f8ff;
  border-color: #9bb7e4;
}

.markup-context-segmented {
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  height: 28px;
  display: inline-flex;
  overflow: hidden;
}

.markup-context-segmented button {
  color: var(--muted);
  cursor: pointer;
  background: #fff;
  border: 0;
  border-left: 1px solid #cbd5e1;
  padding: 0 8px;
  font-size: 10px;
}

.markup-context-segmented button:first-child {
  border-left: 0;
}

.markup-context-segmented button[aria-checked="true"] {
  color: var(--accent-dark);
  background: #e7efff;
  font-weight: 650;
}

.markup-context-count {
  color: var(--muted);
  align-items: center;
  gap: 2px;
  font-size: 11px;
  display: inline-flex;
}

.view-context-toolbar .markup-context-count input {
  width: 46px;
}

:root[data-theme="dark"] .markup-context-button, :root[data-theme="dark"] .markup-context-segmented button {
  color: #f4f6fa;
  background: #2b313b;
  border-color: #586273;
}

:root[data-theme="dark"] .markup-context-segmented {
  border-color: #586273;
}

:root[data-theme="dark"] .markup-context-button:hover, :root[data-theme="dark"] .markup-context-button[aria-pressed="true"], :root[data-theme="dark"] .markup-context-segmented button[aria-checked="true"] {
  color: #d9e7ff;
  background: #273750;
  border-color: #526f9f;
}

:root[data-theme="dark"] .markup-context-title {
  color: #aab4c3;
}

:root[data-theme="dark"] .view-context-toolbar {
  color: #f4f6fa;
  background: #20252d;
  border-color: #303945;
  box-shadow: 0 4px 12px #131a2438;
}

:root[data-theme="dark"] .view-context-toolbar input, :root[data-theme="dark"] .view-context-depth select {
  color: #f4f6fa;
  background: #2b313b;
  border-color: #586273;
}

:root[data-theme="dark"] .view-context-edge-picker {
  background: #11161d;
  border-color: #414a58;
}

:root[data-theme="dark"] .view-context-edge, :root[data-theme="dark"] .view-context-edge-center {
  color: #7f8a9a;
  background: #2b313b;
  border-color: #586273;
}

:root[data-theme="dark"] .view-context-edge:hover, :root[data-theme="dark"] .view-context-edge.is-active {
  background: #f4f6fa;
  border-color: #fff;
}

:root[data-theme="dark"] .view-context-edge-center:hover, :root[data-theme="dark"] .view-context-edge-center.is-active {
  color: #fff;
  background: #47658f;
  border-color: #fff;
}

:root[data-theme="dark"] .view-context-divider {
  background: #4a5360;
}

:root[data-theme="dark"] .view-context-clear-measurements {
  color: #e18484;
  background: #2b313b;
  border-color: #805050;
}

:root[data-theme="dark"] .view-context-clear-measurements:hover:not(:disabled) {
  color: #ffd0d0;
  background: #442a2e;
  border-color: #f0aaaa;
}

:root[data-theme="dark"] .view-context-clear-measurements:disabled {
  color: #697586;
  background: #2b313b;
  border-color: #414a58;
}

:root[data-theme="dark"] .view-context-crop, :root[data-theme="dark"] .view-context-reset-crop {
  color: #d9e7ff;
  background: #273750;
  border-color: #526f9f;
}

:root[data-theme="dark"] .view-context-crop:hover, :root[data-theme="dark"] .view-context-crop.is-active {
  color: #fff;
  background: #3a5680;
  border-color: #b9d5ff;
}

:root[data-theme="dark"] .view-context-reset-crop:hover {
  color: #fff;
  background: #303844;
  border-color: #8491a3;
}

:root[data-theme="dark"] .view-context-section {
  background: #273750;
  border-color: #526f9f;
}

:root[data-theme="dark"] .view-context-section button {
  color: #d9e7ff;
}

:root[data-theme="dark"] .view-context-section button + button {
  border-left-color: #3d5276;
}

:root[data-theme="dark"] .view-context-section button:hover:not(:disabled) {
  color: #fff;
  background: #3a5680;
}

:root[data-theme="dark"] .view-context-section button:disabled {
  color: #697586;
}

.canvas-tool-rail {
  gap: 3px;
  padding: 5px;
  display: grid;
  top: 18px;
  left: 18px;
}

.canvas-tool {
  color: #5d6b7f;
  background: none;
  border: 0;
  border-radius: 5px;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.canvas-tool:hover, .canvas-tool.is-active {
  color: var(--accent);
  background: var(--soft-blue);
}

.tool-divider, .bottom-divider {
  background: var(--rule);
  height: 1px;
  margin: 3px 2px;
  display: block;
}

.canvas-zoom-controls {
  align-items: center;
  display: flex;
  top: 18px;
  right: 18px;
  overflow: hidden;
}

.canvas-zoom-controls button {
  width: 34px;
  height: 30px;
  color: var(--ink);
  background: none;
  border: 0;
  place-items: center;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  display: grid;
}

.canvas-zoom-controls button:hover {
  color: var(--accent);
  background: var(--soft-blue);
}

.canvas-zoom-controls span {
  border-right: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  min-width: 54px;
  color: var(--ink);
  text-align: center;
  padding: 0 8px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}

.canvas-zoom-controls select {
  border: 0;
  border-left: 1px solid var(--rule);
  height: 30px;
  color: var(--ink);
  background: none;
  padding: 0 7px;
  font-size: 10px;
}

.canvas-bottom-bar {
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  display: flex;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
}

.canvas-bottom-bar button {
  color: #617086;
  background: none;
  border: 0;
  border-radius: 4px;
  place-items: center;
  min-width: 31px;
  height: 30px;
  padding: 0 8px;
  font-size: 11px;
  display: inline-grid;
}

.canvas-bottom-bar button:hover, .canvas-bottom-bar button.is-active {
  color: var(--accent);
  background: var(--soft-blue);
}

.canvas-bottom-bar label {
  color: var(--muted);
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  font-size: 10px;
  display: flex;
}

.bottom-divider {
  width: 1px;
  height: 22px;
  margin: 0 3px;
}

.canvas-help {
  color: var(--muted);
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 9px 2px 0;
  font-size: 10px;
  display: flex;
}

.canvas-context-menu {
  z-index: 10;
  background: var(--chrome);
  border: 1px solid #d9e0ea;
  border-radius: 8px;
  width: 224px;
  padding: 6px;
  position: fixed;
  box-shadow: 0 10px 28px #2939522e;
}

.context-menu-heading {
  color: var(--muted);
  padding: 7px 9px 6px;
  font-size: 10px;
  font-weight: 600;
}

.canvas-context-menu button {
  width: 100%;
  min-height: 32px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
  align-items: center;
  padding: 0 9px;
  font-size: 11px;
  display: flex;
}

.canvas-context-menu button:hover:not(:disabled) {
  color: var(--accent);
  background: var(--soft-blue);
}

.canvas-context-menu button:disabled {
  color: #aeb7c5;
  cursor: not-allowed;
  opacity: 1;
  background: none;
}

.context-menu-separator {
  background: var(--rule);
  height: 1px;
  margin: 5px 3px;
}

.loading-preview {
  border: 1px solid var(--rule);
  background: #fff;
  justify-content: center;
  align-items: center;
  min-height: 560px;
  display: flex;
}

.drawing-asset-state {
  border: 1px solid var(--rule);
  min-height: 560px;
  color: var(--ink);
  text-align: center;
  background: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 24px;
  display: flex;
}

.drawing-asset-state span {
  max-width: 520px;
  color: var(--muted);
  font-size: 12px;
}

.drawing-asset-state.is-error {
  background: snow;
  border-color: #e6b7b7;
}

.drawing-asset-state.is-error span {
  color: #a34d4d;
}

.measurement-projection-notice {
  color: #745b1e;
  background: #fffaf0;
  border: 1px solid #ead7a4;
  border-radius: 4px;
  margin: 8px 12px 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
}

.source-pmi-report {
  border: 1px solid var(--rule);
  background: var(--panel);
  color: var(--ink);
  border-radius: 4px;
  margin: 8px 12px 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
}

.source-pmi-report-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
  display: grid;
}

.source-pmi-report-head span {
  color: var(--muted);
  grid-column: 1 / -1;
}

.source-pmi-report-close {
  width: 22px;
  height: 22px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  grid-area: 1 / 2;
  font-size: 16px;
  line-height: 1;
}

.source-pmi-report-close:hover {
  background: var(--soft-blue);
  color: var(--ink);
}

.source-pmi-report summary {
  cursor: pointer;
  color: var(--accent-dark);
  margin-top: 4px;
}

.source-pmi-report ul {
  gap: 4px;
  max-height: 180px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  overflow-y: auto;
}

.source-pmi-report li {
  gap: 1px;
  display: grid;
}

.source-pmi-report li small {
  color: var(--muted);
}

:root[data-theme="dark"] .source-pmi-report summary {
  color: #9dbcff;
}

.loading-sheet {
  aspect-ratio: 1.545;
  border: 1px solid var(--rule);
  background: #fff;
  width: min(94%, 1050px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px #2939520f;
}

.loading-sheet-frame {
  border: 1px solid #edf1f6;
  position: absolute;
  inset: 3%;
}

.loading-view {
  background: none;
  border: 0;
  position: absolute;
  overflow: hidden;
}

.loading-view:before, .loading-view:after {
  content: "";
  border: 1px solid #dfe6ef;
  position: absolute;
}

.loading-view:before {
  border-width: 1px 0;
  inset: 26% 10%;
}

.loading-view:after {
  aspect-ratio: 1;
  border-radius: 50%;
  width: 22%;
  top: 30%;
  left: 39%;
}

.loading-view span {
  display: none;
}

.loading-front {
  width: 32%;
  height: 26%;
  top: 54%;
  left: 8%;
}

.loading-front:after {
  width: 16%;
  top: 34%;
  left: 42%;
}

.loading-top {
  width: 32%;
  height: 20%;
  top: 30%;
  left: 8%;
}

.loading-top:before {
  inset: 30% 10%;
}

.loading-top:after {
  width: 18%;
  top: 32%;
  left: 41%;
}

.loading-right {
  width: 16%;
  height: 26%;
  top: 54%;
  left: 44%;
}

.loading-right:before {
  inset: 22%;
}

.loading-right:after {
  width: 30%;
  top: 30%;
  left: 35%;
}

.loading-isometric {
  width: 24%;
  height: 32%;
  top: 7%;
  right: 7%;
}

.loading-isometric:before {
  inset: 24% 12%;
}

.loading-isometric:after {
  width: 22%;
  top: 30%;
  left: 39%;
}

.loading-title-block {
  background: none;
  border: 1px solid #e1e7ef;
  grid-template-rows: repeat(4, 1fr);
  width: 39%;
  height: 13%;
  display: grid;
  position: absolute;
  bottom: 4%;
  right: 4%;
}

.loading-title-block span {
  border-bottom: 1px solid #e1e7ef;
  display: block;
}

.loading-title-block span:nth-child(2) {
  border-left: 1px solid #e1e7ef;
  width: 72%;
}

.loading-title-block span:nth-child(3) {
  border-left: 1px solid #e1e7ef;
  width: 46%;
}

.loading-title-block span:nth-child(4) {
  border-left: 1px solid #e1e7ef;
  width: 85%;
}

@keyframes skeleton-shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

.progressive-page {
  fill: #fff;
}

.progressive-viewport {
  -webkit-user-select: none;
  user-select: none;
}

.progressive-viewport.is-navigable {
  cursor: grab;
}

.progressive-viewport.is-navigable:active {
  cursor: grabbing;
}

.progressive-editor.is-leaving {
  z-index: 3;
  pointer-events: none;
  height: auto;
  min-height: 0;
  animation: .24s ease-out 60ms both progressive-leave;
  position: absolute;
  inset: 16px;
}

@keyframes progressive-leave {
  to {
    opacity: 0;
  }
}

.progressive-template {
  opacity: .45;
  pointer-events: none;
}

.drawing-stage.is-dark-sheet .progressive-page, .drawing-stage.is-dark-sheet .progressive-template rect[fill="white"] {
  fill: #1f2a39;
}

.drawing-stage.is-dark-sheet .progressive-template g[fill="black"] {
  fill: #f2f6fb;
}

.drawing-stage.is-dark-sheet .progressive-template path {
  stroke: #f2f6fb;
}

.progressive-skeleton {
  fill: #f4f7fb;
  stroke: #dfe6ef;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  animation: 1.8s ease-in-out infinite progressive-breathe;
}

.progressive-label {
  fill: #5b6b80;
  font-weight: 600;
}

.progressive-opening {
  animation: 1.8s ease-in-out infinite progressive-breathe;
}

.progressive-percent {
  fill: #7a8899;
  font-variant-numeric: tabular-nums;
}

.progressive-track {
  fill: #e3e9f1;
}

.progressive-fill {
  fill: #3d74c9;
  transition: width .4s;
}

.progressive-visible {
  fill: none;
  stroke: var(--progressive-ink, #111);
  stroke-width: calc(.7px * var(--progressive-outline-weight, .6));
  stroke-linecap: round;
  stroke-linejoin: round;
}

.progressive-hidden {
  fill: none;
  stroke: var(--progressive-ink, #111);
  stroke-width: calc(.35px * var(--progressive-outline-weight, .6));
  stroke-dasharray: 5 3;
}

.progressive-view {
  animation: .35s ease-out progressive-arrive;
}

.progressive-skip {
  cursor: pointer;
}

.progressive-skip circle {
  fill: #dc2626;
  stroke: #fff;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.progressive-skip path {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
}

.progressive-skip:hover circle {
  fill: #b91c1c;
}

.progressive-skip:focus {
  outline: none;
}

.progressive-skip:focus-visible circle {
  stroke: #1d4ed8;
  stroke-width: 3px;
}

.progressive-slot.is-skipped .progressive-skeleton {
  fill: none;
  stroke-dasharray: 6 4;
  animation: none;
}

.skipped-views-overlay {
  z-index: 2;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.skipped-view-frame {
  fill: none;
  stroke: #94a3b8;
  stroke-width: 1px;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
}

.skipped-view-label {
  fill: #64748b;
  font-weight: 600;
}

.skipped-view-action {
  cursor: pointer;
  pointer-events: all;
}

.skipped-view-action rect {
  fill: var(--accent);
}

.skipped-view-action text {
  fill: #fff;
  font-weight: 600;
}

.skipped-view-action:hover rect {
  filter: brightness(.92);
}

.skipped-view-action:focus {
  outline: none;
}

.skipped-view-action:focus-visible rect {
  stroke: #0f172a;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.skipped-view-action.is-disabled {
  cursor: not-allowed;
}

.skipped-view-action.is-disabled rect {
  fill: #94a3b8;
}

.drawing-stage.is-dark-sheet .skipped-view-frame {
  stroke: #64748b;
}

.drawing-stage.is-dark-sheet .skipped-view-label {
  fill: #94a3b8;
}

@keyframes progressive-breathe {
  0%, 100% {
    opacity: .75;
  }

  50% {
    opacity: 1;
  }
}

@keyframes progressive-arrive {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .progressive-skeleton, .progressive-view, .progressive-opening {
    animation: none;
  }

  .progressive-fill {
    transition: none;
  }

  .progressive-editor.is-leaving {
    animation-duration: 10ms;
  }
}

@keyframes progress-sweep {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(300%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress-sweep {
    animation: none;
  }
}

/* [project]/apps/web/app/styles/responsive.css [app-client] (css) */
@media (max-width: 1200px) {
  .app-layout {
    grid-template-columns: 64px var(--file-panel-width, 230px) minmax(0, 1fr) var(--properties-panel-width, 230px);
  }

  .file-panel-form {
    padding-inline: 16px;
  }

  .drawings-list {
    margin-inline: 16px;
  }

  .uploads-page-header, .uploads-page-body {
    padding-inline: 22px;
  }

  .uploads-page-grid {
    grid-template-columns: minmax(0, 1fr) 240px;
  }

  .analysis-page-header, .analysis-page-body {
    padding-inline: 22px;
  }

  .analysis-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body {
    overflow: auto;
  }

  .settings-overlay {
    padding: 12px;
  }

  .settings-modal {
    width: 100%;
    min-width: 0;
    height: calc(100vh - 24px);
    min-height: 0;
  }

  .upgrade-overlay {
    padding: 12px;
  }

  .upgrade-modal {
    width: 100%;
    max-height: calc(100vh - 24px);
  }

  .export-overlay {
    padding: 12px;
  }

  .export-modal {
    width: 100%;
    min-height: 0;
    max-height: calc(100vh - 24px);
    overflow: auto;
  }

  .export-modal-header {
    min-height: 92px;
    padding: 20px;
  }

  .export-modal-body {
    padding: 20px;
  }

  .export-options {
    grid-template-columns: 1fr;
  }

  .export-warning {
    flex-direction: column;
    align-items: flex-start;
  }

  .quality-choice-grid {
    grid-template-columns: 1fr;
  }

  .help-modal {
    max-height: calc(100vh - 24px);
  }

  .help-modal-body {
    grid-template-columns: 1fr;
    padding: 4px 20px 18px;
  }

  .help-section:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--rule);
  }

  .help-section:last-child {
    border-bottom: 0;
  }

  .help-modal-header {
    padding: 20px;
  }

  .help-modal-footer {
    padding: 14px 20px 18px;
  }

  .app-shell {
    min-width: 0;
    height: auto;
  }

  .app-topbar {
    z-index: 5;
    position: sticky;
    top: 0;
  }

  .workspace-bar {
    scroll-margin-top: 72px;
  }

  .app-layout {
    height: auto;
    display: block;
    overflow: visible;
  }

  .app-rail {
    display: none;
  }

  .app-layout[data-workspace-tab="uploads"] .workspace, .app-layout[data-workspace-tab="analysis"] .workspace {
    min-height: calc(100vh - 72px);
  }

  .file-panel, .properties-panel {
    border: 0;
    border-bottom: 1px solid var(--rule);
  }

  .sidebar-resize-handle {
    display: none;
  }

  .file-panel-form {
    padding: 18px;
  }

  .file-dropzone {
    min-height: 76px;
  }

  .drawings-list, .uploads-list {
    margin: 0;
    padding: 0 18px 18px;
  }

  .workspace {
    min-height: 760px;
  }

  .workspace-content {
    overflow: visible;
  }

  .properties-panel {
    max-height: none;
  }

  .properties-scroll {
    overflow: visible;
  }

  .uploads-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .uploads-page-grid {
    grid-template-columns: 1fr;
  }

  .upload-details-panel {
    min-height: 300px;
  }

  .analysis-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .analysis-column-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .workspace-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    min-height: 0;
    padding: 14px 18px;
  }

  .document-title {
    width: 100%;
  }

  .document-title > div {
    flex: auto;
    min-width: 0;
  }

  .document-title h1 {
    max-width: 100%;
  }

  .workspace-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .uploads-page-header, .uploads-page-body, .analysis-page-header, .analysis-page-body {
    padding-inline: 18px;
  }

  .analysis-section-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .analysis-section-heading > span {
    text-align: left;
  }

  .analysis-metric-grid {
    grid-template-columns: 1fr;
  }

  .analysis-rows > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .uploads-section-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .upload-quota {
    width: 100%;
  }

  .uploads-dropzone {
    flex-direction: column;
    align-items: flex-start;
  }

  .uploads-table-head, .upload-record {
    grid-template-columns: 22px minmax(0, 1fr) minmax(52px, .4fr) minmax(65px, .5fr) 32px;
  }

  .uploads-table-head span:nth-child(5), .uploads-table-head span:nth-child(6), .upload-record-size, .upload-record-date {
    display: none;
  }

  .upgrade-modal-header {
    min-height: 0;
    padding: 22px 20px 18px;
  }

  .upgrade-modal-header h2 {
    font-size: 20px;
  }

  .upgrade-modal-body {
    padding: 20px;
  }

  .upgrade-plans {
    grid-template-columns: 1fr;
  }

  .upgrade-plan {
    min-height: 0;
  }

  .upgrade-modal-footer {
    flex-direction: column;
    align-items: stretch;
    padding: 0 20px 20px;
  }

  .upgrade-modal-footer .secondary-button {
    width: 100%;
  }

  .settings-modal {
    flex-direction: column;
    display: flex;
  }

  .settings-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    flex: none;
  }

  .settings-nav {
    grid-template-columns: repeat(3, 1fr);
  }

  .settings-nav button {
    text-align: center;
    padding-inline: 6px;
  }

  .settings-main-header {
    min-height: 70px;
    padding-inline: 18px;
  }

  .settings-content {
    padding-inline: 18px;
  }

  .settings-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .app-topbar {
    gap: 10px;
    padding-inline: 16px;
  }

  .app-topbar .brand-name {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }

  .brand-version, .topbar-document, .conversion-quota-copy, .topbar-separator {
    display: none;
  }

  .conversion-quota {
    width: auto;
  }

  .topbar-activity-item {
    gap: 0;
    padding: 6px;
  }

  .topbar-activity-item b {
    display: none;
  }
}

/* [project]/apps/web/app/styles/request.css [app-client] (css) */
.request-page {
  isolation: isolate;
  color: #142038;
  background: #f1f5fa;
  min-height: 100vh;
  padding: 80px 7.2vw;
  font-family: ui-sans-serif, system-ui, sans-serif;
  position: relative;
  overflow: auto;
}

.request-page:before {
  z-index: 0;
  pointer-events: none;
  opacity: .72;
  content: "";
  background-image: linear-gradient(90deg, #0000 97px, #dce8f6 98px, #0000 99px), linear-gradient(0deg, #0000 97px, #dce8f6 98px, #0000 99px), radial-gradient(circle at 17% 73%, #0000 0 108px, #d6e5f7 109px 110px, #0000 111px), radial-gradient(circle at 88% 44%, #0000 0 137px, #d6e5f7 138px 139px, #0000 140px);
  background-size: 196px 196px, 196px 196px, 100% 100%, 100% 100%;
  position: absolute;
  inset: 0;
}

.request-page:after {
  z-index: 0;
  content: "";
  border: 1px solid #c8dcf5;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 12%;
  right: 4%;
  box-shadow: -220px 160px 0 -4px #f1f5fa, -220px 160px 0 -3px #c8dcf5, -790px 520px 0 -4px #f1f5fa, -790px 520px 0 -3px #c8dcf5;
}

.request-shell {
  z-index: 1;
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 22px;
  grid-template-columns: 40% 60%;
  width: min(1316px, 100%);
  min-height: 844px;
  margin: 0 auto;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 48px #2237531a;
}

.request-copy {
  flex-direction: column;
  min-width: 0;
  padding: 53px 31px 45px 80px;
  display: flex;
}

.request-brand {
  color: #101a31;
  letter-spacing: -.045em;
  align-items: center;
  gap: 14px;
  font-size: 27px;
  font-weight: 650;
  display: flex;
}

.request-brand-mark {
  color: #2367ed;
  letter-spacing: -.2em;
  flex: none;
  place-items: center;
  width: 47px;
  height: 47px;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  display: grid;
  transform: translate(-2px, -1px);
}

.request-intro {
  margin-top: 76px;
}

.request-intro h1 {
  color: #111c31;
  letter-spacing: -.055em;
  margin: 0;
  font-size: clamp(38px, 3.45vw, 50px);
  font-weight: 700;
  line-height: 1.1;
}

.request-intro h1 span {
  color: #2367ed;
}

.request-intro p {
  color: #526077;
  max-width: 340px;
  margin: 31px 0 0;
  font-size: 17px;
  line-height: 1.55;
}

.request-access-card {
  background: #f1f5ff;
  border-radius: 15px;
  max-width: 400px;
  margin-top: 34px;
  padding: 20px;
}

.request-access-heading {
  align-items: flex-start;
  gap: 18px;
  display: flex;
}

.request-lock {
  color: #2367ed;
  background: #e1eaff;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 47px;
  height: 47px;
  line-height: 1;
  display: grid;
}

.request-lock svg {
  width: 23px;
  height: 23px;
}

.request-access-heading strong {
  color: #18243b;
  padding-top: 2px;
  font-size: 17px;
  font-weight: 700;
  display: block;
}

.request-access-heading p {
  color: #53617a;
  max-width: 285px;
  margin: 7px 0 0;
  font-size: 15px;
  line-height: 1.45;
}

.request-access-card form {
  gap: 12px;
  margin-top: 19px;
  display: grid;
}

.request-access-card label {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.request-access-card input {
  color: #17233a;
  background: #fff;
  border: 1px solid #c9d2e1;
  border-radius: 8px;
  outline: 0;
  width: 100%;
  min-height: 45px;
  padding: 0 16px;
  font-size: 15px;
}

.request-access-card input::placeholder {
  color: #8792a6;
}

.request-access-card input:focus {
  border-color: #2367ed;
  box-shadow: 0 0 0 3px #2367ed24;
}

.request-access-card button {
  color: #fff;
  cursor: pointer;
  background: #2164eb;
  border: 0;
  border-radius: 8px;
  min-height: 45px;
  font-size: 16px;
  font-weight: 700;
}

.request-access-card button:hover {
  background: #1457db;
}

.request-success {
  color: #1e6b4f;
  margin: 20px 0 4px;
  font-size: 15px;
  font-weight: 650;
}

.request-code {
  color: #69758b;
  text-align: center;
  align-items: center;
  gap: 17px;
  max-width: 400px;
  margin-top: 27px;
  font-size: 14px;
  display: flex;
}

.request-code:before, .request-code:after {
  content: "";
  background: #d9e0ea;
  flex: 1;
  height: 1px;
}

.request-code a {
  color: #1760e9;
  white-space: nowrap;
  font-weight: 650;
  text-decoration: none;
}

.request-code a:hover {
  text-decoration: underline;
}

.request-invite-form {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  max-width: 400px;
  margin-top: 12px;
  display: grid;
}

.request-invite-form input {
  min-width: 0;
  min-height: 44px;
  font: inherit;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 13px;
}

.request-invite-form button {
  color: #fff;
  min-height: 44px;
  font: inherit;
  cursor: pointer;
  background: #2164eb;
  border: 0;
  border-radius: 8px;
  padding: 0 16px;
  font-weight: 700;
}

.request-invite-form button:disabled {
  opacity: .6;
  cursor: wait;
}

.request-invite-form [role="alert"] {
  color: #b42318;
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
}

.request-page {
  height: 100vh;
  overflow-y: auto;
}

.request-note {
  color: #778399;
  align-items: center;
  gap: 8px;
  margin: auto 0 0;
  font-size: 12px;
  display: flex;
}

.request-note span {
  color: #71819b;
  font-size: 20px;
}

.request-showcase {
  flex-direction: column;
  gap: 26px;
  min-width: 0;
  padding: 74px 64px 45px 12px;
  display: flex;
}

.request-page {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --panel: #fff;
  --field: #f8fafc;
  --chrome: #fffffff0;
  --ink: #172033;
  --muted: #5f6b7c;
  --rule: #e4e9f1;
  --accent: #2f6df6;
  --accent-dark: #1e56d6;
  --soft-blue: #eef4ff;
}

.request-demo {
  min-width: 0;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid #dce3ec;
  border-radius: 16px;
  flex-direction: column;
  display: flex;
  overflow: hidden;
  box-shadow: 0 10px 23px #3c52710f, 0 24px 52px #22375314;
}

.request-demo-pending {
  min-height: 568px;
  color: var(--muted);
  place-items: center;
  font-size: 13px;
  display: grid;
}

.request-demo-header {
  border-bottom: 1px solid var(--rule);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 14px;
  display: flex;
}

.request-demo-brand {
  letter-spacing: .04em;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  display: flex;
}

.request-demo-brand .request-brand-mark {
  width: 22px;
  height: 22px;
  font-size: 23px;
}

.request-demo-brand small {
  color: var(--muted);
  letter-spacing: 0;
  font-size: 10px;
}

.request-demo-badge {
  color: #245ccf;
  background: var(--soft-blue);
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
}

.request-demo-document {
  border-bottom: 1px solid var(--rule);
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 6px 12px 6px 16px;
  display: flex;
  position: relative;
}

.request-demo-file {
  color: var(--accent);
  place-items: center;
  display: grid;
}

.request-demo-name {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.request-demo-name strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
}

.request-demo-name small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.request-demo-actions {
  align-items: center;
  gap: 4px;
  margin-left: auto;
  display: flex;
}

.request-demo-actions button {
  height: 30px;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.request-demo-actions button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--soft-blue);
}

.request-demo-actions button:disabled {
  opacity: .38;
  cursor: default;
}

.request-demo-actions .request-demo-export, .request-demo-actions .request-demo-export:hover:not(:disabled) {
  color: #fff;
  background: var(--accent);
  padding: 0 12px;
}

.request-demo-actions .request-demo-export:hover:not(:disabled) {
  background: var(--accent-dark);
}

.request-demo-stage {
  background: #f4f7fb;
  height: 520px;
  position: relative;
}

.request-demo-viewport {
  touch-action: pan-x pan-y;
  padding: 48px 16px 64px;
  display: flex;
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
}

.request-demo-viewport.is-zoomed {
  cursor: grab;
  overflow: auto;
}

.request-demo-viewport.is-zoomed:active {
  cursor: grabbing;
}

.request-demo-sheet {
  flex: none;
  margin: auto;
}

.request-demo-sheet g.drawing-group[data-group]:not([data-group="sheet"]):not([data-group="title-block"]) {
  cursor: pointer;
}

.request-demo-viewport.is-zoomed .request-demo-sheet g.drawing-group[data-group] {
  cursor: inherit;
}

.request-demo-loading {
  color: var(--muted);
  margin: auto;
  font-size: 13px;
}

.request-demo-zoom.canvas-zoom-controls {
  top: 12px;
  right: 12px;
}

.request-demo-zoom button:disabled {
  opacity: .35;
}

.request-demo-hint {
  z-index: 3;
  border: 1px solid var(--rule);
  max-width: calc(100% - 170px);
  color: var(--ink);
  background: var(--chrome);
  border-radius: 7px;
  margin: 0;
  padding: 7px 11px;
  font-size: 12px;
  line-height: 1.4;
  position: absolute;
  top: 12px;
  left: 12px;
  box-shadow: 0 3px 12px #2939521a;
}

.request-demo-dock.tool-dock {
  bottom: 14px;
}

.request-demo-dock .tool-dock-button:disabled {
  opacity: .45;
  cursor: default;
}

.request-demo-dock .tool-dock-button:disabled:hover {
  color: var(--muted);
  background: none;
}

.request-demo-depth select {
  max-width: 190px;
  height: 32px;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 0 6px;
  font-size: 11.5px;
  font-weight: 600;
}

.request-demo-depth select:hover:not(:disabled) {
  background: var(--soft-blue);
}

.request-demo-depth select:disabled {
  color: var(--muted);
  opacity: .6;
  cursor: default;
}

.request-demo-detail.canvas-auto-dimension-toolbar {
  bottom: 66px;
}

.request-demo-popover {
  z-index: 8;
  box-sizing: border-box;
  border: 1px solid var(--rule);
  background: var(--panel);
  border-radius: 10px;
  gap: 10px;
  width: 250px;
  max-width: calc(100% - 24px);
  padding: 14px;
  display: grid;
  position: absolute;
  box-shadow: 0 12px 30px #22375329;
}

.request-demo-popover.is-sheet {
  bottom: 66px;
  left: 50%;
  transform: translateX(-50%);
}

.request-demo-popover.is-export {
  top: calc(100% + 6px);
  right: 12px;
}

.request-demo-popover strong {
  font-size: 13px;
}

.request-demo-popover p {
  color: var(--muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.request-demo-popover a {
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

.request-demo-popover label {
  color: var(--muted);
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  display: grid;
}

.request-demo-popover select, .request-demo-popover input {
  box-sizing: border-box;
  border: 1px solid var(--rule);
  height: 32px;
  color: var(--ink);
  background: var(--field);
  font: inherit;
  border-radius: 6px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
}

.request-demo-popover select:focus, .request-demo-popover input:focus {
  border-color: var(--accent);
  outline: 2px solid #2f6df62e;
}

.request-demo-notes {
  color: #34425c;
  gap: 10px;
  padding: 0 6px;
  display: grid;
}

.request-demo-notes p {
  max-width: 680px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.request-demo-notes strong {
  color: #142038;
}

.request-demo-notes .request-demo-credit {
  color: #778399;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .request-page {
    padding: 32px;
  }

  .request-copy {
    padding-left: 48px;
  }

  .request-showcase {
    padding-right: 32px;
  }
}

@media (max-width: 850px) {
  .request-page {
    padding: 16px;
  }

  .request-shell {
    grid-template-columns: 1fr;
  }

  .request-copy {
    padding: 42px 42px 36px;
  }

  .request-intro {
    margin-top: 58px;
  }

  .request-showcase {
    padding: 0 42px 44px;
  }
}

@media (max-width: 520px) {
  .request-page {
    padding: 0;
  }

  .request-shell {
    border: 0;
    border-radius: 0;
    min-height: 100vh;
  }

  .request-copy {
    padding: 28px 22px 34px;
  }

  .request-brand {
    font-size: 23px;
  }

  .request-brand-mark {
    width: 40px;
    height: 40px;
  }

  .request-intro {
    margin-top: 52px;
  }

  .request-intro h1 {
    font-size: 42px;
  }

  .request-intro p {
    margin-top: 22px;
    font-size: 16px;
  }

  .request-access-card {
    margin-top: 28px;
    padding: 16px;
  }

  .request-access-heading {
    gap: 12px;
  }

  .request-access-heading strong {
    font-size: 15px;
  }

  .request-access-heading p {
    font-size: 14px;
  }

  .request-showcase {
    padding: 0 16px 30px;
  }

  .request-demo-badge-more {
    display: none;
  }

  .request-demo-stage {
    height: 400px;
  }

  .request-demo-viewport {
    padding: 48px 8px 60px;
  }

  .request-demo-depth select {
    max-width: 150px;
  }
}

/* [project]/apps/web/app/styles/admin.css [app-client] (css) */
:root {
  --admin-link: var(--accent-dark);
  --admin-strong-ink: #334155;
  --admin-hover: #f1f5f9;
  --admin-control: #cbd5e1;
  --admin-row: #e9eef5;
  --admin-badge: #eef2f7;
  --admin-input: #fff;
  --admin-changed: #fff8e0;
  --admin-danger: #a9241b;
  --admin-danger-bg: #fff3f2;
  --admin-danger-line: #f5c3c0;
  --admin-danger-badge: #fde0dd;
  --admin-danger-fill: #c4321f;
  --admin-warn: #7a4b00;
  --admin-warn-bg: #fff8e6;
  --admin-warn-line: #f3d38b;
  --admin-warn-badge: #fdecc3;
  --admin-info: #18408f;
  --admin-info-bg: #eef5ff;
  --admin-info-line: #a9c8fb;
  --admin-ok: #1d6b38;
  --admin-ok-bg: #e7f6ec;
  --admin-shadow: #22375317;
}

:root[data-theme="dark"] {
  --admin-link: #9dbcff;
  --admin-strong-ink: #c3cfdf;
  --admin-hover: #1d2a3b;
  --admin-control: #55698a;
  --admin-row: #263446;
  --admin-badge: #243246;
  --admin-input: var(--field);
  --admin-changed: #3a3320;
  --admin-danger: #f0a5ad;
  --admin-danger-bg: #3b252c;
  --admin-danger-line: #8e5961;
  --admin-danger-badge: #4f2a33;
  --admin-danger-fill: #b8321f;
  --admin-warn: #e3c484;
  --admin-warn-bg: #392f1e;
  --admin-warn-line: #755b2e;
  --admin-warn-badge: #4a3b1f;
  --admin-info: #b9d0ff;
  --admin-info-bg: #1b2f52;
  --admin-info-line: #3a5a94;
  --admin-ok: #a7dfbf;
  --admin-ok-bg: #1e3a2c;
  --admin-shadow: #00000059;
}

.admin-login-page {
  min-height: 100vh;
  color: var(--ink);
  background: var(--workspace);
  place-items: center;
  padding: 24px;
  display: grid;
}

.admin-login-card {
  border: 1px solid var(--rule);
  background: var(--panel);
  width: min(420px, 100%);
  box-shadow: 0 18px 48px var(--admin-shadow);
  border-radius: 16px;
  gap: 14px;
  padding: 34px;
  display: grid;
}

.admin-login-card h1 {
  margin: 16px 0 0;
  font-size: 27px;
}

.admin-login-card p {
  color: var(--muted);
  margin: 0 0 8px;
}

.admin-login-card .request-brand, .admin-header .request-brand {
  color: var(--ink);
}

.admin-console {
  color: var(--ink);
  background: var(--workspace);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  display: grid;
  position: fixed;
  inset: 0;
}

.admin-header {
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  display: flex;
}

.admin-header .request-brand {
  font-size: 20px;
}

.admin-header .request-brand-mark {
  width: 30px;
  height: 30px;
  font-size: 32px;
}

.admin-header-role {
  border-left: 1px solid var(--rule);
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 6px;
  padding-left: 14px;
  font-size: 14px;
  font-weight: 600;
}

.admin-header nav {
  align-items: center;
  gap: 18px;
  display: flex;
}

.admin-header a, .admin-header button {
  color: var(--admin-link);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.admin-header button:disabled {
  opacity: .55;
  cursor: default;
}

.admin-body {
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 0;
  display: grid;
}

.admin-nav {
  border-right: 1px solid var(--rule);
  background: var(--panel);
  flex-direction: column;
  gap: 16px;
  padding: 18px 12px;
  display: flex;
  overflow-y: auto;
}

.admin-nav-group {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.admin-nav-label {
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 0 12px 4px;
  font-size: 11px;
  font-weight: 750;
}

.admin-nav a {
  color: var(--admin-strong-ink);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.admin-nav a:hover {
  background: var(--admin-hover);
}

.admin-nav a[aria-current="page"] {
  color: var(--admin-link);
  background: var(--soft-blue);
}

.admin-nav .admin-nav-danger {
  color: var(--admin-danger);
  margin-top: 10px;
}

.admin-nav .admin-nav-danger[aria-current="page"] {
  color: var(--admin-danger);
  background: var(--admin-danger-bg);
}

.admin-main {
  overscroll-behavior: contain;
  min-width: 0;
  overflow-y: auto;
}

.admin-loading {
  color: var(--muted);
  padding: 32px 28px;
}

.admin-content > .admin-loading {
  margin: 0 0 16px;
  padding: 0;
}

.admin-content {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 30px 28px 80px;
}

.admin-content-wide {
  width: min(1400px, 100%);
}

.admin-heading, .admin-panel-heading {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.admin-heading {
  margin-bottom: 22px;
}

.admin-heading h1 {
  letter-spacing: -.03em;
  margin: 0;
  font-size: 28px;
}

.admin-heading p {
  max-width: 70ch;
  color: var(--muted);
  margin: 6px 0 0;
}

.admin-panel-heading {
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.admin-panel-heading span {
  color: var(--muted);
  font-size: 13px;
}

.admin-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
  display: grid;
}

.admin-stats > div, .admin-stats > a, .admin-panel {
  border: 1px solid var(--rule);
  background: var(--panel);
  border-radius: 12px;
}

.admin-stats > div, .admin-stats > a {
  color: inherit;
  gap: 5px;
  padding: 18px;
  text-decoration: none;
  display: grid;
}

.admin-stats > a:hover {
  border-color: var(--admin-info-line);
}

.admin-stats span, .admin-stats small {
  color: var(--muted);
  font-size: 13px;
}

.admin-stats strong {
  text-transform: capitalize;
  font-size: 21px;
}

.admin-stats strong.admin-stat-plain {
  text-transform: none;
}

.admin-panel {
  margin-bottom: 20px;
  padding: 22px;
}

.admin-panel h2 {
  margin: 0;
  font-size: 19px;
}

.admin-panel > p, .admin-hint {
  color: var(--muted);
  font-size: 14px;
}

.admin-hint {
  margin: 0 0 12px;
}

.admin-panel > p a, .admin-hint a {
  color: var(--admin-link);
  font-weight: 650;
}

.admin-range {
  border: 1px solid var(--admin-control);
  background: var(--panel);
  border-radius: 9px;
  padding: 3px;
  display: inline-flex;
}

.admin-range button {
  min-height: 32px;
  color: var(--admin-strong-ink);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 650;
}

.admin-range button[aria-pressed="true"] {
  color: #fff;
  background: var(--accent);
}

.admin-chart {
  width: 100%;
  margin-top: 14px;
  overflow: hidden;
}

.admin-chart svg {
  display: block;
}

.admin-chart text {
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.admin-chart-grid line {
  stroke: var(--admin-row);
}

.admin-chart-bar:hover rect:first-of-type {
  fill: #2f6df614;
}

.admin-chart-limit {
  stroke: #94a3b8;
  stroke-width: 1.5px;
  stroke-dasharray: 6 4;
}

.admin-chart-line {
  fill: none;
  stroke-width: 2px;
  stroke-linejoin: round;
  pointer-events: none;
}

.admin-chart-legend {
  color: var(--admin-strong-ink);
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 10px 0 0;
  padding: 0;
  font-size: 13px;
  list-style: none;
  display: flex;
}

.admin-chart-legend li {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.admin-chart-legend span {
  border-radius: 3px;
  width: 12px;
  height: 12px;
}

.admin-chart-legend span.is-line {
  border-top: 2px dashed;
  border-radius: 0;
  height: 0;
}

.admin-timeline-row {
  fill: var(--field);
}

.admin-timeline-label {
  font-weight: 600;
}

.admin-timeline-bar.is-running {
  fill-opacity: .55;
  stroke: currentColor;
  stroke-dasharray: 3 2;
}

.admin-error, .admin-alert, .admin-notice {
  border-radius: 8px;
  margin: 0 0 16px;
  padding: 11px 14px;
  font-size: 14px;
}

.admin-error {
  border: 1px solid var(--admin-danger-line);
  background: var(--admin-danger-bg);
  color: var(--admin-danger) !important;
}

.admin-alert {
  border: 1px solid var(--admin-warn-line);
  color: var(--admin-warn);
  background: var(--admin-warn-bg);
}

.admin-notice {
  border: 1px solid var(--admin-info-line);
  color: var(--admin-info);
  background: var(--admin-info-bg);
}

.admin-notice a, .admin-alert a {
  color: inherit;
  font-weight: 700;
}

.admin-login-card label, .admin-invite-form label, .admin-form-row label, .admin-dialog label, .admin-confirm {
  gap: 7px;
  font-size: 13px;
  font-weight: 650;
  display: grid;
}

.admin-login-card input, .admin-invite-form input, .admin-form-row input, .admin-dialog input, .admin-confirm input, .admin-field input, .admin-field textarea {
  border: 1px solid var(--admin-control);
  min-width: 0;
  min-height: 42px;
  color: inherit;
  background: var(--admin-input);
  font: inherit;
  border-radius: 8px;
  padding: 0 12px;
  font-weight: 400;
}

.admin-field textarea {
  resize: vertical;
  padding: 10px 12px;
}

.admin-invite-form select, .admin-form-row select, .admin-field select {
  border: 1px solid var(--admin-control);
  min-width: 0;
  min-height: 42px;
  color: var(--ink);
  background: var(--admin-input);
  font: inherit;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 400;
}

.admin-field select {
  max-width: 320px;
}

.admin-login-card button[type="submit"], .admin-invite-form button, .admin-form-row button, .admin-dialog button[type="submit"], .admin-form-actions button[type="submit"], .admin-danger-button {
  color: #fff;
  background: var(--accent);
  min-height: 42px;
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding: 0 16px;
  font-weight: 700;
}

.admin-primary {
  color: #fff;
  background: var(--accent);
  min-height: 38px;
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
}

:is(.admin-login-card button[type="submit"], .admin-invite-form button, .admin-form-row button, .admin-dialog button[type="submit"], .admin-form-actions button[type="submit"], .admin-primary):hover:not(:disabled) {
  background: var(--accent-dark);
}

.admin-heading-actions, .admin-row-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.admin-row-actions {
  justify-content: flex-start;
}

.admin-secondary {
  border: 1px solid var(--admin-control);
  min-height: 38px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 650;
}

.admin-secondary:hover:not(:disabled) {
  background: var(--admin-hover);
}

.admin-content button:disabled, .admin-login-card button:disabled, .admin-dialog button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.admin-content :is(input, textarea, select, button, a):focus-visible, .admin-dialog :is(input, button):focus-visible, .admin-header :is(a, button):focus-visible, .admin-nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.admin-invite-form {
  grid-template-columns: minmax(150px, 1.4fr) minmax(170px, 1fr) minmax(100px, .6fr) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin: 16px 0 10px;
  display: grid;
}

.admin-form-row {
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin: 16px 0 12px;
  display: flex;
}

.admin-panel > p + .admin-form-row {
  margin-top: 0;
}

.admin-form-row label {
  flex: 220px;
  max-width: 320px;
}

.admin-new-code {
  border: 1px solid var(--admin-info-line);
  color: var(--admin-info);
  background: var(--admin-info-bg);
  border-radius: 8px;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px;
  display: flex;
}

.admin-new-code code {
  color: var(--ink);
  background: var(--panel);
  letter-spacing: .06em;
  -webkit-user-select: all;
  user-select: all;
  border-radius: 5px;
  padding: 7px 10px;
  font-size: 16px;
  font-weight: 700;
}

.admin-new-code button, .admin-actions button, .admin-actions a, .admin-inline-button {
  color: var(--admin-link);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.admin-inline-button {
  margin-left: 8px;
}

.admin-actions {
  white-space: nowrap;
}

.admin-actions > * + * {
  margin-left: 14px;
}

.admin-table-wrap {
  max-height: 460px;
  overflow: auto;
}

.admin-table-tall {
  max-height: none;
}

.admin-panel table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
  font-size: 13px;
}

.admin-panel th, .admin-panel td {
  border-bottom: 1px solid var(--admin-row);
  vertical-align: top;
  padding: 11px 10px;
}

.admin-panel th {
  color: var(--muted);
  background: var(--field);
  font-weight: 700;
  position: sticky;
  top: 0;
}

.admin-panel td code {
  font-size: 12px;
}

.admin-empty {
  color: var(--muted);
  text-align: center;
}

.admin-change-row td {
  background: var(--field);
}

.admin-changes {
  margin: 0;
  padding-left: 18px;
}

.admin-badge {
  color: var(--admin-strong-ink);
  background: var(--admin-badge);
  white-space: nowrap;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 650;
  display: inline-block;
}

.admin-health {
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.admin-health li {
  border: 1px solid var(--admin-row);
  overflow-wrap: anywhere;
  border-radius: 8px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px;
  display: grid;
}

.admin-health li.is-error {
  border-color: var(--admin-danger-line);
  background: var(--admin-danger-bg);
}

.admin-health li.is-error .admin-badge {
  color: var(--admin-danger);
  background: var(--admin-danger-badge);
}

.admin-health li.is-warning {
  border-color: var(--admin-warn-line);
  background: var(--admin-warn-bg);
}

.admin-health li.is-warning .admin-badge {
  color: var(--admin-warn);
  background: var(--admin-warn-badge);
}

.admin-health li.is-resolved {
  color: var(--muted);
}

.admin-badge-active {
  color: var(--admin-ok);
  background: var(--admin-ok-bg);
}

.admin-badge-failed {
  color: var(--admin-danger);
  background: var(--admin-danger-bg);
}

.admin-badge-revoked, .admin-badge-expired, .admin-badge-used-up {
  color: var(--muted);
  background: var(--admin-badge);
}

.admin-badge-inline {
  margin-left: 8px;
}

.admin-badge-waiting {
  color: var(--admin-warn);
  background: var(--admin-warn-bg);
}

.admin-cell-note {
  color: var(--muted);
  margin-top: 3px;
  font-size: 12px;
  display: block;
}

.admin-cell-select {
  border: 1px solid var(--admin-control);
  max-width: 170px;
  min-height: 30px;
  color: var(--ink);
  background: var(--admin-input);
  font: inherit;
  border-radius: 6px;
  padding: 0 6px;
  font-size: 13px;
}

.admin-meter {
  background: var(--admin-row);
  border-radius: 3px;
  width: 120px;
  height: 5px;
  margin-top: 6px;
  display: block;
  overflow: hidden;
}

.admin-meter span {
  background: var(--accent);
  height: 100%;
  display: block;
}

.admin-meter span.is-full {
  background: var(--admin-danger-fill);
}

.admin-filters {
  flex-wrap: wrap;
  gap: 8px 16px;
  display: flex;
}

.admin-filters label {
  color: var(--muted);
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
}

.admin-filters select {
  border: 1px solid var(--admin-control);
  min-height: 32px;
  color: var(--ink);
  background: var(--admin-input);
  font: inherit;
  border-radius: 7px;
  padding: 0 8px;
  font-size: 13px;
}

.admin-matrix-wrap {
  max-height: 72vh;
}

.admin-panel .admin-matrix {
  width: 100%;
}

.admin-matrix :is(th, td) {
  vertical-align: middle;
}

.admin-matrix tbody th {
  z-index: 1;
  width: 280px;
  min-width: 220px;
  max-width: 300px;
  color: var(--ink);
  background: var(--panel);
  text-align: left;
  font-weight: 600;
  position: sticky;
  left: 0;
}

.admin-matrix tbody th small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  display: block;
}

.admin-matrix thead th {
  z-index: 2;
  min-width: 190px;
}

.admin-matrix thead th:first-child {
  z-index: 3;
  left: 0;
}

.admin-matrix td {
  min-width: 190px;
}

.admin-matrix td.is-changed {
  background: var(--admin-changed);
}

.admin-matrix-group th {
  letter-spacing: .05em;
  text-transform: uppercase;
  padding-top: 18px;
  font-size: 12px;
  position: static;
  color: var(--admin-strong-ink) !important;
  background: var(--admin-hover) !important;
  font-weight: 750 !important;
}

.admin-matrix-group th:first-child {
  position: sticky;
  left: 0;
}

.admin-matrix td input:not([type="checkbox"]), .admin-matrix td textarea, .admin-matrix td select {
  border: 1px solid var(--admin-control);
  width: 100%;
  min-height: 34px;
  color: var(--ink);
  background: var(--admin-input);
  font: inherit;
  border-radius: 6px;
  padding: 0 8px;
  font-size: 13px;
}

.admin-matrix td textarea {
  resize: vertical;
  padding: 6px 8px;
}

.admin-matrix td input:disabled {
  color: var(--muted);
  background: var(--field);
}

.admin-matrix input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  margin: 0;
}

.admin-matrix-count {
  margin-right: 6px;
  font-weight: 650;
}

.admin-price {
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 6px;
  display: grid;
}

.admin-limit {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  display: grid;
}

.admin-limit label {
  color: var(--admin-strong-ink);
  white-space: nowrap;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  display: inline-flex;
}

.admin-limit label input {
  width: 15px;
  height: 15px;
}

.admin-dialog-wide {
  width: min(640px, 100%);
  max-height: 86vh;
}

.admin-dialog-wide .admin-table-wrap {
  border: 1px solid var(--admin-row);
  border-radius: 8px;
  max-height: 50vh;
}

.admin-dialog-wide table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

.admin-dialog-wide :is(th, td) {
  border-bottom: 1px solid var(--admin-row);
  text-align: left;
  vertical-align: top;
  padding: 8px 10px;
}

.admin-dialog-wide th {
  color: var(--muted);
  background: var(--field);
  position: sticky;
  top: 0;
}

.admin-uses {
  background: var(--field);
  border-radius: 8px;
  margin-top: 14px;
  padding: 12px 16px;
  font-size: 13px;
}

.admin-uses ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.admin-settings {
  gap: 22px;
  display: grid;
}

.admin-settings-group {
  border-top: 1px solid var(--admin-row);
  margin: 6px 0 -8px;
  padding-top: 16px;
  font-size: 16px;
}

.admin-panel .admin-settings-group:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.admin-switch {
  cursor: pointer;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  display: grid;
}

.admin-switch input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  margin: 2px 0 0;
}

.admin-switch span, .admin-field > span {
  gap: 3px;
  display: grid;
}

.admin-switch small, .admin-field small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.admin-field {
  gap: 8px;
  max-width: 640px;
  display: grid;
}

.admin-field input[type="number"] {
  max-width: 140px;
}

.admin-engine-table {
  min-width: 720px;
}

.admin-count {
  justify-self: end;
}

.admin-form-actions {
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.admin-sticky-actions {
  z-index: 2;
  border-top: 1px solid var(--admin-row);
  background: var(--panel);
  border-radius: 0 0 12px 12px;
  margin: 0 -22px -22px;
  padding: 14px 22px;
  position: sticky;
  bottom: 0;
}

.admin-transfer-actions {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}

.admin-file-button {
  align-items: center;
  display: inline-flex;
  position: relative;
}

.admin-file-button:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.admin-file-button input {
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.admin-transfer-review h3 {
  overflow-wrap: anywhere;
  margin: 0 0 8px;
  font-size: 15px;
}

.admin-transfer-review ul {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
}

.admin-transfer-warnings {
  color: var(--admin-warn);
}

.admin-danger {
  border-color: var(--admin-danger-line);
}

.admin-danger h2 {
  color: var(--admin-danger);
}

.admin-confirm {
  max-width: 320px;
  margin: 4px 0 14px;
}

.admin-confirm code {
  background: var(--admin-danger-bg);
  border-radius: 4px;
  padding: 1px 5px;
}

.admin-danger-button {
  background: var(--admin-danger-fill);
}

.admin-danger-button:hover:not(:disabled) {
  background: var(--admin-danger-fill);
  filter: brightness(.92);
}

.admin-console .account-section {
  border-radius: 12px;
  margin-bottom: 20px;
}

.admin-console .account-section .admin-heading {
  margin-bottom: 4px;
}

.admin-console .account-section h2 {
  margin: 0;
  font-size: 19px;
}

.admin-console .account-section .admin-heading p {
  margin: 4px 0 0;
  font-size: 13px;
}

.admin-console .account-section button {
  border-color: var(--admin-control);
  border-radius: 8px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 650;
}

.admin-console .account-section button:hover:not(:disabled) {
  background: var(--admin-hover);
}

.admin-console .account-section :is(.admin-heading button, button[type="submit"]) {
  color: #fff;
  background: var(--accent);
  border-color: #0000;
}

.admin-console .account-section :is(.admin-heading button, button[type="submit"]):hover:not(:disabled) {
  background: var(--accent-dark);
}

.admin-console .account-section :is(th, td) {
  border-bottom-color: var(--admin-row);
}

.admin-console .account-section th {
  color: var(--muted);
  background: var(--field);
  font-weight: 700;
}

.admin-console .account-form :is(input, select) {
  border-color: var(--admin-control);
  border-radius: 8px;
}

.admin-dialog-backdrop {
  z-index: 50;
  background: #0f172a73;
  place-items: center;
  padding: 16px;
  display: grid;
  position: fixed;
  inset: 0;
}

.admin-dialog {
  width: min(400px, 100%);
  color: var(--ink);
  background: var(--panel);
  border-radius: 14px;
  gap: 12px;
  padding: 24px;
  display: grid;
  box-shadow: 0 24px 60px #0f172a40;
}

.admin-dialog h2 {
  margin: 0;
  font-size: 20px;
}

.admin-dialog p {
  color: var(--muted);
  margin: 0;
  font-size: 14px;
}

.admin-dialog-actions {
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
  display: flex;
}

@media (max-width: 860px) {
  .admin-stats, .admin-invite-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-matrix tbody th {
    width: 180px;
    min-width: 160px;
  }

  .admin-matrix :is(td, thead th) {
    min-width: 160px;
  }

  .admin-body {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-nav {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
    flex-direction: row;
    gap: 6px;
    padding: 8px 12px;
    overflow-x: auto;
  }

  .admin-nav-group {
    border-left: 1px solid var(--rule);
    flex-direction: row;
    padding-left: 6px;
  }

  .admin-nav-group:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .admin-nav-label {
    display: none;
  }

  .admin-nav a {
    padding: 7px 10px;
  }

  .admin-nav .admin-nav-danger {
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  .admin-header {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 16px;
  }

  .admin-header nav {
    flex-wrap: wrap;
    gap: 6px 12px;
  }

  .admin-header-role {
    display: none;
  }

  .admin-content {
    padding: 22px 16px 60px;
  }

  .admin-stats, .admin-invite-form {
    grid-template-columns: 1fr;
  }

  .admin-panel {
    padding: 16px;
  }

  .admin-sticky-actions {
    margin: 0 -16px -16px;
    padding: 12px 16px;
  }

  .admin-heading {
    flex-wrap: wrap;
  }

  .admin-heading h1 {
    font-size: 24px;
  }

  .admin-heading-actions {
    justify-content: flex-start;
  }

  .admin-matrix tbody th {
    width: 132px;
    min-width: 132px;
  }

  .admin-matrix tbody th small {
    display: none;
  }

  .admin-matrix :is(td, thead th) {
    min-width: 150px;
  }

  .admin-form-row label {
    max-width: none;
  }

  .admin-form-row button {
    width: 100%;
  }
}

/* [project]/apps/web/app/styles/log.css [app-client] (css) */
.admin-panel .log-table th {
  white-space: nowrap;
  padding: 0;
}

.admin-panel .log-table th:last-child {
  padding: 11px 10px;
}

.log-sort {
  width: 100%;
  color: inherit;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 6px;
  padding: 11px 10px;
  font-weight: 700;
  display: inline-flex;
}

.log-table th.log-number .log-sort {
  justify-content: flex-end;
}

.log-sort span {
  color: var(--admin-control);
  font-size: 9px;
}

.log-sort:hover {
  color: var(--ink);
}

.log-sort:hover span {
  color: var(--muted);
}

.log-sort.is-active, .log-sort.is-active span {
  color: var(--admin-link);
}

.log-table tbody tr:not(.log-detail) {
  cursor: pointer;
}

.log-table tbody tr:not(.log-detail):hover {
  background: var(--admin-hover);
}

.log-table tbody tr.is-open {
  background: var(--soft-blue);
}

.log-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.log-when {
  color: var(--muted);
  white-space: nowrap;
}

.log-file {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
}

.log-stages {
  max-width: 220px;
  color: var(--muted);
}

.log-detail > td {
  background: var(--field);
}

.log-detail ul {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.log-detail li {
  font-variant-numeric: tabular-nums;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  display: flex;
}

.log-detail li span:first-child {
  color: var(--muted);
}

.log-detail-error {
  color: var(--admin-danger);
  margin: 0 0 10px;
  font-size: 12.5px;
}

.log-detail-meta {
  color: var(--muted);
  margin: 10px 0 0;
  font-size: 11.5px;
}

/* [project]/apps/web/app/styles/editor-tools.css [app-client] (css) */
.quality-overlay {
  z-index: 40;
  background: #111b2d61;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.quality-field {
  gap: 6px;
  display: grid;
}

.quality-field-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.quality-field-button {
  border: 1px solid var(--rule);
  background: var(--field);
  width: 100%;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  display: flex;
}

.power-field {
  color: var(--ink);
  cursor: pointer;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  margin: 2px 0 12px;
  display: grid;
}

.power-field input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  margin: 2px 0 0;
}

.power-field span {
  gap: 2px;
  display: grid;
}

.power-field strong {
  font-size: 13px;
  font-weight: 650;
}

.power-field small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.file-capacity-warning {
  color: #7a4b00;
  background: #fff8e6;
  border: 1px solid #f3d38b;
  border-radius: 8px;
  margin: 0 0 12px;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.4;
}

:root[data-theme="dark"] .file-capacity-warning {
  color: #f6dfa4;
  background: #2c2412;
  border-color: #7a5a14;
}

.quality-field-button:hover {
  border-color: var(--accent);
}

.quality-field-button span {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.quality-field-button strong {
  font-size: 13px;
  font-weight: 650;
}

.quality-field-button small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.quality-depth-option {
  border: 1px solid var(--rule);
  background: var(--field);
  cursor: pointer;
  border-radius: 8px;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px 14px;
  display: grid;
}

.quality-depth-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 1px 0 0;
}

.quality-depth-option span {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.quality-depth-option strong {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
}

.quality-depth-option small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.quality-depth-option:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.quality-modal {
  border: 1px solid var(--rule);
  background: var(--panel);
  border-radius: 14px;
  flex-direction: column;
  width: min(780px, 100%);
  max-height: 88vh;
  display: flex;
  overflow: hidden;
  box-shadow: 0 24px 60px #101a2c38;
}

.quality-modal-header {
  border-bottom: 1px solid var(--rule);
  grid-template-columns: 1fr 32px;
  align-items: start;
  gap: 12px;
  padding: 20px 22px 16px;
  display: grid;
}

.quality-modal-title h2 {
  letter-spacing: -.01em;
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
}

.quality-modal-title p {
  max-width: 64ch;
  color: var(--muted);
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
}

.quality-close {
  width: 32px;
  height: 32px;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 8px;
  font-size: 20px;
}

.quality-close:hover {
  background: var(--field);
  color: var(--ink);
}

.settings-close:focus-visible, .quality-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.quality-groups {
  gap: 22px;
  padding: 20px 22px 24px;
  display: grid;
  overflow-y: auto;
}

.quality-group-heading h3 {
  margin: 0 0 3px;
  font-size: 13px;
  font-weight: 650;
}

.quality-group-heading p {
  max-width: 78ch;
  color: var(--muted);
  margin: 0 0 11px;
  font-size: 11.5px;
  line-height: 1.5;
}

.quality-groups .quality-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quality-choice.is-locked {
  opacity: .55;
}

:root[data-theme="dark"] .quality-choice:hover {
  background: #1b2740;
}

@media (max-width: 640px) {
  .quality-overlay {
    padding: 16px;
  }

  .quality-groups .quality-choice-grid {
    grid-template-columns: 1fr;
  }
}

.conversion-status-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.conversion-status-heading em {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-style: normal;
  font-weight: 650;
}

.progress-track {
  border-radius: 999px;
}

.progress-fill {
  background: var(--accent);
  border-radius: 999px;
  height: 100%;
  transition: width .25s ease-out;
}

.workspace-content.is-converting {
  position: relative;
}

.workspace-content.is-converting:after {
  z-index: 0;
  will-change: background-position;
  content: "";
  pointer-events: none;
  background: linear-gradient(100deg, #0000 12%, #2f6df60b 50%, #0000 88%) 0 0 / 45% 100% no-repeat;
  animation: 3.6s linear infinite conversion-scan;
  position: absolute;
  inset: 0;
}

@keyframes conversion-scan {
  0% {
    background-position: -85% 0;
  }

  80%, 100% {
    background-position: 185% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-content.is-converting:after {
    animation: none;
  }

  .progress-fill {
    transition: none;
  }
}

:root[data-theme="dark"] .progress-track {
  background: #24344d;
}

:root[data-theme="dark"] .workspace-content.is-converting:after {
  background-image: linear-gradient(100deg, #0000 12%, #78a8ff0f 50%, #0000 88%);
}

.log-kind {
  background: var(--field);
  color: var(--muted);
  border-radius: 5px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

.log-kind.is-drawing {
  background: var(--soft-blue);
  color: var(--accent-dark);
}

.log-kind.is-model3d {
  color: #6b4bb8;
  background: #f1ecfb;
}

.log-kind.is-analysis {
  color: #3f7a45;
  background: #eef7ee;
}

:root[data-theme="dark"] .log-kind.is-drawing {
  color: #a8c6ff;
  background: #1c355f;
}

:root[data-theme="dark"] .log-kind.is-model3d {
  color: #c4b0ee;
  background: #2c2542;
}

:root[data-theme="dark"] .log-kind.is-analysis {
  color: #a7dfbf;
  background: #1e3a2c;
}

.manufacturing-properties textarea {
  border: 1px solid var(--rule);
  background: var(--field);
  width: 100%;
  color: var(--ink);
  font: inherit;
  resize: vertical;
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 12px;
}

.manufacturing-properties textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.property-hint {
  color: var(--muted);
  margin: 6px 0 8px;
  font-size: 11px;
  line-height: 1.45;
}

.tool-dock {
  z-index: 6;
  box-sizing: border-box;
  border: 1px solid var(--rule);
  background: var(--chrome);
  border-radius: 9px;
  align-items: center;
  gap: 3px;
  max-width: calc(100% - 24px);
  padding: 5px;
  display: flex;
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 6px 18px #29395224;
}

.tool-dock-modes {
  gap: 2px;
  display: flex;
}

.tool-dock-button {
  height: 32px;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
}

.tool-dock-button:hover {
  color: var(--ink);
  background: var(--soft-blue);
}

.tool-dock-button.is-active, .tool-dock-split.is-active .tool-dock-button {
  color: #fff;
  background: var(--accent);
}

.tool-dock-button[aria-pressed="true"] {
  color: var(--accent-dark);
  background: var(--soft-blue);
}

:root[data-theme="dark"] .tool-dock-button[aria-pressed="true"] {
  color: #9dbcff;
}

.tool-dock-split {
  border-radius: 6px;
  align-items: center;
  display: flex;
  position: relative;
}

.tool-dock-split.is-active {
  background: var(--accent);
}

.tool-dock-split .tool-dock-button {
  border-radius: 6px 0 0 6px;
}

.tool-dock-caret {
  width: 20px;
  height: 32px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 0 6px 6px 0;
  place-items: center;
  padding: 0;
  display: grid;
}

.tool-dock-caret svg {
  transform: rotate(180deg);
}

.tool-dock-caret:hover {
  color: var(--ink);
  background: var(--soft-blue);
}

.tool-dock-split.is-active .tool-dock-caret {
  color: #fff;
}

.tool-dock-split.is-active .tool-dock-caret:hover {
  background: #ffffff29;
}

.tool-dock-divider {
  background: var(--rule);
  width: 1px;
  height: 22px;
  margin: 0 4px;
}

.tool-dock-option {
  color: var(--muted);
  white-space: nowrap;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  font-size: 10.5px;
  display: inline-flex;
}

.tool-dock-menu {
  z-index: 7;
  border: 1px solid var(--rule);
  background: var(--chrome);
  border-radius: 8px;
  gap: 2px;
  min-width: 250px;
  padding: 5px;
  display: grid;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  box-shadow: 0 8px 22px #1428502e;
}

.tool-dock-menu button {
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  display: grid;
}

.tool-dock-menu button:hover, .tool-dock-menu button.is-active {
  background: var(--soft-blue);
}

.tool-dock-menu strong {
  font-size: 11.5px;
  display: block;
}

.tool-dock-menu small {
  color: var(--muted);
  margin-top: 2px;
  font-size: 10px;
  display: block;
}

.tool-dock-symbol {
  border: 1px solid var(--rule);
  background: var(--field);
  border-radius: 5px;
  place-items: center;
  width: 26px;
  height: 26px;
  display: grid;
}

.tool-hint {
  z-index: 5;
  box-sizing: border-box;
  max-width: calc(100% - 32px);
  color: var(--ink);
  background: var(--chrome);
  white-space: nowrap;
  border: 1px solid #9bb8ef;
  border-radius: 7px;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  font-size: 11px;
  display: flex;
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 14px #29395224;
}

.tool-hint strong {
  color: var(--accent);
}

.tool-hint small {
  color: var(--muted);
}

@media (max-width: 760px) {
  .tool-dock-button span, .tool-dock-option {
    display: none;
  }

  .tool-dock-button {
    padding: 0 8px;
  }

  .tool-hint {
    white-space: normal;
    flex-wrap: wrap;
  }
}

.drawing-svg .is-markup-selected {
  fill-opacity: 1;
  stroke: var(--accent) !important;
}

.drawing-svg text.is-markup-selected {
  fill: var(--accent) !important;
  stroke: none !important;
}

.gdt-glyph {
  display: block;
  overflow: visible;
}

.gdt-glyph line {
  stroke: currentColor;
  stroke-width: .9px;
  stroke-linecap: round;
}

.gdt-glyph text {
  fill: currentColor;
  font-family: Arial, Helvetica, sans-serif;
}

.markup-properties {
  gap: 9px;
  display: grid;
}

.markup-properties-heading {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.markup-properties-heading h3 {
  margin: 0;
}

.gdt-palette, .gdt-characteristics, .gdt-modifiers {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.gdt-palette button, .gdt-characteristics button, .gdt-modifiers button, .frame-datum button {
  border: 1px solid var(--rule);
  min-width: 30px;
  height: 28px;
  color: var(--ink);
  background: var(--field);
  cursor: pointer;
  border-radius: 5px;
  place-items: center;
  padding: 0 5px;
  display: grid;
}

.gdt-palette button:hover, .gdt-characteristics button:hover, .gdt-modifiers button:hover, .frame-datum button:hover {
  border-color: var(--accent);
}

.gdt-characteristics button.is-active, .gdt-modifiers button.is-active, .frame-datum button.is-active {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.frame-builder {
  gap: 8px;
  display: grid;
}

.frame-row {
  border: 1px solid var(--rule);
  border-radius: 6px;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 8px;
  display: grid;
}

.frame-row legend {
  color: var(--muted);
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  font-size: 10.5px;
  font-weight: 600;
  display: flex;
}

.frame-row-values {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.frame-datums {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.frame-datum {
  gap: 3px;
  min-width: 0;
  display: flex;
}

.frame-datum input {
  text-transform: uppercase;
  width: 100%;
  min-width: 0;
}

.frame-datum button {
  min-width: 24px;
  padding: 0 2px;
}

.frame-builder-add {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.segmented-control {
  border: 1px solid var(--rule);
  background: var(--field);
  border-radius: 6px;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 2px;
  padding: 2px;
  display: grid;
}

.segmented-control button {
  min-width: 0;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  padding: 6px 4px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
}

.segmented-control button.is-active {
  color: #fff;
  background: var(--accent);
}

.field-error {
  color: #b42318;
  margin: 0;
  font-size: 10.5px;
}

.dimension-gdt {
  gap: 8px;
  display: grid;
}

.dimension-gdt summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}

.ruler-preview .ruler-preview-edge {
  stroke: var(--accent);
  stroke-width: 2.4px;
  stroke-opacity: .55;
  vector-effect: non-scaling-stroke;
}

.frame-row select, .frame-row input, .markup-properties select, .markup-properties input:not([type="checkbox"]) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  font-family: inherit;
  font-size: 12px;
}

.frame-datums {
  grid-template-columns: 1fr;
}

.frame-datum input {
  flex: auto;
  width: auto;
}

.markup-properties .segmented-control button {
  font-size: 10.5px;
}

.glb-viewer-measurements .glb-viewer-markup line {
  stroke: #c86b14;
  stroke-width: 1.2px;
}

.glb-viewer-measurements .glb-viewer-markup text {
  fill: #7a3e0d;
  stroke: none;
  text-anchor: start;
  paint-order: normal;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
}

.glb-viewer-measurements .glb-viewer-markup.is-selected line {
  stroke: var(--accent);
  stroke-width: 1.6px;
}

.glb-viewer-measurements .glb-viewer-markup.is-selected text {
  fill: var(--accent);
}

.glb-viewer-measurements .glb-viewer-markup.is-preview {
  opacity: .7;
}

.glb-viewer-measurements .glb-viewer-markup-hit {
  fill: #0000;
  stroke: none;
  pointer-events: auto;
  cursor: grab;
}

.glb-viewer-measurements .glb-viewer-markup-hit:active {
  cursor: grabbing;
}

.glb-viewer-measurements .glb-viewer-markup-box {
  fill: var(--chrome);
  stroke: none;
}

/* [project]/apps/web/app/styles/create.css [app-client] (css) */
.create-rail-beta {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
  font-size: 8px;
  display: block;
}

.create-mobile-nav {
  display: none;
}

.app-layout[data-workspace-tab="create"] {
  grid-template-columns: 72px minmax(0, 1fr);
}

.app-layout[data-workspace-tab="create"] > :is(.file-panel, .properties-panel, .workspace) {
  display: none;
}

.create-workspace {
  grid-template-columns: var(--file-panel-width, 260px) minmax(0, 1fr) var(--properties-panel-width, 264px);
  min-width: 0;
  height: 100%;
  min-height: 0;
  color: var(--ink);
  display: grid;
}

.create-workspace[hidden], .workspace[hidden] {
  display: none;
}

.create-library .property-section {
  gap: 9px;
}

.create-workspace h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 650;
}

.create-workspace h2 small {
  color: var(--accent);
  background: var(--soft-blue);
  border-radius: 4px;
  margin-left: 5px;
  padding: 3px 5px;
  font-size: 9px;
  font-weight: 500;
}

.create-workspace p {
  color: var(--muted);
  margin: 0;
  font-size: 11px;
  line-height: 1.65;
}

.create-toolbar {
  box-sizing: border-box;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
}

.create-title {
  flex: 1;
}

.create-title input {
  width: 170px;
  max-width: 100%;
}

.create-actions {
  flex-wrap: wrap;
}

.create-library button, .create-inspector button, .create-actions button, .create-selection-bar button, .create-import, .create-error button {
  border: 1px solid var(--rule);
  min-height: 30px;
  color: var(--ink);
  background: var(--field);
  font: inherit;
  cursor: pointer;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  font-size: 11px;
  display: inline-flex;
}

.create-library button:hover:not(:disabled), .create-inspector button:hover:not(:disabled), .create-actions button:hover:not(:disabled), .create-selection-bar button:hover:not(:disabled), .create-import:hover {
  border-color: var(--accent);
  background: var(--soft-blue);
}

.create-workspace button:disabled {
  opacity: .45;
  cursor: default;
}

.create-workspace :is(button, input, select, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.create-workspace .create-primary {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.create-workspace .create-primary:hover:not(:disabled) {
  color: #fff;
  background: var(--accent-dark);
}

.create-workspace :is(input:not([type="file"]), select) {
  border: 1px solid var(--rule);
  min-width: 0;
  color: var(--ink);
  background: var(--field);
  font: inherit;
  border-radius: 4px;
  padding: 6px 7px;
  font-size: 11px;
}

.create-primitives {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.create-primitives button {
  cursor: grab;
  flex-direction: column;
  gap: 5px;
  padding: 9px 2px;
}

.create-primitives svg {
  color: var(--muted);
}

.create-body-list {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.create-body-list > div {
  border: 1px solid #0000;
  border-radius: 5px;
  min-width: 0;
  display: flex;
}

.create-body-list > div.is-selected {
  border-color: var(--accent);
  background: var(--soft-blue);
}

.create-body-list button {
  background: none;
  border: 0;
}

.create-body-list button:first-of-type {
  text-align: left;
  overflow-wrap: anywhere;
  flex: 1;
  justify-content: flex-start;
  min-width: 0;
}

.create-workspace .create-body-list input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  flex: none;
  align-self: center;
  margin: 0 2px 0 5px;
  padding: 0;
}

.create-body-list button:first-of-type span {
  border-radius: 3px;
  flex: none;
  width: 9px;
  height: 9px;
}

.create-body-list .create-visibility-label {
  font-size: 8px;
}

.create-boolean-tools, .create-project-files, .create-selection-actions {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}

.create-boolean-tools button {
  flex: 1;
}

.create-boolean-tools .create-subtract {
  flex-basis: 100%;
}

.create-operand-badge {
  color: #2457ad;
  background: #e8f0ff;
  border-radius: 4px;
  flex: none;
  place-items: center;
  width: 19px;
  height: 19px;
  font-size: 11px;
  display: inline-grid;
}

.create-operand-badge[data-operand="B"] {
  color: #78400d;
  background: #fff0da;
}

.create-import {
  position: relative;
  overflow: hidden;
}

.create-import input {
  opacity: 0;
  cursor: pointer;
  width: 100%;
  position: absolute;
  inset: 0;
}

.create-import:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.create-selection-bar {
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
  box-sizing: border-box;
  min-height: 44px;
  color: var(--muted);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 11px;
  display: flex;
}

.create-selection-bar > div {
  gap: 4px;
  display: flex;
}

.create-selection-bar button[aria-pressed="true"] {
  color: var(--accent);
  background: var(--soft-blue);
  border-color: #bcd2ff;
}

.create-viewport {
  min-height: 300px;
}

.create-view-status {
  z-index: 5;
  border: 1px solid var(--rule);
  color: var(--muted);
  background: var(--panel);
  pointer-events: none;
  border-radius: 5px;
  padding: 7px 10px;
  font-size: 11px;
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.create-empty {
  text-align: center;
  pointer-events: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 30px;
  display: flex;
  position: absolute;
  inset: 0;
}

.create-empty svg {
  color: var(--accent);
}

.create-empty strong {
  color: var(--ink);
  font-size: 16px;
}

.create-empty span {
  max-width: 280px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.create-colour {
  color: var(--muted);
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  display: flex;
}

.create-colour input {
  width: 40px;
  height: 28px;
}

.create-shape-fields {
  font-size: 11px;
}

.create-shape-fields > strong {
  text-transform: capitalize;
  margin: 3px 0 12px;
  display: block;
}

.create-number {
  grid-template-columns: minmax(0, 1fr) 75px 22px;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px;
  display: grid;
}

.create-number input {
  width: 100%;
}

.create-number small {
  color: var(--muted);
  text-align: right;
}

.create-vector > span {
  color: var(--muted);
  margin: 15px 0 9px;
  display: block;
}

.create-shape-fields details {
  border: 1px solid var(--rule);
  border-radius: 5px;
  margin-top: 12px;
  padding: 9px;
}

.create-shape-fields summary, .create-controls-help summary {
  cursor: pointer;
  line-height: 1.5;
}

.create-controls-help {
  color: var(--ink);
  font-size: 11px;
}

.create-controls-help p {
  margin-top: 10px;
}

.create-inspector a {
  color: var(--accent);
  font-size: 11px;
}

.create-error {
  color: #bb4242;
  background: var(--panel);
  border-top: 1px solid #c97979;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  font-size: 12px;
  line-height: 1.5;
  display: flex;
}

.create-error button {
  margin-left: auto;
}

.sidebar-resize-handle {
  touch-action: none;
}

.sidebar-resize-handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.viewer-transform-gizmo {
  z-index: 4;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.viewer-transform-handle {
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
  cursor: grab;
  vector-effect: non-scaling-stroke;
}

.viewer-transform-handle:hover, .viewer-transform-handle:focus-visible {
  stroke-width: 8px;
  filter: drop-shadow(0 1px 2px #fff);
  outline: none;
}

.viewer-transform-handle.is-plane {
  stroke-width: 1.5px;
  fill-opacity: .18;
  pointer-events: all;
}

.viewer-transform-axis-label {
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--field);
  stroke-width: 3px;
  pointer-events: none;
  font: 700 12px ui-monospace, monospace;
}

.viewer-transform-readout {
  fill: var(--ink);
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--field);
  stroke-width: 4px;
  pointer-events: none;
  font: 700 11px ui-monospace, monospace;
}

.viewer-transform-centre {
  fill: var(--field);
  stroke: var(--ink);
  stroke-width: 1.5px;
  pointer-events: all;
  cursor: move;
}

:root[data-theme="dark"] .create-error {
  color: #f0a5ad;
}

:root[data-theme="dark"] :is(.create-inspector a, .create-workspace h2 small) {
  color: #9dbcff;
}

@media (max-width: 1200px) {
  .app-layout[data-workspace-tab="create"] {
    grid-template-columns: 64px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .create-mobile-nav {
    border-bottom: 1px solid var(--rule);
    background: var(--panel);
    gap: 6px;
    padding: 6px 12px;
    display: flex;
  }

  .create-mobile-nav button {
    border: 1px solid var(--rule);
    color: var(--ink);
    background: var(--field);
    font: inherit;
    border-radius: 4px;
    padding: 7px 10px;
    font-size: 12px;
  }

  .create-workspace {
    flex-direction: column;
    height: auto;
    min-height: calc(100dvh - 120px);
    display: flex;
  }

  .create-workspace .sidebar-resize-handle {
    display: none;
  }

  .create-library {
    flex: none;
    max-height: 310px;
  }

  .create-library .properties-header {
    min-height: 50px;
  }

  .create-library .property-section {
    padding: 12px 18px;
  }

  .create-primitives {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .create-editor {
    flex: none;
  }

  .create-viewport {
    flex: none;
    height: 480px;
  }

  .create-inspector, .create-inspector .properties-scroll {
    overflow: visible;
  }

  .create-toolbar {
    padding: 12px;
  }

  .create-title input {
    width: 160px;
  }
}

@media (max-width: 560px) {
  .create-library {
    max-height: 285px;
  }

  .create-toolbar {
    align-items: flex-start;
  }

  .create-title {
    flex-basis: 100%;
  }

  .create-selection-bar > span {
    font-size: 10px;
  }

  .create-selection-bar button {
    padding-inline: 6px;
    font-size: 10px;
  }

  .create-viewport {
    height: 420px;
  }

  .create-workspace .tool-dock-button {
    gap: 4px;
    padding: 0 7px;
    font-size: 10px;
  }
}

/* [project]/apps/web/app/styles/accounts.css [app-client] (css) */
.account-page {
  background: var(--workspace);
  color: var(--ink);
  grid-template-rows: auto minmax(0, 1fr);
  display: grid;
  position: fixed;
  inset: 0;
}

.account-main {
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px;
  overflow-y: auto;
}

.account-section {
  border: 1px solid var(--rule);
  background: var(--panel);
  border-radius: 10px;
  margin: 0 0 24px;
  padding: 22px;
}

.account-section h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.account-section p {
  color: var(--muted);
  line-height: 1.5;
}

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

.account-form {
  gap: 16px;
  max-width: 580px;
  margin: 20px 0;
  display: grid;
}

.account-form label, .account-reauth {
  gap: 6px;
  display: grid;
}

.account-form input, .account-form select, .account-reauth input, .account-setup-link input {
  font: inherit;
  border: 1px solid var(--rule);
  box-sizing: border-box;
  border-radius: 6px;
  width: 100%;
  min-width: 0;
  padding: 10px;
}

.account-checkbox {
  align-items: center;
  gap: 8px !important;
  display: flex !important;
}

.account-checkbox input {
  width: auto;
}

.account-setup-link {
  border: 1px solid var(--admin-info-line);
  background: var(--admin-info-bg);
  border-radius: 8px;
  margin: 16px 0;
  padding: 16px;
}

.account-setup-link .account-actions {
  margin-top: 10px;
}

.account-reauth {
  max-width: 450px;
  margin: 16px 0;
}

.account-section td small {
  color: var(--muted);
  margin-top: 5px;
  display: block;
}

.account-section button, .account-setup-link button {
  font: inherit;
  border: 1px solid var(--rule);
  background: var(--panel);
  color: inherit;
  cursor: pointer;
  border-radius: 6px;
  padding: 8px 12px;
}

.account-section button:disabled {
  opacity: .5;
  cursor: default;
}

.account-section table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
  font-size: 13px;
}

.account-section th, .account-section td {
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  padding: 10px;
}

.admin-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.account-form input, .account-form select, .account-reauth input, .account-setup-link input {
  background: var(--field);
  color: var(--ink);
}

.avatar {
  place-items: center;
  text-decoration: none;
  display: grid;
}

.account-actions a, .account-inbox a {
  color: var(--accent-dark);
  text-decoration: none;
}

.account-actions a:hover {
  text-decoration: underline;
}

:root[data-theme="dark"] :is(.account-actions a, .account-inbox a) {
  color: #9dbcff;
}

.account-actions button {
  white-space: nowrap;
}

.account-inbox a span:last-child {
  color: var(--muted);
  font-size: 13px;
}

.properties-fieldset {
  border: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  display: flex;
}

.site-header > .request-brand {
  color: var(--ink);
  text-decoration: none;
}

.main-navigation {
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  display: flex;
}

.main-navigation a, .main-navigation button {
  font: inherit;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 6px 0;
  text-decoration: none;
}

.main-navigation a[aria-current="page"] {
  color: var(--accent);
  font-weight: 650;
}

.topbar-status {
  flex-direction: column;
  gap: 4px;
}

.topbar-document {
  font-size: 10px;
}

.user-menu {
  position: relative;
}

.user-menu summary {
  cursor: pointer;
  list-style: none;
}

.user-menu summary::-webkit-details-marker {
  display: none;
}

.user-menu-panel {
  z-index: 40;
  border: 1px solid var(--rule);
  background: var(--panel);
  border-radius: 8px;
  min-width: 260px;
  padding: 8px;
  display: grid;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  box-shadow: 0 10px 28px #17203322;
}

.user-menu-panel a, .user-menu-panel button, .user-menu-panel strong {
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 10px;
  font-size: 13px;
  text-decoration: none;
}

.user-menu-panel a:hover, .user-menu-panel button:hover {
  background: var(--soft-blue);
  border-radius: 4px;
}

.plan-usage {
  background: var(--field);
  border-radius: 6px;
  gap: 8px;
  padding: 10px;
  font-size: 12px;
  display: grid;
}

.user-menu-panel .plan-usage {
  margin: 2px 0 6px;
}

.account-section .plan-usage {
  max-width: 420px;
  margin: 12px 0;
}

.plan-usage-label {
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 650;
}

.plan-usage > strong, .user-menu-panel .plan-usage > strong {
  color: var(--ink);
  padding: 0;
  font-size: 14px;
}

.plan-usage small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.plan-meter {
  gap: 4px;
  display: grid;
}

.plan-meter > span:first-child {
  color: var(--muted);
  justify-content: space-between;
  gap: 10px;
  display: flex;
}

.plan-meter > span:first-child > span:last-child {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.plan-meter-bar {
  background: var(--rule);
  border-radius: 3px;
  height: 5px;
  display: block;
  overflow: hidden;
}

.plan-meter-bar > span {
  background: var(--accent);
  height: 100%;
  display: block;
}

.plan-meter-bar > span.is-full {
  background: #c4321f;
}

.plan-usage button, .user-menu-panel .plan-usage button {
  color: var(--accent-dark);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  justify-self: start;
  padding: 0;
  font-weight: 650;
}

.user-menu-panel .plan-usage button:hover {
  background: none;
  text-decoration: underline;
}

:root[data-theme="dark"] .plan-usage button {
  color: #9dbcff;
}

.account-form textarea {
  font: inherit;
  border: 1px solid var(--rule);
  background: var(--field);
  color: var(--ink);
  resize: vertical;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 10px;
}

.legal-draft {
  border: 1px solid var(--rule);
  background: var(--soft-blue);
  border-radius: 8px;
  padding: 14px;
  line-height: 1.6;
}

.legal-page h2 {
  margin-top: 24px;
}

@media (max-width: 640px) {
  .site-header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
  }

  .site-header .main-navigation {
    order: 3;
    width: 100%;
  }

  .topbar-status .main-navigation {
    gap: 10px;
    font-size: 11px;
  }

  .topbar-document {
    display: none;
  }
}

.account-inbox {
  gap: 8px;
  padding: 0;
  list-style: none;
  display: grid;
}

.account-inbox a {
  border: 1px solid var(--rule);
  border-radius: 6px;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  display: flex;
}

.sharing-dialog {
  width: min(560px, 100vw - 32px);
  max-height: 85vh;
  overflow: auto;
}

.sharing-dialog .account-form {
  max-width: none;
}

.shared-banner {
  background: #edf3ff;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 24px;
  font-size: 13px;
  display: flex;
}

@media (max-width: 640px) {
  .account-main {
    padding: 16px 10px;
  }

  .account-section {
    padding: 16px;
  }

  .account-section .admin-heading, .account-inbox a {
    display: block;
  }

  .account-actions button {
    padding: 8px;
  }

  .account-inbox a {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .account-section table, .account-section tbody {
    display: block;
  }

  .account-section thead {
    display: none;
  }

  .account-section tr {
    border-bottom: 1px solid var(--rule);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 14px 0;
    display: grid;
  }

  .account-section td {
    border: 0;
    padding: 0;
  }

  .account-section td:first-child, .account-section td:last-child {
    grid-column: 1 / -1;
  }
}

.api-origin-tag, .upload-record-name .api-origin-tag {
  border: 1px solid var(--rule);
  vertical-align: middle;
  color: var(--muted);
  border-radius: 3px;
  flex-shrink: 0;
  margin: 0 0 0 6px;
  padding: 1px 4px;
  font-size: 10px;
  font-weight: 500;
  display: inline-block;
}

.api-key-detail {
  overflow-wrap: anywhere;
  min-width: 0;
}

.api-failures {
  overflow-wrap: anywhere;
  padding-left: 20px;
}

.api-failures li {
  margin: 12px 0;
}

.api-example {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 16px;
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
}

:is(.drawing-list-item strong:has(.api-origin-tag), .upload-list-item strong:has(.api-origin-tag), .upload-record-name strong:has(.api-origin-tag)) {
  align-items: center;
  display: flex;
}

.api-entry-name, .upload-record-name .api-entry-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  overflow: hidden;
}

/* [project]/apps/web/app/styles/performance.css [app-client] (css) */
:root {
  --perf-exact: #2f6df6;
  --perf-occt: #7b8494;
  --perf-lite: #119b88;
  --perf-polygonal: #b0507a;
  --perf-read: #b7c2d3;
  --perf-import: #8b7cf6;
  --perf-hidden: #dc8541;
  --perf-output: #4fb06a;
  --perf-other: #dde3ec;
  --perf-gain: #157a4a;
  --perf-loss: #b4472c;
}

:root[data-theme="dark"] {
  --perf-exact: #719dff;
  --perf-occt: #a0aaba;
  --perf-lite: #43c8b4;
  --perf-polygonal: #e48bb0;
  --perf-read: #6f7f97;
  --perf-import: #9d90fb;
  --perf-hidden: #e7a06a;
  --perf-output: #62c27d;
  --perf-other: #3a4a5f;
  --perf-gain: #7fd1a8;
  --perf-loss: #f0a58f;
}

.perf-scroll {
  min-height: 0;
  overflow-y: auto;
}

.perf-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 1168px;
  margin: 0 auto;
  padding: 40px 32px 64px;
}

.perf-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 32px;
  margin-bottom: 30px;
  display: flex;
}

.perf-heading h1 {
  letter-spacing: -.035em;
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 650;
  line-height: 1.2;
}

.perf-heading p {
  color: var(--muted);
  text-wrap: pretty;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.perf-heading .perf-snapshot {
  text-align: right;
  flex-shrink: 0;
  gap: 3px;
  font-size: 12px;
  display: grid;
}

.perf-snapshot time {
  color: var(--ink);
  font-size: 13px;
}

.perf-overview {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 0 24px;
}

.perf-section {
  border-top: 1px solid var(--rule);
  margin-top: 36px;
  padding-top: 24px;
}

.perf-overview + .perf-section {
  border-top: 0;
  margin-top: 12px;
}

.perf-page h2 {
  letter-spacing: -.02em;
  margin: 0 0 7px;
  font-size: 18px;
  font-weight: 650;
}

.perf-section-head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px 24px;
  display: flex;
}

.perf-section-head p {
  max-width: 65ch;
  color: var(--muted);
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.perf-chart-notes {
  justify-content: space-between;
  gap: 16px 40px;
  padding-top: 12px;
  display: flex;
}

.perf-chart-notes p {
  max-width: 63ch;
  color: var(--muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.perf-chart-notes p:last-child {
  max-width: 44ch;
}

.perf-leads span {
  display: block;
}

.perf-chart-notes strong {
  color: var(--ink);
  font-weight: 650;
}

.perf-note, .perf-empty {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.perf-legend {
  color: var(--muted);
  flex-wrap: wrap;
  gap: 7px 18px;
  margin: 6px 0 0;
  padding: 0;
  font-size: 12px;
  list-style: none;
  display: flex;
}

.perf-legend li {
  align-items: center;
  gap: 7px;
  display: inline-flex;
}

.perf-legend span {
  border-radius: 2px;
  width: 10px;
  height: 10px;
  display: inline-block;
}

.perf-engine-legend {
  gap: 7px 24px;
}

.perf-engine-legend ul {
  flex-wrap: wrap;
  gap: 7px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.perf-engine-legend strong {
  color: var(--ink);
  font-weight: 600;
}

.perf-models {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.perf-model {
  border-bottom: 1px solid var(--rule);
  gap: 8px;
  padding: 18px 0;
  display: grid;
}

.perf-models li:last-child .perf-model {
  border-bottom: 0;
}

.perf-model-head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 5px;
  display: flex;
}

.perf-model-head strong {
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 650;
}

.perf-model-head small {
  color: var(--muted);
  font-size: 12px;
}

.perf-bar-row, .perf-stage-row {
  grid-template-columns: 112px minmax(0, 1fr) 264px;
  align-items: center;
  gap: 12px;
  display: grid;
}

.perf-stage-row {
  grid-template-columns: 120px minmax(0, 1fr) 94px;
  gap: 8px;
}

.perf-bar-label {
  color: var(--muted);
  white-space: nowrap;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  display: inline-flex;
}

.perf-bar-label i {
  border-radius: 2px;
  flex: none;
  width: 8px;
  height: 8px;
}

.perf-bar-row.is-exact .perf-bar-label {
  color: var(--ink);
  font-weight: 600;
}

.perf-bar-track {
  background: color-mix(in srgb, var(--rule) 40%, transparent);
  border-radius: 2px;
  height: 10px;
  overflow: hidden;
}

.perf-bar-fill {
  border-radius: 2px;
  height: 100%;
  display: block;
}

.perf-bar-value {
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.perf-bar-value small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.perf-gain, .perf-loss {
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.perf-fixture-head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 5px 16px;
  display: flex;
}

.perf-fixture-head h2 {
  overflow-wrap: anywhere;
}

.perf-fixture-head p {
  color: var(--muted);
  margin: 0;
  font-size: 12px;
}

.perf-fixture-head p span {
  color: var(--rule);
  padding: 0 7px;
}

.perf-fixture-charts {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 36px;
  margin-top: 16px;
  display: grid;
}

.perf-fixture-charts > div {
  min-width: 0;
}

.perf-fixture-charts h3 {
  color: var(--muted);
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}

.perf-stages {
  gap: 12px;
  margin-top: 24px;
  display: grid;
}

.perf-stage-track {
  height: 23px;
  display: block;
}

.perf-stage-track > span {
  border-radius: 2px;
  min-width: 3px;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.perf-stage {
  border-right: 1px solid var(--panel);
  min-width: 1px;
  height: 100%;
  display: block;
}

.perf-stage:last-child {
  border-right: 0;
}

.perf-legend .perf-stage {
  border: 0;
}

.perf-stage.is-read {
  background: var(--perf-read);
}

.perf-stage.is-import {
  background: var(--perf-import);
}

.perf-stage.is-hidden {
  background: var(--perf-hidden);
}

.perf-stage.is-output {
  background: var(--perf-output);
}

.perf-stage.is-other {
  background: var(--perf-other);
}

.perf-chart {
  width: 100%;
  margin-top: 12px;
  overflow: hidden;
}

.perf-chart svg {
  display: block;
  overflow: visible;
}

.perf-chart text {
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.perf-grid line {
  stroke: var(--rule);
}

.perf-time-grid line {
  stroke-dasharray: 2 5;
}

.perf-column rect {
  transition: opacity .15s;
}

.perf-column:hover rect {
  opacity: .8;
}

.perf-column text {
  fill: var(--ink);
  font-weight: 500;
}

.perf-complexity {
  margin-top: 20px;
  position: relative;
}

.perf-complexity .perf-axis-title {
  font-size: 11px;
}

.perf-complexity-series > path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.perf-complexity-series.is-occt > path {
  stroke-dasharray: 7 5;
}

.perf-complexity-series.is-lite > path {
  stroke-dasharray: 3 4;
}

.perf-complexity-series.is-polygonal > path {
  stroke-dasharray: 9 4 2 4;
}

.perf-complexity-point {
  outline: none;
}

.perf-complexity-point > rect, .perf-complexity-point > .perf-point-mark {
  fill: currentColor;
  stroke: var(--panel);
  stroke-width: 1.5px;
}

.perf-complexity-point .perf-point-hit {
  fill: #0000;
  stroke: #0000;
  stroke-width: 1.5px;
}

.perf-complexity-point:hover .perf-point-hit, .perf-complexity-point:focus .perf-point-hit {
  fill: currentColor;
  fill-opacity: .12;
  stroke: currentColor;
}

.perf-point-tooltip {
  z-index: 1;
  box-sizing: border-box;
  background: var(--panel);
  border: 1px solid var(--rule);
  pointer-events: none;
  border-radius: 4px;
  gap: 3px;
  width: 220px;
  padding: 10px 12px;
  font-size: 12px;
  display: grid;
  position: absolute;
  box-shadow: 0 2px 8px #00000014;
}

.perf-point-tooltip strong {
  overflow-wrap: anywhere;
  font-weight: 600;
}

.perf-point-tooltip span {
  align-items: center;
  gap: 6px;
  display: flex;
}

.perf-point-tooltip i {
  border-radius: 2px;
  width: 8px;
  height: 8px;
}

.perf-point-tooltip b {
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.perf-point-tooltip small {
  color: var(--muted);
}

.perf-method {
  max-width: 82ch;
}

.perf-method p {
  color: var(--muted);
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.7;
}

@media (max-width: 860px) {
  .perf-fixture-charts {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .perf-chart-notes {
    flex-direction: column;
    gap: 10px;
  }

  .perf-chart-notes p:last-child {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .perf-page {
    padding: 24px 16px 40px;
  }

  .perf-heading {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }

  .perf-heading h1 {
    font-size: 27px;
  }

  .perf-heading .perf-snapshot {
    text-align: left;
    gap: 8px;
    display: flex;
  }

  .perf-overview {
    padding-top: 18px;
  }

  .perf-section-head {
    gap: 12px;
  }

  .perf-bar-row, .perf-stage-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 10px;
  }

  .perf-bar-label {
    grid-column: 1;
  }

  .perf-bar-value {
    text-align: right;
    grid-area: 1 / 2;
    justify-content: flex-end;
  }

  .perf-bar-track, .perf-stage-track {
    grid-column: 1 / -1;
  }
}

/*# sourceMappingURL=apps_web_app_styles_097923g._.css.map*/