.desktop-nav__link--pro {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Brick Design engine workspace ------------------------------------------------ */
.brickdesign-workbench.brickdesign-studio {
  height: max(790px, calc(100svh - 110px));
  max-height: 1180px;
  grid-template-rows: auto minmax(0, 1fr);
  background:
    radial-gradient(circle at 32% -20%, rgba(112, 88, 198, 0.1), transparent 36rem),
    #eef1f5;
}

.brickdesign-studio__topbar {
  min-height: 78px;
}

.brickdesign-module-identity__mark .material-symbols-outlined {
  color: #fff;
  font-size: 1.45rem;
}

.brickdesign-studio__engine-state {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brickdesign-studio__engine-state > span,
.brickdesign-studio__engine-state button {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(71, 78, 100, 0.13);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.52);
  color: #5b6170;
  font-family: var(--font-mono);
  font-size: 0.46rem;
  font-weight: 760;
  letter-spacing: 0.035em;
}

.brickdesign-studio__engine-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #49a58d;
  box-shadow: 0 0 0 3px rgba(73, 165, 141, 0.12);
}

.brickdesign-studio__engine-state button {
  cursor: pointer;
}

.brickdesign-studio__engine-state button:hover {
  border-color: rgba(93, 70, 181, 0.3);
  color: #5844a9;
}

.brickdesign-studio__engine-state .material-symbols-outlined {
  font-size: 0.92rem;
}

.brickdesign-studio__layout {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 295px minmax(420px, 1fr) 300px;
}

.brickdesign-studio__prompt-panel,
.brickdesign-studio__settings {
  min-width: 0;
  min-height: 0;
  background: rgba(250, 251, 253, 0.88);
}

.brickdesign-studio__prompt-panel {
  display: flex;
  overflow: auto;
  flex-direction: column;
  padding: 22px 18px 17px;
  border-right: 1px solid rgba(60, 67, 88, 0.14);
}

.brickdesign-studio__prompt-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.brickdesign-studio__prompt-head > span {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #6950b8, #348dc2);
  box-shadow: 0 9px 22px rgba(82, 69, 164, 0.19);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.54rem;
  font-weight: 900;
}

.brickdesign-studio__prompt-head small,
.brickdesign-studio__canvas-head small,
.brickdesign-studio__settings-section summary small,
.brickdesign-studio__examples > small {
  display: block;
  color: #8b829f;
  font-family: var(--font-mono);
  font-size: 0.43rem;
  font-weight: 850;
  letter-spacing: 0.095em;
}

.brickdesign-studio__prompt-head h2,
.brickdesign-studio__canvas-head h2 {
  margin: 3px 0 0;
  color: #303440;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 560;
  letter-spacing: -0.025em;
}

.brickdesign-studio__intro {
  margin: 18px 0 12px;
  color: #737887;
  font-size: 0.66rem;
  line-height: 1.62;
}

.brickdesign-studio__prompt {
  position: relative;
  display: block;
}

.brickdesign-studio__prompt textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  padding: 14px 14px 30px;
  border: 1px solid rgba(74, 80, 101, 0.18);
  border-radius: 14px;
  outline: none;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 3px rgba(49, 55, 73, 0.04);
  color: #343844;
  font: 500 0.68rem/1.55 var(--font-sans);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.brickdesign-studio__prompt textarea:focus {
  border-color: rgba(96, 72, 181, 0.52);
  box-shadow: 0 0 0 3px rgba(96, 72, 181, 0.09);
}

.brickdesign-studio__prompt > span {
  position: absolute;
  right: 11px;
  bottom: 10px;
  color: #9a9eaa;
  font-family: var(--font-mono);
  font-size: 0.42rem;
}

.brickdesign-studio__examples {
  display: grid;
  gap: 6px;
  margin-top: 15px;
}

.brickdesign-studio__examples button {
  padding: 8px 10px;
  border: 1px solid rgba(77, 84, 105, 0.11);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.52);
  color: #626776;
  cursor: pointer;
  font-size: 0.56rem;
  line-height: 1.35;
  text-align: left;
}

.brickdesign-studio__examples button:hover {
  border-color: rgba(94, 72, 177, 0.3);
  color: #5743a4;
}

.brickdesign-studio__error {
  display: flex;
  gap: 9px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(185, 70, 63, 0.18);
  border-radius: 10px;
  background: rgba(193, 74, 65, 0.07);
  color: #8f3f3a;
}

.brickdesign-studio__error .material-symbols-outlined {
  font-size: 1rem;
}

.brickdesign-studio__error p {
  margin: 0;
  font-size: 0.56rem;
  line-height: 1.45;
}

.brickdesign-studio__error strong {
  display: block;
}

.brickdesign-studio__generate {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  padding: 9px 14px;
  border: 1px solid rgba(57, 43, 112, 0.18);
  border-radius: 10px;
  background: #5c49a7;
  box-shadow: 0 8px 18px rgba(69, 59, 131, 0.18);
  color: #fff;
  cursor: pointer;
  text-align: center;
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.brickdesign-studio__generate:not(:disabled):hover {
  background: #503e96;
  box-shadow: 0 10px 22px rgba(69, 59, 131, 0.23);
  transform: translateY(-1px);
}

.brickdesign-studio__generate:disabled {
  box-shadow: none;
  cursor: not-allowed;
  filter: saturate(0.25);
  opacity: 0.55;
}

.brickdesign-studio__generate .material-symbols-outlined {
  font-size: 1rem;
}

.brickdesign-studio__generate strong,
.brickdesign-studio__generate small {
  display: block;
}

.brickdesign-studio__generate strong {
  font-size: 0.61rem;
  letter-spacing: 0.01em;
}

.brickdesign-studio__generate small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.71);
  font-size: 0.47rem;
}

.brickdesign-studio__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: brickdesign-engine-spin 700ms linear infinite;
}

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

.brickdesign-studio__privacy {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  color: #7d8290;
}

.brickdesign-studio__privacy .material-symbols-outlined {
  color: #519584;
  font-size: 0.9rem;
}

.brickdesign-studio__privacy p {
  margin: 0;
}

.brickdesign-studio__privacy strong,
.brickdesign-studio__privacy small {
  display: block;
  font-size: 0.48rem;
  line-height: 1.45;
}

.brickdesign-studio__privacy strong {
  color: #5e6572;
}

.brickdesign-studio__canvas {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #e4e8ee;
  overflow-y: auto;
}

.brickdesign-studio__canvas-head {
  display: flex;
  min-height: 69px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 17px;
  border-bottom: 1px solid rgba(58, 65, 85, 0.14);
  background: rgba(248, 250, 252, 0.75);
}

.brickdesign-studio__canvas-badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

.brickdesign-studio__canvas-badges span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid rgba(69, 76, 96, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  color: #626876;
  font-family: var(--font-mono);
  font-size: 0.41rem;
  font-weight: 760;
}

.brickdesign-studio__canvas-badges i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5e4db0;
}

.brickdesign-studio__canvas-badges .is-zero {
  border-color: rgba(67, 150, 126, 0.22);
  color: #37816d;
}

.brickdesign-studio__sheet-wrap {
  display: grid;
  min-width: 0;
  min-height: min(52vh, 560px);
  padding: clamp(16px, 3vw, 38px);
  place-items: center;
  background-image:
    linear-gradient(rgba(61, 68, 87, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 68, 87, 0.045) 1px, transparent 1px);
  background-size: 19px 19px;
}

.brickdesign-studio__empty {
  display: grid;
  width: min(86%, 760px);
  min-height: min(70%, 540px);
  padding: 30px;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(60, 67, 87, 0.16);
  border-radius: 5px;
  background: #fbfbfa;
  box-shadow: 0 24px 60px rgba(52, 60, 80, 0.13);
  color: #6c7280;
  text-align: center;
}

.brickdesign-studio__empty .material-symbols-outlined {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  place-items: center;
  border-radius: 14px;
  background: rgba(90, 71, 173, 0.08);
  color: #654fb1;
  font-size: 1.3rem;
}

.brickdesign-studio__empty strong {
  color: #3e424e;
  font-size: 0.74rem;
}

.brickdesign-studio__empty p {
  max-width: 420px;
  margin: 8px 0 0;
  font-size: 0.58rem;
  line-height: 1.55;
}

.brickdesign-studio__plan {
  display: grid;
  width: min(100%, 1050px);
  max-height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) 28px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(49, 56, 73, 0.28);
  border-radius: 5px;
  background: #f7f4ee;
  box-shadow: 0 25px 65px rgba(48, 56, 76, 0.17);
}

.brickdesign-studio__plan svg {
  width: 100%;
  height: 100%;
  min-height: 280px;
}

.brickdesign-plan__backdrop {
  fill: #d6c6b4;
}

.brickdesign-plan__brick {
  stroke: rgba(45, 39, 35, 0.5);
  stroke-width: 0.32;
  vector-effect: non-scaling-stroke;
}

.brickdesign-plan__brick.is-wall {
  filter: saturate(0.9);
}

.brickdesign-plan__brick.is-figure {
  stroke: rgba(28, 25, 24, 0.72);
  stroke-width: 0.45;
}

.brickdesign-studio__plan figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: #343944;
  color: rgba(245, 247, 251, 0.68);
  font-family: var(--font-mono);
  font-size: 0.4rem;
}

.brickdesign-studio__plan figcaption b {
  color: #7cd4bd;
  font-size: 0.37rem;
}

.brickdesign-studio__resultbar {
  display: grid;
  min-height: 55px;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid rgba(56, 63, 82, 0.14);
  background: rgba(248, 250, 252, 0.78);
}

.brickdesign-studio__resultbar div {
  display: grid;
  align-content: center;
  padding: 0 12px;
  border-right: 1px solid rgba(56, 63, 82, 0.1);
}

.brickdesign-studio__resultbar small,
.brickdesign-studio__resultbar strong {
  display: block;
}

.brickdesign-studio__resultbar small {
  color: #9297a4;
  font-family: var(--font-mono);
  font-size: 0.38rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brickdesign-studio__resultbar strong {
  margin-top: 2px;
  color: #4f5562;
  font-size: 0.58rem;
}

.brickdesign-studio__settings {
  overflow: hidden;
  border-left: 1px solid rgba(60, 67, 88, 0.14);
}

.brickdesign-studio__settings-scroll {
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
}

.brickdesign-studio__settings-section {
  border-bottom: 1px solid rgba(62, 69, 89, 0.12);
}

.brickdesign-studio__settings-section > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 15px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.brickdesign-studio__settings-section > summary::-webkit-details-marker {
  display: none;
}

.brickdesign-studio__settings-section > summary:hover {
  background: rgba(96, 73, 178, 0.035);
}

.brickdesign-studio__settings-section > summary > b {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 9px;
  background: rgba(96, 73, 178, 0.09);
  color: #604bb0;
  font-family: var(--font-mono);
  font-size: 0.48rem;
}

.brickdesign-studio__settings-section summary strong {
  display: block;
  margin-top: 2px;
  color: #414652;
  font-size: 0.66rem;
}

.brickdesign-studio__settings-chevron {
  margin-left: auto;
  color: #9188a4;
  font-size: 1.05rem;
  transition: transform 160ms ease;
}

.brickdesign-studio__settings-section[open] .brickdesign-studio__settings-chevron {
  transform: rotate(180deg);
}

.brickdesign-studio__settings-body {
  display: grid;
  gap: 11px;
  padding: 0 15px 17px;
}

.brickdesign-studio__field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.brickdesign-studio__field {
  display: grid;
  gap: 5px;
}

.brickdesign-studio__field > span,
.brickdesign-studio__colours > span {
  color: #777c89;
  font-size: 0.49rem;
  font-weight: 700;
}

.brickdesign-studio__field select,
.brickdesign-studio__number,
.brickdesign-studio__colour-field > div {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(70, 77, 98, 0.15);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.68);
}

.brickdesign-studio__field select {
  padding: 0 9px;
  outline: none;
  color: #4d5260;
  font-size: 0.55rem;
}

.brickdesign-studio__number {
  display: flex;
  align-items: center;
}

.brickdesign-studio__number input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 5px 0 9px;
  background: transparent;
  color: #414652;
  font-family: var(--font-mono);
  font-size: 0.57rem;
  font-weight: 740;
}

.brickdesign-studio__number i {
  padding-right: 8px;
  color: #9499a5;
  font-family: var(--font-mono);
  font-size: 0.43rem;
  font-style: normal;
}

.brickdesign-studio__colour-field > div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px;
}

.brickdesign-studio__colour-field input,
.brickdesign-studio__colour-row input {
  width: 31px;
  height: 25px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.brickdesign-studio__colour-field code {
  color: #676c79;
  font-family: var(--font-mono);
  font-size: 0.48rem;
}

.brickdesign-studio__context-note {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 9px;
  border: 1px solid rgba(75, 137, 159, 0.15);
  border-radius: 9px;
  background: rgba(70, 147, 168, 0.06);
  color: #597886;
  font-size: 0.5rem;
  line-height: 1.45;
}

.brickdesign-studio__context-note .material-symbols-outlined {
  font-size: 0.9rem;
}

.brickdesign-studio__note-mark {
  display: grid;
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 6px;
  background: rgba(70, 147, 168, 0.11);
  font-family: var(--font-mono);
  font-size: 0.62rem;
}

.brickdesign-studio__colours {
  display: grid;
  gap: 6px;
}

.brickdesign-studio__colour-row {
  display: flex;
  min-height: 35px;
  align-items: center;
  gap: 9px;
  padding: 4px 7px;
  border: 1px solid rgba(70, 77, 98, 0.13);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.58);
  color: #5b606d;
  font-size: 0.53rem;
}

.brickdesign-studio__colour-row button {
  display: grid;
  width: 25px;
  height: 25px;
  margin-left: auto;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #969aa5;
  cursor: pointer;
}

.brickdesign-studio__colour-row .material-symbols-outlined {
  font-size: 0.8rem;
}

.brickdesign-studio__add-colour {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px dashed rgba(94, 72, 176, 0.3);
  border-radius: 8px;
  background: rgba(95, 73, 176, 0.04);
  color: #624eb0;
  cursor: pointer;
  font-size: 0.5rem;
  font-weight: 720;
}

.brickdesign-studio__add-colour .material-symbols-outlined {
  font-size: 0.82rem;
}

.brickdesign-studio__advanced-toggle {
  display: flex;
  width: calc(100% - 24px);
  min-height: 51px;
  align-items: center;
  gap: 8px;
  margin: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(74, 81, 101, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  color: #616674;
  cursor: pointer;
  text-align: left;
}

.brickdesign-studio__advanced-toggle > span:first-child {
  flex: 1;
}

.brickdesign-studio__advanced-toggle strong,
.brickdesign-studio__advanced-toggle small {
  display: block;
}

.brickdesign-studio__advanced-toggle strong {
  font-size: 0.54rem;
}

.brickdesign-studio__advanced-toggle small {
  margin-top: 2px;
  color: #9498a4;
  font-size: 0.43rem;
}

.brickdesign-studio__advanced-toggle .material-symbols-outlined {
  font-size: 0.9rem;
}

.brickdesign-studio__advanced-sign {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: rgba(95, 73, 176, 0.08);
  color: #624eb0;
  font: 750 0.78rem/1 var(--font-mono);
}

.brickdesign-studio__switch {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.brickdesign-studio__switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.brickdesign-studio__switch > span {
  position: relative;
  width: 30px;
  height: 17px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #c4c8d0;
  transition: background 150ms ease;
}

.brickdesign-studio__switch > span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(44, 49, 65, 0.3);
  content: "";
  transition: transform 150ms ease;
}

.brickdesign-studio__switch input:checked + span {
  background: #6651b2;
}

.brickdesign-studio__switch input:checked + span::after {
  transform: translateX(13px);
}

.brickdesign-studio__switch p {
  margin: 0;
}

.brickdesign-studio__switch strong,
.brickdesign-studio__switch small {
  display: block;
}

.brickdesign-studio__subsettings {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(82, 73, 119, 0.12);
  border-radius: 10px;
  background: rgba(91, 73, 164, 0.035);
}

.brickdesign-studio__subsettings.is-cuts {
  border-color: rgba(177, 119, 49, 0.17);
  background: rgba(190, 126, 49, 0.045);
}

.brickdesign-studio__subsettings.is-architectural {
  border-color: rgba(49, 125, 118, 0.2);
  background: rgba(46, 139, 128, 0.045);
}

.brickdesign-studio__switch strong {
  color: #555a67;
  font-size: 0.52rem;
}

.brickdesign-studio__switch small {
  margin-top: 2px;
  color: #9498a3;
  font-size: 0.43rem;
  line-height: 1.35;
}

@media (max-width: 1180px) {
  .brickdesign-workbench.brickdesign-studio {
    height: auto;
    max-height: none;
  }

  .brickdesign-studio__layout {
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-rows: minmax(680px, 75svh) auto;
  }

  .brickdesign-studio__settings {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(60, 67, 88, 0.14);
    border-left: 0;
  }

  .brickdesign-studio__settings-scroll {
    display: grid;
    height: auto;
    grid-template-columns: repeat(2, 1fr);
  }

  .brickdesign-studio__advanced-toggle {
    align-self: start;
  }
}

@media (max-width: 760px) {
  .brickdesign-studio__topbar,
  .brickdesign-studio__canvas-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .brickdesign-studio__engine-state > span:nth-child(2),
  .brickdesign-studio__engine-state > span:nth-child(3) {
    display: none;
  }

  .brickdesign-studio__layout {
    display: flex;
    flex-direction: column;
  }

  .brickdesign-studio__prompt-panel {
    min-height: 620px;
    border-right: 0;
    border-bottom: 1px solid rgba(60, 67, 88, 0.14);
  }

  .brickdesign-studio__canvas {
    min-height: 580px;
  }

  .brickdesign-studio__settings-scroll {
    grid-template-columns: 1fr;
  }

  .brickdesign-studio__canvas-badges span:nth-child(2) {
    display: none;
  }

  .brickdesign-studio__resultbar {
    grid-template-columns: repeat(3, 1fr);
  }
}

.desktop-nav__link--pro small {
  padding: 3px 5px 2px;
  border: 1px solid rgba(127, 211, 241, 0.32);
  border-radius: 999px;
  background: rgba(102, 190, 232, 0.12);
  color: #aeeaff;
  font-size: 0.42rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.landing-brickdesign {
  padding: clamp(70px, 10vw, 132px) 0;
  background:
    radial-gradient(circle at 9% 14%, rgba(101, 181, 228, 0.14), transparent 28rem),
    radial-gradient(circle at 92% 88%, rgba(119, 89, 195, 0.13), transparent 30rem),
    #f2f4f8;
}

.landing-brickdesign__panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(520px, 1.28fr);
  align-items: center;
  gap: clamp(35px, 6vw, 90px);
}

.landing-brickdesign__copy h2 {
  max-width: 560px;
  margin: 15px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.8vw, 4.9rem);
  font-weight: 420;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.landing-brickdesign__copy > p:not(.landing-label) {
  max-width: 530px;
  margin: 0 0 27px;
  color: var(--muted);
  font-size: clamp(0.79rem, 1.25vw, 0.96rem);
  line-height: 1.72;
}

.landing-brickdesign__visual {
  display: grid;
  min-height: 470px;
  overflow: hidden;
  grid-template-columns: 63px minmax(0, 1fr) 116px;
  grid-template-rows: 48px minmax(0, 1fr);
  border: 1px solid rgba(64, 72, 96, 0.18);
  border-radius: 25px;
  background: rgba(241, 244, 248, 0.84);
  box-shadow:
    0 32px 85px rgba(44, 52, 75, 0.15),
    inset 0 1px rgba(255, 255, 255, 0.9);
  transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
  backdrop-filter: blur(18px);
}

.landing-brickdesign__visual > header {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border-bottom: 1px solid rgba(62, 69, 90, 0.14);
  background: rgba(255, 255, 255, 0.52);
  color: #4e5360;
  font-size: 0.49rem;
  font-weight: 850;
  letter-spacing: 0.07em;
}

.landing-brickdesign__visual > header b {
  margin-right: auto;
  padding: 3px 5px;
  border-radius: 999px;
  background: linear-gradient(130deg, #7055c2, #3d94d3);
  color: #fff;
  font-size: 0.38rem;
}

.landing-brickdesign__visual > header i {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(76, 83, 105, 0.08);
}

.landing-brickdesign__visual > aside {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 13px 10px;
  border-right: 1px solid rgba(62, 69, 90, 0.13);
  background: rgba(246, 248, 251, 0.7);
}

.landing-brickdesign__visual > aside span {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 1px solid rgba(90, 75, 169, 0.17);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.55);
  color: #6552b2;
  font-family: var(--font-mono);
  font-size: 0.47rem;
}

.landing-brickdesign__visual > figure {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) 29px;
  margin: 0;
  background: #e7ebf1;
}

.landing-brickdesign__visual > figure svg {
  width: 100%;
  height: 100%;
}

.landing-brickdesign__visual > figure defs + rect {
  opacity: 0.8;
}

#landing-design-grid path {
  fill: none;
  stroke: rgba(64, 73, 97, 0.09);
  stroke-width: 0.7;
}

#landing-design-bricks path {
  fill: none;
  stroke: rgba(62, 69, 87, 0.23);
  stroke-width: 0.8;
}

.landing-brickdesign__wall {
  fill: #faf9f8;
  stroke: rgba(50, 57, 75, 0.45);
}

.landing-brickdesign__opening {
  fill: #dce2e9;
  stroke: rgba(55, 64, 86, 0.6);
  stroke-dasharray: 5 3;
}

.landing-brickdesign__tree {
  fill: rgba(99, 79, 184, 0.07);
  stroke: #5947ae;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.landing-brickdesign__selection {
  fill: none;
  stroke: #2086c3;
  stroke-dasharray: 5 4;
}

.landing-brickdesign__dimension {
  fill: none;
  stroke: rgba(64, 72, 94, 0.7);
}

.landing-brickdesign__visual text {
  fill: #535c70;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 720;
}

.landing-brickdesign__visual figcaption {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  background: #323742;
  color: rgba(241, 244, 250, 0.7);
  font-family: var(--font-mono);
  font-size: 0.38rem;
}

.landing-brickdesign__visual figcaption i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #70cdc4;
  box-shadow: 0 0 7px #70cdc4;
}

.landing-brickdesign__visual figcaption b {
  margin-left: auto;
  color: #7fd8ce;
  font-size: 0.36rem;
}

.landing-brickdesign__visual > section {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 13px 9px;
  border-left: 1px solid rgba(62, 69, 90, 0.13);
  background: rgba(246, 248, 251, 0.7);
}

.landing-brickdesign__visual > section span {
  color: #535865;
  font-size: 0.47rem;
  font-weight: 800;
}

.landing-brickdesign__visual > section i {
  height: 29px;
  border: 1px solid rgba(61, 68, 89, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
}

@media (max-width: 900px) {
  .landing-brickdesign__panel {
    grid-template-columns: 1fr;
  }

  .landing-brickdesign__visual {
    min-height: 420px;
    transform: none;
  }
}

@media (max-width: 620px) {
  .landing-brickdesign__visual {
    min-height: 330px;
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .landing-brickdesign__visual > aside {
    padding-inline: 6px;
  }

  .landing-brickdesign__visual > aside span {
    width: 31px;
    height: 31px;
  }

  .landing-brickdesign__visual > section {
    display: none;
  }
}

.brickdesign-page.container {
  width: min(calc(100% - 28px), 1840px);
  max-width: none;
  padding-top: 14px;
}

.brickdesign-workbench {
  position: relative;
  display: grid;
  height: max(780px, calc(100svh - 110px));
  max-height: 1160px;
  overflow: hidden;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border: 1px solid rgba(82, 87, 107, 0.18);
  border-radius: 26px;
  background:
    radial-gradient(ellipse 42% 58% at 0% 0%, rgba(105, 91, 190, 0.09), transparent 76%),
    radial-gradient(ellipse 45% 62% at 100% 8%, rgba(61, 151, 217, 0.1), transparent 77%),
    rgba(246, 248, 252, 0.86);
  box-shadow:
    0 34px 88px rgba(35, 43, 66, 0.14),
    0 8px 28px rgba(45, 73, 112, 0.08),
    inset 0 1px rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
}

.brickdesign-workbench::before {
  position: absolute;
  z-index: 20;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(112deg, transparent 2%, #3c4da4 14%, #67c8ef 30%, #8167df 48%, #3f8fd7 67%, #8b5bc8 83%, transparent 98%);
  background-size: 300% 300%;
  content: "";
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: gemstone-edge 11s linear infinite;
}

.brickdesign-topbar {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 13px;
  border-bottom: 1px solid rgba(57, 64, 83, 0.13);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.7), rgba(239, 243, 249, 0.52)),
    rgba(247, 249, 252, 0.78);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(22px) saturate(145%);
}

.brickdesign-module-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.brickdesign-module-identity__mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(73, 91, 164, 0.25);
  border-radius: 12px;
  background:
    radial-gradient(circle at 18% 0%, rgba(114, 203, 236, 0.2), transparent 70%),
    linear-gradient(135deg, rgba(105, 83, 191, 0.14), rgba(58, 142, 210, 0.13));
  box-shadow:
    0 8px 18px rgba(58, 76, 136, 0.1),
    inset 0 1px rgba(255, 255, 255, 0.82);
  color: #5a49ac;
}

.brickdesign-module-identity__mark svg {
  width: 19px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.brickdesign-module-identity > span:last-child,
.brickdesign-module-identity small,
.brickdesign-module-identity strong {
  display: block;
  min-width: 0;
}

.brickdesign-module-identity small {
  margin-bottom: 2px;
  color: #727989;
  font-size: 0.46rem;
  font-weight: 790;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

.brickdesign-module-identity strong {
  overflow: hidden;
  color: #30343e;
  font-size: 0.78rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brickdesign-module-identity em {
  display: inline-block;
  margin-left: 5px;
  padding: 3px 5px;
  border-radius: 999px;
  background: linear-gradient(125deg, #7457c6, #3f96d6);
  color: #fff;
  font-style: normal;
  font-size: 0.4rem;
  letter-spacing: 0.09em;
  vertical-align: 1px;
}

.brickdesign-topbar__actions,
.brickdesign-phase-chip,
.brickdesign-optimize-button {
  display: flex;
  align-items: center;
}

.brickdesign-topbar__actions {
  flex: 0 0 auto;
  gap: 10px;
}

.brickdesign-phase-chip {
  min-height: 30px;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(42, 139, 133, 0.22);
  border-radius: 999px;
  background: rgba(48, 157, 150, 0.07);
  color: #247d78;
  font-size: 0.54rem;
  font-weight: 820;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.brickdesign-phase-chip i,
.brickdesign-phase-note i,
.brickdesign-statusbar__health i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentcolor;
  box-shadow: 0 0 8px currentcolor;
}

.brickdesign-optimize-button {
  min-height: 43px;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid rgba(86, 74, 144, 0.15);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(116, 91, 192, 0.08), rgba(62, 146, 211, 0.08)),
    rgba(255, 255, 255, 0.58);
  color: #777b8b;
  cursor: not-allowed;
  text-align: left;
}

.brickdesign-optimize-button svg {
  width: 18px;
  fill: none;
  stroke: #7762bf;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.brickdesign-optimize-button span,
.brickdesign-optimize-button small {
  display: block;
}

.brickdesign-optimize-button span {
  color: #515563;
  font-size: 0.63rem;
  font-weight: 820;
}

.brickdesign-optimize-button small {
  font-size: 0.46rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brickdesign-toolbar {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 72px;
  grid-template-columns: auto minmax(410px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(49, 57, 76, 0.15);
  background:
    linear-gradient(180deg, rgba(236, 239, 245, 0.88), rgba(225, 230, 238, 0.75)),
    rgba(232, 236, 243, 0.82);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.96),
    0 6px 20px rgba(38, 47, 68, 0.07);
  backdrop-filter: blur(24px) saturate(120%);
}

.brickdesign-toolbar__history,
.brickdesign-toolbar__tools,
.brickdesign-toolbar__exact,
.brickdesign-toolbar__view {
  display: flex;
  align-items: center;
}

.brickdesign-toolbar__history,
.brickdesign-toolbar__view {
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(53, 62, 82, 0.13);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.78);
}

.brickdesign-toolbar button {
  border: 0;
  color: #464c59;
  cursor: pointer;
}

.brickdesign-toolbar button:disabled {
  cursor: default;
  opacity: 0.36;
}

.brickdesign-toolbar__history button,
.brickdesign-toolbar__view button {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  border-radius: 9px;
  background: transparent;
}

.brickdesign-toolbar__history button:not(:disabled):hover,
.brickdesign-toolbar__view button:hover {
  background: rgba(91, 82, 156, 0.09);
  color: #604db3;
}

.brickdesign-toolbar__history svg {
  width: 17px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.brickdesign-toolbar__tools {
  min-width: 0;
  justify-content: center;
  gap: 2px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: none;
}

.brickdesign-toolbar__tools::-webkit-scrollbar {
  display: none;
}

.brickdesign-toolbar__tools button {
  display: grid;
  min-width: 49px;
  min-height: 53px;
  flex: 0 0 auto;
  grid-template-rows: 28px auto;
  place-items: center;
  gap: 2px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
}

.brickdesign-toolbar__tools button:hover {
  border-color: rgba(69, 79, 117, 0.1);
  background: rgba(255, 255, 255, 0.56);
}

.brickdesign-toolbar__tools button.is-active {
  border-color: rgba(90, 77, 171, 0.25);
  background:
    linear-gradient(145deg, rgba(117, 91, 202, 0.12), rgba(66, 157, 217, 0.1)),
    rgba(255, 255, 255, 0.7);
  box-shadow:
    0 5px 13px rgba(59, 69, 109, 0.09),
    inset 0 1px rgba(255, 255, 255, 0.9);
  color: #5543a7;
}

.brickdesign-toolbar__tools svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.brickdesign-toolbar__tools span {
  font-size: 0.46rem;
  font-weight: 780;
  white-space: nowrap;
}

.brickdesign-toolbar__exact {
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(54, 63, 83, 0.13);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
}

.brickdesign-toolbar__exact label {
  display: flex;
  height: 33px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(58, 64, 82, 0.15);
  border-radius: 8px;
  background: rgba(250, 251, 253, 0.85);
}

.brickdesign-toolbar__exact label:focus-within {
  border-color: rgba(82, 78, 182, 0.48);
  box-shadow: 0 0 0 2px rgba(82, 114, 201, 0.09);
}

.brickdesign-toolbar__exact label span {
  display: grid;
  width: 24px;
  height: 100%;
  place-items: center;
  border-right: 1px solid rgba(58, 64, 82, 0.11);
  color: #6957b2;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 850;
}

.brickdesign-toolbar__exact input {
  width: 53px;
  height: 100%;
  padding: 0 7px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #30343d;
  font-family: var(--font-mono);
  font-size: 0.59rem;
  font-weight: 720;
}

.brickdesign-toolbar__length input {
  width: 66px;
}

.brickdesign-toolbar__angle input {
  width: 46px;
}

.brickdesign-toolbar__apply {
  height: 33px;
  padding: 0 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6753bb, #3d8fd0) !important;
  box-shadow: 0 5px 13px rgba(66, 80, 154, 0.18);
  color: #fff !important;
  font-size: 0.51rem;
  font-weight: 820;
}

.brickdesign-toolbar__zoom {
  width: 52px !important;
  font-family: var(--font-mono);
  font-size: 0.53rem;
  font-weight: 720;
}

.brickdesign-grid {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(300px, 0.88fr) minmax(590px, 2.25fr) minmax(290px, 0.82fr);
}

.brickdesign-sidebar,
.brickdesign-canvas-panel,
.brickdesign-rightbar {
  min-width: 0;
  min-height: 0;
}

.brickdesign-sidebar {
  display: grid;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr);
  border-right: 1px solid rgba(54, 61, 81, 0.14);
  background:
    radial-gradient(circle at 0 0, rgba(117, 94, 196, 0.08), transparent 18rem),
    rgba(246, 248, 251, 0.8);
}

.brickdesign-sidebar__heading {
  min-height: 66px;
  padding: 13px 17px;
  border-bottom: 1px solid rgba(55, 62, 80, 0.1);
  background: rgba(255, 255, 255, 0.36);
}

.brickdesign-sidebar__heading .panel-heading__title h2 {
  font-size: 1rem;
}

.brickdesign-sidebar__scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(91, 83, 135, 0.25) transparent;
  scrollbar-width: thin;
}

.brickdesign-section {
  border-bottom: 1px solid rgba(56, 62, 80, 0.11);
}

.brickdesign-section > summary {
  display: grid;
  min-height: 63px;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  cursor: pointer;
  list-style: none;
  transition: background 150ms ease;
}

.brickdesign-section > summary::-webkit-details-marker {
  display: none;
}

.brickdesign-section > summary:hover {
  background: rgba(255, 255, 255, 0.54);
}

.brickdesign-section > summary > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(99, 77, 178, 0.22);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(109, 88, 190, 0.09), rgba(65, 151, 213, 0.08));
  color: #6653b4;
  font-family: var(--font-mono);
  font-size: 0.49rem;
  font-weight: 820;
}

.brickdesign-section > summary strong,
.brickdesign-section > summary small {
  display: block;
}

.brickdesign-section > summary strong {
  color: #333741;
  font-size: 0.68rem;
  font-weight: 820;
}

.brickdesign-section > summary small {
  overflow: hidden;
  margin-top: 2px;
  color: #818591;
  font-size: 0.48rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brickdesign-section > summary > b {
  display: grid;
  min-width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 8px;
  background: rgba(77, 91, 145, 0.08);
  color: #636a7d;
  font-family: var(--font-mono);
  font-size: 0.48rem;
}

.brickdesign-section[open] > summary {
  background: rgba(255, 255, 255, 0.42);
}

.brickdesign-section__body {
  padding: 3px 15px 17px;
}

.brickdesign-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.brickdesign-sidebar .field__label {
  margin-bottom: 4px;
  font-size: 0.53rem;
}

.brickdesign-sidebar .field__control {
  height: 39px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.76);
}

.brickdesign-sidebar .field__control input {
  padding-inline: 8px;
  font-size: 0.69rem;
}

.brickdesign-sidebar .field__control select {
  padding-inline: 8px;
  font-size: 0.55rem;
}

.brickdesign-sidebar .field__unit {
  width: 34px;
  font-size: 0.47rem;
}

.brickdesign-opening-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 9px;
}

.brickdesign-opening-actions button {
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid rgba(87, 76, 146, 0.14);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(108, 85, 187, 0.07), rgba(64, 146, 207, 0.07)),
    rgba(255, 255, 255, 0.62);
  color: #555b6c;
  cursor: pointer;
  font-size: 0.52rem;
  font-weight: 770;
  text-align: left;
}

.brickdesign-opening-actions button:hover {
  border-color: rgba(91, 74, 178, 0.28);
  color: #5948aa;
}

.brickdesign-opening-list {
  display: grid;
  gap: 8px;
}

.brickdesign-opening-card {
  padding: 9px;
  border: 1px solid rgba(64, 72, 94, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
}

.brickdesign-opening-card.is-invalid {
  border-color: rgba(188, 73, 96, 0.38);
  background: rgba(188, 73, 96, 0.045);
}

.brickdesign-opening-card header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}

.brickdesign-opening-card header input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #363a44;
  font-size: 0.61rem;
  font-weight: 820;
}

.brickdesign-opening-card header button {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #9b7180;
  cursor: pointer;
}

.brickdesign-opening-card header button:hover {
  background: rgba(188, 73, 96, 0.09);
  color: var(--error);
}

.brickdesign-opening-card > label {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 6px;
}

.brickdesign-opening-card > label span,
.brickdesign-opening-card__grid label > span {
  color: #777c89;
  font-size: 0.45rem;
  font-weight: 780;
}

.brickdesign-opening-card select,
.brickdesign-opening-card__grid input {
  min-width: 0;
  height: 27px;
  border: 1px solid rgba(62, 69, 89, 0.13);
  border-radius: 7px;
  outline: 0;
  background: rgba(250, 251, 253, 0.84);
  color: #454a56;
  font-size: 0.5rem;
}

.brickdesign-opening-card__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  margin-top: 7px;
}

.brickdesign-opening-card__grid label {
  display: grid;
  grid-template-columns: 13px 1fr 18px;
  align-items: center;
  gap: 3px;
}

.brickdesign-opening-card__grid input {
  width: 100%;
  padding: 0 5px;
  font-family: var(--font-mono);
}

.brickdesign-opening-card__grid small {
  color: #9195a0;
  font-family: var(--font-mono);
  font-size: 0.39rem;
}

.brickdesign-opening-card__error {
  display: block;
  margin-top: 7px;
  color: var(--error);
  font-size: 0.45rem;
  font-weight: 700;
}

.brickdesign-svg-import {
  display: grid;
  min-height: 93px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-content: center;
  gap: 2px 10px;
  padding: 12px;
  border: 1px dashed rgba(91, 73, 171, 0.36);
  border-radius: 14px;
  background:
    radial-gradient(circle at 0 100%, rgba(109, 88, 194, 0.09), transparent 8rem),
    rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.brickdesign-svg-import:hover {
  border-color: rgba(69, 83, 181, 0.57);
  background-color: rgba(255, 255, 255, 0.82);
}

.brickdesign-svg-import__icon {
  display: grid;
  width: 42px;
  height: 42px;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #6a52bd, #3f94d3);
  box-shadow: 0 8px 18px rgba(72, 74, 158, 0.18);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.51rem;
  font-weight: 850;
}

.brickdesign-svg-import strong {
  align-self: end;
  color: #3e424d;
  font-size: 0.6rem;
}

.brickdesign-svg-import small {
  align-self: start;
  color: #7c818e;
  font-size: 0.45rem;
  line-height: 1.35;
}

.brickdesign-svg-import input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}

.brickdesign-library-label {
  margin: 13px 0 7px;
  color: #747987;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brickdesign-template-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.brickdesign-template-grid button {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 7px 4px 6px;
  border: 1px solid rgba(58, 67, 90, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
  color: #555a68;
  cursor: pointer;
}

.brickdesign-template-grid button:hover {
  border-color: rgba(92, 75, 180, 0.3);
  color: #5d49ae;
}

.brickdesign-template-grid svg {
  width: 100%;
  max-height: 45px;
  fill: rgba(103, 84, 182, 0.045);
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.brickdesign-template-grid span {
  overflow: hidden;
  font-size: 0.45rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brickdesign-phase-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 11px 0 0;
  padding: 9px;
  border-left: 2px solid rgba(51, 145, 138, 0.33);
  border-radius: 0 8px 8px 0;
  background: rgba(51, 145, 138, 0.055);
  color: #667579;
  font-size: 0.45rem;
  line-height: 1.45;
}

.brickdesign-phase-note i {
  margin-top: 3px;
  color: #2c918a;
}

.brickdesign-empty-note {
  margin: 4px 0;
  padding: 11px;
  border: 1px dashed rgba(65, 72, 92, 0.16);
  border-radius: 10px;
  color: #878b96;
  font-size: 0.5rem;
  line-height: 1.45;
  text-align: center;
}

.brickdesign-canvas-panel {
  display: grid;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr);
  background: #e9edf3;
}

.brickdesign-canvas-header {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 15px;
  border-bottom: 1px solid rgba(52, 60, 80, 0.13);
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.71), rgba(237, 241, 247, 0.57)),
    rgba(246, 248, 251, 0.78);
  backdrop-filter: blur(18px);
}

.brickdesign-canvas-header small,
.brickdesign-canvas-header h2 {
  display: block;
  margin: 0;
}

.brickdesign-canvas-header > div > small {
  margin-bottom: 2px;
  color: #6a56b8;
  font-size: 0.48rem;
  font-weight: 840;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.brickdesign-canvas-header h2 {
  color: #30343d;
  font-size: 0.87rem;
  font-weight: 680;
}

.brickdesign-flow {
  display: flex;
  align-items: center;
  gap: 17px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brickdesign-flow li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a1a5ae;
  font-size: 0.47rem;
  font-weight: 760;
}

.brickdesign-flow li + li::before {
  position: absolute;
  top: 50%;
  right: calc(100% + 5px);
  width: 7px;
  height: 1px;
  background: rgba(71, 78, 97, 0.22);
  content: "";
}

.brickdesign-flow li span {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid rgba(74, 81, 100, 0.15);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.48);
  font-family: var(--font-mono);
  font-size: 0.43rem;
}

.brickdesign-flow li.is-active {
  color: #5948aa;
}

.brickdesign-flow li.is-active span {
  border-color: rgba(91, 72, 174, 0.3);
  background: linear-gradient(145deg, rgba(108, 85, 192, 0.13), rgba(58, 151, 211, 0.11));
  box-shadow: 0 4px 10px rgba(64, 75, 137, 0.09);
}

.brickdesign-canvas-wrap {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.68), transparent 31rem),
    linear-gradient(145deg, #e7ebf1, #dfe4eb);
}

.brickdesign-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: 0;
  touch-action: none;
  user-select: none;
}

.brickdesign-canvas:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(80, 85, 183, 0.35);
}

.brickdesign-canvas.is-tool-pan {
  cursor: grab;
}

.brickdesign-canvas.is-tool-pan:active {
  cursor: grabbing;
}

.brickdesign-canvas.is-tool-line,
.brickdesign-canvas.is-tool-pen,
.brickdesign-canvas.is-tool-polygon,
.brickdesign-canvas.is-tool-rectangle,
.brickdesign-canvas.is-tool-circle,
.brickdesign-canvas.is-tool-arc,
.brickdesign-canvas.is-tool-text {
  cursor: crosshair;
}

.brickdesign-sheet {
  fill: #f2f4f7;
}

.brickdesign-grid-field {
  opacity: 0.86;
  pointer-events: none;
}

.brickdesign-grid-minor,
.brickdesign-grid-major {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.brickdesign-grid-minor {
  stroke: rgba(73, 82, 103, 0.055);
  stroke-width: 0.55;
}

.brickdesign-grid-major {
  stroke: rgba(67, 78, 108, 0.115);
  stroke-width: 0.75;
}

.brickdesign-wall__shadow {
  fill: rgba(34, 42, 61, 0.17);
  filter: blur(11px);
  transform: translate(0, 8px);
}

.brickdesign-brick-base {
  fill: #fbfaf9;
}

.brickdesign-brick-joints {
  fill: none;
  stroke: rgba(74, 79, 92, 0.2);
}

.brickdesign-wall__face {
  filter: saturate(0.85);
}

.brickdesign-wall__outline {
  fill: none;
  stroke: rgba(48, 55, 74, 0.55);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.brickdesign-opening rect {
  fill: rgba(218, 224, 233, 0.92);
  stroke: rgba(55, 65, 92, 0.68);
  stroke-dasharray: 5 3;
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

.brickdesign-opening path {
  fill: none;
  stroke: rgba(75, 85, 111, 0.24);
  stroke-width: 0.75;
  vector-effect: non-scaling-stroke;
}

.brickdesign-opening text {
  fill: #596173;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  pointer-events: none;
}

.brickdesign-opening.is-hidden,
.brickdesign-entity.is-hidden {
  display: none;
}

.brickdesign-entity {
  cursor: pointer;
}

.brickdesign-entity.is-locked {
  cursor: not-allowed;
}

.brickdesign-contour,
.brickdesign-contour-text {
  vector-effect: non-scaling-stroke;
}

.brickdesign-contour {
  fill: none;
  stroke: #5443aa;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.brickdesign-contour--closed {
  fill: rgba(98, 79, 184, 0.075);
}

.brickdesign-entity:hover .brickdesign-contour {
  stroke: #287fbf;
  stroke-width: 2.4;
}

.brickdesign-entity.is-selected .brickdesign-contour,
.brickdesign-entity.is-selected .brickdesign-contour-text {
  filter: url(#brickdesign-selection-glow);
  stroke: #147dc2;
}

.brickdesign-contour-text {
  fill: rgba(97, 73, 174, 0.08);
  stroke: #5542a9;
  stroke-width: 0.8;
  font-family: var(--font-sans);
  font-weight: 820;
  letter-spacing: 0.02em;
  paint-order: stroke fill;
}

.brickdesign-imported-svg {
  pointer-events: visiblePainted;
}

.brickdesign-imported-line {
  stroke-width: 1.8;
}

.brickdesign-selection-box rect:first-child {
  fill: none;
  stroke: rgba(23, 125, 194, 0.9);
  stroke-dasharray: 4 3;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.brickdesign-selection-box rect:not(:first-child) {
  fill: #f7fbff;
  stroke: #147dc2;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.brickdesign-selection-box text {
  fill: #176eaa;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 750;
  paint-order: stroke;
  pointer-events: none;
  stroke: rgba(247, 250, 253, 0.96);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.brickdesign-draft,
.brickdesign-crosshair {
  fill: none;
  stroke: #168bc7;
  stroke-dasharray: 5 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.brickdesign-draft--guide {
  opacity: 0.35;
}

.brickdesign-crosshair {
  stroke-dasharray: none;
  stroke-width: 1;
}

.brickdesign-draft-measure {
  fill: #176da2;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 750;
  paint-order: stroke;
  stroke: rgba(246, 249, 252, 0.96);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.brickdesign-object-snap {
  fill: rgba(18, 142, 197, 0.1);
  stroke: #078dc8;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.brickdesign-wall-dimensions path {
  fill: none;
  stroke: rgba(69, 77, 100, 0.66);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.brickdesign-wall-dimensions text {
  fill: #535c70;
  font-family: var(--font-mono);
  font-weight: 720;
  paint-order: stroke;
  stroke: rgba(238, 242, 247, 0.95);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.brickdesign-canvas-tools {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(55, 63, 83, 0.16);
  border-radius: 12px;
  background: rgba(244, 247, 251, 0.77);
  box-shadow:
    0 8px 22px rgba(42, 51, 73, 0.13),
    inset 0 1px rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px) saturate(125%);
}

.brickdesign-canvas-tools button {
  display: flex;
  height: 30px;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #686f7f;
  cursor: pointer;
  font-size: 0.47rem;
  font-weight: 760;
}

.brickdesign-canvas-tools button:hover,
.brickdesign-canvas-tools button.is-active {
  background: rgba(91, 77, 171, 0.1);
  color: #5947aa;
}

.brickdesign-canvas-tools svg {
  width: 14px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

.brickdesign-empty-prompt {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(310px, calc(100% - 40px));
  justify-items: center;
  padding: 21px;
  border: 1px solid rgba(69, 77, 103, 0.14);
  border-radius: 19px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.77), rgba(239, 243, 249, 0.64)),
    rgba(246, 248, 252, 0.7);
  box-shadow:
    0 20px 48px rgba(48, 58, 83, 0.12),
    inset 0 1px rgba(255, 255, 255, 0.96);
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(18px);
}

.brickdesign-empty-prompt > span {
  display: grid;
  width: 45px;
  height: 45px;
  margin-bottom: 9px;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(107, 84, 190, 0.13), rgba(55, 151, 212, 0.13));
  color: #5f4db0;
}

.brickdesign-empty-prompt svg {
  width: 26px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.brickdesign-empty-prompt strong {
  color: #393d47;
  font-size: 0.73rem;
}

.brickdesign-empty-prompt p {
  margin: 6px 0 0;
  color: #777d89;
  font-size: 0.52rem;
  line-height: 1.5;
}

.brickdesign-axis {
  position: absolute;
  z-index: 2;
  right: 15px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  color: #6b7180;
  font-family: var(--font-mono);
  font-size: 0.48rem;
  font-style: normal;
  pointer-events: none;
}

.brickdesign-axis::before,
.brickdesign-axis::after {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: currentcolor;
  content: "";
}

.brickdesign-axis::before {
  width: 28px;
  height: 1px;
}

.brickdesign-axis::after {
  width: 1px;
  height: 28px;
}

.brickdesign-axis i {
  position: absolute;
  top: 0;
  left: 5px;
  font-style: normal;
}

.brickdesign-axis span {
  position: absolute;
  right: 0;
  bottom: 4px;
}

.brickdesign-rightbar {
  display: grid;
  overflow: hidden;
  grid-template-rows: minmax(335px, 1.05fr) minmax(260px, 0.95fr);
  border-left: 1px solid rgba(54, 61, 81, 0.14);
  background:
    radial-gradient(circle at 100% 0, rgba(66, 151, 215, 0.08), transparent 17rem),
    rgba(246, 248, 251, 0.8);
}

.brickdesign-inspector,
.brickdesign-layers {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.brickdesign-inspector {
  border-bottom: 1px solid rgba(54, 61, 81, 0.13);
}

.brickdesign-panel-title {
  display: flex;
  min-height: 57px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(56, 63, 83, 0.1);
  background: rgba(255, 255, 255, 0.35);
}

.brickdesign-panel-title small,
.brickdesign-panel-title h3 {
  display: block;
  margin: 0;
}

.brickdesign-panel-title small {
  margin-bottom: 2px;
  color: #745ebc;
  font-size: 0.43rem;
  font-weight: 820;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.brickdesign-panel-title h3 {
  color: #353944;
  font-size: 0.75rem;
}

.brickdesign-panel-title > span {
  display: grid;
  min-width: 29px;
  height: 25px;
  place-items: center;
  padding: 0 6px;
  border: 1px solid rgba(66, 74, 96, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  color: #717684;
  font-family: var(--font-mono);
  font-size: 0.47rem;
}

.brickdesign-inspector__body,
.brickdesign-layers__body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(91, 83, 135, 0.25) transparent;
  scrollbar-width: thin;
}

.brickdesign-inspector__empty {
  display: grid;
  min-height: 180px;
  align-content: center;
  justify-items: center;
  padding: 20px;
  color: #888d99;
  text-align: center;
}

.brickdesign-inspector__empty > span {
  display: grid;
  width: 39px;
  height: 39px;
  margin-bottom: 9px;
  place-items: center;
  border-radius: 12px;
  background: rgba(99, 82, 177, 0.08);
  color: #6856b0;
  font-size: 1rem;
}

.brickdesign-inspector__empty strong {
  color: #555a66;
  font-size: 0.62rem;
}

.brickdesign-inspector__empty p {
  max-width: 220px;
  margin: 5px 0 0;
  font-size: 0.47rem;
  line-height: 1.5;
}

.brickdesign-properties {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.brickdesign-property-name,
.brickdesign-property-number {
  display: grid;
  align-items: center;
  gap: 5px;
}

.brickdesign-property-name {
  grid-template-columns: 55px minmax(0, 1fr);
}

.brickdesign-property-name span,
.brickdesign-property-number > span,
.brickdesign-property-type span {
  color: #777c89;
  font-size: 0.47rem;
  font-weight: 760;
}

.brickdesign-property-name input,
.brickdesign-property-name textarea,
.brickdesign-property-number input {
  min-width: 0;
  border: 1px solid rgba(58, 66, 87, 0.14);
  border-radius: 8px;
  outline: 0;
  background: rgba(255, 255, 255, 0.71);
  color: #3e424d;
  font-size: 0.54rem;
}

.brickdesign-property-name input,
.brickdesign-property-number input {
  height: 31px;
  padding: 0 7px;
}

.brickdesign-property-name textarea {
  min-height: 56px;
  padding: 7px;
  resize: vertical;
}

.brickdesign-property-name input:focus,
.brickdesign-property-name textarea:focus,
.brickdesign-property-number input:focus {
  border-color: rgba(82, 77, 179, 0.44);
  box-shadow: 0 0 0 2px rgba(82, 102, 190, 0.08);
}

.brickdesign-property-type,
.brickdesign-property-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
}

.brickdesign-property-type {
  min-height: 30px;
  padding: 0 7px;
  border-radius: 8px;
  background: rgba(73, 85, 131, 0.055);
}

.brickdesign-property-type b,
.brickdesign-property-summary b {
  color: #4e5260;
  font-size: 0.49rem;
}

.brickdesign-property-switches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.brickdesign-property-switches button {
  height: 31px;
  border: 1px solid rgba(58, 66, 87, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  color: #858994;
  cursor: pointer;
  font-size: 0.47rem;
  font-weight: 760;
}

.brickdesign-property-switches button.is-active {
  border-color: rgba(83, 72, 165, 0.22);
  background: linear-gradient(145deg, rgba(103, 83, 183, 0.1), rgba(55, 150, 210, 0.08));
  color: #5c4aac;
}

.brickdesign-properties fieldset {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 9px;
  border: 1px solid rgba(58, 66, 87, 0.11);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.38);
}

.brickdesign-properties legend {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  color: #6a56b2;
  font-size: 0.45rem;
  font-weight: 820;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.brickdesign-properties legend button {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: rgba(72, 80, 106, 0.08);
  color: #8a8e9a;
  cursor: pointer;
}

.brickdesign-properties legend button.is-active {
  background: rgba(95, 75, 177, 0.12);
  color: #5f4cad;
}

.brickdesign-property-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.brickdesign-property-number {
  grid-template-columns: minmax(28px, auto) minmax(0, 1fr) 22px;
}

.brickdesign-property-number input {
  width: 100%;
  font-family: var(--font-mono);
}

.brickdesign-property-number small {
  color: #90949f;
  font-family: var(--font-mono);
  font-size: 0.42rem;
}

.brickdesign-property-summary {
  padding: 9px;
  border: 1px solid rgba(58, 66, 87, 0.11);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.38);
}

.brickdesign-property-summary span {
  color: #797e8a;
  font-size: 0.47rem;
}

.brickdesign-delete-object {
  height: 34px;
  border: 1px solid rgba(188, 73, 96, 0.17);
  border-radius: 9px;
  background: rgba(188, 73, 96, 0.055);
  color: #a2495e;
  cursor: pointer;
  font-size: 0.5rem;
  font-weight: 760;
}

.brickdesign-delete-object:hover {
  border-color: rgba(188, 73, 96, 0.32);
  background: rgba(188, 73, 96, 0.09);
}

.brickdesign-layers__body {
  padding: 8px;
}

.brickdesign-layer {
  display: grid;
  min-height: 42px;
  grid-template-columns: 28px minmax(0, 1fr) 24px 24px;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
}

.brickdesign-layer:hover {
  background: rgba(255, 255, 255, 0.58);
}

.brickdesign-layer.is-selected {
  border-color: rgba(88, 72, 171, 0.2);
  background: linear-gradient(135deg, rgba(104, 82, 185, 0.1), rgba(55, 147, 209, 0.08));
}

.brickdesign-layer.is-system {
  cursor: default;
}

.brickdesign-layer.is-opening {
  color: #637085;
}

.brickdesign-layer.is-hidden {
  opacity: 0.5;
}

.brickdesign-layer__kind {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(62, 70, 92, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.53);
  color: #6653b4;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 760;
}

.brickdesign-layer strong,
.brickdesign-layer small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brickdesign-layer strong {
  color: #444955;
  font-size: 0.54rem;
}

.brickdesign-layer small {
  margin-top: 2px;
  color: #8a8e99;
  font-size: 0.42rem;
}

.brickdesign-layer > button,
.brickdesign-layer__order button {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #a0a3ad;
  cursor: pointer;
  font-size: 0.48rem;
}

.brickdesign-layer > button:hover,
.brickdesign-layer__order button:hover,
.brickdesign-layer > button.is-active {
  background: rgba(91, 77, 169, 0.09);
  color: #6250ae;
}

.brickdesign-layer > button:disabled {
  cursor: default;
  opacity: 0.5;
}

.brickdesign-layer.is-design {
  grid-template-columns: 28px minmax(0, 1fr) 24px 24px;
}

.brickdesign-layer__order {
  display: none;
  grid-column: 2 / -1;
  justify-content: end;
  gap: 2px;
}

.brickdesign-layer.is-selected .brickdesign-layer__order {
  display: flex;
}

.brickdesign-layer-divider {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 4px 4px;
  color: #858995;
  font-size: 0.42rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brickdesign-layer-divider::before,
.brickdesign-layer-divider::after {
  height: 1px;
  flex: 1;
  background: rgba(61, 68, 88, 0.1);
  content: "";
}

.brickdesign-statusbar {
  display: grid;
  min-height: 36px;
  grid-template-columns: minmax(240px, 1fr) auto auto auto;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  background:
    radial-gradient(circle at 0 100%, rgba(81, 135, 196, 0.17), transparent 18rem),
    linear-gradient(115deg, rgba(42, 47, 59, 0.96), rgba(52, 53, 65, 0.94));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
  color: rgba(235, 239, 247, 0.75);
}

.brickdesign-statusbar > div {
  display: flex;
  min-height: 36px;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.brickdesign-statusbar__command {
  min-width: 0;
  gap: 8px;
  padding: 0 12px;
}

.brickdesign-statusbar__command > span {
  color: #88d8ef;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.brickdesign-statusbar__command p {
  overflow: hidden;
  margin: 0;
  font-size: 0.49rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brickdesign-statusbar__coordinates {
  gap: 12px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 0.45rem;
}

.brickdesign-statusbar__coordinates b {
  color: #fff;
  font-weight: 700;
}

.brickdesign-statusbar__toggles {
  padding: 0 5px;
}

.brickdesign-statusbar__toggles button {
  height: 25px;
  padding: 0 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(235, 239, 247, 0.54);
  cursor: pointer;
  font-size: 0.43rem;
  font-weight: 760;
}

.brickdesign-statusbar__toggles button.is-active {
  background: rgba(117, 201, 232, 0.1);
  color: #9ee3f4;
}

.brickdesign-statusbar__health {
  gap: 7px;
  padding: 0 12px;
  color: #7ed3c9;
  font-size: 0.45rem;
  font-weight: 760;
  white-space: nowrap;
}

.brickdesign-statusbar__health.has-issues {
  color: #f0a7b8;
}

@media (max-width: 1450px) {
  .brickdesign-page.container {
    width: calc(100% - 20px);
  }

  .brickdesign-grid {
    grid-template-columns: minmax(275px, 0.82fr) minmax(500px, 1.8fr) minmax(265px, 0.76fr);
  }

  .brickdesign-toolbar {
    grid-template-columns: auto minmax(360px, 1fr) auto auto;
  }

  .brickdesign-toolbar__tools button {
    min-width: 43px;
    padding-inline: 4px;
  }

  .brickdesign-toolbar__exact input {
    width: 45px;
  }

  .brickdesign-toolbar__length input {
    width: 55px;
  }
}

@media (max-width: 1180px) {
  .brickdesign-workbench {
    height: auto;
    max-height: none;
  }

  .brickdesign-toolbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .brickdesign-toolbar__exact {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
  }

  .brickdesign-grid {
    grid-template-columns: minmax(270px, 0.78fr) minmax(480px, 1.6fr);
    grid-template-rows: minmax(700px, calc(100svh - 225px)) minmax(420px, auto);
  }

  .brickdesign-rightbar {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 420px;
    border-top: 1px solid rgba(54, 61, 81, 0.14);
    border-left: 0;
  }

  .brickdesign-inspector {
    border-right: 1px solid rgba(54, 61, 81, 0.13);
    border-bottom: 0;
  }
}

@media (max-width: 820px) {
  .brickdesign-page.container {
    width: calc(100% - 16px);
    padding-top: 8px;
  }

  .brickdesign-workbench {
    border-radius: 20px;
  }

  .brickdesign-topbar {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
  }

  .brickdesign-topbar__actions {
    justify-content: space-between;
  }

  .brickdesign-toolbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .brickdesign-toolbar__tools {
    justify-content: flex-start;
  }

  .brickdesign-toolbar__tools span {
    display: none;
  }

  .brickdesign-toolbar__tools button {
    min-width: 38px;
    min-height: 40px;
    grid-template-rows: auto;
  }

  .brickdesign-grid {
    display: flex;
    flex-direction: column;
  }

  .brickdesign-canvas-panel {
    order: 1;
    min-height: 590px;
  }

  .brickdesign-sidebar {
    order: 2;
    min-height: 680px;
    border-top: 1px solid rgba(54, 61, 81, 0.14);
    border-right: 0;
  }

  .brickdesign-rightbar {
    order: 3;
    display: grid;
    min-height: 760px;
    grid-template-columns: 1fr;
    grid-template-rows: 380px 380px;
  }

  .brickdesign-inspector {
    border-right: 0;
    border-bottom: 1px solid rgba(54, 61, 81, 0.13);
  }

  .brickdesign-statusbar {
    grid-template-columns: 1fr auto;
  }

  .brickdesign-statusbar__coordinates,
  .brickdesign-statusbar__toggles {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .brickdesign-page.container {
    width: calc(100% - 10px);
  }

  .brickdesign-topbar__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .brickdesign-phase-chip {
    align-self: flex-start;
  }

  .brickdesign-optimize-button {
    justify-content: center;
  }

  .brickdesign-toolbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding-inline: 6px;
  }

  .brickdesign-toolbar__exact {
    overflow-x: auto;
    justify-content: flex-start;
  }

  .brickdesign-toolbar__length,
  .brickdesign-toolbar__angle {
    display: none !important;
  }

  .brickdesign-canvas-panel {
    min-height: 500px;
  }

  .brickdesign-canvas-header {
    min-height: 76px;
    align-items: flex-start;
    flex-direction: column;
  }

  .brickdesign-flow {
    gap: 12px;
  }

  .brickdesign-flow li {
    font-size: 0.42rem;
  }

  .brickdesign-canvas-tools button {
    padding-inline: 6px;
  }

  .brickdesign-canvas-tools button {
    font-size: 0;
  }

  .brickdesign-canvas-tools svg {
    width: 15px;
  }

  .brickdesign-field-grid {
    grid-template-columns: 1fr;
  }

  .brickdesign-field-grid .field--full {
    grid-column: auto;
  }

  .brickdesign-template-grid {
    grid-template-columns: repeat(3, minmax(70px, 1fr));
  }

  .brickdesign-statusbar__health {
    padding-inline: 8px;
  }
}

/* Brick Design Pro: conversational Design Core ------------------------------ */
.brickdesign-workbench.brickdesign-studio {
  height: max(850px, calc(100svh - 102px));
  max-height: 1240px;
}

.brickdesign-studio__layout {
  grid-template-columns: 350px minmax(520px, 1fr) 300px;
}

.brickdesign-chat {
  overflow: hidden;
  padding: 20px 16px 14px;
  background: #f8f9fc;
}

.brickdesign-chat__thread {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 15px;
  margin: 17px -4px 12px 0;
  padding: 2px 10px 8px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.brickdesign-chat__message {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.brickdesign-chat__message > span {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(74, 80, 100, 0.12);
  border-radius: 9px;
  background: #fff;
  color: #6b7180;
  font: 850 0.42rem/1 var(--font-mono);
}

.brickdesign-chat__message.is-assistant > span {
  border-color: rgba(92, 72, 170, 0.2);
  background: linear-gradient(145deg, #6852b9, #3c87b7);
  color: #fff;
}

.brickdesign-chat__message > div {
  min-width: 0;
  padding: 1px 0;
}

.brickdesign-chat__message.is-user > div {
  width: calc(100% - 39px);
  padding: 10px 12px;
  border: 1px solid rgba(70, 77, 98, 0.12);
  border-radius: 12px 12px 4px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(51, 59, 80, 0.045);
}

.brickdesign-chat__message small {
  display: block;
  margin-bottom: 4px;
  color: #8c839f;
  font: 800 0.41rem/1.3 var(--font-mono);
  letter-spacing: 0.075em;
}

.brickdesign-chat__message p {
  margin: 0;
  color: #5c6270;
  font-size: 0.62rem;
  line-height: 1.58;
}

.brickdesign-chat__message.is-assistant p {
  color: #686e7d;
}

.brickdesign-chat__message.is-thinking p {
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 4px;
}

.brickdesign-chat__message.is-thinking i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7965bd;
  animation: brickdesign-thinking 1s ease-in-out infinite;
}

.brickdesign-chat__message.is-thinking i:nth-child(2) { animation-delay: 140ms; }
.brickdesign-chat__message.is-thinking i:nth-child(3) { animation-delay: 280ms; }

@keyframes brickdesign-thinking {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

.brickdesign-chat__composer {
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(72, 78, 99, 0.2);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 9px 26px rgba(51, 58, 82, 0.08);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.brickdesign-chat__composer:focus-within {
  border-color: rgba(93, 72, 177, 0.48);
  box-shadow: 0 0 0 3px rgba(96, 72, 181, 0.08), 0 12px 30px rgba(51, 58, 82, 0.1);
}

.brickdesign-chat__composer textarea {
  width: 100%;
  min-height: 84px;
  resize: none;
  padding: 13px 14px 5px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #343844;
  font: 500 0.65rem/1.55 var(--font-sans);
}

.brickdesign-chat__composer textarea::placeholder {
  color: #9a9eaa;
}

.brickdesign-chat__composer footer {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  padding: 4px 7px 7px 13px;
}

.brickdesign-chat__composer footer > span {
  color: #9b9faa;
  font: 650 0.41rem/1 var(--font-mono);
}

.brickdesign-chat__composer button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: #5c49a7;
  box-shadow: 0 5px 13px rgba(73, 57, 145, 0.2);
  color: #fff;
  cursor: pointer;
  font: 700 1rem/1 var(--font-sans);
}

.brickdesign-chat__composer button:disabled {
  box-shadow: none;
  cursor: not-allowed;
  filter: grayscale(0.7);
  opacity: 0.38;
}

.brickdesign-chat__privacy {
  margin-top: 10px;
}

.brickdesign-studio__stage {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  background: #e4e8ee;
}

.brickdesign-studio__stage > .brickdesign-studio__canvas {
  min-height: 0;
}

.brickdesign-variants {
  padding: 11px 13px 13px;
  border-top: 1px solid rgba(57, 64, 84, 0.15);
  background: rgba(247, 249, 252, 0.96);
}

.brickdesign-variants > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.brickdesign-variants > header small,
.brickdesign-variants > header strong {
  display: block;
}

.brickdesign-variants > header small {
  color: #8d849f;
  font: 820 0.39rem/1.2 var(--font-mono);
  letter-spacing: 0.09em;
}

.brickdesign-variants > header strong {
  margin-top: 2px;
  color: #555b68;
  font-size: 0.56rem;
}

.brickdesign-variants > header b {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 8px;
  background: rgba(93, 72, 177, 0.1);
  color: #5c48aa;
  font: 800 0.5rem/1 var(--font-mono);
}

.brickdesign-variants__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.brickdesign-variant {
  display: grid;
  min-width: 0;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 7px;
  border: 1px solid rgba(70, 77, 98, 0.14);
  border-radius: 11px;
  background: #fff;
  color: #565c69;
  cursor: pointer;
  text-align: left;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.brickdesign-variant:hover {
  border-color: rgba(93, 72, 177, 0.34);
  transform: translateY(-1px);
}

.brickdesign-variant.is-active {
  border-color: rgba(91, 69, 176, 0.62);
  box-shadow: 0 0 0 2px rgba(91, 69, 176, 0.08), 0 7px 18px rgba(57, 51, 94, 0.09);
}

.brickdesign-variant__preview {
  width: 94px;
  height: 60px;
  overflow: hidden;
  border: 1px solid rgba(58, 64, 82, 0.12);
  border-radius: 7px;
  background: #d3c2af;
}

.brickdesign-variant__preview > rect:first-child {
  fill: #d3c2af;
}

.brickdesign-variant__preview .is-figure {
  stroke: rgba(35, 31, 29, 0.5);
  stroke-width: 0.45;
}

.brickdesign-variant > span,
.brickdesign-variant small,
.brickdesign-variant strong,
.brickdesign-variant em {
  display: block;
  min-width: 0;
}

.brickdesign-variant small {
  color: #8a809e;
  font: 800 0.36rem/1.2 var(--font-mono);
  letter-spacing: 0.06em;
}

.brickdesign-variant strong {
  margin-top: 3px;
  overflow: hidden;
  color: #424753;
  font-size: 0.55rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brickdesign-variant em {
  margin-top: 4px;
  color: #8c919d;
  font-size: 0.42rem;
  font-style: normal;
}

@media (max-width: 1380px) {
  .brickdesign-studio__layout {
    grid-template-columns: 320px minmax(500px, 1fr) 285px;
  }

  .brickdesign-variant {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .brickdesign-variant__preview {
    width: 72px;
    height: 52px;
  }
}

@media (max-width: 1180px) {
  .brickdesign-studio__layout {
    grid-template-columns: 310px minmax(0, 1fr);
    grid-template-rows: minmax(760px, 86svh) auto;
  }
}

@media (max-width: 760px) {
  .brickdesign-chat {
    min-height: 620px;
  }

  .brickdesign-studio__stage {
    min-height: 820px;
  }

  .brickdesign-variants__grid {
    grid-template-columns: 1fr;
  }

  .brickdesign-variant {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .brickdesign-variant__preview {
    width: 112px;
    height: 70px;
  }
}

.brickdesign-cut-schedule {
  margin: 0 18px 18px;
  border: 1px solid rgba(70, 60, 126, 0.16);
  border-radius: 14px;
  background: #fbfbfd;
  overflow: hidden;
}

.brickdesign-cut-schedule summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.brickdesign-cut-schedule summary span {
  display: grid;
  gap: 3px;
}

.brickdesign-cut-schedule summary small {
  color: var(--muted);
}

.brickdesign-cut-schedule summary b {
  color: #5844a9;
  white-space: nowrap;
}

.brickdesign-cut-schedule__table {
  max-height: 330px;
  overflow: auto;
  border-top: 1px solid rgba(70, 60, 126, 0.12);
  background: #fff;
  font-variant-numeric: tabular-nums;
}

.brickdesign-cut-schedule__table > div {
  display: grid;
  grid-template-columns: 0.8fr 0.55fr repeat(4, minmax(72px, 1fr));
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(70, 60, 126, 0.08);
}

.brickdesign-cut-schedule__table .is-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f4f2fb;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 720px) {
  .brickdesign-cut-schedule summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .brickdesign-cut-schedule__table {
    min-width: 660px;
  }
}

/* Brick Design CAD workflow v2 ------------------------------------------------ */

.material-symbols-outlined {
  display: inline-block;
  overflow: hidden;
  font-family: "Material Symbols Outlined", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-variation-settings: "FILL" 0, "wght" 440, "GRAD" 0, "opsz" 24;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.brickdesign-page.container {
  width: min(calc(100% - 22px), 1980px);
}

.brickdesign-workbench {
  height: max(860px, calc(100svh - 88px));
  max-height: none;
  border-radius: 24px;
}

.brickdesign-topbar {
  min-height: 68px;
  padding: 8px 12px;
}

.brickdesign-cad-workflow {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.brickdesign-cad-workflow ol {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brickdesign-cad-workflow li {
  position: relative;
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #9297a4;
  font-size: 0.49rem;
  font-weight: 790;
  white-space: nowrap;
}

.brickdesign-cad-workflow li span {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid rgba(69, 77, 96, 0.16);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.52);
  font-family: var(--font-mono);
  font-size: 0.43rem;
}

.brickdesign-cad-workflow li.is-active {
  border-color: rgba(55, 108, 190, 0.17);
  background: linear-gradient(135deg, rgba(72, 116, 201, 0.1), rgba(44, 153, 182, 0.07));
  color: #315ea6;
}

.brickdesign-cad-workflow li.is-active span {
  border-color: transparent;
  background: linear-gradient(145deg, #496dc7, #258eae);
  box-shadow: 0 5px 12px rgba(48, 91, 161, 0.2);
  color: #fff;
}

.brickdesign-cad-workflow li.is-complete {
  color: #2d897f;
}

.brickdesign-cad-workflow li.is-complete span {
  border-color: rgba(38, 139, 128, 0.2);
  background: rgba(40, 150, 136, 0.09);
}

.brickdesign-topbar__actions {
  gap: 7px;
}

.brickdesign-save-figure,
.brickdesign-edit-figure,
.brickdesign-sidebar-save {
  border: 0;
  cursor: pointer;
}

.brickdesign-save-figure {
  display: grid;
  min-width: 154px;
  min-height: 45px;
  grid-template-columns: 29px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 7px;
  padding: 6px 12px;
  border-radius: 13px;
  background: linear-gradient(135deg, #315fbd, #197f9d);
  box-shadow: 0 9px 20px rgba(37, 84, 154, 0.2), inset 0 1px rgba(255, 255, 255, 0.25);
  color: #fff;
  text-align: left;
}

.brickdesign-save-figure:disabled,
.brickdesign-sidebar-save:disabled {
  cursor: default;
  filter: grayscale(0.6);
  opacity: 0.42;
}

.brickdesign-save-figure > .material-symbols-outlined {
  grid-row: 1 / 3;
  font-size: 1.25rem;
}

.brickdesign-save-figure > span:not(.material-symbols-outlined),
.brickdesign-save-figure small {
  display: block;
}

.brickdesign-save-figure > span:not(.material-symbols-outlined) {
  align-self: end;
  font-size: 0.58rem;
  font-weight: 820;
}

.brickdesign-save-figure small {
  align-self: start;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.42rem;
}

.brickdesign-edit-figure {
  display: flex;
  min-height: 39px;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid rgba(57, 69, 98, 0.14);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.62);
  color: #505969;
  font-size: 0.5rem;
  font-weight: 780;
}

.brickdesign-edit-figure .material-symbols-outlined {
  color: #4e62af;
  font-size: 1rem;
}

.brickdesign-optimize-button > .material-symbols-outlined {
  color: #7762bf;
  font-size: 1.15rem;
}

.brickdesign-cad-ribbon {
  display: flex;
  min-height: 86px;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  padding: 5px 8px 0;
  scrollbar-width: thin;
}

.brickdesign-ribbon-group {
  display: grid;
  flex: 0 0 auto;
  grid-template-rows: minmax(57px, 1fr) 17px;
  padding: 0 8px;
  border-right: 1px solid rgba(49, 58, 77, 0.12);
}

.brickdesign-ribbon-group:first-child {
  padding-left: 0;
}

.brickdesign-ribbon-group:last-child {
  border-right: 0;
  padding-right: 0;
}

.brickdesign-ribbon-group__tools {
  display: flex;
  align-items: center;
  gap: 2px;
}

.brickdesign-ribbon-group__label {
  align-self: center;
  color: #858a95;
  font-size: 0.4rem;
  font-weight: 780;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.brickdesign-cad-tool {
  --tool-color: #536174;
  display: grid;
  min-width: 51px;
  min-height: 54px;
  grid-template-rows: 29px auto;
  place-items: center;
  gap: 1px;
  padding: 3px 6px;
  border: 1px solid transparent !important;
  border-radius: 10px;
  background: transparent;
  color: #555d6a !important;
}

.brickdesign-cad-tool .material-symbols-outlined {
  color: var(--tool-color);
  font-size: 1.35rem;
  transition: transform 140ms ease;
}

.brickdesign-cad-tool > span:not(.material-symbols-outlined) {
  font-size: 0.43rem;
  font-weight: 760;
  white-space: nowrap;
}

.brickdesign-cad-tool:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--tool-color) 20%, transparent) !important;
  background: rgba(255, 255, 255, 0.62);
}

.brickdesign-cad-tool:hover:not(:disabled) .material-symbols-outlined {
  transform: translateY(-1px);
}

.brickdesign-cad-tool.is-active {
  border-color: color-mix(in srgb, var(--tool-color) 28%, transparent) !important;
  background: color-mix(in srgb, var(--tool-color) 10%, rgba(255, 255, 255, 0.78));
  box-shadow: inset 0 -2px var(--tool-color), 0 4px 10px rgba(48, 58, 82, 0.07);
  color: #2f3743 !important;
}

.brickdesign-cad-tool[data-tool="select"] { --tool-color: #3f5d93; }
.brickdesign-cad-tool[data-tool="pan"] { --tool-color: #087b91; }
.brickdesign-cad-tool[data-tool="line"] { --tool-color: #2563eb; }
.brickdesign-cad-tool[data-tool="pen"] { --tool-color: #7c3aed; }
.brickdesign-cad-tool[data-tool="polygon"] { --tool-color: #0f766e; }
.brickdesign-cad-tool[data-tool="rectangle"] { --tool-color: #c76b0b; }
.brickdesign-cad-tool[data-tool="circle"] { --tool-color: #c52e75; }
.brickdesign-cad-tool[data-tool="arc"] { --tool-color: #0785a1; }
.brickdesign-cad-tool[data-tool="text"] { --tool-color: #475569; }

.brickdesign-cad-tool.is-compact {
  min-width: 44px;
  padding-inline: 4px;
}

.brickdesign-cad-tool.is-zoom {
  min-width: 56px;
}

.brickdesign-ribbon-group--history .brickdesign-cad-tool {
  --tool-color: #596477;
}

.brickdesign-ribbon-group--precision {
  min-width: 174px;
}

.brickdesign-ribbon-group--precision .brickdesign-toolbar__exact {
  align-self: center;
  padding: 4px;
  border-radius: 10px;
}

.brickdesign-ribbon-group--precision .brickdesign-toolbar__exact label {
  height: 31px;
}

.brickdesign-ribbon-group--precision .brickdesign-toolbar__exact input {
  width: 45px;
}

.brickdesign-ribbon-group--precision .brickdesign-toolbar__apply {
  display: grid;
  width: 31px;
  padding: 0;
  place-items: center;
}

.brickdesign-ribbon-group--precision .brickdesign-toolbar__apply .material-symbols-outlined {
  font-size: 1rem;
}

.brickdesign-grid {
  grid-template-columns: minmax(230px, 260px) minmax(650px, 1fr) minmax(235px, 270px);
}

.brickdesign-sidebar,
.brickdesign-rightbar {
  background:
    radial-gradient(circle at 0 0, rgba(90, 117, 181, 0.055), transparent 18rem),
    rgba(247, 249, 252, 0.9);
}

.brickdesign-cad-intro {
  display: grid;
  grid-template-columns: 35px 1fr;
  align-items: center;
  gap: 10px;
  margin: 12px;
  padding: 11px;
  border: 1px solid rgba(48, 96, 167, 0.14);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(51, 101, 183, 0.08), rgba(24, 138, 157, 0.055));
}

.brickdesign-cad-intro > .material-symbols-outlined {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.65);
  color: #315fb0;
  font-size: 1.15rem;
}

.brickdesign-cad-intro strong,
.brickdesign-cad-intro p {
  display: block;
  margin: 0;
}

.brickdesign-cad-intro strong {
  color: #354052;
  font-size: 0.57rem;
}

.brickdesign-cad-intro p {
  margin-top: 3px;
  color: #737c8a;
  font-size: 0.44rem;
  line-height: 1.45;
}

.brickdesign-svg-import--cad {
  min-height: 84px;
  grid-template-columns: 38px minmax(0, 1fr);
  border-color: rgba(45, 99, 183, 0.31);
  background: rgba(255, 255, 255, 0.68);
}

.brickdesign-svg-import--cad > .material-symbols-outlined {
  display: grid;
  width: 38px;
  height: 38px;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, #426ac4, #24849d);
  box-shadow: 0 7px 16px rgba(47, 86, 151, 0.18);
  color: #fff;
  font-size: 1.15rem;
}

.brickdesign-template-grid button {
  min-height: 82px;
  background: #fff;
}

.brickdesign-template-grid svg {
  fill: none;
  stroke: #20242c;
  stroke-width: 1.35;
}

.brickdesign-cad-help-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brickdesign-cad-help-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 8px;
}

.brickdesign-cad-help-list li > span {
  display: grid;
  width: 28px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(49, 60, 81, 0.15);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 2px 0 rgba(39, 49, 67, 0.08);
  color: #43516a;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 800;
}

.brickdesign-cad-help-list p,
.brickdesign-cad-help-list strong {
  display: block;
  margin: 0;
}

.brickdesign-cad-help-list p {
  color: #7b818d;
  font-size: 0.44rem;
  line-height: 1.4;
}

.brickdesign-cad-help-list strong {
  margin-bottom: 2px;
  color: #464d5a;
  font-size: 0.5rem;
}

.brickdesign-sidebar-save {
  display: flex;
  width: calc(100% - 24px);
  min-height: 50px;
  align-items: center;
  gap: 10px;
  margin: 13px 12px 18px;
  padding: 7px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #315fbd, #197f9d);
  box-shadow: 0 9px 21px rgba(41, 83, 148, 0.19);
  color: #fff;
  text-align: left;
}

.brickdesign-sidebar-save > .material-symbols-outlined {
  font-size: 1.25rem;
}

.brickdesign-sidebar-save strong,
.brickdesign-sidebar-save small {
  display: block;
}

.brickdesign-sidebar-save strong {
  font-size: 0.58rem;
}

.brickdesign-sidebar-save small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.42rem;
}

.brickdesign-figure-saved {
  display: grid;
  grid-template-columns: 34px 1fr 30px;
  align-items: center;
  gap: 9px;
  margin: 12px;
  padding: 10px;
  border: 1px solid rgba(27, 137, 120, 0.18);
  border-radius: 12px;
  background: rgba(35, 150, 133, 0.07);
}

.brickdesign-figure-saved > .material-symbols-outlined {
  color: #238b7f;
  font-size: 1.35rem;
}

.brickdesign-figure-saved strong,
.brickdesign-figure-saved small {
  display: block;
}

.brickdesign-figure-saved strong {
  color: #35635f;
  font-size: 0.56rem;
}

.brickdesign-figure-saved small {
  margin-top: 2px;
  color: #708681;
  font-size: 0.43rem;
}

.brickdesign-figure-saved button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  color: #3c756e;
  cursor: pointer;
}

.brickdesign-canvas-panel {
  background: #e5e8ed;
}

.brickdesign-canvas-header {
  min-height: 58px;
  padding: 8px 14px;
  background: rgba(250, 251, 253, 0.88);
}

.brickdesign-canvas-meta {
  display: flex;
  align-items: center;
  gap: 5px;
}

.brickdesign-canvas-meta > span,
.brickdesign-canvas-meta button {
  display: flex;
  min-height: 27px;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid rgba(51, 60, 78, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #687181;
  font-family: var(--font-mono);
  font-size: 0.43rem;
  font-weight: 740;
}

.brickdesign-canvas-meta > span i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #23a492;
}

.brickdesign-canvas-meta button {
  cursor: pointer;
}

.brickdesign-canvas-meta button:hover {
  border-color: rgba(45, 93, 176, 0.25);
  color: #315fad;
}

.brickdesign-canvas-meta .material-symbols-outlined {
  font-size: 0.9rem;
}

.brickdesign-canvas-wrap {
  background: #dfe3e9;
}

.brickdesign-sheet {
  fill: #dfe3e9;
}

.brickdesign-cad-page {
  fill: #fff;
  stroke: rgba(42, 49, 62, 0.22);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 8px 8px rgba(35, 44, 61, 0.14));
}

.brickdesign-grid-field {
  opacity: 1;
}

.brickdesign-grid-minor {
  stroke: rgba(48, 64, 86, 0.052);
  stroke-width: 0.48;
}

.brickdesign-grid-major {
  stroke: rgba(41, 73, 113, 0.13);
  stroke-width: 0.68;
}

.brickdesign-contour {
  fill: none;
  stroke: #14171c;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.brickdesign-contour--closed {
  fill: rgba(15, 23, 42, 0.018);
}

.brickdesign-imported-line {
  stroke-width: 1.45;
}

.brickdesign-contour-text {
  fill: rgba(17, 24, 39, 0.025);
  stroke: #17191e;
  stroke-width: 0.7;
}

.brickdesign-entity:hover .brickdesign-contour {
  stroke: #156fc1;
  stroke-width: 1.9;
}

.brickdesign-entity.is-selected .brickdesign-contour,
.brickdesign-entity.is-selected .brickdesign-contour-text {
  stroke: #087fc4;
}

.brickdesign-draft,
.brickdesign-crosshair {
  stroke: #087fc4;
  stroke-width: 1.25;
}

.brickdesign-sheet-badge {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  display: flex;
  min-height: 29px;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid rgba(55, 64, 83, 0.14);
  border-radius: 8px;
  background: rgba(249, 250, 252, 0.83);
  box-shadow: 0 6px 16px rgba(39, 49, 67, 0.1);
  color: #5d6878;
  font-family: var(--font-mono);
  font-size: 0.42rem;
  font-weight: 780;
  letter-spacing: 0.05em;
  backdrop-filter: blur(13px);
}

.brickdesign-sheet-badge .material-symbols-outlined {
  color: #3462b1;
  font-size: 0.9rem;
}

.brickdesign-line-input {
  position: absolute;
  z-index: 8;
  width: min(310px, calc(100% - 26px));
  overflow: hidden;
  border: 1px solid rgba(35, 61, 96, 0.24);
  border-radius: 13px;
  background: rgba(250, 251, 253, 0.97);
  box-shadow: 0 18px 42px rgba(30, 43, 63, 0.21), inset 0 1px #fff;
  transform: translate(12px, -12px);
  backdrop-filter: blur(18px);
}

.brickdesign-line-input > header {
  display: grid;
  min-height: 42px;
  grid-template-columns: 27px 1fr 26px;
  align-items: center;
  gap: 7px;
  padding: 5px 7px 5px 10px;
  border-bottom: 1px solid rgba(47, 59, 79, 0.1);
  background: linear-gradient(110deg, rgba(52, 96, 177, 0.09), rgba(31, 137, 157, 0.05));
}

.brickdesign-line-input > header > .material-symbols-outlined {
  color: #2e63b5;
  font-size: 1.15rem;
}

.brickdesign-line-input header strong,
.brickdesign-line-input header small {
  display: block;
}

.brickdesign-line-input header strong {
  color: #344155;
  font-size: 0.55rem;
}

.brickdesign-line-input header small {
  margin-top: 1px;
  color: #788190;
  font-size: 0.4rem;
}

.brickdesign-line-input header button {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #7c8592;
  cursor: pointer;
}

.brickdesign-line-input header button:hover {
  background: rgba(55, 68, 91, 0.08);
}

.brickdesign-line-input header button .material-symbols-outlined {
  font-size: 0.95rem;
}

.brickdesign-line-input > div {
  display: grid;
  grid-template-columns: 1fr 0.82fr auto;
  gap: 6px;
  padding: 9px;
}

.brickdesign-line-input label {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr 24px;
  grid-template-rows: auto 32px;
}

.brickdesign-line-input label > span {
  grid-column: 1 / 3;
  margin: 0 0 3px 2px;
  color: #6d7685;
  font-size: 0.4rem;
  font-weight: 780;
  text-transform: uppercase;
}

.brickdesign-line-input input {
  width: 100%;
  min-width: 0;
  padding: 0 7px;
  border: 1px solid rgba(43, 57, 79, 0.18);
  border-right: 0;
  border-radius: 7px 0 0 7px;
  outline: 0;
  background: #fff;
  color: #242c39;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 720;
}

.brickdesign-line-input input:focus {
  border-color: #3474c5;
  box-shadow: 0 0 0 2px rgba(52, 116, 197, 0.1);
}

.brickdesign-line-input label b {
  display: grid;
  place-items: center;
  border: 1px solid rgba(43, 57, 79, 0.18);
  border-radius: 0 7px 7px 0;
  background: #eef1f5;
  color: #76808e;
  font-family: var(--font-mono);
  font-size: 0.43rem;
}

.brickdesign-line-input__apply {
  display: grid;
  min-width: 54px;
  height: 32px;
  align-self: end;
  grid-template-columns: auto auto;
  place-items: center;
  gap: 3px;
  padding: 0 7px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #315fbd, #197f9d);
  box-shadow: 0 6px 13px rgba(39, 82, 147, 0.18);
  color: #fff;
  cursor: pointer;
  font-size: 0.4rem;
  font-weight: 800;
}

.brickdesign-line-input__apply .material-symbols-outlined {
  font-size: 0.9rem;
}

.brickdesign-line-input ~ .brickdesign-empty-prompt {
  display: none;
}

.brickdesign-empty-prompt {
  width: min(285px, calc(100% - 40px));
  padding: 18px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 16px 40px rgba(41, 49, 65, 0.13);
}

.brickdesign-empty-prompt > span {
  background: rgba(49, 98, 180, 0.09);
  color: #315fae;
}

.brickdesign-layer__kind.material-symbols-outlined,
.brickdesign-layer button .material-symbols-outlined {
  font-family: "Material Symbols Outlined", sans-serif;
  font-size: 0.9rem;
}

.brickdesign-statusbar {
  min-height: 39px;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
}

.brickdesign-statusbar > div {
  min-height: 39px;
}

.brickdesign-statusbar__mode {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #91dcce;
}

.brickdesign-statusbar__mode i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentcolor;
}

.brickdesign-statusbar__toggles {
  gap: 2px;
}

.brickdesign-statusbar__toggles button {
  display: flex;
  height: 29px;
  align-items: center;
  gap: 4px;
}

.brickdesign-statusbar__toggles .material-symbols-outlined {
  font-size: 0.82rem;
}

.brickdesign-statusbar__toggles button small {
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.36rem;
  text-transform: uppercase;
}

@media (max-width: 1450px) {
  .brickdesign-grid {
    grid-template-columns: minmax(220px, 245px) minmax(540px, 1fr) minmax(225px, 250px);
  }

  .brickdesign-cad-tool {
    min-width: 46px;
    padding-inline: 4px;
  }

  .brickdesign-ribbon-group {
    padding-inline: 5px;
  }

  .brickdesign-ribbon-group--precision {
    min-width: 165px;
  }
}

@media (max-width: 1180px) {
  .brickdesign-workbench {
    height: auto;
    min-height: 850px;
  }

  .brickdesign-cad-workflow {
    gap: 7px;
  }

  .brickdesign-cad-workflow li {
    padding-inline: 7px;
  }

  .brickdesign-grid {
    grid-template-columns: minmax(225px, 255px) minmax(520px, 1fr);
    grid-template-rows: minmax(680px, calc(100svh - 230px)) 410px;
  }

  .brickdesign-rightbar {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 410px;
    border-top: 1px solid rgba(54, 61, 81, 0.14);
    border-left: 0;
  }

  .brickdesign-inspector {
    border-right: 1px solid rgba(54, 61, 81, 0.13);
    border-bottom: 0;
  }
}

@media (max-width: 860px) {
  .brickdesign-page.container {
    width: calc(100% - 12px);
  }

  .brickdesign-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .brickdesign-cad-workflow {
    align-items: stretch;
    flex-direction: column;
  }

  .brickdesign-cad-workflow ol {
    justify-content: center;
    overflow-x: auto;
  }

  .brickdesign-topbar__actions {
    justify-content: flex-end;
  }

  .brickdesign-cad-ribbon {
    min-height: 82px;
  }

  .brickdesign-grid {
    display: flex;
    flex-direction: column;
  }

  .brickdesign-canvas-panel {
    order: 1;
    min-height: 600px;
  }

  .brickdesign-sidebar {
    order: 2;
    min-height: 670px;
    border-top: 1px solid rgba(54, 61, 81, 0.14);
    border-right: 0;
  }

  .brickdesign-rightbar {
    order: 3;
    min-height: 720px;
    grid-template-columns: 1fr;
    grid-template-rows: 360px 360px;
  }

  .brickdesign-inspector {
    border-right: 0;
    border-bottom: 1px solid rgba(54, 61, 81, 0.13);
  }

  .brickdesign-statusbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .brickdesign-statusbar__coordinates,
  .brickdesign-statusbar__health {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .brickdesign-cad-workflow li {
    font-size: 0.42rem;
  }

  .brickdesign-cad-workflow li span {
    display: none;
  }

  .brickdesign-topbar__actions {
    align-items: stretch;
  }

  .brickdesign-save-figure {
    width: 100%;
  }

  .brickdesign-canvas-panel {
    min-height: 520px;
  }

  .brickdesign-canvas-header {
    min-height: 64px;
    flex-direction: row;
  }

  .brickdesign-canvas-meta > span:nth-child(2),
  .brickdesign-canvas-meta button {
    display: none;
  }

  .brickdesign-line-input {
    top: 12px !important;
    left: 12px !important;
    width: calc(100% - 24px);
    transform: none;
  }

  .brickdesign-statusbar__toggles button {
    padding-inline: 5px;
    font-size: 0;
  }

  .brickdesign-statusbar__toggles button small,
  .brickdesign-statusbar__toggles .material-symbols-outlined {
    font-size: 0.74rem;
  }
}

/* Interactive v2 vector-document workspace ---------------------------------- */
.brickdesign-projects {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  margin-top: 14px;
}

.brickdesign-projects__bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.brickdesign-projects__bar label {
  grid-column: 1 / -1;
}

.brickdesign-projects__bar input {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(72, 79, 101, 0.17);
  border-radius: 9px;
  outline: none;
  background: rgba(255, 255, 255, 0.78);
  color: #343844;
  font: 650 0.58rem/1.2 var(--font-sans);
}

.brickdesign-projects__bar input:focus {
  border-color: rgba(95, 72, 177, 0.48);
  box-shadow: 0 0 0 3px rgba(95, 72, 177, 0.08);
}

.brickdesign-projects__bar button {
  display: inline-flex;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid rgba(74, 80, 101, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.72);
  color: #5e6473;
  cursor: pointer;
  font: 760 0.49rem/1 var(--font-sans);
}

.brickdesign-projects__bar button:hover {
  border-color: rgba(93, 70, 181, 0.34);
  color: #5944a8;
}

.brickdesign-projects__bar .brickdesign-projects__save {
  border-color: rgba(83, 67, 163, 0.22);
  background: linear-gradient(135deg, #6550b5, #4c72bd);
  color: #fff;
}

.brickdesign-projects__bar .material-symbols-outlined {
  font-size: 0.85rem;
}

.brickdesign-projects__bar b {
  display: grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 8px;
  background: rgba(80, 69, 146, 0.1);
  font: 800 0.4rem/1 var(--font-mono);
}

.brickdesign-projects__feedback {
  margin: 7px 0 0;
  padding: 7px 8px;
  border: 1px solid rgba(61, 142, 116, 0.17);
  border-radius: 8px;
  background: rgba(61, 142, 116, 0.07);
  color: #397b67;
  font-size: 0.5rem;
  line-height: 1.4;
}

.brickdesign-projects__feedback.is-error {
  border-color: rgba(185, 70, 63, 0.18);
  background: rgba(193, 74, 65, 0.07);
  color: #8f3f3a;
}

.brickdesign-projects__panel {
  display: grid;
  gap: 9px;
  margin-top: 8px;
  padding: 11px;
  border: 1px solid rgba(66, 72, 95, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 30px rgba(42, 48, 68, 0.1);
}

.brickdesign-projects__panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.brickdesign-projects__panel > header small,
.brickdesign-projects__panel > header strong,
.brickdesign-projects__summary strong,
.brickdesign-projects__summary small,
.brickdesign-projects__empty strong,
.brickdesign-projects__empty small,
.brickdesign-projects__confirm strong,
.brickdesign-projects__confirm small {
  display: block;
}

.brickdesign-projects__panel > header small {
  color: #8b829f;
  font: 850 0.39rem/1.2 var(--font-mono);
  letter-spacing: 0.08em;
}

.brickdesign-projects__panel > header strong {
  margin-top: 2px;
  color: #343844;
  font-size: 0.66rem;
}

.brickdesign-projects__panel > header button {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: rgba(73, 79, 99, 0.07);
  color: #777d8b;
  cursor: pointer;
}

.brickdesign-projects__panel > header .material-symbols-outlined {
  font-size: 0.9rem;
}

.brickdesign-projects__privacy {
  margin: 0;
  color: #797f8e;
  font-size: 0.48rem;
  line-height: 1.45;
}

.brickdesign-projects__panel ul {
  display: grid;
  max-height: 275px;
  gap: 5px;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brickdesign-projects__panel li {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(72, 79, 101, 0.12);
  border-radius: 9px;
  background: rgba(245, 247, 250, 0.75);
}

.brickdesign-projects__panel li.is-active {
  border-color: rgba(92, 71, 177, 0.32);
  background: rgba(92, 71, 177, 0.06);
}

.brickdesign-projects__summary strong {
  overflow: hidden;
  color: #3a3e4a;
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brickdesign-projects__summary small {
  margin-top: 3px;
  color: #858b99;
  font-size: 0.43rem;
  line-height: 1.35;
}

.brickdesign-projects__actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.brickdesign-projects__actions button,
.brickdesign-projects__confirm > button {
  min-height: 27px;
  padding: 0 8px;
  border: 1px solid rgba(77, 83, 104, 0.16);
  border-radius: 7px;
  background: #fff;
  color: #626876;
  cursor: pointer;
  font: 750 0.45rem/1 var(--font-sans);
}

.brickdesign-projects__actions button.is-open {
  color: #5945a4;
}

.brickdesign-projects__actions button.is-delete {
  display: grid;
  width: 29px;
  padding: 0;
  place-items: center;
  color: #9c514b;
}

.brickdesign-projects__actions .material-symbols-outlined {
  font-size: 0.82rem;
}

.brickdesign-projects__confirm {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 5px;
  padding: 8px;
  border: 1px solid rgba(86, 69, 165, 0.18);
  border-radius: 9px;
  background: rgba(86, 69, 165, 0.06);
}

.brickdesign-projects__confirm p {
  min-width: 0;
  margin: 0;
}

.brickdesign-projects__confirm strong {
  overflow: hidden;
  color: #443a73;
  font-size: 0.51rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brickdesign-projects__confirm small {
  margin-top: 2px;
  color: #7e778e;
  font-size: 0.4rem;
  line-height: 1.3;
}

.brickdesign-projects__confirm.is-delete {
  border-color: rgba(180, 73, 64, 0.2);
  background: rgba(180, 73, 64, 0.06);
}

.brickdesign-projects__confirm.is-delete strong {
  color: #8d413b;
}

.brickdesign-projects__confirm.is-delete > button:first-of-type {
  border-color: rgba(180, 73, 64, 0.25);
  color: #94443e;
}

.brickdesign-projects__empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border-radius: 9px;
  background: rgba(235, 238, 244, 0.65);
  color: #737988;
}

.brickdesign-projects__empty > .material-symbols-outlined {
  font-size: 1rem;
}

.brickdesign-projects__empty p {
  margin: 0;
}

.brickdesign-projects__empty strong {
  color: #555b69;
  font-size: 0.53rem;
}

.brickdesign-projects__empty small {
  margin-top: 2px;
  font-size: 0.42rem;
  line-height: 1.35;
}

.brickdesign-request-mode {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 16px 0 10px;
  padding: 4px;
  border: 1px solid rgba(71, 78, 100, 0.13);
  border-radius: 13px;
  background: rgba(226, 230, 238, 0.55);
}

.brickdesign-request-mode button {
  display: flex;
  min-width: 0;
  min-height: 52px;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #737988;
  cursor: pointer;
  text-align: left;
  transition: 150ms ease;
}

.brickdesign-request-mode button:hover:not(:disabled) { color: #55439e; }
.brickdesign-request-mode button:disabled { cursor: not-allowed; opacity: 0.42; }

.brickdesign-request-mode button.is-active {
  border-color: rgba(84, 67, 158, 0.18);
  background: #fff;
  box-shadow: 0 4px 13px rgba(48, 52, 72, 0.08);
  color: #4e3c98;
}

.brickdesign-request-mode .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 1.08rem;
}

.brickdesign-request-mode button span:last-child,
.brickdesign-request-mode button strong,
.brickdesign-request-mode button small { display: block; min-width: 0; }
.brickdesign-request-mode button strong { font-size: 0.53rem; line-height: 1.15; }

.brickdesign-request-mode button small {
  margin-top: 3px;
  overflow: hidden;
  color: #9297a3;
  font-size: 0.39rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brickdesign-reference { flex: 0 0 auto; margin: 8px 0 10px; }

.brickdesign-reference__picker {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed rgba(91, 72, 166, 0.35);
  border-radius: 12px;
  background: rgba(247, 245, 255, 0.72);
  color: #6153a1;
  cursor: pointer;
  transition: 150ms ease;
}

.brickdesign-reference__picker:hover,
.brickdesign-reference__picker:focus-within {
  border-color: rgba(91, 72, 166, 0.68);
  background: #f7f4ff;
  box-shadow: 0 0 0 3px rgba(91, 72, 166, 0.07);
}

.brickdesign-reference__picker > .material-symbols-outlined {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  background: rgba(95, 75, 172, 0.1);
  font-size: 1.08rem;
}

.brickdesign-reference__picker span,
.brickdesign-reference__picker strong,
.brickdesign-reference__picker small { display: block; min-width: 0; }
.brickdesign-reference__picker strong { color: #51486e; font-size: 0.55rem; }
.brickdesign-reference__picker small { margin-top: 3px; color: #8a849d; font-size: 0.42rem; }

.brickdesign-reference__picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.brickdesign-reference__preview {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(71, 78, 100, 0.16);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(47, 54, 75, 0.06);
}

.brickdesign-reference__preview > img {
  width: 72px;
  height: 68px;
  object-fit: cover;
  background: #eef0f4;
}

.brickdesign-reference__preview figcaption {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 8px 7px 8px 10px;
}

.brickdesign-reference__preview figcaption span,
.brickdesign-reference__preview figcaption small,
.brickdesign-reference__preview figcaption strong,
.brickdesign-reference__preview figcaption em { display: block; min-width: 0; }

.brickdesign-reference__preview figcaption small {
  color: #84799b;
  font: 800 0.35rem/1.2 var(--font-mono);
  letter-spacing: 0.07em;
}

.brickdesign-reference__preview figcaption strong {
  margin-top: 2px;
  overflow: hidden;
  color: #4b5060;
  font-size: 0.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brickdesign-reference__preview figcaption em {
  margin-top: 2px;
  color: #9296a2;
  font-size: 0.39rem;
  font-style: normal;
}

.brickdesign-reference__preview button {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: #f1f2f6;
  color: #707684;
  cursor: pointer;
}

.brickdesign-reference__preview button:hover { background: #f8e9ed; color: #a64058; }
.brickdesign-reference__preview button .material-symbols-outlined { font-size: 0.95rem; }

.brickdesign-reference__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 7px 2px 0;
  color: #a43f57;
  font-size: 0.47rem;
  line-height: 1.4;
}
.brickdesign-reference__error .material-symbols-outlined { flex: 0 0 auto; font-size: 0.86rem; }

.brickdesign-studio__stage { grid-template-rows: auto minmax(0, 1fr) auto; }

.brickdesign-stage-tabs {
  z-index: 3;
  display: flex;
  min-height: 58px;
  align-items: stretch;
  gap: 4px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(55, 62, 82, 0.14);
  background: rgba(249, 250, 252, 0.95);
}

.brickdesign-stage-tabs button {
  display: grid;
  min-width: 150px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #7b818e;
  cursor: pointer;
  text-align: left;
}

.brickdesign-stage-tabs button:hover { background: rgba(255, 255, 255, 0.72); color: #5d4aa7; }

.brickdesign-stage-tabs button.is-active {
  border-color: rgba(89, 70, 169, 0.2);
  background: #fff;
  box-shadow: 0 4px 13px rgba(51, 57, 78, 0.075);
  color: #5945a5;
}

.brickdesign-stage-tabs .material-symbols-outlined { font-size: 1.15rem; }
.brickdesign-stage-tabs span, .brickdesign-stage-tabs small, .brickdesign-stage-tabs strong { display: block; }
.brickdesign-stage-tabs small { color: #9993a7; font: 800 0.35rem/1 var(--font-mono); letter-spacing: 0.07em; }
.brickdesign-stage-tabs strong { margin-top: 3px; color: currentColor; font-size: 0.55rem; }

.brickdesign-stage-tabs b {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  padding: 0 6px;
  border-radius: 8px;
  background: rgba(92, 72, 171, 0.09);
  font: 800 0.43rem/1 var(--font-mono);
}

.brickdesign-stage-panel { display: none; min-width: 0; min-height: 0; overflow: hidden; }
.brickdesign-stage-panel.is-active { display: block; }
.brickdesign-stage-panel > .brickdesign-studio__canvas,
.brickdesign-stage-panel > .brickdesign-vector-editor { height: 100%; }

.brickdesign-vector-editor {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  background: #e7eaf0;
}

.brickdesign-vector-editor__toolbar {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 13px;
  border-bottom: 1px solid rgba(56, 64, 84, 0.12);
  background: rgba(255, 255, 255, 0.86);
}

.brickdesign-vector-editor__toolbar > div:first-child small,
.brickdesign-vector-editor__toolbar > div:first-child strong { display: block; }
.brickdesign-vector-editor__toolbar > div:first-child small { color: #8b829f; font: 820 0.38rem/1.2 var(--font-mono); letter-spacing: 0.09em; }

.brickdesign-vector-editor__toolbar > div:first-child strong {
  max-width: 370px;
  margin-top: 3px;
  overflow: hidden;
  color: #3c414d;
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brickdesign-vector-editor__actions { display: flex; gap: 5px; }

.brickdesign-vector-editor__actions button {
  display: inline-flex;
  min-width: 34px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid rgba(66, 73, 94, 0.15);
  border-radius: 9px;
  background: #fff;
  color: #656b79;
  cursor: pointer;
  font-size: 0.48rem;
  font-weight: 750;
}

.brickdesign-vector-editor__actions button:nth-child(-n + 2) { border-color: rgba(82, 65, 155, 0.24); background: #f7f4ff; color: #5945a5; }
.brickdesign-vector-editor__actions button.is-active { border-color: #6651ba; background: #6651ba; color: #fff; }
.brickdesign-vector-editor__actions button:disabled { cursor: not-allowed; opacity: 0.35; }
.brickdesign-vector-editor__actions .material-symbols-outlined { font-size: 1rem; }

.brickdesign-vector-editor__drawbar,
.brickdesign-vector-editor__validation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 13px;
  border-bottom: 1px solid rgba(65, 72, 93, 0.13);
}

.brickdesign-vector-editor__drawbar { background: #443781; color: #fff; }
.brickdesign-vector-editor__drawbar > span { display: flex; align-items: center; gap: 7px; font-size: 0.48rem; }

.brickdesign-vector-editor__drawbar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6ed3b5;
  box-shadow: 0 0 0 4px rgba(110, 211, 181, 0.15);
}

.brickdesign-vector-editor__drawbar button {
  min-height: 27px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  font-size: 0.43rem;
  font-weight: 750;
}
.brickdesign-vector-editor__drawbar button.is-primary { border-color: #fff; background: #fff; color: #443781; }
.brickdesign-vector-editor__drawbar button:disabled { cursor: not-allowed; opacity: 0.4; }

.brickdesign-vector-editor__validation { justify-content: flex-start; background: #fff3f5; color: #9e3e55; }
.brickdesign-vector-editor__validation > .material-symbols-outlined { font-size: 1.03rem; }
.brickdesign-vector-editor__validation span:last-child,
.brickdesign-vector-editor__validation strong { display: block; }
.brickdesign-vector-editor__validation span:last-child { font-size: 0.48rem; line-height: 1.35; }
.brickdesign-vector-editor__validation strong { margin-bottom: 2px; font-size: 0.52rem; }

.brickdesign-vector-editor__body {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 280px;
}

.brickdesign-vector-editor__canvas-wrap {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 18px;
  place-items: center;
  background: radial-gradient(circle at 50% 42%, rgba(112, 96, 173, 0.06), transparent 28rem), #dfe3e9;
}

.brickdesign-vector-canvas {
  display: block;
  width: min(100%, 850px);
  height: auto;
  border: 1px solid rgba(43, 49, 68, 0.18);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(44, 50, 69, 0.16), 0 3px 9px rgba(44, 50, 69, 0.08);
  color: rgba(87, 95, 116, 0.1);
  cursor: default;
  touch-action: none;
}

.brickdesign-vector-canvas.is-drawing { cursor: crosshair; }
.brickdesign-vector-canvas__paper { fill: #fffefc; }
.brickdesign-vector-canvas__grid { pointer-events: none; }
.brickdesign-vector-element { cursor: pointer; outline: none; }
.brickdesign-vector-element.is-locked { cursor: not-allowed; opacity: 0.58; }

.brickdesign-vector-element__shape {
  opacity: 0.86;
  transition: opacity 120ms ease, filter 120ms ease;
}

.brickdesign-vector-element__shape.is-subtract { fill: #fffefc; stroke-dasharray: 10 6; }

.brickdesign-vector-element:hover .brickdesign-vector-element__shape,
.brickdesign-vector-element:focus .brickdesign-vector-element__shape,
.brickdesign-vector-element.is-selected .brickdesign-vector-element__shape {
  filter: drop-shadow(0 0 5px rgba(77, 58, 155, 0.28));
  opacity: 1;
}

.brickdesign-vector-element__selection {
  fill: none;
  stroke: #6954c0;
  stroke-width: 2.5px;
  stroke-dasharray: 8 5;
  opacity: 0;
  pointer-events: none;
}
.brickdesign-vector-element.is-selected .brickdesign-vector-element__selection { opacity: 1; }

.brickdesign-vector-draft polyline {
  fill: none;
  stroke: #3b82f6;
  stroke-width: 5px;
  stroke-dasharray: 13 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.brickdesign-vector-draft circle { fill: #fff; stroke: #2563eb; stroke-width: 3px; vector-effect: non-scaling-stroke; }

.brickdesign-dimensions {
  color: #536579;
  pointer-events: none;
}

.brickdesign-dimensions line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25px;
  vector-effect: non-scaling-stroke;
}

.brickdesign-dimensions__extension { opacity: 0.48; }
.brickdesign-dimensions .is-axis { color: #7e6cb3; }
.brickdesign-dimensions .is-axis .brickdesign-dimensions__line { stroke-dasharray: 10 7; opacity: 0.68; }

.brickdesign-dimensions marker path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25px;
}

.brickdesign-dimensions__label {
  fill: #425467;
  font: 720 15px/1 var(--font-mono);
  letter-spacing: 0.015em;
  paint-order: stroke;
  stroke: rgba(255, 254, 252, 0.96);
  stroke-linejoin: round;
  stroke-width: 6px;
}

.brickdesign-vector-editor__empty {
  display: grid;
  width: min(430px, 85%);
  min-height: 250px;
  place-content: center;
  justify-items: center;
  padding: 34px;
  border: 1px dashed rgba(77, 84, 105, 0.25);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.62);
  color: #858b98;
  text-align: center;
}

.brickdesign-vector-editor__empty .material-symbols-outlined { font-size: 2rem; color: #7664b8; }
.brickdesign-vector-editor__empty strong { margin-top: 11px; color: #4f5562; font-size: 0.72rem; }
.brickdesign-vector-editor__empty p { max-width: 340px; margin: 8px 0 0; font-size: 0.54rem; line-height: 1.55; }

.brickdesign-plan-validation {
  flex: 0 0 auto;
  margin: 0 14px 12px;
  overflow: hidden;
  border: 1px solid rgba(53, 124, 110, 0.2);
  border-radius: 12px;
  background: rgba(245, 252, 249, 0.94);
}

.brickdesign-plan-validation.is-invalid {
  border-color: rgba(171, 66, 88, 0.24);
  background: rgba(255, 247, 248, 0.96);
}

.brickdesign-plan-validation > header {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(55, 93, 88, 0.1);
}

.brickdesign-plan-validation > header span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #277a6e;
}

.brickdesign-plan-validation.is-invalid > header span { color: #a33d55; }

.brickdesign-plan-validation > header i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}

.brickdesign-plan-validation > header strong { font-size: 0.52rem; }
.brickdesign-plan-validation > header small { color: #8a909c; font: 650 0.39rem/1 var(--font-mono); }

.brickdesign-plan-validation__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.brickdesign-plan-validation__metrics > div {
  min-width: 0;
  padding: 8px 10px;
  border-right: 1px solid rgba(62, 83, 85, 0.09);
}
.brickdesign-plan-validation__metrics > div:last-child { border-right: 0; }
.brickdesign-plan-validation__metrics small,
.brickdesign-plan-validation__metrics strong { display: block; }
.brickdesign-plan-validation__metrics small { color: #8c919b; font-size: 0.36rem; }
.brickdesign-plan-validation__metrics strong { margin-top: 3px; color: #4d5560; font: 760 0.47rem/1.2 var(--font-mono); }

.brickdesign-plan-validation__violations {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 7px 9px 9px;
  border-top: 1px solid rgba(151, 65, 84, 0.1);
  list-style: none;
}

.brickdesign-plan-validation__violations li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.68);
  color: #777d89;
  font-size: 0.42rem;
  line-height: 1.4;
}
.brickdesign-plan-validation__violations li[data-severity="error"] { color: #9f4055; }
.brickdesign-plan-validation__violations .material-symbols-outlined { flex: 0 0 auto; font-size: 0.82rem; }
.brickdesign-plan-validation__violations span:last-child,
.brickdesign-plan-validation__violations strong { display: block; }
.brickdesign-plan-validation__violations strong { margin-bottom: 1px; color: currentColor; font-size: 0.43rem; }

@media (max-width: 620px) {
  .brickdesign-plan-validation__metrics { grid-template-columns: 1fr 1fr; }
  .brickdesign-plan-validation__metrics > div:nth-child(2) { border-right: 0; }
  .brickdesign-plan-validation__metrics > div:nth-child(-n + 2) { border-bottom: 1px solid rgba(62, 83, 85, 0.09); }
}

.brickdesign-vector-editor__sidebar {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border-left: 1px solid rgba(56, 63, 83, 0.14);
  background: rgba(248, 249, 251, 0.97);
}

.brickdesign-vector-editor__layers > header,
.brickdesign-vector-inspector > header {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border-bottom: 1px solid rgba(62, 69, 90, 0.1);
}

.brickdesign-vector-editor__layers header span,
.brickdesign-vector-editor__layers header small,
.brickdesign-vector-editor__layers header strong,
.brickdesign-vector-inspector header span,
.brickdesign-vector-inspector header small,
.brickdesign-vector-inspector header strong { display: block; }

.brickdesign-vector-editor__layers header small,
.brickdesign-vector-inspector header small {
  color: #90879f;
  font: 800 0.34rem/1.1 var(--font-mono);
  letter-spacing: 0.08em;
}

.brickdesign-vector-editor__layers header strong,
.brickdesign-vector-inspector header strong {
  max-width: 160px;
  margin-top: 3px;
  overflow: hidden;
  color: #424753;
  font-size: 0.59rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brickdesign-vector-editor__layers header b {
  display: grid;
  min-width: 25px;
  height: 25px;
  place-items: center;
  padding: 0 6px;
  border-radius: 8px;
  background: rgba(91, 71, 170, 0.1);
  color: #5945a5;
  font: 800 0.42rem/1 var(--font-mono);
}

.brickdesign-vector-layer { border-bottom: 1px solid rgba(65, 72, 92, 0.09); }

.brickdesign-vector-layer > div:first-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 9px 10px 6px;
  color: #5e6472;
}

.brickdesign-vector-layer > div:first-child > .material-symbols-outlined { font-size: 0.96rem; color: #8574bc; }
.brickdesign-vector-layer > div:first-child span,
.brickdesign-vector-layer > div:first-child strong,
.brickdesign-vector-layer > div:first-child small { display: block; }
.brickdesign-vector-layer > div:first-child strong { font-size: 0.49rem; }
.brickdesign-vector-layer > div:first-child small { margin-top: 2px; color: #999da8; font-size: 0.36rem; }
.brickdesign-vector-layer > div:first-child b { color: #979ba6; font: 700 0.38rem/1 var(--font-mono); }

.brickdesign-vector-layer.is-hidden > div:first-child { opacity: 0.66; }

.brickdesign-vector-layer__controls {
  display: flex !important;
  align-items: center;
  gap: 2px;
}

.brickdesign-vector-layer__controls button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #777d8b;
  cursor: pointer;
}
.brickdesign-vector-layer__controls button:hover { background: #fff; color: #5844a4; }
.brickdesign-vector-layer__controls button .material-symbols-outlined { font-size: 0.82rem; }

.brickdesign-vector-layer__element {
  display: grid;
  width: calc(100% - 14px);
  min-height: 41px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin: 0 7px 5px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #747987;
  cursor: pointer;
  text-align: left;
}
.brickdesign-vector-layer__element:hover { background: #fff; }
.brickdesign-vector-layer__element.is-selected { border-color: rgba(91, 70, 170, 0.19); background: #f2effd; color: #57439f; }
.brickdesign-vector-layer__element:disabled { cursor: not-allowed; opacity: 0.48; }
.brickdesign-vector-layer__element > .material-symbols-outlined { font-size: 0.95rem; }
.brickdesign-vector-layer__element span,
.brickdesign-vector-layer__element strong,
.brickdesign-vector-layer__element small { display: block; min-width: 0; }
.brickdesign-vector-layer__element strong { overflow: hidden; font-size: 0.46rem; text-overflow: ellipsis; white-space: nowrap; }
.brickdesign-vector-layer__element small { margin-top: 2px; color: #999da8; font-size: 0.35rem; }

.brickdesign-vector-inspector {
  border-top: 1px solid rgba(59, 66, 86, 0.14);
  background: #fff;
}

.brickdesign-vector-inspector header button {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: #f5e9ec;
  color: #a24157;
  cursor: pointer;
}
.brickdesign-vector-inspector header button .material-symbols-outlined { font-size: 0.95rem; }

.brickdesign-vector-inspector__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 10px 10px 4px;
}

.brickdesign-vector-inspector label { display: block; color: #626875; font-size: 0.43rem; font-weight: 720; }
.brickdesign-vector-inspector label > span { display: flex; justify-content: space-between; gap: 4px; margin-bottom: 4px; }
.brickdesign-vector-inspector label small { color: #999da7; font: 600 0.34rem/1 var(--font-mono); }

.brickdesign-vector-inspector input,
.brickdesign-vector-inspector select {
  width: 100%;
  height: 31px;
  border: 1px solid rgba(67, 74, 95, 0.17);
  border-radius: 7px;
  outline: none;
  background: #fafbfc;
  color: #484e5b;
  font: 600 0.46rem/1 var(--font-mono);
}
.brickdesign-vector-inspector input { padding: 0 7px; }
.brickdesign-vector-inspector select { padding: 0 5px; }
.brickdesign-vector-inspector input:focus,
.brickdesign-vector-inspector select:focus { border-color: rgba(89, 69, 166, 0.55); box-shadow: 0 0 0 3px rgba(89, 69, 166, 0.07); }
.brickdesign-vector-inspector input:disabled { cursor: not-allowed; opacity: 0.5; }
.brickdesign-vector-inspector__select { margin: 7px 10px 10px; }

.brickdesign-inspector-group {
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(64, 70, 91, 0.11);
  background: #fff;
}

.brickdesign-inspector-group > summary {
  display: grid;
  min-height: 48px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: #626878;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.brickdesign-inspector-group > summary::-webkit-details-marker { display: none; }
.brickdesign-inspector-group > summary:hover { background: #faf9fd; }
.brickdesign-inspector-group > summary > .material-symbols-outlined:first-child { color: #6d5ab0; font-size: 0.95rem; }
.brickdesign-inspector-group > summary span,
.brickdesign-inspector-group > summary small,
.brickdesign-inspector-group > summary strong { display: block; }
.brickdesign-inspector-group > summary small { color: #958ba3; font: 800 0.31rem/1 var(--font-mono); letter-spacing: 0.08em; }
.brickdesign-inspector-group > summary strong { margin-top: 3px; color: #4e5461; font-size: 0.48rem; }
.brickdesign-inspector-group > summary .is-chevron { color: #959aa6; font-size: 0.85rem; transition: transform 140ms ease; }
.brickdesign-inspector-group[open] > summary .is-chevron { transform: rotate(180deg); }
.brickdesign-inspector-group__body { padding-bottom: 5px; border-top: 1px solid rgba(64, 70, 91, 0.07); background: #fbfbfd; }
.brickdesign-inspector-group__body.is-flush { padding: 0; }

.brickdesign-construction-panel { background: #f8f6ff; }
.brickdesign-construction-panel__intro { margin: 0; padding: 9px 10px 2px; color: #777486; font-size: 0.39rem; line-height: 1.5; }

.brickdesign-construction-panel__measures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 0 10px 7px;
}

.brickdesign-construction-panel__switch {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  margin: 2px 10px 8px;
  padding: 8px;
  border: 1px solid rgba(91, 71, 170, 0.13);
  border-radius: 8px;
  background: #fff;
}

.brickdesign-construction-panel__switch input {
  width: 15px !important;
  height: 15px !important;
  margin: 1px 0 0;
  accent-color: #6651ba;
}

.brickdesign-construction-panel__switch span,
.brickdesign-construction-panel__switch strong,
.brickdesign-construction-panel__switch small { display: block !important; margin: 0 !important; }
.brickdesign-construction-panel__switch strong { color: #585f6c; font-size: 0.41rem; }
.brickdesign-construction-panel__switch small { margin-top: 3px !important; color: #9296a0; font-size: 0.34rem; line-height: 1.4; }

.brickdesign-vector-inspector .brickdesign-construction-panel__apply {
  display: flex;
  width: calc(100% - 20px);
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 10px 7px;
  padding: 0 9px;
  border: 1px solid #5f4ca9;
  border-radius: 8px;
  background: #6651ba;
  color: #fff;
  cursor: pointer;
  font-size: 0.41rem;
  font-weight: 780;
}

.brickdesign-vector-inspector .brickdesign-construction-panel__apply:hover { background: #55429f; }
.brickdesign-vector-inspector .brickdesign-construction-panel__apply .material-symbols-outlined { font-size: 0.88rem; }

.brickdesign-path-inspector {
  margin-top: 0;
  border-top: 0;
  background: #f8f7fc;
}

.brickdesign-path-inspector > header {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(64, 70, 91, 0.09);
}

.brickdesign-path-inspector > header > span,
.brickdesign-path-inspector > header small,
.brickdesign-path-inspector > header strong { display: block; }
.brickdesign-path-inspector > header small { color: #90879f; font: 800 0.32rem/1.1 var(--font-mono); letter-spacing: 0.08em; }
.brickdesign-path-inspector > header strong { margin-top: 3px; color: #555b68; font-size: 0.46rem; }

.brickdesign-vector-inspector .brickdesign-path-inspector > header > button {
  display: inline-flex;
  width: auto;
  height: 27px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgba(89, 69, 166, 0.2);
  border-radius: 7px;
  background: #f1edff;
  color: #5945a5;
  cursor: pointer;
  font-size: 0.39rem;
  font-weight: 780;
  white-space: nowrap;
}
.brickdesign-vector-inspector .brickdesign-path-inspector > header > button:disabled { cursor: not-allowed; opacity: 0.4; }
.brickdesign-path-inspector > p { margin: 0; padding: 7px 10px; color: #8a7c8e; font-size: 0.38rem; line-height: 1.45; }

.brickdesign-path-inspector__nodes {
  display: grid;
  max-height: 285px;
  gap: 5px;
  overflow: auto;
  padding: 7px 8px 10px;
}

.brickdesign-path-node {
  padding: 7px;
  border: 1px solid rgba(68, 74, 96, 0.1);
  border-radius: 8px;
  background: #fff;
}

.brickdesign-path-node > header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: #6c7180;
  font-size: 0.4rem;
}
.brickdesign-path-node > header strong,
.brickdesign-path-node.is-close > strong { color: #725fb4; font: 780 0.36rem/1 var(--font-mono); }
.brickdesign-path-node__coordinates { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.brickdesign-path-node__coordinates label { font-size: 0.35rem; }
.brickdesign-path-node__coordinates label > span { margin-bottom: 3px; color: #858a97; }
.brickdesign-path-node__coordinates input { height: 27px; padding: 0 5px; font-size: 0.4rem; }

.brickdesign-path-node.is-close {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px;
  color: #777d89;
}
.brickdesign-path-node.is-close span,
.brickdesign-path-node.is-close b,
.brickdesign-path-node.is-close small { display: block; }
.brickdesign-path-node.is-close b { font-size: 0.4rem; }
.brickdesign-path-node.is-close small { margin-top: 2px; color: #9a9eaa; font-size: 0.34rem; }

@media (max-width: 1380px) {
  .brickdesign-vector-editor__body { grid-template-columns: minmax(0, 1fr) 245px; }
  .brickdesign-vector-editor__canvas-wrap { padding: 12px; }
}

@media (max-width: 1180px) {
  .brickdesign-vector-editor__body { grid-template-columns: minmax(0, 1fr) 255px; }
}

@media (max-width: 760px) {
  .brickdesign-studio__stage { min-height: 900px; }
  .brickdesign-stage-tabs button { min-width: 0; flex: 1 1 50%; }
  .brickdesign-vector-editor__body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(430px, 62svh) auto;
    overflow: auto;
  }
  .brickdesign-vector-editor__canvas-wrap { min-height: 430px; }
  .brickdesign-vector-editor__sidebar {
    overflow: visible;
    border-top: 1px solid rgba(56, 63, 83, 0.14);
    border-left: 0;
  }
}

@media (max-width: 520px) {
  .brickdesign-request-mode { grid-template-columns: 1fr; }
  .brickdesign-stage-tabs { padding: 6px; }
  .brickdesign-stage-tabs button { padding: 6px 7px; }
  .brickdesign-vector-editor__toolbar { align-items: flex-start; }
  .brickdesign-vector-editor__actions button:nth-child(-n + 2) { font-size: 0; }
  .brickdesign-vector-editor__actions button:nth-child(-n + 2) .material-symbols-outlined { font-size: 1rem; }
  .brickdesign-vector-editor__drawbar { align-items: flex-start; flex-direction: column; }
}

/* Brick Design v3 · prompt → contourcontrole → metselstudio ----------------- */
.brickdesign-workbench.brickdesign-studio-v3 {
  --bd-ink: #15171b;
  --bd-muted: #70757f;
  --bd-line: rgba(24, 28, 36, 0.12);
  --bd-violet: #6750d8;
  --bd-violet-dark: #4d38bd;
  display: block;
  width: 100%;
  height: max(780px, calc(100svh - 92px));
  max-height: none;
  overflow: hidden;
  border: 1px solid var(--bd-line);
  border-radius: 22px;
  background: #f5f6f8;
  color: var(--bd-ink);
  box-shadow: 0 24px 70px rgba(29, 33, 43, 0.1);
}

.brickdesign-studio-v3 button,
.brickdesign-studio-v3 textarea,
.brickdesign-studio-v3 select,
.brickdesign-studio-v3 input { font: inherit; }

.brickdesign-entry {
  display: grid;
  min-height: 100%;
  grid-template-rows: auto 1fr;
  background:
    radial-gradient(circle at 50% 36%, rgba(103, 80, 216, 0.08), transparent 27rem),
    radial-gradient(circle at 12% 90%, rgba(54, 170, 142, 0.06), transparent 25rem),
    #fbfbfc;
}

.brickdesign-entry__nav,
.brickdesign-review > header {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px clamp(20px, 4vw, 58px);
  border-bottom: 1px solid rgba(24, 28, 36, 0.08);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px);
}

.brickdesign-entry__nav > button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid var(--bd-line);
  border-radius: 12px;
  background: #fff;
  color: #4c505a;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 750;
  box-shadow: 0 4px 16px rgba(28, 31, 39, 0.04);
}

.brickdesign-entry__nav > button:hover { border-color: rgba(103, 80, 216, 0.35); color: var(--bd-violet-dark); }
.brickdesign-entry__nav .material-symbols-outlined { font-size: 1.05rem; }

.brickdesign-entry__hero {
  display: flex;
  width: min(920px, calc(100% - 42px));
  align-self: center;
  justify-self: center;
  flex-direction: column;
  align-items: center;
  padding: 54px 0 76px;
  text-align: center;
}

.brickdesign-entry__eyebrow,
.brickdesign-review > header > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #5d6470;
  font: 760 0.68rem/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brickdesign-entry__eyebrow i,
.brickdesign-review > header > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38a282;
  box-shadow: 0 0 0 4px rgba(56, 162, 130, 0.12);
}

.brickdesign-entry__hero h1 {
  max-width: 820px;
  margin: 20px 0 12px;
  color: #17191d;
  font-size: clamp(2.2rem, 5vw, 4.25rem);
  font-weight: 680;
  letter-spacing: -0.055em;
  line-height: 1.02;
}

.brickdesign-entry__hero > p {
  max-width: 680px;
  margin: 0;
  color: #737984;
  font-size: clamp(0.88rem, 1.4vw, 1.06rem);
  line-height: 1.65;
}

.brickdesign-entry__composer {
  width: 100%;
  margin-top: 34px;
  overflow: hidden;
  border: 1px solid rgba(34, 38, 48, 0.14);
  border-radius: 22px;
  background: #fff;
  text-align: left;
  box-shadow: 0 20px 60px rgba(32, 35, 45, 0.11), 0 2px 7px rgba(32, 35, 45, 0.05);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.brickdesign-entry__composer:focus-within {
  border-color: rgba(103, 80, 216, 0.5);
  box-shadow: 0 24px 70px rgba(72, 55, 155, 0.15), 0 0 0 4px rgba(103, 80, 216, 0.07);
}

.brickdesign-entry__composer textarea {
  width: 100%;
  min-height: 132px;
  resize: none;
  padding: 24px 26px 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #202329;
  font-size: 1rem;
  line-height: 1.58;
}

.brickdesign-entry__composer textarea::placeholder { color: #a0a4ad; }
.brickdesign-entry__attachments {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
  padding: 0 18px 10px;
}

.brickdesign-entry__attachments .brickdesign-reference { margin: 0; }

.brickdesign-reference__trace {
  display: flex;
  min-width: 230px;
  min-height: 68px;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  border: 1px solid #6651d7;
  border-radius: 13px;
  padding: 9px 15px;
  background: linear-gradient(135deg, #6b55de, #5841c7);
  color: #fff;
  box-shadow: 0 7px 18px rgba(91, 70, 198, 0.2);
  cursor: pointer;
  text-align: left;
  transition: 150ms ease;
}

.brickdesign-reference__trace:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(91, 70, 198, 0.28);
}

.brickdesign-reference__trace:disabled { cursor: wait; opacity: 0.68; }

.brickdesign-reference__trace > .material-symbols-outlined {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 1.15rem;
}

.brickdesign-reference__trace span,
.brickdesign-reference__trace strong,
.brickdesign-reference__trace small { display: block; min-width: 0; }
.brickdesign-reference__trace strong { font-size: 0.62rem; }
.brickdesign-reference__trace small { margin-top: 4px; color: rgba(255, 255, 255, 0.72); font-size: 0.43rem; }

.brickdesign-entry__composer footer {
  display: grid;
  min-height: 64px;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 15px;
  padding: 9px 13px 11px 22px;
  border-top: 1px solid rgba(24, 28, 36, 0.07);
  color: #858a94;
  font: 650 0.64rem/1 var(--font-mono);
}

.brickdesign-entry__composer footer > span:first-child { display: inline-flex; align-items: center; gap: 7px; color: #626873; }
.brickdesign-entry__composer footer .material-symbols-outlined { font-size: 1rem; }
.brickdesign-entry__composer footer button {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 13px;
  background: var(--bd-violet);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(103, 80, 216, 0.27);
}
.brickdesign-entry__composer footer button:hover { background: var(--bd-violet-dark); transform: translateY(-1px); }
.brickdesign-entry__composer footer button:disabled { cursor: not-allowed; opacity: 0.35; transform: none; }

.brickdesign-entry__error,
.brickdesign-editor-shell__error {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 15px;
  border: 1px solid rgba(184, 64, 72, 0.16);
  border-radius: 12px;
  background: #fff4f4;
  color: #9c3b45;
  font-size: 0.77rem;
  text-align: left;
}

.brickdesign-entry__progress {
  display: grid;
  width: 100%;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(103, 80, 216, 0.16);
  border-radius: 14px;
  background: #f4f1ff;
  color: #484052;
  text-align: left;
}
.brickdesign-entry__progress strong,
.brickdesign-entry__progress small { display: block; }
.brickdesign-entry__progress strong { font-size: 0.76rem; }
.brickdesign-entry__progress small { margin-top: 3px; color: #7c7488; font-size: 0.65rem; }
.brickdesign-entry__progress button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid rgba(100, 77, 190, 0.2); border-radius: 9px; background: #fff; color: #624db6; cursor: pointer; font-size: 0.7rem; font-weight: 750; }
.brickdesign-entry__progress button .material-symbols-outlined { font-size: 1rem; }
.brickdesign-entry__spinner { width: 19px; height: 19px; border: 2px solid rgba(103, 80, 216, 0.2); border-top-color: var(--bd-violet); border-radius: 50%; animation: brickdesign-v3-spin 0.75s linear infinite; }
@keyframes brickdesign-v3-spin { to { transform: rotate(360deg); } }

.brickdesign-entry__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 22px; color: #858a93; font-size: 0.68rem; }
.brickdesign-entry__trust span { display: inline-flex; align-items: center; gap: 6px; }
.brickdesign-entry__trust .material-symbols-outlined { color: #6860a9; font-size: 0.92rem; }

.brickdesign-review { display: grid; height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr); background: #f4f5f7; }
.brickdesign-review > main { display: grid; width: min(1120px, calc(100% - 44px)); height: auto; min-height: 0; grid-template-rows: auto minmax(260px, 1fr) auto; gap: 18px; margin: 0 auto; overflow: hidden; padding: 28px 0 30px; }
.brickdesign-review__heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.brickdesign-review__heading small { color: #7361c8; font: 800 0.62rem/1 var(--font-mono); letter-spacing: 0.08em; }
.brickdesign-review__heading h1 { margin: 6px 0 0; font-size: clamp(1.5rem, 3vw, 2.35rem); letter-spacing: -0.04em; }
.brickdesign-review__heading p { max-width: 560px; margin: 0; color: #777d87; font-size: 0.78rem; line-height: 1.55; }
.brickdesign-outline-review { min-height: 0; overflow: hidden; border: 1px solid rgba(25, 29, 37, 0.12); border-radius: 18px; background: #fff; box-shadow: 0 16px 45px rgba(31, 35, 45, 0.08); }
.brickdesign-outline-review svg { display: block; width: 100%; height: 100%; min-height: 0; padding: clamp(20px, 4vw, 52px); }
.brickdesign-review__actions { display: grid; width: min(610px, 100%); grid-template-columns: 1fr 1fr; gap: 12px; justify-self: center; }
.brickdesign-review__actions button { display: flex; min-height: 63px; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--bd-line); border-radius: 14px; background: #fff; cursor: pointer; }
.brickdesign-review__actions button > span:last-child,
.brickdesign-review__actions strong,
.brickdesign-review__actions small { display: block; text-align: left; }
.brickdesign-review__actions strong { font-size: 0.76rem; }
.brickdesign-review__actions small { margin-top: 3px; color: #8a8f98; font-size: 0.61rem; }
.brickdesign-review__actions .material-symbols-outlined { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; font-size: 1.25rem; }
.brickdesign-review__actions .is-reject:hover { border-color: rgba(180, 62, 71, 0.32); color: #a53c46; }
.brickdesign-review__actions .is-reject .material-symbols-outlined { background: #fff0f1; color: #b03e48; }
.brickdesign-review__actions .is-accept { border-color: var(--bd-violet); background: var(--bd-violet); color: #fff; box-shadow: 0 9px 24px rgba(103, 80, 216, 0.22); }
.brickdesign-review__actions .is-accept:hover { background: var(--bd-violet-dark); }
.brickdesign-review__actions .is-accept small { color: rgba(255, 255, 255, 0.72); }
.brickdesign-review__actions .is-accept .material-symbols-outlined { background: rgba(255, 255, 255, 0.17); }

.brickdesign-editor-shell { display: grid; height: 100%; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr); }
.brickdesign-editor-shell__error { width: auto; margin: 8px 14px 0; }
.brickdesign-studio-v3 .brickdesign-studio__layout--editor { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) 305px; }
.brickdesign-studio-v3 .brickdesign-studio__stage { min-width: 0; min-height: 0; }
.brickdesign-editor-rail { min-width: 0; min-height: 0; overflow: auto; border-left: 1px solid rgba(28, 32, 41, 0.1); background: #f8f8fa; }
.brickdesign-editor-rail .brickdesign-studio__settings { border-left: 0; }

.brickdesign-vector-editor__tool-options {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(130px, 0.26fr) minmax(130px, 0.27fr) auto auto;
  align-items: stretch;
  gap: 7px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(37, 42, 53, 0.1);
  background: #f4f4f7;
}

.brickdesign-bond-palette { display: flex; min-width: 0; align-items: center; gap: 5px; }
.brickdesign-bond-palette > span { min-width: 108px; padding: 0 7px; }
.brickdesign-bond-palette > span small,
.brickdesign-bond-palette > span strong { display: block; }
.brickdesign-bond-palette > span small { color: #8174bd; font: 800 0.35rem/1 var(--font-mono); letter-spacing: 0.07em; }
.brickdesign-bond-palette > span strong { margin-top: 4px; color: #5b606b; font-size: 0.46rem; }
.brickdesign-bond-palette button { display: grid; min-width: 64px; height: 47px; flex: 1 1 70px; grid-template-rows: 22px auto; place-items: center; padding: 4px 5px; border: 1px solid rgba(42, 47, 59, 0.11); border-radius: 8px; background: #fff; color: #686e79; cursor: pointer; font-size: 0.37rem; font-weight: 720; }
.brickdesign-bond-palette button:hover,
.brickdesign-bond-palette button.is-active { border-color: rgba(103, 80, 216, 0.48); background: #f0ecff; color: #5540b8; box-shadow: inset 0 0 0 1px rgba(103, 80, 216, 0.11); }
.brickdesign-bond-palette button i { display: block; width: 45px; height: 20px; opacity: 0.72; background-size: 22px 10px; }
.brickdesign-bond-palette button i.is-running { background-image: linear-gradient(#545866 1px, transparent 1px), linear-gradient(90deg, #545866 1px, transparent 1px); }
.brickdesign-bond-palette button i.is-quarter { background-image: linear-gradient(#545866 1px, transparent 1px), repeating-linear-gradient(75deg, transparent 0 10px, #545866 10px 11px); }
.brickdesign-bond-palette button i.is-stack { background-image: linear-gradient(#545866 1px, transparent 1px), linear-gradient(90deg, #545866 1px, transparent 1px); background-size: 21px 10px; }
.brickdesign-bond-palette button i.is-wild { background-image: linear-gradient(#545866 1px, transparent 1px), repeating-linear-gradient(90deg, transparent 0 13px, #545866 13px 14px, transparent 14px 22px); }

.brickdesign-tool-select { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; padding: 4px 8px; border: 1px solid rgba(42, 47, 59, 0.11); border-radius: 8px; background: #fff; }
.brickdesign-tool-select > span { color: #858a95; font: 750 0.34rem/1 var(--font-mono); text-transform: uppercase; }
.brickdesign-tool-select select { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #555b66; font-size: 0.43rem; font-weight: 720; }
.brickdesign-saw-toggle { display: flex; min-width: 116px; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid rgba(42, 47, 59, 0.11); border-radius: 8px; background: #fff; color: #666c77; cursor: pointer; }
.brickdesign-saw-toggle.is-active { border-color: rgba(103, 80, 216, 0.42); background: #f0ecff; color: #5945b5; }
.brickdesign-saw-toggle .material-symbols-outlined { font-size: 1rem; }
.brickdesign-saw-toggle strong,
.brickdesign-saw-toggle small { display: block; text-align: left; }
.brickdesign-saw-toggle strong { font-size: 0.41rem; }
.brickdesign-saw-toggle small { margin-top: 2px; color: #8c9099; font-size: 0.31rem; }
.brickdesign-joint-readout { display: grid; min-width: 60px; place-content: center; padding: 4px 8px; border-radius: 8px; background: #292c34; color: #fff; text-align: center; }
.brickdesign-joint-readout small,
.brickdesign-joint-readout strong { display: block; }
.brickdesign-joint-readout small { color: #abaeb8; font: 750 0.31rem/1 var(--font-mono); }
.brickdesign-joint-readout strong { margin-top: 4px; font-size: 0.45rem; }

.brickdesign-studio-v3 .brickdesign-vector-editor__actions button span:not(.material-symbols-outlined) { display: inline-flex; align-items: center; gap: 5px; }
.brickdesign-studio-v3 .brickdesign-vector-editor__actions kbd { padding: 2px 4px; border: 1px solid rgba(54, 59, 71, 0.16); border-radius: 4px; background: rgba(255, 255, 255, 0.5); color: #858a94; font: 700 0.31rem/1 var(--font-mono); }
.brickdesign-studio-v3 .brickdesign-vector-editor__actions .is-stop { color: #a0444b; }
.brickdesign-vector-canvas pattern path { fill: none; stroke: #5b6370; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.brickdesign-vector-canvas #vector-grid-minor path,
.brickdesign-vector-canvas #vector-grid-major path { stroke: currentColor; }
.brickdesign-vector-draft.is-arch path { fill: none; stroke: #6c51df; stroke-width: 4; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; }
.brickdesign-vector-element__shape { transition: opacity 100ms ease; }
.brickdesign-plan__brick { stroke: #11151a !important; stroke-width: 0.22; }
.brickdesign-plan__brick.is-figure { stroke-width: 0.32; }

@media (max-width: 1240px) {
  .brickdesign-vector-editor__tool-options { grid-template-columns: 1fr 150px 150px; }
  .brickdesign-saw-toggle,
  .brickdesign-joint-readout { min-height: 42px; }
  .brickdesign-studio-v3 .brickdesign-studio__layout--editor { grid-template-columns: minmax(0, 1fr) 275px; }
}

@media (max-width: 980px) {
  .brickdesign-workbench.brickdesign-studio-v3 { height: auto; min-height: calc(100svh - 80px); overflow: visible; }
  .brickdesign-review__heading { align-items: start; flex-direction: column; gap: 8px; }
  .brickdesign-studio-v3 .brickdesign-studio__layout--editor { grid-template-columns: 1fr; }
  .brickdesign-editor-rail { max-height: 620px; border-top: 1px solid var(--bd-line); border-left: 0; }
  .brickdesign-vector-editor__tool-options { grid-template-columns: 1fr 1fr; }
  .brickdesign-bond-palette { grid-column: 1 / -1; overflow-x: auto; }
}

@media (max-width: 640px) {
  .brickdesign-workbench.brickdesign-studio-v3 { border-radius: 14px; }
  .brickdesign-entry__nav,
  .brickdesign-review > header { min-height: 65px; padding: 10px 14px; }
  .brickdesign-entry__hero { width: calc(100% - 24px); padding: 42px 0; }
  .brickdesign-entry__hero h1 { font-size: 2.25rem; }
  .brickdesign-entry__composer textarea { min-height: 150px; padding: 20px 18px 8px; }
  .brickdesign-entry__attachments { grid-template-columns: 1fr; }
  .brickdesign-reference__trace { width: 100%; min-width: 0; }
  .brickdesign-entry__composer footer { grid-template-columns: 1fr auto; padding-left: 16px; }
  .brickdesign-entry__composer footer > span:nth-child(2) { display: none; }
  .brickdesign-entry__trust { align-items: start; flex-direction: column; }
  .brickdesign-review > main { width: calc(100% - 24px); }
  .brickdesign-review__actions { grid-template-columns: 1fr; }
  .brickdesign-outline-review svg { min-height: 330px; padding: 14px; }
  .brickdesign-vector-editor__tool-options { grid-template-columns: 1fr; }
  .brickdesign-bond-palette { align-items: stretch; }
  .brickdesign-bond-palette > span { display: none; }
  .brickdesign-bond-palette button { min-width: 75px; }
}

/* Brick Design v4 · lokale CAD-werkplaats --------------------------------- */
body:has(.brickdesign-page) .site-header,
body:has(.brickdesign-page) .site-footer { display: none; }

body:has(.brickdesign-page) { background: #f4f5f7; }

.brickdesign-page.container {
  width: 100%;
  max-width: none;
  padding: 8px;
}

.brickdesign-workbench.brickdesign-studio-v3 {
  height: calc(100svh - 16px);
  min-height: 720px;
  border-color: #dfe2e7;
  border-radius: 16px;
  background: #f7f8fa;
  box-shadow: 0 16px 48px rgba(28, 34, 45, 0.09);
}

.brickdesign-local-brand {
  display: flex;
  min-width: max-content;
  align-items: center;
  gap: 11px;
}

.brickdesign-local-brand img {
  width: 104px;
  height: 42px;
  object-fit: contain;
}

.brickdesign-local-brand strong,
.brickdesign-local-brand small { display: block; }
.brickdesign-local-brand strong { color: #17191e; font-size: 1.04rem; letter-spacing: -0.025em; }
.brickdesign-local-brand small { margin-top: 2px; color: #7564c6; font: 800 0.55rem/1 var(--font-mono); letter-spacing: 0.08em; }

.brickdesign-entry {
  background:
    linear-gradient(rgba(103, 80, 216, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 80, 216, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 35%, rgba(103, 80, 216, 0.1), transparent 30rem),
    #fbfbfc;
  background-size: 32px 32px, 32px 32px, auto, auto;
}

.brickdesign-entry__hero { width: min(980px, calc(100% - 40px)); }
.brickdesign-entry__hero h1 { max-width: 900px; font-size: clamp(2.5rem, 5.2vw, 4.7rem); }
.brickdesign-entry__composer--local { margin-top: 30px; }
.brickdesign-entry__composer--local:focus-within { border-color: rgba(103, 80, 216, 0.35); }

.brickdesign-entry__composer--local .brickdesign-entry__attachments { padding: 14px 20px 20px; }
.brickdesign-entry__composer--local .brickdesign-reference__picker {
  min-height: 108px;
  border: 1.5px dashed rgba(103, 80, 216, 0.38);
  border-radius: 15px;
  background: #faf9ff;
}
.brickdesign-entry__composer--local .brickdesign-reference__picker strong { font-size: 0.76rem; }
.brickdesign-entry__composer--local .brickdesign-reference__picker small { font-size: 0.62rem; }
.brickdesign-entry__composer--local footer { grid-template-columns: 1fr auto; }

.brickdesign-studio__topbar {
  display: grid;
  min-height: 70px;
  grid-template-columns: auto minmax(520px, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 10px 16px;
  border-bottom: 1px solid #dfe2e7;
  background: rgba(255, 255, 255, 0.96);
}

.brickdesign-app-menu { display: flex; min-width: 0; align-items: center; gap: 4px; }
.brickdesign-app-menu button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #363a43;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 720;
}
.brickdesign-app-menu button:hover,
.brickdesign-app-menu button.is-active { border-color: #e1ddf7; background: #f4f1ff; color: #5842bd; }
.brickdesign-app-menu button:disabled { cursor: not-allowed; opacity: 0.36; }
.brickdesign-app-menu .material-symbols-outlined { font-size: 1.12rem; }

.brickdesign-studio-v3 .brickdesign-studio__engine-state { justify-self: end; }
.brickdesign-studio-v3 .brickdesign-studio__engine-state > button {
  border-color: #624bd0;
  background: #624bd0;
  color: #fff;
}

.brickdesign-studio-v3 .brickdesign-studio__layout--editor {
  grid-template-columns: 292px minmax(0, 1fr);
  background: #f7f8fa;
}
.brickdesign-studio-v3 .brickdesign-studio__stage { grid-column: 2; grid-row: 1; }
.brickdesign-editor-rail {
  grid-column: 1;
  grid-row: 1;
  border-right: 1px solid #dfe2e7;
  border-left: 0;
  background: #fbfbfc;
}

.brickdesign-stage-tabs {
  min-height: 62px;
  padding-inline: 12px;
  border-bottom-color: #dfe2e7;
  background: #fff;
}
.brickdesign-stage-tabs > button { min-height: 48px; }
.brickdesign-stage-tabs__local {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6f7580;
  font-size: 0.64rem;
  font-weight: 720;
}
.brickdesign-stage-tabs__local .material-symbols-outlined { color: #36a183; font-size: 1rem; }

.brickdesign-vector-editor__toolbar {
  min-height: 72px;
  padding: 9px 12px;
  border-bottom: 1px solid #e1e3e8;
  background: #fff;
}
.brickdesign-vector-editor__toolbar > div:first-child small { font-size: 0.48rem; }
.brickdesign-vector-editor__toolbar > div:first-child strong { font-size: 0.74rem; }
.brickdesign-vector-editor__actions { flex-wrap: wrap; justify-content: flex-end; }
.brickdesign-vector-editor__actions button {
  min-width: 56px;
  min-height: 49px;
  border-radius: 9px;
  font-size: 0.56rem;
}
.brickdesign-vector-editor__actions button:nth-child(-n + 2) { border-color: #ded9f6; background: #f6f3ff; }
.brickdesign-vector-editor__actions button.is-active { border-color: #6650d7; background: #6650d7; color: #fff; }

.brickdesign-vector-editor__tool-options {
  grid-template-columns: minmax(420px, 1fr) 150px 150px auto auto;
  padding: 9px 11px;
  background: #f7f7f9;
}
.brickdesign-bond-palette button { height: 51px; font-size: 0.47rem; }
.brickdesign-tool-select > span { font-size: 0.43rem; }
.brickdesign-tool-select select { font-size: 0.55rem; }

.brickdesign-vector-editor__body { grid-template-columns: minmax(0, 1fr) 275px; }
.brickdesign-vector-editor__canvas-wrap {
  padding: 18px;
  background:
    linear-gradient(45deg, #f0f1f3 25%, transparent 25%) 0 0 / 12px 12px,
    linear-gradient(45deg, transparent 75%, #f0f1f3 75%) 0 0 / 12px 12px,
    #f7f8fa;
}
.brickdesign-vector-canvas { border: 1px solid #cfd2d8; box-shadow: 0 12px 34px rgba(37, 42, 52, 0.12); }
.brickdesign-vector-canvas__paper { fill: #fffdfa; }
.brickdesign-vector-canvas__grid { opacity: 0.22; }
.brickdesign-vector-editor__sidebar { border-left-color: #dfe2e7; background: #fbfbfc; }

/* BrickCore SVG Tracer ------------------------------------------------------- */

.svgtracer-workspace.is-svg-ready { background: #f4f5f8; }
.svgtracer-rust-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid #e1e3e8;
  border-radius: 999px;
  background: #fff;
  color: #555c68;
  font: 750 0.68rem/1 var(--font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.svgtracer-rust-badge .material-symbols-outlined { color: #624bd0; font-size: 1.05rem; }
.svgtracer-capabilities { max-width: 760px; }

.svgtracer-preview {
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(rgba(109, 92, 190, 0.045) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, rgba(109, 92, 190, 0.045) 1px, transparent 1px) 0 0 / 26px 26px,
    #fff;
}
.svgtracer-preview svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 1px rgba(19, 24, 35, 0.05));
}
.svgtracer-preview path { vector-effect: non-scaling-stroke; }

.svgtracer-result {
  display: grid;
  height: 100%;
  min-height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  background: #f4f5f8;
}
.svgtracer-result > .brickdesign-topbar {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 18px;
  border-bottom: 1px solid #dfe2e7;
  background: rgba(255, 255, 255, 0.96);
}
.svgtracer-result .brickdesign-app-menu .is-primary {
  border-color: #624bd0;
  background: #624bd0;
  color: #fff;
}
.svgtracer-result > main {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  padding: clamp(18px, 2.4vw, 34px);
  overflow: hidden;
}
.svgtracer-result__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}
.svgtracer-result__heading small {
  color: #6953ce;
  font: 800 0.62rem/1 var(--font-mono);
  letter-spacing: 0.13em;
}
.svgtracer-result__heading h1 { margin: 7px 0 0; color: #20232a; font-size: clamp(1.55rem, 2.4vw, 2.4rem); }
.svgtracer-result__facts { display: flex; gap: 8px; }
.svgtracer-result__facts > span {
  display: grid;
  min-width: 118px;
  gap: 3px;
  padding: 10px 13px;
  border: 1px solid #e0e2e7;
  border-radius: 11px;
  background: #fff;
}
.svgtracer-result__facts b { color: #252934; font-size: 0.82rem; }
.svgtracer-result__facts small { color: #818692; font-size: 0.59rem; }
.svgtracer-result .svgtracer-preview { box-shadow: 0 15px 42px rgba(30, 34, 45, 0.09); }
.svgtracer-result__notice {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  border: 1px solid #cae9df;
  border-radius: 12px;
  background: #f1fbf7;
  color: #25745f;
}
.svgtracer-result__notice .material-symbols-outlined { font-size: 1.35rem; }
.svgtracer-result__notice strong,
.svgtracer-result__notice small { display: block; }
.svgtracer-result__notice strong { font-size: 0.74rem; }
.svgtracer-result__notice small { margin-top: 3px; color: #66857c; font-size: 0.62rem; }

@media (max-width: 1260px) {
  .brickdesign-studio__topbar { grid-template-columns: auto 1fr; }
  .brickdesign-studio__engine-state { display: none !important; }
  .brickdesign-app-menu { justify-content: flex-end; }
  .brickdesign-studio-v3 .brickdesign-studio__layout--editor { grid-template-columns: 260px minmax(0, 1fr); }
  .brickdesign-vector-editor__tool-options { grid-template-columns: 1fr 145px 145px; }
}

@media (max-width: 980px) {
  body:has(.brickdesign-page) .site-header { display: block; }
  .brickdesign-page.container { padding: 6px; }
  .brickdesign-workbench.brickdesign-studio-v3 { height: auto; border-radius: 12px; }
  .brickdesign-studio__topbar { display: flex; align-items: flex-start; flex-direction: column; }
  .brickdesign-app-menu { width: 100%; overflow-x: auto; justify-content: flex-start; }
  .brickdesign-studio-v3 .brickdesign-studio__layout--editor { grid-template-columns: 1fr; }
  .brickdesign-studio-v3 .brickdesign-studio__stage,
  .brickdesign-editor-rail { grid-column: 1; }
  .brickdesign-studio-v3 .brickdesign-studio__stage { grid-row: 1; }
  .brickdesign-editor-rail { grid-row: 2; border-top: 1px solid #dfe2e7; border-right: 0; }
  .svgtracer-result__heading { align-items: flex-start; flex-direction: column; }
  .svgtracer-result__facts { width: 100%; overflow-x: auto; }
}

@media (max-width: 640px) {
  .brickdesign-entry__hero { width: calc(100% - 22px); }
  .brickdesign-entry__hero h1 { font-size: 2.4rem; }
  .brickdesign-entry__composer--local .brickdesign-entry__attachments { padding: 10px; }
  .brickdesign-app-menu button { min-width: 44px; padding-inline: 8px; font-size: 0; }
  .brickdesign-app-menu .material-symbols-outlined { font-size: 1.2rem; }
}

@media print {
  body * { visibility: hidden; }
  .brickdesign-studio-v3,
  .brickdesign-studio-v3 * { visibility: visible; }
  .brickdesign-studio-v3 { position: absolute; inset: 0; width: 100%; height: auto !important; overflow: visible !important; border: 0 !important; box-shadow: none !important; }
  .brickdesign-studio__topbar,
  .brickdesign-stage-tabs,
  .brickdesign-vector-editor__toolbar,
  .brickdesign-vector-editor__tool-options,
  .brickdesign-vector-editor__drawbar,
  .brickdesign-vector-editor__validation,
  .brickdesign-vector-editor__sidebar,
  .brickdesign-editor-rail,
  .brickdesign-editor-shell__error { display: none !important; }
  .brickdesign-studio-v3 .brickdesign-studio__layout--editor,
  .brickdesign-vector-editor__body { display: block !important; }
  .brickdesign-stage-panel { display: none !important; }
  .brickdesign-stage-panel.is-active { display: block !important; }
  .brickdesign-vector-editor__canvas-wrap,
  .brickdesign-studio__sheet-wrap { padding: 0 !important; background: #fff !important; }
  .brickdesign-vector-canvas__grid { display: none; }
  .brickdesign-vector-canvas,
  .brickdesign-studio__plan svg { width: 100% !important; height: auto !important; max-height: 95vh; }
  .svgtracer-result > .brickdesign-topbar,
  .svgtracer-result__heading,
  .svgtracer-result__notice { display: none !important; }
  .svgtracer-result > main { display: block; padding: 0; }
  .svgtracer-preview { border: 0 !important; box-shadow: none !important; background: #fff !important; }
  .svgtracer-preview svg { width: 100% !important; height: auto !important; max-height: 98vh; padding: 0 !important; }

  .brickdesign-fabrication-print {
    display: block !important;
    break-before: page;
    padding: 12mm;
    color: #17130f;
  }

  .brickdesign-fabrication-print > header {
    margin-bottom: 8mm;
    border-bottom: 0.35mm solid #17130f;
    padding-bottom: 4mm;
  }

  .brickdesign-fabrication-print > header small,
  .brickdesign-fabrication-print > header p { margin: 0; font-size: 9pt; }
  .brickdesign-fabrication-print > header h2 { margin: 1mm 0; font-size: 22pt; }

  .brickdesign-fabrication-print__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 7mm;
  }

  .brickdesign-fabrication-card {
    display: grid;
    width: max-content;
    max-width: 185mm;
    break-inside: avoid;
    gap: 2mm;
    border: 0.25mm solid #999;
    padding: 4mm;
  }

  .brickdesign-fabrication-card header { display: flex; justify-content: space-between; gap: 8mm; font-size: 9pt; }
  .brickdesign-fabrication-card__template { line-height: 0; }
  .brickdesign-fabrication-card__template svg { width: revert !important; height: revert !important; max-height: none !important; }
  .brickdesign-fabrication-card__template polygon { fill: #d9894f; stroke: #17130f; stroke-width: 0.035; vector-effect: non-scaling-stroke; }
  .brickdesign-fabrication-card > b,
  .brickdesign-fabrication-card > small { max-width: 175mm; font-size: 8pt; line-height: 1.35; }
}

.brickdesign-fabrication-print { display: none; }