:root {
  --bg: #f6f7f8;
  --panel: #fff;
  --ink: #172126;
  --muted: #627078;
  --line: #dce2e5;
  --brand: #0f766e;
  --brand-dark: #0b5f59;
  --green: #168a5b;
  --red: #c2413b;
  --amber: #b7791f;
  --blue: #2563eb;
  --navy: #111c4e;
  --yellow: #ffc33d;
  --shadow: 0 8px 24px rgba(23, 33, 38, .08);
  --radius: 8px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
button { font: inherit; cursor: pointer; border: 0; }

.app { min-height: 100vh; display: grid; grid-template-rows: 58px 1fr; }
.topbar { display: flex; align-items: center; gap: 18px; padding: 0 22px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 190px; font-weight: 800; font-size: 17px; }
.mark { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, #0f766e, #1f9f82 55%, #255b63); display: grid; place-items: center; color: #fff; font-weight: 900; }
.context-wrap { position: relative; }
.context { display: flex; align-items: center; gap: 10px; height: 38px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 0 10px; box-shadow: 0 2px 8px rgba(23,33,38,.04); text-align: left; }
.context small { display: block; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.context strong { display: block; font-size: 13px; }
.context span { color: var(--brand-dark); font-size: 11px; font-weight: 900; }
.context-menu { position: absolute; top: 44px; left: 0; min-width: 220px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 6px; z-index: 60; display: grid; gap: 4px; }
.context-menu button { min-height: 34px; border-radius: 6px; background: transparent; text-align: left; padding: 0 9px; color: var(--ink); }
.context-menu button.active { background: #e8f4f2; color: var(--brand-dark); font-weight: 850; }
.search { margin-left: auto; height: 36px; min-width: 280px; border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; padding: 0 12px; color: var(--muted); font-size: 13px; }
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: calc(100vh - 58px); }
.sidebar { background: #fff; border-right: 1px solid var(--line); padding: 18px 14px; }
.side-label { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; margin: 8px 10px; }
.nav { display: grid; gap: 4px; }
.nav button { height: 36px; background: transparent; color: #405057; border-radius: 7px; padding: 0 10px; text-align: left; display: flex; align-items: center; justify-content: space-between; }
.nav button.active { background: #e8f4f2; color: var(--brand-dark); font-weight: 800; }
.alert-dot { min-width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--red); color: #fff; font-size: 10px; font-weight: 900; margin-left: 8px; }
.main { padding: 24px; overflow: auto; }
.page { max-width: 1320px; margin: 0 auto; }
.head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
h1 { margin: 0 0 6px; font-size: 26px; line-height: 1.2; }
h2 { margin: 0 0 12px; font-size: 18px; }
h3 { margin: 0 0 8px; font-size: 14px; }
.sub { margin: 0; color: var(--muted); font-size: 14px; max-width: 760px; }
.panel, .stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel { padding: 18px; }
.grid { display: grid; gap: 14px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stat { padding: 16px; text-align: left; }
.stat.warning { border-color: #ef9a9a; background: #fff8f8; }
.label { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.value { font-size: 25px; font-weight: 850; margin: 10px 0 4px; }
.delta { color: var(--green); font-size: 12px; font-weight: 800; }
.delta.neg { color: var(--red); }
.delta.neu { color: var(--muted); }
.btn { height: 36px; border-radius: 7px; padding: 0 13px; background: #e9eef0; color: var(--ink); font-weight: 800; border: 1px solid transparent; }
.btn.primary { background: var(--brand); color: #fff; }
.btn.secondary { background: #fff; border-color: var(--line); }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; height: 22px; border-radius: 999px; padding: 0 8px; font-size: 11px; font-weight: 800; background: #edf2f4; color: #405057; white-space: nowrap; }
.badge.green { background: #e6f6ee; color: #14764f; }
.badge.amber { background: #fff7e6; color: #9a6100; }
.badge.red { background: #fdeceb; color: #a83a35; }
.badge.blue { background: #edf4ff; color: #2557b7; }
.company-row, .choice, .map-row, .issue { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 14px; }
.company-row { display: grid; grid-template-columns: 1.3fr 130px 160px 160px auto; align-items: center; gap: 12px; margin-bottom: 10px; }
.company-name { font-weight: 850; }
.muted { color: var(--muted); font-size: 13px; }
.empty-state { display: grid; gap: 10px; justify-items: start; padding: 20px; }
.choice { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; width: 100%; text-align: left; margin-bottom: 10px; }
.iconbox { width: 36px; height: 36px; border-radius: 7px; display: grid; place-items: center; background: #edf4f2; color: var(--brand); font-weight: 900; }
.upload-box { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: center; padding: 14px; border: 1px dashed #9ecac3; border-radius: var(--radius); background: #f4fbf9; margin-bottom: 14px; }
.upload-box input { width: 100%; }
.field-block { margin-bottom: 16px; }
.field-block label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.field-block input { height: 38px; border: 1px solid var(--line); border-radius: 7px; padding: 0 10px; color: var(--ink); font: inherit; text-transform: none; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 11px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { background: #f2f5f6; color: #405057; font-size: 11px; text-transform: uppercase; }
.flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.step { display: grid; grid-template-columns: 24px 1fr; gap: 9px; padding: 10px 6px; color: var(--muted); font-size: 13px; }
.step span { display: block; margin-top: 3px; font-weight: 500; line-height: 1.35; }
.dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #c7d0d5; font-size: 11px; font-weight: 900; }
.step.active { color: var(--ink); font-weight: 800; }
.step.active .dot { background: var(--brand); color: #fff; border-color: var(--brand); }
.detected-block { margin: 0 0 14px; }
.header-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.header-chips span { border: 1px solid var(--line); background: #f7faf9; border-radius: 999px; padding: 5px 8px; font-size: 12px; font-weight: 750; color: #405057; }
.sample-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sample-grid div { border: 1px solid var(--line); border-radius: 7px; padding: 8px; background: #fff; min-width: 0; }
.sample-grid strong, .sample-grid span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sample-grid strong { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.sample-grid span { margin-top: 4px; font-size: 13px; }
.summary { display: grid; gap: 10px; }
.summary div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.summary div:last-child { border-bottom: 0; padding-bottom: 0; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tab { height: 32px; border-radius: 7px; border: 1px solid var(--line); padding: 0 10px; background: #fff; color: var(--muted); font-weight: 800; font-size: 12px; }
.tab.active { color: var(--brand-dark); border-color: #9ed3ca; background: #edf8f6; }
.map-row { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(180px, 1.2fr) minmax(180px, .8fr) 98px; gap: 10px; align-items: center; margin-bottom: 10px; font-size: 13px; }
.map-row small { display: block; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; margin-bottom: 2px; }
.select-like { height: 34px; border: 1px solid var(--line); border-radius: 7px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; background: #fff; }
.mapping-select { height: 34px; border: 1px solid var(--line); border-radius: 7px; padding: 0 10px; background: #fff; color: var(--ink); font: inherit; min-width: 0; }
.issue { border-left: 4px solid var(--amber); display: grid; gap: 10px; margin-bottom: 10px; }
.issue.resolved { border-left-color: var(--green); background: #fbfffd; }
.compact-issue { grid-template-columns: 28px 1fr auto; align-items: center; padding: 10px 14px; overflow: hidden; }
.done-mark { width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 900; }
.collapse-in { animation: collapseIn .28s ease both; }
@keyframes collapseIn {
  from { opacity: .55; transform: translateY(-4px); max-height: 220px; }
  to { opacity: 1; transform: translateY(0); max-height: 56px; }
}
.fix-score { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin-bottom: 14px; }
.fix-score h2 { margin-bottom: 4px; }
.progress-track { grid-column: 1 / -1; height: 8px; border-radius: 999px; overflow: hidden; background: #e7ecef; }
.progress-fill { height: 100%; background: var(--brand); border-radius: inherit; transition: width .18s ease; }
.manual-edit { border: 1px solid var(--line); border-radius: var(--radius); background: #f7faf9; padding: 12px; }
.manual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); gap: 10px; margin-bottom: 10px; }
.manual-grid label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 800; }
.manual-grid input { height: 34px; border: 1px solid var(--line); border-radius: 7px; padding: 0 9px; font: inherit; color: var(--ink); background: #fff; }
.chart-card { min-height: 270px; position: relative; }
.chart-card.expanded { position: fixed; inset: 72px 24px 24px; z-index: 35; overflow: auto; box-shadow: 0 20px 60px rgba(23,33,38,.24); }
.chart-card.expanded .chart, .chart-card.expanded .line-chart, .chart-card.expanded .movement-chart, .chart-card.expanded .stacked-chart { height: 62vh; }
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.chart-tools { display: flex; align-items: center; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.axis-control, .icon-btn { height: 28px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); font-size: 12px; font-weight: 800; }
.axis-control { padding: 0 8px; }
.icon-btn { width: 28px; font-size: 14px; }
.legend { display: flex; align-items: center; gap: 14px; color: #66788a; font-size: 12px; font-weight: 800; margin-bottom: 8px; flex-wrap: wrap; }
.key { width: 10px; height: 18px; border-radius: 999px; display: inline-block; margin-right: 6px; vertical-align: middle; }
.green { background: #22c76a; } .blue { background: #0f5fa8; } .amber-bg { background: #f59e0b; } .red-bg { background: #ef4444; } .navy { background: var(--navy); } .yellow { background: var(--yellow); }
.line-chart { height: 190px; position: relative; border-bottom: 1px solid var(--line); background: linear-gradient(to bottom, transparent 24%, var(--line) 25%, transparent 26%), linear-gradient(to bottom, transparent 49%, var(--line) 50%, transparent 51%), linear-gradient(to bottom, transparent 74%, var(--line) 75%, transparent 76%); }
.line-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.axis { position: absolute; left: 0; top: 0; bottom: 0; width: 54px; display: flex; flex-direction: column; justify-content: space-between; color: #6b7c90; font-size: 11px; padding-bottom: 16px; pointer-events: none; }
.line-chart.with-axis { padding-left: 54px; }
.movement-chart { height: 250px; position: relative; border-bottom: 1px solid var(--line); background: linear-gradient(to bottom, transparent 19%, #edf1f3 20%, transparent 21%), linear-gradient(to bottom, transparent 39%, #edf1f3 40%, transparent 41%), linear-gradient(to bottom, transparent 59%, #d7dde1 60%, transparent 61%), linear-gradient(to bottom, transparent 79%, #edf1f3 80%, transparent 81%); display: flex; align-items: center; gap: 8px; padding: 0 8px 18px 58px; }
.movement-axis { position: absolute; left: 0; top: 6px; bottom: 20px; width: 52px; display: flex; flex-direction: column; justify-content: space-between; color: #6b7c90; font-size: 11px; }
.movement-zero { position: absolute; left: 58px; right: 8px; top: 58%; height: 1px; background: #cfd7dc; }
.movement-col { flex: 1; height: 210px; position: relative; min-width: 14px; }
.movement-pos, .movement-neg { position: absolute; left: 0; right: 0; display: flex; flex-direction: column-reverse; align-items: stretch; }
.movement-pos { bottom: 42%; }
.movement-neg { top: 58%; flex-direction: column; }
.seg { width: 100%; min-height: 2px; cursor: help; }
.chart-tooltip { position: fixed; z-index: 80; pointer-events: none; background: #14242a; color: #fff; border-radius: 6px; padding: 7px 9px; font-size: 12px; font-weight: 800; box-shadow: var(--shadow); max-width: 260px; }
.completed-list { margin-bottom: 14px; }
.completed-list h2 { margin: 0 0 8px; }
.labels { display: flex; justify-content: space-between; padding-left: 58px; color: #6b7c90; font-size: 11px; margin-top: 7px; }
.stacked-chart { height: 220px; position: relative; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: end; gap: 7px; padding: 18px 8px 0; }
.stack-col { flex: 1; min-width: 14px; display: flex; flex-direction: column-reverse; justify-content: flex-start; }
.stack { width: 100%; border-radius: 3px 3px 0 0; cursor: help; }
.drawer { position: fixed; top: 58px; right: 0; width: min(460px, 100vw); height: calc(100vh - 58px); background: #fff; border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(23,33,38,.12); transform: translateX(105%); transition: transform .18s ease; z-index: 40; padding: 18px; overflow: auto; }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.formula { padding: 12px; background: #f7faf9; border: 1px solid var(--line); border-radius: var(--radius); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: #274247; line-height: 1.5; }
.cell-warning { background: #fff7e6; color: #8a5a00; font-weight: 800; }
.cell-manual { background: #eef4ff; color: #1d4fa3; font-weight: 800; }
.cell-pre { color: #a0acb2; background: #f7f8f9; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #14242a; color: #fff; border-radius: 7px; padding: 10px 14px; font-size: 13px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 50; }
.toast.show { opacity: 1; }

@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .grid, .cols-2, .cols-3, .kpis, .flow { grid-template-columns: 1fr; }
  .company-row, .map-row { grid-template-columns: 1fr; }
  .sample-grid, .manual-grid { grid-template-columns: 1fr; }
  .search { display: none; }
}

@media (max-width: 1240px) {
  .flow { grid-template-columns: 1fr; }
}