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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f4f4f5;
  color: #1a1a1a;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

header {
  background: #fff;
  color: #1a1a1a;
  padding: 14px 24px;
  border-bottom: 1px solid #e5e5e5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.header-content {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-start;
}

.logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.header-text h1 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #1a1a1a;
}

.tagline {
  font-size: 0.7rem;
  color: #c0392b;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
}

.header-nav {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

.nav-btn {
  padding: 9px 20px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  border: none;
  display: inline-block;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.nav-btn-primary {
  background: #c0392b;
  color: #fff;
}

.nav-btn-primary:hover {
  background: #a93226;
  transform: translateY(-1px);
}

.nav-btn-secondary {
  background: #f0f0f0;
  color: #555;
  border: 1px solid #ddd;
}

.nav-btn-secondary:hover {
  background: #e5e5e5;
  color: #1a1a1a;
}

main {
  flex: 1;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 28px 24px 120px;
}

/* === STEP BAR === */
.steps-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 24px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e8e8e8;
}

.step {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.4;
  transition: opacity 0.3s;
}

.step.active, .step.done {
  opacity: 1;
}

.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e8e8e8;
  color: #999;
  font-size: 0.75rem;
  font-weight: 800;
  transition: all 0.3s;
  flex-shrink: 0;
}

.step.active .step-num {
  background: #c0392b;
  color: #fff;
}

.step.done .step-num {
  background: #27ae60;
  color: #fff;
}

.step-text {
  font-size: 0.78rem;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.step.active .step-text {
  color: #c0392b;
}

.step.done .step-text {
  color: #27ae60;
}

.step-line {
  flex: 1;
  height: 2px;
  background: #e8e8e8;
  margin: 0 12px;
  max-width: 60px;
  transition: background 0.3s;
}

.step-line.done {
  background: #27ae60;
}

/* === SEARCH === */
.search-section {
  margin-bottom: 24px;
}

.search-bar {
  display: flex;
  gap: 10px;
}

#address-input {
  flex: 1;
  padding: 14px 16px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  color: #1a1a1a;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}

#address-input:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}

#address-input::placeholder {
  color: #aaa;
}

#search-btn {
  padding: 14px 28px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

#search-btn:hover {
  background: #a93226;
  transform: translateY(-1px);
}

#search-btn:disabled {
  background: #e0e0e0;
  color: #999;
  cursor: not-allowed;
  transform: none;
}

/* === MAP === */
.map-section {
  margin-bottom: 24px;
}

.map-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.tool-btn {
  padding: 10px 18px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
  color: #555;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}

.tool-btn:hover:not(:disabled) {
  border-color: #bbb;
  color: #1a1a1a;
  background: #f5f5f5;
}

.tool-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.tool-btn.active {
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.main-btn.active {
  background: #c0392b;
}

.subtract-btn.active {
  background: #2980b9;
}

.edit-btn.active {
  background: #f39c12;
  border-color: transparent;
  color: #fff;
}

.delete-btn.active {
  background: #e74c3c;
  border-color: transparent;
  color: #fff;
}

.toolbar-divider {
  width: 1px;
  height: 28px;
  background: #ddd;
  align-self: center;
}

.clear-btn {
  margin-left: auto;
  color: #999;
}

.clear-btn:hover:not(:disabled) {
  background: #f0f0f0;
  color: #555;
}

#map {
  width: 100%;
  height: 500px;
  border-radius: 10px;
  border: 2px solid #ddd;
  z-index: 1;
  transition: border-color 0.3s, box-shadow 0.3s;
}

#map.drawing-active {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

#map.drawing-subtract {
  border-color: #2980b9;
  box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.15);
}

#map.editing-active {
  border-color: #f39c12;
  box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.15);
}

.map-hint {
  margin-top: 8px;
  font-size: 0.78rem;
  color: #999;
  text-align: center;
  line-height: 1.5;
}

.leaflet-draw-toolbar {
  display: none !important;
}

.leaflet-draw-actions {
  display: none !important;
}

.leaflet-control-zoom a {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #555 !important;
  border-radius: 8px !important;
}

.leaflet-control-zoom {
  border: 1px solid #ddd !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}

.leaflet-control-zoom a:hover {
  background: #f5f5f5 !important;
  color: #1a1a1a !important;
}

.leaflet-control-layers-toggle {
  width: 36px !important;
  height: 36px !important;
}

.leaflet-control-layers {
  border-radius: 10px !important;
  border: 1px solid #ddd !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}

.shape-popup {
  text-align: center;
}

.shape-popup .popup-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.shape-popup .popup-area {
  font-size: 1.1rem;
  font-weight: 800;
  color: #c0392b;
  margin-bottom: 8px;
}

.shape-popup .popup-type {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #999;
  margin-bottom: 8px;
}

.shape-popup .popup-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.shape-popup .popup-btn {
  padding: 6px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: all 0.2s;
}

.shape-popup .popup-btn-rename {
  background: rgba(52,152,219,0.1);
  color: #2980b9;
}

.shape-popup .popup-btn-rename:hover {
  background: rgba(52,152,219,0.2);
}

.shape-popup .popup-btn-delete {
  background: rgba(231,76,60,0.1);
  color: #e74c3c;
}

.shape-popup .popup-btn-delete:hover {
  background: rgba(231,76,60,0.15);
}

.shape-label {
  background: rgba(0,0,0,0.75) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 10px !important;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0.5px;
  line-height: 1.4 !important;
  white-space: nowrap;
}

/* === COLLAPSIBLE SECTIONS === */
.section-toggle {
  cursor: pointer;
  user-select: none;
}

.section-toggle:hover {
  color: #c0392b;
}

.section-chevron {
  font-size: 0.6rem;
  transition: transform 0.3s;
  color: #999;
  margin-left: auto;
}

.section-body.collapsed .section-chevron,
.collapsed + .section-chevron {
  transform: rotate(-90deg);
}

.section-body {
  overflow: hidden;
  max-height: 2000px;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  opacity: 1;
}

.section-body.collapsed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

/* === STICKY PRICING BAR === */
.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 2px solid #e8e8e8;
  z-index: 100;
  padding: 10px 16px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}

.sticky-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.sticky-item {
  text-align: center;
}

.sticky-label {
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #999;
  font-weight: 600;
  margin-bottom: 2px;
}

.sticky-value {
  font-size: 1rem;
  font-weight: 800;
  color: #1a1a1a;
}

.sticky-total .sticky-value {
  color: #c0392b;
  font-size: 1.15rem;
}

.sticky-total {
  padding-left: 24px;
  border-left: 2px solid #e8e8e8;
}

/* === PROPOSAL BTN ROW === */
.proposal-btn-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.proposal-link-result {
  margin-top: 12px;
}

.proposal-link-label {
  font-size: 0.8rem;
  color: #999;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.proposal-link-row {
  display: flex;
  gap: 8px;
}

.proposal-link-row input {
  flex: 1;
  padding: 10px 14px;
  font-size: 0.85rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #f8f8f8;
  color: #1a1a1a;
  font-family: inherit;
}

.copy-link-btn {
  padding: 10px 18px;
  font-size: 0.78rem;
  font-weight: 700;
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: inherit;
  transition: background 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.copy-link-btn:hover {
  background: #a93226;
}

/* === RESULTS CARDS === */
.results-section {
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
}

.result-card {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  border: 1px solid #e8e8e8;
  transition: border-color 0.25s, transform 0.25s;
}

.result-card:hover {
  border-color: #ccc;
  transform: translateY(-2px);
}

.result-card.total-card {
  border-color: #c0392b;
  background: linear-gradient(135deg, #fdf2f0, #fff);
}

.result-label {
  display: block;
  font-size: 0.68rem;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
  font-weight: 600;
}

.result-value {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: #1a1a1a;
}

.result-value.price {
  color: #c0392b;
}

/* === SECTION HEADING === */
.section-heading {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}


/* === SURFACE ANALYSIS === */
.surface-analysis-section {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #e8e8e8;
}

.surface-analysis-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.surface-analysis-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.surface-analysis-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.surface-analysis-hint {
  font-size: 0.78rem;
  color: #999;
  margin: 0;
}

.analyze-surface-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background 0.2s;
  align-self: flex-start;
  min-height: 44px;
}

.analyze-surface-btn:hover:not(:disabled) {
  background: #333;
}

.analyze-surface-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.analyze-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.analysis-result-card {
  background: #f8f8f8;
  border-radius: 10px;
  padding: 18px;
  border: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.analysis-result-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.analysis-condition-row,
.analysis-crack-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.analysis-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #999;
  min-width: 130px;
}

.condition-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.condition-good {
  background: #e8f8ee;
  color: #27ae60;
}

.condition-fair {
  background: #fef6e4;
  color: #e67e22;
}

.condition-poor {
  background: #fdecea;
  color: #e74c3c;
}

.analysis-crack-ft {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1a1a1a;
}

.analysis-crack-ft.analysis-none {
  font-size: 0.95rem;
  font-weight: 500;
  color: #888;
}

.analysis-crack-price {
  font-size: 0.85rem;
  font-weight: 600;
  color: #c0392b;
  margin-left: 4px;
}

.analysis-notes {
  font-size: 0.83rem;
  color: #666;
  line-height: 1.5;
  margin: 0;
  font-style: italic;
  border-left: 3px solid #e0e0e0;
  padding-left: 12px;
}

.analysis-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
  min-height: 44px;
  width: 100%;
  letter-spacing: 0.3px;
}

.analysis-add-btn:hover:not(:disabled) {
  background: #a93226;
}

.analysis-add-btn:disabled,
.analysis-add-btn-done {
  background: #27ae60 !important;
  cursor: default;
}

.analysis-error {
  padding: 12px 16px;
  background: #fdecea;
  border-radius: 8px;
  color: #e74c3c;
  font-size: 0.85rem;
  font-weight: 600;
}

/* === ADD-ONS === */
.addons-section {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #e8e8e8;
}

.addon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.85rem;
}

.addon-row:last-child {
  border-bottom: none;
}

.addon-name {
  flex: 1;
  font-weight: 600;
  color: #1a1a1a;
}

.addon-detail {
  color: #999;
  font-size: 0.8rem;
}

.addon-price {
  font-weight: 700;
  color: #c0392b;
  min-width: 80px;
  text-align: right;
}

.addon-remove {
  background: none;
  border: none;
  color: #e74c3c;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
  transition: background 0.2s;
}

.addon-remove:hover {
  background: rgba(231, 76, 60, 0.1);
}

.addon-add-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
}

.addon-add-row select {
  flex: 1;
  padding: 9px 12px;
  font-size: 0.85rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: none;
  font-family: inherit;
  background: #fff;
  color: #1a1a1a;
}

.addon-add-row select:focus {
  border-color: #c0392b;
}

.addon-add-row input {
  width: 85px;
  padding: 9px 12px;
  font-size: 0.85rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: none;
  font-family: inherit;
  background: #fff;
  color: #1a1a1a;
}

.addon-add-row input:focus {
  border-color: #c0392b;
}

.striping-estimator-row {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
}

.striping-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #999;
  margin-bottom: 8px;
}

.striping-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.striping-input-group input {
  width: 130px;
  padding: 9px 12px;
  font-size: 0.85rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: none;
  font-family: inherit;
  background: #fff;
  color: #1a1a1a;
}

.striping-input-group input:focus {
  border-color: #c0392b;
}

.striping-rate-label {
  font-size: 0.8rem;
  color: #999;
  font-weight: 600;
  white-space: nowrap;
}

.striping-price-display {
  font-size: 0.9rem;
  font-weight: 700;
  color: #c0392b;
  min-width: 60px;
}

.analysis-crack-section {
  background: #f0f4ff;
  border: 1px solid #d0d9f0;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.analysis-crack-section-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #2c5282;
  margin-bottom: 2px;
}

.analysis-striping-section {
  background: #fff8f0;
  border: 1px solid #f0d9c0;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.analysis-striping-section .analysis-crack-section-title {
  color: #7d4e1a;
}

/* === CATALOG === */
.catalog-section {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #e8e8e8;
}

.toggle-btn {
  font-size: 0.72rem;
  padding: 4px 14px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 20px;
  cursor: pointer;
  color: #777;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.2s;
}

.toggle-btn:hover {
  background: #eee;
  color: #1a1a1a;
}

.catalog-list {
  margin-bottom: 12px;
}

.catalog-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.85rem;
}

.catalog-item-name {
  flex: 1;
  font-weight: 600;
  color: #1a1a1a;
}

.catalog-item-info {
  color: #999;
  font-size: 0.8rem;
}

.catalog-item-prices {
  font-size: 0.8rem;
  text-align: right;
}

.catalog-item-prices .price-line {
  color: #c0392b;
  font-weight: 600;
}

.catalog-item-prices .cost-line {
  color: #999;
  font-size: 0.75rem;
}

.catalog-settings-row {
  padding: 10px 0 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}
.catalog-settings-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.catalog-settings-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.catalog-settings-input {
  width: 120px;
  padding: 9px 12px;
  font-size: 0.9rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: none;
  font-family: inherit;
  background: #fff;
  color: #1a1a1a;
}
.catalog-settings-input:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
}
.catalog-settings-status {
  font-size: 0.8rem;
  color: #1a7f4e;
}
.catalog-settings-hint {
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: #888;
}

.catalog-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.catalog-form input,
.catalog-form select {
  padding: 9px 12px;
  font-size: 0.85rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: none;
  font-family: inherit;
  background: #fff;
  color: #1a1a1a;
}

.catalog-form input:focus,
.catalog-form select:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
}

#cat-name {
  flex: 1;
  min-width: 150px;
}

#cat-price, #cat-cost {
  width: 100px;
}

#cat-desc {
  flex: 2;
  min-width: 150px;
}

/* === PROPOSAL FORM === */
.proposal-section {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid #e8e8e8;
}

.proposal-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.proposal-form input,
.proposal-form textarea {
  padding: 12px 16px;
  font-size: 0.9rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.25s, box-shadow 0.25s;
  resize: vertical;
  background: #fff;
  color: #1a1a1a;
}

.proposal-form input::placeholder,
.proposal-form textarea::placeholder {
  color: #aaa;
}

.proposal-form input:focus,
.proposal-form textarea:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
}

.job-type-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
}
.job-type-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}
.job-type-btns {
  display: flex;
  gap: 0;
  border: 1.5px solid #ddd;
  border-radius: 7px;
  overflow: hidden;
}
.job-type-btn {
  padding: 7px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  background: #fff;
  color: #555;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0.2px;
}
.job-type-btn + .job-type-btn {
  border-left: 1.5px solid #ddd;
}
.job-type-btn.active {
  background: #c0392b;
  color: #fff;
}

.proposal-btn {
  padding: 13px 28px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  align-self: flex-start;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.proposal-btn:hover:not(:disabled) {
  background: #a93226;
  transform: translateY(-1px);
}

.proposal-btn:disabled {
  background: #e0e0e0;
  color: #999;
  cursor: not-allowed;
  transform: none;
}

/* === DASHBOARD STATS === */
.stats-section {
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
}

.stat-card {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  border: 1px solid #e8e8e8;
  transition: border-color 0.25s, transform 0.25s;
}

.stat-card:hover {
  border-color: #ccc;
  transform: translateY(-2px);
}

.stat-label {
  display: block;
  font-size: 0.68rem;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
  font-weight: 600;
}

.stat-value {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: #1a1a1a;
}

.stat-revenue { color: #c0392b; }
.stat-profit { color: #27ae60; }

/* === DASHBOARD TABLE === */
.dashboard-section {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid #e8e8e8;
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 16px;
}

.dashboard-search input {
  padding: 9px 16px;
  font-size: 0.85rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: none;
  font-family: inherit;
  width: 280px;
  transition: border-color 0.25s, box-shadow 0.25s;
  background: #fff;
  color: #1a1a1a;
}

.dashboard-search input::placeholder {
  color: #aaa;
}

.dashboard-search input:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
}

.mobile-proposals {
  display: none;
}

.proposals-table-wrap {
  overflow-x: auto;
}

.proposals-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.proposals-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #999;
  border-bottom: 1px solid #e8e8e8;
  user-select: none;
  font-weight: 600;
}

.proposals-table th.sortable {
  cursor: pointer;
  transition: color 0.2s;
}

.proposals-table th.sortable:hover {
  color: #c0392b;
}

.proposals-table th.sort-asc::after {
  content: ' \25B2';
  font-size: 0.6rem;
  color: #c0392b;
}

.proposals-table th.sort-desc::after {
  content: ' \25BC';
  font-size: 0.6rem;
  color: #c0392b;
}

.proposals-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.td-paid {
  color: #27ae60;
  font-weight: 700;
}

.m-card-paid {
  color: #27ae60 !important;
}

.proposals-table tbody tr {
  transition: background 0.15s;
}

.proposals-table tbody tr:hover {
  background: #fafafa;
}

.td-name { font-weight: 600; color: #1a1a1a; }
.badge-commercial {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: #1a6fb5;
  color: #fff;
  border-radius: 3px;
  padding: 1px 5px;
  vertical-align: middle;
  margin-left: 5px;
  text-transform: uppercase;
}
.status-signed {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: #999;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: 4px;
  vertical-align: middle;
}
.status-signed-yes {
  color: #2e7d32;
  background: #e8f5e9;
  border-color: #a5d6a7;
}
.m-action-signed {
  font-size: 0.72rem;
  font-weight: 600;
  color: #999;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 10px;
  background: #f7f7f7;
  cursor: default;
}
.m-action-signed-yes {
  color: #2e7d32;
  background: #e8f5e9;
  border-color: #a5d6a7;
}
.td-addr { color: #777; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-sqft { color: #777; }
.td-price { font-weight: 700; color: #c0392b; }
.td-date { color: #999; white-space: nowrap; font-size: 0.8rem; }


.td-actions {
  white-space: nowrap;
}

.action-btn {
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  margin-right: 4px;
  transition: all 0.2s;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-family: inherit;
}

.action-btn:hover { transform: translateY(-1px); }

.action-view {
  background: rgba(52, 152, 219, 0.1);
  color: #2980b9;
}

.action-view:hover {
  background: rgba(52, 152, 219, 0.2);
}

.action-delete {
  background: rgba(231, 76, 60, 0.08);
  color: #e74c3c;
}

.action-delete:hover {
  background: rgba(231, 76, 60, 0.15);
}

.action-copy {
  background: rgba(52, 73, 94, 0.08);
  color: #2c3e50;
}

.action-copy:hover {
  background: rgba(52, 73, 94, 0.15);
}

.action-copied {
  background: #27ae60 !important;
  color: #fff !important;
}

.action-invoice {
  background: rgba(26, 127, 78, 0.08);
  color: #1a7f4e;
}

.action-text-quote {
  background: rgba(52, 120, 198, 0.1);
  color: #2666b8;
}
.action-text-quote:hover {
  background: rgba(52, 120, 198, 0.2);
}
.m-action-text-quote {
  background: rgba(52, 120, 198, 0.12);
  color: #2666b8;
}

.action-invoice:hover {
  background: rgba(26, 127, 78, 0.18);
}

.action-invoiced {
  background: rgba(26, 127, 78, 0.12);
  color: #1a7f4e;
  opacity: 1 !important;
  cursor: default !important;
  font-weight: 700;
}

.m-action-invoice {
  background: rgba(26, 127, 78, 0.1);
  color: #1a7f4e;
}

.m-action-invoiced {
  background: rgba(26, 127, 78, 0.15);
  color: #1a7f4e;
  font-weight: 700;
  opacity: 1 !important;
  cursor: default !important;
}

.action-draft {
  background: rgba(245, 166, 35, 0.1);
  color: #b07d00;
}
.action-draft:hover {
  background: rgba(245, 166, 35, 0.22);
}
.m-action-draft {
  background: rgba(245, 166, 35, 0.12);
  color: #b07d00;
}

.td-status {
  white-space: nowrap;
}

.status-btn {
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  border: 1.5px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
  background: #fff;
  color: #aaa;
  margin-right: 4px;
  transition: all 0.2s;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-family: inherit;
}

.status-btn:hover {
  border-color: #bbb;
  color: #666;
}

.status-btn.status-active {
  background: #27ae60;
  color: #fff;
  border-color: #27ae60;
}

.status-btn.status-active:hover {
  background: #219a52;
  border-color: #219a52;
}

.status-btn.status-paid.status-active {
  background: #2980b9;
  color: #fff;
  border-color: #2980b9;
}

.status-btn.status-paid.status-active:hover {
  background: #2472a4;
  border-color: #2472a4;
}

/* === MODAL === */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-box {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 16px 48px rgba(0,0,0,0.15);
  border: 1px solid #e8e8e8;
}

.modal-box h3 {
  margin-bottom: 10px;
  font-size: 1.05rem;
  color: #1a1a1a;
}

.modal-box p {
  color: #666;
  font-size: 0.85rem;
  margin-bottom: 20px;
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.modal-btn {
  padding: 9px 20px;
  font-size: 0.8rem;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  transition: all 0.2s;
}

.modal-cancel {
  background: #f0f0f0;
  color: #666;
}

.modal-cancel:hover {
  background: #e5e5e5;
  color: #333;
}

.modal-confirm {
  background: #e74c3c;
  color: #fff;
}

.modal-confirm:hover {
  background: #c0392b;
}

/* === SIDEBAR NAV === */
.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-right: 4px;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #1a1a1a;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.sidebar-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

.sidebar {
  position: fixed;
  top: 0;
  left: -280px;
  width: 280px;
  height: 100%;
  background: #fff;
  z-index: 1000;
  transition: left 0.3s ease;
  box-shadow: 2px 0 16px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}

.sidebar.open {
  left: 0;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid #eee;
}

.sidebar-header img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.sidebar-header h2 {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #1a1a1a;
}

.sidebar-header .sidebar-tagline {
  font-size: 0.65rem;
  color: #c0392b;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}

.sidebar-close {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: #999;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.2s;
}

.sidebar-close:hover {
  color: #1a1a1a;
}

.sidebar-nav {
  padding: 12px 0;
  flex: 1;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 24px;
  text-decoration: none;
  color: #444;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.2s;
  letter-spacing: 0.3px;
}

.sidebar-nav a:hover {
  background: #f5f5f5;
  color: #1a1a1a;
}

.sidebar-nav a.active {
  color: #c0392b;
  background: #fdf2f0;
  border-right: 3px solid #c0392b;
}

.sidebar-nav .nav-icon {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
}

.sidebar-nav .logout-link {
  margin-top: auto;
  border-top: 1px solid #eee;
  color: #999;
}
.sidebar-nav .logout-link:hover {
  color: #c0392b;
  background: #fdf2f0;
}

.sidebar-user {
  padding: 12px 24px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin: 8px 0 0;
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-user-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #bbb;
}

.sidebar-user-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1a1a;
}

.sidebar-nav-bottom {
  margin-top: 0;
  border-top: none;
}

.sidebar-footer {
  padding: 16px 24px;
  border-top: 1px solid #eee;
  font-size: 0.72rem;
  color: #bbb;
  letter-spacing: 0.3px;
}

@media print {
  .sidebar, .sidebar-overlay, .menu-toggle { display: none !important; }
}

/* === FOOTER === */
footer {
  background: #fff;
  color: #aaa;
  text-align: center;
  padding: 20px;
  font-size: 0.75rem;
  border-top: 1px solid #e8e8e8;
  letter-spacing: 0.5px;
}

/* === EMPTY STATE === */
.empty-state {
  text-align: center;
  color: #999;
  padding: 40px 16px;
  font-size: 0.9rem;
}

/* === RESPONSIVE === */

footer {
  padding-bottom: 70px;
}

@media (max-width: 768px) {
  .header-content {
    gap: 10px;
  }

  .logo {
    width: 44px;
    height: 44px;
  }

  .header-text h1 {
    font-size: 1.1rem;
  }

  .steps-bar {
    padding: 12px 10px;
    gap: 0;
  }

  .step-text {
    display: none;
  }

  .step-num {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  .step-line {
    margin: 0 8px;
  }

  .search-bar {
    flex-direction: column;
  }

  #search-btn {
    justify-content: center;
    min-height: 48px;
  }

  #address-input {
    min-height: 48px;
    font-size: 1rem;
  }

  .map-toolbar {
    gap: 6px;
  }

  .tool-btn {
    padding: 10px 10px;
    font-size: 0.72rem;
    min-height: 44px;
    flex: 1;
    justify-content: center;
  }

  .tool-btn .btn-label {
    display: none;
  }

  .tool-btn svg {
    width: 18px;
    height: 18px;
  }

  .toolbar-divider {
    display: none;
  }

  .clear-btn {
    margin-left: 0;
    flex: 0 0 auto;
  }

  #map {
    height: 350px;
    border-radius: 8px;
  }

  .results-section {
    flex-wrap: wrap;
    gap: 8px;
  }

  .result-card {
    min-width: calc(50% - 4px);
    padding: 14px 10px;
  }

  .result-value {
    font-size: 1.3rem;
  }

  .addon-add-row {
    flex-wrap: wrap;
  }

  .addon-add-row select {
    min-width: 100%;
    min-height: 44px;
  }

  .addon-add-row input {
    min-height: 44px;
    flex: 1;
  }

  .addon-add-row .tool-btn {
    flex: 0 0 auto;
  }

  .addon-row {
    flex-wrap: wrap;
    padding: 12px 0;
  }

  .addon-name {
    flex: 1 1 100%;
    margin-bottom: 4px;
  }

  .addon-remove {
    padding: 8px 12px;
    font-size: 1.2rem;
  }

  .catalog-form {
    flex-direction: column;
  }

  .catalog-form input,
  .catalog-form select {
    min-height: 44px;
  }

  #cat-price, #cat-cost {
    width: 100%;
  }

  .proposal-form input,
  .proposal-form textarea {
    min-height: 48px;
    font-size: 1rem;
  }

  .proposal-btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  .proposal-btn-row {
    flex-direction: column;
  }

  .proposal-btn-row .tool-btn {
    width: 100%;
    justify-content: center;
  }

  main {
    padding: 16px;
    padding-bottom: 140px;
  }

  .stats-section {
    flex-wrap: wrap;
  }

  .stat-card {
    min-width: calc(50% - 7px);
  }

  .stat-value {
    font-size: 1.3rem;
  }

  .dashboard-header {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-search input {
    width: 100%;
    min-height: 44px;
  }

  .proposals-table-wrap {
    display: none !important;
  }

  .mobile-proposals {
    display: block;
  }

  .sticky-bar-inner {
    gap: 16px;
  }

  .sticky-value {
    font-size: 0.88rem;
  }

  .sticky-total .sticky-value {
    font-size: 1rem;
  }

  .sticky-total {
    padding-left: 16px;
  }

  #map .leaflet-editing-icon {
    width: 28px !important;
    height: 28px !important;
    margin-left: -14px !important;
    margin-top: -14px !important;
    border-width: 3px;
  }

  .leaflet-marker-icon.leaflet-div-icon {
    width: 16px !important;
    height: 16px !important;
    margin-left: -8px !important;
    margin-top: -8px !important;
  }
}

.undo-btn, .redo-btn {
  padding: 10px 12px;
}

.price-input-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
}

.price-input-dollar {
  font-size: 1.4rem;
  font-weight: 700;
  color: #c0392b;
}

.price-input {
  width: 90px;
  font-size: 1.4rem;
  font-weight: 700;
  color: #c0392b;
  border: none;
  border-bottom: 2px solid #ddd;
  background: transparent;
  padding: 2px 4px;
  font-family: inherit;
  outline: none;
  -moz-appearance: textfield;
}

.price-input::-webkit-outer-spin-button,
.price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.price-input:focus {
  border-bottom-color: #c0392b;
}

.price-input:disabled {
  opacity: 0.4;
  border-bottom-color: transparent;
}

.result-hint {
  font-size: 0.7rem;
  color: #999;
  margin-top: 2px;
}

.fullscreen-btn {
  margin-left: auto;
}

.leaflet-marker-icon.leaflet-div-icon {
  background: #fff;
  border: 2px solid #c0392b;
  border-radius: 50%;
  width: 12px !important;
  height: 12px !important;
  margin-left: -6px !important;
  margin-top: -6px !important;
}

#map .leaflet-editing-icon {
  width: 20px !important;
  height: 20px !important;
  margin-left: -10px !important;
  margin-top: -10px !important;
  background: #fff !important;
  border: 3px solid #c0392b !important;
  border-radius: 50% !important;
  box-shadow: 0 0 6px rgba(192, 57, 43, 0.4);
  cursor: grab !important;
  touch-action: none;
}

#map .leaflet-editing-icon:active {
  cursor: grabbing !important;
  background: #c0392b !important;
  border-color: #a93226 !important;
  box-shadow: 0 0 10px rgba(192, 57, 43, 0.6);
}


.map-section.map-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background: #fff;
  margin: 0;
  padding: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

.map-section.map-fullscreen .map-toolbar {
  position: relative;
  z-index: 2001;
  border-radius: 0;
  margin: 0;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 2px solid #e8e8e8;
  flex-shrink: 0;
}

.map-section.map-fullscreen .map-container {
  flex: 1;
  height: auto !important;
  border-radius: 0;
}

.map-section.map-fullscreen .map-hint {
  display: none;
}

.map-section.map-fullscreen .fullscreen-btn {
  background: #c0392b;
  color: #fff;
  border-color: #c0392b;
}

.map-section.map-fullscreen .fullscreen-btn:hover {
  background: #a93226;
}

body.map-is-fullscreen {
  overflow: hidden;
}

body.map-is-fullscreen header,
body.map-is-fullscreen .sidebar,
body.map-is-fullscreen .sidebar-overlay,
body.map-is-fullscreen .steps-bar,
body.map-is-fullscreen .search-section,
body.map-is-fullscreen .sticky-pricing,
body.map-is-fullscreen #install-banner,
body.map-is-fullscreen footer {
  display: none !important;
}

.map-section.map-fullscreen .tool-btn .btn-label {
  display: inline !important;
  font-size: 0.72rem;
}

.m-card {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #eee;
}

.m-card-content {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 14px 44px 14px 16px;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.m-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.m-card-name {
  font-weight: 700;
  color: #1a1a1a;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  margin-right: 12px;
}

.m-card-price {
  font-weight: 800;
  color: #c0392b;
  font-size: 0.95rem;
  white-space: nowrap;
}

.m-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.m-card-addr {
  color: #888;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  margin-right: 12px;
}

.m-card-date {
  color: #aaa;
  font-size: 0.75rem;
  white-space: nowrap;
}

.m-card-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.6rem;
  color: #ccc;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
  z-index: 3;
  transition: transform 0.3s, color 0.2s;
  font-family: inherit;
}

.m-card-open .m-card-chevron {
  transform: translateY(-50%) translateX(-320px);
  color: #fff;
}

.m-card-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  display: flex;
  z-index: 1;
}

.m-action {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: none;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  padding: 0 4px;
  line-height: 1.1;
}

.m-card-sig {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.m-card-sig.signed { background: #e8f5e9; color: #2e7d32; }
.m-card-sig.unsigned { background: #fff3e0; color: #e65100; }

.m-action-view { background: #2980b9; }
.m-action-copy { background: #34495e; }
.m-action-accepted { background: #95a5a6; }
.m-action-accepted.m-action-on { background: #27ae60; }
.m-action-paid { background: #7f8c8d; }
.m-action-paid.m-action-on { background: #2980b9; }
.m-action-delete { background: #e74c3c; }

.m-action:active {
  filter: brightness(0.85);
}

/* ===== Time tracking ===== */
.time-panel {
  max-width: 900px;
  margin: 20px auto 60px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 22px 26px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.time-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid #f0f0f0;
}
.time-panel-head h2 { margin: 0; font-size: 1.2rem; color: #222; }
.time-clock-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.time-hint { color: #888; font-size: 0.88rem; }
.time-active-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #27ae60; box-shadow: 0 0 0 0 rgba(39,174,96,0.6);
  animation: timePulse 1.6s infinite;
}
@keyframes timePulse {
  0% { box-shadow: 0 0 0 0 rgba(39,174,96,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(39,174,96,0); }
  100% { box-shadow: 0 0 0 0 rgba(39,174,96,0); }
}
.time-active-label { color: #27ae60; font-weight: 600; font-size: 0.9rem; }
.time-btn {
  background: #f4f4f5; border: 1px solid #ddd; color: #444;
  padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 0.88rem;
  font-family: inherit; font-weight: 600; transition: all 0.15s;
}
.time-btn:hover { background: #e9e9eb; }
.time-btn:disabled { opacity: 0.5; cursor: wait; }
.time-btn-start { background: #27ae60; color: #fff; border-color: #27ae60; }
.time-btn-start:hover { background: #229954; }
.time-btn-stop { background: #c0392b; color: #fff; border-color: #c0392b; }
.time-btn-stop:hover { background: #a93226; }
.time-btn-link { text-decoration: none; }
.time-btn-mini { padding: 4px 9px; font-size: 0.78rem; }
.time-btn.danger { background: #fff; color: #c0392b; border-color: #e8c4c0; }
.time-btn.danger:hover { background: #c0392b; color: #fff; }

.time-entries-list { overflow-x: auto; }
.time-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.time-table th, .time-table td {
  padding: 9px 10px; text-align: left; border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
}
.time-table th { font-weight: 600; color: #666; background: #fafafa; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.time-table tfoot td { background: #fafafa; border-top: 2px solid #eee; border-bottom: none; }
.time-notes-cell { max-width: 200px; color: #555; }
.time-row-actions { display: flex; gap: 5px; white-space: nowrap; }
.time-open-pill { display: inline-block; background: #e8f7ec; color: #27ae60; font-weight: 600; padding: 2px 8px; border-radius: 10px; font-size: 0.78rem; }
.time-gps { color: #c0392b; font-size: 0.9em; }
.time-edit-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 8px 0; }
.time-edit-form label { display: flex; flex-direction: column; gap: 3px; font-size: 0.78rem; color: #666; }
.time-edit-form input { padding: 5px 7px; border: 1px solid #ddd; border-radius: 5px; font-family: inherit; font-size: 0.85rem; }
.time-edit-notes { flex: 1; min-width: 200px; }
.time-edit-actions { display: flex; gap: 5px; }
@media print { .time-panel { display: none !important; } }

/* ===== Dashboard: On the clock widget ===== */
.oncloack-section { margin: 0 auto 24px; max-width: 1200px; padding: 0 20px; }
.onclock-card {
  background: linear-gradient(135deg, #fff 0%, #f8fdf9 100%);
  border: 1px solid #d4eedd; border-left: 4px solid #27ae60;
  border-radius: 10px; padding: 16px 20px;
}
.onclock-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.onclock-pulse {
  width: 10px; height: 10px; border-radius: 50%; background: #27ae60;
  animation: timePulse 1.6s infinite;
}
.onclock-count {
  margin-left: auto; background: #27ae60; color: #fff; font-size: 0.78rem;
  font-weight: 700; padding: 2px 9px; border-radius: 10px;
}
.onclock-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.onclock-item {
  display: block; text-decoration: none; padding: 10px 12px;
  background: #fff; border: 1px solid #e6f3ea; border-radius: 8px;
  color: #333; transition: all 0.15s;
}
.onclock-item:hover { border-color: #27ae60; box-shadow: 0 1px 4px rgba(39,174,96,0.15); }
.onclock-row1 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.onclock-who { font-weight: 600; font-size: 0.92rem; }
.onclock-dur { font-size: 0.82rem; color: #27ae60; font-weight: 600; }
.onclock-row2 { font-size: 0.8rem; color: #777; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Timesheets page ===== */
.ts-filters { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.ts-filters label { display: flex; flex-direction: column; gap: 3px; font-size: 0.78rem; color: #666; }
.ts-filters input, .ts-filters select {
  padding: 6px 9px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.88rem; font-family: inherit;
}
.ts-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0 0 16px; }
.ts-summary-card {
  background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.ts-summary-label { font-size: 0.74rem; color: #888; text-transform: uppercase; letter-spacing: 0.04em; }
.ts-summary-value { font-size: 1.4rem; font-weight: 700; color: #c0392b; }

/* Timesheets per-user drilldown */
.ts-view-toggle { display: inline-flex; gap: 4px; margin-left: 8px; }
.ts-byuser-row:hover { background: #fafafa; }
.ts-expand-icon { color: #888; font-size: 0.7rem; }
.ts-drilldown td { background: #fbfbfb; padding: 0 !important; }
.ts-drilldown-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin: 0; }
.ts-drilldown-table th, .ts-drilldown-table td {
  padding: 8px 10px; text-align: left; border-bottom: 1px solid #f0f0f0; vertical-align: top;
}
.ts-drilldown-table th { background: #f4f4f5; color: #666; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ts-drilldown-table tr:last-child td { border-bottom: none; }

/* ===== Job Timeline panel ===== */
.timeline-panel {
  margin: 20px 0; background: #fff; border: 1px solid #e6e6e6;
  border-radius: 10px; padding: 18px 20px;
}
.timeline-head h2 { margin: 0 0 14px; font-size: 1.1rem; color: #333; }
.note-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.note-form textarea {
  width: 100%; padding: 9px 11px; border: 1px solid #ddd; border-radius: 6px;
  font-family: inherit; font-size: 0.93rem; resize: vertical;
}
.note-form-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.note-photo-btn {
  display: inline-block; padding: 6px 12px; background: #f5f5f5;
  border: 1px solid #ddd; border-radius: 6px; cursor: pointer; font-size: 0.85rem;
}
.note-photo-btn:hover { background: #ececec; }
.note-photo-previews { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.note-photo-thumb {
  width: 44px; height: 44px; object-fit: cover; border-radius: 4px; border: 1px solid #ddd;
}
.btn-save-note {
  margin-left: auto; padding: 7px 16px; background: #c0392b; color: #fff;
  border: none; border-radius: 6px; font-weight: 600; cursor: pointer;
}
.btn-save-note:hover:not(:disabled) { background: #a93226; }
.btn-save-note:disabled { opacity: 0.5; cursor: wait; }
.timeline-list { display: flex; flex-direction: column; gap: 12px; }
.timeline-item {
  display: flex; gap: 12px; padding: 10px 12px;
  border-left: 3px solid #ddd; background: #fafafa; border-radius: 0 6px 6px 0;
}
.timeline-item.is-note { border-left-color: #c0392b; background: #fff7f5; }
.timeline-icon { font-size: 1.2rem; line-height: 1.3; flex-shrink: 0; width: 24px; text-align: center; }
.timeline-body { flex: 1; min-width: 0; }
.timeline-meta { font-size: 0.88rem; color: #333; margin-bottom: 4px; }
.timeline-time { color: #888; font-weight: normal; margin-left: 6px; font-size: 0.8rem; }
.timeline-text { color: #444; font-size: 0.92rem; white-space: pre-wrap; word-wrap: break-word; }
.timeline-photos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.timeline-photos img {
  width: 80px; height: 80px; object-fit: cover; border-radius: 4px;
  border: 1px solid #ddd; cursor: pointer;
}
.timeline-actions { margin-top: 6px; font-size: 0.82rem; }
.link-btn {
  background: none; border: none; color: #c0392b; cursor: pointer; padding: 0;
  font-size: inherit; text-decoration: underline;
}
.link-btn.danger { color: #b03a2e; }
.link-btn:hover { opacity: 0.7; }

/* ===== COSTS PANEL (proposal page) ===== */
.costs-panel {
  background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
  padding: 18px 20px; margin: 18px auto; max-width: 900px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.costs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.costs-head h2 { margin: 0; font-size: 1.2rem; color: #222; }
.costs-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.costs-table th, .costs-table td { padding: 6px 8px; border-bottom: 1px solid #eee; text-align: left; vertical-align: middle; }
.costs-table th { font-weight: 600; color: #555; background: #f8f8f8; }
.cm-input { width: 100%; padding: 5px 7px; border: 1px solid #ddd; border-radius: 4px; font: inherit; box-sizing: border-box; }
.cm-input.cm-num { max-width: 110px; }
.cm-subtotal { font-weight: 600; color: #222; }
.cm-del { background: none; border: none; color: #c0392b; font-size: 1.4rem; cursor: pointer; line-height: 1; padding: 0 6px; }
.cm-del:hover { color: #8e1f15; }
.cm-add-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.cm-add-row input { padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px; font: inherit; }
.cm-add-row input[type="text"] { flex: 2 1 160px; }
.cm-add-row input[type="number"] { width: 110px; }
.costs-summary { margin-top: 14px; padding-top: 12px; border-top: 2px solid #e0e0e0; max-width: 360px; margin-left: auto; }
.cs-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.92rem; color: #444; }
.cs-row .cs-val { font-variant-numeric: tabular-nums; }
.cs-row small { color: #888; font-weight: 400; }
.cs-row-total { font-weight: 600; color: #222; border-top: 1px solid #eee; padding-top: 8px; margin-top: 6px; }
.cs-row-profit { font-weight: 700; font-size: 1rem; padding-top: 6px; }
.cs-row-profit.pos { color: #27ae60; }
.cs-row-profit.neg { color: #c0392b; }
.incomplete-pill {
  display: inline-block; background: #e8e8e8; color: #666;
  padding: 3px 10px; border-radius: 999px; font-size: 0.72rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
@media print { .costs-panel { display: none !important; } }

/* ===== DEFAULT MATERIALS EDITOR (in Service Catalog) ===== */
.default-materials-block { background: #fafafa; border: 1px solid #e8e8e8; border-radius: 8px; padding: 14px; margin: 12px 0; }
.default-materials-head h3 { margin: 0 0 4px; font-size: 1rem; color: #222; }
.default-materials-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.dm-row { display: flex; gap: 8px; align-items: center; }
.dm-row input { padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px; font: inherit; }
.dm-row input[type="text"] { flex: 2 1 180px; }
.dm-row input[type="number"] { width: 100px; }
.dm-del { background: none; border: none; color: #c0392b; font-size: 1.3rem; cursor: pointer; padding: 0 6px; }
.default-materials-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ===== PROFITABILITY PAGE ===== */
.profitability-page .prof-main { padding: 24px 32px; max-width: 1400px; margin: 0 auto; }
.prof-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.prof-header h1 { margin: 0; font-size: 1.6rem; color: #222; }
.prof-filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.prof-filter-bar label { font-size: 0.85rem; color: #555; display: flex; flex-direction: column; gap: 3px; }
.prof-filter-bar input[type="date"] { padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px; font: inherit; }
.prof-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi-tile { background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.kpi-label { font-size: 0.75rem; color: #777; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.kpi-value { font-size: 1.6rem; font-weight: 700; color: #222; font-variant-numeric: tabular-nums; }
.kpi-value.pos { color: #27ae60; } .kpi-value.neg { color: #c0392b; }
.prof-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 26px; }
.chart-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); min-height: 280px; }
.chart-card.chart-wide { grid-column: 1 / -1; }
.chart-card h3 { margin: 0 0 12px; font-size: 1rem; color: #333; }
.chart-card canvas { max-height: 320px; }
.prof-table-section h2 { font-size: 1.2rem; color: #222; margin: 0 0 10px; }
.prof-table-wrap { background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; overflow-x: auto; }
.prof-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.prof-table th, .prof-table td { padding: 9px 10px; border-bottom: 1px solid #eee; text-align: left; white-space: nowrap; }
.prof-table th { background: #f8f8f8; font-weight: 600; color: #555; user-select: none; }
.prof-table th:hover { background: #f0f0f0; }
.prof-table td.pos { color: #27ae60; font-weight: 600; }
.prof-table td.neg { color: #c0392b; font-weight: 600; }
.prof-table a { color: #c0392b; text-decoration: none; }
.prof-table a:hover { text-decoration: underline; }
@media (max-width: 800px) {
  .prof-charts { grid-template-columns: 1fr; }
  .profitability-page .prof-main { padding: 16px; }
}

/* ===== PUBLIC SITE / AUTH — namespaced to avoid internal UI regressions ===== */
.public-site {
  --ink: #17221f; --muted: #66716d; --paper: #f4f1e9; --cream: #fbfaf6;
  --rust: #c95d3b; --rust-dark: #9e432a; --sage: #b7c6a5; --line: #dce0d8;
  display: block; background: var(--paper); color: var(--ink); font-family: "Inter", sans-serif;
}
.public-site * { box-sizing: border-box; }
.public-site a { color: inherit; }
.public-nav { height: 76px; display:flex; align-items:center; gap:35px; padding: 0 clamp(20px,5vw,76px); border-bottom:1px solid rgba(23,34,31,.12); background:rgba(244,241,233,.92); position:relative; z-index:2; }
.public-brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; letter-spacing:.14em; font-size:12px; white-space:nowrap; }
.public-brand b { color:var(--rust); }
.platform-logo { display:block; width:auto; height:58px; object-fit:contain; }
.footer-logo { height:70px; }
.auth-logo { height:92px; }
.setup-platform-logo { display:block; width:112px; height:112px; object-fit:contain; margin:0 0 20px; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; color:var(--rust); }
.brand-mark svg { width:100%; height:100%; }
.public-links { display:flex; gap:26px; margin-left:auto; }
.public-links a,.text-link { font:600 12px inherit; color:var(--muted); text-decoration:none; background:none; border:0; cursor:pointer; }
.public-links a:hover,.text-link:hover { color:var(--rust); }
.public-actions { display:flex; align-items:center; gap:20px; }
.public-button,.outline-button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:50px; padding:0 21px; border:0; border-radius:2px; color:var(--cream); background:var(--rust); font:700 12px inherit; letter-spacing:.04em; text-decoration:none; cursor:pointer; transition:transform .25s,background .25s; }
.public-button:hover { background:var(--rust-dark); transform:translateY(-2px); }
.public-button span,.outline-button span { font-size:18px; font-weight:400; }
.public-button.small { min-height:39px; padding:0 15px; gap:10px; font-size:11px; }
.public-site main { max-width:none; width:auto; padding:0; }
.public-hero { max-width:1340px; margin:auto; min-height:610px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:7%; padding:82px clamp(24px,7vw,100px) 76px; }
.eyebrow { margin:0 0 19px; color:var(--rust); font-size:10px; font-weight:800; letter-spacing:.18em; }
.eyebrow span { display:inline-block; width:22px; height:2px; background:var(--rust); vertical-align:middle; margin-right:9px; }
.hero-copy h1,.section-intro h2,.control-copy h2,.fit-section h2 { font-family:Georgia,serif; font-weight:400; letter-spacing:-.045em; line-height:.98; font-size:clamp(45px,5.5vw,76px); margin:0; }
.public-site em { color:var(--rust); font-style:italic; }
.hero-lede { max-width:470px; color:var(--muted); line-height:1.65; font-size:16px; margin:28px 0; }
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
.outline-button { color:var(--ink); background:transparent; border:1px solid #bfc8be; }
.outline-button:hover { border-color:var(--rust); color:var(--rust); }
.hero-note { color:var(--muted); font-size:11px; margin-top:26px; }
.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#6f9c67; margin-right:7px; }
.hero-visual { background:#1c2b26; color:var(--cream); min-height:405px; padding:20px; box-shadow:17px 17px 0 var(--sage); transform:rotate(1.2deg); }
.visual-top,.visual-bottom,.dash-bar,.dash-footer { display:flex; justify-content:space-between; align-items:center; }
.live-tag { color:#d1dfc2; font-size:9px; letter-spacing:.15em; font-weight:800; }.live-tag i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#83b573;margin-right:6px}.visual-id{font-size:9px;color:#879791;letter-spacing:.12em}
.site-map { height:270px; margin:20px 0; overflow:hidden; position:relative; background:linear-gradient(137deg,#8b987f,#aeba9d 49%,#778a75); }
.map-grid { position:absolute; inset:0; opacity:.28; background:linear-gradient(30deg,transparent 47%,#eff0d7 48%,#eff0d7 49%,transparent 50%),linear-gradient(120deg,transparent 46%,#eff0d7 47%,#eff0d7 48%,transparent 49%); background-size:85px 85px,110px 110px; }
.map-road{position:absolute;background:#e9e4cf;transform:rotate(26deg);height:33px;width:130%;left:-15%;top:43%;box-shadow:0 0 0 3px rgba(55,74,61,.17)}.road-b{transform:rotate(-38deg);top:47%;background:#d8d7c1;height:20px}.measure{position:absolute;border:1px dashed #e9a083;color:#fff;background:#a54831e8;padding:5px 8px;font-size:8px;letter-spacing:.08em}.measure-a{left:24%;top:25%}.measure-b{right:13%;bottom:21%}.map-pin{position:absolute;width:13px;height:13px;background:var(--rust);border:3px solid #fff;border-radius:50%;box-shadow:0 2px 7px #243329}.pin-a{left:39%;top:39%}.pin-b{right:27%;bottom:31%}.visual-bottom small{display:block;color:#9ba8a0;font-size:9px;letter-spacing:.12em;margin-bottom:5px}.visual-bottom strong{font-size:25px;font-weight:500}.visual-bottom .green{color:#b8d6a3}.arrow-circle{border:1px solid #62756c;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;font-size:16px}
.signal-strip { background:#1c2b26; color:var(--cream); display:flex; align-items:center; gap:clamp(20px,4vw,65px); padding:20px clamp(24px,7vw,100px); font-size:11px; letter-spacing:.04em; }.signal-strip p{color:#819087;font-size:9px;letter-spacing:.13em;margin-right:auto}.signal-strip span{color:var(--rust);font-weight:800;margin-right:7px}
.public-section { max-width:1180px; margin:auto; padding:120px clamp(24px,5vw,60px); }.section-intro h2,.control-copy h2,.fit-section h2{font-size:clamp(39px,4.5vw,62px)}.feature-list{margin-top:70px;border-top:1px solid var(--line)}.feature-row{display:grid;grid-template-columns:45px 62px 1fr 25px;align-items:center;gap:22px;padding:28px 0;border-bottom:1px solid var(--line);transition:padding .3s}.feature-row:hover{padding-left:12px;padding-right:12px;background:#eeeade}.feature-index{font:12px monospace;color:var(--rust)}.feature-icon{width:46px;height:46px;border:1px solid #cbd3c7;display:grid;place-items:center;color:var(--rust)}.feature-icon svg{width:25px}.feature-row h3{font:600 18px inherit;margin:0 0 7px}.feature-row p{font-size:13px;line-height:1.55;color:var(--muted);margin:0;max-width:570px}.feature-arrow{font-size:23px;color:var(--rust)}
.control-section{max-width:none;background:#dce4d5;padding-left:clamp(24px,10vw,160px);padding-right:clamp(24px,10vw,160px)}.control-card{max-width:1120px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px}.control-copy>p:not(.eyebrow){color:#5d6b62;line-height:1.7;max-width:400px;margin:25px 0}.inline-link{color:var(--rust);font-weight:800;font-size:12px;text-decoration:none;border-bottom:1px solid var(--rust);padding-bottom:6px}.inline-link span{font-size:18px;margin-left:8px}.dashboard-art{background:#f8f6ee;padding:23px 25px;box-shadow:10px 10px 0 rgba(28,43,38,.13)}.dash-bar{color:#7c8980;font-size:9px;letter-spacing:.12em;border-bottom:1px solid var(--line);padding-bottom:15px}.dash-bar b{color:var(--ink)}.dash-number{font:36px Georgia,serif;margin:24px 0 20px}.dash-number small{display:block;font:10px inherit;color:#7c8980;letter-spacing:.1em;margin-top:5px}.chart{height:120px;border-bottom:1px solid #d6ded3;display:flex;align-items:end;gap:14px;padding:0 15px}.chart i{display:block;background:var(--sage);width:10%;min-height:15px}.chart i:nth-child(4),.chart i:nth-child(6){background:var(--rust)}.dash-footer{padding-top:16px;font-size:11px;color:#708078}.dash-footer b{color:var(--ink);margin-left:5px}.tiny{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px}.green-dot{background:#6f9c67}.amber-dot{background:#d89b51}
.fit-section{display:grid;grid-template-columns:1fr 1fr;gap:90px}.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.fit-grid strong{font-size:14px}.fit-grid p{font-size:13px;color:var(--muted);line-height:1.65;margin-top:9px}.closing-cta{background:var(--rust);color:var(--cream);padding:105px 24px;text-align:center}.closing-cta .eyebrow{color:#f6c1a8}.closing-cta .eyebrow span{background:#f6c1a8}.closing-cta h2{font:400 clamp(43px,6vw,78px)/.95 Georgia,serif;letter-spacing:-.05em;margin:0 0 35px}.public-button.light{background:var(--cream);color:var(--rust)}.public-button.light:hover{background:#fff}.closing-small{font-size:11px;color:#f5c6b4;margin-top:22px}.public-footer{display:flex;gap:30px;align-items:center;justify-content:space-between;padding:27px clamp(24px,7vw,100px);background:#17221f;color:#9ba9a0;font-size:11px}.public-footer .public-brand{color:var(--cream)}.small-mark{width:24px;height:24px}
.slug-dialog{border:0;padding:40px;max-width:450px;background:var(--cream);color:var(--ink);box-shadow:0 20px 70px #17221f55}.slug-dialog::backdrop{background:#17221f99}.dialog-close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:26px;color:var(--muted);cursor:pointer}.slug-dialog h2{font:400 35px Georgia,serif;letter-spacing:-.04em;margin:0 0 12px}.slug-dialog p:not(.eyebrow){color:var(--muted);font-size:13px;line-height:1.6}.slug-input,.with-prefix{display:flex;align-items:center;border:1px solid #c9d1c7;background:#fff;margin:22px 0 13px;color:#7b887e;font-size:12px}.slug-input input,.with-prefix input{border:0;outline:0;padding:14px 5px;min-width:0;flex:1;font:inherit;color:var(--ink);background:transparent}.slug-dialog form label{display:block;font-size:11px;font-weight:800;margin-top:20px}.slug-dialog form>a{display:block;color:var(--rust);font-size:11px;margin-top:18px}
.auth-page{min-height:100vh;background:var(--paper)}.public-site main.auth-shell{max-width:1280px;margin:auto;padding:32px clamp(20px,5vw,60px)}.auth-brand{margin-bottom:55px}.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(50px,8vw,110px);align-items:center}.auth-aside h1{font:400 clamp(42px,5vw,67px)/.98 Georgia,serif;letter-spacing:-.05em;max-width:490px;margin:0 0 25px}.auth-aside>p:not(.eyebrow){max-width:400px;color:var(--muted);line-height:1.7}.auth-aside ul{list-style:none;padding:25px 0 0;margin:25px 0 0;border-top:1px solid var(--line);max-width:430px}.auth-aside li{font-size:13px;padding:12px 0;display:flex;gap:15px}.auth-aside li span{font:11px monospace;color:var(--rust)}.auth-card{background:var(--cream);border:1px solid #e0e2d9;padding:37px 40px;box-shadow:9px 9px 0 var(--sage)}.auth-card h2{font:400 36px Georgia,serif;letter-spacing:-.04em;margin:0 0 8px}.auth-sub{font-size:13px;color:var(--muted);margin:0 0 26px;line-height:1.5}.form-field{margin-bottom:17px}.form-field label{display:block;font-size:11px;font-weight:800;margin-bottom:7px}.form-field input{width:100%;height:45px;border:1px solid #cbd2c8;background:#fff;padding:0 13px;font:13px inherit;color:var(--ink);outline:none}.form-field input:focus{border-color:var(--rust);box-shadow:0 0 0 3px #c95d3b22}.form-field small{display:block;font-size:10px;color:#89948c;margin-top:5px}.with-prefix{margin:0;background:#fff}.with-prefix span{padding:0 0 0 12px;white-space:nowrap}.with-prefix input{height:43px}.form-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.auth-submit{width:100%;margin-top:8px}.form-error{min-height:18px;color:#a8432c;font-size:12px;margin:12px 0 0}.auth-foot{text-align:center;color:var(--muted);font-size:11px;margin:25px 0 0}.auth-foot button{border:0;background:none;color:var(--rust);font:700 11px inherit;text-decoration:underline;cursor:pointer}.auth-legal{text-align:center;color:#8d978f;font-size:10px;margin:55px auto 0;max-width:620px;line-height:1.5}
@media(max-width:800px){.public-links{display:none}.public-nav{height:65px}.public-actions{margin-left:auto;gap:10px}.public-actions .text-link{display:none}.public-hero,.control-card,.fit-section{grid-template-columns:1fr}.public-hero{padding-top:58px;gap:60px}.hero-visual{box-shadow:8px 8px 0 var(--sage)}.signal-strip{overflow:auto;white-space:nowrap}.signal-strip p{display:none}.public-section{padding-top:75px;padding-bottom:75px}.control-card{gap:45px}.fit-grid{gap:20px}.public-footer{flex-wrap:wrap}.auth-grid{grid-template-columns:1fr;gap:45px}.auth-aside h1{font-size:48px}.auth-brand{margin-bottom:35px}.auth-card{padding:28px 22px}.auth-legal{margin-top:35px}}
@media(max-width:460px){.public-button.small{font-size:10px}.hero-ctas>*{width:100%}.feature-row{grid-template-columns:28px 45px 1fr 15px;gap:10px}.feature-row h3{font-size:15px}.feature-row p{font-size:12px}.feature-icon{width:40px;height:40px}.form-two{grid-template-columns:1fr}.slug-dialog{padding:30px 22px;margin:15px}}
@media(prefers-reduced-motion:reduce){.public-site *,.public-site *::before,.public-site *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.hero-visual{transform:none}}

/* === TENANT OPERATIONS SYSTEM === */
.tos-page{background:#f3f0e8;color:#17221f;font-family:Inter,-apple-system,sans-serif;display:block}
.tos-shell{max-width:1080px;margin:auto;padding:clamp(28px,6vw,72px) 22px 100px}
.tos-hero{display:flex;justify-content:space-between;gap:30px;align-items:end;border-bottom:1px solid #cfd4ca;padding-bottom:42px;margin-bottom:22px}
.tos-hero h1{font:400 clamp(42px,7vw,78px)/.95 Georgia,serif;letter-spacing:-.055em;max-width:650px;margin:0}
.tos-lede{max-width:570px;color:#637169;line-height:1.7;margin:22px 0 0}
.tos-status{font:700 11px/1.5 monospace;letter-spacing:.08em;text-transform:uppercase;color:#a94c34;white-space:nowrap}
.tos-kicker,.quote-kicker{font:800 10px monospace;letter-spacing:.15em;text-transform:uppercase;color:#a94c34;margin:0 0 12px}
.tos-panel{background:#fbfaf5;border:1px solid #d9ddd3;padding:clamp(22px,4vw,38px);margin:18px 0;box-shadow:5px 5px 0 #dce3d8}
.tos-panel h2{font:400 clamp(27px,4vw,40px)/1.05 Georgia,serif;letter-spacing:-.04em;margin:0 0 10px}
.tos-panel-head{display:flex;justify-content:space-between;gap:20px;align-items:start;margin-bottom:24px}.tos-muted{color:#75817a;font-size:13px;line-height:1.6}.tos-count{background:#e7eee4;color:#46624e;border-radius:20px;padding:7px 11px;font:700 11px monospace;white-space:nowrap}
.tos-state{padding:16px;border:1px dashed #bac7b9;color:#68766d;font-size:13px}.tos-trade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.tos-trade{display:flex;align-items:center;gap:11px;padding:14px;border:1px solid #d5dbd2;background:#fff;cursor:pointer;min-height:60px;transition:border-color .2s,background .2s}.tos-trade:hover,.tos-trade.is-selected{border-color:#a94c34;background:#f9eee9}.tos-trade input{position:absolute;opacity:0}.tos-check{width:17px;height:17px;border:1px solid #acb8ad;display:inline-block;flex:none;position:relative}.tos-trade.is-selected .tos-check{background:#a94c34;border-color:#a94c34}.tos-trade.is-selected .tos-check:after{content:"";position:absolute;width:7px;height:4px;border-left:2px solid white;border-bottom:2px solid white;transform:rotate(-45deg);left:4px;top:4px}.tos-trade b{display:block;font-size:13px}.tos-trade small{display:block;color:#8b958c;font-size:10px;margin-top:3px}.tos-custom-form{border-top:1px solid #e1e4dc;margin-top:25px;padding-top:20px}.tos-custom-form label{display:block;font:700 11px monospace;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}.tos-custom-form>div{display:flex;gap:8px}.tos-custom-form input,.tos-form input,.tos-form textarea,.tos-inline-form input,.tos-inline-form select,.tos-inline-form textarea{width:100%;border:1px solid #cbd3c8;background:#fff;padding:12px;font:13px Inter,sans-serif;color:#17221f;outline:none}.tos-form input:focus,.tos-form textarea:focus,.tos-custom-form input:focus,.tos-inline-form input:focus,.tos-inline-form select:focus,.tos-inline-form textarea:focus{border-color:#a94c34;box-shadow:0 0 0 3px #a94c3420}.tos-actions{display:flex;align-items:center;gap:15px;margin-top:22px}.tos-button{border:0;background:#a94c34;color:#fff;padding:13px 18px;font:700 11px Inter,sans-serif;letter-spacing:.06em;cursor:pointer;min-height:44px}.tos-button:hover{background:#863c2a}.tos-button:disabled{opacity:.5;cursor:wait}.tos-button-quiet{color:#17221f;background:#e5ebe2}.tos-button-quiet:hover{background:#d4dfd3}.tos-form{display:grid;grid-template-columns:repeat(2,1fr);gap:17px}.tos-form label{font:700 11px Inter,sans-serif}.tos-form input,.tos-form textarea{display:block;margin-top:7px}.tos-form textarea{min-height:90px;resize:vertical}.tos-wide{grid-column:1/-1}.tos-split{display:grid;grid-template-columns:1fr 1fr;gap:40px}.tos-inline-form{display:flex;gap:9px;align-items:start}.tos-inline-form textarea{min-height:70px}.tos-list{margin-top:16px}.tos-list p{border-top:1px solid #e1e4dc;padding:12px 0;margin:0;font-size:13px}.tos-list p span{color:#819087;font-size:11px}.tos-link{background:none;border:0;color:#a94c34;text-decoration:underline;cursor:pointer;margin-left:8px}.tos-thread{border:1px solid #d5dbd2;background:#fff;padding:11px 14px;color:#17221f;cursor:pointer;margin:4px}.tos-thread span{color:#a94c34}.tos-messages{padding:15px 0}.tos-messages p{background:#edf1eb;padding:11px;font-size:13px;margin:5px 0}
.quote-research{background:#1b2a25;color:#f3f0e8;border-color:#31463c;box-shadow:7px 7px 0 #b8c8b3}.quote-research .section-heading{color:#f3f0e8;margin:0 0 8px}.quote-research .tos-muted{color:#b7c6bb}.quote-research-head{display:flex;justify-content:space-between;gap:22px}.quote-intro{color:#b7c6bb;max-width:560px;font-size:13px;line-height:1.6}.quote-chip{display:inline-flex;align-items:center;gap:7px;background:#31463c;color:#d8e5d3;padding:8px 10px;font-size:11px;margin:3px}.quote-catalog-btn{background:#d3dfc9;color:#1b2a25;border:0;padding:5px 7px;font:700 9px Inter,sans-serif;cursor:pointer}.quote-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:1px solid #3d5448;margin-top:24px;padding-top:23px}.quote-form label{font-size:11px;font-weight:700;color:#d5e1d3}.quote-optional{font-size:10px;color:#91a398;font-weight:400}.quote-form input,.quote-form select,.quote-form textarea{display:block;width:100%;margin-top:7px;border:1px solid #506659;background:#253930;color:#f3f0e8;padding:12px;font:13px Inter,sans-serif;outline:none}.quote-form textarea{min-height:80px;resize:vertical}.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{border-color:#d8b49b;box-shadow:0 0 0 3px #d8b49b33}.quote-submit-row{display:flex;gap:15px;align-items:center}.quote-drafts{margin-top:27px}.quote-empty{border:1px dashed #506659;padding:22px;display:flex;flex-direction:column;gap:6px;color:#b7c6bb;font-size:13px}.quote-draft{background:#fbfaf5;color:#17221f;padding:22px;margin-top:14px;border-left:4px solid #b84f36}.quote-draft-top,.quote-draft-foot{display:flex;justify-content:space-between;gap:15px;align-items:start}.quote-draft h3{font:400 25px Georgia,serif;margin:0}.quote-badge{font:800 9px monospace;letter-spacing:.08em;color:#a94c34;border:1px solid #dfb4a4;padding:7px;white-space:nowrap}.quote-ranges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:21px 0}.quote-ranges>div{background:#edf1eb;padding:13px}.quote-ranges span,.quote-ranges b{display:block}.quote-ranges span{font-size:10px;text-transform:uppercase;color:#78847c;letter-spacing:.1em}.quote-ranges b{font-size:21px;margin-top:5px}.quote-ranges .is-typical{background:#f8e7df;color:#8e412d}.quote-draft-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:25px;border-top:1px solid #e0e3db;padding-top:16px}.quote-draft h4{font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 10px}.quote-line{display:grid;grid-template-columns:1fr .7fr auto;gap:8px;padding:9px 0;border-bottom:1px solid #e9ebe5;font-size:12px}.quote-line span:nth-child(2){color:#8a958d}.quote-draft ul{margin:0;padding-left:18px;color:#67746c;font-size:12px;line-height:1.7}.quote-confidence{font-size:12px;color:#67746c}.quote-sources{border-top:1px solid #e0e3db;margin-top:17px;padding-top:14px;font-size:11px}.quote-sources a{color:#a94c34;margin-left:10px}.quote-draft-foot{border-top:1px solid #e0e3db;margin-top:14px;padding-top:13px;color:#839087;font-size:10px}.quote-action{border:1px solid #ccd5ca;background:#fff;padding:8px 10px;color:#657269;font:700 10px Inter,sans-serif;cursor:pointer;margin-left:5px}.quote-approve{background:#2e6b4d;color:#fff;border-color:#2e6b4d}.quote-status{color:#a94c34;font:700 10px monospace;text-transform:uppercase}.quote-disclaimer{font-size:10px;color:#8b958c;margin:13px 0 0}
@media(max-width:700px){.tos-hero,.quote-research-head,.tos-split{display:block}.tos-status{margin-top:22px}.tos-trade-grid{grid-template-columns:1fr 1fr}.tos-form,.quote-form,.quote-draft-grid{grid-template-columns:1fr}.tos-wide{grid-column:auto}.quote-wide{grid-column:1}.quote-draft-top,.quote-draft-foot{display:block}.quote-badge{display:inline-block;margin-top:15px}.quote-draft-foot>*{display:block;margin-top:9px}.tos-inline-form{flex-wrap:wrap}.tos-inline-form>*{flex:1 1 100%}}
@media(max-width:430px){.tos-trade-grid{grid-template-columns:1fr}.tos-custom-form>div,.tos-actions{display:block}.tos-custom-form button,.tos-actions button{margin-top:9px}.quote-ranges b{font-size:16px}.quote-line{grid-template-columns:1fr auto}.quote-line span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){.tos-page *,.quote-research *{transition:none!important;animation:none!important}}