:root {font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#233247; background:#f4f6f9; font-synthesis:none}
* {box-sizing:border-box}
body {margin:0;min-height:100vh;display:flex;flex-direction:column}
a {color:#2166a8}
button,input {font:inherit}
button {cursor:pointer}
.shell {width:min(100% - 40px,1120px);margin:0 auto}
.site-header {background:#fff;border-bottom:1px solid #e1e7ed}
.header-inner {display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.brand {text-decoration:none;color:#203349;font-size:20px;font-weight:800;white-space:nowrap}
.brand-mark {display:inline-grid;place-items:center;background:#287f6f;color:#fff;border-radius:9px;padding:8px;font-size:14px;margin-right:5px}
.brand-ai {color:#287f6f}
.header-actions {display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.account-name {font-size:14px;color:#5a6a7e}
.nav-link {font-size:14px;color:#45627d;text-decoration:none}
.nav-link:hover,.text-link:hover {text-decoration:underline}
.logout-link {background:none;border:0;padding:0}
.inline-form {margin:0}
main.shell {flex:1;padding-top:48px;padding-bottom:52px}
.site-footer {width:100%;padding:18px 0 30px;color:#7b8998;font-size:12px}
.page-heading {margin-bottom:28px}
h1 {font-size:clamp(25px,3vw,34px);line-height:1.2;margin:8px 0 12px}
h2 {font-size:20px;margin:0 0 10px}
p {line-height:1.6;margin:8px 0 0}
.subtle {color:#67788a}
.eyebrow {font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#287f6f}
.panel,.tile {background:#fff;border:1px solid #e2e7ec;border-radius:16px;box-shadow:0 4px 18px #22314908}
.panel {padding:32px}
.auth-panel {max-width:500px;margin:12px auto}
.tiles {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:25px}
.tile {color:#233247;text-decoration:none;padding:28px;transition:border-color .2s,transform .2s}
.tile:hover {border-color:#90bab0;transform:translateY(-2px)}
.tile p {color:#67788a;min-height:52px}
.tile-icon {font-size:29px;display:block;color:#287f6f;margin-bottom:18px}
.tile-more {display:block;margin-top:23px;font-weight:700;color:#287f6f;font-size:14px}
.notice {border-radius:10px;padding:14px 16px;font-size:14px;line-height:1.6;margin:18px 0}
.notice.info {background:#eaf3f3;color:#235b60}
.notice.error {background:#fff0ef;color:#9b3934}
.form-stack {display:grid;gap:18px;margin-top:24px}
.form-stack label {display:block;font-weight:650;font-size:14px;margin-bottom:8px}
.form-stack input {width:100%;padding:12px;border:1px solid #b9c8d6;border-radius:8px;background:#fff;color:#233247}
.form-stack input:focus {outline:2px solid #287f6f;outline-offset:1px}
.button {display:inline-block;text-align:center;padding:12px 22px;border:0;border-radius:9px;text-decoration:none;font-weight:700}
.button.primary {background:#287f6f;color:#fff}
.button.primary:hover {background:#216e61}
.field-error {color:#a53636;font-size:13px}
.field-error ul {padding-left:20px}
.form-stack small {display:block;margin-top:7px;font-size:12px;line-height:1.4}
.breadcrumbs {font-size:14px;margin-bottom:19px;color:#8290a0}
.text-link {display:inline-block;margin-top:15px;text-decoration:none;font-weight:650}
@media(max-width:620px){.shell {width:min(100% - 28px,1120px)}.header-inner {align-items:flex-start;flex-direction:column;padding:15px 0;gap:12px}.header-actions {width:100%;gap:15px}.account-name {margin-right:auto}.panel {padding:22px}main.shell {padding-top:30px}.auth-panel {margin:0}}
/* Stage 2: staff CRM */
.crm-menu {display:flex;flex-wrap:wrap;gap:10px;margin:-16px 0 32px}
.crm-menu a {background:#fff;border:1px solid #d5e2e3;border-radius:10px;color:#286e62;text-decoration:none;font-size:14px;font-weight:650;padding:11px 14px}
.crm-menu a:hover {background:#edf7f4}
.narrower {max-width:740px}
.section-spaced {margin-top:22px}
.section-title {margin-top:26px}
.section-bar {display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px;flex-wrap:wrap}
.section-bar h1,.section-bar h2 {margin:0}
.toolbar {display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.toolbar label {display:grid;gap:6px;font-weight:650;font-size:13px}
.field-control,.toolbar input,.toolbar select,.form-stack select,.form-stack textarea,.form-stack input[type=file] {width:100%;padding:11px;border:1px solid #b9c8d6;border-radius:8px;background:#fff;color:#233247;font:inherit}
.field-control:focus {outline:2px solid #287f6f;outline-offset:1px}
.form-stack textarea {resize:vertical}
.form-stack.compact {gap:12px;margin-top:14px}
.form-stack.compact label {font-size:13px}
.form-stack.compact input,.form-stack.compact select {padding:9px}
.crm-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.table-scroll {max-width:100%;overflow-x:auto}
.data-table {width:100%;border-collapse:collapse;text-align:left;font-size:14px}
.data-table th {font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:#758496;background:#f5f7f9}
.data-table th,.data-table td {padding:13px 12px;border-bottom:1px solid #e3ebef;vertical-align:top}
.data-table td small {display:block;margin-top:5px;color:#8091a0;font-size:12px}
.data-table tr:last-child td {border-bottom:0}
.photo-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;margin:15px 0}
.photo-grid a {background:#f5f7f9;display:block;padding:8px;border-radius:10px;text-decoration:none}
.photo-grid img {width:100%;height:130px;object-fit:cover;border-radius:6px}
.photo-grid small {display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px}
.upload-row {margin-top:14px}
.activity-feed {display:grid;gap:10px;margin-top:18px}
.activity-line {padding-left:14px;border-left:3px solid #d5e2e3}
.activity-line strong {font-size:14px}
.activity-line small {display:block;font-size:12px;margin-top:5px;color:#8c98a5}
@media(max-width:740px){.crm-grid {grid-template-columns:1fr}.data-table {min-width:560px}.panel {padding:20px}.crm-menu {margin-top:-25px}}

/* Stage 2.1: instant segmented choices, conditional contact and photo uploader */
.choice-fieldset {border:0;margin:0;padding:0;min-width:0}
.choice-fieldset legend {font-size:14px;font-weight:700;margin-bottom:8px}
.pill-options > div {display:flex;flex-wrap:wrap;gap:9px}
.pill-options label {display:inline-flex!important;align-items:center;gap:7px;border:1px solid #d1dde3;background:#f5f8fa;border-radius:11px;padding:10px 15px;cursor:pointer;margin:0!important;font-weight:650}
.pill-options label:has(input:checked) {border-color:#287f6f;background:#eaf5f0;color:#1b6a58;box-shadow:0 0 0 1px #287f6f}
.pill-options input[type=radio] {width:16px!important;height:16px;padding:0!important;accent-color:#287f6f;flex:0 0 auto}
.pill-options label:focus-within {outline:2px solid #287f6f;outline-offset:2px}
.form-stack h2 {margin-top:10px;margin-bottom:-5px}
.client-suggestions {border:1px solid #88b2a8;border-radius:12px;padding:15px;background:#f0f8f5;font-size:14px}
.client-suggestions p {font-size:13px;margin-top:5px}
.candidate-list {margin-top:10px;display:grid;gap:8px}
.candidate {display:flex!important;align-items:center;gap:9px;padding:9px 10px;background:#fff;border:1px solid #d4e4dc;border-radius:9px;margin:0!important}
.candidate input {width:16px!important;margin:0!important;accent-color:#287f6f}
.candidate span {flex:1}
.candidate a {font-weight:500;white-space:nowrap;font-size:12px}
.photo-uploader {border:1px solid #d7e5e3;border-radius:14px;background:#fafdfc;padding:14px}
.photo-dropzone {display:flex!important;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:pointer;padding:22px 12px;border:2px dashed #9cc7be;border-radius:12px;background:#f0f8f5;color:#276f5e;margin:0!important;transition:background .12s,border .12s}
.photo-dropzone.drag-over,.photo-dropzone:hover {background:#def2e9;border-color:#287f6f}
.photo-dropzone span {font-size:13px}
.photo-upload-icon {display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#287f6f;color:#fff;font-size:30px!important;line-height:1}
.visually-hidden-file {position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip-path:inset(50%);opacity:0;padding:0!important}
.visually-hidden-file:focus-visible + .photo-status {outline:2px solid #287f6f}
.photo-status {font-size:13px;padding:8px 0;margin:5px 0 0}
.upload-preview {display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:10px}
.upload-thumb {position:relative;min-width:0;background:#fff;border:1px solid #dde9e3;border-radius:9px;padding:6px}
.upload-thumb img {width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:5px;display:block}
.upload-thumb span {display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:7px 0 2px;color:#506473}
.upload-thumb .remove-photo {position:absolute;top:7px;right:7px;border:0;border-radius:50%;background:#263949dc;color:#fff;font-size:19px;width:27px;height:27px;line-height:1}
@media(max-width:500px){.pill-options label {padding:9px 10px}.upload-preview {grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Explicit form validation feedback (native invalid controls do not submit HTTP). */
.form-error-summary[hidden] {display:none}
.form-error-summary {margin:0 0 18px}
.form-error-summary ul {padding-left:20px;margin:8px 0}
.form-error-summary a {color:inherit;text-decoration:underline}
.form-error-summary p {margin-top:8px}
.form-stack [aria-invalid="true"] {border-color:#b73f39;box-shadow:0 0 0 1px #b73f39}

/* CRM: photo-exception control and explanatory text */
.photo-exception {padding:14px 16px;border:1px solid #d6e4e0;border-radius:12px;background:#f4f9f7}
.form-stack label.check-option {display:flex;align-items:center;gap:11px;margin:0;cursor:pointer}
.form-stack .check-option input[type=checkbox] {width:18px;height:18px;flex:none;accent-color:#287f6f;padding:0}
.photo-exception small {padding-left:29px}
#photo-upload-section[hidden] {display:none!important}

/* Stage 3: manager workspace, AI draft forms and optional questionnaire */
.crm-option-group {border:1px solid #d9e6e3;border-radius:12px;padding:14px 16px;background:#f6faf9;display:grid;gap:12px}
.crm-option-group label.check-option {display:flex;align-items:center;gap:10px;margin:0;font-weight:600;cursor:pointer}
.crm-option-group input[type=checkbox] {width:18px;height:18px;flex:0 0 auto;padding:0;accent-color:#287f6f}
.crm-details {border:1px solid #d7e2e6;border-radius:12px;padding:14px 18px;display:grid;gap:12px}
.crm-details summary {cursor:pointer;font-weight:700;color:#21695e}
.crm-details[open] {display:grid}
.crm-grid-form {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.crm-flags {display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.crm-flag {display:inline-block;background:#f0f3f6;color:#728091;border-radius:25px;font-size:13px;font-weight:700;padding:8px 13px}
.crm-flag.is-active {background:#e3f4e9;color:#246a4c}
.crm-tools-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
.crm-tool-card {display:grid;gap:10px;padding:18px;border-radius:12px;background:#f7faf9;border:1px solid #cbded8;text-decoration:none;color:#23594f}
.crm-tool-card:hover {background:#e8f5ef;border-color:#287f6f}
.crm-tool-card strong {font-size:16px}
.crm-tool-card span {font-size:13px;color:#718295;line-height:1.5}
.crm-task {padding:13px 0;border-bottom:1px solid #e7edf0}
.crm-task small,.crm-draft small {display:block;font-size:12px;color:#84919e;margin:6px 0}
.crm-task.is-overdue {border-left:3px solid #b14c3b;padding-left:12px}
.crm-task .button {font-size:12px;padding:7px 12px;border:1px solid #c5d9d1;background:#eef7f2;color:#287f6f}
.crm-draft {padding:15px 0;border-bottom:1px solid #e1e9ed}
.crm-draft dl {display:grid;grid-template-columns:120px 1fr;gap:6px;margin:10px 0;overflow-wrap:anywhere;font-size:13px}
.crm-draft dt {color:#728295}.crm-draft dd {margin:0}
@media(max-width:740px){.crm-grid-form,.crm-tools-grid {grid-template-columns:1fr}}

.crm-mini-badge{display:inline-block;margin:2px 3px 2px 0;background:#e5f3ed;border-radius:6px;color:#26735b;padding:4px 7px;font-size:11px;font-weight:700}

/* Stage 4: fabric catalog */

.fabric-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:16px;margin:25px 0}
.fabric-card{display:block;border:1px solid #dce6e8;border-radius:14px;background:#fff;color:inherit;text-decoration:none;overflow:hidden}
.fabric-card:hover{box-shadow:0 6px 22px #1c4e4220;border-color:#87baa9}
.fabric-card>img,.fabric-placeholder{width:100%;height:200px;object-fit:cover;background:#f0f3f1}
.fabric-placeholder{display:grid;place-items:center;color:#82928d;font-size:13px}
.fabric-card-body{display:grid;gap:6px;padding:13px}.fabric-card-body small,.fabric-photo small{color:#778793}
.fabric-color{display:inline-block;width:22px;height:22px;vertical-align:middle;border:1px solid #bbb;border-radius:5px}
.color-chip{display:flex;align-items:center;gap:7px;font-size:12px}.color-chip span{width:15px;height:15px;border-radius:50%;border:1px solid #ddd}
.fabric-image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:16px;margin-top:16px}
.fabric-photo{border:1px solid #dce6e8;border-radius:12px;padding:12px;display:grid;gap:9px;align-content:start;word-break:break-word}
.fabric-photo>img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}.fabric-photo a{font-size:13px}
.fabric-palette{display:flex;gap:6px}.fabric-palette span{width:32px;height:32px;border:1px solid #ddd;border-radius:6px}
.fabric-actions{display:flex;gap:7px;flex-wrap:wrap}.fabric-actions .button{font-size:12px;padding:9px}
.fabric-crop-frame{position:relative;touch-action:none;width:min(100%,640px);margin:18px 0;line-height:0}
.fabric-crop-frame img{display:block;width:100%;height:auto}
.fabric-crop-handle{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;border:3px solid white;background:#116d60;box-shadow:0 0 0 1px #116d60;cursor:grab;touch-action:none}

/* Fabric catalog: reviewed color panels and accessible confirmation. */
.fabric-confirmed-color{display:flex;align-items:center;gap:13px;padding:10px 0;border-bottom:1px solid #e5ebee}
.fabric-confirmed-color>div{display:grid;gap:3px}.fabric-confirmed-color span:not(.fabric-color-large){color:#526377;font-size:13px}
.fabric-confirmed-color small{color:#667789;font-size:12px}
.fabric-color-large{width:46px;height:46px;flex:none;border-radius:9px;border:1px solid #afb9c2;display:inline-block;background:#e9eef0}
.fabric-properties{display:grid;grid-template-columns:minmax(100px,45%) 1fr;gap:9px 14px;font-size:14px}
.fabric-properties dt{color:#607287}.fabric-properties dd{margin:0;font-weight:600}
.fabric-color-editor{margin:20px 0 0;padding:16px;border:1px solid #d9e6e3;border-radius:12px;background:#fafcfb}
.fabric-color-editor .form-stack{margin-top:10px}.fabric-color-editor h3{margin:0}
.fabric-color-preview{display:flex;gap:12px;align-items:center}.fabric-color-preview small{color:#647687}
.fabric-status-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.fabric-danger-zone{border-color:#e7bab5;background:#fffafa}
.fabric-danger-button,.fabric-danger-link{background:#a73734!important;color:#fff!important}
.fabric-danger-button:hover,.fabric-danger-link:hover{background:#802723!important}
.fabric-dialog{border:1px solid #b6c7cf;border-radius:15px;padding:25px;width:min(92vw,480px);box-shadow:0 14px 55px #132b4159;color:#233247}
.fabric-dialog::backdrop{background:#0c1b29a1}.fabric-dialog-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:24px}
.fabric-dialog-buttons .button{cursor:pointer}.fabric-status-actions .button:disabled,[data-color-save]:disabled{opacity:.6;cursor:not-allowed}
@media(max-width:500px){.fabric-dialog{padding:18px}.fabric-color-editor{padding:12px}.fabric-dialog-buttons .button{flex:1}}

/* v0.5.0.4: progressive-disclosure color editing, low-noise live feedback. */
.fabric-additional-color {margin-top:18px}
.fabric-additional-color>summary {display:list-item;cursor:pointer;color:#236d60;font-weight:750;border:1px solid #c6ded7;background:#f1f9f6;padding:12px 16px;border-radius:10px}
.fabric-additional-color>summary:hover {background:#e5f4ed}
.fabric-additional-color[open]>summary {border-radius:10px 10px 0 0}
.fabric-additional-color .fabric-color-editor {margin-top:0;border-radius:0 0 12px 12px}
.fabric-refresh-status {font-size:12px;margin-top:14px;min-height:1.5em}
.fabric-photo:focus-within {outline:2px solid #287f6f;outline-offset:2px}
.lead-source-field {background:#f6faf8;border:1px solid #d5e6df;border-radius:12px;padding:13px 16px}
:is(button, a, input, select, textarea, summary):focus-visible {outline:3px solid #287f6f;outline-offset:2px}
@media (prefers-reduced-motion: reduce) {*, *::before, *::after {scroll-behavior:auto!important;transition-duration:0.01ms!important}}

/* v0.5.0.5: in-place manager and workshop action dialog */
.crm-action-dialog{border:1px solid #c5d8d5;border-radius:16px;padding:26px;width:min(94vw,620px);max-height:min(88vh,850px);overflow:auto;color:#233247;box-shadow:0 20px 70px #172e3d52}
.crm-action-dialog::backdrop{background:#102a3bae}
.crm-action-head{display:flex;justify-content:space-between;align-items:start;gap:20px}.crm-action-head h2{margin:0}.crm-action-head p{margin:5px 0 0}
.crm-action-close{border:0;background:#edf2f3;border-radius:50%;font-size:25px;width:38px;height:38px;flex:none;color:#233247}
.crm-action-switch{display:grid;grid-template-columns:1fr 1fr;background:#edf4f3;border-radius:12px;padding:4px;gap:4px;margin:19px 0}
.crm-action-switch button{font-size:14px;padding:11px;border:0;background:transparent;color:#3d5c60;border-radius:9px;font-weight:650}
.crm-action-switch button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 7px #182f3a18;color:#236b5e}
.crm-action-dialog [data-action-panel][hidden]{display:none}
.crm-action-dialog .form-stack{margin-top:13px;gap:12px}
.crm-action-dialog .form-stack label{margin-bottom:5px}
.crm-action-dialog .form-stack input,.crm-action-dialog .form-stack select,.crm-action-dialog .form-stack textarea{max-width:100%}
.crm-action-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
@media(max-width:530px){.crm-action-dialog{padding:16px}.crm-action-switch button{font-size:12px;padding:9px 5px}.crm-action-buttons{flex-direction:column-reverse}.crm-action-buttons button{width:100%}}