@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap');

:root { --brand:#0f766e; --accent:#f59e0b; --ink:#13221f; --muted:#64748b; --line:#dce5e2; --paper:#fff; --canvas:#f5f8f7; --danger:#c2410c; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--canvas); font-family:"DM Sans",system-ui,sans-serif; font-size:15px; line-height:1.45; }
h1,h2,h3 { margin:0; font-family:Outfit,"DM Sans",sans-serif; line-height:1.1; letter-spacing:-.025em; }
h1 { font-size:clamp(28px,3.4vw,40px); } h2 { font-size:22px; } h3 { font-size:17px; }
p { color:var(--muted); } a { color:var(--brand); text-decoration:none; } a:hover { text-decoration:underline; }
small { display:block; color:var(--muted); font-size:12px; margin-top:2px; } code { font-size:.9em; background:#ecf1ef; padding:2px 5px; border-radius:4px; }
.topbar { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:10px 28px; background:#10251f; color:#fff; position:sticky; top:0; z-index:5; }
.brand { color:#fff; display:flex; align-items:center; gap:10px; font-family:Outfit,sans-serif; font-size:20px; font-weight:600; text-decoration:none; }.brand:hover { text-decoration:none; }.brand img { width:36px; height:36px; border-radius:8px; object-fit:contain; background:#fff; }.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; color:#10251f; background:var(--accent); font-size:26px; line-height:1; }
.topbar-account { display:flex; align-items:center; gap:13px; font-size:13px; }.topbar-account a,.topbar-account .link-button { color:#d7e6e1; }
.role-pill { display:inline-flex; align-items:center; padding:3px 8px; border-radius:100px; color:#0c2d25; background:#d9eee6; font-size:11px; font-weight:700; white-space:nowrap; }.link-button { border:0; padding:0; background:none; font:inherit; cursor:pointer; color:var(--brand); }.link-button:hover { text-decoration:underline; }
.shell { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:calc(100vh - 64px); }.sidebar { padding:25px 17px; background:#eaf0ed; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:30px; }.sidebar nav { display:flex; flex-direction:column; gap:3px; }.sidebar nav a { padding:10px 12px; color:#34524a; border-radius:8px; font-weight:600; text-decoration:none; }.sidebar nav a:hover { background:#dce8e3; color:var(--brand); }.sidebar-note { margin-top:auto; color:#71847e; font-size:12px; line-height:1.5; }
.main { width:min(1200px,100%); padding:36px clamp(18px,4vw,54px) 64px; }.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:22px; margin:0 0 28px; }.page-head p { margin:7px 0 0; max-width:660px; }.eyebrow { display:block; margin:0 0 7px; color:var(--brand); font-size:11px; font-weight:700; letter-spacing:.12em; }.back-link { display:inline-block; margin-bottom:12px; font-size:13px; font-weight:700; }.mobile-nav { display:none; }
.panel { padding:24px; border:1px solid var(--line); border-radius:14px; background:var(--paper); box-shadow:0 1px 1px rgba(15,45,37,.025); }.panel + .panel { margin-top:20px; }.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }.panel-heading h2 { font-size:20px; }.panel-heading p { margin:4px 0 0; }.compact-panel { padding:14px 20px; margin-top:20px; }.form-card h2 { margin-bottom:20px; }.narrow { max-width:640px; }.action-panel { margin-top:20px; }
.stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0 0 24px; }.stat-card { padding:18px; border:1px solid #cfe3dd; border-radius:13px; background:#e9f6f2; }.stat-card.amber { border-color:#f1dfb6; background:#fff8e8; }.stat-card.blue { border-color:#d5e5f5; background:#f1f8ff; }.stat-card.green { border-color:#cce8d6; background:#eff9f2; }.stat-card span { color:#55726a; font-size:12px; font-weight:700; }.stat-card strong { display:block; margin-top:5px; font:700 33px/1 Outfit,sans-serif; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:38px; padding:8px 14px; border:1px solid transparent; border-radius:8px; background:#e7ecea; color:#203a33; font:700 13px/1 "DM Sans",sans-serif; cursor:pointer; text-decoration:none; transition:.15s ease; }.button:hover { filter:brightness(.97); text-decoration:none; }.button-primary { color:#fff; border-color:var(--brand); background:var(--brand); }.button-ghost { border-color:#c8d6d1; background:#fff; color:#31554b; }.button-small { min-height:30px; padding:6px 9px; font-size:12px; }.button-block { width:100%; }.button:disabled { cursor:not-allowed; opacity:.5; }
.alert { padding:12px 15px; margin:0 0 18px; border:1px solid; border-radius:9px; font-weight:500; }.alert-success { background:#eef9f2; border-color:#b9dfc4; color:#1d6533; }.alert-error { background:#fff2ed; border-color:#edc5b7; color:#9d351d; }.preview-banner { padding:10px 13px; margin:0 0 20px; border:1px solid #eecb7e; border-radius:9px; background:#fff7e5; color:#72500c; font-size:13px; }
.table-wrap { overflow:auto; }.table-panel { padding:0; overflow:hidden; } table { width:100%; border-collapse:collapse; text-align:left; } th,td { padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; } th { color:#587269; font-size:11px; letter-spacing:.045em; text-transform:uppercase; } tr:last-child td { border-bottom:0; } td a { font-weight:700; }.status { display:inline-flex; padding:4px 8px; border-radius:100px; background:#eef2f1; color:#546860; font-size:11px; font-weight:700; line-height:1.2; white-space:nowrap; }.status-large { padding:7px 11px; font-size:12px; }.status-draft { color:#5e6972; background:#ebeff1; }.status-submitted,.status-visit_requested,.status-requested,.status-pending { color:#975e04; background:#fff1cf; }.status-scheduled { color:#1f5e95; background:#e2f1ff; }.status-verified,.status-matches,.status-completed,.status-paid { color:#166534; background:#dcf5e3; }.status-needs_review,.status-differences { color:#b45309; background:#ffedd5; }.status-not_feasible,.status-cancelled { color:#a42e1f; background:#fee6e1; }.status-waived,.status-not_applicable { color:#38685b; background:#e5f0eb; }
.empty-state { padding:28px; color:var(--muted); text-align:center; }.empty-state strong { display:block; color:var(--ink); }.empty-state p { margin:5px 0 0; }.filter-row { display:flex; align-items:flex-end; gap:10px; margin:-8px 0 16px; }.filter-row label { max-width:220px; }
label { display:flex; flex-direction:column; gap:6px; color:#315249; font-size:13px; font-weight:700; } input,select,textarea { width:100%; min-height:39px; padding:9px 10px; border:1px solid #c7d6d0; border-radius:7px; outline:0; color:var(--ink); background:#fff; font:400 14px/1.25 "DM Sans",sans-serif; transition:border-color .15s,box-shadow .15s; } textarea { min-height:90px; resize:vertical; line-height:1.5; } input:focus,select:focus,textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent); } input:disabled { color:#81928c; background:#f2f5f4; }.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }.form-grid .wide,.form-grid .full { grid-column:1/-1; }.form-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:20px; }.checkbox-label { flex-direction:row; align-items:center; gap:8px; padding-top:25px; }.checkbox-label input { width:16px; min-height:16px; }.help,.muted { color:var(--muted); font-size:13px; }.measure-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:16px; margin:12px 0 16px; border:1px solid #dae5e1; border-radius:10px; background:#f8fbfa; }.measure-grid label { position:relative; }.measure-grid label > span { min-height:20px; }.measure-grid small { position:absolute; right:9px; bottom:11px; font-size:10px; font-weight:700; }.measure-grid input { padding-right:35px; }.measure-grid b { color:#b45309; }.measure-tip { padding:11px 13px; margin:0 0 16px; border-left:3px solid var(--accent); border-radius:0 7px 7px 0; background:#fffbef; color:#72530e; font-size:13px; }.measurement-section { margin-top:28px; }.measurement-section h2 { margin-bottom:8px; }.wall-segments { display:grid; gap:10px; margin:14px 0 10px; }.wall-segment { display:grid; grid-template-columns:minmax(180px,1fr) minmax(130px,.55fr) auto; align-items:end; gap:10px; padding:12px; border:1px solid #dbe7e2; border-radius:9px; background:#f8fbfa; }.wall-segment .button { margin-bottom:1px; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.lower-grid { margin-top:20px; }.dimensions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px; border-radius:9px; background:#f2f7f5; }.dimensions div { padding:6px; }.dimensions span { display:block; color:#6d827a; font-size:11px; }.dimensions strong { font-size:14px; }.data-list { margin:18px 0 0; }.data-list > div { display:grid; grid-template-columns:130px 1fr; gap:15px; padding:9px 0; border-bottom:1px solid #edf1ef; }.data-list dt { color:#738780; font-size:12px; font-weight:700; }.data-list dd { margin:0; }.notes { padding:12px 14px; margin-top:16px; border-radius:8px; background:#faf7f0; font-size:13px; }.notes p { margin:5px 0 0; color:#4d554f; }.inline-form { margin-top:18px; }.comparison { margin-top:18px; }.comparison h3 { margin-bottom:10px; }.comparison-table th,.comparison-table td { padding:8px; font-size:12px; }.comparison-table .difference { color:#b45309; font-weight:700; }.row-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }.upload-form { display:flex; align-items:center; gap:9px; margin:0 0 14px; }.upload-form input { min-height:32px; font-size:12px; }.drop-upload { display:grid; gap:10px; }.dropzone { position:relative; display:grid; place-items:center; gap:4px; min-height:142px; padding:19px; border:2px dashed #a8c6ba; border-radius:11px; color:#31584c; background:#f7fbf9; text-align:center; cursor:pointer; transition:.15s ease; }.dropzone-compact { min-height:106px; padding:14px; }.dropzone:hover,.dropzone.is-dragging { border-color:var(--brand); background:#e8f5f0; }.dropzone.has-files { border-style:solid; border-color:#78ae98; background:#eef9f3; }.dropzone-input { position:absolute; width:1px!important; min-width:0!important; height:1px; min-height:0!important; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }.dropzone-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#fff; background:var(--brand); font-size:22px; line-height:1; }.dropzone strong { font-size:14px; }.dropzone small { margin:0; }.file-list { margin:0; padding:0; list-style:none; }.file-list li { padding:9px 0; border-bottom:1px solid #edf1ef; }.file-list li:last-child { border:0; }.timeline { padding:0 0 0 19px; margin:0; }.timeline li { padding:0 0 13px 3px; color:#354f47; font-size:13px; }.timeline strong { display:block; font-weight:600; }.timeline small { margin-top:3px; }.split-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr); gap:20px; }.company-list,.people-list { margin:0; padding:0; list-style:none; }.company-list li { display:flex; align-items:center; gap:11px; padding:12px 0; border-bottom:1px solid #edf1ef; }.company-list li:last-child { border:0; }.company-list li > :nth-child(2) { flex:1; }.company-swatch { width:34px; height:34px; border-radius:8px; }.person-row { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid #edf1ef; }.person-row > :nth-child(2) { flex:1; }.avatar { display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; border-radius:50%; background:#dcece6; color:#296452; font-weight:700; }.company-picker { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }.brand-preview { min-height:330px; background:linear-gradient(145deg,#f7fbfa,#e1f1ea); }.preview-header { display:flex; align-items:center; gap:9px; font:600 18px Outfit,sans-serif; }.preview-header img { width:45px; height:45px; border-radius:9px; background:#fff; object-fit:contain; }.preview-card { padding:22px; margin-top:35px; border-radius:12px; background:#fff; box-shadow:0 12px 30px rgba(25,56,46,.1); }.preview-card h3 { margin-top:13px; }.preview-card p { margin:7px 0 15px; }.preview-card .button-primary { background:var(--preview-brand); border-color:var(--preview-brand); }.preview-card .status { color:var(--preview-brand); }
.preview-control { position:fixed; z-index:10; right:16px; bottom:16px; width:min(355px,calc(100vw - 32px)); padding:10px 12px; border:1px solid #e0c77e; border-radius:10px; background:#fff8e9; box-shadow:0 8px 24px rgba(31,45,39,.16); }.preview-control summary { cursor:pointer; color:#664812; font-weight:700; }.preview-control form { display:grid; gap:9px; margin-top:10px; }.preview-control label { font-size:11px; }.preview-control select { min-height:34px; font-size:12px; }
.plan-list { display:grid; gap:12px; }.plan-card { display:flex; align-items:center; justify-content:space-between; gap:16px; }.plan-card h2 { font-size:20px; }.plan-card p { margin:5px 0 0; }.plan-settings { margin-bottom:16px; }.plan-editor { border:1px solid #cbdcd5; border-radius:11px; overflow:hidden; background:#f4f8f6; }.plan-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; color:#32564b; background:#e8f1ed; font-size:13px; font-weight:700; }.plan-canvas-wrap { padding:14px; overflow:auto; background:#f4f8f6; }.plan-canvas-wrap canvas { display:block; width:100%; min-width:600px; height:auto; border:1px solid #b9cdc5; border-radius:5px; background:#fff; cursor:crosshair; touch-action:none; }.plan-editor[data-readonly="1"] .plan-canvas-wrap canvas { cursor:default; }.plan-editor .help { margin:0; padding:0 14px 14px; }
.login-page,.install-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 85% 10%,#d6eee5,transparent 30%),#f2f7f5; }.login-card,.install-card { width:min(460px,100%); padding:34px; border:1px solid #d8e4df; border-radius:16px; background:#fff; box-shadow:0 18px 45px rgba(20,50,40,.1); }.install-card { width:min(760px,100%); }.login-card p,.install-card > p { margin:9px 0 24px; }.login-card form { display:grid; gap:16px; }.install-card h2 { grid-column:1/-1; padding-top:6px; font-size:17px; }.install-card .help { margin:19px 0 0; }
@media (max-width:850px) { .shell { display:block; }.sidebar { display:none; }.main { padding:22px 16px 60px; }.mobile-nav { display:flex; justify-content:space-around; margin:-8px 0 22px; padding:10px; border-radius:9px; background:#e7efeb; }.mobile-nav a { font-size:12px; font-weight:700; }.stat-grid { grid-template-columns:repeat(2,1fr); }.detail-grid,.split-layout { grid-template-columns:1fr; }.topbar { padding:10px 16px; }.topbar-account > span:first-child,.topbar-account > a { display:none; }.company-list li,.person-row { align-items:flex-start; flex-wrap:wrap; }.company-list .row-actions,.person-row .row-actions { width:100%; margin-left:45px; }.plan-canvas-wrap { padding:8px; }.plan-canvas-wrap canvas { min-width:520px; } }
@media (max-width:570px) { .page-head { align-items:flex-start; flex-direction:column; margin-bottom:20px; }.stat-grid { gap:9px; }.stat-card { padding:13px; }.stat-card strong { font-size:27px; }.form-grid,.measure-grid { grid-template-columns:1fr; }.form-grid .wide,.form-grid .full { grid-column:auto; }.dimensions { grid-template-columns:repeat(2,1fr); }.data-list > div { grid-template-columns:1fr; gap:2px; }.topbar-account .role-pill { display:none; }.brand span:last-child { font-size:17px; }.upload-form { align-items:stretch; flex-direction:column; }.form-actions { justify-content:stretch; }.form-actions .button { flex:1; }.status-large { align-self:flex-start; }.wall-segment { grid-template-columns:1fr; }.wall-segment .button { width:100%; } }