/* ==========================================================================
   PomeCore — MongoDB-inspired design system (DESIGN-mongodb.md)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts (self-hosted): Onest variable, cyrillic + latin
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Icons (self-hosted subset)
   -------------------------------------------------------------------------- */
/* Bootstrap Icons 1.11.3 — subset of 57 glyphs (MIT) */
@font-face { font-family: "bootstrap-icons"; src: url("assets/icons.woff2") format("woff2"); font-display: block; }
.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before { display: inline-block; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -0.125em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.bi-activity::before { content: "\f66b"; }
.bi-arrow-right::before { content: "\f138"; }
.bi-arrow-up-right::before { content: "\f144"; }
.bi-bar-chart::before { content: "\f17e"; }
.bi-binoculars::before { content: "\f18f"; }
.bi-box-arrow-right::before { content: "\f1c3"; }
.bi-bug::before { content: "\f1dc"; }
.bi-calendar-week::before { content: "\f1f3"; }
.bi-camera::before { content: "\f220"; }
.bi-cash-coin::before { content: "\f632"; }
.bi-chat-square-dots::before { content: "\f25f"; }
.bi-check-lg::before { content: "\f633"; }
.bi-check2::before { content: "\f272"; }
.bi-check2-circle::before { content: "\f270"; }
.bi-check2-square::before { content: "\f271"; }
.bi-chevron-right::before { content: "\f285"; }
.bi-clipboard-check::before { content: "\f28b"; }
.bi-clipboard2-check::before { content: "\f725"; }
.bi-cloud::before { content: "\f2c1"; }
.bi-cloud-drizzle::before { content: "\f29d"; }
.bi-cloud-rain-heavy::before { content: "\f2b5"; }
.bi-cloud-sun::before { content: "\f2be"; }
.bi-cpu::before { content: "\f2d6"; }
.bi-diagram-3::before { content: "\f2ee"; }
.bi-download::before { content: "\f30a"; }
.bi-droplet::before { content: "\f30d"; }
.bi-droplet-fill::before { content: "\f30b"; }
.bi-exclamation-lg::before { content: "\f63c"; }
.bi-exclamation-triangle::before { content: "\f33b"; }
.bi-eye::before { content: "\f341"; }
.bi-flower2::before { content: "\f3ce"; }
.bi-graph-up-arrow::before { content: "\f673"; }
.bi-hdd-network::before { content: "\f40d"; }
.bi-journal-plus::before { content: "\f442"; }
.bi-journal-text::before { content: "\f444"; }
.bi-lightning-charge::before { content: "\f46d"; }
.bi-lightning-charge-fill::before { content: "\f46c"; }
.bi-list::before { content: "\f479"; }
.bi-list-check::before { content: "\f473"; }
.bi-map::before { content: "\f47f"; }
.bi-moisture::before { content: "\f493"; }
.bi-patch-check::before { content: "\f4b6"; }
.bi-pencil-square::before { content: "\f4ca"; }
.bi-people::before { content: "\f4d0"; }
.bi-play-circle::before { content: "\f4f3"; }
.bi-plus-lg::before { content: "\f64d"; }
.bi-radar::before { content: "\f8cf"; }
.bi-send::before { content: "\f6c0"; }
.bi-shield-check::before { content: "\f52f"; }
.bi-shield-lock::before { content: "\f538"; }
.bi-stars::before { content: "\f589"; }
.bi-stopwatch::before { content: "\f597"; }
.bi-sun::before { content: "\f5a2"; }
.bi-thermometer-half::before { content: "\f5cd"; }
.bi-thermometer-sun::before { content: "\f5d1"; }
.bi-wind::before { content: "\f61d"; }
.bi-x-lg::before { content: "\f659"; }

:root {
  /* Brand */
  --brand-green: #00ed64;
  --green-pressed: #008c34;
  --green-dark: #00684a;
  --green-mid: #00a35c;
  --green-soft: #c3f0d2;
  --teal-deep: #001e2b;
  --teal: #003d4f;
  --teal-mid: #00684a;

  /* Surfaces */
  --canvas: #ffffff;
  --canvas-dark: #001e2b;
  --surface: #f9fbfa;
  --surface-soft: #f4f7f6;
  --surface-feature: #e3fcef;
  --hairline: #e1e5e8;
  --hairline-soft: #eceff1;
  --hairline-strong: #c1ccd6;
  --hairline-dark: #1c2d38;

  /* Text */
  --ink: #001e2b;
  --charcoal: #1c2d38;
  --slate: #3d4f5b;
  --steel: #5c6c7a;
  --stone: #7c8c9a;
  --muted: #a8b3bc;
  --on-dark: #ffffff;
  --on-dark-muted: #a8b3bc;
  --on-primary: #001e2b;

  /* Semantic (functional status layer, not brand accents) */
  --warning-bg: #fff8e0;
  --warning-text: #946f3f;
  --warning: #d9a441;
  --danger: #db3030;
  --danger-soft: #fde8e8;
  --danger-text: #b42318;
  --info: #3d4f9f;
  --info-soft: #e8ebf7;

  /* Legacy aliases used by app.js / older selectors */
  --page: var(--surface);
  --line: var(--hairline);
  --line-strong: var(--hairline-strong);
  --green: var(--brand-green);
  --blue: var(--info);
  --blue-soft: var(--info-soft);
  --red: var(--danger);
  --red-soft: var(--danger-soft);
  --amber: var(--warning);
  --amber-soft: var(--warning-bg);

  /* Shape & depth */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-xxl: 24px;
  --r-full: 9999px;
  --shadow-1: 0 1px 2px rgba(0, 30, 43, 0.04);
  --shadow-2: 0 4px 12px rgba(0, 30, 43, 0.08);
  --shadow-3: 0 12px 24px -4px rgba(0, 30, 43, 0.12);
  --shadow-4: 0 16px 48px -8px rgba(0, 30, 43, 0.16);
  --shadow: var(--shadow-1);

  /* Type */
  --font: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --container: 1280px;
  --gutter: 32px;
  --sidebar-width: 264px;
  --sidebar-base-width: 264px;
  --sidebar-min-width: 185px;
  --sidebar-max-width: 343px;
  --topbar-h: 64px;
  --ease: 160ms ease;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

button, select, input, a { font: inherit; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
button { cursor: pointer; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; color: var(--ink); }
p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--green-dark);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.container {
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Shared components
   -------------------------------------------------------------------------- */

/* Buttons — pill everywhere */
.btn,
.btn-primary-green,
.btn-ghost,
.btn-secondary-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 22px;
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
  box-shadow: none;
}

.btn:focus-visible { border-radius: var(--r-full); }

.btn-primary-green {
  color: var(--on-primary);
  border: 1px solid transparent;
  background: var(--brand-green);
}
.btn-primary-green:hover { color: var(--on-primary); background: #14f272; }
.btn-primary-green:active { background: var(--green-pressed); color: var(--on-dark); }
.btn-primary-green:disabled { background: var(--hairline); color: var(--muted); }

.btn-ghost {
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  background: transparent;
}
.btn-ghost:hover { color: var(--ink); background: var(--surface-soft); border-color: var(--stone); }
.btn-ghost:active { background: var(--hairline-soft); }

.btn-secondary-dark {
  color: var(--on-dark);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
}
.btn-secondary-dark:hover { color: var(--on-dark); background: rgba(255, 255, 255, 0.08); }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  color: var(--green-dark);
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.btn-link:hover { text-decoration: underline; color: var(--green-dark); }

.btn i { font-size: 15px; line-height: 1; }

/* Eyebrow / kicker */
.eyebrow,
.landing-kicker {
  display: inline-block;
  margin: 0 0 12px;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Badges */
.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.badge-green { color: var(--green-dark); background: var(--green-soft); }
.badge-amber { color: var(--warning-text); background: var(--warning-bg); }
.badge-red { color: var(--danger-text); background: var(--danger-soft); }
.badge-blue { color: var(--info); background: var(--info-soft); }
.badge-popular {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  color: var(--brand-green);
  background: var(--teal-deep);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

/* Cards */
.card-base,
.kpi-card,
.widget-card,
.panel-card,
.feature-card,
.steps-grid article {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--canvas);
}

/* Table */
.section-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.section-table th {
  padding: 0 12px 10px;
  color: var(--steel);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
.section-table td {
  padding: 14px 12px;
  color: var(--ink);
  font-weight: 400;
  border-bottom: 1px solid var(--hairline-soft);
  vertical-align: middle;
}
.section-table td:first-child { font-weight: 500; }
.section-table tbody tr { transition: background-color var(--ease); }
.section-table tbody tr:hover { background: var(--surface); }
.section-table tbody tr:last-child td { border-bottom: 0; }
.table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll.is-scrollable { mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.table-hint { display: none; margin: 10px 0 0; color: var(--steel); font-size: 12px; }
.table-scroll.is-scrollable + .table-hint { display: block; }

/* Skeleton */
.skeleton {
  display: inline-block;
  min-width: 56px;
  height: 1em;
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--surface-soft) 25%, var(--hairline-soft) 50%, var(--surface-soft) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  vertical-align: middle;
}

.reveal-card { animation: reveal 420ms ease both; }

/* --------------------------------------------------------------------------
   Landing
   -------------------------------------------------------------------------- */
.landing-page { background: var(--canvas); }

.landing-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.landing-header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 64px;
}

.landing-logo { display: inline-flex; align-items: center; }
.landing-logo img { width: 132px; display: block; }

.landing-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: 8px;
  color: var(--slate);
  font-size: 14px;
  font-weight: 500;
}
.landing-nav a { text-decoration: none; transition: color var(--ease); }
.landing-nav a:hover { color: var(--green-dark); }

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

.landing-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  place-items: center;
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--canvas);
  font-size: 20px;
  line-height: 1;
}
.landing-menu-toggle i {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  line-height: 1;
}
.landing-menu-toggle .bi::before { vertical-align: 0; }

.landing-mobile-nav {
  display: none;
  border-top: 1px solid var(--hairline);
  background: var(--canvas);
}
.landing-mobile-nav a {
  display: block;
  padding: 14px 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-soft);
}
.landing-mobile-nav .btn { margin: 16px 0 20px; }
.landing-mobile-nav .btn-primary-green {
  justify-content: flex-start;
  color: #00E164;
  border: 0;
  background: transparent;
}
.landing-mobile-nav .btn-primary-green:hover { color: #00E164; background: transparent; }
.landing-page.menu-open .landing-mobile-nav { display: block; }

/* Hero band */
.landing-hero-section {
  color: var(--on-dark);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(0, 104, 74, 0.55), transparent 60%),
    radial-gradient(40% 60% at 0% 100%, rgba(0, 61, 79, 0.7), transparent 60%),
    var(--teal-deep);
  padding: 96px 0 104px;
}

.landing-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: 56px;
  align-items: center;
}

.landing-hero-section .landing-kicker { color: var(--brand-green); }

.landing-copy h1 {
  max-width: 620px;
  color: var(--on-dark);
  font-size: 56px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -1px;
}
.landing-copy h1 span { display: block; }

.landing-copy p {
  max-width: 560px;
  margin: 20px 0 0;
  color: var(--on-dark-muted);
  font-size: 18px;
  line-height: 1.5;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 40px;
}
.trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  color: var(--on-dark-muted);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 500;
}
.trust-row strong { color: var(--on-dark); font-weight: 600; }

/* App preview mockup */
.product-preview {
  position: relative;
  width: min(100%, 760px);
  min-width: 0;
  margin-inline: auto;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--canvas-dark);
  box-shadow: var(--shadow-4);
  overflow: hidden;
}
.mockup-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mockup-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.mockup-bar span:first-child { background: var(--brand-green); }
.mockup-bar em {
  margin-left: 10px;
  color: var(--on-dark-muted);
  font-size: 12px;
  font-style: normal;
}
.screenshot-preview {
  display: block;
  line-height: 0;
  background: var(--surface);
}
.screenshot-preview img {
  display: block;
  width: 100%;
  height: auto;
}

/* Sections */
.landing-section { padding: 96px 0; }
.landing-section.is-soft { background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }

.section-heading {
  max-width: 720px;
  margin-bottom: 40px;
}
.section-heading h2,
.reports-section h2 {
  font-size: 36px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.5px;
}
.section-heading p {
  margin-top: 12px;
  color: var(--slate);
  font-size: 18px;
}

.feature-grid,
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.feature-card,
.steps-grid article { padding: 24px; transition: box-shadow var(--ease), transform var(--ease); }
.feature-card:hover,
.steps-grid article:hover { box-shadow: var(--shadow-2); }

.feature-card i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  color: var(--green-dark);
  border-radius: 50%;
  background: var(--surface-feature);
  font-size: 20px;
}
.feature-card h3,
.steps-grid h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
}
.feature-card p,
.steps-grid p {
  color: var(--slate);
  font-size: 14px;
  line-height: 1.5;
}

.steps-grid { grid-template-columns: repeat(3, 1fr); }
.steps-grid span {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
  color: var(--brand-green);
  border-radius: 50%;
  background: var(--teal-deep);
  font-size: 13px;
  font-weight: 600;
}

.reports-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
  gap: 56px;
  align-items: center;
}
.reports-section p {
  max-width: 560px;
  margin-top: 16px;
  color: var(--slate);
  font-size: 16px;
}
.reports-section .btn { margin-top: 28px; }

.report-card {
  padding: 32px;
  color: var(--on-dark);
  border-radius: var(--r-lg);
  background: var(--teal-deep);
}
.report-card .card-title {
  display: block;
  margin-bottom: 20px;
  color: var(--on-dark-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.report-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 18px 0 8px;
  font-size: 14px;
  color: var(--on-dark-muted);
}
.report-row:first-of-type { margin-top: 0; }
.report-row strong { color: var(--on-dark); font-size: 22px; font-weight: 500; }
.report-line {
  height: 6px;
  overflow: hidden;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.1);
}
.report-line span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-green);
}

.cta-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 56px 64px;
  color: var(--on-dark);
  border-radius: var(--r-lg);
  background:
    radial-gradient(50% 100% at 100% 50%, rgba(0, 104, 74, 0.5), transparent 70%),
    var(--teal-deep);
}
.cta-banner h2 { color: var(--on-dark); font-size: 28px; line-height: 1.3; }
.cta-banner p { margin-top: 8px; color: var(--on-dark-muted); font-size: 16px; }
.cta-banner .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.landing-footer {
  margin-top: 96px;
  padding: 48px 0 40px;
  color: var(--on-dark-muted);
  background: var(--teal-deep);
  font-size: 14px;
}
.landing-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.landing-footer .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.landing-footer .footer-brand img {
  width: 108px;
  display: block;
}
.landing-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.landing-footer a { color: var(--on-dark-muted); text-decoration: none; transition: color var(--ease); }
.landing-footer a:hover { color: var(--on-dark); }

/* --------------------------------------------------------------------------
   App shell
   -------------------------------------------------------------------------- */
.app-page {
  overflow-x: hidden;
  background: var(--surface);
}

.app-page.is-resizing,
.app-page.is-resizing * {
  cursor: col-resize !important;
  user-select: none;
}

.app-shell { min-height: 100vh; display: flex; }

/* Sidebar — dark teal */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  padding: 20px 12px 16px;
  color: var(--on-dark-muted);
  background: var(--teal-deep);
  border-right: 1px solid var(--hairline-dark);
}

.brand-block { padding: 0 4px 16px; }
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand-logo {
  width: min(124px, calc(var(--sidebar-width) - 62px));
  display: block;
}

.main-nav {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 237, 100, 0.44) transparent;
}
.main-nav::-webkit-scrollbar { width: 6px; }
.main-nav::-webkit-scrollbar-track { background: transparent; }
.main-nav::-webkit-scrollbar-thumb {
  border-radius: var(--r-full);
  background: rgba(0, 237, 100, 0.36);
}
.main-nav:hover::-webkit-scrollbar-thumb { background: rgba(0, 237, 100, 0.72); }
.main-nav::-webkit-scrollbar-thumb:hover { background: var(--brand-green); }

.nav-group { margin-bottom: 14px; }
.nav-group-title {
  margin: 0 12px 6px;
  color: var(--stone);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.nav-link {
  position: relative;
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1px 0;
  padding: 7px 12px;
  color: var(--on-dark-muted);
  text-align: left;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  transition: background-color var(--ease), color var(--ease);
}
.nav-link span {
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
.nav-link i { width: 18px; font-size: 17px; color: inherit; }
.nav-link i.lab-flask-icon {
  position: relative;
  width: 18px;
  height: 18px;
  font-size: 0;
}
.nav-link i.lab-flask-icon::before {
  position: absolute;
  left: 7px;
  top: 1px;
  width: 4px;
  height: 7px;
  content: "";
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  font-family: inherit !important;
}
.nav-link i.lab-flask-icon::after {
  position: absolute;
  left: 3px;
  top: 7px;
  width: 12px;
  height: 9px;
  content: "";
  border: 1.5px solid currentColor;
  border-radius: 2px 2px 7px 7px;
  background: linear-gradient(to top, currentColor 0 35%, transparent 35%);
}
.nav-link:hover { color: var(--on-dark); background: rgba(255, 255, 255, 0.06); }
.nav-link.active {
  color: var(--brand-green);
  background: rgba(0, 237, 100, 0.12);
}
.nav-link.active::before {
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  content: "";
  border-radius: 0 3px 3px 0;
  background: var(--brand-green);
}
.nav-link:focus-visible { outline-color: var(--brand-green); }

.sidebar-card {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-dark);
}
.sidebar-card > div { display: flex; align-items: center; }
.online-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--brand-green);
  box-shadow: 0 0 0 4px rgba(0, 237, 100, 0.14);
}
.sidebar-card strong { display: block; margin: 0; color: var(--on-dark); font-size: 13px; font-weight: 600; line-height: 1; }
.sidebar-card p { color: var(--on-dark-muted); font-size: 12px; line-height: 1.4; }

.sidebar-resizer {
  position: absolute;
  top: 0;
  right: -6px;
  width: 12px;
  height: 100%;
  z-index: 35;
  cursor: col-resize;
  touch-action: none;
}
.sidebar-resizer::before {
  position: absolute;
  top: 50%;
  left: 5px;
  width: 2px;
  height: 58px;
  content: "";
  border-radius: var(--r-full);
  background: var(--brand-green);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--ease);
}
.sidebar-resizer:hover::before,
.sidebar-resizer:focus-visible::before,
.app-page.is-resizing .sidebar-resizer::before { opacity: 1; }

/* Workspace */
.workspace {
  width: 100%;
  min-width: 0;
  margin-left: var(--sidebar-width);
  padding: 0 32px 48px;
}

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 -32px 32px;
  padding: 0 32px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin-right: auto;
}

.business-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--steel);
  font-size: 13px;
  font-weight: 500;
}
.business-context span { color: var(--slate); }
.business-context span:last-of-type { color: var(--ink); }
.business-context i { color: var(--muted); font-size: 11px; }
.business-context em {
  margin-left: 8px;
  padding: 3px 10px;
  color: var(--green-dark);
  border-radius: var(--r-full);
  background: var(--green-soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}
.business-context.context-limited em { color: var(--warning-text); background: var(--warning-bg); }

.user-menu {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 4px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
  background: var(--canvas);
}
.user-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--brand-green);
  border-radius: 50%;
  background: var(--teal-deep);
  font-size: 12px;
  font-weight: 600;
  flex: 0 0 auto;
}
.user-meta { display: grid; gap: 0; line-height: 1.2; }
.user-name { font-size: 14px; font-weight: 500; white-space: nowrap; }
.role-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--steel);
  font-size: 12px;
}
.form-select {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300684a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
}
.role-select {
  height: auto;
  min-height: 0;
  padding: 0 16px 0 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: right 0 center;
  background-size: 12px 9px;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
  width: auto;
}
.role-select:focus { box-shadow: none; outline: 2px solid var(--green-dark); outline-offset: 2px; border-radius: 4px; }

.btn-exit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  min-height: 40px;
  padding: 8px 14px;
  color: var(--slate);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  background: transparent;
  font-size: 14px;
  font-weight: 500;
}
.btn-exit:hover { color: var(--danger-text); background: var(--danger-soft); }

.mobile-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--canvas);
  font-size: 20px;
  line-height: 1;
}
.mobile-nav-toggle i {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  line-height: 1;
}
.mobile-nav-toggle .bi::before { vertical-align: 0; }

/* Page header */
.hero-panel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0;
  background: transparent;
}
.hero-panel h1 {
  font-size: 36px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.5px;
}
.hero-panel p:not(.eyebrow) {
  max-width: 640px;
  margin: 10px 0 0;
  color: var(--slate);
  font-size: 16px;
  line-height: 1.55;
}
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
  max-width: 480px;
}
.readonly-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  color: var(--steel);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-full);
  background: var(--canvas);
  font-size: 13px;
  font-weight: 500;
}

/* KPI */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0 16px;
}
.kpi-card {
  min-height: 116px;
  padding: 20px 22px;
  animation: rise 320ms ease both;
  transition: box-shadow var(--ease);
}
.kpi-card:hover { box-shadow: var(--shadow-1); }
.kpi-label {
  margin: 0 0 10px;
  color: var(--steel);
  font-size: 13px;
  font-weight: 500;
}
.kpi-value {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.5px;
}
.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 500;
}
.panel-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.panel-kpi-card {
  display: grid;
  min-height: 108px;
  padding: 16px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.budget-input {
  width: 118px;
  min-height: 34px;
  padding: 7px 9px;
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--canvas);
  font: inherit;
  font-size: 13px;
}
.opex-budget-list {
  display: grid;
  overflow-x: auto;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
}
.opex-budget-head,
.opex-budget-summary {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(90px, 0.7fr) minmax(90px, 0.7fr) minmax(110px, 0.8fr) minmax(130px, 0.9fr) minmax(110px, 0.8fr) minmax(90px, 0.7fr);
  min-width: 920px;
  align-items: center;
  gap: 10px;
}
.opex-budget-head {
  padding: 12px 14px;
  color: var(--steel);
  background: var(--surface-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.opex-budget-row {
  min-width: 920px;
  border-top: 1px solid var(--hairline-soft);
}
.opex-budget-row summary { list-style: none; }
.opex-budget-row summary::-webkit-details-marker { display: none; }
.opex-budget-summary {
  width: 100%;
  padding: 13px 14px;
  cursor: pointer;
  color: var(--slate);
  background: var(--canvas);
  font-size: 13px;
}
.opex-budget-summary span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
}
.opex-budget-summary i { color: var(--green-dark); transition: transform var(--ease); }
.opex-budget-row[open] .opex-budget-summary i { transform: rotate(90deg); }
.opex-budget-summary output { font-weight: 600; }
.opex-task-list {
  display: grid;
  gap: 0;
  padding: 0 14px 14px 42px;
  background: var(--surface);
}
.opex-task-head,
.opex-task-row {
  display: grid;
  grid-template-columns: minmax(80px, 0.5fr) minmax(240px, 1.5fr) minmax(150px, 0.9fr) minmax(130px, 0.7fr);
  min-width: 760px;
  align-items: center;
  gap: 10px;
}
.opex-task-head {
  padding: 10px 0;
  color: var(--steel);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}
.opex-task-row {
  padding: 9px 0;
  color: var(--slate);
  border-top: 1px solid var(--hairline-soft);
  font-size: 13px;
}
.budget-summary {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}
.budget-summary span {
  display: grid;
  gap: 2px;
  padding: 12px;
  color: var(--steel);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 13px;
}
.budget-summary strong { color: var(--ink); font-size: 20px; font-weight: 600; }

/* Content grid */
.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.52fr);
  gap: 16px;
}
.panel-card {
  min-width: 0;
  padding: 24px;
  animation: rise 380ms ease both;
  transition: box-shadow var(--ease);
}
.panel-card:hover { box-shadow: var(--shadow-1); }
.panel-card h2 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}
.section-subtitle { margin-top: 22px !important; }

.toolbar-row, .tabs-row, .filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}
.toolbar-row { align-items: center; }
.tab-pill {
  min-height: 36px;
  padding: 8px 14px;
  color: var(--steel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
  background: var(--canvas);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}
.tab-pill.is-active { color: var(--teal-deep); border-color: var(--green-mid); background: var(--surface-feature); }
.filters-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
}
.filters-bar label { display: grid; gap: 6px; }
.filters-bar span {
  color: var(--steel);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.filters-bar select {
  min-height: 38px;
  padding: 8px 10px;
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--canvas);
  font: inherit;
}
.status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.status-banner.is-warning { border-color: var(--warning); background: var(--warning-bg); }
.status-banner strong { display: block; margin-bottom: 4px; }
.status-banner p { color: var(--steel); font-size: 14px; line-height: 1.45; }

.tech-timeline {
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--canvas);
}
.timeline-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hairline-soft);
}
.timeline-heading h2 { margin: 0; }
.timeline-heading span { color: var(--steel); font-size: 13px; }
.phase-scale {
  display: flex;
  min-width: 860px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline-soft);
}
.phase-scale span {
  flex: var(--w) 0 0;
  padding: 7px 10px;
  color: var(--teal-deep);
  border-right: 1px solid rgba(255, 255, 255, 0.48);
  background: linear-gradient(90deg, rgba(0, 104, 74, 0.15), rgba(0, 237, 100, 0.28));
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.phase-scale span:first-child { border-radius: var(--r-full) 0 0 var(--r-full); }
.phase-scale span:last-child { border-right: 0; border-radius: 0 var(--r-full) var(--r-full) 0; }
.month-scale {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  min-width: 860px;
  border-bottom: 1px solid var(--hairline-soft);
}
.month-scale span {
  padding: 9px 8px;
  color: var(--slate);
  border-right: 1px solid var(--hairline-soft);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.month-scale span:last-child { border-right: 0; }
.timeline-chart {
  position: relative;
  min-width: 860px;
  min-height: 294px;
  background: repeating-linear-gradient(90deg, transparent 0 calc(8.333% - 1px), var(--hairline-soft) calc(8.333% - 1px) 8.333%);
}
.season-window {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(0, 237, 100, 0.1);
}
.window-spring { left: 30%; width: 12%; }
.window-harvest { left: 75%; width: 16%; }
.timeline-bar {
  position: absolute;
  left: calc(var(--left) * 1%);
  top: calc(18px + (var(--row) - 1) * 32px);
  width: calc(var(--width) * 1%);
  min-height: 23px;
  display: flex;
  align-items: center;
  padding: 4px 12px;
  color: var(--on-dark);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.timeline-green { background: var(--green-dark); }
.timeline-blue { background: var(--info); }

/* Widgets */
.dashboard-widgets {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 16px;
}
.widget-card {
  min-height: 178px;
  padding: 22px;
  animation: rise 380ms ease both;
  transition: box-shadow var(--ease);
}
.widget-card:hover { box-shadow: var(--shadow-1); }
.widget-wide, .widget-tasks, .role-summary-widget, .permissions-widget { grid-column: span 2; }

.widget-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.widget-head span { font-size: 16px; line-height: 1.3; font-weight: 600; }
.widget-head small {
  flex: 0 0 auto;
  max-width: 44%;
  color: var(--stone);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
  text-align: right;
}

.metric-body { display: flex; align-items: center; gap: 16px; }
.metric-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--info);
  background: var(--info-soft);
  font-size: 22px;
}
.widget-green .metric-icon { color: var(--green-dark); background: var(--surface-feature); }
.widget-amber .metric-icon { color: var(--warning-text); background: var(--warning-bg); }
.widget-red .metric-icon { color: var(--danger-text); background: var(--danger-soft); }
.widget-blue .metric-icon { color: var(--teal); background: #e6f0f3; }
.metric-body strong {
  display: block;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.5px;
}
.metric-body em,
.gauge-row em,
.task-widget-list em {
  display: block;
  margin-top: 4px;
  color: var(--steel);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
}

.gauge-row { display: flex; align-items: center; gap: 18px; }
.gauge {
  --value: 50;
  position: relative;
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--brand-green) calc(var(--value) * 1%), var(--surface-soft) 0);
}
.widget-amber .gauge { background: conic-gradient(var(--warning) calc(var(--value) * 1%), var(--surface-soft) 0); }
.widget-red .gauge { background: conic-gradient(var(--danger) calc(var(--value) * 1%), var(--surface-soft) 0); }
.gauge::before {
  position: absolute;
  width: 68px;
  height: 68px;
  content: "";
  border-radius: 50%;
  background: var(--canvas);
}
.gauge span { position: relative; z-index: 1; font-size: 18px; font-weight: 600; }
.gauge-row strong { display: block; font-size: 16px; line-height: 1.3; font-weight: 600; }

.local-time { display: grid; gap: 8px; }
.local-time strong { font-size: 32px; line-height: 1; font-weight: 600; letter-spacing: -0.8px; }
.local-time span { color: var(--ink); font-size: 18px; font-weight: 500; }
.local-time em { color: var(--steel); font-size: 14px; font-style: normal; text-transform: capitalize; }

.forecast-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.forecast-strip div {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 14px 10px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  background: var(--surface);
}
.forecast-strip i { color: var(--green-dark); font-size: 20px; }
.forecast-strip strong { font-size: 16px; line-height: 1; font-weight: 600; }
.forecast-strip span { color: var(--steel); font-size: 13px; }

.pest-list { display: grid; gap: 12px; }
.pest-row strong { display: block; font-size: 14px; line-height: 1.3; font-weight: 500; }
.pest-row span { color: var(--steel); font-size: 13px; }
.pest-bar { height: 6px; margin-top: 6px; overflow: hidden; border-radius: var(--r-full); background: var(--surface-soft); }
.pest-bar span { display: block; height: 100%; border-radius: inherit; }
.pest-bar .green { background: var(--green-mid); }
.pest-bar .amber { background: var(--warning); }
.pest-bar .red { background: var(--danger); }

.risk-scale {
  position: relative;
  height: 12px;
  margin-top: 30px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--green-mid) 0%, var(--warning) 52%, var(--danger) 100%);
}
.risk-point {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  border: 3px solid var(--canvas);
  border-radius: 50%;
  background: var(--teal-deep);
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-2);
}
.risk-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  color: var(--steel);
  font-size: 13px;
}
.risk-labels strong { color: var(--ink); font-size: 14px; font-weight: 600; }

.widget-note {
  margin: 18px 0 0;
  color: var(--steel);
  font-size: 13px;
  line-height: 1.5;
}
.widget-note.is-error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  color: var(--warning-text);
  border-radius: var(--r-md);
  background: var(--warning-bg);
}

.task-widget-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.task-widget-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: background-color var(--ease);
}
.task-widget-list li:hover { background: var(--surface-feature); }
.task-widget-list li > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--green-dark);
  background: var(--surface-feature);
  font-size: 13px;
  font-weight: 600;
}
.task-widget-list strong { display: block; font-size: 14px; line-height: 1.3; font-weight: 500; }

.kanban-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.kanban-column {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  background: var(--surface);
}
.kanban-column strong { font-size: 14px; }
.kanban-column span {
  padding: 9px 10px;
  border-radius: var(--r-md);
  background: var(--canvas);
  color: var(--slate);
  font-size: 13px;
  line-height: 1.35;
}
.checklist-card { grid-column: 1 / -1; }
.checklist-list { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.checklist-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  background: var(--surface);
}
.checklist-list li > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--green-dark);
  border-radius: 50%;
  background: var(--surface-feature);
}
.checklist-list strong { display: block; font-size: 14px; }
.checklist-list em { color: var(--steel); font-size: 13px; font-style: normal; }
.checklist-comment { display: grid; gap: 8px; }
.checklist-comment span { color: var(--steel); font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.checklist-comment textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--canvas);
  color: var(--ink);
  font: inherit;
  line-height: 1.45;
}

.permission-list { display: flex; flex-wrap: wrap; gap: 8px; }
.permission-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  color: var(--green-dark);
  border-radius: var(--r-full);
  background: var(--surface-feature);
  font-size: 13px;
  font-weight: 500;
}

.mini-map {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(135deg, var(--teal) 0%, var(--green-dark) 55%, var(--green-mid) 100%);
  background-size: 30px 30px, 30px 30px, auto;
}
.map-row {
  position: absolute;
  height: 10px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.5);
  transform: rotate(-11deg);
}
.map-row:nth-child(1) { left: 28px; top: 52px; width: 75%; }
.map-row:nth-child(2) { left: 48px; top: 90px; width: 66%; }
.map-row:nth-child(3) { left: 34px; top: 128px; width: 78%; }
.map-row:nth-child(4) { left: 66px; top: 168px; width: 58%; }
.map-row:nth-child(5) { left: 36px; top: 206px; width: 72%; }
.map-pin {
  position: absolute;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: var(--danger);
  box-shadow: var(--shadow-3);
}
.map-pin.pin-a { left: 58%; top: 32%; }
.map-pin.pin-b { left: 33%; top: 62%; background: var(--warning); }

.satellite-map {
  min-height: 430px;
  background:
    radial-gradient(circle at 18% 24%, rgba(244, 247, 246, 0.18), transparent 16%),
    radial-gradient(circle at 78% 72%, rgba(0, 237, 100, 0.16), transparent 18%),
    linear-gradient(33deg, rgba(51, 82, 36, 0.88) 0 22%, rgba(76, 102, 42, 0.88) 22% 36%, rgba(30, 79, 55, 0.9) 36% 58%, rgba(72, 92, 41, 0.9) 58% 74%, rgba(38, 69, 45, 0.92) 74% 100%),
    repeating-linear-gradient(104deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 18px);
  background-size: auto;
}
.yandex-orchard-map {
  min-height: auto;
  aspect-ratio: 531 / 475;
  background: linear-gradient(135deg,#dfe9e4,#c9ddd2);
}
.orchard-photo-map {
  min-height: auto;
  aspect-ratio: 921 / 873;
  background: linear-gradient(135deg,#dfe9e4,#c9ddd2);
}
.orchard-photo-map::before { display: none; }
.orchard-photo-map .google-map-chip { background: rgba(0, 30, 43, 0.66); }
.orchard-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.orchard-grid-overlay polygon,
.orchard-grid-overlay polyline {
  fill: none;
  stroke: rgba(0, 132, 194, 0.92);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(0, 30, 43, 0.26));
}
.orchard-grid-overlay .orchard-outline { stroke-width: 12; }
.orchard-photo-map .sensor-marker,
.orchard-photo-map .risk-pulse { z-index: 6; }
.orchard-photo-map .weather-station { left: 43%; top: 37%; }
.orchard-photo-map .sensor-a { left: 55%; top: 52%; }
.orchard-photo-map .sensor-b { left: 35%; top: 58%; }
.orchard-photo-map .risk-a { left: 62%; top: 33%; }
.orchard-photo-map .risk-b { left: 47%; top: 69%; background: var(--warning); }
.yandex-orchard-map::before { display: none; }
.yandex-orchard-map .google-map-chip { background: rgba(0, 30, 43, 0.66); }
.yandex-orchard-map .sensor-marker,
.yandex-orchard-map .risk-pulse { z-index: 6; }
.yandex-orchard-map .weather-station { left: 43%; top: 38%; }
.yandex-orchard-map .sensor-a { left: 55%; top: 53%; }
.yandex-orchard-map .sensor-b { left: 35%; top: 58%; }
.yandex-orchard-map .risk-a { left: 62%; top: 33%; }
.yandex-orchard-map .risk-b { left: 47%; top: 69%; background: var(--warning); }
.risk-pulse em {
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  transform: translateX(-50%);
  padding: 4px 7px;
  color: var(--ink);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}
.satellite-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.65;
}
.google-map-chip, .map-legend {
  position: absolute;
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--r-md);
  background: rgba(0, 30, 43, 0.78);
  color: var(--on-dark);
  backdrop-filter: blur(8px);
}
.google-map-chip { top: 14px; left: 14px; padding: 7px 10px; font-size: 12px; font-weight: 600; }
.orchard-boundary {
  position: absolute;
  inset: 50px 36px 48px 38px;
  z-index: 1;
  border: 2px dashed rgba(255, 255, 255, 0.82);
  border-radius: 26% 12% 22% 16%;
  transform: rotate(-7deg) skewX(-5deg);
  box-shadow: inset 0 0 0 999px rgba(0, 237, 100, 0.05);
}
.map-block {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 3px;
  min-width: 74px;
  min-height: 64px;
  padding: 9px;
  color: var(--on-dark);
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: var(--r-md);
  background: rgba(0, 104, 74, 0.58);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  transform: rotate(-7deg);
}
.map-block em { font-size: 10px; font-style: normal; font-weight: 500; opacity: 0.88; }
.block-a { left: 17%; top: 23%; width: 24%; height: 19%; }
.block-b { left: 44%; top: 19%; width: 27%; height: 20%; }
.block-c { left: 23%; top: 49%; width: 25%; height: 20%; }
.block-d { left: 52%; top: 46%; width: 25%; height: 22%; }
.block-e { left: 35%; top: 71%; width: 29%; height: 16%; }
.risk-high { border-color: rgba(219, 48, 48, 0.95); background: rgba(219, 48, 48, 0.55); }
.risk-medium { border-color: rgba(217, 164, 65, 0.95); background: rgba(217, 164, 65, 0.62); }
.farm-road {
  position: absolute;
  z-index: 3;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--r-full);
  background: rgba(98, 76, 44, 0.86);
  box-shadow: 0 0 0 2px rgba(0, 30, 43, 0.18);
}
.road-main { left: -7%; top: 42%; width: 116%; transform: rotate(-8deg); }
.road-service-a { left: 32%; top: 8%; width: 58%; transform: rotate(68deg); }
.road-service-b { left: 8%; top: 75%; width: 64%; transform: rotate(11deg); }
.sensor-marker, .risk-pulse {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  color: var(--on-dark);
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  box-shadow: var(--shadow-3);
}
.sensor-marker {
  width: 34px;
  height: 34px;
  background: var(--info);
}
.sensor-marker em {
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  transform: translateX(-50%);
  padding: 4px 7px;
  color: var(--ink);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}
.weather-station { left: 71%; top: 25%; background: var(--teal-deep); }
.sensor-a { left: 34%; top: 33%; }
.sensor-b { left: 58%; top: 63%; background: var(--green-mid); }
.risk-pulse {
  width: 30px;
  height: 30px;
  background: var(--danger);
  animation: riskPulse 1.8s ease-in-out infinite;
}
.risk-a { left: 25%; top: 27%; }
.risk-b { left: 34%; top: 52%; background: var(--warning); }
.map-legend {
  right: 14px;
  bottom: 14px;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 8px 12px;
  padding: 10px;
  font-size: 11px;
}
.map-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.map-legend i { width: 16px; height: 8px; border-radius: var(--r-xs); }
.legend-block { background: rgba(0, 237, 100, 0.72); }
.legend-road { background: rgba(98, 76, 44, 0.86); }
.legend-sensor { background: var(--info); }
.legend-risk { background: var(--danger); }

.insight-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.insight-list li {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  background: var(--surface);
}
.item-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--green-dark);
  border-radius: 50%;
  background: var(--surface-feature);
}
.item-title { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 600; }
.item-text { color: var(--steel); font-size: 13px; line-height: 1.45; }

.alert-decision-panel { grid-column: span 2; }
.alert-card-grid { display: grid; gap: 12px; }
.alert-decision-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--hairline-soft);
  border-left: 4px solid var(--info);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.alert-decision-card.alert-red { border-left-color: var(--danger); background: var(--danger-soft); }
.alert-decision-card.alert-amber { border-left-color: var(--warning); background: var(--warning-bg); }
.alert-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.alert-card-head strong { font-size: 16px; }
.alert-decision-card dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.alert-decision-card dt { color: var(--steel); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.alert-decision-card dd { margin: 3px 0 0; color: var(--ink); font-size: 13px; line-height: 1.35; }
.alert-decision-card p { color: var(--slate); font-size: 14px; line-height: 1.45; }
.alert-decision-card ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.alert-decision-card li { padding: 6px 9px; border-radius: var(--r-full); background: var(--canvas); color: var(--steel); font-size: 12px; }

.spray-notes {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.spray-notes span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--slate);
  font-size: 14px;
  line-height: 1.45;
}

.lab-panel { grid-column: span 1; }
.lab-form { display: grid; gap: 18px; }
.form-grid, .analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.lab-form label, .analysis-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.lab-form label span, .analysis-field span, .lab-section-title {
  color: var(--steel);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.lab-form input, .lab-form select, .lab-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--canvas);
  font: inherit;
}
.lab-form textarea { resize: vertical; line-height: 1.45; }
.lab-form input:focus, .lab-form select:focus, .lab-form textarea:focus {
  outline: 2px solid var(--green-dark);
  outline-offset: 2px;
}
.lab-section-title { padding-top: 2px; }
.analysis-field {
  padding: 12px;
  border: 1px solid var(--hairline-soft);
  border-left: 4px solid var(--green-mid);
  border-radius: var(--r-md);
  background: var(--surface);
}
.analysis-field input {
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 600;
}
.analysis-field em { color: var(--steel); font-size: 13px; font-style: normal; }
.analysis-amber { border-left-color: var(--warning); background: var(--warning-bg); }
.analysis-red { border-left-color: var(--danger); background: var(--danger-soft); }
.analysis-blue { border-left-color: var(--info); background: var(--info-soft); }
.form-field-wide { grid-column: 1 / -1; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.chat-panel { display: grid; gap: 18px; }
.chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.chat-header h2 { margin-bottom: 4px; }
.chat-header p { color: var(--steel); font-size: 14px; }
.chat-shell { display: grid; gap: 10px; }
.team-chat { gap: 16px; }
.chat-message {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.chat-message.is-self { grid-template-columns: minmax(0, 1fr) 36px; }
.chat-message.is-self .chat-avatar { grid-column: 2; }
.chat-message.is-self .chat-content { grid-column: 1; grid-row: 1; align-items: end; }
.chat-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--teal-deep);
  border-radius: 50%;
  background: var(--surface-feature);
  font-size: 12px;
  font-weight: 700;
}
.chat-content { display: grid; gap: 8px; min-width: 0; }
.chat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--steel); font-size: 12px; }
.chat-meta strong { color: var(--ink); font-size: 13px; font-weight: 600; }
.chat-bubble {
  max-width: 84%;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  background: var(--surface-soft);
  font-size: 14px;
  line-height: 1.5;
}
.chat-bubble.user { justify-self: end; color: var(--on-dark); background: var(--teal-deep); }
.chat-photo {
  display: grid;
  gap: 8px;
  width: min(260px, 100%);
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--canvas);
}
.chat-photo span {
  min-height: 118px;
  border-radius: var(--r-md);
  background:
    radial-gradient(circle at 24% 30%, rgba(0, 237, 100, 0.35), transparent 20%),
    linear-gradient(135deg, rgba(0, 104, 74, 0.86), rgba(0, 30, 43, 0.78)),
    repeating-linear-gradient(28deg, rgba(255, 255, 255, 0.18) 0 6px, transparent 6px 18px);
}
.chat-photo em, .file-chip { color: var(--steel); font-size: 13px; font-style: normal; }
.file-list { display: flex; flex-wrap: wrap; gap: 8px; }
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
  background: var(--surface);
}
.file-chip i { color: var(--teal-deep); }
.chat-composer {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  gap: 8px;
  align-items: center;
  padding-top: 4px;
}
.chat-composer input {
  min-height: 40px;
  padding: 10px 14px;
  color: var(--steel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
  background: var(--surface);
  font: inherit;
}
.chat-composer button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--teal-deep);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--canvas);
}

.progress-stack { display: grid; gap: 16px; }
.progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
}
.progress-label span:last-child { color: var(--steel); }
.progress { display: flex; height: 6px; overflow: hidden; border-radius: var(--r-full); background: var(--surface-soft); }
.progress-bar { height: 100%; border-radius: var(--r-full); background: var(--green-mid); }

.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgba(0, 30, 43, 0.5);
  backdrop-filter: blur(3px);
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@keyframes reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes riskPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(219, 48, 48, 0.34), var(--shadow-3); } 50% { box-shadow: 0 0 0 11px rgba(219, 48, 48, 0), var(--shadow-3); } }

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

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .landing-copy h1 { font-size: 48px; }
}

@media (max-width: 1120px) {
  .reports-section { grid-template-columns: 1fr; }
  .landing-hero-inner { grid-template-columns: 1fr; }
  .product-preview { width: min(100%, 700px); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid { grid-template-columns: 1fr; }
  .dashboard-widgets { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .alert-decision-panel { grid-column: auto; }
  .alert-decision-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-context { display: none; }
}

@media (max-width: 1023px) {
  .landing-nav,
  .landing-header-actions { display: none; }
  .landing-menu-toggle { display: grid; }
  .landing-hero-section { padding: 64px 0 72px; }
  .landing-section { padding: 64px 0; }
  .landing-copy h1 { font-size: 44px; }
}

@media (max-width: 860px) {
  .landing-copy h1 { font-size: 40px; }
  .section-heading h2, .reports-section h2 { font-size: 28px; }
  .steps-grid { grid-template-columns: 1fr; }
  .cta-banner { padding: 40px 32px; }

  .sidebar {
    transform: translateX(-102%);
    transition: transform 220ms ease;
    box-shadow: var(--shadow-4);
    overflow-y: auto;
  }
  .sidebar-resizer { display: none; }
  .nav-link { min-height: 44px; }
  body.nav-open .sidebar { transform: translateX(0); }

  .workspace { margin-left: 0; padding: 0 20px 32px; }
  .topbar { margin: 0 -20px 24px; padding: 0 20px; gap: 12px; }
  .mobile-nav-toggle { display: grid; }
  .user-menu { gap: 8px; }
  .btn-exit span { display: none; }
  .btn-exit { padding: 8px 10px; }

  .hero-panel { flex-direction: column; align-items: stretch; }
  .hero-panel h1 {
    overflow: hidden;
    font-size: clamp(18px, 5.4vw, 28px);
    letter-spacing: -0.4px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hero-actions { justify-content: flex-start; max-width: none; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .landing-copy h1 { font-size: 36px; }
  .landing-copy p { font-size: 16px; }
  .landing-hero-section { padding: 48px 0 56px; }
  .product-preview { width: min(100%, 520px); }
  .feature-grid { grid-template-columns: 1fr; }
  .cta-banner h2 { font-size: 22px; }
  .landing-footer-inner { flex-direction: column; align-items: flex-start; }

  .workspace { padding: 0 14px 24px; }
  .topbar { margin: 0 -14px 20px; padding: 0 14px; }
  .topbar .badge-popular { display: none; }
  .topbar-left { flex: 0 0 auto; }
  .user-menu { min-width: 0; }
  .user-meta .user-name { display: none; }
  .user-chip { gap: 6px; padding-right: 10px; min-width: 0; }
  .role-field { min-width: 0; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .panel-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi-card { min-height: 0; padding: 16px; }
  .kpi-value { font-size: 24px; }
  .dashboard-widgets { grid-template-columns: 1fr; }
  .widget-wide, .widget-tasks, .role-summary-widget, .permissions-widget { grid-column: auto; }
  .forecast-strip { grid-template-columns: repeat(2, 1fr); }
  .form-grid, .analysis-grid { grid-template-columns: 1fr; }
  .filters-bar, .kanban-board { grid-template-columns: 1fr; }
  .status-banner { align-items: stretch; flex-direction: column; }
  .alert-decision-card dl { grid-template-columns: 1fr; }
  .satellite-map { min-height: 360px; }
  .map-block { min-width: 54px; min-height: 46px; padding: 6px; font-size: 12px; }
  .map-block em { display: none; }
  .map-legend { grid-template-columns: 1fr; }
  .sensor-marker em { display: none; }
  .panel-card { padding: 18px; }
  .section-table { white-space: nowrap; }
}

@media (max-width: 380px) {
  .hero-panel h1 {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.18;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}