:root {
  --navy: #041432;
  --navy-2: #071f4a;
  --blue: #075df0;
  --blue-soft: #e9f1ff;
  --teal: #17b9a7;
  --amber: #f59b24;
  --red: #ef4b4b;
  --bg: #f4f7fb;
  --card: #ffffff;
  --text: #08152f;
  --muted: #687389;
  --line: #e5ebf3;
  --shadow: 0 10px 28px rgba(8, 21, 47, 0.08);
  --shadow-hover: 0 14px 32px rgba(8, 21, 47, 0.13);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  animation: page-in 420ms ease both;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease, background-color 160ms ease;
}

button:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(7, 93, 240, 0.18);
}

button:active { transform: translateY(0); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(7, 93, 240, 0.22); outline-offset: 1px; }
button.is-loading { position: relative; color: transparent; pointer-events: none; }
button.is-loading::after { content: ""; position: absolute; width: 15px; height: 15px; top: 50%; left: 50%; margin: -8px; border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff; border-radius: 50%; animation: spin 700ms linear infinite; }

button.ghost {
  background: #fff;
  color: var(--blue);
  border: 1px solid var(--line);
}

.online-search-button { margin-top: 10px; width: 100%; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-width: 0;
  overflow-x: hidden;
}

.sidebar {
  background:
    radial-gradient(circle at 30% 15%, rgba(7, 93, 240, 0.35), transparent 35%),
    linear-gradient(180deg, #031128, var(--navy));
  color: #fff;
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #11d5ff, var(--blue));
  font-size: 24px;
  font-weight: 900;
}

.brand strong {
  display: block;
  font-size: 21px;
}

.brand span,
.sidebar-note span {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
}

.nav {
  display: grid;
  gap: 8px;
}

.nav button {
  text-align: left;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid transparent;
}

.nav button.active,
.nav button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateX(3px);
}

.sidebar-note {
  margin-top: auto;
  padding: 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(7, 93, 240, 0.9), rgba(17, 185, 167, 0.35));
}

.sidebar-note strong {
  display: block;
  margin-bottom: 8px;
}

.workspace {
  padding: 22px;
  display: grid;
  gap: 20px;
  align-content: start;
  min-width: 0;
  overflow-x: hidden;
}

.workspace > .topbar { order: 1; }
.workspace > .object-bar { order: 2; }
.workspace > .dashboard-kpis { order: 3; }
.workspace > .dashboard-view { order: 4; }
.workspace > .average-panel { order: 5; }
.workspace > .workspace-upload { order: 6; }
.workspace > .workspace-table { order: 7; }
.workspace > .workspace-scenarios { order: 8; }
.workspace > .workspace-proposal { order: 9; }

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 28px;
}

h2 {
  font-size: 18px;
}

p {
  color: var(--muted);
  line-height: 1.45;
}

.topbar-actions,
.panel-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.mode-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.mode-badge.commercial {
  color: #0755c9;
  background: #eaf2ff;
}

.mode-badge.government {
  color: #087d72;
  background: #e4f8f3;
}

input,
select {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 40px;
  padding: 9px 11px;
  background: #fff;
  color: var(--text);
}

#searchInput {
  min-width: 320px;
}

.object-bar,
.panel,
.kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.object-bar:hover, .panel:hover, .kpi:hover { box-shadow: var(--shadow-hover); }

.object-bar {
  padding: 14px;
  display: flex;
  gap: 16px;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
}

.object-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr)) minmax(190px, 1.35fr) auto;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.object-form > *,
.average-form > * {
  min-width: 0;
}

.selector,
.markup,
.mode-picker {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mode-picker select {
  min-width: 0;
}

.workspace[data-active-view="dashboard"] .view-estimate,
.workspace[data-active-view="dashboard"] .view-average,
.workspace[data-active-view="dashboard"] .view-procurement,
.workspace[data-active-view="dashboard"] .view-proposal,
.workspace[data-active-view="dashboard"] .view-commercial-works,
.workspace[data-active-view="estimate"] .view-dashboard,
.workspace[data-active-view="estimate"] .view-average,
.workspace[data-active-view="estimate"] .view-procurement,
.workspace[data-active-view="estimate"] .view-proposal,
.workspace[data-active-view="estimate"] .view-commercial-works,
.workspace[data-active-view="average"] .view-dashboard,
.workspace[data-active-view="average"] .view-estimate,
.workspace[data-active-view="average"] .view-procurement,
.workspace[data-active-view="average"] .view-proposal,
.workspace[data-active-view="average"] .view-commercial-works,
.workspace[data-active-view="procurement"] .view-dashboard,
.workspace[data-active-view="procurement"] .view-estimate,
.workspace[data-active-view="procurement"] .view-average,
.workspace[data-active-view="procurement"] .view-proposal,
.workspace[data-active-view="procurement"] .view-commercial-works,
.workspace[data-active-view="proposal"] .view-dashboard,
.workspace[data-active-view="proposal"] .view-estimate,
.workspace[data-active-view="proposal"] .view-average,
.workspace[data-active-view="proposal"] .view-procurement,
.workspace[data-active-view="proposal"] .view-commercial-works,
.workspace[data-active-view="commercial-works"] .view-dashboard,
.workspace[data-active-view="commercial-works"] .view-estimate,
.workspace[data-active-view="commercial-works"] .view-average,
.workspace[data-active-view="commercial-works"] .view-procurement,
.workspace[data-active-view="commercial-works"] .view-proposal {
  display: none;
}

.commercial-works-toolbar { display: grid; gap: 14px; }
.commercial-works-toolbar .inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.commercial-works-toolbar label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; min-width: 150px; }
.commercial-works-toolbar input { min-width: 0; }
.commercial-works-panel .workspace-table-wrap { overflow-x: auto; margin-top: 16px; }

.workspace[data-active-view]:not([data-active-view="assistant"]) .view-assistant { display: none; }
.workspace[data-active-view="assistant"] .view-dashboard,
.workspace[data-active-view="assistant"] .view-estimate,
.workspace[data-active-view="assistant"] .view-average,
.workspace[data-active-view="assistant"] .view-procurement,
.workspace[data-active-view="assistant"] .view-proposal,
.workspace[data-active-view="assistant"] .view-commercial-works { display: none; }
.workspace[data-active-view="assistant"] .topbar,
.workspace[data-active-view="assistant"] .object-bar { display: none; }
.assistant-panel { scroll-margin-top: 18px; }
.assistant-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.assistant-status-card { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: #fbfdff; }
.assistant-status-card strong { display: block; margin-bottom: 6px; }
.assistant-status-card span { color: var(--muted); font-size: 13px; }
.assistant-status-card.is-ready { border-color: #b8e8df; background: #f2fffc; }
.assistant-status-card.is-review { border-color: #f3d49c; background: #fffaf0; }
.assistant-actions { display: flex; justify-content: space-between; align-items: center; gap: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; }
.assistant-actions p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.assistant-review-box { margin-top: 16px; overflow-x: auto; }
.assistant-review-box .assistant-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.assistant-review-box .assistant-kpi { padding: 12px; background: #f6f9fd; border: 1px solid var(--line); border-radius: 8px; }
.assistant-review-box .assistant-kpi strong { display: block; font-size: 18px; margin-top: 5px; }
@media (max-width: 900px) { .assistant-status-grid, .assistant-review-box .assistant-kpis { grid-template-columns: 1fr 1fr; } .assistant-actions { align-items: stretch; flex-direction: column; } }

.is-hidden {
  display: none !important;
}

.mode-status-card {
  display: grid;
  align-content: start;
  gap: 8px;
}

.mode-status-card p {
  font-size: 11px;
}

.mode-status-card.government {
  border-color: #b8e6dc;
  background: #f4fffc;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.kpi-grid > * { min-width: 0; }

.kpi {
  padding: 18px;
  animation: lift-in 420ms ease both;
}

.kpi:nth-child(2) { animation-delay: 45ms; }
.kpi:nth-child(3) { animation-delay: 90ms; }
.kpi:nth-child(4) { animation-delay: 135ms; }

.kpi span,
.kpi small {
  color: var(--muted);
}

.kpi strong {
  display: block;
  margin: 8px 0 4px;
  font-size: 30px;
}

.kpi.warning strong {
  color: var(--amber);
}

.kpi.review strong {
  color: var(--red);
}

.dashboard-view {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  grid-template-areas:
    "objects featured recommendation"
    "chart tasks review"
    "chart suppliers suppliers";
  gap: 14px;
  min-width: 0;
}

.dashboard-view > * { min-width: 0; }

.object-list-panel { grid-area: objects; }
.featured-object { grid-area: featured; }
.recommendation-panel { grid-area: recommendation; }
.chart-panel { grid-area: chart; }
.dashboard-view > article:nth-of-type(5) { grid-area: tasks; }
.dashboard-view > article:nth-of-type(6) { grid-area: review; }
.dashboard-view > article:nth-of-type(7) { grid-area: suppliers; }
.compact-head { margin-bottom: 10px; align-items: center; }
.compact-head h2 { font-size: 15px; }
.link-button { padding: 0; background: transparent; color: var(--blue); font-size: 12px; }
.dashboard-object-list, .compact-list { display: grid; gap: 7px; }
.empty-dashboard-state { min-height: 72px; display: grid; place-items: center; padding: 12px; border: 1px dashed #cbd7e7; border-radius: 8px; color: var(--muted); font-size: 11px; line-height: 1.4; text-align: center; }
.dashboard-object-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 8px 6px; border-radius: 8px; }
.dashboard-object-row.selected { background: #f0f6ff; outline: 1px solid #c8ddff; }
.object-thumb { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; color: #fff; background: linear-gradient(135deg, #347ef5, #0c4fca); font-size: 12px; font-weight: 800; }
.object-thumb.teal { background: linear-gradient(135deg, #25bbae, #058a82); }.object-thumb.amber { background: linear-gradient(135deg, #f6b642, #de7b11); }.object-thumb.red { background: linear-gradient(135deg, #f26b65, #c73549); }.object-thumb.gray { background: linear-gradient(135deg, #aab6c7, #65758b); }
.dashboard-object-row p { min-width: 0; }.dashboard-object-row p strong, .dashboard-object-row p small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.dashboard-object-row p strong { font-size: 11px; }.dashboard-object-row p small { margin-top: 3px; color: var(--muted); font-size: 10px; }.dashboard-object-row b { align-self: start; font-size: 12px; text-align: right; }.dashboard-object-row b small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 500; }.status-dot { display: inline-block; margin-top: 4px; color: #1785dc; font-size: 9px; font-style: normal; }.status-dot.teal { color: #078f83; }.status-dot.amber { color: #bc7208; }.status-dot.red { color: #cc3c42; }.status-dot.gray { color: #738095; }

.featured-object { min-height: 248px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-radius: 9px; color: #fff; background: linear-gradient(135deg, rgba(2, 23, 57, 0.98), rgba(7, 70, 142, 0.88)), repeating-linear-gradient(135deg, transparent 0 16px, rgba(255, 255, 255, 0.06) 16px 17px); box-shadow: 0 12px 26px rgba(5, 28, 72, 0.2); }
.featured-content { padding: 18px 18px 12px; }.eyebrow { color: #b9c8e5; font-size: 11px; font-weight: 700; }.featured-object h2 { max-width: 360px; margin: 14px 0 9px; font-size: 20px; line-height: 1.14; }.featured-object p { color: #c6d4eb; font-size: 11px; }.featured-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 20px; }.featured-metrics div { padding: 8px; border-radius: 6px; background: rgba(255,255,255,0.09); }.featured-metrics span { display: block; color: #a9bddb; font-size: 9px; }.featured-metrics strong { display: block; margin-top: 4px; font-size: 11px; }.coverage-box { margin: 0 12px 12px; padding: 12px; border-radius: 8px; color: var(--text); background: #fff; }.coverage-box > div:first-child { display: flex; justify-content: space-between; font-size: 11px; }.coverage-box strong { font-size: 14px; }.coverage-track { height: 6px; margin: 10px 0 7px; overflow: hidden; border-radius: 999px; background: #e5edf2; }.coverage-track span { display: block; height: 100%; border-radius: inherit; background: var(--teal); }.coverage-box small { color: var(--muted); font-size: 10px; }
.recommendation-status { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 7px; background: #ebfbf8; }.checkmark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--teal); font-size: 18px; font-weight: 800; }.recommendation-status strong { display: block; color: #159786; font-size: 22px; }.recommendation-status p { margin-top: 2px; font-size: 10px; }.recommendation-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 11px; }.recommendation-row span { color: var(--muted); }.risk-number { color: var(--amber); }.outline-button { width: 100%; margin-top: 12px; border: 1px solid #c9d9ee; color: var(--blue); background: #fff; font-size: 11px; }.outline-button span { float: right; font-size: 16px; line-height: 12px; }.info-dot { width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid #aeb9ca; border-radius: 50%; color: #7b8799; font-size: 10px; }
.empty-recommendation { background: #f4f7fb; }.empty-recommendation .checkmark { color: #fff; background: #9aa8ba; }.empty-recommendation strong { color: #607087; font-size: 16px; }
.bar-chart { height: 205px; display: flex; align-items: end; justify-content: space-around; gap: 12px; padding: 16px 8px 6px; border-bottom: 1px solid var(--line); }.bar-chart > div { height: 100%; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: end; gap: 6px; }.bar-chart span { font-size: 11px; font-weight: 800; }.bar-chart small { color: var(--muted); font-size: 9px; text-align: center; }.bar { display: block; width: 42px; max-height: 125px; border-radius: 5px 5px 0 0; }.bar.green { background: #35c2a6; }.bar.blue { background: var(--blue); }.bar.red { background: #ef5359; }
.compact-list > div { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid #eef2f7; }.compact-list > div:last-child { border-bottom: 0; }.compact-list p { min-width: 0; }.compact-list p strong, .compact-list p small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.compact-list p strong { color: var(--text); font-size: 11px; }.compact-list p small { margin-top: 3px; font-size: 9px; }.compact-list b { font-size: 10px; }.task-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; font-size: 14px; }.task-icon.red { color: #d24c4d; background: #ffeded; }.task-icon.blue { color: #3374dc; background: #edf4ff; }.task-icon.teal { color: #0c9b91; background: #e9fbf8; }.task-icon.green { color: #289c72; background: #eafaf2; }.avatar, .supplier-mark { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #1d64d9; background: #deebff; font-size: 9px; font-weight: 800; }.avatar.peach { color: #c07123; background: #fff0de; }.avatar.lavender { color: #7655bd; background: #eee9ff; }.avatar.mint { color: #118d7a; background: #ddf8f0; }.warn-text { color: var(--amber); }.supplier-mark { border-radius: 7px; color: #2752a3; background: #e7eefb; font-size: 13px; }.supplier-mark.dark { color: #fff; background: #3e526a; }.supplier-mark.teal-mark { color: #168f78; background: #e2f7ef; }.supplier-mark.purple { color: #7750ce; background: #eee9ff; }

.panel {
  padding: 18px;
}

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

.upload-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.upload-form {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
}

.upload-form input[type="file"] {
  width: 100%;
  padding: 7px;
}

.upload-state {
  min-height: 34px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #dce7f3;
  border-radius: 7px;
  color: var(--muted);
  background: #f8fbff;
  font-size: 11px;
  line-height: 1.35;
}

.upload-state strong { color: var(--text); }
.upload-state span { display: block; margin-top: 3px; color: #168f83; }
.danger-button { color: #b53b45 !important; border-color: #f0c9ce !important; }

.average-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
  min-width: 0;
}

.average-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.average-result {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.empty-result {
  color: var(--muted);
}

.average-summary,
.average-scenarios {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.average-summary > div,
.average-scenarios > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfdff;
}

.average-summary span,
.average-scenarios span,
.average-scenarios small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.average-summary strong,
.average-scenarios strong {
  display: block;
  margin-top: 7px;
  font-size: 21px;
}

.average-scenarios {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 12px;
}

.average-detail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 16px;
}

.average-detail p,
.average-detail ul {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.average-detail ul {
  padding-left: 18px;
}

.status-box {
  border-left: 1px solid var(--line);
  padding-left: 18px;
}

.object-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.object-card h3,
.aggregate-panel h3 {
  margin: 0 0 8px;
  font-size: 13px;
}

.compact-list {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.compact-list > div {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.aggregate-panel .compact-list > div {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  padding: 12px;
}

.aggregate-panel .aggregate-item > strong,
.aggregate-panel .aggregate-item > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.compact-list strong {
  color: var(--text);
  font-size: 12px;
}

.aggregate-item textarea {
  width: 100%;
  margin-top: 8px;
  resize: vertical;
}

.aggregate-item button {
  justify-self: start;
  margin-top: 6px;
}

.items-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.items-pagination-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.items-pagination button {
  padding: 7px 10px;
}

@media (max-width: 700px) {
  .items-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .items-pagination-actions {
    justify-content: space-between;
  }
}

#statusLog {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  white-space: pre-wrap;
  transition: color 180ms ease, background-color 180ms ease;
}

#statusLog.status-success { color: #087e72; }
#statusLog.status-working { color: var(--blue); }
#statusLog.status-error { color: #b72020; }

.table-wrap {
  overflow: auto;
  max-height: 52vh;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.estimate-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
  background: #fff;
}

th,
td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}

th {
  position: sticky;
  top: 0;
  background: #f8fbff;
  z-index: 1;
  color: #33405a;
}

td input,
td select {
  width: 100%;
  min-height: 34px;
}

.name-cell {
  min-width: 300px;
}

.muted {
  color: var(--muted);
  font-size: 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 800;
  background: var(--blue-soft);
  color: var(--blue);
}

.badge.matched {
  background: #e6fbf7;
  color: #087e72;
}

.badge.missing_price,
.badge.needs_review {
  background: #fff5e7;
  color: #a45a00;
}

.badge.error {
  background: #ffecec;
  color: #b72020;
}

.badge.confirmed { background: #e6fbf7; color: #087e72; }
.badge.provisional { background: #edf4ff; color: #245ec6; }
.badge.manual_required { background: #ffecec; color: #b72020; }

.split {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 20px;
}

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.scenario {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfdff;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.scenario:hover { transform: translateY(-3px); border-color: #a9c7f6; box-shadow: var(--shadow); }

.scenario strong {
  display: block;
  font-size: 22px;
  margin: 6px 0;
}

.scenario dl {
  display: grid;
  gap: 5px;
  margin: 12px 0 0;
}

.scenario div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
}

.review-list {
  display: grid;
  gap: 10px;
  max-height: 340px;
  overflow: auto;
}

.review-item {
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  padding: 10px;
  animation: lift-in 360ms ease both;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.review-item:hover { transform: translateX(3px); box-shadow: var(--shadow); }
.review-item small { display: block; margin-top: 7px; color: #8a4f13; }

.review-item strong {
  display: block;
  margin-bottom: 4px;
}

.proposal-box {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fbfdff;
}

.procurement-panel { scroll-margin-top: 18px; }
.procurement-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; margin-bottom: 16px; }
.supplier-form { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 8px; align-items: center; }
.supplier-form input { min-width: 0; }
.procurement-content { display: grid; gap: 14px; }
.procurement-request { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: #fbfdff; animation: lift-in 300ms ease both; }
.procurement-request h3 { margin: 0; font-size: 16px; }
.procurement-request small { color: var(--muted); }
.procurement-table td small { display: block; margin-top: 4px; }
.quote-form { display: grid; gap: 10px; padding: 12px; margin: 10px 0 14px; border: 1px dashed #b9cae4; border-radius: 8px; background: #fff; }
.quote-form > label { display: grid; gap: 5px; max-width: 360px; }
.quote-upload-form { display: grid; grid-template-columns: minmax(240px, 1fr) 280px auto; gap: 10px; align-items: end; padding: 12px; margin: 10px 0 14px; border: 1px solid #d9e5f5; border-radius: 8px; background: #f5f9ff; }
.quote-upload-form label { display: grid; gap: 5px; }
.quote-upload-form input[type="file"] { width: 100%; }
.quote-price-grid { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 8px; }
.quote-price-grid label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); }
.select-quote { margin-left: 8px; }

@media (max-width: 1100px) {
  .procurement-toolbar, .supplier-form, .quote-price-grid, .quote-upload-form { grid-template-columns: 1fr; }
}

.proposal-warning {
  color: #9a4d00;
  background: #fff5e7;
  padding: 10px;
  border-radius: 8px;
}

.empty {
  color: var(--muted);
  text-align: center;
  padding: 32px;
}

@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lift-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 1ms !important; }
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }

  .object-form,
  .average-form,
  .object-bar,
  .upload-grid,
  .split,
  .kpi-grid,
  .scenario-grid,
  .average-summary,
  .average-scenarios,
  .average-detail {
    grid-template-columns: 1fr;
  }

  .dashboard-view {
    grid-template-columns: 1fr;
    grid-template-areas: "objects" "featured" "recommendation" "chart" "tasks" "review" "suppliers";
  }

  .topbar,
  .panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions {
    flex-wrap: wrap;
  }

  #searchInput {
    min-width: 0;
    width: 100%;
  }
}