:root {
    --forest: #284b37;
    --forest-deep: #1b3528;
    --forest-soft: #41694b;
    --sage: #9bb183;
    --sage-pale: #edf3e9;
    --sand: #d7c4a0;
    --sand-pale: #f5f0e7;
    --water: #84b9be;
    --water-pale: #e9f3f3;
    --orange: #d99a45;
    --orange-pale: #fbf0dc;
    --ink: #26382c;
    --muted: #78837a;
    --line: #e4e9e1;
    --canvas: #f4f7f2;
    --white: #fff;
    --shadow: 0 12px 28px rgba(39, 65, 47, .07);
    --radius: 16px;
    --radius-sm: 10px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 14px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body:before { content: ""; position: fixed; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--forest), var(--sage), var(--sand), var(--water)); z-index: 50; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, strong { letter-spacing: -.02em; }
h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; margin-bottom: 8px; }
h2 { font-size: 20px; line-height: 1.2; margin: 0; }
h3 { font-size: 16px; }
p { color: var(--muted); }
small { display: block; color: var(--muted); font-size: 12px; }
.muted { color: var(--muted); }
.eyebrow { display: block; color: #7c897e; font-size: 10px; font-weight: 800; letter-spacing: .14em; line-height: 1.4; }
.eyebrow-light { color: #c3d5c3; }
.soft-label { color: var(--muted); font-size: 12px; }
.text-link { color: var(--forest); font-size: 12px; font-weight: 800; }
.hidden { display: none !important; }

/* App shell */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; display: flex; flex-direction: column; width: 244px; padding: 28px 18px 18px; color: #e7f0e6; background: var(--forest-deep); }
.brand, .public-brand { display: flex; align-items: center; gap: 11px; }
.brand { padding: 4px 8px 26px; }
.brand strong, .public-brand strong { display: block; color: white; font-size: 17px; letter-spacing: -.03em; }
.brand small, .public-brand small { color: #a9c0ad; font-size: 9px; letter-spacing: .04em; line-height: 1.2; }
.brand-mark, .hero-mark, .report-cover-leaf { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid rgba(203, 224, 197, .3); border-radius: 12px 4px 12px 4px; color: #e4c889; background: #3f6247; font: 700 24px/1 Georgia, serif; }
.sidebar-label { padding: 16px 10px 8px; color: #829b85; font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.nav-list { display: grid; gap: 4px; }
.nav-list a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; color: #bdcfbf; font-size: 13px; font-weight: 600; transition: .18s ease; }
.nav-list a:hover, .nav-list a.is-active { color: white; background: rgba(166, 194, 164, .14); border-color: rgba(183, 211, 180, .1); }
.nav-list a.is-active { box-shadow: inset 3px 0 0 var(--sand); }
.nav-icon { display: inline-grid; place-items: center; width: 20px; color: #c2d5bf; font-size: 16px; }
.sidebar-spacer { flex: 1; }
.sidebar-note { display: flex; align-items: center; gap: 10px; padding: 12px 8px; border-top: 1px solid rgba(210, 226, 205, .13); color: #c4d3c4; }
.sidebar-note strong { display: block; color: #e4ece1; font-size: 12px; }
.sidebar-note small { color: #8fa690; font-size: 10px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sage); }
.dot.online { box-shadow: 0 0 0 4px rgba(155, 177, 131, .12); }
.main-content { width: calc(100% - 244px); margin-left: 244px; min-height: 100vh; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 18px 44px; border-bottom: 1px solid var(--line); background: rgba(244, 247, 242, .82); backdrop-filter: blur(12px); }
.topbar-context { display: flex; align-items: center; gap: 12px; }
.user-menu { display: flex; align-items: center; gap: 9px; }
.user-menu strong { display: block; font-size: 12px; }
.user-menu small { font-size: 10px; }
.avatar, .case-avatar, .mini-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--forest); background: var(--sand); font-weight: 800; }
.avatar { width: 34px; height: 34px; font-size: 11px; }
.small-avatar { width: 30px; height: 30px; font-size: 10px; }
.icon-link { margin-left: 10px; color: var(--muted); font-size: 18px; }
.page-wrap { max-width: 1480px; margin: 0 auto; padding: 39px 44px 80px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.section-heading h1 { color: var(--forest-deep); }
.section-heading p { max-width: 670px; margin: 0; }
.toolbar-row, .case-hero-row, .editor-toolbar, .report-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.breadcrumb { color: var(--muted); font-size: 12px; }
.breadcrumb span { padding: 0 7px; color: var(--sand); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 9px; font-size: 12px; font-weight: 800; transition: .18s ease; }
.button span { font-size: 15px; line-height: 1; }
.button-primary { color: white; background: var(--forest); box-shadow: 0 8px 18px rgba(40, 75, 55, .17); }
.button-primary:hover { background: #356448; transform: translateY(-1px); }
.button-ghost { color: var(--forest); background: white; border-color: var(--line); }
.button-ghost:hover { border-color: #b9cbbb; background: var(--sage-pale); }
.button-wide { width: 100%; }
.icon-button { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; color: #9a6758; background: #fff2ed; font-size: 18px; }

/* Panels / cards */
.panel { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.panel-large { min-width: 0; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.panel-heading p { margin: 7px 0 0; font-size: 13px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.stat-card { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 124px; padding: 19px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow); }
.stat-card > div:not(.stat-icon) { min-width: 0; }
.stat-card span:not(.stat-mark) { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
.stat-card strong { display: block; margin: 8px 0 1px; color: var(--forest-deep); font-size: 30px; line-height: 1; }
.stat-card small { font-size: 10px; }
.stat-feature { color: white; background: var(--forest); border-color: var(--forest); }
.stat-feature span:not(.stat-mark), .stat-feature small { color: #b9cfb9; }
.stat-feature strong { color: white; }
.stat-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-weight: 800; }
.stat-icon.leaf { color: #dce9c7; background: rgba(213, 237, 195, .16); }
.stat-icon.blue { color: #477f88; background: var(--water-pale); }
.stat-icon.orange { color: #b77b35; background: var(--orange-pale); }
.stat-icon.sand { color: #947d52; background: var(--sand-pale); }
.stat-mark { position: absolute; top: 17px; right: 18px; color: #a6c4a4; font-size: 18px; }
.content-grid { display: grid; gap: 20px; }
.dashboard-grid { grid-template-columns: minmax(0, 1.55fr) minmax(290px, .85fr); margin-bottom: 20px; }
.split-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 20px; }
.case-list { display: grid; gap: 4px; }
.case-row { display: flex; align-items: center; gap: 12px; padding: 12px 5px; border-top: 1px solid #eff2ed; transition: .16s ease; }
.case-row:hover { padding-left: 10px; padding-right: 0; background: #fbfcfa; }
.case-avatar { width: 35px; height: 35px; font-size: 10px; }
.case-main { min-width: 0; flex: 1; }
.case-main strong, .case-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-main strong { font-size: 13px; }
.case-main small { margin-top: 2px; font-size: 11px; }
.row-arrow, .row-menu { margin-left: 7px; color: #9baa9d; font-size: 18px; }
.status { display: inline-flex; align-items: center; width: fit-content; padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.status:before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: currentColor; }
.status-success { color: #4a7a58; background: #edf5ed; }
.status-warm { color: #9f7439; background: #fbf2e1; }
.status-attention { color: #ad654c; background: #fdf0ec; }
.status-neutral { color: #708375; background: #eff3ee; }
.status-muted { color: #929c94; background: #f1f2f1; }
.action-stack { display: grid; }
.action-stack a { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-top: 1px solid #eff2ed; }
.action-stack a > div { min-width: 0; flex: 1; }
.action-stack strong, .action-stack small { display: block; }
.action-stack strong { font-size: 12px; }
.action-stack small { margin-top: 2px; font-size: 10px; }
.action-stack a > span:last-child { color: #9aaa9d; font-size: 16px; }
.action-dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-green { background: var(--sage); box-shadow: 0 0 0 4px var(--sage-pale); }
.dot-blue { background: var(--water); box-shadow: 0 0 0 4px var(--water-pale); }
.dot-orange { background: var(--orange); box-shadow: 0 0 0 4px var(--orange-pale); }
.activity-note { margin-top: 16px; padding: 13px; border-radius: 11px; background: var(--sand-pale); }
.activity-note strong { font-size: 11px; }
.activity-note p { margin: 4px 0 0; font-size: 11px; }
.recent-upload-panel { margin-bottom: 20px; }
.upload-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.upload-tile { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px; border-radius: 9px; background: #f8faf7; }
.upload-tile:hover { background: var(--sage-pale); }
.upload-tile > span:last-child { min-width: 0; }
.upload-tile strong, .upload-tile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-tile strong { font-size: 11px; }
.upload-tile small { margin-top: 2px; font-size: 9px; }
.upload-thumb { display: grid; place-items: center; flex: 0 0 auto; width: 43px; height: 43px; overflow: hidden; border-radius: 8px; color: #829480; background: #e8eee5; font-size: 18px; }
.upload-thumb img { width: 100%; height: 100%; object-fit: cover; }
.empty-state { display: grid; place-items: center; min-height: 110px; padding: 20px; color: var(--muted); text-align: center; }
.empty-state.compact { min-height: 70px; padding: 10px; }
.alert { padding: 11px 13px; border-radius: 9px; font-size: 12px; }
.alert-danger, .flash-danger { color: #8e4c3c; background: #fff0eb; }
.info-callout, .success-callout, .legal-note { padding: 12px 14px; border-radius: 10px; background: var(--sage-pale); color: #5c735f; font-size: 11px; }
.success-callout { margin-bottom: 14px; color: #4d7d58; background: #eef7ed; }
.flash { position: fixed; top: 84px; right: 32px; z-index: 40; max-width: 360px; padding: 13px 16px; border: 1px solid rgba(0,0,0,.06); border-radius: 10px; box-shadow: var(--shadow); font-size: 12px; animation: slide-in .25s ease; }
.flash-success { color: #426c4b; background: #eef8ed; }
.flash.is-hidden { opacity: 0; pointer-events: none; transition: .4s; }
@keyframes slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Tables, forms, case pages */
.search-form { display: flex; align-items: center; width: min(100%, 420px); padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.search-form > span { color: var(--muted); font-size: 18px; }
.search-form input { flex: 1; border: 0; outline: 0; }
.search-form .button { min-height: 32px; padding: 0 10px; }
.table-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; color: var(--muted); font-size: 12px; }
.filter-pills { display: flex; gap: 5px; }
.filter-pill { padding: 5px 9px; border-radius: 99px; color: #879388; font-size: 10px; font-weight: 800; }
.filter-pill.is-active { color: var(--forest); background: var(--sage-pale); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 10px 12px; color: #8b978c; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
td { padding: 14px 12px; border-top: 1px solid #edf1ec; color: #59675b; font-size: 12px; vertical-align: middle; }
td:first-child { min-width: 240px; }
td small { margin-top: 3px; font-size: 10px; }
.table-link { display: block; color: var(--forest); font-weight: 800; }
.table-link:hover { text-decoration: underline; }
.table-person { display: flex; align-items: center; gap: 7px; }
.mini-avatar { width: 24px; height: 24px; font-size: 8px; }
.form-layout { display: grid; gap: 20px; }
.form-panel { margin-bottom: 0; }
.form-grid { display: grid; gap: 14px; }
.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .wide, .form-grid label.wide { grid-column: 1 / -1; }
label { display: grid; gap: 6px; color: #5c6a5d; font-size: 11px; font-weight: 800; }
input, select, textarea { width: 100%; padding: 10px 11px; border: 1px solid #dfe6de; border-radius: 8px; outline: 0; color: var(--ink); background: #fbfcfa; font-size: 13px; font-weight: 400; transition: .16s ease; }
textarea { resize: vertical; min-height: 72px; }
input:focus, select:focus, textarea:focus { border-color: #93b198; background: white; box-shadow: 0 0 0 3px rgba(147, 177, 152, .15); }
input[type="checkbox"] { width: 15px; height: 15px; padding: 0; accent-color: var(--forest); }
.check-line { display: flex; align-items: center; gap: 8px; width: fit-content; margin-top: 18px; font-size: 12px; font-weight: 700; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.form-actions .check-line { margin: 0 auto 0 0; }
.case-tabs { display: flex; gap: 3px; overflow-x: auto; margin: -4px 0 25px; padding-bottom: 1px; border-bottom: 1px solid var(--line); }
.case-tabs a { padding: 9px 12px 11px; border-bottom: 2px solid transparent; color: #859087; font-size: 11px; font-weight: 800; white-space: nowrap; }
.case-tabs a:hover, .case-tabs a.is-active { color: var(--forest); border-color: var(--forest); }
.case-hero-row { margin-top: -3px; }
.case-hero-row > div:first-child { display: flex; align-items: center; gap: 9px; }
.hero-actions, .toolbar-actions { display: flex; gap: 8px; }
.content-grid.case-overview-grid { grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr); margin-bottom: 20px; }
.lead-copy { max-width: 680px; color: #55675a; font-size: 15px; line-height: 1.7; }
.detail-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 26px; }
.detail-cards > div { min-width: 0; padding: 12px; border-radius: 9px; background: #f7faf6; }
.detail-cards span, .detail-cards strong, .detail-cards small { display: block; }
.detail-cards span { color: #8b968d; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.detail-cards strong { margin: 6px 0 3px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.detail-cards small { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.missing-panel { border-color: #f0ded1; background: #fffdfa; }
.missing-panel .panel-heading { align-items: center; }
.attention-ring { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #e3bca3; border-radius: 50%; color: #b36d52; background: #fff1e8; font-weight: 900; }
.missing-list { display: grid; margin-bottom: 18px; }
.missing-list a { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid #f1e8df; color: #765e52; font-size: 12px; }
.missing-list a span:last-child { margin-left: auto; color: #ba977d; }
.check-empty { color: #b8a18e; font-size: 18px; }
.legend-row, .plan-caption { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 12px; color: var(--muted); font-size: 10px; }
.legend-row span, .plan-caption span { display: inline-flex; align-items: center; gap: 5px; }
.legend-color { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--sage); }
.legend-color.proposed { background: #d1a56c; }
.legend-color.planting { background: #86a56c; }
.legend-color.water { background: #78aeb7; }
.legend-color.existing { background: #d9d1c7; }
.plan-preview { overflow: hidden; padding: 5px; border: 1px solid #e2eade; border-radius: 10px; background: #f8fbf5; }
.plan-svg { display: block; width: 100%; height: auto; }
.plan-label { font: 11px Arial, sans-serif; fill: #294b36; pointer-events: none; }
.estimate-range, .big-estimate, .report-estimate-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid #e9ede7; border-radius: 10px; background: #e9ede7; }
.estimate-range > div, .big-estimate > div, .report-estimate-row > div { padding: 15px 12px; background: white; }
.estimate-range span, .big-estimate span, .report-estimate-row span { display: block; color: #8a958c; font-size: 10px; }
.estimate-range strong, .report-estimate-row strong { display: block; margin-top: 6px; color: var(--forest); font-size: 17px; }
.estimate-range-focus, .big-estimate-focus { background: var(--sage-pale) !important; }
.estimate-range-focus strong, .big-estimate-focus strong { color: var(--forest-deep); }
.estimate-range + .info-callout { margin-top: 13px; }
.advisory-list { display: grid; gap: 8px; }
.advisory { display: flex; align-items: flex-start; gap: 9px; padding: 10px; border-radius: 9px; background: #f6f9f5; }
.advisory > span { display: grid; place-items: center; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; color: var(--forest); background: var(--sage); font-size: 10px; font-weight: 900; }
.advisory-attention { background: #fff8ed; }
.advisory-attention > span { color: #9c6933; background: #e8bd76; }
.advisory p { margin: 0; color: #637063; font-size: 11px; }
.mini-checklist, .report-checklist { display: grid; gap: 12px; }
.mini-checklist > div, .report-checklist > div { display: flex; gap: 9px; align-items: flex-start; }
.check-icon { display: grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; color: #52745a; background: #e7f2e6; font-size: 11px; font-weight: 900; }
.check-icon.attention { color: #a36c34; background: #fff0d9; }
.mini-checklist strong, .mini-checklist small { display: block; }
.mini-checklist strong { font-size: 11px; }
.mini-checklist small { margin-top: 2px; font-size: 10px; }
.comments-panel { margin-top: 20px; }
.comment-list { display: grid; gap: 14px; }
.comment-item { display: flex; gap: 10px; }
.comment-item > div { min-width: 0; flex: 1; }
.comment-meta { display: flex; align-items: baseline; gap: 8px; }
.comment-meta strong { font-size: 11px; }
.comment-meta span { color: #98a29a; font-size: 10px; }
.comment-item p { margin: 4px 0 0; color: #58685c; font-size: 12px; }
.comment-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.comment-form .form-actions { justify-content: flex-start; }
.comment-form select { width: auto; }
.building-list, .soil-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.building-chip { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: #fafcf9; font-size: 11px; }
.building-chip strong { color: var(--ink); }
.soil-zone-card { display: grid; gap: 3px; min-width: 190px; padding: 12px; border: 1px solid #e2eade; border-radius: 10px; background: #fafcf9; }
.soil-zone-card strong { font-size: 12px; }
.soil-zone-badge { color: #7d977e; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.text-warning { color: #a56d35; }
.plant-picker { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.plant-picker select { flex: 1; }
.plant-check { margin-top: 10px; padding: 13px; border-radius: 9px; }
.plant-check-head { display: flex; justify-content: space-between; gap: 10px; }
.plant-check-head span, .plant-check-head strong { font-size: 12px; }
.plant-check p { margin: 7px 0; font-size: 11px; }
.plant-check small { color: #89724e; font-size: 10px; }
.info-callout + .form-actions { margin-top: 14px; }

/* Uploads */
.uploads-grid { grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); }
.upload-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gallery-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfa; }
.gallery-card:hover { border-color: #b6cbb6; }
.gallery-card img { display: block; width: 100%; height: 130px; object-fit: cover; background: #ecf2e9; }
.gallery-card > div { padding: 10px; }
.gallery-card strong, .gallery-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-card strong { font-size: 11px; }
.gallery-card small { margin-top: 3px; font-size: 10px; }
.file-icon { display: grid; place-items: center; height: 130px; color: #7b8d7a; background: #edf3e9; font-size: 40px; }

/* 2D editor */
.editor-toolbar { margin-top: -7px; }
.editor-toolbar > div:first-child { display: flex; align-items: center; gap: 12px; }
.editor-status { display: inline-flex; align-items: center; gap: 6px; color: #58745b; font-size: 11px; font-weight: 800; }
.editor-status i, .ai-status i { width: 7px; height: 7px; border-radius: 50%; background: #76ad7d; box-shadow: 0 0 0 4px #e5f1e4; }
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; }
.canvas-panel { min-width: 0; }
.north-chip { padding: 5px 8px; border-radius: 999px; color: #64806c; background: var(--sage-pale); font-size: 11px; font-weight: 900; }
.north-chip span { margin-left: 4px; color: var(--muted); font-weight: 400; }
.plan-canvas { overflow: auto; border: 1px solid #dfe8dc; border-radius: 10px; background: #f8fbf5; }
.element-panel { min-width: 0; }
.compact-grid { gap: 8px; }
.compact-grid label { font-size: 10px; }
.compact-grid input { padding: 8px; font-size: 12px; }
.element-list-heading { display: flex; justify-content: space-between; margin: 22px 0 8px; color: #8a968b; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.element-list { display: grid; gap: 6px; max-height: 345px; overflow: auto; padding-right: 3px; }
.element-row { position: relative; display: grid; grid-template-columns: 10px 1fr 28px; gap: 8px; align-items: start; padding: 9px; border: 1px solid #e9eee8; border-radius: 9px; background: #fbfcfa; }
.element-swatch { width: 9px; height: 9px; margin-top: 3px; border-radius: 3px; }
.element-row-main { min-width: 0; }
.element-row-main strong, .element-row-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.element-row-main strong { font-size: 11px; }
.element-row-main small { margin-top: 1px; font-size: 9px; }
.element-row details { grid-column: 2 / -1; }
.element-row summary { color: #759078; cursor: pointer; font-size: 10px; }
.inline-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 7px; }
.inline-fields label { font-size: 9px; }
.inline-fields input { padding: 6px 5px; font-size: 10px; }
.save-plan-panel { display: flex; align-items: flex-end; gap: 18px; margin-top: 20px; }
.save-plan-panel label { width: 250px; }
.save-plan-note { display: flex; align-items: flex-start; gap: 8px; flex: 1; padding: 9px; border-radius: 8px; color: #718071; background: #f5f8f3; font-size: 10px; }
.note-icon { display: grid; place-items: center; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; color: #66836b; background: #e4f0e2; font-size: 11px; font-weight: 900; }

/* Estimate / AI */
.estimate-banner, .ai-banner { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 20px; padding: 23px 26px; border-radius: var(--radius); color: white; background: var(--forest); }
.estimate-banner h2, .ai-banner h2 { margin: 5px 0 6px; font-size: 22px; }
.estimate-banner p, .ai-banner p { max-width: 630px; margin: 0; color: #c3d7c4; font-size: 12px; }
.estimate-banner-mark { margin-right: 20px; color: #d7ca9d; font: 70px/1 Georgia, serif; opacity: .65; }
.demo-badge { display: inline-flex; padding: 5px 7px; border-radius: 5px; color: #98743b; background: #fff3da; font-size: 9px; font-weight: 900; letter-spacing: .08em; white-space: nowrap; }
.estimate-form { margin-bottom: 20px; }
.big-estimate { margin-bottom: 14px; }
.big-estimate > div { padding: 20px 15px; }
.big-estimate strong { display: block; margin-top: 6px; color: var(--forest); font-size: 21px; }
.big-estimate small { margin-top: 4px; color: #7c907f; font-size: 10px; }
.estimate-meta { display: flex; gap: 14px; color: var(--muted); font-size: 10px; }
.estimate-lines { display: grid; }
.estimate-line { display: grid; grid-template-columns: 150px 1fr 130px; gap: 15px; align-items: center; padding: 13px 0; border-top: 1px solid #edf1ec; }
.estimate-line strong, .estimate-line small { display: block; }
.estimate-line > div { min-width: 0; }
.estimate-line > strong:last-child { text-align: right; }
.estimate-line small { margin-top: 3px; font-size: 10px; }
.line-category { display: inline-flex; width: fit-content; padding: 5px 7px; border-radius: 5px; color: #647c68; background: var(--sage-pale); font-size: 9px; font-weight: 800; }
.legal-note { margin-top: 18px; color: #6a726b; background: #f8f5ed; }
.legal-note strong { color: #7f6c49; font-size: 11px; }
.legal-note p { margin: 4px 0 0; font-size: 10px; }
.quantity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.quantity-grid > div { padding: 10px; border-radius: 8px; background: #f7faf6; }
.quantity-grid span, .quantity-grid strong, .quantity-grid small { display: inline; }
.quantity-grid span { color: var(--muted); font-size: 10px; }
.quantity-grid strong { margin: 0 5px 0 8px; color: var(--forest); font-size: 15px; }
.quantity-grid small { font-size: 9px; }
.ai-grid { grid-template-columns: 360px minmax(0, 1fr); }
.ai-status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid rgba(192, 224, 190, .23); border-radius: 999px; color: #c6dbca; font-size: 10px; white-space: nowrap; }
.ai-actions { display: grid; gap: 6px; }
.ai-action { display: grid; grid-template-columns: 30px 1fr auto; gap: 9px; align-items: center; width: 100%; padding: 10px; border: 1px solid #e7ede5; border-radius: 9px; color: var(--ink); background: #fbfcfa; text-align: left; }
.ai-action:hover, .ai-action.is-active { color: var(--forest); border-color: #b5cab4; background: var(--sage-pale); }
.ai-action-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: #759777; background: #e8f0e5; }
.ai-action strong, .ai-action small { display: block; }
.ai-action strong { font-size: 11px; }
.ai-action small { margin-top: 2px; font-size: 9px; }
.ai-action > span:last-child { color: #9aaa9d; }
.ai-output { min-height: 270px; padding: 18px; border-radius: 10px; color: #586a5b; background: #f7faf6; font-size: 13px; line-height: 1.75; white-space: pre-wrap; }
.ai-output + .info-callout { margin-top: 12px; }
.ai-empty { display: grid; place-items: center; min-height: 310px; padding: 30px; text-align: center; }
.ai-empty > span { color: #9bb183; font-size: 36px; }
.ai-empty strong { margin-top: 10px; }
.ai-empty p { max-width: 280px; margin: 6px 0 0; font-size: 12px; }

/* Admin */
.admin-nav { display: flex; gap: 7px; margin-bottom: 22px; }
.admin-nav a { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: #7f8d82; background: white; font-size: 11px; font-weight: 800; }
.admin-nav a:hover, .admin-nav a.is-active { color: var(--forest); border-color: #b8cdb9; background: var(--sage-pale); }
.admin-nav span { margin-left: 4px; color: #a6b3a7; font-size: 10px; }
.admin-stat-grid { grid-template-columns: repeat(3, 1fr); }
.catalog-list { display: grid; }
.catalog-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid #edf1ec; }
.catalog-row > div { min-width: 0; flex: 1; }
.catalog-row strong, .catalog-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-row strong { font-size: 12px; }
.catalog-row small { margin-top: 2px; font-size: 10px; }
.catalog-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #658266; background: var(--sage-pale); }
.catalog-icon.material { color: #a28053; background: var(--sand-pale); }

/* Login */
.public-shell { min-height: 100vh; background: var(--canvas); }
.public-topbar { display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 16px 5vw; border-bottom: 1px solid rgba(232, 239, 230, .12); background: var(--forest-deep); }
.public-pill { padding: 6px 10px; border: 1px solid rgba(204, 224, 201, .2); border-radius: 999px; color: #bfd2c0; font-size: 10px; }
.login-page { display: grid; grid-template-columns: 1.1fr .9fr; min-height: calc(100vh - 76px); }
.login-hero { position: relative; overflow: hidden; color: white; background: var(--forest-deep); }
.login-hero:after { content: ""; position: absolute; right: -110px; bottom: -160px; width: 520px; height: 520px; border: 1px solid rgba(172, 205, 158, .14); border-radius: 50%; box-shadow: 0 0 0 55px rgba(172, 205, 158, .04), 0 0 0 110px rgba(172, 205, 158, .025); }
.login-hero-inner { position: relative; z-index: 1; max-width: 620px; padding: 14vh 10vw 10vh; }
.hero-lockup { display: flex; align-items: center; gap: 18px; margin-top: 78px; }
.logo-reference { width: min(100%, 370px); height: 150px; object-fit: contain; object-position: left center; mix-blend-mode: screen; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hero-mark { width: 70px; height: 70px; font-size: 46px; border-radius: 25px 7px 25px 7px; background: #41674b; }
.hero-lockup p { margin: 13px 0 0; color: #b4c8b5; font-size: 15px; }
.hero-quote { display: flex; gap: 16px; max-width: 450px; margin-top: 88px; }
.quote-line { width: 3px; min-height: 64px; border-radius: 99px; background: linear-gradient(var(--sand), transparent); }
.hero-quote p { margin: 0; color: #d0dbd0; font-size: 16px; line-height: 1.65; }
.hero-swatch-row { display: flex; align-items: center; gap: 7px; margin-top: 74px; }
.hero-swatch { width: 14px; height: 14px; border-radius: 50%; }
.swatch-green { background: #385c42; }.swatch-sage { background: #9bb183; }.swatch-sand { background: #d7c4a0; }.swatch-water { background: #84b9be; }
.hero-swatch-row small { margin-left: 7px; color: #93aa97; letter-spacing: .1em; }
.login-panel { display: grid; place-items: center; padding: 50px 7vw; background: #f8faf7; }
.login-card { width: min(100%, 400px); }
.login-card h2 { margin-top: 12px; font-size: 26px; }
.login-card > p { margin: 8px 0 28px; font-size: 13px; }
.stack-form { display: grid; gap: 15px; }
.button-wide { min-height: 44px; }
.login-divider { display: flex; align-items: center; gap: 10px; margin: 26px 0 18px; color: #a2aba3; font-size: 10px; }
.login-divider:before, .login-divider:after { content: ""; flex: 1; height: 1px; background: #e5ebe4; }
.customer-login-note { display: flex; gap: 10px; padding: 13px; border: 1px solid #e2eadf; border-radius: 10px; background: white; }
.customer-login-note strong { font-size: 11px; }
.customer-login-note p { margin: 3px 0 0; font-size: 10px; }
.login-footnote { margin-top: 28px !important; padding: 9px; border-radius: 7px; color: #88958a !important; background: #eef3ed; font-size: 10px !important; }
.login-footnote strong { color: #58755e; }

/* Customer portal */
.customer-page { max-width: 1080px; margin: 0 auto; padding: 50px 5vw 80px; }
.customer-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.customer-welcome h1 { margin-top: 8px; color: var(--forest-deep); font: 500 42px/1 Georgia, serif; }
.customer-welcome p { margin: 0; }
.customer-case-switcher { display: flex; align-items: center; gap: 5px; overflow-x: auto; margin-bottom: 12px; }
.customer-case-switcher > span { margin-right: 8px; color: #89958a; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.customer-case-switcher a { padding: 7px 10px; border-radius: 7px; color: #829184; font-size: 11px; font-weight: 700; white-space: nowrap; }
.customer-case-switcher a.is-active, .customer-case-switcher a:hover { color: var(--forest); background: var(--sage-pale); }
.customer-hero { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 14px; padding: 32px; background: linear-gradient(120deg, #ffffff, #f1f7ef); }
.customer-hero h2 { margin: 13px 0 8px; font-size: 28px; }
.customer-hero p { max-width: 650px; margin: 0; }
.customer-address { margin-top: 17px; color: #6f836f; font-size: 11px; }
.customer-hero-mark { display: grid; place-items: center; flex: 0 0 auto; width: 112px; height: 112px; border-radius: 36px 10px 36px 10px; color: #5d754f; background: #e2edd9; font: 600 62px/.7 Georgia, serif; }
.customer-hero-mark span { margin-top: 13px; color: #879b83; font: 800 8px/1 Inter, sans-serif; letter-spacing: .08em; }
.customer-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.customer-stat-row > div { padding: 13px 15px; border-radius: 10px; background: white; box-shadow: var(--shadow); }
.customer-stat-row span, .customer-stat-row strong { display: block; }
.customer-stat-row span { color: #8b998d; font-size: 10px; }
.customer-stat-row strong { margin-top: 5px; color: var(--forest); font-size: 12px; }
.customer-content { margin-bottom: 20px; }
.customer-plan { margin-bottom: 11px; }
.customer-empty-art { display: grid; place-items: center; min-height: 270px; padding: 30px; border-radius: 10px; background: radial-gradient(circle at 50% 30%, #e7f1df, #f7faf6 65%); text-align: center; }
.customer-empty-art > span { color: #9bb183; font-size: 46px; }
.customer-empty-art strong { margin-top: 7px; font-size: 13px; }
.customer-empty-art small { max-width: 240px; margin-top: 5px; font-size: 10px; }
.customer-empty-art.budget { min-height: 180px; }
.customer-empty-art.budget > span { color: #c4aa74; }
.customer-upload-list { display: grid; }
.customer-upload-list a { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid #edf1ec; }
.customer-upload-list a > span:nth-child(2) { min-width: 0; flex: 1; }
.customer-upload-list strong, .customer-upload-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-upload-list strong { font-size: 11px; }
.customer-upload-list small { margin-top: 2px; font-size: 9px; }
.customer-upload-list a > span:last-child { color: #9aaa9d; }
.customer-file-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #709074; background: var(--sage-pale); }
.customer-estimate { padding: 15px; border-radius: 9px; background: var(--sage-pale); }
.customer-estimate span, .customer-estimate strong, .customer-estimate small { display: block; }
.customer-estimate span { color: #748b78; font-size: 10px; }
.customer-estimate strong { margin: 7px 0; color: var(--forest); font-size: 20px; }
.customer-estimate small { font-size: 10px; }
.customer-comments { max-height: 190px; overflow: auto; }
.customer-feedback { margin-bottom: 16px; }
.feedback-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 20px; }
.feedback-option { display: grid; gap: 4px; padding: 15px; border: 1px solid #e0e8df; border-radius: 10px; color: var(--ink); background: #fbfcfa; text-align: left; }
.feedback-option:hover, .feedback-option.featured { border-color: #a9c1a6; background: var(--sage-pale); }
.feedback-option > span { color: #789479; font-size: 20px; }
.feedback-option strong { font-size: 11px; }
.feedback-option small { font-size: 9px; }
.customer-footnote { padding: 13px 16px; border-radius: 10px; color: #798679; background: var(--sand-pale); font-size: 10px; }
.customer-footnote strong { color: #8b7654; }

/* Reports */
.report-page { max-width: 1020px; margin: 0 auto; padding: 12px 30px 90px; background: white; }
.customer-report-page { max-width: 1080px; padding-top: 0; }
.report-toolbar { padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.report-cover { padding: 70px 60px 76px; border-radius: 12px; color: white; background: var(--forest-deep); }
.report-cover-leaf { width: 58px; height: 58px; margin-bottom: 48px; font-size: 36px; background: #426748; }
.report-cover h1 { max-width: 750px; margin: 14px 0 10px; color: white; font: 500 clamp(34px, 5vw, 62px)/1 Georgia, serif; }
.report-cover p { color: #c6d6c6; }
.cover-rule { width: 100%; height: 1px; margin: 56px 0 16px; background: rgba(204, 224, 198, .24); }
.report-cover small { color: #b1c4b2; }
.report-section { padding: 55px 26px 0; }
.report-section h2 { max-width: 680px; margin: 10px 0 12px; color: var(--forest-deep); font: 500 29px/1.15 Georgia, serif; }
.report-section > p { max-width: 720px; }
.report-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 27px; }
.report-facts > div { padding: 13px; border-radius: 9px; background: var(--sage-pale); }
.report-facts span, .report-facts strong { display: block; }
.report-facts span { color: #78917d; font-size: 9px; text-transform: uppercase; }
.report-facts strong { margin-top: 6px; font-size: 12px; }
.report-bullets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 25px; }
.report-bullets > div { display: grid; grid-template-columns: 24px 1fr; gap: 0 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.report-bullets > div > span { color: #ad9a68; font-size: 16px; }
.report-bullets strong { font-size: 12px; }
.report-bullets p { grid-column: 2; margin: 2px 0 0; font-size: 11px; }
.report-two-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 24px; }
.report-two-col > div > strong { display: block; margin-bottom: 7px; font-size: 12px; }
.report-two-col p { font-size: 12px; }
.report-note { margin-top: 22px; padding: 16px; border-left: 3px solid var(--sage); background: #f6f9f4; }
.report-note-warning { border-color: #d4ae72; background: #fbf5e8; }
.report-note strong { display: block; color: #6b7c6e; font-size: 11px; }
.report-note p { margin: 4px 0 0; font-size: 10px; }
.report-plan { max-width: 900px; margin-top: 20px; }
.report-zone { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; margin: 8px 0; padding: 9px 10px; border-radius: 7px; background: #f7faf6; }
.report-zone span, .report-zone strong, .report-zone small { display: block; }
.report-zone span { grid-column: 1 / -1; color: #7b947d; font-size: 9px; }
.report-zone strong { font-size: 11px; }
.report-zone small { text-align: right; font-size: 9px; }
.plant-check { margin: 10px 0 12px; padding: 13px; border-radius: 9px; }
.plant-good { background: #eef7eb; }.plant-warning { background: #fff4df; }
.plant-check-head { display: flex; justify-content: space-between; gap: 10px; }
.plant-check-head span, .plant-check-head strong { font-size: 12px; }
.plant-good .plant-check-head strong { color: #4e8057; }.plant-warning .plant-check-head strong { color: #a26f32; }
.plant-check p { margin: 7px 0; font-size: 11px; }
.plant-check small { color: #89724e; font-size: 10px; }
.report-checklist { max-width: 760px; margin-top: 24px; }
.report-checklist strong { display: block; font-size: 12px; }
.report-checklist p { margin: 2px 0 0; font-size: 11px; }
.report-estimate-row { max-width: 700px; margin: 20px 0 14px; }
.next-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 24px 0; }
.next-steps > div { display: grid; gap: 11px; min-height: 94px; padding: 12px; border-radius: 8px; color: #607260; background: var(--sage-pale); font-size: 11px; }
.next-steps span { color: #78967c; font-size: 10px; font-weight: 900; }
.report-last { padding-bottom: 50px; }

@media (max-width: 1120px) {
    .page-wrap { padding-inline: 28px; }
    .topbar { padding-inline: 28px; }
    .detail-cards { grid-template-columns: repeat(2, 1fr); }
    .editor-layout { grid-template-columns: minmax(0, 1fr) 310px; }
}
@media (max-width: 880px) {
    .sidebar { position: static; width: 70px; padding-inline: 10px; }
    .sidebar .brand span:last-child, .sidebar-label, .nav-list a:not(.is-active) { display: none; }
    .sidebar .brand { justify-content: center; padding: 5px 0 25px; }
    .nav-list a { justify-content: center; padding-inline: 8px; }
    .nav-icon { margin: 0; }
    .sidebar-note { display: none; }
    .main-content { width: calc(100% - 70px); margin-left: 0; }
    .login-page { grid-template-columns: 1fr; }
    .login-hero { min-height: 540px; }
    .login-hero-inner { padding: 10vh 10vw; }
    .login-panel { min-height: 600px; }
    .editor-layout, .ai-grid, .uploads-grid { grid-template-columns: 1fr; }
    .element-list { max-height: none; }
}
@media (max-width: 680px) {
    .topbar { min-height: 62px; padding: 14px 16px; }
    .topbar-context { display: none; }
    .page-wrap { padding: 28px 16px 60px; }
    .section-heading { display: block; }
    .section-heading h1 { font-size: 30px; }
    .section-heading p { margin-top: 8px; }
    .toolbar-row, .case-hero-row, .editor-toolbar, .save-plan-panel { display: grid; align-items: stretch; }
    .toolbar-row .button, .hero-actions .button { width: 100%; }
    .search-form { width: 100%; }
    .stat-grid, .admin-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid, .case-overview-grid, .split-grid, .content-grid.case-overview-grid { grid-template-columns: 1fr; }
    .upload-strip { grid-template-columns: repeat(2, 1fr); }
    .detail-cards, .two-col, .form-grid.two-col { grid-template-columns: 1fr; }
    .form-grid .wide, .form-grid label.wide { grid-column: auto; }
    .case-hero-row > div:first-child { justify-content: space-between; }
    .hero-actions { display: flex; }
    .hero-actions .button { width: auto; }
    .estimate-range strong, .big-estimate strong { font-size: 14px; }
    .estimate-line { grid-template-columns: 1fr auto; }
    .estimate-line .line-category { grid-column: 1 / -1; }
    .editor-toolbar > div:first-child { display: grid; gap: 5px; }
    .save-plan-panel label { width: auto; }
    .save-plan-panel .button { width: 100%; }
    .feedback-actions, .customer-stat-row, .report-facts, .next-steps { grid-template-columns: repeat(2, 1fr); }
    .customer-page { padding: 32px 16px 60px; }
    .customer-welcome { align-items: flex-start; }
    .customer-welcome h1 { font-size: 34px; }
    .customer-welcome .button { margin-top: 15px; }
    .customer-hero { align-items: flex-start; padding: 22px; }
    .customer-hero-mark { display: none; }
    .report-page { padding-inline: 16px; }
    .report-cover { padding: 42px 28px; }
    .report-cover-leaf { margin-bottom: 32px; }
    .report-section { padding-inline: 8px; }
    .report-bullets, .report-two-col { grid-template-columns: 1fr; gap: 10px; }
    .report-section h2 { font-size: 25px; }
    .public-topbar { padding-inline: 18px; }
    .public-pill { display: none; }
}
.panel-rule { border: 0; border-top: 1px solid #edf1ec; margin: 22px 0; }
.inline-form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.catalog-row.is-selected { border-color: #a6c59d; background: #f0f7ec; }
.map-disclaimer { margin-bottom: 16px; }
.map-grid { align-items: start; }
.map-workbench { min-width: 0; }
.map-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.calibration-summary, .map-analysis-form { margin-bottom: 12px; }
.map-analysis-form p { max-width: 680px; margin: 6px 0 12px; }
.map-analysis-form .compact-flash { margin: 10px 0 12px; padding: 10px 12px; font-size: .9rem; }
.map-canvas-wrap { overflow: auto; max-height: 610px; border: 1px solid #dfe8dc; border-radius: 10px; background: #edf3ea; }
#map-canvas { display: block; width: 100%; height: auto; cursor: crosshair; }
.map-forms { margin-top: 16px; gap: 12px; }
.compact-form { gap: 9px; }
.map-measurements { margin-top: 16px; }
.map-source-list .catalog-row { cursor: pointer; }
.map-grid .button { white-space: nowrap; }
.analysis-overlay[hidden] { display: none; }
.analysis-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(20, 48, 32, .58); backdrop-filter: blur(9px); }
.analysis-overlay-shell { position: relative; width: min(680px, 100%); overflow: hidden; padding: 22px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 24px; color: var(--ink); background: rgba(255, 255, 255, .97); box-shadow: 0 30px 90px rgba(11, 34, 21, .28); }
.analysis-overlay-shell:before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--forest), var(--sage), var(--sand), var(--water)); }
.analysis-overlay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.analysis-overlay-brand { display: flex; align-items: center; gap: 10px; }.analysis-overlay-brand > span:last-child { display: block; }.analysis-overlay-brand strong, .analysis-overlay-brand small { display: block; }.analysis-overlay-brand strong { color: var(--forest-deep); font-size: 13px; }.analysis-overlay-brand small { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.analysis-overlay-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px 4px 12px 4px; color: #f2dfae; background: var(--forest); font-size: 19px; }
.analysis-live-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid #dbe8d9; border-radius: 999px; color: var(--forest-soft); background: var(--sage-pale); font-size: 10px; font-weight: 800; letter-spacing: .04em; }.analysis-live-pill i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(217, 154, 69, .13); animation: analysis-pulse 1.4s ease-in-out infinite; }
.analysis-scene { position: relative; height: 245px; overflow: hidden; border: 1px solid #dce8d8; border-radius: 18px; background: linear-gradient(180deg, #eaf5f1 0%, #dceee1 64%, #b7d19f 64%, #a3c58d 100%); }.analysis-scene:after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.26), transparent 36%, rgba(72, 116, 72, .08)); }
.scene-sun { position: absolute; top: 24px; right: 46px; width: 43px; height: 43px; border-radius: 50%; background: #f1ca76; box-shadow: 0 0 0 10px rgba(241, 202, 118, .16), 0 0 32px rgba(241, 202, 118, .25); }.scene-cloud { position: absolute; height: 16px; border-radius: 999px; background: rgba(255,255,255,.72); }.scene-cloud:before, .scene-cloud:after { content: ""; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }.scene-cloud:before { left: 16px; width: 27px; height: 27px; }.scene-cloud:after { left: 37px; width: 20px; height: 20px; }.scene-cloud-one { top: 50px; left: 66px; width: 67px; opacity: .7; }.scene-cloud-two { top: 86px; left: 390px; width: 49px; opacity: .42; transform: scale(.72); }
.scene-ground { position: absolute; inset: 0; }.scene-plot-line { position: absolute; right: 20px; bottom: 24px; width: 420px; height: 168px; border: 2px dashed rgba(48, 105, 70, .62); border-radius: 45% 22% 36% 18%; transform: rotate(-7deg); box-shadow: inset 0 0 0 8px rgba(255,255,255,.08); }
.scene-house { position: absolute; right: 96px; bottom: 75px; width: 178px; height: 102px; filter: drop-shadow(0 9px 5px rgba(39, 75, 55, .12)); }.scene-roof { position: absolute; top: 0; left: 8px; width: 133px; height: 72px; background: #857b68; clip-path: polygon(0 34%, 50% 0, 100% 34%, 88% 40%, 50% 17%, 12% 40%); }.scene-house-body { position: absolute; right: 0; bottom: 0; width: 156px; height: 70px; border: 2px solid #bfab8d; border-radius: 2px 2px 6px 6px; background: #f3ead8; }.scene-house-body i { position: absolute; top: 17px; width: 21px; height: 20px; border: 3px solid #8eb1aa; background: #d9eee9; }.scene-house-body i:first-child { left: 24px; }.scene-house-body i:nth-child(2) { left: 62px; }.scene-house-body b { position: absolute; right: 25px; bottom: 0; width: 25px; height: 42px; border-radius: 4px 4px 0 0; background: #ad815a; }.scene-extension { position: absolute; right: 0; bottom: 0; width: 63px; height: 49px; border: 2px solid #c3ae8c; background: #e9dfcd; transform: translateY(8px); }
.scene-tree { position: absolute; bottom: 50px; z-index: 3; width: 45px; height: 95px; }.scene-tree:before { content: ""; position: absolute; left: 19px; bottom: 0; width: 8px; height: 46px; border-radius: 5px; background: #876b4f; }.scene-tree:after { content: ""; position: absolute; top: 0; left: 0; width: 45px; height: 53px; border-radius: 51% 49% 44% 48%; background: #628763; box-shadow: -11px 19px 0 -4px #72966b, 11px 17px 0 -5px #507653; }.scene-tree-one { left: 72px; transform: scale(.85); }.scene-tree-two { right: 47px; bottom: 48px; transform: scale(.55); opacity: .82; }
.scene-flower-bed { position: absolute; left: 178px; bottom: 41px; width: 84px; height: 18px; border-radius: 50%; background: #8b704f; box-shadow: 0 4px 0 #77955f; transform: rotate(-7deg); }.scene-flower-bed i { position: absolute; bottom: 8px; width: 7px; height: 7px; border-radius: 50%; background: #d99a45; box-shadow: 4px -4px 0 #e2b06d; }.scene-flower-bed i:nth-child(1) { left: 14px; }.scene-flower-bed i:nth-child(2) { left: 32px; background: #d47a73; }.scene-flower-bed i:nth-child(3) { left: 50px; }.scene-flower-bed i:nth-child(4) { left: 67px; background: #d47a73; }
.scene-tape { position: absolute; left: 116px; bottom: 94px; z-index: 5; width: 265px; height: 2px; background: #d99a45; transform-origin: left center; animation: tape-sweep 7s ease-in-out infinite; }.scene-tape:after { content: ""; position: absolute; right: 0; top: -4px; width: 10px; height: 10px; border: 2px solid #d99a45; border-radius: 50%; background: #fff4df; }.scene-tape span { position: absolute; top: -25px; left: 106px; padding: 2px 6px; border-radius: 6px; color: #8c6332; background: rgba(255, 248, 231, .9); font-size: 10px; font-weight: 800; }
.scene-architect { position: absolute; left: 87px; bottom: 35px; z-index: 8; width: 42px; height: 86px; transform-origin: 50% 100%; animation: architect-route 7s ease-in-out infinite; }.architect-shadow { position: absolute; left: 1px; bottom: -3px; width: 40px; height: 8px; border-radius: 50%; background: rgba(41, 79, 48, .2); }.architect-body { position: absolute; left: 11px; top: 29px; width: 22px; height: 31px; border-radius: 8px 8px 5px 5px; background: #d48c43; box-shadow: inset 0 -8px 0 rgba(95, 67, 45, .12); }.architect-head { position: absolute; left: 11px; top: 9px; width: 21px; height: 23px; border-radius: 48% 48% 45% 45%; background: #d99d78; }.architect-hat { position: absolute; top: -7px; left: -4px; width: 30px; height: 11px; border-radius: 60% 60% 30% 30%; background: #47704e; box-shadow: 5px 6px 0 -2px #355c3e; }.architect-leg { position: absolute; top: 57px; width: 7px; height: 26px; border-radius: 4px; background: #466b56; transform-origin: 50% 0; }.architect-leg-one { left: 12px; animation: architect-step-one .55s ease-in-out infinite alternate; }.architect-leg-two { left: 24px; animation: architect-step-two .55s ease-in-out infinite alternate; }.architect-arm { position: absolute; top: 31px; width: 6px; height: 27px; border-radius: 4px; background: #d99d78; transform-origin: 50% 2px; }.architect-arm-back { left: 7px; transform: rotate(19deg); }.architect-arm-front { left: 29px; transform: rotate(-48deg); animation: architect-measure-arm 1.2s ease-in-out infinite alternate; }.architect-tape { position: absolute; left: 32px; top: 52px; width: 12px; height: 9px; border: 2px solid #d99a45; border-radius: 3px; background: #f3c36e; }
.scene-scan { position: absolute; bottom: 29px; z-index: 4; width: 6px; height: 6px; border-radius: 50%; background: #d99a45; box-shadow: 0 0 0 5px rgba(217,154,69,.15); animation: scan-dot 2.4s ease-in-out infinite; }.scene-scan-one { left: 155px; }.scene-scan-two { right: 181px; animation-delay: .8s; }
.analysis-overlay-copy { padding: 20px 3px 15px; }.analysis-overlay-copy h2 { margin: 4px 0 5px; color: var(--forest-deep); font-size: clamp(23px, 4vw, 29px); }.analysis-overlay-copy p { margin: 0; color: var(--muted); font-size: 13px; }
.analysis-stage-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }.analysis-stage { min-width: 0; padding: 9px 10px; border: 1px solid #e6ece4; border-radius: 10px; color: #a0aaa0; background: #fbfcfa; transition: .25s ease; }.analysis-stage span, .analysis-stage strong { display: block; }.analysis-stage span { margin-bottom: 3px; font-size: 9px; font-weight: 800; letter-spacing: .12em; }.analysis-stage strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.analysis-stage.is-active { color: var(--forest); border-color: #b9d0b5; background: #f0f7ed; box-shadow: inset 0 2px 0 var(--sage); }
.analysis-progress { height: 5px; overflow: hidden; margin-top: 18px; border-radius: 99px; background: #e7eee4; }.analysis-progress span { display: block; width: 34%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--forest), var(--orange), var(--water)); animation: analysis-progress 1.8s ease-in-out infinite; }.analysis-overlay-note { margin-top: 11px; color: #91a093; font-size: 11px; }
@keyframes analysis-pulse { 50% { opacity: .45; transform: scale(.72); } }
@keyframes architect-route { 0%, 100% { transform: translate(0, 0) rotate(-2deg); } 24% { transform: translate(88px, -8px) rotate(2deg); } 48% { transform: translate(181px, 0) rotate(-1deg); } 53% { transform: translate(181px, 0) scaleX(-1) rotate(1deg); } 77% { transform: translate(85px, -11px) scaleX(-1) rotate(-2deg); } }
@keyframes architect-step-one { to { transform: rotate(22deg); } }
@keyframes architect-step-two { to { transform: rotate(-22deg); } }
@keyframes architect-measure-arm { to { transform: rotate(-18deg); } }
@keyframes tape-sweep { 0%, 100% { transform: scaleX(.68) rotate(-2deg); opacity: .55; } 45%, 65% { transform: scaleX(1) rotate(1deg); opacity: .9; } }
@keyframes scan-dot { 0%, 100% { transform: translate(0, 0); opacity: .2; } 50% { transform: translate(105px, -42px); opacity: 1; } }
@keyframes analysis-progress { 0% { transform: translateX(-120%); } 100% { transform: translateX(330%); } }
@media (prefers-reduced-motion: reduce) { .analysis-overlay *, .analysis-overlay *:before, .analysis-overlay *:after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
.version-history-panel { margin-bottom: 16px; }
.version-history-panel .catalog-row { gap: 12px; }
.version-history-panel .catalog-row > div { flex: 1; min-width: 0; }
.plan-metric-strip { display: grid; grid-template-columns: repeat(3, minmax(120px, .7fr)) minmax(220px, 1.5fr); align-items: center; gap: 12px; margin: -8px 0 20px; padding: 14px 16px; border: 1px solid #dfe9dc; border-radius: 14px; background: #f6faf3; }.plan-metric-strip div { min-width: 0; padding-right: 12px; border-right: 1px solid #e1eadd; }.plan-metric-strip span, .plan-metric-strip strong { display: block; }.plan-metric-strip span { color: var(--muted); font-size: 10px; font-weight: 700; }.plan-metric-strip strong { margin-top: 3px; color: var(--forest-deep); font-size: 17px; }.plan-metric-strip small { color: var(--muted); font-size: 11px; line-height: 1.4; }.element-locked { color: var(--muted); font-size: 10px; font-weight: 700; white-space: nowrap; }.plan-canvas { cursor: grab; }.plan-canvas:active { cursor: grabbing; }
.plan-selection-box { fill: rgba(58, 103, 72, .06); stroke: #365c45; stroke-width: 1.4; stroke-dasharray: 5 4; pointer-events: all; cursor: move; }
.plan-handle, .plan-rotate-handle { fill: #fff; stroke: #365c45; stroke-width: 1.5; pointer-events: all; cursor: nwse-resize; }
.plan-handle-n, .plan-handle-s { cursor: ns-resize; }
.plan-handle-e, .plan-handle-w { cursor: ew-resize; }
.plan-handle-ne, .plan-handle-sw { cursor: nesw-resize; }
.plan-rotate-handle { fill: #d8a64b; cursor: grab; }
.plan-rotate-line { stroke: #365c45; stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.element-row.is-selected { border-color: #7b9d7e; background: #f1f7ee; box-shadow: 0 0 0 2px rgba(82, 119, 84, .1); }
.compact-auth-page { min-height: 70vh; }
@media (max-width: 760px) { .map-forms { grid-template-columns: 1fr; } .map-toolbar .button { flex: 1 1 auto; } .analysis-overlay { padding: 10px; } .analysis-overlay-shell { padding: 16px; border-radius: 19px; } .analysis-scene { height: 210px; } .scene-plot-line { right: -115px; width: 360px; } .scene-house { right: 40px; transform: scale(.8); transform-origin: right bottom; } .scene-tree-two { right: 15px; } .analysis-stage-list { grid-template-columns: repeat(2, 1fr); } .plan-metric-strip { grid-template-columns: repeat(2, 1fr); } .plan-metric-strip div:nth-child(2) { border-right: 0; } .plan-metric-strip small { grid-column: 1 / -1; } }
@media print {
    body:before, .sidebar, .topbar, .public-topbar, .section-heading, .case-tabs, .report-toolbar, .flash, .customer-welcome, .customer-case-switcher, .button { display: none !important; }
    .app-shell, .main-content, .page-wrap, .public-shell { display: block; width: 100%; margin: 0; padding: 0; background: white; }
    .report-page, .customer-report-page { max-width: none; padding: 0; }
    .report-cover { break-after: page; border-radius: 0; }
    .report-section { break-inside: avoid; padding-top: 38px; }
    .panel { box-shadow: none; }
}