:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --ink: #17253d;
  --muted: #718198;
  --line: #e5ebf3;
  --primary: #1167d8;
  --primary-dark: #0b51b0;
  --danger: #bd3543;
  --shadow: 0 10px 28px rgba(20, 38, 62, .06);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}
a { color: var(--primary); text-decoration: none; }
h1, h2, p { margin: 0; }
h1 { font-size: 28px; line-height: 1.25; margin-top: 3px; }
h2 { font-size: 18px; }
small, .muted { color: var(--muted); }
.brand { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.brand strong { display: block; font-size: 16px; }
.brand small { display: block; font-size: 12px; }
.brand-mark {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  color: white; font-size: 22px; font-weight: 700;
  background: linear-gradient(145deg, #1167d8, #43b7db);
}
.link-button {
  border: 0; background: transparent; color: var(--primary);
  padding: 0; cursor: pointer; font: inherit;
}
.app-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  padding: 18px 12px; background: #10245a; color: #dce7ff;
  box-shadow: 12px 0 30px rgba(16, 36, 90, .13); z-index: 20;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 11px; padding: 5px 8px 18px;
  margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.sidebar-brand strong { display: block; color: #fff; font-size: 15px; }
.sidebar-brand small { display: block; color: rgba(220, 231, 255, .7); font-size: 12px; }
.side-nav { display: flex; flex-direction: column; gap: 10px; flex: 1; overflow-y: auto; padding: 4px 0; }
.nav-group { display: grid; gap: 5px; }
.nav-group-label {
  display: block; padding: 8px 10px 2px; color: rgba(220, 231, 255, .48);
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
}
.side-nav a {
  display: flex; align-items: center; gap: 10px; min-height: 42px;
  padding: 9px 10px; border-radius: 8px; color: rgba(229, 238, 255, .82);
  font-weight: 600; transition: background .16s, color .16s;
}
.side-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.side-nav a.active {
  background: #1d63ff; color: #fff; box-shadow: 0 8px 18px rgba(29, 99, 255, .28);
}
.nav-icon {
  display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px;
  border-radius: 7px; background: rgba(255, 255, 255, .1); font-size: 13px; font-weight: 700;
}
.side-nav a.active .nav-icon { background: rgba(255, 255, 255, .18); }
.sidebar-account {
  display: grid; gap: 8px; margin-top: 12px; padding: 12px;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px;
  background: rgba(6, 16, 43, .22); color: rgba(229, 238, 255, .78);
}
.sidebar-account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account .link-button { justify-self: start; color: #fff; font-weight: 700; }
.container { width: min(1200px, calc(100% - 44px)); margin: 34px auto 60px; }
.container.app-main { width: min(1280px, calc(100% - 44px)); margin-top: 28px; }
.page-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px; gap: 20px;
}
.eyebrow {
  font-size: 12px; color: var(--primary); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.button {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--primary); border-radius: 8px; padding: 9px 16px;
  background: var(--primary); color: white; font: inherit; font-weight: 700; cursor: pointer;
  min-height: 42px; white-space: nowrap;
  transition: background .16s, border-color .16s, box-shadow .16s, transform .16s;
}
.button:hover { background: var(--primary-dark); box-shadow: 0 6px 16px rgba(17, 103, 216, .16); }
.button:active { transform: translateY(1px); }
.button:disabled,
.mini-button:disabled {
  cursor: wait; opacity: .68; pointer-events: none;
}
.button.secondary { color: var(--primary); background: white; }
.button.secondary:hover { background: #f4f8ff; }
.button.danger { background: var(--danger); border-color: var(--danger); }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 24px; box-shadow: var(--shadow);
}
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  padding: 18px 20px; box-shadow: var(--shadow);
}
.stat span, .stat small { display: block; }
.stat strong { display: block; font-size: 32px; margin: 5px 0 1px; }
.dashboard-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 18px; margin-bottom: 18px; }
.workflow-panel { margin-bottom: 18px; }
.workflow-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
}
.workflow-step {
  min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px;
  background: #f8fbff; color: var(--ink);
}
.workflow-step span, .workflow-step small { display: block; color: var(--muted); }
.workflow-step strong {
  display: block; margin: 5px 0 2px; font-size: 22px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-title {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px;
}
.follow-row {
  display: flex; justify-content: space-between; align-items: center; color: var(--ink);
  padding: 13px 0; border-top: 1px solid var(--line);
}
.follow-row div small { display: block; }
.follow-row time { color: var(--muted); }
.follow-row.overdue time { color: var(--danger); font-weight: 600; }
.stage-row { display: flex; justify-content: space-between; padding: 13px 0; border-top: 1px solid var(--line); }
.lead-grid { display: grid; grid-template-columns: 390px minmax(520px, 1fr); gap: 18px; align-items: start; margin-bottom: 18px; }
.lead-create .field { margin-bottom: 15px; }
.lead-note { margin: -8px 0 19px; }
.lead-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.lead-checkbox { min-height: 45px; align-items: center; margin-bottom: 15px; }
.lead-sources { display: block; }
.source-checkboxes {
  display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 8px;
}
.source-card {
  display: grid; grid-template-columns: 22px 32px minmax(0, 1fr) auto; gap: 10px;
  align-items: center; min-height: 58px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #f8fbff;
  color: var(--ink); cursor: pointer; transition: border-color .16s, background .16s;
}
.source-card:hover { border-color: #bdd1ec; background: #fff; }
.source-card input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.source-check-placeholder { width: 16px; height: 16px; border: 1px solid #c9d4e4; border-radius: 3px; background: #fff; }
.source-icon {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 8px; background: #eef5ff; font-size: 18px;
}
.source-body { min-width: 0; }
.source-body strong {
  display: block; line-height: 1.25; overflow: hidden; text-overflow: ellipsis;
}
.source-body small { display: block; margin-top: 3px; line-height: 1.25; }
.source-body em {
  display: block; margin-top: 5px; color: #53657e; font-size: 12px;
  font-style: normal; line-height: 1.3; overflow: hidden; text-overflow: ellipsis;
}
.source-card.disabled {
  opacity: .55; cursor: not-allowed; background: #f4f6f9;
}
.source-card-bind { cursor: default; }
.source-card-bind:hover { border-color: var(--line); background: #f8fbff; }
.mini-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 72px; padding: 7px 10px; border: 1px solid var(--primary);
  border-radius: 8px; background: #fff; color: var(--primary);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.location-picker {
  border: 1px solid var(--line); border-radius: 10px; background: #f8fbff;
  padding: 10px;
}
.location-select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.location-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.location-actions .button { padding: 9px 12px; }
.location-helper { margin-top: 8px; color: var(--muted); font-size: 13px; }
.location-selected { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.location-tag {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px;
  border-radius: 8px; background: #eaf2ff; color: var(--ink); font-size: 13px;
}
.location-tag button {
  padding: 0 4px; border: 0; background: transparent; font-weight: 700;
  color: var(--ink); cursor: pointer;
}
.lead-jobs { padding: 20px; }
.lead-jobs table { font-size: 13px; }
.lead-jobs td { padding: 12px 8px; }
.lead-location { display: block; margin-top: 4px; color: var(--muted); }
.lead-filter { align-items: center; }
.lead-filter strong { flex: 1; font-size: 18px; }
.lead-period-panel {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 15px 18px; margin-bottom: 16px;
}
.lead-period-panel strong { display: block; font-size: 16px; }
.lead-period-panel small { display: block; margin-top: 2px; }
.period-tabs {
  display: inline-flex; flex: 0 0 auto; gap: 8px; align-items: center;
  width: auto; overflow: visible;
}
.period-tab {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; padding: 8px 13px; border: 1px solid var(--line);
  border-radius: 8px; color: #53657e; background: #fff; font-weight: 600;
}
.period-tab.active {
  color: #fff; background: var(--primary); border-color: var(--primary);
}
.lead-score {
  display: inline-flex; min-width: 45px; justify-content: center; border-radius: 100px;
  padding: 4px 10px; font-weight: 700;
}
.score-high { color: #087443; background: #def7e8; }
.score-mid { color: #a05a00; background: #fff0d5; }
.score-low { color: #53657e; background: #eef3f9; }
.email-check {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 58px; border-radius: 999px; padding: 5px 10px;
  font-weight: 700; font-size: 13px; white-space: nowrap;
}
.email-check-valid { color: #087443; background: #def7e8; }
.email-check-risk { color: #a05a00; background: #fff0d5; }
.email-check-invalid { color: #bd3543; background: #ffe4e8; }
.email-check-unknown { color: #53657e; background: #eef3f9; }
.email-check-none { color: #718198; background: #f2f5f9; }
.lead-convert { padding: 7px 12px; font-size: 13px; white-space: nowrap; }
.lead-results-table {
  min-width: 1240px;
  table-layout: fixed;
}
.lead-results-table .lead-col-company { width: 22%; }
.lead-results-table .lead-col-website { width: 18%; }
.lead-results-table .lead-col-contact { width: 17%; }
.lead-results-table .lead-col-score { width: 180px; }
.lead-results-table .lead-col-email-check { width: 190px; }
.lead-results-table .lead-col-status { width: 190px; }
.lead-results-table .lead-col-action { width: 112px; }
.lead-results-table td { vertical-align: middle; }
.lead-results-table td:nth-child(1),
.lead-results-table td:nth-child(2),
.lead-results-table td:nth-child(3) {
  overflow-wrap: anywhere;
}
.score-parts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 7px;
}
.score-parts span {
  display: flex; align-items: center; justify-content: space-between;
  gap: 5px; padding: 4px 6px; border-radius: 6px;
  background: #f2f6fb; color: #53657e; font-size: 12px;
}
.score-parts b { color: var(--ink); font-size: 12px; }
.lead-filter input[name="min_score"] { max-width: 96px; }
.product-match-layout {
  display: grid; grid-template-columns: 390px minmax(520px, 1fr); gap: 18px; align-items: start; margin-bottom: 18px;
}
.product-match-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-match-create h2 { margin-bottom: 8px; }
.product-match-note { margin-bottom: 18px; }
.form-hint {
  margin: -2px 0 14px; color: var(--muted); font-size: 13px;
}
.form-hint.is-loading {
  color: var(--primary); font-weight: 700;
}
.is-submitting {
  opacity: .82;
}
.product-match-create .field { margin-bottom: 15px; }
.product-channel-grid { margin-bottom: 16px; }
.product-channel-card .source-icon { font-size: 13px; font-weight: 800; }
.source-overview-panel { margin-bottom: 18px; }
.source-overview-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.source-overview-card {
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  padding: 16px; box-shadow: var(--shadow);
}
.source-overview-head {
  display: flex; gap: 10px; align-items: center; min-width: 0; margin-bottom: 12px;
}
.source-overview-head strong,
.source-overview-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-overview-card p {
  margin-bottom: 5px; color: var(--ink); font-size: 20px; font-weight: 800;
}
.source-overview-card > small { display: block; overflow-wrap: anywhere; }
.product-job-focus {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px; margin-bottom: 18px;
}
.product-job-image {
  display: grid; place-items: center; min-height: 190px;
  border: 1px solid var(--line); border-radius: 12px; background: #f4f7fb;
  color: var(--muted); overflow: hidden;
}
.product-job-image img {
  width: 100%; height: 100%; max-height: 230px; object-fit: contain; display: block;
}
.product-job-detail dl {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 0 0 14px;
}
.product-job-detail dl div {
  min-width: 0; border-top: 1px solid var(--line); padding-top: 8px;
}
.product-job-detail dt { color: var(--muted); }
.product-job-detail dd {
  margin: 2px 0 0; color: var(--ink); overflow-wrap: anywhere;
}
.product-job-log {
  margin: 0; padding: 12px 14px 12px 28px; border-radius: 10px;
  background: #f8fbff; color: #53657e;
}
.product-job-log li + li { margin-top: 4px; }
.job-progress {
  display: grid; gap: 6px; min-width: 150px;
}
.job-progress-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--muted); font-size: 12px;
}
.job-progress-status {
  display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px;
  border-radius: 999px; color: var(--primary); background: #eaf2ff; font-weight: 800;
}
.job-progress-head strong { color: var(--ink); font-size: 12px; }
.job-progress-track {
  width: 100%; height: 8px; border-radius: 999px; overflow: hidden;
  background: #eaf0f8;
}
.job-progress-fill {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #1167d8, #28a4db);
  transition: width .25s ease;
}
.job-progress-latest {
  display: block; max-width: 360px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.job-progress-meta {
  color: var(--muted);
  display: block;
  font-size: 12px;
}
.product-match-results { margin-top: 18px; }
.product-result-title {
  gap: 14px; align-items: flex-start;
}
.product-result-title > div { min-width: 0; }
.product-match-result-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.product-match-card {
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.product-match-card:hover {
  border-color: #c7d6e8; box-shadow: 0 10px 26px rgba(15, 36, 66, .08); transform: translateY(-1px);
}
.product-match-image {
  position: relative; display: grid; place-items: center; height: 270px; overflow: hidden;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
  border-bottom: 1px solid var(--line); color: var(--muted);
}
.product-match-image img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center;
}
.product-match-body {
  position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column;
  padding: 14px; background: #fff;
}
.match-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.match-badges span {
  display: inline-flex; padding: 4px 8px; border-radius: 999px;
  background: #eaf2ff; color: var(--primary); font-size: 12px; font-weight: 700;
}
.product-match-body h3 {
  min-height: 42px; margin: 0 0 12px; font-size: 15px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-match-body dl { display: grid; gap: 8px; margin: 0 0 10px; }
.product-match-body dl div {
  display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 8px;
}
.product-match-body dt { color: var(--muted); }
.product-match-body dd { margin: 0; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.product-match-body small {
  display: -webkit-box; overflow: hidden; color: var(--muted); line-height: 1.7;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.product-match-filter { flex-wrap: wrap; margin: 0 0 16px; padding: 0; box-shadow: none; border: 0; }
.product-match-filter select { min-width: 150px; }
.match-open-link {
  width: 100%; margin-top: auto; padding: 8px 12px;
}
.match-review-form {
  display: grid; grid-template-columns: minmax(108px, 1fr) auto; gap: 8px; margin-top: 12px;
}
.match-review-form select { padding: 8px 10px; }
.match-review-form .button { padding: 8px 12px; }
.inline-status-form {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 166px;
}
.inline-status-form select { padding: 8px 10px; }
.inline-status-form .button { padding: 8px 11px; white-space: nowrap; }
.filters { display: flex; gap: 12px; margin-bottom: 18px; padding: 16px; }
.filters .button { white-space: nowrap; }
input, select, textarea {
  width: 100%; border: 1px solid #d8e0eb; border-radius: 8px;
  padding: 10px 12px; background: white; color: var(--ink); font: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(17, 103, 216, .17); border-color: var(--primary);
}
.filters input { flex: 1; }
.filters select { width: 180px; }
.table-card { padding: 20px 22px; }
.table-actions { display: flex; align-items: center; gap: 14px; }
.row-action-buttons { display: flex; flex-wrap: wrap; gap: 8px; min-width: 136px; }
.row-action-buttons form { margin: 0; }
.danger-mini { border-color: #f0c5cb; color: var(--danger); }
.bulk-email-button { padding: 8px 14px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 10px 12px; }
td { padding: 14px 12px; border-top: 1px solid var(--line); }
.select-cell { width: 56px; text-align: center; }
.select-cell input { width: 17px; height: 17px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.customer-name { display: block; font-weight: 600; color: var(--ink); }
.customer-name + small { display: block; }
.customer-tags { max-width: 180px; word-break: break-word; color: #4e617c; }
.products-title { margin: 7px 0 16px; }
.product-list {
  display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px;
}
.product-row {
  display: grid; grid-template-columns: 112px minmax(220px, 1.7fr) minmax(130px, 1fr) minmax(150px, 1.1fr) minmax(95px, .65fr) 78px;
  align-items: center; gap: 18px; padding: 12px 18px 12px 12px;
  color: var(--ink); background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; transition: border-color .18s, box-shadow .18s;
}
.product-row:hover {
  border-color: #c1d2e8; box-shadow: 0 8px 24px rgba(15, 36, 66, .08);
}
.product-row-image {
  display: grid; place-items: center; width: 112px; height: 112px;
  color: var(--muted); background: #f7f9fc; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.product-row-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-row-main { min-width: 0; }
.product-model { color: var(--muted); margin-bottom: 5px; }
.product-row h3 { font-size: 17px; line-height: 1.35; margin: 5px 0 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-category { color: var(--muted); font-size: 13px; }
.product-row-field { min-width: 0; }
.product-row-field small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 7px; }
.product-row-field strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-row-field.price span {
  display: block; margin-top: 5px; color: #47617f; font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.product-row-field.attachments strong { color: var(--primary); }
.product-empty { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.badge {
  display: inline-flex; align-items: center; border-radius: 100px;
  padding: 4px 10px; font-size: 12px; font-weight: 600; margin-top: 8px;
}
.status-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; padding: 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 800; white-space: nowrap;
  color: #43536a; background: #eef3f9;
}
.status-pill-0 { color: #53657e; background: #eef3f9; }
.status-pill-1 { color: #135ec2; background: #e9f1ff; }
.status-pill-2 { color: #0780a8; background: #e9f7ff; }
.status-pill-3 { color: #a26900; background: #fff2d9; }
.status-pill-4 { color: #7049c8; background: #f3eaff; }
.status-pill-5 { color: #09713a; background: #e2f7eb; }
.status-pill-6 { color: #0d6a4a; background: #dbf6ef; }
.status-pill-7 { color: #a62c38; background: #fce9ea; }
.table-progress {
  display: flex; align-items: center; gap: 8px; margin-top: 7px;
}
.progress-mini {
  display: block; width: 92px; height: 7px; border-radius: 999px;
  overflow: hidden; background: #eaf0f8;
}
.progress-mini span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #1167d8, #19a66a);
}
.table-progress small { color: var(--muted); font-size: 11px; }
.stage-0 { background: #e9f1ff; color: #135ec2; }
.stage-1 { background: #e9f7ff; color: #0780a8; }
.stage-2 { background: #fff2d9; color: #a26900; }
.stage-3 { background: #f3eaff; color: #7049c8; }
.stage-4 { background: #e2f7eb; color: #09713a; }
.stage-5 { background: #fce9ea; color: #a62c38; }
.level-badge { display: inline-flex; white-space: nowrap; border-radius: 100px; padding: 4px 10px; font-size: 12px; font-weight: 600; }
.level-0 { background: #fde7ea; color: #b42338; }
.level-1 { background: #fff0d5; color: #a05a00; }
.level-2 { background: #def7e8; color: #087443; }
.level-3 { background: #e6f2ff; color: #1167d8; }
.level-4 { background: #f1f4f8; color: #66758b; }
.form-card { padding: 25px; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-bottom: 17px; }
.form-grid.compact { grid-template-columns: repeat(3, 1fr); }
.field { display: block; }
.field span { display: block; margin-bottom: 6px; color: #4e617c; font-weight: 500; }
.field.full { margin: 4px 0 20px; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.page-head .actions { justify-content: flex-end; }
.detail-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 18px; margin-bottom: 18px; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 14px; }
.info-grid strong { display: block; margin-top: 4px; word-break: break-word; }
.purchase-price .usd-label { display: block; margin-top: 13px; color: var(--muted); }
.purchase-price .usd-value { color: var(--primary); font-size: 18px; }
.purchase-price .usd-note {
  display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.45;
}
.notes { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; white-space: pre-wrap; }
.activity-form h2 { margin-bottom: 18px; }
.activity-form .button { margin-top: 8px; }
.contact-tools { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 22px; }
.contact-tools .card-title { margin-bottom: 8px; }
.contact-identity { font-size: 12px; margin-bottom: 15px; }
.contact-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-buttons .button { margin-top: 0; }
.contact-whatsapp { background: #14a85a; border-color: #14a85a; }
.contact-whatsapp:hover { background: #0b8745; border-color: #0b8745; }
.contact-disabled { cursor: not-allowed; color: var(--muted); background: #f4f7fb; border-color: var(--line); }
.contact-tip { margin-top: 13px; font-size: 12px; }
.direct-email-form { margin: 15px 0 19px; padding: 17px; border-radius: 10px; background: #f7f9fc; }
.direct-email-form .field { margin-bottom: 13px; }
.direct-email-form .field.full { margin: 0 0 13px; }
.bulk-email-layout { display: grid; grid-template-columns: minmax(430px, 1fr) 390px; gap: 18px; align-items: start; }
.bulk-compose h2 { margin-bottom: 6px; }
.bulk-tip { margin-bottom: 19px; }
.bulk-compose .field { margin-bottom: 17px; }
.recipient-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(150px, 1.2fr); gap: 7px 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.recipient-row span { word-break: break-word; }
.recipient-row small { grid-column: 2; color: var(--danger); }
.recipient-row.invalid { color: var(--muted); }
.timeline-panel { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; }
.timeline-panel .card-title { margin-bottom: 15px; }
.timeline-item { display: grid; grid-template-columns: 16px 1fr; column-gap: 14px; padding: 2px 0 19px; }
.dot { background: var(--primary); width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; }
.timeline-head { display: flex; gap: 18px; align-items: center; margin-bottom: 5px; }
.timeline-head time { color: var(--muted); font-size: 13px; }
.timeline-item p { white-space: pre-wrap; }
.next { display: inline-flex; margin-top: 7px; background: #edf4ff; padding: 3px 8px; border-radius: 6px; }
.danger-zone { text-align: right; }
.danger-link { border: 0; background: transparent; color: var(--danger); cursor: pointer; }
.confirm-card { max-width: 560px; margin: 82px auto; }
.confirm-card p { margin: 15px 0 25px; }
.empty, .empty-row { text-align: center; padding: 46px; color: var(--muted); }
.import-card { max-width: 850px; }
.import-card p { margin-bottom: 16px; }
.import-card textarea { margin-bottom: 16px; }
.export-intro { margin-bottom: 18px; }
.export-intro h2 { margin-bottom: 6px; }
.export-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.export-card { display: flex; flex-direction: column; gap: 16px; min-height: 260px; }
.export-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.export-card-head strong {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 54px; height: 38px; padding: 0 12px; border-radius: 10px;
  color: var(--primary); background: #eaf2ff; font-size: 22px;
}
.export-card p { color: #53657e; }
.export-meta {
  display: grid; gap: 10px; margin: auto 0 0; padding-top: 2px;
}
.export-meta div {
  display: flex; justify-content: space-between; gap: 14px;
  padding-top: 9px; border-top: 1px solid var(--line);
}
.export-meta dt { color: var(--muted); }
.export-meta dd { margin: 0; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.settings-layout { display: grid; grid-template-columns: repeat(2, minmax(360px, 520px)); gap: 18px; align-items: start; }
.settings-card { max-width: 520px; }
.settings-card h2 { margin-bottom: 18px; }
.settings-card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.settings-card-title h2 { margin-bottom: 0; }
.settings-card .field { margin-bottom: 17px; }
.settings-intro { margin: -8px 0 18px; }
.settings-subtitle { margin: 25px 0 15px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }
.smtp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.password-status { margin: -8px 0 13px; font-size: 12px; }
.cookie-help {
  margin: -7px 0 15px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #f8fbff;
  color: #53657e;
  font-size: 12px;
}
.cookie-help strong { display: block; color: var(--ink); margin-bottom: 6px; }
.cookie-help ol { margin: 0; padding-left: 18px; }
.cookie-help li + li { margin-top: 4px; }
.checkbox-field { display: flex; align-items: center; gap: 8px; margin: 0 0 19px; color: #4e617c; }
.checkbox-field input { width: auto; margin: 0; }
.account-status {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 4px 10px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.account-status.ok { color: #0a6f3c; background: #e0f6ea; }
.account-status.warn { color: #8a5a05; background: #fff1c9; }
.settings-actions { display: flex; gap: 10px; flex-wrap: wrap; }
#search-providers { grid-column: 1 / -1; max-width: 1058px; }
.search-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 17px; }
.search-provider-card { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: #fbfcfe; }
.search-provider-card .settings-card-title { margin-bottom: 10px; }
.search-provider-card h3 { margin: 0; font-size: 15px; }
.search-provider-card p { margin-bottom: 14px; }
.search-provider-card .field { margin-bottom: 12px; }
.search-provider-card .checkbox-field { margin-bottom: 12px; }
.template-new { margin-bottom: 18px; }
.template-new h2 { margin-bottom: 17px; }
.template-new-grid { display: grid; grid-template-columns: 180px 1fr 1.2fr; gap: 14px; margin-bottom: 17px; }
.template-grid { display: grid; grid-template-columns: repeat(2, minmax(370px, 1fr)); gap: 18px; }
.template-card .card-title { margin-bottom: 17px; }
.template-kind { border-radius: 100px; padding: 4px 10px; background: #eaf2ff; color: var(--primary); font-size: 12px; font-weight: 600; }
.template-card .field { margin-bottom: 14px; }
.template-builtin, .template-delete-form { margin-top: 14px; }
.email-template-field select { border-color: #b8cee9; background: #f7fbff; }
.email-attachment small { display: block; margin-top: 6px; color: var(--muted); }
.template-section-head { margin: 28px 0 15px; }
.template-section-head h2 { margin-bottom: 5px; }
.document-template-grid { display: grid; grid-template-columns: repeat(2, minmax(320px, 1fr)); gap: 18px; }
.document-file { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 18px; padding: 12px; background: #f7f9fc; border-radius: 8px; }
.document-actions { margin-bottom: 21px; }
.document-replace-form { border-top: 1px solid var(--line); padding-top: 17px; }
.document-replace-form .field { margin-bottom: 13px; }
.catalog-view {
  margin-bottom: 18px;
}
.catalog-info {
  display: grid; grid-template-columns: minmax(530px, 1fr) 350px;
  align-items: start; gap: 18px;
}
.product-summary-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 22px; align-items: start;
}
.product-summary-grid .info-grid { grid-template-columns: 1fr 1fr; }
.appearance-card small { display: block; color: var(--muted); margin-bottom: 7px; }
.appearance-image {
  display: block; width: 210px; height: 210px; padding: 0; border-radius: 9px;
  overflow: hidden; cursor: zoom-in; border: 1px solid var(--line); background: #f8fafc;
}
.appearance-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.appearance-empty {
  display: grid; place-items: center; width: 210px; height: 210px;
  border: 1px dashed #d4deec; border-radius: 9px; color: var(--muted); background: #fafbfd;
}
.upload-card h2 { margin-bottom: 9px; }
.upload-card p { margin-bottom: 19px; }
.upload-card .field { margin-bottom: 16px; }
.asset-library { margin-bottom: 18px; }
.asset-title-actions { display: flex; align-items: center; gap: 18px; }
.asset-download-selected { padding: 7px 13px; font-size: 13px; }
.asset-download-selected:disabled { opacity: .48; cursor: not-allowed; }
.asset-filters { display: flex; flex-wrap: wrap; gap: 9px; margin: 17px 0; }
.asset-filter {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line);
  border-radius: 20px; padding: 7px 12px; background: white; color: #4e617c; cursor: pointer;
}
.asset-filter span {
  min-width: 18px; padding: 1px 6px; border-radius: 12px; background: #eef3f9; font-size: 12px;
}
.asset-filter.active { color: white; background: var(--primary); border-color: var(--primary); }
.asset-filter.active span { color: var(--primary); background: white; }
.asset-layout { display: grid; grid-template-columns: minmax(430px, 1fr) 300px; gap: 18px; align-items: start; }
.asset-file-preview {
  padding: 0; border: 0; color: var(--primary); background: transparent;
  font: inherit; text-align: left; cursor: zoom-in;
}
.asset-actions { display: flex; align-items: center; gap: 16px; }
.asset-actions form { margin: 0; }
.download-link { color: var(--primary); font-size: 14px; }
.asset-select-cell { width: 40px; padding-left: 4px; padding-right: 4px; }
.asset-select-cell input { width: 17px; height: 17px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.asset-preview-panel {
  min-height: 300px; display: grid; place-items: center; border: 1px dashed #d4deec;
  border-radius: 9px; background: #fafbfd; overflow: hidden;
}
.asset-preview-empty { color: var(--muted); font-size: 13px; padding: 20px; text-align: center; }
.asset-preview-image {
  position: relative; display: block; width: 100%; padding: 0;
  border: 0; background: white; cursor: zoom-in;
}
.asset-preview-image[hidden] { display: none; }
.asset-preview-image img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.asset-preview-image span {
  position: absolute; right: 10px; bottom: 10px; padding: 5px 10px;
  border-radius: 20px; color: white; font-size: 12px; background: rgba(16, 27, 44, .58);
}
.media-card { position: sticky; top: 18px; }
.asset-table { margin-bottom: 18px; }
.product-gallery { max-width: 620px; }
.gallery-main {
  position: relative; display: block; width: min(100%, 560px); padding: 0;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: white; cursor: zoom-in;
}
.gallery-main img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.gallery-main span {
  position: absolute; right: 12px; bottom: 12px; padding: 6px 11px;
  border-radius: 20px; color: white; font-size: 12px; background: rgba(16, 27, 44, .58);
}
.gallery-thumbs { display: flex; gap: 10px; overflow-x: auto; padding-top: 12px; }
.gallery-thumb {
  flex: 0 0 72px; width: 72px; height: 72px; padding: 3px; background: white;
  border: 1px solid var(--line); border-radius: 7px; cursor: pointer;
}
.gallery-thumb.selected { border: 2px solid var(--primary); padding: 2px; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery-lightbox {
  position: fixed; z-index: 50; inset: 0; display: grid; place-items: center;
  padding: 36px; background: rgba(5, 12, 24, .8);
}
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox img {
  display: block; max-width: min(94vw, 1500px); max-height: 91vh;
  object-fit: contain; background: white;
}
.gallery-close {
  position: fixed; right: 26px; top: 18px; z-index: 51; border: 0;
  color: white; background: transparent; font-size: 44px; line-height: 1; cursor: pointer;
}
.gallery-open { overflow: hidden; }
.product-video {
  display: block; width: min(100%, 520px); max-height: 360px; margin-top: 18px;
  border-radius: 9px; background: #111;
}
code { background: #f1f4f8; border-radius: 5px; padding: 2px 5px; }
.alert {
  border-radius: 8px; background: #fce9ea; color: var(--danger);
  padding: 10px 12px; margin: 16px 0;
}
.alert.success { background: #e2f7eb; color: #09713a; }
.login-wrap { min-height: calc(100vh - 90px); display: grid; place-items: center; }
.login-panel {
  width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 36px; box-shadow: 0 20px 55px rgba(20, 38, 62, .1);
}
.login-brand { margin-bottom: 28px; }
.login-form .field { margin-bottom: 17px; }
.full-button { width: 100%; margin-top: 8px; }
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    height: auto; min-height: 66px; flex-direction: row; align-items: center;
    overflow-x: auto; padding: 11px 14px;
  }
  .sidebar-brand {
    flex: 0 0 auto; margin: 0; padding: 0 12px 0 0;
    border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .12);
  }
  .side-nav { flex: 1 0 auto; flex-direction: row; overflow-x: auto; padding: 0; }
  .nav-group { display: flex; flex-direction: row; align-items: center; gap: 5px; }
  .nav-group-label { display: none; }
  .side-nav a { flex: 0 0 auto; min-height: 38px; white-space: nowrap; }
  .sidebar-account {
    flex: 0 0 auto; display: flex; align-items: center; margin: 0; padding: 8px 10px;
  }
  .container { width: min(100% - 28px, 1200px); margin-top: 22px; }
  .container.app-main { width: min(100% - 28px, 1200px); }
  .stats, .dashboard-grid, .detail-grid, .form-grid { grid-template-columns: 1fr 1fr; }
  .workflow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings-layout, .template-grid, .document-template-grid { grid-template-columns: 1fr; }
  .search-provider-grid { grid-template-columns: 1fr; }
  .export-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-new-grid { grid-template-columns: 1fr; }
  .smtp-grid { grid-template-columns: 1fr; gap: 0; }
  .catalog-info, .asset-layout, .bulk-email-layout, .lead-grid, .product-match-layout, .product-job-focus { grid-template-columns: 1fr; }
  .source-overview-grid { grid-template-columns: 1fr 1fr; }
  .product-match-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-match-image { height: 250px; }
  .product-result-title { align-items: stretch; flex-direction: column; }
  .product-result-title .button { align-self: flex-start; }
  .lead-period-panel { align-items: stretch; flex-direction: column; }
  .period-tabs { flex-wrap: wrap; }
  .asset-title, .asset-title-actions { align-items: flex-start; flex-direction: column; gap: 10px; }
  .asset-preview-panel { min-height: 240px; max-width: 360px; }
  .media-card { position: static; }
  .product-summary-grid { grid-template-columns: minmax(0, 1fr) 210px; }
  .product-row { grid-template-columns: 98px minmax(190px, 1fr) repeat(3, minmax(90px, .75fr)); gap: 13px; padding: 10px; }
  .product-row-image { width: 98px; height: 98px; }
  .product-row-field.supplier { display: none; }
}
@media (max-width: 620px) {
  h1 { font-size: 23px; }
  .sidebar { align-items: flex-start; flex-wrap: wrap; }
  .sidebar-brand { width: 100%; border-right: 0; padding: 0 0 8px; }
  .sidebar-account { width: 100%; justify-content: space-between; }
  .page-head, .filters { flex-direction: column; align-items: stretch; }
  .lead-form-row { grid-template-columns: 1fr; }
  .location-select-grid { grid-template-columns: 1fr; }
  .stats, .dashboard-grid, .detail-grid, .form-grid, .form-grid.compact { grid-template-columns: 1fr; }
  .workflow-grid { grid-template-columns: 1fr; }
  .product-match-stats, .source-overview-grid, .product-match-result-grid, .product-job-detail dl { grid-template-columns: 1fr; }
  .product-match-image { height: 220px; }
  .export-grid { grid-template-columns: 1fr; }
  .product-result-title .button { width: 100%; }
  .job-progress-latest { max-width: 100%; white-space: normal; }
  .product-summary-grid { grid-template-columns: 1fr; }
  .appearance-image, .appearance-empty { width: min(100%, 260px); height: auto; aspect-ratio: 1 / 1; }
  .product-row { grid-template-columns: 82px 1fr; gap: 12px; padding: 10px; }
  .product-row-image { width: 82px; height: 82px; }
  .product-row-main { grid-column: 2; }
  .product-row-field { grid-column: span 1; padding-top: 8px; border-top: 1px solid var(--line); }
  .product-row-field.supplier { display: block; grid-column: 1 / -1; }
  .product-row-field.price { grid-column: 1 / -1; }
  .filters select { width: 100%; }
  .filters .button { width: 100%; }
  .table-actions { align-items: flex-end; flex-direction: column; }
  .card { padding: 18px; }
}
.readonly a[href="/customers/new"],
.readonly a[href="/products/new"],
.readonly a[href^="/orders/new"],
.readonly a[href$="/edit"],
.readonly .danger-zone,
.readonly .lead-create,
.readonly .product-match-create,
.readonly .bulk-email-button,
.readonly .select-cell,
.readonly .asset-select-cell,
.readonly form[action="/collector/convert"],
.readonly form[action="/orders/save"],
.readonly form[action="/orders/delete"],
.readonly form[action="/shipments/save"],
.readonly form[action="/finance/save"],
.readonly form[action="/product-matches/result/status"],
.readonly form[action="/product-matches/job/retry"],
.readonly form[action="/product-matches/job/delete"],
.readonly form[action$="/activity"],
.readonly form[action$="/send-email"],
.readonly form[action$="/file/delete"],
.readonly form[action$="/upload"],
.readonly .upload-card,
.readonly #asset-download-form {
  display: none !important;
}