/* Lugeja lehe stiil, jagatud prantsuse (/) ja inglise (/en) versiooni vahel.
   Oli varem index.html sees; inglise versiooni tekkides oleks koopia
   tähendanud, et iga kujundusmuudatus tuleb teha kaks korda. */
  :root{
    --bg:#f7f8fa; --card:#fff; --ink:#111827; --muted:#6b7280; --line:#e5e7eb;
    --accent:#1d4ed8; --accent-soft:#eff4ff; --ok:#047857; --ok-soft:#ecfdf5;
    --warn:#b45309; --warn-soft:#fffbeb; --err:#b91c1c; --err-soft:#fef2f2;
    --radius:14px;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --bg:#0d1117; --card:#161b22; --ink:#e6edf3; --muted:#9198a1; --line:#2d333b;
      --accent:#589bff; --accent-soft:#12213d; --ok:#3fb950; --ok-soft:#0f2417;
      --warn:#d29922; --warn-soft:#2b2109; --err:#f85149; --err-soft:#2d1214;
    }
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);
    font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
  .wrap{max-width:920px;margin:0 auto;padding:28px 20px 80px}
  /* Ülariba. Ilma selleta oli ainus tee /cabinet'ini jaluses lehe lõpus —
     külastaja ei leidnud hulgitöötlust üles. */
  .topbar{display:flex;align-items:center;justify-content:space-between;
    gap:16px;flex-wrap:wrap;margin-bottom:34px}
  .brand{margin:0}
  .brand a{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
    text-decoration:none}
  .brand span{color:var(--accent)}
  .topnav{display:flex;gap:18px;align-items:center;font-size:14.5px}
  .topnav a{color:var(--muted);text-decoration:none;font-weight:600;white-space:nowrap}
  .topnav a:hover{color:var(--ink)}
  .topnav a.on{color:var(--accent)}
  /* Keelevahetus on äärisega, et see ei loeks järjekordse rubriigina: see ei
     vii uude teemasse, vaid samasse tööriista teises keeles. */
  .topnav a.lang{
    border:1px solid var(--line);border-radius:999px;padding:3px 10px;
    font-size:13px;font-weight:650;letter-spacing:.01em}
  .topnav a.lang:hover{border-color:var(--accent);color:var(--accent)}
  header{text-align:center;margin-bottom:36px}
  h1{font-size:clamp(28px,4vw,40px);line-height:1.2;margin:0 0 14px;letter-spacing:-.02em}
  .lede{color:var(--muted);font-size:17px;max-width:620px;margin:0 auto}
  .badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
  .badge{font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;
    background:var(--accent-soft);color:var(--accent);letter-spacing:.02em}

  /* Drop zone */
  #drop{background:var(--card);border:2px dashed var(--line);border-radius:var(--radius);
    padding:48px 24px;text-align:center;cursor:pointer;transition:.18s;position:relative}
  #drop:hover,#drop.over{border-color:var(--accent);background:var(--accent-soft)}
  #drop.over{transform:scale(1.01)}
  .drop-icon{font-size:40px;line-height:1;margin-bottom:12px}
  .drop-main{font-size:19px;font-weight:650;margin-bottom:6px}
  .drop-sub{color:var(--muted);font-size:14px}
  input[type=file]{display:none}

  .privacy{text-align:center;color:var(--muted);font-size:13px;margin-top:14px}
  .privacy a{color:var(--accent);font-weight:600}

  /* States */
  .panel{margin-top:28px}
  /* Väärtuspakkumine — loetav 5 sekundiga, rohelised linnukesed */
  .why{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;align-items:center;
    margin-top:18px;font-size:13.5px;color:var(--ink)}
  .why span{white-space:nowrap}
  .why span::first-letter{color:var(--ok)}
  .why-title{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
  .why-dev{color:var(--muted)}
  .why-dev a{color:var(--accent);font-weight:600}
  /* Eristaja-kast: "Nouveau" badge + üks lause + demo-link */
  .feature{display:flex;gap:10px;align-items:flex-start;margin:14px auto 0;
    max-width:640px;background:var(--accent-soft);border:1px solid var(--accent);
    border-radius:10px;padding:10px 14px;font-size:14px;line-height:1.55}
  .feature-badge{flex:none;background:var(--accent);color:#fff;font-size:11px;
    font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    border-radius:999px;padding:3px 10px;margin-top:2px}
  .feature a{color:var(--accent);font-weight:650;white-space:nowrap}
  /* PDF↔XML kõige tugevam USP — konkreetne numbriline kontrast, mitte
     abstraktne "detecte les ecarts". Näitab sekundiga, MIKS tööriista vaja. */
  .mismatch{max-width:640px;margin:14px auto 0;text-align:center;
    background:var(--accent-soft);border:1px solid var(--accent);
    border-radius:12px;padding:16px 18px}
  .mm-vs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    justify-content:center;margin-bottom:10px}
  .mm-pill{background:var(--card);border:1px solid var(--line);border-radius:8px;
    padding:7px 13px;font-size:15px;font-weight:600}
  .mm-pill b{font-size:16px}
  .mm-pill.mm-xml{border-color:var(--warn);color:var(--warn)}
  .mm-neq{font-size:20px;font-weight:800;color:var(--warn)}
  .mm-txt{margin:0;font-size:14px;line-height:1.5}
  .mm-txt a{color:var(--accent);font-weight:650;white-space:nowrap}
  /* Allalaadimisnupud (re-eksport teise formaati). */
  .dl-row{display:flex;flex-wrap:wrap;gap:10px}
  .dl-btn{font:inherit;font-weight:600;font-size:14px;cursor:pointer;
    padding:9px 16px;border-radius:9px;border:1px solid var(--accent);
    background:var(--accent-soft);color:var(--accent)}
  .dl-btn:hover{background:var(--accent);color:#fff}
  .dl-btn:disabled{opacity:.6;cursor:default}
  /* Kontrolliraport — esmane, täidetud nupp (tähtsaim väljund). */
  .report-btn{font:inherit;font-weight:650;font-size:15px;cursor:pointer;
    padding:12px 22px;border-radius:10px;border:1px solid var(--accent);
    background:var(--accent);color:#fff}
  .report-btn:hover{filter:brightness(1.08)}
  .report-btn:disabled{opacity:.6;cursor:default}
  /* Võrdlus "à la main / avec". Parem veerg on selge VÕITJA (sinine taust +
     badge + CTA). Kogu parem veerg on TASUTA (veeb), tasuline on ainult API.
     Rõhk: ajavõit + vigade vältimine, mitte pelgalt funktsioonid. */
  .compare-title{text-align:center;font-size:20px;margin:8px 0 4px}
  .compare-sub{text-align:center;color:var(--muted);font-size:14px;margin:0 0 18px}
  .compare{max-width:780px;margin:0 auto;display:grid;
    grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .compare-col{background:var(--card);border:1px solid var(--line);
    border-radius:12px;padding:20px 22px}
  .compare-col.avec{border:2px solid var(--accent);background:var(--accent-soft)}
  .compare-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    font-size:13px;margin-bottom:16px;color:var(--muted)}
  .compare-col.avec .compare-h{color:var(--accent);font-weight:650}
  .compare-badge{background:var(--accent);color:#fff;font-size:10.5px;
    font-weight:700;letter-spacing:.03em;text-transform:uppercase;
    border-radius:999px;padding:3px 9px}
  .compare-col ul{list-style:none;margin:0;padding:0;display:flex;
    flex-direction:column;gap:14px}
  .compare-col li{display:flex;gap:10px;align-items:flex-start;
    font-size:14.5px;line-height:1.5}
  .compare-col.sans li{color:var(--muted)}
  .compare-ico{flex:none;font-weight:800;font-size:14px;line-height:1.4}
  .compare-col.sans .compare-ico{color:var(--warn)}
  .compare-col.avec .compare-ico{color:var(--ok)}
  .compare-cta{display:inline-block;margin-top:18px;background:var(--accent);
    color:#fff;text-decoration:none;font-weight:650;font-size:15px;
    padding:10px 20px;border-radius:9px}
  .compare-cta:hover{filter:brightness(1.08)}
  @media(max-width:560px){.compare{grid-template-columns:1fr}}
  /* "Mida näed kohe" — konkreetne tulemus tegevusest, drop-zone'i all.
     Fraasid on saidil juba kasutusel (contenu en clair, EN 16931, PDF↔XML). */
  .seeing{max-width:600px;margin:16px auto 0;text-align:center}
  .seeing-title{display:block;font-weight:650;font-size:14px;margin-bottom:8px}
  .seeing ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;
    gap:8px;justify-content:center}
  .seeing li{background:var(--ok-soft);color:var(--ink);border:1px solid var(--line);
    border-radius:999px;padding:5px 13px;font-size:13px}
  .seeing li::before{content:"✓";color:var(--ok);font-weight:800;margin-right:6px}
  /* Kaks selget teekonda: üksik arve (juba siin) vs terve kaust (cabinet).
     Kasutab ainult juba valideeritud prantsuse fraase. */
  .paths{display:grid;grid-template-columns:1fr 1fr;gap:10px;
    max-width:640px;margin:14px auto 0}
  .path{background:var(--card);border:1px solid var(--line);border-radius:10px;
    padding:12px 15px;font-size:13.5px;line-height:1.5}
  .path-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;color:var(--muted);margin-bottom:5px}
  .path p{margin:0;color:var(--ink)}
  /* Aktiivne teekond: kasutaja on juba üksiku arve lugejal. */
  .path-active{background:var(--accent-soft);border-color:var(--accent)}
  .path-active .path-tag{color:var(--accent)}
  .path-active .path-tag::before{content:"✓ "}
  /* Cabinet: teine teekond, klõbitav kaart (tõuseb esile hõljutamisel). */
  .path-cta{text-decoration:none;display:block}
  .path-cta:hover{border-color:var(--accent);background:var(--accent-soft)}
  .path-arrow{display:inline-block;margin-top:5px;color:var(--accent);font-weight:650}
  @media(max-width:520px){.paths{grid-template-columns:1fr}}
  /* Kohene verdikt + statistika: näitab, et parser on päris mootor,
     mitte PDF-vaatur. Arvud tulevad päris analüüsist. */
  .statline{background:var(--card);border:1px solid var(--line);border-radius:10px;
    padding:10px 16px;margin-bottom:14px;font-size:14.5px;font-weight:600}
  .statline .tick{color:var(--ok)}
  /* Tulemuse värvid kandvamaks: roheline/punane taust, mitte ainult tekst */
  .check.ok{background:var(--ok-soft);border-color:var(--ok)}
  .check.err{background:var(--err-soft);border-color:var(--err)}
  .check.warn{background:var(--warn-soft);border-color:var(--warn)}
  /* Neutraalne: kontroll polnud rakendatav (tundmatu formaat). Ei rohelist,
     mis rahustaks valelt, ega punast, mis paneks arvama, et arve on katki. */
  .check.neutral{background:var(--card);border-color:var(--line)}
  .check.neutral .check-head{color:var(--muted)}
  /* Näidistulemus — selgelt märgistatud "exemple", et keegi ei peaks seda
     oma päris analüüsiks. Katkendjoon + silt eristavad illustratsiooni. */
  .example{position:relative;border:1px dashed var(--line);border-radius:var(--radius);
    padding:16px 16px 6px;background:var(--accent-soft)}
  .example-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;color:var(--accent);background:var(--card);
    padding:3px 10px;border:1px solid var(--accent);border-radius:999px;margin-bottom:14px}
  .example .card,.example .check{box-shadow:none}
  .example-note{font-size:13.5px;line-height:1.6;margin:4px 2px 6px}
  .example-note a{color:var(--accent);font-weight:600}
  .spinner{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--accent);
    border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 12px}
  @keyframes spin{to{transform:rotate(360deg)}}
  .center{text-align:center;color:var(--muted);padding:32px}

  .alert{border-radius:10px;padding:14px 16px;margin-bottom:18px;font-size:14.5px}
  .alert-err{background:var(--err-soft);color:var(--err);border:1px solid var(--err)}
  .alert-warn{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn)}
  .alert strong{display:block;margin-bottom:3px}
  .alert ul{margin:6px 0 0;padding-left:20px}
  /* Abiplokk veateate all: mida kasutaja edasi teeb. Ilma selleta on
     veateade ummiktee ja kasutaja lihtsalt lahkub. */
  .alert-help{margin-top:12px;padding-top:12px;border-top:1px solid currentColor;
    opacity:.9;font-size:14px;font-weight:400;line-height:1.55}
  .alert-help a{color:inherit;font-weight:650}
  .alert-ok{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok)}

  /* Vastavuskontroll */
  .check{border-radius:var(--radius);padding:18px 20px;margin-bottom:18px;
    border:1px solid var(--line);background:var(--card)}
  .check-head{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
  .check-icon{font-size:20px;line-height:1}
  .check.ok .check-head{color:var(--ok)}
  .check.err .check-head{color:var(--err)}
  .check.warn .check-head{color:var(--warn)}
  .check ul{margin:12px 0 0;padding-left:0;list-style:none}
  .check li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;
    border-top:1px solid var(--line);font-size:14.5px;color:var(--ink)}
  .bt{flex:none;font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;
    background:var(--bg);border:1px solid var(--line);color:var(--muted);
    font-variant-numeric:tabular-nums;margin-top:2px}
  .sev{flex:none;margin-top:1px}

  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:24px;margin-bottom:18px}
  .card h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
    margin:0 0 16px;font-weight:700}

  .inv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
  .inv-num{font-size:26px;font-weight:700;letter-spacing:-.01em}
  .fmt{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
  .pill{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;
    background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok)}
  .dates{text-align:right;font-size:14px;color:var(--muted);min-width:180px}
  .dates b{color:var(--ink);font-weight:600}

  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:680px){.grid2{grid-template-columns:1fr}.dates{text-align:left}}
  .party-name{font-weight:650;font-size:17px;margin-bottom:8px}
  .kv{font-size:14px;color:var(--muted);margin:3px 0}
  .kv span{color:var(--ink)}

  table{width:100%;border-collapse:collapse;font-size:14.5px}
  th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
    color:var(--muted);padding:0 10px 10px;font-weight:700;border-bottom:1px solid var(--line)}
  td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
  tr:last-child td{border-bottom:none}
  .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .scroll{overflow-x:auto}

  .totals{margin-left:auto;max-width:340px}
  .trow{display:flex;justify-content:space-between;padding:9px 0;font-size:15px}
  .trow+.trow{border-top:1px solid var(--line)}
  .trow.grand{font-size:20px;font-weight:700;border-top:2px solid var(--ink);margin-top:4px;padding-top:13px}
  .muted{color:var(--muted)}

  details{margin-top:8px}
  summary{cursor:pointer;color:var(--accent);font-size:14px;font-weight:600}
  pre{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:14px;
    overflow-x:auto;font-size:12.5px;line-height:1.5;margin-top:12px}

  /* Tagasiside */
  .fbwrap{margin-top:16px}
  .fbtoggle{background:none;border:none;color:var(--accent);font:inherit;font-size:13.5px;
    font-weight:600;cursor:pointer;padding:0;text-decoration:underline}
  .fbbox{background:var(--card);border:1px solid var(--line);border-radius:10px;
    padding:16px 18px;margin-top:10px}
  .fbbox p{margin:0 0 10px;font-size:14px;color:var(--muted)}
  .fbbox textarea,.fbbox input[type=email]{width:100%;font:inherit;font-size:14px;
    padding:9px 11px;border:1px solid var(--line);border-radius:8px;
    background:var(--bg);color:var(--ink);margin-bottom:8px}
  .fbbox textarea{min-height:80px;resize:vertical}
  .fbbox button[type=submit]{font:inherit;font-weight:650;font-size:14px;padding:9px 18px;
    border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:#fff;
    cursor:pointer}
  .fbbox button[type=submit]:disabled{opacity:.5;cursor:not-allowed}
  .fbhp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .fbdone{color:var(--ok);font-weight:600;font-size:14px}

  /* Sisu allpool tööriista — Google'i jaoks, ilma et see segaks kasutajat,
     kes tuli lihtsalt faili lugema. */
  .content{margin-top:56px;padding-top:8px}
  .content h2{font-size:21px;margin:38px 0 12px;letter-spacing:-.01em}
  .content p{margin:0 0 14px;line-height:1.68}
  .content ul{margin:0 0 14px;padding-left:22px}
  .content li{margin:5px 0}
  .content a{color:var(--accent);font-weight:600}
  .content table{width:100%;border-collapse:collapse;font-size:15px}
  .content td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
  .content th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
    color:var(--muted);padding:0 10px 10px;font-weight:700;border-bottom:1px solid var(--line)}
  .content code{background:var(--card);border:1px solid var(--line);border-radius:5px;
    padding:1px 6px;font-size:13.5px}

  .disclaimer{margin-top:40px;padding:18px 20px;border-radius:10px;background:var(--card);
    border:1px solid var(--line);font-size:13.5px;color:var(--muted)}
  .disclaimer b{color:var(--ink)}
  footer{text-align:center;color:var(--muted);font-size:13px;margin-top:32px}
  footer a{color:var(--muted)}

  /* Mobiilis peavad lingid olema sõrmega tabatavad. Tekstilink on vaikimisi
     ~18px kõrge; sõrme puutepind on ~44px. Ilma selleta klõpsab kasutaja
     mööda ja arvab, et sait ei tööta. */
  @media (max-width:600px){
    .privacy a, footer a, .fbtoggle{
      display:inline-block;
      padding:11px 4px;
      line-height:1.2;
    }
    .brand a{display:inline-block;padding:6px 0}
    .topbar{gap:8px}
    .topnav{gap:14px;font-size:13.5px;width:100%;flex-wrap:wrap;row-gap:2px}
    .topnav a{padding:8px 0}
  }

  /* ======================================================================
     Mouvement & vie — ajouts non intrusifs, 100 % CSS première partie
     (aucun script tiers, conforme à la politique de confidentialité).
     Respecte prefers-reduced-motion. Sûr pour le SEO : rien n'est masqué
     sans JS — le reveal n'anime que les éléments qui entrent APRÈS le
     chargement, l'état par défaut reste visible.
     ====================================================================== */

  /* Transitions douces sur les éléments interactifs */
  a,.badge,.cta,.dl-btn,.report-btn,.compare-cta,.path-cta,.mm-pill,
  .compare-col,.topnav a{
    transition:color .18s ease,background-color .18s ease,border-color .18s ease,
      transform .2s ease,box-shadow .25s ease,filter .18s ease}

  /* Lueur d'ambiance derrière le hero — profondeur discrète, thème-aware */
  body::before{
    content:"";position:fixed;inset:0 0 auto 0;height:540px;z-index:-1;
    pointer-events:none;
    background:radial-gradient(56% 60% at 50% -14%,
      color-mix(in srgb,var(--accent) 20%,transparent),transparent 72%);
    opacity:.6}

  /* Entrée du hero au chargement, échelonnée */
  @keyframes fx-rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
  header h1{animation:fx-rise .6s cubic-bezier(.2,.7,.2,1) both}
  header .lede{animation:fx-rise .6s cubic-bezier(.2,.7,.2,1) .08s both}
  header .badges{animation:fx-rise .6s cubic-bezier(.2,.7,.2,1) .16s both}
  #drop{animation:fx-rise .6s cubic-bezier(.2,.7,.2,1) .24s both}

  /* Puces de format : réactives au survol */
  .badge:hover{transform:translateY(-2px);background:var(--accent);color:#fff}

  /* Zone de dépôt : icône qui respire + lueur au survol / glisser */
  @keyframes fx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  .drop-icon{animation:fx-float 3.6s ease-in-out infinite}
  #drop:hover{box-shadow:0 14px 40px -18px color-mix(in srgb,var(--accent) 55%,transparent)}
  #drop.over{box-shadow:0 18px 52px -14px color-mix(in srgb,var(--accent) 65%,transparent)}

  /* Le « ≠ » attire discrètement l'œil sur l'argument clé PDF vs XML */
  @keyframes fx-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
  .mm-neq{display:inline-block;animation:fx-pulse 2.4s ease-in-out infinite}

  /* Petits soulèvements au survol */
  .cta:hover,.report-btn:hover,.compare-cta:hover,.dl-btn:hover{transform:translateY(-1px)}
  .path-cta:hover{transform:translateY(-2px);
    box-shadow:0 12px 30px -18px color-mix(in srgb,var(--accent) 50%,transparent)}
  .compare-col.avec:hover{transform:translateY(-2px);
    box-shadow:0 16px 40px -22px color-mix(in srgb,var(--accent) 45%,transparent)}

  /* Reveal au défilement — la classe .fx-play n'est ajoutée que par JS,
     uniquement aux éléments entrant dans la vue après le chargement. */
  .fx-play{animation:fx-rise .6s cubic-bezier(.2,.7,.2,1) both}

  /* Accessibilité : aucune animation si l'utilisateur préfère moins de mouvement */
  @media (prefers-reduced-motion:reduce){
    header h1,header .lede,header .badges,#drop,.drop-icon,.mm-neq,.fx-play{
      animation:none}
    body::before{display:none}
  }