/* Excel Fix — статичный фронт (v1). Пересборка макета Design_Ver_1 в vanilla без React/CDN.
   Шрифты — только системные (без внешних запросов: приватность + офлайн-надёжность). */
:root{
  --green:#2FA36B; --green-dark:#23845A; --ink:#1E2B25; --muted:#5C6A62;
  --bg:#F7F8F6; --line:#E3E7E3; --line-soft:#EEF1EE; --err:#E05252;
  --mono:'Spline Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Инструкции и справочные блоки: тот же статичный интерфейс, без внешних ресурсов. */
.guide-section{margin-top:32px;padding-top:28px;border-top:1px solid var(--line);line-height:1.7;}
.guide-section h2{margin:0 0 14px;font-size:23px;line-height:1.3;letter-spacing:-.4px;}
.guide-section p{margin:12px 0;color:var(--muted);}
.steps{padding-left:24px;margin:0;}
.steps li{padding:4px 0 4px 4px;}
.guide-links{display:grid;gap:10px;}
.guide-links>a{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-weight:600;line-height:1.45;}
.guide-links>a:hover{border-color:var(--green);}
.guide-links span{display:block;margin-top:5px;color:var(--muted);font-size:14px;font-weight:400;}
.faq details{border-bottom:1px solid var(--line);padding:14px 0;}
.faq summary{cursor:pointer;font-weight:600;}
.faq summary:focus-visible{outline:3px solid var(--green-dark);outline-offset:3px;}
.faq details p{margin-bottom:0;}
#dropzone,#statistics{scroll-margin-top:100px;}
.article-main{max-width:808px;padding-top:36px;}
.guide-article{font-size:17px;line-height:1.75;overflow-wrap:anywhere;}
.guide-article h1{font-size:clamp(29px,4.6vw,42px);line-height:1.15;letter-spacing:-1px;margin:10px 0 20px;}
.guide-article h2{font-size:24px;line-height:1.3;letter-spacing:-.4px;margin:32px 0 12px;}
.guide-article p{margin:14px 0;}
.guide-article ul,.guide-article ol{padding-left:24px;}
.guide-article li{padding:3px 0;}
.eyebrow{color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;}
.guide-article .lead{font-size:19px;color:var(--muted);}
/* Наглядное «до → после». Намеренно НЕ картинка, а настоящая таблица: текст примера остаётся
   в исходном HTML, поэтому его читают поисковик, ИИ с веб-поиском и скринридер. Картинка всё
   это потеряла бы, а альт-текст пришлось бы дублировать руками. Внешних ресурсов не добавляет. */
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:start;margin:6px 0 4px;}
.ba-col{min-width:0;}
.ba-arrow{align-self:center;}
.ba-cap{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);}
.ba-arrow{font-size:20px;font-weight:700;color:var(--green);line-height:1;}
.ba-note{margin:10px 0 0;font-size:13px;color:var(--muted);line-height:1.5;}
table.xl{border-collapse:collapse;width:100%;background:#fff;font-size:14px;}
table.xl th,table.xl td{border:1px solid var(--line);padding:7px 9px;text-align:left;overflow-wrap:anywhere;}
table.xl th[scope=col],table.xl th[scope=row]{background:#EEF1EE;color:#8A968E;font-weight:600;font-size:11px;text-align:center;}
table.xl th[scope=row]{width:26px;}
table.xl td.num{font-family:var(--mono);text-align:right;}      /* настоящее число — вправо */
table.xl td.txt{font-family:var(--mono);text-align:left;color:#B06A6A;}  /* число текстом — влево */
table.xl td.ok{color:var(--green-dark);font-weight:600;}
table.xl td.bad{color:#B06A6A;font-weight:600;}   /* неверный итог: занижен молча, без ошибки */
table.xl tr.gone th,table.xl tr.gone td{background:#FBECEC;}
@media(max-width:640px){
  .ba{grid-template-columns:1fr;gap:10px;}
  .ba-arrow{justify-self:center;transform:rotate(90deg);}
}
.guide-example{padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:14px;margin:22px 0;}
.guide-example p:first-child{margin-top:0;}.guide-example p:last-child{margin-bottom:0;}
.guide-example code{font-family:var(--mono);font-size:.95em;white-space:normal;}
.guide-cta{display:inline-block;text-decoration:none;text-align:center;line-height:1.4;}
a.guide-cta,a.guide-cta:hover{color:#fff;}
.article-nav{font-size:14px;font-weight:600;}
.guide-note{font-size:14px;color:var(--muted);}
.guide-footer{line-height:1.8;}.guide-footer a{text-decoration:underline;text-underline-offset:3px;}
*{box-sizing:border-box;}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column; color:var(--ink);
  background:var(--bg); font-family:'Golos Text',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--green-dark);text-decoration:none;} a:hover{color:var(--green);}

/* Видимый фокус для клавиатурной навигации (карточки-тумблеры, дропзона, кнопки, ссылки) */
.card:focus-visible,.dropzone:focus-visible,.tg-btn:focus-visible,.btn-primary:focus-visible,
.btn-ghost:focus-visible,a:focus-visible{outline:3px solid var(--green-dark);outline-offset:3px;}

/* ---- keyframes (перенесены из макета-канона) ---- */
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes bump{0%{transform:scale(1);}30%{transform:scale(1.13);}100%{transform:scale(1);}}
@keyframes collapseRow{0%,22%{height:22px;opacity:1;}38%{height:0;opacity:0;}82%{height:0;opacity:0;}95%,100%{height:22px;opacity:1;}}
@keyframes shrinkCol{0%,22%{width:46px;}40%,82%{width:22px;}96%,100%{width:46px;}}
@keyframes c2text{0%,26%{opacity:1;transform:translateX(0);}44%{opacity:0;transform:translateX(-5px);}88%{opacity:0;}100%{opacity:1;transform:translateX(0);}}
@keyframes c2num{0%,28%{opacity:0;transform:translateX(6px);}48%,90%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(6px);}}
@keyframes c2marker{0%,46%{opacity:0;transform:translateY(5px);}62%,88%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(5px);}}
@keyframes indeterminate{0%{left:-40%;}100%{left:100%;}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px);}to{opacity:1;transform:translate(-50%,0);}}

/* ---- header ---- */
header{position:sticky;top:0;z-index:50;background:rgba(247,248,246,.85);backdrop-filter:blur(10px);border-bottom:1px solid #E7EAE7;}
.header-inner{max-width:1120px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:14px;}
.brand{display:flex;align-items:center;gap:9px;margin-right:auto;}
.brand .mark{width:29px;height:29px;border-radius:8px;background:var(--green);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;}
.brand .name{font-size:18px;font-weight:700;letter-spacing:-.2px;}
.counter{display:inline-flex;align-items:center;gap:8px;background:#123B29;color:#EAF6F0;padding:6px 12px;border-radius:11px;white-space:nowrap;}
.counter.bump{animation:bump .55s ease;}
.counter .cap{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#6FAE8E;}
.counter .unit{font-size:12px;font-weight:600;color:#CDEBDA;}
.odometer{display:flex;gap:2px;}
.odo-digit{height:26px;width:17px;overflow:hidden;background:rgba(255,255,255,.07);border-radius:4px;}
.odo-reel{display:flex;flex-direction:column;transition:transform .65s cubic-bezier(.2,.85,.25,1);}
.odo-cell{height:26px;line-height:26px;text-align:center;font-family:var(--mono);font-weight:700;font-size:17px;color:#fff;}
.tg-btn{display:inline-flex;align-items:center;gap:8px;background:#229ED9;color:#fff;border:none;border-radius:9px;padding:9px 15px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .2s;}
.tg-btn:hover{background:#1E8CC0;}
.tg-btn .tri{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:9px solid #fff;display:inline-block;}

/* ---- main ---- */
main{flex:1;width:100%;max-width:880px;margin:0 auto;padding:clamp(18px,3.2vw,32px) 24px 32px;display:flex;flex-direction:column;}
.offer{text-align:center;max-width:660px;margin:0 auto 22px;}
.offer h1{font-size:clamp(28px,3.6vw,42px);line-height:1.08;letter-spacing:-1px;font-weight:700;margin:0 0 12px;}
.offer p{font-size:clamp(15px,1.6vw,18px);line-height:1.45;color:var(--muted);margin:0;}

/* ---- feature cards ---- */
.cards{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.card{position:relative;flex:1 1 300px;min-width:280px;background:#fff;border:1px solid #D2E4DA;border-radius:18px;padding:16px 20px 16px;cursor:pointer;transition:all .25s ease;user-select:none;box-shadow:0 2px 4px rgba(20,50,35,.04);}
.card.off{opacity:.55;filter:grayscale(.5);background:#FAFBFA;border-style:dashed;border-color:var(--line);box-shadow:none;}
.card .top{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px;}
.card .title{font-size:17px;font-weight:700;margin-bottom:4px;}
.card .desc{font-size:13.5px;line-height:1.45;color:var(--muted);text-align:left;}
.switch{width:42px;height:24px;border-radius:999px;flex:none;background:var(--green);position:relative;transition:background .25s ease;}
.card.off .switch{background:#CDD5CF;}
.switch .knob{position:absolute;top:3px;left:21px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .25s ease;}
.card.off .switch .knob{left:3px;}

/* card1 mini table anim */
.anim1-wrap{display:flex;align-items:center;justify-content:center;height:118px;padding:8px 0 2px;}
.mini-table{width:196px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;}
.mt-row{display:flex;height:22px;border-bottom:1px solid var(--line-soft);}
.mt-row.head{background:#EAF6F0;}
.mt-row.collapse{overflow:hidden;animation:collapseRow 4.4s ease-in-out infinite;}
.mt-cell{flex:1 1 0;border-right:1px solid var(--line-soft);display:flex;align-items:center;justify-content:flex-end;padding:0 5px;}
.mt-cell.last{flex:none;width:46px;animation:shrinkCol 4.4s ease-in-out infinite;}
.mt-bar{height:5px;border-radius:2px;background:#CCD6D0;}
.mt-row.head .mt-bar{background:#9FCBB4;}

/* card2 number anim */
.anim2-wrap{display:flex;align-items:center;gap:12px;padding:10px 0 4px;flex-direction:column;position:relative;top:14px;}
.c2-box{position:relative;width:170px;height:52px;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden;font-family:var(--mono);}
.c2-text{position:absolute;inset:0;display:flex;align-items:center;padding:0 12px;justify-content:flex-start;color:#8A968E;font-size:15px;animation:c2text 4.6s ease-in-out infinite;}
.c2-num{position:absolute;inset:0;display:flex;align-items:center;padding:0 12px;justify-content:flex-end;color:var(--ink);font-weight:600;font-size:16px;animation:c2num 4.6s ease-in-out infinite;}
.c2-marker{display:inline-flex;align-items:center;gap:6px;background:#EAF6F0;color:var(--green-dark);font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;animation:c2marker 4.6s ease-in-out infinite;}
.c2-dot{width:7px;height:7px;border-radius:50%;background:var(--green);}

/* ---- dropzone ---- */
.dropzone{position:relative;border-radius:20px;padding:clamp(22px,3.2vw,38px) 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:190px;background:#fff;border:2px dashed #C9D3CD;cursor:pointer;transition:border-color .25s ease,background .25s ease,box-shadow .25s ease,transform .25s ease;}
.dropzone:hover.state-idle{border-color:var(--green);background:#F8FBF9;}
.dropzone.state-dragover{border:2px dashed var(--green);background:#EAF6F0;transform:translateY(-2px);box-shadow:0 18px 40px -24px rgba(47,163,107,.55);}
.dropzone.state-disabled{background:#F3F4F2;border:2px dashed #DBE0DB;opacity:.85;cursor:not-allowed;}
.dropzone.state-processing,.dropzone.state-done{border:2px solid var(--green);}
.dropzone.state-done{background:#F3FBF7;}
.dropzone.invalid{border:2px dashed var(--err);background:#FDECEC;}
.dz-view{display:flex;flex-direction:column;align-items:center;}
.file-ico{position:relative;width:46px;height:56px;border:2px solid #C9D3CD;border-radius:7px;background:#fff;margin-bottom:16px;}
.file-ico i{position:absolute;left:9px;right:9px;height:3px;border-radius:2px;background:#DCE3DE;}
.file-ico i:nth-child(1){top:14px;} .file-ico i:nth-child(2){top:24px;} .file-ico i:nth-child(3){top:34px;right:16px;}
.file-ico .tag{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;font-size:8px;font-weight:700;letter-spacing:.5px;padding:2px 5px;border-radius:3px;font-family:var(--mono);}
.dz-title{font-size:clamp(17px,2vw,21px);font-weight:600;margin-bottom:6px;}
.dz-sub{font-size:13px;color:#8A968E;font-family:var(--mono);}
.dz-muted{color:#8A968E;font-size:clamp(17px,2vw,20px);font-weight:600;}
.spinner{width:32px;height:32px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--green);animation:spin .8s linear infinite;margin-bottom:16px;}
.progress{margin-top:16px;width:min(320px,78vw);height:6px;border-radius:999px;background:#EAF0EC;overflow:hidden;position:relative;}
.progress .fill{position:absolute;top:0;height:100%;width:40%;background:var(--green);border-radius:999px;animation:indeterminate 1.1s ease-in-out infinite;}
/* Приписка про найденные числа: вторична по отношению к «Ваш файл готов» и к кнопке скачивания,
   поэтому приглушённая и уже основного текста — это пояснение, а не главная метрика. */
.done-note{max-width:44ch;margin:-8px auto 16px;font-size:13px;line-height:1.45;color:#8A968E;}
.done-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;}
.btn-primary{display:inline-flex;align-items:center;gap:9px;background:var(--green);color:#fff;border:none;border-radius:12px;padding:15px 26px;font-size:17px;font-weight:600;cursor:pointer;font-family:inherit;box-shadow:0 14px 26px -14px rgba(47,163,107,.8);transition:background .2s;}
.btn-primary:hover{background:var(--green-dark);}
.btn-ghost{background:none;border:1px solid #D5DBD6;color:#4A574F;border-radius:12px;padding:14px 20px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .2s,border-color .2s;}
.btn-ghost:hover{background:#F1F4F1;border-color:#C3CBC5;}
.hidden{display:none !important;}

/* ---- trust ---- */
.trust{display:flex;gap:16px;flex-wrap:wrap;margin-top:20px;}
.trust .item{flex:1 1 300px;min-width:260px;display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;}
.trust .emoji{font-size:20px;line-height:1;}
.trust .t{font-weight:700;font-size:15px;margin-bottom:3px;}
.trust .d{font-size:13px;line-height:1.45;color:var(--muted);}

/* ---- раскрывашка приватности (v4) ---- */
/* Native <details>: без JS и без библиотек — открывается с клавиатуры и читается скринридером.
   Стиль намеренно тише карточек: это справка для тех, кто спросит, а не рекламный блок. */
.privacy{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;}
.privacy summary{cursor:pointer;font-weight:600;font-size:13.5px;color:var(--ink);list-style:none;}
.privacy summary::-webkit-details-marker{display:none;}
.privacy summary::before{content:'▸';display:inline-block;margin-right:8px;color:var(--green-dark);transition:transform .15s ease;}
.privacy[open] summary::before{transform:rotate(90deg);}
.privacy summary:focus-visible{outline:3px solid var(--green-dark);outline-offset:3px;border-radius:6px;}
.privacy-body{font-size:13px;line-height:1.5;color:var(--muted);margin-top:10px;}
.privacy-body .ph{font-weight:700;color:var(--ink);margin:12px 0 4px;}
.privacy-body .ph:first-child{margin-top:0;}
.privacy-body p{margin:0 0 4px;}
.privacy-body ul{margin:0;padding-left:18px;}
.privacy-body li{margin-bottom:4px;}

/* ---- footer & toast ---- */
footer{border-top:1px solid #E7EAE7;padding:18px 24px;text-align:center;font-size:13px;color:#8A968E;}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:13px 20px;border-radius:13px;font-size:14.5px;font-weight:600;box-shadow:0 18px 45px -18px rgba(20,40,30,.45);z-index:100;animation:toastIn .3s ease;max-width:90vw;}
.toast.ok{background:#0F3324;color:#EAF6F0;border:1px solid #1C4C36;}
.toast.err{background:#FDECEC;color:#B23B3B;border:1px solid #F5C7C7;}

@media (max-width:560px){
  .counter .cap{display:none;}
  /* Шапка из brand + счётчик + полной Telegram-кнопки не влезала в 320–375px одной строкой:
     разрешаем перенос и ужимаем поля. */
  .header-inner{flex-wrap:wrap;gap:10px 12px;padding:10px 16px;}
  /* Telegram-кнопка чуть компактнее, чтобы шапка на узком экране не выглядела громоздкой. */
  .tg-btn{padding:8px 12px;font-size:13px;}
  .cards{flex-direction:column;}
  /* В столбик карточки и так на всю ширину; min-width:280 давал горизонтальный overflow на 320px. */
  .card{min-width:0;}
  .trust .item{min-width:0;}
  /* Минимальная мобильная опрятность (Г2.3, десктоп-first): ужимаем поля контента, чтобы дропзона
     и офер не липли к краям на телефоне; кнопки «Готово» кладём в столбик на всю ширину — иначе
     на узком экране они жались друг к другу. Полная доводка под макет-канон отложена. */
  main{padding-left:16px;padding-right:16px;}
  .offer{margin-bottom:18px;}
  .dropzone{padding:24px 16px;}
  .done-actions{flex-direction:column;}
  .done-actions .btn-primary,.done-actions .btn-ghost{width:100%;justify-content:center;}
}