/* Seved product presentation, October 2026. Shared by every application screen. */
:root {
  color-scheme: dark;
  --forest: #d4fa30;
  --forest-2: #c4ec69;
  --lime: #d4fa30;
  --lime-ink: #101909;
  --lime-soft: #24351d;
  --ink: #f4f3e8;
  --muted: #a8bbae;
  --line: #2a3c32;
  --bg: #0b1913;
  --card: #12221c;
  --clay: #f0ac7c;
  --clay-soft: #39291f;
  --sky: #9bc9e6;
  --sky-soft: #172e34;
  --sun: #e7dd72;
  --sun-soft: #35301c;
  --danger: #ffaaa0;
  --radius: 16px;
  --tabbar-h: 108px;
  --shadow: 0 8px 28px #00000012;
  --serif: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  font-family: var(--serif);
  background: var(--bg);
}
html, body { background: var(--bg); }
body::before { background: radial-gradient(ellipse at 70% 0%, #203a2b66, transparent 60%), #0b1913; transform: none; }
body::after { display: none; }
button, input, select, textarea { color: var(--ink); }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
input::placeholder, textarea::placeholder { color: #a7b4ac; opacity: 1; }
a { color: var(--lime); }
#app { max-width: 560px; background: var(--bg); }
#view { padding: 0 16px calc(var(--tabbar-h) + var(--safe-b) + 20px); }
.topbar { background: linear-gradient(#0b1913 75%, #0b191300); padding: 20px 0 16px; gap: 10px; }
.topbar h1 { color: var(--ink); font-size: 28px; line-height: 1.15; font-weight: 760; letter-spacing: -.045em; text-shadow: none; }
.topbar > div:first-child { flex: 1; }
.icon-btn { width: 40px; height: 40px; flex: none; background: #0b1913b3; color: var(--ink); border: 1px solid #425148; box-shadow: none; }
.home-hello p { font-family: var(--serif); font-size: 14px; color: #d7ded8; margin-top: 5px; text-shadow: none; }
.home-hello h1 { font-size: 32px; }
.tabbar { position: fixed; width: 100%; max-width: 560px; bottom: 0; height: calc(70px + var(--safe-b)); padding: 5px 12px calc(5px + var(--safe-b)); grid-template-columns: repeat(5, 1fr); background: #07120ff5; background-image: none; border-top: 1px solid #2a3c32; border-radius: 0; box-shadow: 0 -8px 28px #0002; backdrop-filter: blur(18px); }
.tabbar button, .tabbar .tab-ai { width: 100%; height: 58px; top: 0; color: #dddeda; background: none; border-radius: 10px; box-shadow: none; gap: 5px; font-size: 11px; font-weight: 400; }
.tabbar .tab-ai span { position: static; color: inherit; font-weight: inherit; }
.tabbar button svg, .tabbar .tab-ai svg { width: 23px; height: 23px; stroke-width: 1.6; }
.tabbar button.active, .tabbar .tab-ai.active span { color: var(--lime); }
.tabbar button.active:not(.tab-ai)::after { display: none; }
.tabbar button.active:not(.tab-ai) span { display: block; }
.tabbar .tab-ai, .tabbar .tab-ai.active { position: relative; top: -30px; width: 64px; height: 64px; justify-self: center; border-radius: 50%; background: var(--lime); color: var(--lime-ink); box-shadow: 0 0 0 6px #07120f, 0 8px 24px #a3cf3038; font-weight: 700; }
.tabbar .tab-ai svg { width: 26px; height: 26px; }
.tabbar .tab-ai span { position: absolute; bottom: -19px; color: #dddeda; font-size: 11px; font-weight: 500; }
.tabbar .tab-ai.active span { color: var(--lime); }
.card, .field-row, .action, .chip, .composer, .askbar, .kind-chips button, .year-chip { background: linear-gradient(125deg, #192a22b3, #0e1d18b3); border: 1px solid var(--line); box-shadow: none; }
.card { padding: 16px; }
.card h2, .card h3 { letter-spacing: -.025em; }
.hero { background: #12251c; background-image: var(--contours); color: var(--ink); }
.hero h2 { font-weight: 750; }
.btn { background: var(--lime); color: var(--lime-ink); border: 1px solid transparent; border-radius: 24px; min-height: 44px; font-weight: 700; }
.btn.ghost { background: #0c1914; border: 1px solid #3b4d40; color: var(--ink); }
.btn:hover:not(:disabled), .shutter:hover { filter: brightness(1.08); }
.btn.danger { color: var(--danger); background: var(--clay-soft); }
.section-title { color: var(--ink); font-size: 17px; font-weight: 650; letter-spacing: -.02em; text-shadow: none; margin: 24px 0 12px; }
.section-title::before { display: none; }
.section-title .more-link { font-size: 12px; }
.field-input, select.field-input, textarea.field-input { background: #16271f; color: var(--ink); border: 1px solid #34473b; border-radius: 12px; }
.field-input:focus { border-color: var(--lime); box-shadow: 0 0 0 3px #d4fa3018; }
.search input { border-radius: 12px; padding-top: 13px; padding-bottom: 13px; }
.segmented, .an-seg { background: #0d1c16; border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 3px; }
.segmented button, .an-seg button { border-radius: 9px; color: #c2cfc6; }
.segmented button.on, .an-seg button.on { background: #34463a; color: var(--ink); box-shadow: none; }
.kind-chips button { border-radius: 10px; font-size: 12px; font-weight: 500; color: #c6d0ca; box-shadow: none; }
.kind-chips button.on { background: var(--lime); color: var(--lime-ink); }
.tag, .use .rate { color: #d1e6b5; background: #273a21; }
.tag.warn, .tag.amber, .verdict.warn, .pill.warn { color: #f0d789; background: #39331d; }
.badge { background: #263921; color: var(--lime); }
.pill { background: #2b3b31; color: #c7d1c9; }
.pill.ok, .verdict.ok { background: #263921; color: #d0ef9c; }
.pill.bad, .verdict.bad { background: #3a241f; color: #ffb6a4; }
.pill.info { background: var(--sky-soft); color: var(--sky); }
.empty { border: 1px dashed #3d5042; background: #11231a; border-radius: 16px; }
.action { border-radius: 14px; font-size: 11px; font-weight: 500; }
.action svg { color: var(--lime); background: none; padding: 4px; border-radius: 0; }
.actions.four { gap: 7px; }
.actions.four .action { padding: 14px 3px; }
.askbar { grid-template-columns: auto minmax(0, 1fr) auto; border-radius: 22px; padding: 10px 10px 10px 16px; min-height: 78px; background: #071410; margin: 12px 0 18px; }
.askbar .ai { background: var(--lime); color: var(--lime-ink); }
.askbar input { width: 100%; font-size: 14px; }
.askbar button { background: var(--lime); color: var(--lime-ink); width: 48px; height: 48px; }
.askbar button svg { width: 23px; height: 23px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.chat-save-status { color: var(--muted); font-size: 12px; }
.chat-save-status:empty { display: none; }
.chat-history { display: grid; gap: 10px; }
.chat-history-row { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.chat-history-row.current { border-color: var(--lime); }
.chat-history-item { display: grid; flex: 1; min-width: 0; gap: 7px; padding: 14px; text-align: left; color: var(--ink); background: none; border: 0; border-radius: 12px; }
.chat-history-delete { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: 5px; border: 0; border-radius: 10px; color: var(--muted); background: none; }
.chat-history-delete svg { width: 20px; height: 20px; }
.chat-history-delete:hover, .chat-history-delete:focus-visible { color: var(--danger); background: #39291f; }
.chat-history-delete:disabled { opacity: .5; }
.chat-history-item b { overflow-wrap: anywhere; }
.chat-history-item small { color: var(--muted); }
.wx-hero { margin: 0 0 14px; min-height: 64px; padding: 12px; border-radius: 15px; background: #10231ce8; border: 1px solid #3a4b3e; backdrop-filter: blur(16px); gap: 8px; }
.wx-temp b { font-size: 29px; color: var(--ink); font-weight: 750; letter-spacing: -.05em; }
.wx-temp svg { color: var(--lime); width: 28px; height: 28px; }
.wx-temp small { max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-meta { gap: 12px; }
.wx-meta span { font-size: 10px; }
.wx-meta b { font-size: 13px; font-weight: 600; }
.home-tip.banner, .home-tip.banner.warn, .home-tip.banner.bad { background: #13271c; border: 1px solid #3c5136; color: var(--ink); }
.home-tip.banner.warn { border-color: #6b5b31; }
.home-tip.banner.bad { border-color: #704237; }
.home-tip.banner h3 { font-size: 18px; color: var(--ink); }
.home-tip.banner p { color: var(--muted); }
.home-tip.banner .btn { background: var(--lime); color: var(--lime-ink); }
.field-row { border-radius: 13px; padding: 12px; }
.field-row .swatch { width: 38px; height: 38px; border-radius: 10px; }
.field-card .area { font-size: 48px; color: var(--ink); letter-spacing: -.06em; }
.field-focus > .kind { font-size: 44px; font-weight: 750; letter-spacing: -.055em; color: var(--ink); }
.field-focus h3 { font-size: 20px; }
.year-chip { color: var(--ink); border-radius: 10px; box-shadow: none; }
.map-wrap { border: 1px solid var(--line); border-radius: 16px; }
.map-layers button, .ndvi-legend { background: #10231cf2; color: var(--ink); border: 1px solid #42523f; }
.map-layers button.on { background: var(--lime); color: var(--lime-ink); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #12251c; color: var(--ink); }
.leaflet-popup-content .btn { color: var(--lime-ink); }
.leaflet-popup-content .btn.ghost { color: var(--ink); }
.leaflet-bar a { background: #12251c; color: var(--ink); }
.leaflet-control-layers { color-scheme: light; color: #16201a; }
.ndvi-row, .soil-row { background: #1a2d22; }
.cond-tile.ok em, .ndvi-row.ok b, .ndvi-verdict.ok, .balance .ok b { color: #c5e89d; }
.cond-tile.warn em, .ndvi-row.warn b, .ndvi-verdict, .balance .warn b, .wx-soil, .ndvi-legend p.warn { color: #ead68e; }
.cond-tile.bad em, .ndvi-row.bad b, .ndvi-verdict.bad, .balance .bad b { color: #ffb49b; }
.sheet-panel { background: #102019; border: 1px solid #34473a; border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -20px 80px #0005; }
.sheet-backdrop { background: #0009; backdrop-filter: blur(5px); }
.sheet-panel h2 { font-size: 25px; font-weight: 750; letter-spacing: -.04em; }
.sheet-close { color: var(--ink); background: #23362a; }
.menu-item { color: var(--ink); border-color: var(--line); }
.menu-item svg { color: var(--lime); }
.menu-item.danger, .menu-item.danger svg { color: var(--danger); }
.toast { background: var(--lime); color: var(--lime-ink); border: 1px solid #e2ff7e; }
.composer { background: #102019f5; border-radius: 20px; }
.composer textarea { background: #091710; }
.composer .field-select select { color: var(--ink); }
.bubble { background: #172a20; color: var(--ink); border: 1px solid var(--line); }
.sticker { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 96px; margin: 2px auto 12px; padding: 8px 8px 7px; border-radius: 24px; background: #10241a; border: 1px solid #3d5a34; }
.sticker b { font-size: 44px; line-height: 1; font-weight: 400; }
.sticker span { color: var(--muted); font-size: 11px; font-weight: 600; text-align: center; }
.msg.user .bubble { background: #2a3f20; color: var(--ink); }
.bubble blockquote { color: #d1e4ba; }
.send:disabled { background: #2e3c2c; color: #a8b59e; }
.attach { color: var(--muted); }
.stat b, .an-card b, .an-note b { color: var(--ink); }
.an-rank .bar, .retail-revenue-track, .an-scale { background-color: #24382a; }
.an-rank .bar i, .retail-revenue-track span { background: #a1c85d; }
.retail-revenue { color: var(--lime); }
.retail-stale { color: #e8c58a; }
.an-card { background: #14271d; border: 1px solid var(--line); box-shadow: none; }
.an-card.nc, .an-card.missing { background: #15261d; border: 1px dashed #485642; }
.an-delta { background: #283d2e; color: #cad9c3; }
.an-status.model { color: var(--sky); }
.map-draw { background: var(--lime); color: var(--lime-ink); }
.draw-bar button { background: #14271d; color: var(--ink); border: 1px solid #506343; }
.draw-bar button.on { background: var(--lime); color: var(--lime-ink); }
.votes button.on { color: var(--lime); }
.an-seg.tabs { display: flex; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #4b6038 transparent; }
.an-seg.tabs button { flex: 0 0 auto; padding: 9px 12px; }
.an-delta.up, .an-status { color: #d2eab5; }
.an-delta.down { color: #f5b699; }
.an-status.preliminary { color: #ead68e; }
.an-summary { background-color: #163022; }
.chip.on { color: var(--lime); }
/* Photo capture follows the presentation's frame, corners and lime shutter. */
.diagnose-frame { position: relative; min-height: 330px; background: radial-gradient(ellipse at 50% 60%, #28452a, #0b1913); border-color: #60705a; border-radius: 16px; }
.diagnose-frame img { height: 380px; object-fit: contain; background: #07130c; }
.diagnose-empty { max-width: 290px; padding: 45px 24px 70px; font-size: 14px; line-height: 1.55; color: #c0cebf; }
.diagnose-empty svg { color: var(--lime); }
.shutter { display: grid; place-items: center; color: #0b1507; border: 4px solid #112010; outline: 2px solid var(--lime); background: var(--lime); box-shadow: none; }
.shutter svg { width: 30px; height: 30px; }
#view > .hint { color: var(--muted); text-shadow: none; }
@media (min-width: 720px) {
  #app { border: 1px solid #35473a; border-radius: 28px; background: #0b1913; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 30px 90px #0005; }
  .tabbar { position: fixed; }
}
@media (max-width: 360px) {
  #view { padding-left: 12px; padding-right: 12px; }
  .topbar h1 { font-size: 25px; }
  .wx-meta { gap: 8px; }
  .wx-temp b { font-size: 26px; }
  .actions.four { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}