:root {
  --ink: #173e35;
  --green: #1f5b4d;
  --green-2: #2d725f;
  --mint: #dfece5;
  --mint-light: #edf4f0;
  --cream: #f7f5ef;
  --white: #ffffff;
  --gold: #dca93c;
  --gold-light: #f7ead0;
  --orange: #db744a;
  --orange-light: #f8e4da;
  --blue-light: #e1edf2;
  --purple-light: #ece4f1;
  --muted: #64736d;
  --line: #dde4e0;
  --shadow: 0 8px 24px rgba(24, 54, 45, .08);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #e8ece8;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; background: #e8ece8; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.desktop-animal-code { display: none; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(45, 114, 95, .32);
  outline-offset: 2px;
}

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

.auth-gate {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: calc(16px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom));
  background: var(--cream);
}
.auth-gate[hidden] { display: none; }
.auth-card {
  width: min(100%, 520px);
  padding: 0;
  border-radius: 0;
  background: var(--cream);
  box-shadow: none;
}
.auth-logo {
  display: block;
  width: 116px;
  height: 82px;
  object-fit: contain;
  margin: 0 auto 12px;
  mix-blend-mode: multiply;
}
.auth-card h1 { margin-bottom: 8px; text-align: center; }
.auth-card .eyebrow { text-align: center; }
.auth-copy { margin: 0 0 18px; color: var(--muted); font-size: 13px; text-align: center; }
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 5px 6px;
  margin-bottom: 18px;
  border-radius: 22px;
  background: var(--mint);
}
.auth-tabs button {
  border: 0;
  border-radius: 18px;
  min-height: 48px;
  padding: 11px 8px;
  background: transparent;
  color: var(--green);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}
.auth-tabs button.active { background: var(--white); box-shadow: 0 8px 18px rgba(31, 91, 77, .10); }
.auth-form { display: grid; gap: 14px; }
.auth-form[hidden] { display: none; }
.auth-form label {
  display: grid;
  gap: 7px;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .65px;
}
.auth-form input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  min-height: 52px;
  padding: 13px 17px;
  background: var(--white);
  color: var(--ink);
  outline: 0;
  font-size: 13px;
  font-weight: 800;
}
.auth-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31, 91, 77, .11); }
.forgot-password-button {
  justify-self: end;
  border: 0;
  background: transparent;
  color: var(--green);
  padding: 0;
  margin-top: -2px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-submit {
  border: 0;
  border-radius: 19px;
  min-height: 60px;
  padding: 15px;
  margin-top: 4px;
  background: var(--green);
  color: white;
  font-size: 19px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(31, 91, 77, .22);
}
.auth-message { display: none; margin: 13px 0 0; min-height: 18px; color: var(--muted); font-size: 11px; text-align: center; }
.auth-message:not(:empty) { display: block; }
.auth-message.error { color: #c3432d; font-weight: 800; }
.auth-message.success { color: var(--green); font-weight: 800; }
.force-update-gate {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(20px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  background: linear-gradient(160deg, rgba(247,245,239,.98), rgba(223,236,229,.98));
}
.force-update-gate[hidden] { display: none; }
.force-update-card {
  width: min(100%, 430px);
  padding: 28px 22px 24px;
  border: 1px solid #d7e4dc;
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0 22px 55px rgba(23,62,53,.18);
  text-align: center;
}
.force-update-card img {
  width: 112px;
  height: 82px;
  object-fit: contain;
  margin-bottom: 10px;
  mix-blend-mode: multiply;
}
.force-update-badge {
  display: inline-grid;
  place-items: center;
  min-height: 28px;
  padding: 6px 12px;
  border-radius: 999px;
  color: white;
  background: var(--green);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.force-update-card h1 { margin: 14px 0 8px; color: var(--ink); font-size: 24px; line-height: 1.1; }
.force-update-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.force-update-version {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 10px;
  margin: 18px 0;
  padding: 13px;
  border-radius: 17px;
  background: var(--mint-light);
}
.force-update-version small { color: var(--muted); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.force-update-version strong { color: var(--green); font-size: 14px; }
.force-update-button {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 19px;
  color: white;
  background: var(--green);
  font-size: 17px;
  font-weight: 950;
  box-shadow: 0 13px 25px rgba(31,91,77,.20);
  cursor: pointer;
}
.auth-required .app-shell,
.auth-required .bottom-nav,
.auth-required .bottom-sheet,
.auth-required .toast,
.auth-required .whatsapp-support-button,
.force-update-required .whatsapp-support-button { pointer-events: none; opacity: 0; }

.app-shell {
  width: 100%;
  max-width: 520px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--cream);
  position: relative;
  padding-bottom: calc(86px + env(safe-area-inset-bottom));
  overflow: hidden;
  box-shadow: 0 0 42px rgba(19, 54, 45, .08);
}

.topbar {
  height: 94px;
  padding: env(safe-area-inset-top) 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(247, 245, 239, .94);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
}

.brand { display: flex; align-items: center; }
.brand-mark { width: 82px; height: 82px; display: inline-grid; place-items: center; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.desktop-page-heading, .desktop-nav-brand, .desktop-nav-footer { display: none; }
.desktop-only-nav { display: none !important; }

.icon-button {
  border: 0; background: transparent; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
}
.icon-button:hover { background: rgba(31,91,77,.07); }
.icon-button svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notification-button { position: relative; }
.topbar-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.topbar-action-buttons { display: flex; align-items: center; gap: 2px; }
.app-release { display: flex; align-items: center; margin-right: 4px; padding: 4px 7px; border: 1px solid #d7e1dc; border-radius: 999px; color: #5f6f68; background: #f7f9f8; font-size: 9px; line-height: 1; font-weight: 800; letter-spacing: .2px; }
.farm-tools-button { background: rgba(31,91,77,.06); }
.account-button {
  min-width: 0;
  height: 46px;
  padding: 5px 9px 5px 5px;
  border: 1px solid #d8e0e4;
  border-radius: 15px;
  color: #123d68;
  background: rgba(255,255,255,.92);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  box-shadow: 0 3px 9px rgba(30,64,82,.045);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.account-button:hover { border-color: #b8cbc5; box-shadow: 0 7px 17px rgba(30,64,82,.09); transform: translateY(-1px); }
.account-button-avatar { width: 35px; height: 35px; flex: 0 0 auto; border-radius: 11px; color: #008c87; background: #e5f5f3; display: grid; place-items: center; font-size: 12px; font-weight: 950; }
.account-button-name { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 900; }
.account-button-chevron { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: #7d91a1; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.farm-tools-button.active { color: white; background: var(--green); }
.farm-tools-button.active svg { stroke: white; }
.notification-dot { width: 7px; height: 7px; background: var(--orange); border-radius: 50%; position: absolute; right: 8px; top: 7px; border: 2px solid var(--cream); }
.notification-dot.hidden { display: none; }
.hidden { display: none !important; }

.view { display: none; padding: 0 22px 28px; animation: fade .22s ease; }
.view.active { display: block; }
@keyframes fade { from { opacity: .35; transform: translateY(3px); } }

.hero { display: flex; align-items: center; justify-content: space-between; padding: 19px 0 22px; }
.eyebrow { margin: 0 0 7px; color: #82908b; font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: 1.45px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: 30px; line-height: 1.05; margin-bottom: 8px; letter-spacing: -1.2px; }
h2 { font-size: 20px; line-height: 1.2; margin-bottom: 0; letter-spacing: -.6px; }
.hero-copy, .subhead { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.avatar { border: 3px solid var(--white); background: var(--mint); color: var(--green); width: 49px; height: 49px; border-radius: 50%; font-size: 12px; font-weight: 800; box-shadow: 0 3px 14px rgba(33,78,65,.13); cursor: pointer; }
.avatar:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.weather-card {
  width: 100%; color: var(--ink); text-align: left; font: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 12px; background: var(--mint);
  border: 1px solid rgba(31,91,77,.08); border-radius: 19px; padding: 15px 17px;
}
.weather-card:hover { border-color: rgba(31,91,77,.18); box-shadow: 0 5px 14px rgba(31,91,77,.06); }
.weather-icon { width: 43px; height: 43px; display: grid; place-items: center; }
.weather-icon span { font-size: 34px; filter: drop-shadow(0 2px 2px rgba(31,91,77,.08)); }
.weather-main { display: flex; flex-direction: column; flex: 1; }
.weather-main strong { font-size: 23px; line-height: 1; }
.weather-main span, .weather-meta { font-size: 11px; color: var(--muted); }
.weather-main small { color: var(--green-2); font-size: 9px; font-weight: 700; margin-top: 3px; }
.weather-meta { display: flex; flex-direction: column; gap: 3px; text-align: right; }
.weather-meta b { margin-top: 3px; color: var(--green); font-size: 9px; }
.home-weather-location {
  margin-top: 8px; padding: 8px 10px 8px 13px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--white); display: flex; align-items: center; gap: 10px;
}
.home-weather-location span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .55px; }
.home-weather-location select {
  min-width: 0; flex: 1; padding: 7px 30px 7px 9px; border: 0; border-radius: 9px;
  color: var(--green); background: var(--mint-light); font-size: 11px; font-weight: 750; outline: none;
}

.section-block { padding-top: 32px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 15px; }
.text-button { border: 0; background: transparent; color: var(--green-2); padding: 6px 0; font-size: 12px; font-weight: 750; cursor: pointer; }
.text-button span { margin-left: 4px; }

.livestock-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.livestock-card {
  border: 1px solid var(--line); background: var(--white); border-radius: 18px; padding: 15px;
  min-height: 125px; position: relative; overflow: hidden; box-shadow: 0 4px 14px rgba(30,62,53,.035);
  cursor: pointer; text-align: left;
}
.livestock-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.animal-emoji { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px; font-size: 24px; margin-bottom: 12px; }
.livestock-card strong { display: block; font-size: 15px; }
.livestock-card small { color: var(--muted); font-size: 11px; }
.livestock-card .card-arrow { position: absolute; right: 14px; bottom: 14px; color: #9ba6a2; font-size: 20px; }
.tone-green { background: var(--mint); }
.tone-gold { background: var(--gold-light); }
.tone-orange { background: var(--orange-light); }
.tone-blue { background: var(--blue-light); }
.tone-purple { background: var(--purple-light); }

.production-card { background: var(--white); border: 1px solid var(--line); border-radius: 19px; padding: 17px; }
.today-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.stock-purchase-section { position: relative; }
.stock-purchase-home-card { width: 100%; padding: 15px; border: 1px solid #bfd4ca; border-radius: 18px; color: var(--ink); background: linear-gradient(135deg, #f8fcf9, #e8f3ed); display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; box-shadow: 0 5px 16px rgba(31,91,77,.06); }
.stock-purchase-home-icon { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; color: white; background: var(--green); display: grid; place-items: center; font-size: 22px; }
.stock-purchase-home-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.stock-purchase-home-copy strong { font-size: 13px; }
.stock-purchase-home-copy small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.stock-purchase-home-action { color: var(--green); font-size: 10px; font-weight: 850; white-space: nowrap; }
.today-metric { min-width: 0; min-height: 112px; padding: 11px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); display: flex; flex-direction: column; align-items: flex-start; }
.today-metric-icon { width: 34px; height: 34px; margin-bottom: 9px; border-radius: 11px; display: grid; place-items: center; font-size: 14px; font-weight: 900; }
.today-metric > div { min-width: 0; width: 100%; display: flex; flex-direction: column; }
.today-metric small { color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .4px; }
.today-metric strong { margin: 3px 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-metric i { color: var(--muted); font-size: 7px; font-style: normal; }
.purchase-metric .today-metric-icon { color: var(--green); background: var(--mint); }
.feed-metric .today-metric-icon { color: #9c7221; background: var(--gold-light); }
.death-metric .today-metric-icon { color: var(--orange); background: var(--orange-light); }
.death-metric strong { color: var(--orange); }
.production-top { display: flex; align-items: center; gap: 13px; }
.production-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; }
.egg-icon { background: var(--gold-light); color: #c89631; font-size: 27px; font-weight: 300; transform: rotate(-8deg); }
.production-top > div { display: flex; flex-direction: column; flex: 1; }
.production-top .muted, .muted { color: var(--muted); font-size: 11px; }
.production-top strong { font-size: 24px; margin-top: 2px; }
.production-top strong small { font-size: 11px; color: var(--muted); font-weight: 600; }
.trend { background: var(--mint-light); color: var(--green-2); border-radius: 15px; padding: 5px 8px; font-size: 10px; font-weight: 800; }
.progress-row { margin: 17px 0 13px; display: flex; align-items: center; gap: 10px; }
.progress-row > span { color: var(--muted); font-size: 10px; }
.progress-track, .mini-track { height: 6px; flex: 1; border-radius: 99px; overflow: hidden; background: #e9ece7; }
.progress-track span, .mini-track i { display: block; height: 100%; background: var(--gold); border-radius: inherit; transition: width .3s ease; }
.record-button { width: 100%; padding: 11px; border: 1px solid #cbdad4; color: var(--green); background: var(--mint-light); border-radius: 12px; font-weight: 750; font-size: 12px; cursor: pointer; }

.add-circle, .primary-icon-button {
  width: 34px; height: 34px; border-radius: 50%; border: 0; color: white; background: var(--green);
  font-size: 22px; display: grid; place-items: center; cursor: pointer; box-shadow: 0 5px 13px rgba(31,91,77,.19);
}
.task-list { display: flex; flex-direction: column; gap: 10px; }
.task-item {
  background: var(--white); border: 1px solid var(--line); border-radius: 15px; padding: 13px 14px;
  display: flex; align-items: center; gap: 12px; transition: opacity .2s;
}
.task-check {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1.8px solid #a6b3ae;
  display: grid; place-items: center; background: transparent; cursor: pointer; color: white; font-size: 12px;
}
.task-item.done { opacity: .6; }
.task-item.done .task-check { border-color: var(--green); background: var(--green); }
.task-item.done strong { text-decoration: line-through; }
.task-copy { min-width: 0; display: flex; flex-direction: column; flex: 1; }
.task-copy strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-copy span { color: var(--muted); font-size: 10px; margin-top: 3px; }
.task-tag { border-radius: 10px; font-size: 9px; font-weight: 800; padding: 5px 7px; }

.feed-card { background: var(--white); border: 1px solid var(--line); border-radius: 17px; padding: 13px; display: flex; align-items: center; gap: 12px; }
.feed-card .chevron-button { display: none; pointer-events: none; }
.home-supplies-list { display: grid; gap: 9px; }
.supply-purchase-button {
  padding: 9px 11px; border: 0; border-radius: 11px; color: #fff; background: var(--green);
  font-size: 9px; font-weight: 850; white-space: nowrap; cursor: pointer; box-shadow: 0 4px 11px rgba(31,91,77,.16);
}
.supply-stock-card {
  padding: 14px; border: 1px solid rgba(31,91,77,.1); border-radius: 19px;
  background: linear-gradient(145deg, #ffffff 0%, #f7fbf8 100%);
  box-shadow: 0 8px 22px rgba(25,68,56,.07);
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.supply-stock-card:active { transform: scale(.985); box-shadow: 0 4px 12px rgba(25,68,56,.08); }
.supply-stock-card.low { border-color: #e8b9a4; background: linear-gradient(145deg, #fff 0%, #fff6f1 100%); }
.supply-stock-icon {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 15px;
  color: #9c7221; background: var(--gold-light); display: grid; place-items: center; font-size: 18px; font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
.supply-stock-icon.feed-stock-icon, .stock-category-icon.feed-stock-icon { color: #9c7221; background: var(--gold-light); }
.supply-stock-icon.general-stock-icon, .stock-category-icon.general-stock-icon { color: var(--green); background: var(--mint); }
.supply-stock-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.supply-stock-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.supply-stock-title > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.supply-stock-title b { flex: 0 0 auto; padding: 3px 6px; border-radius: 7px; color: var(--orange); background: var(--orange-light); font-size: 8px; }
.supply-stock-copy small { margin: 4px 0 5px; color: var(--muted); font-size: 10px; }
.supply-stock-copy small strong { color: var(--ink); font-size: 12px; }
.supply-stock-value { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.supply-stock-value b { color: var(--green); font-size: 10px; }
.supply-stock-value em { color: var(--muted); font-size: 7px; font-style: normal; white-space: nowrap; }
.supply-stock-track { height: 5px; overflow: hidden; border-radius: 99px; background: #e9ece7; }
.supply-stock-track i { display: block; height: 100%; border-radius: inherit; background: var(--green-2); }
.supply-stock-card.low .supply-stock-track i { background: var(--orange); }
.supply-stock-action { flex: 0 0 auto; color: white; background: var(--green); border-radius: 11px; padding: 8px 10px; font-size: 8px; font-weight: 900; box-shadow: 0 5px 12px rgba(31,91,77,.18); }
.supplies-empty { padding: 18px; border: 1px dashed #cbd6d1; border-radius: 16px; background: var(--white); text-align: center; display: flex; flex-direction: column; align-items: center; }
.supplies-empty > span { margin-bottom: 6px; color: var(--green); font-size: 22px; }
.supplies-empty strong { font-size: 12px; }
.supplies-empty small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.feed-illustration { width: 47px; height: 47px; border-radius: 14px; background: var(--gold-light); padding: 8px; }
.feed-illustration svg { width: 100%; fill: none; stroke: #b98628; stroke-width: 2; stroke-linejoin: round; }
.feed-info { flex: 1; min-width: 0; }
.feed-title { display: flex; align-items: center; gap: 7px; }
.feed-title strong { font-size: 13px; }
.feed-info > span { display: block; font-size: 10px; color: var(--muted); margin: 4px 0 8px; }
.low-stock { color: var(--orange); background: var(--orange-light); font-size: 8px; font-weight: 800; padding: 3px 6px; border-radius: 7px; }
.mini-track { width: 85%; height: 4px; }
.mini-track i { background: var(--orange); }
.tips-heading { margin: 25px 0 12px; }
.farm-tips { display: grid; gap: 10px; }
.farm-tip {
  padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--white);
  display: flex; align-items: flex-start; gap: 11px;
}
.farm-tip-icon {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px;
  display: grid; place-items: center; color: #21745e; background: var(--mint); font-size: 20px;
}
.farm-tip-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feed-tip .farm-tip-icon { color: #9c7221; background: var(--gold-light); font-size: 17px; font-weight: 900; }
.livestock-tip .farm-tip-icon { color: #396a88; background: var(--blue-light); }
.farm-tip div { min-width: 0; }
.farm-tip strong { display: block; margin-bottom: 4px; font-size: 12px; }
.farm-tip p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.chevron-button { border: 0; background: transparent; font-size: 25px; color: #9ca6a2; cursor: pointer; }

.page-title-row { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 24px; }
.page-title-row h1 { margin-bottom: 8px; }
.primary-icon-button { width: 44px; height: 44px; font-size: 27px; }
.summary-strip { display: grid; grid-template-columns: repeat(3,1fr); padding: 16px; border-radius: 18px; background: var(--green); color: white; box-shadow: 0 10px 23px rgba(31,91,77,.16); }
.summary-strip div { display: flex; flex-direction: column; align-items: center; border-right: 1px solid rgba(255,255,255,.17); }
.summary-strip div:last-child { border-right: 0; }
.summary-strip span { font-size: 9px; opacity: .68; margin-bottom: 4px; }
.summary-strip strong { font-size: 21px; }
.summary-strip .orange { color: #f4bc83; }

.filter-pills { display: flex; gap: 7px; margin: 23px 0 15px; overflow-x: auto; scrollbar-width: none; }
.filter-pills button { border: 1px solid var(--line); background: var(--white); color: var(--muted); border-radius: 99px; padding: 8px 14px; font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.filter-pills button.active { background: var(--green); color: white; border-color: var(--green); }
.animal-list { display: flex; flex-direction: column; gap: 10px; }
.animal-row { width: 100%; color: var(--ink); font: inherit; text-align: left; cursor: pointer; display: flex; gap: 13px; align-items: center; background: var(--white); border: 1px solid var(--line); padding: 13px; border-radius: 17px; }
.animal-row:hover { border-color: #c8d6d0; box-shadow: 0 5px 14px rgba(31,91,77,.05); }
.animal-row .animal-emoji { flex: 0 0 auto; margin: 0; }
.animal-row-copy { min-width: 0; flex: 1; }
.animal-row-copy strong { display: block; font-size: 14px; }
.animal-row-copy span { font-size: 10px; color: var(--muted); }
.animal-row .count { text-align: right; }
.animal-row .count strong { display: block; font-size: 18px; }
.animal-row .count span { color: var(--muted); font-size: 9px; }
.livestock-add-button span { line-height: 1; }
.livestock-add-button b { display: none; font-size: 11px; }
.view[data-view="livestock"] .page-title-row { padding-bottom: 18px; }
.livestock-summary { gap: 8px; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.livestock-summary div,
.livestock-summary div:last-child { min-width: 0; padding: 12px; border: 1px solid #dce4e0; border-radius: 11px; background: var(--white); align-items: flex-start; }
.livestock-summary span { margin: 0; color: #6b7a73; font-size: 8px; font-weight: 750; opacity: 1; }
.livestock-summary strong { margin-top: 5px; color: var(--green); font-size: 19px; line-height: 1; }
.animal-directory-toolbar { margin: 18px 0 12px; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 10px; }
.animal-directory-heading { display: flex; flex-direction: column; min-width: 0; }
.animal-directory-heading span { color: var(--ink); font-size: 13px; font-weight: 800; }
.animal-directory-heading small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.animal-directory-toolbar .filter-pills { flex: 0 0 auto; margin: 0; }
.batch-directory-controls { min-width: 0; display: flex; align-items: center; gap: 8px; }
.batch-directory-controls .filter-pills { min-width: 0; flex: 1; }
.batch-status-filter { min-width: 96px; display: flex; flex-direction: column; gap: 3px; }
.batch-status-filter > span { color: var(--muted); font-size: 7px; font-weight: 850; text-transform: uppercase; letter-spacing: .45px; }
.batch-status-filter select { width: 100%; min-height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background-color: var(--white); font: inherit; font-size: 9px; font-weight: 750; cursor: pointer; }
.animal-list { display: grid; grid-template-columns: 1fr; gap: 9px; }
.animal-row { min-height: 76px; gap: 11px; padding: 11px 12px; border-radius: 12px; }
.animal-row-copy span { display: block; margin-top: 4px; }
.animal-row .count { flex: 0 0 auto; min-width: 58px; }
.animal-row .count strong { font-size: 16px; line-height: 1; }
.animal-row .count span { display: block; margin-top: 4px; white-space: nowrap; }
.animal-row-arrow { flex: 0 0 auto; color: #92a098; font-size: 20px; line-height: 1; }
.batch-directory-list { display: grid; grid-template-columns: 1fr; gap: 9px; }
.batch-directory-card.batch-card { min-width: 0; padding: 13px; border-radius: 13px; }
.batch-directory-header { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px 10px; }
.batch-directory-header > .animal-emoji { grid-row: 1 / span 2; width: 42px; height: 42px; margin: 0; }
.batch-animal-image { color: #21745e; }
.batch-animal-image.tone-gold { color: #9a6d1c; }
.batch-animal-image.tone-orange { color: #b75b3c; }
.batch-animal-image.tone-blue { color: #3d6e8d; }
.batch-animal-image.tone-purple { color: #715a91; }
.batch-animal-image svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.batch-directory-copy { min-width: 0; display: flex; flex-direction: column; }
.batch-directory-labels { display: flex; align-items: center; gap: 6px; min-width: 0; }
.batch-directory-labels > small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.batch-directory-copy > strong { margin-top: 5px; overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.batch-directory-copy > small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.batch-directory-side { grid-column: 2; min-width: 0; display: flex; align-items: center; gap: 8px; }
.batch-directory-age {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 5px 8px;
  border-radius: 9px;
  color: white;
  background: linear-gradient(135deg, #1f6b55, #31906d);
  box-shadow: 0 5px 12px rgba(31,107,85,.2);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.batch-directory-age strong { font-size: 13px; font-weight: 950; line-height: 1; }
.batch-directory-age small { color: rgba(255,255,255,.86); font-size: 7px; font-weight: 850; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.batch-temperature-tab {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid #c7ddd2;
  border-radius: 9px;
  color: var(--green);
  background: #edf7f2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.batch-temperature-tab.outside { color: #46685e; background: #f3f7f5; }
.batch-temperature-tab svg { width: 12px; height: 12px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.batch-temperature-tab > span { display: flex; flex-direction: column; }
.batch-temperature-tab strong { font-size: 13px; font-weight: 950; line-height: 1; }
.batch-temperature-tab small { margin-top: 2px; color: currentColor; font-size: 7px; font-weight: 850; line-height: 1; text-transform: uppercase; letter-spacing: .2px; }
.batch-directory-result { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.batch-directory-result span { font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.batch-directory-result strong { font-size: 11px; }
.batch-directory-result.positive { color: var(--green-2); }
.batch-directory-result.negative { color: #bd5943; }
.batch-directory-arrow { grid-column: 3; grid-row: 1 / span 2; color: #92a098; font-size: 21px; line-height: 1; }
.broiler-temperature-guide {
  min-width: 0;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #bcdaca;
  border-radius: 11px;
  color: var(--green);
  background: linear-gradient(135deg, #e7f5ed, #f6fbf8);
  display: flex;
  align-items: center;
  gap: 9px;
}
.broiler-temperature-icon { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; color: white; background: var(--green); display: grid; place-items: center; }
.broiler-temperature-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.broiler-temperature-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.broiler-temperature-copy small { overflow: hidden; color: #567268; font-size: 7px; font-weight: 800; letter-spacing: .25px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.broiler-temperature-copy strong { margin-top: 2px; color: var(--green); font-size: 15px; font-weight: 950; line-height: 1; }
.broiler-temperature-age { flex: 0 0 auto; padding: 4px 7px; border-radius: 7px; color: var(--green); background: white; font-size: 8px; font-weight: 900; white-space: nowrap; }
.batch-detail-temperature-guide { margin-bottom: 11px; }
.batch-detail-temperature-guide.hidden { display: none; }
.batch-detail-temperature-guide .broiler-temperature-guide { margin-top: 0; }
.batch-directory-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.batch-directory-stats > div { min-width: 0; padding: 0 7px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.batch-directory-stats > div:first-child { padding-left: 0; }
.batch-directory-stats > div:last-child { padding-right: 0; border-right: 0; }
.batch-directory-stats span { color: var(--muted); font-size: 7px; font-weight: 750; text-transform: uppercase; letter-spacing: .35px; }
.batch-directory-stats strong { margin-top: 3px; overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.batch-directory-stats small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.batch-directory-stats .death-count { color: var(--orange); }
.batch-directory-empty { grid-column: 1 / -1; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6ca687; margin-right: 4px; }

.task-progress-card { background: var(--mint); border: 1px solid #cfdfd7; border-radius: 19px; padding: 16px; display: flex; gap: 15px; align-items: center; }
.task-progress-card > div:last-child { display: flex; flex-direction: column; }
.task-progress-card strong { font-size: 17px; margin: 3px 0; }
.task-progress-card p { margin: 0; color: var(--muted); font-size: 10px; }
.progress-ring {
  --progress: 0deg; width: 61px; height: 61px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; background: conic-gradient(var(--green) var(--progress), #d2dfd9 0);
  position: relative;
}
.progress-ring::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--mint); }
.progress-ring span { z-index: 1; font-size: 11px; font-weight: 800; }
.full-task-list .task-item { padding: 15px; }

.activity-calendar { padding: 15px; border: 1px solid var(--line); border-radius: 19px; background: var(--white); box-shadow: 0 5px 16px rgba(31,91,77,.04); }
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.calendar-header h2 { font-size: 16px; }
.calendar-header button { width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); color: var(--green); font-size: 20px; cursor: pointer; }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-weekdays { margin-bottom: 5px; }
.calendar-weekdays span { color: var(--muted); text-align: center; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.calendar-day, .calendar-blank { min-height: 38px; }
.calendar-day { position: relative; border: 0; border-radius: 11px; background: transparent; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; font-size: 10px; }
.calendar-day:hover { background: var(--mint-light); }
.calendar-day.today { box-shadow: inset 0 0 0 1px #a9c4b7; font-weight: 850; }
.calendar-day.selected { background: var(--green); color: white; }
.calendar-day i { min-height: 5px; display: flex; gap: 2px; }
.calendar-day i b, .calendar-legend i { display: block; width: 5px; height: 5px; border-radius: 50%; }
.death-dot { background: var(--orange); }
.feed-dot { background: var(--gold); }
.sale-dot { background: var(--green-2); }
.expense-dot { background: var(--orange); }
.vaccination-dot { background: #4d88a5; }
.calendar-day.selected .sale-dot { background: white; }
.calendar-day.selected .expense-dot, .calendar-day.selected .vaccination-dot { outline: 1px solid rgba(255,255,255,.75); }
.calendar-legend { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
.calendar-legend span { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 8px; }
.activity-list-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 27px; }
.activity-list-heading button { display: none; border: 0; background: transparent; color: var(--green-2); font-size: 9px; font-weight: 800; cursor: pointer; }
.activity-list-heading button.visible { display: block; }
.activity-filters { margin: 15px -16px 18px; padding: 3px 16px 10px; display: flex; justify-content: flex-start; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.activity-filters::-webkit-scrollbar { display: none; }
.activity-filters button {
  width: 66px; height: 66px; flex: 0 0 66px; padding: 0; border: 0; border-radius: 50%;
  background: var(--green); color: white; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; box-shadow: 0 7px 15px rgba(31,91,77,.18);
}
.activity-filters button span { font-size: 18px; line-height: 1; font-weight: 900; }
.activity-filters button b { font-size: 9px; font-weight: 900; }
.activity-filters button.active { color: white; background: var(--green); border: 3px solid var(--gold); box-shadow: 0 0 0 3px var(--cream), 0 8px 17px rgba(31,91,77,.22); }
.activity-timeline { display: flex; flex-direction: column; gap: 16px; }
.activity-day-group { display: flex; flex-direction: column; gap: 7px; }
.activity-day-heading { display: flex; align-items: baseline; justify-content: space-between; padding: 0 3px; }
.activity-day-heading strong { font-size: 11px; }
.activity-day-heading span { color: var(--muted); font-size: 8px; }
.activity-row { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.activity-row > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.activity-row > div strong { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-row > div span { margin-top: 2px; color: var(--green-2); font-size: 8px; }
.activity-row > div small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.activity-row > b { font-size: 9px; white-space: nowrap; }
.swipe-record { position: relative; overflow: hidden; border-radius: 14px; touch-action: pan-y; }
.swipe-record .activity-row, .swipe-record .batch-event { position: relative; z-index: 2; transition: transform .22s ease; }
.swipe-record.show-actions .activity-row, .swipe-record.show-actions .batch-event { transform: translateX(-132px); }
.swipe-actions { position: absolute; inset: 0 0 0 auto; width: 124px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 0 0 6px; align-items: stretch; z-index: 1; }
.swipe-actions button { border: 0; color: #fff; font-size: 10px; font-weight: 900; cursor: pointer; }
.swipe-actions .edit { background: var(--green); border-radius: 12px 0 0 12px; }
.swipe-actions .delete { background: #bd5943; border-radius: 0 12px 12px 0; }
.activity-quantity-badge {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; color: white; background: var(--green);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 6px 13px rgba(31,91,77,.2);
}
.activity-quantity-badge strong { font-size: 15px; line-height: 1; font-weight: 900; }
.activity-quantity-badge small { margin-top: 3px; color: rgba(255,255,255,.8); font-size: 7px; line-height: 1; font-weight: 850; text-transform: uppercase; }

.insight-card { padding: 19px; color: white; border-radius: 20px; background: linear-gradient(135deg, #1d5548, #2e7461); box-shadow: 0 12px 27px rgba(31,91,77,.18); }
.insight-card .eyebrow { color: rgba(255,255,255,.55); }
.insight-card h2 { margin-bottom: 19px; }
.insight-stats { display: grid; grid-template-columns: 1fr 1fr; }
.insight-stats div { display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.2); }
.insight-stats div:last-child { border: 0; padding-left: 20px; }
.insight-stats span { font-size: 10px; opacity: .65; }
.insight-stats strong { font-size: 17px; margin: 3px 0; }
.insight-stats small { color: #aee2c7; font-size: 9px; }
.insight-stats .neutral { color: #f1d59a; }
.tools-list { margin-top: 20px; display: flex; flex-direction: column; gap: 9px; }
.tools-list button { width: 100%; border: 1px solid var(--line); background: var(--white); border-radius: 16px; padding: 12px; display: flex; gap: 12px; align-items: center; cursor: pointer; text-align: left; }
.tools-list button > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; }
.tools-list strong { font-size: 13px; }
.tools-list small { color: var(--muted); font-size: 9px; margin-top: 3px; }
.tools-list b { color: #a0aaa6; font-size: 20px; font-weight: 400; }
.tool-icon, .quick-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-weight: 800; }
.tool-icon svg,
.quick-icon svg,
.today-metric-icon svg,
.supply-stock-icon svg,
.stock-category-icon svg,
.batch-event-icon svg,
.quote-animal svg,
.invoice-animal svg,
.stock-purchase-home-icon svg,
.batch-actions button span svg,
.support-intro > span svg,
.whatsapp-support-button strong svg,
.confirmation-warning svg,
.quotes-empty > span svg,
.supplies-empty > span svg,
.batch-empty > span svg,
.empty-state-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stock-purchase-home-icon svg { width: 23px; height: 23px; }
.today-metric-icon svg { width: 18px; height: 18px; }
.batch-event-icon svg,
.batch-actions button span svg { width: 20px; height: 20px; }
.quote-animal svg,
.invoice-animal svg { width: 24px; height: 24px; }
.confirmation-warning svg { width: 26px; height: 26px; }
.whatsapp-support-button strong svg { width: 19px; height: 19px; }
.quote-icon { background: #173e35; color: white; font-family: Georgia, serif; font-size: 18px; }
.support-icon { color: white; background: #725286; font-size: 17px; }
.subscription-icon { color: white; background: linear-gradient(135deg, #244f78, #63a1c3); font-size: 17px; }
.privacy-icon { color: white; background: linear-gradient(135deg, #1f5b4d, #2f7d8a); font-size: 17px; }
.access-icon { color: white; background: linear-gradient(135deg, #1f5b4d, #d59a21); font-size: 17px; }
.invoice-icon { color: white; background: #2f6b59; font-family: Georgia, serif; font-size: 17px; }
.red { background: var(--orange-light); color: var(--orange); }
.gold { background: var(--gold-light); color: #a87b20; }
.green { background: var(--mint); color: var(--green); }
.blue { background: var(--blue-light); color: #48798d; }
.gray { background: #e9ece9; color: #75817c; }
.purple { background: var(--purple-light); color: #7f5f90; }
.cream { background: #f5eddb; color: #bd9035; }

.quotes-section { padding-top: 30px; }
.quotes-list { display: flex; flex-direction: column; gap: 9px; }
.quote-card {
  width: 100%; border: 1px solid var(--line); background: var(--white); border-radius: 16px;
  padding: 12px; display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer;
}
.quote-animal { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center; font-size: 22px; }
.quote-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.quote-copy strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quote-copy small, .quote-total small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.quote-total { display: flex; flex-direction: column; align-items: flex-end; }
.quote-total strong { font-size: 12px; white-space: nowrap; }
.quotes-empty { border: 1px dashed #cdd7d2; border-radius: 16px; padding: 15px; display: flex; align-items: center; gap: 11px; color: var(--muted); }
.quotes-empty > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: white; background: var(--green); font-family: Georgia, serif; }
.quotes-empty div { display: flex; flex-direction: column; }
.quotes-empty strong { color: var(--ink); font-size: 12px; }
.quotes-empty small { font-size: 9px; margin-top: 3px; }
.quote-calculation {
  display: flex; align-items: center; justify-content: space-between; padding: 14px;
  border-radius: 13px; background: var(--mint); border: 1px solid #cddfd6;
}
.quote-calculation span { color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .7px; }
.quote-calculation strong { font-size: 20px; color: var(--green); }

.weather-region-control { margin-bottom: 15px; }
.weather-region-control > label { display: block; margin-bottom: 7px; color: #697772; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; }
.weather-select-row { display: flex; gap: 8px; }
.weather-select-row select {
  flex: 1; min-width: 0; border: 1px solid #d5ddd8; background: var(--white); color: var(--ink);
  border-radius: 12px; padding: 12px; font-size: 13px; font-weight: 700; outline: none;
}
.weather-refresh { width: 43px; flex: 0 0 auto; border: 0; border-radius: 12px; background: var(--green); color: white; font-size: 21px; cursor: pointer; }
.weather-refresh.spinning { animation: weather-spin .9s linear infinite; }
.weather-world-tools { display: grid; gap: 8px; margin-top: 9px; }
.weather-world-tools > button, .weather-world-tools button { border: 0; border-radius: 12px; background: #e0f1e8; color: var(--green); font-weight: 900; font-size: 10px; padding: 11px 12px; cursor: pointer; }
.weather-world-tools > div { display: flex; gap: 8px; }
.weather-world-tools input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--white); padding: 11px 12px; color: var(--ink); font-size: 11px; font-weight: 750; }
.weather-world-tools button:disabled { opacity: .55; cursor: wait; }
@keyframes weather-spin { to { transform: rotate(360deg); } }
.weather-region-control > small { display: block; margin-top: 7px; color: var(--muted); font-size: 9px; }
.forecast-summary { min-height: 78px; display: flex; align-items: center; gap: 13px; padding: 14px; border-radius: 16px; color: white; background: linear-gradient(135deg, #3d7e75, #6ca39a); }
.forecast-main-icon { font-size: 37px; }
.forecast-summary > div { display: flex; flex-direction: column; min-width: 0; }
.forecast-summary small { opacity: .72; font-size: 9px; }
.forecast-summary strong { margin: 3px 0; font-size: 15px; }
.forecast-summary span:not(.forecast-main-icon) { opacity: .8; font-size: 9px; }
.forecast-loading { width: 100%; align-items: center; text-align: center; }
.forecast-loading > span { font-size: 27px; }
.forecast-list { display: flex; flex-direction: column; margin-top: 12px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--white); }
.forecast-day { display: grid; grid-template-columns: 44px 33px 1fr auto; gap: 8px; align-items: center; min-height: 54px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.forecast-day:last-child { border-bottom: 0; }
.forecast-day > strong { font-size: 11px; }
.forecast-day-icon { font-size: 21px; text-align: center; }
.forecast-condition { display: flex; flex-direction: column; font-size: 10px; }
.forecast-condition small { margin-top: 2px; color: #568a9f; font-size: 8px; }
.forecast-temperatures { display: flex; gap: 6px; align-items: baseline; font-size: 12px; }
.forecast-temperatures small { color: var(--muted); font-size: 10px; }
.weather-attribution { margin: 12px 0 0; color: var(--muted); text-align: center; font-size: 8px; }
.weather-attribution a { color: var(--green-2); }

.batch-sheet { max-height: 92vh; }
.batch-sheet-header { align-items: center; }
.batch-animal-heading { display: flex; align-items: center; gap: 11px; }
.batch-animal-heading .animal-emoji { margin: 0; flex: 0 0 auto; }
.batch-animal-heading small { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }
.batch-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.batch-summary.hidden { display: none; }
.batch-summary > div { min-height: 65px; padding: 12px; border-radius: 13px; background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.batch-summary span { color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .5px; }
.batch-summary strong { margin-top: 4px; font-size: 15px; }
.batch-summary .summary-alert, .death-count { color: var(--orange); }
.batch-summary .summary-profit { color: var(--green-2); }
.batch-summary .summary-loss { color: #bd5943; }
.batch-list-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 23px 0 12px; }
.batch-list-heading h3 { margin: 0; font-size: 17px; letter-spacing: -.4px; }
.batch-add-button { border: 0; border-radius: 10px; padding: 8px 11px; background: var(--green); color: white; font-size: 10px; font-weight: 800; cursor: pointer; }
.batch-list { display: flex; flex-direction: column; gap: 10px; }
.batch-card { width: 100%; color: var(--ink); font: inherit; text-align: left; cursor: pointer; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); }
.batch-card:hover { border-color: #bfd0c8; box-shadow: 0 6px 18px rgba(31,91,77,.06); }
.batch-card-top { display: flex; justify-content: space-between; gap: 10px; }
.batch-card-top h4 { margin: 6px 0 2px; font-size: 13px; }
.batch-card-top small { color: var(--muted); font-size: 8px; }
.batch-card-side { display: flex; align-items: center; gap: 10px; }
.batch-age-circle {
  width: 50px; height: 50px; flex: 0 0 auto; border-radius: 50%; color: white; background: var(--green);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(31,91,77,.2);
}
.batch-age-circle strong { font-size: 18px; line-height: .95; font-weight: 900; }
.batch-age-circle small { margin-top: 3px; color: rgba(255,255,255,.78); font-size: 7px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.batch-status { display: inline-block; padding: 3px 6px; border-radius: 7px; color: var(--green-2); background: var(--mint); font-size: 7px; font-weight: 850; text-transform: uppercase; letter-spacing: .5px; }
.batch-status.closed { color: #75817c; background: #e9ece9; }
.batch-result { min-width: 85px; text-align: right; }
.batch-result span { display: block; font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .5px; }
.batch-result strong { display: block; margin-top: 3px; font-size: 14px; }
.batch-result.positive { color: var(--green-2); }
.batch-result.negative { color: #bd5943; }
.batch-stock-row { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 10px; margin-top: 14px; padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.batch-stock-row > div { display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--line); }
.batch-stock-row > div:last-child { border: 0; }
.batch-stock-row span { color: var(--muted); font-size: 7px; text-transform: uppercase; }
.batch-stock-row strong { margin-top: 2px; font-size: 13px; }
.batch-stock-row small { color: var(--muted); font-size: 7px; }
.batch-finance-row { display: flex; justify-content: space-between; padding-top: 10px; color: var(--muted); font-size: 9px; }
.batch-finance-row strong { color: var(--ink); margin-left: 4px; }
.batch-empty { padding: 28px 15px; border: 1px dashed #cdd7d2; border-radius: 16px; text-align: center; color: var(--muted); }
.batch-empty > span { display: block; font-size: 28px; }
.batch-empty strong { display: block; margin: 8px 0 3px; color: var(--ink); font-size: 13px; }
.batch-empty small { display: block; font-size: 9px; }
.batch-empty button { margin-top: 13px; border: 0; border-radius: 10px; padding: 8px 12px; background: var(--green); color: white; font-size: 10px; font-weight: 800; }
.batch-view-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.batch-view-actions button { min-height: 45px; border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; font-weight: 800; cursor: pointer; }
.batch-view-actions button b { min-width: 21px; height: 21px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center; font-size: 9px; }
.batch-view-secondary { color: var(--green); background: var(--white); border: 1px solid #cbd8d2; }
.batch-view-secondary b { color: var(--green); background: var(--mint); }
.batch-view-primary { color: white; background: var(--green); border: 1px solid var(--green); }
.batch-view-primary b { color: var(--green); background: white; }
.batch-calculation strong.negative { color: #bd5943; }

.batch-detail-sheet { max-height: 92vh; }
.batch-detail-header { gap: 10px; }
.batch-detail-header > div:first-child { flex: 1; min-width: 0; }
.batch-detail-header small { display: block; color: var(--muted); font-size: 9px; margin-top: 4px; }
.batch-detail-edit-button { flex: 0 0 auto; border: 0; border-radius: 12px; padding: 10px 12px; color: white; background: linear-gradient(135deg, #1f5b4d, #2f7965); box-shadow: 0 7px 16px rgba(31,91,77,.18); font-size: 9px; font-weight: 900; white-space: nowrap; cursor: pointer; }
.batch-detail-edit-button:active { transform: scale(.97); }
.batch-age-circle-large { width: 58px; height: 58px; }
.batch-age-circle-large strong { font-size: 22px; }
.batch-detail-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 15px; }
.batch-detail-summary > div { min-width: 0; padding: 10px 7px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; }
.batch-detail-summary span { color: var(--muted); font-size: 7px; text-transform: uppercase; }
.batch-detail-summary strong { margin-top: 4px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.batch-detail-summary .summary-alert { color: var(--orange); }
.batch-detail-summary .summary-profit { color: var(--green-2); }
.batch-detail-summary .summary-loss { color: #bd5943; }
.batch-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.batch-actions button { min-width: 0; border: 0; background: transparent; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
.batch-actions button span { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; font-weight: 850; font-size: 15px; }
.batch-actions button strong { font-size: 8px; }
.batch-actions button:disabled { opacity: .38; cursor: not-allowed; }
.batch-event-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 25px 0 11px; }
.batch-event-heading h3 { margin: 0; font-size: 17px; }
.batch-event-heading button { border: 0; background: transparent; color: var(--green-2); font-size: 9px; font-weight: 800; cursor: pointer; }
.batch-events { display: flex; flex-direction: column; gap: 8px; }
.batch-event { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.batch-event-selectable { width: 100%; text-align: left; cursor: pointer; }
.batch-event-selectable > i { flex: 0 0 auto; color: var(--green); background: var(--mint); border-radius: 10px; padding: 7px 8px; font-size: 8px; font-weight: 900; font-style: normal; }
.batch-event-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; font-weight: 850; }
.batch-event > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.batch-event > div strong { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.batch-event > div span { color: var(--muted); font-size: 8px; margin-top: 2px; }
.batch-event > div small { color: #94a09b; font-size: 7px; margin-top: 3px; }
.batch-event > b { font-size: 10px; white-space: nowrap; }
.event-income { color: var(--green-2); }
.event-cost { color: #bd5943; }
.batch-record-action-summary { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); }
.batch-record-action-summary div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.batch-record-action-summary strong { font-size: 14px; }
.batch-record-action-summary small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.batch-record-action-summary p { margin: 8px 0 0; color: var(--ink); font-size: 10px; line-height: 1.4; }
.batch-record-action-summary b { margin-top: 8px; font-size: 13px; }
.record-action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 13px; }
.record-action-buttons button { border: 0; border-radius: 15px; padding: 13px; color: white; font-size: 11px; font-weight: 900; }
.record-action-buttons .primary-mini { background: var(--green); }
.record-action-buttons .danger-mini { background: #bd5943; }
.batch-empty.compact { padding: 20px 12px; }
.record-context { padding: 11px 13px; border-radius: 12px; background: var(--mint); border: 1px solid #cfdfd7; display: flex; flex-direction: column; }
.record-context span { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .6px; }
.record-context strong { margin-top: 3px; font-size: 12px; }
.delete-batch-panel { display: flex; flex-direction: column; gap: 7px; padding: 13px; border: 1px solid #efc7b7; border-radius: 15px; background: #fff6f1; }
.delete-batch-panel strong { color: #9f3f2e; font-size: 12px; }
.delete-batch-panel small { color: #9f6a5d; font-size: 9px; line-height: 1.4; }
.delete-batch-panel button { margin-top: 3px; border: 0; border-radius: 12px; padding: 12px; color: white; background: #bd5943; font-size: 11px; font-weight: 900; cursor: pointer; }

.bottom-nav {
  position: fixed; z-index: 30; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(100%, 520px); height: calc(72px + env(safe-area-inset-bottom)); padding: 8px 13px env(safe-area-inset-bottom);
  background: rgba(255,253,249,.97); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5,1fr);
  backdrop-filter: blur(15px);
}
.bottom-nav button { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #8a9691; font-size: 8px; font-weight: 700; cursor: pointer; }
.bottom-nav button > span { max-width: 100%; line-height: 1.05; text-align: center; }
.bottom-nav svg { width: 34px; height: 34px; padding: 7px; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: .2s ease; }
.bottom-nav button.active { color: var(--green); font-weight: 900; }
.bottom-nav button.active svg { color: white; background: var(--green); fill: none; stroke: white; box-shadow: 0 5px 12px rgba(31,91,77,.24); }
.bottom-nav button.active span { font-weight: 900; }
.bottom-nav .central-action { position: relative; min-width: 48px; }
.bottom-nav .central-action span { position: absolute; top: -26px; width: 52px; height: 52px; border-radius: 50%; background: var(--green); color: white; display: grid; place-items: center; font-size: 31px; line-height: 1; border: 5px solid var(--cream); box-shadow: 0 7px 18px rgba(31,91,77,.24); }

.whatsapp-support-button {
  position: fixed;
  z-index: 35;
  right: max(14px, calc((100vw - 520px) / 2 + 14px));
  bottom: calc(86px + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 8px 8px 14px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, #25d366, #128c4b);
  text-decoration: none;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: 0 13px 24px rgba(18, 140, 75, .28);
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.whatsapp-support-button strong {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #128c4b;
  background: white;
  font-size: 11px;
  font-weight: 1000;
}
.whatsapp-support-button:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(18, 140, 75, .34); }
.whatsapp-support-button:active { transform: translateY(0) scale(.98); }

.sheet-backdrop { position: fixed; z-index: 50; inset: 0; background: rgba(12,30,25,.42); opacity: 0; pointer-events: none; transition: opacity .25s; backdrop-filter: blur(2px); }
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.bottom-sheet {
  position: fixed; z-index: 60; left: 50%; bottom: 0; transform: translate(-50%, 105%);
  width: min(100%, 520px); max-height: 88vh; overflow-y: auto; background: var(--cream);
  padding: 10px 22px calc(24px + env(safe-area-inset-bottom)); border-radius: 25px 25px 0 0;
  transition: transform .3s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -20px 60px rgba(13,39,31,.18);
}
.bottom-sheet.open { transform: translate(-50%, 0); }
.sheet-handle { width: 42px; height: 4px; margin: 0 auto 17px; border-radius: 99px; background: #cbd1cd; }
.sheet-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.sheet-header .icon-button { background: #e9ece8; font-size: 22px; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-grid button { border: 1px solid var(--line); background: var(--white); border-radius: 17px; padding: 14px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; cursor: pointer; }
.quick-grid .quick-icon { margin-bottom: 11px; }
.quick-grid strong { font-size: 12px; }
.quick-grid small { font-size: 9px; color: var(--muted); margin-top: 3px; }

.notification-sheet { max-height: 88vh; }
.notification-toolbar { margin-bottom: 13px; padding: 10px 12px; border-radius: 12px; background: var(--mint); display: flex; align-items: center; justify-content: space-between; }
.notification-toolbar span { color: var(--green); font-size: 10px; font-weight: 800; }
.notification-toolbar button { border: 0; background: transparent; color: var(--green-2); font-size: 9px; font-weight: 800; cursor: pointer; }
.play-store-update-link { width: 100%; margin: 0 0 13px; border: 0; border-radius: 15px; padding: 13px 15px; color: white; background: linear-gradient(135deg, #1f5b4d, #2f7965); box-shadow: 0 8px 18px rgba(31,91,77,.17); display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 900; cursor: pointer; }
.play-store-update-link strong { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; font-size: 18px; line-height: 1; }
.play-store-update-link:active { transform: scale(.985); }
.notification-list { display: flex; flex-direction: column; gap: 8px; }
.notification-card { width: 100%; color: var(--ink); font: inherit; text-align: left; position: relative; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--white); display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.notification-card.unread { border-color: #bdd3c8; background: #fbfdfa; box-shadow: 0 5px 14px rgba(31,91,77,.05); }
.notification-type-icon { width: 39px; height: 39px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; font-size: 14px; font-weight: 900; }
.notification-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.notification-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.notification-meta b { color: var(--muted); font-size: 7px; text-transform: uppercase; letter-spacing: .6px; }
.notification-meta small { padding: 2px 5px; border-radius: 6px; background: #edf0ed; color: var(--muted); font-size: 7px; }
.notification-copy > strong { font-size: 12px; }
.notification-copy > span:not(.notification-meta) { margin: 4px 0 6px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.notification-copy > small { color: #98a29e; font-size: 7px; }
.notification-card > i { width: 7px; height: 7px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: var(--orange); }

.form-sheet form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field label { font-size: 10px; font-weight: 800; color: #697772; text-transform: uppercase; letter-spacing: .7px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid #d8ded9; background: var(--white); color: var(--ink);
  border-radius: 12px; padding: 12px 13px; outline: none; font-size: 13px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(45,114,95,.09); }
.field textarea { resize: vertical; min-height: 75px; }
.money-input { display: flex; align-items: center; border: 1px solid #d8ded9; background: var(--white); border-radius: 12px; overflow: hidden; }
.money-input:focus-within { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(45,114,95,.09); }
.money-input > span { padding-left: 12px; color: var(--green); font-size: 12px; font-weight: 850; }
.money-input input { border: 0; box-shadow: none !important; padding-left: 7px; }
.money-field > small { margin-top: -2px; color: var(--muted); font-size: 7px; }
.fixed-money-field .money-input { background: #edf1ee; border-color: #d6ddd8; box-shadow: inset 0 0 0 1px rgba(31,91,77,.03); }
.fixed-money-field .money-input input { color: #68736e; cursor: not-allowed; }
.fixed-money-field > small { color: var(--green-2); font-weight: 750; }
.batch-setup-intro {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 16px;
  border: 1px solid #cbdad3; border-left: 4px solid var(--green-2); border-radius: 13px; background: #f7faf8;
}
.batch-setup-intro > div { display: flex; flex-direction: column; min-width: 0; }
.batch-setup-intro span, .batch-setup-review header span { color: var(--green-2); font-size: 8px; font-weight: 900; letter-spacing: .8px; }
.batch-setup-intro strong { margin-top: 4px; color: var(--ink); font-size: 14px; }
.batch-setup-intro small { max-width: 340px; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.batch-setup-intro > b { flex: 0 0 auto; padding: 6px 9px; border: 1px solid #c3d4cc; border-radius: 7px; color: var(--green); background: white; font-size: 8px; text-transform: uppercase; letter-spacing: .4px; }
.batch-form-section { padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 5px 16px rgba(24, 63, 52, .035); }
.batch-form-section-heading { display: grid; grid-template-columns: 31px minmax(0, 1fr); align-items: start; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #edf0ed; }
.batch-section-number { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: white; background: var(--green); font-size: 10px; font-weight: 900; }
.batch-form-section-heading > div { display: flex; flex-direction: column; min-width: 0; }
.batch-form-section-heading strong { color: var(--ink); font-size: 13px; }
.batch-form-section-heading small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.batch-form-section-fields { display: flex; flex-direction: column; gap: 13px; padding-top: 13px; }
.batch-unit-preview { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 12px; border: 1px solid #d9e4de; border-radius: 10px; background: #f4f8f5; }
.batch-unit-preview > div { display: flex; flex-direction: column; min-width: 0; }
.batch-unit-preview span { color: var(--ink); font-size: 10px; font-weight: 850; }
.batch-unit-preview small { margin-top: 3px; color: var(--muted); font-size: 7px; line-height: 1.35; }
.batch-unit-preview > strong { flex: 0 0 auto; color: var(--green); font-size: 15px; }
.batch-setup-review { overflow: hidden; border: 1px solid #c8d9d1; border-radius: 14px; background: #fff; }
.batch-setup-review > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 15px; background: #f2f7f4; border-bottom: 1px solid #dfe8e3; }
.batch-setup-review header > div { display: flex; flex-direction: column; min-width: 0; }
.batch-setup-review header strong { margin-top: 4px; color: var(--ink); font-size: 14px; }
.batch-setup-review header small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.batch-setup-review header > b { flex: 0 0 auto; padding: 6px 8px; border-radius: 7px; color: #176142; background: #dcefe4; font-size: 8px; text-transform: uppercase; letter-spacing: .35px; }
.batch-setup-review header > b.pending { color: #68736e; background: #e5e9e7; }
.batch-review-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.batch-review-metrics > div { min-width: 0; padding: 12px 14px; border-right: 1px solid #e7ece9; display: flex; flex-direction: column; }
.batch-review-metrics > div:last-child { border-right: 0; }
.batch-review-metrics span { color: var(--muted); font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.batch-review-metrics strong { margin-top: 5px; overflow-wrap: anywhere; color: var(--ink); font-size: 12px; }
.batch-setup-review > p { margin: 0; padding: 11px 15px; border-top: 1px solid #edf0ed; color: var(--muted); background: #fbfcfb; font-size: 8px; line-height: 1.45; }
.support-intro { display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 14px; color: white; background: linear-gradient(135deg, #1f5b4d, #327564); }
.support-intro > span { width: 39px; height: 39px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: white; font-size: 18px; font-weight: 900; }
.support-intro > div { display: flex; flex-direction: column; }
.support-intro strong { font-size: 12px; }
.support-intro small { margin-top: 3px; color: rgba(255,255,255,.75); font-size: 8px; line-height: 1.35; }
.settings-intro { background: linear-gradient(135deg, #284f69, #487c91); }
.customer-profile-intro { background-color: #1f5b4d; background-image: linear-gradient(135deg, #1f5b4d, #347866); }
.logo-upload-field input[type="file"] { padding: 10px; font-size: 10px; background: var(--white); }
.logo-upload-preview { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px dashed #b7c9bf; border-radius: 15px; background: #f7fbf8; }
.logo-upload-preview img { width: 58px; height: 58px; flex: 0 0 auto; border-radius: 14px; object-fit: cover; background: white; border: 1px solid var(--line); }
.logo-upload-preview div { display: flex; flex-direction: column; min-width: 0; }
.logo-upload-preview strong { font-size: 12px; color: var(--ink); }
.logo-upload-preview small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.document-format-card { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 12px; border: 1px solid #cbd8d2; border-radius: 13px; background: #f7faf8; }
.document-format-badge { width: 48px; height: 58px; display: grid; place-items: center; border: 1px solid #b8c9c0; border-radius: 5px; color: var(--green); background: white; font-size: 13px; font-weight: 900; box-shadow: 0 4px 10px rgba(24,63,52,.06); }
.document-format-copy { min-width: 0; display: flex; flex-direction: column; }
.document-format-card strong { font-size: 11px; }
.document-format-card small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.document-format-card button { border: 1px solid #bfd0c8; border-radius: 8px; padding: 8px 9px; color: var(--green); background: white; font-size: 9px; font-weight: 850; cursor: pointer; }
.document-format-actions { display: flex; align-items: center; gap: 5px; }
.document-customization-fields { display: flex; flex-direction: column; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfb; }
.document-customization-heading { display: flex; flex-direction: column; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.document-customization-heading span { color: var(--green); font-size: 8px; font-weight: 900; letter-spacing: .75px; }
.document-customization-heading strong { margin-top: 4px; font-size: 13px; }
.document-customization-heading small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.document-customization-fields input[type="color"] { min-height: 44px; padding: 5px; cursor: pointer; }
.vat-settings-card { display: flex; flex-direction: column; gap: 12px; padding: 13px; border: 1px solid #bfd8cc; border-radius: 13px; background: #f3f8f5; }
.vat-settings-heading { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #d7e5de; }
.vat-settings-heading > span { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .4px; }
.vat-settings-heading > div { display: flex; flex-direction: column; min-width: 0; }
.vat-settings-heading strong { color: var(--ink); font-size: 13px; }
.vat-settings-heading small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.vat-settings-note { display: block; padding: 9px 10px; border-radius: 9px; color: #48665a; background: #e4efe9; font-size: 9px; font-weight: 700; line-height: 1.4; }
.vat-settings-card .field-readonly { opacity: .58; }
.vat-settings-card .field-readonly input { cursor: not-allowed; }
.document-calculation { overflow: hidden; border: 1px solid #c8d8d0; border-radius: 13px; background: white; }
.document-calculation > div { min-height: 40px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e5ebe8; }
.document-calculation > div:last-child { border-bottom: 0; }
.document-calculation span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .55px; }
.document-calculation strong { color: var(--ink); font-size: 12px; }
.document-calculation .document-calculation-total { color: white; background: var(--green); }
.document-calculation .document-calculation-total span,
.document-calculation .document-calculation-total strong { color: white; }
.document-calculation .document-calculation-total strong { font-size: 19px; }
.document-calculation.vat-disabled > div:nth-child(2) { background: #f7f9f8; }
.sales-form-sheet { overflow: hidden; padding: 0; display: flex; flex-direction: column; background: #f6f8f7; }
.sales-form-sheet .sheet-handle { flex: 0 0 auto; margin-top: 8px; }
.sales-form-sheet .sheet-header { flex: 0 0 auto; margin: 0; padding: 10px 18px 14px; border-bottom: 1px solid #e1e7e4; background: white; }
.sales-form-sheet .sheet-header h2 { font-size: 19px; }
.sales-document-form { flex: 1; min-height: 0; overflow: hidden; gap: 0 !important; padding: 0; }
.sales-document-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.sales-document-body > * { flex: 0 0 auto; }
.sales-document-form .field { gap: 7px; }
.sales-document-form .field label { color: #53645d; font-size: 11px; letter-spacing: .35px; }
.sales-document-form .field input,
.sales-document-form .field select,
.sales-document-form .field textarea { min-height: 45px; padding: 11px 12px; border-radius: 9px; font-size: 14px; }
.sales-document-form .field textarea { min-height: 84px; }
.sales-document-form .money-input { min-height: 45px; border-radius: 9px; }
.sales-document-form .money-input input { min-height: 43px; }
.sales-document-form .money-field > small,
.sales-customer-picker .field > small,
.sales-field-note { color: #6a7972; font-size: 10px; font-weight: 600; line-height: 1.35; }
.sales-field-note.warning { color: #a24d2e; }
.sales-form-overview { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid #cbd8d2; border-radius: 10px; background: #eef4f1; }
.sales-form-type { flex: 0 0 auto; padding: 7px 9px; border-radius: 7px; color: white; background: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .55px; }
.sales-form-overview dl { min-width: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, auto)); align-items: center; gap: 10px 20px; }
.sales-form-overview dl div { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; }
.sales-form-overview dt { color: #73817a; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .45px; }
.sales-form-overview dd { margin: 3px 0 0; overflow-wrap: anywhere; color: var(--ink); font-size: 11px; font-weight: 850; }
.sales-form-section { overflow: hidden; border: 1px solid #d9e2de; border-radius: 10px; background: white; }
.sales-form-section > header { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #e7ece9; background: #fbfcfb; }
.sales-form-section > header > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: var(--green); background: #e4eee9; font-size: 10px; font-weight: 900; }
.sales-form-section > header > div { display: flex; flex-direction: column; min-width: 0; }
.sales-form-section > header strong { color: var(--ink); font-size: 13px; }
.sales-form-section > header small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.sales-form-section-content { padding: 14px; display: flex; flex-direction: column; gap: 13px; }
.sales-customer-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.sales-create-customer-button { min-height: 45px; padding: 0 13px; border: 1px solid #9fb9ad; border-radius: 9px; color: var(--green); background: white; font-size: 11px; font-weight: 850; white-space: nowrap; cursor: pointer; }
.sales-create-customer-button span { margin-right: 4px; font-size: 14px; line-height: 1; }
.sales-create-customer-button:hover { border-color: var(--green); background: #f0f6f3; }
.sales-create-customer-button:active { transform: translateY(1px); }
.sales-review-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.sales-review-fields { display: flex; flex-direction: column; gap: 13px; }
.sales-payment-hint { padding: 10px 12px; border-left: 3px solid #98b5a8; border-radius: 0 8px 8px 0; background: #f3f7f5; display: flex; flex-direction: column; }
.sales-payment-hint span { color: #6c7b74; font-size: 9px; font-weight: 850; letter-spacing: .45px; }
.sales-payment-hint strong { margin-top: 4px; color: #3f5149; font-size: 10px; font-weight: 700; line-height: 1.4; }
.sales-form-actions { flex: 0 0 auto; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #dce4e0; background: white; display: flex; align-items: center; justify-content: flex-end; gap: 9px; box-shadow: 0 -8px 20px rgba(25,55,45,.06); }
.sales-cancel-button { min-height: 44px; padding: 0 18px; border: 1px solid #cbd7d1; border-radius: 9px; color: #4b5c54; background: white; font-size: 11px; font-weight: 800; cursor: pointer; }
.sales-document-form .submit-button { width: auto; min-width: 150px; min-height: 44px; margin: 0; border-radius: 9px; font-size: 11px; box-shadow: none; }
.whatsapp-tool-icon { color: #147f4e !important; background: #e4f5eb !important; font-size: 8px !important; letter-spacing: -.2px; }
.whatsapp-title-row { align-items: flex-end; }
.whatsapp-refresh-button { min-height: 40px; padding: 0 14px; border: 1px solid #b9cbc3; border-radius: 10px; color: var(--green); background: white; font-size: 10px; font-weight: 850; cursor: pointer; }
.whatsapp-workspace { display: flex; flex-direction: column; gap: 14px; }
.whatsapp-loading { min-height: 260px; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.whatsapp-loading > span { width: 34px; height: 34px; margin-bottom: 13px; border: 3px solid #d9e9e1; border-top-color: #1f9d61; border-radius: 50%; animation: whatsapp-spin .8s linear infinite; }
.whatsapp-loading strong { color: var(--ink); font-size: 14px; }
.whatsapp-loading small { margin-top: 5px; color: var(--muted); font-size: 9px; }
@keyframes whatsapp-spin { to { transform: rotate(360deg); } }
.whatsapp-connect-card { padding: 22px; border: 1px solid #cfe1d8; border-radius: 18px; background: linear-gradient(140deg, #f7fcf9, #fff); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 17px; }
.whatsapp-connect-mark { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; color: white; background: #15945a; font-size: 14px; font-weight: 950; letter-spacing: -.5px; }
.whatsapp-connect-mark svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.whatsapp-connect-copy { min-width: 0; }
.whatsapp-connect-copy > span { color: #31805c; font-size: 8px; font-weight: 900; letter-spacing: .7px; }
.whatsapp-connect-copy h2 { margin: 5px 0 0; color: var(--ink); font-size: 19px; }
.whatsapp-connect-copy p { max-width: 660px; margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.whatsapp-connect-actions { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.whatsapp-connect-actions button { min-height: 43px; padding: 0 16px; border: 0; border-radius: 10px; color: white; background: #15945a; font-size: 10px; font-weight: 900; cursor: pointer; }
.whatsapp-connect-actions small { color: #65756e; font-size: 8px; line-height: 1.4; }
.whatsapp-setup-warning { margin-top: 12px; padding: 10px 11px; border: 1px solid #edc9a7; border-radius: 10px; background: #fff8ef; display: flex; flex-direction: column; }
.whatsapp-setup-warning strong { color: #98591b; font-size: 9px; }
.whatsapp-setup-warning small { margin-top: 3px; color: #8b6846; font-size: 8px; line-height: 1.4; }
.whatsapp-connect-card > aside { grid-column: 1 / -1; padding-top: 15px; border-top: 1px solid #e1ebe6; display: grid; gap: 8px; }
.whatsapp-connect-card > aside strong { color: var(--ink); font-size: 10px; }
.whatsapp-connect-card > aside span { padding-left: 16px; position: relative; color: #62736b; font-size: 9px; }
.whatsapp-connect-card > aside span::before { content: "\2713"; position: absolute; left: 0; color: #15945a; font-weight: 900; }
.whatsapp-account-bar { min-height: 62px; padding: 11px 14px; border: 1px solid #cfe0d8; border-radius: 13px; background: white; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.whatsapp-account-bar > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.whatsapp-live-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: #21a968; box-shadow: 0 0 0 5px #e1f4e9; }
.whatsapp-account-bar p { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.whatsapp-account-bar strong { color: var(--ink); font-size: 11px; }
.whatsapp-account-bar small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.whatsapp-account-bar button { padding: 8px 10px; border: 1px solid #e1b6aa; border-radius: 8px; color: #aa4c39; background: #fff8f6; font-size: 8px; font-weight: 850; cursor: pointer; }
.whatsapp-inbox-layout { min-height: 540px; overflow: hidden; border: 1px solid #d9e2de; border-radius: 15px; background: white; display: grid; grid-template-columns: 1fr; }
.whatsapp-conversation-panel { min-width: 0; border-bottom: 1px solid #dfe6e2; background: #fbfcfb; }
.whatsapp-conversation-panel > header { min-height: 66px; padding: 13px 15px; border-bottom: 1px solid #e2e9e5; display: flex; align-items: center; justify-content: space-between; }
.whatsapp-conversation-panel > header div { display: flex; flex-direction: column; }
.whatsapp-conversation-panel > header span { color: #718079; font-size: 7px; font-weight: 900; letter-spacing: .7px; }
.whatsapp-conversation-panel > header strong { margin-top: 3px; color: var(--ink); font-size: 12px; }
.whatsapp-conversation-panel > header > b { min-width: 27px; height: 27px; padding: 0 7px; display: grid; place-items: center; border-radius: 8px; color: #167c4d; background: #e5f4ec; font-size: 9px; }
.whatsapp-conversation-list { max-height: 270px; overflow-y: auto; }
.whatsapp-conversation { width: 100%; min-height: 68px; padding: 10px 12px; border: 0; border-bottom: 1px solid #e7ece9; background: transparent; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; text-align: left; cursor: pointer; }
.whatsapp-conversation:hover, .whatsapp-conversation.active { background: #edf6f1; }
.whatsapp-conversation.active { box-shadow: inset 3px 0 0 #15945a; }
.whatsapp-contact-avatar { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: #176e48; background: #dff1e8; font-size: 10px; font-weight: 900; }
.whatsapp-conversation-copy { min-width: 0; display: flex; flex-direction: column; }
.whatsapp-conversation-copy strong { overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.whatsapp-conversation-copy small { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.whatsapp-conversation-meta { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.whatsapp-conversation-meta small { color: #849089; font-size: 7px; white-space: nowrap; }
.whatsapp-conversation-meta b { min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; color: white; background: #15945a; font-size: 7px; }
.whatsapp-empty-list { min-height: 150px; padding: 24px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.whatsapp-empty-list strong { color: var(--ink); font-size: 11px; }
.whatsapp-empty-list small { margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.whatsapp-chat-panel { min-width: 0; min-height: 380px; display: flex; flex-direction: column; background: #f4f7f5; }
.whatsapp-chat-panel > header { min-height: 66px; padding: 11px 14px; border-bottom: 1px solid #dfe6e2; background: white; display: flex; align-items: center; gap: 10px; }
.whatsapp-chat-panel > header > div { display: flex; flex-direction: column; min-width: 0; }
.whatsapp-chat-panel > header strong { color: var(--ink); font-size: 11px; }
.whatsapp-chat-panel > header small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.whatsapp-message-list { flex: 1; min-height: 250px; max-height: 410px; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 9px; background-color: #f2f6f3; background-image: radial-gradient(rgba(31,91,77,.05) .7px, transparent .7px); background-size: 13px 13px; }
.whatsapp-message { max-width: 82%; padding: 9px 11px 7px; border: 1px solid #dce5e0; border-radius: 12px 12px 12px 4px; background: white; align-self: flex-start; box-shadow: 0 3px 8px rgba(25,55,45,.05); }
.whatsapp-message.outbound { border-color: #bcdcca; border-radius: 12px 12px 4px 12px; background: #dcf4e7; align-self: flex-end; }
.whatsapp-message p { margin: 0; color: #25332d; font-size: 10px; line-height: 1.45; white-space: pre-wrap; }
.whatsapp-message small { margin-top: 5px; display: block; color: #718079; font-size: 7px; text-align: right; }
.whatsapp-chat-empty { flex: 1; display: grid; place-items: center; color: var(--muted); font-size: 9px; }
.whatsapp-reply-form { padding: 11px; border-top: 1px solid #dfe6e2; background: white; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 9px; }
.whatsapp-reply-form textarea { min-height: 45px; max-height: 110px; padding: 11px 12px; border: 1px solid #ccd9d3; border-radius: 10px; resize: vertical; font-size: 10px; outline: 0; }
.whatsapp-reply-form textarea:focus { border-color: #15945a; box-shadow: 0 0 0 3px rgba(21,148,90,.09); }
.whatsapp-reply-form button { min-height: 45px; padding: 0 15px; border: 0; border-radius: 10px; color: white; background: #15945a; font-size: 9px; font-weight: 900; cursor: pointer; }
.whatsapp-reply-form button:disabled { opacity: .55; cursor: wait; }
.whatsapp-service-note { padding: 0 12px 10px; color: #74827b; background: white; font-size: 7px; line-height: 1.4; }
.whatsapp-chat-placeholder { flex: 1; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.whatsapp-chat-placeholder > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: white; background: #15945a; font-size: 11px; font-weight: 950; }
.whatsapp-chat-placeholder > span svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.whatsapp-chat-placeholder strong { margin-top: 12px; color: var(--ink); font-size: 12px; }
.whatsapp-chat-placeholder small { max-width: 280px; margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.howto-video-card { display: flex; flex-direction: column; gap: 13px; }
.howto-video-list { display: flex; flex-direction: column; gap: 11px; }
.howto-video-frame { width: 100%; min-height: 160px; padding: 18px; border: 0; border-radius: 22px; color: white; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.22), transparent 28%), linear-gradient(135deg, #1f5b4d, #75a342); display: flex; align-items: flex-end; gap: 13px; text-align: left; box-shadow: 0 16px 34px rgba(31,91,77,.18); cursor: pointer; }
.howto-video-frame.stock-video { background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.28), transparent 30%), linear-gradient(135deg, #8c651d, #d59b1b); box-shadow: 0 16px 34px rgba(140,101,29,.18); }
.howto-video-frame.mortality-video { background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.26), transparent 30%), linear-gradient(135deg, #7d392d, #c85f46); box-shadow: 0 16px 34px rgba(125,57,45,.18); }
.howto-video-frame:active { transform: scale(.99); }
.howto-play { width: 54px; height: 54px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--green); font-size: 22px; font-weight: 900; }
.stock-video .howto-play { color: #9b7022; }
.mortality-video .howto-play { color: #c85f46; }
.howto-video-frame div { display: flex; flex-direction: column; min-width: 0; }
.howto-video-frame strong { font-size: 18px; line-height: 1.12; }
.howto-video-frame small { margin-top: 5px; color: rgba(255,255,255,.78); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.howto-player { padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 12px 26px rgba(38,54,44,.08); }
.howto-player h3 { margin: 0 0 10px; color: var(--ink); font-size: 17px; }
.howto-screen { min-height: 215px; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, #eef7f1, #f8f4e8); display: grid; grid-template-columns: 128px 1fr; gap: 13px; align-items: center; }
.howto-step-image { width: 128px; height: 228px; object-fit: cover; border-radius: 18px; background: #f7f5ef; box-shadow: 0 13px 24px rgba(20,61,52,.16); border: 4px solid #143d34; }
.howto-caption { display: flex; flex-direction: column; min-width: 0; }
.howto-caption small { color: var(--green); font-size: 8px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.howto-caption strong { margin-top: 5px; font-size: 17px; line-height: 1.1; color: var(--ink); }
.howto-caption span { margin-top: 7px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.howto-progress { height: 7px; margin-top: 11px; border-radius: 999px; background: #e7ece6; overflow: hidden; }
.howto-progress i { display: block; height: 100%; width: 20%; border-radius: inherit; background: linear-gradient(90deg, var(--green), #75a342); transition: width .35s ease; }
.howto-controls { display: flex; justify-content: flex-end; gap: 8px; margin-top: 11px; }
.howto-controls button { border: 0; border-radius: 10px; padding: 9px 12px; color: var(--green); background: #e0f1e8; font-size: 9px; font-weight: 850; }
.howto-controls .primary-mini { color: white; background: var(--green); }
.howto-steps { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; list-style: none; counter-reset: howto; }
.howto-steps li { counter-increment: howto; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--white); }
.howto-steps li::before { content: counter(howto); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #e0f1e8; color: var(--green); font-weight: 900; font-size: 12px; }
.howto-steps strong { display: block; font-size: 12px; }
.howto-steps span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.subscription-status-card { padding: 16px; border-radius: 20px; color: white; background: linear-gradient(135deg, #1f5b4d, #63a1c3); display: flex; align-items: center; gap: 13px; box-shadow: 0 15px 30px rgba(31,91,77,.16); }
.subscription-badge { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 18px; display: grid; place-items: center; color: var(--green); background: white; font-size: 11px; font-weight: 950; letter-spacing: .7px; }
.subscription-status-card div { display: flex; flex-direction: column; min-width: 0; }
.subscription-status-card strong { font-size: 18px; line-height: 1.1; }
.subscription-status-card small { margin-top: 6px; color: rgba(255,255,255,.78); font-size: 9px; line-height: 1.35; }
.subscription-plans { display: flex; flex-direction: column; gap: 10px; margin-top: 13px; }
.subscription-plan { padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.subscription-plan.active { border-color: rgba(45,114,95,.35); background: #f2faf5; }
.subscription-plan.pro-plan { border-color: #b8cec3; background: linear-gradient(145deg, #fff, #f4f8f5); box-shadow: 0 10px 24px rgba(31,91,77,.08); }
.subscription-plan span { color: var(--green); font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; }
.subscription-plan h3 { margin: 7px 0 0; color: var(--ink); font-size: 17px; }
.subscription-plan strong { display: block; margin-top: 5px; color: var(--green); font-size: 13px; }
.subscription-plan p { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.subscription-price { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; }
.subscription-price strong { margin: 0; font-size: 22px; letter-spacing: -.4px; }
.subscription-price small { color: var(--muted); font-size: 9px; font-weight: 750; }
.subscription-actions { display: flex; gap: 9px; margin-top: 13px; }
.subscription-actions button { flex: 1; border: 0; border-radius: 13px; padding: 12px 10px; color: var(--green); background: #e0f1e8; font-size: 10px; font-weight: 850; }
.subscription-actions .primary-mini { color: white; background: var(--green); }
.access-intro { background: linear-gradient(135deg, #1f5b4d, #2d725f); margin-bottom: 13px; }
.access-form { display: flex; flex-direction: column; gap: 11px; }
.access-form label { display: flex; flex-direction: column; gap: 6px; color: var(--green); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .7px; }
.access-form input:not([type="checkbox"]), .access-form select {
  width: 100%; border: 1px solid #d8ded9; background: var(--white); color: var(--ink);
  border-radius: 13px; padding: 12px 13px; outline: none; font-size: 12px; text-transform: none; letter-spacing: 0;
}
.permission-section { padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.permission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.permission-grid .permission-option { flex-direction: row; align-items: center; gap: 7px; padding: 9px; border-radius: 12px; background: #f6faf7; color: var(--ink); font-size: 9px; text-transform: none; letter-spacing: 0; }
.permission-option input { accent-color: var(--green); }
.access-form .primary-button { border: 0; border-radius: 15px; padding: 13px; color: white; background: var(--green); font-size: 12px; font-weight: 900; }
.access-list-heading { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 9px; }
.access-list-heading h3 { margin: 2px 0 0; font-size: 15px; }
.access-list { display: flex; flex-direction: column; gap: 9px; }
.access-card { padding: 12px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); }
.access-card-head { display: flex; align-items: center; gap: 10px; }
.access-card-head > span { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: var(--mint); font-size: 11px; font-weight: 950; }
.access-card-head div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.access-card-head strong { font-size: 12px; }
.access-card-head small, .access-permissions { color: var(--muted); font-size: 9px; line-height: 1.35; }
.access-remove { border: 0; border-radius: 11px; padding: 8px 10px; color: var(--orange); background: var(--orange-light); font-size: 9px; font-weight: 850; }
.access-permissions { margin: 9px 0 0 48px; }
.privacy-policy { display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.privacy-policy p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.privacy-policy h3 { margin: 8px 0 0; color: var(--green); font-size: 13px; }
.privacy-policy a { color: var(--green); font-weight: 850; }
.privacy-link-button { margin-top: 8px; border: 0; border-radius: 13px; padding: 12px; color: white; background: var(--green); font-size: 10px; font-weight: 850; }
.invoice-sheet { max-height: 90vh; }
.documents-create-actions { display: flex; gap: 8px; }
.documents-create-actions button, .documents-panel-heading button { border: 0; border-radius: 12px; padding: 11px 14px; font-size: 10px; font-weight: 900; cursor: pointer; }
.document-action-secondary { color: var(--green); background: var(--mint); }
.document-action-primary { color: white; background: var(--green); box-shadow: 0 7px 16px rgba(31,91,77,.18); }
.documents-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 18px; }
.documents-summary-card { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); box-shadow: 0 5px 16px rgba(31,91,77,.04); display: flex; flex-direction: column; }
.documents-summary-card span { color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .5px; text-transform: uppercase; }
.documents-summary-card strong { margin-top: 6px; color: var(--ink); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.documents-summary-card small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.documents-summary-card.paid strong { color: var(--green-2); }
.documents-summary-card.outstanding strong { color: var(--orange); }
.documents-workspace-grid { display: grid; gap: 14px; }
.documents-panel { padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,253,249,.9); box-shadow: 0 7px 22px rgba(31,91,77,.05); }
.documents-panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.documents-panel-heading h2 { font-size: 17px; }
.documents-panel-heading button { padding: 9px 11px; color: var(--green); background: var(--mint); }
.documents-list { display: flex; flex-direction: column; gap: 8px; }
.documents-empty { padding: 26px 16px; border: 1px dashed #c7d3cd; border-radius: 15px; background: #f7faf8; text-align: center; }
.documents-empty span { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 8px; border-radius: 12px; color: white; background: var(--green); font-weight: 900; }
.documents-empty span svg,
.document-row-icon svg,
.inventory-item-icon svg,
.customer-activity-icon svg,
.notification-type-icon svg,
.inventory-movement-type svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.documents-empty strong { display: block; font-size: 12px; }
.documents-empty small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.document-row { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: white; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; }
.document-row:hover { border-color: #bfd2c8; box-shadow: 0 5px 14px rgba(31,91,77,.06); }
.document-row-icon { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; color: var(--green); background: var(--mint); font-size: 11px; font-weight: 950; }
.document-row-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.document-row-copy strong { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.document-row-copy small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.document-row-total { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
.document-row-total strong { color: var(--green); font-size: 11px; }
.document-row-total small { margin-top: 4px; padding: 3px 6px; border-radius: 7px; color: var(--muted); background: var(--mint-light); font-size: 7px; font-weight: 850; }
.stock-tool-icon { color: #9a6d19; background: var(--gold-light); }
.inventory-create-actions { display: flex; gap: 8px; }
.inventory-create-actions button, .inventory-panel-heading button { border: 0; border-radius: 12px; padding: 11px 14px; font-size: 10px; font-weight: 900; cursor: pointer; }
.inventory-action-secondary { color: var(--green); background: var(--mint); }
.inventory-action-primary { color: white; background: var(--green); box-shadow: 0 7px 16px rgba(31,91,77,.18); }
.inventory-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 18px; }
.inventory-summary-card { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); box-shadow: 0 5px 16px rgba(31,91,77,.04); display: flex; flex-direction: column; }
.inventory-summary-card span { color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .5px; text-transform: uppercase; }
.inventory-summary-card strong { margin-top: 6px; color: var(--ink); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inventory-summary-card small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.inventory-summary-card.value strong { color: var(--green-2); }
.inventory-summary-card.warning strong { color: var(--orange); }
.inventory-workspace-grid { display: grid; gap: 14px; }
.inventory-panel { padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,253,249,.9); box-shadow: 0 7px 22px rgba(31,91,77,.05); }
.inventory-panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.inventory-panel-heading h2 { font-size: 17px; }
.inventory-panel-heading button { padding: 9px 11px; color: var(--green); background: var(--mint); }
.inventory-list, .inventory-movement-list { display: flex; flex-direction: column; gap: 8px; }
.inventory-item-row { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: white; display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer; }
.inventory-item-row:hover { border-color: #bfd2c8; box-shadow: 0 5px 14px rgba(31,91,77,.06); }
.inventory-item-row.low { border-color: #e7b8a3; background: #fffaf7; }
.inventory-item-icon { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center; color: #956a1c; background: var(--gold-light); font-size: 12px; font-weight: 950; }
.inventory-item-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.inventory-item-copy strong { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inventory-item-copy small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.inventory-item-quantity { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
.inventory-item-quantity strong { color: var(--green); font-size: 12px; }
.inventory-item-quantity small { margin-top: 4px; color: var(--muted); font-size: 7px; }
.inventory-item-row.low .inventory-item-quantity strong { color: var(--orange); }
.inventory-movement { padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: white; display: flex; align-items: center; gap: 10px; }
.inventory-movement-type { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; color: var(--green); background: var(--mint); font-size: 9px; font-weight: 950; }
.inventory-movement.adjustment .inventory-movement-type { color: #946b21; background: var(--gold-light); }
.inventory-movement-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.inventory-movement-copy strong { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inventory-movement-copy small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.inventory-movement-value { flex: 0 0 auto; color: var(--green); font-size: 10px; }
.customer-tool-icon { color: #3d6e86; background: var(--blue-light); }
.customers-create-actions { display: flex; gap: 8px; }
.customers-create-actions button, .customers-panel-heading button { border: 0; border-radius: 12px; padding: 11px 14px; font-size: 10px; font-weight: 900; cursor: pointer; }
.customer-action-secondary { color: var(--green); background: var(--mint); }
.customer-action-primary { color: white; background: var(--green); box-shadow: 0 7px 16px rgba(31,91,77,.18); }
.customers-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 18px; }
.customers-summary-card { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); box-shadow: 0 5px 16px rgba(31,91,77,.04); display: flex; flex-direction: column; }
.customers-summary-card span { color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .5px; text-transform: uppercase; }
.customers-summary-card strong { margin-top: 6px; color: var(--ink); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.customers-summary-card small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.customers-summary-card.value strong { color: var(--green-2); }
.customers-summary-card.warning strong { color: var(--orange); }
.customers-workspace-grid { display: grid; gap: 14px; }
.customers-panel { padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,253,249,.9); box-shadow: 0 7px 22px rgba(31,91,77,.05); }
.customers-panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.customers-panel-heading h2 { font-size: 17px; }
.customers-panel-heading button { padding: 9px 11px; color: var(--green); background: var(--mint); }
.customers-list, .customer-activity-list { display: flex; flex-direction: column; gap: 8px; }
.customer-card { padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.customer-card-top { display: flex; align-items: center; gap: 11px; }
.customer-avatar { width: 43px; height: 43px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center; color: var(--green); background: var(--mint); font-size: 11px; font-weight: 950; }
.customer-card-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.customer-card-copy strong { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.customer-card-copy small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.customer-balance { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
.customer-balance strong { color: var(--green); font-size: 11px; }
.customer-balance small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.customer-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.customer-card-stats span { display: flex; flex-direction: column; color: var(--muted); font-size: 7px; text-transform: uppercase; letter-spacing: .3px; }
.customer-card-stats b { margin-top: 3px; color: var(--ink); font-size: 10px; text-transform: none; letter-spacing: 0; }
.customer-activity-row { padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: white; display: flex; align-items: center; gap: 10px; }
.customer-activity-icon { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; color: var(--green); background: var(--mint); font-size: 9px; font-weight: 950; }
.customer-activity-row.quote .customer-activity-icon { color: #3d6e86; background: var(--blue-light); }
.customer-activity-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.customer-activity-copy strong { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.customer-activity-copy small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.customer-activity-total { flex: 0 0 auto; color: var(--green); font-size: 10px; }
.invoice-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.invoice-summary > div { min-width: 0; padding: 11px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); display: flex; flex-direction: column; }
.invoice-summary span { color: var(--muted); font-size: 7px; text-transform: uppercase; }
.invoice-summary strong { margin-top: 4px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invoice-summary .invoice-paid { color: var(--green-2); }
.invoice-summary .invoice-outstanding { color: var(--orange); }
.invoice-list-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 23px 0 11px; }
.invoice-list-heading h3 { margin: 0; font-size: 17px; }
.invoice-list-heading button { border: 0; border-radius: 10px; padding: 8px 11px; color: white; background: var(--green); font-size: 9px; font-weight: 850; cursor: pointer; }
.invoice-list { display: flex; flex-direction: column; gap: 8px; }
.invoice-card { width: 100%; border: 1px solid var(--line); border-radius: 15px; padding: 11px; color: var(--ink); background: var(--white); display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; }
.invoice-animal { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; font-size: 21px; }
.invoice-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.invoice-copy strong { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invoice-copy small, .invoice-copy i { margin-top: 3px; color: var(--muted); font-size: 7px; font-style: normal; }
.invoice-total { display: flex; flex-direction: column; align-items: flex-end; }
.invoice-total strong { font-size: 11px; white-space: nowrap; }
.invoice-total small { margin-top: 4px; padding: 3px 6px; border-radius: 7px; font-size: 7px; font-weight: 850; }
.invoice-total .paid { color: var(--green-2); background: var(--mint); }
.invoice-total .draft { color: #756180; background: var(--purple-light); }
.invoice-total .sent { color: #9b7022; background: var(--gold-light); }
.invoice-calculation { display: flex; align-items: center; justify-content: space-between; padding: 13px; border-radius: 13px; color: white; background: var(--green); }
.invoice-calculation span { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }
.invoice-calculation strong { font-size: 20px; }
.document-preview-sheet { max-height: 96vh; padding-left: 14px; padding-right: 14px; background: #f5f7f6; }
.document-preview-header { padding: 0 8px; }
.document-preview-toolbar { margin: 0 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.document-preview-toolbar > span { color: var(--muted); font-size: 9px; }
.document-preview-toolbar > span strong { margin-right: 4px; color: var(--green); font-size: 11px; }
.document-preview-toolbar button { border: 0; border-radius: 9px; padding: 10px 12px; color: white; background: var(--green); font-size: 9px; font-weight: 850; cursor: pointer; }
.document-preview-canvas { min-height: 300px; padding: 12px; overflow: auto; border: 1px solid #dce2df; border-radius: 12px; background: #e7ebe9; }
.sales-document-page {
  --document-accent: #1f5b4d;
  width: min(100%, 210mm);
  min-height: min(141.43vw, 297mm);
  aspect-ratio: 210 / 297;
  margin: 0 auto;
  padding: clamp(18px, 4.8%, 15mm);
  color: #17211d;
  background: white;
  border: 1px solid #d9dfdc;
  box-shadow: 0 10px 28px rgba(25, 50, 42, .12);
  display: flex;
  flex-direction: column;
  font-size: clamp(7px, 1.35vw, 11px);
}
.sales-document-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8%; padding-bottom: 4%; border-bottom: 2px solid var(--document-accent); }
.sales-document-company { min-width: 0; display: flex; align-items: flex-start; gap: 4%; }
.sales-document-company img { width: clamp(42px, 13%, 88px); max-height: 72px; flex: 0 0 auto; object-fit: contain; }
.sales-document-company > div { min-width: 0; }
.sales-document-company strong { display: block; color: var(--document-accent); font-size: 1.55em; line-height: 1.15; }
.sales-document-company p { margin: .7em 0 0; color: #52605a; line-height: 1.45; }
.sales-document-company small { display: block; margin-top: .65em; color: #68756f; line-height: 1.45; }
.sales-document-identity { flex: 0 0 32%; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.sales-document-identity > span { color: var(--document-accent); font-size: .9em; font-weight: 800; letter-spacing: .16em; }
.sales-document-identity > strong { margin-top: .55em; font-size: 1.7em; line-height: 1.05; }
.sales-document-identity > small { margin-top: 1em; color: #68756f; line-height: 1.45; }
.sales-document-parties { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 8%; padding: 5% 0; }
.sales-document-parties > div > span,
.sales-document-notes span,
.sales-document-bank > span { color: #607069; font-size: .78em; font-weight: 800; letter-spacing: .12em; }
.sales-document-parties > div > strong { display: block; margin-top: .65em; font-size: 1.3em; }
.sales-document-parties p { margin: .6em 0 0; color: #4f5d57; line-height: 1.45; }
.sales-document-parties small { display: block; margin-top: .6em; color: #68756f; line-height: 1.45; }
.sales-document-parties dl { margin: 0; display: flex; flex-direction: column; gap: .65em; }
.sales-document-parties dl div { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1em; padding-bottom: .5em; border-bottom: 1px solid #e1e6e3; }
.sales-document-parties dt { color: #68756f; }
.sales-document-parties dd { margin: 0; text-align: right; font-weight: 650; }
.sales-document-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sales-document-table th { padding: 1em .8em; color: white; background: var(--document-accent); font-size: .78em; font-weight: 750; letter-spacing: .06em; text-align: right; }
.sales-document-table th:first-child { width: 48%; text-align: left; }
.sales-document-table td { padding: 1.35em .8em; border-bottom: 1px solid #dfe5e2; text-align: right; vertical-align: top; }
.sales-document-table td:first-child { text-align: left; }
.sales-document-table td strong { display: block; }
.sales-document-table td small { display: block; margin-top: .4em; color: #718079; }
.sales-document-total { margin-left: auto; width: 44%; padding: 1.1em 0 0; display: flex; flex-direction: column; }
.sales-document-total > div { padding: .5em 1em; display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.sales-document-total span { color: #58665f; font-weight: 650; }
.sales-document-total strong { color: #263b33; font-size: 1em; }
.sales-document-total .sales-document-grand-total { margin-top: .35em; padding-top: .85em; padding-bottom: .85em; border-top: 2px solid var(--document-accent); border-bottom: 2px solid var(--document-accent); }
.sales-document-total .sales-document-grand-total strong { color: var(--document-accent); font-size: 1.45em; }
.sales-document-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 5%; margin-top: 6%; }
.sales-document-notes > div { min-width: 0; padding: 1.3em; border: 1px solid #dfe5e2; background: #f8faf9; }
.sales-document-notes p { margin: .65em 0 0; color: #4f5d57; line-height: 1.5; }
.sales-document-bank { margin-top: 4%; padding-top: 3%; border-top: 1px solid #dfe5e2; }
.sales-document-bank > div { margin-top: 1.1em; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.1em 2em; color: #4f5d57; }
.sales-document-bank > div > span { display: flex; flex-direction: column; gap: .35em; overflow-wrap: anywhere; }
.sales-document-bank b { color: #718079; font-size: .76em; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.sales-document-bank.is-empty > div { display: block; color: #718079; }
.sales-document-footer { margin-top: auto; padding-top: 4%; display: flex; justify-content: space-between; gap: 2em; border-top: 1px solid #dfe5e2; color: #68756f; }
.sales-document-footer b { color: var(--document-accent); white-space: nowrap; }
.sales-document-page.logo-right .sales-document-company img { order: 2; }
.sales-document-page.logo-hidden .sales-document-company { gap: 0; }
.sales-document-page[data-template="minimal"] .sales-document-header { border-bottom-width: 1px; }
.sales-document-page[data-template="minimal"] .sales-document-table th { color: #17211d; background: #edf1ef; border-top: 2px solid var(--document-accent); }
.sales-document-page[data-template="minimal"] .sales-document-notes > div { background: white; }
.sales-document-page[data-template="classic"] { font-family: Georgia, "Times New Roman", serif; }
.sales-document-page[data-template="classic"] .sales-document-header { border-bottom: 4px double var(--document-accent); }
.sales-document-page[data-template="classic"] .sales-document-identity > span,
.sales-document-page[data-template="classic"] .sales-document-parties > div > span,
.sales-document-page[data-template="classic"] .sales-document-notes span,
.sales-document-page[data-template="classic"] .sales-document-bank > span { letter-spacing: .08em; }
.stock-purchase-sheet { max-height: 90vh; }
.stock-report-sheet { max-height: 91vh; }
.stock-report-intro { margin: -2px 0 11px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.stock-report-filters { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 8px; padding: 11px; border: 1px solid rgba(31,91,77,.09); border-radius: 16px; background: linear-gradient(145deg, #fff, #f5faf7); }
.stock-report-filters label { display: flex; flex-direction: column; gap: 5px; color: var(--green); font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; }
.stock-report-filters input { min-width: 0; width: 100%; border: 1px solid #d4ded8; border-radius: 11px; padding: 9px 7px; color: var(--ink); background: white; font-size: 9px; outline: none; }
.stock-report-filters input:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(54,125,103,.1); }
.stock-report-filters button { height: 34px; border: 0; border-radius: 10px; padding: 0 10px; color: var(--green); background: var(--mint); font-size: 8px; font-weight: 900; }
.stock-report-range-label { margin: 7px 2px 10px; color: var(--muted); font-size: 8px; }
.stock-report-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.stock-report-summary > div { min-width: 0; padding: 12px 9px; border: 1px solid rgba(31,91,77,.09); border-radius: 15px; background: linear-gradient(145deg, #fff, #f5faf7); box-shadow: 0 5px 16px rgba(25,68,56,.06); display: flex; flex-direction: column; }
.stock-report-summary .stock-report-current { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; color: white; background: linear-gradient(135deg, #1f5b4d, #2f7965); }
.stock-report-summary span { color: var(--muted); font-size: 7px; text-transform: uppercase; letter-spacing: .35px; }
.stock-report-summary strong { margin-top: 4px; color: var(--ink); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock-report-summary .stock-report-current span { color: rgba(255,255,255,.78); }
.stock-report-summary .stock-report-current strong { margin: 0; color: white; font-size: 16px; }
.stock-report-heading { margin: 21px 0 10px; }
.stock-report-heading h3 { margin: 0; font-size: 17px; }
.stock-report-list { display: flex; flex-direction: column; gap: 9px; padding-bottom: 8px; }
.stock-report-card { padding: 12px; border: 1px solid rgba(31,91,77,.1); border-radius: 18px; background: linear-gradient(145deg, #fff, #f8fbf9); box-shadow: 0 7px 20px rgba(25,68,56,.06); }
.stock-report-card.adjustment { border-left: 4px solid #4d88a5; }
.stock-report-card.purchase { border-left: 4px solid var(--green-2); }
.stock-report-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.stock-report-type { padding: 4px 8px; border-radius: 8px; color: var(--green); background: var(--mint); font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: .45px; }
.stock-report-card.adjustment .stock-report-type { color: #315f78; background: #e7f1f6; }
.stock-report-card time { color: var(--muted); font-size: 8px; }
.stock-report-card-main { display: flex; align-items: center; gap: 10px; }
.stock-report-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.stock-report-copy strong { color: var(--ink); font-size: 11px; }
.stock-report-copy small, .stock-report-copy i { margin-top: 3px; color: var(--muted); font-size: 7px; font-style: normal; line-height: 1.35; }
.stock-report-value { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
.stock-report-value small { color: var(--muted); font-size: 6px; text-transform: uppercase; }
.stock-report-value strong { margin-top: 3px; color: var(--green); font-size: 10px; white-space: nowrap; }
.stock-purchase-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.stock-purchase-summary > div { min-width: 0; padding: 13px 9px; border: 1px solid rgba(31,91,77,.09); border-radius: 15px; background: linear-gradient(145deg, #fff, #f5faf7); box-shadow: 0 5px 16px rgba(25,68,56,.06); display: flex; flex-direction: column; }
.stock-purchase-summary span { color: var(--muted); font-size: 7px; text-transform: uppercase; }
.stock-purchase-summary strong { margin-top: 4px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock-item-list-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 20px 0 10px; }
.stock-item-list-heading h3 { margin: 0; font-size: 17px; }
.stock-item-list-heading button, .stock-item-empty button { border: 0; border-radius: 10px; padding: 8px 11px; color: white; background: #537a91; font-size: 9px; font-weight: 850; cursor: pointer; }
.stock-item-list { display: flex; flex-direction: column; gap: 8px; }
.stock-item-card { padding: 12px; border: 1px solid rgba(31,91,77,.1); border-radius: 17px; background: linear-gradient(145deg, #fff, #f7fbf8); box-shadow: 0 6px 18px rgba(25,68,56,.06); display: flex; align-items: center; gap: 10px; }
.stock-item-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.stock-item-copy strong { font-size: 11px; }
.stock-item-copy small, .stock-item-copy i { margin-top: 4px; color: var(--muted); font-size: 8px; font-style: normal; line-height: 1.35; }
.stock-item-card > button { border: 0; border-radius: 9px; padding: 7px 8px; color: var(--green); background: var(--mint); font-size: 8px; font-weight: 850; cursor: pointer; white-space: nowrap; }
.stock-item-empty { padding: 17px; border: 1px dashed #bfd0c7; border-radius: 14px; text-align: center; background: rgba(255,255,255,.55); display: flex; flex-direction: column; align-items: center; }
.stock-item-empty strong { font-size: 11px; }
.stock-item-empty small { margin: 4px 0 10px; color: var(--muted); font-size: 8px; }
.stock-purchase-list-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 23px 0 11px; }
.stock-purchase-list-heading h3 { margin: 0; font-size: 17px; }
.stock-purchase-list-heading button { border: 0; border-radius: 10px; padding: 8px 11px; color: white; background: var(--green); font-size: 9px; font-weight: 850; cursor: pointer; }
.stock-purchase-list { display: flex; flex-direction: column; gap: 9px; }
.stock-purchase-card { padding: 13px; border: 1px solid rgba(31,91,77,.1); border-radius: 18px; background: linear-gradient(145deg, #fff, #f9fbfa); box-shadow: 0 7px 20px rgba(25,68,56,.06); }
.stock-purchase-card-top { display: flex; align-items: flex-start; gap: 10px; }
.stock-category-icon { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; color: #9b7022; background: var(--gold-light); display: grid; place-items: center; font-size: 17px; font-weight: 900; }
.stock-purchase-card-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.stock-purchase-card-copy strong { font-size: 11px; }
.stock-purchase-card-copy small, .stock-purchase-card-copy i { margin-top: 3px; color: var(--muted); font-size: 7px; font-style: normal; line-height: 1.3; }
.stock-purchase-cost { color: var(--ink); font-size: 10px; white-space: nowrap; }
.stock-allocation-progress { height: 5px; margin: 11px 0 9px; overflow: hidden; border-radius: 99px; background: #e8ece9; }
.stock-allocation-progress span { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.stock-purchase-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stock-purchase-card-bottom > span { color: var(--muted); font-size: 8px; font-weight: 750; }
.stock-purchase-card-bottom > span.available { color: var(--green-2); }
.stock-purchase-card-bottom button { border: 0; border-radius: 9px; padding: 7px 9px; color: white; background: var(--green); font-size: 8px; font-weight: 850; cursor: pointer; }
.stock-purchase-card-bottom b { color: var(--green-2); font-size: 8px; }
.supply-action-summary { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 20px; color: white; background: linear-gradient(135deg, #164a3f, #2d7b65); box-shadow: 0 12px 28px rgba(24,77,63,.2); }
.supply-action-summary .supply-stock-icon { background: rgba(255,255,255,.9); }
.supply-action-summary div { min-width: 0; display: flex; flex-direction: column; }
.supply-action-summary strong { font-size: 15px; }
.supply-action-summary small { margin-top: 4px; color: rgba(255,255,255,.78); font-size: 9px; line-height: 1.35; }
.supply-adjust-form { display: flex; flex-direction: column; gap: 11px; margin-top: 13px; }
.supply-adjust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.supply-adjust-form label { display: flex; flex-direction: column; gap: 6px; color: var(--green); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .7px; }
.supply-adjust-form input { width: 100%; border: 1px solid #d4ded8; background: var(--white); color: var(--ink); border-radius: 14px; padding: 13px; outline: none; font-size: 12px; text-transform: none; letter-spacing: 0; box-shadow: 0 3px 10px rgba(25,68,56,.035); }
.supply-adjust-form input:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(54,125,103,.12); }
.stock-value-preview { display: flex; align-items: center; justify-content: space-between; padding: 14px 15px; border: 1px solid rgba(31,91,77,.1); border-radius: 16px; background: linear-gradient(135deg, #eaf6ef, #f7fbf8); }
.stock-value-preview span { color: var(--green); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; }
.stock-value-preview strong { color: var(--green); font-size: 18px; }
.supply-adjust-form .primary-button { border: 0; border-radius: 16px; padding: 14px; color: white; background: linear-gradient(135deg, #1f5b4d, #2f7965); box-shadow: 0 8px 18px rgba(31,91,77,.2); font-size: 12px; font-weight: 900; }
.danger-wide-button { width: 100%; margin-top: 11px; border: 0; border-radius: 15px; padding: 13px; color: var(--orange); background: var(--orange-light); font-size: 11px; font-weight: 900; }
.profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--mint-light);
}
.profile-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mint);
  color: var(--green);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--gold);
  font-size: 14px;
  font-weight: 900;
}
.profile-card strong { display: block; color: var(--ink); font-size: 15px; }
.profile-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.account-settings-form { display: grid; gap: 11px; margin-top: 15px; }
.account-settings-heading { display: flex; flex-direction: column; padding: 3px 1px 0; }
.account-settings-heading strong { color: var(--ink); font-size: 13px; }
.account-settings-heading small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.account-settings-form label { display: grid; gap: 6px; color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .65px; text-transform: uppercase; }
.account-settings-form input { width: 100%; border: 1px solid #d4ded8; border-radius: 14px; padding: 13px; color: var(--ink); background: var(--white); outline: 0; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.account-settings-form input:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(54,125,103,.12); }
.account-settings-form input[readonly] { color: var(--muted); background: #eef1ee; cursor: not-allowed; }
.account-save-button { min-height: 45px; border: 0; border-radius: 14px; color: white; background: var(--green); font-size: 11px; font-weight: 900; cursor: pointer; box-shadow: 0 7px 16px rgba(31,91,77,.17); }
.logout-button {
  width: 100%;
  margin-top: 14px;
  border: 0;
  border-radius: 16px;
  padding: 14px;
  background: #c3432d;
  color: white;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 9px 20px rgba(195, 67, 45, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.logout-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stock-allocation-intro { padding: 13px; border-radius: 14px; color: white; background-color: #1f5b4d; background-image: linear-gradient(135deg, #1f5b4d, #347866); display: flex; flex-direction: column; }
.stock-allocation-intro span { color: rgba(255,255,255,.82); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }
.stock-allocation-intro strong { margin: 3px 0 5px; font-size: 19px; }
.stock-allocation-intro small { color: rgba(255,255,255,.86); font-size: 8px; line-height: 1.4; }
.submit-button { border: 0; background: var(--green); color: white; border-radius: 13px; padding: 14px; font-weight: 800; cursor: pointer; margin-top: 3px; }
.submit-button:disabled { opacity: .45; cursor: not-allowed; }
.secondary-form-action { border: 1px solid #bfd2c8; border-radius: 12px; padding: 12px; color: var(--green); background: var(--mint-light); font-weight: 850; cursor: pointer; }

.toast {
  position: fixed; z-index: 100; left: 50%; bottom: 92px; transform: translate(-50%, 20px);
  background: #173e35; color: white; border-radius: 99px; padding: 10px 17px; font-size: 11px; font-weight: 650;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .25s; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.confirmation-overlay { position: fixed; z-index: 90; inset: 0; padding: 24px; background: rgba(12,30,25,.58); backdrop-filter: blur(4px); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.confirmation-overlay.open { opacity: 1; pointer-events: auto; }
.confirmation-dialog { width: min(100%, 360px); padding: 24px 20px 19px; border-radius: 24px; background: var(--cream); box-shadow: 0 24px 70px rgba(8,31,24,.3); text-align: center; transform: translateY(12px) scale(.97); transition: transform .22s ease; }
.confirmation-overlay.open .confirmation-dialog { transform: translateY(0) scale(1); }
.confirmation-warning { width: 52px; height: 52px; margin: 0 auto 13px; border-radius: 50%; color: white; background: #bd5943; display: grid; place-items: center; box-shadow: 0 8px 18px rgba(189,89,67,.25); font-size: 25px; font-weight: 950; }
.confirmation-dialog h2 { margin: 4px 0 8px; color: var(--ink); font-size: 21px; }
.confirmation-dialog > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.confirmation-dialog > p strong { color: var(--ink); }
.confirmation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; }
.confirmation-actions button { min-height: 46px; border: 0; border-radius: 14px; padding: 11px; font-size: 10px; font-weight: 900; cursor: pointer; }
.confirmation-cancel { color: var(--green); background: var(--mint); }
.confirmation-delete { color: white; background: #bd5943; box-shadow: 0 7px 15px rgba(189,89,67,.2); }

.empty-state { text-align: center; padding: 35px 15px; color: var(--muted); }
.empty-state .empty-state-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  border-radius: 12px;
  color: var(--green);
  background: var(--mint);
  display: grid;
  place-items: center;
}
.empty-state strong { display: block; color: var(--ink); font-size: 14px; margin-bottom: 4px; }
.empty-state p { font-size: 11px; }

@media (min-width: 760px) {
  body { padding: 22px 0; }
  .app-shell { min-height: calc(100vh - 44px); border-radius: 28px; }
  .bottom-nav { bottom: 22px; border-radius: 0 0 28px 28px; }
  .whatsapp-support-button { bottom: calc(108px + env(safe-area-inset-bottom)); }
  .topbar { border-radius: 28px 28px 0 0; }
}

@media (max-width: 430px) {
  .batch-form-section .field-row { grid-template-columns: 1fr; }
  .batch-review-metrics { grid-template-columns: 1fr 1fr; }
  .batch-review-metrics > div { border-bottom: 1px solid #e7ece9; }
  .batch-review-metrics > div:nth-child(2) { border-right: 0; }
  .batch-review-metrics > div:last-child { grid-column: 1 / -1; border-bottom: 0; }
}

@media (min-width: 980px) {
  body {
    padding: 24px;
    background:
      radial-gradient(circle at 12% 10%, rgba(98, 157, 126, .18), transparent 27%),
      radial-gradient(circle at 92% 88%, rgba(220, 169, 60, .12), transparent 30%),
      #e8ece8;
  }
  .app-shell {
    width: min(100%, 1440px);
    max-width: 1440px;
    min-height: calc(100vh - 48px);
    padding: 0 0 30px 226px;
    border: 1px solid rgba(31, 91, 77, .08);
    border-radius: 30px;
    overflow: clip;
    box-shadow: 0 24px 70px rgba(20, 58, 48, .13);
  }
  .topbar {
    height: 106px;
    padding: 0 38px;
    border-radius: 0 30px 0 0;
    border-bottom: 1px solid rgba(31, 91, 77, .07);
  }
  .brand-mark { display: none; }
  .desktop-page-heading { display: flex; flex-direction: column; gap: 4px; }
  .desktop-page-heading small { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase; }
  .desktop-page-heading strong { color: var(--ink); font-size: 24px; line-height: 1; letter-spacing: -.6px; }
  #app-main { max-width: 1160px; margin: 0 auto; }
  .view { padding: 0 38px 42px; }
  .view[data-view="home"].active {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
    gap: 20px 22px;
    align-items: start;
    padding-top: 24px;
  }
  .view[data-view="home"] .hero { grid-column: 1 / -1; padding: 0 0 4px; }
  .view[data-view="home"] .weather-card { grid-column: 1; grid-row: 2; align-self: stretch; }
  .view[data-view="home"] .production-section { grid-column: 2; grid-row: 2; align-self: stretch; }
  .view[data-view="home"] .dashboard-livestock { grid-column: 1; grid-row: 3; }
  .view[data-view="home"] .dashboard-tasks { grid-column: 2; grid-row: 3; }
  .view[data-view="home"] .feed-section { grid-column: 1 / -1; grid-row: 4; }
  .view[data-view="home"] .section-block {
    padding: 22px;
    border: 1px solid rgba(31, 91, 77, .09);
    border-radius: 22px;
    background: rgba(255, 253, 249, .88);
    box-shadow: 0 9px 28px rgba(24, 63, 52, .055);
  }
  .view[data-view="home"] .stock-purchase-section { display: none; }
  .view[data-view="home"] .section-heading { margin-bottom: 18px; }
  .view[data-view="home"] .weather-card {
    min-height: 176px;
    padding: 22px 26px;
    border: 0;
    color: white;
    background: linear-gradient(120deg, #1d5749 0%, #2d725f 64%, #447e64 100%);
    box-shadow: 0 16px 34px rgba(31, 91, 77, .2);
  }
  .view[data-view="home"] .weather-icon { width: 62px; height: 62px; border-radius: 19px; background: rgba(255, 255, 255, .13); }
  .view[data-view="home"] .weather-main strong { color: white; font-size: 34px; }
  .view[data-view="home"] .weather-main span,
  .view[data-view="home"] .weather-main small,
  .view[data-view="home"] .weather-meta { color: rgba(255, 255, 255, .8); }
  .view[data-view="home"] .weather-meta b { color: white; }
  .livestock-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .view[data-view="home"] .livestock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .view[data-view="livestock"] .page-title-row { padding-top: 24px; padding-bottom: 16px; }
  .livestock-add-button { width: auto; min-width: 116px; height: 40px; padding: 0 14px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 20px; }
  .livestock-add-button b { display: inline; }
  .livestock-summary { gap: 12px; }
  .livestock-summary div,
  .livestock-summary div:last-child { min-height: 78px; padding: 14px 16px; justify-content: center; }
  .livestock-summary span { font-size: 10px; }
  .livestock-summary strong { font-size: 22px; }
  .animal-directory-toolbar { margin-top: 20px; margin-bottom: 13px; padding-bottom: 12px; border-bottom: 1px solid #e0e6e3; flex-direction: row; align-items: flex-end; }
  .animal-directory-heading span { font-size: 14px; }
  .animal-directory-heading small { font-size: 10px; }
  .batch-directory-controls { flex: 0 0 auto; }
  .batch-status-filter { min-width: 112px; }
  .batch-status-filter select { min-height: 38px; font-size: 10px; }
  .batch-directory-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .batch-directory-card.batch-card { min-height: 138px; padding: 15px; }
  .batch-directory-header { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; }
  .batch-directory-header > .animal-emoji { grid-row: auto; width: 44px; height: 44px; }
  .batch-directory-copy > strong { font-size: 14px; }
  .batch-directory-copy > small { font-size: 9px; }
  .batch-directory-side { grid-column: auto; justify-content: flex-end; }
  .batch-directory-age { min-height: 34px; padding: 7px 9px; border-radius: 9px; }
  .batch-directory-age strong { font-size: 15px; }
  .batch-directory-age small { font-size: 7px; }
  .batch-temperature-tab { min-height: 34px; padding: 7px 9px; }
  .batch-temperature-tab svg { width: 14px; height: 14px; }
  .batch-temperature-tab strong { font-size: 15px; }
  .batch-temperature-tab small { font-size: 7px; }
  .batch-directory-result { display: block; min-width: 78px; text-align: right; }
  .batch-directory-result span { display: block; font-size: 8px; }
  .batch-directory-result strong { display: block; margin-top: 4px; font-size: 13px; }
  .batch-directory-arrow { grid-column: auto; grid-row: auto; }
  .batch-directory-stats { margin-top: 13px; padding-top: 12px; }
  .batch-directory-stats span { font-size: 8px; }
  .batch-directory-stats strong { font-size: 12px; }
  .batch-directory-stats small { font-size: 8px; }
  .animal-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
  .animal-row { min-height: 84px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; padding: 13px 14px; gap: 12px; }
  .animal-row .animal-emoji { width: 40px; height: 40px; }
  .animal-row-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .animal-row-copy span { font-size: 10px; }
  .animal-row .count { min-width: 56px; }
  .animal-row .count strong { font-size: 16px; }
  .animal-row .count span { font-size: 8px; }
  .today-metrics { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .view[data-view="home"] .today-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
  .view[data-view="home"] .today-metric { min-height: 83px; padding: 13px; flex-direction: row; align-items: center; gap: 12px; }
  .view[data-view="home"] .today-metric-icon { margin: 0; flex: 0 0 auto; }
  .view[data-view="home"] .farm-tips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .batch-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tools-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .tools-list button { margin: 0; }
  .desktop-only-nav { display: flex !important; }
  .documents-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .documents-summary-card { padding: 19px; border-radius: 19px; }
  .documents-summary-card strong { font-size: 22px; }
  .documents-workspace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .documents-panel { padding: 20px; }
  .inventory-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .inventory-summary-card { padding: 19px; border-radius: 19px; }
  .inventory-summary-card strong { font-size: 22px; }
  .inventory-workspace-grid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 18px; }
  .inventory-panel { padding: 20px; }
  .customers-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .customers-summary-card { padding: 19px; border-radius: 19px; }
  .customers-summary-card strong { font-size: 22px; }
  .customers-workspace-grid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 18px; }
  .customers-panel { padding: 20px; }
  .bottom-nav {
    left: max(24px, calc((100vw - 1440px) / 2));
    top: 24px;
    bottom: 24px;
    transform: none;
    width: 226px;
    height: auto;
    padding: 20px 18px 22px;
    border-top: 0;
    border-right: 1px solid rgba(31, 91, 77, .09);
    border-radius: 30px 0 0 30px;
    background: linear-gradient(180deg, #f3f7f4, #edf3ef);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    backdrop-filter: none;
  }
  .bottom-nav::before {
    content: none;
    display: none;
  }
  .desktop-nav-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 74px;
    margin: 0 4px 24px;
    padding: 10px;
    border-bottom: 1px solid rgba(31, 91, 77, .09);
  }
  .desktop-nav-brand img { width: 54px; height: 54px; border-radius: 16px; object-fit: cover; }
  .desktop-nav-brand span, .desktop-nav-footer span { display: flex; flex-direction: column; min-width: 0; }
  .desktop-nav-brand strong { color: var(--ink); font-size: 16px; letter-spacing: -.3px; }
  .desktop-nav-brand small { margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 750; }
  .bottom-nav button {
    min-height: 52px;
    padding: 7px 12px;
    border-radius: 15px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 11px;
    font-size: 12px;
    text-align: left;
  }
  .bottom-nav button:hover { color: var(--green); background: rgba(255, 255, 255, .72); }
  .bottom-nav button.active { color: white; background: var(--green); box-shadow: 0 9px 20px rgba(31, 91, 77, .18); }
  .bottom-nav svg { width: 37px; height: 37px; flex: 0 0 auto; }
  .bottom-nav button.active svg { background: rgba(255, 255, 255, .14); box-shadow: none; }
  .bottom-nav .central-action {
    width: 100%;
    min-height: 52px;
    margin: 8px 0;
    color: white;
    background: var(--green-2);
    font-weight: 900;
  }
  .bottom-nav .central-action:hover { color: white; background: var(--green); }
  .bottom-nav .central-action span {
    position: static;
    width: 37px;
    height: 37px;
    border: 0;
    border-radius: 11px;
    background: rgba(255, 255, 255, .16);
    font-size: 25px;
    box-shadow: none;
  }
  .bottom-nav .central-action::after { content: "Quick add"; font-size: 12px; }
  .desktop-nav-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: auto 5px 0;
    padding: 13px;
    border: 1px solid rgba(31, 91, 77, .1);
    border-radius: 15px;
    background: rgba(255, 255, 255, .68);
  }
  .desktop-nav-footer i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #48a56f; box-shadow: 0 0 0 4px rgba(72, 165, 111, .13); }
  .desktop-nav-footer strong { color: var(--green); font-size: 10px; }
  .desktop-nav-footer small { margin-top: 2px; color: var(--muted); font-size: 8px; }
  .whatsapp-support-button {
    right: max(38px, calc((100vw - 1440px) / 2 + 38px));
    bottom: 42px;
  }
  .bottom-sheet {
    bottom: 50%;
    width: min(680px, calc(100% - 48px));
    max-height: min(86vh, 820px);
    padding: 15px 28px 28px;
    border-radius: 26px;
    transform: translate(-50%, calc(50% + 110vh));
  }
  .bottom-sheet.open { transform: translate(-50%, 50%); }
  .auth-gate {
    align-items: center;
    padding: 30px;
    background:
      radial-gradient(circle at 18% 12%, rgba(83, 142, 113, .2), transparent 30%),
      linear-gradient(145deg, #eef4f0, #f7f5ef 58%, #edf0e9);
  }
  .auth-card {
    width: min(100%, 500px);
    padding: 30px 34px 34px;
    border: 1px solid rgba(31, 91, 77, .1);
    border-radius: 30px;
    background: rgba(255, 253, 249, .96);
    box-shadow: 0 24px 65px rgba(23, 62, 53, .15);
  }
  .auth-logo { width: 145px; height: 100px; }
}

/* Professional desktop workspace */
@media (min-width: 980px) {
  body {
    padding: 0;
    color: #17211d;
    background: #f1f4f2;
  }

  .app-shell {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    padding: 0 0 32px 232px;
    border: 0;
    border-radius: 0;
    background: #f6f8f7;
    box-shadow: none;
  }

  .topbar {
    height: 82px;
    padding: 0 30px;
    border-radius: 0;
    border-bottom: 1px solid #e2e7e4;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: none;
  }

  .desktop-page-heading { gap: 5px; }
  .desktop-page-heading small {
    color: #718079;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .7px;
  }
  .desktop-page-heading strong {
    color: #17211d;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -.35px;
  }
  #app-main { width: 100%; max-width: none; }
  .view { padding: 0 30px 42px; }
  .view[data-view="home"].active {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding-top: 22px;
  }
  .view[data-view="home"] .hero { padding-bottom: 2px; }
  .hero h1 { font-size: 27px; font-weight: 650; letter-spacing: -.7px; }
  .hero-copy, .subhead { color: #65736d; font-size: 13px; }
  .hero .avatar { display: none; }
  h1 { font-weight: 650; }
  h2 { font-size: 18px; font-weight: 650; letter-spacing: -.25px; }
  .eyebrow {
    margin-bottom: 7px;
    color: #75837d;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .9px;
  }

  .view[data-view="home"] .section-block {
    padding: 20px;
    border: 1px solid #dfe5e2;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
  }
  .view[data-view="home"] .section-heading { margin-bottom: 16px; }
  .section-heading { align-items: center; }

  .view[data-view="home"] .weather-card {
    min-height: 104px;
    padding: 18px 22px;
    border: 1px solid #1f5b4d;
    border-radius: 12px;
    background: #1f5b4d;
    box-shadow: none;
  }
  .view[data-view="home"] .weather-card:hover { border-color: #17473c; box-shadow: none; }
  .view[data-view="home"] .weather-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
  }
  .view[data-view="home"] .weather-icon span { font-size: 27px; filter: none; }
  .view[data-view="home"] .weather-main strong { font-size: 30px; font-weight: 650; }
  .view[data-view="home"] .weather-main span,
  .view[data-view="home"] .weather-main small,
  .view[data-view="home"] .weather-meta { font-size: 11px; }

  .bottom-nav {
    left: 0;
    top: 0;
    bottom: 0;
    width: 232px;
    padding: 20px 16px;
    border-right: 1px solid #dfe5e2;
    border-radius: 0;
    background: #fff;
    gap: 5px;
  }
  .bottom-nav::before {
    margin: 0 10px 10px;
    color: #78867f;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .9px;
  }
  .desktop-nav-brand {
    min-height: 150px;
    margin: 0 2px 18px;
    padding: 0 8px 16px;
    justify-content: center;
    border-bottom-color: #e1e6e3;
  }
  .desktop-nav-brand img { width: 142px; height: 142px; border-radius: 0; object-fit: contain; mix-blend-mode: multiply; }
  .desktop-nav-brand small { color: #6d7a74; font-size: 10px; font-weight: 500; }
  .bottom-nav button {
    min-height: 44px;
    padding: 6px 10px;
    border-radius: 8px;
    gap: 10px;
    color: #65736d;
    font-size: 12px;
    font-weight: 550;
  }
  .bottom-nav svg { width: 33px; height: 33px; }
  .bottom-nav button:hover { color: #1f5b4d; background: #f2f6f4; }
  .bottom-nav button.active {
    color: #174c40;
    background: #e8f1ed;
    box-shadow: inset 3px 0 0 #1f5b4d;
    font-weight: 650;
  }
  .bottom-nav button.active svg { color: #1f5b4d; background: transparent; stroke: currentColor; }
  .bottom-nav .central-action {
    display: none;
  }
  .bottom-nav .central-action span {
    width: 33px;
    height: 33px;
    border-radius: 7px;
    font-size: 21px;
  }
  .bottom-nav .central-action::after { font-size: 12px; }
  .desktop-nav-footer {
    margin: auto 4px 0;
    padding: 14px 8px 4px;
    border: 0;
    border-top: 1px solid #e1e6e3;
    border-radius: 0;
    background: transparent;
  }
  .desktop-nav-footer strong { font-size: 11px; font-weight: 600; }
  .desktop-nav-footer small { font-size: 9px; }

  .account-button {
    height: 44px;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    transition: border-color .15s ease, background .15s ease;
  }
  .account-button:hover { border-color: #aebfB7; background: #f8faf9; box-shadow: none; transform: none; }
  .account-button-avatar { border-radius: 8px; font-weight: 700; }
  .account-button-name { font-size: 12px; font-weight: 650; }
  .icon-button { border-radius: 8px; }

  .livestock-card,
  .production-card,
  .today-metric,
  .task-item,
  .feed-card,
  .supply-stock-card,
  .farm-tip,
  .animal-row,
  .task-progress-card,
  .activity-calendar,
  .activity-row,
  .tools-list button,
  .quote-card,
  .batch-card,
  .batch-record-action-summary,
  .notification-card,
  .subscription-plan,
  .permission-section,
  .access-card,
  .documents-summary-card,
  .documents-panel,
  .document-row,
  .inventory-summary-card,
  .inventory-panel,
  .inventory-item-row,
  .inventory-movement,
  .customers-summary-card,
  .customers-panel,
  .customer-card,
  .customer-activity-row,
  .invoice-card,
  .stock-report-card,
  .stock-item-card,
  .stock-purchase-card {
    border-color: #dfe5e2;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
  }
  .livestock-card:hover,
  .animal-row:hover,
  .supply-stock-card:hover,
  .document-row:hover,
  .inventory-item-row:hover,
  .invoice-card:hover {
    border-color: #aebfb7;
    background: #fbfcfb;
    box-shadow: none;
    transform: none;
  }
  .supply-stock-card,
  .stock-report-card,
  .stock-item-card,
  .stock-purchase-card { background-image: none; }
  .supply-stock-card.low { background: #fff9f6; }

  .mobile-animal-symbol { display: none; }
  .desktop-animal-code {
    display: inline;
    color: #1f5b4d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
  }
  .animal-emoji,
  .quote-animal,
  .invoice-animal {
    border: 1px solid #dce5e1;
    border-radius: 8px;
    color: #1f5b4d;
    background: #eef4f1;
    box-shadow: none;
  }
  .animal-emoji { width: 40px; height: 40px; margin-bottom: 10px; font-size: 0; }
  .quote-animal,
  .invoice-animal { font-size: 0; }
  .invoice-animal::after { content: none; }
  .empty-state .empty-state-icon { display: grid; }
  .empty-state { padding: 30px 16px; }
  .empty-state strong { font-size: 14px; font-weight: 650; }
  .empty-state p { font-size: 12px; }

  .view[data-view="home"] .today-metric {
    min-height: 74px;
    padding: 12px;
  }
  .today-metric-icon,
  .supply-stock-icon,
  .tool-icon,
  .quick-icon,
  .customer-avatar {
    border-radius: 8px;
    box-shadow: none;
  }
  .feed-metric .today-metric-icon,
  .death-metric .today-metric-icon { font-size: 0; }
  .feed-metric .today-metric-icon::after,
  .death-metric .today-metric-icon::after { content: none; }
  .today-metric small { font-size: 10px; font-weight: 600; letter-spacing: .3px; }
  .today-metric strong { font-size: 14px; font-weight: 650; }
  .today-metric i { font-size: 10px; }
  .task-copy strong,
  .supply-stock-title > strong,
  .farm-tip strong { font-size: 13px; font-weight: 650; }
  .task-copy span,
  .supply-stock-copy small,
  .farm-tip p,
  .tools-list small { font-size: 11px; }

  .farm-tip-icon {
    width: 36px;
    height: 36px;
    border: 1px solid #dfe5e2;
    border-radius: 7px;
    color: #21745e;
    background: #edf7f3;
    font-size: 0 !important;
  }
  .farm-tip-icon svg { width: 20px; height: 20px; stroke-width: 1.65; }
  .feed-tip .farm-tip-icon { color: #956713; background: #fff7e6; }
  .livestock-tip .farm-tip-icon { color: #3d6884; background: #eef5fa; }

  .filter-pills { gap: 8px; }
  .filter-pills button,
  .task-tag,
  .trend,
  .low-stock,
  .batch-status {
    border-radius: 6px;
  }
  .filter-pills button { min-height: 36px; padding: 7px 13px; font-size: 12px; font-weight: 550; }
  .filter-pills button.active { font-weight: 650; }
  .summary-strip {
    border-radius: 10px;
    box-shadow: none;
  }

  .activity-filters {
    margin: 14px 0 18px;
    padding: 0;
    gap: 8px;
  }
  .activity-filters button {
    width: auto;
    height: 38px;
    flex: 0 0 auto;
    min-width: 76px;
    padding: 0 13px;
    border: 1px solid #dce3df;
    border-radius: 8px;
    color: #607069;
    background: #fff;
    flex-direction: row;
    gap: 7px;
    box-shadow: none;
  }
  .activity-filters button span { font-size: 13px; }
  .activity-filters button b { font-size: 11px; font-weight: 600; }
  .activity-filters button.active {
    border: 1px solid #1f5b4d;
    color: #fff;
    background: #1f5b4d;
    box-shadow: none;
  }
  .activity-row > div strong { font-size: 13px; }
  .activity-row > div span,
  .activity-row > div small,
  .activity-row > b { font-size: 11px; }
  .activity-quantity-badge {
    width: auto;
    min-width: 56px;
    height: 38px;
    flex: 0 0 auto;
    padding: 0 9px;
    border-radius: 7px;
    box-shadow: none;
  }
  .activity-quantity-badge strong { font-size: 13px; }
  .activity-quantity-badge small { font-size: 7px; }

  .add-circle,
  .primary-icon-button {
    border-radius: 8px;
    box-shadow: none;
  }
  .text-button,
  .supply-purchase-button,
  .batch-add-button { font-size: 12px; font-weight: 650; }
  .supply-purchase-button { border-radius: 8px; box-shadow: none; }

  .documents-summary-card,
  .inventory-summary-card,
  .customers-summary-card { padding: 17px; }
  .documents-summary-card strong,
  .inventory-summary-card strong,
  .customers-summary-card strong { font-size: 21px; font-weight: 650; }
  .documents-panel,
  .inventory-panel,
  .customers-panel { padding: 18px; }
  .whatsapp-connect-card { grid-template-columns: 64px minmax(0, 1fr) minmax(220px, .45fr); padding: 28px; border-radius: 12px; }
  .whatsapp-connect-card > aside { grid-column: auto; padding: 3px 0 3px 22px; border-top: 0; border-left: 1px solid #e1ebe6; align-content: center; }
  .whatsapp-inbox-layout { min-height: 620px; grid-template-columns: 330px minmax(0, 1fr); border-radius: 10px; }
  .whatsapp-conversation-panel { border-right: 1px solid #dfe6e2; border-bottom: 0; }
  .whatsapp-conversation-list { max-height: 553px; }
  .whatsapp-chat-panel { min-height: 620px; }
  .whatsapp-message-list { max-height: none; }
  .whatsapp-refresh-button { border-radius: 8px; font-size: 11px; }

  .insight-card,
  .subscription-status-card,
  .support-intro,
  .settings-intro,
  .access-intro,
  .forecast-summary,
  .stock-allocation-intro,
  .supply-action-summary,
  .stock-report-summary .stock-report-current {
    border-radius: 10px;
    background-image: none;
    box-shadow: none;
  }

  .bottom-sheet {
    width: min(720px, calc(100% - 48px));
    padding: 24px 28px 28px;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(15, 37, 30, .22);
  }
  .sales-form-sheet {
    top: 50%; bottom: auto; width: min(1060px, calc(100% - 48px)); max-height: 90vh;
    padding: 0; border-radius: 14px; opacity: 0; pointer-events: none;
    transform: translate(-50%, calc(-50% + 24px)) scale(.985);
    transition: transform .22s ease, opacity .18s ease;
  }
  .sales-form-sheet.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
  .sales-form-sheet .sheet-header { padding: 16px 20px; }
  .sales-document-form { display: flex !important; flex-direction: column; padding: 0; }
  .sales-document-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; align-items: start; gap: 14px; padding: 16px; }
  .sales-document-body .sales-form-overview,
  .sales-document-body .sales-totals-section { grid-column: 1 / -1; }
  .sales-review-grid { grid-template-columns: minmax(0, 1fr) minmax(290px, .82fr); align-items: start; gap: 18px; }
  .sales-form-actions { padding: 13px 16px; }
  .document-preview-sheet { width: min(940px, calc(100% - 48px)); padding: 22px 24px 28px; }
  .document-preview-canvas { padding: 24px; }
  .document-format-card { border-radius: 10px; }
  .document-format-card strong { font-size: 12px; }
  .document-format-card small { font-size: 10px; }
  .document-format-card button { font-size: 11px; }
  .sheet-handle { display: none; }
  .confirmation-dialog { border-radius: 14px; background: #fff; }

  .whatsapp-support-button {
    right: 30px;
    bottom: 30px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(22, 79, 60, .15);
  }

  .auth-gate { background: #eef2f0; }
  .auth-card {
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(23, 51, 42, .12);
  }
  .auth-tabs,
  .auth-tabs button,
  .auth-form input,
  .auth-submit { border-radius: 9px; }
}

@media (min-width: 980px) and (max-width: 1199px) {
  .view[data-view="livestock"] .animal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.milling-title-row { align-items: flex-end; }
.milling-create-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.milling-create-actions button,
.milling-panel-heading button,
.milling-card-actions button,
.milling-empty button,
.milling-item-quantity button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #cbdad4;
  border-radius: 10px;
  background: #fff;
  color: var(--green);
  font-weight: 750;
  cursor: pointer;
}
.milling-action-primary,
.milling-card-actions .primary {
  border-color: var(--green) !important;
  background: var(--green) !important;
  color: #fff !important;
}
.milling-action-secondary { background: #eef5f1 !important; }
.milling-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 18px;
}
.milling-summary-card {
  min-width: 0;
  padding: 19px 20px;
  border: 1px solid #d5e0db;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(23, 62, 53, .04);
}
.milling-summary-card span,
.milling-summary-card small { display: block; color: var(--muted); }
.milling-summary-card span { margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.milling-summary-card strong { display: block; overflow: hidden; color: #123d32; font-size: clamp(20px, 2vw, 28px); text-overflow: ellipsis; white-space: nowrap; }
.milling-summary-card small { margin-top: 5px; font-size: 12px; }
.milling-summary-card.value { border-color: #9bc4b3; background: #edf6f1; }
.milling-workspace-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 16px; }
.milling-panel {
  min-width: 0;
  padding: 20px;
  border: 1px solid #d5e0db;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(23, 62, 53, .04);
}
.milling-finished-panel,
.milling-runs-panel { grid-column: 1 / -1; }
.milling-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.milling-panel-heading h2 { margin: 3px 0 0; font-size: 20px; }
.milling-panel-heading .eyebrow { margin: 0; }
.milling-panel-heading button { min-height: 36px; padding: 0 12px; font-size: 12px; }
.milling-list,
.milling-run-list { display: grid; gap: 10px; }
.milling-ingredient-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid #dbe4e0;
  border-radius: 12px;
  background: #fbfcfb;
}
.milling-ingredient-card.low { border-color: #efc7ae; background: #fffaf6; }
.milling-item-icon,
.milling-run-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 11px;
  background: #e4f0ea;
  color: var(--green);
}
.milling-item-icon svg,
.milling-run-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.milling-item-copy { min-width: 0; }
.milling-item-copy strong,
.milling-item-copy small,
.milling-item-copy i { display: block; }
.milling-item-copy strong { overflow: hidden; color: #123d32; text-overflow: ellipsis; white-space: nowrap; }
.milling-item-copy small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.milling-item-copy i { margin-top: 5px; color: #497267; font-size: 11px; font-style: normal; font-weight: 700; }
.milling-ingredient-card.low .milling-item-copy i { color: #bb5c35; }
.milling-item-quantity { display: flex; align-items: flex-end; flex-direction: column; gap: 7px; }
.milling-item-quantity > strong { color: #123d32; font-size: 16px; white-space: nowrap; }
.milling-item-quantity button { min-height: 30px; padding: 0 10px; font-size: 11px; }
.milling-formula-card { padding: 15px; border: 1px solid #dbe4e0; border-radius: 12px; background: #fbfcfb; }
.milling-formula-top { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.milling-formula-top > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 9px; background: #e5f0eb; color: var(--green); }
.milling-formula-top svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.milling-formula-top div { min-width: 0; }
.milling-formula-top small,
.milling-formula-top strong { display: block; }
.milling-formula-top small { color: #60736c; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.milling-formula-top strong { overflow: hidden; margin-top: 2px; text-overflow: ellipsis; white-space: nowrap; }
.milling-formula-top > b { color: var(--green); font-size: 14px; white-space: nowrap; }
.milling-formula-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; margin-top: 13px; border: 1px solid #dbe4e0; border-radius: 9px; background: #dbe4e0; }
.milling-formula-meta span { padding: 9px; background: #fff; }
.milling-formula-meta small,
.milling-formula-meta strong { display: block; }
.milling-formula-meta small { color: var(--muted); font-size: 10px; }
.milling-formula-meta strong { margin-top: 2px; font-size: 13px; }
.milling-formula-meta .ready { color: #197448; }
.milling-formula-meta .warning { color: #c15b35; }
.milling-formula-ingredients,
.milling-run-usage { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.milling-formula-ingredients span,
.milling-run-usage span { padding: 5px 8px; border-radius: 6px; background: #eef3f0; color: #557068; font-size: 10px; }
.milling-formula-ingredients b,
.milling-run-usage b { color: #214e42; }
.milling-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #e3e9e6; }
.milling-card-actions button { min-height: 34px; padding: 0 13px; font-size: 11px; }
.milling-run-card { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 13px; padding: 15px; border: 1px solid #dbe4e0; border-radius: 12px; background: #fbfcfb; }
.milling-finished-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.milling-finished-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 13px; border: 1px solid #d8e3de; border-radius: 11px; background: #f5faf7; }
.milling-finished-card > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 10px; background: #dceee5; color: var(--green); }
.milling-finished-card svg,
.milling-finished-empty svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.milling-finished-card div { min-width: 0; }
.milling-finished-card small,
.milling-finished-card strong,
.milling-finished-card p { display: block; }
.milling-finished-card small { color: #688078; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.milling-finished-card strong { overflow: hidden; margin-top: 2px; text-overflow: ellipsis; white-space: nowrap; }
.milling-finished-card p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.milling-finished-card > b { color: var(--green); white-space: nowrap; }
.milling-finished-card > button { grid-column: 2 / -1; justify-self: end; min-height: 30px; padding: 0 10px; border: 1px solid #bdd2c8; border-radius: 8px; background: #fff; color: var(--green); font-size: 10px; font-weight: 800; cursor: pointer; }
.milling-finished-empty { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px dashed #cbd9d3; border-radius: 11px; background: #fafcfb; }
.milling-finished-empty > span { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: #e4f0ea; color: var(--green); }
.milling-finished-empty strong,
.milling-finished-empty small { display: block; }
.milling-finished-empty small { margin-top: 3px; color: var(--muted); }
.milling-run-main { display: flex; justify-content: space-between; gap: 20px; }
.milling-run-main > div:first-child { min-width: 0; }
.milling-run-main small,
.milling-run-main strong,
.milling-run-main p { display: block; }
.milling-run-main small { color: var(--muted); font-size: 11px; }
.milling-run-main strong { margin-top: 3px; font-size: 16px; }
.milling-run-main p { margin: 4px 0 0; color: #536b64; font-size: 12px; }
.milling-run-cost { flex: 0 0 auto; text-align: right; }
.milling-run-cost strong { color: var(--green); font-size: 18px; }
.milling-run-cost span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.milling-run-usage { grid-column: 2; margin-top: 0; }
.milling-empty { display: grid; min-height: 230px; padding: 28px; place-items: center; align-content: center; gap: 9px; border: 1px dashed #c9d7d1; border-radius: 12px; background: #fafcfb; text-align: center; }
.milling-empty.wide { min-height: 185px; }
.milling-empty > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 12px; background: #e4f0ea; color: var(--green); }
.milling-empty svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.milling-empty small { max-width: 440px; color: var(--muted); line-height: 1.5; }
.milling-form-intro { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 13px; margin-bottom: 18px; padding: 15px; border-radius: 12px; background: var(--green); color: #fff; }
.milling-form-intro > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 11px; background: rgba(255,255,255,.14); }
.milling-form-intro svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.milling-form-intro strong,
.milling-form-intro small { display: block; }
.milling-form-intro small { margin-top: 4px; color: rgba(255,255,255,.78); line-height: 1.45; }
.milling-recipe-builder,
.milling-cost-fields { margin: 8px 0 16px; padding: 15px; border: 1px solid #d6e0dc; border-radius: 12px; background: #f9fbfa; }
.milling-recipe-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.milling-recipe-heading span,
.milling-recipe-heading strong { display: block; }
.milling-recipe-heading span { color: #61736d; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.milling-recipe-heading strong { margin-top: 3px; }
.milling-recipe-heading button { min-height: 34px; padding: 0 11px; border: 1px solid #bfd1c9; border-radius: 8px; background: #fff; color: var(--green); font-size: 11px; font-weight: 800; cursor: pointer; }
#milling-formula-ingredients { display: grid; gap: 9px; }
.milling-recipe-row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(120px, .55fr) 36px; align-items: end; gap: 9px; }
.milling-recipe-row .field { margin: 0; }
.milling-row-remove { width: 36px; height: 52px; border: 1px solid #ecd2c7; border-radius: 9px; background: #fff8f5; color: #b95635; font-size: 20px; cursor: pointer; }
.milling-formula-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-bottom: 16px; border: 1px solid #cbd9d3; border-radius: 11px; background: #cbd9d3; }
.milling-formula-preview div { padding: 12px; background: #edf4f0; }
.milling-formula-preview span,
.milling-formula-preview strong { display: block; }
.milling-formula-preview span { color: #60726c; font-size: 10px; }
.milling-formula-preview strong { margin-top: 4px; font-size: 14px; }
.mill-run-preview { overflow: hidden; margin-bottom: 16px; border: 1px solid #cad9d2; border-radius: 12px; }
.mill-run-preview-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: #cad9d2; }
.mill-run-preview-summary span { padding: 13px; background: var(--green); color: #fff; }
.mill-run-preview-summary small,
.mill-run-preview-summary strong { display: block; }
.mill-run-preview-summary small { color: rgba(255,255,255,.72); font-size: 10px; }
.mill-run-preview-summary strong { margin-top: 4px; font-size: 14px; }
.mill-run-stock-check { padding: 13px 15px; }
.mill-run-stock-check strong,
.mill-run-stock-check small { display: block; }
.mill-run-stock-check small { margin-top: 5px; color: #5c7069; font-size: 11px; line-height: 1.55; }
.mill-run-stock-check.ready { background: #edf8f1; color: #187246; }
.mill-run-stock-check.shortage { background: #fff5ee; color: #b65534; }
.milling-tool-icon { background: #e5f0eb; color: var(--green); }

@media (max-width: 1050px) {
  .milling-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .milling-workspace-grid { grid-template-columns: 1fr; }
  .milling-finished-panel,
  .milling-runs-panel { grid-column: auto; }
}

@media (max-width: 640px) {
  .milling-title-row { align-items: stretch; flex-direction: column; }
  .milling-create-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .milling-create-actions .milling-action-primary { grid-column: 1 / -1; }
  .milling-summary { gap: 8px; margin-top: 18px; }
  .milling-summary-card { padding: 14px; }
  .milling-summary-card strong { font-size: 19px; }
  .milling-panel { padding: 14px; }
  .milling-panel-heading { align-items: flex-start; }
  .milling-panel-heading button { max-width: 125px; }
  .milling-ingredient-card { grid-template-columns: 40px minmax(0, 1fr); padding: 12px; }
  .milling-item-icon { width: 40px; height: 40px; }
  .milling-item-quantity { grid-column: 2; align-items: center; justify-content: space-between; flex-direction: row; }
  .milling-formula-meta { grid-template-columns: 1fr 1fr; }
  .milling-formula-meta span:last-child { grid-column: 1 / -1; }
  .milling-run-card { grid-template-columns: 40px minmax(0, 1fr); padding: 12px; }
  .milling-run-icon { width: 40px; height: 40px; }
  .milling-run-main { flex-direction: column; gap: 10px; }
  .milling-run-cost { text-align: left; }
  .milling-recipe-row { grid-template-columns: minmax(0, 1fr) 36px; padding-bottom: 10px; border-bottom: 1px solid #e1e8e5; }
  .milling-recipe-row .field:nth-child(2) { grid-column: 1; }
  .milling-row-remove { grid-column: 2; grid-row: 1 / span 2; height: 100%; }
  .milling-formula-preview,
  .mill-run-preview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.web-platform .play-store-update-link { display: none; }

@media (max-width: 350px) {
  .view { padding-left: 16px; padding-right: 16px; }
  .topbar { padding-left: 16px; padding-right: 16px; }
  .livestock-grid { grid-template-columns: 1fr; }
  .today-metrics { grid-template-columns: 1fr; }
  .today-metric { min-height: auto; flex-direction: row; align-items: center; gap: 10px; }
  .today-metric-icon { margin: 0; }
  .account-button-name { display: none; }
  .account-button { gap: 4px; }
}

@media (max-width: 520px) {
  .whatsapp-title-row { align-items: flex-start; }
  .whatsapp-refresh-button { width: 100%; }
  .whatsapp-connect-card { grid-template-columns: 1fr; padding: 18px; }
  .whatsapp-connect-mark { width: 48px; height: 48px; border-radius: 13px; }
  .whatsapp-connect-actions { align-items: stretch; flex-direction: column; }
  .whatsapp-connect-actions button { width: 100%; }
  .whatsapp-conversation-list { max-height: 235px; }
  .whatsapp-chat-panel { min-height: 430px; }
  .whatsapp-message-list { min-height: 260px; }
  .whatsapp-reply-form { grid-template-columns: 1fr; }
  .whatsapp-reply-form button { width: 100%; }
  .document-format-card { grid-template-columns: 48px minmax(0, 1fr); }
  .document-format-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .document-customization-fields .field-row { grid-template-columns: 1fr; }
  .vat-settings-card .field-row { grid-template-columns: 1fr; }
  .sales-document-form .field-row { grid-template-columns: 1fr; }
  .sales-customer-picker { grid-template-columns: 1fr; }
  .sales-create-customer-button { width: 100%; }
  .sales-form-overview { align-items: stretch; flex-direction: column; gap: 9px; }
  .sales-form-overview dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .sales-form-overview dl div { align-items: flex-start; padding-left: 8px; border-left: 1px solid #d1ddd7; }
  .sales-form-overview dl div:first-child { padding-left: 0; border-left: 0; }
  .sales-form-actions { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); }
  .sales-cancel-button,
  .sales-document-form .submit-button { width: 100%; min-width: 0; padding-left: 10px; padding-right: 10px; }
}

@page {
  size: A4 portrait;
  margin: 0;
}

@media print {
  html, body { width: 210mm; min-height: 297mm; margin: 0 !important; padding: 0 !important; background: white !important; }
  body.sales-document-printing { overflow: visible !important; }
  body.sales-document-printing * { visibility: hidden !important; }
  body.sales-document-printing #document-preview-sheet,
  body.sales-document-printing .document-preview-canvas,
  body.sales-document-printing #sales-document-page,
  body.sales-document-printing #sales-document-page * { visibility: visible !important; }
  body.sales-document-printing #document-preview-sheet {
    position: static !important;
    inset: auto !important;
    width: 210mm !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: white !important;
    box-shadow: none !important;
    transform: none !important;
  }
  body.sales-document-printing .document-preview-header,
  body.sales-document-printing .document-preview-toolbar,
  body.sales-document-printing .sheet-handle,
  body.sales-document-printing .sheet-backdrop { display: none !important; }
  body.sales-document-printing .document-preview-canvas {
    width: 210mm !important;
    min-height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: white !important;
  }
  body.sales-document-printing #sales-document-page {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 210mm !important;
    min-height: 297mm !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 15mm !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 10pt !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}