/* =====================================================================
   ZERFARM design system — Shared with ZERFARM Аналитика / Табель — keep in sync.
   Source of truth: Аналитика (github.com/orynbayeev/esep, public/assets/v3.css).
   Tokens keep the apps' names (--a-*, --z-*). Colours only through tokens.
   Theme: the apps default to light (they always set data-theme); the site follows prefers-color-scheme
   unless the visitor picked a theme. Both work: the @media block applies only without data-theme="light".
   ===================================================================== */

/* ---------- Montserrat (self-hosted, same files as the apps) ---------- */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-cyrillic-ext-400-normal.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-cyrillic-ext-500-normal.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-cyrillic-ext-600-normal.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens (light = Аналитика v3) ---------- */
:root{
  --a-font:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --z-display:"Montserrat",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --a-bg:#f3f4f6; --a-card:#ffffff; --a-card2:#f7f8fa; --a-fill:#eef0f2; --a-fill2:#f1f2f4; --a-sep:#e8eaed;
  --a-label:#0f1a14; --a-label2:#5b6761; --a-label3:#98a39c; --a-tint:#1f4a33; --a-gold:#8a6a1e; --a-gold-ink:#7a5d17; --a-gold-soft:#faf0d6;
  --a-primary:#15291e; --a-primary-ink:#ffffff; --a-seg-on:#15291e; --a-green:#1a7a4e; --a-red:#b3392f; --a-orange:#b25e00;
  --a-shadow:0 1px 2px rgba(15,26,20,.04); --a-r:20px;
  --z-forest:#15291e; --z-forest-2:#1f4a33; --z-gold:#c9a24e; --z-gold-2:#e6c784;
  /* additions used by the site (same values the apps use as literals) */
  --a-primary-hover:#1f4a33;                       /* forest-2 */
  --a-pop-shadow:0 6px 24px rgba(16,28,54,.14);
  --a-focus:color-mix(in srgb,var(--a-tint) 35%,transparent);
  --z-hero-grad:linear-gradient(135deg,#1f4a33,#15291e);   /* .zs-k.hero */
  --z-on-forest:#ffffff; --z-on-forest-2:rgba(255,255,255,.78); --z-on-forest-line:rgba(255,255,255,.16); --z-on-forest-fill:rgba(255,255,255,.10);
  --z-bar:color-mix(in srgb,var(--a-card) 92%,transparent);
  --a-ok-soft:#e6f6ee; --a-bad-soft:#fbe9e7;
  --a-mark-bg:#d2a552;                             /* gold tile, as .z-logo i in the apps */
  --a-mark-filter:brightness(0);
  --wm-light:block; --wm-dark:none;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --a-bg:#0b1510; --a-card:#132019; --a-card2:#182a20; --a-fill:#1d3025; --a-fill2:#1a2b21; --a-sep:#213427;
  --a-label:#efe9da; --a-label2:#a9b3ab; --a-label3:#6f7b73; --a-tint:#dcb86c; --a-gold:#d6ad5e; --a-gold-ink:#d6ad5e; --a-gold-soft:rgba(214,173,94,.15);
  --a-primary:#d2a552; --a-primary-ink:#0b1510; --a-seg-on:#d2a552; --a-green:#55c48a; --a-red:#ee736a; --a-orange:#e7a94e;
  --a-shadow:0 0 0 .5px rgba(232,240,233,.06);
  --a-primary-hover:#e0b965; --a-pop-shadow:0 8px 28px rgba(0,0,0,.45);
  --a-ok-soft:rgba(85,196,138,.15); --a-bad-soft:rgba(238,115,106,.15);
  --wm-light:none; --wm-dark:block;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --a-bg:#0b1510; --a-card:#132019; --a-card2:#182a20; --a-fill:#1d3025; --a-fill2:#1a2b21; --a-sep:#213427;
  --a-label:#efe9da; --a-label2:#a9b3ab; --a-label3:#6f7b73; --a-tint:#dcb86c; --a-gold:#d6ad5e; --a-gold-ink:#d6ad5e; --a-gold-soft:rgba(214,173,94,.15);
  --a-primary:#d2a552; --a-primary-ink:#0b1510; --a-seg-on:#d2a552; --a-green:#55c48a; --a-red:#ee736a; --a-orange:#e7a94e;
  --a-shadow:0 0 0 .5px rgba(232,240,233,.06);
  --a-primary-hover:#e0b965; --a-pop-shadow:0 8px 28px rgba(0,0,0,.45);
  --a-ok-soft:rgba(85,196,138,.15); --a-bad-soft:rgba(238,115,106,.15);
  --wm-light:none; --wm-dark:block;
  color-scheme:dark}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--a-bg);color:var(--a-label);font:400 15px/1.55 var(--a-font);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--a-focus);border-radius:10px}
.eyebrow{font:600 11px/1.4 var(--a-font);letter-spacing:.14em;text-transform:uppercase;color:var(--a-label2)}  /* apps: --a-label3 (2.5:1) — label2 for ≥4.5:1 */
.z-title{font-family:var(--z-display);font-weight:600;letter-spacing:-.015em;line-height:1.15}

/* ---------- Buttons (.btn / .btn.primary / .btn.sm) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:0;border-radius:12px;padding:9px 18px;
  background:var(--a-fill2);color:var(--a-tint);font:500 15px/1.2 var(--a-font);text-decoration:none;cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--a-fill)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--a-primary);color:var(--a-primary-ink);font-weight:600}
.btn.primary:hover{background:var(--a-primary-hover)}
.btn.sm{min-height:36px;padding:6px 12px;font-size:14px;border-radius:8px}
.btn svg{width:19px;height:19px;flex:none}

/* ---------- Cards ---------- */
.card{background:var(--a-card);border:0;border-radius:var(--a-r);box-shadow:var(--a-shadow)}
.card.hero,.z-hero{background:var(--z-hero-grad);color:var(--z-on-forest)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .card.lift{transition:transform .25s var(--ease)}
  .card.lift:hover{transform:translateY(-3px)}
}

/* ---------- Chips, badges, segments ---------- */
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--a-fill2);color:var(--a-label);border-radius:999px;padding:5px 12px;font-size:13px;line-height:1.3}
.chip.dept{background:var(--a-gold-soft);color:var(--a-gold-ink)}   /* 5.4:1 light, 6.0:1 dark (esep 2.10.15) */
.pill{display:inline-block;border-radius:999px;padding:3px 10px;font-weight:600;font-size:12px}
.pill.ok{background:var(--a-ok-soft);color:var(--a-green)}
.pill.bad{background:var(--a-bad-soft);color:var(--a-red)}
.seg{display:inline-flex;background:var(--a-fill2);border-radius:999px;padding:3px;gap:0}
.seg button{border:0;background:none;color:var(--a-label2);font:600 12px/1 var(--a-font);letter-spacing:.04em;padding:7px 10px;min-height:30px;border-radius:999px;cursor:pointer}
.seg button.on,.seg button[aria-pressed="true"]{background:var(--a-seg-on);color:var(--a-primary-ink)}

/* ---------- Inputs ---------- */
.z-field{display:grid;gap:6px}
.z-field label{font-size:13px;font-weight:500;color:var(--a-label2)}
.z-field input,.z-input{width:100%;min-height:48px;border:0;border-radius:12px;padding:10px 14px;background:var(--a-fill2);color:var(--a-label);font:400 16px var(--a-font);transition:box-shadow .2s var(--ease)}
.z-field input::placeholder{color:var(--a-label2);opacity:1}
.z-field input:focus{outline:none;box-shadow:0 0 0 3px var(--a-focus)}
.z-field input[aria-invalid="true"]{box-shadow:0 0 0 1.5px var(--a-red)}
.z-field .err{font-size:13px;color:var(--a-red)}

/* ---------- Top bar: brand pill, pill navigation, tools ---------- */
.z-top{position:sticky;top:0;z-index:35;display:flex;align-items:center;gap:12px;padding:14px 0 8px;background:linear-gradient(var(--a-bg) 80%,transparent)}
.z-logo{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none;min-width:0}
.z-logo i{width:40px;height:40px;border-radius:14px;background:var(--a-mark-bg);display:grid;place-items:center;flex:none}
.z-logo i img{width:22px;height:22px;filter:var(--a-mark-filter)}
.z-logo .z-wm{height:16px}
.z-wm{height:14px;width:auto}
.z-wm-l{display:var(--wm-light)}.z-wm-d{display:var(--wm-dark)}
.z-pillnav{display:flex;gap:2px;background:var(--a-card);border-radius:999px;padding:4px;margin:0 auto;box-shadow:var(--a-shadow);max-width:100%;overflow-x:auto;scrollbar-width:none}
.z-pl{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;color:var(--a-label2);font-weight:500;font-size:13px;text-decoration:none;white-space:nowrap;transition:background-color .2s var(--ease),color .2s var(--ease)}
.z-pl:hover{color:var(--a-label);background:var(--a-fill2)}
.z-pl.on{background:var(--a-seg-on);color:var(--a-primary-ink)}
.z-tools{display:flex;align-items:center;gap:2px;background:var(--a-card);border-radius:999px;padding:4px;box-shadow:var(--a-shadow)}
.z-icbtn{width:34px;height:34px;border-radius:999px;color:var(--a-label2);border:0;background:none;cursor:pointer;display:grid;place-items:center}
.z-icbtn:hover{background:var(--a-fill);color:var(--a-label)}
.z-icbtn svg{width:17px;height:17px}

/* ---------- Sheet / bottom bar (phone) ---------- */
.z-tabbar{background:var(--z-bar);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-top:1px solid var(--a-sep)}
.z-sheet{background:var(--a-card);border-radius:18px;box-shadow:var(--a-pop-shadow)}

/* ---------- Entrance animation (zsIn) ---------- */
@keyframes zsIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reveal{transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0ms)}
html.js .reveal:not(.in){opacity:0;transform:translateY(14px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important;animation:none!important}
  html.js .reveal:not(.in){opacity:1;transform:none}
  .btn:active{transform:none}
}
@media (prefers-reduced-transparency:reduce){.z-tabbar{background:var(--a-card);-webkit-backdrop-filter:none;backdrop-filter:none}}