/* Idea 90 stages 6–8 — screen layouts from D template */

.page-d {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.page-d > .p-head-d {
  margin-bottom: 0;
}

.kicker-d {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d-muted);
  margin: 0 0 8px;
}

/* —— Dashboard —— */
.dash-hero-d {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
}

.dash-big-d {
  font: var(--w-display) 56px/1 var(--font-display);
  letter-spacing: -0.045em;
  margin: 0;
}

.dash-big-d small {
  font: 500 17px var(--font-body);
  color: var(--d-muted);
  letter-spacing: 0;
  margin-left: 8px;
}

.dash-over-d {
  margin: 8px 0 0;
  font: 600 15px var(--font-body);
  letter-spacing: 0;
  color: var(--d-stop);
}

.dash-hero-d .sub-d {
  font-size: 15px;
  margin: 10px 0 20px;
  color: var(--d-muted);
}

.rail-l-d {
  display: flex;
  justify-content: space-between;
  font: 500 12px var(--font-mono);
  color: var(--d-muted);
  margin-top: 8px;
}

.rail-l-d b {
  color: var(--d-ink);
}

.fact-d {
  background: var(--d-soft);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

.fact-d .kicker-d {
  margin: 0 0 4px;
}

.fact-line-d {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}

.fact-line-d span {
  font-family: var(--font-mono);
  font-size: 13px;
}

.fact-d .note-d {
  font-size: 12px;
  color: var(--d-muted);
  margin: auto 0 0;
  line-height: 1.4;
}

.nudge-d {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: color-mix(in srgb, var(--d-accent) 18%, white);
  border-radius: 18px;
  padding: 10px 12px 10px 18px;
  font-size: 14px;
}

.nudge-d p {
  margin: 0;
  flex: 1;
  min-width: 12rem;
}

.nudge-d .nudge-d-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.metrics-d {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.metrics-d .stat-d span.meta-d {
  display: block;
  font-size: 12px;
  color: var(--d-muted);
  margin-top: 2px;
}

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

.analytics-d .card-d {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.analytics-d .sub-d {
  font-size: 14px;
  color: var(--d-muted);
  margin: 4px 0 0;
}

.donut-wrap-d {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.donut-wrap-d .donut-chart {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  flex: none;
}

.donut-wrap-d .donut-chart-body,
.donut-wrap-d .donut-chart-empty {
  gap: 0;
}

.donut-wrap-d .donut-chart-ring {
  width: 104px;
}

.legend-d {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  flex: 1;
  min-width: 0;
}

.legend-d li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-d li b {
  margin-left: auto;
  font: 500 12px var(--font-mono);
  white-space: nowrap;
}

.bars-d {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bars-d li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

.bars-d .bm-d {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bars-d .bm-d span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bars-d .bm-d b {
  font: 500 13px var(--font-mono);
}

.bars-d .tr-d {
  height: 8px;
  border-radius: 4px;
  background: var(--d-soft);
}

.bars-d .tr-d i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--c);
}

.dash-neg-d {
  color: var(--d-stop);
}

/* —— Works —— */
.wgroup-d {
  background: var(--d-card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 12px;
}

.wroot-d {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--d-line-soft);
}

.wroot-d .sw-d {
  width: 6px;
  align-self: stretch;
  border-radius: 3px;
  background: var(--c);
}

.wroot-d h4 {
  margin: 0;
  font: var(--w-display2) 17px var(--font-display);
  letter-spacing: -0.01em;
}

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

.wroot-d .sum-d {
  text-align: right;
  font: 500 14px var(--font-mono);
}

.wroot-d .sum-d small {
  display: block;
  font-size: 12px;
  color: var(--d-muted);
}

.wkids-d {
  list-style: none;
  margin: 0;
  padding: 4px 20px 8px 40px;
}

.wkids-d li {
  display: grid;
  grid-template-columns: 28px 1fr auto 150px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--d-line-soft);
  font-size: 15px;
}

.wkids-d li:first-child {
  border-top: 0;
}

.st-d {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--d-line);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.st-d.done {
  background: var(--d-ok);
  box-shadow: none;
}

.st-d.prog {
  box-shadow: inset 0 0 0 2px var(--d-accent);
  background: color-mix(in srgb, var(--d-accent) 20%, white);
}

.wkids-d .done-t-d {
  color: var(--d-muted);
  text-decoration: line-through;
}

.wkids-d .n-d {
  text-align: right;
  font: 500 13px var(--font-mono);
}

.mats-d {
  margin: 0 20px 16px 40px;
  background: var(--d-soft);
  border-radius: 16px;
  padding: 12px 14px;
}

.mats-d h5 {
  margin: 0 0 8px;
  font: 600 13px var(--font-body);
  color: var(--d-ink-2);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.mats-d ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
  font-size: 14px;
}

.mats-d li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.mats-d li span {
  font: 400 12px var(--font-mono);
  color: var(--d-muted);
  white-space: nowrap;
}

.wcollapsed-d {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
}

.wcollapsed-d .bar-mk-d,
.wcollapsed-d .sw-d {
  width: 6px;
  height: 38px;
  align-self: center;
  border-radius: 3px;
  background: var(--c, var(--c-none));
}

.wcollapsed-d h4,
.wroot-d h4 {
  margin: 0;
  font: var(--w-display2) 17px var(--font-display);
  letter-spacing: -0.01em;
}

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

.wcollapsed-d .sum-d {
  text-align: right;
  font: 500 14px var(--font-mono);
}

.wcollapsed-d .sum-d small,
.work-sum-note {
  display: block;
  font: 400 12px var(--font-mono);
  color: var(--d-muted);
}

.wroot-d .sum-d small.sum-over-d,
.wcollapsed-d .sum-d small.sum-over-d,
.n-d small.sum-over-d {
  display: block;
  font: 600 12px var(--font-body);
  letter-spacing: 0;
  color: var(--d-stop);
}

.page-d .work-group-toggle {
  font: inherit;
  color: inherit;
  min-height: 0;
  gap: 8px;
}

.page-d .work-group-chevron {
  border-right-color: var(--d-muted);
  border-bottom-color: var(--d-muted);
}

.wgroup-d--open .work-group-chevron {
  transform: rotate(45deg);
}

.work-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 2px;
}

.work-row-actions--foot {
  margin: 0 20px 14px 40px;
}

.works-bar-d {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.works-bar-d .seg-d {
  margin-left: auto;
}

.wkid-title-d {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wkids-d li {
  align-items: start;
}

.wkids-d .st-d {
  margin-top: 1px;
}

.page-d .work-row-act {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font: 600 13px var(--font-body);
  color: var(--d-primary);
  text-decoration: none;
  cursor: pointer;
  min-height: 0;
}

.page-d .work-row-act--danger {
  color: var(--d-stop);
}

.page-d .work-row-act:focus-visible {
  outline: var(--d-focus-ring);
  outline-offset: 2px;
}

.page-d .work-sheet {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-d .wgroup-d {
  margin-bottom: 0;
}

.page-d .work-room-section {
  padding-left: 0;
  border-left: 0;
  gap: 12px;
}

.page-d .work-room-head {
  border-bottom: 0;
  padding: 0;
}

.page-d .work-room-title {
  font: var(--w-display2) 18px var(--font-display);
  letter-spacing: -0.02em;
}

.page-d .wgroup-d > .work-materials,
.page-d .wkids-d .work-materials {
  margin: 0 20px 14px 40px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}

.page-d .wkids-d .work-materials {
  margin: 2px 0 8px;
  grid-column: 1 / -1;
}

.page-d .wgroup-d .work-materials--open {
  padding: 12px 14px;
  background: var(--d-soft);
  border-radius: 16px;
}

.page-d .work-materials-toggle {
  padding: 0;
  font: 600 13px var(--font-body);
  color: var(--d-primary);
}

.page-d .work-materials-chevron {
  border-right-color: var(--d-primary);
  border-bottom-color: var(--d-primary);
}

.page-d .work-materials-hint {
  color: var(--d-muted);
  font-family: var(--font-body);
}

.page-d .work-room-title,
.page-d .work-room-sum {
  color: var(--d-ink);
}

.page-d .work-room-type,
.page-d .work-room-meta,
.page-d .work-room-count {
  color: var(--d-muted);
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}

.wkids-d .confirm-bar,
.wkids-d .work-materials {
  grid-column: 1 / -1;
}

.seg-d {
  align-self: flex-start;
}

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

/* —— Expenses —— */
.stats-d {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.stat-d {
  background: var(--d-card);
  border-radius: var(--r-card);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}

.stat-d small {
  font-size: 13px;
  color: var(--d-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-d b {
  display: block;
  font: var(--w-display) 24px var(--font-display);
  letter-spacing: -0.03em;
  margin-top: 4px;
}

.ex-grid-d {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
}

.filters-d {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.search-d {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--r-input);
  padding: 10px 14px;
  color: var(--d-muted);
  font-size: 15px;
}

.search-d input {
  flex: 1;
  border: 0;
  background: transparent;
  font: 500 15px var(--font-body);
  color: var(--d-ink);
  min-width: 0;
}

.search-d input:focus {
  outline: 0;
}

.day-d {
  font: 500 12px var(--font-mono);
  color: var(--d-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 14px 0 4px;
}

.exl-d {
  list-style: none;
  margin: 0;
  padding: 0;
}

.exl-d li {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--d-line-soft);
}

.exl-d li:first-child {
  border-top: 0;
}

.exl-d .sw-d {
  width: 6px;
  height: 38px;
  border-radius: 3px;
  background: var(--c);
}

.exl-d .t-d {
  font-weight: 500;
  font-size: 15px;
}

.exl-d .s-d {
  font-size: 13px;
  color: var(--d-muted);
}

.exl-d .rc-d {
  font-size: 12px;
  color: var(--d-primary);
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.exl-d .sum-d {
  font: 500 14px var(--font-mono);
  text-align: right;
  min-width: 80px;
}

.exp-card-d {
  padding-bottom: 8px;
}

.exp-select-d {
  appearance: none;
  max-width: 11rem;
  padding-right: 28px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--d-muted) 50%),
    linear-gradient(135deg, var(--d-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.exp-period-d {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 4px 0 10px;
}

.exp-period-d label {
  font-size: 13px;
  color: var(--d-muted);
}

.exp-period-d input {
  font: 500 14px var(--font-body);
  border: var(--input-border);
  background: var(--input-bg);
  border-radius: var(--r-input);
  padding: 8px 12px;
  color: var(--d-ink);
}

.exp-filter-sum-d {
  margin: 4px 0 0;
  font: 500 12px var(--font-mono);
  color: var(--d-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ex-row-foot,
.exl-d .confirm-bar,
.exl-d .expense-receipts {
  grid-column: 2 / -1;
}

.ex-row-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: -6px;
}

.receipt-d {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
}

.paper-d {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.35);
  padding: 12px 10px;
  font: 400 8.5px/1.5 var(--font-mono);
  color: #444;
  transform: rotate(-2deg);
  height: fit-content;
  overflow-wrap: anywhere;
}

.paper-d hr {
  border: 0;
  border-top: 1px dashed #bbb;
  margin: 6px 0;
}

.paper-shot-d {
  width: 100%;
  max-width: 120px;
  max-height: 168px;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.35);
  transform: rotate(-2deg);
  background: #fff;
}

.receipt-column-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.receipt-column-d .chip-d:focus-visible,
.receipt-column-d .work-row-act:focus-visible {
  outline: var(--d-focus-ring);
  outline-offset: 2px;
}

.receipt-rooms-d {
  margin-top: 16px;
}

.receipt-miss-d {
  margin: 0 0 12px;
  color: var(--d-muted);
  font-size: 14px;
  line-height: 1.45;
}

.receipt-actions-d {
  display: flex;
  gap: 10px;
}

.receipt-actions-d .btn-d-quiet {
  flex: 1;
}

.receipt-actions-d .btn-d-primary {
  flex: 2;
}

.receipt-upload-d .receipt-draft-actions {
  align-items: stretch;
}

.receipt-upload-d .receipt-draft-file {
  flex: 1 1 100%;
}

.found-d {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.found-d div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--d-line-soft);
  padding-bottom: 7px;
}

.found-d span {
  color: var(--d-muted);
}

.found-d b {
  font-weight: 600;
}

.ok-badge-d {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--d-ok);
}

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

/* —— Rooms —— */
.rooms-d {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.room-d {
  background: var(--d-card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.room-d .fill {
  height: 110px;
  position: relative;
  background: transparent;
  padding: 14px 16px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.room-d .fill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--c) 28%, white);
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 110' preserveAspectRatio='none'%3E%3Cpath d='M0 0h200v90q-50 18-100 0t-100 0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 110' preserveAspectRatio='none'%3E%3Cpath d='M0 0h200v90q-50 18-100 0t-100 0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.room-d .fill::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: var(--p);
  background: var(--c);
}

.room-d .fill > * {
  position: relative;
  z-index: 1;
}

.room-d .fill b {
  font: var(--w-display2) 20px var(--font-display);
  letter-spacing: -0.02em;
  color: var(--d-ink);
}

.room-d .fill small {
  font: 400 12px var(--font-mono);
  color: var(--d-ink);
  opacity: 0.8;
  white-space: nowrap;
}

.room-d .info-d {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.room-d .line-d {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--d-muted);
  gap: 8px;
}

.room-d .line-d b {
  font: 600 16px var(--font-display);
  color: var(--d-ink);
  text-align: right;
  white-space: nowrap;
}

.room-d .tags-d {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.room-d .room-actions-d {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 2px;
}

.rooms-d > .empty-d {
  min-height: 100%;
  justify-content: center;
}

.page-d .work-row-act:disabled {
  color: var(--d-muted);
  cursor: not-allowed;
}

/* —— Site, masters, flags, look (stage 8) —— */
.site-d {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
  align-items: start;
}

.scan-d {
  background: var(--d-soft);
  border-radius: 18px;
  padding: 16px;
  position: relative;
}

.scan-d .ai-d {
  position: absolute;
  right: 16px;
  top: 16px;
  background: var(--d-card);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 8px;
}

.scan-d .ai-d i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--d-ok);
  font-style: normal;
}

.found-rooms-d {
  list-style: none;
  margin: 0;
  padding: 0;
}

.found-rooms-d li {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--d-line-soft);
  font-size: 15px;
}

.found-rooms-d li:first-child {
  border-top: 0;
}

.found-rooms-d .a-d {
  font: 500 13px var(--font-mono);
  color: var(--d-muted);
}

.info-dl-d {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  font-size: 14px;
  margin: 0;
}

.info-dl-d dt {
  color: var(--d-muted);
}

.info-dl-d dd {
  margin: 0;
  font-weight: 500;
}

.page-d .master-search {
  margin: 0;
  padding: 20px 22px;
  border: 0;
  border-radius: var(--r-card);
  background: var(--d-card);
  box-shadow: var(--shadow-card);
  animation: none;
}

.page-d .master-search--busy {
  box-shadow: var(--shadow-card);
}

.page-d .master-search-eyebrow {
  font: 500 12px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--d-muted);
}

.page-d .master-search-head h2 {
  margin: 4px 0 0;
  font: var(--w-display2) 20px var(--font-display);
  letter-spacing: -0.02em;
  color: var(--d-ink);
}

.page-d .master-search-lead,
.page-d .master-search-note,
.page-d .master-search-geo-hint {
  color: var(--d-muted);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0;
}

.page-d .master-search-query {
  width: 100%;
  gap: 12px;
  align-items: flex-end;
}

.page-d .master-search-query-field,
.page-d .master-search-geo-field {
  margin: 0;
}

.page-d .master-search-query-field {
  flex: 1 1 16rem;
}

.page-d .master-search .field label {
  font: 600 13px var(--font-body);
  color: var(--d-ink-2);
}

.page-d .master-search .input {
  font: 500 16px var(--font-body);
  border: var(--input-border);
  background: var(--input-bg);
  border-radius: var(--r-input);
  padding: 13px 14px;
  color: var(--d-ink);
  box-shadow: none;
}

.page-d .master-search select.input {
  appearance: none;
  padding-right: 36px;
  background-color: var(--input-bg);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--d-muted) 50%),
    linear-gradient(135deg, var(--d-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.page-d .master-search .input:focus {
  outline: 0;
  border-color: var(--d-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--d-primary) 14%, transparent);
}

.mst-grid-d {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}

.mst-col-d {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.mst-grid-d .form-card-d {
  max-width: none;
}

.mst-grid-d .form-card-d .card-d {
  margin-top: 0;
}

.mst-list-d {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mst-d {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--d-line-soft);
}

.mst-d:first-child {
  border-top: 0;
  padding-top: 2px;
}

.avatar-lg-d {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--d-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
  font: 700 15px var(--font-display);
  color: var(--d-primary);
}

.avatar-lg-d img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mst-head-d {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.mst-head-d b {
  font: var(--w-display2) 17px var(--font-display);
  letter-spacing: -0.01em;
  margin-right: 4px;
}

.stamp-d {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--d-primary);
  background: color-mix(in srgb, var(--d-primary) 9%, white);
  border-radius: 8px;
  padding: 3px 8px;
}

.mst-meta-d {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 6px;
  font-size: 14px;
  color: var(--d-muted);
}

.mst-meta-d a {
  color: var(--d-primary);
  font-weight: 600;
  text-decoration: none;
}

.mst-meta-d .tel-d {
  font: 500 13px var(--font-mono);
}

.rate-d {
  display: inline-flex;
  gap: 3px;
}

.rate-d i {
  width: 12px;
  height: 6px;
  border-radius: 3px;
  background: var(--d-line);
  font-style: normal;
}

.rate-d i.on {
  background: var(--d-accent);
}

.mst-d p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--d-ink-2);
}

.svc-d {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.svc-d li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--d-soft);
  border-radius: 12px;
  padding: 7px 10px;
  font-size: 13px;
}

.svc-d b {
  font: 500 12px var(--font-mono);
}

.svc-desc-d {
  flex-basis: 100%;
  color: var(--d-muted);
}

.mst-acts-d {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.link-danger-d {
  border: 0;
  background: transparent;
  padding: 0;
  font: 600 13px var(--font-body);
  color: var(--d-stop);
  cursor: pointer;
}

.link-danger-d:focus-visible {
  outline: var(--d-focus-ring);
  outline-offset: 2px;
}

.mst-confirm-d {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.mst-confirm-d p {
  margin: 0;
  flex: 1 1 12rem;
}

.mst-form-h-d {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.mst-form-x-d {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--d-soft);
  color: var(--d-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.mst-form-x-d:focus-visible {
  outline: var(--d-focus-ring);
  outline-offset: 2px;
}

.form-card-d textarea.input {
  min-height: 4.5rem;
  line-height: 1.45;
  resize: vertical;
}

/* —— Room look —— */
.room-look {
  position: relative;
}

.look-d {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.page-d .room-look-stage {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 18px;
}

.page-d .room-look-stage-design,
.page-d .room-look-stage-tag--design {
  clip-path: inset(0 0 0 var(--split));
}

.page-d .room-look-stage-tag--photo {
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}

.page-d .room-look-stage-tag span {
  top: 12px;
  padding: 6px 11px;
  border-radius: 999px;
  font: 600 12px var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}

.page-d .room-look-stage-tag--photo span {
  left: 12px;
  right: auto;
  background: rgba(15, 30, 46, 0.7);
  color: #fff;
}

.page-d .room-look-stage-tag--design span {
  right: 12px;
  left: auto;
  background: #fff;
  color: var(--d-ink);
}

.page-d .room-look-stage-seam {
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: none;
}

.page-d .room-look-stage-seam::after {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    linear-gradient(#1d3348, #1d3348) 11px 18px / 6px 2px no-repeat,
    linear-gradient(#1d3348, #1d3348) 23px 18px / 6px 2px no-repeat,
    #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.page-d .room-look-stage:focus-within .room-look-stage-seam::after {
  box-shadow: var(--d-focus-ring), 0 6px 16px rgba(0, 0, 0, 0.25);
}

.stage-bar-d {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.hint-d {
  color: var(--d-muted);
  font-size: 13px;
}

.stage-acts-d {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--d-line-soft);
}

.stage-acts-d .btn-d-primary {
  margin-left: auto;
}

.styles-d {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.style-opt-d {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: var(--r-input);
  background: var(--d-soft);
  font: 500 15px var(--font-body);
  color: var(--d-ink-2);
  text-align: left;
  cursor: pointer;
}

.style-opt-d.on {
  background: var(--chip-on-bg);
  box-shadow: var(--chip-on-ring);
  font-weight: 600;
  color: var(--chip-on-ink);
}

.style-opt-d small {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--d-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.style-opt-d small::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--d-ok);
}

.style-opt-d.on small {
  color: inherit;
  opacity: 0.8;
}

.style-opt-d:disabled {
  cursor: default;
  opacity: 0.72;
}

.style-opt-d:focus-visible {
  outline: var(--d-focus-ring);
  outline-offset: 2px;
}

.look-wish-d {
  margin: 16px 0 8px;
}

.look-d .field,
.look-empty-d .field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.look-d .field label,
.look-empty-d .field label {
  font: 600 13px var(--font-body);
  color: var(--d-ink-2);
}

.look-d .input,
.look-empty-d .input {
  font: 500 16px var(--font-body);
  border: var(--input-border);
  background: var(--input-bg);
  border-radius: var(--r-input);
  padding: 13px 14px;
  color: var(--d-ink);
  width: 100%;
  box-shadow: none;
}

.look-d textarea.input {
  min-height: 4.5rem;
  line-height: 1.45;
  resize: vertical;
}

.look-d .input:focus,
.look-empty-d .input:focus {
  outline: 0;
  border-color: var(--d-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--d-primary) 14%, transparent);
}

.look-d .field-hint {
  margin: 0;
  font-size: 13px;
  color: var(--d-muted);
}

.consent-d {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--d-ink-2);
}

.consent-d input {
  margin-top: 2px;
  accent-color: var(--d-primary);
}

.consent-d input:focus-visible {
  outline: var(--d-focus-ring);
  outline-offset: 2px;
}

.look-note-d,
.look-caption-d {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--d-muted);
}

.look-empty-d p {
  margin: 0 0 14px;
  color: var(--d-ink-2);
}

.look-file-d {
  position: relative;
  display: flex;
}

.look-file-d .btn-d {
  cursor: pointer;
}

.flags-d {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.flag-card-d {
  background: var(--d-card);
  border-radius: var(--r-card);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}

.flag-card-d.off-d {
  box-shadow: none;
  border: 2px dashed var(--d-line);
}

.envelope-note-d {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: color-mix(in srgb, var(--d-accent) 14%, white);
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 14px;
}

.envelope-note-d--over {
  background: color-mix(in srgb, var(--d-stop) 10%, white);
}

.envelope-note-d p {
  margin: 0;
  flex: 1;
}

/* Modal and project form — D fields (shared with every ModalDialog) */
.modal-panel.modal-panel-d {
  width: min(580px, 100%);
  border-radius: 28px;
  padding: 28px;
  background: #fff;
  box-shadow: 0 40px 80px -30px rgba(15, 30, 46, 0.6);
}

.modal-panel-d .modal-head {
  margin-bottom: 20px;
  padding: 0;
  align-items: flex-start;
}

.modal-panel-d .modal-title {
  font: 800 25px var(--font-display);
  letter-spacing: -0.03em;
}

.modal-panel-d .modal-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--d-muted);
}

.modal-panel-d .modal-close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: var(--d-soft);
  color: var(--d-muted);
}

.modal-panel-d .modal-close:hover:not(:disabled) {
  border: 0;
  background: var(--d-line);
  color: var(--d-ink);
}

.modal-panel-d .modal-body {
  padding: 0;
}

.modal-panel-d .form-actions,
.form-card-d .form-actions-d {
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.modal-panel-d .field,
.form-card-d .field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 15px;
}

.modal-panel-d .stack-form {
  gap: 0;
}

.modal-panel-d .field-grid,
.form-card-d .field-grid {
  gap: 12px 16px;
  margin-bottom: 15px;
}

.modal-panel-d .field-grid .field,
.form-card-d .field-grid .field {
  margin-bottom: 0;
}

.modal-panel-d .field label,
.form-card-d .field label {
  font: 600 13px var(--font-body);
  color: var(--d-ink-2);
}

.modal-panel-d .input,
.form-card-d .input {
  font: 500 16px var(--font-body);
  border: var(--input-border);
  background: var(--input-bg);
  border-radius: var(--r-input);
  padding: 13px 14px;
  color: var(--d-ink);
  width: 100%;
  box-shadow: none;
}

.modal-panel-d .input:focus,
.form-card-d .input:focus {
  outline: 0;
  border-color: var(--d-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--d-primary) 14%, transparent);
}

.modal-panel-d select.input,
.form-card-d select.input {
  appearance: none;
  padding-right: 36px;
  background-color: var(--input-bg);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--d-muted) 50%),
    linear-gradient(135deg, var(--d-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.modal-panel-d input[type="number"],
.form-card-d input[type="number"] {
  appearance: textfield;
}

.modal-panel-d input[type="number"]::-webkit-outer-spin-button,
.modal-panel-d input[type="number"]::-webkit-inner-spin-button,
.form-card-d input[type="number"]::-webkit-outer-spin-button,
.form-card-d input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.modal-panel-d .field-hint,
.form-card-d .field-hint,
.modal-panel-d .validation-message,
.form-card-d .validation-message {
  margin: 0;
  font-size: 13px;
  color: var(--d-muted);
}

.modal-panel-d .validation-message,
.form-card-d .validation-message {
  color: var(--d-stop);
}

.delete-panel h2 {
  margin: 0 0 8px;
  font: 800 20px var(--font-display);
  letter-spacing: -0.02em;
}

.delete-panel > p {
  margin: 0 0 14px;
  color: var(--d-muted);
  font-size: 14px;
}

/* Modal bottom sheet (mobile) */
.modal-panel-d {
  position: relative;
}

@media (max-width: 899px) {
  .modal-root-d .modal-panel-d {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-height: min(92vh, 720px);
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 24px 24px 0 0;
    transform: none;
  }

  .modal-root-d .modal-backdrop-d {
    align-items: flex-end;
  }

  .modal-sheet-handle-d {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--d-line);
    margin: 8px auto 4px;
  }
}

.modal-sheet-handle-d {
  display: none;
}

@media (max-width: 899px) {
  .dash-hero-d,
  .ex-grid-d,
  .site-d,
  .mst-grid-d,
  .look-d,
  .analytics-d,
  .metrics-d,
  .stats-d,
  .rooms-d,
  .flags-d {
    grid-template-columns: 1fr;
  }

  .dash-big-d {
    font-size: 38px;
  }

  .nudge-d {
    flex-direction: column;
    align-items: flex-start;
  }

  .mats-d ul {
    grid-template-columns: 1fr;
  }

  .wkids-d li {
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
  }

  .wkids-d .n-d {
    grid-column: 2;
    text-align: left;
  }

  .receipt-d {
    grid-template-columns: 1fr;
  }

  .paper-d,
  .paper-shot-d {
    transform: none;
    max-width: 200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .paper-d,
  .paper-shot-d {
    transform: none;
  }
}