:root {
  --ink: #151816;
  --muted: #6e756f;
  --paper: #f3f1eb;
  --white: #fffdf8;
  --line: #d9d8d1;
  --teal: #2f716d;
  --teal-soft: #dcebe8;
  --sand: #d8c3a4;
  --danger: #9a4038;
  --shadow: 0 18px 60px rgba(25, 31, 28, 0.1);
}
* {
  box-sizing: border-box;
}
html {
  background: var(--paper);
  color: var(--ink);
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  max-width: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
.app-shell {
  display: grid;
  grid-template-columns: 245px 1fr;
  min-height: 100vh;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: #111412;
  color: #edf0ec;
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
}
.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 0 8px 28px;
}
.brand-mark {
  width: 42px;
  height: 42px;
  border: 1px solid #7ea39d;
  display: grid;
  place-items: center;
  color: #b6d7d1;
  font-family: Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.08em;
}
.brand strong,
.brand small {
  display: block;
}
.brand strong {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 500;
}
.brand small {
  color: #919991;
  margin-top: 3px;
  font-size: 12px;
}
.sidebar nav {
  display: grid;
  gap: 7px;
}
.nav-btn {
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #aeb5af;
  text-align: left;
  padding: 12px 13px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.nav-btn span {
  font-size: 18px;
}
.nav-btn:hover,
.nav-btn.active {
  background: #252a27;
  color: #fff;
}
.sidebar-note {
  margin-top: auto;
  border-top: 1px solid #303531;
  padding: 20px 8px 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.status-dot {
  width: 8px;
  height: 8px;
  background: #73a89c;
  border-radius: 50%;
  margin-top: 6px;
  box-shadow: 0 0 0 4px rgba(115, 168, 156, 0.12);
}
.sidebar-note strong,
.sidebar-note small {
  display: block;
}
.sidebar-note strong {
  font-size: 12px;
}
.sidebar-note small {
  color: #868e88;
  font-size: 11px;
  line-height: 1.45;
  margin-top: 4px;
}
.lock-admin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #303531;
  border-radius: 9px;
  background: transparent;
  color: #aeb5af;
  font-size: 11px;
  font-weight: 700;
}
.lock-admin:hover {
  border-color: #777e78;
  color: #fff;
}
.lock-admin-icon {
  font-size: 15px;
  line-height: 1;
}

/* Comptabilité */
.accounting-header {
  align-items: flex-start;
}
.accounting-header > div:first-child {
  max-width: 760px;
}
.accounting-actions,
.accounting-period,
.accounting-panel-title,
.accounting-entry-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.accounting-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.accounting-period {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.58);
}
.accounting-period label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.accounting-period select {
  min-width: 130px;
  padding: 9px 34px 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
}
.accounting-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.accounting-stats article,
.accounting-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}
.accounting-stats article {
  min-height: 112px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7px;
}
.accounting-stats span {
  color: var(--muted);
  font-size: 12px;
}
.accounting-stats strong {
  font-family: Georgia, serif;
  font-size: 26px;
  font-weight: 500;
}
.accounting-stats small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.accounting-balance-card {
  border-color: rgba(47, 113, 109, 0.45) !important;
  background: #eef5f3 !important;
}
.accounting-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(230px, 0.7fr);
  gap: 14px;
  margin-bottom: 14px;
}
.accounting-panel {
  padding: 20px;
  margin-bottom: 14px;
}
.accounting-panel-title {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}
.accounting-panel h2 {
  margin: 2px 0 0;
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 500;
}
.accounting-panel-title > small,
.accounting-vat-panel p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
.accounting-vat-panel > strong {
  display: inline-block;
  margin: 12px 0 2px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #ecece7;
  font-size: 11px;
}
.accounting-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-size: 10px;
}
.accounting-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.accounting-legend i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}
.accounting-legend .income {
  background: var(--teal);
}
.accounting-legend .expense {
  background: #c48a66;
}
.accounting-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(28px, 1fr));
  gap: 7px;
  min-height: 180px;
  align-items: end;
  overflow-x: auto;
  padding: 8px 2px 0;
}
.accounting-chart-month {
  min-width: 28px;
  height: 168px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 7px;
}
.accounting-chart-bars {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 3px;
  border-bottom: 1px solid var(--line);
}
.accounting-chart-bars i {
  display: block;
  width: min(12px, 42%);
  min-height: 2px;
  border-radius: 3px 3px 0 0;
}
.accounting-chart-bars .income {
  background: var(--teal);
}
.accounting-chart-bars .expense {
  background: #c48a66;
}
.accounting-chart-month > small {
  text-align: center;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}
.accounting-count {
  color: var(--muted);
  font-size: 11px;
}
.accounting-filters {
  display: grid;
  grid-template-columns:
    minmax(190px, 1.5fr) repeat(5, minmax(110px, 0.7fr))
    auto;
  gap: 9px;
  align-items: end;
  margin: -4px 0 18px;
  padding: 13px;
  border: 1px solid #e4e2db;
  border-radius: 11px;
  background: #faf9f5;
}
.accounting-filters label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}
.accounting-filters input,
.accounting-filters select {
  min-width: 0;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  color: var(--ink);
  font-size: 11px;
}
.accounting-operations,
.accounting-outstanding-list {
  display: grid;
  gap: 8px;
}
.accounting-operation,
.accounting-outstanding-row {
  display: grid;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid #e4e2db;
  border-radius: 10px;
  background: #faf9f5;
}
.accounting-operation {
  grid-template-columns: 10px minmax(0, 1.6fr) minmax(100px, 0.7fr) auto auto;
}
.accounting-operation.cancelled {
  opacity: 0.55;
}
.accounting-operation-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal);
}
.accounting-operation.expense .accounting-operation-dot {
  background: #c48a66;
}
.accounting-operation.refund .accounting-operation-dot {
  background: #a33f36;
}
.accounting-operation-main strong,
.accounting-operation-main small,
.accounting-operation-meta strong,
.accounting-operation-meta small {
  display: block;
}
.accounting-operation-main strong {
  font-size: 13px;
}
.accounting-operation-main small,
.accounting-operation-meta small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}
.accounting-operation-meta strong {
  font-size: 11px;
  font-weight: 650;
}
.accounting-operation-amount {
  font-family: Georgia, serif;
  font-size: 19px;
  white-space: nowrap;
}
.accounting-operation.expense .accounting-operation-amount {
  color: #9a5a3c;
}
.accounting-operation.refund .accounting-operation-amount {
  color: var(--danger);
}
.accounting-operation-actions {
  display: flex;
  gap: 5px;
}
.accounting-operation-actions button {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
}
.accounting-operation-actions button.danger {
  color: var(--danger);
}
.accounting-document-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.accounting-document-links a {
  padding: 4px 7px;
  border-radius: 5px;
  background: #eceae3;
  color: var(--ink);
  font-size: 9px;
  font-weight: 750;
  text-decoration: none;
}
.accounting-outstanding-row {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}
.accounting-outstanding-row strong,
.accounting-outstanding-row small {
  display: block;
}
.accounting-outstanding-row small {
  color: var(--muted);
  font-size: 10px;
  margin-top: 3px;
}
.accounting-outstanding-row span {
  color: var(--muted);
  font-size: 11px;
}
.accounting-outstanding-row b {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 500;
}
.accounting-empty {
  padding: 30px 18px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}
.accounting-readiness-panel {
  margin-bottom: 22px;
  border-color: rgba(47, 113, 109, 0.3);
  background: linear-gradient(135deg, #fbfaf6 0%, #f1f6f4 100%);
}
#accounting-readiness-status {
  padding: 7px 10px;
  border-radius: 999px;
  background: #e8f2ef;
  color: var(--teal);
  font-size: 10px;
}
#accounting-readiness-status.warning {
  background: #fff0dc;
  color: #9a5515;
}
.accounting-readiness-checks {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 8px;
}
.accounting-readiness-checks article {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #dfe7e4;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}
.accounting-readiness-checks article.missing {
  border-color: #ead3b8;
  background: #fffaf3;
}
.accounting-readiness-checks i {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}
.accounting-readiness-checks .missing i {
  background: #b66c24;
}
.accounting-readiness-checks strong,
.accounting-readiness-checks small {
  display: block;
}
.accounting-readiness-checks strong {
  font-size: 11px;
}
.accounting-readiness-checks small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}
.accounting-readiness-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.accounting-readiness-footer p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}
.accounting-reliability-panel {
  border-color: rgba(47, 113, 109, 0.3);
}
#accounting-reliability-status {
  padding: 7px 10px;
  border-radius: 999px;
  background: #e8f2ef;
  color: var(--teal);
  font-size: 10px;
}
#accounting-reliability-status.warning {
  background: #f7e8e3;
  color: var(--danger);
}
.accounting-reliability-checks {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 8px;
}
.accounting-reliability-checks article {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px;
  border: 1px solid #dfe7e4;
  border-radius: 10px;
  background: #f7faf9;
}
.accounting-reliability-checks article.warning {
  border-color: #ecc5ba;
  background: #fff7f4;
}
.accounting-reliability-checks i {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal);
  color: white;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.accounting-reliability-checks .warning i {
  background: var(--danger);
}
.accounting-reliability-checks strong,
.accounting-reliability-checks small {
  display: block;
}
.accounting-reliability-checks strong {
  font-size: 11px;
}
.accounting-reliability-checks small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}
.accounting-reliability-note {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 9px;
}
.project-accounting {
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid rgba(47, 113, 109, 0.35);
  border-radius: 13px;
  background: #eef5f3;
}
.project-accounting-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.project-accounting-heading span,
.project-accounting-heading strong {
  display: block;
}
.project-accounting-heading span {
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 10px;
  font-weight: 800;
}
.project-accounting-heading strong {
  margin-top: 5px;
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 500;
}
.project-payment-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 15px 0;
}
.project-payment-summary p {
  margin: 0;
  padding: 11px 12px;
  border: 1px solid rgba(47, 113, 109, 0.18);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.72);
}
.project-payment-summary span,
.project-payment-summary strong {
  display: block;
}
.project-payment-summary span {
  color: var(--muted);
  font-size: 10px;
}
.project-payment-summary strong {
  margin-top: 3px;
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 500;
}
.project-payment-history {
  display: grid;
  gap: 6px;
}
.project-payment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}
.project-payment.cancelled {
  opacity: 0.5;
}
.project-payment strong,
.project-payment small {
  display: block;
}
.project-payment strong {
  font-size: 11px;
}
.project-payment small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}
.project-payment b {
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 500;
}
.project-payment.refund b {
  color: var(--danger);
}
.project-payment .ghost {
  padding: 7px 9px;
  font-size: 9px;
}
.project-accounting-note {
  display: block;
  margin-top: 13px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}
.accounting-entry-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: min(880px, calc(100dvh - 28px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.24);
}
.accounting-tool-dialog {
  width: min(780px, calc(100vw - 28px));
  max-height: min(920px, calc(100dvh - 28px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.24);
}
.accounting-tool-dialog::backdrop {
  background: rgba(12, 15, 13, 0.62);
}
#accounting-export-form,
#accounting-settings-form {
  padding: 32px;
}
#accounting-export-form h2,
#accounting-settings-form h2 {
  margin: 4px 0 6px;
  font-family: Georgia, serif;
  font-size: 34px;
  font-weight: 500;
}
#accounting-export-form > label,
.accounting-export-period label,
#accounting-settings-form > label,
#accounting-settings-form fieldset > label {
  display: grid;
  gap: 6px;
  margin-bottom: 15px;
  color: #4d534f;
  font-size: 11px;
  font-weight: 750;
}
#accounting-export-form input,
#accounting-export-form select,
#accounting-settings-form input:not([type="checkbox"]),
#accounting-settings-form select,
#accounting-settings-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf6;
  color: var(--ink);
}
.accounting-export-summary {
  display: grid;
  gap: 4px;
  margin: 4px 0 16px;
  padding: 13px;
  border-left: 3px solid var(--teal);
  background: #eef5f3;
}

.accounting-export-readiness {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 1.35rem;
  padding: 1rem 1.1rem;
  border: 1px solid #d79b74;
  border-left: 5px solid var(--orange, #e76f18);
  background: #fff7ee;
}

.accounting-export-readiness.ready {
  border-color: #b8d2cc;
  border-left-color: var(--teal, #2f7b77);
  background: #f2f8f6;
}

.accounting-export-readiness div {
  display: grid;
  gap: 0.3rem;
}

.accounting-export-readiness small {
  color: var(--muted, #6f756f);
  line-height: 1.45;
}

.accounting-export-readiness button {
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
}

@media (max-width: 620px) {
  .accounting-export-readiness {
    align-items: stretch;
    flex-direction: column;
  }

  .accounting-export-readiness button {
    width: 100%;
  }
}
.accounting-export-summary strong {
  font-size: 12px;
}
.accounting-export-summary span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.accounting-export-individual {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
#accounting-settings-form fieldset {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #faf9f5;
}
#accounting-settings-form legend {
  padding: 0 7px;
  color: var(--teal);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.accounting-payment-settings {
  display: grid;
  gap: 8px;
}
.accounting-payment-setting {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.accounting-payment-setting label,
.accounting-checkbox {
  display: flex !important;
  align-items: flex-start;
  gap: 8px !important;
  margin: 0 !important;
}
.accounting-payment-setting label {
  align-items: center;
}
.accounting-payment-setting input[type="checkbox"],
.accounting-checkbox input {
  margin-top: 2px;
}
.accounting-payment-setting span,
.accounting-checkbox span {
  color: var(--ink) !important;
  font-size: 10px;
  font-weight: 700 !important;
}
.expense-dialog {
  width: min(820px, calc(100vw - 28px));
  max-height: min(920px, calc(100dvh - 28px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.24);
}
.expense-dialog::backdrop {
  background: rgba(12, 15, 13, 0.62);
}
#expense-form {
  padding: 32px;
}
#expense-form h2 {
  margin: 4px 0 6px;
  font-family: Georgia, serif;
  font-size: 34px;
  font-weight: 500;
}
.expense-intro {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 12px;
}
.expense-document-picker,
.expense-verification {
  margin-bottom: 18px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #faf9f5;
}
.expense-source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.expense-source-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}
.expense-source-button input {
  display: none;
}
.expense-selected-file {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 13px;
  padding: 11px;
  border: 1px solid rgba(47, 113, 109, 0.25);
  border-radius: 9px;
  background: #eef5f3;
}
.expense-selected-file img {
  width: 58px;
  height: 58px;
  border-radius: 7px;
  object-fit: cover;
}
.expense-file-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 7px;
  background: #dfe9e6;
  color: var(--teal);
  font-size: 11px;
  font-weight: 850;
}
.expense-selected-file strong,
.expense-selected-file small {
  display: block;
}
.expense-selected-file small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}
.expense-ocr-note,
.expense-alert {
  display: grid;
  gap: 4px;
  margin-top: 13px;
  padding: 11px 12px;
  border-left: 3px solid #c48a66;
  background: #f4ede7;
  color: #65584f;
  font-size: 10px;
  line-height: 1.5;
}
.expense-alert {
  margin: 0 0 16px;
  border-left-color: var(--teal);
  background: #eef5f3;
}
#expense-form > label,
.expense-verification > label,
.expense-amount-grid label {
  display: grid;
  gap: 6px;
  margin-bottom: 15px;
  color: #4d534f;
  font-size: 11px;
  font-weight: 750;
}
#expense-form label > span {
  color: var(--muted);
  font-weight: 500;
}
#expense-form label > small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
}
#expense-form input:not([type="checkbox"]),
#expense-form select,
#expense-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
}
.expense-amount-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr)) minmax(90px, 0.55fr);
  gap: 10px;
}
.expense-confirm {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start;
  gap: 10px !important;
  margin: 6px 0 0 !important;
  padding: 12px;
  border: 1px solid rgba(47, 113, 109, 0.32);
  border-radius: 8px;
  background: #eef5f3;
}
.expense-confirm input {
  margin-top: 2px;
}
.expense-confirm span {
  color: var(--ink) !important;
  font-size: 11px;
  font-weight: 750 !important;
}
.expense-existing-documents {
  margin: 4px 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--white);
}
.expense-existing-documents strong {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
}
.expense-existing-documents a {
  display: inline-block;
  margin: 3px 6px 3px 0;
  font-size: 10px;
  color: var(--teal);
}
.accounting-entry-dialog::backdrop {
  background: rgba(12, 15, 13, 0.58);
}
#accounting-entry-form {
  padding: 30px;
}
#accounting-entry-form h2 {
  margin: 4px 0 6px;
  font-family: Georgia, serif;
  font-size: 32px;
  font-weight: 500;
}
.accounting-entry-help {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 12px;
}
#accounting-entry-form > label,
.accounting-entry-grid label {
  display: grid;
  gap: 6px;
  margin-bottom: 15px;
  color: #4d534f;
  font-size: 11px;
  font-weight: 750;
}
#accounting-entry-form label > span {
  color: var(--muted);
  font-weight: 500;
}
#accounting-entry-form label > small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.45;
}
#accounting-entry-form input,
#accounting-entry-form select,
#accounting-entry-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf6;
  color: var(--ink);
}
.accounting-entry-grid.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.accounting-entry-actions {
  justify-content: flex-end;
  margin-top: 8px;
}

@media (max-width: 1050px) {
  .accounting-stats {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
  .accounting-grid {
    grid-template-columns: 1fr;
  }
  .accounting-filters {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }
  .accounting-reliability-checks {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }
  .accounting-readiness-checks {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
}
@media (max-width: 700px) {
  .accounting-header {
    display: block;
  }
  .accounting-actions {
    justify-content: stretch;
    margin-top: 18px;
  }
  .accounting-actions button {
    flex: 1;
  }
  .accounting-period {
    align-items: stretch;
  }
  .accounting-period label {
    flex: 1;
    display: grid;
  }
  .accounting-period select {
    min-width: 0;
    width: 100%;
  }
  .accounting-operation {
    grid-template-columns: 9px minmax(0, 1fr) auto;
  }
  .accounting-operation-meta {
    grid-column: 2 / -1;
  }
  .accounting-operation-actions {
    grid-column: 2 / -1;
  }
  .accounting-outstanding-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .accounting-outstanding-row span {
    grid-column: 1;
  }
  .accounting-outstanding-row b {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .accounting-filters {
    grid-template-columns: 1fr 1fr;
  }
  .expense-amount-grid {
    grid-template-columns: 1fr 1fr;
  }
  .accounting-reliability-checks {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .accounting-stats {
    grid-template-columns: 1fr 1fr;
  }
  .accounting-stats article {
    min-height: 102px;
    padding: 13px;
  }
  .accounting-stats strong {
    font-size: 21px;
  }
  .accounting-panel {
    padding: 15px;
  }
  .accounting-panel-title {
    display: block;
  }
  .accounting-legend {
    margin-top: 9px;
  }
  .accounting-entry-grid.two {
    grid-template-columns: 1fr;
    gap: 0;
  }
  #accounting-entry-form {
    padding: 24px 17px;
  }
  #expense-form {
    padding: 24px 17px;
  }
  #accounting-export-form,
  #accounting-settings-form {
    padding: 24px 17px;
  }
  .accounting-entry-actions button {
    flex: 1;
  }
  .project-accounting-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .project-accounting-heading button {
    width: 100%;
  }
  .project-payment {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .project-payment button {
    grid-column: 1 / -1;
  }
  .accounting-filters {
    grid-template-columns: 1fr;
  }
  .expense-document-picker,
  .expense-verification {
    padding: 13px;
  }
  .expense-source-actions {
    display: grid;
  }
  .expense-source-button,
  .expense-source-actions button {
    width: 100%;
  }
  .expense-amount-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .expense-selected-file {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .expense-selected-file img,
  .expense-file-icon {
    width: 48px;
    height: 48px;
  }
  .accounting-export-individual {
    grid-template-columns: 1fr;
  }
  .accounting-reliability-checks {
    grid-template-columns: 1fr;
  }
  .accounting-readiness-checks {
    grid-template-columns: 1fr;
  }
  .accounting-readiness-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .accounting-readiness-footer button {
    width: 100%;
  }
  .accounting-payment-setting {
    grid-template-columns: 75px minmax(0, 1fr);
  }
}
main {
  min-width: 0;
}
.view {
  display: none;
  padding: 42px 44px 70px;
}
.view.active {
  display: block;
}
.page-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  margin-bottom: 30px;
}
.page-header.compact {
  align-items: center;
}
.page-header h1 {
  font-family: Georgia, serif;
  font-size: 38px;
  line-height: 1.05;
  margin: 3px 0 8px;
  font-weight: 500;
}
.page-header p {
  margin: 0;
  color: var(--muted);
}
.eyebrow {
  text-transform: uppercase !important;
  letter-spacing: 0.16em;
  font-size: 11px !important;
  color: var(--teal) !important;
  font-weight: 750;
}
.primary,
.ghost {
  border-radius: 9px;
  padding: 11px 16px;
  font-weight: 700;
  border: 1px solid transparent;
}
.primary {
  background: var(--ink);
  color: white;
}
.primary:hover {
  background: var(--teal);
}
.ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.ghost:hover {
  background: white;
}
.ghost.danger {
  color: var(--danger);
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.stats article {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stats span {
  color: var(--muted);
  font-size: 13px;
}
.stats strong {
  font-family: Georgia, serif;
  font-size: 26px;
  font-weight: 500;
}
.board-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 18px 0;
}
.search {
  width: min(440px, 100%);
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
}
.search input {
  width: 100%;
  padding: 11px 0;
  border: 0;
  outline: none;
  background: transparent;
}
.kanban {
  display: grid;
  grid-template-columns: repeat(7, minmax(260px, 1fr));
  gap: 14px;
  overflow-x: auto;
  padding: 2px 2px 18px;
  scroll-snap-type: x proximity;
}
.column {
  scroll-snap-align: start;
  min-height: 440px;
  background: #e9e8e2;
  border: 1px solid #deddd7;
  border-radius: 14px;
  padding: 12px;
}
.column-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 5px 12px;
}
.column-head h2 {
  font-size: 13px;
  margin: 0;
}
.column-count {
  font-size: 11px;
  background: #d2d2cc;
  border-radius: 99px;
  padding: 3px 8px;
}
.column-body {
  min-height: 380px;
}
.column.drag-over {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}
.project-card {
  background: var(--white);
  border: 1px solid #d7d5cd;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(29, 34, 31, 0.03);
  cursor: grab;
}
.project-card.test-project {
  border: 2px dashed #8b6b24;
  background: #fff9e9;
}
.card-topline-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}
.test-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid #8b6b24;
  border-radius: 999px;
  background: #f3df9a;
  color: #4e3a0c;
  font:
    700 11px/1.1 Arial,
    sans-serif;
  letter-spacing: 0.08em;
}
.detail-status-line {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.detail-status-line .eyebrow {
  margin: 0;
}
.detail-test-badge {
  min-height: 30px;
}
.project-test-accounting-notice {
  display: grid;
  gap: 4px;
  margin-bottom: 18px;
  padding: 13px 15px;
  border-left: 4px solid #8b6b24;
  background: #fff6d8;
  color: #4e3a0c;
}
.project-test-accounting-notice span {
  color: #6d571f;
  line-height: 1.4;
}
.accounting-test-exclusion {
  max-width: 760px;
  margin-top: 14px !important;
  padding: 10px 13px;
  border-left: 3px solid #8b6b24;
  background: #fff6d8;
  color: #5d4b1d !important;
  font-size: 14px !important;
  line-height: 1.45;
}
.project-card:active {
  cursor: grabbing;
}
.project-card .date {
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 800;
}
.project-card h3 {
  font-family: Georgia, serif;
  font-size: 18px;
  margin: 8px 0 3px;
  font-weight: 500;
}
.project-card p {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 12px;
  line-height: 1.45;
}
.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pill {
  border-radius: 99px;
  background: #ecece6;
  padding: 5px 8px;
  font-size: 10px;
  color: #4e554f;
}
.pill.accent {
  background: var(--teal-soft);
  color: #245752;
}
.card-client {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e5e3dc;
  margin-top: 12px;
  padding-top: 10px;
  font-size: 11px;
}
.card-client strong {
  font-weight: 700;
}
.form-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 860px);
  gap: 30px;
  align-items: start;
}
.stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  position: sticky;
  top: 32px;
}
.stepper li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border-radius: 10px;
  color: #7a807b;
}
.stepper li > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #c8c9c2;
  border-radius: 50%;
  font-size: 11px;
}
.stepper strong,
.stepper small {
  display: block;
}
.stepper strong {
  font-size: 12px;
}
.stepper small {
  font-size: 10px;
  margin-top: 2px;
}
.stepper li.active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 5px 18px rgba(25, 31, 28, 0.06);
}
.stepper li.active > span {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.form-step {
  display: none;
  padding: 34px;
}
.form-step.active {
  display: block;
}
.section-title {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-bottom: 28px;
}
.section-title > span {
  color: var(--teal);
  font-family: Georgia, serif;
  font-size: 13px;
  border-top: 1px solid var(--teal);
  padding-top: 5px;
}
.section-title h2 {
  font-family: Georgia, serif;
  font-size: 27px;
  font-weight: 500;
  margin: 0 0 6px;
}
.section-title p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  font-size: 13px;
  max-width: 620px;
}
.field-grid {
  display: grid;
  gap: 16px;
}
.field-grid.two {
  grid-template-columns: 1fr 1fr;
}
label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 17px;
}
input,
textarea,
select {
  width: 100%;
  border: 1px solid #cfd1ca;
  border-radius: 9px;
  padding: 12px 13px;
  background: #fff;
  color: var(--ink);
  outline: none;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(47, 113, 109, 0.11);
}
textarea {
  resize: vertical;
}
.choice-field {
  border: 0;
  padding: 0;
  margin: 4px 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.choice-field legend {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}
.choice-field label {
  margin: 0;
}
.choice-field input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-field span {
  display: block;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
}
.choice-field input:checked + span {
  background: var(--teal-soft);
  border-color: #91b7b2;
  color: #245752;
}
.mapper-controls {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.segmented {
  display: flex;
  background: #eeeee9;
  padding: 4px;
  border-radius: 10px;
  overflow-x: auto;
}
.segmented button {
  border: 0;
  background: transparent;
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 11px;
  white-space: nowrap;
}
.segmented button.active {
  background: white;
  box-shadow: 0 2px 7px rgba(20, 24, 21, 0.1);
  color: var(--teal);
  font-weight: 800;
}
.body-map-wrap {
  background: #f4f3ee;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
}
#body-map {
  width: min(100%, 390px);
  height: auto;
  background: #faf9f5;
  border-radius: 10px;
  touch-action: none;
}
.map-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.map-actions button {
  font-size: 11px;
  padding: 8px 11px;
}
.hint {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}
.example {
  background: #eef3f1;
  border-left: 3px solid var(--teal);
  padding: 13px 14px;
  border-radius: 0 9px 9px 0;
  margin-bottom: 19px;
  display: grid;
  gap: 3px;
}
.example strong {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
}
.example span {
  font-size: 12px;
  line-height: 1.5;
}
.upload-zone {
  border: 1px dashed #adb4ad;
  border-radius: 13px;
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  text-align: center;
  background: #faf9f5;
  margin: 0;
  padding: 18px;
  cursor: pointer;
}
.upload-zone:hover {
  border-color: var(--teal);
  background: #f1f7f5;
}
.upload-zone input {
  display: none;
}
.upload-zone small {
  color: var(--muted);
  font-weight: 400;
}
.upload-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 18px;
}
.upload-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.upload-item {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 13px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  align-items: start;
}
.upload-item img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 8px;
  background: #ecece7;
}
.upload-item label {
  margin: 0;
}
.upload-item textarea {
  min-height: 68px;
}
.remove-upload {
  border: 0;
  background: #f2e7e4;
  color: var(--danger);
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.tattoo-list .upload-item {
  grid-template-columns: 120px 1fr auto;
}
.tattoo-list .upload-item img {
  width: 120px;
  height: 150px;
}
.reason-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}
.reason-chips label {
  margin: 0;
}
.reason-chips input {
  position: absolute;
  opacity: 0;
}
.reason-chips span {
  font-size: 10px;
  font-weight: 650;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 99px;
  display: block;
}
.reason-chips input:checked + span {
  background: var(--teal-soft);
  border-color: #8bb3ad;
  color: #245752;
}
.final-note {
  border-top: 1px solid var(--line);
  margin-top: 22px;
  padding-top: 18px;
}
.privacy-notice {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid var(--line);
  background: rgba(47, 124, 116, 0.055);
}
.privacy-notice strong {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.privacy-notice p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
.privacy-details {
  margin-top: 12px;
  border-top: 1px solid rgba(47, 124, 116, 0.2);
  padding-top: 10px;
}
.privacy-details summary {
  cursor: pointer;
  color: var(--teal);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.privacy-details a {
  color: inherit;
  font-weight: 750;
}
.privacy-ack {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink);
}
.privacy-ack input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--teal);
}
.final-note strong {
  font-family: Georgia, serif;
}
.final-note p {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}
.form-footer {
  border-top: 1px solid var(--line);
  padding: 17px 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding-bottom: 25px;
}
.form-footer #step-count {
  margin: auto;
  color: var(--muted);
  font-size: 11px;
}
.form-footer #draft-status {
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 8px;
  white-space: nowrap;
}
.clear-draft {
  border: 0;
  padding: 4px 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 9px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.hidden {
  display: none !important;
}
dialog {
  width: min(680px, calc(100% - 28px));
  max-height: 88vh;
  border: 0;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.34);
}
dialog::backdrop {
  background: rgba(11, 14, 12, 0.63);
  backdrop-filter: blur(3px);
}
.dialog-close {
  position: absolute;
  right: 15px;
  top: 13px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: #efeee8;
  border-radius: 50%;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  margin: 0;
  font-size: 20px;
  line-height: 1;
}
.detail-head {
  padding-right: 34px;
}
.detail-head .eyebrow {
  margin-bottom: 8px;
}
.detail-head h2 {
  font-family: Georgia, serif;
  font-size: 30px;
  margin: 0 0 4px;
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 22px 0;
}
.detail-block {
  background: #f3f2ed;
  border-radius: 10px;
  padding: 13px;
}
.detail-block span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.detail-block strong {
  font-size: 13px;
  display: block;
  margin-top: 5px;
}
.detail-description {
  line-height: 1.6;
  font-size: 13px;
}
.dialog-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 18px;
}
#toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: #111412;
  color: #fff;
  padding: 11px 16px;
  border-radius: 9px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
  z-index: 10;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.admin-save-status {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 9;
  display: none;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: #171a18;
  color: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  font-size: 11px;
}
.admin-save-status.visible {
  display: flex;
}
.admin-save-status span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7d837f;
}
.admin-save-status.saving span {
  background: #ef7a16;
  animation: save-pulse 0.9s infinite alternate;
}
.admin-save-status.error {
  background: #8e2923;
}
.admin-save-status.error span {
  background: #fff;
}
@keyframes save-pulse {
  to {
    opacity: 0.35;
  }
}
@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: sticky;
    z-index: 4;
    height: auto;
    padding: 11px 14px;
    flex-direction: row;
    align-items: center;
  }
  .brand {
    padding: 0;
    margin-right: auto;
  }
  .brand-mark {
    width: 34px;
    height: 34px;
  }
  .brand small {
    display: none;
  }
  .sidebar nav {
    display: flex;
  }
  .nav-btn {
    padding: 9px;
  }
  .nav-btn span {
    display: none;
  }
  .sidebar-note {
    display: none;
  }
  .lock-admin {
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin: 0 0 0 3px;
    padding: 0;
  }
  .lock-admin-label {
    display: none;
  }
  .view {
    padding: 25px 18px 60px;
  }
  .form-layout {
    grid-template-columns: 1fr;
  }
  .stepper {
    position: static;
    display: flex;
    overflow-x: auto;
  }
  .stepper li {
    min-width: 52px;
    padding: 8px;
  }
  .stepper li div {
    display: none;
  }
  .page-header h1 {
    font-size: 31px;
  }
  .stats {
    grid-template-columns: 1fr 1fr;
  }
  .form-step {
    padding: 24px;
  }
  .form-footer {
    padding: 15px 24px;
  }
  .field-grid.two {
    grid-template-columns: 1fr;
  }
  .tattoo-list .upload-item,
  .upload-item {
    grid-template-columns: 76px 1fr auto;
  }
  .tattoo-list .upload-item img,
  .upload-item img {
    width: 76px;
    height: 82px;
  }
  .reason-chips {
    grid-column: 1/-1;
  }
  .page-header {
    align-items: flex-start;
  }
  .page-header .primary {
    white-space: nowrap;
  }
}
@media (max-width: 560px) {
  .brand strong {
    font-size: 15px;
  }
  .page-header {
    display: grid;
  }
  .page-header > button {
    justify-self: start;
  }
  .stats article {
    padding: 13px;
  }
  .board-toolbar {
    align-items: stretch;
    gap: 8px;
  }
  .board-toolbar .ghost {
    font-size: 0;
    width: 42px;
  }
  .board-toolbar .ghost:after {
    content: "↺";
    font-size: 18px;
  }
  .form-step {
    padding: 19px;
  }
  .section-title h2 {
    font-size: 23px;
  }
  .form-footer {
    padding: 13px 18px;
  }
  .mapper-controls {
    display: grid;
  }
  .views {
    width: 100%;
  }
  .upload-item,
  .tattoo-list .upload-item {
    grid-template-columns: 64px 1fr auto;
  }
  .upload-item img,
  .tattoo-list .upload-item img {
    width: 64px;
    height: 72px;
  }
  .upload-item textarea {
    grid-column: 1/-1;
  }
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Agenda et sélection structurée des rendez-vous */
.form-modal-close {
  position: fixed;
  z-index: 90;
  top: max(14px, env(safe-area-inset-top));
  right: 16px;
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid #5a5b56;
  border-radius: 50%;
  background: #111311;
  color: #f5f1e8;
  font-size: 30px;
  line-height: 1;
}
body.client-mode .form-modal-close {
  display: none;
}
body:not(.client-mode) .form-modal-close,
body.client-mode:not(.admin-mode) .form-modal-close {
  display: none;
}
.calendar-year-control {
  display: flex;
  align-items: center;
  gap: 8px;
}
.calendar-year-control select {
  min-width: 112px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  padding: 11px 14px;
  font: inherit;
  font-weight: 700;
}
.calendar-move-panel {
  margin: 0 0 20px;
  padding: 22px;
  border: 2px solid #b74d0c;
  border-radius: 16px;
  background: #fff5e9;
  scroll-margin-top: 20px;
}
.calendar-move-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.calendar-move-head span {
  color: #963b08;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.calendar-move-head h2 {
  margin: 4px 0;
  font-family: var(--serif);
  font-size: 31px;
  font-weight: 500;
}
.calendar-move-head p,
.calendar-move-hint {
  margin: 0;
  color: #6d655d;
  font-size: 12px;
}
.calendar-move-close {
  border: 0;
  background: transparent;
  font-size: 28px;
}
.calendar-move-body {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) minmax(190px, 0.7fr) auto auto;
  align-items: end;
  gap: 12px;
  margin-top: 18px;
}
.calendar-move-scope {
  display: flex;
  gap: 7px;
}
.calendar-move-scope button {
  flex: 1;
  min-height: 44px;
  border: 1px solid #d5a47f;
  border-radius: 9px;
  background: transparent;
  color: #693817;
  font-weight: 750;
}
.calendar-move-scope button.active {
  border-color: #963b08;
  background: #963b08;
  color: #fff;
}
.calendar-move-body label {
  display: grid;
  gap: 6px;
  color: #6b4b34;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.calendar-move-body input {
  min-height: 44px;
  border: 1px solid #d5a47f;
  border-radius: 9px;
  background: #fff;
  padding: 8px 11px;
  font: inherit;
}
.calendar-move-hint {
  margin-top: 13px;
}
.calendar-selecting-target .calendar-day {
  cursor: pointer;
  opacity: 1;
  box-shadow: inset 0 0 0 1px #d8a77d;
}
.calendar-day.move-source {
  outline: 3px solid #171817;
  outline-offset: 1px;
}
.calendar-day.move-target-selected {
  outline: 3px solid #2f7c74;
  outline-offset: 1px;
}
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0 0 24px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}
.calendar-legend span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5d625d;
  font-size: 12px;
  font-weight: 700;
}
.calendar-legend i,
.calendar-day-details i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
}
.date-proposed,
.calendar-legend .date-proposed,
.calendar-day.date-proposed {
  background: #f4c995;
}
.date-accepted,
.calendar-legend .date-accepted,
.calendar-day.date-accepted {
  background: #ff6a00;
}
.date-booked,
.calendar-legend .date-booked,
.calendar-day.date-booked {
  background: #963b08;
  color: #fff;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.calendar-month {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}
.calendar-month h2 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  text-transform: capitalize;
}
.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.calendar-weekdays {
  margin-bottom: 5px;
  color: #8b8d87;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}
.calendar-day,
.calendar-empty {
  aspect-ratio: 1;
}
.calendar-day {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  border: 0;
  border-radius: 7px;
  background: #f2f1ec;
  color: #484c48;
  font-size: 11px;
}
.calendar-day:disabled {
  opacity: 1;
}
.calendar-day:not(:disabled) {
  cursor: pointer;
  font-weight: 850;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.calendar-day b {
  position: absolute;
  top: -4px;
  right: -3px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #171817;
  color: #fff;
  font-size: 8px;
}
.calendar-day-details {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--white);
}
.calendar-day-details > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-family: var(--serif);
  font-size: 24px;
  text-transform: capitalize;
}
.calendar-details-close {
  border: 0;
  background: transparent;
  font-size: 28px;
}
.calendar-detail-project {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  padding: 13px 4px;
  text-align: left;
}
.calendar-detail-project > span {
  flex: 1;
}
.calendar-day-details > button span,
.calendar-day-details strong,
.calendar-day-details small {
  display: block;
}
.calendar-day-details small {
  margin-top: 3px;
  color: #737770;
}
.project-date-planner {
  margin: 24px 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f6f5ef;
}
.date-planner-heading > span {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 850;
}
.date-planner-heading p {
  margin: 7px 0 0;
  color: #70746f;
  line-height: 1.45;
}
.date-add-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin: 16px 0;
}
.date-add-row input {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  padding: 12px;
  font: inherit;
}
.project-date-list {
  display: grid;
  gap: 8px;
}
.project-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-left: 7px solid #c7c7c0;
  border-radius: 9px;
  background: #fff;
  padding: 12px;
}
.project-date-item.date-proposed {
  border-left-color: #f4c995;
}
.project-date-item.date-accepted {
  border-left-color: #ff6a00;
}
.project-date-item.date-booked {
  border-left-color: #963b08;
}
.project-date-item strong,
.project-date-item small {
  display: block;
}
.project-date-item small {
  margin-top: 3px;
  color: #6f736e;
}
.project-date-item > div:last-child {
  display: flex;
  align-items: center;
  gap: 7px;
}
.remove-project-date {
  width: 34px;
  height: 34px;
  border: 1px solid #d3d2cb;
  border-radius: 50%;
  background: transparent;
  color: #9d332a;
  font-size: 20px;
}
.empty-project-dates {
  margin: 0;
  color: #858780;
  font-style: italic;
}
@media (max-width: 1150px) {
  .calendar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .calendar-grid {
    grid-template-columns: 1fr;
  }
  .calendar-header {
    align-items: flex-start;
  }
  .calendar-move-panel {
    padding: 17px;
  }
  .calendar-move-body {
    grid-template-columns: 1fr;
  }
  .calendar-move-scope,
  .calendar-detail-project {
    align-items: stretch;
    flex-direction: column;
  }
  .date-add-row {
    grid-template-columns: 1fr;
  }
  .project-date-item {
    align-items: flex-start;
    flex-direction: column;
  }
  .form-modal-close {
    top: max(8px, env(safe-area-inset-top));
    right: 8px;
  }
}

/* Gestion durable des dossiers et clients */
.header-actions,
.client-card-actions,
.project-management {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.project-management {
  justify-content: flex-end;
  margin: -4px 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.delete-project {
  border: 1px solid #c3483f;
  border-radius: 9px;
  background: transparent;
  color: #a82f27;
  padding: 10px 13px;
  font-weight: 750;
}
.delete-project-dialog {
  width: min(92vw, 620px);
  padding: 0;
  border: 0;
  border-radius: 22px;
}
.delete-dialog-content {
  display: grid;
  gap: 18px;
  padding: 38px;
}
.delete-dialog-content h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(38px, 6vw, 58px);
  font-weight: 500;
  line-height: 0.98;
}
.delete-dialog-intro {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.delete-confirm-step {
  display: grid;
  gap: 18px;
}
.delete-confirm-step.hidden {
  display: none;
}
.delete-project-summary,
.delete-safety-note {
  display: grid;
  gap: 6px;
  padding: 17px;
  border: 1px solid var(--line);
  background: #faf9f5;
}
.delete-project-summary span,
.delete-confirm-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.delete-project-summary strong {
  color: var(--ink);
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
}
.delete-safety-note {
  border-left: 4px solid #d87f2d;
  background: #fff8ef;
}
.delete-safety-note span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.delete-confirm-label {
  display: grid;
  gap: 9px;
}
.delete-confirm-label span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.delete-confirm-label input {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  font: 800 16px var(--sans);
  letter-spacing: 0.08em;
}
.delete-confirm-label input:focus {
  border-color: #b83a32;
  outline: 3px solid rgba(184, 58, 50, 0.12);
}
.delete-final-warning {
  margin: 0;
  color: #8d2b25;
  font-size: 13px;
  line-height: 1.5;
}
.delete-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.delete-dialog-continue,
.delete-dialog-confirm {
  border: 1px solid #b83a32;
  border-radius: 9px;
  background: #b83a32;
  color: #fff;
  padding: 12px 15px;
  font-weight: 800;
}
.delete-dialog-confirm:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
@media (max-width: 620px) {
  .delete-dialog-content {
    padding: 30px 22px 24px;
  }
  .delete-dialog-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
  .delete-dialog-actions button {
    width: 100%;
  }
}
.client-edit-dialog {
  width: min(92vw, 540px);
  padding: 0;
}
.client-edit-dialog form {
  display: grid;
  gap: 15px;
  padding: 34px;
}
.client-edit-dialog h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 500;
}
.client-edit-dialog label {
  display: grid;
  gap: 7px;
  color: #555a55;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  font-weight: 800;
}
.client-edit-dialog input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
}
.client-edit-dialog .primary {
  margin-top: 8px;
  padding: 14px;
}
.restore-dialog {
  width: min(92vw, 620px);
  padding: 0;
}
.restore-dialog-content {
  display: grid;
  gap: 18px;
  padding: 36px;
}
.restore-dialog h2 {
  margin: 0;
  padding-right: 42px;
  font-family: var(--serif);
  font-size: clamp(36px, 7vw, 54px);
  font-weight: 500;
  line-height: 0.95;
}
.restore-file-name {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.restore-total {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
}
.restore-total strong {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 500;
}
.restore-summary > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.restore-summary > div p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.restore-current {
  color: var(--teal);
  font-weight: 750;
}
.restore-warning {
  display: grid;
  gap: 5px;
  padding: 14px;
  border-left: 3px solid var(--teal);
  background: #edf3f1;
}
.restore-warning span {
  color: var(--muted);
  line-height: 1.45;
}
.restore-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.restore-actions button {
  min-height: 48px;
}
.restore-actions .primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.diagnostics-dialog {
  width: min(92vw, 680px);
  padding: 0;
}
.diagnostics-dialog-content {
  display: grid;
  gap: 20px;
  padding: 36px;
}
.diagnostics-dialog h2 {
  margin: 0;
  padding-right: 42px;
  font-family: var(--serif);
  font-size: clamp(38px, 7vw, 56px);
  font-weight: 500;
  line-height: 0.95;
}
.diagnostics-overall {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 12px;
  background: #edf3f1;
  color: #244d48;
}
.diagnostics-overall.warning {
  background: #fff2df;
  color: #7a430e;
}
.diagnostics-overall > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: currentColor;
  color: #fff;
  font-weight: 900;
}
.diagnostics-overall div,
.diagnostics-check div {
  display: grid;
  gap: 3px;
}
.diagnostics-overall small,
.diagnostics-check small {
  opacity: 0.75;
}
.diagnostics-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.diagnostics-check {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.diagnostics-check > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: #2f7d76;
  color: #fff;
  font-weight: 900;
}
.diagnostics-check.warning > span {
  background: #e67613;
}
.diagnostics-check.error > span {
  background: #b93831;
}
.diagnostics-counts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.diagnostics-counts p {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 12px;
  border-radius: 9px;
  background: #f3f2ed;
}
.diagnostics-counts span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.diagnostics-counts strong {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 500;
}
.diagnostics-note,
.diagnostics-loading,
.diagnostics-failed {
  margin: 0;
  padding: 14px;
  border-left: 3px solid var(--line);
  color: var(--muted);
}
.diagnostics-failed {
  border-color: #b93831;
  color: #8d2d27;
}
.diagnostics-refresh {
  justify-self: end;
  min-height: 44px;
}
@media (max-width: 700px) {
  .header-actions {
    width: 100%;
  }
  .header-actions > button {
    flex: 1 1 auto;
  }
  .board-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .archive-toggle {
    width: 100%;
  }
  .project-management {
    justify-content: stretch;
  }
  .project-management > button {
    flex: 1 1 100%;
  }
  .client-edit-dialog form {
    padding: 30px 20px;
  }
  .restore-dialog-content {
    padding: 30px 20px 22px;
  }
  .restore-summary > div {
    grid-template-columns: 1fr;
  }
  .restore-actions {
    flex-direction: column-reverse;
  }
  .restore-actions button {
    width: 100%;
  }
  .diagnostics-dialog-content {
    padding: 30px 20px 22px;
  }
  .diagnostics-checks {
    grid-template-columns: 1fr;
  }
  .diagnostics-counts {
    grid-template-columns: 1fr 1fr;
  }
  .diagnostics-refresh {
    width: 100%;
  }
}

/* Client form — editorial identity */
body.client-mode {
  background: #0d0d0c;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.client-mode .app-shell {
  display: block;
}
.client-mode .sidebar {
  display: none;
}
.client-mode main {
  min-height: 100vh;
}
#form-view.active {
  min-height: 100vh;
  padding: 0;
  background: #0d0d0c;
  color: #f1efe9;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.client-topbar {
  height: 86px;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 48px;
  border-bottom: 1px solid #2d2d2a;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.client-brand {
  display: flex;
  align-items: center;
  gap: 15px;
}
.client-brand-mark {
  display: block;
  width: 15px;
  height: 23px;
  opacity: 0.9;
}
.client-brand strong,
.client-brand small {
  display: block;
}
.client-brand strong {
  font-family: "Cormorant Garamond", "Iowan Old Style", Baskerville, serif;
  font-size: 16px;
  line-height: 0.95;
  letter-spacing: 0.2em;
  font-weight: 500;
}
.client-brand small {
  font-size: 7px;
  letter-spacing: 0.35em;
  color: #85857f;
  margin-top: 6px;
}
.client-exit {
  border: 0;
  border-bottom: 1px solid #55544f;
  background: transparent;
  color: #aaa8a1;
  padding: 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 9px;
}
.client-exit:hover {
  color: #fff;
  border-color: #fff;
}
#form-view .form-layout {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 68px 48px 96px;
  display: grid;
  grid-template-columns: 340px minmax(0, 820px);
  gap: 84px;
  align-items: start;
  min-width: 0;
}
.client-rail {
  position: sticky;
  top: 38px;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.client-heading > p:first-child {
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: #898983;
  font-size: 10px;
  font-weight: 600;
  margin: 0 0 20px;
}
.client-heading h1 {
  font-family:
    "Cormorant Garamond", "Iowan Old Style", Baskerville, "Times New Roman",
    serif;
  font-size: 66px;
  line-height: 0.84;
  letter-spacing: -0.035em;
  font-weight: 400;
  margin: 0;
  color: #f5f2e9;
}
.client-heading h1 em {
  display: block;
  max-width: 350px;
  margin-top: 0.35em;
  font-size: 0.48em;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: #aaa69d;
}
.hairline {
  width: 48px;
  height: 1px;
  background: #65645f;
  margin: 36px 0 24px;
}
.client-heading .client-copy {
  max-width: 310px;
  color: #96958f;
  font-size: 12px;
  line-height: 1.75;
  margin: 0;
}
#form-view .stepper {
  position: static;
  margin-top: 52px;
  gap: 0;
  border-top: 1px solid #292927;
}
#form-view .stepper li {
  position: relative;
  color: #676762;
  padding: 14px 0;
  border-radius: 0;
  border-bottom: 1px solid #292927;
  gap: 14px;
  transition: 0.2s;
}
#form-view .stepper li > span {
  width: 24px;
  height: auto;
  border: 0;
  border-radius: 0;
  color: inherit;
  font-family: "Cormorant Garamond", "Iowan Old Style", Baskerville, serif;
  font-size: 12px;
}
#form-view .stepper li strong {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 600;
}
#form-view .stepper li small {
  font-size: 9px;
  color: #575752;
}
#form-view .stepper li.active {
  background: transparent;
  color: #f0ede5;
  box-shadow: none;
  padding-left: 10px;
}
#form-view .stepper li.active:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #f0ede5;
}
#form-view .stepper li.active > span {
  background: transparent;
  border: 0;
  color: #f0ede5;
}
.client-signature {
  margin-top: auto;
  padding-top: 32px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 9px;
  color: #5e5e59;
}
#form-view .form-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: #f1eee6;
  color: #171716;
  border: 1px solid #d6d1c6;
  border-radius: 2px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.32);
}
#form-view .form-step {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 58px 64px 48px;
  min-height: 560px;
}
#form-view .section-title {
  margin-bottom: 44px;
  gap: 18px;
}
#form-view .section-title > span {
  color: #818079;
  border-top: 1px solid #8f8d85;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.12em;
  padding-top: 7px;
}
#form-view .section-title h2 {
  font-family:
    "Cormorant Garamond", "Iowan Old Style", Baskerville, "Times New Roman",
    serif;
  font-size: 43px;
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin-bottom: 12px;
}
#form-view .section-title p {
  font-size: 12px;
  color: #77766f;
  line-height: 1.65;
  max-width: 520px;
}
#form-view label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 650;
  color: #474640;
  gap: 10px;
  margin-bottom: 27px;
}
#form-view input,
#form-view textarea,
#form-view select {
  border: 0;
  border-bottom: 1px solid #aaa79e;
  border-radius: 0;
  padding: 12px 0;
  background: transparent;
  color: #111;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}
#form-view input::placeholder,
#form-view textarea::placeholder {
  color: #aaa79f;
}
#form-view input:focus,
#form-view textarea:focus,
#form-view select:focus {
  border-color: #111;
  box-shadow: none;
}
#form-view textarea {
  border: 1px solid #aaa79e;
  padding: 14px;
  min-height: 130px;
}
#form-view .choice-field {
  gap: 7px;
}
#form-view .choice-field legend {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  margin-bottom: 11px;
}
#form-view .choice-field span {
  border-radius: 0;
  border-color: #b8b5ac;
  background: transparent;
  padding: 10px 14px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#form-view .choice-field input:checked + span {
  background: #171716;
  border-color: #171716;
  color: #f2efe7;
}
#form-view .primary,
#form-view .ghost {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 9px;
  padding: 13px 17px;
}
#form-view .primary {
  background: #171716;
  color: #f3f0e8;
}
#form-view .primary:hover {
  background: #34332f;
}
#form-view .ghost {
  border-color: #aaa79f;
  background: transparent;
  color: #3a3935;
}
#form-view .ghost:hover {
  background: #e3dfd5;
}
#form-view .form-footer {
  border-top: 1px solid #d2cec3;
  padding: 19px 64px 27px;
  background: #eae6dc;
}
#form-view .form-footer #step-count {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #77756d;
  font-size: 8px;
}
#form-view .segmented {
  background: #dedacf;
  border-radius: 0;
  padding: 3px;
}
#form-view .segmented button {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 8px;
  padding: 9px 12px;
}
#form-view .segmented button.active {
  color: #111;
  box-shadow: none;
  background: #f8f5ed;
  font-weight: 700;
}
#form-view .body-map-wrap {
  background: #e6e2d8;
  border-color: #c9c4b8;
  border-radius: 0;
}
#form-view #body-map {
  background: #f5f2eb;
  border-radius: 0;
}
#form-view .hint {
  color: #77756e;
  font-size: 10px;
}
#form-view .example {
  background: #e3dfd5;
  border-left: 1px solid #171716;
  border-radius: 0;
  padding: 15px 17px;
}
#form-view .example strong {
  color: #171716;
  font-size: 8px;
  letter-spacing: 0.16em;
}
#form-view .example span {
  font-size: 11px;
  color: #5e5c55;
}
#form-view .upload-zone {
  min-height: 180px;
  background: #e9e5dc;
  border-color: #9e9b93;
  border-radius: 0;
}
#form-view .upload-zone:hover {
  background: #e1ddd3;
  border-color: #171716;
}
#form-view .upload-icon {
  background: #171716;
  color: #f1eee6;
  border-radius: 0;
  width: 31px;
  height: 31px;
}
#form-view .upload-zone strong {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 9px;
}
#form-view .upload-zone small {
  text-transform: none;
  letter-spacing: 0;
  color: #7b7972;
  font-size: 10px;
}
#form-view .upload-item {
  border-radius: 0;
  border-color: #c7c2b7;
  background: #ebe7dd;
}
#form-view .upload-item img {
  border-radius: 0;
}
#form-view .reason-chips span {
  border-radius: 0;
  border-color: #b8b4aa;
  background: transparent;
}
#form-view .reason-chips input:checked + span {
  background: #171716;
  border-color: #171716;
  color: #f1eee6;
}
#form-view .final-note strong {
  font-family: "Cormorant Garamond", "Iowan Old Style", Baskerville, serif;
  font-size: 20px;
  font-weight: 500;
}
#form-view .final-note p {
  color: #74726b;
}
.reference-note {
  margin: 0 0 18px;
  padding: 0 2px;
  color: #6e6c65;
  font-size: 11px;
  line-height: 1.65;
}
.reference-note strong {
  color: #171716;
  font-weight: 700;
}
.blackwork-note {
  margin-top: 6px;
  border-top: 1px solid #aaa79e;
  border-bottom: 1px solid #aaa79e;
  padding: 17px 0;
  display: block;
}
.blackwork-note span {
  display: block;
  margin-bottom: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 8px;
  color: #77756e;
}
.blackwork-note strong {
  display: block;
  width: 100%;
  font-family:
    "Cormorant Garamond", "Iowan Old Style", Baskerville, "Times New Roman",
    serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
}
@media (max-width: 900px) {
  .client-topbar {
    height: 72px;
    padding: 0 22px;
  }
  #form-view .form-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 38px 20px 70px;
  }
  .client-rail {
    position: static;
    min-height: 0;
  }
  .client-heading h1 {
    font-size: 52px;
  }
  .client-heading .client-copy {
    max-width: 520px;
  }
  .hairline {
    margin: 25px 0 18px;
  }
  #form-view .stepper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 32px;
    border-top: 1px solid #292927;
  }
  #form-view .stepper li {
    min-width: 0;
    justify-content: center;
    padding: 11px 3px;
    border-right: 1px solid #292927;
  }
  #form-view .stepper li:last-child {
    border-right: 0;
  }
  #form-view .stepper li div {
    display: none;
  }
  #form-view .stepper li.active {
    padding-left: 3px;
    background: #f0ede5;
    color: #111;
  }
  #form-view .stepper li.active:before {
    display: none;
  }
  .client-signature {
    display: none;
  }
  #form-view .form-step {
    padding: 40px 34px;
    min-height: 500px;
  }
  #form-view .form-footer {
    padding: 17px 34px;
  }
}
@media (max-width: 560px) {
  .client-brand {
    gap: 10px;
  }
  .client-brand-mark {
    width: 12px;
    height: 19px;
  }
  .client-brand strong {
    font-size: 13px;
  }
  .client-brand small {
    font-size: 6px;
  }
  .client-exit {
    font-size: 8px;
  }
  .client-heading h1 {
    font-size: 48px;
  }
  #form-view .form-layout {
    padding: 30px 14px 55px;
  }
  #form-view .form-step {
    padding: 29px 21px;
    min-height: 520px;
  }
  #form-view .section-title {
    margin-bottom: 32px;
  }
  #form-view .section-title h2 {
    font-size: 35px;
  }
  #form-view .field-grid.two {
    grid-template-columns: 1fr;
  }
  #form-view .form-footer {
    padding: 14px 20px;
  }
  #form-view .form-footer #step-count {
    display: none;
  }
  #form-view .form-footer .primary {
    margin-left: auto;
  }
  #form-view .mapper-controls {
    display: grid;
  }
  #form-view .views {
    width: 100%;
  }
}

/* Project workflow — explicit check-off progression */
.kanban {
  grid-template-columns: repeat(7, minmax(270px, 1fr));
}
.column {
  min-height: 400px;
}
.column-head h2 {
  max-width: 190px;
}
.column-body {
  min-height: 340px;
}
.project-card {
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.project-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(29, 34, 31, 0.08);
}
dialog {
  width: min(760px, calc(100% - 28px));
}
.project-workflow {
  margin: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.project-history {
  margin: 24px 0;
  padding: 18px;
  background: #f5f3ec;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.project-history > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.project-history > div span {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-size: 9px;
}
.project-history > div small {
  color: var(--muted);
  font-size: 9px;
}
.project-history ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.project-history li {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 10px;
  align-items: start;
}
.project-history li > span {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--teal);
}
.project-history li strong,
.project-history li small {
  display: block;
}
.project-history li strong {
  font-size: 11px;
}
.project-history li small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}
.workflow-title {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 13px;
}
.workflow-title span {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-size: 9px;
}
.workflow-title strong {
  font-size: 12px;
}
.project-workflow ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 7px;
}
.project-workflow li > div,
.project-workflow li > button {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7f6f1;
  padding: 8px 11px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  color: var(--ink);
}
.project-workflow li > button {
  cursor: pointer;
}
.project-workflow li > button:hover {
  border-color: var(--teal);
  background: #f0f7f5;
}
.workflow-check {
  width: 24px;
  height: 24px;
  border: 1px solid #b9bbb4;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
}
.project-workflow li.done .workflow-check {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}
.project-workflow li.done > div {
  background: #fff;
}
.project-workflow li.next > button {
  border-color: #88ada7;
  box-shadow: 0 0 0 3px rgba(47, 113, 109, 0.08);
}
.project-workflow li.next .workflow-check {
  border: 2px solid var(--teal);
}
.project-workflow li.locked {
  opacity: 0.45;
}
.project-workflow strong,
.project-workflow small {
  display: block;
}
.project-workflow li strong {
  font-size: 12px;
}
.project-workflow li small {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}
.project-workflow em {
  font-style: normal;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  font-weight: 800;
  text-align: right;
}
.workflow-back {
  margin-top: 12px;
  border: 0;
  border-bottom: 1px solid #b8bbb5;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  padding: 4px 0;
}
@media (max-width: 560px) {
  dialog {
    padding: 22px 17px;
  }
  .workflow-title {
    display: grid;
    gap: 3px;
  }
  .project-workflow li > div,
  .project-workflow li > button {
    grid-template-columns: 28px 1fr;
  }
  .project-workflow em {
    grid-column: 2;
    text-align: left;
    margin-top: -5px;
  }
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Indicative scheduling preferences */
#form-view .availability-block {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid #aaa79e;
}
.availability-heading {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 22px;
}
.availability-heading > span {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 8px;
  color: #77756e;
}
.availability-heading p {
  margin: 0;
  color: #6f6d66;
  font-size: 11px;
  line-height: 1.65;
}
.availability-period,
.availability-days {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.availability-period legend,
.availability-days legend {
  width: 100%;
  margin-bottom: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 9px;
  font-weight: 650;
  color: #474640;
}
.availability-period label,
.availability-days label {
  display: block !important;
  position: relative;
  margin: 0 !important;
}
.availability-period input,
.availability-days input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.availability-period span,
.availability-days span {
  display: block;
  border: 1px solid #aaa79e;
  padding: 10px 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 8px;
  color: #4d4b45;
  cursor: pointer;
  pointer-events: none;
}
.availability-period input:checked + span,
.availability-days input:checked + span {
  background: #171716;
  border-color: #171716;
  color: #f3f0e8;
}
.availability-days span {
  min-width: 55px;
  text-align: center;
}

/* Client email preparation */
.project-mailer {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.mailer-heading {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  margin-bottom: 20px;
}
.mailer-heading > span {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-size: 9px;
  padding-top: 3px;
}
.mailer-heading strong {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 500;
}
.mailer-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.quote-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  padding: 16px;
  background: #f3f2ed;
  border-radius: 12px;
}
.quote-fields label {
  margin: 0;
  font-size: 10px;
  color: #555a55;
}
.quote-fields label.wide {
  grid-column: 1/-1;
}
.quote-fields input,
.quote-fields textarea {
  margin-top: 7px;
  background: white;
  font-size: 12px;
}
.quote-fields textarea {
  resize: vertical;
}
.deposit-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  align-items: center;
  margin: 12px 0 18px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.deposit-summary span {
  font-size: 11px;
  font-weight: 700;
}
.deposit-summary strong {
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 500;
}
.deposit-summary small {
  grid-column: 1/-1;
  color: var(--muted);
  font-size: 9px;
}
.email-list {
  display: grid;
  gap: 8px;
}
.email-template {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}
.email-number {
  font-family: Georgia, serif;
  color: var(--teal);
  font-size: 12px;
}
.email-template strong,
.email-template small {
  display: block;
}
.email-template strong {
  font-size: 12px;
}
.email-template small {
  font-size: 9px;
  color: var(--muted);
  margin-top: 2px;
}
.email-template button {
  padding: 8px 10px;
  font-size: 9px;
}
.email-template.is-sent {
  border-color: #9bbab3;
  background: #f7fbfa;
}
.email-sent-status,
.email-pending-status {
  display: block;
  margin-top: 5px;
  font-size: 8px;
  font-weight: 800;
}
.email-sent-status {
  color: #276d64;
}
.email-pending-status {
  color: #9a6a42;
}
.mailer-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}
.email-preview-dialog {
  width: min(92vw, 720px);
  padding: 0;
}
.email-preview-content {
  display: grid;
  gap: 18px;
  padding: 36px;
}
.email-preview-content h2 {
  margin: 0;
  padding-right: 42px;
  font-family: var(--serif);
  font-size: clamp(36px, 7vw, 54px);
  font-weight: 500;
  line-height: 0.95;
}
.email-preview-status {
  display: none;
  padding: 12px 14px;
  border-left: 3px solid #2f766d;
  background: #eef5f3;
  color: #245752;
  font-size: 11px;
  font-weight: 750;
}
.email-preview-status.visible {
  display: block;
}
.email-preview-status.warning {
  border-left-color: #d97617;
  background: #fff3e5;
  color: #7b410d;
}
.email-preview-meta {
  display: grid;
  gap: 8px;
  margin: 0;
}
.email-preview-meta > div {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.email-preview-meta dt {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 8px;
}
.email-preview-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 11px;
  font-weight: 750;
}
.email-preview-body {
  max-height: 38vh;
  overflow: auto;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7f6f2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  font-size: 12px;
  line-height: 1.6;
}
.email-preview-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.email-preview-actions button,
.email-preview-confirm {
  min-height: 48px;
}
.email-preview-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.email-send-confirmation {
  display: grid;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.email-send-confirmation p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.email-preview-confirm {
  border: 1px solid #9bbab3;
  border-radius: 9px;
  background: #eef5f3;
  color: #245752;
  font-weight: 800;
}
@media (max-width: 700px) {
  .email-preview-content {
    padding: 30px 20px 22px;
  }
  .email-preview-meta > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .email-preview-actions {
    grid-template-columns: 1fr;
  }
  .email-template {
    grid-template-columns: 26px 1fr;
  }
  .email-template .preview-email {
    grid-column: 1 / -1;
    width: 100%;
  }
}
.artist-notes {
  margin: 20px 0 4px;
  padding: 15px 16px;
  background: #eef3f1;
  border: 1px solid #cfded9;
  border-radius: 10px;
}
.artist-notes > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 9px;
}
.artist-notes span,
.artist-notes small {
  display: block;
}
.artist-notes span {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #245752;
  font-size: 9px;
  font-weight: 800;
}
.artist-notes small {
  color: var(--muted);
  font-size: 9px;
}
.artist-notes textarea {
  min-height: 90px;
  background: #fff;
  font-size: 12px;
  resize: vertical;
}
@media (max-width: 560px) {
  .availability-heading,
  .mailer-heading {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .availability-days {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .availability-days legend {
    grid-column: 1/-1;
  }
  .availability-days span {
    min-width: 0;
    padding: 10px 4px;
  }
  .quote-fields {
    grid-template-columns: 1fr;
  }
  .quote-fields label.wide {
    grid-column: auto;
  }
  .email-template {
    grid-template-columns: 28px 1fr;
  }
  .email-template button {
    grid-column: 2;
    width: 100%;
  }
  .email-template .primary {
    margin-left: 0;
  }
  .email-template .confirm-email-sent {
    grid-column: 2;
    justify-self: stretch;
  }
  .deposit-summary {
    grid-template-columns: 1fr auto;
  }
  .artist-notes > div {
    display: grid;
    gap: 3px;
  }
}

.additional-note {
  margin: 30px 0 0 !important;
  padding-top: 26px;
  border-top: 1px solid #aaa79e;
}
.additional-note small {
  text-transform: none;
  letter-spacing: 0;
  color: #77756e;
  font-weight: 400;
}
.additional-note textarea {
  margin-top: 2px;
  min-height: 150px !important;
}
.client-extra-note {
  margin: 20px 0;
  padding: 16px 18px;
  border-left: 3px solid var(--teal);
  background: #f3f2ed;
}
.client-extra-note span {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-size: 9px;
}
.client-extra-note p {
  margin: 8px 0 0;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.6;
}

/* Client directory and private appointment ratings */
.copy-all-emails {
  display: flex;
  align-items: center;
  gap: 9px;
}
.copy-all-emails span {
  font-size: 17px;
  line-height: 1;
}
.clients-toolbar {
  gap: 20px;
}
.clients-toolbar > p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: right;
}
.client-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.client-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 5px 18px rgba(25, 31, 28, 0.04);
}
.client-card-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}
.client-card-head h2 {
  display: inline;
  margin: 0;
  font-family: Georgia, serif;
  font-size: 23px;
  font-weight: 500;
}
.client-score {
  display: inline-block;
  margin-right: 9px;
  background: #172c28;
  color: #eff9f4;
  border-radius: 99px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 800;
  vertical-align: 3px;
}
.project-total {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}
.client-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 13px;
  margin: 13px 0;
}
.client-contact a,
.client-contact span {
  color: #4d5650;
  font-size: 11px;
  text-decoration: none;
}
.client-contact a {
  font-weight: 750;
}
.client-projects {
  display: grid;
  gap: 7px;
}
.client-project-link {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid #deddd6;
  border-radius: 9px;
  background: #f5f4ef;
  padding: 10px 11px;
  text-align: left;
  color: var(--ink);
}
.client-project-link:hover {
  border-color: var(--teal);
  background: #edf4f2;
}
.client-project-link span {
  font-size: 12px;
}
.client-project-link small {
  color: var(--muted);
  font-size: 9px;
  text-align: right;
}
.client-project-link.status-refuse {
  border-color: #e2cbc8;
  background: #f7ecea;
}
.empty-clients {
  grid-column: 1/-1;
  padding: 36px;
  border: 1px dashed #c8c8c1;
  border-radius: 14px;
  text-align: center;
  color: var(--muted);
}
.card-topline {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.card-rating,
.rating-alert,
.reminder-alert,
.followup-alert,
.unread-alert {
  border-radius: 99px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.06em;
}
.card-rating {
  background: #244d3b;
  color: #fff;
}
.rating-alert {
  background: #310604;
  color: #fff;
}
.notification-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.notification-control > span:first-child {
  color: #8b8d88;
  font-size: 12px;
}
.notification-control.enabled > span:first-child {
  color: #e36b17;
  text-shadow: 0 0 10px rgba(227, 107, 23, 0.55);
}
.notification-count {
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  background: #df332b;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
}
.notification-count.hidden {
  display: none;
}
.reminder-alert {
  background: #e36b17;
  color: #fff;
}
.followup-alert {
  background: #b92f27;
  color: #fff;
}
.unread-alert {
  background: #df332b;
  color: #fff;
}
.project-card.unread-project {
  box-shadow: inset 4px 0 0 #df332b;
}
.project-card.follow-up-project {
  border-color: #c6655e;
  box-shadow: inset 4px 0 0 #b92f27;
}
.project-follow-up {
  display: grid;
  gap: 5px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid #d59a95;
  border-left: 5px solid #b92f27;
  border-radius: 10px;
  background: #fff0ee;
}
.project-follow-up span {
  color: #8f3029;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.project-follow-up strong {
  font-size: 14px;
}
.project-follow-up small {
  color: #795a56;
}
.last-action {
  margin: 8px 0 10px;
  padding: 7px 8px;
  border-left: 3px solid #df332b;
  background: #fff0ee;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.last-action span {
  color: #c72720;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 8px;
  font-weight: 850;
}
.last-action strong {
  color: #8e1c17;
  font-size: 9px;
  text-align: right;
}
.project-card.needs-rating {
  background: #ff493f;
  border-color: #bd170f;
  color: #250504;
  box-shadow: 0 7px 20px rgba(181, 23, 14, 0.24);
}
.project-card.needs-rating .date,
.project-card.needs-rating p,
.project-card.needs-rating .card-client span {
  color: #450b08;
}
.project-card.needs-rating .pill {
  background: rgba(255, 255, 255, 0.66);
  color: #32100d;
}
.project-card.needs-rating .card-client {
  border-color: rgba(58, 8, 5, 0.22);
}
.project-card.needs-rating .last-action {
  background: #fff;
  border-left-color: #5c0804;
}
.project-card.rated-project {
  background: #d9eadf;
  border-color: #70977d;
  box-shadow: 0 5px 14px rgba(54, 98, 67, 0.14);
}
.appointment-rating {
  margin: 18px 0 22px;
  padding: 15px 16px;
  border-radius: 11px;
}
.appointment-rating.needs-rating {
  background: #ff493f;
  border: 1px solid #bd170f;
  color: #250504;
}
.appointment-rating.is-rated {
  background: #e0efe5;
  border: 1px solid #8aaf95;
}
.appointment-rating > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.appointment-rating > div:first-child span {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 9px;
  font-weight: 850;
}
.appointment-rating > div:first-child strong {
  font-family: Georgia, serif;
  font-size: 23px;
  font-weight: 500;
}
.appointment-rating p {
  margin: 7px 0 12px;
  font-size: 10px;
  line-height: 1.5;
}
.rating-stars {
  width: min(100%, 300px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.rating-star {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  height: auto;
  border: 1px solid rgba(20, 20, 18, 0.25);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.55);
  color: #8c8b84;
  font-size: 17px;
  padding: 0;
  display: grid;
  place-items: center;
}
.rating-star.active {
  background: #171716;
  border-color: #171716;
  color: #f4c94f;
}
.rating-star:hover {
  transform: translateY(-1px);
}
.workflow-secondary {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
.workflow-secondary button {
  border: 1px solid #d5a7a2;
  border-radius: 8px;
  background: #fff4f2;
  color: #8a3029;
  padding: 8px 11px;
  font-size: 10px;
  font-weight: 750;
}
.rejected-row .workflow-check {
  background: #a13f37;
  border-color: #a13f37;
  color: white;
}
.rejected-row > div {
  background: #fff1ef !important;
  border-color: #dfb4af !important;
}
@media (max-width: 900px) {
  .clients-toolbar {
    align-items: flex-start;
  }
  .client-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .sidebar {
    gap: 5px;
  }
  .brand div {
    display: none;
  }
  .nav-btn {
    font-size: 10px;
    padding: 8px 7px;
  }
  .clients-toolbar {
    display: grid;
  }
  .clients-toolbar > p {
    text-align: left;
  }
  .client-card {
    padding: 14px;
  }
  .client-card-head {
    display: grid;
    gap: 8px;
  }
  .client-score {
    display: block;
    width: max-content;
    margin: 0 0 7px;
  }
  .rating-stars {
    width: min(100%, 240px);
    gap: 4px;
  }
  .rating-star {
    font-size: 14px;
  }
  .appointment-rating {
    padding: 14px 12px;
  }
  .appointment-rating > div:first-child {
    display: grid;
  }
  .copy-all-emails {
    white-space: normal !important;
  }
  .last-action {
    display: grid;
  }
  .last-action strong {
    text-align: left;
  }
}

/* Clickable project-stage navigation */
.stats .stat-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ink);
  text-align: left;
}
.stats .stat-card:hover,
.stats .stat-card.active {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(47, 113, 109, 0.1);
}
.stage-filters {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 0 1px 13px;
  margin-bottom: 3px;
  scrollbar-width: thin;
}
.stage-filters button {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--white);
  color: #555c57;
  padding: 8px 11px;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}
.stage-filters button > span {
  color: var(--teal);
  font-size: 12px;
}
.stage-filters button strong {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ecece6;
  font-family: inherit;
  font-size: 9px;
  font-weight: 800;
}
.stage-filters button:hover,
.stage-filters button.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.stage-filters button.active > span {
  color: #9bc4bd;
}
.stage-filters button.active strong {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.kanban.filtered {
  grid-template-columns: minmax(280px, 640px);
}
.stored-references {
  margin: 28px 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f6f5ef;
}
.stored-references > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 800;
}
.stored-references > div:first-child small {
  color: var(--teal);
}
.stored-reference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.stored-reference {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.stored-reference img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: contain;
  background: #ecebe5;
}
.stored-reference > div {
  padding: 13px;
}
.stored-reference strong,
.stored-reference small {
  display: block;
}
.stored-reference small {
  margin-top: 4px;
  color: #737770;
}
.stored-reference p {
  margin: 10px 0 0;
  line-height: 1.45;
}
.submission-success {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 46px;
  text-align: center;
}
.submission-success > span {
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 800;
}
.submission-success h2 {
  margin: 18px 0;
  font-family: var(--serif);
  font-size: clamp(34px, 6vw, 58px);
  font-weight: 500;
  line-height: 1.05;
}
.submission-success p {
  max-width: 560px;
  margin: 0 auto;
  color: #676b66;
  font-size: 17px;
  line-height: 1.65;
}
.load-error {
  max-width: 680px;
  margin: 12vh auto;
  padding: 32px;
}
@media (max-width: 900px) {
  .kanban,
  .kanban.filtered {
    grid-template-columns: 1fr;
    overflow: visible;
    scroll-snap-type: none;
  }
  .column {
    min-height: 0;
  }
  .column-body {
    min-height: 0;
  }
  .stage-filters {
    margin-left: -2px;
    margin-right: -2px;
  }
}
@media (max-width: 560px) {
  .stored-reference-grid {
    grid-template-columns: 1fr;
  }
  .stored-reference img {
    height: 230px;
  }
  .submission-success {
    padding: 54px 22px;
  }
  .stats .stat-card {
    padding: 13px;
  }
  .board-stats span {
    font-size: 11px;
  }
  .stage-filters {
    padding-bottom: 11px;
  }
  .stage-filters button {
    padding: 8px 10px;
  }
}
.form-trap {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* Mobile admin: keep the navigation and every panel inside the viewport. */
@media (max-width: 560px) {
  .admin-mode .app-shell,
  .admin-mode main,
  .admin-mode .view,
  .admin-mode .page-header,
  .admin-mode .header-actions {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .admin-mode .sidebar {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    width: 100%;
    min-width: 0;
    gap: 5px;
    padding: 10px 8px;
  }

  .admin-mode .brand {
    min-width: 0;
    margin: 0;
  }

  .admin-mode .brand-mark {
    width: 36px;
    height: 36px;
  }

  .admin-mode .sidebar nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-width: 0;
    gap: 2px;
  }

  .admin-mode .nav-btn {
    min-width: 0;
    justify-content: center;
    padding: 8px 2px;
    border-radius: 8px;
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .admin-mode .lock-admin {
    justify-self: end;
    margin: 0;
  }

  .admin-mode .view {
    padding-right: 16px;
    padding-left: 16px;
  }

  .admin-mode .page-header > div:first-child,
  .admin-mode .page-header h1,
  .admin-mode .page-header p {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .admin-mode .header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .admin-mode .header-actions > button {
    width: 100%;
    min-width: 0;
    margin: 0;
    white-space: normal;
  }

  .admin-mode #push-notifications,
  .admin-mode .export-backup,
  .admin-mode .run-diagnostics,
  .admin-mode [data-open-form] {
    grid-column: 1 / -1;
  }
}