:root {
  --bg: #f4f5f2;
  --surface: #ffffff;
  --surface-soft: #f8f9f6;
  --surface-muted: #eef1ed;
  --ink: #17211f;
  --ink-2: #33413d;
  --muted: #6d7a76;
  --muted-2: #899590;
  --line: #dde3df;
  --line-strong: #cdd6d1;
  --teal: #0f7468;
  --teal-dark: #133c36;
  --teal-soft: #e8f2ef;
  --teal-pale: #f2f8f6;
  --blue: #3b6e9e;
  --blue-soft: #edf3f8;
  --amber: #c27a2c;
  --amber-strong: #9a5a19;
  --amber-soft: #fbf3e8;
  --red: #b34747;
  --red-soft: #faeceb;
  --green: #23795f;
  --green-soft: #eaf5f0;
  --shadow-sm: 0 1px 2px rgba(25, 47, 40, 0.05);
  --shadow-md: 0 12px 32px rgba(25, 47, 40, 0.13);
  --shadow-lg: 0 24px 60px rgba(20, 39, 33, 0.18);
  --radius: 8px;
  --radius-sm: 6px;
  --sidebar-w: 228px;
  --topbar-h: 60px;
  --font: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 14px;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--font);
  background: var(--bg);
  line-height: 1.5;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

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

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(15, 116, 104, 0.45);
  outline-offset: 2px;
}

input,
select,
textarea {
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #aebdb7;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15, 116, 104, 0.1);
}

input:disabled,
select:disabled,
textarea:disabled {
  color: var(--muted);
  background: #f2f4f1;
  cursor: not-allowed;
}

textarea {
  resize: vertical;
  line-height: 1.6;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

svg {
  display: block;
}

code,
kbd {
  font-family: var(--mono);
}

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

.icon {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
}

.spin {
  animation: spin 0.9s linear infinite;
}

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

.muted {
  color: var(--muted);
}

.text-warning {
  color: var(--amber) !important;
}

.text-danger {
  color: var(--red) !important;
}

.text-success {
  color: var(--green) !important;
}

.num {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

.strong-num {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

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

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  display: flex;
  width: var(--sidebar-w);
  flex-direction: column;
  color: #d8e4df;
  background: #153a34;
  border-right: 1px solid #284a43;
}

.brand {
  display: flex;
  height: 72px;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand__mark {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  color: #d8eee7;
  background: #0f7468;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.brand__text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.brand__text strong {
  font-family: "STZhongsong", "SimSun", serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 2px;
}

.brand__text span {
  margin-top: 2px;
  overflow: hidden;
  color: #9fb8b0;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.org-switcher {
  display: flex;
  min-height: 58px;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  margin: 12px 12px 8px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 7px;
}

.org-switcher__badge {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  color: #d8ece5;
  font-size: 12px;
  font-weight: 700;
  background: rgba(15, 116, 104, 0.8);
  border-radius: 6px;
}

.org-switcher__body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.org-switcher__body strong {
  overflow: hidden;
  color: #edf6f2;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.org-switcher__body span {
  color: #8fa9a2;
  font-size: 10px;
}

.org-switcher > .icon {
  color: #8ba39d;
}

.main-nav {
  padding: 2px 10px 12px;
}

.nav-label {
  display: block;
  padding: 8px 10px 6px;
  color: #7f9a93;
  font-size: 10px;
}

.nav-item {
  position: relative;
  display: flex;
  height: 38px;
  align-items: center;
  gap: 11px;
  margin: 2px 0;
  padding: 0 10px;
  color: #b8cbc5;
  border-radius: 6px;
  transition: color 0.15s, background-color 0.15s;
}

.nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.065);
}

.nav-item.is-active {
  color: #fff;
  background: #0f6c62;
  box-shadow: inset 3px 0 0 #6ec2af;
}

.nav-item.is-active::after {
  position: absolute;
  right: 11px;
  width: 4px;
  height: 4px;
  background: #9edbcc;
  border-radius: 50%;
  content: "";
}

.nav-item > span:nth-child(2) {
  flex: 1;
  font-size: 13px;
}

.nav-count {
  display: grid;
  min-width: 20px;
  height: 18px;
  place-items: center;
  padding: 0 5px;
  color: #fff;
  font-size: 10px;
  background: #b86f2e;
  border-radius: 9px;
}

.sidebar-project {
  padding: 6px 12px 0;
}

.sidebar-project__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 3px 8px;
  color: #7f9a93;
  font-size: 10px;
}

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

.sidebar-project__head .mini-label {
  color: #9ab0aa;
}

.sidebar-project__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 11px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 7px;
  transition: border-color 0.15s, background-color 0.15s;
}

.sidebar-project__card:hover {
  background: rgba(0, 0, 0, 0.14);
  border-color: rgba(255, 255, 255, 0.13);
}

.project-code {
  color: #88aaa0;
  font-family: var(--mono);
  font-size: 9px;
}

.sidebar-project__card > strong {
  overflow: hidden;
  color: #eff7f4;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sidebar-project__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
  color: #93aba4;
  font-size: 9px;
}

.sidebar-project__meta .status {
  color: #b4d6cb;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.08);
}

.sidebar-bottom {
  margin-top: auto;
  padding: 10px 12px 12px;
}

.ai-service-card {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 9px 9px;
  color: #cce0d9;
  text-align: left;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
}

.ai-service-card:hover {
  background: rgba(255, 255, 255, 0.085);
}

.ai-service-card__icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #d9ede7;
  background: rgba(15, 116, 104, 0.55);
  border-radius: 6px;
}

.ai-service-card > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.ai-service-card strong {
  color: #e7f2ee;
  font-size: 10px;
  font-weight: 600;
}

.ai-service-card span span {
  color: #90aaa3;
  font-size: 9px;
}

.ai-service-card > .icon {
  color: #7f9a93;
}

.sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 2px 0;
  color: #6f8b84;
  font-size: 9px;
}

.sidebar-footer .icon-btn {
  color: #7d9891;
}

.workspace {
  min-height: 100vh;
  margin-left: var(--sidebar-w);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  height: var(--topbar-h);
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.mobile-menu-btn {
  display: none !important;
}

.topbar__context {
  display: flex;
  min-width: 285px;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.topbar__eyebrow {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}

.topbar__divider {
  width: 1px;
  height: 16px;
  background: var(--line);
}

.project-switch,
.role-switch,
.compact-select {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.project-switch select,
.role-switch select,
.compact-select select {
  height: 31px;
  padding: 0 27px 0 9px;
  color: var(--ink-2);
  font-size: 11px;
  appearance: none;
  background-color: transparent;
  border-color: transparent;
}

.project-switch select:hover,
.role-switch select:hover,
.compact-select select:hover {
  background: var(--surface-soft);
  border-color: var(--line);
}

.project-switch > .icon,
.role-switch > .icon,
.compact-select > .icon:last-child {
  position: absolute;
  right: 8px;
  pointer-events: none;
  color: var(--muted-2);
}

.global-search {
  display: flex;
  width: auto;
  max-width: 470px;
  min-width: 180px;
  height: 34px;
  flex: 1 1 300px;
  align-items: center;
  gap: 8px;
  padding: 0 9px 0 11px;
  color: #7d8985;
  background: #f5f7f4;
  border: 1px solid #e2e7e3;
  border-radius: 6px;
}

.global-search:hover {
  background: #fff;
  border-color: #bdcbc6;
}

.global-search > span {
  flex: 1;
  overflow: hidden;
  font-size: 11px;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.global-search kbd {
  padding: 2px 5px;
  color: #8a9692;
  font-size: 9px;
  background: #fff;
  border: 1px solid #dbe1de;
  border-radius: 3px;
}

.topbar__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.sync-pill {
  display: flex;
  height: 30px;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  color: #41675d;
  font-size: 10px;
  background: #edf6f2;
  border: 1px solid #d5e8e1;
  border-radius: 15px;
  white-space: nowrap;
}

.sync-pill:hover {
  border-color: #acd1c5;
}

.sync-pill__dot {
  width: 6px;
  height: 6px;
  background: #38a075;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(56, 160, 117, 0.1);
}

.sync-pill small {
  color: #8aa49c;
  font-size: 9px;
}

.icon-btn {
  position: relative;
  display: inline-grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  color: #56635f;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.icon-btn:hover {
  color: var(--ink);
  background: #f3f5f2;
  border-color: var(--line);
}

.icon-btn--sm {
  width: 26px;
  height: 26px;
}

.icon-btn--bordered {
  background: #fff;
  border-color: var(--line);
}

.notification-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 5px;
  height: 5px;
  background: var(--red);
  border: 1px solid #fff;
  border-radius: 50%;
}

.role-switch {
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}

.role-switch select {
  padding-left: 32px;
}

.avatar {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #eaf4f0;
  font-size: 12px;
  font-weight: 600;
  background: #315f55;
  border-radius: 50%;
}

.avatar--sm {
  width: 26px;
  height: 26px;
  font-size: 10px;
}

.avatar--xs {
  width: 21px;
  height: 21px;
  font-size: 9px;
}

.role-switch .avatar {
  position: absolute;
  left: 4px;
  width: 23px;
  height: 23px;
  font-size: 9px;
}

.main-content {
  min-width: 0;
  padding: 21px 24px 44px;
}

.main-content--full {
  padding: 14px 16px 18px;
}

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.page-heading__text {
  min-width: 0;
}

.eyebrow {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
}

.page-title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.page-title-row h1,
.project-heading-line h1,
.takeoff-title-line h1 {
  margin: 0;
  color: var(--ink);
  font-size: 23px;
  font-weight: 650;
  line-height: 1.25;
}

.page-subtitle {
  color: var(--muted);
  font-size: 11px;
}

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

.btn {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
}

.btn:hover {
  background: #fafbf9;
  border-color: #aebdb8;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  color: #9ca6a2;
  background: #f2f4f1;
  border-color: #dfe4e1;
  box-shadow: none;
}

.btn--primary {
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 1px 2px rgba(15, 116, 104, 0.18);
}

.btn--primary:hover {
  background: #0c675c;
  border-color: #0c675c;
}

.btn--primary:disabled {
  color: #b9d0ca;
  background: #8db3aa;
  border-color: #8db3aa;
}

.btn--secondary {
  color: var(--ink-2);
  background: #fff;
}

.btn--ghost {
  color: var(--muted);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.btn--ghost:hover {
  color: var(--ink);
  background: #f2f5f2;
  border-color: transparent;
}

.btn--danger {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

.btn--danger-outline {
  color: var(--red);
  background: #fff;
  border-color: #e6c4c1;
}

.btn--sm {
  min-height: 28px;
  padding: 0 9px;
  font-size: 10px;
}

.btn--block {
  width: 100%;
}

.status {
  display: inline-flex;
  min-height: 21px;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  color: #53615c;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  background: #f2f4f1;
  border: 1px solid #e0e5e2;
  border-radius: 10px;
}

.status__dot {
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
}

.status--success {
  color: #24735a;
  background: #edf7f2;
  border-color: #cee5db;
}

.status--warning {
  color: #a6631f;
  background: #fdf5e9;
  border-color: #ecd5b3;
}

.status--danger-soft {
  color: #a34b35;
  background: #fbf0eb;
  border-color: #ebcdbf;
}

.status--danger {
  color: #a33d3d;
  background: #faeceb;
  border-color: #eac9c7;
}

.status--info {
  color: #396c97;
  background: #edf4f9;
  border-color: #cfe0ed;
}

.status--plain {
  padding: 1px 0;
  background: transparent;
  border-color: transparent;
}

.status--compact {
  min-height: 18px;
  padding: 1px 5px;
  font-size: 8px;
}

.tag {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 1px 6px;
  color: #52615c;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  background: #f2f4f1;
  border: 1px solid #e1e6e3;
  border-radius: 4px;
}

.tag--success {
  color: #276b55;
  background: #edf7f2;
  border-color: #d4e8df;
}

.tag--warning {
  color: #9d601e;
  background: #fdf5ea;
  border-color: #edd6b7;
}

.tag--danger {
  color: #a3443e;
  background: #faeceb;
  border-color: #eac9c7;
}

.tag--info {
  color: #346b98;
  background: #eef5fa;
  border-color: #d1e0ec;
}

.tag--block {
  display: flex;
  width: max-content;
  margin: 2px 0;
}

.tag-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 0;
  color: var(--teal);
  font-size: 10px;
  font-weight: 600;
  background: transparent;
}

.text-link:hover {
  color: var(--teal-dark);
  text-decoration: underline;
}

.panel {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 1px rgba(30, 47, 41, 0.02);
}

.panel--flush {
  overflow: hidden;
}

.panel__header {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid #edf0ed;
}

.panel__header--padded {
  padding: 12px 16px;
}

.panel__header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.panel__header p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.count-chip {
  display: inline-flex;
  height: 22px;
  align-items: center;
  padding: 0 7px;
  color: #4d5c57;
  font-size: 9px;
  background: #f3f5f2;
  border: 1px solid #e1e6e3;
  border-radius: 11px;
}

.toast-region {
  position: fixed;
  top: 74px;
  right: 20px;
  z-index: 200;
  display: flex;
  width: min(360px, calc(100vw - 40px));
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding: 9px 10px 9px 12px;
  color: #fff;
  background: #203c35;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: auto;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast--error {
  background: #7b3535;
}

.toast--info {
  background: #294e68;
}

.toast__icon {
  color: #9bd9c8;
}

.toast--error .toast__icon {
  color: #f5c3bd;
}

.toast__message {
  flex: 1;
  font-size: 11px;
  line-height: 1.5;
}

.toast__action {
  padding: 3px 6px;
  color: #fff;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.toast .icon-btn {
  color: rgba(255, 255, 255, 0.65);
}

.toast .icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: transparent;
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  color: #50605a;
  font-size: 10px;
  line-height: 1.6;
  background: #f5f7f4;
  border: 1px solid #e4e9e5;
  border-radius: 6px;
}

.notice > .icon {
  margin-top: 1px;
}

.notice--info {
  color: #45657b;
  background: #f0f6fa;
  border-color: #d7e5ef;
}

.notice--warning {
  color: #805a2b;
  background: #fbf6ed;
  border-color: #ead8bb;
}

.notice--danger {
  color: #8a4741;
  background: #fbefee;
  border-color: #ebcecb;
}

.notice--success {
  color: #2e6655;
  background: #edf7f2;
  border-color: #d0e7dd;
}

.permission-note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 8px 0 0;
  color: #8b9692;
  font-size: 9px;
}

.permission-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: #73511f;
  font-size: 10px;
  background: #fbf4e8;
  border: 1px solid #ead2ae;
  border-radius: 6px;
}

.permission-banner > span {
  flex: 1;
  line-height: 1.55;
}

.permission-banner strong {
  display: block;
  font-size: 10px;
}

.field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.field > span:first-child {
  color: #4f5e59;
  font-size: 10px;
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  font-size: 11px;
}

.field textarea {
  min-height: 70px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.field--full {
  grid-column: 1 / -1;
}

.inline-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.inline-fields input {
  min-width: 0;
}

.input-with-suffix {
  position: relative;
  display: block;
}

.input-with-suffix input {
  padding-right: 38px;
}

.input-with-suffix i {
  position: absolute;
  top: 50%;
  right: 10px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  transform: translateY(-50%);
}

.form-error {
  margin-top: 10px;
  padding: 8px 10px;
  color: #923f3b;
  font-size: 10px;
  background: #faeceb;
  border: 1px solid #eac9c7;
  border-radius: 5px;
}

.empty-state {
  display: flex;
  min-height: 250px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  background: #fff;
  border: 1px dashed #ced8d3;
  border-radius: 8px;
}

.empty-state__icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin-bottom: 12px;
  color: #739088;
  background: #f0f5f2;
  border-radius: 50%;
}

.empty-state strong {
  margin-bottom: 6px;
  font-size: 13px;
}

.empty-state p {
  max-width: 360px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 10px;
}

.segmented-control {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: #f1f3f0;
  border: 1px solid #e0e5e2;
  border-radius: 5px;
}

.segmented-control button {
  display: inline-flex;
  height: 25px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 9px;
  border-radius: 3px;
}

.segmented-control button:hover {
  color: var(--ink);
}

.segmented-control button.is-active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 2px rgba(25, 47, 40, 0.1);
}

.segmented-control--wide {
  flex: 1;
}

.segmented-control--wide button {
  flex: 1;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.toolbar__left,
.toolbar__right {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.toolbar__right {
  justify-content: flex-end;
}

.search-field {
  display: flex;
  width: 275px;
  height: 32px;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  color: var(--muted-2);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
}

.search-field:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15, 116, 104, 0.08);
}

.search-field input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  font-size: 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.search-field input:focus {
  box-shadow: none;
}

.search-field--compact {
  width: 210px;
}

.filter-btn {
  display: inline-flex;
  height: 32px;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  color: #5d6a66;
  font-size: 9px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.filter-btn:hover,
.filter-btn.is-active {
  color: var(--ink);
  border-color: #b9c7c1;
}

.page-tabs {
  display: flex;
  height: 37px;
  align-items: flex-end;
  gap: 20px;
  margin: -4px 0 15px;
  border-bottom: 1px solid var(--line);
}

.page-tabs > button {
  position: relative;
  display: inline-flex;
  height: 37px;
  align-items: center;
  gap: 6px;
  padding: 0 1px;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.page-tabs > button:hover {
  color: var(--ink);
}

.page-tabs > button.is-active {
  color: var(--teal-dark);
  font-weight: 650;
}

.page-tabs > button.is-active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--teal);
  content: "";
}

.page-tabs > button > span {
  display: inline-grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  color: #866129;
  font-size: 8px;
  background: #fbf1df;
  border-radius: 8px;
}

.page-tabs__right {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  padding-bottom: 6px;
}

.breadcrumb {
  display: flex;
  min-height: 22px;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 9px;
}

.breadcrumb a:hover {
  color: var(--teal);
}

.dot-separator {
  width: 3px;
  height: 3px;
  margin: 0 2px;
  background: #b1bcb8;
  border-radius: 50%;
}

/* Dashboard */
.metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.metric-card {
  position: relative;
  display: flex;
  min-height: 92px;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.metric-card:hover {
  border-color: #b9c8c2;
  box-shadow: 0 6px 18px rgba(26, 48, 40, 0.07);
  transform: translateY(-1px);
}

.metric-card__icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 7px;
}

.metric-card--amber .metric-card__icon {
  color: var(--amber);
  background: var(--amber-soft);
}

.metric-card--blue .metric-card__icon {
  color: var(--blue);
  background: var(--blue-soft);
}

.metric-card--red .metric-card__icon {
  color: var(--red);
  background: var(--red-soft);
}

.metric-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.metric-card__label {
  color: var(--muted);
  font-size: 9px;
}

.metric-card__value {
  margin: 2px 0 1px;
  color: var(--ink);
  font-family: var(--font);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.metric-card__value small {
  margin-left: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.metric-card__note {
  color: #8a9692;
  font-size: 8px;
}

.metric-card__arrow {
  position: absolute;
  top: 12px;
  right: 11px;
  color: #b2bdb9;
}

.dashboard-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.dashboard-grid--primary {
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr);
}

.dashboard-grid--secondary {
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr);
}

.task-list {
  padding: 2px 0;
}

.task-row {
  display: grid;
  min-height: 59px;
  grid-template-columns: 32px minmax(0, 1fr) auto 72px;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  border-bottom: 1px solid #eef1ee;
}

.task-row:last-child {
  border-bottom: 0;
}

.task-row:hover {
  background: #fbfcfa;
}

.task-row__icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 6px;
}

.task-row__icon--amber {
  color: var(--amber);
  background: var(--amber-soft);
}

.task-row__icon--red {
  color: var(--red);
  background: var(--red-soft);
}

.task-row__icon--blue {
  color: var(--blue);
  background: var(--blue-soft);
}

.task-row__main {
  min-width: 0;
}

.task-row__title {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  font-size: 10px;
  white-space: nowrap;
}

.task-row__title strong {
  color: var(--ink);
  font-weight: 600;
}

.task-row__title > span:not(.dot-separator) {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
}

.task-row__detail {
  margin-top: 3px;
  overflow: hidden;
  color: #64726d;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.task-row__due {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #8b5d27;
  font-size: 9px;
  white-space: nowrap;
}

.trend-summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 13px 16px 0;
}

.trend-summary > div {
  display: flex;
  flex-direction: column;
}

.trend-summary span {
  color: var(--muted);
  font-size: 9px;
}

.trend-summary strong {
  margin-top: 1px;
  font-size: 21px;
  line-height: 1.2;
}

.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  font-size: 9px;
  font-style: normal;
  border-radius: 9px;
}

.delta--warning {
  color: #9b5c1a;
  background: #fbf1df;
}

.delta--success {
  color: #216b54;
  background: #ebf6f1;
}

.line-chart {
  height: 177px;
  padding: 0 12px;
}

.line-chart svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chart-grid line {
  stroke: #e8ece9;
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.chart-area {
  fill: url(#areaFill);
}

.chart-line {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2;
  stroke-linecap: round;
}

.chart-points circle {
  fill: #fff;
  stroke: var(--teal);
  stroke-width: 1.8;
}

.chart-points circle:last-child {
  fill: var(--teal);
}

.chart-labels text {
  fill: #8e9995;
  font-size: 8px;
}

.chart-value rect {
  fill: var(--teal-dark);
}

.chart-value text {
  fill: #fff;
  font-size: 8px;
  font-weight: 600;
}

.chart-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 12px;
  color: var(--muted);
  font-size: 8px;
}

.chart-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

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

.legend-dot--teal {
  background: var(--teal);
}

.progress-pair {
  display: flex;
  width: 92px;
  flex-direction: column;
  gap: 4px;
}

.progress-pair > span {
  height: 4px;
  overflow: hidden;
  background: #e9ece9;
  border-radius: 2px;
}

.progress-pair > span i {
  display: block;
  height: 100%;
  background: #5d9488;
  border-radius: 2px;
}

.progress-pair small {
  color: #7c8984;
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}

.person {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.timeline {
  padding: 3px 15px 8px;
}

.timeline-item {
  display: grid;
  min-height: 49px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid #eef1ee;
}

.timeline-item:last-child {
  border-bottom: 0;
}

.timeline-item__dot {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 50%;
}

.timeline-item__dot--sync {
  color: var(--blue);
  background: var(--blue-soft);
}

.timeline-item__dot--drawing {
  color: var(--amber);
  background: var(--amber-soft);
}

.timeline-item__dot--review {
  color: #7b6a9b;
  background: #f1eef7;
}

.timeline-item__dot--export {
  color: #487c63;
  background: #edf6f1;
}

.timeline-item__line {
  color: #50605a;
  font-size: 9px;
  line-height: 1.6;
}

.timeline-item__line strong {
  color: var(--ink);
}

.timeline-item__line > span {
  color: var(--teal);
}

.timeline-item__detail {
  margin-top: 1px;
  color: #7a8782;
  font-size: 8px;
}

.timeline-item time {
  color: #95a09c;
  font-size: 8px;
  white-space: nowrap;
}

.risk-panel {
  background: #fbfaf6;
}

.health-score {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 18px;
}

.health-score__ring {
  position: relative;
  display: grid;
  width: 102px;
  height: 102px;
  flex: 0 0 auto;
  place-items: center;
  background: conic-gradient(var(--amber) calc(var(--score) * 1%), #e9e9e2 0);
  border-radius: 50%;
}

.health-score__ring::before {
  position: absolute;
  inset: 8px;
  background: #fbfaf6;
  border-radius: 50%;
  content: "";
}

.health-score__ring span {
  position: relative;
  z-index: 1;
}

.health-score__ring strong {
  font-size: 25px;
}

.health-score__ring small {
  color: var(--muted);
  font-size: 9px;
}

.health-score__body {
  min-width: 0;
}

.health-score__body > strong {
  font-size: 11px;
}

.health-score__body > p {
  margin: 6px 0 10px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.7;
}

.health-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  color: #6d7a76;
  font-size: 8px;
}

.health-facts span {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Tables and project screens */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #bdc8c3 #f1f3f0;
}

.table-wrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.table-wrap::-webkit-scrollbar-thumb {
  background: #bdc8c3;
  border: 2px solid #f1f3f0;
  border-radius: 5px;
}

.data-table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  color: #3b4844;
  font-size: 9px;
}

.data-table th {
  height: 34px;
  padding: 0 9px;
  color: #6b7873;
  font-size: 8px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  background: #f7f8f6;
  border-bottom: 1px solid var(--line);
}

.data-table td {
  height: 44px;
  padding: 6px 9px;
  vertical-align: middle;
  border-bottom: 1px solid #edf0ed;
}

.data-table tbody tr {
  transition: background-color 0.12s;
}

.data-table tbody tr:hover {
  background: #fbfcfa;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table strong {
  color: var(--ink);
  font-weight: 600;
}

.data-table small {
  color: var(--muted);
  font-size: 8px;
}

.cell-subtext,
.cell-block {
  display: block;
  margin-top: 2px;
}

.checkbox-cell {
  width: 34px;
  padding-right: 4px !important;
  padding-left: 11px !important;
  text-align: center !important;
}

input[type="checkbox"] {
  width: 13px;
  height: 13px;
  accent-color: var(--teal);
}

.data-table input[type="checkbox"] {
  margin: 0;
}

.project-cell {
  display: flex;
  min-width: 180px;
  align-items: center;
  gap: 8px;
}

.project-cell:hover strong {
  color: var(--teal);
}

.project-cell > span:last-child {
  min-width: 0;
}

.project-cell strong {
  display: block;
  overflow: hidden;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.project-cell small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 7px;
}

.project-cell__icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  color: #53766c;
  background: #eef4f1;
  border: 1px solid #e1e9e5;
  border-radius: 6px;
}

.project-table td:nth-child(1) {
  min-width: 220px;
}

.project-table td:nth-child(2) {
  min-width: 82px;
}

.project-table th,
.project-table td {
  white-space: nowrap;
}

.projects-table {
  min-width: 1180px;
}

.bulk-toolbar {
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}

.check-row {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 9px;
}

.bulk-actions {
  display: flex;
  gap: 5px;
}

.table-footer {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  color: var(--muted);
  font-size: 8px;
  border-top: 1px solid var(--line);
}

.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination button,
.pagination span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--muted);
  font-size: 9px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.pagination span {
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
}

.project-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.project-card {
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.project-card:hover {
  border-color: #b8c8c2;
  box-shadow: 0 7px 22px rgba(31, 54, 46, 0.07);
}

.project-card__top {
  display: flex;
  align-items: center;
  gap: 7px;
}

.project-card__top .status {
  margin-left: auto;
}

.project-card h2 {
  margin: 12px 0 3px;
  font-size: 12px;
  font-weight: 650;
}

.project-card h2:hover {
  color: var(--teal);
}

.project-card p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.project-card__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0;
}

.project-card__meta span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.project-card__meta small {
  color: var(--muted);
  font-size: 8px;
}

.project-card__meta strong {
  overflow: hidden;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.project-card__progress > span {
  color: var(--muted);
  font-size: 8px;
}

.project-card__progress > span + span {
  float: right;
}

.project-card__progress > div {
  clear: both;
  height: 4px;
  margin-top: 5px;
  overflow: hidden;
  background: #e9edea;
  border-radius: 2px;
}

.project-card__progress > div i {
  display: block;
  height: 100%;
  background: #589588;
  border-radius: 2px;
}

.project-card__risks {
  display: flex;
  min-height: 47px;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
  padding-top: 13px;
  margin-top: 10px;
  border-top: 1px solid #edf0ed;
}

.project-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 9px;
  color: var(--muted);
  font-size: 8px;
  border-top: 1px solid #edf0ed;
}

.project-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 15px;
}

.project-hero__title {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 11px;
}

.project-hero__icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--teal);
  background: #eaf3ef;
  border: 1px solid #daeae4;
  border-radius: 8px;
}

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

.project-heading-line h1 {
  font-size: 21px;
}

.version-chip,
.draft-chip,
.demo-chip {
  display: inline-flex;
  min-height: 21px;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  color: #56645f;
  font-size: 8px;
  white-space: nowrap;
  background: #f3f5f2;
  border: 1px solid #e2e7e4;
  border-radius: 4px;
}

.demo-chip {
  color: #8f6229;
  background: #fbf4e9;
  border-color: #ead7ba;
}

.draft-chip {
  color: #6a5c42;
  background: #f6f2e9;
  border-color: #e8dfce;
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 9px;
}

.project-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.workflow-steps {
  display: flex;
  height: 58px;
  align-items: center;
  padding: 0 14px;
  margin-bottom: 11px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.workflow-step {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 7px;
}

.workflow-step + .workflow-step::before {
  position: absolute;
  top: 50%;
  left: -6px;
  width: 16px;
  height: 1px;
  background: #dfe5e2;
  content: "";
}

.workflow-step__num {
  position: relative;
  z-index: 1;
  display: grid;
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  place-items: center;
  color: #96a19d;
  font-size: 8px;
  background: #f3f5f2;
  border: 1px solid #dfe5e2;
  border-radius: 50%;
}

.workflow-step > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.workflow-step strong {
  color: #7f8b87;
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
}

.workflow-step small {
  overflow: hidden;
  color: #a1aaa7;
  font-size: 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.workflow-step--done .workflow-step__num {
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
}

.workflow-step--done strong {
  color: #3f5d54;
}

.workflow-step--current .workflow-step__num {
  color: #fff;
  font-weight: 700;
  background: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 0 4px var(--amber-soft);
}

.workflow-step--current strong {
  color: var(--ink);
  font-weight: 700;
}

.cost-summary {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr) 1.45fr;
  min-height: 89px;
  align-items: stretch;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.cost-summary > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 12px 15px;
  border-left: 1px solid #e9ece9;
}

.cost-summary > div:first-child {
  border-left: 0;
}

.cost-summary__main {
  position: relative;
  background: #f8faf7;
}

.cost-summary__main .summary-label {
  color: var(--muted);
  font-size: 9px;
}

.cost-summary__main > strong {
  margin: 2px 0 4px;
  color: var(--teal-dark);
  font-size: 24px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.cost-summary__main .delta {
  position: absolute;
  top: 12px;
  right: 12px;
}

.cost-summary__stat > span:first-child {
  color: var(--muted);
  font-size: 8px;
}

.cost-summary__stat > strong {
  overflow: hidden;
  margin-top: 4px;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.cost-summary__stat strong small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 400;
}

.summary-small {
  font-size: 9px !important;
  line-height: 1.45;
  white-space: normal !important;
}

.inline-link {
  margin-top: 5px;
  color: var(--teal);
  font-size: 8px;
  cursor: pointer;
}

.mini-progress {
  height: 3px;
  margin-top: 6px;
  overflow: hidden;
  background: #e7ebe8;
  border-radius: 2px;
}

.mini-progress i {
  display: block;
  height: 100%;
  background: var(--teal);
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(330px, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.overview-grid--wide-left {
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
}

.category-bars {
  padding: 8px 16px 13px;
}

.category-bar {
  display: grid;
  min-height: 31px;
  grid-template-columns: 92px minmax(110px, 1fr) 75px 43px;
  align-items: center;
  gap: 10px;
  font-size: 8px;
}

.category-bar__label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #52615c;
  white-space: nowrap;
}

.category-bar__track {
  height: 6px;
  overflow: hidden;
  background: #f1f3f0;
  border-radius: 3px;
}

.category-bar__track i {
  display: block;
  height: 100%;
  border-radius: 3px;
}

.category-bar strong {
  color: var(--ink-2);
  font-weight: 600;
  text-align: right;
}

.category-bar > span:last-child {
  color: var(--muted);
  text-align: right;
}

.category-color {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: #0f7468;
  border-radius: 2px;
}

.category-color--2 {
  background: #5f8ca3;
}

.category-color--3 {
  background: #c18b47;
}

.category-color--4 {
  background: #7a9072;
}

.category-color--5 {
  background: #a06e67;
}

.category-color--6 {
  background: #82799d;
}

.category-color--7 {
  background: #8f9587;
}

.category-color--8 {
  background: #4c9a8e;
}

.category-color-bg--1 {
  background: #4a9185;
}

.category-color-bg--2 {
  background: #6b96ac;
}

.category-color-bg--3 {
  background: #c79a5d;
}

.category-color-bg--4 {
  background: #82977b;
}

.category-color-bg--5 {
  background: #aa7b75;
}

.category-color-bg--6 {
  background: #8c83a7;
}

.category-color-bg--7 {
  background: #969c90;
}

.category-color-bg--8 {
  background: #64a99c;
}

.issue-list {
  padding: 2px 0 5px;
}

.issue-list a {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-bottom: 1px solid #eef1ee;
}

.issue-list a:last-child {
  border-bottom: 0;
}

.issue-list a:hover {
  background: #fbfcfa;
}

.issue-icon {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 6px;
}

.issue-icon--amber {
  color: var(--amber);
  background: var(--amber-soft);
}

.issue-icon--red {
  color: var(--red);
  background: var(--red-soft);
}

.issue-icon--blue {
  color: var(--blue);
  background: var(--blue-soft);
}

.issue-list a > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.issue-list strong {
  font-size: 9px;
}

.issue-list small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.issue-list > a > .icon {
  color: #a5b0ac;
}

.drawing-list {
  padding: 3px 16px 8px;
}

.drawing-row {
  display: flex;
  min-height: 55px;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #edf0ed;
}

.drawing-row:last-child {
  border-bottom: 0;
}

.file-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  color: #5b7970;
  background: #f0f5f2;
  border: 1px solid #e2e9e5;
  border-radius: 6px;
}

.drawing-row__body {
  min-width: 0;
  flex: 1;
}

.drawing-row__body > div {
  display: flex;
  align-items: center;
  gap: 4px;
}

.drawing-row__body strong {
  max-width: 320px;
  overflow: hidden;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.drawing-row__body .tag {
  min-height: 17px;
  padding: 0 4px;
  font-size: 7px;
}

.drawing-row__body small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.review-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 13px 18px;
}

.review-summary__visual {
  position: relative;
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
}

.review-summary__visual svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.donut-track {
  fill: none;
  stroke: #e9ede9;
  stroke-width: 7;
}

.donut-value {
  fill: none;
  stroke: var(--teal);
  stroke-linecap: round;
  stroke-width: 7;
}

.review-summary__visual > span {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.review-summary__visual strong {
  font-size: 18px;
}

.review-summary__visual small {
  color: var(--muted);
  font-size: 7px;
}

.review-summary__facts {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 12px;
}

.review-summary__facts div {
  display: flex;
  flex-direction: column;
}

.review-summary__facts span {
  color: var(--muted);
  font-size: 8px;
}

.review-summary__facts strong {
  margin-top: 1px;
  font-size: 10px;
}

.review-summary + .btn {
  width: calc(100% - 32px);
  margin: 0 16px 15px;
}

.change-list {
  padding: 3px 16px 8px;
}

.change-row {
  display: grid;
  min-height: 42px;
  grid-template-columns: 25px minmax(180px, 1fr) minmax(240px, 1.8fr) 70px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #edf0ed;
  font-size: 8px;
}

.change-row:last-child {
  border-bottom: 0;
}

.activity-type {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 50%;
}

.change-row > div {
  display: flex;
  min-width: 0;
  gap: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.change-row > div strong {
  color: var(--ink-2);
}

.change-row > div span {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
}

.change-row p {
  overflow: hidden;
  margin: 0;
  color: #65736e;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.change-row time {
  color: var(--muted);
  text-align: right;
}

/* Takeoff workstation */
.takeoff-page {
  display: flex;
  min-height: calc(100vh - var(--topbar-h) - 32px);
  flex-direction: column;
}

.takeoff-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 2px 10px;
}

.takeoff-heading .breadcrumb {
  margin-bottom: 3px;
}

.takeoff-title-line {
  display: flex;
  align-items: center;
  gap: 7px;
}

.takeoff-title-line h1 {
  font-size: 18px;
}

.takeoff-toolbar {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px 7px 0 0;
}

.mobile-view-notice {
  display: none;
}

.toolbar-group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 2px;
}

.toolbar-group--right {
  justify-content: flex-end;
}

.toolbar-separator {
  width: 1px;
  height: 18px;
  margin: 0 5px;
  background: #e2e7e4;
}

.compact-select select {
  max-width: 200px;
  padding-left: 26px;
  font-size: 9px;
  border-color: transparent;
}

.compact-select > .icon:first-child {
  position: absolute;
  left: 8px;
  color: var(--muted);
  pointer-events: none;
}

.compact-select--short select {
  width: 66px;
  padding-left: 9px;
}

.tool-btn {
  display: inline-flex;
  height: 29px;
  min-width: 29px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 6px;
  color: #62706b;
  font-size: 8px;
  border-radius: 4px;
}

.tool-btn:hover,
.tool-btn.is-active {
  color: var(--teal-dark);
  background: #edf4f1;
}

.tool-btn--labeled {
  padding: 0 7px;
}

.zoom-value {
  min-width: 35px;
  color: #61706b;
  font-size: 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.inline-check {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 4px;
  color: #75817d;
  font-size: 8px;
  white-space: nowrap;
}

.takeoff-workspace {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: 232px minmax(0, 1fr) 336px;
  grid-template-rows: minmax(450px, 1fr) 122px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 7px 7px;
}

.takeoff-workspace.is-bottom-collapsed {
  grid-template-rows: minmax(500px, 1fr) 38px;
}

.takeoff-tree {
  display: flex;
  min-width: 0;
  min-height: 0;
  grid-column: 1;
  grid-row: 1;
  flex-direction: column;
  background: #fafbf9;
  border-right: 1px solid var(--line);
}

.tree-tabs {
  display: flex;
  height: 36px;
  flex: 0 0 auto;
  align-items: flex-end;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
}

.tree-tabs button {
  position: relative;
  height: 35px;
  padding: 0 8px;
  color: #7b8783;
  font-size: 8px;
}

.tree-tabs button.is-active {
  color: var(--teal-dark);
  font-weight: 600;
}

.tree-tabs button.is-active::after {
  position: absolute;
  right: 7px;
  bottom: -1px;
  left: 7px;
  height: 2px;
  background: var(--teal);
  content: "";
}

.tree-scroll {
  min-height: 0;
  flex: 1;
  overflow: auto;
  scrollbar-width: thin;
}

.tree-section {
  border-bottom: 1px solid #e8ece9;
}

.tree-section__head {
  display: flex;
  width: 100%;
  height: 32px;
  align-items: center;
  gap: 4px;
  padding: 0 9px;
  color: #52615c;
  font-size: 8px;
  font-weight: 600;
}

.tree-section__head > span {
  flex: 1;
  text-align: left;
}

.tree-section__head small {
  color: #96a09c;
  font-size: 7px;
  font-weight: 400;
}

.tree-file {
  display: flex;
  width: calc(100% - 12px);
  min-height: 45px;
  align-items: center;
  gap: 6px;
  margin: 2px 6px;
  padding: 5px 6px;
  text-align: left;
  border-radius: 5px;
}

.tree-file:hover,
.tree-file.is-active {
  background: #edf4f1;
}

.tree-file__icon {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  color: #58776e;
  background: #fff;
  border: 1px solid #e1e8e4;
  border-radius: 4px;
}

.tree-file > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.tree-file strong {
  overflow: hidden;
  color: #44534e;
  font-size: 7px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tree-file small {
  color: #8c9793;
  font-size: 7px;
}

.tree-file .status {
  display: none;
}

.tree-branch {
  padding: 0 6px 5px 20px;
}

.tree-node,
.tree-leaf {
  display: flex;
  width: 100%;
  min-height: 27px;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  color: #63706c;
  font-size: 8px;
  border-radius: 4px;
}

.tree-node > span {
  display: flex;
  align-items: center;
  gap: 3px;
}

.tree-leaf {
  justify-content: flex-start;
  gap: 6px;
  padding-left: 15px;
}

.tree-leaf > span:nth-child(2) {
  flex: 1;
}

.tree-leaf > span:last-child {
  color: #9aa4a0;
}

.tree-node:hover,
.tree-leaf:hover,
.tree-leaf.is-active {
  background: #edf4f1;
}

.tree-leaf.is-active {
  color: var(--teal-dark);
  font-weight: 600;
}

.tree-category {
  padding: 0 6px 5px;
}

.tree-category-row {
  display: grid;
  width: 100%;
  height: 26px;
  grid-template-columns: minmax(0, 1fr) auto 8px;
  align-items: center;
  gap: 5px;
  padding: 0 7px 0 16px;
  color: #5d6c66;
  font-size: 8px;
  text-align: left;
  border-radius: 4px;
}

.tree-category-row small {
  color: #949f9a;
  font-size: 7px;
}

.tree-category-row:hover,
.tree-category-row.is-selected {
  color: var(--teal-dark);
  background: #edf4f1;
}

.category-status {
  width: 5px;
  height: 5px;
  background: #4c9a7a;
  border-radius: 50%;
}

.category-status--warning {
  background: var(--amber);
}

.category-status--danger {
  background: var(--red);
}

.layer-list {
  padding: 0 8px 6px;
}

.layer-row {
  display: grid;
  height: 25px;
  grid-template-columns: 1px 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  color: #5e6b67;
  font-size: 7px;
}

.layer-row input {
  display: none;
}

.layer-row i {
  display: block;
  width: 7px;
  height: 7px;
  background: var(--layer-color);
  border-radius: 1px;
}

.layer-row span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.layer-row small {
  color: #99a39f;
  font-family: var(--mono);
  font-size: 6px;
}

.tree-footer {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: #6a7772;
  border-top: 1px solid var(--line);
}

.tree-footer button {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
}

.canvas-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  grid-column: 2;
  grid-row: 1;
  flex-direction: column;
  background: #eef1ed;
}

.canvas-modebar {
  display: flex;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
  background: #f7f8f6;
  border-bottom: 1px solid #dce3df;
}

.canvas-modebar__meta {
  display: flex;
  gap: 10px;
  color: #7b8783;
  font-size: 7px;
}

.canvas-modebar__meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.canvas-stage {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background: #e8ece8;
}

.canvas-ruler {
  position: absolute;
  z-index: 3;
  color: #87928e;
  font-size: 6px;
  pointer-events: none;
  background: #f4f6f3;
}

.canvas-ruler--top {
  top: 0;
  right: 0;
  left: 22px;
  display: flex;
  height: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  border-bottom: 1px solid #d9e0dc;
}

.canvas-ruler--left {
  top: 20px;
  bottom: 0;
  left: 0;
  display: flex;
  width: 22px;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 35px 0;
  border-right: 1px solid #d9e0dc;
}

.canvas-surface {
  position: absolute;
  inset: 22px 20px 24px 24px;
  display: grid;
  place-items: center;
  overflow: auto;
}

.canvas-surface svg {
  width: calc(100% - 12px);
  height: auto;
  max-width: 1050px;
  background: #fbfcfa;
  border: 1px solid #c9d4cf;
  box-shadow: 0 3px 14px rgba(36, 52, 46, 0.09);
  transform: scale(var(--canvas-zoom));
  transform-origin: center center;
  transition: transform 0.16s;
}

.plan-grid line {
  stroke: #f0f2ef;
  stroke-width: 0.7;
}

.plan-axis line {
  stroke: #9eaca7;
  stroke-width: 0.8;
  stroke-dasharray: 9 4 2 4;
}

.plan-axis circle {
  fill: #fff;
  stroke: #81928c;
  stroke-width: 0.8;
}

.plan-axis text {
  fill: #53625d;
  font-size: 8px;
  text-anchor: middle;
}

.plan-room {
  fill: #fff;
  stroke: #7d8f89;
  stroke-width: 1.2;
  cursor: pointer;
  transition: fill 0.15s, stroke 0.15s;
}

.room-group:hover .plan-room {
  fill: #f4f9f7;
}

.room-group .plan-room.is-selected {
  fill: #ebf6f1;
  stroke: var(--teal);
  stroke-width: 2.4;
  filter: url(#selectionGlow);
}

.plan-room.room-low-confidence {
  fill: #fffaf2;
  stroke: var(--amber);
  stroke-width: 2;
  stroke-dasharray: 7 4;
}

.room-fill {
  pointer-events: none;
  opacity: 0.7;
}

.room-fill--floor {
  fill: url(#tilePattern);
  opacity: 0.55;
}

.room-label {
  fill: #35453f;
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
}

.room-area {
  fill: #6c7b76;
  font-size: 9px;
  pointer-events: none;
}

.room-material {
  fill: #8b9692;
  font-size: 7px;
  pointer-events: none;
}

.room-confidence {
  fill: #a86420;
  font-size: 7px;
  font-weight: 600;
  pointer-events: none;
}

.entity-tag {
  fill: #f8faf8;
  stroke: #d7dfdb;
}

.entity-tag-text {
  fill: #84908c;
  font-family: var(--mono);
  font-size: 5px;
}

.plan-walls path {
  fill: none;
  stroke: #273a34;
  stroke-width: 5;
  stroke-linecap: square;
  stroke-linejoin: bevel;
}

.door-symbol line,
.door-symbol path {
  fill: none;
  stroke: #61736d;
  stroke-width: 1.2;
}

.door-symbol circle {
  fill: #fff;
  stroke: #61736d;
}

.plan-windows line {
  stroke: #61879b;
  stroke-width: 2;
}

.mep-point circle {
  fill: #f8fbfd;
  stroke: #6b8fa2;
  stroke-width: 0.8;
}

.mep-point path {
  stroke: #6b8fa2;
  stroke-width: 0.8;
}

.plan-dimensions line {
  stroke: #75847e;
  stroke-width: 0.6;
}

.plan-dimensions text {
  fill: #63716c;
  font-family: var(--mono);
  font-size: 6px;
  text-anchor: middle;
}

.ai-overlay rect {
  fill: none;
  stroke: rgba(15, 116, 104, 0.55);
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

.ai-overlay rect.is-low {
  stroke: rgba(194, 122, 44, 0.9);
  stroke-width: 1.6;
}

.ai-overlay g rect {
  fill: rgba(20, 57, 49, 0.86);
  stroke: none;
}

.ai-overlay g text {
  fill: #fff;
  font-size: 6px;
}

.selection-marker circle {
  fill: rgba(15, 116, 104, 0.16);
  stroke: var(--teal);
  stroke-width: 1.3;
}

.selection-marker path {
  stroke: var(--teal);
  stroke-width: 1;
}

.selection-marker rect {
  fill: var(--teal-dark);
}

.selection-marker text {
  fill: #fff;
  font-size: 7px;
}

.plan-north path {
  fill: #485b54;
}

.plan-north text {
  fill: #485b54;
  font-size: 9px;
  font-weight: 700;
}

.canvas-stamp {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  color: #7e8b86;
  font-family: var(--mono);
  font-size: 6px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #d6dfda;
  border-radius: 3px;
}

.stamp-demo {
  color: #986025;
  font-family: var(--font);
  font-weight: 600;
}

.canvas-minimap {
  position: absolute;
  right: 20px;
  bottom: 48px;
  width: 92px;
  height: 63px;
  padding: 2px;
  background: #fff;
  border: 1px solid #bac7c1;
  box-shadow: 0 2px 6px rgba(38, 57, 49, 0.1);
}

.canvas-minimap svg {
  width: 100%;
  height: 100%;
}

.canvas-minimap > span {
  position: absolute;
  right: -1px;
  bottom: -1px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: #fff;
  background: var(--teal);
}

.canvas-statusbar {
  display: flex;
  height: 25px;
  flex: 0 0 auto;
  align-items: center;
  gap: 16px;
  padding: 0 9px;
  color: #77847f;
  font-size: 7px;
  background: #f7f8f6;
  border-top: 1px solid #dce3df;
}

.canvas-statusbar > span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.canvas-statusbar strong {
  color: #53625d;
}

.canvas-statusbar__right {
  margin-left: auto;
}

.takeoff-inspector {
  display: flex;
  min-width: 0;
  min-height: 0;
  grid-column: 3;
  grid-row: 1;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--line);
}

.inspector-tabs {
  display: flex;
  height: 36px;
  flex: 0 0 auto;
  align-items: flex-end;
  padding: 0 7px;
  border-bottom: 1px solid var(--line);
}

.inspector-tabs button {
  position: relative;
  display: flex;
  height: 35px;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  color: #78847f;
  font-size: 8px;
}

.inspector-tabs button.is-active {
  color: var(--teal-dark);
  font-weight: 600;
}

.inspector-tabs button.is-active::after {
  position: absolute;
  right: 6px;
  bottom: -1px;
  left: 6px;
  height: 2px;
  background: var(--teal);
  content: "";
}

.ai-dot {
  width: 4px;
  height: 4px;
  background: var(--teal);
  border-radius: 50%;
}

.inspector-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
}

.inspector-section {
  padding: 12px 13px;
  border-bottom: 1px solid #e9ece9;
}

.inspector-section--actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-bottom: 0;
}

.inspector-object-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.object-type-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 6px;
}

.inspector-object-head > div {
  min-width: 0;
  flex: 1;
}

.inspector-object-head h2 {
  overflow: hidden;
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.4;
  white-space: normal;
}

.micro-label {
  color: var(--muted);
  font-size: 7px;
}

.object-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 8px;
}

.object-status-line > span {
  display: flex;
  align-items: center;
  gap: 3px;
}

.section-heading {
  display: flex;
  min-height: 22px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.section-heading h3 {
  margin: 0;
  font-size: 10px;
  font-weight: 650;
}

.quantity-compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.quantity-compare div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px;
  background: #f7f9f6;
  border: 1px solid #e8ece9;
  border-radius: 5px;
}

.quantity-compare span {
  color: var(--muted);
  font-size: 7px;
}

.quantity-compare strong {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.formula-box {
  position: relative;
  padding: 9px 10px 24px;
  background: #f8faf7;
  border: 1px solid #e4e9e5;
  border-radius: 5px;
}

.formula-box code {
  color: #43534d;
  font-size: 8px;
  line-height: 1.7;
  word-break: break-word;
}

.formula-box .text-link {
  position: absolute;
  right: 8px;
  bottom: 5px;
}

.rule-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  color: #939e99;
  font-size: 7px;
}

.source-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 7px;
  background: #fafbf9;
  border: 1px solid #e9edea;
  border-radius: 5px;
}

.source-summary .file-icon {
  width: 27px;
  height: 27px;
}

.source-summary > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.source-summary strong {
  overflow: hidden;
  color: #45544f;
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.source-summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.evidence-preview {
  position: relative;
  overflow: hidden;
  margin: 10px 0;
  border: 1px solid #dfe5e2;
  border-radius: 5px;
}

.evidence-preview svg {
  width: 100%;
}

.evidence-highlight {
  fill: rgba(15, 116, 104, 0.1);
  stroke: var(--teal);
  stroke-width: 1;
  stroke-dasharray: 3 2;
}

.evidence-preview text {
  fill: #5a6964;
  font-size: 8px;
  text-anchor: middle;
}

.evidence-preview__action {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: flex;
  height: 24px;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
  color: #fff;
  font-size: 7px;
  background: rgba(20, 52, 45, 0.82);
  border-radius: 4px;
}

.evidence-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.evidence-field {
  display: grid;
  grid-template-columns: 83px minmax(0, 1fr);
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #eef1ee;
  font-size: 8px;
}

.evidence-field:last-child {
  border-bottom: 0;
}

.evidence-field span {
  color: var(--muted);
}

.evidence-field strong {
  overflow-wrap: anywhere;
  color: #43524d;
  font-weight: 500;
}

.evidence-field code {
  color: #42544e;
  font-size: 7px;
  overflow-wrap: anywhere;
}

.evidence-list + .notice {
  margin-top: 9px;
}

.ai-inspector-head {
  background: #f9fbfa;
}

.ai-brand-line {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ai-orb {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  color: #d8eee7;
  background: #1e5b50;
  border-radius: 7px;
}

.ai-brand-line > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.ai-brand-line strong {
  font-size: 9px;
}

.ai-brand-line small {
  color: var(--muted);
  font-size: 7px;
}

.ai-scope {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 7px;
  line-height: 1.5;
}

.suggestion-card {
  padding: 10px;
  background: #fff;
  border: 1px solid #dce5e1;
  border-radius: 6px;
}

.suggestion-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.confidence-label {
  color: var(--muted);
  font-size: 7px;
}

.confidence-label strong {
  color: var(--teal);
}

.suggestion-card h3 {
  margin: 8px 0 5px;
  font-size: 10px;
}

.suggested-value {
  padding: 7px;
  color: #3f514a;
  font-size: 8px;
  line-height: 1.7;
  background: #f2f7f4;
  border-left: 2px solid var(--teal);
}

.suggestion-card p {
  margin: 7px 0;
  color: var(--muted);
  font-size: 7px;
  line-height: 1.6;
}

.evidence-chips {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.evidence-chips span {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  color: #6b7873;
  font-size: 7px;
}

.suggestion-card__meta {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  color: #98a29e;
  font-size: 6px;
}

.suggestion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.suggestion-actions .btn {
  min-height: 26px;
  padding: 0 7px;
  font-size: 8px;
}

.ai-inspector-head + .inspector-section .btn--block {
  margin-top: 8px;
}

.ai-guardrail {
  display: flex;
  gap: 7px;
  margin-top: 9px;
  padding: 8px;
  color: #6f7c77;
  background: #f6f8f5;
  border-radius: 5px;
}

.ai-guardrail p {
  margin: 0;
  font-size: 7px;
  line-height: 1.6;
}

.takeoff-bottom {
  display: flex;
  min-width: 0;
  grid-column: 1 / -1;
  grid-row: 2;
  flex-direction: column;
  background: #fff;
  border-top: 1px solid var(--line);
}

.bottom-tabs {
  display: flex;
  height: 31px;
  flex: 0 0 auto;
  align-items: flex-end;
  padding: 0 9px;
  background: #f8f9f7;
  border-bottom: 1px solid #e7ebe8;
}

.bottom-tabs button {
  position: relative;
  display: flex;
  height: 30px;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  color: #7b8783;
  font-size: 8px;
}

.bottom-tabs button.is-active {
  color: var(--teal-dark);
  font-weight: 600;
}

.bottom-tabs button.is-active::after {
  position: absolute;
  right: 7px;
  bottom: -1px;
  left: 7px;
  height: 2px;
  background: var(--teal);
  content: "";
}

.bottom-tabs button > span {
  display: inline-grid;
  min-width: 15px;
  height: 15px;
  place-items: center;
  font-size: 7px;
  background: #e8ede9;
  border-radius: 8px;
}

.bottom-tabs .bottom-collapse {
  margin-left: auto;
}

.bottom-content {
  display: flex;
  min-height: 0;
  flex: 1;
  align-items: center;
  gap: 14px;
  padding: 7px 13px;
  overflow: auto;
}

.takeoff-workspace.is-bottom-collapsed .bottom-content {
  display: none;
}

.takeoff-stats,
.takeoff-category-summary,
.dxf-health {
  display: flex;
  align-items: center;
  gap: 18px;
}

.takeoff-stats div,
.dxf-health div {
  display: flex;
  flex-direction: column;
}

.takeoff-stats span,
.dxf-health span {
  color: var(--muted);
  font-size: 7px;
  white-space: nowrap;
}

.takeoff-stats strong,
.dxf-health strong {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.takeoff-stats small {
  margin-left: 2px;
  font-size: 7px;
  font-weight: 400;
}

.bottom-separator {
  width: 1px;
  height: 42px;
  flex: 0 0 auto;
  background: #e3e8e5;
}

.takeoff-category-summary {
  flex: 1;
  justify-content: space-between;
}

.takeoff-category-summary div {
  display: flex;
  min-width: 70px;
  flex-direction: column;
}

.takeoff-category-summary span {
  color: var(--muted);
  font-size: 7px;
}

.takeoff-category-summary strong {
  margin-top: 1px;
  font-size: 9px;
}

.takeoff-category-summary small {
  color: #93a09b;
  font-size: 7px;
}

.bottom-tabs button.is-active {
  pointer-events: auto;
}

.fpd-plan .fpd-grid line {
  stroke: #e7ebe8;
  stroke-width: 0.5;
}

.fpd-plan .fpd-walls path {
  fill: none;
  stroke: #33443e;
  stroke-width: 3;
}

.fpd-plan .fpd-lights g rect {
  fill: #fff;
  stroke: #7e918a;
  stroke-width: 0.7;
}

.fpd-plan .fpd-lights g path {
  stroke: #84958e;
  stroke-width: 0.5;
}

.ocr-region {
  fill: rgba(92, 139, 160, 0.05);
  stroke: #6c91a4;
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.ocr-region.is-selected {
  fill: rgba(15, 116, 104, 0.1);
  stroke: var(--teal);
  stroke-width: 2;
}

.ocr-label-box {
  fill: #386779;
  stroke: none;
}

.ocr-label {
  fill: #fff;
  font-size: 7px;
}

.ocr-text {
  fill: #2f4840;
  font-size: 9px;
  font-weight: 600;
}

.ocr-small {
  fill: #6c7b76;
  font-size: 7px;
}

.fpd-titleblock text {
  fill: #4e5e58;
  font-size: 7px;
}

.fpd-page-tab {
  fill: #e5ece8;
  stroke: #7e9089;
}

.fpd-page-tab + text {
  fill: #52615c;
  font-size: 7px;
}

.fpd-legend text {
  fill: #64726d;
  font-size: 7px;
}

.fpd-legend rect {
  fill: #eaf1ed;
  stroke: #84968f;
}

.fpd-legend .legend-warning {
  fill: #fbf0df;
  stroke: #c27a2c;
}

.fpd-selection-marker circle {
  fill: rgba(15, 116, 104, 0.12);
  stroke: var(--teal);
}

.fpd-selection-marker path {
  stroke: var(--teal);
}

.fpd-selection-marker rect {
  fill: var(--teal-dark);
}

.fpd-selection-marker text {
  fill: #fff;
  font-size: 7px;
}

/* BOQ */
.boq-summary {
  display: grid;
  grid-template-columns: 1.35fr repeat(5, 1fr) 1.1fr;
  min-height: 83px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.boq-summary > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 10px 13px;
  border-left: 1px solid #e8ece9;
}

.boq-summary > div:first-child {
  border-left: 0;
}

.boq-summary > div > span:first-child {
  color: var(--muted);
  font-size: 8px;
}

.boq-summary > div > strong {
  overflow: hidden;
  margin: 2px 0;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.boq-summary > div > small {
  color: var(--muted);
  font-size: 7px;
}

.boq-summary__primary {
  position: relative;
  background: #f8faf7;
}

.boq-summary__primary > strong {
  font-size: 22px !important;
  color: var(--teal-dark);
}

.boq-summary__primary .delta {
  position: absolute;
  top: 9px;
  right: 10px;
}

.boq-summary__version {
  background: #fbfaf6;
}

.boq-toolbar {
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  background: #f8f9f7;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}

.selected-count {
  color: var(--teal);
  font-size: 8px;
  font-weight: 600;
}

.boq-table-panel {
  border-radius: 0 0 7px 7px;
}

.table-wrap--boq {
  position: relative;
  max-height: 560px;
}

.boq-table {
  min-width: 1780px;
  font-size: 8px;
}

.boq-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
}

.boq-table th {
  height: 42px;
  padding: 4px 6px;
  line-height: 1.25;
}

.boq-table th small {
  color: #96a09c;
  font-size: 7px;
  font-weight: 400;
}

.boq-table td {
  height: 48px;
  padding: 5px 6px;
  white-space: nowrap;
}

.boq-table .checkbox-cell {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fff;
}

.boq-table thead .checkbox-cell {
  z-index: 8;
  background: #f7f8f6;
}

.seq-cell {
  position: sticky;
  left: 34px;
  z-index: 2;
  width: 38px;
  color: #87928e;
  text-align: center;
  background: #fff;
}

.boq-table thead .seq-cell {
  z-index: 7;
  background: #f7f8f6;
}

.sticky-name {
  position: sticky;
  left: 72px;
  z-index: 2;
  width: 173px;
  min-width: 173px;
  background: #fff;
  box-shadow: 4px 0 6px -5px rgba(38, 55, 48, 0.25);
}

.boq-table thead .sticky-name {
  z-index: 7;
  background: #f7f8f6;
}

.boq-table tr:hover td,
.boq-table tr:hover .checkbox-cell,
.boq-table tr:hover .seq-cell,
.boq-table tr:hover .sticky-name {
  background: #fbfcfa;
}

.boq-table tr.is-selected td,
.boq-table tr.is-selected .checkbox-cell,
.boq-table tr.is-selected .seq-cell,
.boq-table tr.is-selected .sticky-name {
  background: #f3f8f5;
}

.boq-table tr.row-flash td {
  animation: rowFlash 1.8s ease-out;
}

@keyframes rowFlash {
  0%,
  40% {
    background: #e8f5ef;
  }
  100% {
    background: inherit;
  }
}

.boq-name {
  display: flex;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.boq-name:hover strong {
  color: var(--teal);
}

.boq-name strong {
  display: block;
  max-width: 160px;
  overflow: hidden;
  color: var(--ink);
  font-size: 8px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.boq-name small {
  margin-top: 2px;
  color: #939e9a;
  font-family: var(--mono);
  font-size: 6px;
}

.feature-col {
  width: 184px;
  min-width: 184px;
}

.feature-link {
  display: flex;
  width: 100%;
  max-width: 175px;
  align-items: flex-start;
  gap: 4px;
  color: #687570;
  font-size: 7px;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
}

.feature-link span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.feature-link .icon {
  margin-top: 1px;
  color: #a2aca8;
}

.cell-input {
  width: 100%;
  max-width: 86px;
  height: 27px;
  padding: 3px 5px;
  font-size: 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: transparent;
  border-color: transparent;
}

.cell-input:hover {
  background: #fff;
  border-color: #bfccc6;
}

.cell-input:focus {
  background: #fff;
}

.cell-input--num {
  min-width: 56px;
}

.editable-cell {
  background: #fbfcf9;
}

.fee-cell {
  display: flex;
  min-width: 76px;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  color: #50605a;
}

.fee-cell:hover {
  color: var(--teal);
}

.fee-cell strong {
  color: inherit;
  font-size: 8px;
}

.fee-cell span {
  color: var(--muted);
  font-size: 7px;
  font-variant-numeric: tabular-nums;
}

.source-col {
  width: 150px;
  min-width: 150px;
}

.source-button {
  display: flex;
  min-width: 138px;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  text-align: left;
}

.source-button:hover span {
  color: var(--teal);
  text-decoration: underline;
}

.source-button span {
  display: block;
  max-width: 138px;
  overflow: hidden;
  color: #40534c;
  font-size: 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.source-button small {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #8b9692;
  font-size: 6px;
}

.source-button--missing span {
  color: var(--red);
}

.source-button--missing small {
  color: #b1716b;
}

.boq-table tfoot td {
  height: 42px;
  color: #40504a;
  font-weight: 600;
  background: #f7f9f6;
  border-top: 1px solid var(--line-strong);
}

.tfoot-label {
  text-align: right;
}

.tfoot-note {
  color: var(--muted) !important;
  font-size: 7px;
  font-weight: 400 !important;
}

.boq-table-footer {
  display: flex;
  min-height: 41px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 7px;
  background: #fff;
  border-top: 1px solid var(--line);
}

.table-legend {
  display: flex;
  align-items: center;
  gap: 13px;
}

.table-legend span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.legend-square {
  width: 7px;
  height: 7px;
  border-radius: 1px;
}

.legend-square--warning {
  background: #e9d3b1;
}

.legend-square--danger {
  background: #e3b7b4;
}

.boq-bottom-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr);
  gap: 12px;
  margin-top: 12px;
}

.group-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 8px 10px 12px;
}

.group-summary div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  padding: 7px 9px;
  border-right: 1px solid #edf0ed;
}

.group-summary div:nth-child(4n) {
  border-right: 0;
}

.group-summary span {
  color: var(--muted);
  font-size: 8px;
}

.group-summary strong {
  overflow: hidden;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-summary small {
  color: #97a09d;
  font-size: 7px;
}

.check-list {
  padding: 2px 0 5px;
}

.check-list button {
  display: flex;
  width: 100%;
  min-height: 43px;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  text-align: left;
  border-bottom: 1px solid #eef1ee;
}

.check-list button:last-child {
  border-bottom: 0;
}

.check-list button:hover {
  background: #fbfcfa;
}

.check-icon {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 5px;
}

.check-icon--warning {
  color: var(--amber);
  background: var(--amber-soft);
}

.check-icon--danger {
  color: var(--red);
  background: var(--red-soft);
}

.check-icon--info {
  color: var(--blue);
  background: var(--blue-soft);
}

.check-list button > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.check-list strong {
  font-size: 9px;
}

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

.check-list button > .icon {
  color: #a5b0ac;
}

/* Price library and sync */
.price-summary-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 1.7fr;
  min-height: 68px;
  align-items: stretch;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.price-summary-row > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 10px 14px;
  border-left: 1px solid #e8ece9;
}

.price-summary-row > div:first-child {
  border-left: 0;
}

.price-summary-row > div > span {
  color: var(--muted);
  font-size: 8px;
}

.price-summary-row > div > strong {
  margin-top: 2px;
  font-size: 17px;
  line-height: 1.25;
}

.price-summary-row > div > strong small {
  margin-left: 2px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 400;
}

.price-summary-row__sync {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  background: #f8faf7;
}

.price-summary-row__sync > span {
  flex-direction: row !important;
}

.price-summary-row__sync strong {
  font-size: 9px;
}

.material-table {
  min-width: 1280px;
}

.material-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.material-name:hover strong {
  color: var(--teal);
}

.material-name strong {
  font-size: 9px;
}

.material-name small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
}

.material-price {
  color: var(--ink);
  font-weight: 650;
}

.sparkline {
  width: 62px;
  height: 24px;
  overflow: visible;
}

.sparkline polyline {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sparkline--down polyline {
  stroke: var(--amber);
}

.source-link {
  display: inline-flex;
  max-width: 160px;
  align-items: center;
  gap: 4px;
  color: #3f6e86;
  font-size: 8px;
  text-align: left;
}

.source-link:hover {
  text-decoration: underline;
}

.source-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 10px;
}

.source-type-card {
  display: flex;
  min-height: 66px;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.source-type-card__icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 6px;
}

.source-type-card__icon--blue {
  color: var(--blue);
  background: var(--blue-soft);
}

.source-type-card__icon--amber {
  color: var(--amber);
  background: var(--amber-soft);
}

.source-type-card__icon--neutral {
  color: #6b7772;
  background: #f1f3f0;
}

.source-type-card > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.source-type-card strong {
  font-size: 9px;
}

.source-type-card small {
  color: var(--muted);
  font-size: 7px;
}

.source-type-card > span:last-child {
  color: #8b9692;
  font-size: 8px;
  white-space: nowrap;
}

.sync-overview {
  display: flex;
  min-height: 77px;
  align-items: center;
  gap: 22px;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.sync-health {
  display: flex;
  min-width: 310px;
  align-items: center;
  gap: 12px;
}

.sync-health__ring {
  display: flex;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  background: #edf7f2;
  border: 3px solid #70ad9c;
  border-radius: 50%;
}

.sync-health__ring strong {
  font-size: 15px;
  line-height: 1;
}

.sync-health__ring small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 5px;
}

.sync-health > div:last-child,
.sync-next {
  display: flex;
  flex-direction: column;
}

.sync-health > div:last-child > span,
.sync-next > span {
  color: var(--muted);
  font-size: 8px;
}

.sync-health > div:last-child > strong,
.sync-next > strong {
  margin: 2px 0;
  font-size: 12px;
}

.sync-health > div:last-child > small,
.sync-next > small {
  color: #8d9894;
  font-size: 7px;
}

.sync-next {
  flex: 1;
  padding-left: 22px;
  border-left: 1px solid #e7ebe8;
}

.sync-overview > .notice {
  display: none;
}

.sync-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.sync-card {
  padding: 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.sync-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sync-card__icon {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 6px;
}

.sync-card__icon.is-warning {
  color: var(--amber);
  background: var(--amber-soft);
}

.sync-card__icon.is-error {
  color: var(--red);
  background: var(--red-soft);
}

.sync-card__head > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.sync-card__head strong {
  overflow: hidden;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sync-card__head small {
  color: var(--muted);
  font-size: 7px;
}

.sync-card__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 12px 0 10px;
  padding: 9px 0;
  border-top: 1px solid #eef1ee;
  border-bottom: 1px solid #eef1ee;
}

.sync-card__facts div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.sync-card__facts span {
  color: var(--muted);
  font-size: 7px;
}

.sync-card__facts strong {
  overflow: hidden;
  margin-top: 2px;
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sync-card__health {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 7px;
}

.sync-card__health > div {
  height: 4px;
  flex: 1;
  overflow: hidden;
  background: #edf0ed;
  border-radius: 2px;
}

.sync-card__health > div i {
  display: block;
  height: 100%;
  background: #68a28f;
}

.sync-card__health strong {
  color: #53625d;
  font-size: 8px;
}

.sync-card__pending {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 9px;
  padding: 7px 8px;
  color: #7a6040;
  font-size: 7px;
  line-height: 1.5;
  background: #fbf7ef;
  border: 1px solid #eee0ca;
  border-radius: 4px;
}

.sync-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  color: #97a09d;
  font-size: 7px;
}

/* Reviews */
.review-layout {
  display: grid;
  min-height: calc(100vh - 165px);
  grid-template-columns: 330px minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.review-queue {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: #fafbf9;
  border-right: 1px solid var(--line);
}

.review-queue__toolbar {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-bottom: 1px solid var(--line);
}

.review-queue__summary {
  display: flex;
  min-height: 31px;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
  color: var(--muted);
  font-size: 7px;
}

.review-queue__summary strong {
  color: #6c7974;
  font-size: 8px;
}

.review-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}

.review-list-item {
  display: grid;
  width: 100%;
  min-height: 87px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 9px;
  text-align: left;
  border-top: 1px solid #eff2ef;
  border-left: 3px solid transparent;
}

.review-list-item:hover {
  background: #f5f8f5;
}

.review-list-item.is-active {
  background: #eef6f2;
  border-left-color: var(--teal);
}

.review-list-item__icon {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 5px;
}

.review-list-item__icon--amber {
  color: var(--amber);
  background: var(--amber-soft);
}

.review-list-item__icon--blue {
  color: var(--blue);
  background: var(--blue-soft);
}

.review-list-item__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.review-list-item__body strong {
  overflow: hidden;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.review-list-item__body small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
}

.review-list-item__body > span {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: #66736e;
  font-size: 7px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.review-list-item__meta {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 5px;
}

.review-list-item__meta time {
  color: #99a39f;
  font-size: 6px;
  white-space: nowrap;
}

.review-queue__footer {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: var(--muted);
  font-size: 7px;
  border-top: 1px solid var(--line);
}

.review-queue__footer > span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.role-inline {
  position: relative;
  display: flex;
  align-items: center;
}

.role-inline select {
  max-width: 88px;
  height: 25px;
  padding: 0 22px 0 6px;
  font-size: 7px;
  appearance: none;
}

.role-inline > .icon {
  position: absolute;
  right: 6px;
  color: var(--muted);
  pointer-events: none;
}

.review-detail {
  min-width: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.review-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.review-detail__head h2 {
  margin: 4px 0;
  font-size: 15px;
}

.review-detail__head p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
}

.review-detail > .permission-banner {
  margin: 10px 16px 0;
}

.review-compare {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 1fr 1.1fr;
  align-items: stretch;
  margin: 13px 16px;
  background: #f8faf7;
  border: 1px solid #e1e7e3;
  border-radius: 6px;
}

.review-compare > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 11px 13px;
}

.review-compare > div + div {
  border-left: 1px solid #e5eae7;
}

.review-compare__column > strong {
  margin: 4px 0 1px;
  font-size: 16px;
}

.review-compare > div > span {
  color: var(--muted);
  font-size: 7px;
}

.review-compare__column--current {
  background: #f0f7f3;
}

.compare-arrow {
  display: grid;
  place-items: center;
  color: #9aa5a1;
  border-left: 1px solid #e5eae7 !important;
}

.review-compare__amount > strong {
  margin: 4px 0 1px;
  color: var(--teal-dark);
  font-size: 16px;
}

.review-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.8fr);
  gap: 12px;
  padding: 0 16px 13px;
}

.review-evidence-card,
.review-info-card {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.review-evidence-svg {
  overflow: hidden;
  max-height: 220px;
  margin-bottom: 7px;
  background: #fbfcfa;
  border: 1px solid #e5eae7;
  border-radius: 4px;
}

.review-evidence-svg svg {
  width: 100%;
}

.review-evidence-svg text {
  fill: #4c5c56;
  font-size: 10px;
}

.evidence-ref {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 9px;
  padding: 6px 0;
  color: #485852;
  font-size: 8px;
  line-height: 1.55;
  border-top: 1px solid #eef1ee;
}

.evidence-ref span:first-child {
  color: var(--muted);
}

.evidence-ref code {
  overflow-wrap: anywhere;
  font-size: 7px;
}

.review-side-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
}

.review-info-card {
  flex: 1;
}

.review-price-source {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #f8faf7;
  border-radius: 4px;
}

.review-price-source .file-icon {
  width: 28px;
  height: 28px;
}

.review-price-source > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.review-price-source strong {
  overflow: hidden;
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.review-price-source small {
  color: var(--muted);
  font-size: 7px;
}

.review-price-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 7px;
}

.review-price-facts span {
  display: flex;
  flex-direction: column;
}

.review-price-facts small {
  color: var(--muted);
  font-size: 7px;
}

.review-price-facts strong {
  margin-top: 2px;
  font-size: 9px;
}

.review-info-card .notice {
  margin-top: 8px;
}

.fee-mini-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.fee-mini-table span {
  display: flex;
  min-height: 38px;
  flex-direction: column;
  justify-content: center;
  padding: 5px 7px;
  color: var(--muted);
  font-size: 7px;
  border-bottom: 1px solid #eef1ee;
}

.fee-mini-table strong {
  color: #44544e;
  font-size: 8px;
  font-weight: 500;
}

.fee-mini-table small {
  color: #98a29e;
  font-size: 6px;
}

.review-comments {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--line);
}

.comment-thread {
  margin-bottom: 11px;
}

.comment {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
}

.comment--reply {
  margin-left: 32px;
}

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

.comment strong {
  font-size: 8px;
}

.comment p {
  margin: 3px 0;
  color: #596761;
  font-size: 8px;
  line-height: 1.6;
}

.comment time {
  color: #99a39f;
  font-size: 7px;
}

.review-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.comment-tools {
  display: flex;
  gap: 1px;
}

.review-action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

/* Reports */
.report-summary {
  display: grid;
  grid-template-columns: 1.1fr repeat(4, 1fr);
  min-height: 74px;
  margin-bottom: 11px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.report-summary > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 10px 14px;
  border-left: 1px solid #e8ece9;
}

.report-summary > div:first-child {
  border-left: 0;
}

.report-summary span {
  color: var(--muted);
  font-size: 8px;
}

.report-summary strong {
  overflow: hidden;
  margin: 2px 0;
  font-size: 17px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.report-summary strong small {
  margin-left: 2px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 400;
}

.report-summary small {
  color: #919b97;
  font-size: 7px;
}

.report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(370px, 1fr);
  gap: 11px;
  margin-bottom: 11px;
}

.report-grid--secondary {
  grid-template-columns: minmax(0, 1.2fr) minmax(380px, 1fr);
}

.donut-chart-wrap {
  display: flex;
  min-height: 284px;
  align-items: center;
  gap: 18px;
  padding: 11px 20px 15px;
}

.donut-chart {
  width: 220px;
  height: 220px;
  flex: 0 0 auto;
  overflow: visible;
  transform: rotate(-90deg);
}

.donut-chart .donut-track {
  stroke: #edf0ed;
  stroke-width: 22;
}

.donut-segment {
  fill: none;
  stroke-width: 22;
}

.donut-segment--1 {
  stroke: #3e867a;
}

.donut-segment--2 {
  stroke: #6593a9;
}

.donut-segment--3 {
  stroke: #c29353;
}

.donut-segment--4 {
  stroke: #84997b;
}

.donut-segment--5 {
  stroke: #ac7a73;
}

.donut-segment--6 {
  stroke: #877e9f;
}

.donut-segment--7 {
  stroke: #90958a;
}

.donut-center-label,
.donut-center-value {
  transform: rotate(90deg);
  transform-origin: 110px 110px;
}

.donut-center-label {
  fill: var(--muted);
  font-size: 8px;
}

.donut-center-value {
  fill: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.donut-legend {
  display: flex;
  min-width: 170px;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.donut-legend div {
  display: grid;
  grid-template-columns: 8px minmax(70px, 1fr) auto 37px;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 0 5px;
  font-size: 8px;
  border-bottom: 1px solid #eef1ee;
}

.donut-legend strong {
  font-size: 8px;
  text-align: right;
}

.donut-legend small {
  color: var(--muted);
  font-size: 7px;
  text-align: right;
}

.vertical-chart {
  display: flex;
  height: 290px;
  gap: 8px;
  padding: 16px 18px 10px 13px;
}

.vc-y-axis {
  display: flex;
  width: 46px;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 21px;
  color: #919b97;
  font-size: 6px;
  text-align: right;
}

.vc-plot {
  position: relative;
  flex: 1;
  margin-bottom: 20px;
}

.vc-grid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vc-grid i {
  width: 100%;
  height: 1px;
  background: #e9edea;
}

.vc-budget-line {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 2;
  height: 1px;
  background: #c69a5e;
  border-top: 1px dashed #c69a5e;
}

.vc-budget-line span {
  position: absolute;
  top: -16px;
  right: 0;
  padding: 1px 4px;
  color: #946124;
  font-size: 6px;
  background: #fbf5eb;
}

.vc-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 9px;
  padding: 0 8px;
}

.vc-bar-wrap {
  display: flex;
  height: 100%;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.vc-bar {
  position: relative;
  width: 28px;
  min-height: 10px;
  background: #93b8ad;
  border-radius: 3px 3px 0 0;
}

.vc-bar.is-current {
  background: var(--teal);
}

.vc-bar span {
  position: absolute;
  top: -20px;
  left: 50%;
  padding: 2px 4px;
  color: #fff;
  font-size: 6px;
  white-space: nowrap;
  background: var(--teal-dark);
  border-radius: 3px;
  transform: translateX(-50%);
}

.vc-bar-wrap small {
  position: absolute;
  bottom: -17px;
  color: #83908b;
  font-size: 6px;
}

.ranking-list {
  padding: 4px 14px 9px;
}

.ranking-row {
  display: grid;
  min-height: 40px;
  grid-template-columns: 20px minmax(180px, 1fr) 74px 42px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #eef1ee;
  font-size: 8px;
}

.ranking-row:last-child {
  border-bottom: 0;
}

.ranking-num {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: #6e7c77;
  font-size: 7px;
  background: #f0f3f0;
  border-radius: 3px;
}

.ranking-row:nth-child(-n + 3) .ranking-num {
  color: #fff;
  background: var(--teal);
}

.ranking-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.ranking-main strong {
  font-size: 8px;
}

.ranking-main small {
  overflow: hidden;
  color: var(--muted);
  font-size: 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ranking-main > div {
  width: min(100%, 280px);
  height: 2px;
  overflow: hidden;
  background: #edf0ed;
}

.ranking-main > div i {
  display: block;
  height: 100%;
  background: #75a699;
}

.ranking-row > strong {
  text-align: right;
}

.ranking-row > span:last-child {
  color: var(--muted);
  font-size: 7px;
  text-align: right;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-bottom: 1px solid #edf0ed;
}

.kpi-grid > div {
  display: flex;
  min-height: 80px;
  flex-direction: column;
  justify-content: center;
  padding: 10px 14px;
  border-right: 1px solid #edf0ed;
  border-bottom: 1px solid #edf0ed;
}

.kpi-grid > div:nth-child(2n) {
  border-right: 0;
}

.kpi-grid > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.kpi-grid span {
  color: var(--muted);
  font-size: 7px;
}

.kpi-grid strong {
  margin: 2px 0;
  font-size: 17px;
}

.kpi-grid strong small {
  margin-left: 2px;
  color: var(--muted);
  font-size: 7px;
}

.kpi-grid .kpi-text {
  font-size: 10px;
}

.kpi-grid em {
  color: #8a9691;
  font-size: 7px;
  font-style: normal;
}

.bias-list {
  padding: 0 13px 7px;
}

.bias-list div {
  display: grid;
  min-height: 35px;
  grid-template-columns: 105px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 6px;
  font-size: 7px;
  border-bottom: 1px solid #eef1ee;
}

.bias-list div:last-child {
  border-bottom: 0;
}

.bias-list span {
  color: var(--muted);
}

.bias-list strong {
  overflow: hidden;
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bias-list em {
  color: var(--amber);
  font-size: 7px;
  font-style: normal;
  text-align: right;
}

.report-table-alternative {
  max-height: 320px;
}

/* Settings */
.settings-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 13px;
}

.settings-subnav {
  display: flex;
  height: max-content;
  flex-direction: column;
  padding: 7px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.settings-subnav button,
.settings-subnav a {
  display: flex;
  height: 35px;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  color: #63706b;
  font-size: 9px;
  text-align: left;
  border-radius: 5px;
}

.settings-subnav button:hover,
.settings-subnav a:hover,
.settings-subnav button.is-active {
  color: var(--teal-dark);
  background: #edf5f1;
}

.settings-subnav button.is-active {
  font-weight: 600;
}

.settings-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 11px;
}

.settings-content .panel {
  padding-bottom: 15px;
}

.settings-content .panel > .form-grid,
.settings-content .panel > .notice,
.settings-content .panel > .asset-links,
.settings-content .panel > .security-list {
  margin: 0 16px;
}

.settings-content .panel > .form-grid {
  margin-top: 15px;
}

.settings-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.asset-links {
  display: flex;
  flex-direction: column;
  margin-top: 10px !important;
}

.asset-links a,
.asset-links button {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: 8px;
  padding: 7px 1px;
  text-align: left;
  border-bottom: 1px solid #edf0ed;
}

.asset-links a:last-child,
.asset-links button:last-child {
  border-bottom: 0;
}

.asset-links > a > span:first-child,
.asset-links > button > span:first-child {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 5px;
}

.asset-links > a > div,
.asset-links > button > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.asset-links strong {
  font-size: 8px;
}

.asset-links small {
  color: var(--muted);
  font-size: 7px;
}

.asset-links > a > .icon,
.asset-links > button > .icon {
  color: #a3aca8;
}

.security-list {
  display: flex;
  flex-direction: column;
  margin-top: 10px !important;
}

.security-list > div {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #edf0ed;
}

.security-list > div:last-child {
  border-bottom: 0;
}

.security-list > div > .icon:first-child {
  color: #648078;
}

.security-list > div > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.security-list strong {
  font-size: 8px;
}

.security-list small {
  color: var(--muted);
  font-size: 7px;
}

.pricing-hero {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px 17px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.pricing-hero > div:first-child {
  min-width: 260px;
}

.pricing-hero h2 {
  margin: 3px 0;
  font-size: 14px;
}

.pricing-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.pricing-hero__facts {
  display: flex;
  flex: 1;
  align-items: center;
}

.pricing-hero__facts > span {
  display: flex;
  min-width: 120px;
  flex: 1;
  flex-direction: column;
  padding: 0 16px;
  border-left: 1px solid #e7ebe8;
}

.pricing-hero__facts small {
  color: var(--muted);
  font-size: 7px;
}

.pricing-hero__facts strong {
  margin-top: 1px;
  font-size: 17px;
}

.pricing-hero__facts em {
  color: #8a9691;
  font-size: 7px;
  font-style: normal;
}

.fee-priority {
  padding: 13px 16px;
  margin: 10px 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.fee-priority__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.fee-priority__head h2 {
  margin: 0;
  font-size: 12px;
}

.fee-priority__head span {
  color: var(--muted);
  font-size: 8px;
}

.fee-priority__flow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fee-priority__flow > div {
  display: grid;
  min-height: 54px;
  flex: 1;
  grid-template-columns: 25px 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  gap: 0 7px;
  padding: 8px 10px;
  background: #f8faf7;
  border: 1px solid #e5eae7;
  border-radius: 5px;
}

.fee-priority__flow > div > span {
  grid-row: 1 / 3;
  color: #a1aca8;
  font-family: var(--mono);
  font-size: 14px;
}

.fee-priority__flow strong {
  align-self: end;
  font-size: 8px;
}

.fee-priority__flow small {
  align-self: start;
  color: var(--muted);
  font-size: 7px;
}

.fee-priority__flow > div.is-active {
  background: #eef6f2;
  border-color: #b8d7cc;
}

.fee-priority__flow > div.is-active > span {
  color: var(--teal);
}

.fee-priority__flow > .icon {
  color: #b2bcb8;
}

.formula-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  margin-top: 10px;
  color: #53625d;
  background: #f6f8f5;
  border: 1px solid #e1e7e3;
  border-radius: 6px;
}

.formula-strip code {
  padding-right: 12px;
  font-size: 7px;
  border-right: 1px solid #dce3df;
}

.formula-strip code:last-child {
  border-right: 0;
}

.permission-table {
  min-width: 840px;
}

.permission-check {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 7px;
}

.permission-check--yes {
  color: var(--green);
}

.permission-check--no {
  color: #9ca5a1;
}

.ai-settings-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-bottom: 10px;
  background: #f8faf7;
  border: 1px solid #dce6e1;
  border-radius: 7px;
}

.ai-settings-banner.is-connected {
  background: #f2f8f5;
  border-color: #c9e2d7;
}

.ai-settings-banner__icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  color: #dceee8;
  background: #216257;
  border-radius: 8px;
}

.ai-settings-banner > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.ai-settings-banner h2 {
  margin: 2px 0;
  font-size: 16px;
}

.ai-settings-banner p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.ai-settings-banner code {
  padding: 1px 4px;
  color: #4c6259;
  font-size: 7px;
  background: #e7efeb;
  border-radius: 3px;
}

.ai-settings-banner__status {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 5px;
}

.ai-settings-banner__status > span:not(.status) {
  color: var(--muted);
  font-size: 7px;
}

.ai-settings-grid {
  margin-top: 10px;
}

.ai-settings-grid .panel {
  padding-bottom: 13px;
}

.ai-settings-grid .panel > .form-grid {
  margin: 12px 14px 0;
}

.key-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 14px 0;
  padding: 9px;
  color: #61706a;
  background: #f6f8f5;
  border: 1px solid #e3e8e5;
  border-radius: 5px;
}

.key-status > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.key-status strong {
  font-family: var(--mono);
  font-size: 7px;
}

.key-status small {
  color: var(--muted);
  font-size: 7px;
}

.masked-key {
  color: #9ca7a2;
  font-family: var(--mono);
  font-size: 8px;
}

.toggle-list {
  display: flex;
  flex-direction: column;
  margin: 10px 14px 0;
}

.toggle-list label,
.toggle-line {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #edf0ed;
}

.toggle-list label:last-child {
  border-bottom: 0;
}

.toggle-list label > span,
.toggle-line > span {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.toggle-list strong,
.toggle-line strong {
  font-size: 8px;
}

.toggle-list small,
.toggle-line small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
}

.toggle-list input,
.toggle-line input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-list i,
.toggle-line > i {
  position: relative;
  width: 30px;
  height: 17px;
  flex: 0 0 auto;
  background: #c8d0cc;
  border-radius: 9px;
  transition: background-color 0.15s;
}

.toggle-list i::after,
.toggle-line > i::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(20, 39, 33, 0.25);
  content: "";
  transition: transform 0.15s;
}

.toggle-list input:checked + i,
.toggle-line input:checked + i {
  background: var(--teal);
}

.toggle-list input:checked + i::after,
.toggle-line input:checked + i::after {
  transform: translateX(13px);
}

.toggle-line {
  margin-top: 10px;
  padding: 0 2px;
}

.ai-capabilities {
  margin: 13px 14px 0;
}

.ai-capabilities > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 7px;
}

.ai-capabilities > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ai-log-table {
  min-width: 920px;
}

.ai-log-table code {
  font-size: 7px;
}

.ai-safety-panel {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  margin-top: 10px;
  color: #486059;
  background: #eef6f2;
  border: 1px solid #cee2da;
  border-radius: 7px;
}

.ai-safety-panel > div {
  flex: 1;
}

.ai-safety-panel strong {
  font-size: 9px;
}

.ai-safety-panel p {
  margin: 3px 0 0;
  color: #61736c;
  font-size: 8px;
  line-height: 1.6;
}

/* Dialogs and drawers */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 24, 20, 0.46);
  backdrop-filter: blur(2px);
}

.dialog {
  display: flex;
  width: min(680px, 96vw);
  max-height: min(820px, 92vh);
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9px;
  box-shadow: var(--shadow-lg);
  animation: dialogIn 0.16s ease-out;
}

.dialog--large {
  width: min(960px, 96vw);
}

.dialog--small {
  width: min(460px, 96vw);
}

@keyframes dialogIn {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.995);
  }
}

.dialog__head,
.drawer__head {
  display: flex;
  min-height: 58px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}

.dialog__head h2,
.drawer__head h2 {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 650;
}

.dialog__body {
  min-height: 0;
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.dialog__footer,
.drawer__footer {
  display: flex;
  min-height: 57px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  background: #fafbf9;
  border-top: 1px solid var(--line);
}

.dialog__footer .dialog-hint {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 8px;
}

.dialog__footer > .dialog-hint + .muted {
  font-size: 8px;
}

.dialog-backdrop.drawer-backdrop {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}

.drawer {
  display: flex;
  width: min(440px, 96vw);
  height: 100%;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: -18px 0 48px rgba(12, 29, 23, 0.16);
  animation: drawerIn 0.2s ease-out;
}

.drawer--wide {
  width: min(690px, 96vw);
}

@keyframes drawerIn {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
}

.drawer__body {
  min-height: 0;
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.drawer__body > .notice + .notice,
.drawer__body > .form-grid + .notice,
.drawer__body > .drawer-section-title + .form-grid {
  margin-top: 12px;
}

.drawer__footer {
  min-height: 61px;
  justify-content: space-between;
}

.drawer-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin: -4px 0 17px;
  padding-bottom: 13px;
  border-bottom: 1px solid #e8ece9;
}

.drawer-stepper > div {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 6px;
}

.drawer-stepper > div + div::before {
  width: 18px;
  height: 1px;
  margin-right: 5px;
  background: #dce3df;
  content: "";
}

.drawer-stepper > div > span {
  display: grid;
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  place-items: center;
  color: #929e99;
  font-size: 8px;
  background: #f3f5f2;
  border: 1px solid #dfe5e2;
  border-radius: 50%;
}

.drawer-stepper > div > strong {
  overflow: hidden;
  color: #8a9691;
  font-size: 8px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.drawer-stepper > div.is-active > span {
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
}

.drawer-stepper > div.is-active > strong {
  color: var(--teal-dark);
  font-weight: 600;
}

.drawer-stepper > div.is-done > span {
  color: #fff;
  background: #72a797;
  border-color: #72a797;
}

.drawer-stepper > div.is-done > strong {
  color: #53625d;
}

.drawer-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin: 15px 0 9px;
}

.drawer-section-title h3 {
  margin: 0;
  font-size: 10px;
}

.drawer-section-title > span {
  color: var(--muted);
  font-size: 7px;
}

.upload-dropzone {
  display: flex;
  min-height: 132px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px;
  color: var(--muted);
  background: #fafcf9;
  border: 1px dashed #bfcfc8;
  border-radius: 7px;
  cursor: pointer;
}

.upload-dropzone:hover {
  background: #f5f9f7;
  border-color: var(--teal);
}

.upload-dropzone__icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  margin-bottom: 3px;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 50%;
}

.upload-dropzone strong {
  color: #465650;
  font-size: 10px;
}

.upload-dropzone > span:last-of-type {
  font-size: 8px;
}

.selected-file {
  display: flex;
  min-height: 55px;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  margin-top: 10px;
  background: #fff;
  border: 1px solid #dfe6e2;
  border-radius: 6px;
}

.selected-file > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.selected-file strong {
  overflow: hidden;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.selected-file small {
  color: var(--muted);
  font-size: 7px;
}

.parse-progress-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 8px 0 12px;
}

.parse-spinner {
  display: grid;
  width: 49px;
  height: 49px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--teal);
  background: #edf6f2;
  border-radius: 50%;
}

.parse-spinner .icon {
  animation: spin 1.6s linear infinite;
}

.parse-progress-head > div {
  min-width: 0;
  flex: 1;
}

.parse-progress-head strong {
  font-size: 11px;
}

.parse-progress-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 8px;
}

.parse-progress-value {
  color: var(--teal);
  font-size: 17px;
  font-weight: 700;
}

.parse-progress-track {
  height: 5px;
  overflow: hidden;
  background: #e9edea;
  border-radius: 3px;
}

.parse-progress-track i {
  display: block;
  height: 100%;
  background: var(--teal);
  border-radius: 3px;
  transition: width 0.3s;
}

.parse-stage-list {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}

.parse-stage-list > div {
  display: grid;
  min-height: 34px;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 7px;
  color: #9ba5a1;
  border-bottom: 1px solid #eef1ee;
}

.parse-stage-list > div > span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  background: #f3f5f2;
  border-radius: 50%;
}

.parse-stage-list strong {
  color: #87938e;
  font-size: 8px;
  font-weight: 500;
}

.parse-stage-list small {
  font-size: 7px;
}

.parse-stage-list > div.is-done > span {
  color: #fff;
  background: #69a08f;
}

.parse-stage-list > div.is-done strong {
  color: #4d5c57;
}

.parse-stage-list > div.is-running > span {
  color: var(--teal);
  background: var(--teal-soft);
}

.parse-stage-list > div.is-running strong {
  color: var(--teal-dark);
}

.parse-log {
  margin: 15px 0 11px;
  padding: 9px 11px;
  background: #f8f9f7;
  border: 1px solid #e4e9e5;
  border-radius: 5px;
}

.parse-log > div {
  display: flex;
  gap: 8px;
  padding: 3px 0;
  color: #6c7974;
  font-family: var(--mono);
  font-size: 7px;
}

.parse-log span {
  color: #99a39f;
}

.parse-log p {
  margin: 0;
}

.parse-complete-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 14px;
}

.parse-complete-icon {
  display: grid;
  width: 47px;
  height: 47px;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  background: #5a9685;
  border-radius: 50%;
}

.parse-complete-head h3 {
  margin: 4px 0;
  font-size: 13px;
}

.parse-complete-head p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.parse-result-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-bottom: 12px;
  border: 1px solid #e2e8e4;
  border-radius: 6px;
}

.parse-result-grid > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 10px;
  border-left: 1px solid #e6ebe8;
}

.parse-result-grid > div:first-child {
  border-left: 0;
}

.parse-result-grid span {
  color: var(--muted);
  font-size: 7px;
}

.parse-result-grid strong {
  margin: 2px 0;
  font-size: 16px;
}

.parse-result-grid small {
  color: #949f9b;
  font-size: 6px;
}

.layer-mapping-preview {
  margin-top: 13px;
}

.mapping-rows {
  border: 1px solid #e5eae7;
  border-radius: 5px;
}

.mapping-rows > div {
  display: grid;
  min-height: 35px;
  grid-template-columns: 150px 24px 105px 1fr;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  font-size: 8px;
  border-bottom: 1px solid #edf0ed;
}

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

.mapping-rows code {
  color: #4d6259;
  font-size: 7px;
}

.mapping-rows > div > .icon {
  color: #a2aca8;
}

.mapping-rows strong {
  color: #697671;
  font-size: 7px;
  font-weight: 500;
}

.export-opportunity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 11px;
  background: #f5f9f6;
  border: 1px solid #d6e6df;
  border-radius: 6px;
}

.export-opportunity > span {
  color: var(--teal);
}

.export-opportunity > div {
  min-width: 0;
  flex: 1;
}

.export-opportunity strong {
  font-size: 9px;
}

.export-opportunity p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 7px;
}

.price-source-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 13px;
  border: 1px solid #e2e8e4;
  border-radius: 6px;
}

.price-source-summary > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  padding: 10px 11px;
  border-left: 1px solid #e8ece9;
}

.price-source-summary > div:first-child {
  border-left: 0;
}

.price-source-summary span {
  color: var(--muted);
  font-size: 7px;
}

.price-source-summary strong {
  font-size: 15px;
}

.price-source-summary small {
  color: #97a19d;
  font-size: 7px;
}

.price-candidate-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.price-candidate {
  padding: 11px;
  background: #fff;
  border: 1px solid #e2e8e4;
  border-radius: 6px;
}

.price-candidate.is-selected {
  background: #f8fbf9;
  border-color: #9fc8bb;
}

.price-candidate__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.source-rank {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  color: #7f8d88;
  font-size: 8px;
  background: #f0f3f0;
  border-radius: 50%;
}

.price-candidate.is-selected .source-rank {
  color: #fff;
  background: var(--teal);
}

.price-candidate__head > div:nth-child(2) {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.price-candidate__head strong {
  font-size: 9px;
}

.price-candidate__head small {
  color: var(--muted);
  font-size: 7px;
}

.confidence-score {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

.confidence-score span {
  color: var(--muted);
  font-size: 6px;
}

.confidence-score strong {
  color: var(--teal);
  font-size: 10px;
}

.price-candidate__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 10px 0;
  padding: 9px 0;
  border-top: 1px solid #edf0ed;
  border-bottom: 1px solid #edf0ed;
}

.price-candidate__facts span {
  display: flex;
  flex-direction: column;
}

.price-candidate__facts small {
  color: var(--muted);
  font-size: 7px;
}

.price-candidate__facts strong {
  margin-top: 2px;
  font-size: 8px;
}

.price-candidate__footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.price-candidate__footer > span {
  flex: 1;
  color: #97a19d;
  font-size: 7px;
}

.source-policy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 13px 0;
}

.source-policy > div {
  display: flex;
  gap: 7px;
  padding: 8px;
  color: #60716a;
  background: #f7f9f6;
  border-radius: 5px;
}

.source-policy > div > span {
  display: flex;
  flex-direction: column;
}

.source-policy strong {
  font-size: 8px;
}

.source-policy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
  line-height: 1.5;
}

.trace-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid #e5eae7;
  border-radius: 5px;
}

.trace-grid > span {
  display: flex;
  min-height: 40px;
  flex-direction: column;
  justify-content: center;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 7px;
  border-right: 1px solid #edf0ed;
  border-bottom: 1px solid #edf0ed;
}

.trace-grid > span:nth-child(2n) {
  border-right: 0;
}

.trace-grid > span:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.trace-grid strong {
  margin-top: 2px;
  color: #46554f;
  font-size: 8px;
  font-weight: 500;
}

.fee-scope-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  margin-bottom: 13px;
  background: #f5f8f5;
  border: 1px solid #e0e7e3;
  border-radius: 6px;
}

.fee-scope-banner > div {
  min-width: 0;
  flex: 1;
}

.fee-scope-banner strong {
  font-size: 9px;
}

.fee-scope-banner p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 7px;
}

.fee-live-preview {
  margin-top: 13px;
  overflow: hidden;
  border: 1px solid #dce5e1;
  border-radius: 6px;
}

.fee-preview-head {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: #52615c;
  background: #f5f8f5;
  border-bottom: 1px solid #e4e9e5;
}

.fee-preview-head span {
  font-size: 8px;
  font-weight: 600;
}

.fee-preview-head strong {
  color: var(--muted);
  font-size: 7px;
  font-weight: 500;
}

.fee-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.fee-preview-grid > div {
  display: flex;
  min-height: 58px;
  flex-direction: column;
  justify-content: center;
  padding: 8px 10px;
  border-right: 1px solid #edf0ed;
  border-bottom: 1px solid #edf0ed;
}

.fee-preview-grid > div:nth-child(3n) {
  border-right: 0;
}

.fee-preview-grid > div.is-total {
  background: #fbfcf9;
}

.fee-preview-grid span {
  color: var(--muted);
  font-size: 7px;
}

.fee-preview-grid strong {
  margin: 2px 0;
  font-size: 10px;
}

.fee-preview-grid small {
  color: #8a9691;
  font-size: 7px;
}

.fee-formula {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 10px;
  margin: 10px 0;
  background: #fafbf9;
  border-left: 2px solid #7ca697;
}

.fee-formula code {
  color: #54645e;
  font-size: 7px;
}

.approval-chain {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.approval-chain > div {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  background: #f8faf7;
  border: 1px solid #e4e9e5;
  border-radius: 5px;
}

.approval-chain > div > span:first-child {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #fff;
  background: #7fa899;
  border-radius: 50%;
}

.approval-chain > div > div {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.approval-chain strong {
  font-size: 8px;
}

.approval-chain small {
  color: var(--muted);
  font-size: 7px;
}

.approval-chain time {
  color: #94a09b;
  font-size: 7px;
}

.approval-chain > div.is-current {
  background: #fbf5ea;
  border-color: #e8d5b8;
}

.approval-chain > div.is-current > span:first-child {
  background: var(--amber);
}

.material-detail-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.material-detail-head > div {
  min-width: 0;
  flex: 1;
}

.material-detail-head h3 {
  margin: 0;
  font-size: 13px;
}

.material-detail-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 8px;
}

.material-price-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 13px;
  border: 1px solid #e2e8e4;
  border-radius: 6px;
}

.material-price-hero > div {
  display: flex;
  min-height: 67px;
  flex-direction: column;
  justify-content: center;
  padding: 9px 10px;
  border-left: 1px solid #e7ebe8;
}

.material-price-hero > div:first-child {
  border-left: 0;
  background: #f8faf7;
}

.material-price-hero span {
  color: var(--muted);
  font-size: 7px;
}

.material-price-hero strong {
  margin: 2px 0;
  font-size: 12px;
}

.material-price-hero > div:first-child strong {
  color: var(--teal-dark);
  font-size: 18px;
}

.material-price-hero small {
  color: #919c98;
  font-size: 7px;
}

.source-detail-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  background: #f8faf7;
  border: 1px solid #e3e8e5;
  border-radius: 5px;
}

.source-detail-card > div {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.source-detail-card strong {
  font-size: 9px;
}

.source-detail-card small {
  color: var(--muted);
  font-size: 7px;
}

.material-detail-head + .material-price-hero + .drawer-section-title + .source-detail-card + .trace-grid {
  margin-top: 10px;
}

.price-history-chart {
  margin-top: 13px;
}

.price-history-chart svg {
  width: 100%;
  height: 165px;
}

.sync-dryrun-banner {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px;
  background: #fbf7ef;
  border: 1px solid #ead8b9;
  border-radius: 6px;
}

.sync-dryrun-banner__icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--amber);
  background: #f8ecd8;
  border-radius: 50%;
}

.sync-dryrun-banner h3 {
  margin: 4px 0 2px;
  font-size: 13px;
}

.sync-dryrun-banner p {
  margin: 0;
  color: #7e6d55;
  font-size: 8px;
}

.sync-delta-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 11px 0;
  border: 1px solid #e2e8e4;
  border-radius: 6px;
}

.sync-delta-grid > div {
  display: flex;
  min-height: 66px;
  flex-direction: column;
  justify-content: center;
  padding: 8px 10px;
  border-left: 1px solid #e8ece9;
}

.sync-delta-grid > div:first-child {
  border-left: 0;
}

.sync-delta-grid span {
  color: var(--muted);
  font-size: 7px;
}

.sync-delta-grid strong {
  margin: 2px 0;
  font-size: 17px;
}

.sync-delta-grid small {
  color: #96a09c;
  font-size: 6px;
}

.sync-stage-flow {
  display: flex;
  flex-direction: column;
  margin: 12px 0;
}

.sync-stage-flow > div {
  display: grid;
  min-height: 36px;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  border-bottom: 1px solid #edf0ed;
}

.sync-stage-flow > div:last-child {
  border-bottom: 0;
}

.sync-stage-flow > div > span {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  color: #fff;
  background: #7ba99a;
  border-radius: 50%;
}

.sync-stage-flow > div > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sync-stage-flow strong {
  font-size: 8px;
  font-weight: 500;
}

.sync-stage-flow small {
  color: var(--muted);
  font-size: 7px;
}

.sync-stage-flow > div.is-current > span {
  color: var(--amber);
  background: #fbf0dd;
}

.sync-stage-flow > div.is-current strong {
  color: #8f5c1d;
}

.sync-diff-table {
  overflow: hidden;
  border: 1px solid #e2e8e4;
  border-radius: 5px;
}

.sync-diff-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 7px;
}

.sync-diff-table th {
  height: 29px;
  padding: 0 7px;
  color: var(--muted);
  font-weight: 500;
  text-align: left;
  background: #f7f9f6;
  border-bottom: 1px solid #e2e8e4;
}

.sync-diff-table td {
  height: 35px;
  padding: 5px 7px;
  border-bottom: 1px solid #edf0ed;
}

.sync-diff-table tr:last-child td {
  border-bottom: 0;
}

.sync-diff-table .num {
  text-align: right;
}

.snapshot-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.snapshot-info > div {
  display: flex;
  gap: 7px;
  padding: 8px;
  background: #f8faf7;
  border: 1px solid #e5eae7;
  border-radius: 5px;
}

.snapshot-info > div > span {
  display: flex;
  flex-direction: column;
}

.snapshot-info strong {
  font-size: 7px;
}

.snapshot-info small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 6px;
  line-height: 1.5;
}

.export-format-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 15px;
}

.format-option {
  display: flex;
  min-height: 95px;
  align-items: flex-start;
  gap: 9px;
  padding: 11px;
  text-align: left;
  background: #fff;
  border: 1px solid #dfe5e2;
  border-radius: 6px;
}

.format-option:hover,
.format-option.is-selected {
  background: #f5f9f6;
  border-color: #92beaf;
}

.format-option__icon {
  display: grid;
  width: 33px;
  height: 33px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 5px;
}

.format-option > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.format-option strong {
  font-size: 9px;
}

.format-option small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 7px;
  line-height: 1.6;
}

.format-option > i {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  color: #fff;
  font-style: normal;
  background: var(--teal);
  border-radius: 50%;
}

.format-option:not(.is-selected) > i {
  background: transparent;
  border: 1px solid #d2dcd8;
}

.status-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 13px;
}

.status-choice-grid button {
  display: flex;
  min-height: 78px;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
  text-align: left;
  border: 1px solid #dfe5e2;
  border-radius: 6px;
}

.status-choice-grid button:hover,
.status-choice-grid button.is-selected {
  background: #f5f9f6;
  border-color: #8ebbad;
}

.status-choice-grid button > span:first-child {
  color: #66837a;
}

.status-choice-grid strong {
  margin-top: 4px;
  font-size: 9px;
}

.status-choice-grid small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
  line-height: 1.5;
}

.version-export-summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  margin-top: 12px;
  background: #f7f9f6;
  border: 1px solid #e3e8e5;
  border-radius: 5px;
}

.version-export-summary > span:first-child {
  color: var(--teal);
}

.version-export-summary > div {
  flex: 1;
}

.version-export-summary strong {
  font-size: 8px;
}

.version-export-summary p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 7px;
}

.version-export-summary > span:last-child {
  color: #94a09b;
  font-size: 7px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.checkbox-option {
  position: relative;
  display: flex;
  min-height: 35px;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  color: #65726d;
  border: 1px solid #e0e5e2;
  border-radius: 4px;
  cursor: pointer;
}

.checkbox-option:hover,
.checkbox-option.is-checked {
  color: var(--teal-dark);
  background: #f3f8f5;
  border-color: #aacfc2;
}

.checkbox-option input {
  position: absolute;
  opacity: 0;
}

.checkbox-option > span {
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  color: transparent;
  border: 1px solid #c7d2cd;
  border-radius: 3px;
}

.checkbox-option.is-checked > span {
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
}

.checkbox-option strong {
  overflow: hidden;
  font-size: 7px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.checkbox-option em {
  margin-left: auto;
  color: #a36a25;
  font-size: 6px;
  font-style: normal;
}

.option-list {
  margin-bottom: 11px;
  border-top: 1px solid #edf0ed;
}

.option-list .toggle-line {
  margin-top: 0;
}

.precheck-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding-bottom: 13px;
  border-bottom: 1px solid #e8ece9;
}

.precheck-head__icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  background: var(--teal);
  border-radius: 50%;
}

.precheck-head__icon.is-warning {
  background: var(--amber);
}

.precheck-head h3 {
  margin: 4px 0 2px;
  font-size: 12px;
}

.precheck-head p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.precheck-list {
  display: flex;
  flex-direction: column;
  margin: 11px 0;
}

.precheck-item {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid #edf0ed;
}

.precheck-item > span {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--amber);
  background: var(--amber-soft);
  border-radius: 5px;
}

.precheck-item--danger > span {
  color: var(--red);
  background: var(--red-soft);
}

.precheck-item--info > span {
  color: var(--blue);
  background: var(--blue-soft);
}

.precheck-item > div {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.precheck-item strong {
  font-size: 8px;
}

.precheck-item small {
  color: var(--muted);
  font-size: 7px;
}

.precheck-item em {
  color: #66746f;
  font-size: 8px;
  font-style: normal;
}

.export-data-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid #e3e8e5;
  border-radius: 5px;
}

.export-data-summary > span {
  display: flex;
  min-height: 55px;
  flex-direction: column;
  justify-content: center;
  padding: 8px;
  border-left: 1px solid #e8ece9;
}

.export-data-summary > span:first-child {
  border-left: 0;
}

.export-data-summary small {
  color: var(--muted);
  font-size: 7px;
}

.export-data-summary strong {
  margin-top: 2px;
  font-size: 9px;
}

.export-success {
  display: flex;
  min-height: 370px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  text-align: center;
}

.export-success__icon {
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  margin-bottom: 10px;
  color: #fff;
  background: var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 0 9px #edf7f2;
}

.export-success h3 {
  margin: 9px 0 3px;
  font-size: 15px;
}

.export-success > p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.export-success-facts {
  display: grid;
  width: min(590px, 100%);
  grid-template-columns: repeat(4, 1fr);
  margin: 18px 0 14px;
  border: 1px solid #e2e8e4;
  border-radius: 5px;
}

.export-success-facts span {
  display: flex;
  min-height: 55px;
  flex-direction: column;
  justify-content: center;
  padding: 8px;
  border-left: 1px solid #e7ebe8;
}

.export-success-facts span:first-child {
  border-left: 0;
}

.export-success-facts small {
  color: var(--muted);
  font-size: 7px;
}

.export-success-facts strong,
.export-success-facts code {
  margin-top: 2px;
  font-size: 8px;
}

.export-success-actions {
  display: flex;
  gap: 7px;
}

.snapshot-hash {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 15px;
  color: #81908a;
  font-size: 7px;
}

.export-history-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.export-history-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid #e2e8e4;
  border-radius: 6px;
}

.export-history-card__body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.export-history-card__body strong {
  overflow: hidden;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.export-history-card__body small,
.export-history-card__body span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
}

.ai-context-card {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px;
  background: #f7faf8;
  border: 1px solid #dce7e2;
  border-radius: 6px;
}

.ai-context-card > div {
  min-width: 0;
  flex: 1;
}

.ai-context-card h3 {
  margin: 3px 0;
  font-size: 10px;
}

.ai-context-card p {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--muted);
  font-size: 7px;
}

.ai-prompt-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 9px;
  color: #6c7974;
  font-size: 7px;
  background: #fbfcfa;
  border-bottom: 1px solid #e8ece9;
}

.ai-prompt-strip span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ai-suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.ai-drawer-suggestion {
  padding: 12px;
  border: 1px solid #dfe6e2;
  border-radius: 6px;
}

.ai-drawer-suggestion.is-focused {
  background: #f8fbf9;
  border-color: #8fbeaf;
}

.ai-drawer-suggestion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ai-drawer-suggestion__head > span:last-child {
  color: var(--muted);
  font-size: 7px;
}

.ai-drawer-suggestion__head strong {
  color: var(--teal);
}

.ai-drawer-suggestion h3 {
  margin: 9px 0 5px;
  font-size: 11px;
}

.ai-suggested-value {
  padding: 8px 9px;
  color: #41554d;
  font-size: 8px;
  line-height: 1.7;
  background: #f1f7f4;
  border-left: 2px solid var(--teal);
}

.ai-drawer-suggestion > p {
  margin: 8px 0;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.6;
}

.evidence-details {
  padding: 7px 8px;
  color: #66756f;
  font-size: 7px;
  background: #fafbf9;
  border-radius: 4px;
}

.evidence-details summary {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.evidence-details > div {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 5px;
  padding-left: 4px;
}

.ai-drawer-suggestion__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: 10px;
}

.ai-drawer-suggestion__footer > span {
  color: #98a29e;
  font-size: 7px;
}

.ai-drawer-suggestion__footer > div {
  display: flex;
  gap: 4px;
}

.ai-ask-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  margin-top: 12px;
  background: #f7f9f6;
  border: 1px solid #e1e7e3;
  border-radius: 6px;
}

.ai-ask-box > div {
  min-width: 0;
  flex: 1;
}

.ai-ask-box strong {
  font-size: 8px;
}

.ai-ask-box p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 7px;
}

.ai-guardrail {
  margin-top: 11px;
}

.suggestion-compare {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.suggestion-compare > div > p {
  margin: 3px 0 0;
  padding: 9px;
  color: #52635c;
  font-size: 9px;
  line-height: 1.6;
  background: #f5f8f5;
  border-radius: 5px;
}

.notification-list {
  display: flex;
  flex-direction: column;
}

.notification-item {
  display: flex;
  min-height: 72px;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 2px;
  text-align: left;
  border-bottom: 1px solid #edf0ed;
}

.notification-item:hover {
  background: #fbfcfa;
}

.notification-item.is-unread::after {
  width: 5px;
  height: 5px;
  margin-top: 3px;
  background: var(--teal);
  border-radius: 50%;
  content: "";
}

.notification-item__icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 6px;
}

.notification-item__icon--amber {
  color: var(--amber);
  background: var(--amber-soft);
}

.notification-item__icon--blue {
  color: var(--blue);
  background: var(--blue-soft);
}

.notification-item__icon--red {
  color: var(--red);
  background: var(--red-soft);
}

.notification-item > div {
  min-width: 0;
  flex: 1;
}

.notification-item strong {
  font-size: 9px;
}

.notification-item p {
  margin: 3px 0;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.5;
}

.notification-item time {
  color: #9ba5a1;
  font-size: 7px;
}

/* Search dialog */
.search-dialog .dialog__body {
  padding: 0;
}

.command-search {
  display: flex;
  height: 54px;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.command-search > .icon {
  color: var(--muted);
}

.command-search input {
  flex: 1;
  height: 100%;
  padding: 0;
  font-size: 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.command-search kbd {
  padding: 2px 5px;
  color: #899590;
  font-size: 7px;
  background: #f3f5f2;
  border: 1px solid #dfe5e2;
  border-radius: 3px;
}

.search-result-groups {
  max-height: 480px;
  padding: 9px 10px;
  overflow-y: auto;
}

.search-result-group {
  margin-bottom: 9px;
}

.search-result-group__label {
  display: block;
  padding: 5px 7px;
  color: #8b9692;
  font-size: 7px;
}

.search-result {
  display: flex;
  width: 100%;
  min-height: 43px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  text-align: left;
  border-radius: 5px;
}

.search-result:hover {
  background: #f1f6f3;
}

.search-result__icon {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: #5b7e73;
  background: #edf4f1;
  border-radius: 5px;
}

.search-result > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.search-result strong {
  font-size: 9px;
}

.search-result small {
  color: var(--muted);
  font-size: 7px;
}

.search-result > .icon {
  color: #a3aca8;
}

.search-helper-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
  color: var(--muted);
  font-size: 7px;
  border-top: 1px solid var(--line);
}

.search-helper-row > span {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 4px;
}

.search-helper-row button {
  padding: 2px 6px;
  color: #65736e;
  font-size: 7px;
  background: #f4f6f3;
  border-radius: 4px;
}

.search-helper-row button:hover {
  color: var(--teal);
  background: #eaf4ef;
}

/* Modal content */
.print-preview-sheet {
  padding: 20px;
  color: #26352f;
  background: #fff;
  border: 1px solid #ccd7d2;
  box-shadow: 0 2px 12px rgba(30, 48, 41, 0.08);
}

.print-preview-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 6px;
  color: var(--teal-dark);
  font-size: 8px;
  font-weight: 600;
  border-bottom: 2px solid var(--teal-dark);
}

.print-preview-sheet h2 {
  margin: 16px 0 3px;
  font-size: 18px;
}

.print-preview-sheet > p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 8px;
}

.print-preview-sheet table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8px;
}

.print-preview-sheet th {
  padding: 5px;
  color: #fff;
  font-weight: 500;
  text-align: left;
  background: var(--teal-dark);
  border: 1px solid #58736a;
}

.print-preview-sheet td {
  padding: 5px;
  border: 1px solid #d5dfda;
}

.print-preview-sheet tfoot td {
  color: var(--teal-dark);
  font-weight: 700;
  background: #f1f6f3;
}

.print-preview-footer {
  margin-top: 10px;
  color: #8b9692;
  font-size: 7px;
  text-align: center;
}

.version-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 13px;
  border: 1px solid #e2e8e4;
  border-radius: 5px;
}

.version-summary > span {
  display: flex;
  min-height: 60px;
  flex-direction: column;
  justify-content: center;
  padding: 8px 10px;
  border-left: 1px solid #e8ece9;
}

.version-summary > span:first-child {
  border-left: 0;
}

.version-summary small {
  color: var(--muted);
  font-size: 7px;
}

.version-summary strong {
  margin-top: 2px;
  font-size: 12px;
}

.diff-table {
  overflow: hidden;
  border: 1px solid #e2e8e4;
  border-radius: 5px;
}

.diff-head,
.diff-row {
  display: grid;
  min-height: 34px;
  grid-template-columns: 1.2fr 1fr 1fr 1.1fr 0.65fr;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  font-size: 8px;
  border-bottom: 1px solid #edf0ed;
}

.diff-head {
  min-height: 30px;
  color: var(--muted);
  font-size: 7px;
  background: #f6f8f5;
}

.diff-row:last-child {
  border-bottom: 0;
}

.diff-positive {
  color: var(--amber);
}

.audit-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 13px;
}

.audit-timeline {
  display: flex;
  flex-direction: column;
}

.audit-item {
  display: grid;
  min-height: 72px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid #edf0ed;
}

.audit-item__dot {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 50%;
}

.audit-item__body {
  display: flex;
  flex-direction: column;
}

.audit-item strong {
  font-size: 9px;
}

.audit-item__body > span {
  margin-top: 2px;
  color: #586761;
  font-size: 8px;
}

.audit-item p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 7px;
}

.audit-item time {
  color: #96a19d;
  font-size: 7px;
}

.audit-trace {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.audit-trace > div {
  display: flex;
  gap: 8px;
  padding: 9px;
  background: #f7f9f6;
  border: 1px solid #e3e8e5;
  border-radius: 5px;
}

.audit-trace > div > span {
  display: flex;
  flex-direction: column;
}

.audit-trace strong {
  font-size: 8px;
}

.audit-trace small {
  color: var(--muted);
  font-size: 7px;
  line-height: 1.5;
}

.mapping-modal-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  margin-bottom: 10px;
  color: #5e7069;
  font-size: 8px;
  background: #f6f8f5;
  border-radius: 4px;
}

.mapping-table {
  overflow: hidden;
  border: 1px solid #e2e8e4;
  border-radius: 5px;
}

.mapping-head,
.mapping-row {
  display: grid;
  min-height: 39px;
  grid-template-columns: 1.1fr 0.55fr 1fr 0.55fr 0.6fr;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  font-size: 8px;
  border-bottom: 1px solid #edf0ed;
}

.mapping-head {
  min-height: 31px;
  color: var(--muted);
  font-size: 7px;
  background: #f6f8f5;
}

.mapping-row:last-child {
  border-bottom: 0;
}

.mapping-row code {
  font-size: 7px;
}

.mapping-row select {
  width: 100%;
  height: 26px;
  padding: 0 5px;
  font-size: 7px;
}

.mapping-row strong {
  font-size: 8px;
}

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

.basis-formula-list > div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  background: #f8faf7;
  border: 1px solid #e4e9e5;
  border-radius: 5px;
}

.basis-formula-list > div > span {
  color: #9ba6a1;
  font-family: var(--mono);
  font-size: 9px;
}

.basis-formula-list code {
  color: #44554e;
  font-size: 8px;
}

.basis-config-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 12px 0;
  border: 1px solid #e2e8e4;
  border-radius: 5px;
}

.basis-config-grid > div {
  display: flex;
  min-height: 62px;
  flex-direction: column;
  justify-content: center;
  padding: 8px 10px;
  border-left: 1px solid #e8ece9;
}

.basis-config-grid > div:first-child {
  border-left: 0;
}

.basis-config-grid span {
  color: var(--muted);
  font-size: 7px;
}

.basis-config-grid strong {
  margin: 2px 0;
  font-size: 12px;
}

.basis-config-grid small {
  color: #8f9a96;
  font-size: 7px;
}

.basis-totals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #e2e8e4;
  border-radius: 5px;
}

.basis-totals > span {
  display: flex;
  min-height: 51px;
  flex-direction: column;
  justify-content: center;
  padding: 7px 9px;
  border-right: 1px solid #edf0ed;
  border-bottom: 1px solid #edf0ed;
}

.basis-totals > span:nth-child(4n) {
  border-right: 0;
}

.basis-totals > span:nth-last-child(-n + 4) {
  border-bottom: 0;
}

.basis-totals > span.is-total {
  background: #f2f7f4;
}

.basis-totals small {
  color: var(--muted);
  font-size: 7px;
}

.basis-totals strong {
  margin-top: 2px;
  font-size: 9px;
}

.ai-safety-panel + .panel,
.ai-settings-grid + .panel {
  margin-top: 10px;
}

.mobile-scrim {
  display: none;
}

/* Account, membership and personal file database */
.auth-loading {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #f4f5f2;
}

.auth-loading > strong {
  font-size: 15px;
}

.auth-loading > p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.auth-loading__line {
  width: 160px;
  height: 3px;
  overflow: hidden;
  background: #dfe5e1;
  border-radius: 2px;
}

.auth-loading__line i {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--teal);
  animation: authLoading 1.1s ease-in-out infinite alternate;
}

@keyframes authLoading {
  to {
    transform: translateX(240%);
  }
}

.login-page {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(420px, 1.05fr) minmax(480px, 0.95fr);
  background: #f2f4f1;
}

.login-brand {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  padding: 27px 38px 24px;
  overflow: hidden;
  color: #eaf4f0;
  background: #133c36;
}

.login-brand::before {
  position: absolute;
  right: -80px;
  bottom: -140px;
  width: 480px;
  height: 480px;
  border: 1px solid rgba(206, 232, 223, 0.1);
  border-radius: 50%;
  box-shadow:
    0 0 0 70px rgba(206, 232, 223, 0.025),
    0 0 0 140px rgba(206, 232, 223, 0.018);
  content: "";
}

.login-brand::after {
  position: absolute;
  top: 120px;
  right: 50px;
  width: 240px;
  height: 380px;
  opacity: 0.1;
  background-image:
    linear-gradient(rgba(198, 228, 218, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198, 228, 218, 0.32) 1px, transparent 1px);
  background-size: 28px 28px;
  content: "";
  transform: rotate(-8deg);
}

.login-brand__logo {
  position: relative;
  z-index: 1;
  height: auto;
  padding: 0;
  border-bottom: 0;
}

.login-brand__content {
  position: relative;
  z-index: 1;
  width: min(590px, 92%);
  margin: auto 0;
  padding: 40px 0;
}

.login-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  color: #a8c7be;
  font-size: 10px;
}

.login-brand h1 {
  margin: 0;
  color: #f3faf7;
  font-size: clamp(31px, 3vw, 48px);
  font-weight: 600;
  line-height: 1.35;
}

.login-brand__content > p {
  max-width: 470px;
  margin: 18px 0 25px;
  color: #a8bdb7;
  font-size: 12px;
  line-height: 1.8;
}

.login-flow {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  color: #d8e9e4;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
}

.login-flow span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.login-flow i {
  color: #698f85;
  font-style: normal;
}

.login-assurance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.login-assurance > span {
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 0 7px;
  color: #91ada5;
}

.login-assurance > span > .icon {
  grid-row: 1 / 3;
  margin-top: 2px;
}

.login-assurance strong {
  color: #d4e5e0;
  font-size: 9px;
}

.login-assurance small {
  margin-top: 2px;
  font-size: 8px;
  line-height: 1.55;
}

.login-brand__footer {
  position: relative;
  z-index: 1;
  color: #76948c;
  font-size: 8px;
}

.login-panel {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px;
}

.login-form-wrap {
  width: min(410px, 100%);
}

.login-form-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 23px;
}

.login-form-head__icon {
  display: grid;
  width: 41px;
  height: 41px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border: 1px solid #d9e9e3;
  border-radius: 8px;
}

.login-form-head h2 {
  margin: 2px 0 2px;
  font-size: 21px;
}

.login-form-head p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.phone-input,
.code-input {
  display: flex;
  align-items: center;
  gap: 7px;
}

.phone-input {
  height: 42px;
  padding-left: 10px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
}

.phone-input:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15, 116, 104, 0.09);
}

.phone-input i {
  padding-right: 9px;
  color: #53625d;
  font-size: 11px;
  font-style: normal;
  border-right: 1px solid #e1e6e3;
}

.phone-input input {
  height: 40px;
  padding: 0;
  font-size: 13px;
  border: 0;
  box-shadow: none;
}

.code-input input {
  height: 42px;
  flex: 1;
  padding: 0 11px;
  font-size: 13px;
  letter-spacing: 3px;
}

.code-input .btn {
  width: 105px;
  height: 42px;
  border-radius: 6px;
}

.login-consent {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: #7a8782;
  font-size: 8px;
  line-height: 1.6;
}

.login-consent input {
  margin-top: 1px;
}

.login-error,
.login-notice {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 9px;
  font-size: 9px;
  line-height: 1.55;
  border-radius: 5px;
}

.login-error {
  color: #913f3c;
  background: #fbedeb;
  border: 1px solid #edcbc8;
}

.login-notice {
  color: #4f665e;
  background: #eef6f2;
  border: 1px solid #d1e6dc;
}

.dev-code {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1px 10px;
  padding: 10px 11px;
  color: #795b2c;
  text-align: left;
  background: #fcf6eb;
  border: 1px dashed #dfbf8b;
  border-radius: 6px;
}

.dev-code span {
  font-size: 8px;
}

.dev-code strong {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  color: #915b14;
  font-family: var(--mono);
  font-size: 19px;
  letter-spacing: 3px;
}

.dev-code small {
  font-size: 7px;
}

.login-submit {
  width: 100%;
  height: 43px;
  font-size: 12px;
}

.login-sms-status {
  display: grid;
  grid-template-columns: 7px 1fr;
  gap: 1px 7px;
  padding: 10px 0;
  margin-top: 13px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.login-sms-status > span {
  grid-row: 1 / 3;
  width: 6px;
  height: 6px;
  margin-top: 4px;
  background: #9aa6a1;
  border-radius: 50%;
}

.login-sms-status > span.is-live {
  background: #31946d;
}

.login-sms-status > span.is-dev {
  background: var(--amber);
}

.login-sms-status strong {
  font-size: 8px;
}

.login-sms-status small {
  color: var(--muted);
  font-size: 7px;
}

.login-membership {
  padding: 13px;
  margin-top: 15px;
  background: #fff;
  border: 1px solid #e5dccd;
  border-radius: 7px;
  box-shadow: var(--shadow-sm);
}

.login-membership__title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.login-membership__title > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #a66b20;
  background: #fbf1df;
  border-radius: 6px;
}

.login-membership__title > div {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.login-membership__title strong {
  font-size: 10px;
}

.login-membership__title small {
  color: var(--muted);
  font-size: 7px;
}

.login-membership__price {
  color: #9b621c;
  font-family: var(--font);
  font-size: 17px !important;
}

.login-membership__price small {
  font-size: 8px;
}

.login-membership__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  padding: 9px 0;
  margin: 9px 0;
  color: #6e7b76;
  font-size: 7px;
  border-top: 1px solid #edf0ed;
  border-bottom: 1px solid #edf0ed;
}

.login-membership__benefits span {
  display: flex;
  align-items: center;
  gap: 3px;
}

.membership-entry {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  color: #6c4b22;
  text-align: left;
  background: #fbf5e9;
  border: 1px solid #ead6b5;
  border-radius: 5px;
}

.membership-entry:hover {
  background: #f9efde;
}

.membership-entry > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.membership-entry strong {
  font-size: 8px;
}

.membership-entry small {
  margin-top: 2px;
  color: #8a7253;
  font-size: 7px;
}

.membership-entry > .icon:last-child {
  color: #a7895d;
}

.login-copyright {
  position: absolute;
  bottom: 24px;
  color: #98a39f;
  font-size: 8px;
}

.sidebar-membership {
  display: flex;
  width: 100%;
  min-height: 47px;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  margin-bottom: 6px;
  color: #ead9ba;
  text-align: left;
  background: rgba(194, 122, 44, 0.12);
  border: 1px solid rgba(222, 180, 119, 0.18);
  border-radius: 7px;
}

.sidebar-membership:hover {
  background: rgba(194, 122, 44, 0.18);
}

.sidebar-membership.is-active {
  color: #d7e9e3;
  background: rgba(105, 167, 148, 0.12);
  border-color: rgba(132, 191, 173, 0.2);
}

.sidebar-membership__icon {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  place-items: center;
  color: #edca90;
  background: rgba(194, 122, 44, 0.18);
  border-radius: 6px;
}

.sidebar-membership.is-active .sidebar-membership__icon {
  color: #a7d8c9;
  background: rgba(105, 167, 148, 0.16);
}

.sidebar-membership > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.sidebar-membership strong {
  font-size: 9px;
  font-weight: 600;
}

.sidebar-membership span span {
  margin-top: 1px;
  color: #b8a389;
  font-size: 7px;
}

.sidebar-membership.is-active span span {
  color: #86a69d;
}

.sidebar-membership > .icon:last-child {
  color: #9b8b74;
}

.membership-top-entry {
  display: flex;
  height: 31px;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  color: #8e5d1d;
  background: #fcf4e6;
  border: 1px solid #ead3b0;
  border-radius: 5px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.membership-top-entry:hover {
  background: #f9ecd9;
}

.membership-top-entry.is-active {
  color: #2d705d;
  background: #edf7f2;
  border-color: #cae2d8;
}

.membership-top-entry > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.membership-top-entry strong {
  font-size: 8px;
  line-height: 1.3;
}

.membership-top-entry small {
  color: #9c7b51;
  font-size: 7px;
  line-height: 1.3;
}

.membership-top-entry.is-active small {
  color: #6f9086;
}

.account-button {
  display: flex;
  height: 31px;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  color: var(--muted);
  border-radius: 5px;
}

.account-button:hover {
  background: #f3f5f2;
}

.account-button .avatar {
  width: 25px;
  height: 25px;
  font-size: 9px;
}

.membership-strip {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
  color: #6a4b24;
  background: #fbf5e9;
  border: 1px solid #e7d1ae;
  border-radius: 7px;
}

.membership-strip.is-active {
  color: #315e51;
  background: #f0f7f3;
  border-color: #d0e4db;
}

.membership-strip__icon {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  color: #a56a21;
  background: #f6e7ce;
  border-radius: 6px;
}

.membership-strip.is-active .membership-strip__icon {
  color: var(--teal);
  background: #dcefe7;
}

.membership-strip > div {
  display: flex;
  min-width: 200px;
  flex: 1;
  flex-direction: column;
}

.membership-strip > div strong {
  font-size: 9px;
}

.membership-strip > div span {
  color: #866d4d;
  font-size: 7px;
}

.membership-strip.is-active > div span {
  color: #70847c;
}

.membership-strip > ul {
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 0;
  color: #7c684e;
  font-size: 7px;
  list-style: none;
}

.membership-strip > ul li {
  display: flex;
  align-items: center;
  gap: 3px;
}

.membership-strip__account {
  color: #7e8e88;
  font-family: var(--mono);
  font-size: 8px;
}

.membership-dialog .dialog__body {
  padding-top: 13px;
}

.membership-hero {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  background: #fbf7ef;
  border: 1px solid #eadcc5;
  border-radius: 7px;
}

.membership-hero__crown {
  display: grid;
  width: 45px;
  height: 45px;
  flex: 0 0 auto;
  place-items: center;
  color: #a86a1c;
  background: #f6e6ca;
  border-radius: 8px;
}

.membership-hero > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.membership-hero h3 {
  margin: 5px 0 2px;
  font-size: 15px;
}

.membership-hero p {
  margin: 0;
  color: #79684f;
  font-size: 8px;
  line-height: 1.55;
}

.membership-price {
  display: flex;
  align-items: baseline;
  color: #915915;
  white-space: nowrap;
}

.membership-price small {
  font-size: 12px;
}

.membership-price strong {
  font-size: 29px;
  line-height: 1;
}

.membership-price span {
  margin-left: 2px;
  font-size: 8px;
}

.membership-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.membership-benefit-grid > div {
  display: grid;
  min-height: 67px;
  grid-template-columns: 25px 1fr;
  align-content: center;
  gap: 2px 7px;
  padding: 9px;
  color: var(--teal);
  background: #f8faf7;
  border: 1px solid #e4e9e5;
  border-radius: 5px;
}

.membership-benefit-grid > div > .icon {
  grid-row: 1 / 3;
}

.membership-benefit-grid strong {
  color: #45554f;
  font-size: 8px;
}

.membership-benefit-grid span {
  color: var(--muted);
  font-size: 7px;
}

.membership-context-note {
  display: flex;
  gap: 7px;
  padding: 9px;
  color: #805b28;
  background: #fbf5e9;
  border: 1px solid #ead5b5;
  border-radius: 5px;
}

.membership-context-note > span {
  display: flex;
  flex-direction: column;
}

.membership-context-note strong {
  font-size: 8px;
}

.membership-context-note span span {
  margin-top: 2px;
  font-size: 7px;
}

.membership-pay-button {
  min-height: 42px;
  margin-top: 12px;
  background: #1677ff;
  border-color: #1677ff;
  font-size: 11px;
}

.membership-pay-button:hover {
  background: #0968e8;
  border-color: #0968e8;
}

.membership-pay-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  margin-top: 7px;
  color: #899590;
  font-size: 7px;
}

.membership-dialog .notice {
  margin-top: 9px;
}

.dev-payment-panel {
  padding: 11px;
  margin-top: 10px;
  background: #fff9ef;
  border: 1px solid #ead5b4;
  border-radius: 6px;
}

.dev-payment-panel > strong {
  display: block;
  margin: 7px 0 2px;
  font-family: var(--mono);
  font-size: 8px;
}

.dev-payment-panel p {
  margin: 0 0 7px;
  color: #806a4a;
  font-size: 7px;
}

.btn--warning {
  color: #fff;
  background: var(--amber);
  border-color: var(--amber);
}

.membership-active-panel {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px;
  margin-top: 11px;
  color: #2e6654;
  background: #edf7f2;
  border: 1px solid #cee5db;
  border-radius: 6px;
}

.membership-active-panel > div {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.membership-active-panel strong {
  font-size: 9px;
}

.membership-active-panel span:not(.status) {
  color: #6b827a;
  font-size: 7px;
}

.membership-terms {
  margin-top: 11px;
  color: #98a29e;
  font-size: 7px;
  text-align: center;
}

.account-profile {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  margin-bottom: 12px;
  background: #f7f9f6;
  border: 1px solid #e4e9e5;
  border-radius: 6px;
}

.account-profile__avatar {
  width: 44px;
  height: 44px;
  font-size: 15px;
}

.account-profile > div {
  display: flex;
  flex-direction: column;
}

.account-profile strong {
  font-size: 11px;
}

.account-profile span {
  margin-top: 2px;
  color: #5f6d68;
  font-family: var(--mono);
  font-size: 8px;
}

.account-profile small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
}

.account-menu-list {
  display: flex;
  flex-direction: column;
}

.account-menu-list > button {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: 8px;
  padding: 7px 2px;
  text-align: left;
  border-bottom: 1px solid #edf0ed;
}

.account-menu-list > button:hover {
  color: var(--teal);
}

.account-menu-list > button > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.account-menu-list strong {
  font-size: 9px;
}

.account-menu-list small {
  color: var(--muted);
  font-size: 7px;
}

.account-menu-list > button > .icon:last-child {
  color: #a2aca8;
}

.account-role-field {
  display: flex;
  min-height: 51px;
  align-items: center;
  gap: 8px;
  padding: 7px 2px;
  border-bottom: 1px solid #edf0ed;
}

.account-role-field > span {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 8px;
}

.account-role-field > span > span {
  display: flex;
  flex-direction: column;
}

.account-role-field strong {
  font-size: 9px;
}

.account-role-field small {
  color: var(--muted);
  font-size: 7px;
}

.account-role-field select {
  width: 100px;
  height: 28px;
  padding: 0 6px;
  font-size: 8px;
}

.account-security-note {
  display: flex;
  gap: 8px;
  padding: 10px;
  margin-top: 12px;
  color: #5b6d66;
  background: #f6f8f5;
  border-radius: 5px;
}

.account-security-note > span {
  display: flex;
  flex-direction: column;
}

.account-security-note strong {
  font-size: 8px;
}

.account-security-note p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 7px;
  line-height: 1.55;
}

.personal-storage-bar {
  display: grid;
  grid-template-columns: 1.55fr repeat(3, 1fr) 1.5fr;
  min-height: 72px;
  align-items: stretch;
  margin-bottom: 11px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.personal-storage-bar > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 9px 13px;
  border-left: 1px solid #e8ece9;
}

.personal-storage-bar > div:first-child {
  border-left: 0;
}

.personal-storage-bar__account {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
}

.personal-storage-bar__account > div {
  display: flex;
  flex-direction: column;
}

.personal-storage-bar__account strong {
  font-size: 9px;
}

.personal-storage-bar__account span {
  color: var(--muted);
  font-size: 7px;
}

.personal-storage-bar span {
  color: var(--muted);
  font-size: 7px;
}

.personal-storage-bar strong {
  margin-top: 2px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.personal-storage-bar strong small {
  margin-left: 2px;
  color: var(--muted);
  font-size: 7px;
  font-weight: 400;
}

.personal-storage-bar__plan {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 7px;
  color: var(--teal);
  background: #f8faf7;
}

.personal-storage-bar__plan > span {
  display: flex;
  flex-direction: column;
}

.personal-storage-bar__plan strong {
  margin: 0;
  font-size: 8px;
}

.personal-storage-bar__plan small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
}

.personal-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(310px, 0.7fr);
  gap: 11px;
  margin-bottom: 11px;
}

.personal-side {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.personal-project-list {
  padding: 2px 0;
}

.personal-project-row {
  display: flex;
  min-height: 70px;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-bottom: 1px solid #edf0ed;
}

.personal-project-row:last-child {
  border-bottom: 0;
}

.personal-project-row.is-current {
  background: #f7faf8;
}

.personal-project-row__icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 6px;
}

.personal-project-row__main {
  min-width: 0;
  flex: 1;
}

.personal-project-row__main > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.personal-project-row__main strong {
  overflow: hidden;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.personal-project-row__main p,
.personal-project-row__main small {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 7px;
}

.personal-project-row__risk {
  display: flex;
  width: 48px;
  flex-direction: column;
  align-items: center;
  color: #8d642e;
  font-size: 12px;
}

.personal-project-row__risk small {
  color: var(--muted);
  font-size: 6px;
}

.personal-current-card {
  padding-bottom: 13px;
}

.personal-current-card__meta,
.account-summary {
  display: flex;
  flex-direction: column;
  padding: 3px 14px 9px;
}

.personal-current-card__meta > span,
.account-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  border-bottom: 1px solid #edf0ed;
}

.personal-current-card__meta small,
.account-summary span {
  color: var(--muted);
  font-size: 7px;
}

.personal-current-card__meta strong,
.account-summary strong {
  font-size: 8px;
}

.personal-current-card > .btn,
.personal-side .membership-entry {
  width: calc(100% - 28px);
  margin: 0 14px;
}

.personal-save-note {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 8px 15px 0;
  color: #8a9691;
  font-size: 7px;
  line-height: 1.5;
}

.personal-side .membership-entry {
  margin-top: 5px;
  margin-bottom: 12px;
}

.file-database-panel {
  margin-bottom: 20px;
}

.personal-file-table {
  min-width: 860px;
}

.personal-file-name {
  display: flex;
  align-items: center;
  gap: 7px;
}

.personal-file-name .file-icon {
  width: 26px;
  height: 26px;
}

.file-hash {
  color: #5e7069;
  font-size: 7px;
}

@media (max-width: 1280px) {
  .membership-top-entry {
    width: 31px;
    justify-content: center;
    padding: 0;
  }

  .membership-top-entry > span {
    display: none;
  }

}

@media (max-width: 980px) {
  .login-page {
    grid-template-columns: minmax(350px, 0.9fr) minmax(440px, 1.1fr);
  }

  .login-brand {
    padding: 24px;
  }

  .login-flow {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .login-flow i {
    display: none;
  }

  .login-assurance {
    grid-template-columns: 1fr;
  }

  .personal-storage-bar {
    grid-template-columns: 1.5fr repeat(3, 1fr);
  }

  .personal-storage-bar__plan {
    display: none !important;
  }

  .personal-workspace-grid {
    grid-template-columns: 1fr;
  }

  .membership-strip > ul {
    display: none;
  }
}

@media (max-width: 820px) {
  .login-page {
    grid-template-columns: 1fr;
  }

  .login-brand {
    min-height: auto;
    padding: 20px;
  }

  .login-brand__content {
    width: 100%;
    padding: 34px 0 24px;
  }

  .login-brand h1 {
    font-size: 29px;
  }

  .login-flow,
  .login-assurance {
    display: none;
  }

  .login-brand__footer {
    display: none;
  }

  .login-panel {
    min-height: auto;
    padding: 24px 18px 45px;
  }

  .login-copyright {
    position: static;
    margin-top: 28px;
  }

  .membership-strip {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .membership-strip > div {
    min-width: 0;
  }

  .membership-strip > .btn {
    margin-left: 39px;
  }

  .personal-storage-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .personal-storage-bar > div:nth-child(3) {
    border-top: 1px solid #e8ece9;
    border-left: 0;
  }

  .personal-storage-bar > div:nth-child(4) {
    border-top: 1px solid #e8ece9;
  }
}

@media (max-width: 560px) {
  .login-panel {
    padding-right: 14px;
    padding-left: 14px;
  }

  .login-form-head h2 {
    font-size: 19px;
  }

  .login-brand h1 {
    font-size: 25px;
  }

  .login-brand__content > p {
    margin-top: 12px;
    margin-bottom: 16px;
  }

  .login-membership__benefits {
    flex-direction: column;
    gap: 5px;
  }

  .membership-strip__account {
    display: none;
  }

  .membership-strip {
    padding: 9px;
  }

  .membership-strip > .btn {
    width: 100%;
    margin-left: 0;
  }

  .membership-hero {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .membership-price {
    width: 100%;
    padding-left: 56px;
  }

  .membership-benefit-grid {
    grid-template-columns: 1fr;
  }

  .personal-storage-bar {
    grid-template-columns: 1fr 1fr;
  }

  .personal-storage-bar__account {
    grid-column: 1 / -1;
  }

  .personal-project-row {
    flex-wrap: wrap;
  }

  .personal-project-row__main {
    flex-basis: calc(100% - 90px);
  }

  .personal-project-row__risk {
    display: none;
  }

  .personal-project-row > .btn {
    margin-left: 43px;
  }
}

.project-table tbody tr {
  cursor: default;
}

.project-table tbody tr[data-open-project]:hover {
  background: #fafcf9;
}

.data-table .checkbox-cell input {
  vertical-align: middle;
}

.btn .icon,
.text-link .icon,
.status .icon {
  stroke-width: 1.9;
}

.field + .notice,
.form-grid + .notice,
.form-grid + .toggle-line {
  margin-top: 12px;
}

.dialog__body > .form-grid + .fee-inline-preview,
.dialog__body > .form-grid + .notice {
  margin-top: 14px;
}

.fee-inline-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  margin-top: 14px;
  background: #f8faf7;
  border: 1px solid #e2e8e4;
  border-radius: 6px;
}

.fee-inline-preview > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.fee-inline-preview span {
  color: var(--muted);
  font-size: 7px;
}

.fee-inline-preview strong {
  margin: 2px 0;
  font-size: 13px;
}

.fee-inline-preview small {
  color: #929d99;
  font-size: 7px;
}

.fee-inline-preview > .icon {
  color: #aab4b0;
}

.team-select {
  margin-bottom: 13px;
}

.team-select > label {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #edf0ed;
}

.team-select > label > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.team-select > label strong {
  font-size: 8px;
}

.team-select > label small {
  color: var(--muted);
  font-size: 7px;
}

.team-select input {
  position: absolute;
  opacity: 0;
}

.team-select label > i {
  width: 13px;
  height: 13px;
  border: 1px solid #c8d2cd;
  border-radius: 3px;
}

.team-select input:checked + i {
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: inset 0 0 0 3px #fff;
}

.upload-mini {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px;
  background: #f8faf7;
  border: 1px dashed #bfcfc8;
  border-radius: 6px;
}

.upload-mini > div {
  flex: 1;
}

.upload-mini strong {
  font-size: 8px;
}

.upload-mini p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 7px;
}

@media (max-width: 1500px) {
  .role-switch {
    display: none;
  }
}

@media (max-width: 1380px) {
  :root {
    --sidebar-w: 216px;
  }

  .topbar {
    gap: 10px;
    padding: 0 16px;
  }

  .topbar__context {
    min-width: 252px;
  }

  .global-search {
    width: min(390px, 31vw);
  }

  .main-content {
    padding-right: 18px;
    padding-left: 18px;
  }

  .sync-pill {
    padding: 0 7px;
  }

  .dashboard-grid--primary,
  .dashboard-grid--secondary {
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr);
  }

  .takeoff-workspace {
    grid-template-columns: 220px minmax(0, 1fr) 320px;
  }

  .takeoff-category-summary {
    gap: 8px;
  }

  .takeoff-category-summary div {
    min-width: 60px;
  }

  .boq-summary {
    grid-template-columns: 1.2fr repeat(4, 1fr) 1.1fr;
  }

  .boq-summary__version {
    display: none !important;
  }

  .project-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  :root {
    --sidebar-w: 204px;
  }

  .topbar__context {
    min-width: 210px;
  }

  .topbar__eyebrow,
  .topbar__divider {
    display: none;
  }

  .global-search {
    width: min(290px, 28vw);
  }

  .global-search > span {
    font-size: 9px;
  }

  .sync-pill > span:not(.sync-pill__dot),
  .sync-pill small {
    display: none;
  }

  .sync-pill {
    width: 28px;
    justify-content: center;
    padding: 0;
  }

  .role-switch select {
    max-width: 102px;
  }

  .metric-card {
    padding: 12px 11px;
  }

  .metric-card__value {
    font-size: 21px;
  }

  .dashboard-grid--primary,
  .dashboard-grid--secondary {
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr);
  }

  .task-row {
    grid-template-columns: 30px minmax(0, 1fr) 66px;
  }

  .task-row__due {
    display: none;
  }

  .cost-summary {
    grid-template-columns: 1.2fr repeat(2, 1fr);
  }

  .cost-summary > div:nth-child(n + 4) {
    border-top: 1px solid #e9ece9;
  }

  .cost-summary > div:nth-child(4) {
    border-left: 0;
  }

  .overview-grid,
  .overview-grid--wide-left {
    grid-template-columns: 1fr;
  }

  .workflow-step small {
    display: none;
  }

  .workflow-steps {
    padding: 0 10px;
  }

  .change-row {
    grid-template-columns: 25px minmax(160px, 1fr) minmax(180px, 1.2fr) 65px;
  }

  .takeoff-workspace {
    grid-template-columns: 205px minmax(0, 1fr) 295px;
  }

  .tool-btn--labeled span {
    display: none;
  }

  .tool-btn--labeled {
    padding: 0 6px;
  }

  .takeoff-category-summary {
    display: none;
  }

  .bottom-separator:last-of-type {
    display: none;
  }

  .boq-summary {
    grid-template-columns: 1.2fr repeat(4, 1fr);
  }

  .boq-summary > div:nth-child(7) {
    display: none;
  }

  .boq-summary > div:nth-child(6) {
    display: none;
  }

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

  .group-summary div:nth-child(4n) {
    border-right: 1px solid #edf0ed;
  }

  .group-summary div:nth-child(3n) {
    border-right: 0;
  }

  .price-summary-row {
    grid-template-columns: repeat(4, 1fr);
  }

  .price-summary-row__sync {
    display: none !important;
  }

  .source-type-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sync-source-grid {
    grid-template-columns: 1fr;
  }

  .report-grid,
  .report-grid--secondary {
    grid-template-columns: 1fr;
  }

  .donut-chart-wrap {
    justify-content: center;
  }

  .review-layout {
    grid-template-columns: 292px minmax(0, 1fr);
  }

  .review-detail-grid {
    grid-template-columns: 1fr;
  }

  .review-side-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .review-compare {
    grid-template-columns: 1fr 20px 1fr 0.9fr;
  }

  .review-compare__amount {
    display: none !important;
  }

  .settings-layout {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  .pricing-hero {
    flex-wrap: wrap;
  }

  .pricing-hero__facts {
    order: 3;
    width: 100%;
    flex-basis: 100%;
    padding-top: 11px;
    border-top: 1px solid #e7ebe8;
  }

  .pricing-hero__facts > span:first-child {
    border-left: 0;
  }

  .fee-priority__flow > div:nth-of-type(even) {
    display: none;
  }

  .checkbox-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 980px) {
  :root {
    --sidebar-w: 196px;
  }

  .topbar__context {
    min-width: 170px;
  }

  .project-switch select {
    max-width: 160px;
  }

  .global-search {
    width: 190px;
  }

  .global-search > span {
    display: none;
  }

  .global-search {
    flex: 0 0 190px;
  }

  .topbar__actions {
    flex: initial;
    margin-left: auto;
  }

  .role-switch select {
    max-width: 86px;
  }

  .metric-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-grid--primary,
  .dashboard-grid--secondary {
    grid-template-columns: 1fr;
  }

  .dashboard-grid--primary .panel--queue {
    order: 1;
  }

  .workflow-steps {
    overflow-x: auto;
  }

  .workflow-step {
    min-width: 102px;
  }

  .page-heading {
    align-items: flex-start;
  }

  .page-subtitle {
    display: none;
  }

  .page-actions {
    max-width: 460px;
  }

  .takeoff-toolbar {
    overflow-x: auto;
  }

  .takeoff-workspace {
    grid-template-columns: 190px minmax(0, 1fr) 286px;
  }

  .toolbar-group--right .inline-check {
    display: none;
  }

  .canvas-minimap {
    display: none;
  }

  .boq-summary {
    grid-template-columns: 1.2fr repeat(3, 1fr);
  }

  .boq-summary > div:nth-child(5) {
    display: none;
  }

  .boq-bottom-panels {
    grid-template-columns: 1fr;
  }

  .sync-health {
    min-width: 250px;
  }

  .review-layout {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .review-side-stack {
    grid-template-columns: 1fr;
  }

  .settings-two-col {
    grid-template-columns: 1fr;
  }

  .settings-layout {
    grid-template-columns: 1fr;
  }

  .settings-subnav {
    flex-direction: row;
    overflow-x: auto;
  }

  .settings-subnav button,
  .settings-subnav a {
    flex: 0 0 auto;
  }

  .ai-settings-banner {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .ai-settings-banner__status {
    width: 100%;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 58px;
  }

  .project-hero {
    flex-direction: column;
  }

  .project-hero .page-actions {
    justify-content: flex-start;
  }

  .drawer--wide {
    width: min(660px, 97vw);
  }
}

@media (max-width: 1050px) {
  .takeoff-workspace {
    grid-template-columns: 180px minmax(0, 1fr) 275px;
  }

  .canvas-minimap {
    display: none;
  }

  .tree-file {
    min-height: 42px;
  }
}

@media (max-width: 820px) {
  .sidebar {
    width: 232px;
    box-shadow: 18px 0 45px rgba(15, 34, 28, 0.2);
    transform: translateX(-100%);
    transition: transform 0.2s;
  }

  .app-shell.is-sidebar-open .sidebar {
    transform: translateX(0);
  }

  .mobile-scrim {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: block;
    background: rgba(10, 25, 20, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }

  .app-shell.is-sidebar-open .mobile-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .workspace {
    margin-left: 0;
  }

  .mobile-menu-btn {
    display: inline-grid !important;
  }

  .topbar {
    gap: 7px;
  }

  .topbar__context {
    min-width: 0;
    flex: 1;
  }

  .project-switch select {
    max-width: 180px;
  }

  .global-search {
    width: 34px;
    flex: 0 0 34px;
    justify-content: center;
  }

  .global-search > span,
  .global-search kbd {
    display: none;
  }

  .role-switch .avatar {
    display: none;
  }

  .role-switch select {
    max-width: 80px;
    padding-left: 5px;
  }

  .review-layout {
    display: flex;
    min-height: auto;
    flex-direction: column;
  }

  .review-queue {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .review-list {
    display: flex;
    overflow-x: auto;
  }

  .review-list-item {
    min-width: 280px;
    border-top: 0;
    border-right: 1px solid #eef1ee;
    border-left: 0;
    border-bottom: 3px solid transparent;
  }

  .review-list-item.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--teal);
  }

  .review-queue__footer {
    display: none;
  }

  .review-compare {
    grid-template-columns: 1fr 20px 1fr;
  }

  .review-compare__delta {
    display: none !important;
  }

  .takeoff-workspace {
    display: flex;
    min-height: auto;
    flex-direction: column;
  }

  .takeoff-tree {
    display: none;
  }

  .canvas-panel {
    min-height: 480px;
  }

  .takeoff-inspector {
    max-height: none;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .takeoff-bottom {
    min-height: 122px;
  }

  .bottom-content {
    flex-wrap: wrap;
  }

  .takeoff-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .takeoff-heading .page-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .mobile-view-notice {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 9px 10px;
    margin: -2px 0 8px;
    color: #6f5a3b;
    font-size: 8px;
    line-height: 1.55;
    background: #fbf5e9;
    border: 1px solid #ead8ba;
    border-radius: 5px;
  }

  .mobile-view-notice > span {
    display: flex;
    flex-direction: column;
  }

  .mobile-view-notice strong {
    color: #76501d;
  }

  .takeoff-toolbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 6px;
  }

  .toolbar-group {
    width: 100%;
  }

  .toolbar-group--right {
    border-top: 1px solid #e8ece9;
    padding-top: 4px;
  }

  .main-content {
    padding: 16px 12px 32px;
  }

  .page-heading {
    flex-direction: column;
    gap: 10px;
  }

  .page-actions {
    max-width: none;
    justify-content: flex-start;
  }

  .metric-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .cost-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .cost-summary > div:nth-child(3) {
    border-left: 0;
  }

  .cost-summary > div:nth-child(4) {
    border-left: 1px solid #e9ece9;
  }

  .cost-summary__main {
    grid-column: 1 / -1;
  }

  .project-card-grid {
    grid-template-columns: 1fr;
  }

  .boq-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .boq-summary__primary {
    grid-column: 1 / -1;
  }

  .boq-summary > div:nth-child(5),
  .boq-summary > div:nth-child(6) {
    display: flex;
  }

  .boq-summary > div:nth-child(3) {
    border-left: 0;
  }

  .boq-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .boq-toolbar .toolbar__left,
  .toolbar__left {
    flex-wrap: wrap;
  }

  .price-summary-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .price-summary-row > div:nth-child(3) {
    border-top: 1px solid #e8ece9;
    border-left: 0;
  }

  .price-summary-row > div:nth-child(4) {
    border-top: 1px solid #e8ece9;
  }

  .report-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .report-summary > div:nth-child(3) {
    border-left: 0;
  }

  .report-summary > div:nth-child(n + 3) {
    border-top: 1px solid #e8ece9;
  }

  .donut-chart-wrap {
    flex-direction: column;
  }

  .donut-legend {
    width: 100%;
  }

  .dialog-backdrop {
    padding: 12px;
  }

  .drawer--wide,
  .drawer {
    width: min(620px, 100vw);
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

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

  .parse-result-grid,
  .sync-delta-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .parse-result-grid > div,
  .sync-delta-grid > div {
    border-bottom: 1px solid #e8ece9;
  }

  .parse-result-grid > div:nth-child(odd),
  .sync-delta-grid > div:nth-child(odd) {
    border-left: 0;
  }

  .price-candidate__facts,
  .snapshot-info {
    grid-template-columns: repeat(2, 1fr);
  }

  .source-policy {
    grid-template-columns: 1fr;
  }

  .export-format-grid,
  .status-choice-grid {
    grid-template-columns: 1fr;
  }

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

  .basis-config-grid,
  .basis-totals,
  .export-data-summary,
  .export-success-facts,
  .material-price-hero {
    grid-template-columns: repeat(2, 1fr);
  }

  .version-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .topbar {
    padding: 0 9px;
  }

  .topbar__context {
    display: none;
  }

  .sync-pill,
  .topbar__actions > .icon-btn[data-action="notifications"] {
    display: none;
  }

  .global-search {
    width: auto;
    flex: 1;
    justify-content: flex-start;
    padding: 0 9px;
  }

  .global-search::after {
    color: var(--muted);
    font-size: 10px;
    content: "搜索项目、清单、材料";
  }

  .role-switch select {
    max-width: 70px;
  }

  .metric-row {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .metric-card {
    min-height: 92px;
  }

  .metric-card__icon {
    width: 27px;
    height: 27px;
  }

  .metric-card__value {
    font-size: 20px;
  }

  .task-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .task-row .text-link {
    display: none;
  }

  .timeline-item {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .timeline-item time {
    display: none;
  }

  .health-score {
    flex-direction: column;
    align-items: flex-start;
  }

  .workflow-step {
    min-width: 94px;
  }

  .project-heading-line h1 {
    font-size: 18px;
  }

  .project-meta {
    gap: 7px 10px;
  }

  .cost-summary {
    grid-template-columns: 1fr 1fr;
  }

  .cost-summary__stat:nth-child(6) {
    grid-column: 1 / -1;
    border-left: 0;
  }

  .category-bar {
    grid-template-columns: 76px minmax(80px, 1fr) 65px;
  }

  .category-bar > span:last-child {
    display: none;
  }

  .drawing-row__body .tag {
    display: none;
  }

  .drawing-row > .status,
  .drawing-row .btn {
    display: none;
  }

  .change-row {
    grid-template-columns: 25px minmax(0, 1fr) 65px;
  }

  .change-row p {
    display: none;
  }

  .review-summary {
    gap: 10px;
  }

  .review-action-buttons {
    width: 100%;
  }

  .review-action-buttons .btn {
    flex: 1;
  }

  .review-actions-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .canvas-panel {
    min-height: 380px;
  }

  .canvas-surface {
    inset: 22px 7px 24px 24px;
  }

  .canvas-modebar__meta span:first-child {
    display: none;
  }

  .canvas-statusbar {
    gap: 7px;
  }

  .canvas-statusbar__right {
    display: none !important;
  }

  .takeoff-category-summary,
  .bottom-separator {
    display: none;
  }

  .takeoff-stats {
    width: 100%;
    flex-wrap: wrap;
    gap: 14px;
  }

  .takeoff-stats div {
    width: calc(20% - 12px);
  }

  .dxf-health {
    display: none;
  }

  .boq-table-footer {
    align-items: flex-start;
    flex-direction: column;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .table-legend {
    flex-wrap: wrap;
    gap: 6px 10px;
  }

  .group-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .group-summary div:nth-child(3n) {
    border-right: 1px solid #edf0ed;
  }

  .group-summary div:nth-child(2n) {
    border-right: 0;
  }

  .source-type-grid {
    grid-template-columns: 1fr;
  }

  .sync-overview {
    align-items: flex-start;
    flex-direction: column;
  }

  .sync-next {
    padding-top: 8px;
    padding-left: 0;
    border-top: 1px solid #e7ebe8;
    border-left: 0;
  }

  .sync-card__facts {
    grid-template-columns: repeat(2, 1fr);
  }

  .review-compare {
    grid-template-columns: 1fr;
  }

  .compare-arrow {
    display: none;
  }

  .review-compare > div + div {
    border-top: 1px solid #e5eae7;
    border-left: 0;
  }

  .review-detail-grid {
    padding-right: 10px;
    padding-left: 10px;
  }

  .review-detail__head,
  .review-comments {
    padding-right: 11px;
    padding-left: 11px;
  }

  .donut-chart {
    width: 185px;
    height: 185px;
  }

  .vertical-chart {
    height: 240px;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .kpi-grid > div {
    border-right: 0;
  }

  .settings-content .panel > .form-grid,
  .settings-content .panel > .notice,
  .settings-content .panel > .asset-links,
  .settings-content .panel > .security-list {
    margin-right: 10px;
    margin-left: 10px;
  }

  .fee-priority__flow {
    flex-direction: column;
    align-items: stretch;
  }

  .fee-priority__flow > .icon {
    align-self: center;
    transform: rotate(90deg);
  }

  .fee-priority__flow > div:nth-of-type(even) {
    display: grid;
  }

  .formula-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .formula-strip code {
    padding-right: 0;
    border-right: 0;
  }

  .pricing-hero__facts {
    flex-direction: column;
    align-items: stretch;
  }

  .pricing-hero__facts > span {
    padding: 7px 0;
    border-top: 1px solid #e7ebe8;
    border-left: 0;
  }

  .ai-settings-banner__status {
    padding-left: 0;
  }

  .checkbox-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .drawer {
    width: 100vw;
    max-width: none;
  }

  .drawer__head {
    min-height: 52px;
  }

  .drawer__body {
    padding: 12px;
  }

  .drawer__footer {
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 8px 12px;
  }

  .drawer__footer .btn--ghost {
    margin-right: auto;
  }

  .drawer-stepper > div + div::before {
    width: 5px;
    margin-right: 3px;
  }

  .selected-file .tag {
    display: none;
  }

  .parse-result-grid,
  .sync-delta-grid,
  .price-candidate__facts,
  .material-price-hero,
  .basis-config-grid,
  .basis-totals,
  .export-success-facts,
  .snapshot-info {
    grid-template-columns: 1fr;
  }

  .parse-result-grid > div,
  .sync-delta-grid > div,
  .price-candidate__facts span,
  .material-price-hero > div,
  .basis-config-grid > div,
  .export-success-facts span,
  .snapshot-info > div {
    border-top: 1px solid #e8ece9;
    border-right: 0;
    border-left: 0;
  }

  .parse-result-grid > div:first-child,
  .sync-delta-grid > div:first-child,
  .material-price-hero > div:first-child,
  .basis-config-grid > div:first-child,
  .export-success-facts span:first-child {
    border-top: 0;
  }

  .price-candidate__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .price-candidate__footer > span {
    order: 3;
  }

  .source-detail-card {
    flex-wrap: wrap;
  }

  .mapping-rows > div {
    grid-template-columns: 1fr 20px 1fr;
  }

  .mapping-rows strong {
    grid-column: 1 / -1;
    padding-bottom: 4px;
  }

  .mapping-head,
  .mapping-row {
    grid-template-columns: 1fr 0.7fr;
  }

  .mapping-head span:nth-child(n + 3),
  .mapping-row > :nth-child(n + 3) {
    display: none;
  }

  .export-success-actions {
    flex-direction: column;
  }

  .notification-item.is-unread::after {
    display: none;
  }
}

@media print {
  .sidebar,
  .topbar,
  .page-actions,
  .drawer__footer,
  .dialog__footer {
    display: none !important;
  }

  .workspace {
    margin-left: 0 !important;
  }

  .main-content {
    padding: 0;
  }

  .drawer-backdrop,
  .dialog-backdrop {
    position: static;
    display: block;
    padding: 0;
    background: none;
  }

  .drawer,
  .dialog {
    width: 100% !important;
    max-width: none;
    height: auto;
    border: 0;
    box-shadow: none;
  }
}

/* Real project setup, parsing and DWG conversion */
.first-project-panel {
  padding: 26px;
}

.first-project-empty {
  display: flex;
  min-height: 300px;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.first-project-empty__icon {
  display: grid;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border: 1px solid #d5e8e1;
  border-radius: 10px;
}

.first-project-empty > div {
  max-width: 570px;
}

.first-project-empty h2 {
  margin: 4px 0 7px;
  font-size: 18px;
}

.first-project-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.7;
}

.first-project-steps {
  display: flex;
  gap: 14px;
  margin-top: 16px;
}

.first-project-steps span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #65736e;
  font-size: 8px;
}

.first-project-steps i {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: #fff;
  font-size: 7px;
  font-style: normal;
  background: var(--teal);
  border-radius: 50%;
}

.project-setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  gap: 11px;
}

.project-setup-main {
  padding: 20px;
}

.project-setup-heading {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.project-setup-heading > .icon {
  color: var(--teal);
}

.project-setup-heading h2 {
  margin: 3px 0;
  font-size: 16px;
}

.project-setup-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
}

.project-setup-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 22px 0;
}

.project-setup-flow span {
  position: relative;
  display: flex;
  min-height: 75px;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  background: #f8faf7;
  border: 1px solid #e4e9e5;
  border-radius: 6px;
}

.project-setup-flow span.is-current {
  background: #eef7f3;
  border-color: #bcd9ce;
}

.project-setup-flow i {
  color: #8a9892;
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
}

.project-setup-flow strong {
  font-size: 8px;
}

.project-setup-flow small {
  color: var(--muted);
  font-size: 7px;
}

.project-setup-facts {
  display: flex;
  flex-direction: column;
  padding: 7px 15px 13px;
}

.project-setup-facts > span {
  display: flex;
  min-height: 39px;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid #edf0ed;
}

.project-setup-facts > span:last-child {
  border-bottom: 0;
}

.project-setup-facts small {
  color: var(--muted);
  font-size: 7px;
}

.project-setup-facts strong {
  margin-top: 2px;
  font-size: 9px;
}

.panel-inline-empty {
  display: flex;
  min-height: 110px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: #71807a;
}

.panel-inline-empty > span {
  display: flex;
  flex-direction: column;
}

.panel-inline-empty strong {
  color: #4c5d56;
  font-size: 9px;
}

.panel-inline-empty small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
}

.budget-comparison {
  padding: 15px;
}

.budget-comparison__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
}

.budget-comparison__summary > span:first-child {
  color: var(--muted);
  font-size: 8px;
}

.budget-comparison__summary > strong {
  font-size: 18px;
}

.budget-comparison__summary .delta {
  margin-left: auto;
}

.budget-bar-row {
  display: grid;
  min-height: 36px;
  grid-template-columns: 65px minmax(0, 1fr) 78px;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 7px;
}

.budget-bar-row > div {
  height: 7px;
  overflow: hidden;
  background: #edf0ed;
  border-radius: 4px;
}

.budget-bar-row i {
  display: block;
  height: 100%;
  border-radius: 4px;
}

.budget-bar-row .is-budget {
  background: #9faaa6;
}

.budget-bar-row .is-current {
  background: var(--teal);
}

.budget-bar-row .is-over {
  background: var(--amber);
}

.budget-bar-row strong {
  color: #4b5a55;
  font-size: 8px;
  text-align: right;
}

.budget-comparison__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 12px;
}

.budget-comparison__facts span {
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: #f7f9f6;
  border-radius: 5px;
}

.budget-comparison__facts small {
  color: var(--muted);
  font-size: 7px;
}

.budget-comparison__facts strong {
  margin-top: 2px;
  font-size: 9px;
}

.upload-file-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.upload-empty-list {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font-size: 8px;
  background: #fafbf9;
  border: 1px dashed #d3dcd8;
  border-radius: 5px;
}

.parsed-file-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}

.parsed-file-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px;
  background: #f8faf7;
  border: 1px solid #e2e8e4;
  border-radius: 5px;
}

.parsed-file-card.is-error {
  background: #fbefee;
  border-color: #ebcecb;
}

.parsed-file-card > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.parsed-file-card strong {
  overflow: hidden;
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.parsed-file-card small,
.parsed-file-card span:not(.status) {
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
}

.parsed-dxf-plan .parsed-line {
  fill: none;
  stroke: #536761;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.parsed-dxf-plan .parsed-floor {
  fill: rgba(82, 137, 122, 0.06);
  stroke: #6c9288;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.parsed-dxf-plan .parsed-ceiling {
  fill: rgba(194, 122, 44, 0.045);
  stroke: #b08b58;
  stroke-width: 1;
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
}

.parsed-dxf-plan .parsed-opening {
  fill: rgba(76, 122, 155, 0.05);
  stroke: #628da4;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.parsed-dxf-plan .parsed-mep {
  fill: none;
  stroke: #7f8fa7;
  stroke-width: 0.8;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
}

.parsed-dxf-plan .is-closed {
  cursor: pointer;
}

.parsed-dxf-plan .is-closed:hover {
  fill: rgba(15, 116, 104, 0.12);
  stroke: var(--teal);
  stroke-width: 2;
}

.parsed-text-layer text {
  fill: #53635d;
  font-size: 6px;
  pointer-events: none;
}

.parsed-canvas-label-bg {
  fill: rgba(255, 255, 255, 0.9);
  stroke: #d6dfdb;
}

.parsed-canvas-label {
  fill: #3d4e47;
  font-size: 9px;
  font-weight: 600;
}

.parsed-canvas-meta {
  fill: #7c8984;
  font-size: 6px;
}

.real-pdf-preview {
  width: calc(100% - 18px);
  max-height: 100%;
  padding: 14px;
  overflow: auto;
  background: #f2f4f1;
  border: 1px solid #d5dfda;
}

.real-pdf-preview__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid #e1e7e3;
  border-radius: 5px;
}

.real-pdf-preview__head > div {
  display: flex;
  flex-direction: column;
}

.real-pdf-preview__head strong {
  font-size: 9px;
}

.real-pdf-preview__head span {
  color: var(--muted);
  font-size: 7px;
}

.pdf-page-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 9px;
}

.pdf-page-card {
  padding: 7px;
  background: #fff;
  border: 1px solid #dce3df;
  border-radius: 5px;
}

.pdf-page-card__num {
  display: block;
  margin-bottom: 5px;
  color: #586862;
  font-size: 7px;
}

.pdf-page-sheet {
  display: flex;
  min-height: 120px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
  color: #7e8b86;
  font-size: 7px;
  line-height: 1.6;
  background: #fcfdfb;
  border: 1px solid #e5eae7;
}

.pdf-page-card > small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 6px;
}

.parsed-warning-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.parsed-warning-list > div {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 7px;
  color: #7d5a2b;
  font-size: 7px;
  line-height: 1.5;
  background: #fbf6ed;
  border-radius: 4px;
}

.dwg-tool-link {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 9px;
  margin-top: 10px;
  color: #4e645c;
  text-align: left;
  background: #f5f8f5;
  border: 1px solid #dee6e2;
  border-radius: 5px;
}

.dwg-tool-link > span {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.dwg-tool-link strong {
  font-size: 8px;
}

.dwg-tool-link small {
  color: var(--muted);
  font-size: 7px;
}

.mapping-empty,
.tree-empty-note,
.table-empty-note {
  color: var(--muted);
  font-size: 8px;
}

.table-empty-note {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px;
}

.table-empty-note > span {
  display: flex;
  flex-direction: column;
}

.table-empty-note strong {
  font-size: 8px;
}

.table-empty-note small {
  color: var(--muted);
  font-size: 7px;
}

.dwg-converter-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.7fr);
  gap: 11px;
  margin-bottom: 11px;
}

.dwg-upload-panel {
  padding-bottom: 13px;
}

.dwg-dropzone {
  display: flex;
  min-height: 150px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 14px;
  color: var(--muted);
  background: #fafcf9;
  border: 1px dashed #bdcfc7;
  border-radius: 7px;
  cursor: pointer;
}

.dwg-dropzone > span {
  color: var(--teal);
}

.dwg-dropzone strong {
  color: #40514a;
  font-size: 10px;
}

.dwg-dropzone small {
  font-size: 7px;
}

.dwg-file-list {
  padding: 0 14px;
}

.dwg-file-row {
  display: flex;
  min-height: 43px;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #edf0ed;
}

.dwg-file-row > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.dwg-file-row strong {
  overflow: hidden;
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dwg-file-row small {
  color: var(--muted);
  font-size: 7px;
}

.dwg-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 0;
}

.dwg-actions > span {
  color: var(--muted);
  font-size: 7px;
}

.dwg-help-list {
  display: flex;
  flex-direction: column;
  padding: 5px 14px 12px;
}

.dwg-help-list > div {
  display: flex;
  gap: 7px;
  padding: 10px 0;
  border-bottom: 1px solid #edf0ed;
}

.dwg-help-list > div:last-child {
  border-bottom: 0;
}

.dwg-help-list > div > span {
  display: flex;
  flex-direction: column;
}

.dwg-help-list strong {
  font-size: 8px;
}

.dwg-help-list small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
  line-height: 1.5;
}

.dwg-results-panel {
  margin-bottom: 11px;
}

.membership-success-dialog .dialog__body {
  padding: 16px;
}

.membership-success-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  text-align: center;
  background: #f1f8f4;
  border: 1px solid #d1e6dc;
  border-radius: 7px;
}

.membership-success-hero > span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: #fff;
  background: var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 0 8px #e0f1ea;
}

.membership-success-hero h3 {
  margin: 13px 0 3px;
  font-size: 16px;
}

.membership-success-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.membership-validity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 12px 0;
}

.membership-validity-grid > span {
  display: flex;
  min-height: 66px;
  flex-direction: column;
  justify-content: center;
  padding: 9px;
  border: 1px solid #e2e8e4;
  border-radius: 5px;
}

.membership-validity-grid small {
  color: var(--muted);
  font-size: 7px;
}

.membership-validity-grid strong {
  margin-top: 2px;
  color: var(--teal-dark);
  font-size: 11px;
}

.membership-validity-grid em {
  margin-top: 2px;
  color: #7e8d87;
  font-size: 7px;
  font-style: normal;
}

.personal-current-empty {
  display: flex;
  min-height: 220px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
}

.personal-current-empty > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 50%;
}

.personal-current-empty strong {
  font-size: 10px;
}

.personal-current-empty p {
  max-width: 270px;
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.6;
}

@media (max-width: 1000px) {
  .project-setup-grid,
  .dwg-converter-layout {
    grid-template-columns: 1fr;
  }

  .project-setup-flow {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .first-project-empty {
    min-height: 260px;
    flex-direction: column;
    text-align: center;
  }

  .first-project-steps {
    flex-wrap: wrap;
    justify-content: center;
  }

  .project-setup-flow {
    grid-template-columns: 1fr;
  }

  .membership-validity-grid {
    grid-template-columns: 1fr;
  }
}