:root {
  --graphite: #111827;
  --deep: #173d36;
  --green: #2f6b4f;
  --green-ok: #3f8b62;
  --bg: #f5f7f4;
  --white: #ffffff;
  --line: #d8ded8;
  --muted: #66736d;
  --warn: #d49a2a;
  --risk: #c84a4a;
  --info: #3478c8;
  --unknown: #8a94a3;
  --shadow: 0 12px 30px rgba(17, 24, 39, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  background: var(--bg);
  color: var(--graphite);
  font-family: Inter, Manrope, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

button, input, select { font: inherit; }
button { cursor: pointer; }
.sidebar {
  min-height: 100vh;
  position: sticky;
  top: 0;
  padding: 20px 16px;
  background: var(--deep);
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.brand { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; }
.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #ffffff;
  color: var(--deep);
  font-weight: 900;
  font-size: 14px;
}
.brand strong { display: block; line-height: 1.15; font-size: 15px; }
.brand span, .sync-card span, .sync-card small { color: #b9c8c2; font-size: 12px; }
nav { display: grid; gap: 5px; }
nav button {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #e4ece8;
  text-align: left;
  padding: 10px 12px;
}
nav button.active, nav button:hover { background: rgba(255,255,255,.12); color: #fff; }
.sync-card {
  margin-top: auto;
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
}
.sync-card strong { font-size: 18px; }
.sidebar-toggle {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 24px;
}

main { min-width: 0; padding: 24px; }
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.eyebrow {
  margin: 0 0 8px;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}
h1 { margin: 0; font-size: 28px; line-height: 1.15; }
h2 { margin: 0; font-size: 18px; line-height: 1.2; }
p { color: var(--muted); line-height: 1.5; }
.top-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.global-search-box {
  position: relative;
  z-index: 10;
}
input, select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--graphite);
  padding: 9px 11px;
}
#globalSearch { min-width: 310px; }
.global-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: grid;
  gap: 6px;
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--shadow);
  padding: 8px;
}
.global-results[hidden] { display: none; }
.global-results button {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfa;
  color: var(--graphite);
  text-align: left;
  padding: 9px;
}
.global-results span, .global-results small, .global-results p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.global-results strong {
  font-size: 14px;
}
.primary, .secondary, .icon-button {
  min-height: 40px;
  border: 1px solid var(--green);
  border-radius: 10px;
  padding: 9px 13px;
  background: var(--green);
  color: white;
}
.secondary { background: var(--white); color: var(--deep); border-color: var(--line); }
.icon-button { width: 40px; padding: 0; display: grid; place-items: center; font-weight: 900; }
.view { display: none; }
.view.active { display: block; }

.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow);
}
.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.panel-head p { margin: 6px 0 0; }
.kpi-grid, .dashboard-grid, .decision-layout, .section-grid, .scenario-grid, .memory-stats, .integrations, .context-kpis, .case-summary, .case-steps {
  display: grid;
  gap: 14px;
}
.kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.kpi-grid article, .memory-stats article, .scenario-grid article, .case-steps article {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfa;
  padding: 15px;
}
article span, article em { display: block; color: var(--muted); font-style: normal; }
article strong { display: block; margin: 8px 0 4px; font-size: 24px; font-variant-numeric: tabular-nums; }
.decision-layout { grid-template-columns: minmax(0, 1.05fr) minmax(420px, .9fr); margin-bottom: 14px; }
.dashboard-grid, .section-grid { grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); align-items: start; }
.case-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
.case-summary div {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px;
  background: #f7faf6;
}
.case-summary span { display: block; color: var(--muted); font-size: 13px; }
.case-summary strong { display: block; margin-top: 6px; font-size: 20px; }
.insight { margin: 0 0 14px; }
.logic-chain {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.logic-chain div {
  border-left: 3px solid var(--green);
  border-radius: 8px;
  background: #f7faf6;
  padding: 9px 10px;
}
.logic-chain span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.logic-chain strong {
  display: block;
  margin-top: 3px;
  color: var(--graphite);
  font-size: 13px;
  line-height: 1.35;
}
.compact-chain {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

.status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.status-high { color: #fff; background: var(--risk); }
.status-warn { color: #5b3b00; background: #fff1cf; }
.status-info { color: #fff; background: var(--info); }
.status-ok { color: #fff; background: var(--green-ok); }
.status-done { color: #fff; background: var(--deep); }

.map-workspace {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 310px;
  gap: 14px;
  align-items: stretch;
}
.side-panel, .context-panel { box-shadow: none; }
.side-panel { display: grid; align-content: start; gap: 12px; }
.side-panel label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.segmented, .tabs, .passport-tabs, .timeline, .filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.segmented button, .tabs button, .passport-tabs button, .timeline button, .filter-buttons button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--deep);
  padding: 8px 10px;
}
.segmented button.active, .tabs button.active, .passport-tabs button.active, .timeline button.active, .filter-buttons button.active { background: var(--deep); color: #fff; border-color: var(--deep); }
.layer-filters {
  display: grid;
  gap: 10px;
}
.layer-filters label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.map-shell {
  position: relative;
  min-height: 680px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.map-toolbar {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.map-layer-control {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.94);
  color: var(--deep);
  font-size: 12px;
  font-weight: 800;
}
.map-layer-control select {
  min-width: 210px;
  min-height: 34px;
  padding: 6px 8px;
}
.demo-badge {
  margin-right: auto;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  color: var(--deep);
  font-size: 12px;
  font-weight: 800;
}
.map-canvas {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(110deg, rgba(47,107,79,.10), transparent 38%),
    linear-gradient(90deg, rgba(17,24,39,.08) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(rgba(17,24,39,.07) 1px, transparent 1px) 0 0 / 48px 48px,
    #dfe7db;
  transition: transform .18s ease, filter .18s ease;
}
.map-canvas.scheme {
  background:
    linear-gradient(90deg, rgba(17,24,39,.06) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(rgba(17,24,39,.05) 1px, transparent 1px) 0 0 / 52px 52px,
    #e9efe5;
}
.map-canvas.satellite {
  background:
    radial-gradient(ellipse at 24% 18%, rgba(126,153,70,.65), transparent 18%),
    radial-gradient(ellipse at 72% 30%, rgba(76,112,54,.72), transparent 23%),
    radial-gradient(ellipse at 46% 76%, rgba(143,112,69,.62), transparent 22%),
    repeating-linear-gradient(18deg, rgba(255,255,255,.06) 0 2px, transparent 2px 7px),
    linear-gradient(135deg, #48613c, #7c7a48 36%, #3c5f39 58%, #8a6f48);
}
.map-canvas.hybrid {
  background:
    radial-gradient(ellipse at 23% 20%, rgba(126,153,70,.45), transparent 19%),
    radial-gradient(ellipse at 76% 28%, rgba(62,95,48,.45), transparent 23%),
    repeating-linear-gradient(24deg, rgba(255,255,255,.04) 0 2px, transparent 2px 9px),
    linear-gradient(135deg, #9baa83, #63785e 55%, #8f7a55);
}
.map-canvas.relief {
  background:
    radial-gradient(ellipse at 18% 22%, rgba(92,137,83,.55), transparent 25%),
    radial-gradient(ellipse at 62% 62%, rgba(151,112,73,.42), transparent 28%),
    repeating-radial-gradient(ellipse at 54% 48%, transparent 0 24px, rgba(69,77,47,.24) 25px 27px),
    linear-gradient(135deg, #dce8cf, #b9c58a 45%, #9f875f);
}
.large-map { min-height: 680px; border-radius: 0; }
.mini-map { min-height: 330px; }
.layer-note {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8faf8;
  padding: 12px;
  color: var(--muted);
  line-height: 1.45;
  font-weight: 500;
}
.plot {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1%);
  border: 2px solid rgba(17,24,39,.42);
  border-radius: 4px;
  background: rgba(255,255,255,.5);
  color: var(--graphite);
  font-weight: 900;
  display: grid;
  place-items: center;
  gap: 2px;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}
.plot span, .plot small, .plot em { display: block; line-height: 1.12; }
.plot span { font-size: 15px; }
.plot small { font-size: 12px; font-weight: 800; opacity: .92; }
.plot em { font-size: 10px; font-style: normal; font-weight: 800; opacity: .82; }
.plot:hover, .plot.selected { transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(52,120,200,.18); border-color: var(--info); }
.plot.candidate { color: #111827; }
.plot.filtered-out { opacity: .14; filter: grayscale(.65); pointer-events: none; }
.scheme .plot {
  border-color: rgba(51,64,55,.72);
  box-shadow: none;
}
.scheme .plot[data-crop="wheat"] { background: #efe0a4; color: #3d3420; }
.scheme .plot[data-crop="sunflower"] { background: #f2d37a; color: #3f3012; }
.scheme .plot[data-crop="corn"] { background: #cfe2a3; color: #253a1f; }
.scheme .plot[data-crop="soy"] { background: #b9d7b0; color: #213820; }
.scheme .plot span::after, .hybrid .plot span::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
}
.scheme .plot[data-crop="wheat"] span::after, .hybrid .plot[data-crop="wheat"] span::after { border-radius: 2px; }
.scheme .plot[data-crop="sunflower"] span::after, .hybrid .plot[data-crop="sunflower"] span::after { box-shadow: 0 0 0 3px rgba(63,48,18,.15); }
.scheme .plot[data-crop="corn"] span::after, .hybrid .plot[data-crop="corn"] span::after { width: 7px; height: 12px; border-radius: 7px; }
.scheme .plot[data-crop="soy"] span::after, .hybrid .plot[data-crop="soy"] span::after { width: 11px; height: 7px; }
.satellite .plot {
  background:
    repeating-linear-gradient(18deg, rgba(255,255,255,.08) 0 2px, transparent 2px 8px),
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.18), transparent 34%),
    rgba(72,117,48,.72);
  border-color: rgba(23,61,54,.18);
  box-shadow: inset 0 10px 18px rgba(0,0,0,.11);
}
.satellite .plot[data-crop="sunflower"] { background-color: rgba(130,111,49,.7); }
.satellite .plot[data-crop="corn"] { background-color: rgba(87,126,44,.7); }
.satellite .plot[data-crop="soy"] { background-color: rgba(72,105,58,.7); }
.satellite .plot span {
  opacity: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.72);
}
.satellite .plot small, .satellite .plot em, .satellite .map-road span, .satellite .map-canal span, .satellite .shelterbelt span, .satellite .waterbody span { opacity: 0; }
.hybrid .plot {
  background: rgba(255,255,255,.62);
  color: #10201b;
  border-color: rgba(255,255,255,.88);
  text-shadow: 0 1px 2px rgba(255,255,255,.86);
}
.relief .plot {
  background: rgba(255,255,255,.12);
  border-color: rgba(74,62,43,.36);
  color: #1f2e24;
  box-shadow: none;
}
.relief .plot span {
  opacity: 1;
  color: #1f2e24;
  text-shadow: 0 1px 3px rgba(255,255,255,.86);
}
.relief .plot small, .relief .plot em { opacity: 0; }
.relief .map-road, .relief .map-canal, .relief .shelterbelt, .relief .waterbody { display: none; }
.map-canvas.time-week { filter: saturate(.92) contrast(1.02); }
.map-canvas.time-month { filter: saturate(.82) contrast(1.04); }
.map-canvas.time-season { filter: saturate(.96) brightness(1.02); }
.map-canvas.time-past { filter: sepia(.15) saturate(.76); }
.layer-agro:not(.scheme):not(.satellite):not(.relief) .plot { background: rgba(63,139,98,.75); color: #fff; }
.layer-agro:not(.scheme):not(.satellite):not(.relief) .plot[data-field="144"], .layer-agro:not(.scheme):not(.satellite):not(.relief) .plot[data-field="91"], .layer-agro:not(.scheme):not(.satellite):not(.relief) .plot[data-field="236"] { background: rgba(200,74,74,.78); }
.layer-agro:not(.scheme):not(.satellite):not(.relief) .plot[data-field="118"] { background: rgba(212,154,42,.82); color: var(--graphite); }
.layer-production:not(.scheme):not(.satellite):not(.relief) .plot { background: rgba(52,120,200,.70); color: #fff; }
.layer-production:not(.scheme):not(.satellite):not(.relief) .plot[data-field="118"], .layer-production:not(.scheme):not(.satellite):not(.relief) .plot[data-field="236"] { background: rgba(212,154,42,.82); color: var(--graphite); }
.layer-economy:not(.scheme):not(.satellite):not(.relief) .plot { background: rgba(47,107,79,.76); color: #fff; }
.layer-economy:not(.scheme):not(.satellite):not(.relief) .plot[data-field="236"], .layer-economy:not(.scheme):not(.satellite):not(.relief) .plot[data-field="B"] { background: rgba(212,154,42,.82); color: var(--graphite); }
.layer-management:not(.scheme):not(.satellite):not(.relief) .plot { background: rgba(138,148,163,.42); }
.layer-management:not(.scheme):not(.satellite):not(.relief) .plot[data-field="144"], .layer-management:not(.scheme):not(.satellite):not(.relief) .plot[data-field="236"] { background: rgba(200,74,74,.78); color: #fff; }
.layer-management:not(.scheme):not(.satellite):not(.relief) .plot[data-field="204"], .layer-management:not(.scheme):not(.satellite):not(.relief) .plot[data-field="305"] { background: rgba(63,139,98,.78); color: #fff; }
.layer-land:not(.scheme):not(.satellite):not(.relief) .plot { background: rgba(138,148,163,.34); border-style: dashed; }
.layer-land:not(.scheme):not(.satellite):not(.relief) .plot.candidate { background: rgba(52,120,200,.52); border-color: var(--info); }
.layer-land .road { background: rgba(86,77,62,.62); }
.road, .map-road, .map-canal, .shelterbelt {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.road {
  left: -5%;
  right: -5%;
  top: 59%;
  height: 18px;
  background: rgba(86, 77, 62, .38);
  transform: rotate(-7deg);
}
.map-road {
  height: 16px;
  background: rgba(116,108,91,.72);
  border: 2px solid rgba(255,255,255,.42);
}
.road-main { left: -4%; right: -4%; top: 58%; transform: rotate(-7deg); }
.road-service { left: 57%; width: 38%; top: 28%; transform: rotate(47deg); }
.map-canal {
  left: 7%;
  right: 5%;
  top: 88%;
  height: 12px;
  border-radius: 999px;
  background: rgba(92,155,182,.78);
  transform: rotate(4deg);
}
.map-road span, .map-canal span, .shelterbelt span, .waterbody span {
  position: absolute;
  left: 50%;
  top: -22px;
  transform: translateX(-50%);
  color: #173d36;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.shelterbelt {
  width: 18px;
  background: repeating-linear-gradient(0deg, #2f6b4f 0 8px, #78966f 8px 14px);
  border-radius: 999px;
}
.shelterbelt-north { left: 4%; top: 7%; height: 170px; transform: rotate(82deg); }
.shelterbelt-west { left: 3%; top: 30%; height: 280px; transform: rotate(5deg); }
.waterbody {
  position: absolute;
  right: 7%;
  top: 39%;
  z-index: 1;
  width: 92px;
  height: 52px;
  border-radius: 48% 52% 45% 55%;
  background: rgba(96,152,180,.72);
  border: 2px solid rgba(255,255,255,.55);
  pointer-events: none;
}
.relief-line, .erosion-zone, .flow-arrow { display: none; position: absolute; z-index: 2; pointer-events: none; }
.relief .relief-line {
  display: block;
  border: 2px solid rgba(85,76,45,.45);
  border-radius: 50%;
}
.relief-one { left: 16%; top: 12%; width: 460px; height: 220px; transform: rotate(-10deg); }
.relief-two { left: 33%; top: 30%; width: 430px; height: 260px; transform: rotate(20deg); }
.relief-three { left: 4%; top: 60%; width: 360px; height: 150px; transform: rotate(8deg); }
.relief .erosion-zone, .relief .flow-arrow {
  display: block;
  border-radius: 999px;
  padding: 7px 9px;
  font-size: 12px;
  font-weight: 900;
}
.erosion-zone {
  left: 14%;
  top: 70%;
  background: rgba(200,74,74,.88);
  color: #fff;
}
.flow-arrow {
  left: 45%;
  top: 50%;
  background: rgba(23,61,54,.88);
  color: #fff;
}
.wind, .sample-point, .runoff, .radius-marker, .spread-arrow, .logistics-line {
  position: absolute;
  z-index: 2;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 800;
}
.wind { right: 24px; top: 94px; }
.runoff {
  left: 23%;
  top: 34%;
  border-color: rgba(17,61,54,.3);
  background: rgba(23,61,54,.9);
  color: #fff;
}
.sample-point { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); }
.sample-point, .radius-marker, .shared-boundary, .runoff, .spread-arrow, .logistics-line { display: none; }
.spatial .sample-point, .spatial .radius-marker, .spatial .shared-boundary, .spatial .runoff, .spatial .spread-arrow, .spatial .logistics-line { display: block; }
.spatial .plot:not(.selected):not(.neighbor):not(.candidate) { opacity: .42; }
.spatial .neighbor { border-color: var(--warn); box-shadow: 0 0 0 4px rgba(212,154,42,.18); }
.shared-boundary {
  position: absolute;
  z-index: 1;
  width: 9px;
  height: 118px;
  border-radius: 999px;
  background: #f2c94c;
  box-shadow: 0 0 0 3px rgba(242,201,76,.28);
}
.boundary-a { left: var(--bx1, 34%); top: var(--by1, 15%); height: var(--bh1, 118px); transform: rotate(var(--br1, 7deg)); }
.boundary-b { left: var(--bx2, 37%); top: var(--by2, 36%); height: var(--bh2, 150px); transform: rotate(var(--br2, -46deg)); }
.radius-marker {
  width: 46px;
  height: 46px;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--deep);
  box-shadow: 0 0 0 10px rgba(52,120,200,.10), 0 0 0 26px rgba(52,120,200,.06);
}
#radius1 { left: var(--r1x, 34%); top: var(--r1y, 29%); }
#radius5 { left: var(--r5x, 52%); top: var(--r5y, 28%); }
#radius10 { left: var(--r10x, 72%); top: var(--r10y, 57%); }
#sampleOne { left: var(--s1x, 53%); top: var(--s1y, 78%); }
#sampleTwo { left: var(--s2x, 61%); top: var(--s2y, 84%); }
.spread-arrow {
  left: var(--spreadx, 30%);
  top: var(--spready, 23%);
  background: rgba(200,74,74,.92);
  color: #fff;
}
.logistics-line {
  left: var(--logx, 38%);
  top: var(--logy, 58%);
  border-color: rgba(52,120,200,.35);
  background: rgba(52,120,200,.92);
  color: #fff;
}
.layer-legend {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 54px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  color: var(--muted);
  font-size: 13px;
}
.legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; color: var(--muted); font-size: 13px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
.red { background: var(--risk); } .amber { background: var(--warn); } .green { background: var(--green-ok); } .gray { background: var(--unknown); }
.context-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }
.context-kpis span {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  color: var(--muted);
}
.context-kpis b { display: block; color: var(--graphite); font-size: 18px; margin-top: 3px; }
.context-panel button { width: 100%; margin-top: 8px; }
.spatial-card {
  display: none;
  border: 1px solid #bfd3c7;
  border-radius: 12px;
  background: #f1f7f3;
  padding: 13px;
  margin: 12px 0;
}
.spatial-card.visible { display: block; }
.spatial-card h3 { margin: 0 0 6px; font-size: 15px; color: var(--deep); }
.spatial-card strong { display: block; font-size: 34px; margin-bottom: 6px; color: var(--green); }
.spatial-card p { margin: 0; font-size: 14px; }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; border-bottom: 1px solid var(--line); padding: 12px 10px; vertical-align: top; line-height: 1.35; }
th { color: var(--muted); font-size: 13px; }
tbody tr:hover { background: #f7faf6; }
.document-workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}
.economics-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
  gap: 14px;
  align-items: start;
}
.document-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, .35fr);
  gap: 8px;
  margin-bottom: 14px;
}
.economics-workspace .document-filters { grid-template-columns: repeat(4, minmax(130px, 1fr)); }
.farm-field-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.farm-field-groups article {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f6faf7;
  padding: 13px;
}
.farm-field-groups span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.farm-field-groups strong {
  display: block;
  margin: 5px 0 4px;
  font-size: 18px;
}
.farm-field-groups p { margin: 0; font-size: 14px; }
.document-list, .decision-list, .memory-search-results, .effect-cuts {
  display: grid;
  gap: 10px;
}
.document-list article, .decision-list article, .memory-search-results article, .effect-cuts article {
  display: grid;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfa;
  padding: 13px;
}
.document-list article, .decision-list article {
  grid-template-columns: minmax(0, 1fr) auto;
}
.decision-list article { grid-template-columns: minmax(0, 1fr) auto auto; }
.document-list strong, .decision-list strong, .memory-search-results strong, .effect-cuts strong {
  display: block;
  margin-bottom: 4px;
}
.document-list span, .decision-list span, .memory-search-results span, .effect-cuts span {
  color: var(--muted);
  line-height: 1.35;
}
.decision-list b {
  font-size: 18px;
  color: var(--green);
  white-space: nowrap;
}
.effect-cuts article { align-items: start; cursor: pointer; }
.effect-cuts p { margin: 4px 0 0; }
.wide-drawer { width: min(980px, 98vw); }
.document-open-layout, .decision-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
  gap: 14px;
}
.document-original, .document-extracted, .panel-lite {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfa;
  padding: 16px;
}
.document-original h3, .document-extracted h3, .panel-lite h3 {
  margin: 0 0 10px;
  font-size: 16px;
}
.original-preview {
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(#fff, #faf7ef);
  padding: 20px;
  color: var(--graphite);
}
mark {
  border-radius: 4px;
  background: #fff1a8;
  padding: 1px 3px;
}
.primary-economy {
  background: #f1f7f3;
  border-color: #bfd3c7;
}
.economy-score {
  margin-bottom: 12px;
  color: var(--green);
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 0;
}
.effect-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.effect-grid span {
  border: 1px solid #bfd3c7;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  color: var(--graphite);
  font-weight: 800;
}
.memory-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.memory-stats strong { display: block; font-size: 30px; }
.compact-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.landbank-workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}
.land-mode-tabs {
  margin-bottom: 14px;
}
.land-mode-panel {
  display: none;
}
.land-mode-panel.active {
  display: block;
}
.land-summary-grid, .land-card-grid, .comparison-grid, .field-history-grid, .land-chain, .investment-list, .effect-detail {
  display: grid;
  gap: 10px;
}
.land-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
}
.land-card-grid, .comparison-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0 15px 15px;
}
.land-chain {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
}
.land-stage, .selected-land-history {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfa;
  padding: 14px;
}
.selected-land-history { background: #f6faf7; }
.selected-land-history.collapsed .field-history-grid,
.selected-land-history.collapsed .land-card-open {
  display: none;
}
.land-card-open {
  margin-top: 10px;
}
.mini-field-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.mini-field-grid button {
  border: 1px solid #bfd3c7;
  border-radius: 10px;
  background: #fff;
  color: var(--deep);
  font-weight: 800;
  padding: 8px 10px;
  cursor: pointer;
}
.field-history-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.land-summary-grid article, .land-card-grid article, .comparison-grid article, .field-history-grid article, .investment-list article, .effect-detail article {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfa;
  padding: 14px;
}
.clickable-record {
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease;
}
.clickable-record:hover {
  transform: translateY(-1px);
  border-color: #bfd3c7;
}
.record-head {
  display: grid;
  gap: 4px;
  padding: 15px;
}
.record-head strong { font-size: 18px; }
.record-head span { color: var(--muted); }
.drawer-grid { padding: 0; }
.investment-list {
  grid-template-columns: 1fr;
  padding: 0 15px 15px;
}
.effect-detail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.land-summary-grid article span, .land-card-grid article span, .comparison-grid article span, .field-history-grid article span, .investment-list article span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.land-summary-grid article strong, .land-card-grid article strong, .comparison-grid article strong, .field-history-grid article strong, .investment-list article strong {
  display: block;
  margin: 6px 0 4px;
  font-size: 20px;
}
.land-stage span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.land-stage strong {
  display: block;
  margin: 6px 0 4px;
  font-size: 19px;
}
.land-stage p, .land-summary-grid article p, .land-card-grid article p, .comparison-grid article p, .field-history-grid article p, .investment-list article p, .effect-detail article p {
  margin: 0;
  font-size: 14px;
}
.territory-tab-panel {
  display: none;
  padding: 0 15px 15px;
}
.territory-tab-panel.active {
  display: block;
}
.territory-tab-panel .logic-chain {
  margin: 0;
}
.screening-summary {
  border: 1px solid #bfd3c7;
  border-radius: 12px;
  background: #f1f7f3;
  padding: 15px;
  margin-bottom: 14px;
}
.screening-summary strong {
  display: block;
  margin-bottom: 6px;
  color: var(--deep);
  font-size: 20px;
}
.screening-summary p {
  margin: 0;
}
.doc-preview {
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #faf7ef;
  padding: 18px;
}
.doc-preview p { margin: 0; color: var(--graphite); }
.facts dt { color: var(--green); font-weight: 800; margin-top: 12px; }
.facts dd { margin: 4px 0 0; color: var(--muted); line-height: 1.45; }
.scenario-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scenario-grid .selected { border-color: var(--green); box-shadow: inset 0 0 0 2px rgba(47,107,79,.15); }
.bar-chart {
  height: 230px;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfa;
}
.bar-chart span {
  width: 90px;
  height: calc(var(--v) * 1%);
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px 10px 0 0;
  background: #cfd8d2;
  text-align: center;
  color: var(--graphite);
  font-weight: 800;
}
.bar-chart .best { background: var(--green); color: #fff; }
.chart-note { margin-bottom: 0; }
.field-record {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfa;
  overflow: hidden;
  margin-bottom: 14px;
}
.field-record summary {
  display: grid;
  gap: 4px;
  padding: 15px;
  cursor: pointer;
  list-style: none;
}
.field-record summary::-webkit-details-marker { display: none; }
.field-record summary strong { font-size: 18px; }
.field-record summary span { color: var(--muted); }
.passport-tabs { padding: 0 15px 12px; }
.tab-panel { display: none; padding: 0 15px 15px; }
.tab-panel.active { display: block; }
.tab-panel p { margin: 0; }
.passport-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.passport-card-grid article {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfa;
  padding: 12px;
}
.passport-card-grid strong {
  font-size: 15px;
}
.passport-card-grid span {
  color: var(--muted);
  line-height: 1.35;
}
.passport-card-grid button {
  justify-self: start;
}
.datahub-panel { margin-bottom: 14px; }
.hub-radial {
  position: relative;
  min-height: 420px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(47,107,79,.08) 1px, transparent 1px),
    linear-gradient(rgba(47,107,79,.08) 1px, transparent 1px),
    #fbfcfa;
  background-size: 44px 44px;
}
.hub-center, .hub-spoke {
  position: absolute;
  display: grid;
  place-items: center;
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  text-align: center;
  padding: 10px;
  box-shadow: 0 10px 22px rgba(31, 41, 55, .08);
}
.hub-center {
  left: 50%;
  top: 50%;
  width: min(280px, 54%);
  min-height: 104px;
  transform: translate(-50%, -50%);
  background: var(--deep);
  color: #fff;
  font-size: 21px;
}
.hub-spoke { width: 180px; color: var(--graphite); font-weight: 800; }
.hub-spoke::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 130px;
  height: 1px;
  background: #bfd3c7;
  transform-origin: left center;
}
.hub-spoke.s1 { left: 50%; top: 22px; transform: translateX(-50%); }
.hub-spoke.s2 { right: 10%; top: 62px; }
.hub-spoke.s3 { right: 3%; top: 178px; }
.hub-spoke.s4 { right: 12%; bottom: 54px; }
.hub-spoke.s5 { left: 50%; bottom: 22px; transform: translateX(-50%); }
.hub-spoke.s6 { left: 12%; bottom: 54px; }
.hub-spoke.s7 { left: 3%; top: 178px; }
.hub-spoke.s8 { left: 10%; top: 62px; }
.integrations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.integrations article {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: #fbfcfa;
}
.integrations strong { display: block; margin-bottom: 6px; }
.integrations span { color: var(--muted); line-height: 1.4; }

.case-drawer, .ai-drawer {
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  width: min(760px, 96vw);
  height: 100vh;
  overflow-y: auto;
  padding: 20px;
  background: var(--white);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 40px rgba(17,24,39,.18);
  transform: translateX(105%);
  transition: transform .22s ease;
}
.ai-drawer { width: min(460px, 95vw); }
.case-drawer.open, .ai-drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.drawer-head p { margin: 6px 0 0; }
.case-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
.drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chat { display: grid; gap: 10px; }
.prompt {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8faf8;
  text-align: left;
  padding: 12px;
  color: var(--deep);
}
.bubble {
  border-radius: 12px;
  padding: 14px;
  background: #edf4ef;
  color: var(--graphite);
  line-height: 1.5;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 20;
  transform: translate(-50%, 120px);
  max-width: 560px;
  border-radius: 12px;
  background: var(--graphite);
  color: #fff;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  transition: transform .2s ease;
}
.toast.show { transform: translate(-50%, 0); }

@media (max-width: 1180px) {
  body { grid-template-columns: 1fr; }
  .sidebar { min-height: auto; position: static; }
  nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sync-card, .sidebar-toggle { display: none; }
  .topbar, .decision-layout, .dashboard-grid, .section-grid, .map-workspace, .document-workspace, .economics-workspace, .document-open-layout, .decision-page, .landbank-workspace { grid-template-columns: 1fr; display: grid; }
  .top-actions { justify-content: flex-start; }
  #globalSearch { min-width: min(100%, 360px); }
  .map-workspace { grid-template-columns: 1fr; }
  .map-shell, .large-map { min-height: 560px; }
  .compact-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document-filters, .economics-workspace .document-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .land-summary-grid, .land-card-grid, .comparison-grid, .land-chain, .field-history-grid, .effect-detail, .farm-field-groups { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  main { padding: 14px; }
  h1 { font-size: 23px; }
  nav, .kpi-grid, .case-summary, .compact-kpis, .scenario-grid, .integrations, .case-steps, .memory-stats, .compact-chain { grid-template-columns: 1fr; }
  .top-actions, .top-actions input, .top-actions select, .top-actions button { width: 100%; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .map-shell, .large-map { min-height: 460px; }
  .document-filters, .economics-workspace .document-filters, .document-list article, .decision-list article, .effect-grid, .passport-card-grid { grid-template-columns: 1fr; }
  .hub-radial { display: grid; gap: 8px; min-height: auto; padding: 10px; background-size: 30px 30px; }
  .hub-center, .hub-spoke { position: static; width: auto; transform: none !important; min-height: 58px; }
  .hub-spoke::after { display: none; }
  .plot span { font-size: 12px; }
  .plot small { font-size: 10px; }
  .plot em { display: none; }
}